/* استایل‌های اصلی نوار اطلاع رسانی */
#notification-bar-container {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 1;
    font-family: inherit;
}

.notification-bar {
    width: 100%;
    min-height: 80px;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.notification-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    display: flex;
    align-items: center;
    min-height: 80px;
}

/* دکمه بستن - فقط آیکن (بدون متن) تا فضای کمتری اشغال کند و محتوای وسط نوار
   (خصوصاً شمارشگر) به سمت چپ هل داده نشود. نسخه قبلی متن «بستن» هم داشت که
   خصوصاً در موبایل باعث می‌شد فضای رزرو‌شده برای دکمه بیش از حد لازم باشد. */
.close-btn {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.18);
    border: none;
    color: inherit;
    padding: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    flex-shrink: 0;
}

.close-btn:hover {
    background: rgba(255, 255, 255, 0.32);
    transform: translateY(-50%) scale(1.08);
}

.close-btn:active {
    transform: translateY(-50%) scale(0.94);
}

.close-icon {
    width: 13px;
    height: 13px;
    pointer-events: none;
}

/* محتوای اصلی */
.content-wrapper {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 30px;
}

/* بخش اسلایدها */
.slides-section {
    flex: 1;
    min-height: 50px;
    display: flex;
    align-items: center;
    min-width: 0; /* مهم برای جلوگیری از overflow */
}

.slides-container {
    position: relative;
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    min-width: 0; /* مهم برای جلوگیری از overflow */
    perspective: 600px; /* برای افکت سه‌بعدی چرخش (flip) */
}

.slide-item {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0; /* مهم برای جلوگیری از overflow */
}

/* افکت‌های تغییر اسلاید - هرکدام با کلاسی که سرور روی .slides-container قرار می‌دهد فعال می‌شود.
   نسخه قبلی مقدار افکت انتخابی را می‌خواند ولی هیچ‌وقت استفاده نمی‌کرد، پس همه‌ی گزینه‌ها
   عملاً یک افکت محو شدن یکسان داشتند. */

/* محو شدن (fade) - پیش‌فرض */
.effect-fade .slide-item {
    opacity: 0;
    transition: opacity 0.5s ease;
}

.effect-fade .slide-item.active {
    opacity: 1;
}

/* کشیدن (slide) */
.effect-slide .slide-item {
    opacity: 0;
    transform: translateX(24px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.effect-slide .slide-item.active {
    opacity: 1;
    transform: translateX(0);
}

/* زوم (zoom) */
.effect-zoom .slide-item {
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.effect-zoom .slide-item.active {
    opacity: 1;
    transform: scale(1);
}

/* چرخش (flip) */
.effect-flip .slide-item {
    opacity: 0;
    transform: rotateX(90deg);
    transition: opacity 0.4s ease, transform 0.4s ease;
    transform-origin: 50% 50%;
}

.effect-flip .slide-item.active {
    opacity: 1;
    transform: rotateX(0deg);
}

.slide-text {
    font-family: inherit;
    text-align: center;
    line-height: 1.4;
    font-weight: 500;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
}

/* بخش شمارشگر */
.countdown-section {
    flex-shrink: 0;
}

#countdown-timer {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: inherit;
    background: rgba(255, 255, 255, 0.15);
    padding: 12px 16px;
    border-radius: 8px;
    backdrop-filter: blur(10px);
    flex-shrink: 0;
}

.countdown-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 35px;
}

.countdown-number {
    font-size: 18px;
    font-weight: bold;
    line-height: 1;
    font-family: inherit;
}

.countdown-label {
    font-size: 10px;
    opacity: 0.9;
    margin-top: 2px;
    font-family: inherit;
}

.countdown-separator {
    font-size: 16px;
    font-weight: bold;
    opacity: 0.8;
    margin: 0 2px;
}

/* چیدمان بدون دکمه بستن */
.notification-bar.without-close-button .content-wrapper {
    justify-content: center;
}

.notification-bar.without-close-button .countdown-section {
    margin-left: auto;
}

/* چیدمان با دکمه بستن - چون دکمه اکنون فقط آیکن ۳۲ پیکسلی است (نه دکمه متنی عریض)،
   فضای رزرو‌شده هم متناسب کوچک شده تا شمارشگر/محتوا به سمت چپ هل داده نشود. */
.notification-bar.with-close-button .content-wrapper {
    padding-right: 56px;
}

.notification-bar.with-close-button .countdown-section {
    margin-left: auto;
}

/* دکمه CTA (اقدام به عمل) - رنگ‌ها و شعاع گوشه از پنل تنظیمات و به‌صورت inline style
   کنترل می‌شوند؛ اینجا فقط چیدمان و رفتار (hover/transition) تعریف می‌شود. */
.cta-section {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 22px;
    font-family: inherit;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

.cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
    filter: brightness(1.05);
}

.cta-button:active {
    transform: translateY(0);
    filter: brightness(0.97);
}

/* نوار پیشرفت برای مخفی شدن خودکار */
.progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.2);
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: rgba(255, 255, 255, 0.6);
    width: 100%;
    transform: translateX(-100%);
    animation: progress-fill linear forwards;
}

@keyframes progress-fill {
    to {
        transform: translateX(0);
    }
}

/* ==========================================================================
   انیمیشن‌های پس‌زمینه (۱۵ مورد)

   همه به‌صورت لایه‌ی overlay (با ::before/::after یا فیلتر) پیاده‌سازی شده‌اند
   تا مستقل از نوع پس‌زمینه (رنگ ساده/گرادیانت/تصویر) درست کار کنند. نسخه قبلی
   دو باگ داشت که اینجا رفع شده:
   - gradient-wave فقط وقتی پس‌زمینه خودش یک گرادیانت چندرنگ بزرگ بود قابل مشاهده
     بود؛ روی رنگ ساده یا تصویر عملاً هیچ افکتی دیده نمی‌شد.
   - aurora کل پس‌زمینه را با ۴ رنگ ثابت جایگزین می‌کرد و رنگ/گرادیانت/تصویر
     انتخابی کاربر را کاملاً نادیده می‌گرفت.
   ========================================================================== */

/* --- موج گرادیانت (بازنویسی‌شده) --- */
.bg-gradient-wave::before {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
    animation: gradient-wave 4.5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes gradient-wave {
    0% { left: -60%; }
    100% { left: 130%; }
}

/* --- حباب‌های شناور --- */
.bg-floating-bubbles::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.14) 2px, transparent 2px),
        radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.14) 1px, transparent 1px),
        radial-gradient(circle at 40% 70%, rgba(255, 255, 255, 0.14) 1.5px, transparent 1.5px);
    background-size: 50px 50px, 30px 30px, 40px 40px;
    animation: floating-bubbles 20s linear infinite;
    pointer-events: none;
}

@keyframes floating-bubbles {
    0% { transform: translateY(0); }
    100% { transform: translateY(-100px); }
}

/* --- درخشش نابض --- */
.bg-pulse-glow {
    animation: pulse-glow 3s ease-in-out infinite alternate;
}

@keyframes pulse-glow {
    from { box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.15); }
    to { box-shadow: inset 0 0 40px rgba(255, 255, 255, 0.35); }
}

/* --- خطوط مورب متحرک --- */
.bg-sliding-diagonal::before {
    content: '';
    position: absolute;
    top: 0;
    left: -20px;
    right: -20px;
    bottom: 0;
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(255, 255, 255, 0.06) 10px,
        rgba(255, 255, 255, 0.06) 20px
    );
    animation: sliding-diagonal 10s linear infinite;
    pointer-events: none;
}

@keyframes sliding-diagonal {
    0% { transform: translateX(-40px); }
    100% { transform: translateX(40px); }
}

/* --- شفق قطبی (بازنویسی‌شده) --- */
.bg-aurora::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    right: -50%;
    bottom: -50%;
    background: linear-gradient(45deg, rgba(102, 126, 234, 0.35), rgba(240, 147, 251, 0.35), rgba(245, 87, 108, 0.35), rgba(118, 75, 162, 0.35));
    background-size: 400% 400%;
    animation: aurora 12s ease infinite;
    pointer-events: none;
}

@keyframes aurora {
    0%, 100% { background-position: 0% 50%; }
    25% { background-position: 100% 50%; }
    50% { background-position: 100% 100%; }
    75% { background-position: 0% 100%; }
}

/* --- درخشش براق (جدید) --- */
.bg-shimmer::before {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 45%;
    height: 100%;
    background: linear-gradient(75deg, transparent 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100%);
    animation: shimmer 3.2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes shimmer {
    0% { left: -60%; }
    60%, 100% { left: 140%; }
}

/* --- ستاره‌های چشمک‌زن (جدید) --- */
.bg-stars-twinkle::before,
.bg-stars-twinkle::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-repeat: no-repeat;
    pointer-events: none;
}

.bg-stars-twinkle::before {
    background-image:
        radial-gradient(circle, #fff 1px, transparent 1px),
        radial-gradient(circle, #fff 1.5px, transparent 1.5px);
    background-position: 12% 25%, 65% 30%;
    animation: stars-twinkle 2s ease-in-out infinite alternate;
}

.bg-stars-twinkle::after {
    background-image:
        radial-gradient(circle, #fff 1px, transparent 1px),
        radial-gradient(circle, #fff 1px, transparent 1px);
    background-position: 35% 65%, 88% 55%;
    animation: stars-twinkle 2.4s ease-in-out infinite alternate-reverse;
}

@keyframes stars-twinkle {
    0% { opacity: 0.15; }
    100% { opacity: 0.85; }
}

/* --- بارش کانفتی (جدید) --- */
.bg-confetti-fall::before,
.bg-confetti-fall::after {
    content: '';
    position: absolute;
    top: -20px;
    left: 0;
    right: 0;
    bottom: -20px;
    background-repeat: repeat;
    pointer-events: none;
}

.bg-confetti-fall::before {
    background-image:
        radial-gradient(circle, #fde68a 2px, transparent 2px),
        radial-gradient(circle, #93c5fd 2px, transparent 2px);
    background-size: 40px 40px, 55px 55px;
    animation: confetti-fall-a 3s linear infinite;
}

.bg-confetti-fall::after {
    background-image:
        radial-gradient(circle, #fca5a5 2px, transparent 2px),
        radial-gradient(circle, #86efac 2px, transparent 2px);
    background-size: 45px 45px, 60px 60px;
    animation: confetti-fall-b 3.6s linear infinite;
}

@keyframes confetti-fall-a {
    0% { background-position: 10% -10%, 60% -10%; }
    100% { background-position: 10% 110%, 60% 110%; }
}

@keyframes confetti-fall-b {
    0% { background-position: 30% -10%, 80% -10%; }
    100% { background-position: 30% 110%, 80% 110%; }
}

/* --- قاب نئونی درخشان (جدید) - رنگ درخشش همان رنگ متن انتخابی است تا همیشه هماهنگ باشد --- */
.bg-neon-pulse-border {
    animation: neon-pulse-border 2s ease-in-out infinite alternate;
}

@keyframes neon-pulse-border {
    from { box-shadow: inset 0 0 8px 0 currentColor, inset 0 0 2px 0 currentColor; }
    to { box-shadow: inset 0 0 22px 2px currentColor, inset 0 0 6px 0 currentColor; }
}

/* --- چرخش ملایم طیف رنگ (جدید) --- */
.bg-hue-shift {
    animation: hue-shift 8s linear infinite;
}

@keyframes hue-shift {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

/* --- حلقه‌های موج مرکزی (جدید) --- */
.bg-ripple-rings::before,
.bg-ripple-rings::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.5);
    animation: ripple-rings 2.4s ease-out infinite;
    pointer-events: none;
}

.bg-ripple-rings::after {
    animation-delay: 1.2s;
}

@keyframes ripple-rings {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(18); opacity: 0; }
}

/* --- برق و درخشش پراکنده (جدید) --- */
.bg-sparkle-glitter::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(circle, #fff 1px, transparent 1px),
        radial-gradient(circle, #fff 1px, transparent 1px),
        radial-gradient(circle, #fff 1px, transparent 1px),
        radial-gradient(circle, #fff 1px, transparent 1px),
        radial-gradient(circle, #fff 1px, transparent 1px);
    background-size: 25px 25px;
    background-position: 5% 30%, 25% 70%, 45% 20%, 70% 60%, 90% 35%;
    background-repeat: no-repeat;
    animation: sparkle-glitter 1.1s steps(2, jump-none) infinite alternate;
    pointer-events: none;
}

@keyframes sparkle-glitter {
    0% { opacity: 0.15; }
    50% { opacity: 0.9; }
    100% { opacity: 0.3; }
}

/* --- موج جاری در پایین نوار (جدید) --- */
.bg-wave-flow::after {
    content: '';
    position: absolute;
    left: -25%;
    right: -25%;
    bottom: -6px;
    height: 16px;
    background-repeat: repeat-x;
    background-size: 50px 16px;
    background-image: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.4) 40%, transparent 62%);
    opacity: 0.7;
    animation: wave-flow 4s linear infinite;
    pointer-events: none;
}

@keyframes wave-flow {
    0% { background-position-x: 0; }
    100% { background-position-x: 50px; }
}

/* --- نور محو شناور (جدید) --- */
.bg-glow-orb::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -5%;
    width: 120px;
    height: 120px;
    margin-top: -60px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.35) 0%, transparent 70%);
    filter: blur(4px);
    animation: glow-orb 6s ease-in-out infinite;
    pointer-events: none;
}

@keyframes glow-orb {
    0%, 100% { left: -5%; }
    50% { left: 95%; }
}

/* --- بارش برف (جدید) --- */
.bg-snow-fall::before,
.bg-snow-fall::after {
    content: '';
    position: absolute;
    top: -20px;
    left: 0;
    right: 0;
    bottom: -20px;
    background-repeat: repeat;
    pointer-events: none;
}

.bg-snow-fall::before {
    background-image:
        radial-gradient(circle, #fff 1.5px, transparent 1.5px),
        radial-gradient(circle, #fff 1px, transparent 1px);
    background-size: 30px 30px, 22px 22px;
    animation: snow-fall-a 6s linear infinite;
}

.bg-snow-fall::after {
    background-image: radial-gradient(circle, #fff 1px, transparent 1px);
    background-size: 40px 40px;
    animation: snow-fall-b 8s linear infinite;
    opacity: 0.7;
}

@keyframes snow-fall-a {
    0% { background-position: 0 -10%, 15px -20%; }
    100% { background-position: 0 110%, 15px 120%; }
}

@keyframes snow-fall-b {
    0% { background-position: 0 -10%; }
    100% { background-position: 0 110%; }
}

/* مخفی‌سازی کامل نوار در موبایل وقتی گزینه «نمایش در موبایل» غیرفعال است.
   نسخه قبلی این گزینه را ذخیره می‌کرد ولی هیچ‌جا اعمال نمی‌شد. */
@media screen and (max-width: 768px) {
    .nb-hide-on-mobile {
        display: none !important;
    }
}

/* استایل‌های ریسپانسیو */
@media screen and (max-width: 768px) {
    .notification-bar {
        min-height: 120px;
    }

    .notification-container {
        min-height: 120px;
        padding: 15px;
        box-sizing: border-box;
    }

    /* چیدمان موبایل بدون دکمه بستن */
    .notification-bar.without-close-button .content-wrapper {
        flex-direction: column;
        gap: 15px;
        justify-content: center;
        align-items: center;
        padding: 0;
    }

    .notification-bar.without-close-button .slides-section {
        order: 2;
        width: 100%;
        min-width: 0;
    }

    .notification-bar.without-close-button .countdown-section {
        order: 1;
        margin-left: 0;
    }

    /* چیدمان موبایل با دکمه بستن */
    .notification-bar.with-close-button .content-wrapper {
        flex-direction: column;
        gap: 15px;
        padding: 0 44px 0 0;
        align-items: center;
    }

    .notification-bar.with-close-button .slides-section {
        order: 2;
        width: 100%;
        min-width: 0;
    }

    .notification-bar.with-close-button .countdown-section {
        order: 1;
        margin-left: 0;
    }

    /* صرف‌نظر از موقعیت انتخاب‌شده در دسکتاپ، در موبایل دکمه CTA همیشه پایین‌ترین
       عنصر است - یک دکمه تمام‌عرض و قابل‌لمس در انتهای نوار، الگوی رایج و کاربرپسند
       در بارهای تبلیغاتی موبایل. */
    .cta-section {
        order: 3;
        width: 100%;
    }

    .cta-button {
        width: 100%;
        padding: 10px 16px;
        font-size: 13px;
    }

    .close-btn {
        top: 13px;
        right: 13px;
        transform: none;
        position: absolute;
        width: 28px;
        height: 28px;
    }

    .slides-container {
        height: 45px;
        width: 100%;
        min-width: 0;
    }

    .slide-item {
        padding: 0 10px;
        box-sizing: border-box;
    }

    .slide-text {
        font-size: var(--mobile-font-size, 14px);
        padding: 0;
        line-height: 1.3;
        white-space: normal;
        word-break: keep-all;
        overflow-wrap: break-word;
        text-align: center;
        max-width: 100%;
        width: 100%;
        display: block;
    }

    #countdown-timer {
        gap: 6px;
        padding: 10px 12px;
        flex-shrink: 0;
    }

    .countdown-item {
        min-width: 30px;
    }

    .countdown-number {
        font-size: 16px;
    }

    .countdown-label {
        font-size: 9px;
    }

    .countdown-separator {
        font-size: 14px;
        margin: 0 1px;
    }
}

@media screen and (max-width: 480px) {
    .notification-bar {
        min-height: 130px;
    }

    .notification-container {
        min-height: 130px;
        padding: 10px;
    }

    .notification-bar.with-close-button .content-wrapper {
        padding: 0 40px 0 0;
    }

    .slides-container {
        height: 50px; /* ارتفاع بیشتر برای متن‌های طولانی */
    }

    .slide-text {
        font-size: var(--mobile-font-size, 12px);
        line-height: 1.2;
        padding: 5px 0;
        max-height: 40px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    #countdown-timer {
        gap: 4px;
        padding: 8px 10px;
        flex-wrap: nowrap;
    }

    .countdown-item {
        min-width: 25px;
    }

    .countdown-number {
        font-size: 14px;
    }

    .countdown-label {
        font-size: 8px;
    }

    .countdown-separator {
        font-size: 12px;
    }

    .close-btn {
        width: 26px;
        height: 26px;
        top: 10px;
        right: 10px;
    }
}

@media screen and (max-width: 360px) {
    .notification-bar {
        min-height: 140px;
    }

    .notification-container {
        min-height: 140px;
        padding: 8px;
    }

    .slide-text {
        font-size: var(--mobile-font-size, 11px);
        line-height: 1.1;
        max-height: 45px;
    }

    .slides-container {
        height: 55px;
    }

    #countdown-timer {
        gap: 2px;
        padding: 6px 8px;
    }

    .countdown-item {
        min-width: 22px;
    }

    .countdown-number {
        font-size: 12px;
    }

    .countdown-label {
        font-size: 7px;
    }

    .countdown-separator {
        font-size: 10px;
        margin: 0;
    }
}

/* تنظیم سایز فونت برای دسکتاپ و موبایل */
@media screen and (min-width: 769px) {
    .slide-text {
        font-size: var(--desktop-font-size, 16px);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}