/* ============================================
   CompareEV - Main Frontend Stylesheet
   File: assets/css/style.css
   ============================================ */

/* --------------------------------------------
   CSS Variables — Design Tokens
   -------------------------------------------- */
:root {
    /* Brand Colors */
    --primary:         #0066FF;
    --primary-dark:    #0052CC;
    --primary-light:   #E8F0FF;
    --secondary:       #00C896;
    --secondary-light: #E6FAF5;
    --accent:          #FF6B00;

    /* Text */
    --text-dark:       #0A0F1E;
    --text-body:       #2D3A4A;
    --text-muted:      #5A6A7E;
    --text-light:      #8A9BB0;

    /* Backgrounds */
    --bg-white:        #FFFFFF;
    --bg-light:        #F4F6F9;
    --bg-dark:         #0A0F1E;
    --bg-dark-2:       #111827;

    /* Borders */
    --border:          #E2E8F0;
    --border-dark:     #CBD5E1;

    /* Shadows */
    --shadow-sm:       0 1px 4px rgba(0,0,0,0.06);
    --shadow-md:       0 4px 16px rgba(0,0,0,0.08);
    --shadow-lg:       0 8px 32px rgba(0,0,0,0.12);
    --shadow-blue:     0 4px 20px rgba(0,102,255,0.25);

    /* Layout */
    --container:       1200px;
    --header-h:        68px;
    --radius:          12px;
    --radius-sm:       8px;
    --radius-lg:       16px;

    /* Transitions */
    --transition:      all 0.2s ease;

    /* Font */
    --font:            'Poppins', sans-serif;
}

/* --------------------------------------------
   Reset & Base
   -------------------------------------------- */
*, *::before, *::after {
    margin:     0;
    padding:    0;
    box-sizing: border-box;
}

html { scroll-behavior: smooth; }

body {
    font-family:      var(--font);
    color:            var(--text-body);
    background:       var(--bg-white);
    font-size:        15px;
    line-height:      1.65;
    -webkit-font-smoothing: antialiased;
}

a {
    color:           var(--primary);
    text-decoration: none;
    transition:      var(--transition);
}

a:hover { color: var(--primary-dark); }

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

/* --------------------------------------------
   Layout Helpers
   -------------------------------------------- */
.container {
    max-width: var(--container);
    margin:    0 auto;
    padding:   0 20px;
}

.section {
    padding: 64px 0;
}

.section-sm {
    padding: 40px 0;
}

/* Section heading style */
.section-head {
    margin-bottom: 40px;
}

.section-label {
    font-size:      12px;
    font-weight:    700;
    color:          var(--primary);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom:  8px;
}

.section-title {
    font-size:   28px;
    font-weight: 800;
    color:       var(--text-dark);
    line-height: 1.2;
}

.section-title span {
    color: var(--primary);
}

.section-sub {
    font-size:  15px;
    color:      var(--text-muted);
    margin-top: 8px;
}

/* --------------------------------------------
   Buttons
   -------------------------------------------- */
.btn {
    display:         inline-flex;
    align-items:     center;
    gap:             8px;
    padding:         12px 24px;
    border-radius:   var(--radius-sm);
    font-size:       14px;
    font-weight:     600;
    font-family:     var(--font);
    border:          none;
    cursor:          pointer;
    transition:      var(--transition);
    text-decoration: none;
    white-space:     nowrap;
}

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

.btn-primary:hover {
    background: var(--primary-dark);
    color:      #fff;
    box-shadow: var(--shadow-blue);
    transform:  translateY(-1px);
}

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

.btn-secondary:hover {
    background: #00A87A;
    color:      #fff;
}

.btn-outline {
    background:  transparent;
    color:       var(--primary);
    border:      2px solid var(--primary);
}

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

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

.btn-sm {
    padding:   8px 16px;
    font-size: 13px;
}

.btn-lg {
    padding:   15px 32px;
    font-size: 15px;
}

.btn-full {
    width:           100%;
    justify-content: center;
}

/* Compare Add Button — on vehicle cards */
.btn-compare {
    background:  var(--bg-light);
    color:       var(--text-muted);
    border:      1.5px solid var(--border);
    font-size:   12px;
    padding:     7px 14px;
}

.btn-compare:hover,
.btn-compare.added {
    background:  var(--primary-light);
    color:       var(--primary);
    border-color: var(--primary);
}

/* --------------------------------------------
   Header
   -------------------------------------------- */
.site-header {
    position:     sticky;
    top:          0;
    z-index:      200;
    background:   var(--bg-white);
    border-bottom: 1px solid var(--border);
    box-shadow:   var(--shadow-sm);
    height:       var(--header-h);
    display:      flex;
    align-items:  center;
}

.header-inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             24px;
    width:           100%;
}

/* Logo */
.logo { display: flex; align-items: center; }

.logo-text {
    font-size:   24px;
    font-weight: 800;
    color:       var(--text-dark);
    line-height: 1;
}

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

/* Desktop Nav */
.main-nav {
    display:     flex;
    align-items: center;
    gap:         4px;
}

.main-nav .nav-link {
    padding:       8px 14px;
    color:         var(--text-muted);
    font-size:     14px;
    font-weight:   500;
    border-radius: var(--radius-sm);
    transition:    var(--transition);
	border: 0px solid red;
}

.main-nav .nav-link:hover,
.main-nav .nav-link.active {
    color:      var(--primary);
    background: var(--primary-light);
}

/* Header Right Buttons */
.header-right {
    display:     flex;
    align-items: center;
    gap:         10px;
}

.search-toggle {
    background:    none;
    border:        none;
    cursor:        pointer;
    color:         var(--text-muted);
    padding:       8px;
    border-radius: var(--radius-sm);
    transition:    var(--transition);
    display:       flex;
}

.search-toggle:hover {
    background: var(--bg-light);
    color:      var(--primary);
}

/* Compare tray header button */
.compare-tray-btn {
    display:       flex;
    align-items:   center;
    gap:           6px;
    padding:       8px 14px;
    border-radius: var(--radius-sm);
    background:    var(--primary-light);
    color:         var(--primary);
    font-size:     13px;
    font-weight:   600;
    border:        1.5px solid rgba(0,102,255,0.2);
}

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

.compare-count {
    background:    var(--primary);
    color:         #fff;
    width:         20px;
    height:        20px;
    border-radius: 50%;
    font-size:     11px;
    font-weight:   700;
    display:       flex;
    align-items:   center;
    justify-content: center;
}

.compare-tray-btn:hover .compare-count {
    background: rgba(255,255,255,0.3);
}

/* Mobile menu button */
.mobile-menu-btn {
    display:        none;
    flex-direction: column;
    gap:            5px;
    background:     none;
    border:         none;
    cursor:         pointer;
    padding:        8px;
}

.mobile-menu-btn span {
    display:       block;
    width:         22px;
    height:        2px;
    background:    var(--text-dark);
    border-radius: 2px;
    transition:    var(--transition);
}

/* --------------------------------------------
   Search Overlay
   -------------------------------------------- */
.search-overlay {
    position:   fixed;
    inset:      0;
    background: rgba(10,15,30,0.85);
    z-index:    300;
    display:    flex;
    align-items: flex-start;
    padding-top: 80px;
    opacity:    0;
    visibility: hidden;
    transition: var(--transition);
    backdrop-filter: blur(4px);
}

.search-overlay.open {
    opacity:    1;
    visibility: visible;
}

.search-overlay-inner {
    width:   100%;
    padding: 0 20px;
}

.search-box-wrapper {
    max-width:     680px;
    margin:        0 auto;
    position:      relative;
}

.search-input-box {
    display:       flex;
    align-items:   center;
    gap:           12px;
    background:    #fff;
    border-radius: var(--radius);
    padding:       16px 20px;
    box-shadow:    var(--shadow-lg);
}

.search-input-box svg {
    color:      var(--text-muted);
    flex-shrink: 0;
}

.search-input-box input {
    flex:        1;
    border:      none;
    outline:     none;
    font-size:   16px;
    font-family: var(--font);
    color:       var(--text-dark);
    background:  transparent;
}

.search-input-box input::placeholder {
    color: var(--text-light);
}

.search-close {
    background:    none;
    border:        none;
    cursor:        pointer;
    color:         var(--text-muted);
    font-size:     18px;
    padding:       4px;
    line-height:   1;
    flex-shrink:   0;
}

/* Search results dropdown */
.search-results {
    background:    #fff;
    border-radius: var(--radius);
    margin-top:    8px;
    box-shadow:    var(--shadow-lg);
    overflow:      hidden;
    max-height:    400px;
    overflow-y:    auto;
    display:       none;
}

.search-results.show { display: block; }

.search-result-item {
    display:     flex;
    align-items: center;
    gap:         14px;
    padding:     14px 20px;
    border-bottom: 1px solid var(--border);
    transition:  var(--transition);
    cursor:      pointer;
}

.search-result-item:last-child { border-bottom: none; }

.search-result-item:hover { background: var(--bg-light); }

.search-result-img {
    width:         48px;
    height:        36px;
    object-fit:    cover;
    border-radius: 6px;
    flex-shrink:   0;
    background:    var(--bg-light);
}

.search-result-name {
    font-weight: 600;
    font-size:   14px;
    color:       var(--text-dark);
}

.search-result-meta {
    font-size:  12px;
    color:      var(--text-muted);
    margin-top: 2px;
}

.search-result-price {
    margin-left: auto;
    font-size:   13px;
    font-weight: 700;
    color:       var(--primary);
    flex-shrink: 0;
}

.search-no-results {
    padding:    30px;
    text-align: center;
    color:      var(--text-muted);
    font-size:  14px;
}

/* --------------------------------------------
   Mobile Navigation
   -------------------------------------------- */
.mobile-nav {
    position:   fixed;
    top:        0;
    right:      -280px;
    width:      280px;
    height:     100vh;
    background: var(--bg-white);
    z-index:    250;
    transition: right 0.3s ease;
    box-shadow: var(--shadow-lg);
    overflow-y: auto;
    padding:    80px 0 40px;
}

.mobile-nav.open { right: 0; }

.mobile-nav-inner {
    display:        flex;
    flex-direction: column;
}

.mobile-nav-link {
    padding:     14px 24px;
    color:       var(--text-body);
    font-size:   15px;
    font-weight: 500;
    border-bottom: 1px solid var(--border);
    transition:  var(--transition);
}

.mobile-nav-link:hover {
    color:      var(--primary);
    background: var(--primary-light);
}

.mobile-nav-overlay {
    position:   fixed;
    inset:      0;
    background: rgba(0,0,0,0.5);
    z-index:    240;
    display:    none;
}

.mobile-nav-overlay.show { display: block; }

/* --------------------------------------------
   Breadcrumbs
   -------------------------------------------- */
.breadcrumb-bar {
    background:    var(--bg-light);
    border-bottom: 1px solid var(--border);
    padding:       10px 0;
}

.breadcrumb {
    display:     flex;
    align-items: center;
    flex-wrap:   wrap;
    gap:         6px;
    font-size:   13px;
}

.breadcrumb a {
    color: var(--text-muted);
}

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

.bc-sep { color: var(--text-light); }

.bc-current {
    color:       var(--text-dark);
    font-weight: 600;
}

/* --------------------------------------------
   Vehicle Cards
   -------------------------------------------- */
.vehicles-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap:                   24px;
}

.vehicle-card {
    background:    var(--bg-white);
    border-radius: var(--radius);
    border:        1px solid var(--border);
    overflow:      hidden;
    transition:    var(--transition);
    display:       flex;
    flex-direction: column;
}

.vehicle-card:hover {
    box-shadow: var(--shadow-md);
    transform:  translateY(-4px);
    border-color: var(--primary);
}

/* Card image area */
.card-img-wrap {
    position:   relative;
    background: var(--bg-light);
    padding:    20px;
    height:     180px;
    overflow:   hidden;
    display:    flex;
    align-items: center;
    justify-content: center;
}

.card-img-wrap img {
    max-height: 140px;
    width:      auto;
    object-fit: contain;
    transition: transform 0.3s ease;
}

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

/* Status badge on card */
.card-badge {
    position:      absolute;
    top:           12px;
    left:          12px;
    padding:       4px 10px;
    border-radius: 20px;
    font-size:     11px;
    font-weight:   700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.card-badge-new {
    background: var(--primary);
    color:      #fff;
}

.card-badge-upcoming {
    background: var(--accent);
    color:      #fff;
}

/* Card body */
.card-body {
    padding: 18px;
    flex:    1;
    display: flex;
    flex-direction: column;
}

.card-brand {
    font-size:  12px;
    color:      var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.card-name {
    font-size:   16px;
    font-weight: 700;
    color:       var(--text-dark);
    margin-bottom: 12px;
    line-height: 1.3;
}

/* Key specs row on card */
.card-specs {
    display:               grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap:                   8px;
    margin-bottom:         16px;
    padding:               12px;
    background:            var(--bg-light);
    border-radius:         var(--radius-sm);
}

.spec-item {
    text-align: center;
}

.spec-value {
    font-size:   14px;
    font-weight: 700;
    color:       var(--text-dark);
    line-height: 1.2;
}

.spec-label {
    font-size:  10px;
    color:      var(--text-muted);
    margin-top: 2px;
    font-weight: 500;
}

/* Price row */
.card-price-row {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-top:      auto;
    padding-top:     12px;
    border-top:      1px solid var(--border);
}

.card-price {
    font-size:   18px;
    font-weight: 800;
    color:       var(--text-dark);
}

.card-price small {
    font-size:  11px;
    font-weight: 500;
    color:      var(--text-muted);
    display:    block;
}

/* Card action buttons */
.card-actions {
    display: flex;
    gap:     8px;
    padding: 0 18px 18px;
}

.card-actions .btn {
    flex:            1;
    justify-content: center;
    font-size:       13px;
    padding:         9px 12px;
}

/* --------------------------------------------
   Hero Section
   -------------------------------------------- */
.hero {
    background:    var(--bg-dark);
    padding:       80px 0 64px;
    position:      relative;
    overflow:      hidden;
}

/* Subtle blue glow behind hero */
.hero::before {
    content:       '';
    position:      absolute;
    top:           -100px;
    left:          50%;
    transform:     translateX(-50%);
    width:         800px;
    height:        800px;
    background:    radial-gradient(circle, rgba(0,102,255,0.15) 0%, transparent 70%);
    pointer-events: none;
}

.hero-content {
    position:  relative;
    z-index:   1;
    text-align: center;
    max-width: 700px;
    margin:    0 auto;
}

.hero-tag {
    display:        inline-flex;
    align-items:    center;
    gap:            8px;
    background:     rgba(0,102,255,0.15);
    border:         1px solid rgba(0,102,255,0.3);
    color:          #6699FF;
    padding:        6px 16px;
    border-radius:  20px;
    font-size:      12px;
    font-weight:    600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom:  20px;
}

.hero-title {
    font-size:   48px;
    font-weight: 800;
    color:       #fff;
    line-height: 1.1;
    margin-bottom: 16px;
}

.hero-title span { color: var(--primary); }

.hero-sub {
    font-size:     17px;
    color:         rgba(255,255,255,0.55);
    margin-bottom: 40px;
    line-height:   1.6;
}

/* Hero Search Bar */
.hero-search {
    background:    #fff;
    border-radius: var(--radius);
    padding:       8px 8px 8px 20px;
    display:       flex;
    align-items:   center;
    gap:           12px;
    box-shadow:    var(--shadow-lg);
    max-width:     560px;
    margin:        0 auto 40px;
}

.hero-search svg {
    color:      var(--text-muted);
    flex-shrink: 0;
}

.hero-search input {
    flex:        1;
    border:      none;
    outline:     none;
    font-size:   15px;
    font-family: var(--font);
    color:       var(--text-dark);
    background:  transparent;
}

.hero-search input::placeholder { color: var(--text-light); }

.hero-search .btn { flex-shrink: 0; }

/* Hero stats row */
.hero-stats {
    display:         flex;
    justify-content: center;
    gap:             40px;
    flex-wrap:       wrap;
}

.hero-stat-value {
    font-size:   28px;
    font-weight: 800;
    color:       #fff;
    line-height: 1;
}

.hero-stat-label {
    font-size:  12px;
    color:      rgba(255,255,255,0.45);
    margin-top: 4px;
}

/* --------------------------------------------
   Category Cards (Homepage)
   -------------------------------------------- */
.category-cards {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   24px;
}

.category-card {
    background:    var(--bg-white);
    border:        1px solid var(--border);
    border-radius: var(--radius-lg);
    padding:       32px 24px;
    text-align:    center;
    transition:    var(--transition);
    cursor:        pointer;
}

.category-card:hover {
    border-color: var(--primary);
    box-shadow:   var(--shadow-md);
    transform:    translateY(-4px);
}

.category-icon {
    font-size:     48px;
    margin-bottom: 16px;
    display:       block;
}

.category-card h3 {
    font-size:   18px;
    font-weight: 700;
    color:       var(--text-dark);
    margin-bottom: 6px;
}

.category-card p {
    font-size:     13px;
    color:         var(--text-muted);
    margin-bottom: 16px;
}

.category-count {
    display:        inline-block;
    background:     var(--primary-light);
    color:          var(--primary);
    padding:        4px 12px;
    border-radius:  20px;
    font-size:      12px;
    font-weight:    700;
}

/* --------------------------------------------
   Comparison Table (Family Page + Compare Page)
   -------------------------------------------- */
.compare-table-wrap {
    overflow-x: auto;
    border:     1px solid var(--border);
    border-radius: var(--radius);
}

.compare-table {
    width:           100%;
    border-collapse: collapse;
    min-width:       600px;
}

/* Sticky first column — spec labels */
.compare-table td:first-child,
.compare-table th:first-child {
    position:    sticky;
    left:        0;
    background:  var(--bg-light);
    z-index:     2;
    font-weight: 600;
    color:       var(--text-muted);
    font-size:   13px;
    min-width:   160px;
    border-right: 2px solid var(--border);
}

/* Vehicle header row */
.compare-table thead th {
    padding:        16px;
    text-align:     center;
    border-bottom:  2px solid var(--border);
    background:     var(--bg-white);
    vertical-align: bottom;
}

.compare-table thead th:first-child {
    text-align:  left;
    background:  var(--bg-light);
}

/* Vehicle name in header */
.ct-vehicle-name {
    font-size:   15px;
    font-weight: 700;
    color:       var(--text-dark);
    margin-top:  10px;
}

.ct-vehicle-price {
    font-size:   13px;
    color:       var(--primary);
    font-weight: 600;
}

.ct-vehicle-img {
    width:      100px;
    height:     70px;
    object-fit: contain;
    margin:     0 auto;
}

/* Data rows */
.compare-table tbody td {
    padding:        13px 16px;
    text-align:     center;
    border-bottom:  1px solid var(--border);
    font-size:      14px;
    color:          var(--text-body);
}

/* Section label rows */
.compare-table .row-section td {
    background:     var(--bg-light);
    font-weight:    700;
    font-size:      11px;
    color:          var(--primary);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding:        10px 16px;
}

/* Highlight better value */
.best-val {
    color:       var(--secondary) !important;
    font-weight: 700 !important;
}

/* Highlight worse value subtly */
.low-val {
    color: var(--text-muted) !important;
}

/* --------------------------------------------
   Spec Table (Vehicle Detail Page)
   -------------------------------------------- */
.spec-table-section {
    margin-bottom: 32px;
}

.spec-table-title {
    font-size:     15px;
    font-weight:   700;
    color:         var(--text-dark);
    padding:       14px 20px;
    background:    var(--bg-light);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    border:        1px solid var(--border);
    border-bottom: none;
}

.spec-table {
    width:           100%;
    border-collapse: collapse;
    border:          1px solid var(--border);
    border-radius:   0 0 var(--radius-sm) var(--radius-sm);
    overflow:        hidden;
}

.spec-table tr:last-child td { border-bottom: none; }

.spec-table td {
    padding:       12px 20px;
    border-bottom: 1px solid var(--border);
    font-size:     14px;
}

.spec-table td:first-child {
    color:       var(--text-muted);
    font-weight: 600;
    width:       45%;
    background:  var(--bg-light);
}

.spec-table td:last-child {
    color:       var(--text-dark);
    font-weight: 500;
}

/* --------------------------------------------
   Range Bar (ARAI vs Real World)
   -------------------------------------------- */
.range-compare {
    background:    var(--bg-white);
    border:        1px solid var(--border);
    border-radius: var(--radius);
    padding:       24px;
    margin-bottom: 24px;
}

.range-compare h3 {
    font-size:     16px;
    font-weight:   700;
    color:         var(--text-dark);
    margin-bottom: 20px;
}

.range-bar-wrap {
    margin-bottom: 16px;
}

.range-bar-label {
    display:         flex;
    justify-content: space-between;
    font-size:       13px;
    font-weight:     600;
    margin-bottom:   8px;
}

.range-bar-track {
    background:    var(--bg-light);
    border-radius: 20px;
    height:        10px;
    overflow:      hidden;
}

.range-bar-fill {
    height:        100%;
    border-radius: 20px;
    transition:    width 1s ease;
}

.range-bar-arai   .range-bar-fill { background: var(--primary); }
.range-bar-real   .range-bar-fill { background: var(--secondary); }

.range-note {
    font-size:  12px;
    color:      var(--text-muted);
    margin-top: 12px;
    font-style: italic;
}

/* --------------------------------------------
   EMI Calculator
   -------------------------------------------- */
.emi-calculator {
    background:    var(--bg-white);
    border:        1px solid var(--border);
    border-radius: var(--radius);
    padding:       24px;
    margin-bottom: 24px;
}

.emi-calculator h3 {
    font-size:     16px;
    font-weight:   700;
    color:         var(--text-dark);
    margin-bottom: 20px;
}

.emi-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:     16px;
    margin-bottom: 20px;
}

.emi-input-group label {
    display:       block;
    font-size:     12px;
    font-weight:   600;
    color:         var(--text-muted);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.emi-input-group input,
.emi-input-group select {
    width:         100%;
    padding:       10px 14px;
    border:        1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-size:     14px;
    font-family:   var(--font);
    color:         var(--text-dark);
    outline:       none;
    transition:    var(--transition);
}

.emi-input-group input:focus,
.emi-input-group select:focus {
    border-color: var(--primary);
    box-shadow:   0 0 0 3px rgba(0,102,255,0.1);
}

.emi-result {
    background:    var(--primary-light);
    border:        1px solid rgba(0,102,255,0.2);
    border-radius: var(--radius-sm);
    padding:       16px 20px;
    display:       flex;
    align-items:   center;
    justify-content: space-between;
    gap:           16px;
    flex-wrap:     wrap;
}

.emi-amount {
    font-size:   28px;
    font-weight: 800;
    color:       var(--primary);
}

.emi-amount small {
    font-size:   12px;
    font-weight: 500;
    color:       var(--text-muted);
    display:     block;
}

.emi-breakdown {
    font-size:  12px;
    color:      var(--text-muted);
    text-align: right;
}

/* --------------------------------------------
   City Price Selector
   -------------------------------------------- */
.city-price-box {
    background:    var(--bg-white);
    border:        1px solid var(--border);
    border-radius: var(--radius);
    padding:       24px;
    margin-bottom: 24px;
}

.city-price-box h3 {
    font-size:     16px;
    font-weight:   700;
    color:         var(--text-dark);
    margin-bottom: 16px;
}

.city-selects {
    display: flex;
    gap:     12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.city-selects select {
    flex:          1;
    min-width:     140px;
    padding:       10px 14px;
    border:        1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-size:     14px;
    font-family:   var(--font);
    color:         var(--text-dark);
    outline:       none;
    transition:    var(--transition);
}

.city-selects select:focus {
    border-color: var(--primary);
}

.city-price-display {
    font-size:   28px;
    font-weight: 800;
    color:       var(--text-dark);
}

.city-price-display small {
    font-size:  13px;
    color:      var(--text-muted);
    font-weight: 400;
    margin-left: 8px;
}

.city-price-note {
    font-size:  12px;
    color:      var(--text-muted);
    margin-top: 8px;
}

/* --------------------------------------------
   Subsidy Box
   -------------------------------------------- */
.subsidy-box {
    background:    var(--secondary-light);
    border:        1px solid rgba(0,200,150,0.25);
    border-radius: var(--radius);
    padding:       20px 24px;
    margin-bottom: 24px;
}

.subsidy-box h3 {
    font-size:     15px;
    font-weight:   700;
    color:         var(--text-dark);
    margin-bottom: 12px;
    display:       flex;
    align-items:   center;
    gap:           8px;
}

.subsidy-amount {
    font-size:   24px;
    font-weight: 800;
    color:       var(--secondary);
    margin-bottom: 8px;
}

.subsidy-desc {
    font-size:  13px;
    color:      var(--text-muted);
}

/* --------------------------------------------
   Blog Cards
   -------------------------------------------- */
.blog-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap:                   24px;
}

.blog-card {
    background:    var(--bg-white);
    border:        1px solid var(--border);
    border-radius: var(--radius);
    overflow:      hidden;
    transition:    var(--transition);
}

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

.blog-card-img {
    width:      100%;
    height:     180px;
    object-fit: cover;
    background: var(--bg-light);
}

.blog-card-body {
    padding: 20px;
}

.blog-tag {
    display:        inline-block;
    background:     var(--primary-light);
    color:          var(--primary);
    padding:        3px 10px;
    border-radius:  20px;
    font-size:      11px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom:  10px;
}

.blog-card-title {
    font-size:   16px;
    font-weight: 700;
    color:       var(--text-dark);
    line-height: 1.4;
    margin-bottom: 10px;
}

.blog-card-title a {
    color: var(--text-dark);
}

.blog-card-title a:hover { color: var(--primary); }

.blog-card-meta {
    font-size:  12px;
    color:      var(--text-muted);
    display:    flex;
    gap:        12px;
    flex-wrap:  wrap;
}

/* --------------------------------------------
   Newsletter Section
   -------------------------------------------- */
.newsletter-section {
    background:  var(--bg-dark);
    padding:     56px 0;
    position:    relative;
    overflow:    hidden;
}

.newsletter-section::before {
    content:       '';
    position:      absolute;
    right:         -200px;
    top:           50%;
    transform:     translateY(-50%);
    width:         600px;
    height:        600px;
    background:    radial-gradient(circle, rgba(0,102,255,0.12) 0%, transparent 70%);
    pointer-events: none;
}

.newsletter-inner {
    position:    relative;
    z-index:     1;
    display:     flex;
    align-items: center;
    gap:         40px;
    flex-wrap:   wrap;
}

.newsletter-text {
    flex: 1;
    min-width: 240px;
}

.newsletter-text h3 {
    font-size:   24px;
    font-weight: 800;
    color:       #fff;
    margin-bottom: 6px;
}

.newsletter-text p {
    color:     rgba(255,255,255,0.5);
    font-size: 14px;
}

/* Newsletter form */
.newsletter-form {
    display:     flex;
    gap:         10px;
    flex-wrap:   wrap;
    flex:        1;
    min-width:   280px;
}

.nl-input {
    flex:          1;
    min-width:     160px;
    padding:       12px 16px;
    border:        1.5px solid rgba(255,255,255,0.15);
    border-radius: var(--radius-sm);
    background:    rgba(255,255,255,0.08);
    color:         #fff;
    font-size:     14px;
    font-family:   var(--font);
    outline:       none;
    transition:    var(--transition);
}

.nl-input::placeholder { color: rgba(255,255,255,0.35); }

.nl-input:focus {
    border-color: var(--primary);
    background:   rgba(255,255,255,0.12);
}

.nl-btn {
    padding:       12px 24px;
    background:    var(--primary);
    color:         #fff;
    border:        none;
    border-radius: var(--radius-sm);
    font-size:     14px;
    font-weight:   700;
    font-family:   var(--font);
    cursor:        pointer;
    transition:    var(--transition);
    white-space:   nowrap;
}

.nl-btn:hover {
    background: var(--primary-dark);
    box-shadow: var(--shadow-blue);
}

.nl-message {
    width:      100%;
    font-size:  13px;
    margin-top: 8px;
}

.nl-message.success { color: var(--secondary); }
.nl-message.error   { color: #FF6B6B; }

/* --------------------------------------------
   Footer
   -------------------------------------------- */
.site-footer {
    background: var(--bg-dark-2);
    padding:    56px 0 0;
    color:      rgba(255,255,255,0.65);
}

.footer-grid {
    display:               grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap:                   48px;
    padding-bottom:        48px;
    border-bottom:         1px solid rgba(255,255,255,0.08);
}

.footer-logo {
    font-size:   26px;
    font-weight: 800;
    color:       #fff;
    margin-bottom: 14px;
}

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

.footer-desc {
    font-size:     14px;
    line-height:   1.7;
    margin-bottom: 20px;
    color:         rgba(255,255,255,0.45);
}

/* Social icons */
.social-links {
    display:     flex;
    align-items: center;
    gap:         12px;
}

.social-link {
    width:           36px;
    height:          36px;
    border-radius:   50%;
    background:      rgba(255,255,255,0.08);
    color:           rgba(255,255,255,0.6);
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      var(--transition);
}

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

.footer-col-title {
    font-size:     13px;
    font-weight:   700;
    color:         #fff;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 18px;
}

.footer-links {
    list-style: none;
    display:    flex;
    flex-direction: column;
    gap:        10px;
}

.footer-links a {
    color:     rgba(255,255,255,0.5);
    font-size: 14px;
    transition: var(--transition);
}

.footer-links a:hover { color: #fff; }

.footer-contact {
    margin-top: 12px;
}

.footer-contact a {
    color:     rgba(255,255,255,0.5);
    font-size: 13px;
}

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

/* Footer bottom bar */
.footer-bottom {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         20px 0;
    font-size:       13px;
    color:           rgba(255,255,255,0.3);
    gap:             16px;
    flex-wrap:       wrap;
}

.footer-legal {
    display:     flex;
    align-items: center;
    gap:         12px;
}

.footer-legal a {
    color: rgba(255,255,255,0.3);
}

.footer-legal a:hover { color: rgba(255,255,255,0.7); }

/* --------------------------------------------
   Compare Floating Tray
   -------------------------------------------- */
.compare-tray {
    position:      fixed;
    bottom:        0;
    left:          0;
    right:         0;
    background:    var(--bg-dark);
    border-top:    2px solid var(--primary);
    z-index:       150;
    transform:     translateY(100%);
    transition:    transform 0.3s ease;
    box-shadow:    0 -4px 20px rgba(0,0,0,0.2);
}

.compare-tray.visible { transform: translateY(0); }

.tray-inner {
    max-width: var(--container);
    margin:    0 auto;
    padding:   14px 20px;
    display:   flex;
    align-items: center;
    gap:       20px;
    flex-wrap: wrap;
}

.tray-vehicles {
    display:     flex;
    align-items: center;
    gap:         12px;
    flex:        1;
    flex-wrap:   wrap;
}

.tray-vehicle-item {
    display:       flex;
    align-items:   center;
    gap:           8px;
    background:    rgba(255,255,255,0.08);
    border-radius: var(--radius-sm);
    padding:       6px 10px;
    font-size:     13px;
    color:         #fff;
}

.tray-vehicle-remove {
    background:    none;
    border:        none;
    color:         rgba(255,255,255,0.5);
    cursor:        pointer;
    font-size:     14px;
    line-height:   1;
    padding:       2px;
}

.tray-vehicle-remove:hover { color: #ff6b6b; }

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

.tray-count {
    font-size:  13px;
    color:      rgba(255,255,255,0.5);
    white-space: nowrap;
}

.tray-clear {
    background:  none;
    border:      1px solid rgba(255,255,255,0.2);
    color:       rgba(255,255,255,0.5);
    border-radius: var(--radius-sm);
    padding:     8px 14px;
    font-size:   13px;
    font-family: var(--font);
    cursor:      pointer;
    transition:  var(--transition);
}

.tray-clear:hover {
    border-color: #ff6b6b;
    color:        #ff6b6b;
}

/* --------------------------------------------
   Filter Bar (Category Pages)
   -------------------------------------------- */
.filter-section {
    background:    var(--bg-white);
    border:        1px solid var(--border);
    border-radius: var(--radius);
    padding:       16px 20px;
    margin-bottom: 28px;
    display:       flex;
    align-items:   center;
    gap:           12px;
    flex-wrap:     wrap;
}

.filter-section select {
    padding:       9px 14px;
    border:        1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-size:     14px;
    font-family:   var(--font);
    color:         var(--text-dark);
    outline:       none;
    background:    var(--bg-white);
    cursor:        pointer;
    transition:    var(--transition);
}

.filter-section select:focus { border-color: var(--primary); }

.filter-results {
    margin-left: auto;
    font-size:   13px;
    color:       var(--text-muted);
    font-weight: 600;
}

/* --------------------------------------------
   Badges / Tags
   -------------------------------------------- */
.badge {
    display:        inline-flex;
    align-items:    center;
    padding:        4px 10px;
    border-radius:  20px;
    font-size:      11px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-blue   { background: var(--primary-light); color: var(--primary); }
.badge-green  { background: var(--secondary-light); color: var(--secondary); }
.badge-orange { background: rgba(255,107,0,0.12);  color: var(--accent); }

/* --------------------------------------------
   Pagination
   -------------------------------------------- */
.pagination {
    display:         flex;
    justify-content: center;
    align-items:     center;
    gap:             6px;
    padding:         40px 0 0;
}

.page-btn {
    width:         40px;
    height:        40px;
    display:       flex;
    align-items:   center;
    justify-content: center;
    border-radius: var(--radius-sm);
    font-size:     14px;
    font-weight:   600;
    border:        1.5px solid var(--border);
    color:         var(--text-muted);
    transition:    var(--transition);
    text-decoration: none;
}

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

/* --------------------------------------------
   Upcoming EV Cards
   -------------------------------------------- */
.upcoming-card {
    background:    var(--bg-white);
    border:        1px solid var(--border);
    border-radius: var(--radius);
    overflow:      hidden;
    transition:    var(--transition);
    position:      relative;
}

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

.upcoming-ribbon {
    position:       absolute;
    top:            16px;
    right:          -8px;
    background:     var(--accent);
    color:          #fff;
    font-size:      11px;
    font-weight:    700;
    padding:        4px 14px;
    border-radius:  4px 0 0 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --------------------------------------------
   Page Header (inner pages)
   -------------------------------------------- */
.page-header {
    background:  var(--bg-light);
    padding:     40px 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 40px;
}

.page-header h1 {
    font-size:   32px;
    font-weight: 800;
    color:       var(--text-dark);
    margin-bottom: 6px;
}

.page-header p {
    font-size: 15px;
    color:     var(--text-muted);
}

/* --------------------------------------------
   Utilities
   -------------------------------------------- */
.text-center { text-align: center; }
.text-muted  { color: var(--text-muted); }
.text-primary{ color: var(--primary); }
.text-green  { color: var(--secondary); }
.fw-bold     { font-weight: 700; }
.fw-800      { font-weight: 800; }
.mt-8        { margin-top: 8px; }
.mt-16       { margin-top: 16px; }
.mt-24       { margin-top: 24px; }
.mb-24       { margin-bottom: 24px; }
.mb-40       { margin-bottom: 40px; }

/* Two column grid */
.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

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

/* Empty state */
.empty-state {
    text-align:  center;
    padding:     64px 20px;
    color:       var(--text-muted);
}

.empty-state-icon {
    font-size:     56px;
    margin-bottom: 16px;
    opacity:       0.4;
}

.empty-state h3 {
    font-size:     20px;
    font-weight:   700;
    color:         var(--text-dark);
    margin-bottom: 8px;
}

/* --------------------------------------------
   Responsive — Tablet
   -------------------------------------------- */
@media (max-width: 1024px) {
    .hero-title       { font-size: 38px; }
    .category-cards   { grid-template-columns: 1fr 1fr 1fr; }
    .footer-grid      { grid-template-columns: 1fr 1fr; gap: 32px; }
}

/* --------------------------------------------
   Responsive — Mobile
   -------------------------------------------- */
@media (max-width: 768px) {
    /* Show mobile menu button */
    .mobile-menu-btn  { display: flex; }
    /* Hide desktop nav */
    .main-nav         { display: none; }
    /* Hide compare button text on small screens */
    .compare-tray-btn { display: none; }

    .hero             { padding: 56px 0 48px; }
    .hero-title       { font-size: 30px; }
    .hero-sub         { font-size: 15px; }
    .hero-stats       { gap: 24px; }
    .hero-stat-value  { font-size: 22px; }

    .category-cards   { grid-template-columns: 1fr; }
    .vehicles-grid    { grid-template-columns: 1fr 1fr; }

    .emi-inputs       { grid-template-columns: 1fr; }
    .city-selects     { flex-direction: column; }

    .footer-grid      { grid-template-columns: 1fr; gap: 28px; }
    .footer-bottom    { flex-direction: column; text-align: center; }

    .section          { padding: 40px 0; }
    .section-title    { font-size: 22px; }

    .newsletter-inner { flex-direction: column; }

    .grid-2, .grid-3  { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .vehicles-grid    { grid-template-columns: 1fr; }
    .hero-search      { flex-direction: column; }
    .hero-search .btn { width: 100%; justify-content: center; }
}