/**
 * Az ajánlatkérő oldal megjelenése.
 *
 * MIÉRT CSS ÉS NEM ELEMENTOR-BEÁLLÍTÁS?
 *
 * Az első változatban a kinézetet is a generált Elementor-beállításokba tettem.
 * Drótváz lett belőle: kártya, árnyék, elválasztó vonal és a heróra lógó sáv
 * nélkül. Ezek beállításonként külön felvehetők lennének, de az első kézi
 * módosításnál szétesnének.
 *
 * A felosztás ugyanaz, mint a láblécnél: az Elementor a TARTALMAT tartja
 * (szöveg, sorrend, ikon – mind szerkeszthető marad), a KINÉZET innen jön.
 *
 * Horgonyosztályok a konténereken:
 *   .sfa-ao__hero      – fejléc sáv
 *   .sfa-ao__elonyok   – a három előny kártyája
 *   .sfa-ao__urlapsav  – űrlap + oldalsáv
 *   .sfa-ao__folyamat  – „Így dolgozunk együtt"
 */

.sfa-ao {
	--ao-navy: #0b1f3a;
	--ao-navy-sotet: #08182d;
	--ao-arany: var(--e-global-color-accent, #d89a2b);
	--ao-szoveg: #46505f;
	--ao-halvany: #6b7688;
	--ao-keret: #e3e8ef;
	--ao-halvanykek: #eef2f8;
	--ao-arnyek: 0 20px 56px rgba(11, 31, 58, 0.13);
}

/* -------------------------------------------------------------------------
 * 1. HERO
 *
 * A tervben a fotó a jobb oldalon van, és balról sötétkék fut rá. Nem két
 * hasábbal oldjuk meg, hanem átmenetes fátyollal a képen: így bármilyen
 * arányú fotóval működik, és mobilon sem esik szét.
 * ---------------------------------------------------------------------- */

.sfa-ao__hero {
	position: relative;
	justify-content: center;
}

/*
 * Az átmenetet SAJÁT álelem adja, nem az Elementor „háttérfátyol" beállítása.
 * Az a réteg csak akkor kerül a HTML-be, ha a szerkesztőben be van kapcsolva –
 * ha valaki kikapcsolja vagy egy sablonfrissítés elviszi, a fehér cím
 * olvashatatlanná válna egy világos fotón. Így a védelem nem beállítás
 * kérdése.
 */
.sfa-ao__hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;

	/*
	 * Az Elementor a konténer „háttérfátylát" UGYANEBBE a ::before elembe
	 * teszi, és ráírja a beállított átlátszatlanságot. Ha az 0,72-n áll, a
	 * gradiensünk is 72%-on jelenik meg – mérve pontosan ez történt, ezért
	 * ütött át a fotó a szöveg mögött. A fátylat a beállításokból is
	 * kivettük, ez itt a biztosíték, ha valaki visszakapcsolná.
	 */
	opacity: 1 !important;
	background-color: transparent !important;
	/*
	 * A bal oldal TÖMÖR sötétkék egészen a szövegoszlop széléig, és csak utána
	 * kezd nyílni. Az előző, lágy átmenetnél 48%-nál még 0,78 volt az
	 * átlátszatlanság, ezért a fotó végigfutott a sávon – a tervben viszont a
	 * bal fele egyszínű, a kép csak a jobb oldalon látszik.
	 */
	background-image: linear-gradient(
		92deg,
		var(--ao-navy-sotet) 0%,
		var(--ao-navy-sotet) 42%,
		rgba(8, 24, 45, 0.94) 50%,
		rgba(8, 24, 45, 0.62) 60%,
		rgba(8, 24, 45, 0.28) 74%,
		rgba(8, 24, 45, 0.12) 100%
	);
}

/*
 * Keskeny képernyőn nincs „jobb oldal": a szöveg a kép fölé kerülne. Ott a
 * fátyol majdnem tömör, különben a fehér cím olvashatatlan.
 */
@media (max-width: 900px) {

	.sfa-ao__hero::before {
		background-image: linear-gradient(
			180deg,
			rgba(8, 24, 45, 0.94) 0%,
			rgba(8, 24, 45, 0.88) 100%
		);
	}
}

/* Ha az Elementor saját fátyla mégis ott van, ne duplázzon rá. */
.sfa-ao__hero > .elementor-background-overlay {
	display: none !important;
}

.sfa-ao__hero > .e-con-inner {
	position: relative;
	z-index: 1;
}

/*
 * Az Elementor saját `max-width: 100%` szabálya erősebb a sima osztálynál,
 * ezért kell a kettőzés és az `!important` – mérve a cím 1300 pixel széles
 * volt, vagyis egyetlen sorban futott végig a sávon.
 */
.sfa-ao__hero.sfa-ao__hero .elementor-widget-heading,
.sfa-ao__hero.sfa-ao__hero .elementor-widget-text-editor {
	max-width: 560px !important;
}

.sfa-ao__hero h1.elementor-heading-title {
	font-size: clamp(30px, 3.6vw, 46px);
	line-height: 1.16;
	margin-bottom: 6px;
}

.sfa-ao__hero .elementor-widget-text-editor {
	font-size: 16px;
	line-height: 1.7;
}

/* -------------------------------------------------------------------------
 * 2. ELŐNYÖK – egyetlen fehér kártya, ami ráúszik a heróra
 *
 * FONTOS: a kártya a BELSŐ dobozra kerül, nem a külsőre. A dobozos konténer
 * két elemből áll: a külső teljes szélességű, a belső a 1300 pixeles sáv. Ha a
 * fehér hátteret a külsőre tennénk, teljes képernyőszélességű fehér csík lenne
 * belőle kártya helyett – pontosan ez történt az előző változatban.
 * ---------------------------------------------------------------------- */

.sfa-ao__elonyok {
	position: relative;
	z-index: 2;
	margin-top: -70px;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	background: none !important;
}

.sfa-ao__elonyok > .e-con-inner {
	gap: 0 !important;
	align-items: stretch;
	background: #fff;
	border-radius: 14px;
	box-shadow: var(--ao-arnyek);
	padding: 30px 12px;
}

.sfa-ao__elonyok > .e-con-inner > .e-con {
	position: relative;
	padding: 4px 30px;

	/*
	 * Felülre igazítunk, nem középre. Középre igazításnál minden oszlop a
	 * SAJÁT tartalmához képest középre kerül, így a három ikon három
	 * különböző magasságban áll – ha az egyik leírás eggyel több sor, az
	 * oszlopa elcsúszik. Mérve 12 pixel volt az eltérés.
	 */
	justify-content: flex-start;

	/*
	 * Az oszlopok az Elementorban 30% szélesek, ami háromszor 90% – a maradék
	 * 10% üresen maradt a kártya jobb szélén. A `flex: 1 1 0` egyenlően osztja
	 * el a teljes helyet, tehát nincs se lyuk, se csúszás.
	 */
	width: auto !important;
	flex: 1 1 0 !important;
	min-width: 0;
	max-width: none !important;
}

.sfa-ao__elonyok > .e-con-inner > .e-con + .e-con::before {
	content: "";
	position: absolute;
	left: 0;
	top: 4px;
	bottom: 4px;
	width: 1px;
	background: var(--ao-keret);
}

/* -------------------------------------------------------------------------
 * 3. IKONOS DOBOZOK
 *
 * A tervben nagy, vonalas, sötétkék ikonok vannak, keret és kitöltés nélkül.
 * Az Elementor alapértelmezése ehhez képest apró és színes.
 * ---------------------------------------------------------------------- */

.sfa-ao .elementor-widget-icon-box .elementor-icon-box-wrapper {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	text-align: left;
}

.sfa-ao .elementor-widget-icon-box .elementor-icon-box-icon {
	margin: 0;
	flex: 0 0 auto;
}

.sfa-ao.sfa-ao .elementor-widget-icon-box .elementor-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	height: auto;
	padding: 0;
	background: none;
	border: 0;
	color: var(--ao-navy);
	font-size: 40px;
}

.sfa-ao.sfa-ao .elementor-widget-icon-box .elementor-icon svg {
	width: 40px;
	height: 40px;
	fill: var(--ao-navy);
}

.sfa-ao .elementor-widget-icon-box .elementor-icon-box-title {
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--ao-navy);
}

.sfa-ao .elementor-widget-icon-box .elementor-icon-box-description {
	margin: 0;
	font-size: 14px;
	line-height: 1.65;
	color: var(--ao-halvany);
}

/* -------------------------------------------------------------------------
 * 4. ŰRLAPSÁV
 * ---------------------------------------------------------------------- */

.sfa-ao__urlapsav {
	padding-top: 64px !important;
}

.sfa-ao__urlapsav h2.elementor-heading-title {
	font-size: clamp(26px, 2.3vw, 32px);
	font-weight: 700;
	line-height: 1.25;
	margin-bottom: 8px;
	color: var(--ao-navy);
}

.sfa-ao__urlapsav .elementor-widget-text-editor {
	font-size: 15px;
	color: var(--ao-halvany);
}

/* --- Bal hasáb: az űrlap fehér kártyában ----------------------------- */

.sfa-ao__urlap {
	background: #fff;
	border: 1px solid var(--ao-keret);
	border-radius: 14px;
	box-shadow: 0 10px 34px rgba(11, 31, 58, 0.06);
	padding: 34px !important;
}

/* --- Jobb hasáb: halványkék kártya ----------------------------------- */

.sfa-ao__oldalsav {
	background: var(--ao-halvanykek) !important;
	border: 0;
	border-radius: 14px;
	padding: 34px !important;
	gap: 22px !important;
}

.sfa-ao__oldalsav.sfa-ao__oldalsav > .elementor-widget-icon-box .elementor-icon,
.sfa-ao__oldalsav.sfa-ao__oldalsav > .elementor-widget-icon-box .elementor-icon svg {
	font-size: 34px;
	width: 34px;
	height: 34px;
	color: var(--ao-arany);
	fill: var(--ao-arany);
}

.sfa-ao__oldalsav > .elementor-widget-icon-box .elementor-icon-box-title {
	font-size: 16px;
}

/* -------------------------------------------------------------------------
 * 5. „KÉRDÉSE VAN?" – sötétkék doboz az oldalsáv alján
 * ---------------------------------------------------------------------- */

.sfa-ao__kerdes {
	margin-top: 6px;
	background: var(--ao-navy-sotet) !important;
	border-radius: 14px;
	padding: 26px 28px !important;
}

.sfa-ao__kerdes .elementor-icon-box-wrapper {
	align-items: center;
}

.sfa-ao__kerdes .elementor-icon,
.sfa-ao__kerdes .elementor-icon svg {
	color: var(--ao-arany) !important;
	fill: var(--ao-arany) !important;
	font-size: 34px !important;
	width: 34px !important;
	height: 34px !important;
}

.sfa-ao__kerdes .elementor-icon-box-title {
	color: #fff !important;
	font-size: 19px !important;
	margin-bottom: 4px !important;
}

.sfa-ao__kerdes .elementor-icon-box-description {
	color: rgba(255, 255, 255, 0.82) !important;
	font-size: 14px !important;
}

.sfa-ao__kerdes a {
	color: var(--ao-arany);
	text-decoration: none;
}

.sfa-ao__kerdes a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* -------------------------------------------------------------------------
 * 6. FOLYAMAT
 *
 * Öt lépés egy sorban: sorszám sötétkék karikában, alatta az ikon fehér
 * karikában, közöttük arany nyíl. A sorszámot CSS-számláló adja, nem a
 * címszövegbe írjuk – így a lépések Elementorban átrendezhetők, és a
 * számozás magától követi.
 * ---------------------------------------------------------------------- */

.sfa-ao__folyamat {
	background: #fff !important;
}

.sfa-ao__folyamat h2.elementor-heading-title {
	font-size: clamp(26px, 2.3vw, 32px);
	font-weight: 700;
	color: var(--ao-navy);
}

.sfa-ao__lepesek {
	counter-reset: sfa-lepes;
	align-items: flex-start;
	flex-wrap: nowrap;
}

/*
 * Az öt oszlop egyenlően ossza el a helyet. Az Elementorban százalékos
 * szélesség van rajtuk (18%), de a köztük lévő 32 pixeles rések nem férnek
 * bele a maradék 10%-ba – ezért tört le az ötödik lépés egy második sorba.
 * A `flex: 1 1 0` a réseket levonva osztja el a helyet, tehát mindig kijön.
 */
.sfa-ao__lepesek > .e-con {
	width: auto !important;
	flex: 1 1 0 !important;
	min-width: 0;
	max-width: none !important;
}

.sfa-ao__lepesek > .e-con {
	counter-increment: sfa-lepes;
	position: relative;
	align-items: center;
	padding-top: 18px;
}

/* Sorszám karikában, az ikon fölé lógva. */
.sfa-ao__lepesek > .e-con::before {
	content: counter(sfa-lepes);
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--ao-navy);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
}

/* Arany nyíl a lépések között. */
.sfa-ao__lepesek > .e-con + .e-con::after {
	content: "";
	position: absolute;
	top: 66px;
	left: -20px;
	width: 40px;
	height: 10px;
	transform: translateX(-50%);
	background: var(--ao-arany);
	-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 10' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 5h36'/%3E%3Cpath d='m32 1 4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 10' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 5h36'/%3E%3Cpath d='m32 1 4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat;
}

.sfa-ao__folyamat .elementor-widget-icon-box .elementor-icon-box-wrapper {
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 14px;
}

.sfa-ao__folyamat.sfa-ao__folyamat .elementor-widget-icon-box .elementor-icon {
	width: 76px;
	height: 76px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid var(--ao-keret);
	box-shadow: 0 8px 22px rgba(11, 31, 58, 0.08);
	color: var(--ao-navy);
	font-size: 30px;
}

.sfa-ao__folyamat.sfa-ao__folyamat .elementor-widget-icon-box .elementor-icon svg {
	width: 30px;
	height: 30px;
	fill: var(--ao-navy);
}

.sfa-ao__folyamat .elementor-icon-box-title {
	font-size: 15px;
	margin-bottom: 8px;
}

.sfa-ao__folyamat .elementor-icon-box-description {
	font-size: 13.5px;
	line-height: 1.6;
}

/* -------------------------------------------------------------------------
 * 7. RESZPONZÍV
 * ---------------------------------------------------------------------- */

@media (max-width: 1024px) {

	.sfa-ao__elonyok {
		margin-top: -44px;
	}

	/*
	 * Az űrlap és az oldalsáv egymás alá kerül. 1024 pixelen a két hasáb
	 * 409 és 268 pixel lenne – mérve –, és a 409-es hasábban az űrlap
	 * kétoszlopos rácsa 162 pixeles mezőkre esne szét. Az kitölthetetlen.
	 */
	.sfa-ao__urlap,
	.sfa-ao__oldalsav {
		width: 100% !important;
		max-width: none !important;
		flex: 1 1 100% !important;
	}

	/* Nyíl csak akkor van értelme, ha a lépések egy sorban futnak. */
	.sfa-ao__lepesek > .e-con + .e-con::after {
		display: none;
	}

	.sfa-ao__lepesek {
		flex-wrap: wrap;
	}

	.sfa-ao__lepesek > .e-con {
		flex: 1 1 calc(50% - 16px) !important;
	}
}

/*
 * Tablet: marad a három hasáb, de az ikon a szöveg FÖLÉ kerül.
 *
 * Egymás alá rendezve a kártya 320 pixel magasra nőtt, és felaprózta a
 * sávot – a hero fölötte alig maradt látható. Oldalt álló ikonnal viszont
 * 220 pixelen a szövegnek 150 pixel se marad. Az ikont fölé téve a teljes
 * hasábszélesség a szövegé, és a három blokk egy sorban marad.
 */
@media (min-width: 601px) and (max-width: 1024px) {

	.sfa-ao__elonyok > .e-con-inner > .e-con {
		padding: 4px 18px;
	}

	.sfa-ao__elonyok .elementor-widget-icon-box .elementor-icon-box-wrapper {
		flex-direction: column;
		gap: 12px;
	}
}

/* Telefonon egymás alá, ikonnal az oldalán – ott van rá vízszintes hely. */
@media (max-width: 600px) {

	/* Egymás alatti hasáboknál a függőleges vonal értelmetlen. */
	.sfa-ao__elonyok > .e-con-inner > .e-con + .e-con::before {
		display: none;
	}

	.sfa-ao__elonyok > .e-con-inner {
		flex-direction: column;
		border-radius: 12px;
		padding: 14px 6px;
	}

	.sfa-ao__elonyok > .e-con-inner > .e-con {
		flex: 1 1 auto !important;
		padding: 14px 16px;
	}

	.sfa-ao__elonyok > .e-con-inner > .e-con + .e-con {
		border-top: 1px solid var(--ao-keret);
	}
}

@media (max-width: 767px) {

	.sfa-ao__elonyok {
		margin-top: -30px;
	}

	.sfa-ao__urlapsav {
		padding-top: 40px !important;
	}

	/*
	 * Mobilon minden pixel a mezőké. 22 pixeles kártyabelsővel és 16 pixeles
	 * oldalmargóval a beviteli mező 390-ből 297 pixelre szűkült – a képernyő
	 * negyede keretre ment el.
	 */
	.sfa-ao__urlap,
	.sfa-ao__oldalsav {
		padding: 16px !important;
	}

	.sfa-ao.sfa-ao .elementor-widget-icon-box .elementor-icon,
	.sfa-ao.sfa-ao .elementor-widget-icon-box .elementor-icon svg {
		font-size: 32px;
		width: 32px;
		height: 32px;
	}

	.sfa-ao__folyamat.sfa-ao__folyamat .elementor-widget-icon-box .elementor-icon {
		width: 64px;
		height: 64px;
	}
}

/* -------------------------------------------------------------------------
 * 8. JELENTKEZÉSI OLDAL SÁVJA
 *
 * A jelentkezés kártyái (lépésjelző, űrlap, panel) saját stíluslapból jönnek,
 * itt csak a sáv körüli helyet adjuk meg – és a bizalmi sávot, ami ugyanaz a
 * kártyaforma, mint az ajánlatkérőn, csak négy elemmel és rálógás nélkül.
 * ---------------------------------------------------------------------- */

.sfa-ao__jelsav {
	background: none !important;
}

 /*
 * A bizalmi sáv ugyanazt a kártyaformát használja, mint az előnysáv, ezért
 * kapja meg annak osztályát is – de a heróra rálógás és a nullázott alsó
 * belső margó ide nem való. Utóbbi miatt tapadt rá a kártya a láblécre.
 */
.sfa-ao__bizalom {
	margin-top: 0 !important;
	padding-top: 8px !important;
	padding-bottom: 72px !important;
}

@media (max-width: 767px) {

	.sfa-ao__bizalom {
		padding-bottom: 48px !important;
	}
}

.sfa-ao__bizalom > .e-con-inner {
	box-shadow: 0 10px 30px rgba(11, 31, 58, 0.07);
}

/* -------------------------------------------------------------------------
 * 9. BIZALMI SÁV IKONJAI
 *
 * A tervben ezek jóval visszafogottabbak, mint az előnykártyák ikonjai: ez a
 * sáv megnyugtat, nem hirdet. Teli, 40 pixeles sötétkék ikonnal harsányabb
 * volt, mint maga az űrlap.
 * ---------------------------------------------------------------------- */

.sfa-ao__bizalom.sfa-ao__bizalom .elementor-widget-icon-box .elementor-icon,
.sfa-ao__bizalom.sfa-ao__bizalom .elementor-widget-icon-box .elementor-icon svg {
	font-size: 26px;
	width: 26px;
	height: 26px;
	color: #7c879a;
	fill: #7c879a;
}

.sfa-ao__bizalom .elementor-widget-icon-box .elementor-icon-box-wrapper {
	gap: 14px;
}

.sfa-ao__bizalom .elementor-widget-icon-box .elementor-icon-box-title {
	font-size: 15px;
}

.sfa-ao__bizalom .elementor-widget-icon-box .elementor-icon-box-description {
	font-size: 13.5px;
}