/* ==============================
   Modal (final, deduped)
   ============================== */

/* ریشه مودال */
#mc-modal{
  position: fixed;
  inset: 0;
  display: none;           /* پیش‌فرض پنهان */
  z-index: 100000;
}

/* وقتی باز است: هم با کلاس .show، هم با aria */
#mc-modal:is(.show, [aria-hidden="false"]){
  display: grid;
  place-items: start center;
  padding-top: 1.5vh;
  padding-bottom: 1.5vh;
  overflow: hidden;
}

html.mc-modal-open,
body.mc-modal-open{
  overflow: hidden !important;
  overscroll-behavior: none;
}

/* پس‌زمینه تیره */
#mc-modal .backdrop{
  position: absolute;
  inset: 0;
  background: var(--overlay-45);
}

/* پنل اصلی */
#mc-modal .panel{
  position: relative;
  z-index: 2;
  width: clamp(320px, 90vw, 520px);
  margin: 0 auto;
  background: var(--white);
  border-radius: 16px;
  padding: 16px 14px 18px;
  box-shadow: 0 20px 60px var(--overlay-25);
  max-height: none;
  overflow: visible;
}

/* دکمه بستن */
#mc-modal .close{
  position: absolute;
  top: 6px; inset-inline-start: 6px;
  width: 38px; height: 38px;
  border: none; background: transparent; border-radius: 10px;
  font-size: 26px; line-height: 1; cursor: pointer; color: var(--muted);
}
#mc-modal .close:hover{ background: transparent; }

/* هدِر (لوگو و متن) */
#mc-modal .mc-head{
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  margin-bottom: 8px;
}
#mc-modal .mc-head-logo{ display:flex; align-items:center; justify-content:center; margin-bottom:4px; }
#mc-modal .mc-brand-logo{ height:46px; max-height:52px; max-width:240px; object-fit:contain; display:block; }
#mc-modal .mc-head-text{ text-align:center; min-width:0; }
#mc-modal .mc-title{ margin:0 0 5px; font-size:1.18rem; font-weight:800; color:var(--ink); }
#mc-modal .mc-subtitle{ margin:0; color:var(--muted); font-size:.96rem; }

/* باکس کُد + دکمه کپی */
#mc-modal .mc-codebox{
  display:flex; align-items:center; gap:10px;
  background:var(--surface-muted); border:2px dashed var(--line-slate); border-radius:10px; padding:8px 10px;
}

#mc-modal .mc-code{
  flex: 1 1 auto;
  display:flex; align-items:center; justify-content:center;
  text-align:center; white-space:nowrap;
  direction:ltr; unicode-bidi:plaintext;
  min-height:40px; margin:0 auto; background:transparent; border-radius:8px;
  font-family: monospace; font-weight:800; font-size:1.4rem; color:var(--ink);
}

#mc-modal .mc-copy{
  display:inline-flex; align-items:center; justify-content:center;
  height:40px; padding:0 12px;
  border:none; background:var(--brand); color:var(--white); border-radius:10px; cursor:pointer;
  font-size:.88rem;
}
#mc-modal .mc-copy:hover{ filter:brightness(.97); }

/* فیدبک */
#mc-modal .mc-feedback{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin-top:10px; color:var(--ink-soft);
}
#mc-modal .mc-fb{ border:1px solid var(--line); background:var(--white); border-radius:12px; padding:.4rem .6rem; cursor:pointer; }
#mc-modal .mc-fb:hover{ background:var(--surface-soft); }
#mc-modal .mc-fb-count{ min-width:20px; text-align:center; color:var(--muted); }
#mc-modal .mc-fb-msg{ font-style:normal; margin-inline-start:6px; }


/* دکمه ورود به فروشگاه برای کوپن‌های کددار */
#mc-modal .mc-use-code{
  display:flex; align-items:center; justify-content:center;
  width:min(240px, 100%); min-height:44px; margin:10px auto 0; padding:9px 18px;
  border-radius:10px; background:var(--button-bg); color:var(--white);
  font-weight:800; text-decoration:none; transition:filter .15s ease;
}
#mc-modal .mc-use-code:hover{ filter:brightness(.96); color:var(--white); }
#mc-modal .mc-use-code[hidden]{ display:none !important; }

/* متن آفر و تاریخ انقضا */
#mc-modal .mc-offer{ margin-top:10px; }
#mc-modal .mc-offer-title{ margin:8px 0 6px; font-size:1rem; font-weight:800; color:var(--ink); }
#mc-modal .mc-offer-text{ margin:0 0 8px; color:var(--text-soft); font-size:.95rem; }
#mc-modal .mc-exp{ color:var(--muted); }

/* بخش عضویت خبرنامه پایین پنل */
#mc-modal .mc-subscribe{
  margin:8px -14px -18px;
  padding:8px 14px;
  border-radius:0 0 16px 16px;
  background:var(--surface-panel);
  position:relative;
}
#mc-modal .mc-subscribe::after{ content:none !important; }
#mc-modal .mc-sub-title{ margin:0 0 8px; font-weight:700; font-size:.98rem; color:var(--ink); }
#mc-modal .mc-sub-title .mc-sub-store{ color:var(--brand); font-weight:800; }
#mc-modal .mc-sub-form{ display:flex; gap:8px; align-items:center; margin-bottom:6px; }
#mc-modal .mc-sub-email{ flex:1; height:42px; border:1px solid var(--line-strong); border-radius:10px; padding:0 12px; outline:none; background:var(--white); }
#mc-modal .mc-sub-email:focus{ border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 30%, transparent); }
#mc-modal .mc-sub-btn{ height:42px; border:0; border-radius:10px; padding:0 14px; background: var(--accent); color:var(--white); font-weight:700; cursor:pointer; }
#mc-modal .mc-sub-btn:hover{ filter:brightness(.97); }
#mc-modal .mc-sub-note{ color:var(--muted); font-size:.84rem; }
#mc-modal .mc-sub-msg{ margin-top:6px; font-weight:600; font-size:.88rem; font-style:normal; }
#mc-modal .mc-sub-msg.ok{ color: var(--brand); }
#mc-modal .mc-sub-msg.err{ color: var(--error); }

/* ریسپانسیو */
@media (max-width:480px){
  #mc-modal:is(.show, [aria-hidden="false"]){ padding-top:1vh; padding-bottom:1vh; }
  #mc-modal .mc-copy{ width:100%; max-width:200px; }
  #mc-modal .mc-use-code{ width:min(200px, 100%); }
}

/* CTA is always present; until destination resolves it stays visibly disabled. */
#mc-modal .mc-use-code[aria-disabled="true"]{
  opacity:.55;
  pointer-events:none;
  cursor:default;
}


/* Mobile modal breathing room from top */
@media (max-width:480px){
  #mc-modal:is(.show,[aria-hidden="false"]){
    padding-top:max(52px,calc(env(safe-area-inset-top) + 22px)) !important;
    padding-bottom:calc(18px + env(safe-area-inset-bottom)) !important;
    overflow-y:auto !important;
  }
  #mc-modal .panel{
    max-height:calc(100dvh - 92px) !important;
    overflow-y:auto !important;
    overscroll-behavior:contain;
  }
}


/* ===== Fix: desktop modal centered in viewport ===== */
@media (min-width: 481px) {
  #mc-modal:is(.show, [aria-hidden="false"]) {
    place-items: center;
    padding: 24px;
    overflow-y: auto;
  }

  #mc-modal .panel {
    margin: auto;
  }
}


/* Compact copy button on small modal screens. */
@media (max-width:480px){
  #mc-modal .mc-codebox{
    gap:7px;
  }
  #mc-modal .mc-copy{
    width:auto!important;
    max-width:none!important;
    min-width:68px;
    flex:0 0 auto;
    padding-inline:10px;
  }
}