/* ==========================================================================
   Changan Elements – Vehicle Compare
   ========================================================================== */

.changan-vehicle-compare {
  --cvc-accent: #B4530A;
  --cvc-accent-dark: #8F4108;
  --cvc-ink: #12203A;
  --cvc-text: #1F2937;
  --cvc-border: #E4E7EC;
  --cvc-bg-soft: #F7F8FA;
  --cvc-tint-bg: rgba(180, 83, 10, 0.08);
  --cvc-slot-min-h: 220px;
  --cvc-row-padding: 14px;

  /* Popup button interaction colours (hover / keyboard focus / pressed).
     Kept as tokens so a future Style-tab control, or a child theme, can
     change them in one place instead of hunting down the selector list. */
  --cvc-popup-btn-hover-bg: #FF9632;
  --cvc-popup-btn-hover-text: #fff;

  /* Number of vehicle cards per row inside the "add vehicle" popup on
     desktop. Tablet (≤1024px) and mobile (≤768px) override the grid
     directly further down, so this only affects wide screens. */
  --cvc-popup-cols: 5;

  position: relative;
}

.changan-vehicle-compare *,
.changan-vehicle-compare *::before,
.changan-vehicle-compare *::after {
  box-sizing: border-box;
}

/* Body scroll lock while the "add vehicle" popup is open (added/removed
   by JS on the <body> element — mirrors the Hamburger Nav Drawer's own
   `body.changan-drawer-open` pattern). */
body.changan-vehicle-compare-modal-open {
  overflow: hidden;
}

.changan-vehicle-compare__breadcrumb {
  font-size: 13px;
  color: #6b7280;
  margin-bottom: 18px;
}

.changan-vehicle-compare__title {
  font-size: 34px;
  font-weight: 800;
  color: var(--cvc-ink);
  margin: 0 0 28px;
  letter-spacing: -0.01em;
  text-align: center;
}

/* ── Slots ─────────────────────────────────────────────────────────────── */
.changan-vehicle-compare__slots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.changan-vehicle-compare__slot {
  border: 1px solid var(--cvc-border);
  border-radius: 10px;
  background: #fff;
  min-height: var(--cvc-slot-min-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  position: relative;
}

.changan-vehicle-compare__slot--empty {
  border-style: dashed;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.changan-vehicle-compare__slot--empty:hover {
  border-color: var(--cvc-accent);
  background: var(--cvc-tint-bg);
}

.changan-vehicle-compare__add-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--cvc-accent);
  color: #fff;
  border: none;
  font-size: 22px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  pointer-events: none;
}

.changan-vehicle-compare__add-label {
  font-weight: 700;
  color: var(--cvc-ink);
}

.changan-vehicle-compare__slot img,
.changan-vehicle-compare__slot svg {
  width: 300px;
  max-width: 100%;
  height: auto;
  margin-bottom: 10px;
  object-fit: contain;
}

.changan-vehicle-compare__slot-name {
  font-weight: 700;
  color: var(--cvc-ink);
  font-size: 15px;
  margin-bottom: 4px;
}

.changan-vehicle-compare__slot-price {
  font-size: 13px;
  color: #6b7280;
  margin-bottom: 14px;
}

.changan-vehicle-compare__change-btn {
  border: 1px solid var(--cvc-border);
  background: #fff;
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  color: var(--cvc-ink);
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* Remove ("x") button on a filled slot — a perfect, centered circle.
   Flex-centering (not just line-height) is what keeps the "×" glyph
   visually centered regardless of the browser's default button metrics. */
.changan-vehicle-compare__remove-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 50%;
  border: none;
  background: var(--cvc-bg-soft);
  color: #6b7280;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.changan-vehicle-compare__remove-btn:hover {
  background: #eee;
  color: var(--cvc-text);
}

/* ── Compare section ──────────────────────────────────────────────────── */
.changan-vehicle-compare__compare {
  margin-top: 44px;
}

.changan-vehicle-compare__compare[hidden],
.changan-vehicle-compare__empty-note[hidden] {
  display: none;
}

.changan-vehicle-compare__empty-note {
  margin-top: 36px;
  color: #6b7280;
  font-size: 14px;
}

.changan-vehicle-compare__tabs {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--cvc-border);
  margin-bottom: 20px;
}

.changan-vehicle-compare__tab {
  border: none;
  padding: 10px 14px 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  border-radius: 6px 6px 0 0;
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* ── Table ─────────────────────────────────────────────────────────────── */
.changan-vehicle-compare__table {
  overflow-x: auto;
  border-top: 1px solid var(--cvc-border);
}

.changan-vehicle-compare__row {
  display: grid;
  border-bottom: 1px solid var(--cvc-border);
}

.changan-vehicle-compare__row-label {
  padding: var(--cvc-row-padding) 16px;
  font-weight: 700;
  color: var(--cvc-label-text, var(--cvc-ink));
  font-size: 14px;
  background: var(--cvc-label-bg, var(--cvc-bg-soft));
}

.changan-vehicle-compare__row-values {
  display: contents;
}

.changan-vehicle-compare__row-value {
  padding: var(--cvc-row-padding) 16px;
  font-size: 14px;
  color: var(--cvc-body-text, var(--cvc-text));
  background-color: var(--cvc-body-bg, #ffffff);
  display: flex;
  align-items: center;
  gap: 8px;
}

.changan-vehicle-compare__row-value img {
  max-height: 80px;
  width: auto;
  max-width: 100%;
}

.changan-vehicle-compare__group-toggle {
  display: grid;
  align-items: center;
  padding: var(--cvc-row-padding) 16px;
  font-weight: 700;
  color: var(--cvc-label-text, var(--cvc-ink));
  cursor: pointer;
  border-bottom: 1px solid var(--cvc-border);
  background: var(--cvc-label-bg, #fff);
  font-size: 14px;
}

.changan-vehicle-compare__group-icon {
  margin-right: 8px;
  display: inline-block;
  width: 14px;
}

.changan-vehicle-compare__group-rows {
  display: none;
}

.changan-vehicle-compare__group-rows.is-open {
  display: block;
}

.changan-vehicle-compare__no-results {
  padding: 40px 0;
  text-align: center;
  color: #6b7280;
  font-size: 14px;
}

/* ── Popup / modal ─────────────────────────────────────────────────────── */
/* Deliberately position:fixed and left in-DOM (not moved to <body> like
   some modal implementations) — this is what lets every Style-tab control
   above reach it via Elementor's {{WRAPPER}} selector scoping. z-index sits
   above the Hamburger Nav Drawer (99999) since an open dialog should always
   take priority if a user somehow triggers both at once. */
.changan-vehicle-compare__overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 20, 30, 0.55);
  display: none;
  align-items: flex-start;
  justify-content: center;
  /* --cvc-popup-overlay-padding is only set (to 0) by Popup Width →
     "Full Screen", per device. Otherwise the fallback applies. */
  padding: var(--cvc-popup-overlay-padding, 40px 16px);
  overflow-y: auto;
  z-index: 100000;
}

.changan-vehicle-compare__overlay.is-active {
  display: flex;
}

/* Fixed height (100% of the overlay's padded area) rather than only a
   max-height — so filtering down to one or two results never collapses
   the popup. The body below scrolls inside this fixed frame instead. */
.changan-vehicle-compare__modal {
  background: #fff;
  width: 100%;
  /* Full Screen sets --cvc-popup-max-width: 100%; Custom Width leaves it
     unset so the Width slider (--cvc-modal-width) is used. */
  max-width: var(--cvc-popup-max-width, var(--cvc-modal-width, 920px));
  height: 100%;
  max-height: 100%;
  border-radius: var(--cvc-popup-radius, var(--cvc-modal-radius, 14px));
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Explicitly rounding the header/body's own corners (not just relying on
   the parent's overflow:hidden) avoids a hairline white gap some browsers
   render at the corner when a flex child's own background is a rectangle
   inside a rounded, clipped parent. */
.changan-vehicle-compare__modal-header {
  --_radius: var(--cvc-popup-radius, var(--cvc-modal-radius, 14px));
  border-radius: var(--_radius) var(--_radius) 0 0;
}

.changan-vehicle-compare__modal-body {
  --_radius: var(--cvc-popup-radius, var(--cvc-modal-radius, 14px));
  border-radius: 0 0 var(--_radius) var(--_radius);
}

/* Body fills whatever the header leaves and scrolls on its own.
   min-block-size: 0 is required — a flex child's default min-height is
   its content height, which would stop it shrinking and scrolling. */
.changan-vehicle-compare__modal-body {
  flex: 1 1 auto;
  min-block-size: 0;
  overflow-y: auto;
}

/* Popup Layout → Popup Width (Custom Width / Full Screen) is responsive and
   sets the --cvc-popup-* variables per device from the widget's Elementor
   CSS; the overlay/modal/header/body rules above read them. No extra
   classes needed here. */

/* Popup Layout → Popup Position (no visible effect on a device set to
   "Full Screen", since a full-screen popup has nowhere to be positioned). */
.changan-vehicle-compare-pos-center .changan-vehicle-compare__overlay {
  align-items: center;
  justify-content: center;
}

.changan-vehicle-compare-pos-top .changan-vehicle-compare__overlay {
  align-items: flex-start;
  justify-content: center;
}

.changan-vehicle-compare-pos-bottom .changan-vehicle-compare__overlay {
  align-items: flex-end;
  justify-content: center;
}

.changan-vehicle-compare-pos-left .changan-vehicle-compare__overlay {
  align-items: center;
  justify-content: flex-start;
}

.changan-vehicle-compare-pos-right .changan-vehicle-compare__overlay {
  align-items: center;
  justify-content: flex-end;
}

.changan-vehicle-compare__modal-header {
  background: var(--cvc-ink);
  color: #fff;
  padding: 22px 28px;
  position: relative;
}

.changan-vehicle-compare__modal-header h2 {
  margin: 0 0 4px;
  font-size: 22px;
  color: #fff;
}

.changan-vehicle-compare__modal-header p {
  margin: 0;
  color: #c7cedb;
  font-size: 14px;
}

.changan-vehicle-compare__modal-close {
  position: absolute;
  top: 18px;
  right: 20px;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: none;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.changan-vehicle-compare__modal-close:hover {
  background: rgba(255, 255, 255, 0.22);
}

/* Used instead of the header's close button when "Show Header" is off —
   the header's dark background made a light-on-dark button work; sitting
   directly on the modal's white body needs the opposite treatment (a
   light, bordered button with its own shadow) so it stays visible over
   whatever content ends up underneath it. */
.changan-vehicle-compare__modal-close--floating {
  top: 16px;
  right: 16px;
  width: 34px;
  height: 34px;
  background: #ffffff;
  color: var(--cvc-ink);
  border: 1px solid var(--cvc-border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  font-size: 18px;
  z-index: 2;
}

.changan-vehicle-compare__modal-close--floating:hover {
  background: var(--cvc-bg-soft);
}

.changan-vehicle-compare__modal-body {
  padding: 24px 28px 28px;
  position: relative;
}

/* Room for the floating close button when there's no header for it to
   sit in — without this it would overlap the search bar/filters. */
.changan-vehicle-compare__modal--no-header .changan-vehicle-compare__modal-body {
  padding-top: 56px;
}

/* Search input + icon rendered as two independent elements (input, then a
   fixed-width icon span) instead of overlapping absolutely-positioned
   text — this is what stops the icon crowding into the placeholder text
   at some viewport widths/zoom levels. */
.changan-vehicle-compare__modal-search {
  position: relative;
  margin-bottom: 20px;
}

.changan-vehicle-compare__modal-search-input {
  width: 100%;
  padding: 10px 16px 10px 40px;
  border: 1px solid var(--cvc-border);
  border-radius: 999px;
  font-size: 14px;
  outline: none;
}

.changan-vehicle-compare__modal-search-input:focus {
  border-color: var(--cvc-accent);
}

.changan-vehicle-compare__search-icon {
  position: absolute;
  left: 14px;
  top: 0;
  bottom: 0;
  width: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  font-size: 14px;
  pointer-events: none;
}

.changan-vehicle-compare__search-icon i,
.changan-vehicle-compare__search-icon svg {
  display: block;
  width: 14px;
  height: 14px;
  font-size: 14px;
}

.changan-vehicle-compare__filters {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

/* Set once per field in Vehicles → Field Manager ("Filter Width"), so a
   "Third" filter sits 3-to-a-row, a "Half" filter 2-to-a-row, and so on —
   a standard 12-column span, same idea as most page-builder grids. */
.changan-vehicle-compare__filter-group--full {
  grid-column: span 12;
}

.changan-vehicle-compare__filter-group--half {
  grid-column: span 6;
}

.changan-vehicle-compare__filter-group--third {
  grid-column: span 4;
}

.changan-vehicle-compare__filter-group--quarter {
  grid-column: span 3;
}

.changan-vehicle-compare__filter-group h4 {
  margin: 0 0 10px;
  font-size: 20px;
  color: var(--cvc-ink);
  font-weight: 700;
}

.changan-vehicle-compare__chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.changan-vehicle-compare__chip {
  border: 1px solid var(--cvc-border);
  background: #fff;
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  cursor: pointer;
  color: var(--cvc-text);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.changan-vehicle-compare__chip-icon {
  font-size: 12px;
}

.changan-vehicle-compare__results-meta {
  font-size: 13px;
  color: #6b7280;
  margin-bottom: 12px;
}

/* Desktop: 5 cards per row (driven by --cvc-popup-cols). minmax(0, 1fr)
   instead of plain 1fr lets each column shrink below its content's
   intrinsic width, so a long vehicle name or a wide image can never push
   the grid wider than the popup. Tablet/mobile override this below. */
.changan-vehicle-compare__vehicle-grid {
  display: grid;
  grid-template-columns: repeat(var(--cvc-popup-cols, 5), minmax(0, 1fr));
  gap: 14px;
}

.changan-vehicle-compare__vcard {
  border: 1px solid var(--cvc-border);
  border-radius: 10px;
  padding: 16px 12px;
  text-align: center;
  cursor: pointer;
  background: #fff;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.changan-vehicle-compare__vcard:hover {
  border-color: var(--cvc-accent);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.changan-vehicle-compare__vcard img,
.changan-vehicle-compare__vcard svg {
  width: 100%;
  max-width: 200px;
  height: auto;
  margin-bottom: 8px;
  object-fit: contain;
}

.changan-vehicle-compare__vcard-name {
  font-weight: 700;
  font-size: 13px;
  color: var(--cvc-ink);
  margin-bottom: 2px;
}

.changan-vehicle-compare__vcard-price {
  font-size: 12px;
  color: #6b7280;
}

.changan-vehicle-compare__load-more {
  display: block;
  margin: 20px auto 0;
  border: 1px solid var(--cvc-border);
  background: #fff;
  border-radius: 999px;
  padding: 10px 22px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  color: var(--cvc-ink);
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.changan-vehicle-compare__load-more[hidden] {
  display: none;
}

/* Hover / focus / pressed treatment for every button in this widget
   (slots, tabs, popup close, filter chips, load more). This overrides the
   theme's global `[type=button]:focus, button:hover …` rule (the pink
   #c36 from Hello Elementor's reset) — :focus is included on purpose,
   otherwise a clicked chip falls back to the theme's :focus colour.

   Scoped to .changan-vehicle-compare so it never leaks onto buttons
   elsewhere on the site. :is() keeps it to one readable rule; its
   specificity (0,3,0) beats the theme's (0,2,0) without !important, and
   the Style-tab controls ({{WRAPPER}} … .is-active etc.) still win
   because Elementor prints them later with equal specificity. */
.changan-vehicle-compare :is(button, [type="button"], [type="submit"]):is(:hover, :focus, :active) {
  background-color: var(--cvc-popup-btn-hover-bg);
  color: var(--cvc-popup-btn-hover-text);
  text-decoration: none;
}

/* ── Desktop: filter chips locked to 4 per row ───────────────────────────── */
/* Explicitly desktop-only (min-width: 1025px, just above the tablet
   breakpoint below) — a fixed 4-column grid guarantees up to 4 chips
   always sit on one line and a 5th reliably wraps to a new one,
   regardless of each chip's own label length (flex-wrap alone wraps
   wherever the available width happens to run out instead). That
   guarantee only holds where there's reliably enough width for it, which
   is why tablet/mobile keep the original flexible wrapping further down
   instead of risking overflow on a narrow popup. */
@media (min-width: 1025px) {
  .changan-vehicle-compare__chip-row {
    display: grid;
    grid-template-columns: repeat(4, max-content);
    gap: 6px 8px;
  }

  .changan-vehicle-compare__chip {
    padding: 6px 10px;
    font-size: 12px;
  }
}

/* ── Responsive ────────────────────────────────────────────────────────── */
/* Tablet first (≤1024px), then mobile (≤768px) — ordered widest-to-narrowest
   so the mobile block's overrides correctly win on phones, since a phone
   viewport matches both media queries at once. */
@media (max-width: 1024px) {
  .changan-vehicle-compare__title {
    font-size: 28px;
  }

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

  .changan-vehicle-compare__filter-group h4 {
    font-size: 18px;
  }

  /* A "Third"/"Quarter" filter is too narrow to read comfortably on a
     tablet-width popup — bump both up to half-width (2 per row) here. */
  .changan-vehicle-compare__filter-group--third,
  .changan-vehicle-compare__filter-group--quarter {
    grid-column: span 6;
  }

  .changan-vehicle-compare__vehicle-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Compare table: the field name becomes its own full-width row, with
     the vehicles' values in a row of columns underneath — a card-style
     layout instead of squeezing a 3-column table into a narrower width.
     Row/group-toggle widths are set inline by JS per render, so
     !important is needed to win over that. */
  .changan-vehicle-compare__row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    row-gap: 6px;
    padding: var(--cvc-row-padding) 0;
    border-bottom: none;
    background: var(--cvc-row-bg, transparent);
  }

  .changan-vehicle-compare__group-toggle {
    grid-template-columns: 1fr !important;
  }

  .changan-vehicle-compare__row-label {
    padding: 0 16px;
    background: transparent;
  }

  .changan-vehicle-compare__row-values {
    display: grid !important;
    grid-template-columns: repeat(var(--cvc-cols), 1fr);
    gap: 8px;
    padding: 0 16px;
  }

  .changan-vehicle-compare__row-value {
    padding: 0;
    background: transparent;
  }

  /* Zebra-stripe each field block (label + its values together) instead
     of the desktop's separately-colored label column, so it reads as one
     clear unit per field, matching a typical tablet/mobile card layout. */
  .changan-vehicle-compare__row:nth-child(even),
  .changan-vehicle-compare__group-rows .changan-vehicle-compare__row:nth-child(even) {
    --cvc-row-bg: var(--cvc-bg-soft);
  }

  .changan-vehicle-compare__row:nth-child(odd),
  .changan-vehicle-compare__group-rows .changan-vehicle-compare__row:nth-child(odd) {
    --cvc-row-bg: #ffffff;
  }

  .changan-vehicle-compare__table {
    border-top: none;
  }
}

@media (max-width: 768px) {
  .changan-vehicle-compare__title {
    font-size: 24px;
  }

  .changan-vehicle-compare__slots {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .changan-vehicle-compare__slot {
    padding: 14px 10px;
  }

  .changan-vehicle-compare__slot img,
  .changan-vehicle-compare__slot svg {
    width: 220px;
  }

  .changan-vehicle-compare__tabs {
    gap: 16px;
  }

  .changan-vehicle-compare__tab {
    padding: 8px 4px 10px;
    font-size: 14px;
  }

  .changan-vehicle-compare__overlay {
    padding: var(--cvc-popup-overlay-padding, 16px);
  }

  .changan-vehicle-compare__modal-header {
    padding: 18px 20px;
  }

  .changan-vehicle-compare__modal-body {
    padding: 18px 20px 22px;
  }

  .changan-vehicle-compare__filters {
    grid-template-columns: 1fr;
  }

  .changan-vehicle-compare__filter-group--full,
  .changan-vehicle-compare__filter-group--half,
  .changan-vehicle-compare__filter-group--third,
  .changan-vehicle-compare__filter-group--quarter {
    grid-column: span 1;
  }

  .changan-vehicle-compare__filter-group h4 {
    font-size: 16px;
  }

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

  /* Slightly tighter than the tablet card layout above (same structure,
     less breathing room) — comfortable now that mobile never shows more
     than 2 vehicles at once. */
  .changan-vehicle-compare__row {
    row-gap: 4px;
  }

  .changan-vehicle-compare__row-values {
    gap: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .changan-vehicle-compare__vcard,
  .changan-vehicle-compare__tab,
  .changan-vehicle-compare__chip,
  .changan-vehicle-compare__change-btn,
  .changan-vehicle-compare__load-more {
    transition: none !important;
  }
}