/* ==========================================================================
   Component: Button
   Figma: "Mada BNPL" → Buttons (node 92:12) — Main Button + variants.
   Tokens: --color-primary/-hover, --color-cta, radius-full (pill),
           label-medium type, --space-* padding.
   RTL: logical padding; icon uses .mada-icon--directional when directional.
   ========================================================================== */

.mada-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-3);
	padding-block: var(--space-4);
	padding-inline: var(--space-7);
	border: var(--border-width-thin) solid transparent;
	border-radius: var(--radius-full);          /* pill */
	font-family: inherit;
	font-weight: var(--fw-semibold);   /* DS Label/Medium */
	font-size: var(--fs-md);
	line-height: var(--lh-sm);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.05s ease;
	user-select: none;
}
.mada-btn:hover,
.mada-btn:focus-visible { text-decoration: none; }
.mada-btn:active { transform: translateY(1px); }
.mada-btn[disabled],
.mada-btn.is-disabled {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

/* Primary — teal */
.mada-btn--primary {
	background-color: var(--color-primary);
	color: var(--color-white);
}
.mada-btn--primary:hover,
.mada-btn--primary:focus-visible {
	/* Client feedback p9: teal buttons hover to the navy CTA fill. */
	background-color: var(--color-vault-navy);
	color: var(--color-white);
}

/* CTA — navy ("Start Now", dark CTAs) */
.mada-btn--cta {
	background-color: var(--color-cta);
	color: var(--color-white);
}
.mada-btn--cta:hover,
.mada-btn--cta:focus-visible {
	/* DS Main/Hover (93:30581): navy + 5% white overlay — not a hue jump. */
	background-color: #0D3857;
	color: var(--color-white);
}

/* Secondary — TrustBlue */
.mada-btn--secondary {
	background-color: var(--color-secondary);
	color: var(--color-white);
}
.mada-btn--secondary:hover,
.mada-btn--secondary:focus-visible {
	background-color: var(--color-trust-60);
}

/* Ghost / outline */
.mada-btn--ghost {
	background-color: transparent;
	color: var(--color-cta);
	border-color: var(--border-color-default);
}
.mada-btn--ghost:hover,
.mada-btn--ghost:focus-visible {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

/* On dark sections */
.mada-section--dark .mada-btn--ghost,
.mada-section--darkest .mada-btn--ghost {
	color: var(--color-white);
	border-color: var(--glass-border-light);
}

/* Sizes */
.mada-btn--sm { padding-block: var(--space-3); padding-inline: var(--space-5); font-size: var(--fs-sm); }
.mada-btn--lg { padding-block: var(--space-5); padding-inline: var(--space-9); font-size: var(--fs-lg); }

/* Full-width (mobile CTAs) */
.mada-btn--block { display: flex; inline-size: 100%; }

/* ==========================================================================
   DS "Main Button" square variant (Figma Buttons 92:12 — rounded-lg 8px).
   Used on Shopper/Business/inner pages (16/24 SemiBold, h56, px32 py16).
   ========================================================================== */
.mada-btn-sq {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-3);
	padding-block: var(--space-5);              /* 16 */
	padding-inline: var(--space-9);             /* 32 */
	border: var(--border-width-thin) solid transparent;
	border-radius: var(--radius-lg);            /* 8 */
	font-weight: var(--fw-semibold);
	font-size: var(--fs-md);                    /* 16 */
	line-height: 24px;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.mada-btn-sq:hover,
.mada-btn-sq:focus-visible { text-decoration: none; }

.mada-btn-sq--navy {
	background-color: var(--color-vault-navy);
	color: var(--color-white);
}
.mada-btn-sq--navy:hover,
.mada-btn-sq--navy:focus,
.mada-btn-sq--navy:focus-visible { background-color: #0D3857; color: var(--color-white); } /* DS Main/Hover */

.mada-btn-sq--teal {
	background-color: var(--color-primary);
	color: var(--color-white);
}
.mada-btn-sq--teal:hover,
.mada-btn-sq--teal:focus,
.mada-btn-sq--teal:focus-visible { background-color: var(--color-vault-navy); color: var(--color-white); } /* feedback p9 */

.mada-btn-sq--outline {
	background-color: var(--color-white);
	border-color: var(--color-vault-navy);
	color: var(--color-vault-navy);
}
.mada-btn-sq--outline:hover,
.mada-btn-sq--outline:focus,
.mada-btn-sq--outline:focus-visible { border-color: var(--color-primary); color: var(--color-primary); }