/* Mobile Responsiveness Fixes */

/* Fix header flex containers on mobile */
@media only screen and (max-width: 767px) {
    /* Hide header-top completely on mobile to reduce header size */
    .main-header .header-top {
        display: none !important;
    }
    
    /* Header lower - compact mobile layout */
    .main-header .header-lower {
        padding: 10px 0 !important;
    }
    
    .header-lower .inner-container.d-flex {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 10px;
        padding: 10px 0 !important;
    }
    
    .header-lower .logo-box {
        text-align: left;
        flex: 0 0 auto;
    }
    
    .header-lower .logo-box .logo img {
        max-width: 100px !important;
        height: auto;
    }
    
    .header-lower .nav-outer {
        flex: 1;
        justify-content: flex-end;
    }
    
    .header-lower .outer-box {
        flex: 0 0 auto;
    }
    
    /* Sticky header mobile - compact and clean */
    .main-header .sticky-header {
        padding: 8px 0 !important;
    }
    
    .sticky-header .auto-container.d-flex {
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 10px;
    }
    
    .sticky-header .logo {
        flex: 0 0 auto;
        padding: 5px 0 !important;
    }
    
    .sticky-header .logo img {
        max-width: 60px !important;
        height: auto;
    }
    
    /* Hide Riad links in sticky header on mobile */
    .sticky-header .sticky-riad-links {
        display: none !important;
    }
    
    /* Hide main menu in sticky header on mobile */
    .sticky-header .main-menu {
        display: none !important;
    }
    
    /* Show only mobile nav toggler in sticky header */
    .sticky-header .mobile-nav-toggler {
        display: block !important;
        font-size: 24px !important;
    }
    
    /* Testimonial section mobile fixes */
    .testimonial-section {
        background-attachment: scroll !important;
        background-size: cover !important;
        background-position: center !important;
        padding: 60px 0 !important;
    }
    
    .testimonial-section .auto-container {
        padding: 0 15px;
    }
    
    .testimonial-section .row {
        margin: 0 -10px;
    }
    
    .testimonial-section .column {
        padding: 0 10px;
        margin-bottom: 30px;
    }
    
    .testimonial-section .title-column {
        text-align: center;
        margin-bottom: 40px;
    }
    
    .testimonial-section .sec-title h2 {
        font-size: 32px !important;
        line-height: 1.3 !important;
    }
    
    .testimonial-section .testimonial-block {
        margin-bottom: 20px;
    }
    
    .testimonial-section .testimonial-block .inner-box {
        padding: 25px 20px !important;
        min-height: auto !important;
    }
    
    /* Image sliders mobile fixes */
    .main-slider .slide {
        background-attachment: scroll !important;
        background-size: cover !important;
        background-position: center !important;
    }
    
    .main-slider .content-box {
        padding: 150px 0 100px !important;
    }
    
    .main-slider h1 {
        font-size: 36px !important;
        line-height: 1.2 !important;
    }
    
    /* Swiper/Carousel mobile fixes */
    .swiper-container {
        overflow: hidden;
        width: 100%;
    }
    
    .swiper-slide {
        width: 100% !important;
    }
    
    .swiper-button-next,
    .swiper-button-prev,
    .custom-swiper-button-next,
    .custom-swiper-button-prev {
        width: 40px !important;
        height: 40px !important;
    }
    
    .custom-swiper-button-next {
        right: 10px !important;
    }
    
    .custom-swiper-button-prev {
        left: 10px !important;
    }
    
    /* Room detail carousel */
    .room-detail-section .content-carousel {
        max-height: 400px !important;
    }
    
    .room-detail-section .content-carousel .swiper-wrapper {
        max-height: 400px !important;
    }
    
    .room-detail-section .swiper-slide .image img {
        max-height: 400px !important;
    }
    
    /* Flex wrap fixes for all d-flex containers */
    .d-flex.justify-content-between {
        gap: 15px;
    }
    
    .d-flex.flex-wrap {
        flex-wrap: wrap !important;
    }
    
    /* Section title mobile */
    .sec-title.d-flex {
        flex-direction: column !important;
        text-align: center;
    }
    
    .sec-title h2 {
        font-size: 28px !important;
        line-height: 1.3 !important;
        margin-bottom: 15px;
    }
    
    /* Auto container padding on mobile */
    .auto-container {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* Tablet fixes */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .testimonial-section {
        background-attachment: scroll !important;
    }
    
    .testimonial-section .sec-title h2 {
        font-size: 38px !important;
    }
    
    .main-slider .content-box {
        padding: 200px 0 150px !important;
    }
    
    .main-slider h1 {
        font-size: 48px !important;
    }
    
    .sticky-header .sticky-riad-links {
        gap: 10px !important;
    }
    
    .room-detail-section .content-carousel {
        max-height: 450px !important;
    }
    
    .room-detail-section .content-carousel .swiper-wrapper {
        max-height: 450px !important;
    }
    
    .room-detail-section .swiper-slide .image img {
        max-height: 450px !important;
    }
}

/* Small mobile devices */
@media only screen and (max-width: 480px) {
    .testimonial-section {
        padding: 40px 0 !important;
    }
    
    .testimonial-section .sec-title h2 {
        font-size: 24px !important;
    }
    
    .main-slider .content-box {
        padding: 120px 0 80px !important;
    }
    
    .main-slider h1 {
        font-size: 28px !important;
    }
    
    .header-top .info li {
        font-size: 12px;
    }
    
    .sticky-riad-links li a {
        padding: 6px 10px !important;
        font-size: 13px !important;
    }
    
    .room-detail-section .content-carousel {
        max-height: 300px !important;
    }
    
    .room-detail-section .content-carousel .swiper-wrapper {
        max-height: 300px !important;
    }
    
    .room-detail-section .swiper-slide .image img {
        max-height: 300px !important;
    }
    
    .custom-swiper-button-next,
    .custom-swiper-button-prev {
        width: 35px !important;
        height: 35px !important;
    }
}