/*!
 * Baly Digital — Home surface stylesheet.
 * The six homepage sections as real, namespaced, .bdg-scoped CSS — the
 * canonical replacement for the inline-style React snapshot that used to
 * live in pages/digital/home.html.
 *
 * Composes WITH baly-dg-kit.css (tokens + chrome): the home reuses the kit's
 * .trust-band (trust signals) and .catnav (category circles) verbatim, and
 * adds the home-only sections here:
 *   .eh      — editorial hero (blue band + search + fanned card cluster)
 *   .dgsec   — shared white "card section" surface (rail wrapper)
 *   .hot     — hot-deals rail ("أقوى العروض")
 *   .crow    — per-category card rails
 *
 * Every Baly Digital page wraps its output in
 *   <div class="bdg bdg--home" dir="rtl">…</div>
 * so the kit's custom properties resolve by inheritance.
 */

/* ── Shared white card-section surface (rails sit on this) ───── */
.bdg .dgsec {
	background: #fff;
	border-radius: 24px;
	padding: 22px;
	border: 1px solid var(--color-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);
}

/* The page main column — a vertical stack of sections. */
.bdg--home .dg-home {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding-block: 24px 40px;
}

/* ════════════════════════════════════════════════════════════
   EDITORIAL HERO  (.eh)
   ════════════════════════════════════════════════════════════ */
.bdg .eh {
	position: relative;
	z-index: 20; /* lift the hero (and its overflowing search dropdown) above the sections below */
	overflow: visible; /* let the hero search-suggestions dropdown escape; .eh__art clips itself */
	border-radius: 30px;
	color: #fff;
	direction: rtl;
	min-height: 372px;
	background: linear-gradient(160deg, #00237A 0%, #0043FF 58%, #2F62FF 100%);
	box-shadow: 0 28px 60px -26px rgba(0,30,80,.5);
}
/* Clipped background-art layer (mirrors .eh__inner's grid) — holds the dotted
   texture, glow, and the fanned card cluster, so .eh can stay overflow:visible. */
.bdg .eh__art { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; }
.bdg .eh__artgrid { height: 100%; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 24px; min-height: 372px; padding: 0 56px; }
.bdg .eh__dots {
	position: absolute; inset: 0; z-index: 0; opacity: .32;
	background-image: radial-gradient(rgba(255,255,255,.18) 1.4px, transparent 1.4px);
	background-size: 30px 30px;
}
.bdg .eh__glow {
	position: absolute; inset: 0; z-index: 0;
	background: radial-gradient(circle at 50% 8%, rgba(120,160,255,.4), transparent 52%);
}
.bdg .eh__inner {
	position: relative; z-index: 2;
	display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 24px;
	min-height: 372px; padding: 0 56px;
}
.bdg .eh__copy { text-align: start; }
.bdg .eh__title {
	margin: 0 0 14px; font-weight: var(--font-super); font-size: 52px; line-height: 1.05;
	text-shadow: 0 2px 22px rgba(1,16,70,.5);
}
.bdg .eh__title .accent { color: var(--color-accent-yellow, #FFE15E); }
.bdg .eh__sub {
	margin: 0; max-width: 440px; font-size: var(--text-base); line-height: 1.6; font-weight: var(--font-medium);
	color: rgba(255,255,255,.92); text-shadow: 0 1px 14px rgba(1,16,70,.45);
}
.bdg .eh__search { margin-top: 30px; max-width: 520px; }

/* Hero search field — the unified Search pill at hero scale. */
.bdg .eh-search {
	display: flex; flex-direction: row-reverse; align-items: center; gap: 16px;
	background: #fff; border: 1px solid var(--border-default); border-radius: var(--radius-pill);
	box-shadow: var(--shadow-1); padding: 10px 14px;
}
.bdg .eh-search__puck {
	width: 56px; height: 56px; flex: none; border-radius: var(--radius-pill);
	background: var(--color-brand-lighter); color: var(--color-brand);
	display: grid; place-items: center;
}
.bdg .eh-search__puck svg { width: 24px; height: 24px; }
.bdg .eh-search__t { flex: 1; min-width: 0; color: var(--fg-secondary); font-weight: var(--font-medium); font-size: 20px; text-align: right; }

/* Fanned brand-card cluster (desktop right column). */
.bdg .eh__stack { position: relative; width: 320px; height: 300px; direction: ltr; margin: 0 auto; transform: translateX(-12px); }
.bdg .eh__card {
	position: absolute; inset-inline-start: 50%; top: 50%; width: 220px; height: 140px; border-radius: 18px;
	border: 1px solid rgba(255,255,255,.2); padding: 14px 18px; color: #fff;
	display: flex; flex-direction: column; justify-content: space-between;
	box-shadow: 0 22px 44px -14px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.28);
}
.bdg .eh__card .eh__card-top { display: flex; align-items: center; justify-content: space-between; }
.bdg .eh__card .eh__card-lbl { font-size: 15px; font-weight: var(--font-black); opacity: .92; }
.bdg .eh__card .eh__card-gl { font-size: 28px; line-height: 1; }
.bdg .eh__card .eh__card-num { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; opacity: .8; }
.bdg .eh__card--1 { transform: translate(calc(-50% - 40px), calc(-50% + 40px)) rotate(-16deg); background: linear-gradient(135deg,#FFE15E,#D49600); color: #1F1500; z-index: 0; }
.bdg .eh__card--2 { transform: translate(calc(-50% + 0px),  calc(-50% + 16px)) rotate(-4deg);  background: linear-gradient(135deg,#2C3E70,#14213F); color: #E8EDFF; z-index: 1; }
.bdg .eh__card--3 { transform: translate(calc(-50% + 36px), calc(-50% - 8px))  rotate(10deg);  background: linear-gradient(135deg,#36C480,#157A45); z-index: 2; }
.bdg .eh__card--4 { transform: translate(calc(-50% + 70px), calc(-50% - 32px)) rotate(20deg);  background: linear-gradient(135deg,#F58A6A,#C84032); z-index: 3; }

/* ════════════════════════════════════════════════════════════
   HOT DEALS RAIL  (.hot)  — "أقوى العروض"
   ════════════════════════════════════════════════════════════ */
.bdg .hot__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; direction: rtl; margin-bottom: 14px; }
.bdg .hot__lead { display: flex; align-items: center; gap: 11px; }
.bdg .hot__flame { flex: none; display: grid; place-items: center; filter: drop-shadow(0 3px 6px rgba(255,77,77,.35)); }
.bdg .hot__flame svg { width: 30px; height: 30px; display: block; transform-origin: 50% 88%; animation: bcHotFlicker 1.5s ease-in-out infinite; }
.bdg .hot__title { margin: 0; font-weight: var(--font-black); font-size: 22px; color: var(--color-black); line-height: 1.1; }
.bdg .hot__sub { font-weight: var(--font-semibold); font-size: 12.5px; color: var(--fg-secondary); }
.bdg .hot__more { display: inline-flex; align-items: center; gap: 4px; color: var(--color-brand); font-size: 13px; font-weight: var(--font-bold); white-space: nowrap; }
.bdg .hot__more svg { width: 14px; height: 14px; transition: transform var(--duration-fast, .15s); }
.bdg .hot__more:hover svg { transform: translateX(-3px); }

.bdg .hot__rail, .bdg .crow__rail {
	display: flex; gap: 10px; overflow-x: auto;
	padding: 20px 14px 22px; margin: -20px -14px -14px;
	scroll-snap-type: x mandatory; scroll-padding-inline: 14px;
	-webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none;
}
.bdg .hot__rail::-webkit-scrollbar, .bdg .crow__rail::-webkit-scrollbar { display: none; }

.bdg .deal {
	position: relative; flex: none; width: 200px; scroll-snap-align: start; cursor: pointer; text-align: center;
	background: #fff; border: 1px solid var(--color-grey-100); border-radius: 18px; padding: 14px;
	display: flex; flex-direction: column; align-items: center; gap: 12px;
	box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 8px 20px -16px rgba(0,0,0,.12);
	transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.bdg .deal:hover { transform: translateY(-3px); box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 18px 36px -18px rgba(0,30,80,.30); }
.bdg .deal__media {
	position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: var(--radius-lg); overflow: hidden;
	background: #fff; border: 1px solid var(--color-grey-100); display: grid; place-items: center;
}
.bdg .deal__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.bdg .deal__badge {
	position: absolute; top: 8px; inset-inline-start: 8px; z-index: 2;
	font-size: 10.5px; font-weight: var(--font-black); padding: 3px 8px; border-radius: var(--radius-pill);
	color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.14); white-space: nowrap;
}
.bdg .deal__badge--pct  { background: var(--color-brand); }
.bdg .deal__badge--low  { background: var(--color-error); }
.bdg .deal__badge--excl { background: #7C2C8F; }
.bdg .deal__name { font-size: 13px; font-weight: var(--font-black); color: var(--color-black); line-height: 1.25; direction: rtl; }
.bdg .deal__meta { margin-top: auto; width: 100%; display: flex; flex-direction: column; gap: 11px; }
.bdg .deal__divider { height: 0; border-top: 1.5px dashed var(--color-grey-200); }
.bdg .deal__price { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; direction: rtl; }
.bdg .deal__lead { display: inline-flex; align-items: baseline; gap: 6px; font-size: 11px; font-weight: var(--font-semibold); color: var(--color-grey-500); white-space: nowrap; }
.bdg .deal__old { text-decoration: line-through; color: var(--color-grey-400); font-size: 11px; }
.bdg .deal__new { font-size: 15px; font-weight: var(--font-black); color: var(--color-brand); white-space: nowrap; }

/* ════════════════════════════════════════════════════════════
   CATEGORY ROWS  (.crow)  — one rail per category
   ════════════════════════════════════════════════════════════ */
.bdg .crow + .crow { margin-top: 18px; }
.bdg .crow__head { display: flex; align-items: center; justify-content: space-between; direction: rtl; margin-bottom: 14px; }
.bdg .crow__lead { display: flex; align-items: center; gap: 10px; }
.bdg .crow__ic { flex: none; display: grid; place-items: center; }
.bdg .crow__title { margin: 0; font-weight: var(--font-black); font-size: 22px; color: var(--color-black); }
.bdg .crow__more { display: inline-flex; align-items: center; gap: 4px; color: var(--color-brand); font-size: 13px; font-weight: var(--font-bold); white-space: nowrap; }
.bdg .crow__more svg { width: 14px; height: 14px; transition: transform var(--duration-fast, .15s); }
.bdg .crow__more:hover svg { transform: translateX(-3px); }

.bdg .soft {
	position: relative; flex: none; width: 150px; scroll-snap-align: start; cursor: pointer;
	background: #fff; border-radius: 20px; padding: 16px;
	display: flex; flex-direction: column; align-items: center; gap: 12px;
	box-shadow: var(--shadow-1); transition: transform .2s, box-shadow .2s;
}
.bdg .soft:hover { transform: translateY(-3px); box-shadow: var(--shadow-3); }
.bdg .soft__media { width: 108px; height: 108px; border-radius: var(--radius-lg); overflow: hidden; background: #fff; flex: none; }
.bdg .soft__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bdg .soft__name { font-size: 14.5px; font-weight: var(--font-black); color: var(--color-black); line-height: 1.25; direction: rtl; text-align: center; }
.bdg .soft__badge {
	position: absolute; top: 10px; inset-inline-start: 10px; z-index: 2;
	display: inline-flex; align-items: center; font-size: 10.5px; font-weight: var(--font-black);
	padding: 3px 8px; border-radius: var(--radius-pill); color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.14);
}
.bdg .soft__badge--disc  { background: var(--color-brand); }
.bdg .soft__badge--excl  { background: #7C2C8F; }
.bdg .soft__badge--low   { background: var(--color-error); }
.bdg .soft__badge--value { background: var(--color-success); }

/* Download band removed — the home now renders the UNIVERSAL .bsy-dl band
   (theme shared chrome CSS, bch-chrome.css). See Home/Module.php
   render_download_band(). */

/* ════════════════════════════════════════════════════════════
   ANIMATIONS — flame (hot deals) + animated category glyphs (dga-*)
   Baked from components/digital/dg-icons.js ANIM_CSS so the static
   page keeps the motion without the runtime injector.
   ════════════════════════════════════════════════════════════ */
@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); }
}
[class^="dga-"] { transform-box: fill-box; }
.dga-bar { transform-origin: bottom; animation: dgaBar 1.5s ease-in-out infinite; }
.dga-bar.b2 { animation-delay: .18s; } .dga-bar.b3 { animation-delay: .36s; }
@keyframes dgaBar { 0%,100% { transform: scaleY(.5); } 45% { transform: scaleY(1); } }
.dga-arc { transform-origin: center bottom; animation: dgaWifi 1.8s ease-in-out infinite; }
.dga-arc.a2 { animation-delay: .2s; } .dga-arc.a3 { animation-delay: .4s; }
@keyframes dgaWifi { 0%,100% { opacity: .3; transform: scale(.9); } 50% { opacity: 1; transform: scale(1); } }
.dga-pad { transform-origin: center; animation: dgaBob 2.2s ease-in-out infinite; }
@keyframes dgaBob { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-2px) rotate(-5deg); } }
.dga-play { transform-origin: center; animation: dgaThrob 1.6s ease-in-out infinite; }
@keyframes dgaThrob { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.dga-sq { transform-origin: center; animation: dgaTwinkle 1.8s ease-in-out infinite; }
.dga-sq.s2 { animation-delay: .2s; } .dga-sq.s3 { animation-delay: .6s; } .dga-sq.s4 { animation-delay: .4s; }
@keyframes dgaTwinkle { 0%,100% { opacity: .4; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }
.dga-heart { transform-origin: center; animation: dgaBeat 1.7s ease-in-out infinite; }
@keyframes dgaBeat { 0%,100% { transform: scale(1); } 14% { transform: scale(1.18); } 28% { transform: scale(1); } 42% { transform: scale(1.12); } 56% { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
	.bdg .hot__flame svg { animation: none; }
	[class^="dga-"] { animation: none !important; }
	.dga-arc, .dga-sq { opacity: 1; }
}

/* ════════════════════════════════════════════════════════════
   CATEGORY BENTO ACCENTS  — per-category circle tint for kit .catnav__ic.
   Mirrors CAT_ACCENT (games #2F6BFF · fun #8B5CF6 · mobile #10B981 ·
   internet #06B6D4 · services #F59E0B · donate #F43F5E).
   ════════════════════════════════════════════════════════════ */
.bdg .catnav__ic--mobile   { background: radial-gradient(circle at 50% 36%, rgba(16,185,129,.22) 0%, rgba(16,185,129,.11) 100%);  --acc-sh: rgba(16,185,129,.55); }
.bdg .catnav__ic--internet { background: radial-gradient(circle at 50% 36%, rgba(6,182,212,.22) 0%, rgba(6,182,212,.11) 100%);    --acc-sh: rgba(6,182,212,.55); }
.bdg .catnav__ic--games    { background: radial-gradient(circle at 50% 36%, rgba(47,107,255,.22) 0%, rgba(47,107,255,.11) 100%);  --acc-sh: rgba(47,107,255,.55); }
.bdg .catnav__ic--fun      { background: radial-gradient(circle at 50% 36%, rgba(139,92,246,.22) 0%, rgba(139,92,246,.11) 100%);  --acc-sh: rgba(139,92,246,.55); }
.bdg .catnav__ic--services { background: radial-gradient(circle at 50% 36%, rgba(245,158,11,.22) 0%, rgba(245,158,11,.11) 100%);  --acc-sh: rgba(245,158,11,.55); }
.bdg .catnav__ic--donate   { background: radial-gradient(circle at 50% 36%, rgba(244,63,94,.22) 0%, rgba(244,63,94,.11) 100%);    --acc-sh: rgba(244,63,94,.55); }

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
	.bdg--home .dg-home { gap: 18px; padding-block: 14px 26px; }
	.bdg .eh { border-radius: 22px; min-height: 0; }
	.bdg .eh__inner { grid-template-columns: 1fr; min-height: 0; padding: 24px 20px; text-align: center; }
	.bdg .eh__artgrid { grid-template-columns: 1fr; min-height: 0; padding: 24px 20px; }
	.bdg .eh__copy { text-align: center; }
	.bdg .eh__title { font-size: 32px; }
	.bdg .eh__sub { margin-inline: auto; font-size: 13.5px; }
	.bdg .eh__search { margin-inline: auto; }
	.bdg .eh-search__t { font-size: 17px; }
	.bdg .eh__stack { display: none; }
	.bdg .dgsec { border-radius: 18px; padding: 16px; }
	.bdg .hot__title, .bdg .crow__title { font-size: 18px; }
	.bdg .deal { width: 168px; padding: 12px; }
	.bdg .soft { width: 116px; padding: 12px; }
	.bdg .soft__media { width: 88px; height: 88px; }
}