/* Endorfin — shared navigation + footer styles
   Source of truth: matches index.html nav/footer layout.
   Do not duplicate these rules in page-specific inline <style>. */

/* Site-wide smooth scrolling (respects reduced-motion preference) */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Fallback design tokens — only fill in values the page didn't already define.
   Pages that already set their own `:root` values win via specificity/source order. */
:root {
  --nav-h:60px;
  --max:990px;
}

/* Loader heart neon stroke animation — referenced by .loading-stroke .neon-path
   on every page. Defined here so subpages don't need to duplicate the keyframe. */
@keyframes neonCycle {
  0%   { stroke-dashoffset: 760; }
  100% { stroke-dashoffset: -760; }
}

/* ── Subpage top-of-page background (heart-pattern fading into black) ──
   Place a single `<div class="subpage-bg"></div>` as the first child of <body>
   on any subpage. It sits behind all content, pointer-events:none. */
.subpage-bg {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 620px;
  background: url('images/subpage-bg.png') center top / cover no-repeat;
  pointer-events: none;
  z-index: 0;
  opacity: 1;
}
.subpage-bg::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 220px;
  background: linear-gradient(180deg, transparent, var(--bg, #090b0c));
}
/* Ensure content sits above the background.
   Excludes drawer/backdrop since they need position:fixed to escape layout. */
body > *:not(.subpage-bg):not(script):not(.mobile-menu):not(.mobile-backdrop):not(.navbar) { position: relative; z-index: 1; }

/* ── Neon hover utility — add glow on hover to any interactive element ── */
.neon-hover { transition: filter .25s ease, box-shadow .25s ease, transform .15s ease, color .2s; }
.neon-hover:hover, .neon-hover:focus-visible {
  filter: drop-shadow(0 0 6px #ff1f6e) drop-shadow(0 0 14px rgba(185,18,79,.55));
  outline: none;
}

/* Extra treatment for boxed elements (buttons, pills): pulse border/shadow on hover */
.neon-box:hover, .neon-box:focus-visible {
  box-shadow:
    0 0 0 1px rgba(255,31,110,.6),
    0 0 12px rgba(255,31,110,.45),
    0 0 28px rgba(185,18,79,.3);
  outline: none;
}

/* ── Neon star rating ── */
.star-rating {
  display: inline-flex;
  gap: 3px;
  align-items: center;
  vertical-align: middle;
}
.star-rating .star {
  font-size: 1.1rem;
  color: rgba(255,255,255,.18);
  line-height: 1;
  transition: color .25s ease, filter .25s ease, transform .15s ease;
  cursor: inherit;
}
.star-rating .star.lit {
  color: #ff1f6e;
  filter: drop-shadow(0 0 4px #ff1f6e) drop-shadow(0 0 10px rgba(185,18,79,.55));
}
.star-rating.interactive .star { cursor: pointer; }
.star-rating.interactive .star:hover,
.star-rating.interactive .star.hover {
  transform: scale(1.1);
}
.star-rating .count {
  font-size: .8rem;
  color: var(--subtle, #9da0a4);
  margin-left: 6px;
}

.navbar {
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(0,0,0,0.97);height:var(--nav-h);
  display:flex;align-items:center;
  border-bottom:1px solid rgba(255,255,255,0.04);
  backdrop-filter:blur(12px);
}
.nav-inner {
  width:100%;padding:0 125px;
  display:flex;align-items:center;gap:0;
}
.nav-logo {flex-shrink:0;display:flex;align-items:center}
.nav-logo-svg {height:16px;width:auto;display:block;transition:opacity .2s}
.nav-logo:hover .nav-logo-svg {opacity:.8}
.nav-logo:hover .nav-logo-svg path[fill="#E01B63"],
.nav-logo:hover .nav-logo-svg path[fill="#B9124F"] {
  filter:drop-shadow(0 0 6px #e01b63);
  transition:filter .3s;
}
.nav-links {
  display:flex;margin:0 auto;
  background:none;
  border-radius:0;
  padding:0;
}
.nav-links a {
  font-size:16px;font-weight:400;color:rgba(255,255,255,0.85);
  padding:0 18px;line-height:var(--nav-h);white-space:nowrap;
  transition:color .2s ease;
  position:relative;
}
.nav-links a:hover { color:#fff }
.nav-links a::after { display:none }
.nav-right {display:flex;align-items:center;gap:20px;flex-shrink:0}
.lang-switcher {display:flex;align-items:center;gap:5px;font-size:16px;color:var(--muted);cursor:pointer}

/* ── MOBILE NAVIGATION ──
   Modern sheet-style drawer that slides in from the right on mobile.
   Replaces the old slide-down strip. Includes proper touch targets (≥44px),
   active-page highlighting, language toggle, phone CTA, and a sticky
   Rezervace button at the bottom of the drawer. */

/* Hamburger button — bigger touch target on mobile (44×44 minimum) */
.hamburger {
  display:none;
  flex-direction:column;justify-content:center;align-items:center;gap:5px;
  width:44px;height:44px;
  margin-left:auto;
  cursor:pointer;
  background:transparent;border:none;
  -webkit-tap-highlight-color:transparent;
  z-index:201;                          /* sits above the drawer's z-index */
  position:relative;
}
.hamburger span {
  display:block;width:22px;height:2px;
  background:var(--text);border-radius:2px;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .25s,background .25s;
  transform-origin:center;
}
.hamburger.open span:nth-child(1) {transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2) {opacity:0;transform:scaleX(0)}
.hamburger.open span:nth-child(3) {transform:translateY(-7px) rotate(-45deg)}
.hamburger:hover span {background:var(--accent3, #ff1f6e)}

/* Backdrop — covers the page when drawer is open, blurred + dimmed */
.mobile-backdrop {
  position:fixed !important;inset:0;
  background:rgba(9,11,12,.65);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  z-index:198;
  opacity:0;visibility:hidden;
  transition:opacity .35s ease,visibility .35s ease;
}
.mobile-backdrop.open {opacity:1;visibility:visible}

/* Drawer panel — slides in from the right */
.mobile-menu {
  display:flex;flex-direction:column;
  position:fixed !important;
  top:0;right:0;bottom:0;
  width:min(85vw, 380px);
  background:linear-gradient(180deg,#101214 0%,#090b0c 100%);
  border-left:1px solid rgba(255,255,255,.06);
  box-shadow:-20px 0 60px rgba(0,0,0,.5);
  z-index:199;
  transform:translateX(100%);
  transition:transform .4s cubic-bezier(.2,.8,.2,1);
  overflow:hidden;
  /* iOS safe area bottom */
  padding-bottom:env(safe-area-inset-bottom, 0);
}
.mobile-menu.open {transform:translateX(0)}

/* Drawer header — logo on left, gap above nav links */
.mm-header {
  display:flex;align-items:center;
  height:var(--nav-h);
  padding:0 1.5rem;
  border-bottom:1px solid rgba(255,255,255,.05);
  flex-shrink:0;
}
.mm-header .mm-logo-svg {height:16px;width:auto;color:var(--text);display:block}

/* Scrollable nav links area */
.mm-body {
  flex:1;overflow-y:auto;
  display:flex;flex-direction:column;
  padding:1.25rem 0;
}
.mm-body ul {display:flex;flex-direction:column;gap:0;list-style:none;padding:0;margin:0}
.mm-body li {margin:0}
.mm-body a {
  display:flex;align-items:center;
  padding:14px 1.5rem;            /* gives 48px tap target with font line-height */
  font-size:1.05rem;font-weight:400;
  color:rgba(255,255,255,.85);
  text-decoration:none;
  border-left:3px solid transparent;
  transition:background .2s,color .2s,border-left-color .25s;
  -webkit-tap-highlight-color:transparent;
}
.mm-body a:hover,
.mm-body a:focus-visible {
  color:#fff;
  background:rgba(255,255,255,.03);
}
.mm-body a.active {
  color:#fff;
  background:rgba(255,31,110,.08);
  border-left-color:var(--accent2, #e01b63);
}
.mm-body a.active::after {
  content:'';
  margin-left:auto;
  width:6px;height:6px;border-radius:50%;
  background:var(--accent3, #ff1f6e);
  box-shadow:0 0 8px rgba(255,31,110,.6);
}

/* Section divider in body */
.mm-divider {
  height:1px;background:rgba(255,255,255,.05);
  margin:1rem 1.5rem;
}

/* Language switcher — segmented control */
.mm-lang {
  display:flex;gap:6px;
  margin:0 1.5rem 1rem;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  border-radius:24px;
  padding:4px;
}
.mm-lang button {
  flex:1;
  padding:8px 12px;
  font-size:.85rem;font-weight:400;
  background:transparent;border:none;
  color:var(--muted);
  border-radius:20px;
  cursor:pointer;
  transition:background .25s,color .25s;
  -webkit-tap-highlight-color:transparent;
  font-family:inherit;
}
.mm-lang button.active {
  background:rgba(255,31,110,.15);
  color:#fff;
}

/* Phone CTA */
.mm-phone {
  display:flex;align-items:center;gap:.75rem;
  margin:0 1.5rem 1rem;
  padding:14px 16px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
  text-decoration:none;
  color:var(--text);
  transition:background .2s,border-color .2s;
  -webkit-tap-highlight-color:transparent;
}
.mm-phone:hover,
.mm-phone:focus-visible {
  background:rgba(255,31,110,.08);
  border-color:rgba(255,31,110,.25);
}
.mm-phone-icon {
  width:36px;height:36px;flex-shrink:0;
  border-radius:50%;
  background:rgba(255,31,110,.15);
  display:flex;align-items:center;justify-content:center;
  color:var(--accent3, #ff1f6e);
}
.mm-phone-text {display:flex;flex-direction:column;gap:2px;line-height:1.2}
.mm-phone-label {font-size:.7rem;color:var(--subtle);text-transform:uppercase;letter-spacing:.06em}
.mm-phone-num {font-size:1rem;font-weight:400;color:var(--text)}

/* Sticky Rezervace CTA at the bottom of the drawer */
.mm-footer {
  flex-shrink:0;
  padding:1rem 1.5rem 1.25rem;
  border-top:1px solid rgba(255,255,255,.05);
  background:rgba(9,11,12,.6);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.mm-rv {
  display:flex;align-items:center;justify-content:center;
  width:100%;
  background:var(--accent);
  border:2px solid var(--accent2);
  color:#fff;
  font-size:1rem;font-weight:400;
  padding:14px 24px;
  border-radius:24px;
  text-decoration:none;
  transition:background .2s,box-shadow .25s,transform .15s;
  -webkit-tap-highlight-color:transparent;
}
.mm-rv:hover,
.mm-rv:focus-visible {
  background:var(--accent2);
  box-shadow:0 0 22px rgba(255,31,110,.45);
}
.mm-rv:active {transform:scale(.98)}

/* Lock body scroll when drawer is open */
body.no-scroll {overflow:hidden;touch-action:none}

.footer {padding:0 125px 40px;background:var(--bg)}
.footer-card {
  position:relative;max-width:var(--max);
  margin:0 auto;border-radius:20px;overflow:hidden;
}
.footer-bg {
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  pointer-events:none;
}
.footer-inner {position:relative;z-index:1;padding:30px 44px}
.footer-top {
  display:flex;align-items:center;
  justify-content:space-between;gap:1rem;
  margin-bottom:40px;flex-wrap:wrap;
}
.footer-logo {display:flex;align-items:center}
.footer-logo-svg {
  height:20px;width:auto;display:block;
  transition:opacity .2s;
}
.footer-logo:hover .footer-logo-svg {opacity:.8}
.footer-nav-pill {
  display:flex;gap:20px;
  background:rgba(16,18,20,.4);border-radius:20px;
  padding:8px 24px;
}
.footer-nav-pill a {
  font-size:16px;color:var(--text);white-space:nowrap;
  transition:color .2s;
  position:relative;
}
.footer-nav-pill a:hover {color:var(--accent)}
.footer-rv {
  background:var(--accent);border:2px solid var(--accent2);
  color:var(--text);font-size:16px;padding:7px 22px;
  border-radius:20px;transition:background .2s,transform .15s;white-space:nowrap;
}
.footer-rv:hover {background:var(--accent2);transform:translateY(-1px)}
.footer-contacts {display:flex;gap:60px;margin-bottom:30px}
.fc-label {font-size:16px;color:var(--subtle);margin-bottom:4px}
.fc-val {font-size:16px;color:var(--text);transition:color .2s}
.footer-line {height:1px;background:rgba(255,255,255,.08);margin-bottom:16px}
.footer-legal {font-size:13px;color:var(--subtle);text-align:center;line-height:1.7}
@media(max-width:1200px) {
  .nav-inner {padding:0 40px}
  .footer {padding:0 40px 30px}
}
@media(max-width:900px) {
  .nav-links,.lang-switcher,.nav-right {display:none !important}
  .hamburger {display:flex}
  .nav-inner {padding:0 20px}
  .footer {padding:0 16px 20px}
  .footer-inner {padding:24px 20px;text-align:center}
  .footer-top {
    flex-direction:column;align-items:center;
    gap:1rem;margin-bottom:24px;
  }
  .footer-nav-pill {display:none}
  .footer-logo {justify-content:center}
  .footer-contacts {
    flex-direction:column;gap:1rem;
    align-items:center;
    text-align:center;
  }
  .fc-label, .fc-val {text-align:center}
  .footer-rv {margin:0 auto}
  .footer-legal {text-align:center;padding:0 .5rem}
}
/* Drawer is mobile-only — hide it entirely on desktop even if open class lingers */
@media(min-width:901px) {
  .mobile-menu,
  .mobile-backdrop {display:none !important}
}
.nav-logo-svg,
.footer-logo-svg {
  overflow:visible;
}
.nav-logo-svg path,
.footer-logo-svg path {
  transition: fill .3s ease;
}
.nav-logo:hover .nav-logo-svg path:nth-child(7),
.footer-logo:hover .footer-logo-svg path:nth-child(7) {
  fill: #e01b63;
}
.nav-logo:hover .nav-logo-svg,
.footer-logo:hover .footer-logo-svg {
  animation: logoNeonGlow 1.4s ease-in-out infinite;
}
/* Base nav/footer reservation button — mirrors the homepage version so every
   subpage that links nav-footer.css gets the same styled pill without needing
   to redefine it inline. Hover effect below adds the neon glow. */
.btn-rv,
.btn-book,
.footer-rv {
  background: var(--accent);
  border: 2px solid var(--accent2);
  color: var(--text);
  font-family: var(--font, 'PP Mori', sans-serif);
  font-size: 16px; font-weight: 400;
  padding: 0 20px; height: 35px;
  border-radius: 20px;
  display: inline-flex; align-items: center; white-space: nowrap;
  text-decoration: none; cursor: pointer;
  transition: background .2s, transform .15s, box-shadow .3s ease;
}
.btn-rv:hover,
.btn-book:hover,
.footer-rv:hover {
  background: var(--accent2);
  transform: translateY(-1px);
  box-shadow:
    0 0 10px rgba(185,18,79,.5),
    0 0 25px rgba(185,18,79,.3),
    0 0 50px rgba(185,18,79,.15);
}
.lang-switcher-wrap {position:relative}
.lang-current {
  display:flex;align-items:center;gap:5px;
  font-size:16px;color:rgba(255,255,255,.7);
  background:none;border:none;cursor:pointer;
  font-family:var(--font,'PP Mori',sans-serif);
  transition:color .2s;
}
.lang-current:hover {color:#fff}
.lang-dropdown {
  display:none;
  position:absolute;top:calc(100% + 8px);right:0;
  background:#101214;border:1px solid #262a2f;
  border-radius:10px;overflow:hidden;
  min-width:140px;z-index:200;
  animation:dropIn .2s ease;
}
.lang-dropdown.open {display:block}
.lang-option {
  display:flex;align-items:center;gap:10px;
  width:100%;padding:10px 16px;
  background:none;border:none;cursor:pointer;
  font-family:var(--font,'PP Mori',sans-serif);
  font-size:14px;color:rgba(255,255,255,.7);
  transition:background .15s,color .15s;text-align:left;
}
.lang-option:hover {background:#1a1f24;color:#fff}
.lang-option.active {color:#e01b63}
.lang-flag {font-weight:600;font-size:12px;min-width:24px}
.lang-name {font-size:13px}

/* ============================================================
   SHARED CTA BUTTONS — primary (filled) + secondary (outline).
   Mirrors the homepage .btn-rv look. Used on masaze, masaze-detail,
   and anywhere else that needs consistent calls-to-action.
   ============================================================ */
.btn-cta-primary {
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent, #b9124f);
  border:2px solid var(--accent2, #e01b63);
  color:var(--text, #fff);
  font-family:var(--font,'PP Mori',sans-serif);
  font-size:16px;font-weight:400;
  padding:0 28px;height:46px;border-radius:23px;
  text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:background .2s, transform .15s, box-shadow .2s;
}
.btn-cta-primary:hover {
  background:var(--accent2, #e01b63);
  transform:translateY(-1px);
  box-shadow:0 4px 22px rgba(185,18,79,.45), 0 0 14px rgba(255,31,110,.35);
}
.btn-cta-secondary {
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;
  border:2px solid rgba(255,255,255,.18);
  color:var(--text, #fff);
  font-family:var(--font,'PP Mori',sans-serif);
  font-size:15px;font-weight:400;
  padding:0 24px;height:46px;border-radius:23px;
  text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:border-color .2s, color .2s, transform .15s, box-shadow .2s;
}
.btn-cta-secondary:hover {
  border-color:var(--accent2, #e01b63);
  transform:translateY(-1px);
  box-shadow:0 0 14px rgba(255,31,110,.3);
}
/* Full-width variant for sidebar panels (detail page) */
.btn-cta-primary.btn-block,
.btn-cta-secondary.btn-block { display:flex;width:100%; }
/* Large variant */
.btn-cta-primary.btn-lg { height:54px;font-size:17px;border-radius:27px; }

/* ============================================================
   PULSING GLOW DOT — for benefit lists, status indicators.
   ============================================================ */
@keyframes dotPulse {
  0%,100% { box-shadow:0 0 4px rgba(255,31,110,.5), 0 0 8px rgba(185,18,79,.3); opacity:.85; }
  50%     { box-shadow:0 0 8px rgba(255,31,110,.95), 0 0 18px rgba(185,18,79,.6); opacity:1; }
}
.glow-dot {
  display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--accent2, #e01b63);
  animation:dotPulse 2s ease-in-out infinite;
}

/* ============================================================
   NEON PERIMETER TRACE — animated stroke travelling the border
   of a rounded box. Add class .neon-glow-box to a positioned
   container and drop a .neon-border-svg inside it.
   ============================================================ */
.neon-glow-box { position:relative; }
.neon-border-svg {
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:5;overflow:visible;
  filter:drop-shadow(0 0 6px rgba(255,31,110,.55)) drop-shadow(0 0 14px rgba(185,18,79,.35));
}
.neon-border-svg .neon-rect-bg {
  fill:none;stroke:rgba(255,255,255,0.05);stroke-width:1.5;
}
.neon-border-svg .neon-rect-trace {
  fill:none;stroke:url(#neonBorderGrad);
  stroke-width:2.5;stroke-linecap:round;
  stroke-dasharray:18 82;
}
@keyframes neonPerimeter { from {stroke-dashoffset:0} to {stroke-dashoffset:-100} }
