/* =============================================================================
   CarsDirect.bg — Car Detail Page Redesign Stylesheet
   -----------------------------------------------------------------------------
   SCOPE: every rule below is namespaced under .cd-redesign. The global header,
   footer, sidebar popup and any shared classes (e.g. .car-item, .owl-carousel)
   used elsewhere on the site are NOT touched outside that wrapper, so nothing
   on other templates can be affected by this file.

   Signature idea: a single "inspection chip" component (icon tile + label/value)
   is reused for quick stats, specs, condition checks and tire health, so the
   page reads as one continuous verification dashboard rather than a stack of
   unrelated blocks — this is what should make the listing feel trustworthy.
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ---------------------------------------------------------------------------
   1. Design tokens
   --------------------------------------------------------------------------- */
:root{
  --cd-red:        #E11D2A;
  --cd-red-dark:   #AE1320;
  --cd-red-50:     #FCEAEC;
  --cd-ink:        #15181F;
  --cd-body:       #525A66;
  --cd-muted:      #8A92A1;
  --cd-line:       #E8EAEE;
  --cd-line-2:     #DBDFE5;
  --cd-surface:    #FFFFFF;
  --cd-surface-2:  #F5F7FA;
  --cd-surface-3:  #EEF0F3;
  --cd-success:    #0F8A4B;
  --cd-success-50: #E7F6EC;
  --cd-amber:      #A8690A;
  --cd-amber-50:   #FBF1E0;
  --cd-r-sm:       8px;
  --cd-r-md:       14px;
  --cd-r-lg:       22px;
  --cd-shadow-1:   0 1px 2px rgba(15,23,32,.05), 0 1px 1px rgba(15,23,32,.04);
  --cd-shadow-2:   0 10px 24px -10px rgba(15,23,32,.18);
  --cd-shadow-3:   0 24px 56px -16px rgba(15,23,32,.24);
  --cd-header-clearance: 24px; /* if the global header ever becomes fixed/sticky, raise this so .cd-sticky-panel clears it */
}
.cd-redesign{
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--cd-body);
  background: var(--cd-surface-2);
  -webkit-font-smoothing: antialiased;
  font-size: 15px;
  line-height: 1.55;
}
.cd-redesign *{ box-sizing: border-box; }
.cd-redesign h1, .cd-redesign h2, .cd-redesign h3, .cd-redesign h4{
  font-family: inherit; color: var(--cd-ink); margin: 0; letter-spacing: -0.01em;
}
.cd-redesign a{ text-decoration: none; }
.cd-redesign img{ max-width: 100%; display: block; }
.cd-redesign ul{ margin: 0; padding: 0; list-style: none; }
.cd-redesign button{ font-family: inherit; }
/* Buttons don't inherit font-family from their ancestors by default in
   browsers (a long-standing CSS quirk for form controls) — without this,
   header/footer/sidebar buttons (theme toggle, nav toggler, etc.) would
   fall back to the browser's default font instead of matching the rest
   of the page. */
button, input, select, textarea{ font-family: inherit; }
.cd-redesign .tnum{ font-feature-settings: "tnum" 1; font-variant-numeric: tabular-nums; }

.cd-redesign :focus-visible{ outline: 2px solid var(--cd-red); outline-offset: 2px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce){
  .cd-redesign *{ animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------------------------------------------------------------------------
   2. Layout helpers
   --------------------------------------------------------------------------- */
.cd-section{ padding: 40px 0; }
/* General-sibling (~), not adjacent (+): several ads.* includes end with a
   trailing <script> (lightbox type arrays, etc.) that sits between two
   .cd-section elements, which breaks the adjacent-sibling combinator. ~
   only needs an EARLIER .cd-section sibling to exist, so it survives those
   in-between <script> tags without having to relocate them. */
.cd-section ~ .cd-section{ border-top: 1px solid var(--cd-line); }
/* The contact banner section has its own strong visual break (the black
   .cd-contact-banner card) — a thin grey divider on top of it is redundant.
   Same specificity as the rule above (two classes), wins on source order. */
.cd-section.cd-no-divider{ border-top: none; }
.cd-section-gray{ background: var(--cd-surface-2); }
.cd-section-head{
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 18px;
}
.cd-section-title{ font-size: 21px; font-weight: 800; }
.cd-section-sub{ color: var(--cd-muted); font-size: 13.5px; margin: -10px 0 16px; }
.cd-section-link{
  font-size: 13.5px; font-weight: 700; color: var(--cd-red); display: inline-flex; align-items: center; gap: 6px;
}
.cd-section-link svg{ width: 13px; height: 13px; }
.cd-section-link:hover{ color: var(--cd-red-dark); }
/* .cd-gallery-container full-bleed rule removed — gallery now lives inside the left column */

@media (max-width: 575.98px){
  .cd-section{ padding: 28px 0; }
  .cd-section-title{ font-size: 18px; }
}

/* ---------------------------------------------------------------------------
   3. Utility bar (back link + favorite/share)
   --------------------------------------------------------------------------- */
.cd-utility-bar{ padding: 14px 0; }
.cd-utility-inner{ display: flex; align-items: center; }
.cd-link-back{ color: var(--cd-body); font-weight: 600; font-size: 13.5px; display: inline-flex; align-items: center; gap: 8px; }
.cd-link-back:hover{ color: var(--cd-red); }
.cd-pill-btn{
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px;
  border: 1px solid var(--cd-line-2); border-radius: 999px; font-size: 13px;
  font-weight: 700; color: var(--cd-ink); background: var(--cd-surface); cursor: pointer;
  box-shadow: var(--cd-shadow-1);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, color .16s ease;
}
.cd-pill-btn svg{ width: 15px; height: 15px; transition: color .16s ease; }
.cd-pill-btn:hover{ border-color: var(--cd-red); color: var(--cd-red); transform: translateY(-1px); box-shadow: var(--cd-shadow-2); }
.cd-pill-btn:active{ transform: translateY(0); box-shadow: var(--cd-shadow-1); }
.cd-pill-btn.is-active{ background: var(--cd-red-50); border-color: var(--cd-red); color: var(--cd-red); }
.cd-pill-btn.is-active svg{ fill: currentColor; }

@media (max-width: 575.98px){
  .cd-utility-bar .cd-link-back span{ display: none; }
}

/* ---------------------------------------------------------------------------
   4. Hero / gallery
   --------------------------------------------------------------------------- */
/* Hero now uses a two-column layout: gallery left, sticky panel right */
.cd-hero{ padding-top: 18px; padding-bottom: 40px; }
.cd-hero-left{ display: flex; flex-direction: column; min-width: 0; }
.cd-gallery-wrap{
  position: relative; border-radius: 14px; overflow: hidden; flex-shrink: 0; min-width: 0;
  filter: drop-shadow(0 14px 28px rgba(21,24,31,.16)) drop-shadow(0 2px 6px rgba(21,24,31,.06));
}

/* Full-width title bar sits above the gallery/panel columns — the
   strongest visual element on the page, sized for high-value vehicles.

   Font-size scale (modular, ~1.33 ratio steps down per breakpoint):
     Desktop  ≥992px : main 48px / 3rem      subtitle 18px / 1.125rem
     Tablet  768-991 : main 36px / 2.25rem   subtitle 16px / 1rem
     Mobile   ≤767px : main 28px / 1.75rem   subtitle 14px / .875rem
     Small    ≤420px : main 24px / 1.5rem    subtitle 14px / .875rem
   Subtitle stays roughly 35-40% of the main line at every step, so it
   always reads as clearly subordinate rather than a second headline. */
.cd-back-link{
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 22px;
  font-size: 13px; font-weight: 600; color: var(--cd-muted); text-decoration: none;
  transition: color .15s ease;
}
.cd-back-link:hover{ color: var(--cd-red); }
.cd-back-link svg{ width: 12px; height: 12px; }
.cd-hero-title-bar{
  /* align-items: center (was flex-start) so the Запази/Сподели actions sit level with the title
     block instead of clinging to the top next to the small eyebrow — owner's call. */
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  /* Tightened (owner's call) — the title block read as too tall. Same premium type sizes, just
     less air: eyebrow/meta gaps trimmed, and the ad-number line pulled closer to the divider
     (padding-bottom 8) to save space. */
  padding-bottom: 5px; border-bottom: 1px solid var(--cd-line); margin-bottom: 14px;
}
.cd-hero-title-actions{ display: flex; gap: 8px; flex: none; margin-top: 4px; }
.cd-hero-title-bar .cd-eyebrow{
  margin-bottom: 6px; font-size: 11px; letter-spacing: .07em; font-weight: 600;
}
.cd-title{ display: block; }
.cd-title-main{
  display: block; font-size: 36px; font-weight: 800; line-height: 1.1; letter-spacing: -0.015em;
  color: var(--cd-ink);
}
.cd-title-sub{
  display: block; margin-top: 6px; font-size: 18px; font-weight: 600; letter-spacing: 0;
  /* Between --cd-muted (#8A92A1, faded at 18px) and --cd-body (#525A66, too dark). */
  color: #6E7683;
}
.cd-title-dot{ margin: 0 2px; opacity: .6; }
/* Accessible visually-hidden utility — content stays in the DOM/accessibility
   tree (and is fully crawlable for SEO) but isn't rendered on screen. Using
   this clip-based technique instead of display:none is what keeps it
   legitimate for assistive tech rather than being "hidden text". */
.cd-sr-only{
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.cd-hero-title-bar .cd-meta-line{
  margin-top: 8px; font-size: 13px; letter-spacing: .01em;
}
/* Visible price on the subtitle line (was a hidden .cd-sr-only span). Fully matches .cd-title-sub —
   same colour and weight as the rest of the subtitle (owner's call), no emphasis. Visible (not
   clip/display:none) so it counts as real crawlable content for SEO. */
.cd-title-price{ color: inherit; font-weight: inherit; }
@media (max-width: 991.98px){
  .cd-title-main{ font-size: 32px; }
  .cd-title-sub{ font-size: 15px; }
}
@media (max-width: 767.98px){
  .cd-hero-title-bar{ padding-bottom: 16px; margin-bottom: 16px; }
  .cd-title-main{ font-size: 25px; letter-spacing: -0.01em; }
  .cd-title-sub{ font-size: 13.5px; margin-top: 5px; }
  .cd-hero-title-bar .cd-meta-line{ margin-top: 9px; font-size: 13px; }
  .cd-hero-title-actions .cd-pill-btn{ padding: 8px 10px; }
  .cd-hero-title-actions .cd-pill-btn span{ display: none; }
}
@media (max-width: 420px){
  .cd-title-main{ font-size: 22px; }
}
.cd-gallery-badges{
  position: absolute; top: 12px; left: 12px; right: 12px; z-index: 5;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 8px;
}
.cd-badge{
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px;
  border-radius: 999px; font-size: 12.5px; font-weight: 700; color: #fff;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); white-space: nowrap;
}
.cd-badge svg{ width: 12px; height: 12px; }
.cd-badge-verified{ background: rgba(15,138,75,.92); }
.cd-badge-time{ background: rgba(21,24,31,.78); margin-left: auto; }
/* The global countdown plugin injects .badge-timeleft with theme colors
   (#444 text, red icon — light.css) meant for a light card. Force white
   here so it stays readable on the dark overlay pill. */
.cd-badge-time .badge-timeleft{ background: none !important; padding: 0 !important; font-weight: 700; font-size: 12.5px; color: #fff !important; }
.cd-badge-time .badge-timeleft i{ margin-right: 4px; color: #fff !important; }

/* ---------------------------------------------------------------------------
   Main stage — the image is taken out of normal flow entirely
   (position:absolute, inset:0) and object-fit:cover fills the box.
   This means the photo's native pixel dimensions can NEVER affect the
   size of the container, regardless of whether aspect-ratio is
   supported or whether any JS has run. The padding-top fallback
   covers browsers that don't support the aspect-ratio property.
   --------------------------------------------------------------------------- */
.cd-main-stage{
  position: relative; width: 100%; overflow: hidden;
  background: var(--cd-surface-3);
  height: 0; padding-top: 56.25%; /* 16:9 fallback */
}
@supports (aspect-ratio: 16/9){
  .cd-main-stage{ height: auto; padding-top: 0; aspect-ratio: 16/9; }
}
.cd-main-stage a{ position: absolute; inset: 0; display: block; }
.cd-stage-image{
  position: absolute; inset: 0; display: block;
  width: 100%; height: 100%; max-width: 100%;
  object-fit: cover; object-position: center;
  transition: transform .4s cubic-bezier(.2,.7,.3,1);
}
.cd-main-stage:hover .cd-stage-image{ transform: scale(1.03); }
.cd-play-badge{
  position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center;
  background: rgba(15,18,24,.28); pointer-events: none;
}
/* 56px circle, 18px glyph — was one <i> sized by font-size for the glyph and
   width/height for the circle at once (icon fonts do both from one element);
   an <svg>'s width/height IS the drawn icon, so the circle now comes from
   padding around an 18px icon instead (18 + 19px*2 = 56px total). */
.cd-play-badge svg{
  width: 18px; height: 18px; padding: 19px; box-sizing: content-box;
  border-radius: 50%; background: rgba(255,255,255,.94); color: var(--cd-ink);
}
.cd-gallery-arrow{
  display: flex !important; visibility: visible !important; opacity: 1 !important;
  position: absolute !important; top: 50% !important; transform: translateY(-50%) !important;
  z-index: 20 !important; pointer-events: auto !important;
  width: 38px !important; height: 38px !important; min-width: 38px; min-height: 38px;
  border-radius: 50% !important; border: 0 !important; margin: 0 !important; padding: 0 !important;
  cursor: pointer; align-items: center !important; justify-content: center !important;
  background: rgba(21,24,31,.55) !important; color: #fff !important;
  font-size: 14px; line-height: 1;
  transition: background .15s ease;
}
.cd-gallery-arrow svg{ width: 14px; height: 14px; color: #fff !important; pointer-events: none; }
.cd-gallery-arrow:hover{ background: rgba(21,24,31,.78) !important; }
.cd-gallery-prev{ left: 12px !important; right: auto !important; }
.cd-gallery-next{ right: 12px !important; left: auto !important; }
.cd-gallery-counter{
  position: absolute; bottom: 12px; right: 12px; z-index: 3;
  padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #fff;
  background: rgba(21,24,31,.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

/* ---------------------------------------------------------------------------
   Thumbnail strip — a single horizontal row, not a grid. Compact, uniform,
   landscape-cropped tiles (matching the main image's own orientation) so the
   strip reads as a continuation of the hero photo rather than a separate
   component. Scrolls horizontally if there are more thumbnails than fit.
   The same position:absolute image technique keeps native photo dimensions
   from leaking out.
   --------------------------------------------------------------------------- */
.cd-thumb-strip-wrap{ margin-top: 8px; min-width: 0; }
.cd-thumb-row{
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  min-width: 0;
  padding: 4px 2px 6px; /* clearance so the active ring isn't clipped */
}
.cd-thumb-row::-webkit-scrollbar{ display: none; }
.cd-thumb{
  position: relative; flex: 0 0 auto; width: 88px; aspect-ratio: 4/3;
  border-radius: 8px; overflow: hidden; cursor: pointer;
  border: 0; padding: 0; background: none;
  opacity: .5;
  transition: opacity .2s ease, box-shadow .2s ease;
}
.cd-thumb img{
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: 100%;
  object-fit: cover; object-position: center;
}
.cd-thumb-play{
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(15,18,24,.32); color: #fff;
}
.cd-thumb-play svg{ width: 14px; height: 14px; }
.cd-thumb:hover{ opacity: .85; }
.cd-thumb.active{
  opacity: 1;
  box-shadow: 0 0 0 2px var(--cd-surface), 0 0 0 4px var(--cd-ink);
}
.cd-thumb:focus-visible{ outline: 2px solid var(--cd-ink); outline-offset: 2px; }

@media (max-width: 575.98px){
  .cd-thumb{ width: 76px; }
}

@media (max-width: 767.98px){
  .cd-gallery-wrap{ border-radius: 0; }            /* edge-to-edge on phones */
  .cd-main-stage{ border-radius: 0; }
  .cd-thumb-strip-wrap{ display: none; } /* counter carries position feedback on phones */
}

/* ---------------------------------------------------------------------------
   5. Title block, quick stats, trust strip
   --------------------------------------------------------------------------- */
.cd-eyebrow{ font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--cd-muted); margin: 0 0 6px; }
.cd-meta-line{ color: var(--cd-muted); font-size: 13px; margin: 8px 0 0; }

.cd-quick-stats{
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 20px;
}
.cd-stat-chip{
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 7px;
  padding: 13px 8px 12px; background: var(--cd-surface); border: 1px solid var(--cd-line);
  border-radius: var(--cd-r-md); box-shadow: var(--cd-shadow-1);
}
.cd-stat-chip svg{
  width: 23px; height: 23px; color: var(--cd-body); flex: none;
}
/* Owner's request: Пробег (road) and Мощност (engine) specifically a touch bigger than the
   other chip icons — Скоростна кутия (gearbox) stays at the base 23px, only these two get the
   bump, hence a dedicated class instead of raising .cd-stat-chip svg itself. */
.cd-stat-chip svg.cd-stat-icon-lg{ width: 26px; height: 26px; }
.cd-stat-chip strong{ font-size: 15.5px; color: var(--cd-ink); font-weight: 800; letter-spacing: -0.01em; }
.cd-stat-chip span{
  font-size: 12px; color: var(--cd-muted); font-weight: 500;
}

.cd-highlights-row{ display: flex; flex-wrap: nowrap; align-items: flex-start; justify-content: space-between; gap: 16px; margin-top: 14px; }
.cd-highlights{ display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 auto; min-width: 0; }
/* Small neutral chip-card (same idiom as .cd-stat-chip right above and
   .cd-condition-chip elsewhere) — only the icon carries the accent colour,
   instead of a solid-fill rounded "balloon" badge. */
.cd-highlight-pill{
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px;
  background: var(--cd-surface); border: 1px solid var(--cd-line); border-radius: var(--cd-r-sm);
  box-shadow: var(--cd-shadow-1); font-size: 12.5px; font-weight: 700; color: var(--cd-ink);
}
.cd-highlight-pill svg{ width: 12px; height: 12px; }
.cd-highlight-good svg{ color: var(--cd-success); }
.cd-highlight-warning svg{ color: var(--cd-amber); }
.cd-highlight-bad svg{ color: var(--cd-red); }
/* Copart yard state/city appended to the country in the hero, lighter than the country. */
.cd-country-yard{ margin-left: 5px; font-weight: 500; color: var(--cd-muted); }
.cd-country-flag{
  display: inline-flex; align-items: center; gap: 8px; flex: none; white-space: nowrap;
  font-size: 14px; font-weight: 600; color: var(--cd-ink); padding-top: 7px; padding-bottom: 6px;
  position: relative;
}
.cd-country-flag::after{
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(to right, transparent, rgba(15,138,75,.5) 50%, transparent);
}
.cd-country-flag-icon,
.cd-country-flag-img{
  display: block; width: 20px; height: 14px; border-radius: 3px; flex: none; overflow: hidden;
  object-fit: cover;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
}

/* Full-width trust band now (moved out of the hero-left column — see view.blade.php): the
   section wrapper (.cd-trust-band) provides the spacing + top divider, so the grid itself no
   longer needs its own margin/padding/border. Wider columns here let every source's copy sit on
   one line instead of wrapping. */
.cd-trust-band{ padding: 30px 0; }
.cd-value-props{
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px 24px;
}
/* Europe-auction variant: rendered inside the hero-left column (not the full-width band) to fill
   the height next to the tall bid panel. 2×2, NOT a single vertical column (owner wants them side
   by side like the full-width band) and NOT 4-across (the column is only ~796px, so four would
   wrap the text again — the very thing we moved to full-width to fix). Two per row keeps each item
   on one line AND fills the gap next to the panel. Needs its own top divider/spacing since it
   isn't wrapped in a .cd-trust-band section here. */
.cd-value-props--column{
  grid-template-columns: repeat(2, 1fr); gap: 22px 28px;
  margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--cd-line);
}
.cd-value-prop{
  display: flex; align-items: flex-start; gap: 13px;
  opacity: 0; transform: translateX(-18px);
  animation: cdValuePropIn .5s ease forwards;
}
/* Premium pass (owner's call 2026-07-20): bigger (24px), hairline 1.5 stroke and confident ink
   tone instead of the old 20px muted-gray — the trust band now carries visual weight next to the
   quick-stats above it, without a boxed "balloon" (kept bare, consistent with the equipment
   spotlight). flex-start (NOT center) — the label block is 3 lines (1 title + 2 subtitle), so
   centering dropped the glyph to the middle, away from the title it belongs next to; top-aligned
   with a 1px nudge keeps it level with the title. */
.cd-value-prop svg{
  flex: none; width: 26px; height: 26px; color: var(--cd-ink); stroke-width: 1.5; margin-top: 1px;
}
.cd-value-prop strong{ display: block; font-size: 14.5px; font-weight: 700; color: var(--cd-ink); line-height: 1.25; }
.cd-value-prop span{ display: block; font-size: 12.5px; color: var(--cd-muted); margin-top: 3px; line-height: 1.4; }
@media (max-width: 767.98px){
  .cd-value-props{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px){
  .cd-value-props{ grid-template-columns: 1fr; }
}
@keyframes cdValuePropIn{
  from{ opacity: 0; transform: translateX(-18px); }
  to{ opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce){
  .cd-value-prop{ animation: none; opacity: 1; transform: none; }
}

/* Featured equipment "spotlight" — naked icon-on-top / label-below groups, replacing the small
   inline .cd-equip-chip pill that used to sit here. Renders inside the "Оборудване" section
   (ads.equipment / ads.encar_equipment / ads.copart_equipment), between its heading and the full
   list — owner tried it up in the hero and as a standalone titled section first, final call
   2026-07-20 is here. flex-wrap, not a fixed grid — count varies per car (0–8, see
   Ads::getHighlightEquipment(8)). margin-bottom separates it from the full grid below. */
/* Roomier featured strip (owner's call 2026-07-21) — more air BETWEEN items and below
   (off the full list) so it reads premium, not cramped. padding-top:17px so the bare
   featured icons sit ~35px below the title — matching the wheel icon in "Гуми и джанти",
   whose card padding (16px) pushes its icon down the same amount (18px card-top + 16 pad).
   Bare items have no such padding, so we add it here to line the two sections up. */
.cd-equip-spotlight{ display: flex; flex-wrap: wrap; gap: 24px 40px; margin: 0 0 36px; padding-top: 17px; }
/* Owner's call (2026-07-20): NO "balloon" — dropped the card fill/border/shadow so the
   icon+label sit bare on the page background. A naked thin-line glyph reads more premium than a
   boxed badge. flex:0 0 auto so each item sizes to its own (single-line) label and they cluster
   left with an even gutter; no min/max-width cap, so a label like "автоматичен климатик" stays
   on one line instead of wrapping (owner's request). */
.cd-equip-spotlight-item{
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 9px;
  flex: 0 0 auto;
}
/* stroke-width 1.5 (Lucide defaults to 2) — a hairline glyph is the premium look the owner
   asked for; CSS wins over the SVG's own stroke-width presentation attribute. Icon color is the
   neutral body ink, NOT the equipment green (owner's call) — reads more premium bare on the page
   than a colored glyph. */
.cd-equip-spotlight-item svg{ width: 24px; height: 24px; color: var(--cd-body); stroke-width: 1.5; flex: none; }
/* nowrap keeps every label on a single line (owner's request); size a touch smaller to match the
   reduced icon. */
.cd-equip-spotlight-item span{ font-size: 11.5px; font-weight: 600; color: var(--cd-ink); line-height: 1.2; white-space: nowrap; }

/* Encar condition report (on-demand button → server-fetched insurance/inspection). */
.cd-cond-lead{ color: var(--cd-muted); font-size: 13.5px; margin: 0 0 18px; }
.cd-cond-btn{
  display: inline-flex; align-items: center; gap: 9px; padding: 12px 20px;
  border: 1px solid var(--cd-line-2); background: var(--cd-surface); color: var(--cd-ink);
  border-radius: var(--cd-r-sm); font-size: 14px; font-weight: 700; cursor: pointer;
  box-shadow: var(--cd-shadow-1); transition: .15s ease;
}
.cd-cond-btn:hover:not(:disabled){ border-color: var(--cd-red); box-shadow: 0 2px 8px rgba(15,23,32,.12); }
.cd-cond-btn:disabled{ opacity: .7; cursor: default; }
.cd-cond-btn svg{ width: 17px; height: 17px; color: var(--cd-red); flex: none; }
.cd-cond-spin{
  width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--cd-line-2);
  border-top-color: var(--cd-red); display: inline-block; animation: cdSpin .7s linear infinite;
}
@keyframes cdSpin{ to{ transform: rotate(360deg); } }
.cd-cond-empty{ color: var(--cd-muted); font-size: 13.5px; padding: 8px 0; }

.cd-cond-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.cd-cond-card{
  background: var(--cd-surface); border: 1px solid var(--cd-line); border-radius: var(--cd-r-md);
  box-shadow: var(--cd-shadow-1); padding: 18px 20px;
}
.cd-cond-card h3{ display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800; color: var(--cd-ink); margin: 0 0 14px; }
.cd-cond-ic{ font-size: 17px; line-height: 1; }
.cd-cond-rows{ display: flex; flex-direction: column; gap: 10px; }
.cd-cond-row{ display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13.5px; }
.cd-cond-row > span{ color: var(--cd-body); }
.cd-cond-row > strong{ color: var(--cd-ink); font-weight: 700; text-align: right; }
.cd-cond-row > strong.cd-cond-good{ color: var(--cd-success); }
.cd-cond-row > strong.cd-cond-bad{ color: var(--cd-red); }
.cd-cond-warns{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.cd-cond-warn{
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: var(--cd-r-sm);
  background: var(--cd-amber-50); color: var(--cd-amber); font-size: 12px; font-weight: 700;
}
.cd-cond-panels{ margin-top: 6px; border-top: 1px solid var(--cd-line); padding-top: 10px; }
.cd-cond-panels-t{ font-size: 12.5px; font-weight: 700; color: var(--cd-body); margin-bottom: 8px; }
.cd-cond-panel{ display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 13px; padding: 3px 0; }
.cd-cond-panel > span{ color: var(--cd-ink); }
.cd-cond-panel > em{ color: var(--cd-amber); font-style: normal; font-weight: 600; font-size: 12.5px; }
.cd-cond-clean{ margin-top: 6px; color: var(--cd-success); font-size: 13px; font-weight: 600; }
@media (max-width: 640px){
  .cd-cond-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 767.98px){
  /* Owner's call (reversed course after checking live): tried 4-in-a-row first so the 4
     remaining chips (after hiding the last one, below) would fit in one line — but common
     phones are 390–428px wide, ABOVE the old 420px breakpoint, so most real phones hit this
     767.98 tier, not the narrower one, and 4 cramped columns at that width looked bad. 2×2
     (stacked) reads better than a squeezed single row — applies uniformly across the whole
     mobile/tablet range now instead of splitting into a 4-col tier and a 2-col tier. */
  .cd-quick-stats{ grid-template-columns: repeat(2, 1fr); }
  /* Owner's request: drop the last chip (whichever one it is — Мощност or Цвят, source-
     independent via :last-child) so 4 remain — an even 2×2 instead of a ragged 5th orphan. */
  .cd-quick-stats .cd-stat-chip:last-child{ display: none; }
}

/* ---------------------------------------------------------------------------
   6. Sticky deal panel (price / bid / buy now / financing / breakdown / seller)
   --------------------------------------------------------------------------- */
/* Two-column hero layout — gallery left, sticky panel right.
   Enforced via CSS Grid at 600px so it works even if Bootstrap
   hasn't loaded or the viewport is between 600–992px. */
.cd-hero-row{ align-items: flex-start; }
@media (min-width: 600px){
  .cd-hero .container > .cd-hero-row{
    display: grid !important;
    grid-template-columns: 1fr 340px;
    gap: 24px;
    flex-wrap: nowrap;
  }
  .cd-hero-left,
  .cd-hero .container > .cd-hero-row > [class*="col-"]{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
    padding: 0 !important;
  }
}
@media (min-width: 992px){
  .cd-hero .container > .cd-hero-row{
    grid-template-columns: 1fr 380px;
  }
}
.cd-sticky-panel{ position: sticky; top: calc(var(--cd-header-clearance) + 12px); }

.cd-deal-card{
  background: var(--cd-surface); border: 1px solid var(--cd-line); border-radius: var(--cd-r-lg);
  box-shadow: var(--cd-shadow-2); padding: 20px; margin-bottom: 16px;
}
.cd-deal-card-label{ font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--cd-muted); }
.cd-deal-card-price{ font-size: 32px; font-weight: 800; color: var(--cd-ink); margin-top: 4px; }

.cd-countdown-strip{
  margin-top: 16px; display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: var(--cd-red-50); border-radius: var(--cd-r-md);
}
.cd-countdown-icon{
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 38px; height: 38px; border-radius: 50%; background: var(--cd-surface);
  box-shadow: var(--cd-shadow-1); color: var(--cd-red);
}
.cd-countdown-icon svg{ width: 15px; height: 15px; }
.cd-countdown-text{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cd-countdown-time{ font-size: 13px; font-weight: 700; color: var(--cd-body); }
/* expire.blade.php wraps the timer in an inline-styled float:right div (old
   layout); neutralise it with !important so the timer flows inline right after
   the label instead of floating to the right edge with a fixed 24px height. */
.cd-countdown-time > div{ float: none !important; height: auto !important; display: inline !important; }
.cd-countdown-strip .timeleft .badge-timeleft{
  background: none !important; color: var(--cd-ink) !important; padding: 0 !important; font-weight: 700; font-size: 13px;
}
/* The countdown plugin injects a redundant red <i class="fa fa-clock"> inside
   .badge-timeleft; the strip already has the hourglass icon, so hide it. */
.cd-countdown-strip .badge-timeleft i{ display: none; }
.cd-countdown-strip .badge-timeexpired{ background: var(--cd-muted) !important; color: #fff; padding: 2px 8px !important; border-radius: 6px; }
/* Hide the "Приключва след" prefix once expired — see the comment in bid-box.blade.php.
   :has() reacts to the plugin swapping the countdown span's content client-side too, not just
   on initial page load. */
.cd-countdown-time:has(.badge-timeexpired) .cd-countdown-prefix{ display: none; }
.cd-countdown-date{ display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--cd-body); }
.cd-countdown-date svg{ width: 11px; height: 11px; }

.cd-field-label{ display: block; font-size: 12.5px; font-weight: 700; color: var(--cd-ink); margin: 16px 0 8px; }
.cd-stepper{
  display: flex; align-items: center; gap: 6px; border: 1px solid var(--cd-line-2); border-radius: 14px;
  background: var(--cd-surface-2); padding: 5px;
}
.cd-stepper-btn{
  width: 32px; height: 32px; flex: none; border: none; border-radius: 50%; background: var(--cd-surface);
  box-sizing: border-box; box-shadow: var(--cd-shadow-1);
  color: var(--cd-ink); cursor: pointer; padding: 0; margin: 0; text-align: center;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease, color .15s ease, transform .1s ease;
}
.cd-stepper-btn svg{ width: 13px; height: 13px; }
.cd-stepper-btn:hover{ background: var(--cd-ink); color: #fff; }
.cd-stepper-btn:active{ transform: scale(.9); }
.cd-stepper-currency{
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 0 4px; font-weight: 700; color: var(--cd-ink);
}
.cd-stepper-currency input{
  flex: 1; max-width: 140px; border: none; background: transparent; text-align: center; font-size: 16px; font-weight: 800;
  color: var(--cd-ink); padding: 7px 0; min-width: 0;
}
.cd-stepper-currency input:focus{ outline: none; }
/* light.css sets #new_bid{ background:#fff } via an ID selector (1,0,0), which
   overrides the transparent background above. Re-assert it with an ID-inclusive
   selector (1,1,0) so the field blends into the grey stepper — no !important. */
.cd-redesign #new_bid{ background: transparent; }
.cd-field-hint{ display: block; font-size: 12px; color: var(--cd-muted); margin-top: 6px; }
.cd-field-hint a{ color: var(--cd-red); font-weight: 700; }
.cd-quick-bid-row{ display: flex; gap: 6px; margin-top: 8px; }
.cd-quick-bid-btn{
  flex: 1; padding: 7px 0; border: 1px solid var(--cd-line-2); border-radius: var(--cd-r-sm);
  background: var(--cd-surface); color: var(--cd-ink); font-size: 12px; font-weight: 700;
  cursor: pointer; transition: background .15s ease, border-color .15s ease, box-shadow .1s ease; box-shadow: var(--cd-shadow-1);
}
.cd-quick-bid-btn:hover{ background: var(--cd-surface-3); border-color: var(--cd-muted); }
/* Shadow flattens on press, not just a scale-down — reads as the chip
   physically pressing flush against the surface, instead of shrinking
   while still looking "raised" at the same time. */
.cd-quick-bid-btn:active{ transform: scale(0.97); box-shadow: none; }

.cd-or-divider{
  display: flex; align-items: center; gap: 10px; margin: 16px 0;
  color: var(--cd-muted); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.cd-or-divider::before, .cd-or-divider::after{
  content: ''; flex: 1; height: 1px; background: var(--cd-line);
}

.cd-btn{
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  padding: 13px 16px; border-radius: var(--cd-r-sm); font-size: 14.5px; font-weight: 700;
  border: 1px solid transparent; cursor: pointer; transition: .15s ease; margin-top: 10px;
}
.cd-btn-primary{
  background: linear-gradient(135deg, var(--cd-red) 0%, var(--cd-red-dark) 100%);
  color: #fff; box-shadow: 0 8px 16px -6px rgba(225,29,42,.45);
}
.cd-btn-primary:hover{ background: linear-gradient(135deg, var(--cd-red-dark) 0%, var(--cd-red-dark) 100%); }
.cd-btn-dark{ background: var(--cd-ink); color: #fff; }
.cd-btn-dark:hover{ background: #000; }
.cd-btn-outline{ background: var(--cd-surface); color: var(--cd-ink); border-color: var(--cd-line-2); box-shadow: var(--cd-shadow-1); }
.cd-btn-outline:hover{ border-color: var(--cd-red); color: var(--cd-red); }
.cd-btn[disabled]{ opacity: .55; cursor: not-allowed; }
.cd-btn-row{ display: flex; gap: 8px; }
.cd-btn-row .cd-btn{ margin-top: 0; }

#tbi-bank{ margin-top: 10px; }
#tbi-bank a{
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  padding: 13px 16px; border-radius: var(--cd-r-sm); font-size: 14.5px; font-weight: 700;
  /* Same floating/3D shadow treatment as .cd-btn-primary, tinted to TBI's own
     orange — no gradient here, their brand colour stays a flat, protected fill. */
  background: #FF7A00; color: #fff; cursor: pointer;
  box-shadow: 0 8px 16px -6px rgba(255,122,0,.45);
}
.tbi_button_logo{ height: 18px; width: auto; display: inline-block; }

.cd-delivery-line{
  display: flex; align-items: center; gap: 12px; margin-top: 22px; padding: 12px 14px;
  background: var(--cd-surface-2); border-radius: var(--cd-r-md);
}
.cd-delivery-icon{
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 38px; height: 38px; border-radius: 50%; background: var(--cd-surface);
  box-shadow: var(--cd-shadow-1); color: var(--cd-body);
}
.cd-delivery-icon svg{ width: 15px; height: 15px; }
.cd-delivery-text{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cd-delivery-days{ font-size: 14.5px; font-weight: 800; color: var(--cd-ink); letter-spacing: -0.01em; }
.cd-delivery-from{ display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--cd-body); }
.cd-delivery-flag{
  display: block; width: 14px; height: 10px; border-radius: 2px; flex: none;
  object-fit: cover;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
}

/* .cd-redesign h4{ margin:0 } (global reset, 0,1,1) otherwise beats this
   single-class rule (0,1,0) — scope it under .cd-deal-card (0,2,0) to win. */
.cd-deal-card .cd-breakdown-toggle{ margin: 12px 0 0; }
.cd-breakdown-toggle-link{
  display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--cd-ink);
}
.cd-breakdown-toggle-link svg{ width: 13px; height: 13px; }
.cd-breakdown-toggle-link:hover{ color: var(--cd-red); }
.cd-breakdown{ margin-top: 10px; }
/* .cd-redesign ul{ padding:0 } (global reset, 0,1,1) otherwise beats this
   single-class rule (0,1,0) — scope it under .cd-breakdown (0,2,0) to win. */
.cd-breakdown .cd-breakdown-list{ display: flex; flex-direction: column; gap: 8px; padding-top: 10px; border-top: 1px solid var(--cd-line); }
.cd-breakdown-list li{ display: flex; justify-content: space-between; font-size: 13px; color: var(--cd-body); }
.cd-breakdown-list li strong{ color: var(--cd-ink); font-weight: 700; }
.cd-breakdown-sub{ padding-left: 14px; font-size: 12px; color: var(--cd-muted); }
.cd-breakdown-divider{ border: none; border-top: 1px solid var(--cd-line); margin: 4px 0; }
.cd-breakdown-total{ padding-top: 8px; border-top: 1px solid var(--cd-line); font-weight: 700; }
.cd-breakdown-total span{ color: var(--cd-ink); }
.cd-breakdown-total strong{ font-size: 15px; }
.cd-breakdown-total-buy strong{ color: var(--cd-red); }

/* Wagas warranty box — clean two-row card, hairline divider, minimal and understated
   (Porsche-style restraint rather than a busy badge/banner). Standalone card in the sticky
   deal panel, right below the bid box (car_details_sidebar.blade.php) — NOT a row crammed
   into the price breakdown. Expects an inline <svg> logo (.cd-warranty-logo svg pins it to
   the row height), which is why an <img> version blew up to natural size. */
.cd-warranty-card{
  display: flex; flex-direction: column; gap: 10px;
  background: var(--cd-surface); border: 1px solid var(--cd-line); border-radius: var(--cd-r-lg);
  box-shadow: var(--cd-shadow-1); padding: 16px 18px; margin-bottom: 16px;
}
.cd-warranty-row{ display: flex; align-items: center; gap: 12px; }
.cd-warranty-text{ font-size: 13px; font-weight: 600; color: var(--cd-muted); letter-spacing: .01em; }
.cd-warranty-logo{ display: inline-flex; align-items: center; height: 22px; }
.cd-warranty-logo svg{ height: 100%; width: auto; display: block; }
.cd-warranty-sub{
  font-size: 12.5px; color: var(--cd-muted); font-weight: 500; margin: 0;
  padding-top: 10px; border-top: 1px solid var(--cd-line);
}

.cd-admin-row{ display: flex; flex-wrap: wrap; gap: 14px; padding: 12px 4px 0; font-size: 12px; color: var(--cd-muted); }
.cd-admin-row a{ color: var(--cd-muted); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.cd-admin-row a:hover{ color: var(--cd-red); }

@media (max-width: 991.98px){
  .cd-sticky-panel{ position: static; top: auto; margin-top: 24px; }
}

/* ---------------------------------------------------------------------------
   7. Inspection chip system (shared by specs / condition / tires)
   --------------------------------------------------------------------------- */
.cd-spec-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.cd-spec-card{
  display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--cd-surface);
  border: 1px solid var(--cd-line); border-radius: var(--cd-r-md); box-shadow: var(--cd-shadow-1);
}
/* stroke-width:2 forced — the 3 hand-copied search-panel icons (road/gearbox/
   engine) carry no stroke-width of their own, unlike Lucide's <x-lucide-*>
   components which default to 2, so without this they render hairline-thin
   (1px) next to the others. */
.cd-spec-card svg{
  color: var(--cd-body); flex: none; width: 19px; height: 19px; stroke-width: 2;
}
.cd-spec-card span{
  display: block; font-size: 11.5px; color: var(--cd-muted); font-weight: 500;
}
.cd-spec-card strong{ display: block; font-size: 15px; color: var(--cd-ink); font-weight: 800; margin-top: 2px; }

/* "Още детайли" — secondary specs below the main grid, deliberately lighter (no cards/
   icons, just label→value pairs) so they read as supplementary, not headline specs. */
.cd-more-specs{ margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--cd-line-2); }
.cd-more-specs-head{
  display: block; margin-bottom: 12px; font-size: 12px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--cd-muted);
}
.cd-more-specs-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 22px; }
.cd-more-spec{ display: flex; flex-direction: column; gap: 1px; }
.cd-more-spec span{ font-size: 11.5px; color: var(--cd-muted); }
.cd-more-spec strong{ font-size: 13.5px; font-weight: 700; color: var(--cd-body); }
@media (max-width: 767.98px){ .cd-more-specs-grid{ grid-template-columns: repeat(2, 1fr); } }

.cd-pass-pill{
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
  background: var(--cd-success-50); color: var(--cd-success); font-size: 12.5px; font-weight: 700;
}
.cd-pass-pill svg{ width: 13px; height: 13px; }
/* 2 columns, not 5 — real row text ("Скоростомер: Няма установени проблеми")
   is longer than even a 3-column cell reliably fits on one line (some category
   names are longer than others), so 2 is what actually guarantees no wrap. */
.cd-condition-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.cd-condition-chip{
  display: flex; align-items: center; gap: 8px; padding: 11px 12px; background: var(--cd-surface);
  border: 1px solid var(--cd-line); border-radius: var(--cd-r-md); box-shadow: var(--cd-shadow-1);
  font-size: 13px; font-weight: 600; color: var(--cd-ink);
}
.cd-condition-chip svg{ color: var(--cd-success); width: 13px; height: 13px; flex: none; }
/* Problem rows carry the .cd-condition-warn class but had no color rule of
   their own, so the circle-x icon silently inherited the same green as a
   clean result — a flagged defect needs to actually read as one. */
.cd-condition-warn svg{ color: var(--cd-red); }

@media (max-width: 991.98px){
  .cd-spec-grid{ grid-template-columns: 1fr 1fr; }
  .cd-condition-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px){
  .cd-spec-grid{ grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   8. Tire health
   --------------------------------------------------------------------------- */
.cd-tire-tabs{ display: flex; gap: 8px; border-bottom: 1px solid var(--cd-line); margin-bottom: 18px; padding: 0; }
.cd-tire-tab{
  border: none; background: none; padding: 10px 4px; font-size: 14px; font-weight: 700; color: var(--cd-muted);
  border-bottom: 2px solid transparent; cursor: pointer; margin-right: 18px;
}
.cd-tire-tab.active{ color: var(--cd-ink); border-color: var(--cd-red); }
/* Tab-pane visibility, independent of Bootstrap's CSS loading — without
   this, both tire sets stack and render at once instead of one at a time. */
.tab-pane{ display: none; }
.tab-pane.active{ display: block; }
/* Shared "appearing" transition for ANY tab system on the page (tires,
   media tabs below) — one consistent animation language, not bespoke per
   component. Re-triggers each time .show is freshly added by the JS. */
.tab-pane.show{ animation: cdTabFadeIn .35s ease; }
@keyframes cdTabFadeIn{
  from{ opacity: 0; transform: translateX(-14px); }
  to{ opacity: 1; transform: translateX(0); }
}

.cd-tire-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.cd-tire-card{
  background: var(--cd-surface); border: 1px solid var(--cd-line); border-radius: var(--cd-r-md);
  padding: 16px; text-align: center; box-shadow: var(--cd-shadow-1);
}
.cd-tire-icon{ width: 64px; height: 64px; margin: 0 auto 10px; }
.cd-tire-icon svg{ width: 100%; height: 100%; }
.cd-tire-ok{ color: var(--cd-success); }
.cd-tire-warn{ color: var(--cd-amber); }
.cd-tire-card strong{ display: block; font-size: 13px; color: var(--cd-ink); margin-bottom: 10px; }
.cd-tire-meta{ display: flex; flex-direction: column; gap: 6px; }
.cd-tire-meta li{
  display: flex; justify-content: space-between; font-size: 12px; color: var(--cd-muted);
  border-top: 1px solid var(--cd-line); padding-top: 6px;
}
.cd-tire-meta li:first-child{ border-top: none; padding-top: 0; }
.cd-tire-meta li span{ color: var(--cd-ink); font-weight: 700; }

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

/* ---------------------------------------------------------------------------
   9. Equipment
   --------------------------------------------------------------------------- */
.cd-equip-highlights{ display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.cd-equip-chip{
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 999px;
  background: var(--cd-surface); border: 1px solid var(--cd-line-2); box-shadow: var(--cd-shadow-1);
  font-size: 13px; font-weight: 600; color: var(--cd-ink);
}
.cd-equip-chip svg{ width: 14px; height: 14px; flex: none; color: var(--cd-success); }

.cd-equip-grid ul{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 16px; }
.cd-equip-grid li{
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; background: var(--cd-surface);
  border: 1px solid var(--cd-line); border-radius: var(--cd-r-md); box-shadow: var(--cd-shadow-1); font-size: 13.5px;
}
.cd-equip-grid li svg{ width: 14px; height: 14px; color: var(--cd-success); margin-top: 2px; flex: none; }
.cd-equip-grid li strong{ display: block; color: var(--cd-ink); font-weight: 600; font-size: 13.5px; }
.cd-equip-grid li small{ display: block; color: var(--cd-muted); font-size: 11.5px; margin-top: 2px; }
/* Original-language equipment name (EU/Auto1 only) — deliberately PALER than the default muted
   small (owner's call 2026-07-20): #AEB4BE sits between --cd-muted (#8A92A1) and --cd-line-2
   (#DBDFE5), so it reads as a faint source-language caption under the Bulgarian label — still
   legible, but light enough that the two-line EU rows don't feel as heavy next to the single-line
   Korea/US rows. */
.cd-equip-grid li small.cd-equip-orig{ color: #AEB4BE; font-weight: 400; }
.cd-equip-divider{
  grid-column: 1 / -1; background: none !important; border: none !important; padding: 16px 2px 2px !important;
  font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--cd-red);
}
.cd-equip-divider-first{ padding-top: 0 !important; }
.cd-equip-toggle-btn{
  display: inline-flex; align-items: center; gap: 7px; margin-top: 18px;
  padding: 10px 18px; border-radius: 999px; border: 1px solid transparent;
  background: var(--cd-red-50); color: var(--cd-red); font-size: 13.5px; font-weight: 700;
  cursor: pointer; transition: background .15s ease, color .15s ease;
}
.cd-equip-toggle-btn svg{ width: 13px; height: 13px; }
.cd-equip-toggle-btn:hover{ background: var(--cd-red); color: #fff; }
.cd-equip-toggle-btn .collapsed-text, .cd-equip-toggle-btn .expanded-text{
  display: inline-flex; align-items: center; gap: 7px;
}
.cd-equip-toggle-btn .expanded-text{ display: none; }

@media (max-width: 575.98px){
  .cd-equip-grid ul{ grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   10. Media strips: additional photos / service docs / damages
   --------------------------------------------------------------------------- */
.cd-tile-track .item, .cd-media-grid .item{ border-radius: var(--cd-r-md); overflow: hidden; position: relative; aspect-ratio: 4/3; box-shadow: var(--cd-shadow-1); }
.cd-tile-track .item img, .cd-media-grid .item img{ width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.cd-tile-track .item:hover img, .cd-media-grid .item:hover img{ transform: scale(1.04); }
.cd-tile-track .item span.cd-tile-caption, .cd-media-grid .item span.cd-tile-caption{
  position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 10px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.62) 100%);
  color: #fff; font-size: 12px; font-weight: 600;
}
.cd-tile-track.cd-tile-square .item{ aspect-ratio: 1/1; }

/* Dependency-free grid (no Owl Carousel needed) for the media tabs below */
.cd-media-strip-wrap{ position: relative; }
.cd-media-grid{
  display: flex; flex-wrap: nowrap; gap: 10px; overflow-x: auto; scroll-behavior: smooth;
  scrollbar-width: none; padding: 2px 2px 8px;
}
.cd-media-grid::-webkit-scrollbar{ display: none; }
.cd-media-grid .item{ flex: 0 0 175px; width: 175px; max-width: 175px; aspect-ratio: 4/3; }
.cd-strip-arrow{
  display: flex !important; visibility: visible !important; opacity: 1 !important;
  position: absolute !important; top: 50% !important; transform: translateY(-50%) !important;
  z-index: 5 !important; pointer-events: auto !important;
  width: 34px !important; height: 34px !important; min-width: 34px;
  border-radius: 50% !important; border: 0 !important; margin: 0 !important; padding: 0 !important;
  cursor: pointer; align-items: center !important; justify-content: center !important;
  background: rgba(21,24,31,.55) !important; color: #fff !important;
  font-size: 12px; line-height: 1; transition: background .15s ease;
}
.cd-strip-arrow svg{ width: 13px; height: 13px; color: #fff !important; pointer-events: none; }
.cd-strip-arrow:hover{ background: rgba(21,24,31,.78) !important; }
.cd-strip-prev{ left: -6px !important; right: auto !important; }
.cd-strip-next{ right: -6px !important; left: auto !important; }
.cd-strip-arrow.is-hidden{ display: none !important; }

.cd-media-tabs-wrap{ margin-top: 28px; }
.cd-media-tabs{ display: flex; gap: 4px; border-bottom: 1px solid var(--cd-line); margin-bottom: 16px; padding: 0; list-style: none; }
.cd-media-tab{
  border: none; background: none; padding: 10px 14px; font-size: 14px; font-weight: 700; color: var(--cd-muted);
  border-bottom: 2px solid transparent; cursor: pointer;
}
.cd-media-tab.active{ color: var(--cd-ink); border-color: var(--cd-red); }

.cd-damage-note{
  display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 13px 16px;
  background: var(--cd-amber-50); color: var(--cd-amber); border-radius: var(--cd-r-sm); font-size: 13px; font-weight: 600;
}
.cd-damage-note a{ color: var(--cd-amber); font-weight: 800; }

/* ---------------------------------------------------------------------------
   11. Contact banner / meta footer of content
   --------------------------------------------------------------------------- */
.cd-contact-banner{
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px 20px; padding: 18px 20px; background: var(--cd-ink); border-radius: var(--cd-r-md);
}
/* Generic scroll-into-view reveal (JS adds .cd-inview via IntersectionObserver
   in cd-redesign.js). Unlike .cd-value-prop's on-load animation, this only
   plays once the element is actually scrolled into the viewport — needed for
   anything far enough down the page that the on-load version would already
   have finished before the user gets there. */
.cd-reveal{ opacity: 0; transform: translateX(-18px); }
.cd-reveal.cd-inview{ animation: cdValuePropIn .5s ease forwards; }
@media (prefers-reduced-motion: reduce){
  .cd-reveal{ opacity: 1; transform: none; }
  .cd-reveal.cd-inview{ animation: none; }
}
.cd-contact-banner-text{ display: flex; align-items: flex-start; gap: 12px; min-width: 0; flex: 1 1 380px; }
.cd-contact-banner-text > svg{ width: 19px; height: 19px; color: var(--cd-red); flex: none; margin-top: 2px; }
.cd-contact-banner-text .cd-contact-title{ margin: 0 0 3px; color: #fff; font-size: 15px; font-weight: 800; letter-spacing: -0.01em; }
.cd-contact-desc{ margin: 0; color: rgba(255,255,255,.78); font-size: 13px; line-height: 1.5; }
.cd-contact-banner-actions{ display: flex; align-items: center; gap: 4px; flex: none; }
/* Flat icon treatment — no background square, just a coloured glyph.
   Padding (rather than a bigger gap) gives each icon a ~38px tap target
   on mobile without visually reintroducing a badge. */
.cd-contact-icon{
  display: flex; align-items: center; justify-content: center; flex: none;
  padding: 8px; color: #F04D5C; text-decoration: none;
  transition: color .15s ease, transform .15s ease;
}
.cd-contact-icon svg{ width: 20px; height: 20px; }
.cd-contact-icon:hover{ color: #fff; transform: translateY(-1px); }
/* Real Viber brand colour instead of the site red, lightened for visibility
   against the near-black --cd-ink card. */
.cd-contact-icon-viber{ color: #9B8CF7; font-size: 20px; }
.cd-contact-icon-viber:hover{ color: #C2B8FA; }
@media (max-width: 575.98px){
  .cd-contact-banner{ padding: 16px; }
  .cd-contact-banner-actions{ width: 100%; justify-content: flex-start; }
}
.cd-meta-foot{ display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 16px; font-size: 12.5px; color: var(--cd-muted); }
.cd-meta-foot a{ color: var(--cd-body); font-weight: 600; }
.cd-meta-foot a:hover{ color: var(--cd-red); }
/* No rule existed for these two — the icons fell back to Lucide's native 24px
   default next to 12.5px text, which read as huge. */
.cd-meta-foot svg{ width: 12px; height: 12px; vertical-align: -2px; }

/* ---------------------------------------------------------------------------
   12. Related listings
   --------------------------------------------------------------------------- */
.cd-related-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cd-related-grid .car-item.car-related{
  background: var(--cd-surface); border: 1px solid var(--cd-line); border-radius: var(--cd-r-md);
  overflow: hidden; box-shadow: var(--cd-shadow-1); transition: .15s ease; height: 100%;
}
.cd-related-grid .car-item.car-related:hover{ box-shadow: var(--cd-shadow-2); transform: translateY(-2px); }
.cd-related-grid .car-img{ aspect-ratio: 16/10; overflow: hidden; }
.cd-related-grid .car-img img{ width: 100%; height: 100%; object-fit: cover; }
.cd-related-grid .car-content{ padding: 14px 16px; }
.cd-related-grid .car-content h4{ font-size: 14.5px; font-weight: 700; }
.cd-related-grid .car-content h4 a{ color: var(--cd-ink); }
.cd-related-grid .car-list{ display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0; font-size: 12px; color: var(--cd-muted); }
.cd-related-grid .car-list li{ display: flex; align-items: center; gap: 5px; }
.cd-related-grid .car-footer{ display: flex; align-items: center; justify-content: space-between; padding-top: 8px; border-top: 1px solid var(--cd-line); }
.cd-related-grid .car-price{ font-weight: 800; color: var(--cd-ink); font-size: 14.5px; }
.cd-related-grid .badge-auction{ background: var(--cd-red-50); color: var(--cd-red); font-size: 10.5px; font-weight: 700; padding: 4px 8px; border-radius: 6px; }

@media (max-width: 991.98px){ .cd-related-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px){ .cd-related-grid{ grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------------
   13. Mobile sticky action bar
   --------------------------------------------------------------------------- */
.cd-mobile-bar{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040;
  display: none; align-items: center; gap: 10px; padding: 10px 14px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.97); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-top: 1px solid var(--cd-line); box-shadow: 0 -8px 24px rgba(15,23,32,.08);
}
.cd-mobile-icon-btn{
  width: 46px; height: 46px; flex: none; border-radius: 12px; border: 1px solid var(--cd-line-2);
  display: flex; align-items: center; justify-content: center; color: var(--cd-ink); background: var(--cd-surface);
}
.cd-mobile-icon-btn svg{ width: 18px; height: 18px; }
.cd-mobile-icon-btn.is-active{ color: var(--cd-red); border-color: var(--cd-red); }
/* The call button reads green — the universal "this dials" convention — but as a soft
   tint, not a filled button, so the (red/dark) CTA keeps the visual lead. The favorite
   star stays neutral on purpose: red is its ACTIVE (saved) state, and a red resting
   state would erase that distinction next to an already-red buy CTA. */
.cd-mobile-icon-btn--call{
  color: var(--cd-success); background: var(--cd-success-50); border-color: rgba(15,138,75,.35);
}
.cd-mobile-cta{
  flex: 1; height: 46px; border-radius: 12px; background: var(--cd-red); color: #fff;
  display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 800; font-size: 14px;
}
.cd-mobile-cta svg{ width: 15px; height: 15px; }
/* Variants: dark = auction actions, outline = neutral/dead states; the red base class
   stays buy-now only (the cards' language: red pill = купи сега, dark = наддаване). */
.cd-mobile-cta--dark{ background: var(--cd-ink); }
.cd-mobile-cta--outline{ background: var(--cd-surface); color: var(--cd-ink); border: 1px solid var(--cd-line-2); }
.cd-mobile-cta--fit{ flex: none; padding: 0 14px; font-size: 13px; }
.cd-mobile-cta--fit ~ .cd-mobile-cta{ font-size: 13px; }
.cd-mobile-cta--stacked{ flex-direction: column; gap: 1px; line-height: 1.15; }
.cd-mobile-cta--stacked .cd-mobile-cta-main{ display: flex; align-items: center; gap: 7px; }
.cd-mobile-cta-sub{ font-size: 10.5px; font-weight: 600; opacity: .85; }
.cd-mobile-note{
  flex: none; display: flex; align-items: center; gap: 6px;
  color: var(--cd-muted); font-size: 13px; font-weight: 600; padding-left: 2px;
}
.cd-mobile-note svg{ width: 15px; height: 15px; }
@media (max-width: 991.98px){
  .cd-mobile-bar{ display: flex; }
  /* the bar's anchor targets: land clear of the fixed header and of the bar itself
     (fallback for direct #hash navigation; JS scrolls block:center anyway) */
  #bid_form, #submitbuy, #cd-related{ scroll-margin-top: 96px; scroll-margin-bottom: 90px; }
}
/* pulse ring on the control a bar CTA scrolled to */
.cd-anchor-flash{ animation: cdAnchorFlash 1.6s ease-out 1; border-radius: 12px; }
@keyframes cdAnchorFlash{
  0%{ box-shadow: 0 0 0 0 rgba(226, 32, 55, .45); }
  35%{ box-shadow: 0 0 0 6px rgba(226, 32, 55, .22); }
  100%{ box-shadow: 0 0 0 10px rgba(226, 32, 55, 0); }
}

/* body padding so the new fixed mobile bar never covers the (untouched) footer content */
@media (max-width: 991.98px){
  body{ padding-bottom: 74px; }
}

#scroll-top{
  position: fixed; bottom: 90px; right: 20px; width: 42px; height: 42px; border-radius: 50%;
  background: var(--cd-ink); color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: var(--cd-shadow-2); z-index: 40; text-decoration: none;
}
@media (min-width: 992px){ #scroll-top{ bottom: 24px; } }

/* FAQ accordion (visible, backs the FAQPage schema). Native <details>/<summary> — no JS. */
.cd-faq{ display: flex; flex-direction: column; gap: 10px; max-width: 860px; }
.cd-faq-item{
  border: 1px solid var(--cd-line); border-radius: var(--cd-r-md); background: var(--cd-surface);
  box-shadow: var(--cd-shadow-1); overflow: hidden;
}
.cd-faq-q{
  display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer;
  list-style: none; padding: 15px 18px; font-size: 15px; font-weight: 700; color: var(--cd-ink);
}
.cd-faq-q::-webkit-details-marker{ display: none; }
.cd-faq-q::marker{ content: ''; }
.cd-faq-chevron{ width: 18px; height: 18px; color: var(--cd-muted); flex: none; transition: transform .2s ease; }
.cd-faq-item[open] .cd-faq-chevron{ transform: rotate(180deg); }
.cd-faq-a{ padding: 0 18px 15px; font-size: 14px; color: var(--cd-body); line-height: 1.55; }

/* Favorite star fills when active — the AJAX toggle (_favorite) just flips .is-active; CSS does
   the visual. (The active background/colour on cards/pills is already handled by their own
   .is-active rules; this only adds the filled star.) */
.cd-fav-btn.is-active svg{ fill: currentColor; }

/* ── Card lift on the car page ──────────────────────────────────────────────────
   These blocks are ALREADY white cards with a hairline border, but they carried
   --cd-shadow-1 (0 1px 2px at 5%) — effectively invisible. That's why the car page
   read flat while the right-hand .cd-deal-card (on the stronger --cd-shadow-2) looked
   "finished". Give them a real but soft lift, sized for small/medium cards. Buttons and
   controls deliberately keep --cd-shadow-1. Listed last so it out-orders the per-card
   rules above at equal specificity. */
.cd-spec-card,
.cd-highlight-pill,
.cd-tire-card,
.cd-condition-chip,
.cd-cond-card,
.cd-faq-item,
.cd-stat-chip,
.cd-related-grid .car-item.car-related{
  box-shadow: 0 1px 2px rgba(15,23,32,.04), 0 6px 16px -6px rgba(15,23,32,.10);
}