/* =========================================
   DARK HORSE — LOGIN THEME
   Desktop first
   ========================================= */

:root {
    --dh-black: #080a0c;
    --dh-panel: #0d1013;
    --dh-panel-2: #12161a;
    --dh-gold: #c89b3c;
    --dh-gold-light: #e1bd68;
    --dh-gold-dark: #75551e;
    --dh-text: #f5f1e8;
    --dh-muted: #a7a29a;
    --dh-border: rgba(200, 155, 60, 0.25);
}

/* Full page */
body {
    background: var(--dh-black) !important;
}

.auth-page {
    background:
        radial-gradient(circle at 75% 45%, rgba(200,155,60,.10), transparent 34%),
        linear-gradient(135deg, #07090b 0%, #0b0e11 55%, #151108 100%) !important;
}

/* LEFT — BRAND AREA */
.auth-hero {
    background:
        linear-gradient(90deg, rgba(8,10,12,.12), rgba(8,10,12,.28)),
        url("/images/darkhorse-hero.jpeg") center center / contain no-repeat !important;
}

.hero-bg-pattern {
    opacity: .025 !important;
}

.hero-shape {
    display: none !important;
}

.hero-title,
.hero-subtitle,
.hero-features {
    display: none !important;
}

.hero-content {
    position: absolute !important;
    inset: 0 !important;
    max-width: none !important;
    pointer-events: none;
}

.hero-badge {
    position: absolute !important;
    top: 42px !important;
    left: 42px !important;
    margin: 0 !important;

    color: var(--dh-gold-light) !important;
    background: rgba(8,10,12,.58) !important;
    border: 1px solid rgba(200,155,60,.30) !important;
    box-shadow: 0 8px 30px rgba(0,0,0,.22);
}

.hero-badge-dot {
    background: var(--dh-gold) !important;
}

/* RIGHT — LOGIN AREA */
.auth-panel {
    background: transparent !important;
}

.auth-card {
    max-width: 440px !important;
    background:
        linear-gradient(145deg, rgba(18,22,26,.97), rgba(9,11,13,.98)) !important;
    border: 1px solid var(--dh-border) !important;
    box-shadow:
        0 30px 80px rgba(0,0,0,.48),
        0 0 0 1px rgba(255,255,255,.018) inset !important;
}

.auth-logo {
    margin-bottom: 1rem !important;
}

.auth-logo img {
    width: auto !important;
    max-width: 145px !important;
    max-height: 100px !important;
    object-fit: contain !important;
}

.auth-card-title {
    color: var(--dh-text) !important;
}

.auth-card-subtitle {
    color: var(--dh-muted) !important;
    line-height: 1.65 !important;
}

/* Inputs */
.form-label {
    color: #d8d3ca !important;
}

.form-input {
    color: var(--dh-text) !important;
    background: #0a0d10 !important;
    border-color: rgba(255,255,255,.10) !important;
}

.form-input::placeholder {
    color: #65676a !important;
}

.form-input:hover {
    border-color: rgba(200,155,60,.40) !important;
}

.form-input:focus {
    border-color: var(--dh-gold) !important;
    box-shadow: 0 0 0 3px rgba(200,155,60,.12) !important;
}

.input-icon,
.toggle-password {
    color: #7d7f82 !important;
}

.input-wrapper:focus-within .input-icon {
    color: var(--dh-gold) !important;
}

/* Remember / forgot */
.remember-check {
    color: var(--dh-muted) !important;
}

.remember-check input {
    accent-color: var(--dh-gold);
}

.forgot-link {
    color: var(--dh-gold-light) !important;
}

.forgot-link:hover {
    color: #f0d58d !important;
}

/* Main button */
.auth-btn {
    color: #090a0b !important;
    background:
        linear-gradient(135deg, #e0bd68 0%, #c89b3c 48%, #a97924 100%) !important;
    border: 1px solid rgba(255,220,130,.38) !important;
    box-shadow:
        0 12px 28px rgba(157,112,29,.22),
        inset 0 1px 0 rgba(255,255,255,.25) !important;
}

.auth-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
}

.auth-btn:active {
    transform: translateY(0);
}

/* Footer */
.auth-footer {
    color: #777a7d !important;
    border-color: rgba(255,255,255,.07) !important;
}

/* Alerts */
.auth-alert {
    background: rgba(255,255,255,.04) !important;
    border-color: rgba(255,255,255,.08) !important;
}

/* Remove any old purple visual residue */
::selection {
    background: rgba(200,155,60,.35);
    color: #fff;
}

/* ===== Dark Horse login refinements ===== */

/* Clean, fully dark input shells */
.input-wrapper {
    background: #090c0f !important;
    border: 1px solid rgba(200,155,60,.18) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

.input-wrapper:focus-within {
    border-color: #c89b3c !important;
    box-shadow: 0 0 0 3px rgba(200,155,60,.10) !important;
}

.form-input {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #f5f1e8 !important;
}

.form-input:focus {
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

.input-icon,
.toggle-password {
    background: transparent !important;
    border: 0 !important;
    color: #8d8a83 !important;
}

.input-wrapper:focus-within .input-icon,
.input-wrapper:focus-within .toggle-password {
    color: #c89b3c !important;
}

/* Logo balance */
.auth-logo img {
    max-height: 82px !important;
    max-width: 125px !important;
}

/* Subtitle polish */
.auth-card-subtitle {
    max-width: 360px;
    margin-left: auto !important;
    margin-right: auto !important;
    color: #aaa49a !important;
}

/* Keep button premium gold */
.auth-btn {
    color: #080a0c !important;
    font-weight: 700 !important;
}

/* ===== FINAL DARK HORSE INPUTS ===== */

.auth-card .input-wrapper {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 52px !important;
    padding: 0 !important;

    background: #090c0f !important;
    border: 1px solid rgba(200,155,60,.28) !important;
    border-radius: 12px !important;

    box-shadow: none !important;
    overflow: hidden !important;
}

.auth-card .input-wrapper:focus-within {
    background: #090c0f !important;
    border-color: #c89b3c !important;
    box-shadow: 0 0 0 3px rgba(200,155,60,.13) !important;
}

.auth-card .input-icon {
    width: 48px !important;
    height: 52px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: transparent !important;
    color: #8f8b82 !important;
}

.auth-card .input-wrapper:focus-within .input-icon {
    color: #d5a844 !important;
}

.auth-card .form-input,
.auth-card .form-input:hover,
.auth-card .form-input:focus,
.auth-card .form-input:active,
.auth-card input:-webkit-autofill,
.auth-card input:-webkit-autofill:hover,
.auth-card input:-webkit-autofill:focus {
    flex: 1 !important;
    width: 100% !important;
    height: 52px !important;
    padding: 0 14px !important;

    color: #f4efe5 !important;
    background: #090c0f !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: 0 0 0 1000px #090c0f inset !important;

    -webkit-text-fill-color: #f4efe5 !important;
    caret-color: #d5a844 !important;
}

.auth-card .form-input::placeholder {
    color: #686b6e !important;
    opacity: 1 !important;
}

.auth-card .toggle-password {
    width: 48px !important;
    height: 52px !important;
    padding: 0 !important;

    background: transparent !important;
    color: #8f8b82 !important;
    border: 0 !important;
}

.auth-card .toggle-password:hover,
.auth-card .input-wrapper:focus-within .toggle-password {
    color: #d5a844 !important;
}

/* Remove browser/default purple focus */
.auth-card input:focus,
.auth-card button:focus {
    outline: none !important;
}


/* DARK HORSE — force one-piece dark fields */
.auth-card .input-wrapper,
.auth-card .input-wrapper > *,
.auth-card .input-icon,
.auth-card .toggle-password,
.auth-card .form-input {
    background-color: #090c0f !important;
    background-image: none !important;
}

.auth-card .input-wrapper {
    border: 1px solid rgba(200,155,60,.30) !important;
    box-shadow: none !important;
}

.auth-card .input-wrapper:focus-within {
    border-color: #d5a844 !important;
    box-shadow: 0 0 0 2px rgba(213,168,68,.15) !important;
}

.auth-card .input-icon,
.auth-card .toggle-password {
    color: #9a968d !important;
}

.auth-card .input-wrapper:focus-within .input-icon,
.auth-card .input-wrapper:focus-within .toggle-password {
    color: #d5a844 !important;
}


/* ===== DARK HORSE LEFT BRAND MARK ===== */
.auth-hero {
    background:
        radial-gradient(circle at 42% 48%, rgba(200,155,60,.10), transparent 42%),
        linear-gradient(145deg, #07090b 0%, #090b0d 60%, #0d0c09 100%) !important;
}

.auth-hero::before {
    content: "";
    position: absolute;
    inset: 7% 8%;
    background: url("/images/darkhorse-horse-d.png") center center / contain no-repeat;
    opacity: .82;
    pointer-events: none;
    z-index: 0;
}

.hero-bg-pattern {
    z-index: 0;
}

.hero-content {
    z-index: 2 !important;
}

/* Prepare left side for final horse artwork */
.auth-hero::before {
    display: none !important;
}

.hero-badge {
    display: none !important;
}

/* ===== FINAL DARK HORSE HERO ART ===== */
.auth-hero::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 5% 1% 3% 1% !important;
    background: url("/images/darkhorse-hero-transparent.png") center center / contain no-repeat !important;
    opacity: .88 !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

.hero-bg-pattern {
    z-index: 0 !important;
}

.hero-content {
    z-index: 2 !important;
}

/* Move left hero artwork slightly right */
.auth-hero::before {
    transform: none !important;
}

/* Remove tiny desktop page scroll */
@media (min-width: 769px) {
    html,
    body {
        height: 100% !important;
        overflow: hidden !important;
    }

    .auth-page {
        height: 100vh !important;
        min-height: 100vh !important;
        overflow: hidden !important;
    }
}

/* Final desktop viewport fit */
@media (min-width: 769px) {
    .auth-panel {
        min-height: 0 !important;
        height: 100vh !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .auth-hero {
        height: 100vh !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
}

/* Fit login card on short desktop screens without scrolling */
@media (min-width: 769px) and (max-height: 700px) {
    .auth-panel {
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }

    .auth-card {
        padding-top: 18px !important;
        padding-bottom: 18px !important;
        gap: 14px !important;
    }

    .auth-logo {
        margin-bottom: 6px !important;
    }

    .auth-logo img {
        max-height: 72px !important;
    }

    .auth-form {
        gap: 12px !important;
    }

    .auth-footer {
        margin-top: 8px !important;
        padding-top: 10px !important;
    }
}

/* Desktop: match the preferred 75% browser-zoom appearance */
@media (min-width: 769px) {
    .auth-page {
        width: 133.3333% !important;
        height: 133.3333vh !important;
        min-height: 0 !important;
        transform: scale(0.75);
        transform-origin: top left;
    }

    html,
    body {
        width: 100% !important;
        height: 100% !important;
        overflow: hidden !important;
    }
}

/* Cancel previous desktop scale experiment */
@media (min-width: 769px) {
    .auth-page {
        width: 100% !important;
        height: 100vh !important;
        transform: none !important;
    }
}

/* ===== SHORT DESKTOP / LAPTOP SCREENS ===== */
@media (min-width: 769px) and (max-height: 700px) {

    .auth-page {
        height: 100vh !important;
        min-height: 100vh !important;
        overflow: hidden !important;
    }

    .auth-panel {
        height: 100vh !important;
        min-height: 0 !important;
        padding: 14px 3vw !important;
        overflow: hidden !important;
    }

    .auth-card {
        max-width: 420px !important;
        padding: 16px 22px !important;
        gap: 10px !important;
        border-radius: 20px !important;
    }

    .auth-logo {
        margin-bottom: 2px !important;
    }

    .auth-logo img {
        max-height: 64px !important;
        max-width: 105px !important;
    }

    .auth-card-title {
        font-size: 1.25rem !important;
        margin-bottom: 2px !important;
    }

    .auth-card-subtitle {
        font-size: .78rem !important;
        line-height: 1.4 !important;
    }

    .auth-form {
        gap: 9px !important;
    }

    .form-group {
        gap: 4px !important;
    }

    .form-label {
        font-size: .7rem !important;
    }

    .auth-card .input-wrapper,
    .auth-card .form-input,
    .auth-card .input-icon,
    .auth-card .toggle-password {
        min-height: 44px !important;
        height: 44px !important;
    }

    .form-row {
        font-size: .78rem !important;
    }

    .auth-btn {
        min-height: 44px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .auth-footer {
        margin-top: 3px !important;
        padding-top: 7px !important;
        font-size: .68rem !important;
    }
}

@media (min-width: 769px) and (max-height: 700px) {
    .auth-card {
        max-width: 390px !important;
        padding: 14px 20px !important;
    }
}

/* Final desktop card width */
@media (min-width: 769px) {
    .auth-card {
        width: 380px !important;
        max-width: 380px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

/* Final card height adjustment */
@media (min-width: 769px) {
    .auth-card {
        padding-top: 26px !important;
        padding-bottom: 26px !important;
    }
}

@media (min-width: 769px) {
    .auth-card {
        padding-top: 34px !important;
        padding-bottom: 34px !important;
    }
}

@media (min-width: 769px) {
    .auth-card {
        padding-top: 42px !important;
        padding-bottom: 42px !important;
    }
}