/*
 * Barometru Comunitar - stiluri frontend, fluide (clamp()/calc()/min()/max()), fără
 * breakpoint-uri fixe pentru tipografie/spațiere - se adaptează continuu la orice
 * lățime de ecran. Câteva @media rămân doar pentru schimbări STRUCTURALE (direcția
 * butoanelor de navigare), pe care funcțiile CSS de sine stătătoare nu le pot face.
 *
 * Font: Inter (încărcat din Bunny Fonts, dacă e activat - vezi filtrul PHP
 * 'bcf_enable_web_font'), cu failover automat pe stack-ul de font-uri de sistem dacă
 * request-ul eșuează, e blocat de vizitator, sau e dezactivat explicit.
 */

.bcf-form-wrap {
	--bcf-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;

	/* Tipografie fluidă: interpolează între un ecran mic (~360px) și unul mare (~1000px). */
	--bcf-fs-sm: clamp(0.8125rem, 0.78rem + 0.2vw, 0.9rem);
	--bcf-fs-base: clamp(0.9375rem, 0.88rem + 0.3vw, 1.0625rem);
	--bcf-fs-md: clamp(1rem, 0.93rem + 0.4vw, 1.125rem);
	--bcf-fs-lg: clamp(1.15rem, 1rem + 0.8vw, 1.4rem);
	--bcf-fs-xl: clamp(1.4rem, 1.1rem + 1.6vw, 1.85rem);

	/* Spațiere fluidă. */
	--bcf-space-2xs: clamp(0.25rem, 0.2rem + 0.2vw, 0.375rem);
	--bcf-space-xs: clamp(0.375rem, 0.3rem + 0.3vw, 0.5rem);
	--bcf-space-sm: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem);
	--bcf-space-md: clamp(0.85rem, 0.65rem + 0.9vw, 1.35rem);
	--bcf-space-lg: clamp(1.25rem, 0.95rem + 1.4vw, 2.1rem);
	--bcf-space-xl: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);

	--bcf-radius: clamp(6px, 0.4vw + 4px, 10px);
	--bcf-radius-sm: clamp(4px, 0.3vw + 3px, 6px);
	--bcf-max-w: 760px;
	--bcf-touch: 44px; /* țintă minimă recomandată pentru elemente atinse pe mobil */

	--bcf-color-primary: #2563eb;
	--bcf-color-primary-dark: #1d4ed8;
	--bcf-color-border: #d1d5db;
	--bcf-color-error: #dc2626;
	--bcf-color-text: #111827;
	--bcf-color-muted: #6b7280;

	font-family: var( --bcf-font );
	font-size: var( --bcf-fs-base );
	color: var( --bcf-color-text );
	line-height: 1.55;

	/* Lățime fluidă: nu depășește niciodată viewport-ul (calc scade padding-ul de
	   siguranță de pe margini), dar nici nu se lățește inutil pe ecrane mari. */
	width: 100%;
	max-width: min( var( --bcf-max-w ), calc( 100vw - var( --bcf-space-lg ) * 2 ) );
	margin-inline: auto;
	padding-inline: var( --bcf-space-xs );
	box-sizing: border-box;
}

.bcf-form-wrap *,
.bcf-form-wrap *::before,
.bcf-form-wrap *::after {
	box-sizing: border-box;
}

.bcf-title { font-size: var( --bcf-fs-xl ); line-height: 1.25; margin-bottom: var( --bcf-space-2xs ); font-weight: 700; }
.bcf-subtitle { font-size: var( --bcf-fs-md ); font-weight: 600; opacity: 0.85; margin-top: 0; }
.bcf-intro-html { margin: var( --bcf-space-md ) 0; font-size: var( --bcf-fs-base ); }
.bcf-intro-html p { margin: 0 0 var( --bcf-space-sm ); }

.bcf-progress { margin: var( --bcf-space-md ) 0; }
.bcf-progress-bar { background: #e5e7eb; border-radius: 999px; height: clamp( 6px, 0.5vw + 4px, 10px ); overflow: hidden; }
.bcf-progress-fill { background: var( --bcf-color-primary ); height: 100%; width: 0; transition: width 0.3s ease; }
.bcf-progress-label { font-size: var( --bcf-fs-sm ); opacity: 0.7; margin-top: var( --bcf-space-2xs ); }

.bcf-section {
	padding: var( --bcf-space-sm ) 0 var( --bcf-space-lg );
	border-top: 1px solid #e5e7eb;
	margin-top: var( --bcf-space-lg );
}
.bcf-section:first-of-type { border-top: none; margin-top: 0; }
.bcf-section-title { font-size: var( --bcf-fs-lg ); line-height: 1.3; margin-bottom: var( --bcf-space-2xs ); font-weight: 650; }
.bcf-section-desc { opacity: 0.7; font-size: var( --bcf-fs-sm ); margin-top: 0; }

.bcf-field { margin: var( --bcf-space-md ) 0; }
.bcf-label { display: block; font-weight: 600; font-size: var( --bcf-fs-base ); margin-bottom: var( --bcf-space-2xs ); }
.bcf-required { color: var( --bcf-color-error ); margin-left: 2px; }
.bcf-help { font-size: var( --bcf-fs-sm ); opacity: 0.7; margin: 0.1em 0 var( --bcf-space-xs ); }
.bcf-max-hint { font-size: var( --bcf-fs-sm ); opacity: 0.6; margin: var( --bcf-space-2xs ) 0 0; }

.bcf-field input[type="text"],
.bcf-field input[type="email"],
.bcf-field input[type="tel"],
.bcf-field input[type="url"],
.bcf-field textarea,
.bcf-field select {
	width: 100%;
	box-sizing: border-box;
	padding: var( --bcf-space-xs ) var( --bcf-space-sm );
	border: 1px solid var( --bcf-color-border );
	border-radius: var( --bcf-radius-sm );
	font-size: max( 16px, var( --bcf-fs-base ) ); /* >=16px pe mobil evită zoom automat in iOS Safari */
	font-family: inherit;
	min-height: var( --bcf-touch );
}

.bcf-field textarea { resize: vertical; min-height: clamp( 4.5rem, 4rem + 2vw, 6rem ); }

.bcf-choice-option { margin: var( --bcf-space-xs ) 0; }
.bcf-choice-option label {
	display: flex;
	align-items: flex-start;
	gap: var( --bcf-space-xs );
	font-weight: 400;
	cursor: pointer;
	padding: var( --bcf-space-2xs ) 0;
	min-height: var( --bcf-touch );
}

/*
 * Casete/butoane radio stilizate integral de noi (appearance: none), nu native.
 * Motiv: temele WordPress cu builder de pagini (ex. cele bazate pe WPBakery) au
 * adesea propriul reset CSS care ascunde input[type=radio]/checkbox native
 * (pregătit pentru stilizare custom proprie) - lăsate pe cont propriu, checkbox-urile
 * native ale formularului deveneau invizibile deși rămâneau funcționale la click.
 * Stilizând complet noi vizualul (bifă animată, fundal albastru la selecție),
 * scăpăm de dependența de randarea nativă a browserului/temei.
 */
.bcf-form-wrap .bcf-choice-option input[type="radio"],
.bcf-form-wrap .bcf-choice-option input[type="checkbox"],
.bcf-form-wrap .bcf-grid-table td input[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	margin: 0;
	margin-top: 0.15em;
	flex-shrink: 0;
	width: clamp( 19px, 1vw + 15px, 22px );
	height: clamp( 19px, 1vw + 15px, 22px );
	border: 2px solid var( --bcf-color-border );
	border-radius: 5px;
	background-color: #fff;
	cursor: pointer;
	position: relative;
	display: inline-block;
	vertical-align: middle;
	outline: none !important;
	box-shadow: none !important;
	-webkit-box-shadow: none !important;
	filter: none !important;
	-webkit-filter: none !important;
	transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
}
.bcf-choice-option input[type="radio"],
.bcf-grid-table td input[type="radio"] {
	border-radius: 50%;
}
.bcf-choice-option input[type="radio"]:hover,
.bcf-choice-option input[type="checkbox"]:hover,
.bcf-grid-table td input[type="radio"]:hover {
	border-color: var( --bcf-color-primary );
}
.bcf-choice-option input[type="radio"]:active,
.bcf-choice-option input[type="checkbox"]:active,
.bcf-grid-table td input[type="radio"]:active {
	transform: scale( 0.92 );
}
/* Indicator de focus (navigare cu tastatura) FĂRĂ umbră/glow - doar bordura devine
   mai groasă și colorată. Niciun box-shadow, niciun outline, în nicio stare. */
.bcf-choice-option input[type="radio"]:focus,
.bcf-choice-option input[type="checkbox"]:focus,
.bcf-grid-table td input[type="radio"]:focus,
.bcf-choice-option input[type="radio"]:focus-visible,
.bcf-choice-option input[type="checkbox"]:focus-visible,
.bcf-grid-table td input[type="radio"]:focus-visible {
	outline: none !important;
	box-shadow: none !important;
	border-width: 3px;
	border-color: var( --bcf-color-primary-dark );
}

/* Stare bifată: fundal albastru vizibil, cu bifă/punct alb animat la apariție. */
.bcf-form-wrap .bcf-choice-option input[type="checkbox"]:checked,
.bcf-form-wrap .bcf-choice-option input[type="radio"]:checked,
.bcf-form-wrap .bcf-grid-table td input[type="radio"]:checked {
	background-color: var( --bcf-color-primary );
	border-color: var( --bcf-color-primary );
	box-shadow: none !important;
	-webkit-box-shadow: none !important;
	filter: none !important;
}
.bcf-choice-option input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 32%;
	top: 14%;
	width: 28%;
	height: 55%;
	border: solid #fff;
	border-width: 0 2.5px 2.5px 0;
	transform-origin: center;
	animation: bcf-check-pop 0.18s ease-out forwards;
}
.bcf-choice-option input[type="radio"]:checked::after,
.bcf-grid-table td input[type="radio"]:checked::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 40%;
	height: 40%;
	background: #fff;
	border-radius: 50%;
	transform: translate( -50%, -50% ) scale( 0 );
	animation: bcf-radio-pop 0.18s ease-out forwards;
}
@keyframes bcf-check-pop {
	from { transform: rotate( 45deg ) scale( 0 ); opacity: 0; }
	to   { transform: rotate( 45deg ) scale( 1 ); opacity: 1; }
}
@keyframes bcf-radio-pop {
	from { transform: translate( -50%, -50% ) scale( 0 ); }
	to   { transform: translate( -50%, -50% ) scale( 1 ); }
}
@media ( prefers-reduced-motion: reduce ) {
	.bcf-choice-option input[type="checkbox"]:checked::after,
	.bcf-choice-option input[type="radio"]:checked::after,
	.bcf-grid-table td input[type="radio"]:checked::after {
		animation: none;
	}
}

.bcf-grid-table td {
	text-align: center;
}
.bcf-grid-table td input[type="radio"] {
	display: inline-block;
}
.bcf-other-text {
	margin-top: var( --bcf-space-2xs );
	margin-left: calc( var( --bcf-space-sm ) + 20px );
	width: calc( 100% - var( --bcf-space-sm ) - 20px );
	padding: var( --bcf-space-2xs ) var( --bcf-space-xs );
	border: 1px solid var( --bcf-color-border );
	border-radius: var( --bcf-radius-sm );
	font-size: max( 16px, var( --bcf-fs-base ) );
}

.bcf-subfield { margin-top: var( --bcf-space-sm ); padding: var( --bcf-space-sm ); background: #f9fafb; border-radius: var( --bcf-radius ); }
.bcf-subfield label { display: block; font-weight: 500; margin-bottom: var( --bcf-space-2xs ); font-size: var( --bcf-fs-sm ); }

.bcf-priority-row { margin: var( --bcf-space-xs ) 0; }
.bcf-priority-row label { display: block; font-size: var( --bcf-fs-sm ); opacity: 0.75; margin-bottom: var( --bcf-space-2xs ); }

/* Grilele pot avea multe coloane - pe ecrane înguste devin derulabile orizontal în
   loc să strivească layout-ul paginii sau să oblige la zoom-out. */
.bcf-grid {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-radius: var( --bcf-radius-sm );
}
.bcf-grid-table {
	width: 100%;
	min-width: max-content;
	border-collapse: collapse;
	font-size: var( --bcf-fs-sm );
	margin-top: var( --bcf-space-xs );
}
.bcf-grid-table th,
.bcf-grid-table td {
	border: 1px solid #e5e7eb;
	padding: var( --bcf-space-2xs ) var( --bcf-space-xs );
	text-align: center;
	white-space: nowrap;
}
.bcf-grid-table th:first-child,
.bcf-grid-table td:first-child {
	text-align: left;
	font-weight: 400;
	white-space: normal;
	min-width: clamp( 9rem, 20vw, 14rem );
}
.bcf-grid-empty-hint { font-size: var( --bcf-fs-sm ); opacity: 0.6; font-style: italic; }

.bcf-field.bcf-has-error .bcf-field-control input,
.bcf-field.bcf-has-error .bcf-field-control textarea,
.bcf-field.bcf-has-error .bcf-field-control select {
	border-color: var( --bcf-color-error );
}
.bcf-field-error { color: var( --bcf-color-error ); font-size: var( --bcf-fs-sm ); margin-top: var( --bcf-space-2xs ); }
.bcf-form-errors { color: var( --bcf-color-error ); font-weight: 600; margin: var( --bcf-space-md ) 0; font-size: var( --bcf-fs-base ); }

.bcf-honeypot { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.bcf-section-nav {
	display: flex;
	flex-wrap: wrap;
	gap: var( --bcf-space-xs );
	margin-top: var( --bcf-space-lg );
}
.bcf-btn {
	appearance: none;
	border: none;
	border-radius: var( --bcf-radius-sm );
	padding: var( --bcf-space-xs ) var( --bcf-space-md );
	font-size: var( --bcf-fs-base );
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	min-height: var( --bcf-touch );
	flex: 1 1 auto;
}
.bcf-btn-primary { background: var( --bcf-color-primary ); color: #fff; }
.bcf-btn-primary:hover { background: var( --bcf-color-primary-dark ); }
.bcf-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }
.bcf-btn-secondary { background: #e5e7eb; color: #111827; }
.bcf-btn-secondary:hover { background: #d1d5db; }

/* Sub ~380px (telefoane mici), butoanele devin cu lățime întreagă, stivuite - un
   prag structural, nu doar o scalare fluidă, de-asta rămâne @media (nu clamp). */
@media ( max-width: 26em ) {
	.bcf-section-nav { flex-direction: column; }
	.bcf-btn { width: 100%; }
}

.bcf-thankyou {
	padding: var( --bcf-space-xl ) var( --bcf-space-lg );
	text-align: center;
	background: #f0fdf4;
	border-radius: var( --bcf-radius );
	font-size: var( --bcf-fs-base );
}
.bcf-error { color: var( --bcf-color-error ); }

/* Reduce mișcarea pentru cei care au setat preferința sistemului. */
@media ( prefers-reduced-motion: reduce ) {
	.bcf-progress-fill { transition: none; }
}