/* Google Fonts request + the actual --font-display/--font-body values are emitted
   dynamically by header.php (Rcs\Fonts, admin-selectable in Nastavenia) - the
   values below are only the fallback if that override somehow isn't present. */

/* Fixed dark navy/gold theme (preverenievozidla.sk) - deliberate brand choice,
   not a light/dark toggle, so these are never redefined under
   prefers-color-scheme. */
:root {
  --bg: #0E1B2E;
  --bg-alt: #0A1524;
  --panel: #111F33;
  --text: #F4F2ED;
  --text-muted: #8A93A0;
  --label-muted: #6B7280;
  --gold: #B08D4F;
  --gold-hover: #D9BE86;
  --gold-text: #1A1206;
  --gold-glow: rgba(176, 141, 79, 0.45);
  --border: #1E2D42;
  --font-display: 'Fraunces', serif;
  --font-body: 'Inter', sans-serif;
  --max-width: 1160px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 500; margin: 0 0 16px; color: var(--text); }

a { color: inherit; }

.container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }

/* Header */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
}

.site-logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 19px; text-decoration: none; white-space: nowrap; color: var(--text); }
.site-logo img, .site-logo-mark { height: 34px; width: auto; display: block; flex-shrink: 0; }
.site-logo-tld { color: var(--gold); }

.site-nav { display: flex; align-items: center; gap: 14px; flex: 1; justify-content: flex-end; }
.nav-links { display: flex; align-items: center; gap: 30px; }
.site-nav a { color: #D9D5CB; font-size: 14px; font-weight: 500; text-decoration: none; padding: 6px 2px; transition: color .18s ease; }
.site-nav a:hover, .site-nav a.active { color: var(--text); }

/* Inline nav row shown directly in the header bar - desktop only (see the
   min-width media query below); on narrower viewports the hamburger dropdown
   (.nav-links) is the only way to reach these, so it's hidden by default here.
   margin-right reserves room for the fixed-position icon cluster (cart/phone/
   account/hamburger, ~185px including its right offset) plus a comfortable gap. */
.nav-links-bar { display: none; align-items: center; gap: 26px; margin-right: 210px; }

/* Cart/phone/account/hamburger float together, independent of the header (which
   scrolls away with the page), so they stay reachable at any scroll position -
   a background pill on each keeps them legible against whatever page content
   ends up underneath. right: tracks the centered .container's actual right
   edge (viewport edge minus half the leftover space beyond max-width, plus
   the container's own padding) instead of a flat viewport offset - a flat
   offset drifts away from the header content on viewports wider than
   max-width and the cluster ends up looking disconnected/"off". */
.nav-icons {
  position: fixed; top: 16px; z-index: 200;
  right: max(20px, calc((100vw - var(--max-width)) / 2 + 24px));
  display: flex; align-items: center; gap: 10px;
}
/* Not scoped to .nav-icons - .mobile-home-icon reuses this same badge look
   while living outside that fixed cluster (it's pinned to the opposite edge). */
.icon-link, .nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0; position: relative;
  background: rgba(14,27,46,0.85); border: 1px solid var(--border); border-radius: 50%;
  color: var(--text); text-decoration: none; cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,0.35);
}
.icon-link-gold { color: var(--gold); }
.cart-badge {
  position: absolute; top: -4px; right: -4px;
  background: var(--gold); color: var(--gold-text);
  font-size: 10px; font-weight: 600; width: 16px; height: 16px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
}

@media (min-width: 1000px) {
  .nav-links-bar { display: flex; }
  .nav-hide-desktop-duplicate { display: none !important; }
}

/* Mobile home icon + centered site name (replace the full logo below 1000px)
   and the account icon's desktop-only visibility - see .mobile-home-icon/
   .mobile-site-name/.icon-link-account-desktop usage in header.php. Declared
   after .icon-link so these overrides win over its plain `display: inline-flex`. */
.mobile-home-icon, .mobile-site-name { display: none; }
@media (max-width: 999px) {
  /* There isn't room for the full logo mark + name next to the icon cluster
     below 1000px - .site-logo isn't part of the same flex row as .nav-icons
     (it's fixed, deliberately, to stay reachable while scrolling), so nothing
     else shrinks it automatically. Swap the mark for a plain home icon and
     center the name on its own between the two icon clusters instead. */
  .site-logo { display: none; }
  .mobile-home-icon {
    display: inline-flex; position: fixed; top: 16px; z-index: 200;
    left: max(20px, calc((100vw - var(--max-width)) / 2 + 24px));
  }
  .mobile-site-name {
    /* left/right (not left:50%+transform) so the text centers within the actual
       gap between the two icon clusters, not the viewport as a whole - the
       clusters aren't symmetric (1 icon on the left, up to 3 on the right), so
       viewport-centering let a long name's right edge run under the cart icon. */
    display: block; position: fixed; top: 16px; z-index: 150;
    left: 68px; right: 154px;
    height: 38px; line-height: 38px; text-align: center;
    font-family: var(--font-display); font-size: 17px; color: var(--text); text-decoration: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    opacity: 1; transition: opacity .2s ease;
  }
  /* Toggled by the scroll listener in header.php - only the icons stay put once
     the page is scrolled, the name goes so it doesn't compete with page content. */
  .mobile-site-name.is-scrolled { opacity: 0; pointer-events: none; }
  /* Desktop keeps its own account icon in .nav-icons; mobile surfaces it as a
     plain item inside the hamburger dropdown instead. */
  .icon-link-account-desktop { display: none; }
}

/* max-height:0 + overflow:hidden alone isn't reliable on iOS Safari for a
   position:fixed flex container - it can leave the padding/border painted as a
   persistent thin strip pinned at `top`, even though the container's own content
   is clipped. Zeroing padding/border in the closed state (and restoring them only
   when .is-open) guarantees there's nothing left to render either way. bottom: 0
   (rather than a 100vh-based max-height) anchors the open state to the real
   visual viewport - 100vh on mobile Safari is the *largest* possible viewport
   (address bar collapsed), so a calc(100vh - ...) height can run past what's
   actually visible and leave the tail of a long menu unreachable. */
.nav-links {
  position: fixed; top: 73px; left: 0; right: 0; bottom: 0;
  background: var(--bg); border-bottom: 0 solid var(--border);
  flex-direction: column; align-items: flex-start; gap: 0;
  padding: 0 24px;
  max-height: 0; overflow: hidden;
  transition: max-height .25s ease, padding .25s ease;
  z-index: 100;
}
.nav-links.is-open {
  /* Large enough that it never actually clamps real content/viewport combos -
     the true height comes from top:73px + bottom:0 above, this just needs to
     clear that so the box isn't still capped at 0. overflow-y handles anything
     taller than the real (bottom:0-bounded) visible area. overscroll-behavior
     stops iOS Safari from chaining the touch scroll to the (position:fixed,
     scroll-locked) body underneath once this list hits its own top/bottom -
     without it, a scroll gesture that starts inside the menu can get handed off
     to the page behind it, which is what "stuck"/unreachable content looks like. */
  max-height: 2000px; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  padding: 8px 24px 16px;
  border-bottom: 1px solid var(--border);
}
.nav-links a { padding: 12px 0; width: 100%; border-bottom: 1px solid var(--border); }

/* Locks background scroll while the menu is open - without this, the page (and
   header/toggle button) can scroll out from under the fixed menu on iOS Safari,
   leaving it stuck open with no way to reach the toggle button to close it
   again. Locking body alone isn't reliable on iOS Safari - it still allows the
   page to rubber-band/scroll underneath, so html needs the same treatment. */
html.nav-open, html.nav-open body {
  overflow: hidden;
  height: 100%;
}
html.nav-open {
  position: fixed;
  left: 0; right: 0; width: 100%;
}
body.nav-open {
  position: fixed;
  left: 0; right: 0; width: 100%;
  overflow: hidden;
}

@media (max-width: 720px) {
  .nav-hide-mobile { display: none !important; }
}

/* Buttons */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  padding: 17px 30px;
  border-radius: 4px;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: box-shadow .18s ease, background .18s ease;
}
.btn-primary { background: var(--gold); color: var(--gold-text); }
.btn-primary:hover, .btn-primary:focus-visible {
  background: var(--gold-hover);
  box-shadow: 0 0 0 1px rgba(176,141,79,0.5), 0 0 18px 2px var(--gold-glow);
}
.btn-primary:active { box-shadow: 0 0 0 1px rgba(176,141,79,0.6), 0 0 10px 1px rgba(176,141,79,0.6); }

/* Default button look site-wide: gold outline, not solid fill - solid .btn-primary
   is reserved for at most one CTA per page section. */
.btn-outline {
  background: transparent;
  color: var(--gold-hover);
  border: 1px solid var(--gold);
}
.btn-outline:hover { color: var(--gold-hover); border-color: var(--gold-hover); background: rgba(176,141,79,0.08); }

/* Hero */
.hero { padding: 80px 0 64px; text-align: center; }
.hero h1 { font-size: 42px; max-width: 640px; margin: 0 auto 20px; }
.hero .subtitle { font-size: 18px; color: var(--text-muted); max-width: 560px; margin: 0 auto 12px; }
.hero .lead { font-size: 16px; line-height: 1.7; color: var(--text-muted); max-width: 480px; margin: 0 auto 32px; }

/* Sections */
section { padding: 64px 0; }
.section-label {
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gold); text-align: center; margin: 0 0 32px;
}

/* translateZ(0) + backface-visibility force a stable GPU compositing layer -
   without them, iOS Safari can leave ghosted/overlapping text behind after
   this transition runs, especially on custom-font headings. */
.reveal {
  opacity: 0; transform: translateY(16px) translateZ(0);
  transition: opacity .6s ease, transform .6s ease;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.reveal.is-visible { opacity: 1; transform: translateY(0) translateZ(0); }

/* Product cards */
.offer-grid { display: flex; flex-direction: column; gap: 14px; }

.card-service {
  display: flex; align-items: center; gap: 24px;
  background: var(--panel); border-radius: 12px; padding: 24px 28px;
}
.card-service-photo { width: 120px; height: 120px; object-fit: cover; border-radius: 10px; flex-shrink: 0; }
.card-service .info { flex: 1; min-width: 0; }
.card-service h3 { font-size: 19px; margin: 0 0 6px; }
.card-service .price { color: var(--gold); font-weight: 600; margin-bottom: 6px; }
.card-service p {
  font-size: 13px; color: var(--text-muted); margin: 0; line-height: 1.5;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.card-service .actions { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; }
.card-service .actions .btn { font-size: 13px; padding: 13px 18px; text-align: center; white-space: nowrap; }

.goods-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
@media (max-width: 800px) { .goods-grid { grid-template-columns: 1fr; } }

@media (max-width: 640px) {
  .card-service { flex-direction: column; align-items: stretch; gap: 16px; }
  .card-service .actions { flex-direction: row; }
  .card-service .actions .btn { flex: 1; }
  .card-service-photo { width: 100%; height: 160px; }

  /* Goods cards adopt the same shape as service cards on mobile (desktop/tablet
     keep their own distinct grid-card look, unchanged above this breakpoint). */
  .card-good {
    display: flex; flex-direction: column; align-items: stretch; gap: 16px;
    padding: 24px 28px; overflow: visible; text-align: left;
  }
  .card-good img { height: 160px; aspect-ratio: auto; border-radius: 10px; }
  .card-good .info { padding: 0; }
  .card-good h3 { font-size: 19px; }
}

.card-good {
  background: var(--panel); border-radius: 12px; overflow: hidden; text-align: center;
}
.card-good img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; background: #2b2c30; }
.card-good .info { padding: 18px; }
.card-good h3 { font-size: 16px; margin: 0 0 6px; }
.card-good .price { color: var(--gold); font-weight: 600; margin-bottom: 12px; }

/* Desktop-only size bump for /ponuka cards (801px matches the breakpoint that
   already collapses .goods-grid to 1 column, so nothing below it is touched). */
@media (min-width: 801px) {
  .goods-grid { gap: 28px; }
  .card-good .info { padding: 22px; }
  .card-good h3 { font-size: 18px; }
  .card-service { gap: 28px; padding: 28px 32px; }
  .card-service-photo { width: 160px; height: 160px; }
  .card-service h3 { font-size: 21px; }
}

/* Shared card-grid spacing for /preverene-vozidla and /blog, whose featured-row +
   small-grid layouts mirror each other. Desktop-only size bump below (801px
   matches each page's own grid-column-collapse breakpoint) - mobile untouched. */
.listing-featured-row { gap: 24px; margin-bottom: 24px; }
.listing-small-grid { gap: 20px; }
.listing-card-body { padding: 18px 20px; }
.listing-card-body h3 { font-size: 16px; margin: 0 0 8px; color: var(--text); }
.listing-card-body-secondary { padding: 20px 22px; }
.listing-card-body-secondary h2 { font-size: 18px; margin: 0 0 10px; color: var(--text); }
.listing-card-body-featured { padding: 26px 28px; }
.listing-card-body-featured h2 { font-size: 24px; margin: 0 0 10px; color: var(--text); }

@media (min-width: 801px) {
  .listing-featured-row { gap: 32px; margin-bottom: 32px; }
  .listing-small-grid { gap: 32px; }
  .listing-card-body { padding: 22px 24px; }
  .listing-card-body h3 { font-size: 18px; }
  .listing-card-body-secondary { padding: 26px 28px; }
  .listing-card-body-secondary h2 { font-size: 21px; }
  .listing-card-body-featured { padding: 34px 36px; }
  .listing-card-body-featured h2 { font-size: 28px; }
}

/* Footer */
.site-footer { padding: 32px 0; text-align: center; border-top: 1px solid var(--border); background: var(--bg-alt); }
.site-footer p { font-size: 12px; color: var(--label-muted); margin: 0; }

/* Forms (public + admin) */
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 13px; color: var(--label-muted); margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; background: var(--panel); border: 1px solid var(--border);
  color: var(--text); border-radius: 6px; padding: 12px 14px; font-family: var(--font-body); font-size: 14px;
}
.field textarea { resize: vertical; min-height: 90px; }
.field-check { display: flex; align-items: center; gap: 8px; }
.field-check input { width: auto; }
.field-check label { display: inline; margin-bottom: 0; }

/* Lightweight cross-sell cards: "Súvisiaci tovar" (product page) and "Zákazníci zakúpili tiež" (cart) */
.simple-product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.simple-product-card {
  display: block; background: var(--panel); border-radius: 10px; overflow: hidden;
  text-decoration: none; color: var(--text); transition: transform .15s;
}
.simple-product-card:hover { transform: translateY(-3px); }
.simple-product-card img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; background: #2b2c30; }
.simple-product-card .info { padding: 12px 14px; }
.simple-product-card h4 { font-size: 14px; margin: 0 0 4px; font-weight: 600; }
.simple-product-card .price { font-size: 13px; color: var(--gold); font-weight: 600; }

/* Selectable add-on cards (booking flow "Doplnkové služby") - same look as .simple-product-card, plus a checked state */
.addon-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.addon-card {
  display: block; position: relative; background: var(--bg); border: 2px solid var(--border); border-radius: 10px;
  overflow: hidden; cursor: pointer; transition: border-color .15s;
}
.addon-card:has(input:checked) { border-color: var(--gold); }
.addon-card input[type=checkbox] { position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; accent-color: var(--gold); cursor: pointer; }
.addon-card img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; background: #2b2c30; }
.addon-card .info { padding: 12px 14px; }
.addon-card h4 { font-size: 14px; margin: 0 0 4px; font-weight: 600; }
.addon-card .price { font-size: 13px; color: var(--gold); font-weight: 600; }

/* Ponuka page: Všetko/Služby/Produkty type toggle */
.type-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.type-tabs a {
  padding: 9px 20px; border-radius: 30px; font-size: 13px; text-decoration: none;
  color: var(--text-muted); background: var(--panel); border: 1px solid var(--border);
  transition: background .15s, color .15s, border-color .15s;
}
.type-tabs a.active { background: var(--gold); color: var(--bg); font-weight: 600; border-color: var(--gold); }
.type-tabs a:hover:not(.active) { color: var(--text); border-color: rgba(247,244,238,0.3); }

/* Site-wide floating back-to-top button - hidden until scrolled, fades in via JS-toggled class. */
#back-to-top {
  position: fixed; right: 24px; bottom: 24px; z-index: 500;
  width: 52px; height: 52px; border-radius: 14px;
  background: var(--bg); border: 2px solid var(--gold); color: var(--gold);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 0 0 1px rgba(176,141,79,0.5), 0 0 18px 2px var(--gold-glow);
  opacity: 0; pointer-events: none; transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease;
}
#back-to-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
@media (max-width: 640px) {
  #back-to-top { right: 16px; bottom: 16px; width: 48px; height: 48px; }
}

/* Footer partner logos - dynamic list, wraps responsively on mobile. */
.partner-row { display: flex; justify-content: center; align-items: center; gap: 20px; flex-wrap: wrap; }
.partner-logo {
  width: 110px; height: 56px; border-radius: 8px;
  background: rgba(242,239,233,0.06); border: 1px solid rgba(242,239,233,0.14);
  display: flex; align-items: center; justify-content: center; padding: 8px;
  transition: border-color .2s, background .2s;
}
a.partner-logo:hover { border-color: var(--gold); background: rgba(176,141,79,0.12); }
.partner-logo-img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* Hero trust stats - small "value + label" chips below the hero CTA. */
.hero-stats { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; margin-top: 40px; }
.hero-stat { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.hero-stat-value { font-family: var(--font-display); font-size: 24px; color: var(--text); }
.hero-stat-label { font-size: 12px; color: var(--text-muted); }

/* Icon/step + title + description card grid - "Ako to funguje" (numbered steps)
   and "Služby" (curated products, dynamic_source=sluzby) share this shape. */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; text-align: left; }
@media (max-width: 800px) { .feature-grid { grid-template-columns: 1fr; } }
.feature-card {
  display: block; background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 28px 26px; text-decoration: none; color: inherit;
}
.feature-card-icon { color: var(--gold); margin-bottom: 14px; }
.feature-card-step {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--gold);
  color: var(--gold); font-family: var(--font-display); font-size: 14px; margin-bottom: 14px;
}
.feature-card h3 { font-size: 17px; margin: 0 0 8px; }
.feature-card p { font-size: 13px; color: var(--text-muted); margin: 0; line-height: 1.6; }
a.feature-card:hover { border-color: var(--gold); }

/* "Predajné argumenty" (trust/selling points, dynamic_source=predajne_argumenty) -
   4 equal columns on desktop, icon centered above title/description in each; a
   single stacked column on mobile, each item as icon-left/text-right instead of
   icon-on-top, per spec. No card background/border like .feature-card - these sit
   directly on the section background as a plain icon+text row. */
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; text-align: center; }
@media (max-width: 800px) { .trust-grid { grid-template-columns: 1fr; text-align: left; gap: 22px; } }
.trust-card { display: flex; flex-direction: column; align-items: center; }
@media (max-width: 800px) { .trust-card { flex-direction: row; align-items: flex-start; gap: 16px; } }
.trust-card-icon { color: var(--gold); margin-bottom: 14px; flex-shrink: 0; line-height: 0; }
@media (max-width: 800px) { .trust-card-icon { margin-bottom: 0; } }
.trust-card h3 { font-size: 16px; color: var(--text); margin: 0 0 8px; }
.trust-card p { font-size: 13px; color: var(--text-muted); margin: 0; line-height: 1.6; }

/* Services variant (dynamic_source=sluzby) - a thumbnail photo up top instead of
   the icon/step badge, same top-image-then-info shape as .card-good product cards.
   display:flex + height:100% makes every card in a grid row match the row's
   height (CSS Grid stretches items by default, but Safari needs this spelled
   out explicitly for a flex child to actually fill that stretched height). */
.feature-card-service { padding: 0; overflow: hidden; display: flex; flex-direction: column; height: 100%; }
/* Clickable div (not <a>, since it now has real buttons inside that need their
   own click targets - event.stopPropagation() on those keeps the outer
   navigate-to-detail click from also firing), so the hover feedback needs its
   own class-based rule instead of the a.feature-card:hover above. */
.feature-card-service:hover { border-color: var(--gold); }
.feature-card-photo { width: 100%; aspect-ratio: 1.6; object-fit: cover; display: block; background: #2b2c30; flex-shrink: 0; }
.feature-card-body { padding: 20px 26px 26px; }
.feature-card-body h3 { margin-top: 0; }
.feature-card-body .price { color: var(--gold); font-weight: 600; margin: 4px 0 8px; }
.feature-card-body p {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
.feature-card-body .actions { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.feature-card-body .actions .btn { font-size: 13px; padding: 12px 16px; text-align: center; width: 100%; }

/* Homepage teaser rows (services/vehicles/blog) share the same 640px cap as every
   other homepage section by default (untouched on mobile/tablet), but widen on
   real desktop so their cards get noticeably bigger, matching the enlargement
   already applied to /ponuka, /preverene-vozidla and /blog. */
.container-home-teaser { max-width: 640px; }
.vehicle-home-row, .blog-home-row, .review-home-row { gap: 16px; }
.home-teaser-card-body { padding: 18px; }
.home-teaser-card-body h3 { font-size: 16px; margin: 0 0 8px; color: var(--text); }

/* Review card text - truncated to a few lines with an ellipsis, same clamp pattern
   as .card-service p - used on both the homepage row and the /referencie grid. */
.review-card-text {
  font-size: 13px; color: var(--text-muted); margin: 0; line-height: 1.6;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}

@media (min-width: 801px) {
  .container-home-teaser { max-width: 1320px; }
  .home-services-grid { gap: 28px; }
  .home-services-grid .feature-card-body { padding: 26px 32px 32px; }
  .home-services-grid .feature-card-body h3 { font-size: 19px; }
  .home-teaser-card-body { padding: 24px 26px; }
  .home-teaser-card-body h3 { font-size: 19px; }
  .vehicle-home-row, .blog-home-row, .review-home-row { gap: 24px; }
}

/* "Preverili sme" checked-vehicle photo rotator (2-up desktop / 1-up mobile,
   swipeable, page dots) and the matching full grid on /preverene-vozidla. */
.checked-vehicles-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; scrollbar-width: none; }
.checked-vehicles-track::-webkit-scrollbar { display: none; }
.checked-vehicle-slide-link {
  display: block; flex-shrink: 0; scroll-snap-align: start;
  width: 100%; color: inherit; text-decoration: none;
}
@media (min-width: 700px) { .checked-vehicle-slide-link { width: calc(50% - 8px); } }
.checked-vehicle-slide {
  margin: 0; border-radius: 12px; overflow: hidden; background: var(--panel);
}
.checked-vehicle-slide img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.checked-vehicle-slide figcaption { padding: 12px 14px; font-size: 13px; color: var(--text-muted); display: flex; flex-direction: column; gap: 8px; }

/* /preverene-vozidla's featured/secondary/grid cards are built inline in
   page-section.php (matching /blog's own inline-styled card markup exactly),
   so only the shared multi-photo rotator styling lives here as a class. */
.checked-vehicle-tile-rotator { position: relative; }
.checked-vehicle-tile-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.checked-vehicle-tile-track::-webkit-scrollbar { display: none; }
.checked-vehicle-tile-slide { width: 100%; flex-shrink: 0; scroll-snap-align: start; aspect-ratio: 1.4; object-fit: cover; display: block; }
.checked-vehicle-tile-rotator .hero-rotator-arrow { width: 34px; height: 34px; font-size: 18px; }
.checked-vehicle-tile-rotator .hero-rotator-arrow-left { left: 8px; }
.checked-vehicle-tile-rotator .hero-rotator-arrow-right { right: 8px; }
.checked-vehicle-tile-rotator .rotator-dots { margin-top: 8px; padding-bottom: 8px; }

.vehicle-status-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; }
.vehicle-status-icon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; }

/* Generic scroll-mode rotator page dots (see rotator.js initScrollRotator()). */
.rotator-dots { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.rotator-dot {
  width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--gold);
  background: transparent; padding: 0; cursor: pointer;
}
.rotator-dot.active { background: var(--gold); }

/* Customer account: login/register cards, dashboard header/tiles/activity feed. */
.auth-card { background: var(--panel); border-radius: 12px; padding: 32px 28px; max-width: 380px; margin: 0 auto; }
.auth-icon-badge {
  width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--gold);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; color: var(--gold);
}
.auth-heading { text-align: center; font-size: 22px; margin: 0 0 6px; }
.auth-subtext { text-align: center; color: var(--text-muted); font-size: 13px; margin: 0 0 24px; }
.social-btn-group { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.social-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  padding: 12px 16px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg-alt);
  color: var(--text); text-decoration: none; font-size: 14px; font-weight: 500;
  transition: border-color .18s ease, background .18s ease;
}
.social-btn:hover { border-color: var(--gold); background: rgba(176,141,79,0.08); }
.social-btn svg { flex-shrink: 0; }
.social-note { text-align: center; font-size: 11px; color: var(--text-muted); margin: -8px 0 18px; line-height: 1.5; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 4px 0 20px; color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.auth-footer-link { text-align: center; margin-top: 20px; font-size: 13px; color: var(--text-muted); }
.auth-footer-link a { color: var(--gold); }

.account-back-link { display: inline-block; margin-bottom: 20px; color: var(--gold); font-size: 13px; text-decoration: none; }
.account-header { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
.account-avatar {
  width: 52px; height: 52px; border-radius: 50%; background: rgba(176,141,79,0.18); color: var(--gold);
  display: flex; align-items: center; justify-content: center; font-family: var(--font-display);
  font-size: 18px; font-weight: 600; flex-shrink: 0;
}
.account-greeting h1 { font-size: 20px; margin: 0 0 2px; }
.account-greeting span { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }

.account-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 36px; }
@media (min-width: 640px) { .account-tiles { grid-template-columns: repeat(4, 1fr); } }
.account-tile {
  display: flex; flex-direction: column; justify-content: space-between; background: var(--panel);
  border: 1px solid var(--border); border-radius: 12px; padding: 20px; min-height: 118px;
  text-decoration: none; color: inherit; transition: border-color .18s ease;
}
.account-tile:hover { border-color: var(--gold); }
.account-tile-icon { color: var(--gold); }
.account-tile-count { font-family: var(--font-display); font-size: 26px; color: var(--text); margin-top: 10px; }
.account-tile-label { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

.account-activity h2 { font-size: 16px; margin-bottom: 14px; }
.account-activity-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 14px 18px; background: var(--panel); border-radius: 10px; margin-bottom: 8px;
  text-decoration: none; color: inherit; transition: background .18s ease;
}
.account-activity-row:hover { background: rgba(176,141,79,0.08); }
.account-activity-date { font-size: 12px; color: var(--text-muted); white-space: nowrap; }

.fvp-overlay {
  position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(6,11,20,0.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.fvp-modal {
  width: 100%; max-width: 420px; background: var(--panel); border: 1px solid var(--border);
  border-radius: 14px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.45);
}
.fvp-header {
  position: relative; display: flex; align-items: center; justify-content: center; padding: 30px 24px;
  background: linear-gradient(135deg, var(--bg-alt), var(--bg));
}
.fvp-close {
  position: absolute; top: 12px; right: 12px; background: none; border: none; cursor: pointer;
  color: var(--text-muted); padding: 6px; line-height: 0;
}
.fvp-close:hover { color: var(--text); }
.fvp-gift-icon { color: var(--gold); }
.fvp-body { padding: 24px 28px 28px; text-align: center; }
.fvp-body h3 { font-size: 20px; margin-bottom: 10px; }
.fvp-description { font-size: 14px; color: var(--text-muted); margin-bottom: 20px; }
#fvp-form { display: flex; flex-direction: column; gap: 14px; }
.fvp-email-input {
  width: 100%; box-sizing: border-box; background: var(--bg-alt); border: 1px solid var(--border);
  color: var(--text); border-radius: 6px; padding: 12px 14px; font-size: 14px;
}
.fvp-checkbox-row { display: flex; align-items: flex-start; gap: 8px; text-align: left; font-size: 12px; color: var(--text-muted); cursor: pointer; }
.fvp-checkbox-row input { margin-top: 2px; flex-shrink: 0; }
.fvp-submit-btn {
  background: var(--gold); color: var(--gold-text); border: none; border-radius: 6px; padding: 13px;
  font-size: 15px; font-weight: 600; cursor: pointer; transition: background .18s ease;
}
.fvp-submit-btn:hover { background: var(--gold-hover); }
.fvp-submit-btn:disabled { opacity: 0.6; cursor: default; }
.fvp-result-message { font-size: 14px; color: var(--text); margin: 6px 0 0; }
.fvp-dismiss-link {
  display: block; width: 100%; margin-top: 16px; background: none; border: none; cursor: pointer;
  color: var(--gold); font-size: 12px; font-weight: 400; text-decoration: underline;
}
.fvp-dismiss-link:hover { color: var(--gold-hover); }