/* ==========================================================================
   Viyana Brief — Global Fluent Forms design system
   Built against the real markup of the "Viyana — Form UI Reference" form.
   Every rule is scoped `body .fluentform …` so it beats Fluent Forms' own
   stylesheets (fluent-forms-public.css / fluentform-public-default.css)
   regardless of load order. New forms inherit this automatically.
   ========================================================================== */

/* ---------- Fluent Forms CSS variables → Viyana tokens ---------- */
body .fluentform {
	--fluentform-primary: var(--vb-orange);
	--fluentform-secondary: var(--vb-text);
	--fluentform-danger: var(--vb-error);
	--fluentform-border-color: var(--vb-border);
	--fluentform-border-radius: var(--vb-radius);
	--fluentform-input-select-height: var(--vb-control-h);
	font-family: var(--vb-font);
	color: var(--vb-text);
}
body .fluentform * { font-family: inherit; }
body .fluentform form { margin: 0; }

/* ---------- Field group rhythm ---------- */
body .fluentform .ff-el-group { margin-bottom: 24px; }
body .fluentform .ff-el-group:last-child { margin-bottom: 0; }
body .fluentform .ff-t-container { gap: 16px; }

/* ---------- Labels, required mark, help text ---------- */
body .fluentform .ff-el-input--label { margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
body .fluentform .ff-el-input--label label {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.45;
	color: var(--vb-heading);
}
html[dir="rtl"] body .fluentform .ff-el-input--label label { font-size: 15px; line-height: 1.6; }

body .fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label::after {
	content: "*";
	color: var(--vb-orange);
	margin: 0;
	margin-inline-start: 4px;
	font-weight: 700;
}
body .fluentform .ff-el-input--label.ff-el-is-required.asterisk-left label::before {
	color: var(--vb-orange);
}

body .fluentform .ff-el-help-message {
	margin-top: 6px;
	font-size: var(--vb-text-sm);
	line-height: 1.55;
	color: var(--vb-muted);
	font-style: normal;
}
body .fluentform .ff-el-help-message.ff_ahm { margin: -2px 0 8px; } /* help placed above input */
body .fluentform .ff-el-tooltip svg { fill: var(--vb-muted); }

/* ---------- Text inputs, email, phone, number, url, date, select, textarea ---------- */
body .fluentform .ff-el-form-control {
	display: block;
	width: 100%;
	min-height: var(--vb-control-h);
	padding: 12px 16px;
	font-size: var(--vb-text-base);
	line-height: 1.5;
	color: var(--vb-heading);
	background: var(--vb-surface);
	border: 1px solid var(--vb-border);
	border-radius: var(--vb-radius);
	box-shadow: none;
	transition: border-color var(--vb-ease), box-shadow var(--vb-ease), background var(--vb-ease);
}
body .fluentform textarea.ff-el-form-control { min-height: 120px; resize: vertical; line-height: 1.65; }
body .fluentform .ff-el-form-control::placeholder { color: var(--vb-placeholder); opacity: 1; }
body .fluentform .ff-el-form-control:hover { border-color: #A0AEC0; }
body .fluentform .ff-el-form-control:focus {
	outline: none;
	border-color: var(--vb-orange);
	box-shadow: var(--vb-focus);
	background: var(--vb-surface);
}
body .fluentform .ff-el-form-control[readonly],
body .fluentform .ff-el-form-control:disabled {
	background: var(--vb-surface-2);
	color: var(--vb-muted);
	border-color: var(--vb-border-soft);
	cursor: not-allowed;
}
/* LTR-only values inside Arabic forms */
html[dir="rtl"] body .fluentform :is(input[type="email"], input[type="url"], input[type="tel"]).ff-el-form-control { direction: ltr; text-align: right; }

/* Select with a branded chevron (mirrors in RTL) */
body .fluentform select.ff-el-form-control:not([multiple]) {
	-webkit-appearance: none;
	appearance: none;
	padding-inline-end: 44px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23041335' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 12px 8px;
	cursor: pointer;
}
html[dir="rtl"] body .fluentform select.ff-el-form-control:not([multiple]) { background-position: left 16px center; }

/* Choices.js / select2 (enhanced selects) */
body .fluentform .choices__inner { min-height: var(--vb-control-h); border-radius: var(--vb-radius); border-color: var(--vb-border); background: var(--vb-surface); }
body .fluentform .choices__list--multiple .choices__item { background: var(--vb-navy); border-color: var(--vb-navy); border-radius: var(--vb-radius-sm); }

/* ---------- Radio & checkbox: selectable cards ---------- */
body .fluentform .ff-el-input--content > .ff-el-form-check { margin-bottom: 10px; }
body .fluentform .ff-el-input--content > .ff-el-form-check:last-child { margin-bottom: 0; }
body .fluentform .ff-el-form-check-label {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: var(--vb-control-h);
	margin: 0;
	padding: 12px 16px;
	font-size: var(--vb-text-base);
	font-weight: 500;
	line-height: 1.45;
	color: var(--vb-text);
	background: var(--vb-surface);
	border: 1.5px solid var(--vb-border-soft);
	border-radius: var(--vb-radius);
	cursor: pointer;
	transition: border-color var(--vb-ease), background var(--vb-ease), color var(--vb-ease);
}
body .fluentform .ff-el-form-check-label:hover { border-color: #B8C4D8; background: #FAFBFC; }
body .fluentform .ff-el-form-check-label:has(input:checked) {
	border-color: var(--vb-orange);
	background: var(--vb-orange-050);
	color: var(--vb-heading);
	font-weight: 600;
}
body .fluentform .ff-el-form-check-label:has(input:focus-visible) { box-shadow: var(--vb-focus); }
body .fluentform .ff-el-form-check-label:has(input:disabled) { opacity: 0.55; cursor: not-allowed; }

body .fluentform .ff-el-form-check-input {
	-webkit-appearance: none;
	appearance: none;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 0 !important;
	position: static !important;
	display: grid;
	place-content: center;
	background: var(--vb-surface);
	border: 1.5px solid var(--vb-border);
	border-radius: 5px;
	cursor: pointer;
	transition: border-color var(--vb-ease), background var(--vb-ease);
}
body .fluentform .ff-el-form-check-radio { border-radius: 50%; }
body .fluentform .ff-el-form-check-input:checked { border-color: var(--vb-orange); background: var(--vb-orange); }
body .fluentform .ff-el-form-check-radio:checked::after {
	content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff;
}
body .fluentform .ff-el-form-check-checkbox:checked::after {
	content: ""; width: 10px; height: 6px; margin-top: -2px;
	border: 2px solid #fff; border-top: 0; border-right: 0;
	transform: rotate(-45deg);
}
body .fluentform .ff-el-form-check-label > span { flex: 1 1 auto; min-width: 0; }

/* Inline radio/checkbox layouts (Fluent "ff-el-form-check-inline") */
body .fluentform .ff-el-form-check-inline { display: inline-flex; margin-inline-end: 10px; margin-bottom: 10px; }
body .fluentform .ff-el-form-check-inline .ff-el-form-check-label { width: auto; }

/* Multi-column option layouts (ff_list_2col / 3col …) */
body .fluentform [class*="ff_list_"] .ff-el-input--content { display: grid; gap: 10px; }
body .fluentform .ff_list_2col .ff-el-input--content { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body .fluentform .ff_list_3col .ff-el-input--content { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body .fluentform [class*="ff_list_"] .ff-el-form-check { margin: 0; }

/* ---------- Section headings ---------- */
body .fluentform .ff-el-section-break { margin: 8px 0 24px; }
body .fluentform .ff-el-section-break:not(:first-child) { margin-top: 40px; }
body .fluentform .ff-el-section-title {
	margin: 0 0 6px;
	font-size: 20px;
	font-weight: 800;
	line-height: var(--vb-lh-heading);
	color: var(--vb-heading);
}
html[dir="rtl"] body .fluentform .ff-el-section-title { font-size: 21px; }
body .fluentform .ff-section_break_desk { font-size: 14px; line-height: 1.65; color: var(--vb-muted); }
body .fluentform .ff-el-section-break hr {
	height: 0; margin: 16px 0 0; border: 0;
	border-top: 1px solid var(--vb-border-soft);
	background: none;
}

/* Custom HTML / notes */
body .fluentform .ff-custom_html {
	padding: 14px 16px;
	font-size: 14px;
	line-height: 1.65;
	color: var(--vb-heading);
	background: var(--vb-surface-2);
	border: 1px solid var(--vb-border-soft);
	border-inline-start: 3px solid var(--vb-navy);
	border-radius: var(--vb-radius);
}
body .fluentform .ff-custom_html p { margin: 0; }
body .fluentform .ff-custom_html p + p { margin-top: 8px; }

/* ---------- File upload ---------- */
body .fluentform .ff_file_upload_holder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	min-height: 120px;
	padding: 24px 20px;
	text-align: center;
	background: var(--vb-surface-2);
	border: 2px dashed var(--vb-border);
	border-radius: var(--vb-radius);
	cursor: pointer;
	transition: border-color var(--vb-ease), background var(--vb-ease);
}
body .fluentform .ff_file_upload_holder::before {
	content: "";
	width: 28px; height: 28px;
	background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F3722B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4m0 0L7 9m5-5 5 5'/%3E%3Cpath d='M4 16v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2'/%3E%3C/svg%3E");
}
body .fluentform .ff_file_upload_holder:has(:focus-visible) { border-color: var(--vb-orange); box-shadow: var(--vb-focus); }
body .fluentform .ff_file_upload_holder:hover,
body .fluentform .ff_file_upload_holder.ff_file_upload_holder_dragover {
	border-color: var(--vb-orange);
	background: var(--vb-orange-050);
}
body .fluentform .ff_upload_btn.ff-btn {
	padding: 0 !important;
	min-height: 0 !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	color: var(--vb-heading) !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}
body .fluentform .ff_upload_btn.ff-btn:hover { color: var(--vb-orange-600) !important; }
body .fluentform .ff-uploaded-list { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
body .fluentform .ff-upload-preview {
	display: flex; align-items: center; gap: 12px;
	margin: 0 !important; padding: 10px 12px;
	background: var(--vb-surface);
	border: 1px solid var(--vb-border-soft) !important;
	border-radius: var(--vb-radius);
}
body .fluentform .ff-upload-thumb { flex: 0 0 auto; }
body .fluentform .ff-upload-preview-img { width: 40px; height: 40px; border-radius: var(--vb-radius-sm); background-size: cover; }
body .fluentform .ff-upload-details { flex: 1 1 auto; min-width: 0; border: 0 !important; padding: 0 !important; }
body .fluentform .ff-upload-filename { font-size: 13px; font-weight: 600; color: var(--vb-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: ltr; text-align: start; }
body .fluentform .ff-upload-filesize, body .fluentform .ff-upload-progress-inline-text { font-size: 12px; color: var(--vb-muted); }
body .fluentform .ff-upload-remove { color: var(--vb-muted) !important; font-size: 18px; line-height: 1; box-shadow: none !important; }
body .fluentform .ff-upload-remove:hover { color: var(--vb-error) !important; }
body .fluentform .ff-upload-progress-inline { height: 4px; background: var(--vb-border-soft); border-radius: 4px; overflow: hidden; }
body .fluentform .ff-upload-progress-inline .ff-el-progress-bar { background: var(--vb-orange); }

/* ---------- Validation & errors ---------- */
body .fluentform .ff-el-is-error .ff-el-form-control { border-color: var(--vb-error); background: var(--vb-error-bg); }
body .fluentform .ff-el-is-error .ff-el-form-control:focus { box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.15); }
body .fluentform .ff-el-is-error .ff-el-form-check-label { border-color: rgba(229, 62, 62, 0.45); }
body .fluentform .ff-el-is-error .ff_file_upload_holder { border-color: var(--vb-error); }
body .fluentform .ff-el-is-error .ff-el-input--label label { color: var(--vb-heading); }
body .fluentform .error.text-danger,
body .fluentform .ff-el-is-error .text-danger {
	display: flex; align-items: center; gap: 6px;
	margin-top: 8px;
	font-size: var(--vb-text-sm);
	font-weight: 500;
	line-height: 1.45;
	color: var(--vb-error);
}
body .fluentform .error.text-danger::before {
	content: "!";
	flex: 0 0 16px; width: 16px; height: 16px;
	display: grid; place-content: center;
	font-size: 11px; font-weight: 800; line-height: 1;
	color: #fff; background: var(--vb-error); border-radius: 50%;
}
/* Error stack (form-level errors) */
body .ff-errors-in-stack { margin-top: 16px; }
body .ff-errors-in-stack .error {
	padding: 12px 16px; margin-bottom: 8px;
	font-size: 14px; color: #9B2C2C;
	background: var(--vb-error-bg);
	border: 1px solid rgba(229, 62, 62, 0.3);
	border-radius: var(--vb-radius);
}

/* ---------- Multi-step: progress indicator ---------- */
body .fluentform .ff-step-header { margin-bottom: 32px; }
body .fluentform .ff-el-progress-status {
	margin-bottom: 10px;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--vb-heading);
	text-transform: uppercase;
	letter-spacing: var(--vb-tracking-caps);
}
html[dir="rtl"] body .fluentform .ff-el-progress-status { text-transform: none; font-size: 14px; }
body .fluentform .ff-el-progress {
	height: 8px;
	overflow: hidden;
	background: var(--vb-border-soft);
	border-radius: var(--vb-radius-pill);
}
body .fluentform .ff-el-progress-bar {
	height: 100%;
	background: var(--vb-orange);
	border-radius: var(--vb-radius-pill);
	transition: width 300ms ease;
}
body .fluentform .ff-el-progress-bar span { display: none; } /* percentage text inside thin bar */

/* Step titles variant ("steps" indicator) */
body .fluentform .ff-step-titles { display: flex; gap: 8px; margin: 0 0 28px; padding: 0; list-style: none; counter-reset: vb-step; }
body .fluentform .ff-step-titles li {
	flex: 1 1 0; position: relative;
	padding-top: 12px;
	font-size: 12.5px; font-weight: 600; color: var(--vb-muted);
	border-top: 3px solid var(--vb-border-soft);
	text-align: start;
}
body .fluentform .ff-step-titles li::before { display: none; }
body .fluentform .ff-step-titles li.ff_active,
body .fluentform .ff-step-titles li.ff_completed { color: var(--vb-heading); border-top-color: var(--vb-orange); }

/* ---------- Step navigation (Previous / Next) ---------- */
body .fluentform .step-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid var(--vb-border-soft);
}
body .fluentform .step-nav::after { display: none; }
body .fluentform .step-nav .ff-btn { float: none !important; }
body .fluentform .step-nav .ff-btn-next { margin-inline-start: auto; }
body .fluentform .step-nav .ff-btn-prev { margin-inline-end: auto; }

/* ---------- Buttons ---------- */
body .fluentform .ff-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 46px;
	padding: 11px 26px;
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	border: 1.5px solid transparent;
	border-radius: var(--vb-radius);
	box-shadow: none;
	cursor: pointer;
	transition: background var(--vb-ease), border-color var(--vb-ease), color var(--vb-ease), transform var(--vb-ease), opacity var(--vb-ease);
}
body .fluentform .ff-btn:active { transform: translateY(1px); }
body .fluentform .ff-btn:focus-visible { outline: none; box-shadow: var(--vb-focus); }

/* Primary: Next + Submit */
body .fluentform .ff-btn-next,
body .fluentform .ff-btn-submit,
body .fluentform .ff_submit_btn_wrapper .ff-btn-submit:not(.ff_btn_no_style) {
	color: #fff !important;
	background-color: var(--vb-orange) !important;
	border-color: var(--vb-orange) !important;
}
body .fluentform .ff-btn-next:hover,
body .fluentform .ff-btn-submit:hover {
	background-color: var(--vb-orange-600) !important;
	border-color: var(--vb-orange-600) !important;
	opacity: 1;
}
/* Arrows on step buttons — direction-aware */
body .fluentform .ff-btn-next::after { content: "→"; font-weight: 700; }
body .fluentform .ff-btn-prev::before { content: "←"; font-weight: 700; }
html[dir="rtl"] body .fluentform .ff-btn-next::after { content: "←"; }
html[dir="rtl"] body .fluentform .ff-btn-prev::before { content: "→"; }

/* Secondary: Previous */
body .fluentform .ff-btn-prev {
	color: var(--vb-heading) !important;
	background: var(--vb-surface) !important;
	border-color: var(--vb-border) !important;
}
body .fluentform .ff-btn-prev:hover { border-color: var(--vb-navy) !important; color: var(--vb-navy) !important; }

/* Submit row */
body .fluentform .ff_submit_btn_wrapper { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--vb-border-soft); }
body .fluentform .ff_submit_btn_wrapper.ff-text-right { text-align: end; }
body .fluentform .ff_submit_btn_wrapper.ff-text-left { text-align: start; }
body .fluentform .ff-btn-submit { min-width: 180px; }
/* Last step: Previous + Submit share one row */
body .fluentform .ff-step-body .ff_step_nav_last { margin-bottom: 0; }
body .fluentform .ff-inner_submit_container {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid var(--vb-border-soft);
}
body .fluentform .ff-inner_submit_container > .ff-t-cell { flex: 0 1 auto !important; width: auto !important; max-width: none !important; padding: 0 !important; }
body .fluentform .ff-inner_submit_container > .ff-t-cell:last-child { margin-inline-start: auto; }
body .fluentform .ff-inner_submit_container :is(.step-nav, .ff_submit_btn_wrapper) { margin: 0 !important; padding: 0 !important; border: 0 !important; }

/* Disabled / busy */
body .fluentform .ff-btn:disabled,
body .fluentform .ff-btn.disabled,
body .fluentform .ff-working .ff-btn-submit {
	opacity: 0.55 !important;
	cursor: not-allowed !important;
	transform: none !important;
}
body .fluentform .ff-loading .ff-btn-submit,
body .fluentform .ff-working .ff-btn-submit { pointer-events: none; }

/* ---------- Success / confirmation ---------- */
body .ff-message-success {
	position: relative;
	margin: 0;
	padding: 28px 28px 28px 72px;
	font-size: 15px;
	line-height: 1.7;
	color: var(--vb-heading);
	background: var(--vb-success-bg);
	border: 1px solid rgba(47, 133, 90, 0.25);
	border-radius: var(--vb-radius-lg);
	box-shadow: none;
}
body .ff-message-success::before {
	content: "✓";
	position: absolute; top: 26px; inset-inline-start: 24px;
	width: 32px; height: 32px; display: grid; place-content: center;
	font-size: 16px; font-weight: 800; color: #fff;
	background: var(--vb-success); border-radius: 50%;
}
html[dir="rtl"] body .ff-message-success { padding: 28px 72px 28px 28px; }
body .ff-message-success :is(h1, h2, h3, h4) { margin: 0 0 6px; font-size: 20px; color: var(--vb-heading); }
body .ff-message-success p { margin: 0; }
body .ff-message-success p + p { margin-top: 8px; }

/* ---------- Mobile ---------- */
@media (max-width: 720px) {
	body .fluentform .ff-t-container { display: block; }
	body .fluentform .ff-t-container > .ff-t-cell { width: 100% !important; padding: 0 !important; }
	body .fluentform .ff_list_2col .ff-el-input--content,
	body .fluentform .ff_list_3col .ff-el-input--content { grid-template-columns: 1fr; }
	body .fluentform .ff-el-section-title { font-size: 18px; }
	body .fluentform .step-nav,
	body .fluentform .ff-inner_submit_container { gap: 10px; }
	body .fluentform .step-nav .ff-btn { flex: 1 1 0; padding-inline: 14px; }
	body .fluentform .step-nav .ff-btn-next:only-child { flex: 0 1 auto; min-width: 50%; }
	body .fluentform .ff-btn-submit { width: 100%; }
	body .ff-message-success { padding: 72px 20px 24px; }
	html[dir="rtl"] body .ff-message-success { padding: 72px 20px 24px; }
	body .ff-message-success::before { top: 24px; inset-inline-start: 20px; }
	/* Last step: keep Previous + Submit side by side */
	body .fluentform .ff-inner_submit_container > .ff-t-cell { flex: 1 1 0 !important; }
	body .fluentform .ff-inner_submit_container .ff-btn { width: 100%; min-width: 0; padding-inline: 14px; }
}