/* v628 - LIST: the Area filter is now self-explanatory.
   Before: a dark pill with a bare location pin; on phones the word "Area" was hidden, so brokers did not know it was a filter.
   Now: soft gold pill = [map+pin icon] [Area] [v]. Once an area is chosen, the pill shows its name on navy.
   Same 30px height as the star / link buttons, so the search bar does not grow. Scoped to .avl-area-btn only. */
.avl-kw .filter-toggle-btn.avl-area-btn{
  --avl-area-bg:#f6ecdf;
  position:relative;display:inline-flex;align-items:center;gap:6px;flex:none;
  height:30px;min-width:0;max-width:140px;padding:0 9px 0 8px!important;
  border:1.5px solid rgba(206,165,119,.62);border-radius:999px;
  background:var(--avl-area-bg);color:var(--navy-900,#0f1f35);
  font-size:11.5px;font-weight:800;letter-spacing:.02em;line-height:1;
  box-shadow:none;cursor:pointer;
  transition:background .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.avl-kw .filter-toggle-btn.avl-area-btn:hover{
  --avl-area-bg:#f1e1cc;border-color:var(--gold-500,#cea577);
  background:var(--avl-area-bg);color:var(--navy-900,#0f1f35);
  box-shadow:0 3px 10px rgba(206,165,119,.35);transform:translateY(-1px);
}
.avl-kw .filter-toggle-btn.avl-area-btn:active{transform:none;}
.avl-kw .filter-toggle-btn.avl-area-btn:focus-visible{outline:2px solid var(--gold-500,#cea577);outline-offset:2px;}

/* icon: folded map outline + gold pin */
.avl-area-btn .avl-area-ico{width:19px;height:19px;flex:none;display:block;overflow:visible;}
.avl-area-btn .avl-area-map{fill:rgba(206,165,119,.18);stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;}
.avl-area-btn .avl-area-fold{fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;opacity:.55;}
.avl-area-btn .avl-area-pin{fill:var(--gold-600,#b8874f);stroke:var(--avl-area-bg);stroke-width:1.1;paint-order:stroke;}
.avl-area-btn .avl-area-dot{fill:var(--avl-area-bg);}

/* label: always visible, also on phones (overrides css/08 rule that hid every .filter-toggle-btn span) */
.avl-kw .filter-toggle-btn.avl-area-btn .avl-area-lbl{
  display:block!important;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.avl-area-btn .avl-area-caret{font-size:8.5px;color:inherit;opacity:.6;flex:none;transition:transform .22s ease;}
.avl-area-btn[aria-expanded="true"] .avl-area-caret{transform:rotate(180deg);}

/* area chosen -> navy pill showing its name */
.avl-kw .filter-toggle-btn.avl-area-btn.has-area{
  --avl-area-bg:var(--navy-800,#162d4c);
  background:var(--navy-800,#162d4c);border-color:var(--navy-800,#162d4c);color:#fff;
}
.avl-kw .filter-toggle-btn.avl-area-btn.has-area:hover{--avl-area-bg:var(--navy-700,#1f3b63);background:var(--navy-700,#1f3b63);border-color:var(--navy-700,#1f3b63);color:#fff;box-shadow:0 3px 10px rgba(22,45,76,.3);}
.avl-area-btn.has-area .avl-area-map{fill:rgba(255,255,255,.1);}
.avl-area-btn.has-area .avl-area-pin{fill:var(--gold-400,#e0bd94);}

/* one-time attention ring until the broker opens it once (class hint-seen is already saved by avlOpenAreaPicker) */
.avl-kw .filter-toggle-btn.avl-area-btn:not(.hint-seen):not(.has-area){animation:avlAreaHint 2.4s ease-out 1s 3;}
@keyframes avlAreaHint{0%{box-shadow:0 0 0 0 rgba(206,165,119,.6);}70%,100%{box-shadow:0 0 0 9px rgba(206,165,119,0);}}

/* dark theme */
[data-theme="dark"] .avl-kw .filter-toggle-btn.avl-area-btn{--avl-area-bg:#2a2f36;background:var(--avl-area-bg);border-color:rgba(206,165,119,.55);color:#f3e6d3;}
[data-theme="dark"] .avl-kw .filter-toggle-btn.avl-area-btn:hover{--avl-area-bg:#343a43;background:var(--avl-area-bg);color:#fff;}
[data-theme="dark"] .avl-area-btn .avl-area-pin{fill:var(--gold-400,#e0bd94);}
[data-theme="dark"] .avl-kw .filter-toggle-btn.avl-area-btn.has-area{--avl-area-bg:var(--gold-500,#cea577);background:var(--gold-500,#cea577);border-color:var(--gold-500,#cea577);color:var(--navy-900,#0f1f35);}
[data-theme="dark"] .avl-area-btn.has-area .avl-area-pin{fill:var(--navy-900,#0f1f35);}
[data-theme="dark"] .avl-area-btn.has-area .avl-area-map{fill:rgba(15,31,53,.12);}

/* narrower phones: shorter name so the search field keeps its room */
@media(max-width:640px){.avl-kw .filter-toggle-btn.avl-area-btn{max-width:104px;gap:5px;}}
@media(max-width:360px){.avl-kw .filter-toggle-btn.avl-area-btn{max-width:88px;padding:0 7px 0 6px!important;}.avl-area-btn .avl-area-ico{width:17px;height:17px;}}

/* popup header: tells the broker what the list is for */
.avl-area-menu-head{display:flex;align-items:center;gap:8px;padding:6px 10px 8px;margin:0 0 2px;border-bottom:1px solid rgba(206,165,119,.4);font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted,#7c8aa0);}
.avl-area-menu-head i{color:var(--gold-500,#cea577);font-size:12px;}

@media(prefers-reduced-motion:reduce){.avl-kw .filter-toggle-btn.avl-area-btn,.avl-area-btn .avl-area-caret{transition:none;}.avl-kw .filter-toggle-btn.avl-area-btn:hover{transform:none;}.avl-kw .filter-toggle-btn.avl-area-btn{animation:none!important;}}