/* =========================================================
   Sprint 60 — Public layout blue theme harmonization
   Deep blue nav/footer · soft page canvas · Sprint 59 tokens
   ========================================================= */

/* ----- Public shell (sticky header preserved) ----- */

.lyt-public-body {
    background: var(--public-page-bg);
    color: var(--text-main);
}

.main-header,
.lyt-public-header {
    position: sticky;
    top: 0;
    background: var(--public-nav-gradient) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 2px 16px rgba(15, 59, 130, 0.22);
}

.main-header.scrolled,
.lyt-public-header.scrolled {
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 2px 12px rgba(15, 59, 130, 0.28);
}

/* Logo readable on deep blue bar */
.main-header .wr-brand-logo--header,
.lyt-public-header .wr-brand-logo--header {
    padding: 0.2rem 0.35rem;
    border-radius: var(--radius-sm, 8px);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.14);
}

/* Desktop nav — white text */
.main-header .nav-link-desktop,
.main-header .desktop-nav > a,
.main-header .nav-parent-btn,
.lyt-public-header .nav-link-desktop,
.lyt-public-header .desktop-nav > a,
.lyt-public-header .nav-parent-btn {
    color: var(--public-nav-text) !important;
}

.main-header .nav-link-desktop::after,
.main-header .desktop-nav > a::after,
.lyt-public-header .nav-link-desktop::after,
.lyt-public-header .desktop-nav > a::after {
    background: rgba(255, 255, 255, 0.85);
}

.main-header .nav-link-desktop:hover,
.main-header .desktop-nav > a:hover,
.main-header .nav-parent-btn:hover,
.lyt-public-header .nav-link-desktop:hover,
.lyt-public-header .desktop-nav > a:hover,
.lyt-public-header .nav-parent-btn:hover {
    color: var(--white) !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

.main-header .nav-link-desktop.active,
.main-header .desktop-nav > a.active,
.lyt-public-header .nav-link-desktop.active,
.lyt-public-header .desktop-nav > a.active {
    color: var(--white) !important;
    background: rgba(255, 255, 255, 0.12) !important;
    font-weight: 700;
}

.main-header .nav-caret,
.lyt-public-header .nav-caret {
    color: var(--public-nav-text-muted);
}

/* Header auth links */
.main-header .auth-links .auth-link,
.main-header .auth-links .auth-button,
.lyt-public-header .auth-links .auth-link,
.lyt-public-header .auth-links .auth-button {
    color: var(--public-nav-text) !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
    background: rgba(255, 255, 255, 0.06);
}

.main-header .auth-links .auth-link:hover,
.main-header .auth-links .auth-button:hover,
.lyt-public-header .auth-links .auth-link:hover,
.lyt-public-header .auth-links .auth-button:hover {
    color: var(--white) !important;
    background: rgba(255, 255, 255, 0.14) !important;
}

.main-header .hamburger-btn,
.lyt-public-header .hamburger-btn {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.28) !important;
    color: var(--white) !important;
}

.main-header .hamburger-btn:hover,
.lyt-public-header .hamburger-btn:hover {
    background: rgba(255, 255, 255, 0.18) !important;
    border-color: rgba(255, 255, 255, 0.38) !important;
}

.btn-book {
    background: linear-gradient(135deg, #1976D2 0%, #0D47A1 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22), var(--shadow-brand);
    color: var(--white);
}

.btn-book:hover {
    background: linear-gradient(135deg, #1976D2 0%, #0D47A1 100%) !important;
    filter: brightness(1.06);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28), var(--shadow-brand);
}

.btn-join-driver {
    background: var(--white) !important;
    color: var(--primary, #1976D2) !important;
    border: 1.5px solid var(--border-card, #D9E3F0) !important;
    box-shadow: 0 2px 8px rgba(15, 59, 130, 0.12);
}

.btn-join-driver:hover {
    background: var(--primary-soft, #EDF5FF) !important;
    border-color: rgba(25, 118, 210, 0.4) !important;
    color: var(--primary-dark, #0D47A1) !important;
}

/* ----- Deep blue footer ----- */

.main-footer,
.lyt-public-footer {
    background: var(--public-nav-gradient) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: var(--public-nav-text);
}

.footer-logo .wr-brand-logo--footer {
    padding: 0.2rem 0.35rem;
    border-radius: var(--radius-sm, 8px);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.footer-text {
    color: var(--public-nav-text-muted) !important;
}

.footer-links-group h4 {
    color: rgba(255, 255, 255, 0.55) !important;
}

.footer-links a {
    color: var(--public-nav-text) !important;
}

.footer-links a:hover {
    color: var(--white) !important;
}

.footer-socials a {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: var(--white) !important;
}

.footer-socials a:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    color: var(--white) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.footer-bottom,
.lyt-public-footer-bottom {
    border-top-color: rgba(255, 255, 255, 0.12) !important;
}

.footer-copy {
    color: rgba(255, 255, 255, 0.5) !important;
}

.footer-links-legal .footer-link-animated {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    color: var(--public-nav-text) !important;
}

.footer-links-legal .footer-link-animated i {
    color: rgba(255, 255, 255, 0.85) !important;
}

.footer-links-legal .footer-link-animated:hover {
    background: rgba(255, 255, 255, 0.16) !important;
    color: var(--white) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Page-specific shell overrides (beat legacy light header rules) */

body:has(.home-premium) .lyt-public-body {
    background: var(--public-page-bg) !important;
}

body:has(.home-premium) .lyt-public-header {
    background: var(--public-nav-gradient) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 2px 16px rgba(15, 59, 130, 0.22) !important;
}

body:has(.home-premium) .nav-link-desktop.active,
body:has(.home-premium) .desktop-nav > a.active {
    color: var(--white) !important;
}

body:has(.drivers-apply-premium) .lyt-public-body {
    background: var(--public-page-bg) !important;
}

body:has(.drivers-apply-premium) .lyt-public-header {
    background: var(--public-nav-gradient) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 2px 16px rgba(15, 59, 130, 0.22) !important;
}

body:has(.auth-consumer) .lyt-public-body {
    background: var(--public-page-bg) !important;
}

body:has(.auth-consumer) .lyt-public-header {
    background: var(--public-nav-gradient) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 2px 16px rgba(15, 59, 130, 0.22) !important;
}

/* ----- Home page ----- */

.home-hero--open {
    background:
        radial-gradient(ellipse 70% 75% at 90% 40%, rgba(25, 118, 210, 0.12) 0%, transparent 55%),
        radial-gradient(ellipse 50% 55% at 5% 70%, rgba(100, 181, 246, 0.14) 0%, transparent 50%),
        linear-gradient(180deg, var(--primary-soft) 0%, var(--white) 62%, var(--public-page-bg) 100%) !important;
}

/* HOTFIX: solid readable accent — gradient text caused blue background block on reload */
.home-hero .home-hero-title .home-hero-title__accent,
.home-hero-title .home-hero-title__accent,
#home-hero-title .home-hero-title__accent {
    background: transparent !important;
    background-image: none !important;
    color: #2563EB !important;
    -webkit-text-fill-color: #2563EB !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    box-shadow: none !important;
    animation: none !important;
}

.home-hero .home-hero-title .home-hero-title__accent::before,
.home-hero .home-hero-title .home-hero-title__accent::after,
.home-hero-title .home-hero-title__accent::before,
.home-hero-title .home-hero-title__accent::after,
#home-hero-title .home-hero-title__accent::before,
#home-hero-title .home-hero-title__accent::after {
    display: none !important;
    content: none !important;
    background: none !important;
    animation: none !important;
}

.home-trust-chips li {
    border-color: var(--border-soft);
}

.home-btn--primary {
    background: var(--primary-gradient) !important;
    border-color: transparent;
    box-shadow: var(--shadow-brand);
}

.home-btn--primary:hover {
    background: var(--primary-hover) !important;
    color: var(--white);
    box-shadow: var(--shadow-brand);
}

.home-btn--outline {
    border-color: var(--border-card);
    color: var(--primary-dark);
    background: var(--white);
}

.home-btn--outline:hover {
    border-color: var(--primary);
    background: var(--primary-soft);
    color: var(--primary-dark);
}

.home-stats,
.home-section,
.home-card,
.home-cta-card {
    border-color: var(--border-card) !important;
    box-shadow: var(--shadow-sm);
}

.home-stat:hover {
    background: linear-gradient(180deg, var(--white) 0%, var(--primary-soft) 100%) !important;
}

.home-stat-icon-wrap {
    background: linear-gradient(145deg, var(--primary-soft), var(--primary-muted)) !important;
    border-color: var(--border-soft) !important;
}

.home-section:hover,
.home-card:hover {
    border-color: var(--border-soft) !important;
    box-shadow: var(--shadow-md);
}

.home-premium__body {
    background: transparent;
}

.home-cta-card--light {
    background: linear-gradient(180deg, var(--white) 0%, var(--primary-soft) 100%) !important;
}

.home-cta-card--dark {
    background: linear-gradient(145deg, var(--dashboard-sidebar-bottom) 0%, var(--dashboard-sidebar-top) 55%, var(--primary-dark) 100%) !important;
}

/* App download section — color polish only */
.home-app-download,
.home-download-section {
    border-color: var(--border-card);
}

/* ----- Login / auth consumer ----- */

.auth-consumer {
    --auth-blue: var(--primary);
    --auth-blue-dark: var(--primary-dark);
    --auth-text: var(--text-main);
    --auth-muted: var(--text-muted);
    --auth-border: var(--border-card);
    --auth-bg: var(--public-page-bg);
    background: var(--public-page-bg) !important;
}

.auth-consumer__hero {
    background: linear-gradient(
        155deg,
        rgba(25, 118, 210, 0.1) 0%,
        rgba(255, 255, 255, 0.98) 48%,
        var(--primary-soft) 100%
    ) !important;
    border: 1px solid var(--border-card) !important;
    box-shadow: var(--shadow-sm);
}

.auth-consumer .auth-card__eyebrow,
.auth-consumer .auth-link {
    color: var(--primary);
}

.auth-consumer .btn-premium {
    background: var(--primary-gradient) !important;
    box-shadow: var(--shadow-brand);
}

.auth-consumer .btn-premium:hover:not(:disabled) {
    background: var(--primary-hover) !important;
    box-shadow: var(--shadow-brand);
    color: var(--white);
}

.auth-consumer .form-control-modern,
.auth-consumer .auth-field-wrap__input,
.auth-consumer .auth-password-wrap__input {
    border-color: var(--border-card);
}

.auth-consumer .form-control-modern:focus,
.auth-consumer .auth-password-wrap__input:focus,
.auth-consumer .auth-field-wrap__input:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px var(--primary-glow) !important;
}

.auth-consumer .form-control-modern:-webkit-autofill,
.auth-consumer .auth-field-wrap__input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--primary-soft) inset !important;
    box-shadow: 0 0 0 1000px var(--primary-soft) inset !important;
}

.auth-field-wrap:focus-within .auth-field-icon {
    color: var(--primary);
}

.auth-status {
    border-color: var(--border-card);
    box-shadow: var(--shadow-sm);
}

.auth-status__icon {
    background: var(--primary-soft);
    color: var(--primary);
}

/* ----- Driver apply wizard ----- */

.drivers-apply-premium .drvapp-head {
    border-color: var(--border-card);
    box-shadow: var(--shadow-sm);
}

.drivers-apply-premium .drvapp-head::after {
    background: linear-gradient(90deg, var(--dashboard-sidebar-top), var(--primary)) !important;
}

.drivers-apply-premium .drvapp-guidance,
.drivers-apply-premium .drvapp-benefits,
.drivers-apply-premium .drvapp-side-steps {
    border-color: var(--border-card);
    box-shadow: var(--shadow-sm);
}

.drivers-apply-premium .drvapp-card {
    border-color: var(--border-card) !important;
    box-shadow: var(--shadow-sm);
}

.drivers-apply-premium .stepper-circle {
    border-color: var(--border-card);
}

.drivers-apply-premium .stepper-line {
    background: var(--border-card);
}

.drivers-apply-premium .stepper-item.active .stepper-circle {
    border-color: var(--dashboard-sidebar-active) !important;
    background: var(--dashboard-sidebar-active) !important;
    box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.2);
}

.drivers-apply-premium .stepper-item.active .stepper-label {
    color: var(--primary) !important;
}

.drivers-apply-premium .drvapp-side-step.active {
    border-color: rgba(25, 118, 210, 0.22);
    background: var(--primary-soft);
}

.drivers-apply-premium .drvapp-side-step.active span {
    background: var(--dashboard-sidebar-active) !important;
    color: var(--white) !important;
}

.drivers-apply-premium .form-control-premium {
    border-color: var(--border-card);
}

.drivers-apply-premium .form-control-premium:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-glow);
}

.drivers-apply-premium .drvapp-btn--primary {
    background: var(--primary-gradient) !important;
    box-shadow: var(--shadow-brand);
}

.drivers-apply-premium .drvapp-btn--primary:hover {
    background: var(--primary-hover) !important;
    box-shadow: var(--shadow-brand);
}

.drivers-apply-premium .drvapp-btn--light {
    background: var(--primary-soft);
    border-color: var(--border-soft);
    color: var(--primary-dark);
}

.drivers-apply-premium .drvapp-info-note {
    background: var(--primary-soft);
    border-color: var(--border-soft);
}

.drivers-apply-premium .drvapp-req-grid li {
    background: var(--primary-soft);
    border-color: var(--border-soft);
}

.drivers-apply-premium #loading-overlay .drvapp-loading-text {
    color: var(--primary);
}

/* =========================================================
   Sprint 62 — Public mobile drawer modernization
   Shared via _NavigationMenu on Home, Login, Drivers/Apply
   ========================================================= */

.mobile-nav-backdrop {
    background: rgba(15, 59, 130, 0.42) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.mobile-nav-overlay {
    background: var(--dashboard-page-bg, #F4F7FB) !important;
    box-shadow: -10px 0 40px rgba(15, 59, 130, 0.18) !important;
}

.mobile-nav-header {
    background: linear-gradient(135deg, #0F4FA8 0%, #123B82 100%) !important;
}

.mobile-nav-title {
    color: var(--white);
    font-weight: 800;
}

.mobile-nav-overlay .nav-link-mobile.active,
.mobile-nav-overlay .submenu-mobile-link.active {
    background: var(--primary-soft, #EDF5FF) !important;
    border-color: rgba(25, 118, 210, 0.28) !important;
    color: var(--primary-dark) !important;
    font-weight: 700;
}

.mobile-nav-overlay .nav-link-mobile.active i,
.mobile-nav-overlay .submenu-mobile-link.active i {
    color: var(--primary);
}

.mobile-bottom {
    background: var(--primary-soft, #EDF5FF) !important;
    border-top-color: var(--border-card, #D9E3F0) !important;
}

.mobile-bottom .nav-link-mobile,
.mobile-bottom .nav-link-mobile-button {
    justify-content: center;
    background: var(--white) !important;
    border: 1.5px solid var(--border-card, #D9E3F0) !important;
    color: var(--primary-dark) !important;
    font-weight: 700;
    border-radius: 12px;
    min-height: var(--tap-min);
}

.mobile-bottom .nav-link-mobile:hover,
.mobile-bottom .nav-link-mobile-button:hover {
    background: var(--white) !important;
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}

.mobile-bottom form {
    margin: 0;
    width: 100%;
}

.mobile-book-btn {
    background: linear-gradient(135deg, #1976D2 0%, #0D47A1 100%) !important;
    border-radius: 12px;
    box-shadow: var(--shadow-brand);
}

.mobile-book-btn:hover {
    background: linear-gradient(135deg, #1976D2 0%, #0D47A1 100%) !important;
    filter: brightness(1.06);
    color: var(--white);
}

.mobile-join-btn {
    background: var(--white) !important;
    border: 1.5px solid var(--border-card, #D9E3F0) !important;
    color: var(--primary-dark, #0D47A1) !important;
    font-weight: 700;
    border-radius: 12px;
    min-height: var(--tap-min);
}

.mobile-join-btn:hover {
    background: var(--primary-soft, #EDF5FF) !important;
    border-color: var(--primary, #1976D2) !important;
    color: var(--primary, #1976D2) !important;
}
