/*
 * Rezervační formulář s dlaždicemi (Complete Forms 314, .rez-form).
 *
 * Převzato 14. 10. 2026 z lecba-tmou.cz (themes/_s/css/60-komponenty/
 * rezervace-formular.css a dvě pravidla z 16-formulare.css), ať formulář
 * vypadá na obou webech stejně. Volba „sólo / v páru“ tu chybí - parovatma.cz
 * je jen pro páry. Barvy jdou z --pv-accent ze style.css.
 *
 * Pole (jméno, e-mail, …) dál styluje .pv-form v snippety.css; obal šablony
 * nese obě třídy. Chování (věta do „Termínu“, cena v tlačítku, nápovědy)
 * je v js/rezervace.js. Načítá se jen na stránkách s formulářem 314,
 * viz parovatma_scripts() ve functions.php.
 */

.rez-form {
	box-sizing: border-box;
	max-width: 600px;
	--rez-accent: var(--pv-accent, #da7c0c);
	--rez-accent-soft: rgba(218, 124, 12, 0.14);
	counter-reset: rez-step;
}

.rez-block { margin-bottom: 28px; }

/* Číslovaný nadpis kroku: „1 DÉLKA POBYTU“. */
.rez-label {
	display: flex;
	align-items: baseline;
	gap: 10px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: 12px;
	counter-increment: rez-step;
}
.rez-label p { display: contents; }
.rez-label::before {
	content: counter(rez-step);
	flex: none;
	color: var(--rez-accent);
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
}

/* Dlaždice s radiobuttonem. <p> a <br> by mohl přidat autop - nesmí rozbít řadu. */
.rez-tiles { display: flex; flex-wrap: wrap; gap: 9px; }
.rez-tiles p { display: contents; }
.rez-tiles br { display: none; }
.rez-tile {
	display: block;
	position: relative;
	flex: 1 1 140px;
	min-height: 44px;
	box-sizing: border-box;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 10px;
	padding: 14px 16px;
	cursor: pointer;
	transition: border-color 0.2s, background 0.2s;
}
.rez-tile:hover { border-color: rgba(255, 255, 255, 0.4); }
.rez-tile:has(input:checked) { border-color: var(--rez-accent); background: var(--rez-accent-soft); }
.rez-tile:has(input:focus-visible) { outline: 3px solid var(--rez-accent); outline-offset: 1px; }
.rez-tile input[type="radio"] { margin-right: 9px; accent-color: var(--rez-accent); }
.rez-badge {
	position: absolute;
	top: -9px;
	right: 12px;
	background: var(--rez-accent);
	color: #1a1310;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 3px 8px;
	border-radius: 999px;
	white-space: nowrap;
}

/* Nápověda pod dlaždicemi - ukazuje se jen ta k vybrané volbě (třídu přepíná JS). */
.rez-hint { font-size: 13.5px; opacity: 0.7; margin: 10px 2px 0; display: none; }
.rez-hint.rez-hint-on { display: block; }
.rez-hint-static { font-size: 13.5px; opacity: 0.6; margin: 0 2px 12px; }

/* Pole pro vlastní termín, rozbalí se po volbě „jinak“. */
.rez-reveal { max-height: 0; overflow: hidden; transition: max-height 0.35s ease, margin 0.35s ease; }
.rez-reveal.rez-reveal-on { max-height: 160px; margin-top: 10px; }

/* E-mail a telefon vedle sebe, na mobilu pod sebou. */
.rez-row { display: flex; gap: 16px; }
.rez-row > .pv-form-pole { flex: 1; min-width: 0; }
@media (max-width: 767px) {
	.rez-row { flex-direction: column; gap: 0; }
}

/* Lišta s tlačítkem drží u spodní hrany okna, dokud se formulář neodroluje. */
.rez-pricebar { position: sticky; bottom: 0; padding: 12px 0; background: var(--pv-bg, #000); }

/* Tlačítko nese cenu v popisku („Rezervovat za 21 000 Kč“), proto přes celou šířku. */
.rez-summary input[type="submit"] {
	display: block;
	width: 100%;
	padding-top: 16px;
	padding-bottom: 16px;
	margin-bottom: 8px;
}
.rez-note { font-size: 11.5px; opacity: 0.5; line-height: 1.45; margin: 0; text-align: center; }
.rez-help { text-align: center; margin: 12px 0 0; }
.rez-help a { font-size: 13px; opacity: 0.55; }

/* Sekce stránek parovatma.cz nemají na mobilu boční okraj; dlaždice
   a pole by jinak ležely přímo na hraně displeje. */
@media (max-width: 767px) {
	.rez-form { padding-left: 16px; padding-right: 16px; }
}