/* ══════════════════════════════════════════════════════════════
   HUISREGELS-GATE — de afspraken, in één bevestiging
   Markup + teksten: partials/weather_expectation.php → partials/toast_gate.php
   Gedeeld door workshop.php, bbq_plancha.php, bbq_lowandslow.php en
   proeverij.php (de bestandsnaam is historisch, de gate is niet workshop-only).

   WAT HIER STOND EN WAAROM HET WEG IS (31-08-2026).
   Drie losse vakjes, elk met een eigen omlijnd blok, plus een teller "0 van 3" en
   drie voortgangsstipjes rechtsboven. Dat is een voortgangsmeter om een
   formaliteit heen: het gaf een bevestiging het gewicht van een taak, en het
   kostte de gast drie klikken voor iets waar hij niets te kiezen heeft. De
   informatie is gebleven — de inlooptijd is echte operationele info — maar de
   handeling is er één.

   Ook weg: de 2px volvette gele rand rond de hele kaart. Die schreeuwde harder
   dan alles eromheen en was precies wat het blok "oud" deed ogen. De kaart draait
   nu mee in de materiaallaag van de trechter (glas + haarlijn, branding/
   surfaces.css), met geel als accent op de bevestiging in plaats van als kader.
   ══════════════════════════════════════════════════════════════ */
.toast-gate-card {
    margin: 0;
    padding: 1.1rem 1.15rem 1.15rem;
    border-radius: var(--sbv-radius-lg, 14px);
    border: 1px solid var(--sbv-surface-edge, rgba(244, 239, 227, 0.1));
    background: var(--sbv-surface-3, rgba(22, 20, 16, 0.62));
    backdrop-filter: var(--sbv-blur, blur(12px));
    -webkit-backdrop-filter: var(--sbv-blur, blur(12px));
    color: var(--text-primary, #f4efe3);
}
.toast-gate-title {
    margin: 0 0 0.8rem;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--text-primary, #f4efe3);
    white-space: nowrap;
}

/* ── De afspraken: lezen, niet aanklikken ────────────────────────────────
   Geen omlijnde blokken meer. Drie regels tekst met een icoon ervoor lezen in
   één blik; drie kaders met vakjes lezen als drie taken. */
.toast-rules-list {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: grid;
    gap: 0.55rem;
}
.toast-rule-line {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-secondary, rgba(244, 239, 227, 0.78));
    text-wrap: pretty;   /* zinnen mogen breken; het label hieronder niet */
}
.toast-rule-icon {
    flex: 0 0 auto;
    margin-top: 0.18rem;
    color: var(--brand-yellow, #FFD900);
    opacity: 0.85;
}

/* ── De bevestiging: één brede, duidelijke knop-achtige regel ─────────────
   Dit is het enige klikbare element in het blok, dus het mag als enige het gele
   accent dragen. Volle breedte zodat het doelgebied groot is op een telefoon. */
.toast-accept { display: block; }
/* Gescoped via .toast-accept om een generieke `.form-group label { display:block }`
   te overstemmen — dit item is een <label> die binnen een .form-group kan staan,
   en zonder deze specificiteit valt de flex-uitlijning weg. */
.toast-accept .toast-rule-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    box-sizing: border-box;
    /* Hoogte uit min-height + line-height, niet uit verticale padding: zo blijft
       de regel even hoog als de knoppen elders in de trechter. */
    min-height: 52px;
    padding: 0 1rem;
    border-radius: var(--sbv-radius-md, 10px);
    cursor: pointer;
    background: rgba(255, 217, 0, 0.08);
    border: 1px solid rgba(255, 217, 0, 0.3);
    color: var(--text-primary, #f4efe3);
    font-weight: 600;
    font-size: 0.98rem;
    line-height: 1.4;
    transition: background 160ms ease, border-color 160ms ease;
}
.toast-accept .toast-rule-item:hover {
    background: rgba(255, 217, 0, 0.13);
    border-color: rgba(255, 217, 0, 0.5);
}

/* De echte checkbox blijft focusbaar maar onzichtbaar; .toast-rule-box is de visual. */
.toast-rule-check { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }

.toast-rule-box {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1.5px solid rgba(255, 217, 0, 0.5);
    transition: background 160ms ease, border-color 160ms ease;
}
.toast-rule-box .sbv-icon {
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 140ms ease, transform 140ms ease;
    color: #ffffff;
}
.toast-rule-text { flex: 1 1 auto; min-width: 0; white-space: nowrap; }

/* Aangevinkt: groen, want dit is het bestaande semantische succes-token. */
.toast-rule-check:checked ~ .toast-rule-box { background: var(--sbv-success); border-color: var(--sbv-success); }
.toast-rule-check:checked ~ .toast-rule-box .sbv-icon { opacity: 1; transform: scale(1); }
.toast-accept .toast-rule-item:has(.toast-rule-check:checked) {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.5);
}

/* Toetsenbordfocus: zichtbaar op het vakje, niet op de verborgen input. */
.toast-rule-check:focus-visible ~ .toast-rule-box { outline: 3px solid rgba(255, 217, 0, 0.5); outline-offset: 2px; }

/* ── Afgerond ────────────────────────────────────────────────────────────
   De afspraken en de bevestiging maken plaats voor één regel. Het blok blijft
   staan (de gast mag terugkijken wat hij bevestigd heeft) maar kost geen hoogte
   meer in een formulier waar hij nog doorheen moet. */
.toast-gate-done {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--text-secondary, rgba(244, 239, 227, 0.78));
}
/* AMBER, NIET GROEN (11-09-2026). Het moment waarop de gate omklapt is nu het
   vuurmoment: de flits, de vonken en de kaart zijn allemaal amber. Een groene
   vink met een groene rand daaronder was de laatste losse noot — zelfde les als
   bij de confetti. Op de workshop, die geen vuur heeft, is dit óók amber; de
   gate is gedeeld en één kleur voor "je kunt verder" is beter dan twee. */
.toast-gate-done .sbv-icon { flex: 0 0 auto; color: var(--brand-yellow, #ffd900); }
.toast-gate-done strong { color: var(--text-primary, #f4efe3); }
.toast-gate-card.is-complete {
    padding: 0.85rem 1.15rem;
    border-color: rgba(255, 183, 0, 0.45);
    box-shadow: 0 0 0 2px rgba(255, 217, 0, 0.12), 0 0 24px rgba(255, 140, 0, 0.18);
}
.toast-gate-card.is-complete .toast-gate-title,
.toast-gate-card.is-complete .toast-rules-list,
.toast-gate-card.is-complete .toast-accept { display: none; }

@media (prefers-reduced-motion: reduce) {
    .toast-accept .toast-rule-item,
    .toast-rule-box,
    .toast-rule-box .sbv-icon { transition: none; }
}

@media (max-width: 520px) {
    .toast-gate-card { padding: 1rem 0.9rem; }
    .toast-gate-title { white-space: normal; }
    .toast-rule-line { font-size: 0.86rem; }
    .toast-accept .toast-rule-item { font-size: 0.94rem; padding: 0 0.8rem; }
}