/* style.css — Resonica component styles */

/* ============================
   SKIP LINK
   ============================ */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  z-index: 1000;
  font-size: var(--text-sm);
}
.skip-link:focus {
  top: var(--space-4);
}

/* ============================
   HEADER
   ============================ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: var(--space-3) var(--space-6);
  background: rgba(250, 248, 243, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--color-divider);
  transition: background 0.3s ease, border-color 0.3s ease;
}
[data-theme="dark"] .site-header {
  background: rgba(26, 26, 24, 0.85);
}
.header-inner {
  max-width: var(--content-wide);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--color-text);
}
.logo-text {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.nav-desktop {
  display: none;
}
.nav-desktop a {
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 500;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  transition: color var(--transition-interactive), background var(--transition-interactive);
}
.nav-desktop a:hover,
.nav-desktop a.active {
  color: var(--color-primary);
}
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.lang-toggle, .theme-toggle, .admin-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
  transition: color var(--transition-interactive), background var(--transition-interactive);
  text-decoration: none;
}
.lang-toggle {
  font-size: var(--text-xs);
  font-weight: 700;
  font-family: var(--font-body);
  width: auto;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.lang-toggle:hover, .theme-toggle:hover, .admin-toggle:hover {
  color: var(--color-primary);
  background: var(--color-primary-highlight);
}
.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 2.25rem;
  height: 2.25rem;
  gap: 5px;
  color: var(--color-text);
}
.hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* Mobile menu */
.mobile-menu {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-bg);
  z-index: 99;
  padding-top: 5rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
}
.mobile-menu.open {
  display: flex;
}
.mobile-menu a {
  color: var(--color-text);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  transition: color var(--transition-interactive);
}
.mobile-menu a:hover {
  color: var(--color-primary);
}

@media (min-width: 768px) {
  .nav-desktop {
    display: flex;
    align-items: center;
    gap: var(--space-1);
  }
  .hamburger {
    display: none;
  }
}

/* ============================
   HERO
   ============================ */
.hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background: url('./assets/hero-bg.webp') center/cover no-repeat;
  z-index: 0;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(250, 248, 243, 0.7) 0%,
    rgba(250, 248, 243, 0.85) 50%,
    rgba(250, 248, 243, 0.95) 100%
  );
  z-index: 1;
}
[data-theme="dark"] .hero-overlay {
  background: linear-gradient(
    180deg,
    rgba(26, 26, 24, 0.6) 0%,
    rgba(26, 26, 24, 0.8) 50%,
    rgba(26, 26, 24, 0.92) 100%
  );
}

/* ============================================================
   Dekorativní pivoňka v levém dolním rohu hero sekce.

   Architektura DOM:
     .hero-peony-wrap (absolutně pozicovaný kontejner)
       |- ::before (krémová silueta = CSS maska s background-color)
       \- .hero-peony  (vlastní obrázek pivoňky)

   Proč wrapper místo přímého <img>?
     Skrz alpha pixely pivoňky (mezery mezi okvětními lístky)
     prosvítaly vlnité dekorace z hero-bg. Řešení: pod obrázek
     položíme jeho vlastní siluetu vyplněnou krémovou barvou
     (CSS mask + background-color), která lokálně překryje pozadí.
     Vlny v okolí pivoňky zůstanou nedotčené.

   Viditelnost: opacity snížena o 50 % oproti předchozí verzi
     light: 0.4 -> 0.2,  dark: 0.25 -> 0.125,
     tablet: 0.3 -> 0.15, mobil: 0.22 -> 0.11.
   Velikost zachována: 1050 desktop / 800 tablet / 550 mobil.
   ============================================================ */
.hero-peony-wrap {
  position: absolute;
  /* Levo dolů - lehce přesahuje přes okraj pro organičtější dojem. */
  left: -150px;
  bottom: -100px;
  /* Desktop: 1050 px na šířku.
     Výška vychází z poměru stran obrázku (1142:1080) - musí být explicitní,
     protože wrapper hostuje absolutně pozicované děti. */
  width: 1050px;
  height: 993px;
  /* Nad pozadím, pod obsahem (text + tlačítko mají z-index 2). */
  z-index: 1;
  /* POZN: opacity NE na wrapperu! Pokud bychom ji dali sem, snížila by
     i průhlednost ::before siluety a vlny by opět prosvítaly.
     Wrapper je plně neprůhledný, opacity řešíme na samotném img níže. */
  /* Dekorace nereaguje na klik ani výběr textu. */
  pointer-events: none;
  user-select: none;
}

/* Silueta pivoňky vyplněná krémovou barvou - skryje vlny pod alpha pixely.

   Technika: CSS mask s URL obrázku pivoňky. Prohlížeč použije alpha kanál
   obrázku jako masku na background-color elementu. Výsledek:
     - kde je pivoňka neprůhledná, vidíme krémovou výplň,
     - kde je průhledná, vidíme co je pod (overlay/hero-bg).
   Krémová barva odpovídá top-stopu hero-overlay (rgba(250,248,243,...)),
   takže silueta opticky splyne s prostředím. */
.hero-peony-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgb(250, 248, 243);
  -webkit-mask: url('./assets/peony.webp') center/contain no-repeat;
          mask: url('./assets/peony.webp') center/contain no-repeat;
}

/* Vlastní obrázek pivoňky - leží nad krémovou siluetou.
   Opacity je aplikovaná zde (NE na wrapperu) - jinak by se zprůhlednila
   i silueta a vlny by prosvítaly. Při opacity 0.2 a sat 0.35 vzniká
   směs ~80 % cream + 20 % tlumené růžové = decentní náznak pivoňky. */
.hero-peony {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Stejný režim contain/center jako maska -> silueta a obrázek se kryjí. */
  object-fit: contain;
  object-position: center;
  /* Viditelnost obrázku - 50 % původní (0.4 -> 0.2). */
  opacity: 0.2;
  /* Ztlumení syté růžové na decentní odstín. */
  filter: saturate(0.35);
  transition: opacity var(--transition-interactive);
}

/* Tmavý mód - krémovou siluetu nahradíme tmavou (overlap s dark overlay),
   opacity na samotném img ještě nižší, aby pivoňka ve tmě nevýrazněla. */
[data-theme="dark"] .hero-peony-wrap::before {
  background-color: rgb(26, 26, 24);
}
[data-theme="dark"] .hero-peony {
  opacity: 0.125;
  filter: saturate(0.35) brightness(0.85);
}

/* Tablet: 800 px width, výška 800 * (1080/1142) ~ 757 px. */
@media (max-width: 1024px) {
  .hero-peony-wrap {
    width: 800px;
    height: 757px;
    left: -180px;
    bottom: -120px;
  }
  .hero-peony {
    opacity: 0.15;
  }
}

/* Mobil: 550 px width, výška 550 * (1080/1142) ~ 520 px.
   Na malých displayích pivoňka pokrývá větší část obrazovky,
   proto držíme nejnižší opacity. */
@media (max-width: 640px) {
  .hero-peony-wrap {
    width: 550px;
    height: 520px;
    left: -150px;
    bottom: -100px;
  }
  .hero-peony {
    opacity: 0.11;
  }
}

.hero-content {
  position: relative;
  z-index: 2;
  padding: var(--space-8) var(--space-6);
  max-width: 800px;
}
.hero-title {
  font-size: var(--text-hero);
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-2);
}
.hero-subtitle {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  color: var(--color-secondary);
  margin-bottom: var(--space-6);
  letter-spacing: 0.05em;
}
.hero-tagline {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  margin-bottom: var(--space-10);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-primary);
  color: #fff;
  padding: var(--space-3) var(--space-8);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  transition: background var(--transition-interactive),
              transform var(--transition-interactive),
              box-shadow var(--transition-interactive);
}
.btn-primary:hover {
  background: var(--color-primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.btn-primary:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}
.scroll-indicator {
  position: absolute;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  animation: float 2s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(8px); }
}

/* ============================
   SECTIONS
   ============================ */
.section {
  padding: clamp(var(--space-12), 8vw, var(--space-32)) var(--space-6);
}
.section-alt {
  background: var(--color-surface);
}
.section-inner {
  max-width: var(--content-wide);
  margin: 0 auto;
}
.section-title {
  font-size: var(--text-2xl);
  font-weight: 600;
  margin-bottom: var(--space-3);
  color: var(--color-text);
}
.section-title-accent {
  display: block;
  width: 3rem;
  height: 3px;
  background: var(--color-secondary);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-8);
}

/* Scroll animations */
.fade-in { opacity: 1; }
@supports (animation-timeline: scroll()) {
  .fade-in {
    opacity: 0;
    animation: reveal-fade linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 100%;
  }
}
@keyframes reveal-fade { to { opacity: 1; } }

/* ============================
   ABOUT
   ============================ */
.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  align-items: center;
}
.about-image {
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 4/3;
}
.about-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.about-intro {
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: 1.7;
}
.about-subtitle {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
}
.about-philosophy {
  color: var(--color-text-muted);
  line-height: 1.7;
}
.cert-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.cert-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  color: var(--color-text);
  font-size: var(--text-sm);
}
.cert-list li svg {
  flex-shrink: 0;
  color: var(--color-primary);
  margin-top: 2px;
}

@media (min-width: 768px) {
  .about-grid {
    grid-template-columns: 5fr 7fr;
  }
}

/* ============================
   SERVICES
   ============================ */
.services-section {
  position: relative;
}
.services-bg {
  position: absolute;
  inset: 0;
  background: url('./assets/services-bg.webp') center/cover no-repeat;
  opacity: 0.04;
  z-index: 0;
}
[data-theme="dark"] .services-bg {
  opacity: 0.06;
}
.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  position: relative;
  z-index: 1;
}
.service-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  /* Celá karta je klikatelná (role="button" + onclick) — cursor pointer
     dává uživateli jasnou afordanci, že karta funguje jako tlačítko. */
  cursor: pointer;
  /* Základní transition pro hover/expand přechody. transform přidáný, aby
     fungoval jemný lift efekt na hover (translateY). */
  transition: box-shadow var(--transition-interactive),
              border-color var(--transition-interactive),
              transform var(--transition-interactive);
}
.service-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary-highlight);
  /* Lehký lift na hover — uživatel ihned vidí, že se s kartou dá interagovat. */
  transform: translateY(-2px);
}
/* Klavesový focus (Tab navigace): viditelný outline pro a11y. Používáme
   :focus-visible, aby outline NEvznikal při kliku myší (jen při Tab). */
.service-card:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}
/* Po rozbalení: zvýrazněný border + jemný shadow, aby uživatel snadno
   poznal, která karta je aktivné „otevřená". */
.service-card.is-expanded {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}
.service-icon {
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-highlight);
  border-radius: var(--radius-lg);
  color: var(--color-primary);
}
.service-card h3 {
  font-size: var(--text-lg);
  font-weight: 600;
}
.service-card p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.6;
}
.service-detail {
  display: none;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.7;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-divider);
}
.service-detail.open {
  display: block;
}
.service-toggle {
  color: var(--color-primary);
  font-size: var(--text-sm);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  /* margin-top:auto je nyní na .service-card-footer (patika), aby celá patika
     držela u spodního okraje karty. Z toggle tlačítka byl proto odstraněn. */
}
.service-toggle:hover {
  color: var(--color-primary-hover);
}

/* ---------------------------------------------------------------
   Patička karty služby — .service-card-footer
   ---------------------------------------------------------------
   Obsahuje dva prvky:
     - vlevo: toggle tlačítko „Více informací" / „Méně"
     - vpravo: CTA tlačítko „Rezervovat službu" (viditelné jen po
               rozbalení karty — viz pravidlo níže)
   margin-top:auto zajišťuje, že patička vždy leží u dolního okraje
   karty (rodič je flex-column).
   --------------------------------------------------------------- */
.service-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: auto;
  flex-wrap: wrap; /* na velmi úzkých karetách zalomení na 2 řádky */
}

/* CTA tlačítko v patičce — výchozí stav SKRYTO.
   Zviditelní se až když celá karta získá třídu .is-expanded
   (přidá ji JS funkce toggleService po kliku na kartu). */
.service-card-footer .service-book-cta {
  display: none;
}
.service-card.is-expanded .service-card-footer .service-book-cta {
  display: inline-flex;
}
/* Patička v zabaleném stavu nemá nic uvnitř (CTA je skryté, toggle button
   již neexistuje) — schováme ji úplně, aby nevytářela prázdnou mezeru.
   V rozbaleném stavu se zase obnoví. */
.service-card:not(.is-expanded) .service-card-footer {
  display: none;
}

@media (min-width: 768px) {
  .services-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ============================
   PRICING
   ============================ */
.pricing-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
.pricing-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  gap: var(--space-4);
  flex-wrap: wrap;
}
.pricing-card.featured {
  border-color: var(--color-secondary);
  background: linear-gradient(135deg, var(--color-surface) 0%, rgba(197, 165, 90, 0.08) 100%);
}
.pricing-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.pricing-name {
  font-weight: 600;
  font-size: var(--text-base);
}
.pricing-duration {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.pricing-right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.pricing-amount {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-primary);
  white-space: nowrap;
}
.pricing-badge {
  background: var(--color-secondary);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 700;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  white-space: nowrap;
}
.pricing-free {
  color: var(--color-primary);
  text-decoration: line-through;
  opacity: 0.4;
  font-size: var(--text-base);
}
.pricing-badge-free {
  background: var(--color-primary);
}
.pricing-note {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin-top: var(--space-6);
  font-style: italic;
}

/* Payment reveal animation */
.payment-hidden {
  display: none;
}
#payment.payment-visible {
  display: block;
  animation: slideReveal 0.6s ease-out;
}
@keyframes slideReveal {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Cancellation policy in payment */
.cancellation-policy {
  margin-top: var(--space-8);
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}
.cancellation-policy h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: var(--space-4);
}
@media (min-width: 768px) {
  .pricing-cards {
    grid-template-columns: 1fr 1fr;
  }
}

/* ============================
   BOOKING / CALENDAR
   ============================ */
.calendar-container {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
}
.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-6);
}
.calendar-header h3 {
  font-family: var(--font-display);
  /* Zvětšený název měsíce - lepší hierarchie navigačních prvků */
  font-size: var(--text-xl);
  font-weight: 600;
  /* Letter-spacing pro výraznější display vzhled */
  letter-spacing: 0.01em;
  /* Mín-width zabrání skokům šířky při přepínání mezi měsíci */
  min-width: 200px;
  text-align: center;
}
/* Navigační šipky kalendáře (klient).
   Zvětšené a výraznější - aby uživatel jasně viděl, že může měnít měsíc.
   Subtilní pozadí v klidu dává tlačítku tvar i bez hoveru,
   hover ho zvýrazní olivovou + lehkým scále efektem. */
.cal-nav {
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  /* Tlumené pozadí - tlačítko je vidět i bez hoveru */
  background: var(--color-surface-2);
  color: var(--color-text);
  /* Subtilní border pro lepší čitelnost na světlém pozadí */
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: color var(--transition-interactive),
              background var(--transition-interactive),
              border-color var(--transition-interactive),
              transform var(--transition-interactive);
}
.cal-nav:hover {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
  transform: translateY(-1px);
}
.cal-nav:active {
  transform: translateY(0);
}
/* Zvětšené ikony šipek - z 18px na 22px pro výraznější vzhled */
.cal-nav svg,
.cal-nav i {
  width: 22px !important;
  height: 22px !important;
}
.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  margin-bottom: var(--space-2);
}
.calendar-weekdays span {
  /* F1: hlavičky dnů týdne (Po/Út/…) zvětšeny z text-xs na text-sm pro lepší
     čitelnánost. Tučnost a barvy zůstávají kvůli vizuální hierarchii. */
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  padding: var(--space-2) 0;
}
.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.cal-day {
  /* Poměr stran 2:1 (šířka : výška) — buňky kalendáře jsou
     horizontální obdélníky, ne čtverečky. Vizuálně kompaktnější
     a méně prostorově dominantní nad časovou osou pod ním. */
  aspect-ratio: 2 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  /* F1: čísla dnů v kalendáři zvětšena z text-sm na text-base pro lepší
     čitelnost. Při poměru 2:1 zůstává číslo centrováno a vejde se. */
  font-size: var(--text-base);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  transition: all var(--transition-interactive);
  font-weight: 500;
}
.cal-day.available {
  color: var(--color-text);
  cursor: pointer;
}
.cal-day.available:hover {
  background: var(--color-primary-highlight);
  color: var(--color-primary);
}
.cal-day.selected {
  background: var(--color-primary);
  color: #fff;
}
.cal-day.today {
  box-shadow: inset 0 0 0 2px var(--color-secondary);
}
.cal-day.past, .cal-day.weekend {
  color: var(--color-text-faint);
}
.cal-day.empty {
  visibility: hidden;
}

.time-slots {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.time-slot {
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
  transition: all var(--transition-interactive);
}
.time-slot:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-primary-highlight);
}
.time-slot.selected {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.time-slot-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  margin-top: var(--space-4);
  margin-bottom: var(--space-2);
}
.no-slots {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-style: italic;
  margin-top: var(--space-4);
}

/* ============================================================
   GRAFICKÁ ČASOVÁ OSA REZERVACÍ — veřejný klient UX
   ------------------------------------------------------------
   Horizontální picker, který nahrazuje mřížku tlačítek konkrétních
   časů. Vykresluje pracovní dobu, obsazenost (rezervace + bloky)
   a umí klientovi naznabit, kam padá jeho výběr.

   Vrstvění (z-index zdola nahoru):
     0  .timeline-track       — pozadí (volno)
     1  .timeline-busy         — obsazené bloky (šedá/šervená šrafa)
     2  .timeline-past         — minulost dnes (zašedlý pruh)
     3  .timeline-now          — svislá lišta "teď" (jen pro dnešek)
     4  .timeline-hover        — náhled výběru při hover
     2  .timeline-buffer       — pauza po cizí proceduce (šrafa za busy)
     5  .timeline-selected     — zvolený termín (na vrchu)
     6  .timeline-buffer--selected — pauza po mé proceduce (nad selected)
   ============================================================ */

/* Vnější wrapper, nechává prostor pod kalendářem. */
.timeline-wrap {
  margin-top: var(--space-4);
}

/* Hlavička osy: nadpis + meta info (krok, délka). */
.timeline-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.timeline-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}
.timeline-meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* Hlavní „plocha“ osy — vodorovný pruh, který zabírá 100 % šířky
   rodiče. Všechny vnitřní bloky jsou absolutně pozicované v %
   (procenta z 0–100 % = začátek–konec pracovní doby). */
.timeline-track {
  position: relative;
  width: 100%;
  height: 56px;
  background: var(--color-primary-highlight);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  /* Základní proužky pro vizuální rytmus — světlé linky po 30 min.
     Konkrétní pozice tiktů kreslí JS, tohle je jen jemný grid. */
  /* Sjednocený kurzor: pointer (ruka) všude na timeline — ať už na volném
     prostoru (= klik vybere čas) nebo na nedostupných oblastech busy/buffer
     (= klik spustí shake animaci jako feedback). Vizuální konzistence. */
  cursor: pointer;
  user-select: none;
  touch-action: pan-y; /* mobil: vertikální scroll stránky funguje */
}
[data-theme="dark"] .timeline-track {
  background: rgba(143, 168, 125, 0.08);
}
.timeline-track.is-disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

/* Tikty popisků času pod osou (08:00, 09:00…). */
.timeline-labels {
  position: relative;
  width: 100%;
  /* F1: zvětšeno z 18px na 22px aby se vešel větší text. */
  height: 22px;
  margin-top: 2px;
  /* F1: hodinové popisky pod časovou osou zvětšeny z text-xs na text-sm. */
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.timeline-label {
  position: absolute;
  transform: translateX(-50%);
  white-space: nowrap;
}
.timeline-label--edge { /* první / poslední se nesnaží centrovat za hranu */
  transform: none;
}
.timeline-label--edge.is-end {
  right: 0;
}

/* Svislé tikté ryžky uvnitř tracku (jemné děličky po 30/60 min). */
.timeline-tick {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--color-border);
  opacity: 0.5;
  pointer-events: none;
}
.timeline-tick--hour {
  opacity: 0.85;
}

/* Obsazený blok — typ 'booking' (cizi rezervace, neutrální šedá šrafa).
   Bez detailů — klient nesmí vědět, kdo je v té době objednaný. */
.timeline-busy {
  position: absolute;
  top: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    135deg,
    var(--color-surface-2),
    var(--color-surface-2) 6px,
    var(--color-surface) 6px,
    var(--color-surface) 12px
  );
  border-left: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  pointer-events: none;
  z-index: 1;
}
[data-theme="dark"] .timeline-busy {
  background: repeating-linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.06),
    rgba(255, 255, 255, 0.06) 6px,
    rgba(255, 255, 255, 0.02) 6px,
    rgba(255, 255, 255, 0.02) 12px
  );
}

/* Obsazený blok — typ 'blocked' (administrátorský blok, např. oběd).
   Používá stejný červený vzor jako admin gantt — vizuální konzistence. */
.timeline-busy--blocked {
  background: repeating-linear-gradient(
    135deg,
    rgba(161, 53, 68, 0.18),
    rgba(161, 53, 68, 0.18) 6px,
    rgba(161, 53, 68, 0.05) 6px,
    rgba(161, 53, 68, 0.05) 12px
  );
  border-left-color: rgba(161, 53, 68, 0.3);
  border-right-color: rgba(161, 53, 68, 0.3);
  pointer-events: auto; /* tooltip s důvodem chceme ukázat */
  /* Sjednocený kurzor pro všechny nedostupné oblasti timeline (busy/blocked/buffer):
     pointer (ruka) — vizuální konzistence s ostatními interaktivními prvky.
     Klik spouští shake animaci jako feedback „sem nelze". */
  cursor: pointer;
}
[data-theme="dark"] .timeline-busy--blocked {
  background: repeating-linear-gradient(
    135deg,
    rgba(221, 105, 116, 0.18),
    rgba(221, 105, 116, 0.18) 6px,
    rgba(221, 105, 116, 0.05) 6px,
    rgba(221, 105, 116, 0.05) 12px
  );
}

/* ========== Buffer (pauza po proceduce) ==========
   Tenký šrafovaný ocásek za rezervací — vizualizuje úklid / větrání.
   Klient ho vidí jako důvod, proč je daný úsek nedostupný. Klikatelný kvůli
   shake animaci feedback („sem nelze"). z-index 2 = nad .timeline-busy a vedle
   .timeline-past. Šrafa je jemnější (5px pruhy) než hlavní busy, aby bylo
   na první pohled vidět, že jde o navazující pomocný pruh. */
.timeline-buffer {
  position: absolute;
  top: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    135deg,
    rgba(120, 120, 120, 0.20),
    rgba(120, 120, 120, 0.20) 5px,
    rgba(120, 120, 120, 0.06) 5px,
    rgba(120, 120, 120, 0.06) 10px
  );
  border-right: 1px solid rgba(120, 120, 120, 0.25);
  pointer-events: auto;  /* aby klik zafungoval pro shake feedback */
  /* Sjednocený kurzor s ostatními nedostupnými oblastmi (busy/blocked):
     pointer (ruka) — konzistence napríč timeline. */
  cursor: pointer;
  z-index: 2;
}
[data-theme="dark"] .timeline-buffer {
  background: repeating-linear-gradient(
    135deg,
    rgba(200, 200, 200, 0.16),
    rgba(200, 200, 200, 0.16) 5px,
    rgba(200, 200, 200, 0.05) 5px,
    rgba(200, 200, 200, 0.05) 10px
  );
  border-right-color: rgba(200, 200, 200, 0.22);
}

/* Buffer za vlastním výběrem klienta — zelenkavá varianta, sladí se s
   .timeline-selected (zelený blok). Klient vidí: "moje procedura + má
   pauza". z-index 6 = nad timeline-selected (5), aby šrafa byla viditelná. */
.timeline-buffer--selected {
  background: repeating-linear-gradient(
    135deg,
    rgba(143, 168, 125, 0.45),
    rgba(143, 168, 125, 0.45) 5px,
    rgba(143, 168, 125, 0.15) 5px,
    rgba(143, 168, 125, 0.15) 10px
  );
  border-right: 1px solid rgba(143, 168, 125, 0.5);
  pointer-events: none;  /* vlastní buffer není klikatelný */
  cursor: default;
  z-index: 6;
}
[data-theme="dark"] .timeline-buffer--selected {
  background: repeating-linear-gradient(
    135deg,
    rgba(143, 168, 125, 0.38),
    rgba(143, 168, 125, 0.38) 5px,
    rgba(143, 168, 125, 0.12) 5px,
    rgba(143, 168, 125, 0.12) 10px
  );
}

/* ========== Mini toast pro timeline (krátká vizuální zpráva) ==========
   Použito po kliknutí na buffer šrafu — "Pauza". Fixní pozice dole uprostřed,
   fade-in/out 180 ms. Auto-hide po 1.8 s (řízeno z JS). Není to plnohodnotný
   toast systém — slouží jen této jedné interakci. */
.tl-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 18px;
  background: var(--color-text);
  color: var(--color-surface);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease-out;
}
.tl-toast.is-visible {
  opacity: 1;
}

/* Minulost „dnes“ — zašedlý pruh od začátku osy po now_minutes. */
.timeline-past {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  background: var(--color-surface-2);
  opacity: 0.55;
  pointer-events: none;
  z-index: 2;
}
[data-theme="dark"] .timeline-past {
  background: rgba(0, 0, 0, 0.35);
}

/* Svislá čára „teď“ pro dnešek. */
.timeline-now {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  background: var(--color-primary);
  pointer-events: none;
  z-index: 3;
  box-shadow: 0 0 0 2px var(--color-primary-highlight);
}

/* ========== Hover preview (obdélník celého rozsahu termínu) ==========
   Vykresluje se při pohybu myši/prstu nad osou jako poloprůhledný obdélník
   od kurzoru po +duration_minutes. Klient hned vidí, kam mu rezervace sáhne
   a jestli náhodou neproježdí do obsazeného úseku. Při kolizi se přebarví
   na červený (.is-invalid). */
.timeline-hover {
  position: absolute;
  top: -2px;
  bottom: -2px;
  background: rgba(143, 168, 125, 0.35);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-sm);
  pointer-events: none;
  z-index: 4;
  display: none;
  box-shadow: 0 0 0 1px rgba(143, 168, 125, 0.18);
  transition: background var(--transition-interactive),
              border-color var(--transition-interactive),
              box-shadow var(--transition-interactive);
}
[data-theme="dark"] .timeline-hover {
  background: rgba(143, 168, 125, 0.28);
}
.timeline-hover.is-invalid {
  background: rgba(196, 73, 90, 0.30);
  border-color: #c4495a;
  box-shadow: 0 0 0 1px rgba(196, 73, 90, 0.20);
}
[data-theme="dark"] .timeline-hover.is-invalid {
  background: rgba(221, 105, 116, 0.30);
}
.timeline-hover-tooltip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-text);
  color: var(--color-surface);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  pointer-events: none;
}
.timeline-hover.is-invalid .timeline-hover-tooltip {
  background: #c4495a;
  color: #fff;
}

/* ========== Hover buffer preview (šrafa za hover obdélníkem) ==========
   Sourozenec .timeline-hover — vykresluje se hned za hlavním hover markerem
   a má šíři tl.buffer_minutes (s ořezem na konec pracovní doby). Klient díky
   tomu vidí ještě před kliknutím, kolik místa jeho rezervace celkem zabere
   (procedura + jeho pauza po proceduře).

   Pozice: top/bottom kopíruje .timeline-hover (-2px/-2px), aby šrafa byla
   ve stejné vertikální rovině jako zelený obdélník. z-index 4 = stejně jako
   hover marker (jde jen o preview, nikoliv o nadřazený výběr). pointer-events:
   none — preview nesmí blokovat klik na track.

   Default: zelená šrafa (sladí s .timeline-hover) + .is-invalid přebarví na
   červenou (sladí s .timeline-hover.is-invalid).
*/
.timeline-hover-buffer {
  position: absolute;
  top: -2px;
  bottom: -2px;
  background: repeating-linear-gradient(
    135deg,
    rgba(143, 168, 125, 0.45),
    rgba(143, 168, 125, 0.45) 5px,
    rgba(143, 168, 125, 0.15) 5px,
    rgba(143, 168, 125, 0.15) 10px
  );
  border-right: 1px solid rgba(143, 168, 125, 0.5);
  pointer-events: none;
  z-index: 4;
  display: none;
  transition: background var(--transition-interactive),
              border-color var(--transition-interactive);
}
[data-theme="dark"] .timeline-hover-buffer {
  background: repeating-linear-gradient(
    135deg,
    rgba(143, 168, 125, 0.38),
    rgba(143, 168, 125, 0.38) 5px,
    rgba(143, 168, 125, 0.12) 5px,
    rgba(143, 168, 125, 0.12) 10px
  );
}
.timeline-hover-buffer.is-invalid {
  background: repeating-linear-gradient(
    135deg,
    rgba(196, 73, 90, 0.40),
    rgba(196, 73, 90, 0.40) 5px,
    rgba(196, 73, 90, 0.12) 5px,
    rgba(196, 73, 90, 0.12) 10px
  );
  border-right-color: rgba(196, 73, 90, 0.45);
}
[data-theme="dark"] .timeline-hover-buffer.is-invalid {
  background: repeating-linear-gradient(
    135deg,
    rgba(221, 105, 116, 0.38),
    rgba(221, 105, 116, 0.38) 5px,
    rgba(221, 105, 116, 0.12) 5px,
    rgba(221, 105, 116, 0.12) 10px
  );
  border-right-color: rgba(221, 105, 116, 0.45);
}

/* ========== Zvolený termín — zelený pruh délky služby ========== */
.timeline-selected {
  position: absolute;
  top: -2px;
  bottom: -2px;
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-sm);
  z-index: 5;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  /* Jemná nástupní animace, aby uživatel poznal, že se výběr aktualizoval. */
  animation: timelineSelectedIn 180ms ease-out;
}

/* Label uvnitř hover preview obdélníčku (.timeline-hover) — jen start čas HH:MM.
   Použitý jen pro VALIDNÍ (zelený) výběr; při kolizi se skryje (JS .style.display).
   Po kliknutí už label uvnitř .timeline-selected NENÍ — informace v dolmím statusu. */
.timeline-hover-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* TYPOGRAFIE: přesně stejná jako labely časové osy pod pruhem
     (.timeline-labels) — sjednocený vzhled HH:MM popisků.
     Tj. font-size text-sm (~14px), weight regular (400, děděný z body),
     barva muted, bez text-shadow. Font-family se dědí z body (Satoshi). */
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  /* Strukturní (neovlivňují vzhled textu samého): */
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}
@keyframes timelineSelectedIn {
  from { transform: scaleY(0.6); opacity: 0.6; }
  to   { transform: scaleY(1);   opacity: 1; }
}

/* ========== Interaktivní tratě — kurzor + shake animace pro neplatný klik ========== */
.timeline-track--interactive {
  cursor: pointer;
}
.timeline-track--interactive:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.timeline-track.is-shake {
  animation: timelineShake 320ms ease-in-out;
}
@keyframes timelineShake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-4px); }
  40%      { transform: translateX(4px); }
  60%      { transform: translateX(-3px); }
  80%      { transform: translateX(2px); }
}

/* ========== Preview řádek pod osou — "Vybraný termín: HH:MM – HH:MM" ========== */
.timeline-preview {
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--color-primary-highlight);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.timeline-preview strong {
  color: var(--color-primary);
  font-weight: 700;
}

/* Na mobilu zvětšíme trať pro lépe trefitelné klikaní prstem. */
@media (max-width: 640px) {
  .timeline-track {
    height: 72px;
  }
  .timeline-hover-tooltip {
    font-size: var(--text-sm);
    padding: 4px 10px;
  }
}

/* Tooltip nad osou (HH:MM – HH:MM, ev. důvod blokace). */
.timeline-tooltip {
  position: absolute;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  background: var(--color-text);
  color: var(--color-surface);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  white-space: nowrap;
  pointer-events: none;
  z-index: 10;
  display: none;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Stavová hláška pod osou (nepracovní den, svátek, minulost…). */
.timeline-status {
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-align: center;
}

/* Výběr pod osou + tlačítko zrušit. */
.timeline-selection-info {
  margin-top: var(--space-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-primary-highlight);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: var(--text-sm);
}
.timeline-selection-info strong {
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}
.timeline-clear-btn {
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  font-size: var(--text-xs);
  cursor: pointer;
  color: var(--color-text);
  transition: all var(--transition-interactive);
}
.timeline-clear-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* Legenda pod osou. */
.timeline-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.timeline-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.timeline-legend-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid var(--color-border);
}
.timeline-legend-swatch--free {
  background: var(--color-primary-highlight);
}
[data-theme="dark"] .timeline-legend-swatch--free {
  background: rgba(143, 168, 125, 0.18);
}
.timeline-legend-swatch--busy {
  background: repeating-linear-gradient(
    135deg,
    var(--color-surface-2),
    var(--color-surface-2) 4px,
    var(--color-surface) 4px,
    var(--color-surface) 8px
  );
}
.timeline-legend-swatch--blocked {
  background: repeating-linear-gradient(
    135deg,
    rgba(161, 53, 68, 0.18),
    rgba(161, 53, 68, 0.18) 4px,
    rgba(161, 53, 68, 0.05) 4px,
    rgba(161, 53, 68, 0.05) 8px
  );
}
.timeline-legend-swatch--selected {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

/* Mobile — menší výška osy a popisků, případně vyšší touch target. */
@media (max-width: 600px) {
  .timeline-track {
    height: 64px; /* větší touch target */
  }
  .timeline-legend {
    gap: var(--space-3);
    font-size: 11px;
  }
}

/* Booking form */
.booking-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.form-group label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}
.form-group input,
.form-group select,
.form-group textarea {
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  transition: border-color var(--transition-interactive), box-shadow var(--transition-interactive);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(107, 127, 94, 0.15);
}
.form-group textarea {
  resize: vertical;
  min-height: 80px;
}
/* ============================
   INLINE FORM VALIDATION
   ============================
   Hint pod inputem: defaultně skrytý, zviditelní se až přidáním třídy
   .is-invalid na rodičovský .form-group (nebo .wizard-consent u checkboxu).
   Border inputu se zároveň přebarví na chybovou červenou. */
.form-hint {
  display: none;                                  /* skrytý dokud není .is-invalid */
  font-size: var(--text-xs);                      /* drobný text pod inputem */
  color: var(--color-error);                      /* červená sjednocená s .form-message.error */
  margin-top: calc(var(--space-1) * -0.5);        /* mírně přitáhnout k inputu */
  line-height: 1.35;
}
/* Hint u checkbox consent musí mít vlastní spacing, protože je mimo .form-group. */
.form-hint--consent {
  display: none;
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--color-error);
  line-height: 1.35;
}
/* Zobrazení chyby: stačí přidat .is-invalid na .form-group / .wizard-consent. */
.form-group.is-invalid .form-hint,
.wizard-consent.is-invalid + .form-hint--consent {
  display: block;
}
/* Červený border + slabý glow okolo invalid inputu (přepisuje :focus styl). */
.form-group.is-invalid input,
.form-group.is-invalid textarea {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px rgba(161, 53, 68, 0.12);
}
/* Vizuální highlight i pro checkbox label při chybě — jemný červený akcent na text. */
.wizard-consent.is-invalid {
  color: var(--color-error);
}

.form-message {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  display: none;
}
.form-message.success {
  display: block;
  background: rgba(67, 122, 34, 0.1);
  color: var(--color-success);
  border: 1px solid rgba(67, 122, 34, 0.2);
}
.form-message.error {
  display: block;
  background: rgba(161, 53, 68, 0.1);
  color: var(--color-error);
  border: 1px solid rgba(161, 53, 68, 0.2);
}

@media (min-width: 768px) {
  .booking-layout {
    grid-template-columns: 1fr 1fr;
  }
}

/* ============================
   PAYMENT
   ============================ */
.payment-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}
.payment-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.payment-method {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
}
.payment-method h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: var(--space-4);
}
.payment-note {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin-top: var(--space-4);
  line-height: 1.6;
}
.qr-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}
.qr-container h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
}
#qr-code {
  background: #fff;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
}
#qr-code canvas {
  display: block;
}

@media (min-width: 768px) {
  .payment-grid {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

/* ============================
   TESTIMONIALS — Carousel
   ============================ */
/* Container nadpisu Reference — žádný vnitřní padding,
   aby se levy okraj nadpisu zarovnal s levým okrajem karuselu i mapy. */
#testimonials .container {
  max-width: var(--content-wide);
  margin: 0 auto;
  margin-bottom: var(--space-8);
}
.section-subtitle {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}

/* Carousel wrapper — zarovnaný do šířky obsahu (stejně jako mapa v sekci kontaktů).
   Jezdí nekonečnou animací, ale viditelné "okénko" je omezené šířkou .section-inner.
   Díky overflow: hidden karty mimo okénko jsou skryté — efekt zůstává, jen je orezaný. */
.testimonials-carousel {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: var(--content-wide);
  margin: 0 auto;
  padding: var(--space-2) 0;
}

/* Edge fade gradients */
.testimonials-carousel::before,
.testimonials-carousel::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(40px, 8vw, 120px);
  z-index: 2;
  pointer-events: none;
}
.testimonials-carousel::before {
  left: 0;
  background: linear-gradient(to right, var(--color-bg), transparent);
}
.testimonials-carousel::after {
  right: 0;
  background: linear-gradient(to left, var(--color-bg), transparent);
}

/* Scrolling track */
.testimonials-track {
  display: flex;
  gap: 24px;
  width: max-content;
  animation: testimonials-scroll 40s linear infinite;
}
.testimonials-carousel:hover .testimonials-track {
  animation-play-state: paused;
}

@keyframes testimonials-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    /* Scroll exactly half (10 cards worth) so loop is seamless */
    transform: translateX(calc(-50%));
  }
}

/* Card styles */
.testimonial-card {
  flex: 0 0 320px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6) var(--space-6) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  position: relative;
  transition: box-shadow var(--transition-interactive),
              border-color var(--transition-interactive);
}
.testimonial-card::before {
  content: "\201C";
  font-family: var(--font-display);
  font-size: 3.5rem;
  line-height: 1;
  color: var(--color-primary);
  opacity: 0.18;
  position: absolute;
  top: var(--space-3);
  right: var(--space-5);
  pointer-events: none;
}
.testimonial-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary-highlight);
}

/* Stars */
.testimonial-stars {
  color: var(--color-secondary);
  font-size: var(--text-sm);
  letter-spacing: 2px;
  line-height: 1;
}

/* Text */
.testimonial-text {
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.7;
  font-style: italic;
  flex: 1;
}

/* Author */
.testimonial-author {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-divider);
  margin-top: auto;
}
.testimonial-name {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-text);
}
.testimonial-detail {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* Responsive card width */
@media (max-width: 400px) {
  .testimonial-card {
    flex: 0 0 280px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .testimonials-track {
    animation-duration: 120s;
  }
}

/* ============================
   FAQ
   ============================ */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 800px;
}
.faq-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--transition-interactive);
}
.faq-item.open {
  border-color: var(--color-primary-highlight);
}
.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
  gap: var(--space-4);
}
.faq-question:hover {
  color: var(--color-primary);
}
.faq-question svg {
  flex-shrink: 0;
  transition: transform 0.3s ease;
  color: var(--color-text-muted);
}
.faq-item.open .faq-question svg {
  transform: rotate(180deg);
}
.faq-answer {
  display: none;
  padding: 0 var(--space-5) var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.7;
}
.faq-item.open .faq-answer {
  display: block;
}

/* ============================
   CONTACT
   ============================ */

/* Mapa pod kontaktními bloky — stejná šířka jako .section-inner.
   Mapa je iframe Mapy.cz (turistický podklad), bez vnitřního zpracování,
   takže jen wrapper kvůli mezeru a zaoblením. */
.contact-map {
  width: 100%;
  margin-top: var(--space-10);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.contact-map iframe {
  display: block;
  width: 100%;
  height: 450px;
  border: 0;
  /* Plynulý přechod, když uživatel přepne téma světlé/tmavé. */
  transition: filter var(--transition-interactive);
}

/* "Noční" varianta mapy v tmavém schématu.
   Mapy.cz iframe nepodporuje vedené dark-mode parametry, takže invertujeme barvy filtrem.
   - invert(0.92):  převrátí barvy (pozadí tmavé, písmo světlé), 92 % aby pin nebyl přepálený
   - hue-rotate(180deg):  vrátí barvy zpět do originálního odstínu (jinak by modrá voda byla žlutá)
   - saturate(0.85):  jemnější barvy, aby tmavý mód nepúsobil křiklavě */
[data-theme="dark"] .contact-map iframe {
  filter: invert(0.92) hue-rotate(180deg) saturate(0.85);
}
.contact-below-map {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
}
.contact-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}
.contact-icon {
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-highlight);
  border-radius: var(--radius-lg);
  color: var(--color-primary);
  flex-shrink: 0;
}
.contact-item-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.contact-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.contact-value {
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.6;
}
.contact-value a {
  color: var(--color-primary);
  text-decoration: none;
}
.contact-value a:hover {
  text-decoration: underline;
}

/* Contact form */
.contact-form-wrapper {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
}
.contact-form-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: var(--space-6);
}
.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .contact-below-map {
    grid-template-columns: 1fr 1.2fr;
  }
}

/* Na menších obrazovkách snížíme výšku mapy aby na mobilu nezabírala půl stránky */
@media (max-width: 600px) {
  .contact-map iframe {
    height: 320px;
  }
}

/* ============================
   FOOTER
   ============================ */
.site-footer {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding: var(--space-12) var(--space-6);
}
.footer-inner {
  max-width: var(--content-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.footer-brand p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  max-width: 320px;
}
.footer-links h4 {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: var(--space-4);
  color: var(--color-text);
}
.footer-links ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.footer-links a {
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: var(--text-sm);
  transition: color var(--transition-interactive);
}
.footer-links a:hover {
  color: var(--color-primary);
}
.footer-social {
  display: flex;
  gap: var(--space-3);
}
.footer-social a {
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  transition: color var(--transition-interactive), background var(--transition-interactive);
}
.footer-social a:hover {
  color: var(--color-primary);
  background: var(--color-primary-highlight);
}
.footer-bottom {
  max-width: var(--content-wide);
  margin: var(--space-8) auto 0;
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-divider);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
/* Sjednocení typografie ve spodním řádku patičky:
   <p> (© ...), <a> (linky) i <span> (Made with ❤ ...) musí mít stejnou
   velikost, font i barvu — jinak <span> využije browser default a vypadá
   větší a tmavší než ostatní prvky patčky. */
.footer-bottom p, .footer-bottom a, .footer-bottom span {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  /* font-family dědí z body, ale explicitně zapíšeme inherit pro případ,
     kdyby nějaký browser default pro <span> sahal jinam. */
  font-family: inherit;
  font-weight: inherit;
}
.footer-bottom a {
  text-decoration: none;
}
.footer-bottom a:hover {
  color: var(--color-primary);
}

@media (min-width: 768px) {
  .footer-inner {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }
}

/* ============================
   SUPPLEMENTS IMAGE
   ============================ */
.supplements-image {
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-top: var(--space-8);
  max-width: 500px;
}
.supplements-image img {
  width: 100%;
  height: auto;
  object-fit: cover;
}