/* Online rezervácia (docs/15). Beží v kostre webu — farby, písma a tlačidlá (.btn, .card) berie
   z tokens.css/components.css webu. Záložné hodnoty platia len v záložnom layoute bez kostry.
   Žiadne inline štýly (CSP), viditeľný focus, prefers-reduced-motion, mobil od 320 px. */
.pk-engine { --pk-ink: var(--ink, #2b2620); --pk-soft: var(--ink-soft, #5a5249); --pk-line: var(--line, #ddd5c7);
  --pk-paper: var(--paper, #fdfbf7); --pk-gold: var(--gold-deep, #7a5b1e); --pk-green: var(--green, #2f4a35);
  --pk-err: #8a1f11; --pk-err-bg: #fbe9e7; --pk-info-bg: #eef3ec; color: var(--pk-ink); }
.pk-title { font-size: clamp(2rem, 4.5vw, 3rem); margin: 0 0 .6rem; }
.pk-lead { color: var(--pk-soft); font-size: 1.08rem; max-width: 60ch; margin: 0 0 1.4rem; }
.pk-hint { color: var(--pk-soft); font-size: .9rem; margin: .5rem 0 0; }
.pk-back { margin: 0 0 1rem; }
.pk-back a, .pk-engine a:not(.btn) { color: var(--pk-gold); text-decoration: underline; text-underline-offset: 3px; }

/* Hlásenia */
.pk-alert { border-radius: var(--radius, 4px); padding: .9rem 1.1rem; margin: 0 0 1.2rem; }
.pk-alert ul { margin: 0; padding-left: 1.1rem; }
.pk-alert-error { background: var(--pk-err-bg); color: var(--pk-err); border-left: 4px solid var(--pk-err); }
.pk-alert-info { background: var(--pk-info-bg); color: var(--pk-green); border-left: 4px solid var(--pk-green); }
.pk-alert:focus { outline: 2px solid var(--pk-gold); outline-offset: 2px; }

/* Vyhľadanie */
.pk-search { background: var(--pk-paper); border: 1px solid var(--pk-line); border-radius: var(--radius-lg, 8px); padding: clamp(16px, 2.5vw, 26px);
  display: grid; gap: 1rem; box-shadow: var(--shadow-sm, none); margin-bottom: 1.6rem; }
.pk-search { container-type: inline-size; }
/* Šírka podľa stĺpca formulára (vedľa bočného panelu je užší než okno) — container queries */
.pk-search-row { display: grid; gap: .9rem; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
.pk-dates { grid-column: 1 / -1; display: grid; gap: .9rem; grid-template-columns: repeat(2, minmax(0, 1fr)); position: relative; }
.pk-search-btn { grid-column: 1 / -1; height: 50px; justify-content: center; white-space: nowrap; }
@container (min-width: 560px) {
  .pk-search-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .pk-search-btn { grid-column: auto; }
}
@container (min-width: 900px) {
  .pk-search-row { grid-template-columns: minmax(0, 2.1fr) minmax(0, .7fr) minmax(0, .7fr) auto; }
  .pk-dates { grid-column: auto; }
}
.pk-field { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.pk-field > span { font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--pk-soft); }
.pk-engine input[type=date], .pk-engine input[type=text], .pk-engine input[type=email], .pk-engine input[type=tel], .pk-engine select, .pk-engine textarea {
  font: inherit; font-size: 1rem; color: var(--pk-ink); background-color: var(--cream, #faf7f1); border: 1px solid #a99e8c; border-radius: var(--radius, 4px);
  padding: .7em .8em; min-height: 48px; width: 100%; min-width: 0; }
.pk-engine textarea { min-height: 6rem; resize: vertical; }
.pk-search :is(input, select) { height: 50px; min-height: 0; padding-block: 0; }
.pk-engine :is(input, select, textarea):focus { outline: 2px solid var(--pk-gold); outline-offset: 1px; border-color: var(--pk-gold); }
.pk-engine [aria-invalid="true"] { border-color: var(--pk-err); box-shadow: inset 0 0 0 1px var(--pk-err); }
.pk-ages { grid-column: 1 / -1; border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .9rem; }
.pk-ages legend { font-weight: 600; padding: 0; margin-bottom: .4rem; width: 100%; }
.pk-ages .pk-field { width: 9.5rem; }
.pk-ages .pk-hint { width: 100%; margin: 0; }
.pk-ages[hidden], [data-pk-age][hidden] { display: none !important; }

/* Výsledky */
.pk-summary { margin: 0 0 1rem; color: var(--pk-soft); }
.pk-rooms { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.4rem; }
.pk-rooms { container-type: inline-size; }
.pk-room { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
.pk-room-off { opacity: .85; }
/* Fotka v pevnom pomere (nie natiahnutá na výšku karty). Galéria = .card-gallery webu (šípky,
   počítadlo). Úzky stĺpec: fotka nad textom (3:2); širší: vľavo, vsadená do karty (4:3). */
.pk-room-media { min-width: 0; }
.pk-gallery { overflow: hidden; background: var(--cream-3, #eee6d8); }
.pk-gallery .cg-track > img { display: block; width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; }
.pk-gallery .cg-track:focus-visible { outline: 3px solid var(--pk-gold); outline-offset: -3px; }
.pk-nophoto { aspect-ratio: 3 / 2; background: var(--cream-3, #eee6d8); }
@container (min-width: 640px) {
  .pk-room { grid-template-columns: minmax(0, 280px) minmax(0, 1fr); }
  .pk-room-media { padding: 18px 0 18px 18px; }
  .pk-gallery, .pk-nophoto { border-radius: var(--radius-lg, 8px); }
  .pk-gallery .cg-track > img, .pk-nophoto { aspect-ratio: 4 / 3; }
}
/* bez fotky na mobile nič — prázdny blok by len posúval cenu nižšie */
@container (max-width: 639px) { .pk-room-media:has(.pk-nophoto) { display: none; } }
.pk-room-body { padding: clamp(18px, 2.5vw, 28px); min-width: 0; }
.pk-room-name { font-size: clamp(1.5rem, 3vw, 1.9rem); margin: 0; }
.pk-room-meta { color: var(--pk-soft); margin: .35rem 0 0; font-size: .95rem; }
.pk-scarce { display: inline-block; margin-left: .4rem; padding: .05rem .55rem; border-radius: 999px; background: var(--gold-soft, #efe2c4); color: var(--pk-ink); font-size: .82rem; font-weight: 600; }
.pk-room-desc { margin: .6rem 0 0; }
.pk-more { margin: .6rem 0 0; }
.pk-more summary { cursor: pointer; color: var(--pk-gold); font-weight: 600; min-height: 32px; }
.pk-reason { margin: 1rem 0 0; padding: .7rem .9rem; background: var(--cream-2, #f3eee4); border-radius: var(--radius, 4px); }
.pk-offers { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: .8rem; }
.pk-offer { display: grid; gap: .8rem 1.2rem; grid-template-columns: minmax(0, 1fr); padding: 1rem 0 0; border-top: 1px solid var(--pk-line); }
@media (min-width: 560px) { .pk-offer { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } }
.pk-plan { font-family: var(--sans, system-ui); font-size: 1.05rem; font-weight: 700; margin: 0; }
.pk-perks { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .2rem; font-size: .93rem; color: var(--pk-soft); }
.pk-perks li::before { content: "✓"; color: var(--pk-green); font-weight: 700; margin-right: .45rem; }
.pk-plan-desc { margin: .4rem 0 0; font-size: .93rem; color: var(--pk-soft); }
.pk-offer-price { text-align: left; }
@media (min-width: 560px) { .pk-offer-price { text-align: right; } }
.pk-price { font-family: var(--serif, Georgia, serif); font-size: 1.9rem; font-weight: 600; line-height: 1; margin: 0; font-variant-numeric: tabular-nums; }
.pk-price-note { font-size: .85rem; color: var(--pk-soft); margin: .25rem 0 .6rem; }
.pk-empty { padding: clamp(20px, 3vw, 32px); }
.pk-empty h2 { font-size: 1.6rem; }

/* Údaje a zhrnutie */
.pk-box { padding: clamp(18px, 2.5vw, 28px); margin: 0 0 1.2rem; border: 1px solid var(--pk-line); }
fieldset.pk-box { min-width: 0; }
.pk-box-title, legend.pk-box-title { font-family: var(--serif, Georgia, serif); font-weight: 500; font-size: 1.5rem; color: var(--pk-ink); margin: 0 0 .8rem; padding: 0; }
legend.pk-box-title { float: left; width: 100%; }
legend.pk-box-title + * { clear: both; }
.pk-facts { display: grid; gap: .45rem; margin: 0; }
.pk-facts div { display: grid; grid-template-columns: minmax(7rem, 35%) minmax(0, 1fr); gap: .6rem; }
.pk-facts dt { color: var(--pk-soft); }
.pk-facts dd { margin: 0; }
.pk-nights, .pk-total { border-collapse: collapse; width: 100%; margin-top: .6rem; }
.pk-nights th, .pk-nights td, .pk-total th, .pk-total td { text-align: left; padding: .35rem 0; border-bottom: 1px solid var(--pk-line); font-weight: 400; }
.pk-nights td, .pk-total td { text-align: right; font-variant-numeric: tabular-nums; }
.pk-total { margin-top: 1rem; }
.pk-total-row th, .pk-total-row td { font-weight: 700; font-size: 1.15rem; border-top: 2px solid var(--pk-ink); border-bottom: 0; padding-top: .6rem; }
.pk-grid2 { display: grid; gap: .9rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 620px) { .pk-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pk-box > .pk-field { margin-top: .9rem; }
.pk-extra { display: grid; grid-template-columns: minmax(0, 1fr) 5.5rem; gap: .8rem; align-items: start; padding: .8rem 0; border-top: 1px solid var(--pk-line); }
.pk-extra-one { grid-template-columns: minmax(0, 1fr); }
.pk-extra label.pk-check { display: flex; gap: .8rem; align-items: flex-start; }
.pk-extra .pk-check > span { display: grid; gap: .15rem; justify-items: start; }
.pk-extra label { justify-items: start; }
.pk-tag { display: inline-block; width: fit-content; padding: 0 .45rem; border-radius: 999px; background: var(--cream-3, #eee6d8); color: var(--pk-soft); font-size: .74rem; font-weight: 600; vertical-align: middle; }
.pk-extra label { display: grid; gap: .1rem; }
.pk-extra-price { font-variant-numeric: tabular-nums; }
.pk-consents { display: grid; gap: .8rem; margin: 0 0 1.2rem; }
.pk-check { display: flex; gap: .7rem; align-items: flex-start; line-height: 1.5; }
.pk-check input { width: 22px; height: 22px; min-width: 22px; margin: 2px 0 0; accent-color: var(--pk-gold); }
.pk-submit .btn[disabled] { opacity: .6; cursor: progress; }
/* Pasca na roboty — mimo obrazovky, nie display:none (niektoré roboty ho preskočia) */
.pk-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Poďakovanie */
.pk-thanks { padding: clamp(22px, 3.5vw, 40px); margin-bottom: 1.2rem; }
.pk-kicker { text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; font-weight: 600; color: var(--pk-gold); margin: 0 0 .4rem; }
.pk-code { font-size: 1.15rem; margin: .4rem 0 .8rem; }
.pk-code strong { font-family: ui-monospace, Menlo, monospace; letter-spacing: .04em; }
.pk-steps { margin: 0 0 1.2rem; padding-left: 1.3rem; display: grid; gap: .4rem; }

/* Záložný layout (bez kostry webu) */
.pk-fallback { margin: 0; font-family: system-ui, sans-serif; background: #faf7f1; line-height: 1.6; }
.pk-fb-header, .pk-fb-footer { padding: 1rem clamp(16px, 4vw, 48px); background: #2f4a35; color: #fff; }
.pk-fb-header a, .pk-fb-footer a { color: #fff; }
.pk-fb-main { max-width: 1000px; margin: 0 auto; padding: 1.5rem clamp(16px, 4vw, 48px) 3rem; }
.pk-fallback .btn { display: inline-flex; padding: .8em 1.4em; border-radius: 4px; border: 1px solid #2f4a35; background: #2f4a35; color: #fff; font: inherit; cursor: pointer; text-decoration: none; }
.pk-fallback .card { background: #fff; border: 1px solid #ddd5c7; border-radius: 8px; }
.pk-fallback .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

@media (prefers-reduced-motion: reduce) { .pk-gallery .cg-track { scroll-behavior: auto; } }

/* Balíčky (F6) */
.pk-badge { display: inline-block; margin: 0 0 .3rem; padding: .1rem .55rem; border-radius: 999px; background: var(--gold-soft, #efe2c4);
  color: var(--pk-ink); font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.pk-offer-pkg .pk-plan { color: var(--pk-green); }
.pk-package { padding: clamp(18px, 2.5vw, 28px); margin: 0 0 1.4rem; border-left: 4px solid var(--gold, #b8954a); }
.pk-package p { margin: .5rem 0 0; }

/* ── Úpravy po UX audite 27. 10. 2026 ─────────────────────────────────────── */
/* Ukazovateľ krokov */
.pk-steps { list-style: none; margin: 0 0 1.4rem; padding: 0; display: flex; gap: .4rem; counter-reset: none; }
.pk-steps li { flex: 1; display: flex; align-items: center; gap: .55rem; padding-bottom: .55rem; border-bottom: 3px solid var(--pk-line); color: var(--pk-soft); font-size: .9rem; font-weight: 600; min-width: 0; }
.pk-steps .pk-step-n { flex: 0 0 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; background: var(--cream-3, #eee6d8); color: var(--pk-soft); }
.pk-steps .is-current { border-color: var(--pk-gold); color: var(--pk-ink); }
.pk-steps .is-current .pk-step-n { background: var(--pk-gold); color: #fff; }
.pk-steps .is-done { border-color: var(--pk-green); color: var(--pk-green); }
.pk-steps .is-done .pk-step-n { background: var(--pk-green); color: #fff; }
.pk-step-l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 480px) { .pk-steps li:not(.is-current) .pk-step-l { display: none; } .pk-steps li:not(.is-current) { flex: 0 0 auto; } }

/* Zbalené vyhľadávanie nad výsledkami */
.pk-modify { margin: 0 0 .8rem; padding: 0; overflow: visible; }
.pk-modify-sum { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 14px 18px; }
.pk-modify-sum::-webkit-details-marker { display: none; }
.pk-modify-sum > span:first-child { display: flex; flex-wrap: wrap; gap: .2rem .7rem; align-items: baseline; }
.pk-modify-meta { color: var(--pk-soft); }
.pk-modify-btn { min-height: 44px; padding: .5em 1.2em; flex-shrink: 0; pointer-events: none; }
.pk-modify[open] .pk-modify-btn { visibility: hidden; }
.pk-modify .pk-search { border: 0; box-shadow: none; margin: 0; border-top: 1px solid var(--pk-line); border-radius: 0; }
.pk-modify-sum:focus-visible { outline: 2px solid var(--pk-gold); outline-offset: 2px; }
.pk-price-hint { margin: 0 0 1.2rem; }

/* Vek detí v riadku formulára: tlačidlo potom až pod nimi */
.pk-search-row:has(.pk-ages:not([hidden])) .pk-search-btn { grid-column: 1 / -1; justify-self: start; min-width: 14rem; }

/* Ponuka: cena a tlačidlo spolu; na mobile cena vľavo, tlačidlo vpravo */
.pk-offer { align-items: center; }
@media (max-width: 559px) {
  .pk-offer-price { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 1rem; }
  .pk-offer-price .pk-price-note { margin: .2rem 0 0; grid-row: 2; }
  .pk-offer-price form { grid-row: 1 / span 2; grid-column: 2; }
  .pk-offer-price .btn { min-height: 48px; padding-inline: 1.4em; }
  .pk-submit .btn { width: 100%; justify-content: center; }
}
.pk-pay-line { font-weight: 700; font-size: 1.1rem; margin: 0 0 .6rem; }

/* Súhrn na mobile: popis nad hodnotou */
@media (max-width: 480px) {
  .pk-facts div { grid-template-columns: 1fr; gap: 0; }
  .pk-facts dt { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
}

/* Galéria izby: menšie šípky, na desktope až pri prejdení myšou */
.pk-gallery .cg-nav { width: 34px; height: 34px; font-size: 1rem; }
@media (hover: hover) {
  .pk-gallery .cg-nav { opacity: 0; transition: opacity .2s; }
  .pk-gallery:hover .cg-nav, .pk-gallery:focus-within .cg-nav { opacity: 1; }
}