/* ==========================================================================
   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) */
.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 {
	margin: 0.75rem 0 0;
	font-size: 1rem;
	min-height: 1.2em;
}

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

/* Ú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;
}

/* --- 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 */
.mb-stav {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
	font-size: 1rem;
}

/* „Aktuálně nedostupný" — neutrální pilulka, čitelná na světlém i tmavém podkladu
   (widget bývá přes tmavou hero fotku; samostatný podklad + bílý text drží kontrast) */
.mb-stav__label {
	display: inline-block;
	padding: 0.25em 0.75em;
	border-radius: 999px;
	font-weight: 600;
	background: #6b7280;   /* neutrální šedá — stav „nedostupný", brand-neutral */
	color: #fff;           /* bílý text — dostatečný kontrast na obou podkladech */
}

/* „Aktuálně nedostupný" + tlačítko „Hlídací pes" = jeden propojený segment.
   Vlevo šedý stav, vpravo zelená akce, bez mezery → čte se jako jeden prvek
   („je nedostupný, ale rovnou nabízíme hlídání"). */
.mb-stav--nedostupny {
	display: inline-flex;
	align-items: stretch;       /* obě půlky stejně vysoké */
	gap: 0;                     /* segmenty se dotýkají */
	flex-wrap: nowrap;
}

/* Levý segment — stav, zaoblený jen vlevo, výška srovnaná s tlačítkem */
.mb-stav--nedostupny .mb-stav__label {
	display: inline-flex;
	align-items: center;
	padding: 0.55em 1.1em;       /* shodné s .mb-pes-trigger */
	line-height: 1.2;
	border-radius: 999px 0 0 999px;
}

/* Pravý segment — tlačítko, zaoblené jen vpravo */
.mb-stav--nedostupny .mb-pes-trigger {
	border-radius: 0 999px 999px 0;
}

/* Bez svislého posunu na hoveru — jinak by se zvedla jen pravá půlka a segment by se „rozlomil" */
.mb-stav--nedostupny .mb-pes-trigger:hover {
	transform: none;
}