/**
 * Index Page Mobile Responsive Optimizations
 * Fixes hero slider, search forms, and content sections for mobile
 */

/* ===== HERO SLIDER / PHOTO SLIDER ===== */
@media (max-width: 991px) {
    
    /* Photo slider container */
    .photoslider2,
    .photoslider2-carousel {
        min-height: auto !important;
        height: auto !important;
    }
    
    /* Carousel */
    #photoslider2-carousel {
        height: auto !important;
        min-height: 400px;
    }
    
    #photoslider2-carousel .carousel-inner {
        height: auto !important;
    }
    
    #photoslider2-carousel .item {
        height: auto !important;
        min-height: 400px;
    }
    
    /* Hero images - make them responsive */
    #photoslider2-carousel .item img {
        width: 100% !important;
        height: 400px !important;
        object-fit: cover;
        object-position: center;
    }
    
    /* Hero content overlay */
    .photoslider2-content {
        padding: 20px 15px !important;
        position: relative !important;
        top: auto !important;
        transform: none !important;
    }
    
    .photoslider2-content h3 {
        font-size: 20px !important;
        line-height: 1.3 !important;
        margin-bottom: 10px !important;
    }
    
    .photoslider2-content p {
        font-size: 14px !important;
        line-height: 1.4 !important;
        margin-bottom: 15px !important;
    }
    
    .photoslider2-content .btn {
        font-size: 14px !important;
        padding: 10px 20px !important;
    }
    
    /* Carousel controls */
    .carousel-control {
        width: 10% !important;
        opacity: 0.7;
    }
    
    .carousel-control .icon-prev,
    .carousel-control .icon-next {
        font-size: 30px !important;
        width: 30px !important;
        height: 40px !important;
    }
}

/* ===== SEARCH FORMS ===== */
@media (max-width: 991px) {
    
    /* Hide the redundant nav tabs on mobile (Flight, Hotel, Tours, etc.) */
    .booking-form-section .nav-tabs,
    #exTab3 .nav-tabs {
        display: none !important;
    }
    
    /* Ensure tab content container is visible */
    .booking-form-section .tab-content,
    #exTab3 .tab-content {
        display: block !important;
    }
    
    /* Only show the active tab pane (Flight) on mobile */
    .booking-form-section .tab-pane,
    #exTab3 .tab-pane {
        display: none !important;
    }
    
    .booking-form-section .tab-pane.active,
    #exTab3 .tab-pane.active {
        display: block !important;
        opacity: 1 !important;
    }
    
    /* Flight search form */
    .flight-search-form,
    .search-form-container {
        padding: 15px !important;
        margin: 15px 0 !important;
    }
    
    .flight-search-form .form-group {
        margin-bottom: 15px !important;
    }
    
    .flight-search-form .form-control {
        font-size: 14px !important;
        padding: 10px !important;
        height: 44px !important;
    }
    
    .flight-search-form .btn {
        width: 100% !important;
        font-size: 16px !important;
        padding: 12px !important;
        margin-top: 10px !important;
    }
    
    /* Search results */
    #flightSearchResults {
        width: 100% !important;
        max-width: 100% !important;
        padding: 15px !important;
    }
}

/* ===== SECTIONS SPACING ===== */
@media (max-width: 991px) {
    
    /* General section padding */
    .container-fluid {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* Section titles */
    .section-title,
    .destinations-title,
    .deals-title {
        font-size: 24px !important;
        margin-bottom: 20px !important;
    }
    
    .section-subtitle {
        font-size: 14px !important;
    }
}

/* ===== MODERN BANNER SECTION ===== */
@media (max-width: 991px) {
    
    .modern-banner-section {
        padding: 30px 0 !important;
    }
    
    .modern-banner-carousel {
        min-height: auto !important;
    }
    
    .banner-contact-slide {
        padding: 30px 20px !important;
        min-height: auto !important;
    }
    
    .banner-contact-content h2 {
        font-size: 22px !important;
        margin-bottom: 15px !important;
    }
    
    .banner-contact-content p {
        font-size: 14px !important;
        margin-bottom: 20px !important;
    }
    
    .banner-contact-info {
        flex-direction: column !important;
        gap: 15px !important;
    }
    
    .contact-item {
        font-size: 14px !important;
        padding: 12px !important;
    }
    
    .contact-item i {
        font-size: 18px !important;
    }
}

/* ===== CAROUSELS (Top Deals, Flight Deals) ===== */
@media (max-width: 991px) {
    
    /* Carousel wrappers */
    .top-deals-carousel-wrapper,
    .deals-carousel-wrapper,
    .destinations-carousel-wrapper {
        padding: 0 15px !important;
    }
    
    /* Navigation buttons */
    .top-deals-nav,
    .carousel-nav {
        width: 36px !important;
        height: 36px !important;
        font-size: 14px !important;
    }
    
    .top-deals-nav.prev,
    .carousel-nav.prev {
        left: 5px !important;
    }
    
    .top-deals-nav.next,
    .carousel-nav.next {
        right: 5px !important;
    }
    
    /* Carousel items */
    .top-deals-carousel,
    .deals-carousel,
    .destinations-carousel {
        gap: 15px !important;
        padding: 10px 0 !important;
    }
}

/* ===== POPUPS / MODALS ===== */
@media (max-width: 768px) {
    
    .popup-content {
        max-width: 95% !important;
        margin: 10px !important;
    }
    
    .popup-image-only {
        max-width: 95% !important;
    }
    
    .popup-only-image {
        max-height: 80vh !important;
    }
}

/* ===== SMALL MOBILE (≤ 480px) ===== */
@media (max-width: 480px) {
    
    /* Hero slider */
    #photoslider2-carousel {
        min-height: 300px;
    }
    
    #photoslider2-carousel .item {
        min-height: 300px;
    }
    
    #photoslider2-carousel .item img {
        height: 300px !important;
    }
    
    .photoslider2-content h3 {
        font-size: 18px !important;
    }
    
    .photoslider2-content p {
        font-size: 13px !important;
    }
    
    /* Section titles */
    .section-title,
    .destinations-title,
    .deals-title {
        font-size: 20px !important;
    }
    
    /* Banner */
    .banner-contact-content h2 {
        font-size: 18px !important;
    }
    
    .banner-contact-content p {
        font-size: 13px !important;
    }
    
    .contact-item {
        font-size: 13px !important;
        padding: 10px !important;
    }
    
    /* Carousels */
    .top-deals-carousel-wrapper,
    .deals-carousel-wrapper,
    .destinations-carousel-wrapper {
        padding: 0 10px !important;
    }
}

/* ===== LANDSCAPE MOBILE (≤ 500px height) ===== */
@media (max-height: 500px) and (max-width: 991px) {
    
    /* Reduce hero height in landscape */
    #photoslider2-carousel,
    #photoslider2-carousel .item {
        min-height: 250px !important;
    }
    
    #photoslider2-carousel .item img {
        height: 250px !important;
    }
    
    .photoslider2-content {
        padding: 15px 10px !important;
    }
    
    .photoslider2-content h3 {
        font-size: 16px !important;
        margin-bottom: 5px !important;
    }
    
    .photoslider2-content p {
        font-size: 12px !important;
        margin-bottom: 10px !important;
    }
}

/* ===== FIX OVERLAPPING CONTENT ===== */
@media (max-width: 991px) {
    
    /* Ensure sections don't overlap */
    .site-main {
        padding-top: 0 !important;
    }
    
    /* Add proper spacing between sections */
    .photoslider2 + .top-destinations-section,
    .photoslider2 + section,
    .modern-banner-section + section {
        margin-top: 20px !important;
    }
    
    /* Fix any absolute positioning issues */
    .photoslider2-content {
        position: relative !important;
    }
}

/* ===== TABLET (768px - 991px) ===== */
@media (min-width: 768px) and (max-width: 991px) {
    
    /* Slightly larger elements for tablets */
    #photoslider2-carousel,
    #photoslider2-carousel .item {
        min-height: 450px;
    }
    
    #photoslider2-carousel .item img {
        height: 450px !important;
    }
    
    .photoslider2-content h3 {
        font-size: 24px !important;
    }
    
    .photoslider2-content p {
        font-size: 15px !important;
    }
    
    .section-title,
    .destinations-title,
    .deals-title {
        font-size: 28px !important;
    }
}

/* ===== SMOOTH TRANSITIONS ===== */
.photoslider2-content,
.banner-contact-content,
.carousel-control,
.top-deals-nav,
.carousel-nav {
    transition: all 0.3s ease;
}

/* ===== ACCESSIBILITY ===== */
@media (max-width: 991px) {
    
    /* Ensure touch targets are large enough */
    .carousel-control,
    .top-deals-nav,
    .carousel-nav,
    .btn,
    .form-control {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Focus states */
    .carousel-control:focus,
    .top-deals-nav:focus,
    .carousel-nav:focus,
    .btn:focus {
        outline: 2px solid #048ED3;
        outline-offset: 2px;
    }
}