/*
 * Villa Arbora — WP Booking System naptár-skin. (T17)
 *
 * A WPBS markupja nem blokk, ezért a theme.json és a styles/ változatok nem érik
 * el — ugyanaz a helyzet, mint a Fluent Forms skinnél. Ez a második plugin-skin
 * a témában.
 *
 * MUNKAMEGOSZTÁS — fontos, hogy ne keveredjen:
 *   SZÍNEK  → a WPBS SAJÁT BEÁLLÍTÁSAIBÓL jönnek, mert a plugin azokból generál
 *             egy inline `<style>` blokkot `!important`-tal. CSS-ből felülütni
 *             `!important`-csata volna. Ott van beállítva:
 *               · legenda (szabad/foglalt/átmenet) → wp_wpbs_legend_items tábla
 *                 (tools/arbora-wpbs-legenda.php állítja)
 *               · hover #E8D3A0 · kijelölés #C9A961 · mai nap #8C6B34
 *                 → wpbs_settings option (globális)
 *   SZERKEZET, TIPOGRÁFIA, KERETEK → itt.
 *
 * A SPECIFIKUSSÁG A LÉNYEG — mérve (2026-08-27):
 * a plugin `style-front-end.min.css`-e `.wpbs-container`-rel horgonyzott, hosszú
 * láncokkal, pl.
 *     .wpbs-container .wpbs-calendars .wpbs-calendar table th        -> (0,3,0)+1
 *     .wpbs-container .wpbs-calendar-header-navigation .wpbs-next    -> (0,3,0)
 * és a stíluslapja KÉSŐBB jön, mint a mi inline blokkunk — tehát egyenlő
 * specifikusságnál is ő nyer. Ezért minden szabály a DUPLÁZOTT gyökér-osztállyal
 * indul (`.wpbs-container.wpbs-container`), és a láncot legalább annyira
 * kifejtjük, mint ők. Ugyanaz a trükk, amit a WordPress core is használ a
 * navigációnál.
 *
 * A `!important` KÉT esetben szerepel, máshol tilos:
 *   1. a plugin INLINE style attribútumot ír az elemre (naptár-szélességek),
 *   2. a plugin SAJÁT stíluslapja `!important`-ot használ — mérve a nyíl-gombokon:
 *      `.wpbs-container .wpbs-calendar-header-navigation .wpbs-prev
 *       { background-color: #bdc3c7 !important; }`
 *      Ezt semmilyen specifikusság nem veri, csak másik `!important`.
 */

/* ==========================================================================
 * VILÁGOS ÉS SÖTÉT VÁLTOZAT
 *
 * A skin nem éget be színt: minden szerep egy helyi változóból jön, és a
 * változó-készlet attól függ, MILYEN SZEKCIÓBA tetted a naptárat. Így ugyanaz
 * a fájl szolgálja ki mindkét verziót, és a váltás a szerkesztőben egy
 * stílusváltozat-választás — nem kódmódosítás.
 *
 * HASZNÁLAT: a foglalási blokkot csomagold egy csoportba, és annak adj
 * stílusváltozatot:
 *   · „Kártya (világos)" / „Csont szakasz"   -> VILÁGOS (alapértelmezett)
 *   · „Kártya (sötét)" / „Sötét szakasz" / „Mély fekete szakasz" -> SÖTÉT
 *
 * MIÉRT A VILÁGOS AZ ALAPÉRTELMEZETT: az elfogadott terv a főoldalon
 * SZÁNDÉKOSAN világos (csont) sávra teszi az „Árak és foglalás" szekciót — a
 * design system indoklása szerint a fizetési és térkép-beágyazások világos
 * hátterűek, és a hosszú oldal ritmusa is ezt kívánja. A sötét tehát opció,
 * nem alapállapot.
 * ========================================================================== */

.wpbs-main-wrapper {
	/* — VILÁGOS (csont/papír kártyán) — */
	--awpbs-ink: var(--wp--preset--color--txt-dark);
	--awpbs-mute: var(--wp--preset--color--mute-light);
	--awpbs-accent: var(--wp--preset--color--gold-aa);
	--awpbs-accent-strong: var(--wp--preset--color--secondary);
	--awpbs-on-accent: var(--wp--preset--color--bcg-light);
	--awpbs-field-bg: var(--wp--preset--color--paper);
	--awpbs-line-soft: rgba(140, 107, 52, 0.14);
	--awpbs-cell-line: rgba(140, 107, 52, 0.22);
	--awpbs-line: rgba(140, 107, 52, 0.24);
	--awpbs-line-field: rgba(140, 107, 52, 0.28);
	--awpbs-line-strong: rgba(140, 107, 52, 0.34);
	--awpbs-line-hover: rgba(140, 107, 52, 0.55);
}

:is(.is-style-card-dark, .is-style-section-dark, .is-style-section-ink) .wpbs-main-wrapper {
	/* — SÖTÉT — a fő arany veszi át a mély arany szerepét, mert sötéten az
	   olvasható (a mély arany feketén 2,6:1). — */
	--awpbs-ink: var(--wp--preset--color--txt-light);
	--awpbs-mute: var(--wp--preset--color--txt-muted);
	--awpbs-accent: var(--wp--preset--color--primary);
	--awpbs-accent-strong: var(--wp--preset--color--primary);
	--awpbs-on-accent: var(--wp--preset--color--ink);
	--awpbs-field-bg: var(--wp--preset--color--surface);
	--awpbs-line-soft: rgba(201, 169, 97, 0.12);
	--awpbs-cell-line: rgba(201, 169, 97, 0.20);
	--awpbs-line: rgba(201, 169, 97, 0.22);
	--awpbs-line-field: rgba(201, 169, 97, 0.28);
	--awpbs-line-strong: rgba(201, 169, 97, 0.34);
	--awpbs-line-hover: rgba(201, 169, 97, 0.6);
}

/* ---------- keret és szélesség ---------- */

/* A plugin inline `max-width`-et ír a wrapperre és a naptárra (mérve: 316px,
   illetve min 200 / max 380px). Inline stílust csak !important ver. */
.wpbs-container.wpbs-container .wpbs-calendars-wrapper,
.wpbs-main-wrapper .wpbs-calendars-wrapper {
	max-width: 100% !important;
	width: 100%;
}

.wpbs-container.wpbs-container .wpbs-calendars .wpbs-calendar,
.wpbs-main-wrapper .wpbs-calendars .wpbs-calendar {
	max-width: 100% !important;
	min-width: 0 !important;
	width: 100%;
}

/* A naptár saját H2 címe („Villa Arbora") — a kártyának már van felcíme
   („Szabad időpontok"), két cím egymás alatt zaj. */
.wpbs-container.wpbs-container > h2 {
	display: none;
}

/* Az űrlap a plugin szerint 450px-es (`.wpbs-main-wrapper .wpbs-form-container`,
   0,2,0, !important NÉLKÜL) — a naptár viszont kitölti a kártyát, így az űrlap
   a bal szélen lógott egy 1150px-es blokkban. A duplázott osztály (0,3,0) elég
   hozzá, erőszak nem kell.
   Ha egyszer túl levegősnek bizonyul, itt lehet visszafogni (pl. 900px) —
   a mezők párban futnak, tehát a fél szélesség ennek a fele lesz. */
.wpbs-main-wrapper .wpbs-form-container.wpbs-form-container {
	max-width: 100%;
	width: 100%;
}

/* ---------- fejléc: hónapválasztó és nyilak ---------- */

/* FELSŐ TÉRKÖZ: enélkül a fejléc tartalma a naptár tetejéhez tapad (mérve:
   fejléc, nav, cím és nyíl mind 1px-en). A nyilak a navhoz képest abszolút
   pozicionáltak, ezért a nav lejjebb tolása a CÍMET ÉS A NYILAKAT EGYÜTT
   mozgatja — pontosan ezt kérte Dóri (2026-08-28). */
.wpbs-container.wpbs-container .wpbs-calendars .wpbs-calendar .wpbs-calendar-header {
	background: transparent;
	border: none;
	border-bottom: 1px solid var(--awpbs-line);
	padding: 18px 0 14px;
	margin-bottom: 14px;
}

.wpbs-container.wpbs-container .wpbs-calendars .wpbs-calendar .wpbs-calendar-header-navigation {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

/* A böngésző alap-selectje Arialban, szürke kerettel jött — ez a márka-tipó. */
.wpbs-container.wpbs-container .wpbs-calendar-header-navigation .wpbs-select-container select {
	-webkit-appearance: none;
	appearance: none;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--awpbs-ink);
	background: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
	text-align: center;
	text-align-last: center;
	height: auto;
	padding: 6px 4px;
	cursor: pointer;
	width: auto;
	max-width: 100%;
}

.wpbs-container.wpbs-container .wpbs-calendar-header-navigation .wpbs-select-container select:focus-visible {
	outline: 2px solid var(--awpbs-accent);
	outline-offset: 2px;
}

/* TÖBB HÓNAPOS NÉZETNÉL a MÁSODIK naptár címe NEM select, hanem sima span —
   ezért maradt kisbetűs, míg az elsőé nagybetűs lett („nagy / kisbetű nem
   következetes" — Dóri, 2026-08-28). Ugyanazt a tipográfiát kapja. */
.wpbs-container.wpbs-container .wpbs-calendar-header-navigation .wpbs-calendar-header-navigation-month-name {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--awpbs-ink);
}

/* Nyilak: éles sarkú, hajszálvonalas négyzet — a márka vonalas idiómája. */
.wpbs-container.wpbs-container .wpbs-calendar-header-navigation .wpbs-prev,
.wpbs-container.wpbs-container .wpbs-calendar-header-navigation .wpbs-next {
	width: 30px;
	height: 30px;
	flex: 0 0 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* !important: a plugin stíluslapja is azzal írja a hátteret és a sarkot */
	background-color: transparent !important;
	border: 1px solid var(--awpbs-line-strong) !important;
	border-radius: 0 !important;
	padding: 0;
	cursor: pointer;
	transition: background-color 200ms ease, border-color 200ms ease;
}

/* A nyilak ABSZOLÚT pozicionáltak `left: 0` / `right: 0`-val, ezért a nav
   30px-es paddingja nem hat rájuk — mérve 1px-re ültek a naptár szélétől,
   miközben az első napcella 10px-re („a nyilak nagyon a szélére tapadnak" —
   Dóri, 2026-08-28). 8px-re húzva a táblázat szélének vonalába. */
.wpbs-container.wpbs-container .wpbs-calendar-header-navigation .wpbs-prev {
	left: 8px !important;
}

.wpbs-container.wpbs-container .wpbs-calendar-header-navigation .wpbs-next {
	right: 8px !important;
}

.wpbs-container.wpbs-container .wpbs-calendar-header-navigation .wpbs-prev:hover,
.wpbs-container.wpbs-container .wpbs-calendar-header-navigation .wpbs-next:hover {
	background-color: var(--awpbs-accent-strong) !important;
	border-color: var(--awpbs-accent-strong) !important;
}

/* A nyíl-ikont a plugin egy üres span-ból rajzolja — átvesszük saját
   ferde vonalpárral, hogy a vastagsága a mi hajszálvonalunk legyen. */
.wpbs-container.wpbs-container .wpbs-calendar-header-navigation .wpbs-prev .wpbs-arrow,
.wpbs-container.wpbs-container .wpbs-calendar-header-navigation .wpbs-next .wpbs-arrow {
	width: 7px;
	height: 7px;
	border: solid var(--awpbs-accent-strong);
	border-width: 0 0 1px 1px;
	background: none;
	transition: border-color 200ms ease;
}

.wpbs-container.wpbs-container .wpbs-calendar-header-navigation .wpbs-prev .wpbs-arrow {
	transform: rotate(45deg);
	margin-left: 2px;
}

.wpbs-container.wpbs-container .wpbs-calendar-header-navigation .wpbs-next .wpbs-arrow {
	transform: rotate(-135deg);
	margin-right: 2px;
}

.wpbs-container.wpbs-container .wpbs-calendar-header-navigation .wpbs-prev:hover .wpbs-arrow,
.wpbs-container.wpbs-container .wpbs-calendar-header-navigation .wpbs-next:hover .wpbs-arrow {
	border-color: var(--awpbs-on-accent);
}

/* ---------- naptár-rács ---------- */

/* `table-layout: fixed` KELL: a `border-spacing` a táblázat szélességén FELÜL
   jelentkezik auto-layoutnál, így a `width: 100%` mellett is túlcsordul —
   mérve 375px-en 385px-es naptár (10px = a 3px-es köz kétszer + kerekítés).
   Fix layoutnál a tábla tartja a megadott szélességet, és a köz belefér. */
.wpbs-container.wpbs-container .wpbs-calendars .wpbs-calendar table {
	border-collapse: separate;
	border-spacing: 3px;
	table-layout: fixed;
	width: 100%;
}

/* A több hónapos nézet (display=2) keskeny kijelzőn egymás alá kerül —
   a plugin sávja különben kilóg a viewportból. */
.wpbs-container.wpbs-container .wpbs-calendars {
	max-width: 100%;
}

/* Hétnapok fejléce: apró, ritkított, halvány — a hétvége mély arany,
   ahogy a terv is megkülönbözteti. */
.wpbs-container.wpbs-container .wpbs-calendars .wpbs-calendar table thead th {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--awpbs-mute);
	background: transparent;
	border: none;
	padding-bottom: 6px;
}

.wpbs-container.wpbs-container .wpbs-calendars .wpbs-calendar table thead th:nth-child(6),
.wpbs-container.wpbs-container .wpbs-calendars .wpbs-calendar table thead th:nth-child(7) {
	color: var(--awpbs-accent);
}

/* Napcellák: hajszálvonalas keret, éles sarok. A HÁTTÉRSZÍNT a plugin adja
   a legenda-beállításból — ide csak a keret és a tipográfia jön. */
.wpbs-container.wpbs-container .wpbs-calendars .wpbs-calendar table td .wpbs-date .wpbs-date-inner {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8125rem;
	font-weight: 400;
	color: var(--awpbs-ink);
	border-radius: 0;
}

.wpbs-container.wpbs-container .wpbs-calendars .wpbs-calendar table td .wpbs-date .wpbs-legend-item-icon,
.wpbs-container.wpbs-container .wpbs-calendars .wpbs-calendar table td .wpbs-date .wpbs-legend-item-icon div {
	border-radius: 0;
}

.wpbs-container.wpbs-container .wpbs-calendars .wpbs-calendar table td .wpbs-date:not(.wpbs-gap) .wpbs-legend-item-icon {
	border: 1px solid var(--awpbs-cell-line);
}

/* A MAI NAP kerete: a plugin 4px-es tömör keretet ír rá `!important`-tal
   (a `today_highlight_color` beállításból). Négy pixel a hajszálvonalas
   rendszerben kiabál — 1px-re fogjuk, a szín marad a beállításból.
   Dóri jelezte: „túl vastag a keret" (2026-08-28). */
.wpbs-container.wpbs-container .wpbs-calendars .wpbs-calendar td
	.wpbs-date-today:not(.wpbs-date-hover):not(.wpbs-date-selected) .wpbs-legend-item-icon {
	border-width: 1px !important;
}

/* A hónapon kívüli („gap") cellák teljesen semlegesek. */
.wpbs-container.wpbs-container .wpbs-calendars .wpbs-calendar table td .wpbs-date.wpbs-gap .wpbs-legend-item-icon {
	border: none;
	background: transparent;
}

/* Foglalt nap: a háttér a beállításból jön (bone-deep), a szám halvány. */
.wpbs-container.wpbs-container .wpbs-calendars .wpbs-calendar table td .wpbs-date:not(.wpbs-is-bookable) .wpbs-date-inner {
	color: var(--awpbs-mute);
}

/* Kijelölt nap: a háttér arany (beállításból) — a szám ezen feketén olvasható. */
.wpbs-container.wpbs-container .wpbs-calendars .wpbs-calendar table td .wpbs-date-selected .wpbs-date-inner,
.wpbs-container.wpbs-container .wpbs-calendars .wpbs-calendar table td .wpbs-date-hover .wpbs-date-inner {
	color: var(--wp--preset--color--ink);
	font-weight: 500;
}

/* ---------- legenda ---------- */

/* A plugin oldalra teszi (wpbs-legend-position-side), ami elszedi a naptár
   szélességét. A tervben a naptár alatt fut, egy sorban. */
.wpbs-container.wpbs-container .wpbs-calendars-wrapper.wpbs-legend-position-side {
	display: flex;
	flex-direction: column-reverse;
	gap: 16px;
}

/* A plugin FEHÉR hátteret ad a legendának, amitől az egy különálló sávnak
   látszik a naptár alatt („ez fura így" — Dóri, 2026-08-28). Átlátszóra
   vesszük: két jelmagyarázat-pötty, nem doboz. A felső hajszálvonal is
   elmarad — a naptár rácsa után az már egy vonallal több. */
.wpbs-container.wpbs-container .wpbs-calendars-wrapper .wpbs-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	margin: 0;
	padding: 4px 0 0;
	background: transparent;
	border: none;
}

.wpbs-container.wpbs-container .wpbs-calendars-wrapper .wpbs-legend .wpbs-legend-item {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}

.wpbs-container.wpbs-container .wpbs-calendars-wrapper .wpbs-legend .wpbs-legend-item-icon,
.wpbs-container.wpbs-container .wpbs-calendars-wrapper .wpbs-legend .wpbs-legend-item-icon div {
	border-radius: 0;
}

.wpbs-container.wpbs-container .wpbs-calendars-wrapper .wpbs-legend .wpbs-legend-item-icon {
	width: 12px;
	height: 12px;
	flex: 0 0 12px;
	border: 1px solid var(--awpbs-line-strong);
}

.wpbs-container.wpbs-container .wpbs-calendars-wrapper .wpbs-legend .wpbs-legend-item-name {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--awpbs-mute);
}

/* ==========================================================================
 * SÖTÉT VÁLTOZAT — a nap-cellák kitöltése
 *
 * ⚠️ EZ A VÁLTOZAT EGYETLEN CSÚNYA PONTJA, és tudatos:
 * a nap-cellák háttere NEM CSS-ből jön, hanem a WPBS legenda-beállításából —
 * a plugin abból generál inline `<style>`-t `!important`-tal. Egy naptárhoz
 * viszont EGY színkészlet tartozik, tehát ugyanaz a naptár nem tud külön
 * világos és sötét kitöltést. Ezért a sötét ágban felül kell ütni.
 *
 * A megosztás így marad tiszta:
 *   · a VILÁGOS változat színei a beállításból élnek (az a kanonikus),
 *   · a SÖTÉT változat itt, felülütéssel — kizárólag a sötét szekcióba ágyazva.
 * Ha a naptár egyszer csak sötéten kell, érdemesebb a beállítást átírni és ezt
 * a blokkot törölni.
 * ========================================================================== */

/* Szabad nap: a szekció háttere látszik át, a hajszálkeret jelöli a cellát. */
:is(.is-style-card-dark, .is-style-section-dark, .is-style-section-ink)
	.wpbs-container.wpbs-container .wpbs-legend-item-icon-1 div:first-of-type {
	background-color: transparent !important;
}

/* Foglalt nap: halvány bone-fátyol a sötéten — „lezárt", de nem lyuk. */
:is(.is-style-card-dark, .is-style-section-dark, .is-style-section-ink)
	.wpbs-container.wpbs-container .wpbs-legend-item-icon-2 div:first-of-type {
	background-color: rgba(237, 233, 225, 0.1) !important;
}

/* Átmenet-napok (érkezés/távozás): a két fél ugyanazt a párost kapja. */
:is(.is-style-card-dark, .is-style-section-dark, .is-style-section-ink)
	.wpbs-container.wpbs-container .wpbs-legend-item-icon-3 div:first-of-type,
:is(.is-style-card-dark, .is-style-section-dark, .is-style-section-ink)
	.wpbs-container.wpbs-container .wpbs-legend-item-icon-4 div:nth-of-type(2) {
	background-color: transparent !important;
}

:is(.is-style-card-dark, .is-style-section-dark, .is-style-section-ink)
	.wpbs-container.wpbs-container .wpbs-legend-item-icon-3 div:nth-of-type(2),
:is(.is-style-card-dark, .is-style-section-dark, .is-style-section-ink)
	.wpbs-container.wpbs-container .wpbs-legend-item-icon-4 div:first-of-type {
	background-color: rgba(237, 233, 225, 0.1) !important;
}

/* A mai nap kerete a beállításban mély arany (#8C6B34) — az sötéten fakó.
   A hover és a kijelölés aranya viszont sötéten is jó, azokhoz nem nyúlunk. */
:is(.is-style-card-dark, .is-style-section-dark, .is-style-section-ink)
	.wpbs-container.wpbs-container .wpbs-date-today:not(.wpbs-date-hover):not(.wpbs-date-selected) .wpbs-legend-item-icon {
	border-color: var(--wp--preset--color--primary) !important;
}

/* ==========================================================================
 * FOGLALÁSI ŰRLAP
 *
 * A WPBS `form_styling` beállítása **`theme`** — a plugin szándékosan CSUPASZ
 * markupot ad, és a témára bízza a stílust. Ezért jött böngésző-alapértelmezetten
 * (Arial 13,3px, 2px besüllyesztett keret), és ezért NINCS itt specifikusság-harc:
 * elég az egyszerű `.wpbs-form-container` horgony.
 *
 * A form a `is-style-card` VILÁGOS kártyában ül, ezért a világos-alapú tokenek
 * élnek: txt-dark · mute-light · gold-aa (a fő arany csontszínen olvashatatlan).
 * ========================================================================== */

.wpbs-form-container .wpbs-form-fields {
	display: flex;
	flex-wrap: wrap;
	/* Sorköz szűkítve 22 -> 14px (Dóri, 2026-08-28): a címke + mező páros
	   önmagában is ad függőleges levegőt, a 22px-től szétesett az űrlap. */
	gap: 14px 20px;
}

/* A plugin 20px alsó BELSŐ térközt ad minden mezőnek — a `margin: 0` nem fogja
   meg. Emiatt maradt nagy a sortáv a `gap` szűkítése után is (mérve: 103px-es
   meződoboz 47px-es input mellett).
   ⚠️ A plugin szabálya `.wpbs-main-wrapper`-rel is horgonyoz — (0,3,0) —, ezért
   ide a duplázott `wpbs-form-container` kell, hogy (0,4,0) legyen. */
.wpbs-main-wrapper .wpbs-form-container.wpbs-form-container .wpbs-form-field {
	margin: 0;
	/* 20px -> 2px (Dóri, 2026-08-28). A 14px-es rács-gappel együtt 16px a
	   tényleges sortáv. */
	padding: 0 0 2px;
	min-width: 0;
	flex: 1 1 100%;
}

/* A félszéles mezőket a plugin KÉT osztállyal jelöli — `wpbs-field-layout-left`
   ÉS `wpbs-field-layout-right` (eredetileg float-tal párosítva). Mindkettő kell:
   ha csak a `-left`-et kezeljük, a jobb oldali pár visszaesik teljes szélességre,
   és az egész űrlap egyoszlopossá esik szét. (Mérve 2026-08-28.)

   ⚠️ AZ ELŐTAGNAK EGYEZNIE KELL a fenti alap-szabályéval, plusz egy osztály.
   Mérve: amikor az alap-szabály `.wpbs-main-wrapper …container.container`-re
   nőtt a plugin 20px-es paddingja miatt, ez a rövidebb szabály alulmaradt, és
   az űrlap újra egyoszlopos lett.

   `flex-grow: 0` — különben egy magában álló félmező kinyúlna a teljes sorra,
   holott az űrlap-beállításban kifejezetten „half" a szélessége. */
.wpbs-main-wrapper .wpbs-form-container.wpbs-form-container .wpbs-form-field.wpbs-field-layout-left,
.wpbs-main-wrapper .wpbs-form-container.wpbs-form-container .wpbs-form-field.wpbs-field-layout-right {
	flex: 0 1 calc(50% - 10px);
}

/* ---------- korosztály-sor: három mező egymás mellett ----------
   A plugin elrendezés-rendszere CSAK fél-fél oszlopot ismer (`-left`/`-right`),
   hármat nem — ezért kell ide szabály. A horog a mező `class` kulcsából jön
   (az űrlap-generátor teszi rá), nem id-kre horgonyzunk: a 14–18 és a 3–14
   mezőből több feltételes VARIÁNS van, azok átszámozása némán eltörné a CSS-t.

   Egyszerre pontosan HÁROM ilyen mező látszik — mindegyik csoportból egy —,
   a többit a feltételes logika `display: none`-ra teszi, a rejtett elem pedig
   nem flex-elem, tehát nem tolja szét a sort.

   A bázis a `(100% - 40px) / 3`: három elem és a köztük lévő két 20px-es
   oszlopköz pontosan kiadja a teljes sort. A `flex-grow: 1` a szélső esetért
   van — négy felnőttnél csak a „3 év alatt" mező marad, az így teljes
   szélességre nyúlik ahelyett, hogy árván ülne egy harmadnyi dobozban. */
.wpbs-main-wrapper .wpbs-form-container.wpbs-form-container .wpbs-form-field.arbora-korosztaly {
	flex: 1 1 calc((100% - 40px) / 3);
}

/* A pipa a felnőtt-legördülő MELLETT ül, de nincs címkéje (`hide_label`), ezért
   a doboz tetejére csúszna, miközben a szomszédjában a címke lenyomja az inputot.
   Az alsó igazítás hozza egy vonalba a pipát a legördülővel. */
.wpbs-main-wrapper .wpbs-form-container.wpbs-form-container .wpbs-form-field.arbora-kapu-pipa {
	align-self: flex-end;
	/* Az alsó igazítás egy vonalba hozza a két doboz alját, de a pipa így is
	   8px-rel a legördülő közepe ALÁ került (mérve: legördülő-közép 1266,
	   pipa-közép 1274). A 2px-es alap-padding 10px-re emelése pont ennyivel
	   tolja vissza. Ha a mezők magassága változik, ezt újra kell mérni. */
	padding-bottom: 10px;
}

/* ---------- címke ---------- */

.wpbs-form-container .wpbs-form-field-label {
	margin-bottom: 8px;
}

.wpbs-form-container .wpbs-form-field-label label,
.wpbs-form-container .wpbs-form-field-label span {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--awpbs-mute);
	line-height: 1.4;
}

.wpbs-form-container .wpbs-field-required-asterisk {
	color: var(--awpbs-accent);
	margin-left: 2px;
}

/* ---------- beviteli mezők ---------- */

.wpbs-form-container input[type="text"],
.wpbs-form-container input[type="email"],
.wpbs-form-container input[type="tel"],
.wpbs-form-container input[type="number"],
.wpbs-form-container input[type="date"],
.wpbs-form-container select,
.wpbs-form-container textarea {
	width: 100%;
	box-sizing: border-box;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.875rem;
	font-weight: 300;
	line-height: 1.5;
	color: var(--awpbs-ink);
	background-color: var(--awpbs-field-bg);
	border: 1px solid var(--awpbs-line-field);
	border-radius: 0;
	padding: 12px 14px;
	transition: border-color 200ms ease;
	appearance: none;
	-webkit-appearance: none;
}

.wpbs-form-container textarea {
	min-height: 110px;
	resize: vertical;
}

.wpbs-form-container input:hover,
.wpbs-form-container select:hover,
.wpbs-form-container textarea:hover {
	border-color: var(--awpbs-line-hover);
}

/* FÓKUSZ — a keret vált tömör mély aranyra; se fekete kontúr, se gyűrű.
   A fekete kontúr forrása a PLUGIN, `!important`-tal (Dóri találta meg):
       .wpbs-main-wrapper input:focus-visible { outline: #000 auto 1px !important;
                                                outline-offset: 1px !important; }
   Ezt semmilyen specifikusság nem veri — csak másik `!important`. Ezért van itt
   `!important`, és ez a fájl harmadik ilyen esete (a másik kettő a nyíl-gomb és
   a naptár-szélesség).

   A JELZÉS: EGYETLEN vonal — maga a keret sötétedik a hajszálvonalas 28%-os
   aranyról tömör `gold-aa`-ra. Se gyűrű, se külön kontúr (Dóri, 2026-08-28:
   „ez a dupla border fura, jobb volt amikor csak az egyik volt, sötéten").

   ⚠️ MÉRÉSI TANULSÁG, hogy ne fussunk bele újra: az inputon
   `transition: border-color 0.2s` van, és a `getComputedStyle` ATMENET KÖZBEN
   az interpolált értéket adja vissza. Emiatt többször úgy mértem, hogy a
   fókuszált keret az alapértéken marad — holott végig működött. Fókusz- vagy
   hover-állapot ellenőrzésekor előbb iktasd ki az átmeneteket:
       *,*::before,*::after { transition: none !important }
   és csak utána olvass. (Ugyanez fogott meg a világos/sötét váltásnál is.)

   Fókusz-jelzés nélkül hagyni nem opció (WCAG 2.4.7) — a keret sötétedése az. */
.wpbs-main-wrapper .wpbs-form-container.wpbs-form-container input:focus,
.wpbs-main-wrapper .wpbs-form-container.wpbs-form-container select:focus,
.wpbs-main-wrapper .wpbs-form-container.wpbs-form-container textarea:focus,
.wpbs-main-wrapper .wpbs-form-container.wpbs-form-container input:focus-visible,
.wpbs-main-wrapper .wpbs-form-container.wpbs-form-container select:focus-visible,
.wpbs-main-wrapper .wpbs-form-container.wpbs-form-container textarea:focus-visible {
	/* A teljes `border` shorthand, nem csak a `border-color`: a longhand mérve
	   nem érvényesült a `border: 1px solid …` alapszabály mellett. */
	border: 1px solid var(--awpbs-accent) !important;
	outline: none !important;
	outline-offset: 0 !important;
	box-shadow: none !important;
}

/* A plugin a jelölőnégyzet melletti `span`-ra is ráteszi a fekete kontúrt. */
.wpbs-main-wrapper .wpbs-form-container.wpbs-form-container input:focus-visible + span {
	outline: none !important;
}

.wpbs-form-container ::placeholder {
	color: var(--awpbs-mute);
	opacity: 0.7;
}

/* A select saját nyila eltűnik az appearance:none-nal — sajátot rajzolunk,
   két ferde vonalból, a márka vonalas idiómájában. */
.wpbs-form-container select {
	background-image:
		linear-gradient(45deg, transparent 50%, var(--awpbs-accent) 50%),
		linear-gradient(135deg, var(--awpbs-accent) 50%, transparent 50%);
	background-position:
		calc(100% - 18px) calc(50% + 1px),
		calc(100% - 13px) calc(50% + 1px);
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: 34px;
	cursor: pointer;
}

/* ---------- jelölőnégyzet és rádiógomb ---------- */

.wpbs-form-container input[type="checkbox"],
.wpbs-form-container input[type="radio"] {
	appearance: auto;
	-webkit-appearance: auto;
	width: 15px;
	height: 15px;
	margin-right: 8px;
	accent-color: var(--awpbs-accent);
	cursor: pointer;
	flex: 0 0 auto;
}

.wpbs-form-container .wpbs-form-field-input label {
	display: flex;
	align-items: flex-start;
	gap: 2px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8125rem;
	font-weight: 300;
	line-height: 1.7;
	color: var(--awpbs-ink);
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
}

/* ---------- telefonmező (intl-tel-input) ---------- */

.wpbs-form-container .iti { width: 100%; }

.wpbs-form-container .iti .iti__flag-container { border-right: 1px solid var(--awpbs-cell-line); }

.wpbs-form-container .iti .iti__selected-flag { padding: 0 10px; border-radius: 0; }

.wpbs-form-container .iti__country-list {
	border-radius: 0;
	border: 1px solid var(--awpbs-line-field);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8125rem;
}

/* ---------- ár-összesítő ---------- */

.wpbs-form-container .wpbs-total-price {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8125rem;
	color: var(--awpbs-ink);
}

.wpbs-form-container .wpbs-total-price table {
	width: 100%;
	border-collapse: collapse;
}

.wpbs-form-container .wpbs-total-price th {
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--awpbs-mute);
	text-align: left;
	padding: 0 0 8px;
	border-bottom: 1px solid var(--awpbs-line);
}

.wpbs-form-container .wpbs-total-price th:last-child,
.wpbs-form-container .wpbs-total-price td:last-child {
	text-align: right;
}

.wpbs-form-container .wpbs-total-price td {
	padding: 9px 0;
	border-bottom: 1px solid var(--awpbs-line-soft);
}

/* A záró (összeg) sor: serif, mély arany — ez a kártya hangsúlya. */
.wpbs-form-container .wpbs-total-price tr:last-child td {
	font-family: var(--wp--preset--font-family--header);
	font-size: 1.25rem;
	color: var(--awpbs-accent);
	border-bottom: none;
	border-top: 1px solid var(--awpbs-line-strong);
	padding-top: 12px;
}

/* ---------- hozzájárulás-mezők (checkbox) ---------- */

/* A plugin ezeknél a mezőknél is kiírja a címke-dobozt, de az CSAK a kötelező
   csillagot tartalmazza (`<label><sup>*</sup></label>`) — ettől nyílik egy üres,
   28px-es sor a jelölőnégyzet fölött („ez is fura" — Dóri, 2026-08-28).
   A címke-dobozt elrejtjük, a csillag pedig a jelölőnégyzet SAJÁT szövege után
   kerül — így a kötelezőség jelzése nem vész el. */
.wpbs-form-container .wpbs-form-field-consent .wpbs-form-field-label {
	display: none;
}

.wpbs-form-container .wpbs-form-field-consent.wpbs-field-required .wpbs-form-field-input > label::after {
	content: "*";
	color: var(--awpbs-accent);
	margin-left: 4px;
	line-height: 1;
}

/* ---------- fizetési mód ---------- */

.wpbs-form-container .wpbs-payment-method-label {
	display: flex;
	align-items: center;
	gap: 4px;
}

/* A plugin alapértelmezett angol leírása („Check out with WooCommerce.") —
   Dóri kérte a levételét (2026-08-28). Egy fizetési mód van, a „Kártyás
   fizetés" felirat önmagában elmond mindent.
   ⚠️ Ha később több fizetési mód lesz, ezt újra kell gondolni: akkor a leírás
   megkülönböztető információt hordozhat. */
/* A plugin `...-description-open` szabálya (0,5,0) kapcsolja `block`-ra —
   ezért kell ide hat osztály. */
.wpbs-main-wrapper .wpbs-form-container.wpbs-form-container
	.wpbs-form-field.wpbs-form-field-payment_method .wpbs-payment-method-description {
	display: none;
}

/* ---------- küldés gomb ---------- */

.wpbs-form-container .wpbs-form-submit-button {
	flex: 1 1 100%;
	margin-top: 6px;
}

.wpbs-form-container .wpbs-form-submit-button button[type="submit"] {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.71875rem;
	font-weight: 500;
	letter-spacing: var(--wp--custom--letter-spacing--button);
	text-transform: uppercase;
	line-height: 1;
	color: var(--awpbs-on-accent);
	background-color: var(--awpbs-accent-strong);
	border: 1px solid var(--awpbs-accent-strong);
	border-radius: 0;
	padding: 0.9375rem 2.125rem;
	cursor: pointer;
	transition: background-color 250ms ease, border-color 250ms ease;
}

.wpbs-form-container .wpbs-form-submit-button button[type="submit"]:hover {
	background-color: var(--awpbs-accent);
	border-color: var(--awpbs-accent);
}

.wpbs-form-container .wpbs-form-submit-button button[type="submit"]:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ---------- „Tovább a fizetéshez" — a megerősítő lépés gombja ----------
 *
 * A WooCommerce-ADDON saját CSS-e (style-front-end.css) beégeti ide a WPBS
 * lila márkaszínét: `#wpbs-woocommerce-payment-button a { background-color:
 * #873eff }`, hover `#5007aa`. A skin eddig egyáltalán nem nyúlt hozzá, ezért
 * a foglalás utolsó, legfontosabb gombja nyers lila volt (Dóri, 2026-09-12).
 *
 * ⚠️ SPECIFIKUSSÁG ÉS !IMPORTANT: a plugin szabálya `#id a` = (1,0,1), és a
 * méret-jellegű tulajdonságokat `!important`-tal tolja (width, padding,
 * font-size, font-weight, font-family, line-height, height, border-radius,
 * box-shadow, outline). A SZÍNEKET viszont NEM — azokhoz elég a nagyobb
 * specifikusság. Ezért itt `.wpbs-main-wrapper #…` = (1,1,1) visz a színeknél,
 * és csak ott teszünk `!important`-ot, ahol a plugin is azt használja.
 *
 * A `border-radius: 0` közülük a legfontosabb: a plugin 2px-et ír elő
 * `!important`-tal, ami a „nincs lekerekítés" elv ellen van.
 *
 * A megjelenés a fenti submit-gombéval egyezik, hogy a folyamat két gombja ne
 * beszéljen két nyelvet — de teljes szélességű marad (a plugin `width:100%`-ot
 * kényszerít, és a megerősítő lépésen ez helyes is: ez az egyetlen kiút).
 */
.wpbs-main-wrapper #wpbs-woocommerce-payment-button a {
	color: var(--awpbs-on-accent);
	background-color: var(--awpbs-accent-strong);
	border: 1px solid var(--awpbs-accent-strong);
	border-radius: 0 !important;
	font-family: var(--wp--preset--font-family--body) !important;
	font-size: 0.71875rem !important;
	font-weight: 500 !important;
	letter-spacing: var(--wp--custom--letter-spacing--button);
	text-transform: uppercase;
	line-height: 1 !important;
	padding: 1.0625rem !important;
	transition: background-color 250ms ease, border-color 250ms ease;
}

.wpbs-main-wrapper #wpbs-woocommerce-payment-button a:hover,
.wpbs-main-wrapper #wpbs-woocommerce-payment-button a:focus-visible {
	color: var(--awpbs-on-accent);
	background-color: var(--awpbs-accent);
	border-color: var(--awpbs-accent);
}

/* ---------- hibaüzenetek ---------- */

.wpbs-form-container .wpbs-form-field-error,
.wpbs-form-container .wpbs-error {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	color: var(--wp--custom--feedback--error);
	margin-top: 6px;
}

.wpbs-form-container .wpbs-form-field-error input,
.wpbs-form-container .wpbs-form-field-error select,
.wpbs-form-container .wpbs-form-field-error textarea {
	border-color: var(--wp--custom--feedback--error);
}

/* ---------- mobil ---------- */

/* A HÁRMAS sor előbb esik szét, mint a kettes: három legördülő „1 fő"-típusú
   értékekkel 780px alatt már csak 200px alá szorulva férne el, ahol a magyar
   címkék („Gyermek (14–18 év) — felnőtt árszabás") tördelése szétdobja a sort.
   Ezért a korosztály-sor 781px-nél kettőre, majd a szokásos 600px-nél egyre vált.
   A 781/600 töréspont a témában már használt, nem új. */
@media screen and (max-width: 781px) {
	.wpbs-main-wrapper .wpbs-form-container.wpbs-form-container .wpbs-form-field.arbora-korosztaly {
		flex: 1 1 calc(50% - 10px);
	}
}

@media screen and (max-width: 600px) {
	.wpbs-main-wrapper .wpbs-form-container.wpbs-form-container .wpbs-form-field.wpbs-field-layout-left,
	.wpbs-main-wrapper .wpbs-form-container.wpbs-form-container .wpbs-form-field.wpbs-field-layout-right,
	.wpbs-main-wrapper .wpbs-form-container.wpbs-form-container .wpbs-form-field.arbora-korosztaly {
		flex: 1 1 100%;
	}

	/* Egy oszlopban már nincs mihez igazodni — a pipa térköze visszaáll. */
	.wpbs-main-wrapper .wpbs-form-container.wpbs-form-container .wpbs-form-field.arbora-kapu-pipa {
		align-self: auto;
	}
}