/* ==========================================================
   PREMIUM ANNOUNCEMENT BAR
========================================================== */

.announcement-bar{

    position:relative;

    width:100%;

    height:44px;

    display:flex;

    align-items:center;

    background:linear-gradient(
        90deg,
        #1b5e20,
        #2e7d32,
        #388e3c
    );

    color:#fff;

    overflow:hidden;

    z-index:1060;

    border-bottom:1px solid rgba(255,255,255,.08);

}

.announcement-bar .container-xl{

    height:100%;

}

#announcementCarousel{

    height:100%;

}

#announcementCarousel .carousel-inner{

    height:100%;

}

#announcementCarousel .carousel-item{

    height:44px;

}

.announcement-content{

    height:44px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:16px;

}

/* ==========================
        ICON
========================== */

.announcement-icon{

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:18px;

}

.announcement-icon i{

    animation:pulse 2s infinite;

}

/* ==========================
        TEXT
========================== */

.announcement-text{

    font-size:14px;

    font-weight:600;

    letter-spacing:.2px;

    white-space:nowrap;

}

/* ==========================
        COUPON
========================== */

.coupon-btn{

    display:flex;

    align-items:center;

    gap:8px;

    border:none;

    outline:none;

    cursor:pointer;

    background:#ffffff;

    color:#2E7D32;

    font-weight:700;

    font-size:13px;

    padding:6px 14px;

    border-radius:50px;

    transition:.3s ease;

}

.coupon-btn i{

    font-size:16px;

}

.coupon-btn:hover{

    transform:translateY(-2px);

    background:#f5f5f5;

}

/* ==========================
        CAROUSEL
========================== */

#announcementCarousel .carousel-item{
    transition:transform .6s ease-in-out;
}

/* ==========================
        ANIMATION
========================== */

@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.12);

    }

    100%{

        transform:scale(1);

    }

}

/* ==========================
        MOBILE
========================== */

@media(max-width:768px){

    .announcement-bar{

        height:50px;

    }

    .announcement-content{

        height:50px;

        gap:10px;

        padding:0 12px;

    }

    .announcement-text{

        font-size:12px;

        overflow:hidden;

        text-overflow:ellipsis;

    }

    .coupon-btn{

        padding:5px 10px;

        font-size:11px;

    }

}

@media(max-width:576px){

    .announcement-content{

        justify-content:space-between;

    }

    .announcement-icon{

        display:none;

    }

    .announcement-text{

        flex:1;

    }

}

/* ==========================================
   Coupon Copied State
========================================== */

.coupon-btn.copied{

    background:#43A047;

    color:#fff;

}

.coupon-btn.copied i{

    color:#fff;

}

/* ==========================================
   Better Carousel Animation
========================================== */

#announcementCarousel .carousel-item-next,
#announcementCarousel .carousel-item-prev,
#announcementCarousel .carousel-item.active{

    display:flex;
    align-items:center;
    justify-content:center;

}

/* ===== FINAL ANNOUNCEMENT FIX ===== */

#announcementCarousel,
#announcementCarousel .carousel-inner,
#announcementCarousel .carousel-item,
#announcementCarousel .announcement-content{
    color:#fff !important;
}

#announcementCarousel .announcement-text{
    color:#fff !important;
}

#announcementCarousel .announcement-icon,
#announcementCarousel .announcement-icon i{
    color:#FFD54F !important;
}

#announcementCarousel .coupon-btn{
    color:#2E7D32 !important;
}

#announcementCarousel .coupon-btn span,
#announcementCarousel .coupon-btn i{
    color:#2E7D32 !important;
}

#announcementCarousel .coupon-btn.copied,
#announcementCarousel .coupon-btn.copied span,
#announcementCarousel .coupon-btn.copied i{
    color:#fff !important;
}

.announcement-bar{

    position: relative;
    z-index: 99999 !important;

}

.announcement-content{

    position: relative;
    z-index: 99999 !important;

    display:flex !important;
    align-items:center;
    justify-content:center;

    visibility:visible !important;
    opacity:1 !important;
}

.announcement-text{

    display:inline-block !important;

    color:#fff !important;

    opacity:1 !important;

    visibility:visible !important;

    position:relative;

    z-index:99999;
}

.coupon-btn{

    position:relative;

    z-index:99999;
}