/* Incentive widget. Self-contained, prefixed with .incentive- to avoid
   collisions with the surrounding admin / site styles. Designed to look
   reasonable on a stock white background; project bundles can theme via
   CSS variables. */

:root {
    --incentive-primary: #1c6ee0;
    --incentive-primary-hover: #155bb5;
    --incentive-text: #1a1a1a;
    --incentive-muted: #666;
    --incentive-bg: #fff;
    --incentive-border: #d8d8d8;
    --incentive-card-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
    --incentive-error-bg: #fdecea;
    --incentive-error-border: #f5c6cb;
    --incentive-error-text: #842029;
    --incentive-radius: 10px;
}

/* Outer wrapper */
.incentive-wizard {
    max-width: 540px;
    margin: 24px auto;
    background: var(--incentive-bg);
    border: 1px solid var(--incentive-border);
    border-radius: var(--incentive-radius);
    box-shadow: var(--incentive-card-shadow);
    color: var(--incentive-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    overflow: hidden;
}

.incentive-standalone {
    background: #f5f6f8;
    margin: 0;
    padding: 24px;
}

/* Modal variant. Without JS this renders inline (graceful fallback,
   close-button blijft zichtbaar maar doet niets — form submits gaan
   via volledige page-POST en werken gewoon). Met JS:
   - .is-pending-open  → wizard is volledig verborgen (server zet 'm
                          zo neer als auto-open delay > 0)
   - .is-modal-open    → modal staat open boven een backdrop
   - geen van beide    → modal is gesloten / weggeklikt en wordt door
                          JS expliciet display:none gezet                       */
.incentive-variant-modal.is-pending-open {
    display: none;
}
.incentive-variant-modal.is-modal-open {
    position: fixed;
    /* Expliciet alle vier de zijden zetten — `inset: 0` werkt niet
       overal en bovendien moet ook width/max-width van de base-rule
       (.incentive-wizard heeft max-width: 540px) hier expliciet weg
       anders blijft de overlay 540px breed vastgepind aan de
       linkerrand i.p.v. fullscreen. */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    max-width: none;
    margin: 0;
    background: rgba(0, 0, 0, 0.55);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    /* Column layout: progress + step-host stacken verticaal binnen de
       card. Default flex-direction is row → twee kinderen komen naast
       elkaar en dat blok wordt dan als geheel gecentreerd (waardoor
       de step-host links van het visuele midden hangt). Met column +
       align-items: center wordt elk kind individueel horizontaal
       gecentreerd én is de card-stack zelf in het midden.
       `justify-content: safe center` valt automatisch terug op
       flex-start zodra content groter is dan het viewport — zonder
       `safe` zou je niet meer naar boven kunnen scrollen omdat de
       overflow buiten de container valt. */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: safe center;
    z-index: 1000;
    padding: 24px;
    animation: incentive-modal-fade 220ms ease-out;
    box-sizing: border-box;
    /* Scrollbaar als de card hoger is dan het viewport (lange formulier-
       stappen, vooral op mobiel). Zonder dit blijft de top van de modal
       buiten beeld. */
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

/* Op mobiel: card neemt vrijwel de volle breedte (kleine padding rond
   de backdrop zodat duidelijk is dat het een modal is en niet de
   pagina) en blijft verticaal gecentreerd. Geen min-height: 100vh —
   dat duwde korte content naar onder en frustreerde scroll-gedrag. */
@media (max-width: 600px) {
    .incentive-variant-modal.is-modal-open {
        padding: 12px;
    }
    .incentive-variant-modal.is-modal-open > *:not(.incentive-close) {
        max-width: none;
    }
    .incentive-variant-modal.is-modal-open > .incentive-close {
        top: 18px;
        right: 18px;
    }
}
@keyframes incentive-modal-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* In modal-open mode wordt de wizard zelf de backdrop (fullscreen flex
   container). De inhouds-elementen (progress + step-host) worden samen
   een card. Close-button valt buiten die card via :not()-selector. */
.incentive-variant-modal.is-modal-open > *:not(.incentive-close) {
    background: var(--incentive-bg);
    max-width: 540px;
    width: 100%;
    box-shadow: var(--incentive-card-shadow);
}
.incentive-variant-modal.is-modal-open > .incentive-progress:not(.is-hidden) {
    border-radius: var(--incentive-radius) var(--incentive-radius) 0 0;
}
.incentive-variant-modal.is-modal-open > .incentive-progress.is-hidden + .incentive-step-host,
.incentive-variant-modal.is-modal-open > .incentive-step-host {
    border-radius: 0 0 var(--incentive-radius) var(--incentive-radius);
}
.incentive-variant-modal.is-modal-open > .incentive-progress.is-hidden {
    /* Hidden progress geeft step-host alle hoeken alleen waar progress
       afwezig is. Met progress.is-hidden moet step-host volledige
       border-radius krijgen — die regel staat hierboven via "+
       sibling" selector. Maar als progress wel zichtbaar is, krijgt
       step-host alleen onderzijde. */
}

/* Close button — alleen zichtbaar binnen de modal-open state.
   Bij inline render verborgen want sluiten betekent daar niks. */
.incentive-close {
    display: none;
    position: absolute;
    top: 24px;
    right: 24px;
    border: 0;
    background: rgba(255, 255, 255, 0.95);
    color: var(--incentive-text);
    font-size: 26px;
    line-height: 1;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    cursor: pointer;
    padding: 0 0 2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    transition: background 0.15s, transform 0.15s;
    z-index: 1001;
}
.incentive-variant-modal.is-modal-open .incentive-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.incentive-close:hover {
    background: #fff;
    transform: scale(1.05);
}
.incentive-close:focus-visible {
    outline: 2px solid var(--incentive-primary);
    outline-offset: 2px;
}

/* Progress bar */
.incentive-progress {
    background: #f0f1f3;
    height: 8px;
    position: relative;
}
.incentive-progress.is-hidden {
    /* Bar is removed visually but DOM node stays so XHR transitions
       can re-show it when entering an input step. */
    visibility: hidden;
    height: 0;
    overflow: hidden;
}
.incentive-progress-bar {
    background: var(--incentive-primary);
    height: 100%;
    transition: width 250ms ease-out;
}
.incentive-progress-label {
    font-size: 11px;
    color: var(--incentive-muted);
    padding: 4px 16px 0;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

/* Step host */
.incentive-step-host {
    padding: 24px 24px 32px;
}
.incentive-step:focus { outline: none; }
.incentive-step-title {
    font-size: 22px;
    margin: 0 0 8px;
    line-height: 1.25;
}
/* widget.js zet bij elke step-overgang focus op .incentive-step-title
   (zodat screenreaders de nieuwe stap aankondigen). Visueel willen we
   geen blauw outline of text-selection — dat ziet er rommelig uit op
   een modal-open. tabindex=-1 zorgt al dat tab-navigatie hier niet
   landt, dus we hoeven geen visuele focus-indicator over te houden. */
.incentive-step-title:focus,
.incentive-step-title:focus-visible {
    outline: none;
}
.incentive-step-title {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.incentive-step-help {
    color: var(--incentive-muted);
    margin: 0 0 16px;
    font-size: 14px;
}
.incentive-step-fineprint {
    font-size: 11px;
    color: var(--incentive-muted);
    margin: 16px 0 0;
}

/* Intro check-list — opt-in via the type's renderIntro() returning
   <ul class="incentive-intro-checks">. Light-weight visual reinforcement
   of the value-prop without going overboard. */
.incentive-intro-checks {
    list-style: none;
    padding: 0;
    margin: 14px 0;
}
.incentive-intro-checks li {
    padding: 5px 0 5px 26px;
    position: relative;
    font-size: 14px;
    line-height: 1.45;
}
.incentive-intro-checks li::before {
    content: "✓";
    position: absolute;
    left: 4px;
    top: 5px;
    color: #1e7d34;
    font-weight: 700;
}

/* Forms */
.incentive-form {
    margin-top: 16px;
}
.incentive-field {
    margin-bottom: 14px;
}
.incentive-field label {
    display: block;
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 4px;
}
.incentive-field input[type=text],
.incentive-field input[type=email],
.incentive-field input[type=number],
.incentive-field input[type=date],
.incentive-field select,
.incentive-field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 12px;
    border: 1px solid var(--incentive-border);
    border-radius: 6px;
    font: inherit;
    background: #fff;
    color: var(--incentive-text);
}
.incentive-field input:focus,
.incentive-field select:focus,
.incentive-field textarea:focus {
    outline: 2px solid var(--incentive-primary);
    outline-offset: 1px;
    border-color: var(--incentive-primary);
}

/* Date input — keep it lined up with the other fields and tone down
   the native calendar icon. WebKit / Chromium browsers render a
   small calendar indicator at the right edge that we can re-skin. */
.incentive-field input[type=date] {
    color-scheme: light;
    cursor: pointer;
    /* Older Safari/iOS render dates a bit shorter without min-height */
    min-height: 38px;
    /* Hide the unwieldy "dd-mm-yyyy" placeholder when empty */
    line-height: 1.2;
}
.incentive-field input[type=date]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.55;
    padding: 2px;
    transition: opacity 0.15s;
}
.incentive-field input[type=date]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}
.incentive-field input[type=date]::-webkit-datetime-edit {
    color: var(--incentive-text);
}
.incentive-field input[type=date]:invalid::-webkit-datetime-edit {
    /* Empty date fields look greyed out instead of black "dd-mm-yyyy". */
    color: var(--incentive-muted);
}
.incentive-required { color: #d04848; margin-left: 2px; }
.incentive-help {
    display: block;
    font-size: 11px;
    color: var(--incentive-muted);
    margin-top: 4px;
}
.incentive-check {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    font-weight: 400;
}

/* Boolean Ja/Nee — pill-style radios. Order in HTML is intentional:
   uitleg (description) -> question (title) -> two pills. */
.incentive-field-yesno {
    margin-bottom: 18px;
}
.incentive-yesno-help {
    color: var(--incentive-muted);
    font-size: 12px;
    line-height: 1.45;
    margin: 0 0 6px;
}
.incentive-yesno-question {
    font-weight: 600;
    font-size: 14px;
    margin: 0 0 8px;
    color: var(--incentive-text);
}
.incentive-yesno {
    display: flex;
    gap: 8px;
}
.incentive-yesno-option {
    flex: 1;
    cursor: pointer;
    position: relative;
    display: block;
}
.incentive-yesno-option input[type=radio] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}
.incentive-yesno-marker {
    display: block;
    padding: 11px 16px;
    border: 1.5px solid var(--incentive-border);
    border-radius: 6px;
    background: #fff;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    color: var(--incentive-text);
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    user-select: none;
}
.incentive-yesno-option:hover .incentive-yesno-marker {
    border-color: var(--incentive-primary);
    background: #f0f5ff;
}
.incentive-yesno-option input[type=radio]:checked + .incentive-yesno-marker {
    background: var(--incentive-primary);
    color: #fff;
    border-color: var(--incentive-primary);
}
.incentive-yesno-option input[type=radio]:focus-visible + .incentive-yesno-marker {
    outline: 2px solid var(--incentive-primary);
    outline-offset: 2px;
}

/* Buttons */
.incentive-btn {
    display: inline-block;
    padding: 10px 20px;
    border: 1px solid var(--incentive-border);
    background: #f0f1f3;
    border-radius: 6px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    color: var(--incentive-text);
}
.incentive-btn:hover { background: #e3e5e8; }
.incentive-btn-primary {
    background: var(--incentive-primary);
    border-color: var(--incentive-primary);
    color: #fff;
}
.incentive-btn-primary:hover { background: var(--incentive-primary-hover); border-color: var(--incentive-primary-hover); }
.incentive-actions {
    margin-top: 16px;
}

/* Op input-stappen liggen de buttons in DOM-volgorde Volgende-eerst
   (zodat Enter de juiste knop triggert). Visueel willen we Vorige
   links en Volgende rechts: row-reverse + auto-margin links op de
   eerste flex-item duwt Volgende naar het einde. */
.incentive-actions-row {
    display: flex;
    flex-direction: row-reverse;
    gap: 8px;
}
.incentive-actions-row > .incentive-btn-primary {
    margin-left: auto;
}

/* Errors */
.incentive-error {
    background: var(--incentive-error-bg);
    border: 1px solid var(--incentive-error-border);
    color: var(--incentive-error-text);
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 13px;
    margin-bottom: 14px;
}

/* Result */
.incentive-step-result-body {
    padding: 12px 0;
}
.incentive-result-download {
    text-align: center;
    padding: 16px 0;
}
.incentive-result-download .incentive-btn {
    padding: 14px 32px;
    font-size: 16px;
}
.incentive-result-message {
    margin-top: 16px;
    color: var(--incentive-muted);
}

/* Loading state during XHR */
.incentive-wizard.is-loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Smaller screens */
@media (max-width: 600px) {
    .incentive-wizard { margin: 12px; max-width: none; }
    .incentive-step-host { padding: 18px 18px 24px; }
    .incentive-step-title { font-size: 18px; }
}