/* =========================================================
   ONE80 × Fluent Forms — إعادة تلبيس بصري فقط
   (منطق الفورم والـ validation كله من Fluent Forms نفسها)
   ========================================================= */

:root {
	--one80-bg: #231F20;
	--one80-accent: #C4F858;
	--one80-field-bg: #2c2829;
	--one80-field-border: #3c3738;
	--one80-text: #ffffff;
}

/* الحاوية العامة للفورم */
.fluentform {
	--ff-primary-color: var(--one80-accent);
	max-width: 100%;
}

/* عناوين الحقول: Uppercase + Letter-spacing زي باقي الموقع */
.fluentform label,
.fluentform .ff-el-input-label label {
	color: var(--one80-text);
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 0.06em;
	font-weight: 700;
	margin-bottom: 8px;
	display: inline-block;
}

/* الحقول (نص/إيميل/تليفون/تكست إريا) */
.fluentform input[type="text"],
.fluentform input[type="email"],
.fluentform input[type="tel"],
.fluentform input[type="number"],
.fluentform input[type="url"],
.fluentform select,
.fluentform textarea {
	background: var(--one80-field-bg);
	border: 1px solid var(--one80-field-border);
	color: var(--one80-text);
	border-radius: 0;
	padding: 14px 16px;
	font-size: 15px;
	transition: border-color 0.2s ease;
}

.fluentform input::placeholder,
.fluentform textarea::placeholder {
	color: rgba(255, 255, 255, 0.45);
}

.fluentform input:focus,
.fluentform select:focus,
.fluentform textarea:focus {
	outline: none;
	border-color: var(--one80-accent);
	box-shadow: 0 0 0 1px var(--one80-accent);
}

/* رسائل الخطأ — تبقى واضحة فوق الخلفية الغامقة */
.fluentform .error {
	color: #ff8a80;
	font-size: 12px;
	margin-top: 6px;
}

/*
	============ زرار الإرسال: نفس شكل أزرار ONE80 المائلة ============
	موحّد على متغيّر CSS واحد (--one80-ff-btn-skew) بدل تكرار 3 قواعد [dir="rtl"]
	منفصلة (كان الشكل القديم صحيح فعليًا بس مكرر — قسم 9 من الخطة، نفس تقنية
	.one80-skew-btn بتاعة الپلجن، قسم "المرحلة 2").

	⚠️ حدود معروفة (مقصودة): الميل هنا بيتطبّق على الـ <button> بتاع Fluent
	Forms نفسه مباشرة (مش طبقة خلفية منفصلة زي .one80-skew-btn) لأننا
	مبنعدّلش HTML بتاع الفورم نفسه (خارج نطاقنا — قسم 15.ب: "بدون أي تعديل في
	كود/منطق Fluent Forms"). يعني focus ring الافتراضي هيبان مائل شوية بدل
	مستطيل سليم. تأثير بصري بسيط بس مش كسر وظيفي — لو محتاج حل مثالي 100%،
	البديل الوحيد إضافة JS يلف محتوى الزرار بـ <span> إضافي وقت الـ render،
	وده تعديل أعمق يستاهل قرار منفصل لو اتطلب.
*/
body .fluentform button[type="submit"],
body .fluentform .ff-btn-submit {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--one80-accent) !important;
	background-color: var(--one80-accent) !important;
	border-color: var(--one80-accent) !important;
	color: #111 !important;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 14px;
	border: none;
	padding: 16px 32px;
	cursor: pointer;
	--one80-ff-btn-skew: -20deg;
	transform: skewX(var(--one80-ff-btn-skew));
	transition: transform 0.15s ease, filter 0.15s ease;
}

[dir="rtl"] .fluentform button[type="submit"],
[dir="rtl"] .fluentform .ff-btn-submit {
	transform: skewX(calc(var(--one80-ff-btn-skew) * -1));
}

/* نلغي الميل عن محتوى الزرار نفسه (النص) عشان يفضل مستقيم وسط شكل مائل */
.fluentform button[type="submit"] span,
.fluentform .ff-btn-submit span {
	display: inline-block;
	transform: skewX(calc(var(--one80-ff-btn-skew) * -1));
}

[dir="rtl"] .fluentform button[type="submit"] span,
[dir="rtl"] .fluentform .ff-btn-submit span {
	transform: skewX(var(--one80-ff-btn-skew));
}

body .fluentform button[type="submit"]:hover,
body .fluentform .ff-btn-submit:hover {
	background: #d3fa79 !important;
	background-color: #d3fa79 !important;
	border-color: #d3fa79 !important;
	filter: brightness(1.08);
	transform: skewX(var(--one80-ff-btn-skew)) translateY(-1px);
}

[dir="rtl"] .fluentform button[type="submit"]:hover,
[dir="rtl"] .fluentform .ff-btn-submit:hover {
	transform: skewX(calc(var(--one80-ff-btn-skew) * -1)) translateY(-1px);
}

.fluentform button[type="submit"]:focus-visible,
.fluentform .ff-btn-submit:focus-visible {
	outline: 2px solid var(--one80-accent);
	outline-offset: 4px;
}

/* احترام تفضيل تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
	.fluentform button[type="submit"],
	.fluentform .ff-btn-submit {
		transition: none;
	}
}