/*!
 * Baly Digital — Cards carousel ([baly_cards_carousel]).
 * Ported to the design system: a CatTitle row heading (blue bar + bold title
 * + "عرض الكل") over a horizontal rail of BrandCard tiles (white rounded card,
 * cover-filled logo tile, label, DBadge pills).
 *
 * Class names + DOM structure are unchanged — baly-cards-carousel.js binds to
 * [data-track] / [data-dir] / .baly-cards-carousel__card-image. Tokens from
 * baly-shared.css (--dg-*).
 */

.baly-cards-carousel {
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
	direction: rtl;
	font-family: var(--dg-font);
	/* Card-section surface — matches cardSection() used on the live digital pages. */
	background: #fff;
	border-radius: 24px;
	padding: 22px;
	border: 1px solid var(--dg-grey-100);
	box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 8px 24px -12px rgba(0,0,0,.10), 0 32px 60px -24px rgba(0,30,80,.12);
}

.baly-cards-carousel,
.baly-cards-carousel *,
.baly-cards-carousel *::before,
.baly-cards-carousel *::after { box-sizing: border-box; }

/* ── Header → CatTitle ──────────────────────────────────────── */
.baly-cards-carousel__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}

.baly-cards-carousel__title-wrap { display: flex; align-items: center; gap: 10px; }

.baly-cards-carousel__accent {
	width: 5px;
	height: 24px;
	border-radius: var(--dg-radius-pill);
	background: var(--dg-brand);
	flex: none;
}

.baly-cards-carousel__title {
	font-family: var(--dg-font);
	font-weight: 900;
	font-size: 22px;
	color: var(--dg-black);
}

.baly-cards-carousel__show-more {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--dg-brand);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.baly-cards-carousel__show-more span { transition: transform var(--dg-duration-fast); }
.baly-cards-carousel__show-more:hover span { transform: translateX(-3px); }

/* ── Rail ───────────────────────────────────────────────────── */
.baly-cards-carousel__viewport { position: relative; }

.baly-cards-carousel__track {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 4px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
	/* Vertical bleed keeps card shadows from being clipped by overflow-x;
	   pulled back with equal negative margins so the rail stays aligned. */
	padding: 20px 4px 40px;
	margin: -20px 0 -32px;
}

.baly-cards-carousel__track::-webkit-scrollbar { display: none; }

.baly-cards-carousel__item {
	position: relative;
	flex: none;
	width: 150px;
	scroll-snap-align: start;
	background: #fff;
	border: 1px solid var(--dg-grey-100);
	border-radius: 18px;
	padding: 14px 12px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 8px 20px -16px rgba(0,0,0,.12);
	transition: transform .2s var(--dg-ease-out), box-shadow .2s var(--dg-ease-out);
}

.baly-cards-carousel__item:hover {
	transform: translateY(-3px);
	box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 18px 36px -18px rgba(0,30,80,.30);
}

/* The clickable logo tile (LogoMark). */
.baly-cards-carousel__card {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: var(--dg-radius-lg);
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--dg-grey-100);
	display: grid;
	place-items: center;
	text-decoration: none;
	color: inherit;
}

.baly-cards-carousel__card-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.baly-cards-carousel__fallback-name {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	padding: 6px;
	text-align: center;
	font-weight: 900;
	font-size: 13px;
	color: var(--dg-grey-600);
	line-height: 1.2;
}

.baly-cards-carousel__fallback-name--hidden { display: none; }

/* Badges → DBadge pills, corners of the logo tile. */
.baly-cards-carousel__badges {
	position: absolute;
	top: 8px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	z-index: 2;
}

.baly-cards-carousel__badges--right { inset-inline-start: 8px; }
.baly-cards-carousel__badges--left { inset-inline-end: 8px; align-items: flex-end; }

.baly-cards-carousel__badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-family: var(--dg-font);
	font-size: 10.5px;
	font-weight: 800;
	padding: 3px 8px;
	border-radius: var(--dg-radius-pill);
	letter-spacing: 0.01em;
	box-shadow: 0 2px 6px rgba(0,0,0,.14);
	white-space: nowrap;
}

.baly-cards-carousel__item-name {
	font-family: var(--dg-font);
	font-size: 13px;
	font-weight: 800;
	line-height: 1.25;
	color: var(--dg-black);
	text-align: center;
	direction: rtl;
}

.baly-cards-carousel--message {
	padding: 16px 20px;
	border-radius: var(--dg-radius-lg);
	background: var(--dg-brand-lighter);
	color: var(--dg-grey-800);
	font-family: var(--dg-font);
}

/* ── Priced variant — "most sold" cards with a starting price ──── */
.baly-cards-carousel__item--priced { width: 200px; padding: 14px; gap: 12px; }

/* Wider cards cast a wider shadow — give the rail more inline room so the
   first/last card's shadow isn't clipped by the track's overflow-x. */
.baly-cards-carousel--priced .baly-cards-carousel__track { padding: 20px 20px 40px; }

/* Priced header: animated flame icon + title + subtitle (replaces accent bar). */
.baly-cards-carousel--priced .baly-cards-carousel__title-wrap { align-items: center; gap: 11px; }
.baly-cards-carousel__titles { display: flex; flex-direction: column; gap: 1px; }
.baly-cards-carousel__subtitle { font-family: var(--dg-font); font-size: 12.5px; font-weight: 600; color: var(--dg-grey-500); }
.baly-cards-carousel__hot { flex: none; display: grid; place-items: center; }
.baly-cards-carousel__hot svg {
	width: 30px; height: 30px; display: block;
	transform-origin: 50% 88%;
	filter: drop-shadow(0 3px 6px rgba(255,77,77,.35));
	animation: bcHotFlicker 1.5s ease-in-out infinite;
}
@keyframes bcHotFlicker {
	0%, 100% { transform: scale(1) rotate(0deg); }
	25% { transform: scale(1.09) rotate(-3deg); }
	55% { transform: scale(0.95) rotate(2deg); }
	80% { transform: scale(1.05) rotate(-1deg); }
}
@media (prefers-reduced-motion: reduce) {
	.baly-cards-carousel__hot svg { animation: none; }
}

/* Brand-blue badge (the priced cards use blue, not the red discount pill). */
.baly-cards-carousel__badge--brand { background: var(--dg-brand); color: #fff; }

/* Meta block under the tile: dashed divider + price row. */
.baly-cards-carousel__meta { width: 100%; display: flex; flex-direction: column; gap: 11px; }
.baly-cards-carousel__divider { height: 0; border-top: 1.5px dashed var(--dg-grey-200); }
.baly-cards-carousel__price { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; direction: rtl; }
.baly-cards-carousel__price-lead { display: inline-flex; align-items: baseline; gap: 6px; font-size: 11px; font-weight: 600; color: var(--dg-grey-500); white-space: nowrap; }
.baly-cards-carousel__price-old { text-decoration: line-through; color: var(--dg-grey-400); font-size: 11px; }
.baly-cards-carousel__price-new { font-size: 15px; font-weight: 900; color: var(--dg-brand); white-space: nowrap; }

@media (max-width: 768px) {
	.baly-cards-carousel__title { font-size: 18px; }
	.baly-cards-carousel__accent { height: 20px; }
	.baly-cards-carousel__item { width: 118px; padding: 10px 8px; }
	.baly-cards-carousel__item--priced { width: 168px; padding: 12px; }
}