/* ==================================================================
 * 4-Green Versandoptionen — Abstellgenehmigung / Terminabsprache (v1.2.0)
 * ------------------------------------------------------------------
 * Farben/Schriften/Radius stammen nach Möglichkeit vom Theme
 * (currentColor, inherit, --e-global-color-*). Hardcodierte Farben
 * gibt es NUR für die Status-/Icon-Tints (Spec: Abstell grau,
 * Termin 4-green grün #BCCF00) sowie den "Kostenlos"-Pill.
 * ================================================================== */

.fg-so {
    --fgso-primary: var(--e-global-color-accent, #BCCF00); /* 4-green Markenfarbe */
    --fgso-card-bg: var(--e-global-color-white, #ffffff);
    --fgso-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    font-family: inherit;
    color: inherit;
    max-width: 100%;
}

/* ---------- Einheitliche Sektion "Versandoptionen" ---------- */
.fg-so__section-heading {
    font-family: inherit;
    font-weight: 700;
    font-size: 1.15rem;
    line-height: 1.3;
    color: inherit;
    margin: 0 0 14px;
    padding: 0;
}

/* Etwas mehr Atem nach den Versandoptionen, bevor der nächste Checkout-
 * Schritt (Zahlungsoptionen) folgt — wirkt aufgeräumt. */
.fg-so {
    margin-bottom: 28px;
}

.fg-so__subheading {
    font-family: inherit;
    font-weight: 600;
    font-size: .98rem;
    line-height: 1.3;
    color: inherit;
    opacity: .85;
    margin: 0 0 6px;
    padding: 0;
}

/* WC-"Versandart"-Überschrift verstecken, damit nur EINE Sektion sichtbar ist.
 * Stabile Klasse aus dem Checkout-Block-Frontend (wc-block-components-checkout-step__title). */
body.fg-so-unified .wp-block-woocommerce-checkout-shipping-methods-block
    .wc-block-components-checkout-step__title {
    display: none !important;
}

/* ---------- Karte ----------
 * Ausrichtung an die WC-Checkout-Sprache: 1px Rahmen, 4px Eckenradius
 * (wie die Text-Inputs und Radio-Optionen des Block-Checkouts). */
.fg-so__card {
    display: block;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    background: var(--fgso-card-bg);
    padding: 16px;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.fg-so__card:hover { border-color: var(--fgso-primary); }
.fg-so__card.is-selected {
    border-color: var(--fgso-primary);
    box-shadow: inset 0 0 0 1.5px var(--fgso-primary);
}

/* Trigger (Radio + Header) — klickbar, Tastatur erreichbar */
.fg-so__trigger {
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    user-select: none;
    outline: none;
    border-radius: 6px;
}
.fg-so__trigger:focus-visible {
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.06), 0 0 0 4px var(--fgso-primary);
}

/* Verstecktes Radio (nur State, nicht im Tab-Stop) */
.fg-so__radio {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    margin: 0;
}

/* Radio-Indikator ganz links (Kreis + gefüllter Punkt bei Auswahl) */
.fg-so__radio-dot {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(0, 0, 0, 0.32);
    border-radius: 50%;
    background: #fff;
    position: relative;
    transition: border-color .2s ease, background .2s ease;
    margin-top: 1px;
}
.fg-so__card.is-selected .fg-so__radio-dot {
    border-color: var(--fgso-primary);
}
.fg-so__card.is-selected .fg-so__radio-dot::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--fgso-primary);
    transform: translate(-50%, -50%);
}

/* Header-Zeile (Icon, Titel, Preis, Chevron) */
.fg-so__header {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: wrap;
    row-gap: 8px;
}

.fg-so__icon {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}
.fg-so__icon svg { width: 22px; height: 22px; display: block; }

/* Status-Tints (gemäß Spec): Abstell grau, Termin 4-green grün */
.fg-so__icon--abstell { background: #ededed; color: #616161; }
.fg-so__icon--termin  { background: #f4f8d8; color: #8a9a00; }

.fg-so__title {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.3;
}

.fg-so__price { flex: 0 0 auto; }

/* "KOSTENLOS"-Text für die Abstellgenehmigung-Karte — als schlichter Text
 * gehalten, damit er zur WC-Baseline "Kostenlose Lieferung" passt. Etwas
 * kleiner, damit er sich neben dem Titel gut einordnet. */
.fg-so__price--text {
    display: inline-block;
    color: inherit;
    font-weight: 600;
    font-size: .88rem;
    line-height: 1.5;
    white-space: nowrap;
    opacity: .8;
    letter-spacing: .02em;
}

/* Aufpreis fett, neutral (keine Statusfarbe; nur das Termin-Icon ist grün).
 * Explizit auch das innere .woocommerce-Price-amount neutralisieren, da das
 * Theme diesen ggf. mit der Akzentfarbe einfärbt. */
.fg-so__price--fee {
    font-weight: 700;
    font-size: 1.05rem;
    color: inherit !important;
    white-space: nowrap;
}
.fg-so__price--fee .woocommerce-Price-amount,
.fg-so__price--fee .woocommerce-Price-amount bdi {
    font-weight: 700;
    color: inherit !important;
    background: none !important;
}

/* Chevron (nur Karte 2): Spitze hoch = offen */
.fg-so__chevron {
    flex: 0 0 auto;
    color: inherit;
    opacity: .55;
    transition: transform .25s ease, opacity .2s ease;
    display: flex;
    align-items: center;
}
.fg-so__chevron svg { width: 18px; height: 18px; display: block; }
.fg-so__card.is-selected .fg-so__chevron {
    transform: rotate(180deg);
    opacity: .85;
}

/* Body — nur bei Auswahl aufgeklappt (Textarea bleibt im DOM!) */
.fg-so__body {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height .35s ease, opacity .25s ease, margin-top .25s ease;
}
.fg-so__card.is-selected .fg-so__body {
    max-height: 800px;
    opacity: 1;
    margin-top: 14px;
}

.fg-so__body p {
    margin: 0 0 12px;
    line-height: 1.55;
    font-size: .96rem;
    color: inherit;
}
.fg-so__body a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 600;
}
.fg-so__body a:hover { opacity: .7; }

/* Kommentarfeld */
.fg-so__textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 110px;
    padding: 12px 14px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    background: #fff;
    color: inherit;
    font-family: inherit;
    font-size: .95rem;
    line-height: 1.5;
    resize: vertical;
    transition: border-color .2s ease, box-shadow .2s ease;
    display: block;
}
.fg-so__textarea::placeholder { color: rgba(0, 0, 0, 0.42); }
.fg-so__textarea:focus {
    outline: none;
    border-color: var(--fgso-primary);
    box-shadow: 0 0 0 1px var(--fgso-primary);
}

/* Zeichenzähler unten rechts */
.fg-so__counter {
    text-align: right;
    font-size: .8rem;
    color: inherit;
    opacity: .6;
    margin-top: 6px;
    font-variant-numeric: tabular-nums;
}

/* Kleinbildschirme */
@media (max-width: 600px) {
    .fg-so__header { gap: 8px; }
    .fg-so__icon { width: 36px; height: 36px; border-radius: 8px; }
    .fg-so__icon svg { width: 19px; height: 19px; }
    .fg-so__title { font-size: 1rem; }
    .fg-so__price--pill { font-size: .85rem; padding: 3px 10px; }
    .fg-so__price--fee { font-size: 1rem; }
}

/* Reduzierte Bewegung respektieren */
@media (prefers-reduced-motion: reduce) {
    .fg-so__body,
    .fg-so__chevron,
    .fg-so__radio-dot,
    .fg-so__card { transition: none; }
    .fg-so__card.is-selected .fg-so__body { max-height: none; }
}