/* WHY AI - konsultacijos formų stilius.
   Taikoma tik formoms 3 (LT) ir 4 (EN). Salient tokenai: Figtree, #f03800, juodas fonas. */

.fluentform .ff-whyai {
	--wa-accent: #f03800;
	--wa-accent-hover: #ff5321;
	--wa-text: #f2f2f2;
	--wa-muted: rgba(242, 242, 242, .62);
	--wa-field-bg: rgba(255, 255, 255, .06);
	--wa-field-bg-focus: rgba(255, 255, 255, .09);
	--wa-border: rgba(255, 255, 255, .18);
	--wa-radius: 8px;
	--wa-error: #ff7a6b;
}

/* --- Plotis ir tarpai --------------------------------------------------- */
.fluentform .ff-whyai {
	max-width: 560px;
	margin-inline: auto;
	/* Kad forma reaguotu i savo konteinerio ploti, o ne i ekrana:
	   ta pati forma turi tvarkingai atrodyti ir siaurame 1/3 stulpelyje. */
	container-type: inline-size;
	/* WPBakery stulpelis gali centruoti teksta; formoje etiketes visada kaireje. */
	text-align: left;
	font-family: Figtree, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.fluentform .ff-whyai .ff-el-group { margin-bottom: 20px; }
.fluentform .ff-whyai .ff-t-container { gap: 16px; }
.fluentform .ff-whyai .ff-t-cell { padding: 0; }

/* --- Etiketės ----------------------------------------------------------- */
.fluentform .ff-whyai .ff-el-input--label label {
	color: var(--wa-text);
	font-size: 15px;
	font-weight: 500;
	line-height: 22px;
	margin-bottom: 6px;
}

/* „(nebūtina)" - tyliau nei pats laukas */
.fluentform .ff-whyai .ff-el-input--label label { font-variant-numeric: tabular-nums; }

.fluentform .ff-whyai .ff-el-is-required.asterisk-right label:after { color: var(--wa-accent); }

/* --- Laukai ------------------------------------------------------------- */
.fluentform .ff-whyai input[type="text"],
.fluentform .ff-whyai input[type="email"],
.fluentform .ff-whyai input[type="tel"],
.fluentform .ff-whyai input[type="url"],
.fluentform .ff-whyai input[type="number"],
.fluentform .ff-whyai textarea,
.fluentform .ff-whyai select {
	background-color: var(--wa-field-bg);
	border: 1px solid var(--wa-border);
	border-radius: var(--wa-radius);
	color: var(--wa-text);
	font-family: inherit;
	font-size: 16px;      /* < 16px verčia iOS priartinti */
	line-height: 24px;
	padding: 12px 14px;
	height: auto;
	width: 100%;
	box-shadow: none;
	transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.fluentform .ff-whyai textarea { min-height: 110px; resize: vertical; }

/* Kontrastas 8.9:1 vietoj 3.32:1 */
.fluentform .ff-whyai input::placeholder,
.fluentform .ff-whyai textarea::placeholder {
	color: rgba(242, 242, 242, .55);
	opacity: 1;
}

.fluentform .ff-whyai input:focus,
.fluentform .ff-whyai textarea:focus,
.fluentform .ff-whyai select:focus {
	background-color: var(--wa-field-bg-focus);
	border-color: var(--wa-accent);
	box-shadow: 0 0 0 3px rgba(240, 56, 0, .28);
	outline: none;
}

/* Naršyklės autofill nedažo lauko balta */
.fluentform .ff-whyai input:-webkit-autofill,
.fluentform .ff-whyai input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--wa-text);
	-webkit-box-shadow: 0 0 0 1000px #141414 inset;
	caret-color: var(--wa-text);
}

/* select ir jo punktai - čia buvo balta ant baltos */
.fluentform .ff-whyai select { color: var(--wa-text); }
.fluentform .ff-whyai select option { background-color: #141414; color: var(--wa-text); }

/* --- Varnelės ----------------------------------------------------------- */
.fluentform .ff-whyai .ff-el-form-check { margin-bottom: 0; }

.fluentform .ff-whyai .ff-el-form-check-label {
	color: var(--wa-muted);
	font-size: 14px;
	line-height: 21px;
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.fluentform .ff-whyai input[type="checkbox"] {
	accent-color: var(--wa-accent);
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	flex: 0 0 auto;
}

/* Viena varnelė - antraštės virš jos nereikia */
.fluentform .ff-whyai .ff-whyai-single-check .ff-el-input--label { display: none; }
.fluentform .ff-whyai .ff-whyai-single-check { margin-bottom: 12px; }

/* --- Skyriai ------------------------------------------------------------ */
.fluentform .ff-whyai .ff-el-section-break {
	border-top: 1px solid rgba(255, 255, 255, .12);
	padding-top: 24px;
	margin-bottom: 20px;
}
.fluentform .ff-whyai .ff-el-group:first-child .ff-el-section-break { border-top: 0; padding-top: 0; }

.fluentform .ff-whyai .ff-el-section-title {
	color: var(--wa-text);
	font-size: 20px;
	font-weight: 600;
	letter-spacing: -.02em;
	margin: 0 0 4px;
}
.fluentform .ff-whyai .ff-section-break-desc {
	color: var(--wa-muted);
	font-size: 14px;
	line-height: 21px;
	margin: 0;
}

/* --- Mygtukas ----------------------------------------------------------- */
/* WCAG „didelis tekstas" = >=18.66px + 700. Prie 19px/700 užtenka 3:1,
   o balta ant #f03800 duoda 3.98:1 - praeina. Prie 18px nepraeidavo. */
.fluentform .ff-whyai .ff-btn-submit {
	background-color: var(--wa-accent);
	color: #fff;
	font-family: inherit;
	font-size: 19px;
	font-weight: 700;
	line-height: 1;
	padding: 17px 34px;
	border: 0;
	width: 100%;
	transition: background-color .15s ease, transform .1s ease;
}
.fluentform .ff-whyai .ff-btn-submit:hover { background-color: var(--wa-accent-hover); }
.fluentform .ff-whyai .ff-btn-submit:active { transform: translateY(1px); }
.fluentform .ff-whyai .ff-btn-submit:focus-visible { outline: 3px solid rgba(255, 255, 255, .6); outline-offset: 3px; }

/* --- Klaidos ir sėkmė --------------------------------------------------- */
.fluentform .ff-whyai .error, .fluentform .ff-whyai .text-danger { color: var(--wa-error); font-size: 14px; }
.fluentform .ff-whyai .ff-el-is-error input,
.fluentform .ff-whyai .ff-el-is-error textarea { border-color: var(--wa-error); }

.fluentform .ff-whyai .ff-message-success {
	background: rgba(74, 222, 128, .10);
	border: 1px solid rgba(74, 222, 128, .35);
	border-radius: var(--wa-radius);
	color: var(--wa-text);
	padding: 18px 20px;
	font-size: 16px;
	line-height: 24px;
}

/* --- Siauras konteineris ------------------------------------------------ */
@container (max-width: 520px) {
	.fluentform .ff-whyai .ff-t-container { display: block; }
	.fluentform .ff-whyai .ff-t-cell { flex-basis: 100% !important; width: 100%; }
	.fluentform .ff-whyai .ff-t-cell + .ff-t-cell { margin-top: 20px; }
}

/* --- Mobilus ------------------------------------------------------------ */
@media (max-width: 600px) {
	.fluentform .ff-whyai .ff-t-container { display: block; }
	.fluentform .ff-whyai .ff-t-cell { flex-basis: 100% !important; }
	.fluentform .ff-whyai .ff-t-cell + .ff-t-cell { margin-top: 20px; }
	.fluentform .ff-whyai .ff-el-group { margin-bottom: 18px; }
}