/* =============================================
   EXACT SAME CSS — NO DESIGN CHANGE
   ============================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --black: #000000; --white: #ffffff; --off-white: #fafafa;
  --light-gray: #f5f5f5; --mid-gray: #e8e8e8; --text-gray: #6b6b6b;
  --border: #e0e0e0; --radius-sm: 8px; --radius-md: 16px; --radius-lg: 24px;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-md: 0 8px 32px rgba(0,0,0,0.10);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.12);
  --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

html { scroll-behavior: smooth; }


.loader-overlay {
  position: fixed; inset: 0; background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px); display: flex; align-items: center;
  justify-content: center; z-index: 9999; opacity: 0;
  pointer-events: none; transition: opacity 0.3s ease;
}
.loader-overlay.active { opacity: 1; pointer-events: all; }
.loader-box { text-align: center; }
.loader-spinner {
  width: 48px; height: 48px; border: 3px solid var(--mid-gray);
  border-top-color: var(--black); border-radius: 50%;
  animation: spin 0.8s linear infinite; margin: 0 auto 16px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loader-box p { font-size: 14px; color: var(--text-gray); font-weight: 500; letter-spacing: 0.5px; }

.hero { text-align: center; padding: 60px 0 48px; position: relative; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--black); color: var(--white);
  font-size: 12px; font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; padding: 8px 18px;
  border-radius: 100px; margin-bottom: 28px;
}
.badge-dot { width: 6px; height: 6px; background: var(--white); border-radius: 50%; animation: pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.5;transform:scale(.8);} }
.hero h1 {
    font-size: clamp(2rem,5vw,3.5rem);
    letter-spacing: -1.5px;
    line-height: 1.1;
    margin-bottom: 16px;
    margin-top: 0;
    text-transform: capitalize;
}
.underline-text { position: relative; display: inline-block; }
.underline-text::after {
  content:''; position:absolute; bottom:4px; left:0;
  width:100%; height:4px; background:var(--black); border-radius:2px; transform:skewX(-5deg);
}
.hero-sub { font-size: 16px; color: var(--text-gray); max-width: 480px; margin: 0 auto 40px; line-height: 1.7; }

.selector-row { display:flex; align-items:center; justify-content:center; gap:20px; flex-wrap:wrap; margin-bottom:40px; }
.selector-card {
  background:var(--white); border:2px solid var(--border); border-radius:var(--radius-lg);
  padding:24px; width:300px; transition:var(--transition); position:relative;
}
.selector-card:hover, .selector-card.active {
  border-color:var(--black); transform:translateY(-2px);
}
.selector-label { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.label-num {
  width:28px; height:28px; background:var(--black); color:var(--white);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700;
}
.selector-label span:last-child { font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:1px; color:var(--text-gray); }
.selector-hint { font-size:11px; color:var(--text-gray); margin-top:10px; text-align:center; }
.vs-badge {
  width:52px; height:52px; background:var(--black); color:var(--white);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:800; letter-spacing:1px; flex-shrink:0;
}

.stats-row { display:flex; align-items:center; justify-content:center; gap:32px; flex-wrap:wrap; }
.stat { display:flex; flex-direction:column; align-items:center; gap:4px; }
.stat strong {
    font-size: 22px;
    letter-spacing: -0.5px;
    font-weight: 500;
}
.stat span { font-size:11px; color:var(--text-gray); text-transform:uppercase; letter-spacing:1px; font-weight:500; }
.stat-divider { width:1px; height:40px; background:var(--border); }

.empty-state {
  text-align:center; padding:80px 40px; border:2px dashed var(--border);
  border-radius:var(--radius-lg); margin-top:8px; background:var(--off-white);
  animation:fadeIn .4s ease;
}
.empty-icon { width:80px; height:80px; margin:0 auto 24px; opacity:.7; }
.empty-icon svg { width:100%; height:100%; }
.empty-state h2 { font-size:24px; font-weight:700; margin-bottom:12px; letter-spacing:-0.5px; }
.empty-state > p { color:var(--text-gray); font-size:15px; max-width:380px; margin:0 auto 36px; }
.empty-steps { display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; }
.step {
  display:flex; align-items:center; gap:10px; background:var(--white);
  border:1px solid var(--border); border-radius:100px; padding:10px 18px;
  font-size:13px; font-weight:500;
}
.step-num {
  width:22px; height:22px; background:var(--black); color:var(--white);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700;
}
.step-arrow { color:var(--text-gray); font-size:18px; }

.compare { margin-top:8px; animation:fadeIn .5s ease; }
@keyframes fadeIn { from{opacity:0;transform:translateY(16px);} to{opacity:1;transform:translateY(0);} }
.hidden { display:none !important; }

.ww-banner {
  display:flex; align-items:center; justify-content:space-between;
  background:var(--black); color:var(--white); border-radius:var(--radius-md);
  padding:20px 28px; margin-bottom:24px; gap:16px; flex-wrap:wrap;
}
.ww-branding { display:flex; align-items:center; gap:16px; }
.ww-branding strong { display:block; font-size:16px; font-weight:800; letter-spacing:.5px; line-height:1.1; }
.ww-branding span { font-size:13px; font-weight:500; opacity:.7; }
.ww-tag {
  background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.2);
  padding:6px 14px; border-radius:100px; font-size:11px; font-weight:600;
  letter-spacing:1px; text-transform:uppercase; white-space:nowrap;
}

.car-header-grid { display:grid; grid-template-columns:180px 1fr 1fr; gap:16px; margin-bottom:16px; align-items:start; }
.car-card {
  background:var(--white); border:2px solid var(--border); border-radius:var(--radius-lg);
  overflow:hidden; position:relative; transition:var(--transition);
}
.car-card:hover { border-color:var(--black); box-shadow:var(--shadow-lg); transform:translateY(-4px); }
.car-card-badge {
  position:absolute; top:16px; right:16px; font-size:10px; font-weight:700;
  letter-spacing:1px; text-transform:uppercase; padding:4px 10px; border-radius:100px; display: none;
}
.badge-winner { background:var(--black); color:var(--white); }
.badge-loser  { background:var(--light-gray); color:var(--text-gray); border:1px solid var(--border); }
.car-img-wrap { background:var(--off-white); padding:24px; border-bottom:1px solid var(--border); }
.car-img-wrap img { width:100%; height:160px; object-fit:contain; transition:transform .4s ease; }
.car-card:hover .car-img-wrap img { transform:scale(1.05); }
.car-card-info { padding:20px 24px 24px; }
.car-card-info h2 {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.3px;
    margin-bottom: 14px;
    line-height: 1.3;
    text-transform: capitalize;
}
.car-meta { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:18px; }
.price-tag { font-size:15px; font-weight:800; letter-spacing:-0.3px; }
.stock-tag { font-size:11px; font-weight:600; letter-spacing:.5px; padding:4px 10px; border-radius:100px; }
.in-stock  { background:var(--black); color:var(--white); }
.out-stock { background:var(--light-gray); color:var(--text-gray); border:1px solid var(--border); }
.view-btn {
  width:100%; padding:11px; background:var(--white); color:var(--black);
  border:2px solid var(--black); border-radius:var(--radius-sm);
  font-size:13px; font-weight:700; cursor:pointer; transition:var(--transition); letter-spacing:.3px;
}
.view-btn:hover { background:var(--black); color:var(--white); }

.spec-table { border:2px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; margin-bottom:24px; }
.spec-section-header { display:grid; grid-template-columns:180px 1fr 1fr; background:var(--black); color:var(--white); }
.spec-section-header > div { padding:14px 20px; font-size:12px; font-weight:700; text-transform:capitalize; letter-spacing:1.5px; }
.spec-section-title {
  grid-column:1/-1; background:var(--light-gray); color:var(--black);
  padding:12px 20px; font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:2px; border-top:1px solid var(--border);
  display:flex; align-items:center; gap:10px;
}
.spec-section-title::before { content:''; display:block; width:3px; height:14px; background:var(--black); border-radius:2px; }
.spec-row { display:grid; grid-template-columns:180px 1fr 1fr; border-top:1px solid var(--border); transition:background .2s ease; }
.spec-row:hover { background:var(--off-white); }
.spec-row > div { padding:14px 20px; font-size:14px; display:flex; align-items:center; border-right:1px solid var(--border); }
.spec-row > div:last-child { border-right:none; }
.spec-key { color:var(--text-gray); font-weight:500; font-size:13px; }
.spec-val { font-weight:600; position:relative; }
.spec-val.winner { font-weight:800; }
.spec-val.winner::after {
  content:'✓'; position:absolute; right:12px; top:50%;
  transform:translateY(-50%); font-size:12px; color:var(--black); opacity:.4;
}

.action-row { display:flex; justify-content:center; padding:8px 0 16px; }
.reset-btn {
  padding:14px 32px; background:var(--white); color:var(--black);
  border:2px solid var(--black); border-radius:var(--radius-sm);
  font-size:14px; font-weight:700; cursor:pointer; transition:var(--transition); letter-spacing:.3px;
}
.reset-btn:hover { background:var(--black); color:var(--white); transform:translateY(-1px); box-shadow:var(--shadow-md); }

.tooltip {
  position:fixed; background:var(--black); color:var(--white);
  padding:8px 14px; border-radius:var(--radius-sm); font-size:12px;
  font-weight:500; pointer-events:none; z-index:999;
  white-space:nowrap; box-shadow:var(--shadow-md); transition:opacity .2s ease;
}
.tooltip.hidden { opacity:0; }
.page-id-39190 .select2-container .select2-dropdown, .page-id-39190 .select2-container .select2-selection {
    background-color: #ffffff !important;
    color: #000;
}
.select2-container { width:100% !important; }
.select2-selection--single {
  height:48px !important; border:2px solid var(--border) !important;
  border-radius:var(--radius-sm) !important; display:flex !important;
  align-items:center !important; background:var(--white) !important;
  transition:border-color .2s ease !important;
}
.select2-selection--single:hover { border-color:var(--black) !important; }
.select2-container--open .select2-selection--single { border-color:var(--black) !important; }
.select2-selection__rendered {
  line-height:44px !important; padding-left:14px !important;
  font-size:14px !important; font-weight:500 !important; color:var(--black) !important;
}
.select2-selection__placeholder { color:var(--text-gray) !important; font-weight:400 !important; }
.select2-selection__arrow { height:48px !important; right:12px !important; }
.select2-selection__arrow b { border-color:var(--black) transparent transparent transparent !important; }
.select2-container--open .select2-selection__arrow b { border-color:transparent transparent var(--black) transparent !important; }
.select2-selection__clear { color:var(--text-gray) !important; margin-right:24px !important; font-size:18px !important; line-height:48px !important; }
.select2-dropdown {
  border:2px solid var(--black) !important; border-radius:var(--radius-md) !important;
  overflow:hidden; box-shadow:var(--shadow-lg) !important; background:var(--white) !important;
}
.select2-search__field {
    border: 1px solid #000000 !important;
    border-radius: var(--radius-sm) !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    outline: none !important;
    width: calc(100% - 8px) !important;
    margin: 4px !important;
    background-color: #fff !important;
    color: #000 !important;
}
.select2-search__field:focus { border-color:var(--black) !important; }
.select2-results__option {
    padding: 12px 16px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border-bottom: 1px solid #000000;
    transition: background .15s ease;
}
.select2-results__option:last-child { border-bottom:none; }
.select2-results__option--highlighted { background:var(--black) !important; color:var(--white) !important; }
.select2-results__option[aria-selected="true"] {
    background: #ffffff !important;
    color: var(--black) !important;
    font-weight: 700 !important;
}
@media (max-width:900px) {
  .car-header-grid { grid-template-columns:1fr 1fr; }
  .car-header-spacer { display:none; }
  .spec-section-header, .spec-row { grid-template-columns:130px 1fr 1fr; }
}
@media (max-width:640px) {
  .wrap { padding:24px 16px 60px; }
  .hero { padding:40px 0 32px; }
  .car-header-grid { grid-template-columns:1fr; }
  .spec-section-header, .spec-row { grid-template-columns:110px 1fr 1fr; }
  .spec-row > div, .spec-section-header > div { padding:12px; font-size:12px; }
  .selector-row { flex-direction:column; align-items:stretch; }
  .selector-card { width:100%; }
  .vs-badge { align-self:center; }
  .ww-banner { flex-direction:column; align-items:flex-start; }
  .stats-row { gap:20px; }
  .stat-divider { height:24px; }
}
@media (max-width:400px) {
  .spec-section-header { display:none; }
  .spec-row { grid-template-columns:100px 1fr 1fr; }
}