/* ==========================================================================
   VPR Fashion — Hero Slider v8.3
   بنرهای پیش‌فرض جدید: تصویر بدون متن سوخته + متن HTML روی آن
   پشتیبانی: طرح روشن/تیره، اسلاید بدون نوشته، تصویر جداگانه موبایل، WebP
   تیمـا — تجارت یار مهارت‌های آریایی
   ========================================================================== */

:root{
  --vpr-hero-plum:#6B1F43;
  --vpr-hero-plum-dark:#3C1029;
  --vpr-hero-gold:#E8C877;
  --vpr-hero-cream:#FFFCF8;
  --vpr-hero-ink:#231018;
  --vpr-hero-radius:0 0 32px 32px;
}

/* ---------- ساختار پایه ---------- */
.hero-slider.hero-v83, .hero-slider.hero-v83 *{ box-sizing:border-box; }
.hero-slider.hero-v83{
  position:relative;
  overflow:hidden;
  border-radius:var(--vpr-hero-radius);
  margin-bottom:0;
  background:#f3efec;
}

.hero-v83 .hero-slide{
  position:relative;
  display:none;
  align-items:center;
  min-height:auto;
  background-image:none !important;   /* تصویر حالا با <img> رندر می‌شود */
}
.hero-v83 .hero-slide.active{
  display:flex;
  animation:vprHeroFade .7s ease both;
}
@keyframes vprHeroFade{from{opacity:0}to{opacity:1}}

/* ---------- تصویر ---------- */
.hero-v83 .hero-media{
  position:absolute; inset:0; z-index:0;
  display:block; width:100%; height:100%;
}
.hero-v83 .hero-media img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}

/* نسبت تصویر — نگه‌داشتن ارتفاع بدون CLS */
.hero-v83 .hero-slide{ aspect-ratio:1920/822; }
@media(max-width:768px){
  .hero-v83 .hero-slide{ aspect-ratio:900/1125; }
  .hero-v83 .hero-media img{ object-position:center top; }
}

/* لایه قدیمی گرادیان غیرفعال می‌شود */
.hero-v83 .hero-slide::before{ display:none !important; content:none !important; }
.hero-v83 .hero-slide-mob{ display:none !important; }

/* ---------- پرده خوانایی (veil) ---------- */
.hero-v83 .hero-veil{
  position:absolute; inset:0; z-index:1; pointer-events:none;
}
/* طرح روشن: تصویر روشن، متن تیره */
.hero-v83 .hero-slide.is-light .hero-veil{
  background:linear-gradient(270deg,
    rgba(255,252,248,.97) 0%,
    rgba(255,252,248,.94) 30%,
    rgba(255,252,248,.72) 44%,
    rgba(255,252,248,.20) 56%,
    rgba(255,252,248,0)   66%);
}
/* طرح تیره: تصویر تیره، متن روشن */
.hero-v83 .hero-slide.is-dark .hero-veil{
  background:linear-gradient(270deg,
    rgba(28,10,20,.94) 0%,
    rgba(32,12,23,.90) 30%,
    rgba(38,14,27,.68) 44%,
    rgba(40,15,28,.22) 58%,
    rgba(40,15,28,0)   70%);
}
/* اسلاید بدون نوشته → بدون پرده */
.hero-v83 .hero-slide.is-textless .hero-veil{ background:none; }

/* پیش‌فرض: متن سمت راست کادر (سوژه سمت چپ تصویر) */
/* align=right → متن به سمت چپ کادر منتقل می‌شود و پرده هم قرینه می‌شود */
.hero-v83 .hero-slide[data-align="right"] .hero-veil{ transform:scaleX(-1); }
.hero-v83 .hero-slide[data-align="right"] .hero-content{ align-items:flex-end; text-align:left; }
.hero-v83 .hero-slide[data-align="right"] .hero-content p{ text-align:left; }
.hero-v83 .hero-slide[data-align="right"] .hero-dots{ right:auto; left:clamp(20px,4vw,62px); }
/* align=center → متن وسط، پرده تمام‌عرض */
.hero-v83 .hero-slide[data-align="center"]{ justify-content:center; }
.hero-v83 .hero-slide[data-align="center"] .hero-veil{
  background:linear-gradient(180deg,rgba(255,252,248,.35),rgba(255,252,248,.82));
}
.hero-v83 .hero-slide[data-align="center"].is-dark .hero-veil{
  background:linear-gradient(180deg,rgba(28,10,20,.42),rgba(28,10,20,.86));
}
.hero-v83 .hero-slide[data-align="center"] .hero-content{ align-items:center; text-align:center; }
.hero-v83 .hero-slide[data-align="center"] .hero-content p{ margin-inline:auto; }
.hero-v83 .hero-slide[data-align="center"] .hero-cta,
.hero-v83 .hero-slide[data-align="center"] .hero-trust{ justify-content:center; }
.hero-v83 .hero-slide[data-align="center"] .hero-dots{ right:0; left:0; justify-content:center; }

/* لینک تمام‌صفحه برای اسلاید بدون نوشته */
.hero-v83 .hero-fulllink{ position:absolute; inset:0; z-index:4; }

/* ---------- محتوای متنی ---------- */
.hero-v83 .hero-content{
  position:relative; z-index:3;
  width:100%;
  max-width:1240px;
  margin:0 auto;
  padding:0 clamp(20px,4vw,40px);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:right;
  color:inherit;
}

.hero-v83 .hero-content .badge{
  display:inline-block;
  font-size:clamp(11px,1vw,12.5px) !important;
  font-weight:700;
  padding:7px 16px !important;
  border-radius:99px;
  margin-bottom:clamp(10px,1.4vw,18px);
  line-height:1.8;
  animation:vprHeroUp .7s ease .08s both;
}
.hero-v83 .is-light .badge{ background:var(--vpr-hero-plum); color:#fff; }
.hero-v83 .is-dark  .badge{ background:var(--vpr-hero-gold); color:var(--vpr-hero-plum-dark); }

.hero-v83 .hero-content h1{
  font-size:clamp(1.5rem,3.1vw,2.85rem);
  line-height:1.34 !important;
  font-weight:800 !important;
  letter-spacing:-.4px !important;
  margin:0 0 clamp(8px,1.2vw,15px);
  max-width:min(100%,540px);
  text-shadow:none !important;
  animation:vprHeroUp .7s ease .18s both;
}
.hero-v83 .is-light h1{ color:var(--vpr-hero-ink) !important; }
.hero-v83 .is-dark  h1{ color:#fff !important; }

.hero-v83 .hero-content p{
  font-size:clamp(.86rem,1.05vw,1rem) !important;
  line-height:2.05;
  max-width:min(100%,460px);
  margin:0 0 clamp(14px,2vw,26px);
  animation:vprHeroUp .7s ease .28s both;
}
.hero-v83 .is-light p{ color:#584A52 !important; }
.hero-v83 .is-dark  p{ color:#E7D7E0 !important; }

/* ---------- دکمه‌ها ---------- */
.hero-v83 .hero-cta{
  display:flex; gap:12px; flex-wrap:wrap; max-width:min(100%,540px);
  animation:vprHeroUp .7s ease .38s both;
}
.hero-v83 .hero-cta .btn{
  display:inline-flex; align-items:center; gap:8px;
  font-size:clamp(13px,1vw,14.5px); font-weight:700;
  padding:clamp(11px,1.2vw,15px) clamp(18px,2vw,28px);
  border-radius:12px; text-decoration:none;
  transition:all .25s ease; border:1.5px solid transparent;
  white-space:nowrap;
}
.hero-v83 .hero-cta .btn svg{ width:17px; height:17px; flex:0 0 auto; }

.hero-v83 .is-light .btn-hero-primary{ background:#1C1015; color:#fff; }
.hero-v83 .is-light .btn-hero-primary:hover{ background:var(--vpr-hero-plum); transform:translateY(-2px); box-shadow:0 10px 24px rgba(107,31,67,.28); }
.hero-v83 .is-light .btn-hero-ghost{ background:rgba(255,255,255,.85); color:#3A2029; border-color:#D9CDD4; }
.hero-v83 .is-light .btn-hero-ghost:hover{ background:#fff; border-color:var(--vpr-hero-plum); color:var(--vpr-hero-plum); }

.hero-v83 .is-dark .btn-hero-primary{ background:var(--vpr-hero-gold); color:var(--vpr-hero-plum-dark); }
.hero-v83 .is-dark .btn-hero-primary:hover{ background:#fff; transform:translateY(-2px); box-shadow:0 10px 24px rgba(232,200,119,.3); }
.hero-v83 .is-dark .btn-hero-ghost{ background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.38); backdrop-filter:blur(6px); }
.hero-v83 .is-dark .btn-hero-ghost:hover{ background:rgba(255,255,255,.22); }

/* ---------- نوار اعتماد ---------- */
.hero-v83 .hero-trust{
  list-style:none; margin:clamp(16px,2.2vw,28px) 0 0; padding:0;
  display:flex; gap:clamp(12px,1.6vw,22px); flex-wrap:wrap; max-width:min(100%,540px);
  font-size:clamp(10.5px,.82vw,12px);
  animation:vprHeroUp .7s ease .48s both;
}
.hero-v83 .hero-trust li{ display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
.hero-v83 .hero-trust li::before{ content:"✓"; font-weight:800; }
.hero-v83 .is-light .hero-trust li{ color:#7A6B74; }
.hero-v83 .is-light .hero-trust li::before{ color:#8A2B57; }
.hero-v83 .is-dark  .hero-trust li{ color:#C9B3C0; }
.hero-v83 .is-dark  .hero-trust li::before{ color:var(--vpr-hero-gold); }

@keyframes vprHeroUp{ from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none} }

/* ---------- فلش و نقطه‌ها ---------- */
.hero-v83 .hero-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:46px; height:46px; border-radius:50%;
  background:rgba(255,255,255,.78); backdrop-filter:blur(8px);
  color:#3A2029; border:1px solid rgba(0,0,0,.06);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 16px rgba(0,0,0,.1);
  transition:all .2s ease; cursor:pointer;
}
.hero-v83 .hero-arrow:hover{ background:#fff; box-shadow:0 6px 22px rgba(0,0,0,.16); }
.hero-v83 .hero-arrow.prev{ right:clamp(12px,2vw,26px); }
.hero-v83 .hero-arrow.next{ left:clamp(12px,2vw,26px); }
.hero-v83 .hero-slide.is-dark ~ .hero-arrow{ background:rgba(255,255,255,.2); color:#fff; }

.hero-v83 .hero-dots{
  position:absolute; bottom:clamp(14px,2vw,24px);
  right:clamp(20px,4vw,62px); left:auto; transform:none;
  display:flex; gap:7px; z-index:5;
}
.hero-v83 .hero-dots button{
  width:9px; height:9px; border-radius:99px; border:none; padding:0;
  background:rgba(120,95,110,.42); cursor:pointer;
  transition:all .28s ease;
}
.hero-v83 .hero-dots button.active{ width:26px; background:var(--vpr-hero-plum); }

/* ==========================================================================
   موبایل — تصویر عمودی اختصاصی، متن بالا، دکمه‌های تمام‌عرض
   ========================================================================== */
@media(max-width:768px){
  .hero-slider.hero-v83, .hero-slider.hero-v83 *{ box-sizing:border-box; }
.hero-slider.hero-v83{ border-radius:0 0 22px 22px; }

  .hero-v83 .hero-slide{ align-items:flex-start; }

  .hero-v83 .hero-slide.is-light .hero-veil{
    background:linear-gradient(180deg,
      rgba(255,252,248,.98) 0%,
      rgba(255,252,248,.96) 34%,
      rgba(255,252,248,.88) 48%,
      rgba(255,252,248,.42) 62%,
      rgba(255,252,248,0)   78%);
  }
  .hero-v83 .hero-slide.is-dark .hero-veil{
    background:linear-gradient(180deg,
      rgba(28,10,20,.96) 0%,
      rgba(30,11,21,.93) 34%,
      rgba(36,13,25,.84) 48%,
      rgba(40,15,28,.40) 62%,
      rgba(40,15,28,0)   78%);
  }
  .hero-v83 .hero-slide[data-align="right"] .hero-veil{ transform:none; }

  .hero-v83 .hero-content{
    width:100%; max-width:none;
    padding:clamp(18px,5.5vw,30px) 18px 0 !important;
    margin:0 !important;
    align-items:flex-start;   /* بج به اندازه محتوا، نه تمام‌عرض */
    text-align:right;
  }
  .hero-v83 .hero-content h1,
  .hero-v83 .hero-content p{ max-width:none !important; width:100%; }
  .hero-v83 .hero-cta,
  .hero-v83 .hero-trust{ max-width:none !important; width:100%; }
  .hero-v83 .hero-content .badge{ align-self:flex-start; width:auto; }
  .hero-v83 .hero-slide[data-align="right"] .hero-content,
  .hero-v83 .hero-slide[data-align="center"] .hero-content{ align-items:flex-start; text-align:right; }
  .hero-v83 .hero-slide[data-align="right"] .hero-content p{ text-align:right; }
  .hero-v83 .hero-content h1{ font-size:clamp(1.32rem,6.2vw,1.75rem); line-height:1.42 !important; }
  .hero-v83 .hero-content p{ font-size:.82rem !important; line-height:1.95; max-width:none; margin-bottom:16px; }

  .hero-v83 .hero-cta{ flex-direction:column; gap:9px; }
  .hero-v83 .hero-cta .btn{ width:100%; justify-content:center; padding:13px 16px; font-size:13px; }

  .hero-v83 .hero-trust{
    display:grid; grid-template-columns:1fr 1fr;
    margin-top:14px; gap:8px 10px; font-size:10.5px;
  }
  .hero-v83 .hero-trust li{ white-space:normal; }

  .hero-v83 .hero-arrow{ display:none; }
  .hero-v83 .hero-dots{ right:0; left:0; justify-content:center; bottom:14px; }
}

/* موبایل خیلی کوچک */
@media(max-width:380px){
  .hero-v83 .hero-content h1{ font-size:1.25rem; }
  .hero-v83 .hero-trust{ font-size:9.8px; }
}

/* ---------- USP strip هماهنگ ---------- */
.hero-v83 + .container .usp-strip{
  margin-top:-52px !important;
}
@media(max-width:768px){
  .hero-v83 + .container .usp-strip{ margin-top:16px !important; }
}

/* ---------- کاهش انیمیشن برای کاربران حساس ---------- */
@media (prefers-reduced-motion:reduce){
  .hero-v83 *{ animation:none !important; transition:none !important; }
}

/* ==========================================================================
   VPR Fashion — بنرهای تبلیغاتی صفحه اصلی v8.3
   تصویر بدون متن سوخته + تایپوگرافی HTML روی آن (هم‌سبک با اسلایدر هیرو)
   ========================================================================== */

.vpr-banners-83 .promo-banner{
  position:relative;
  overflow:hidden;
  border-radius:18px;
  background-image:none !important;   /* تصویر با <img> رندر می‌شود */
  display:flex;
  align-items:flex-end;
  transition:transform .3s ease, box-shadow .3s ease;
}
.vpr-banners-83 .promo-banner, .vpr-banners-83 .promo-banner *{ box-sizing:border-box; }
.vpr-banners-83 .promo-banner:hover{ transform:translateY(-6px); box-shadow:0 18px 40px rgba(60,16,41,.18); }

/* لایه گرادیان قدیمی و دیو موبایل غیرفعال */
.vpr-banners-83 .promo-banner::before{ display:none !important; content:none !important; }
.vpr-banners-83 .promo-banner-mob{ display:none !important; }

/* نسبت تصویر — حذف CLS */
.vpr-banners-83 .promo-banner.wide{ aspect-ratio:1910/640; min-height:0 !important; }
.vpr-banners-83 .promo-banner.small{ aspect-ratio:16/9; min-height:0 !important; }
@media(max-width:768px){
  .vpr-banners-83 .promo-banner.wide,
  .vpr-banners-83 .promo-banner.small{ aspect-ratio:1/1; }
}

/* تصویر */
.vpr-banners-83 .pb-media{ position:absolute; inset:0; z-index:0; display:block; width:100%; height:100%; }
.vpr-banners-83 .pb-media img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }

/* پرده خوانایی */
.vpr-banners-83 .pb-veil{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.vpr-banners-83 .promo-banner.is-light .pb-veil{
  background:linear-gradient(270deg,
    rgba(255,252,248,.96) 0%, rgba(255,252,248,.90) 32%,
    rgba(255,252,248,.55) 50%, rgba(255,252,248,0) 72%);
}
.vpr-banners-83 .promo-banner.is-dark .pb-veil{
  background:linear-gradient(270deg,
    rgba(28,10,20,.93) 0%, rgba(34,12,24,.86) 32%,
    rgba(40,15,28,.52) 50%, rgba(40,15,28,0) 72%);
}
.vpr-banners-83 .promo-banner.is-textless .pb-veil{ background:none; }
.vpr-banners-83 .pb-fulllink{ position:absolute; inset:0; z-index:4; }

/* محتوای متنی */
.vpr-banners-83 .pb-content{
  position:relative; z-index:3;
  width:100%;
  padding:clamp(18px,2.4vw,34px) !important;
  text-align:right;
  display:flex; flex-direction:column; align-items:flex-start;
}
.vpr-banners-83 .pb-content h3{
  font-size:clamp(1.05rem,1.7vw,1.6rem) !important;
  font-weight:800; line-height:1.45; margin:0 0 6px !important;
  max-width:min(100%,340px);
}
.vpr-banners-83 .promo-banner.is-light h3{ color:#231018 !important; }
.vpr-banners-83 .promo-banner.is-dark  h3{ color:#fff !important; }

.vpr-banners-83 .pb-content p{
  font-size:clamp(11.5px,.85vw,13px) !important;
  line-height:1.95; margin:0 0 14px !important;
  max-width:min(100%,320px);
}
.vpr-banners-83 .promo-banner.is-light p{ color:#5D4F57 !important; }
.vpr-banners-83 .promo-banner.is-dark  p{ color:#E4D3DD !important; }

/* دکمه بنر */
.vpr-banners-83 .btn-pb{
  display:inline-flex; align-items:center; gap:7px;
  font-size:12.5px; font-weight:700;
  padding:10px 20px; border-radius:10px;
  text-decoration:none; border:1.5px solid transparent;
  transition:all .25s ease; white-space:nowrap;
}
.vpr-banners-83 .btn-pb svg{ width:15px; height:15px; flex:0 0 auto; }
.vpr-banners-83 .promo-banner.is-light .btn-pb{ background:#1C1015; color:#fff; }
.vpr-banners-83 .promo-banner.is-light .btn-pb:hover{ background:var(--vpr-hero-plum,#6B1F43); }
.vpr-banners-83 .promo-banner.is-dark .btn-pb{ background:var(--vpr-hero-gold,#E8C877); color:#3C1029; }
.vpr-banners-83 .promo-banner.is-dark .btn-pb:hover{ background:#fff; }

/* موبایل — متن بالا، تصویر پایین (هم‌سبک هیرو) */
@media(max-width:768px){
  .vpr-banners-83 .promo-banner{ align-items:flex-start; border-radius:16px; }
  .vpr-banners-83 .promo-banner.is-light .pb-veil{
    background:linear-gradient(180deg,
      rgba(255,252,248,.97) 0%, rgba(255,252,248,.93) 32%,
      rgba(255,252,248,.60) 50%, rgba(255,252,248,0) 72%);
  }
  .vpr-banners-83 .promo-banner.is-dark .pb-veil{
    background:linear-gradient(180deg,
      rgba(28,10,20,.95) 0%, rgba(34,12,24,.90) 32%,
      rgba(40,15,28,.58) 50%, rgba(40,15,28,0) 72%);
  }
  .vpr-banners-83 .pb-content h3,
  .vpr-banners-83 .pb-content p{ max-width:none; }
  .vpr-banners-83 .btn-pb{ width:auto; }
}