/* Objednávka členstva – dizajn „Fakturacne 2" (Figma 610:1477).
   Celý obsah kreslí FAPI embed: produkty (fapi-form-items) sú krok 1
   v ľavom stĺpci, nasledujú údaje a platba; vpravo pláva karta zhrnutia
   (fapi-form-result). Vzhľad polí nesie Worker fapi-css – tu len
   rozloženie a rám stránky. Písmo aj resety dodáva main.css. */

.zso {
	--zso-right: 560px;
	--zso-gap: 64px;
	position: relative;
	background: #faf8f2;
	padding: 48px 0 96px;
	/* Dekoračný oblúk je širší než stránka – nesmie vyrobiť vodorovný posuv. */
	overflow: hidden;
}

/* Pieskový oblúk za obsahom (dizajn: elipsa od horného okraja). */
.zso::before {
	content: "";
	position: absolute;
	top: -560px;
	left: 50%;
	transform: translateX(-50%);
	width: 190%;
	min-width: 1900px;
	height: 980px;
	background: #f9eadb;
	border-radius: 50%;
	pointer-events: none;
}

.zso-obsah {
	position: relative;
}

/* ---------- Krok 1: výber členstva ---------- */

.zso-krok,
.zso .fapi-order-form .fapi-form-basic-data .fapi-container-header::before,
.zso .fapi-order-form .fapi-form-payment-methods .fapi-container-header::before {
	font-size: 32px;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.35;
	color: #1a1a1a;
}

.zso-krok {
	margin: 0;
}

.zso-pozn {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 14px 0 26px;
	font-size: 15px;
	font-weight: 300;
}

.zso-pozn svg {
	width: 20px;
	height: 20px;
	flex: none;
}


/* ---------- Vybraný produkt v karte zhrnutia (zrkadlí objednavka.js) ---------- */

/* Zvýraznenie zrkadlí vybraný riadok balíka: pieskový podklad + žltý rám.
   Silný selektor + !important: resety Worker CSS vnútri formulára rámy rušia. */
.zso .fapi-order-form .zso-produkt {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: 16px;
	align-items: start;
	margin: 0 0 14px;
	padding: 16px 20px;
	background: #fdf1e3 !important;
	border: 2px solid #ffbe00 !important;
	border-radius: 14px;
}

.zso-produkt p {
	margin: 0;
}

.zso-produkt__nazov {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
}

.zso-produkt__obdobie {
	grid-column: 1;
	font-size: 13px;
	font-weight: 300;
	color: rgba(26, 26, 26, 0.65);
}

.zso-produkt__cena {
	grid-column: 2;
	grid-row: 1;
	font-size: 17px;
	font-weight: 700;
	white-space: nowrap;
}

/* ---------- Výhody (presunú sa skriptom do karty zhrnutia) ---------- */

.zso-vyhody {
	list-style: none;
	margin: 28px 0 0;
	padding: 0;
	display: grid;
	gap: 14px;
	font-size: 15px;
	font-weight: 300;
}

.zso-vyhody li {
	display: flex;
	align-items: center;
	gap: 12px;
}

.zso-vyhody svg {
	width: 22px;
	height: 22px;
	flex: none;
	color: #00d1c7;
}

/* ---------- FAPI formulár ---------- */

.zso-fapi {
	margin-top: 48px;
}

/* Embed obmedzuje šírku na 650 px a kreslí sa ako jedna biela karta –
   stránka potrebuje celú mriežku na pozadí stránky. */
.zso-fapi .fapi-form-wrapper,
.zso-fapi .fapi-order-form,
.zso-fapi .fapi-order-form > form {
	max-width: none !important;
	width: 100% !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

/* Nadpisy sekcií FAPI → číslované kroky dizajnu. Pôvodný text sa
   zneviditeľní cez font-size 0, náhradu kreslí ::before. */
.zso .fapi-order-form .fapi-form-basic-data .fapi-container-header,
.zso .fapi-order-form .fapi-form-payment-methods .fapi-container-header {
	font-size: 0 !important;
	line-height: 0 !important;
	background: none !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
}

.zso .fapi-order-form .fapi-form-basic-data .fapi-container-header::before,
.zso .fapi-order-form .fapi-form-payment-methods .fapi-container-header::before {
	display: block;
}

/* Nadpis položiek netreba – krok „1." je nadpis stránky nad formulárom. */
.zso .fapi-order-form .fapi-form-items .fapi-container-header {
	display: none !important;
}

.zso .fapi-order-form .fapi-form-basic-data .fapi-container-header::before {
	content: "2. Vyplňte svoje údaje";
	margin: 44px 0 20px;
}

.zso .fapi-order-form .fapi-form-payment-methods .fapi-container-header::before {
	content: "3. Vyberte spôsob platby";
	margin: 44px 0 20px;
}

/* Titulok karty = natívna hlavička bloku result („Zhrnutie objednávky"). */
.zso .fapi-order-form .fapi-form-result .fapi-container-header {
	font-size: 28px !important;
	font-weight: 700 !important;
	letter-spacing: -0.02em;
	line-height: 1.35 !important;
	background: none !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 0 18px !important;
}

/* Ľavé sekcie (produkty, údaje, platba) ležia na pozadí stránky bez karty. */
.zso .fapi-order-form .fapi-form-items,
.zso .fapi-order-form .fapi-form-basic-data,
.zso .fapi-order-form .fapi-form-payment-methods {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Tlačidlo objednávky – žltá pilulka dizajnu. */
.zso .fapi-order-form .fapi-form-result button[type="submit"],
.zso .fapi-order-form .fapi-form-result .fapi-submit-button button {
	background: #ffbe00 !important;
	border: 0 !important;
	border-radius: 999px !important;
	color: #1a1a1a !important;
	font-weight: 700 !important;
	min-height: 60px;
}

/* Produktové riadky na celú šírku ľavého stĺpca. */
.zso .fapi-order-form .fapi-form-items .fapi-form-item-group {
	width: 100% !important;
	max-width: none !important;
}

/* Dvojstĺpcové rozloženie dizajnu: karta zhrnutia (fapi-form-result)
   pláva vpravo a cez zápornú margin (--zso-pull2 meria objednavka.js)
   sa zdvihne na úroveň kroku 1. */
@media (min-width: 1100px) {
	.zso-fapi .fapi-order-form > form {
		display: block;
	}

	.zso .fapi-order-form .fapi-form-result {
		float: right;
		clear: right;
		width: var(--zso-right);
		box-sizing: border-box;
		margin-top: var(--zso-pull2, 0px);
		background: #fff !important;
		border: 0 !important;
		border-radius: 40px !important;
		padding: 40px 44px !important;
		box-shadow: none !important;
	}

	.zso .fapi-order-form .fapi-form-items,
	.zso .fapi-order-form .fapi-form-basic-data,
	.zso .fapi-order-form .fapi-form-payment-methods {
		width: calc(100% - var(--zso-right) - var(--zso-gap));
	}

	.zso-vyber {
		max-width: calc(100% - var(--zso-right) - var(--zso-gap));
	}

	/* Plávajúci cenový pásik netreba – súčty sú v karte vpravo. */
	.zso .fapi-order-form .fapi-float-price-container {
		display: none !important;
	}

	/* Podpis FAPI pod obomi stĺpcami. */
	.zso-fapi .fapi-order-form > p {
		clear: both;
		padding-top: 24px;
	}

	/* Upozornenie testovacieho režimu nesmie podliezať kartu vpravo. */
	.zso .fapi-order-form > .fapi-form-warning {
		width: calc(100% - var(--zso-right) - var(--zso-gap));
		box-sizing: border-box;
	}

	.zso .fapi-order-form .fapi-form-basic-data .fapi-container-header::before,
	.zso .fapi-order-form .fapi-form-payment-methods .fapi-container-header::before {
		white-space: nowrap;
	}

	/* Polia na celú šírku ľavého stĺpca (embed ich kreslí užšie). */
	.zso .fapi-order-form .fapi-form-basic-data input[type="text"],
	.zso .fapi-order-form .fapi-form-basic-data input[type="email"],
	.zso .fapi-order-form .fapi-form-basic-data input[type="tel"],
	.zso .fapi-order-form .fapi-form-basic-data select {
		width: 100% !important;
		max-width: none !important;
	}
}

/* „SPOLU dnes zaplatíte" – zvýraznený pieskový box súčtov v karte. */
.zso .fapi-order-form .fapi-form-result .fapi-form-result-prices-group {
	background: #f9eadb !important;
	border: 0 !important;
	border-radius: 16px !important;
	padding: 20px 24px !important;
	margin: 18px 0 !important;
}