@charset "utf-8";
/* Modernized JCarousel Stylesheet */

.carouselRow {
    margin-top: 18px !important;
    margin-bottom: 28px !important;
    position: relative;
    z-index: 10;
}

.carousel-deals-grid {
    margin-left: -8px !important;
    margin-right: -8px !important;
}

.carousel-deals-grid > [class*="col-"] {
    padding-left: 8px !important;
    padding-right: 8px !important;
}

/* JCarousel Wrappers */
.jcarousel-wrapper {
    position: relative !important;
    width: 100% !important;
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05) !important;
    overflow: hidden !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

.jcarousel-wrapper:hover {
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.09) !important;
    border-color: #CBD5E1 !important;
}

/* Left Big Promo Carousel */
.bigcarousel {
    height: 480px !important;
    background: #FFFFFF !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05) !important;
    overflow: hidden !important;
}

.bigcarousel .jcarousel {
    width: 100% !important;
    height: 100% !important;
}

.bigcarousel .jcarousel ul {
    height: 100% !important;
}

.bigcarousel .jcarousel li {
    height: 100% !important;
}

.bigcarousel .jcarousel a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    background: #FFFFFF !important;
}

.bigcarousel .jcarousel img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    background: #FFFFFF !important;
}

/* Right 2x2 Deal Carousels */
.jcarousel-wrapper1,
.jcarousel-wrapper2,
.jcarousel-wrapper3,
.jcarousel-wrapper4 {
    height: 232px !important;
}

.jcarousel-wrapper3,
.jcarousel-wrapper4 {
    margin-top: 16px !important;
}

.jcarousel {
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
    height: 100% !important;
}

.jcarousel ul {
    width: 20000em !important;
    position: relative !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 100% !important;
}

.jcarousel li {
    float: left !important;
    height: 100% !important;
    position: relative !important;
}

/* Deal Card Structure */
.jcarousel-card-link {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
    text-decoration: none !important;
    overflow: hidden !important;
    background: #0F172A !important;
}

.jcarousel-img-wrap {
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
    overflow: hidden !important;
}

.jcarousel-img-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.jcarousel-wrapper:hover .jcarousel-img-wrap img {
    transform: scale(1.05) !important;
}

/* Floating Category Pill */
.carousel-category-pill {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    z-index: 25 !important;
    background: rgba(255, 255, 255, 0.94) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    padding: 5px 12px !important;
    border-radius: 999px !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #FF5500 !important;
    border: 1px solid rgba(255, 85, 0, 0.22) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    pointer-events: none !important;
    line-height: 1.2 !important;
}

.carousel-category-pill .glyphicon {
    font-size: 11px !important;
    color: #FF5500 !important;
}

/* Gradient Title Overlay */
.jcarousel-title-overlay {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: 36px 14px 14px 14px !important;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0) 0%, rgba(15, 23, 42, 0.75) 45%, rgba(15, 23, 42, 0.95) 100%) !important;
    z-index: 5 !important;
    pointer-events: none !important;
}

.jcarousel-deal-title {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    color: #FFFFFF !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7) !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Carousel Control Arrows */
.jcarousel-control-prev,
.jcarousel-control-next {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 34px !important;
    height: 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.94) !important;
    color: #0F172A !important;
    text-decoration: none !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    z-index: 20 !important;
    opacity: 0 !important;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
}

.jcarousel-wrapper:hover .jcarousel-control-prev,
.jcarousel-wrapper:hover .jcarousel-control-next {
    opacity: 1 !important;
}

.jcarousel-control-prev {
    left: 10px !important;
}

.jcarousel-control-next {
    right: 10px !important;
}

.jcarousel-control-prev:hover,
.jcarousel-control-next:hover {
    background: #FF5500 !important;
    color: #FFFFFF !important;
    border-color: #FF5500 !important;
    transform: translateY(-50%) scale(1.08) !important;
    box-shadow: 0 6px 18px rgba(255, 85, 0, 0.38) !important;
}

.jcarousel-control-prev .glyphicon,
.jcarousel-control-next .glyphicon {
    font-size: 12px !important;
    line-height: 1 !important;
    margin: 0 !important;
}

.jcarousel-control-prev.inactive,
.jcarousel-control-next.inactive {
    opacity: 0.25 !important;
    cursor: default !important;
    pointer-events: none !important;
}

/* Pagination Dots */
.jcarousel-pagination {
    position: absolute !important;
    bottom: 8px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 15 !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

.jcarousel-pagination a {
    display: inline-block !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.55) !important;
    border: none !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

.jcarousel-pagination a.active {
    width: 18px !important;
    background: #FF5500 !important;
    opacity: 1 !important;
    box-shadow: 0 2px 6px rgba(255, 85, 0, 0.45) !important;
}

/* Responsive Media Queries */
@media (max-width: 767px) {
    .carouselRow {
        margin-top: 12px !important;
        margin-bottom: 16px !important;
    }
    
    .bigcarousel {
        height: 260px !important;
        margin-bottom: 16px !important;
    }
    
    .jcarousel-wrapper1,
    .jcarousel-wrapper2,
    .jcarousel-wrapper3,
    .jcarousel-wrapper4 {
        height: 240px !important;
        margin-top: 12px !important;
    }
    
    .jcarousel-control-prev,
    .jcarousel-control-next {
        opacity: 0.85 !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .bigcarousel {
        height: 380px !important;
    }
    
    .jcarousel-wrapper1,
    .jcarousel-wrapper2,
    .jcarousel-wrapper3,
    .jcarousel-wrapper4 {
        height: 182px !important;
    }
    
    .jcarousel-wrapper3,
    .jcarousel-wrapper4 {
        margin-top: 16px !important;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .bigcarousel {
        height: 440px !important;
    }
    
    .jcarousel-wrapper1,
    .jcarousel-wrapper2,
    .jcarousel-wrapper3,
    .jcarousel-wrapper4 {
        height: 212px !important;
    }
    
    .jcarousel-wrapper3,
    .jcarousel-wrapper4 {
        margin-top: 16px !important;
    }
}

@media (min-width: 1200px) {
    .bigcarousel {
        height: 480px !important;
    }
    
    .jcarousel-wrapper1,
    .jcarousel-wrapper2,
    .jcarousel-wrapper3,
    .jcarousel-wrapper4 {
        height: 232px !important;
    }
    
    .jcarousel-wrapper3,
    .jcarousel-wrapper4 {
        margin-top: 16px !important;
    }
}