/* Vzhľad objednávkovej stránky.
   Prevzatý z webu klientky bodytherapy.sk: písmo Montserrat, čierno-biela
   základňa a zlatý akcent #8D6903. Písané pre mobil — väčšina klientov
   príde z telefónu.

   POZNÁMKA K PÍSMU: Montserrat sa načítava z NÁŠHO servera, nie z Google
   Fonts. Načítanie z Googlu by posielalo IP adresu každého návštevníka
   do USA, čo je pri GDPR zbytočný problém. Súbory písma sú v priečinku
   `pismo/` (licencia SIL Open Font License, voľne použiteľné). */

@font-face {
  font-family: 'Montserrat';
  src: url('pismo/montserrat-latin.woff2') format('woff2');
  font-weight: 100 900;            /* variabilné písmo — jeden súbor, všetky hrúbky */
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  src: url('pismo/montserrat-latin-ext.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  /* Táto podmnožina obsahuje slovenskú diakritiku - l s makcenom, t, d, n, o, a. */
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --zlata: #8D6903;
  --zlata-svetla: #a67f0d;
  --cierna: #0a0a0a;
  --text: #1a1a1a;
  --seda: #5f6360;
  --ciara: #e8e6e1;
  --pozadie: #ffffff;
  --pozadie-jemne: #faf9f7;
  --cervena: #b91c1c;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
  color: var(--text);
  background: var(--pozadie);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.obal {
  max-width: 620px;
  margin: 0 auto;
  padding: 24px 20px 56px;
}

/* Hlavička v duchu webu — vzdušná, s tenkou zlatou linkou */
header {
  padding: 28px 20px 22px;
  text-align: center;
  border-bottom: 1px solid var(--ciara);
}
header /* Nadpis vedie späť na objednávanie — klient sa z ktorejkoľvek podstránky
   (poukaz, čakacia listina, overenie kódu) dostane na začiatok jedným
   klepnutím. Petrova pripomienka 30. 8. 2026. */
.znacka a { color: inherit; text-decoration: none; }
/* Podnadpis je odkaz spat na zaciatok objednavania. Bez tychto dvoch
   vlastnosti by zdedil predvoleny vzhlad odkazu — modry a podciarknuty —
   presne ako sa to stalo tlacidlam v administracii. */
header .podnadpis a { color: inherit; text-decoration: none; }

.znacka {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--cierna);
}
header .linka {
  width: 40px;
  height: 2px;
  background: var(--zlata);
  margin: 12px auto 10px;
}
header .podnadpis {
  margin: 0;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--seda);
}

/* Kroky objednávky */
.kroky {
  display: flex;
  gap: 4px;
  margin: 26px 0 28px;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--seda);
}
.kroky span {
  flex: 1;
  padding: 8px 2px;
  text-align: center;
  border-bottom: 2px solid var(--ciara);
}
.kroky .teraz { color: var(--zlata); border-bottom-color: var(--zlata); font-weight: 600; }
.kroky .hotovo { color: var(--cierna); border-bottom-color: var(--cierna); }

h2 {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0 0 18px;
  color: var(--cierna);
}

/* Nadpis kategórie */
h3.kategoria {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--zlata);
  margin: 30px 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ciara);
}
h3.kategoria:first-of-type { margin-top: 6px; }

/* Zoznam volieb */
.volby { display: grid; gap: 1px; background: var(--ciara); margin-bottom: 28px; }

.volba {
  display: block;
  background: var(--pozadie);
  padding: 18px 4px;
  text-decoration: none;
  color: inherit;
  transition: background .15s, padding-left .15s;
}
.volba .nazov { font-weight: 600; font-size: 16px; }
/* Ďalšia dĺžka tej istej služby — odsadená, aby bolo vidieť, že patrí k nej */
.volba.pokracovanie { padding-top: 12px; padding-bottom: 12px; }
.volba.pokracovanie .popis { padding-left: 14px; }
.volba .popis { color: var(--seda); font-size: 13px; letter-spacing: .5px; margin-top: 3px; }
.volba .cena  { float: right; font-weight: 600; color: var(--zlata); font-size: 15px; }

/* Výber terapeutky: rámik a výzva, aby bolo jasné, že sa na meno kliká
   (Katka, 12. 10. 2026 — klienti meno bez rámika nepreklikli). */
.volby:has(.terapeutka) { background: none; gap: 12px; }
.volba.terapeutka {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--zlata);
  border-radius: 999px;
  padding: 16px 24px;
}
.volba.terapeutka .vybrat {
  color: var(--zlata);
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Kalendár */
.kalendar { margin-bottom: 28px; }

.kal-hlavicka {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0 14px;
}
.kal-hlavicka strong {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.kal-hlavicka a, .kal-hlavicka .neaktivne {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  font-size: 22px;
  text-decoration: none;
  color: var(--cierna);
  border: 1px solid var(--ciara);
}
.kal-hlavicka .neaktivne { color: #d4d0c8; border-color: #f0eeea; }

.kal-dni-tyzdna, .kal-mriezka {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.kal-dni-tyzdna {
  margin-bottom: 6px;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--seda);
  text-align: center;
}

.kal-den {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  font-size: 15px;
  text-decoration: none;
  border: 1px solid transparent;
}
.kal-prazdne { aspect-ratio: 1; }

.kal-den.obsadeny { color: #cfcbc4; }
.kal-den.volny {
  color: var(--cierna);
  font-weight: 600;
  border-color: var(--ciara);
  transition: all .12s;
}
.kal-den.vybrany { background: var(--zlata); color: #fff; border-color: var(--zlata); }
.kal-den.dnes { text-decoration: underline; text-underline-offset: 3px; }

.bodka {
  position: absolute;
  bottom: 6px; left: 50%;
  transform: translateX(-50%);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--zlata);
}
.kal-legenda {
  display: flex; align-items: center; gap: 8px;
  margin: 14px 0 0;
  font-size: 12px;
  color: var(--seda);
}
.kal-legenda .bodka { position: static; transform: none; }

/* Časy vybraného dňa */
.den-nadpis {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--seda);
  margin: 26px 0 12px;
  padding-top: 20px;
  border-top: 1px solid var(--ciara);
}
.casy { display: flex; flex-wrap: wrap; gap: 8px; }
.cas {
  display: inline-block;
  background: var(--pozadie);
  border: 1px solid var(--ciara);
  padding: 11px 16px;
  text-decoration: none;
  color: var(--cierna);
  font-weight: 600;
  font-size: 15px;
  min-width: 76px;
  text-align: center;
  transition: all .15s;
}
.ziadne { color: var(--seda); font-size: 14px; margin-top: 20px; }

/* Formulár */
form { border-top: 1px solid var(--ciara); padding-top: 20px; }
label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--seda);
  margin: 18px 0 6px;
}
label:first-of-type { margin-top: 0; }

/* Keď je `<label>` OBAL okolo zaškrtávacieho políčka (deň v týždni, doplnok,
   navrhnutý termín), horný okraj z pravidla vyššie mu nepatrí — a prvý z nich
   ho má navyše vynulovaný cez `:first-of-type`, takže vyzerá inak než ostatné.
   Presne tak 30. 8. 2026 vyskočil pondelok nad ostatné dni. */
label > input[type="checkbox"],
label > input[type="radio"] { margin: 0; }
label:has(> input[type="checkbox"]),
label:has(> input[type="radio"]) { margin-top: 0; }
input[type=text], input[type=tel], input[type=email], textarea {
  width: 100%;
  padding: 12px 0;
  font-size: 16px; /* 16px zabráni tomu, aby iPhone pri písaní priblížil stránku */
  font-family: inherit;
  color: var(--text);
  border: 0;
  border-bottom: 1px solid var(--ciara);
  border-radius: 0;
  background: transparent;
}
input:focus, textarea:focus { outline: none; border-bottom-color: var(--zlata); }
textarea { min-height: 70px; resize: vertical; }
.pomoc { font-size: 12px; color: var(--seda); margin-top: 6px; letter-spacing: .3px; }

/* Voliteľný doplnok k ošetreniu */
label.doplnok {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 10px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--ciara);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
  cursor: pointer;
}
label.doplnok input { margin-top: 3px; accent-color: var(--zlata); }
label.doplnok strong { color: var(--zlata); white-space: nowrap; }
label.doplnok em { display: block; font-size: 12px; color: var(--seda); font-style: normal; }

.doplnok-potvrdenie { color: var(--zlata); font-size: 15px; }

.suhlas {
  display: flex; gap: 10px; align-items: flex-start;
  margin-top: 24px; font-size: 13px; color: var(--seda); line-height: 1.5;
}
.suhlas input { margin-top: 3px; accent-color: var(--zlata); }

button {
  width: 100%;
  margin-top: 26px;
  padding: 16px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #fff;
  background: var(--cierna);
  border: 0;
  cursor: pointer;
  transition: background .15s;
}

/* Zhrnutie vybraného */
.zhrnutie {
  border-left: 2px solid var(--zlata);
  padding: 4px 0 4px 16px;
  margin-bottom: 26px;
  font-size: 15px;
}
.zhrnutie div { margin: 2px 0; }
.zhrnutie .hlavne { font-weight: 600; }
.zhrnutie .doplnok { color: var(--seda); font-size: 14px; }

.chyba {
  border-left: 2px solid var(--cervena);
  background: #fdf5f5;
  color: var(--cervena);
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: 14px;
}

.hotovo-box { text-align: center; padding: 32px 0; }
.hotovo-box .znak {
  width: 44px; height: 44px; margin: 0 auto 20px;
  border: 2px solid var(--zlata); border-radius: 50%;
  line-height: 40px; color: var(--zlata); font-size: 20px;
}
.hotovo-box h2 { color: var(--zlata); }
.hotovo-box p { font-size: 16px; }

.spat {
  display: inline-block; margin-bottom: 18px;
  color: var(--seda); text-decoration: none;
  font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
}

footer {
  margin-top: 44px;
  padding-top: 20px;
  border-top: 1px solid var(--ciara);
  font-size: 12px;
  line-height: 1.8;
  color: var(--seda);
  text-align: center;
  letter-spacing: .5px;
}
footer a { color: var(--seda); text-decoration: none; }

/* Darčekový poukaz — výber hodnoty */
.uvod { font-size: 15px; color: var(--seda); margin: 0 0 24px; }
.hodnoty { display: flex; gap: 8px; margin-bottom: 4px; }
.hodnota { flex: 1; margin: 0; }
.hodnota input { position: absolute; opacity: 0; }
.hodnota span {
  display: block; padding: 16px 8px; text-align: center;
  border: 1px solid var(--ciara); font-size: 17px; font-weight: 600;
  cursor: pointer; transition: all .15s;
}
.hodnota input:checked + span { border-color: var(--zlata); color: var(--zlata); background: #fdfbf5; }

/* Platobný QR kód */
.platobny-qr { display: flex; justify-content: center; margin: 8px 0 4px; }
.platobny-qr svg { width: 220px; height: 220px; }

/* Odkaz na darčekové poukazy v pätičke. */
.odkaz-poukaz {
  display: inline-block;
  padding: 8px 18px;
  border: 1px solid #8D6903;
  border-radius: 999px;
  color: #8D6903;
  text-decoration: none;
  font-size: 14px;
}

/* Čakacia listina. */
.ziadne-volno {
  text-align: center;
  padding: 18px 12px;
  margin-top: 14px;
  background: #faf8f4;
  border-radius: 10px;
}
.ziadne-volno p { margin: 0 0 12px; color: #5f6360; font-size: 15px; }

/* Sedem dní ako mriežka siedmich ROVNAKÝCH buniek — nie plávajúce pilulky.
   Pri plávaní sa jeden deň zalomil na druhý riadok a pondelok bol navyše
   vyšší než ostatné: `.den` je `<label>` a všeobecné pravidlo pre `label` mu
   pridávalo horný okraj, ktorý mal prvý vynulovaný cez `:first-of-type`.
   Preto sa tu okraj nuluje výslovne. */
.dni-vyber {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
  margin: 6px 0 4px;
}
.dni-vyber .den {
  display: flex;
  flex-direction: column;   /* políčko nad skratkou — sedem stĺpcov je úzkych */
  align-items: center;
  justify-content: center;
  gap: 3px;
  margin: 0;
  padding: 8px 2px;
  min-width: 0;
  border: 1px solid #e6e3dd;
  border-radius: 10px;
  font-size: 12px;
  letter-spacing: 0;
  cursor: pointer;
  background: #fff;
}
.dni-vyber .den input { margin: 0; }
.dni-vyber .den:has(input:checked) {
  border-color: #8D6903;
  color: #8D6903;
  background: #faf8f4;
}


/* Právny dokument (ochrana osobných údajov). Číta sa na telefóne, takže
   krátke riadky a jasne oddelené kapitoly — nie hustý blok textu. */
.dokument { max-width: 62ch; text-align: left; }
.dokument h2 {
  font-size: 13px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--zlata, #8D6903); margin: 30px 0 8px; padding-top: 16px;
  border-top: 1px solid #e6e3dd;
}
.dokument p, .dokument li { line-height: 1.65; }
.dokument ul { padding-left: 20px; }
.dokument li { margin-bottom: 8px; }
.dokument .preco { color: #6b7280; }
.dokument-tabulka { width: 100%; border-collapse: collapse; margin: 10px 0; }
.dokument-tabulka th {
  text-align: left; vertical-align: top; padding: 10px 10px 10px 0;
  border-bottom: 1px solid #e6e3dd; width: 34%;
  font-size: 13px; font-weight: 600;
}
.dokument-tabulka td { padding: 10px 0; border-bottom: 1px solid #e6e3dd; }
.dokument-datum { color: #6b7280; font-size: 13px; margin-top: 28px; }


/* Skúšobný režim na verejnej stránke — klient musí vedieť, že mu nič nepríde. */
.skusobny-rezim {
  background: #fdf8f1; border-bottom: 2px solid #b45309;
  color: #7a4d08; padding: 10px 16px; font-size: 13px; text-align: center;
}

/* ---------------------------------------------------------------
   PRESVIETENIE MYŠOU LEN TAM, KDE MYŠ NAOZAJ JE.

   Na dotykovom displeji `:hover` po klepnutí OSTANE zapnutý, kým
   človek neklepne inam. Tlačidlo „+ Zapísať termín" tak bolo raz
   čierne a raz zlaté a vyzeralo to ako náhodná chyba — Peter si to
   všimol na dvoch snímkach z tej istej minúty. (1. 9. 2026)

   `@media (hover: hover)` je jediné miesto, kde tieto pravidlá platia;
   na telefóne sa neuplatnia vôbec, takže sa vzhľad po dotyku nemení.
   --------------------------------------------------------------- */
@media (hover: hover) {
  .znacka a:hover { color: var(--zlata, #8D6903); }
  header .podnadpis a:hover { color: var(--zlata, #8D6903); }
  .volba:hover, .volba:focus {
    background: var(--pozadie-jemne);
    padding-left: 12px;
  }
  /* Rámik terapeutky sa pri prejdení myšou neposúva, len zosvetlí. */
  .volba.terapeutka:hover, .volba.terapeutka:focus { padding-left: 24px; }
  .kal-hlavicka a:hover { background: var(--cierna); color: #fff; border-color: var(--cierna); }
  .kal-den.volny:hover, .kal-den.volny:focus {
    background: var(--cierna);
    color: #fff;
    border-color: var(--cierna);
  }
  .kal-den.volny:hover .bodka, .kal-den.volny.vybrany .bodka { background: #fff; }
  .cas:hover, .cas:focus {
    background: var(--cierna);
    color: #fff;
    border-color: var(--cierna);
  }
  label.doplnok:hover { border-color: var(--zlata); }
  button:hover { background: var(--zlata); }
  .spat:hover { color: var(--zlata); }
  footer a:hover { color: var(--zlata); }
  .hodnota span:hover { border-color: var(--zlata); }
  .odkaz-poukaz:hover { background: #8D6903; color: #fff; }
}