/* Shared "Junagadh Info" branded card for the single-step auth pages (Login, Forgot
   Password, Reset Password) — same forest/gold/sandstone palette and Marcellus + Mukta
   type as the registration wizard (css/MGC/Auth/otp-wizard.css), so every auth page reads
   as one system instead of Register looking custom-built while these looked like bare
   leftover theme styling (plain blue .btn-primary, no card, no heading).

   Kept as its own file rather than sharing otp-wizard.css: that file's classes are
   wizard-specific (step panels, OTP boxes, ridge indicator) that these single-step forms
   don't use — the token *values* below are intentionally the same, just re-declared under
   an .auth-card scope. */

.auth-card {
    --auth-forest: #1B4332;
    --auth-forest-mid: #2D6A4F;
    --auth-forest-soft: #E8F0EA;
    --auth-sandstone-deep: #E7DCC6;
    --auth-amber: #B4741A;
    --auth-ink: #232019;
    --auth-ink-soft: #6B6357;
    --auth-danger: #9B2C2C;
    --auth-accent-soft: rgba(27, 67, 50, 0.12);

    position: relative;
    font-family: 'Mukta', system-ui, sans-serif;
    background: #ffffff;
    border: 1px solid var(--auth-sandstone-deep);
    border-radius: 20px;
    box-shadow: 0 18px 44px -28px rgba(27, 67, 50, 0.45), 0 2px 8px rgba(20, 20, 30, 0.05);
    padding: 2rem 1.9rem 1.9rem;
}

/* ── Card header: eyebrow + title + subtitle (matches otp-wizard__* exactly) ─────── */

.auth-card__eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--auth-amber);
    margin: 0 0 0.55rem;
}

.auth-card__eyebrow svg {
    display: block;
}

/* The theme's own h1 is sized/weighted for a full-width hero banner (huge, uppercase) —
   wrong for a compact card heading, so every visual property is reset explicitly here. */
.auth-card__title {
    font-family: 'Marcellus', Georgia, serif;
    font-weight: 400;
    letter-spacing: 0.01em;
    font-size: 1.7rem;
    text-transform: none;
    line-height: 1.25;
    color: var(--auth-ink);
    text-align: center;
    margin: 0 0 0.3rem;
}

.auth-card__title::before,
.auth-card__title::after {
    display: none;
}

.auth-card__subtitle {
    text-align: center;
    color: var(--auth-ink-soft);
    font-size: 0.95rem;
    margin: 0 0 1.5rem;
}

/* ── Form controls ─────────────────────────────────────────────────────────────── */

.auth-card .control-label {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--auth-forest);
}

.auth-card .control-label .req {
    color: var(--auth-amber);
    font-style: normal;
}

.auth-card .form-control:not([type="checkbox"]) {
    border: 1px solid var(--auth-sandstone-deep);
    border-radius: 10px;
    background: #FDFCF9;
}

.auth-card .form-control:not([type="checkbox"]):focus {
    border-color: var(--auth-forest-mid);
    box-shadow: 0 0 0 0.2rem var(--auth-accent-soft);
    background: #fff;
}

/* The visible box + tick is drawn entirely by the sibling <span> (all_forms.css); the
   native checkbox underneath must stay fully invisible. appearance:none isn't honored
   for checkboxes on some mobile browsers, which left a native box behind the span with
   no visible tick — opacity:0 hides it unconditionally instead of depending on
   appearance/accent-color support, and doesn't affect the :checked state or clickability. */
.auth-card input[type="checkbox"] {
    opacity: 0;
}

/* ── Button ────────────────────────────────────────────────────────────────────── */

/* !important: Bootstrap's .btn-primary carries the same specificity (one class) and sets
   its own background/border-color, so a plain override would win or lose purely by
   stylesheet load order — matches otp-wizard__btn's own use of !important for the same
   reason. */
.auth-card .btn.btn-primary {
    border-radius: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
    background-color: var(--auth-forest) !important;
    border-color: var(--auth-forest) !important;
}

.auth-card .btn.btn-primary:not(:disabled):hover,
.auth-card .btn.btn-primary:not(:disabled):focus {
    background-color: var(--auth-forest-mid) !important;
    border-color: var(--auth-forest-mid) !important;
}

.auth-card .btn.btn-primary:disabled {
    background-color: #B9C4BC !important;
    border-color: #B9C4BC !important;
}

/* ── Alerts (success / error banners injected above the form) ───────────────────── */

.auth-card .alert-success {
    background: var(--auth-forest-soft);
    color: var(--auth-forest);
    border: 0;
    border-radius: 10px;
}

.auth-card .alert-danger {
    background: #fdecea;
    color: var(--auth-danger);
    border: 0;
    border-radius: 10px;
}

/* ── Footer links (Forgot password / Register / Back to Sign In) ────────────────── */

.auth-card .return-link a {
    color: var(--auth-forest);
    font-weight: 600;
}

.auth-card .return-link a:hover {
    color: var(--auth-forest-mid);
}

@media (max-width: 380px) {
    .auth-card {
        padding: 1.5rem 1.15rem 1.25rem;
        border-radius: 16px;
    }
}