/* Advance Search page -- dedicated filter page linked from the search bar's
   "Advance Search" entry point. Every option list on this page is rendered
   from real data (see storefront/views.py: advanced_search()), so this
   sheet only owns layout/visuals, never content. */

/* Exactly 2 sections filling the viewport below the header -- a scrolling
   filter list and a static Search button -- so the page itself never
   scrolls (no site footer/bottom-nav bleeding in underneath). Scoped via
   body:has() the same way the unit-detail page hides/compacts chrome for
   itself, so nothing here leaks onto any other page. */
body:has(.as-page){overflow:hidden}
body:has(.as-page) .fl-footer,
body:has(.as-page) .mob-nav{display:none}

.as-page{background:#f3f6f5;display:flex;flex-direction:column;height:calc(100vh - var(--header-h, 76px))}

.as-body{flex:1 1 auto;overflow-y:auto;max-width:760px;width:100%;margin:0 auto;padding:16px 14px}

.as-section{background:#fff;border-radius:16px;padding:16px;margin-bottom:14px;box-shadow:0 1px 3px rgba(15,40,38,.06)}
.as-section h2{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-size:15px;font-weight:700;color:#0b3a35}
.as-section h2 i{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:#0a6d63;color:#fff;flex:none}
.as-section h2 i svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.as-chip-row{display:flex;flex-wrap:wrap;gap:10px}
.as-chip{border:1px solid #d8e4e2;background:#f7faf9;color:#274944;border-radius:999px;padding:9px 16px;font-size:13.5px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:.15s ease;line-height:1.2}
.as-chip:hover{border-color:#0a6d63}
.as-chip.is-active{background:#0a6d63;border-color:#0a6d63;color:#fff}
.as-chip svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.as-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.as-tile{border:1px solid #d8e4e2;background:#f7faf9;border-radius:12px;padding:12px 6px;text-align:center;cursor:pointer;font-size:12px;font-weight:600;color:#274944;display:flex;flex-direction:column;align-items:center;gap:6px;transition:.15s ease}
.as-tile svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.as-tile:hover{border-color:#0a6d63}
.as-tile.is-active{background:#0a6d63;border-color:#0a6d63;color:#fff}

.as-budget-inputs{display:flex;gap:12px;margin-bottom:16px}
.as-budget-field{flex:1}
.as-budget-field label{display:block;font-size:11.5px;color:#6c8481;margin-bottom:4px;font-weight:600}
.as-input-wrap{display:flex;align-items:center;background:#f7faf9;border:1px solid #d8e4e2;border-radius:10px;padding:8px 12px}
.as-input-wrap:focus-within{border-color:#0a6d63}
.as-budget-field .as-input-wrap span{color:#6c8481;font-weight:700;margin-right:4px}
.as-input-wrap input{border:0;background:transparent;width:100%;font-size:14px;font-weight:600;color:#0b3a35;outline:none}
.as-budget-field input{border:0;background:transparent;width:100%;font-size:16px;font-weight:700;color:#0b3a35;outline:none}

.as-range{position:relative;height:34px;margin-top:6px}
.as-range input[type=range]{position:absolute;left:0;right:0;top:12px;width:100%;height:4px;background:none;pointer-events:none;-webkit-appearance:none;appearance:none;margin:0}
.as-range input[type=range]::-webkit-slider-thumb{pointer-events:auto;-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#0a6d63;border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.3);cursor:pointer;margin-top:0}
.as-range input[type=range]::-moz-range-thumb{pointer-events:auto;width:18px;height:18px;border-radius:50%;background:#0a6d63;border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.3);cursor:pointer}
.as-range input[type=range]::-webkit-slider-runnable-track{background:transparent}
.as-range-track{position:absolute;left:0;right:0;top:15px;height:4px;border-radius:2px;background:#e1eae8}
.as-range-fill{position:absolute;top:15px;height:4px;border-radius:2px;background:#0a6d63}

.as-select{width:100%;border:1px solid #d8e4e2;background:#f7faf9;border-radius:10px;padding:11px 12px;font-size:14px;font-weight:600;color:#0b3a35;margin-bottom:14px}

.as-area-empty{font-size:12.5px;color:#8aa19d}

.as-footer{flex:0 0 auto;padding:12px 16px;background:#fff;box-shadow:0 -2px 10px rgba(15,40,38,.08)}
.as-search-btn{width:100%;max-width:760px;margin:0 auto;display:flex;align-items:center;justify-content:center;gap:10px;background:linear-gradient(135deg,#0a6d63,#057a7a);color:#fff;border:0;border-radius:12px;padding:14px;font-size:15px;font-weight:700;letter-spacing:.02em;cursor:pointer}
.as-search-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

@media(min-width:640px){.as-grid{grid-template-columns:repeat(6,1fr)}}
@media(max-width:400px){.as-grid{grid-template-columns:repeat(3,1fr)}}