/* ============================================================
   services-skin-elegant.css
   Drop-in skin pre existujúci services.html/services.js shell.
   Nemení žiadnu triedu, ktorú used services.js na výber/stav —
   len vizuálne prekresľuje rovnaké svc-* triedy z reference.

   Použitie: pridať <link> na tento súbor ZA services-beauty.css
   (poradie rozhoduje, tento súbor prepisuje predvolený vzhľad).

   Farba akcentu sa nastavuje z dashboardu cez --svc-accent —
   tento skin ju len používa, nemá vlastnú natvrdo zapísanú farbu.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Outfit:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500&display=swap');

:root{
  --svc-bg:#faf7f4;
  --svc-panel:#fffdfb;
  --svc-panel-raised:#f2ece5;
  --svc-line:#e6dcd0;
  --svc-ink:#241c14;
  --svc-muted:#7d7166;
  --svc-faint:#b0a494;

  /* Default; SSR/JS override from dashboard (Farba webu) */

  --svc-font:"Outfit",-apple-system,sans-serif;
  --svc-font-display:"Fraunces",Georgia,serif;
  --svc-font-mono:"IBM Plex Mono",monospace;
}

/* Stage is a no-op for elegant/editorial; glass.css styles it. */
.svc-stage{ min-height:100%; }

.svc-site{
  background:var(--svc-bg);
  color:var(--svc-ink);
  border:1px solid var(--svc-line);
  border-radius:20px;
  overflow:hidden;
}
.svc-app{
  background:transparent;
  color:var(--svc-ink);
  font-family:var(--svc-font);
  border:none;
  border-radius:0;
  overflow:visible;
}
.svc-hero{ padding:26px 30px 12px 30px; }
.svc-hero .svc-eyebrow{
  font-family:var(--svc-font-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--svc-accent); margin:0 0 10px 0;
}
.svc-hero-brand{ align-items:center; gap:14px; }
.svc-logo{
  width:auto; height:auto; max-height:52px; max-width:min(168px, 42vw);
  border-radius:0; background:transparent; box-shadow:none;
}
.svc-hero h1{ font-family:var(--svc-font-display); font-size:22px; font-weight:600; margin:0 0 4px 0; }
.svc-hero .svc-sub{ font-size:12.5px; color:var(--svc-muted); margin:6px 0 0 0; }
.svc-site-footer{ padding:16px 30px 22px; }

/* ---- kroky rezervácie ---- */
.svc-head{ padding:8px 30px 16px 30px; border-bottom:1px solid var(--svc-line); }
.svc-eyebrow{
  font-family:var(--svc-font-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--svc-accent); margin:0 0 6px 0;
}
.svc-head h1{ font-family:var(--svc-font-display); font-size:22px; font-weight:600; margin:0 0 4px 0; }
.svc-sub{ font-size:12.5px; color:var(--svc-muted); margin:0 0 18px 0; }

.svc-steps{ display:flex; gap:0; list-style:none; padding:0; margin:0; }
.svc-steps li{
  flex:1; text-align:center; font-size:10.5px; color:var(--svc-faint);
  padding-bottom:10px; border-bottom:2px solid var(--svc-line); font-weight:600;
}
.svc-steps li.is-done{ color:var(--svc-accent); border-color:var(--svc-accent); }
.svc-steps li.is-active{ color:var(--svc-ink); border-color:var(--svc-accent); }
.svc-steps li.is-clickable{ cursor:pointer; }
.svc-steps li.is-clickable:hover{ opacity:.9; }

/* ---- hlavný obsah ---- */
.svc-main{ padding:28px 30px; min-height:200px; }
.svc-muted{ font-size:12.5px; color:var(--svc-faint); }
.svc-error{ font-size:13px; color:#b0473f; font-weight:600; margin-bottom:8px; }

/* ---- krok: služba ---- */
.svc-list{ display:flex; flex-direction:column; gap:10px; }
.svc-card{
  display:flex; justify-content:space-between; align-items:flex-start; gap:16px; background:var(--svc-panel);
  border:1.5px solid var(--svc-line); border-radius:13px; padding:16px 18px; cursor:pointer;
  text-align:left; width:100%; font-family:inherit; color:inherit;
}
.svc-card.is-selected{ border-color:var(--svc-accent); background:var(--svc-accent-dim); }
.svc-card-main{ flex:1 1 auto; min-width:0; }
.svc-card strong{ font-family:var(--svc-font-display); font-size:15px; font-weight:600; display:block; margin-bottom:3px; }
.svc-card em{ font-style:normal; font-size:12px; color:var(--svc-muted); display:block; }
.svc-card .svc-meta{
  font-family:var(--svc-font-mono); font-size:12px; color:var(--svc-ink);
  margin:2px 0 0; white-space:nowrap; flex:0 0 auto; text-align:right;
}
.svc-card .svc-meta-extras{
  font-family:var(--svc-font-mono); font-size:10.5px; font-weight:500;
  color:var(--svc-muted); letter-spacing:.02em;
}

/* Varianty / doplnky — rovnaká typografia ako karty služieb */
.svc-extras{ margin-top:18px; }
.svc-extras-toggle{
  border:1.5px solid var(--svc-line); background:var(--svc-panel);
  border-radius:999px; font-family:var(--svc-font); font-size:12.5px; font-weight:600;
  color:var(--svc-ink); padding:8px 14px 8px 10px;
}
.svc-extras-toggle.is-open{
  border-color:color-mix(in srgb, var(--svc-accent) 50%, var(--svc-line));
  background:var(--svc-accent-dim);
}
.svc-extras-plus{
  background:var(--svc-panel-raised); color:var(--svc-accent);
  font-family:var(--svc-font-mono); font-weight:600;
}
.svc-extras-hint{
  font-family:var(--svc-font-mono); font-size:10px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--svc-faint); font-weight:500;
}
.svc-extras-body{
  margin-top:14px; padding:14px 16px; border-radius:13px;
  border:1.5px solid var(--svc-line); background:var(--svc-panel);
}
.svc-variant-group h4,
.svc-addons h3,
.svc-addons h4{
  font-family:var(--svc-font-display); font-size:14px; font-weight:600;
  margin:0 0 10px 0; color:var(--svc-ink); text-transform:none; letter-spacing:-0.01em;
}
.svc-addons{ margin-top:20px; padding-top:18px; border-top:1px dashed var(--svc-line); }
.svc-check{
  display:flex; align-items:flex-start; gap:10px; font-size:13.5px;
  padding:10px 0; cursor:pointer; border-top:1px solid var(--svc-line);
  font-family:var(--svc-font); color:var(--svc-ink);
}
.svc-check:first-of-type{ border-top:0; }
.svc-check input{ accent-color:var(--svc-accent); width:16px; height:16px; margin-top:3px; }
.svc-check-name{
  font-family:var(--svc-font-display); font-size:14px; font-weight:600; line-height:1.35;
}
.svc-check-meta{
  font-family:var(--svc-font-mono); font-size:12px; font-weight:500; color:var(--svc-muted);
}

/* ---- krok: personál ---- */
.svc-staff-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.svc-staff{
  background:var(--svc-panel); border:1.5px solid var(--svc-line); border-radius:13px;
  padding:16px 10px; text-align:center; cursor:pointer; font-family:inherit; color:inherit;
}
.svc-staff.is-selected{ border-color:var(--svc-accent); background:var(--svc-accent-dim); }
.svc-avatar{
  width:52px; height:52px; border-radius:50%; margin:0 auto 10px auto; overflow:hidden;
  background:var(--svc-panel-raised); display:flex; align-items:center; justify-content:center;
}
.svc-avatar img{ width:100%; height:100%; object-fit:cover; }
.svc-staff strong{ display:block; font-family:var(--svc-font-display); font-size:13.5px; font-weight:600; }
.svc-staff span{ font-size:10.5px; color:var(--svc-muted); }

/* ---- krok: dátum ---- */
.svc-cal-nav{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; font-family:var(--svc-font-display); font-size:14px; font-weight:600; }
.svc-cal-nav button{ background:var(--svc-panel-raised); border:1px solid var(--svc-line); border-radius:8px; width:30px; height:30px; cursor:pointer; font-size:14px; }
.svc-cal{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.svc-cal-head{ text-align:center; font-size:10.5px; color:var(--svc-faint); font-weight:700; padding-bottom:6px; }
.svc-day{
  aspect-ratio:1; border:1px solid var(--svc-line); background:var(--svc-panel); border-radius:9px;
  font-family:inherit; font-size:12.5px; cursor:pointer; color:var(--svc-ink);
}
.svc-day.is-closed{ background:var(--svc-panel-raised); color:var(--svc-faint); border-style:dashed; }
.svc-day.is-selected{ border-color:var(--svc-accent); background:var(--svc-accent); color:var(--svc-accent-ink, #fff); font-weight:700; }
.svc-day:disabled{ opacity:.4; cursor:not-allowed; }

/* ---- krok: čas ---- */
.svc-slots{ display:flex; flex-wrap:wrap; gap:9px; }
.svc-slot{
  font-family:inherit; font-size:12.5px; font-weight:600; padding:10px 16px; border-radius:999px;
  border:1.5px solid var(--svc-line); background:var(--svc-panel); cursor:pointer; color:var(--svc-ink);
}
.svc-slot.is-selected{ border-color:var(--svc-accent); background:var(--svc-accent); color:var(--svc-accent-ink, #fff); }

/* ---- fitness: sedenia so zvyšnou kapacitou ---- */
.svc-sessions-wrap .svc-slot{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:12px 16px; }
.svc-seats{ font-size:10.5px; font-weight:500; opacity:.8; }

/* ---- krok: kontakt ---- */
.svc-summary{ background:var(--svc-panel-raised); border-radius:11px; padding:14px 16px; font-size:13px; margin-bottom:14px; }
.svc-summary strong{ font-family:var(--svc-font-display); }
.svc-deposit{ font-size:12px; color:var(--svc-muted); background:var(--svc-accent-dim); border-radius:9px; padding:10px 13px; margin-bottom:16px; }
.svc-form{ display:flex; flex-direction:column; gap:14px; }
.svc-form label{ font-size:11.5px; font-weight:600; color:var(--svc-muted); display:flex; flex-direction:column; gap:6px; }
.svc-form .svc-consent,
.svc-form .svc-consent > label{
  flex-direction:row !important;
  align-items:flex-start !important;
  gap:10px !important;
  font-weight:500;
}
.svc-form .svc-consent > label{ display:block !important; flex:1 1 auto; }
.svc-form input, .svc-form textarea{
  font-family:var(--svc-font); font-size:13.5px; color:var(--svc-ink); background:var(--svc-panel);
  border:1px solid var(--svc-line); border-radius:9px; padding:11px 13px;
}

/* ---- krok: hotovo ---- */
.svc-success{ text-align:center; padding:20px 0; }
.svc-success h2{ font-family:var(--svc-font-display); font-size:22px; font-weight:600; margin:0 0 6px 0; }
.svc-code{
  font-family:var(--svc-font-mono); font-size:20px; font-weight:700; color:var(--svc-accent);
  background:var(--svc-accent-dim); display:inline-block; padding:8px 18px; border-radius:10px; margin-top:12px;
}

/* ---- pätička ---- */
.svc-foot{ display:flex; align-items:center; padding:18px 30px; border-top:1px solid var(--svc-line); }
.svc-foot-spacer{ flex:1; }
.svc-btn{ font-family:inherit; font-size:13px; font-weight:700; padding:11px 22px; border-radius:10px; border:none; cursor:pointer; }
.svc-btn-primary{ background:var(--svc-accent); color:var(--svc-accent-ink, #fff); }
.svc-btn-ghost{ background:none; border:1px solid var(--svc-line); color:var(--svc-muted); }