/* ==========================================================================
   Component: Support popup ("How can we help you?")
   Figma: Support canvas — EN Pop Up 4446:86001 · AR 4446:69666. 608×491 card
   r-2xl on overlay.medium + blur; mint-gradient header (tiled logomark ~5%)
   with glass close chip; white footer panel (r-3xl top, shadow-lg-inverse)
   holding Call Us (VaultNavy) + WhatsApp (#41C351) rows, 370px column.
   Tokens: core/white, vault-navy, mintpay ramp, liquid-mint, glass surfaces,
   radius lg/2xl/3xl, spacing 4/5/7/8. RTL: logical properties; gradient angle
   mirrored in rtl.css. Numbers come from Site Links (ACF) — never hardcoded.
   ========================================================================== */

.mada-support {
	inline-size: min(608px, calc(100vw - 32px));
	border: none;
	padding: 0;
	border-radius: var(--radius-2xl);            /* 16 */
	background-color: var(--color-white);
	box-shadow: var(--shadow-lg);
	overflow: hidden;
}
/* Scroll lock while the dialog is open (class set by navigation.js): kills
   the classic-scrollbar gutter that left a gap beside the mobile sheet. */
html.mada-modal-open { overflow: hidden; }

.mada-support::backdrop {
	background-color: var(--overlay-medium);     /* #071124 @48% */
	backdrop-filter: blur(12px);
}

/* ---- Gradient header ---- */
.mada-support__head {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-7);                         /* 24 — eyebrow → title block */
	padding: var(--space-13) var(--space-13) calc(var(--space-9) + var(--radius-3xl)); /* body panel overlaps 24px */
	/* MintPay ramp 70 → 40 → 15 (gradient drawn as an image in Figma) */
	background-image: linear-gradient(150deg, #006B69 -5%, #2CC1BF 45%, #C5F7F6 105%);
}
.mada-support__head::before {
	/* Tiled logomark, as on the merchant band (Figma: mark at ~5% opacity) */
	content: "";
	position: absolute;
	inset: -20px;
	background-image: url("../../images/mada-logo-white.svg");
	background-size: 96px auto;
	background-repeat: space;
	opacity: 0.05;
	pointer-events: none;
}
.mada-support__head > * { position: relative; }

.mada-support__eyebrow {
	display: flex;
	align-items: center;
	gap: var(--space-2);                         /* 4 */
	margin: 0;
	font-weight: var(--fw-semibold);
	font-size: var(--fs-sm);                     /* Label/Small */
	line-height: var(--lh-xs);
	color: var(--color-white);
}
.mada-support__eyebrow i {
	inline-size: 12px;
	block-size: 12px;
	border-radius: var(--radius-full);
	background-color: var(--glass-surface-mint);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.mada-support__eyebrow i::after {
	content: "";
	inline-size: 8px;
	block-size: 8px;
	border-radius: var(--radius-full);
	background-color: var(--color-liquid-mint);
}

.mada-support__title {
	margin: 0;
	font-weight: var(--fw-bold);
	font-size: var(--fs-4xl);                    /* Heading/Large 36/40 */
	line-height: var(--lh-2xl);
	color: var(--color-white);
}
.mada-support__sub {
	margin: calc(-1 * var(--space-5)) 0 0;       /* 8px below the title */
	font-size: var(--fs-lg);                     /* Paragraph/Large 18/28 */
	line-height: var(--lh-md);
	color: var(--color-white);
}

.mada-support__close {
	position: absolute;
	inset-block-start: var(--space-7);
	inset-inline-end: var(--space-7);
	inline-size: 40px;
	block-size: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;                                  /* inherited button padding left an 8px content box, clamping the 24px glyph via base.css svg{max-width:100%} */
	border: none;
	border-radius: var(--radius-full);
	background-color: var(--glass-surface-medium);
	color: var(--color-vault-navy);              /* glyph is #002D4E in the node */
	cursor: pointer;
}
.mada-support__close svg { inline-size: 24px; block-size: 24px; flex: 0 0 auto; } /* the glyph is 24 in every frame */
.mada-support__close:hover,
.mada-support__close:focus { background-color: var(--glass-surface-light); }

/* ---- White body panel ---- */
.mada-support__body {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-5);                         /* 16 */
	align-items: center;
	margin-block-start: calc(-1 * var(--radius-3xl));
	padding: var(--space-16) var(--space-7);     /* 72 / 24 */
	border-start-start-radius: var(--radius-3xl);
	border-start-end-radius: var(--radius-3xl);
	background-color: var(--color-white);
	box-shadow: 0 -10px 15px -3px rgba(7, 17, 36, 0.08), 0 -4px 6px -4px rgba(7, 17, 36, 0.08);
}

.mada-support__btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-5);
	inline-size: min(370px, 100%);
	padding: var(--space-5) var(--space-9);      /* Figma: 16 / 32 */
	border-radius: var(--radius-lg);             /* 8 */
	text-decoration: none;
	font-weight: var(--fw-semibold);
	font-size: var(--fs-md);                     /* Label/Medium 16/24 */
	line-height: var(--lh-sm);
	color: var(--color-white);
}
.mada-support__btn--call { background-color: var(--color-vault-navy); }
.mada-support__btn--call:hover { background-color: #003C67; }
.mada-support__btn--wa { background-color: #41C351; } /* WhatsApp brand green — from the Figma node, not a DS token */
.mada-support__btn--wa:hover { background-color: #38AC47; }

.mada-support__btn-label { display: inline-flex; align-items: center; gap: var(--space-4); }
.mada-support__btn-value { direction: ltr; }

/* ---- Responsive — Figma Mobile 320/639 frames (4446:96175 / 4446:95400):
   the popup becomes a BOTTOM SHEET (full width, flush to the viewport bottom,
   only the top corners rounded); close shrinks to 32px at 16/16; buttons KEEP
   the row layout (label start, number end) at 48px tall inside 16px margins. */
@media (max-width: 639px) {
	.mada-support {
		inline-size: 100vw;
		max-inline-size: 100vw;                      /* never clamped by a scrollbar gutter */
		margin-block-start: auto;
		margin-block-end: 0;
		margin-inline: 0;
		border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
	}
	.mada-support__head { padding: var(--space-5) var(--space-5) calc(var(--space-7) + var(--radius-3xl)); }
	.mada-support__title { font-size: var(--fs-3xl); line-height: var(--lh-xl); }
	.mada-support__sub { font-size: var(--fs-md); line-height: var(--lh-sm); margin-block-start: 0; }
	.mada-support__close {
		inset-block-start: var(--space-5);           /* 16 */
		inset-inline-end: var(--space-5);
		inline-size: 32px;
		block-size: 32px;
	}
	.mada-support__body { padding: var(--space-9) var(--space-5); }
	.mada-support__btn {
		inline-size: 100%;
		padding: var(--space-4) var(--space-5);      /* rows are 48 tall (Figma 4446:97502) */
	}
	/* Figma keeps the DESKTOP type sizes here: label 14/20, number 16/24. */
	.mada-support__btn-label { font-size: 14px; line-height: 20px; }
	.mada-support__btn-value { font-size: 16px; line-height: 24px; }
}