/* =========================================================
   DRIVEWISE — MAIN STYLES
   White navbar + orange/navy theme
========================================================= */

:root {
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --navy: #0f172a;
    --navy-light: #1e293b;
    --bg: #f8fafc;
    --surface: #ffffff;
    --surface-light: #f1f5f9;
    --text: #0f172a;
    --text-light: #64748b;
    --border: #e2e8f0;
    --white: #ffffff;
    --shadow: 0 12px 35px rgba(15, 23, 42, .08);
    --radius: 18px;
    --transition: .3s ease;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: "DM Sans", sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    overflow-x: hidden;
    max-width: 100%;
}

a {
    text-decoration: none;
    color: inherit;
}

button {
    font-family: inherit;
}

img {
    max-width: 100%;
    display: block;
}

.container {
    width: min(1180px, 92%);
    margin: auto;
}

/* ================= HEADER / NAVBAR ================= */
.header {
    position: fixed;
    top: 12px;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: transparent;
    border-bottom: none;
    box-shadow: none;
    pointer-events: none;
    transition: top 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.header.scrolled {
    top: 0;
}

.navbar {
    pointer-events: auto;
    width: min(1280px, 95%);
    margin: 0 auto;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 20px 0 16px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 10px;
    box-shadow: 0 10px 30px -4px rgba(15, 23, 42, 0.07), 0 2px 6px -1px rgba(15, 23, 42, 0.03);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.header.scrolled .navbar {
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid rgba(226, 232, 240, 0.9);
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.07), 0 1px 3px rgba(15, 23, 42, 0.02);
    padding: 0 max(24px, calc((100% - 1280px) / 2));
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    font-size: 21px;
    font-weight: 800;
    color: var(--navy);
    line-height: 1;
    text-decoration: none;
    flex-shrink: 0;
    height: 44px;
}

.logo-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--primary) 0%, #1d4ed8 100%);
    color: #fff;
    font-size: 19px;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

.logo:hover .logo-icon {
    transform: translateY(-2px) rotate(-4deg);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.38);
}

.logo-text {
    display: inline-block;
    font-size: 21px;
    font-weight: 800;
    color: var(--navy);
    letter-spacing: -0.4px;
    line-height: 1;
}

.logo-text span {
    color: var(--primary);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    height: 100%;
    flex-shrink: 0;
}

.nav-links>li {
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;
    flex-shrink: 0;
}

.nav-links>li>a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 13px;
    border-radius: 10px;
    color: #475569;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.1px;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-links>li>a:hover {
    color: var(--primary);
    background: rgba(37, 99, 235, 0.06);
    transform: translateY(-1px);
}

.nav-links>li>a.active {
    color: var(--primary);
    font-weight: 700;
    background: #eff6ff;
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.15);
}

.nav-links>li>a.active::after {
    content: "";
    position: absolute;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 2.5px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--primary), #60a5fa);
    box-shadow: 0 1px 6px rgba(37, 99, 235, 0.45);
}

.dropdown-trigger i {
    font-size: 9px;
    margin-left: 2px;
    color: #94a3b8;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s ease;
}

/* Button-style dropdown trigger (replaces old <a> trigger) */
button.dropdown-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 13px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: #475569;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.1px;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

button.dropdown-trigger:hover {
    color: var(--primary);
    background: rgba(37, 99, 235, 0.06);
    transform: translateY(-1px);
}

button.dropdown-trigger.active {
    color: var(--primary);
    font-weight: 700;
    background: #eff6ff;
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.15);
    position: relative;
}

button.dropdown-trigger.active::after {
    content: "";
    position: absolute;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 2.5px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--primary), #60a5fa);
    box-shadow: 0 1px 6px rgba(37, 99, 235, 0.45);
}

/* Rotate chevron when dropdown is open */
.nav-dropdown.open .dropdown-trigger i {
    transform: rotate(180deg);
    color: var(--primary);
}

.dropdown-menu {
    position: absolute;
    top: calc(100% - 2px);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 195px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 14px;
    box-shadow: 0 20px 42px -6px rgba(15, 23, 42, 0.12), 0 6px 16px -2px rgba(15, 23, 42, 0.04);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Show dropdown on open class (click-triggered) */
.nav-dropdown.open .dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.dropdown-menu::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 50%;
    width: 11px;
    height: 11px;
    background: #fff;
    border-left: 1px solid rgba(226, 232, 240, 0.95);
    border-top: 1px solid rgba(226, 232, 240, 0.95);
    transform: translateX(-50%) rotate(45deg);
}

.dropdown-menu a {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    margin: 2px 0;
    border-radius: 9px;
    color: #334155;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.dropdown-menu a i {
    width: 26px;
    height: 26px;
    min-width: 26px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    background: #eff6ff;
    color: var(--primary);
    font-size: 12px;
    transition: all 0.2s ease;
}

.dropdown-menu a:hover,
.dropdown-menu a.active {
    background: #eff6ff;
    color: var(--primary);
    transform: translateX(3px);
}

.dropdown-menu a:hover i,
.dropdown-menu a.active i {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

.dashboard-menu {
    min-width: 215px;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.icon-btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    display: grid;
    place-items: center;
    border: 1.5px solid #e2e8f0;
    border-radius: 11px;
    background: #f8fafc;
    color: #475569;
    font-size: 14px;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.icon-btn:hover {
    background: #eff6ff;
    border-color: rgba(37, 99, 235, 0.3);
    color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.16);
}

.icon-btn:active {
    transform: scale(0.95);
}

.login-btn {
    height: 40px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1.5px solid #e2e8f0;
    border-radius: 11px;
    background: #ffffff;
    color: var(--navy);
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.login-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: #eff6ff;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.12);
}

.login-btn:active {
    transform: scale(0.98);
}

.signup-btn {
    height: 40px;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--primary) 0%, #1d4ed8 100%);
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    border: none;
    white-space: nowrap;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.signup-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(37, 99, 235, 0.42);
    filter: brightness(1.05);
}

.signup-btn:active {
    transform: scale(0.98);
}

.menu-toggle {
    display: none;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--primary) 0%, #1d4ed8 100%);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
    transition: all 0.2s ease;
}

.menu-toggle:hover {
    transform: scale(1.05);
}

.mobile-menu {
    display: none;
}

.mobile-menu > a {
    display: block;
    padding: 13px 12px;
    color: var(--text);
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    border-bottom: 1px solid #edf0f3;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.mobile-menu > a:hover {
    color: var(--primary);
    background: #f8fafc;
}

.mobile-menu > a.active {
    color: var(--primary) !important;
    font-weight: 800 !important;
    background: #eff6ff !important;
    border-left: 3px solid var(--primary);
    padding-left: 14px;
}

.mobile-dropdown-btn {
    width: 100%;
    padding: 13px 12px;
    border: 0;
    border-bottom: 1px solid #edf0f3;
    background: transparent;
    color: var(--text);
    display: flex;
    justify-content: space-between;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.2s ease, color 0.2s ease;
}

.mobile-dropdown-btn:hover {
    background: #f8fafc;
}

.mobile-dropdown-btn.active {
    color: var(--primary) !important;
    font-weight: 800 !important;
}

.mobile-dropdown-btn.active i {
    color: var(--primary) !important;
}

.mobile-submenu {
    display: none;
    padding: 6px 0 8px 14px;
}

.mobile-dropdown.open .mobile-submenu {
    display: block;
}

.mobile-submenu a {
    display: block !important;
    padding: 10px 12px !important;
    border: 0 !important;
    border-radius: 8px !important;
    color: var(--text-light) !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}

.mobile-submenu a:hover {
    color: var(--primary) !important;
    background: #eff6ff !important;
}

.mobile-submenu a.active {
    color: var(--primary) !important;
    font-weight: 800 !important;
    background: #eff6ff !important;
    border-left: 3px solid var(--primary);
    padding-left: 14px !important;
}


.mobile-actions {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #edf0f3;
}

.mobile-login,
.mobile-signup {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 11px;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    transition: all 0.2s ease;
}

.mobile-login {
    border: 1.5px solid var(--border);
    color: var(--navy);
    background: var(--surface);
}

.mobile-signup {
    background: linear-gradient(135deg, var(--primary) 0%, #1d4ed8 100%);
    color: #fff;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3);
}

.mobile-signup:hover {
    filter: brightness(1.05);
}

/* ================= HERO ================= */
.hero {
    min-height: 740px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 130px 0 80px;
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.62) 0%, rgba(15, 23, 42, 0.75) 55%, rgba(15, 23, 42, 0.88) 100%),
        url("../images/driving-hero.jpg") center center / cover no-repeat;
    background-attachment: fixed;
    overflow: hidden;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(37, 99, 235, 0.12) 0%, rgba(15, 23, 42, 0.5) 100%);
    pointer-events: none;
    z-index: 1;
}

.hero-container {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    width: 100%;
}

.hero-content {
    max-width: 840px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
}

.hero-badge {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    margin: 0 auto 24px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 50px;
    background: rgba(255, 255, 255, .1);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.hero h1 {
    font-size: clamp(38px, 5.5vw, 68px);
    line-height: 1.12;
    margin: 0 auto 24px;
    font-weight: 800;
    text-align: center;
    max-width: 800px;
}

.hero h1 span {
    display: block;
    color: #60a5fa;
}

.hero p {
    max-width: 640px;
    color: #e2e8f0;
    font-size: 18px;
    line-height: 1.6;
    margin: 0 auto 34px;
    text-align: center;
}

.hero-buttons,
.cta-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.primary-btn,
.secondary-btn {
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 24px;
    border-radius: 12px;
    font-weight: 700;
    transition: var(--transition);
}

.primary-btn {
    background: var(--primary);
    color: #fff;
}

.primary-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-3px);
}

.secondary-btn {
    border: 1px solid rgba(255, 255, 255, .35);
    color: #fff;
}

.secondary-btn:hover {
    background: #fff;
    color: var(--navy);
}

.hero-trust {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 48px;
    margin: 45px auto 0;
    padding-top: 32px;
    border-top: 1px solid rgba(255, 255, 255, .16);
    width: 100%;
    max-width: 580px;
}

.trust-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.trust-item strong {
    font-size: 26px;
    font-weight: 800;
    color: #fff;
}

.trust-item span {
    color: #cbd5e1;
    font-size: 13px;
}

/* ================= STATS ================= */
.stats-section {
    padding: 30px 0;
    background: var(--surface);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.stat-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.stat-icon,
.package-icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: rgba(37, 99, 235, .1);
    color: var(--primary);
    font-size: 20px;
    flex-shrink: 0;
}

.stat-card h3 {
    font-size: 24px;
}

.stat-count {
    display: inline-block;
    font-size: 24px;
    font-weight: 800;
    transition: transform .3s ease, color .3s ease;
}

.stat-card p {
    color: var(--text-light);
    font-size: 13px;
}

/* ================= COMMON ================= */
.section {
    padding: 100px 0;
}

.section-heading {
    max-width: 700px;
    margin: 0 auto 50px;
    text-align: center;
}

.section-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 13px;
    color: var(--primary);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1px;
}

.section-heading h2,
.instructor-content h2,
.cta-content h2 {
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.15;
    margin-bottom: 15px;
}

.section-heading h2 span,
.instructor-content h2 span,
.cta-content h2 span {
    color: var(--primary);
}

.section-heading p {
    color: var(--text-light);
}

/* ================= PACKAGES / LESSONS ================= */
.lessons-section {
    background: var(--surface);
}

.package-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.package-card {
    position: relative;
    padding: 35px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 22px;
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.package-card:hover {
    transform: translateY(-8px);
}

.package-card.featured {
    border: 2px solid var(--primary);
}

.popular-badge {
    position: absolute;
    top: 18px;
    right: 18px;
    padding: 6px 12px;
    border-radius: 30px;
    background: var(--primary);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

.package-icon {
    width: 58px;
    height: 58px;
    margin-bottom: 22px;
    font-size: 23px;
}

.package-tag {
    color: var(--primary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
}

.package-card h3 {
    margin: 8px 0;
    font-size: 23px;
}

.package-card>p {
    min-height: 70px;
    color: var(--text-light);
    font-size: 14px;
}

.package-price {
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin: 22px 0;
}

.package-price strong {
    font-size: 35px;
}

.package-price span {
    color: var(--text-light);
    font-size: 13px;
}

.package-card ul {
    list-style: none;
    margin-bottom: 25px;
}

.package-card li {
    display: flex;
    gap: 10px;
    margin: 10px 0;
    color: var(--text-light);
    font-size: 14px;
}

.package-card li i {
    color: var(--primary);
}

.package-btn {
    display: flex;
    justify-content: center;
    padding: 13px;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-weight: 700;
    transition: var(--transition);
}

.package-btn:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

/* ================= VEHICLES ================= */
.vehicles-section {
    background: var(--surface-light);
}

.vehicles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.vehicle-card {
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.vehicle-card:hover {
    transform: translateY(-7px);
}

.vehicle-image {
    position: relative;
    height: 240px;
    overflow: hidden;
}

.vehicle-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .5s ease;
}

.vehicle-card:hover .vehicle-image img {
    transform: scale(1.05);
}

.vehicle-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    padding: 7px 12px;
    border-radius: 30px;
    background: #fff;
    color: var(--primary);
    font-size: 11px;
    font-weight: 800;
}

.vehicle-content {
    padding: 25px;
}

.vehicle-content h3 {
    font-size: 22px;
    margin-bottom: 8px;
}

.vehicle-content p {
    color: var(--text-light);
    font-size: 14px;
    margin-bottom: 20px;
}

.vehicle-features {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.vehicle-features span {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-light);
    font-size: 12px;
}

.vehicle-features i {
    color: var(--primary);
}

/* Modern Fleet CTA Button */
.fleet-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 34px;
    font-size: 15px;
    font-weight: 700;
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--primary) 0%, #1d4ed8 100%);
    border: none;
    border-radius: 50px;
    box-shadow: 0 4px 18px rgba(37, 99, 235, 0.32);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    text-decoration: none;
    cursor: pointer;
}

.fleet-cta-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 26px rgba(37, 99, 235, 0.45);
    background: linear-gradient(135deg, #1d4ed8 0%, var(--primary-dark) 100%);
    color: #ffffff !important;
}

.fleet-cta-btn i {
    font-size: 14px;
    transition: transform 0.25s ease;
}

.fleet-cta-btn:hover i {
    transform: translateX(5px);
}

@media (max-width: 600px) {
    .fleet-cta-btn {
        width: 100%;
        max-width: 320px;
    }
}

/* ================= INSTRUCTOR ================= */
.instructor-section {
    background: var(--surface);
}

.instructor-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.instructor-image {
    position: relative;
}

.instructor-image img {
    width: 100%;
    height: 520px;
    object-fit: cover;
    border-radius: 24px;
    box-shadow: var(--shadow);
}

.experience-card {
    position: absolute;
    right: -25px;
    bottom: 30px;
    display: flex;
    flex-direction: column;
    padding: 18px 22px;
    border-radius: 15px;
    background: var(--primary);
    color: #fff;
    box-shadow: 0 12px 30px rgba(37, 99, 235, .25);
}

.experience-card strong {
    font-size: 30px;
    line-height: 1;
}

.experience-card span {
    font-size: 12px;
}

.instructor-content>p {
    color: var(--text-light);
    margin-bottom: 15px;
}

.instructor-points {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px;
    margin: 25px 0 30px;
}

.instructor-points div {
    display: flex;
    gap: 9px;
    font-size: 14px;
    font-weight: 700;
}

.instructor-points i {
    color: var(--primary);
}

/* ================= SERVICES ================= */
.services-section {
    background: var(--surface-light);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.service-card {
    position: relative;
    padding: 38px 30px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: var(--shadow);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
}

.service-card:hover {
    transform: translateY(-8px);
    border-color: rgba(37, 99, 235, 0.35);
    box-shadow: 0 16px 36px rgba(37, 99, 235, 0.12);
}

.service-icon {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: rgba(37, 99, 235, 0.1);
    color: var(--primary);
    font-size: 24px;
    margin-bottom: 22px;
    transition: var(--transition);
}

.service-card:hover .service-icon {
    background: var(--primary);
    color: #fff;
    transform: scale(1.08) rotate(-4deg);
}

.service-card h3 {
    font-size: 22px;
    margin-bottom: 12px;
    color: var(--navy);
}

.service-card p {
    color: var(--text-light);
    font-size: 14.5px;
    line-height: 1.65;
    margin-bottom: 24px;
    flex-grow: 1;
}

.service-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--primary);
    transition: var(--transition);
    margin-top: auto;
}

.service-link i {
    font-size: 12px;
    transition: transform 0.25s ease;
}

.service-link:hover {
    color: var(--primary-dark);
}

.service-link:hover i {
    transform: translateX(5px);
}

/* ================= PROCESS ================= */
.process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.process-card {
    position: relative;
    padding: 30px 23px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: var(--shadow);
    text-align: center;
}

.process-number {
    position: absolute;
    top: 15px;
    right: 17px;
    color: #dce1e7;
    font-size: 13px;
    font-weight: 800;
}

.process-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    margin: 10px auto 18px;
    border-radius: 50%;
    background: rgba(37, 99, 235, .1);
    color: var(--primary);
    font-size: 21px;
}

.process-card h3 {
    margin-bottom: 8px;
}

.process-card p {
    color: var(--text-light);
    font-size: 13px;
}

.testimonial-heading {
    text-align: center;
    margin: 90px 0 35px;
}

.testimonial-heading h2 {
    font-size: 36px;
}

.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.testimonial-card {
    padding: 28px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: var(--shadow);
}

.stars {
    color: var(--primary);
    letter-spacing: 3px;
    margin-bottom: 16px;
}

.testimonial-card>p {
    color: var(--text-light);
    font-size: 14px;
    margin-bottom: 22px;
}

.reviewer {
    display: flex;
    align-items: center;
    gap: 14px;
}

.reviewer-img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--primary);
    box-shadow: 0 4px 10px rgba(37, 99, 235, .2);
    flex-shrink: 0;
}

.reviewer strong,
.reviewer span {
    display: block;
}

.reviewer strong {
    font-size: 14px;
}

.reviewer span {
    color: var(--text-light);
    font-size: 11px;
}

/* ================= CTA ================= */
.cta-section {
    padding: 100px 0;
    background: var(--navy);
}

.cta-container {
    text-align: center;
}

.cta-content {
    max-width: 720px;
    margin: auto;
    color: #fff;
}

.cta-content h2 {
    margin-bottom: 15px;
}

.cta-content p {
    color: #c8d0dc;
    max-width: 580px;
    margin: 0 auto 28px;
}

.cta-buttons {
    justify-content: center;
}

.cta-buttons .secondary-btn {
    border-color: rgba(255, 255, 255, .3);
}

/* ================= FOOTER ================= */
.footer {
    background: #ffffff;
    color: var(--text);
    border-top: 1px solid var(--border);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
    gap: 50px;
    padding: 75px 0 55px;
}

.footer .logo {
    display: inline-flex;
    height: 44px;
    margin-bottom: 20px;
}

.footer-about p {
    max-width: 340px;
    color: var(--text-light);
    font-size: 14.5px;
    line-height: 1.65;
}

.social-links {
    display: flex;
    gap: 10px;
    margin-top: 24px;
}

.social-links a {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: #f8fafc;
    color: var(--navy);
    font-size: 14px;
    transition: var(--transition);
}

.social-links a:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    transform: translateY(-3px);
}

.footer-column h3 {
    color: var(--navy);
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 20px;
    letter-spacing: -0.2px;
}

.footer-column>a {
    display: block;
    color: var(--text-light);
    font-size: 14px;
    margin: 11px 0;
    transition: var(--transition);
}

.footer-column>a:hover {
    color: var(--primary);
    transform: translateX(4px);
}

.footer-contact p {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: var(--text-light);
    font-size: 14px;
    margin: 14px 0;
    line-height: 1.5;
}

.footer-contact i {
    color: var(--primary);
    width: 16px;
    font-size: 14px;
    margin-top: 3px;
    flex-shrink: 0;
}

.footer-bottom {
    border-top: 1px solid var(--border);
    background: #f8fafc;
}

.footer-bottom-inner {
    min-height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.footer-bottom p,
.footer-bottom a {
    color: var(--text-light);
    font-size: 13px;
    transition: var(--transition);
}

.footer-bottom-inner>div {
    display: flex;
    gap: 22px;
}

.footer-bottom a:hover {
    color: var(--primary);
}

/* ================= RESPONSIVE ================= */
@media (max-width:1100px) {

    .stats-grid,
    .process-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .package-grid,
    .vehicles-grid,
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .vehicles-grid .vehicle-card:last-child {
        grid-column: 1/-1;
        max-width: 520px;
        width: 100%;
        margin: auto;
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ================= 1024px DESKTOP & TABLETS LANDSCAPE (992px - 1200px) ================= */
@media (max-width: 1200px) and (min-width: 992px) {
    .navbar {
        width: 98%;
        gap: 8px;
        padding: 0 12px 0 10px;
    }

    .header.scrolled .navbar {
        padding: 0 16px;
    }

    .logo {
        gap: 8px;
    }

    .logo-icon {
        width: 38px;
        height: 38px;
        min-width: 38px;
        font-size: 16px;
        border-radius: 10px;
    }

    .logo-text {
        font-size: 18px;
    }

    .nav-links {
        gap: 2px;
    }

    .nav-links>li>a {
        height: 36px;
        padding: 0 8px;
        font-size: 13px;
        gap: 4px;
        white-space: nowrap;
    }

    .nav-links>li>a.active::after {
        width: 14px;
        height: 2px;
        bottom: 2px;
    }

    .dropdown-trigger i {
        font-size: 8px;
        margin-left: 1px;
    }

    .nav-actions {
        gap: 6px;
    }

    .icon-btn {
        width: 36px;
        height: 36px;
        min-width: 36px;
        font-size: 13px;
        border-radius: 9px;
    }

    .login-btn {
        display: inline-flex;
        height: 36px;
        padding: 0 11px;
        font-size: 13px;
        gap: 6px;
        border-radius: 9px;
        white-space: nowrap;
    }

    .signup-btn {
        display: inline-flex;
        height: 36px;
        padding: 0 13px;
        font-size: 13px;
        gap: 6px;
        border-radius: 9px;
        white-space: nowrap;
    }
}

/* ================= TABLETS & MOBILE (<= 991px) ================= */
@media (max-width: 991px) {
    .header {
        top: 8px;
    }

    .header.scrolled {
        top: 0;
    }

    .navbar {
        width: 95%;
        height: 66px;
        border-radius: 10px;
        padding: 0 14px 0 10px;
    }

    .header.scrolled .navbar {
        width: 100%;
        border-radius: 0;
        border-top: none;
        border-left: none;
        border-right: none;
        padding: 0 16px;
    }

    .nav-links {
        display: none;
    }

    /* Hide entire nav-actions on mobile — all controls move into hamburger menu */
    .nav-actions {
        display: none;
    }

    .menu-toggle {
        display: grid;
        place-items: center;
        width: 38px;
        height: 38px;
    }

    .mobile-menu {
        pointer-events: auto;
        position: relative;
        top: auto;
        left: auto;
        width: 95%;
        margin: 8px auto 0;
        border-radius: 10px;
        border: 1px solid rgba(226, 232, 240, 0.9);
        display: none;
        flex-direction: column;
        padding: 14px 18px;
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
        max-height: calc(100vh - 90px);
        overflow-y: auto;
    }

    .header.scrolled .mobile-menu {
        width: 100%;
        border-radius: 0;
        border-left: none;
        border-right: none;
        margin: 0;
    }

    .mobile-menu.show {
        display: flex;
    }

    .mobile-menu>a {
        padding: 13px 10px;
        color: var(--text);
        border-bottom: 1px solid #edf0f3;
        font-size: 15px;
        font-weight: 700;
    }

    .mobile-menu>a.active {
        color: var(--primary) !important;
        font-weight: 800 !important;
        background: #eff6ff !important;
        border-left: 3px solid var(--primary);
        padding-left: 12px;
    }


    .mobile-actions {
        display: flex;
        gap: 10px;
        margin-top: 15px;
        padding-top: 15px;
        border-top: 1px solid #edf0f3;
    }

    .mobile-login,
    .mobile-signup {
        flex: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 12px 14px;
        border-radius: 10px !important;
        font-size: 14px;
        font-weight: 700;
        text-align: center;
        transition: var(--transition);
        border: 0;
    }

    .mobile-login {
        border: 1px solid var(--border) !important;
        color: var(--navy) !important;
        background: var(--surface);
    }

    .mobile-signup {
        background: var(--primary) !important;
        color: #fff !important;
    }

    /* Mobile toggle row (theme + RTL inside hamburger) */
    .mobile-toggles {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 0;
        border-bottom: 1px solid #edf0f3;
    }

    .mobile-toggles .icon-btn {
        width: 38px;
        height: 38px;
        min-width: 38px;
        display: grid;
        place-items: center;
        border: 1.5px solid #e2e8f0;
        border-radius: 10px;
        background: #f8fafc;
        color: #475569;
        font-size: 14px;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .mobile-toggles .icon-btn:hover {
        background: #eff6ff;
        border-color: rgba(37, 99, 235, 0.3);
        color: var(--primary);
    }

    .hero {
        min-height: 650px;
        background-attachment: scroll;
    }

    .instructor-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .instructor-image {
        max-width: 650px;
        margin: auto;
        width: 100%;
    }
}

@media (max-width:600px) {
    .container {
        width: 90%;
    }

    .section {
        padding: 70px 0;
    }

    .stats-grid,
    .package-grid,
    .services-grid,
    .vehicles-grid,
    .process-grid,
    .testimonial-grid,
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .vehicles-grid .vehicle-card:last-child {
        grid-column: auto;
        max-width: none;
    }

    .hero {
        min-height: 650px;
    }

    .hero-content {
        text-align: center;
    }

    .hero-badge {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-buttons,
    .cta-buttons {
        flex-direction: column;
    }

    .primary-btn,
    .secondary-btn {
        width: 100%;
    }

    .hero-trust {
        justify-content: center;
        gap: 20px;
    }

    .trust-item strong {
        font-size: 20px;
    }

    .instructor-image img {
        height: 430px;
    }

    .experience-card {
        right: 15px;
        bottom: 15px;
    }

    .instructor-points {
        grid-template-columns: 1fr;
    }

    .testimonial-heading {
        margin-top: 65px;
    }

    .testimonial-heading h2 {
        font-size: 30px;
    }

    .footer-bottom-inner {
        padding: 18px 0;
        flex-direction: column;
        text-align: center;
    }

    .footer-grid {
        gap: 35px;
    }
}

@media (max-width: 480px) {
    .header {
        top: 6px;
    }

    .navbar {
        width: 96%;
        height: 60px;
        padding: 0 10px 0 8px;
        gap: 6px;
    }

    .logo {
        gap: 7px;
    }

    .logo-icon {
        width: 32px;
        height: 32px;
        min-width: 32px;
        font-size: 14px;
        border-radius: 8px;
    }

    .logo-text {
        font-size: 16px;
    }

    .nav-actions {
        gap: 5px;
    }

    .icon-btn,
    .menu-toggle {
        width: 34px;
        height: 34px;
        min-width: 34px;
        font-size: 13px;
        border-radius: 8px;
    }

}

/* =========================================================
   ANIMATIONS, CINEMATIC FX & CARD HOVERS
========================================================= */
/* =========================================================
   DRIVEWISE — ANIMATIONS
   Scroll reveals, hero cinematic FX, counters, micro-interactions
   Loads last so it can override base styles safely.
========================================================= */

/* ---------- Accessibility: reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .001s !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001s !important;
        scroll-behavior: auto !important;
    }

    html.js [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ================= SCROLL REVEAL ENGINE =================
   Add class="js" to <html> so content stays visible if JS is off. */
html.js [data-reveal] {
    opacity: 0;
    transform: translateY(44px);
    transition:
        opacity .85s cubic-bezier(.22, .61, .36, 1),
        transform .85s cubic-bezier(.22, .61, .36, 1);
    transition-delay: var(--reveal-delay, 0s);
    will-change: opacity, transform;
}

html.js [data-reveal="left"] {
    transform: translateX(-60px);
}

html.js [data-reveal="right"] {
    transform: translateX(60px);
}

html.js [data-reveal="zoom"] {
    transform: scale(.9) translateY(24px);
}

html.js [data-reveal].revealed {
    opacity: 1;
    transform: none;
}

[data-reveal-delay="1"] {
    --reveal-delay: .09s;
}

[data-reveal-delay="2"] {
    --reveal-delay: .18s;
}

[data-reveal-delay="3"] {
    --reveal-delay: .27s;
}

[data-reveal-delay="4"] {
    --reveal-delay: .36s;
}

[data-reveal-delay="5"] {
    --reveal-delay: .45s;
}

[data-reveal-delay="6"] {
    --reveal-delay: .54s;
}


/* ================= HERO — Cinematic ================= */
.hero {
    position: relative;
    min-height: 740px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 130px 0 80px;
    background: #080e1d;
    overflow: hidden;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(200deg, rgba(8, 14, 29, .80) 0%, rgba(15, 23, 42, .65) 45%, rgba(37, 99, 235, .35) 100%),
        url("../images/driving-hero.jpg") center center / cover no-repeat;
    animation: heroKenBurns 24s ease-in-out infinite alternate;
    will-change: transform;
}

.hero-content {
    background: transparent !important;
}

@keyframes heroKenBurns {
    from {
        transform: scale(1) translateY(0);
    }

    to {
        transform: scale(1.12) translateY(-1.5%);
    }
}


/* floating blurred orbs */
.hero-orb {
    position: absolute;
    z-index: 1;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .55;
    pointer-events: none;
    will-change: transform, translate;
    transition: translate .4s ease;
}

.hero-orb-1 {
    width: 420px;
    height: 420px;
    top: -90px;
    left: -120px;
    background: rgba(59, 130, 246, .55);
    animation: orbFloat 15s ease-in-out infinite alternate;
}

.hero-orb-2 {
    width: 380px;
    height: 380px;
    bottom: -90px;
    right: -110px;
    background: rgba(29, 78, 216, .5);
    animation: orbFloat 19s ease-in-out infinite alternate-reverse;
}

@keyframes orbFloat {
    from {
        transform: translate(0, 0) scale(1);
    }

    to {
        transform: translate(70px, 45px) scale(1.18);
    }
}

/* staggered hero load-in (CSS-only, plays on load) */
.hero-content>.hero-item {
    opacity: 0;
    animation: heroUp .9s cubic-bezier(.22, .61, .36, 1) forwards;
    animation-delay: var(--d, 0s);
}

.hero-content>.hero-item:nth-child(1) {
    --d: .1s;
}

.hero-content>.hero-item:nth-child(2) {
    --d: .25s;
}

.hero-content>.hero-item:nth-child(3) {
    --d: .4s;
}

.hero-content>.hero-item:nth-child(4) {
    --d: .55s;
}

.hero-content>.hero-item:nth-child(5) {
    --d: .7s;
}

@keyframes heroUp {
    from {
        opacity: 0;
        transform: translateY(38px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* shimmer sweep on the badge */
.hero-badge {
    position: relative;
    overflow: hidden;
}

.hero-badge::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -70%;
    width: 40%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
    transform: skewX(-20deg);
    animation: badgeShine 4s ease-in-out infinite;
}

@keyframes badgeShine {

    0%,
    55% {
        left: -70%;
    }

    85%,
    100% {
        left: 140%;
    }
}

/* animated gradient on hero headline accent */
.hero h1 span {
    background: linear-gradient(90deg, #60a5fa, #93c5fd, #c4b5fd, #60a5fa);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: gradientFlow 7s linear infinite;
}

/* button shine sweep */
.primary-btn {
    position: relative;
    overflow: hidden;
}

.primary-btn::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -75%;
    width: 35%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent);
    transform: skewX(-20deg);
    transition: left .65s ease;
    pointer-events: none;
}

.primary-btn:hover::after {
    left: 130%;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

/* ================= TRUST MARQUEE ================= */
.marquee {
    position: relative;
    overflow: hidden;
    padding: 15px 0;
    background: var(--navy);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    white-space: nowrap;
}

.marquee-track {
    display: inline-flex;
    width: max-content;
    will-change: transform;
    animation: marqueeRoll 32s linear infinite;
}

.marquee:hover .marquee-track {
    animation-play-state: paused;
}

.marquee-track span {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-right: 52px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, .72);
}

.marquee-track span i {
    color: var(--primary);
    font-size: 14px;
}

@keyframes marqueeRoll {
    to {
        transform: translateX(-50%);
    }
}

/* ================= SECTION HEADINGS ================= */
.section-label {
    position: relative;
}

.section-label::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -7px;
    height: 2px;
    width: 100%;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--primary), transparent);
    transform: scaleX(0);
    transform-origin: left;
}

.revealed .section-label::after,
[data-reveal].revealed .section-label::after {
    animation: labelDraw .9s cubic-bezier(.22, .61, .36, 1) .12s forwards;
}

@keyframes labelDraw {
    to {
        transform: scaleX(1);
    }
}

.section-heading h2 span,
.instructor-content h2 span,
.cta-content h2 span {
    background: linear-gradient(90deg, var(--primary), #60a5fa, var(--primary));
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: gradientFlow 8s linear infinite;
}

@keyframes gradientFlow {
    to {
        background-position: 300% 0;
    }
}

/* ================= 1. STAT CARDS — Metric Pulse & Ambient Glow ================= */
.stat-card {
    position: relative;
    transition: border-color .3s ease, box-shadow .35s ease, background-color .3s ease;
}

.stat-card .stat-icon {
    transition: transform .4s cubic-bezier(.34, 1.56, .64, 1), background-color .3s ease, color .3s ease, box-shadow .35s ease;
}

.stat-card h3 {
    transition: color .3s ease, transform .3s ease;
}

.stat-card:hover {
    border-color: var(--primary);
    box-shadow: 0 12px 30px rgba(37, 99, 235, .14);
}

.stat-card:hover .stat-icon {
    background: var(--primary);
    color: #fff;
    transform: scale(1.14) rotate(8deg);
    box-shadow: 0 8px 20px rgba(37, 99, 235, .32);
}

.stat-card:hover h3 {
    color: var(--primary);
    transform: translateX(2px);
}

/* ================= 2. SERVICES CARDS — 3D Float & Bottom Bar Sweep ================= */
.service-card {
    position: relative;
    overflow: hidden;
    transition: transform .45s cubic-bezier(.22, .61, .36, 1), box-shadow .45s ease, border-color .3s ease;
}

.service-card::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--primary), #60a5fa, #38bdf8);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}

.service-card:hover {
    transform: translateY(-10px);
    border-color: rgba(37, 99, 235, .35);
    box-shadow: 0 24px 50px rgba(37, 99, 235, .18);
}

.service-card:hover::after {
    transform: scaleX(1);
}

.service-card:hover .service-icon {
    background: var(--primary);
    color: #fff;
    transform: scale(1.12) rotate(-8deg);
    box-shadow: 0 10px 22px rgba(37, 99, 235, .3);
}

.service-card:hover .service-link {
    color: var(--primary-dark);
}

.service-card:hover .service-link i {
    transform: translateX(8px);
}

/* ================= 3. VEHICLE FLEET CARDS — Automotive Showroom Shimmer ================= */
.vehicle-card {
    position: relative;
    transition: transform .4s ease, box-shadow .4s ease, border-color .3s ease;
}

.vehicle-image {
    position: relative;
    height: 240px;
    overflow: hidden;
}

.vehicle-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%);
    transform: translateX(-120%);
    transition: transform .8s ease;
    pointer-events: none;
    z-index: 2;
}

.vehicle-badge {
    transition: background-color .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease;
    z-index: 3;
}

.vehicle-features span {
    transition: background-color .25s ease, color .25s ease, transform .25s ease;
}

.vehicle-card:hover {
    transform: translateY(-5px);
    border-color: rgba(37, 99, 235, .3);
    box-shadow: 0 20px 42px rgba(15, 23, 42, .13);
}

.vehicle-card:hover .vehicle-image::after {
    transform: translateX(120%);
}

.vehicle-card:hover .vehicle-image img {
    transform: scale(1.08);
}

.vehicle-card:hover .vehicle-badge {
    background: var(--primary);
    color: #fff;
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(37, 99, 235, .35);
}

.vehicle-card:hover .vehicle-features span {
    background: #eff6ff;
    color: var(--primary);
    border-radius: 6px;
    padding: 3px 8px;
    margin: -1px 0;
}

/* ================= 4. PACKAGE CARDS — Tier Magnification & Auto-Fill CTA ================= */
.package-card {
    position: relative;
    transition: transform .45s cubic-bezier(.22, .61, .36, 1), box-shadow .45s ease, border-color .3s ease;
}

.package-price strong {
    display: inline-block;
    transition: transform .35s ease, color .3s ease;
}

.package-btn {
    transition: transform .3s ease, background-color .3s ease, color .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.package-card li i {
    transition: transform .3s ease;
}

.package-card:hover {
    transform: translateY(-11px) scale(1.02);
    box-shadow: 0 26px 52px rgba(15, 23, 42, .14), 0 0 0 1px rgba(37, 99, 235, .25);
    border-color: var(--primary);
}

.package-card:hover .package-price strong {
    transform: scale(1.08);
    color: var(--primary);
}

.package-card:hover .package-btn {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(37, 99, 235, .35);
}

.package-card:hover li i {
    transform: scale(1.25);
}

.package-card.featured {
    animation: featuredPulse 3.6s ease-in-out infinite;
}

@keyframes featuredPulse {

    0%,
    100% {
        box-shadow: 0 12px 35px rgba(15, 23, 42, .08), 0 0 0 0 rgba(37, 99, 235, .18);
    }

    50% {
        box-shadow: 0 12px 35px rgba(15, 23, 42, .08), 0 12px 38px 2px rgba(37, 99, 235, .3);
    }
}

/* ================= 5. PROCESS STEPS — Roadmap Progression & Number Pulse ================= */
.process-card {
    position: relative;
    transition: transform .4s cubic-bezier(.22, .61, .36, 1), box-shadow .4s ease, border-color .3s ease;
}

.process-number {
    transition: transform .4s cubic-bezier(.34, 1.56, .64, 1), color .3s ease, text-shadow .3s ease;
    display: inline-block;
}

.process-icon {
    transition: transform .6s cubic-bezier(.34, 1.56, .64, 1), background-color .3s ease, color .3s ease, box-shadow .35s ease;
}

.process-card h3 {
    transition: color .3s ease;
}

.process-card:hover {
    transform: translateY(-7px);
    border-color: rgba(37, 99, 235, .35);
    box-shadow: 0 18px 38px rgba(37, 99, 235, .13);
}

.process-card:hover .process-number {
    color: var(--primary);
    transform: scale(1.35);
    font-weight: 900;
    text-shadow: 0 2px 10px rgba(37, 99, 235, .25);
}

.process-card:hover .process-icon {
    background: var(--primary);
    color: #fff;
    transform: rotate(360deg) scale(1.1);
    box-shadow: 0 10px 22px rgba(37, 99, 235, .3);
}

.process-card:hover h3 {
    color: var(--primary);
}

/* ================= 6. TESTIMONIAL CARDS — Social Proof Glow & Avatar Aura ================= */
.testimonial-card {
    position: relative;
    transition: transform .4s cubic-bezier(.22, .61, .36, 1), box-shadow .4s ease, border-color .3s ease;
}

.testimonial-card .stars {
    display: inline-block;
    transition: transform .35s ease, letter-spacing .35s ease, color .3s ease;
}

.testimonial-card .reviewer-img {
    transition: transform .4s cubic-bezier(.34, 1.56, .64, 1), box-shadow .4s ease;
}

.testimonial-card .reviewer strong {
    transition: color .3s ease;
}

.testimonial-card:hover {
    transform: translateY(-5px);
    border-color: rgba(37, 99, 235, .28);
    box-shadow: 0 20px 44px rgba(15, 23, 42, .09);
}

.testimonial-card:hover .stars {
    transform: scale(1.08);
    letter-spacing: 5px;
    color: #f59e0b;
}

.testimonial-card:hover .reviewer-img {
    transform: scale(1.12) rotate(3deg);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .25), 0 8px 18px rgba(37, 99, 235, .2);
}

.testimonial-card:hover .reviewer strong {
    color: var(--primary);
}

/* ================= INSTRUCTOR IMAGE ================= */
.instructor-image {
    position: relative;
    border-radius: 24px;
    overflow: visible;
}

.instructor-image img {
    width: 100%;
    height: 520px;
    object-fit: cover;
    border-radius: 24px;
    box-shadow: 0 20px 45px rgba(15, 23, 42, .18);
    display: block;
    transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}

.instructor-image:hover img {
    transform: scale(1.02);
}

@keyframes floatSlow {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-11px);
    }
}

/* experience card gentle float */
.experience-card {
    animation: floatSlow 5s ease-in-out infinite alternate-reverse;
}

/* ================= VEHICLE IMAGES ================= */
.vehicle-image {
    position: relative;
    height: 240px;
    overflow: hidden;
    background: #f1f5f9;
}

.vehicle-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}

.vehicle-card:hover .vehicle-image img {
    transform: scale(1.06);
}

/* ================= RESPONSIVE ================= */
@media (max-width: 850px) {
    .instructor-image img {
        height: 440px;
    }
}

@media (max-width: 992px) {

    .services-grid .vehicle-card:last-child,
    .vehicles-grid .vehicle-card:last-child {
        grid-column: 1 / -1;
        max-width: 520px;
        width: 100%;
        margin: auto;
    }
}

@media (max-width: 600px) {

    .services-grid .vehicle-card:last-child,
    .vehicles-grid .vehicle-card:last-child {
        grid-column: auto;
        max-width: none;
    }

    .hero-orb-1 {
        width: 260px;
        height: 260px;
        top: -60px;
        left: -80px;
        filter: blur(50px);
    }

    .hero-orb-2 {
        width: 240px;
        height: 240px;
        bottom: -70px;
        right: -70px;
        filter: blur(50px);
    }

    .instructor-image img {
        height: 380px;
    }

    .marquee-track span {
        font-size: 11px;
        margin-right: 38px;
    }
}

/* =========================================================
   HOME 2 — UNIQUE SECTIONS (home2.html)
   Different from home 1: booking-widget hero, benefits,
   training levels, coverage areas, documents checklist, FAQ.
========================================================= */

/* ================= HERO 2 — Split with booking widget ================= */
.hero2 {
    position: relative;
    min-height: 720px;
    display: flex;
    align-items: center;
    padding: 150px 0 90px;
    overflow: hidden;
    background: #080e1d;
}

.hero2::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url("../images/home2 bg.webp") center center / cover no-repeat;
    opacity: .38;
    animation: hero2KenBurns 24s ease-in-out infinite alternate;
    will-change: transform;
}

@keyframes hero2KenBurns {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.12);
    }
}

.hero2::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(200deg, rgba(8, 14, 29, .88) 0%, rgba(8, 14, 29, .75) 45%, rgba(37, 99, 235, .45) 100%);
}

.hero2-grid-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 54px 54px;
    -webkit-mask-image: radial-gradient(ellipse at 30% 45%, rgba(0, 0, 0, .9), transparent 70%);
    mask-image: radial-gradient(ellipse at 30% 45%, rgba(0, 0, 0, .9), transparent 70%);
}

.hero2-shape {
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .55;
    pointer-events: none;
}

.hero2-shape-1 {
    width: 440px;
    height: 440px;
    top: -110px;
    right: -100px;
    background: rgba(59, 130, 246, .55);
    animation: hero2Drift 16s ease-in-out infinite alternate;
}

.hero2-shape-2 {
    width: 360px;
    height: 360px;
    bottom: -120px;
    right: 32%;
    background: rgba(29, 78, 216, .5);
    animation: hero2Drift 20s ease-in-out infinite alternate-reverse;
}

@keyframes hero2Drift {
    from {
        transform: translate(0, 0) scale(1);
    }

    to {
        transform: translate(-60px, 40px) scale(1.2);
    }
}

.hero2-inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 60px;
    align-items: center;
}

.hero2-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 18px;
    margin-bottom: 22px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 50px;
    background: rgba(255, 255, 255, .09);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.hero2-badge i {
    color: #60a5fa;
}

.hero2 h1 {
    margin-bottom: 20px;
    line-height: 1.12;
    color: #fff;
    font-size: clamp(38px, 4.8vw, 62px);
    font-weight: 800;
}

.hero2 h1 span {
    display: block;
}

.hero2 .grad-text {
    background: linear-gradient(90deg, #60a5fa, #93c5fd, #c4b5fd, #60a5fa);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: hero2Gradient 7s linear infinite;
}

@keyframes hero2Gradient {
    to {
        background-position: 300% 0;
    }
}

.hero2 p {
    max-width: 540px;
    margin-bottom: 28px;
    color: #cbd5e1;
    font-size: 17px;
    line-height: 1.65;
}

.hero2-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 26px;
}

.hero2-ticks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 22px;
    max-width: 500px;
    list-style: none;
    color: #e2e8f0;
    font-size: 13.5px;
    font-weight: 600;
}

.hero2-ticks li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hero2-ticks li i {
    color: #60a5fa;
    font-size: 13px;
}

/* ---- booking widget ---- */
.hero2-visual {
    position: relative;
}

.booking-card {
    position: relative;
    z-index: 2;
    max-width: 380px;
    margin-left: auto;
    padding: 26px;
    border-radius: 22px;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: 0 28px 60px rgba(2, 8, 23, .45);
    animation: bootCard .9s cubic-bezier(.22, .61, .36, 1) .25s backwards;
}

@keyframes bootCard {
    from {
        opacity: 0;
        transform: translateY(34px) scale(.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.booking-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.booking-head>i {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: rgba(37, 99, 235, .12);
    color: var(--primary);
    font-size: 18px;
}

.booking-head strong,
.booking-head span {
    display: block;
}

.booking-head strong {
    font-size: 15px;
    color: var(--navy);
}

.booking-head span {
    font-size: 12px;
    color: var(--text-light);
}

.slot-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
    margin-bottom: 18px;
}

.slot-chip {
    padding: 11px 6px;
    text-align: center;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-light);
    color: var(--text-light);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.slot-chip b {
    display: block;
    margin-top: 3px;
    color: var(--navy);
    font-size: 14px;
}

.slot-chip:hover {
    border-color: var(--primary);
}

.slot-chip.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.slot-chip.active b {
    color: #fff;
}

.booking-card .primary-btn {
    width: 100%;
    justify-content: center;
}

/* ================= BENEFITS — Why learn with us ================= */
.benefits-section {
    background: var(--surface);
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.benefit-card {
    position: relative;
    text-align: center;
    padding: 34px 28px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--surface);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease;
}

.benefit-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 22px 44px rgba(37, 99, 235, .14);
}

.benefit-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 3px;
    border-radius: 0 0 8px 8px;
    background: linear-gradient(90deg, var(--primary), #60a5fa);
    opacity: 0;
    transform: scaleX(.4);
    transition: opacity .3s ease, transform .45s cubic-bezier(.22, .61, .36, 1);
}

.benefit-card:hover::before {
    opacity: 1;
    transform: scaleX(1);
}

.benefit-icon {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    margin: 0 auto 18px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(37, 99, 235, .14), rgba(96, 165, 250, .14));
    color: var(--primary);
    font-size: 25px;
    transition: transform .3s ease;
}

.benefit-card:hover .benefit-icon {
    transform: scale(1.1) rotate(-5deg);
}

.benefit-card h3 {
    margin-bottom: 9px;
    font-size: 19px;
    color: var(--navy);
}

.benefit-card p {
    color: var(--text-light);
    font-size: 13.5px;
    line-height: 1.6;
}

/* ================= TRAINING LEVELS — 3-level curriculum ================= */
.levels-section {
    background: var(--surface-light);
}

.levels-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.level-card {
    position: relative;
    padding: 36px 30px 32px;
    border: 1px solid var(--border);
    border-radius: 22px;
    background: var(--surface);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: transform .4s cubic-bezier(.22, .61, .36, 1), box-shadow .4s ease, border-color .3s ease;
}

.level-card:hover {
    transform: translateY(-8px);
    border-color: rgba(37, 99, 235, .35);
    box-shadow: 0 22px 46px rgba(37, 99, 235, .14);
}

.level-num {
    position: absolute;
    top: 20px;
    right: 24px;
    font-size: 52px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -3px;
    color: var(--border);
    transition: color .35s ease;
}

.level-card:hover .level-num {
    color: rgba(37, 99, 235, .25);
}

.level-tag {
    display: inline-block;
    padding: 5px 12px;
    margin-bottom: 12px;
    border-radius: 30px;
    background: rgba(37, 99, 235, .1);
    color: var(--primary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
}

.level-card h3 {
    font-size: 20px;
    color: var(--navy);
    margin-bottom: 6px;
}

.level-hours {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--text-light);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 16px;
}

.level-hours i {
    color: var(--primary);
}

.level-card ul {
    list-style: none;
    display: grid;
    gap: 9px;
    margin-bottom: 24px;
}

.level-card ul li {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
}

.level-card ul li i {
    color: var(--primary);
    font-size: 12px;
}

.level-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 800;
    color: var(--primary);
}

.level-btn i {
    transition: transform .3s ease;
}

.level-card:hover .level-btn i {
    transform: translateX(6px);
}

/* ================= COVERAGE AREAS ================= */
.areas-section {
    background: var(--surface);
}

.areas-wrap {
    display: grid;
    grid-template-columns: 1.45fr 1fr;
    gap: 28px;
    align-items: stretch;
}

.areas-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 1fr;
    gap: 16px;
    height: 100%;
}

.area-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 22px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface);
    box-shadow: var(--shadow);
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
    height: 100%;
}

.area-card:hover {
    transform: translateY(-4px);
    border-color: rgba(37, 99, 235, .35);
    box-shadow: 0 14px 30px rgba(37, 99, 235, .12);
}

.area-card>i {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(37, 99, 235, .1);
    color: var(--primary);
    font-size: 17px;
}

.area-card strong {
    display: block;
    font-size: 15px;
    color: var(--navy);
    line-height: 1.3;
}

.area-card span {
    font-size: 12px;
    color: var(--text-light);
}

.pickup-card {
    position: relative;
    overflow: hidden;
    padding: 34px 30px;
    border-radius: 22px;
    background: var(--navy);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 24px 50px rgba(2, 8, 23, .35);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.pickup-glow {
    position: absolute;
    width: 260px;
    height: 260px;
    top: -90px;
    right: -70px;
    border-radius: 50%;
    background: rgba(37, 99, 235, .35);
    filter: blur(90px);
    pointer-events: none;
}

.pickup-card h3 {
    position: relative;
    font-size: 21px;
    margin-bottom: 10px;
}

.pickup-card>p {
    position: relative;
    color: #b8c3d4;
    font-size: 13.5px;
    margin-bottom: 18px;
}

.pickup-list {
    position: relative;
    list-style: none;
    display: grid;
    gap: 12px;
    margin-bottom: 24px;
}

.pickup-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #e2e8f0;
}

.pickup-list li i {
    color: #60a5fa;
}

.pickup-card .primary-btn {
    position: relative;
    width: 100%;
    justify-content: center;
}

/* ================= DOCUMENTS CHECKLIST ================= */
.docs-section {
    background: var(--surface-light);
}

.docs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.doc-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface);
    box-shadow: var(--shadow);
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.doc-card > div:last-child {
    flex: 1;
    min-width: 0;
}


.doc-card:hover {
    transform: translateY(-5px);
    border-color: rgba(37, 99, 235, .35);
    box-shadow: 0 16px 34px rgba(37, 99, 235, .12);
}

.doc-icon {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(37, 99, 235, .14), rgba(96, 165, 250, .14));
    color: var(--primary);
    font-size: 20px;
    transition: transform .35s ease;
}

.doc-card:hover .doc-icon {
    transform: scale(1.1) rotate(-6deg);
}

.doc-card h3 {
    font-size: 16px;
    color: var(--navy);
    margin-bottom: 5px;
}

.doc-card p {
    font-size: 13px;
    color: var(--text-light);
    line-height: 1.6;
}

.doc-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 4px 11px;
    border-radius: 30px;
    font-size: 11px;
    font-weight: 800;
}

.doc-badge.needed {
    background: rgba(37, 99, 235, .1);
    color: var(--primary);
}

.doc-badge.easy {
    background: rgba(34, 197, 94, .12);
    color: #16a34a;
}

/* ================= FAQ ACCORDION ================= */
.faq-section {
    background: var(--surface);
}

.faq-list {
    max-width: 780px;
    margin: 0 auto;
    display: grid;
    gap: 14px;
}

.faq-item {
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    overflow: hidden;
    transition: border-color .3s ease, box-shadow .3s ease;
}

.faq-item.open {
    border-color: rgba(37, 99, 235, .4);
    box-shadow: 0 14px 30px rgba(37, 99, 235, .1);
}

.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    border: 0;
    background: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 15.5px;
    font-weight: 700;
    color: var(--navy);
    text-align: left;
}

.faq-question i {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(37, 99, 235, .1);
    color: var(--primary);
    font-size: 13px;
    transition: transform .35s ease, background-color .3s ease, color .3s ease;
}

.faq-item.open .faq-question i {
    transform: rotate(180deg);
    background: var(--primary);
    color: #fff;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height .45s cubic-bezier(.22, .61, .36, 1);
}

.faq-answer p {
    padding: 0 24px 20px;
    color: var(--text-light);
    font-size: 14px;
    line-height: 1.7;
}

/* ================= HOME 2 — RESPONSIVE ================= */
@media (max-width: 1025px) {
    .levels-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1000px) {
    .benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .levels-grid {
        grid-template-columns: 1fr;
        max-width: 620px;
        margin: 0 auto;
    }

    .areas-list {
        gap: 13px;
    }

    .docs-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 950px) {
    .hero2 {
        padding: 130px 0 70px;
    }

    .hero2-inner {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .booking-card {
        margin: 0 auto;
    }

    .areas-wrap {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 850px) {
    .areas-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .hero2 {
        padding: 120px 0 60px;
    }

    .hero2-ticks {
        grid-template-columns: 1fr;
    }

    .booking-card {
        max-width: none;
    }

    .benefits-grid {
        grid-template-columns: 1fr;
    }

    .faq-question {
        font-size: 14px;
        padding: 17px 18px;
    }

    .faq-answer p {
        padding: 0 18px 18px;
    }

    .pickup-card {
        padding: 26px 22px;
    }
}

/* ================= HOME 2 — DARK MODE ================= */
body.dark-mode .booking-card,
body.dark-mode .benefit-card,
body.dark-mode .level-card,
body.dark-mode .area-card,
body.dark-mode .doc-card,
body.dark-mode .faq-item {
    background: var(--surface);
    border-color: var(--border);
}

body.dark-mode .slot-chip {
    background: var(--surface-light);
    border-color: var(--border);
}

body.dark-mode .slot-chip b {
    color: #fff;
}

body.dark-mode .slot-chip.active b {
    color: #fff;
}

body.dark-mode .booking-head strong,
body.dark-mode .benefit-card h3,
body.dark-mode .level-card h3,
body.dark-mode .area-card strong,
body.dark-mode .doc-card h3,
body.dark-mode .faq-question {
    color: #fff;
}

body.dark-mode .level-num {
    color: rgba(255, 255, 255, .14);
}

body.dark-mode .level-card:hover .level-num {
    color: rgba(96, 165, 250, .4);
}

body.dark-mode .level-card ul li {
    color: #e8edf3;
}

/* ================= HOME 2 — RTL ================= */
html[dir="rtl"] .booking-card {
    margin-left: 0;
    margin-right: auto;
}

html[dir="rtl"] .faq-question {
    text-align: right;
}

html[dir="rtl"] .level-num {
    right: auto;
    left: 24px;
}

html[dir="rtl"] .doc-card {
    text-align: right;
}

/* ================= HOME 2 — IMAGE ENHANCEMENTS ================= */

/* ---------- Reusable avatar stack ---------- */
.benefits-avatars {
    display: flex;
    align-items: center;
}

.benefits-avatars img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    margin-left: -10px;
}

.benefits-avatars img:first-child {
    margin-left: 0;
}


.benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* ---------- Level card image headers ---------- */
.level-media {
    position: relative;
    overflow: hidden;
    border-radius: 14px 14px 0 0;
    height: 180px;
}

.level-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s ease;
}

.level-card:hover .level-media img {
    transform: scale(1.05);
}

.level-body {
    padding: 28px 24px 30px;
}

.level-card .level-num {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 42px;
    height: 42px;
    background: rgba(255, 255, 255, .9);
    backdrop-filter: blur(6px);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .82rem;
    font-weight: 800;
    color: var(--navy);
    letter-spacing: .5px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
}

/* ---------- Coverage pickup card with bg image ---------- */
.pickup-card {
    position: relative;
    overflow: hidden;
}

.pickup-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    opacity: .18;
    pointer-events: none;
}

.pickup-card h3,
.pickup-card p,
.pickup-card .pickup-list,
.pickup-card .pickup-trust,
.pickup-card .primary-btn {
    position: relative;
    z-index: 1;
}

.pickup-trust {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    margin-bottom: 22px;
    padding-top: 16px;
    font-size: .84rem;
    color: #cbd5e1;
}

.pickup-avatars img {
    width: 30px;
    height: 30px;
    margin-left: -8px;
}

.pickup-avatars img:first-child {
    margin-left: 0;
}

/* ---------- Documents split layout ---------- */
.docs-split {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 32px;
    align-items: stretch;
}

.docs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.doc-helper {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    background: linear-gradient(145deg, #0b1528 0%, #111d35 100%);
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 24px 50px rgba(2, 8, 23, .35);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.doc-helper-body {
    padding: 34px 30px;
    color: #e2e8f0;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.doc-helper-icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: rgba(37, 99, 235, .2);
    color: #60a5fa;
    font-size: 22px;
    margin-bottom: 20px;
}

.doc-helper-body h3 {
    color: #fff;
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.doc-helper-body p {
    color: #94a3b8;
    font-size: .9rem;
    margin-bottom: 20px;
    line-height: 1.65;
}

.doc-helper-body ul {
    list-style: none;
    padding: 0;
    margin-bottom: 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.doc-helper-body ul li {
    color: #cbd5e1;
    font-size: .88rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.doc-helper-body ul li i {
    color: #60a5fa;
    font-size: .85rem;
    flex-shrink: 0;
}

.doc-helper-body .primary-btn {
    width: 100%;
    justify-content: center;
    margin-top: auto;
    background: var(--primary);
    color: #fff;
    border: none;
}

/* ---------- FAQ wrap (two-column) ---------- */
.faq-wrap {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 40px;
    align-items: start;
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.faq-cta {
    background: var(--cream, #faf9f6);
    border: 1px solid rgba(100, 116, 139, .12);
    border-radius: 18px;
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: sticky;
    top: 120px;
}

.faq-cta h3 {
    color: var(--navy);
    font-size: 1.1rem;
    margin: 16px 0 8px;
}

.faq-cta p {
    color: #64748b;
    font-size: .88rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

.faq-cta-avatars {
    display: flex;
    justify-content: center;
}

.faq-cta-avatars img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--cream, #faf9f6);
    margin-left: -12px;
}

.faq-cta-avatars img:first-child {
    margin-left: 0;
}

.faq-cta-btns {
    display: flex;
    gap: 12px;
    width: 100%;
}

.faq-cta-btns .primary-btn,
.faq-cta-btns .secondary-btn {
    flex: 1;
    justify-content: center;
    font-size: .82rem;
    padding: 10px 16px;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1000px) {

    .docs-split {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .docs-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .doc-helper {
        max-width: 540px;
        margin: 0 auto;
        width: 100%;
    }

    .faq-wrap {
        grid-template-columns: 1fr;
    }

    .faq-cta {
        position: static;
    }
}

@media (max-width: 600px) {
    .benefits-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .level-media {
        height: 150px;
    }

    .docs-grid {
        grid-template-columns: 1fr !important;
        gap: 14px;
    }

    .doc-card {
        padding: 16px;
        gap: 14px;
        border-radius: 14px;
    }

    .doc-card > div:last-child {
        flex: 1;
        min-width: 0;
    }

    .doc-icon {
        width: 44px;
        height: 44px;
        min-width: 44px;
        font-size: 18px;
        border-radius: 12px;
    }

    .doc-card h3 {
        font-size: 15px;
        word-break: break-word;
    }

    .doc-card p {
        font-size: 13px;
        line-height: 1.5;
    }

    .doc-helper {
        max-width: 100%;
        margin: 0;
        border-radius: 16px;
    }

    .doc-helper-body {
        padding: 24px 18px;
    }

    .doc-helper-body h3 {
        font-size: 1.15rem;
    }

    .faq-cta-btns {
        flex-direction: column;
    }
}

@media (max-width: 420px) {
    .doc-card {
        padding: 14px;
        gap: 12px;
    }

    .doc-icon {
        width: 40px;
        height: 40px;
        min-width: 40px;
        font-size: 16px;
    }

    .doc-helper-body {
        padding: 20px 16px;
    }
}


/* ---------- DARK MODE overrides ---------- */
body.dark-mode .level-card .level-num {
    background: rgba(15, 23, 42, .88);
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}

body.dark-mode .faq-cta {
    background: #131b2c;
    border-color: rgba(255, 255, 255, .08);
}

body.dark-mode .faq-cta h3 {
    color: #e2e8f0;
}

body.dark-mode .faq-cta p {
    color: #94a3b8;
}

body.dark-mode .faq-cta-avatars img {
    border-color: #131b2c;
}

body.dark-mode .pickup-card .pickup-bg {
    opacity: .12;
}

/* ---------- RTL overrides ---------- */
html[dir="rtl"] .benefits-avatars img {
    margin-left: 0;
    margin-right: -10px;
}

html[dir="rtl"] .benefits-avatars img:first-child {
    margin-right: 0;
}

html[dir="rtl"] .pickup-avatars img {
    margin-left: 0;
    margin-right: -8px;
}

html[dir="rtl"] .pickup-avatars img:first-child {
    margin-right: 0;
}

html[dir="rtl"] .pickup-trust {
    flex-direction: row-reverse;
}

html[dir="rtl"] .faq-cta-avatars img {
    margin-left: 0;
    margin-right: -12px;
}

html[dir="rtl"] .faq-cta-avatars img:first-child {
    margin-right: 0;
}

html[dir="rtl"] .level-card .level-num {
    right: auto;
    left: 14px;
}

/* ================= ABOUT PAGE — UNIQUE SECTIONS ================= */

/* ---------- 1. About Hero ---------- */
.about-hero {
    position: relative;
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 130px;
    padding-bottom: 70px;
    overflow: hidden;
    text-align: center;
}

.about-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.about-hero-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(15, 23, 42, .7) 0%, rgba(15, 23, 42, .88) 100%);
    z-index: 1;
}

.about-hero-inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
}

.about-breadcrumb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: .85rem;
    font-weight: 600;
    margin: 0 auto 22px;
    color: rgba(255, 255, 255, .75);
    padding: 6px 18px;
    border-radius: 30px;
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, .12);
}

.about-breadcrumb a {
    color: #93c5fa;
    transition: color var(--transition);
}

.about-breadcrumb a:hover {
    color: #fff;
}

.about-breadcrumb span {
    color: #fff;
}

.about-breadcrumb i {
    font-size: .7rem;
}

.about-hero h1 {
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    line-height: 1.18;
    color: #fff;
    letter-spacing: -.5px;
    max-width: 820px;
    margin: 0 auto 20px;
    text-align: center;
}

.about-hero h1 span {
    color: var(--primary);
    background: linear-gradient(120deg, #60a5fa, #2563eb);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.about-hero p {
    color: rgba(255, 255, 255, .88);
    font-size: 1.1rem;
    max-width: 680px;
    margin: 0 auto;
    line-height: 1.75;
    text-align: center;
}

/* ---------- 2. Our Story ---------- */
.story-section {
    padding: 110px 0;
}

.story-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}

.story-media {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
}

.story-media img {
    width: 100%;
    border-radius: var(--radius);
    display: block;
}

.story-badge {
    position: absolute;
    bottom: 24px;
    left: 24px;
    background: var(--navy);
    color: #fff;
    border-radius: 14px;
    padding: 16px 22px;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow);
}

.story-badge strong {
    font-size: 1.25rem;
    letter-spacing: .5px;
}

.story-badge span {
    font-size: .8rem;
    color: rgba(255, 255, 255, .7);
    margin-top: 2px;
}

.story-content h2 {
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    line-height: 1.2;
    margin-bottom: 18px;
    letter-spacing: -.5px;
}

.story-content h2 span {
    color: var(--primary);
}

.story-content>p {
    color: var(--text-light);
    font-size: .98rem;
    line-height: 1.75;
    margin-bottom: 16px;
}

.story-highlights {
    margin-top: 26px;
    display: grid;
    gap: 14px;
}

.story-highlight {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 18px;
    transition: transform var(--transition), box-shadow var(--transition);
}

.story-highlight:hover {
    transform: translateX(6px);
    box-shadow: var(--shadow);
}

.story-highlight i {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(37, 99, 235, .1);
    color: var(--primary);
    font-size: 1.1rem;
}

.story-highlight strong {
    display: block;
    font-size: .95rem;
}

.story-highlight span {
    font-size: .82rem;
    color: var(--text-light);
}

/* ---------- 3. Mission, Vision & Values ---------- */
.mvv-section {
    background: var(--surface-light);
}

.mvv-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}

.mvv-card {
    position: relative;
    border-radius: 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    padding: 40px 32px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.mvv-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 3px;
    border-radius: 0 0 8px 8px;
    background: linear-gradient(90deg, var(--primary), #60a5fa);
    opacity: 0;
    transform: scaleX(.4);
    transition: opacity .3s ease, transform .45s cubic-bezier(.22, .61, .36, 1);
}

.mvv-card:hover {
    transform: translateY(-7px);
    border-color: rgba(37, 99, 235, .35);
    box-shadow: 0 20px 42px rgba(37, 99, 235, .12);
}

.mvv-card:hover::before {
    opacity: 1;
    transform: scaleX(1);
}

.mvv-icon {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(37, 99, 235, .12), rgba(96, 165, 250, .15));
    color: var(--primary);
    font-size: 24px;
    margin-bottom: 22px;
    transition: transform .35s ease;
}

.mvv-card:hover .mvv-icon {
    transform: scale(1.1) rotate(-5deg);
}

.mvv-card h3 {
    font-size: 1.35rem;
    color: var(--navy);
    margin-bottom: 12px;
    letter-spacing: -.3px;
    font-weight: 700;
}

.mvv-card p {
    font-size: .95rem;
    color: var(--text-light);
    line-height: 1.7;
    margin: 0;
}

/* ---------- 4. Meet the Team ---------- */
.team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.team-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform var(--transition), box-shadow var(--transition);
}

.team-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow);
}

.team-photo {
    position: relative;
    height: 260px;
    overflow: hidden;
}

.team-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s ease;
}

.team-card:hover .team-photo img {
    transform: scale(1.06);
}

.team-social {
    position: absolute;
    bottom: 14px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 10px;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .3s ease, transform .3s ease;
}

.team-card:hover .team-social {
    opacity: 1;
    transform: translateY(0);
}

.team-social a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    display: grid;
    place-items: center;
    color: var(--navy);
    font-size: .95rem;
    transition: background var(--transition), color var(--transition);
}

.team-social a:hover {
    background: var(--primary);
    color: #fff;
}

.team-info {
    padding: 20px;
    text-align: center;
}

.team-info h3 {
    font-size: 1.05rem;
    letter-spacing: -.3px;
}

.team-role {
    display: inline-block;
    margin: 6px 0 10px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--primary);
    background: rgba(37, 99, 235, .08);
    padding: 4px 12px;
    border-radius: 999px;
}

.team-info p {
    font-size: .85rem;
    color: var(--text-light);
    line-height: 1.65;
}

/* ---------- 5. Journey Timeline ---------- */
.timeline-section {
    background: var(--surface-light);
}

.timeline {
    position: relative;
    max-width: 880px;
    margin: 0 auto;
}

.timeline::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background: linear-gradient(180deg, var(--primary), rgba(37, 99, 235, .15));
    transform: translateX(-50%);
}

.timeline-item {
    position: relative;
    width: 50%;
    padding: 0 40px 48px;
}

.timeline-item:nth-child(odd) {
    left: 0;
    text-align: right;
}

.timeline-item:nth-child(even) {
    left: 50%;
    text-align: left;
}

.timeline-dot {
    position: absolute;
    top: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--primary);
    border: 3px solid var(--surface);
    box-shadow: 0 0 0 5px rgba(37, 99, 235, .2);
}

.timeline-item:nth-child(odd) .timeline-dot {
    right: -8px;
}

.timeline-item:nth-child(even) .timeline-dot {
    left: -8px;
}

.timeline-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.timeline-card:hover {
    transform: translateY(-4px);
    border-color: rgba(37, 99, 235, .35);
    box-shadow: 0 16px 32px rgba(37, 99, 235, .1);
}

.timeline-body {
    padding: 26px 28px;
}

.timeline-year {
    display: inline-block;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--primary);
    background: rgba(37, 99, 235, .1);
    padding: 5px 14px;
    border-radius: 999px;
    margin-bottom: 12px;
}

.timeline-body h3 {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 8px;
    letter-spacing: -.3px;
    color: var(--navy);
}

.timeline-body p {
    font-size: .88rem;
    color: var(--text-light);
    line-height: 1.65;
    margin: 0;
}

/* ---------- 6. Student Success Gallery ---------- */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 230px;
    gap: 20px;
}

.gallery-item {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    margin: 0;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s ease;
}

.gallery-item:hover img {
    transform: scale(1.07);
}

.gallery-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(15, 23, 42, .85) 100%);
    opacity: .9;
    transition: opacity .3s ease;
}

.gallery-item:hover::after {
    opacity: 1;
}

.gallery-item figcaption {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 16px;
    z-index: 1;
    color: #fff;
}

.gallery-item figcaption strong {
    display: block;
    font-size: .98rem;
    margin-bottom: 2px;
}

.gallery-item figcaption span {
    font-size: .8rem;
    color: rgba(255, 255, 255, .75);
}

.gallery-wide {
    grid-column: span 2;
}

.gallery-tall {
    grid-row: span 2;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1000px) {
    .story-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .story-media {
        max-width: 560px;
        margin: 0 auto;
    }

    .mvv-grid {
        grid-template-columns: 1fr;
    }

    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .gallery-wide {
        grid-column: span 2;
    }

    .gallery-tall {
        grid-row: span 1;
    }

    .timeline::before {
        left: 24px;
        transform: none;
    }

    .timeline-item,
    .timeline-item:nth-child(odd),
    .timeline-item:nth-child(even) {
        width: 100%;
        left: 0;
        right: auto;
        padding: 0 0 40px 60px;
        text-align: left;
    }

    .timeline-item:nth-child(odd) .timeline-dot,
    .timeline-item:nth-child(even) .timeline-dot {
        left: 16px;
        right: auto;
    }
}

@media (max-width: 600px) {
    .about-hero {
        min-height: 62vh;
        padding-top: 110px;
    }

    .about-hero h1 {
        font-size: 2rem;
    }

    .story-highlight {
        padding: 12px 14px;
    }

    .team-grid {
        grid-template-columns: 1fr;
    }

    .team-photo {
        height: 280px;
    }

    .gallery-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: 220px;
    }

    .gallery-wide {
        grid-column: span 1;
    }

    .timeline-item,
    .timeline-item:nth-child(odd),
    .timeline-item:nth-child(even) {
        width: 100%;
        left: 0;
        right: auto;
        padding-left: 50px;
        padding-right: 0;
        text-align: left;
    }

    .timeline::before {
        left: 18px;
    }

    .timeline-item:nth-child(odd) .timeline-dot,
    .timeline-item:nth-child(even) .timeline-dot {
        left: 10px;
        right: auto;
    }
}

/* ---------- DARK MODE overrides ---------- */
body.dark-mode .about-hero-overlay {
    background: radial-gradient(circle at center, rgba(5, 10, 20, .75) 0%, rgba(5, 10, 20, .95) 100%);
}

body.dark-mode .story-badge {
    background: var(--navy-light);
    border: 1px solid rgba(255, 255, 255, .08);
}

body.dark-mode .story-highlight {
    background: #131b2c;
    border-color: rgba(255, 255, 255, .08);
}

body.dark-mode .story-highlight span {
    color: #94a3b8;
}

body.dark-mode .mvv-section,
body.dark-mode .timeline-section {
    background: #000000;
}

body.dark-mode .mvv-card {
    background: #131b2c;
    border-color: rgba(255, 255, 255, .08);
}

body.dark-mode .mvv-card h3 {
    color: #fff;
}

body.dark-mode .mvv-card p {
    color: #94a3b8;
}

body.dark-mode .team-card,
body.dark-mode .timeline-card {
    background: #131b2c;
    border-color: rgba(255, 255, 255, .08);
}

body.dark-mode .team-info p,
body.dark-mode .timeline-body p {
    color: #94a3b8;
}

body.dark-mode .timeline-body h3 {
    color: #fff;
}

body.dark-mode .team-role {
    background: rgba(96, 165, 250, .12);
}

body.dark-mode .timeline-year {
    background: rgba(96, 165, 250, .12);
}

body.dark-mode .timeline-dot {
    border-color: var(--navy-light);
}

/* ---------- RTL overrides ---------- */
html[dir="rtl"] .story-highlight {
    text-align: right;
}

html[dir="rtl"] .about-breadcrumb i {
    transform: rotate(180deg);
}

html[dir="rtl"] .story-highlight:hover {
    transform: translateX(-6px);
}

/* ================= SERVICES PAGE — UNIQUE SECTIONS ================= */

/* ---------- 1. Services Hero ---------- */
.svc-hero {
    position: relative;
    background: #0b1220;
    padding: 160px 0 80px;
    overflow: hidden;
}

.svc-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
    z-index: 0;
    filter: brightness(0.9);
}

.svc-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11, 18, 32, 0.78) 0%, rgba(15, 23, 42, 0.9) 100%);
    z-index: 1;
    pointer-events: none;
}

.svc-hero-pattern {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 85% 20%, rgba(37, 99, 235, .22), transparent 42%),
        radial-gradient(circle at 12% 85%, rgba(96, 165, 250, .12), transparent 40%);
    z-index: 1;
    pointer-events: none;
}

.svc-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary), #60a5fa, var(--primary));
    z-index: 2;
}

.svc-hero-inner {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 860px;
}

.svc-hero h1 {
    font-size: clamp(2.2rem, 5vw, 3.5rem);
    line-height: 1.15;
    color: #fff;
    letter-spacing: -.5px;
    margin-bottom: 18px;
}

.svc-hero h1 span {
    color: var(--primary);
    background: linear-gradient(120deg, #60a5fa, #2563eb);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.svc-hero-inner>p {
    color: rgba(255, 255, 255, .82);
    font-size: 1.05rem;
    line-height: 1.7;
    max-width: 640px;
    margin: 0 auto;
}

.svc-hero-breadcrumb {
    justify-content: center;
}

.svc-hero-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 28px;
}

.svc-hero-chips span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    color: rgba(255, 255, 255, .9);
    font-size: .82rem;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 999px;
    backdrop-filter: blur(6px);
}

.svc-hero-chips span i {
    color: #60a5fa;
}

.svc-hero-meta {
    display: flex;
    justify-content: center;
    gap: 0;
    margin-top: 36px;
    flex-wrap: wrap;
}

.svc-hero-meta div {
    min-width: 150px;
    padding: 14px 28px;
    border-right: 1px solid rgba(255, 255, 255, .12);
}

.svc-hero-meta div:last-child {
    border-right: none;
}

.svc-hero-meta strong {
    display: block;
    font-size: 1.6rem;
    color: #fff;
    letter-spacing: -.5px;
}

.svc-hero-meta span {
    font-size: .8rem;
    color: rgba(255, 255, 255, .65);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ---------- 2. Course Catalog rows ---------- */
.catalog-list {
    display: grid;
    gap: 18px;
}

.catalog-row {
    display: grid;
    grid-template-columns: 210px 1fr auto auto;
    gap: 24px;
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 14px;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.catalog-row:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
    border-color: rgba(37, 99, 235, .3);
}

.catalog-thumb {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    height: 130px;
}

.catalog-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s ease;
}

.catalog-row:hover .catalog-thumb img {
    transform: scale(1.06);
}

.catalog-level {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(15, 23, 42, .85);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .5px;
    padding: 4px 10px;
    border-radius: 999px;
    backdrop-filter: blur(4px);
}

.catalog-main h3 {
    font-size: 1.12rem;
    margin-bottom: 6px;
    letter-spacing: -.3px;
}

.catalog-main p {
    font-size: .88rem;
    color: var(--text-light);
    line-height: 1.6;
    max-width: 460px;
}

.catalog-meta {
    display: grid;
    gap: 8px;
}

.catalog-meta span {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--text-light);
}

.catalog-meta span i {
    width: 24px;
    color: var(--primary);
    text-align: center;
}

.catalog-cta {
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(37, 99, 235, .08);
    color: var(--primary);
    font-size: .83rem;
    font-weight: 700;
    padding: 10px 18px;
    border-radius: 10px;
    transition: background var(--transition), color var(--transition);
}

.catalog-cta:hover {
    background: var(--primary);
    color: #fff;
}

/* ---------- 3. Lesson Flow time-bar ---------- */
.flow-section {
    background: var(--surface-light);
}

.flow-track {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 18px;
    position: relative;
}

.flow-segment {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px;
    position: relative;
    overflow: hidden;
    transition: transform var(--transition), box-shadow var(--transition);
}

.flow-segment:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}

.flow-segment::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary), #60a5fa);
}

.flow-seg-2::before {
    background: linear-gradient(90deg, #2563eb, #38bdf8);
}

.flow-seg-3::before {
    background: linear-gradient(90deg, #38bdf8, #0ea5e9);
}

.flow-time {
    position: absolute;
    top: 16px;
    right: 18px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .6px;
    color: var(--primary);
    background: rgba(37, 99, 235, .1);
    padding: 4px 10px;
    border-radius: 999px;
}

.flow-segment h3 {
    font-size: 1.02rem;
    margin: 26px 0 8px;
    letter-spacing: -.3px;
}

.flow-segment h3 i {
    color: var(--primary);
    margin-right: 6px;
}

.flow-segment p {
    font-size: .86rem;
    color: var(--text-light);
    line-height: 1.6;
}

/* ---------- 4. Lesson Inclusions split ---------- */
.inclusion-section {
    padding: 110px 0;
}

.inclusion-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}

.inclusion-media {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
}

.inclusion-media img {
    width: 100%;
    border-radius: var(--radius);
    display: block;
}

.inclusion-note {
    position: absolute;
    bottom: 22px;
    left: 22px;
    right: 22px;
    background: rgba(255, 255, 255, .95);
    backdrop-filter: blur(10px);
    border-radius: 14px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: var(--shadow);
}

.inclusion-note i {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(37, 99, 235, .1);
    color: var(--primary);
    font-size: 1.05rem;
    flex-shrink: 0;
}

.inclusion-note strong {
    display: block;
    font-size: .9rem;
    color: #111827;
}

.inclusion-note span {
    font-size: .78rem;
    color: #64748b;
}

.inclusion-content h2 {
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    line-height: 1.2;
    margin-bottom: 14px;
    letter-spacing: -.5px;
}

.inclusion-content h2 span {
    color: var(--primary);
}

.inclusion-content>p {
    color: var(--text-light);
    font-size: .95rem;
    line-height: 1.7;
    margin-bottom: 24px;
}

.inclusion-list {
    display: grid;
    gap: 14px;
}

.inclusion-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: var(--surface-light);
    border-radius: 12px;
    padding: 14px 18px;
    transition: transform var(--transition), box-shadow var(--transition);
}

.inclusion-item:hover {
    transform: translateX(6px);
    box-shadow: var(--shadow);
    background: var(--surface);
}

.inclusion-item i {
    color: var(--primary);
    font-size: 1.05rem;
    margin-top: 3px;
}

.inclusion-item strong {
    display: block;
    font-size: .92rem;
}

.inclusion-item span {
    font-size: .8rem;
    color: var(--text-light);
}

/* ---------- 5. Add-on services ---------- */
.addon-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.addon-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 26px;
    transition: transform var(--transition), box-shadow var(--transition);
}

.addon-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}

.addon-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(37, 99, 235, .1);
    color: var(--primary);
    font-size: 1.15rem;
    margin-bottom: 16px;
}

.addon-card h3 {
    font-size: 1.02rem;
    margin-bottom: 6px;
    letter-spacing: -.3px;
}

.addon-card p {
    font-size: .84rem;
    color: var(--text-light);
    line-height: 1.6;
}

.addon-price {
    position: absolute;
    top: 22px;
    right: 22px;
    font-size: .9rem;
    font-weight: 800;
    color: var(--navy);
    background: var(--surface-light);
    padding: 6px 12px;
    border-radius: 999px;
}

/* ---------- 6. Why we're different — comparison ---------- */
.compare-section {
    background: var(--surface-light);
}

.compare-section .section-heading h2 span {
    color: var(--primary);
    -webkit-text-fill-color: initial;
    font-weight: 400;
    margin: 0 6px;
}

.compare-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px;
    align-items: stretch;
}

.compare-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 30px 26px;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.compare-us {
    border-top: 4px solid var(--primary);
    position: relative;
}

.compare-us::after {
    content: "Recommended";
    position: absolute;
    top: 28px;
    right: 26px;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--primary);
    background: rgba(37, 99, 235, .1);
    padding: 5px 12px;
    border-radius: 999px;
}

.compare-them {
    border-top: 4px solid #cbd5e1;
}

.compare-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow);
}

.compare-us:hover {
    border-color: rgba(37, 99, 235, .45);
}

.compare-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
}

.compare-head i {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 1.1rem;
}

.compare-us .compare-head i {
    background: rgba(37, 99, 235, .1);
    color: var(--primary);
}

.compare-them .compare-head i {
    background: rgba(100, 116, 139, .12);
    color: #64748b;
}

.compare-head h3 {
    font-size: 1.15rem;
    letter-spacing: -.3px;
}

.compare-list {
    list-style: none;
    display: grid;
    gap: 14px;
}

.compare-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    transition: background var(--transition), transform var(--transition);
}

.compare-list li:hover {
    background: var(--surface-light);
    transform: translateX(4px);
}

.compare-list li>i {
    flex-shrink: 0;
    margin-top: 5px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: .7rem;
}

.compare-us .compare-list li>i {
    background: rgba(16, 185, 129, .14);
    color: #059669;
}

.compare-them .compare-list li>i {
    background: rgba(239, 68, 68, .12);
    color: #dc2626;
}

.compare-list strong {
    display: block;
    font-size: .9rem;
}

.compare-list span {
    font-size: .8rem;
    color: var(--text-light);
}


/* ---------- HOVER enhancements for service sections ---------- */
.svc-hero-chips span {
    transition: transform var(--transition), background var(--transition), border-color var(--transition);
}

.svc-hero-chips span:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, .14);
    border-color: rgba(96, 165, 250, .5);
}

.catalog-row:hover .catalog-cta {
    background: var(--primary);
    color: #fff;
}

.flow-segment:hover {
    border-color: rgba(37, 99, 235, .35);
}

.addon-card:hover .addon-icon {
    background: var(--primary);
    color: #fff;
    transform: rotate(-6deg) scale(1.05);
}

.addon-icon {
    transition: background var(--transition), color var(--transition), transform var(--transition);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1000px) {
    .catalog-row {
        grid-template-columns: 180px 1fr;
    }

    .catalog-meta {
        grid-column: 1 / -1;
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
    }

    .catalog-cta {
        justify-content: center;
        grid-column: 1 / -1;
        width: 100%;
        justify-content: center;
    }

    .flow-track {
        grid-template-columns: 1fr;
    }

    .inclusion-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .inclusion-media {
        max-width: 560px;
        margin: 0 auto;
    }

    .addon-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .compare-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .svc-hero {
        padding: 130px 0 60px;
    }

    .svc-hero h1 {
        font-size: 2rem;
    }

    .svc-hero-meta div {
        min-width: 100px;
        padding: 12px 16px;
    }

    .svc-hero-meta strong {
        font-size: 1.3rem;
    }

    .catalog-row {
        grid-template-columns: 1fr;
    }

    .catalog-thumb {
        height: 160px;
    }

    .catalog-meta {
        grid-column: 1;
        display: grid;
    }

    .catalog-cta {
        grid-column: 1;
    }

    .catalog-main p {
        max-width: 100%;
    }

    .addon-grid {
        grid-template-columns: 1fr;
    }

    .inclusion-item {
        padding: 12px 14px;
    }

    .inclusion-note {
        padding: 12px;
    }

    .inclusion-note span {
        display: none;
    }
}

/* ---------- DARK MODE overrides ---------- */
body.dark-mode .svc-hero {
    background: linear-gradient(135deg, #050a14 0%, #0b1220 55%, #101b30 100%);
}

body.dark-mode .catalog-row,
body.dark-mode .addon-card,
body.dark-mode .flow-segment,
body.dark-mode .compare-card {
    background: #131b2c;
    border-color: rgba(255, 255, 255, .08);
}

body.dark-mode .catalog-main p,
body.dark-mode .addon-card p,
body.dark-mode .flow-segment p {
    color: #94a3b8;
}

body.dark-mode .catalog-meta span {
    color: #a9b4c4;
}

body.dark-mode .addon-price {
    color: #e2e8f0;
    background: rgba(255, 255, 255, .08);
}

body.dark-mode .flow-section,
body.dark-mode .compare-section {
    background: #000000;
}

body.dark-mode .compare-us:hover,
body.dark-mode .compare-them:hover {
    border-color: rgba(96, 165, 250, .4);
}

body.dark-mode .compare-list li:hover {
    background: #0d1522;
}

body.dark-mode .compare-list span {
    color: #94a3b8;
}

body.dark-mode .compare-them {
    border-top-color: #334155;
}

body.dark-mode .inclusion-item {
    background: #131b2c;
    border: 1px solid rgba(255, 255, 255, .06);
}

body.dark-mode .inclusion-item:hover {
    background: #172137;
}

body.dark-mode .inclusion-item span {
    color: #94a3b8;
}

body.dark-mode .inclusion-note {
    background: rgba(19, 27, 44, .95);
    border: 1px solid rgba(255, 255, 255, .08);
}

body.dark-mode .inclusion-note strong {
    color: #e2e8f0;
}

body.dark-mode .inclusion-note span {
    color: #94a3b8;
}

/* ---------- RTL overrides ---------- */
html[dir="rtl"] .catalog-meta span,
html[dir="rtl"] .catalog-cta {
    direction: ltr;
}

html[dir="rtl"] .catalog-cta {
    flex-direction: row;
}

html[dir="rtl"] .catalog-row {
    text-align: right;
}

html[dir="rtl"] .catalog-level {
    left: auto;
    right: 10px;
}

html[dir="rtl"] .addon-card {
    text-align: right;
}

html[dir="rtl"] .addon-price {
    right: auto;
    left: 22px;
    direction: ltr;
}

html[dir="rtl"] .flow-segment {
    text-align: right;
}

html[dir="rtl"] .flow-time {
    right: auto;
    left: 18px;
}

html[dir="rtl"] .flow-segment h3 i {
    margin-right: 0;
    margin-left: 6px;
}

html[dir="rtl"] .compare-card {
    text-align: right;
}

html[dir="rtl"] .compare-us::after {
    right: auto;
    left: 26px;
}

html[dir="rtl"] .compare-list li:hover {
    transform: translateX(-4px);
}

html[dir="rtl"] .compare-grid {
    direction: rtl;
}

html[dir="rtl"] .inclusion-item:hover {
    transform: translateX(-6px);
}

/* Timeline RTL — desktop centered layout */
@media (min-width: 1001px) {
    html[dir="rtl"] .timeline-item:nth-child(odd) {
        left: 0;
        right: auto;
        text-align: right;
    }

    html[dir="rtl"] .timeline-item:nth-child(odd) .timeline-dot {
        left: -8px;
        right: auto;
    }

    html[dir="rtl"] .timeline-item:nth-child(even) {
        right: 50%;
        left: auto;
        text-align: right;
    }

    html[dir="rtl"] .timeline-item:nth-child(even) .timeline-dot {
        right: -8px;
        left: auto;
    }
}

/* Timeline RTL — tablet & mobile layout (spine and dots on right, text aligned right) */
@media (max-width: 1000px) {
    html[dir="rtl"] .timeline::before {
        left: auto;
        right: 24px;
        transform: none;
    }

    html[dir="rtl"] .timeline-item,
    html[dir="rtl"] .timeline-item:nth-child(odd),
    html[dir="rtl"] .timeline-item:nth-child(even) {
        width: 100%;
        left: auto;
        right: 0;
        padding: 0 60px 40px 0;
        text-align: right;
    }

    html[dir="rtl"] .timeline-item:nth-child(odd) .timeline-dot,
    html[dir="rtl"] .timeline-item:nth-child(even) .timeline-dot {
        left: auto;
        right: 16px;
    }
}

@media (max-width: 600px) {
    html[dir="rtl"] .timeline::before {
        left: auto;
        right: 18px;
    }

    html[dir="rtl"] .timeline-item,
    html[dir="rtl"] .timeline-item:nth-child(odd),
    html[dir="rtl"] .timeline-item:nth-child(even) {
        padding-right: 50px;
        padding-left: 0;
        text-align: right;
    }

    html[dir="rtl"] .timeline-item:nth-child(odd) .timeline-dot,
    html[dir="rtl"] .timeline-item:nth-child(even) .timeline-dot {
        left: auto;
        right: 10px;
    }
}

/* ==========================================================================
   VEHICLES PAGE — UNIQUE SECTIONS
   ========================================================================== */

/* 1. VEHICLES SPOTLIGHT HERO */
.vhero {
    position: relative;
    background: #0b1220;
    padding: 160px 0 90px;
    overflow: hidden;
}

.vhero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    z-index: 0;
    pointer-events: none;
}

.vhero-glow-1 {
    width: 480px;
    height: 480px;
    top: -120px;
    right: -80px;
    background: rgba(37, 99, 235, .28);
}

.vhero-glow-2 {
    width: 360px;
    height: 360px;
    bottom: -140px;
    left: -90px;
    background: rgba(234, 88, 12, .16);
}

.vhero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 56px;
    align-items: center;
}

.vhero-breadcrumb {
    margin-bottom: 22px;
}

.vhero-content h1 {
    font-size: clamp(2.2rem, 4vw, 3.3rem);
    line-height: 1.12;
    color: #f1f5f9;
    margin: 0 0 20px;
}

.vhero-content h1 span {
    background: linear-gradient(135deg, #60a5fa, #22d3ee);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.vhero-content>p {
    color: #94a3b8;
    font-size: 1.06rem;
    line-height: 1.75;
    max-width: 520px;
    margin: 0 0 24px;
}

.vhero-ticks {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    margin-bottom: 30px;
}

.vhero-ticks span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #cbd5e1;
    font-size: .92rem;
    font-weight: 500;
}

.vhero-ticks i {
    color: #22d3ee;
    font-size: 1rem;
}

.vhero-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.vhero-visual {
    position: relative;
}

.vhero-visual img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 30px 70px rgba(2, 6, 23, .55);
    transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .5s ease;
}

.vhero-visual:hover img {
    transform: scale(1.025) translateY(-4px);
    box-shadow: 0 36px 85px rgba(2, 6, 23, .7);
}

.vhero-badge {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(15, 23, 42, .92);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 14px;
    padding: 14px 18px;
    backdrop-filter: blur(10px);
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
    cursor: default;
}

.vhero-badge:hover {
    transform: translateY(-5px) scale(1.03);
    border-color: rgba(96, 165, 250, .45);
    box-shadow: 0 18px 40px rgba(15, 23, 42, .5);
}

.vhero-badge i {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    font-size: 1.1rem;
    background: linear-gradient(135deg, #3b82f6, #22d3ee);
    color: #fff;
    transition: transform .3s ease;
}

.vhero-badge:hover i {
    transform: scale(1.12) rotate(6deg);
}

.vhero-badge strong {
    display: block;
    color: #f1f5f9;
    font-size: .95rem;
}

.vhero-badge span {
    color: #94a3b8;
    font-size: .78rem;
}

.vhero-badge-1 {
    top: 20px;
    left: -22px;
}

.vhero-badge-2 {
    bottom: 26px;
    right: -18px;
}

.vhero-ticks span {
    transition: transform .25s ease, color .25s ease;
    cursor: default;
}

.vhero-ticks span:hover {
    transform: translateY(-2px);
    color: #ffffff;
}

.vhero-ticks span i {
    transition: transform .25s ease;
}

.vhero-ticks span:hover i {
    transform: scale(1.25);
}

/* 2. FLEET SPEC ROWS */
.fleet-section {
    padding-top: 96px;
}

.fleet-list {
    display: grid;
    gap: 40px;
    margin-top: 50px;
}

.fleet-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 44px;
    align-items: center;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    padding: 26px;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.fleet-row:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 55px rgba(15, 23, 42, .14);
    border-color: #93c5fd;
}

.fleet-media {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
}

.fleet-media img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 16px;
    display: block;
    transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}

.fleet-row:hover .fleet-media img {
    transform: scale(1.06);
}

.fleet-tag {
    position: absolute;
    top: 16px;
    left: 16px;
    background: rgba(15, 23, 42, .85);
    color: #e0f2fe;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .16);
    backdrop-filter: blur(6px);
    transition: transform .3s ease, background .3s ease, color .3s ease;
}

.fleet-row:hover .fleet-tag {
    transform: translateY(-2px);
    background: #2563eb;
    color: #ffffff;
}

.fleet-info h3 {
    font-size: 1.7rem;
    color: #0f172a;
    margin: 0 0 10px;
    transition: color .25s ease;
}

.fleet-row:hover .fleet-info h3 {
    color: #2563eb;
}

.fleet-info>p {
    color: #475569;
    font-size: .98rem;
    line-height: 1.7;
    margin: 0 0 20px;
}

.fleet-spec {
    margin: 0 0 22px;
}

.fleet-spec>div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 8px;
    border-bottom: 1px dashed #e2e8f0;
    border-radius: 8px;
    transition: background .2s ease, padding .2s ease;
}

.fleet-spec>div:first-child {
    padding-top: 11px;
}

.fleet-spec>div:hover {
    background: rgba(37, 99, 235, .06);
    padding-left: 12px;
    padding-right: 12px;
}

.fleet-spec dt {
    color: #64748b;
    font-size: .88rem;
    font-weight: 500;
}

.fleet-spec dd {
    margin: 0;
    color: #0f172a;
    font-size: .92rem;
    font-weight: 700;
    text-align: end;
}

.fleet-spec dd i {
    color: #f59e0b;
    margin-right: 4px;
}

.fleet-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: .94rem;
    color: #2563eb;
    transition: gap .25s ease, color .25s ease, transform .25s ease;
}

.fleet-btn i {
    transition: transform .25s ease;
}

.fleet-btn:hover {
    gap: 12px;
    color: #1d4ed8;
    transform: translateX(3px);
}

.fleet-btn:hover i {
    transform: translateX(4px);
}

/* 3. SAFETY BAND */
.safety-band {
    position: relative;
    padding: 110px 0;
    overflow: hidden;
}

.safety-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}

.safety-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(11, 18, 32, .93), rgba(15, 23, 42, .85));
    z-index: 1;
}

.safety-inner {
    position: relative;
    z-index: 2;
}

.safety-heading h2,
.safety-heading h2 span,
.safety-heading p,
.safety-heading .section-label {
    color: #fff;
}

.safety-heading h2 span {
    background: linear-gradient(135deg, #fbbf24, #fb923c);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.safety-heading p {
    color: #cbd5e1;
}

.safety-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    margin-top: 50px;
}

.safety-card {
    position: relative;
    background: rgba(15, 23, 42, .5);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 18px;
    padding: 28px 24px 26px;
    backdrop-filter: blur(8px);
    transition: transform .35s cubic-bezier(.2, .8, .2, 1), border-color .35s ease, background .35s ease, box-shadow .35s ease;
}

.safety-card:hover {
    transform: translateY(-8px);
    border-color: rgba(251, 191, 36, .65);
    background: rgba(15, 23, 42, .75);
    box-shadow: 0 20px 45px rgba(0, 0, 0, .4);
}

.safety-num {
    position: absolute;
    top: 16px;
    right: 18px;
    font-size: 2rem;
    font-weight: 800;
    color: rgba(255, 255, 255, .08);
    line-height: 1;
    transition: transform .35s ease, color .35s ease;
}

.safety-card:hover .safety-num {
    color: rgba(251, 191, 36, .22);
    transform: scale(1.12);
}

.safety-card i {
    font-size: 1.5rem;
    color: #fbbf24;
    margin-bottom: 16px;
    transition: transform .35s cubic-bezier(.2, .8, .2, 1);
    display: inline-block;
}

.safety-card:hover i {
    transform: scale(1.2) rotate(6deg);
}

.safety-card h3 {
    color: #f8fafc;
    font-size: 1.05rem;
    margin: 0 0 8px;
    transition: color .25s ease;
}

.safety-card:hover h3 {
    color: #fde68a;
}

.safety-card p {
    color: #cbd5e1;
    font-size: .9rem;
    line-height: 1.65;
    margin: 0;
}

/* 4. AUTO VS MANUAL */
.gear-section {
    padding-top: 96px;
}

.gear-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
    margin-top: 50px;
}

.gear-card {
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease, border-color .35s ease;
}

.gear-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 55px rgba(15, 23, 42, .14);
    border-color: #93c5fd;
}

.gear-media {
    position: relative;
    overflow: hidden;
}

.gear-media img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}

.gear-card:hover .gear-media img {
    transform: scale(1.06);
}

.gear-badge {
    position: absolute;
    bottom: 14px;
    left: 16px;
    background: linear-gradient(135deg, #3b82f6, #22d3ee);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    padding: 7px 14px;
    border-radius: 999px;
    transition: transform .3s ease;
}

.gear-card:hover .gear-badge {
    transform: translateY(-3px) scale(1.04);
}

.gear-card:nth-child(2) .gear-badge {
    background: linear-gradient(135deg, #f59e0b, #f97316);
}

.gear-body {
    padding: 26px 26px 30px;
}

.gear-body h3 {
    font-size: 1.35rem;
    color: #0f172a;
    margin: 0 0 16px;
    transition: color .25s ease;
}

.gear-card:hover .gear-body h3 {
    color: #2563eb;
}

.gear-card:nth-child(2):hover .gear-body h3 {
    color: #ea580c;
}

.gear-body ul {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
    display: grid;
    gap: 10px;
}

.gear-body li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #334155;
    font-size: .95rem;
    line-height: 1.5;
    padding: 3px 6px;
    border-radius: 6px;
    transition: transform .25s ease, color .25s ease, background .25s ease;
}

.gear-body li:hover {
    transform: translateX(6px);
    color: #0f172a;
    background: rgba(37, 99, 235, .06);
}

.gear-body li i {
    color: #10b981;
    font-size: .95rem;
    margin-top: 3px;
    transition: transform .25s ease;
}

.gear-body li:hover i {
    transform: scale(1.25);
}

.gear-note {
    display: block;
    background: #f1f5f9;
    border-left: 3px solid #2563eb;
    color: #475569;
    font-size: .86rem;
    line-height: 1.6;
    padding: 12px 14px;
    border-radius: 0 10px 10px 0;
    transition: transform .3s ease, box-shadow .3s ease;
}

.gear-card:hover .gear-note {
    transform: translateX(4px);
    box-shadow: 0 8px 20px rgba(37, 99, 235, .08);
}

.gear-card:nth-child(2) .gear-note {
    border-left-color: #f97316;
    background: #fff7ed;
    color: #7c2d12;
}

/* 5. MAINTAINED & HYGIENIC SPLIT */
.care-section {
    padding: 96px 0;
}

.care-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}

.care-media {
    position: relative;
}

.care-media img {
    width: 100%;
    aspect-ratio: 5 / 4;
    object-fit: cover;
    border-radius: 22px;
    display: block;
    box-shadow: 0 24px 50px rgba(15, 23, 42, .14);
    transition: transform .6s cubic-bezier(.2, .8, .2, 1), box-shadow .6s ease;
}

.care-media:hover img {
    transform: scale(1.025);
    box-shadow: 0 30px 65px rgba(15, 23, 42, .22);
}

.care-badge {
    position: absolute;
    bottom: 24px;
    right: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(15, 23, 42, .92);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 14px;
    padding: 14px 18px;
    backdrop-filter: blur(10px);
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
    cursor: default;
}

.care-badge:hover {
    transform: translateY(-6px) scale(1.03);
    border-color: rgba(96, 165, 250, .45);
    box-shadow: 0 18px 40px rgba(15, 23, 42, .45);
}

.care-badge i {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: linear-gradient(135deg, #3b82f6, #22d3ee);
    color: #fff;
    font-size: 1.1rem;
    transition: transform .35s ease;
}

.care-badge:hover i {
    transform: rotate(8deg) scale(1.12);
}

.care-badge strong {
    display: block;
    color: #f1f5f9;
    font-size: .9rem;
}

.care-badge span {
    color: #60a5fa;
    font-size: .85rem;
    font-weight: 700;
}

.care-content h2 {
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    line-height: 1.15;
    color: #0f172a;
    margin: 14px 0 16px;
}

.care-content h2 span {
    background: linear-gradient(135deg, #2563eb, #22d3ee);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.care-content>p {
    color: #475569;
    font-size: 1rem;
    line-height: 1.75;
    margin: 0 0 26px;
    max-width: 520px;
}

.care-list {
    display: grid;
    gap: 14px;
}

.care-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 15px 18px;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.care-item:hover {
    transform: translateX(8px);
    border-color: #93c5fd;
    box-shadow: 0 14px 34px rgba(37, 99, 235, .12);
}

.care-item i {
    color: #10b981;
    font-size: 1.15rem;
    margin-top: 2px;
    transition: transform .25s ease;
}

.care-item:hover i {
    transform: scale(1.25);
}

.care-item strong {
    display: block;
    color: #0f172a;
    font-size: .95rem;
}

.care-item span {
    color: #64748b;
    font-size: .84rem;
}

/* 6. FIND YOUR FIT */
.fit-section {
    padding: 0 0 96px;
}

.fit-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    margin-top: 50px;
}

.fit-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 20px;
    transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease, border-color .35s ease;
}

.fit-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 22px 50px rgba(15, 23, 42, .14);
    border-color: #93c5fd;
}

.fit-top {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: .86rem;
    font-weight: 700;
    color: #2563eb;
    margin-bottom: 16px;
}

.fit-top i {
    transition: transform .3s ease;
}

.fit-card:hover .fit-top i {
    transform: rotate(14deg) scale(1.2);
}

.fit-pair {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 14px;
    overflow: hidden;
    border-radius: 12px;
}

.fit-pair img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 12px;
    display: block;
    transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}

.fit-card:hover .fit-pair img {
    transform: scale(1.08);
}

.fit-arrow {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #eff6ff;
    color: #2563eb;
    font-size: .9rem;
    transition: transform .3s ease, background .3s ease, color .3s ease;
}

.fit-card:hover .fit-arrow {
    transform: translateX(4px) scale(1.1);
}

.fit-result {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
}

.fit-result i {
    color: #2563eb;
    font-size: 1.2rem;
    transition: transform .3s ease;
}

.fit-card:hover .fit-result i {
    transform: scale(1.2);
}

.fit-result strong {
    font-size: .84rem;
    color: #0f172a;
}

.fit-result span {
    font-size: .73rem;
    color: #64748b;
    line-height: 1.35;
}

.fit-card:nth-child(2) .fit-top,
.fit-card:nth-child(2) .fit-result i {
    color: #f97316;
}

.fit-card:nth-child(2) .fit-arrow {
    background: #fff7ed;
    color: #f97316;
}

.fit-card:nth-child(3) .fit-top,
.fit-card:nth-child(3) .fit-result i {
    color: #a855f7;
}

.fit-card:nth-child(3) .fit-arrow {
    background: #faf5ff;
    color: #a855f7;
}

.fit-card:nth-child(4) .fit-top,
.fit-card:nth-child(4) .fit-result i {
    color: #10b981;
}

.fit-card:nth-child(4) .fit-arrow {
    background: #ecfdf5;
    color: #10b981;
}

/* 7. RESERVE BAND */
.reserve-band {
    position: relative;
    padding: 110px 0;
    overflow: hidden;
}

.reserve-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    transition: transform .8s cubic-bezier(.2, .8, .2, 1);
}

.reserve-band:hover .reserve-bg {
    transform: scale(1.035);
}

.reserve-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(11, 18, 32, .95), rgba(15, 23, 42, .82));
    z-index: 1;
}

.reserve-inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.reserve-text h2 {
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    color: #f8fafc;
    margin: 14px 0 14px;
    line-height: 1.15;
}

.reserve-text h2 span {
    background: linear-gradient(135deg, #60a5fa, #22d3ee);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.reserve-text p {
    color: #cbd5e1;
    font-size: 1rem;
    line-height: 1.75;
    margin: 0;
    max-width: 560px;
}

.reserve-actions {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 240px;
}

.reserve-btn {
    width: 100%;
    justify-content: center;
    transition: transform .3s ease, box-shadow .3s ease;
}

.reserve-btn i {
    transition: transform .25s ease;
}

.reserve-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(37, 99, 235, .4);
}

.reserve-btn:hover i {
    transform: translateX(5px);
}

.reserve-btn-2 {
    width: 100%;
    justify-content: center;
    transition: transform .3s ease, background .3s ease, border-color .3s ease, color .3s ease;
}

.reserve-btn-2:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, .15);
    border-color: rgba(255, 255, 255, .4);
    color: #fff;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1000px) {
    .vhero-grid {
        grid-template-columns: 1fr;
        gap: 44px;
    }

    .vhero-content h1 {
        font-size: clamp(2rem, 5vw, 2.8rem);
    }

    .vhero-badge-1 {
        left: 14px;
    }

    .vhero-badge-2 {
        right: 14px;
    }

    .fleet-row {
        grid-template-columns: 1fr;
    }

    .fleet-media {
        max-width: 560px;
    }

    .safety-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .fit-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .care-grid {
        grid-template-columns: 1fr;
    }

    .care-media {
        max-width: 520px;
    }

    .reserve-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .care-section {
        padding: 80px 0;
    }

    .fit-section {
        padding: 0 0 80px;
    }
}

@media (max-width: 600px) {
    .vhero {
        padding: 130px 0 60px;
    }

    .vhero-ticks {
        gap: 10px 16px;
    }

    .vhero-btns {
        flex-direction: column;
    }

    .vhero-btns .primary-btn,
    .vhero-btns .secondary-btn {
        width: 100%;
        justify-content: center;
    }

    .vhero-badge-1 {
        top: 12px;
        left: 10px;
        padding: 10px 12px;
    }

    .vhero-badge-2 {
        bottom: 12px;
        right: 10px;
        padding: 10px 12px;
    }

    .vhero-badge i {
        width: 34px;
        height: 34px;
        font-size: .95rem;
    }

    .fleet-list {
        gap: 26px;
        margin-top: 40px;
    }

    .fleet-row {
        padding: 18px;
        gap: 26px;
    }

    .safety-band {
        padding: 80px 0;
    }

    .safety-grid {
        grid-template-columns: 1fr;
    }

    .gear-grid {
        grid-template-columns: 1fr;
    }

    .care-grid {
        gap: 40px;
    }

    .fit-grid {
        grid-template-columns: 1fr;
    }

    .reserve-band {
        padding: 80px 0;
    }

    .reserve-actions {
        width: 100%;
        min-width: 0;
    }
}

/* ---------- DARK MODE overrides ---------- */
body.dark-mode .fleet-row,
body.dark-mode .gear-card,
body.dark-mode .care-item,
body.dark-mode .fit-card {
    background: rgba(15, 23, 42, .85);
    border-color: rgba(255, 255, 255, .1);
}

body.dark-mode .fleet-info h3,
body.dark-mode .gear-body h3,
body.dark-mode .fit-result strong,
body.dark-mode .care-item strong {
    color: #f1f5f9;
}

body.dark-mode .fleet-info>p,
body.dark-mode .gear-body li,
body.dark-mode .care-item span,
body.dark-mode .fit-result span {
    color: #cbd5e1;
}

body.dark-mode .fleet-spec dt {
    color: #94a3b8;
}

body.dark-mode .fleet-spec dd {
    color: #f1f5f9;
}

body.dark-mode .fleet-spec>div {
    border-color: rgba(255, 255, 255, .12);
}

body.dark-mode .gear-note,
body.dark-mode .gear-card:nth-child(2) .gear-note {
    background: rgba(255, 255, 255, .06);
    border-color: #3b82f6;
    color: #cbd5e1;
}

body.dark-mode .gear-card:nth-child(2) .gear-note {
    border-color: #f97316;
    color: #cbd5e1;
}

body.dark-mode .care-content h2 {
    color: #f8fafc;
}

body.dark-mode .care-content>p {
    color: #94a3b8;
}

body.dark-mode .care-content h2 span {
    background: linear-gradient(135deg, #60a5fa, #22d3ee);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

body.dark-mode .care-badge {
    background: rgba(15, 23, 42, .95);
}

body.dark-mode .fit-arrow {
    background: rgba(59, 130, 246, .18);
}

body.dark-mode .fit-card:nth-child(2) .fit-arrow {
    background: rgba(249, 115, 22, .2);
}

body.dark-mode .fit-card:nth-child(3) .fit-arrow {
    background: rgba(168, 85, 247, .2);
}

body.dark-mode .fit-card:nth-child(4) .fit-arrow {
    background: rgba(16, 185, 129, .2);
}

body.dark-mode .fleet-row:hover,
body.dark-mode .gear-card:hover,
body.dark-mode .fit-card:hover {
    border-color: rgba(59, 130, 246, .5);
    box-shadow: 0 24px 55px rgba(2, 6, 23, .55);
}

body.dark-mode .fleet-row:hover .fleet-info h3 {
    color: #60a5fa;
}

body.dark-mode .fleet-spec>div:hover {
    background: rgba(59, 130, 246, .12);
}

body.dark-mode .gear-card:hover .gear-body h3 {
    color: #60a5fa;
}

body.dark-mode .gear-card:nth-child(2):hover .gear-body h3 {
    color: #fb923c;
}

body.dark-mode .gear-body li:hover {
    color: #f1f5f9;
    background: rgba(59, 130, 246, .12);
}

body.dark-mode .care-item:hover {
    border-color: rgba(59, 130, 246, .5);
    box-shadow: 0 14px 34px rgba(2, 6, 23, .45);
}

/* ---------- RTL overrides ---------- */
html[dir="rtl"] .vhero-badge-1 {
    left: auto;
    right: -22px;
}

html[dir="rtl"] .vhero-badge-2 {
    right: auto;
    left: -18px;
}

html[dir="rtl"] .gear-card:nth-child(2) .gear-badge {
    left: auto;
}

html[dir="rtl"] .fleet-spec dd {
    text-align: start;
}

html[dir="rtl"] .fleet-btn:hover {
    transform: translateX(-3px);
}

html[dir="rtl"] .fleet-btn:hover i {
    transform: rotate(180deg) translateX(4px);
}

html[dir="rtl"] .gear-body li:hover {
    transform: translateX(-6px);
}

html[dir="rtl"] .gear-card:hover .gear-note {
    transform: translateX(-4px);
}

html[dir="rtl"] .care-item:hover {
    transform: translateX(-8px);
}

html[dir="rtl"] .fit-card:hover .fit-arrow {
    transform: translateX(-4px) scale(1.1);
}

html[dir="rtl"] .reserve-btn:hover i {
    transform: rotate(180deg) translateX(5px);
}

html[dir="rtl"] .gear-note {
    border-left: 0;
    border-right: 3px solid #2563eb;
    border-radius: 10px 0 0 10px;
}

html[dir="rtl"] .gear-card:nth-child(2) .gear-note {
    border-right-color: #f97316;
}

html[dir="rtl"] .care-badge {
    right: auto;
    left: 24px;
}

@media (max-width: 1000px) {
    html[dir="rtl"] .vhero-badge-1 {
        left: auto;
        right: 14px;
    }

    html[dir="rtl"] .vhero-badge-2 {
        right: auto;
        left: 14px;
    }

    html[dir="rtl"] .care-badge {
        left: 14px;
    }
}

/* ==========================================================================
   PRICING PAGE — UNIQUE SECTIONS
   ========================================================================== */

/* 1. PRICE HERO */
.pr-hero {
    position: relative;
    background: #0b1220;
    padding: 160px 0 90px;
    overflow: hidden;
}

.pr-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    z-index: 0;
    pointer-events: none;
}

.pr-glow-1 {
    width: 480px;
    height: 480px;
    top: -130px;
    left: -90px;
    background: rgba(37, 99, 235, .28);
}

.pr-glow-2 {
    width: 380px;
    height: 380px;
    bottom: -150px;
    right: -100px;
    background: rgba(234, 88, 12, .16);
}

.pr-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 56px;
    align-items: center;
}

.pr-breadcrumb {
    margin-bottom: 22px;
}

.pr-hero-content h1 {
    font-size: clamp(2.2rem, 4vw, 3.3rem);
    line-height: 1.12;
    color: #f1f5f9;
    margin: 0 0 20px;
}

.pr-hero-content h1 span {
    background: linear-gradient(135deg, #60a5fa, #22d3ee);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.pr-hero-content>p {
    color: #94a3b8;
    font-size: 1.06rem;
    line-height: 1.75;
    max-width: 520px;
    margin: 0 0 24px;
}

.pr-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    margin-bottom: 30px;
}

.pr-chips span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #cbd5e1;
    font-size: .92rem;
    font-weight: 500;
}

.pr-chips i {
    color: #22d3ee;
    font-size: 1rem;
}

.pr-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.pr-visual {
    position: relative;
}

.pr-visual img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 30px 70px rgba(2, 6, 23, .55);
}

.pr-badge {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(15, 23, 42, .92);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 14px;
    padding: 14px 18px;
    backdrop-filter: blur(10px);
}

.pr-badge i {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    font-size: 1.1rem;
    background: linear-gradient(135deg, #10b981, #22d3ee);
    color: #fff;
}

.pr-badge strong {
    display: block;
    color: #f1f5f9;
    font-size: .95rem;
}

.pr-badge span {
    color: #94a3b8;
    font-size: .78rem;
}

.pr-badge-1 {
    top: 20px;
    right: -22px;
}

.pr-badge-2 {
    bottom: 26px;
    left: -18px;
}

/* 2. LESSON PACKS */
.pr-plans {
    padding-top: 96px;
}

.pr-plan-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    align-items: stretch;
    margin-top: 50px;
}

.pr-plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 32px 28px 28px;
    transition: transform .35s ease, box-shadow .35s ease;
}

.pr-plan-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 50px rgba(15, 23, 42, .12);
}

.pr-plan-card.featured {
    border: 2px solid #2563eb;
    box-shadow: 0 22px 55px rgba(37, 99, 235, .16);
}

.pr-plan-top {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.pr-plan-tag {
    align-self: flex-start;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    color: #2563eb;
    background: #eff6ff;
    padding: 6px 12px;
    border-radius: 999px;
}

.pr-plan-card.featured .pr-plan-tag {
    background: #2563eb;
    color: #fff;
}

.pr-plan-top h3 {
    font-size: 1.35rem;
    color: #0f172a;
    margin: 0;
}

.pr-plan-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 10px;
}

.pr-plan-price strong {
    font-size: 2.2rem;
    color: #0f172a;
    line-height: 1;
}

.pr-plan-price span {
    color: #64748b;
    font-size: .9rem;
    font-weight: 600;
}

.pr-plan-desc {
    color: #64748b;
    font-size: .92rem;
    line-height: 1.65;
    margin: 0 0 18px;
    min-height: 48px;
}

.pr-plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    display: grid;
    gap: 11px;
    flex: 1;
}

.pr-plan-features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #334155;
    font-size: .92rem;
    line-height: 1.5;
}

.pr-plan-features i {
    color: #10b981;
    font-size: .95rem;
    margin-top: 3px;
}

.pr-plan-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #f1f5f9;
    color: #0f172a;
    font-weight: 700;
    font-size: .95rem;
    padding: 13px 18px;
    border-radius: 12px;
    border: 1px solid #2563eb;
    transition: background .25s ease, color .25s ease;
}

.pr-plan-btn:hover {
    background: #2563eb;
    color: #fff;
}

.pr-plan-card.featured .pr-plan-btn {
    background: #2563eb;
    color: #fff;
}

.pr-plan-card.featured .pr-plan-btn:hover {
    background: #1d4ed8;
}

.pr-save-badge {
    position: absolute;
    top: -13px;
    right: 22px;
    background: linear-gradient(135deg, #f59e0b, #f97316);
    color: #fff;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .06em;
    padding: 7px 14px;
    border-radius: 999px;
    box-shadow: 0 10px 24px rgba(249, 115, 22, .35);
}

/* 3. PRICE LIST TABLE */
.pr-list-section {
    padding-bottom: 96px;
}

.pr-table-wrap {
    margin-top: 40px;
    overflow-x: auto;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: #ffffff;
}

.pr-table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-size: .94rem;
}

.pr-table thead {
    background: #0b1220;
    color: #e2e8f0;
}

.pr-table th {
    text-align: start;
    padding: 16px 20px;
    font-size: .82rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-weight: 700;
}

.pr-table td {
    padding: 15px 20px;
    border-top: 1px solid #e2e8f0;
    color: #475569;
    vertical-align: middle;
}

.pr-table td i {
    color: #2563eb;
    margin-right: 8px;
}

.pr-table tbody tr {
    transition: background .2s ease;
}

.pr-table tbody tr:hover {
    background: #f8fafc;
}

.pr-price-cell {
    font-weight: 800;
    color: #0f172a !important;
    white-space: nowrap;
}

.pr-table-note {
    margin: 18px 0 0;
    color: #64748b;
    font-size: .88rem;
    line-height: 1.6;
}

/* 4. SAVINGS SCALE */
.pr-scale-section {
    padding: 0 0 96px;
}

.pr-scale-list {
    display: grid;
    gap: 30px;
    margin-top: 50px;
}

.pr-scale-row {
    display: grid;
    grid-template-columns: 200px 1fr 180px;
    align-items: center;
    gap: 24px;
}

.pr-scale-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.pr-scale-meta span {
    color: #64748b;
    font-size: .9rem;
    font-weight: 600;
}

.pr-scale-meta strong {
    color: #0f172a;
    font-size: 1.05rem;
}

.pr-scale-track {
    height: 14px;
    border-radius: 999px;
    background: #e2e8f0;
    overflow: hidden;
}

.pr-scale-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #3b82f6, #22d3ee);
    transition: width 1s ease;
}

.pr-scale-1 {
    width: 100%;
}

.pr-scale-2 {
    width: 82%;
    background: linear-gradient(90deg, #2563eb, #38bdf8);
}

.pr-scale-3 {
    width: 68%;
    background: linear-gradient(90deg, #10b981, #22d3ee);
}

.pr-scale-row em {
    font-style: normal;
    font-weight: 800;
    font-size: .86rem;
    color: #2563eb;
    text-align: end;
}

.pr-scale-row:nth-child(2) em {
    color: #0ea5e9;
}

.pr-scale-row:nth-child(3) em {
    color: #10b981;
}

/* 5. NO HIDDEN CHARGES SPLIT */
.pr-trans-section {
    padding: 96px 0;
    background: #f8fafc;
}

.pr-trans-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}

.pr-trans-media {
    position: relative;
}

.pr-trans-media img {
    width: 100%;
    aspect-ratio: 5 / 4;
    object-fit: cover;
    border-radius: 22px;
    display: block;
    box-shadow: 0 24px 50px rgba(15, 23, 42, .14);
}

.pr-trans-badge {
    position: absolute;
    bottom: 24px;
    left: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(15, 23, 42, .92);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 14px;
    padding: 14px 18px;
    backdrop-filter: blur(10px);
}

.pr-trans-badge i {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: linear-gradient(135deg, #10b981, #22d3ee);
    color: #fff;
    font-size: 1.1rem;
}

.pr-trans-badge strong {
    display: block;
    color: #f1f5f9;
    font-size: .9rem;
}

.pr-trans-badge span {
    color: #34d399;
    font-size: .85rem;
    font-weight: 700;
}

.pr-trans-content h2 {
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    line-height: 1.15;
    color: #0f172a;
    margin: 14px 0 16px;
}

.pr-trans-content h2 span {
    background: linear-gradient(135deg, #2563eb, #22d3ee);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.pr-trans-content>p {
    color: #475569;
    font-size: 1rem;
    line-height: 1.75;
    margin: 0 0 26px;
    max-width: 540px;
}

.pr-trans-list {
    display: grid;
    gap: 14px;
}

.pr-trans-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 15px 18px;
    transition: transform .3s ease, box-shadow .3s ease;
}

.pr-trans-item:hover {
    transform: translateX(4px);
    box-shadow: 0 12px 30px rgba(15, 23, 42, .08);
}

.pr-trans-item i {
    color: #10b981;
    font-size: 1.15rem;
    margin-top: 2px;
}

.pr-trans-item strong {
    display: block;
    color: #0f172a;
    font-size: .95rem;
}

.pr-trans-item span {
    color: #64748b;
    font-size: .84rem;
}

/* 6. FLEXIBLE PAYMENT */
.pr-pay-section {
    padding: 96px 0 90px;
}

.pr-pay-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    margin-top: 50px;
}

.pr-pay-card {
    text-align: center;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 30px 22px;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.pr-pay-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(15, 23, 42, .12);
    border-color: #bfdbfe;
}

.pr-pay-icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 18px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 1.4rem;
}

.pr-pay-card h3 {
    font-size: 1.05rem;
    color: #0f172a;
    margin: 0 0 8px;
}

.pr-pay-card p {
    color: #64748b;
    font-size: .88rem;
    line-height: 1.6;
    margin: 0;
}

/* 7. MONEY-BACK GUARANTEE BAND */
.pr-refund-band {
    position: relative;
    padding: 110px 0;
    overflow: hidden;
}

.pr-refund-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}

.pr-refund-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(11, 18, 32, .93), rgba(15, 23, 42, .86));
    z-index: 1;
}

.pr-refund-inner {
    position: relative;
    z-index: 2;
}

.pr-refund-head h2,
.pr-refund-head h2 span,
.pr-refund-head p,
.pr-refund-head .section-label {
    color: #fff;
}

.pr-refund-head h2 span {
    background: linear-gradient(135deg, #34d399, #22d3ee);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.pr-refund-head p {
    color: #cbd5e1;
}

.pr-refund-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 50px;
}

.pr-refund-card {
    position: relative;
    background: rgba(15, 23, 42, .5);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 18px;
    padding: 28px 24px 26px;
    backdrop-filter: blur(8px);
    transition: transform .3s ease, border-color .3s ease, background .3s ease;
}

.pr-refund-card:hover {
    transform: translateY(-6px);
    border-color: rgba(52, 211, 153, .55);
    background: rgba(15, 23, 42, .68);
}

.pr-refund-num {
    position: absolute;
    top: 16px;
    right: 18px;
    font-size: 2rem;
    font-weight: 800;
    color: rgba(255, 255, 255, .08);
    line-height: 1;
}

.pr-refund-card i {
    font-size: 1.5rem;
    color: #34d399;
    margin-bottom: 16px;
}

.pr-refund-card h3 {
    color: #f8fafc;
    font-size: 1.05rem;
    margin: 0 0 8px;
}

.pr-refund-card p {
    color: #cbd5e1;
    font-size: .9rem;
    line-height: 1.65;
    margin: 0;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1000px) {
    .pr-hero-grid {
        grid-template-columns: 1fr;
        gap: 44px;
    }

    .pr-hero-content h1 {
        font-size: clamp(2rem, 5vw, 2.8rem);
    }

    .pr-badge-1 {
        right: 14px;
    }

    .pr-badge-2 {
        left: 14px;
    }

    .pr-plan-grid {
        grid-template-columns: 1fr;
        max-width: 480px;
        margin-left: auto;
        margin-right: auto;
    }

    .pr-trans-grid {
        grid-template-columns: 1fr;
    }

    .pr-trans-media {
        max-width: 520px;
    }

    .pr-pay-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pr-scale-row {
        grid-template-columns: 160px 1fr 150px;
        gap: 16px;
    }

    .pr-refund-grid {
        gap: 18px;
    }
}

@media (max-width: 600px) {
    .pr-hero {
        padding: 130px 0 60px;
    }

    .pr-chips {
        gap: 10px 16px;
    }

    .pr-btns {
        flex-direction: column;
    }

    .pr-btns .primary-btn,
    .pr-btns .secondary-btn {
        width: 100%;
        justify-content: center;
    }

    .pr-badge-1 {
        top: 12px;
        right: 10px;
        padding: 10px 12px;
    }

    .pr-badge-2 {
        bottom: 12px;
        left: 10px;
        padding: 10px 12px;
    }

    .pr-badge i {
        width: 34px;
        height: 34px;
        font-size: .95rem;
    }

    .pr-plan-grid {
        gap: 24px;
    }

    .pr-plan-card {
        padding: 26px 22px 24px;
    }

    .pr-scale-row {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 18px;
        border: 1px solid #e2e8f0;
        border-radius: 14px;
    }

    .pr-scale-row em {
        text-align: start;
    }

    .pr-trans-section {
        padding: 80px 0;
    }

    .pr-trans-grid {
        gap: 40px;
    }

    .pr-pay-section {
        padding: 80px 0 70px;
    }

    .pr-pay-grid {
        grid-template-columns: 1fr;
    }

    .pr-list-section {
        padding-bottom: 80px;
    }

    .pr-refund-band {
        padding: 80px 0;
    }

    .pr-refund-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- DARK MODE overrides ---------- */
body.dark-mode .pr-plan-card {
    background: rgba(15, 23, 42, .85);
    border-color: rgba(255, 255, 255, .1);
}

body.dark-mode .pr-plan-card.featured {
    border-color: #3b82f6;
}

body.dark-mode .pr-plan-top h3,
body.dark-mode .pr-plan-price strong,
body.dark-mode .pr-trans-item strong {
    color: #f1f5f9;
}

body.dark-mode .pr-plan-desc,
body.dark-mode .pr-plan-features li,
body.dark-mode .pr-trans-item span {
    color: #cbd5e1;
}

body.dark-mode .pr-plan-btn:not(.featured) {
    background: rgba(255, 255, 255, .08);
    color: #f1f5f9;
}

body.dark-mode .pr-plan-btn:not(.featured):hover {
    background: #2563eb;
    color: #fff;
}

body.dark-mode .pr-table-wrap {
    background: rgba(15, 23, 42, .85);
    border-color: rgba(255, 255, 255, .1);
}

body.dark-mode .pr-table thead {
    background: #0f172a;
}

body.dark-mode .pr-table td {
    border-color: rgba(255, 255, 255, .1);
    color: #cbd5e1;
}

body.dark-mode .pr-table tbody tr:hover {
    background: rgba(255, 255, 255, .05);
}

body.dark-mode .pr-price-cell {
    color: #f1f5f9 !important;
}

body.dark-mode .pr-scale-meta strong {
    color: #f1f5f9;
}

body.dark-mode .pr-scale-track {
    background: rgba(255, 255, 255, .12);
}

body.dark-mode .pr-trans-section {
    background: #000000;
}

body.dark-mode .pr-trans-content h2 {
    color: #f8fafc;
}

body.dark-mode .pr-trans-content h2 span {
    background: linear-gradient(135deg, #60a5fa, #22d3ee);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

body.dark-mode .pr-trans-content>p {
    color: #94a3b8;
}

body.dark-mode .pr-trans-item {
    background: rgba(15, 23, 42, .85);
    border-color: rgba(255, 255, 255, .1);
}

body.dark-mode .pr-pay-card {
    background: rgba(15, 23, 42, .85);
    border-color: rgba(255, 255, 255, .1);
}

body.dark-mode .pr-pay-card h3 {
    color: #f1f5f9;
}

body.dark-mode .pr-pay-card p {
    color: #cbd5e1;
}

body.dark-mode .pr-pay-icon {
    background: rgba(59, 130, 246, .18);
    color: #93c5fd;
}

body.dark-mode .pr-refund-bg {
    filter: brightness(.6);
}

/* ---------- RTL overrides ---------- */
html[dir="rtl"] .pr-badge-1 {
    right: auto;
    left: -22px;
}

html[dir="rtl"] .pr-badge-2 {
    left: auto;
    right: -18px;
}

html[dir="rtl"] .pr-trans-badge {
    left: auto;
    right: 24px;
}

html[dir="rtl"] .pr-table td i {
    margin-right: 0;
    margin-left: 8px;
}

html[dir="rtl"] .pr-scale-row em {
    text-align: start;
}

html[dir="rtl"] .pr-save-badge {
    right: auto;
    left: 22px;
}

@media (max-width: 1000px) {
    html[dir="rtl"] .pr-badge-1 {
        right: auto;
        left: 14px;
    }

    html[dir="rtl"] .pr-badge-2 {
        left: auto;
        right: 14px;
    }

    html[dir="rtl"] .pr-trans-badge {
        right: 14px;
    }
}

/* ================= CONTACT PAGE ================= */
/* 1. CONTACT HERO */
.ct-hero {
    position: relative;
    background: #0b1220;
    padding: 160px 0 80px;
    overflow: hidden;
}

.ct-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    z-index: 0;
    filter: brightness(.55);
}

.ct-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11, 18, 32, .72) 0%, rgba(15, 23, 42, .92) 100%);
    z-index: 1;
    pointer-events: none;
}

.ct-hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    z-index: 1;
    pointer-events: none;
}

.ct-hero-glow-1 {
    width: 420px;
    height: 420px;
    top: -120px;
    right: -100px;
    background: rgba(37, 99, 235, .25);
}

.ct-hero-glow-2 {
    width: 340px;
    height: 340px;
    bottom: -140px;
    left: -90px;
    background: rgba(34, 211, 238, .14);
}

.ct-hero-inner {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 780px;
    margin: 0 auto;
}

.ct-hero-inner .about-breadcrumb {
    justify-content: center;
}

.ct-hero h1 {
    font-size: clamp(2.2rem, 5vw, 3.5rem);
    line-height: 1.15;
    color: #fff;
    letter-spacing: -.5px;
    margin-bottom: 18px;
}

.ct-hero h1 span {
    background: linear-gradient(120deg, #60a5fa, #22d3ee);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ct-hero-inner>p {
    color: rgba(255, 255, 255, .82);
    font-size: 1.05rem;
    line-height: 1.7;
    max-width: 640px;
    margin: 0 auto;
}

.ct-hero-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 28px;
}

.ct-hero-chips span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    color: rgba(255, 255, 255, .9);
    font-size: .82rem;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 999px;
    backdrop-filter: blur(6px);
}

.ct-hero-chips span i {
    color: #60a5fa;
}

/* 2. CONTACT INFO CARDS (REDESIGNED PREMIUM UI) */
.ct-info {
    padding-top: 96px;
    padding-bottom: 20px;
    position: relative;
}

.ct-info-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 50px;
}

.ct-info-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 28px 24px 24px;
    transition: transform .32s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .32s ease, border-color .32s ease;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .04);
}

.ct-info-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #2563eb, #06b6d4);
    opacity: 0;
    transition: opacity .3s ease;
}

.ct-info-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 42px rgba(37, 99, 235, .12);
    border-color: #bfdbfe;
}

.ct-info-card:hover::before {
    opacity: 1;
}

.ct-info-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.ct-info-icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    color: #2563eb;
    font-size: 1.35rem;
    box-shadow: 0 6px 16px rgba(37, 99, 235, .12);
    transition: transform .3s ease, background .3s ease;
}

.ct-info-card:hover .ct-info-icon {
    transform: scale(1.08) rotate(3deg);
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #ffffff;
}

.ct-info-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .3px;
    padding: 5px 11px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
}

.ct-info-badge.badge-live {
    background: #ecfdf5;
    color: #059669;
}

.ct-info-badge.badge-live i {
    font-size: .5rem;
    color: #10b981;
    animation: ctPulse 2s infinite;
}

@keyframes ctPulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: .4;
        transform: scale(1.3);
    }
}

.ct-info-card h3 {
    font-size: 1.12rem;
    color: #0f172a;
    font-weight: 700;
    margin: 0 0 8px;
    letter-spacing: -.2px;
}

.ct-info-desc {
    color: #64748b;
    font-size: .88rem;
    line-height: 1.6;
    margin: 0 0 16px;
    flex: 1;
}

.ct-info-highlight {
    font-size: .94rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 18px;
    line-height: 1.5;
}

.ct-info-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px solid #f1f5f9;
    margin-top: auto;
}

.ct-info-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #2563eb;
    font-weight: 700;
    font-size: .88rem;
    text-decoration: none;
    transition: gap .25s ease, color .25s ease;
}

.ct-info-link:hover {
    gap: 10px;
    color: #1d4ed8;
}

.ct-copy-btn {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #64748b;
    font-size: .82rem;
    cursor: pointer;
    transition: all .2s ease;
}

.ct-copy-btn:hover {
    background: #eff6ff;
    color: #2563eb;
    border-color: #bfdbfe;
    transform: translateY(-2px);
}

.ct-copy-btn.copied {
    background: #10b981;
    color: #ffffff;
    border-color: #10b981;
}

/* 3. FORM + MAP SECTION */
.ct-connect {
    background: #f8fafc;
    position: relative;
}

.ct-connect-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 28px;
    align-items: stretch;
}

.ct-form-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    padding: 36px 32px;
    box-shadow: 0 12px 35px rgba(15, 23, 42, .06);
    position: relative;
    overflow: hidden;
}

.ct-form-card h3 {
    font-size: 1.45rem;
    color: #0f172a;
    font-weight: 800;
    letter-spacing: -.3px;
    margin: 0 0 6px;
}

.ct-form-sub {
    color: #64748b;
    font-size: .92rem;
    margin: 0 0 24px;
}

.ct-form {
    display: grid;
    gap: 18px;
}

.ct-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.ct-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    position: relative;
}

.ct-field label {
    font-size: .84rem;
    font-weight: 700;
    color: #334155;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ct-field label .ct-req {
    color: #ef4444;
    margin-left: 3px;
}

.ct-field-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.ct-field-icon {
    position: absolute;
    left: 14px;
    color: #94a3b8;
    font-size: .9rem;
    pointer-events: none;
    transition: color .2s ease;
}

.ct-field-wrap input,
.ct-field-wrap select,
.ct-field-wrap textarea {
    width: 100%;
    font-family: inherit;
    font-size: .95rem;
    color: #0f172a;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 13px 14px 13px 42px;
    outline: none;
    transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}

.ct-field textarea {
    padding: 13px 14px 13px 42px;
    resize: vertical;
    min-height: 120px;
    line-height: 1.6;
}

.ct-field-icon.icon-top {
    top: 16px;
}

.ct-field-wrap input:focus,
.ct-field-wrap select:focus,
.ct-field-wrap textarea:focus {
    border-color: #2563eb;
    background: #ffffff;
    box-shadow: 0 0 0 3.5px rgba(37, 99, 235, .12);
}

.ct-field-wrap input:focus+.ct-field-icon,
.ct-field-wrap textarea:focus+.ct-field-icon {
    color: #2563eb;
}

/* Form Validation States */
.ct-field.has-error input,
.ct-field.has-error select,
.ct-field.has-error textarea {
    border-color: #ef4444 !important;
    background: #fff8f8 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .15) !important;
    animation: ctShake .38s cubic-bezier(.36, .07, .19, .97) both;
}

.ct-field.has-error .ct-field-icon {
    color: #ef4444;
}

.ct-field.is-valid input,
.ct-field.is-valid select,
.ct-field.is-valid textarea {
    border-color: #10b981;
}

.ct-error-msg {
    display: none;
    align-items: center;
    gap: 5px;
    color: #ef4444;
    font-size: .78rem;
    font-weight: 600;
    margin-top: 3px;
    animation: ctFadeIn .2s ease forwards;
}

.ct-field.has-error .ct-error-msg {
    display: flex;
}

@keyframes ctShake {

    10%,
    90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%,
    80% {
        transform: translate3d(2px, 0, 0);
    }

    30%,
    50%,
    70% {
        transform: translate3d(-3px, 0, 0);
    }

    40%,
    60% {
        transform: translate3d(3px, 0, 0);
    }
}

@keyframes ctFadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ct-select-wrap {
    position: relative;
    width: 100%;
}

.ct-select-wrap select {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    padding-right: 42px;
}

.ct-select-chevron {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    color: #64748b;
    font-size: .8rem;
    pointer-events: none;
}

.ct-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #ffffff;
    font-family: inherit;
    font-weight: 700;
    font-size: .98rem;
    padding: 15px 24px;
    border: 0;
    border-radius: 14px;
    cursor: pointer;
    margin-top: 6px;
    box-shadow: 0 10px 24px rgba(37, 99, 235, .25);
    transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}

.ct-submit-btn:hover {
    background: linear-gradient(135deg, #1d4ed8, #1e40af);
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(37, 99, 235, .32);
}

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

.ct-submit-btn:disabled {
    opacity: .75;
    cursor: not-allowed;
    transform: none;
}

/* Form Success Card State */
.ct-form-success {
    display: none;
    background: #f0fdf4;
    border: 1.5px solid #86efac;
    border-radius: 16px;
    padding: 32px 24px;
    text-align: center;
    animation: ctFadeIn .4s ease forwards;
}

.ct-form-success.show {
    display: block;
}

.ct-success-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #22c55e;
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 1.7rem;
    margin: 0 auto 16px;
    box-shadow: 0 8px 24px rgba(34, 197, 94, .35);
}

.ct-form-success h4 {
    font-size: 1.3rem;
    color: #14532d;
    margin: 0 0 8px;
    font-weight: 800;
}

.ct-form-success p {
    color: #166534;
    font-size: .94rem;
    line-height: 1.6;
    margin: 0 0 16px;
}

.ct-ticket-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    border: 1px dashed #22c55e;
    color: #15803d;
    padding: 6px 14px;
    border-radius: 999px;
    font-weight: 700;
    font-size: .84rem;
    margin-bottom: 20px;
}

.ct-reset-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #15803d;
    color: #ffffff;
    font-weight: 700;
    font-size: .88rem;
    padding: 10px 20px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    transition: background .2s ease;
}

.ct-reset-btn:hover {
    background: #166534;
}

.ct-form-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: #64748b;
    font-size: .82rem;
    line-height: 1.5;
    margin: 0;
}

.ct-form-note i {
    color: #10b981;
    margin-top: 2px;
}

/* MAP */
.ct-map-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    box-shadow: 0 12px 35px rgba(15, 23, 42, .08);
    min-height: 100%;
}

.ct-map-frame {
    width: 100%;
    height: 100%;
    min-height: 580px;
    border: 0;
    display: block;
    filter: saturate(.95);
}

.ct-map-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(15, 23, 42, .92);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 14px;
    padding: 13px 16px;
    backdrop-filter: blur(10px);
    max-width: 264px;
}

.ct-map-badge i {
    width: 40px;
    height: 40px;
    min-width: 40px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: linear-gradient(135deg, #10b981, #22d3ee);
    color: #fff;
    font-size: 1.05rem;
}

.ct-map-badge strong {
    display: block;
    color: #f1f5f9;
    font-size: .88rem;
    line-height: 1.35;
}

.ct-map-badge span {
    color: #94a3b8;
    font-size: .78rem;
}

.ct-map-btn {
    position: absolute;
    bottom: 20px;
    right: 20px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, .94);
    color: #0f172a;
    font-size: .85rem;
    font-weight: 700;
    padding: 11px 16px;
    border-radius: 999px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .22);
    transition: background .25s ease, color .25s ease, transform .25s ease;
}

.ct-map-btn:hover {
    background: #2563eb;
    color: #fff;
    transform: translateY(-2px);
}

/* =========================================================
   4. UNIQUE SECTION: SUPPORT SLA & GUARANTEES
========================================================= */
.ct-sla {
    padding: 100px 0;
    background: #f8fafc;
    position: relative;
}

.ct-sla-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 50px;
}

.ct-sla-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 30px 24px;
    text-align: center;
    transition: transform .3s ease, box-shadow .3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ct-sla-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 36px rgba(15, 23, 42, .08);
    border-color: #bfdbfe;
}

.ct-sla-metric {
    font-size: 2.2rem;
    font-weight: 800;
    color: #2563eb;
    letter-spacing: -.5px;
    margin-bottom: 6px;
    line-height: 1;
}

.ct-sla-card h3 {
    font-size: 1.05rem;
    color: #0f172a;
    font-weight: 700;
    margin: 0 0 10px;
}

.ct-sla-card p {
    color: #64748b;
    font-size: .86rem;
    line-height: 1.6;
    margin: 0;
}

.ct-sla-pill {
    margin-top: 16px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .74rem;
    font-weight: 700;
    color: #15803d;
    background: #dcfce7;
    padding: 4px 10px;
    border-radius: 999px;
}

/* Floating Toast Notification */
.ct-toast {
    position: fixed;
    bottom: 30px;
    right: 30px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: #0f172a;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, .15);
    padding: 14px 20px;
    border-radius: 14px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .35);
    z-index: 9999;
    transform: translateY(120%);
    opacity: 0;
    transition: transform .35s cubic-bezier(0.16, 1, 0.3, 1), opacity .35s ease;
}

.ct-toast.show {
    transform: translateY(0);
    opacity: 1;
}

.ct-toast-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #10b981;
    color: #fff;
    display: grid;
    place-items: center;
    font-size: .9rem;
}

.ct-toast-text strong {
    display: block;
    font-size: .88rem;
    color: #f8fafc;
}

.ct-toast-text span {
    font-size: .78rem;
    color: #94a3b8;
}

/* =========================================================
   5. CONTACT RESPONSIVE BREAKPOINTS
========================================================= */
@media (max-width: 1100px) {
    .ct-info-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ct-sla-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1000px) {
    .ct-hero {
        padding: 140px 0 64px;
    }

    .ct-connect-grid {
        grid-template-columns: 1fr;
    }

    .ct-map-frame {
        min-height: 460px;
    }
}

@media (max-width: 680px) {
    .ct-hero {
        padding: 128px 0 56px;
    }

    .ct-hero h1 {
        font-size: clamp(1.9rem, 7vw, 2.4rem);
    }

    .ct-hero-chips {
        gap: 8px;
    }

    .ct-info {
        padding-top: 70px;
    }

    .ct-info-grid {
        grid-template-columns: 1fr;
    }

    .ct-connect {
        padding: 70px 0;
    }

    .ct-form-card {
        padding: 26px 20px;
    }

    .ct-form-row {
        grid-template-columns: 1fr;
    }

    .ct-map-frame {
        min-height: 380px;
    }

    .ct-map-badge {
        top: 14px;
        left: 14px;
        right: 14px;
        max-width: none;
    }

    .ct-map-btn {
        bottom: 14px;
        right: 14px;
        left: 14px;
        justify-content: center;
    }

    .ct-sla {
        padding: 70px 0;
    }

    .ct-sla-grid {
        grid-template-columns: 1fr;
    }

    .ct-toast {
        left: 20px;
        right: 20px;
        bottom: 20px;
    }
}

/* =========================================================
   6. CONTACT DARK MODE STYLES
========================================================= */
body.dark-mode .ct-info-card,
body.dark-mode .ct-form-card,
body.dark-mode .ct-sla-card {
    background: rgba(15, 23, 42, .88);
    border-color: rgba(255, 255, 255, .1);
}

body.dark-mode .ct-info-card h3,
body.dark-mode .ct-form-card h3,
body.dark-mode .ct-sla-card h3 {
    color: #f1f5f9;
}

body.dark-mode .ct-info-highlight {
    color: #e2e8f0;
}

body.dark-mode .ct-info-desc,
body.dark-mode .ct-form-sub,
body.dark-mode .ct-form-note,
body.dark-mode .ct-sla-card p {
    color: #94a3b8;
}

body.dark-mode .ct-info-icon {
    background: rgba(59, 130, 246, .2);
    color: #93c5fd;
}

body.dark-mode .ct-info-badge {
    background: rgba(255, 255, 255, .08);
    color: #cbd5e1;
}

body.dark-mode .ct-info-badge.badge-live {
    background: rgba(16, 185, 129, .15);
    color: #34d399;
}

body.dark-mode .ct-info-actions {
    border-top-color: rgba(255, 255, 255, .08);
}

body.dark-mode .ct-copy-btn {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .12);
    color: #cbd5e1;
}

body.dark-mode .ct-copy-btn:hover {
    background: rgba(37, 99, 235, .25);
    color: #93c5fd;
}

body.dark-mode .ct-field label {
    color: #cbd5e1;
}

body.dark-mode .ct-field-wrap input,
body.dark-mode .ct-field-wrap select,
body.dark-mode .ct-field-wrap textarea {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .12);
    color: #f1f5f9;
}

body.dark-mode .ct-field-wrap input:focus,
body.dark-mode .ct-field-wrap select:focus,
body.dark-mode .ct-field-wrap textarea:focus {
    background: rgba(15, 23, 42, .95);
    border-color: #3b82f6;
    box-shadow: 0 0 0 3.5px rgba(59, 130, 246, .2);
}

body.dark-mode .ct-field.has-error input,
body.dark-mode .ct-field.has-error select,
body.dark-mode .ct-field.has-error textarea {
    background: rgba(239, 68, 68, .1) !important;
}

body.dark-mode .ct-field-wrap input::placeholder,
body.dark-mode .ct-field-wrap textarea::placeholder {
    color: #64748b;
}

body.dark-mode .ct-select-chevron {
    color: #94a3b8;
}

body.dark-mode .ct-connect,
body.dark-mode .ct-sla {
    background: #000000;
}

body.dark-mode .ct-map-card {
    border-color: rgba(255, 255, 255, .1);
}

body.dark-mode .ct-map-frame {
    filter: invert(.88) hue-rotate(180deg) saturate(.7);
}

body.dark-mode .ct-form-success {
    background: rgba(16, 185, 129, .12);
    border-color: rgba(34, 197, 94, .3);
}

body.dark-mode .ct-form-success h4 {
    color: #86efac;
}

body.dark-mode .ct-form-success p {
    color: #bbf7d0;
}

body.dark-mode .ct-ticket-badge {
    background: rgba(15, 23, 42, .8);
    color: #4ade80;
    border-color: #22c55e;
}

/* =========================================================
   7. CONTACT RTL (Right-to-Left) STYLES
========================================================= */
html[dir="rtl"] .ct-info-link i,
html[dir="rtl"] .ct-submit-btn i,
html[dir="rtl"] .ct-map-btn i {
    transform: scaleX(-1);
}

html[dir="rtl"] .ct-copy-btn {
    margin-left: 0;
    margin-right: auto;
}

html[dir="rtl"] .ct-field-icon {
    left: auto;
    right: 14px;
}

html[dir="rtl"] .ct-field-wrap input,
html[dir="rtl"] .ct-field-wrap select,
html[dir="rtl"] .ct-field-wrap textarea {
    padding-left: 14px;
    padding-right: 42px;
}

html[dir="rtl"] .ct-select-chevron {
    right: auto;
    left: 15px;
}

html[dir="rtl"] .ct-select-wrap select {
    padding-left: 42px;
    padding-right: 42px;
}

html[dir="rtl"] .ct-map-badge {
    left: auto;
    right: 20px;
}

html[dir="rtl"] .ct-map-btn {
    right: auto;
    left: 20px;
}

html[dir="rtl"] .ct-toast {
    right: auto;
    left: 30px;
}

@media (max-width: 680px) {
    html[dir="rtl"] .ct-map-badge {
        right: 14px;
        left: 14px;
    }

    html[dir="rtl"] .ct-map-btn {
        left: 14px;
        right: 14px;
    }

    html[dir="rtl"] .ct-toast {
        left: 20px;
        right: 20px;
    }
}

/* ==========================================================================
   404 ERROR PAGE & COMING SOON PAGE STYLES
   ========================================================================== */

/* ---- Minimal Page Shared Wrapper (No Navbar & No Footer) ---- */
.minimal-page-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px 20px;
    background: radial-gradient(circle at 50% 20%, rgba(37, 99, 235, .08) 0%, transparent 65%), var(--bg);
    box-sizing: border-box;
    position: relative;
    text-align: center;
}

.minimal-page-body {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* ---- 404 Error Page ---- */
.error-hero {
    text-align: center;
    max-width: 680px;
    margin: 0 auto;
}

.error-visual {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.error-code {
    font-size: clamp(6.5rem, 15vw, 10.5rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -5px;
    background: linear-gradient(135deg, var(--primary) 0%, #3b82f6 45%, #60a5fa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 10px 40px rgba(37, 99, 235, .25);
    user-select: none;
}


.error-title {
    font-size: clamp(1.85rem, 4.5vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -.6px;
    margin-bottom: 12px;
    color: var(--text);
    line-height: 1.25;
}

.error-desc {
    font-size: 1.05rem;
    color: var(--text-light);
    max-width: 540px;
    margin: 0 auto 28px;
    line-height: 1.65;
}

.error-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 0;
}

.error-actions .btn,
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    height: 48px;
    padding: 0 24px;
    border-radius: 12px;
    font-size: .95rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    transition: all .25s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
    border: 1px solid transparent;
    line-height: 1;
}

.error-actions .btn-primary,
.btn-primary {
    background: var(--primary, #2563eb);
    color: #ffffff !important;
    border-color: var(--primary, #2563eb);
    box-shadow: 0 8px 20px rgba(37, 99, 235, .28);
}

.error-actions .btn-primary:hover,
.btn-primary:hover {
    background: var(--primary-dark, #1d4ed8);
    border-color: var(--primary-dark, #1d4ed8);
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(37, 99, 235, .38);
    color: #ffffff !important;
}

.error-actions .btn-ghost,
.btn-ghost {
    background: transparent;
    border: 1.5px solid transparent;
    color: var(--text-light, #64748b) !important;
}

.error-actions .btn-ghost:hover,
.btn-ghost:hover {
    color: var(--primary, #2563eb) !important;
    background: rgba(37, 99, 235, .08);
    border-color: rgba(37, 99, 235, .15);
    transform: translateY(-2px);
}

/* Dark mode button overrides */
body.dark-mode .error-actions .btn-ghost,
body.dark-mode .btn-ghost {
    color: var(--text-light) !important;
}

body.dark-mode .error-actions .btn-ghost:hover,
body.dark-mode .btn-ghost:hover {
    color: #60a5fa !important;
    background: rgba(37, 99, 235, .18);
}

/* ---- Coming Soon Page ---- */
.cs-hero {
    text-align: center;
    max-width: 860px;
    margin: 0 auto;
}

.cs-launch-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 18px;
    border-radius: 30px;
    background: rgba(16, 185, 129, .12);
    border: 1px solid rgba(16, 185, 129, .3);
    color: #059669;
    font-size: .85rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.cs-pulse-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, .7);
    animation: csPulse 1.8s infinite;
}

@keyframes csPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, .7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

.cs-title {
    font-size: clamp(2.1rem, 5.2vw, 3.4rem);
    font-weight: 900;
    letter-spacing: -.9px;
    line-height: 1.18;
    margin-bottom: 16px;
    color: var(--text);
}

.cs-title span {
    background: linear-gradient(135deg, var(--primary) 0%, #60a5fa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cs-subtitle {
    font-size: 1.12rem;
    color: var(--text-light);
    max-width: 660px;
    margin: 0 auto 40px;
    line-height: 1.7;
}

/* Countdown Timer */
.cs-countdown {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    max-width: 620px;
    margin: 0 auto 44px;
}

.cs-time-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 22px 14px 18px;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: hidden;
    transition: transform .25s ease;
}

.cs-time-card:hover {
    transform: translateY(-3px);
}

.cs-time-num {
    font-size: clamp(2rem, 4.5vw, 3rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.5px;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    margin-bottom: 6px;
}

.cs-time-lbl {
    font-size: .75rem;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--text-light);
    letter-spacing: .08em;
}


/* Minimal Coming Soon tweaks */
.cs-hero-minimal {
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
}

.cs-hero-minimal .cs-countdown {
    margin-bottom: 28px;
}


.cs-back-home {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .92rem;
    font-weight: 700;
    color: var(--text-light);
    margin-top: 16px;
    transition: color .2s ease, transform .2s ease;
    text-decoration: none;
}

.cs-back-home:hover {
    color: var(--primary);
    transform: translateX(-3px);
}

html[dir="rtl"] .cs-back-home:hover {
    transform: translateX(3px);
}

/* Responsive Overrides for 404 and CS */
@media (max-width: 767px) {
    .minimal-page-wrapper {
        padding: 18px 16px 14px;
    }

    .minimal-page-body {
        padding: 20px 0;
    }

    .error-actions {
        flex-direction: column;
        width: 100%;
    }

    .error-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .cs-countdown {
        gap: 10px;
    }

    .cs-time-card {
        padding: 16px 8px;
    }
}

@media (max-width: 480px) {
    .cs-countdown {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================================================
   ADMIN DASHBOARD STYLES (Merged from dashboard.css)
   ========================================================================== */
/* =========================================================
   DRIVEWISE — ADMIN DASHBOARD STYLES
   Standalone full-screen app shell.
   Uses the site's design tokens (variables) from style.css only.
========================================================= */

:root {
    --dash-side-w: 264px;
    --dash-side-rail: 78px;
    --dash-topbar-h: 70px;
    --dash-green: #10b981;
    --dash-amber: #f59e0b;
    --dash-red: #ef4444;
    --dash-sky: #0ea5e9;
    --dash-violet: #8b5cf6;
}

.dash-shell {
    display: flex;
    min-height: 100vh;
    background: var(--bg);
    width: 100%;
}

/* ================= SIDEBAR (Milder Very Light Blue) ================= */
.dash-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--dash-side-w);
    z-index: 1050;
    display: flex;
    flex-direction: column;
    background: #f0f7ff;
    border-right: 1px solid #dbeafe;
    transition: width .3s cubic-bezier(.16, 1, .3, 1), transform .3s cubic-bezier(.16, 1, .3, 1);
    overflow: hidden;
}

.dash-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 18px 20px 16px;
    border-bottom: 1px solid #dbeafe;
    white-space: nowrap;
}

.dash-brand .logo {
    font-size: 19px;
    gap: 10px;
}

.dash-brand .logo-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    font-size: 17px;
}

.dash-side-close {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid #dbeafe;
    border-radius: 10px;
    background: #ffffff;
    color: var(--text-light);
    cursor: pointer;
    display: none;
}

.dash-admin-chip {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px 18px;
    margin: 14px;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid #e0edfd;
    box-shadow: 0 2px 8px rgba(37, 99, 235, .04);
    position: relative;
    white-space: nowrap;
}

.dash-admin-chip img {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 12px;
    object-fit: cover;
}

.dash-admin-info {
    min-width: 0;
}

.dash-admin-info strong {
    display: block;
    font-size: .92rem;
    color: var(--text);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-admin-info span {
    font-size: .76rem;
    color: var(--text-light);
}

.dash-online-dot {
    position: absolute;
    bottom: 12px;
    left: 52px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--dash-green);
    border: 2px solid #ffffff;
}

.dash-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 12px 10px;
}

.dash-nav-title {
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #64748b;
    padding: 16px 10px 8px;
    white-space: nowrap;
}

.dash-nav-list {
    list-style: none;
    display: grid;
    gap: 3px;
}

.dash-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 11px 12px;
    border: 0;
    background: none;
    border-radius: 11px;
    color: #475569;
    font-size: .92rem;
    font-weight: 600;
    text-align: start;
    cursor: pointer;
    font-family: inherit;
    transition: background .22s ease, color .22s ease;
    position: relative;
    white-space: nowrap;
}

.dash-nav-item:hover {
    background: rgba(37, 99, 235, .08);
    color: var(--primary);
}

.dash-nav-item.active {
    background: #ffffff;
    color: var(--primary);
    box-shadow: 0 2px 10px rgba(37, 99, 235, .08);
}

.dash-nav-item.active::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 24px;
    border-radius: 0 4px 4px 0;
    background: var(--primary);
}

.dash-nav-icon {
    width: 20px;
    font-size: 1.02rem;
    text-align: center;
    flex-shrink: 0;
}

.dash-nav-label {
    flex: 1;
}

.dash-nav-count {
    font-size: .7rem;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 20px;
    background: rgba(37, 99, 235, .1);
    color: var(--primary);
}

.dash-nav-item.active .dash-nav-count {
    background: var(--primary);
    color: #fff;
}

.dash-nav-item.new .dash-nav-count {
    background: var(--dash-red);
    color: #fff;
}

.dash-side-foot {
    padding: 12px 14px 16px;
    border-top: 1px solid #dbeafe;
    display: grid;
    gap: 8px;
}

.dash-side-tools {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.dash-side-tool {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px;
    border-radius: 11px;
    border: 1px solid #dbeafe;
    background: #ffffff;
    color: var(--text-light);
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: color .2s ease, border-color .2s ease, background .2s ease;
    white-space: nowrap;
}

.dash-side-tool:hover {
    color: var(--primary);
    border-color: var(--primary);
}

.dash-side-exit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px;
    border-radius: 11px;
    background: var(--primary);
    color: #fff;
    font-size: .85rem;
    font-weight: 700;
    transition: background .2s ease;
}

.dash-side-exit:hover {
    background: var(--primary-dark);
}

.dash-side-exit.full {
    background: #ffffff;
    color: var(--text-light);
    border: 1px solid #dbeafe;
}

.dash-side-exit.full:hover {
    color: var(--primary);
    border-color: var(--primary);
}

/* Collapsed rail */
.dash-shell.collapsed .dash-sidebar {
    width: var(--dash-side-rail);
}

.dash-shell.collapsed .dash-brand {
    padding: 18px 14px 16px;
}

.dash-shell.collapsed .dash-brand-text,
.dash-shell.collapsed .dash-admin-info,
.dash-shell.collapsed .dash-nav-title,
.dash-shell.collapsed .dash-nav-label,
.dash-shell.collapsed .dash-nav-count,
.dash-shell.collapsed .dash-side-tool span {
    display: none;
}

.dash-shell.collapsed .dash-brand .logo {
    justify-content: center;
}

.dash-shell.collapsed .dash-brand .logo-text,
.dash-shell.collapsed .dash-brand .dash-side-close {
    display: none;
}

.dash-shell.collapsed .dash-admin-chip {
    justify-content: center;
    padding: 12px 8px;
    margin: 14px 10px;
}

.dash-shell.collapsed .dash-online-dot {
    left: auto;
    right: 8px;
}

.dash-shell.collapsed .dash-nav {
    padding: 0 10px 10px;
}

.dash-shell.collapsed .dash-nav-item {
    justify-content: center;
    padding: 12px 8px;
}

.dash-shell.collapsed .dash-nav-icon {
    width: auto;
    font-size: 1.12rem;
}

.dash-shell.collapsed .dash-side-tools {
    grid-template-columns: 1fr;
}

.dash-shell.collapsed .dash-side-tool {
    padding: 11px;
    font-size: .95rem;
}

/* ================= STAGE / TOPBAR ================= */
.dash-stage {
    margin-left: var(--dash-side-w);
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    transition: margin-left .3s cubic-bezier(.16, 1, .3, 1);
}

.dash-shell.collapsed .dash-stage {
    margin-left: var(--dash-side-rail);
}

.dash-topbar {
    position: fixed;
    top: 0;
    left: var(--dash-side-w);
    right: 0;
    height: var(--dash-topbar-h, 70px);
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 24px;
    background: rgba(255, 255, 255, .82);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border-bottom: 1px solid var(--border);
    transition: left .3s cubic-bezier(.16, 1, .3, 1), right .3s cubic-bezier(.16, 1, .3, 1);
}

.dash-shell.collapsed .dash-topbar {
    left: var(--dash-side-rail);
}

body.dark-mode .dash-topbar {
    background: rgba(13, 19, 29, .85);
}

.dash-topbar-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.dash-topbar-title h1 {
    font-size: 1.18rem;
    letter-spacing: -.3px;
    line-height: 1.2;
}

.dash-topbar-title p {
    color: var(--text-light);
    font-size: .82rem;
}

.dash-topbar-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

.dash-icon-btn {
    position: relative;
    width: 42px;
    height: 42px;
    min-width: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-light);
    font-size: .98rem;
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease, background .2s ease;
}

.dash-icon-btn:hover {
    color: var(--primary);
    border-color: var(--primary);
}

.dash-icon-btn.active,
.dash-side-tool.active {
    color: var(--primary);
    border-color: var(--primary);
    background: rgba(37, 99, 235, .1);
}

#sideToggleBtn {
    display: none;
}

.dash-topbar-tools {
    display: flex;
    align-items: center;
    gap: 8px;
}

@media (min-width: 1024px) {
    .dash-side-tools {
        display: none !important;
    }
}

.dash-icon-btn .dash-dot {
    position: absolute;
    top: 9px;
    right: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--dash-red);
    border: 2px solid var(--surface);
}

.dash-icon-btn .dash-count-badge {
    position: absolute;
    top: 5px;
    right: 5px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 10px;
    background: var(--dash-red);
    color: #fff;
    font-size: .62rem;
    font-weight: 800;
    display: grid;
    place-items: center;
    border: 2px solid var(--surface);
}

.dash-search {
    display: flex;
    align-items: center;
    gap: 9px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0 14px;
    height: 42px;
    width: 240px;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.dash-search:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

.dash-search i {
    color: var(--text-light);
    font-size: .9rem;
}

.dash-search input {
    border: 0;
    background: none;
    outline: none;
    width: 100%;
    color: var(--text);
    font-size: .9rem;
    font-family: inherit;
}

.dash-search input::placeholder {
    color: var(--text-light);
}

.dash-avatar {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 12px;
    object-fit: cover;
    border: 2px solid var(--border);
}

.dash-profile {
    position: relative;
}

.dash-profile-btn {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 4px 12px 4px 4px;
    height: 46px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--surface);
    cursor: pointer;
    color: var(--text);
    font-family: inherit;
    transition: border-color .2s ease;
}

.dash-profile-btn:hover {
    border-color: var(--primary);
}

.dash-profile-btn img {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    object-fit: cover;
}

.dash-profile-btn .dash-pro-name {
    text-align: start;
    line-height: 1.2;
}

.dash-profile-btn .dash-pro-name strong {
    display: block;
    font-size: .86rem;
}

.dash-profile-btn .dash-pro-name span {
    display: block;
    font-size: .72rem;
    color: var(--text-light);
}

.dash-profile-btn i {
    font-size: .72rem;
    color: var(--text-light);
}

/* Popovers (notifications + profile) */
.dash-pop {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 340px;
    max-width: calc(100vw - 32px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 24px 55px rgba(15, 23, 42, .18);
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
    z-index: 130;
}

.dash-pop.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dash-pop.profile-pop {
    width: 230px;
}

.dash-pop-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px 10px;
}

.dash-pop-head strong {
    font-size: .92rem;
}

.dash-pop-head button {
    border: 0;
    background: none;
    color: var(--primary);
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}

.dash-pop-item {
    display: flex;
    gap: 11px;
    padding: 10px;
    border-radius: 11px;
    transition: background .2s ease;
    cursor: pointer;
}

.dash-pop-item:hover {
    background: var(--surface-light);
}

.dash-pop-item img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
}

.dash-pop-item p {
    font-size: .84rem;
    color: var(--text);
    line-height: 1.45;
}

.dash-pop-item p b {
    font-weight: 700;
}

.dash-pop-item span {
    display: block;
    font-size: .74rem;
    color: var(--text-light);
    margin-top: 2px;
}

.dash-pop-item a {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: .86rem;
    font-weight: 600;
    color: var(--text);
    padding: 9px;
    border-radius: 11px;
}

.dash-pop-item a:hover {
    background: var(--surface-light);
}

.dash-pop-item a i {
    width: 22px;
    text-align: center;
    color: var(--text-light);
}

/* ================= MAIN AREA ================= */
.dash-main {
    padding: calc(var(--dash-topbar-h, 70px) + 24px) 26px 70px;
    width: 100%;
    min-width: 0;
}

.dash-panel {
    display: none;
}

.dash-panel.active {
    display: block;
    animation: dashFade .35s ease;
}

@keyframes dashFade {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dash-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.dash-panel-head h2 {
    font-size: 1.45rem;
    letter-spacing: -.4px;
}

.dash-panel-head p {
    color: var(--text-light);
    font-size: .9rem;
    margin-top: 2px;
}

.dash-panel-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* ================= STAT CARDS ================= */
.dash-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.dash-stat {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow);
    transition: transform .3s ease, box-shadow .3s ease;
    min-width: 0;
}

.dash-stat:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(15, 23, 42, .1);
}

.dash-stat-icon {
    width: 50px;
    height: 50px;
    min-width: 50px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    font-size: 1.15rem;
}

.dash-stat-icon.blue {
    background: rgba(37, 99, 235, .1);
    color: var(--primary);
}

.dash-stat-icon.green {
    background: rgba(16, 185, 129, .12);
    color: var(--dash-green);
}

.dash-stat-icon.amber {
    background: rgba(245, 158, 11, .15);
    color: var(--dash-amber);
}

.dash-stat-icon.sky {
    background: rgba(14, 165, 233, .12);
    color: var(--dash-sky);
}

.dash-stat-icon.violet {
    background: rgba(139, 92, 246, .12);
    color: var(--dash-violet);
}

.dash-stat-value {
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.4px;
}

.dash-stat-label {
    color: var(--text-light);
    font-size: .8rem;
}

.dash-stat-trend {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .72rem;
    font-weight: 800;
    margin-top: 3px;
}

.dash-stat-trend.up {
    color: var(--dash-green);
}

.dash-stat-trend.down {
    color: var(--dash-red);
}

/* ================= CARDS ================= */
.dash-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow);
    overflow: hidden;
    min-width: 0;
}

.dash-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 18px 24px;
    border-bottom: 1px solid var(--border);
}

.dash-card-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dash-card-title i {
    color: var(--primary);
}

.dash-card-title h3 {
    font-size: 1.02rem;
    letter-spacing: -.2px;
}

.dash-card-action {
    color: var(--primary);
    font-size: .84rem;
    font-weight: 700;
    border: 0;
    background: none;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
}

.dash-card-body {
    padding: 24px;
}

.dash-grid-2 {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

.dash-grid-22 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}

.dash-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

/* ================= TABLES ================= */
.dash-table-wrap {
    overflow-x: auto;
}

.dash-table {
    width: 100%;
    min-width: 620px;
    border-collapse: collapse;
    font-size: .9rem;
}

.dash-table th {
    text-align: start;
    padding: 13px 20px;
    color: var(--text-light);
    font-size: .73rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    background: var(--surface-light);
}

.dash-table td {
    padding: 13px 20px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    vertical-align: middle;
}

.dash-table tbody tr {
    transition: background .18s ease;
}

.dash-table tbody tr:hover {
    background: var(--surface-light);
}

.dash-table tbody tr:last-child td {
    border-bottom: 0;
}

.dash-table td .dash-sub {
    display: block;
    color: var(--text-light);
    font-size: .78rem;
    margin-top: 1px;
}

.dash-strong {
    font-weight: 700;
    white-space: nowrap;
}

.dash-money {
    font-weight: 800;
    white-space: nowrap;
}

.dash-td-user {
    display: flex;
    align-items: center;
    gap: 11px;
    white-space: nowrap;
}

.dash-td-user img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
}

.dash-td-user strong {
    font-weight: 700;
    line-height: 1.25;
}

.dash-td-user span {
    display: block;
    color: var(--text-light);
    font-size: .8rem;
}

.dash-actions-cell {
    display: flex;
    gap: 6px;
    white-space: nowrap;
}

/* Table Column Widths & Spacing (Student Name & Package / Item) */
@media (min-width: 768px) {

    #tblPayments th:nth-child(2),
    #tblPayments td:nth-child(2),
    .dash-table td[data-label="Student"] {
        min-width: 220px;
        padding-right: 40px;
    }

    #tblPayments th:nth-child(3),
    #tblPayments td:nth-child(3),
    .dash-table td[data-label="Package / Item"],
    .dash-table td[data-label="Package"] {
        min-width: 200px;
        padding-left: 16px;
    }

    #tblStudents th:nth-child(1),
    #tblStudents td:nth-child(1),
    #tblBookings th:nth-child(1),
    #tblBookings td:nth-child(1) {
        min-width: 220px;
        padding-right: 40px;
    }

    #tblStudents th:nth-child(2),
    #tblStudents td:nth-child(2),
    #tblBookings th:nth-child(2),
    #tblBookings td:nth-child(2) {
        min-width: 200px;
        padding-left: 16px;
    }

    .dash-table td[data-label="Instructor"] {
        min-width: 200px;
        padding-right: 32px;
    }

    #tblPayments {
        min-width: 880px;
    }

    #tblStudents,
    #tblBookings {
        min-width: 840px;
    }
}

html[dir="rtl"] #tblPayments th:nth-child(2),
html[dir="rtl"] #tblPayments td:nth-child(2),
html[dir="rtl"] .dash-table td[data-label="Student"],
html[dir="rtl"] #tblStudents th:nth-child(1),
html[dir="rtl"] #tblStudents td:nth-child(1),
html[dir="rtl"] #tblBookings th:nth-child(1),
html[dir="rtl"] #tblBookings td:nth-child(1),
html[dir="rtl"] .dash-table td[data-label="Instructor"] {
    padding-right: 20px;
    padding-left: 40px;
}

html[dir="rtl"] #tblPayments th:nth-child(3),
html[dir="rtl"] #tblPayments td:nth-child(3),
html[dir="rtl"] .dash-table td[data-label="Package / Item"],
html[dir="rtl"] .dash-table td[data-label="Package"],
html[dir="rtl"] #tblStudents th:nth-child(2),
html[dir="rtl"] #tblStudents td:nth-child(2),
html[dir="rtl"] #tblBookings th:nth-child(2),
html[dir="rtl"] #tblBookings td:nth-child(2) {
    padding-left: 20px;
    padding-right: 16px;
}

/* Status badges */
.dash-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 30px;
    font-size: .76rem;
    font-weight: 700;
    white-space: nowrap;
}

.dash-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.dash-badge.green {
    background: rgba(16, 185, 129, .12);
    color: #059669;
}

.dash-badge.amber {
    background: rgba(245, 158, 11, .16);
    color: #b45309;
}

.dash-badge.blue {
    background: rgba(37, 99, 235, .1);
    color: var(--primary);
}

.dash-badge.red {
    background: rgba(239, 68, 68, .12);
    color: #dc2626;
}

.dash-badge.gray {
    background: var(--surface-light);
    color: var(--text-light);
}

.dash-badge.sky {
    background: rgba(14, 165, 233, .12);
    color: #0284c7;
}

.dash-badge.violet {
    background: rgba(139, 92, 246, .12);
    color: #7c3aed;
}

.dash-mini-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border-radius: 9px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-light);
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: color .2s ease, border-color .2s ease, background .2s ease;
}

.dash-mini-btn:hover {
    color: var(--primary);
    border-color: var(--primary);
}

.dash-mini-btn.solid {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.dash-mini-btn.solid:hover {
    background: var(--primary-dark);
}

.dash-mini-btn.soft {
    background: var(--surface-light);
    border-color: transparent;
    color: var(--text-light);
}

.dash-mini-btn.soft:hover {
    color: var(--primary);
}

.dash-mini-btn.green {
    color: #059669;
    border-color: rgba(16, 185, 129, .4);
}

.dash-mini-btn.green:hover {
    background: rgba(16, 185, 129, .1);
    border-color: var(--dash-green);
}

.dash-mini-btn.red {
    color: #dc2626;
    border-color: rgba(239, 68, 68, .4);
}

.dash-mini-btn.red:hover {
    background: rgba(239, 68, 68, .1);
    border-color: var(--dash-red);
}

/* ================= FILLER / PERMISSIONS ================= */
.dash-progress {
    height: 7px;
    background: var(--surface-light);
    border-radius: 20px;
    overflow: hidden;
    min-width: 90px;
}

.dash-progress>span {
    display: block;
    height: 100%;
    border-radius: 20px;
    background: linear-gradient(90deg, var(--primary), #22d3ee);
}

.dash-stars {
    color: var(--dash-amber);
    font-size: .8rem;
    letter-spacing: 1px;
    white-space: nowrap;
}

.dash-stars .off {
    color: var(--border);
}

/* ================= SCHEDULE LIST ================= */
.dash-sched-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.dash-sched-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    transition: border-color .2s ease, background .2s ease;
}

.dash-sched-item:hover {
    border-color: var(--primary);
    background: var(--surface-light);
}

.dash-sched-time {
    width: 56px;
    text-align: center;
    font-weight: 800;
    font-size: .82rem;
    color: var(--primary);
    background: rgba(37, 99, 235, .08);
    border-radius: 8px;
    padding: 6px 4px;
    flex-shrink: 0;
    box-sizing: border-box;
}

.dash-sched-info {
    flex: 1 1 0%;
    min-width: 0;
    overflow: hidden;
}

.dash-sched-info strong {
    display: block;
    font-size: .86rem;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dash-sched-info span {
    display: block;
    font-size: .76rem;
    color: var(--text-light);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dash-sched-item .dash-badge {
    flex-shrink: 0;
    padding: 4px 10px;
    font-size: .72rem;
    white-space: nowrap;
}

/* Plan / Schedule Card Specific Spacing & Padding */
.dash-card-plan .dash-card-body,
.dash-card:has(.dash-sched-list) .dash-card-body {
    padding: 18px 20px;
    min-width: 0;
    overflow: hidden;
    box-sizing: border-box;
}

.dash-card-plan .dash-divider,
.dash-card:has(.dash-sched-list) .dash-divider {
    margin: 14px 0;
    width: 100%;
    box-sizing: border-box;
}

.dash-card-plan .dash-btn,
.dash-card:has(.dash-sched-list) .dash-card-body>.dash-btn {
    width: 100%;
    padding: 11px 18px;
    font-size: .88rem;
    box-sizing: border-box;
}

/* ================= CHARTS ================= */
.dash-chart {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    height: 180px;
    padding: 8px 0 0;
}

.dash-bar-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    height: 100%;
    justify-content: flex-end;
    min-width: 0;
}

.dash-bar {
    width: 100%;
    max-width: 40px;
    border-radius: 8px 8px 3px 3px;
    background: linear-gradient(180deg, #60a5fa, var(--primary));
    min-height: 6px;
    transition: filter .2s ease;
}

.dash-bar-col:hover .dash-bar {
    filter: brightness(1.15);
}

.dash-bar-col.today .dash-bar {
    background: linear-gradient(180deg, #22d3ee, #0891b2);
}

.dash-bar-label {
    font-size: .72rem;
    color: var(--text-light);
    font-weight: 700;
}

.dash-bar-val {
    font-size: .72rem;
    color: var(--primary);
    font-weight: 800;
}

.dash-donut-wrap {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}

.dash-donut {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    position: relative;
    flex-shrink: 0;
}

.dash-donut-center {
    width: 104px;
    height: 104px;
    border-radius: 50%;
    background: var(--surface);
    display: grid;
    place-items: center;
    text-align: center;
}

.dash-donut-center strong {
    font-size: 1.5rem;
    letter-spacing: -.4px;
    line-height: 1;
    display: block;
}

.dash-donut-center span {
    font-size: .72rem;
    color: var(--text-light);
}

.dash-donut-legend {
    display: grid;
    gap: 10px;
}

.dash-donut-legend div {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: .86rem;
}

.dash-donut-legend i {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    display: inline-block;
    flex-shrink: 0;
}

.dash-donut-legend b {
    margin-left: auto;
    font-weight: 800;
}

/* ================= ACTIVITY FEED ================= */
.dash-activity {
    display: grid;
    gap: 4px;
}

.dash-act-item {
    display: flex;
    gap: 13px;
    padding: 11px 4px;
}

.dash-act-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    font-size: .88rem;
}

.dash-act-icon.green {
    background: rgba(16, 185, 129, .12);
    color: var(--dash-green);
}

.dash-act-icon.blue {
    background: rgba(37, 99, 235, .1);
    color: var(--primary);
}

.dash-act-icon.amber {
    background: rgba(245, 158, 11, .15);
    color: var(--dash-amber);
}

.dash-act-icon.red {
    background: rgba(239, 68, 68, .12);
    color: var(--dash-red);
}

.dash-act-text {
    flex: 1;
    font-size: .86rem;
    line-height: 1.5;
    min-width: 0;
}

.dash-act-text strong {
    font-weight: 700;
}

.dash-act-time {
    display: block;
    color: var(--text-light);
    font-size: .75rem;
    margin-top: 2px;
}

/* ================= FILTER PILLS ================= */
.dash-filter {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 14px 22px 2px;
}

.dash-pill {
    padding: 7px 16px;
    border-radius: 30px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-light);
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: all .2s ease;
}

.dash-pill:hover {
    color: var(--primary);
    border-color: var(--primary);
}

.dash-pill.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

/* ================= GENERIC BUTTONS ================= */
.dash-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 12px 22px;
    border-radius: 12px;
    font-weight: 700;
    font-size: .9rem;
    cursor: pointer;
    border: 1px solid transparent;
    font-family: inherit;
    transition: all .25s ease;
    white-space: nowrap;
}

.dash-btn.solid {
    background: var(--primary);
    color: #fff;
}

.dash-btn.solid:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
}

.dash-btn.soft {
    background: var(--surface-light);
    color: var(--text);
}

.dash-btn.soft:hover {
    color: var(--primary);
}

.dash-btn.outline {
    background: var(--surface);
    color: var(--primary);
    border-color: var(--primary);
}

.dash-btn.outline:hover {
    background: rgba(37, 99, 235, .08);
}

.dash-btn.small {
    padding: 9px 16px;
    font-size: .84rem;
}

/* View toggle (list / calendar) */
.dash-view-toggle {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: 11px;
    overflow: hidden;
    background: var(--surface);
}

.dash-view-toggle button {
    border: 0;
    background: none;
    padding: 10px 16px;
    color: var(--text-light);
    font-size: .86rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: all .2s ease;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.dash-view-toggle button+button {
    border-left: 1px solid var(--border);
}

.dash-view-toggle button.active {
    background: var(--primary);
    color: #fff;
}

/* ================= CALENDAR VIEW ================= */
.dash-cal-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

.dash-day-card {
    background: var(--surface-light);
    border-radius: 14px;
    padding: 14px;
    border: 2px solid transparent;
}

.dash-day-card.today {
    border-color: var(--primary);
    background: var(--surface);
}

.dash-day-card strong {
    display: block;
    font-size: .86rem;
}

.dash-day-card .dash-day-count {
    font-size: .74rem;
    color: var(--text-light);
}

.dash-slot {
    margin-top: 10px;
    padding: 8px 6px;
    border-radius: 10px;
    font-size: .74rem;
    font-weight: 700;
    text-align: center;
}

.dash-slot.free {
    background: var(--surface);
    border: 1px dashed var(--border);
    color: var(--text-light);
}

.dash-slot.booked {
    background: rgba(37, 99, 235, .1);
    color: var(--primary);
}

.dash-slot.done {
    background: rgba(16, 185, 129, .12);
    color: #059669;
}

/* ================= SESSION NOTES / CHECKLIST ================= */
.dash-check-list {
    display: grid;
    gap: 10px;
}

.dash-check-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    transition: border-color .2s ease, background .2s ease;
    cursor: pointer;
}

.dash-check-item:hover {
    border-color: var(--primary);
    background: var(--surface-light);
}

.dash-check-item input {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
    cursor: pointer;
    flex-shrink: 0;
}

.dash-check-item .dash-check-label {
    font-size: .9rem;
    font-weight: 600;
    flex: 1;
}

.dash-check-item .dash-check-note {
    font-size: .78rem;
    color: var(--text-light);
}

.dash-check-item.done {
    background: rgba(16, 185, 129, .06);
}

/* ================= Toggles ================= */
.dash-toggle {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 26px;
    flex-shrink: 0;
}

.dash-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.dash-toggle .dash-toggle-track {
    position: absolute;
    inset: 0;
    background: var(--border);
    border-radius: 30px;
    transition: background .25s ease;
    cursor: pointer;
}

.dash-toggle .dash-toggle-track::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .2);
    transition: transform .25s ease;
}

.dash-toggle input:checked+.dash-toggle-track {
    background: var(--primary);
}

.dash-toggle input:checked+.dash-toggle-track::before {
    transform: translateX(20px);
}

/* ================= OVERLAY ================= */
.dash-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .5);
    backdrop-filter: blur(2px);
    z-index: 1040;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s;
}

.dash-overlay.show {
    opacity: 1;
    visibility: visible;
}

/* ================= MODALS ================= */
.dash-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s;
}

.dash-modal.open {
    opacity: 1;
    visibility: visible;
}

.dash-modal-box {
    width: min(560px, 100%);
    max-height: calc(100vh - 36px);
    overflow-y: auto;
    background: var(--surface);
    border-radius: 18px;
    box-shadow: 0 30px 70px rgba(2, 6, 23, .35);
    transform: translateY(16px) scale(.98);
    transition: transform .25s cubic-bezier(.16, 1, .3, 1);
}

.dash-modal.open .dash-modal-box {
    transform: none;
}

.dash-modal-box.wide {
    width: min(720px, 100%);
}

.dash-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 22px;
    border-bottom: 1px solid var(--border);
}

.dash-modal-head h3 {
    font-size: 1.12rem;
    letter-spacing: -.2px;
}

.dash-modal-head p {
    font-size: .82rem;
    color: var(--text-light);
    margin-top: 2px;
}

.dash-modal-close {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text-light);
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease;
    flex-shrink: 0;
}

.dash-modal-close:hover {
    color: var(--primary);
    border-color: var(--primary);
}

.dash-modal-body {
    padding: 22px;
}

.dash-modal-foot {
    padding: 14px 22px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* ================= FORMS ================= */
.dash-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.dash-field {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.dash-field.full {
    grid-column: 1 / -1;
}

.dash-label {
    font-size: .8rem;
    font-weight: 700;
    color: var(--text-light);
}

.dash-input,
.dash-select,
.dash-textarea {
    width: 100%;
    height: 44px;
    padding: 0 13px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    font-size: .92rem;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.dash-textarea {
    height: auto;
    padding: 12px 13px;
    resize: vertical;
    min-height: 84px;
    line-height: 1.55;
}

.dash-input:focus,
.dash-select:focus,
.dash-textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

.dash-select {
    cursor: pointer;
}

.dash-form-foot {
    padding: 16px 24px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    background: var(--surface-light);
}

/* ================= PACKAGES TABLE / VEHICLES ================= */
.veh-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.veh-card {
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    background: var(--surface);
    transition: transform .3s ease, box-shadow .3s ease;
}

.veh-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 40px rgba(15, 23, 42, .1);
}

.veh-media {
    position: relative;
}

.veh-media img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    display: block;
}

.veh-media .dash-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(255, 255, 255, .9);
}

.veh-info {
    padding: 16px 18px 18px;
}

.veh-info h4 {
    font-size: 1.02rem;
}

.veh-info>p {
    color: var(--text-light);
    font-size: .8rem;
    margin: 3px 0 12px;
}

.veh-meta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.veh-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .76rem;
    color: var(--text-light);
    background: var(--surface-light);
    padding: 5px 10px;
    border-radius: 9px;
}

.veh-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

/* ================= MESSAGES ================= */
.dash-msg-wrap {
    display: grid;
    grid-template-columns: 330px 1fr;
    gap: 20px;
    min-height: 540px;
}

.dash-msg-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dash-msg-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    border-radius: 13px;
    border: 1px solid var(--border);
    background: var(--surface);
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease;
    text-align: start;
    font-family: inherit;
    width: 100%;
}

.dash-msg-item:hover {
    border-color: var(--primary);
}

.dash-msg-item.active {
    border-color: var(--primary);
    background: rgba(37, 99, 235, .07);
}

.dash-msg-item img {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    object-fit: cover;
}

.dash-msg-item .dash-msg-meta {
    flex: 1;
    min-width: 0;
}

.dash-msg-item .dash-msg-top {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.dash-msg-item .dash-msg-top strong {
    font-size: .9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-msg-item .dash-msg-top span {
    font-size: .72rem;
    color: var(--text-light);
    white-space: nowrap;
}

.dash-msg-item p {
    font-size: .8rem;
    color: var(--text-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

.dash-msg-item .dash-badge {
    margin-top: 6px;
}

.dash-thread {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    overflow: hidden;
    min-width: 0;
}

.dash-thread-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
}

.dash-thread-head img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
}

.dash-thread-head strong {
    display: block;
    font-size: .95rem;
}

.dash-thread-head span {
    font-size: .76rem;
    color: var(--text-light);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.dash-thread-head .dash-msg-back {
    display: none;
}

.dash-thread-body {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 300px;
    max-height: 420px;
    overflow-y: auto;
    background: var(--surface-light);
}

.dash-bubble {
    max-width: 75%;
    padding: 11px 15px;
    border-radius: 15px;
    font-size: .88rem;
    line-height: 1.55;
    position: relative;
}

.dash-bubble .dash-bubble-time {
    display: block;
    font-size: .68rem;
    opacity: .65;
    margin-top: 4px;
}

.dash-bubble.in {
    align-self: flex-start;
    background: var(--surface);
    border: 1px solid var(--border);
    border-bottom-left-radius: 4px;
}

.dash-bubble.out {
    align-self: flex-end;
    background: var(--primary);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.dash-composer {
    display: flex;
    gap: 10px;
    padding: 14px 18px;
    border-top: 1px solid var(--border);
}

.dash-composer input {
    flex: 1;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    font-size: .9rem;
    font-family: inherit;
    outline: none;
}

.dash-composer input:focus {
    border-color: var(--primary);
}

.dash-composer button {
    width: 46px;
    height: 44px;
    border: 0;
    border-radius: 12px;
    background: var(--primary);
    color: #fff;
    cursor: pointer;
    font-size: .95rem;
    transition: background .2s ease;
}

.dash-composer button:hover {
    background: var(--primary-dark);
}

.dash-msg-back {
    border: 0;
    background: none;
    color: var(--primary);
    font-size: .85rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    display: none;
    align-items: center;
    gap: 6px;
}

/* ================= SETTINGS ================= */
#panel-settings {
    display: none;
}

#panel-settings.active {
    display: flex;
    flex-direction: column;
    gap: 24px;
    animation: dashFade .35s ease;
}

#panel-settings .dash-card {
    margin-bottom: 0;
}

.dash-settings-list {
    display: grid;
    gap: 0;
    padding: 4px 24px;
}

.dash-setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.dash-setting-row:last-child {
    border-bottom: 0;
}

.dash-setting-row .dash-setting-info strong {
    font-size: .95rem;
    font-weight: 700;
    color: var(--text);
    display: block;
    margin-bottom: 4px;
}

.dash-setting-row .dash-setting-info span {
    font-size: .83rem;
    color: var(--text-light);
    line-height: 1.4;
}

.dash-setting-row .dash-input,
.dash-setting-row .dash-select {
    max-width: 230px;
}

.dash-trans-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.dash-trans-list .dash-trans {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    font-size: 1rem;
    background: var(--surface-light);
    color: var(--text-light);
}

/* ================= REPORTS ================= */
.dash-report-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.dash-report-head strong {
    font-size: 1.02rem;
    display: block;
}

.dash-report-head span {
    font-size: .78rem;
    color: var(--text-light);
}

.dash-export-bar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ================= EMPTY / MISC ================= */
.dash-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-light);
}

.dash-empty i {
    font-size: 2rem;
    opacity: .4;
    margin-bottom: 10px;
}

.dash-note {
    font-size: .82rem;
    color: var(--text-light);
    line-height: 1.6;
}

.dash-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 13px;
    margin-bottom: 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    font-size: .86rem;
}

.dash-banner i {
    color: var(--primary);
}

.dash-divider {
    height: 1px;
    background: var(--border);
    margin: 18px 0;
}

/* ================= ROLE BADGE & WELCOME HERO ================= */
.dash-role-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 20px;
    line-height: 1;
    margin-left: 8px;
    vertical-align: middle;
}

.dash-role-badge.admin {
    background: rgba(37, 99, 235, .12);
    color: var(--primary);
    border: 1px solid rgba(37, 99, 235, .25);
}

.dash-role-badge.student {
    background: rgba(16, 185, 129, .12);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, .25);
}

.dash-welcome-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding: 22px 26px;
    margin-bottom: 24px;
    border-radius: 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
}

.dash-welcome-card::after {
    content: "";
    position: absolute;
    top: -40px;
    right: -40px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    pointer-events: none;
}

.dash-welcome-card.admin-welcome {
    background: linear-gradient(135deg, rgba(37, 99, 235, .07) 0%, rgba(15, 23, 42, .02) 100%), var(--surface);
    border-left: 5px solid var(--primary);
}

.dash-welcome-card.admin-welcome::after {
    background: radial-gradient(circle, rgba(37, 99, 235, .12) 0%, transparent 70%);
}

.dash-welcome-card.user-welcome {
    background: linear-gradient(135deg, rgba(16, 185, 129, .07) 0%, rgba(37, 99, 235, .03) 100%), var(--surface);
    border-left: 5px solid #10b981;
}

.dash-welcome-card.user-welcome::after {
    background: radial-gradient(circle, rgba(16, 185, 129, .12) 0%, transparent 70%);
}

.dash-welcome-content {
    flex: 1;
    min-width: 260px;
}

.dash-portal-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 4px 11px;
    border-radius: 20px;
    margin-bottom: 8px;
    line-height: 1.2;
}

.admin-welcome .dash-portal-pill {
    background: rgba(37, 99, 235, .12);
    color: var(--primary);
}

.user-welcome .dash-portal-pill {
    background: rgba(16, 185, 129, .14);
    color: #059669;
}

.dash-welcome-content h2 {
    font-size: 1.32rem;
    font-weight: 800;
    letter-spacing: -.3px;
    margin-bottom: 6px;
    color: var(--text);
}

.dash-welcome-content h2 span {
    color: var(--primary);
}

.user-welcome .dash-welcome-content h2 span {
    color: #059669;
}

.dash-welcome-content p {
    font-size: .88rem;
    color: var(--text-light);
    line-height: 1.5;
    max-width: 680px;
    margin: 0;
}

.dash-welcome-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.dash-welcome-actions .dash-btn {
    padding: 10px 18px;
    font-size: .86rem;
}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 1199px) {
    .dash-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1023px) {
    #sideToggleBtn {
        display: grid;
    }

    .dash-topbar-tools {
        display: none !important;
    }

    .dash-side-tools {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .dash-sidebar {
        width: 280px;
        max-width: calc(100vw - 48px);
        transform: translateX(-102%);
        box-shadow: 20px 0 50px rgba(15, 23, 42, .25);
    }

    .dash-shell.collapsed .dash-sidebar {
        width: 280px;
    }

    .dash-shell.menu-open .dash-sidebar {
        transform: translateX(0);
    }

    .dash-stage,
    .dash-shell.collapsed .dash-stage {
        margin-left: 0;
    }

    .dash-side-close {
        display: grid;
    }

    /* restore labels inside opened drawer */
    .dash-shell.collapsed .dash-brand .logo-text,
    .dash-shell.collapsed .dash-brand-text,
    .dash-shell.collapsed .dash-admin-info,
    .dash-shell.collapsed .dash-nav-title,
    .dash-shell.collapsed .dash-nav-label,
    .dash-shell.collapsed .dash-nav-count,
    .dash-shell.collapsed .dash-side-tool span {
        display: inline;
    }

    .dash-shell.collapsed .dash-brand {
        padding: 18px 20px 16px;
    }

    .dash-shell.collapsed .dash-brand .logo {
        justify-content: flex-start;
    }

    .dash-shell.collapsed .dash-admin-chip {
        justify-content: flex-start;
        padding: 14px 18px;
        margin: 14px;
    }

    .dash-shell.collapsed .dash-nav {
        padding: 0 12px 10px;
    }

    .dash-shell.collapsed .dash-nav-item {
        justify-content: flex-start;
        padding: 11px 12px;
    }

    .dash-shell.collapsed .dash-nav-icon {
        width: 20px;
        font-size: 1.02rem;
    }

    .dash-shell.collapsed .dash-side-tools {
        grid-template-columns: 1fr 1fr;
    }

    .dash-shell.collapsed .dash-side-tool {
        padding: 10px;
    }

    body.menu-lock {
        overflow: hidden;
    }

    .dash-topbar {
        left: 0 !important;
        right: 0 !important;
        height: 60px;
        padding: 0 14px;
        gap: 10px;
        flex-wrap: nowrap;
        justify-content: space-between;
    }

    .dash-topbar-left {
        flex: 1;
        min-width: 0;
    }

    .dash-topbar-title {
        min-width: 0;
        overflow: hidden;
    }

    .dash-topbar-title h1 {
        font-size: 1.05rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .dash-topbar-title p {
        display: none;
    }

    .dash-pro-name {
        display: none !important;
    }

    .dash-profile-btn {
        padding: 4px;
    }

    .dash-main {
        padding: calc(60px + 18px) 14px 60px;
    }

    .dash-grid-22 {
        grid-template-columns: 1fr;
    }

    .dash-grid-3 {
        grid-template-columns: 1fr 1fr;
    }

    .veh-grid {
        grid-template-columns: 1fr 1fr;
    }

    .dash-grid-2 {
        grid-template-columns: 1fr;
    }

    .dash-cal-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .dash-msg-wrap {
        grid-template-columns: 1fr;
    }

    .dash-thread {
        display: none;
    }

    .dash-msg-wrap.mobile-open .dash-msg-list {
        display: none;
    }

    .dash-msg-wrap.mobile-open .dash-thread {
        display: flex;
    }

    .dash-form-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .dash-grid-3 {
        grid-template-columns: 1fr;
    }

    .veh-grid {
        grid-template-columns: 1fr;
    }

    .dash-card-body {
        padding: 18px 16px;
    }

    .dash-card-plan .dash-card-body,
    .dash-card:has(.dash-sched-list) .dash-card-body {
        padding: 14px;
    }

    .dash-welcome-card {
        padding: 18px 16px;
        gap: 14px;
    }

    .dash-welcome-content h2 {
        font-size: 1.18rem;
    }

    .dash-welcome-actions {
        width: 100%;
    }

    .dash-welcome-actions .dash-btn {
        flex: 1 1 130px;
        justify-content: center;
    }

    .dash-card-head {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 16px;
    }

    .dash-card-head .dash-badge {
        align-self: flex-start;
    }

    .dash-card-title {
        width: 100%;
        justify-content: flex-start;
    }

    .dash-card-head .dash-search {
        width: 100%;
        max-width: 100%;
    }

    .dash-card-head .dash-filter {
        padding: 0;
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        width: 100%;
        gap: 6px;
    }

    .dash-panel-head {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin-bottom: 18px;
    }

    .dash-panel-head h2 {
        font-size: 1.25rem;
    }

    .dash-panel-actions {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .dash-panel-actions .dash-btn {
        flex: 1 1 auto;
        min-width: 120px;
        justify-content: center;
        padding: 10px 14px;
        font-size: .85rem;
    }

    .dash-settings-list {
        padding: 0 16px;
    }

    .dash-setting-row {
        padding: 16px 0;
        flex-wrap: nowrap;
        align-items: center;
    }

    .dash-setting-row .dash-setting-info {
        flex: 1;
        min-width: 0;
        padding-right: 12px;
    }

    .dash-setting-row .dash-toggle,
    .dash-setting-row .dash-mini-btn {
        flex-shrink: 0;
    }

    .dash-form-foot {
        padding: 14px 16px;
    }

    .dash-fluid-row {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .dash-field input:not([type="checkbox"]):not([type="radio"]),
    .dash-field select,
    .dash-field textarea {
        font-size: 16px;
        /* Prevents iOS auto-zoom */
    }
}

/* Stacked table cards on phones */
@media (max-width: 560px) {

    .dash-table,
    .dash-table tbody,
    .dash-table tr,
    .dash-table td {
        display: block;
        width: 100%;
    }

    .dash-table thead {
        display: none;
    }

    .dash-table {
        min-width: 0;
    }

    .dash-table tbody tr {
        margin: 0 0 14px;
        border: 1px solid var(--border);
        border-radius: 13px;
        padding: 6px 0;
        overflow: hidden;
    }

    .dash-table td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        border-bottom: 1px dashed var(--border);
        padding: 9px 14px;
        min-height: 42px;
    }

    .dash-table td:last-child {
        border-bottom: 0;
    }

    .dash-table td::before {
        content: attr(data-label);
        color: var(--text-light);
        font-size: .7rem;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .dash-td-user {
        justify-content: flex-end;
    }

    .dash-actions-cell {
        white-space: normal;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 6px;
    }

    .dash-actions-cell .dash-mini-btn {
        padding: 6px 10px;
        font-size: .78rem;
    }

    .dash-modal {
        padding: 12px;
    }

    .dash-modal-box {
        width: 100%;
        max-height: calc(100vh - 24px);
        border-radius: 16px;
    }

    .dash-modal-head {
        padding: 16px;
    }

    .dash-modal-body {
        padding: 16px;
    }

    .dash-modal-actions {
        flex-direction: column-reverse;
        gap: 8px;
    }

    .dash-modal-actions .dash-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .dash-stat-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .dash-stat {
        padding: 14px;
        gap: 10px;
    }

    .dash-stat-icon {
        width: 40px;
        height: 40px;
        min-width: 40px;
        font-size: .92rem;
    }

    .dash-stat-value {
        font-size: 1.15rem;
    }

    .dash-card-head {
        padding: 14px;
    }

    .dash-card-body {
        padding: 14px;
    }

    .dash-chart {
        height: 150px;
        gap: 8px;
    }

    .dash-donut-wrap {
        justify-content: center;
        text-align: center;
    }

    .dash-donut-legend {
        width: 100%;
        justify-content: center;
    }

    .dash-cal-grid {
        grid-template-columns: 1fr;
    }

    .dash-bubble {
        max-width: 88%;
    }

    .dash-setting-row .dash-setting-info strong {
        font-size: .88rem;
    }

    .dash-setting-row .dash-setting-info span {
        font-size: .78rem;
    }

    .dash-sched-item {
        padding: 8px 10px;
        gap: 9px;
    }

    .dash-sched-time {
        width: 48px;
        font-size: .78rem;
        padding: 5px 2px;
    }

    .dash-sched-info strong {
        font-size: .82rem;
    }

    .dash-sched-info span {
        font-size: .72rem;
    }

    .dash-sched-item .dash-badge {
        padding: 3px 8px;
        font-size: .7rem;
    }
}

@media (max-width: 380px) {
    .dash-topbar {
        padding: 0 10px;
        gap: 6px;
    }

    .dash-topbar-title h1 {
        font-size: .95rem;
    }

    .dash-stat-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .dash-stat {
        padding: 14px;
    }

    .dash-table td {
        padding: 8px 10px;
    }
}

/* =========================================================
   DARK MODE
========================================================= */
body.dark-mode .dash-sidebar,
body.dark-mode .dash-topbar {
    background: #101722;
}

body.dark-mode .dash-topbar {
    background: rgba(16, 23, 34, .88);
}

body.dark-mode .dash-sidebar {
    border-color: var(--border);
}

body.dark-mode .dash-brand,
body.dark-mode .dash-side-foot {
    border-color: var(--border);
}

body.dark-mode .dash-side-tool,
body.dark-mode .dash-side-exit.full {
    background: var(--surface);
    border-color: var(--border);
}

body.dark-mode .dash-side-close {
    background: var(--surface-light);
    border-color: var(--border);
}

body.dark-mode .dash-card,
body.dark-mode .dash-stat,
body.dark-mode .dash-icon-btn,
body.dark-mode .dash-search,
body.dark-mode .dash-profile-btn,
body.dark-mode .dash-pop,
body.dark-mode .dash-modal-box,
body.dark-mode .veh-card,
body.dark-mode .dash-msg-item,
body.dark-mode .dash-thread {
    background: var(--surface);
    border-color: var(--border);
}

body.dark-mode .dash-icon-btn .dash-dot,
body.dark-mode .dash-icon-btn .dash-count-badge {
    border-color: var(--surface);
}

body.dark-mode .dash-nav-item:hover {
    background: var(--surface-light);
    color: #fff;
}

body.dark-mode .dash-nav-item.active {
    background: rgba(37, 99, 235, .22);
    color: #60a5fa;
}

body.dark-mode .dash-nav-count {
    background: var(--surface-light);
    color: #94a3b8;
}

body.dark-mode .dash-admin-chip,
body.dark-mode .dash-day-card,
body.dark-mode .dash-table th,
body.dark-mode .dash-thread-body {
    background: var(--surface-light);
}

body.dark-mode .dash-table tbody tr:hover,
body.dark-mode .dash-sched-item:hover,
body.dark-mode .dash-pop-item:hover,
body.dark-mode .dash-check-item:hover {
    background: var(--surface-light);
}

body.dark-mode .dash-side-tool,
body.dark-mode .dash-side-exit.full {
    background: var(--surface-light);
    border-color: var(--border);
    color: #94a3b8;
}

body.dark-mode .dash-side-tool:hover {
    color: #60a5fa;
    border-color: var(--primary);
}

body.dark-mode .dash-mini-btn {
    border-color: var(--border);
}

body.dark-mode .dash-mini-btn.soft {
    background: var(--surface-light);
    border-color: transparent;
}

body.dark-mode .dash-mini-btn.soft:hover {
    color: #60a5fa;
}

body.dark-mode .dash-pill {
    border-color: var(--border);
}

body.dark-mode .dash-pill:not(.active):hover {
    color: #60a5fa;
}

body.dark-mode .dash-badge.gray {
    background: var(--surface-light);
    color: #94a3b8;
}

body.dark-mode .dash-sched-item,
body.dark-mode .dash-check-item {
    border-color: var(--border);
}

body.dark-mode .dash-msg-item:hover {
    background: var(--surface-light);
}

body.dark-mode .dash-msg-item.active {
    background: rgba(37, 99, 235, .2);
}

body.dark-mode .dash-bubble.in {
    background: var(--surface-light);
    border-color: var(--border);
}

body.dark-mode .dash-toggle .dash-toggle-track {
    background: #334155;
}

body.dark-mode .dash-donut-center {
    background: var(--surface);
}

body.dark-mode .dash-bubble.out {
    background: var(--primary);
}

body.dark-mode .dash-stat:hover,
body.dark-mode .veh-card:hover {
    box-shadow: 0 22px 45px rgba(0, 0, 0, .45);
}

body.dark-mode .dash-slot.free {
    background: var(--surface-light);
    border-color: var(--border);
}

/* =========================================================
   RTL
========================================================= */
html[dir="rtl"] .dash-sidebar {
    left: auto;
    right: 0;
    border-right: 0;
    border-left: 1px solid var(--border);
}

html[dir="rtl"] .dash-stage {
    margin-left: 0;
    margin-right: var(--dash-side-w);
}

html[dir="rtl"] .dash-shell.collapsed .dash-stage {
    margin-right: var(--dash-side-rail);
}

html[dir="rtl"] .dash-nav-item {
    text-align: right;
}

html[dir="rtl"] .dash-nav-item.active::before {
    left: auto;
    right: -12px;
    border-radius: 4px 0 0 4px;
}

html[dir="rtl"] .dash-topbar {
    left: 0;
    right: var(--dash-side-w);
}

html[dir="rtl"] .dash-shell.collapsed .dash-topbar {
    right: var(--dash-side-rail);
}

html[dir="rtl"] .dash-topbar-right {
    margin-left: 0;
    margin-right: auto;
}

html[dir="rtl"] .dash-pop {
    right: auto;
    left: 0;
}

html[dir="rtl"] .dash-table th {
    text-align: right;
}

html[dir="rtl"] .dash-view-toggle button+button {
    border-left: 0;
    border-right: 1px solid var(--border);
}

html[dir="rtl"] .dash-toggle input:checked+.dash-toggle-track::before {
    transform: translateX(-20px);
}

html[dir="rtl"] .dash-donut {
    background-image: none;
}

@media (max-width: 1023px) {
    html[dir="rtl"] .dash-topbar {
        left: 0 !important;
        right: 0 !important;
    }

    html[dir="rtl"] .dash-sidebar {
        right: 0;
        left: auto;
        transform: translateX(102%);
        box-shadow: -20px 0 50px rgba(15, 23, 42, .25);
    }

    html[dir="rtl"] .dash-shell.menu-open .dash-sidebar {
        transform: translateX(0);
    }

    html[dir="rtl"] .dash-stage,
    html[dir="rtl"] .dash-shell.collapsed .dash-stage {
        margin-right: 0;
    }
}

/* =========================================================
   ADDITIONS & COMPAT
   Extra components referenced by the dashboard page.
========================================================= */

/* ---- Form rows ---- */
.dash-fluid-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 20px;
}

.dash-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dash-field>label {
    font-size: .84rem;
    font-weight: 700;
    color: var(--text);
    cursor: pointer;
    line-height: 1.2;
}

.dash-field input:not([type="checkbox"]):not([type="radio"]),
.dash-field select,
.dash-field textarea {
    width: 100%;
    height: 44px;
    padding: 0 13px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    font-size: .92rem;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.dash-field textarea {
    height: auto;
    padding: 12px 13px;
    resize: vertical;
    min-height: 84px;
    line-height: 1.55;
}

.dash-field input:not([type="checkbox"]):not([type="radio"]):focus,
.dash-field select:focus,
.dash-field textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

.dash-field select {
    cursor: pointer;
}

.dash-form .dash-btn {
    margin-top: 4px;
}

/* ---- Modal icon tiles ---- */
.dash-modal-ic {
    width: 46px;
    height: 46px;
    min-width: 46px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    font-size: 1.1rem;
}

.dash-modal-ic.blue {
    background: rgba(37, 99, 235, .1);
    color: var(--primary);
}

.dash-modal-ic.green {
    background: rgba(16, 185, 129, .12);
    color: var(--dash-green);
}

.dash-modal-ic.amber {
    background: rgba(245, 158, 11, .15);
    color: var(--dash-amber);
}

.dash-modal-ic.red {
    background: rgba(239, 68, 68, .12);
    color: var(--dash-red);
}

.dash-modal-ic.sky {
    background: rgba(14, 165, 233, .12);
    color: var(--dash-sky);
}

.dash-modal-ic.violet {
    background: rgba(139, 92, 246, .12);
    color: var(--dash-violet);
}

/* ---- Modal sizing + footer actions ---- */
.dash-modal-box.dash-modal-sm {
    width: min(430px, 100%);
}

.dash-modal-box.dash-modal-lg {
    width: min(760px, 100%);
}

.dash-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.dash-modal-actions .dash-btn.ghost {
    background: var(--surface-light);
    color: var(--text);
    border-color: transparent;
}

.dash-modal-actions .dash-btn.ghost:hover {
    color: var(--primary);
}

.dash-btn.red.solid {
    background: var(--dash-red);
    color: #fff;
}

.dash-btn.red.solid:hover {
    background: #b91c1c;
    transform: translateY(-2px);
}

/* ---- Generic mini picture avatars (packages) ---- */
.dash-avatar-ic {
    width: 40px;
    height: 40px;
    min-width: 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    font-size: .98rem;
}

.dash-avatar-ic.blue {
    background: rgba(37, 99, 235, .1);
    color: var(--primary);
}

.dash-avatar-ic.green {
    background: rgba(16, 185, 129, .12);
    color: var(--dash-green);
}

.dash-avatar-ic.amber {
    background: rgba(245, 158, 11, .15);
    color: var(--dash-amber);
}

.dash-avatar-ic.red {
    background: rgba(239, 68, 68, .12);
    color: var(--dash-red);
}

.dash-avatar-ic.sky {
    background: rgba(14, 165, 233, .12);
    color: var(--dash-sky);
}

.dash-avatar-ic.violet {
    background: rgba(139, 92, 246, .12);
    color: var(--dash-violet);
}

/* ---- Rating pill ---- */
.dash-rating {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 30px;
    font-size: .82rem;
    font-weight: 800;
    background: rgba(16, 185, 129, .1);
    color: #059669;
    white-space: nowrap;
}

/* ---- Summary rows ---- */
.dash-summary-list {
    display: grid;
    gap: 0;
}

.dash-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--border);
    font-size: .9rem;
    flex-wrap: wrap;
}

.dash-summary-row:last-child {
    border-bottom: 0;
}

.dash-summary-row span {
    color: var(--text-light);
}

.dash-summary-row strong {
    font-weight: 800;
}

/* ---- Student profile modal ---- */
.dash-profile-summary {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.dash-profile-summary>img {
    width: 66px;
    height: 66px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(37, 99, 235, .15);
}

.dash-profile-summary h4 {
    font-size: 1.15rem;
    letter-spacing: -.3px;
}

.dash-profile-summary p {
    font-size: .84rem;
    color: var(--text-light);
    margin-top: 2px;
}

.dash-profile-kpis {
    display: flex;
    gap: 10px;
    margin-inline-start: auto;
    flex-wrap: wrap;
}

.dash-profile-kpis div {
    text-align: center;
    background: var(--surface-light);
    border-radius: 12px;
    padding: 10px 16px;
    min-width: 74px;
}

.dash-profile-kpis strong {
    display: block;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -.3px;
}

.dash-profile-kpis span {
    font-size: .72rem;
    color: var(--text-light);
}

.dash-modal-subtitle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .95rem;
    margin: 4px 0 12px;
}

.dash-modal-subtitle i {
    color: var(--primary);
}

/* ---- Reports ---- */
.dash-report-block {
    margin-bottom: 24px;
}

/* ---- Messages extras ---- */
.dash-msg-item.unread {
    background: rgba(37, 99, 235, .05);
}

.dash-msg-item.unread .dash-msg-top strong {
    color: var(--primary);
}

.dash-msg-badge {
    margin-inline-start: auto;
    flex-shrink: 0;
}

.dash-bubble p {
    margin: 0;
}

.dash-bubble time {
    display: block;
    font-size: .68rem;
    opacity: .65;
    margin-top: 4px;
}

.dash-thread-head .dash-msg-back {
    display: inline-flex;
    margin-inline-end: 2px;
}

/* ---- Sidebar tool active state ---- */
.dash-side-tool.active {
    color: var(--primary);
    border-color: var(--primary);
    background: rgba(37, 99, 235, .1);
}

/* ---- New row animation ---- */
.dash-table tbody tr.new-row td,
.veh-card.new-row {
    animation: dashFadeIn .4s ease;
}

@keyframes dashFadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 767px) {
    .dash-fluid-row {
        grid-template-columns: 1fr;
    }

    .dash-profile-kpis {
        margin-inline-start: 0;
        width: 100%;
        justify-content: flex-start;
    }

    .dash-thread-head .dash-msg-back {
        display: inline-flex;
        padding: 7px 10px;
    }

    .dash-bubble {
        max-width: 88%;
    }
}

body.dark-mode .dash-profile-summary>img {
    border-color: rgba(37, 99, 235, .35);
}

body.dark-mode .dash-msg-item.unread {
    background: rgba(37, 99, 235, .12);
}

body.dark-mode .dash-rating {
    background: rgba(16, 185, 129, .14);
}

/* ---- Student portal extras ---- */
.dash-pop-item.unread {
    background: rgba(37, 99, 235, .06);
}

.dash-pop-item.unread::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary);
    flex-shrink: 0;
    align-self: center;
    margin-inline-start: -2px;
}

.dash-pop-item.read {
    opacity: .75;
}

.dash-note-line {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .82rem;
    color: var(--text-light);
    margin: 14px 0 4px;
}

.dash-note-box {
    background: var(--surface-light);
    border: 1px solid var(--border);
    border-inline-start: 3px solid var(--primary);
    border-radius: 12px;
    padding: 16px 18px;
    font-size: .92rem;
    line-height: 1.7;
    color: var(--text);
}

.dash-center {
    text-align: center;
}

.dash-center h3 {
    margin-bottom: 2px;
}

.dash-btn.green.solid {
    background: #10b981;
    color: #fff;
}

.dash-btn.green.solid:hover {
    background: #059669;
    transform: translateY(-2px);
}

.dash-btn.sky {
    background: rgba(14, 165, 233, .12);
    color: var(--dash-sky, #0ea5e9);
}

.dash-btn.sky:hover {
    background: rgba(14, 165, 233, .22);
    transform: translateY(-2px);
}

body.dark-mode .dash-pop-item.unread {
    background: rgba(37, 99, 235, .14);
}

body.dark-mode .dash-note-box {
    background: rgba(148, 163, 184, .08);
}


/* =========================================================
   DRIVEWISE — AUTH PAGES (LOGIN, SIGNUP, FORGOT PASSWORD)
========================================================= */

body.auth-body {
    font-family: "DM Sans", sans-serif;
    background: var(--bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 20px 16px;
    position: relative;
    overflow-x: hidden;
}

body.auth-body::before,
body.auth-body::after {
    content: "";
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

body.auth-body::before {
    width: 520px;
    height: 520px;
    top: -140px;
    left: -120px;
    background: radial-gradient(circle, rgba(37, 99, 235, .12) 0%, transparent 70%);
}

body.auth-body::after {
    width: 420px;
    height: 420px;
    bottom: -100px;
    right: -80px;
    background: radial-gradient(circle, rgba(29, 78, 216, .10) 0%, transparent 70%);
}

.auth-page {
    width: 100%;
    max-width: 440px;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.auth-page.forgot-page {
    display: none;
}

.auth-page .forgot-form {
    margin-top: 8px;
}

.auth-page .btn-submit-forgot {
    margin-top: 8px;
}

.auth-page .footer-forgot {
    margin-top: 20px;
}

.login-card {
    width: 100%;
    background: var(--surface);
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(37, 99, 235, .18);
    padding: 34px 38px 28px;
    border: 1px solid rgba(37, 99, 235, .08);
    animation: authSlideUp .45s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes authSlideUp {
    from {
        opacity: 0;
        transform: translateY(28px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Logo — full height and weight across all views */
.auth-page .logo {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    margin-bottom: 20px;
    text-decoration: none;
}

.auth-page .logo-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.15rem;
    box-shadow: 0 4px 14px rgba(37, 99, 235, .35);
    flex-shrink: 0;
}

.auth-page .logo-text {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--navy);
    letter-spacing: -0.5px;
}

.auth-page .logo-text span {
    color: var(--primary);
}

/* Headings */
.auth-page .card-title {
    text-align: center;
    font-size: 1.55rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.4px;
    margin-bottom: 4px;
}

.auth-page .card-subtitle {
    text-align: center;
    font-size: .92rem;
    color: #64748b;
    margin-bottom: 20px;
}

/* Social buttons row */
.social-btns {
    display: flex;
    flex-direction: row;
    gap: 10px;
    margin-bottom: 16px;
}

.btn-social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 8px;
    border-radius: 12px;
    border: 1.5px solid var(--border);
    background: var(--surface);
    font-family: inherit;
    font-size: .88rem;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    transition: .25s ease;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
}

.btn-social:hover {
    background: rgba(37, 99, 235, .08);
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(37, 99, 235, .08);
}

.btn-social svg {
    flex-shrink: 0;
}

.btn-social .fb-icon {
    color: #1877f2;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.btn-social .apple-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* Divider */
.auth-page .divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 16px 0 14px;
    color: #64748b;
    font-size: .82rem;
    font-weight: 500;
    letter-spacing: .5px;
}

.auth-page .divider::before,
.auth-page .divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
}

/* Form fields */
.auth-page .form-group {
    margin-bottom: 14px;
}

.auth-page .form-label {
    display: block;
    font-size: .82rem;
    font-weight: 700;
    color: #64748b;
    letter-spacing: .6px;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.auth-page .input-wrap {
    position: relative;
}

.auth-page .form-input {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    font-family: inherit;
    font-size: .95rem;
    color: var(--text);
    background: #fafcff;
    transition: .25s ease;
    outline: none;
}

.auth-page .form-input::placeholder {
    color: #94a3b8;
}

.auth-page .form-input:focus {
    border-color: var(--primary);
    background: var(--surface);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .1);
}

.auth-page .form-input.has-suffix {
    padding-inline-end: 46px;
}

.auth-page .input-suffix {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #64748b;
    cursor: pointer;
    font-size: .95rem;
    background: none;
    border: none;
    display: flex;
    align-items: center;
    transition: .25s ease;
}

.auth-page .input-suffix:hover {
    color: var(--primary);
}

/* Form options row (remember me & forgot password) */
.form-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    gap: 8px;
    flex-wrap: nowrap;
}

.remember-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .9rem;
    color: #64748b;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.remember-label input[type="checkbox"] {
    width: 17px;
    height: 17px;
    accent-color: var(--primary);
    cursor: pointer;
}

.forgot-link {
    font-size: .9rem;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
    transition: .25s ease;
    white-space: nowrap;
}

.forgot-link:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

/* Terms checkbox row */
.terms-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
}

.terms-row input[type="checkbox"] {
    width: 17px;
    height: 17px;
    accent-color: var(--primary);
    margin-top: 2px;
    flex-shrink: 0;
    cursor: pointer;
}

.terms-text {
    font-size: .85rem;
    color: #64748b;
    line-height: 1.4;
}

.terms-text a {
    color: var(--primary);
    font-weight: 600;
}

.terms-text a:hover {
    text-decoration: underline;
}

/* Auth Primary Button */
.auth-page .btn-primary {
    width: 100%;
    padding: 13px;
    border-radius: 12px;
    border: none;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    font-family: inherit;
    font-size: .98rem;
    font-weight: 700;
    letter-spacing: .3px;
    cursor: pointer;
    transition: .25s ease;
    box-shadow: 0 6px 20px rgba(37, 99, 235, .35);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.auth-page .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(37, 99, 235, .45);
}

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

.auth-page .btn-primary:disabled {
    opacity: .7;
    cursor: not-allowed;
    transform: none;
}

/* Footer & Back Link */
.auth-page .card-footer {
    text-align: center;
    margin-top: 16px;
    font-size: .9rem;
    color: #64748b;
}

.auth-page .card-footer a {
    color: var(--primary);
    font-weight: 700;
    text-decoration: none;
    transition: .25s ease;
}

.auth-page .card-footer a:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

.auth-body .back-home {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 14px;
    font-size: .88rem;
    color: #64748b;
    text-decoration: none;
    transition: .25s ease;
}

.auth-body .back-home:hover {
    color: var(--primary);
}

.auth-body .back-home i {
    font-size: .8rem;
}

/* Corner Toggle Bar */
.corner-bar {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 9000;
    display: flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 50px;
    padding: 6px 10px;
    box-shadow: 0 4px 16px rgba(37, 99, 235, .12);
}

.corner-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: #64748b;
    font-size: .95rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .25s ease;
}

.corner-btn:hover {
    background: rgba(37, 99, 235, .1);
    color: var(--primary);
}

.corner-divider {
    width: 1px;
    height: 20px;
    background: var(--border);
}

/* Toast */
.auth-body .toast-wrap {
    position: fixed;
    top: 22px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
    min-width: 260px;
}

.auth-body .toast {
    background: var(--navy);
    color: #fff;
    padding: 14px 22px;
    border-radius: 12px;
    font-size: .9rem;
    font-weight: 500;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
    display: flex;
    align-items: center;
    gap: 10px;
    pointer-events: auto;
    white-space: nowrap;
    animation: authToastIn .3s cubic-bezier(.22, 1, .36, 1) both,
        authToastOut .35s ease forwards 3.2s;
}

.auth-body .toast.success {
    border-left: 4px solid #22c55e;
}

.auth-body .toast.error {
    border-left: 4px solid #ef4444;
}

.auth-body .toast.info {
    border-left: 4px solid var(--primary);
}

@keyframes authToastIn {
    from {
        opacity: 0;
        transform: translateY(-14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes authToastOut {
    to {
        opacity: 0;
        transform: translateY(-14px);
    }
}

/* ── Auth Dark Mode ── */
body.dark-mode.auth-body {
    background: #0f172a;
    --surface: #1e293b;
    --border: #334155;
    --text: #f1f5f9;
}

body.dark-mode .login-card {
    background: #1e293b;
    border-color: #334155;
}

body.dark-mode .auth-page .form-input {
    background: #0f172a;
    color: #f1f5f9;
    border-color: #334155;
}

body.dark-mode .auth-page .form-input:focus {
    background: #1e293b;
}

body.dark-mode .btn-social {
    background: #0f172a;
    border-color: #334155;
    color: #f1f5f9;
}

body.dark-mode .btn-social:hover {
    background: rgba(37, 99, 235, .2);
    border-color: var(--primary);
}

body.dark-mode .corner-bar {
    background: #1e293b;
    border-color: #334155;
}

body.dark-mode .corner-btn {
    color: #94a3b8;
}

body.dark-mode .corner-divider {
    background: #334155;
}

body.dark-mode .auth-page .divider {
    color: #64748b;
}

body.dark-mode .auth-page .card-title {
    color: #f1f5f9;
}

body.dark-mode .auth-page .card-subtitle,
body.dark-mode .remember-label,
body.dark-mode .terms-text,
body.dark-mode .auth-page .card-footer {
    color: #94a3b8;
}

body.dark-mode .auth-page .logo-text {
    color: #f1f5f9;
}

body.dark-mode.auth-body,
html.dark-mode body.auth-body {
    background-color: #000000;
    background: #000000;
    color: #f1f5f9;
}

/* ── Auth RTL Support ── */
[dir="rtl"] .corner-bar {
    right: auto;
    left: 16px;
}

[dir="rtl"] .auth-page .form-input {
    text-align: right;
}

[dir="rtl"] .auth-page .form-input.has-suffix {
    padding-left: 44px;
    padding-right: 16px;
}

[dir="rtl"] .auth-page .form-options {
    direction: rtl;
}

[dir="rtl"] .auth-page .terms-row {
    direction: rtl;
    text-align: right;
}

[dir="rtl"] .auth-page .input-suffix {
    right: auto;
    left: 14px;
}

[dir="rtl"] .auth-body .back-home i {
    transform: scaleX(-1);
}

[dir="rtl"] .auth-page .card-footer a i {
    transform: scaleX(-1);
}

[dir="rtl"] .auth-body .toast.success {
    border-left: none;
    border-right: 4px solid #22c55e;
}

[dir="rtl"] .auth-body .toast.error {
    border-left: none;
    border-right: 4px solid #ef4444;
}

[dir="rtl"] .auth-body .toast.info {
    border-left: none;
    border-right: 4px solid var(--primary);
}

/* ── Auth Responsive ── */

@media (max-width: 600px) {
    body.auth-body {
        padding: 8px 12px;
        justify-content: center;
        min-height: 100dvh;
    }

    /* Corner bar: sits above the card — zero overlap */
    .corner-bar {
        position: static !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        align-self: flex-end;
        margin-bottom: 8px;
        box-shadow: 0 2px 10px rgba(37, 99, 235, .1);
        padding: 4px 8px;
        gap: 4px;
    }

    [dir="rtl"] .corner-bar {
        align-self: flex-start;
    }

    .corner-btn {
        width: 30px;
        height: 30px;
        font-size: .84rem;
    }

    .auth-page {
        max-width: 100%;
    }

    .login-card {
        padding: 22px 20px 18px;
        border-radius: 18px;
    }

    /* Logo: scales down on mobile to match all other pages */
    .auth-page .logo {
        gap: 7px;
        margin-bottom: 14px;
    }

    .auth-page .logo-icon {
        width: 32px;
        height: 32px;
        min-width: 32px;
        font-size: 14px;
        border-radius: 8px;
    }

    .auth-page .logo-text {
        font-size: 16px;
        letter-spacing: -0.3px;
    }


    .auth-page .card-title {
        font-size: 1.35rem;
        margin-bottom: 3px;
    }

    .auth-page .card-subtitle {
        font-size: .88rem;
        margin-bottom: 14px;
    }

    .auth-page .form-group {
        margin-bottom: 11px;
    }

    .auth-page .form-label {
        font-size: .78rem;
        margin-bottom: 4px;
    }

    .auth-page .form-input {
        padding: 10px 14px;
        font-size: .92rem;
    }

    .form-options {
        margin-bottom: 13px;
        font-size: .88rem;
    }

    .remember-label {
        font-size: .85rem;
    }

    .forgot-link {
        font-size: .85rem;
    }

    .terms-row {
        margin-bottom: 11px;
        gap: 8px;
    }

    .terms-text {
        font-size: .82rem;
    }

    .auth-page .btn-primary {
        padding: 11px;
        font-size: .95rem;
    }

    .auth-page .divider {
        margin: 12px 0 10px;
        font-size: .76rem;
    }

    /* Social buttons: all 3 in one row */
    .social-btns {
        gap: 6px;
        flex-wrap: nowrap;
        margin-bottom: 12px;
    }

    .btn-social {
        font-size: .82rem;
        padding: 9px 6px;
        gap: 4px;
        flex: 1;
        min-width: 0;
    }

    .auth-page .card-footer {
        margin-top: 11px;
        font-size: .85rem;
    }

    .auth-body .back-home {
        margin-top: 8px;
        font-size: .84rem;
    }
}

@media (max-width: 420px) {
    body.auth-body {
        padding: 6px 10px;
    }

    .corner-bar {
        margin-bottom: 6px;
    }

    .corner-btn {
        width: 28px;
        height: 28px;
        font-size: .82rem;
    }

    .login-card {
        padding: 18px 16px 15px;
        border-radius: 16px;
    }

    .auth-page .logo {
        gap: 6px;
        margin-bottom: 12px;
    }

    .auth-page .logo-icon {
        width: 30px;
        height: 30px;
        min-width: 30px;
        font-size: 13px;
        border-radius: 8px;
    }

    .auth-page .logo-text {
        font-size: 15px;
    }


    .auth-page .card-title {
        font-size: 1.25rem;
    }

    .auth-page .card-subtitle {
        font-size: .84rem;
        margin-bottom: 12px;
    }

    .auth-page .form-group {
        margin-bottom: 9px;
    }

    .auth-page .form-input {
        padding: 9px 12px;
        font-size: .9rem;
    }

    .form-options {
        margin-bottom: 11px;
    }

    .social-btns {
        gap: 5px;
        margin-bottom: 10px;
    }

    .btn-social {
        font-size: .78rem;
        padding: 8px 4px;
        gap: 3px;
    }

    .auth-page .divider {
        margin: 10px 0 8px;
    }

    .auth-page .btn-primary {
        padding: 10px;
        font-size: .92rem;
    }
}

@media (max-width: 360px) {
    body.auth-body {
        padding: 6px 8px;
    }

    .login-card {
        padding: 16px 13px 13px;
    }

    .auth-page .card-title {
        font-size: 1.15rem;
    }

    .social-btns {
        gap: 4px;
    }

    .btn-social {
        font-size: .74rem;
        padding: 8px 3px;
        gap: 2px;
    }
}

@media (max-height: 520px) and (max-width: 820px) {
    body.auth-body {
        padding: 6px 12px;
    }

    .corner-bar {
        position: static !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        align-self: flex-end;
        margin-bottom: 4px;
    }

    [dir="rtl"] .corner-bar {
        align-self: flex-start;
    }

    .auth-page .card-subtitle {
        display: none;
    }

    .auth-page .logo {
        gap: 6px;
        margin-bottom: 8px;
    }

    .auth-page .logo-icon {
        width: 28px;
        height: 28px;
        min-width: 28px;
        font-size: 12px;
        border-radius: 7px;
    }

    .auth-page .logo-text {
        font-size: 14px;
    }


    .login-card {
        padding: 14px 20px 12px;
    }

    .auth-page .form-group {
        margin-bottom: 7px;
    }

    .auth-body .back-home {
        display: none;
    }

    .auth-page .divider {
        margin: 8px 0;
    }

    .social-btns {
        margin-bottom: 8px;
    }
}