/*
 * 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 {
	margin: 0.5em 0 1em;
	display: grid;
}

/* 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;
	/* 6 × 56 px + 5 × 8 px = 376 px → jeden rad; užšie: 3–5 v rade = dva rady. */
	grid-template-columns: repeat( auto-fill, 56px );
	/* px, nie rem: počet dlaždíc v rade nezávisí od koreňa 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: 56px;
	height: 56px;
	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;
}

.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;
}