/* =============================================================================
   CD-SEARCH — visual redesign of /search (Results_v2, search_v2/* blade views)
   Reuses the design tokens + base reset defined in cd-redesign.css
   (--cd-red, --cd-ink, --cd-surface, --cd-r-*, --cd-shadow-*). Loaded together
   with cd-redesign.css; the page wraps its content in the same ".cd-redesign"
   scope so tokens/resets apply identically to the car-details page.
   Visual layer only — no filter logic, wire:model bindings, or routes changed.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   1. Page shell — .container/.bg inherit the site's shared rules (light.css)
      below 1400px, so search stays pixel-identical to car-page (and every
      other page) on phones, tablets, and normal 1200–1399px desktops —
      zero divergence from the fixed-width header/footer there. Only past
      1400px (large monitors, where the 1200px cap starts wasting real
      screen space) does search claim extra width; deliberate, scoped
      exception, agreed after weighing it against header/footer alignment.
   --------------------------------------------------------------------------- */
@media (min-width: 1400px){
  .cd-search-page .container{ max-width: 1400px; }
}

/* ---------------------------------------------------------------------------
   2. Filter panel (left column) — one cohesive card, sections divided by
      hairlines so it reads as a single surface, not stacked boxes.
   --------------------------------------------------------------------------- */
.cd-search-panel{
  background: var(--cd-surface);
  border-radius: var(--cd-r-lg);
  /* the panel is the "tool" — soft outline + more elevation than the flat cards */
  box-shadow: 0 0 0 1px rgba(15,23,32,.04), 0 3px 6px rgba(15,23,32,.06), 0 20px 42px -12px rgba(15,23,32,.18);
  overflow: hidden;
  padding: 0 !important;   /* kill the legacy .car-sidebar{padding:10px} that insets everything */
}

.cd-search-panel-head{
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px;
}
.cd-search-panel-title{
  font-size: 16px; font-weight: 800; color: var(--cd-ink);
  display: flex; align-items: center; gap: 8px; letter-spacing: -0.01em;
}
.cd-search-panel-title svg{ color: var(--cd-red); font-size: 15px; }
.cd-search-clear-btn{
  width: 32px; height: 32px; border-radius: 50%; border: none; background: transparent;
  color: var(--cd-muted); display: flex; align-items: center; justify-content: center;
  font-size: 13.5px; cursor: pointer; transition: .15s ease; flex: none;
}
.cd-search-clear-btn:hover{ background: var(--cd-red-50); color: var(--cd-red); }
.cd-search-panel .cd-search-clear-btn svg{ width: 19px; height: 19px; }

.cd-search-widget{ padding: 18px 20px; border-bottom: 1px solid var(--cd-line); }
.cd-search-panel > .cd-search-widget:last-child{ border-bottom: none; }
.cd-search-widget.cd-search-widget-flush{ border-bottom: none; padding-bottom: 12px; }
.cd-search-widget.cd-search-widget-flush + .cd-search-widget{ padding-top: 12px; }
/* Closes the "what am I looking for" block (region + make/model) and opens the refinements below.
   Every other section sits 24px apart, so this wider gap is the panel's hierarchy signal —
   deliberately air rather than a rule or a shadow. 24 + the next section's 12 = 36px.
   Must stay after the -flush rule above: same specificity, so order decides. */
.cd-search-widget.cd-group-end{ padding-bottom: 24px; }
/* The panel's one remaining rule marks a change of *kind* (filters → checkbox extras), so it keeps
   the rule but gives up the extra air: 36px is reserved for the priority break above, and two
   equal gaps would have made the lesser division the louder one (it has a rule on top). Each
   division now gets its own signal — air for priority, a rule for kind. 12 + 12, rule centred. */
.cd-search-widget.cd-group-rule{ padding-bottom: 12px; }
.cd-search-widget.cd-group-rule + .cd-search-widget{ padding-top: 12px; }

.cd-search-widget > p{
  display: flex; align-items: center; gap: 8px; margin: 0 0 8px;
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: var(--cd-ink);
}
/* Section-heading icons restored (owner's call, reversed 2026-07-19) — sit left
   of the label since the <svg> is the first flex child in the markup. Same
   per-glyph balancing as .cd-result-specs on the cards (bulkier road/engine/
   gearbox glyphs read bigger than they measure, so they get sized down
   relative to thinner glyphs like the calendar) — just shifted up two px
   across the board (17/19/21 vs the card's 15/17/19) since these are section
   headings, not inline stats. */
.cd-search-widget > p svg{
  color: var(--cd-ink); width: 19px; height: 19px; flex: none; stroke-width: 1.75;
}
.cd-search-widget > p svg.cd-icon-cal{ width: 17px; height: 17px; }
.cd-search-widget > p svg.cd-icon-sm{ width: 17px; height: 17px; }
.cd-search-widget > p svg.cd-icon-md{ width: 18px; height: 18px; }
.cd-search-widget > p svg.cd-icon-price{ width: 19px; height: 19px; }
.cd-search-widget > p svg.cd-icon-lg{ width: 20px; height: 20px; }
.cd-search-widget > p svg.cd-icon-gearbox,
.cd-search-widget > p svg.cd-icon-engine{ width: 21px; height: 21px; }
/* Sparsest glyph of the set (two bare diagonal strokes) — needs a bigger
   bump than gearbox/engine to read at the same visual weight. */
.cd-search-widget > p svg.cd-icon-road{ width: 23px; height: 23px; }

/* Lucide icons across the search chrome. Lucide SVGs ship with no intrinsic size,
   so default every one to a 1em box (matching the Font Awesome glyphs they replace)
   with a slightly lighter stroke to sit with the result-card icons; the per-context
   rules below bump the few that need a specific size. The make/model popup is
   re-parented to <body>, so .cd-mmp-overlay is listed explicitly. */
.cd-search-panel svg,
.cd-mmp-overlay svg,
.cd-active-filters svg,
.cd-save-fab svg{
  width: 1em; height: 1em; flex: none; stroke-width: 2;
}

/* text inputs (search by id / word) */
.cd-search-widget .form-group{ position: relative; }
.cd-search-widget .form-control{
  width: 100%; border: 1.5px solid var(--cd-line-2); border-radius: var(--cd-r-sm);
  padding: 10px 40px 10px 14px; font-size: 14px; color: var(--cd-ink); background: var(--cd-surface);
  box-shadow: none; transition: border-color .15s ease, box-shadow .15s ease;
}
.cd-search-widget .form-control:focus{
  border-color: var(--cd-red); box-shadow: 0 0 0 3px var(--cd-red-50); outline: none;
}
.cd-search-widget .form-group button{
  position: absolute; right: 3px; top: 3px; bottom: 3px; width: 34px; border: none;
  background: transparent; color: var(--cd-muted); border-radius: calc(var(--cd-r-sm) - 2px);
  display: flex; align-items: center; justify-content: center; transition: .15s ease;
}
.cd-search-widget .form-group button:hover{ color: var(--cd-red); background: var(--cd-red-50); }

/* ---------------------------------------------------------------------------
   3. Region selector — plain flag + name, no card chrome
   --------------------------------------------------------------------------- */
/* One row: regions are a top-level filter, so all four read at a glance. Fits because the
   widest label ("Всички") is 44px and a 4-col cell here is ~53px — the text is the binding
   constraint, not the flag. Falls back to 2x2 if the panel ever gets narrower than that. */
.cd-search-widget .cd-region-list{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.cd-region-item{ position: relative; }
.cd-region-input{
  position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none;
}
.cd-region-label{
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 6px 2px; border-radius: var(--cd-r-sm);
  font-size: 12px; font-weight: 700; color: var(--cd-muted); cursor: pointer; text-align: center;
  transition: color .16s ease;
}
/* Active underline spans the whole chip and sits on its bottom edge, so the four chips read as a
   tab bar rather than a stray underlined word. It hangs off the label, whose ::after resolves
   against .cd-region-item — the positioned ancestor the label fills. */
.cd-region-label::after{
  content: ''; position: absolute; left: 0; right: 0; bottom: -3px;
  height: 2px; border-radius: 1px; background: var(--cd-red);
  opacity: 0; transform: scaleX(.4);
  transition: opacity .16s ease, transform .16s ease;
}
/* Active state is driven by both: .is-active (server-rendered, so the right chip is styled on
   first paint — the inputs ship without a `checked` attribute) and :checked (instant feedback on
   click, before the Livewire round-trip updates the class). See filters/country.blade.php. */
.cd-region-item.is-active .cd-region-label::after,
.cd-region-input:checked + .cd-region-label::after{ opacity: 1; transform: scaleX(1); }
.cd-region-label:hover{ color: var(--cd-red); }
.cd-region-item.is-active .cd-region-label,
.cd-region-input:checked + .cd-region-label{ color: var(--cd-red); }
.cd-region-input:focus-visible + .cd-region-label{ outline: 2px solid var(--cd-red); outline-offset: 2px; }
/* Flags stay at full colour in every state. Fading them to mark "not selected" was tried and
   removed: opacity has no useful window here — strong enough to notice reads as "unavailable",
   weak enough to avoid that does nothing. Dimming is reserved for .is-disabled (a region we
   genuinely can't search yet); the red name + underline carry selection, exactly like
   .cd-search-tab.active above, which dims nothing either. */
.cd-region-flag{
  width: 44px; height: 33px; border-radius: 5px; object-fit: cover; flex: none;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
}
.cd-region-icon{
  width: 44px; height: 33px; display: flex; align-items: center; justify-content: center;
  font-size: 28px; color: var(--cd-muted); flex: none;
}
.cd-region-item.is-active .cd-region-icon,
.cd-region-input:checked + .cd-region-label .cd-region-icon{ color: var(--cd-red); }
.cd-region-name{ line-height: 1.15; }

.cd-region-item.is-disabled{ cursor: not-allowed; }
.cd-region-item.is-disabled .cd-region-label{ opacity: .55; cursor: not-allowed; }
.cd-region-item.is-disabled .cd-region-label:hover{ color: var(--cd-muted); }

/* ---------------------------------------------------------------------------
   3b. Toggle-button groups (Скоростна кутия / Двигател). Real <button
   wire:click> elements (not wire:model-bound checkbox/radio inputs) —
   Livewire's morphdom re-render doesn't reliably reflect the native
   `checked` DOM property on re-render, so the active state is driven by
   an explicit .is-active class computed server-side each render instead.
   --------------------------------------------------------------------------- */
.cd-toggle-list{ display: flex; flex-wrap: wrap; gap: 6px; }
/* legacy theme forces flex-direction:column on .car-sidebar ul — keep it a row, make
   the buttons equal-width (4 per row) with the incomplete last row centered */
.cd-search-panel .cd-toggle-list{ flex-direction: row !important; justify-content: flex-start; }
.cd-toggle-item{ position: relative; flex: 0 0 calc(25% - 4.5px); min-width: 0; display: flex; }
.cd-toggle-label{
  width: 100%; display: inline-flex; align-items: center; justify-content: center;
  padding: 7px 3px; border-radius: 999px; overflow: hidden;
  background: var(--cd-surface); border: 1.5px solid var(--cd-line-2); font-size: 12px; font-weight: 600;
  color: var(--cd-body); cursor: pointer; white-space: nowrap; transition: .15s ease;
}
.cd-toggle-label:hover{ border-color: var(--cd-red); color: var(--cd-red); }
.cd-toggle-label.is-active{
  background: var(--cd-red); border-color: var(--cd-red); color: #fff;
}

/* Segmented control (Скоростна кутия) — one bordered row, equal-width
   segments, no "Всички" cell: nothing active = no filter. */
.cd-segmented{
  display: flex; border: 1.5px solid var(--cd-line-2); border-radius: var(--cd-r-sm); overflow: hidden;
}
.cd-segmented-btn{
  flex: 1 1 0; min-width: 0; padding: 10px 14px; background: var(--cd-surface); border: none;
  border-right: 1.5px solid var(--cd-line-2); font-size: 13.5px; font-weight: 600; color: var(--cd-body);
  cursor: pointer; transition: .15s ease; text-align: center;
}
.cd-segmented-btn:last-child{ border-right: none; }
/* Match the container's rounded corners on the end buttons themselves —
   without this, the hover box-shadow (which follows the button's own
   border-radius, not the parent's clip) draws square corners that the
   parent's overflow:hidden then cuts off at an angle instead of a curve. */
.cd-segmented-btn:first-child{ border-radius: var(--cd-r-sm) 0 0 var(--cd-r-sm); }
.cd-segmented-btn:last-child{ border-radius: 0 var(--cd-r-sm) var(--cd-r-sm) 0; }
.cd-segmented-btn:hover{ background: var(--cd-surface-2); color: var(--cd-red); box-shadow: inset 0 0 0 1.5px var(--cd-red); }
.cd-segmented-btn.is-active{ background: var(--cd-red); color: #fff; }

/* Small к.с./kW switch inline in the "Мощност" heading (.cd-search-widget > p
   forces uppercase/bold/letter-spacing for the label — reset all three so
   "kW" renders as authored, not stretched to match the heading). */
.cd-unit-toggle{
  display: inline-flex; margin-left: auto; border: 1.5px solid var(--cd-line-2);
  border-radius: 999px; overflow: hidden; text-transform: none; letter-spacing: normal;
}
.cd-unit-toggle-btn{
  padding: 3px 9px; background: var(--cd-surface); border: none;
  font-size: 11px; font-weight: 700; color: var(--cd-body); cursor: pointer; transition: .15s ease;
}
.cd-unit-toggle-btn:hover{ color: var(--cd-red); }
.cd-unit-toggle-btn.is-active{ background: var(--cd-red); color: #fff; }

/* Fuel "Покажи още" — plain text + icon, no pill shape at all (same idiom
   as .cd-section-link "Виж повече"-style links elsewhere on the site). */
.cd-fuel-toggle-btn{ padding: 0; background: transparent; box-shadow: none; color: var(--cd-body); }
.cd-fuel-toggle-btn:hover{ background: transparent; box-shadow: none; color: var(--cd-ink); text-decoration: underline; }

/* Colour swatches (replaces the dropdown) — premium look: clean circles, 5 per row,
   no labels (name on hover via title). Selected = fine ring with a gap. Silver/Gold
   carry a metallic gradient (set inline from the bucket); "Друг" is a palette glyph. */
.cd-color-grid{ display: grid; grid-template-columns: repeat(8, 1fr); gap: 12px 5px; justify-items: center; }
.cd-color-swatch{ background: none; border: none; padding: 0; cursor: pointer; line-height: 0; border-radius: 50%; }
.cd-color-dot{
  width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid rgba(15,23,32,.14);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .15s ease, box-shadow .15s ease;
}
.cd-color-dot--other{ background: var(--cd-surface-2); border-color: var(--cd-line-2); color: var(--cd-muted); font-size: 14px; }
.cd-color-swatch:hover .cd-color-dot{ transform: scale(1.1); }
.cd-color-swatch:focus-visible{ outline: none; }
.cd-color-swatch:focus-visible .cd-color-dot{ box-shadow: 0 0 0 3px var(--cd-surface), 0 0 0 4px var(--cd-red); }
/* fine outer ring, offset from the colour by a white gap */
.cd-color-swatch.is-active .cd-color-dot{ box-shadow: 0 0 0 3px var(--cd-surface), 0 0 0 4px var(--cd-red); border-color: transparent; }
.cd-fuel-toggle-btn:hover i{ text-decoration: none; }

/* ---------------------------------------------------------------------------
   3c. Combined Марка+Модел picker (filters/make-model.blade.php). Replaces the
   two VirtualSelect dropdowns with one trigger field that opens a popup
   (desktop) / bottom sheet (mobile). The whole selection is staged client-side
   and committed to Livewire in a single round-trip.
   --------------------------------------------------------------------------- */
.cd-mmp-trigger{
  width: 100%; display: flex; align-items: center; gap: 10px; text-align: left;
  min-height: 42px; padding: 6px 12px; background: var(--cd-surface);
  border: 1.5px solid rgba(225, 29, 42, .4); border-radius: var(--cd-r-sm);
  cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease;
}
.cd-mmp-trigger:hover{ border-color: var(--cd-red); }
.cd-mmp-trigger:focus-visible{ outline: none; border-color: var(--cd-red); box-shadow: 0 0 0 3px var(--cd-red-50); }
.cd-mmp-trigger-main{ flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
/* nowrap+ellipsis like -make/-sub below: the placeholder clears its 159px by ~2px, so without
   this a slightly wider font render wraps it to two lines and silently inflates the trigger from
   42px (matching every other control) to 57px. Truncating is the safe failure, not growing. */
.cd-mmp-trigger-placeholder{ font-size: 14px; font-weight: 500; color: var(--cd-body);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-mmp-trigger-make{ font-size: 14px; font-weight: 700; color: var(--cd-ink); line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-mmp-trigger-sub{ font-size: 12px; font-weight: 400; color: var(--cd-muted); line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Size + colour carry this, not weight: `.cd-search-panel svg{ stroke-width: 2 }` deliberately
   keeps every icon in the panel on one stroke weight, and it outranks a lone class anyway. */
/* The caret + the "Марка и модел" heading icon (.cd-icon-lg) are otherwise sized only by
   ancestor rules (.cd-search-panel svg / .cd-search-widget > p svg) that exist on /search
   but NOT around the homepage search box, where the picker is now also used — so give them
   an explicit size of their own, robust to wherever the picker is embedded. */
.cd-mmp-trigger-caret{ flex: none; font-size: 15px; color: var(--cd-red); width: 15px; height: 15px; }
svg.cd-icon-lg{ width: 20px; height: 20px; }
/* Solid red badge (not just a red outline glyph) so the "+" reads as a filled
   action mark, not a thin accent — owner's call. Fixed circle + centred plain
   "plus" glyph (not circle-plus, which would draw a second ring inside this
   one). No margin-right: .cd-mmp-trigger already sets `gap: 10px`. */
.cd-mmp-trigger-lead{
  flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--cd-red);
  display: flex; align-items: center; justify-content: center;
}
.cd-mmp-trigger-lead svg{ width: 13px; height: 13px; color: #fff; stroke-width: 3; }

/* ── Split "two boxes" trigger (homepage) — [Марка] [Модел] that both open the picker.
   All icons get an EXPLICIT size (this markup lives outside .cd-search-panel). ── */
.cd-mmp-split{ display: flex; gap: 8px; }
/* Марка is a short single word; Модел holds the chips — give it ~2× the width so a
   couple of model names stay fully visible before the fade. (Child combinator so these
   out-rank the generic `.cd-mmp-split-box{ flex:1 }` rule that appears later.) */
.cd-mmp-split > .cd-mmp-split-make{ flex: 1.4 1 0; }
.cd-mmp-split > .cd-mmp-split-model{ flex: 1.8 1 0; }
/* Identical to the "Година от" box: 36px tall, 6px radius, 1px #ddd border, Montserrat
   14px/400, #333 text — same weight, same border (not lighter). */
.cd-mmp-split-box{
  flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 6px;
  background: #fff; border: 1px solid #ddd; border-radius: 6px;
  padding: 0 10px; min-height: 36px; cursor: pointer; font-size: 14px; color: #333;
}
.cd-mmp-split-box:hover{ border-color: #c4c4c4; }
.cd-mmp-split-box:focus-visible{ outline: none; border-color: var(--cd-red); box-shadow: 0 0 0 3px var(--cd-red-50); }
.cd-mmp-split-val{ flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: #333; }
.cd-mmp-split-val.is-placeholder{ font-weight: 500; color: #555; }
/* Same slightly-bolder weight on the neighbouring "Година от" box so all three read
   equally "premium" (owner's call). Scoped to the homepage search form only. */
.short-search-form .vscomp-toggle-button .vscomp-value{ font-weight: 500; }
/* Match the "Година от" dropdown arrow exactly — a small red ▾ built from a rotated
   square's bottom+right borders (copied from VirtualSelect's .vscomp-arrow::after). */
.cd-mmp-split-caret{ flex: none; position: relative; width: 16px; height: 16px; }
.cd-mmp-split-caret::after{
  content: ""; position: absolute; top: 50%; left: 50%; width: 7px; height: 7px;
  margin: -6px 0 0 -4px; transform: rotate(45deg); border: 1px solid transparent;
  border-bottom-color: var(--cd-red); border-right-color: var(--cd-red);
}
.cd-mmp-split-clear{
  flex: none; display: flex; align-items: center; justify-content: center; padding: 2px;
  border: none; background: none; color: var(--cd-muted); cursor: pointer; border-radius: 4px;
}
.cd-mmp-split-clear:hover{ color: var(--cd-red); background: var(--cd-red-50); }
.cd-mmp-split-clear svg{ width: 16px; height: 16px; }
/* selected model chips inside the Модел box */
/* One line only — never let chips wrap downward and grow the box out of line with its
   neighbours. Overflow is clipped + faded (like .cd-result-equip-list); the full set is
   always editable by clicking the box open. */
.cd-mmp-split-chips{
  flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: nowrap; align-items: center; gap: 5px;
  overflow: hidden; -webkit-mask-image: linear-gradient(to right, #000 88%, transparent);
  mask-image: linear-gradient(to right, #000 88%, transparent);
}
.cd-mmp-split-chip{ flex: none; }
.cd-mmp-split-chip{
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%;
  background: var(--cd-red-50); color: var(--cd-red-ink, #791f1f); border-radius: 999px;
  padding: 2px 4px 2px 9px; font-size: 12.5px; font-weight: 500; line-height: 1.4;
}
.cd-mmp-split-x{
  flex: none; display: flex; align-items: center; justify-content: center; padding: 1px;
  border: none; background: none; color: inherit; cursor: pointer; border-radius: 50%; opacity: .7;
}
.cd-mmp-split-x:hover{ opacity: 1; background: rgba(0,0,0,.08); }
.cd-mmp-split-x svg{ width: 13px; height: 13px; }
@media (max-width: 575px){ .cd-mmp-split{ flex-direction: column; } }

/* Homepage region row. Every flag a fixed 26×17 (height:auto used to shrink Korea).
   DESKTOP keeps the normal radio circles, options left-aligned (as they were). MOBILE
   (≤575px), where 4 options + circles won't fit one line, hides the circle and marks the
   chosen region with red + underline instead — a compact segmented look. */
.short-search-form .car-widget-region ul{ list-style: none; margin: 0; padding: 0; }
.short-search-form .car-widget-region li{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0; }
.short-search-form .car-widget-region .form-check{ display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 0; min-height: 0; }
.short-search-form .car-widget-region .form-check-input{ margin: 0; float: none; flex: none; }
.short-search-form .car-widget-region .form-check-label{ display: inline-flex; align-items: center; gap: 6px; margin: 0; cursor: pointer; }
/* "3D glossy" flags without new assets: round the flat PNG, lift it with a shadow +
   inset edge, and lay a shine gradient over it — reads as a small glossy button. */
.short-search-form .country-flag{
  position: relative; display: inline-flex; flex: none; border-radius: 4px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.28), inset 0 0 0 1px rgba(0,0,0,.15);
}
.short-search-form .country-flag img{
  flex: none; width: 26px; height: 18px; object-fit: cover; border: none; border-radius: 0;
  box-shadow: none; display: block;
}
.short-search-form .country-flag::after{
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 4px;
  background: linear-gradient(to bottom, rgba(255,255,255,.5) 0%, rgba(255,255,255,.12) 45%,
              rgba(255,255,255,0) 52%, rgba(0,0,0,.16) 100%);
}
@media (max-width: 575px){
  .short-search-form .car-widget-region li{ flex-wrap: nowrap; justify-content: space-between; gap: 4px 8px; }
  .short-search-form .car-widget-region .form-check{ white-space: nowrap; }
  .short-search-form .car-widget-region .form-check-input{ position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
  .short-search-form .car-widget-region .form-check-label{ font-weight: 500; }
  .short-search-form .car-widget-region .form-check-input:checked + .form-check-label{ color: var(--cd-red); text-decoration: underline; text-underline-offset: 3px; }
}

/* overlay + panel */
.cd-mmp-overlay{
  position: fixed; inset: 0; z-index: 2000; background: rgba(15,23,32,.3);
  -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  animation: cd-mmp-fade .15s ease;
}
.cd-mmp-overlay[hidden]{ display: none; }
@keyframes cd-mmp-fade{ from{ opacity: 0; } to{ opacity: 1; } }
html.cd-mmp-open, body.cd-mmp-open{ overflow: hidden !important; }

.cd-mmp-panel{
  width: 100%; max-width: 460px; max-height: 82vh; background: var(--cd-surface);
  border-radius: var(--cd-r-lg); box-shadow: var(--cd-shadow-2);
  display: flex; flex-direction: column; overflow: hidden;
  animation: cd-mmp-pop .18s cubic-bezier(.2,.8,.25,1);
}
@keyframes cd-mmp-pop{ from{ opacity: 0; transform: translateY(8px) scale(.98); } to{ opacity: 1; transform: none; } }

.cd-mmp-head{
  display: flex; align-items: center; gap: 8px; padding: 14px 16px;
  border-bottom: 1px solid var(--cd-line); flex: none;
}
.cd-mmp-title{ flex: 1 1 auto; min-width: 0; font-size: 15px; font-weight: 800; color: var(--cd-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-mmp-back, .cd-mmp-close{
  width: 32px; height: 32px; border-radius: 50%; border: none; background: transparent;
  color: var(--cd-muted); display: flex; align-items: center; justify-content: center;
  font-size: 15px; cursor: pointer; transition: .15s ease; flex: none;
}
.cd-mmp-back:hover, .cd-mmp-close:hover{ background: var(--cd-surface-2); color: var(--cd-ink); }
.cd-mmp-back[hidden]{ display: none; }

.cd-mmp-step{ display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.cd-mmp-step[hidden]{ display: none; }
.cd-mmp-scroll{ flex: 1 1 auto; overflow-y: auto; padding: 8px 16px 16px; }

/* search box */
.cd-mmp-search{ position: relative; padding: 14px 16px 6px; flex: none; }
.cd-mmp-search svg{ position: absolute; left: 28px; top: 50%; transform: translateY(-50%); color: var(--cd-muted); font-size: 13px; }
.cd-mmp-search input{
  width: 100%; border: 1.5px solid var(--cd-line-2); border-radius: var(--cd-r-sm);
  padding: 10px 12px 10px 36px; font-size: 14px; color: var(--cd-ink); background: var(--cd-surface);
}
.cd-mmp-search input:focus{ outline: none; border-color: var(--cd-red); box-shadow: 0 0 0 3px var(--cd-red-50); }
.cd-mmp-search input::placeholder{ color: var(--cd-muted); }

.cd-mmp-section-label{ font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  color: var(--cd-muted); margin: 10px 4px 8px; }

/* popular grid — 12 logo-only square tiles (6 × 2), name shown only as tooltip */
.cd-mmp-pop-grid{ display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; }
.cd-mmp-pop-tile{
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1 / 1; padding: 8px; background: var(--cd-surface-2);
  border: 1.5px solid transparent; border-radius: var(--cd-r-md); cursor: pointer;
  transition: .15s ease;
}
.cd-mmp-pop-tile:hover{ border-color: var(--cd-red); background: var(--cd-red-50); }

/* Brand marks — a clean transparent colored emblem <img> (vehiclespecs/brand-logos,
   MIT; marks remain the makers' trademarks) when the make has one, else a letter
   monogram. Emblems sit bare (no chip/box) like the reference design. To force a
   monochrome look, uncomment the filter rule. */
.cd-mmp-mark{ flex: none; object-fit: contain; }
/* .cd-mmp-mark{ filter: grayscale(1); opacity: .9; } */
.cd-mmp-mark-pop{ width: 40px; height: 34px; }
.cd-mmp-mark-make{ width: 26px; height: 26px; }
.cd-mmp-mono{
  flex: none; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--cd-surface-3); color: var(--cd-muted); font-weight: 800; line-height: 1;
}
.cd-mmp-mono.cd-mmp-mark-pop{ width: 40px; height: 34px; border-radius: 8px; font-size: 15px; }
.cd-mmp-mono.cd-mmp-mark-make{ width: 26px; height: 26px; font-size: 12px; }

/* make rows */
.cd-mmp-make-row{
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 11px 10px;
  background: transparent; border: none; border-radius: 8px; cursor: pointer;
  text-align: left; transition: background .12s ease;
}
.cd-mmp-make-row:hover{ background: var(--cd-surface-2); }
.cd-mmp-make-name{ flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 600; color: var(--cd-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-mmp-make-count{ flex: none; font-size: 11px; font-weight: 700; color: var(--cd-muted);
  background: var(--cd-surface-3); border-radius: 999px; padding: 2px 8px; }
.cd-mmp-make-caret{ flex: none; font-size: 15px; color: var(--cd-muted); opacity: 0; transition: opacity .12s ease; }
.cd-mmp-make-row:hover .cd-mmp-make-caret{ opacity: 1; }

.cd-mmp-empty{ padding: 24px 8px; text-align: center; font-size: 13px; color: var(--cd-muted); }
.cd-mmp-empty[hidden]{ display: none; }

/* "всички модели на X" */
.cd-mmp-all-btn{
  margin: 14px 16px 4px; padding: 12px 16px; flex: none;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--cd-red); color: #fff; border: none; border-radius: var(--cd-r-sm);
  font-size: 14px; font-weight: 700; cursor: pointer; transition: background .15s ease;
}
.cd-mmp-all-btn:hover{ background: var(--cd-red-dark); }

/* model rows (multi-select, staged) */
.cd-mmp-model{
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px;
  background: transparent; border: none; border-radius: 8px; cursor: pointer;
  text-align: left; transition: background .12s ease;
}
.cd-mmp-model:hover{ background: var(--cd-surface-2); }
.cd-mmp-check{
  flex: none; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--cd-line-2);
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 11px;
  transition: .12s ease;
}
.cd-mmp-check svg{ opacity: 0; transform: scale(.6); transition: .12s ease; width: 13px; height: 13px; }
.cd-mmp-model.is-checked .cd-mmp-check{ background: var(--cd-red); border-color: var(--cd-red); }
.cd-mmp-model.is-checked .cd-mmp-check svg{ opacity: 1; transform: none; }
.cd-mmp-model-name{ flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 600; color: var(--cd-ink); }
.cd-mmp-model.is-checked .cd-mmp-model-name{ color: var(--cd-red-dark); }
/* ad count shown next to a model */
.cd-mmp-model-count{ flex: none; font-size: 11px; font-weight: 700; color: var(--cd-muted);
  background: var(--cd-surface-3); border-radius: 999px; padding: 2px 8px; }

/* model matches inside the make search (clicking one commits make+model) */
.cd-mmp-model-results:not(:empty){ margin-top: 4px; }
.cd-mmp-model-result{
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 9px 10px;
  background: transparent; border: none; border-radius: 8px; cursor: pointer;
  text-align: left; transition: background .12s ease;
}
.cd-mmp-model-result:hover{ background: var(--cd-surface-2); }
.cd-mmp-mr-text{ flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.cd-mmp-mr-model{ font-size: 14px; font-weight: 600; color: var(--cd-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-mmp-mr-make{ font-size: 11.5px; color: var(--cd-muted); }

.cd-mmp-foot{ flex: none; padding: 12px 16px; border-top: 1px solid var(--cd-line); }
.cd-mmp-foot .cd-mmp-apply{ width: 100%; margin: 0; }

/* mobile: bottom sheet */
@media (max-width: 575.98px){
  .cd-mmp-overlay{ align-items: flex-end; padding: 0; }
  .cd-mmp-panel{
    max-width: none; max-height: 88vh; border-radius: var(--cd-r-lg) var(--cd-r-lg) 0 0;
    animation: cd-mmp-sheet .22s cubic-bezier(.2,.8,.25,1);
  }
  @keyframes cd-mmp-sheet{ from{ transform: translateY(100%); } to{ transform: none; } }
}

/* ---------------------------------------------------------------------------
   4. VirtualSelect dropdown theming (Марка/Модел/Двигател/Скоростна кутия/
      Година/Пробег/Цвят). Skin only — the library's own JS/behaviour is
      untouched.
   --------------------------------------------------------------------------- */
/* light.css (legacy theme) forces .vscomp-wrapper{ font-family: var(--body-font)
   !important } = Montserrat — its Cyrillic "от"/"до" reads like "om"/"go" at
   this size. Beat it with an explicit stack (not "inherit": the old rule sits
   on this exact element, so descendants inheriting from it just get Montserrat
   right back) at higher specificity, still !important. */
.cd-search-widget .vscomp-wrapper{
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  width: 100%;
}
.cd-search-widget .vscomp-toggle-button{
  border: 1.5px solid var(--cd-line-2) !important; border-radius: var(--cd-r-sm) !important;
  min-height: 42px !important; padding: 4px 12px !important; background: var(--cd-surface) !important;
  box-shadow: none !important; transition: border-color .15s ease, box-shadow .15s ease;
}
.cd-search-widget .vscomp-wrapper.focused .vscomp-toggle-button{
  border-color: var(--cd-red) !important; box-shadow: 0 0 0 3px var(--cd-red-50) !important;
}
.cd-search-widget .vscomp-value{ font-size: 14px; font-weight: 400; color: var(--cd-muted); }
.cd-search-widget .vscomp-wrapper:not(.has-value) .vscomp-value{ opacity: 1; }
.cd-search-widget .vscomp-arrow::after{ border-right-color: var(--cd-muted) !important; border-bottom-color: var(--cd-muted) !important; }
.cd-search-widget .form-control::placeholder{ font-size: 14px; font-weight: 400; color: var(--cd-muted); opacity: 1; }
.cd-search-widget .vscomp-value-tag{
  background: var(--cd-red-50) !important; color: var(--cd-red-dark) !important;
  border-radius: 6px !important; border: none !important; font-size: 12.5px !important;
}
.cd-search-widget .vscomp-dropbox{
  border-radius: var(--cd-r-md) !important; box-shadow: var(--cd-shadow-2) !important;
  border: 1px solid var(--cd-line) !important; overflow: hidden; margin-top: 6px !important;
}
.cd-search-widget .vscomp-search-container{ padding: 8px !important; }
.cd-search-widget .vscomp-search-input{
  border-radius: calc(var(--cd-r-sm) - 2px) !important; border: 1px solid var(--cd-line-2) !important;
  font-size: 13.5px !important;
}
.cd-search-widget .vscomp-option{ font-size: 13.5px !important; padding: 9px 14px !important; }
.cd-search-widget .vscomp-option.focused,
.cd-search-widget .vscomp-option:hover{ background: var(--cd-red-50) !important; }
.cd-search-widget .vscomp-option.selected{
  background: var(--cd-surface-3) !important; color: var(--cd-red) !important; font-weight: 700;
}

/* ---------------------------------------------------------------------------
   5. Range rows (year / price / power) — one bordered segmented-style box,
      matching Скоростна кутия, with an internal divider instead of separate
      bordered inputs + a "—" dash. Corners are rounded on the first/last
      cell directly (not via overflow:hidden on the row) — Year's cells are
      VirtualSelect dropdowns, and clipping their wrapper hides the popup.
   --------------------------------------------------------------------------- */
.cd-range-row{
  display: flex; align-items: stretch; border: 1.5px solid var(--cd-line-2); border-radius: var(--cd-r-sm);
}
.cd-range-row .form-control{
  flex: 1 1 0; min-width: 0; border: none; border-radius: 0; border-right: 1.5px solid var(--cd-line-2);
}
.cd-range-row .form-control:last-child{ border-right: none; }
.cd-range-row .form-control:focus{ box-shadow: none; }
.cd-range-row .cd-range-select{ flex: 1 1 0; min-width: 0; border-right: 1.5px solid var(--cd-line-2); }
.cd-range-row .cd-range-select:last-child{ border-right: none; }
.cd-range-row .cd-range-select .vscomp-toggle-button{ border: none !important; border-radius: 0 !important; }
.cd-range-row > *:first-child,
.cd-range-row > *:first-child .vscomp-toggle-button{
  border-top-left-radius: var(--cd-r-sm) !important; border-bottom-left-radius: var(--cd-r-sm) !important;
}
.cd-range-row > *:last-child,
.cd-range-row > *:last-child .vscomp-toggle-button{
  border-top-right-radius: var(--cd-r-sm) !important; border-bottom-right-radius: var(--cd-r-sm) !important;
}
.cd-range-group{ display: flex; flex-direction: column; gap: 10px; }
/* Trailing currency icon in the price inputs — sits at the right edge, after
   the от/до label, so от/до still starts flush left like every other range
   row (Година, Пробег). Wrapper owns the shared-border divider (not the
   input) because :last-child inside a per-input wrapper always matches —
   nesting would otherwise erase the от/до divider on both sides instead of
   just the outer edge. */
.cd-range-input-icon{
  position: relative; flex: 1 1 0; min-width: 0; display: flex; align-items: stretch;
  overflow: hidden; border-right: 1.5px solid var(--cd-line-2);
}
.cd-range-input-icon:last-child{ border-right: none; }
.cd-range-row .cd-range-input-icon .form-control{ border-right: none; padding-right: 30px; }
.cd-range-input-icon svg{
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; color: var(--cd-muted); pointer-events: none;
}
.cd-range-group + .cd-range-group{ margin-top: 14px; }
.cd-range-group > span{ font-size: 12px; font-weight: 600; color: var(--cd-body); }

/* ---------------------------------------------------------------------------
   6. Checkbox lists (Цвят е select, "Други" е checkbox списък)
   --------------------------------------------------------------------------- */
.cd-search-widget ul{ display: flex; flex-direction: column; gap: 2px; }
.cd-search-widget .form-check{
  display: flex; align-items: center; gap: 10px; padding: 7px 8px; margin: 0;
  border-radius: 8px; transition: background .12s ease;
}
.cd-search-widget .form-check:hover{ background: var(--cd-surface-2); }
.cd-search-widget .form-check-input{
  width: 18px; height: 18px; margin: 0; flex: none; box-shadow: none !important;
  border: 1.5px solid var(--cd-line-2);
}
.cd-search-widget .form-check-input:checked{ background-color: var(--cd-red); border-color: var(--cd-red); }
.cd-search-widget .form-check-input:focus{ border-color: var(--cd-red); box-shadow: 0 0 0 3px var(--cd-red-50) !important; }
.cd-search-widget .form-check-label{ font-size: 13.5px; color: var(--cd-body); cursor: pointer; }

/* ---------------------------------------------------------------------------
   6b. Panel tabs (Всички / Запазени) — same idiom as .cd-tire-tabs on the
   car-detail page (bottom-border underline in --cd-red), own class names
   since each tab context on the site gets its own semantic name.
   --------------------------------------------------------------------------- */
.cd-search-tabs{
  display: flex; flex-wrap: nowrap; gap: 0;
  padding: 0; margin: 0; list-style: none;             /* equal-width tabs, full-width baseline */
  border-bottom: 1px solid var(--cd-line-2);           /* gray baseline under all tabs, full-bleed */
  box-shadow: 0 3px 4px rgba(15,23,32,.07);            /* light full-width shadow */
}
/* Three equal columns so the active tab's red underline lands at exactly 1/3 · 2/3 · 3/3. */
.cd-search-tabs > .nav-item{ flex: 1 1 0; min-width: 0; }
.cd-search-tabs > .nav-item > .cd-search-tab{ width: 100%; }
.cd-search-tab{
  display: inline-flex; flex-direction: column; align-items: center; gap: 5px;
  border: none; background: none; padding: 12px 6px 10px; margin-bottom: -1px; /* 6px sides → 12px between adjacent labels when blocks are flush */
  font-size: 14px; font-weight: 600; color: var(--cd-muted); white-space: nowrap;
  border-bottom: 3px solid transparent; cursor: pointer;
  transition: color .15s ease, background .15s ease;
}
.cd-search-tab svg{ font-size: 26px; }
.cd-search-tab:hover{ color: var(--cd-ink); }
.cd-search-tab.active{ color: var(--cd-ink); border-bottom-color: var(--cd-red); }   /* red underline sits under the active third */

/* ---------------------------------------------------------------------------
   6c. Saved searches list (inside the "Запазени" tab)
   --------------------------------------------------------------------------- */
.cd-saved-list{ display: flex; flex-direction: column; }
.cd-saved-item{
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  padding: 14px 20px; border-bottom: 1px solid var(--cd-line);
}
.cd-saved-list .cd-saved-item:last-child{ border-bottom: none; }
.cd-saved-item-main{ min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cd-saved-item-name{
  font-size: 13.5px; font-weight: 700; color: var(--cd-ink); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; display: block;
}
.cd-saved-item-name:hover{ color: var(--cd-red); }
.cd-saved-item-date{ font-size: 11.5px; color: var(--cd-muted); display: inline-flex; align-items: center; gap: 5px; }
.cd-saved-item-actions{ display: flex; gap: 2px; flex: none; }
.cd-saved-item-actions form{ display: flex; margin: 0; }
.cd-saved-icon-btn{
  width: 30px; height: 30px; border-radius: 50%; border: none; background: transparent;
  color: var(--cd-muted); display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; cursor: pointer; transition: .15s ease;
}
.cd-saved-icon-btn:hover{ background: var(--cd-red-50); color: var(--cd-red); }
.cd-saved-icon-btn.is-active{ color: var(--cd-red); }
.cd-saved-empty{ padding: 24px 20px; text-align: center; font-size: 13px; color: var(--cd-muted); margin: 0; }
.cd-saved-empty a{ color: var(--cd-red); font-weight: 700; }
.cd-recent-clear{
  width: calc(100% - 40px); margin: 8px 20px 14px; padding: 9px; background: transparent;
  border: 1px solid var(--cd-line); border-radius: var(--cd-r-sm); color: var(--cd-muted);
  font-size: 12.5px; font-weight: 600; cursor: pointer; display: inline-flex;
  align-items: center; justify-content: center; gap: 6px; transition: .15s ease;
}
.cd-recent-clear:hover{ background: var(--cd-red-50); color: var(--cd-red); border-color: var(--cd-red-50); }

/* ---------------------------------------------------------------------------
   7. Panel action buttons + mobile toggle
   --------------------------------------------------------------------------- */
.cd-search-actions{ padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 8px; }
.cd-search-actions .cd-btn{ margin-top: 0; }
.cd-search-mobile-toggle{ margin: 0 0 18px; }
.cd-search-mobile-toggle .cd-btn{ margin-top: 0; }

/* ---------------------------------------------------------------------------
   7b. Active filters bar (removable chips of everything applied)
   --------------------------------------------------------------------------- */
.cd-active-filters{
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px;
  margin-bottom: 14px;
}
.cd-active-filters-label{
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: var(--cd-muted); display: inline-flex; align-items: center; gap: 6px; flex: none;
}
.cd-active-filters-label svg{ color: var(--cd-muted); font-size: 14px; }
.cd-active-chip{
  display: inline-flex; align-items: center; gap: 8px;
  /* 7px, not 6: keeps the 27px height now that the border is gone, so the chips still sit level
     with the save button. */
  padding: 7px 11px 7px 13px; max-width: 100%;
  /* Tinted rather than white-with-a-hairline. The page behind is #F6F7F9, so a white chip was
     ~3% away from its own backdrop and its shape rested entirely on the border — which was
     authored 1.5px but paints 0.84px at dpr 1, i.e. barely there. A fill a shade DARKER than the
     backdrop gives the pill a body instead of an outline. */
  background: var(--cd-line); border: none;
  border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--cd-ink);
  cursor: pointer; line-height: 1; transition: .15s ease;
}
.cd-active-chip:hover{ color: var(--cd-red); background: var(--cd-red-50); }
.cd-active-chip:focus-visible{ outline: none; border-color: var(--cd-red); box-shadow: 0 0 0 3px var(--cd-red-50); }
.cd-active-chip-text{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-active-chip-x{ font-size: 13px; color: var(--cd-muted); flex: none; transition: .15s ease; }
.cd-active-chip:hover .cd-active-chip-x{ color: var(--cd-red); }
/* save-search + clear-all sit together, pushed to the right edge of the bar */
.cd-active-filters-actions{ margin-left: auto; display: inline-flex; align-items: center; gap: 14px; }
.cd-active-save{
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  /* 7px, not 8: matches the 27px chip height exactly, so the button doesn't stand 1px proud
     top and bottom of the chips it sits in line with. */
  padding: 7px 14px; border-radius: var(--cd-r-sm);
  /* Owner's call (2026-07-20): the solid dark-graphite fill was the only near-black element on
     an otherwise white/gray/red page — read as a stray "island" next to the chips. Switched to
     the same white+border+shadow treatment as the trust badges (.cd-tag-trust) — "only the icon
     carries the accent, not a solid-fill balloon" — so it reads as part of the same chip/badge
     family instead of a disconnected CTA-like button. Body stays neutral even though the bell
     ended up red (below) — owner explicitly chose red over amber for the icon itself, overriding
     the general "red = active/CTA only" rule for this one spot, but the button body was never
     asked to become a red CTA-style fill. */
  border: 1px solid var(--cd-line); background: var(--cd-surface); color: var(--cd-ink);
  font-size: 13px; font-weight: 700; box-shadow: 0 1px 3px rgba(15, 23, 32, .08);
  cursor: pointer; white-space: nowrap; line-height: 1; transition: .15s ease;
  text-decoration: none; /* guests render this as an <a href=login> */
}
/* Owner's final call: red, back to Lucide's normal outline (fill:none) instead of the filled/
   solid experiment — dropped the 18px bump that only existed to compensate for the filled glyph
   reading smaller; back to 14px, matching every other icon on this row (chips, the "Активни:"
   label). */
.cd-active-save svg{ width: 14px; height: 14px; flex: none; color: var(--cd-red); fill: none; }
/* Guests render this as an <a href=login> (see blade) — Bootstrap's global `a:hover{ color:
   var(--bs-link-hover-color) }` (blue) is more specific than a bare `.cd-active-save{ color }`
   (element+pseudo-class beats a single class), so it silently overrode the text to blue on
   hover. Repeating `color` here, inside a `:hover` rule of our own, wins on specificity and
   keeps the text ink-colored instead of flashing blue. */
.cd-active-save:hover{ border-color: var(--cd-red); box-shadow: 0 2px 6px rgba(15, 23, 32, .12); color: var(--cd-ink); }
.cd-active-clear{
  flex: none;
  font-size: 12.5px; font-weight: 600; color: var(--cd-muted);
  text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px;
}
.cd-active-clear:hover{ color: var(--cd-red); text-decoration: underline; }
.cd-active-clear i{ font-size: 11px; }

/* The left column carries an invisible mobile-toggle spacer (its inner button is
   d-lg-none but the wrapper keeps its 16px margin-bottom on desktop), so the filter
   card sits 16px lower than the row top. Mirror that offset on the results column so
   the active-filters bar / toolbar line up with the panel's top instead of starting
   16px higher. Desktop only — on mobile the columns stack and the toggle is real. */
@media (min-width: 992px){
  /* Kept in sync with .cd-search-mobile-toggle's margin-bottom above (both 22px)
     — that's what actually pushes "Филтри" down from the panel's true top, this
     mirrors it so the results column's first row (chips/toolbar) stays level
     with it instead of drifting out of alignment.
     18px only matched the panel's OUTER top edge, not its actual title-row icons
     (.cd-search-panel-head's own padding sits the "Филтри"/trash icons ~20.5px
     lower than that outer edge — checked live, both icons' vertical centers land
     on the exact same line at 170.5px while the bar's own "Филтри:" icon sat at
     150px). +20.5px (18→38.5, rounded to 38) lines the bar's icon up with that
     shared line instead of just the container tops. */
  .cd-search-page .col-lg-9{ padding-top: 38px; }
  /* desktop has the always-open sidebar, so an empty chips bar just takes space */
  .cd-active-filters--empty{ display: none; }
  /* Sidebar-to-results gutter was 12+12=24px (Bootstrap's own column padding,
     not overridden anywhere) — owner felt the two columns read as glued
     together; +4px here (24→28 total) without touching the shared grid gutter
     used elsewhere on the site. */
  .cd-search-page .col-lg-9{ padding-left: 14px; }
}

/* ---------------------------------------------------------------------------
   8. Results toolbar (count + sort)
   --------------------------------------------------------------------------- */
.cd-search-toolbar{
  display: flex; align-items: center; justify-content: flex-start; gap: 14px; flex-wrap: wrap;
  background: transparent; box-shadow: none; border-radius: 0;   /* no card — plain inline, like the reference */
  padding: 2px 4px; margin-bottom: 20px;
}
.cd-search-toolbar .vscomp-wrapper{
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}
.cd-search-toolbar .vscomp-value{ font-size: 14px; font-weight: 600; color: var(--cd-ink); }
.cd-search-toolbar .vscomp-toggle-button{
  border: none !important; background: transparent !important; border-radius: 0 !important;
  min-height: auto !important; padding: 0 !important; box-shadow: none !important;   /* plain text + chevron, no box */
}
.cd-search-toolbar .vscomp-toggle-button:hover .vscomp-value{ color: var(--cd-red); }
.cd-search-toolbar .vscomp-wrapper.focused .vscomp-toggle-button{
  border: none !important; box-shadow: none !important;
}
.cd-search-toolbar .vscomp-arrow::after{ border-right-color: var(--cd-muted) !important; border-bottom-color: var(--cd-muted) !important; }
.cd-search-toolbar .vscomp-dropbox{
  border-radius: var(--cd-r-md) !important; box-shadow: var(--cd-shadow-2) !important;
  border: 1px solid var(--cd-line) !important; overflow: hidden; margin-top: 6px !important;
}
.cd-search-toolbar .vscomp-option{ font-size: 13.5px !important; padding: 9px 14px !important; }
.cd-search-toolbar .vscomp-option.focused,
.cd-search-toolbar .vscomp-option:hover{ background: var(--cd-red-50) !important; }
.cd-search-toolbar .vscomp-option.selected{ background: var(--cd-surface-3) !important; color: var(--cd-red) !important; font-weight: 700; }
/* Layout: `106 резултати │ Най-нови обяви ············ ‹ 1 2 3 ›`
   The paginator renders its count and its page buttons inside one wrapper, with the sort a level
   up — so once this toolbar started showing page buttons they landed *between* count and sort,
   splitting a pair that belongs together. They cannot be reordered across that nesting, so
   `display: contents` dissolves the two wrappers and makes count / buttons / sort siblings of this
   flex row, which can then be ordered freely. Scoped to the toolbar: the bottom pagination card
   still wants its wrapper intact. */
.cd-search-toolbar > .mb-10,
.cd-search-toolbar .cd-search-pagination-bar{ display: contents; }
.cd-search-toolbar .cd-search-pagination-info{ order: 1; }
.cd-search-toolbar > .d-flex.justify-content-end{
  order: 2; flex: none; border-left: 1px solid var(--cd-line-2); padding-left: 14px;
}
/* `margin-left: auto` is what pushes the buttons to the right edge, and it needs !important:
   light.css pins `.pagination { margin: 0 10px !important }`, which no specificity can beat.
   (`.cd-search-page` also gets it past this file's own `.cd-search-page .pagination{ margin: 0 }`
   further down, which wins on source order at equal specificity.) */
.cd-search-page .cd-search-toolbar .pagination{ order: 3; margin-left: auto !important; }
/* Sort control hugged a fixed 190px inline width with the chevron absolutely
   pinned right:0 — stranding it ~48px from the label. Collapse to content width
   and let the arrow flow right after the text. */
.cd-search-toolbar #select-sort,
.cd-search-toolbar #select-sort .vscomp-wrapper,
.cd-search-toolbar #select-sort .vscomp-toggle-button{ width: auto !important; }
.cd-search-toolbar #select-sort .vscomp-toggle-button{ display: inline-flex; align-items: center; }
.cd-search-toolbar #select-sort .vscomp-value{ flex: 0 0 auto; width: auto !important; max-width: none !important; overflow: visible; }
.cd-search-toolbar #select-sort .vscomp-arrow{ position: static; width: 14px; margin-left: 4px; }
/* Collapsing the toggle also shrank the dropdown; let it size to its widest
   option instead (toolbar is left-aligned, so it has room to grow rightward). */
.cd-search-toolbar #select-sort .vscomp-dropbox-container{ right: auto !important; width: max-content !important; }
.cd-search-toolbar #select-sort .vscomp-dropbox{ width: max-content !important; min-width: 180px !important; }

/* ---------------------------------------------------------------------------
   9. Result cards
   --------------------------------------------------------------------------- */
.cd-search-results{ display: flex; flex-direction: column; gap: 18px; }
/* items.blade wraps all cards in one <div>, which ate the flex gap above —
   make that wrapper the flex column so the cards actually get spacing. */
.cd-search-results > div{ display: flex; flex-direction: column; gap: 18px; }

.cd-result-card{
  /* Two columns: photo + body. The price no longer has its own rail — it sits in
     the body footer (bottom-right, next to the location) like Carvago, which frees
     the full body width for an icon'd, single-line spec row. */
  display: grid; grid-template-columns: 300px 1fr; gap: 0;
  background: var(--cd-surface); border-radius: var(--cd-r-lg);
  box-shadow: 0 1px 3px rgba(15,23,32,.05), 0 10px 24px -6px rgba(15,23,32,.11);
  /* No card padding: the photo bleeds to the top/left/bottom card edges (no
     "floating in a box" look). overflow:hidden lets the card's rounded corners
     clip the flush image; per-column padding below restores text breathing room. */
  padding: 0; overflow: hidden; transition: box-shadow .18s ease, transform .18s ease;
  position: relative; cursor: pointer;
}
/* Whole-card click target (Carvago-style). Sits above the body so any click there
   opens the ad; the photo column and the favourite/+N are lifted above it. */
.cd-result-cardlink{ position: absolute; inset: 0; z-index: 1; }
.cd-result-media{ z-index: 2; }
.cd-result-tags .cd-tag-more{ position: relative; z-index: 2; }
/* "Виж повече" reveal over the photo on hover */
/* "Виж повече" comes up from the BOTTOM on hover: a soft gradient darkens only the
   lower part (photo stays visible up top) with the label pinned to the bottom. */
.cd-media-hover{
  position: absolute; inset: 0; z-index: 1; display: flex; align-items: flex-end; justify-content: center; gap: 7px;
  padding-bottom: 12px;
  background: linear-gradient(to top, rgba(15,23,32,.62) 0%, rgba(15,23,32,0) 55%);
  color: #fff; font-weight: 700; font-size: 13px;
  opacity: 0; transition: opacity .18s ease; pointer-events: none;
}
.cd-media-hover i{ font-size: 12px; }
.cd-result-card:hover .cd-media-hover{ opacity: 1; }
.cd-result-card:hover{ box-shadow: 0 2px 5px rgba(15,23,32,.05), 0 10px 22px -8px rgba(15,23,32,.12); transform: translateY(-1px); }

/* Photo is a fixed 4:3 box (not stretched to the text-driven card height, which
   would crop the car into a near-square). align-self:start keeps it flush to the
   top-left card edge; the box owns the ratio so the <img> just fills & covers it. */
.cd-result-media{ position: relative; border-radius: 0; overflow: hidden; background: var(--cd-surface-3); aspect-ratio: 4 / 3; align-self: start; }
.cd-result-media a{ display: block; width: 100%; height: 100%; }
.cd-result-media img{ width: 100%; height: 100%; object-fit: cover; }

.cd-result-fav-row{ position: absolute; right: 8px; top: 8px; z-index: 2; }
.cd-result-fav{
  width: 30px; height: 30px; border-radius: 50%; background: rgba(21,24,31,.55); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 13px;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: .15s ease;
}
.cd-result-fav:hover{ background: var(--cd-red); color: #fff; }
.cd-result-fav.is-active{ background: var(--cd-red); }

.cd-result-timer{ position: absolute; left: 8px; top: 8px; z-index: 2; }
.cd-result-timer > div{ float: none !important; height: auto !important; display: inline !important; }
.cd-result-timer .badge-timeleft{ background: none !important; padding: 0 !important; font-weight: 700; font-size: 12px; color: #fff !important; }
/* The countdown clock is injected by the shared layout's countdown JS as
   <i class="fa fa-clock">. Rather than touch that global script (it also feeds
   the homepage carousel), swap the glyph for a mask-based Lucide clock, scoped
   to /search cards. background-color:currentColor inherits the white above, and
   the mask survives the per-second re-render since it's a static CSS rule. */
.cd-result-timer .badge-timeleft i,
.cd-result-timer .official-start i{
  display: inline-block; width: 14px; height: 14px; margin-right: 4px;
  vertical-align: -0.2em; color: #fff !important;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E") center / contain no-repeat;
}
.cd-result-timer .badge-timeleft i::before,
.cd-result-timer .official-start i::before{ content: none; }
.cd-result-timer .badge-timeexpired{ background: none !important; color: #fff; padding: 0 !important; }

.cd-result-badge-promo{
  position: absolute; left: 8px; bottom: 8px; z-index: 2;
  background: var(--cd-red); color: #fff;
}

.cd-result-photo-count{
  position: absolute; right: 8px; bottom: 8px; z-index: 2;
  background: rgba(21,24,31,.65); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}

.cd-result-body{ min-width: 0; display: flex; flex-direction: column; padding: 16px; }
.cd-result-title{ font-size: 17px; font-weight: 800; margin: 2px 0 12px; letter-spacing: -0.01em; line-height: 1.25; }
.cd-result-title a{ color: var(--cd-ink); }
.cd-result-title a:hover{ color: var(--cd-red); }
/* variant (sub_type) sits inline after the make+model, lighter — like Carvago */
.cd-result-variant{ font-weight: 500; color: var(--cd-body); }

/* No divider line under the specs — sections separate by whitespace (proximity),
   matching the rest of the redesign. Icons are body-coloured (not pale) and a
   touch larger so they read clearly next to the text. */
.cd-result-specs{
  display: flex; flex-wrap: nowrap; align-items: center; gap: 16px; margin: 12px 0 8px;
  min-width: 0; overflow: hidden;
  /* Sized to fit 6 specs in the 544px row of a normal laptop (≤1400px viewport →
     1200px container). Fade the right edge for the odd extra-long card. */
  -webkit-mask-image: linear-gradient(to right, #000 92%, transparent);
          mask-image: linear-gradient(to right, #000 92%, transparent);
}
.cd-result-specs span{
  display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--cd-ink); white-space: nowrap;
}
/* Carvago-style hierarchy: the three "car" specs a touch larger, date smaller */
.cd-result-specs svg.cd-icon-road,
.cd-result-specs svg.cd-icon-engine,
.cd-result-specs svg.cd-icon-gearbox{ width: 19px; height: 19px; }
.cd-result-specs svg.cd-icon-cal{ width: 15px; height: 15px; }
.cd-result-specs i{ color: var(--cd-ink); font-size: 15px; width: 15px; text-align: center; }

/* One row: trust badges (always visible, green) + equipment (neutral) + "+N".
   Trust badges and "+N" hold their width; only the equipment list shrinks and
   fades when space runs out (full list is on the ad page). */
.cd-result-tags{
  display: flex; flex-wrap: nowrap; align-items: center; gap: 5px; margin: 0 0 16px; overflow: hidden;
  /* Equipment fills after the badges but always stops short of the right edge, so
     "+N" sits at a consistent spot with breathing room (never jammed to the edge). */
  padding-right: 44px;
}
.cd-tag{
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 5px 10px; font-size: 12px; border-radius: var(--cd-r-sm);
}
.cd-tag i{ font-size: 12px; }
/* Trust badges match the car page's highlight pills (.cd-highlight-good): white,
   bordered, dark text — only the icon carries the green accent, not a solid fill. */
.cd-tag-trust{
  background: var(--cd-surface); border: 1px solid var(--cd-line);
  box-shadow: 0 1px 3px rgba(15, 23, 32, .08); color: var(--cd-ink); font-weight: 700;
}
.cd-tag-trust i{ color: var(--cd-success); }
.cd-tag-equip{ background: var(--cd-surface-2); color: var(--cd-body); }
.cd-tag-equip svg{ width: 13px; height: 13px; flex: none; }
.cd-result-equip-list{
  display: flex; align-items: center; gap: 6px; min-width: 0; flex: 0 1 auto; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, #000 88%, transparent);
          mask-image: linear-gradient(to right, #000 88%, transparent);
}
.cd-tag-more{
  background: var(--cd-surface-2); color: var(--cd-ink); font-weight: 700; text-decoration: none; gap: 2px;
}
.cd-tag-more:hover{ background: var(--cd-line-2); }
.cd-tag-more i{ font-size: 9px; }

/* Footer pinned to the card bottom: location on the left, price + CTA on the right.
   Separated from the equipment above by whitespace, not a divider line. */
.cd-result-footer{
  margin-top: auto; padding-top: 0;
  /* align-items was flex-start, anchoring .cd-result-loc to the FOOTER'S OWN
     top edge. The footer is itself bottom-pinned to the card (margin-top:auto
     above), so when the bid/buy-now progress bar makes the price side taller,
     the footer's top edge — and with it, location/delivery — got pushed
     upward too, even though delivery has nothing to do with pricing. Bottom-
     aligning instead anchors location to the footer's bottom edge, which
     doesn't move regardless of how tall the price side gets. */
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
}
.cd-result-loc{ display: flex; flex-direction: column; align-items: flex-start; gap: 0; line-height: 1.15; }
.cd-result-country{ margin-top: 0; padding-top: 0; font-weight: 600; } /* provenance matters to the buyer */
.cd-result-country::after{ content: none; } /* the ad-page underline treatment doesn't fit this compact card */
/* Copart yard location (state - city), a lighter inline suffix after the country. */
.cd-result-yard{ margin-left: 5px; font-weight: 500; font-size: 12.5px; color: var(--cd-muted); }
/* Delivery time, pulled from the ad (delivery_min/max), under the country. */
.cd-result-delivery{ display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--cd-body); white-space: nowrap; margin-top: 3px; }
.cd-result-delivery i{ font-size: 13px; }
.cd-result-delivery svg{ width: 14px; height: 14px; }
/* Korea (Encar) inspection/report available — small green trust link on ITS OWN row, directly
   under the extras and above the country line. <a> to the ad where the full report lives
   (file-search icon = the ad-page report button). */
.cd-result-inspection{ display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--cd-success); white-space: nowrap; margin: 8px 0 0; text-decoration: none; }
.cd-result-inspection svg{ width: 14px; height: 14px; flex: none; }
.cd-result-inspection:hover{ text-decoration: underline; }

/* ---- Lucide icon sizing on the result card (SVG stroke icons; color via
   currentColor from the parent). Replaces the old Font Awesome font-size sizing. ---- */
.cd-result-card svg{ stroke-width: 1.9; } /* bolder, closer to Carvago's weight */
.cd-result-specs svg{ width: 17px; height: 17px; flex: none; color: var(--cd-ink); }
.cd-tag-trust svg{ width: 13px; height: 13px; flex: none; color: var(--cd-success); }
/* Damage-severity icon tints (override the default green trust icon; higher specificity). */
.cd-tag-trust.cd-tag-icon-warn svg{ color: var(--cd-amber); }
.cd-tag-trust.cd-tag-icon-bad svg{ color: var(--cd-red); }
.cd-buynow-pill svg{ width: 13px; height: 13px; flex: none; }
.cd-tag-more svg{ width: 12px; height: 12px; flex: none; }
.cd-media-hover svg{ width: 15px; height: 15px; flex: none; }
.cd-result-fav svg{ width: 16px; height: 16px; }
.cd-result-photo-count svg{ width: 12px; height: 12px; flex: none; }

.cd-result-price-block{
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0;
}
/* Bid + buy-now side by side, each a small label over the price. Wider gap so the
   two prices spread into the footer's empty middle instead of hugging the edge. */
.cd-price-cols{ display: flex; align-items: flex-start; gap: 52px; }
.cd-price-col{ display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.cd-price-col-buy .cd-result-price-tag{ color: var(--cd-red); font-weight: 700; }
/* Buy-now price as a small red pill — a scaled-down look of the ad's red CTA.
   Static (not a real button); the whole card is the link. */
/* Buy-now price as a small red pill — a scaled-down look of the ad's red CTA.
   Static (not a real button); the whole card is the link. */
.cd-buynow-pill{
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  background: linear-gradient(135deg, var(--cd-red), var(--cd-red-dark)); color: #fff;
  font-weight: 800; font-size: 16px; padding: 3px 13px; border-radius: var(--cd-r-sm);
  box-shadow: 0 4px 10px -5px rgba(225,29,42,.5);
}
.cd-buynow-pill i{ font-size: 12px; }
.cd-result-price{ font-size: 22px; font-weight: 800; color: var(--cd-ink); white-space: nowrap; }
.cd-result-price-tag{
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--cd-muted); white-space: nowrap;
}
/* Bid-vs-buy-now progress: full-width bar, then "X% от Купи сега" (left) and
   "+€Y" (right) on the row below — like the reference. */
.cd-price-progress{ display: flex; flex-direction: column; gap: 4px; align-self: stretch; }
.cd-price-bar{ width: 100%; height: 5px; border-radius: 999px; background: var(--cd-line-2); overflow: hidden; }
.cd-price-bar i{ display: block; height: 100%; background: #6b7280; border-radius: 999px; }
.cd-price-progress-labels{ display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cd-price-pct{ font-size: 10.5px; color: var(--cd-muted); white-space: nowrap; }
/* "X% от цената на нова" — Encar cars only, reusing the bid→buy-now bar above it so the two read
   as one language. Sits apart from it, and its label hugs the ⓘ instead of spreading to both
   edges (there is no right-hand figure here, unlike "+€X" on the bid bar). */
.cd-new-price-progress{ margin-top: 8px; }
.cd-new-price-progress .cd-price-progress-labels{ justify-content: flex-start; }
.cd-new-price-progress .cd-price-pct{ display: inline-flex; align-items: center; gap: 4px; }
.cd-info-dot{
  display: inline-flex; align-items: center; color: var(--cd-line-2); cursor: help;
  transition: color .16s ease;
}
.cd-info-dot svg{ width: 12px; height: 12px; }
.cd-info-dot:hover{ color: var(--cd-muted); }
/* "+€X" = how much more buying now costs vs the current bid. */
.cd-price-diff{ font-size: 10.5px; font-weight: 700; color: var(--cd-body); white-space: nowrap; }
/* Buy-now as green text + shield icon (not a button — avoids implying an instant
   checkout from the card; the whole card links to the ad). */
.cd-price-buynow{ display: inline-flex; align-items: center; gap: 5px; margin-top: 1px; font-size: 12.5px; font-weight: 700; color: var(--cd-success); white-space: nowrap; }
.cd-price-buynow i{ font-size: 11px; }
.cd-result-cta{
  width: auto; margin-top: 0; padding: 10px 18px; font-size: 13.5px; flex-shrink: 0;
}

@media (max-width: 991.98px){
  .cd-result-card{ grid-template-columns: 220px 1fr; }
}

@media (max-width: 575.98px){
  .cd-result-card{ grid-template-columns: 1fr; }
  .cd-result-media{ aspect-ratio: 16 / 10; }
  /* narrow single-column body can't hold every spec on one line — let them wrap */
  .cd-result-specs{ flex-wrap: wrap; overflow: visible; gap: 6px 14px; }
  .cd-result-footer{ flex-wrap: wrap; }
}

/* ---------------------------------------------------------------------------
   10. Pagination — shared by the top toolbar and the bottom pagination card
   --------------------------------------------------------------------------- */
/* Bare row, not a card. It used to be a white panel (surface + radius + shadow + padding), which
   made sense when it also carried the result count — once that moved to the toolbar only, the panel
   was a full-width empty box wrapped around two arrows. */
.cd-search-pagination{
  background: none; box-shadow: none; padding: 0; margin-top: 20px;
}
.cd-search-pagination-bar{
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  flex: 1 1 auto; min-width: 0;
}
/* flex-end, not the shared space-between: this instance renders the buttons WITHOUT the count, so
   space-between has a single child to place and parks it on the left. */
.cd-search-pagination .cd-search-pagination-bar{ width: 100%; flex: none; justify-content: flex-end; }
/* !important is required, not sloppiness: light.css pins `.pagination { margin: 0 10px !important }`
   (a fourth !important from that sheet, alongside the height/line-height/border-radius ones noted
   below), so no amount of specificity moves it. Without this the arrows stop 10px short of the
   cards' right edge once flex-end pushes them over. Only the trailing margin matters — the leading
   one is absorbed by flex-end. */
.cd-search-page .cd-search-pagination .pagination{ margin-right: 0 !important; }
.cd-search-pagination-info{ font-size: 13px; color: var(--cd-body); }
.cd-search-pagination-info strong{ color: var(--cd-ink); font-weight: 800; }
.cd-search-page .pagination{ margin: 0; gap: 6px; }
/* The three !important declarations here are answering light.css, which pins
   `.pagination .page-link { height: 30px !important; line-height: 18px !important;
   border-radius: 12px !important }`. !important beats any specificity, so no amount of extra
   classes moves those three — sizing set here did nothing at all until this. Only those three are
   forced; everything else below wins on specificity alone. */
.cd-search-page .pagination .page-link{
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 38px !important; line-height: 1 !important; padding: 0 9px; margin: 0;
  /* `background` is not optional: without it the legacy theme's own .page-link rule paints #111
     underneath, and an inactive number rendered near-black on near-black — the digit was there,
     just invisible. A transparent border reserves the space the active outline uses, so nothing
     shifts by 1.5px when a page becomes current. */
  border: 1.5px solid transparent; border-radius: 10px !important; background: transparent;
  color: var(--cd-ink); font-weight: 600; font-size: 14px;
}
/* Active is OUTLINED, not filled. The reader already knows which page they are on, so it only has
   to be marked — that frees the solid fill for "next", which is the thing they actually want to
   press. Outline vs fill separates the two roles; colour alone could not, and when both were solid
   red they simply cancelled each other out. */
/* transparent, NOT var(--cd-surface): the pagination sits on the page's grey, so a white fill made
   the current page read as a white card floating on it. Letting the page colour through leaves just
   the red outline doing the marking. Transparent also means it follows the page background if that
   ever changes, instead of pinning white. */
.cd-search-page .pagination .page-item.active .page-link{
  background: transparent; border-color: var(--cd-red); color: var(--cd-red); font-weight: 700;
}
.cd-search-page .pagination .page-link:hover{ background: var(--cd-red-50); color: var(--cd-red); }
/* Arrow gradient stops live here so all five rules below (2 base, 2 hover, 1 disabled) stay in sync
   and the run is tuned in ONE place.

   THE RULE THIS OBEYS: the arrows belong to the same brand system as the Профил / КУПИ СЕГА buttons
   and the active-page outline, so the button's AVERAGE colour must read as brand red — the gradient
   is depth, not a different, darker red. Check it by measuring, not by eye: paint the stops into a
   38px canvas, average every pixel, compare with #E11D2A.

   Kept deliberately SIMPLE after several rejected attempts — the failure mode here is over-design,
   not under-design. What was tried and thrown out:
     • grey → red: goes muddy, reads as a dirty smudge, and drops the white ‹ › glyph's contrast to
       2.62 (unreadable) vs 4.76 on solid brand red. Keep both stops in the red family.
     • a very dark tail (#8E0F19 / #6E0B13): visible, but the dark end sat against the button edge
       and read as a black band. Nothing darker than ~#BE1528.
     • mirrored angles (90/270deg): framed the row with dark on both outer edges.
     • a 3rd stop with brand red mid-run: worked numerically but is more machinery than this needs.
   Now: one light→dark run, same angle on both. The two stops average rgb(222,54,66), close enough
   to #E11D2A that the pair still reads as brand red next to the Профил / КУПИ СЕГА buttons. */
.cd-search-page .pagination{
  --cd-arrow-light: #FF5A66;
  --cd-arrow-dark:  #BE1528;
}
.cd-search-page .pagination .page-link[rel="prev"],
.cd-search-page .pagination .page-link[rel="next"]{
  color: #fff; border-color: transparent;
}
/* DIAGONAL (Carvago's angle), mirrored so the DARK stop lands on each button's OUTER bottom corner
   and the light sits at its inner top. next: 135deg runs to bottom-right. prev: 225deg is that
   mirrored, running to bottom-left.
   A diagonal only works because the dark stop is mild: an early version paired 135/225deg with a
   near-black tail (#8E0F19) and the two dark outer corners read as a band framing the row. The
   angle was never the fault — the depth of the dark end was. Keep --cd-arrow-dark near #BE1528. */
.cd-search-page .pagination .page-link[rel="prev"]{
  background: linear-gradient(225deg, var(--cd-arrow-light) 0%, var(--cd-arrow-dark) 100%);
}
.cd-search-page .pagination .page-link[rel="next"]{
  background: linear-gradient(135deg, var(--cd-arrow-light) 0%, var(--cd-arrow-dark) 100%);
}
.cd-search-page .pagination .page-link[rel="next"]:hover,
.cd-search-page .pagination .page-link[rel="prev"]:hover{
  --cd-arrow-light: #F0424E;
  --cd-arrow-dark:  #A11220;
  color: #fff;
}
/* Disabled stays grey and must outrank the arrow colours above — a dead control that still glows
   red would read as pressable. It matches on .page-item.disabled, which those two do not. */
.cd-search-page .pagination .page-item.disabled .page-link{
  background: var(--cd-line); color: var(--cd-muted); border-color: transparent; cursor: default;
}
/* …except the "prev" arrow on page 1, which the reference keeps as a PALE version of the live
   button rather than a grey one — same shape and hue, just held back, so the two arrows still read
   as a pair. Targeted by position, not [rel="prev"]: Laravel drops the rel attribute once the link
   is disabled, which is why the arrow rules above never reached it. */
.cd-search-page .pagination .page-item:first-child.disabled .page-link{
  background: linear-gradient(225deg, var(--cd-arrow-light) 0%, var(--cd-arrow-dark) 100%);
  color: #fff; opacity: .4;
}

@media (max-width: 575.98px){
  .cd-search-pagination-bar{ justify-content: center; text-align: center; }
}

/* ---------------------------------------------------------------------------
   11. Mobile (≤991px): filters become a full-screen overlay opened from a
       "Филтри" + chips row (JS-pinned below the fixed header — see .is-pinned);
       save-search becomes a scroll-aware floating bell.
   --------------------------------------------------------------------------- */
@media (max-width: 991.98px){

  /* legacy inline collapse toggle is replaced by the overlay launcher */
  .cd-search-mobile-toggle{ display: none !important; }

  /* clear the fixed header so the pinned row's natural flow position lands at the
     header bottom — keeps the JS pin from shifting it and overlapping the toolbar */
  .cd-search-page .col-lg-9{ padding-top: 18px; }

  /* --- top row: "Филтри" button + chips. JS pins it below the fixed header on
     scroll (.is-pinned + inline position:fixed) — native sticky is unusable here:
     body{overflow-x:hidden} kills it, and switching body to :clip breaks the fixed
     header. The JS sets top/left/width inline; these are just the visuals. --- */
  .cd-active-filters{
    margin: 0 0 12px; padding: 8px 0;
    background: var(--cd-surface-2);
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    gap: 8px; scrollbar-width: none;
  }
  .cd-active-filters::-webkit-scrollbar{ display: none; }
  .cd-active-filters.is-pinned{ box-shadow: 0 4px 10px -6px rgba(15,23,32,.18); }
  .cd-active-filters--empty{ margin-bottom: 10px; }
  .cd-mobile-filter-btn{
    flex: none; display: inline-flex; align-items: center; gap: 7px;
    background: var(--cd-red); color: #fff; border: none;
    border-radius: var(--cd-r-sm); padding: 9px 15px; font-size: 13.5px; font-weight: 700;
    white-space: nowrap; line-height: 1; cursor: pointer;
  }
  .cd-active-chip{ flex: none; }   /* don't shrink — scroll horizontally instead */

  /* --- filter panel → full-screen overlay --- */
  .cd-search-page .col-lg-3 .cd-search-panel.cd-sticky-panel{
    display: block !important;               /* beat legacy .d-none from the toggle_search cookie */
    position: fixed; inset: 0; z-index: 1200;
    margin: 0; border-radius: 0; max-width: none; width: 100%;
    overflow-y: auto; -webkit-overflow-scrolling: touch; box-shadow: none;
    transform: translateY(100%); transition: transform .28s ease;
  }
  body.cd-filters-open .cd-search-page .col-lg-3 .cd-search-panel.cd-sticky-panel{ transform: translateY(0); }
  body.cd-filters-open{ overflow: hidden; }

  /* panel head = the overlay's sticky header */
  .cd-search-panel-head{ position: sticky; top: 0; z-index: 2; background: var(--cd-surface); }
  .cd-panel-close{
    width: 34px; height: 34px; flex: none; border: none; background: var(--cd-surface-2);
    border-radius: 50%; color: var(--cd-ink); display: flex; align-items: center; justify-content: center;
    font-size: 16px; cursor: pointer;
  }

  /* desktop in-panel save button is redundant on mobile (floating bell instead) */
  .cd-search-actions{ display: none; }

  /* sticky overlay footer: clear-all (left) + primary "show results" (right) */
  .cd-panel-actions-mobile{
    position: sticky; bottom: 0; z-index: 3;
    display: flex; align-items: center; gap: 10px;
    padding: 12px; background: var(--cd-surface); border-top: 1px solid var(--cd-line);
  }
  .cd-panel-clear{
    flex: none; width: 46px; height: 46px; border: 1.5px solid var(--cd-line-2);
    background: var(--cd-surface); border-radius: var(--cd-r-sm); color: var(--cd-muted);
    display: flex; align-items: center; justify-content: center; font-size: 16px; cursor: pointer;
  }
  .cd-panel-clear:active{ color: var(--cd-red); border-color: var(--cd-red); }
  .cd-panel-show{
    flex: 1 1 auto; border: none; background: var(--cd-red); color: #fff;
    border-radius: var(--cd-r-sm); padding: 13px; font-size: 14.5px; font-weight: 700; cursor: pointer;
  }

  /* --- floating "Запази" bell: hidden by default, slides in on scroll-up --- */
  .cd-save-fab{
    position: fixed; right: 16px; bottom: 18px; z-index: 40;
    display: inline-flex; align-items: center; gap: 7px;
    background: linear-gradient(135deg, #2C313B 0%, var(--cd-ink) 100%); color: #fff; border: none;
    border-radius: 999px; padding: 12px 18px; font-size: 13.5px; font-weight: 700;
    text-decoration: none; /* guests render this as an <a href=login> */
    box-shadow: 0 8px 20px -6px rgba(15,23,32,.55); cursor: pointer;
    transform: translateY(150%); opacity: 0; transition: transform .28s ease, opacity .2s ease;
  }
  .cd-save-fab.is-visible{ transform: translateY(0); opacity: 1; }
  body.cd-filters-open .cd-save-fab{ display: none; }
}