/* ============================================================================
 * Ordolio Register — page-specific styling
 *
 * Loaded only by main/templates/registration/signup.html. All rules scoped
 * under `body.register-2026` so this file is dead weight on every other page.
 *
 * Layout primitives, surfaces, form controls, buttons, alerts, badges, and
 * wizard nav buttons come from the ui-v2 library (loaded via ui-v2/index.css
 * + the global Tailwind bundle). This file only contains register-specific
 * bits:
 *
 *   - Hero benefits list (.rp-hero__benefits / __check)
 *   - Form-wizard-step typography (h1/h3/h5/p inside steps)
 *   - User-type radio cards (parent vs solo_member) with neutralised
 *     legacy .checkbox-tile inner span
 *   - Helper paragraphs that show on user-type select (.show-on-select-value)
 *   - Custom-styled accept-terms checkbox
 *   - Children formset row (.form-row-children) + delete-label override
 *   - Add-form-row button
 *   - Secondary contact toggle + content panel
 *   - Mobile tweaks specific to register (hide benefits list)
 *
 * DOM hooks preserved (test contract — DO NOT REMOVE):
 *   [data-testid="user-registration-wizard"]
 *   [data-testid="user_type-fieldset"]
 *   [data-testid="user_type-option-parent"]
 *   [data-testid="user_type-option-solo_member"]
 *   [data-testid="registration-first-name|last-name|email|phone|accept-terms"]
 *   #id_children-{N}-voornaam, -naam, -geslacht
 *   button[data-prefix="children"]
 *   .form-wizard-step + .form-wizard-step.active
 *   .next-button, .previous-button, .submit-button (JS-added)
 *   .add-form-row + data-prefix
 *   .delete-checkbox, .delete-label
 *   .show-on-select-value, data-targetvalue, data-target
 *   #secondary-contact-toggle-btn, #secondary-contact-fields
 *
 * Naming note: .rp-hero__benefits + .rp-hero__check class names are kept
 * from the original register_redesign.css for now. They are register-specific
 * (login uses .lp-hero__quote* instead). A future cleanup may rename them to
 * .register-* for consistency, but that's cosmetic — out of scope here.
 * ========================================================================== */

/* ----- Hero benefits list (register-specific — login has a quote instead) - */

body.register-2026 .rp-hero__benefits {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--ordolio-space-3);
}
body.register-2026 .rp-hero__benefits li {
    display: flex;
    gap: var(--ordolio-space-3);
    align-items: flex-start;
    font-size: var(--ordolio-text-base);
    color: var(--ordolio-fg-default);
}
body.register-2026 .uv2-hero--photo .rp-hero__benefits li {
    color: #fff;
}
body.register-2026 .rp-hero__check {
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    border-radius: var(--ordolio-radius-pill);
    background: var(--ordolio-default-primary);
    color: var(--ordolio-text-on-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: var(--ordolio-weight-bold);
}

/* ----- text-align: left guard --------------------------------------------- */

/* Defeat inherited text-align: center from .external_card_body wrapper.
   The wizard step content is full of inputs + helper text — we want
   left-aligned throughout. */
body.register-2026 .uv2-form,
body.register-2026 .uv2-form *,
body.register-2026 .form-wizard-step {
    text-align: left;
}

/* ----- Form-wizard-step typography ---------------------------------------- */

body.register-2026 .form-wizard-container {
    margin: 0;
}
body.register-2026 .form-wizard-step h1 {
    font-family: var(--ordolio-font-display);
    font-size: var(--ordolio-text-2xl);
    line-height: var(--ordolio-leading-snug);
    letter-spacing: var(--ordolio-tracking-tight);
    font-weight: var(--ordolio-weight-semibold);
    color: var(--ordolio-fg-default);
    margin: 0 0 var(--ordolio-space-3);
}
body.register-2026 .form-wizard-step h3 {
    font-family: var(--ordolio-font-display);
    font-size: var(--ordolio-text-xl);
    letter-spacing: var(--ordolio-tracking-tight);
    font-weight: var(--ordolio-weight-semibold);
    margin: 0 0 var(--ordolio-space-3);
}
body.register-2026 .form-wizard-step h5 {
    font-size: var(--ordolio-text-base);
    font-weight: var(--ordolio-weight-medium);
    color: var(--ordolio-fg-muted);
    margin: 0 0 var(--ordolio-space-5);
}
body.register-2026 .form-wizard-step p {
    color: var(--ordolio-fg-muted);
    font-size: var(--ordolio-text-sm);
    line-height: var(--ordolio-leading-relaxed);
    margin: 0 0 var(--ordolio-space-4);
}

/* ----- User-type radio cards (Step 1: parent vs solo_member) ------------- */

body.register-2026 [data-testid="user_type-fieldset"] {
    border: 0;
    padding: 0;
    margin: 0 0 var(--ordolio-space-4);
}
body.register-2026 [data-testid="user_type-fieldset"] legend {
    /* Hidden via visually-hidden technique — the radio cards themselves
       are the field's accessible name. */
    font-size: 0;
    height: 0;
    width: 0;
    overflow: hidden;
}

/* The user_type field renders as a radio group via Django widget.
   Style each label to feel like a card. */
body.register-2026 .form-group [data-testid="user_type-fieldset"],
body.register-2026 .form-group .d-flex.justify-content-center {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: var(--ordolio-space-3);
    justify-content: stretch !important;
}
@media (max-width: 599px) {
    body.register-2026 .form-group [data-testid="user_type-fieldset"],
    body.register-2026 .form-group .d-flex.justify-content-center {
        grid-template-columns: 1fr;
    }
}

body.register-2026 .form-group [data-testid="user_type-fieldset"] label,
body.register-2026 .form-group .d-flex.justify-content-center label {
    display: flex;
    align-items: center;
    gap: var(--ordolio-space-3);
    padding: var(--ordolio-space-4) var(--ordolio-space-5);
    background: var(--ordolio-bg-surface);
    border: 1px solid var(--ordolio-border-default);
    border-radius: var(--ordolio-radius-lg);
    box-shadow: var(--ordolio-shadow-xs);
    cursor: pointer;
    font-size: var(--ordolio-text-base);
    font-weight: var(--ordolio-weight-medium);
    color: var(--ordolio-fg-default);
    margin: 0;
    transition:
        border-color var(--ordolio-motion-fast) var(--ordolio-ease-out),
        box-shadow var(--ordolio-motion-fast) var(--ordolio-ease-out),
        background-color var(--ordolio-motion-fast) var(--ordolio-ease-out);
}
body.register-2026 .form-group [data-testid="user_type-fieldset"] label:hover,
body.register-2026 .form-group .d-flex.justify-content-center label:hover {
    border-color: var(--ordolio-default-primary);
    box-shadow: var(--ordolio-shadow-md);
    background: color-mix(in srgb, var(--ordolio-bg-surface), var(--ordolio-default-primary) 2%);
}
body.register-2026 .form-group [data-testid="user_type-fieldset"] label:has(input:checked),
body.register-2026 .form-group .d-flex.justify-content-center label:has(input:checked) {
    border-color: var(--ordolio-default-primary);
    background: var(--ordolio-default-primary-soft);
}
body.register-2026 .form-group [data-testid="user_type-fieldset"] input[type="radio"],
body.register-2026 .form-group .d-flex.justify-content-center input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--ordolio-border-strong);
    border-radius: var(--ordolio-radius-pill);
    flex: 0 0 auto;
    cursor: pointer;
    position: relative;
    transition: all var(--ordolio-motion-fast) var(--ordolio-ease-out);
    margin: 0;
}
body.register-2026 .form-group [data-testid="user_type-fieldset"] input[type="radio"]:checked,
body.register-2026 .form-group .d-flex.justify-content-center input[type="radio"]:checked {
    background: var(--ordolio-default-primary);
    border-color: var(--ordolio-default-primary);
}
body.register-2026 .form-group [data-testid="user_type-fieldset"] input[type="radio"]:checked::after,
body.register-2026 .form-group .d-flex.justify-content-center input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 7px;
    height: 7px;
    background: #fff;
    border-radius: var(--ordolio-radius-pill);
}
body.register-2026 .form-group [data-testid="user_type-fieldset"] input[type="radio"]:focus-visible,
body.register-2026 .form-group .d-flex.justify-content-center input[type="radio"]:focus-visible {
    box-shadow: var(--ordolio-ring-focus);
    outline: none;
}

/* Django renders the radio choice as:
     <label.checkbox-wrapper>
       <input type="radio">
       <span.checkbox-tile>      ← legacy custom.css gives this a card border + shadow
         <span.checkbox-label>icon + text</span>
       </span>
     </label>
   We made the outer <label> the card. Neutralize the inner span so we
   don't get a card-in-card. */
body.register-2026 .checkbox-tile {
    all: unset;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--ordolio-space-3);
    flex: 1 1 auto;
    min-height: 0;
}
body.register-2026 .checkbox-tile::before,
body.register-2026 .checkbox-tile::after {
    content: none !important;
    display: none !important;
}
body.register-2026 .checkbox-tile .checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--ordolio-space-3);
    color: inherit;
    font: inherit;
}
body.register-2026 .checkbox-tile .checkbox-label i {
    color: var(--ordolio-default-primary);
    font-size: 18px;
}
body.register-2026 input.checkbox-input:checked + .checkbox-tile {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* ----- Helper paragraphs that show on user-type select ------------------- */

body.register-2026 .show-on-select-value {
    /* Existing JS sets display: block or none via select-driven toggle.
       Style content for the visible state. */
    padding: var(--ordolio-space-3) var(--ordolio-space-4);
    background: var(--ordolio-bg-surface-sunken);
    border-radius: var(--ordolio-radius-md);
    font-size: var(--ordolio-text-sm);
    color: var(--ordolio-fg-muted);
    line-height: var(--ordolio-leading-relaxed);
}

/* ----- Accept-terms checkbox (with embedded links) ----------------------- */

body.register-2026 input[data-testid="registration-accept-terms"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--ordolio-border-strong);
    background: var(--ordolio-bg-surface);
    border-radius: var(--ordolio-radius-xs);
    cursor: pointer;
    position: relative;
    transition: all var(--ordolio-motion-fast) var(--ordolio-ease-out);
    flex: 0 0 auto;
    margin-right: var(--ordolio-space-2);
    vertical-align: middle;
}
body.register-2026 input[data-testid="registration-accept-terms"]:checked {
    background: var(--ordolio-default-primary);
    border-color: var(--ordolio-default-primary);
}
body.register-2026 input[data-testid="registration-accept-terms"]:checked::after {
    content: "";
    position: absolute;
    top: 1px;
    left: 5px;
    width: 5px;
    height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
body.register-2026 input[data-testid="registration-accept-terms"]:focus-visible {
    box-shadow: var(--ordolio-ring-focus);
    outline: none;
}
body.register-2026 input[data-testid="registration-accept-terms"] + a,
body.register-2026 label:has(input[data-testid="registration-accept-terms"]) a {
    color: var(--ordolio-default-primary);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--ordolio-default-primary), transparent 60%);
    text-underline-offset: 3px;
}

/* ----- Children formset rows --------------------------------------------- */

body.register-2026 .form-row-children {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: var(--ordolio-space-4);
    background: var(--ordolio-bg-surface-sunken) !important;
    border: 1px solid var(--ordolio-border-subtle) !important;
    border-radius: var(--ordolio-radius-lg) !important;
    padding: var(--ordolio-space-5) !important;
    margin-bottom: var(--ordolio-space-4) !important;
    position: relative;
}
@media (max-width: 599px) {
    body.register-2026 .form-row-children {
        grid-template-columns: 1fr;
    }
}
body.register-2026 .form-row-children .col-12 {
    padding: 0 !important;
}
body.register-2026 .form-row-children .form-group {
    margin-bottom: 0;
}

body.register-2026 input[type="checkbox"].delete-checkbox {
    display: none !important;
}

/* Bootstrap's .col-12 is `position: relative` for the grid system. The
   delete-checkbox sits in the LAST .col-12 inside .form-row-children,
   and our absolute .delete-label would otherwise position relative to
   that col (= bottom-right of the column area, NOT the top-right of
   the row card). Force the col + its inner label to position: static
   so the absolute positioning bubbles up to .form-row-children. */
body.register-2026 .form-row-children > [class*="col-"]:last-child,
body.register-2026 .form-row-children > [class*="col-"]:last-child > label {
    position: static !important;
}

/* Legacy custom.css has high-specificity .delete-label::before with a FA
   icon, light-red bg, 2.5rem square. Override aggressively under our
   scope so we get a 44x44 muted-grey "x" that becomes danger-soft on
   hover (touch-target friendly, less visually loud). */
body.register-2026 .form-row-children .delete-label {
    position: absolute !important;
    top: var(--ordolio-space-3) !important;
    right: var(--ordolio-space-3) !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: var(--ordolio-radius-pill) !important;
    background: transparent !important;
    color: var(--ordolio-fg-subtle) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    transition:
        background-color var(--ordolio-motion-fast) var(--ordolio-ease-out),
        color var(--ordolio-motion-fast) var(--ordolio-ease-out) !important;
}
/* Override the legacy ::before that uses a FA icon — replace with a
   plain "×" character so we don't depend on FA being loaded for this. */
body.register-2026 .form-row-children .delete-label::before {
    content: "×" !important;
    font-family: var(--ordolio-font-body) !important;
    font-size: 22px !important;
    line-height: 1 !important;
    background: transparent !important;
    color: inherit !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    border-radius: 0 !important;
    text-align: center !important;
    display: inline !important;
}
body.register-2026 .form-row-children .delete-label:hover {
    background: var(--ordolio-default-danger-soft) !important;
    color: var(--ordolio-default-danger-dark) !important;
}
body.register-2026 .form-row-children .delete-label:hover::before {
    color: var(--ordolio-default-danger-dark) !important;
    background: transparent !important;
}
/* Also override the legacy `:checked + .delete-label` rule that sets a
   pink background — we hide the row via JS, so the checked state should
   never visually persist. */
body.register-2026 input[type="checkbox"].delete-checkbox:checked + .delete-label {
    background: transparent !important;
}

/* ----- Add-form-row button (add another child) -------------------------- */

body.register-2026 .add-form-row {
    display: inline-flex;
    align-items: center;
    gap: var(--ordolio-space-2);
    padding: 0 var(--ordolio-space-5);
    height: 44px;
    background: var(--ordolio-default-primary-soft);
    color: var(--ordolio-default-primary-dark);
    border: 1px dashed color-mix(in srgb, var(--ordolio-default-primary), transparent 50%);
    border-radius: var(--ordolio-radius-md);
    font-family: var(--ordolio-font-body);
    font-size: var(--ordolio-text-sm);
    font-weight: var(--ordolio-weight-semibold);
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--ordolio-motion-fast) var(--ordolio-ease-out);
}
body.register-2026 .add-form-row:hover {
    background: color-mix(in srgb, var(--ordolio-default-primary), white 75%);
}

/* ----- Secondary contact toggle ------------------------------------------ */

body.register-2026 #secondary-contact-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--ordolio-space-2);
    padding: 0 var(--ordolio-space-5);
    height: 44px;
    background: var(--ordolio-default-primary-soft);
    color: var(--ordolio-default-primary-dark);
    border: 0;
    border-radius: var(--ordolio-radius-md);
    font-family: var(--ordolio-font-body);
    font-size: var(--ordolio-text-sm);
    font-weight: var(--ordolio-weight-semibold);
    cursor: pointer;
}
body.register-2026 #secondary-contact-toggle-btn:hover {
    background: color-mix(in srgb, var(--ordolio-default-primary), white 75%);
}

body.register-2026 .secondary-contact-content > div {
    background: var(--ordolio-bg-surface-sunken) !important;
    border: 1px solid var(--ordolio-border-subtle) !important;
    border-radius: var(--ordolio-radius-lg) !important;
    padding: var(--ordolio-space-5) !important;
}

/* ============================================================================
 * Mobile (<900px) — register-specific tweaks
 *
 * The ui-v2 library already handles: hero auto-height, form panel padding,
 * brand row hide, form-control 52px height + 16px font-size, wizard nav
 * button 52px height. This block only adds register-specific tweaks:
 *   - Hide hero benefits list (decorative, would push form below the fold)
 * ========================================================================== */

@media (max-width: 899px) {
    body.register-2026 .rp-hero__benefits {
        display: none;
    }
    body.register-2026 .uv2-hero__org {
        margin-bottom: 0;
    }
}