/*
 * Sign-in screens (login, OTP, forgot / reset / forced password, register).
 * Loaded by auth/partials/video-background.blade.php after each page's own styles.
 *
 * Layout: a white form panel beside the existing site photo / video, shown as a
 * plain image panel (right; left on login and OTP; hidden on small screens). No glass, no gradients.
 */
html body {
    background: #F5F6F8 !important;
    font-family: "Inter", "Source Sans 3", "Segoe UI", Arial, sans-serif !important;
    color: #232B33;
    -webkit-font-smoothing: antialiased;
}

/* Media panel */
html body .bg-video, html body .bg-overlay { display: none; }
@media (min-width: 992px) {
    html body { padding-right: calc(46vw + 1rem) !important; }
    html body .bg-video, html body .bg-overlay {
        display: block; position: fixed; top: 0; right: 0; bottom: 0; left: auto !important;
        width: 46vw !important; height: 100vh !important; z-index: 0;
    }
    html body .bg-video { object-fit: cover; background: #12171C var(--dei-poster) center / cover no-repeat; }
    html body .bg-overlay { background: rgba(2, 71, 18, .18) !important; }
}
@media (min-width: 992px) and (prefers-reduced-motion: reduce) {
    html body .bg-video { display: none; }
    html body .bg-overlay { background: #12171C var(--dei-poster) center / cover no-repeat !important; }
}

/* The card */
html body .login-card, html body .auth-card, html body .pw-card, html body .otp-card, html body .register-card {
    position: relative; z-index: 1;
    background: #FFFFFF !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    border: 1px solid #E3E7EB !important; border-top: 1px solid #E3E7EB !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .06) !important;
    color: #232B33 !important;
    animation: none !important;
}
html body :is(.login-card, .auth-card, .pw-card, .otp-card, .register-card) img { background: none !important; padding: 0 !important; }
html body :is(.login-card, .auth-card, .pw-card, .otp-card, .register-card) :is(h1, h2, h3, h4, h5) { color: #12171C !important; font-weight: 600 !important; letter-spacing: -.01em; }
html body :is(.login-card, .auth-card, .pw-card, .otp-card, .register-card) :is(label, .form-label) { color: #232B33 !important; font-weight: 500 !important; font-size: .8125rem !important; }
html body :is(.login-card, .auth-card, .pw-card, .otp-card, .register-card) :is(p, .subtitle, .footer-note, .text-muted, small) { color: #46505A !important; }
html body :is(.login-card, .auth-card, .pw-card, .otp-card, .register-card) .subtitle { letter-spacing: .04em; }
html body :is(.login-card, .auth-card, .pw-card, .otp-card, .register-card) .divider { display: none !important; }
html body :is(.login-card, .auth-card, .pw-card, .otp-card, .register-card) a:not(.btn),
html body :is(.login-card, .auth-card, .pw-card, .otp-card, .register-card) .btn-link { color: #027804 !important; }
html body :is(.login-card, .auth-card, .pw-card, .otp-card, .register-card) a:not(.btn):hover,
html body :is(.login-card, .auth-card, .pw-card, .otp-card, .register-card) .btn-link:hover { color: #024712 !important; }

/* Fields */
html body :is(.login-card, .auth-card, .pw-card, .otp-card, .register-card) .form-control {
    background: #FFFFFF !important; color: #12171C !important;
    border: 1px solid #C8D0D7 !important; border-radius: 6px; box-shadow: none !important;
}
html body :is(.login-card, .auth-card, .pw-card, .otp-card, .register-card) .form-control::placeholder { color: #77818B !important; }
html body :is(.login-card, .auth-card, .pw-card, .otp-card, .register-card) .form-control:focus {
    border-color: #027804 !important; box-shadow: 0 0 0 3px rgba(2, 120, 4, .2) !important;
}
html body :is(.login-card, .auth-card, .pw-card, .otp-card, .register-card) .form-control.is-invalid { border-color: #D10000 !important; }
html body :is(.login-card, .auth-card, .pw-card, .otp-card, .register-card) .form-control:-webkit-autofill {
    -webkit-text-fill-color: #12171C !important; -webkit-box-shadow: 0 0 0 1000px #FFFFFF inset !important; caret-color: #12171C !important;
}
html body :is(.login-card, .auth-card, .pw-card, .otp-card, .register-card) :is(.input-group-text, .password-toggle, .btn-outline-secondary) {
    background: #F0F2F4 !important; border-color: #C8D0D7 !important; color: #46505A !important;
}
html body :is(.login-card, .auth-card, .pw-card, .otp-card, .register-card) .input-group:focus-within .input-group-text { color: #027804 !important; border-color: #027804 !important; }
html body :is(.login-card, .auth-card, .pw-card, .otp-card, .register-card) :is(.icon-wrap) { background: #EAF5EA !important; }
html body :is(.login-card, .auth-card, .pw-card, .otp-card, .register-card) :is(.icon-wrap i, .auth-icon) { color: #027804 !important; }
html body :is(.login-card, .auth-card, .pw-card, .otp-card, .register-card) :is(.invalid-feedback, .text-danger) { color: #D10000 !important; }

/* Primary action */
html body :is(.btn-login, .btn-verify, .btn-set, .btn-register),
html body :is(.login-card, .auth-card, .pw-card, .otp-card, .register-card) .btn-primary {
    background: #027804 !important; border: 1px solid #027804 !important; color: #FFFFFF !important;
    box-shadow: none !important; border-radius: 6px !important; font-weight: 600 !important; transform: none !important;
}
html body :is(.btn-login, .btn-verify, .btn-set, .btn-register):hover,
html body :is(.login-card, .auth-card, .pw-card, .otp-card, .register-card) .btn-primary:hover { background: #024712 !important; border-color: #024712 !important; }
html body :is(.btn-login, .btn-verify, .btn-set, .btn-register):focus-visible { outline: 2px solid #024712; outline-offset: 2px; }

/* Messages */
html body :is(.login-card, .auth-card, .pw-card, .otp-card, .register-card) .alert {
    border: 1px solid #E3E7EB !important; border-left: 3px solid !important; border-radius: 6px; color: #232B33 !important; font-size: .875rem;
}
html body :is(.login-card, .auth-card, .pw-card, .otp-card, .register-card) .alert-danger { background: #FDF4F4 !important; border-left-color: #D10000 !important; }
html body :is(.login-card, .auth-card, .pw-card, .otp-card, .register-card) .alert-success { background: #F1F8F2 !important; border-left-color: #027804 !important; }
html body :is(.login-card, .auth-card, .pw-card, .otp-card, .register-card) .alert-warning { background: #FFFAEC !important; border-left-color: #E9B949 !important; }
html body :is(.login-card, .auth-card, .pw-card, .otp-card, .register-card) .alert-info { background: #F3F7FB !important; border-left-color: #4E86B5 !important; }
html body :is(.login-card, .auth-card, .pw-card, .otp-card, .register-card) .alert .btn-close { filter: none !important; }

@media (max-width: 575.98px) {
    html body :is(.login-card, .auth-card, .pw-card, .otp-card, .register-card) { padding: 28px 22px !important; }
}
@media (prefers-reduced-motion: reduce) { html body * { animation: none !important; transition: none !important; } }

/* Login and OTP: photo panel on the left, form on the right */
@media (min-width: 992px) {
    html body:has(.login-card, .otp-card) { padding-right: 1rem !important; padding-left: calc(46vw + 1rem) !important; }
    html body:has(.login-card, .otp-card) :is(.bg-video, .bg-overlay) { left: 0 !important; right: auto !important; }
}