/*!
 * A&A Forgacs Muhelye - Arajanlatkeres (299) egyedi kiegeszitesek
 *
 * Az urlap megjeleneset tulnyomoreszt a Fluent Forms Pro Elementor widget
 * natv kontrolljai adjak (cimke, input, focus, GDPR, submit, uzenetek).
 * Ez a fajl CSAK azt a negy dolgot oldja meg, amire a widgetnek nincs
 * kontrollja:
 *
 *   1. radiogombok keretezett kartya (pill) megjelenese
 *   2. fajlfeltoltes szaggatott keretu dropzone
 *   3. submit gomb nyila (::after)
 *   4. mobil racs- es tordelesi finomhangolas
 *
 * Minden szabaly a 299-es oldalra es az .aa-quote-form widgetre van szukitve.
 * Szinek: kizarolag az Elementor Kit globalis tokenjei, illetve a szoveg-
 * token attetszosegbol szarmaztatott hajszalvonalak - uj szin nem kerul be.
 */

.elementor-299 .aa-quote-form {
	--aa-ink: var(--e-global-color-text, #F3EEE7);
	--aa-gold: var(--e-global-color-accent, #B88A4A);
	--aa-surface: var(--e-global-color-primary, #1E1612);
	--aa-hair: rgba(243, 238, 231, 0.14);
	--aa-hair-strong: rgba(243, 238, 231, 0.28);
	--aa-muted: rgba(243, 238, 231, 0.55);
}

/* =========================================================
 * 1. RADIOGOMBOK - keretezett kartya / pill
 * A Fluent Forms sima inline radiokat renderel; a latvanyterv
 * kulonallo, bekeretezett dobozokat mutat.
 * ========================================================= */

.elementor-299 .aa-quote-form .ff-el-group.aa-pill .ff-el-input--content {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.elementor-299 .aa-quote-form .ff-el-group.aa-pill .ff-el-form-check {
	margin: 0;
	padding: 0;
	flex: 0 0 auto;
}

.elementor-299 .aa-quote-form .ff-el-group.aa-pill .ff-el-form-check-label {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 13px 22px;
	border: 1px solid var(--aa-hair);
	background: var(--aa-surface);
	color: var(--aa-ink);
	font-family: 'Montserrat', sans-serif;
	font-size: 15px;
	font-weight: 300;
	line-height: 1.2;
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.elementor-299 .aa-quote-form .ff-el-group.aa-pill .ff-el-form-check-label:hover {
	border-color: var(--aa-gold);
}

.elementor-299 .aa-quote-form .ff-el-group.aa-pill .ff-el-form-check-input {
	width: 15px;
	height: 15px;
	margin: 0;
	flex: 0 0 15px;
	accent-color: var(--aa-gold);
	cursor: pointer;
}

/* Kivalasztott allapot - jol lathato arany keret es enyhe arany alapszin.
   :has() tamogatas eseten a teljes kartya reagal. */
.elementor-299 .aa-quote-form .ff-el-group.aa-pill .ff-el-form-check-label:has(input:checked) {
	border-color: var(--aa-gold);
	background: rgba(184, 138, 74, 0.12);
}

/* Billentyuzetes fokusz */
.elementor-299 .aa-quote-form .ff-el-group.aa-pill .ff-el-form-check-label:has(input:focus-visible) {
	outline: 2px solid var(--aa-gold);
	outline-offset: 2px;
}

/* Tartalek olyan bongeszokre, ahol nincs :has() - ott legalabb a natv
   radio jelzi a valasztast, a keret pedig fokuszban valtozik. */
@supports not selector(:has(*)) {
	.elementor-299 .aa-quote-form .ff-el-group.aa-pill .ff-el-form-check-label:focus-within {
		border-color: var(--aa-gold);
	}
}

/* =========================================================
 * 2. FAJLFELTOLTES - szaggatott keretu dropzone
 * A btn_text adja a cimet, a help_message (under_input) az alcimet.
 * ========================================================= */

.elementor-299 .aa-quote-form .ff-el-group.aa-upload .ff-el-input--content {
	display: block;
}

.elementor-299 .aa-quote-form .ff-el-group.aa-upload .ff_file_upload_holder {
	display: block;
	width: 100%;
	margin: 0;
	padding: 34px 24px 12px;
	border: 1px dashed var(--aa-hair-strong);
	background: var(--aa-surface);
	text-align: center;
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.elementor-299 .aa-quote-form .ff-el-group.aa-upload .ff_file_upload_holder:hover,
.elementor-299 .aa-quote-form .ff-el-group.aa-upload .ff_file_upload_holder:focus-within {
	border-color: var(--aa-gold);
}

/* A "gomb" itt a dropzone cimsora - nem gombkent, hanem szovegkent jelenik meg. */
.elementor-299 .aa-quote-form .ff-el-group.aa-upload .ff_upload_btn.ff-btn {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--aa-ink);
	font-family: 'Cormorant Garamond', serif;
	font-size: 22px;
	font-weight: 300;
	line-height: 1.35;
	letter-spacing: 0;
	text-transform: none;
	text-align: center;
	cursor: pointer;
}

.elementor-299 .aa-quote-form .ff-el-group.aa-upload .ff_upload_btn.ff-btn:hover {
	background: none;
	color: var(--aa-ink);
}

/* Az alcim a dropzone-on belulre kerul. */
.elementor-299 .aa-quote-form .ff-el-group.aa-upload .ff-el-help-message {
	margin: -22px 0 0;
	padding: 0 24px 30px;
	border: 1px dashed var(--aa-hair-strong);
	border-top: 0;
	background: var(--aa-surface);
	color: var(--aa-muted);
	font-family: 'Montserrat', sans-serif;
	font-size: 14px;
	font-weight: 300;
	line-height: 1.6;
	text-align: center;
	font-style: normal;
	pointer-events: none;
}

/* A feltoltott fajlok listaja */
.elementor-299 .aa-quote-form .ff-el-group.aa-upload .ff-uploaded-list {
	margin-top: 14px;
}

.elementor-299 .aa-quote-form .ff-el-group.aa-upload .ff-upload-preview {
	border: 1px solid var(--aa-hair);
	background: var(--aa-surface);
	color: var(--aa-ink);
}

.elementor-299 .aa-quote-form .ff-el-group.aa-upload .ff-upload-preview .ff-upload-progress-inline-text {
	color: var(--aa-muted);
}

/* =========================================================
 * 3. SUBMIT GOMB NYILA
 * ========================================================= */

.elementor-299 .aa-quote-form .ff-el-group .ff-btn-submit {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.elementor-299 .aa-quote-form .ff-el-group .ff-btn-submit::after {
	content: '\2192'; /* -> */
	font-size: 15px;
	line-height: 1;
	transition: transform 0.2s ease;
}

.elementor-299 .aa-quote-form .ff-el-group .ff-btn-submit:hover::after {
	transform: translateX(4px);
}

/* =========================================================
 * 4. APRO IGAZITASOK
 * ========================================================= */

/* A ket 2-oszlopos sor koze ugyanaz a 22px koz kerul, mint a tervben. */
.elementor-299 .aa-quote-form .ff-t-container {
	gap: 22px;
}

.elementor-299 .aa-quote-form .ff-t-cell {
	padding: 0;
}

/* GDPR sor: a jelolonegyzet es a szoveg fuggolegesen igazitva. */
.elementor-299 .aa-quote-form .ff-el-group.aa-gdpr .ff-el-form-check-label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
}

.elementor-299 .aa-quote-form .ff-el-group.aa-gdpr .ff_tc_checkbox input {
	margin-top: 3px;
	accent-color: var(--aa-gold);
}

/* Select nyil es megjeles a tobbi mezovel egysegesen. */
.elementor-299 .aa-quote-form .ff-el-form-control:focus {
	box-shadow: none;
}

/* Sikeruzenet: az urlap helyen jelenik meg, ne ugorjon a layout. */
.elementor-299 .aa-quote-form .ff-message-success {
	padding: 28px 32px;
	margin: 0;
}

/* =========================================================
 * 5. RESZPONZIV
 * ========================================================= */

@media (max-width: 1024px) {
	.elementor-299 .aa-quote-form .ff-el-group.aa-upload .ff_file_upload_holder {
		padding: 28px 20px 12px;
	}
}

@media (max-width: 767px) {
	/* Az elso negy mezo egy oszlopba tordel. */
	.elementor-299 .aa-quote-form .ff-t-container {
		display: block;
	}

	.elementor-299 .aa-quote-form .ff-t-cell {
		width: 100% !important;
		max-width: 100% !important;
		flex: 0 0 100% !important;
		display: block;
	}

	/* A radiogombok teljes szelessegben, egymas alatt - konnyen kattinthatoan. */
	.elementor-299 .aa-quote-form .ff-el-group.aa-pill .ff-el-input--content {
		gap: 10px;
	}

	.elementor-299 .aa-quote-form .ff-el-group.aa-pill .ff-el-form-check {
		flex: 1 1 100%;
	}

	.elementor-299 .aa-quote-form .ff-el-group.aa-pill .ff-el-form-check-label {
		width: 100%;
		padding: 14px 18px;
	}

	.elementor-299 .aa-quote-form .ff-el-group.aa-upload .ff_upload_btn.ff-btn {
		font-size: 19px;
	}

	.elementor-299 .aa-quote-form .ff-el-group.aa-upload .ff_file_upload_holder {
		padding: 24px 16px 12px;
	}

	.elementor-299 .aa-quote-form .ff-el-group.aa-upload .ff-el-help-message {
		padding: 0 16px 24px;
		font-size: 13px;
	}

	/* A gomb teljes szelessegben, nagyobb erintofelulettel. */
	.elementor-299 .aa-quote-form .ff-el-group .ff-btn-submit {
		width: 100%;
		justify-content: center;
	}
}

/* =========================================================
 * 6. OLDALSAV KARTYAK - hover visszajelzes a kattinthatoakon
 * ========================================================= */

.elementor-299 .aa-card {
	transition: border-color 0.25s ease;
}

.elementor-299 .aa-card--link {
	text-decoration: none;
}

.elementor-299 .aa-card--link:hover {
	border-color: var(--e-global-color-accent, #B88A4A) !important;
}