/**
 * Shibolet AI — Fluent Forms dark-theme overrides.
 *
 * Fluent Forms ships its own light-UI stylesheet (fluentform-public-default.css)
 * with hardcoded light colors (white inputs, #dadbdd borders, #606266 text) that
 * read fine on a white page but disappear or clash against this theme's
 * near-black (#030712) background. This file re-skins the pieces that need it:
 * labels, inputs/textarea/select, focus state, Chrome autofill, placeholder
 * contrast, the submit button (reusing the brand's glow/gradient treatment),
 * and success/error messaging. Everything here is scoped under `.fluentform`
 * (Fluent Forms' own top-level wrapper class) so it never leaks into the rest
 * of the site.
 *
 * Only enqueued conditionally — see shibolet_ai_enqueue_fluentforms_style()
 * in functions.php — on singular content that actually embeds the Fluent
 * Forms block (`fluentfom/guten-block`), so pages without a form never pay
 * for this stylesheet.
 *
 * RTL: Fluent Forms already ships a compiled -rtl.css variant that it
 * conditionally enqueues based on core's is_rtl() (true on /he/ pages once
 * Polylang switches the locale), which mirrors most physical left/right
 * values on its own. The `[dir="rtl"]` block at the end is a small,
 * deliberately narrow safety net for the couple of hardcoded values in
 * Fluent Forms' *default* (LTR) stylesheet that would look wrong if that
 * swap ever didn't apply — not a wholesale logical-properties rewrite of
 * Fluent Forms' own markup.
 *
 * @package Shibolet_AI
 */

.fluentform {
	--fluentform-primary: var(--wp--preset--color--accent, #06b6d4);
	--fluentform-secondary: var(--wp--preset--color--contrast, #f8fafc);
	--fluentform-border-color: var(--wp--preset--color--glass-border, rgba(255, 255, 255, .1));
	--fluentform-danger: #f87171;
	--fluentform-border-radius: 10px;
}

/* -------------------------------------------------------------------- */
/* Labels                                                                */
/* -------------------------------------------------------------------- */

.fluentform .ff-el-input--label label,
.fluentform label {
	color: var(--wp--preset--color--contrast, #f8fafc);
	font-weight: 500;
}

.fluentform .ff-el-form-check-label {
	color: var(--wp--preset--color--muted, #94a3b8);
}

/* -------------------------------------------------------------------- */
/* Inputs / textarea / select                                           */
/* -------------------------------------------------------------------- */

.fluentform .ff-el-form-control,
.fluentform select.ff-el-form-control {
	background-color: rgba(15, 23, 42, .6);
	border: 1px solid var(--fluentform-border-color);
	border-radius: var(--fluentform-border-radius);
	color: var(--wp--preset--color--contrast, #f8fafc);
}

.fluentform select.ff-el-form-control option {
	background-color: #0f172a;
	color: var(--wp--preset--color--contrast, #f8fafc);
}

.fluentform .ff-el-form-control::placeholder {
	/* Fluent Forms' default placeholder color inherits a light-UI grey that
	 * is close to invisible on #030712; muted (#94a3b8) keeps it legible
	 * without competing with real input text. */
	color: var(--wp--preset--color--muted, #94a3b8);
	opacity: 1;
}

.fluentform .ff-el-form-control:focus {
	/* Fluent Forms' own :focus rule hardcodes background-color:#fff, which
	 * flashes a white box on every field focus against this dark theme —
	 * this is the one override in this file that isn't cosmetic polish but
	 * a correctness fix. */
	background-color: rgba(15, 23, 42, .85);
	border-color: var(--wp--preset--color--accent, #06b6d4);
	box-shadow: 0 0 0 3px rgba(6, 182, 212, .25);
	color: var(--wp--preset--color--contrast, #f8fafc);
	outline: none;
}

/* Chrome/Edge autofill: browsers ignore background-color on autofilled
 * fields and paint their own (usually pale yellow/white) fill instead
 * unless it's overridden via this inset box-shadow trick. */
.fluentform .ff-el-form-control:-webkit-autofill,
.fluentform .ff-el-form-control:-webkit-autofill:hover,
.fluentform .ff-el-form-control:-webkit-autofill:focus {
	-webkit-box-shadow: inset 0 0 0 1000px rgba(15, 23, 42, .95);
	box-shadow: inset 0 0 0 1000px rgba(15, 23, 42, .95);
	-webkit-text-fill-color: var(--wp--preset--color--contrast, #f8fafc);
	caret-color: var(--wp--preset--color--contrast, #f8fafc);
	transition: background-color 5000s ease-in-out 0s;
}

/* -------------------------------------------------------------------- */
/* Submit button — reuse the brand glow/gradient treatment              */
/* -------------------------------------------------------------------- */

.fluentform .ff-btn-submit,
.fluentform button[type="submit"] {
	background: var(--wp--preset--gradient--brand, linear-gradient(135deg, #06b6d4 0%, #22d3ee 50%, #0c4a6e 100%));
	border: none;
	border-radius: 9999px;
	color: var(--wp--preset--color--contrast, #f8fafc);
	font-family: var(--wp--preset--font-family--heboo, Heebo, system-ui, sans-serif);
	font-weight: 600;
	padding: .75rem 1.75rem;
	transition: transform var(--wp--custom--motion--duration, .4s) var(--wp--custom--motion--ease, cubic-bezier(.4, 0, .2, 1)),
		box-shadow var(--wp--custom--motion--duration, .4s) var(--wp--custom--motion--ease, cubic-bezier(.4, 0, .2, 1));
}

.fluentform .ff-btn-submit:hover,
.fluentform .ff-btn-submit:focus,
.fluentform button[type="submit"]:hover,
.fluentform button[type="submit"]:focus {
	box-shadow: var(--wp--custom--glow--accent, 0 0 30px rgba(6, 182, 212, .2));
	color: var(--wp--preset--color--contrast, #f8fafc);
	opacity: 1;
	transform: translateY(-2px);
}

/* -------------------------------------------------------------------- */
/* Help text / validation errors / success message                     */
/* -------------------------------------------------------------------- */

.fluentform .ff-el-help-message {
	color: var(--wp--preset--color--muted, #94a3b8);
}

.fluentform .ff-el-is-error .ff-el-form-control {
	border-color: var(--fluentform-danger);
}

.fluentform .ff-el-is-error .text-danger,
.fluentform .text-danger,
.fluentform .error-message {
	color: #fca5a5;
}

.fluentform .ff-message-success {
	background: rgba(6, 182, 212, .08);
	border: 1px solid var(--wp--preset--color--accent, #06b6d4);
	border-radius: var(--fluentform-border-radius);
	color: var(--wp--preset--color--contrast, #f8fafc);
}

/* -------------------------------------------------------------------- */
/* RTL safety net (see file header note above)                          */
/* -------------------------------------------------------------------- */

[dir="rtl"] .fluentform .ff_submit_btn_wrapper {
	text-align: left;
}

[dir="rtl"] .fluentform .ff-errors-in-stack .error-clear {
	margin-left: 0;
	margin-right: 5px;
}

[dir="rtl"] .fluentform .ff-el-form-check-label {
	text-align: right;
}