/* =============================================================
 * Auth palette — matches the public homepage chassis.
 *
 * Homepage uses cream parchment (#FAF7F2) as the dominant color,
 * warm-ink text, antique gold CTA, and Old Glory red for links/
 * eyebrows. Navy (#0A2342) only appears in the ElectionsTeaser
 * pullquote band + footer — NOT as a UI chrome color.
 *
 * All rules scope to #kt_login so Metronic pages without the auth
 * chassis are untouched. Include this file once from the shared
 * layout (layouts/guest-v2.blade.php) and every auth page picks
 * up the treatment automatically.
 *
 * Load order: plugins.bundle.css -> style.bundle.css -> login-1.css
 *   -> overrides.css -> auth-palette.css  (last wins where tied).
 * ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

/* --- Aside: cream + Capitol bleed (mirror of PublicHero) --- */
#kt_login .auth-aside-cream {
    position: relative !important;
    background-color: #FAF7F2 !important;
    overflow: hidden !important;
}
#kt_login .auth-aside-cream::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('/images/hero-capitol.jpg');
    background-size: cover;
    background-position: center;
    opacity: 0.35;
    z-index: 0;
}
#kt_login .auth-aside-cream::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(250, 247, 242, 0.55) 0%,
        rgba(250, 247, 242, 0.78) 55%,
        rgba(250, 247, 242, 0.98) 100%);
    z-index: 1;
}
#kt_login .auth-aside-cream > * {
    position: relative !important;
    z-index: 2 !important;
}

#kt_login .auth-aside-cream .auth-aside-headline,
.auth-aside-cream h3.auth-aside-headline {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    color: #0E1726 !important;
    line-height: 1.15 !important;
    text-shadow: 0 1px 2px rgba(250, 247, 242, 0.6);
}
#kt_login .auth-aside-cream .auth-aside-brand,
.auth-aside-cream span.auth-aside-brand {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    letter-spacing: -0.5px !important;
    color: #0E1726 !important;
}
#kt_login .auth-hairline-gold {
    display: block;
    width: 64px;
    height: 1px;
    background: #D4AF37;
    margin: 1.25rem auto;
    opacity: 0.9;
}
#kt_login .auth-eyebrow {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: #B22234 !important;
    margin-bottom: 1rem;
    display: block;
    text-align: center;
}

/* --- Form panel: parchment canvas, warm-ink copy --- */
#kt_login.bg-white { background-color: #FAF7F2 !important; }
#kt_login .login-content {
    background-color: #FAF7F2 !important;
    color: #0E1726 !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}
#kt_login .login-form h3 {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-weight: 600 !important;
    color: #0E1726 !important;
    letter-spacing: 0 !important;
    font-size: 2.25rem !important;
    line-height: 1.15 !important;
}
#kt_login .login-form p.text-muted {
    color: rgba(14, 23, 38, 0.65) !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    font-size: 1rem !important;
}

/* --- Labels + inputs --- */
#kt_login .login-form .form-label {
    color: #0E1726 !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 0.5rem;
    opacity: 0.75;
}
#kt_login .login-form .form-control-solid,
#kt_login .login-form input.form-control {
    background-color: #ffffff !important;
    border: 1px solid rgba(14, 23, 38, 0.14) !important;
    color: #0E1726 !important;
    border-radius: 0.375rem !important;
    font-family: 'Inter', sans-serif !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
#kt_login .login-form .form-control-solid:focus,
#kt_login .login-form input.form-control:focus {
    background-color: #ffffff !important;
    border-color: #D4AF37 !important;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2) !important;
    outline: none !important;
}
#kt_login .login-form .form-text,
#kt_login .login-form small.form-text {
    color: rgba(14, 23, 38, 0.55) !important;
    font-family: 'Inter', sans-serif !important;
}

/* --- Email-handle + phone composite inputs: warm-neutral chip --- */
#kt_login .email-handle-group,
#kt_login .phone-input-group {
    background-color: #ffffff !important;
    border: 1px solid rgba(14, 23, 38, 0.14) !important;
    border-radius: 0.375rem !important;
}
#kt_login .email-handle-group input,
#kt_login .phone-input-group input {
    background-color: #ffffff !important;
    border: none !important;
}
#kt_login .email-handle-suffix,
#kt_login .phone-prefix-label {
    background-color: #F1EDE4 !important;
    color: rgba(14, 23, 38, 0.75) !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
    border: none !important;
    border-left: 1px solid rgba(212, 175, 55, 0.5) !important;
}

/* --- Primary CTA: gold shimmer (matches homepage "Download the App") --- */
#kt_login .login-form #submit,
#kt_login .login-form .btn-hero-secondary,
#kt_login .login-form .btn-login-primary {
    background: linear-gradient(180deg, #E8CB6F 0%, #D4AF37 100%) !important;
    color: #0A2342 !important;
    border: none !important;
    border-radius: 0.25rem !important;
    padding: 0.85rem 2rem !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.8125rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.15em !important;
    box-shadow: 0 2px 4px rgba(10, 35, 66, 0.12) !important;
    transition: opacity 0.15s ease, transform 0.15s ease;
}
#kt_login .login-form #submit:hover,
#kt_login .login-form .btn-hero-secondary:hover,
#kt_login .login-form .btn-login-primary:hover {
    opacity: 0.92 !important;
    transform: translateY(-1px);
    color: #0A2342 !important;
    background: linear-gradient(180deg, #E8CB6F 0%, #D4AF37 100%) !important;
    box-shadow: 0 4px 8px rgba(10, 35, 66, 0.16) !important;
}
#kt_login .login-form #submit:disabled,
#kt_login .login-form .btn-login-primary:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed;
    transform: none !important;
}

/* --- Secondary/info buttons: ghost treatment (not bootstrap purple) --- */
#kt_login .login-form .btn-info,
#kt_login .login-form a.btn-info,
#kt_login .login-form button.btn-info {
    background-color: transparent !important;
    color: #0E1726 !important;
    border: 1px solid rgba(14, 23, 38, 0.2) !important;
    border-radius: 0.25rem !important;
    padding: 0.5rem 1rem !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    box-shadow: none !important;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
#kt_login .login-form .btn-info:hover {
    background-color: rgba(212, 175, 55, 0.12) !important;
    border-color: #D4AF37 !important;
    color: #0A2342 !important;
}

/* --- Links: red-on-cream, mirroring homepage accent treatment --- */
#kt_login .login-form a,
#kt_login .login-form .forgot-password-link,
#kt_login .login-form .signup-prompt-text {
    color: #B22234 !important;
    font-weight: 500 !important;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s ease, color 0.15s ease;
}
#kt_login .login-form a:hover,
#kt_login .login-form .forgot-password-link:hover {
    color: #7A1623 !important;
    border-bottom-color: #B22234;
}

/* --- Misc form elements --- */
#kt_login .login-form .checkbox {
    color: #0E1726 !important;
    font-family: 'Inter', sans-serif !important;
}
#kt_login .login-form .text-danger {
    color: #B22234 !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 500 !important;
    font-size: 0.8125rem !important;
    margin-top: 0.25rem;
}
#kt_login .login-form .pwd-toggle-btn {
    background: transparent !important;
    border: none !important;
    color: rgba(10, 35, 66, 0.55) !important;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}
#kt_login .login-form .pwd-toggle-btn:hover {
    color: #0A2342 !important;
}

/* Hide the legacy Metronic aside-img SVG — it's a generic illustration
   that clashes with the Capitol backdrop. */
#kt_login .auth-aside-cream .aside-img { display: none !important; }

/* Mobile: keep the aside slim + headline visible */
@media (max-width: 991.98px) {
    #kt_login .auth-aside-cream {
        min-height: auto !important;
        padding: 2rem 1rem !important;
    }
}