/* ========== NX Lux Discount Tag Overlay v2.8.0 ========== */
/* بهینه‌سازی‌ها:
   - انیمیشن‌های دائمی بعد از ورود خاموش می‌شوند (.nx-lux-anim-idle)
   - پشتیبانی prefers-reduced-motion
*/

:root{
  --p1: #f9dbbd;
  --p2: #a53860;
  --p3: #da627d;
  --p4: #ffa5ab;
  --p5: #450920;
  --brand: #450920;

  --gold-light: #da627d;
  --gold-mid:   #ffa5ab;
  --gold-dark:  #450920;
  --gold-deep:  #450920;

  --gold-light-inv: #da627d;
  --gold-mid-inv:   #a53860;
  --gold-dark-inv:  #f9dbbd;
  --gold-deep-inv:  #f9dbbd;

  --edge-deep:  rgba(0,0,0,.55);
  --stitch-col: rgba(58,40,21,.35);
  --txt-col:    #2a1b0c;
  --halo:       rgba(255, 255, 210, 0.55);

  --shadow-card-main: rgba(0,0,0,.32);
  --shadow-card-deep: rgba(0,0,0,.38);
}

.nx-lux-theme-a{
  --c-p1: var(--p1);
  --c-p2: var(--p2);
  --c-p3: var(--p3);
  --c-p4: var(--p4);
  --c-p5: var(--p5);

  --c-gold-light: var(--gold-light);
  --c-gold-mid:   var(--gold-mid);
  --c-gold-dark:  var(--gold-dark);
  --c-gold-deep:  var(--gold-deep);
}

.nx-lux-theme-b{
  --c-p1: var(--p5);
  --c-p2: var(--p4);
  --c-p3: var(--p3);
  --c-p4: var(--p2);
  --c-p5: var(--p1);

  --c-gold-light: var(--gold-light-inv);
  --c-gold-mid:   var(--gold-mid-inv);
  --c-gold-dark:  var(--gold-dark-inv);
  --c-gold-deep:  var(--gold-deep-inv);
}

.lux-wrapper{
  direction: rtl;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  user-select:none;
  background:transparent;
  width:100%;
  font-family: inherit;
  color: var(--txt-col);
}
.layout-outer{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 0;
  background:transparent;
  font-family: inherit;
}
.layout-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  background:transparent;
  font-family: inherit;
  animation:swing 3s ease-in-out infinite;
  transform-origin:top center;
  filter: drop-shadow(0 22px 24px rgba(0,0,0,.22));
}
@keyframes swing{
  0%   { transform:rotate(-3deg); }
  50%  { transform:rotate(3deg); }
  100% { transform:rotate(-3deg); }
}

.hanger{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  font-family: inherit;
}
.hanger::before,
.hanger::after{
  content:"";
  position:absolute;
  top:0;
  width:4px;
  height:30px;
  border-radius:3px;
  background:
    repeating-linear-gradient(
      45deg,
      var(--c-gold-light) 0px 4px,
      var(--c-gold-dark)  4px 8px
    );
  box-shadow:
    0 0 4px rgba(0,0,0,.45) inset,
    0 8px 12px rgba(0,0,0,.4);
  filter:brightness(1.08);
  transform-origin:top center;
  z-index:35;
  pointer-events:none;
}
.hanger::before{
  left:calc(50% - 7px);
  transform:rotate(-16deg);
}
.hanger::after{
  left:calc(50% + 3px);
  transform:rotate(16deg);
}

.rope-body{
  position:absolute;
  top:10px;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:7px;
  border-radius:4px;
  background:
    repeating-linear-gradient(
      45deg,
      var(--c-gold-light) 0px 4px,
      var(--c-gold-mid)   4px 8px
    );
  box-shadow:
    0 0 4px rgba(0,0,0,.4) inset,
    0 10px 16px rgba(0,0,0,.4);
  filter:brightness(1.05);
  z-index:1;
  pointer-events:none;
}
.rope-body::after{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  width:12px;
  height:100%;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 20%, rgba(0,0,0,.26) 0%, rgba(0,0,0,0) 70%);
  pointer-events:none;
}

.discount-tag{
  position:relative;

  min-width:120px;
  max-width:130px;
  min-height:140px;
  margin-top:34px;

  border-radius:16px 16px 36px 36px;
  font-family: inherit;

  background:
    repeating-linear-gradient(
      45deg,
      rgba(58,40,21,.12) 0px 2px,
      rgba(255,255,255,.03) 2px 4px
    ),
    radial-gradient(
      circle at 20% 20%,
      var(--c-gold-light) 0%,
      var(--c-gold-mid)   45%,
      var(--c-gold-dark)  70%,
      var(--c-gold-deep)  100%
    );

  box-shadow:
    0 2px 2px rgba(255,255,255,.4) inset,
    0 -2px 4px rgba(0,0,0,.38) inset,
    0 14px 20px var(--shadow-card-main),
    0 0 20px rgba(255,240,170,.2),
    0 0 50px rgba(255,220,120,.06);

  border:1px solid var(--edge-deep);

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;

  padding:14px 14px 12px;
  isolation:isolate;

  animation:auraPulse 4s ease-in-out infinite;
  z-index:20;
  color: var(--txt-col);
}
@keyframes auraPulse {
  0%,100% {
    box-shadow:
      0 2px 2px rgba(255,255,255,.4) inset,
      0 -2px 4px rgba(0,0,0,.38) inset,
      0 14px 20px var(--shadow-card-main),
      0 0 20px rgba(255,240,170,.2),
      0 0 50px rgba(255,220,120,.06);
  }
  50% {
    box-shadow:
      0 2px 2px rgba(255,255,255,.4) inset,
      0 -2px 4px rgba(0,0,0,.4) inset,
      0 16px 24px var(--shadow-card-deep),
      0 0 26px rgba(255,240,170,.28),
      0 0 70px rgba(255,220,120,.1);
  }
}

.discount-tag::before{
  content:"";
  position:absolute;
  top:-11px;
  left:50%;
  transform:translateX(-50%);
  width:22px;
  height:22px;
  border-radius:50%;
  background:
    radial-gradient(
      circle at 30% 30%,
      #fff8d8 0%,
      var(--c-gold-mid) 40%,
      var(--c-gold-dark) 70%,
      rgba(0,0,0,.85) 100%
    );
  border:1px solid rgba(0,0,0,.6);
  box-shadow:
    0 2px 4px rgba(0,0,0,.6),
    0 0 10px var(--halo);
  z-index:30;
}
.discount-tag::after{
  content:"";
  position:absolute;
  top:-2px;
  left:50%;
  transform:translateX(-50%);
  width:9px;
  height:9px;
  border-radius:50%;
  background:radial-gradient(circle at 50% 40%, rgba(0,0,0,.92) 0%, rgba(0,0,0,0) 70%);
  box-shadow:0 0 5px rgba(0,0,0,.9);
  z-index:40;
}

.tag-stitch{
  position:absolute;
  inset:4px;
  border-radius:12px 12px 30px 30px;
  border:2px dashed var(--stitch-col);
  pointer-events:none;
  box-shadow:
    0 0 4px rgba(255,255,255,.5),
    0 0 16px rgba(255,255,210,.18);
}
.tag-gloss{
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:52%;
  border-radius:16px 16px 40px 40px;
  background:radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 70%);
  mix-blend-mode:screen;
  pointer-events:none;
  filter:blur(8px);
}

.discount-inner{
  position:relative;
  z-index:50;
  line-height:1.25;
  text-shadow:
    0 1px 0 rgba(255,255,255,.7),
    0 2px 4px rgba(0,0,0,.6),
    0 0 12px rgba(255,255,210,.5);
  font-feature-settings:"ss01","ss02","rlig","calt";
  font-family: inherit;
  color: var(--txt-col);
  display:flex;
  flex-direction:column;
  align-items:center;
}

.discount-percent{
  font-weight:600;
  letter-spacing:-0.03em;
  font-size:2.3rem;
  line-height:1.1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0.25rem;
  font-family: inherit;
  color: var(--c-p1);
}

.discount-label{
  font-weight:500;
  font-size:0.9rem;
  line-height:1.2;
  opacity:.95;
  margin-top:0.4rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.3rem;
  font-family: inherit;
  color: var(--c-p2);
  text-align:center;
  white-space:nowrap;
}

.tagline-block{
  margin-top:0.7rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  line-height:1.2;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:0.7rem;
  font-family: inherit;
  white-space:nowrap;
  background:none;
  -webkit-background-clip:initial;
  color: var(--c-p3);
  text-shadow:none;
}
.tagline-line{
  display:block;
}

@media (max-width:480px){
  .discount-tag{
    min-width:110px;
    max-width:120px;
    min-height:130px;
    padding:12px 12px 10px;
    border-radius:14px 14px 32px 32px;
    margin-top:30px;
  }
  .tag-stitch{
    inset:3px;
    border-radius:10px 10px 28px 28px;
  }
  .tag-gloss{
    border-radius:14px 14px 36px 36px;
  }
  .discount-percent{
    font-size:2rem;
  }
  .discount-label{
    font-size:.8rem;
  }
  .tagline-block{
    font-size:.6rem;
    letter-spacing:.06em;
    margin-top:0.6rem;
  }
}

/* ---------- کارت‌های لیست (آرشیو) ---------- */
#nxwa-grid .nx-card-media.nx-lux-has-badge,
#nxtr-prods .nx-card-media.nx-lux-has-badge{
  position:relative;
  overflow:visible !important;
  z-index:999;
}

.nx-lux-badge-wrap{
  position:absolute;
  top:0;
  left:0;
  z-index:9999;
  pointer-events:none;
  line-height:0;
  direction:rtl;

  transform-origin: top left;
  transform: scale(.48) !important;

  margin-top:0;
  margin-left:2px;

  width:max-content;
  max-width:none;
}
@media (max-width:480px){
  .nx-lux-badge-wrap{
    transform: scale(.40) !important;
    margin-top:0;
    margin-left:2px;
  }
}
.nx-lux-badge-wrap .layout-outer{
  padding:0 !important;
  margin:0 !important;
  justify-content:flex-start !important;
  align-items:flex-start !important;
  background:transparent !important;
}
.nx-lux-badge-wrap .layout-inner{
  margin:0 !important;
  background:transparent !important;
}

/* ---------- مدیای صفحه محصول ---------- */
#nxms-grid .nx-lux-ms-has-badge{
  position:relative;
  z-index:999;
}

.nx-lux-badge-wrap-ms{
  position:absolute;
  top:0px;
  left:4px;
  z-index:9999;
  pointer-events:none;
  line-height:0;
  direction:rtl;

  transform-origin: top left;
  transform: scale(.8) !important;

  margin-top:0;
  margin-left:0;

  width:max-content;
  max-width:none;
}
@media (max-width:480px){
  .nx-lux-badge-wrap-ms{
    transform: scale(.6) !important;
  }
}
.nx-lux-badge-wrap-ms .layout-outer{
  padding:0 !important;
  margin:0 !important;
  justify-content:flex-start !important;
  align-items:flex-start !important;
  background:transparent !important;
}
.nx-lux-badge-wrap-ms .layout-inner{
  margin:0 !important;
  background:transparent !important;
}

/* ---------- انیمیشن ورود ---------- */
.nx-lux-anim-start .rope-body{
  transform-origin: top center;
  animation: nxRopeGrow .35s ease-out forwards;
  transform: translateX(-50%) scaleY(0);
  opacity:0;
}
@keyframes nxRopeGrow{
  0%{
    transform: translateX(-50%) scaleY(0);
    opacity:0;
  }
  100%{
    transform: translateX(-50%) scaleY(1);
    opacity:1;
  }
}

.nx-lux-anim-start .discount-tag{
  transform-origin: top center;
  animation: nxTagDrop .45s cubic-bezier(.2,1.2,.4,1) .15s forwards;
  transform: rotateX(-90deg) translateY(-20px);
  opacity:0;
}
@keyframes nxTagDrop{
  0%{
    transform: rotateX(-90deg) translateY(-20px);
    opacity:0;
  }
  100%{
    transform: rotateX(0deg) translateY(0);
    opacity:1;
  }
}

/* ✅ بهینه: بعد از ورود، انیمیشن‌های دائمی خاموش */
.nx-lux-anim-idle .layout-inner{
  animation:none !important;
}
.nx-lux-anim-idle .discount-tag{
  animation:none !important;
}

/* ✅ prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .layout-inner{ animation:none !important; }
  .discount-tag{ animation:none !important; }
  .nx-lux-anim-start .rope-body,
  .nx-lux-anim-start .discount-tag{
    animation:none !important;
    transform:none !important;
    opacity:1 !important;
  }
}