/* ==========================================================================
   auth_lux.css  —  Baseet identity rebrand for ALL authentication surfaces
   (login, signup, staff/customer/delivery login, OTP, forgot/reset, create-admin)

   Loads AFTER frontend.css + style.css (the non-home / else branch of header.php)
   and AFTER inc/custom_color.php.

   RULES
   - Brand = Baseet Orange, but ALWAYS via var(--dcolor) (site injects site_color,
     now #F75A29). Depth/gold via color-mix() — never a hardcoded brand hex.
   - Secondary accents: Navy #01004E, Blue #00138F, Cream #F9F9EE (used sparingly).
   - Overrides match/beat base specificity (loaded-after wins at equal weight;
     container-prefixed / !important where the base or Bootstrap uses !important).
   - Both .theme-light and .theme-dark kept working.
   - Presentation only — every class/id/form hook preserved. No markup change.
   - Full [dir="rtl"] block at the bottom (the base auth CSS ships zero RTL).
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Brand tokens (scoped to the auth roots; namespaced, theme-independent)
   -------------------------------------------------------------------------- */
.modern-login-section,
.signup__section,
.login_wrapper,
.left_login_page,
.othersLogin,
.otpModal {
    --auth-grad: linear-gradient(135deg, var(--dcolor) 0%, color-mix(in srgb, var(--dcolor) 78%, #1c0d07) 100%);
    --auth-grad-hover: linear-gradient(135deg, color-mix(in srgb, var(--dcolor) 88%, #ffffff) 0%, var(--dcolor) 100%);
    --auth-gold: color-mix(in srgb, var(--dcolor) 55%, #ffc27a);
    --auth-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --auth-ring: 0 0 0 0.2rem color-mix(in srgb, var(--dcolor) 22%, transparent);
}

/* ==========================================================================
   1. MODERN LOGIN  (/login  →  ACTIVE_login.php)
   ========================================================================== */

/* Background overlay — was purple/blue, now Baseet espresso-orange */
.modern-login-section .modern-login-overlay {
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--dcolor) 58%, rgba(20, 10, 6, 0.92)) 0%,
            color-mix(in srgb, var(--dcolor) 26%, rgba(12, 8, 6, 0.94)) 100%) !important;
}

/* Card — refined shadow with a warm brand cast */
.modern-login-card {
    box-shadow: 0 30px 70px -28px color-mix(in srgb, var(--dcolor) 32%, rgba(0, 0, 0, 0.55));
    border-top: 3px solid var(--dcolor);
}

/* Inputs — brand focus ring */
.modern-login-card .form-control:focus,
.modern-login-card .modern-control:focus {
    border-color: var(--dcolor) !important;
    box-shadow: var(--auth-ring) !important;
}
.modern-login-card .modern-addon .fa { transition: color 0.2s ease; }
.modern-login-card .input-group:focus-within .modern-addon .fa { color: var(--dcolor) !important; }

/* Links (Bootstrap .text-primary carries !important, so beat it on specificity) */
.modern-login-card .text-primary,
.modern-login-card .forgot-link,
.modern-login-card .signup-link {
    color: var(--dcolor) !important;
}
.modern-login-card .forgot-link:hover,
.modern-login-card .signup-link:hover {
    color: color-mix(in srgb, var(--dcolor) 80%, #000) !important;
}

/* Divider label */
.login-divider span { color: color-mix(in srgb, var(--dcolor) 45%, #8a8a8a); }

/* Role-switch pills (Staff / Customer / Delivery).
   On the dark espresso band a translucent bg + orange text was unreadable, so use
   a SOLID cream pill with deep-brand text + brand border → inverts to brand fill on
   hover. Legible in both EN and AR, light or dark theme. */
.modern-others-login .badge {
    background: var(--cream, #F9F9EE) !important;
    color: color-mix(in srgb, var(--dcolor) 82%, #000) !important;
    border: 1px solid color-mix(in srgb, var(--dcolor) 45%, transparent) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    transition: all 0.28s var(--auth-ease);
}
.modern-others-login .badge i {
    color: var(--dcolor) !important;
}
.modern-others-login .badge:hover {
    background: var(--dcolor) !important;
    color: var(--cream, #F9F9EE) !important;
    border-color: var(--dcolor) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--dcolor) 40%, transparent);
}
.modern-others-login .badge:hover i {
    color: var(--cream, #F9F9EE) !important;
}

/* Demo credential buttons */
.demo-login-area .loginBTN {
    border-color: color-mix(in srgb, var(--dcolor) 45%, transparent) !important;
    color: var(--dcolor) !important;
}
.demo-login-area .loginBTN:hover {
    background: var(--dcolor) !important;
    color: #fff !important;
}

/* Google button — keep Google identity, add a subtle brand hover edge */
.social-login-area #custom-google-login-btn:hover,
.social-login-area .btn:hover {
    border-color: color-mix(in srgb, var(--dcolor) 40%, transparent);
}

/* ==========================================================================
   2. STAFF / CUSTOMER / DELIVERY LOGIN  (loginWrap variant + auth_left panel)
   ========================================================================== */

/* Overlay warmed toward brand (keeps theme-based --after-bg-color base) */
.login_wrapper.loginWrap:after {
    background:
        linear-gradient(160deg,
            color-mix(in srgb, var(--dcolor) 30%, var(--after-bg-color)) 0%,
            color-mix(in srgb, var(--dcolor) 12%, var(--after-bg-color)) 100%) !important;
}

/* Card top accent */
._form_login { border-top: 3px solid var(--dcolor); }

/* Left content panel (auth_left.php) — warm brand tint over the banner image */
.left_login_page.login_banner { position: relative; }
.left_login_page.login_banner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(160deg,
        color-mix(in srgb, var(--dcolor) 48%, transparent) 0%,
        color-mix(in srgb, var(--dcolor) 16%, rgba(10, 6, 5, 0.35)) 100%);
    pointer-events: none;
}
.left_login_page .left_top_login { position: relative; z-index: 1; }
.left_login_page .left_top_login h4 {
    color: #fff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
.left_login_page .left_footer ul li a {
    transition: color 0.25s var(--auth-ease), transform 0.25s var(--auth-ease);
}
.left_login_page .left_footer ul li a:hover { transform: translateY(-2px); }

/* OTP — inputs focus + resend accent (icons/save already use var(--dcolor)) */
.otpFields input:focus {
    border-color: var(--dcolor) !important;
    box-shadow: var(--auth-ring) !important;
}
a.resend-otp:hover { color: var(--dcolor); }
.otpModal .otp_icon { background: var(--dcolor); }

/* ==========================================================================
   3. SHARED SUBMIT BUTTON  (the class that renders Bootstrap-blue today)
   Hooks across every auth view: ._signIn_btn (+ .btn-primary .modern-submit-btn
   on /login) and .btn-info variant on staff/otp. Force the Baseet gradient.
   ========================================================================== */
.modern-login-card ._signIn_btn,
.modern-login-card .modern-submit-btn,
.modern-login-section .btn-primary._signIn_btn,
.login_wrapper ._signIn_btn,
.loginWrap ._signIn_btn,
button.btn.btn-info._signIn_btn,
.topSigin .btn-info,
.login_wrapper .btn-info,
button.btn.otpSaveBtn {
    background: var(--auth-grad) !important;
    border: 1px solid transparent !important;
    color: #fff !important;
    box-shadow: 0 10px 26px color-mix(in srgb, var(--dcolor) 30%, transparent);
    transition: all 0.3s var(--auth-ease) !important;
}
.modern-login-card ._signIn_btn:hover,
.modern-login-card .modern-submit-btn:hover,
.modern-login-section .btn-primary._signIn_btn:hover,
.login_wrapper ._signIn_btn:hover,
.loginWrap ._signIn_btn:hover,
button.btn.btn-info._signIn_btn:hover,
.topSigin .btn-info:hover,
.login_wrapper .btn-info:hover,
button.btn.otpSaveBtn:hover {
    background: var(--auth-grad-hover) !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 16px 34px color-mix(in srgb, var(--dcolor) 42%, transparent);
}

/* ==========================================================================
   4. SIGNUP  (/sign-up  →  ACTIVE_signup.php, self-contained teal/indigo theme)
   Rebrand by re-pointing its palette vars to brand (they cascade to accents,
   button hover, focus border, checkbox, label icons via inheritance), then
   override the two hardcoded (non-var) backgrounds explicitly.
   ========================================================================== */
section.signup__section {
    --teal-1: var(--dcolor);
    --teal-2: color-mix(in srgb, var(--dcolor) 52%, #ffc27a);
    --indigo-1: color-mix(in srgb, var(--dcolor) 58%, #2a0f06);
    --indigo-2: color-mix(in srgb, var(--dcolor) 32%, #170a05);
    --border-focus: color-mix(in srgb, var(--dcolor) 60%, #ffc27a);
}

/* Animated background gradient — override fully (base has a hardcoded #3a3fb0
   indigo radial + an !important) */
.signup__section .bg-gradient {
    background:
        radial-gradient(60% 50% at 12% 10%, var(--auth-gold) 0%, transparent 50%),
        radial-gradient(55% 60% at 92% 88%, color-mix(in srgb, var(--dcolor) 70%, #2a0f06) 0%, transparent 55%),
        linear-gradient(150deg, var(--dcolor) 0%, color-mix(in srgb, var(--dcolor) 55%, #24100a) 50%, color-mix(in srgb, var(--dcolor) 28%, #150a05) 100%) !important;
    background-size: 140% 140% !important;
}

/* Submit button — hardcoded teal→indigo gradient replaced with brand */
.signup__section .signup-btn {
    background: var(--auth-grad) !important;
}
.signup__section .signup-btn:hover {
    box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--dcolor) 55%, transparent);
}
.signup__section .signup-btn .btn-loader {
    border-color: rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
}

/* Input focus glow (base box-shadow is a hardcoded teal rgba) */
.signup__section .input-wrap input:focus {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--dcolor) 20%, transparent) !important;
}

/* ==========================================================================
   5. HEADINGS / MISC brand accents
   ========================================================================== */
.modern-login-card .login-header .heading { letter-spacing: -0.01em; }
.signup__section .form-head h2 { color: #fff; }

/* ==========================================================================
   6.  FULL RTL LAYER  ([dir="rtl"] — base auth CSS has none)
   Bootstrap-rtl.css (loaded in RTL) handles Bootstrap utilities/grid; below we
   flip the custom bare left/right, translate offsets, and switch Arabic type.
   ========================================================================== */

/* ---- Arabic typography ---- */
[dir="rtl"] .modern-login-card,
[dir="rtl"] .modern-others-login,
[dir="rtl"] .signup__section,
[dir="rtl"] .signup-form,
[dir="rtl"] .login_wrapper,
[dir="rtl"] .left_login_page,
[dir="rtl"] .otpModal {
    font-family: 'Tajawal', 'Cairo', 'Poppins', sans-serif;
}
/* Signup uses a Latin serif display for its heading — swap for Arabic */
[dir="rtl"] .signup__section .form-head h2,
[dir="rtl"] .signup__section .display,
[dir="rtl"] .left_login_page h4 {
    font-family: 'Tajawal', 'Cairo', sans-serif !important;
    letter-spacing: normal !important;
}

/* ---- Signup layout mirroring (all bare left/right from its inline styles) ---- */
[dir="rtl"] .signup__section .social-dock {
    left: auto;
    right: 40px;
}
[dir="rtl"] .signup__section .stage {
    padding: 90px 140px 30px 32px; /* was 90px 32px 30px 140px */
}
[dir="rtl"] .signup__section .toggle-eye {
    right: auto;
    left: 12px;
}
[dir="rtl"] .signup__section .field label { text-align: right; }
[dir="rtl"] .signup-form { text-align: right; }

@media (max-width: 900px) {
    [dir="rtl"] .signup__section .social-dock {
        right: 0;
        left: 0;
    }
    [dir="rtl"] .signup__section .stage {
        padding: 100px 20px 58px; /* symmetric on mobile */
    }
}

/* ---- Modern login mirroring ---- */
[dir="rtl"] .modern-input-group .passwordToggle {
    right: auto;
    left: 12px;
}
/* Directional arrow inside the submit button points the correct way in RTL */
[dir="rtl"] .modern-submit-btn .fa-arrow-right,
[dir="rtl"] ._signIn_btn .fa-arrow-right {
    transform: scaleX(-1);
}

/* ---- Staff / OTP mirroring (from style_login_block.css) ---- */
[dir="rtl"] span.input-group-addon.fa_icon {
    border-right: 1px solid var(--border-color);
    border-left: 0;
}
[dir="rtl"] span.otp_icon {
    border-radius: 0 2px 2px 0;
}
[dir="rtl"] .form-group.guestPhone {
    padding-left: 0;
    padding-right: 15px;
}
/* Keep OTP digit boxes in visual LTR order even under RTL */
[dir="rtl"] .otpFields {
    direction: ltr;
}

/* ---- Left panel already right-aligns naturally in RTL; keep overlay logical ---- */
/* (login_banner::before uses inset:0 — mirrors automatically) */

/* ==========================================================================
   7. Small-screen polish
   ========================================================================== */
@media (max-width: 575.98px) {
    .modern-others-login .badge { font-size: 0.72rem; }
    .modern-login-card { border-top-width: 3px; }
}