/* ============================================================
   Herroepen in twee stappen (templates/webshop/herroepen.html,
   docs/features/herroeping.md). Telefoon eerst: één kolom, max 480px.
   Velden en knop uit _checkout.css (.field-input, .btn-pay), rijen en
   vinkjes uit _status.css (.retour-keuze, .retour-vink). Alleen tenant-tokens.
   Safari 14 baseline.
   ============================================================ */

.herroepen {
    max-width: 480px;
    margin: 0 auto;
    padding: 24px 16px 40px;
    overflow-wrap: break-word;
}
.herroepen-form {
    display: grid;
    gap: 12px;
}
/* display: grid wint anders van het hidden-attribuut: elke stap moet echt weg kunnen. */
.herroepen-form[hidden] { display: none; }
.herroepen-form .field { margin-bottom: 0; }
.herroepen-form .field-input {
    font-size: 16px; /* iOS zoomt niet in bij 16px */
}
.herroepen-kicker {
    margin: 0;
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--color-text-light);
}
.herroepen-titel {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 28px;
    line-height: 1.2;
    color: var(--color-text);
}
.herroepen-titel:focus { outline: none; }
.herroepen-tekst {
    margin: 0 0 12px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text);
}
.herroepen-hint {
    margin: 4px 0 0;
    font-family: var(--font-ui);
    font-size: 13px;
    color: var(--color-text-light);
}
.herroepen-hele {
    border-bottom: 1px solid var(--color-border);
    font-weight: 700;
}
.herroepen-grijs .retour-vink { color: var(--color-text-light); cursor: default; }
.herroepen-reden { flex-basis: 100%; margin: -4px 0 0 34px; }
.herroepen-terug {
    min-height: 44px;
    background: none;
    border: none;
    font-family: var(--font-ui);
    font-size: 14px;
    color: var(--color-text-light);
    text-decoration: underline;
    cursor: pointer;
}