/**
 * 4-Green Start-Dialog (PLZ + Cookie-Einwilligung) — v2.1.3
 * Brand: Premium nature / gardening / heating e-commerce.
 * Warm natural white, deep forest ink, vibrant 4-green lime (#BCCF00),
 * glassmorphism & editorial split layout inspired by the 4-green hero section.
 */

:root {
    --fgsc-brand: #bccf00;
    --fgsc-brand-dark: #7b8800;
    --fgsc-brand-glow: rgba(188, 207, 0, 0.35);
    --fgsc-ink: #171d13;
    --fgsc-ink-soft: #2e3727;
    --fgsc-muted: #626c59;
    --fgsc-line: #e3e8dc;
    --fgsc-soft: #f6f8f2;
    --fgsc-white: #ffffff;
    --fgsc-radius-lg: 20px;
    --fgsc-radius-md: 12px;
    --fgsc-radius-sm: 8px;
    --fgsc-shadow: 0 24px 70px rgba(18, 25, 12, 0.28), 0 6px 20px rgba(18, 25, 12, 0.12);
}

/* -------------------------------------------------------------------------
   Dialog resets & Top-Layer placement
   ---------------------------------------------------------------------- */
#fgsc-root {
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--fgsc-ink);
    overflow: visible;
}

#fgsc-root[open] {
    position: fixed;
    inset: 0;
    margin: auto;
    width: min(880px, calc(100vw - 32px));
    height: fit-content;
    max-height: calc(100vh - 32px);
    display: flex;
    align-items: center;
    justify-content: center;
}

#fgsc-root:not([open]) {
    display: none !important;
}

#fgsc-root::backdrop {
    background: rgba(15, 20, 11, 0.68);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    backdrop-filter: blur(8px) saturate(140%);
}

/* While our modal is active, keep the native RCB banner invisible in the background */
body.fgsc-consent-pending dialog.wp-exclude-emoji {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
body.fgsc-consent-pending dialog.wp-exclude-emoji::backdrop {
    background: transparent !important;
}

body.fgsc-modal-open {
    overflow: hidden !important;
}

/* -------------------------------------------------------------------------
   Editorial Split Shell (Left: visual / Right: content)
   ---------------------------------------------------------------------- */
.fgsc-shell {
    width: 100%;
    display: grid;
    grid-template-columns: 310px 1fr;
    background: var(--fgsc-white);
    border-radius: var(--fgsc-radius-lg);
    box-shadow: var(--fgsc-shadow);
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.4);
    animation: fgsc-scale-in 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes fgsc-scale-in {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* -------------------------------------------------------------------------
   Left: Visual Panel (rich hero background from 4-green shop)
   ---------------------------------------------------------------------- */
.fgsc-visual {
    position: relative;
    background-color: #1f2717;
    background-image:
        linear-gradient(180deg, rgba(16, 23, 10, 0.45) 0%, rgba(16, 23, 10, 0.85) 100%),
        url('https://4-green.de/wp-content/uploads/2025/08/4-green-spare-bei-erde-mulch-und-brennholz.jpeg');
    background-size: cover;
    background-position: center;
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* only the claim remains, at the bottom */
    color: #ffffff;
    box-sizing: border-box;
}

.fgsc-visual::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 20%, rgba(188, 207, 0, 0.25) 0%, transparent 60%);
    pointer-events: none;
}

.fgsc-visual-kicker {
    position: relative;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fgsc-brand);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.fgsc-visual-bottom {
    position: relative;
}

.fgsc-visual-bottom span {
    display: block;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 6px;
    color: #ffffff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.fgsc-visual-bottom small {
    display: block;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.4;
}

/* -------------------------------------------------------------------------
   Right: Content Panel
   ---------------------------------------------------------------------- */
.fgsc-content {
    padding: 32px 36px 28px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    background: var(--fgsc-white);
}

.fgsc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

#fgsc-root .fgsc-header img {
    height: 38px;
    width: auto;
    object-fit: contain;
    display: block;
}

.fgsc-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fgsc-brand-dark);
    margin-bottom: 6px;
}

.fgsc-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--fgsc-brand);
    display: inline-block;
    box-shadow: 0 0 0 3px rgba(188, 207, 0, 0.25);
}

#fgsc-title {
    margin: 0 0 8px;
    font-size: 26px;
    line-height: 1.18;
    font-weight: 800;
    color: var(--fgsc-ink);
    letter-spacing: -0.02em;
}

#fgsc-title em {
    font-style: normal;
    color: var(--fgsc-brand-dark);
}

.fgsc-description {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--fgsc-muted);
}

.fgsc-perks {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--fgsc-line);
}

.fgsc-perks span {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--fgsc-ink-soft);
    display: inline-flex;
    align-items: center;
}

/* -------------------------------------------------------------------------
   ZIP Input & CTA Form (matching Homepage Hero style)
   ---------------------------------------------------------------------- */
#fgsc-zip-form {
    margin: 0 0 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#fgsc-zip-form label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fgsc-muted);
    margin-bottom: 2px;
}

.fgsc-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.fgsc-pin {
    position: absolute;
    left: 14px;
    color: var(--fgsc-brand-dark);
    display: inline-flex;
    pointer-events: none;
    width: 20px;
    height: 20px;
}

.fgsc-pin svg {
    width: 100%;
    height: 100%;
}

#fgsc-zip {
    width: 100%;
    box-sizing: border-box;
    height: 52px;
    padding: 0 16px 0 44px;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--fgsc-ink);
    background: var(--fgsc-soft);
    border: 1.5px solid var(--fgsc-line);
    border-radius: var(--fgsc-radius-md);
    outline: none;
    transition: all 0.2s ease;
}

#fgsc-zip::placeholder {
    color: #8c9682;
    font-weight: 400;
    letter-spacing: normal;
}

#fgsc-zip:focus {
    background: #ffffff;
    border-color: var(--fgsc-brand-dark);
    box-shadow: 0 0 0 4px var(--fgsc-brand-glow);
}

.fgsc-error {
    margin: 2px 0 0;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
    color: #c92a2a;
    display: flex;
    align-items: center;
    gap: 6px;
}

#fgsc-root .fgsc-go {
    width: 100%;
    height: 52px;
    box-sizing: border-box;
    border: none;
    border-radius: var(--fgsc-radius-md);
    background: linear-gradient(135deg, #6b7a00 0%, #556300 100%);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 6px 20px rgba(107, 122, 0, 0.35);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    margin-top: 4px;
}

#fgsc-root .fgsc-go:hover {
    background: linear-gradient(135deg, #7b8800 0%, #6b7a00 100%);
    box-shadow: 0 8px 24px rgba(107, 122, 0, 0.45);
    transform: translateY(-1px);
}

#fgsc-root .fgsc-go:active {
    transform: translateY(1px);
    box-shadow: 0 3px 10px rgba(107, 122, 0, 0.3);
}

#fgsc-root .fgsc-go:disabled {
    opacity: 0.6;
    cursor: progress;
    transform: none;
}

/* -------------------------------------------------------------------------
   Cookie text (Vorlage-Struktur: Text oberhalb des Formulars, Links im Text)
   ---------------------------------------------------------------------- */
.fgsc-cookie-text {
    margin: 0 0 16px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--fgsc-muted);
    text-align: left;
}
.fgsc-cookie-text strong { color: var(--fgsc-ink); }

#fgsc-root .fgsc-linklike,
#fgsc-root .fgsc-privacy-link {
    padding: 0;
    margin: 0;
    background: none;
    border: 0;
    font: inherit;
    font-size: inherit;
    line-height: inherit;
    color: var(--fgsc-brand-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    display: inline;
    height: auto;
    width: auto;
}
#fgsc-root .fgsc-linklike:hover,
#fgsc-root .fgsc-privacy-link:hover {
    color: var(--fgsc-ink);
    background: none;
    border: 0;
}

/* Focus: the shop's global accessibility rule draws a black 2px frame plus a
   white glow on :focus-visible. On mobile that frame stays after a tap and
   looks like an ugly black box around the inline links. On touch devices we
   suppress it; on pointer/keyboard devices we keep a clean on-brand ring. */
#fgsc-root .fgsc-linklike:focus-visible,
#fgsc-root .fgsc-privacy-link:focus-visible {
    outline: 2px solid var(--fgsc-brand-dark);
    outline-offset: 2px;
    border-radius: 3px;
    box-shadow: none;
}
@media (hover: none) {
    #fgsc-root .fgsc-linklike:focus,
    #fgsc-root .fgsc-linklike:focus-visible,
    #fgsc-root .fgsc-privacy-link:focus,
    #fgsc-root .fgsc-privacy-link:focus-visible {
        outline: none;
        box-shadow: none;
    }
}

/* Description only visible in step 2 */
.fgsc-description { display: none; }
#fgsc-root[data-step="2"] .fgsc-description { display: block; }

#fgsc-root[data-step="2"] .fgsc-cookie-part { display: none !important; }

/* -------------------------------------------------------------------------
   Responsive: Mobile Sheet / Card
   ---------------------------------------------------------------------- */
@media (max-width: 720px) {
    #fgsc-root[open] {
        position: fixed;
        inset: 0;
        margin: auto;
        width: calc(100vw - 20px);
        max-width: 440px;
        height: fit-content;
        max-height: calc(100dvh - 24px);
    }

    .fgsc-shell {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        border-radius: 18px;
        max-height: calc(100dvh - 24px);
        box-shadow: 0 20px 60px rgba(15, 22, 10, 0.45);
        border: 1px solid rgba(255, 255, 255, 0.3);
    }

    .fgsc-visual {
        padding: 16px 20px;
        min-height: 80px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .fgsc-visual-kicker {
        font-size: 10px;
    }

    .fgsc-visual-bottom span {
        font-size: 14px;
        line-height: 1.2;
        margin: 0;
    }

    .fgsc-visual-bottom small {
        display: none;
    }

    .fgsc-content {
        padding: 20px 20px calc(20px + env(safe-area-inset-bottom, 0px));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start;
    }

    #fgsc-root .fgsc-header img {
        height: 30px;
    }

    #fgsc-title {
        font-size: 21px;
        margin-bottom: 6px;
    }

    .fgsc-description {
        font-size: 13px;
        margin-bottom: 10px;
    }

    .fgsc-perks {
        gap: 12px;
        margin-bottom: 14px;
        padding-bottom: 10px;
    }

    .fgsc-perks span {
        font-size: 11.5px;
    }

    #fgsc-zip {
        height: 48px;
        font-size: 16px;
    }

    #fgsc-root .fgsc-go {
        height: 48px;
        font-size: 15px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .fgsc-shell {
        animation: none;
    }
    #fgsc-root .fgsc-go {
        transition: none;
    }
}


/* =========================================================================
   Season: HEATING (Kaminholz, Briketts, Pellets)
   Warm ember accents on the same layout; brand lime stays on the CTA ring
   only as a thin detail so it is still clearly 4GREEN.
   ====================================================================== */
#fgsc-root[data-season="heating"] {
    --fgsc-heat: #e8751a;
    --fgsc-heat-dark: #b8520c;
    --fgsc-heat-glow: rgba(232, 117, 26, 0.30);
    --fgsc-heat-soft: #fbf5ef;
    --fgsc-heat-line: #eee2d6;
}
#fgsc-root[data-season="heating"] .fgsc-visual {
    background-color: #1a0f08;
    background-image:
        linear-gradient(180deg, rgba(20, 10, 4, 0.30) 0%, rgba(20, 10, 4, 0.55) 45%, rgba(14, 7, 3, 0.92) 100%),
        url('https://4-green.de/wp-content/uploads/2026/09/kamin_mit_holz_02.png');
    background-position: center 60%;
}
#fgsc-root[data-season="heating"] .fgsc-visual::before {
    background: radial-gradient(circle at 50% 75%, rgba(255, 140, 40, 0.35) 0%, transparent 65%);
}
#fgsc-root[data-season="heating"] .fgsc-visual-kicker { color: #ffb366; }
#fgsc-root[data-season="heating"] .fgsc-eyebrow { color: var(--fgsc-heat-dark); }
#fgsc-root[data-season="heating"] .fgsc-dot {
    background: var(--fgsc-heat);
    box-shadow: 0 0 0 3px var(--fgsc-heat-glow);
}
#fgsc-root[data-season="heating"] #fgsc-title em { color: var(--fgsc-heat-dark); }
#fgsc-root[data-season="heating"] .fgsc-pin { color: var(--fgsc-heat-dark); }
#fgsc-root[data-season="heating"] #fgsc-zip { background: var(--fgsc-heat-soft); border-color: var(--fgsc-heat-line); }
#fgsc-root[data-season="heating"] #fgsc-zip:focus {
    background: #fff;
    border-color: var(--fgsc-heat-dark);
    box-shadow: 0 0 0 4px var(--fgsc-heat-glow);
}
#fgsc-root[data-season="heating"] .fgsc-go {
    background: linear-gradient(135deg, #f28c28 0%, #d9600f 100%);
    color: #fff;
    box-shadow: 0 6px 20px rgba(217, 96, 15, 0.35);
}
#fgsc-root[data-season="heating"] .fgsc-go:hover {
    background: linear-gradient(135deg, #f79a3a 0%, #e26a15 100%);
    box-shadow: 0 8px 24px rgba(217, 96, 15, 0.45);
}
#fgsc-root[data-season="heating"] .fgsc-perks,
#fgsc-root[data-season="heating"] .fgsc-consent { border-color: var(--fgsc-heat-line); }
#fgsc-root[data-season="heating"] .fgsc-consent { background: var(--fgsc-heat-soft); }

/* Mobile heating: fire must be visible in the short strip — needs to come
   AFTER the heating base rule, otherwise the cascade overrides it. */
@media (max-width: 720px) {
    #fgsc-root[data-season="heating"] .fgsc-visual {
        background-position: center 28%;
    }
}

/* Step/consent overrides AFTER the season blocks (cascade order) */
#fgsc-root .fgsc-consent { display: none !important; }
#fgsc-root[data-step="2"] .fgsc-cookie-part { display: none !important; }
#fgsc-root[data-step="2"] .fgsc-description { display: block; }