/* ===================================================================
   سِعر · shared screen-element styles (TV display + panel editor).
   Sizes use cqh (1% of stage height) via container-type:size on .stage,
   so a screen looks identical fullscreen on a TV and scaled in the editor.
   =================================================================== */
.stage { container-type: size; position: relative; overflow: hidden; }

.el { position: absolute; box-sizing: border-box; }
.el-fill { width: 100%; height: 100%; display: flex; }
.el-fill span { display: inline-block; max-width: 100%; }
.el-media { width: 100%; height: 100%; display: block; }
.el-qr { width: 100%; height: 100%; display: grid; place-items: center; }
.el-qr img { width: 100%; height: 100%; object-fit: contain; background: #fff; border-radius: 2cqh; padding: 1.4cqh; }
.el-ph { width: 100%; height: 100%; display: grid; place-items: center; color: rgba(255,255,255,.7);
  background: rgba(255,255,255,.07); border: 0.3cqh dashed rgba(255,255,255,.25); border-radius: 1.5cqh; font-size: 3cqh; font-weight: 700; text-align: center; }

/* clock */
.el-clock span { letter-spacing: .5px; }

/* countdown */
.el-cd { justify-content: center; align-items: center; }
.cd-row { display: flex; gap: 1.6cqh; direction: ltr; }
.cd-u { background: rgba(255,255,255,.10); border: 0.25cqh solid rgba(255,255,255,.18); border-radius: 2cqh; padding: 1.4cqh 1.8cqh; text-align: center; }
.cd-n { font-size: 7cqh; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.cd-l { font-size: 1.8cqh; font-weight: 700; opacity: .8; margin-top: .6cqh; }

/* promos — grid */
.el-promos.grid { width: 100%; height: 100%; display: grid; gap: 1.4cqh; }
.g-card { background: rgba(255,255,255,.08); border: 0.25cqh solid rgba(255,255,255,.14); border-radius: 2cqh; overflow: hidden; display: flex; flex-direction: column; }
.g-img { position: relative; flex: 1; min-height: 0; background: rgba(255,255,255,.06) center/cover no-repeat; }
.g-noimg { display: grid; place-items: center; font-size: 6cqh; opacity: .5; }
.g-badge { position: absolute; top: 1cqh; inset-inline-start: 1cqh; background: #ff5a3c; color: #fff; font-weight: 900; font-size: 2.4cqh; padding: .3cqh 1cqh; border-radius: 1cqh; }
.g-body { padding: 1.2cqh 1.4cqh; }
.g-title { font-size: 2.6cqh; font-weight: 800; line-height: 1.15; max-height: 6cqh; overflow: hidden; }
.g-price { display: flex; align-items: baseline; gap: 1cqh; margin-top: .6cqh; }
.g-old { font-size: 2.2cqh; opacity: .65; text-decoration: line-through; font-weight: 700; }
.g-new { font-size: 4cqh; font-weight: 900; color: #f0cf94; }

/* promos — spotlight */
.el-promos.spot { width: 100%; height: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 2cqh; align-items: center; }
.sp-img { position: relative; height: 100%; border-radius: 2.5cqh; background: rgba(255,255,255,.06) center/cover no-repeat; }
.sp-noimg { display: grid; place-items: center; font-size: 14cqh; opacity: .5; }
.sp-badge { position: absolute; top: 2cqh; inset-inline-start: 2cqh; background: #ff5a3c; color: #fff; font-weight: 900; font-size: 4cqh; padding: .6cqh 1.6cqh; border-radius: 1.6cqh; }
.sp-info { display: flex; flex-direction: column; gap: 1.4cqh; }
.sp-title { font-size: 6cqh; font-weight: 900; line-height: 1.05; }
.sp-prices { display: flex; align-items: baseline; gap: 1.6cqh; flex-wrap: wrap; }
.sp-old { font-size: 4cqh; opacity: .6; text-decoration: line-through; font-weight: 700; }
.sp-new { font-size: 9cqh; font-weight: 900; color: #f0cf94; }