/* ==========================================================================
   Můj byt — tabulka dostupných bytů
   Barvy a fonty dědí z theme/Elementoru, plugin styluje jen strukturu.
   ========================================================================== */

/* Akcentní barva (tlačítka, modal) — přepisuje ji nastavení pluginu inline stylem.
   Fallback zde pro případ chybějícího nastavení (Břetislavka zelená). */
:root {
	--mb-accent: #0a875a;
	--mb-accent-contrast: #ffffff;
}

/* Wrapper — na úzkých displejích umožní horizontální scroll tabulky */
.mb-tabulka-wrap {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* Tabulka na plnou šířku, písmo dědí z theme (min 16px kvůli čitelnosti) */
.mb-tabulka {
	width: 100%;
	border-collapse: collapse;
	font-size: 1rem;
}

/* Hlavička — zarovnání vlevo, jemně zvýrazněná tučným řezem */
.mb-tabulka th {
	text-align: left;
	font-weight: 700;
	padding: 0.75em 1em;
	white-space: nowrap;
	border: 0;                                   /* reset rámečku buněk z tématu (např. reset.css: table th{border:1px}) */
}

/* Buňky — jen spodní oddělovač řádků (povolený vzor: border-bottom jako separator v tabulce) */
.mb-tabulka td {
	padding: 0.75em 1em;
	border: 0;                                   /* reset bočních/horních hran z tématu — žádný dekorativní box */
	border-bottom: 1px solid rgba(0, 0, 0, 0.1); /* ponechán jen separator řádků */
	vertical-align: middle;
}

/* Oddělovač i pod hlavičkou, výraznější */
.mb-tabulka thead th {
	border-bottom: 2px solid rgba(0, 0, 0, 0.2);
}

/* Odkaz na detail bytu — podtržení až na hover; barva = tmavý text tabulky
   (color: inherit, ne barva odkazů z tématu — na zeleném webu prosvítala magenta) */
.mb-tabulka td a {
	text-decoration: none;
	font-weight: 600;
	color: inherit;
}

.mb-tabulka td a:hover {
	text-decoration: underline;
}

/* Badge dostupnosti — jemné barevné pozadí, žádné stíny */
.mb-badge {
	display: inline-block;
	padding: 0.25em 0.75em;
	border-radius: 999px;
	font-size: 1rem;
	white-space: nowrap;
	background: rgba(0, 0, 0, 0.06);
}

/* Volný ihned — jemná zelená */
.mb-badge--ihned {
	background: rgba(46, 160, 67, 0.14);
	color: #1a7a31;
}

/* Volný od data — jemná oranžová */
.mb-badge--od {
	background: rgba(212, 130, 0, 0.14);
	color: #9a5f00;
}

/* Prázdný stav — vycentrovaný text + tlačítko hlídacího psa */
.mb-prazdny-stav {
	font-size: 1rem;
	margin: 0;
	padding: 1.5rem 0;
	text-align: center;
}

.mb-prazdny-stav p {
	margin: 0 0 1rem;
}

/* ==========================================================================
   Hlídací pes — formulář přihlášení / odhlašovací stránka
   ========================================================================== */

/* Kontejner formuláře — jemné pozadí, žádný dekorativní border, žádný silný stín */
.mb-watchdog {
	margin: 1.5rem 0;
	padding: 1.5rem;
	border-radius: var(--card-radius, 8px);
	background: rgba(0, 0, 0, 0.03);
}

/* Nadpis formuláře — dědí font z theme */
.mb-watchdog__nadpis {
	margin: 0 0 0.5rem;
	font-size: 1.25rem;
}

/* Popisek nad formulářem */
.mb-watchdog__popis {
	margin: 0 0 1rem;
	font-size: 1rem;
}

/* Řádek formuláře — e-mail + tlačítko vedle sebe, na mobilu pod sebou */
.mb-watchdog__form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: stretch;
}

/* Vstup e-mailu — font-size min 1rem (iOS Safari auto-zoom při focusu) */
.mb-watchdog__input {
	flex: 1 1 220px;
	min-width: 0;
	padding: 0.7em 0.9em;
	font-size: 1rem;
	border: 1px solid rgba(0, 0, 0, 0.2); /* border kolem celého prvku — povolený vzor */
	border-radius: 10px;
	background: #fff;
}

.mb-watchdog__input:focus {
	outline: 2px solid var(--mb-accent);
	outline-offset: 1px;
	border-color: var(--mb-accent);
}

/* Tlačítko odeslání — v barvě webu (akcent z nastavení pluginu) */
/* Souhlas se zpracováním osobních údajů — povinný checkbox ve formulářích hlídacího psa */
.mb-consent {
	display: flex;
	flex: 1 1 100%;              /* v horizontálním .mb-watchdog__form zabrat vlastní řádek */
	align-items: flex-start;
	gap: 0.55em;
	margin: 0.1em 0 0.2em;
	font-size: 0.95rem;          /* pomocný label pod inputem, čitelný */
	line-height: 1.4;
	text-align: left;
	cursor: pointer;
}

.mb-consent input[type="checkbox"] {
	flex: 0 0 auto;
	width: 1.05em;
	height: 1.05em;
	margin-top: 0.15em;          /* zarovnat zaškrtávátko k prvnímu řádku textu */
	accent-color: var(--mb-accent);
	cursor: pointer;
}

.mb-consent__text a {
	color: var(--mb-accent);
	text-decoration: underline;  /* odkaz na zásady jasně rozpoznatelný */
}

.mb-watchdog__submit {
	flex: 0 0 auto;
	padding: 0.7em 1.4em;
	font: inherit;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	border: none;
	border-radius: 10px;
	background: var(--mb-accent);
	color: var(--mb-accent-contrast);
	transition: transform 0.15s ease, filter 0.15s ease;
}

.mb-watchdog__submit:hover {
	transform: translateY(-1px);
	filter: brightness(1.08);
}

.mb-watchdog__submit:focus-visible {
	outline: 2px solid var(--mb-accent);
	outline-offset: 2px;
}

.mb-watchdog__submit:disabled {
	opacity: 0.6;
	cursor: default;
	transform: none;
	filter: none;
}

/* Honeypot — skryté pole proti botům (mimo obrazovku, mimo tab pořadí) */
.mb-watchdog__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Cloudflare Turnstile widget — odsazení ve formuláři */
.mb-turnstile {
	margin: 0.25rem 0 0.75rem;
}

/* Skrytý label pro čtečky (přístupnost) */
.mb-watchdog__srt {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

/* Hláška pod formulářem — prázdná dokud není text */
.mb-watchdog__zprava,
.mb-resubscribe__zprava,
.mb-unsubscribe__zprava {
	margin: 0.75rem 0 0;
	font-size: 1rem;
	min-height: 1.2em;
}

.mb-watchdog__zprava:empty,
.mb-resubscribe__zprava:empty,
.mb-unsubscribe__zprava:empty {
	margin: 0;
	min-height: 0;
}

/* Dvoukrokové odhlášení — který blok/tlačítko je vidět, řídí atribut [hidden] (přepíná JS).
   Vlastní pravidlo se silnější specificitou než UA reset, ať ho téma nepřebije a oba kroky
   se nezobrazily naráz. */
.mb-odhlasit__potvrzeni[hidden],
.mb-odhlasit__hotovo[hidden],
.mb-watchdog--odhlasit [hidden] {
	display: none;
}

/* Úspěch — jemná zelená */
.mb-zprava--ok {
	color: #1a7a31;
}

/* Chyba — jemná červená */
.mb-zprava--chyba {
	color: #b3261e;
}

/* Odhlašovací stránka — větší odsazení hlavní hlášky */
.mb-watchdog--odhlasit .mb-watchdog__zprava {
	font-size: 1.1rem;
	font-weight: 600;
}

/* ==========================================================================
   Hlídací pes — tlačítko u nedostupného bytu + modální okno (moderní)
   ========================================================================== */

/* Tlačítko „Hlídací pes" — plně v barvě webu (akcent z nastavení) */
.mb-pes-trigger {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.55em 1.1em;
	font: inherit;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	border: none;
	border-radius: 999px;
	background: var(--mb-accent);
	color: var(--mb-accent-contrast);
	transition: transform 0.15s ease, filter 0.15s ease;
}

.mb-pes-trigger:hover {
	transform: translateY(-1px);
	filter: brightness(1.08);
}

.mb-pes-trigger:focus-visible {
	outline: 2px solid var(--mb-accent);
	outline-offset: 2px;
}

.mb-pes-icon {
	flex: 0 0 auto;
}

/* Stav „Nedostupný" + zvoneček v jedné pilulce s jemným outline kolem CELÉHO prvku
   (border na všech 4 stranách je povolený). Vlevo neutrální šedý text stavu, vpravo
   zelený kruh se zvonečkem = pozvánka k hlídání. Klik kdekoliv otevře modal.
   Barva textu i okraje se řídí auto-kontrastem (--mb-stav-text: tmavá na světlém
   podkladu, bílá na tmavé hero fotce) — viz JS effectiveBg(). */
.mb-pes-pill {
	gap: 0.55em;
	padding: 0.2em 0.25em 0.2em 1em;   /* víc vlevo (text), vpravo kruh lícuje s okrajem */
	background: transparent;           /* přebíjí plné akcentní pozadí base .mb-pes-trigger */
	border: 1px solid #d1d5db;         /* fallback pro prohlížeče bez color-mix */
	border: 1px solid color-mix(in srgb, var(--mb-stav-text, #fff) 28%, transparent);
	border-radius: 999px;
	transition: background 0.15s ease; /* jemné podbarvení na hover, bez zvednutí base */
}

/* Hover — světle šedé podbarvení; odstín z auto-kontrastu, aby text „Nedostupný" zůstal
   dostatečně čitelný na světlé kartě (jemně tmavé) i na tmavé hero fotce (jemně světlé) */
.mb-pes-pill:hover {
	transform: none;                   /* zrušit zvednutí z base .mb-pes-trigger:hover */
	filter: none;                      /* zrušit brightness z base — neměnit barvu textu */
	background: #f3f4f6;               /* fallback — světle šedá */
	background: color-mix(in srgb, var(--mb-stav-text, #fff) 8%, transparent);
}

.mb-pes-pill__label {
	color: #6b7280;                    /* fallback — neutrální šedá */
	color: color-mix(in srgb, var(--mb-stav-text, #fff) 78%, transparent);
	font-weight: 600;
	font-size: 1rem;
}

/* Pravý segment — zelený (akcentní) kruh se zvonečkem, výrazný na obou podkladech */
.mb-pes-pill__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 2.1em;
	height: 2.1em;
	border-radius: 50%;
	background: var(--mb-accent);
	color: var(--mb-accent-contrast);
}

/* --- Tooltip nad zvonečkem --- */
/* Připnutý k <body> přes JS (position: fixed), aby ho Loop Grid karta s overflow:hidden
   neořízla. Pozici dopočítává JS z getBoundingClientRect zvonečku. */
.mb-pes-tooltip {
	position: fixed;
	z-index: 99998;                 /* těsně pod modalem (99999) */
	max-width: 260px;
	padding: 0.7em 0.9em;
	border-radius: var(--card-radius, 10px);
	background: #1f2430;            /* tmavý box — čitelný na světlém i tmavém podkladu */
	color: #fff;
	font-size: 0.9rem;             /* pomocný popisek */
	line-height: 1.35;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);   /* jemný stín — blur < 10px dle pravidel */
	pointer-events: none;          /* tooltip nebrání kliknutí/hoveru pod sebou */
	opacity: 0;
	transform: translateY(4px);    /* drobné vyjetí při fade-in */
	transition: opacity 0.15s ease, transform 0.15s ease;
}

/* Zobrazený stav (přidává JS na hover/focus zvonečku) */
.mb-pes-tooltip.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Nadpis tooltipu — stav bytu („Aktuálně nedostupný") tučně, výzva pod ním */
.mb-pes-tooltip__title {
	display: block;
	margin-bottom: 0.15em;
	font-weight: 600;
}

/* Šipka dolů ke zvonečku — pouhý trojúhelníkový tvar (ne dekorativní jednostranný border) */
.mb-pes-tooltip::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 6px solid transparent;
	border-top-color: #1f2430;     /* hrot v barvě boxu */
}

/* Respektovat preferenci omezeného pohybu — bez animace, jen on/off */
@media (prefers-reduced-motion: reduce) {
	.mb-pes-tooltip {
		transition: none;
		transform: none;
	}
	.mb-pes-tooltip.is-visible {
		transform: none;
	}
}

/* --- Modální okno --- */
.mb-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}

.mb-modal.mb-modal--open {
	display: flex;
}

/* Backdrop — ztmavení + jemné rozostření pozadí; hloubku dělá on, ne silný stín */
.mb-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(17, 17, 17, 0.55);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	animation: mb-fade 0.18s ease both;
}

/* Dialog — čistá vycentrovaná karta; stín držíme jemný (blur < 10px dle pravidel) */
.mb-modal__dialog {
	position: relative;
	width: 100%;
	max-width: 420px;
	max-height: calc(100vh - 2rem);
	overflow-y: auto;
	padding: 2rem 1.75rem 1.75rem;
	text-align: center;
	background: var(--color-bg, #fff);
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 16px;
	box-shadow: 0 6px 8px rgba(0, 0, 0, 0.18);
	animation: mb-pop 0.2s ease both;
}

/* Hero ikona v kroužku v barvě webu */
.mb-modal__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin: 0 auto 0.85rem;
	border-radius: 50%;
	background: color-mix(in srgb, var(--mb-accent) 14%, transparent);
	color: var(--mb-accent);
}

.mb-modal__title {
	margin: 0 0 0.4rem;
	font-size: 1.35rem;
	line-height: 1.25;
}

.mb-modal__info {
	margin: 0 0 1.25rem;
	font-size: 1rem;
	opacity: 0.75;
}

/* „Máte zájem o:" + chip s názvem bytu v barvě webu */
.mb-modal__byt {
	margin: 0 0 1.1rem;
	font-size: 0.95rem;
}

.mb-modal__byt-nazev {
	display: inline-block;
	padding: 0.2em 0.7em;
	border-radius: 999px;
	background: color-mix(in srgb, var(--mb-accent) 12%, transparent);
	color: var(--mb-accent);
	font-weight: 700;
}

/* Formulář — pole pod sebou, labely vlevo zarovnané */
.mb-modal__form {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	text-align: left;
}

.mb-field {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.mb-field > label {
	font-size: 0.9rem;
	font-weight: 600;
}

.mb-field__opt {
	font-weight: 400;
	opacity: 0.6;
}

/* Pole — font-size min 1rem (iOS auto-zoom), focus ring v barvě webu */
.mb-modal__form input[type="email"],
.mb-modal__textarea {
	width: 100%;
	padding: 0.8em 0.95em;
	font: inherit;
	font-size: 1rem;
	color: inherit;
	border: 1px solid rgba(0, 0, 0, 0.18); /* border kolem celého prvku */
	border-radius: 10px;
	background: #fff;
	transition: border-color 0.15s ease;
}

.mb-modal__textarea {
	resize: vertical;
	min-height: 3.2em;
}

.mb-modal__form input[type="email"]:focus,
.mb-modal__textarea:focus {
	outline: 2px solid var(--mb-accent);
	outline-offset: 1px;
	border-color: var(--mb-accent);
}

/* Odeslat v modalu — na celou šířku */
.mb-modal__form .mb-watchdog__submit {
	width: 100%;
	margin-top: 0.2rem;
}

/* Křížek pro zavření */
.mb-modal__close {
	position: absolute;
	top: 0.6rem;
	right: 0.6rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	cursor: pointer;
	border: none;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.05);
	color: inherit;
	transition: background 0.15s ease;
}

.mb-modal__close:hover {
	background: rgba(0, 0, 0, 0.1);
}

/* Hláška v modalu */
.mb-modal__zprava {
	margin: 0.9rem 0 0;
	font-size: 1rem;
	min-height: 1.2em;
}

.mb-modal__zprava:empty {
	margin: 0;
	min-height: 0;
}

/* Animace (respektuje prefers-reduced-motion) */
@keyframes mb-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes mb-pop {
	from { opacity: 0; transform: translateY(10px) scale(0.97); }
	to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.mb-modal__overlay,
	.mb-modal__dialog {
		animation: none;
	}
}

/* Stav bytu na detailu — řádek s badge/cenou nebo tlačítkem.
   Widget bývá přes tmavou hero fotku → text defaultně bílý, přebarvitelný ovladačem
   „Barva textu" ve Stylu widgetu (CSS proměnná --mb-stav-text). */
.mb-stav {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
	font-size: 1rem;
	color: var(--mb-stav-text, #fff);
}

/* V detailu badge dostupnosti není barevná pilulka jako v tabulce, ale prostý text
   v barvě widgetu — aby byl čitelný i na tmavé fotce (pilulka se slabým pozadím mizela). */
.mb-stav .mb-badge--ihned,
.mb-stav .mb-badge--od {
	background: transparent;
	color: inherit;
	padding: 0;
	font-weight: 600;
}

/* Pilulka „Nedostupný" + (na detailu bytu) proklik na dostupné byty — v jednom řádku.
   flex-wrap: wrap drží na úzkém mobilu pojistku proti přetékání, na detailu je jeden řádek. */
.mb-stav--nedostupny {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: nowrap;   /* pilulka + proklik vždy na jednom řádku (i v EN) */
}

/* Proklik „Zobrazit dostupné byty" — textový odkaz v akcentu se šipkou (jen detail bytu) */
.mb-stav__odkaz {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	font-weight: 600;
	white-space: nowrap;           /* nelámat text odkazu */
	color: var(--mb-accent);       /* světlý podklad → brand zelená */
	text-decoration: none;
}

/* Tmavý podklad (hero fotka) → zesvětlená akcentní barva, aby text zůstal čitelný
   (brand zelená je na tmavém málo kontrastní). Příznak data-mb-dark nastavuje JS. */
.mb-stav[data-mb-dark] .mb-stav__odkaz {
	color: #8fe0bb;                /* fallback — světlá zelená */
	color: color-mix(in srgb, var(--mb-accent) 45%, #fff);
}

.mb-stav__odkaz:hover {
	text-decoration: underline;
}

/* Šipka se na hover odkazu jemně posune doprava */
.mb-stav__odkaz-icon {
	flex: 0 0 auto;
	transition: transform 0.15s ease;
}

.mb-stav__odkaz:hover .mb-stav__odkaz-icon {
	transform: translateX(2px);
}