:root { --primary-color: var(--brand); --secondary-color: var(--text-dim); --success-color: #10b981; --danger-color: #ef4444; --warning-color: #f59e0b; --dark-color: var(--text); --light-bg: var(--surface-2); --border-color: var(--line-solid); } /* Dark Mode Variables */ .dark-style[data-style="dark"] { --light-bg: var(--surface-2); --dark-color: var(--text); --border-color: var(--line-solid); } .dark-style[data-style="dark"] body { /* transparent, not --bg: includes/ajari-bg.php lays the animated field behind the page at negative z-index, and an opaque body would paint straight over it. still carries the ground (brand.css), so overscroll stays the right colour. */ background-color: transparent !important; color: var(--text) !important; } .dark-style[data-style="dark"] .filter-section, .dark-style[data-style="dark"] .unit-card, .dark-style[data-style="dark"] .map-section { background-color: var(--surface) !important; color: var(--text) !important; } .dark-style[data-style="dark"] .filter-title, .dark-style[data-style="dark"] .unit-title { color: var(--text) !important; } .dark-style[data-style="dark"] .form-select, .dark-style[data-style="dark"] .form-control { background-color: var(--surface-2) !important; border-color: var(--line-solid) !important; color: var(--text) !important; } .dark-style[data-style="dark"] .form-select option { background-color: var(--surface-2) !important; color: var(--text) !important; } /* White placeholders in dark mode */ .dark-style[data-style="dark"] .form-control::placeholder { color: rgba(223, 229, 236, 0.6) !important; opacity: 1 !important; } .dark-style[data-style="dark"] .form-select:invalid { color: rgba(223, 229, 236, 0.6) !important; } .dark-style[data-style="dark"] .unit-building, .dark-style[data-style="dark"] .unit-price-label, .dark-style[data-style="dark"] .popup-info { color: var(--text-dim) !important; } .dark-style[data-style="dark"] #map { border-color: var(--line-solid) !important; } .dark-style[data-style="dark"] .map-section { background: linear-gradient(to bottom, var(--surface) 0%, var(--surface-2) 100%) !important; } .dark-style[data-style="dark"] .leaflet-tile-pane { filter: brightness(0.6) invert(1) contrast(3) hue-rotate(200deg) saturate(0.3) brightness(0.7); } .dark-style[data-style="dark"] .leaflet-popup-content-wrapper { background-color: var(--surface) !important; color: var(--text) !important; } .dark-style[data-style="dark"] .leaflet-popup-tip { background-color: var(--surface) !important; } .dark-style[data-style="dark"] .popup-units { background-color: var(--surface-2) !important; } .dark-style[data-style="dark"] .popup-body { background-color: var(--surface) !important; } .dark-style[data-style="dark"] .empty-state { color: var(--text-dim) !important; } .dark-style[data-style="dark"] .btn-light { background-color: var(--line-solid) !important; border-color: var(--line-solid) !important; color: var(--text) !important; } .dark-style[data-style="dark"] .btn-light:hover { background-color: #5a6785 !important; border-color: #5a6785 !important; } .dark-style[data-style="dark"] footer { background-color: var(--surface) !important; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--font-primary); /* See the dark rule below: the ground is painted by and by the .aj-bg layer, so body itself stays out of the way. */ background-color: transparent; color: var(--dark-color); line-height: 1.6; } /* Header */ .header { background: linear-gradient(135deg, var(--brand) 0%, #1B5E6B 100%); color: white; padding: 2rem 0; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); } .header .logo { max-height: 60px; /* filter: brightness(0) invert(1); */ } .header h1 { font-size: 2rem; font-weight: 700; margin: 0; } .header p { margin: 0.5rem 0 0 0; opacity: 0.9; } /* Filter Section */ .filter-section { background: white; border-radius: 12px; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1); padding: 1.5rem; margin-bottom: 2rem; } .filter-title { font-size: 1.125rem; font-weight: 600; margin-bottom: 1rem; color: var(--dark-color); } /* Map Container */ #map { height: 600px; border-radius: 16px; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); margin-bottom: 2rem; border: 2px solid var(--border-color); overflow: hidden; } .map-section { background: linear-gradient(to bottom, #ffffff 0%, var(--surface-2) 100%); border-radius: 16px; padding: 2rem; margin-bottom: 2rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); } /* Custom Map Marker */ .custom-marker { background: linear-gradient(135deg, var(--brand) 0%, #1B5E6B 100%); width: 40px; height: 40px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); border: 3px solid white; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; } .custom-marker:hover { transform: rotate(-45deg) scale(1.1); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4); } .custom-marker i { transform: rotate(45deg); color: white; font-size: 18px; } /* Leaflet Popup Customization The wrapper's rendered width comes from an inline style Leaflet sets on .leaflet-popup-content (based on the marker's maxWidth option). Capping that inline width with an !important max-width here forces the browser to lay it out narrower before Leaflet reads it back for positioning, so popups never spill past small viewports. */ .leaflet-popup { margin-bottom: 26px; } .leaflet-popup-content-wrapper { border-radius: 16px !important; box-shadow: 0 20px 40px -8px rgba(0, 0, 0, 0.28), 0 8px 16px -6px rgba(0, 0, 0, 0.12) !important; padding: 0 !important; overflow: hidden; animation: popup-pop 0.16s ease-out; } @keyframes popup-pop { from { transform: scale(0.94); opacity: 0; } to { transform: scale(1); opacity: 1; } } .leaflet-popup-content { margin: 0 !important; width: 300px !important; max-width: calc(100vw - 56px) !important; box-sizing: border-box; } .popup-header { background: linear-gradient(135deg, var(--brand) 0%, #1B5E6B 100%); color: white; padding: 1rem 2.75rem 1rem 1rem; } [dir="rtl"] .popup-header { padding: 1rem 1rem 1rem 2.75rem; } .popup-header h5 { margin: 0; font-size: 1.125rem; font-weight: 600; line-height: 1.35; word-break: break-word; } .popup-body { padding: 1rem; max-height: min(55vh, 420px); overflow-y: auto; -webkit-overflow-scrolling: touch; } .popup-info { display: flex; align-items: center; margin-bottom: 0.75rem; color: var(--secondary-color); font-size: 0.875rem; line-height: 1.4; } .popup-info span { min-width: 0; word-break: break-word; } .popup-info i { flex-shrink: 0; width: 20px; color: var(--primary-color); margin-right: 0.5rem; } .popup-units { background: var(--light-bg); padding: 0.75rem; border-radius: 8px; margin-bottom: 0.75rem; text-align: center; } .popup-units-count { font-size: 1.5rem; font-weight: 700; color: var(--primary-color); display: block; } .popup-units-label { font-size: 0.75rem; color: var(--secondary-color); text-transform: uppercase; letter-spacing: 0.5px; } .popup-btn { width: 100%; min-height: 44px; padding: 0.625rem; display: flex; align-items: center; justify-content: center; gap: 0.4rem; background: var(--brand); color: white; border: none; border-radius: 8px; font-weight: 500; cursor: pointer; transition: all 0.3s ease; } .popup-btn:hover { background: #1B5E6B; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(37, 99, 235, 0.3); } .popup-btn:active { transform: translateY(0); } .leaflet-popup-tip { background: white !important; } /* Popup Close Button — sized to a comfortable touch target and positioned to sit clearly inside the header on every screen. */ .leaflet-popup-close-button { top: 8px !important; right: 8px !important; width: 28px !important; height: 28px !important; display: flex !important; align-items: center; justify-content: center; color: white !important; font-size: 20px !important; line-height: 1 !important; padding: 0 !important; border-radius: 50%; background: rgba(255, 255, 255, 0.16) !important; opacity: 0.9 !important; transition: background-color 0.2s ease, opacity 0.2s ease; } /* RTL Popup - Move X to left */ [dir="rtl"] .rtl-popup .leaflet-popup-close-button { right: auto !important; left: 8px !important; } .leaflet-popup-close-button:hover { opacity: 1 !important; color: white !important; background: rgba(255, 255, 255, 0.3) !important; } /* Unit Cards */ .unit-card { background: white; border-radius: 12px; overflow: hidden; transition: all 0.3s ease; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1); margin-bottom: 0.5rem; height: 100%; display: flex; flex-direction: column; } .unit-card:hover { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); transform: translateY(-4px); } .unit-card-image { width: 100%; height: 240px; object-fit: cover; background: linear-gradient(135deg, var(--brand) 0%, #1B5E6B 100%); } /* Carousel styles for unit cards */ .unit-card .carousel { height: 240px; } .unit-card .carousel-inner { height: 100%; } .unit-card .carousel-item { height: 100%; } .unit-card .carousel-control-prev, .unit-card .carousel-control-next { width: 10%; opacity: 0; transition: opacity 0.3s ease; } .unit-card:hover .carousel-control-prev, .unit-card:hover .carousel-control-next { opacity: 1; } .unit-card .carousel-indicators { bottom: 10px; margin-bottom: 0; } .unit-card .carousel-indicators button { width: 8px; height: 8px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.7); } .unit-card .carousel-indicators button.active { background-color: var(--primary-color); } .unit-card-body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; } .unit-title { font-size: 1.25rem; font-weight: 600; color: var(--dark-color); margin-bottom: 0.5rem; } .unit-building { color: var(--secondary-color); font-size: 0.875rem; margin-bottom: 1rem; } .unit-details { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; } [dir="rtl"] .unit-details { direction: rtl; text-align: right; } .unit-detail-item { display: flex; align-items: center; gap: 0.5rem; color: var(--secondary-color); font-size: 0.875rem; } .unit-detail-item i { color: var(--primary-color); } .unit-amenities { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; } [dir="rtl"] .unit-amenities { direction: rtl; text-align: right; justify-content: flex-end; } .amenity-badge { background: var(--light-bg); color: var(--secondary-color); padding: 0.25rem 0.75rem; border-radius: 20px; font-size: 0.75rem; font-weight: 500; } .unit-price { font-size: 1.75rem; font-weight: 700; color: var(--primary-color); margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--border-color); } .unit-price-label { font-size: 0.875rem; color: var(--secondary-color); font-weight: 400; } /* Buttons */ .btn-primary { background: var(--brand); border: none; padding: 0.625rem 1.5rem; border-radius: 8px; font-weight: 500; transition: all 0.3s ease; } .btn-primary:hover { background: #1B5E6B; transform: translateY(-1px); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); } .btn-outline-primary { border: 2px solid var(--brand); color: var(--brand); padding: 0.625rem 1.5rem; border-radius: 8px; font-weight: 500; transition: all 0.3s ease; } .btn-outline-primary:hover { background: var(--primary-color); color: white; } /* Contact Buttons Container */ .contact-buttons-container { display: flex; gap: 0.5rem; margin-top: 0.75rem; justify-content: center; } .btn-contact { flex: 1; border: none; color: white; padding: 0.75rem; border-radius: 8px; font-weight: 500; transition: all 0.3s ease; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; cursor: pointer; min-width: 50px; } .btn-whatsapp { background: #25D366; } .btn-whatsapp:hover { background: #128C7E; color: white; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(37, 211, 102, 0.4); } .btn-call { background: var(--brand); } .btn-call:hover { background: #1B5E6B; color: white; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(43, 187, 173, 0.4); } .btn-share { background: #6c757d; } .btn-share:hover { background: #5a6268; color: white; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(108, 117, 125, 0.4); } .btn-contact i { font-size: 1.1rem; } /* Remove hover effects on touch devices */ @media (hover: none) and (pointer: coarse) { .btn-whatsapp:hover, .btn-call:hover, .btn-share:hover { transform: none; box-shadow: none; } .btn-whatsapp:active { background: #128C7E; } .btn-call:active { background: #1B5E6B; } .btn-share:active { background: #5a6268; } } /* Status Badge */ .status-badge { display: inline-block; padding: 0.25rem 0.75rem; border-radius: 20px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; } .status-available { background: #dcfce7; color: #166534; } /* Loading States */ .skeleton { background: linear-gradient(90deg, #eef2f6 25%, #e0e0e0 50%, #eef2f6 75%); background-size: 200% 100%; animation: loading 1.5s ease-in-out infinite; border-radius: 8px; } @keyframes loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Empty State */ .empty-state { text-align: center; padding: 4rem 2rem; color: var(--secondary-color); } .empty-state i { font-size: 4rem; margin-bottom: 1rem; color: var(--border-color); } /* View Toggle */ .view-toggle { display: flex; gap: 0.5rem; } .view-btn { padding: 0.5rem 1rem; border: 1px solid var(--border-color); background: white; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; } .view-btn.active { background: var(--primary-color); color: white; border-color: var(--primary-color); } /* Responsive */ @media (max-width: 768px) { .header h1 { font-size: 1.5rem; } #map { height: 350px; } .filter-section { padding: 1rem; } /* Smaller popups for mobile — width tracks the viewport instead of a fixed px value so it never gets clipped by the screen edge on narrow phones, and grows to fill more of the map on wider ones. */ .leaflet-popup-content { width: min(280px, calc(100vw - 48px)) !important; max-width: calc(100vw - 48px) !important; } .leaflet-popup { margin-bottom: 20px; } .popup-header { padding: 0.75rem 2.5rem 0.75rem 0.875rem; } [dir="rtl"] .popup-header { padding: 0.75rem 0.875rem 0.75rem 2.5rem; } .popup-header h5 { font-size: 0.9rem; } .popup-body { padding: 0.75rem; max-height: min(45vh, 320px); } .popup-info { margin-bottom: 0.5rem; font-size: 0.8125rem; } .popup-info i { width: 16px; font-size: 0.75rem; margin-right: 0.375rem; } .popup-units { padding: 0.625rem; margin-bottom: 0.625rem; } .popup-units-count { font-size: 1.25rem; } .popup-units-label { font-size: 0.675rem; } .popup-btn { padding: 0.625rem; font-size: 0.875rem; } .leaflet-popup-close-button { top: 6px !important; right: 6px !important; } [dir="rtl"] .rtl-popup .leaflet-popup-close-button { right: auto !important; left: 6px !important; } .leaflet-popup-content-wrapper { box-shadow: 0 10px 22px -4px rgba(0, 0, 0, 0.22), 0 4px 8px rgba(0, 0, 0, 0.12) !important; } } /* Extra-narrow phones */ @media (max-width: 380px) { .leaflet-popup-content { width: min(240px, calc(100vw - 40px)) !important; max-width: calc(100vw - 40px) !important; } .popup-units-count { font-size: 1.1rem; } } /* RTL Support */ [dir="rtl"] { text-align: right; } /* Arabic Font */ [dir="rtl"] body, [dir="rtl"] .unit-title, [dir="rtl"] .filter-title, [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6, [dir="rtl"] .btn, [dir="rtl"] .form-control, [dir="rtl"] .form-select { font-family: var(--font-primary); } /* Override Bootstrap margin-end classes for RTL */ [dir="rtl"] .me-1 { margin-right: 0 !important; margin-left: 0.25rem !important; } [dir="rtl"] .me-2 { margin-right: 0 !important; margin-left: 0.5rem !important; } [dir="rtl"] .me-3 { margin-right: 0 !important; margin-left: 1rem !important; } [dir="rtl"] .ms-1 { margin-left: 0 !important; margin-right: 0.25rem !important; } [dir="rtl"] .ms-2 { margin-left: 0 !important; margin-right: 0.5rem !important; } [dir="rtl"] .ms-3 { margin-left: 0 !important; margin-right: 1rem !important; } /* RTL Layout Adjustments */ [dir="rtl"] .unit-details { direction: rtl; } [dir="rtl"] .header { text-align: right; } [dir="rtl"] .header .col-md-4 { text-align: left !important; } /* RTL Icon Positioning */ [dir="rtl"] .filter-title i, [dir="rtl"] .form-label i { margin-right: 0 !important; margin-left: 0.5rem !important; } /* Force all icons in RTL to flip */ [dir="rtl"] i.fa, [dir="rtl"] i.fas, [dir="rtl"] i.far, [dir="rtl"] i.fab { margin-right: 0 !important; } [dir="rtl"] .filter-title, [dir="rtl"] .form-label { display: flex; flex-direction: row-reverse; align-items: center; justify-content: flex-end; text-align: right; } [dir="rtl"] .unit-detail-item { flex-direction: row-reverse !important; justify-content: flex-start; } [dir="rtl"] .unit-detail-item i { margin-right: 0 !important; margin-left: 0.5rem !important; } [dir="rtl"] .unit-detail-item span { text-align: right; } [dir="rtl"] .contact-buttons-container { flex-direction: row-reverse; } [dir="rtl"] .btn-login { flex-direction: row-reverse; } [dir="rtl"] .btn-login i { margin-right: 0; margin-left: 0.5rem; } /* RTL Button Groups */ [dir="rtl"] .btn-filter-action { flex-direction: row-reverse; } [dir="rtl"] .btn-filter-action i { margin-right: 0 !important; margin-left: 0.5rem !important; } [dir="rtl"] .btn-filter-action span { margin: 0 0.5rem; } [dir="rtl"] .filter-header-buttons { flex-direction: row-reverse; } [dir="rtl"] .filter-header { direction: rtl; } /* RTL Carousel Controls */ [dir="rtl"] .carousel-control-prev { left: auto; right: 0; } [dir="rtl"] .carousel-control-next { right: auto; left: 0; } /* RTL Popup */ [dir="rtl"] .leaflet-popup-content-wrapper { text-align: right !important; direction: rtl !important; } [dir="rtl"] .popup-header { text-align: right !important; direction: rtl !important; } [dir="rtl"] .popup-header h5 { display: flex !important; flex-direction: row-reverse !important; align-items: center !important; text-align: right !important; direction: rtl !important; } [dir="rtl"] .popup-header h5 i { margin-right: 0 !important; margin-left: 0.5rem !important; } [dir="rtl"] .popup-body { direction: rtl !important; text-align: right !important; } [dir="rtl"] .popup-info { flex-direction: row-reverse !important; text-align: right !important; direction: rtl !important; display: flex !important; align-items: center !important; } [dir="rtl"] .popup-info i { margin-right: 0 !important; margin-left: 0.5rem !important; } [dir="rtl"] .popup-info span { text-align: right !important; direction: rtl !important; } [dir="rtl"] .popup-btn { text-align: center !important; direction: rtl !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-direction: row-reverse !important; } [dir="rtl"] .popup-btn i { margin-right: 0 !important; margin-left: 0.5rem !important; } [dir="rtl"] .popup-units { direction: rtl !important; text-align: center !important; } [dir="rtl"] .popup-units-count, [dir="rtl"] .popup-units-label { direction: rtl !important; text-align: center !important; } /* RTL Popup Class Override */ .rtl-popup .leaflet-popup-content-wrapper { direction: rtl !important; } .rtl-popup .popup-header, .rtl-popup .popup-body, .rtl-popup .popup-info, .rtl-popup .popup-btn { direction: rtl !important; text-align: right !important; } .rtl-popup .popup-header h5 { flex-direction: row-reverse !important; } .rtl-popup .popup-info { flex-direction: row-reverse !important; } .rtl-popup .popup-btn { flex-direction: row-reverse !important; } /* RTL Empty State */ [dir="rtl"] .empty-state { text-align: center; } /* RTL Amenities Grid */ [dir="rtl"] .amenity-checkbox { text-align: right; } [dir="rtl"] .amenity-checkbox input[type="checkbox"] { margin-right: 0; margin-left: 0.5rem; } /* RTL Language Toggle Position */ [dir="rtl"] .lang-toggle { right: auto; left: 20px; } [dir="rtl"] .theme-toggle { right: auto; left: 150px; } /* RTL Preview Banner */ [dir="rtl"] .preview-banner i { margin-right: 0; margin-left: 0.5rem; } [dir="rtl"] .preview-banner .btn-close-preview { margin-left: 0; margin-right: 1rem; } /* RTL Results Count */ [dir="rtl"] .d-flex.justify-content-between { flex-direction: row-reverse; } /* RTL Map Section Title */ [dir="rtl"] .map-section .d-flex { text-align: right; } [dir="rtl"] .map-section h2 { text-align: right; } [dir="rtl"] .map-section .d-flex.align-items-center { flex-direction: row; } /* RTL Footer */ [dir="rtl"] footer { direction: rtl; } /* RTL Image Count Badge */ [dir="rtl"] .property-image-count { left: auto; right: 10px; } /* RTL Location Icon */ [dir="rtl"] .property-location { flex-direction: row-reverse; } [dir="rtl"] .property-location i { margin-right: 0; margin-left: 0.5rem; } /* RTL Card Alignment */ [dir="rtl"] .unit-card-body { text-align: right; direction: rtl; } [dir="rtl"] .property-card-body { text-align: right; direction: rtl; } [dir="rtl"] .unit-building { direction: rtl; text-align: right; display: flex; flex-direction: row-reverse; align-items: center; justify-content: flex-end; } [dir="rtl"] .unit-building i { margin-right: 0 !important; margin-left: 0.5rem !important; } [dir="rtl"] .unit-detail-item { direction: rtl; text-align: right; } /* RTL Form Controls */ [dir="rtl"] .form-control, [dir="rtl"] .form-select { text-align: right; direction: rtl; background-position: left 0.75rem center !important; } [dir="rtl"] .form-label { text-align: right; direction: rtl; display: block; width: 100%; } /* RTL Filter Section */ [dir="rtl"] .filter-section { direction: rtl; } /* RTL Bootstrap Row Columns */ [dir="rtl"] .row { direction: rtl; } [dir="rtl"] .col, [dir="rtl"] .col-md-3, [dir="rtl"] .col-md-4, [dir="rtl"] .col-md-6, [dir="rtl"] .col-md-8, [dir="rtl"] .col-md-12 { text-align: right; } /* RTL d-flex containers */ [dir="rtl"] .d-flex { direction: rtl; } [dir="rtl"] .align-items-center { direction: rtl; } /* RTL Amenity Badges */ [dir="rtl"] .unit-amenities { flex-direction: row-reverse; } /* RTL Price Labels */ [dir="rtl"] .unit-price, [dir="rtl"] .property-price { text-align: right; } /* Amenities Checkboxes */ .amenities-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; max-height: 200px; overflow-y: auto; padding: 0.75rem; background: var(--light-bg); border: 1px solid var(--border-color); border-radius: 8px; } @media (min-width: 768px) { .amenities-grid { grid-template-columns: repeat(3, 1fr); } } .amenity-checkbox { display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.4rem; cursor: pointer; border-radius: 4px; transition: background 0.2s; margin: 0; } .amenity-checkbox:hover { background: rgba(43, 187, 173, 0.1); } .amenity-checkbox input[type="checkbox"] { cursor: pointer; width: 16px; height: 16px; } .amenity-checkbox span { cursor: pointer; margin: 0; font-size: 0.9rem; user-select: none; flex: 1; } .dark-style[data-style="dark"] .amenities-grid { background-color: var(--surface-2) !important; border-color: var(--line-solid) !important; } .dark-style[data-style="dark"] .amenity-checkbox:hover { background: rgba(43, 187, 173, 0.2); } .dark-style[data-style="dark"] .text-muted { color: rgba(223, 229, 236, 0.7) !important; } /* Language Toggle */ .lang-toggle { position: fixed; top: 20px; right: 20px; z-index: 1040; background: white; border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); padding: 4px; display: flex; gap: 4px; } .lang-toggle button { padding: 0.6rem 1.2rem; border: none; background: transparent; cursor: pointer; font-weight: 600; font-size: 0.875rem; transition: all 0.3s ease; border-radius: 8px; color: #6c757d; min-width: 50px; } .lang-toggle button:hover { background: #f1f4f8; color: #495057; } .lang-toggle button.active { background: linear-gradient(135deg, var(--brand) 0%, #1B5E6B 100%); color: white; box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3); } /* Theme Toggle */ .theme-toggle { position: fixed; top: 20px; right: 150px; z-index: 1040; } .theme-toggle button { width: 46px; height: 46px; border: none; background: linear-gradient(135deg, var(--brand) 0%, #1B5E6B 100%); border-radius: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; color: white; box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3); } .theme-toggle button:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4); } .theme-toggle button:active { transform: translateY(0); } .theme-toggle button i { font-size: 1.2rem; } .dark-style[data-style="dark"] .lang-toggle { background: linear-gradient(135deg, var(--surface) 0%, #3a3f5c 100%); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .dark-style[data-style="dark"] .lang-toggle button { color: var(--text); } .dark-style[data-style="dark"] .lang-toggle button:hover { background: rgba(232, 231, 252, 0.08); color: var(--text); } .dark-style[data-style="dark"] .lang-toggle button.active { background: linear-gradient(135deg, var(--brand) 0%, #1B5E6B 100%); color: white; } .dark-style[data-style="dark"] .theme-toggle button { background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%); box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3); } .dark-style[data-style="dark"] .theme-toggle button:hover { box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4); } [dir="rtl"] .lang-toggle { right: auto; left: 20px; } [dir="rtl"] .theme-toggle { right: auto; left: 150px; } /* Preview Mode Banner */ .preview-banner { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: white; padding: 0.75rem 0; text-align: center; font-weight: 600; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); position: sticky; top: 0; z-index: 1001; } .preview-banner i { margin-right: 0.5rem; } .preview-banner .btn-close-preview { background: rgba(255, 255, 255, 0.2); border: none; color: white; padding: 0.25rem 0.75rem; border-radius: 4px; margin-left: 1rem; cursor: pointer; transition: background 0.3s ease; } .preview-banner .btn-close-preview:hover { background: rgba(255, 255, 255, 0.3); } /* Scale down logo when used as unit fallback image */ .unit-card img.logo-fallback { object-fit: contain; padding: 2rem; background: var(--primary-color) ; } /* Login Button Styles */ .btn-login { background: var(--primary-color); color: white; border: none; padding: 0.5rem 1.5rem; border-radius: 6px; font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; margin-top: 0.5rem; gap: 0.5rem; transition: all 0.3s ease; } .btn-login:hover { background: var(--secondary-color); color: white; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .btn-login i { font-size: 1rem; } .btn-main-store { background: transparent; color: white; border: 2px solid var(--primary-color); padding: 0.5rem 1.5rem; border-radius: 6px; font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; margin-top: 0.5rem; gap: 0.5rem; transition: all 0.3s ease; } .btn-main-store:hover { background: var(--primary-color); color: white; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .btn-main-store i { font-size: 1rem; } /* .dark-style[data-style="dark"] .btn-login { background: #1b7069; } .dark-style[data-style="dark"] .btn-login:hover { background: #6258cc; } */ /* Filter Header */ .filter-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; } .filter-header-buttons { display: flex; gap: 0.75rem; } .btn-filter-action { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: 6px; font-weight: 500; transition: all 0.3s ease; } .btn-advanced-options { background: transparent; border: 1px solid #ddd; color: var(--text-color); } .btn-advanced-options:hover { background: #f1f4f8; border-color: var(--primary-color); color: var(--primary-color); } .btn-hide-map { background: #17a2b8; border: none; color: white; } .btn-hide-map:hover { background: #138496; } .dark-style[data-style="dark"] .btn-advanced-options { border-color: #444; color: #d4d5d7; } .dark-style[data-style="dark"] .btn-advanced-options:hover { background: var(--surface); border-color: #1b7069; color: #1b7069; } @media (max-width: 768px) { .filter-header { flex-direction: column; align-items: flex-start; gap: 1rem; } .filter-header-buttons { width: 100%; flex-direction: column; } [dir="rtl"] .filter-header-buttons { flex-direction: column; } .btn-filter-action { width: 100%; justify-content: center; } } /* ======================================================== MODERN REDESIGN — 21st.dev inspired ======================================================== */ /* --- Sticky Header --- */ .header { background: #fff !important; color: var(--dark-color) !important; padding: 0 !important; box-shadow: 0 1px 0 rgba(0,0,0,0.06), 0 4px 24px rgba(0,0,0,0.04) !important; position: sticky !important; top: 0; z-index: 1000; } .header-inner { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1.25rem; gap: 0.75rem; max-width: 100%; } .header-brand { display: flex; align-items: center; gap: 0.75rem; min-width: 0; } .header .logo { max-height: 36px !important; width: auto; object-fit: contain; flex-shrink: 0; filter: none !important; } .header-logo-icon { width: 36px; height: 36px; background: linear-gradient(135deg, var(--brand) 0%, #1B5E6B 100%); border-radius: 9px; display: flex; align-items: center; justify-content: center; color: white; font-size: 1rem; flex-shrink: 0; } .header-title-group { min-width: 0; } .header h1 { font-size: 1.05rem !important; font-weight: 700 !important; color: var(--dark-color) !important; margin: 0 !important; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .header p { font-size: 0.71rem !important; color: var(--secondary-color) !important; margin: 0 !important; opacity: 0.8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .header-accent-bar { height: 2px; background: linear-gradient(90deg, var(--brand) 0%, #1B5E6B 50%, transparent 100%); } .header-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; } /* Pill language toggle inside header */ .lang-pills { display: flex; background: var(--light-bg); border-radius: 20px; padding: 3px; gap: 2px; } .lang-pill { padding: 0.28rem 0.7rem; border: none; background: transparent; border-radius: 14px; font-size: 0.76rem; font-weight: 600; cursor: pointer; transition: all 0.2s ease; color: var(--secondary-color); line-height: 1.3; } .lang-pill.active { background: linear-gradient(135deg, var(--brand) 0%, #1B5E6B 100%); color: white; box-shadow: 0 2px 6px rgba(43,187,173,0.35); } /* Theme button in header */ .header-theme-btn { width: 34px; height: 34px; border: none; background: var(--light-bg); border-radius: 9px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; color: var(--secondary-color); font-size: 0.875rem; } .header-theme-btn:hover { background: linear-gradient(135deg, var(--brand) 0%, #1B5E6B 100%); color: white; } /* Override login/store buttons */ .btn-login { background: linear-gradient(135deg, var(--brand) 0%, #1B5E6B 100%) !important; color: white !important; border: none !important; padding: 0.38rem 0.9rem !important; border-radius: 9px !important; font-weight: 500 !important; font-size: 0.82rem !important; text-decoration: none; display: inline-flex !important; align-items: center; gap: 0.375rem; transition: all 0.2s ease; margin-top: 0 !important; white-space: nowrap; } .btn-login:hover { opacity: 0.9; transform: translateY(-1px) !important; box-shadow: 0 4px 12px rgba(43,187,173,0.3) !important; color: white !important; } .btn-main-store { background: transparent !important; color: var(--secondary-color) !important; border: 1.5px solid var(--border-color) !important; padding: 0.34rem 0.85rem !important; border-radius: 9px !important; font-weight: 500 !important; font-size: 0.82rem !important; text-decoration: none; display: inline-flex !important; align-items: center; gap: 0.375rem; transition: all 0.2s ease; margin-top: 0 !important; white-space: nowrap; } .btn-main-store:hover { border-color: var(--primary-color) !important; color: var(--primary-color) !important; transform: translateY(-1px) !important; } /* Hide old fixed floating toggles */ .lang-toggle, .theme-toggle { display: none !important; } /* Dark mode header */ .dark-style[data-style="dark"] .header { background: var(--surface) !important; box-shadow: 0 1px 0 rgba(0,0,0,0.3), 0 4px 24px rgba(0,0,0,0.15) !important; } .dark-style[data-style="dark"] .lang-pills { background: rgba(255,255,255,0.07); } .dark-style[data-style="dark"] .lang-pill { color: var(--text); } .dark-style[data-style="dark"] .lang-pill:hover:not(.active) { color: #ffffff; background: rgba(255,255,255,0.1); } .dark-style[data-style="dark"] .lang-pill.active { color: #ffffff; } .dark-style[data-style="dark"] .header-theme-btn { background: rgba(255,255,255,0.07); color: var(--text-dim); } .dark-style[data-style="dark"] .header-theme-btn:hover { background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%); color: white; } .dark-style[data-style="dark"] .header-logo-icon { box-shadow: 0 2px 8px rgba(43,187,173,0.3); } .dark-style[data-style="dark"] .btn-main-store { border-color: var(--line-solid) !important; color: var(--text-dim) !important; } .dark-style[data-style="dark"] .btn-main-store:hover { border-color: var(--primary-color) !important; color: var(--primary-color) !important; } /* RTL header — let dir="rtl" mirror flex; only align text */ [dir="rtl"] .header-title-group { text-align: right; } [dir="ltr"] .header-title-group { text-align: left; } /* Mobile header */ @media (max-width: 640px) { .header-inner { padding: 0.625rem 0.875rem; gap: 0.375rem; } .header-brand { gap: 0.5rem; min-width: 0; flex: 1; } .header .logo { max-height: 28px !important; } .header-logo-icon { width: 28px; height: 28px; font-size: 0.85rem; } .header-title-group { min-width: 0; flex: 1; } .header h1 { font-size: 0.82rem !important; line-height: 1.2; } .header p { font-size: 0.62rem !important; line-height: 1.2; opacity: 0.85; } .btn-login span.d-none, .btn-main-store span.d-none { display: none !important; } .btn-login, .btn-main-store { padding: 0.38rem 0.6rem !important; } .lang-pill { padding: 0.25rem 0.55rem; font-size: 0.72rem; } } /* --- Filter Section Redesign --- */ .filter-section { background: white !important; border-radius: 16px !important; box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.05) !important; padding: 0 !important; margin-bottom: 1.5rem !important; border: 1px solid rgba(0,0,0,0.05) !important; overflow: visible !important; } /* Filter section header (mirrors map-section-header) */ .filter-section-header { display: flex; align-items: center; justify-content: space-between; padding: 0.875rem 1.125rem; border-bottom: 1px solid var(--border-color); cursor: pointer; } .filter-section-header-left { display: flex; align-items: center; gap: 0.625rem; } .filter-icon-badge { width: 32px; height: 32px; background: linear-gradient(135deg, var(--brand) 0%, #1B5E6B 100%); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: white; font-size: 0.78rem; flex-shrink: 0; } .filter-section .filter-title { font-size: 0.9rem !important; font-weight: 600 !important; margin: 0 !important; } .filter-section-collapse-btn { width: 28px; height: 28px; border: none; background: var(--light-bg); border-radius: 7px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--secondary-color); font-size: 0.72rem; transition: all 0.2s ease; flex-shrink: 0; } .filter-section-collapse-btn:hover { background: var(--primary-color); color: white; } /* When filter body is hidden, remove bottom border from header */ .filter-section:has(.filter-body[style*="display: none"]) .filter-section-header, .filter-section:has(.filter-body[style*="display:none"]) .filter-section-header { border-radius: 0 0 14px 14px; border-bottom: none; } /* Filter body padding */ .filter-body { padding: 1.125rem; overflow: visible; } .filter-basic-row, .filter-advanced-area, .filter-advanced-area .row { overflow: visible; position: relative; } /* Fixed dropdown panel escapes overflow containers */ .cs-panel.cs-panel-fixed { position: fixed !important; z-index: 9999 !important; right: auto !important; max-height: 240px; display: flex !important; flex-direction: column; overflow: hidden; } .cs-panel.cs-panel-fixed .cs-panel-scroll { max-height: 240px; } /* Filter top action pill bar */ .filter-top-bar { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; } /* Pill-style action buttons */ .btn-filter-pill { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.48rem 0.95rem; border-radius: 20px; font-size: 0.8rem; font-weight: 500; cursor: pointer; transition: all 0.2s ease; border: 1.5px solid var(--border-color); background: white; color: var(--secondary-color); white-space: nowrap; flex-shrink: 0; line-height: 1.3; } .btn-filter-pill:hover { border-color: var(--primary-color); color: var(--primary-color); } .btn-filter-pill.filter-expanded { background: linear-gradient(135deg, var(--brand) 0%, #1B5E6B 100%); border-color: transparent; color: white; } .btn-filter-pill.map-pill { border-color: rgba(6,182,212,0.4); color: #0891b2; } .btn-filter-pill.map-pill:hover { background: rgba(6,182,212,0.06); border-color: #0891b2; } .btn-filter-pill.map-pill.map-hidden { background: #0891b2; border-color: #0891b2; color: white; } .btn-filter-pill.reset-pill { border-color: rgba(239,68,68,0.3); color: #ef4444; } .btn-filter-pill.reset-pill:hover { background: rgba(239,68,68,0.06); border-color: #ef4444; } /* Compact form controls */ .filter-section .form-control { border-radius: 10px !important; font-size: 0.875rem !important; border-color: var(--border-color) !important; background-color: var(--light-bg) !important; padding: 0.5rem 0.75rem !important; } .filter-section .form-label { font-size: 0.76rem !important; font-weight: 600 !important; color: var(--secondary-color) !important; margin-bottom: 0.3rem !important; text-transform: uppercase; letter-spacing: 0.03em; } /* --- Custom Dropdown Wrapper --- */ .custom-select-wrap { position: relative; } .custom-select-wrap .cs-display { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.75rem; border-radius: 10px; border: 1.5px solid var(--border-color); background: var(--light-bg); font-size: 0.875rem; cursor: pointer; user-select: none; transition: border-color 0.18s, box-shadow 0.18s; gap: 0.5rem; min-height: 38px; color: var(--dark-color); } .custom-select-wrap .cs-display:hover { border-color: var(--primary-color); } .custom-select-wrap .cs-display.open { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(43,187,173,0.12); } .cs-display-left { display: flex; align-items: center; gap: 0.45rem; min-width: 0; flex: 1; } .cs-display-left .cs-icon { color: var(--primary-color); font-size: 0.8rem; flex-shrink: 0; } .cs-display-left .cs-value { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; } .cs-chevron { color: var(--secondary-color); font-size: 0.72rem; transition: transform 0.22s ease; flex-shrink: 0; } .cs-display.open .cs-chevron { transform: rotate(180deg); } /* Dropdown Panel */ .cs-panel { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: white; border-radius: 12px; border: 1.5px solid var(--border-color); box-shadow: 0 8px 28px rgba(0,0,0,0.1), 0 2px 8px rgba(0,0,0,0.06); z-index: 1050; overflow: hidden; max-height: 220px; display: none; flex-direction: column; } .cs-panel.open { display: flex; } .cs-panel-scroll { overflow-y: auto !important; overflow-x: hidden; max-height: 220px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; flex: 1; min-height: 0; touch-action: pan-y; } /* Custom scrollbar inside dropdown */ .cs-panel-scroll::-webkit-scrollbar { width: 4px; } .cs-panel-scroll::-webkit-scrollbar-track { background: transparent; } .cs-panel-scroll::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; } .cs-panel-scroll::-webkit-scrollbar-thumb:hover { background: var(--primary-color); } .cs-option { display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.875rem; font-size: 0.875rem; cursor: pointer; transition: background 0.14s; color: var(--dark-color); } .cs-option:hover { background: rgba(43,187,173,0.07); } .cs-option.selected { background: rgba(43,187,173,0.1); color: var(--primary-color); font-weight: 600; } .cs-option .cs-opt-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--primary-color); opacity: 0; flex-shrink: 0; transition: opacity 0.14s; } .cs-option.selected .cs-opt-dot { opacity: 1; } /* Divider line between first option and rest */ .cs-option:first-child { border-bottom: 1px solid var(--border-color); color: var(--secondary-color); font-weight: 400; } .cs-option:first-child .cs-opt-dot { display: none; } /* Hide the real