/* Custom styles for specific layout needs not easily handled by single Tailwind classes */

        /* Custom scrollbar for amenities, if default Tailwind isn't enough */
        .amenities-scroll {
            scrollbar-width: thin; /* Firefox */
            scrollbar-color: #a0aec0 transparent; /* Firefox */
        }
        .amenities-scroll::-webkit-scrollbar {
            height: 4px;
        }
        .amenities-scroll::-webkit-scrollbar-thumb {
            background-color: #a0aec0;
            border-radius: 2px;
        }
        .amenities-scroll::-webkit-scrollbar-track {
            background-color: transparent;
        }

        /* --- Header / Navbar Adjustments --- */
        .navbar-logo {
            flex-shrink: 0; /* Prevent logo from shrinking */
        }
        .navbar-user-actions {
            flex-shrink: 0; /* Prevent user actions from shrinking */
        }

        /* --- Filter Form Adjustments --- */
        .filter-form-container {
            /* This is the div containing the form */
            overflow-x: auto; /* Enable horizontal scrolling if content overflows */
            -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
            padding-bottom: 10px; /* Add some padding for scrollbar visibility */
            /* Added for PC view: Remove horizontal padding to minimize side margin */
            padding-left: 0;
            padding-right: 0;
        }

        .filter-form {
            display: flex; /* Ensure flex behavior */
            flex-wrap: nowrap; /* Default for larger screens */
            gap: 8px; /* Consistent gap between elements */
            min-width: fit-content; /* Allow content to dictate min-width for overflow-x */
            justify-content: space-between; /* Distribute items across the width on PC */
            width: 100%; /* Ensure form takes full width of its container on PC */
        }

        .filter-form .form-group {
            display: flex;
            flex-direction: column;
            flex-shrink: 0; /* Prevent individual items from shrinking too much */
            min-width: 120px; /* Base min-width */
            flex-grow: 1; /* Allow items to grow and fill available space on PC */
            max-width: 180px; /* Max width for individual input fields on PC */
        }
        /* Specific adjustments for the search input as it might need more space */
        .filter-form .form-group:first-child {
            max-width: 220px; /* Give search input more room */
        }

        .filter-form input,
        .filter-form select,
        .filter-form button {
            width: 100%; /* Ensure full width within their flex item */
            height: 38px; /* Consistent height for all inputs/buttons */
            box-sizing: border-box; /* Include padding and border in the element's total width and height */
        }

        .filter-form button {
            align-self: flex-end; /* Align button to the bottom */
            flex-grow: 0; /* Prevent button from growing too much */
            max-width: 120px; /* Control max width of the apply button */
        }


        /* --- PG Card Adjustments --- */
        .pg-card {
            display: flex;
            flex-direction: row; /* Default for larger screens */
            align-items: center;
            width: 100%;
            height: 180px; /* Fixed height for consistent look on larger screens */
            position: relative; /* For absolute positioning of action buttons */
            padding-right: 120px; /* Space for action buttons on the right */
        }

        .pg-image-container {
            flex-shrink: 0;
            width: 150px;
            height: 100%; /* Take full height of the card */
            overflow: hidden;
            border-radius: 7px 0 0 7px; /* Rounded left corners only */
        }

        .pg-details-content {
            flex-grow: 1; /* Allow details to take remaining space */
            padding: 1rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            height: 100%;
            overflow: hidden; /* Hide overflow content */
        }

        .pg-amenities-list {
            display: flex;
            flex-wrap: wrap; /* Allow amenities to wrap */
            gap: 4px;
            margin-top: 8px;
            list-style: none;
            padding: 0;
            overflow: hidden; /* Hide excess amenities if too many */
        }

        .pg-amenities-list li {
            background-color: #ecfdf5; /* Light green */
            color: #047857; /* Darker green */
            padding: 4px 8px;
            border-radius: 3px;
            font-size: 0.75rem; /* text-xs */
            display: flex;
            align-items: center;
            gap: 4px;
            white-space: nowrap; /* Prevent individual amenity names from wrapping */
        }

        .pg-actions-container {
            position: absolute; /* Position buttons absolutely on larger screens */
            right: 0;
            top: 0;
            height: 100%;
            width: 120px; /* Fixed width for action button area */
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 8px;
            padding: 8px;
            background-color: rgba(255, 255, 255, 0.9); /* Slightly transparent background */
            border-left: 1px solid #e0e0e0;
            box-sizing: border-box;
        }

        .pg-actions-container a {
            width: 90%; /* Take up most of the action column width */
            padding: 8px 0;
            text-align: center;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            flex-shrink: 0; /* Prevent buttons from shrinking */
        }

        /* --- MEDIA QUERIES --- */

        /* Small devices (phones, 640px and below) */
        @media (max-width: 640px) {
            .navbar-logo img {
                height: 36px; /* Smaller logo on very small screens */
            }

            .navbar-user-actions .group button {
                padding: 8px 12px; /* Smaller button padding */
                font-size: 0.9rem; /* Smaller font size */
            }

            .navbar-user-actions .group button span {
                display: none; /* Hide "Welcome, User" text on smallest screens */
            }

            .navbar-user-actions .group button i.fa-user-circle {
                margin-right: 0; /* No margin when text is hidden */
            }

            .dropdown-content {
                min-width: 180px; /* Adjust dropdown width */
            }

            /* Reduced overall horizontal padding on small screens */
            .max-w-6xl {
                margin-left: 0.5rem; /* Reduced margin */
                margin-right: 0.5rem; /* Reduced margin */
                padding: 1rem;
            }

            .text-3xl {
                font-size: 2rem; /* Smaller heading */
            }

            .filter-form-container {
                padding-left: 1rem; /* Reintroduce some padding for mobile */
                padding-right: 1rem; /* Reintroduce some padding for mobile */
            }

            .filter-form {
                flex-wrap: wrap; /* Allow form items to wrap */
                justify-content: flex-start; /* Align items to the start when wrapped */
                gap: 10px; /* Increase gap slightly for wrapped items */
                min-width: 100%; /* Allow form to take full width */
            }

            .filter-form .form-group {
                width: calc(50% - 5px); /* Two columns on small screens */
                min-width: unset; /* Override default min-width */
                max-width: unset; /* Remove max-width on mobile */
                flex-grow: 0; /* Prevent items from growing unnecessarily on mobile */
            }

            .filter-form .form-group:first-child {
                width: 100%; /* Keyword search takes full width on smallest screens */
            }

            .filter-form .form-group:last-of-type { /* Target the apply button's parent div */
                width: 100%; /* Apply button takes full width */
                flex-grow: 0; /* Prevent it from growing */
            }

            .filter-form button {
                margin-top: 5px; /* Add a small margin top for the button */
                max-width: 100%; /* Button takes full width on mobile */
            }

            .pg-card {
                flex-direction: column; /* Stack image and details vertically */
                height: auto; /* Allow height to adjust based on content */
                padding-right: 0; /* Remove right padding */
                border-radius: 8px; /* Uniform border radius */
            }

            .pg-image-container {
                width: 100%; /* Image takes full width */
                height: 180px; /* Maintain a good image height */
                border-radius: 8px 8px 0 0; /* Rounded top corners */
            }

            .pg-details-content {
                padding: 15px; /* More padding when stacked */
                height: auto;
            }

            .pg-actions-container {
                position: static; /* Remove absolute positioning */
                width: 100%;
                height: auto;
                flex-direction: row; /* Buttons side-by-side */
                justify-content: space-around; /* Space out buttons */
                padding: 10px 15px;
                border-top: 1px solid #eee;
                border-left: none; /* Remove left border */
                border-radius: 0 0 8px 8px; /* Rounded bottom corners */
            }

            .pg-actions-container a {
                width: calc(50% - 10px); /* Approximately half width for two buttons with gap */
                font-size: 0.9rem;
            }

            .pg-details-content h3 {
                font-size: 1.125rem; /* text-lg */
            }

            .pg-details-content p {
                font-size: 0.875rem; /* text-sm */
            }
        }

        /* Medium devices (tablets, 768px and below) - applies on top of small device styles */
        @media (min-width: 641px) and (max-width: 1023px) {
            .filter-form {
                flex-wrap: wrap;
                justify-content: space-between; /* Better distribution */
                gap: 10px;
            }

            .filter-form .form-group {
                width: calc(33.33% - 7px); /* Three columns */
            }

            .filter-form .form-group:last-of-type {
                width: calc(33.33% - 7px); /* Still takes appropriate column width */
                align-self: flex-end;
            }
        }

        /* Larger devices (PCs, 1024px and up) */
        @media (min-width: 1024px) {
            .max-w-6xl {
                /* On larger screens, mx-auto handles centering, no need for fixed margins */
                margin-left: auto;
                margin-right: auto;
                /* If you want less "side margin" on very large screens, you can increase max-w- */
                /* For example, max-w-7xl or max-w-full. Sticking with 6xl for now as it's a good balance. */
            }

            .filter-form-container {
                padding-left: 1rem; /* Add some padding back for desktop view around the form */
                padding-right: 1rem; /* Add some padding back for desktop view around the form */
            }

            .filter-form .form-group {
                flex-grow: 1; /* Allow each input to grow to fill space */
                max-width: unset; /* Remove max-width on desktop to allow full expansion */
                min-width: 150px; /* Ensure a decent minimum width for each input */
            }

            .filter-form .form-group:first-child {
                min-width: 200px; /* Give search more minimum room on PC */
            }
            .filter-form button {
                max-width: unset; /* Remove max-width for button on PC to allow flex-grow */
                flex-grow: 1; /* Allow button to grow as well */
            }
        }