/*********************STYLE SEARCH PAGE *******************/ html::-webkit-scrollbar { width: 0px; background: transparent; } .navbar-custom, .footer-section, .property-body { background: linear-gradient( to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 40%, rgba(0, 0, 0, 0.75) 70%, rgba(0, 0, 0, 1) 100% ), var(--primary-bg) !important; } .map { height: 1256px; max-height: 100vh; max-height: 100dvh; z-index:0; } .search-row { height: 1256px; max-height: 100vh; max-height: 100dvh; } .h-col { height: 1256px; max-height: 100vh; max-height: 100dvh; overflow-y: auto; overflow-x: hidden; } .col-overflow { max-height: calc((420px * 2) + 16px + 64px); overflow-y: auto; overflow-x: hidden; } /* Inside the map view column the whole column scrolls (filter + results), so the results list must not create a second scroll area. */ .h-col .col-overflow { max-height: none; overflow: visible; } /* Scrollbar */ .col-overflow::-webkit-scrollbar { width: 20px; } .col-overflow::-webkit-scrollbar-track { background: #cccccc; } .col-overflow::-webkit-scrollbar-thumb { background-color: #f8f9fa; opacity: 0.5; border-radius: 20px; /* FAKE TRACK WIDTH */ border: 2.5px solid transparent; /* (20 - 15) / 2 */ background-clip: padding-box; } .col-overflow::-webkit-scrollbar-thumb:hover { background-color: #a0a0a0; } .pr-10 { padding-right: 10px; } .pl-10 { padding-right: 10px; } /************ STYLE FILTER **************/ .property-filter { font-family: Arial, sans-serif; color: var(--primary-bg); padding-right: 20px; } /* select2 dropdowns are appended to , keep them above the map/scroll area */ .select2-container--open { z-index: 2000; } /* Make the select2 multi-selects look like the native filter dropdowns: same height, font, padding and caret. */ .filters-row .select2-container--default .select2-selection--multiple { height: 40px; min-height: 40px; background: #f2f2f2; border: none; border-radius: 6px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='black' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 10px; } .filters-row .select2-container--default .select2-selection--multiple .select2-selection__rendered { min-height: 40px; padding: 0 2rem 0 14px; margin: 0; /* Keep every chip on one line and scroll horizontally instead of growing tall. */ display: flex; flex-wrap: nowrap; align-items: center; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; } /* Slim scrollbar so it doesn't eat into the 40px control */ .filters-row .select2-container--default .select2-selection--multiple .select2-selection__rendered::-webkit-scrollbar { height: 4px; } .filters-row .select2-container--default .select2-selection--multiple .select2-selection__rendered::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.25); border-radius: 4px; } .filters-row .select2-container--default .select2-selection--multiple .select2-selection__rendered > li { flex: 0 0 auto; white-space: nowrap; } .filters-row .select2-container--default .select2-selection--multiple .select2-search--inline, .filters-row .select2-container--default .select2-selection--multiple .select2-search__field { height: 38px; margin: 0; font-size: 14pt; line-height: 38px; color: var(--primary-bg); } .filters-row .select2-container--default .select2-selection__placeholder { font-size: 14pt; color: var(--primary-bg); } .property-filter h1 { font-size: 2rem; font-weight: bold; margin-bottom: 15px; margin-top: 35px; } .property-filter p { font-size: 1.3331rem; margin-bottom: 20px; } /* Search box and the map/list toggle share one line. */ .search-row-top { display: flex; align-items: center; gap: 8px; margin-bottom: 15px; } .search-row-top .search-input { flex: 1 1 auto; margin-bottom: 0; } .search-row-top .list-view { flex: 0 0 auto; width: auto; min-width: 160px; padding-right: 40px; } .search-input { width: 100%; height: 40px; padding: 0 20px; font-size: 1.1669rem; border-radius: 6px; border: none; background: #f2f2f2; color: var(--primary-bg); margin-bottom: 15px; outline: none; } .search-input::placeholder{ color:var(--primary-bg); } .filters-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin-bottom: 15px; } .filters-row > * { flex: 0 0 calc(25% - 6px); /* 4 per row, matching the 8px gap */ max-width: calc(25% - 6px); min-width: 0; } /* Listing status / property types each get their own full-width line, with a label so the selected chips stay understandable. */ .filters-row.row-select-multiple { display: block; margin-bottom: 12px; } .filters-row.row-select-multiple > * { flex: none; max-width: none; } .filters-row.row-select-multiple .select2-container { width: 100% !important; } .filter-label { display: inline-block; margin-bottom: 4px; font-size: 11pt; font-weight: 600; color: var(--primary-bg); cursor: pointer; } .filter-label:hover { text-decoration: underline; } .filters-row select, .list-view { width: 100%; height: 40px; font-size: 14pt; color: var(--primary-bg); text-decoration: none; background: #f2f2f2; border: none; border-radius: 6px; cursor: pointer; outline: 0; position: relative; display: flex; align-items: center; justify-content: space-between; } .filters-row select, .list-view span { padding-left:14px; } .filters-row select, .list-view span .sb-icon-search { position: absolute; right: 11px; top: 12px; } .filters-row select { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='black' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-repeat: no-repeat; background-position: right 1rem center; background-size: 10px; padding-right: 2rem; } .select2-search__field::placeholder { color: var(--primary-bg); opacity: 1; font-size: 14pt; } .select2-container--default.select2-container--focus .select2-selection--multiple{ border:none; min-height:40px; height:100%; } .filter-container { max-width: 1470px; margin: 0 auto; } /************ PILL FILTER BAR **************/ .filter-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 15px; } .filter-pill { position: relative; } .filter-pill-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; font-size: 14pt; font-weight: 400; color: var(--primary-bg); background: #f2f2f2; border: none; border-radius: 6px; cursor: pointer; white-space: nowrap; outline: 0; } .filter-pill-btn:hover { background: #e9e9e9; } .filter-pill-btn .fa-angle-down { transition: transform .15s ease; } .filter-pill.is-open .filter-pill-btn, .filter-pill.has-value .filter-pill-btn { color: var(--primary-bg); } .filter-pill.is-open .filter-pill-btn { background: #e4e4e4; } .filter-pill.is-open .filter-pill-btn .fa-angle-down { transform: rotate(180deg); } .filter-panel { display: none; position: absolute; top: calc(100% + 8px); left: 0; right: auto; z-index: 1500; width: 340px; max-width: calc(100vw - 32px); padding: 18px; background: #fff; border: 1px solid #e3e6e9; border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); } /* Panels open aligned to their pill; updateFilterPanelAlignment in searchpage.js nudges them left/right so they always stay inside the filter container. */ .filter-pill .filter-panel { left: 0; right: auto; } .filter-panel-wide { width: 420px; } .filter-pill.is-open .filter-panel { display: block; } .filter-panel-title { font-size: 12pt; font-weight: 700; color: var(--primary-bg); margin-bottom: 10px; } .filter-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; } .filter-panel-header .filter-panel-title { margin-bottom: 0; } .filter-select-all { padding: 0; font-size: 10.5pt; font-weight: 600; color: var(--primary-bg); background: none; border: none; cursor: pointer; outline: 0; } .filter-select-all:hover { text-decoration: underline; } .filter-checkbox-list { display: flex; flex-direction: column; gap: 4px; } .filter-checkbox-list-scroll { max-height: 260px; overflow-y: auto; scrollbar-width: thin; } /* Panels that hold more than one group scroll as a whole so the section headings scroll with their checkboxes. */ .filter-panel-scroll { max-height: 380px; overflow-y: auto; scrollbar-width: thin; padding-right: 4px; } .filter-section + .filter-section { margin-top: 0; } .filter-section-divider { height: 1px; margin: 16px 0; background: #e3e6e9; } /* Section headings stay visible while their list scrolls past. */ .filter-panel-scroll .filter-panel-header { position: sticky; top: 0; z-index: 1; background: #fff; padding: 4px 0; } .filter-checkbox { display: flex; align-items: center; gap: 10px; margin: 0; padding: 4px 2px; font-size: 11.5pt; font-weight: 400; color: var(--primary-bg); cursor: pointer; } .filter-checkbox input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; } .filter-checkbox-box { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 20px; width: 20px; height: 20px; border: 1px solid #cfd4d9; border-radius: 4px; background: #fff; color: #fff; font-size: 10px; } .filter-checkbox-box .fa-check { opacity: 0; } .filter-checkbox input[type="checkbox"]:checked + .filter-checkbox-box { background: var(--primary-bg); border-color: var(--primary-bg); } .filter-checkbox input[type="checkbox"]:checked + .filter-checkbox-box .fa-check { opacity: 1; } .filter-checkbox input[type="checkbox"]:focus-visible + .filter-checkbox-box { box-shadow: 0 0 0 3px rgba(0, 0, 0, .15); } .filter-checkbox-text { line-height: 1.2; } .filter-panel-title + .filter-panel-grid + .filter-panel-title { margin-top: 18px; } .filter-panel-grid { display: flex; align-items: flex-end; gap: 10px; } .filter-field { flex: 1 1 0; min-width: 0; } .filter-field label { display: block; margin-bottom: 4px; font-size: 10.5pt; font-weight: 600; color: var(--primary-bg); } .filter-field select { width: 100%; height: 40px; padding: 0 2rem 0 14px; font-size: 14pt; color: var(--primary-bg); background: #f2f2f2; border: none; border-radius: 6px; cursor: pointer; outline: 0; appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='black' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .75rem center; background-size: 10px; } .filter-dash { padding-bottom: 12px; color: var(--primary-bg); } .filter-panel select[multiple] { width: 100%; } .filter-panel .select2-container { width: 100% !important; } .filter-apply { width: 100%; height: 44px; margin-top: 18px; font-size: 12pt; font-weight: 700; color: #fff; background: #1277e1; border: none; border-radius: 6px; cursor: pointer; } .filter-apply:hover { background: #0f66c2; } @media (max-width: 576px) { .filter-panel, .filter-panel-wide { width: calc(100vw - 32px); } } @media (max-width: 576px) { .filters-row { flex-direction: column; } .search-row-top { flex-direction: column; align-items: stretch; } .search-row-top .list-view { width: 100%; } .filters-row > * { flex: 0 0 100%; /* 1 colonne */ max-width: 100%; } .property-filter h1 { font-size: 18pt; } .property-filter p { font-size: 12pt; } } @media (max-width: 992px) { .filters-row > * { flex: 0 0 calc(50% - 4px); /* 2 colonnes */ max-width: calc(50% - 4px); } .filters-row.row-select-multiple > * { flex: none; max-width: none; } } .property-card { height: 420px; /* ajuste si besoin */ display: flex; flex-direction: column; } .property-card.card-map-search { height: 318px; } .property-card { display: flex; flex-direction: column; height: 100%; } .property-body { display: flex; flex-direction: column; flex: 1; } .property-footer { margin-top: auto; }