/* =========================================
   VIO Advance Slider — advance-slider.css
   نویسنده: حسین نظری | تیم VIO
   vioweb.ir | v1.0.0
   ========================================= */

/* ── پوشش کلی ── */
.vio-as-wrapper {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    padding: 40px 0;
    overflow: hidden;
}

/* فید محو دو طرف — کارت‌ها از لبه محو می‌شوند */
.vio-as-wrapper::before,
.vio-as-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 120px;
    z-index: 10;
    pointer-events: none;
}
.vio-as-wrapper::before {
    left: 0;
    background: linear-gradient(to right, #ffffff 0%, transparent 100%);
}
.vio-as-wrapper::after {
    right: 0;
    background: linear-gradient(to left, #ffffff 0%, transparent 100%);
}

.vio-as-swiper {
    overflow: visible !important;
    width: 100%;
}

.vio-as-swiper .swiper-wrapper {
    align-items: center;
}

/* ══════════════════════════════════════════
   کارت — پایه
══════════════════════════════════════════ */
.vio-as-card {
    position: relative;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transition:
        transform      0.5s cubic-bezier(0.25,0.46,0.45,0.94),
        box-shadow     0.5s ease,
        border-radius  0.5s ease;
}

/* ══════════════════════════════════════════
   ۴ حالت شکل
══════════════════════════════════════════ */

/* — گرد — */
.vio-as-shape-rounded .vio-as-card,
.vio-as-shape-rounded .vio-as-overlay {
    border-radius: 24px;
}

/* — مربع — */
.vio-as-shape-square .vio-as-card,
.vio-as-shape-square .vio-as-overlay {
    border-radius: 6px;
}

/* — بیضی — */
.vio-as-shape-circle .vio-as-card,
.vio-as-shape-circle .vio-as-overlay {
    border-radius: 50% / 40%;
}

/* ════════════════════════════════════════════════
   — ویژه: گنبد از بالا + لبه راست + گرد پایین —

   border-radius: TL TR BR BL / TL-v TR-v BR-v BL-v

   بالا چپ/راست:
     افقی = 50%  → دو گوشه کنار هم = گنبد کامل روی کل عرض
     عمودی = 15% → ارتفاع گنبد (% از height کارت)

   پایین چپ/راست:
     افقی = عدد ثابت (px)
     عمودی = همان مقدار → گوشه‌های گرد استاندارد
   
   نتیجه:
     ┌────────────────┐  ← گنبد نرم
     │                │  ← لبه‌های راست کنار
     │                │
     └────────────────┘  ← گوشه‌های گرد پایین
════════════════════════════════════════════════ */
.vio-as-shape-special .vio-as-card {
    border-radius: 50% 50% 22px 22px / 15% 15% 22px 22px;
}
.vio-as-shape-special .vio-as-overlay {
    border-radius: inherit;
}

/* ══════════════════════════════════════════
   اورلی گرادیان
══════════════════════════════════════════ */
.vio-as-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    transition: opacity 0.4s ease;
    pointer-events: none;
    border-radius: inherit;
}

/* ══════════════════════════════════════════
   اسلاید فعال / غیرفعال (مدیریت از JS)
══════════════════════════════════════════ */
.vio-as-swiper .swiper-slide {
    transition:
        transform 0.55s cubic-bezier(0.25,0.46,0.45,0.94),
        opacity   0.55s ease;
    transform-origin: center center;
    will-change: transform, opacity;
}

/* اورلی کارت‌های غیرفعال — کم‌رنگ‌تر */
.vio-as-swiper .swiper-slide:not(.swiper-slide-active) .vio-as-overlay {
    opacity: var(--vio-ov-inactive, 0.5);
}
.vio-as-swiper .swiper-slide-active .vio-as-overlay {
    opacity: 1;
}

/* ══════════════════════════════════════════
   هاور روی کارت‌های غیرفعال
   — اورلی شفاف می‌شود (عکس زیرین دیده می‌شود)
══════════════════════════════════════════ */
.vio-as-swiper .swiper-slide:not(.swiper-slide-active) .vio-as-card:hover .vio-as-overlay {
    opacity: var(--vio-ov-hover, 0.18) !important;
    transition: opacity 0.35s ease;
}
/* کمی بزرگ‌تر شدن کارت کناری هنگام هاور */
.vio-as-swiper .swiper-slide:not(.swiper-slide-active) .vio-as-card:hover {
    filter: brightness(1.05);
}

/* ══════════════════════════════════════════
   محتوا
══════════════════════════════════════════ */
.vio-as-content {
    position: relative;
    z-index: 2;
    padding: 0 22px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
}

/* حالت ویژه: محتوا کمی بالاتر چون گوشه‌های پایین گرد هستند */
.vio-as-shape-special .vio-as-content {
    padding-bottom: 52px;
}

/* ── برچسب با خط کناری ── */
.vio-as-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #D4A843;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.03em;
    white-space: nowrap;
}
.vio-as-badge::before,
.vio-as-badge::after {
    content: '';
    display: block;
    width: 26px;
    height: 1.5px;
    background: #D4A843;
    flex-shrink: 0;
}

/* ── عنوان ── */
.vio-as-title {
    margin: 0; padding: 0;
    color: #FFFFFF;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 1.5px;
    text-align: center;
    text-shadow: 0 2px 14px rgba(0,0,0,0.28);
    direction: rtl;
}
[dir="ltr"] .vio-as-title { direction: ltr; }

/* ══════════════════════════════════════════
   دکمه‌های ناوبری
══════════════════════════════════════════ */
.vio-as-prev,
.vio-as-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 30;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 3px 18px rgba(0,0,0,0.13);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.25s, box-shadow 0.25s, transform 0.25s;
    border: none; outline: none;
}
.vio-as-prev { left: 30px; }
.vio-as-next { right: 30px; }

[dir="rtl"] .vio-as-prev { left: 30px;  right: auto; }
[dir="rtl"] .vio-as-next { right: 30px; left: auto;  }

.vio-as-prev::after,
.vio-as-next::after {
    font-size: 15px !important;
    color: #555555 !important;
    font-weight: 700;
}
.vio-as-prev:hover,
.vio-as-next:hover {
    background: #f9f9f9;
    box-shadow: 0 6px 26px rgba(0,0,0,0.17);
    transform: translateY(-50%) scale(1.07);
}
.vio-as-prev:active,
.vio-as-next:active {
    transform: translateY(-50%) scale(0.95);
}
.vio-as-prev.swiper-button-disabled,
.vio-as-next.swiper-button-disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

/* ══════════════════════════════════════════
   لینک کارت
══════════════════════════════════════════ */
.vio-as-card-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
}
/*.swiper-slide-active .vio-as-card {*/
/*    transform: scale(1.05);*/
/*    width: 350px;*/
/*    height: 480px;*/
/*}*/
/* ══════════════════════════════════════════
   واکنش‌گرا
══════════════════════════════════════════ */
@media (max-width: 1024px) {
    .vio-as-wrapper { padding: 28px 0; }
    .vio-as-title   { font-size: 20px; }
}
/*@media (max-width: 767px) {*/
/*    .vio-as-wrapper { padding: 18px 0; }*/
/*    .vio-as-title   { font-size: 16px; letter-spacing: 1px; }*/
/*    .vio-as-badge   { font-size: 12px; }*/
/*    .vio-as-prev,*/
/*    .vio-as-next    { width: 38px; height: 38px; }*/
/*    .vio-as-prev::after,*/
/*    .vio-as-next::after { font-size: 12px !important; }*/
/*    .vio-as-content { padding: 0 12px 18px; }*/
/*    .vio-as-shape-special .vio-as-content { padding-bottom: 38px; }*/
/*    .vio-as-card{*/
/*    width: 215px !important;*/
/*    height: 320px !important;*/
/*    }*/
/*    h3.vio-as-title {*/
/*        font-size: 17px !important;*/
/*    }*/
/*}*/

/* ══════════════════════════════════════════
   انیمیشن ورود
══════════════════════════════════════════ */
@keyframes vioAsIn {
    from { opacity:0; transform:translateY(18px); }
    to   { opacity:1; transform:translateY(0); }
}
.vio-as-wrapper { animation: vioAsIn 0.5s ease both; }











/* Swiper slide */
.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.5s ease;
}

.vio-as-card{
    position: relative;
    width: 320px;
    height: 430px;
    overflow: hidden;

    background-size: cover;
    background-position: center;

    box-shadow: 0 10px 25px rgba(0,0,0,0.18);

    transition: all 0.4s ease;

    /* PERFECT SYMMETRIC SHAPE */
    -webkit-mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 430'>\
<path fill='white' d='\
M35 45 \
Q160 85 285 45 \
Q320 35 320 75 \
V355 \
Q320 395 285 385 \
Q160 345 35 385 \
Q0 395 0 355 \
V75 \
Q0 35 35 45 \
Z'/>\
</svg>");

    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;

    mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 430'>\
<path fill='white' d='\
M35 45 \
Q160 85 285 45 \
Q320 35 320 75 \
V355 \
Q320 395 285 385 \
Q160 345 35 385 \
Q0 395 0 355 \
V75 \
Q0 35 35 45 \
Z'/>\
</svg>");

    mask-size: 100% 100%;
    mask-repeat: no-repeat;
}


/* Purple overlay */
.vio-as-overlay{
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(155,55,145,0.25),
        rgba(85,38,195,0.90)
    );

    z-index: 1;
}

/* Content */
.vio-as-content{
    position: absolute;
    bottom: 35px;
    width: 100%;
    text-align: center;
    z-index: 2;
    padding: 0 20px;
    color: #fff;
}

/* Badge */
.vio-as-badge{
    display: inline-block;
    margin-bottom: 12px;
    font-size: 14px;
    color: #f6d34f;
    position: relative;
    font-weight: 600;
}

.vio-as-badge::before,
.vio-as-badge::after{
    content: "";
    position: absolute;
    top: 50%;
    width: 18px;
    height: 2px;
    background: #f6d34f;
}

.vio-as-badge::before{
    right: -24px;
}

.vio-as-badge::after{
    left: -24px;
}

/* Title */
.vio-as-title{
    font-size: 28px;
    font-weight: 700;
    margin: 0;
    line-height: 1.5;
    color: #fff;
}

/* Hover effect */
.vio-as-card:hover{
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0,0,0,0.28);
}

/* Active center slide */
.swiper-slide-active .vio-as-card{
    transform: scale(1.05);
}