/**
 * Style kalkulatora dofinansowania (spec §50 - dostępność).
 *
 * Układ jest ZAWSZE pionowy (jedna kolumna) - kalkulator bywa osadzany w wąskich
 * kolumnach/sidebarach, więc żaden element nie zakłada szerokości poziomej.
 * Zmienne CSS pozwalają nadpisać wygląd z widgetu Elementora bez edycji pliku;
 * marginesy/paddingi/obramowania poszczególnych elementów widget ustawia
 * bezpośrednimi selektorami.
 */
.kdp-calculator {
	/* Kolory bazowe */
	--kdp-accent: #1d4ed8;
	--kdp-accent-hover: #1e40af;
	--kdp-bg: #ffffff;
	--kdp-surface: #f8fafc;
	--kdp-border: #e2e8f0;
	--kdp-text: #0f172a;
	--kdp-muted: #64748b;
	--kdp-error: #b91c1c;
	--kdp-error-bg: #fef2f2;
	--kdp-error-border: #fecaca;

	/* Elementy - nadpisywalne osobno z widgetu Elementora (punkt personalizacji) */
	--kdp-heading-color: var(--kdp-text);
	--kdp-heading-size: 1.5rem;
	--kdp-button-bg: var(--kdp-accent);
	--kdp-button-hover-bg: var(--kdp-accent-hover);
	--kdp-button-text: #ffffff;
	--kdp-input-border: var(--kdp-border);
	--kdp-card-bg: var(--kdp-bg);
	--kdp-card-border: var(--kdp-border);
	--kdp-grant-color: var(--kdp-accent);
	--kdp-grant-size: 2rem;
	--kdp-grant-bg: var(--kdp-surface); /* jasnoszara karta wyniku (jak na projekcie) */
	--kdp-candidate-bg: var(--kdp-bg);
	/* Wyrównanie nagłówka wyniku (nazwa/adres/znaczniki) - sterowane kontrolką
	   „Wyrównanie nagłówka" w Elementorze. Domyślnie wyśrodkowane. */
	--kdp-result-align: center;

	/* Stepper */
	--kdp-stepper-active: var(--kdp-accent);
	--kdp-stepper-done: var(--kdp-accent);
	--kdp-stepper-inactive: var(--kdp-border);
	--kdp-stepper-label: var(--kdp-muted);

	/* Wykres pierścieniowy */
	--kdp-chart-size: 160px;
	--kdp-chart-thickness: 14px;
	--kdp-own-color: #94a3b8;
	--kdp-total-color: var(--kdp-text);
	--kdp-chart-track: var(--kdp-border);
	--kdp-pct-size: 1.75rem;

	/* Układ */
	--kdp-radius: 12px;
	--kdp-gap: 1rem;
	--kdp-max-width: 640px;
	--kdp-shadow: none;
	--kdp-font-size: 1rem;

	display: flex;
	flex-direction: column;
	gap: var(--kdp-gap);
	max-width: var(--kdp-max-width);
	margin: 0 auto; /* bez marginesu dolnego pod całym widgetem */
	color: var(--kdp-text);
	font-family: inherit;
	font-size: var(--kdp-font-size);
}

/* Zdejmujemy domyślny dolny margines, który Elementor dodaje pod widgetem
   (.elementor-widget:not(:last-child) → margin-bottom). Selektor Elementora ma
   wyższą specyficzność niż sama klasa widgetu, więc podnosimy ją podwójną klasą,
   żeby pod kalkulatorem (pod przyciskiem) nie zostawał pusty odstęp. */
.elementor-widget.elementor-widget-kdp_calculator,
.elementor-widget.elementor-widget-kdp_calculator:not(:last-child) { margin-bottom: 0; }

/* ------------------------------ KROKI ------------------------------ */

.kdp-step {
	display: flex;
	flex-direction: column;
	gap: .75rem;
}
.kdp-step[hidden] { display: none; }
.kdp-step:focus { outline: none; } /* fokus programowy - bez ramki, ogłoszenie robi czytnik */
.kdp-step__heading { margin: 0; font-size: var(--kdp-heading-size); color: var(--kdp-heading-color); }
.kdp-step__desc { margin: 0; color: var(--kdp-muted); }

@media (prefers-reduced-motion: no-preference) {
	.kdp-step:not([hidden]) { animation: kdp-step-in .28s ease-out; }
	@keyframes kdp-step-in {
		from { opacity: 0; transform: translateY(6px); }
		to   { opacity: 1; transform: none; }
	}
}

/* Pasek kroków (1 · 2 · 3) */
.kdp-stepper {
	list-style: none;
	display: flex;
	gap: .5rem;
	margin: 0;
	padding: 0;
}
.kdp-stepper__item {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .5rem 0 0;
	border-top: 3px solid var(--kdp-stepper-inactive);
	font-size: .8125rem;
	color: var(--kdp-stepper-label);
	min-width: 0;
}
.kdp-stepper__num {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 999px;
	background: var(--kdp-stepper-inactive);
	color: var(--kdp-text);
	font-size: .75rem;
	font-weight: 700;
}
.kdp-stepper__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kdp-stepper__item.is-active { border-top-color: var(--kdp-stepper-active); color: var(--kdp-text); font-weight: 600; }
.kdp-stepper__item.is-active .kdp-stepper__num { background: var(--kdp-stepper-active); color: #fff; }
.kdp-stepper__item.is-done { border-top-color: var(--kdp-stepper-done); }
.kdp-stepper__item.is-done .kdp-stepper__num { background: var(--kdp-stepper-done); color: #fff; }

/* Przycisk "Wstecz" */
.kdp-back {
	align-self: start;
	padding: .5rem 1rem;
	background: transparent;
	border: 2px solid var(--kdp-card-border);
	border-radius: var(--kdp-radius);
	color: var(--kdp-muted);
	font-size: .875rem;
	font-weight: 600;
	cursor: pointer;
}
.kdp-back:hover { border-color: var(--kdp-accent); color: var(--kdp-accent); }
.kdp-back:focus-visible { outline: 3px solid var(--kdp-accent); outline-offset: 2px; }

/* Przycisk końcowy „Sprawdź inną placówkę” - wyróżniony CTA na pełną szerokość
   (odróżnia się od małego „Wstecz” w kroku 2). */
.kdp-reset {
	align-self: stretch;
	width: 100%;
	border-color: var(--kdp-accent);
	color: var(--kdp-accent);
}
.kdp-reset:hover { background: var(--kdp-accent); color: #fff; border-color: var(--kdp-accent); }

/* --------------------------- KROK 1: FORMULARZ --------------------------- */

.kdp-form { display: flex; flex-direction: column; gap: .5rem; margin: 0; }
.kdp-form__heading { margin: 0; font-size: var(--kdp-heading-size); color: var(--kdp-heading-color); }
.kdp-form__desc { margin: 0; color: var(--kdp-muted); }
.kdp-form__label { display: block; font-weight: 600; }

/* Układ pionowy: pole i przycisk jeden pod drugim, pełna szerokość. */
.kdp-form__row { display: flex; flex-direction: column; gap: .5rem; }
.kdp-form__input {
	width: 100%;
	padding: .75rem 1rem;
	border: 1px solid var(--kdp-input-border);
	border-radius: var(--kdp-radius);
	font-size: 1rem;
	background: var(--kdp-bg);
	color: var(--kdp-text);
	-webkit-tap-highlight-color: transparent;
}
/* Fokus bez żadnego konturu/cienia (żeby nie migało czarne obramowanie po
   kliknięciu) - wskaźnikiem fokusu jest zmiana koloru ramki na akcent. */
.kdp-form__input:focus,
.kdp-form__input:focus-visible {
	outline: none;
	box-shadow: none;
	border-color: var(--kdp-accent);
}
.kdp-form__submit {
	width: 100%;
	padding: .75rem 1.5rem;
	background: var(--kdp-button-bg);
	color: var(--kdp-button-text);
	border: 0;
	border-radius: var(--kdp-radius);
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
}
.kdp-form__submit:hover { background: var(--kdp-button-hover-bg); }
/* Fokus w kolorze akcentu (nie czarny) - klawiatura widzi wyraźny kontur,
   a kliknięcie myszą nie miga czarną obwódką. */
.kdp-form__submit:focus { outline: none; }
.kdp-form__submit:focus-visible { outline: 2px solid var(--kdp-accent); outline-offset: 2px; }


/* Honeypot - niewidoczny dla ludzi, dostępny dla botów. */
.kdp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ------------------------- LOADER I KOMUNIKATY ------------------------- */

.kdp-loader {
	padding: 1rem; background: var(--kdp-surface);
	border-radius: var(--kdp-radius);
}
.kdp-loader__step { margin: 0; color: var(--kdp-muted); }

.kdp-message {
	padding: .875rem 1rem; border-radius: var(--kdp-radius);
	background: var(--kdp-surface);
}
.kdp-message--error {
	background: var(--kdp-error-bg); color: var(--kdp-error);
	border: 1px solid var(--kdp-error-border);
}

/* ------------------------ KROK 2: LISTA PLACÓWEK ------------------------ */

.kdp-candidates__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .625rem; }
/* Selektory z .kdp-calculator - wyższa specyficzność niż reguły motywu dla
   <button>, żeby tło/kolor karty dało się nadpisać z widgetu Elementora. */
.kdp-calculator .kdp-candidate__btn {
	width: 100%; text-align: left; display: grid; gap: .25rem;
	padding: 1rem; border: 2px solid var(--kdp-card-border); border-radius: var(--kdp-radius);
	background: var(--kdp-candidate-bg); cursor: pointer; color: var(--kdp-text);
	box-shadow: var(--kdp-shadow);
}
.kdp-calculator .kdp-candidate__btn:hover { border-color: var(--kdp-accent); }
.kdp-calculator .kdp-candidate__btn:focus-visible { outline: 2px solid var(--kdp-accent); outline-offset: 1px; }
/* Kolejność w karcie: typ placówki, nazwa, adres pisany razem, operator. */
.kdp-candidate__type { font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; color: var(--kdp-muted); }
.kdp-candidate__name { font-weight: 600; }
.kdp-candidate__addr, .kdp-candidate__operator { font-size: .875rem; color: var(--kdp-muted); }

/* ---------------------------- KROK 3: WYNIK ---------------------------- */

.kdp-result__inner {
	/* Celowo BEZ własnej ramki/paddingu/tła/cienia - widget bywa osadzany
	   w gotowym, wystylizowanym kontenerze (np. karta sekcji Elementora),
	   a podwójne obramowanie/padding psułyby wygląd. */
	padding: 0; border: 0; background: transparent; box-shadow: none;
}
/* Nagłówek wyniku (nazwa, adres, znaczniki). Wyrównanie steruje zmienną
   --kdp-result-align (kontrolka „Wyrównanie nagłówka" w Elementorze). */
.kdp-result__head { text-align: var(--kdp-result-align, center); margin: 0 0 1rem; }
.kdp-result__facility { margin: 0 0 .25rem; font-size: 1.25rem; }
.kdp-result__addr { margin: 0 0 .75rem; color: var(--kdp-muted); }

/* Znaczniki „Typ:" / „Liczba uczniów:" - pigułki. Wyrównanie dziedziczą po
   .kdp-result__head (są inline-block), font-size:0 kasuje odstęp między nimi. */
.kdp-result__tags { margin: 0; font-size: 0; }
.kdp-result__tag {
	display: inline-block; margin: .25rem;
	padding: .4rem .9rem; border-radius: 999px;
	background: var(--kdp-surface); font-size: .9375rem; color: var(--kdp-text);
}
.kdp-result__tag-label { color: var(--kdp-muted); }
.kdp-result__tag-value { font-weight: 700; }

/* Wykres pierścieniowy + legenda - zawsze obok siebie (pierścień z lewej,
   trzy kwoty z prawej), w szarej karcie. text-align:left, żeby wyrównanie
   nagłówka nie wpływało na legendę. */
.kdp-chart {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 1.5rem;
	padding: 1.25rem;
	background: var(--kdp-grant-bg);
	border-radius: var(--kdp-radius);
	text-align: left;
}
.kdp-chart__ring {
	position: relative;
	width: var(--kdp-chart-size);
	height: var(--kdp-chart-size);
	flex: 0 0 auto;
}
.kdp-chart__svg { width: 100%; height: 100%; display: block; }
.kdp-chart__track {
	stroke: var(--kdp-chart-track);
	stroke-width: var(--kdp-chart-thickness);
}
.kdp-chart__arc {
	stroke: var(--kdp-grant-color);
	stroke-width: var(--kdp-chart-thickness);
}
@media (prefers-reduced-motion: no-preference) {
	.kdp-chart__arc { transition: stroke-dasharray .9s ease-out; }
}
.kdp-chart__center {
	position: absolute; inset: 0;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: .125rem; pointer-events: none;
}
.kdp-chart__pct { font-size: var(--kdp-pct-size); line-height: 1.1; color: var(--kdp-grant-color); }
.kdp-chart__pct-label { font-size: .75rem; color: var(--kdp-muted); }

.kdp-legend {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: .75rem;
	flex: 1 1 auto; min-width: 0; /* legenda wypełnia miejsce obok pierścienia */
}
.kdp-legend__item { display: flex; align-items: start; gap: .625rem; }
.kdp-legend__dot {
	flex: 0 0 auto; width: .75rem; height: .75rem; margin-top: .3rem;
	border-radius: 999px; background: var(--kdp-muted);
}
.kdp-legend__item--grant .kdp-legend__dot { background: var(--kdp-grant-color); }
.kdp-legend__item--own .kdp-legend__dot { background: var(--kdp-own-color); }
.kdp-legend__item--total .kdp-legend__dot { background: var(--kdp-total-color); }
.kdp-legend__body { display: flex; flex-direction: column; gap: .125rem; min-width: 0; }
.kdp-legend__label { font-size: .8125rem; color: var(--kdp-muted); }
.kdp-legend__value { font-size: var(--kdp-grant-size); line-height: 1.2; white-space: nowrap; }
.kdp-legend__item--grant .kdp-legend__value { color: var(--kdp-grant-color); }

/* Slot na formularz Elementor Pro (szablon/shortcode) i punkt zaczepienia. */
.kdp-form-slot { display: block; }
.kdp-form-anchor:empty { display: none; }

/* Zgoda (checkbox pod polem, punkt 1) */
.kdp-form__consent {
	display: flex; align-items: flex-start; gap: .5rem;
	margin: .5rem 0 0; font-size: .875rem; color: var(--kdp-text); cursor: pointer;
}
.kdp-form__consent-input { margin-top: .2rem; flex: 0 0 auto; }
.kdp-form__consent-text { line-height: 1.4; }

/* Placówka już dofinansowana (punkt 5) */
.kdp-funded {
	padding: 1.5rem; border: 2px solid var(--kdp-error-border);
	border-radius: var(--kdp-radius); background: var(--kdp-error-bg);
}
.kdp-funded__facility { margin: 0 0 .25rem; font-size: 1.25rem; }
.kdp-funded__addr { margin: 0 0 1rem; color: var(--kdp-muted); }
.kdp-funded__alert {
	margin: 0; padding: .75rem 1rem; font-weight: 600;
	color: var(--kdp-error); background: #fff; border: 1px solid var(--kdp-error-border);
	border-left: 4px solid var(--kdp-error); border-radius: 8px;
}
/* Pusta karta (przed wypełnieniem przez JS) nie może rysować ramki. */
.kdp-funded:empty { display: none; }
.kdp-newsletter-slot { margin-top: 1rem; }