/**
 * POURQUOI CHOISIR ECOBATI SECTION - MOBILE RESPONSIVE STYLES
 * Optimized for mobile devices (max-width: 767px)
 * Display ONE advantage at a time on mobile
 */

@media only screen and (max-width: 767px) {

    /* ==========================================
       SECTION CONTAINER
       ========================================== */

    .services-one.advantages-section {
        padding: 40px 0 !important;
    }

    .services-one.advantages-section .auto-container {
        padding: 0 15px !important;
    }

    /* ==========================================
       SECTION TITLE
       ========================================== */

    .advantages-section .sec-title_title {
        font-size: 1.5rem !important; /* Reduced from 2.8rem */
        padding: 12px 25px !important;
        margin-bottom: 15px !important;
        letter-spacing: 0.5px !important;
        border: 2px solid rgba(255,255,255,0.4) !important;
        display: block !important;
        width: auto !important;
        max-width: 95% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* ==========================================
       MAIN QUALITIES ROW - Stack vertically
       ========================================== */

    .main-qualities-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        margin: 20px 0 !important;
        align-items: center !important;
    }

    .main-qualities-row span {
        font-size: 1.1rem !important; /* Reduced from 1.8rem */
        padding: 8px 20px !important;
        width: auto !important;
        max-width: 90% !important;
        text-align: center !important;
        border: 2px solid rgba(255,255,255,0.3) !important;
    }

    /* ==========================================
       SECTION HEADING
       ========================================== */

    .advantages-section .sec-title_heading {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
        margin-bottom: 15px !important;
        padding: 0 10px !important;
    }

    .advantages-section .sec-title_heading br {
        display: none !important;
    }

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

    .advantages-section .sec-title_text {
        font-size: 0.95rem !important; /* Reduced from 2.1rem */
        line-height: 1.4 !important;
        margin-bottom: 25px !important;
        padding: 0 10px !important;
        max-width: 100% !important;
        font-weight: 600 !important;
    }

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

    .advantages-carousel-wrapper {
        margin-top: 30px !important;
        padding: 0 !important;
    }

    .advantages-slider {
        width: 100% !important;
        overflow: hidden !important;
    }

    .advantages-slider .swiper-wrapper {
        display: flex !important;
    }

    .advantages-slider .swiper-slide {
        width: 100% !important;
        height: auto !important;
    }

    /* ==========================================
       SLIDE CONTAINER - Display ONE advantage at a time
       ========================================== */

    .advantages-slider .swiper-slide > div[style*="flex-direction: column"] {
        display: block !important;
        width: 100% !important;
        height: auto !important;
    }

    /* Category Title */
    .advantages-slider .swiper-slide h3 {
        font-size: 1.5rem !important; /* Reduced from 2.2rem */
        margin-bottom: 20px !important;
        padding: 0 10px !important;
        text-align: center !important;
    }

    /* Products Row - Display ONE at a time */
    .advantages-slider .swiper-slide > div > div[style*="display: flex"] {
        display: block !important; /* Changed from flex */
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        gap: 0 !important;
    }

    /* Hide all advantages except the first one (will be restructured by JS) */
    .advantages-slider .swiper-slide > div > div[style*="display: flex"] > div {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }

    /* ==========================================
       ADVANTAGE CARD
       ========================================== */

    .services-block_one-inner.advantage-card {
        padding: 25px 20px !important;
        margin: 0 auto !important;
        max-width: 320px !important;
        width: 100% !important;
        border-radius: 16px !important;
        background: rgba(255, 255, 255, 0.95) !important;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15) !important;
        transition: all 0.3s ease !important;
    }

    .services-block_one-inner.advantage-card:hover {
        transform: translateY(-6px) !important;
        box-shadow: 0 10px 30px rgba(255, 152, 0, 0.3) !important;
    }

    /* ==========================================
       ADVANTAGE ICON - Remove circular orange background
       ========================================== */

    .advantage-icon-wrapper {
        width: 100% !important;
        height: auto !important;
        margin: 0 auto 15px auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important; /* Remove orange gradient */
        border-radius: 0 !important; /* Remove circular shape */
        padding: 0 !important; /* Remove padding */
        box-shadow: none !important; /* Remove shadow */
        max-width: 100% !important;
    }

    .advantage-icon {
        width: 140px !important;
        height: 140px !important;
        max-width: 90vw !important;
        max-height: 40vh !important;
        object-fit: contain !important;
        display: block !important;
        margin: 0 auto !important;
    }

    /* ==========================================
       ADVANTAGE BADGE
       ========================================== */

    .advantage-badge {
        font-size: 0.85rem !important;
        padding: 6px 12px !important;
        margin: 0 auto 12px auto !important;
        max-width: fit-content !important;
        background: linear-gradient(135deg, #1a9120, #2ecc71) !important;
        color: #fff !important;
        border-radius: 20px !important;
        font-weight: 600 !important;
        text-align: center !important;
        box-shadow: 0 2px 8px rgba(26, 145, 32, 0.3) !important;
    }

    .advantage-badge i {
        font-size: 0.8rem !important;
        margin-right: 4px !important;
    }

    /* ==========================================
       ADVANTAGE SOURCE (Product Title)
       ========================================== */

    .advantage-source {
        font-size: 1rem !important;
        padding: 8px 12px !important;
        margin-top: 12px !important;
        text-align: center !important;
        background: rgba(255, 152, 0, 0.1) !important;
        border-radius: 8px !important;
        border-left: 3px solid #ff9800 !important;
    }

    .advantage-source small {
        font-size: 0.9rem !important;
        font-weight: 600 !important;
        color: var(--black-color) !important;
    }

    /* ==========================================
       NAVIGATION ARROWS
       ========================================== */

    .advantages-slider-nav {
        position: static !important;
        margin-top: 30px !important;
        display: flex !important;
        justify-content: center !important;
        gap: 20px !important;
    }

    .advantages-slider-prev,
    .advantages-slider-next {
        position: static !important;
        left: auto !important;
        right: auto !important;
        width: 45px !important;
        height: 45px !important;
        background: rgba(255, 152, 0, 0.9) !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: white !important;
        font-size: 18px !important;
        cursor: pointer !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
        transition: all 0.3s ease !important;
        z-index: 10 !important;
    }

    .advantages-slider-prev:hover,
    .advantages-slider-next:hover {
        background: rgba(255, 152, 0, 1) !important;
        transform: scale(1.1) !important;
    }

    .advantages-slider-prev:active,
    .advantages-slider-next:active {
        transform: scale(0.95) !important;
    }

    /* ==========================================
       BACKGROUND IMAGE
       ========================================== */

    .services-one.advantages-section .services-one_image {
        opacity: 0.4 !important; /* Lighter on mobile for better text readability */
    }
}

/* ==========================================
   SMALL MOBILE (max-width: 480px)
   ========================================== */

@media only screen and (max-width: 480px) {

    .advantages-section .sec-title_title {
        font-size: 1.3rem !important;
        padding: 10px 20px !important;
    }

    .main-qualities-row span {
        font-size: 1rem !important;
        padding: 7px 15px !important;
    }

    .advantages-section .sec-title_heading {
        font-size: 1.3rem !important;
    }

    .advantages-section .sec-title_text {
        font-size: 0.9rem !important;
    }

    .advantages-slider .swiper-slide h3 {
        font-size: 1.3rem !important;
    }

    .services-block_one-inner.advantage-card {
        padding: 20px 15px !important;
        max-width: 280px !important;
    }

    .advantage-icon-wrapper {
        width: 100% !important;
        height: auto !important;
        padding: 0 !important; /* No padding */
        max-width: 100% !important;
    }

    .advantage-icon {
        width: 110px !important;
        height: 110px !important;
        max-width: 95vw !important;
        max-height: 32vh !important;
    }

    .advantage-badge {
        font-size: 0.8rem !important;
        padding: 5px 10px !important;
    }

    .advantage-source small {
        font-size: 0.85rem !important;
    }

    .advantages-slider-prev,
    .advantages-slider-next {
        width: 40px !important;
        height: 40px !important;
        font-size: 16px !important;
    }
}

/* ==========================================
   TABLET (768px - 991px)
   ========================================== */

@media only screen and (min-width: 768px) and (max-width: 991px) {

    .advantages-section .sec-title_title {
        font-size: 2rem !important;
    }

    .main-qualities-row span {
        font-size: 1.4rem !important;
        padding: 10px 24px !important;
    }

    .advantages-section .sec-title_heading {
        font-size: 1.8rem !important;
    }

    .advantages-section .sec-title_text {
        font-size: 1.2rem !important;
    }

    .advantages-slider .swiper-slide h3 {
        font-size: 1.8rem !important;
    }

    /* Show 2 advantages per slide on tablet */
    .advantages-slider .swiper-slide > div > div[style*="display: flex"] > div {
        flex: 0 1 45% !important;
        max-width: 45% !important;
    }
}