/* ==========================================
   MOBILE CAROUSEL ENHANCEMENTS
   All carousels use offers carousel style on mobile
   ========================================== */

/* ===== MOBILE: ALL CAROUSELS USE OFFERS CAROUSEL STYLE ===== */
@media (max-width: 767px) {
    /* Apply EXACT same style as offers carousel to ALL product carousels */
    .product-carousel {
        position: relative;
        padding: 1rem 0;
        width: 100%;
        overflow: hidden;
    }
    
    .product-carousel .carousel-inner {
        padding: 1rem 0;
        width: 100%;
        position: relative;
        overflow: hidden;
        /* Prevent height changes during transitions */
        min-height: 400px;
        height: auto;
    }
    
    /* Carousel items - prevent vertical stacking during transitions */
    .product-carousel .carousel-item {
        width: 100%;
        position: relative;
        float: left;
        margin-right: -100%;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        /* Ensure consistent vertical alignment */
        top: 0 !important;
        transform: translateX(0) translateY(0) !important;
    }
    
    /* During transition - prevent vertical offset */
    .product-carousel .carousel-item.active,
    .product-carousel .carousel-item.carousel-item-next,
    .product-carousel .carousel-item.carousel-item-prev,
    .product-carousel .carousel-item.active.carousel-item-start,
    .product-carousel .carousel-item.active.carousel-item-end {
        top: 0 !important;
        transform: translateX(0) translateY(0) !important;
        /* Ensure horizontal-only movement */
        will-change: transform;
    }
    
    /* Ensure proper column sizing - EXACT same as offers carousel */
    .product-carousel .carousel-item .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        /* Prevent vertical stacking */
        position: relative;
        top: 0;
    }
    
    /* Force 1 product per slide on mobile - EXACT same as offers carousel */
    .product-carousel .carousel-item .row > [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    
    /* Hide any extra columns that might appear - EXACT same as offers carousel */
    .product-carousel .carousel-item .row > [class*="col-"]:nth-child(n+2) {
        display: none !important;
    }
    
    /* Ensure only first card is visible - EXACT same as offers carousel */
    .product-carousel .carousel-item .row > [class*="col-"]:first-child {
        display: block !important;
    }
    
    /* After restructuring - each carousel-item contains one product */
    .product-carousel .carousel-item .row > [class*="col-"] {
        display: block !important;
    }
    
    /* Prevent vertical stacking during Bootstrap transitions */
    .product-carousel .carousel-item:not(.active):not(.carousel-item-next):not(.carousel-item-prev) {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
    
    .product-carousel .carousel-item.active,
    .product-carousel .carousel-item.carousel-item-next:not(.carousel-item-start),
    .product-carousel .carousel-item.carousel-item-prev:not(.carousel-item-end) {
        display: block !important;
        visibility: visible !important;
    }
    
    /* Override Bootstrap's transform to prevent vertical movement */
    .product-carousel .carousel-item.active.carousel-item-start {
        transform: translateX(-100%) translateY(0) !important;
    }
    
    .product-carousel .carousel-item.active.carousel-item-end {
        transform: translateX(100%) translateY(0) !important;
    }
    
    .product-carousel .carousel-item.carousel-item-next:not(.carousel-item-start) {
        transform: translateX(100%) translateY(0) !important;
    }
    
    .product-carousel .carousel-item.carousel-item-prev:not(.carousel-item-end) {
        transform: translateX(-100%) translateY(0) !important;
    }
}

/* ===== SMALLER CARDS ON MOBILE ===== */
@media (max-width: 767px) {
    /* Smaller image heights */
    .product-card-image,
    .offer-card-image {
        height: 200px !important;
    }
    
    /* Smaller content padding */
    .product-card-content,
    .offer-card-content {
        padding: 1rem !important;
    }
    
    /* Smaller text */
    .product-card-title,
    .offer-card-title {
        font-size: 0.9rem !important;
        margin-bottom: 0.75rem !important;
        min-height: 2.5em !important;
    }
    
    .product-price-current,
    .offer-price-new {
        font-size: 1.5rem !important;
    }
    
    .product-price-old,
    .offer-price-old {
        font-size: 0.9rem !important;
    }
    
    /* Smaller badges */
    .product-badge-best-seller,
    .product-badge-discount,
    .product-badge-new,
    .offer-badge {
        font-size: 0.875rem !important;
        padding: 0.4rem 0.8rem !important;
        top: 0.75rem !important;
        right: 0.75rem !important;
    }
    
    .product-badge-best-seller-trophy {
        width: 28px !important;
        height: 28px !important;
        top: 0.75rem !important;
        left: 0.75rem !important;
    }
    
    .product-badge-best-seller-trophy i {
        font-size: 0.875rem !important;
    }
    
    /* Reduce card border radius on mobile */
    .product-card-simple,
    .offer-card {
        border-radius: 12px !important;
    }
}

@media (max-width: 575px) {
    /* Even smaller on very small screens */
    .product-card-image,
    .offer-card-image {
        height: 180px !important;
    }
    
    .product-card-content,
    .offer-card-content {
        padding: 1rem !important;
    }
    
    .product-card-title,
    .offer-card-title {
        font-size: 0.9rem !important;
        margin-bottom: 0.75rem !important;
        min-height: 2.5em !important;
    }
    
    .product-price-current,
    .offer-price-new {
        font-size: 1.5rem !important;
    }
    
    .offer-badge {
        font-size: 0.875rem !important;
        padding: 0.4rem 0.8rem !important;
        top: 0.75rem !important;
        right: 0.75rem !important;
    }
}

/* ===== IMPROVED CAROUSEL CONTROLS ON MOBILE ===== */
@media (max-width: 767px) {
    .product-carousel .carousel-control-prev,
    .offers-carousel .carousel-control-prev,
    .product-carousel .carousel-control-next,
    .offers-carousel .carousel-control-next {
        width: 40px;
        height: 40px;
        background: rgba(255, 255, 255, 0.98);
        border: 2px solid rgba(59, 130, 246, 0.3);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        backdrop-filter: blur(10px);
    }
    
    .product-carousel .carousel-control-prev {
        left: 5px;
    }
    
    .product-carousel .carousel-control-next {
        right: 5px;
    }
    
    .product-carousel .carousel-control-prev-icon,
    .product-carousel .carousel-control-next-icon,
    .offers-carousel .carousel-control-prev-icon,
    .offers-carousel .carousel-control-next-icon {
        width: 18px;
        height: 18px;
        filter: invert(27%) sepia(97%) saturate(2837%) hue-rotate(209deg) brightness(94%) contrast(92%);
    }
}

/* ===== TOUCH SWIPE ENHANCEMENT ===== */
@media (max-width: 767px) {
    .product-carousel,
    .offers-carousel {
        touch-action: pan-x pan-y;
    }
    
    .product-carousel .carousel-inner,
    .offers-carousel .carousel-inner {
        touch-action: pan-x;
        -webkit-overflow-scrolling: touch;
    }
}