.rent-container {
            width: 1200px;
            max-width: calc(100% - 40px);
            margin-left: auto;
            margin-right: auto;
        }


        /* =========================================================
                   SEARCH AREA
                ========================================================= */

        .search-area {
            padding: 22px 0 14px;
        }


        /* =========================================================
                   SEARCH PANEL
                ========================================================= */

        .search-panel {
            /* position: relative; */

            background: var(--white);

            border: 1px solid var(--border);

            border-radius: 10px;

            box-shadow: var(--shadow);

            padding: 15px 20px 18px;

            display: grid;

            grid-template-columns:
                1.7fr 1.15fr 0.72fr 1.1fr 0.85fr 0.75fr;

            gap: 13px;

            align-items: end;

            z-index: 100;
        }


        /* =========================================================
                   SEARCH FIELD
                ========================================================= */

        .field {
            position: relative;

            min-width: 0;
        }

        .field label {
            display: block;

            margin-bottom: 7px;

            color: #30384e;

            font-size: 12px;

            font-weight: 700;
        }


        /* =========================================================
                   CONTROL
                ========================================================= */

        .control {
            width: 100%;

            height: 44px;

            border: 1px solid #d5dbe7;

            border-radius: 6px;

            background: #fff;

            display: flex;

            align-items: center;

            padding: 0 13px;

            gap: 9px;

            color: #4e5872;

            white-space: nowrap;

            transition:
                border-color 0.2s ease,
                box-shadow 0.2s ease,
                background 0.2s ease;
        }

        .control:hover {
            border-color: #aeb8cd;
        }

        .control:focus-within {
            border-color: var(--blue);

            box-shadow:
                0 0 0 3px rgba(23, 36, 201, 0.07);
        }

        .control>i {
            flex-shrink: 0;

            color: var(--blue);

            font-size: 14px;
        }

        .control strong {
            color: var(--text);

            font-weight: 600;

            overflow: hidden;

            text-overflow: ellipsis;
        }

        .control .arrow {
            margin-left: auto;

            color: #111a3e;

            font-size: 11px;

            transition:
                transform 0.25s ease;
        }


        /* =========================================================
                   LOCATION CONTROL
                ========================================================= */

        .location-control {
            position: relative;
        }

        .location-control input {
            width: 100%;

            min-width: 0;

            height: 100%;

            padding: 0;

            border: 0;

            outline: none;

            background: transparent;

            color: #252d43;

            font-size: 13px;
        }

        .location-control input::placeholder {
            color: #7a8499;
        }


        /* =========================================================
                   LOCATION CLEAR BUTTON
                ========================================================= */

        .control-icon-btn {
            width: 25px;
            height: 25px;

            flex-shrink: 0;

            display: flex;

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

            border: 0;

            border-radius: 50%;

            background: transparent;

            color: #8b94a8;

            transition:
                background 0.2s ease,
                color 0.2s ease;
        }

        .control-icon-btn:hover {
            background: #f0f3f9;

            color: var(--blue);
        }


        /* =========================================================
                   LOCATION SUGGESTIONS
                ========================================================= */

        .location-suggestions {
            position: absolute;

            top: calc(100% + 7px);

            left: 0;

            width: 100%;

            padding: 6px;

            background: #fff;

            border: 1px solid var(--border);

            border-radius: 8px;

            box-shadow:
                0 14px 32px rgba(17, 27, 69, 0.13);

            z-index: 1000;

            opacity: 0;

            visibility: hidden;

            pointer-events: none;

            transform: translateY(-7px);

            transition:
                opacity 0.2s ease,
                visibility 0.2s ease,
                transform 0.2s ease;
        }

        .location-suggestions.show {
            opacity: 1;

            visibility: visible;

            pointer-events: auto;

            transform: translateY(0);
        }

        .location-suggestions button {
            width: 100%;

            min-height: 38px;

            display: flex;

            align-items: center;

            gap: 10px;

            padding: 8px 10px;

            border: 0;

            border-radius: 5px;

            background: transparent;

            color: #3e475d;

            text-align: left;

            font-size: 12px;

            font-weight: 500;

            transition:
                background 0.2s ease,
                color 0.2s ease;
        }

        .location-suggestions button i {
            width: 18px;

            color: var(--blue);

            text-align: center;
        }

        .location-suggestions button:hover {
            background: #f0f3ff;

            color: var(--blue);
        }


        /* =========================================================
                   CUSTOM SELECT
                ========================================================= */

        .custom-select {
            position: relative;

            width: 100%;
        }

        .select-trigger {
            width: 100%;

            cursor: pointer;

            text-align: left;

            appearance: none;

            -webkit-appearance: none;
        }

        .select-trigger .arrow {
            margin-left: auto;
        }

        .custom-select:focus-within .select-trigger .arrow {
            transform: rotate(180deg);
        }


        /* =========================================================
                   SELECT MENU
                ========================================================= */

        .select-menu {
            position: absolute;

            top: calc(100% + 7px);

            left: 0;

            width: 100%;

            min-width: 170px;

            padding: 6px;

            background: #fff;

            border: 1px solid var(--border);

            border-radius: 8px;

            box-shadow:
                0 14px 32px rgba(17, 27, 69, 0.14);

            z-index: 1000;

            opacity: 0;

            visibility: hidden;

            pointer-events: none;

            transform: translateY(-7px);

            transition:
                opacity 0.2s ease,
                visibility 0.2s ease,
                transform 0.2s ease;
        }

        .select-menu.show {
            opacity: 1;

            visibility: visible;

            pointer-events: auto;

            transform: translateY(0);
        }

        .select-menu button {
            width: 100%;

            min-height: 36px;

            padding: 8px 11px;

            border: 0;

            border-radius: 5px;

            background: transparent;

            color: #30384d;

            text-align: left;

            font-size: 12px;

            font-weight: 500;

            transition:
                background 0.2s ease,
                color 0.2s ease;
        }

        .select-menu button:hover {
            background: #f0f3ff;

            color: var(--blue);
        }


        /* =========================================================
                   SEARCH BUTTONS
                ========================================================= */

        .search-action,
        .filter-action {
            height: 44px;

            border-radius: 6px;

            padding: 0 15px;

            display: flex;

            align-items: center;

            justify-content: center;

            gap: 8px;

            font-size: 12px;

            font-weight: 700;

            transition:
                transform 0.2s ease,
                box-shadow 0.2s ease,
                background 0.2s ease,
                border-color 0.2s ease;
        }

        .search-action {
        background: linear-gradient(135deg, #0B0F5C 0%, #13207F 25%, #1E3AAB 50%, #2F54D5 75%, #4B6EFF 100%);

            color: #fff;

            border: 1px solid var(--blue);

            box-shadow:
                0 5px 14px rgba(23, 36, 201, 0.15);
        }

        .search-action:hover {
            background: var(--blue-dark);

            transform: translateY(-1px);

            box-shadow:
                0 8px 18px rgba(23, 36, 201, 0.2);
        }

        .filter-action {
            background: #fff;

            border: 1px solid #d4dbe8;

            color: var(--blue);
        }

        .filter-action:hover,
        .filter-action.active {
            border-color: var(--blue);

            background: #f4f6ff;

            color: var(--blue);
        }

        .search-action i,
        .filter-action i {
            font-size: 13px;
        }


        /* =========================================================
                   MAIN CONTENT
                ========================================================= */

        .content {
            display: grid;

            grid-template-columns: 315px minmax(0, 1fr);

            gap: 16px;

            padding-bottom: 35px;

            align-items: start;
        }


        /* =========================================================
                   SIDEBAR / RESULTS BASE
                ========================================================= */

        .sidebar {
            background: #fff;

            border: 1px solid var(--border);

            border-radius: var(--radius);

            box-shadow: var(--shadow);

            overflow: hidden;

            position: sticky;

            top: 20px;

            margin-top: 15px;
        }


        /* =========================================================
                   SIDEBAR HEADER
                ========================================================= */

        .filter-head {
            min-height: 61px;

            padding: 0 19px;

            display: flex;

            align-items: center;

            justify-content: space-between;

            border-bottom: 1px solid #e7eaf0;

            color: #161d35;

            font-size: 16px;

            font-weight: 800;
        }

        .reset {
            display: inline-flex;

            align-items: center;

            gap: 6px;

            border: 0;

            background: transparent;

            color: #0560cf;

            font-size: 12px;

            font-weight: 700;

            transition: color 0.2s ease;
        }

        .reset:hover {
            color: var(--blue);
        }


        /* =========================================================
                   FILTER SECTION
                ========================================================= */

        .filter-section {
            padding: 17px 19px;

            border-bottom: 1px solid #e8ebf1;
        }

        .filter-section:last-child {
            border-bottom: 0;
        }


        /* =========================================================
                   FILTER TITLE
                ========================================================= */

        .filter-title {
            width: 100%;

            display: flex;

            justify-content: space-between;

            align-items: center;

            margin: 0 0 15px;

            padding: 0;

            border: 0;

            background: transparent;

            color: #20283e;

            font-weight: 700;

            font-size: 13px;

            text-align: left;
        }

        .filter-title i {
            color: #667087;

            font-size: 10px;

            transition:
                transform 0.25s ease;
        }

        .filter-section.collapsed .filter-title {
            margin-bottom: 0;
        }

        .filter-section.collapsed .filter-title i {
            transform: rotate(180deg);
        }

        .filter-section.collapsed .tree,
        .filter-section.collapsed .more,
        .filter-section.collapsed .range,
        .filter-section.collapsed .range-values,
        .filter-section.collapsed .filter-checkbox-row,
        .filter-section.collapsed .property-type-filters {
            display: none;
        }


        /* =========================================================
                   TREE
                ========================================================= */

        .tree {
            font-size: 12px;
        }

        .tree-row {
            width: 100%;

            min-height: 38px;

            display: flex;

            align-items: center;

            gap: 9px;

            padding: 0 11px;

            border: 0;

            background: transparent;

            color: #26304e;

            font-size: 12px;

            text-align: left;

            transition:
                background 0.2s ease,
                color 0.2s ease;
        }

        .tree-row:hover {
            background: #f4f6fb;

            color: var(--blue);
        }

        .tree-row>i {
            font-size: 9px;

            flex-shrink: 0;
        }

        .tree-row.active-parent {
            background: #edf4ff;

            color: #07178d;

            font-weight: 700;

            border-radius: 6px;
        }

        .tree-row.checked {
            background: #eef5ff;

            color: #081890;

            font-weight: 700;
        }

        .tree-row.child {
            padding-left: 32px;
        }

        .tree-line {
            height: 1px;

            background: #e5e9f0;

            margin-left: 30px;
        }


        /* =========================================================
                   CHECKBOX
                ========================================================= */

        .checkbox {
            width: 19px;

            height: 19px;

            flex-shrink: 0;

            border: 1px solid #cad1df;

            border-radius: 4px;

            display: inline-flex;

            align-items: center;

            justify-content: center;

            margin-left: auto;

            background: #fff;

            color: #fff;

            font-size: 10px;

            transition:
                background 0.2s ease,
                border-color 0.2s ease,
                transform 0.2s ease;
        }

        .checkbox.checked {
        background: linear-gradient(135deg, #0B0F5C 0%, #13207F 25%, #1E3AAB 50%, #2F54D5 75%, #4B6EFF 100%);

            border-color: var(--blue);

            color: #fff;

            transform: scale(1.02);
        }

        .checkbox.checked i {
            font-size: 10px;
        }


        /* =========================================================
                   FILTER CHECKBOX ROW
                ========================================================= */

        .filter-checkbox-row {
            margin-bottom: 3px;

            border-radius: 5px;
        }

        .filter-checkbox-row:hover {
            background: #f5f7fc;
        }

        .filter-checkbox-row .checkbox {
            margin-left: 0;
        }

        .filter-checkbox-row .count {
            margin-left: auto;

            color: #8a93a7;

            font-size: 11px;
        }


        /* =========================================================
                   MORE
                ========================================================= */

        .more {
            display: inline-flex;

            align-items: center;

            gap: 6px;

            margin: 14px 6px 2px;

            padding: 0;

            border: 0;

            background: transparent;

            color: #0060d0;

            font-weight: 700;

            font-size: 12px;
        }

        .more:hover {
            color: var(--blue-dark);
        }


        /* =========================================================
                   RENT RANGE
                ========================================================= */

        .range {
            position: relative;

            height: 5px;

            margin: 27px 7px 25px;

            border-radius: 5px;

            background: #dce2ee;
        }

        .range-progress {
            position: absolute;

            top: 0;
            left: 0;

            width: 100%;
            height: 100%;

            border-radius: inherit;

        background: linear-gradient(135deg, #0B0F5C 0%, #13207F 25%, #1E3AAB 50%, #2F54D5 75%, #4B6EFF 100%);
        }

        .range:before,
        .range:after {
            content: "";

            position: absolute;

            top: 50%;

            width: 16px;
            height: 16px;

            border-radius: 50%;

        background: linear-gradient(135deg, #0B0F5C 0%, #13207F 25%, #1E3AAB 50%, #2F54D5 75%, #4B6EFF 100%);

            border: 3px solid #fff;

            box-shadow:
                0 0 0 1px rgba(23, 36, 201, 0.15);

            transform: translateY(-50%);

            z-index: 2;
        }

        .range:before {
            left: -5px;
        }

        .range:after {
            right: -5px;
        }


        /* Hide custom thumbs visually but preserve compatibility */

        .range-thumb {
            position: absolute;

            top: 50%;

            width: 16px;
            height: 16px;

            padding: 0;

            border: 3px solid #fff;

            border-radius: 50%;

        background: linear-gradient(135deg, #0B0F5C 0%, #13207F 25%, #1E3AAB 50%, #2F54D5 75%, #4B6EFF 100%);

            box-shadow:
                0 0 0 1px rgba(23, 36, 201, 0.15);

            transform: translateY(-50%);

            z-index: 3;
        }

        .range-thumb.left {
            left: -5px;
        }

        .range-thumb.right {
            right: -5px;
        }


        /* =========================================================
                   RANGE VALUES
                ========================================================= */

        .range-values {
            display: flex;

            align-items: center;

            justify-content: space-between;

            gap: 10px;
        }

        .range-box {
            min-width: 0;

            height: 38px;

            display: flex;

            align-items: center;

            padding: 0 11px;

            flex: 1;

            border: 1px solid #d6dce8;

            border-radius: 6px;

            background: #fff;

            color: #343c51;

            font-size: 11px;

            font-weight: 500;
        }

        .range-to {
            color: #646d83;

            font-size: 11px;
        }


        /* =========================================================
                   PROPERTY TYPE FILTERS
                ========================================================= */

        .property-type-filters {
            display: flex;

            flex-direction: column;

            gap: 3px;
        }

        .property-type-filters button {
            min-height: 37px;

            display: flex;

            align-items: center;

            gap: 10px;

            width: 100%;

            padding: 0 5px;

            border: 0;

            border-radius: 5px;

            background: transparent;

            color: #3d465c;

            font-size: 12px;

            text-align: left;
        }

        .property-type-filters button:hover {
            background: #f5f7fc;

            color: var(--blue);
        }

        .property-type-filters .checkbox {
            margin-left: 0;
        }


        /* =========================================================
                   RESULTS
                ========================================================= */

        .results {
            min-width: 0;

            background: transparent;
        }


        /* =========================================================
                   RESULT TOOLBAR
                ========================================================= */

        .result-toolbar {
            min-height: 61px;

            background: #fff;

            border: 1px solid var(--border);

            border-radius: 9px;

            display: flex;

            align-items: center;

            justify-content: space-between;

            padding: 0 18px;

            margin-bottom: 11px;

            box-shadow: var(--shadow);
        }

        .showing {
            color: #555f78;

            font-size: 14px;
        }

        .showing strong {
            margin: 0 4px;

            color: var(--blue);

            font-size: 18px;

            font-weight: 800;
        }


        /* =========================================================
                   SORT
                ========================================================= */

        .sort {
            display: flex;

            align-items: center;

            gap: 9px;

            color: #4d5670;

            font-size: 12px;
        }

        .sort-select {
            width: 172px;

            height: 38px;

            padding: 0 12px;

            border: 1px solid #d5dbe6;

            border-radius: 6px;

            outline: none;

            background: #fff;

            color: #30384c;

            font-size: 12px;

            cursor: pointer;
        }

        .sort-select:focus {
            border-color: var(--blue);

            box-shadow:
                0 0 0 3px rgba(23, 36, 201, 0.06);
        }


        /* =========================================================
                   VIEW TOGGLE
                ========================================================= */

        .view-toggle {
            height: 38px;

            display: flex;

            border: 1px solid #ccd4e3;

            border-radius: 6px;

            overflow: hidden;
        }

        .view-toggle button {
            width: 48px;

            height: 100%;

            padding: 0;

            border: 0;

            background: #fff;

            color: #5b657d;

            font-size: 15px;

            transition:
                background 0.2s ease,
                color 0.2s ease;
        }

        .view-toggle button+button {
            border-left: 1px solid #ccd4e3;
        }

        .view-toggle button:hover {
            background: #f4f6fb;

            color: var(--blue);
        }

        .view-toggle button.active {
            background: #eef5ff;

            color: #0060d0;
        }


        /* =========================================================
                   PROPERTY RESULT CARD
                ========================================================= */

        .result-card {
            position: relative;

            min-height: 226px;

            display: grid;

            grid-template-columns:
                360px minmax(0, 1fr) 207px;

            background: #fff;

            border: 1px solid var(--border);

            border-radius: 9px;

            overflow: hidden;

            margin-bottom: 11px;

            box-shadow:
                0 3px 13px rgba(25, 35, 75, 0.05);

            cursor: pointer;

            transition:
                transform 0.3s ease,
                box-shadow 0.3s ease,
                border-color 0.3s ease;
        }

        .result-card:hover {
            transform: translateY(-3px);

            border-color: #d7ddeb;

            box-shadow: var(--shadow-hover);
        }


        /* =========================================================
                   GALLERY
                ========================================================= */

        .gallery {
            position: relative;

            width: 100%;

            height: 100%;

            min-height: 226px;

            overflow: hidden;

            background: #edf0f6;
        }

        .gallery.single {
            display: block;
        }

        .gallery img {
            width: 100%;

            height: 100%;

            min-height: 226px;

            object-fit: cover;

            transition:
                transform 0.5s ease;
        }

        .result-card:hover .gallery img {
            transform: scale(1.035);
        }

        .gallery .main {
            width: 100%;

            height: 100%;

            object-fit: cover;
        }

        .gallery .side {
            min-height: 111px;
        }


        /* =========================================================
                   FEATURED
                ========================================================= */

        .featured {
            position: absolute;

            left: 10px;
            top: 10px;

            z-index: 4;

            padding: 6px 10px;

            border-radius: 13px;

        background: linear-gradient(135deg, #0B0F5C 0%, #13207F 25%, #1E3AAB 50%, #2F54D5 75%, #4B6EFF 100%);

            color: #fff;

            font-size: 9px;

            font-weight: 800;

            letter-spacing: 0.3px;
        }


        /* =========================================================
                   PHOTO COUNT
                ========================================================= */

        .photo-count {
            position: absolute;

            left: 10px;
            bottom: 10px;

            z-index: 4;

            display: inline-flex;

            align-items: center;

            gap: 6px;

            padding: 7px 10px;

            border-radius: 5px;

            background: rgba(15, 15, 15, 0.72);

            color: #fff;

            font-size: 10px;

            font-weight: 700;
        }

        .photo-count i {
            font-size: 11px;
        }


        /* =========================================================
                   HEART
                ========================================================= */

        .heart {
            position: absolute;

            right: 9px;
            top: 10px;

            z-index: 5;

            width: 38px;
            height: 38px;

            display: flex;

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

            padding: 0;

            border: 0;

            border-radius: 50%;

            background: #fff;

            color: #687189;

            font-size: 17px;

            box-shadow:
                0 3px 10px rgba(0, 0, 0, 0.13);

            transition:
                transform 0.2s ease,
                color 0.2s ease,
                background 0.2s ease;
        }

        .heart:hover {
            transform: scale(1.08);

            color: #e63946;

            background: #fff;
        }

        .heart.active {
            color: #e63946;

            background: #fff4f5;
        }

        .heart.active i {
            animation: heartPop 0.25s ease;
        }

        @keyframes heartPop {

            0% {
                transform: scale(0.7);
            }

            70% {
                transform: scale(1.2);
            }

            100% {
                transform: scale(1);
            }
        }


        /* =========================================================
                   DETAILS
                ========================================================= */

        .details {
            min-width: 0;

            padding: 15px 18px 11px;
        }


        /* =========================================================
                   TITLE ROW
                ========================================================= */

        .title-row {
            display: flex;

            align-items: center;

            gap: 10px;

            min-width: 0;
        }

        .property-title {
            min-width: 0;

            overflow: hidden;

            text-overflow: ellipsis;

            white-space: nowrap;

            color: #151c35;

            font-size: 18px;

            font-weight: 800;

            letter-spacing: -0.3px;
        }


        /* =========================================================
                   VERIFIED
                ========================================================= */

        .verified {
            flex-shrink: 0;

            display: inline-flex;

            align-items: center;

            gap: 4px;

            padding: 4px 7px;

            border: 1px solid #86dfb2;

            border-radius: 4px;

            background: var(--success-bg);

            color: var(--success);

            font-size: 9px;

            font-weight: 700;
        }

        .verified i {
            font-size: 9px;
        }


        /* =========================================================
                   LOCATION
                ========================================================= */

        .location {
            margin-top: 9px;

            display: flex;

            align-items: flex-start;

            gap: 7px;

            color: #59637b;

            font-size: 12px;

            line-height: 1.45;
        }

        .location i {
            flex-shrink: 0;

            margin-top: 2px;

            color: var(--blue);

            font-size: 12px;
        }


        /* =========================================================
                   PRICE
                ========================================================= */

        .price {
            margin-top: 13px;

            color: #000;

            font-size: 21px;

            font-weight: 800;

            line-height: 1.1;
        }

        .price span {
            color: #59637b;

            font-size: 12px;

            font-weight: 400;
        }


        /* =========================================================
                   DEPOSIT
                ========================================================= */

        .deposit {
            margin-top: 8px;

            color: #5c657a;

            font-size: 12px;
        }


        /* =========================================================
                   META
                ========================================================= */

        .meta {
            display: flex;

            align-items: center;

            gap: 20px;

            padding: 15px 0 13px;

            border-bottom: 1px solid #e7eaf0;

            overflow-x: auto;

            color: #4f5971;

            scrollbar-width: none;
        }

        .meta::-webkit-scrollbar {
            display: none;
        }

        .meta span {
            display: flex;

            align-items: center;

            gap: 7px;

            white-space: nowrap;

            font-size: 15px;
        }

        .meta span i {
            color: #000;

            font-size: 17px;
        }


        /* =========================================================
                   BROKER
                ========================================================= */

        .broker {
            display: flex;

            align-items: center;

            margin-top: 10px;

            gap: 10px;
        }

        .broker-avatar {
            width: 39px;
            height: 39px;

            flex-shrink: 0;

            display: flex;

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

            border-radius: 50%;

            background: #10162d;

            color: #d9bd67;

            font-size: 9px;

            font-weight: 800;

            text-align: center;
        }

        .broker-name {
            color: #1c243b;

            font-size: 13px;

            font-weight: 800;
        }

        .broker-role {
            margin-top: 4px;

            color: #59637b;

            font-size: 11px;
        }

        .tick {
            color: #1264ce;

            font-size: 13px;
        }


        /* =========================================================
                   ACTIONS
                ========================================================= */

        .actions {
            position: relative;

            padding: 75px 17px;

            display: flex;

            flex-direction: column;

            align-items: stretch;
        }

        .age {
            position: absolute;

            right: 17px;
            top: 14px;

            color: #59637b;

            font-size: 10px;

            white-space: nowrap;
        }

        .new {
            align-self: flex-end;

            /* margin: 0 0 43px auto; */

            padding: 6px 12px;

            border-radius: 5px;

            background: #eaf3ff;

            color: #0862cf;

            font-size: 10px;

            font-weight: 700;

            margin-bottom: 7px;
        }


        /* =========================================================
                   ACTION BUTTON
                ========================================================= */

        .action-btn {
            width: 100%;

            min-height: 36px;

            margin-bottom: 10px;

            border-radius: 5px;

            border: 1px solid var(--blue);

            background: #fff;

            color: var(--blue);

            font-size: 11px;

            font-weight: 700;

            transition:
                background 0.2s ease,
                color 0.2s ease,
                transform 0.2s ease,
                box-shadow 0.2s ease;
        }

        .action-btn:hover {
            transform: translateY(-1px);

            box-shadow:
                0 5px 12px rgba(23, 36, 201, 0.1);
        }

        .action-btn.primary {
        background: linear-gradient(135deg, #0B0F5C 0%, #13207F 25%, #1E3AAB 50%, #2F54D5 75%, #4B6EFF 100%);

            color: #fff;
        }

        .action-btn.primary:hover {
            background: var(--blue-dark);
        }


        /* =========================================================
                   PHONE
                ========================================================= */

        .phone {
            min-height: 38px;

            display: flex;

            align-items: center;

            justify-content: center;

            gap: 9px;

            border: 1px solid #d5dce8;

            border-radius: 5px;

            background: #fff;

            color: #1b2545;

            font-size: 10px;

            font-weight: 600;
        }

        .phone i {
            color: #075ecb;

            font-size: 13px;
        }


        /* =========================================================
                   LIST VIEW
                ========================================================= */

        .results.list-view .result-card {
            grid-template-columns:
                280px minmax(0, 1fr) 200px;
        }

        .results.list-view .gallery {
            min-height: 260px;
        }

        .results.list-view .gallery img {
            min-height: 260px;
        }


        /* =========================================================
                   NO RESULTS
                ========================================================= */

        .no-results {
            padding: 60px 20px;

            border: 1px dashed #d7ddea;

            border-radius: 10px;

            background: #fff;

            text-align: center;
        }

        .no-results>i {
            margin-bottom: 15px;

            color: var(--blue);

            font-size: 40px;
        }

        .no-results h3 {
            margin: 0 0 7px;

            color: #17203d;

            font-size: 20px;

            font-weight: 800;
        }

        .no-results p {
            margin: 0 0 18px;

            color: #6b7488;

            font-size: 13px;
        }

        .no-results button {
            min-height: 38px;

            padding: 0 18px;

            border: 0;

            border-radius: 5px;

        background: linear-gradient(135deg, #0B0F5C 0%, #13207F 25%, #1E3AAB 50%, #2F54D5 75%, #4B6EFF 100%);

            color: #fff;

            font-size: 11px;

            font-weight: 700;
        }


        /* =========================================================
                   ENQUIRY MODAL
                ========================================================= */

        body.modal-open {
            overflow: hidden;
        }

        .enquiry-modal {
            position: fixed;

            inset: 0;

            z-index: 99999;

            display: flex;

            align-items: center;

            justify-content: center;

            padding: 20px;

            opacity: 0;

            visibility: hidden;

            pointer-events: none;

            transition:
                opacity 0.25s ease,
                visibility 0.25s ease;
        }

        .enquiry-modal.show {
            opacity: 1;

            visibility: visible;

            pointer-events: auto;
        }


        /* =========================================================
                   MODAL OVERLAY
                ========================================================= */

        .enquiry-overlay {
            position: absolute;

            inset: 0;

            background:
                rgba(10, 18, 50, 0.55);

            backdrop-filter: blur(3px);
        }


        /* =========================================================
                   MODAL BOX
                ========================================================= */

        .enquiry-box {
            position: relative;

            z-index: 2;

            width: 100%;

            max-width: 480px;

            max-height: calc(100vh - 40px);

            overflow-y: auto;

            padding: 30px;

            border-radius: 14px;

            background: #fff;

            box-shadow:
                0 25px 70px rgba(0, 0, 0, 0.18);

            transform:
                translateY(20px) scale(0.97);

            transition:
                transform 0.3s ease;
        }

        .enquiry-modal.show .enquiry-box {
            transform:
                translateY(0) scale(1);
        }


        /* =========================================================
                   MODAL CLOSE
                ========================================================= */

        .enquiry-close {
            position: absolute;

            top: 14px;
            right: 14px;

            width: 34px;
            height: 34px;

            display: flex;

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

            padding: 0;

            border: 0;

            border-radius: 50%;

            background: #f1f3f8;

            color: #555e72;

            font-size: 13px;

            transition:
                background 0.2s ease,
                color 0.2s ease,
                transform 0.2s ease;
        }

        .enquiry-close:hover {
            background: #e9ecf4;

            color: #1724c9;

            transform: rotate(90deg);
        }


        /* =========================================================
                   MODAL ICON
                ========================================================= */

        .enquiry-icon {
            width: 52px;
            height: 52px;

            display: flex;

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

            margin-bottom: 15px;

            border-radius: 50%;

            background: #eef1ff;

            color: var(--blue);

            font-size: 21px;
        }


        /* =========================================================
                   MODAL TITLE
                ========================================================= */

        .enquiry-box h2 {
            margin: 0 35px 8px 0;

            color: #111b42;

            font-size: 22px;

            line-height: 1.25;
        }

        .enquiry-box>p {
            margin: 0 0 22px;

            color: #697287;

            font-size: 12px;

            line-height: 1.6;
        }


        /* =========================================================
                   ENQUIRY FORM
                ========================================================= */

        .enquiry-field {
            margin-bottom: 14px;
        }

        .enquiry-field label {
            display: block;

            margin-bottom: 6px;

            color: #252d43;

            font-size: 11px;

            font-weight: 700;
        }

        .enquiry-field>div {
            position: relative;
        }

        .enquiry-field>div>i {
            position: absolute;

            left: 13px;

            top: 15px;

            color: #7d879c;

            font-size: 13px;

            z-index: 2;
        }

        .enquiry-field input,
        .enquiry-field textarea {
            width: 100%;

            padding: 11px 12px 11px 36px;

            border: 1px solid #dce2ed;

            border-radius: 7px;

            outline: none;

            background: #fff;

            color: #202940;

            font-size: 12px;

            line-height: 1.5;

            transition:
                border-color 0.2s ease,
                box-shadow 0.2s ease;
        }

        .enquiry-field input {
            height: 42px;
        }

        .enquiry-field textarea {
            min-height: 90px;

            resize: vertical;
        }

        .enquiry-field input:focus,
        .enquiry-field textarea:focus {
            border-color: var(--blue);

            box-shadow:
                0 0 0 3px rgba(23, 36, 201, 0.07);
        }

        .enquiry-field input::placeholder,
        .enquiry-field textarea::placeholder {
            color: #929bad;
        }


        /* =========================================================
                   ENQUIRY SUBMIT
                ========================================================= */

        .enquiry-submit {
            width: 100%;

            min-height: 44px;

            display: flex;

            align-items: center;

            justify-content: center;

            gap: 8px;

            margin-top: 5px;

            border: 0;

            border-radius: 6px;

        background: linear-gradient(135deg, #0B0F5C 0%, #13207F 25%, #1E3AAB 50%, #2F54D5 75%, #4B6EFF 100%);

            color: #fff;

            font-size: 12px;

            font-weight: 700;

            transition:
                background 0.2s ease,
                transform 0.2s ease,
                box-shadow 0.2s ease;
        }

        .enquiry-submit:hover {
            background: var(--blue-dark);

            transform: translateY(-1px);

            box-shadow:
                0 7px 18px rgba(23, 36, 201, 0.2);
        }


        /* =========================================================
                   DESKTOP LARGE
                   1400px+
                ========================================================= */

        @media (min-width: 1400px) {

            .rent-container {
                width: 1280px;
            }

            .search-panel {
                padding-left: 24px;
                padding-right: 24px;

                gap: 15px;
            }

            .content {
                grid-template-columns: 325px minmax(0, 1fr);
            }

            .result-card {
                grid-template-columns:
                    390px minmax(0, 1fr) 215px;
            }

            .property-title {
                font-size: 19px;
            }

            .price {
                font-size: 22px;
            }
        }


        /* =========================================================
                   LAPTOP
                   1200px - 1399px
                ========================================================= */

        @media (min-width: 1200px) and (max-width: 1399px) {

            /* .container {
                        width: 1140px;
                    } */

            .search-panel {
                grid-template-columns:
                    1.55fr 1.05fr .7fr .95fr .8fr .75fr;

                gap: 10px;

                padding-left: 18px;
                padding-right: 18px;
            }

            .content {
                grid-template-columns: 290px minmax(0, 1fr);
            }

            .result-card {
                grid-template-columns:
                    315px minmax(0, 1fr) 185px;
            }

            .details {
                padding: 14px;
            }

            .meta {
                gap: 13px;
            }

            .meta span {
                font-size: 10px;
            }

            .property-title {
                font-size: 16px;
            }
        }


        /* =========================================================
                   TABLET
                   992px - 1199px
                ========================================================= */

        @media (max-width: 1199px) {

            .rent-container {
                max-width: calc(100% - 32px);
            }

            .search-panel {
                grid-template-columns:
                    repeat(3, 1fr);

                align-items: end;
            }

            .search-panel .field:first-child {
                grid-column: span 2;
            }

            .filter-action,
            .search-action {
                width: 100%;
            }

            .content {
                grid-template-columns: 260px minmax(0, 1fr);

                gap: 13px;
            }

            .result-card {
                grid-template-columns:
                    250px minmax(0, 1fr);

                min-height: 245px;
            }

            .gallery {
                min-height: 245px;
            }

            .gallery img {
                min-height: 245px;
            }

            .actions {
                grid-column: 1 / -1;

                display: grid;

                grid-template-columns:
                    auto auto 1fr 1fr 1.4fr;

                align-items: center;

                gap: 8px;

                padding: 10px 15px;

                border-top: 1px solid #e8ebf1;
            }

            .age {
                position: static;

                order: 1;
            }

            .new {
                margin: 0;

                justify-self: start;

                order: 2;
            }

            .action-btn {
                margin: 0;

                order: 3;
            }

            .action-btn.enquire-btn {
                order: 4;
            }

            .phone {
                order: 5;
            }

            .results.list-view .result-card {
                grid-template-columns:
                    280px minmax(0, 1fr);
            }
        }


        /* =========================================================
                   TABLET / SMALL TABLET
                   768px - 991px
                ========================================================= */

        @media (max-width: 991px) {

            .search-area {
                padding-top: 16px;
            }

            .search-panel {
                grid-template-columns:
                    repeat(2, 1fr);

                padding: 15px;
            }

            .search-panel .field:first-child {
                grid-column: span 2;
            }

            .content {
                grid-template-columns: 1fr;
            }

            .sidebar {
                position: relative;

                top: auto;

                display: none;
            }

            .sidebar.show {
                display: block;

                animation:
                    filterSlideDown 0.25s ease;
            }

            @keyframes filterSlideDown {

                from {
                    opacity: 0;

                    transform:
                        translateY(-10px);
                }

                to {
                    opacity: 1;

                    transform:
                        translateY(0);
                }
            }

            .result-card {
                grid-template-columns:
                    300px minmax(0, 1fr);
            }

            .details {
                padding: 17px;
            }

            .property-title {
                font-size: 17px;
            }

            .meta {
                flex-wrap: wrap;

                gap: 10px 18px;
            }

            .actions {
                grid-template-columns:
                    1fr 1fr;

                gap: 9px;
            }

            .age {
                grid-column: 1;
            }

            .new {
                grid-column: 2;

                justify-self: end;
            }

            .action-btn,
            .phone {
                width: 100%;
            }

            .view-toggle button {
                width: 44px;
            }
        }


        /* =========================================================
                   MOBILE
                   576px - 767px
                ========================================================= */

        @media (max-width: 767px) {

            body {
                font-size: 13px;
            }

            .rent-container {
                max-width: calc(100% - 24px);
            }

            .search-area {
                padding: 12px 0;
            }

            .search-panel {
                grid-template-columns: 1fr;

                gap: 12px;

                padding: 14px;
            }

            .search-panel .field:first-child {
                grid-column: auto;
            }

            .field label {
                font-size: 11px;
            }

            .control {
                height: 46px;
            }

            .search-action,
            .filter-action {
                height: 46px;
            }

            .content {
                gap: 12px;

                padding-bottom: 25px;
            }

            .result-toolbar {
                min-height: auto;

                padding: 13px;

                flex-direction: column;

                align-items: stretch;

                gap: 12px;
            }

            .showing {
                font-size: 12px;
            }

            .showing strong {
                font-size: 16px;
            }

            .sort {
                width: 100%;

                display: grid;

                grid-template-columns:
                    auto minmax(0, 1fr) auto;

                gap: 7px;
            }

            .sort-select {
                width: 100%;
            }

            .result-card,
            .results.list-view .result-card {
                display: block;

                min-height: auto;
            }

            .gallery,
            .results.list-view .gallery {
                width: 100%;

                height: 230px;

                min-height: 230px;
            }

            .gallery img,
            .results.list-view .gallery img {
                min-height: 230px;
            }

            .details {
                padding: 15px;
            }

            .title-row {
                align-items: flex-start;
            }

            .property-title {
                white-space: normal;

                font-size: 16px;

                line-height: 1.3;
            }

            .verified {
                font-size: 8px;
            }

            .location {
                font-size: 11px;
            }

            .price {
                font-size: 20px;
            }

            .deposit {
                font-size: 11px;
            }

            .meta {
                gap: 9px 16px;

                padding: 13px 0;
            }

            .meta span {
                font-size: 10px;
            }

            .broker {
                margin-top: 12px;
            }

            .actions {
                display: grid;

                grid-template-columns:
                    1fr 1fr;

                gap: 8px;

                padding: 13px 15px;

                border-top: 1px solid #e7eaf0;
            }

            .age {
                position: static;

                grid-column: 1;

                align-self: center;

                font-size: 10px;
            }

            .new {
                grid-column: 2;

                margin: 0;

                justify-self: end;

                align-self: center;
            }

            .action-btn {
                min-height: 40px;

                margin: 0;
            }

            .phone {
                grid-column: 1 / -1;

                min-height: 40px;
            }

            .enquiry-box {
                max-width: 100%;

                padding: 24px 18px;
            }

            .enquiry-box h2 {
                font-size: 19px;
            }
        }


        /* =========================================================
                   SMALL MOBILE
                   375px - 575px
                ========================================================= */

        @media (max-width: 575px) {

            .container {
                max-width: calc(100% - 18px);
            }

            .search-panel {
                padding: 12px;

                border-radius: 8px;
            }

            .field label {
                margin-bottom: 5px;

                font-size: 10px;
            }

            .control {
                height: 44px;

                padding: 0 11px;

                font-size: 12px;
            }

            .location-control input {
                font-size: 11px;
            }

            .search-action,
            .filter-action {
                height: 44px;

                font-size: 11px;
            }

            .location-suggestions {
                width: 100%;
            }

            .result-toolbar {
                padding: 11px;
            }

            .sort {
                grid-template-columns: 1fr;

                gap: 7px;
            }

            .view-toggle {
                width: 100%;
            }

            .view-toggle button {
                flex: 1;

                width: auto;
            }

            .gallery,
            .results.list-view .gallery {
                height: 205px;

                min-height: 205px;
            }

            .gallery img,
            .results.list-view .gallery img {
                min-height: 205px;
            }

            .featured {
                left: 8px;
                top: 8px;

                padding: 5px 8px;

                font-size: 8px;
            }

            .heart {
                right: 8px;
                top: 8px;

                width: 34px;
                height: 34px;

                font-size: 15px;
            }

            .photo-count {
                left: 8px;
                bottom: 8px;

                padding: 6px 8px;

                font-size: 9px;
            }

            .details {
                padding: 13px;
            }

            .property-title {
                font-size: 15px;
            }

            .verified {
                padding: 3px 5px;
            }

            .location {
                font-size: 10px;
            }

            .price {
                margin-top: 11px;

                font-size: 18px;
            }

            .price span {
                font-size: 10px;
            }

            .deposit {
                font-size: 10px;
            }

            .meta {
                gap: 8px 12px;
            }

            .meta span {
                font-size: 9px;
            }

            .meta span i {
                font-size: 15px;
            }

            .broker-avatar {
                width: 36px;
                height: 36px;

                font-size: 8px;
            }

            .broker-name {
                font-size: 11px;
            }

            .broker-role {
                font-size: 9px;
            }

            .actions {
                padding: 11px 13px;
            }

            .action-btn {
                min-height: 38px;

                font-size: 10px;
            }

            .phone {
                min-height: 38px;

                font-size: 9px;
            }

            .no-results {
                padding: 45px 15px;
            }

            .enquiry-modal {
                padding: 10px;
            }

            .enquiry-box {
                max-height: calc(100vh - 20px);

                padding: 20px 15px;
            }

            .enquiry-box h2 {
                font-size: 17px;
            }

            .enquiry-box>p {
                font-size: 10px;
            }
        }


        /* =========================================================
                   EXTRA SMALL MOBILE
                   BELOW 375px
                ========================================================= */

        @media (max-width: 374px) {

            .container {
                max-width: calc(100% - 12px);
            }

            .search-panel {
                padding: 10px;
            }

            .control {
                height: 42px;

                padding: 0 9px;
            }

            .control>i {
                font-size: 12px;
            }

            .location-control input {
                font-size: 10px;
            }

            .filter-action,
            .search-action {
                height: 42px;

                font-size: 10px;
            }

            .gallery,
            .results.list-view .gallery {
                height: 185px;

                min-height: 185px;
            }

            .gallery img,
            .results.list-view .gallery img {
                min-height: 185px;
            }

            .property-title {
                font-size: 14px;
            }

            .verified {
                display: none;
            }

            .meta {
                gap: 7px 9px;
            }

            .meta span {
                font-size: 11px;
            }

            .action-btn {
                font-size: 9px;
            }

            .phone {
                font-size: 8px;
            }
        }


        /* =========================================================
                   ACCESSIBILITY
                ========================================================= */

        button:focus-visible,
        input:focus-visible,
        select:focus-visible,
        textarea:focus-visible {
            outline: 2px solid rgba(23, 36, 201, 0.35);

            outline-offset: 2px;
        }


        /* =========================================================
                   REDUCE MOTION
                ========================================================= */

        @media (prefers-reduced-motion: reduce) {

            *,
            *::before,
            *::after {
                animation-duration: 0.01ms !important;

                animation-iteration-count: 1 !important;

                scroll-behavior: auto !important;

                transition-duration: 0.01ms !important;
            }
        }




/* =========================================================
   ENQUIRY MODAL - SCROLL FIX
   Uses the EXISTING classes in this page:
   .enquiry-modal
   .enquiry-overlay
   .enquiry-box
   .enquiry-close
========================================================= */

html.enquiry-modal-open,
body.enquiry-modal-open {
    overflow: hidden !important;
    height: 100% !important;
}

.enquiry-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;

    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;

    width: 100% !important;
    height: 100dvh !important;
    min-height: 100vh !important;

    padding: 24px 16px !important;
    box-sizing: border-box !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;

    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

    transition:
        opacity .25s ease,
        visibility .25s ease !important;
}

.enquiry-modal.show {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.enquiry-overlay {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;

    background: rgba(8, 13, 40, .76) !important;

    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
}

.enquiry-box {
    position: relative !important;
    z-index: 2 !important;

    flex: 0 0 auto !important;

    width: min(520px, 100%) !important;
    max-width: 520px !important;

    margin: auto !important;

    box-sizing: border-box !important;

    padding: 32px !important;

    background: #fff !important;
    border-radius: 20px !important;

    box-shadow: 0 30px 90px rgba(0,0,0,.30) !important;

    transform: translateY(20px) scale(.98) !important;
    transition: transform .3s ease !important;
}

.enquiry-modal.show .enquiry-box {
    transform: translateY(0) scale(1) !important;
}

.enquiry-close {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;

    z-index: 5 !important;

    width: 38px !important;
    height: 38px !important;

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

    border: 0 !important;
    border-radius: 50% !important;

    background: #f1f3f9 !important;
    color: #596277 !important;

    cursor: pointer !important;
}

.enquiry-close:hover {
    background: #1724c9 !important;
    color: #fff !important;
}

.enquiry-box form {
    width: 100% !important;
}

.enquiry-box input,
.enquiry-box textarea {
    width: 100% !important;
    box-sizing: border-box !important;
}

.enquiry-box textarea {
    resize: vertical !important;
}

@media (max-width: 600px) {
    .enquiry-modal {
        padding: 12px 10px !important;
        align-items: flex-start !important;
    }

    .enquiry-box {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 28px 20px !important;
        border-radius: 17px !important;
    }
}


/* =========================================================
   RENT PAGE — PREMIUM & RICH ANIMATION LAYER
   IMPORTANT:
   - Existing layout is preserved.
   - Existing class names are preserved.
   - Existing responsive breakpoints are preserved.
   - No content/functionality changes.
   - This section is appended only.
========================================================= */

:root {
    --rent-premium-blue: var(--blue, #1724c9);
    --rent-premium-blue-dark: var(--blue-dark, #0d188f);
    --rent-premium-glow: rgba(23, 36, 201, .16);
}

/* ---------- GLOBAL PAGE ENTRANCE ---------- */

.search-area {
    animation: rentFadeDown .75s cubic-bezier(.16, 1, .3, 1) both;
}

.content {
    animation: rentContentIn .8s cubic-bezier(.16, 1, .3, 1) .08s both;
}

/* ---------- SEARCH PANEL ---------- */

.search-panel {
    position: relative;
    isolation: isolate;
    transition:
        transform .45s cubic-bezier(.16, 1, .3, 1),
        box-shadow .45s ease,
        border-color .35s ease;
}

.search-panel::after {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    background:
        linear-gradient(
            110deg,
            transparent 15%,
            rgba(23,36,201,.08) 45%,
            transparent 75%
        );
    transition: opacity .4s ease;
}

.search-panel:hover {
    transform: translateY(-2px);
    box-shadow:
        0 16px 38px rgba(17,27,69,.10),
        0 0 0 4px rgba(23,36,201,.025);
}

.search-panel:hover::after {
    opacity: 1;
}

/* ---------- SEARCH FIELDS ---------- */

.search-panel .field {
    opacity: 0;
    animation: rentFieldReveal .65s cubic-bezier(.16,1,.3,1) forwards;
}

.search-panel .field:nth-child(1) { animation-delay: .08s; }
.search-panel .field:nth-child(2) { animation-delay: .14s; }
.search-panel .field:nth-child(3) { animation-delay: .20s; }
.search-panel .field:nth-child(4) { animation-delay: .26s; }
.search-panel .field:nth-child(5) { animation-delay: .32s; }
.search-panel .field:nth-child(6) { animation-delay: .38s; }

/* ---------- LABEL ---------- */

.field label {
    transition:
        color .3s ease,
        transform .3s cubic-bezier(.16,1,.3,1);
}

.field:focus-within label {
    color: var(--rent-premium-blue);
    transform: translateX(2px);
}

/* ---------- CONTROLS ---------- */

.control {
    position: relative;
    overflow: hidden;
    transition:
        border-color .3s ease,
        box-shadow .35s ease,
        background .35s ease,
        transform .35s cubic-bezier(.16,1,.3,1);
}

.control::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background:
        linear-gradient(
            90deg,
            var(--rent-premium-blue),
            #7152e8
        );
    transition: width .45s cubic-bezier(.16,1,.3,1);
}

.control:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(17,27,69,.055);
}

.control:focus-within::before {
    width: 100%;
}

.control > i {
    transition:
        transform .35s cubic-bezier(.16,1,.3,1),
        color .3s ease;
}

.control:hover > i,
.control:focus-within > i {
    transform: scale(1.12);
    color: var(--rent-premium-blue-dark);
}

.control .arrow {
    transition:
        transform .35s cubic-bezier(.16,1,.3,1),
        color .3s ease;
}

/* ---------- CLEAR BUTTON ---------- */

.control-icon-btn {
    transition:
        background .25s ease,
        color .25s ease,
        transform .3s cubic-bezier(.16,1,.3,1);
}

.control-icon-btn:hover {
    transform: rotate(90deg) scale(1.08);
}

/* ---------- DROPDOWNS ---------- */

.location-suggestions.show,
.select-menu.show {
    animation: rentDropdownIn .3s cubic-bezier(.16,1,.3,1) both;
}

.location-suggestions button,
.select-menu button {
    transition:
        background .25s ease,
        color .25s ease,
        transform .25s cubic-bezier(.16,1,.3,1),
        padding-left .25s ease;
}

.location-suggestions button:hover,
.select-menu button:hover {
    transform: translateX(4px);
    padding-left: 15px;
}

/* ---------- SEARCH / FILTER BUTTONS ---------- */

.search-action,
.filter-action {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition:
        transform .35s cubic-bezier(.16,1,.3,1),
        box-shadow .35s ease,
        background .3s ease,
        border-color .3s ease;
}

.search-action::before,
.filter-action::before {
    content: "";
    position: absolute;
    top: -100%;
    left: -65%;
    width: 32%;
    height: 300%;
    background: rgba(255,255,255,.35);
    transform: rotate(24deg);
    pointer-events: none;
}

.search-action:hover {
    transform: translateY(-3px) scale(1.012);
    box-shadow: 0 12px 26px rgba(23,36,201,.23);
}

.search-action:hover::before {
    animation: rentButtonShine .75s ease forwards;
}

.filter-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 19px rgba(23,36,201,.09);
}

.filter-action.active {
    box-shadow: 0 7px 18px rgba(23,36,201,.08);
}

/* ---------- SIDEBAR ---------- */

.sidebar {
    animation: rentSidebarReveal .75s cubic-bezier(.16,1,.3,1) .18s both;
    transition:
        transform .4s cubic-bezier(.16,1,.3,1),
        box-shadow .4s ease;
}

.sidebar:hover {
    box-shadow: 0 16px 38px rgba(17,27,69,.09);
}

.filter-head {
    transition: background .3s ease;
}

.filter-head:hover {
    background: #fafbff;
}

.reset {
    transition:
        color .25s ease,
        transform .3s ease;
}

.reset:hover {
    transform: translateX(-2px);
}

/* ---------- FILTER SECTIONS ---------- */

.filter-section {
    transition:
        background .3s ease,
        box-shadow .3s ease;
}

.filter-section:hover {
    background:
        linear-gradient(
            90deg,
            rgba(23,36,201,.012),
            transparent
        );
}

.filter-title i {
    transition:
        transform .35s cubic-bezier(.16,1,.3,1),
        color .25s ease;
}

.filter-title:hover i {
    color: var(--rent-premium-blue);
}

/* ---------- FILTER ROWS ---------- */

.tree-row,
.filter-checkbox-row,
.property-type-filters button {
    transition:
        background .25s ease,
        color .25s ease,
        transform .3s cubic-bezier(.16,1,.3,1),
        padding-left .3s cubic-bezier(.16,1,.3,1);
}

.tree-row:hover {
    transform: translateX(2px);
}

.tree-row.child:hover {
    padding-left: 36px;
}

.filter-checkbox-row:hover,
.property-type-filters button:hover {
    transform: translateX(3px);
}

.checkbox {
    transition:
        background .25s ease,
        border-color .25s ease,
        transform .3s cubic-bezier(.16,1,.3,1),
        box-shadow .3s ease;
}

.filter-checkbox-row:hover .checkbox,
.property-type-filters button:hover .checkbox,
.tree-row:hover .checkbox {
    transform: scale(1.08);
}

.checkbox.checked {
    box-shadow: 0 4px 13px rgba(23,36,201,.18);
}

.checkbox.checked i {
    animation: rentCheckPop .3s cubic-bezier(.16,1,.3,1);
}

/* ---------- RANGE ---------- */

.range-progress {
    transform-origin: left center;
    animation: rentRangeReveal .8s cubic-bezier(.16,1,.3,1) .35s both;
}

.range::before,
.range::after,
.range-thumb {
    transition:
        transform .3s cubic-bezier(.16,1,.3,1),
        box-shadow .3s ease;
}

.range:hover::before,
.range:hover::after,
.range:hover .range-thumb {
    box-shadow:
        0 0 0 5px rgba(23,36,201,.07),
        0 0 0 1px rgba(23,36,201,.18);
}

.range:hover::before,
.range:hover::after {
    transform: translateY(-50%) scale(1.12);
}

/* ---------- RESULTS TOOLBAR ---------- */

.result-toolbar {
    animation: rentToolbarReveal .7s cubic-bezier(.16,1,.3,1) .25s both;
    transition:
        transform .35s cubic-bezier(.16,1,.3,1),
        box-shadow .35s ease;
}

.result-toolbar:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(17,27,69,.07);
}

.showing strong {
    display: inline-block;
    animation: rentNumberPop .6s cubic-bezier(.16,1,.3,1) .45s both;
}

/* ---------- SORT / VIEW ---------- */

.sort-select {
    transition:
        border-color .3s ease,
        box-shadow .3s ease,
        transform .3s ease;
}

.sort-select:hover {
    transform: translateY(-1px);
}

.view-toggle button {
    transition:
        background .3s ease,
        color .3s ease,
        transform .25s cubic-bezier(.16,1,.3,1);
}

.view-toggle button:hover {
    transform: translateY(-1px);
}

/* ---------- PROPERTY CARDS ---------- */

.result-card {
    animation: rentCardReveal .72s cubic-bezier(.16,1,.3,1) both;
    transition:
        transform .45s cubic-bezier(.16,1,.3,1),
        box-shadow .45s ease,
        border-color .35s ease;
}

.result-card:nth-child(1) { animation-delay: .08s; }
.result-card:nth-child(2) { animation-delay: .15s; }
.result-card:nth-child(3) { animation-delay: .22s; }
.result-card:nth-child(4) { animation-delay: .29s; }
.result-card:nth-child(5) { animation-delay: .36s; }
.result-card:nth-child(6) { animation-delay: .43s; }

.result-card:hover {
    transform: translateY(-6px) scale(1.006);
    box-shadow:
        0 18px 42px rgba(17,27,69,.12),
        0 0 0 4px rgba(23,36,201,.018);
}

/* ---------- GALLERY ---------- */

.gallery {
    position: relative;
}

.gallery::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(
            115deg,
            transparent 20%,
            rgba(255,255,255,.23) 48%,
            transparent 76%
        );
    transform: translateX(-130%);
}

.result-card:hover .gallery::after {
    animation: rentImageSweep .85s ease forwards;
}

.gallery img {
    transition:
        transform .75s cubic-bezier(.16,1,.3,1),
        filter .5s ease;
}

.result-card:hover .gallery img {
    transform: scale(1.055);
    filter: saturate(1.04) contrast(1.015);
}

/* ---------- BADGES ---------- */

.featured {
    animation: rentBadgeReveal .55s cubic-bezier(.16,1,.3,1) .3s both;
    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.result-card:hover .featured {
    transform: translateY(-2px);
    box-shadow: 0 7px 17px rgba(23,36,201,.22);
}

.photo-count {
    transition:
        transform .3s cubic-bezier(.16,1,.3,1),
        background .3s ease;
}

.result-card:hover .photo-count {
    transform: translateY(-3px);
    background: rgba(15,15,15,.82);
}

.new {
    transition:
        transform .35s cubic-bezier(.16,1,.3,1),
        box-shadow .3s ease;
}

.result-card:hover .new {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(8,98,207,.12);
}

/* ---------- HEART ---------- */

.heart {
    transition:
        transform .35s cubic-bezier(.16,1,.3,1),
        color .25s ease,
        background .25s ease,
        box-shadow .35s ease;
}

.heart:hover {
    transform: scale(1.12);
    box-shadow: 0 8px 19px rgba(0,0,0,.15);
}

.heart.active {
    box-shadow: 0 7px 19px rgba(230,57,70,.16);
}

.heart.active i {
    animation: rentHeartPop .45s cubic-bezier(.16,1,.3,1);
}

/* ---------- PROPERTY DETAILS ---------- */

.property-title {
    transition:
        color .3s ease,
        transform .35s cubic-bezier(.16,1,.3,1);
}

.result-card:hover .property-title {
    color: var(--rent-premium-blue);
    transform: translateX(2px);
}

.location i,
.meta span i {
    transition:
        transform .3s cubic-bezier(.16,1,.3,1),
        color .3s ease;
}

.result-card:hover .location i,
.result-card:hover .meta span i {
    transform: scale(1.12);
}

.price {
    transition:
        transform .35s cubic-bezier(.16,1,.3,1),
        text-shadow .3s ease;
}

.result-card:hover .price {
    transform: translateX(3px);
    text-shadow: 0 5px 18px rgba(23,36,201,.12);
}

.verified {
    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.result-card:hover .verified {
    transform: translateY(-2px);
    box-shadow: 0 5px 13px rgba(34,166,101,.13);
}

/* ---------- BROKER ---------- */

.broker-avatar {
    transition:
        transform .4s cubic-bezier(.16,1,.3,1),
        box-shadow .35s ease;
}

.result-card:hover .broker-avatar {
    transform: scale(1.08) rotate(-4deg);
    box-shadow: 0 8px 19px rgba(16,22,45,.18);
}

/* ---------- ACTION BUTTONS ---------- */

.action-btn,
.phone {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition:
        transform .35s cubic-bezier(.16,1,.3,1),
        box-shadow .35s ease,
        background .3s ease,
        color .3s ease;
}

.action-btn::before,
.phone::before {
    content: "";
    position: absolute;
    top: -100%;
    left: -65%;
    width: 32%;
    height: 300%;
    background: rgba(255,255,255,.35);
    transform: rotate(24deg);
    pointer-events: none;
}

.action-btn:hover,
.phone:hover {
    transform: translateY(-3px);
    box-shadow: 0 9px 20px rgba(23,36,201,.12);
}

.action-btn:hover::before,
.phone:hover::before {
    animation: rentButtonShine .7s ease forwards;
}

.action-btn.primary:hover {
    box-shadow: 0 11px 24px rgba(23,36,201,.23);
}

/* ---------- NO RESULTS ---------- */

.no-results {
    animation: rentEmptyReveal .7s cubic-bezier(.16,1,.3,1) both;
}

.no-results > i {
    animation: rentEmptyFloat 2.5s ease-in-out infinite;
}

/* ---------- ENQUIRY MODAL ---------- */

.enquiry-overlay {
    transition:
        background .35s ease,
        backdrop-filter .35s ease;
}

.enquiry-box {
    transform:
        translateY(28px)
        scale(.94)
        rotateX(2deg);
    opacity: 0;
    transition:
        transform .55s cubic-bezier(.16,1,.3,1),
        opacity .35s ease;
}

.enquiry-modal.show .enquiry-box {
    transform:
        translateY(0)
        scale(1)
        rotateX(0);
    opacity: 1;
    animation: rentModalGlow 1.1s ease-out .1s both;
}

.enquiry-close {
    transition:
        transform .35s cubic-bezier(.16,1,.3,1),
        background .25s ease,
        color .25s ease;
}

.enquiry-close:hover {
    transform: rotate(90deg) scale(1.08);
}

.enquiry-icon {
    animation: rentModalIcon .65s cubic-bezier(.16,1,.3,1) .12s both;
}

.enquiry-field {
    animation: rentModalField .5s cubic-bezier(.16,1,.3,1) both;
}

.enquiry-field:nth-of-type(1) { animation-delay: .12s; }
.enquiry-field:nth-of-type(2) { animation-delay: .19s; }
.enquiry-field:nth-of-type(3) { animation-delay: .26s; }
.enquiry-field:nth-of-type(4) { animation-delay: .33s; }

.enquiry-field input,
.enquiry-field textarea {
    transition:
        border-color .3s ease,
        box-shadow .35s ease,
        transform .3s ease;
}

.enquiry-field input:focus,
.enquiry-field textarea:focus {
    transform: translateY(-1px);
    box-shadow:
        0 7px 22px rgba(23,36,201,.08),
        0 0 0 3px rgba(23,36,201,.055);
}

.enquiry-field > div > i {
    transition:
        color .3s ease,
        transform .35s cubic-bezier(.16,1,.3,1);
}

.enquiry-field:focus-within > div > i {
    color: var(--rent-premium-blue);
    transform: scale(1.1);
}

.enquiry-submit {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition:
        transform .35s cubic-bezier(.16,1,.3,1),
        box-shadow .35s ease,
        background .3s ease;
}

.enquiry-submit::before {
    content: "";
    position: absolute;
    top: -100%;
    left: -65%;
    width: 32%;
    height: 300%;
    background: rgba(255,255,255,.38);
    transform: rotate(24deg);
}

.enquiry-submit:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 27px rgba(23,36,201,.25);
}

.enquiry-submit:hover::before {
    animation: rentButtonShine .7s ease forwards;
}

/* =========================================================
   KEYFRAMES
========================================================= */

@keyframes rentFadeDown {
    from {
        opacity: 0;
        transform: translateY(-18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes rentContentIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes rentFieldReveal {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes rentDropdownIn {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes rentButtonShine {
    to {
        left: 135%;
    }
}

@keyframes rentSidebarReveal {
    from {
        opacity: 0;
        transform: translateX(-22px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes rentCheckPop {
    0% {
        opacity: 0;
        transform: scale(.55);
    }
    65% {
        opacity: 1;
        transform: scale(1.25);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes rentRangeReveal {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(1);
    }
}

@keyframes rentToolbarReveal {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes rentNumberPop {
    from {
        opacity: 0;
        transform: scale(.7);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes rentCardReveal {
    from {
        opacity: 0;
        transform: translateY(25px) scale(.98);
        filter: blur(2px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes rentImageSweep {
    to {
        transform: translateX(130%);
    }
}

@keyframes rentBadgeReveal {
    from {
        opacity: 0;
        transform: translateY(-7px) scale(.85);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes rentHeartPop {
    0% {
        transform: scale(.65);
    }
    40% {
        transform: scale(1.35);
    }
    70% {
        transform: scale(.92);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes rentEmptyReveal {
    from {
        opacity: 0;
        transform: translateY(22px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes rentEmptyFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-6px);
    }
}

@keyframes rentModalGlow {
    from {
        box-shadow:
            0 20px 55px rgba(0,0,0,.15),
            0 0 0 rgba(23,36,201,0);
    }
    to {
        box-shadow:
            0 30px 90px rgba(0,0,0,.22),
            0 0 30px rgba(23,36,201,.05);
    }
}

@keyframes rentModalIcon {
    from {
        opacity: 0;
        transform: scale(.65) rotate(-10deg);
    }
    to {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
}

@keyframes rentModalField {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================================
   MOBILE — PRESERVE EXISTING LAYOUT
========================================================= */

@media (max-width: 767px) {

    .search-panel:hover,
    .sidebar:hover,
    .result-toolbar:hover {
        transform: none;
    }

    .result-card:hover {
        transform: translateY(-3px);
    }

    .result-card:hover .gallery img {
        transform: scale(1.035);
    }

    .action-btn:hover,
    .phone:hover,
    .search-action:hover,
    .filter-action:hover {
        transform: translateY(-2px);
    }
}

/* =========================================================
   ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .search-area,
    .content,
    .search-panel .field,
    .sidebar,
    .result-toolbar,
    .result-card,
    .featured,
    .no-results,
    .no-results > i,
    .enquiry-icon,
    .enquiry-field,
    .enquiry-modal.show .enquiry-box {
        animation: none !important;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}

/* =========================================================
   RENT DROPDOWN — ACTUAL MOBILE + TABLET FIX
   ---------------------------------------------------------
   Desktop/laptop (769px+) is intentionally untouched.
   Fixes:
   1. Dropdown appearing over its own trigger
   2. Dropdown stacking behind following fields
   3. Dropdown clipping inside search panel
   4. Premium dropdown animation transform conflict
========================================================= */

@media (min-width: 320px) and (max-width: 768px) {

    /* -----------------------------------------------------
       SEARCH STACK
    ----------------------------------------------------- */

    .search-area {
        position: relative;
        z-index: 100;
        overflow: visible;
    }

    .search-panel {
        position: relative;
        z-index: 101;
        overflow: visible;
    }

    .search-panel .field {
        position: relative;
        z-index: 1;
        min-width: 0;
        overflow: visible;
    }

    /* -----------------------------------------------------
       OPEN FIELD ALWAYS GETS THE TOP LAYER
    ----------------------------------------------------- */

    .search-panel .field:has(.select-menu.show),
    .search-panel .field:has(.location-suggestions.show) {
        z-index: 1000;
    }

    .custom-select,
    .location-control {
        position: relative;
        width: 100%;
        min-width: 0;
        overflow: visible;
    }

    .custom-select:has(.select-menu.show) {
        z-index: 1001;
    }

    /* -----------------------------------------------------
       DROPDOWN
       Explicitly anchor it BELOW the trigger.
    ----------------------------------------------------- */

    .select-menu,
    .location-suggestions {
        position: absolute;
        top: calc(100% + 7px);
        bottom: auto;
        left: 0;
        right: auto;

        width: 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;

        z-index: 1002;

        overflow-x: hidden;
        overflow-y: auto;

        /* Do not let the animation transform change the
           dropdown's visual position on mobile/tablet. */
        transform: translateY(-6px);
    }

    .select-menu.show,
    .location-suggestions.show {
        top: calc(100% + 7px);
        transform: translateY(0);
        z-index: 1002;
    }

    /* -----------------------------------------------------
       REMOVE PREMIUM SCALE ANIMATION ON THESE TWO MENUS
       It was creating a visual overlap during open state.
       The normal fade/slide remains.
    ----------------------------------------------------- */

    .select-menu.show,
    .location-suggestions.show {
        animation: none;
        transition:
            opacity .2s ease,
            visibility .2s ease,
            transform .2s ease;
    }

    /* -----------------------------------------------------
       OPTIONS
    ----------------------------------------------------- */

    .select-menu button,
    .location-suggestions button {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    /* -----------------------------------------------------
       CONTENT BELOW SEARCH MUST STAY BELOW IT
    ----------------------------------------------------- */

    .content,
    .results,
    .result-toolbar,
    .result-card,
    .sidebar {
        position: relative;
        z-index: 1;
    }
}

/* =========================================================
   MOBILE — 320px to 480px
========================================================= */

@media (min-width: 320px) and (max-width: 480px) {

    .search-area {
        padding: 12px 0 14px;
    }

    .search-panel {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 14px;
        overflow: visible;
    }

    .search-panel .field {
        width: 100%;
    }

    .field label {
        font-size: 11px;
        margin-bottom: 6px;
    }

    .control {
        width: 100%;
        min-width: 0;
        height: 46px;
        box-sizing: border-box;
    }

    .select-trigger {
        position: relative;
        width: 100%;
        min-width: 0;
    }

    .custom-select {
        min-height: 46px;
    }

    .select-menu,
    .location-suggestions {
        width: 100%;
        max-width: 100%;
        max-height: 220px;
        border-radius: 8px;
    }

    .select-menu button,
    .location-suggestions button {
        min-height: 40px;
        padding: 9px 11px;
        font-size: 12px;
    }

    /* Open dropdown is always above the next field. */
    .search-panel .field:has(.select-menu.show),
    .search-panel .field:has(.location-suggestions.show) {
        z-index: 1000;
    }
}

/* =========================================================
   TABLET — 481px to 768px
========================================================= */

@media (min-width: 481px) and (max-width: 768px) {

    .search-area,
    .search-panel {
        overflow: visible;
    }

    .search-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .search-panel .field {
        min-width: 0;
        overflow: visible;
    }

    .search-panel .field:first-child {
        grid-column: 1 / -1;
    }

    .select-menu,
    .location-suggestions {
        max-width: 100%;
        max-height: 240px;
    }

    .select-menu button,
    .location-suggestions button {
        min-height: 40px;
        font-size: 13px;
    }
}


/* =========================================================
   RENT PAGE — SEARCH DROPDOWN STACKING
   Fixes dropdowns being hidden behind the Results toolbar.
   Scoped to the Rent page search/content selectors.
========================================================= */

.search-area {
    position: relative;
    z-index: 50;
    overflow: visible;
}

.search-panel {
    position: relative;
    z-index: 51;
    overflow: visible;
}

.search-panel .field {
    position: relative;
    z-index: 1;
    overflow: visible;
}

.search-panel .field:has(.location-suggestions.show),
.search-panel .field:has(.select-menu.show),
.search-panel .custom-select:has(.select-menu.show) {
    z-index: 500;
}

.location-suggestions,
.select-menu {
    position: absolute;
    z-index: 501;
}

.content {
    position: relative;
    z-index: 1;
}

/* Keep dropdowns above the results toolbar/card */
.result-toolbar,
.result-card,
.sidebar {
    position: relative;
    z-index: 1;
}

/* =========================================================
   TABLET + MOBILE — retain the responsive behavior
========================================================= */

@media (min-width: 320px) and (max-width: 768px) {

    .search-area,
    .search-panel,
    .search-panel .field,
    .search-panel .custom-select,
    .search-panel .location-control {
        overflow: visible;
    }

    .search-area {
        z-index: 50;
    }

    .search-panel {
        z-index: 51;
    }

    .search-panel .field:has(.location-suggestions.show),
    .search-panel .field:has(.select-menu.show),
    .search-panel .custom-select:has(.select-menu.show) {
        z-index: 500;
    }

    .location-suggestions,
    .select-menu {
        z-index: 501;
    }

    .content,
    .result-toolbar,
    .result-card,
    .sidebar {
        z-index: 1;
    }
}


/* =========================================================
   HEADER CITY / RENT MEGA MENU — DESKTOP ONLY
   Fix: header dropdown must appear above the search panel.
   769px+ only; tablet/mobile rules remain unchanged.
========================================================= */

@media (min-width: 769px) {

    header {
        position: relative;
        z-index: 5000;
        isolation: isolate;
    }

    header .nav {
        position: relative;
        z-index: 5001;
    }

    header .city-selector,
    header .menu,
    header .nav-actions {
        position: relative;
        z-index: 5002;
    }

    header .city-selector {
        isolation: isolate;
    }

    /* City dropdown / mega menu */
    header .city-dropdown,
    header .city-menu,
    header .nav-mega-menu,
    header .mega-menu {
        position: absolute;
        z-index: 6000;
    }

    /* Rent mega menu */
    header .nav-dropdown {
        position: relative;
        z-index: 5003;
    }

    header .nav-dropdown > .nav-mega-menu {
        z-index: 6000;
    }

    /* Search panel remains below header menus */
    .search-area {
        position: relative;
        z-index: 100;
    }

    .search-panel {
        position: relative;
        z-index: 101;
    }

    .content {
        position: relative;
        z-index: 1;
    }
}