/*
 * iDeliver brand stylesheet — shared across:
 *   /                    (landing)
 *   /login/{tab}         (admin / vendor / employee login)
 *   /vendor/apply        (store registration)
 *   /deliveryman/apply   (rider registration)
 *
 * Brand tokens fall back to iDeliver defaults when Business Settings
 * does not provide a primary color. The login page intentionally uses
 * a black + yellow theme (see :root.login-shell overrides below).
 */

:root {
    /*
     * Design tokens — single source of truth for every web surface
     * (landing, admin/vendor login, and the WhatsApp/Telegram Magic Link PWA).
     * Colours target WCAG 2.1 AA (>= 4.5:1 for body text).
     *   #1a1a1a on #f4f7f6  -> ~15:1  (body text)
     *   #ffffff on #02773f  -> ~5.3:1 (text/icons on the primary button)
     */
    --idv-black: #0c0f0d;
    --idv-ink: #1a1a1a;          /* primary text — deep charcoal */
    --idv-ink-2: #283129;
    --idv-muted: #5b665f;        /* secondary text — darkened for AA on light bg */
    --idv-line: #e0e4e2;         /* hairline borders (replace blurry shadows) */
    --idv-line-2: #eef2f0;
    --idv-bg: #f4f7f6;           /* neutral page background (easier than pure white) */
    --idv-card: #ffffff;
    --idv-on-primary: #ffffff;   /* contrast colour for text/icons on the brand colour */
    --idv-green: #039d55;
    --idv-green-strong: #02773f; /* AA-safe green for text/buttons on light bg */
    --idv-green-2: #00d571;
    --idv-yellow: #ffd60a;
    --idv-yellow-2: #ffb703;
    --idv-yellow-ink: #1a1500;
    --idv-radius: 14px;
    --idv-radius-lg: 22px;
    --idv-shadow: 0 18px 40px -22px rgba(12, 15, 13, 0.35);
    --idv-shadow-soft: 0 8px 24px -10px rgba(12, 15, 13, 0.18);
}

/* ---------- Landing layout base ---------- */
body.idv-landing-body {
    background: var(--idv-bg);
    color: var(--idv-ink);
    font-family: 'Inter', 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* Re-skin the shared landing layout header/footer without changing routes or dropdowns. */
body.idv-landing-body header {
    position: sticky;
    top: 0;
    z-index: 1020;
    background: rgba(250, 253, 251, 0.88);
    border-bottom: 1px solid rgba(230, 235, 232, 0.82);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

body.idv-landing-body .navbar-bottom {
    padding: 12px 0;
}

body.idv-landing-body .navbar-bottom-wrapper {
    min-height: 54px;
    gap: 14px;
}

body.idv-landing-body .logo img,
body.idv-landing-body .footer-logo img {
    max-height: 42px;
    width: auto;
    object-fit: contain;
}

body.idv-landing-body .menu {
    gap: 4px;
}

body.idv-landing-body .menu li a {
    color: var(--idv-ink-2);
    font-weight: 700;
    font-size: 14px;
    padding: 10px 12px;
    border-radius: 999px;
    transition: background .15s ease, color .15s ease;
}

body.idv-landing-body .menu li a.active,
body.idv-landing-body .menu li a:hover {
    background: #fff;
    color: var(--idv-black);
    box-shadow: var(--idv-shadow-soft);
}

body.idv-landing-body .dropdown--btn,
body.idv-landing-body .header--btn {
    border-radius: 999px !important;
    border: 1px solid var(--idv-line) !important;
    background: #fff !important;
    color: var(--idv-ink) !important;
    font-weight: 700;
    min-height: 42px;
}

body.idv-landing-body .cmn--btn {
    border-radius: 12px;
    background: var(--idv-yellow);
    color: var(--idv-yellow-ink);
    font-weight: 800;
    border: 0;
}

body.idv-landing-body .cmn--btn:hover {
    background: var(--idv-yellow-2);
    color: var(--idv-yellow-ink);
}

body.idv-landing-body .dropdown-list {
    border: 1px solid var(--idv-line);
    border-radius: 14px;
    box-shadow: var(--idv-shadow-soft);
    overflow: hidden;
}

body.idv-landing-body footer {
    background: var(--idv-black);
}

body.idv-landing-body .newsletter-section {
    background: transparent;
}

body.idv-landing-body .newsletter-wrapper {
    border-radius: var(--idv-radius-lg);
    background: linear-gradient(135deg, var(--idv-yellow), var(--idv-yellow-2));
    box-shadow: var(--idv-shadow);
}

body.idv-landing-body .newsletter-content .title,
body.idv-landing-body .newsletter-content .text {
    color: var(--idv-yellow-ink) !important;
}

body.idv-landing-body .input--grp {
    background: #fff;
    border-radius: 999px;
    border: 1px solid rgba(12, 15, 13, .1);
}

body.idv-landing-body .footer-bottom {
    background: var(--idv-black);
}

body.idv-landing-body .footer-widget .txt,
body.idv-landing-body .footer-widget a,
body.idv-landing-body .copyright {
    color: rgba(255,255,255,.72) !important;
}

body.idv-landing-body .footer-widget .subtitle {
    color: #fff !important;
}

.idv-section {
    padding: clamp(48px, 6vw, 96px) 0;
}

.idv-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(3, 157, 85, 0.08);
    color: var(--idv-green);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.idv-h1 {
    font-size: clamp(34px, 5vw, 64px);
    line-height: 1.04;
    font-weight: 800;
    color: var(--idv-black);
    letter-spacing: -0.02em;
}

.idv-h2 {
    font-size: clamp(26px, 3vw, 40px);
    line-height: 1.15;
    font-weight: 800;
    color: var(--idv-black);
    letter-spacing: -0.015em;
}

.idv-h3 {
    font-size: clamp(20px, 2vw, 24px);
    font-weight: 700;
    color: var(--idv-ink);
}

.idv-lead {
    font-size: clamp(15px, 1.4vw, 18px);
    line-height: 1.6;
    color: var(--idv-muted);
}

.idv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 15px;
    border: 1px solid transparent;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
    cursor: pointer;
    text-decoration: none;
}

.idv-btn:hover { transform: translateY(-1px); text-decoration: none; }

.idv-btn-primary {
    background: var(--idv-black);
    color: #fff;
}
.idv-btn-primary:hover { background: #000; color: #fff; box-shadow: var(--idv-shadow); }

.idv-btn-yellow {
    background: var(--idv-yellow);
    color: var(--idv-yellow-ink);
    box-shadow: 0 10px 30px -12px rgba(255, 214, 10, 0.6);
}
.idv-btn-yellow:hover { background: var(--idv-yellow-2); color: var(--idv-yellow-ink); }

.idv-btn-green {
    background: var(--idv-green);
    color: #fff;
}
.idv-btn-green:hover { background: #028347; color: #fff; }

.idv-btn-ghost {
    background: transparent;
    color: var(--idv-ink);
    border-color: var(--idv-line);
}
.idv-btn-ghost:hover { background: #fff; border-color: var(--idv-ink); color: var(--idv-ink); }

/* Brand glyph (used in login + landing nav as a fallback when logo is missing). */
.idv-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--idv-black);
    color: var(--idv-yellow);
    font-weight: 800;
    font-size: 22px;
    letter-spacing: -0.04em;
    box-shadow: var(--idv-shadow-soft);
}

/* ---------- Landing — hero ---------- */
.idv-hero {
    position: relative;
    padding: clamp(60px, 8vw, 120px) 0 clamp(60px, 8vw, 100px);
    background:
        radial-gradient(60% 60% at 20% 0%, rgba(3, 157, 85, 0.10), transparent 60%),
        radial-gradient(50% 50% at 90% 10%, rgba(255, 214, 10, 0.12), transparent 60%),
        var(--idv-bg);
    overflow: hidden;
}

.idv-hero .idv-h1 strong { color: var(--idv-green); font-weight: 800; }
.idv-hero .idv-cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

.idv-hero-card {
    background: #fff;
    border-radius: var(--idv-radius-lg);
    padding: 28px;
    box-shadow: var(--idv-shadow);
    border: 1px solid var(--idv-line);
}

/* ---------- Landing — module pills ---------- */
.idv-modules {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-top: 32px;
}

.idv-module-card {
    background: #fff;
    border: 1px solid var(--idv-line);
    border-radius: var(--idv-radius);
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.idv-module-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--idv-shadow);
    border-color: var(--idv-green);
}
.idv-module-card img { width: 44px; height: 44px; object-fit: contain; }
.idv-module-card .title { font-weight: 700; color: var(--idv-ink); }
.idv-module-card .desc { font-size: 13px; color: var(--idv-muted); }

/* ---------- Landing — feature / testimonial / zone cards ---------- */
.idv-card {
    background: #fff;
    border: 1px solid var(--idv-line);
    border-radius: var(--idv-radius);
    padding: 24px;
    height: 100%;
}
.idv-card-elevated { box-shadow: var(--idv-shadow-soft); }

.idv-stat {
    text-align: center;
    padding: 24px 18px;
    border-radius: var(--idv-radius);
    background: #fff;
    border: 1px solid var(--idv-line);
}
.idv-stat .n {
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 800;
    color: var(--idv-green);
    line-height: 1;
}
.idv-stat .l { color: var(--idv-muted); margin-top: 6px; font-size: 14px; }

/* ---------- Apply (vendor / driver) ---------- */
.idv-apply-hero {
    background: linear-gradient(135deg, var(--idv-black) 0%, #1d2520 100%);
    color: #fff;
    padding: clamp(48px, 6vw, 80px) 0;
    border-radius: 0 0 36px 36px;
    margin-bottom: -64px;
}
.idv-apply-hero .idv-h1 { color: #fff; }
.idv-apply-hero .idv-lead { color: rgba(255,255,255,0.78); }
.idv-apply-hero .idv-pill {
    display: inline-flex; gap: 6px; align-items: center;
    background: rgba(255, 214, 10, 0.15);
    color: var(--idv-yellow);
    padding: 6px 14px; border-radius: 999px;
    font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.idv-apply-card {
    background: #fff;
    border: 1px solid var(--idv-line);
    border-radius: var(--idv-radius);
    box-shadow: var(--idv-shadow-soft);
    margin-bottom: 20px;
    overflow: hidden;
}
.idv-apply-card > .card-header,
.idv-apply-card > .idv-apply-card__head {
    background: var(--idv-line-2);
    border-bottom: 1px solid var(--idv-line);
    padding: 16px 22px;
}
.idv-apply-card > .card-header h5,
.idv-apply-card > .idv-apply-card__head h5 {
    margin: 0; font-weight: 700; color: var(--idv-ink); font-size: 16px;
}
.idv-apply-card > .card-body,
.idv-apply-card > .idv-apply-card__body { padding: 22px; }

/* ---------- LOGIN (black + yellow theme) ---------- */
.idv-login-shell {
    --idv-login-bg: #0a0d0b;
    --idv-login-panel: #11151329;
    --idv-login-card: #ffffff;
    --idv-login-accent: var(--idv-yellow);
    --idv-login-text: #f7f7f1;
    --idv-login-muted: #aab2ad;

    min-height: 100vh;
    background:
        radial-gradient(60% 60% at 80% 0%, rgba(255, 214, 10, 0.18), transparent 60%),
        radial-gradient(50% 50% at 0% 100%, rgba(3, 157, 85, 0.18), transparent 60%),
        var(--idv-login-bg);
    color: var(--idv-login-text);
    display: flex;
    align-items: stretch;
    font-family: 'Inter', 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.idv-login-shell .idv-login-grid {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    min-height: 100vh;
}

@media (min-width: 992px) {
    .idv-login-shell .idv-login-grid {
        grid-template-columns: 1.05fr 1fr;
    }
}

.idv-login-aside {
    position: relative;
    padding: 40px clamp(24px, 4vw, 64px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}

.idv-login-aside::before {
    content: '';
    position: absolute;
    inset: -1px;
    background:
        radial-gradient(35% 30% at 30% 30%, rgba(255, 214, 10, 0.20), transparent 70%),
        radial-gradient(40% 35% at 80% 80%, rgba(3, 157, 85, 0.22), transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.idv-login-aside > * { position: relative; z-index: 1; }

.idv-login-brand {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: var(--idv-login-text);
    text-decoration: none;
}
.idv-login-brand img {
    height: 40px; width: auto; max-width: 180px; object-fit: contain;
    background: #fff; padding: 6px 10px; border-radius: 10px;
}

.idv-login-aside-headline {
    margin-top: auto;
    margin-bottom: auto;
    max-width: 540px;
}

.idv-login-aside-headline h1 {
    font-size: clamp(32px, 4.2vw, 52px);
    line-height: 1.06;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: #fff;
}

.idv-login-aside-headline h1 strong { color: var(--idv-yellow); font-weight: 800; }

.idv-login-aside-headline p {
    color: var(--idv-login-muted);
    font-size: 17px;
    line-height: 1.6;
    margin-top: 18px;
    max-width: 460px;
}

.idv-login-aside-features {
    display: flex; flex-wrap: wrap; gap: 10px;
    margin-top: 24px;
}
.idv-login-aside-features span {
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #f7f7f1;
}

.idv-login-aside-footer {
    color: var(--idv-login-muted);
    font-size: 13px;
}

.idv-login-form-wrap {
    background: #fff;
    color: var(--idv-ink);
    padding: clamp(28px, 4vw, 56px) clamp(24px, 4vw, 64px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.idv-login-card {
    width: 100%;
    max-width: 460px;
}

.idv-login-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 6px;
    background: var(--idv-line-2);
    border-radius: 14px;
    margin-bottom: 22px;
}
.idv-login-tabs a {
    text-align: center;
    padding: 10px 4px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    color: var(--idv-ink-2);
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.idv-login-tabs a:hover {
    color: var(--idv-black);
    text-decoration: none;
}
.idv-login-tabs a.active {
    background: var(--idv-black);
    color: var(--idv-yellow);
    box-shadow: var(--idv-shadow-soft);
}
.idv-login-tabs a.disabled-tab {
    cursor: default;
    opacity: 0.85;
}

.idv-login-card h2 {
    font-size: 28px;
    font-weight: 800;
    color: var(--idv-black);
    letter-spacing: -0.015em;
    margin-bottom: 4px;
}

.idv-login-card .idv-login-card-sub {
    color: var(--idv-muted);
    font-size: 14px;
    margin-bottom: 22px;
}

.idv-login-card label {
    font-weight: 600;
    font-size: 13px;
    color: var(--idv-ink-2);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.idv-login-card .form-control,
.idv-login-card .form-control:focus {
    height: 48px;
    border-radius: 12px;
    border: 1px solid var(--idv-line);
    background: var(--idv-bg);
    font-size: 15px;
    color: var(--idv-ink);
    box-shadow: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.idv-login-card .form-control:focus {
    background: #fff;
    border-color: var(--idv-black);
}

.idv-login-card .input-group-merge .input-group-text {
    background: var(--idv-bg);
    border: 1px solid var(--idv-line);
    border-left: 0;
    border-radius: 0 12px 12px 0;
    color: var(--idv-muted);
}
.idv-login-card .input-group-merge .form-control { border-right: 0; border-radius: 12px 0 0 12px; }

.idv-login-card .idv-submit {
    width: 100%;
    height: 50px;
    border-radius: 12px;
    background: var(--idv-yellow);
    color: var(--idv-yellow-ink);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.02em;
    border: 0;
    box-shadow: 0 12px 28px -10px rgba(255, 214, 10, 0.55);
    transition: background 0.15s ease, transform 0.15s ease;
}
.idv-login-card .idv-submit:hover {
    background: var(--idv-yellow-2);
    color: var(--idv-yellow-ink);
    transform: translateY(-1px);
}

.idv-login-card .idv-forgot {
    background: transparent;
    border: 0;
    color: var(--idv-black);
    font-weight: 600;
    font-size: 13px;
    padding: 0;
    cursor: pointer;
}
.idv-login-card .idv-forgot:hover { text-decoration: underline; }

.idv-login-card .idv-row-aux {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-top: 6px; margin-bottom: 18px;
}

.idv-login-card .idv-checkbox {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; color: var(--idv-ink-2);
    cursor: pointer;
}
.idv-login-card .idv-checkbox input {
    accent-color: var(--idv-yellow);
    width: 16px; height: 16px;
}

.idv-login-driver-block {
    background: var(--idv-line-2);
    border: 1px dashed var(--idv-line);
    border-radius: var(--idv-radius);
    padding: 22px;
    text-align: center;
    color: var(--idv-ink-2);
}
.idv-login-driver-block h3 { font-size: 18px; font-weight: 700; margin-bottom: 6px; color: var(--idv-black); }
.idv-login-driver-block p { color: var(--idv-muted); font-size: 14px; margin-bottom: 16px; }

.idv-login-driver-block .idv-store-btns {
    display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
    margin-top: 14px;
}

.idv-login-demo-creds {
    margin-top: 22px;
    background: var(--idv-line-2);
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 13px;
    color: var(--idv-ink-2);
}
.idv-login-demo-creds .idv-cred-row {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
}

.idv-version-badge {
    position: absolute; top: 18px; right: 22px;
    background: rgba(0, 0, 0, 0.08);
    color: var(--idv-ink-2);
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Re-skin the legacy forget-password modals to match the new look. */
#forgetPassModal .modal-content,
#forgetPassModal1 .modal-content,
#successMailModal .modal-content {
    border-radius: 18px;
    border: 0;
    box-shadow: var(--idv-shadow);
}
#forgetPassModal .btn--primary,
#forgetPassModal1 .btn--primary,
#successMailModal .btn--primary {
    background: var(--idv-black); border-color: var(--idv-black); color: var(--idv-yellow);
    border-radius: 12px; padding: 12px 18px; font-weight: 700;
}
#forgetPassModal .btn--primary:hover,
#forgetPassModal1 .btn--primary:hover,
#successMailModal .btn--primary:hover { background: #000; color: var(--idv-yellow); }

/* Captcha box restyle */
.idv-login-card #reload-captcha {
    margin: 14px -4px 4px;
}
.idv-login-card #reload-captcha .form-control {
    background: var(--idv-bg);
    border: 1px solid var(--idv-line);
}
.idv-login-card .reloadCaptcha {
    cursor: pointer; color: var(--idv-muted);
}
.idv-login-card .reloadCaptcha:hover { color: var(--idv-black); }