/* ============================================================
   EuroKarz 2026 — Shared component library
   Reusable, responsive building blocks used across pages.
   Mobile-first; desktop rules under @media (min-width: 992px).
   Depends on tokens from style.css (--ek-red, --ek-font, --ek-ink,
   --ek-dark, --ek-white, --ek-maxw, --ek-gutter, --ek-line, --ek-muted).
   Put ONLY page-specific styles in css/pages/<slug>.css.
   ============================================================ */

/* Component-scoped tokens (fall back gracefully if not in style.css)
   NOTE: this file is linked AFTER style.css, so anything redeclared here wins.
   Radius is deliberately 0 — measured from EuroKarz 2026.fig, where the header,
   footer, panels, buttons and inputs are all square (cornerRadius: 0). Radius
   appears only on specific parts (countdown chips r=10, a nav pill r=30), which
   opt in explicitly via --ek-radius-chip. */
:root {
  --ek-radius:      0;
  --ek-radius-lg:   0;
  --ek-radius-chip: 10px;
  --ek-field-bg:    #ffffff;
  --ek-field-line:  #cdcdcd;
  --ek-panel:       #ededed;   /* light grey form/sidebar panels */
  --ek-panel-2:     #f6f6f6;
  --ek-win:         #101010;    /* dark bid-widget surfaces */
  --ek-win-2:       #1c1c1c;
  --ek-win-line:    #2a2a2a;
  --ek-live:        #2ecb4f;    /* leading-bid green */
}

/* ============================================================
   1. BUTTONS  — .ek-btn (+ modifiers)
   ============================================================ */
.ek-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--ek-font);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 1px;
  line-height: 1;
  padding: 14px 34px;
  border: 2px solid transparent;
  border-radius: var(--ek-radius);
  background: var(--ek-ink);
  color: var(--ek-white);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
  text-align: center;
}
.ek-btn:hover { background: #000; }

/* Primary / red — the main call to action (Login, Join, Bid CTA) */
.ek-btn--red { background: var(--ek-red); border-color: var(--ek-red); color: var(--ek-white); }
.ek-btn--red:hover { background: var(--ek-red-dark); border-color: var(--ek-red-dark); }

/* Outline / ghost */
.ek-btn--outline {
  background: transparent;
  border-color: var(--ek-ink);
  color: var(--ek-ink);
}
.ek-btn--outline:hover { background: var(--ek-ink); color: var(--ek-white); }

.ek-btn--outline-red {
  background: transparent;
  border-color: var(--ek-red);
  color: var(--ek-red);
}
.ek-btn--outline-red:hover { background: var(--ek-red); color: var(--ek-white); }

/* Sizing + width modifiers */
.ek-btn--sm    { padding: 9px 20px; font-size: 14px; }
.ek-btn--lg    { padding: 17px 44px; font-size: 18px; }
.ek-btn--block { display: flex; width: 100%; }

/* Full-width red action bar (mobile "View Auction Details" strip) */
.ek-action-bar {
  display: block;
  width: 100%;
  padding: 15px 20px;
  background: var(--ek-red);
  color: var(--ek-white);
  font-weight: 400;
  letter-spacing: 1px;
  text-align: center;
  text-transform: uppercase;
}
.ek-action-bar:hover { background: var(--ek-red-dark); }

/* ============================================================
   2. VEHICLE / LISTING CARD  — .car-card
   Image on top; footer row = marque badge + mini countdown + price + flag.
   ============================================================ */
.car-card {
  position: relative;
  display: block;
  background: var(--ek-white);
  /* Measured off the .fig inspector (Listing Block, 280x235) as a flat
     #c5c5c5 1px border — but this whole site renders inside a page-wide
     `transform: scale()` "design canvas" (fitting the fixed 1805px Figma
     frame to whatever the real viewport is), which shrinks that 1px border
     down to a SUB-PIXEL device width (observed ~0.74px on a 1920px-wide real
     Chrome window). At sub-pixel widths a light colour like c5c5c5
     anti-aliases into near-invisibility against a white card. 2px survives
     that scaling (~1.5px effective) while still reading as a thin line. */
  border: 2px solid #d8d8d8;
  border-radius: var(--ek-radius);
  overflow: hidden;
  color: var(--ek-ink);
  transition: box-shadow .15s ease, border-color .15s ease;
}
.car-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.car-card.is-active,
.car-card--selected { border: 2px solid var(--ek-red); }

.car-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--ek-hero, linear-gradient(135deg, #d7dde2, #aeb7bf));
  overflow: hidden;
}
.car-card__img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* Top-left "add / compare" plus badge. Base is a bare glyph (no box, no
   border) — that's what search / view-auctions / auction-listings all
   measured off their own Figma frames and already override toward. Watch
   List's frame instead measures a 26x26 circular RING (1.5px stroke, no
   fill) — added back as a `.watch-list__grid`-scoped override rather than
   here, so it doesn't leak an unwanted border onto the bare-glyph pages. */
.car-card__add {
  position: absolute;
  top: 5px; left: 5px;
  width: 26px; height: 26px;
  max-width: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: none;
  color: var(--ek-white);
  border-radius: 50%;
  box-sizing: border-box;
  font-size: 18px; font-weight: 400; line-height: 1;
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.car-card__add:hover { opacity: .8; }

/* Optional title (some listing variants show the model name) */
.car-card__title {
  margin: 0;
  padding: 12px 12px 0;
  font-size: 16px; font-weight: 400;
  color: var(--ek-ink);
}

/* Footer meta row */
.car-card__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
}
.car-card__marque {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  max-width: none;
  border-radius: 50%;
  object-fit: contain;
  background: var(--ek-white);
}
.car-card__timer {
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: .5px;
  color: var(--ek-ink);
  white-space: nowrap;
}
.car-card__price {
  margin-left: auto;
  font-weight: 400;
  font-size: 15px;
  color: var(--ek-ink);
  white-space: nowrap;
}
/* Country flag — measured as a circle (the .fig shows it round, same
   treatment as the marque badge), not a rounded rectangle.
   max-width:none cancels the global `img{max-width:100%}` reset — inside an
   `auto`-sized grid track that resolves against a SMALLER track (e.g.
   min-width:20px from the safety rules), the percentage clamped the
   rendered width down to that smaller floor while height still hit the
   full size, squashing the circle sideways. A literal pixel max-width would
   just reintroduce the same clash against page-specific overrides (search's
   desktop rule wants 30px here) — `none` defers to `width` unconditionally. */
.car-card__flag {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  max-width: none;
  border-radius: 50%;
  overflow: hidden;
  object-fit: cover;
}

/* Optional stats line (bids / views) */
.car-card__stats {
  display: flex;
  gap: 16px;
  padding: 0 12px 12px;
  font-size: 13px;
  color: var(--ek-muted);
}
.car-card__stats span { display: inline-flex; align-items: center; gap: 5px; }
.car-card__stats svg { width: 15px; height: 15px; }

/* ============================================================
   3. CARD GRID  — .card-grid (responsive columns)
   ============================================================ */
.card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (min-width: 640px)  { .card-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 992px)  { .card-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; } }

/* Denser / sparser variants */
.card-grid--3 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 992px) { .card-grid--3 { grid-template-columns: repeat(3, 1fr); } }

/* Listings layout: card grid + right rail sidebar (desktop) */
.listing-layout { display: block; }
@media (min-width: 992px) {
  .listing-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: 26px;
    align-items: start;
  }
}

/* ============================================================
   4. FILTERS / SIDEBAR  — .filters
   ============================================================ */
.filters {
  background: var(--ek-panel);
  border-radius: var(--ek-radius);
  padding: 18px 18px 22px;
}
.filters__title {
  margin: 0 0 14px;
  font-size: 15px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--ek-ink);
}
.filter-row { margin-bottom: 18px; }
.filter-row:last-child { margin-bottom: 0; }
.filter-row__label {
  display: block;
  margin-bottom: 7px;
  font-size: 13px; font-weight: 400;
  letter-spacing: .5px; color: var(--ek-ink);
}

/* Checkbox list (makes/marques) */
/* The BOX itself is styled once, in scss/_forms-fig.scss (Frame 355: 14x14,
   r2, #4478ee + white tick when checked). The 18x18 / r3 / RED-tick block that
   used to live here silently beat it — components.css is linked AFTER
   style.css — and painted the User Profile marque grid as white boxes with red
   ticks. Only the ROW layout belongs here now. */
.filter-check-list { list-style: none; margin: 0; padding: 0; }
.filter-check {
  display: flex; align-items: center;
  gap: 7px;                 /* .fig: box @860, label @881 => 21 - 14 = 7 */
  padding: 0;
  font-size: 14px; color: var(--ek-ink);
  cursor: pointer;
}

/* Toggle switch — styled once, in scss/_forms-fig.scss.
   The copy that used to live here re-declared the 3px border on the
   __slider child while style.css still put one on .ek-switch itself, so the
   track carried 6px of black and TWO knobs (::after at +3, ::before at +6)
   painted an L-shaped notch instead of one 24x24 square. */

/* Price range slider (red track) */
.ek-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px; margin: 12px 0;
  border-radius: 999px;
  background: linear-gradient(var(--ek-red), var(--ek-red)) 0/ var(--_pct, 50%) 100% no-repeat, #d3d3d3;
  cursor: pointer;
}
.ek-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--ek-red); border: 2px solid var(--ek-white);
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.ek-range::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--ek-red); border: 2px solid var(--ek-white);
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.ek-range__values {
  display: flex; justify-content: space-between;
  font-size: 13px; color: var(--ek-muted);
}

/* ============================================================
   5. FORM CONTROLS  — .ek-field
   ============================================================ */
/* The FIELD, its LABEL and the INPUTS are all styled once, in
   scss/_forms-fig.scss, measured off Frame 254 / Frame 268:

     label   13px Regular, 16 tall, 5px above the field
     field   38 tall (textarea 80), 1px #9a9a9a, r0, transparent
     pitch   74  =  16 + 5 + 38 + 15

   The block that used to live here declared 18px / 14px / 6px / 12-14px
   padding / #cdcdcd / min-height 120 — pre-Figma values — and because
   components.css is linked AFTER style.css it won every one of those at equal
   specificity. Field pitch came out 78, so every label after the first drifted
   4px further off its measured row: 36px by the bottom of the User Profile
   form. Only the bits _forms-fig.scss does not cover stay here. */
.ek-field__label .req { color: var(--ek-red); margin-left: 2px; }

.ek-field__hint { margin-top: 5px; font-size: 12px; color: var(--ek-muted); }
.ek-field__error { margin-top: 5px; font-size: 12px; color: var(--ek-red); }

/* A framed light-grey form panel (Login card) */
.ek-form-panel {
  background: var(--ek-panel);
  border-radius: var(--ek-radius);
  padding: 26px 24px 30px;
}

/* Inline checkbox/radio for forms */
.ek-check {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 14px; color: var(--ek-ink); cursor: pointer;
}

/* ============================================================
   6. TABS  — .tabs (Detail page galleries/sections)
   ============================================================ */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 2px solid var(--ek-line);
  margin-bottom: 22px;
}
.tab {
  appearance: none; background: none; border: 0;
  font-family: var(--ek-font);
  font-size: 15px; font-weight: 400;
  letter-spacing: .5px; text-transform: uppercase;
  color: var(--ek-muted);
  padding: 12px 16px;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.tab:hover { color: var(--ek-ink); }
.tab.is-active { color: var(--ek-red); border-bottom-color: var(--ek-red); }

.tab-panel { display: none; }
.tab-panel.is-active { display: block; }

/* Vertical tab list (e.g. gallery categories: Exterior/Interior/Engine) */
.tabs--vertical { flex-direction: column; border-bottom: 0; gap: 2px; }
.tabs--vertical .tab {
  text-align: left;
  border-bottom: 0; border-left: 3px solid transparent;
  margin-bottom: 0;
}
.tabs--vertical .tab.is-active { border-left-color: var(--ek-red); background: var(--ek-panel-2); }

/* ============================================================
   7. BREADCRUMBS  — .breadcrumb
   ============================================================ */
.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px;
  list-style: none; margin: 0 0 18px; padding: 0;
  font-size: 13px; letter-spacing: .5px;
  color: var(--ek-muted);
}
.breadcrumb li { display: inline-flex; align-items: center; gap: 8px; }
.breadcrumb li:not(:last-child)::after {
  content: "/"; color: var(--ek-line);
}
.breadcrumb a { color: var(--ek-muted); }
.breadcrumb a:hover { color: var(--ek-red); }
.breadcrumb [aria-current="page"] { color: var(--ek-ink); font-weight: 400; }

/* ============================================================
   8. SECTION HEADINGS  — .section-title
   ============================================================ */
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin: 0 0 18px;
}
.section-title {
  margin: 0;
  font-size: 22px; font-weight: 700;
  letter-spacing: .5px; text-transform: uppercase;
  color: var(--ek-ink);
}
.section-title--bar {
  padding-left: 12px;
  border-left: 4px solid var(--ek-red);
}
.section-title__count { color: var(--ek-muted); font-weight: 400; }
.section-link { font-size: 14px; font-weight: 400; letter-spacing: .5px; color: var(--ek-red); }
.section-link:hover { color: var(--ek-red-dark); }
@media (min-width: 992px) { .section-title { font-size: 26px; } }

/* ============================================================
   9. PAGINATION  — .pagination
   ============================================================ */
.pagination {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 6px;
  list-style: none; margin: 30px 0 0; padding: 0;
}
.pagination a,
.pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 12px;
  border: 1px solid var(--ek-line);
  border-radius: var(--ek-radius);
  font-weight: 400; font-size: 15px;
  color: var(--ek-ink); background: var(--ek-white);
}
.pagination a:hover { border-color: var(--ek-red); color: var(--ek-red); }
.pagination .is-active {
  background: var(--ek-red); border-color: var(--ek-red); color: var(--ek-white);
}
.pagination .is-disabled { color: var(--ek-line); pointer-events: none; }

/* ============================================================
   10. CONTENT / LEGAL WRAPPER  — .content-page
   ============================================================ */
.content-page {
  max-width: 1000px;
  margin: 0 auto;
  padding: 28px var(--ek-gutter) 56px;
}
.content-page__title {
  margin: 0 0 6px;
  font-size: 28px; font-weight: 700;
  letter-spacing: .5px; color: var(--ek-ink);
}
.content-page__lead {
  margin: 0 0 24px;
  font-size: 18px; color: var(--ek-muted);
}
.content-prose { font-size: 16px; line-height: 1.7; color: var(--ek-ink); }
.content-prose > * + * { margin-top: 16px; }
.content-prose h2 {
  margin-top: 34px; margin-bottom: 4px;
  font-size: 22px; font-weight: 700; color: var(--ek-ink);
}
.content-prose h3 {
  margin-top: 26px; margin-bottom: 2px;
  font-size: 18px; font-weight: 400; color: var(--ek-ink);
}
.content-prose a { color: var(--ek-red); text-decoration: underline; }
.content-prose ul,
.content-prose ol { padding-left: 22px; }
.content-prose li + li { margin-top: 6px; }
.content-prose img { border-radius: var(--ek-radius); margin: 20px 0; }
.content-prose hr { border: 0; border-top: 1px solid var(--ek-line); margin: 30px 0; }

@media (min-width: 992px) {
  .content-page { padding-top: 40px; }
  .content-page__title { font-size: 34px; }
}

/* ============================================================
   11. DETAIL BID WIDGET  — .bid-widget (dark right rail, Frame 173)
   Title (red model no.) · countdown · gauges · icon tiles ·
   bid history rows · glossy BID button.
   ============================================================ */
.bid-widget {
  background: var(--ek-win);
  color: var(--ek-white);
  border-radius: var(--ek-radius-lg);
  padding: 18px 16px 22px;
}
.bid-widget__title {
  margin: 0 0 16px;
  font-size: 22px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--ek-white);
}
.bid-widget__title .is-red { color: var(--ek-red); }

/* Dark countdown row with red dividers */
.timer-strip {
  display: flex;
  background: var(--ek-win-2);
  border-radius: var(--ek-radius);
  overflow: hidden;
}
.timer-strip__unit {
  flex: 1;
  text-align: center;
  padding: 12px 4px;
  position: relative;
}
.timer-strip__unit + .timer-strip__unit::before {
  content: ""; position: absolute; left: 0; top: 18%; bottom: 18%;
  width: 2px; background: var(--ek-red);
}
.timer-strip__num {
  display: block;
  font-size: 30px; font-weight: 400; line-height: 1;   /* .fig: Eurostile / Regular */
  color: var(--ek-white);
}
.timer-strip__label {
  display: block; margin-top: 6px;
  font-size: 10px; letter-spacing: 1.5px; color: #9a9a9a;
}

/* Gauges (VIEWS / BIDS) */
.gauges { display: flex; gap: 14px; margin: 16px 0; }
.gauge {
  flex: 1;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, #2a2a2a 0%, #050505 72%);
  border: 3px solid #000;
  box-shadow: inset 0 0 0 6px #161616, 0 0 0 2px #2c2c2c;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.gauge__num { font-size: 30px; font-weight: 400; color: var(--ek-white); line-height: 1; }  /* .fig: Regular */
.gauge__label { font-size: 12px; letter-spacing: 1px; color: var(--ek-red); margin-top: 2px; }

/* 3-up icon tiles (ENGINE / GALLERY / VIDEO / …) */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 16px 0;
}
.bid-tile {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px;
  background: var(--ek-win-2);
  border: 1px solid var(--ek-win-line);
  border-top: 2px solid var(--ek-red);
  border-radius: var(--ek-radius);
  padding: 14px 6px 10px;
  color: var(--ek-red);
  text-align: center;
  min-height: 72px;
}
.bid-tile:hover { background: #262626; }
.bid-tile svg { width: 26px; height: 26px; }
.bid-tile__label {
  font-size: 10px; font-weight: 400; letter-spacing: 1px;
  text-transform: uppercase; color: #cfcfcf;
}

/* Bid history rows (leading bid highlighted green) */
.bid-history { list-style: none; margin: 16px 0; padding: 0; }
.bid-history__row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  background: var(--ek-win-2);
  border-radius: var(--ek-radius);
  margin-bottom: 6px;
}
.bid-history__row.is-leading { box-shadow: inset 0 0 0 1px var(--ek-live); }
.bid-history__amount { font-size: 18px; font-weight: 400; color: var(--ek-white); }  /* .fig: 18px Regular #ffffff */
.bid-history__row.is-leading .bid-history__amount { color: var(--ek-live); }
.bid-history__user { font-size: 14px; font-weight: 400; letter-spacing: 0; color: #a8a8a8; text-transform: uppercase; }  /* .fig: 14px Regular #a8a8a8 */

/* Glossy round BID button */
.bid-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 118px; height: 118px; margin: 8px auto 0;
  border-radius: 50%;
  border: 0;
  background:
    radial-gradient(circle at 50% 32%, #ff5a63 0%, var(--ek-red) 42%, #8f0009 100%);
  box-shadow:
    0 0 0 6px #1a1a1a,
    0 0 22px rgba(227,6,19,.65),
    inset 0 2px 6px rgba(255,255,255,.5);
  color: var(--ek-white);
  font-size: 26px; font-weight: 700; letter-spacing: 2px;
  cursor: pointer;
}
.bid-btn:hover { filter: brightness(1.08); }
.bid-widget__cta {
  display: block; text-align: center; margin-top: 14px;
  font-size: 14px; letter-spacing: 1px; text-transform: uppercase;
  /* White everywhere, matching detail-page's own page-specific override
     (which already forces white and is unaffected by this — its rule is
     more specific). watch-list / comments never got that fix and were
     stuck on the older muted gray. */
  color: var(--ek-white);
}
.bid-widget__cta:hover { color: var(--ek-white); opacity: .8; }

/* ============================================================
   12. SPEC LIST  — .spec-list (light specifications panel)
   ============================================================ */
.spec-panel {
  background: var(--ek-panel-2);
  border-radius: var(--ek-radius);
  padding: 20px 20px 24px;
}
.spec-panel__title {
  margin: 0 0 16px;
  font-size: 15px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; color: var(--ek-ink);
}
.spec-list { list-style: none; margin: 0; padding: 0; }
.spec-list li { padding: 8px 0; border-bottom: 1px solid var(--ek-line); font-size: 15px; }
.spec-list li:last-child { border-bottom: 0; }
.spec-list strong { font-weight: 700; }

/* Definition-style spec table (label / value) */
.spec-table { width: 100%; border-collapse: collapse; }
.spec-table th,
.spec-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--ek-line); font-size: 15px; }
.spec-table th { width: 42%; font-weight: 400; color: var(--ek-muted); }

/* ============================================================
   13. GENERIC PAGE SECTION WRAPPER  — .section
   ============================================================ */
.section { padding: 34px 0; }
.section--tight { padding: 22px 0; }
.section--muted { background: var(--ek-panel-2); }
@media (min-width: 992px) { .section { padding: 52px 0; } }

/* Small utility badges (country flag chip, status pill) */
.ek-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 400; letter-spacing: .5px;
  background: var(--ek-panel); color: var(--ek-ink);
}
.ek-pill--red { background: var(--ek-red); color: var(--ek-white); }
.ek-pill--live { background: rgba(46,203,79,.14); color: var(--ek-live); }

/* Header logo lockup sizing now lives in scss/_header.scss (single
   source of truth) — the duplicate override was removed from here. */