/* Signup wizard styling.
   Brand-aligned with the listing wizard. Shares Barlow Condensed (display)
   and Poppins (body), #D0D5DD borders, #344054 body text, and the same
   off-black primary button surface so the two wizards read as one product.

   Layout: every step page is rendered inside layouts/auth-shell.blade.php
   which strips the standard product nav + footer. The styles below are
   scoped to that shell + the five wizard step views. */

/* ------------------------------------------------------------------ */
/* Tokens                                                              */
/* ------------------------------------------------------------------ */

:root {
    --wiz-bg: #ffffff;
    --wiz-surface: #ffffff;
    --wiz-border: #EAECF0;
    --wiz-border-strong: #D0D5DD;
    --wiz-text: #344054;
    --wiz-text-muted: #667085;
    --wiz-text-soft: #98A2B3;
    --wiz-text-strong: #101828;
    --wiz-accent: oklch(12% 0.01 253);   /* slightly tinted near-black; replaces pure #000 */
    --wiz-selected-bg: oklch(96% 0.01 253);
    --wiz-error: #B42318;
    --wiz-focus: #2563EB;

    --wiz-radius: 2px;
    --wiz-radius-lg: 4px;
    --wiz-shadow-sm: 0 1px 2px 0 rgba(16, 24, 40, 0.06);
    --wiz-shadow-md: 0 4px 12px -2px rgba(16, 24, 40, 0.10);

    --wiz-space-2: 4px;
    --wiz-space-3: 8px;
    --wiz-space-4: 12px;
    --wiz-space-5: 16px;
    --wiz-space-6: 24px;
    --wiz-space-7: 32px;
    --wiz-space-8: 48px;
}

/* ------------------------------------------------------------------ */
/* Auth shell                                                          */
/* ------------------------------------------------------------------ */

body.auth-shell {
    background: var(--wiz-bg);
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: "Poppins", sans-serif;
    color: var(--wiz-text);
}

.auth-shell__skip-link {
    position: absolute;
    left: var(--wiz-space-5);
    top: var(--wiz-space-5);
    background: var(--wiz-accent);
    color: #fff;
    padding: var(--wiz-space-3) var(--wiz-space-5);
    border-radius: var(--wiz-radius);
    z-index: 1000;
    font-size: 14px;
}

.auth-shell__header {
    border-bottom: 1px solid var(--wiz-border);
    background: var(--wiz-bg);
}

.auth-shell__header-inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: var(--wiz-space-5) var(--wiz-space-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wiz-space-5);
}

.auth-shell__logo img {
    display: block;
    height: 32px;
    width: auto;
}

.auth-shell__lang { position: relative; }

.auth-shell__lang-toggle {
    background: transparent;
    border: 1px solid var(--wiz-border);
    color: var(--wiz-text);
    border-radius: var(--wiz-radius);
    padding: 6px 10px;
    font-family: "Poppins", sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.04em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}
.auth-shell__lang-toggle:hover,
.auth-shell__lang-toggle:focus-visible {
    border-color: var(--wiz-text);
    color: var(--wiz-text-strong);
}
.auth-shell__lang-menu {
    border: 1px solid var(--wiz-border);
    border-radius: var(--wiz-radius);
    box-shadow: var(--wiz-shadow-sm);
    padding: 4px 0;
    min-width: 80px;
}
.auth-shell__lang-menu .dropdown-item {
    font-size: 14px;
    padding: 6px 12px;
    color: var(--wiz-text);
}
.auth-shell__lang-menu form {
    margin: 0;
}
.auth-shell__lang-menu button.dropdown-item {
    background: transparent;
    border: 0;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

.auth-shell__main {
    flex: 1 0 auto;
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: clamp(var(--wiz-space-6), 4vw, var(--wiz-space-8)) var(--wiz-space-5);
}

.auth-shell__footer {
    border-top: 1px solid var(--wiz-border);
    padding: var(--wiz-space-5) var(--wiz-space-6);
    text-align: center;
    color: var(--wiz-text-muted);
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--wiz-space-3);
    flex-wrap: wrap;
}
.auth-shell__footer a {
    color: var(--wiz-text);
    text-decoration: none;
}
.auth-shell__footer a:hover,
.auth-shell__footer a:focus-visible {
    color: var(--wiz-text-strong);
    text-decoration: underline;
}

/* ------------------------------------------------------------------ */
/* Stepper                                                             */
/* ------------------------------------------------------------------ */

.wizard-stepper {
    margin: 0 auto var(--wiz-space-6);
    max-width: 720px;
}

.wizard-stepper__caption {
    font-size: 13px;
    color: var(--wiz-text-muted);
    margin: 0 0 var(--wiz-space-4);
    display: flex;
    align-items: baseline;
    gap: var(--wiz-space-3);
    font-weight: 500;
    letter-spacing: 0.02em;
}
.wizard-stepper__caption-position { color: var(--wiz-text-strong); }
.wizard-stepper__caption-sep { color: var(--wiz-text-soft); }
.wizard-stepper__caption-label {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 12px;
}

.wizard-stepper__list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--wiz-space-3);
    list-style: none;
    padding: 0;
    margin: 0;
}

.wizard-stepper__item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.wizard-stepper__bar {
    height: 4px;
    border-radius: 999px;
    background: var(--wiz-border);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    transition: background 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.wizard-stepper__check {
    position: absolute;
    right: 0;
    top: 50%;
    width: 16px;
    height: 16px;
    transform: translate(50%, -50%);
    background: var(--wiz-accent);
    color: #fff;
    border-radius: 999px;
    padding: 2px;
}

.wizard-stepper__label {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--wiz-text-soft);
    text-transform: uppercase;
    line-height: 1.3;
}

.wizard-stepper__optional {
    text-transform: none;
    letter-spacing: 0;
    color: var(--wiz-text-soft);
    font-weight: 400;
}

.wizard-stepper__item--completed .wizard-stepper__bar { background: var(--wiz-accent); }
.wizard-stepper__item--completed .wizard-stepper__label { color: var(--wiz-text); }

.wizard-stepper__item--current .wizard-stepper__bar { background: var(--wiz-accent); }
.wizard-stepper__item--current .wizard-stepper__label { color: var(--wiz-text-strong); font-weight: 600; }

.wizard-stepper__item--upcoming .wizard-stepper__bar { background: var(--wiz-border); }

.wizard-stepper__item--optional.wizard-stepper__item--upcoming .wizard-stepper__bar {
    background: repeating-linear-gradient(
        to right,
        var(--wiz-border-strong) 0 4px,
        transparent 4px 8px
    );
    background-size: 8px 100%;
}

@media (max-width: 575.98px) {
    .wizard-stepper__list { gap: var(--wiz-space-2); }
    .wizard-stepper__label { display: none; }
    .wizard-stepper__bar { height: 6px; }
}

/* ------------------------------------------------------------------ */
/* Wizard card container (canonical, applied to all 5 step views)      */
/* ------------------------------------------------------------------ */

.wizard-card {
    background: var(--wiz-surface);
    border: 1px solid var(--wiz-border);
    border-radius: var(--wiz-radius-lg);
    padding: clamp(var(--wiz-space-6), 4vw, var(--wiz-space-7));
    max-width: 640px;
    margin: 0 auto;
    box-shadow: var(--wiz-shadow-sm);
}

.wizard-card--wide { max-width: 720px; }

.wizard-header {
    text-align: center;
    margin-bottom: var(--wiz-space-6);
}

.wizard-header__title {
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 500;
    font-size: clamp(28px, 4vw, 40px);
    line-height: 1.15;
    text-transform: uppercase;
    color: var(--wiz-text-strong);
    letter-spacing: 0.01em;
    margin: 0 0 var(--wiz-space-3);
}

.wizard-header__summary {
    font-size: 14px;
    line-height: 1.5;
    color: var(--wiz-text-muted);
    margin: 0 auto;
    max-width: 56ch;
}

.wizard-header__optional-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: oklch(94% 0.005 253);
    color: var(--wiz-text);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 4px 12px;
    margin-bottom: var(--wiz-space-4);
}

.wizard-edit-link {
    color: var(--wiz-text);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.wizard-edit-link:hover,
.wizard-edit-link:focus-visible {
    color: var(--wiz-text-strong);
}

/* ------------------------------------------------------------------ */
/* Error summary                                                       */
/* ------------------------------------------------------------------ */

.wizard-error-summary {
    display: flex;
    gap: var(--wiz-space-3);
    align-items: flex-start;
    padding: var(--wiz-space-4) var(--wiz-space-5);
    margin-bottom: var(--wiz-space-5);
    border: 1px solid oklch(82% 0.10 25);
    background: oklch(97% 0.02 25);
    color: var(--wiz-error);
    border-radius: var(--wiz-radius);
    font-size: 14px;
    line-height: 1.45;
}
.wizard-error-summary__icon {
    flex: 0 0 auto;
    margin-top: 1px;
    display: flex;
}
.wizard-error-summary__text { flex: 1 1 auto; }

/* ------------------------------------------------------------------ */
/* Form fields (scoped to the register forms)                          */
/* ------------------------------------------------------------------ */

form[data-testid^="register-"] .form-control,
form[data-testid^="register-"] .form-select {
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: var(--wiz-text-strong);
    border: 1px solid var(--wiz-border-strong);
    border-radius: var(--wiz-radius);
    background: #fff;
    padding: 12px 14px;
    min-height: 48px;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
form[data-testid^="register-"] .form-control:focus,
form[data-testid^="register-"] .form-select:focus {
    border-color: var(--wiz-text);
    box-shadow: 0 0 0 3px oklch(95% 0.02 253);
    outline: none;
}
form[data-testid^="register-"] .form-control.is-invalid,
form[data-testid^="register-"] .form-select.is-invalid {
    border-color: var(--wiz-error);
    background-image: none;
    padding-right: 14px;
}
form[data-testid^="register-"] .form-control.is-invalid:focus {
    box-shadow: 0 0 0 3px oklch(95% 0.04 25);
}
form[data-testid^="register-"] .form-control::placeholder {
    color: var(--wiz-text-soft);
}

/* Label-above pattern (replaces form-floating where the doubled placeholder
   bug was visible). Each field uses .wizard-field as the wrapper. */
.wizard-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.wizard-field__label {
    font-size: 13px;
    font-weight: 500;
    color: var(--wiz-text);
    letter-spacing: 0.01em;
}
.wizard-field__hint {
    font-size: 12px;
    color: var(--wiz-text-muted);
    line-height: 1.4;
    margin: 0;
}
.wizard-field .invalid-feedback,
.wizard-field .field-error {
    display: block;
    color: var(--wiz-error);
    font-size: 13px;
    margin-top: 2px;
}

/* Password input + show/hide toggle */
.wizard-field--password {
    position: relative;
}
.wizard-field--password .form-control {
    padding-right: 44px;
}
.wizard-field__toggle {
    position: absolute;
    right: 8px;
    top: 31px; /* aligns with input top after label */
    height: 36px;
    width: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    color: var(--wiz-text-muted);
    cursor: pointer;
    border-radius: var(--wiz-radius);
}
.wizard-field--password.has-hint .wizard-field__toggle {
    /* ensure no overlap if hint is shown above the input — toggle stays on the input row */
}
/* Keep the eye icon visible inside the inline-flex button. Without an explicit
   size + flex: 0 0 auto, the SVG's intrinsic width collapses to 0 in the flex
   layout and the icon disappears entirely (computed width 0, paths not painted). */
.wizard-field__toggle svg {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
}
.wizard-field__toggle:hover,
.wizard-field__toggle:focus-visible {
    color: var(--wiz-text-strong);
    background: oklch(96% 0.005 253);
}
.wizard-field__toggle[aria-pressed="true"] { color: var(--wiz-text-strong); }
/* Show/hide the correct eye SVG based on toggle state.
   aria-pressed=false → password hidden  → show open eye  ([data-state="show"])
   aria-pressed=true  → password visible → show slash eye ([data-state="hide"])
   The existing flex:0 0 auto + width/height on .wizard-field__toggle svg applies
   to both SVGs, so neither collapses to 0 when it is visible. */
.wizard-field__toggle[aria-pressed="false"] [data-state="hide"],
.wizard-field__toggle[aria-pressed="true"]  [data-state="show"] { display: none; }

/* Password strength hints */
.wizard-password-hints {
    font-size: 12px;
    color: var(--wiz-text-muted);
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 2px;
}
.wizard-password-hints li {
    display: flex;
    align-items: center;
    gap: 6px;
}
.wizard-password-hints li::before {
    content: "";
    width: 14px;
    height: 14px;
    border-radius: 999px;
    border: 1.5px solid var(--wiz-border-strong);
    background: transparent;
    flex: 0 0 auto;
    transition: background 160ms cubic-bezier(0.16, 1, 0.3, 1), border-color 160ms cubic-bezier(0.16, 1, 0.3, 1);
}
.wizard-password-hints li.is-met {
    color: var(--wiz-text);
}
.wizard-password-hints li.is-met::before {
    background: var(--wiz-accent);
    border-color: var(--wiz-accent);
}

/* Phone input (combined country prefix + number) */
.wizard-phone-combined {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--wiz-border-strong);
    border-radius: var(--wiz-radius);
    background: #fff;
    overflow: hidden;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.wizard-phone-combined.is-focus {
    border-color: var(--wiz-text);
    box-shadow: 0 0 0 3px oklch(95% 0.02 253);
}
.wizard-phone-combined.is-invalid {
    border-color: var(--wiz-error);
}
.wizard-phone-combined .form-control {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent;
    padding-left: 14px;
    padding-right: 14px;
    flex: 1 1 auto;
    min-width: 0;
}
.wizard-phone-prefix {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    border-right: 1px solid var(--wiz-border-strong);
    padding: 0 12px;
    background: oklch(98% 0.003 253);
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    color: var(--wiz-text);
    font-size: 16px;
}
.wizard-phone-prefix__input {
    border: 0;
    background: transparent;
    width: 60px;
    padding: 0;
    font: inherit;
    color: inherit;
    text-align: center;
}
.wizard-phone-prefix__input:focus { outline: none; }

/* Selection cards (activity column + roles)                           */
/* ------------------------------------------------------------------ */

.wizard-card-grid {
    display: grid;
    gap: var(--wiz-space-4);
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.wizard-select-card {
    position: relative;
    display: block;
    background: #fff;
    border: 2px solid var(--wiz-border-strong);
    border-radius: var(--wiz-radius);
    padding: var(--wiz-space-5) var(--wiz-space-6);
    cursor: pointer;
    margin: 0;
    transition: border-color 160ms cubic-bezier(0.16, 1, 0.3, 1),
                background 160ms cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 160ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 160ms cubic-bezier(0.16, 1, 0.3, 1);
}
.wizard-select-card input {
    /* visually-hidden — the card itself is the affordance */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}
.wizard-select-card:hover {
    border-color: var(--wiz-text);
}
.wizard-select-card:has(input:focus-visible) {
    outline: 2px solid var(--wiz-focus);
    outline-offset: 2px;
}
.wizard-select-card.is-selected {
    border-color: var(--wiz-accent);
    background: var(--wiz-selected-bg);
    box-shadow: var(--wiz-shadow-sm);
}
.wizard-select-card.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
    background: oklch(97% 0.002 253);
}
.wizard-select-card.is-disabled:hover { border-color: var(--wiz-border-strong); }

.wizard-select-card__check {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: transparent;
    border: 1.5px solid var(--wiz-border-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    transition: background 160ms cubic-bezier(0.16, 1, 0.3, 1),
                border-color 160ms cubic-bezier(0.16, 1, 0.3, 1),
                color 160ms cubic-bezier(0.16, 1, 0.3, 1);
}
.wizard-select-card.is-selected .wizard-select-card__check {
    background: var(--wiz-accent);
    border-color: var(--wiz-accent);
    color: #fff;
}

.wizard-select-card__title {
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 1.15;
    text-transform: uppercase;
    color: var(--wiz-text-strong);
    margin: 0 0 6px;
    padding-right: 32px;  /* avoid colliding with check icon */
}

.wizard-select-card__desc {
    font-size: 13px;
    line-height: 1.45;
    color: var(--wiz-text-muted);
    margin: 0;
}

/* Roles grid: tighter rhythm than activity cards */
.wizard-role-card {
    padding: var(--wiz-space-5) var(--wiz-space-5);
}
.wizard-role-card .wizard-select-card__check {
    top: var(--wiz-space-5);
}
.wizard-role-card .wizard-select-card__title {
    font-family: "Poppins", sans-serif;
    font-size: 15px;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
    margin-bottom: var(--wiz-space-3);
}
.wizard-role-card .wizard-select-card__desc {
    font-size: 12.5px;
}

/* Role fieldset wrapper (used to dim the column-locked group) */
.wizard-role-fieldset {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
    transition: opacity 160ms cubic-bezier(0.16, 1, 0.3, 1);
}
.wizard-role-fieldset.is-disabled { opacity: 0.45; }

/* ------------------------------------------------------------------ */
/* Buttons                                                             */
/* ------------------------------------------------------------------ */

.wizard-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: "Poppins", sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    padding: 14px 22px;
    min-height: 48px;
    border-radius: var(--wiz-radius);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 160ms cubic-bezier(0.16, 1, 0.3, 1),
                border-color 160ms cubic-bezier(0.16, 1, 0.3, 1),
                color 160ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 160ms cubic-bezier(0.16, 1, 0.3, 1);
}
.wizard-btn:focus-visible {
    outline: 2px solid var(--wiz-focus);
    outline-offset: 2px;
}

.wizard-btn--primary {
    background: var(--wiz-accent);
    color: #fff;
    border-color: var(--wiz-accent);
    box-shadow: var(--wiz-shadow-sm);
}
.wizard-btn--primary:hover,
.wizard-btn--primary:focus-visible {
    background: oklch(8% 0.01 253);
    color: #fff;
    border-color: oklch(8% 0.01 253);
}
.wizard-btn--primary:active {
    transform: translateY(1px);
}
.wizard-btn--primary:disabled {
    background: var(--wiz-text-soft);
    border-color: var(--wiz-text-soft);
    color: #fff;
    cursor: not-allowed;
    box-shadow: none;
}

.wizard-btn--ghost {
    background: transparent;
    color: var(--wiz-text);
    border-color: var(--wiz-border-strong);
}
.wizard-btn--ghost:hover,
.wizard-btn--ghost:focus-visible {
    background: oklch(98% 0.003 253);
    border-color: var(--wiz-text);
    color: var(--wiz-text-strong);
}

.wizard-btn--social {
    background: #fff;
    color: var(--wiz-text);
    border-color: var(--wiz-border-strong);
}
.wizard-btn--social:hover,
.wizard-btn--social:focus-visible {
    background: oklch(98% 0.003 253);
    border-color: var(--wiz-text);
    color: var(--wiz-text-strong);
}
.wizard-btn--social img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.wizard-btn--text {
    background: transparent;
    border: 0;
    color: var(--wiz-text);
    padding: 8px 12px;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
    min-height: 0;
}
.wizard-btn--text:hover,
.wizard-btn--text:focus-visible {
    color: var(--wiz-text-strong);
}

.wizard-actions {
    display: flex;
    gap: var(--wiz-space-3);
    margin-top: var(--wiz-space-6);
}
.wizard-actions--single .wizard-btn--primary { width: 100%; }
.wizard-actions--with-back .wizard-btn--ghost { flex: 0 1 auto; }
.wizard-actions--with-back .wizard-btn--primary { flex: 1 1 auto; }
.wizard-actions__skip {
    margin-top: var(--wiz-space-4);
    text-align: center;
}

/* ------------------------------------------------------------------ */
/* Step preview (Next: ...) hint                                       */
/* ------------------------------------------------------------------ */

.wizard-step-preview {
    margin: var(--wiz-space-4) 0 0;
    text-align: center;
    font-size: 13px;
    color: var(--wiz-text-muted);
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    width: 100%;
}
.wizard-step-preview__label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--wiz-text-soft);
}
.wizard-step-preview__hint { color: var(--wiz-text); }

/* ------------------------------------------------------------------ */
/* OR divider                                                          */
/* ------------------------------------------------------------------ */

.wizard-divider {
    display: flex;
    align-items: center;
    gap: var(--wiz-space-3);
    margin: var(--wiz-space-6) 0 var(--wiz-space-5);
    color: var(--wiz-text-soft);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 500;
}
.wizard-divider::before,
.wizard-divider::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--wiz-border);
}

/* ------------------------------------------------------------------ */
/* Checkboxes (terms, marketing)                                       */
/* ------------------------------------------------------------------ */

.wizard-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--wiz-text);
}
.wizard-check input[type="checkbox"] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    border: 1.5px solid var(--wiz-border-strong);
    border-radius: 3px;
    accent-color: var(--wiz-accent);
    cursor: pointer;
}
.wizard-check input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--wiz-focus);
    outline-offset: 2px;
}
.wizard-check.is-required-error input[type="checkbox"] {
    border-color: var(--wiz-error);
}
.wizard-check__error {
    display: block;
    color: var(--wiz-error);
    font-size: 13px;
    margin: 6px 0 0 28px;
}

/* ------------------------------------------------------------------ */
/* Account-exists alert (step 1 specific)                              */
/* ------------------------------------------------------------------ */

.wizard-account-exists {
    background: oklch(97% 0.02 25);
    border: 1px solid oklch(82% 0.10 25);
    color: var(--wiz-error);
    padding: var(--wiz-space-4) var(--wiz-space-5);
    border-radius: var(--wiz-radius);
    margin-bottom: var(--wiz-space-5);
    font-size: 14px;
    line-height: 1.45;
}
.wizard-account-exists a {
    color: var(--wiz-error);
    font-weight: 600;
    text-decoration: underline;
}

/* ------------------------------------------------------------------ */
/* Pending booking notice (step 1)                                     */
/* ------------------------------------------------------------------ */

.wizard-pending-booking {
    background: oklch(96% 0.02 250);
    border: 1px solid oklch(82% 0.06 250);
    color: var(--wiz-text);
    padding: var(--wiz-space-4) var(--wiz-space-5);
    border-radius: var(--wiz-radius);
    margin-bottom: var(--wiz-space-5);
    font-size: 14px;
    text-align: center;
    line-height: 1.45;
}

/* ------------------------------------------------------------------ */
/* Company step expander (progressive disclosure)                      */
/* ------------------------------------------------------------------ */

.wizard-expander {
    border: 1px solid var(--wiz-border);
    border-radius: var(--wiz-radius);
    background: oklch(99% 0.002 253);
    margin-top: var(--wiz-space-5);
    overflow: hidden;
}
.wizard-expander > summary {
    list-style: none;
    cursor: pointer;
    padding: var(--wiz-space-4) var(--wiz-space-5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 500;
    color: var(--wiz-text);
    user-select: none;
}
.wizard-expander > summary::-webkit-details-marker { display: none; }
.wizard-expander > summary::after {
    content: "";
    width: 10px;
    height: 10px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.wizard-expander[open] > summary::after {
    transform: rotate(225deg) translate(-2px, -2px);
}
.wizard-expander > summary:hover,
.wizard-expander > summary:focus-visible {
    background: oklch(97% 0.003 253);
}
.wizard-expander__body {
    padding: var(--wiz-space-5);
    border-top: 1px solid var(--wiz-border);
    display: grid;
    gap: var(--wiz-space-4);
}

/* ------------------------------------------------------------------ */
/* Country combobox (Step 4 — profile)                                 */
/* ------------------------------------------------------------------ */

.wizard-combobox {
    position: relative;
}

/* Native <select> stays in the DOM for form submission, but is taken
   off-screen using the standard sr-only pattern so screen readers and
   browsers without JS still see the original control. */
.wizard-combobox__native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    pointer-events: none !important;
}

.wizard-combobox__input {
    /* Inherits .form-control sizing/border. Pad right so the future
       caret-down indicator (added below as a pseudo-element) doesn't
       overlap the typed text. */
    padding-right: 36px;
    background-image: none;
}

.wizard-combobox::after {
    content: "";
    position: absolute;
    right: 14px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 1.5px solid var(--wiz-text-muted);
    border-bottom: 1.5px solid var(--wiz-text-muted);
    transform: translateY(-75%) rotate(45deg);
    pointer-events: none;
}

.wizard-combobox__list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    margin: 0;
    padding: 4px 0;
    list-style: none;
    background: var(--wiz-surface);
    border: 1px solid var(--wiz-border-strong);
    border-radius: var(--wiz-radius);
    box-shadow: var(--wiz-shadow-md);
    max-height: 280px;
    overflow-y: auto;
    z-index: 50;
}

.wizard-combobox__list[hidden] {
    display: none;
}

.wizard-combobox__list:empty::before {
    content: "No matches.";
    display: block;
    padding: 10px 14px;
    font-size: 13px;
    color: var(--wiz-text-soft);
}

.wizard-combobox__option {
    padding: 8px 14px;
    font-size: 14px;
    color: var(--wiz-text);
    cursor: pointer;
    transition: background-color 80ms ease;
}

.wizard-combobox__option:hover,
.wizard-combobox__option.is-active {
    background: var(--wiz-selected-bg);
    color: var(--wiz-text-strong);
}

/* ------------------------------------------------------------------ */
/* Reduced motion                                                       */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}