/* ============================================================
   ershad-share-link  ·  Share UI  v3.0
   استایل یکپارچه مودال اشتراک‌گذاری، فرم کد، گزارش لینک‌ها
   طراحی: DigiMedia  |  RTL Friendly  |  Responsive
   ============================================================ */

/* ---------- ۱) متغیرهای رنگ و اندازه ---------- */
:root{
  --sl-brand:        #ff8300;
  --sl-brand-2:      #ff5b1a;
  --sl-brand-soft:   #ff9d3d;
  --sl-success:      #37d67a;
  --sl-danger:       #ff3b3b;
  --sl-bg:           #0f1419;
  --sl-bg-2:         #1b2330;
  --sl-bg-3:         #141b25;
  --sl-text:         #eef3f9;
  --sl-text-muted:   #c7d2df;
  --sl-text-dim:     #8fa0b5;
  --sl-line:         #ffffff24;
  --sl-line-soft:    #ffffff14;
  --sl-overlay:      rgba(5,8,12,.72);

  --sl-radius:       18px;
  --sl-radius-sm:    11px;
  --sl-radius-xs:    9px;
  --sl-shadow:       0 22px 60px rgba(0,0,0,.6);
  --sl-shadow-brand: 0 8px 20px rgba(255,131,0,.35);
  --sl-transition:   .25s ease;
}

/* ============================================================
   ۲) فرم شورت‌کد ورود کد  [smartshare_code]
   ============================================================ */
.smartshare-code-form,
form[action*="imdb360"]{
  text-align: center;
  width: min(92vw, 520px);
  margin: 24px auto;
  padding: 22px 20px;
  background: linear-gradient(160deg, var(--sl-bg-2), var(--sl-bg));
  border: 1px solid var(--sl-line-soft);
  border-radius: var(--sl-radius);
  box-shadow: var(--sl-shadow);
  color: var(--sl-text);
}

.smartshare-code-form label,
form[action*="imdb360"] label{
  display: block;
  margin-bottom: 12px;
  font-size: 15px;
  font-weight: 700;
  color: var(--sl-text-muted);
  letter-spacing: .2px;
}

.smartshare-code-form input[type="text"],
form[action*="imdb360"] input[type="text"]{
  width: 100%;
  max-width: 320px;
  padding: 11px 14px;
  margin: 0 auto 12px;
  display: block;
  background: #ffffff0d;
  border: 1px solid var(--sl-line);
  border-radius: var(--sl-radius-sm);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  letter-spacing: 1.5px;
  direction: ltr;
  outline: none;
  transition: var(--sl-transition);
}
.smartshare-code-form input[type="text"]:focus,
form[action*="imdb360"] input[type="text"]:focus{
  border-color: var(--sl-brand);
  box-shadow: 0 0 0 3px rgba(255,131,0,.2);
  background: #ffffff17;
}
.smartshare-code-form input[type="text"]::placeholder,
form[action*="imdb360"] input[type="text"]::placeholder{
  color: var(--sl-text-dim);
  font-weight: 400;
  letter-spacing: 1px;
}

/* دکمه عمومی شهاب */
.shahab-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 22px;
  background: linear-gradient(135deg, var(--sl-brand), var(--sl-brand-2));
  color: #fff;
  border: none;
  border-radius: var(--sl-radius-sm);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  box-shadow: var(--sl-shadow-brand);
  transition: var(--sl-transition);
}
.shahab-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(255,131,0,.45);
}
.shahab-btn:active{ transform: translateY(0); }

/* ============================================================
   مودال اشتراک‌گذاری  #share-form  (نسخه اصلاح شده)
   ============================================================ */
#share-form{
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: min(94vw, 440px) !important;
  max-height: 92vh;
  
  /* 🔴 اصلاح ۱: استفاده از clip-path به جای overflow برای برش تمیز */
  overflow-y: auto !important;
  overflow-x: hidden !important;
  clip-path: inset(0 round var(--sl-radius)); 
  
  transform: translate(-50%, -50%);
  z-index: 999999 !important;
  margin: 0 !important;
  padding: 22px 20px 20px !important;
  background: transparent !important; /* 🔴 شفاف شود تا رنگین‌کمان دیده شود */
  border: none !important;
  border-radius: var(--sl-radius) !important;
  box-shadow: 0 0 0 100vmax var(--sl-overlay), var(--sl-shadow);
  color: var(--sl-text) !important;
  text-align: right !important;
  font-family: inherit;
  box-sizing: border-box;
  isolation: isolate;
  animation: sl-pop .4s cubic-bezier(.2,.9,.3,1.2);
}

/* لایه رنگین‌کمان چرخان */
#share-form::before{
  content: "";
  position: absolute;
  top: 50%; 
  left: 50%;
  
  /* 🔴 اصلاح ۲: استفاده از width/height ساده به جای aspect-ratio برای سازگاری */
  width: 300%;
  height: 300%;
  
  transform: translate(-50%,-50%) rotate(0deg);
  background: conic-gradient(from 0deg,
      #ff004d, #ff8a00, #ffe600, #37d67a,
      #00c2ff, #7a5cff, #ff004d);
  animation: sl-rainbow 4s linear infinite;
  z-index: 0;
  pointer-events: none;
}

/* لایه پس‌زمینه تیره (ماسک) */
#share-form::after{
  content: "";
  position: absolute;
  
  /* 🔴 اصلاح ۳: جایگزینی inset با top/right/bottom/left برای پشتیبانی در همه مرورگرها */
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  
  border-radius: calc(var(--sl-radius) - 2px);
  background: linear-gradient(160deg, var(--sl-bg-2), var(--sl-bg));
  z-index: 1;
  pointer-events: none;
}

/* محتوای داخل مودال بالای همه لایه‌ها قرار گیرد */
#share-form > *{
  position: relative;
  z-index: 2;
}

/* ---------- هدر مودال (لوگو/آیکن) ---------- */
#share-form .dgm-head{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 0 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--sl-line-soft);
}
#share-form .dgm-logo{
  width: 38px; height: 38px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sl-brand), var(--sl-brand-2));
  color: #fff;
  font-size: 17px;
  box-shadow: var(--sl-shadow-brand);
}
#share-form .dgm-title{
  font-size: 15px;
  font-weight: 800;
  color: var(--sl-text);
  line-height: 1.3;
}
#share-form .dgm-subtitle{
  font-size: 12px;
  color: var(--sl-text-dim);
  margin-top: 2px;
}

/* ---------- فرم ---------- */
#share-form form{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}

/* ---------- ردیف شماره موبایل ---------- */
#share-form .dgm-field{
  display: flex;
  align-items: center;
  gap: 8px;
  background: #ffffff0d;
  border: 1px solid var(--sl-line);
  border-radius: var(--sl-radius-sm);
  padding: 0 12px;
  transition: var(--sl-transition);
}
#share-form .dgm-field:focus-within{
  border-color: var(--sl-brand);
  box-shadow: 0 0 0 3px rgba(255,131,0,.2);
  background: #ffffff17;
}
#share-form .dgm-ico{
  color: var(--sl-brand-soft);
  font-size: 15px;
  line-height: 1;
  flex: 0 0 auto;
}
#sharenum{
  flex: 1;
  width: 100%;
  padding: 12px 0;
  border: none !important;
  background: transparent !important;
  color: #fff !important;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-align: center;
  direction: ltr;
  box-shadow: none !important;
  outline: none !important;
}
#sharenum::placeholder{
  color: var(--sl-text-dim);
  font-weight: 400;
  letter-spacing: 1px;
}

/* ---------- چیپ‌های نوع اشتراک ---------- */
#share-form .dgm-types{
  display: flex;
  align-items: stretch;
  gap: 6px;
}
#share-form .dgm-type{
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px 4px;
  border: 1px solid var(--sl-line);
  border-radius: var(--sl-radius-sm);
  background: #ffffff0a;
  color: var(--sl-text-muted);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
  transition: var(--sl-transition);
}
#share-form .dgm-type i{
  font-size: 13px;
  color: var(--sl-text-dim);
  transition: var(--sl-transition);
}
#share-form .dgm-type:hover{ background: #ffffff14; }
#share-form .dgm-type:has(input:checked){
  background: linear-gradient(135deg, var(--sl-brand), var(--sl-brand-2));
  border-color: var(--sl-brand-soft);
  color: #fff;
  box-shadow: var(--sl-shadow-brand);
}
#share-form .dgm-type:has(input:checked) i{ color: #fff; }

/* رادیوی مخفی */
#share-form input[type=radio]{
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
  margin: 0;
}
#share-form input[type=hidden]{ display: none !important; }

/* ---------- دکمه‌های اقدام ---------- */
#share-form .dgm-actions{
  display: flex;
  align-items: stretch;
  gap: 6px;
  margin-top: 4px;
}
#sharebtn{
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px;
  border: none;
  border-radius: var(--sl-radius-sm);
  background: linear-gradient(135deg, var(--sl-brand), var(--sl-brand-2));
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: var(--sl-transition);
  box-shadow: var(--sl-shadow-brand);
}
#sharebtn i{ font-size: 14px; }
#sharebtn:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(255,131,0,.5);
}
#sharebtn:active{ transform: translateY(0); }

#report{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto !important;
  margin: 0 !important;
  padding: 12px 14px;
  border-radius: var(--sl-radius-sm);
  background: #ffffff14;
  border: 1px solid var(--sl-line);
  color: var(--sl-text-muted);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: var(--sl-transition);
}
#report i{ color: var(--sl-success); font-size: 13px; }
#report:hover{
  background: #ffffff22;
  color: #fff;
  transform: translateY(-2px);
}

/* ---------- دکمه بستن ---------- */
#share-close,
#report-close{
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  right: auto !important;
  width: 30px !important;
  height: 30px !important;
  line-height: 30px !important;
  text-align: center;
  font-size: 14px !important;
  color: var(--sl-text);
  background: #ffffff18;
  border-radius: 50%;
  cursor: pointer;
  transition: var(--sl-transition);
  display: block !important;
  z-index: 3;
}
#share-close:hover,
#report-close:hover{
  background: var(--sl-danger);
  color: #fff;
  transform: rotate(90deg);
}

/* ---------- QR و پیام ---------- */
#qrcode{
  margin: 10px auto 4px;
  display: flex;
  justify-content: center;
  background: #fff;
  width: fit-content;
  padding: 8px;
  border-radius: 12px;
}
#qrcode:empty{ display: none; }

#outMessage,
.outMsg{
  display: block;
  min-height: 0;
  margin: 6px 0 0 !important;
  color: var(--sl-success);
  font-weight: 700;
  font-size: 13px;
  word-break: break-word;
  padding: 4px 2px;
  text-align: center;
}
#outMessage:empty,
.outMsg:empty{ display: none; }

.copy-text{
  display: none;
  margin: 8px auto 0 !important;
  width: fit-content;
}
.copy-text.shahab-btn{
  color: var(--sl-text);
  font-size: 13px;
  background: #ffffff14;
  border: 1px solid var(--sl-line);
  border-radius: var(--sl-radius-xs);
  padding: 8px 14px;
}
.copy-text.shahab-btn:hover{ background: #ffffff26; }

/* ============================================================
   ۴) پنل گزارش لینک‌ها  .report
   ============================================================ */
.report{
  width: min(94vw, 640px) !important;
  left: 50% !important;
  right: auto !important;
  top: 10vh;
  transform: translateX(-50%);
  position: absolute;
  z-index: 9999;
  padding: 22px !important;
  border-radius: var(--sl-radius);
  background: linear-gradient(160deg, rgba(27,35,48,.98), rgba(15,20,25,.98)) !important;
  border: 1px solid var(--sl-line-soft) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.8);
  color: var(--sl-text);
  max-height: 76vh;
  overflow-y: auto;
  animation: sl-pop .4s cubic-bezier(.2,.9,.3,1.2);
}
.report span{
  margin: 0 8px !important;
  line-height: 2 !important;
}
.report p{
  margin: 0 0 14px;
  color: var(--sl-text-muted);
  font-size: 13px;
}

.link-info{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 12px;
  margin: 8px 0;
  background: #ffffff0a;
  border: 1px solid var(--sl-line-soft);
  border-radius: 14px;
  transition: var(--sl-transition);
}
.link-info:hover{
  background: #ffffff12;
  transform: translateY(-2px);
}
.link-info .btn{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--sl-brand);
  color: #fff;
  padding: 7px 14px;
  border-radius: var(--sl-radius-xs);
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  transition: var(--sl-transition);
}
.link-info .btn:hover{ background: var(--sl-brand-2); }
.link-info .link-qr{
  background: #fff;
  border-radius: 8px;
  padding: 4px;
  display: inline-flex;
}

/* ============================================================
   ۵) دکمه شروع اشتراک‌گذاری  #sharing
   ============================================================ */
#sharing,
#report{ cursor: pointer; }

#sharing{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: var(--sl-transition) !important;
}
#sharing:hover{
  filter: brightness(1.15);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(12,162,22,.35);
}

/* ============================================================
   ۶) نوتیفیکیشن اخطار (view limit)
   ============================================================ */
.notify{
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 92vw;
  padding: 10px 18px;
  background: var(--sl-danger);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  border-radius: var(--sl-radius-sm);
  box-shadow: 0 10px 30px rgba(255,59,59,.4);
  z-index: 999999;
  text-align: center;
}

/* ============================================================
   ۷) ریسپانسیو
   ============================================================ */
@media (max-width: 600px){
  #share-form{
    width: 94vw !important;
    padding: 18px 14px 16px !important;
    border-radius: 16px !important;
  }
  #share-form .dgm-type{ font-size: 11.5px; padding: 9px 2px; gap: 4px; }
  #share-form .dgm-type i{ font-size: 12px; }
  .report{ top: 6vh; padding: 16px !important; }
}

@media (max-width: 360px){
  #share-form{ width: 96vw !important; padding: 14px 10px !important; }
  #share-form .dgm-type span{ display: none; }
  #share-form .dgm-type{ padding: 10px 4px; }
  #share-form .dgm-type i{ font-size: 15px; }
  #sharenum{ font-size: 14px; letter-spacing: 1px; }
  #sharebtn{ font-size: 13px; }
}

@media (max-height: 480px){
  #share-form{ max-height: 96vh; }
  #share-form::before{ width: 260%; }
}

/* قفل اسکرول هنگام باز بودن مودال */
body.dgm-share-open{ overflow: hidden !important; }

/* ============================================================
   ۸) راست‌چین / چپ‌چین
   ============================================================ */
body.rtl #share-form,
body.rtl .report{ text-align: right; direction: rtl; }
body.ltr #share-form,
body.ltr .report{ text-align: left; direction: ltr; }