/* Clean CSS version */
:root {
  --clr-bg: #ffffff;
  --clr-bg-alt: #ffffff;
  --clr-primary: #4DBD25;
  --clr-primary-dark: #3a9a1f;
  --clr-accent: #c49b63;
  --clr-accent-soft: #e8d7be;
  --clr-muted: #5e6b66;
  --radius-s: 4px;
  --radius: 10px;
  --radius-l: 20px;
  --shadow: 0 4px 16px -4px rgba(0,0,0,.12);
  --gradient-accent: linear-gradient(135deg, #dffad9 0%, #4DBD25 45%, #3a9a1f 100%);
  --font-serif: 'Playfair Display', serif;
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; font-family: var(--font-sans); line-height:1.55; background: var(--clr-bg); color: var(--clr-text); }
img { max-width:100%; display:block; }
a { color: var(--clr-primary); text-decoration:none; }
a:hover { text-decoration:underline; }

.container { width:min(1180px, 100% - 2.5rem); margin-inline:auto; }
.flex { display:flex; align-items:center; }
.grid-2 { display:grid; gap:2.5rem; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); align-items:start; }
.narrow { max-width:760px; margin-inline:auto; }
.center { text-align:center; }

.site-header { position:sticky; top:0; backdrop-filter: blur(12px); background:rgba(245,241,236,.85); border-bottom:1px solid #e1ddd7; z-index:50; }
.header-inner { justify-content:space-between; padding:.75rem 0; }
.brand { display:flex; align-items:center; gap:.5rem; }
.logo {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--clr-accent);
  letter-spacing: .5px;
  -webkit-font-smoothing: antialiased;
  text-shadow: 0 1px 0 rgba(255,255,255,0.25), 0 6px 18px rgba(0,0,0,0.12);
}
/* small brand mark (favicon) placed next to the text logo */
.brand-mark { width:28px; height:28px; flex:0 0 28px; display:block; align-self:center; }
.brand .logo { display:inline-block; vertical-align:middle; line-height:1; }
/* optical nudge to perfectly align the circular mark with the serif logotype */
.brand-mark { transform: translateY(1px); }
.nav-toggle { display:none; background:var(--clr-primary); color:#fff; padding:.6rem 1rem; border:none; border-radius:var(--radius-s); font-weight:500; }
.nav-menu { list-style:none; margin:0; padding:0; display:flex; gap:1.5rem; }
.nav-menu a { font-weight:500; padding:.6rem .3rem; position:relative; }
.nav-menu a::after { content:""; position:absolute; left:0; bottom:.2rem; width:0; height:2px; background:var(--clr-accent); transition:.3s; }
.nav-menu a:hover::after, .nav-menu a:focus::after { width:100%; }

  .hero { position:relative; padding:8rem 0 5rem; background: linear-gradient(120deg, rgba(77,189,37,.92), rgba(77,189,37,.56)), url('../img/hero.jpg') center/cover no-repeat fixed; color:#fff; }
.hero .overlay { position:absolute; inset:0; background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.12), transparent 60%); pointer-events:none; z-index:1; }
.hero-inner { position:relative; z-index:2; }
.hero h1 { font-family: var(--font-serif); font-size:clamp(2.2rem, 5vw, 3.6rem); line-height:1.1; margin:0 0 1rem; }
.hero h1 span { color: var(--clr-accent); }
.lead { font-size:1.15rem; max-width:640px; }
.hero-actions { margin-top:2rem; display:flex; gap:1rem; flex-wrap:wrap; }
.wave { position:absolute; bottom:-1px; left:0; width:100%; }
.wave svg { width:100%; height:auto; display:block; fill: var(--clr-bg); }

.section { padding:4.5rem 0; position:relative; }
.section.alt { background: var(--clr-bg-alt); }
.section.accent-gradient { background: var(--gradient-accent); color:#fff; --card-bg: rgba(255,255,255,.1); }
.section h2 { font-family: var(--font-serif); font-size:2.2rem; margin:0 0 1.5rem; position:relative; }
.section h2::after { content:""; display:block; width:70px; height:4px; background:var(--clr-accent); margin-top:.75rem; border-radius:3px; }

/* Checklist uses primary green; heading and paragraph are black */
#o-nas .checklist li { color: var(--clr-primary); }

#o-nas h2,
#o-nas p { color: #000; }


.cards-3 { display:grid; gap:1.5rem; grid-template-columns: repeat(3, 1fr); margin-top:1rem; }
.service-card { background:#fff; padding:1.4rem 1.2rem 1.5rem; border-radius:var(--radius); box-shadow:var(--shadow); display:flex; flex-direction:column; gap:.65rem; position:relative; }
.service-card h3 { margin:.2rem 0 .2rem; font-size:1.15rem; font-weight:600; }
.price { margin-top:auto; font-size:.95rem; color:var(--clr-primary); }
.price .price-row { display:flex; align-items:baseline; justify-content:space-between; gap:.75rem; }
.price .price-row + .price-row { margin-top:.15rem; }

/* Visual highlight for favorite/special service */
.service-card.favorite-service {
  background: linear-gradient(180deg, #fffef6, #ffffff);
  border: 1px solid var(--clr-primary);
  box-shadow: 0 12px 28px rgba(77,189,37,0.08);
  transform: translateY(-2px);
}
.service-card.favorite-service h3 { color: var(--clr-primary); }
.service-card.favorite-service .price { color: var(--clr-primary-dark); font-weight:700; }

/* Badge for favorite services */
.service-card .badge { position:absolute; top:12px; right:12px; background:var(--clr-accent); color:#fff; font-size:.78rem; padding:.28rem .7rem; border-radius:999px; font-weight:700; box-shadow:0 4px 10px rgba(0,0,0,.08); overflow:hidden; z-index:4; }
.service-card .badge.favorite { background: linear-gradient(90deg, var(--clr-primary), var(--clr-primary-dark)); }

/* Subtle shine that moves across the badge only */
.service-card .badge.favorite::after {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 120%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-12deg);
  opacity: 0.9;
  pointer-events: none;
  will-change: transform;
  animation: badgeShine 1.6s ease-in-out infinite;
}

@keyframes badgeShine {
  0% { transform: translateX(-120%) skewX(-12deg); }
  100% { transform: translateX(220%) skewX(-12deg); }
}


.card { background: var(--clr-bg-alt); padding:1.8rem 1.5rem 2rem; border-radius:var(--radius-l); box-shadow:var(--shadow); position:relative; }
.card.accent { background:linear-gradient(135deg,#4DBD25,#3a9a1f); color:#fff; }
.card.translucent { background: var(--card-bg, rgba(255,255,255,.35)); backdrop-filter: blur(6px); border:1px solid rgba(255,255,255,.35); }

.checklist { list-style:none; padding:0; margin:1rem 0 0; display:grid; gap:.4rem; }
.checklist li { padding-left:1.4rem; position:relative; }
.checklist li::before { content:"✓"; position:absolute; left:0; top:0; color:var(--clr-accent); font-weight:600; }

/* Certificates styling inside the About section */
.certificates { margin-top:1.2rem; }
.certificates h3 { font-size:1.15rem; margin:0 0 .45rem; color:var(--clr-primary); font-weight:700; letter-spacing:0.2px; line-height:1.1; }
/* Ensure certificates heading inside About is explicitly green and has no decorative underline */
#o-nas .certificates h3 { color: #000 !important; text-decoration: none; display:inline-block; margin-top:.35rem; font-weight:700; }
#o-nas .certificates h3::after { content:""; display:block; width:70px; height:4px; background:var(--clr-accent); margin-top:.5rem; border-radius:3px; }
.cert-list { list-style:none; margin:0; padding:0; display:grid; gap:.35rem; }
.cert-list li { padding-left:1.2rem; position:relative; color:var(--clr-muted); }
.cert-list li::before { content:"•"; position:absolute; left:0; top:0; color:var(--clr-accent); font-weight:700; }

.pricing { display:grid; gap:1.2rem; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); margin:1.5rem 0 2rem; }
.price-item { background:#fff; border:1px solid #e7e2db; padding:1.1rem 1rem 1.2rem; border-radius:var(--radius); box-shadow:0 2px 6px -2px rgba(0,0,0,.08); }

/* Voucher showcase (zjednodušená 1 karta) */
.voucher-float { position:relative; width:100%; max-width:480px; margin:2.4rem auto 1.8rem; aspect-ratio: 16/9; perspective:1100px; }
.voucher-float picture, .voucher-float img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:20px; display:block; transform-style:preserve-3d; }
  .voucher-float img { box-shadow:0 14px 34px -12px rgba(0,0,0,.32), 0 6px 14px -6px rgba(0,0,0,.22); transform-origin:center; transition: transform .6s cubic-bezier(.2,.9,.25,1), box-shadow .45s cubic-bezier(.2,.9,.25,1); will-change: transform; backface-visibility: hidden; transform: translateY(0) scale(1); }
  .voucher-float.idle img { animation:voucherBreath 6s ease-in-out infinite; }
  /* Pause breathing while interacting so hover transform is dominant (use pause so animation can resume smoothly) */
  .voucher-float:hover img, .voucher-float:focus-within img { animation-play-state: paused !important; }
.voucher-float::before { content:""; position:absolute; inset:0; border-radius:20px; pointer-events:none; background:linear-gradient(130deg, rgba(77,189,37,0.08), rgba(255,255,255,.0) 28%, rgba(255,255,255,.20) 54%, rgba(0,0,0,.12) 95%); mix-blend-mode:overlay; opacity:.55; transition:opacity .4s ease; }
.voucher-float.is-tilting::before { opacity:.75; }
.voucher-float.is-tilting img { animation-play-state: paused !important; }
  .voucher-float:hover img, .voucher-float:focus-within img { box-shadow:0 28px 56px -18px rgba(0,0,0,.5), 0 12px 26px -10px rgba(0,0,0,.32); transform: translateY(-10px) scale(1.02); }
  /* Remove abrupt active shortcut so transitions remain smooth on mouseleave */
  .voucher-float:active img { transition: transform .35s cubic-bezier(.2,.9,.25,1); }
.voucher-neutralizing { animation:none !important; }
.voucher-float::after { content:""; position:absolute; left:50%; bottom:-18px; width:54%; height:18%; background:radial-gradient(ellipse at center, rgba(0,0,0,.28), transparent 70%); filter:blur(8px); transform:translateX(-50%); opacity:.55; animation:voucherShadow 5.2s ease-in-out infinite; }
/* Upravená animace – neutrální základ pro plynulý návrat z interaktivního náklonu */
@keyframes voucherBreath { 0%,100% { transform:translateY(0) rotateX(0deg) rotateY(0deg) scale(1); } 50% { transform:translateY(6px) rotateX(2deg) rotateY(-2deg) scale(1.01); } }
@keyframes voucherShadow { 0%,100% { transform:translate(-50%,0) scale(1); opacity:.55;} 50% { transform:translate(-50%,0) scale(.92); opacity:.42;} }
.voucher-actions { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
@media (max-width: 620px){ .voucher-float { aspect-ratio: 4/3; } }
@media (prefers-reduced-motion: reduce){ .voucher-float img, .voucher-float::after { animation:none !important; } }

.gallery { display:grid; gap:1rem; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); margin-top:1rem; }
.gallery-item { aspect-ratio: 4/3; border-radius:var(--radius); background:#d9d2c9; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; font-size:.8rem; color:#4d4d4d; text-align:center; padding:.5rem; }
.gallery-item.placeholder { background: repeating-linear-gradient(45deg,#e7e2db,#e7e2db 10px,#ddd6cc 10px,#ddd6cc 20px); }

.booking { display:flex; flex-direction:column; gap:1rem; margin-top:.5rem; }
.form-grid { display:grid; gap:1rem; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); }
.booking label { font-size:.85rem; font-weight:500; display:flex; flex-direction:column; gap:.35rem; letter-spacing:.3px; }
.booking input, .booking select, .booking textarea { font:inherit; padding:.6rem .65rem; border:1px solid #c8c2bb; border-radius:var(--radius-s); background:#fff; }
.booking input:focus, .booking select:focus, .booking textarea:focus { outline:2px solid var(--clr-accent); outline-offset:1px; }

.contact-list { list-style:none; padding:0; margin:0 0 1.2rem; display:grid; gap:.5rem; }
.contact-list li { line-height:1.35; }

/* Color contact values green, keep strong labels black for clarity */
#kontakt .contact-list li { color: #000; }
#kontakt .contact-list li strong { color: #000; font-weight:700; }
/* Ensure links (telefon, email, IČO) in the contact list are black */
#kontakt .contact-list li a { color: #000; text-decoration: none; }
.map-wrapper { min-height:260px; background:#ddd6cc; border-radius:var(--radius-l); display:flex; flex-direction:column; box-shadow:var(--shadow); position:relative; overflow:hidden; padding:0; }
.map-placeholder { padding:1rem; font-size:.9rem; color:#3f3a34; text-align:center; }

.steps { list-style:decimal; margin:0 0 1rem 1.2rem; padding:0; display:grid; gap:.3rem; }

.btn { --_bg: var(--clr-primary); --_color: #fff; border:none; cursor:pointer; font:inherit; font-weight:600; padding:.85rem 1.4rem; border-radius: var(--radius-s); background: var(--_bg); color: var(--_color); display:inline-flex; align-items:center; gap:.5rem; box-shadow:0 3px 10px -3px rgba(0,0,0,.25); position:relative; text-decoration:none; }
.btn.primary { --_bg: var(--clr-accent); --_color:#1f1d1a; }
.btn.ghost { --_bg: rgba(255,255,255,.25); --_color:#fff; backdrop-filter:blur(4px); box-shadow:none; border:1px solid rgba(255,255,255,.4); }
.btn.full { width:100%; justify-content:center; }
.btn:hover { filter:brightness(1.05); text-decoration:none; }
.btn:active { transform: translateY(1px); }

.flash-wrapper { position:fixed; top:4.2rem; right:1rem; display:grid; gap:.6rem; z-index:200; width: min(320px, 90vw); }
.flash { padding:.85rem 1rem; border-radius: var(--radius); font-size:.85rem; box-shadow:var(--shadow); animation: fadeSlide .5s ease; }
.flash-success { background:#e3f7ec; border:1px solid #bde8cd; color:var(--clr-primary); }
.flash-error { background:#fde8e4; border:1px solid #f5b7aa; color:#7d261a; }
@keyframes fadeSlide { from { opacity:0; transform:translateY(-6px);} to {opacity:1; transform:translateY(0);} }

.site-footer { margin-top:3rem; background:#1f2624; color:#d8d8d4; padding:3.2rem 0 1.2rem; }
.footer-grid { display:grid; gap:2.2rem; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); }
.site-footer h3, .site-footer h4 { margin-top:0; font-family: var(--font-serif); }
.site-footer a { color:#fff; }
.footer-bottom { text-align:center; margin-top:2.6rem; font-size:.75rem; letter-spacing:.5px; opacity:.75; }

.small { font-size:.8rem; }
.muted { color: var(--clr-muted); }
.list-unstyled { list-style:none; margin:0; padding:0; }
.accent-gradient .muted { color: rgba(255,255,255,.75); }
ol, ul { padding-left:1.1rem; }
code { background:#efe8df; padding:.2rem .45rem; border-radius:4px; font-size:.75rem; }

@media (max-width: 860px) {
  .nav-toggle { display:inline-block; }
  .nav { position:relative; }
  .nav-menu { position:absolute; top:100%; right:0; flex-direction:column; background:rgba(255,255,255,.95); padding:1rem 1.2rem; border:1px solid #ded7cf; border-radius: var(--radius); box-shadow: var(--shadow); transform-origin: top right; transform: scale(.9); opacity:0; pointer-events:none; transition:.25s; min-width: 210px; }
  .nav-menu.open { opacity:1; transform:scale(1); pointer-events:auto; }
  .hero { background-attachment: scroll; }
}

/* Mobile card and badge adjustments to avoid overlap and improve spacing */
@media (max-width: 640px) {
  .cards-3 { grid-template-columns: 1fr; gap: 1rem; }
  .service-card { padding: 1rem; border-radius: 12px; }
  .service-card h3 { font-size: 1.05rem; }
  .service-card .price { font-size: .95rem; }
  /* Slightly smaller badge and nudged inside the card to prevent overlap */
  .service-card .badge { top: 10px; right: 10px; font-size: .72rem; padding: .18rem .5rem; }
  /* Keep the shine on mobile too, but make it lighter/less busy */
  .service-card .badge.favorite::after { opacity: .55; animation-duration: 2.4s; }
}

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

/* Animated highlight for `Ráj` (calm gold shimmer) */
.fixed-word.highlight-gold {
  background: linear-gradient(90deg, #ffd27a 10%, #fff7d6 30%, #ffd27a 50%, #fffbe6 70%, #ffd27a 90%);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: goldShimmer 3.6s linear infinite;
  text-shadow: 0 8px 22px rgba(0,0,0,0.12);
}

/* Disable shimmer for a single instance */
.fixed-word.highlight-gold.no-shimmer {
  animation: none !important;
  -webkit-background-clip: initial;
  background-clip: initial;
  background: none !important;
  color: #ffd27a !important;
  -webkit-text-fill-color: #ffd27a !important;
}

@keyframes goldShimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .fixed-word.highlight-gold { animation: none; background-position: 50% 50%; color: #ffd27a; -webkit-background-clip: initial; background-clip: initial; }
}