/* SmartRepair stylesheet
 * =====================================================================
 *  VERSIE : 2026-07-19  ·  8de126e9
 *  REGELS : 1128
 * =====================================================================
 *
 *  Controleer wat de server serveert:
 *
 *      curl -s https://smartrepair.eu/css/smartrepair.css | head -4
 *
 *  Komt die hash niet overeen met het bestand in uw pakket, dan draait de
 *  server een oudere versie.
 *
 *  ── Waarom een HASH en geen handmatig versienummer ──────────────────
 *
 *  Er stond hier "VERSIE: 2026-07-12-c", met de hand gezet. Daarna is er nog
 *  vier keer CSS bijgekomen zonder dat dat nummer meebewoog. Het bestand op
 *  de server zag er dus actueel uit terwijl het dat niet was — en dat is
 *  erger dan helemaal geen versienummer, want het geeft valse zekerheid.
 *
 *  Deze hash komt uit de inhoud. Verandert er één regel, dan verandert hij.
 *  Vergeten bij te werken kan niet meer.
 *
 *  ── LET OP: public/css/smartrepair.css is een KOPIE ─────────────────
 *
 *  De browser krijgt public/css/. Alleen resources/css/ aanpassen verandert
 *  niets aan wat de klant ziet. Beide bestanden zitten in het pakket.
 */

/*
 | SmartRepair design tokens
 |
 | Afgeleid van het logo (SmartRepairHD.svg): limoengroen #a7c10f op donker,
 | wit woordmerk. GEEN blauw. Alle portal-/cascade-/wizard-views gebruiken
 | uitsluitend onderstaande variabelen — zo verandert een rebrand één bestand.
 |
 | Laad dit vóór de pagina-CSS, bv. in layouts/master.blade.php:
 |   <link rel="stylesheet" href="{{ asset('css/smartrepair.css') }}">
 */

:root {
    /* Merk */
    --sr-primary:        #a7c10f;   /* logo-limoen */
    --sr-primary-dark:   #8ca30c;   /* hover/active */
    --sr-primary-darker: #6f800a;   /* pressed / tekst op licht */
    --sr-primary-tint:   #f2f7dc;   /* zachte achtergrondvlakken */
    --sr-primary-tint-2: #e3ecbc;   /* randen op tint */

    /* Knoppen — BEWUST donkerder dan het logo-limoen.
       #a7c10f is een LICHTE kleur: met witte tekst haalt hij 2,04:1, ver onder
       de WCAG-ondergrens van 4,5:1. Onleesbaar dus. Deze groen zit in dezelfde
       tint-familie (het blijft het merk) maar haalt 7,72:1 met wit — AAA.
       Het limoen blijft wél de accentkleur: randen, tints, badges, focusringen. */
    --sr-btn:            #3a5c13;   /* knopvlak            wit: 7,72:1  AAA */
    --sr-btn-hover:      #2f4b0f;   /* hover               wit: 9,6:1        */
    --sr-btn-active:     #263d0c;   /* pressed                              */
    --sr-btn-text:       #ffffff;

    /* Inkt & vlakken (donkere logo-achtergrond) */
    --sr-ink:            #1b1d16;   /* koppen, logo-achtergrond */
    --sr-ink-soft:       #3d4034;
    --sr-body:           #2c2e28;   /* lopende tekst */
    --sr-muted:          #6f7266;   /* bijschriften */
    --sr-line:           #dcded4;   /* hairlines */
    --sr-surface:        #ffffff;
    --sr-surface-2:      #f7f8f3;   /* kaarten */

    /* Status — bewust NIET blauw */
    --sr-ok:             #4f9d2f;
    --sr-ok-tint:        #eaf5e3;
    --sr-warn:           #d98910;   /* offerte / actie vereist */
    --sr-warn-tint:      #fdf2df;
    --sr-danger:         #c0392b;   /* gefaalde test, dood toestel */
    --sr-danger-tint:    #fbeae8;
    --sr-info:           #6b6f60;   /* neutraal i.p.v. blauw */
    --sr-info-tint:      #f0f1ea;

    /* Voorbehoud (verborgen/gemaskeerde schade) — eigen kleur, herkenbaar */
    --sr-masked:         #7d5ba6;
    --sr-masked-tint:    #f2edf8;

    --sr-radius:         6px;
    --sr-radius-lg:      10px;
    --sr-shadow:         0 1px 3px rgba(27,29,22,.08);
}

/* ---- Basiscomponenten voor alle SmartRepair-schermen ---- */

.sr-btn {
    display: inline-block;
    background: var(--sr-btn);
    color: var(--sr-btn-text) !important;
    border: none;
    padding: 10px 22px;
    border-radius: var(--sr-radius);
    font-size: .95rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    line-height: 1.4;
    transition: background .12s ease;
}
.sr-btn:hover   { background: var(--sr-btn-hover);  color: var(--sr-btn-text) !important; }
.sr-btn:active  { background: var(--sr-btn-active); }

/* Zichtbare focusring — een knop die enkel op hover reageert is onbruikbaar
   met het toetsenbord, en aan de balie wordt er veel getabt. */
.sr-btn:focus-visible {
    outline: 3px solid var(--sr-primary);
    outline-offset: 2px;
}

.sr-btn:disabled, .sr-btn.disabled { opacity: .5; cursor: not-allowed; }

/* Varianten */
.sr-btn.green      { background: var(--sr-btn); }              /* alias: is nu de standaard */
.sr-btn.green:hover{ background: var(--sr-btn-hover); }

.sr-btn.secondary  { background: transparent; border: 2px solid var(--sr-btn);
                     color: var(--sr-btn) !important; padding: 8px 20px; }
.sr-btn.secondary:hover { background: var(--sr-primary-tint); }

.sr-btn.dark       { background: var(--sr-ink);    color: #fff !important; }
.sr-btn.dark:hover { background: var(--sr-ink-soft); }
.sr-btn.ghost      { background: transparent; border: 1px solid var(--sr-line); color: var(--sr-body) !important; }
.sr-btn.ghost:hover{ border-color: var(--sr-btn); background: var(--sr-primary-tint); }
.sr-btn.warn       { background: var(--sr-warn);   color: #fff !important; }
.sr-btn.danger     { background: var(--sr-danger); color: #fff !important; }

.sr-card {
    background: var(--sr-surface-2);
    border: 1px solid var(--sr-line);
    border-radius: var(--sr-radius-lg);
    padding: 22px 25px;
}
.sr-card.accent   { border-color: var(--sr-primary);  background: var(--sr-primary-tint); }
.sr-card.warn     { border-color: var(--sr-warn);     background: var(--sr-warn-tint); }
.sr-card.masked   { border-color: var(--sr-masked);   background: var(--sr-masked-tint); }

.sr-badge {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 12px;
    font-size: .78rem;
    font-weight: 700;
}
.sr-badge.brand  { background: var(--sr-primary-tint); color: var(--sr-primary-darker); }
.sr-badge.ok     { background: var(--sr-ok-tint);      color: var(--sr-ok); }
.sr-badge.warn   { background: var(--sr-warn-tint);    color: var(--sr-warn); }
.sr-badge.danger { background: var(--sr-danger-tint);  color: var(--sr-danger); }
.sr-badge.masked { background: var(--sr-masked-tint);  color: var(--sr-masked); }

.sr-portal { max-width: 1050px; margin: 40px auto 60px; padding: 0 20px; color: var(--sr-body); }
.sr-portal h1, .sr-portal h2, .sr-portal h3 { color: var(--sr-ink); }
.sr-portal a { color: var(--sr-primary-darker); }

.sr-input, .sr-portal input[type=text], .sr-portal input[type=email],
.sr-portal input[type=tel], .sr-portal input[type=number],
.sr-portal select, .sr-portal textarea {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--sr-line);
    border-radius: var(--sr-radius);
    font-size: .95rem;
    box-sizing: border-box;
    font-family: inherit;
    background: var(--sr-surface);
    color: var(--sr-body);
}
.sr-portal input:focus, .sr-portal select:focus, .sr-portal textarea:focus {
    outline: none;
    border-color: var(--sr-primary);
    box-shadow: 0 0 0 3px var(--sr-primary-tint);
}

/* Taalkiezer */
.sr-lang { display: inline-flex; gap: 2px; }
.sr-lang a {
    padding: 4px 9px;
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--sr-muted);
    text-decoration: none;
    border-radius: var(--sr-radius);
}
.sr-lang a:hover   { background: var(--sr-primary-tint); color: var(--sr-primary-darker); }
.sr-lang a.active  { background: var(--sr-primary); color: var(--sr-ink); }


/* ── Kiosk: toestel identificeren + defecten ─────────────────────────────── */

.sr-identify, .sr-faults { margin: 28px 0; }
.sr-hint     { color: var(--sr-muted); font-size: .9rem; margin: 4px 0 14px; }
.sr-hint.sr-ok  { color: var(--sr-btn); font-weight: 700; }
.sr-hint.sr-nok { color: var(--sr-danger); font-weight: 700; }
.sr-optional { color: var(--sr-muted); font-weight: 400; font-size: .85rem; }

/* "We herkennen dit toestel" — het toestel meldt zichzelf */
.sr-ident-option {
    background: var(--sr-primary-tint);
    border-left: 4px solid var(--sr-primary);
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 18px;
}
.sr-ident-option p { font-size: 1.05rem; font-weight: 700; margin: 6px 0 12px; }
.sr-ident-option.sr-used { border-left-color: var(--sr-btn); }

.sr-imei-row { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.sr-imei-row input { flex: 1 1 220px; letter-spacing: 1px; font-family: monospace; }

.sr-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
@media (max-width: 560px) { .sr-grid-2 { grid-template-columns: 1fr; } }

/* Defectenlijst — vinkjes, want de maskeringsmotor werkt op sleutels, niet op proza */
.sr-fault-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
    margin-bottom: 18px;
}
.sr-fault {
    display: flex; align-items: center; gap: 10px;
    border: 1px solid var(--sr-line);
    border-radius: 8px;
    padding: 10px 12px;
    cursor: pointer;
    font-size: .92rem;
    transition: border-color .12s ease, background .12s ease;
}
.sr-fault:hover { border-color: var(--sr-btn); }
.sr-fault:has(input:checked) {
    border-color: var(--sr-btn);
    background: var(--sr-primary-tint);
    font-weight: 700;
}
.sr-fault input { margin-top: 2px; flex: none; }

/* ── De identificatieladder ──────────────────────────────────────────────
   Zeven sporten, één tegelijk zichtbaar. De lijst erboven laat zien waar we
   staan: wat gelukt is, wat we nu proberen, en wat er nog komt. Zonder die
   lijst voelt "dit lukt niet" als falen; mét de lijst voelt het als een stap. */

.sr-ladder {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    font-size: .8rem;
}
.sr-ladder li {
    padding: 5px 11px;
    border-radius: 20px;
    background: var(--sr-surface-2);
    color: var(--sr-muted);
    border: 1px solid var(--sr-line);
}
.sr-ladder li.active {
    background: var(--sr-btn);
    border-color: var(--sr-btn);
    color: #fff;
    font-weight: 700;
}
.sr-ladder li.done {
    background: var(--sr-primary-tint);
    border-color: var(--sr-primary);
    color: var(--sr-btn);
}
.sr-ladder li.done::before { content: '✓ '; }

.sr-rung {
    background: var(--sr-primary-tint);
    border-left: 4px solid var(--sr-primary);
    border-radius: 10px;
    padding: 18px 20px;
    margin-bottom: 18px;
}
.sr-rung h3 { margin: 0 0 6px; font-size: 1.1rem; }
.sr-rung .sr-btn { margin-top: 12px; margin-right: 8px; }

.sr-detected {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 8px 0;
    color: var(--sr-btn);
}

.sr-qr-pane { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.sr-qr-pane #sr-qr { background: #fff; padding: 10px; border-radius: 10px; }

.sr-code-box {
    background: #fff;
    border: 1px dashed var(--sr-line);
    border-radius: 8px;
    padding: 10px 14px;
    margin-top: 12px;
}
.sr-code-box strong {
    font-size: 1.4rem;
    letter-spacing: 3px;
    font-family: monospace;
    color: var(--sr-btn);
}

/* Google / Apple: twee grote, duidelijke uitgangen. Dit is de sport die
   werkt bij een DOOD toestel, dus hij mag niet wegvallen tussen de rest. */
.sr-portal-row { display: flex; gap: 12px; flex-wrap: wrap; margin: 14px 0; }
.sr-portal {
    flex: 1 1 220px;
    display: block;
    background: #fff;
    border: 2px solid var(--sr-line);
    border-radius: 10px;
    padding: 16px 18px;
    text-decoration: none;
    color: var(--sr-body);
    transition: border-color .12s ease;
}
.sr-portal:hover, .sr-portal:active { border-color: var(--sr-btn); }
.sr-portal strong { display: block; color: var(--sr-btn); margin-bottom: 4px; }
.sr-portal span   { font-size: .85rem; color: var(--sr-muted); }

.sr-privacy {
    background: #fff;
    border-left: 3px solid var(--sr-ok);
    padding: 8px 12px;
    border-radius: 6px;
}

.sr-device-fields { margin-top: 8px; }
.sr-identified .sr-device-fields { border-top: 3px solid var(--sr-ok); padding-top: 14px; }

/* ── Identificatiecascade: zichtbare, overslaanbare ladder ───────────────── */

.sr-cascade { margin: 28px 0; }

.sr-cascade .sr-ladder { list-style: none; padding: 0; margin: 16px 0 22px; }

.sr-cascade .sr-rung { margin-bottom: 6px; }

.sr-cascade .sr-rung-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    background: #fff;
    border: 2px solid var(--sr-line);
    border-radius: 10px;
    padding: 12px 14px;
    cursor: pointer;
    font: inherit;
    color: inherit;
    min-height: 56px;              /* vinger */
}
.sr-cascade .sr-rung-btn:active { transform: scale(.99); }

.sr-cascade .sr-rung-num {
    flex: none;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--sr-line);
    color: var(--sr-ink);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .9rem;
}

.sr-cascade .sr-rung-body { flex: 1; display: flex; flex-direction: column; }
.sr-cascade .sr-rung-body strong { font-size: 1rem; }
.sr-cascade .sr-rung-body small  { color: var(--sr-muted); font-size: .85rem; }

.sr-cascade .sr-rung-state { flex: none; font-weight: 700; color: var(--sr-btn); font-size: 1.2rem; }

/* De sport waar je nu staat */
.sr-cascade .sr-rung.active .sr-cascade .sr-rung-btn { border-color: var(--sr-btn); background: var(--sr-primary-tint); }
.sr-cascade .sr-rung.active .sr-cascade .sr-rung-num { background: var(--sr-btn); color: #fff; }

/* Gelukt */
.sr-cascade .sr-rung.done .sr-cascade .sr-rung-btn { border-color: var(--sr-ok); }
.sr-cascade .sr-rung.done .sr-cascade .sr-rung-num { background: var(--sr-ok); color: #fff; }

/* Overgeslagen: grijs, maar nog steeds aanklikbaar — men kan zich bedenken */
.sr-cascade .sr-rung.skipped .sr-rung-btn  { opacity: .55; }
.sr-cascade .sr-rung.skipped .sr-cascade .sr-rung-body strong { text-decoration: line-through; }

/* Zodra het toestel bekend is, verdwijnt de nadruk op de ladder */
.sr-identified .sr-cascade .sr-ladder { opacity: .65; }

/* Panelen */
.sr-panel {
    background: var(--sr-surface-2);
    border-radius: 10px;
    padding: 18px 20px;
    margin-bottom: 18px;
}
.sr-panel > p { margin-top: 0; }

/* De uitweg per methode. Bewust een LINK-achtige knop, niet een grote:
   het is een ontsnapping, geen aanbeveling. */
.sr-skip {
    display: inline-block;
    margin-top: 14px;
    background: none;
    border: none;
    border-bottom: 1px dashed var(--sr-muted);
    color: var(--sr-muted);
    font: inherit;
    font-size: .9rem;
    padding: 6px 2px;
    cursor: pointer;
    min-height: 44px;
}
.sr-skip:hover, .sr-skip:active { color: var(--sr-btn); border-bottom-color: var(--sr-btn); }

.sr-detected { background: var(--sr-primary-tint); border-radius: 8px; padding: 14px 16px; }
.sr-detected-name { font-size: 1.2rem; font-weight: 700; margin: 0 0 12px; }

.sr-qrbox { display: inline-block; padding: 12px; background: #fff; border-radius: 10px; }
.sr-code  { font-size: 1.5rem; letter-spacing: 3px; font-family: monospace; }
.sr-video { width: 100%; max-width: 420px; border-radius: 10px; margin-top: 10px; }

/* Google / Apple-portalen */
.sr-portals { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; }
@media (max-width: 560px) { .sr-portals { grid-template-columns: 1fr; } }

.sr-portal {
    display: flex; flex-direction: column; gap: 3px;
    border: 2px solid var(--sr-line);
    border-radius: 10px;
    padding: 14px 16px;
    text-decoration: none;
    color: inherit;
    min-height: 56px;
    justify-content: center;
}
.sr-portal:hover, .sr-portal:active { border-color: var(--sr-btn); background: var(--sr-primary-tint); }
.sr-portal small { color: var(--sr-muted); font-size: .85rem; }

.sr-device-fields { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--sr-line); }

/* ── Prijs en onderdeelkeuze ─────────────────────────────────────────────── */

.sr-pricing { margin: 28px 0; }

.sr-quality-list { display: flex; flex-direction: column; gap: 10px; margin: 16px 0; }

.sr-quality {
    display: flex; align-items: center; gap: 12px;
    border: 2px solid var(--sr-line);
    border-radius: 10px;
    padding: 14px 16px;
    cursor: pointer;
    min-height: 64px;
}
.sr-quality:has(input:checked) { border-color: var(--sr-btn); background: var(--sr-primary-tint); }
.sr-quality input { flex: none; width: 20px; height: 20px; }

.sr-quality-body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.sr-quality-body strong { font-size: 1rem; }
.sr-quality-body small  { color: var(--sr-muted); font-size: .85rem; }
.sr-quality-body .sr-warranty { color: var(--sr-btn); font-weight: 700; }
.sr-quality-body .sr-warn     { color: var(--sr-warn); font-weight: 700; }

.sr-quality-price {
    flex: none;
    font-size: 1.35rem;
    font-weight: 700;
    font-family: 'Open Sans', sans-serif;
    white-space: nowrap;
}

/* Richtprijs: geel, niet groen. Dit is géén vaste prijs. */
.sr-reserve {
    background: #fff8e6;
    border-left: 4px solid var(--sr-warn);
    border-radius: 8px;
    padding: 14px 18px;
    margin: 16px 0;
}
.sr-reserve ul { margin: 8px 0 0 18px; }
.sr-reserve li { font-weight: 700; }

.sr-pay-box {
    background: var(--sr-primary-tint);
    border: 2px solid var(--sr-btn);
    border-radius: 12px;
    padding: 22px 24px;
    margin: 20px 0;
    text-align: center;
}
.sr-pay-amount {
    font-family: 'Open Sans', sans-serif;
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--sr-btn);
    margin: 6px 0 10px;
}
.sr-pay-amount small { display: block; font-size: .85rem; font-weight: 400; color: var(--sr-muted); }
.sr-pay-amount.muted { color: var(--sr-muted); }


/* ── Cascade: meer SmartRepair-groen, minder grijs ───────────────────────── */

.sr-cascade .sr-ladder { list-style: none !important; padding-left: 0 !important; }
.sr-cascade .sr-ladder li::marker { content: none; }

.sr-cascade .sr-rung-btn {
    border-color: var(--sr-line);
    box-shadow: 0 1px 2px rgba(27,29,22,.04);
    transition: border-color .12s, background .12s;
}
.sr-cascade .sr-rung-btn:hover { border-color: var(--sr-primary); }

/* De sport waar je nu staat: groene rand, limoen vlak, groen bolletje. */
.sr-cascade .sr-rung.active .sr-rung-btn {
    border-color: var(--sr-btn);
    background: var(--sr-primary-tint);
    box-shadow: 0 2px 6px rgba(58,92,19,.12);
}
.sr-cascade .sr-rung.active .sr-rung-num { background: var(--sr-btn); color: #fff; }

.sr-cascade .sr-rung.done .sr-rung-btn  { border-color: var(--sr-ok); background: var(--sr-ok-tint); }
.sr-cascade .sr-rung.done .sr-rung-num  { background: var(--sr-ok); color: #fff; }
.sr-cascade .sr-rung.done .sr-rung-state{ color: var(--sr-ok); }

/* Overslaan is een uitweg, geen aanbeveling — maar wel zichtbaar aanraakbaar. */
.sr-cascade .sr-skip {
    background: #fff;
    border: 2px solid var(--sr-line);
    border-bottom: 2px solid var(--sr-line);
    border-radius: 8px;
    color: var(--sr-muted);
    padding: 12px 18px;
    font-weight: 600;
}
.sr-cascade .sr-skip:hover,
.sr-cascade .sr-skip:active {
    border-color: var(--sr-btn);
    color: var(--sr-btn);
    background: var(--sr-primary-tint);
}

/* De QR-knop is een HOOFDactie, geen bijzaak. */
#sr-qr-start, #sr-scan, #sr-use-detected {
    background: var(--sr-btn);
    color: #fff !important;
    border: none;
    border-radius: 10px;
    padding: 14px 26px;
    font-weight: 700;
    font-size: 1rem;
    min-height: 52px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(58,92,19,.25);
}
#sr-qr-start:hover, #sr-scan:hover, #sr-use-detected:hover { background: var(--sr-btn-hover); }
#sr-qr-start:active, #sr-scan:active, #sr-use-detected:active { transform: scale(.98); }

/* Een uitgeschakelde QR-knop is een doodlopende straat: scannen mislukt vaak,
   en dan moet de balie een NIEUWE code kunnen tonen. Dus nooit disabled. */
#sr-qr-start:disabled { opacity: 1; cursor: pointer; }

.sr-qrbox { border: 3px solid var(--sr-primary); }

.sr-code {
    display: inline-block;
    background: var(--sr-ink);
    color: var(--sr-primary);
    padding: 6px 14px;
    border-radius: 8px;
}

.sr-chosen {
    background: var(--sr-ok-tint);
    border-left: 4px solid var(--sr-ok);
    border-radius: 8px;
    padding: 10px 14px;
    font-weight: 700;
    margin: 0 0 16px;
}
.sr-notlisted { grid-column: 1 / -1; }
.sr-notlisted label { font-weight: 400; font-size: .92rem; }
.sr-notlisted #free_fields input { margin-top: 8px; }

/* ── Levende veldcontrole ────────────────────────────────────────────────── */

/*
   Drie toestanden, en het verschil tussen de tweede en de derde is belangrijk:

     GROEN       in orde
     ZACHT ROOD  verplicht, moet nog  -> een taak, geen fout
     ECHT ROOD   staat er, maar klopt niet -> wél een fout

   Een formulier dat bij het openen zeven alarmrode vakken toont, zegt tegen
   iemand die nog niets gedaan heeft dat hij zeven fouten maakte. Vandaar het
   onderscheid: #fff5f5 is een uitnodiging, #b3261e is een fout.
*/

.sr-field { position: relative; }

.sr-ok-field {
    background: var(--sr-ok-tint) !important;
    border-color: var(--sr-ok) !important;
}
.sr-ok-field:focus { outline-color: var(--sr-ok) !important; }

.sr-need-field {
    background: #fff5f5 !important;
    border-color: #f0c9c9 !important;
}

.sr-bad-field {
    background: #fdecec !important;
    border-color: var(--sr-danger) !important;
}
.sr-bad-field:focus { outline-color: var(--sr-danger) !important; }

/*
   Het teken naast het veld. Kleur alleen volstaat niet: ongeveer 8% van de
   mannen ziet rood en groen niet betrouwbaar uit elkaar, en aan een balie
   staat wie er die dag staat.
*/
.sr-flag {
    position: absolute;
    right: 12px;
    top: 38px;
    font-weight: 700;
    font-size: 1.1rem;
    pointer-events: none;
    line-height: 1;
}
.sr-flag.sr-ok-field   { color: var(--sr-ok);     background: none !important; }
.sr-flag.sr-need-field { color: #d99a9a;          background: none !important; }
.sr-flag.sr-bad-field  { color: var(--sr-danger); background: none !important; }

/* Selects hebben al een pijltje rechts — daar het teken links ervan. */
select.sr-ok-field, select.sr-need-field, select.sr-bad-field { padding-right: 46px; }
.sr-field:has(select) .sr-flag { right: 38px; }

/* Voortgang: "nog 3 velden" is bruikbaarder dan "er zijn fouten". */
.sr-progress {
    display: inline-block;
    background: #fff5f5;
    border: 2px solid #f0c9c9;
    color: var(--sr-ink);
    border-radius: 999px;
    padding: 8px 18px;
    font-weight: 700;
    font-size: .95rem;
}
.sr-progress.done {
    background: var(--sr-ok-tint);
    border-color: var(--sr-ok);
    color: var(--sr-ok);
}

/* Ontvangen toestelgegevens — zichtbaar, niet stilletjes */
.sr-received {
    background: #eef7ee;
    border: 2px solid #2e7d32;
    border-radius: 10px;
    padding: 14px 16px;
    margin: 16px 0;
}
.sr-received > strong { color: #2e7d32; display: block; margin-bottom: 8px; }
.sr-recv-row { display: flex; justify-content: space-between; padding: 5px 0;
               border-bottom: 1px solid rgba(46,125,50,.15); font-size: .92rem; }
.sr-recv-row:last-child { border-bottom: none; }
.sr-recv-row span:first-child { color: var(--sr-muted); }
.sr-recv-row span:last-child  { font-weight: 700; }

/* ── AI-herkenning: voorstel, geen uitspraak ─────────────────────────────── */

.sr-consent {
    display: block;
    background: #fff8e6;
    border-left: 4px solid #b8860b;
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 12px;
    font-size: .9rem;
}

.sr-ai-result {
    background: var(--sr-primary-tint);
    border: 2px solid var(--sr-primary);
    border-radius: 12px;
    padding: 16px 18px;
    margin-top: 14px;
}

.sr-ai-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: #fff;
    border: 2px solid var(--sr-line);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 8px;
    min-height: 56px;
    cursor: pointer;
    font: inherit;
    text-align: left;
}
.sr-ai-option:hover { border-color: var(--sr-btn); }

.sr-ai-name  { flex: 1; font-weight: 700; }

/* De score is geen versiering: 40% betekent "wij weten het niet". */
.sr-ai-conf {
    flex: none;
    background: var(--sr-ink);
    color: var(--sr-primary);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: .85rem;
    font-weight: 700;
}
.sr-ai-nocat {
    flex: none;
    color: var(--sr-warn);
    font-size: .8rem;
    font-weight: 700;
}

/* Eén prijs, geen keuze: dan ook geen keuzerondje en geen label ervoor. */
.sr-quality-single {
    justify-content: space-between;
    border-color: var(--sr-btn);
    background: var(--sr-primary-tint);
    cursor: default;
}
.sr-quality-single .sr-quality-body { gap: 2px; }

/* Ademruimte tussen het label en het bedrag — "Herstelling€ 157,30" las als één woord. */
.sr-quality-price { margin-left: 16px; }

/* Voorschot: geel-groen, want het is een betaling maar geen eindafrekening. */
.sr-pay-deposit { border-color: #b8860b; background: #fffaf0; }
.sr-pay-deposit .sr-pay-amount { color: #8a6508; }

.sr-deposit-outcomes {
    list-style: none;
    padding: 0;
    margin: 16px 0 18px;
    text-align: left;
}
.sr-deposit-outcomes li {
    padding: 10px 0 10px 26px;
    border-top: 1px solid rgba(184,134,11,.25);
    position: relative;
    font-size: .93rem;
}
.sr-deposit-outcomes li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: #b8860b;
    font-weight: 700;
}
.sr-deposit-outcomes strong { display: block; }

/* "Dit bedrag kan nog stijgen" — een waarschuwing, geen alarm. */
.sr-revision-warning {
    background: #fffaf0;
    border: 2px solid #b8860b;
    border-radius: 10px;
    padding: 14px 16px;
    margin: 16px 0;
    text-align: left;
}
.sr-revision-warning > strong { color: #8a6508; display: block; margin-bottom: 6px; }

/* ── Herziene offerte ────────────────────────────────────────────────────── */

.sr-sum { width: 100%; border-collapse: collapse; margin: 18px 0; }
.sr-sum td { padding: 12px 0; border-bottom: 1px solid var(--sr-line); }
.sr-sum td.num { text-align: right; font-family: 'Open Sans', sans-serif; }
.sr-sum-diff td { border-bottom: none; font-size: 1.25rem; color: var(--sr-btn); padding-top: 16px; }

/* Twee keuzes, allebei met hun gevolg. Weigeren is geen fout — het is een
   geldige keuze, en het mag er niet uitzien als een straf. */
.sr-choices { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.sr-choices form { flex: 1; min-width: 240px; }
.sr-choices .sr-btn,
.sr-choices .sr-skip { width: 100%; min-height: 60px; }

.sr-preview {
    background: var(--sr-primary-tint);
    border: 2px solid var(--sr-primary);
    border-radius: 10px;
    padding: 14px 16px;
    margin: 18px 0;
}
.sr-preview > strong { display: block; margin-bottom: 8px; }

.sr-pricelist { margin: 12px 0 18px; }
.sr-pricelist summary { cursor: pointer; font-weight: 600; padding: 8px 0; }
.sr-pricelist table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.sr-pricelist td { padding: 8px 0; border-bottom: 1px solid var(--sr-line); font-size: .92rem; }
.sr-pricelist td.num { text-align: right; font-weight: 700; }

/* Weigeren: ingeklapt, want het is niet de aanbevolen keuze — maar wel een
   volwaardige. Niet verstoppen, wel niet vooropzetten. */
.sr-reject-block { margin-top: 16px; }
.sr-reject-block summary {
    cursor: pointer;
    padding: 14px 0;
    color: var(--sr-muted);
    font-weight: 600;
}
.sr-reject-block[open] summary { color: var(--sr-ink); }

.sr-reject-option {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 2px solid var(--sr-line);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 10px;
    cursor: pointer;
    min-height: 64px;
}
.sr-reject-option:has(input:checked) { border-color: var(--sr-btn); background: var(--sr-primary-tint); }
.sr-reject-option input { flex: none; width: 20px; height: 20px; }
.sr-reject-option > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.sr-reject-option small { color: var(--sr-muted); font-size: .85rem; }

/* Afstand doen is een eigendomsoverdracht. Dat mag er niet uitzien als een
   vinkje voor een nieuwsbrief. */
.sr-abandon-confirm {
    background: #fff8e6;
    border: 2px solid #b8860b;
    border-radius: 10px;
    padding: 14px 16px;
    margin: 12px 0;
}
.sr-abandon-confirm label { font-weight: 600; display: block; }

/* Adres: straat breed, nummer smal, bus smaller. Zoals iemand het schrijft. */
.sr-address-row {
    display: grid;
    grid-template-columns: 1fr 110px 110px;
    gap: 18px;
}
@media (max-width: 600px) {
    .sr-address-row { grid-template-columns: 1fr 1fr; }
    .sr-address-row .sr-street { grid-column: 1 / -1; }
}

/* ── Volgpagina ──────────────────────────────────────────────────────────── */

.sr-track { list-style: none; padding: 0; margin: 24px 0; }

.sr-track-step {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 0;
    border-left: 3px solid var(--sr-line);
    margin-left: 17px; padding-left: 24px;
    position: relative;
}
.sr-track-step:last-child { border-left-color: transparent; }

.sr-track-dot {
    position: absolute; left: -18px;
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--sr-line); color: var(--sr-ink);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .9rem;
}
.sr-track-step.done   { border-left-color: var(--sr-ok); }
.sr-track-step.done .sr-track-dot   { background: var(--sr-ok); color: #fff; }
.sr-track-step.active .sr-track-dot { background: var(--sr-btn); color: #fff; }
.sr-track-step.active .sr-track-label { font-weight: 700; }

.sr-timeline { list-style: none; padding: 0; margin: 12px 0 24px; }
.sr-timeline li {
    display: flex; gap: 16px; padding: 12px 0;
    border-bottom: 1px solid var(--sr-line); font-size: .93rem;
}
.sr-timeline time { flex: none; width: 130px; color: var(--sr-muted); font-size: .85rem; }

.sr-status-actions {
    background: var(--sr-surface-2);
    border-radius: 12px;
    padding: 18px 20px;
    margin: 20px 0;
}
.sr-status-actions h3 { margin: 0 0 12px; font-size: 1rem; }
.sr-status-buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.sr-status-buttons .sr-btn { min-height: 48px; }

/* ── Prijs bij één optie ─────────────────────────────────────────────────
   Een los bedrag onder een keuzelijst ziet eruit als een tikfout. Het is een
   PRIJS — het duurste woord op de pagina — en dus krijgt het een kaart. */
.sr-quality-single {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 2px solid var(--sr-btn);
    background: var(--sr-primary-tint);
    border-radius: 12px;
    padding: 18px 20px;
    margin-top: 14px;
    min-height: 72px;
    cursor: default;
}
.sr-quality-single .sr-quality-body strong { font-size: 1rem; }
.sr-quality-single .sr-quality-price {
    font-size: 1.7rem;
    color: var(--sr-btn);
}

/* ── De verzendrij ───────────────────────────────────────────────────────
   "Alles ingevuld" stond OVER de knop heen: beide in dezelfde rij, met
   text-align:right, zonder ruimte ertussen. Nu een flexrij: de teller links,
   de knop rechts, en een echte tussenruimte. */
.sr-submit-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 28px;
}
.sr-submit-row .sr-btn { margin-left: auto; }

@media (max-width: 560px) {
    .sr-submit-row { flex-direction: column-reverse; align-items: stretch; }
    .sr-submit-row .sr-btn { width: 100%; margin-left: 0; }
    .sr-submit-row .sr-progress { text-align: center; }
}


/* ── Portaalpagina's binnen de bestaande master-layout ────────────────────
   De master van deze site is op Nicepage gebouwd: absolute posities, zwevende
   cellen, een raster dat onze content naar rechts duwt met de halve pagina leeg
   ernaast.

   Dit haalt onze secties uit dat raster. Defensief: we weten niet precies wat de
   master doet, dus zetten we terug wat er gezet kán zijn. */

.sr-form,
.sr-portal,
.sr-pay {
    position: static !important;
    float: none !important;
    width: auto !important;
    max-width: 980px;
    margin-left: auto !important;
    margin-right: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    text-align: left;
}

/* Onze eigen absolute plaatsingen (het vinkje in een veld) blijven wel staan. */
.sr-form .sr-flag,
.sr-portal .sr-flag,
.sr-track-dot { position: absolute !important; }

/* Vergrendeld tot er betaald is. Grijs, niet rood: het is geen fout, het is
   een volgorde. */
.sr-locked {
    display: inline-block;
    background: var(--sr-surface-2);
    border: 2px dashed var(--sr-line);
    border-radius: 10px;
    padding: 14px 18px;
    color: var(--sr-muted);
    font-weight: 600;
}
.sr-locked p { margin: 6px 0 0; font-weight: 400; }

/* "of typ hem hier over" — een scheiding tussen de aanbevolen weg (scannen) en
   de terugvaloptie (typen). Geen kop: het is één stap, geen twee. */
.sr-or {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--sr-muted);
    font-size: .9rem;
    margin: 18px 0 10px;
}
.sr-or::before,
.sr-or::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--sr-line);
}

/* De scanknop is de HOOFDweg. Hij mag niet lijken op de skip eronder. */
#sr-cascade #sr-scan { width: 100%; }

/* ── USB-status aan de balie ─────────────────────────────────────────────
   Drie toestanden, en het verschil moet je van een meter afstand zien: de
   medewerker kijkt naar de klant, niet naar het scherm. */
.sr-usb-state {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 2px solid var(--sr-line);
    border-radius: 10px;
    padding: 16px 18px;
    margin: 14px 0;
    font-weight: 600;
}
.sr-usb-dot {
    flex: none;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--sr-muted);
    animation: sr-pulse 1.6s ease-in-out infinite;
}
@keyframes sr-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

.sr-usb-state.ok      { border-color: var(--sr-ok); background: var(--sr-ok-tint); }
.sr-usb-state.ok .sr-usb-dot { background: var(--sr-ok); animation: none; }

.sr-usb-state.warn    { border-color: #b8860b; background: #fffaf0; }
.sr-usb-state.warn .sr-usb-dot { background: #b8860b; animation: none; }

/* Geen daemon: geen pulserend bolletje. Er komt niets, en dan is een animatie
   die suggereert dat er iets aankomt ronduit misleidend. */
.sr-usb-state.offline { border-color: var(--sr-danger); background: #fdecec; }
.sr-usb-state.offline .sr-usb-dot { background: var(--sr-danger); animation: none; }

/* De toestandsvraag staat INLINE in device_cascade.blade.php.

   Reden: die regels stonden hier, dit bestand liep op de server achter, en dan
   verscheen de belangrijkste vraag van het formulier als drie kale knopjes op
   één regel. Opmaak die essentieel is voor de leesbaarheid van een vraag, hoort
   bij de vraag — niet in een los bestand dat vergeten kan worden. */

/* Een sport die iets opleverde maar niet genoeg (iPhone via QR): geen groen
   vinkje, want dan denkt de klant dat hij klaar is. */
#sr-cascade .sr-rung.partial .sr-rung-btn { border-color: #b8860b; background: #fffaf0; }
#sr-cascade .sr-rung.partial .sr-rung-num { background: #b8860b; color: #fff; }

/* ══════════════════════════════════════════════════════════════════════════
   HET QR-BLOK

   Dit is een commerciële pagina waar een klant zijn toestel aanmeldt, geen
   testscherm. Eerder stonden hier drie los zwevende elementen — knop, QR met
   felle rand, en een regel tekst met de code in een zwart blokje — elk met hun
   eigen kleur, in de volgorde waarin ze toevallig geschreven waren.

   Nu één kaart, met een duidelijke hiërarchie:

       de QR            centraal, met witruimte (dat is de norm, niet smaak:
                        een QR zonder marge is slechter leesbaar)
       een scheiding    "of" — het alternatief is GELIJKWAARDIG, geen voetnoot
       de code          voor wie niet kan scannen is dit de enige weg
       de status        onderaan, waar je hem verwacht
   ══════════════════════════════════════════════════════════════════════════ */

.sr-qr-pane {
    background: #fff;
    border: 1px solid var(--sr-line);
    border-radius: 16px;
    padding: 28px 26px 24px;
    margin-top: 18px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(27, 29, 22, .05);
}

/* De QR zelf. Geen felle rand eromheen: die concurreert met de code en maakt
   het scannen niet beter. Wel royale witruimte — dat maakt het wél beter. */
.sr-qr-frame {
    display: inline-block;
    background: #fff;
    padding: 18px;
    border-radius: 12px;
    border: 1px solid var(--sr-line);
}
.sr-qr-frame img,
.sr-qr-frame canvas { display: block; }

.sr-qr-scan-hint {
    margin: 16px 0 0;
    color: var(--sr-muted);
    font-size: .92rem;
}

/* De scheiding. Maakt van het alternatief een gelijkwaardige weg in plaats van
   een bijzin onder de afbeelding. */
.sr-qr-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 24px 0 20px;
    color: var(--sr-muted);
    font-size: .88rem;
    text-transform: lowercase;
}
.sr-qr-divider::before,
.sr-qr-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--sr-line);
}

.sr-qr-manual { }
.sr-qr-manual-lead { margin: 0 0 8px; font-size: .93rem; color: var(--sr-muted); }

/* De URL. Groot genoeg om van een meter afstand over te typen op een gsm. */
.sr-qr-url {
    font-family: 'Open Sans', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--sr-ink);
    margin: 0 0 16px;
    word-break: break-all;
}

.sr-qr-code-label { margin: 0 0 8px; font-size: .93rem; color: var(--sr-muted); }

/* De code. Donker vlak met limoen: het enige element op deze kaart dat schreeuwt,
   en dat mag — het is wat de klant moet overtypen. */
.sr-qr-pane .sr-code {
    display: inline-block;
    background: var(--sr-ink);
    color: var(--sr-primary);
    padding: 12px 22px;
    border-radius: 10px;
    font-family: 'Courier New', monospace;
    font-size: 1.9rem;
    font-weight: 700;
    letter-spacing: .3em;
    margin: 0;
    /* letter-spacing duwt het laatste teken naar rechts; dat compenseren we,
       anders staat de code optisch niet gecentreerd. */
    text-indent: .3em;
}

.sr-qr-status {
    margin: 20px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--sr-line);
    color: var(--sr-muted);
    font-size: .92rem;
}
.sr-qr-status.sr-ok  { color: var(--sr-ok); font-weight: 700; }
.sr-qr-status.sr-nok { color: #b8860b; font-weight: 600; }

/* De knop erboven: vol breed, zodat de kaart eronder er niet los bij hangt. */
#sr-cascade #sr-qr-start { width: 100%; }

/* Wanneer moet er betaald worden? Dat hoort bij de bezorgkeuze te staan, niet
   pas op de bevestigingspagina — anders kiest de klant en wordt hij daarna
   verrast. */
.sr-delivery-pay {
    margin: 8px 0 0 !important;
    font-size: .88rem;
    font-weight: 700;
    color: var(--sr-btn);
}
.sr-delivery-pay.counter { color: var(--sr-muted); font-weight: 600; }

.sr-pay-required { font-weight: 600; color: var(--sr-btn); margin-top: 10px; }

/* De waarschuwing kort laten oplichten wanneer iemand toch probeert te
   verzenden. Een melding die stil verschijnt op een lang formulier, ziet
   niemand. */
.sr-flash-warn {
    animation: sr-warn-pulse 1.8s ease-out;
}
@keyframes sr-warn-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(184,134,11,.55); }
    100% { box-shadow: 0 0 0 18px rgba(184,134,11,0); }
}