/*
 * Batristan foglalás: alap-stílus a négy lépéshez és a rövid űrlapokhoz.
 * A mockup (vps04d) szabályai bt- előtaggal, :where() alatt (nulla specificitás), hogy a Bricks
 * global classai felülírják. Saját szín és betű nincs: minden érték a Bricks Variables tokenje.
 */

:where(.bt-rejtett) { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
:where(.bt-lepesek, .bt-urlap) [hidden] { display: none !important; }

/* Űrlap-alapok */
:where(.bt-urlap) { display: grid; gap: var(--space-4); }
:where(.bt-urlap__bevezeto) { margin: 0; font-size: var(--fs-small); color: var(--n-600); }
:where(.bt-mezo) { display: grid; gap: 6px; align-content: start; }
:where(.bt-mezo) :where(label) { font-weight: 600; font-size: var(--fs-small); color: var(--n-700); }
:where(.bt-mezo) :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
	width: 100%;
	min-height: 48px;
	padding: .65em .8em;
	border: 1px solid var(--color-field-border);
	border-radius: var(--radius-field);
	background: var(--white);
	color: var(--n-900);
	font: 400 1rem / 1.4 var(--font-body);
	transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
:where(.bt-mezo) :where(textarea) { min-height: 96px; resize: vertical; }
:where(.bt-mezo) :where(input, select, textarea):focus { outline: none; border-color: var(--color-green); box-shadow: 0 0 0 3px rgb(var(--shade) / .08), 0 0 0 1px var(--color-green); }
:where(.bt-seged) { font-size: var(--fs-small); color: var(--color-text-muted); line-height: 1.45; }
:where(.bt-jelolo) { display: grid; grid-template-columns: 22px 1fr; gap: var(--space-3); align-items: start; font-size: var(--fs-small); font-weight: 400; }
:where(.bt-jelolo) :where(input) { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--color-green); }

/* Hibák (11.3: a szöveg mondja meg, mi a baj; jel a mezőn) */
:where(.bt-mezo.bt-is-hibas) :where(input, select, textarea) { border-color: var(--color-error); }
:where(.bt-mezo__hiba) { font-size: var(--fs-small); color: var(--color-error); line-height: 1.45; }
:where(.bt-urlap__hiba) { margin: 0; padding: var(--space-3) var(--space-4); border-left: 4px solid var(--color-error); background: var(--n-50); font-size: var(--fs-small); }
:where(.bt-urlap__siker) { margin: 0; padding: var(--space-4); border-left: 4px solid var(--color-green); background: var(--n-50); }

/* A négy lépés */
:where(.bt-lepesek) { background: var(--white); box-shadow: var(--shadow-1); padding: var(--space-5); }
@media (min-width: 768px) { :where(.bt-lepesek) { padding: var(--space-6); } }
:where(.bt-lepesek__cim) { font-family: var(--font-heading); font-size: var(--fs-h2); font-weight: 700; color: var(--n-700); margin: 0 0 var(--space-5); }
:where(.bt-lepessor) { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-1); margin: 0 0 var(--space-6); padding: 0; list-style: none; }
:where(.bt-lepessor) :where(li) { display: grid; justify-items: center; align-content: start; gap: var(--space-2); padding-top: var(--space-2); border-top: 4px solid var(--n-200); font-size: .6875rem; font-weight: 600; line-height: 1.25; text-align: center; color: var(--n-500); transition: border-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out); }
:where(.bt-lepessor__szam) { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-btn); background: var(--n-100); color: var(--n-600); font-size: var(--fs-small); font-weight: 700; }
:where(.bt-lepessor__rovid) { display: none; }
@media (max-width: 767px) {
	:where(.bt-lepessor__rovid) { display: inline; }
	:where(.bt-lepessor__hosszu) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
:where(.bt-lepessor) :where(.bt-is-kesz) { border-top-color: var(--color-green); color: var(--n-700); }
:where(.bt-lepessor) :where(.bt-is-kesz) :where(.bt-lepessor__szam) { background: var(--color-green); color: var(--white); }
:where(.bt-lepessor) :where(.bt-is-aktiv) { border-top-color: var(--color-orange); color: var(--n-700); }
:where(.bt-lepessor) :where(.bt-is-aktiv) :where(.bt-lepessor__szam) { background: var(--color-orange); color: var(--n-900); }
@media (min-width: 768px) { :where(.bt-lepessor) :where(li) { grid-template-columns: auto 1fr; justify-items: start; align-items: center; text-align: left; font-size: var(--fs-small); } }
:where(.bt-lepesek__racs) { display: grid; gap: var(--space-6); }
@media (min-width: 1200px) { :where(.bt-lepesek__racs) { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; } }
:where(.bt-lepesek__fo) { display: grid; gap: var(--space-5); min-width: 0; }
:where(.bt-lepes) { display: grid; gap: var(--space-5); }
:where(.bt-blokk) { margin: 0; padding: 0; border: 0; display: grid; gap: var(--space-4); min-width: 0; }
:where(.bt-blokk) :where(legend) { padding: 0; margin-bottom: var(--space-4); font-family: var(--font-heading); font-size: var(--fs-h4); font-weight: 700; color: var(--n-700); }
:where(.bt-blokk__al) { margin: 0 0 var(--space-3); font-family: var(--font-heading); font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--ls-caps-small); text-transform: uppercase; color: var(--n-600); }
:where(.bt-utas) + :where(.bt-utas) { margin-top: var(--space-5); }
:where(.bt-mezok) { display: grid; gap: var(--space-4) var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
:where(.bt-mezo--szeles) { grid-column: 1 / -1; }
:where(.bt-valaszto) { display: grid; grid-template-columns: 22px 1fr; gap: var(--space-3); align-items: center; padding: var(--space-4); border: 1px solid var(--color-field-border); border-radius: var(--radius-field); cursor: pointer; transition: border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out); }
:where(.bt-valaszto:has(input:checked)) { border-color: var(--color-green); background: var(--n-50); }
:where(.bt-valaszto) :where(input) { width: 20px; height: 20px; margin: 0; accent-color: var(--color-green); }
:where(.bt-lepes__gombok) { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-line); }
:where(.bt-link-vissza) { font-size: var(--fs-small); font-weight: 600; }
:where(.bt-lepes--siker) { padding: var(--space-5); background: var(--n-50); border-left: 4px solid var(--color-green); }
:where(.bt-siker__fo) { font-size: var(--fs-lead); line-height: 1.5; color: var(--n-700); }

/* Összesítő */
:where(.bt-osszesito) { padding: var(--space-5); background: var(--n-50); display: grid; gap: var(--space-4); }
:where(.bt-osszesito__cim) { margin: 0; font-family: var(--font-heading); font-size: var(--fs-h4); font-weight: 700; line-height: 1.2; color: var(--color-orange-ink); }
:where(.bt-osszesito) :where(dl) { margin: 0; display: grid; gap: var(--space-2); font-size: var(--fs-small); }
:where(.bt-osszesito) :where(dl > div) { display: flex; justify-content: space-between; gap: var(--space-4); }
:where(.bt-osszesito) :where(dt) { color: var(--n-600); }
:where(.bt-osszesito) :where(dd) { margin: 0; font-weight: 600; color: var(--n-700); text-align: right; }
:where(.bt-osszesito__ar) { display: grid; margin: 0; padding-top: var(--space-4); border-top: 1px solid var(--n-200); }
:where(.bt-osszesito__ar) :where(span) { font-size: var(--fs-small); color: var(--n-600); }
:where(.bt-osszesito__ar) :where(strong) { font-size: var(--fs-price); color: var(--color-green); }

/* Gombok: a Bricks a global class CSS-ét csak a sablonban használt osztályokhoz írja ki, a shortcode markupjához nem */
:where(.bt-lepesek, .bt-urlap) :where(.bt-btn) {
	display: inline-flex; align-items: center; justify-content: center; gap: .6em;
	min-height: 48px; padding: .7em 1.35em; border: 2px solid transparent; border-radius: var(--radius-btn);
	font-family: var(--font-body); font-size: var(--fs-btn); font-weight: 600; letter-spacing: var(--ls-caps);
	line-height: 1.2; text-transform: uppercase; text-decoration: none; cursor: pointer;
	transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
:where(.bt-lepesek, .bt-urlap) :where(.bt-btn--primary) { background: var(--color-cta-bg); color: var(--color-cta-text); }
:where(.bt-lepesek, .bt-urlap) :where(.bt-btn--primary:hover) { background: var(--color-cta-bg-hover); color: var(--color-cta-text); }
:where(.bt-lepesek, .bt-urlap) :where(.bt-btn--teli) { width: 100%; }
:where(.bt-lepesek, .bt-urlap) :where(.bt-btn[disabled]) { opacity: .6; cursor: progress; }
:where(.bt-link-nyil) { display: inline-flex; align-items: center; gap: .45em; font-weight: 600; }
@media (max-width: 767px) { :where(.bt-lepes__gombok) :where(.bt-btn) { width: 100%; } :where(.bt-lepes__gombok) { flex-direction: column-reverse; align-items: stretch; text-align: center; } }
.bt-lepesek legend[tabindex="-1"]:focus, .bt-lepesek .bt-lepes--siker:focus, .bt-urlap__siker:focus { outline: none; }