/*
 * IW button — pill button reusable site-wide.
 * Design source: Figma 1642:47686 / 258:4727 (T3 orange variant shown).
 *
 * Color tokens consumed (defined in global/base.css + t{N}/base.css):
 *   --iw-cta-grad-from / --iw-cta-grad-to  → pill gradient (fallback accent)
 *   --iw-accent / --iw-accent-strong       → fallback + secondary/ghost color
 *   --iw-accent-fg                         → primary text (white)
 *
 * Halo border (5px màu accent 12% alpha) thay vì hardcoded rgba(220,38,38).
 * color-mix() được mọi modern browser support; an toàn không cần fallback.
 *
 * Variants:
 *   .iw-btn--primary    — gradient theo template (T1 xanh, T2 hồng, T3 cam, …)
 *   .iw-btn--secondary  — nền trắng + chữ + border = accent
 *   .iw-btn--outline    — trong suốt + chữ trắng + border trắng (overlay tối)
 *   .iw-btn--ghost      — trong suốt + chữ accent, no border
 */

.iw-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 13px 24px;
	font-weight: 700;
	font-size: 16px;
	line-height: 22px;
	border: 1px solid transparent;
	border-radius: 999px;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: background .18s ease, color .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.iw-btn:hover,
.iw-btn:focus-visible {
	text-decoration: none;
}

/* Primary — follow `.pdh-card-t3__cta` (xem t3/card.css:179-210).
   Rest: gradient theo template + ring mờ ngoài (5px box-shadow alpha 12%).
   Hover: đảo — nền trắng, viền + chữ accent, bỏ ring. */
.iw-btn--primary {
	background: linear-gradient(
		180deg,
		var(--iw-cta-grad-from, var(--iw-accent, #ff8f4b)),
		var(--iw-cta-grad-to,   var(--iw-accent-strong, #ff5c00))
	);
	color: #fff;
	box-shadow: 0 0 0 5px color-mix(in srgb, var(--iw-accent, #f56011) 12%, transparent);
}

.iw-btn--primary:hover,
.iw-btn--primary:focus-visible {
	border-color: var(--iw-accent, #f56011);
	background: #fff;
	color: var(--iw-accent, #f56011);
	box-shadow: none;
}

/* Secondary — nền trắng + chữ accent + border accent. */
.iw-btn--secondary {
	background: #fff;
	color: var(--iw-accent);
	border: 2px solid var(--iw-accent);
}

.iw-btn--secondary:hover,
.iw-btn--secondary:focus-visible {
	background: var(--iw-accent);
	color: var(--iw-accent-fg, #fff);
	filter: none;
}

/* Outline — trong suốt + chữ trắng + border trắng (overlay banner tối,
   không phụ thuộc template). */
.iw-btn--outline {
	background: transparent;
	color: #fff;
	border: 2px solid #fff;
}

.iw-btn--outline:hover,
.iw-btn--outline:focus-visible {
	background: #fff;
	color: #252525;
	filter: none;
}

/* Ghost — trong suốt + chữ accent, no border. */
.iw-btn--ghost {
	background: transparent;
	color: var(--iw-accent);
	border: none;
	padding: 8px 12px;
}

.iw-btn--ghost:hover,
.iw-btn--ghost:focus-visible {
	background: color-mix(in srgb, var(--iw-accent) 8%, transparent);
	color: var(--iw-accent);
	filter: none;
}

@media (max-width: 540px) {
	.iw-btn {
		font-size: 14px;
		padding: 11px 20px;
	}
}