/* Promo Popup Frontend Styles - Static */

.promo-popup-wrapper {
    position: fixed;
    z-index: 99999;
    max-width: 400px;
    width: 92%;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Positioning with CSS Variables */
.promo-popup-wrapper.pos-top-left {
    top: var(--promo-offset-y, 20px);
    left: var(--promo-offset-x, 20px);
}

.promo-popup-wrapper.pos-top-center {
    top: var(--promo-offset-y, 20px);
    left: 50%;
    transform: translateX(-50%);
}

.promo-popup-wrapper.pos-top-right {
    top: var(--promo-offset-y, 20px);
    right: var(--promo-offset-x, 20px);
}

.promo-popup-wrapper.pos-center-left {
    top: 50%;
    left: var(--promo-offset-x, 20px);
    transform: translateY(-50%);
}

.promo-popup-wrapper.pos-center-center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.promo-popup-wrapper.pos-center-right {
    top: 50%;
    right: var(--promo-offset-x, 20px);
    transform: translateY(-50%);
}

.promo-popup-wrapper.pos-bottom-left {
    bottom: var(--promo-offset-y, 20px);
    left: var(--promo-offset-x, 20px);
}

.promo-popup-wrapper.pos-bottom-center {
    bottom: var(--promo-offset-y, 20px);
    left: 50%;
    transform: translateX(-50%);
}

.promo-popup-wrapper.pos-bottom-right {
    bottom: var(--promo-offset-y, 20px);
    right: var(--promo-offset-x, 20px);
}

/* Mobile Responsive */
@media (max-width: 767px) {
    .promo-popup-wrapper.pos-top-left,
    .promo-popup-wrapper.pos-top-center,
    .promo-popup-wrapper.pos-top-right {
        top: var(--promo-offset-mobile, 10px);
    }
    
    .promo-popup-wrapper.pos-bottom-left,
    .promo-popup-wrapper.pos-bottom-center,
    .promo-popup-wrapper.pos-bottom-right {
        bottom: var(--promo-offset-mobile, 10px);
    }
    
    .promo-popup-wrapper.pos-top-left,
    .promo-popup-wrapper.pos-center-left,
    .promo-popup-wrapper.pos-bottom-left {
        left: 10px;
    }
    
    .promo-popup-wrapper.pos-top-right,
    .promo-popup-wrapper.pos-center-right,
    .promo-popup-wrapper.pos-bottom-right {
        right: var(--promo-offset-mobile, 10px);
    }
}

/* Animations */
.promo-popup-wrapper.anim-fade.show {
    opacity: 1;
    visibility: visible;
}

/* Slide Up Animation */
.promo-popup-wrapper.anim-slide-up {
    opacity: 0;
    visibility: hidden;
}

.promo-popup-wrapper.anim-slide-up.pos-bottom-left,
.promo-popup-wrapper.anim-slide-up.pos-bottom-center,
.promo-popup-wrapper.anim-slide-up.pos-bottom-right {
    transform: translateY(0px);
}

.promo-popup-wrapper.anim-slide-up.pos-top-left,
.promo-popup-wrapper.anim-slide-up.pos-top-center,
.promo-popup-wrapper.anim-slide-up.pos-top-right {
    transform: translateY(0px);
}

.promo-popup-wrapper.anim-slide-up.pos-center-left,
.promo-popup-wrapper.anim-slide-up.pos-center-right {
    transform: translateY(0px);
}

/* Show state for slide-up */
.promo-popup-wrapper.anim-slide-up.show {
    opacity: 1;
    visibility: visible;
}

.promo-popup-wrapper.anim-slide-up.pos-bottom-center.show,
.promo-popup-wrapper.anim-slide-up.pos-top-center.show {
    transform: translateX(-50%) translateY(0);
}

.promo-popup-wrapper.anim-slide-up.pos-center-center.show {
    transform: translate(-50%, -50%);
}

.promo-popup-wrapper.anim-slide-up.pos-center-left.show,
.promo-popup-wrapper.anim-slide-up.pos-center-right.show {
    transform: translateY(-50%);
}

/* Slide Right Animation */
.promo-popup-wrapper.anim-slide-right {
    opacity: 0;
    visibility: hidden;
}

.promo-popup-wrapper.anim-slide-right.pos-top-left,
.promo-popup-wrapper.anim-slide-right.pos-center-left,
.promo-popup-wrapper.anim-slide-right.pos-bottom-left {
    transform: translateX(-50px);
}

.promo-popup-wrapper.anim-slide-right.pos-top-right,
.promo-popup-wrapper.anim-slide-right.pos-center-right,
.promo-popup-wrapper.anim-slide-right.pos-bottom-right {
    transform: translateX(50px);
}

.promo-popup-wrapper.anim-slide-right.show {
    opacity: 1;
    visibility: visible;
}

.promo-popup-wrapper.anim-slide-right.pos-top-center.show,
.promo-popup-wrapper.anim-slide-right.pos-bottom-center.show {
    transform: translateX(-50%);
}

.promo-popup-wrapper.anim-slide-right.pos-center-left.show,
.promo-popup-wrapper.anim-slide-right.pos-center-right.show {
    transform: translateY(-50%);
}

.promo-popup-wrapper.anim-slide-right.pos-center-center.show {
    transform: translate(-50%, -50%);
}

/* Top Bar (Countdown) */
.promo-top-bar {
    background: var(--promo-countdown-bg, #c8f54b);
    color: var(--promo-countdown-text, #1a1a1a);
    padding: 12px 16px;
    border-radius: 12px 12px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--promo-countdown-size, 14px);
    font-weight: 600;
    height: 45px;
    box-sizing: border-box;
    /* Анимация появления */
    opacity: 0;
    transform: translateY(45px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    transition-delay: 0.2s; /* Задержка, чтобы карточка появилась первой */
}

/* Анимация через keyframes — надёжнее чем transition */
@keyframes promoSlideUp {
    from {
        opacity: 0;
        transform: translateY(45px);
    }
    to {
        opacity: 1;
        transform: translateY(5px);
    }
}

/* Только для активного слайда */
.swiper-slide-active .promo-top-bar, .swiper-slide-duplicate-active .promo-top-bar {
    animation: promoSlideUp 0.5s ease 0.2s both;
}

/* Неактивные слайды — скрыты без анимации */
.swiper-slide:not(.swiper-slide-active) .promo-top-bar, .swiper-slide:not(.swiper-slide-duplicate-active) .promo-top-bar  {
    opacity: 0;
    transform: translateY(45px);
    transition: none; /* Без анимации при скрытии, чтобы не мешать */
}

.promo-top-bar-empty {
    display: block;
    height: 45px;
}

.promo-countdown-timer {
    display: flex;
    gap: 0px;
    align-items: center;
    font-variant-numeric: tabular-nums;
}

.promo-countdown-timer .cd-block {
    padding: 4px 8px;
    border-radius: 6px;
    min-width: 36px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.promo-countdown-timer .cd-num {
    font-size: var(--promo-countdown-num-size, 18px);
    font-weight: 700;
    /* display: block; */
    line-height: 1;
    color: var(--promo-countdown-num-color, #1a1a1a);
}

.promo-countdown-timer .cd-label {
    font-size: var(--promo-countdown-label-size, 9px);
    font-weight: 500;
    color: var(--promo-countdown-label-color, #666);
    text-transform: lowercase;
}

.promo-countdown-days {
    font-size: var(--promo-countdown-num-size, 18px);
    font-weight: 700;
    color: var(--promo-countdown-num-color, #1a1a1a);
}

/* Card */
.promo-card {
    overflow: hidden;
    position: relative;
    height: 200px;
    width: 100%;
    border-radius: 10px 10px 0 0;
}

.promo-close {
    position: absolute;
    top: 50px;
    right: 5px;
    width: 28px;
    height: 28px;
    cursor: pointer;
    z-index: 100;
    color: var(--promo-nav-color, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    line-height: 1;
    background: rgba(0,0,0,0.4);
    border-radius: 50%;
    transition: background 0.2s;
    border: none;
}

.promo-close:hover {
    background: rgba(0,0,0,0.7);
}

/* Layouts */
.promo-layout-bg {
    height: 200px;
    background-size: cover;
    background-position: center;
    position: relative;
}

.promo-layout-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 100%);
}

.promo-layout-bg .promo-content {
    padding: var(--promo-bg-card-padding, 20px);
    position: relative;
    z-index: 2;
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
}

.promo-layout-left,
.promo-layout-right {
    display: flex;
    flex-direction: row;
    height: 200px;
}

.promo-layout-left .promo-img,
.promo-layout-right .promo-img {
    width: 50%;
    height: 200px;
    object-fit: cover;
}

.promo-layout-left .promo-content,
.promo-layout-right .promo-content {
    width: 50%;
    height: 200px;
    padding: var(--promo-side-card-padding, 16px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
}

.promo-layout-right {
    flex-direction: row-reverse;
}

/* ============================================
   BG Layout + Dark Theme
   ============================================ */
.promo-layout-bg.promo-theme-dark {
    background-color: var(--promo-bg-dark-card-bg, #1a1a1a);
}

.promo-layout-bg.promo-theme-dark .promo-content {
    padding: var(--promo-bg-dark-card-padding, 20px);
}

.promo-layout-bg.promo-theme-dark .promo-title {
    color: var(--promo-bg-dark-title-color, #ffffff);
    font-size: var(--promo-bg-dark-title-size, 22px);
    font-family: var(--promo-bg-dark-title-font, inherit);
    word-break: break-all;
    line-height: 1;
}

.promo-layout-bg.promo-theme-dark .promo-text {
    color: var(--promo-bg-dark-text-color, #cccccc);
    font-size: var(--promo-bg-dark-text-size, 15px);
    font-family: var(--promo-bg-dark-text-font, inherit);
    line-height: 1.1em;
}

.promo-layout-bg.promo-theme-dark .promo-btn {
    padding: var(--promo-bg-dark-btn-padding, 12px);
    background: var(--promo-bg-dark-btn-bg, #c8f54b);
    color: var(--promo-bg-dark-btn-text, #1a1a1a);
    font-size: var(--promo-bg-dark-btn-size, 14px);
    line-height: 1;
}

.promo-layout-bg.promo-theme-dark .promo-label {
    background: var(--promo-bg-dark-label-bg, #3a3a3a);
    color: var(--promo-bg-dark-label-text, #ffffff);
    font-size: var(--promo-bg-dark-label-size, 13px);
}

.promo-layout-bg.promo-theme-dark .promo-label svg {
    width: var(--promo-bg-dark-label-icon-size, 14px);
    height: var(--promo-bg-dark-label-icon-size, 14px);
    color: var(--promo-bg-dark-label-icon, #ffffff);
}

/* ============================================
   BG Layout + Light Theme
   ============================================ */
.promo-layout-bg.promo-theme-light {
    background-color: var(--promo-bg-light-card-bg, #ffffff);
}

.promo-layout-bg.promo-theme-light .promo-content {
    padding: var(--promo-bg-light-card-padding, 20px);
}

.promo-layout-bg.promo-theme-light .promo-title {
    color: var(--promo-bg-light-title-color, #1a1a1a);
    font-size: var(--promo-bg-light-title-size, 22px);
    font-family: var(--promo-bg-light-title-font, inherit);
    word-break: break-all;
    line-height: 1;
}

.promo-layout-bg.promo-theme-light .promo-text {
    color: var(--promo-bg-light-text-color, #555555);
    font-size: var(--promo-bg-light-text-size, 15px);
    font-family: var(--promo-bg-light-text-font, inherit);
    line-height: 1.1em;
}

.promo-layout-bg.promo-theme-light .promo-btn {
    padding: var(--promo-bg-light-btn-padding, 12px);
    background: var(--promo-bg-light-btn-bg, #007cba);
    color: var(--promo-bg-light-btn-text, #ffffff);
    font-size: var(--promo-bg-light-btn-size, 14px);
    line-height: 1;
}

.promo-layout-bg.promo-theme-light .promo-label {
    background: var(--promo-bg-light-label-bg, #f0f0f0);
    color: var(--promo-bg-light-label-text, #1a1a1a);
    font-size: var(--promo-bg-light-label-size, 13px);
}

.promo-layout-bg.promo-theme-light .promo-label svg {
    width: var(--promo-bg-light-label-icon-size, 14px);
    height: var(--promo-bg-light-label-icon-size, 14px);
    color: var(--promo-bg-light-label-icon, #1a1a1a);
}

/* ============================================
   Side Layout + Dark Theme
   ============================================ */
.promo-layout-left.promo-theme-dark,
.promo-layout-right.promo-theme-dark {
    background-color: var(--promo-side-dark-card-bg, #1a1a1a);
}

.promo-layout-left.promo-theme-dark .promo-content,
.promo-layout-right.promo-theme-dark .promo-content {
    padding: var(--promo-side-dark-card-padding, 16px);
}

.promo-layout-left.promo-theme-dark .promo-title,
.promo-layout-right.promo-theme-dark .promo-title {
    color: var(--promo-side-dark-title-color, #ffffff);
    font-size: var(--promo-side-dark-title-size, 18px);
    font-family: var(--promo-side-dark-title-font, inherit);
    word-break: break-word;
    line-height: 1;
}

.promo-layout-left.promo-theme-dark .promo-text,
.promo-layout-right.promo-theme-dark .promo-text {
    color: var(--promo-side-dark-text-color, #cccccc);
    font-size: var(--promo-side-dark-text-size, 14px);
    font-family: var(--promo-side-dark-text-font, inherit);
    line-height: 1.1em;
}

.promo-layout-left.promo-theme-dark .promo-btn,
.promo-layout-right.promo-theme-dark .promo-btn {
    padding: var(--promo-side-dark-btn-padding, 12px);
    background: var(--promo-side-dark-btn-bg, #c8f54b);
    color: var(--promo-side-dark-btn-text, #1a1a1a);
    font-size: var(--promo-side-dark-btn-size, 13px);
    line-height: 1em;
}

.promo-layout-left.promo-theme-dark .promo-label,
.promo-layout-right.promo-theme-dark .promo-label {
    background: var(--promo-side-dark-label-bg, #3a3a3a);
    color: var(--promo-side-dark-label-text, #ffffff);
    font-size: var(--promo-side-dark-label-size, 12px);
}

.promo-layout-left.promo-theme-dark .promo-label svg,
.promo-layout-right.promo-theme-dark .promo-label svg {
    width: var(--promo-side-dark-label-icon-size, 12px);
    height: var(--promo-side-dark-label-icon-size, 12px);
    color: var(--promo-side-dark-label-icon, #ffffff);
}

/* ============================================
   Side Layout + Light Theme
   ============================================ */
.promo-layout-left.promo-theme-light,
.promo-layout-right.promo-theme-light {
    background-color: var(--promo-side-light-card-bg, #ffffff);
}

.promo-layout-left.promo-theme-light .promo-content,
.promo-layout-right.promo-theme-light .promo-content {
    padding: var(--promo-side-light-card-padding, 16px);
}

.promo-layout-left.promo-theme-light .promo-title,
.promo-layout-right.promo-theme-light .promo-title {
    color: var(--promo-side-light-title-color, #1a1a1a);
    font-size: var(--promo-side-light-title-size, 18px);
    font-family: var(--promo-side-light-title-font, inherit);
    word-break: break-all;
    line-height: 1;
}

.promo-layout-left.promo-theme-light .promo-text,
.promo-layout-right.promo-theme-light .promo-text {
    color: var(--promo-side-light-text-color, #555555);
    font-size: var(--promo-side-light-text-size, 14px);
    font-family: var(--promo-side-light-text-font, inherit);
    line-height: 1.1em;
}

.promo-layout-left.promo-theme-light .promo-btn,
.promo-layout-right.promo-theme-light .promo-btn {
    padding: var(--promo-side-light-btn-padding, 12px);
    background: var(--promo-side-light-btn-bg, #007cba);
    color: var(--promo-side-light-btn-text, #ffffff);
    font-size: var(--promo-side-light-btn-size, 13px);
    line-height: 1em;
}

.promo-layout-left.promo-theme-light .promo-label,
.promo-layout-right.promo-theme-light .promo-label {
    background: var(--promo-side-light-label-bg, #f0f0f0);
    color: var(--promo-side-light-label-text, #1a1a1a);
    font-size: var(--promo-side-light-label-size, 12px);
}

.promo-layout-left.promo-theme-light .promo-label svg,
.promo-layout-right.promo-theme-light .promo-label svg {
    width: var(--promo-side-light-label-icon-size, 12px);
    height: var(--promo-side-light-label-icon-size, 12px);
    color: var(--promo-side-light-label-icon, #1a1a1a);
}

/* Common Elements */
.promo-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 6px;
    font-weight: 600;
    margin-bottom: 8px;
    text-transform: uppercase;
    width: fit-content;
}

.promo-title {
    margin: 0 0 8px 0;
    line-height: 1.3;
    font-weight: 700;
}

.promo-text {
    margin-bottom: 12px;
    line-height: 1.4;
}

.promo-btn {
    display: inline-block;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    text-align: center;
    width: fit-content;
    transition: opacity 0.2s;
}

.promo-btn:hover {
    opacity: 0.85;
}

/* Swiper & Pagination */
.promo-popup-wrapper .swiper {
    border-radius: 0 0 12px 12px;
    overflow: hidden;
}

.promo-popup-wrapper .swiper-pagination {
    position: relative;
    margin-top: 0;
    background: var(--promo-pagination-bg, #2a2a2a);
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: var(--promo-pagination-align, center);
    gap: 6px;
    padding-left: 10px;
    max-width: calc(100% - 70px);
    bottom: 0 !important;
}

.promo-popup-wrapper .swiper-pagination-bullet {
    background: var(--promo-pagination-color, #ffffff);
    opacity: 0.4;
    width: var(--promo-pagination-width, 24px);
    height: 4px;
    border-radius: 2px;
    transition: all 0.3s;
    min-height: 4px !important;
}

.promo-popup-wrapper .swiper-pagination-bullet-active {
    background: var(--promo-pagination-active-color, #c8f54b) !important;
    opacity: 1;
    width: var(--promo-pagination-active-width, 32px);
}

/* Navigation Buttons */
.promo-popup-wrapper .swiper-button-next,
.promo-popup-wrapper .swiper-button-prev {
    width: var(--promo-nav-size, 36px);
    height: var(--promo-nav-size, 36px);
    background: var(--promo-pagination-bg, #2a2a2a);
    border-radius: 0;
    bottom: 0px;
    top: auto;
    color: var(--promo-nav-color, #ffffff) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s;
    margin-top: 0;
}

.promo-popup-wrapper .swiper-button-next:hover svg,
.promo-popup-wrapper .swiper-button-prev:hover svg {
   stroke: var(--promo-pagination-active-color, #c8f54b);
}

.promo-popup-wrapper .swiper-button-next {
    right: 0px;
}

.promo-popup-wrapper .swiper-button-prev {
    right: 30px;
    left: auto;
}

.promo-popup-wrapper .swiper-button-next::after,
.promo-popup-wrapper .swiper-button-prev::after {
    display: none;
}

.promo-popup-wrapper .swiper-button-next svg,
.promo-popup-wrapper .swiper-button-prev svg {
    width: 16px;
    height: 16px;
}

/* Анимация содержимого карточки */
.promo-content {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    transition-delay: 0.3s;
}

.swiper-slide-active .promo-content, .swiper-slide-duplicate-active .promo-content {
    opacity: 1;
    transform: translateY(0);
}

.swiper-slide:not(.swiper-slide-active) .promo-content {
    opacity: 0;
    transform: translateY(20px);
    transition: none;
}

/* Поэтапное появление элементов внутри карточки */
.swiper-slide-active .promo-label, .swiper-slide-duplicate-active .promo-label {
    animation: promoFadeUp 0.5s ease 0.4s both;
}

.swiper-slide-active .promo-title, .swiper-slide-duplicate-active .promo-title {
    animation: promoFadeUp 0.5s ease 0.5s both;
}

.swiper-slide-active .promo-text, .swiper-slide-duplicate-active .promo-text {
    animation: promoFadeUp 0.5s ease 0.6s both;
}

.swiper-slide-active .promo-btn, .swiper-slide-duplicate-active .promo-btn {
    animation: promoFadeUp 0.5s ease 0.7s both;
}

@keyframes promoFadeUp {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Изображение в split-layout тоже анимируем */
.swiper-slide-active .promo-img, .swiper-slide-duplicate-active .promo-img {
    animation: promoFadeIn 0.6s ease 0.2s both;
}

@keyframes promoFadeIn {
    from { opacity: 0; transform: scale(1.05); }
    to { opacity: 1; transform: scale(1); }
}