/* ScoutMyVehicle - Exact Match Style */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --font-main: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --red-btn: #c0262b;
  --red-btn-hover: #a81c20;
}

body {
  font-family: var(--font-main);
  background-color: #ffffff;
  color: #0f172a;
  -webkit-font-smoothing: antialiased;
}

[x-cloak] {
  display: none !important;
}

/* Card Style */
.stock-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 1rem;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.stock-card:hover {
  border-color: #cbd5e1;
}

/* Badges */
.badge-in-stock {
  background-color: #f0fdf4;
  color: #166534;
  border: 1px solid #bbf7d0;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.125rem 0.625rem;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
}

.badge-arriving-soon {
  background-color: #fffbeb;
  color: #92400e;
  border: 1px solid #fde68a;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.125rem 0.625rem;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
}

.badge-sold-out {
  background-color: #f8fafc;
  color: #64748b;
  border: 1px solid #e2e8f0;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.125rem 0.625rem;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
}

/* Red Button */
.btn-whatsapp-red {
  background-color: var(--red-btn);
  color: #ffffff;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.5rem 0.75rem;
  border-radius: 0.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  transition: background-color 0.15s ease;
}

.btn-whatsapp-red:hover {
  background-color: var(--red-btn-hover);
}

/* Outline Call Button */
.btn-call-outline {
  background-color: #ffffff;
  color: #1e293b;
  border: 1px solid #e2e8f0;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.5rem 0.75rem;
  border-radius: 0.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.btn-call-outline:hover {
  background-color: #f8fafc;
  border-color: #cbd5e1;
}

/* Inputs & Selects */
.filter-input {
  width: 100%;
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: #0f172a;
  transition: border-color 0.15s ease;
}

.filter-input:focus {
  outline: none;
  border-color: #94a3b8;
}

/* Blurred Dealership Name in Car Elements */
.blurred-dealer {
  filter: blur(5px);
  -webkit-filter: blur(5px);
  user-select: none;
  -webkit-user-select: none;
  display: inline-block;
  letter-spacing: 0.04em;
  opacity: 0.8;
  cursor: default;
}

/* Floating Translucent WhatsApp Button with Blur Effect */
.whatsapp-floating-glass {
  background-color: rgba(37, 211, 102, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 10px 25px -5px rgba(16, 185, 129, 0.25), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.whatsapp-floating-glass:hover {
  background-color: rgba(37, 211, 102, 0.88);
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow: 0 20px 30px -10px rgba(16, 185, 129, 0.35), 0 10px 15px -3px rgba(0, 0, 0, 0.12);
}

/* Hide scrollbars on horizontal scrollable brand rails */
.scrollbar-hide {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;     /* Firefox */
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;             /* Chrome, Safari, Opera */
}

/* ==========================================================================
   CHARCOAL GREY DARK THEME (SCOUTMYVEHICLE)
   Rich matte neutral charcoal grey palette covering every element across the app.
   ========================================================================== */

html.dark {
  color-scheme: dark;
}

html.dark body {
  background-color: #18181b !important; /* Pure Charcoal Canvas */
  color: #e4e4e7 !important;
}

/* Header & Navigation */
html.dark header {
  background-color: #222225 !important; /* Elevated Charcoal */
  border-color: #323338 !important;
}

/* Footer & Sub-footer */
html.dark footer {
  background-color: #141416 !important; /* Deep Base Charcoal */
  border-color: #28292e !important;
  color: #a1a1aa !important;
}

html.dark footer .border-t {
  border-color: #28292e !important;
}

html.dark footer a,
html.dark footer button {
  color: #a1a1aa !important;
}

html.dark footer a:hover,
html.dark footer button:hover {
  color: #ffffff !important;
}

html.dark footer .grayscale {
  filter: brightness(0) invert(0.7) !important;
}

html.dark footer .grayscale:hover {
  filter: brightness(0) invert(1) !important;
}

/* Surface Containers & Cards Across the Whole App */
html.dark .bg-white {
  background-color: #222225 !important;
}

html.dark .bg-slate-50,
html.dark .bg-slate-50\/80,
html.dark .bg-slate-50\/90,
html.dark .bg-slate-50\/50,
html.dark .bg-slate-50\/60,
html.dark .bg-slate-50\/70 {
  background-color: #28292e !important; /* Inset Secondary Charcoal Box */
}

html.dark .bg-slate-100 {
  background-color: #2e2f35 !important;
}

html.dark .bg-slate-200,
html.dark .bg-slate-200\/60 {
  background-color: #383a42 !important;
}

/* All Borders Across the App */
html.dark .border-slate-100,
html.dark .border-slate-200,
html.dark .border-slate-200\/80,
html.dark .border-slate-200\/70,
html.dark .border-slate-200\/60,
html.dark .border-slate-300,
html.dark .border-gray-100,
html.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]),
html.dark .divide-slate-200 > :not([hidden]) ~ :not([hidden]) {
  border-color: #383a40 !important; /* Crisp Charcoal Border */
}

/* Typography Hierarchy in Dark Mode */
html.dark .text-slate-950,
html.dark .text-slate-900,
html.dark .text-slate-800 {
  color: #f4f4f6 !important; /* Crisp High-Contrast White */
}

html.dark .text-slate-700 {
  color: #e4e4e7 !important; /* Primary Readable Text */
}

html.dark .text-slate-600 {
  color: #d4d4d8 !important; /* Secondary Body Text */
}

html.dark .text-slate-500 {
  color: #a1a1aa !important; /* Muted Captions & Subtitles */
}

html.dark .text-slate-400 {
  color: #82838c !important; /* Subtle Timestamps & Notes */
}

html.dark .text-slate-300 {
  color: #585962 !important; /* Subtle Dividers */
}

/* Interactive Hover States */
html.dark .hover\:bg-slate-50:hover,
html.dark .hover\:bg-slate-100:hover {
  background-color: #2e3036 !important;
}

html.dark .hover\:bg-slate-200\/60:hover {
  background-color: #363840 !important;
}

html.dark .hover\:text-slate-900:hover,
html.dark .hover\:text-slate-950:hover,
html.dark .hover\:text-slate-800:hover {
  color: #ffffff !important;
}

html.dark .hover\:border-slate-400:hover {
  border-color: #636570 !important;
}

/* Car Inventory Stock Cards */
html.dark .stock-card {
  background: #222225 !important;
  border-color: #323338 !important;
  color: #f4f4f6 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

html.dark .stock-card:hover {
  border-color: #4a4c55 !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35) !important;
}

/* Form Inputs, Select Dropdowns, and Textareas */
html.dark .filter-input,
html.dark select,
html.dark input[type="text"],
html.dark input[type="tel"],
html.dark input[type="email"],
html.dark textarea {
  background-color: #1c1c1f !important;
  border: 1px solid #383a40 !important;
  color: #f4f4f6 !important;
  border-radius: 0.75rem;
}

html.dark .filter-input:focus,
html.dark select:focus,
html.dark input[type="text"]:focus,
html.dark input[type="tel"]:focus,
html.dark input[type="email"]:focus,
html.dark textarea:focus {
  border-color: #c0262b !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(192, 38, 43, 0.25) !important;
}

html.dark select option {
  background-color: #222225 !important;
  color: #f4f4f6 !important;
}

/* Call Button Outlines */
html.dark .btn-call-outline {
  background-color: #222225 !important;
  color: #e4e4e7 !important;
  border-color: #383a40 !important;
}

html.dark .btn-call-outline:hover {
  background-color: #2c2d33 !important;
  border-color: #4f515a !important;
  color: #ffffff !important;
}

/* Status Badges */
html.dark .badge-in-stock {
  background-color: rgba(16, 185, 129, 0.15) !important;
  color: #34d399 !important;
  border-color: rgba(52, 211, 153, 0.25) !important;
}

html.dark .badge-arriving-soon {
  background-color: rgba(245, 158, 11, 0.15) !important;
  color: #fbbf24 !important;
  border-color: rgba(251, 191, 36, 0.25) !important;
}

html.dark .badge-sold-out {
  background-color: #28292e !important;
  color: #9ca3af !important;
  border-color: #383a40 !important;
}

/* Soft Color Callouts & Highlight Boxes in Dark Mode */
html.dark .bg-red-50,
html.dark .bg-red-50\/50,
html.dark .bg-red-50\/60,
html.dark .bg-red-50\/70 {
  background-color: #2a1b1d !important;
  border-color: #4a2428 !important;
}

html.dark .bg-amber-50 {
  background-color: #292419 !important;
  border-color: #4d3d22 !important;
}

html.dark .text-amber-900,
html.dark .text-amber-800,
html.dark .text-amber-700 {
  color: #fcd34d !important;
}

html.dark .bg-emerald-50 {
  background-color: #17261e !important;
  border-color: #214431 !important;
}

html.dark .text-emerald-900,
html.dark .text-emerald-800,
html.dark .text-emerald-700 {
  color: #6ee7b7 !important;
}

html.dark .bg-blue-50 {
  background-color: #172230 !important;
  border-color: #223c58 !important;
}

html.dark .text-blue-700,
html.dark .text-blue-800,
html.dark .text-blue-900 {
  color: #93c5fd !important;
}

/* Modals & Backdrop Containers */
html.dark [x-show="inquiryModalOpen"] > div,
html.dark [x-show="reviewModalOpen"] > div,
html.dark [x-show="showHowItWorks"] > div,
html.dark [x-show="showFinanceModal"] > div {
  background-color: #222225 !important;
  border: 1px solid #383a40 !important;
  color: #f4f4f6 !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7) !important;
}

/* Bank Finance Cards Gradient Reset */
html.dark .from-white.to-slate-50\/50 {
  background-image: none !important;
  background-color: #222225 !important;
}

/* Trust Strip in Charcoal */
html.dark .mt-8.bg-slate-950 {
  background-color: #1c1c1f !important;
  border: 1px solid #2f3036 !important;
}

/* ==========================================================================
   BRAND QUICK TAGS STRIP & LOGO CONTRAST (LIGHT & DARK MODES)
   ========================================================================== */

/* Brand Strip Pill Base */
.brand-strip-pill {
  transition: all 0.15s ease;
}

/* 1. Unified Selection Color Across All Brand Strip Elements (Light & Dark) */
.brand-strip-pill.brand-pill-active,
.brand-strip-pill.bg-\[\#c0262b\] {
  background-color: #c0262b !important;
  border-color: #c0262b !important;
  color: #ffffff !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1) !important;
}

html.dark .brand-strip-pill.brand-pill-active,
html.dark .brand-strip-pill.bg-\[\#c0262b\] {
  background-color: #c0262b !important;
  border-color: #c0262b !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(192, 38, 43, 0.4) !important;
}

/* 2. Inactive Brand Pills in Light Mode */
html:not(.dark) .brand-strip-pill.brand-pill-inactive,
html:not(.dark) .brand-strip-pill:not(.brand-pill-active) {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #334155 !important;
}

html:not(.dark) .brand-strip-pill.brand-pill-inactive:hover,
html:not(.dark) .brand-strip-pill:not(.brand-pill-active):hover {
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}

/* 3. Inactive Brand Pills in Charcoal Dark Mode */
html.dark .brand-strip-pill.brand-pill-inactive,
html.dark .brand-strip-pill:not(.brand-pill-active) {
  background-color: #242529 !important;
  border-color: #383a40 !important;
  color: #e4e4e7 !important;
}

html.dark .brand-strip-pill.brand-pill-inactive:hover,
html.dark .brand-strip-pill:not(.brand-pill-active):hover {
  background-color: #2e3036 !important;
  border-color: #52525b !important;
  color: #ffffff !important;
}

/* 4. Brand Logos on Active Pills: 100% Crisp White in both Light and Dark mode */
.brand-strip-pill.brand-pill-active img,
.brand-strip-pill.bg-\[\#c0262b\] img {
  filter: brightness(0) invert(1) !important;
}

/* 5. Brand Logos on Inactive Pills in Dark Mode: Crisp White on Charcoal */
html.dark .brand-strip-pill:not(.brand-pill-active) img {
  filter: brightness(0) invert(1) !important;
}

/* 6. Brand Logos on Inactive Pills in Light Mode: Authentic Brand Vector Colors */
html:not(.dark) .brand-strip-pill:not(.brand-pill-active) img {
  filter: none !important;
}

/* 7. General Logo Contrast on Dark Charcoal Canvas (Rail Headers, Cards, etc.) */
html.dark img[src*="tata_emblem.svg"],
html.dark img[src*="mahindra.svg"],
html.dark img[src*="hyundai_emblem.svg"],
html.dark img[src*="kia.svg"],
html.dark img[src*="volkswagen.svg"],
html.dark img[src*="skoda.svg"],
html.dark img[src*="nexa.svg"] {
  filter: brightness(0) invert(1) !important;
}

/* Sliders in EMI Calculator */
html.dark input[type="range"] {
  background-color: #2f3036 !important;
}