@media(max-width: 600px) {
    body {
        position: absolute;
        font-family: "Montserrat", sans-serif;
        background: var(--clr-lupo);
        font-size: 16px;
        scrollbar-color: var(--clr-lupo-red);
        scrollbar-width: 60px;
        width: 100%;
        margin: 0px;
        min-width: 0;
        overflow-x: clip;
    }

    .city-form-div{
        width: 100%;
        max-width: 100%;
        min-width: 250px;
        height: 60px;
    }

    .rooms-wrapper{
        padding-top: 20px;
    }

    #searchInput{
        font-size: 16px;
        top:18px;
    }

    .cities-images{
        height: 100px;
    }

    .forbyfor-div {
        min-width: 0px;
        min-height: 300px;
    }

    .forbyfor-div2 {
        min-width: 55%;
        min-height: 300px;
    }

    h1{
        font-size: 2.25rem;
    }

    h2{
        font-size: 18px;
    }

    .home-filler{
        height: 200px;
    }

    .home-filler-image{
        height: 100px;
    }

    .assuring-images{
        height: 80px;
    }

    .suggestion-div{
        max-width: 100%;
    }

    .availability{
        display: none;
    }

    .filter-text{
        display: none;
    }

    .top-filter-img{
        margin-right: 0px;
    }

    .top-filter-arrow{
        margin-left: 0px;
    }

    #filters{
        display: none;
    }

    .bot-filter-div{
        height: 70px;
        width: 70px;
        min-width: 70px;
    }

    #extras{
        min-width: 70px;
    }

    .bot-filter-img{
        margin: 0px;
    }

    .gap20{
        gap: 10px;
    }

    .reservation-div{
        position: relative;
        padding: 20px;
    }

    .room-image-div{
        margin: 0px;
    }

    .main-images{
        width: 80%;
    }

    .reservation-div{
        min-width: 80vw;
    }

    .room-columns{
        width: 70%;
    }
    
    .full-image{
        width: 90vw;
        height: auto;
    }
    
    .left-arrow{
        z-index: 100;
        display:flex;
        position: absolute;
        top: 50vh;
        left: 10px;
        height: 40px;
        width: 40px;
    }

    
    .right-arrow{
        z-index: 100;
        position: absolute;
        top: 50vh;
        right: 10px;
        height: 40px;
        width: 40px;
    }

    .hide_mobile{
        display: none;
    }

    .thebutton{
        width: 100%;
    }

    .show_mobile{
        display: flex;
    }

    .mobilefw{
        min-width: 99.9%;
        width: 99.9%;
    }

    .mobilew90{
        min-width: 90%;
        width: 90%;
    }

    #agent{
        width: 75%;
    }

    #bg-image{
        display: none;
    }

    .mobile-filter-feedback {
        display: block;
    }

    #details{
        width: 70vw;
    }

    .bottom-panel {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: var(--clr-lupo);
            border-top: 1px solid #ccc;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
            overflow: hidden;
        }
        
        .toggle-button {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 10px;
            background: var(--clr-lupo-dark);
            color: black;
            cursor: pointer;
        }
        
        .toggle-button:hover {
            background: var(--clr-lupo-dark);
        }
        
        .toggle-icon {
            margin-left: 8px;
            transition: transform 0.3s ease;
        }
        
        .panel-content {
            padding: 20px;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
        }
        
        /* When panel is expanded */
        .bottom-panel.expanded {
            height: auto;
        }
        
        .bottom-panel.expanded .panel-content {
            max-height: 800px; /* Adjust based on your content */
        }
        
        .bottom-panel.expanded .toggle-icon {
            transform: rotate(180deg);
        }
      
}

@media(max-width: 1163px) {
    .reservation-div{
        position: relative;
    }
}

@media(min-width: 601px) {
    .hide-desktop{
        display: none;
    }

    h1{
        font-size: 3.75rem;
    }

    .thebutton{
        max-width: calc(50% - 10px);
    }
}

/* ════════════════════════════════════════════════════════════════
   TABLET — 601px to 900px
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    body {
        min-width: 0;
        overflow-x: clip;
    }

    /* Account/profile page — sidebar hidden, main full width */
    .hide_mobile {
        display: none !important;
    }

    /* Dashboard body layout: full-width column */
    body.fw.left-right {
        flex-direction: column;
    }

    /* The old sidebar (account.php, my_properties.php) */
    .left.center.bordergrey.radius.whitebg.hide_mobile {
        display: none !important;
    }

    /* Account form — full width */
    .w60 {
        width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 16px;
        box-sizing: border-box;
    }

    /* Home hero section */
    .main {
        padding: 0 16px;
    }

    /* City search input bar */
    .city-form-div {
        width: 90vw;
        max-width: 500px;
    }

    /* City cards horizontal scroll */
    .city-cards-container {
        gap: 12px;
    }
}

/* ════════════════════════════════════════════════════════════════
   MOBILE — ≤600px (extends existing block above)
   Additional rules beyond what's already in @media(max-width:600px)
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
    /* Fix body layout for dashboard pages */
    body.fw.left-right.lupobg {
        flex-direction: column;
        align-items: stretch;
    }

    /* Account/profile page full-width main content */
    .w60 {
        width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 14px;
        box-sizing: border-box;
    }

    /* mobilew90 — tighter on mobile */
    .mobilew90 {
        min-width: 0 !important;
        width: 100% !important;
        padding: 0 14px;
        box-sizing: border-box;
    }

    /* Header nav links — smaller gap */
    header {
        padding: 0 12px !important;
    }

    /* Home hero h1 */
    h1 {
        font-size: 2rem;
        line-height: 1.2;
    }

    /* Home city search */
    .city-form-div {
        width: 92vw;
        height: 52px;
    }

    /* City cards — horizontal scroll on mobile */
    .city-cards-container {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 8px;
        gap: 12px;
    }

    .city-cards-container::-webkit-scrollbar {
        display: none;
    }

    /* Room detail page — full-width images */
    .room-columns {
        width: 100%;
    }

    /* Reservation detail page */
    .reservation-div {
        min-width: 0;
        width: 100%;
        padding: 14px;
        box-sizing: border-box;
    }

    /* Filter bar chips — ensure horizontal scroll works */
    .filters-sticky {
        padding: 8px 12px !important;
    }

    /* Advanced filter panel — full width on mobile */
    .advanced-filters-panel {
        width: 92vw !important;
        left: 4vw !important;
        right: 4vw !important;
    }

    /* Filter dropdown — full width on mobile */
    .filter-dropdown {
        min-width: 260px !important;
        max-width: 92vw !important;
    }

    /* Section/content padding reduction */
    .lrpad20 {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Stat cards in referral/account section */
    .dash-stats-row {
        grid-template-columns: 1fr 1fr;
    }

    /* Post ad form — full width inputs */
    input[type="text"],
    input[type="email"],
    input[type="number"],
    input[type="tel"],
    select,
    textarea {
        font-size: 16px; /* prevent iOS zoom on focus */
    }

    /* my_properties — nav tabs */
    .mobilefw.left-right-left.top20.lrpad20.red {
        flex-wrap: wrap;
        height: auto !important;
        gap: 8px;
        padding: 12px;
    }

    /* Plans page — full width cards */
    .plan-card,
    [class*="plan"] {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* FAQ / info sections */
    .forbyfor-div {
        min-width: 0;
        width: 100%;
    }

    /* Contact section */
    .contact-section-mobile {
        padding: 30px 16px !important;
        gap: 16px !important;
    }

    .contact-main-text {
        font-size: 1.6rem !important;
    }
}