/* ===================================
   MOBILE-ONLY RESPONSIVE CSS
   This file ONLY affects mobile devices
   Desktop remains completely unchanged
   =================================== */

/* Apply these styles ONLY on mobile devices */
@media (max-width: 768px) {
    
    /* ===================================
       BOTTOM NAVIGATION BAR (Mobile App Style)
       =================================== */
    .mobile-bottom-nav {
        display: flex !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: white;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
        z-index: 9999;
        padding: 8px 0;
        border-top: 1px solid #e5e7eb;
    }
    
    .mobile-bottom-nav-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        color: #6b7280;
        font-size: 10px;
        padding: 4px;
        transition: all 0.2s ease;
    }
    
    .mobile-bottom-nav-item i {
        font-size: 20px;
        margin-bottom: 2px;
    }
    
    .mobile-bottom-nav-item.active {
        color: var(--primary-color);
    }

    /* Remove green background from WhatsApp icon and match other icons */
    .mobile-bottom-nav-item .fa-whatsapp,
    .mobile-bottom-nav-item .fab.fa-whatsapp {
        background: none !important;
        color: #4b5563 !important;
        background-color: transparent !important;
    }

    .mobile-bottom-nav-item.active .fa-whatsapp,
    .mobile-bottom-nav-item.active .fab.fa-whatsapp {
        color: var(--primary-color) !important;
    }

    /* Override style.css WhatsApp link styling for mobile bottom nav */
    .mobile-bottom-nav-item[href*="wa.me"] {
        background-color: transparent !important;
        color: inherit !important;
    }

    .mobile-bottom-nav-item[href*="wa.me"] i {
        color: #4b5563 !important;
    }

    .mobile-bottom-nav-item.active[href*="wa.me"] i {
        color: var(--primary-color) !important;
    }
    
    .mobile-bottom-nav-item:active {
        transform: scale(0.95);
    }
    
    /* Add padding to body to account for bottom nav */
    body {
        padding-bottom: 70px !important;
    }
    
    /* Hide bottom nav on desktop */
    @media (min-width: 769px) {
        .mobile-bottom-nav {
            display: none !important;
        }
        body {
            padding-bottom: 0 !important;
        }
    }
    
    /* ===================================
       FIX BROCHURE AND TABLE OVERFLOW
       =================================== */
    
    /* Remove horizontal scrollbar from tables */
    .overflow-x-auto {
        overflow-x: hidden !important;
        overflow-y: visible !important;
        width: 100% !important;
    }
    
    /* Make tables fully responsive */
    table {
        width: 100% !important;
        min-width: 100% !important;
        table-layout: fixed !important;
        border-collapse: collapse !important;
    }
    
    table thead {
        display: none !important; /* Hide table headers on mobile */
    }
    
    /* Convert table rows to card-like layout */
    table tbody {
        display: block !important;
        width: 100% !important;
    }
    
    table tbody tr {
        display: block !important;
        width: 100% !important;
        margin-bottom: 12px !important;
        background: white !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 8px !important;
        padding: 12px !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    }
    
    table tbody td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
        padding: 8px 0 !important;
        border: none !important;
        font-size: 13px !important;
        line-height: 1.4 !important;
        width: 100% !important;
    }
    
    /* Hide the labels added by JavaScript to avoid duplication */
    table tbody td.mobile-value-cell::before {
        content: none !important;
    }

    /* Keep table cells side by side on mobile */
    table tbody tr {
        display: table-row !important;
        margin-bottom: 0 !important;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        box-shadow: none !important;
    }

    table tbody td {
        display: table-cell !important;
        padding: 8px 12px !important;
        border-bottom: 1px solid #e5e7eb !important;
        width: auto !important;
    }

    table {
        display: table !important;
        width: 100% !important;
        table-layout: auto !important;
    }

    table tbody {
        display: table-row-group !important;
    }
    
    /* ===================================
       BROCHURE TAB FIX
       =================================== */
    
    #brochure {
        padding: 16px !important;
        margin: 0 !important;
    }
    
    #brochure h3 {
        font-size: 18px !important;
        margin-bottom: 12px !important;
    }
    
    #brochure .mb-4 {
        margin-bottom: 12px !important;
    }
    
    #brochure a {
        width: 100% !important;
        justify-content: center !important;
        padding: 12px 16px !important;
        font-size: 14px !important;
        text-align: center !important;
    }
    
    /* ===================================
       IMAGE RESPONSIVENESS
       =================================== */

    /* All images should be fully responsive */
    img {
        max-width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
        display: block !important;
    }

    /* Property card images */
    .property-card img,
    .image-container img {
        width: 100% !important;
        height: 180px !important;
        object-fit: cover !important;
    }

    /* Gallery images */
    .property-gallery img,
    .gallery-image img {
        width: 100% !important;
        height: 200px !important;
        object-fit: cover !important;
    }

    /* Hero images */
    .hero-section img,
    .banner-image img {
        width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
    }

    /* ===================================
       SWIPER CAROUSEL MOBILE FIXES
       =================================== */

    /* Main swiper height on mobile */
    .mainSwiper {
        height: 250px !important;
    }

    /* Thumbnail swiper on mobile */
    .thumbSwiper {
        padding: 8px !important;
    }

    .thumbSwiper .swiper-slide {
        width: 80px !important;
    }

    .thumbSwiper img {
        height: 60px !important;
    }

    /* Swiper navigation buttons on mobile */
    .swiper-button-next,
    .swiper-button-prev {
        width: 32px !important;
        height: 32px !important;
        margin-top: -16px !important;
    }

    .swiper-button-next:after,
    .swiper-button-prev:after {
        font-size: 14px !important;
    }

    /* Swiper pagination on mobile */
    .swiper-pagination-bullet {
        width: 8px !important;
        height: 8px !important;
    }

    /* Gallery Tab Swiper on mobile */
    .galleryTabSwiper {
        height: 300px !important;
    }

    .galleryTabSwiper .swiper-slide {
        height: auto !important;
    }

    .galleryTabSwiper img {
        height: 250px !important;
    }

   

    /* Move chat widget higher on mobile */
    #chat-widget {
        bottom: 160px !important;
        right: 10px !important;
    }

    #chat-widget img {
        width: 60px !important;
        height: 60px !important;
    }
    
    /* ===================================
       CONTAINER PADDING ADJUSTMENTS
       =================================== */
    
    .container,
    .container-fluid {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    
    .container.mx-auto.px-4 {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    
    /* ===================================
       TAB NAVIGATION FIX
       =================================== */
    
    /* Container for tab buttons - 2 rows layout */
    nav[aria-label="Tabs"] {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        justify-content: flex-start !important;
    }
    
    .tab-btn {
        padding: 10px 4px !important;
        font-size: 11px !important;
        flex: 0 0 calc(33.33% - 2px) !important;
        text-align: center !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        line-height: 1.2 !important;
        width: calc(33.33% - 2px) !important;
        border-bottom-width: 2px !important;
        margin: 0 1px !important;
    }
    
    /* ===================================
       BUTTON SIZING
       =================================== */
    
    button,
    .btn {
        min-height: 44px !important;
        padding: 10px 16px !important;
        font-size: 14px !important;
    }
    
    /* Touch-friendly buttons */
    @media (hover: none) and (pointer: coarse) {
        button,
        .btn {
            min-width: 44px !important;
            min-height: 44px !important;
        }
    }
    
    /* ===================================
       CARD ADJUSTMENTS
       =================================== */
    
    .property-card,
    .bg-white.rounded-xl.shadow-lg {
        padding: 12px !important;
        margin-bottom: 12px !important;
        border-radius: 8px !important;
    }
    
    /* ===================================
       TEXT SIZING
       =================================== */
    
    h1 {
        font-size: 24px !important;
        line-height: 1.3 !important;
    }
    
    h2 {
        font-size: 20px !important;
        line-height: 1.3 !important;
    }
    
    h3 {
        font-size: 18px !important;
        line-height: 1.3 !important;
    }
    
    .text-xl {
        font-size: 18px !important;
    }
    
    .text-lg {
        font-size: 16px !important;
    }
    
    .text-sm {
        font-size: 13px !important;
    }
    
    .text-xs {
        font-size: 11px !important;
    }
    
    /* ===================================
       SPACING ADJUSTMENTS
       =================================== */
    
    .mb-8 {
        margin-bottom: 16px !important;
    }
    
    .mb-6 {
        margin-bottom: 12px !important;
    }
    
    .mb-4 {
        margin-bottom: 8px !important;
    }
    
    .py-8 {
        padding-top: 16px !important;
        padding-bottom: 16px !important;
    }
    
    .py-16 {
        padding-top: 24px !important;
        padding-bottom: 24px !important;
    }
    
    /* ===================================
       GRID ADJUSTMENTS
       =================================== */
    
    .grid-cols-1,
    .grid-cols-2,
    .grid-cols-3,
    .grid-cols-4 {
        grid-template-columns: 1fr !important;
    }
    
    .gap-4,
    .gap-6,
    .gap-8 {
        gap: 12px !important;
    }
    
    /* ===================================
       HERO SECTION
       =================================== */
    
    .hero-section {
        padding: 40px 12px !important;
    }
    
    .hero-section h1 {
        font-size: 24px !important;
    }
    
    .hero-section p {
        font-size: 16px !important;
    }
    
    /* Search bar on mobile */
    .hero-section form {
        padding: 16px !important;
    }
    
    .hero-section select,
    .hero-section input {
        padding: 12px !important;
        font-size: 14px !important;
    }
    
    /* ===================================
       FORM ELEMENTS
       =================================== */
    
    input,
    select,
    textarea {
        font-size: 16px !important; /* Prevent iOS zoom */
        padding: 12px !important;
    }
    
    /* ===================================
       HIDE DESKTOP ELEMENTS ON MOBILE
       =================================== */
    
    .hidden-mobile {
        display: none !important;
    }
    
    /* ===================================
       SCROLLBAR HIDE (for cleaner look)
       =================================== */
    
    ::-webkit-scrollbar {
        width: 0px !important;
        height: 0px !important;
    }
    
    /* ===================================
       SPECIFIC FIXES FOR PROPERTY DETAIL
       =================================== */
    
    .tab-content {
        padding: 12px !important;
    }
    
    .tab-content h3 {
        font-size: 16px !important;
        margin-bottom: 8px !important;
    }
    
    /* Fix for brochure button */
    #brochure a.inline-flex {
        display: flex !important;
        width: 100% !important;
    }

    /* ===================================
       WHATSAPP FLOATING BUTTON SIZE
       =================================== */
    
    /* Reduce WhatsApp floating button size on mobile */
    a.fixed[href*="wa.me"] {
        width: 56px !important;
        height: 56px !important;
    }

    a.fixed[href*="wa.me"] i {
        font-size: 24px !important;
    }
}

/* Extra small mobile devices (iPhone SE, etc.) */
@media (max-width: 380px) {
    
    .container,
    .container-fluid {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    
    table tbody td {
        font-size: 12px !important;
    }
    
    table tbody td::before {
        font-size: 11px !important;
        min-width: 100px !important;
    }
    
    .mobile-bottom-nav-item {
        font-size: 9px;
    }
    
    .mobile-bottom-nav-item i {
        font-size: 18px;
    }
}

/* Landscape mobile */
@media (max-width: 768px) and (orientation: landscape) {
    
    body {
        padding-bottom: 60px !important;
    }
    
    .mobile-bottom-nav {
        padding: 4px 0;
    }
    
    .mobile-bottom-nav-item {
        font-size: 9px;
    }
    
    .mobile-bottom-nav-item i {
        font-size: 16px;
    }
}