/**
 * Login — thin layer on Mofi/Bootstrap (style.css, color-4.css, responsive.css).
 * Only fixes template conflicts + brand layout; defers to .login-card / .theme-form where possible.
 */

body.login-page {
    --login-deep: #212F3B;
    --login-mid: #1B2731;
    --login-rich: #243642;
    --login-brand: #F5474F;
    --login-light: #2C3D4A;
    --login-airy: #3C5363;
    --login-rgb-deep: 33, 47, 59;
    --login-rgb-brand: 245, 71, 79;
    --login-grad: linear-gradient(145deg, var(--login-deep) 0%, var(--login-mid) 30%, rgba(var(--login-rgb-brand), 0.18) 48%, var(--login-rich) 64%, var(--login-light) 88%, var(--login-airy) 100%);
    --login-panel-grad: linear-gradient(165deg, #f8fafc 0%, #f1f5f9 48%, #e8eef3 100%);
    --login-panel-accent: radial-gradient(ellipse 100% 70% at 50% 0%, rgba(var(--login-rgb-brand), 0.07) 0%, transparent 62%);
    --login-surface-grad:
        radial-gradient(ellipse 85% 55% at 100% 0%, rgba(var(--login-rgb-brand), 0.11) 0%, transparent 58%),
        radial-gradient(ellipse 75% 50% at 0% 100%, rgba(var(--login-rgb-deep), 0.06) 0%, transparent 55%),
        radial-gradient(circle at 50% -8%, rgba(var(--login-rgb-brand), 0.06) 0%, transparent 42%),
        linear-gradient(168deg, #fff 0%, #fcfdfe 42%, #f6f8fb 100%);
    --login-surface-grain: repeating-linear-gradient(-14deg, transparent 0, transparent 3px, rgba(var(--login-rgb-deep), 0.012) 3px, rgba(var(--login-rgb-deep), 0.012) 4px);
    --login-input-bg: #f8fafc;
    --login-input-border: rgba(var(--login-rgb-deep), 0.16);
    --login-input-focus-ring: rgba(var(--login-rgb-brand), 0.2);
    --login-text-heading: rgb(var(--login-rgb-deep));
    --login-text-muted: rgba(var(--login-rgb-deep), 0.58);
    --login-text-label: rgba(var(--login-rgb-deep), 0.78);
    --login-btn-primary: linear-gradient(135deg, #F5474F 0%, #E13F47 46%, #C8333B 100%);
    --login-orb-cream: rgba(245, 71, 79, 0.22);
    --login-card-max: 28rem;
    --login-radius: 1rem;
    --login-shadow: 0 4px 24px rgba(var(--login-rgb-deep), 0.06), 0 1px 3px rgba(var(--login-rgb-deep), 0.04);
    --login-glass: rgba(255, 255, 255, 0.08);
    --login-glass-hover: rgba(255, 255, 255, 0.12);
    --login-glass-bd: rgba(255, 255, 255, 0.16);
    --login-glass-bd-hover: rgba(255, 255, 255, 0.22);
    --login-glass-pill-bd: rgba(245, 71, 79, 0.22);
    --login-icon-surface: rgba(255, 255, 255, 0.08);
    --login-icon-bd: rgba(255, 255, 255, 0.38);
    --login-card-bg-image: none;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    font-family: "Outfit", system-ui, -apple-system, sans-serif;
    background: var(--login-panel-grad) !important;
    background-image: none !important;
}

/* Layout: override template .login-card (100vh flex + bg image) */
body.login-page .login-page-shell,
body.login-page .login-page-row {
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
}

body.login-page .login-page-shell {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

body.login-page .login-page-row {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
    min-height: inherit;
}

body.login-page .login-panel-col {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100dvh;
    padding: clamp(1rem, 3vh, 2rem) clamp(1.25rem, 5vw, 2rem) !important;
    background: var(--login-panel-grad);
}

body.login-page .login-panel-center {
    width: 100%;
    max-width: var(--login-card-max);
    margin: 0 auto;
}

body.login-page .login-card {
    display: block !important;
    min-height: 0 !important;
    height: auto !important;
    width: 100% !important;
    max-width: var(--login-card-max) !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

body.login-page .login-card .login-main {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: clamp(1.5rem, 4vw, 2rem) clamp(1.25rem, 3.5vw, 2rem) clamp(1.5rem, 4vw, 2.25rem) !important;
    border-radius: var(--login-radius) !important;
    background: var(--login-surface-grain), var(--login-surface-grad) !important;
    background-repeat: repeat, no-repeat !important;
    background-size: auto, 100% 100% !important;
    border: 1px solid rgba(var(--login-rgb-brand), 0.12) !important;
    box-shadow: var(--login-shadow), 0 0 0 1px rgba(255, 255, 255, 0.85) inset !important;
}

/* Brand + intro */
body.login-page .login-brand-header {
    margin: 0 0 1.25rem;
    padding: 0 0 1.25rem;
    border-bottom: 1px solid rgba(var(--login-rgb-deep), 0.08);
}

body.login-page .login-brand-header .logo {
    margin: 0 !important;
}

body.login-page .login-brand-logo {
    max-height: 5rem;
    width: auto;
    height: auto;
}

body.login-page .login-form-intro {
    margin-bottom: 1.5rem;
}

body.login-page .login-access-badge {
    display: inline-block;
    margin-bottom: 0.75rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--theme-deafult);
    background: color-mix(in srgb, var(--theme-deafult) 10%, #fff);
    border: 1px solid color-mix(in srgb, var(--theme-deafult) 22%, #fff);
    border-radius: 999px;
}

body.login-page .login-form-title {
    margin: 0 0 0.35rem;
    font-size: clamp(1.375rem, 2.5vw, 1.625rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--login-text-heading);
}

body.login-page .login-form-subtitle {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--login-text-muted);
}

/* .theme-form: solid inputs (template uses dashed + #f3f3ff) */
body.login-page .login-card .login-main .theme-form .form-group {
    margin-bottom: 1rem !important;
}

body.login-page .login-card .login-main .theme-form .col-form-label {
    margin-bottom: 0.4rem !important;
    padding: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--login-text-label) !important;
}

body.login-page .login-form .login-field-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}

body.login-page .login-form .login-field-error,
body.login-page .login-form .login-field-label .field-validation-error {
    margin: 0 !important;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

body.login-page .login-card .login-main .theme-form input.form-control {
    min-height: 3rem;
    padding: 0.625rem 0.875rem !important;
    font-size: 0.9375rem;
    border-radius: 0.625rem !important;
    border: 1px solid var(--login-input-border) !important;
    border-style: solid !important;
    background-color: var(--login-input-bg) !important;
    color: var(--login-text-heading);
    box-shadow: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

body.login-page .login-card .login-main .theme-form .form-input .form-control {
    padding-right: 3.75rem !important;
}

body.login-page .login-card .login-main .theme-form input.form-control:hover {
    border-color: rgba(var(--login-rgb-deep), 0.28) !important;
    border-style: solid !important;
}

body.login-page .login-card .login-main .theme-form input.form-control:focus {
    border-color: var(--login-brand) !important;
    border-style: solid !important;
    background-color: #fff !important;
    box-shadow: 0 0 0 3px var(--login-input-focus-ring) !important;
}

body.login-page .login-card .login-main .theme-form input.form-control::placeholder {
    color: rgba(var(--login-rgb-deep), 0.38);
}

/* Password toggle (template .show-hide position; we use button + labels) */
body.login-page .login-password-toggle {
    position: absolute;
    top: 50%;
    right: 0.625rem;
    transform: translateY(-50%);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2rem;
    padding: 0 0.35rem;
    border: 0;
    background: transparent;
    cursor: pointer;
}

body.login-page .login-password-toggle span {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--login-brand);
    line-height: 1;
}

body.login-page .login-password-toggle span.show::before { content: "Show"; }
body.login-page .login-password-toggle span:not(.show)::before { content: "Hide"; }

/* Forgot link: undo template absolute .link */
body.login-page .login-card .login-main .theme-form .link,
body.login-page .login-forgot-link {
    position: static !important;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
}

body.login-page .login-forgot-link {
    color: var(--theme-deafult) !important;
}

body.login-page .login-forgot-link:hover {
    opacity: 0.82;
}

body.login-page .login-form-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    margin-top: 0.25rem;
}

body.login-page .login-form-options .checkbox {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

body.login-page .login-form-options .checkbox label {
    margin: 0;
    font-size: 0.875rem;
    color: var(--login-text-muted) !important;
}

/* Buttons: template .btn sizing (override tall / stacked mobile defaults) */
body.login-page .login-form-buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

body.login-page .login-form-buttons .btn {
    min-height: unset !important;
    height: auto !important;
    padding: 0.375rem 1.75rem !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    width: auto !important;
}

body.login-page .login-form-buttons .btn i {
    font-size: 14px;
    line-height: 1;
    vertical-align: -1px;
}

body.login-page .login-form-buttons #btnSignIn {
    flex: 1 1 auto;
    min-width: 0;
}

body.login-page .login-form-buttons #btnClear {
    flex: 0 0 auto;
    min-width: 6.5rem;
    color: rgba(var(--login-rgb-deep), 0.85) !important;
    background: #fff !important;
    border-color: rgba(var(--login-rgb-deep), 0.18) !important;
    box-shadow: none !important;
}

body.login-page .login-form-buttons #btnClear:hover {
    background: var(--login-input-bg) !important;
    border-color: rgba(var(--login-rgb-deep), 0.28) !important;
}

body.login-page .login-form .btn-primary,
body.login-page .login-form .btn-air-primary {
    background: var(--login-btn-primary) !important;
    background-color: #F5474F !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(var(--login-rgb-brand), 0.28) !important;
}

body.login-page .login-form .btn-primary:hover,
body.login-page .login-form .btn-air-primary:hover {
    background: linear-gradient(135deg, #D93B43 0%, #C8333B 46%, #B52F34 100%) !important;
    background-color: #D93B43 !important;
}

/* Responsive */
@media (min-width: 1200px) {
    body.login-page {
        background: var(--login-deep) !important;
    }

    body.login-page .login-panel-col {
        background:
            radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.5) 42%, transparent 70%),
            var(--login-panel-accent),
            var(--login-panel-grad);
    }
}

@media (max-width: 1199.98px) {
    body.login-page {
        background: var(--login-panel-accent), var(--login-panel-grad) !important;
        background-repeat: no-repeat, no-repeat !important;
        background-size: 100% 55vh, 100% 100% !important;
    }

    body.login-page .login-panel-col {
        padding-top: clamp(0.75rem, 2.5vh, 1.5rem) !important;
        padding-bottom: clamp(0.75rem, 2.5vh, 1.5rem) !important;
        padding-left: max(1.25rem, env(safe-area-inset-left, 0px)) !important;
        padding-right: max(1.25rem, env(safe-area-inset-right, 0px)) !important;
        background: transparent !important;
    }

    body.login-page .login-panel-center,
    body.login-page .login-card {
        max-width: 100% !important;
    }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    body.login-page .login-panel-col {
        padding-left: max(1.5rem, env(safe-area-inset-left, 0px)) !important;
        padding-right: max(1.5rem, env(safe-area-inset-right, 0px)) !important;
    }
}

@media (max-width: 767.98px) {
    body.login-page .login-panel-col {
        padding-left: max(1.25rem, env(safe-area-inset-left, 0px)) !important;
        padding-right: max(1.25rem, env(safe-area-inset-right, 0px)) !important;
    }

    body.login-page .login-card .login-main {
        padding: 1.25rem 1.125rem 1.5rem !important;
        border-radius: 0.875rem !important;
    }
}

@media (max-width: 575.98px) {
    body.login-page .login-panel-col {
        padding-left: max(1rem, env(safe-area-inset-left, 0px)) !important;
        padding-right: max(1rem, env(safe-area-inset-right, 0px)) !important;
    }

    body.login-page .login-card {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    body.login-page .login-card .login-main {
        width: 100% !important;
        padding: 1.25rem 1rem 1.5rem !important;
    }

    body.login-page .login-form-buttons .btn {
        padding: 0.375rem 1rem !important;
    }

    body.login-page .login-form-buttons #btnClear {
        min-width: 5.5rem;
    }
}

/* Hero (desktop) */
.login-hero-wrap {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 100dvh;
    padding: clamp(2rem, 6vh, 4rem) clamp(2rem, 4vw, 3rem) clamp(3rem, 11vh, 7rem);
    overflow: hidden;
    background: var(--login-grad);
}

.login-hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(2px);
    pointer-events: none;
}

.login-hero-orb-top {
    top: -120px;
    right: -100px;
    width: 380px;
    height: 380px;
    opacity: 0.45;
    background: radial-gradient(circle, var(--login-orb-cream) 0%, rgba(var(--login-rgb-brand), 0) 70%);
}

.login-hero-orb-bottom {
    bottom: -160px;
    left: -140px;
    width: 420px;
    height: 420px;
    opacity: 0.5;
    background: radial-gradient(circle, rgba(var(--login-rgb-brand), 0.55) 0%, rgba(var(--login-rgb-deep), 0) 72%);
}

.login-hero-content {
    position: relative;
    z-index: 2;
    max-width: 500px;
    color: #fff;
}

.login-hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 14px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.95);
    background: var(--login-glass);
    border: 1px solid var(--login-glass-pill-bd);
    border-radius: 999px;
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

.login-hero-content h2 {
    margin-bottom: 14px;
    font-size: clamp(2rem, 1.15rem + 2.8vw, 3.15rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.03em;
    color: #fff;
}

.login-hero-accent {
    color: transparent;
    background: linear-gradient(90deg, var(--login-brand) 0%, rgba(var(--login-rgb-brand), 0.78) 55%, #FF6B73 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.login-hero-content p {
    margin-bottom: 20px;
    font-size: 0.98rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.92);
}

.login-hero-key {
    font-weight: 600;
    color: #fff;
    border-bottom: 1px solid rgba(245, 71, 79, 0.88);
    padding-bottom: 0.08em;
}

.login-hero-metrics {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.login-hero-metric {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1rem 1.1rem;
    background: var(--login-glass);
    border: 1px solid var(--login-glass-bd);
    border-radius: 1rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: background 0.2s, border-color 0.2s;
}

.login-hero-metric:hover {
    background: var(--login-glass-hover);
    border-color: var(--login-glass-bd-hover);
}

.login-hero-metric-icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    font-size: 1.05rem;
    color: #fff;
    background: var(--login-icon-surface);
    border: 1px solid var(--login-icon-bd);
    border-radius: 0.75rem;
}

.login-hero-metric .metric-label {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

.login-hero-metric strong {
    display: block;
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.35;
    color: #fff;
}

.login-hero-trust {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.55);
}

.login-hero-trust-dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--login-brand);
    box-shadow: 0 0 10px rgba(var(--login-rgb-brand), 0.4);
}