/* ==========================================================================
   Page: FAQs
   Figma: FAQs EN D1920 (4111:38423) — 72px hero, r6 search, icon chips
   (active #001623), 30px section title, DS FAQ cards, band #001623.
   RTL: logical properties.
   ========================================================================== */

.mada-faqs-hero {
	background-color: var(--color-white);        /* Figma: seamless #F8FAFC page bg */
	padding-block: var(--pad-banner-block) var(--pad-banner-block);
}
.mada-faqs-hero__inner {
	max-inline-size: 900px;
	margin-inline: auto;
	padding-inline: var(--grid-margin);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--space-5);
}
.mada-faqs-hero__inner h1 {
	margin: 0;
	font-weight: var(--fw-bold);
	font-size: var(--fs-banner);                    /* 72 */
	line-height: var(--lh-banner);
	color: var(--color-black);
}
.mada-faqs-hero__inner p { margin: 0; font-size: var(--fs-md); line-height: 24px; color: var(--color-neutral-600); max-inline-size: 62ch; }
/* Search — Figma Input 768×56, r6, teal 32×32 submit button inset at the end. */
.mada-faqs-hero__search {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	inline-size: 100%;
	max-inline-size: 768px;
	block-size: 56px;
	background-color: #FFFFFF;
	border: var(--border-width-thin) solid var(--color-neutral-200);
	border-radius: var(--radius-base);           /* 6 */
	padding-inline: var(--space-5) var(--space-4);
	color: var(--color-neutral-400);
	margin-block-start: var(--space-4);
	box-shadow: 0 4px 6px -4px rgba(7, 17, 36, 0.08), 0 10px 15px -3px rgba(7, 17, 36, 0.08);
}
.mada-faqs-hero__search input {
	flex: 1 1 auto;
	min-inline-size: 0;
	border: 0;
	background: none;
	padding-block: var(--space-5);
	font-family: inherit;
	font-size: var(--fs-md);
	color: var(--color-text);
}
.mada-faqs-hero__search input:focus { outline: none; }
/* R5 feedback: "an extra (x) appears when I type". The Figma Input (4191:8329)
   draws exactly ONE clear affordance — "Component 2" (4191:8330), rendered
   below — but Chrome/Edge/IE inject a second, native × inside `type="search"`.
   Suppress the UA one so only the designed glyph shows. */
.mada-faqs-hero__search input::-webkit-search-cancel-button,
.mada-faqs-hero__search input::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
	display: none;
}
.mada-faqs-hero__search input::-ms-clear {
	display: none;
	inline-size: 0;
	block-size: 0;
}
/* Submit — Figma "Multi Componant Button" (4191:8331): 32×32, r6, MintPay/50,
   19.5px white magnifier, Box Shadow/shadow-inner highlight. `padding: 0` is
   load-bearing: Hello Elementor's reset puts .5rem/1rem on every <button>,
   which collapses the icon to zero width. */
.mada-faqs-hero__search-btn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 32px;
	block-size: 32px;
	padding: 0;
	border: 0;
	border-radius: var(--radius-base);           /* 6 */
	background-color: var(--color-primary);      /* MintPay/50 #00B2AF */
	box-shadow: inset 0 2px 0 0 rgba(251, 251, 251, 0.24);
	cursor: pointer;
}
.mada-faqs-hero__search-btn img {
	inline-size: 19.5px;
	block-size: 19.5px;
}
.mada-faqs-hero__search-btn:hover,
.mada-faqs-hero__search-btn:focus { background-color: #008E8C; } /* MintPay/60 */
/* Clear — Figma "Component 2" (4191:8330): bare 16px glyph in a 20px box at
   50% opacity (no pill/chip behind it). */
.mada-faqs-hero__search-clear {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 20px;
	block-size: 20px;
	opacity: 0.5;
}
.mada-faqs-hero__search-clear img { inline-size: 16px; block-size: 16px; }
.mada-faqs-hero__search-clear:hover { opacity: 1; }

/* ---- Search results / empty states (Figma 4191:7671 / 4191:8314) ---- */
.mada-faqs-results__count {
	margin: 0 0 var(--space-7);
	font-size: var(--fs-md);
	line-height: var(--lh-sm);
	color: var(--color-neutral-700);
}
/* Empty state — Figma 4191:8516 (AR 4188:16986): centred column, 16px gap,
   80px "search-status" bulk icon, Heading/Small + Paragraph/Large on Core/Black.
   Vertical rhythm comes from the section padding, as in the Figma frame. */
.mada-faqs-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: var(--space-5);                         /* 16 */
}
.mada-faqs-empty__icon {
	inline-size: 80px;
	block-size: 80px;
	flex: 0 0 auto;
}
.mada-faqs-empty__title {
	margin: 0;
	font-weight: var(--fw-bold);
	font-size: var(--fs-2xl);                    /* 20 → 24 desktop */
	line-height: var(--lh-lg);                   /* 28 → 32 desktop */
	color: var(--color-black);
}
.mada-faqs-empty p {
	margin: 0;
	font-size: var(--fs-lg);                     /* 16 → 18 desktop */
	line-height: var(--lh-md);                   /* 24 → 28 desktop */
	color: var(--color-black);
}

.mada-faqs-body { background-color: var(--color-white); padding-block: var(--pad-section-top) var(--pad-section-bottom); }
.mada-faqs-body__inner {
	max-inline-size: var(--container-max);       /* Figma: Main FAQ Grid spans the full 1536 container */
	margin-inline: auto;
	padding-inline: var(--grid-margin);
	display: flex;
	flex-direction: column;
	gap: var(--space-9);
}
.mada-faqs-cats { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: center; }
.mada-faqs-cats__chip {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	background-color: var(--color-neutral-150);
	color: var(--color-neutral-700);
	border-radius: var(--radius-lg);
	padding: var(--space-3) var(--space-6);
	font-size: var(--fs-sm);
	line-height: 20px;
	font-weight: var(--fw-medium);
	text-decoration: none;
}
.mada-faqs-cats__chip.is-active {
	background-color: #001623;                   /* TrustBlue/90 */
	color: var(--color-white);
}
.mada-faqs-cats__chip.is-active img { filter: brightness(4); }

.mada-faqs-body__title {
	margin: 0;
	font-weight: var(--fw-bold);
	font-size: 30px;                             /* Figma: 3xl 30 */
	line-height: 1.3;
	color: var(--color-black);
}

.mada-faqs-help {
	background-color: #001623;                   /* TrustBlue/90 */
	padding-block: var(--pad-section-top) var(--pad-section-bottom);
}
.mada-faqs-help__inner {
	max-inline-size: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--grid-margin);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--space-5);
}
.mada-faqs-help__inner h2 { margin: 0; font-weight: var(--fw-bold); font-size: var(--fs-4xl); line-height: 40px; color: var(--color-white); }
.mada-faqs-help__inner p { margin: 0; font-size: var(--fs-md); line-height: 24px; color: rgba(245,245,246,0.75); max-inline-size: 66ch; }
.mada-faqs-help .mada-btn-sq { margin-block-start: var(--space-4); }

@media (max-width: 639px) {
	.mada-faqs-hero__inner h1 { font-size: var(--fs-banner); line-height: var(--lh-banner); }

}

/* --- Redesigned FAQ body (July 2026, Figma 4111:38464): 12-col grid with a
   sidebar category nav (cols 1-3) and the accordion (cols 4-12). --- */
.mada-faqs-body__grid { display: flex; flex-direction: column; gap: var(--space-9); }
/* Sidebar per Figma 4188:14776: rows are 60.8px (16px padding + 28.8px icon),
   labels never wrap, inactive buttons hug their content and the active one
   fills the column; 12px gap. */
.mada-faqs-side { display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; }
.mada-faqs-side__btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-4);                         /* 12 */
	padding: var(--space-5);                     /* 16 */
	border-radius: var(--radius-xl);             /* 12 */
	font-size: var(--fs-md);
	line-height: var(--lh-sm);
	white-space: nowrap;
	color: var(--color-neutral-700);
	text-decoration: none;
}
/* Icons are inline SVGs filled with currentColor, so every state below recolours
   the glyph for free from the button's own `color` — there is no separate icon
   rule and no brightness hack to keep in sync. */
.mada-faqs-side__btn svg { inline-size: 28.8px; block-size: 28.8px; flex: 0 0 auto; }

/* ---- Category button states ----------------------------------------------
   R5, superseding the S45 pass. The client added "Pressed Status" to Figma
   (section 4739:81321, button 4739:81080) — no fill, label + icon
   `Action/Main/pressed` #00588A, Regular weight — and then confirmed the intent:
   that blue marks the CHOSEN category (the one whose questions are showing),
   not a momentary mousedown. So:

     chosen   no fill, #00588A label + icon        (was: mint glass + teal Bold)
     hover    mint glass fill, teal label + icon   (was: Neutral/100 fill)
     default  no fill, Neutral/700 #4B5563
     pressed  none — deliberately dropped (why, next paragraph)

   The mint glass is reused as the hover fill rather than discarded, so the
   surface the DS draws on this component stays on the page. There is no longer
   an :active rule: with blue taken by the chosen state a mousedown flash would
   either duplicate it or invent a colour Figma does not define, and the button
   is a link that navigates on release anyway. Keeping the S3/S39 principle
   intact — a state change here is a colour/fill change, never an underline. */
.mada-faqs-side__btn {
	transition: background-color 0.18s ease, color 0.18s ease;
}
.mada-faqs-side__btn:hover,
.mada-faqs-side__btn:focus-visible {
	background-color: var(--glass-surface-mint);
	color: var(--color-primary);                 /* MintPay/50 #00B2AF */
	text-decoration: none;
}
/* `inline-size: 100%` predates the fill change: with no background it is now
   only a wider hit area on the chosen row, which is harmless (and the mobile
   scroller still overrides it to `auto` further down). */
.mada-faqs-side__btn.is-active {
	inline-size: 100%;
	background-color: transparent;
	color: var(--color-trust-60);                /* Action/Main/pressed #00588A */
	font-weight: var(--fw-regular);
}
/* Chosen wins over hover — pointing at the category you are already reading
   must not repaint it as if it were another option. */
.mada-faqs-side__btn.is-active:hover {
	background-color: transparent;
	color: var(--color-trust-60);
}
/* Keyboard focus is the one case that still needs a visible surface, or the
   chosen row would be the only unfocusable-looking item in the list. Fill only;
   the colour stays chosen-blue. */
.mada-faqs-side__btn.is-active:focus-visible {
	background-color: var(--glass-surface-mint);
	color: var(--color-trust-60);
}
.mada-faqs-content { min-inline-size: 0; flex: 1 1 auto; }
.mada-faqs-body__title {
	display: flex;
	align-items: center;
	gap: var(--space-5);                         /* 16 */
	/* Client feedback p51: more air between the category title and its questions. */
	margin-block-end: var(--space-7);            /* 24 */
}
.mada-faqs-body__titleicon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 40px;
	block-size: 40px;
	border-radius: var(--radius-lg);             /* 8 */
	background-color: var(--glass-surface-mint);
	flex: 0 0 auto;
}
/* FAQ card border in this page reads Neutral/150 (vs the DS default). */
.mada-faqs-body .mada-faq__item { border-color: var(--color-neutral-150); }

/* ---- Mobile category filter — round-3 feedback: "revisit the mobile filter
   behavior" (4188:8563, Arabic FAQs Mobile 320).
   The design is NOT the desktop sidebar stacked: it is a horizontally
   SCROLLING row of pills. In that frame the Nav is 915 wide inside a 288
   container (so it overflows and scrolls), the buttons sit 12 apart, the
   "Categories" heading is hidden (already absent from our markup), and the
   accordion starts 40 below the 60.8-tall row. Stacking five full-width
   buttons instead pushed the answers most of a screen down, which is the
   behaviour being reported.
   Declared AFTER the sidebar rules above — same specificity, so source order
   decides.

   R5: "639 & 640 should have almost similar behaviors regarding the shape of
   the filter." They now do. The client supplied the frame that was missing when
   this block was first written — English-FAQs-Tablet 640 (4188:15753) — and it
   draws the SAME scrolling pill row: Nav 968 wide inside the 576 container,
   60.8 tall, "Categories" heading hidden, accordion 40 below. So the band runs
   to 1023, where the desktop sidebar grid takes over. (The 640 frame butts its
   pills together at 0 gap where 320 sets 12; we keep 12 across the whole band
   so nothing jumps at the 639/640 seam, which is what was reported.) */
@media (max-width: 1023px) {
	.mada-faqs-body__grid { gap: var(--space-11); }   /* 40 */
	.mada-faqs-side {
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: stretch;
		gap: var(--space-4);                          /* 12 */
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		/* Bleed to the viewport edges like the frame does, while the first and
		   last pill still clear the container padding. */
		margin-inline: calc(-1 * var(--grid-margin));
		padding-inline: var(--grid-margin);
	}
	.mada-faqs-side::-webkit-scrollbar { display: none; }
	.mada-faqs-side__btn { flex: 0 0 auto; }
	/* The sidebar's active button fills its column; in the scroller it must
	   hug its label instead, or it would stretch the whole track. */
	.mada-faqs-side__btn.is-active { inline-size: auto; }
}

@media (min-width: 1024px) {
	/* Figma Tablet-1024: aside 280.8 → Desktop 1920: aside 354 (gap ~42). */
	.mada-faqs-body__grid {
		display: grid;
		grid-template-columns: 280px minmax(0, 1fr);
		gap: var(--space-11);                    /* 40 */
		align-items: start;
	}
}
@media (min-width: 1025px) {
	.mada-faqs-body__grid { grid-template-columns: 354px minmax(0, 1fr); }
}