/**
 * Style wspólne dla WSZYSTKICH kalkulatorów wtyczki (box, pola formularza,
 * przełącznik trybu, wynik, przycisk kopiowania) — jeden plik zamiast
 * duplikowania tych samych reguł w CSS każdego kalkulatora. Konkretny
 * kalkulator dostaje własny plik CSS tylko wtedy, gdy faktycznie potrzebuje
 * czegoś unikalnego (na razie żaden nie potrzebuje).
 *
 * Kolory/fonty korzystają ze zmiennych motywu (--bdo-color-*, --bdo-font-*)
 * zdefiniowanych w custom.css motywu potomnego. Ta wtyczka jest niezależna od
 * konkretnego motywu, więc dla każdej zmiennej jest sensowny fallback
 * (var(--x, fallback)) — bez motywu bdo-child kalkulator nadal wygląda
 * spójnie, tylko traci markowe kolory/fonty.
 */
.bdo-kalkulator {
	max-width: 480px;
	margin: 2em 0;
	padding: 1.5em;
	border: 1px solid var(--bdo-color-border, #ddd);
	border-radius: 10px;
	background: var(--bdo-color-surface, #fafafa);
	box-shadow: 0 10px 24px -18px rgba(38, 36, 31, 0.3);
	font-family: var(--bdo-font-body, inherit);
}

.bdo-kalkulator__formularz {
	display: grid;
	gap: 1em;
}

/* --- Przełącznik trybu (np. "Podaj m²" / "Podaj wymiary") --- */
.bdo-kalkulator__tryb {
	display: flex;
	gap: 0.5em;
}

.bdo-kalkulator__tryb-przycisk {
	flex: 1;
	padding: 0.6em 0.75em;
	border: 1px solid var(--bdo-color-border, #ccc);
	border-radius: 6px;
	background-color: transparent;
	color: var(--bdo-color-text, inherit);
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.bdo-kalkulator__tryb-przycisk:hover,
.bdo-kalkulator__tryb-przycisk:focus {
	border-color: var(--bdo-color-accent, #2f5233);
}

.bdo-kalkulator__tryb-przycisk--aktywny {
	border-color: var(--bdo-color-accent, #2f5233);
	background-color: var(--bdo-color-accent, #2f5233);
	color: #fff;
}

/* Grupy pól (np. "Podaj m²" / "Podaj wymiary") — bezpośrednie dzieci
 * .bdo-kalkulator__formularz to wtedy te grupy, nie same pola, więc
 * powtarzamy tu ten sam odstęp co na formularzu, żeby pola wewnątrz grupy
 * nadal miały spójny odstęp. */
.bdo-kalkulator__grupa {
	display: grid;
	gap: 1em;
}

/* Bez tego atrybut `hidden` (przełączany w JS) nic by nie dawał — nasz
 * własny `display: grid` powyżej ma taką samą specyficzność jak domyślna
 * reguła przeglądarki `[hidden] { display: none; }`, a reguły autora
 * (nasze) zawsze wygrywają z regułami przeglądarki. Efekt bez tej reguły:
 * obie grupy widoczne naraz, niezależnie od klikniętego przycisku. */
.bdo-kalkulator__grupa[hidden] {
	display: none;
}

.bdo-kalkulator__pole label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.25em;
	color: var(--bdo-color-text, inherit);
}

.bdo-kalkulator__pole input {
	width: 100%;
	padding: 0.5em;
	border: 1px solid var(--bdo-color-border, #ccc);
	border-radius: 6px;
	font-size: 1rem;
	font-family: inherit;
	color: var(--bdo-color-text, inherit);
	background-color: #fff;
	box-sizing: border-box;
}

.bdo-kalkulator__pole input:focus {
	outline: 2px solid var(--bdo-color-accent, #2271b1);
	outline-offset: 1px;
}

/* Po regułach generycznych .bdo-kalkulator__pole (kolejność w pliku ma
 * znaczenie — ta sama specyficzność, więc ta reguła musi wygrać przez
 * kolejność źródłową, żeby nadpisać display:block z generycznego label). */
.bdo-kalkulator__pole--checkbox label {
	display: flex;
	align-items: center;
	gap: 0.5em;
	font-weight: 400;
}

.bdo-kalkulator__pole--checkbox input {
	width: auto;
}

.bdo-kalkulator__podpowiedz {
	font-size: 0.85rem;
	color: var(--bdo-color-text-muted, #555);
	margin: 0.25em 0 0;
}

.bdo-kalkulator__wynik {
	margin-top: 1.5em;
	padding-top: 1em;
	border-top: 1px solid var(--bdo-color-border, #ddd);
	font-size: 1.05rem;
	color: var(--bdo-color-text, inherit);
}

.bdo-kalkulator__wynik p {
	margin: 0.5em 0;
}

/* --- Przycisk "Skopiuj wynik" --- */
.bdo-kalkulator__kopiuj {
	margin-top: 0.75em;
	padding: 0.6em 1.25em;
	border: 1px solid var(--bdo-color-accent-2, #bf6a3d);
	border-radius: 6px;
	background-color: transparent;
	color: var(--bdo-color-accent-2, #bf6a3d);
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.bdo-kalkulator__kopiuj:hover,
.bdo-kalkulator__kopiuj:focus {
	background-color: var(--bdo-color-accent-2, #bf6a3d);
	color: #fff;
	outline-offset: 2px;
}

.bdo-kalkulator__kopiuj--ok {
	border-color: var(--bdo-color-accent, #2f5233);
	background-color: var(--bdo-color-accent, #2f5233);
	color: #fff;
}