/* Styles for the Service Areas page. Scoped under .pg-areas so nothing else on the site changes. */
.pg-areas .areas-search { display: block; max-width: 420px; margin: 1.2rem 0 .4rem; }
.pg-areas .areas-search input {
    display: block; width: 100%; margin-top: .35rem; padding: .7rem .9rem;
    background: #0a0a0a; color: inherit; border: 1px solid #333; border-radius: 8px; font: inherit;
}
.pg-areas .areas-search input:focus-visible { outline: 2px solid #F5B427; outline-offset: 2px; }
.pg-areas .chips { margin-bottom: .4rem; }
.pg-areas button.chip { background: transparent; font: inherit; font-size: .85rem; cursor: pointer; border: 1px solid #555; color: #ddd; }
.pg-areas button.chip:hover, .pg-areas button.chip:focus-visible { background: #F5B427; color: #000; border-color: #F5B427; }
.pg-areas a.chip.has-page { border-color: #F5B427; }
.pg-areas .small { font-size: .85rem; }
.pg-areas details.sd { border: 1px solid #2a2a2a; border-radius: 10px; padding: .7rem 1rem; margin: 0 0 .6rem; background: rgba(18, 18, 18, .6); }
.pg-areas details.sd summary { cursor: pointer; font-weight: 700; }
.pg-areas details.sd[open] summary { margin-bottom: .8rem; color: #F5B427; }
.pg-areas .city-group { max-height: none; }