/* SmartSauna – vzhled podle saunabox.cz: bílá plocha, černé písmo a tlačítka,
   velká bezpatková typografie, hranaté rohy, hodně vzduchu. Barva nese jen
   význam (volno / dochází / plno), jinak je všechno černobílé. */
:root {
  --color: #000; --bg: #fff; --light: #f2f2f2; --gray: #999; --gray-dark: #666;
  --green: #7ab573; --green-text: #3d7a35; --orange: #f6b036; --orange-text: #8a5a00;
  --red: #de594a; --red-text: #b3261a;
  --font: "neue-haas-unica", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --pad: clamp(16px, 4vw, 48px);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: clamp(15px, .35vw + 13px, 19px); }
body { font-family: var(--font); line-height: 1.5; color: var(--color);
       background: var(--bg); min-height: 100vh; display: flex; flex-direction: column;
       -webkit-font-smoothing: antialiased; }
a { color: currentColor; }
h1, h2, h3 { font-weight: 500; line-height: 1.12; letter-spacing: -.02em; }
h1 { font-size: clamp(2.2rem, 6vw, 4rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: .6em; }
h3 { font-size: 1.25rem; margin-bottom: .4em; }
p + p { margin-top: .8em; }
.muted { color: var(--gray-dark); }
.maly { font-size: .82rem; }
.mono { font-family: Consolas, "SF Mono", monospace; }

/* ---------- hlavička a patička ---------- */
.hlava { display: flex; align-items: center; gap: 1.6rem; padding: 1.3rem var(--pad);
         flex-wrap: wrap; }
.logo { font-size: 1.45rem; font-weight: 700; letter-spacing: -.03em; text-decoration: none; }
.logo span { font-weight: 300; }
.menu { display: flex; gap: 1.6rem; margin-left: auto; flex-wrap: wrap; align-items: center; }
.menu a { text-decoration: none; padding: .2rem 0; border-bottom: 2px solid transparent; }
.menu a:hover, .menu a.akt { border-bottom-color: var(--color); }
main { flex: 1; padding: 0 var(--pad) 5rem; width: 100%; max-width: 1500px; margin: 0 auto; }
.pata { border-top: 1px solid var(--color); padding: 2.2rem var(--pad); display: grid;
        gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); font-size: .9rem; }
.pata h4 { font-size: .9rem; font-weight: 700; margin-bottom: .5rem; }
.pata table td { padding: .1rem .9rem .1rem 0; }

.pruh { background: var(--color); color: #fff; text-align: center; padding: .5rem 1rem;
        font-size: .82rem; }
.pruh a { color: #fff; }

/* ---------- úvod ---------- */
.uvod { padding: clamp(2rem, 7vw, 6rem) 0 clamp(2rem, 5vw, 4rem); max-width: 60rem; }
.uvod p { font-size: 1.25rem; margin: 1.2rem 0 2rem; max-width: 42rem; }
.tlacitka { display: flex; gap: .8rem; flex-wrap: wrap; }
.sekce { padding: clamp(2rem, 5vw, 4rem) 0; border-top: 1px solid var(--color); }
.tri { display: grid; gap: 2.4rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.tri .cislo { font-size: .85rem; color: var(--gray-dark); margin-bottom: .6rem; }
.tri p { color: var(--gray-dark); margin-bottom: 1.2rem; }
.cena-velka { font-size: 1.6rem; font-weight: 500; letter-spacing: -.02em; }
.cena-velka small { font-size: .9rem; color: var(--gray-dark); font-weight: 400; }

/* ---------- tlačítka a formuláře ---------- */
.btn, button { font: inherit; display: inline-flex; align-items: center; justify-content: center;
       min-height: 3.2rem; padding: .6rem 1.5rem; border: 2px solid var(--color);
       border-radius: 0; background: var(--color); color: #fff; text-decoration: none;
       cursor: pointer; transition: opacity .2s, background .2s; -webkit-appearance: none; }
.btn:hover, button:hover { opacity: .78; }
.btn.obrys, button.obrys { background: transparent; color: var(--color); }
.btn.obrys:hover, button.obrys:hover { background: var(--color); color: #fff; opacity: 1; }
.btn.maly, button.maly { min-height: 2.1rem; padding: .2rem .8rem; font-size: .85rem; border-width: 1px; }
.btn.cerveny, button.cerveny { background: transparent; color: var(--red-text); border-color: var(--red-text); }
.btn.cerveny:hover, button.cerveny:hover { background: var(--red-text); color: #fff; opacity: 1; }
button:disabled { opacity: .3; cursor: not-allowed; }
.siroke { width: 100%; }
form.inline { display: inline; }

label { display: block; font-size: .82rem; color: var(--gray-dark); margin-bottom: .3rem; }
input, select, textarea { font: inherit; width: 100%; padding: .7rem .8rem; border: 1px solid var(--color);
       border-radius: 0; background: #fff; color: var(--color); min-height: 3rem; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--color); outline-offset: 1px; }
input[type=checkbox], input[type=radio] { width: auto; min-height: 0; }
.pole { margin-bottom: 1.1rem; }
.rada { display: flex; gap: 1rem; flex-wrap: wrap; }
.rada > * { flex: 1; min-width: 9rem; }
.check { display: flex; align-items: center; gap: .5rem; color: var(--color); font-size: .95rem; }

/* výběr času – čipy */
.cipy { display: flex; flex-wrap: wrap; gap: .5rem; }
.cipy label { margin: 0; }
.cipy input { position: absolute; opacity: 0; pointer-events: none; }
.cipy span { display: inline-flex; min-width: 4.6rem; justify-content: center; padding: .65rem .9rem;
       border: 1px solid var(--color); cursor: pointer; font-size: 1rem; color: var(--color); }
.cipy input:checked + span { background: var(--color); color: #fff; }
.cipy input:focus-visible + span { outline: 2px solid var(--color); outline-offset: 2px; }

.dve { display: grid; gap: clamp(1.5rem, 5vw, 5rem); grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
       align-items: start; padding-top: 2.5rem; }
@media (max-width: 860px) { .dve { grid-template-columns: 1fr; } }
.souhrn { border: 1px solid var(--color); padding: 1.6rem; position: sticky; top: 1rem; }
.souhrn table { width: 100%; border-collapse: collapse; margin: .8rem 0 1.2rem; }
.souhrn td { padding: .45rem 0; border-bottom: 1px solid var(--light); vertical-align: top; }
.souhrn td:last-child { text-align: right; font-weight: 500; }

.hlaska { padding: .9rem 1.1rem; margin: 1rem 0; border-left: 4px solid var(--color); background: var(--light); }
.hlaska.err { border-color: var(--red); color: var(--red-text); }
.hlaska.ok { border-color: var(--green); }
.hlaska.warn { border-color: var(--orange); }

/* ---------- kalendář ---------- */
.kal-obal { overflow-x: auto; margin: 1.2rem 0; }
.kal { display: grid; grid-template-columns: 3.6rem repeat(var(--dni, 7), minmax(6.2rem, 1fr));
       min-width: 48rem; border-top: 1px solid var(--color); border-left: 1px solid var(--color); }
.kal > div { border-right: 1px solid var(--color); border-bottom: 1px solid var(--color); }
.kal .den { padding: .6rem .5rem; text-align: center; font-weight: 500; line-height: 1.2; }
.kal .den small { display: block; font-weight: 400; color: var(--gray-dark); font-size: .8rem; }
.kal .den.dnes { background: var(--color); color: #fff; }
.kal .den.dnes small { color: #ddd; }
.kal .cas { padding: .5rem .4rem; font-size: .8rem; color: var(--gray-dark); text-align: right; }
.kal .b { min-height: 3.3rem; padding: .35rem .45rem; font-size: .82rem; line-height: 1.25;
          display: flex; flex-direction: column; justify-content: center; gap: .1rem; }
.kal .b a { text-decoration: none; }
.kal .b a:hover { text-decoration: underline; }
.kal .b b { font-weight: 500; }
.kal .volno b { color: var(--green-text); }
.kal .malo { background: #fff6e2; }
.kal .malo b { color: var(--orange-text); }
.kal .plno { background: var(--light); }
.kal .plno b { color: var(--red-text); }
.kal .privat { background: var(--color); color: #fff; }
.kal .uklid { background: repeating-linear-gradient(135deg, #fff 0 6px, #e4e4e4 6px 12px); color: var(--gray-dark); }
.kal .zavreno, .kal .minulost { background: var(--light); color: var(--gray); }
.kal .jenprivat { color: var(--gray-dark); }
.kal .b .p { font-size: .74rem; color: var(--gray-dark); }
.kal .privat .p { color: #ccc; }
.kal .b .kdo { font-size: .74rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.legenda { display: flex; gap: 1.2rem; flex-wrap: wrap; font-size: .82rem; color: var(--gray-dark); }
.legenda i { display: inline-block; width: .9rem; height: .9rem; border: 1px solid var(--color);
             vertical-align: -.1rem; margin-right: .35rem; }
.kal-nav { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.kal-nav h2 { margin: 0 auto 0 0; }

/* ---------- stránka rezervace ---------- */
.stred { max-width: 34rem; margin: 0 auto; padding-top: clamp(2rem, 6vw, 5rem); }
.pin { font-family: Consolas, "SF Mono", monospace; font-size: clamp(2.6rem, 11vw, 4.6rem);
       font-weight: 700; letter-spacing: .14em; line-height: 1.1; margin: .8rem 0 .3rem; }
.udaje { width: 100%; border-collapse: collapse; margin: 1.4rem 0; }
.udaje td { padding: .6rem 0; border-bottom: 1px solid var(--light); vertical-align: top; }
.udaje td:first-child { color: var(--gray-dark); width: 42%; }
.stitek { display: inline-block; padding: .1rem .55rem; border: 1px solid currentColor; font-size: .78rem; white-space: nowrap; }
.stitek.ok { color: var(--green-text); }
.stitek.warn { color: var(--orange-text); }
.stitek.err { color: var(--red-text); }
.stitek.cerny { background: var(--color); color: #fff; border-color: var(--color); }
.tocka { display: inline-block; width: 1.1rem; height: 1.1rem; border: 2px solid var(--light);
         border-top-color: var(--color); border-radius: 50%; animation: toc 1s linear infinite;
         vertical-align: -.15rem; margin-right: .4rem; }
@keyframes toc { to { transform: rotate(360deg); } }

/* ---------- administrace (hustší) ---------- */
body.admin { font-size: .92rem; }
body.admin main { padding-top: 1.6rem; }
body.admin h1 { font-size: 2rem; margin-bottom: .2rem; }
body.admin h2 { font-size: 1.25rem; }
body.admin .hlava { border-bottom: 1px solid var(--color); padding-top: .9rem; padding-bottom: .9rem; }
body.admin .menu { gap: 1.2rem; font-size: .9rem; }
.karta { border: 1px solid var(--color); padding: 1.2rem 1.3rem; margin-bottom: 1.2rem; }
.mriz { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: start; }
.dlazdice { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            border-top: 1px solid var(--color); border-left: 1px solid var(--color); margin: 1.2rem 0; }
.dlazdice > div { border-right: 1px solid var(--color); border-bottom: 1px solid var(--color); padding: 1rem 1.1rem; }
.dlazdice .n { font-size: 2rem; font-weight: 500; letter-spacing: -.03em; line-height: 1.1; }
.dlazdice .l { font-size: .78rem; color: var(--gray-dark); }
.dlazdice .cerna { background: var(--color); color: #fff; }
.dlazdice .cerna .l { color: #ccc; }
table.t { width: 100%; border-collapse: collapse; }
table.t th { text-align: left; font-weight: 400; font-size: .78rem; color: var(--gray-dark);
             padding: .5rem .6rem; border-bottom: 1px solid var(--color); white-space: nowrap; }
table.t td { padding: .55rem .6rem; border-bottom: 1px solid var(--light); vertical-align: middle; }
table.t tr:hover td { background: #fafafa; }
.t-obal { overflow-x: auto; }
.prazdno { color: var(--gray-dark); padding: 1.4rem 0; }
body.admin input, body.admin select, body.admin textarea { min-height: 2.5rem; padding: .45rem .6rem; }
body.admin .btn, body.admin button { min-height: 2.5rem; padding: .35rem 1.1rem; }
body.admin .btn.maly, body.admin button.maly { min-height: 1.9rem; padding: .1rem .7rem; }
.vpravo { margin-left: auto; }
.radek { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }

/* potvrzovací okno (vydaný PIN, otevřené dveře) */
.maska { position: fixed; inset: 0; background: rgba(0, 0, 0, .6); z-index: 50; display: flex;
         align-items: center; justify-content: center; padding: 1.2rem; }
.okno { background: #fff; border: 2px solid var(--color); padding: 2rem; width: 100%; max-width: 26rem; text-align: center; }
.okno.chyba { border-color: var(--red); }
.okno .ikona { font-size: 2.4rem; line-height: 1; }
.okno h3 { font-size: 1.4rem; margin: .6rem 0 1rem; }
.okno table { width: 100%; margin-bottom: 1.2rem; border-collapse: collapse; }
.okno td { padding: .4rem 0; border-bottom: 1px solid var(--light); }
.okno td:first-child { color: var(--gray-dark); text-align: left; }
.okno td:last-child { text-align: right; font-weight: 500; }

/* přihlášení a ukázková brána */
.box { max-width: 24rem; margin: clamp(2rem, 10vh, 7rem) auto; border: 1px solid var(--color); padding: 2rem; }
.brana { max-width: 27rem; margin: clamp(1.5rem, 8vh, 5rem) auto; border: 1px solid var(--color); }
.brana .zahlavi { background: var(--light); padding: 1rem 1.5rem; font-size: .85rem; display: flex; justify-content: space-between; }
.brana .telo { padding: 1.5rem; }