/* =====================================================================
 * SHAHAZ.com — LED Promotional Banner (template-parts/home/00-led-banner.php)
 *
 * ZIP-252 (owner reference): a glossy black TV with slightly rounded corners stands on two slim legs in
 * a bright room — wall in the middle, plants and lamps at the sides, marble floor below. Space around the
 * TV makes it look set back against the wall.
 *   room   = .shz-led background (theme WebP 960 / 1600 px, or the owner's upload through --led-room-*), placed
 *            so the feet stand on the raised platform at every width (--room-row);
 *            a warm wall colour shows first, so the TV (and its image, the LCP) never waits for it.
 *   TV     = .shz-led__tv: width --tv-w; the frame is a black glass bezel (--led-rim) around the pink
 *            top bar (lights + scrolling announcements) and the 5 : 2 display (uploaded image / video).
 *   stand  = inline SVG legs + a soft floor shadow.
 * Every inner size follows --led-h (frame height) = TV width / 2.15.
 * ===================================================================== */
.shz-led{
	--tv-w:min(56vw,860px);
	--led-h:calc(var(--tv-w) / 2.15);
	--led-top:max(22px,calc(var(--led-h) * .13));
	--led-r:8px;
	--led-rim:max(5px,calc(var(--led-h) * .03));
	--stand-h:max(18px,calc(var(--led-h) * .11));
	--pad-t:clamp(14px,3.2vw,46px);
	--pad-b:clamp(16px,3.4vw,52px);
	/* The TV's feet stand on the raised marble platform: row 80 % of the room picture is placed exactly
	   under the feet (the picture is scaled just enough to also cover the whole width). */
	--feet:calc(var(--pad-t) + var(--led-h) + var(--stand-h));
	--room-row:.8;
	--room-h:max(calc(100vw / var(--room-ar,1.7778)),calc(var(--feet) / var(--room-row))); /* ZIP-548: --room-ar = the picture's width / height → it always covers the full width */
	position:relative;
	z-index:2;
	box-sizing:border-box;
	display:flex;
	justify-content:center;
	width:100%;
	max-width:100%;
	margin:0 0 4px !important;
	padding:var(--pad-t) 0 var(--pad-b);
	overflow:hidden;
	line-height:1;
	background-color:#fff; /* ZIP-374 (owner): white around the room picture, not beige */
	background-image:var(--led-room-lg,url("../images/home/led-room-1600.webp"));
	background-repeat:no-repeat;
	background-size:auto var(--room-h);
	background-position:center calc(var(--feet) - var(--room-h) * var(--room-row));
}
.shz-led *,.shz-led *::before,.shz-led *::after{box-sizing:border-box;}
@media (max-width:1023px){.shz-led{--tv-w:calc(100vw - 30px);}} /* ZIP-536 (owner): the TV reaches 15 px from each screen edge on phones and tablets */
@media (max-width:640px){
	.shz-led{--tv-w:calc(100vw - 30px);--led-rim:4px;--led-r:6px;--pad-t:18px;--pad-b:22px;background-image:var(--led-room-sm,url("../images/home/led-room-960.webp"));}
}

/* ---------- TV: black glass bezel ---------- */
.shz-led__tv{position:relative;width:var(--tv-w);padding-bottom:var(--stand-h);}
.shz-led__frame{
	position:relative;
	z-index:1;
	height:var(--led-h);
	overflow:hidden;
	isolation:isolate;
	border-radius:var(--led-r);
	background:
		linear-gradient(160deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,.04) 28%,rgba(255,255,255,0) 29%),
		linear-gradient(180deg,#2b2b31 0%,#0b0b0e 40%,#020203 100%);
	box-shadow:
		0 0 0 1px rgba(255,255,255,.08),
		inset 0 1px 0 rgba(255,255,255,.35),
		inset 0 -1px 0 rgba(255,255,255,.08),
		0 18px 28px -14px rgba(40,25,10,.55),
		0 4px 10px rgba(40,25,10,.25);
}
/* glass sheen across the whole TV */
.shz-led__frame::after{
	content:"";position:absolute;inset:0;z-index:6;pointer-events:none;border-radius:inherit;
	background:linear-gradient(115deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,0) 32%,rgba(255,255,255,0) 70%,rgba(255,255,255,.05) 100%);
}

/* ---------- Stand + floor shadow ---------- */
.shz-led__stand{position:absolute;left:0;right:0;bottom:0;z-index:0;display:block;width:100%;height:var(--stand-h);overflow:visible;}
.shz-led__shadow{
	position:absolute;left:4%;right:4%;bottom:calc(var(--stand-h) * -.18);z-index:-1;height:calc(var(--stand-h) * .55);
	border-radius:50%;background:radial-gradient(ellipse at center,rgba(40,25,10,.38) 0%,rgba(40,25,10,.12) 55%,rgba(40,25,10,0) 72%);
	pointer-events:none;
}

/* ---------- Top bar ---------- */
.shz-led__top{
	position:absolute;left:var(--led-rim);right:var(--led-rim);top:var(--led-rim);z-index:3;
	height:var(--led-top);
	/* glassy bar: sharp white gloss on the upper half, saturated colours below */
	background:
		linear-gradient(180deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,.18) 44%,rgba(255,255,255,0) 45%),
		linear-gradient(90deg,#6d0a2c 0%,#7b1fa2 7%,#c2006b 14%,#ff1493 22%,#ff1493 78%,#c2006b 86%,#7b1fa2 93%,#6d0a2c 100%);
	box-shadow:inset 0 1.5px 0 #ffd36b,inset 0 -1.5px 0 #ffb43c;
	border-radius:calc(var(--led-r) - 3px) calc(var(--led-r) - 3px) 0 0;
}

/* Lights — ZIP-570: three raised push-button lamps. A gold bezel, a hard (no blur) side wall underneath so each
   lamp stands out of the bar like a button, a clear lens with a bright core and a crisp highlight, and a soft
   radial-gradient halo behind so it reads as a lit light (no blur filter, no fuzzy shadow). */
.shz-led__lights{
	position:absolute !important;left:max(calc(var(--led-r) * .75),4%);top:50%;
	display:flex !important;align-items:center;gap:calc(var(--led-top) * .26);
	transform:translateY(-50%);isolation:isolate;
}
.shz-led__lights i{
	position:relative;display:block !important;flex:0 0 auto;box-sizing:border-box;
	width:calc(var(--led-top) * .4) !important;height:calc(var(--led-top) * .64) !important;
	margin-top:-2px;border-radius:999px;border:1.5px solid #ffe29a;
	background:
		radial-gradient(34% 12% at 50% 17%,#fff 0 50%,rgba(255,255,255,0) 100%),
		radial-gradient(42% 24% at 50% 62%,var(--lc-core) 0 30%,rgba(255,255,255,0) 100%),
		linear-gradient(180deg,var(--lc-hi) 0%,var(--lc) 38%,var(--lc) 70%,var(--lc-lo) 100%);
	box-shadow:inset 0 0 0 1px rgba(255,255,255,.4),0 0 0 1px #8a5a00,0 2.5px 0 1px var(--lc-wall),0 3px 0 1px #3a0018;
}
.shz-led__lights i::before{
	content:"";position:absolute;left:-95%;right:-95%;top:-55%;bottom:-55%;z-index:-1;border-radius:50%;
	background:radial-gradient(closest-side,rgba(var(--lc-rgb),.85) 0%,rgba(var(--lc-rgb),.4) 50%,rgba(var(--lc-rgb),0) 100%);
	pointer-events:none;
}
.shz-led__lights .is-red{--lc:#ff1238;--lc-hi:#ff6f88;--lc-lo:#9c0019;--lc-core:#ffc9d3;--lc-wall:#6e0016;--lc-rgb:255,40,80;}
.shz-led__lights .is-yellow{--lc:#ffbf00;--lc-hi:#ffe066;--lc-lo:#b37a00;--lc-core:#fff4b8;--lc-wall:#7a5200;--lc-rgb:255,205,30;}
.shz-led__lights .is-green{--lc:#00d983;--lc-hi:#6cf5bd;--lc-lo:#00784a;--lc-core:#c8ffe8;--lc-wall:#004d2e;--lc-rgb:30,230,150;}

/* Gold dot grids (outside each swoosh) */
.shz-led__dots{
	position:absolute !important;top:18%;display:block !important;
	width:4.6% !important;height:64% !important;
	background-image:radial-gradient(circle,#ffe39a 1.1px,rgba(255,227,154,0) 1.7px);
	background-size:calc(var(--led-top) * .17) calc(var(--led-top) * .17);
}
.shz-led__dots--l{left:15.8%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 70%);mask-image:linear-gradient(90deg,transparent,#000 70%);}
.shz-led__dots--r{right:15.8%;-webkit-mask-image:linear-gradient(90deg,#000 30%,transparent);mask-image:linear-gradient(90deg,#000 30%,transparent);}

/* Curved gold swooshes hugging the display ends ("\" left, "/" right) */
.shz-led__swoosh{
	position:absolute !important;top:6%;display:block !important;
	width:calc(var(--led-top) * .9) !important;height:88% !important;
	background:linear-gradient(115deg,#fff6cf 0%,#f6c24a 40%,#d9951a 70%,#ffe39a 100%);
	box-shadow:0 0 4px rgba(255,200,90,.7);
}
.shz-led__swoosh--l{
	left:calc(22% - var(--led-top) * .78);
	clip-path:polygon(0 0,22% 0,40% 10%,58% 35%,74% 66%,88% 90%,100% 100%,74% 100%,62% 88%,46% 62%,30% 34%,14% 10%);
}
.shz-led__swoosh--r{
	right:calc(22% - var(--led-top) * .78);
	clip-path:polygon(100% 0,78% 0,60% 10%,42% 35%,26% 66%,12% 90%,0 100%,26% 100%,38% 88%,54% 62%,70% 34%,86% 10%);
}

/* Black LED announcement display: 22% → 78%, 72% of the bar height.
 * Both ends are slanted (wider at the top): left end "\", right end "/",
 * with a gold edge — the owner's marked shape, not a rounded capsule. */
.shz-led__display{
	--slant:calc(var(--led-top) * .42);
	position:absolute !important;left:22%;right:22%;top:14%;z-index:1;
	display:flex !important;align-items:center;gap:6px;
	height:72% !important;width:auto !important;min-width:0;
	padding:0 calc(var(--slant) + 4px);
	background:linear-gradient(90deg,#f6c24a,#ffe39a 50%,#f6c24a);
	clip-path:polygon(0 0,100% 0,calc(100% - var(--slant)) 100%,var(--slant) 100%);
	filter:drop-shadow(0 0 4px rgba(255,63,174,.55));
}
.shz-led__display::before{
	content:"";position:absolute;inset:1.5px;z-index:-1;
	background:
		radial-gradient(circle,rgba(255,255,255,.09) .6px,transparent .9px) 0 0/3px 3px,
		linear-gradient(180deg,#1a0b14 0%,#030102 55%,#10060c 100%);
	clip-path:polygon(0 0,100% 0,calc(100% - var(--slant) + 1px) 100%,calc(var(--slant) - 1px) 100%);
}
.shz-led__chev{flex:0 0 auto;color:#ff8fd0;font-size:calc(var(--led-top) * .26);letter-spacing:-1px;text-shadow:0 0 4px #ff3fae;}
.shz-led__viewport{
	position:relative;flex:1 1 auto;min-width:0;height:100%;overflow:hidden;
	-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.shz-led__track{
	position:absolute;left:0;top:0;display:flex;height:100%;width:max-content;
	will-change:transform;
	animation:shzLedMarquee 60s linear infinite; /* duration set by JS (px/s) */
}
.shz-led__group{display:flex;align-items:center;flex:0 0 auto;height:100%;}
@keyframes shzLedMarquee{from{transform:translate3d(0,0,0);}to{transform:translate3d(-50%,0,0);}}
.shz-led__ann{display:inline-flex;align-items:center;gap:5px;padding:0 3px;white-space:nowrap;}
.shz-led__ann-icon{display:inline-grid;place-items:center;flex:0 0 auto;width:calc(var(--led-top) * .4) !important;height:calc(var(--led-top) * .4) !important;filter:drop-shadow(0 0 2px currentColor);}
.shz-led__ann-icon svg{display:block;width:100% !important;height:100% !important;max-width:100% !important;max-height:100% !important;}
.shz-led__ann-text{font-size:calc(var(--led-top) * .36);font-weight:800;line-height:1;text-shadow:0 0 5px rgba(255,255,255,.3);}
.shz-led__ann-sep{display:inline-block;width:1.5px;height:42%;margin:0 12px;border-radius:2px;background:#ff3fae;box-shadow:0 0 4px #ff3fae;}

/* ---------- Clean black screen ---------- */
.shz-led__stage{
	position:absolute;left:var(--led-rim);right:var(--led-rim);bottom:var(--led-rim);top:calc(var(--led-rim) + var(--led-top));
	z-index:2;display:block;overflow:hidden;
	border-radius:0 0 calc(var(--led-r) - 3px) calc(var(--led-r) - 3px);
	background:#000;
	box-shadow:inset 0 0 14px rgba(0,0,0,.9);
	text-decoration:none;color:inherit;
}

/* ---------- Image / 3D Video ---------- */
/* ZIP-290: each picture / video is one slide; only the active one is visible (soft cross-fade). */
.shz-led__slide{position:absolute;inset:0;z-index:1;display:block;opacity:0;visibility:hidden;transition:opacity .7s ease,visibility 0s linear .7s;text-decoration:none;color:inherit;-webkit-tap-highlight-color:transparent;outline:none;}
.shz-led__slide.is-active{z-index:2;opacity:1;visibility:visible;transition:opacity .7s ease,visibility 0s;}
.shz-led__slide:focus,.shz-led__slide:focus-visible{outline:none;box-shadow:none;}
.shz-led__pager{position:absolute;left:50%;bottom:max(4px,calc(var(--led-h) * .025));z-index:4;display:flex;gap:5px;padding:3px 6px;border-radius:999px;background:rgba(0,0,0,.28);transform:translateX(-50%);}
.shz-led__pager-dot{display:block;width:6px;height:6px;margin:0;padding:0;border:0;border-radius:999px;background:rgba(255,255,255,.55);cursor:pointer;transition:width .3s ease,background .3s ease;-webkit-tap-highlight-color:transparent;outline:none;box-shadow:none;}
.shz-led__pager-dot.is-active{width:16px;background:#ff3fae;}
.shz-led__pager-dot:focus{outline:none;box-shadow:none;}
/* ZIP-570 (audit A11Y-06): each small dot keeps its look; its tap area is 24px tall and as wide as the space allows,
   and the keyboard focus is a visible ring (it had none). */
.shz-led__pager-dot{position:relative}
.shz-led__pager-dot::before{content:"";position:absolute;left:-3px;right:-3px;top:50%;height:24px;transform:translateY(-50%)}
.shz-led__pager-dot:focus-visible{outline:2px solid #fff;outline-offset:2px}
.shz-led__media{position:absolute;inset:0;z-index:2;display:block;pointer-events:none;}
.shz-led__media--image img{display:block;width:100% !important;height:100% !important;max-width:none !important;object-fit:cover;object-position:center;}
/* ZIP-422: a paid seller ad says so (top-left, small, no blur / shadow). */
.shz-led__adtag{position:absolute;top:max(5px,calc(var(--led-h) * .035));left:max(6px,calc(var(--led-h) * .04));z-index:3;padding:2px 8px;border:1px solid rgba(255,213,107,.7);border-radius:999px;background:rgba(0,0,0,.62);color:#ffd56b;font:600 10px/1.45 "Hind Siliguri",system-ui,sans-serif;letter-spacing:.02em;pointer-events:none;}
.shz-led__media--video{perspective:800px;perspective-origin:50% 0;}
.shz-led__media--video video{display:block;width:100% !important;height:100% !important;object-fit:cover;transform:rotateX(4deg) scale(1.04);transform-origin:50% 100%;}

/* a11y (ZIP-533, WCAG 2.2.2): the announcement line stops while a mouse rests on it or keyboard focus is inside,
   and does not move at all for "reduce motion" users. */
@media (hover:hover){.shz-led:hover .shz-led__track{animation-play-state:paused;}}
.shz-led:focus-within .shz-led__track{animation-play-state:paused;}
@media (prefers-reduced-motion:reduce){.shz-led__slide,.shz-led__slide.is-active{transition:none;}.shz-led__track{animation:none;}}

@media (max-width:640px){
	.shz-led__pager{gap:4px;padding:2px 5px;}
	.shz-led__pager-dot{width:5px;height:5px;}
	.shz-led__pager-dot.is-active{width:12px;}
	.shz-led__chev{display:none;}
	.shz-led__dots--l{display:none !important;}
	.shz-led__dots--r{right:1.2%;width:13.5% !important; /* ZIP-536: clear of the gold swoosh */-webkit-mask-image:linear-gradient(90deg,#000 55%,transparent);mask-image:linear-gradient(90deg,#000 55%,transparent);}
	.shz-led__ann-sep{margin:0 9px;}
}