/* FNH Feedback form — bilingual EN/AR stacked labels, navy palette. */
.fnhf-page {
	--c-primary: #1e202f;
	--c-line: #bccccc;
	--c-bg: #fcfbfa;
	--c-beige: #f2eada;
	--c-muted: #7a7f95;
	font-family: 'Montserrat-Regular', 'Montserrat', system-ui, sans-serif;
	background: var(--c-bg);
	padding: 32px 16px 56px;
	min-height: 60vh;
}
.fnhf-page * { box-sizing: border-box; min-width: 0; }
.fnhf-card {
	max-width: 720px; margin: 0 auto;
	background: #fff; border: 1px solid var(--c-line); border-radius: 14px;
	padding: 36px 30px;
	box-shadow: 0 4px 24px rgba(0,0,0,.04);
}
.fnhf-center { text-align: center; }
.fnhf-check {
	width: 72px; height: 72px; border-radius: 50%;
	background: var(--c-primary); color: #fff;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 36px; margin-bottom: 18px;
}
.fnhf-card h1 {
	font-size: 24px; color: var(--c-primary); margin: 0 0 12px; font-weight: 700;
	display: flex; flex-direction: column; gap: 6px;
	align-items: center; text-align: center;
}
.fnhf-card h1 span[dir="rtl"] { text-align: center !important; }
.fnhf-card h1 span[dir="rtl"],
.fnhf-card p span[dir="rtl"],
.fnhf-q label span[dir="rtl"],
.fnhf-intro span[dir="rtl"] {
	font-family: 'IBMPlexSansArabic Regular', 'IBM Plex Sans Arabic', system-ui, sans-serif;
	text-align: right;
}
.fnhf-card p { color: var(--c-muted); font-size: 14px; line-height: 1.7; display: flex; flex-direction: column; gap: 6px; align-items: center; text-align: center; }
.fnhf-card p span[dir="rtl"] { text-align: center !important; }
.fnhf-title { text-align: center; }
.fnhf-intro {
	background: var(--c-beige); border-radius: 10px; padding: 18px 20px;
	margin: 0 0 26px !important; color: #3d4051 !important;
	text-align: center;
}
.fnhf-intro span[dir="rtl"] { text-align: center !important; }
.fnhf-error {
	background: #fff5f5; border: 1px solid #b20000; color: #b20000;
	border-radius: 8px; padding: 12px 16px; margin-bottom: 20px;
	font-size: 14px; display: flex; flex-direction: column; gap: 4px;
}
.fnhf-q { margin-bottom: 24px; text-align: center; }
.fnhf-q > label {
	display: flex; flex-direction: column; gap: 4px;
	font-size: 14px; font-weight: 600; color: var(--c-primary);
	margin-bottom: 10px;
	align-items: center; text-align: center;
}
.fnhf-q > label span[dir="rtl"] { font-weight: 500; color: #3d4051; text-align: center !important; }
.fnhf-pills { justify-content: center; }
.fnhf-q textarea { text-align: start; }
.fnhf-q > label em { color: #b20000; font-style: normal; }
.fnhf-page .fnhf-q textarea {
	width: 100%; box-sizing: border-box;
	font-size: 1.7em !important; min-height: 2.507em; padding: 8px 14px !important;
	border: 1.5px solid var(--c-line); border-radius: 10px;
	font-family: inherit; line-height: 1.4; resize: vertical;
	background: #fff;
}
.fnhf-q textarea:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(30,32,47,.12); }
.fnhf-pills { display: flex; gap: 10px; flex-wrap: wrap; }
.fnhf-pill {
	position: relative; cursor: pointer;
}
.fnhf-pill input { position: absolute; opacity: 0; pointer-events: none; }
.fnhf-pill span {
	display: inline-block; padding: 12px 30px;
	border: 1.5px solid var(--c-line); border-radius: 8px;
	font-size: 14px; font-weight: 500; color: #3d4051;
	transition: all .15s; min-width: 110px; text-align: center;
}
.fnhf-pill:hover span { border-color: var(--c-primary); }
.fnhf-pill input:checked + span {
	background: var(--c-primary); color: #fff; border-color: var(--c-primary);
}
.fnhf-btn {
	display: inline-flex; flex-direction: column; gap: 2px; align-items: center;
	background: var(--c-primary); color: #fff; border: 0; cursor: pointer;
	padding: 14px 36px; border-radius: 10px;
	font: inherit; font-size: 15px; font-weight: 600;
	text-decoration: none;
}
.fnhf-btn:hover { background: #13141e; color: #fff; }
.fnhf-submit { width: 100%; margin-top: 8px; }
.fnhf-btn span[dir="rtl"] { font-family: 'IBMPlexSansArabic SemiBold', sans-serif; font-size: 14px; }
/* Single-line text inputs (pre-consultation form) */
.fnhf-page input.fnhf-input {
	width: 100%; box-sizing: border-box;
	font-size: 1.7em !important; height: 2.507em !important; padding: 0 14px !important;
	border: 1.5px solid var(--c-line); border-radius: 10px;
	font-family: inherit; line-height: 1.4; text-align: start;
	background: #fff;
}
.fnhf-input:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(30,32,47,.12); }

/* Section headers (pre-consultation form) */
.fnhf-section {
	display: flex; flex-direction: column; gap: 2px; align-items: center; text-align: center;
	font-size: 16px; font-weight: 700; color: var(--c-primary);
	margin: 30px 0 16px; padding-top: 18px; border-top: 1px solid var(--c-line);
}
.fnhf-section:first-of-type { border-top: 0; padding-top: 0; }
.fnhf-section span[dir="rtl"] { font-family: 'IBMPlexSansArabic SemiBold', sans-serif; font-weight: 600; }
.fnhf-section em { color: #b20000; font-style: normal; }

/* Stacked (one-per-row) pill list for long option sets */
.fnhf-pills-col { flex-direction: column; align-items: stretch; }
.fnhf-pills-col .fnhf-pill span { min-width: 0; width: 100%; text-align: center; }

/* Pre-consultation form: only the title stays centered; everything else is left/right aligned. */
.fnhf-precon .fnhf-intro { text-align: start; }
.fnhf-precon .fnhf-intro span[dir="rtl"] { text-align: right !important; }
.fnhf-precon .fnhf-section { align-items: stretch; text-align: start; }
.fnhf-precon .fnhf-section span[dir="rtl"] { text-align: right !important; }
.fnhf-precon .fnhf-q { text-align: start; }
.fnhf-precon .fnhf-q > label { align-items: stretch; text-align: start; }
.fnhf-precon .fnhf-q > label span[dir="rtl"] { text-align: right !important; }
.fnhf-precon .fnhf-pills { justify-content: flex-start; }

@media (max-width: 540px) {
	.fnhf-card { padding: 24px 16px; border-radius: 10px; }
	.fnhf-pill { flex: 1; }
	.fnhf-pill span { width: 100%; }
}

/* Pre-consultation option groups (4–6 choices) stack full-width on phones/tablets
   so the long bilingual labels never overlap or get squeezed. */
@media (max-width: 700px) {
	.fnhf-precon .fnhf-pills { flex-direction: column; align-items: stretch; gap: 8px; }
	.fnhf-precon .fnhf-pill { flex: 0 0 auto; width: 100%; }
	.fnhf-precon .fnhf-pill span {
		width: 100%; min-width: 0; box-sizing: border-box;
		padding: 13px 16px; text-align: start;
	}
	.fnhf-precon .fnhf-pill span[dir="rtl"] { text-align: right; }
}