/* ==========================================================================
   Page: B2B merchant application
   Figma: B2B EN D1920 (4084:52170) — exact node values: 60/72 title, white
   card r24 p40 + soft shadow, inputs r6 (px12/py12), teal Submit r8,
   "Connect" band #002423 (MintPay/90).
   RTL: logical properties.
   ========================================================================== */

.mada-b2b {
	/* OverdueRed/5 + /60 — the exact steps the Figma error state uses. They are
	   not in tokens.css (which exposes only the "50" step per status ramp);
	   values are from the export ramp quoted in CLAUDE.md §3.1. */
	--color-b2b-error-bg: #FEF2F5;
	--color-b2b-error-text: #C20028;

	position: relative;
	background-color: var(--color-neutral-100);
	padding-block: var(--pad-section-last-top) var(--pad-section-last-bottom);
}
/* Success state has no hero heading, so the card sits higher (Figma 4085:9704). */
.mada-b2b--done { padding-block-start: var(--space-18); }
/* MADA-2861 + MADA-2862 — "narrow, centered card" on both the form and the
   confirmation screen. One root cause: this wrapper paired a literal
   `max-inline-size: 900px` with `padding-inline: var(--grid-margin)`, and
   --pad-section-inline ramps to 240 LAYOUT px on the desktop band, so the cap
   was double-inset. Measured before the fix: 240px of content at 1920 (and
   411.6 at 1440) for the heading AND the card — the same defect fixed in
   faq-accordion.css for MADA-2849.

   Figma (form D1920 4084:52199 / T1024 4090:29827, confirmation D1920
   4084:53212 / T1024 4090:30710) is consistent across both screens:
     - the heading + sub span the FULL page container (1536 at 1920, 960 at
       1024, 576 at 640, 288 at 320), centred;
     - the CARD fills that container below 1025 and caps at 895, centred,
       from 1025 up (T1024 card 960 = full; D1025 895 in a 897 section;
       D1920 895 in a 1536 section).
   So the wrapper becomes the ordinary page container and only the card
   carries the 895 cap. */
.mada-b2b__inner {
	max-inline-size: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--grid-margin);
	display: flex;
	flex-direction: column;
	gap: var(--space-11);
}
.mada-b2b__head { text-align: center; }
.mada-b2b__head h1 {
	margin: 0 0 var(--space-4);
	font-weight: var(--fw-bold);
	font-size: var(--fs-banner);                    /* 60 */
	line-height: var(--lh-banner);                  /* 72 */
	color: var(--color-black);
}
.mada-b2b__head p { margin: 0; font-size: var(--fs-md); line-height: 24px; color: var(--color-neutral-600); }

/* ---- Submit-failed toast — Figma 4090:8916 ------------------------------
   OverdueRed/5 pill, OverdueRed/60 text, Paragraph/Large, r6, px24 py8,
   shadow-lg; centred and straddling the header's bottom edge. */
.mada-b2b__toast {
	position: absolute;
	/* S47: "the error message looks cropped in all sizes." It sat at -22px, so
	   its top half rose above the section into the sticky header's band — and
	   the header (z-index 100) painted over it. Sitting fully inside the
	   section's top padding keeps the floating look without the clipping. */
	inset-block-start: var(--space-6);           /* 20 */
	inset-inline: 0;
	z-index: 5;
	inline-size: fit-content;
	max-inline-size: calc(100% - (var(--grid-margin) * 2));
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-3);                         /* 8 */
	padding-block: var(--space-3);               /* 8 */
	padding-inline: var(--space-7);              /* 24 */
	border-radius: var(--radius-base);           /* 6 */
	background-color: var(--color-b2b-error-bg);
	color: var(--color-b2b-error-text);
	font-size: var(--fs-lg);                     /* 18 desktop / 16 mobile */
	line-height: var(--lh-md);
	text-align: center;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.08);
}
.mada-b2b__toast-icon { flex: 0 0 auto; }

.mada-b2b__card {
	inline-size: 100%;
	/* Figma caps the card at 895 and centres it from the desktop band up; below
	   1025 it fills the container (T1024 960, T640 576, M320 288). Literal px —
	   a component value, scaled once by --ui-scale like everything else (§3.6.1
	   rule 3), never pre-divided. */
	max-inline-size: none;
	margin-inline: auto;
	background-color: var(--color-white);
	border-radius: var(--radius-3xl);            /* 24 */
	padding: var(--space-11);                    /* 40 */
	/* Client feedback p44 — Figma 4084:52206 "Overlay+Blur": a soft teal glow
	   under/around the card. Done as extra shadow layers (a ::before with
	   z-index:-1 gets painted behind the section background and never shows).
	   Layers: the two original dark shadows + a teal wash biased downward. */
	box-shadow:
		0 4px 3px rgba(0, 0, 0, 0.08),
		0 10px 7.5px rgba(0, 0, 0, 0.08),
		0 16px 44px -6px rgba(0, 178, 175, 0.11),
		0 6px 90px 6px rgba(0, 178, 175, 0.04); /* p44 glow — tuned to the mock's sampled tint */
	display: flex;
	flex-direction: column;
	gap: var(--space-9);
}
.mada-b2b__hp { position: absolute !important; inset-inline-start: -9999px; }

.mada-b2b__group {
	border: 0;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}
/* Section title = English/Heading/Small: 2xl (24 desktop / 20 mobile), lh lg. */
.mada-b2b__group legend {
	font-weight: var(--fw-bold);
	font-size: var(--fs-2xl);
	line-height: var(--lh-lg);
	color: var(--color-black);
	margin-block-end: var(--space-4);
	padding: 0;
}

/* Field label = English/Paragraph/Medium (Regular, md/lh-sm), per 4085:9100. */
.mada-b2b .mada-field { gap: var(--space-3); margin-block-end: 0; }  /* 8 to the message */
.mada-b2b .mada-field__label {
	font-weight: var(--fw-regular);
	margin-block-end: var(--space-4);            /* 8 + 12 = 20 to the input */
}
.mada-b2b .mada-field__required {
	color: var(--color-b2b-error-text);
	margin-inline-start: 0;                      /* the asterisk hugs the label */
}

/* Inputs on this page are r6 per the node (DS Input) */
.mada-b2b .mada-input {
	border-radius: var(--radius-base);           /* 6 */
	padding-block: var(--space-4);               /* 12 */
	padding-inline: var(--space-4);
}

/* Inline validation message — Figma 4085:9101: 14/20, OverdueRed, 8px below
   the field; the input border turns OverdueRed/50 (via .mada-field.is-error). */
.mada-b2b .mada-b2b__error { color: var(--color-b2b-error-text); }
.mada-b2b .mada-field__help {
	font-size: var(--fs-sm);                     /* 14 desktop / 12 mobile */
	line-height: var(--lh-sm);
}
.mada-b2b .mada-field__help[hidden] { display: none; }

.mada-b2b__socials {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}
.mada-b2b__socialrow {
	display: flex;
	gap: var(--space-4);
	align-items: stretch;
}
/* Platform chooser — the closed control shows the selected brand mark + a
   caret (Figma EN 4085:8940). Per client request the OPEN menu lists the brand
   LOGOS only (no names), which a native <select> cannot do, so this is a custom
   ARIA listbox: a toggle button + a floating <ul role="listbox">, with the
   value carried by a hidden input. Logos keep an alt of the platform name. */
.mada-b2b__platform {
	position: relative;
	flex: 0 0 auto;
}
.mada-b2b__platform-toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);                         /* 8 */
	block-size: 100%;
	padding-inline: var(--space-4);              /* 12 */
	border: var(--border-width-thin) solid var(--border-color-default);
	border-radius: var(--radius-base);
	color: var(--color-neutral-600);
	background: var(--color-white);
	cursor: pointer;
}
.mada-b2b__platform-mark {
	inline-size: 24px;
	block-size: 24px;
	flex: 0 0 auto;
	display: block;
}
.mada-b2b__platform-caret { flex: 0 0 auto; transition: transform 0.15s ease; }
.mada-b2b__platform-toggle[aria-expanded="true"] .mada-b2b__platform-caret { transform: rotate(180deg); }
.mada-b2b__platform-toggle:focus-visible {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 var(--border-width-focus) var(--color-mint-20);
}

/* Floating logo menu. */
.mada-b2b__platform-menu {
	position: absolute;
	inset-block-start: calc(100% + var(--space-2));
	inset-inline-start: 0;
	z-index: 20;
	margin: 0;
	padding: var(--space-3);
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	background: var(--color-white);
	border: var(--border-width-thin) solid var(--color-neutral-200);
	border-radius: var(--radius-lg);
	box-shadow: 0 12px 32px rgba(0, 14, 11, 0.12);
}
.mada-b2b__platform-menu[hidden] { display: none; }
.mada-b2b__platform-opt {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 44px;
	block-size: 40px;
	border-radius: var(--radius-base);
	cursor: pointer;
}
.mada-b2b__platform-opt img { inline-size: 24px; block-size: 24px; display: block; }
.mada-b2b__platform-opt:hover,
.mada-b2b__platform-opt:focus-visible { background: var(--color-neutral-100); outline: none; }
.mada-b2b__platform-opt[aria-selected="true"] { background: var(--color-mint-20); }
.mada-b2b__socialrow .mada-input { flex: 1 1 auto; min-inline-size: 0; }
/* Client feedback p47: the remove control is the X icon ALONE (the
   client-approved alternative) — no bordered box around it. */
.mada-b2b__social-remove {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 24px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--color-neutral-500);
	cursor: pointer;
}
.mada-b2b__social-remove:hover,
.mada-b2b__social-remove:focus { color: var(--color-error); }
/* The explicit display above beats the UA [hidden] rule, so the button stayed
   visible as an empty box on the first/only row — restore hiding. */
.mada-b2b__social-remove[hidden] { display: none; }
.mada-b2b__add {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	align-self: flex-start;
	margin-block-start: var(--space-2);          /* 8 + 4 = 12 per the node */
	background: none;
	border: 0;
	padding: 6px 10px;                           /* DS Plain backplate (93:30465) */
	border-radius: var(--radius-lg);             /* 8 */
	cursor: pointer;
	font-weight: var(--fw-semibold);             /* DS Label — SemiBold */
	font-size: var(--fs-sm);                     /* 14 */
	line-height: 20px;
	color: var(--color-vault-navy);
	transition: background-color 0.15s ease;
}
/* Client feedback p45 — DS "Multi Componant Button" Type=Plain State=Hover
   (93:30461): overlay/light pill behind the navy label. */
.mada-b2b__add:hover,
.mada-b2b__add:focus-visible { background-color: var(--overlay-light); outline: none; }

.mada-b2b__divider {
	margin: 0;
	border: 0;
	border-block-start: var(--border-width-thin) solid var(--color-neutral-150);
}

.mada-b2b__actions {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--space-3);
}
.mada-b2b__note {
	margin: 0;
	font-size: var(--fs-sm);                     /* 14 */
	line-height: 20px;
	color: var(--color-neutral-500);             /* #888F93 */
}

/* ---- Connect band ---- */
.mada-b2bband {
	background-color: var(--color-mint-90);      /* #002423 */
	padding-block: var(--pad-section-top) var(--pad-section-bottom);
}
.mada-b2bband__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-b2bband__inner h2 {
	margin: 0;
	font-weight: var(--fw-bold);
	font-size: var(--fs-section);                    /* 36 */
	line-height: var(--lh-section);
	color: var(--color-white);
}
.mada-b2bband__inner p {
	margin: 0;
	font-size: var(--fs-md);
	line-height: 24px;
	color: rgba(245, 245, 246, 0.75);
	max-inline-size: 80ch;
}
.mada-b2bband .mada-btn-sq--outline-teal { margin-block-start: var(--space-4); }

@media (max-width: 639px) {
	.mada-b2b__head h1 { font-size: var(--fs-banner); line-height: var(--lh-banner); }
	.mada-b2b__card { padding: var(--space-6); }
}

/* MADA-2861/2862 — the card's 895 cap starts at the desktop band, exactly as
   Figma draws it (T1024 fills its 960 container; D1025 is 895 inside 897). */
@media (min-width: 1025px) {
	.mada-b2b__card { max-inline-size: 895px; }
}

/* Success state — Figma EN 4085:9704 / 4084:53183 (AR 4090:36956): centred
   teal check icon 48, "Application Received!" 48/58 Bold, sub 18/28 on two
   lines, navy Done button. */
.mada-b2b__success {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--space-7);                         /* 24 */
	padding-block: var(--space-11);
}
.mada-b2b__success p { max-inline-size: 52ch; }
.mada-b2b__success h1 {
	margin: 0;
	font-weight: var(--fw-bold);
	font-size: var(--fs-5xl);                    /* 48 */
	line-height: var(--lh-3xl);                  /* 58 */
	color: var(--color-black);
}
.mada-b2b__success p {
	margin: 0;
	font-size: var(--fs-lg);                     /* 18 */
	line-height: var(--lh-md);                   /* 28 */
	color: var(--color-black);
}
.mada-b2b__success .mada-btn-sq { margin-block-start: var(--space-3); }