/*
 * Branike CRM — ochrana formulárov lead magnetov (lm-guard.js).
 * Výška výzvy je rezervovaná dopredu (obsah dopĺňa JS z REST) → CLS = 0.
 */
.bcrm-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.bcrm-challenge {
	--bcrm-tile: 56px;
	margin: 0.5em 0 1em;
	display: grid;
	width: 100%;
	box-sizing: border-box;
	/* Kontajner pre @container nižšie: rozloženie podľa šírky formulára. */
	container-type: inline-size;
}

.bcrm-challenge--s {
	--bcrm-tile: 48px;
}

.bcrm-challenge--l {
	--bcrm-tile: 72px;
}

/* Výšku drží neviditeľná kostra z PHP (ghost_html) s tými istými prvkami
   a triedami → rovnakú výšku jej dá téma webu. Kostra ostáva v DOM aj po
   vykreslení výzvy a leží s ňou v JEDNEJ bunke mriežky → slot má výšku
   max(kostra, výzva) a pri prepnutí sa nič nepohne (CLS 0) na každej téme
   a v každom jazyku. Kostra nesie najdlhší názov obrázka = najhorší prípad.
   (6. 10. 2026: pevná rezervácia 168/232 px bola na branike-theme o 4–14 px nízka.) */
.bcrm-challenge > * {
	grid-area: 1 / 1;
	min-width: 0;
}

.bcrm-challenge__ghost {
	visibility: hidden;
}

.bcrm-challenge__set {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.bcrm-challenge__prompt {
	padding: 0;
	margin: 0 0 0.5em;
	font-weight: 600;
	color: inherit;
}

.bcrm-challenge__grid {
	display: grid;
	/* Najužší formulár: 2 v rade (2 + 2 + 2 / 2 + 2). Širšie: pravidlá @container nižšie.
	   Stĺpec = minmax( 0, veľkosť ): dlaždica má najviac zvolenú veľkosť a v úzkom
	   formulári sa zmenší, aby rad ostal celý (mobil: 6 v rade, nie 3 + 3). */
	grid-template-columns: repeat( 2, minmax( 0, var( --bcrm-tile ) ) );
	/* px, nie rem: prahy @container platia pri každom koreni písma témy. */
	gap: 8px;
}

.bcrm-challenge__opt {
	position: relative;
	box-sizing: border-box; /* 56 px VRÁTANE rámu = stopa mriežky; bez toho 60 px vytŕča */
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	border: 2px solid currentColor;
	border-radius: 8px;
	opacity: 0.85;
	cursor: pointer;
}

/* Prepínač ostáva v DOM a fokusovateľný — len je priehľadný cez celú dlaždicu. */
.bcrm-challenge__radio {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.bcrm-challenge__opt:has( .bcrm-challenge__radio:checked ) {
	opacity: 1;
	border-color: var(--wp--preset--color--accent, var(--wp--preset--color--primary, currentColor));
	box-shadow: 0 0 0 2px var(--wp--preset--color--accent, var(--wp--preset--color--primary, currentColor));
}

.bcrm-challenge__opt:has( .bcrm-challenge__radio:focus-visible ) {
	outline: 2px solid var(--wp--preset--color--accent, var(--wp--preset--color--primary, currentColor));
	outline-offset: 2px;
}

.bcrm-challenge__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	line-height: 0;
	pointer-events: none;
}

.bcrm-challenge__icon svg {
	display: block;
	/* Ikona rastie s dlaždicou (m 56 px → ~40 px ako doteraz). */
	width: 76%;
	height: auto;
}

/* ── Rozloženie dlaždíc (Nastavenia: veľkosť s/m/l/full, počet 4/6) ──────
   Rady sú vždy VYVÁŽENÉ: 6 → 6 / 3 + 3 / 2 + 2 + 2, 4 → 4 / 2 + 2 — nikdy 4 + 2
   (Brani 6. 10. 2026). Počet stĺpcov určuje šírka FORMULÁRA (@container na
   slote), nie okna. Veľkosť je NAJVÄČŠIA dlaždica; v užšom formulári sa
   dlaždice zmenšia až na 42 px, aby rad ostal celý — telefón (formulár
   300–370 px) má 6 v rade (Brani 7. 10.: branike.com/kontakt na mobile 5 + 1).
   Prahy: 6 × 42 + 5 × 8 = 292 px, 3 × 42 + 2 × 8 = 142 px, 4 × 42 + 3 × 8 = 192 px.
   „Na celú šírku" = dlaždice bez hornej hranice (1fr). */
.bcrm-challenge--full {
	--bcrm-tile: 1fr;
}

@container ( width >= 142px ) {
	.bcrm-challenge:not(.bcrm-challenge--n4) .bcrm-challenge__grid {
		grid-template-columns: repeat( 3, minmax( 0, var( --bcrm-tile ) ) );
	}
}

@container ( width >= 292px ) {
	.bcrm-challenge:not(.bcrm-challenge--n4) .bcrm-challenge__grid {
		grid-template-columns: repeat( 6, minmax( 0, var( --bcrm-tile ) ) );
	}
}

@container ( width >= 192px ) {
	.bcrm-challenge--n4 .bcrm-challenge__grid {
		grid-template-columns: repeat( 4, minmax( 0, var( --bcrm-tile ) ) );
	}
}

.bcrm-challenge__q {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
}

.bcrm-challenge__q input {
	width: 5em;
}

.bcrm-challenge__hint {
	margin-top: 0.5em;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font-size: 0.875em;
	text-decoration: underline;
	cursor: pointer;
}

.bcrm-challenge__live {
	margin: 0.25em 0 0;
	min-height: 1.5em;
	font-size: 0.875em;
}

.bcrm-challenge__live--error {
	color: var(--wp--preset--color--error, #b91c1c);
	font-weight: 600;
}

.bcrm-challenge--invalid .bcrm-challenge__opt,
.bcrm-challenge--invalid .bcrm-challenge__q input {
	border-color: var(--wp--preset--color--error, #b91c1c);
}

.bcrm-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
}

/* ── Súhlasy (BCRM_Consent, 7. 10. 2026) ───────────────────────────────────
   Farba z okolia (`inherit`) — formuláre stoja aj na tmavom pozadí
   (liecivasilaprirody.sk), kde by predvolená tmavá farba zmizla. */
.bcrm-consents {
	margin: 0.25em 0 0.75em;
}

.bcrm-consent {
	margin: 0 0 0.5em;
	color: inherit;
}

.bcrm-consent__label {
	display: flex;
	align-items: flex-start;
	gap: 0.5em;
	font-size: 0.875em;
	line-height: 1.45;
	font-weight: 400;
	cursor: pointer;
	color: inherit;
}

.bcrm-consent__box {
	flex: 0 0 auto;
	width: 1.125em;
	height: 1.125em;
	margin: 0.15em 0 0;
	accent-color: currentColor;
}

.bcrm-consent__label a {
	color: inherit;
	text-decoration: underline;
}

.bcrm-consent__box[aria-invalid="true"] {
	outline: 2px solid var(--wp--preset--color--error, #b91c1c);
	outline-offset: 2px;
}

.bcrm-consent__live {
	margin: 0;
	min-height: 1.25em;
	font-size: 0.875em;
}

.bcrm-consent__live--error {
	color: var(--wp--preset--color--error, #b91c1c);
	font-weight: 600;
}