/* ================================================================ PropHyper v1.0.0 — Default Theme CSS Light mode default. Dark via [data-theme="dark"] on . All colours via CSS custom properties. ================================================================ */ /* ---- 1. CUSTOM PROPERTIES (light default) ---- */ :root { --bg: #ffffff; --bg2: #f8f7f5; --bg3: #f1efe8; --surface: #ffffff; --accent: #185FA5; --accent-h: #0C447C; --accent-light: #E6F1FB; --accent-text: #0C447C; --green: #1D9E75; --green-light: #E1F5EE; --green-text: #085041; --amber: #BA7517; --amber-light: #FAEEDA; --amber-text: #633806; --red: #A32D2D; --red-light: #FCEBEB; --red-text: #791F1F; --text: #1a1a18; --text2: #5f5e5a; --text3: #888780; --border: rgba(0,0,0,.10); --border2: rgba(0,0,0,.18); --radius: 8px; --radius-lg: 12px; --radius-xl: 16px; --header-h: 56px; --font: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --font-mono: "SF Mono","Fira Code","Courier New",monospace; } /* ---- 2. DARK MODE ---- */ [data-theme="dark"] { --bg: #141413; --bg2: #1e1e1c; --bg3: #252523; --surface: #1e1e1c; --accent: #5BA4E6; --accent-h: #85B7EB; --accent-light: #0c2a44; --accent-text: #85B7EB; --green: #5DCAA5; --green-light: #0a2a20; --green-text: #9FE1CB; --amber: #EF9F27; --amber-light: #2a1e08; --amber-text: #FAC775; --red: #E24B4A; --red-light: #2a0f0f; --red-text: #F09595; --text: #f0efec; --text2: #b4b2a9; --text3: #888780; --border: rgba(255,255,255,.10); --border2: rgba(255,255,255,.18); } /* ---- 3. RESET ---- */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;font-size:16px} body{font-family:var(--font);background:var(--bg2);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased;min-height:100vh} a{color:var(--accent);text-decoration:none} a:hover{color:var(--accent-h)} img{max-width:100%;height:auto;display:block} ul{list-style:none} button,input,select,textarea{font-family:var(--font)} /* ---- 4. LAYOUT ---- */ .container{max-width:1160px;margin:0 auto;padding:0 20px} .container-sm{max-width:760px;margin:0 auto;padding:0 20px} .container-xs{max-width:520px;margin:0 auto;padding:0 20px} /* ---- 5. HEADER ---- */ .site-header{position:sticky;top:0;z-index:100;background:var(--surface);border-bottom:.5px solid var(--border);height:var(--header-h)} .header-inner{display:flex;align-items:center;gap:16px;height:var(--header-h)} .logo{display:flex;align-items:center;font-size:20px;font-weight:700;flex-shrink:0;letter-spacing:-.5px} .logo-primary{color:var(--accent)} .logo-accent{color:var(--green)} .main-nav{display:flex;align-items:center;gap:2px;margin-left:8px} .nav-link{font-size:14px;color:var(--text2);padding:6px 10px;border-radius:var(--radius);transition:background .15s,color .15s} .nav-link:hover,.nav-link.active{background:var(--bg3);color:var(--text)} .header-actions{display:flex;align-items:center;gap:8px;margin-left:auto} /* Theme toggle */ .theme-toggle{width:36px;height:36px;border-radius:var(--radius);border:.5px solid var(--border);background:transparent;color:var(--text2);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s} .theme-toggle:hover{background:var(--bg3)} [data-theme="light"] .icon-moon{display:none} [data-theme="dark"] .icon-sun{display:none} /* Buttons */ .btn-primary{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;background:var(--accent);color:#fff;border:none;border-radius:var(--radius);font-size:14px;font-weight:500;cursor:pointer;transition:background .15s;text-decoration:none} .btn-primary:hover{background:var(--accent-h);color:#fff} .btn-primary:active{transform:scale(.98)} .btn-ghost{padding:7px 14px;border:.5px solid var(--border2);background:transparent;color:var(--text);border-radius:var(--radius);font-size:14px;cursor:pointer;transition:background .15s;display:inline-flex;align-items:center;text-decoration:none} .btn-ghost:hover{background:var(--bg3);color:var(--text)} .btn-wa{width:100%;padding:9px;background:#25D366;color:#fff;border:none;border-radius:var(--radius);font-size:14px;font-weight:500;cursor:pointer;display:block;text-align:center;text-decoration:none} .btn-full{width:100%;padding:10px;background:var(--accent);color:#fff;border:none;border-radius:var(--radius);font-size:14px;font-weight:500;cursor:pointer;margin-bottom:6px;display:block;text-align:center} .btn-outline{width:100%;padding:9px;background:transparent;color:var(--accent);border:1px solid var(--accent);border-radius:var(--radius);font-size:14px;cursor:pointer;margin-bottom:6px;display:block;text-align:center} /* User dropdown */ .user-avatar-btn{width:34px;height:34px;border-radius:50%;background:var(--accent-light);color:var(--accent-text);border:.5px solid var(--accent);font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;cursor:pointer} .user-menu-wrap{position:relative} .user-dropdown{display:none;position:absolute;right:0;top:calc(100% + 6px);background:var(--surface);border:.5px solid var(--border2);border-radius:var(--radius-lg);min-width:180px;padding:6px 0;z-index:200;box-shadow:0 4px 20px rgba(0,0,0,.12)} .user-menu-wrap:hover .user-dropdown,.user-menu-wrap:focus-within .user-dropdown{display:block} .user-dropdown li a{display:block;padding:8px 16px;font-size:13px;color:var(--text)} .user-dropdown li a:hover{background:var(--bg3)} .dropdown-name{display:block;padding:8px 16px;font-size:12px;color:var(--text3);font-weight:500} .dropdown-divider{height:.5px;background:var(--border);margin:4px 0} .notif-badge{background:var(--red);color:#fff;border-radius:999px;font-size:11px;font-weight:700;padding:2px 7px;min-width:20px;text-align:center} /* Mobile nav */ .mobile-menu-btn{display:none;flex-direction:column;gap:5px;background:transparent;border:none;padding:6px;cursor:pointer} .mobile-menu-btn span{display:block;width:22px;height:1.5px;background:var(--text);border-radius:2px} .mobile-nav{display:none;background:var(--surface);border-top:.5px solid var(--border);padding:12px 20px;flex-direction:column;gap:2px} .mobile-nav.open{display:flex} .mobile-nav a{display:block;padding:10px 4px;font-size:15px;color:var(--text2);border-bottom:.5px solid var(--border)} .mobile-nav .mobile-cta{color:var(--accent);font-weight:500} /* ---- 6. FORMS ---- */ .form-group{display:flex;flex-direction:column;gap:5px;margin-bottom:14px} .form-group label{font-size:13px;font-weight:500;color:var(--text2)} .form-label-sm{font-size:11px;text-transform:uppercase;letter-spacing:.5px;font-weight:700;color:var(--text3)} input[type="text"],input[type="email"],input[type="password"],input[type="number"],input[type="tel"],input[type="search"],input[type="url"],select,textarea{width:100%;height:40px;border:.5px solid var(--border2);border-radius:var(--radius);padding:0 12px;font-size:14px;background:var(--bg2);color:var(--text);transition:border-color .15s,box-shadow .15s;appearance:none} textarea{height:auto;padding:10px 12px;resize:vertical;line-height:1.6} select{background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:30px} input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(24,95,165,.12);background:var(--surface)} input::placeholder,textarea::placeholder{color:var(--text3)} .form-hint{font-size:11px;color:var(--text3);margin-top:3px} .form-error{font-size:12px;color:var(--red);margin-top:3px} /* Pill group */ .pill-group{display:flex;flex-wrap:wrap;gap:6px} .pill-btn{padding:6px 14px;border:.5px solid var(--border2);border-radius:999px;font-size:13px;background:transparent;color:var(--text2);cursor:pointer;transition:all .15s} .pill-btn:hover{border-color:var(--accent);color:var(--accent)} .pill-btn.selected{background:var(--accent-light);border-color:var(--accent);color:var(--accent-text);font-weight:500} /* Captcha */ .captcha-block{display:flex;align-items:center;gap:12px;background:var(--bg3);border:.5px solid var(--border);border-radius:var(--radius);padding:10px 14px} .captcha-img{width:110px;height:40px;background:var(--accent-light);border-radius:6px;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:18px;letter-spacing:5px;color:var(--accent-text);font-weight:700;user-select:none;flex-shrink:0;border:.5px solid var(--accent)} /* Upload zone */ .upload-zone{border:1.5px dashed var(--border2);border-radius:var(--radius-lg);padding:32px 20px;text-align:center;cursor:pointer;background:var(--bg2);color:var(--text2);transition:border-color .15s} .upload-zone:hover{border-color:var(--accent);background:var(--accent-light)} /* ---- 7. CARDS ---- */ .card{background:var(--surface);border:.5px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;transition:border-color .15s} .card:hover{border-color:var(--border2)} .card-body{padding:14px} /* Property grid card */ .prop-card{background:var(--surface);border:.5px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;cursor:pointer;transition:border-color .15s} .prop-card:hover{border-color:var(--accent)} .pc-img{height:160px;background:var(--bg3);position:relative;overflow:hidden} .pc-img img{width:100%;height:100%;object-fit:cover} .pc-body{padding:12px 14px} .pc-price{font-size:17px;font-weight:700;color:var(--accent)} .pc-title{font-size:14px;font-weight:500;margin:2px 0} .pc-loc{font-size:12px;color:var(--text2);margin-bottom:8px} .pc-meta{display:flex;gap:6px;flex-wrap:wrap;border-top:.5px solid var(--border);padding-top:8px} /* Listing list card */ .listing-card{background:var(--surface);border:.5px solid var(--border);border-radius:var(--radius-lg);display:grid;grid-template-columns:200px 1fr auto;overflow:hidden;cursor:pointer;transition:border-color .15s} .listing-card:hover{border-color:var(--accent)} .lc-img{position:relative;background:var(--bg3);min-height:140px} .lc-body{padding:14px 16px;display:flex;flex-direction:column;gap:5px} .lc-price{font-size:19px;font-weight:700;color:var(--accent)} .lc-title{font-size:15px;font-weight:500} .lc-loc{font-size:13px;color:var(--text2);display:flex;align-items:center;gap:4px} .lc-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px} .lc-desc{font-size:13px;color:var(--text2);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:4px} .lc-actions{padding:14px;display:flex;flex-direction:column;gap:8px;align-items:flex-end;justify-content:space-between;min-width:110px} .lc-time{font-size:11px;color:var(--text3)} /* Meta chips */ .meta-chip{font-size:11px;background:var(--bg3);padding:3px 9px;border-radius:999px;color:var(--text2)} /* Badges */ .badge{display:inline-block;font-size:11px;font-weight:500;padding:2px 9px;border-radius:999px} .badge-buy{background:var(--accent-light);color:var(--accent-text)} .badge-rent{background:var(--green-light);color:var(--green-text)} .badge-sell{background:var(--amber-light);color:var(--amber-text)} .badge-owner{background:var(--amber-light);color:var(--amber-text)} .badge-agent{background:var(--bg3);color:var(--text2)} .badge-builder{background:var(--accent-light);color:var(--accent-text)} .badge-active{background:var(--green-light);color:var(--green-text)} .badge-pending{background:var(--amber-light);color:var(--amber-text)} .badge-expired{background:var(--red-light);color:var(--red-text)} .badge-featured{background:#FAEEDA;color:#633806} /* ---- 8. HERO / SEARCH ---- */ .hero-section{background:#0C447C;padding:48px 0 0} [data-theme="dark"] .hero-section{background:#0a2d50} .hero-inner{max-width:820px;margin:0 auto;text-align:center;padding:0 20px} .hero-inner h1{font-size:28px;font-weight:700;color:#fff;line-height:1.3;margin-bottom:10px} .hero-inner p{font-size:15px;color:#B5D4F4;margin-bottom:28px} .search-tabs{display:flex;gap:2px;justify-content:center;margin-bottom:0} .search-tab{padding:9px 20px;border-radius:var(--radius) var(--radius) 0 0;border:none;background:rgba(255,255,255,.12);color:#B5D4F4;font-size:14px;font-weight:500;cursor:pointer;transition:background .15s} .search-tab.active{background:var(--bg);color:var(--accent)} .search-box{background:var(--surface);border-radius:0 0 var(--radius-lg) var(--radius-lg);padding:20px} .search-main-row{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:12px;align-items:end} .search-field{display:flex;flex-direction:column;gap:5px} .search-field label{font-size:11px;text-transform:uppercase;letter-spacing:.5px;font-weight:700;color:var(--text3)} .search-btn{height:40px;padding:0 24px;background:var(--accent);color:#fff;border:none;border-radius:var(--radius);font-size:15px;font-weight:500;cursor:pointer;white-space:nowrap;transition:background .15s} .search-btn:hover{background:var(--accent-h)} .search-extra{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:.5px solid var(--border)} .search-extra label{font-size:13px;color:var(--text2);display:flex;align-items:center;gap:5px;cursor:pointer} .search-extra input[type="radio"]{width:auto;height:auto} .search-more-link{margin-left:auto;font-size:13px;color:var(--accent);cursor:pointer} /* ---- 9. SEARCH RESULTS ---- */ .results-layout{display:grid;grid-template-columns:240px 1fr;gap:16px;align-items:start} .filters-sidebar{position:sticky;top:calc(var(--header-h) + 12px)} .filter-box{background:var(--surface);border:.5px solid var(--border);border-radius:var(--radius-lg);padding:16px;margin-bottom:12px} .filter-box h3{font-size:13px;font-weight:600;margin-bottom:10px} .filter-opts{display:flex;flex-direction:column;gap:7px} .filter-opts label{font-size:13px;color:var(--text2);display:flex;align-items:center;gap:7px;cursor:pointer} .filter-opts label input{width:auto;height:auto} .results-main{display:flex;flex-direction:column;gap:10px} .results-bar{background:var(--surface);border:.5px solid var(--border);border-radius:var(--radius-lg);padding:10px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px} .results-count{font-size:14px;font-weight:500} .results-count span{font-weight:400;color:var(--text2)} .sort-row{display:flex;align-items:center;gap:10px} .ad-infeed{background:var(--bg3);border:.5px dashed var(--border2);border-radius:var(--radius);min-height:60px;display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--text3)} .ad-wrap{padding:8px 0} /* ---- 10. DETAIL PAGE ---- */ .detail-layout{display:grid;grid-template-columns:1fr 320px;gap:16px;align-items:start} .detail-sidebar{position:sticky;top:calc(var(--header-h) + 12px)} .gallery{background:var(--surface);border:.5px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:14px} .gallery-main{position:relative;background:var(--bg3);overflow:hidden} .gallery-count{position:absolute;bottom:12px;right:12px;background:rgba(0,0,0,.55);color:#fff;font-size:12px;padding:4px 10px;border-radius:999px} .gallery-thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;padding:8px} .gallery-thumb{height:60px;border-radius:6px;background:var(--bg3);overflow:hidden;cursor:pointer} .gallery-thumb img{width:100%;height:100%;object-fit:cover} .detail-section{background:var(--surface);border:.5px solid var(--border);border-radius:var(--radius-lg);padding:18px;margin-bottom:14px} .detail-section h2{font-size:16px;font-weight:600;margin-bottom:14px;padding-bottom:10px;border-bottom:.5px solid var(--border)} .price-row{display:flex;align-items:baseline;gap:10px;margin-bottom:6px} .price-big{font-size:26px;font-weight:700;color:var(--accent)} .price-sqft{font-size:14px;color:var(--text2)} .specs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px} .spec-item{background:var(--bg2);padding:10px 12px;border-radius:var(--radius)} .spec-item .sl{font-size:11px;color:var(--text3);margin-bottom:3px} .spec-item .sv{font-size:14px;font-weight:600} .amenities-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} .amenity-item{font-size:13px;color:var(--text2);display:flex;align-items:center;gap:7px} .amenity-dot{width:7px;height:7px;border-radius:50%;background:var(--green);flex-shrink:0} .map-area{border-radius:var(--radius);overflow:hidden} .contact-card{background:var(--surface);border:.5px solid var(--border);border-radius:var(--radius-lg);padding:18px;margin-bottom:12px} .contact-card h3{font-size:15px;font-weight:600;margin-bottom:14px} .owner-row{display:flex;align-items:center;gap:12px;margin-bottom:14px;padding-bottom:14px;border-bottom:.5px solid var(--border)} .avatar{width:42px;height:42px;border-radius:50%;background:var(--accent-light);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;color:var(--accent-text);flex-shrink:0} .emi-box{background:var(--surface);border:.5px solid var(--border);border-radius:var(--radius-lg);padding:16px;margin-bottom:12px} .emi-box h3{font-size:14px;font-weight:600;margin-bottom:12px} .emi-result{font-size:22px;font-weight:700;color:var(--accent);margin:4px 0 2px} .emi-note{font-size:11px;color:var(--text3)} /* ---- 11. PAGINATION ---- */ .pagination{display:flex;justify-content:center;padding:8px 0} .pagination ul{display:flex;gap:4px;align-items:center} .pagination li a,.pagination li span{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:.5px solid var(--border2);border-radius:var(--radius);font-size:14px;color:var(--text2);background:var(--surface);transition:all .15s} .pagination li a:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-light)} .pagination li.active span{background:var(--accent);color:#fff;border-color:var(--accent)} .pagination li.dots a{border:none;background:transparent;cursor:default} /* ---- 12. BREADCRUMB ---- */ .breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:13px;color:var(--text3);padding:12px 0} .breadcrumb a{color:var(--text2)} .breadcrumb a:hover{color:var(--accent)} .breadcrumb-sep{color:var(--text3)} /* ---- 13. TOAST ---- */ .toast-container{position:fixed;bottom:20px;right:20px;display:flex;flex-direction:column;gap:10px;z-index:9999;pointer-events:none} .toast{max-width:340px;padding:12px 16px;border-radius:var(--radius-lg);font-size:14px;font-weight:500;background:var(--surface);border:.5px solid var(--border2);pointer-events:all;box-shadow:0 4px 20px rgba(0,0,0,.12);display:flex;gap:10px;align-items:flex-start;animation:toastIn .25s ease} .toast.success{border-left:3px solid var(--green)} .toast.error{border-left:3px solid var(--red)} .toast.info{border-left:3px solid var(--accent)} @keyframes toastIn{from{opacity:0;transform:translateY(12px)}} /* ---- 14. ADMIN ---- */ .admin-shell{display:grid;grid-template-columns:220px 1fr;min-height:100vh} .admin-sidebar{background:var(--bg2);border-right:.5px solid var(--border);position:sticky;top:0;height:100vh;overflow-y:auto;display:flex;flex-direction:column} .admin-logo{padding:16px;border-bottom:.5px solid var(--border);font-size:16px;font-weight:700;flex-shrink:0} .admin-nav-section{padding:10px 0;flex-shrink:0} .admin-nav-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--text3);padding:0 16px 6px} .admin-nav-item{display:flex;align-items:center;gap:10px;padding:8px 16px;font-size:13px;color:var(--text2);border-left:2.5px solid transparent;cursor:pointer;transition:all .15s;text-decoration:none} .admin-nav-item:hover{background:var(--bg3);color:var(--text)} .admin-nav-item.active{background:var(--accent-light);color:var(--accent);border-left-color:var(--accent);font-weight:500} .admin-main{display:flex;flex-direction:column;min-height:100vh;background:var(--bg2)} .admin-topbar{background:var(--surface);border-bottom:.5px solid var(--border);padding:12px 24px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:50} .admin-content{padding:20px 24px;flex:1} .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px} .stat-card{background:var(--surface);border:.5px solid var(--border);border-radius:var(--radius-lg);padding:16px} .stat-card .sl{font-size:12px;color:var(--text3);margin-bottom:6px;font-weight:500} .stat-card .sv{font-size:24px;font-weight:700} .stat-card .sd{font-size:12px;color:var(--text3);margin-top:4px} .stat-card .up{color:var(--green)} .stat-card .dn{color:var(--red)} .panel{background:var(--surface);border:.5px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:16px} .panel-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:.5px solid var(--border)} .panel-head h2{font-size:14px;font-weight:600} .admin-table{width:100%;border-collapse:collapse;font-size:13px} .admin-table th{text-align:left;padding:8px 14px;color:var(--text3);font-weight:600;background:var(--bg2);border-bottom:.5px solid var(--border);font-size:12px} .admin-table td{padding:10px 14px;border-bottom:.5px solid var(--border)} .admin-table tr:last-child td{border-bottom:none} .admin-table tr:hover td{background:var(--bg2)} .toggle-switch{position:relative;display:inline-block;width:38px;height:22px} .toggle-switch input{opacity:0;width:0;height:0} .toggle-slider{position:absolute;inset:0;background:var(--bg3);border-radius:22px;border:.5px solid var(--border2);cursor:pointer;transition:background .2s} .toggle-slider::after{content:'';position:absolute;width:16px;height:16px;left:2px;top:2px;background:var(--text3);border-radius:50%;transition:transform .2s,background .2s} .toggle-switch input:checked + .toggle-slider{background:var(--green);border-color:var(--green)} .toggle-switch input:checked + .toggle-slider::after{transform:translateX(16px);background:#fff} /* ---- 15. FOOTER ---- */ .site-footer{background:var(--surface);border-top:.5px solid var(--border);padding:40px 0 0;margin-top:48px} .footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px;margin-bottom:32px} .footer-brand .logo{margin-bottom:10px;font-size:22px} .footer-tagline{font-size:14px;color:var(--text2);margin-bottom:4px;line-height:1.5} .footer-sub{font-size:13px;color:var(--text3)} .footer-col h3{font-size:13px;font-weight:700;color:var(--text);margin-bottom:12px;text-transform:uppercase;letter-spacing:.5px} .footer-col ul{display:flex;flex-direction:column;gap:8px} .footer-col ul li a{font-size:14px;color:var(--text2)} .footer-col ul li a:hover{color:var(--accent)} .footer-bottom{border-top:.5px solid var(--border);padding:16px 0;display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--text3);flex-wrap:wrap;gap:8px} .footer-legal{display:flex;gap:16px} .footer-legal a{color:var(--text3)} .footer-legal a:hover{color:var(--accent)} /* ---- 16. UTILITIES ---- */ .text-center{text-align:center} .text-right{text-align:right} .text-muted{color:var(--text2)} .text-accent{color:var(--accent)} .text-sm{font-size:13px} .text-xs{font-size:12px} .fw-500{font-weight:500} .fw-600{font-weight:600} .mt-1{margin-top:8px} .mt-2{margin-top:16px} .mb-1{margin-bottom:8px} .mb-2{margin-bottom:16px} .mb-3{margin-bottom:24px} .p-section{padding:40px 0} .flex-between{display:flex;justify-content:space-between;align-items:center} .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px} .grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px} .grid-4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:16px} .grid-3 > *,.grid-4 > *{min-width:0} .divider{height:.5px;background:var(--border);margin:16px 0} .cms-content h1,.cms-content h2,.cms-content h3{margin:20px 0 10px;font-weight:600} .cms-content p{margin-bottom:14px} .cms-content a{color:var(--accent)} .cms-content ul,.cms-content ol{padding-left:24px;margin-bottom:14px} .cms-content li{margin-bottom:4px} /* ---- 17. RESPONSIVE ---- */ @media(max-width:1024px){ .results-layout{grid-template-columns:200px 1fr} .detail-layout{grid-template-columns:1fr 290px} .footer-grid{grid-template-columns:1fr 1fr;gap:24px} .stats-grid{grid-template-columns:1fr 1fr} } @media(max-width:768px){ .main-nav{display:none} .mobile-menu-btn{display:flex} .results-layout{grid-template-columns:1fr} .filters-sidebar{position:static;display:none} .detail-layout{grid-template-columns:1fr} .detail-sidebar{position:static} .listing-card{grid-template-columns:130px 1fr} .listing-card .lc-actions{display:none} .search-main-row{grid-template-columns:1fr} .hero-inner h1{font-size:22px} .admin-shell{grid-template-columns:1fr} .admin-sidebar{display:none} .stats-grid{grid-template-columns:1fr 1fr} .specs-grid{grid-template-columns:1fr 1fr} .amenities-grid{grid-template-columns:1fr 1fr} .footer-grid{grid-template-columns:1fr} .grid-2,.grid-3,.grid-4{grid-template-columns:1fr} } @media(max-width:480px){ .listing-card{grid-template-columns:1fr;grid-template-rows:180px 1fr} .stats-grid{grid-template-columns:1fr} .specs-grid{grid-template-columns:1fr} }