/* ==========================================================================
   Section: Home hero (Banner) + stats
   Figma: Mada Website v3 → Home EN "Banner" 4081:31263 (D1440) — exact spec.
   Non-token values (25px card padding, 30px chip radius, 52px gap, 22px lead,
   9/10px micro type, rgba navy tints) are taken verbatim from the Figma node.
   RTL: logical properties; arrows use .mada-icon--directional.
   ========================================================================== */

.mada-hero {
	background-color: var(--color-bg);
}

.mada-hero__inner {
	max-inline-size: var(--container-max);
	margin-inline: auto;
	padding-block: var(--pad-banner-block) var(--pad-banner-block);            /* 64 — banner p-64 */
	padding-inline: var(--grid-margin);
	display: flex;
	flex-direction: column;
	gap: 52px;                                  /* Figma: gap 52 */
}

.mada-hero__row {
	display: flex;
	flex-direction: column;
	gap: var(--space-15);
	align-items: flex-start;
	justify-content: space-between;
}

/* ---- Left: text ---- */
.mada-hero__text {
	flex: 1 1 0;
	min-inline-size: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-6);                        /* 20 */
	align-items: flex-start;
}

.mada-hero__title {
	margin: 0;
	font-weight: 800;                           /* Figma: Poppins ExtraBold */
	font-size: var(--fs-banner);                /* 60 tablet / 48 mobile */
	line-height: var(--lh-banner);              /* 72 tablet / 58 mobile */
	letter-spacing: -0.25px;                    /* Figma: display-large tracking */
	color: var(--color-trust-100);              /* #000B11 */
}

/* S7: "keep the font size at 96px with a line height of 112px for the Home
   banner ONLY. For all other pages use 72/86." Desktop-band exception — the
   tablet and mobile steps are shared with every other banner above. */
@media (min-width: 1025px) {
	.mada-hero__title {
		font-size: 96px;
		line-height: 112px;
	}
}
.mada-hero__title span { display: block; }
.mada-hero__accent { color: var(--color-primary); }

:lang(ar) .mada-hero__title,
[dir="rtl"] .mada-hero__title { letter-spacing: var(--ls-none); }

.mada-hero__lead {
	margin: 0;
	font-size: 22px;                            /* Figma: title-large 22/28 */
	line-height: 28px;
	font-weight: var(--fw-regular);
	color: var(--color-text);
	max-inline-size: 802px;                     /* Figma text width */
}

.mada-hero__start {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);                        /* 8 */
	background-color: var(--color-cta);         /* #002D4E */
	color: var(--color-liquid-mint);            /* #56E3D6 text — per design */
	padding-block: var(--space-5);              /* 16 */
	padding-inline: var(--space-7);             /* 24 */
	border-radius: var(--radius-full);
	font-weight: var(--fw-bold);
	font-size: var(--fs-md);                    /* 14 */
	line-height: 20px;
	text-decoration: none;
	transition: background-color 0.18s ease;
}
.mada-hero__start:hover,
.mada-hero__start:focus-visible {
	/* DS Main Button State=Hover (93:30581): navy + 5% white overlay, label
	   turns WHITE (client: content must stay visible on navy/green). */
	background-color: #0D3857;
	color: var(--color-white);
	text-decoration: none;
}

/* ---- Right: app card ----
   Client feedback p3: the card is now the client's own export (glow + glass
   chip baked into the image), one file per language + breakpoint. The old
   HTML mock styles below it are retained only until no template uses them. */
.mada-hero__card {
	inline-size: 100%;
	max-inline-size: 483px;                     /* Figma: 483.33 */
}
.mada-appcard-img {
	display: block;
	inline-size: 100%;
	block-size: auto;
}

.mada-appcard-wrap { position: relative; }

.mada-appcard__glow {
	position: absolute;
	inset-block-start: 24px;
	inset-inline-end: -12px;
	inset-block-end: -24px;
	inset-inline-start: 12px;
	background-color: rgba(86, 227, 214, 0.4);  /* LiquidMint @40% */
	filter: blur(20px);
	border-radius: var(--radius-4xl);
}

.mada-appcard {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-6);                        /* 20 */
	background-color: var(--color-vault-navy);  /* solid #002D4E */
	border: var(--border-width-thin) solid rgba(0, 45, 78, 0.1);
	border-radius: var(--radius-4xl);           /* 32 */
	padding: 25px;                              /* Figma: 25 */
	box-shadow: 0 16px 48px 0 rgba(0, 45, 78, 0.16), 0 4px 16px 0 rgba(0, 45, 78, 0.08);
	overflow: hidden;
	color: var(--color-text-on-dark);
}

.mada-appcard__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	inline-size: 100%;
}
.mada-appcard__cart {
	font-weight: var(--fw-bold);
	font-size: 10px;
	line-height: 15px;
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--color-liquid-mint);
}
.mada-appcard__brandchip {
	background-color: rgba(245, 245, 246, 0.1);
	color: rgba(245, 245, 246, 0.8);
	font-size: 10px;
	line-height: 15px;
	padding-block: var(--space-1);              /* 2 */
	padding-inline: 10px;
	border-radius: var(--radius-full);
}

.mada-appcard__totalwrap {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);                        /* 4 */
	padding-block-start: var(--space-2);
}
.mada-appcard__totallabel {
	font-size: 10px;
	line-height: 15px;
	text-transform: uppercase;
	color: rgba(245, 245, 246, 0.5);
}
.mada-appcard__total {
	font-family: var(--font-ar);                /* Figma: Noto Kufi Bold */
	font-weight: var(--fw-bold);
	font-size: 48px;
	line-height: 48px;
	color: #F5F5F6;
}

.mada-appcard__payments {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-3);                        /* 8 */
	padding-block-start: var(--space-2);
	inline-size: 100%;
}
.mada-appcard__pay {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-block: var(--space-4);              /* 12 */
	padding-inline: var(--space-3);             /* 8 */
	border-radius: 30px;                        /* Figma: 30 */
	background-color: rgba(245, 245, 246, 0.05);
	color: rgba(245, 245, 246, 0.7);
	text-align: center;
}
.mada-appcard__pay.is-active {
	background-color: var(--color-liquid-mint); /* #56E3D6 */
	color: var(--color-vault-navy);
}
.mada-appcard__pay-label {
	font-weight: var(--fw-semibold);
	font-size: 9px;
	line-height: 13.5px;
	text-transform: uppercase;
	opacity: 0.7;
}
.mada-appcard__pay-amt {
	font-family: var(--font-ar);                /* Kufi Bold numerals */
	font-weight: var(--fw-bold);
	font-size: 16px;
	line-height: 24px;
	padding-block-start: var(--space-2);
}
.mada-appcard__pay-when {
	font-size: 9px;
	line-height: 13.5px;
	opacity: 0.6;
}

.mada-appcard__confirm {
	display: flex;
	align-items: center;
	justify-content: space-between;
	inline-size: 100%;
	background-color: var(--color-liquid-mint);
	color: var(--color-vault-navy);
	border-radius: var(--radius-5xl);           /* 40 */
	padding-block: var(--space-5);              /* 16 */
	padding-inline: var(--space-6);             /* 20 */
	font-weight: var(--fw-bold);
	font-size: var(--fs-md);                    /* 14 */
	line-height: 20px;
}

.mada-appcard__float {
	position: absolute;
	inset-block-end: -16px;
	inset-inline-start: -12px;
	display: flex;
	align-items: center;
	gap: 10px;
	background-color: rgba(255, 255, 255, 0.1);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	border: var(--border-width-thin) solid rgba(0, 45, 78, 0.1);
	border-radius: var(--radius-5xl);
	padding-block: 13px;                        /* Figma: 13 */
	padding-inline: 17px;                       /* Figma: 17 */
	box-shadow: 0 16px 48px 0 rgba(0, 45, 78, 0.16), 0 4px 16px 0 rgba(0, 45, 78, 0.08);
	font-size: 10px;
	line-height: 15px;
	text-transform: uppercase;
	color: #F5F5F6;
	white-space: nowrap;
}
.mada-appcard__float-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 32px;
	block-size: 32px;
	border-radius: var(--radius-full);
	background-color: rgba(255, 255, 255, 0.04);
	color: var(--color-liquid-mint);
}

/* ---- Stats row ---- */
.mada-hero__stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);      /* 3-across at every width (Figma M393) */
	gap: var(--space-5);                        /* 16 */
	border-block-start: var(--border-width-thin) solid rgba(0, 45, 78, 0.15);
	padding-block-start: var(--space-9);        /* 32 (Figma 33) */
}
.mada-stat {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);                        /* 2 */
}
.mada-stat__value {
	font-family: var(--font-ar);                /* Figma: Noto Kufi Bold numerals */
	font-weight: var(--fw-bold);
	font-size: var(--fs-7xl);                   /* 60 desktop */
	line-height: 1;
	color: var(--color-vault-navy);
}
.mada-stat__label {
	font-size: var(--fs-sm);                    /* 14 */
	line-height: 20px;
	text-transform: uppercase;
	color: rgba(0, 45, 78, 0.55);
}

/* ---- Tablet 640–1024 — client feedback p16: the display headline is too
   large in this range and the app-card must stay inside the viewport. ---- */
@media (min-width: 640px) and (max-width: 1024px) {
	.mada-hero__title { font-size: var(--fs-banner); line-height: var(--lh-banner); } /* 60/72 */
	.mada-hero__card  { max-inline-size: 483px; margin-inline: 0; }
	/* Feedback p17: the stats sat tight under the card at 640 — more air and
	   one step smaller values. */
	.mada-hero__stats { margin-block-start: var(--space-13); gap: var(--space-9); } /* 48 above / 32 gap */
	.mada-stat__value { font-size: var(--fs-6xl); }                                 /* 48 in this band */
}

/* ---- Mobile — verified against Figma M393 banner (4084:23382) ---- */
@media (max-width: 639px) {
	.mada-hero__title { font-size: var(--fs-banner); line-height: var(--lh-banner); } /* 36/40 */
	/* Feedback p20: "Buy today." and "Pay in four." flow on ONE line on
	   mobile (they wrap naturally only when the width truly runs out). */
	.mada-hero__title span { display: inline; }
	.mada-hero__lead  { font-size: var(--fs-lg); line-height: 24px; }           /* 16/24 */
	.mada-hero__card  { margin-inline-start: auto; max-inline-size: 300px; }    /* right-aligned card */
}

/* Mobile stat sizing (Figma M393: ~36px values) */
@media (max-width: 639px) {
	.mada-stat__value { font-size: var(--fs-5xl); } /* 36 mobile */
	.mada-stat__label { font-size: var(--fs-xs); }
}

@media (min-width: 1025px) {
	.mada-hero__row {
		flex-direction: row;
		gap: var(--space-15);                   /* 64 — Figma: justify-between */
		align-items: flex-start;
	}
	.mada-hero__card { flex: 0 0 483px; }
}