/* Účet účastníka - přihlášení, časem registrace a obnova hesla.
   Načítá se navíc ke style.css, jen na stránkách téhle sekce. */

.ucet-stranka {
	max-width: 440px;
	margin: 10px auto 70px;
}

/* Karta jako okno: nahoře proužek se vzorem hlavičky webu a nadpisem,
   pod ním bílé tělo s formulářem a jemný stín */
.ucet-karta {
	overflow: hidden;
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 6px 24px rgba(42, 104, 109, 0.16);
}

.ucet-karta-hlavicka {
	margin: 0;
	padding: 14px 20px 16px;
	font: normal 40px/1.1 'Creamy', sans-serif;
	text-align: center;
	color: #fff;
	background: var(--tyrkys) url(../img/header-bg.png) repeat-x top left;
}

.ucet-karta-telo {
	display: flex;
	flex-direction: column;
	padding: 30px 35px;
}

@media (max-width: 575px) {
	.ucet-karta-telo {
		padding: 25px 20px;
	}
}


/* ---------- pole formuláře ---------- */

.formular-pole {
	display: flex;
	flex-direction: column;
	margin-bottom: 18px;
}

.formular-pole label {
	margin-bottom: 5px;
	font-size: 15px;
	font-style: italic;
	color: #3b4141;
}

.formular-pole input {
	padding: 10px 14px;
	font: inherit;
	font-size: 17px;
	color: var(--text);
	background: #fff;
	border: 1px solid #b5e0e4;
	border-radius: 8px;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.formular-pole input::placeholder {
	color: #a8a8a8;
}

.formular-pole input:focus {
	border-color: var(--tyrkys);
	outline: none;
	box-shadow: 0 0 0 3px rgba(77, 189, 198, 0.25);
}

/* Číselné pole (věk) bez šipek nahoru/dolů - Chrome, Edge, Safari ... */
.formular-pole input[type="number"]::-webkit-inner-spin-button,
.formular-pole input[type="number"]::-webkit-outer-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

/* ... a Firefox */
.formular-pole input[type="number"] {
	-moz-appearance: textfield;
	appearance: textfield;
}

/* Chyby polí jsou bubliny (style.css), tady jen chyby celého formuláře */
.formular-chyby {
	margin: 0 0 20px;
	padding: 10px 15px;
	list-style: none;
	color: #b03a2e;
	background: #fff;
	border-left: 4px solid #e0796d;
	border-radius: 6px;
}


/* Dvě pole vedle sebe - telefon a věk */
.formular-radek {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 0 15px;
}


/* ---------- pohlaví ---------- */

/* Dvě dlaždice - muž vlevo, žena vpravo. Skutečný přepínač (radio) je
   průhledný přes celou dlaždici, takže funguje klik i klávesnice. Stejné
   dlaždice jsou i v okně, které vyskočí, když pohlaví chybí. */
.pohlavi {
	margin: 0 0 18px;
	padding: 0;
	border: 0;
}

.pohlavi legend {
	margin-bottom: 5px;
	padding: 0;
	font-size: 15px;
	font-style: italic;
	color: #3b4141;
}

.pohlavi-volby {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 15px;
}

.pohlavi-volba {
	position: relative;
	display: block;
}

.pohlavi-input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

/* Barvy podle volby - muž tyrkysově, žena oranžově (barvy značky). Každá
   dlaždice má nádech své barvy už před volbou, ať jsou poznat na první pohled. */
.pohlavi-muz {
	--pohlavi-barva: var(--tyrkys);
	--pohlavi-text: var(--tyrkys-tmavy);
	--pohlavi-svetla: #eef8f9;
}

.pohlavi-zena {
	--pohlavi-barva: var(--oranzova);
	--pohlavi-text: #e0843a;
	--pohlavi-svetla: #fef3ea;
}

/* Ikona v bílém kolečku. Při najetí zesílí rámeček a přibude stín, po zvolení
   se dlaždice celá vybarví a v rohu se ukáže fajfka - a druhá dlaždice zbledne.
   Dlaždice leží nad neviditelným přepínačem, kurzor proto potřebuje sama. */
.pohlavi-dlazdice {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 16px 10px 12px;
	font: 26px/1 'Creamy', sans-serif;
	color: var(--pohlavi-text);
	background: var(--pohlavi-svetla);
	border: 2px solid color-mix(in srgb, var(--pohlavi-barva) 35%, transparent);
	border-radius: 16px;
	cursor: pointer;
	transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, opacity 0.2s;
}

.pohlavi-ikona {
	display: grid;
	place-items: center;
	width: 60px;
	height: 60px;
	color: var(--pohlavi-barva);
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 2px 6px color-mix(in srgb, var(--pohlavi-barva) 25%, transparent);
}

.pohlavi-ikona svg {
	display: block;
	width: 34px;
	height: 34px;
	fill: currentColor;
}

.pohlavi-volba:hover .pohlavi-dlazdice {
	border-color: var(--pohlavi-barva);
	box-shadow: 0 6px 14px color-mix(in srgb, var(--pohlavi-barva) 25%, transparent);
}

.pohlavi-input:checked + .pohlavi-dlazdice {
	color: #fff;
	background: var(--pohlavi-barva);
	border-color: var(--pohlavi-barva);
	box-shadow: 0 6px 14px color-mix(in srgb, var(--pohlavi-barva) 35%, transparent);
}

.pohlavi-fajfka {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 22px;
	height: 22px;
	color: var(--pohlavi-barva);
	opacity: 0;
	scale: 0.5;
	transition: opacity 0.2s, scale 0.2s;
}

.pohlavi-fajfka svg {
	display: block;
	width: 100%;
	height: 100%;
}

.pohlavi-input:checked + .pohlavi-dlazdice .pohlavi-fajfka {
	opacity: 1;
	scale: 1;
}

/* Po volbě druhá dlaždice zbledne, ať je jasné, co platí. Při najetí se zase
   rozsvítí - jde přepnout. */
.pohlavi-volby:has(.pohlavi-input:checked) .pohlavi-input:not(:checked) + .pohlavi-dlazdice {
	opacity: 0.55;
}

.pohlavi-volby:has(.pohlavi-input:checked) .pohlavi-volba:hover .pohlavi-dlazdice {
	opacity: 1;
}

.pohlavi-input:focus-visible + .pohlavi-dlazdice {
	outline: 3px solid color-mix(in srgb, var(--pohlavi-barva) 40%, transparent);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.pohlavi-dlazdice,
	.pohlavi-fajfka {
		transition: none;
	}
}
/* Okno s volbou. Vzhled okna dává style.css (dialog.netteFormsModal), tady
   se jen přebije jeho styl tlačítka "OK" - dlaždice nejsou pilulky. */
.volba-pohlavi p {
	margin: 0 0 18px;
}

/* "jsem muž" / "jsem žena" se do užších dlaždic nevejde */
.volba-pohlavi .pohlavi-volby {
	width: 320px;
	max-width: 100%;
}

dialog.volba-pohlavi .pohlavi-dlazdice {
	padding: 16px 10px 12px;
	font: 26px/1 'Creamy', sans-serif;
	color: var(--pohlavi-text);
	cursor: pointer;
	background: var(--pohlavi-svetla);
	border: 2px solid color-mix(in srgb, var(--pohlavi-barva) 35%, transparent);
	border-radius: 16px;
}

dialog.volba-pohlavi .pohlavi-dlazdice:hover {
	color: #fff;
	background: var(--pohlavi-barva);
	border-color: var(--pohlavi-barva);
	box-shadow: 0 6px 14px color-mix(in srgb, var(--pohlavi-barva) 35%, transparent);
}
/* Okno po otevření skočí fokusem na první dlaždici - jen rámeček, ne výplň,
   ať to nevypadá, že je muž předvybraný */
dialog.volba-pohlavi .pohlavi-dlazdice:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--pohlavi-barva) 40%, transparent);
	outline-offset: 2px;
}


/* ---------- tlačítka a odkazy ---------- */

/* Tlačítka v sekci účtu o něco větší než výchozí pilulka */
.ucet-stranka .pilulka {
	padding: 5.5px 24px;
	font-size: 31px;
}

.ucet-odeslat {
	align-self: center;
	margin-top: 10px;
	cursor: pointer;
}

.ucet-zapomenute {
	align-self: center;
	margin-top: 15px;
	font-size: 15px;
	font-style: italic;
	color: var(--tyrkys-tmavy);
}

.ucet-zapomenute:hover,
.ucet-zapomenute:focus-visible {
	color: var(--oranzova);
}

/* "nebo" mezi dvěma linkami */
.ucet-nebo {
	display: flex;
	align-items: center;
	gap: 15px;
	margin: 25px 0;
	font-style: italic;
	color: #a8a8a8;
}

.ucet-nebo::before,
.ucet-nebo::after {
	content: '';
	flex: 1;
	border-top: 1px solid #d5e6e8;
}

/* Pod kartou odkaz na druhou možnost - z přihlášení na registraci a naopak */
.ucet-jinak {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin: 0;
	font-style: italic;
}

/* Vedlejší tlačítko - stejný tvar, obrácené barvy (jako "přihlásit se" v hlavičce).
   Rámeček má 2 px, vnitřní okraj je proto o 1 px menší, ať je tlačítko stejně
   velké jako to oranžové. Při najetí celé zezelená (barva okna s chybou). */
.ucet-stranka .pilulka-bila {
	padding: 4.5px 23px;
	color: var(--tyrkys-tmavy);
	background: #fff;
	border: 2px solid var(--tyrkys);
}

.ucet-stranka .pilulka-bila:hover,
.ucet-stranka .pilulka-bila:focus-visible {
	color: #fff;
	background: #2a686d;
	border-color: #2a686d;
	box-shadow: none;
}


/* ---------- registrace a přihlášení v okně nad stránkou ---------- */

/* Okno otevře ucet-okno.js po kliknutí na "rezervovat" u termínu. Samotné
   okno je průhledná vrstva přes celou obrazovku a uvnitř je bílá karta -
   celá stránka registrace (nebo přihlášení), proužek s nadpisem je její
   hlavička a vpravo v něm křížek.

   Stránka pod oknem je po dobu otevření zamčená (ucet-okno.js), roluje se
   jen vrstva s kartou - a jen o tolik, kolik je karta vysoká. Když se
   karta vejde, nic se neroluje a posuvník není vidět. */
.ucet-okno {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 15px;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: transparent;
	border: 0;
}

/* Karta na střed - a když je vyšší než obrazovka, začíná nahoře (margin: auto
   ve flexu na rozdíl od centrování nic neusekne) */
.ucet-okno[open] {
	display: flex;
	flex-direction: column;
}

.ucet-okno .ucet-stranka {
	position: relative;
	flex-shrink: 0;
	width: min(440px, 100%);
	max-width: none;
	margin: auto;
	padding-bottom: 25px;
	overflow: hidden;
	background: #fff;
	border: 2.5px solid var(--tyrkys);
	border-radius: 20px;
	/* Vrstvený stín místo jednoho rozmazaného - blízký ostrý, vzdálený měkký,
	   do tmavě tyrkysové místo černé. Karta tak působí, že se vznáší nad
	   stránkou. Tyrkysový rámeček a lem ji oddělí od rozmazaného pozadí. */
	box-shadow:
		0 0 0 1px var(--tyrkys),
		0 2px 4px rgba(20, 50, 52, 0.08),
		0 8px 16px rgba(20, 50, 52, 0.12),
		0 24px 48px rgba(20, 50, 52, 0.2),
		0 40px 90px rgba(42, 104, 109, 0.35);
}

/* Proužek s nadpisem vrhá na bílé tělo karty jemný stín */
.ucet-okno .ucet-karta-hlavicka {
	position: relative;
	box-shadow: 0 3px 8px rgba(20, 50, 52, 0.15);
}

.ucet-okno .ucet-karta {
	border-radius: 0;
	box-shadow: none;
}

.ucet-okno .ucet-nebo,
.ucet-okno .ucet-jinak {
	padding: 0 35px;
}

.ucet-okno .ucet-nebo {
	margin-top: 0;
}

/* Stránka za oknem se rozmaže a ztmaví */
.ucet-okno::backdrop {
	background: rgba(0, 0, 0, 0.35);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

/* Karta při otevření přijede shora - začne úplně nad obrazovkou a sjede
   doprostřed, stejně jako v původním webu: o 1,5 výšky obrazovky za 0,3 s,
   pohyb zpomaluje, průhlednost mizí rovnoměrně. Pozadí se mezitím rozmaže. */
.ucet-okno[open] .ucet-stranka {
	animation:
		ucet-okno-prijezd 0.3s ease-out,
		ucet-okno-zjeveni 0.3s linear;
}

.ucet-okno[open]::backdrop {
	animation: ucet-okno-zjeveni 0.35s ease-out;
}

/* Při přepnutí registrace / přihlášení stará karta odjede stejnou cestou
   zpátky nahoru a teprve pak přijede nová (ucet-okno.js). Animace mají vlastní
   jména - se stejnými by je prohlížeč nespustil znovu, jen navázal na příjezd,
   který už doběhl, a karta by zmizela naráz. */
.ucet-okno .ucet-stranka.ucet-odjezd {
	animation:
		ucet-okno-odjezd 0.3s ease-out forwards,
		ucet-okno-zmizeni 0.3s linear forwards;
}

/* Při zavření odjede karta stejně a rozmazané pozadí mezitím zmizí */
.ucet-okno.ucet-okno-zavirani::backdrop {
	animation: ucet-okno-zmizeni 0.3s linear forwards;
}

@keyframes ucet-okno-prijezd {
	from {
		translate: 0 -150vh;
	}
}

@keyframes ucet-okno-zjeveni {
	from {
		opacity: 0;
	}
}

@keyframes ucet-okno-odjezd {
	to {
		translate: 0 -150vh;
	}
}

@keyframes ucet-okno-zmizeni {
	to {
		opacity: 0;
	}
}

/* Kdo má v systému omezené animace, dostane okno rovnou - rozmazání zůstává */
@media (prefers-reduced-motion: reduce) {
	.ucet-okno[open] .ucet-stranka,
	.ucet-okno[open]::backdrop,
	.ucet-okno.ucet-okno-zavirani::backdrop {
		animation: none;
	}
}

.ucet-okno-zavrit {
	position: absolute;
	top: 6px;
	right: 10px;
	z-index: 1;
	padding: 0 8px;
	font: 52px/1 sans-serif;
	color: #fff;
	cursor: pointer;
	background: none;
	border: 0;
	opacity: 0.85;
}

.ucet-okno-zavrit:hover,
.ucet-okno-zavrit:focus-visible {
	opacity: 1;
}