/* ===== پیشنهاد ویژه پلاس — استایل ===== */
.amsp-overlay, .amsp-overlay *{ box-sizing:border-box; }

.amsp-overlay{
  --amsp-ink:#14161c;
  --amsp-ink-2:#1c1f28;
  --amsp-card:#20232e;
  --amsp-card-hover:#272b38;
  --amsp-option-bg:#20232e;
  --amsp-option-text:#f2efea;
  --amsp-gold:#cba135;
  --amsp-btn-text:#181307;
  --amsp-pink:#e85d75;
  --amsp-pink-deep:#c93f58;
  --amsp-blue:#3e7cb1;
  --amsp-blue-deep:#2c5c88;
  --amsp-text:#f2efea;
  --amsp-muted:#9195a3;
  --amsp-line:#2c303c;
  --amsp-radius:22px;
  /* هر کدوم از این‌ها یک نقشِ متنیِ مستقل و جدا از بقیه‌ن — تغییرِ هرکدوم روی بقیه اثر نمی‌ذاره */
  --amsp-discount-text:#e8c877;
  --amsp-tag-text:#e8c877;
  --amsp-eyebrow-text:#e8c877;
  --amsp-badge-text:#e8c877;
  --amsp-copy-text:#e8c877;
  --amsp-error:#e85d75;

  font-family:'Vazirmatn', Tahoma, sans-serif;
  position:fixed; inset:0;
  background:var(--amsp-overlay-bg, rgba(8,9,13,.78));
  backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  z-index:99999;
  opacity:0; pointer-events:none;
  transition:opacity .35s ease;
  padding:18px;
}
.amsp-overlay.amsp-open{ opacity:1; pointer-events:auto; }

.amsp-modal{
  position:relative;
  width:100%; max-width:620px;
  background:var(--amsp-ink-2);
  border:1px solid var(--amsp-line);
  border-radius:var(--amsp-radius);
  overflow:hidden;
  color:var(--amsp-text);
  box-shadow:0 40px 90px -20px rgba(0,0,0,.6);
  transform:scale(.94) translateY(14px);
  transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
.amsp-overlay.amsp-open .amsp-modal{ transform:scale(1) translateY(0); }

.amsp-close{
  position:absolute; top:16px; left:16px;
  width:34px; height:34px;
  border-radius:50%;
  border:1px solid var(--amsp-line);
  background:rgba(255,255,255,.04);
  color:var(--amsp-muted);
  font-size:16px;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  z-index:20;
  transition:background .2s, color .2s;
}
.amsp-close:hover{ background:rgba(255,255,255,.09); color:var(--amsp-text); }
.amsp-close:focus-visible{ outline:2px solid var(--amsp-gold); outline-offset:2px; }

.amsp-back-top{
  position:absolute; top:16px; right:16px;
  height:34px; padding:0 14px;
  border-radius:999px;
  border:1px solid var(--amsp-line);
  background:rgba(255,255,255,.04);
  color:var(--amsp-muted);
  font-family:inherit; font-size:12.5px; font-weight:700;
  cursor:pointer;
  display:none; align-items:center; justify-content:center;
  z-index:20;
  transition:background .2s, color .2s;
}
.amsp-back-top:hover{ background:rgba(255,255,255,.09); color:var(--amsp-text); }
.amsp-back-top:focus-visible{ outline:2px solid var(--amsp-gold); outline-offset:2px; }

.amsp-stage{ display:none; }
.amsp-stage.amsp-active{ display:block; animation:amsp-fade-in .45s ease; }
@keyframes amsp-fade-in{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }

/* مرحله ۱ */
.amsp-door{ display:flex; height:420px; }
.amsp-panel{
  flex:1; position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  cursor:pointer; border:none; color:#fff; font-family:inherit;
  transition:flex .45s cubic-bezier(.2,.8,.2,1); overflow:hidden;
}
.amsp-panel.amsp-pink{ background:linear-gradient(160deg, var(--amsp-pink) 0%, var(--amsp-pink-deep) 100%); }
.amsp-panel.amsp-blue{ background:linear-gradient(200deg, var(--amsp-blue) 0%, var(--amsp-blue-deep) 100%); }
.amsp-panel:hover{ flex:1.35; }
.amsp-panel:focus-visible{ outline:3px solid #fff; outline-offset:-6px; }
.amsp-panel-icon{
  font-size:34px; width:64px; height:64px; border-radius:50%;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.35);
  display:flex; align-items:center; justify-content:center; z-index:1;
}
.amsp-panel-label{ font-size:19px; font-weight:700; z-index:1; }
.amsp-panel-sub{ font-size:12.5px; opacity:.85; z-index:1; max-width:150px; text-align:center; line-height:1.7; }
.amsp-door-seam{ width:2px; background:rgba(0,0,0,.25); }
.amsp-door-head{ text-align:center; padding:26px 20px 18px; }
.amsp-door-head .amsp-eyebrow{ color:var(--amsp-eyebrow-text); font-size:12.5px; font-weight:600; margin-bottom:8px; }
.amsp-door-head h2{ font-size:21px; font-weight:800; }

/* مرحله ۲ */
.amsp-offers-wrap{ padding:30px 26px 26px; }
.amsp-offers-head{ text-align:center; margin-bottom:22px; }
.amsp-offers-head .amsp-eyebrow{ color:var(--amsp-eyebrow-text); font-size:12.5px; font-weight:600; margin-bottom:8px; }
.amsp-offers-head h2{ font-size:23px; font-weight:800; margin-bottom:8px; }
.amsp-offers-head p{ color:var(--amsp-muted); font-size:14px; }

.amsp-offer-list{ display:none; flex-direction:column; gap:12px; margin-bottom:22px; }
.amsp-offer-card{
  display:flex; align-items:center; gap:14px;
  background:var(--amsp-option-bg); border:1.5px solid var(--amsp-line); border-radius:16px;
  padding:16px 18px; cursor:pointer; text-align:right; width:100%; font-family:inherit;
  color:var(--amsp-option-text); transition:border-color .2s ease, background .2s ease, transform .15s ease;
}
.amsp-offer-card:hover{
  background:linear-gradient(0deg, rgba(255,255,255,.05), rgba(255,255,255,.05)), var(--amsp-option-bg);
  transform:translateY(-1px);
}
.amsp-offer-card:focus-visible{ outline:2px solid var(--amsp-gold); outline-offset:2px; }
.amsp-offer-card.amsp-selected{
  border-color:var(--amsp-gold);
  background:linear-gradient(0deg, color-mix(in srgb, var(--amsp-gold) 10%, transparent), color-mix(in srgb, var(--amsp-gold) 10%, transparent)), var(--amsp-option-bg);
}
.amsp-offer-num{
  flex-shrink:0; width:38px; height:38px; border-radius:50%;
  background:var(--amsp-ink); border:1px solid var(--amsp-line);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; color:var(--amsp-muted);
}
.amsp-offer-card.amsp-selected .amsp-offer-num{ background:var(--amsp-gold); color:#181307; border-color:var(--amsp-gold); }
.amsp-offer-body{ flex:1; display:flex; flex-direction:column; gap:3px; }
.amsp-offer-title{ display:block; font-size:15.5px; font-weight:700; margin-bottom:3px; }
.amsp-offer-desc{ display:block; font-size:12.5px; color:var(--amsp-muted); line-height:1.6; }
.amsp-offer-tag{
  flex-shrink:0; font-size:11.5px; font-weight:700;
  background:color-mix(in srgb, var(--amsp-tag-text) 14%, transparent);
  color:var(--amsp-tag-text); padding:5px 10px; border-radius:999px; white-space:nowrap;
}
.amsp-check-circle{
  flex-shrink:0; width:22px; height:22px; border-radius:50%; border:1.5px solid var(--amsp-line);
  display:flex; align-items:center; justify-content:center; font-size:12px; color:transparent; transition:all .2s ease;
}
.amsp-offer-card.amsp-selected .amsp-check-circle{ background:var(--amsp-gold); border-color:var(--amsp-gold); color:#181307; }

.amsp-primary-btn{
  width:100%; font-family:inherit; background:var(--amsp-gold);
  color:var(--amsp-btn-text); border:none; padding:15px; border-radius:14px; font-size:15.5px; font-weight:700;
  cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, opacity .2s ease;
}
.amsp-primary-btn:disabled{ opacity:.4; cursor:not-allowed; }
.amsp-primary-btn:not(:disabled):hover{ transform:translateY(-1px); box-shadow:0 12px 24px -10px color-mix(in srgb, var(--amsp-gold) 60%, transparent); }
.amsp-primary-btn:focus-visible{ outline:2px solid var(--amsp-gold); outline-offset:2px; }

/* مرحله ۳ */
.amsp-phone-wrap{ padding:34px 26px 30px; text-align:center; }
.amsp-badge-offer{
  display:inline-block; background:color-mix(in srgb, var(--amsp-badge-text) 12%, transparent);
  color:var(--amsp-badge-text);
  font-size:12.5px; font-weight:700; padding:6px 14px; border-radius:999px; margin-bottom:16px;
}
.amsp-phone-wrap h2{ font-size:21px; font-weight:800; margin-bottom:10px; }
.amsp-phone-wrap p{ color:var(--amsp-muted); font-size:14px; line-height:1.8; margin-bottom:24px; }
.amsp-phone-input{
  width:100%; background:var(--amsp-card); border:1.5px solid var(--amsp-line); border-radius:14px;
  padding:15px 18px; color:var(--amsp-text); font-family:inherit; font-size:16px; direction:ltr;
  text-align:center; letter-spacing:1px; margin-bottom:8px; transition:border-color .2s ease;
}
.amsp-phone-input::placeholder{ color:#5c6070; letter-spacing:0; }
.amsp-phone-input:focus{ outline:none; border-color:var(--amsp-gold); }
.amsp-phone-error{ color:var(--amsp-error); font-size:12.5px; min-height:18px; margin-bottom:14px; }

/* مرحله ۴ */
.amsp-result-wrap{ padding:38px 26px 32px; text-align:center; }
.amsp-result-icon{
  width:70px; height:70px; border-radius:50%;
  background:linear-gradient(135deg, var(--amsp-gold), color-mix(in srgb, var(--amsp-gold) 70%, black));
  display:flex; align-items:center; justify-content:center; margin:0 auto 18px; font-size:30px;
  box-shadow:0 14px 30px -10px color-mix(in srgb, var(--amsp-gold) 60%, transparent);
}
.amsp-result-wrap h2{ font-size:21px; font-weight:800; margin-bottom:8px; }
.amsp-result-wrap p.amsp-sub{ color:var(--amsp-muted); font-size:13.5px; margin-bottom:22px; }
.amsp-code-box{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--amsp-card); border:1.5px dashed var(--amsp-gold); border-radius:14px;
  padding:16px 20px; margin-bottom:14px;
}
.amsp-code-text{ font-size:22px; font-weight:800; letter-spacing:3px; color:var(--amsp-discount-text); direction:ltr; }
.amsp-copy-btn{
  font-family:inherit; background:color-mix(in srgb, var(--amsp-copy-text) 14%, transparent);
  color:var(--amsp-copy-text);
  border:1px solid color-mix(in srgb, var(--amsp-copy-text) 40%, transparent); border-radius:10px; padding:8px 14px; font-size:12.5px;
  font-weight:700; cursor:pointer; transition:background .2s ease; flex-shrink:0;
}
.amsp-copy-btn:hover{ background:color-mix(in srgb, var(--amsp-copy-text) 25%, transparent); }
.amsp-expiry-note{ color:var(--amsp-muted); font-size:13px; margin-bottom:18px; }
.amsp-expiry-note b{ color:var(--amsp-text); }
.amsp-offer-link-btn{
  display:block; text-decoration:none; text-align:center; margin-bottom:12px; box-sizing:border-box;
}
.amsp-done-btn{
  width:100%; font-family:inherit; background:transparent; color:var(--amsp-text);
  border:1.5px solid var(--amsp-line); padding:14px; border-radius:14px; font-size:14.5px;
  font-weight:700; cursor:pointer; transition:background .2s ease;
}
.amsp-done-btn:hover{ background:rgba(255,255,255,.05); }

@media (max-width:480px){
  .amsp-door{ height:360px; }
  .amsp-panel-sub{ display:none; }

  /* پوسته‌ی پاپ‌آپ در موبایل ارتفاعِ نمایشگر رو رعایت می‌کنه؛ خودِ استیجِ فعال ستونیِ
     فلکس می‌شه تا زیرمجموعه‌هاش (هدر/لیست/دکمه) بتونن ارتفاعِ باقی‌مونده رو بینِ خودشون
     تقسیم کنن — این پایه‌ی راه‌حلِ اسکرولِ داخلیِ لیستِ پیشنهادهاست. */
  .amsp-modal{
    max-height:92vh;
    display:flex;
    flex-direction:column;
    overflow-y:auto;
    overflow-x:hidden;
  }

  /* فقط استیجِ ۲ (لیستِ پیشنهادها) نیازمندِ این چیدمانِ ستونیِ داخلیه؛ بقیه‌ی استیج‌ها
     همون display:block ساده‌ی قبلی رو حفظ می‌کنن. */
  .amsp-stage[data-stage="2"].amsp-active{
    display:flex; flex-direction:column; flex:1; min-height:0;
  }
  .amsp-offers-wrap{ display:flex; flex-direction:column; flex:1; min-height:0; padding:22px 16px 18px; }
  .amsp-offers-head{ flex-shrink:0; }

  /* هدر و دکمه‌ی ادامه همیشه ثابت و دیده می‌مونن؛ فقط خودِ لیستِ پیشنهادها -وقتی جا
     کم بیاد- به‌صورتِ داخلی اسکرول می‌خوره، نه کلِ پاپ‌آپ. */
  .amsp-offer-list{
    flex:1 1 auto; min-height:0;
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    padding-inline-end:4px; margin-bottom:16px;
  }
  #amsp-continue{ flex-shrink:0; }

  /* کارتِ هر پیشنهاد در موبایل به دو ردیفِ گرید تبدیل می‌شه: ردیفِ اول شماره/عنوان/تیک،
     ردیفِ دوم برچسبِ تخفیف زیرِ عنوان — تا وقتی متنِ تخفیف طولانی می‌شه (مثلِ نگارشِ
     میلیونی)، از کادر بیرون نزنه و کاملاً خونا بمونه. */
  .amsp-offer-card{
    display:grid;
    grid-template-columns:38px 1fr 22px;
    grid-template-areas:
      "num body check"
      "tag tag tag";
    column-gap:12px; row-gap:10px;
    align-items:start;
  }
  .amsp-offer-num{ grid-area:num; }
  .amsp-offer-body{ grid-area:body; min-width:0; }
  .amsp-check-circle{ grid-area:check; margin-top:2px; }
  .amsp-offer-tag{
    grid-area:tag;
    justify-self:start;
    white-space:normal;
    width:fit-content;
    max-width:100%;
  }
}
@media (prefers-reduced-motion: reduce){
  .amsp-overlay, .amsp-overlay *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}
