/* =============================================================================================
   BRAND — sjednocení Booking modulu s hlavním Front webem (Diplomat Barber).
   Tokeny převzaté z www/assets/css/{style,custom}.css: paleta, fonty, tlačítka, preloader,
   lang-switch a horní hlavička. Booking zůstává samostatný modul (BS5), tohle jen sjednocuje
   vizuální identitu. Načítá se v @layout.latte JAKO POSLEDNÍ (přebíjí mockupový style/custom).
   Fonty: din-condensed-variable (typekit) pro nadpisy/tlačítka, rubik (Google) pro text.
   ============================================================================================= */

:root {
	--brand-dark: #1d1d1b;     /* near-black brand base (preloader, header) */
	--brand-red: #af0000;      /* primární akční barva (theme-btn) */
	--brand-green: #00442b;    /* sekundární akcent (hover, scroll-top) */
	--book-green: #1a7a4e;     /* primární akce wizardu (tlačítka, vybraný stav) — dle mockupu */
	--brand-white: #fff;
	--font-head: "din-condensed-variable", sans-serif;
	--font-body: rubik, sans-serif;
}

/* ===== Typografie shodná s Frontem ===== */
body { font-family: var(--font-body); }
h1, h2, h3, h4, h5, legend,
.stepy-titles, .theme-btn, .lang-switch { font-family: var(--font-head); }

/* ===== Tlačítko .theme-btn — přeneseno z Front style.css (animované rohy) ===== */
.theme-btn,
a.theme-btn {
	z-index: 1;
	color: var(--brand-white);
	font-size: 20px;
	overflow: hidden;
	cursor: pointer;
	transition: .5s;
	font-weight: 600;
	position: relative;
	border-radius: 5px;
	text-align: center;
	padding: 11px 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-transform: uppercase;
	border: 0;
	font-family: var(--font-head);
	background: var(--brand-red);
}
.theme-btn i, a.theme-btn i { transition: .5s; margin-left: 10px; }
.theme-btn::after, .theme-btn::before,
a.theme-btn::after, a.theme-btn::before {
	z-index: -1;
	content: '';
	transition: .75s;
	position: absolute;
	width: 0;
	height: 0;
	background: transparent;
}
.theme-btn::before, a.theme-btn::before {
	left: 0; top: 0;
	border-bottom: 55px solid transparent;
	border-left: 350px solid var(--brand-green);
}
.theme-btn::after, a.theme-btn::after {
	right: 0; bottom: 0;
	border-top: 55px solid transparent;
	border-right: 350px solid var(--brand-green);
}
.theme-btn:hover::before, a.theme-btn:hover::before { border-bottom: 0 solid transparent; border-left: 0 solid var(--brand-green); }
.theme-btn:hover::after, a.theme-btn:hover::after { border-top: 0 solid transparent; border-right: 0 solid var(--brand-green); }
.theme-btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ===== Horní hlavička — shodná s Frontem (tmavá, logo vlevo, akce vpravo) ===== */
.bk-header {
	background: var(--brand-dark);
	padding: 14px 0;
}
.bk-header { padding: 14px 0; }
.bk-header .container-fluid { padding-left: 40px; padding-right: 40px; }
.bk-header .bk-inner {
	display: flex;
	align-items: center;
	justify-content: space-between !important;
	gap: 16px;
	width: 100%;
}
/* Mockupový clearfix přidává ::before/::after jako flex-items → centroval obsah. Vypnout. */
.bk-header .bk-inner::before, .bk-header .bk-inner::after { content: none !important; display: none !important; }
.bk-header .logo img { height: 64px; width: auto; }
.bk-header .bk-actions { display: flex; align-items: center; gap: 16px; }
/* „Přihlášen: Jméno" — rozpoznaný zákazník (device cookie). Stejný styl jako text MENU; klik otevře menu. */
.bk-user {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--brand-white);
	font-family: var(--font-head);
	text-transform: uppercase;
	font-size: 18px;
	letter-spacing: .5px;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
}
.bk-user:hover { color: var(--brand-white); opacity: .8; }
.bk-user i { font-size: 19px; }
@media (max-width: 575px) { .bk-user { display: none; } }

/* Menu trigger — defaultně ZAVŘENÉ (booking je aplikace, ne obsahový web). */
.bk-menu-trigger {
	color: var(--brand-white);
	font-family: var(--font-head);
	text-transform: uppercase;
	font-size: 18px;
	letter-spacing: .5px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
}
.bk-menu-trigger .bars { display: inline-block; width: 22px; height: 2px; background: var(--brand-white); position: relative; }
.bk-menu-trigger .bars::before, .bk-menu-trigger .bars::after { content: ''; position: absolute; left: 0; width: 22px; height: 2px; background: var(--brand-white); }
.bk-menu-trigger .bars::before { top: -7px; }
.bk-menu-trigger .bars::after { top: 7px; }

/* ===== Přepínač jazyků — pill toggle, přeneseno z Front custom.css ===== */
.lang-switch {
	display: inline-flex;
	vertical-align: middle;
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 5px;
	overflow: hidden;
	text-transform: uppercase;
	line-height: 1;
}
.lang-switch a { padding: 6px 14px; color: #fff; font-size: 18px; text-decoration: none; transition: .25s; }
.lang-switch a.active { background: #fff; color: var(--brand-dark); }
.lang-switch a:not(.active):hover { background: rgba(255, 255, 255, .15); }

/* ===== Preloader "logo shine" — shodný s Frontem (maska loga + sweep) ===== */
#preloader {
	position: fixed;
	inset: 0;
	z-index: 9999999;
	background: var(--brand-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity .4s ease;
}
#preloader.is-hidden { opacity: 0; visibility: hidden; }
.pl-shine {
	position: relative;
	width: 200px;
	height: 192px;
	overflow: hidden;
	-webkit-mask: url(/assets/images/logos/dimplomat-bs_logo_white_NEW_FINAL.svg) center/contain no-repeat;
	mask: url(/assets/images/logos/dimplomat-bs_logo_white_NEW_FINAL.svg) center/contain no-repeat;
}
.pl-shine .base { position: absolute; inset: 0; background: rgba(255, 255, 255, .10); }
.pl-shine .sweep {
	position: absolute;
	top: -25%; bottom: -25%; left: 0;
	width: 55%;
	background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .92), transparent);
	transform: translateX(-180%);
	animation: pl-shine 5s linear infinite;
}
@keyframes pl-shine {
	0%   { transform: translateX(-180%); }
	48%  { transform: translateX(320%); }
	100% { transform: translateX(320%); }
}

/* ===== Fullscreen overlay menu (otevírá MENU v hlavičce) ===== */
.bk-overlay {
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: rgba(29, 29, 27, .97);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s ease, visibility .3s ease;
}
.bk-overlay.is-open { opacity: 1; visibility: visible; }
.bk-overlay-close {
	position: absolute;
	top: 20px; right: 36px;
	color: #fff;
	font-size: 46px;
	line-height: 1;
	text-decoration: none;
}
.bk-overlay-nav { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.bk-overlay-nav a {
	color: #fff !important;
	text-decoration: none;
	font-family: var(--font-head);
	text-transform: uppercase;
	font-size: 40px;
	letter-spacing: 1px;
	transition: .25s;
}
.bk-overlay-nav a:hover { color: var(--brand-red) !important; }
.bk-overlay-close { color: #fff !important; }
@media (max-width: 575px) { .bk-overlay-nav a { font-size: 28px; } }

/* ===== Wizard = BÍLÁ KARTA (mockup): zelené taby nahoře, bílý obsah, kolečková radia ===== */
#custom {
	background: #fff;
	border-radius: 0 14px 14px 14px;
	padding: 28px 34px 34px;
	color: #01150c;
}
/* Nadpis služby v levém panelu — menší, ať se vejde na jeden řádek. */
#left_form h2 { font-size: 27px; }

/* ===== Krok 2: kontaktní pole — boxové inputy s popiskem (konzistentní se službami) ===== */
.bk-field { margin-bottom: 18px; }
.bk-field label {
	display: block;
	font-family: var(--font-head);
	text-transform: uppercase;
	font-size: 13px;
	letter-spacing: .5px;
	color: #5a6b62;
	margin-bottom: 6px;
}
.bk-field label .req { color: var(--brand-red); }
.bk-input {
	width: 100%;
	height: 48px;
	padding: 10px 14px;
	border: 1px solid #d4d4d4;
	border-radius: 6px;
	background: #fff;
	font-family: var(--font-body);
	font-size: 16px;
	color: #01150c;
	transition: border-color .15s, box-shadow .15s;
}
.bk-input::placeholder { color: #aab2ad; }
.bk-input:focus {
	outline: none;
	border-color: var(--book-green);
	box-shadow: 0 0 0 3px rgba(26, 122, 78, .12);
}
.bk-input.is-invalid { border-color: #d64545; }
.bk-input.is-invalid:focus { box-shadow: 0 0 0 3px rgba(214, 69, 69, .12); }
.bk-err { display: block; margin-top: 5px; font-size: 13px; color: #d64545; }

/* ===== Krok 3 termín: hybrid layout — kalendář 2/3 + seznam časů 1/3 (desktop), pod sebe (mobil) ===== */
/* align-items: stretch → okno časů se roztáhne na výšku kalendáře (ten roste s šířkou monitoru). */
.bk-term { display: flex; flex-wrap: wrap; gap: 24px 28px; align-items: stretch; margin-top: 6px; }
/* Kalendář si drží min. šířku (~2/3), časy zbytek (~1/3). Když se nevejdou, časy se zalomí dolů
   (na menších PC tak má kalendář vždy dost místa, nemusí se zužovat). */
.bk-term-cal { flex: 2 1 300px; min-width: 290px; }
.bk-term-times { flex: 1 1 150px; min-width: 145px; display: flex; flex-direction: column; }
.bk-term-times-h { font-family: var(--font-head); text-transform: uppercase; font-size: 16px; color: #01150c; margin-bottom: 10px; }
/* Okno časů má PEVNOU výšku (~jako kalendář) → při přenačítání nic neposkakuje; loader uprostřed. */
.bk-times-body { position: relative; flex: 1 1 0; min-height: 0; }
.bk-term-times #time-slots { height: 100%; overflow-y: auto; padding-right: 2px; box-sizing: border-box; }
/* Časy po hodinách: každý řádek = jedna hodina (:00 vlevo, :30 vedle). */
#time-slots { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 8px; }
.slot-row { display: flex; gap: 8px; }
.slot-row::before, .slot-row::after { content: none !important; display: none !important; }
/* Pevná šířka chipů — ať se nerozjíždí podle šířky textu (8:30 vs 11:00) ani při výběru. */
.slot-row .slot-pick { flex: 0 0 76px; width: 76px; box-sizing: border-box; text-align: center; margin: 0; }
@media (max-width: 767px) {
	.bk-term { flex-direction: column; gap: 16px; }
	/* Na mobilu se skládá pod sebe — žádné roztahování, okno i sloty volně rostou, loader statický. */
	.bk-term-times { flex: none; width: 100%; display: block; }
	.bk-times-body { flex: none; min-height: 0; }
	.bk-term-times #time-slots { height: auto; max-height: none; }
	.bk-dots-slots { position: static; justify-content: flex-start; margin: 6px 0; }
	/* A: na mobilu kalendář zúžit a na střed. */
	.bk-term-cal .bk-cal { max-width: 360px; margin-left: auto; margin-right: auto; }
	/* Na mobilu hodinové seskupení nepoužívat — sloty normálně vedle sebe (wrap). */
	#time-slots { flex-direction: row; flex-wrap: wrap; }
	.slot-row { display: contents; }
}

/* ===== Inline kalendář (krok 3) — měsíc s indikací dostupnosti per den ===== */
.bk-cal { margin-top: 0; }
.bk-cal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}
.bk-cal-head strong { font-family: var(--font-head); text-transform: uppercase; font-size: 22px; color: #01150c; }
.bk-cal-nav {
	width: 36px; height: 36px;
	border: 1px solid #d4d4d4;
	border-radius: 8px;
	background: #fff;
	font-size: 20px;
	line-height: 1;
	color: #01150c;
	cursor: pointer;
	transition: .15s;
}
.bk-cal-nav:hover:not(:disabled) { border-color: var(--book-green); color: var(--book-green); }
.bk-cal-nav:disabled { opacity: .35; cursor: not-allowed; }

.bk-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
/* Mockupový clearfix přidává ::before/::after → jako grid-items posouvaly dny a zalamovaly „ne". */
.bk-cal-grid::before, .bk-cal-grid::after { content: none !important; display: none !important; }
/* Tělo kalendáře — pevná min. výška (≈ 6 týdnů), ať se při načítání / mezi měsíci nic neposkakuje.
   Během načítání dostupnosti se obsah skryje a uprostřed běží mikro loader (poskakující tečky). */
.bk-cal-body { position: relative; }
/* Vzduch pod kalendářem (časy se přes stretch protáhnou stejně → vejde se víc časových bloků). */
.bk-cal-content { padding-bottom: 55px; }
/* Během načítání mřížku jen schováme (visibility) — drží svou výšku, takže nic neposkakuje. */
.bk-cal-content.is-hidden { visibility: hidden; }
/* Kalendář: loader vycentrovaný přes celé tělo. */
.bk-cal-loader { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }

/* Sdílený mikro loader — poskakující tečky (kalendář i časy). ~30 % menší než původní. */
.bk-dots { display: inline-flex; align-items: center; gap: 5px; }
.bk-dots span {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--book-green);
	animation: bk-dot-bounce 1.1s infinite ease-in-out both;
}
.bk-dots span:nth-child(2) { animation-delay: .16s; }
.bk-dots span:nth-child(3) { animation-delay: .32s; }
.bk-dots-slots { position: absolute; inset: 0; justify-content: center; }
@keyframes bk-dot-bounce {
	0%, 70%, 100% { transform: translateY(0); opacity: .35; }
	35% { transform: translateY(-6px); opacity: 1; }
}
.bk-cal-dow { margin-bottom: 4px; }
.bk-cal-dow span {
	text-align: center;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .5px;
	color: #8a978f;
	padding: 4px 0;
}
.bk-cal-cell { aspect-ratio: 1 / 0.82; }
.bk-cal-day {
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	border: 1px solid transparent;
	border-radius: 8px;
	cursor: pointer;
	transition: .12s;
}
.bk-cal-day .cal-num { font-size: 16px; color: #01150c; font-weight: 500; }
.bk-cal-day .cal-dots { display: flex; gap: 2px; min-height: 7px; }
.bk-cal-day:hover:not(.is-disabled) { border-color: var(--book-green); background: rgba(26, 122, 78, .06); }
.bk-cal-day.is-selected { background: var(--brand-green); border-color: var(--brand-green); }
.bk-cal-day.is-selected .cal-num { color: #fff; }
.bk-cal-day.is-selected .day-dot { background: #fff; }
/* Nedostupné dny (mimo směnu / minulost) — šrafování, bez interakce. */
.bk-cal-day.is-disabled {
	cursor: default;
	background: repeating-linear-gradient(45deg, #fff, #fff 4px, #ffe7da 4px, #ffe7da 8px);
}
.bk-cal-day.is-disabled .cal-num { color: #d8b6a6; }

.bk-cal-legend { margin-top: 14px; font-size: 13px; color: #5a6b62; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.bk-cal-legend .day-dot { background: var(--book-green); }

/* „Pamatuj kontakt" — decentní info-lišta */
.bk-remember {
	display: flex;
	align-items: center;
	gap: 10px;
	background: rgba(26, 122, 78, .08);
	border: 1px solid rgba(26, 122, 78, .25);
	border-radius: 8px;
	padding: 10px 14px;
	margin-bottom: 20px;
	font-size: 14px;
	color: #0f5235;
}
.bk-remember i { font-size: 18px; }
.bk-remember a { margin-left: auto; color: var(--book-green); font-weight: 600; text-decoration: underline; white-space: nowrap; }

/* ===== Krok 4: souhrn + dokončení ===== */
.bk-summary { border: 1px solid #e3e6e4; border-radius: 10px; overflow: hidden; background: #fff; }
/* Pevná dvousloupcová mřížka — popisky i hodnoty zarovnané do sloupců (ne ragged jako u space-between). */
.bk-summary-row { display: grid; grid-template-columns: 128px 1fr; gap: 4px 14px; align-items: baseline; padding: 11px 16px; border-bottom: 1px solid #eef1ef; font-size: 15px; }
/* Mockupový clearfix přidává ::before/::after → jako grid-items rozhazují sloupce. Vypnout. */
.bk-summary-row::before, .bk-summary-row::after { content: none !important; display: none !important; }
.bk-summary-row:last-child { border-bottom: 0; }
.bk-summary-row .lbl { color: #6b7a72; }
.bk-summary-row .val { font-weight: 500; color: #01150c; text-align: left; }
@media (max-width: 420px) { .bk-summary-row { grid-template-columns: 1fr; gap: 2px; } }

/* Cena — samostatná tabulka pod souhrnem (stejný styl), badge vlevo, poznámka vpravo. */
.bk-summary-cena { margin-top: 14px; }
.bk-summary-price { align-items: center; }
.bk-summary-price .val { display: flex; align-items: center; gap: 12px; }
.bk-summary-price .val::before, .bk-summary-price .val::after { content: none !important; display: none !important; }
.bk-price-badge { font-family: var(--font-head); font-size: 16px; font-weight: 700; color: #fff; background: var(--book-green); padding: 4px 13px; border-radius: 6px; white-space: nowrap; }
.bk-paynote { margin-left: auto; font-size: 13px; color: #6b7a72; white-space: nowrap; }

.bk-opt { text-transform: none; color: #9aa6a0; font-family: var(--font-body); letter-spacing: 0; }
.bk-textarea { height: 84px; resize: vertical; padding: 10px 14px; line-height: 1.5; }

/* Souhlas jako boxové potvrzení — stejný jazyk jako výběr služby v kroku 1 (kolečko + fajfka, zeleně). */
.bk-agree { position: relative; display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 13px 18px; border: 1px solid #d4d4d4; border-radius: 6px; background: #fff; font-size: 15px; color: #01150c; cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.bk-agree input { position: absolute; opacity: 0; pointer-events: none; }
.bk-agree::before { content: ''; flex: 0 0 auto; width: 24px; height: 24px; border: 2px solid #c4c4c4; border-radius: 50%; background: #fff; transition: .15s; }
.bk-agree::after { content: ''; position: absolute; left: 26px; top: 50%; width: 7px; height: 12px; border: solid #1a7a4e; border-width: 0 3px 3px 0; transform: translateY(-62%) rotate(45deg); opacity: 0; transition: opacity .15s; }
.bk-agree:hover { border-color: var(--brand-green); }
/* Stav „zaškrtnuto": .is-selected (Alpine ve wizardu) NEBO nativní :checked (login formulář bez Alpine). */
.bk-agree.is-selected,
.bk-agree:has(input:checked) { background: var(--brand-green); border-color: var(--brand-green); color: #fff; }
.bk-agree.is-selected::before,
.bk-agree:has(input:checked)::before { border-color: #fff; background: #fff; }
.bk-agree.is-selected::after,
.bk-agree:has(input:checked)::after { opacity: 1; }
.bk-agree a { color: var(--book-green); text-decoration: underline; }
.bk-agree.is-selected a,
.bk-agree:has(input:checked) a { color: #fff; }

.bk-submit { width: 100%; margin-top: 20px; }
.bk-submit-err { margin-top: 10px; color: #d64545; font-size: 14px; }
.bk-confirm-note { margin-top: 10px; text-align: center; font-size: 13px; color: #6b7a72; line-height: 1.5; }
.bk-gdpr-note { margin-top: 10px; font-size: 13px; color: #6b7a72; line-height: 1.5; }
.bk-gdpr-note a { color: var(--book-green); text-decoration: underline; }

/* Success obrazovka — nahradí wizard po dokončení */
.bk-success { background: #fff; border-radius: 14px; padding: 44px 34px; text-align: center; color: #01150c; }
.bk-success-icon { width: 74px; height: 74px; margin: 0 auto 18px; border-radius: 50%; background: var(--book-green); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 40px; }
.bk-success h2 { font-family: var(--font-head); text-transform: uppercase; margin: 0 0 12px; color: #01150c; }
.bk-success p { color: #5a6b62; margin: 0 0 8px; }
.bk-summary-success { text-align: left; max-width: 500px; margin: 22px auto 0; }
.bk-success .btn-book { width: auto; margin-top: 24px; }
.bk-confirm-page { margin: 40px auto; max-width: 560px; }
.bk-error-icon { background: #d64545; font-family: var(--font-head); font-size: 44px; }

#custom legend { color: #01150c; }
#custom h3 { color: #01150c; font-size: 18px; margin: 18px 0 10px; text-transform: uppercase; }

/* Řádky služeb — samostatné boxy (rámeček + mezera) dle mockupu (.radio_input label),
   kolečko se zaškrtnutím vlevo, název uppercase, cena vpravo, vybraný = tmavě zelený. */
.radio_input label:has(.price) {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	margin: 0 0 7px 0;
	padding: 7px 18px;
	border: 1px solid #d4d4d4;
	border-radius: 6px;
	background: #fff;
	text-transform: uppercase;
	font-family: var(--font-head);
	font-size: 17px;
	color: #01150c;
	cursor: pointer;
	transition: border-color .15s, background .15s, color .15s;
}
/* kolečko (prázdné) */
.radio_input label:has(.price)::before {
	content: '';
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	border: 2px solid #c4c4c4;
	border-radius: 50%;
	background: #fff;
	transition: .15s;
}
/* zaškrtnutí (skryté, zobrazí se u vybraného) */
.radio_input label:has(.price)::after {
	content: '';
	position: absolute;
	left: 26px;
	top: 50%;
	width: 7px;
	height: 12px;
	border: solid #1a7a4e;
	border-width: 0 3px 3px 0;
	transform: translateY(-62%) rotate(45deg);
	opacity: 0;
	transition: opacity .15s;
}
.radio_input label:has(.price):hover { border-color: var(--brand-green); }
.radio_input label:has(.price) span:not(.price) { flex: 1; }
.radio_input label:has(.price) .price { margin-left: auto; white-space: nowrap; font-weight: 600; }
/* vybraný řádek — tmavě zelený box, bílý text, kolečko s bílým „fajfkem" */
.radio_input label:has(.price).is-selected {
	background: var(--brand-green);
	border-color: var(--brand-green);
	color: #fff;
	outline: none;
}
/* vybrané kolečko = bílé plné, v něm výrazná tučná zelená fajfka */
.radio_input label:has(.price).is-selected::before { border-color: #fff; background: #fff; }
.radio_input label:has(.price).is-selected::after { border-color: #1a7a4e; opacity: 1; }

/* Souhrn / podmínky / volby na bílé kartě = tmavý text (default), žádné světlé overrides. */

/* Barbeři (krok 3) — zvýraznění vybraného zeleně. */
.radio_input label.is-selected { outline-color: var(--book-green); }
#time-slots .slot-pick.is-selected { background: var(--book-green); border-color: var(--book-green); }
/* Splněný krok — místo tmavého podbarvení jen fajfka v rohu; zamčený krok ztlumený, bez kurzoru. */
.stepy-titles li { position: relative; }
.stepy-titles li .step-check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	vertical-align: middle;
	margin-left: 6px;
	margin-top: -1px;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: var(--book-green);
	color: #fff;
	font-family: var(--font-body);
	font-size: 11px;
	line-height: 1;
	font-weight: 700;
}
.stepy-titles li.is-locked { cursor: default; opacity: .6; }

/* ===== Právní modaly — sjednocení barev/fontů textu (default: modré linky + šedý text = rozházené) ===== */
#terms-txt .modal-content,
#privacy-txt .modal-content { font-family: var(--font-body); }
#terms-txt .modal-title,
#privacy-txt .modal-title { color: var(--brand-green); }
#terms-txt .modal-body,
#privacy-txt .modal-body { color: #2b3a33; font-size: 15px; line-height: 1.65; }
#terms-txt .modal-body p,
#privacy-txt .modal-body p { margin: 0 0 12px; }
#terms-txt .modal-body strong,
#privacy-txt .modal-body strong { color: var(--brand-green); font-weight: 600; }
#terms-txt .modal-body a,
#privacy-txt .modal-body a { color: var(--book-green); text-decoration: underline; }

/* ===== Zelené tlačítko wizardu (POKRAČOVAT / Dokončit) — dle mockupu ===== */
.btn-book {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--book-green);
	color: #fff;
	border: 0;
	border-radius: 8px;
	padding: 14px 44px;
	font-family: var(--font-head);
	text-transform: uppercase;
	font-size: 20px;
	letter-spacing: .5px;
	cursor: pointer;
	transition: background .25s;
}
.btn-book:hover { background: #11583a; color: #fff; }
.btn-book[disabled] { opacity: .5; cursor: not-allowed; }
/* Navigace kroků na JEDNOM řádku: Zpět vlevo, Pokračovat vpravo.
   display:flex MUSÍ být v CSS (ne inline) — x-show by inline display při zobrazení smazal. */
.wizard-nav { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.wizard-nav .btn-book { margin-left: auto; }

/* ===== Krok 2 — poznámka pro přihlášeného zákazníka (předvyplněno + zamčeno) ===== */
.bk-loggedin-note {
	background: rgba(26, 122, 78, .08);
	border: 1px solid rgba(26, 122, 78, .25);
	border-radius: 8px;
	padding: 10px 14px;
	margin-bottom: 18px;
	font-size: 14px;
	color: #0f5235;
}
.bk-loggedin-note a { color: var(--book-green); font-weight: 600; text-decoration: underline; white-space: nowrap; }

/* Předvyplněná uzamčená pole (readonly) — vizuálně odlišit, že nejdou měnit. */
.bk-input.is-readonly { background: #f1f3f2; color: #4a5a52; cursor: not-allowed; }

/* ===== „Moje rezervace" (Booking:Account) — bílá karta na tmavém shellu ===== */
.bk-account { background: #fff; border-radius: 0 14px 14px 14px; padding: 34px 36px; margin: 24px 0; color: var(--brand-dark); }
.bk-account-title { font-family: var(--font-head); text-transform: uppercase; color: var(--brand-dark); margin: 0 0 6px; }
.bk-account-lead { color: #555; margin-bottom: 22px; }
.bk-account-sub { font-family: var(--font-head); text-transform: uppercase; font-size: 18px; color: var(--book-green); margin: 26px 0 12px; }
.bk-account-empty { color: #777; }
.bk-account-empty a { color: var(--book-green); text-decoration: underline; }

.bk-rez-list { list-style: none; margin: 0; padding: 0; }
.bk-rez-list::before, .bk-rez-list::after { content: none !important; display: none !important; }
.bk-account-toolbar { margin: 6px 0 10px; }
.bk-rez-item { border: 1px solid #d4d4d4; border-radius: 10px; margin-bottom: 12px; overflow: hidden; }
.bk-rez-item::before, .bk-rez-item::after { content: none !important; display: none !important; }
.bk-rez-item.is-upcoming { border-left: 4px solid var(--book-green); }
.bk-rez-list.is-past .bk-rez-item { opacity: .72; }
.bk-rez-item.is-cancelled { opacity: .58; }
/* Celá položka je klikací odkaz na detail/správu rezervace. */
.bk-rez-link {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	padding: 14px 18px;
	text-decoration: none;
	color: inherit;
	transition: background .15s;
}
.bk-rez-link:hover { background: rgba(26, 122, 78, .05); }
.bk-rez-main { display: flex; flex-direction: column; gap: 2px; flex: 1 1 200px; }
.bk-rez-title { font-family: var(--font-head); text-transform: uppercase; font-size: 17px; color: var(--brand-dark); }
.bk-rez-barber { font-size: 13px; color: #777; }
.bk-rez-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.bk-rez-when { font-size: 14px; color: #333; }
.bk-rez-arrow { flex: 0 0 auto; font-size: 26px; line-height: 1; color: #b7c0bb; }
.bk-rez-state { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; padding: 3px 10px; border-radius: 20px; background: #eef1ef; color: #555; white-space: nowrap; }
.bk-rez-state[data-state="confirmed"] { background: rgba(26, 122, 78, .12); color: #0f5235; }
.bk-rez-state[data-state="charged"] { background: rgba(26, 122, 78, .12); color: #0f5235; }
.bk-rez-state[data-state="pending"] { background: rgba(175, 0, 0, .1); color: var(--brand-red); }
.bk-rez-state[data-state="cancelled"], .bk-rez-state[data-state="cust-canel"] { background: #fbeaea; color: #a23535; }

.bk-account-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 28px; }
.bk-forget-link { color: #999; text-decoration: underline; font-size: 14px; }
.bk-forget-link:hover { color: var(--brand-red); }
.bk-account-gdpr { margin-top: 18px; font-size: 13px; color: #999; }
.bk-account-gdpr a { color: var(--book-green); text-decoration: underline; }

/* ===== Info stránka rezervace (Booking:Manage) ===== */
.bk-manage-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
/* Mockupový clearfix přidává ::before/::after → jako flex-items tlačí titulek a badge do středu. Vypnout. */
.bk-manage-head::before, .bk-manage-head::after { content: none !important; display: none !important; }
.bk-manage-head .bk-account-title { margin: 0; }
.bk-manage-state { font-size: 13px; padding: 5px 14px; }

.bk-countdown {
	font-family: var(--font-head);
	text-transform: uppercase;
	font-size: 20px;
	letter-spacing: .3px;
	color: #01150c;
	background: rgba(26, 122, 78, .08);
	border: 1px solid rgba(26, 122, 78, .22);
	border-radius: 10px;
	padding: 16px 18px;
	margin: 14px 0 22px;
}
.bk-countdown--soon, .bk-countdown--now { background: rgba(26, 122, 78, .12); border-color: rgba(26, 122, 78, .3); }
.bk-countdown--cancelled { background: #fbeaea; border-color: #f3c9c9; color: #8a2a2a; }
.bk-countdown--past { background: #f1f3f2; border-color: #e3e6e4; color: #4a5a52; }

/* Drobné neutrální odkazy-tlačítka (přidat do kalendáře / mapa / navigace). */
.bk-cal-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.bk-pill {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	border: 1px solid #d7ddd9;
	color: #2b3a33;
	border-radius: 7px;
	padding: 5px 11px;
	font-size: 13px;
	text-decoration: none;
	transition: .15s;
}
.bk-pill:hover { border-color: var(--book-green); color: var(--book-green); }
.bk-pill--danger { border-color: #e3b9b9; color: #a23535; }
.bk-pill--danger:hover { border-color: #c0392b; color: #c0392b; background: #fbeaea; }
.bk-pill.is-busy { opacity: .6; pointer-events: none; }

/* Blok zrušení — výběr důvodu + červené potvrzovací tlačítko. */
.bk-cancel-reasons { display: flex; flex-direction: column; gap: 8px; }
.btn-book--danger { background: #c0392b; }
.btn-book--danger:hover { background: #a93226; }

.bk-info-card { border: 1px solid #e3e6e4; border-radius: 10px; background: #fff; padding: 16px 18px; margin-bottom: 16px; }
.bk-info-card--warn { border-color: #fde68a; background: #fffbeb; }
.bk-info-card--cancelled { border-color: #f3c9c9; background: #fdf3f3; }
/* Štítek včasné/pozdní zrušení. */
.bk-tag { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 20px; }
.bk-tag--ok { background: rgba(26, 122, 78, .12); color: #0f5235; }
.bk-tag--late { background: #fbeaea; color: #a23535; }
.bk-info-h { font-family: var(--font-head); text-transform: uppercase; font-size: 16px; color: #01150c; margin: 0 0 10px; }
.bk-info-row { display: grid; grid-template-columns: 130px 1fr; gap: 4px 14px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid #eef1ef; font-size: 15px; }
/* Mockupový clearfix přidává ::before/::after → jako grid-items rozhazují sloupce. Vypnout. */
.bk-info-row::before, .bk-info-row::after { content: none !important; display: none !important; }
.bk-info-row:last-child { border-bottom: 0; }
.bk-info-row .lbl { color: #6b7a72; }
.bk-info-row .val { color: #01150c; font-weight: 500; }
.bk-info-p { font-size: 14px; line-height: 1.6; color: #2b3a33; margin: 0 0 8px; }
.bk-info-p:last-child { margin-bottom: 0; }
.bk-info-p a { color: var(--book-green); text-decoration: underline; }
.bk-info-muted { color: #6b7a72; font-weight: 400; }
@media (max-width: 420px) { .bk-info-row { grid-template-columns: 1fr; gap: 2px; } }

.bk-flash { border-radius: 8px; padding: 12px 16px; margin-bottom: 18px; font-size: 14px; }
.bk-flash.success { background: rgba(26, 122, 78, .1); color: #0f5235; border: 1px solid rgba(26, 122, 78, .25); }
.bk-flash.error { background: rgba(175, 0, 0, .08); color: var(--brand-red); border: 1px solid rgba(175, 0, 0, .25); }

/* ===== Magic-link login formulář na „Moje rezervace" (nerozpoznané zařízení) ===== */
.bk-login-form { margin: 18px 0 6px; max-width: 520px; }
.bk-login-form .bk-field { margin-bottom: 16px; }
.bk-login-form .bk-agree { margin-bottom: 12px; }
.bk-login-form .btn-book { margin-top: 8px; }

/* ===== Potvrzovací stránka — akce ve sloupci (hlavní nahoře, Nová rezervace pod ní) ===== */
.bk-confirm-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 24px; }
.bk-confirm-actions .btn-book { margin-top: 0; min-width: 248px; }
/* Ghost = outline bez pozadí (jako tlačítko „Zpět" v procesu). */
.btn-book--ghost { background: transparent; color: var(--brand-dark); border: 1px solid #c7cdc9; }
.btn-book--ghost:hover { background: #f2f4f3; color: var(--brand-dark); }

/* ===== Odhlášení zařízení — ikona (float vpravo, na řádku s pozdravem), bez okraje/pozadí ===== */
.bk-logout {
	float: right;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	margin: 0 0 6px 14px;
	padding: 4px;
	border: 0;
	background: none;
	color: var(--brand-red);
	line-height: 1;
	cursor: pointer;
	transition: color .2s;
}
.bk-logout:hover { color: #7a0000; }
.bk-logout-ico { font-size: 40px; line-height: 1; }
/* Popisek se zjeví až po najetí — pod ikonou. */
.bk-logout-label {
	margin-top: 3px;
	font-family: var(--font-head);
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: .4px;
	opacity: 0;
	transition: opacity .2s;
}
.bk-logout:hover .bk-logout-label { opacity: 1; }