/*
 * Koreux auth pages — navy + gold + ivory palette overrides
 * Loaded after landing.css to override lx-auth-* defaults.
 */

/* iOS Safari (and some Android browsers) zoom the page in on focus when a
   text field's font-size is below 16px, then don't reliably zoom back out.
   Force 16px on small viewports instead of disabling pinch-zoom in the
   viewport meta tag, which would break zoom accessibility entirely. */
@media (max-width: 767px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    input[type="search"],
    input[type="date"],
    input[type="time"],
    input:not([type]),
    textarea,
    select {
        font-size: 16px !important;
    }
}

/* ── Primary action button → gold / navy ─────────────────────────────── */
.lx-btn-primary {
    background: #E8A020;
    color: #0F2644;
    border-radius: 0.75rem;
    box-shadow: 0 4px 24px -4px rgba(232, 160, 32, 0.38);
    font-family: 'Inter', system-ui, sans-serif;
}

.lx-btn-primary:hover {
    background: #d49018;
    box-shadow: 0 6px 28px -4px rgba(232, 160, 32, 0.5);
}

/* ── Google / OAuth button → white / navy ────────────────────────────── */
.lx-auth-oauth {
    background: #ffffff;
    color: #0F2644;
    border: 1px solid rgba(15, 38, 68, 0.15);
    border-radius: 0.75rem;
}

.lx-auth-oauth:hover {
    background: #f7f3ec;
    border-color: rgba(15, 38, 68, 0.25);
}

/* ── Divider ──────────────────────────────────────────────────────────── */
.lx-auth-divider::before,
.lx-auth-divider::after {
    background: rgba(15, 38, 68, 0.1);
}

.lx-auth-divider span {
    color: #b3c2cc;
}

/* ── Label ────────────────────────────────────────────────────────────── */
.lx-auth-label {
    color: #6b7f93;
    font-family: 'Inter', system-ui, sans-serif;
}

/* ── Inputs ───────────────────────────────────────────────────────────── */
.lx-auth-input {
    background: #ffffff;
    color: #0F2644;
    border: 1px solid rgba(15, 38, 68, 0.15);
    border-radius: 0.625rem;
    font-family: 'Inter', system-ui, sans-serif;
}

.lx-auth-input::placeholder {
    color: #b3c2cc;
}

.lx-auth-input:focus {
    border-color: rgba(232, 160, 32, 0.55);
    box-shadow: 0 0 0 3px rgba(232, 160, 32, 0.12);
}

/* ── Select ───────────────────────────────────────────────────────────── */
.lx-auth-select {
    background: #ffffff;
    color: #0F2644;
    border: 1px solid rgba(15, 38, 68, 0.15);
    border-radius: 0.625rem;
}

.lx-auth-select:focus {
    border-color: rgba(232, 160, 32, 0.55);
    box-shadow: 0 0 0 3px rgba(232, 160, 32, 0.12);
}

.lx-auth-select option {
    background: #ffffff;
    color: #0F2644;
}

/* ── Error text ───────────────────────────────────────────────────────── */
.lx-auth-error {
    color: #dc2626;
}

/* ── Inline link ──────────────────────────────────────────────────────── */
.lx-auth-link {
    color: #E8A020;
}

.lx-auth-link:hover {
    color: #d49018;
}

/* ── Checkbox ─────────────────────────────────────────────────────────── */
.lx-auth-checkbox {
    color: #6b7f93;
}

.lx-auth-checkbox input {
    border: 1px solid rgba(15, 38, 68, 0.2);
    background: #ffffff;
    accent-color: #E8A020;
}

/* ── Password strength bars ───────────────────────────────────────────── */
.lx-auth-strength-bar {
    background: rgba(15, 38, 68, 0.1);
    border-radius: 999px;
}

.lx-auth-strength-bar.is-active {
    background: #E8A020;
}

/* ── Hint text ────────────────────────────────────────────────────────── */
.lx-auth-hint {
    color: #9aafbb;
}

/* ── Terms ────────────────────────────────────────────────────────────── */
.lx-auth-terms {
    color: #6b7f93;
}

.lx-auth-terms input {
    accent-color: #E8A020;
}

.lx-auth-terms a {
    color: #E8A020;
}

.lx-auth-terms a:hover {
    color: #d49018;
}

/* ── Switch (sign in / sign up) ───────────────────────────────────────── */
.lx-auth-switch {
    color: #6b7f93;
}

.lx-auth-switch a {
    color: #E8A020;
    font-weight: 600;
}

.lx-auth-switch a:hover {
    color: #d49018;
}

/* ── Perks / footer bullets ───────────────────────────────────────────── */
.lx-auth-perk {
    color: #6b7f93;
}

.lx-auth-perk svg {
    color: #E8A020;
}

/* ── Callout (verify email) ───────────────────────────────────────────── */
.lx-auth-callout-icon {
    border: 1px solid rgba(232, 160, 32, 0.25);
    background: rgba(232, 160, 32, 0.08);
    color: #E8A020;
    border-radius: 0.75rem;
}

.lx-auth-callout-title {
    color: #0F2644;
}

.lx-auth-callout-text {
    color: #6b7f93;
}

/* ── Password toggle icon ─────────────────────────────────────────────── */
.lx-auth-toggle-pw {
    color: #9aafbb;
}

.lx-auth-toggle-pw:hover {
    color: #0F2644;
}

/* Input with wrapper (password reveal) */
.lx-auth-input-wrap .lx-auth-input {
    background: #ffffff;
}

/* ── Alert variants ───────────────────────────────────────────────────── */
.lx-auth-alert {
    border-radius: 0.625rem;
}

.lx-auth-alert--info {
    border-color: rgba(232, 160, 32, 0.35);
    background: rgba(232, 160, 32, 0.06);
    color: #8a6208;
}

.lx-auth-alert--error {
    border-color: rgba(220, 38, 38, 0.3);
    background: rgba(220, 38, 38, 0.06);
    color: #b91c1c;
}

.lx-auth-alert--success {
    border-color: rgba(16, 185, 129, 0.3);
    background: rgba(16, 185, 129, 0.06);
    color: #047857;
}

/* ── Eyebrow label ────────────────────────────────────────────────────── */
.lx-auth-shell .lx-eyebrow {
    color: #E8A020;
}

/* ── Nav button (e.g. logout on verify-email) ─────────────────────────── */
.lx-auth-nav-btn {
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
    border-radius: 0.5rem;
    font-family: 'Inter', system-ui, sans-serif;
}

.lx-auth-nav-btn:hover {
    border-color: rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.12);
}

/* ── Choice cards (onboarding) ────────────────────────────────────────── */
.lx-auth-choice {
    border: 1px solid rgba(15, 38, 68, 0.12);
    background: #ffffff;
    border-radius: 0.75rem;
}

.lx-auth-choice:hover {
    border-color: rgba(232, 160, 32, 0.45);
}

.lx-auth-choice:has(:checked) {
    border-color: rgba(232, 160, 32, 0.6);
    background: rgba(232, 160, 32, 0.05);
}

.lx-auth-choice input {
    accent-color: #E8A020;
}

.lx-auth-choice-title {
    color: #0F2644;
}

.lx-auth-choice-desc {
    color: #6b7f93;
}

/* ── Slug input ───────────────────────────────────────────────────────── */
.lx-auth-slug {
    border: 1px solid rgba(15, 38, 68, 0.15);
    background: #ffffff;
    border-radius: 0.625rem;
}

.lx-auth-slug:focus-within {
    border-color: rgba(232, 160, 32, 0.55);
    box-shadow: 0 0 0 3px rgba(232, 160, 32, 0.12);
}

.lx-auth-slug-prefix {
    border-right-color: rgba(15, 38, 68, 0.1);
    color: #9aafbb;
}

.lx-auth-slug-input {
    color: #0F2644;
}

.lx-auth-slug-input::placeholder {
    color: #b3c2cc;
}

/* ── Status icons ─────────────────────────────────────────────────────── */
.lx-auth-status-icon--ok   { background: rgba(16, 185, 129, 0.12); color: #059669; }
.lx-auth-status-icon--error{ background: rgba(220, 38, 38, 0.12);  color: #dc2626; }
.lx-auth-status-icon--warn { background: rgba(232, 160, 32, 0.12); color: #E8A020; }
.lx-auth-status-text--ok   { color: #059669; }
.lx-auth-status-text--error{ color: #dc2626; }
.lx-auth-status-text--warn { color: #E8A020; }

/* ── Label row (password + forgot link) ───────────────────────────────── */
.lx-auth-label-row .lx-auth-label {
    color: #6b7f93;
}