/* ===== Banner Slider Pro ===== */

.bsp-wrapper {
    position: relative;
    width: 100%;
    padding: 20px 0 50px;
    overflow: hidden;
    direction: rtl;
}

.bsp-track {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--bsp-active-height, 480px);
}

.bsp-slide {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(78%, 1100px);
    height: var(--bsp-active-height, 480px);
    border-radius: 22px;
    overflow: hidden;
    transform: translate(-50%, -50%) scale(1);
    transition: transform 0.7s cubic-bezier(.22,.61,.36,1),
                width 0.7s cubic-bezier(.22,.61,.36,1),
                height 0.7s cubic-bezier(.22,.61,.36,1),
                opacity 0.7s ease, filter 0.7s ease;
    opacity: 0;
    z-index: 1;
    pointer-events: none;
}

/* اسلاید فعال (وسط) */
.bsp-slide.is-active {
    opacity: 1;
    z-index: 3;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
}

/* اسلاید بعدی (سمت چپ در RTL) */
.bsp-slide.is-next {
    opacity: 1;
    z-index: 2;
    height: var(--bsp-side-height, 340px);
    width: min(55%, 780px);
    transform: translate(-135%, -50%) scale(0.92);
    filter: brightness(0.55);
    pointer-events: auto;
}

/* اسلاید قبلی (سمت راست در RTL) */
.bsp-slide.is-prev {
    opacity: 1;
    z-index: 2;
    height: var(--bsp-side-height, 340px);
    width: min(55%, 780px);
    transform: translate(35%, -50%) scale(0.92);
    filter: brightness(0.55);
    pointer-events: auto;
}

.bsp-slide.is-hidden {
    opacity: 0;
    pointer-events: none;
}

.bsp-slide-inner {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    background-color: #222;
}

/* لایه تصویر پس‌زمینه (جدا از محتوا تا زوم Ken Burns روی متن اثر نگذارد) */
.bsp-slide-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1);
    transform-origin: center center;
    will-change: transform;
}

.bsp-slide-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, var(--bsp-overlay-opacity, 0.3));
    pointer-events: none;
}

.bsp-slide-content {
    position: absolute;
    z-index: 1;
    padding: 30px;
    max-width: 480px;
}
.bsp-slide-content .bsp-title,
.bsp-slide-content .bsp-description,
.bsp-slide-content .bsp-subtitle {
    text-shadow: 0 2px 12px rgba(0,0,0,.55);
}

/* ===== ۹ موقعیت ممکن برای متن/دکمه روی بنر ===== */
.bsp-pos-top-left      { top: 34px; left: 34px; text-align: left; }
.bsp-pos-top-center    { top: 34px; left: 50%; transform: translateX(-50%); text-align: center; }
.bsp-pos-top-right     { top: 34px; right: 34px; text-align: right; }
.bsp-pos-middle-left   { top: 50%; left: 34px; transform: translateY(-50%); text-align: left; }
.bsp-pos-middle-center { top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }
.bsp-pos-middle-right  { top: 50%; right: 34px; transform: translateY(-50%); text-align: right; }
.bsp-pos-bottom-left   { bottom: 34px; left: 34px; text-align: left; }
.bsp-pos-bottom-center { bottom: 34px; left: 50%; transform: translateX(-50%); text-align: center; }
.bsp-pos-bottom-right  { bottom: 34px; right: 34px; text-align: right; }

/* ===== Ken Burns: بزرگ‌نمایی تدریجی تصویر تا پایان نوبت اسلاید فعال ===== */
.bsp-wrapper.bsp-kenburns .bsp-slide.is-active .bsp-slide-bg {
    animation: bsp-kenburns-zoom var(--bsp-kenburns-duration, 5000ms) ease-in-out forwards;
}
@keyframes bsp-kenburns-zoom {
    from { transform: scale(1); }
    to   { transform: scale(var(--bsp-kenburns-scale, 1.15)); }
}

.bsp-subtitle {
    display: inline-block;
    font-size: 15px;
    opacity: .85;
    margin-bottom: 10px;
    letter-spacing: .5px;
}

.bsp-title {
    font-size: clamp(22px, 3vw, 38px);
    font-weight: 700;
    margin: 0 0 14px;
    line-height: 1.35;
}

.bsp-description {
    font-size: 15px;
    line-height: 1.9;
    opacity: .9;
    margin: 0 0 22px;
}

.bsp-slide:not(.is-active) .bsp-slide-content {
    display: none; /* در اسلایدهای کناری فقط تصویر نشان داده می‌شود */
}

/* ===== دکمه‌های فلش ===== */
.bsp-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: none;
    background: var(--bsp-arrow-bg, rgba(0,0,0,.45));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    transition: background .3s, transform .3s;
}
.bsp-arrow:hover {
    background: var(--bsp-neon-color, #E7CA6C);
    color: #111;
}
.bsp-arrow-prev { right: 4%; }
.bsp-arrow-next { left: 4%; }

/* ===== نقاط پیجینیشن ===== */
.bsp-dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 5;
}
.bsp-dots button {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: none;
    background: var(--bsp-dot-color, rgba(255,255,255,.4));
    cursor: pointer;
    padding: 0;
    transition: background .3s, width .3s;
}
.bsp-dots button.is-active {
    background: var(--bsp-dot-active-color, var(--bsp-neon-color, #E7CA6C));
    width: 22px;
    border-radius: 6px;
}

/* ===== دکمه نئونی (Magic Button) - سه لایه واقعی ===== */
.bsp-neon-btn {
    --bsp-radius: 50px;
    position: relative;
    display: inline-flex;
    text-decoration: none;
    border-radius: var(--bsp-radius);
    overflow: visible;
}

/* لایه ۱ (زیرین): هاله‌ی محو و چرخان دور دکمه */
.bsp-neon-halo {
    position: absolute;
    inset: -14px;
    border-radius: 999px;
    background: conic-gradient(from var(--angle), transparent 50deg, var(--bsp-neon-color, #E7CA6C) 360deg);
    filter: blur(16px);
    opacity: .85;
    animation: bsp-rotate 2500ms linear infinite;
    pointer-events: none;
}

/* لایه ۲: حلقه‌ی نازک و چرخان (دقیقاً به اندازه‌ی دکمه) */
.bsp-neon-ring {
    position: absolute;
    inset: 0;
    border-radius: var(--bsp-radius);
    background: conic-gradient(from var(--angle), transparent 50deg, var(--bsp-neon-color, #E7CA6C) 360deg);
    animation: bsp-rotate 2500ms linear infinite;
    pointer-events: none;
}

/* لایه ۳: مربع لبه‌گرد مشکی، ۲px کوچک‌تر از حلقه تا فقط لبه‌ی نور دیده شود */
.bsp-neon-fill {
    position: absolute;
    inset: 2px;
    border-radius: calc(var(--bsp-radius) - 2px);
    background: var(--bsp-btn-bg, #0a0a0c);
    pointer-events: none;
}

/* لایه ۴ (رویی): متن دکمه */
.bsp-neon-text {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 32px;
    color: var(--bsp-btn-text, var(--bsp-neon-color, #E7CA6C));
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    transition: color .4s;
}

@property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
@keyframes bsp-rotate {
    to { --angle: 360deg; }
}

/* هاور: توقف چرخش + نور یکدست پررنگ دور دکمه */
.bsp-neon-btn:hover .bsp-neon-halo,
.bsp-neon-btn:hover .bsp-neon-ring {
    animation-play-state: paused;
    background: conic-gradient(from var(--angle), var(--bsp-neon-color, #E7CA6C) 0deg, var(--bsp-neon-color, #E7CA6C) 360deg);
}
.bsp-neon-btn:hover .bsp-neon-text {
    color: #fff;
}

/* ===== واکنش‌گرا ===== */
@media (max-width: 900px) {
    .bsp-slide.is-next,
    .bsp-slide.is-prev { opacity: 0; pointer-events: none; }
    .bsp-slide.is-active { width: 92%; }
    .bsp-slide-content { padding: 26px; }
    .bsp-arrow-prev { right: 3%; }
    .bsp-arrow-next { left: 3%; }
}