/**
 * Authorized Retailers - Finder styles
 *
 * Author:  MJ Bomar
 * Version: 1.0.0
 *
 * What this file does:
 * The looks for the public Authorized Retailers finder: the search bar, the
 * radius pills, the result rows, the Load more button, and how it all
 * rearranges on phones. Moved out of the finder PHP (it used to print as an
 * inline style block) on 2026-07-17 so it loads as a real stylesheet with
 * cache busting, and only on the page that uses it.
 *
 * Changelog:
 * 1.0.0 (2026-07-17) - First version as its own file. Same rules the inline
 *   block carried, with one cleanup: the Load more button no longer needs its
 *   !important on the border and radius, because the sitewide button rules in
 *   styles/wp-custom-styles.css were softened the same day and no longer
 *   steamroll authored button styles. The radius pills get their thin borders
 *   and full pill shape back for the same reason.
 */

/* The overall finder wrapper and the search bar */
.srx-ar-finder { max-width:1100px; margin:0 auto; }
.srx-ar-label { display:block; margin-bottom:.25rem; font-weight:600; font-size:1.5rem; }
.srx-ar-inputwrap { position:relative; display:flex; gap:.5rem; align-items:center; }
#srx-ar-q { flex:1 1 auto; padding:.9rem 1rem; font-size:18px; }
#srx-ar-btn { padding:.9rem 1rem; color:#1f1f1f; font-size:18px; cursor:pointer; }
.srx-ar-help { font-size:.95rem; opacity:.75; margin:.5rem 0 0; }

/* The little distance pills (25/50/75/100 miles) above the search button */
.srx-ar-radius { position:absolute; right:8.25rem; top:-2.0rem; display:flex; gap:.4rem; flex-wrap:wrap; }
.srx-ar-radius button{ border:1px solid rgba(0,0,0,.15); background:#fff; padding:.25rem .6rem; border-radius:999px; color:#1f1f1f; font-size:.85rem; line-height:1.2; cursor:pointer; }
.srx-ar-radius button.is-active{ background:#efe6f7; border-color:#783687; color:#783687; }

/* The results: count line, rows, and the divider between them */
.srx-ar-count { margin:.75rem 0 0; font-weight:600; }
.srx-ar-list  { margin-top:.25rem; }

.srx-ar-row   { display:flex; justify-content:space-between; gap:1rem; padding:1rem 0; }
.srx-ar-divider{ height:1px; background:#371D4F; opacity:.25; margin:0; }
.srx-ar-name  { font-weight:600; font-size:1rem; margin-bottom:.25rem; color:#783687; }
.srx-ar-city  { font-size:1rem; opacity:.9; }
.srx-ar-right { text-align:right; white-space:nowrap; font-size:1rem; }
.srx-ar-right a { text-decoration:none; }
.srx-ar-right div { margin-bottom:.25rem; }
.srx-ar-empty { padding:1rem 0; opacity:.8; }

/* The Load more button matches the radius pills above: white pill, purple
   border and text, filling in purple when hovered. */
.srx-ar-more  { display:flex; align-items:center; gap:.75rem; margin-top:1.25rem; }
.srx-ar-more button{ border:1px solid #783687; background:#fff; color:#783687; padding:.55rem 1.4rem; border-radius:999px; font-size:1rem; line-height:1.2; cursor:pointer; transition:background-color .15s ease, color .15s ease; }
.srx-ar-more button:hover:not([disabled]){ background:#783687; color:#fff; }
.srx-ar-more button[disabled]{ opacity:.5; cursor:not-allowed; }
.srx-ar-more span{ font-size:.95rem; opacity:.75; }

/* On phones the pills drop into their own row and rows stack vertically */
@media (max-width: 768px){
  .srx-ar-inputwrap{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
  .srx-ar-radius   { position:static !important; order:-1; width:100%; display:flex; gap:.5rem; justify-content:flex-start; margin:.25rem 0 .5rem 0; }
  #srx-ar-q { flex:1 1 auto; }
  #srx-ar-btn { flex:0 0 auto; }
  .srx-ar-row{ display:block; }
  .srx-ar-right{ text-align:left; white-space:normal; margin-top:.5rem; }
}