:root {
  --bg-page: #121212;
  --bg-card: #2a2a2a;
  --bg-card-2: #363636;
  --bg-input: #1a1a1a;
  --text-primary: #ffffff;
  --text-secondary: #a0a0a0;
  --accent: #e50914;
  --accent-2: #ff3b3b;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --page-max: 1360px;
  --side-pad: clamp(16px, 4vw, 48px);
  --hover-halo: 0 0 40px 6px rgba(229, 9, 20, .5), 0 0 90px 18px rgba(229, 9, 20, .22);
  --rest-halo: 0 10px 24px -8px rgba(0, 0, 0, .55), 0 3px 8px rgba(0, 0, 0, .3);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  position: relative;
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: 'Kanit', sans-serif;
}

/* Without this, .nav's own top margin collapses through body (its first
   in-flow child — the flag clip before it is position:absolute, out of
   flow) and pushes body's whole box down by that margin, leaving a gap
   above the flag and shifting everything below the viewport's real top. */
body {
  display: flow-root;
}

/* Belt-and-suspenders against horizontal scroll from the rotated flag below.
   Kept on html only, not body: overflow-x:hidden on both turns them into two
   competing scroll containers and breaks .nav's position:sticky. */
html {
  overflow-x: hidden;
}

/* The flag itself is rotated and shifted well past the left/right edges, so it
   needs its own clipping box rather than relying on html's overflow alone —
   real touch-drag panning on mobile could still reach it otherwise. Sized to
   the flag's own footprint (not 100vh) so it never fights page scrolling.
   position:fixed (not absolute) so it stays pinned to the viewport's top-left
   corner as the visitor scrolls, instead of just living in the hero and then
   scrolling away with the rest of the page. */
.page-flag-clip {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 1100px;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

/* Subtle waving-flag texture tucked into the top-left corner, dissolving into the
   plain black background — a hint of brand, not a loud graphic. */
.page-flag-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 1080px;
  max-width: 88vw;
  height: 503px;
  overflow: hidden;
  -webkit-mask-image: radial-gradient(ellipse 120% 130% at 0% 0%, #000 0%, #000 60%, transparent 98%);
  mask-image: radial-gradient(ellipse 120% 130% at 0% 0%, #000 0%, #000 60%, transparent 98%);
  opacity: .85;
  pointer-events: none;
  z-index: 0;
}

/* Waving-flag VIDEO treatment (YouTube embed, muted/looping), faded into the
   page background exactly like the old photo was. */
.page-flag-bg {
  width: 1600px;
  height: 700px;
  filter: grayscale(1) brightness(.55) contrast(1.05);
  opacity: .55;
  left: -181px;
  transform: rotate(-15deg);
  transform-origin: top left;
  /* Two independent fades (not one diagonal gradient) — a single diagonal axis
     fades the straight-down edge much slower than the straight-right edge,
     leaving the bottom looking hard even once the right side is soft. */
  -webkit-mask-image:
    linear-gradient(to right, #000 0%, #000 20%, transparent 78%),
    linear-gradient(to bottom, #000 0%, #000 20%, transparent 78%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, #000 0%, #000 20%, transparent 78%),
    linear-gradient(to bottom, #000 0%, #000 20%, transparent 78%);
  mask-composite: intersect;
}

.page-flag-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

img { max-width: 100%; display: block; }

a { text-decoration: none; color: inherit; }

h1, h2, h3, .display-font {
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  letter-spacing: .3px;
  margin: 0;
}

/* ---------------- Scroll reveal ---------------- */

.reveal {
  opacity: 0;
  transform: translateY(32px);
  /* Only opacity and transform animate here — animating a mask-image gradient was what made the
     slide-up stutter, since it's repainted on every frame. */
  transition:
    opacity .7s ease-out,
    transform .7s cubic-bezier(.2, .7, .2, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.car-grid .car-card:nth-child(2) { transition-delay: .12s; }
.car-grid .car-card:nth-child(3) { transition-delay: .24s; }

/* Staggered reveal for the dynamically-rendered price panels (cenik.js) and car-detail blocks
   (auta.js) — each one fades/slides in a beat after the one before it, instead of all at once. */
.pricing-detail > .reveal:nth-child(2) { transition-delay: .1s; }
.pricing-detail > .reveal:nth-child(3) { transition-delay: .2s; }
.pricing-detail > .reveal:nth-child(4) { transition-delay: .3s; }

.car-detail > .reveal:nth-child(2) { transition-delay: .1s; }
.car-detail > .reveal:nth-child(3) { transition-delay: .2s; }
.car-detail > .reveal:nth-child(4) { transition-delay: .3s; }
.car-detail > .reveal:nth-child(5) { transition-delay: .4s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------------- Nav ---------------- */

.nav {
  position: sticky;
  /* viewport-fit=cover lets the page run under the status bar; this keeps the bar clear of the
     Dynamic Island / notch on newer iPhones (env() is 0 on devices without one). */
  top: calc(14px + env(safe-area-inset-top));
  /* Above .mobile-menu-backdrop (550): the burger lives inside .nav now, and it
     must stay clickable (to close the menu) while that backdrop is showing. */
  z-index: 595;
  max-width: var(--page-max);
  margin: 14px auto;
  margin-inline: max(14px, calc((100% - var(--page-max)) / 2 + 14px));
  background: var(--bg-card);
  border-radius: 24px;
  /* Kept tight (was 0 24px 48px) so the shadow doesn't bleed down onto the
     page title sitting right below — that blur radius was covering it. */
  box-shadow: 0 4px 10px rgba(0, 0, 0, .3), 0 6px 14px rgba(0, 0, 0, .35);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 20px;
  opacity: 1;
}

.nav-logo-badge {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: block;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  justify-content: center;
}

.nav-links a {
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-primary);
  white-space: nowrap;
  transition: background-color .2s, color .2s;
}

.nav-links a:hover { background: #fff; color: #111; }

.nav-links a.is-active,
.mobile-menu a.is-active {
  background: var(--accent);
  color: var(--text-primary);
}

.nav-links a.is-active:hover { background: #fff; color: #111; }

.nav-socials {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-right: 6px;
}

.nav-socials svg, .mobile-menu-socials svg {
  width: 22px;
  height: 22px;
  fill: var(--text-primary);
}

.nav-call {
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
}

.nav-call svg { width: 26px; height: 26px; fill: var(--text-primary); }

.mobile-fab-group {
  display: none;
  position: fixed;
  left: 50%;
  /* Lifted clear of the bottom edge so Safari's bottom toolbar doesn't cover it. */
  bottom: calc(42px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 600;
  align-items: center;
  gap: 14px;
  transition: opacity .8s cubic-bezier(.22, 1, .36, 1), transform .8s cubic-bezier(.22, 1, .36, 1);
}

/* On pages with a hero photo, stays hidden until scrolled a good distance past it
   (see .hero handling in script.js) instead of floating over the photo right away. */
.mobile-fab-group.fab-pending {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(16px);
}

/* Solid backdrop behind the floating nav pill, so scrolling content can't peek through
   the gaps around its rounded corners/side margins as it passes underneath. */
.nav-backdrop {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 39px;
  background: var(--bg-page);
  z-index: 490;
  pointer-events: none;
}

/* Content fades out as it disappears under the nav, instead of a hard cut-off edge. */
.scroll-fade {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  z-index: 400;
  pointer-events: none;
}

.scroll-fade-top {
  top: 39px;
  height: 75px;
  background: linear-gradient(to bottom, var(--bg-page), rgba(18, 18, 18, 0));
}

.nav-burger {
  display: none;
  position: relative;
  z-index: 591;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .4), 0 16px 34px 4px rgba(229, 9, 20, .4);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
}

.mobile-reserve-btn {
  flex: 0 0 auto;
  padding: 10px 34px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--text-primary);
  font-family: 'Kanit', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .4), 0 16px 34px 4px rgba(229, 9, 20, .4);
}

.nav-burger span {
  width: 22px;
  height: 3px;
  background: var(--text-primary);
  border-radius: 2px;
}

/* Mobile menu drawer */

.mobile-menu-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .6);
  z-index: 550;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}

/* Unrolls downward from the nav bar, like an accordion, instead of fading in as a
   separate floating card — grid-template-rows 0fr->1fr grows the height from the top. */
.mobile-menu {
  position: fixed;
  left: 16px;
  right: 16px;
  top: 82px;
  z-index: 590;
  background: var(--bg-card);
  border-radius: 24px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .5);
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition: grid-template-rows .32s ease, opacity .28s ease;
}

.mobile-menu-inner {
  min-height: 0;
  overflow: hidden;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mobile-menu a {
  padding: 14px 16px;
  border-radius: 16px;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text-primary);
}

.mobile-menu-socials {
  display: flex;
  gap: 18px;
  padding: 10px 16px 4px;
}

.mobile-menu.is-open,
.mobile-menu-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.mobile-menu.is-open { grid-template-rows: 1fr; }

/* ---------------- Hero ---------------- */

.hero {
  padding: 0 var(--side-pad) 20px;
  max-width: var(--page-max);
  margin: 0 auto;
}

.hero-media {
  position: relative;
  width: 100%;
  /* Sized to what's left of the screen under the nav (~106px) so the whole card,
     including the small print at the bottom, is visible without scrolling. */
  height: calc(100vh - 128px);
  min-height: 560px;
  max-height: 820px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #111;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 92%;
}

/* The photo's bright sky showed through as a thin light rim along the card's rounded edges: the
   slowly zooming photo is its own GPU layer and Chrome clips it a hair differently from the
   gradient over it, so a sliver of un-darkened photo peeked out. Clipping the whole card 1px
   inside its rounded edge (clip-path, applied to everything at once) plus a 2px inner frame in the
   page colour removes it. */
.hero-media { clip-path: inset(1px round calc(var(--radius-lg) - 1px)); }
.hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 2px var(--bg-page);
  pointer-events: none;
}

.hero-gradient {
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
}

.hero-gradient-top {
  top: 0;
  height: 58%;
  background: linear-gradient(to bottom, rgba(10,8,6,.9), rgba(10,8,6,0));
}

.hero-gradient-bottom {
  bottom: 0;
  height: 50%;
  background: linear-gradient(to top, rgba(10,8,6,.88), rgba(10,8,6,0));
}

.hero-text-top {
  position: absolute;
  top: 5.5%;
  left: 0;
  right: 0;
  text-align: center;
  color: var(--text-primary);
  padding: 0 20px;
}

.hero-text-top h1 {
  font-size: clamp(1.7rem, 3.6vw, 3.1rem);
  line-height: 1.06;
}

.hero-kicker {
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: .85;
  font-size: clamp(.72rem, 1.3vw, 1.05rem);
  margin: 10px 0 0;
}

.hero-text-bottom {
  position: absolute;
  bottom: 4%;
  left: 0;
  right: 0;
  text-align: center;
  color: var(--text-primary);
  padding: 0 5%;
}

.hero-media .hero-wordmark {
  display: none; /* TEMPORARILY hidden — set back to block to bring the logo back */
  margin: 3px auto 0;
  width: auto;
  height: clamp(34px, 4vw, 50px);
  object-fit: contain;
}

/* Homepage hero: the group photo drifts very slowly (a Ken Burns-style zoom), and the headline and
   subheading dissolve in a beat after load, so the first screen feels alive rather than static. */
@keyframes heroPhotoDrift {
  from { scale: 1; }
  to { scale: 1.06; }
}

@keyframes heroTextIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.hero-media img {
  animation: heroPhotoDrift 22s ease-in-out infinite alternate;
}

.hero-text-top,
.hero-text-bottom {
  animation: heroTextIn 1.2s ease-out .25s both;
}

@media (prefers-reduced-motion: reduce) {
  .hero-media img,
  .hero-text-top,
  .hero-text-bottom { animation: none; }
}

.hero-subheading {
  margin: 0 0 16px;
  font-family: 'Kanit', sans-serif;
  font-weight: 700;
  font-size: clamp(1.05rem, 2.2vw, 1.6rem);
  line-height: 1.3;
}

.hero-cta {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.hero-btn {
  padding: 13px 28px;
  border-radius: var(--radius-pill);
  font-family: 'Kanit', sans-serif;
  font-weight: 700;
  font-size: clamp(.85rem, 1.1vw, 1rem);
  white-space: nowrap;
  transition: background-color .2s, color .2s, transform .2s;
}

.hero-btn--primary { background: var(--accent); color: var(--text-primary); }
.hero-btn--primary:hover { background: var(--accent-2); transform: translateY(-2px); }

.hero-btn--ghost { background: #fff; color: #111; border: 1.5px solid #fff; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.hero-btn-icon { width: 1.15em; height: 1.15em; flex: none; fill: currentColor; }
/* Narrow phones: slimmer side padding so both buttons still sit on one row with the icon. */
@media (max-width: 380px) {
  .hero-btn { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 350px) {
  .hero-btn { padding-left: 15px; padding-right: 15px; }
}
.hero-btn--ghost:hover { background: #f2f2f2; transform: translateY(-2px); }

/* Deliberately identical to .hero-kicker ("Půjčovna ikonických muscle cars"),
   per the client — keep the two in sync. */
.hero-fineprint {
  margin: 0;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: clamp(.72rem, 1.3vw, 1.05rem);
  line-height: 1.5;
  opacity: .85;
}

.hero-fineprint strong { font-weight: 800; opacity: 1; }

/* ---------------- Lineup ---------------- */

.lineup {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 28px var(--side-pad) 90px;
}

.lineup-heading {
  color: #fff;
  text-shadow: 0 0 20px rgba(229, 9, 20, .6), 0 0 3px rgba(229, 9, 20, .4);
  text-align: center;
  font-size: clamp(1.5rem, 2.8vw, 2.3rem);
  margin: 0 0 28px;
}

.car-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}



.car-card {
  position: relative;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .4);
  /* Also covers .reveal's opacity fade-in: since both rules set the transition shorthand on this
     element, whichever wins the cascade needs the full list. */
  transition:
    transform .35s ease,
    opacity .7s ease-out;
}

.car-card:hover { transform: translateY(-4px); }

/* The photo lives on its own layer (not .car-card's own background) so it can
   zoom on hover independently of the card's own lift/fade transitions. */
.car-card-photo {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: cover;
  transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}

/* Resting state is pulled back (zoomed out); hovering pulls the camera in.
   Each card photo (images/cars/<car>/card.jpg) is pre-cropped to the card's 3:4 with the car
   already centred, so a plain centred cover-fit is all it needs. */
.car-card-photo { background-position: 50% 50%; }
.car-card--challenger .car-card-photo { background-image: url('../images/cars/challenger/card.jpg'); }
.car-card--camaro .car-card-photo { background-image: url('../images/cars/camaro/card.jpg'); }
.car-card--mustang .car-card-photo { background-image: url('../images/cars/mustang/card.jpg'); }

.car-card::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 55%;
  background: linear-gradient(to top, rgba(10,8,6,.82), rgba(10,8,6,0));
  transition: height .35s ease;
}

.car-card:focus-within::after { height: 85%; }

.car-card-body {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 0 18px 22px;
}

.car-card-name {
  margin: 0;
  text-align: center;
  color: var(--text-primary);
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: clamp(1rem, 1.7vw, 1.35rem);
  letter-spacing: .3px;
}

.car-card-more {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: grid-template-rows .4s ease, opacity .3s ease;
}

.car-card:focus-within .car-card-more {
  grid-template-rows: 1fr;
  opacity: 1;
  pointer-events: auto;
}

.car-card-more-inner { padding-top: 12px; }

.car-card-desc {
  margin: 0;
  text-align: center;
  color: var(--text-primary);
  font-size: .85rem;
  line-height: 1.45;
  opacity: .92;
}

.car-card-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.car-card-btn {
  padding: 9px 20px;
  border-radius: var(--radius-pill);
  font-family: 'Kanit', sans-serif;
  font-weight: 700;
  font-size: .85rem;
  white-space: nowrap;
  transition: background-color .2s, color .2s, border-color .2s;
}

.car-card-btn--primary { background: var(--accent); color: var(--text-primary); }
.car-card-btn--primary:hover { background: var(--accent-2); }

.car-card-btn--ghost { background: #fff; color: #111; border: 1.5px solid #fff; }
.car-card-btn--ghost:hover { background: #f2f2f2; }

@media (hover: hover) and (pointer: fine) {
  .car-card:hover .car-card-photo { transform: scale(1.15); }
  .car-card:hover::after { height: 85%; }
  .car-card:hover .car-card-more {
    grid-template-rows: 1fr;
    opacity: 1;
    pointer-events: auto;
  }
}

/* ---------------- Footer ---------------- */

.footer {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--side-pad) 40px;
}

.footer-card {
  background: var(--bg-card);
  color: var(--text-primary);
  border-radius: var(--radius-lg);
  padding: clamp(32px, 5vw, 56px) clamp(24px, 5vw, 64px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 40px;
}

.footer-logo {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

.footer-tagline {
  margin: 16px 0 0;
  max-width: 340px;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

.footer-socials {
  display: flex;
  gap: 12px;
  margin-top: 22px;
}

.footer-socials a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .2s;
}

.footer-socials a:hover { background: rgba(255, 255, 255, .18); }

.footer-socials svg { width: 20px; height: 20px; fill: var(--text-primary); }

.footer-col h4 {
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-size: .95rem;
  color: var(--accent);
  margin: 0 0 18px;
}

.footer-col {
  display: flex;
  flex-direction: column;
}

.footer-col a,
.footer-col p {
  color: var(--text-primary);
  opacity: .88;
  font-size: .95rem;
  margin: 0 0 12px;
  transition: opacity .2s;
}

.footer-col a:hover { opacity: 1; text-decoration: underline; }

.footer-bottom {
  margin-top: clamp(28px, 5vw, 48px);
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.footer-bottom p {
  margin: 0;
  font-size: .82rem;
  color: var(--text-secondary);
}

.footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}

.footer-legal-link {
  font-size: .82rem;
  color: var(--text-secondary);
  transition: opacity .2s;
}

.footer-legal-link:hover { opacity: 1; text-decoration: underline; color: var(--text-primary); }

/* ---------------- 404 "page not found" (404.html) ---------------- */
.page-intro.not-found { padding-top: clamp(30px, 6vw, 70px); padding-bottom: clamp(60px, 9vw, 110px); }
.not-found-code {
  margin: 0 !important;
  max-width: none !important;
  font-family: 'Anton', sans-serif;
  font-size: clamp(6rem, 22vw, 12rem) !important;
  line-height: 1;
  color: var(--accent) !important;
  text-shadow: 0 0 40px rgba(229, 9, 20, .55);
}
.not-found h1 { margin-top: 6px; }
.not-found-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}

/* ---------------- Podmínky pronájmu (podminky-pronajmu.html) ----------------
   Key facts as a stats strip, then the topics as cards (same panel + bullet list look as Ceník's
   "Informace"), two columns on desktop. */
.rules-section {
  position: relative;
  z-index: 2;
  max-width: 1196px;
  margin: 0 auto;
  padding: 28px var(--side-pad) clamp(50px, 7vw, 90px);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.car-stats.rules-facts { grid-template-columns: repeat(4, 1fr); }
.rules-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
.rules-card h3 { text-align: left; }
.rules-card a { color: var(--text-primary); text-decoration: underline; text-decoration-color: rgba(229, 9, 20, .7); text-underline-offset: 3px; }
.nowrap { white-space: nowrap; } /* keeps an amount like "10 000 Kč" in one piece */
.rules-note { margin: 4px auto 0; max-width: 680px; font-size: .9rem; line-height: 1.6; color: var(--text-secondary); text-align: center; }
.rules-note a { color: var(--text-primary); text-decoration: underline; text-decoration-color: rgba(229, 9, 20, .7); text-underline-offset: 3px; }
@media (min-width: 881px) { .rules-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) {
  .car-stats.rules-facts { grid-template-columns: repeat(2, 1fr); row-gap: 18px; }
  .car-stats.rules-facts .car-stat:nth-child(2) { border-right: none; }
}

/* ---------------- Legal pages (Obchodní podmínky, …) ----------------
   One dark card holding the document, with a narrow measure so long legal text stays readable.
   Articles get the red "Článek X" kicker over an Anton heading; points are a numbered list whose
   numbers come from the source text (li value), bullet sub-lists sit indented under their point. */
.legal-section {
  position: relative;
  z-index: 2;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 28px var(--side-pad) clamp(40px, 5vw, 64px);
}

.legal-doc {
  max-width: 860px;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 52px) clamp(20px, 4.5vw, 60px);
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--rest-halo);
  color: #dcdcdc;
  font-size: clamp(.92rem, 1.1vw, 1rem);
  line-height: 1.7;
}

.legal-lead { margin: 0 0 clamp(24px, 3vw, 34px); color: var(--text-primary); }
.legal-article > p { margin: 0 0 10px; }

.legal-bullets { margin: 0 0 10px; padding-left: 1.4em; }
.legal-bullets li + li { margin-top: 8px; }
.legal-bullets li::marker { color: var(--accent); }

.legal-article + .legal-article {
  margin-top: clamp(28px, 3.5vw, 40px);
  padding-top: clamp(28px, 3.5vw, 40px);
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.legal-article h2 {
  margin: 0 0 14px;
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  line-height: 1.25;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.legal-article-num {
  display: block;
  margin-bottom: 4px;
  font-family: 'Kanit', sans-serif;
  font-size: .62em;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--accent);
}

.legal-points {
  margin: 0;
  padding-left: 1.6em;
}

.legal-points > li { padding-left: .3em; }
.legal-points > li + li { margin-top: 12px; }
.legal-points > li::marker { color: var(--accent); font-weight: 700; }
.legal-points p { margin: 0; }

.legal-points ul {
  margin: 8px 0 0;
  padding-left: 1.2em;
}
.legal-points ul li + li { margin-top: 6px; }
.legal-points ul li::marker { color: var(--accent); }

.legal-doc a {
  color: var(--text-primary);
  text-decoration: underline;
  text-decoration-color: rgba(229, 9, 20, .7);
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.legal-doc a:hover { text-decoration-color: var(--accent); }

/* operator's identification: label / value pairs */
.legal-id {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 18px;
  margin: 12px 0 0;
  padding: 16px 20px;
  background: var(--bg-input);
  border-radius: 16px;
}
.legal-id dt { color: var(--text-secondary); }
.legal-id dd { margin: 0; color: var(--text-primary); }

@media (max-width: 560px) {
  .legal-id { grid-template-columns: 1fr; gap: 2px; }
  .legal-id dd + dt { margin-top: 10px; }
}

/* ---------------- Car detail page ---------------- */

.page-intro {
  position: relative;
  z-index: 2;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--side-pad) 4px;
  text-align: center;
}

.page-intro h1 {
  color: var(--text-primary);
  text-shadow: 0 0 22px rgba(229, 9, 20, .85), 0 0 4px rgba(229, 9, 20, .6);
  font-size: clamp(2.2rem, 5.2vw, 3.75rem);
  letter-spacing: .14em;
  margin: 0 0 10px;
}

.page-intro p {
  margin: 0 auto;
  max-width: 560px;
  font-size: clamp(.9rem, 1.3vw, 1.05rem);
  color: var(--text-primary);
  text-wrap: balance; /* no lone last word on its own line */
}

/* Vozový park's car picker is now the same .car-pick/.car-dial/.car-banner component as Ceník and
   Rezervace (see those rules above) — this section is just the specs/reviews/gallery content below
   it, which still needs its own wide container now that it's no longer sharing one with the picker. */
.car-detail-section {
  position: relative;
  z-index: 2;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 20px var(--side-pad) 90px;
}

.car-detail {
  transition: opacity .18s ease, transform .18s ease;
}

.car-detail.is-switching { opacity: 0; }

.car-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--bg-card);
  color: var(--text-primary);
  border-radius: var(--radius-lg);
  padding: 22px 10px;
}

.car-stat {
  text-align: center;
  padding: 0 8px;
  border-right: 1px solid rgba(255, 255, 255, .15);
}

.car-stat:last-child { border-right: none; }

.car-stat strong {
  display: block;
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 3.6vw, 2.35rem);
  letter-spacing: .5px;
  color: var(--accent);
}

.car-stat span {
  display: block;
  margin-top: 5px;
  font-size: clamp(.72rem, 1.15vw, .9rem);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-secondary);
}

.car-review {
  position: relative;
  overflow: hidden;
  padding: 28px clamp(52px, 8vw, 76px);
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  text-align: center;
}

.car-review-content {
  position: relative;
}

.car-review-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, .1);
  color: var(--text-primary);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color .2s;
  z-index: 1;
}

.car-review-arrow:hover { background: rgba(255, 255, 255, .2); }
.car-review-prev { left: 10px; }
.car-review-next { right: 10px; }

.car-review-dots {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}

.car-review-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .25);
  cursor: pointer;
  transition: background-color .2s, transform .2s;
}

.car-review-dot:hover { background: rgba(255, 255, 255, .45); }
.car-review-dot.is-active { background: var(--accent); transform: scale(1.3); }

.car-review::before {
  content: none; /* the big quote mark got clipped by the box into two little bars top-left — removed */
  position: absolute;
  top: -34px;
  left: 12px;
  font-family: 'Anton', sans-serif;
  font-size: 9rem;
  color: rgba(255, 255, 255, .06);
  line-height: 1;
  pointer-events: none;
}

.car-review-stars {
  position: relative;
  color: var(--accent);
  letter-spacing: 4px;
  font-size: 1.1rem;
  margin-bottom: 10px;
}

.car-review-quote {
  position: relative;
  margin: 0 auto 10px;
  max-width: 640px;
  color: var(--text-primary);
  font-weight: 600;
  font-style: italic;
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  line-height: 1.5;
}

.car-review cite {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-style: normal;
}
/* who wrote it, then the car they rented under it */
.car-review-author {
  font-family: 'Kanit', sans-serif;
  font-weight: 700;
  font-size: .95rem;
  color: var(--text-primary);
}
.car-review-car {
  font-weight: 700;
  font-size: .7rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent);
}

/* Vozový park's whole content area (auta.js) is one grid now, not stats/review sitting outside a
   separate specs+gallery+desc grid — that's what lets the mobile override below move review to a
   completely different spot (between specs and gallery) just by reassigning grid areas, with no
   HTML/JS change needed. Desktop keeps the original reading order: stats, review, specs next to
   gallery, desc. */
#carDetail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "stats stats"
    "review review"
    "specs gallery"
    "desc desc";
  gap: 20px;
  margin-top: 20px;
  align-items: start;
}

.car-stats { grid-area: stats; }
.car-review { grid-area: review; }
.car-detail-desc-block { grid-area: desc; }
.car-panel--specs { grid-area: specs; }
.car-gallery-card { grid-area: gallery; }

.car-detail-desc {
  text-align: center;
  font-style: italic;
  color: var(--text-secondary);
  font-weight: 600;
  font-size: clamp(.95rem, 1.4vw, 1.15rem);
  line-height: 1.5;
  margin: 4px 0 22px;
}

.car-detail-cta {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

.car-cta-btn {
  padding: 15px 30px;
  border-radius: var(--radius-pill);
  font-family: 'Kanit', sans-serif;
  font-weight: 700;
  font-size: clamp(.85rem, 1.1vw, 1rem);
  white-space: nowrap;
  transition: background-color .2s, color .2s, transform .2s, border-color .2s;
}

.car-cta-btn--primary { background: var(--accent); color: var(--text-primary); }
.car-cta-btn--primary:hover { background: var(--accent-2); transform: translateY(-2px); }

.car-cta-btn--ghost { background: #fff; color: #111; border: 1.5px solid #fff; }
.car-cta-btn--ghost:hover { background: #f2f2f2; transform: translateY(-2px); }

.car-panel {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 24px clamp(18px, 3vw, 28px);
}

.car-panel h3 {
  color: var(--text-primary);
  text-shadow: 0 0 22px rgba(229, 9, 20, .85), 0 0 4px rgba(229, 9, 20, .6);
  font-size: 1.05rem;
  margin: 0 0 14px;
}

.price-tier-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.price-tier-list li span { color: var(--accent); font-weight: 700; }
.price-tier-list li strong { font-weight: 500; white-space: nowrap; }

.car-bullet-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.car-bullet-list li {
  position: relative;
  padding: 11px 0 11px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  font-size: .95rem;
  line-height: 1.4;
}

.car-bullet-list li:first-child { padding-top: 0; }
.car-bullet-list li:first-child::before { top: 9px; } /* no top padding on the first item, so its dot moves up with the text */
.car-bullet-list li:last-child { border-bottom: none; padding-bottom: 0; }

.car-bullet-list li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 20px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

/* ---------------- Ceník: static price list (same for every car in the fleet) ---------------- */

.pricing-section {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: 0 auto;
  padding: 32px var(--side-pad) 90px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Car picker for the price list: the three car names as big type in a row, and under them one wide
   banner strip with a cut of the chosen car. Picking a car lifts its name (a little larger, white
   with a red glow), and the banner swaps: the new strip slides in from the side it lies on in the
   row while the old one slides out the other way. --i (0-2, set from cenik.js) is the chosen car. */
.car-pick {
  position: relative;
  z-index: 2;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 26px var(--side-pad) 0;
}

.car-dial { max-width: 860px; margin: 0 auto 20px; }

.car-dial-names { display: grid; grid-template-columns: repeat(3, 1fr); }

.car-dial-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 2px 10px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--text-primary);
  font-family: 'Kanit', sans-serif;
  opacity: .5;
  transition: opacity .3s ease;
  -webkit-tap-highlight-color: transparent;
}

.car-dial-btn small {
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  transition: color .3s ease;
}

.car-dial-btn strong {
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  font-size: clamp(1.05rem, 5.2vw, 2.3rem);
  line-height: 1.05;
  letter-spacing: .5px;
  text-transform: uppercase;
  transform-origin: 50% 60%;
  transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), text-shadow .4s ease;
}

.car-dial-btn em {
  font-style: normal;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-secondary);
  transition: color .3s ease;
}

.car-dial-btn.is-active { opacity: 1; }
.car-dial-btn.is-active small, .car-dial-btn.is-active em { color: var(--accent); }

/* the chosen name grows a little */
.car-dial-btn.is-active strong {
  transform: scale(1.14);
  text-shadow: 0 0 22px rgba(229, 9, 20, .85), 0 0 4px rgba(229, 9, 20, .6);
}

.car-dial-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 6px; }

@media (hover: hover) {
  .car-dial-btn:not(.is-active):hover { opacity: .8; }
}

.car-banner {
  --i: 0;
  position: relative;
  aspect-ratio: 2.3 / 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #111;
  box-shadow: 0 14px 32px rgba(0, 0, 0, .45);
}

/* soft edge shading so the strip sits in the page like the hero card does */
.car-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 70px rgba(0, 0, 0, .45);
}

/* Each strip is the photo at its own full width, centred on its car with room above and below, so
   the whole car is in view and nothing is enlarged beyond filling the banner. */
.car-banner-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  opacity: 0;
  /* strips lying left of the chosen one wait on the left, the ones on the right wait on the right */
  transform: translateX(calc((var(--n) - var(--i)) * 8%)) scale(1.06);
  transition: opacity .6s ease, transform .9s cubic-bezier(.22, 1, .36, 1);
}

.car-banner-img.is-active { opacity: 1; transform: none; }

/* The auto-rotation's crossfade layer (added in JS, see car-banner-rotate.js): sits on top of its
   parent .car-banner-img, same sizing/centring, starting invisible. Its own opacity is what
   animates during a rotation tick — the parent's photo stays put underneath the whole time, so for
   that one transition both photos are genuinely overlapping, not a fade-to-black-and-back. */
.car-banner-overlay {
  position: absolute;
  inset: 0;
  display: block;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  opacity: 0;
}

.car-banner-img[data-car="challenger"] { background-image: url('../images/cars/challenger/banner-1.jpg'); }
.car-banner-img[data-car="camaro"] { background-image: url('../images/cars/camaro/banner-1.jpg'); }
.car-banner-img[data-car="mustang"] { background-image: url('../images/cars/mustang/banner-1.jpg'); }

/* Vozový park only: the per-car intro videos (see car-banner-video.js). Each sits inside its car's
   strip, above the rotating photos, so it slides with the strip when cars switch. The
   files are pre-cropped per breakpoint (2.3:1 desktop, 2:1 mobile), so cover only trims slivers.
   It stays invisible until it really plays, and fades out on end to reveal the photo carousel. */
.car-banner-video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  background: #111;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.2s ease;
}
.car-banner-video.is-playing { opacity: 1; }
.car-banner-video.is-done { display: none; }

.car-banner-sound,
.car-banner-replay {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 10px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 999px;
  background: rgba(0, 0, 0, .55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  font-family: 'Kanit', sans-serif;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity .6s ease, background .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.car-banner-sound[hidden], .car-banner-replay[hidden] { display: none; }
.car-banner-sound.is-leaving, .car-banner-replay.is-leaving { opacity: 0; pointer-events: none; }
/* bottom-left, after the video ends: plays it again */
.car-banner-replay { right: auto; left: 14px; padding-left: 12px; }
.car-banner-replay svg { width: 16px; height: 16px; fill: currentColor; flex: none; }
.car-banner-sound svg { width: 20px; height: 20px; fill: currentColor; flex: none; }
.car-banner-sound .icon-sound { display: none; }
.car-banner-sound[aria-pressed="true"] { padding-right: 10px; }
.car-banner-sound[aria-pressed="true"] .icon-sound { display: block; }
.car-banner-sound[aria-pressed="true"] .icon-muted,
.car-banner-sound[aria-pressed="true"] .car-banner-sound-label { display: none; }
.car-banner-sound:focus-visible, .car-banner-replay:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (hover: hover) {
  .car-banner-sound:hover, .car-banner-replay:hover { background: rgba(229, 9, 20, .8); }
}
@media (max-width: 880px) {
  .car-banner-sound { right: 10px; bottom: 10px; padding: 6px 12px 6px 8px; font-size: .68rem; }
  .car-banner-sound svg { width: 18px; height: 18px; }
  .car-banner-replay { right: auto; left: 10px; bottom: 10px; padding: 6px 12px 6px 10px; font-size: .68rem; }
  .car-banner-replay svg { width: 14px; height: 14px; }
}

/* no animation on first load, only when the visitor picks another car */
.car-pick:not(.is-ready) .car-banner-img,
.car-pick:not(.is-ready) .car-dial-btn,
.car-pick:not(.is-ready) .car-dial-btn strong { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .car-banner-img, .car-dial-btn, .car-dial-btn strong { transition: none; }
}
.pricing-detail { display: flex; flex-direction: column; gap: 20px; }

/* Desktop only: the four panels as a 2×2 grid (rentals on top, the rest below) instead of one long
   stack — the section widens to give each column room, the CTA row still spans both underneath. */
@media (min-width: 881px) {
  .pricing-section { max-width: 1196px; } /* 1040px + 15% */
  .pricing-detail { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
  .price-panel-cta { grid-column: 1 / -1; }
  /* Mustang has no Rychlý zážitek panel, so its Informace panel spans the full width of the two
     tables above it instead of leaving an empty cell beside it. */
  .price-panel--wide { grid-column: 1 / -1; }
}

.price-panel h3 { text-align: center; }

.price-panel-subtitle {
  max-width: 460px;
  margin: -6px auto 18px;
  text-align: center;
  font-size: .85rem;
  line-height: 1.5;
  color: var(--text-primary);
  opacity: .8;
}

/* Rychlý zážitek is now the same table as the other two (see quickHtml in cenik.js) — no styling
   of its own left to keep. */


.price-table-wrap { overflow-x: auto; }

/* table-layout:fixed so column widths come purely from the rules below (never from how wide a given
   row's content happens to be) — that's what makes the "Nájezd" width promise below reliable. */
.price-table { width: 100%; border-collapse: collapse; table-layout: fixed; }

.price-table th, .price-table td {
  padding: 11px 8px;
  text-align: center;
  white-space: nowrap;
}

.price-table th:first-child, .price-table td:first-child { text-align: left; }
/* Usually short ("12 h", "2 dny"), so this never actually wraps — but Mustang's own longer
   labels ("Po–Čt (4 dny)") need somewhere to go instead of clipping. */
.price-table td:first-child { white-space: normal; overflow-wrap: break-word; }

.price-table th {
  font-weight: 700;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-primary);
  border-bottom: 2px solid rgba(255, 255, 255, .15);
}

.price-table td {
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  font-weight: 600;
  font-size: .95rem;
}

.price-table tr:last-child td { border-bottom: none; }

/* Real prices are short enough to never actually wrap here — this is just a safety net so a longer
   placeholder like "Doplníme" wraps instead of clipping in the narrowest columns (Rychlý zážitek on
   the smallest phones). */
.price-table .price-cell { color: var(--accent); font-weight: 700; white-space: normal; overflow-wrap: break-word; }
/* Usually a short "xxx km", but Rychlý zážitek's 30 min row puts a whole phrase here instead —
   let it wrap rather than overflow its fixed-width column. */
.price-table .km-cell { color: var(--text-primary); font-weight: 500; font-size: .85rem; white-space: normal; }
/* Rychlý zážitek's name column ("Rychlé rande", "Odpolední zážitek"...) — same idea, let it wrap
   on narrow phones rather than overflow. */
.price-table .name-cell { white-space: normal; overflow-wrap: break-word; }

/* Doba and Nájezd get the same fixed % in both tables (not just each other within a table): that
   lines up Doba-to-Doba and Nájezd-to-Nájezd between the two tables, and — because both are then
   equally wide — also centres what's left in between, so the long-term table's single "Cena" price
   sits dead in the middle of the row, and the two hourly prices sit as a centred, symmetric pair. */
.price-table th:first-child, .price-table td:first-child,
.price-table th:last-child, .price-table td:last-child { width: 22%; }

/* Both price tables: every row is a rounded black bar instead of plain lines. */
.price-table--bars { border-collapse: separate; border-spacing: 0 8px; }
.price-table--bars th { border-bottom: none; padding-bottom: 0; }
.price-table--bars td { border-bottom: none; background: var(--bg-page); }
.price-table--bars th:first-child, .price-table--bars td:first-child { padding-left: 18px; }
.price-table--bars th:last-child, .price-table--bars td:last-child { padding-right: 18px; }
.price-table--bars td:first-child { border-radius: 14px 0 0 14px; }
.price-table--bars td:last-child { border-radius: 0 14px 14px 0; }
.badge-col, .badge-cell { padding-left: 0; padding-right: 0; }

/* "TOP1" badge — on hold for now, not currently used by either table (see cenik.js). */
.price-top {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 6px;
  background: var(--accent);
  box-shadow: 0 3px 8px rgba(229, 9, 20, .45);
  color: var(--text-primary);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: 1px;
  line-height: 1.3;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Smallest phones (320–380 px): tighten the hourly table so it still fits */
@media (max-width: 380px) {
  .price-panel { padding-left: 12px; padding-right: 12px; }
  .price-table th, .price-table td { padding-left: 3px; padding-right: 3px; }
  .price-table td { font-size: .8rem; }
  .price-table .km-cell { font-size: .74rem; }
  .price-table--bars th:first-child, .price-table--bars td:first-child { padding-left: 9px; }
  .price-table--bars th:last-child, .price-table--bars td:last-child { padding-right: 9px; }
  .price-top { padding: 3px 6px; font-size: .5rem; letter-spacing: .3px; }
}

/* 320 px phones: a few more px for the table so it still fits */
@media (max-width: 340px) {
  .price-panel { padding-left: 10px; padding-right: 10px; }
  .price-table td { font-size: .76rem; }
  .price-table .km-cell { font-size: .7rem; }
  .price-top { padding: 3px 5px; font-size: .46rem; }
}

.price-panel-cta {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 4px;
}

/* ---------------- Rezervace: per-car availability calendar ---------------- */

.res-notice {
  max-width: 680px;
  margin: 0 auto 22px;
  padding: 14px 22px;
  border-radius: 14px;
  background: rgba(229, 9, 20, .12);
  border: 1px dashed rgba(229, 9, 20, .55);
  color: var(--text-primary);
  font-size: .9rem;
  line-height: 1.5;
  text-align: center;
  transition: background-color .2s, border-color .2s;
}

.res-calendar-panel { max-width: 680px; margin: 0 auto 20px; }
/* Desktop: the day cells are small pills the same size as the top navigation buttons. */
@media (min-width: 881px) {
  .res-calendar-panel { width: 100%; max-width: 720px; }
  .res-cal-grid .res-day { aspect-ratio: auto; height: 42px; border-radius: var(--radius-pill); }
}

.res-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 22px;
}

.res-cal-header h3 {
  flex: 1;
  margin: 0;
  text-align: center;
  color: var(--text-primary);
  text-shadow: 0 0 20px rgba(229, 9, 20, .55), 0 0 3px rgba(229, 9, 20, .35);
  font-size: clamp(1.15rem, 2.6vw, 1.4rem);
  letter-spacing: 1px;
}

.res-cal-nav {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, .08);
  color: var(--text-primary);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color .2s;
}

.res-cal-nav:hover { background: rgba(255, 255, 255, .18); }

.res-cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.res-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: clamp(6px, 1.6vw, 14px);
}

/* Each day is a ring ("děrované kolečko") — hollow when free. A booked day is drawn as a timeline
   running left to right (00:00 at the left edge, next midnight at the right): a linear-gradient band
   for every real booked window, gaps left transparent so the ring's own background shows through
   wherever the car is actually free that day — including a gap *between* two separate same-day
   bookings. That gradient is built per day in JS (buildDayGradient() in rezervace.js, from
   availability.php's "windows") and set inline, since it varies day to day; this class only carries
   the shared border/text/cursor styling. */
.res-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .22);
  background-color: var(--bg-page);
  color: var(--text-primary);
  font-weight: 700;
  font-size: clamp(.85rem, 2vw, 1.05rem);
  transition: background-color .15s, border-color .15s;
}

.res-day.is-other-month { visibility: hidden; }
.res-day.is-past { opacity: .32; }
.res-day.is-today { box-shadow: 0 0 0 2px var(--accent); }

.res-day.is-busy {
  border-color: rgba(229, 9, 20, .75);
  color: rgba(255, 255, 255, .8);
  cursor: pointer;
}

/* ---------------- Rezervace: reservation request form (rezervace.js) ----------------
   The calendar panel plus numbered step panels stacked in one column; the form itself is just a
   flex column so the panels keep the section's 20px rhythm. */
.res-flow form { display: flex; flex-direction: column; gap: 20px; }
.res-flow .res-calendar-panel { margin: 0 auto; width: 100%; }
.res-step { width: 100%; max-width: 720px; margin: 0 auto; }

.res-step > h3, .res-step-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 18px;
}
.res-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-family: 'Kanit', sans-serif;
  font-size: .85rem;
  font-weight: 700;
  text-shadow: none;
}

/* calendar days that can be picked are real buttons */
button.res-day {
  padding: 0;
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.res-day.is-selectable { cursor: pointer; }
@media (hover: hover) { .res-day.is-selectable:not(.is-picked):hover { border-color: rgba(255, 255, 255, .6); } }
.res-day.is-picked {
  border-color: #fff;
  background-color: #fff !important;
  background-image: none !important;
  color: #111;
}
.res-day:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.res-cal-grid.is-invalid .res-day.is-selectable { border-color: rgba(255, 92, 92, .7); }
.res-dot.res-dot--picked { background-color: #fff; border-color: #fff; }

/* date range: days between pick-up and return get a soft white fill; while waiting for the return
   day the days you can still end on are outlined white */
.res-day.is-in-range {
  border-color: rgba(255, 255, 255, .55);
  background-color: rgba(255, 255, 255, .16) !important;
}
.res-cal-grid.is-picking .res-day.is-selectable:not(.is-picked) { border-color: rgba(255, 255, 255, .45); }

.res-range-hint {
  margin: -8px 0 18px;
  font-size: .9rem;
  color: var(--text-secondary);
  text-align: center;
}

/* packages from the picked day: one click sets the whole rental */
.res-packages { margin-top: 22px; }
.res-packages[hidden] { display: none; }
.res-packages-title {
  margin: 0 0 10px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-secondary);
  text-align: center;
}
.res-packages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 10px;
}
.res-pkg {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 6px;
  border: 1.5px solid rgba(255, 255, 255, .15);
  border-radius: 16px;
  background: var(--bg-input);
  color: var(--text-primary);
  font-family: 'Kanit', sans-serif;
  cursor: pointer;
  transition: border-color .2s, background-color .2s, box-shadow .2s;
  -webkit-tap-highlight-color: transparent;
}
.res-pkg strong { font-size: 1.1rem; line-height: 1.2; }
.res-pkg small { font-size: .7rem; color: var(--text-secondary); }
.res-pkg-price { font-size: .9rem; font-weight: 700; color: var(--accent); }
.res-pkg-return { font-size: .7rem; color: var(--text-secondary); }
.res-pkg.is-active {
  border-color: var(--accent);
  background: rgba(229, 9, 20, .16);
  box-shadow: 0 0 0 3px rgba(229, 9, 20, .22);
}
.res-pkg:disabled { opacity: .35; cursor: default; }
.res-pkg:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (hover: hover) { .res-pkg:not(.is-active):not(:disabled):hover { border-color: rgba(255, 255, 255, .45); } }
/* a custom range (second day clicked) is active: packages stay as an alternative, just quieter */
.res-packages.is-custom .res-pkg:not(.is-active) { opacity: .6; }
.res-packages.is-custom .res-pkg:disabled { opacity: .3; }
@media (max-width: 380px) { .res-packages-grid { grid-template-columns: repeat(2, 1fr); } }

/* "Chci více informací o autě" under the car banner */
.res-car-info { display: flex; flex-direction: column; align-items: center; gap: 18px; margin-top: 18px; }
.res-car-stats { width: 100%; }
.res-car-stats[hidden] { display: none; }

/* "Zrušit výběr" under the price */
.res-reset-row { margin-top: 14px; text-align: center; }
.res-reset-row[hidden] { display: none; }
.res-reset {
  padding: 9px 18px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-secondary);
  font-family: 'Kanit', sans-serif;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: color .2s, border-color .2s, background-color .2s;
}
.res-reset:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (hover: hover) { .res-reset:hover { color: #fff; border-color: rgba(255, 255, 255, .6); background: rgba(255, 255, 255, .06); } }

/* the price, right under the calendar */
.res-quote {
  margin-top: 20px;
  padding: 18px 20px;
  border-radius: 18px;
  background: rgba(229, 9, 20, .12);
  border: 1px solid rgba(229, 9, 20, .5);
  text-align: center;
}
.res-quote[hidden] { display: none; }
.res-quote p { margin: 0; }
.res-quote-range { font-size: .9rem; color: var(--text-secondary); }
.res-quote-price {
  margin: 4px 0 !important;
  font-family: 'Anton', sans-serif;
  font-size: clamp(1.8rem, 5vw, 2.4rem);
  letter-spacing: .02em;
  color: var(--text-primary);
  text-shadow: 0 0 20px rgba(229, 9, 20, .6);
}
.res-quote-price--custom { font-size: clamp(1.3rem, 4vw, 1.7rem); }
.res-quote-detail { font-size: .88rem; line-height: 1.5; color: var(--text-secondary); }

.res-cal-note {
  margin: 18px 0 0;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--text-secondary);
  text-align: center;
}
.res-cal-note[hidden] { display: none; }

.res-time-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px 20px;
  margin-top: 22px;
}
.res-time-row[hidden] { display: none; }
.res-time-note { margin: 10px 0 0; font-size: .85rem; line-height: 1.5; color: var(--text-secondary); }
.res-time-note[hidden] { display: none; }
.res-time-row .form-group { margin: 0; flex: 1 1 160px; }
.res-time-row select {
  width: 100%;
  background: var(--bg-input);
  border: 1.5px solid rgba(255, 255, 255, .15);
  border-radius: 14px;
  padding: 12px 16px;
  color: var(--text-primary);
  font-family: 'Kanit', sans-serif;
  font-size: .95rem;
}
.res-time-row select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(229, 9, 20, .2); }
.res-return { margin: 0 0 12px; font-size: .95rem; color: var(--text-secondary); }
.res-return strong { color: var(--text-primary); }

.res-error { margin: 14px 0 0; font-size: .88rem; font-weight: 600; color: #ff5c5c; text-align: center; }
.res-error[hidden] { display: none; }

.res-km-included { margin: 0 0 14px; font-size: .95rem; line-height: 1.5; text-align: center; }
.res-option { margin-bottom: 0; justify-content: center; }
.res-option[hidden] { display: none; }
.res-option label { font-size: .95rem; color: var(--text-primary); }
#resStepContact .res-option { justify-content: flex-start; margin: 4px 0 18px; }

.res-summary {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 18px;
  margin: 0 0 16px;
  padding: 16px 20px;
  background: var(--bg-input);
  border-radius: 16px;
}
.res-summary dt { color: var(--text-secondary); }
.res-summary dd { margin: 0; font-weight: 700; color: var(--text-primary); }
.res-summary-note { margin: 0 0 18px; font-size: .88rem; line-height: 1.5; color: var(--text-secondary); }
.res-gdpr { margin: -8px 0 18px; font-size: .8rem; line-height: 1.5; color: var(--text-secondary); }
.res-gdpr a { color: var(--text-secondary); text-decoration: underline; }
/* narrower than the card, so the button's hover (×1.12) / scroll-pop (×1.06) zoom stays inside it */
.res-summary-panel .btn-submit { display: block; width: 88%; max-width: 440px; margin: 0 auto; }

@media (max-width: 560px) {
  .res-time-row .form-group { flex: 1 1 100%; }
  .res-summary { grid-template-columns: 1fr; gap: 2px; }
  .res-summary dd + dt { margin-top: 8px; }
}

/* Detail panel that opens below the grid when a booked day is clicked — reuses .res-notice's look. */
.res-day-detail { position: relative; margin-top: 20px; padding-right: 44px; }
.res-day-detail[hidden] { display: none; }
.res-day-detail-close {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, .1);
  color: var(--text-primary);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color .15s;
}
.res-day-detail-close:hover { background: rgba(255, 255, 255, .2); }

.res-cal-legend {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 22px;
  font-size: .85rem;
  color: var(--text-primary);
}

.res-legend-item { display: flex; align-items: center; gap: 9px; }

.res-dot {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  display: inline-block;
  border: 2px solid rgba(255, 255, 255, .3);
  background-color: var(--bg-page);
}

.res-dot--free { }
.res-dot--half { background-image: linear-gradient(to right, rgba(229, 9, 20, .85) 50%, transparent 50%); border-color: rgba(229, 9, 20, .7); }
.res-dot--full { background-color: rgba(229, 9, 20, .85); border-color: rgba(229, 9, 20, .75); }

.car-gallery-card {
  position: relative;
  display: block;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: none;
  padding: 0;
  cursor: pointer;
  background: #111;
}

.car-gallery-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}

.car-gallery-card:hover img { transform: scale(1.04); }

.car-gallery-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10,8,6,.75), rgba(10,8,6,.05) 55%, rgba(10,8,6,.35));
}

.car-gallery-title {
  position: absolute;
  top: 18px;
  left: 20px;
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  color: var(--text-primary);
  font-size: 1.3rem;
  letter-spacing: .5px;
}

.car-gallery-btn {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  padding: 11px 26px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--text-primary);
  font-family: 'Kanit', sans-serif;
  font-weight: 700;
  font-size: .85rem;
}

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .94);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  z-index: 800;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}

.lightbox.is-open { opacity: 1; pointer-events: auto; }

.lightbox img {
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
}

.lightbox-close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, .1);
  color: var(--text-primary);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color .2s;
}

.lightbox-close:hover { background: rgba(255, 255, 255, .2); }

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, .1);
  color: var(--text-primary);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color .2s;
}

.lightbox-nav:hover { background: rgba(255, 255, 255, .2); }
.lightbox-prev { left: 16px; }
.lightbox-next { right: 16px; }

.lightbox-count {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--text-secondary);
  font-family: 'Kanit', sans-serif;
  font-weight: 600;
  font-size: .9rem;
}

/* ---------------- Contact page ---------------- */

.contact-section {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 28px var(--side-pad) 90px;
}

.contact-card {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 48px;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 5vw, 52px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

.contact-info { display: flex; flex-direction: column; }

.contact-block { margin-bottom: 28px; }
.contact-block:last-of-type { margin-bottom: 0; }

.contact-block h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.15rem;
  color: var(--accent);
}

.contact-block h2 svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.contact-block p { margin: 8px 0 0; font-weight: 500; color: var(--text-primary); }
.contact-block a { font-weight: 600; color: var(--text-primary); transition: opacity .2s; }
.contact-block a:hover { opacity: .7; }

.contact-note {
  margin-top: 10px;
  font-size: .85rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.contact-form h2 { font-size: 1.15rem; color: var(--accent); margin-bottom: 22px; }

.form-intro {
  margin: -10px 0 22px;
  font-size: .9rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* Desktop only: the form column stretches to the row height, so the submit button sits level with
   the bottom of the photo in the left column. */
@media (min-width: 881px) {
  .contact-form { display: flex; flex-direction: column; }
  .contact-form form { flex: 1; display: flex; flex-direction: column; }
  .contact-form .form-submit { margin-top: auto; }
}

/* Desktop only: the empty space under the contact details fills with the three-car photo, so the
   left column ends level with the form instead of leaving a gap. */
.contact-photo { display: none; }

@media (min-width: 881px) {
  .contact-photo {
    display: block;
    flex: none;
    height: 230px;
    margin-top: auto;
    border-radius: 20px;
    overflow: hidden;
  }

  .contact-photo {
    position: relative;
  }

  .contact-photo > img:not(.contact-photo-logo) {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 60%;
  }

  .contact-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(10, 8, 6, .12), rgba(10, 8, 6, .25));
    pointer-events: none;
  }

  .contact-photo-logo {
    position: absolute;
    top: 8%;
    left: 50%;
    z-index: 1;
    width: min(34%, 190px);
    height: auto;
    transform: translateX(-50%);
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .55));
  }
}

.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-group { margin-bottom: 18px; }
.form-group:last-of-type { margin-bottom: 0; }

.form-group label {
  display: block;
  font-size: .82rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .3px;
  margin-bottom: 7px;
}

.form-group input,
.form-group textarea {
  width: 100%;
  background: var(--bg-input);
  border: 1.5px solid rgba(255, 255, 255, .15);
  border-radius: 14px;
  padding: 12px 16px;
  color: var(--text-primary);
  font-family: 'Kanit', sans-serif;
  font-size: .95rem;
  transition: border-color .25s ease, box-shadow .25s ease;
}

.form-group textarea { min-height: 120px; resize: vertical; }

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(229, 9, 20, .2);
}

.form-group[hidden] { display: none; }

.form-group input.is-invalid,
.form-group textarea.is-invalid { border-color: #ff5c5c; }

.form-group input.is-invalid:focus,
.form-group textarea.is-invalid:focus {
  border-color: #ff5c5c;
  box-shadow: 0 0 0 3px rgba(255, 92, 92, .2);
}

.phone-input { display: flex; gap: 8px; }
.phone-input .phone-prefix { width: 72px; flex: 0 0 72px; text-align: center; padding-inline: 6px; }
.phone-input input:not(.phone-prefix) { flex: 1; min-width: 0; }

.consent-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 20px;
}

.consent-row input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  margin-top: 2px;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border: 2px solid rgba(255, 255, 255, .3);
  border-radius: 5px;
  background: var(--bg-input);
  cursor: pointer;
  position: relative;
  transition: background-color .2s ease, border-color .2s ease;
}

.consent-row input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); }

.consent-row input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid var(--text-primary);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.consent-row input[type="checkbox"].is-invalid { border-color: #ff5c5c; }

.consent-row label { font-size: .87rem; line-height: 1.5; color: var(--text-secondary); cursor: pointer; }
.consent-row a { color: var(--accent); text-decoration: underline; }

.btn-submit {
  width: 100%;
  padding: 16px 30px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--text-primary);
  font-family: 'Kanit', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color .2s ease;
}

.btn-submit:hover { background: var(--accent-2); }
.btn-submit:disabled { opacity: .6; cursor: default; }

.form-success {
  margin-top: 14px;
  font-size: .88rem;
  font-weight: 600;
  color: #3ddc84; /* success = green; errors below stay red */
  display: none;
}

.form-success.is-visible { display: block; }
.form-success.is-error { color: #ff5c5c; }

/* ---------------- Mobile ---------------- */

@media (max-width: 880px) {
  /* The circular nav logo already spells out the name right above this —
     redundant this close together on a small screen. */
  .hero-media .hero-wordmark {
    display: none;
  }

  .page-flag-clip {
    height: 420px;
  }

  /* A separate, tall-aspect image — stretching the wide desktop banner to this
     shape distorted the round stars into spikes. This one's drawn for it natively.
     Full width here (not a corner accent) — it hangs straight down like a flag,
     so it actually reads on a narrow screen instead of fading into a sliver.
     Oversized (130% wide, pivoted at its own top-left corner) and tilted a few
     degrees so it still fully covers the clip box once rotated — a plain 100%-wide
     box would leave a triangular gap at the top-right corner once tilted. */
  .page-flag-bg {
    width: 150%;
    max-width: none;
    left: -25%;
    height: 700px;
    opacity: .85;
    overflow: hidden;
    transform: rotate(-15deg);
    transform-origin: top left;
    /* Fades fully to transparent well before .page-flag-clip's bottom edge (420px),
       so the clip never cuts it off mid-fade — no hard edge at the bottom. */
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 21%, transparent 54%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 21%, transparent 54%);
  }

  /* This box is tall relative to its width, so object-fit:cover always shows the video's full
     height already — only x shifts the crop. Panning right of the default (0%, pure canton)
     brings the stripes into view too, so the split between canton and stripes shows at once. */
  .page-flag-video {
    object-position: 38% 50%;
  }

  .nav { gap: 12px; padding: 8px 12px; }
  .nav-burger { display: flex; }
  /* Taken out of the flex row so it can grow past the bar's own height without
     stretching it — burger and phone icon still set how tall the bar is. */
  .nav-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
  }
  .nav-logo-badge { width: 86px; height: 86px; }
  .nav-links, .nav-socials { display: none; }
  /* Swapped: call on the left, burger on the right. */
  .nav-call { display: flex; order: -1; margin-left: 0; }
  .nav-burger { margin-left: auto; }
  .mobile-fab-group { display: flex; }
  .scroll-fade { display: block; }
  .nav-backdrop { display: block; }
  body { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }

  .hero-media { height: 80.7vh; min-height: 590px; max-height: 807px; }
  .hero-text-top { top: 9%; }
  .hero-text-bottom { bottom: calc(8% + 40px); }
  /* Two sentences stacked: the question stays big, the answer sits under it, smaller. */
  .hero-subheading { font-size: min(1.05rem, 4.3vw); } /* keeps the question on one row on narrower phones */
  .hero-sub-line { display: block; text-wrap: balance; }
  .hero-sub-line--second {
    margin-top: 8px;
    font-size: .8em;
    line-height: 1.35;
    font-weight: 400;
    text-wrap: balance;
  }
  /* The brand name is the only bold part of the second sentence, with a small red underglow. */
  .hero-sub-line--second strong {
    font-weight: 700;
    text-shadow: 0 2px 6px rgba(229, 9, 20, .9), 0 4px 14px rgba(229, 9, 20, .5);
  }
  /* Shown at full width, never cropped sideways, so all three cars are whole and the group
     is centred in the card on any phone width (a cover-crop cut the Challenger/Camaro).
     Positioned by the cars' own midline (~58% down the photo) landing 39% down the card;
     the photo's soft top/bottom edges dissolve into the dark card. */
  /* The sky at the top of the photo is near-white; where it meets the card's anti-aliased
     rounded corners it leaked through as a thin light outline. The wrapper (same box as the
     card) fades the photo out at the very top so the corners only ever meet the dark card. */
  .hero-media picture {
    position: absolute;
    inset: 0;
    display: block;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 1%, #000 10%);
    mask-image: linear-gradient(to bottom, transparent 0%, transparent 1%, #000 10%);
  }
  .hero-media img {
    position: absolute;
    left: 0;
    top: 39%;
    width: 100%;
    height: auto;
    transform: translateY(-57.9%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 86%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 86%, transparent 100%);
  }
  /* Small print sits lower, further into the dark area under the buttons. */
  .hero-fineprint { position: relative; top: 32px; }

  .car-grid { grid-template-columns: 1fr; gap: 16px; }
  /* Same idea as the desktop cards: the whole car sits in the upper part of the photo and the
     name/buttons sit below it on the dark ground, instead of lying on top of the car. The card
     keeps a fixed ratio so the photo scales with it and the car stays in place on any width. */
  .car-card {
    aspect-ratio: 358 / 350;
    align-items: flex-end;
    padding: 0 0 16px;
  }
  .car-card-body { padding: 0 20px; }
  .car-card-name { text-align: left; font-size: clamp(1.05rem, 4vw, 1.3rem); }

  /* No hover on touch: the info/price actions are always shown, not revealed */
  .car-card-desc { display: none; }
  .car-card-more { grid-template-rows: 1fr; opacity: 1; pointer-events: auto; }
  .car-card-more-inner { padding-top: 10px; }
  .car-card-actions { justify-content: flex-start; }

  /* The photos fit by width, so only the vertical position is free — set so each car is whole
     and centred at ~42% of the card height, clear of the name/buttons underneath. */
  .car-card--challenger .car-card-photo { background-position: 50% 72%; }
  .car-card--mustang    .car-card-photo { background-position: 50% 87%; }
  .car-card--camaro     .car-card-photo { background-position: 50% 91%; }

  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-tagline { max-width: none; }

  .car-stats { padding: 18px 4px; }
  .car-stat { padding: 0 4px; }

  .car-review { padding: 24px clamp(40px, 12vw, 52px); }
  .car-review-arrow { width: 32px; height: 32px; font-size: 1.2rem; }
  .car-review-prev { left: 2px; }
  .car-review-next { right: 2px; }

  /* Same elements as desktop, just re-sequenced: review moves down to sit between the specs and
     the gallery instead of right after the stats. */
  #carDetail {
    grid-template-columns: 1fr;
    grid-template-areas:
      "stats"
      "specs"
      "review"
      "gallery"
      "desc";
  }

  .car-detail-cta { flex-direction: column; }
  .car-cta-btn { text-align: center; }

  .lightbox { padding: 20px; }
  .lightbox-nav { width: 42px; height: 42px; font-size: 1.6rem; }
  .lightbox-prev { left: 6px; }
  .lightbox-next { right: 6px; }
  .lightbox-close { top: 10px; right: 10px; width: 40px; height: 40px; font-size: 1.5rem; }

  .contact-card { grid-template-columns: 1fr; gap: 36px; }

  .price-table th, .price-table td { padding: 9px 5px; font-size: .85rem; }
  .price-table th { font-size: .64rem; letter-spacing: .5px; }
  /* A touch wider than on desktop — "1 000 km"/"Odpolední zážitek" need the room so their row
     doesn't grow taller than the shorter rows in the other two tables and throw the bars out of sync. */
  .price-table th:first-child, .price-table td:first-child,
  .price-table th:last-child, .price-table td:last-child { width: 26%; }
  .price-table--bars th:first-child, .price-table--bars td:first-child { padding-left: 12px; }
  .price-table--bars th:last-child, .price-table--bars td:last-child { padding-right: 12px; }
  .car-pick { padding-top: 20px; }
  .car-dial { margin-bottom: 14px; }
  .car-dial-btn small { font-size: .52rem; letter-spacing: 1.6px; }
  .car-dial-btn em { font-size: .62rem; letter-spacing: 1.4px; }
  .car-banner { aspect-ratio: 2 / 1; border-radius: 20px; }
  .price-panel-cta { flex-direction: column; }
  .price-panel-cta .car-cta-btn { text-align: center; }
}

/* ---------------- Resting halo: a subtler always-on version, so it shows on touch/mobile too ---------------- */

.car-cta-btn,
.btn-submit,
.car-stats,
.car-review,
.car-panel,
.car-gallery-card {
  box-shadow: var(--rest-halo);
  transition: background-color .2s, transform .25s ease, box-shadow .25s ease;
}

/* ---------------- Hover halo: a red glow pops behind a button on hover ---------------- */

@media (hover: hover) and (pointer: fine) {
  .nav-links a,
  .lightbox-nav,
  .lightbox-close,
  .footer-socials a {
    transition: background-color .2s, color .2s, border-color .2s, transform .2s ease, box-shadow .25s ease;
  }

  .nav-links a:hover,
  .lightbox-close:hover,
  .footer-socials a:hover,
  .btn-submit:hover {
    box-shadow: var(--hover-halo);
    transform: scale(1.12);
  }

  .car-cta-btn:hover {
    box-shadow: var(--hover-halo);
    transform: translateY(-2px) scale(1.12);
  }

  .lightbox-nav:hover {
    box-shadow: var(--hover-halo);
    transform: translateY(-50%) scale(1.12);
  }

  /* Bigger containers: lift only, no scale, so they never grow into a neighboring grid column */
  .car-stats:hover,
  .car-review:hover,
  .car-panel:hover,
  .car-gallery-card:hover {
    box-shadow: var(--hover-halo);
    transform: translateY(-6px);
  }
}

/* ---------------- Pop on scroll: touch devices have no hover, so the same "pop" is
   triggered automatically by JS (see script.js) as each element scrolls into view ---------------- */

@media (hover: none) {
  .btn-submit.pop-active {
    box-shadow: var(--hover-halo);
    transform: scale(1.06);
  }

  .car-cta-btn.pop-active {
    box-shadow: var(--hover-halo);
    transform: translateY(-2px) scale(1.06);
  }

  /* Bigger containers scale less: they stack full-width with only 16-20px between
     them on mobile, so a small bump avoids overlapping the card above/below. */
  .car-stats.pop-active,
  .car-review.pop-active,
  .car-panel.pop-active,
  .car-gallery-card.pop-active {
    box-shadow: var(--hover-halo);
    transform: translateY(-4px) scale(1.03);
  }

  /* Homepage hero/teaser cards sit inside an overflow:hidden frame, so an escaping
     halo shadow would just get clipped — mirror their own desktop :hover look instead. */
  .hero-btn.pop-active { transform: translateY(-2px); }
  .hero-btn--primary.pop-active { background: var(--accent-2); }
  .hero-btn--ghost.pop-active { background: #f2f2f2; }

  .car-card.pop-active { transform: translateY(-4px); }
  .car-card.pop-active .car-card-photo { transform: scale(1.15); }
}