/* ===== Ashrafi Web Stories — Final Circle Story UI ===== */

/* ریشه: کانتینر اصلی */
.awsp-stories{
  width:var(--awsp-width,100%);
  display:flex;
  gap:var(--awsp-gap,16px);
  direction:rtl;
  flex-wrap:nowrap;
  align-items:center;
  justify-content:flex-start;
  box-sizing:border-box;
}

/* ✅ حالت چند ردیفه */
.awsp-stories.awsp-wrap{
  flex-wrap:wrap !important;
  overflow:visible;
}

/* حالت اسکرول */
.awsp-stories.awsp-scroll{
  overflow-x:auto;
  overflow-y:hidden;
  white-space:nowrap;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
  padding-bottom:8px;
}

/* Snap */
.awsp-stories.awsp-snap{
  scroll-snap-type:x mandatory;
}
.awsp-stories.awsp-snap .awsp-item-holder{
  scroll-snap-align:center;
}

/* اسکرول‌بار مینیمال */
.awsp-stories.awsp-scroll:not(.awsp-scrollbar){
  scrollbar-width:none;
}
.awsp-stories.awsp-scroll:not(.awsp-scrollbar)::-webkit-scrollbar{
  display:none;
}
.awsp-stories.awsp-scroll.awsp-scrollbar::-webkit-scrollbar{
  height:6px;
}
.awsp-stories.awsp-scroll.awsp-scrollbar::-webkit-scrollbar-thumb{
  background:rgba(0,0,0,.2);
  border-radius:4px;
}

/* ستون: آیتم + عنوان */
.awsp-item-holder{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  min-width:max-content;
}

/* ✅ دایره دقیق */
.awsp-item{
  width:var(--awsp-size,80px);
  height:var(--awsp-size,80px);
  aspect-ratio:1/1 !important;
  border-radius:50% !important;
  display:grid;
  place-items:center;
  overflow:hidden;
  cursor:pointer;
  transition:.25s;
  box-sizing:content-box;

  padding:var(--awsp-padding,3px);
  border:var(--awsp-border,5px) solid transparent;
  border-image:linear-gradient(45deg,var(--awsp-c1,#C4007A),var(--awsp-c2,#9A00FF)) 1;
}

/* حالت رنگ ثابت */
.awsp-item.awsp-solid{
  border-image:none !important;
  border-color:var(--awsp-c1,#C4007A) !important;
}

/* حالت دیده‌شده */
.awsp-item.viewed{
  border-image:none !important;
  border-color:#aaa !important;
  opacity:.9;
}

/* Hover */
.awsp-item:hover{
  transform:scale(1.07);
}

/* تصویر داخلی */
.awsp-item img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  border-radius:50% !important;
  display:block;
}

/* عنوان */
.awsp-title{
  margin-top:6px;
  font-size:12.5px;
  font-weight:500;
  color:#222;
  max-width:calc(var(--awsp-size,80px) + 6px);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ✅ موبایل */
@media(max-width:600px){
  .awsp-stories{
    gap:12px;
  }
  .awsp-item{
    width:70px;
    height:70px;
  }
}
/* ==== HARD FIX: perfect circle + round gradient ring (Elementor-safe) ==== */
/* ۱) هرچی قالب تزریق کرده رو خنثی کن */
.elementor-widget-container .awsp-item-holder{ margin:0 !important; }
.elementor-widget-container .awsp-item{
  width:var(--awsp-size,80px) !important;
  height:var(--awsp-size,80px) !important;
  aspect-ratio:1/1 !important;
  border-radius:50% !important;
  overflow:hidden !important;
  display:inline-flex !important;
  justify-content:center; align-items:center;
}

/* ۲) حلقه‌ی گرادیانی کاملا دایره‌ای (جایگزین border-image که گاهی مربع می‌شود) */
.elementor-widget-container .awsp-item{
  /* از همون متغیرهای قبلی استفاده می‌کنیم */
  border: var(--awsp-border,5px) solid transparent !important;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(45deg, var(--awsp-c1,#C4007A), var(--awsp-c2,#9A00FF)) border-box;
  border-radius:50% !important;
}

/* ۳) حالت رنگ ثابت */
.elementor-widget-container .awsp-item.awsp-solid{
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(var(--awsp-c1,#C4007A), var(--awsp-c1,#C4007A)) border-box !important;
}

/* ۴) دیده‌شده (خاکستری) */
.elementor-widget-container .awsp-item.viewed{
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(#aaa,#aaa) border-box !important;
}

/* ۵) خود تصویر هم حتما دایره بماند */
.elementor-widget-container .awsp-item img{
  width:100% !important; height:100% !important;
  object-fit:cover !important; border-radius:50% !important; display:block;
}
/* ========================
   Hover Effect Variants
   ======================== */

/* default transition */
.awsp-item{
  transition: .25s ease-in-out !important;
}

/* None */
.awsp-hover-none:hover{
  transform:none !important;
  box-shadow:none !important;
}

/* Scale */
.awsp-hover-scale:hover{
  transform:scale(1.1);
}

/* Rotate slight */
.awsp-hover-rotate:hover{
  transform:rotate(6deg) scale(1.05);
}

/* Float Up */
.awsp-hover-float{
  transition:transform .35s cubic-bezier(.34,1.56,.64,1);
}
.awsp-hover-float:hover{
  transform:translateY(-6px) scale(1.07);
}

/* Glow Ring */
.awsp-hover-glow:hover{
  box-shadow:0 0 14px var(--awsp-c1,#C4007A);
  transform:scale(1.05);
}
/* ===== Layout strategy additions (keep existing CSS intact) ===== */

/* Container-wide offset (track) */
.awsp-stories{
  transform: translateX(var(--awsp-offset, 0px));
}

/* Auto: symmetric justify per count (set inline via --awsp-justify) */
.awsp-stories.awsp-auto{
  display:flex;
  flex-wrap:nowrap;
  justify-content: var(--awsp-justify, center);
  gap: var(--awsp-gap, 16px);
}

/* Keep scroll behavior as before */
.awsp-stories.awsp-scroll.awsp-auto{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Free (manual) placement */
.awsp-stories.awsp-free{
  display:flex;
  flex-wrap: nowrap;
  justify-content:flex-start;
  gap: var(--awsp-gap, 16px);
  overflow: visible;
}

.awsp-stories.awsp-free .awsp-item-holder{
  transform: translateX(var(--awsp-x, 0px)); /* per-item offset */
}