/**
 * IFE ASL Integration — Locator page styles.
 *
 * Task 5.10 — full stylesheet for the consumer-facing locator.
 * Earlier tasks shipped their styles incrementally; this file is the
 * consolidated result, organised per §5.10.3 of the phase 5 doc:
 *
 *   1. Brand tokens
 *   2. View selector            (Task 5.1)
 *   3. Summary text             (Task 5.3 placeholder copy)
 *   4. ASL chrome overrides     (focus rings, list-item hover)
 *   5. Affiliate link CTAs      (Task 5.8)
 *   6. No-results message       (Task 5.6)
 *   7. Marker / infobox polish
 *   8. Mobile responsive        (Task 5.9)
 *
 * Theme posture: the existing CULT+KING locator page renders on a light
 * Avada background, so we keep our chrome neutral (transparent /
 * inherit) and apply the brand gold (#c8a35a) only as an accent. The
 * phase 5 doc speculates a dark theme but flags those values as
 * placeholders to confirm from the live site; until that confirmation
 * lands we deliberately do not paint `.asl-cont` dark — that would
 * invert the working page.
 *
 * Specificity: all IFE-owned selectors are namespaced `.ife-asl-`.
 * ASL chrome overrides are scoped under `#asl-storelocator.asl-cont`
 * or `.asl-cont` so they beat ASL's defaults without `!important`.
 */

/* ========================================= */
/* 1. Brand tokens                            */
/* ========================================= */
:root {
    /* Brand accent — confirmed amber-gold from the live homepage CTA
     * ("Buy BALM" / "Buy TONIK") and the authorized-retailers page
     * buttons. Hover is the same hue, ~10% darker. */
    --ife-gold:        #e7a83d;
    --ife-gold-hover:  #d4961f;
    --ife-gold-soft:   rgba(231, 168, 61, 0.12); /* hover/active wash */
    --ife-gold-focus:  rgba(231, 168, 61, 0.35); /* focus-ring tint   */

    /* Neutrals — picked to read on the live dark Avada background. */
    --ife-page-bg:     #1a1a1a;
    --ife-text:        #f5f5f5;
    --ife-text-muted:  rgba(255, 255, 255, 0.70);
    --ife-surface:     #1f1f1f;                  /* dark card body  */
    --ife-surface-bd:  rgba(255, 255, 255, 0.10); /* dark card border */
    --ife-on-gold:     #ffffff;                  /* text on gold fills */
    --ife-on-light:    #32373c;                  /* text on light surfaces (ASL's standard dark heading) */

    --ife-radius:      4px;
    --ife-radius-lg:   6px;
    --ife-transition:  0.15s ease;

    --ife-space-xs:    6px;
    --ife-space-sm:    8px;
    --ife-space-md:    16px;
    --ife-space-lg:    24px;
    --ife-space-xl:    32px;
}

/* ========================================= */
/* 2. View selector (Task 5.1)                */
/* ========================================= */
.ife-asl-view-selector-wrapper {
    border: 2px solid var(--ife-gold);
    border-radius: var(--ife-radius-lg);
    padding: var(--ife-space-lg);
    margin: 0 auto var(--ife-space-xl);
    max-width: 1100px;
    background: transparent;
}

.ife-asl-view-headline {
    text-align: center;
    margin: 0 0 20px;
    font-size: 22px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ife-asl-view-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ife-space-md);
}

.ife-asl-view-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--ife-space-xs);
    min-height: 96px;
    padding: 18px 16px;
    border: 1px solid var(--ife-gold);
    border-radius: var(--ife-radius);
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    transition:
        background-color var(--ife-transition),
        color var(--ife-transition),
        box-shadow var(--ife-transition);
}

.ife-asl-view-btn:hover {
    background: var(--ife-gold-soft);
}

.ife-asl-view-btn:focus-visible {
    outline: 2px solid var(--ife-gold);
    outline-offset: 2px;
}

.ife-asl-view-title {
    font-weight: 600;
    font-size: 15px;
    line-height: 1.3;
}

.ife-asl-view-desc {
    font-size: 13px;
    line-height: 1.4;
    opacity: 0.8;
}

/* Active state: filled gold, pointer-events disabled so the same tab
 * can't re-trigger view-change. Per SOW SS3.1.A. */
.ife-asl-view-btn--active {
    background: var(--ife-gold);
    color: var(--ife-on-gold);
    border-color: var(--ife-gold);
    cursor: default;
    pointer-events: none;
    box-shadow: inset 0 0 0 1px var(--ife-gold);
}

.ife-asl-view-btn--active .ife-asl-view-desc {
    opacity: 1;
}

/* ========================================= */
/* 3. Summary text (Task 5.3)                 */
/* ========================================= */
/* JS toggles `hidden` on the inactive blocks and adds the `--active`
 * modifier to the visible one. The visible block reads as a quiet
 * disclaimer card just below the selector. */
.ife-asl-summary-container {
    max-width: 1100px;
    margin: 0 auto var(--ife-space-lg);
}

.ife-asl-summary-block {
    padding: var(--ife-space-md) var(--ife-space-lg);
    border-left: 3px solid var(--ife-gold);
    border-radius: 0 var(--ife-radius) var(--ife-radius) 0;
    background: var(--ife-gold-soft);
    /* Defensive wrap so client-final copy can't overflow the layout
     * at the 320px minimum width (§5.9.9). */
    overflow-wrap: anywhere;
    word-wrap: break-word;
}

.ife-asl-summary-block[hidden] {
    display: none;
}

.ife-asl-summary-block p {
    margin: 0;
    color: var(--ife-text-muted);
    font-size: 14px;
    line-height: 1.6;
}

/* ========================================= */
/* 4. ASL chrome overrides                    */
/* ========================================= */
/* ASL's tmpl-0 paints its accents (search button, "Number Of Shops"
 * banner, the per-row Directions CTA, infobox links) from a handful
 * of CSS custom properties that default to the plugin's rose
 * `#b97077`. Remap them to brand gold at the locator root so the
 * accents inherit the CULT+KING palette without per-selector
 * overrides. Scoped to `.asl-cont` so the remap can't bleed onto
 * unrelated ASL widgets elsewhere on the site. */
#asl-storelocator.asl-cont {
    --sl-primary:           var(--ife-gold);
    --sl-action-btn-bg:     var(--ife-gold);
    --sl-action-btn-color:  var(--ife-on-gold);
    --sl-search-btn-bg:     var(--ife-gold);
    --sl-search-btn-color:  var(--ife-on-gold);
    --sl-search-text:       var(--ife-gold);
    --sl-infobox-a:         var(--ife-gold);
}

/* Dark theme paint matching the live CULT+KING page. ASL ships its
 * own `asl-bg-*` / `asl-text-*` classes that the existing
 * authorized-retailers page leans on; we duplicate the result here
 * (and at higher specificity) so the IFE locator renders consistently
 * regardless of which ASL settings the page picks up.
 *
 * `.asl-panel-inner` needs the longer `body … .sl-main-cont` selector:
 * tmpl-0 paints it `#fff` via `#asl-storelocator.asl-cont .sl-main-cont
 * .asl-panel-inner`, which outranked the short form and showed as a
 * white block below the rows whenever the list was shorter than the
 * panel (e.g. a search with a single result). */
#asl-storelocator.asl-cont,
#asl-storelocator.asl-cont .asl-wrapper,
#asl-storelocator.asl-cont .asl-panel,
body #asl-storelocator.asl-cont .sl-main-cont .asl-panel-inner {
    background-color: var(--ife-page-bg);
    color: var(--ife-text);
}

/* Store list rows. The shipped markup uses `.sl-addr-list-title` for
 * the store name (gold on the live page) and `.sl-addr` /
 * `.sl-categories` for the address + tag rows (muted). */
#asl-storelocator.asl-cont .sl-item,
#asl-storelocator.asl-cont .asl-store-item {
    border-bottom: 1px solid var(--ife-surface-bd);
    color: var(--ife-text);
    transition: background-color var(--ife-transition);
}

#asl-storelocator.asl-cont .sl-item:hover,
#asl-storelocator.asl-cont .asl-store-item:hover,
#asl-storelocator.asl-cont .sl-item:focus-within,
#asl-storelocator.asl-cont .asl-store-item:focus-within {
    background-color: var(--ife-gold-soft);
}

/* Selected row. Clicking a store adds `.highlighted`, which tmpl-0
 * paints a hard-coded near-white `#f7f7f7` (it ignores the
 * `--sl-highlighted` colour set in ASL's settings), leaving our
 * near-white text unreadable. Keep the selected row on the same dark
 * gray as every other row. Opaque on purpose: the row sits on a white
 * `.asl-panel-inner`, so `transparent` would still read as white.
 * The first selector mirrors tmpl-0's own rule with a leading `body` so
 * it outranks it regardless of stylesheet order; the second covers
 * ASL's template-agnostic base rule. */
body #asl-storelocator.asl-cont.asl-template-0 .asl-wrapper .sl-main-cont .asl-panel-inner .sl-main-cont-box .sl-list-wrapper .sl-list .sl-item.highlighted,
body #asl-storelocator.asl-cont .sl-main-cont .asl-panel-inner .sl-main-cont-box ul.sl-list li.sl-item.highlighted {
    background-color: var(--ife-page-bg);
}

#asl-storelocator.asl-cont .sl-addr-list-title {
    color: var(--ife-gold);
}

#asl-storelocator.asl-cont .sl-addr,
#asl-storelocator.asl-cont .sl-addr span,
#asl-storelocator.asl-cont .sl-categories,
#asl-storelocator.asl-cont .sl-categories span,
#asl-storelocator.asl-cont .Num_of_store,
#asl-storelocator.asl-cont .top-title {
    color: var(--ife-text-muted);
}

/* Search input — dark field with a subtle border and a gold focus
 * ring. Avoids any inherited Avada `input` paint. */
#asl-storelocator.asl-cont .asl-search-address {
    background: rgba(255, 255, 255, 0.04);
    color: var(--ife-text);
    border: 1px solid var(--ife-surface-bd);
}

#asl-storelocator.asl-cont .asl-search-address::placeholder {
    color: var(--ife-text-muted);
}

#asl-storelocator.asl-cont .asl-search-address:focus,
#asl-storelocator.asl-cont .Filter_section input:focus {
    border-color: var(--ife-gold);
    outline: none;
    box-shadow: 0 0 0 2px var(--ife-gold-focus);
}

/* Filter labels (the small "Search Location", "Category", "Distance"
 * captions above each control). */
#asl-storelocator.asl-cont .asl-cntrl-lbl,
#asl-storelocator.asl-cont .Filter_section label {
    color: var(--ife-text-muted);
}

/* Category / Distance dropdowns. The live page renders these as
 * underlined gold labels with a caret — no box. The visible widget
 * is `.multiselect.btn` (the native <select> is display:none). */
#asl-storelocator.asl-cont .asl-ddl-filters .multiselect.btn,
#asl-storelocator.asl-cont .asl-ddl-filters .style-btn {
    background: transparent;
    color: var(--ife-gold);
    border: none;
    box-shadow: none;
    padding-left: 0;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

#asl-storelocator.asl-cont .asl-ddl-filters .multiselect.btn:hover,
#asl-storelocator.asl-cont .asl-ddl-filters .style-btn:hover {
    color: var(--ife-gold-hover);
    background: transparent;
}

/* The open dropdown panel itself (`.adropdown-menu`). We keep ASL's
 * default light panel paint here intentionally — the picker reads as
 * a conventional dark-text-on-light popover rather than fighting the
 * surrounding dark theme. We just polish the chrome (border, shadow,
 * gold-soft hover) and force a dark text colour at every level of
 * the option tree so it can't inherit our locator's near-white text
 * colour from `.asl-cont`. `--ife-on-light` is the dark-text token
 * used everywhere we paint a light surface inside the locator. */
#asl-storelocator.asl-cont .asl-ddl-filters .adropdown-menu {
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.18);
}

#asl-storelocator.asl-cont .asl-ddl-filters .adropdown-menu > li > a:hover,
#asl-storelocator.asl-cont .asl-ddl-filters .adropdown-menu > li > a:focus,
#asl-storelocator.asl-cont .asl-ddl-filters .adropdown-menu > li:hover > a,
#asl-storelocator.asl-cont .asl-ddl-filters .adropdown-menu > li.active > a {
    background-color: var(--ife-gold-soft);
}

/* Divider strokes between dropdown groups. */
#asl-storelocator.asl-cont .asl-ddl-filters .adropdown-menu .divider {
    background-color: rgba(0, 0, 0, 0.08);
}

/* Multiselect search input (when ASL's category dropdown is filterable). */
#asl-storelocator.asl-cont .asl-ddl-filters .adropdown-menu .multiselect-search {
    background: #ffffff;
    color: var(--ife-on-light);
    border: 1px solid rgba(0, 0, 0, 0.15);
}

#asl-storelocator.asl-cont .asl-ddl-filters .adropdown-menu .multiselect-search::placeholder {
    color: rgba(0, 0, 0, 0.5);
}

/* Force a dark text colour at every level of the dropdown's option
 * tree so the labels can't inherit our locator's near-white text
 * colour from `.asl-cont`. `sl-bootstrap.css` also sets
 * `color:#212529` directly on `.adropdown-menu`, and ASL's own
 * `.asl-wrapper .asl-ddl-filters .asl-filter-cntrl .btn-group
 * .adropdown-menu li label` rule is more specific than `.asl-cont`,
 * so we have to re-state the colour at every level to be sure it
 * wins on the option `<label>` (which ASL emits as
 * `<label class="checkbox"><input> Aesthetician</label>`). */
#asl-storelocator.asl-cont .asl-ddl-filters .adropdown-menu,
#asl-storelocator.asl-cont .asl-ddl-filters .adropdown-menu li,
#asl-storelocator.asl-cont .asl-ddl-filters .adropdown-menu li > a,
#asl-storelocator.asl-cont .asl-ddl-filters .adropdown-menu li > a > label,
#asl-storelocator.asl-cont .asl-ddl-filters .adropdown-menu li > a > label.checkbox,
#asl-storelocator.asl-cont .asl-ddl-filters .adropdown-menu li > a > label.radio,
#asl-storelocator.asl-cont .asl-wrapper .asl-ddl-filters .asl-filter-cntrl .btn-group .adropdown-menu li label {
    color: var(--ife-on-light);
}

/* Category clear "X" (IFE — see ife-asl-locator.js). ASL gives the
 * Search Location field a clear button but not the Category filter; this
 * is its equivalent, injected *inside* the category multiselect widget
 * and floated to the field's right edge, just left of the dropdown
 * caret. Hidden until a category is selected (`.is-visible`), mirroring
 * the location X's show-on-value behaviour. Gold to match the category
 * label it sits in.
 *
 * JS adds `.ife-asl-has-cat-clear` to the Bootstrap-multiselect
 * `.btn-group` and appends the X as its child; the rule below makes that
 * group the positioned context. We deliberately do NOT pad the button:
 * its `b.caret` is pinned to the field's right edge, so adding
 * right-padding would push the caret inward and land the X on the wrong
 * side of it. The labels ("N Selected" / a single category name) are
 * short and left-aligned in a wide field, so the absolutely-positioned X
 * floats over empty space to the caret's left without overlap. */
#asl-storelocator.asl-cont .asl-ddl-filters .ife-asl-has-cat-clear {
    position: relative;
}

.ife-asl-cat-clear {
    display: none;
    position: absolute;
    top: 50%;
    right: 28px; /* sits just left of the caret pinned at the right edge */
    transform: translateY(-50%);
    z-index: 5;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--ife-gold);
    cursor: pointer;
    line-height: 1;
    transition: color var(--ife-transition);
}

.ife-asl-cat-clear.is-visible {
    display: inline-flex;
}

.ife-asl-cat-clear svg {
    width: 12px;
    height: 12px;
    fill: currentColor;
}

.ife-asl-cat-clear:hover,
.ife-asl-cat-clear:focus {
    color: var(--ife-gold-hover);
}

.ife-asl-cat-clear:focus-visible {
    outline: 2px solid var(--ife-gold);
    outline-offset: 2px;
    border-radius: var(--ife-radius);
}

/* ========================================= */
/* 4b. ASL modal overrides                    */
/* ========================================= */
/* ASL ships several `.agile-modal` popups (geolocation prompt,
 * directions, description) wrapped inside `#asl-storelocator`.
 * `tmpl-0.css` paints `.agile-modal-content` `background-color:#fff`
 * and `.sl-form-group h2` `color:var(--sl-color, #000)`. Once the
 * locator's dark theme is in play (either via the customizer's
 * `--sl-color: #f5f5f5` or our remap), those `h2`s render light on
 * white — invisible. Paint the modal body the same dark surface as
 * the locator panel so all of the modal's inherited light text
 * reads. */
#asl-storelocator.asl-cont .agile-modal-content {
    background-color: var(--ife-surface);
    border: 1px solid var(--ife-surface-bd);
    color: var(--ife-text);
}

#asl-storelocator.asl-cont .agile-modal-content .sl-form-group h2,
#asl-storelocator.asl-cont .agile-modal-content .sl-form-group p,
#asl-storelocator.asl-cont .agile-modal-content .sl-title,
#asl-storelocator.asl-cont .agile-modal-content h2,
#asl-storelocator.asl-cont .agile-modal-content h4,
#asl-storelocator.asl-cont .agile-modal-content .sl-desc {
    color: var(--ife-text);
}

/* The location-prompt input ("Your Address"). ASL paints it as a
 * standard `.form-control`; align it with the locator's main search
 * field. */
#asl-storelocator.asl-cont .agile-modal-content .form-control,
#asl-storelocator.asl-cont .agile-modal-content input[type="text"],
#asl-storelocator.asl-cont .agile-modal-content input[type="search"] {
    background: rgba(255, 255, 255, 0.04);
    color: var(--ife-text);
    border: 1px solid var(--ife-surface-bd);
}

#asl-storelocator.asl-cont .agile-modal-content .form-control::placeholder,
#asl-storelocator.asl-cont .agile-modal-content input::placeholder {
    color: var(--ife-text-muted);
}

#asl-storelocator.asl-cont .agile-modal-content .form-control:focus,
#asl-storelocator.asl-cont .agile-modal-content input:focus {
    border-color: var(--ife-gold);
    outline: none;
    box-shadow: 0 0 0 2px var(--ife-gold-focus);
}

/* Close (X) icon — ASL paints it `color:#01100e` (near-black); on a
 * dark surface that disappears. Match the modal's body text colour
 * with a gold hover. */
#asl-storelocator.asl-cont .agile-modal-content .close-directions,
#asl-storelocator.asl-cont .agile-modal-content .close-directions span,
#asl-storelocator.asl-cont .agile-modal-content .sl-close,
#asl-storelocator.asl-cont .agile-modal-content .sl-close i {
    color: var(--ife-text);
    opacity: 1;
}

#asl-storelocator.asl-cont .agile-modal-content .close-directions:hover,
#asl-storelocator.asl-cont .agile-modal-content .close-directions:focus,
#asl-storelocator.asl-cont .agile-modal-content .sl-close:hover,
#asl-storelocator.asl-cont .agile-modal-content .sl-close:focus {
    color: var(--ife-gold);
}

/* Search / geo-locate buttons keep the gold focus ring already
 * shipped in Task 5.9, but get a filled-gold paint to match the
 * live "VISIT RETAILER WEBSITE" treatment. */
#asl-storelocator.asl-cont .asl-search-event,
#asl-storelocator.asl-cont .asl-geo-event {
    background: var(--ife-gold);
    color: var(--ife-on-gold);
    border: none;
    border-radius: var(--ife-radius);
    transition: background var(--ife-transition);
}

#asl-storelocator.asl-cont .asl-search-event:hover,
#asl-storelocator.asl-cont .asl-geo-event:hover {
    background: var(--ife-gold-hover);
}

#asl-storelocator.asl-cont .asl-search-event:focus-visible,
#asl-storelocator.asl-cont .asl-geo-event:focus-visible {
    outline: 2px solid var(--ife-gold);
    outline-offset: 2px;
}

/* "Directions" CTA on each list row (`<a class="btn btn-asl
 * s-direction">`). Painted to match the Task 5.8 affiliate CTA so
 * the two buttons read as a consistent pair under each store entry. */
#asl-storelocator.asl-cont .sl-act-btns .btn-asl {
    display: inline-block;
    padding: 10px 18px;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: var(--ife-radius);
    border: 1px solid var(--ife-gold);
    background: var(--ife-gold);
    color: var(--ife-on-gold);
    transition:
        background var(--ife-transition),
        border-color var(--ife-transition),
        color var(--ife-transition);
}

#asl-storelocator.asl-cont .sl-act-btns .btn-asl:hover,
#asl-storelocator.asl-cont .sl-act-btns .btn-asl:focus {
    background: var(--ife-gold-hover);
    border-color: var(--ife-gold-hover);
    color: var(--ife-on-gold);
    text-decoration: none;
}

#asl-storelocator.asl-cont .sl-act-btns .btn-asl:focus-visible {
    outline: 2px solid var(--ife-gold);
    outline-offset: 2px;
}

/* ========================================= */
/* 5. Affiliate link CTAs (Task 5.8)          */
/* ========================================= */
/* Default = filled gold, matching the live "VISIT RETAILER WEBSITE"
 * and "CLICK IF REFERRED BY" treatment on the existing authorized-
 * retailers page. This is the established CULT+KING CTA pattern.
 *
 * Scoped under `#asl-storelocator.asl-cont` so the rule beats Avada's
 * `.post-content a` / `.fusion-content-boxes a` link styles, which
 * otherwise paint the button as plain blue underlined text. The
 * unscoped baseline below still applies for the infobox variant —
 * Google Maps teleports `.gm-style-iw` to the body level. */
.ife-asl-affiliate-link {
    display: inline-block;
    margin-top: 10px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: var(--ife-radius);
    border: 2px solid var(--ife-gold);
    background: var(--ife-gold);
    color: var(--ife-on-gold);
    cursor: pointer;
    transition:
        background var(--ife-transition),
        color var(--ife-transition),
        border-color var(--ife-transition);
}

/* Scoped variants beat Avada's inherited link color / underline that
 * otherwise win against the single-class baseline above. */
#asl-storelocator.asl-cont .ife-asl-affiliate-link,
#asl-storelocator.asl-cont a.ife-asl-affiliate-link {
    background: var(--ife-gold);
    border-color: var(--ife-gold);
    color: var(--ife-on-gold);
    text-decoration: none;
}

.ife-asl-affiliate-link:hover,
.ife-asl-affiliate-link:focus,
#asl-storelocator.asl-cont .ife-asl-affiliate-link:hover,
#asl-storelocator.asl-cont .ife-asl-affiliate-link:focus,
#asl-storelocator.asl-cont a.ife-asl-affiliate-link:hover,
#asl-storelocator.asl-cont a.ife-asl-affiliate-link:focus {
    background: var(--ife-gold-hover);
    border-color: var(--ife-gold-hover);
    color: var(--ife-on-gold);
    text-decoration: none;
}

.ife-asl-affiliate-link:focus-visible,
#asl-storelocator.asl-cont .ife-asl-affiliate-link:focus-visible {
    outline: 2px solid var(--ife-gold);
    outline-offset: 2px;
}

/* List-row variant: sits between the category tag and the social
 * icons. Auto-width keeps it sized to the label like DIRECTIONS;
 * left-aligned via the natural flow of the surrounding `.sl-addr-sec`. */
.ife-asl-affiliate-link--list,
#asl-storelocator.asl-cont .ife-asl-affiliate-link--list {
    margin-top: 12px;
    margin-bottom: 6px;
}

/* View 3 ("Find My Stylist") emphasises the link: same fill, just
 * bigger so it reads as the primary action in that view. */
.ife-asl-affiliate-link--emphasized,
#asl-storelocator.asl-cont .ife-asl-affiliate-link--emphasized {
    font-size: 13px;
    padding: 10px 20px;
}

/* Infobox variant: tighter, block-level inside the marker popup.
 * Google Maps reparents the infobox to `<body>` so the scoped
 * selector above can't reach it — these properties stay on the
 * unscoped class. */
.ife-asl-affiliate-link--infobox {
    display: block;
    margin-top: var(--ife-space-sm);
    text-align: center;
    background: var(--ife-gold);
    border-color: var(--ife-gold);
    color: var(--ife-on-gold);
    text-decoration: none;
}
.ife-asl-affiliate-link--infobox:hover,
.ife-asl-affiliate-link--infobox:focus {
    background: var(--ife-gold-hover);
    border-color: var(--ife-gold-hover);
    color: var(--ife-on-gold);
    text-decoration: none;
}

/* ========================================= */
/* 6. No-results message (Task 5.6)           */
/* ========================================= */
/* Parked in the footer hidden; ife-asl-locator.js relocates it into
 * ASL's list panel. The [hidden] rule is defensive — ASL/theme panel
 * CSS occasionally forces `display` on its children. */
.ife-asl-no-results[hidden] {
    display: none;
}

.ife-asl-no-results {
    text-align: center;
    padding: var(--ife-space-xl) var(--ife-space-lg);
    margin: var(--ife-space-md);
    border: 1px solid var(--ife-surface-bd);
    border-radius: var(--ife-radius-lg);
    background: var(--ife-surface);
    color: var(--ife-text);
}

.ife-asl-no-results-icon {
    color: var(--ife-gold);
    margin-bottom: 12px;
}

.ife-asl-no-results-title {
    margin: 0 0 var(--ife-space-sm);
    font-size: 18px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ife-text);
}

.ife-asl-no-results-message {
    margin: 0 auto 20px;
    max-width: 420px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ife-text-muted);
}

.ife-asl-no-results-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

/* Secondary action — outlined gold on the dark card. Inverts to a
 * filled gold on hover/focus. Scoped under .ife-asl-no-results so the
 * button styling wins over Avada's global <button>/<a> resets. */
.ife-asl-no-results .ife-asl-btn {
    display: inline-block;
    padding: 16px 34px;
    min-width: 190px;
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.06em;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    border-radius: var(--ife-radius);
    cursor: pointer;
    border: 1px solid var(--ife-gold);
    background: transparent;
    color: var(--ife-gold);
    transition:
        background var(--ife-transition),
        color var(--ife-transition);
}

.ife-asl-no-results .ife-asl-btn:hover,
.ife-asl-no-results .ife-asl-btn:focus {
    background: var(--ife-gold);
    color: var(--ife-on-gold);
    text-decoration: none;
}

.ife-asl-no-results .ife-asl-btn:focus-visible {
    outline: 2px solid var(--ife-gold);
    outline-offset: 2px;
}

/* "Expand Search Area" is the primary action — filled by default. */
.ife-asl-no-results .ife-asl-btn--expand-search {
    background: var(--ife-gold);
    color: var(--ife-on-gold);
}

.ife-asl-no-results .ife-asl-btn--expand-search:hover,
.ife-asl-no-results .ife-asl-btn--expand-search:focus {
    background: var(--ife-gold-hover);
    border-color: var(--ife-gold-hover);
}

/* ========================================= */
/* 7. Marker / infobox polish                 */
/* ========================================= */
/* ASL's `Helper::social_icons()` auto-emits an `.sl-social-icon` row
 * for every custom field whose name ends in `_url`, but only assigns
 * a fontello class to the three pre-baked socials (facebook/twitter/
 * instagram). Our `website_url` and `affiliate_url` fields therefore
 * render as anonymous `<i class="">` chips. `ife-asl-locator.js`
 * decorates each blank `<i>` with a matching fontello class on render
 * — these rules below paint those chips so they read on the dark
 * locator panel, and act as a defensive fallback that hides anything
 * the decorator missed so the user never sees an empty grey square. */
#asl-storelocator.asl-cont .sl-social-icon li a {
    background-color: var(--ife-gold-soft);
    border: 1px solid var(--ife-surface-bd);
    transition:
        background-color var(--ife-transition),
        border-color var(--ife-transition);
}

#asl-storelocator.asl-cont .sl-social-icon li a:hover,
#asl-storelocator.asl-cont .sl-social-icon li a:focus-visible {
    background-color: var(--ife-gold);
    border-color: var(--ife-gold);
}

#asl-storelocator.asl-cont .sl-social-icon li a i {
    color: var(--ife-gold);
}

#asl-storelocator.asl-cont .sl-social-icon li a:hover i,
#asl-storelocator.asl-cont .sl-social-icon li a:focus-visible i {
    color: var(--ife-on-gold);
}

/* Defensive fallback: if `ife-asl-locator.js` fails to load or
 * hasn't decorated a chip yet, hide it so users never see a blank
 * grey square. The decorator clears the empty class, which makes
 * these selectors stop matching. */
#asl-storelocator.asl-cont .sl-social-icon li:has(a > i[class=""]),
#asl-storelocator.asl-cont .sl-social-icon li:has(a > i:not([class])) {
    display: none;
}

#asl-storelocator.asl-cont .sl-social-icon:not(:has(a > i[class]:not([class=""]))) {
    display: none;
}

/* ASL's infobox markup (`.sl-iw-rw`) only exists while a marker is
 * open. Google Maps' wrapper (`.gm-style-iw[-c]`) sits around it and
 * caps min-width too aggressively — relax it so our affiliate CTA has
 * room to read on one line. */
.asl-cont .sl-iw-rw {
    padding: var(--ife-space-md);
    color: var(--ife-text);
    border-radius: var(--ife-radius);
}

.asl-cont .sl-iw-rw .sl-iw-title,
.asl-cont .sl-iw-rw .sl-iw-name {
    font-weight: 600;
    color: var(--ife-text);
}

.asl-cont .sl-iw-rw .sl-iw-addr {
    color: var(--ife-text-muted);
}

.gm-style .gm-style-iw-c {
    padding-top: 12px;
}

/* ========================================= */
/* 8. Mobile responsive (Task 5.9)            */
/* ========================================= */
/* Per-component mobile rules first, then a cross-cutting block for
 * ASL chrome and tap-target floors. Breakpoints follow §5.9.2. */

@media (max-width: 991px) {
    /* Tablet portrait: keep boxes side-by-side but shorten them so
     * they don't dominate the viewport above the map. */
    .ife-asl-view-btn {
        min-height: 80px;
        padding: 14px 12px;
    }
}

@media (max-width: 768px) {
    /* -- View selector -- */
    .ife-asl-view-selector-wrapper {
        padding: var(--ife-space-md);
        margin-bottom: 20px;
        max-width: 100%;
        box-sizing: border-box;
    }

    .ife-asl-view-headline {
        font-size: 18px;
        margin-bottom: 14px;
    }

    .ife-asl-view-options {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    /* WCAG 2.1 minimum touch target (44px) + comfortable mobile tap area.
     * `min-height: 60px` matches §5.9.3 of the phase 5 doc. */
    .ife-asl-view-btn {
        min-height: 60px;
        padding: 14px 16px;
    }

    /* Long-copy safety: view titles can run to two full sentences once
     * client copy lands, and they must wrap rather than overflow even
     * at 320px width (§5.9.9 — no truncation at 320px). */
    .ife-asl-view-title,
    .ife-asl-view-desc {
        word-wrap: break-word;
        overflow-wrap: anywhere;
        hyphens: auto;
    }

    /* -- Summary text -- */
    .ife-asl-summary-block {
        padding: var(--ife-space-sm) var(--ife-space-md);
    }

    /* -- No-results -- */
    .ife-asl-no-results {
        padding: var(--ife-space-lg) var(--ife-space-md);
        margin: 12px;
    }

    .ife-asl-no-results-actions {
        flex-direction: column;
    }

    .ife-asl-no-results .ife-asl-btn {
        width: 100%;
        min-width: 0;
        min-height: 44px;
    }

    /* -- Affiliate link -- (scoped to match the desktop selector so the
     * mobile full-width treatment isn't beaten by the higher-specificity
     * desktop rule.) */
    .ife-asl-affiliate-link,
    #asl-storelocator.asl-cont .ife-asl-affiliate-link {
        display: block;
        width: 100%;
        text-align: center;
        min-height: 44px;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .ife-asl-affiliate-link--infobox {
        display: block;
        width: 100%;
        text-align: center;
        margin-top: var(--ife-space-sm);
        min-height: 44px;
        line-height: 24px;
    }

    /* -- ASL search row: stack vertically, full-width each column. ASL's
     *    own `pol-sm-12` already does this at sm; we extend it through
     *    md so phones in landscape don't squeeze the controls. -- */
    .asl-cont .Filter_section .sl-row {
        flex-direction: column;
    }

    .asl-cont .Filter_section .sl-row .pol-lg-4,
    .asl-cont .Filter_section .sl-row .pol-lg-3,
    .asl-cont .Filter_section .sl-row .pol-md-6,
    .asl-cont .Filter_section .sl-row .pol-md-4,
    .asl-cont .Filter_section .sl-row .pol-sm-12 {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Touch-target floor (44x44 px) on ASL's primary action buttons.
     * The visible Category / Distance widgets are Bootstrap-style
     * `.multiselect.btn` buttons inside `.btn-group` — that's what
     * users actually tap, so the floor has to land there, not on the
     * hidden native <select>. */
    .asl-cont .asl-search-event,
    .asl-cont .asl-geo-event,
    .asl-cont .asl-search-address,
    .asl-cont .asl-ddl-filters .btn-group > .multiselect.btn,
    .asl-cont .asl-ddl-filters .btn-group > .style-btn {
        min-height: 44px;
    }

    .asl-cont .asl-search-event,
    .asl-cont .asl-geo-event {
        min-width: 44px;
    }

    /* Category clear "X" — meet the same 44px touch-target floor. */
    .ife-asl-cat-clear.is-visible {
        width: 44px;
        height: 44px;
    }

    /* Stretch the multiselect widget to fill its (now full-width)
     * column; otherwise the inline-block `.btn-group` shrink-wraps to
     * the label text. */
    .asl-cont .asl-ddl-filters .btn-group,
    .asl-cont .asl-ddl-filters .btn-group > .multiselect.btn,
    .asl-cont .asl-ddl-filters .btn-group > .style-btn {
        width: 100%;
    }

    /* "Directions" CTA on each list row → block, 44px, so it doesn't
     * crowd against the Task 5.8 affiliate CTA. */
    .asl-cont .sl-act-btns .btn-asl {
        display: block;
        min-height: 44px;
        line-height: 24px;
    }

    /* Constrain Google's infobox to the viewport so the affiliate CTA
     * + close button stay reachable without horizontal scroll. */
    .asl-cont .sl-iw-rw,
    .gm-style .gm-style-iw,
    .gm-style .gm-style-iw-c {
        max-width: calc(100vw - 40px) !important;
    }

    .gm-style .gm-style-iw-d {
        overflow: auto !important;
    }
}

/* Small-mobile (≤ 480px) tightening: trim padding so 320px-wide
 * screens (§5.9.8 minimum) get the full layout without overflow. */
@media (max-width: 480px) {
    .ife-asl-view-selector-wrapper {
        padding: 14px;
    }

    .ife-asl-view-headline {
        font-size: 16px;
        letter-spacing: 0.06em;
    }

    .ife-asl-no-results {
        padding: 20px 12px;
        margin: 8px;
    }

    .ife-asl-affiliate-link,
    #asl-storelocator.asl-cont .ife-asl-affiliate-link {
        padding: 10px 14px;
    }
}

/* View-filter row hide. Toggled by ife-asl-locator.js when the active
 * view (purchase / service / affiliate) excludes a store. `!important`
 * is required to win over ASL's own inline `display` styling on list
 * rows; `display: none` also makes `offsetParent` null so the
 * no-results counter (countVisibleStores) treats the row as not
 * visible. */
.ife-asl-hidden-by-view {
    display: none !important;
}

/* Loading overlay — covers the map + list while ASL is mounting, while
 * a search is in flight, and briefly during a view switch so the user
 * gets feedback that the panel is being recomputed. Sits inside
 * `.ife-asl-locator-stage`, which is the wrapper IFE_ASL_Locator_Frontend
 * adds around the ASL shortcode output. Server-renders visible; the JS
 * controller in ife-asl-locator.js hides it on `ife-asl:filter-applied`. */
.ife-asl-locator-stage {
    position: relative;
}

.ife-asl-loading-overlay {
    position: absolute;
    inset: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    background: rgba(26, 26, 26, 0.88);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    transition: opacity 200ms ease;
    pointer-events: all;
}

.ife-asl-loading-overlay[hidden] {
    display: none !important;
}

.ife-asl-loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(231, 168, 61, 0.22);
    border-top-color: #e7a83d;
    border-radius: 50%;
    animation: ife-asl-spin 0.85s linear infinite;
}

.ife-asl-loading-text {
    margin: 0;
    color: #e7a83d;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

@keyframes ife-asl-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .ife-asl-loading-spinner {
        animation-duration: 2s;
    }
    .ife-asl-loading-overlay {
        transition: none;
    }
}

/* QA-002 — highlight the store-name search match in the results list. */
.asl-panel .sl-item.ife-asl-name-match,
.asl-panel .asl-store-item.ife-asl-name-match {
    box-shadow: inset 4px 0 0 0 var(--sl-primary, var(--ife-gold, #e7a83d));
    background-color: rgba(231, 168, 61, 0.08);
}

/* QA-004 — injected "See All" entry in ASL's Distance dropdown widget.
 * Inherits the adropdown item layout; add a separator + emphasis so it
 * reads as the distinct "show everything" action. */
.multiselect-container .ife-asl-see-all-opt {
    border-top: 1px solid var(--ife-surface-bd, rgba(0, 0, 0, 0.12));
}

.multiselect-container .ife-asl-see-all-opt > a {
    cursor: pointer;
}

.multiselect-container .ife-asl-see-all-opt > a > label.radio {
    font-weight: 600;
    cursor: pointer;
}

/* QA-002 — store-name typeahead suggestions under the search box. */
.ife-asl-name-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    margin: 4px 0 0;
    padding: 4px 0;
    list-style: none;
    max-height: 280px;
    overflow-y: auto;
    background: var(--ife-surface, #1f1f1f);
    border: 1px solid var(--ife-surface-bd, rgba(255, 255, 255, 0.15));
    border-radius: var(--ife-radius, 6px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.ife-asl-name-suggestions[hidden] {
    display: none;
}

.ife-asl-suggest-item {
    display: block;
    padding: 9px 14px;
    cursor: pointer;
    color: var(--ife-text, #f2f2f2);
    line-height: 1.3;
}

.ife-asl-suggest-item:hover,
.ife-asl-suggest-item.is-active {
    background: var(--ife-gold, #e7a83d);
    color: var(--ife-on-gold, #1a1a1a);
}

.ife-asl-suggest-title {
    display: block;
    font-size: 14px;
    font-weight: 600;
}

.ife-asl-suggest-label {
    display: block;
    font-size: 12px;
    color: var(--ife-text-muted, #b8b8b8);
}

.ife-asl-suggest-item:hover .ife-asl-suggest-label,
.ife-asl-suggest-item.is-active .ife-asl-suggest-label {
    color: var(--ife-on-gold, #1a1a1a);
}