/* ==========================================================================
   Auth pages (sign in / verify / complete profile)
   Loaded after main.css and dashboard-ui.css, which supply the shared
   language bar, icon buttons, checkbox and select styling.
   ========================================================================== */

.auth-brand-mark {
    block-size: 64px;
    inline-size: auto;
    aspect-ratio: 320 / 465;
    color: #C9A227;
    overflow: visible;
    margin-block-end: 20px;
}
.auth-mobile-hero .auth-brand-mark { block-size: 40px; margin-block-end: 8px; }

/* Input field ------------------------------------------------------------- */

.auth-field { position: relative; }
.auth-field .form-control,
.auth-field input[type="email"],
.auth-field input[type="text"] {
    inline-size: 100%;
    padding-block: 13px;
    padding-inline: 44px 14px;      /* icon sits on the leading edge */
    border: 1.5px solid var(--dsh-border);
    border-radius: 12px;
    background: var(--dsh-surface);
    color: var(--dsh-text);
    font-family: inherit;
    font-size: 15px;
    transition: border-color 0.2s var(--dsh-ease), box-shadow 0.2s var(--dsh-ease), background-color 0.2s var(--dsh-ease);
}
.auth-field .form-control::placeholder { color: var(--dsh-text-muted); }
.auth-field .form-control:hover { border-color: var(--dsh-text-muted); }
.auth-field .form-control:focus {
    outline: none;
    border-color: var(--dsh-accent);
    box-shadow: 0 0 0 4px var(--dsh-accent-soft);
}
.auth-field .input-icon,
.auth-field .auth-field-icon {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 14px;
    transform: translateY(-50%);
    color: var(--dsh-text-muted);
    pointer-events: none;
    transition: color 0.2s var(--dsh-ease);
}
.auth-field .form-control:focus ~ .input-icon,
.auth-field .form-control:focus ~ .auth-field-icon { color: var(--dsh-accent); }

/* Terms checkbox ---------------------------------------------------------- */

.auth-terms {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 15px;
    border: 1px solid var(--dsh-border);
    border-radius: 12px;
    background: var(--dsh-surface-2);
    cursor: pointer;
    transition: border-color 0.2s var(--dsh-ease), background-color 0.2s var(--dsh-ease);
}
.auth-terms:hover { border-color: var(--dsh-accent); }
.auth-terms:has(input:checked) { border-color: var(--dsh-accent); background: var(--dsh-accent-soft); }
.auth-terms input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    inline-size: 20px;
    block-size: 20px;
    flex: none;
    margin: 1px 0 0;
    border: 2px solid var(--dsh-border);
    border-radius: 6px;
    background: var(--dsh-surface);
    cursor: pointer;
    position: relative;
    transition: background-color 0.18s var(--dsh-ease), border-color 0.18s var(--dsh-ease);
}
.auth-terms input[type="checkbox"]:hover { border-color: var(--dsh-accent); }
.auth-terms input[type="checkbox"]:checked { background: var(--dsh-accent); border-color: var(--dsh-accent); }
.auth-terms input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    inset-block-start: 1px;
    inset-inline-start: 5px;
    inline-size: 5px;
    block-size: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
html[data-theme="dark"] .auth-terms input[type="checkbox"]:checked::after { border-color: #0B1A14; }
.auth-terms input[type="checkbox"]:focus-visible { outline: 2px solid var(--dsh-accent); outline-offset: 2px; }
.auth-terms span { font-size: 12.5px; color: var(--dsh-text-soft); line-height: 1.65; }
.auth-terms a {
    color: var(--dsh-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 600;
}
.auth-terms a:hover { color: var(--dsh-text); }
/* On the dark card, gold-on-dark is fine but white reads strongest. */
html[data-theme="dark"] .auth-terms a { color: #FFFFFF; }
html[data-theme="dark"] .auth-terms a:hover { color: var(--dsh-accent); }

/* Submit ------------------------------------------------------------------ */

.auth-submit {
    inline-size: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-block-start: 16px;
    padding: 14px 22px;
    border: 0;
    border-radius: 12px;
    background: var(--dsh-accent);
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s var(--dsh-ease), box-shadow 0.2s var(--dsh-ease), filter 0.2s var(--dsh-ease);
    box-shadow: 0 4px 14px -4px var(--dsh-accent);
}
html[data-theme="dark"] .auth-submit { color: #0B1A14; }
.auth-submit:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 10px 24px -6px var(--dsh-accent); }
.auth-submit:active { transform: translateY(0); }
.auth-submit:focus-visible { outline: 2px solid var(--dsh-accent); outline-offset: 3px; }
/* The arrow must point the way the language reads: in RTL "forward" is left,
   in LTR it is right. One icon, mirrored by direction. */
.auth-submit .auth-arrow { transition: transform 0.2s var(--dsh-ease); }
html[dir="ltr"] .auth-submit .auth-arrow { transform: scaleX(-1); }
html[dir="rtl"] .auth-submit:hover .auth-arrow { transform: translateX(-3px); }
html[dir="ltr"] .auth-submit:hover .auth-arrow { transform: scaleX(-1) translateX(-3px); }


.auth-links { display: flex; justify-content: center; gap: 18px; margin-block-start: 14px; }
.auth-links a, .auth-back {
    font-size: 12.5px;
    color: var(--dsh-text-muted);
    text-decoration: none;
    transition: color 0.2s var(--dsh-ease);
}
.auth-links a:hover, .auth-back:hover { color: var(--dsh-accent); }
.auth-back { display: inline-flex; align-items: center; gap: 6px; margin-block-start: 22px; }
/* "Back" points against the reading direction: left in LTR, right in RTL.
   The submit arrow is the opposite — it points forward — so the two flip
   on opposite conditions. The base icon is a left arrow. */
html[dir="rtl"] .auth-back svg { transform: scaleX(-1); }

.auth-form-header { margin-block-end: 22px; }
.auth-form-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-block-end: 8px;
}
/* The heading was wrapping mid-word and running into the language bar. */
.auth-form-header-row h2 { white-space: nowrap; margin: 0; font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); }
@media (max-width: 520px) {
    .auth-form-header-row { gap: 10px; }
    .auth-form-header-row h2 { flex: 1 1 100%; }
}

/* ==========================================================================
   Page shell — main.css paints these light unconditionally, which left a
   white panel behind dark cards (and near-invisible footer links) in dark mode.
   ========================================================================== */

.auth-form-wrap,
.auth-mobile-form-area { background: var(--dsh-bg); color: var(--dsh-text); }
.auth-form-header h2 { color: var(--dsh-text); }
.auth-form-header p { color: var(--dsh-text-muted); }
.auth-page label { color: var(--dsh-text-soft); }
.auth-page .form-group > label { font-size: 13px; font-weight: 600; margin-block-end: 7px; display: block; }

/* ==========================================================================
   Centred single-column sign-in
   ========================================================================== */

.au {
    position: relative;
    min-block-size: 100vh;
    min-block-size: 100dvh;
    display: grid;
    place-items: center;
    padding: clamp(64px, 9vh, 96px) clamp(18px, 5vw, 32px) clamp(32px, 6vh, 56px);
    background: var(--dsh-bg);
    color: var(--dsh-text);
    overflow-x: clip;
}
.au-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(58% 44% at 50% 0%, var(--dsh-accent-soft) 0%, transparent 64%),
        radial-gradient(44% 36% at 12% 88%, rgba(27, 67, 50, 0.06) 0%, transparent 66%);
}
html[data-theme="dark"] .au-bg {
    background:
        radial-gradient(58% 44% at 50% 0%, rgba(201, 162, 39, 0.10) 0%, transparent 64%),
        radial-gradient(46% 40% at 10% 90%, rgba(27, 67, 50, 0.40) 0%, transparent 68%);
}

/* Controls float in the top corner, clear of the column. */
.au-controls {
    position: absolute;
    inset-block-start: clamp(14px, 3vh, 24px);
    inset-inline-end: clamp(16px, 4vw, 28px);
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 8px;
}

.au-col {
    position: relative;
    z-index: 2;
    inline-size: 100%;
    max-inline-size: 460px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.au-brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; margin-block-end: 22px; }
.au-mark {
    block-size: 40px;
    inline-size: auto;
    aspect-ratio: 320 / 465;
    flex: none;
    overflow: visible;
    color: #1B4332;
}
html[data-theme="dark"] .au-mark { color: #C9A227; }
.au-brand-text { font-size: 1.125rem; font-weight: 700; color: var(--dsh-text); line-height: 1; }

.au-card {
    inline-size: 100%;
    padding: clamp(24px, 4vw, 34px);
    border: 1px solid var(--dsh-border);
    border-radius: 20px;
    background: var(--dsh-surface);
    box-shadow: var(--dsh-shadow);
    text-align: start;
}
.au-title { font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.625rem); font-weight: 700; color: var(--dsh-text); margin: 0 0 6px; text-align: center; }
.au-sub { font-size: 13.5px; color: var(--dsh-text-muted); margin: 0 0 24px; text-align: center; line-height: 1.6; }

.au-group { margin-block-end: 16px; }
.au-group > label { display: block; font-size: 13px; font-weight: 600; color: var(--dsh-text-soft); margin-block-end: 8px; }
.au-error { color: var(--dsh-danger); font-size: 12.5px; margin-block-start: 7px; }

.au-note {
    margin-block-start: 22px;
    padding-block-start: 18px;
    border-block-start: 1px solid var(--dsh-border);
    font-size: 12.5px;
    line-height: 1.75;
    color: var(--dsh-text-muted);
    text-align: center;
}


.au .auth-back { margin-block-start: 20px; }
.au .auth-links { margin-block-start: 10px; }

@media (max-width: 560px) {
    .au { padding-block-start: 84px; }
    .au-controls { inset-inline: auto clamp(12px, 4vw, 16px); }
}

/* ==========================================================================
   Verify step — OTP entry
   ========================================================================== */

.au-badge {
    inline-size: 48px;
    block-size: 48px;
    margin-inline: auto;
    margin-block-end: 16px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: var(--dsh-accent-soft);
    border: 1px solid var(--dsh-border);
    color: var(--dsh-accent);
}
.au-mail {
    display: inline-block;
    color: var(--dsh-text);
    font-weight: 700;
    unicode-bidi: isolate;   /* keeps the address intact inside RTL copy */
}
.au-otp-label {
    display: block;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--dsh-text-soft);
    margin-block-end: 12px;
}
.au-otp {
    display: flex;
    justify-content: center;
    gap: clamp(6px, 2vw, 10px);
}
.au-otp .otp-box {
    inline-size: clamp(42px, 13vw, 52px);
    block-size: clamp(50px, 15vw, 60px);
    padding: 0;
    text-align: center;
    font-family: inherit;
    font-size: clamp(20px, 6vw, 24px);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--dsh-text);
    background: var(--dsh-surface-2);
    border: 1.5px solid var(--dsh-border);
    border-radius: 12px;
    transition: border-color 0.18s var(--dsh-ease), box-shadow 0.18s var(--dsh-ease),
                background-color 0.18s var(--dsh-ease), transform 0.18s var(--dsh-ease);
}
.au-otp .otp-box:hover { border-color: var(--dsh-text-muted); }
.au-otp .otp-box:focus {
    outline: none;
    border-color: var(--dsh-accent);
    background: var(--dsh-surface);
    box-shadow: 0 0 0 4px var(--dsh-accent-soft);
    transform: translateY(-2px);
}
.au-otp .otp-box.filled { border-color: var(--dsh-accent); background: var(--dsh-accent-soft); }

/* Complete-profile step ---------------------------------------------------- */

.au-col-wide { max-inline-size: 560px; }
.au-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.au-req { color: var(--dsh-danger); }
.au-cancel { margin-block-start: 18px; text-align: center; }
.au-cancel button {
    background: none;
    border: 0;
    font-family: inherit;
    cursor: pointer;
    padding: 0;
}
@media (max-width: 520px) { .au-row { grid-template-columns: 1fr; } }