/* =========================================================
   freedom (2) — shared design system overlay
   Loaded after zeors.css on visitor pages; progressive only.
   ========================================================= */
:root {
    --fd-brand: #1F2C4D;
    --fd-brand-2: #3D5580;
    --fd-ink: #111827;
    --fd-muted: #6b7280;
    --fd-line: #e5e7eb;
    --fd-bg: #f4f6fa;
    --fd-danger: #cc0000;
    --fd-ok: #22c55e;
    --fd-radius: 14px;
    --fd-shadow: 0 6px 24px rgba(17, 24, 39, .08);
    --fd-tap: 44px;
}

html { -webkit-text-size-adjust: 100%; }

body {
    background:
        radial-gradient(1200px 400px at 80% -10%, rgba(31, 44, 77, .10), transparent 60%),
        radial-gradient(900px 380px at -10% 110%, rgba(4, 151, 217, .07), transparent 55%),
        var(--fd-bg);
    color: var(--fd-ink);
}

/* ---- cards / containers ---- */
.login-container,
.card,
.panel {
    border-radius: 18px !important;
    box-shadow: var(--fd-shadow) !important;
    overflow: hidden;
}

/* ---- inputs ---- */
.form-input,
.dob-select,
input[type="text"], input[type="password"], input[type="email"], input[type="tel"], select {
    outline: none !important;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.form-input:focus, .dob-select:focus, select:focus {
    border-color: var(--fd-brand) !important;
    box-shadow: 0 2px 0 0 var(--fd-brand), 0 0 0 4px rgba(31, 44, 77, .14);
    border-radius: 6px;
}

/* ---- buttons ---- */
.btn {
    min-height: var(--fd-tap);
    font-weight: 600;
    letter-spacing: .01em;
    border-radius: 12px !important;
    transition: transform .12s ease, box-shadow .12s ease, background .15s ease;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn-primary { box-shadow: 0 8px 20px rgba(31, 44, 77, .30); }
.btn-primary:hover { box-shadow: 0 10px 26px rgba(211, 84, 0, .35); }

/* ---- focus-visible accessibility ---- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
    outline: 3px solid rgba(31, 44, 77, .45);
    outline-offset: 2px;
    border-radius: 8px;
}

/* ---- inline validation rows keep breathing room on phones ---- */
.form-msg { margin-top: -14px; margin-bottom: -6px; padding: 8px 2px 0 !important; }
@media (max-width: 600px) {
    .form-msg { margin-top: -6px; margin-bottom: -2px; font-size: 11px; }
    .form-input, .dob-select, .btn { font-size: 16px !important; }
}

/* ---- small screen paddings ---- */
@media (max-width: 480px) {
    .login-section.full-width { padding: 22px 16px !important; }
    .footer { padding: 28px 0 18px; }
}

/* ---- selection color matches brand ---- */
::selection { background: rgba(31, 44, 77, .25); }