/* ═══════════ آفرِ بونوس دیل: انتخابگر (بونوس دیل / HS تانک) + پاپ‌آپِ HS تانک ═══════════
   منبعِ طراحی: bonus-hs.html — اینجا scoped شده تا با استایل‌های صفحه تداخل نداشته باشد. */

/* ─────────── انتخابگرِ دو ایونت ─────────── */
.bdpick{position:fixed;inset:0;z-index:3000;display:flex;align-items:center;justify-content:center;padding:18px;}
.bdpick[hidden]{display:none;}
.bdpick *{box-sizing:border-box;}
.bdpick__overlay{position:absolute;inset:0;background:rgba(3,5,8,.82);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);}
.bdpick__frame{position:relative;z-index:1;width:min(620px,100%);padding:26px 22px 22px;border-radius:18px;text-align:center;
  background:
    radial-gradient(120% 70% at 50% 0%,rgba(255,200,60,.14),transparent 60%),
    linear-gradient(160deg,#1b1a14 0%,#0f0e0a 100%);
  border:1px solid rgba(255,213,74,.35);box-shadow:0 30px 90px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,235,170,.12);
  animation:hsPop .3s ease;}
.bdpick__x{position:absolute;top:12px;inset-inline-end:12px;width:36px;height:36px;border-radius:9px;cursor:pointer;
  font-size:14px;color:#FFD54A;background:rgba(0,0,0,.45);border:1px solid rgba(255,213,74,.4);transition:background .18s ease;}
.bdpick__x:hover{background:rgba(255,213,74,.2);}
.bdpick__badge{display:inline-block;font-family:"Orbitron",sans-serif;font-size:11px;font-weight:900;letter-spacing:1.5px;direction:ltr;
  color:#241500;padding:3px 12px;border-radius:999px;background:linear-gradient(135deg,#ffe08a,#FFC107);}
.bdpick__title{margin:10px 0 4px;font-size:clamp(19px,4.6vw,26px);font-weight:900;color:#fff;}
.bdpick__sub{margin:0 0 18px;font-size:clamp(12px,3.2vw,14px);color:#c9c2a4;}
.bdpick__opts{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.bdpick__opt{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0;overflow:hidden;cursor:pointer;text-align:center;
  font:inherit;color:inherit;border-radius:14px;background:#12110c;border:1.5px solid rgba(214,170,60,.5);
  box-shadow:0 8px 22px rgba(0,0,0,.45);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;}
.bdpick__opt:hover{transform:translateY(-3px);border-color:#FFD54A;box-shadow:0 10px 26px rgba(0,0,0,.5),0 0 18px rgba(255,205,90,.28);}
.bdpick__opt:focus-visible{outline:2px solid #FFD54A;outline-offset:3px;}
.bdpick__img{display:block;aspect-ratio:16/9;background-size:cover;background-position:center;border-bottom:1px solid rgba(214,170,60,.35);}
.bdpick__img--bd{background-image:url("images/cp/offers/bd-bg.webp");}
.bdpick__img--hs{background-image:url("images/hs/bonus-bg.webp");background-position:30% center;}
.bdpick__txt{display:flex;flex-direction:column;gap:3px;padding:11px 8px 13px;}
.bdpick__txt b{font-size:clamp(14px,3.8vw,17px);font-weight:900;color:#FFD54A;}
.bdpick__txt i{font-style:normal;font-size:clamp(11px,2.9vw,13px);color:#bdb69a;}
@media (max-width:420px){ .bdpick__frame{padding:22px 14px 16px;} .bdpick__opts{gap:10px;} }

/* ─────────── پاپ‌آپِ HS تانک ─────────── */
.hsmodal{
  --gold:#FFD54A; --gold-2:#B8860B; --gold-3:#8A6508;
  --cut:14px;
  position:fixed;inset:0;z-index:3000;display:flex;align-items:center;justify-content:center;padding:18px;}
.hsmodal[hidden]{display:none;}
.hsmodal *{box-sizing:border-box;}
.hsmodal__scrim{position:absolute;inset:0;background:rgba(3,5,8,.82);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);}
.hsmodal__frame{position:relative;z-index:1;width:min(1240px,96vw);aspect-ratio:1592/988;max-height:92vh;
  border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.1);box-shadow:0 30px 90px rgba(0,0,0,.7);
  animation:hsPop .3s ease;}
@keyframes hsPop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
.hsmodal__x{position:absolute;top:12px;inset-inline-end:12px;z-index:20;width:34px;height:34px;border-radius:9px;cursor:pointer;
  font-size:14px;line-height:1;color:var(--gold);background:rgba(0,0,0,.5);border:1px solid rgba(255,213,74,.4);
  display:grid;place-items:center;transition:background .18s ease;}
.hsmodal__x:hover{background:rgba(255,213,74,.2);}

.hsmodal .bonus{position:relative;width:100%;height:100%;
  background:url("images/hs/bonus-bg.webp") center/cover no-repeat;overflow:hidden;}
.hsmodal .bonus__stage{position:absolute;inset:22% 2% 11% 23%;display:flex;flex-direction:column;
  align-items:stretch;justify-content:center;gap:clamp(8px,2.2vh,20px);container-type:inline-size;}
.hsmodal .bonus__row{display:flex;direction:ltr;align-items:center;justify-content:center;gap:clamp(3px,0.35cqw,7px);
  width:100%;flex:1 1 auto;min-height:0;container-type:inline-size;}

/* کارت: پلاکِ زرهیِ چندلایه */
.hsmodal .bdc{position:relative;flex:0 0 auto;width:min(206px,23cqw);align-self:center;
  aspect-ratio:280/380;max-height:100%;cursor:pointer;container-type:inline-size;
  --chamfer:polygon(var(--cut) 0,calc(100% - var(--cut)) 0,100% var(--cut),100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,var(--cut) 100%,0 calc(100% - var(--cut)),0 var(--cut));
  filter:drop-shadow(0 0 8px rgba(255,200,40,.18)) drop-shadow(0 8px 16px rgba(0,0,0,.5));
  transition:transform .3s ease,filter .3s ease;}
.hsmodal .bdc:focus-visible{outline:2px solid var(--gold);outline-offset:4px;}
.hsmodal .bdc__edge{width:100%;height:100%;clip-path:var(--chamfer);padding:1px;background:#0e0b03;}
.hsmodal .bdc__frame{width:100%;height:100%;clip-path:inherit;padding:3px;
  background:linear-gradient(135deg,#6d5000 0%,#f5d45a 18%,#8c6500 38%,#ffe37a 52%,#765500 75%,#d4a928 100%);}
.hsmodal .bdc__hl{width:100%;height:100%;clip-path:inherit;padding:1.5px;
  background:linear-gradient(135deg,rgba(255,247,212,.95) 0%,rgba(150,110,15,.45) 46%,rgba(255,240,190,.9) 100%);}
.hsmodal .bdc__inner{position:relative;width:100%;height:100%;clip-path:inherit;
  background:
    linear-gradient(135deg, rgba(255,255,255,.025) 25%, transparent 25% 50%, rgba(255,255,255,.018) 50% 75%, transparent 75%) 0 0/8px 8px,
    linear-gradient(135deg,#25251f 0%,#151511 45%,#202018 100%);
  box-shadow:inset 0 0 16px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,235,170,.12);
  display:grid;grid-template-rows:1fr auto;align-items:center;justify-items:center;row-gap:6%;
  padding:15% 9% 11%;overflow:hidden;}
.hsmodal .bdc__reward,.hsmodal .bdc__cp{min-width:0;max-width:100%;}

/* بَجِ مرحله */
.hsmodal .bdc__badge{position:absolute;top:0;left:50%;transform:translate(-50%,-48%);z-index:5;
  width:auto;max-width:90%;height:clamp(24px,10cqw,40px);padding:1.5px;
  background:linear-gradient(180deg,#f5d45a,#8c6500);
  clip-path:polygon(12% 0,88% 0,100% 50%,88% 100%,12% 100%,0 50%);
  display:grid;place-items:center;filter:drop-shadow(0 2px 5px rgba(0,0,0,.6));}
.hsmodal .bdc__badge span{width:100%;height:100%;clip-path:inherit;background:linear-gradient(180deg,#1e1c14,#0c0b07);
  display:grid;place-items:center;padding:0 clamp(12px,6cqw,22px);}
.hsmodal .bdc__badge b{font-family:"Vazirmatn",sans-serif;font-weight:800;font-size:clamp(10px,4.4cqw,14px);letter-spacing:.01em;
  direction:rtl;white-space:nowrap;
  background:linear-gradient(180deg,#fff7d6 0%,#ffd76a 48%,#dda11e 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.75)) drop-shadow(0 0 4px rgba(255,200,60,.35));}

/* کادرِ ۱×۱ عکسِ جایزه */
.hsmodal .bdc__reward{position:relative;width:100%;height:auto;aspect-ratio:1/1;align-self:center;min-height:0;border-radius:8px;overflow:hidden;
  background:linear-gradient(160deg,#1d1d17 0%,#121210 58%,#0d0d0b 100%);
  border:1.5px solid rgba(214,170,60,.55);
  box-shadow:inset 0 2px 14px rgba(0,0,0,.55), inset 0 0 2px rgba(255,220,140,.25), 0 1px 0 rgba(255,235,170,.1);
  display:flex;align-items:center;justify-content:center;padding:0;}
.hsmodal .bdc__reward::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(120% 75% at 50% 0%, rgba(255,205,90,.12), transparent 55%);}
.hsmodal .bdc__reward img{width:100%;height:100%;object-fit:cover;display:block;position:relative;z-index:1;transition:transform .35s ease;}
.hsmodal .bdc__ph{position:relative;z-index:1;display:grid;place-items:center;color:rgba(255,213,74,.42);transition:transform .3s ease;}
.hsmodal .bdc__ph svg{width:clamp(24px,22cqw,46px);height:auto;filter:drop-shadow(0 0 6px rgba(255,205,90,.3));}

/* ردیفِ CP */
.hsmodal .bdc__cp{display:flex;align-items:baseline;gap:clamp(4px,3cqw,9px);direction:ltr;}
.hsmodal .cp-lbl{font-family:"Orbitron",sans-serif;font-weight:800;font-size:clamp(11px,7cqw,20px);letter-spacing:.03em;line-height:1;
  background:linear-gradient(180deg,#fff2b0 0%,#ffd24d 46%,#c9890f 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.6)) drop-shadow(0 0 4px rgba(255,200,60,.3));}
.hsmodal .bdc__cp b{font-family:"Orbitron",sans-serif;font-weight:800;font-size:clamp(16px,12cqw,32px);color:#F4F0D7;direction:ltr;
  text-shadow:0 1px 2px rgba(0,0,0,.7),0 0 6px rgba(255,210,90,.28);line-height:1;letter-spacing:.01em;}

/* نوارِ قیمتِ مشترک = دکمهٔ خرید */
.hsmodal .bonus__pricebar{flex:0 0 auto;width:100%;display:flex;align-items:center;justify-content:center;}
.hsmodal .pbar{height:clamp(30px,5cqw,50px);min-width:min(240px,52%);max-width:92%;padding:2.5px;border:0;cursor:pointer;
  font:inherit;color:inherit;
  --pc:9px;
  clip-path:polygon(var(--pc) 0,calc(100% - var(--pc)) 0,100% var(--pc),100% calc(100% - var(--pc)),calc(100% - var(--pc)) 100%,var(--pc) 100%,0 calc(100% - var(--pc)),0 var(--pc));
  background:linear-gradient(180deg,#fff0b0 0%,#eabb3f 34%,#a9780f 70%,#7a5608 100%);
  filter:drop-shadow(0 0 10px rgba(255,200,60,.34)) drop-shadow(0 2px 5px rgba(0,0,0,.55));
  display:grid;place-items:center;transition:filter .25s ease,transform .15s ease;}
.hsmodal .pbar:hover{filter:brightness(1.1) drop-shadow(0 0 14px rgba(255,200,60,.5)) drop-shadow(0 2px 5px rgba(0,0,0,.55));}
.hsmodal .pbar:active{transform:translateY(1px);}
.hsmodal .pbar:focus-visible{outline:2px solid #fff4c2;outline-offset:3px;}
.hsmodal .pbar[disabled]{cursor:not-allowed;filter:grayscale(.6) brightness(.8);}
.hsmodal .pbar > span{width:100%;height:100%;clip-path:inherit;
  background:linear-gradient(180deg,#1d1a0f 0%,#0f0d07 100%);
  box-shadow:inset 0 0 0 1px rgba(255,236,170,.4),inset 0 2px 7px rgba(0,0,0,.65);
  display:flex;align-items:center;justify-content:center;gap:7px;direction:rtl;padding:0 clamp(12px,3cqw,26px);line-height:1;}
.hsmodal .pbar b{font-family:"Orbitron",sans-serif;font-weight:800;font-size:clamp(15px,2.8cqw,26px);white-space:nowrap;letter-spacing:.01em;direction:ltr;
  background:linear-gradient(180deg,#fff7d8 0%,#ffdd76 45%,#e5aa26 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.6)) drop-shadow(0 0 3px rgba(255,205,70,.35));}
.hsmodal .pbar b:empty{display:none;}
.hsmodal .pbar i{font-style:normal;font-family:"Vazirmatn",sans-serif;font-weight:700;font-size:clamp(9px,1.5cqw,14px);white-space:nowrap;
  background:linear-gradient(180deg,#ffe9ad,#cf9f28);-webkit-background-clip:text;background-clip:text;color:transparent;}
.hsmodal .pbar__buy{font-style:normal;font-family:"Vazirmatn",sans-serif;font-weight:800;white-space:nowrap;
  font-size:clamp(10px,1.5cqw,14px);color:#241500;padding:.35em .8em;border-radius:6px;margin-inline-start:.3em;
  background:linear-gradient(180deg,#ffe08a,#FFC107 55%,#d99a06);box-shadow:inset 0 1px 0 rgba(255,255,255,.7);}

/* فلشِ پیشرفت */
.hsmodal .bd-arrow{flex:0 0 auto;align-self:center;display:inline-flex;align-items:center;}
.hsmodal .bd-arrow i{display:block;width:clamp(6px,0.7vw,10px);height:clamp(6px,0.7vw,10px);
  border-top:clamp(2px,.28vw,4px) solid var(--gold);border-right:clamp(2px,.28vw,4px) solid var(--gold);
  transform:rotate(45deg);filter:drop-shadow(0 0 5px rgba(255,210,60,.65));}
.hsmodal .bd-arrow i+i{margin-inline-start:clamp(-4px,-.45vw,-2px);}

/* هاور و انتخاب */
.hsmodal .bonus__row .bdc:hover{transform:translateY(-5px);
  filter:drop-shadow(0 0 14px rgba(255,205,90,.42)) drop-shadow(0 10px 18px rgba(0,0,0,.5));}
.hsmodal .bonus__row .bdc:hover .bdc__reward img,.hsmodal .bonus__row .bdc:hover .bdc__ph{transform:scale(1.04);}
.hsmodal .bdc.is-selected{transform:translateY(-4px);
  filter:drop-shadow(0 0 16px rgba(255,210,90,.55)) drop-shadow(0 10px 18px rgba(0,0,0,.5));}
.hsmodal .bdc.is-selected .bdc__reward{border-color:rgba(255,214,90,.9);
  box-shadow:inset 0 2px 14px rgba(0,0,0,.5), inset 0 0 3px rgba(255,225,150,.5), 0 0 10px rgba(255,205,90,.35);}

/* مرحلهٔ غیرفعال (از پنلِ ادمین) */
.hsmodal .bdc.is-locked .bdc__inner{filter:brightness(.6) saturate(.7);}
.hsmodal .bdc__lock{display:none;}
.hsmodal .bdc.is-locked .bdc__lock{position:absolute;inset:0;z-index:6;display:grid;place-items:center;
  background:rgba(6,6,8,.42);clip-path:var(--chamfer);}
.hsmodal .bdc.is-locked .bdc__lock svg{width:32px;height:32px;color:rgba(255,213,74,.7);filter:drop-shadow(0 2px 4px rgba(0,0,0,.6));}

/* دسکتاپ */
@media (min-width:761px){
  .hsmodal .bdc{aspect-ratio:280/400;}
  .hsmodal .bdc__badge{height:clamp(36px,15cqw,60px);}
  .hsmodal .bdc__badge span{padding:0 clamp(18px,9cqw,33px);}
  .hsmodal .bdc__badge b{font-size:clamp(15px,6.6cqw,21px);}
  .hsmodal .pbar{height:clamp(50px,7.2cqw,68px);min-width:min(320px,56%);}
  .hsmodal .pbar > span{padding:0 clamp(20px,3.6cqw,36px);gap:10px;}
  .hsmodal .pbar b{font-size:clamp(24px,4.3cqw,40px);}
  .hsmodal .pbar i{font-size:clamp(13px,2.2cqw,20px);}
  .hsmodal .pbar__buy{font-size:clamp(12px,1.9cqw,17px);}
}

/* موبایل */
@media (max-width:760px){
  .hsmodal{padding:14px;}
  .hsmodal__frame{width:min(96vw,460px);max-height:none;}
  .hsmodal .bonus__stage{inset:22% 3% 9% 24%;gap:6px;}
  .hsmodal .bonus__row{overflow-x:auto;overflow-y:hidden;justify-content:flex-start;align-items:center;
    gap:10px;padding:16px 4px 0 0;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    -webkit-mask-image:linear-gradient(90deg,#000 90%,transparent 100%);mask-image:linear-gradient(90deg,#000 90%,transparent 100%);}
  .hsmodal .bonus__row::-webkit-scrollbar{height:0;}
  .hsmodal .bdc{flex:0 0 auto;width:auto;height:100%;max-width:none;scroll-snap-align:start;--cut:8px;}
  .hsmodal .bdc__frame{padding:2px;}
  .hsmodal .bdc__hl{padding:1px;}
  .hsmodal .bdc__inner{padding:16% 8% 9%;}
  .hsmodal .bdc__badge{height:clamp(15px,15cqw,24px);}
  .hsmodal .bdc__badge span{padding:0 clamp(8px,7cqw,14px);}
  .hsmodal .bdc__badge b{font-size:clamp(8px,6.5cqw,12px);}
  .hsmodal .cp-lbl{font-size:clamp(9px,9cqw,15px);}
  .hsmodal .bdc__cp b{font-size:clamp(13px,15cqw,24px);}
  .hsmodal .bdc__cp{gap:5px;}
  .hsmodal .pbar{height:clamp(28px,8vw,38px);min-width:min(220px,64%);}
  .hsmodal .pbar b{font-size:clamp(13px,4.4vw,19px);}
  .hsmodal .pbar i{font-size:clamp(8px,2.6vw,12px);}
  .hsmodal .pbar__buy{font-size:clamp(9px,2.8vw,12px);padding:.3em .6em;}
  .hsmodal .bd-arrow i{width:7px;height:7px;border-width:3px;}
}
@media (prefers-reduced-motion:reduce){
  .hsmodal .bdc,.hsmodal .bdc__reward img,.hsmodal .bdc__ph,.hsmodal .pbar,.bdpick__opt,.hsmodal__frame,.bdpick__frame{transition:none;animation:none;}
}