/* ==========================================================================
   Customer auth screens — sign in / create account
   A mesh-gradient page with frosted-glass controls.

   Everything here is scoped to `.auth` on purpose: the tokens below share
   names with the site-wide sheets (main.css, profile-page.css), so keeping
   them on the wrapper means the auth pages can carry their own palette
   without leaking it into the rest of the frontend.
   ========================================================================== */

.auth {
    /* Brand — the deep blue the site header already uses. */
    --primary: #1f3e74;
    --primary-rgb: 31, 62, 116;
    --primary-hover: #17305c;
    --primary-active: #102343;
    --on-primary: #ffffff;

    --surface: #ffffff;
    --surface-2: #f7f8fc;
    --surface-3: #eef0f7;

    --text: #151827;
    --text-2: #4b5068;
    --text-muted: #757a94;

    --border: #e4e6f0;
    --border-strong: #d2d5e4;

    --danger: #dc2626;
    --warning: #c2740a;
    --success: #16a34a;

    /* Radii */
    --r-sm: 12px;
    --r-md: 16px;
    --r-pill: 999px;

    /* Spacing rhythm */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;

    /* Motion */
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --dur: 0.22s;

    --shadow-sm: 0 1px 2px rgba(21, 24, 39, 0.05), 0 1px 3px rgba(21, 24, 39, 0.04);
    --shadow-lg: 0 12px 32px rgba(21, 24, 39, 0.1), 0 4px 8px rgba(21, 24, 39, 0.04);
    --shadow-brand: 0 8px 24px rgba(var(--primary-rgb), 0.28);
}

/* --------------------------------------------------------------------------
   1. Page shell
   -------------------------------------------------------------------------- */
/* Mesh page background. Each hue is anchored to its own corner and fades to
   transparent before it reaches the next one — stacking overlapping blurred
   layers instead would average them toward grey. */
.auth {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    /* Vertical centring is done with auto margins on the card rather than
       `align-items: center`: when the card is taller than the viewport an
       auto margin resolves to 0, so the page overflows downward and stays
       scrollable instead of clipping the top of the form. */
    align-items: flex-start;
    justify-content: center;
    padding: var(--sp-6) var(--sp-4);
    color: var(--text);
    background-color: #fffaf5;
    background-image:
        radial-gradient(at 12% 16%, rgba(251, 146, 60, 0.36) 0px, transparent 55%),
        radial-gradient(at 88% 10%, rgba(244, 114, 182, 0.30) 0px, transparent 52%),
        radial-gradient(at 92% 80%, rgba(167, 139, 250, 0.32) 0px, transparent 55%),
        radial-gradient(at 8% 86%, rgba(251, 191, 36, 0.30) 0px, transparent 52%),
        radial-gradient(at 50% 55%, rgba(124, 58, 237, 0.13) 0px, transparent 60%);
    overflow: hidden;
}

.auth__card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 440px;
    margin-block: auto;
}

.auth__card--wide { max-width: 640px; }

.auth__brand {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-6);
}

.auth__brand img {
    height: 36px;
    width: auto;
    object-fit: contain;
}

.auth__title {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text);
    margin: 0 0 var(--sp-2);
}

.auth__subtitle {
    color: var(--text-2);
    font-size: 0.9rem;
    margin: 0 0 var(--sp-6);
}

.auth__divider {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin: var(--sp-5) 0;
    color: var(--text-2);
    font-size: 0.8rem;
}

.auth__divider::before,
.auth__divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(var(--primary-rgb), 0.18);
}

.auth__legal {
    margin: var(--sp-4) 0 0;
    text-align: center;
    font-size: 0.76rem;
    color: var(--text-2);
}

.auth__legal a,
.auth__switch a {
    color: var(--primary);
    text-decoration: none;
}

.auth__legal a { font-weight: 600; }

.auth__legal a:hover,
.auth__switch a:hover { text-decoration: underline; }

.auth__switch {
    margin: var(--sp-4) 0 0;
    text-align: center;
    font-size: 0.86rem;
    color: var(--text-2);
}

.auth__switch a { font-weight: 700; }

/* --------------------------------------------------------------------------
   2. Fields
   -------------------------------------------------------------------------- */
.auth .field { margin-bottom: var(--sp-4); }

.auth .field__label {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--text-2);
    margin-bottom: var(--sp-1);
}

.auth .field__label .req { color: var(--danger); }

.auth .field__hint {
    display: block;
    font-size: 0.78rem;
    color: var(--text-2);
    margin-top: var(--sp-2);
}

.auth .field__error {
    display: block;
    font-size: 0.78rem;
    color: var(--danger);
    margin-top: var(--sp-2);
}

.auth .field__error:empty { margin-top: 0; }

/* The fill is deliberately near-nothing — separation from the mesh comes from
   the heavy blur (which smears the gradient inside the field while the page
   behind stays crisp), the border, and the inset highlight. A higher fill just
   turns the fields back into white boxes. */
.auth {
    --glass-fill: rgba(255, 255, 255, 0.62);
    --glass-fill-strong: rgba(255, 255, 255, 0.74);
    /* Brand-tinted rather than white: at this fill the border is what defines
       the field, and white on a pale mesh barely registers. */
    --glass-border: rgba(var(--primary-rgb), 0.34);
    --glass-border-hover: rgba(var(--primary-rgb), 0.48);
    --glass-blur: blur(20px) saturate(190%);
    /* At a fill this close to white the field would vanish wherever the mesh
       sits near its pale base, so separation comes from depth rather than
       tone: a lit top edge and a real drop shadow lift it off the page. */
    --glass-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        inset 0 -1px 0 rgba(21, 24, 39, 0.06),
        0 3px 12px rgba(21, 24, 39, 0.1),
        0 1px 3px rgba(21, 24, 39, 0.06);
}

/* The outer control — whichever element actually draws the frame. */
.auth .input,
.auth .select,
.auth .textarea,
.auth .input-shell {
    width: 100%;
    padding: 13px var(--sp-4);
    background-color: var(--glass-fill);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-md);
    box-shadow: var(--glass-shadow);
    color: var(--text);
    font-family: inherit;
    font-size: 0.94rem;
    line-height: 1.5;
    appearance: none;
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
        box-shadow var(--dur) var(--ease);
}

.auth .input-shell {
    position: relative;
    display: flex;
    align-items: stretch;
    padding: 0;
}

.auth .input:hover,
.auth .select:hover,
.auth .textarea:hover,
.auth .input-shell:hover {
    background-color: var(--glass-fill-strong);
    border-color: var(--glass-border-hover);
}

.auth .input:focus,
.auth .select:focus,
.auth .textarea:focus,
.auth .input-shell:focus-within {
    outline: none;
    background-color: var(--glass-fill-strong);
    border-color: rgba(var(--primary-rgb), 0.55);
    box-shadow: var(--glass-shadow), 0 0 0 3px rgba(var(--primary-rgb), 0.18);
}

/* Inputs nested inside a glass shell must stay fully transparent — a second
   fill + blur layer inside the first one turns the pane milky. */
.auth .input-shell .input {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    flex: 1 1 auto;
    min-width: 0;
}

.auth .input-shell .input:hover,
.auth .input-shell .input:focus {
    background: transparent;
    box-shadow: none;
}

.auth .input-shell__suffix {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 0 var(--sp-4);
    background: transparent;
    border: 0;
    color: var(--text-2);
    font-size: 0.95rem;
    cursor: pointer;
    transition: color var(--dur) var(--ease);
}

.auth .input-shell__suffix:hover { color: var(--primary); }

/* --text-muted lands under 4.5:1 on the mesh — step placeholders up a level. */
.auth .input::placeholder,
.auth .textarea::placeholder {
    color: var(--text-2);
    opacity: 1;
}

/* Chrome paints autofilled fields with an opaque fill that no background
   declaration can undo; parking the transition keeps the glass visible. */
.auth input:-webkit-autofill,
.auth input:-webkit-autofill:hover,
.auth input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text);
    -webkit-box-shadow: none;
    transition: background-color 600000s 0s, color 600000s 0s;
}

/* Validation states set from the register script. */
.auth .input.is-invalid,
.auth .input-shell.is-invalid {
    border-color: rgba(220, 38, 38, 0.6);
}

.auth .input-shell.is-invalid:focus-within {
    box-shadow: var(--glass-shadow), 0 0 0 3px rgba(220, 38, 38, 0.18);
}

.auth .input.is-valid,
.auth .input-shell.is-valid {
    border-color: rgba(22, 163, 74, 0.55);
}

/* --------------------------------------------------------------------------
   3. Phone input — intl-tel-input (laravel-geo-genius) wraps the field in
   `.iti` at runtime. The plugin ships its own light chrome, so re-skin it with
   the tokens and let the flag / dial-code block read as a shell prefix.
   -------------------------------------------------------------------------- */
.auth .iti:not(.iti--container) {
    display: block;
    width: 100%;
}

/* The plugin stylesheet is injected after this file, so these rules are
   written one notch more specific than its own to win without !important. */
.auth .iti input.input.iti__tel-input,
.auth .iti input.input.iti__tel-input[type=text],
.auth .iti input.input.iti__tel-input[type=tel] {
    padding-top: 13px;
    padding-bottom: 13px;
    padding-right: var(--sp-4);
    /* padding-left is set inline by the plugin — it measures the flag block and
       leaves 6px, which is tighter than the 16px every other field starts at.
       Indenting the text adds the difference back without hard-coding a width
       that only holds for one dial code. */
    text-indent: 6px;
}

.auth .iti .iti__flag-container { padding: 1px; }

/* The flag / dial-code block is a sibling laid over the input, so it sits on
   top of glass that is already painted. Filling it again reads as an opaque
   white chip glued inside the field — it stays transparent and the divider
   alone separates it from the number. */
.auth .iti .iti__selected-flag {
    gap: var(--sp-2);
    padding: 0 var(--sp-3);
    background: transparent;
    border-right: 1px solid var(--glass-border);
    border-radius: calc(var(--r-md) - 1px) 0 0 calc(var(--r-md) - 1px);
    color: var(--text);
    transition: background var(--dur) var(--ease);
}

/* The chip is outside the input, so hovering it never triggers the field's own
   hover — this tint is what tells you the picker is clickable. */
.auth .iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag,
.auth .iti .iti__flag-container:focus-within .iti__selected-flag {
    background: rgba(var(--primary-rgb), 0.08);
}

.auth .iti .iti__selected-dial-code {
    font-size: 0.94rem;
    font-weight: 600;
    color: var(--text);
}

.auth .iti .iti__arrow {
    margin-left: 0;
    border-top-color: var(--text-muted);
}

.auth .iti .iti__arrow--up { border-bottom-color: var(--text-muted); }

.auth .iti .iti__dropdown-content {
    background: var(--surface);
    border-radius: var(--r-sm);
    color: var(--text);
    overflow: hidden;
}

.auth .iti.iti--inline-dropdown .iti__dropdown-content {
    margin-top: var(--sp-2);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
}

.auth .iti .iti__search-input {
    padding: 10px var(--sp-4);
    background: var(--surface-2);
    border-radius: 0;
    color: var(--text);
    font-family: inherit;
    font-size: 0.9rem;
}

.auth .iti.iti--inline-dropdown .iti__country-list {
    max-height: 220px;
    overflow-y: auto;
}

.auth .iti .iti__country {
    padding: var(--sp-2) var(--sp-3);
    color: var(--text);
    font-size: 0.9rem;
}

.auth .iti .iti__country.iti__highlight,
.auth .iti .iti__country:hover { background: var(--surface-3); }

.auth .iti .iti__dial-code { color: var(--text-muted); }

/* --------------------------------------------------------------------------
   4. Checkbox rows
   -------------------------------------------------------------------------- */
.auth .form-check {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    margin: 0;
    padding: 0;
}

.auth .form-check-input {
    flex: 0 0 auto;
    width: 1.05rem;
    height: 1.05rem;
    margin: 2px 0 0;
    background-color: var(--glass-fill-strong);
    border: 1px solid var(--glass-border-hover);
    cursor: pointer;
}

.auth .form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}

.auth .form-check-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.18);
}

.auth .form-check-label {
    font-size: 0.84rem;
    color: var(--text-2);
    cursor: pointer;
}

.auth .form-check-label a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
}

.auth .form-check-label a:hover { text-decoration: underline; }

/* Remember-me and "forgot password" share a row. */
.auth__meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: var(--sp-5);
}

.auth__meta-row a {
    color: var(--primary);
    font-size: 0.84rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.auth__meta-row a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.auth .btn-app {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: 13px var(--sp-5);
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    background: var(--primary);
    color: var(--on-primary);
    font-family: inherit;
    font-size: 0.94rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--dur) var(--ease), transform var(--dur) var(--ease),
        box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.auth .btn-app:hover {
    background: var(--primary-hover);
    color: var(--on-primary);
    box-shadow: var(--shadow-brand);
}

.auth .btn-app:active { transform: translateY(1px); }

.auth .btn-app:disabled,
.auth .btn-app.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.auth .btn-app--block { width: 100%; }

.auth .btn-app--lg {
    padding: 16px var(--sp-6);
    font-size: 1rem;
    border-radius: var(--r-md);
}

.auth .btn-app--secondary {
    background: var(--glass-fill-strong);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    color: var(--primary);
    border-color: var(--glass-border);
    box-shadow: var(--glass-shadow);
}

.auth .btn-app--secondary:hover {
    background: rgba(255, 255, 255, 0.86);
    color: var(--primary);
    border-color: var(--glass-border-hover);
    box-shadow: var(--glass-shadow);
}

/* Three dots that fade in turn while the form is in flight. */
.auth .spinner-dots {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.auth .spinner-dots span {
    width: 6px;
    height: 6px;
    border-radius: var(--r-pill);
    background: currentColor;
    animation: auth-dot-pulse 1.1s var(--ease) infinite;
}

.auth .spinner-dots span:nth-child(2) { animation-delay: 0.15s; }
.auth .spinner-dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes auth-dot-pulse {
    0%, 60%, 100% { opacity: 0.25; transform: scale(0.85); }
    30% { opacity: 1; transform: scale(1); }
}

/* --------------------------------------------------------------------------
   6. Small screens
   -------------------------------------------------------------------------- */
/* Phones get a tighter build of the same design rather than a shrunk copy of
   the desktop one: the rhythm tokens step down so every margin that hangs off
   them follows, then type and control heights are trimmed on top. The card
   stays centred (see the auto margins in section 1) and releases to the top
   once the form outgrows the viewport. */
@media (max-width: 575.98px) {
    .auth {
        padding: var(--sp-5) var(--sp-4);

        /* Only the wide end of the rhythm shrinks — sp-1..sp-4 still set field
           gaps and control padding, and squeezing those would cost legibility
           before it saved any height. */
        --sp-5: 16px;
        --sp-6: 18px;
        --sp-8: 24px;

        /* Softer corners read as oversized at this width. */
        --r-sm: 10px;
        --r-md: 13px;
    }

    /* Header block: the logo carries the brand, so the type under it can drop
       a step and sit closer. */
    .auth__brand { margin-bottom: var(--sp-4); }
    .auth__brand img { height: 28px; }

    .auth__title {
        font-size: 1.2rem;
        letter-spacing: -0.01em;
    }

    .auth__subtitle {
        font-size: 0.8rem;
        line-height: 1.45;
        margin-bottom: var(--sp-5);
    }

    /* Fields */
    .auth .field { margin-bottom: var(--sp-3); }

    .auth .field__label {
        font-size: 0.78rem;
        margin-bottom: 5px;
    }

    .auth .field__hint,
    .auth .field__error { font-size: 0.72rem; }

    /* 16px is deliberate and is the one size that does not come down: iOS
       Safari zooms the page when a focused input is under 16px, and it ignores
       `user-scalable=no`. The compactness comes from the padding instead —
       10px + 16px text still clears a 44px touch target. */
    .auth .input,
    .auth .select,
    .auth .textarea,
    .auth .input-shell {
        padding: 10px var(--sp-3);
        font-size: 16px;
        line-height: 1.4;
    }

    .auth .input-shell { padding: 0; }

    .auth .input-shell__suffix {
        padding: 0 var(--sp-3);
        font-size: 0.9rem;
    }

    /* The plugin measures the flag block itself, so only the vertical padding
       and the indent that matches the other fields are restated here. */
    .auth .iti input.input.iti__tel-input,
    .auth .iti input.input.iti__tel-input[type=text],
    .auth .iti input.input.iti__tel-input[type=tel] {
        padding-top: 10px;
        padding-bottom: 10px;
        padding-right: var(--sp-3);
        text-indent: 4px;
    }

    .auth .iti .iti__selected-flag { padding: 0 var(--sp-2); }
    .auth .iti .iti__selected-dial-code { font-size: 0.88rem; }

    /* Register lays its fields out on a Bootstrap row; g-3 is a 16px gutter,
       which is more air than the fields need once they are this tight. */
    .auth .row.g-3 {
        --bs-gutter-x: 12px;
        --bs-gutter-y: 10px;
    }

    /* Checkbox rows */
    .auth .form-check-input {
        width: 1rem;
        height: 1rem;
    }

    .auth .form-check-label { font-size: 0.78rem; line-height: 1.45; }

    .auth__meta-row {
        margin-bottom: var(--sp-4);
        font-size: 0.78rem;
    }

    .auth__meta-row a { font-size: 0.78rem; }

    /* Utility margin on the register terms row. Bootstrap's spacing utilities
       are declared `!important`, so specificity alone does not reach this one. */
    .auth .auth__meta-row.mt-4 { margin-top: var(--sp-3) !important; }

    /* Buttons: label and padding both come down, and min-height is what keeps
       the target tappable rather than the padding alone. */
    .auth .btn-app {
        min-height: 44px;
        padding: 10px var(--sp-4);
        font-size: 0.88rem;
    }

    .auth .btn-app--lg {
        padding: 11px var(--sp-5);
        font-size: 0.92rem;
        border-radius: var(--r-sm);
    }

    /* Footer type — present, but not competing with the form. */
    .auth__divider {
        margin: var(--sp-4) 0;
        font-size: 0.76rem;
    }

    .auth__switch {
        margin-top: var(--sp-4);
        font-size: 0.8rem;
    }

    .auth__legal {
        margin-top: var(--sp-3);
        font-size: 0.7rem;
        line-height: 1.5;
    }
}

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