/**
 * KLS Auto public frontend — premium design layer (v4).
 * Presentation only: no visibility, state or interaction logic lives here.
 * Loaded after the page-level styles on the whole public journey.
 *
 * Sistem:
 *  - Jedan akcent: AMBER/ZLATNA rampa (originalni KLS ton) — orange sloj (B631) uklonjen.
 *  - Tipografija: Inter Tight (display naslovi, B641) + Manrope (tijelo/UI); Poppins fallback.
 *  - Jedan izvor svjetla: elevacija --e1..--e4 + inset gornja ivica; nema ad-hoc sjena.
 *  - Radius skala: --r-sm/--r-md/--r-lg/--r-pill; nema ad-hoc radiusa.
 *  - Dubina: noise tekstura + amber glow + gradient hairline okviri, ne "veće sjene".
 *  - Pokret: CSS-only (view-timeline uz @supports), mikro-odziv na hover/press/focus.
 *  - Pun paritet dark/light teme.
 *
 * Očuvano iz B631/B632 (ne dirati bez razloga):
 *  - mobilni process stepper grid, short-viewport hero režim,
 *  - blog editorial raspored, process-grid::before content:none,
 *  - footer trust-row wrap.
 */

/* ============================================================
   0. TOKENI
   ============================================================ */
:root {
  /* Površine */
  --premium-bg: #07101d;
  --premium-bg-raised: #0b1627;
  --premium-panel: rgba(13, 25, 43, 0.9);
  --premium-panel-strong: rgba(9, 18, 33, 0.96);
  --premium-panel-soft: rgba(255, 255, 255, 0.055);
  --premium-line: rgba(255, 255, 255, 0.105);
  --premium-line-strong: rgba(255, 255, 255, 0.17);
  --premium-text: #f8fafc;
  --premium-muted: #bac6d5;

  /* Brand — amber/zlatna rampa (jedina topla boja u sistemu) */
  --brand-hi: #fcd34d;
  --brand: #f59e0b;
  --brand-mid: #d97706;
  --brand-deep: #b45309;
  --brand-ink: #221302;            /* tekst NA amber površini */
  --brand-soft: rgba(245, 158, 11, 0.12);
  --brand-line: rgba(245, 158, 11, 0.28);
  --brand-glow: rgba(245, 158, 11, 0.14);

  /* Tipografija (B641: Fraunces → Inter Tight po odluci korisnika — Apple/Stripe corp) */
  --font-display: "Inter Tight", "Manrope", system-ui, sans-serif;
  --font-sans: "Manrope", "Poppins", system-ui, sans-serif;

  /* Elevacija — jedan izvor svjetla (gore), 4 nivoa */
  --e1: 0 1px 2px rgba(2, 8, 23, 0.3), 0 2px 8px rgba(2, 8, 23, 0.18);
  --e2: 0 2px 6px rgba(2, 8, 23, 0.26), 0 12px 28px rgba(2, 8, 23, 0.26);
  --e3: 0 4px 10px rgba(2, 8, 23, 0.28), 0 22px 48px rgba(2, 8, 23, 0.34);
  --e4: 0 8px 18px rgba(2, 8, 23, 0.32), 0 34px 80px rgba(2, 8, 23, 0.44);
  --edge-light: inset 0 1px 0 rgba(255, 255, 255, 0.055);
  --edge-light-strong: inset 0 1px 0 rgba(255, 255, 255, 0.085);

  /* Radius skala */
  --r-sm: 0.65rem;
  --r-md: 1rem;
  --r-lg: 1.4rem;
  --r-pill: 999px;

  /* Kompatibilnost sa starim imenima (interno) */
  --premium-radius-sm: var(--r-sm);
  --premium-radius-md: var(--r-md);
  --premium-radius-lg: var(--r-lg);
  --premium-shadow-1: var(--e1);
  --premium-shadow-2: var(--e2);
  --premium-shadow-3: var(--e3);

  --premium-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Noise tekstura (SVG feTurbulence, data URI — 0 KB mreže) */
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  --noise-opacity: 0.05;
}

html[data-theme="light"] {
  --premium-bg: #eef3f9;
  --premium-bg-raised: #f7fafd;
  --premium-panel: rgba(255, 255, 255, 0.92);
  --premium-panel-strong: rgba(255, 255, 255, 0.98);
  --premium-panel-soft: rgba(15, 23, 42, 0.045);
  --premium-line: rgba(15, 23, 42, 0.1);
  --premium-line-strong: rgba(15, 23, 42, 0.16);
  --premium-text: #0f172a;
  --premium-muted: #506076;

  --brand-soft: rgba(245, 158, 11, 0.14);
  --brand-line: rgba(217, 119, 6, 0.34);
  --brand-glow: rgba(245, 158, 11, 0.16);

  --e1: 0 1px 2px rgba(15, 23, 42, 0.07), 0 2px 8px rgba(15, 23, 42, 0.05);
  --e2: 0 2px 6px rgba(15, 23, 42, 0.06), 0 12px 28px rgba(15, 23, 42, 0.08);
  --e3: 0 4px 10px rgba(15, 23, 42, 0.07), 0 22px 48px rgba(15, 23, 42, 0.1);
  --e4: 0 8px 18px rgba(15, 23, 42, 0.08), 0 34px 80px rgba(15, 23, 42, 0.13);
  --edge-light: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  --edge-light-strong: inset 0 1px 0 rgba(255, 255, 255, 1);

  --noise-opacity: 0.032;
}

/* ============================================================
   1. TIPOGRAFIJA — Inter Tight display + Manrope tijelo
   ============================================================ */
body {
  font-family: var(--font-sans);
}

/* Display naslovi: Inter Tight — tijesan korporativni grotesk (B641). */
.hero-headline,
.section-title,
.location-title,
.faq-page .faq-hero h1,
.faq-section-title,
.rez-main h1,
.blog-main .blog-hero h1,
.blog-main .blog-card h2,
.post-main .post-hero h1,
.post-main .post-body h2,
.post-main .post-body h3,
.notfound-code {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.028em;
}

.process-card-title,
.benefit-title,
.location-card-title,
.card-title,
.vehicle-title,
.airport-service-title,
.airport-step-head,
.airport-trust-card__title,
.status-title,
.rc-title {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: -0.01em;
}

::selection {
  background: rgba(245, 158, 11, 0.3);
  color: inherit;
}

/* Kicker/eyebrow — zlatna linija-rekvizit sa obje strane kod centriranih headera */
.section-kicker,
.hero-eyebrow,
.card-eyebrow,
.location-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--brand);
}

.section-kicker::before,
.location-kicker::before,
.section-header--center .section-kicker::after,
.copy-center .section-kicker::after,
.copy-center .location-kicker::after {
  content: "";
  width: 1.35rem;
  height: 1px;
  flex: none;
  background: linear-gradient(90deg, transparent, var(--brand) 55%, var(--brand-hi));
}

.section-header--center .section-kicker::after,
.copy-center .section-kicker::after,
.copy-center .location-kicker::after {
  background: linear-gradient(90deg, var(--brand-hi), var(--brand) 45%, transparent);
}

/* .section-header je display:grid → kicker (inline-flex) se BLOKIFICIRA u flex i razvuče
   preko cijele kolone, pa ga text-align:center iz --center ne pomjera. Grid item se
   centrira samo kroz justify-self. */
.section-header--center .section-kicker {
  justify-self: center;
}

/* Centrirani naslovni blok u dvokolonskim sekcijama (#lokacija, #zavrsni-cta):
   centrira se SAMO kicker + naslov + uvodni pasus; kartice, pilule i dugmad ispod
   ostaju lijevo poravnati. Desna kolona (mapa / brza dugmad) se ne dira. */
.copy-center {
  text-align: center;
}

.copy-center .section-title,
.copy-center .location-title,
.copy-center .section-text,
.copy-center .location-text {
  margin-left: auto;
  margin-right: auto;
}

/* Kicker je ovdje inline-flex unutar običnog bloka pa ga hvata text-align; justify-content
   je osigurač ako ga neki nadređeni layout ipak razvuče na punu širinu. */
.copy-center .section-kicker,
.copy-center .location-kicker {
  justify-content: center;
}

html[data-theme="light"] .section-kicker,
html[data-theme="light"] .hero-eyebrow,
html[data-theme="light"] .card-eyebrow,
html[data-theme="light"] .location-kicker {
  color: var(--brand-mid);
}

/* ============================================================
   2. FOKUS, SCROLLBAR, MIKRO-OSNOVE
   ============================================================ */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 0.35rem;
}

@media (min-width: 1024px) {
  html {
    scrollbar-width: thin;
    scrollbar-color: rgba(245, 158, 11, 0.35) rgba(7, 16, 29, 0.4);
  }

  html[data-theme="light"] {
    scrollbar-color: rgba(217, 119, 6, 0.4) rgba(15, 23, 42, 0.08);
  }
}

/* ============================================================
   3. DUGMAD — amber konverzijska rampa, taman tekst (Hertz signal)
   ============================================================ */
#main-header .header-reserve-btn,
.quick-cta-btn,
.faq-btn--primary,
.rez-search-btn,
.hero-online-rez-mobile,
.hero-primary-btn,
.cta-btn-solid,
.final-cta-link--primary,
.location-nav-btn,
.vc-btn:not(.disabled) {
  background: linear-gradient(160deg, var(--brand-hi) 0%, var(--brand) 52%, var(--brand-mid) 100%);
  color: var(--brand-ink);
  font-weight: 700;
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 10px 26px rgba(245, 158, 11, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.42), inset 0 -1px 0 rgba(146, 64, 14, 0.28);
  text-shadow: none;
  transition: transform 0.18s var(--premium-ease), box-shadow 0.2s ease, background 0.2s ease, filter 0.2s ease;
}

#main-header .header-reserve-btn:hover,
.quick-cta-btn:hover,
.faq-btn--primary:hover,
.rez-search-btn:hover,
.hero-online-rez-mobile:hover,
.hero-primary-btn:hover,
.cta-btn-solid:hover,
.final-cta-link--primary:hover,
.location-nav-btn:hover,
.vc-btn:not(.disabled):hover {
  background: linear-gradient(160deg, #fde68a 0%, var(--brand-hi) 40%, var(--brand) 100%);
  color: var(--brand-ink);
  box-shadow: 0 14px 34px rgba(245, 158, 11, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(146, 64, 14, 0.24);
  transform: translateY(-2px);
}

#main-header .header-reserve-btn:active,
.quick-cta-btn:active,
.faq-btn--primary:active,
.rez-search-btn:active,
.hero-online-rez-mobile:active,
.hero-primary-btn:active,
.cta-btn-solid:active,
.final-cta-link--primary:active,
.location-nav-btn:active,
.vc-btn:not(.disabled):active {
  transform: translateY(0) scale(0.985);
  box-shadow: 0 6px 16px rgba(245, 158, 11, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* Booking submit u hero kartici — ista rampa */
.landing-page #home .hero-booking-card button[type="submit"] {
  background: linear-gradient(160deg, var(--brand-hi) 0%, var(--brand) 52%, var(--brand-mid) 100%);
  color: var(--brand-ink);
  font-weight: 700;
  box-shadow: 0 12px 28px rgba(245, 158, 11, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.42), inset 0 -1px 0 rgba(146, 64, 14, 0.28);
  transition: transform 0.18s var(--premium-ease), box-shadow 0.2s ease, background 0.2s ease;
}

.landing-page #home .hero-booking-card button[type="submit"]:hover {
  background: linear-gradient(160deg, #fde68a 0%, var(--brand-hi) 40%, var(--brand) 100%);
  color: var(--brand-ink);
  box-shadow: 0 16px 36px rgba(245, 158, 11, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
}

.landing-page #home .hero-booking-card button[type="submit"]:active {
  transform: translateY(0) scale(0.985);
}

/* page-airport.css ima `.landing-page a { color: inherit }` (0,1,1) koji tuče
   klasu dugmeta (0,1,0) — sidramo boju teksta anchor-formom veće specifičnosti. */
.landing-page a.cta-btn-solid,
.landing-page a.hero-primary-btn,
.landing-page a.hero-online-rez-mobile,
.landing-page a.final-cta-link--primary,
.landing-page a.location-nav-btn,
a.cta-btn-solid,
a.hero-primary-btn,
a.quick-cta-btn,
a.faq-btn--primary,
a.final-cta-link--primary,
a.location-nav-btn {
  color: var(--brand-ink);
}

/* Mobilni "Online rezervacija" CTA — inline blok (ciglasta crvena + #fff !important)
   ima html[data-theme] specifičnost, pa ga tučemo istom prefiksiranom formom. */
html[data-theme="dark"] .hero-online-rez-mobile,
html[data-theme="light"] .hero-online-rez-mobile {
  background: linear-gradient(160deg, var(--brand-hi) 0%, var(--brand) 52%, var(--brand-mid) 100%);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 10px 26px rgba(245, 158, 11, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.42), inset 0 -1px 0 rgba(146, 64, 14, 0.28);
}

html[data-theme="dark"] .hero-online-rez-mobile,
html[data-theme="light"] .hero-online-rez-mobile,
html[data-theme="dark"] .hero-online-rez-mobile:visited,
html[data-theme="light"] .hero-online-rez-mobile:visited {
  color: var(--brand-ink) !important;
}

html[data-theme="dark"] .hero-online-rez-mobile i,
html[data-theme="light"] .hero-online-rez-mobile i {
  color: var(--brand-ink) !important;
  filter: none;
}

/* Sekundarna dugmad — staklo, amber ivica na hover */
.hero-secondary-btn,
.final-cta-link--secondary {
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.18s var(--premium-ease);
}

.hero-secondary-btn:hover,
.final-cta-link--secondary:hover {
  border-color: var(--brand-line);
  transform: translateY(-1px);
}

.hero-secondary-btn:active,
.final-cta-link--secondary:active {
  transform: translateY(0) scale(0.99);
}

/* ============================================================
   4. ZAJEDNIČKI CHROME — header i footer
   ============================================================ */
#main-header {
  background: linear-gradient(135deg, rgba(7, 16, 29, 0.9), rgba(12, 23, 40, 0.86)) !important;
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.045) inset, 0 14px 38px rgba(2, 8, 23, 0.28) !important;
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
}

html[data-theme="light"] #main-header {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(244, 248, 252, 0.88)) !important;
  border-bottom-color: rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 14px 38px rgba(15, 23, 42, 0.09) !important;
}

.footer-modern {
  position: relative;
  isolation: isolate;
  background: linear-gradient(180deg, #07101d 0%, #030914 100%) !important;
  border-top: 0 !important;
}

/* Zlatna hairline granica footera — brand potpis umjesto sive linije */
.footer-modern::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent 4%, rgba(245, 158, 11, 0.42) 28%, rgba(252, 211, 77, 0.55) 50%, rgba(245, 158, 11, 0.42) 72%, transparent 96%);
  pointer-events: none;
}

.footer-modern::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    var(--noise),
    radial-gradient(circle at 18% 0%, var(--brand-glow), transparent 46%);
  background-size: 160px 160px, auto;
  opacity: 1;
}

.footer-modern > * {
  position: relative;
}

html[data-theme="light"] .footer-modern {
  background: linear-gradient(180deg, #e8eef5 0%, #dce5ef 100%) !important;
}

.footer-modern #google-reviews-footer .review-card,
.footer-modern .trust-badge {
  border-color: var(--premium-line);
  box-shadow: var(--e1), var(--edge-light);
  transition: border-color 0.2s ease, transform 0.2s var(--premium-ease);
}

.footer-modern #google-reviews-footer .review-card:hover,
.footer-modern .trust-badge:hover {
  border-color: var(--brand-line);
  transform: translateY(-2px);
}

.footer-modern .trust-row {
  flex-wrap: wrap;
  overflow: visible;
}

.footer-modern .trust-row .trust-badge {
  flex: 1 1 9rem;
  min-width: 0;
}

.footer-modern a {
  transition: color 0.18s ease;
}

.footer-modern a:hover {
  color: var(--brand-hi);
}

html[data-theme="light"] .footer-modern a:hover {
  color: var(--brand-mid);
}

/* ============================================================
   5. POČETNA — hero
   ============================================================ */
.landing-page .scroll-container {
  background: transparent;
}

.landing-page #home {
  position: relative;
  isolation: isolate;
}

.landing-page #home::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 9rem;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(7, 16, 29, 0.66));
}

.landing-page #home .hero-copy,
.landing-page #home .hero-booking-card {
  border-radius: var(--r-lg);
}

.landing-page #home .hero-copy::before {
  background: linear-gradient(155deg, rgba(8, 17, 31, 0.85), rgba(14, 27, 47, 0.68));
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: var(--e3), var(--edge-light);
  backdrop-filter: blur(18px) saturate(125%);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
}

/* Booking kartica — najviša elevacija na stranici + zlatni hairline okvir */
.landing-page #home .hero-booking-card::before {
  background:
    linear-gradient(155deg, rgba(10, 20, 35, 0.96), rgba(17, 32, 53, 0.91)) padding-box,
    linear-gradient(165deg, rgba(252, 211, 77, 0.5), rgba(245, 158, 11, 0.16) 38%, rgba(255, 255, 255, 0.09) 72%, rgba(245, 158, 11, 0.28)) border-box;
  border: 1px solid transparent;
  box-shadow: var(--e4), 0 0 42px rgba(245, 158, 11, 0.07), var(--edge-light-strong);
  backdrop-filter: blur(22px) saturate(130%);
  -webkit-backdrop-filter: blur(22px) saturate(130%);
}

html[data-theme="light"] .landing-page #home .hero-copy::before {
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.91), rgba(246, 249, 252, 0.8));
  border-color: rgba(255, 255, 255, 0.72);
  box-shadow: var(--e3), var(--edge-light);
}

html[data-theme="light"] .landing-page #home .hero-booking-card::before {
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.95)) padding-box,
    linear-gradient(165deg, rgba(217, 119, 6, 0.45), rgba(245, 158, 11, 0.14) 38%, rgba(15, 23, 42, 0.08) 72%, rgba(217, 119, 6, 0.28)) border-box;
  border: 1px solid transparent;
  box-shadow: var(--e4), 0 0 42px rgba(245, 158, 11, 0.08);
}

.landing-page #home .hero-headline {
  max-width: 100%;
  font-size: clamp(1.95rem, 4.3vw, 3.45rem);
  line-height: 1.07;
  letter-spacing: -0.015em;
  text-wrap: balance;
  text-shadow: 0 2px 20px rgba(2, 8, 23, 0.28);
}

/* H1 varijante: puni (SEO/desktop) vs kratki (mobilni) — obje u DOM-u */
.hero-headline-short {
  display: none;
}

/* Trust blok v3 (B638): sve 4 stavke ravnopravno u jednoj liniji ("Bez depozita"
   sa ostalima — odluka korisnika; posebna kartica ukinuta u korist mirnoće) */
.landing-page #home .hero-trust-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55rem;
}

.landing-page #home .hero-trust-line {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
}

.landing-page #home .hero-trust-line .hero-trust-item {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  min-height: 0;
  width: auto;
  font-size: 0.8rem;
  gap: 0.4rem;
}

.landing-page #home .hero-subtext {
  max-width: 42rem;
  color: #d7e0eb;
}

html[data-theme="light"] .landing-page #home .hero-subtext {
  color: #475569;
}

.landing-page #home .hero-chip,
.landing-page #home .hero-trust-item {
  background: rgba(8, 17, 31, 0.62);
  border-color: rgba(255, 255, 255, 0.11);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: border-color 0.2s ease, background 0.2s ease;
}

.landing-page #home .hero-chip:hover {
  border-color: var(--brand-line);
  background: rgba(8, 17, 31, 0.78);
}

.landing-page #home .hero-trust-item i {
  color: var(--brand);
}

html[data-theme="light"] .landing-page #home .hero-chip,
html[data-theme="light"] .landing-page #home .hero-trust-item {
  background: rgba(255, 255, 255, 0.76);
  border-color: rgba(15, 23, 42, 0.08);
}

html[data-theme="light"] .landing-page #home .hero-chip:hover {
  background: rgba(255, 255, 255, 0.95);
  border-color: var(--brand-line);
}

.landing-page #home .hero-secondary-btn {
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.landing-page #home .hero-secondary-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--brand-line);
}

.landing-page #home .quick-date-input,
.landing-page #home input.flatpickr-input {
  min-height: 3.45rem;
  background: rgba(255, 255, 255, 0.065);
  border: 1px solid rgba(255, 255, 255, 0.13);
  color: #f8fafc;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.landing-page #home .quick-date-input:hover,
.landing-page #home input.flatpickr-input:hover {
  border-color: var(--brand-line);
}

.landing-page #home .quick-date-input:focus,
.landing-page #home input.flatpickr-input:focus {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(245, 158, 11, 0.7);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

html[data-theme="light"] .landing-page #home .quick-date-input,
html[data-theme="light"] .landing-page #home input.flatpickr-input {
  background: #f8fafc;
  border-color: #d7e0ea;
  color: #0f172a;
}

html[data-theme="light"] .landing-page #home .quick-date-input:focus,
html[data-theme="light"] .landing-page #home input.flatpickr-input:focus {
  background: #ffffff;
  border-color: var(--brand-mid);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
}

/* ============================================================
   6. POČETNA — sekcijske površine (noise + glow slojevi)
   ============================================================ */
.landing-page .content-section,
.landing-page #lokacija {
  position: relative;
  isolation: isolate;
  background: linear-gradient(180deg, var(--premium-bg), var(--premium-bg-raised));
  border-top: 1px solid var(--premium-line);
}

/* Noise + amber glow sloj — dubina bez ijedne slike */
.landing-page .content-section::before,
.landing-page #lokacija::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--noise);
  background-size: 160px 160px;
  opacity: var(--noise-opacity);
}

.landing-page #featured-vehicles,
.landing-page #lokacija {
  background:
    radial-gradient(circle at 82% 8%, var(--brand-glow), transparent 30rem),
    linear-gradient(180deg, var(--premium-bg-raised), var(--premium-bg));
}

.landing-page #kako-radi {
  background:
    radial-gradient(circle at 12% 20%, rgba(245, 158, 11, 0.07), transparent 26rem),
    linear-gradient(180deg, var(--premium-bg), var(--premium-bg-raised));
}

html[data-theme="light"] .landing-page #featured-vehicles,
html[data-theme="light"] .landing-page #lokacija {
  background:
    radial-gradient(circle at 82% 8%, var(--brand-glow), transparent 30rem),
    linear-gradient(180deg, #f7fafd, #eef3f9);
}

html[data-theme="light"] .landing-page #kako-radi {
  background:
    radial-gradient(circle at 12% 20%, rgba(245, 158, 11, 0.08), transparent 26rem),
    linear-gradient(180deg, #eef3f9, #f7fafd);
}

.landing-page .section-header {
  margin-bottom: clamp(1.35rem, 3vw, 2.25rem);
}

.landing-page .section-title,
.landing-page .location-title {
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.landing-page .section-text,
.landing-page .location-text,
.landing-page .process-card-text,
.landing-page .benefit-text,
.landing-page .location-card-text {
  color: var(--premium-muted);
}

/* ============================================================
   7. POČETNA — koraci (stepper), benefiti, flota, lokacija, CTA
   ============================================================ */
.landing-page .process-grid {
  position: relative;
}

.landing-page .process-card {
  position: relative;
  overflow: visible;
  border-radius: var(--r-md);
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.025));
  border: 1px solid var(--premium-line);
  box-shadow: var(--e1), var(--edge-light);
  transition: transform 0.22s var(--premium-ease), border-color 0.22s ease, box-shadow 0.22s ease;
}

.landing-page .process-card:hover {
  transform: translateY(-3px);
  border-color: var(--brand-line);
  box-shadow: var(--e2), var(--edge-light);
}

html[data-theme="light"] .landing-page .process-card {
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.92));
}

html[data-theme="dark"] .landing-page .process-card,
html[data-theme="dark"] .landing-page .benefit-card {
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.025));
  border-color: var(--premium-line);
  box-shadow: var(--e1), var(--edge-light);
}

/* Numerali u zlatnim pločicama (Inter Tight od B641) */
.landing-page .process-step-number {
  position: relative;
  z-index: 2;
  font-family: var(--font-display);
  font-weight: 700;
  background: linear-gradient(150deg, rgba(252, 211, 77, 0.22), rgba(180, 83, 9, 0.14));
  border: 1px solid var(--brand-line);
  color: var(--brand-hi);
  box-shadow: 0 6px 16px rgba(180, 83, 9, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

html[data-theme="light"] .landing-page .process-step-number {
  color: var(--brand-deep);
  background: linear-gradient(150deg, rgba(252, 211, 77, 0.32), rgba(245, 158, 11, 0.16));
}

.landing-page .benefit-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025));
  border: 1px solid var(--premium-line);
  box-shadow: var(--e1), var(--edge-light);
  transition: transform 0.22s var(--premium-ease), border-color 0.22s ease, box-shadow 0.22s ease;
}

.landing-page .benefit-card::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--brand), transparent);
  opacity: 0.65;
}

.landing-page .benefit-card:hover {
  transform: translateY(-4px);
  border-color: var(--brand-line);
  box-shadow: var(--e2), var(--edge-light);
}

html[data-theme="light"] .landing-page .benefit-card {
  background: linear-gradient(150deg, #ffffff, #f7fafd);
}

/* Jedan akcent: sve benefit ikone amber, bez multicolor pločica */
.landing-page .benefit-icon {
  width: 3rem;
  height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  background: linear-gradient(150deg, rgba(252, 211, 77, 0.18), rgba(180, 83, 9, 0.1)) !important;
  border: 1px solid var(--brand-line);
  color: var(--brand-hi) !important;
  box-shadow: 0 6px 16px rgba(180, 83, 9, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: transform 0.25s var(--premium-ease);
}

.landing-page .benefit-icon svg {
  width: 1.45rem;
  height: 1.45rem;
}

.landing-page .benefit-card:hover .benefit-icon {
  transform: rotate(-4deg) scale(1.06);
}

html[data-theme="light"] .landing-page .benefit-icon {
  color: var(--brand-deep) !important;
  background: linear-gradient(150deg, rgba(252, 211, 77, 0.3), rgba(245, 158, 11, 0.14)) !important;
}

.landing-page #featured-vehicles .section-shell,
.landing-page #lokacija .location-shell,
.landing-page .final-cta-panel {
  border-radius: var(--r-lg);
}

.landing-page #featured-vehicles .section-shell {
  padding: clamp(1.15rem, 3vw, 2rem);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.018));
  border: 1px solid var(--premium-line);
  box-shadow: var(--e2), var(--edge-light);
}

html[data-theme="light"] .landing-page #featured-vehicles .section-shell {
  background: rgba(255, 255, 255, 0.78);
}

.landing-page .vehicle-card-inner--featured {
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--premium-line);
  box-shadow: var(--e2);
  transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s var(--premium-ease);
}

.landing-page .vehicle-card-inner--featured:hover {
  border-color: var(--brand-line);
  box-shadow: var(--e3);
}

.landing-page .vehicle-price-panel {
  border-radius: var(--r-sm);
  border-color: var(--brand-line);
  background: linear-gradient(135deg, var(--brand-soft), rgba(255, 255, 255, 0.035));
}

.landing-page .vehicle-gallery-btn,
.landing-page .vehicle-nav-btn {
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s var(--premium-ease);
}

.landing-page .vehicle-gallery-btn:hover,
.landing-page .vehicle-nav-btn:hover {
  border-color: var(--brand-line);
  transform: translateY(-1px);
}

.landing-page .location-info,
.landing-page .location-map-wrap {
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025));
  border-color: var(--premium-line);
  box-shadow: var(--e2), var(--edge-light);
}

html[data-theme="light"] .landing-page .location-info,
html[data-theme="light"] .landing-page .location-map-wrap {
  background: rgba(255, 255, 255, 0.91);
}

html[data-theme="dark"] .landing-page .location-info,
html[data-theme="dark"] .landing-page .location-map-wrap {
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025));
  border-color: var(--premium-line);
  box-shadow: var(--e2), var(--edge-light);
}

.landing-page .loc-card {
  border: 1px solid var(--premium-line);
  background: var(--premium-panel-soft);
  transition: transform 0.2s var(--premium-ease), border-color 0.2s ease, background 0.2s ease;
}

.landing-page .loc-card:hover,
.landing-page .loc-card.active {
  transform: translateX(3px);
  border-color: var(--brand-line);
  background: linear-gradient(135deg, var(--brand-soft), rgba(255, 255, 255, 0.045));
}

.landing-page .loc-card .loc-card-chevron {
  transition: transform 0.2s var(--premium-ease), color 0.2s ease;
}

.landing-page .loc-card:hover .loc-card-chevron,
.landing-page .loc-card.active .loc-card-chevron {
  transform: translateX(3px);
  color: var(--brand);
}

/* Završni CTA — blueprint mreža + zlatni okvir: jedina "glasna" površina */
.landing-page .final-cta-panel {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    radial-gradient(circle at 88% 10%, rgba(252, 211, 77, 0.16), transparent 18rem),
    linear-gradient(145deg, #101f35, #091426);
  background-size: 44px 44px, 44px 44px, auto, auto;
  border: 1px solid transparent;
  background-clip: border-box;
  border-color: var(--brand-line);
  box-shadow: var(--e3), 0 0 60px rgba(245, 158, 11, 0.06), var(--edge-light);
}

/* Inline blok ima html[data-theme="dark"] .final-cta-panel (0,2,1) — dupliramo jače. */
html[data-theme="dark"] .landing-page .final-cta-panel {
  background:
    linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    radial-gradient(circle at 88% 10%, rgba(252, 211, 77, 0.16), transparent 18rem),
    linear-gradient(145deg, #101f35, #091426);
  background-size: 44px 44px, 44px 44px, auto, auto;
  border-color: var(--brand-line);
  box-shadow: var(--e3), 0 0 60px rgba(245, 158, 11, 0.06), var(--edge-light);
}

html[data-theme="light"] .landing-page .final-cta-panel {
  background:
    linear-gradient(rgba(15, 23, 42, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, 0.03) 1px, transparent 1px),
    radial-gradient(circle at 88% 10%, rgba(252, 211, 77, 0.2), transparent 18rem),
    linear-gradient(145deg, #ffffff, #f3f7fb);
  background-size: 44px 44px, 44px 44px, auto, auto;
  border-color: var(--brand-line);
}

.landing-page .final-cta-link {
  transition: transform 0.18s var(--premium-ease), border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.landing-page .final-cta-link--primary i:last-child {
  transition: transform 0.2s var(--premium-ease);
}

.landing-page .final-cta-link--primary:hover i:last-child {
  transform: translateX(3px);
}

/* ============================================================
   8. FAQ
   ============================================================ */
.faq-page .faq-main {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(circle at 84% 6%, var(--brand-glow), transparent 28rem),
    linear-gradient(180deg, var(--premium-bg), var(--premium-bg-raised));
}

.faq-page .faq-main::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--noise);
  background-size: 160px 160px;
  opacity: var(--noise-opacity);
}

.faq-page .faq-hero-copy,
.faq-page .faq-help-card,
.faq-page .faq-section,
.faq-page .faq-cta {
  border-color: var(--premium-line);
  box-shadow: var(--e2), var(--edge-light);
}

.faq-page .faq-hero-copy {
  background:
    radial-gradient(circle at 92% 8%, rgba(245, 158, 11, 0.12), transparent 18rem),
    linear-gradient(145deg, var(--premium-panel-strong), var(--premium-panel));
  border-radius: var(--r-lg);
}

.faq-page .faq-hero h1 {
  max-width: 16ch;
  font-size: clamp(2rem, 7vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
}

.faq-page .faq-hero p,
.faq-page .faq-section-sub,
.faq-page .faq-answer {
  color: var(--premium-muted);
}

.faq-page .faq-help-card,
.faq-page .faq-section {
  border-radius: var(--r-lg);
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.022));
}

html[data-theme="light"] .faq-page .faq-help-card,
html[data-theme="light"] .faq-page .faq-section {
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 253, 0.94));
}

.faq-page .faq-help-item,
.faq-page .faq-item {
  border-color: var(--premium-line);
  background: var(--premium-panel-soft);
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s var(--premium-ease);
}

.faq-page .faq-help-item:hover,
.faq-page .faq-item:hover,
.faq-page .faq-item[open] {
  border-color: var(--brand-line);
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(255, 255, 255, 0.035));
}

.faq-page .faq-help-item:hover {
  transform: translateX(3px);
}

.faq-page .faq-item summary {
  min-height: 3.5rem;
  font-weight: 700;
}

.faq-page .faq-item summary i,
.faq-page .faq-item summary svg {
  transition: transform 0.25s var(--premium-ease);
}

.faq-page .faq-item[open] summary i,
.faq-page .faq-item[open] summary svg {
  transform: rotate(180deg);
}

.faq-page .faq-item[open] summary {
  color: var(--brand-hi);
}

html[data-theme="light"] .faq-page .faq-item[open] summary {
  color: var(--brand-deep);
}

.faq-page .faq-quick-nav {
  position: sticky;
  top: calc(var(--header-h-mobile, 64px) + 0.5rem);
  z-index: 20;
  padding: 0.55rem;
  border: 1px solid var(--premium-line);
  border-radius: var(--r-pill);
  background: rgba(7, 16, 29, 0.83);
  box-shadow: var(--e1);
  backdrop-filter: blur(18px) saturate(135%);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
}

html[data-theme="light"] .faq-page .faq-quick-nav {
  background: rgba(255, 255, 255, 0.88);
}

.faq-page .faq-quick-nav a {
  border-color: transparent;
  white-space: nowrap;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.faq-page .faq-quick-nav a:hover,
.faq-page .faq-quick-nav a:focus-visible {
  border-color: var(--brand-line);
  background: var(--brand-soft);
}

.faq-page .faq-cta {
  background:
    linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    radial-gradient(circle at 88% 0%, rgba(252, 211, 77, 0.14), transparent 17rem),
    linear-gradient(145deg, #101f35, #091426);
  background-size: 44px 44px, 44px 44px, auto, auto;
  border-radius: var(--r-lg);
}

html[data-theme="light"] .faq-page .faq-cta {
  background:
    linear-gradient(rgba(15, 23, 42, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, 0.03) 1px, transparent 1px),
    radial-gradient(circle at 88% 0%, rgba(252, 211, 77, 0.18), transparent 17rem),
    linear-gradient(145deg, #ffffff, #f3f7fb);
  background-size: 44px 44px, 44px 44px, auto, auto;
}

/* ============================================================
   9. REZERVACIJE
   ============================================================ */
.rez-main {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(circle at 84% 4%, var(--brand-glow), transparent 30rem),
    linear-gradient(180deg, rgba(7, 16, 29, 0.95), var(--premium-bg-raised));
}

.rez-main::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--noise);
  background-size: 160px 160px;
  opacity: var(--noise-opacity);
}

html[data-theme="light"] .rez-main {
  background:
    radial-gradient(circle at 84% 4%, var(--brand-glow), transparent 30rem),
    linear-gradient(180deg, #eef3f9, #f7fafd);
}

.rez-main h1 {
  font-size: clamp(2.1rem, 7vw, 3.9rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-shadow: none;
}

.rez-main .rez-hero-lead {
  max-width: 43rem;
  color: var(--premium-muted);
}

.rez-main .glass-panel {
  background: linear-gradient(150deg, rgba(14, 27, 47, 0.94), rgba(8, 17, 31, 0.9));
  border: 1px solid var(--premium-line);
  box-shadow: var(--e2), var(--edge-light);
  backdrop-filter: blur(18px) saturate(125%);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
}

html[data-theme="light"] .rez-main .glass-panel {
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 253, 0.95));
}

/* Pretraga — zlatni hairline okvir (najvažnija forma na sajtu) */
.rez-main .rez-search-container {
  border-radius: var(--r-lg);
  border: 1px solid transparent;
  background:
    linear-gradient(150deg, rgba(14, 27, 47, 0.96), rgba(8, 17, 31, 0.92)) padding-box,
    linear-gradient(165deg, rgba(252, 211, 77, 0.42), rgba(245, 158, 11, 0.14) 40%, rgba(255, 255, 255, 0.08) 75%, rgba(245, 158, 11, 0.24)) border-box;
  box-shadow: var(--e4), 0 0 48px rgba(245, 158, 11, 0.05), var(--edge-light-strong);
}

html[data-theme="light"] .rez-main .rez-search-container {
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.99), rgba(247, 250, 253, 0.96)) padding-box,
    linear-gradient(165deg, rgba(217, 119, 6, 0.4), rgba(245, 158, 11, 0.12) 40%, rgba(15, 23, 42, 0.07) 75%, rgba(217, 119, 6, 0.24)) border-box;
}

.rez-main .rez-label {
  color: #aebccd;
  letter-spacing: 0.075em;
}

html[data-theme="light"] .rez-main .rez-label {
  color: #506076;
}

.rez-main .rez-input,
.rez-main .flatpickr-input,
.rez-main .rez-filter-select {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.13);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.rez-main .rez-input:hover,
.rez-main .flatpickr-input:hover,
.rez-main .rez-filter-select:hover {
  border-color: var(--brand-line);
}

.rez-main .rez-input:focus,
.rez-main .flatpickr-input:focus,
.rez-main .rez-filter-select:focus {
  background: rgba(255, 255, 255, 0.085);
  border-color: rgba(245, 158, 11, 0.72);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

html[data-theme="light"] .rez-main .rez-input,
html[data-theme="light"] .rez-main .flatpickr-input,
html[data-theme="light"] .rez-main .rez-filter-select {
  background: #f8fafc;
  border-color: #d7e0ea;
}

html[data-theme="light"] .rez-main .rez-input:focus,
html[data-theme="light"] .rez-main .flatpickr-input:focus,
html[data-theme="light"] .rez-main .rez-filter-select:focus {
  background: #ffffff;
  border-color: var(--brand-mid);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
}

.rez-main .rez-time-select {
  min-height: 3rem;
  height: 3rem !important;
}

.rez-main .rez-search-btn {
  min-height: 3.5rem;
  border-radius: var(--r-md);
}

.rez-main #rez-filters.rez-filters-panel {
  border-radius: var(--r-sm);
  box-shadow: var(--e1);
}

.rez-main .vehicle-card {
  border-radius: var(--r-lg);
  background: linear-gradient(145deg, #12233b, #0b1729);
  border-color: var(--premium-line);
  box-shadow: var(--e2), var(--edge-light);
  transition: transform 0.25s var(--premium-ease), border-color 0.25s ease, box-shadow 0.25s ease;
}

.rez-main .vehicle-card:hover {
  transform: translateY(-4px);
  border-color: var(--brand-line);
  box-shadow: var(--e3), var(--edge-light);
}

html[data-theme="light"] .rez-main .vehicle-card {
  background: linear-gradient(145deg, #ffffff, #f7fafd);
}

.rez-main .vc-image-col {
  background: linear-gradient(145deg, #101f35, #07101d);
}

.rez-main .vc-class-badge {
  border-radius: var(--r-pill);
  border: 1px solid var(--premium-line);
}

.rez-main .vc-footer {
  border-top-color: var(--premium-line);
}

.rez-main #rez-empty {
  border-radius: var(--r-lg);
}

.rez-slim-bar {
  background: rgba(7, 16, 29, 0.9);
  border-bottom-color: var(--premium-line);
  box-shadow: var(--e2);
  backdrop-filter: blur(20px) saturate(135%);
  -webkit-backdrop-filter: blur(20px) saturate(135%);
}

html[data-theme="light"] .rez-slim-bar {
  background: rgba(255, 255, 255, 0.9);
}

.rez-modal {
  border-radius: var(--r-lg);
  border-color: var(--premium-line);
  box-shadow: var(--e4);
}

/* B652: recenzije bez avatara — tekst preuzima punu širinu kartice.
   Tailwind `flex-1` NIJE u kompajliranom assets/tailwind.css (computed je ostajao
   `flex: 0 1 auto`), pa se širina postavlja ovdje eksplicitno. */
.hero-proof-card > div,
.footer-modern #google-reviews-footer .review-card .flex-1 {
  flex: 1 1 auto;
  min-width: 0;
}

/* B646: greška pretrage — retry + kontakti (tekst i akcije se poklapaju) */
.rez-error-actions {
  margin-top: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  align-items: center;
}

.rez-retry-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.9rem;
  padding: 0.65em 1.6em;
  border: none;
  border-radius: var(--r-md);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  background: linear-gradient(160deg, var(--brand-hi) 0%, var(--brand) 52%, var(--brand-mid) 100%);
  color: var(--brand-ink);
  box-shadow: 0 10px 26px rgba(245, 158, 11, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.42);
  transition: transform 0.18s var(--premium-ease), box-shadow 0.2s ease;
}

.rez-retry-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(245, 158, 11, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.rez-retry-btn:active {
  transform: translateY(0) scale(0.985);
}

.rez-error-contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

.rez-error-contacts a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.75rem;
  padding: 0.5em 1.05em;
  border: 1px solid var(--premium-line);
  border-radius: var(--r-pill);
  background: var(--premium-panel-soft);
  color: var(--premium-text);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.rez-error-contacts a:hover {
  border-color: var(--brand-line);
  background: var(--brand-soft);
}

.rez-error-contacts a i {
  color: var(--brand);
}

/* ============================================================
   B646 — MOBILNI UX POPRAVCI (audit nalazi M1-M3, #5)
   ============================================================ */
@media (max-width: 767px) {
  /* M1: iOS zoom-on-focus — SVAKO polje ispod 16px zumira cijelu stranicu na
     iPhoneu (i ne vraća zoom). Rezervacije su imale inline fix; ovo pokriva
     SVE forme na svim stranicama, uključujući hero booking na početnoj. */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="search"],
  input[type="date"],
  select,
  textarea,
  .quick-date-input,
  .flatpickr-input {
    font-size: 16px !important;
  }

  /* #5: sticky CTA traka (aerodrom) je zaklanjala dno footera — kompenzacija */
  body.has-sticky-cta {
    padding-bottom: 4.5rem;
  }

  /* M3: touch mete prvih dijaloga na ≥44px (Apple/Google smjernica) */
  #cookieBanner button,
  #langModal button,
  #langModal a {
    min-height: 44px;
  }

  .footer-modern a {
    padding-block: 0.3rem;
  }
}

/* ============================================================
   10. AERODROM (landing klase + airport-specifične kartice)
   ============================================================ */
.landing-page .airport-step-card,
.landing-page .airport-trust-card,
.landing-page .airport-service-row,
.landing-page .airport-seo-panel {
  border-radius: var(--r-md);
  border: 1px solid var(--premium-line);
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025));
  box-shadow: var(--e1), var(--edge-light);
  transition: transform 0.22s var(--premium-ease), border-color 0.22s ease, box-shadow 0.22s ease;
}

.landing-page .airport-step-card:hover,
.landing-page .airport-trust-card:hover {
  transform: translateY(-3px);
  border-color: var(--brand-line);
  box-shadow: var(--e2), var(--edge-light);
}

html[data-theme="light"] .landing-page .airport-step-card,
html[data-theme="light"] .landing-page .airport-trust-card,
html[data-theme="light"] .landing-page .airport-service-row,
html[data-theme="light"] .landing-page .airport-seo-panel {
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.92));
}

/* Zeleni lijevi border trust kartica (page-airport #1D9E75, dark varijanta
   kroz html:not([data-theme=light]) (0,3,1)) — poravnat na amber u obje teme. */
html[data-theme="dark"] .landing-page .airport-trust-card,
html[data-theme="light"] .landing-page .airport-trust-card,
.landing-page .airport-trust-card {
  border-left: 3px solid var(--brand-line);
}

html[data-theme="dark"] .landing-page .airport-trust-card:hover,
html[data-theme="light"] .landing-page .airport-trust-card:hover {
  border-left-color: var(--brand);
}

/* Jedan akcent i ovdje: green/blue varijante ikona se stišavaju u amber */
.landing-page .airport-step-icon,
.landing-page .airport-service-icon,
.landing-page .airport-trust-card__icon {
  background: linear-gradient(150deg, rgba(252, 211, 77, 0.18), rgba(180, 83, 9, 0.1)) !important;
  border: 1px solid var(--brand-line);
  color: var(--brand-hi) !important;
}

html[data-theme="light"] .landing-page .airport-step-icon,
html[data-theme="light"] .landing-page .airport-service-icon,
html[data-theme="light"] .landing-page .airport-trust-card__icon {
  color: var(--brand-deep) !important;
  background: linear-gradient(150deg, rgba(252, 211, 77, 0.3), rgba(245, 158, 11, 0.14)) !important;
}

.landing-page .hero-headline-accent {
  color: var(--brand-hi);
}

html[data-theme="light"] .landing-page .hero-headline-accent {
  color: var(--brand-mid);
}

/* ============================================================
   11. STATUS REZERVACIJE + 404 (laka pokrivenost)
   ============================================================ */
.status-card,
.rental-card,
.docs-section,
.notfound-card {
  border-radius: var(--r-lg);
  border: 1px solid var(--premium-line);
  box-shadow: var(--e2), var(--edge-light);
}

.status-wrap .rez-form-input {
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.status-wrap .rez-form-input:focus {
  border-color: rgba(245, 158, 11, 0.72);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}

.status-stepper .step-dot.active,
.status-stepper .step-dot.done {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-ink);
}

.notfound-code {
  color: var(--brand);
}

/* ============================================================
   12. BLOG — editorial ritam (očuvan B632 raspored)
   ============================================================ */
.blog-main .blog-shell {
  max-width: 1240px;
}

.blog-main .blog-hero {
  position: relative;
  overflow: hidden;
  margin-bottom: 1.25rem;
  padding: clamp(1.15rem, 2.4vw, 1.85rem);
  border-radius: var(--r-lg);
  box-shadow: var(--e2);
}

.blog-main .blog-hero::after {
  content: "";
  position: absolute;
  width: 12rem;
  height: 12rem;
  right: -4rem;
  top: -5rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(252, 211, 77, 0.2), transparent 68%);
  pointer-events: none;
}

.blog-main .blog-hero h1 {
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.04;
}

.blog-main .blog-hero p {
  max-width: 66ch;
  font-size: 0.98rem;
  line-height: 1.65;
}

.blog-main .blog-grid {
  gap: 1rem;
}

.blog-main .blog-card {
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  border-radius: var(--r-md);
  box-shadow: var(--e1);
  transition: transform 180ms var(--premium-ease), border-color 180ms ease, box-shadow 180ms ease;
}

.blog-main .blog-card:hover {
  transform: translateY(-3px);
  border-color: var(--brand-line);
  box-shadow: var(--e2);
}

.blog-main .blog-card__media {
  min-height: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.blog-main .blog-card__media img {
  min-height: 0;
  aspect-ratio: 16 / 9;
  object-position: center;
  transition: transform 350ms var(--premium-ease);
}

.blog-main .blog-card:hover .blog-card__media img {
  transform: scale(1.025);
}

.blog-main .blog-card__media:focus-visible,
.blog-main .blog-link:focus-visible,
.post-main .post-back:focus-visible {
  outline: 3px solid rgba(245, 158, 11, 0.65);
  outline-offset: -3px;
}

.blog-main .blog-card__body {
  grid-template-rows: auto auto 1fr auto;
  gap: 0.72rem;
  padding: 1rem;
  align-content: start;
}

.blog-main .blog-card__meta {
  flex-wrap: wrap;
  gap: 0.35rem 0.65rem;
  font-size: 0.7rem;
  line-height: 1.4;
}

.blog-main .blog-card h2 {
  font-size: clamp(1.08rem, 2vw, 1.35rem);
  line-height: 1.24;
  text-wrap: pretty;
}

.blog-main .blog-card p {
  font-size: 0.92rem;
  line-height: 1.62;
  text-wrap: pretty;
}

.blog-main .blog-link {
  width: fit-content;
  min-height: 2.75rem;
  margin-top: 0.1rem;
  align-self: end;
  font-size: 0.9rem;
}

.post-main .post-shell {
  max-width: 940px;
}

.post-main .post-panel {
  border-radius: var(--r-lg);
  box-shadow: var(--e3);
}

.post-main .post-hero {
  gap: 0.72rem;
  padding: clamp(1.1rem, 3vw, 2rem);
}

.post-main .post-hero h1 {
  max-width: 24ch;
  font-size: clamp(1.8rem, 5.5vw, 3.25rem);
  line-height: 1.08;
  text-wrap: balance;
}

.post-main .post-hero p {
  max-width: 68ch;
  font-size: 0.96rem;
  line-height: 1.65;
}

.post-main .post-image {
  overflow: hidden;
}

.post-main .post-image img {
  aspect-ratio: 16 / 8.5;
  max-height: 500px;
}

.post-main .post-body {
  padding: clamp(1.1rem, 3.5vw, 2.4rem);
  font-size: 1rem;
  line-height: 1.82;
}

.post-main .post-body > * {
  max-width: 68ch;
  margin-left: auto;
  margin-right: auto;
}

.post-main .post-body :is(h2, h3, h4) {
  line-height: 1.25;
  text-wrap: pretty;
}

.post-main .post-body h2 {
  font-size: clamp(1.35rem, 3vw, 1.75rem);
}

.post-main .post-body h3 {
  font-size: clamp(1.18rem, 2.5vw, 1.4rem);
}

.post-main .post-body blockquote {
  padding: 0.9rem 1rem;
  border-left: 3px solid var(--brand);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--brand-soft);
}

.post-main .post-body img,
.post-main .post-body figure {
  max-width: 100%;
  border-radius: var(--r-sm);
}

/* ============================================================
   13. FLATPICKR — KLS skin (dark + light paritet)

   Vendor tema `assets/vendor/flatpickr/dist/themes/dark.css` se VIŠE NE
   učitava (Utils.loadFlatpickr, js/app.js). Učitavala se bezuvjetno pa je
   kalendar ostajao taman i kad je stranica u svijetloj temi.
   Ovo je jedini izvor izgleda kalendara na cijelom sajtu (home hero quick
   booking + /rezervacije) i prati `html[data-theme]`.

   Pravila:
    - dani koriste `background-color`, NIKAD `background` shorthand —
      `.kls-closed-day` šrafura (app.js) je `background-image` i mora preživjeti;
    - odabir/raspon koristi brand amber rampu, isti jezik kao dugmad (--brand-ink
      kao tekst NA amberu), ne vendor plavu/tirkiznu;
    - `.inRange` mora zadržati flatpickr box-shadow trik (-5px/+5px) inače
      raspon puca u isprekidane kvadratiće.
   ============================================================ */
:root {
  --fp-surface: #0d1a2b;
  --fp-line: rgba(255, 255, 255, 0.12);
  --fp-text: #e8eef6;
  --fp-muted: #92a3b8;
  --fp-faded: rgba(232, 238, 246, 0.32);
  --fp-hover: rgba(245, 158, 11, 0.16);
  --fp-range: rgba(245, 158, 11, 0.15);
  --fp-range-text: #f8fafc;
}

html[data-theme="light"] {
  --fp-surface: #ffffff;
  --fp-line: rgba(15, 23, 42, 0.11);
  --fp-text: #0f172a;
  --fp-muted: #64748b;
  --fp-faded: rgba(15, 23, 42, 0.3);
  --fp-hover: rgba(245, 158, 11, 0.18);
  --fp-range: rgba(245, 158, 11, 0.17);
  --fp-range-text: #1f2937;
}

.flatpickr-calendar.flatpickr-calendar {
  font-family: var(--font-sans);
  background: var(--fp-surface);
  border: 1px solid var(--fp-line);
  border-radius: var(--r-md);
  box-shadow: var(--e3);
  /* BEZ overflow:hidden — strelica ka inputu je :before/:after IZVAN okvira
     kalendara, pa bi je klipovanje obrisalo. */
}

/* Strelica ka inputu — mora pratiti površinu, inače "visi" bijeli trokut */
.flatpickr-calendar.flatpickr-calendar.arrowTop:before { border-bottom-color: var(--fp-line); }
.flatpickr-calendar.flatpickr-calendar.arrowTop:after { border-bottom-color: var(--fp-surface); }
.flatpickr-calendar.flatpickr-calendar.arrowBottom:before { border-top-color: var(--fp-line); }
.flatpickr-calendar.flatpickr-calendar.arrowBottom:after { border-top-color: var(--fp-surface); }

.flatpickr-calendar.flatpickr-calendar .flatpickr-months,
.flatpickr-calendar.flatpickr-calendar .flatpickr-months .flatpickr-month,
.flatpickr-calendar.flatpickr-calendar .flatpickr-weekdays,
.flatpickr-calendar.flatpickr-calendar .flatpickr-innerContainer,
.flatpickr-calendar.flatpickr-calendar .flatpickr-rContainer,
.flatpickr-calendar.flatpickr-calendar .flatpickr-days,
.flatpickr-calendar.flatpickr-calendar .dayContainer {
  background: transparent;
}

/* ── Zaglavlje: mjesec + godina ───────────────────────────── */
.flatpickr-calendar.flatpickr-calendar .flatpickr-months {
  padding: 0.35rem 0.2rem 0.15rem;
  border-bottom: 1px solid var(--fp-line);
}

.flatpickr-calendar.flatpickr-calendar .flatpickr-months .flatpickr-month,
.flatpickr-calendar.flatpickr-calendar .flatpickr-current-month,
.flatpickr-calendar.flatpickr-calendar .flatpickr-current-month .cur-month,
.flatpickr-calendar.flatpickr-calendar .flatpickr-current-month input.cur-year {
  color: var(--fp-text);
  font-family: var(--font-sans);
  font-weight: 700;
}

.flatpickr-calendar.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months {
  background: transparent;
  color: var(--fp-text);
  font-family: var(--font-sans);
  font-weight: 700;
  border-radius: var(--r-sm);
  transition: background-color 0.16s ease;
}

.flatpickr-calendar.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months:hover,
.flatpickr-calendar.flatpickr-calendar .flatpickr-current-month .numInputWrapper:hover {
  background: var(--brand-soft);
}

/* Native dropdown lista — bez ovoga opcije naslijede prozirnu pozadinu */
.flatpickr-calendar.flatpickr-calendar .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
  background-color: var(--fp-surface);
  color: var(--fp-text);
}

.flatpickr-calendar.flatpickr-calendar .numInputWrapper span {
  border-color: var(--fp-line);
}
.flatpickr-calendar.flatpickr-calendar .numInputWrapper span:hover {
  background: var(--brand-soft);
}
.flatpickr-calendar.flatpickr-calendar .numInputWrapper span.arrowUp:after {
  border-bottom-color: var(--fp-muted);
}
.flatpickr-calendar.flatpickr-calendar .numInputWrapper span.arrowDown:after {
  border-top-color: var(--fp-muted);
}

.flatpickr-calendar.flatpickr-calendar .flatpickr-months .flatpickr-prev-month,
.flatpickr-calendar.flatpickr-calendar .flatpickr-months .flatpickr-next-month {
  color: var(--fp-muted);
  fill: var(--fp-muted);
  padding: 0.6rem 0.7rem;
  transition: color 0.16s ease, fill 0.16s ease;
}

.flatpickr-calendar.flatpickr-calendar .flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-calendar.flatpickr-calendar .flatpickr-months .flatpickr-next-month:hover svg,
.flatpickr-calendar.flatpickr-calendar .flatpickr-months .flatpickr-prev-month:hover svg path,
.flatpickr-calendar.flatpickr-calendar .flatpickr-months .flatpickr-next-month:hover svg path {
  fill: var(--brand);
}

/* ── Nazivi dana u sedmici ────────────────────────────────── */
.flatpickr-calendar.flatpickr-calendar span.flatpickr-weekday {
  color: var(--fp-muted);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.flatpickr-calendar.flatpickr-calendar .flatpickr-weekdays {
  padding-top: 0.3rem;
}

/* ── Dani ─────────────────────────────────────────────────── */
.flatpickr-calendar.flatpickr-calendar .flatpickr-day {
  color: var(--fp-text);
  font-family: var(--font-sans);
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  transition: background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}

.flatpickr-calendar.flatpickr-calendar .flatpickr-day:hover,
.flatpickr-calendar.flatpickr-calendar .flatpickr-day:focus {
  background-color: var(--fp-hover);
  border-color: var(--brand-line);
  color: var(--fp-text);
}

.flatpickr-calendar.flatpickr-calendar .flatpickr-day.today:not(.selected):not(.startRange):not(.endRange) {
  border-color: var(--brand);
  font-weight: 800;
}

/* Prošli/naredni mjesec i onemogućeni dani — poslije :hover pravila namjerno */
.flatpickr-calendar.flatpickr-calendar .flatpickr-day.prevMonthDay,
.flatpickr-calendar.flatpickr-calendar .flatpickr-day.nextMonthDay {
  color: var(--fp-faded);
}

.flatpickr-calendar.flatpickr-calendar .flatpickr-day.flatpickr-disabled,
.flatpickr-calendar.flatpickr-calendar .flatpickr-day.flatpickr-disabled:hover,
.flatpickr-calendar.flatpickr-calendar .flatpickr-day.notAllowed,
.flatpickr-calendar.flatpickr-calendar .flatpickr-day.notAllowed.prevMonthDay,
.flatpickr-calendar.flatpickr-calendar .flatpickr-day.notAllowed.nextMonthDay {
  background-color: transparent;
  border-color: transparent;
  color: var(--fp-faded);
  cursor: default;
}

/* ── Raspon ───────────────────────────────────────────────── */
.flatpickr-calendar.flatpickr-calendar .flatpickr-day.inRange:not(.startRange):not(.endRange),
.flatpickr-calendar.flatpickr-calendar .flatpickr-day.inRange:not(.startRange):not(.endRange):hover {
  background-color: var(--fp-range);
  border-color: transparent;
  border-radius: 0;
  color: var(--fp-range-text);
  /* flatpickr trik: bočne sjene spajaju ćelije u neprekinutu traku */
  box-shadow: -5px 0 0 var(--fp-range), 5px 0 0 var(--fp-range);
}

.flatpickr-calendar.flatpickr-calendar .flatpickr-day.selected,
.flatpickr-calendar.flatpickr-calendar .flatpickr-day.startRange,
.flatpickr-calendar.flatpickr-calendar .flatpickr-day.endRange,
.flatpickr-calendar.flatpickr-calendar .flatpickr-day.selected:hover,
.flatpickr-calendar.flatpickr-calendar .flatpickr-day.startRange:hover,
.flatpickr-calendar.flatpickr-calendar .flatpickr-day.endRange:hover,
.flatpickr-calendar.flatpickr-calendar .flatpickr-day.selected:focus,
.flatpickr-calendar.flatpickr-calendar .flatpickr-day.startRange:focus,
.flatpickr-calendar.flatpickr-calendar .flatpickr-day.endRange:focus {
  background-color: var(--brand);
  background-image: linear-gradient(160deg, var(--brand-hi) 0%, var(--brand) 55%, var(--brand-mid) 100%);
  border-color: var(--brand-mid);
  color: var(--brand-ink);
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.28);
}

.flatpickr-calendar.flatpickr-calendar .flatpickr-day.startRange:not(.endRange) {
  border-radius: var(--r-sm) 0 0 var(--r-sm);
}
.flatpickr-calendar.flatpickr-calendar .flatpickr-day.endRange:not(.startRange) {
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

/* Spoj start→end kad su susjedni (vendor koristi -10px sjenu u svojoj boji) */
.flatpickr-calendar.flatpickr-calendar .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n + 1)) {
  box-shadow: -10px 0 0 var(--brand);
}

.flatpickr-calendar.flatpickr-calendar .dayContainer + .dayContainer {
  box-shadow: -1px 0 0 var(--fp-line);
}

/* ============================================================
   14. POKRET — CSS-only scroll reveal (view-timeline)
   Degradira u "odmah vidljivo" gdje nema podrške; poštuje
   prefers-reduced-motion.
   ============================================================ */
@keyframes premium-rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .landing-page .process-card,
    .landing-page .benefit-card,
    .landing-page .loc-card,
    .landing-page .vehicle-card-inner--featured,
    .landing-page .airport-step-card,
    .landing-page .airport-trust-card,
    .rez-main .vehicle-card,
    .blog-main .blog-card,
    .faq-page .faq-section {
      animation: premium-rise both;
      animation-timeline: view();
      animation-range: entry 0% entry 32%;
    }
  }
}

/* ============================================================
   15. MOBILNI (očuvano iz B631/632, amber varijanta)
   ============================================================ */
@media (max-width: 767px) {
  /* ===== Mobile Hero v2 (B634) — Eternal hibrid =====
     Prvi ekran: chips → kratki H1 → BOOKING FORMA → trust. Subtext, CTA link,
     sekundarne akcije i recenzije tek na skrol. hero-copy postaje display:contents
     pa njegova djeca i booking kartica dijele isti flex kontejner (order). */
  body.landing-home #home .hero-layout {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
  }

  body.landing-home #home .hero-copy {
    display: contents;
  }

  body.landing-home #home .hero-copy::before {
    content: none;
  }

  /* SCRIM (B635): bez glass panela tekst je padao direktno na fotografiju —
     tamni gradijent preko cijelog hero-a garantuje čitljivost H1/chips/subtexta. */
  body.landing-home #home::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(180deg,
      rgba(7, 16, 29, 0.82) 0%,
      rgba(7, 16, 29, 0.6) 30%,
      rgba(7, 16, 29, 0.68) 62%,
      rgba(7, 16, 29, 0.88) 100%);
  }

  html[data-theme="light"] body.landing-home #home::before {
    background: linear-gradient(180deg,
      rgba(238, 243, 249, 0.9) 0%,
      rgba(238, 243, 249, 0.72) 30%,
      rgba(238, 243, 249, 0.78) 62%,
      rgba(238, 243, 249, 0.94) 100%);
  }

  /* B639: hero zauzima TAČNO 2 puna ekrana — sljedeća sekcija nikad ne viri
     u viewport uz rep heroja. Ekran 1: chips+H1+forma+trust (vrh). Ekran 2:
     subtext+CTA+akcije+recenzije usidreni na DNO (margin-top:auto gutljaj),
     pa "Rezervacija u 4 koraka" počinje na čistoj granici ekrana. */
  body.landing-home #home {
    display: flex;
    flex-direction: column;
    min-height: 200vh;
    min-height: 200svh;
  }

  body.landing-home #home .hero-shell {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  body.landing-home #home .hero-layout {
    flex: 1;
  }

  /* B637: scrim je POZICIONIRAN (z:0) pa po CSS painting redu ide IZNAD
     ne-pozicioniranog in-flow sadržaja (naslov/tekst su izgledali "iza stakla").
     Booking kartica je bila svijetla samo zato što ima position:relative iz
     inline stilova. Sav hero sadržaj eksplicitno iznad scrima: */
  body.landing-home #home .hero-chip-row,
  body.landing-home #home .hero-headline,
  body.landing-home #home .hero-subtext,
  body.landing-home #home .hero-trust-strip,
  body.landing-home #home .hero-online-rez-mobile,
  body.landing-home #home .hero-actions,
  body.landing-home #home .hero-booking-card,
  body.landing-home #home .hero-proof-placeholder,
  body.landing-home #home #hero-reviews {
    position: relative;
    z-index: 1;
  }

  body.landing-home #home .hero-chip-row       { order: 1; margin: 0; }
  body.landing-home #home .hero-headline       { order: 2; margin: 0; }
  body.landing-home #home .hero-booking-card   { order: 3; }
  body.landing-home #home .hero-trust-strip    { order: 4; }
  /* margin-top:auto = flex gutljaj koji gura ekran-2 sadržaj na dno (B639) */
  body.landing-home #home .hero-subtext        { order: 5; margin-top: auto; padding-top: 0.75rem; }
  body.landing-home #home .hero-online-rez-mobile { order: 6; }
  body.landing-home #home .hero-actions        { order: 7; }
  body.landing-home #home #hero-reviews,
  body.landing-home #home .hero-proof-placeholder { order: 8; }

  /* Eyebrow ponavlja lokaciju iz chipa i H1 — na mobilnom je višak */
  body.landing-home #home .hero-eyebrow {
    display: none;
  }

  /* Kratki H1 umjesto punog (puni ostaje u DOM-u za SEO/desktop) */
  body.landing-home #home .hero-headline-full {
    display: none;
  }

  body.landing-home #home .hero-headline-short {
    display: inline;
  }

  body.landing-home #home .hero-headline {
    max-width: 100%;
    font-size: clamp(1.6rem, 6.8vw, 2.05rem);
    line-height: 1.14;
    letter-spacing: -0.01em;
    text-shadow: 0 2px 18px rgba(2, 8, 23, 0.55);
  }

  /* Kompaktna booking kartica da prvi ekran stane u viewport */
  body.landing-home #home .hero-booking-card {
    padding: 1rem 1.05rem;
    gap: 0.6rem;
  }

  body.landing-home #home .hero-booking-card .hero-booking-step {
    display: none;
  }

  body.landing-home #home .hero-booking-card .card-eyebrow {
    margin-bottom: 0.15rem;
  }

  body.landing-home #home .hero-booking-card .card-title {
    font-size: 1.06rem;
    line-height: 1.3;
  }

  body.landing-home #home .hero-booking-card .quick-date-input,
  body.landing-home #home .hero-booking-card input.flatpickr-input {
    min-height: 3rem;
  }

  body.landing-home #home .hero-booking-card .hero-inline-note {
    display: none;
  }

  body.landing-home #home .hero-subtext {
    font-size: 0.93rem;
    line-height: 1.55;
    text-shadow: 0 1px 12px rgba(2, 8, 23, 0.5);
  }

  html[data-theme="light"] body.landing-home #home .hero-headline,
  html[data-theme="light"] body.landing-home #home .hero-subtext {
    text-shadow: 0 1px 14px rgba(255, 255, 255, 0.65);
  }

  body.landing-home #home .hero-online-rez-mobile {
    min-height: 3.55rem;
    border-radius: var(--r-md);
    font-size: 1rem;
  }

  body.landing-home #home .hero-actions {
    gap: 0.55rem;
  }

  body.landing-home #home .hero-secondary-btn {
    min-height: 3rem;
    padding: 0.75rem 0.9rem;
    border-radius: var(--r-sm);
    font-size: 0.88rem;
  }

  /* Trust (B635): JEDAN jedinstven panel — glavna poruka + divider + 3 stavke.
     Prije: amber kartica + goli tekst na fotografiji = nekonzistentno i nečitljivo. */
  body.landing-home #home .hero-trust-strip {
    grid-template-columns: 1fr;
    gap: 0.55rem;
    padding: 0.85rem 0.95rem;
    border-radius: var(--r-md);
    background: linear-gradient(155deg, rgba(10, 20, 35, 0.93), rgba(17, 32, 53, 0.87));
    border: 1px solid var(--premium-line);
    box-shadow: var(--e2), var(--edge-light);
    backdrop-filter: blur(14px) saturate(120%);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
  }

  html[data-theme="light"] body.landing-home #home .hero-trust-strip {
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.95), rgba(247, 250, 253, 0.9));
  }

  body.landing-home #home .hero-trust-line {
    gap: 0.4rem 0.9rem;
  }

  body.landing-home #home .hero-trust-line .hero-trust-item {
    color: var(--premium-muted);
  }

  body.landing-home #home .hero-trust-line .hero-trust-item i {
    color: var(--brand);
  }

  /* Vrlo niski ekrani: dodatna kompresija da forma ostane u prvom ekranu */
  @media (max-height: 700px) {
    body.landing-home #home .hero-booking-card .card-eyebrow {
      display: none;
    }

    body.landing-home #home .hero-headline {
      font-size: clamp(1.42rem, 6vw, 1.8rem);
    }

    body.landing-home #home .hero-trust-strip {
      padding: 0.6rem 0.75rem;
    }
  }

  .landing-page .process-grid {
    gap: 0.7rem;
    padding-left: 0.1rem;
  }

  .landing-page .process-card {
    display: grid;
    grid-template-columns: 2.45rem minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 0.75rem;
    row-gap: 0.2rem;
    padding: 0.8rem 0.9rem;
  }

  .landing-page .process-card-head {
    display: contents;
  }

  .landing-page .process-step-number {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 2.45rem;
    height: 2.45rem;
    align-self: start;
  }

  .landing-page .process-card-title {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
  }

  .landing-page .process-card:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 2.1rem;
    top: 3.2rem;
    bottom: -0.82rem;
    width: 1px;
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.46), rgba(245, 158, 11, 0.08));
  }

  .landing-page .process-card-text {
    grid-column: 2;
    grid-row: 2;
    padding-left: 0;
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.48;
  }

  .landing-page .benefit-card {
    padding: 1rem;
  }

  .landing-page #featured-vehicles .section-shell {
    padding: 1rem;
    border-radius: 1.25rem;
  }

  .faq-page .faq-hero h1 {
    font-size: clamp(2rem, 10vw, 2.75rem);
    line-height: 1.06;
  }

  .faq-page .faq-quick-nav {
    top: calc(var(--header-h-mobile, 64px) + 0.35rem);
    margin-inline: -0.2rem;
    border-radius: var(--r-md);
  }

  .faq-page .faq-section,
  .faq-page .faq-hero-copy,
  .faq-page .faq-help-card,
  .faq-page .faq-cta {
    border-radius: 1.2rem;
  }

  .faq-page .faq-item summary {
    min-height: 3.25rem;
    padding-block: 0.85rem;
  }

  .rez-main h1 {
    font-size: clamp(2.1rem, 10vw, 2.9rem);
  }

  .rez-main .rez-search-container {
    padding: 1rem;
    border-radius: 1.25rem;
  }

  .rez-main .rez-input,
  .rez-main .flatpickr-input,
  .rez-main .rez-search-btn {
    min-height: 3.5rem;
  }

  .rez-main .vehicle-card {
    border-radius: 1.2rem;
  }

  .footer-modern .trust-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
  }

  .footer-modern .trust-row .trust-badge {
    width: 100%;
    min-width: 0;
  }
}

@media (min-width: 768px) {
  /* B640: hero popunjava puni viewport i na desktopu — sljedeća sekcija
     nikad ne viri; sadržaj vertikalno centriran (fotografija diše okolo). */
  .landing-page #home {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .landing-page .process-grid::before {
    content: none;
    display: none;
  }

  .landing-page .process-card {
    padding-top: 1rem;
  }

  .faq-page .faq-quick-nav {
    top: calc(var(--header-h-desktop, 72px) + 0.75rem);
  }
}

@media (min-width: 1024px) {
  .landing-page #home .hero-copy {
    text-align: left;
  }

  .landing-page #home .hero-chip-row,
  .landing-page #home .hero-actions {
    justify-content: flex-start;
  }

  .landing-page #home .hero-headline,
  .landing-page #home .hero-subtext {
    margin-left: 0;
    margin-right: 0;
  }

  .landing-page #home .hero-headline {
    max-width: 100%;
    font-size: clamp(2.5rem, 3.25vw, 3.2rem);
    line-height: 1.07;
  }

  .landing-page #home .hero-trust-strip {
    justify-content: start;
    justify-items: start;
  }

  .rez-main .vc-image-col {
    width: 38%;
  }
}

/* Laptopi i široki ekrani s manjom dostupnom visinom: cijeli hero ostaje vidljiv. */
@media (min-width: 1024px) and (max-height: 900px) {
  body.landing-page #home {
    padding-top: calc(var(--header-h-desktop, 72px) + 0.35rem);
    padding-bottom: 0.65rem;
  }

  body.landing-page #home .hero-layout {
    gap: 0.8rem;
  }

  body.landing-page #home .hero-copy,
  body.landing-page #home .hero-booking-card {
    padding: 1rem 1.1rem;
    border-radius: 1.15rem;
  }

  body.landing-page #home .hero-copy {
    gap: 0.6rem;
    padding-bottom: 1rem;
  }

  body.landing-page #home .hero-chip-row {
    gap: 0.35rem;
  }

  body.landing-page #home .hero-chip,
  body.landing-page #home .hero-trust-item {
    padding: 0.38rem 0.62rem;
    font-size: 0.7rem;
  }

  body.landing-page #home .hero-eyebrow,
  body.landing-page #home .card-eyebrow {
    font-size: 0.65rem;
  }

  body.landing-page #home .hero-headline {
    max-width: 100%;
    font-size: clamp(2.35rem, 2.35vw, 2.7rem);
    line-height: 1.07;
  }

  body.landing-page #home .hero-subtext {
    max-width: 70ch;
    font-size: 0.88rem;
    line-height: 1.42;
  }

  body.landing-page #home .hero-actions,
  body.landing-page #home .hero-trust-strip {
    gap: 0.4rem;
  }

  body.landing-page #home .hero-primary-btn,
  body.landing-page #home .hero-secondary-btn,
  body.landing-page #home .hero-booking-card button[type="submit"] {
    min-height: 2.45rem;
    padding: 0.48rem 0.8rem;
    font-size: 0.84rem;
  }

  body.landing-page #home #hero-reviews {
    margin-top: 0 !important;
  }

  body.landing-page #home .hero-proof-placeholder {
    gap: 0.5rem;
  }

  body.landing-page #home .hero-proof-card {
    gap: 0.55rem;
    padding: 0.58rem 0.68rem;
    border-radius: 0.8rem;
  }

  body.landing-page #home .hero-proof-card strong {
    margin-bottom: 0.1rem;
    font-size: 0.78rem;
  }

  body.landing-page #home .hero-proof-card span {
    font-size: 0.7rem;
    line-height: 1.35;
  }

  body.landing-page #home .hero-booking-card {
    gap: 0.7rem;
  }

  body.landing-page #home .hero-booking-card .card-title {
    font-size: 1.35rem;
    line-height: 1.05;
  }

  body.landing-page #home .hero-booking-card .quick-date-input,
  body.landing-page #home .hero-booking-card input.flatpickr-input {
    min-height: 2.75rem;
  }

  body.landing-page #home .hero-inline-note {
    padding: 0.65rem 0.8rem;
    font-size: 0.76rem;
    line-height: 1.4;
  }
}

/* Blog mobile (očuvano iz B632) */
@media (max-width: 759px) {
  .blog-main,
  .post-main {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-bottom: 2.5rem;
  }

  .blog-main .blog-hero {
    margin-bottom: 0.85rem;
    border-radius: var(--r-md);
  }

  .blog-main .blog-hero p {
    margin-top: 0.6rem;
    font-size: 0.9rem;
    line-height: 1.58;
  }

  .blog-main .blog-grid {
    gap: 0.8rem;
  }

  .blog-main .blog-card {
    border-radius: var(--r-md);
  }

  .blog-main .blog-card__media,
  .blog-main .blog-card__media img {
    aspect-ratio: 16 / 9.5;
  }

  .blog-main .blog-card__body {
    gap: 0.62rem;
    padding: 0.9rem;
  }

  .blog-main .blog-card h2 {
    font-size: 1.08rem;
    line-height: 1.3;
  }

  .blog-main .blog-card p {
    font-size: 0.88rem;
    line-height: 1.58;
  }

  .post-main .post-panel {
    border-radius: var(--r-md);
  }

  .post-main .post-body {
    font-size: 0.96rem;
    line-height: 1.76;
  }
}

@media (min-width: 760px) {
  .blog-main .blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.15rem;
  }

  .blog-main .blog-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .blog-main .blog-card__body {
    padding: 1.2rem;
  }
}

@media (min-width: 1080px) {
  .blog-main .blog-card:first-child {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  }

  .blog-main .blog-card:first-child .blog-card__media,
  .blog-main .blog-card:first-child .blog-card__media img {
    aspect-ratio: auto;
    min-height: 340px;
  }

  .blog-main .blog-card:first-child .blog-card__body {
    align-content: center;
    padding: clamp(1.4rem, 2.5vw, 2rem);
  }

  .blog-main .blog-card:first-child h2 {
    font-size: clamp(1.45rem, 2.2vw, 1.9rem);
    line-height: 1.2;
  }

  .blog-main .blog-card:first-child p {
    font-size: 0.98rem;
    line-height: 1.7;
  }
}

/* ============================================================
   16. REDUCED MOTION — potpuni kill-switch za sav pokret sloja
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .landing-page .process-card,
  .landing-page .benefit-card,
  .landing-page .benefit-icon,
  .landing-page .loc-card,
  .landing-page .loc-card-chevron,
  .landing-page .vehicle-card-inner--featured,
  .landing-page .vehicle-gallery-btn,
  .landing-page .vehicle-nav-btn,
  .landing-page .final-cta-link,
  .landing-page .airport-step-card,
  .landing-page .airport-trust-card,
  .rez-main .vehicle-card,
  .faq-page .faq-help-item,
  .faq-page .faq-item,
  .faq-page .faq-item summary i,
  .faq-page .faq-item summary svg,
  .blog-main .blog-card,
  .blog-main .blog-card__media img,
  .footer-modern .trust-badge,
  .footer-modern #google-reviews-footer .review-card,
  #main-header .header-reserve-btn,
  .quick-cta-btn,
  .faq-btn--primary,
  .rez-search-btn,
  .hero-online-rez-mobile,
  .hero-primary-btn,
  .cta-btn-solid,
  .final-cta-link,
  .location-nav-btn,
  .vc-btn,
  .hero-secondary-btn,
  .final-cta-link--secondary {
    transition: none;
    animation: none;
  }
}