/* ==========================================================================
   Section: Merchant stats (mint band)
   Figma: Home EN 4081:33633 — exact node values. Background logomark pattern
   reproduced by tiling the Mada mark (white @14%), matching the drawn tiles
   (~167px, spaced grid).
   RTL: logical throughout.
   ========================================================================== */

.mada-merchant {
	position: relative;
	background-color: var(--color-liquid-mint);  /* #56E3D6 */
	padding-block: var(--pad-section-top) var(--pad-section-bottom);              /* 112 */
	overflow: hidden;
}

/* MADA-2857 "incorrect background design". The band was tiling the Mada
   LOGOMARK at 167px, which reads as a busy repeating wallpaper. The design
   does not tile a logo at all: Figma draws one large geometric composition of
   rings and quarter-arcs -- frame "Background" 4081:38095, a fixed 1965x1103
   artwork placed at (-45, -267.25) and clipped by the band, at 14% opacity.
   It is IDENTICAL at all 16 breakpoints (checked D1920 down to M320): it never
   scales, never repeats, and is simply cropped by the section.

   The artwork is already in the theme -- pattern-safe-trusted.svg, exported
   from the same Figma group for the bento "Safe & Trusted" card. Verified the
   same file, placed as below, matches the Figma render at r = 0.999.

   repeat (rather than no-repeat) only covers viewports wider/taller than the
   1965x1103 the design provides; up to that the first tile is the whole
   visible area, so every drawn frame is exact. */
.mada-merchant::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("../../images/pattern-safe-trusted.svg");
	background-size: 1965px 1103px;
	background-position: -45px -267.25px;
	background-repeat: repeat;
	opacity: 0.14;
	pointer-events: none;
}

.mada-merchant__inner {
	position: relative;
	max-inline-size: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--grid-margin);
	display: flex;
	flex-direction: column;
	gap: var(--space-15);
	align-items: flex-start;
}

.mada-merchant__left {
	flex: 1 1 0;
	min-inline-size: 0;
}

.mada-merchant__title {
	margin: 0;
	font-weight: 800;                            /* ExtraBold */
	font-size: var(--fs-section);                             /* Figma: 60/86 */
	line-height: var(--lh-section);
	color: var(--color-vault-navy);
}
.mada-merchant__title span { display: block; }

.mada-merchant__sub {
	margin: 0;
	font-size: var(--fs-xl);                     /* 18 */
	line-height: 28px;
	color: rgba(0, 45, 78, 0.7);
}

.mada-merchant__stats {
	flex: 1 1 0;
	min-inline-size: 0;
	inline-size: 100%;
	max-inline-size: 970px;                      /* Figma */
	display: flex;
	flex-direction: column;
	gap: var(--space-11);                        /* 40 */
}

.mada-merchant__pill {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-5);
	block-size: 96px;                            /* Figma */
	background-color: var(--color-vault-navy);
	border-radius: 56px;                         /* Figma */
	padding-block: var(--space-7);               /* 24 */
	padding-inline-start: var(--space-9);        /* 32 */
	padding-inline-end: var(--space-7);          /* 24 */
}

.mada-merchant__label {
	display: flex;
	align-items: center;
	gap: var(--space-6);                         /* 20 */
	font-size: 16px;
	line-height: 24px;
	color: #F5FBFF;                              /* Figma: shade/sky/50 */
}

.mada-merchant__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 48px;
	block-size: 48px;
	border-radius: var(--radius-full);
	background-color: rgba(245, 245, 246, 0.1);
}
.mada-merchant__icon.is-solid {
	background-color: rgba(255, 255, 255, 0.2);
}

.mada-merchant__value {
	font-family: var(--font-ar);                 /* Kufi Bold */
	font-weight: var(--fw-bold);
	font-size: 48px;                             /* Figma: 48/48 */
	line-height: 48px;
	color: var(--color-liquid-mint);
	white-space: nowrap;
}

@media (max-width: 639px) {
	.mada-merchant__title { font-size: var(--fs-section); line-height: var(--lh-section); }
	.mada-merchant__pill { block-size: auto; min-block-size: 72px; }
	.mada-merchant__value { font-size: 32px; line-height: 1; }
}

@media (min-width: 1025px) {
	.mada-merchant__inner {
		flex-direction: row;
		gap: 68px;                               /* Figma */
		align-items: flex-start;
	}
}