/* Shared CleanTime design system. Loaded after every page-specific stylesheet. */
:root {
  --ink: #17201c;
  --muted: #647169;
  --paper: #f8f8f4;
  --surface: #ffffff;
  --surface-soft: #eef3eb;
  --line: #dce3da;
  --lime: #52bdec;
  --forest: #1c3026;
  --forest-deep: #102019;
  --sage: #dfe9dc;
  --radius: 18px;
  --radius-lg: 26px;
  --shadow: 0 18px 50px rgba(23, 32, 28, .09);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

html { overflow-x: clip; }

body {
  min-height: 100svh;
  background: var(--paper);
}

.reveal {
  opacity: 1;
  translate: 0 0;
  filter: none;
}

.motion-ready .reveal {
  opacity: 0;
  translate: 0 24px;
  filter: blur(3px);
  transition:
    opacity 680ms ease,
    translate 820ms var(--ease-out),
    filter 620ms ease;
  transition-delay: calc(var(--delay, 0) * 90ms);
  will-change: opacity, translate, filter;
}

.motion-ready .reveal.in-view {
  opacity: 1;
  translate: 0 0;
  filter: blur(0);
  will-change: auto;
}

.button {
  min-height: 46px;
  padding: 12px 20px;
  font-weight: 750;
  letter-spacing: -.015em;
  transition: transform 280ms var(--ease-out), background-color 220ms ease;
}

.button:hover { box-shadow: none; transform: translate3d(0, -2px, 0); }

.button:disabled,
button:disabled {
  cursor: not-allowed;
  pointer-events: none;
  opacity: .48;
  transform: none;
}

.button:focus-visible,
.text-link:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
button:focus-visible {
  outline: 3px solid #45a2cb;
  outline-offset: 3px;
}

input, textarea, select {
  min-height: 46px;
  border-color: var(--line);
  border-radius: 10px;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

textarea { min-height: 118px; }

input::placeholder,
textarea::placeholder { color: #8a948e; opacity: 1; }

input[type="checkbox"],
input[type="radio"] { accent-color: var(--forest); }

/* Booking */
body[data-page="booking"] .booking-header {
  width: 100%;
  min-height: 96px;
  margin: 0;
  padding: 22px clamp(32px, 4.7vw, 92px);
  border-bottom: 1px solid var(--line);
}

body[data-page="booking"] {
  min-height: 100svh;
  background:
    radial-gradient(circle at 84% -8%, rgba(82, 189, 236, .45), transparent 26rem),
    linear-gradient(180deg, #fbfcf9 0%, #f0f4ed 100%);
}

body[data-page="booking"] .booking-header .text-link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: var(--ink);
  font-size: .84rem;
  font-weight: 750;
}

body[data-page="booking"] .booking-shell {
  width: 100%;
  min-height: calc(100vh - 96px);
  min-height: calc(100dvh - 96px);
  margin: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: var(--surface);
  box-shadow: none;
}

body[data-page="booking"] .booking-aside {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 0 100%, rgba(82, 189, 236, .22), transparent 24rem),
    linear-gradient(155deg, #203a2d 0%, var(--forest-deep) 100%);
  color: rgba(255, 255, 255, .62);
}

body[data-page="booking"] .booking-aside::before {
  position: absolute;
  top: -13rem;
  right: -14rem;
  width: 31rem;
  height: 31rem;
  border: 1px solid rgba(82, 189, 236, .2);
  border-radius: 50%;
  content: "";
}

body[data-page="booking"] .booking-aside > * {
  position: relative;
  z-index: 1;
}

body[data-page="booking"] .booking-aside .eyebrow { color: var(--lime); }

body[data-page="booking"] .booking-progress {
  gap: clamp(15px, 1.45vw, 30px);
}

body[data-page="booking"] .booking-progress li {
  display: flex;
  align-items: center;
  gap: 11px;
  color: rgba(255, 255, 255, .42);
}

body[data-page="booking"] .booking-progress li.active {
  color: #fff;
}

body[data-page="booking"] .booking-progress li.active::before {
  width: 8px;
  height: 8px;
  margin-left: -19px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 5px rgba(82, 189, 236, .12);
  content: "";
}

body[data-page="booking"] .booking-content {
  width: 100%;
  max-width: none;
  padding-block: clamp(56px, 7vw, 118px);
  padding-left: clamp(34px, 7vw, 132px);
  padding-right: clamp(24px, 3vw, 72px);
  background: linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(248, 250, 246, .94));
}

body[data-page="booking"] .booking-content h1,
body[data-page="booking"] .booking-content h2 {
  max-width: 11ch;
  line-height: .93;
}

@media (min-width: 761px) {
  body[data-page="booking"] .booking-content h1,
  body[data-page="booking"] .booking-content h2 {
    max-width: none;
    white-space: nowrap;
  }
}

body[data-page="booking"] .booking-services { gap: 12px; }

body[data-page="booking"] .booking-service {
  min-height: 126px;
  padding: 24px 26px;
  border-color: var(--line);
  border-radius: 14px;
  box-shadow: inset 3px 0 0 transparent;
  transition: transform 360ms var(--ease-out), border-color 220ms ease, background-color 220ms ease, box-shadow 220ms ease;
}

body[data-page="booking"] .booking-service:hover:not(.selected),
body[data-page="booking"] .booking-service.selected {
  border-color: var(--ink);
  background: #f2f6f8;
  box-shadow: inset 3px 0 0 var(--lime);
  transform: translate3d(5px, 0, 0);
}

body[data-page="booking"] .booking-service small { color: var(--muted); }

body[data-page="booking"] .calendar,
body[data-page="booking"] .booking-summary {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .78);
}

body[data-page="booking"] .calendar { padding: 20px; }

body[data-page="booking"] .calendar-day:not(:disabled):hover,
body[data-page="booking"] .calendar-day.selected,
body[data-page="booking"] .slot.selected,
body[data-page="booking"] .slot:hover {
  background: var(--forest);
  border-color: var(--forest);
  color: #fff;
}

body[data-page="booking"] .booking-nav { gap: 14px; }

body[data-page="booking"] .booking-summary {
  padding: 24px;
  box-shadow: none;
}

body[data-page="booking"] .booking-confirmation-panel {
  border-color: var(--line);
  box-shadow: var(--shadow);
}

body[data-page="booking"] .booking-summary {
  border-left: 3px solid var(--lime);
}

body[data-page="booking"] .booking-confirmation-panel {
  background: var(--forest);
  color: #fff;
}

body[data-page="booking"] .booking-confirmation-panel p { color: rgba(255, 255, 255, .72); }


/* Admin */
body[data-page="admin"] { background: #f2f5f0; }

body[data-page="admin"] .auth-page {
  padding: 32px;
  background: radial-gradient(circle at 85% 10%, rgba(82, 189, 236, .45), transparent 25%), #edf3ea;
}

body[data-page="admin"] .auth-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

body[data-page="admin"] .admin-layout { background: #f2f5f0; }

body[data-page="admin"] .admin-side {
  background: var(--forest);
  border-right: 1px solid rgba(255,255,255,.1);
}

body[data-page="admin"] .admin-side nav { gap: 5px; }

body[data-page="admin"] .admin-side nav a,
body[data-page="admin"] .side-logout {
  border-radius: 10px;
  transition: transform 220ms var(--ease-out), background-color 180ms ease, color 180ms ease;
}

body[data-page="admin"] .admin-side nav a:hover,
body[data-page="admin"] .admin-side nav a.active,
body[data-page="admin"] .side-logout:hover {
  background: rgba(82, 189, 236, .14);
  color: #fff;
  transform: translate3d(3px, 0, 0);
}

body[data-page="admin"] .admin-side nav a {
  display: flex;
  align-items: center;
  gap: 11px;
}

body[data-page="admin"] .admin-side nav .nav-group-label {
  margin: 18px 0 6px;
  padding: 0 12px;
  color: rgba(247, 250, 246, .38);
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}

body[data-page="admin"] .admin-side nav .nav-group-label:first-child {
  margin-top: 2px;
}

body[data-page="admin"] .admin-main {
  width: min(1500px, 100%);
  padding: clamp(32px, 5vw, 72px);
}

body[data-page="admin"] .admin-card,
body[data-page="admin"] .stat-grid > div {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: none;
}

body[data-page="admin"] .admin-card { padding: clamp(22px, 3vw, 34px); }

body[data-page="admin"] .stat-grid > div {
  padding: 22px;
  background: rgba(255,255,255,.84);
}

body[data-page="admin"] .editor-preview-toolbar h2,
body[data-page="admin"] .admin-card h2 { letter-spacing: -.035em; }

body[data-page="admin"] .preview-canvas {
  border-color: var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  transition: none;
}

body[data-page="admin"] .preview-device,
body[data-page="admin"] .preview-refresh {
  border-radius: 999px;
  transition: transform 220ms var(--ease-out), background-color 180ms ease, color 180ms ease;
}

body[data-page="admin"] .preview-device:hover,
body[data-page="admin"] .preview-device.active,
body[data-page="admin"] .preview-refresh:hover {
  background: var(--forest);
  border-color: var(--forest);
  color: #fff;
  transform: translate3d(0, -2px, 0);
}

@media (max-width: 760px) {
  body[data-page="home"] .home-command .hero-content {
    min-width: 0;
    max-width: 100%;
  }

  body[data-page="home"] .home-command .hero-content h1 {
    max-width: 100%;
    font-size: clamp(3.35rem, 16vw, 5.35rem);
  }

  body[data-page="booking"] .booking-header,
  body[data-page="booking"] .booking-shell { width: 100%; }

  body[data-page="booking"] .booking-header {
    min-height: 74px;
    padding: 14px clamp(20px, 6vw, 28px);
  }

  body[data-page="booking"] .booking-shell {
    min-height: auto;
    border-radius: 0 0 18px 18px;
  }

  body[data-page="booking"] .booking-content {
    width: 100%;
    min-width: 0;
    max-width: none;
    padding: 46px clamp(20px, 6vw, 28px);
  }

  body[data-page="booking"] .booking-step,
  body[data-page="booking"] .booking-services,
  body[data-page="booking"] .booking-service-deck-page {
    min-width: 0;
    max-width: 100%;
  }

  body[data-page="booking"] .booking-service {
    width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    padding-inline: 20px;
  }

  body[data-page="booking"] .booking-service > span,
  body[data-page="booking"] .booking-service > small {
    min-width: 0;
  }

  body[data-page="booking"] .booking-service > b {
    max-width: 7.25rem;
    text-align: right;
    white-space: normal;
  }

  body[data-page="booking"] .booking-progress li { justify-content: center; gap: 0; }
  body[data-page="booking"] .booking-progress li.active::before { display: none; }

  body[data-page="admin"] .auth-page { padding: 20px; }
  body[data-page="admin"] .admin-main { padding: 30px 5%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .motion-ready .reveal {
    opacity: 0;
    translate: 0 12px;
    filter: blur(1.5px);
  }
  .motion-ready .reveal.in-view {
    opacity: 1;
    translate: 0 0;
    filter: blur(0);
  }
}

/* ==========================================================================
   Prepínač menu: tri čiarky, v otvorenom stave X
   Čiarky vkladá app.js, aby sa markup nemusel meniť na každej stránke.
   Názov tlačidla pre čítačky obrazovky nesie aria-label.
   ========================================================================== */
.menu-toggle {
  display: none;
  place-items: center;
  width: 44px; height: 44px;
  padding: 0;
  border: 0; border-radius: 999px;
  background: none;
  color: currentColor;
  cursor: pointer;
}
.menu-toggle-bars {
  position: relative;
  display: block;
  width: 22px; height: 16px;
}
.menu-toggle-bars i {
  position: absolute; left: 0;
  width: 100%; height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .42s cubic-bezier(.16, 1, .3, 1),
              opacity .2s ease,
              width .42s cubic-bezier(.16, 1, .3, 1);
}
.menu-toggle-bars i:nth-child(1) { top: 0; }
.menu-toggle-bars i:nth-child(2) { top: 7px; width: 70%; }
.menu-toggle-bars i:nth-child(3) { top: 14px; }

/* Otvorené: krajné čiarky sa zídu do stredu a prekrížia,
   prostredná sa vysunie doprava a zhasne. */
.site-header.nav-open .menu-toggle-bars i:nth-child(1) {
  transform: translate3d(0, 7px, 0) rotate(45deg);
}
.site-header.nav-open .menu-toggle-bars i:nth-child(2) {
  width: 100%;
  opacity: 0;
  transform: translate3d(14px, 0, 0);
}
.site-header.nav-open .menu-toggle-bars i:nth-child(3) {
  transform: translate3d(0, -7px, 0) rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
  .menu-toggle-bars i { transition-duration: .12s; }
}

/* ==========================================================================
   Oznámenie po odoslaní formulára
   Skryté je len vtedy, keď beží JavaScript (trieda motion-ready). Bez neho
   sa formulár odosiela postaru a oznámenie musí zostať rovno viditeľné.
   ========================================================================== */
.toast {
  max-width: min(420px, calc(100vw - 32px));
  cursor: pointer;
}
.motion-ready .toast {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity .3s ease, transform .4s cubic-bezier(.16, 1, .3, 1);
}
.motion-ready .toast.is-visible {
  opacity: 1;
  transform: none;
}

@supports (padding: max(0px)) {
  .toast {
    right: max(25px, env(safe-area-inset-right));
    bottom: max(25px, env(safe-area-inset-bottom));
  }
}

@media (max-width: 760px) {
  .toast {
    left: 12px; right: 12px;
    max-width: none;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .motion-ready .toast { transform: none; transition-duration: .12s; }
}