/* ============================================================================
   cancel-flow.css — Opzeg- & retentieflow (reden → aanbod → enquête)
   ----------------------------------------------------------------------------
   Gebouwd met de ÉCHTE Broednest-bouwstenen, niet met een verzonnen stijl:
     • platte, warme vlakken — crème #FFEDC7 (.pitem) en grijs #eee (.inlineBox),
       royale radius (15px), géén randen, géén zachte slagschaduwen;
     • de kenmerkende oranje knop met de platte 3D-schaduw 0 3px 0 #B25432,
       radius 9px — die erven we van style-plus.css i.p.v. te overschrijven;
     • typografie zoals de rest van de app (Open Sans body, Nunito koppen).

   LET OP: html staat op 62.5% → 1rem = 10px. Dus 1.7rem = 17px, 2.4rem = 24px.
   (Eerdere versie gebruikte 1rem = "16px" → alles veel te klein. Vandaar.)

   Alles gescoped onder .cancel-wizard zodat de globale stijl onaangeroerd blijft.
   Knoppen staan altijd NETJES ONDER ELKAAR, nooit rommelig naast elkaar.
   ========================================================================== */

.cancel-wizard {
    --coral:       #FF7949;   /* primaire knop / accent          */
    --coral-dk:    #E56C41;   /* knop-hover                       */
    --coral-shade: #B25432;   /* platte 3D-knopschaduw            */
    --coral-link:  #99482B;   /* echte link-kleur in de app       */
    --ink:         #46585C;   /* tekst (dark charcoal)            */
    --charcoal:    #4F6367;   /* secundair                        */
    --cream:       #FFEDC7;   /* warme keuzekaart (.pitem)        */
    --cream-dk:    #FFE6B1;   /* crème hover (echte .pitem hover) */
    --grey:        #EEEEEE;   /* neutrale inhoudskaart (.inlineBox)*/
    --line:        #E7DDD0;   /* zachte warme invoer-rand         */
    --muted:       #8A9499;   /* gedempte tekst / stille links    */
}

/* ── stap-container ──────────────────────────────────────────────────────── */
.cancel-wizard .cancel-step,
.cancel-wizard .cancel-reason {
    max-width: 470px;
    margin: 0 auto;
    padding: 6px 6px 48px;
    text-align: center;
    animation: bnStepIn .35s ease both;
}
@keyframes bnStepIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

/* ── koppen & tekst: leun op de echte typografie, alleen leesbaar maken ───── */
.cancel-wizard h3 {
    line-height: 1.12;        /* echte h3 is 0.8 — te krap voor een 2-regelige vraag */
    margin: 0 0 1.4rem;
}
.cancel-wizard .cancel-step > p,
.cancel-wizard .cancel-reason > p {
    font-size: 1.7rem;        /* 17px — was 10,5px */
    line-height: 1.55;
    max-width: 430px;
    margin: 0 auto 2rem;
    color: var(--ink);
}
.cancel-wizard .cancel-step > p:last-of-type { margin-bottom: 0; }
.cancel-wizard p strong { letter-spacing: normal; }
.cancel-wizard a { color: var(--coral-link); }   /* mailto's e.d. = echte link-kleur */

/* ── reden-lijst: échte crème keuzekaarten (.pitem-stijl), strak onder elkaar ─ */
.cancel-wizard .reason-chips {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 430px;
    margin: 2.6rem auto 0;
}
.cancel-wizard .reason-chips .chip {
    display: block;
    width: 100%;
    margin: 0;
    background: var(--cream);
    border: none;
    border-radius: 15px;
    padding: 17px 22px;
    color: var(--ink);
    font-family: 'Open Sans', sans-serif;
    font-size: 1.7rem;        /* 17px — was 10px */
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.02rem;
    text-align: left;
    white-space: normal;
    box-shadow: none;
    cursor: pointer;
    transition: background .15s ease, transform .08s ease;
}
.cancel-wizard .reason-chips .chip:hover {
    background: var(--cream-dk);   /* exact de echte .pitem-hover */
}
.cancel-wizard .reason-chips .chip:active { transform: translateY(1px); }

.cancel-wizard .reason-other {
    max-width: 430px;
    margin: 18px auto 0;
    text-align: center;
}
.cancel-wizard .reason-other .button { margin-top: 12px; }

/* ── knoppen: NIET overschrijven — de echte oranje 3D-knop erven we ───────── */
/* We passen enkel aan wat nodig is: laten afbreken bij lange labels, ietsje    */
/* compacter (Jelle: "te groot"), en een nette disabled-staat.                  */
.cancel-wizard .button {
    white-space: normal;
    line-height: 1.3;
    font-size: 1.7rem;        /* iets kleiner dan de globale 1.2em (~19px)      */
    padding: 12px 26px;
    letter-spacing: -.03rem;
    /* background, box-shadow (0 3px 0 #B25432), border-radius 9px → uit style-plus */
}
.cancel-wizard .button:disabled,
.cancel-wizard .button[disabled] {
    opacity: .5;
    cursor: default;
    box-shadow: 0 3px 0 var(--coral-shade);
}
/* secundair: rustige, neutrale outline (geen tweede oranje massa) */
.cancel-wizard .button.hollow {
    background: transparent;
    color: var(--charcoal);
    box-shadow: none;
    border: 2px solid var(--line);
}
.cancel-wizard .button.hollow:hover {
    background: #F4EFE8;
    color: var(--ink);
    box-shadow: none;
}

/* ── actie-knoppen netjes ONDER elkaar, gecentreerd ───────────────────────── */
.cancel-wizard .offer-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin: 2.6rem auto 0;
}
.cancel-wizard .survey-actions,
.cancel-wizard .cancel-survey-cta {
    margin: 2.6rem 0 0;
    text-align: center;
}

/* ── geld-aanbod: nette grijze inhoudskaarten (.inlineBox-stijl) ──────────── */
.cancel-wizard .offer-options {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 470px;
    margin: 2.6rem auto 0;
    text-align: left;
}
.cancel-wizard .offer-option {
    background: var(--grey);
    border: none;
    border-radius: 15px;
    padding: 22px 24px;
    box-shadow: none;
}
.cancel-wizard .offer-option > strong {
    display: block;
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: 1.9rem;        /* 19px */
    color: var(--ink);
    margin-bottom: 6px;
    letter-spacing: -.03rem;
}
.cancel-wizard .offer-option > p {
    font-size: 1.6rem;        /* 16px */
    line-height: 1.5;
    color: var(--ink);
    margin: 0 0 16px;
}
.cancel-wizard .offer-option .button {
    margin: 0;
    width: 100%;              /* beide kaart-knoppen even breed = netjes (i.p.v. rommelig ongelijk) */
}

/* ── opzeggen: altijd 1 klik weg, maar rustig (niet geschreeuwd) ──────────── */
.cancel-wizard .offer-cancel-link { margin: 2.2rem 0 0; }
.cancel-wizard .offer-cancel {
    color: var(--muted);
    font-size: 1.6rem;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color .15s, border-color .15s;
}
.cancel-wizard .offer-cancel:hover {
    color: var(--ink);
    border-bottom-color: currentColor;
}

/* ── persoonlijk woordje van Jelle: warme crème kaart (.inlineBox.fresh) ──── */
.cancel-wizard .cancel-jelle-note {
    background: var(--cream);
    border: none;
    border-radius: 15px;
    padding: 22px 26px;
    margin: 2.4rem auto;
    max-width: 470px;
    text-align: left;
}
.cancel-wizard .cancel-jelle-note p {
    font-size: 1.7rem;
    line-height: 1.6;
    color: var(--ink);
    margin: 0;
}
.cancel-wizard .cancel-jelle-note footer {
    margin-top: 14px;
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: 1.7rem;
    color: var(--ink);
}

/* ── enquête ─────────────────────────────────────────────────────────────── */
.cancel-wizard .survey-progress {
    color: #B9B1A4;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin: 0 0 1rem;
}
.cancel-wizard p.survey-hint {
    font-size: 1.5rem;
    color: var(--muted);
    max-width: 400px;
    margin: -1rem auto 1.8rem;
}

/* keuze-opties: zelfde crème kaarten, strak onder elkaar; gekozen = oranje ─── */
.cancel-wizard .survey-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 430px;
    margin: 2.4rem auto;
}
.cancel-wizard .survey-option {
    display: block;
    width: 100%;
    margin: 0;
    background: var(--cream);
    border: none;
    border-radius: 15px;
    padding: 15px 20px;
    color: var(--ink);
    font-family: 'Open Sans', sans-serif;
    font-size: 1.7rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.02rem;
    text-align: left;
    white-space: normal;
    box-shadow: none;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, transform .08s ease;
}
.cancel-wizard .survey-option:hover { background: var(--cream-dk); }
.cancel-wizard .survey-option:active { transform: translateY(1px); }
.cancel-wizard .survey-option.is-selected {
    background: var(--coral);
    color: #fff;
}
.cancel-wizard .survey-option.is-selected::before {
    content: '\2713\00a0';            /* ✓ + nbsp */
    font-weight: 700;
}

/* invoervelden */
.cancel-wizard .survey-textarea,
.cancel-wizard .reason-other textarea {
    display: block;
    width: 100%;
    max-width: 470px;
    margin: 0 auto;
    border: 2px solid var(--line);
    border-radius: 12px;
    padding: 14px 16px;
    font-family: 'Open Sans', sans-serif;
    font-size: 1.6rem;        /* 16px — net als de app-inputs */
    line-height: 1.5;
    color: var(--ink);
    background: #fff;
    resize: vertical;
    transition: border-color .15s;
}
.cancel-wizard .survey-textarea:focus,
.cancel-wizard .reason-other textarea:focus {
    outline: none;
    border-color: var(--coral);
}

.cancel-wizard .survey-skip { margin: 1.8rem auto 0; }
.cancel-wizard .survey-skip a {
    color: var(--muted);
    font-size: 1.5rem;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color .15s, border-color .15s;
}
.cancel-wizard .survey-skip a:hover {
    color: var(--ink);
    border-bottom-color: currentColor;
}

/* ── kleine schermen ─────────────────────────────────────────────────────── */
@media screen and (max-width: 40em) {
    .cancel-wizard .cancel-step,
    .cancel-wizard .cancel-reason { padding-bottom: 36px; }
    .cancel-wizard .button { font-size: 1.6rem; padding: 11px 20px; }
    .cancel-wizard .reason-chips .chip,
    .cancel-wizard .survey-option { font-size: 1.6rem; }
}