/*
 * Customer sign-in theme layer.
 *
 * This file is intentionally scoped to body.login. The underlying legacy auth
 * stylesheet is shared with registration, so placing dark rules there would
 * make unrelated auth screens inherit an incomplete theme.
 */
:root {
    color-scheme: light;
    --auth-page-bg: #ffffff;
    --auth-heading: #18578c;
    --auth-copy: #495160;
    --auth-muted: #656565;
    --auth-input-bg: rgba(255, 255, 255, 0.94);
    --auth-input-border: #d9dee7;
    --auth-input-text: #172033;
    --auth-focus: #0b93d1;
    --auth-label-bg: #ffffff;
}

html.dark {
    color-scheme: dark;
    --auth-page-bg: #050505;
    --auth-heading: #f8fafc;
    --auth-copy: #d6deea;
    --auth-muted: #aab5c5;
    --auth-input-bg: rgba(17, 17, 17, 0.9);
    --auth-input-border: #3a3a3a;
    --auth-input-text: #f8fafc;
    --auth-focus: #40c4ff;
    --auth-label-bg: #050505;
}

body.login {
    position: relative;
    isolation: isolate;
    display: flex;
    min-height: 100vh;
    overflow-x: hidden;
    flex-direction: column;
    background: var(--auth-page-bg);
    color: var(--auth-copy);
}

html {
    overflow-x: hidden;
}

@supports (overflow-x: clip) {
    html,
    body.login {
        overflow-x: clip;
    }
}

html.dark body.login {
    background: #050505;
}

body.login #header,
body.login .login-footer {
    position: relative;
    z-index: 2;
}

body.login #header {
    display: flex;
    width: 100%;
    min-height: 0;
    flex: 0 0 auto;
    flex-direction: column;
}

body.login #navbar {
    z-index: 10;
    background: transparent;
}

html.dark body.login #navbar {
    background: transparent;
}

body.login .main-nav {
    width: 100%;
    min-height: 80px;
    padding: 0;
}

body.login .main-nav > .container {
    max-width: 960px;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body.login .main-nav > .container > .row {
    min-height: 80px;
    align-items: center;
}

body.login .main-nav .header-logo {
    position: relative;
    display: block;
    width: 225px;
    height: 65px;
    overflow: hidden;
    margin: 0 !important;
    padding: 0 !important;
}

body.login .main-nav .header-logo img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 225px;
    height: 225px;
    max-width: none;
    transform: translate(-50%, -50%);
}

/* Kemar 2026-07-30: "the logo should have remained the same as the light theme."
   It was being pushed through brightness(1.55) saturate(1.35), and the asset is a
   126-frame animated GIF (logo-animated.jpeg is really a GIF89a), so dark rendered
   the brand mark as an oversaturated rainbow. Verified by compositing the real
   frames on #050505: the artwork already has a transparent background and holds
   its true brand colours (orange AIR / blue DROP) on black unaided. No filter is
   the correct treatment — it now matches light exactly. */

body.login #header > .container {
    width: 100%;
    max-width: 960px;
    padding: 1rem 15px 0 !important;
}

body.login #header > .container > .row {
    align-items: flex-start;
}

body.login .login-form.form {
    width: 100%;
    max-width: 500px !important;
    margin-top: 3rem;
    padding: 0 15px !important;
}

body.login .main-nav .header-logo img,
body.login .call-icon img,
body.login .download-app {
    opacity: 1;
}

body.login .auth-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1.15rem;
}

body.login .auth-theme-toggle {
    position: relative;
    display: block;
    flex: 0 0 auto;
    width: 48px;
    height: 28.498px;
    overflow: hidden;
    padding: 0;
    border: 0;
    border-radius: 1040.467px;
    background: #f5f5f5;
    box-shadow: none;
    cursor: pointer;
    transition: background-color 180ms ease, height 180ms ease;
}

body.login .auth-theme-toggle:focus {
    outline: none;
}

body.login .auth-theme-toggle:focus-visible {
    outline: 2px solid #40c4ff;
    outline-offset: 3px;
}

body.login .auth-theme-toggle__thumb {
    position: absolute;
    top: 2.083px;
    left: 0;
    display: flex;
    width: 24.332px;
    height: 24.332px;
    align-items: center;
    justify-content: center;
    border-radius: 10414.047px;
    background: #ffffff;
    box-shadow: 0 1.042px 1.042px rgba(194, 199, 207, 0.4);
    transform: translateX(21.585px);
    transition:
        width 180ms ease,
        height 180ms ease,
        transform 180ms ease,
        background-color 180ms ease,
        box-shadow 180ms ease;
}

body.login .auth-theme-toggle__icon {
    display: block;
    width: 16px;
    height: 16px;
    max-width: none;
}

html.dark body.login .auth-theme-toggle {
    height: 28px;
    border-radius: 999px;
    background: #333333;
}

html.dark body.login .auth-theme-toggle__thumb {
    top: 2px;
    width: 24px;
    height: 24px;
    border-radius: 9999px;
    background: #4d4d4d;
    box-shadow: 0 1px 1px rgba(24, 25, 28, 0.4);
    transform: translateX(2px);
}

body.login .login-form.form form {
    width: 100%;
    padding: 1.667rem 3rem 0 !important;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body.login .form h3,
body.login .form h3.text-left {
    color: var(--auth-heading) !important;
}

body.login .form .welcome-b {
    margin-bottom: 0.8rem;
    font-size: clamp(1.65rem, 3vw, 2rem);
    letter-spacing: -0.02em;
}

body.login .form h3.text-left {
    margin-bottom: 1.5rem !important;
    font-size: clamp(1.35rem, 2.4vw, 1.65rem);
}

body.login .form label,
body.login .custom-control-label,
body.login .signup-link {
    color: var(--auth-muted);
}

body.login .form label.position-relative {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    margin: 0 0 -0.55rem 0.9rem;
    padding: 0 0.5rem;
    background: var(--auth-label-bg);
    color: var(--auth-copy);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.3;
}

body.login .form .custom-control-label {
    background: transparent;
}

body.login .form .relative-box {
    align-items: flex-start;
    margin-bottom: 1.15rem !important;
}

body.login .form input,
body.login .form textarea,
body.login .form .md-outline input {
    height: 52px;
    padding: 0 1rem !important;
    border-color: var(--auth-input-border) !important;
    border-radius: 12px !important;
    background: var(--auth-input-bg) !important;
    color: var(--auth-input-text) !important;
    caret-color: var(--auth-focus);
    transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

body.login .form input:focus,
body.login .form textarea:focus,
body.login .form .md-outline input:focus {
    border-color: var(--auth-focus) !important;
    box-shadow: 0 0 0 3px rgba(11, 147, 209, 0.18) !important;
}

body.login input.form-control::placeholder {
    color: #8b97a8;
    opacity: 1;
}

body.login .form .md-form.md-outline {
    margin-bottom: 0.75rem !important;
}

body.login .field-icon {
    top: 1.15rem;
    right: 1.1rem;
    width: 20px !important;
    height: 20px !important;
    max-width: 20px;
    overflow: hidden;
    object-fit: contain;
    line-height: 20px;
    opacity: 0.65;
}

body.login .custom-control {
    margin-top: 0.1rem;
}

body.login .custom-control-label {
    padding-top: 0.2rem !important;
    font-size: 0.9rem;
    font-weight: 600;
}

body.login .forgot-password {
    color: var(--auth-copy);
    font-size: 0.88rem;
    line-height: 1.75rem;
}

body.login .forgot-password:hover,
body.login .forgot-password:focus {
    color: var(--auth-focus);
}

body.login .custom-control-input:checked ~ .custom-control-label::before {
    border-color: var(--auth-focus);
    background-color: var(--auth-focus);
}

body.login .alert-danger,
body.login .alert-success {
    border-radius: 10px;
}

body.login .form-btn {
    min-height: 54px;
    margin-top: 0.5rem !important;
    margin-bottom: 1.1rem !important;
    border-radius: 12px;
    font-size: 1rem !important;
    letter-spacing: 0.01em;
}

body.login .signup-link {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
}

body.login .login-dod {
    z-index: 0;
    top: clamp(4.75rem, 9vh, 6rem) !important;
    right: 0;
    left: 0;
    display: block;
    width: 98%;
    height: auto !important;
    max-width: 1825px !important;
    margin: 0 auto !important;
    aspect-ratio: 1825 / 999;
    object-fit: contain;
    opacity: 0.92;
    pointer-events: none;
    transform-origin: center center;
    transition: filter 180ms ease;
}

/* Kemar 2026-07-30: "we want to see real colours, real life colours, not some
   faded kind of blue looking". The map SVG already carries the real palette —
   #EF5426 AirDrop orange, #27719B and #3D62A0 blues, #9DBBC9 highlights.
   brightness(3) was washing every one of them toward white and the blue
   drop-shadow was casting the whole plate blue. Show the artwork's own colours
   and lift only contrast, which deepens the darks against #050505 instead of
   bleaching the midtones. */
html.dark body.login .login-dod {
    opacity: 0.85;
    filter: contrast(1.12) saturate(1.08);
}

body.login .login-footer {
    width: 100%;
    flex: 0 0 auto;
    margin-top: 0.75rem;
    padding: 0 1rem 1rem;
}

body.login .login-footer .footer-bottom {
    margin-top: 0 !important;
}

body.login .login-footer a {
    display: inline-block;
    margin: 0.3rem;
    vertical-align: middle;
}

body.login .login-footer .download-app {
    display: block;
    width: clamp(150px, 17vw, 190px);
    height: auto;
    max-width: 190px !important;
}

html.dark body.login .login-footer {
    color: #d6deea;
}

html.dark body.login input:-webkit-autofill,
html.dark body.login input:-webkit-autofill:hover,
html.dark body.login input:-webkit-autofill:focus {
    -webkit-text-fill-color: #f8fafc !important;
    -webkit-box-shadow: 0 0 0 1000px #111111 inset !important;
    caret-color: #f8fafc;
}

@media (max-width: 767px) {
    body.login .main-nav {
        min-height: 72px;
    }

    body.login .main-nav > .container > .row {
        min-height: 72px;
    }

    body.login .main-nav .header-logo {
        width: 178px;
        height: 58px;
    }

    body.login .main-nav .header-logo img {
        width: 180px !important;
        height: 180px;
    }

    body.login #header > .container {
        padding: 0.75rem 0.75rem 0 !important;
    }

    body.login .login-form.form {
        padding: 0 0.25rem !important;
    }

    body.login .auth-header-actions {
        gap: 0.65rem;
    }

    body.login .login-form.form form {
        padding: 1.75rem 1.25rem !important;
        border-radius: 0;
    }

    body.login .login-dod {
        top: 6rem !important;
        display: block;
        width: 172%;
        max-width: none !important;
        margin-left: -36% !important;
        opacity: 0.76;
    }

    html.dark body.login .login-dod {
        opacity: 0.9;
    }

    body.login .login-footer {
        margin-top: 1rem;
        padding-bottom: 1rem;
    }

    body.login .login-footer .download-app {
        width: clamp(136px, 40vw, 158px);
        max-width: 158px !important;
    }
}

@media (max-width: 420px) {
    body.login .auth-theme-toggle {
        width: 44px;
    }

    body.login .auth-header-actions {
        gap: 0.45rem;
    }

    body.login .call-icon img {
        width: 42px;
        height: 42px;
    }

    body.login .form .welcome-b {
        font-size: 1.55rem;
    }

    body.login .form h3.text-left {
        margin-bottom: 1.25rem !important;
        font-size: 1.3rem;
    }

    body.login .forgot-password,
    body.login .custom-control-label {
        font-size: 0.8rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.login .heart,
    body.login [data-aos] {
        animation: none !important;
        transition: none !important;
    }
}

/* ===================================================================
   Kemar 2026-07-30 — login composition overhaul.
   "the page is not structured properly … it's way too high up. It's not
   centred. It's not professional." + "we could have a glass outline
   around welcome back".

   Everything here is inside @media (min-width: 768px), so the sub-768
   view renders exactly as before (the phone surface is not mine).
   The higher-specificity selectors + !important are required: the base
   sheet's form rules otherwise win over a plain `.login-form > form`,
   which is why an earlier pass showed a card on dark but not on light.
   =================================================================== */
@media (min-width: 768px) {

    /* 1. VERTICAL CENTRING — #header was `flex: 0 0 auto`, so at 1440x823
       the content ended at 593px and left 230px of dead space beneath it.
       Let the header take the free space and centre its content in the
       band below the fixed navbar. Measured after: 0px dead space. */
    body.login #header {
        flex: 1 1 auto;
        justify-content: center;
        padding-top: 104px;
    }

    body.login .login-form {
        margin-top: 0;
    }

    /* 2. THE GLASS PANEL — the form previously floated bare on the map. */
    html body.login .container.login-form > form#login_form_form {
        position: relative;
        border-radius: 22px;
        padding: 2.75rem 2.5rem 2.25rem !important;
        background: rgba(255, 255, 255, 0.72) !important;
        border: 1px solid rgba(24, 87, 140, 0.14) !important;
        -webkit-backdrop-filter: blur(22px) saturate(1.3);
        backdrop-filter: blur(22px) saturate(1.3);
        box-shadow:
            0 26px 64px rgba(16, 42, 67, 0.20),
            0 2px 8px rgba(16, 42, 67, 0.06),
            inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
    }

    html.dark body.login .container.login-form > form#login_form_form {
        background: rgba(255, 255, 255, 0.045) !important;
        border: 1px solid rgba(255, 255, 255, 0.10) !important;
        box-shadow:
            0 28px 70px rgba(0, 0, 0, 0.62),
            inset 0 1px 0 rgba(255, 255, 255, 0.09) !important;
    }

    /* A single hairline of brand light on the top edge, so the panel reads
       as lit rather than merely translucent. */
    html.dark body.login .container.login-form > form#login_form_form::before {
        content: '';
        position: absolute;
        inset: -1px -1px auto;
        height: 1px;
        border-radius: 22px 22px 0 0;
        background: linear-gradient(90deg,
            rgba(245, 96, 0, 0) 0%,
            rgba(245, 96, 0, 0.55) 28%,
            rgba(64, 196, 255, 0.5) 72%,
            rgba(64, 196, 255, 0) 100%);
        pointer-events: none;
    }

    body.login .container.login-form > form#login_form_form .welcome-b {
        margin-bottom: 1.5rem;
    }

    /* 3. STAGE THE MAP — focus light behind the panel and fall off toward
       the edges, so the composition has a subject instead of a flat field. */
    html.dark body.login::before {
        content: '';
        position: fixed;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background:
            radial-gradient(58% 52% at 50% 42%,
                rgba(39, 113, 155, 0.16) 0%,
                rgba(5, 5, 5, 0) 62%),
            radial-gradient(120% 90% at 50% 50%,
                rgba(5, 5, 5, 0) 35%,
                rgba(5, 5, 5, 0.72) 100%);
    }

    /* 4. STORE BADGES — raw black PNG tiles with hard edges on near-black.
       Seat them in a matching glass chip so the footer belongs to the card. */
    body.login .login-footer .download-app {
        border-radius: 12px;
        transition: transform 180ms ease;
    }

    html.dark body.login .login-footer .download-app {
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.10);
        padding: 6px 10px;
        box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
    }

    body.login .login-footer .download-app:hover {
        transform: translateY(-2px);
    }
}

/* Kemar 2026-07-30: "Welcome Back" is centred while "Login" and every field
   label below it are left-aligned, so the two adjacent headings read as a
   mistake. Give the card one clean left edge — the greeting now heads the form
   instead of floating above it. The blade still carries .text-center on the
   greeting, hence the override. Desktop/tablet only; sub-768 is unchanged. */
@media (min-width: 768px) {
    body.login .container.login-form > form#login_form_form .welcome-b {
        text-align: left !important;
    }
}