/* ==========================================================================
   DRYSHOD — ADAPTER: WP Store Locator (stores.html; theme Phase 1 #6)
   Re-targets components.css §33 at WPSL's real markup
   (wp-store-locator/frontend/templates/default.php + wpsl-gmap.js):
     #wpsl-wrap > .wpsl-search > #wpsl-search-wrap > form
        .wpsl-input > div > label + input#wpsl-search-input
        .wpsl-select-wrap > #wpsl-radius / #wpsl-results (div) > label +
           select.wpsl-dropdown — or the JS-built div.wpsl-dropdown widget
        .wpsl-search-btn-wrap > input#wpsl-search-btn[type=submit]
     #wpsl-gmap
     #wpsl-result-list > #wpsl-stores > ul > li[data-store-id] >
        .wpsl-locations-details (strong = name) + .wpsl-location-address +
        .wpsl-contact-details + .wpsl-location-directions > a.wpsl-directions
     li.wpsl-no-results-msg
   The comp used .wpsl-store-name / .wpsl-street / .wpsl-city and bare
   selects; WPSL does not emit those. No plugin edits.
   ========================================================================== */

/* ---- search bar: the design's OWN grid on #wpsl-search-wrap (Fix 8) ---------
   components.css:2017 makes #wpsl-search-wrap the grid
   (minmax(0,1fr) 150px 130px auto); the comp's four cells were direct
   children. Live, the wrap's only child is WPSL's <form>, which would take
   column one alone. So the form and .wpsl-select-wrap dissolve
   (display: contents) and the real cells — .wpsl-input, #wpsl-radius,
   #wpsl-results, .wpsl-search-btn-wrap — land in the design's columns.
   Real markup: .wpsl-input > (div > label) + input#wpsl-search-input;
   #wpsl-radius / #wpsl-results > label + select (hidden by the plugin;
   its JS wraps each in div.wpsl-dropdown with span.wpsl-selected-item as
   the visible control, or shows the raw select when styled dropdowns are
   off — the select's display is left to that JS). WPSL's inline
   `.wpsl-input label {width:95px}` / `#wpsl-search-input {width:179px}`
   are overridden at id depth. */
#wpsl-wrap .wpsl-search { margin: 0; padding: 0; background: none; float: none; width: auto; }
#wpsl-wrap #wpsl-search-wrap { float: none; width: auto; }
#wpsl-search-wrap form { display: contents; }
#wpsl-search-wrap .wpsl-select-wrap { display: contents; }
#wpsl-search-wrap .wpsl-input,
#wpsl-search-wrap #wpsl-radius,
#wpsl-search-wrap #wpsl-results { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; float: none; width: auto; min-width: 0; position: static; }
#wpsl-search-wrap .wpsl-input > div { display: block; margin: 0; float: none; width: auto; }
#wpsl-search-wrap .wpsl-search-btn-wrap { margin: 0; float: none; width: auto; }
#wpsl-search-wrap label,
#wpsl-search-wrap .wpsl-input label,
#wpsl-search-wrap #wpsl-radius label,
#wpsl-search-wrap #wpsl-results label,
#wpsl-search-wrap div label { display: block; width: auto; margin: 0 0 var(--ds-s-2); float: none; line-height: 1.3; white-space: nowrap; }
#wpsl-search-wrap #wpsl-search-input { width: 100%; height: var(--ds-control-h); margin: 0; padding: 0 var(--ds-s-4); float: none; border-radius: 0; box-shadow: none; }
/* Styled dropdown widget (JS-built): div.wpsl-dropdown > span.wpsl-selected-item + div > ul.
   The plugin pads the span with !important; the widget itself is sized here. */
#wpsl-search-wrap .wpsl-dropdown {
  display: block; width: 100%; height: var(--ds-control-h); margin: 0; padding: 0; float: none;
  background: var(--ds-paper); border: var(--ds-border) solid var(--ds-ink-4); border-radius: 0; box-shadow: none;
  font-family: var(--ds-font-body); font-size: 16px; color: var(--ds-ink);
}
#wpsl-search-wrap .wpsl-dropdown .wpsl-selected-item { display: flex; align-items: center; height: 100%; box-sizing: border-box; line-height: 1; color: var(--ds-ink); }
#wpsl-search-wrap .wpsl-dropdown .wpsl-selected-item::after { right: 12px; }
#wpsl-search-wrap .wpsl-dropdown > div { border: var(--ds-border) solid var(--ds-ink-4); border-top: 0; border-radius: 0; background: var(--ds-paper); box-shadow: var(--ds-shadow-menu); }
#wpsl-search-wrap .wpsl-dropdown li { font-size: var(--ds-t-body-sm); }
#wpsl-search-wrap .wpsl-dropdown li:hover, #wpsl-search-wrap .wpsl-dropdown li.wpsl-selected-dropdown { background: var(--ds-paper-sunk); }
#wpsl-search-wrap #wpsl-search-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--ds-control-h); padding: 0 var(--ds-s-8); margin: 0; float: none; width: auto;
  font-family: var(--ds-font-ui); font-size: 17px; font-weight: 700; letter-spacing: var(--ds-track-label); text-transform: uppercase;
  background: var(--ds-orange-action); border: var(--ds-border-strong) solid var(--ds-orange-action); border-radius: 0; color: #fff; cursor: pointer;
  background-image: none; text-shadow: none; box-shadow: none; line-height: 1;
}
#wpsl-search-wrap #wpsl-search-btn:hover { background: var(--ds-orange-press); border-color: var(--ds-orange-press); }

/* ---- result list items: real inner markup --------------------------------- */
/* Ruling (Fix 8): the plugin's `#wpsl-wrap.wpsl-store-below #wpsl-result-list li
   { padding: 10px 10px 10px 0 }` (two ids + class) outranked the design's
   `#wpsl-stores li` and left entries flush against the border. Same
   specificity here, later in the cascade. */
#wpsl-wrap.wpsl-store-below #wpsl-result-list li,
#wpsl-wrap #wpsl-result-list li,
#wpsl-stores li[data-store-id] { padding: var(--ds-s-4); border-bottom: var(--ds-border) solid var(--ds-rule); margin: 0; font-size: var(--ds-t-body-sm); line-height: 1.5; color: var(--ds-ink-2); text-indent: 0; }
#wpsl-wrap #wpsl-result-list li:last-child { border-bottom: 0; }
#wpsl-stores li[data-store-id]:hover { background: var(--ds-paper-sunk); }
#wpsl-stores .wpsl-locations-details > span > strong, #wpsl-stores .wpsl-locations-details strong {
  display: block; font-family: var(--ds-font-ui); font-size: 16px; font-weight: 700; letter-spacing: var(--ds-track-label); text-transform: uppercase; color: var(--ds-ink); margin-bottom: 3px;
}
#wpsl-stores .wpsl-location-address span { display: block; }
#wpsl-stores .wpsl-location-address br { display: none; }
#wpsl-stores .wpsl-contact-details { margin-top: var(--ds-s-2); }
#wpsl-stores .wpsl-contact-details br { display: none; }
#wpsl-stores .wpsl-contact-details a { color: inherit; }
#wpsl-stores .wpsl-distance { font-family: var(--ds-font-ui); font-weight: 600; color: var(--ds-ink-4); }
#wpsl-stores .wpsl-location-directions { margin-top: var(--ds-s-2); }
#wpsl-stores .wpsl-directions { display: inline-block; font-family: var(--ds-font-ui); font-size: 14px; font-weight: 600; letter-spacing: var(--ds-track-label); text-transform: uppercase; color: var(--ds-orange-action); border-bottom: var(--ds-border) solid currentColor; }
#wpsl-stores li.wpsl-no-results-msg { padding: var(--ds-s-8) var(--ds-s-5); text-align: center; color: var(--ds-ink-4); font-size: var(--ds-t-body-sm); border: 0; }
#wpsl-result-list #wpsl-direction-details { padding: var(--ds-s-4) var(--ds-s-5); }

/* ---- the loaded-state list scrolls with the map (as live) ----------------- */
#wpsl-result-list { max-height: 420px; overflow-y: auto; }

@media (max-width: 980px) {
  /* components.css:2369-2371 goes two-up and spans #wpsl-search-input-wrap
     (the comp's id) and .wpsl-search-btn-wrap; the live location cell is
     .wpsl-input. */
  #wpsl-search-wrap .wpsl-input { grid-column: 1 / -1; }
}