/* ============================================================
   promo-codes — page chrome for [baly_promo_codes]
   Composition from templates/promo-codes-page/PromoCodesPage.dc.html.
   The ticket itself lives in bsy-promo.css (component, ported verbatim from
   components/baly-iq/bsy-promo.css so tools/ds-reconcile.sh can diff it).
   The template carries its styling inline, as canvas templates do; it is
   re-expressed here as classes on --bsy-* tokens.
   ============================================================ */

.bsy-promo-page {
	direction: rtl;
	font-family: var(--bsy-font);
	color: var(--bsy-fg-primary);
	background: var(--bsy-white);
}
.bsy-promo-page__main { max-width: 1160px; margin-inline: auto; padding: 56px 28px 72px; }
/* Inside the theme's 1320px .baly-shell the gutters are already supplied
   (padding-inline: clamp(16px,5vw,48px)), so zero ours or they double up —
   the same treatment the theme gives .bsy-page__stack and .baly-blog-scope. */
.baly-shell .bsy-promo-page__main { padding-inline: 0; }

/* ── Hero ───────────────────────────────────────────────────── */
.bsy-promo-hero {
	/* Gradient stops are specified by the design template. The brand start is
	   the token; the two lighter stops exist only here. */
	--bsy-promo-hero-2: #2E5BFF;
	--bsy-promo-hero-3: #4070FF;
	position: relative; overflow: hidden;
	border-radius: var(--bsy-radius-3xl);
	background: linear-gradient(135deg, var(--bsy-brand) 0%, var(--bsy-promo-hero-2) 60%, var(--bsy-promo-hero-3) 100%);
	box-shadow: 0 24px 50px -22px rgba(0, 45, 140, .45);
	padding: 48px 44px;
	margin-bottom: 36px;
}
/* Faint 40px graph-paper grid, purely decorative. */
.bsy-promo-hero__grid {
	position: absolute; inset: 0; pointer-events: none;
	background-image:
		repeating-linear-gradient(to bottom, rgba(255,255,255,.06) 0 1px, transparent 1px 40px),
		repeating-linear-gradient(to right,  rgba(255,255,255,.06) 0 1px, transparent 1px 40px);
}
.bsy-promo-hero__body { position: relative; display: flex; flex-direction: column; gap: 16px; max-width: 66ch; }
.bsy-promo-hero__title {
	margin: 0; color: var(--bsy-white);
	font-size: clamp(30px, 3.2vw, 50px); font-weight: 950; line-height: 1.03;
}
.bsy-promo-hero__intro {
	margin: 0; color: rgba(255, 255, 255, .84);
	font-size: var(--bsy-text-base); font-weight: var(--bsy-fw-medium);
	line-height: 1.65; text-wrap: pretty;
}

/* ── Service filter ─────────────────────────────────────────── */
/* Rendered only when the visible codes span more than one service — with a
   single service every pill would be a no-op. */
.bsy-promo-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 20px; }
.bsy-promo-filter {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 9px 16px; border-radius: var(--bsy-radius-pill);
	border: 1.5px solid var(--bsy-border-default);
	background: var(--bsy-white); color: var(--bsy-fg-primary);
	font-family: inherit; font-size: var(--bsy-text-sm); font-weight: var(--bsy-fw-bold);
	text-decoration: none; cursor: pointer;
	transition: border-color 150ms ease-out;
}
.bsy-promo-filter:hover { border-color: var(--bsy-brand); }
.bsy-promo-filter svg { width: 14px; height: 14px; flex: none; }
.bsy-promo-filter__count { font-weight: var(--bsy-fw-medium); opacity: .6; }
.bsy-promo-filter--on {
	border-color: var(--bsy-brand); background: var(--bsy-brand); color: var(--bsy-white);
}
.bsy-promo-filter--on .bsy-promo-filter__count { opacity: .75; }

/* ── Empty state ────────────────────────────────────────────── */
.bsy-promo-empty {
	border: 1.5px dashed var(--bsy-border-default);
	border-radius: var(--bsy-radius-xl);
	padding: 48px 28px; text-align: center;
	color: var(--bsy-fg-muted); font-size: var(--bsy-text-base); font-weight: var(--bsy-fw-medium);
}

@media (max-width: 620px) {
	.bsy-promo-page__main { padding: 32px 18px 56px; }
	.bsy-promo-hero { padding: 32px 22px; border-radius: var(--bsy-radius-2xl); }
}

@media (prefers-reduced-motion: reduce) {
	.bsy-promo-filter { transition: none; }
}