/* AI Landing beillesztő – publikus űrlap visszajelzések.
 * Szándékosan visszafogott és semleges, hogy a landing saját stílusát ne üsse ki.
 * A landing CSS bármikor felülírhatja (.ailp-form-msg). */
.ailp-form-msg {
	margin: 0 0 14px;
	padding: 12px 16px;
	border-radius: 8px;
	font-size: 15px;
	line-height: 1.45;
	border: 1px solid transparent;
}
.ailp-form-msg--error {
	background: #fdecea;
	border-color: #f5c6cb;
	color: #842029;
}
.ailp-form-msg--ok {
	background: #e8f5e9;
	border-color: #b6dfbb;
	color: #1b5e20;
}
.ailp-form-done {
	margin: 0;
}

/* ------------------------------------------------------------------ *
 *  A vizuális építővel készült űrlap ALAP-stílusa.
 *  MINDEN szabály :where()-ben → NULLA specifikus, így a landing saját
 *  CSS-e (form/label/input…) MINDIG felülírja. Ha a landingnek nincs
 *  űrlap-stílusa, ez ad egy letisztult, használható alapot.
 * ------------------------------------------------------------------ */
:where(.ailp-form) {
	display: flex;
	flex-wrap: wrap;
	gap: 18px 16px;
	align-items: flex-start;
}
:where(.ailp-form .ailp-fld) {
	flex: 1 1 100%;
	min-width: 0;
	margin: 0;
}
:where(.ailp-form .ailp-fld--half) {
	flex: 1 1 calc(50% - 8px);
}
:where(.ailp-form .ailp-fld > label) {
	display: block;
	font-weight: 600;
	margin: 0 0 6px;
}
:where(.ailp-form .ailp-fld input[type="text"]),
:where(.ailp-form .ailp-fld input[type="email"]),
:where(.ailp-form .ailp-fld input[type="tel"]),
:where(.ailp-form .ailp-fld input[type="number"]),
:where(.ailp-form .ailp-fld input[type="url"]),
:where(.ailp-form .ailp-fld textarea),
:where(.ailp-form .ailp-fld select) {
	width: 100%;
	padding: 11px 13px;
	border: 1px solid #c5c9cf;
	border-radius: 7px;
	font: inherit;
	color: inherit;
	background: #fff;
	box-sizing: border-box;
}
:where(.ailp-form .ailp-fld textarea) {
	min-height: 110px;
	resize: vertical;
}
:where(.ailp-form .ailp-opts) {
	display: flex;
	flex-direction: column;
	gap: 7px;
}
:where(.ailp-form .ailp-opt),
:where(.ailp-form .ailp-consent) {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-weight: 400;
	cursor: pointer;
}
:where(.ailp-form .ailp-opt input),
:where(.ailp-form .ailp-consent input) {
	margin-top: 3px;
	flex: 0 0 auto;
}
:where(.ailp-form .ailp-req) {
	color: #d63638;
}
:where(.ailp-form .ailp-fld-desc) {
	display: block;
	margin-top: 5px;
	font-size: 0.85em;
	opacity: 0.7;
}
/* A küldés gomb alapstílusa SZÁNDÉKOSAN nem :where (egyetlen osztály = 0,1,0
 * specifikusság): így egy landing `* { padding:0 }` reset (0,0,0) NEM nullázza ki,
 * de a landing saját gomb-osztálya (pl. .submit / .btn-submit, szintén 0,1,0, és
 * később töltődik) felülírja – így a gomb a landing dizájnját kapja, ha van. */
.ailp-form-submit {
	display: inline-block;
	padding: 13px 26px;
	border: 0;
	border-radius: 8px;
	background: #2563eb;
	color: #fff;
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
}
.ailp-form-submit:hover {
	background: #1d4ed8;
}
/* Alapértelmezett, sima hover-ÁTMENET a Küldés gombra – CSAK ha a landing nem ad
 * sajátot. Specifikusság 0,2,1: legyőzi a front-end `all:revert` resetjét (0,2,0, ami
 * különben kinullázná a transition-t), de a landing scoped gomb-szabálya (≥0,2,1, és
 * később töltődik) felülírja, így a saját transition-öd marad érvényben. */
.ailp-form button.ailp-form-submit,
.ailp-form input.ailp-form-submit {
	transition: 0.3s ease;
}

/* ------------------------------------------------------------------ *
 *  ELRENDEZÉSI garanciák – ezek SZÁNDÉKOSAN nem :where (valós, .ailp-form-os
 *  specifikusság), mert a landing általános `label{display:block}` /
 *  `input{width:100%}` szabályai különben elrontják a checkbox/rádió elrendezést
 *  és az egyforma magasságot. A landing SZÍN/keret stílusát NEM bántják.
 * ------------------------------------------------------------------ */

/* #3 – a jelölőnégyzet / rádió MINDIG a szöveg BAL oldalán. */
.ailp-form .ailp-opts {
	display: flex;
	flex-direction: column;
	gap: 9px;
}
.ailp-form .ailp-opt,
.ailp-form .ailp-consent {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 10px;
	width: 100%;
	font-weight: 400;
}
.ailp-form .ailp-opt > input,
.ailp-form .ailp-consent > input {
	width: auto;
	min-width: 0;
	flex: 0 0 auto;
	order: -1;
	margin: 2px 0 0;
}
.ailp-form .ailp-opt > span,
.ailp-form .ailp-consent > span {
	flex: 1 1 auto;
}

/* #2 – egymás mellé tett mezők EGYFORMA magassága: a <select> natív rendere-
 * lését kikapcsoljuk (saját nyíllal), és egységes sortávot adunk, így a select
 * és az input pontosan azonos magasságú lesz (azonos padding/keret mellett). */
.ailp-form .ailp-fld input,
.ailp-form .ailp-fld select,
.ailp-form .ailp-fld textarea {
	line-height: 1.5;
}
.ailp-form .ailp-fld select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23888' d='M1 1.5L6 6.5L11 1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 12px 8px;
	padding-right: 38px;
}

/* ------------------------------------------------------------------ *
 *  FRONT-END „túlélő" LAYOUT – a Theme Shell Mode `all:revert` resetje
 *  (0,2,0, `.ailp-root.ailp-page-ID *`) különben kinullázná a flex-elrendezést,
 *  a fél-szélességet és a checkbox/rádió igazítást (a preview-ban ez a reset
 *  NINCS, ezért ott eddig is jó volt). A reset NEM !important, ezért az alábbi
 *  !important LAYOUT primitívek mindig nyernek – a vizuális (szín/keret) stílust
 *  a landing a saját scoped CSS-én át továbbra is szabadon adja.
 * ------------------------------------------------------------------ */
.ailp-form {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: flex-start !important;
	gap: 18px 16px !important;
}
.ailp-form > .ailp-fld {
	flex: 1 1 100% !important;
	min-width: 0 !important;
	box-sizing: border-box !important;
}
.ailp-form > .ailp-fld--half {
	flex: 1 1 calc(50% - 11px) !important;
	max-width: calc(50% - 8px) !important;
}
.ailp-form .ailp-fld > label {
	display: block !important;
}
.ailp-form .ailp-fld input,
.ailp-form .ailp-fld select,
.ailp-form .ailp-fld textarea {
	width: 100% !important;
	box-sizing: border-box !important;
}
.ailp-form .ailp-opts {
	display: flex !important;
	flex-direction: column !important;
}
.ailp-form .ailp-opt,
.ailp-form .ailp-consent {
	display: flex !important;
	flex-direction: row !important;
	/* TÁVOLSÁG a doboz és a szöveg között – !important, hogy az all:revert reset és a
	 * beillesztett landing-CSS se nullázza ki (élesben eddig hiányzott). */
	gap: 10px !important;
}
/* Opció (checkbox / rádió, rövid felirat): a doboz a szöveggel EGY vízszintes
 * vonalban (függőleges közép) – ne csússzon le a szöveg. */
.ailp-form .ailp-opt {
	align-items: center !important;
}
/* Hozzájárulás (gyakran többsoros): a doboz az ELSŐ sorhoz igazodjon. */
.ailp-form .ailp-consent {
	align-items: flex-start !important;
}
.ailp-form .ailp-opt > input,
.ailp-form .ailp-consent > input {
	width: auto !important;
	flex: 0 0 auto !important;
	order: -1 !important;
	margin: 0 !important;
}
.ailp-form .ailp-consent > input {
	margin-top: 0.2em !important;
}