/*
 * Member signup wizard — RealDealRide
 * Ported from the client design RealDealRide_Member_Signup_Self_Declaration_DUI_Screening.html
 *
 * Loaded only by resources/views/auth/register-wizard.blade.php via @section('header.styles'),
 * so the .form-control / .form-select overrides below stay on the signup page and do not
 * leak into the rest of the app. The design's bare `body {}` rules are scoped to
 * .rdr-signup-body for the same reason.
 */

:root {
    --rdr-primary: #0d6efd;
    --rdr-primary-dk: #0a58ca;
    --rdr-success: #198754;
    --rdr-danger: #dc3545;
    --rdr-danger-lt: #f8d7da;
    --rdr-dark: #111827;
    --rdr-muted: #6b7280;
    --rdr-light: #f1f5f9;
    --rdr-white: #fff;
    --rdr-border: #e2e8f0;
    --rdr-radius: 12px;
    --rdr-shadow: 0 4px 24px rgba(0, 0, 0, .07);
    --rdr-shadow-lg: 0 12px 48px rgba(0, 0, 0, .10);
    --rdr-font: 'Plus Jakarta Sans', sans-serif;
    --rdr-font-body: 'DM Sans', sans-serif;
}

/*
 * The design's page-level rules, applied to the body class set in @section('body') —
 * the same way auth/register.blade.php sets `auth-body-bg`. layouts.master-without-nav
 * renders no site header or footer, so the card owns the full viewport as designed.
 */
.rdr-signup-body {
    font-family: var(--rdr-font-body);
    background: linear-gradient(135deg, #f0f4ff 0%, #e8f0fe 50%, #f5f0ff 100%);
    min-height: 100vh;
    display: flex;
    /* column, not the design's default row: the copyright is a second child and would
       otherwise sit beside the card rather than beneath it. */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    color: var(--rdr-dark);
}

.rdr-signup-body * { box-sizing: border-box; }

.rdr-signup-copyright {
    margin-top: 1.25rem;
    font-size: .85rem;
    color: var(--rdr-muted);
}

/* Card */
.signup-card {
    background: var(--rdr-white);
    border-radius: 20px;
    box-shadow: var(--rdr-shadow-lg);
    max-width: 640px;
    width: 100%;
    overflow: hidden;
    position: relative;
}

.signup-header {
    background: linear-gradient(135deg, var(--rdr-dark) 0%, #1e293b 100%);
    color: var(--rdr-white);
    padding: 2rem 2.5rem 1.5rem;
}

.signup-header .brand {
    font-family: var(--rdr-font);
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: -.5px;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.signup-header .brand .icon-circle {
    width: 36px;
    height: 36px;
    background: var(--rdr-primary);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.signup-header p { margin: .5rem 0 0; opacity: .7; font-size: .9rem; }

/* Stepper */
.stepper {
    display: flex;
    padding: 0 2.5rem 1.25rem;
    background: var(--rdr-dark);
    gap: .5rem;
}

.step-pill {
    flex: 1;
    height: 5px;
    border-radius: 100px;
    background: rgba(255, 255, 255, .15);
    transition: background .4s;
}

.step-pill.active { background: var(--rdr-primary); }
.step-pill.done { background: var(--rdr-success); }

.step-labels {
    display: flex;
    padding: .85rem 2.5rem 0;
    gap: .5rem;
    background: var(--rdr-white);
}

.step-label {
    flex: 1;
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--rdr-muted);
    text-align: center;
    transition: color .3s;
}

.step-label.active { color: var(--rdr-primary); }
.step-label.done { color: var(--rdr-success); }

/* Body */
.signup-body { padding: 1.75rem 2.5rem 2rem; }
.step-panel { display: none; animation: rdrFadeIn .35s ease; }
.step-panel.active { display: block; }

@keyframes rdrFadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

.step-title { font-family: var(--rdr-font); font-weight: 700; font-size: 1.25rem; margin-bottom: .25rem; }
.step-subtitle { color: var(--rdr-muted); font-size: .88rem; margin-bottom: 1.5rem; }

/* Form */
.signup-card .form-label { font-weight: 600; font-size: .82rem; margin-bottom: .35rem; color: var(--rdr-dark); }

.signup-card .form-control,
.signup-card .form-select {
    border-radius: var(--rdr-radius);
    border: 1.5px solid var(--rdr-border);
    padding: .65rem 1rem;
    font-size: .9rem;
    transition: border-color .2s, box-shadow .2s;
}

.signup-card .form-control:focus,
.signup-card .form-select:focus {
    border-color: var(--rdr-primary);
    box-shadow: 0 0 0 3px rgba(13, 110, 253, .12);
}

.signup-card .form-control.is-invalid,
.signup-card .form-select.is-invalid { border-color: var(--rdr-danger); }

.signup-card .invalid-feedback { font-size: .78rem; }

/*
 * Bootstrap reveals a message with `.is-invalid ~ .invalid-feedback` — a *sibling*
 * combinator. Both password fields wrap their input in .pw-wrap so the eye toggle
 * has something to position against, which means the input is not a sibling of its
 * own message and that rule never matches: the password and confirm-password errors
 * were rendered into the page but never displayed.
 *
 * :has() reattaches the two at the wrapper. Every other field on this form has its
 * input and message as direct siblings and is unaffected.
 */
.signup-card .pw-wrap:has(.form-control.is-invalid) ~ .invalid-feedback { display: block; }

.pw-wrap { position: relative; }

.pw-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--rdr-muted);
    cursor: pointer;
    font-size: 1.1rem;
    padding: 0;
    line-height: 1;
}

/*
 * Bootstrap paints its own warning icon inside .form-control.is-invalid, as a
 * background at `right calc(.375em + .1875rem) center`. At this form's .9rem that
 * lands it 8.4px–25.2px in from the right edge — directly under the eye toggle,
 * which sits at 12px and is about 17.6px wide. The two overlap into an unreadable
 * smudge the moment a password field fails.
 *
 * So the toggle steps aside while the field is invalid, clearing the icon with a
 * few pixels to spare. Moving the *button* rather than adding a margin inside it
 * keeps the click target under the glyph the user is aiming at.
 *
 * The matching padding stops the value sliding under the shifted toggle: Bootstrap
 * already reserves calc(1.5em + .75rem) for its icon, and the toggle now sits
 * outboard of that.
 */
.signup-card .pw-wrap:has(.form-control.is-invalid) .pw-toggle { right: 32px; }

.signup-card .pw-wrap .form-control.is-invalid { padding-right: calc(3.5em + .75rem); }

/* Declaration step */
.decl-box {
    border: 2px solid var(--rdr-border);
    border-radius: var(--rdr-radius);
    padding: 1.25rem;
    background: #fafbfc;
    transition: border-color .3s, background .3s;
}

.decl-box.yes { border-color: var(--rdr-danger); background: var(--rdr-danger-lt); }
.decl-box.no { border-color: var(--rdr-success); background: #d1fae5; }

.decl-question {
    font-family: var(--rdr-font);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 1rem;
}

.decl-question .hl {
    color: var(--rdr-danger);
    /*text-decoration: underline wavy;*/
    /*text-underline-offset: 3px;*/
}

.decl-btns { display: flex; gap: .75rem; }

.decl-btn {
    flex: 1;
    padding: .85rem 1.5rem;
    border-radius: var(--rdr-radius);
    font-family: var(--rdr-font);
    font-weight: 700;
    font-size: .95rem;
    border: 2px solid var(--rdr-border);
    background: var(--rdr-white);
    cursor: pointer;
    transition: all .25s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
}

.decl-btn:hover { transform: translateY(-1px); box-shadow: var(--rdr-shadow); }
.decl-btn.sel-yes { background: var(--rdr-danger); border-color: var(--rdr-danger); color: #fff; }
.decl-btn.sel-no { background: var(--rdr-success); border-color: var(--rdr-success); color: #fff; }

/* Consent */
.consent-area { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--rdr-border); }
.signup-card .form-check { margin-bottom: .75rem; }
.signup-card .form-check-label { font-size: .82rem; line-height: 1.5; color: #374151; }

/* Block overlay */
.block-overlay {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(17, 24, 39, .88);
    z-index: 100;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    animation: rdrOverlayIn .3s;
}

.block-overlay.show { display: flex; }

@keyframes rdrOverlayIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.block-card {
    background: var(--rdr-white);
    border-radius: 20px;
    padding: 2.5rem;
    text-align: center;
    max-width: 420px;
    width: 100%;
    animation: rdrCardIn .3s ease;
}

@keyframes rdrCardIn {
    from { opacity: 0; transform: scale(.9); }
    to { opacity: 1; transform: scale(1); }
}

.block-icon {
    width: 72px;
    height: 72px;
    background: var(--rdr-danger-lt);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    font-size: 2rem;
    color: var(--rdr-danger);
}

.block-card h4 { font-family: var(--rdr-font); font-weight: 800; font-size: 1.15rem; margin-bottom: .75rem; }
.block-card p { color: var(--rdr-muted); font-size: .88rem; line-height: 1.6; margin-bottom: 1.25rem; }

/* Buttons */
.btn-rdr {
    font-family: var(--rdr-font);
    font-weight: 700;
    border-radius: var(--rdr-radius);
    padding: .75rem 1.75rem;
    font-size: .9rem;
    transition: all .25s;
}

.btn-rdr:hover { transform: translateY(-1px); box-shadow: var(--rdr-shadow); }
.btn-rdr-primary { background: var(--rdr-primary); color: #fff; border: none; }
.btn-rdr-primary:hover { background: var(--rdr-primary-dk); color: #fff; }
.btn-rdr-primary:disabled { opacity: .5; transform: none; box-shadow: none; cursor: not-allowed; }
.btn-rdr-outline { background: transparent; border: 1.5px solid var(--rdr-border); color: var(--rdr-dark); }
.btn-rdr-outline:hover { border-color: var(--rdr-dark); background: #f9fafb; }

.signup-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1.5rem;
    border-top: 1px solid var(--rdr-border);
    margin-top: 1.5rem;
}

.step-counter { font-size: .78rem; color: var(--rdr-muted); font-weight: 600; }

/* Success */
.success-icon {
    width: 80px;
    height: 80px;
    background: #d1fae5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 2.5rem;
    color: var(--rdr-success);
    animation: rdrBounceIn .5s ease;
}

@keyframes rdrBounceIn {
    0% { transform: scale(0); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

/* Info badge */
.info-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .75rem;
    font-weight: 600;
    color: var(--rdr-primary);
    background: rgba(13, 110, 253, .08);
    padding: .3rem .65rem;
    border-radius: 100px;
    margin-bottom: 1rem;
}

/* Review summary */
.review-row {
    display: flex;
    justify-content: space-between;
    padding: .6rem 0;
    border-bottom: 1px solid var(--rdr-border);
    font-size: .88rem;
    gap: 1rem;
}

.review-row:last-child { border-bottom: none; }
.review-label { color: var(--rdr-muted); font-weight: 500; }
.review-value { font-weight: 600; text-align: right; word-break: break-word; }
.review-section { margin-bottom: 1.25rem; }

.review-section h6 {
    font-family: var(--rdr-font);
    font-weight: 700;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--rdr-primary);
    margin-bottom: .5rem;
}

.badge-pass {
    background: #d1fae5;
    color: var(--rdr-success);
    font-weight: 700;
    padding: .3rem .75rem;
    border-radius: 100px;
    font-size: .78rem;
}

@media (max-width: 576px) {
    .signup-header { padding: 1.5rem; }
    .stepper { padding: 0 1.5rem 1rem; }
    .step-labels { padding: .75rem 1.5rem 0; }
    .signup-body { padding: 1.5rem; }
    .decl-btns { flex-direction: column; }
    .signup-footer { gap: .75rem; }
}