/* ANNY studio — /m, kartová verzia pre mobil. Farby a písmo preberá styles.css.
   Pravidlá (Rasťo 25.9.2026):
   - Úvodná karta sa zmestí na jednu obrazovku, bez posúvania.
   - Samostatná karta sa smie posúvať, ak je dlhšia — posúva sa CELÁ stránka
     naraz, nikdy nie len časť obrazovky.
   - Pevný je len tenký pásik s ikonami dole (vzor bemclt.sk /m).
   Výška obrazovky ide z --vh (m.js, window.visualViewport) — samotné 100dvh
   na reálnych telefónoch nesedí so skutočne viditeľnou plochou (skúsenosť
   z velios-web app/m/Koncept.tsx, Samsung Internet a iPhone). */
.m-body { margin: 0; background: var(--paper); }

.m-app { min-height: 100vh; min-height: var(--vh, 100dvh); display: flex; flex-direction: column; }

.m-hlava {
  position: sticky; top: 0; z-index: 30; background: var(--paper);
  flex: 0 0 auto;
  padding: 12px 20px;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.m-logo img { display: block; border-radius: 0; }
.m-hlava-prava { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.m-hlava-prava a:not([hreflang]) { line-height: 1.15; text-align: right; }
.m-hlava-prava a { color: var(--ink); text-decoration: none; }
.m-hlava-social { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.m-hlava-social a { display: flex; color: var(--ink); }

.m-odkaz {
  background: none; border: 0; color: var(--ink); font-size: 14px;
  text-decoration: underline; text-underline-offset: 3px; padding: 0; cursor: pointer;
  font-family: inherit;
}

.m-main {
  flex: 1 0 auto; display: flex; flex-direction: column; gap: 12px;
  padding: 14px 20px 16px; width: 100%; max-width: 560px; margin: 0 auto; box-sizing: border-box;
}
/* Úvod: fotka vyplní celú plochu medzi hlavičkou a pásikom. */
.m-main.je-uvod { padding: 0; max-width: none; }

.m-pata:not(:empty) { border-top: 1px solid var(--line); padding: 10px 20px 14px; }
.m-pata-in { max-width: 560px; margin: 0 auto; }

/* Jediný pevný prvok — pásik s rýchlym kontaktom (vzor bemclt.sk /m).
   Len ikony, popis pre čítačky cez aria-label. */
.m-bar {
  position: sticky; bottom: 0; z-index: 5;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--paper); border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.m-bar a, .m-bar button {
  display: flex; align-items: center; justify-content: center;
  padding: 11px 4px; border: 0; background: none; color: var(--ink); text-decoration: none;
  font-family: inherit; cursor: pointer;
}
.m-bar-ic { font-size: 21px; line-height: 1; }

/* Úvodná fotka na celú plochu, text a ovládanie priamo na nej (vzor bemclt.sk /m). */
.m-hero {
  position: relative; flex: 1 0 auto; overflow: hidden; color: #fff;
  display: flex; flex-direction: column; justify-content: flex-end;
}
/* nivora-hero-m.webp je už orezaná tak, že tvár je hore (nie tá istá
   fotka ako index.html) — object-position len center, netreba dolaďovať
   ako predtým 60%/30% (fotka bola príliš široká, tvár miznúť pod textom). */
.m-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; }
.m-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(22,24,26,.10) 0%, rgba(22,24,26,.35) 35%, rgba(22,24,26,.86) 70%, rgba(22,24,26,.92) 100%);
}
.m-hero-text { position: relative; z-index: 2; padding: 22px 20px 16px; display: flex; flex-direction: column; gap: 12px; }
.m-hero .eyebrow { color: #e6e4e1; margin: 0; font-size: 11px; letter-spacing: .12em; }
.m-hero h1 { color: #fff; font-size: 24px; line-height: 1.2; margin: -4px 0 2px; font-weight: 400; }

.m-uvod-akcie { display: grid; grid-template-columns: 1.35fr 1fr; gap: 8px; }
.m-uvod-btn {
  border-radius: 10px; padding: 12px 12px; font-size: 15px; line-height: 1.2; text-align: center;
  font-family: inherit; cursor: pointer; border: 1px solid rgba(255,255,255,.6); background: transparent; color: #fff;
}
.m-uvod-btn.je-hlavne { background: #fff; border-color: #fff; color: var(--ink); }

.m-hero .m-cipy { margin: 0; }
.m-hero .m-cip { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.45); color: #fff; }
.m-hero .m-pole { border-color: #fff; }
.m-hero .m-pole-pozn { color: #d5d7da; margin-top: -6px; }

/* Dlaždice */
.m-dlazdice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.m-dlazdica {
  border: 1px solid var(--line); background: var(--paper); border-radius: var(--radius);
  padding: 15px 14px; font-size: 15px; text-align: left; color: var(--ink);
  transition: border-color .15s; font-family: inherit; cursor: pointer;
}
.m-dlazdica:hover { border-color: var(--ink); }
.m-dlazdica small { display: block; margin-top: 5px; font-size: 12.5px; line-height: 1.4; color: var(--muted); font-weight: 400; }
.m-dlazdica.je-aktivna { background: var(--ink); color: #fff; border-color: var(--ink); }
.m-dlazdica.je-aktivna small { color: #c9ccd0; }

/* Karta */
.m-karta { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px; background: var(--mist); }
.m-karta h3 { font-size: 18px; margin: 0 0 6px; color: var(--ink); font-weight: 400; }
.m-karta p { margin: 0 0 8px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.m-oznacenie { display: inline-block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }

.m-riadok { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
.m-riadok.je-prvy { border-top: none; }
.m-riadok-odsadeny { margin-top: 10px; }
.m-cena { color: var(--ink); font-weight: 600; white-space: nowrap; text-align: right; }
.m-cena.je-volne { white-space: normal; font-weight: 400; }
.m-cena-odkaz { color: inherit; }

.m-riadok-vyber {
  width: 100%; background: none; border: 0; border-top: 1px solid var(--line);
  text-align: left; cursor: pointer; font-family: inherit;
}
.m-riadok-vyber.je-prvy { border-top: none; }
.m-riadok-vyber:hover { color: var(--ink); }
.m-riadok-vyber.je-vybrane { background: var(--paper); border-radius: 8px; margin: 0 -10px; padding: 7px 10px; width: calc(100% + 20px); border-top-color: transparent; }
.m-riadok-vyber.je-vybrane span:first-child { color: var(--ink); }
.m-otazka { margin: 0 0 4px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.m-poznamka { font-size: 12.5px; line-height: 1.4; color: var(--muted); border-top: 1px solid var(--line); padding-top: 8px; margin-top: 10px; }
.m-poznamka.m-chyba { color: #b3413a; border-top-color: #e0958a; }

/* Nevidí a nevypĺňa ho nikto skutočný — pasca na roboty (Code.gs, payload.website). */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.m-akcie { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.m-akcie-odsadene { margin-top: 6px; }
.m-akcie-stlpec { flex-direction: column; align-items: stretch; }
.m-akcie-stlpec .m-btn { justify-content: center; }
.m-btn {
  display: inline-flex; align-items: center; gap: 8px; border-radius: 10px; padding: 12px 16px;
  font-size: 14px; text-decoration: none; border: 1px solid var(--ink); background: transparent;
  color: var(--ink); font-family: inherit; cursor: pointer;
}
.m-btn-primary { background: var(--ink); color: #fff; }

.m-cipy { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 10px; }
.m-cip {
  border: 1px solid var(--line); background: var(--paper); border-radius: 10px; padding: 8px 10px;
  font-size: 12.5px; line-height: 1.25; text-align: left; color: var(--ink); font-family: inherit; cursor: pointer;
}
.m-cip:hover { border-color: var(--ink); }

.m-pole { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 999px; padding: 5px 5px 5px 16px; background: var(--paper); }
.m-pole input { flex: 1; min-width: 0; border: 0; outline: none; font-size: 16px; background: transparent; color: var(--ink); font-family: inherit; }
.m-pole button { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--ink); color: #fff; font-size: 16px; flex-shrink: 0; cursor: pointer; }
.m-pole-pozn { font-size: 11.5px; color: var(--muted-2); margin: 6px 4px 0; }
.m-cipy-pole { margin-bottom: 8px; }

.m-vstup { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; font-size: 16px; background: var(--paper); margin-top: 6px; font-family: inherit; color: var(--ink); }
.m-stitok { font-size: 13px; color: var(--ink-2); display: block; margin-top: 12px; }

.m-spat {
  background: none; border: 0; color: var(--muted); font-size: 13px; padding: 2px 0;
  display: inline-flex; align-items: center; gap: 6px; font-family: inherit; cursor: pointer;
}
.m-spat:hover { color: var(--ink); }
.m-odkaz-male { font-size: 12.5px; }

/* ---------- Rezervácia priamo v /m ---------- */
.m-krok { margin: 0 0 4px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.m-karta p.m-karta-pozn { margin: -2px 0 6px; font-size: 13px; }
.m-btn-plna { width: 100%; justify-content: center; }
.m-btn:disabled { opacity: .4; cursor: not-allowed; }
.m-zaskrt { display: inline-block; width: 18px; color: var(--muted); }
.m-riadok-vyber.je-vybrane .m-zaskrt { color: var(--ink); }
.m-riadok-vyber { color: var(--ink-2); }

.m-kategoria { margin: 12px 0 2px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.m-skupina { border-top: 1px solid var(--line); }
.m-skupina-dalsie { margin-top: 14px; }
.m-skupina > summary {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 8px 0; font-size: 14px; color: var(--ink); cursor: pointer; list-style: none;
}
.m-skupina > summary::-webkit-details-marker { display: none; }
.m-skupina > summary::after { content: "+"; font-size: 18px; color: var(--muted); }
.m-skupina[open] > summary::after { content: "–"; }
.m-spolu {
  display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; padding-top: 10px;
  border-top: 1px solid var(--ink); font-size: 14px; font-weight: 600; color: var(--ink);
}

.m-suhrn-box { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 2px 12px; margin: 8px 0 4px; }
.m-suhrn-box .m-riadok { font-size: 13px; }

.m-volby { display: grid; gap: 8px; margin-top: 10px; }
.m-volba {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; text-align: left;
  border: 1px solid var(--line); border-radius: 10px; background: var(--paper);
  font-family: inherit; font-size: 15px; color: var(--ink); cursor: pointer;
}
.m-volba small { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.m-volba.je-vybrana { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.m-volba-znak { width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; background: var(--mist-2); display: grid; place-items: center; font-size: 12px; }

.m-rezim { display: inline-flex; gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; margin: 8px 0 10px; }
.m-rezim-btn {
  border: 0; background: transparent; color: var(--muted); font-size: 13px; font-family: inherit;
  padding: 6px 14px; border-radius: 999px; cursor: pointer;
}
.m-rezim-btn.je-aktivny { background: var(--ink); color: #fff; }

.m-mesiac-hlavicka { display: grid; grid-template-columns: repeat(7, 1fr); margin-top: 4px; }
.m-mesiac-hlavicka span { text-align: center; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.m-mesiac-mriezka { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-top: 4px; }
.m-mesiac-den {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 8px; background: var(--paper);
  font-family: inherit; font-size: 13px; color: var(--ink); cursor: pointer;
}
.m-mesiac-den:disabled { border-color: transparent; color: var(--muted-2); cursor: not-allowed; }
.m-mesiac-den.je-iny { color: var(--muted-2); opacity: .5; }
.m-mesiac-den.je-dnes { border-color: var(--ink); font-weight: 700; }

.m-tyzden { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 0 10px; }
.m-tyzden p { margin: 0; font-size: 14px; color: var(--ink); text-align: center; }
.m-tyzden button {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; border: 1px solid var(--line);
  background: var(--paper); color: var(--ink); font-size: 16px; cursor: pointer; font-family: inherit;
}
.m-tyzden button:disabled { opacity: .3; cursor: not-allowed; }
.m-dni { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.m-den {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--paper);
  font-family: inherit; font-size: 14px; color: var(--ink); cursor: pointer;
}
.m-den small { font-size: 11px; color: var(--muted); }
.m-den.je-vybrany { background: var(--ink); border-color: var(--ink); color: #fff; }
.m-den.je-vybrany small { color: #c9ccd0; }
.m-den:disabled { opacity: .35; cursor: not-allowed; }
.m-casy { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.m-cas {
  padding: 12px 0; border: 1px solid var(--ink); border-radius: 10px; background: var(--paper);
  font-family: inherit; font-size: 15px; color: var(--ink); cursor: pointer;
}
.m-cas:disabled { border-color: var(--line); background: transparent; color: var(--muted-2); text-decoration: line-through; cursor: not-allowed; }

.m-form label { display: block; margin-top: 10px; font-size: 13px; color: var(--ink-2); }
.m-form .m-vstup { box-sizing: border-box; margin-top: 4px; }
.m-form textarea.m-vstup { resize: vertical; }
.m-suhlas { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; }
.m-suhlas input { width: 20px; height: 20px; margin: 1px 0 0; flex-shrink: 0; }
.m-form .m-suhlas label { margin: 0; line-height: 1.4; }
.m-znenie { margin: 6px 0 0 30px; }
.m-znenie > summary { font-size: 13px; color: var(--ink); text-decoration: underline; cursor: pointer; }
.m-znenie > div { margin-top: 6px; }
.m-karta .m-znenie p { font-size: 12.5px; line-height: 1.5; margin: 0 0 6px; }
.m-odoslat { margin-top: 16px; padding: 14px 16px; font-size: 15px; }
.m-znenie.m-poznamka-pole { margin: 12px 0 0; }
.m-poznamka-pole > summary { text-decoration: none; list-style: none; }
.m-poznamka-pole > summary::-webkit-details-marker { display: none; }

.m-hotovo-znak { width: 48px; height: 48px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-size: 22px; margin: 0 0 10px; }
.m-karta p.m-hotovo-znak { color: #fff; }

/* Skryté na širšej obrazovke — na tabletoch/PC sa /m nepoužíva, presmerúva sa na index.html */
@media (min-width: 900px) {
  .m-app { max-width: 480px; margin: 0 auto; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
}

/* Nad kalendárom: zmeniť ošetrenie a kozmetičku — dve tlačidlá vedľa seba. */
.m-akcie-dve { display: flex; gap: 8px; }
.m-akcie-dve .m-btn { flex: 1; font-size: 14px; padding-left: 10px; padding-right: 10px; }

.m-cas-en::after { content: "EN"; margin-left: .4em; font-size: 9px; font-weight: 700; letter-spacing: .04em; opacity: .7; vertical-align: super; }
.m-en { display: inline-block; padding: 0 4px; border-radius: 4px; border: 1px solid currentColor; font-size: 10px; letter-spacing: .04em; vertical-align: middle; }
.only-english .m-cas-en::after { display: none; }

.m-cas-en::after { color: #8a6a37; opacity: 1; }
.m-en { color: #8a6a37; }
.m-hlava-prava a[hreflang] { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; background: #8a6a37; color: #fff; font-weight: 700; letter-spacing: .05em; text-decoration: none; }