@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400;500;600;700&display=swap');
        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
            line-height: 1;
            display: inline-block;
        }
        body {
            font-family: 'Work Sans', sans-serif;
            background: linear-gradient(-45deg, #f8fafc, #e2e8f0, #f1f5f9, #e5e7eb);
            background-size: 400% 400%;
            animation: gradientShift 15s ease infinite;
            box-sizing: border-box;
        }

        
        @keyframes gradientShift {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }


        .skeleton {
            background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
            background-size: 200% 100%;
            animation: shimmer 1.5s infinite;
        }
        @keyframes shimmer {
            0% { background-position: -200% 0; }
            100% { background-position: 200% 0; }
        }

        .frosted-glass {
            backdrop-filter: blur(20px) saturate(180%);
            -webkit-backdrop-filter: blur(20px) saturate(180%);
            background: rgba(255, 255, 255, 0.75);
            border-bottom: 1px solid rgba(255, 255, 255, 0.3);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        }

        .glass-card {
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            background: rgba(255, 255, 255, 0.9);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .transition-all {
            transition: all 0.2s ease;
        }

        .btn-premium {
            position: relative;
            overflow: hidden;
            transform: translateY(0);
            transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .btn-premium:hover {
            transform: translateY(-1px);
            box-shadow: 0 10px 25px rgba(59, 130, 246, 0.25);
        }

        .btn-premium:active {
            transform: translateY(0);
            transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .btn-premium::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.5s;
        }

        .btn-premium:hover::before {
            left: 100%;
        }

        /* Highlight the currently viewed listing row */
        tr.is-active {
            background-color: rgba(239, 246, 255, 0.9); /* blue-50 */
            box-shadow: inset 4px 0 0 #1e40af; /* blue-800 left rail */
            position: relative;
        }
        tr.is-active .area-row .font-bold {
            text-decoration: underline;
            text-underline-offset: 2px;
        }

        .modal-enter {
            animation: modalEnter 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        @keyframes modalEnter {
            0% {
                opacity: 0;
                transform: scale(0.95) translateY(10px);
            }
            100% {
                opacity: 1;
                transform: scale(1) translateY(0);
            }
        }

        .ripple {
            position: absolute;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.6);
            transform: scale(0);
            animation: ripple 0.6s linear;
            pointer-events: none;
        }

        @keyframes ripple {
            to {
                transform: scale(4);
                opacity: 0;
            }
        }

        .contact-method {
            display: flex;
            align-items: center;
            width: 100%;
            gap: 10px;
            padding: 10px 12px;
            font-size: 14px;
            color: #111827; /* gray-900 */
            border: 1px solid #e5e7eb; /* gray-200 */
            background: #ffffff;
            border-radius: 8px;
            cursor: pointer;
            transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
        }

        .contact-method svg {
            width: 18px;
            height: 18px;
            color: #374151; /* gray-700 */
            flex-shrink: 0;
            display: block;
        }

        .contact-method:hover {
            background: #f9fafb; /* gray-50 */
            border-color: #e5e7eb;
        }

        .contact-method.active {
            background-color: #eff6ff; /* blue-50 */
            border-color: #bfdbfe; /* blue-200 */
            color: #1e3a8a; /* blue-900 */
            box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
        }

        .contact-method.active svg {
            color: #1d4ed8; /* blue-600 */
        }

        @media (max-width: 640px) {
            .contact-method {
                font-size: 13px !important;
                padding: 10px 12px;
                gap: 8px;
            }
            .contact-method .leading-none {
                font-size: 12px !important;
            }
            .contact-method svg {
                width: 16px !important;
                height: 16px !important;
            }
        }

        .contact-options {
            animation: slideDown 0.2s ease-out;
        }

        .contact-options.drop-up {
            animation: slideUp 0.2s ease-out;
        }

        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        @keyframes slideUp {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .dropdown-arrow {
            position: absolute;
            left: 12px;
            width: 0;
            height: 0;
            pointer-events: none;
        }

        .dropdown-arrow.down {
            top: -6px;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-bottom: 6px solid #e5e7eb;
        }
        .dropdown-arrow.down::after {
            content: '';
            position: absolute;
            left: -5px;
            top: 1px;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-bottom: 5px solid #ffffff;
        }

        .dropdown-arrow.up {
            bottom: -6px;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-top: 6px solid #e5e7eb;
        }
        .dropdown-arrow.up::after {
            content: '';
            position: absolute;
            left: -5px;
            top: -6px;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-top: 5px solid #ffffff;
        }

        /* Desktop-only nicer scrollbars */
        @media (hover: hover) and (pointer: fine) {
            .custom-scrollbar::-webkit-scrollbar {
                width: 8px;
                height: 8px;
            }

            .custom-scrollbar::-webkit-scrollbar-track {
                background: #f8fafc;
                border-radius: 6px;
            }

            .custom-scrollbar::-webkit-scrollbar-thumb {
                background: #cbd5e1;
                border-radius: 9999px;
                border: 2px solid #f8fafc; /* gives a pill look */
                transition: background 0.2s ease;
            }

            .custom-scrollbar::-webkit-scrollbar-thumb:hover {
                background: #94a3b8;
            }

            /* Firefox */
            .custom-scrollbar {
                scrollbar-width: thin; /* thin on desktop */
                scrollbar-color: #cbd5e1 #f8fafc;
            }
        }

        .custom-checkbox {
            position: relative;
            display: inline-flex;
            align-items: center;
            cursor: pointer;
            user-select: none;
        }

        .custom-checkbox input[type="checkbox"] {
            position: absolute;
            opacity: 0;
            width: 0;
            height: 0;
        }

        .custom-checkbox .checkmark {
            position: relative;
            width: 18px;
            height: 18px;
            background: #ffffff;
            border: 2px solid #d1d5db;
            border-radius: 4px;
            margin-right: 10px;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .custom-checkbox:hover .checkmark {
            border-color: #3b82f6;
            background: #f8faff;
        }

            #imagesUploadLabel.drag-over {
                border-color: #60a5fa;
                background-color: #eff6ff;
            }

        .image-chip { position: relative; }
        .image-chip button { opacity: 1; }

    .filter-slide-down { animation: filterSlideDown 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards; }

    .filter-slide-up { animation: filterSlideUp 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards; }

        @keyframes filterSlideDown {
            from { opacity: 0; max-height: 0; }
            to { opacity: 1; max-height: 800px; }
        }

        @keyframes filterSlideUp {
            from { opacity: 1; max-height: 800px; }
            to { opacity: 0; max-height: 0; }
        }

        .custom-checkbox input[type="checkbox"]:checked + .checkmark {
            background: #3b82f6;
            border-color: #3b82f6;
            transform: scale(1.05);
        }

        .custom-checkbox input[type="checkbox"]:checked + .checkmark::after {
            content: '';
            position: absolute;
            width: 5px;
            height: 9px;
            border: solid white;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
            top: 1px;
            left: 5px;
        }

        .custom-checkbox input[type="checkbox"]:focus + .checkmark {
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }

        .custom-checkbox .label-text {
            color: #374151;
            font-size: 12px;
            font-weight: 500;
            transition: color 0.2s ease;
        }

        .custom-checkbox:hover .label-text {
            color: #1f2937;
        }

        .custom-checkbox.disabled {
            cursor: not-allowed;
            opacity: 0.5;
        }

        .custom-checkbox.disabled .checkmark {
            background: #f3f4f6;
            border-color: #d1d5db;
        }

        .custom-checkbox.disabled:hover .checkmark {
            background: #f3f4f6;
            border-color: #d1d5db;
        }

        .custom-checkbox.disabled .label-text {
            color: #9ca3af;
        }

        .custom-checkbox.disabled:hover .label-text {
            color: #9ca3af;
        }

        .custom-checkbox.disabled input[type="checkbox"] {
            pointer-events: none;
        }

        #sortDropdown button {
            font-size: 12px;
            padding: 0.25rem 0.5rem;
        }

        #formAreaDropdown button,

/* Tooltip / Popover System */
:root {
    --lb-tooltip-bg: #1e40af; /* Tailwind blue-800 (matches Add Apartment button) */
    --lb-tooltip-bg-hover: #1d4ed8; /* blue-700 for subtle hover */
    --lb-tooltip-color: #ffffff;
    --lb-tooltip-icon-color: #1e40af; /* blue-800 - change this to update all tooltip icons */
}
/*
Unified Tooltip System
----------------------
Usage:
    1. Add data-tooltip="Your text" to any element (preferably a button).
    2. Give the trigger the class .lb-info-btn for consistent sizing & focus styles.
Behavior:
    - Hover (desktop) shows tooltip after a short delay; moving out hides it.
    - Click locks tooltip open; click again or outside/Escape closes.
Accessibility:
    - Triggers get aria-expanded dynamically.
    - Tooltip uses role="dialog" (non-modal) for screen reader discoverability.
Variables:
    --lb-tooltip-bg / --lb-tooltip-bg-hover control background colors.
*/
/* Popover for mobile-friendly tooltips (viewport-aware) */
.lb-popover {
    position: fixed;
    z-index: 10000;
    max-width: 280px;
    background: var(--lb-tooltip-bg);
    color: var(--lb-tooltip-color);
    font-size: 12px;
    line-height: 1.45;
    padding: 8px 10px;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
    transition: background-color .15s ease;
}
.lb-popover[data-hidden="true"] { display: none; }
.lb-popover__arrow {
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--lb-tooltip-bg);
    transform: rotate(45deg);
}
.lb-popover:not([data-hidden="true"]):hover {
    background: var(--lb-tooltip-bg-hover);
}
/* Unified info trigger icon */
.lb-info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    font-size: 0; /* hide accidental text */
    background: transparent;
    color: inherit; /* inherit color from parent context */
    opacity: 0.6; /* slightly muted */
    cursor: pointer;
    transition: opacity .15s ease, background-color .15s ease;
}
.lb-info-btn svg { width: 14px; height: 14px; display: block; }
.lb-info-btn:hover { opacity: 1; background: rgba(0,0,0,0.04); }
.lb-info-btn:focus { outline: none; box-shadow: 0 0 0 2px rgba(59,130,246,0.3); opacity: 1; }
.lb-info-btn:active { background: rgba(0,0,0,0.08); }

        #formTypeDropdown button,
        #formBedroomDropdown button,
        #formBathroomDropdown button,
        #formDrivewayDropdown button {
            font-size: 12px;
            padding: 0.25rem 0.5rem;
        }

        .lb-switch {
            position: relative;
            display: inline-block;
            width: 44px;
            height: 24px;
            vertical-align: middle;
        }
        .lb-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        .lb-switch .slider {
            position: absolute;
            cursor: pointer;
            top: 0; left: 0; right: 0; bottom: 0;
            background: #e5e7eb;
            border-radius: 9999px;
            transition: background-color 0.2s ease;
        }
        .lb-switch .slider::before {
            content: "";
            position: absolute;
            height: 18px; width: 18px;
            left: 3px; top: 3px;
            background: #ffffff;
            border-radius: 9999px;
            box-shadow: 0 1px 2px rgba(0,0,0,0.15);
            transition: transform 0.2s ease;
        }
        .lb-switch input:checked + .slider {
            background: #3b82f6;
        }
        .lb-switch input:checked + .slider::before {
            transform: translateX(20px);
        }
        .lb-switch input:focus + .slider {
            box-shadow: 0 0 0 3px rgba(59,130,246,0.25);
        }

        #listingsContainer thead th,
        #loadingState thead th {
            position: sticky;
            top: 0;
            z-index: 15; /* above row buttons (z-10), below dropdowns (z-20) */
        }

        #listingsContainer thead th {
            background-color: #eff6ff;
        }

        #loadingState thead th {
            background-color: #f9fafb;
        }

        #listingsContainer thead th,
        #loadingState thead th {
            box-shadow: 0 1px 0 rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.04);
        }

        /* Ensure first column header matches body cell right padding (pr-0) for alignment */
        #listingsContainer thead th:first-child,
        #loadingState thead th:first-child {
            padding-right: 0 !important;
        }

        @media (max-width: 640px) {

            #listingsContainer table, #loadingState table {
                font-size: 11px;
            }

            /* Mobile: show only Listed/Apt/Temp (col 1), Area (2), Rent (4), Room/Bath (3), Available (7)
               Hide: Included (5), Amenities (6), Images (8), Contact (9) */
            #listingsContainer thead th:nth-child(5),
            #listingsContainer thead th:nth-child(6),
            #listingsContainer thead th:nth-child(8),
            #listingsContainer thead th:nth-child(9),
            #listingsContainer tbody td:nth-child(5),
            #listingsContainer tbody td:nth-child(6),
            #listingsContainer tbody td:nth-child(8),
            #listingsContainer tbody td:nth-child(9),
            #loadingState thead th:nth-child(5),
            #loadingState thead th:nth-child(6),
            #loadingState thead th:nth-child(8),
            #loadingState thead th:nth-child(9),
            #loadingState tbody td:nth-child(5),
            #loadingState tbody td:nth-child(6),
            #loadingState tbody td:nth-child(8),
            #loadingState tbody td:nth-child(9) {
                display: none !important;
            }

            /* Mobile header revamp: make thead subtle, compact, and less prominent */
            #listingsContainer thead,
            #loadingState thead {
                background-color: transparent !important;
            }

            #listingsContainer thead th,
            #loadingState thead th {
                font-size: 10px;
                letter-spacing: 0.005em !important; /* reduce tracking */
                line-height: 1.15;
                padding-top: 8px !important;
                padding-bottom: 8px !important;
                background-color: #ffffff !important; /* remove blue/gray wash */
                color: #64748b !important; /* slate-500 */
                font-weight: 500 !important; /* medium instead of semibold */
                text-transform: none !important; /* remove uppercase */
                box-shadow: none !important; /* drop heavy shadow */
                border-bottom: 1px solid #e5e7eb !important; /* subtle divider */
            }

            #listingsContainer tbody td, #loadingState tbody td {
                padding-top: 5px;
                padding-bottom: 5px;
            }

            #listingsContainer tbody td:nth-child(2) > div {
                gap: 1px;
            }

            

            #listingsContainer td .flex.items-center.gap-2 {
                gap: 5px;
            }

            #listingsContainer tbody td:nth-child(5) span,
            #listingsContainer tbody td:nth-child(6) span {
                font-size: inherit !important;
                padding: 0 !important;
            }
            #listingsContainer tbody td:nth-child(5) .flex.flex-wrap,
            #listingsContainer tbody td:nth-child(6) .flex.flex-wrap {
                gap: 3px !important;
            }

            /* Mobile bottom sheet / listing details pill wrapping improvements */
            @media (max-width: 640px) {
                /* Ensure chip rows (Included / Amenities) stack label above pills for better wrapping */
                .kv-row.kv-row-chips { display: block; }
                .kv-row.kv-row-chips .kv-label { width: auto; display: block; }
                .kv-row.kv-row-chips .kv-value > div.flex.flex-wrap { margin-top: 2px; }
                /* Slightly increase vertical spacing between pills when wrapping multiple lines */
                .kv-row .flex.flex-wrap { row-gap: 4px; }
                /* Prevent cramped look if too many chips; allow natural line height */
                .kv-row .flex.flex-wrap span { line-height: 1.2; }
            }

            #listingsContainer td .text-sm, #listingsContainer th .text-xs {
                font-size: 10px !important;
            }

            #listingsContainer td button span.text-xs {
                font-size: 9px !important;
                line-height: 1.1 !important;
            }
            #listingsContainer td button {
                padding: 2px 5px !important;
            }

            #listingsContainer td .images-link {
                background: transparent !important;
                border: none !important;
                padding: 0 !important;
            }
            #listingsContainer td .images-link[disabled] {
                opacity: 0.5 !important;
                cursor: not-allowed !important;
                pointer-events: none !important;
            }

            .images-link { color: inherit; }

            @media (max-width: 640px) {
                #listingsContainer td .images-link svg {
                    width: 8px !important;
                    height: 8px !important;
                }
                #listingsContainer td .images-link .material-symbols-outlined {
                    font-size: 8px !important;
                    line-height: 1 !important;
                }
            }

            #listingsContainer td .text-xs {
                font-size: 9px !important;
                line-height: 1.1 !important;
            }

            @media (max-width: 640px) {
                #listingsContainer tbody td:nth-child(1) > div {
                    font-size: 8px !important;
                    line-height: 1.1 !important;
                }
            }

            #listingsContainer .desc-text {
                font-size: 7px !important;
                line-height: 1.0 !important;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            #listingsContainer .desc-row {
                gap: 2px !important;
            }

            #listingsContainer .area-row {
                gap: 2px !important;
                margin-bottom: 1px !important;
                line-height: 1.1 !important;
            }

            #listingsContainer .area-row { font-size: 10px !important; }
            #listingsContainer .area-row + .desc-row {
                margin-top: 0 !important;
            }

            #listingsContainer .area-row .text-sm {
                font-size: 10px !important;
                line-height: 1.1 !important;
            }

            #listingsContainer tbody td:nth-child(2) {
                padding-top: 4px !important;
                padding-bottom: 4px !important;
            }

            #listingsContainer .desc-row > svg {
                width: 10px !important;
                height: 10px !important;
            }

            #listingsContainer > .overflow-x-auto,
            #loadingState > .overflow-x-auto {
                max-height: 63vh;
                overflow-y: auto;

                overscroll-behavior: auto;
            }

            /* Tighter horizontal gutters per column on mobile (thead + tbody, both states) */
            /* Column 1: minimize width on mobile, left 8px, right 0 to match content block edge */
            #listingsContainer thead th:nth-child(1),
            #listingsContainer tbody td:nth-child(1),
            #loadingState thead th:nth-child(1),
            #loadingState tbody td:nth-child(1) {
                width: 28px !important;
                max-width: 28px !important;
                padding-left: 8px !important;
                padding-right: 0 !important;
            }

            /* Column 2: tighten further to reduce gap from eye icon (pl-0.5 ~ 2px) */
            #listingsContainer thead th:nth-child(2),
            #listingsContainer tbody td:nth-child(2),
            #loadingState thead th:nth-child(2),
            #loadingState tbody td:nth-child(2) {
                padding-left: 2px !important;
                padding-right: 12px !important;
            }

            /* Columns 3-4: was pl-3 pr-6 -> tighten to pl-2 (8px) pr-3 (12px) */
            #listingsContainer thead th:nth-child(3),
            #listingsContainer tbody td:nth-child(3),
            #loadingState thead th:nth-child(3),
            #loadingState tbody td:nth-child(3),
            #listingsContainer thead th:nth-child(4),
            #listingsContainer tbody td:nth-child(4),
            #loadingState thead th:nth-child(4),
            #loadingState tbody td:nth-child(4) {
                padding-left: 8px !important;
                padding-right: 12px !important;
            }

            /* Columns 5-6: was pl-2 pr-3 -> tighten slightly to pl-2 (8px) pr-2 (8px) */
            #listingsContainer thead th:nth-child(5),
            #listingsContainer tbody td:nth-child(5),
            #loadingState thead th:nth-child(5),
            #loadingState tbody td:nth-child(5),
            #listingsContainer thead th:nth-child(6),
            #listingsContainer tbody td:nth-child(6),
            #loadingState thead th:nth-child(6),
            #loadingState tbody td:nth-child(6) {
                padding-left: 8px !important;
                padding-right: 8px !important;
            }

            /* Columns 7-8: was pl-3 pr-6 -> tighten to pl-2 (8px) pr-3 (12px) */
            #listingsContainer thead th:nth-child(7),
            #listingsContainer tbody td:nth-child(7),
            #loadingState thead th:nth-child(7),
            #loadingState tbody td:nth-child(7),
            #listingsContainer thead th:nth-child(8),
            #listingsContainer tbody td:nth-child(8),
            #loadingState thead th:nth-child(8),
            #loadingState tbody td:nth-child(8) {
                padding-left: 8px !important;
                padding-right: 12px !important;
            }

            /* Column 9: was pl-3 pr-4 -> tighten to pl-2 (8px) pr-2 (8px) */
            #listingsContainer thead th:nth-child(9),
            #listingsContainer tbody td:nth-child(9),
            #loadingState thead th:nth-child(9),
            #loadingState tbody td:nth-child(9) {
                padding-left: 8px !important;
                padding-right: 8px !important;
            }

            /* Removed former column 10 (mobile-only metadata) – metadata now sits under Area cell on mobile */

            /* Mobile-only BR/BTH compact dot alignment */
            .brbth-compact { line-height: 1; }
            .brbth-compact .brbth-dot { position: relative; top: 1px; }
        }

        @media (min-width: 641px) {

            #listingsContainer td .images-link svg {
                display: block;
                width: 12px;
                height: 12px;
            }
            #listingsContainer td .images-link .material-symbols-outlined {
                font-size: 16px;
                line-height: 1;
            }

            /* Desktop header lite revamp: calmer typography, tighter rhythm, lighter divider */
            #listingsContainer thead th,
            #loadingState thead th {
                font-size: 11px !important;
                padding-top: 0.875rem !important; /* was 1.125rem */
                padding-bottom: 0.875rem !important;
                text-transform: none !important; /* override uppercase */
                letter-spacing: 0.01em !important; /* reduce wide tracking */
                font-weight: 500 !important; /* medium instead of semibold */
                color: #475569 !important; /* slate-600 */
                box-shadow: none !important; /* drop heavy sticky shadow */
            }

            /* Subtle per-cell bottom divider so sticky headers don't feel heavy */
            #listingsContainer thead th { border-bottom: 1px solid #dbeafe !important; } /* blue-100 */
            #loadingState thead th { border-bottom: 1px solid #e5e7eb !important; } /* gray-200 */

            #listingsContainer tbody td .text-sm,
            #loadingState tbody td .text-sm {
                font-size: 13px !important;
            }

            #listingsContainer tbody td .text-xs,
            #listingsContainer td button span.text-xs {
                font-size: 11px !important;
            }

            

            #listingsContainer .area-row { font-size: 11px !important; }

            #listingsContainer > .overflow-x-auto,
            #loadingState > .overflow-x-auto {
                max-height: 70vh;
                overflow-y: auto;

                overscroll-behavior: auto;
            }

            #listingsContainer tbody td,
            #loadingState tbody td {
                padding-top: 1rem !important;
                padding-bottom: 1rem !important;
            }

            #listingsContainer tbody td:nth-child(5) span,
            #listingsContainer tbody td:nth-child(6) span {
                font-size: inherit !important;
                padding: 0 !important;
                line-height: inherit !important;
            }
        }

    #addListingModal > div {

            align-items: center !important;
            justify-content: center !important;

            min-height: 100vh;
            padding-left: 16px;
            padding-right: 16px;

            padding-top: calc(env(safe-area-inset-top, 0px) + 16px);
            padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
        }

        @supports (height: 100dvh) {
            #addListingModal > div {
                min-height: 100dvh;
            }
        }

        #modalContent {
            max-height: calc(100vh - 64px);
            overflow: hidden;

            overscroll-behavior: contain;
        }

        

        .modal-scroll {
            max-height: calc(100vh - 64px);
            overflow-y: auto;
            overscroll-behavior: contain;
        }
        @supports (height: 100dvh) {
            .modal-scroll {
                max-height: calc(100dvh - 64px);
            }
        }

        @supports (height: 100dvh) {
            #modalContent {
                max-height: calc(100dvh - 64px);
            }
        }

        @media (max-width: 380px) {
            #addListingModal > div { padding-left: 10px; padding-right: 10px; }
        }

        

        details.group .faq-collapse {
            height: 0;
            overflow: hidden;
            opacity: 0;
            transition-property: height, opacity;
            transition-duration: 350ms, 300ms;
            transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1), ease;
            will-change: height, opacity;
        }
        .faq-content { overflow: hidden; }

        #faq .faq-chevron {
            flex-shrink: 0;
            aspect-ratio: 1 / 1;
        }


        /* Fixed row height for tables */
        :root { --row-height: 64px; }

        /* Apply fixed height to both loading and listings tables */
        #listingsContainer tbody tr,
        #loadingState tbody tr {
            height: var(--row-height);
        }

        /* Normalize vertical padding and alignment so rows stay fixed */
        #listingsContainer tbody td,
        #loadingState tbody td {
            vertical-align: middle;
            padding-top: 0.5rem !important;  /* ~8px */
            padding-bottom: 0.5rem !important;
        }

        /* Slightly shorter rows on small screens */
        @media (max-width: 640px) {
            :root { --row-height: 56px; }
            #listingsContainer tbody td,
            #loadingState tbody td {
                padding-top: 0.375rem !important; /* ~6px */
                padding-bottom: 0.375rem !important;
            }
        }

        /* Smooth backdrop fade for listing/details overlays */
        #listingModal {
            transition: background-color 200ms ease;
        }
        

        /* Desktop slide-over (drawer) for listing details */
        @media (min-width: 768px) {
            #listingModalContent.drawer-panel {
                position: fixed;
                top: 0;
                right: 0;
                bottom: 0;
                width: min(640px, 92vw);
                max-width: 640px;
                border-left: 1px solid #e5e7eb; /* gray-200 */
                border-radius: 0; /* no rounded corners for drawer */
                transform: translateX(100%);
                transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
                box-shadow: -8px 0 24px rgba(0,0,0,0.08), -2px 0 8px rgba(0,0,0,0.06);
                display: flex;
                flex-direction: column;
                height: 100vh;
                --dls-footer-height: 72px; /* reserve space for fixed footer */
            }
            #listingModalContent.drawer-panel .modal-scroll {
                flex: 1 1 auto;
                /* Make the content body the scroller, not this wrapper */
                overflow: hidden;
                max-height: none !important;
                display: flex;
                flex-direction: column;
                min-height: 0; /* allow inner flex child to shrink/scroll */
            }
            #listingModalContent.drawer-panel #listingDetailsBody {
                flex: 1 1 auto;
                min-height: 0;
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
                padding-bottom: 2rem; /* breathing room above footer */
            }
            /* Footer sits below scroller; do not overlay content */
            #listingModalContent.drawer-panel #dlsFooter {
                position: static; /* within flex flow under scroller */
                left: auto;
                right: auto;
                bottom: auto;
                z-index: auto;
                background: #ffffff;
                flex: 0 0 auto;
                /* subtle top shadow to separate from content */
                box-shadow: 0 -1px 0 0 rgba(0,0,0,0.04), 0 -4px 8px -4px rgba(0,0,0,0.08);
            }
        }

        /* Lightbox UI polish: round arrows and a top-centered counter */
        .glightbox-clean .gprev, .glightbox-clean .gnext,
        .glightbox .gprev, .glightbox .gnext {
            width: 44px;
            height: 44px;
            border-radius: 9999px;
            background: rgba(17,24,39,0.6); /* gray-900/60 */
            border: 1px solid rgba(255,255,255,0.08);
            box-shadow: 0 4px 12px rgba(0,0,0,0.25);
            transition: background-color 150ms ease;
        }
        .glightbox-clean .gprev:hover, .glightbox-clean .gnext:hover,
        .glightbox .gprev:hover, .glightbox .gnext:hover {
            background: rgba(17,24,39,0.8);
        }
        .glightbox-clean .gprev svg, .glightbox-clean .gnext svg,
        .glightbox .gprev svg, .glightbox .gnext svg {
            width: 18px;
            height: 18px;
        }

        /* Counter pill shown inside the lightbox container */
        .lb-gallery-counter {
            position: absolute;
            top: calc(env(safe-area-inset-top, 0px) + 12px);
            left: calc(env(safe-area-inset-left, 0px) + 12px);
            z-index: 1000;
            background: rgba(17,24,39,0.6);
            color: #fff;
            font-size: 12px;
            line-height: 1;
            padding: 6px 10px;
            border-radius: 9999px;
            border: 1px solid rgba(255,255,255,0.08);
            box-shadow: 0 4px 12px rgba(0,0,0,0.25);
            pointer-events: none;
            font-weight: 600;
            letter-spacing: 0.02em;
        }
        @media (max-width: 640px) {
            .lb-gallery-counter {
                top: calc(env(safe-area-inset-top, 0px) + 10px);
                left: calc(env(safe-area-inset-left, 0px) + 10px);
                font-size: 11px;
                padding: 5px 8px;
            }
        }
        
        /* Mobile sheet: make filter dropdown menus inline (not absolute popovers) and ensure comfortable min height */
        @media (max-width: 767px) {
            /* When filters are inside the bottom sheet, render dropdown panels inline */
            #mobileBottomSheet #filterContent .relative > [id$="Dropdown"] {
                position: static !important;
                inset: auto !important;
                margin-top: 0.25rem !important; /* ~4px */
                width: 100% !important;
                max-width: none !important;
                background: #ffffff !important;
                box-shadow: none !important;
                border: 1px solid #e5e7eb !important; /* gray-200 */
                border-radius: 0.5rem !important; /* rounded-md */
                z-index: auto !important;
            }
            /* Slightly larger touch targets for the dropdown toggles */
            #mobileBottomSheet #filterContent button[id$="DropdownBtn"] {
                padding-top: 0.625rem !important; /* 10px */
                padding-bottom: 0.625rem !important;
            }
            /* Ensure the sheet doesn't feel tiny when filters are short */
            #mbsCard.filters-mode {
                min-height: 55vh;
            }
        }