/**
 * Buffalo's Cafe Express store locator brand overrides.
 *
 * Tokens sourced from Figma (Fat-Brands > Buffalo's locations):
 *   Orange button   #f96b00   (Order now / primary)
 *   Orange accent   #db5f01   (links, phone, "Get directions", page title,
 *                              current breadcrumb, directory counts)
 *   Page background #f8f8f8
 *   Card name       #333434   Text black #000   Subtle #434447
 *   Border          #e5e7eb
 *   Display font    MerloNeue (Hikou optional — see hook below)
 *   Body font       Roboto    (ExtraBold = 800 for buttons)
 *
 * The plugin base CSS (3owl-store-locator/assets/css/store-locator.css) is
 * Fatburger-tuned: it reads var(--red)/var(--yellow)/var(--font2) for the
 * primary button surface. Those resolve to the theme's global red/yellow in
 * variables.less, so we re-scope them to the Buffalo's orange palette here.
 */

/* ==========================================================================
   MerloNeue — display / heading font
   ========================================================================== */

@font-face {
  font-family: 'MerloNeue';
  src: url('../webfonts/MerloNeueRegular/font.woff2') format('woff2'),
    url('../webfonts/MerloNeueRegular/font.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'MerloNeue';
  src: url('../webfonts/MerloNeueBlack/font.woff2') format('woff2'),
    url('../webfonts/MerloNeueBlack/font.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   Display font hook (Hikou — optional future swap)
   --------------------------------------------------------------------------
   Buffalo's Figma titles use "Hikou" (Inline + Regular). MerloNeue is active
   until Hikou files are added. To switch:
     1. Drop woff2/woff into assets/webfonts/HikouRegular/ and HikouInline/
     2. Uncomment the @font-face blocks below
     3. Change --owl-sl-font-display to 'Hikou'
   ========================================================================== */

/*
@font-face {
  font-family: 'Hikou';
  src: url('../webfonts/HikouRegular/font.woff2') format('woff2'),
       url('../webfonts/HikouRegular/font.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Hikou Inline';
  src: url('../webfonts/HikouInline/font.woff2') format('woff2'),
       url('../webfonts/HikouInline/font.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
*/

/* ==========================================================================
   Brand tokens
   ========================================================================== */

.owl-sl-page,
.locations-wrapper {
  --owl-sl-font-display: 'MerloNeue', 'Arial Narrow', Arial, sans-serif;

  --owl-sl-primary: #f96b00;
  --owl-sl-primary-hover: #db5f01;
  --owl-sl-primary-text: #000000;
  --owl-sl-secondary: #000000;

  --owl-sl-text-primary: #000000;
  --owl-sl-text-secondary: #000000;
  --owl-sl-text-muted: #434447;

  --owl-sl-border: #e5e7eb;
  --owl-sl-bg: var(--buffalos-surface-bg, #f8f8f8);
  --owl-sl-card-bg: #ffffff;
  --owl-sl-link: #db5f01;

  --owl-sl-status-open: #16a34a;
  --owl-sl-status-open-bg: #f0fdf4;
  --owl-sl-status-closed: #dc2626;
  --owl-sl-status-closed-bg: #fee2e2;
  --owl-sl-status-closing-soon: #ea580c;
  --owl-sl-status-closing-soon-bg: #ffedd5;

  --owl-sl-badge-bg: #ffffff;
  --owl-sl-badge-border: #db5f01;

  --owl-sl-font-heading: var(--owl-sl-font-display);
  --owl-sl-font-body: 'Roboto', 'Helvetica Neue', Arial, sans-serif;

  /* Re-scope theme globals the plugin button rules depend on. */
  --red: #f96b00;
  --yellow: #ffffff;
  --font2: var(--owl-sl-font-display);
}

.locations-wrapper {
  padding-top: 24px;
}

/* ==========================================================================
   Headings / titles
   ========================================================================== */

.owl-sl-page .owl-sl-header__title,
.owl-sl-page--search .owl-sl-header__title,
.owl-sl-page .owl-sl-header--directory .owl-sl-header__title,
.owl-sl-page .owl-sl-header--directory-root .owl-sl-header__title {
  font-family: var(--owl-sl-font-display);
  color: var(--owl-sl-link);
  text-transform: none;
}

.owl-sl-page .owl-sl-card__headline {
  font-family: var(--owl-sl-font-display);
  font-weight: 700;
  color: #333434;
  text-transform: none;
}

/* ==========================================================================
   Search form
   ========================================================================== */

.owl-sl-page .owl-sl-search-form__input-wrapper {
  border-radius: 999px;
  border: 1.5px solid #6b7280;
}

.owl-sl-page .owl-sl-search-form__input::placeholder {
  color: var(--owl-sl-text-muted);
}

/* "Use my location" / "View all locations" / directory pills: outline buttons */
.owl-sl-page .owl-sl-search-form__action-btn,
.owl-sl-page .owl-sl-search-form__location-btn,
.owl-sl-page .owl-sl-search-form__directory-btn {
  border-radius: 999px;
  border: 1.5px solid var(--owl-sl-secondary);
  background-color: #fff;
  color: var(--owl-sl-secondary);
  font-family: var(--owl-sl-font-body);
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: none;
}

.owl-sl-page .owl-sl-search-form__action-btn:hover,
.owl-sl-page .owl-sl-search-form__location-btn:hover,
.owl-sl-page .owl-sl-search-form__directory-btn:hover {
  background-color: var(--owl-sl-primary);
  color: #000;
  border-color: var(--owl-sl-primary);
}

/* ==========================================================================
   Cards
   ========================================================================== */

.owl-sl-page .owl-sl-card {
  border-radius: 0;
  border: 1px solid var(--owl-sl-border);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.owl-sl-page .owl-sl-card:hover {
  border-color: var(--owl-sl-primary);
}

.owl-sl-card--active {
  border-color: var(--owl-sl-primary);
  box-shadow: 0 0 0 2px var(--owl-sl-primary);
}

/* ==========================================================================
   Card buttons — Order now (orange, black text) + Details (outline)
   ========================================================================== */

.owl-sl-page .owl-sl-card__actions .owl-sl-card__btn--primary,
.owl-sl-page .owl-sl-card__actions .owl-sl-card__btn--primary:link,
.owl-sl-page .owl-sl-card__actions .owl-sl-card__btn--primary:visited {
  background-color: var(--owl-sl-primary);
  border: 1.5px solid var(--owl-sl-primary);
  color: #000;
  -webkit-text-fill-color: #000;
  border-radius: 999px;
  font-family: var(--owl-sl-font-body);
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: none;
}

.owl-sl-page .owl-sl-card__actions .owl-sl-card__btn--primary:hover {
  background-color: #fff;
  color: var(--owl-sl-primary);
  -webkit-text-fill-color: var(--owl-sl-primary);
  border-color: var(--owl-sl-primary);
}

.owl-sl-page .owl-sl-card__actions .owl-sl-card__btn--details,
.owl-sl-page .owl-sl-card__actions .owl-sl-card__btn--details:link,
.owl-sl-page .owl-sl-card__actions .owl-sl-card__btn--details:visited,
.owl-sl-page .no_locations_selected_btn.owl-sl-card__btn--details {
  background-color: #fff;
  color: var(--owl-sl-secondary);
  -webkit-text-fill-color: var(--owl-sl-secondary);
  border: 1.5px solid var(--owl-sl-secondary);
  border-radius: 999px;
  font-family: var(--owl-sl-font-body);
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: none;
}

.owl-sl-page .owl-sl-card__actions .owl-sl-card__btn--details:hover,
.owl-sl-page .no_locations_selected_btn.owl-sl-card__btn--details:hover {
  background-color: var(--owl-sl-secondary);
  color: #fff;
  -webkit-text-fill-color: #fff;
  border-color: var(--owl-sl-secondary);
}

/* Map popup CTAs follow the same orange/black + pill treatment */
.owl-store-locator .map_popup_buttons .btn_view_club,
.owl-store-locator .map_popup_buttons .btn_view_club:link,
.owl-store-locator .map_popup_buttons .btn_view_club:visited {
  background: var(--owl-sl-primary);
  border: 1.5px solid var(--owl-sl-primary);
  color: #000;
  -webkit-text-fill-color: #000;
  border-radius: 999px;
  font-family: var(--owl-sl-font-body);
  font-weight: 800;
}

.owl-store-locator .map_popup_buttons .btn_view_club:hover {
  background: #fff;
  color: var(--owl-sl-primary);
  -webkit-text-fill-color: var(--owl-sl-primary);
  border-color: var(--owl-sl-primary);
}

.owl-store-locator .map_popup_buttons .btn_directions,
.owl-store-locator .map_popup_buttons .btn_directions:link,
.owl-store-locator .map_popup_buttons .btn_directions:visited {
  background: #fff;
  border: 1.5px solid var(--owl-sl-secondary);
  color: var(--owl-sl-secondary);
  -webkit-text-fill-color: var(--owl-sl-secondary);
  border-radius: 999px;
  font-family: var(--owl-sl-font-body);
  font-weight: 800;
}

.owl-store-locator .map_popup_buttons .btn_directions:hover {
  background: var(--owl-sl-secondary);
  color: #fff;
  -webkit-text-fill-color: #fff;
  border-color: var(--owl-sl-secondary);
}

/* ==========================================================================
   Links / phone / accent text
   ========================================================================== */

.owl-sl-page a.owl-sl-card__directions,
.owl-sl-page a.owl-sl-card__directions:hover,
.owl-sl-page a.owl-sl-card__directions:focus-visible,
.owl-sl-page .owl-sl-card__pill-link--phone,
.owl-sl-page .owl-sl-card__pill-link--phone .owl-sl-card__pill-text,
.owl-sl-page .owl-sl-breadcrumb__current,
.owl-sl-page .owl-sl-directory-item__count {
  color: var(--owl-sl-link);
}

.owl-sl-page a.owl-sl-card__directions {
  font-family: var(--owl-sl-font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.24;
}

.owl-sl-page .owl-sl-card__pill-link--phone .owl-sl-card__pill-text {
  font-family: var(--owl-sl-font-body);
}

/* ==========================================================================
   Directory
   ========================================================================== */

.locations-wrapper:has(.owl-sl-page--directory) {
  --owl-sl-bg: #ffffff;
  background-color: #ffffff;
}

.owl-sl-page.owl-sl-page--directory {
  --owl-sl-bg: #ffffff;
  background-color: #ffffff;
}

.owl-sl-page .owl-sl-accordion__header {
  padding: 12px 16px;
  min-height: 0;
  border-radius: 8px;
  border: 1px solid #f3f4f6;
  background: #f3f4f6;
}

.owl-sl-page .owl-sl-accordion__header:hover {
  background: #f3f4f6;
  border-color: #f3f4f6;
}

.owl-sl-page .owl-sl-accordion__title-group {
  gap: 12px;
}

.owl-sl-page .owl-sl-accordion[data-accordion="us"] .owl-sl-accordion__title,
.owl-sl-page .owl-sl-accordion[data-accordion="international"] .owl-sl-accordion__title {
  text-transform: uppercase;
}

.owl-sl-page .owl-sl-accordion__title {
  font-family: var(--owl-sl-font-display);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.16;
  color: #333434;
}

.owl-sl-page .owl-sl-accordion__icon {
  color: #333434;
}

.owl-sl-page .owl-sl-accordion .owl-sl-badge--locations {
  height: 28px;
  padding: 0 8px;
  background: #ffdcc2;
  border: 1px solid #f96b00;
  border-radius: 999px;
  font-family: var(--owl-sl-font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #000;
}

.owl-sl-page .owl-sl-directory-region {
  color: var(--owl-sl-text-primary);
}

.owl-sl-page .owl-sl-directory-item {
  color: var(--owl-sl-text-primary);
}

.owl-sl-page .owl-sl-directory-item__name {
  color: var(--owl-sl-text-primary);
}

/* ==========================================================================
   Page padding (matches brand container gutters)
   ========================================================================== */

@media (max-width: 767px) {

  .owl-sl-page.owl-sl-page--directory,
  .owl-sl-page.owl-sl-page--search {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* Search page mobile: stack the action buttons full-width (Figma) instead of
   the plugin's side-by-side 2-column layout. */
@media (max-width: 768px) {

  .owl-sl-page--search .owl-sl-search-form,
  .owl-sl-page--search .owl-sl-search-form:has(.owl-sl-search-form__directory-btn) {
    grid-template-columns: 1fr;
  }

  .owl-sl-page--search .owl-sl-search-form__location-btn,
  .owl-sl-page--search .owl-sl-search-form__directory-btn {
    grid-column: 1 / -1;
  }
}

@media (min-width: 768px) {

  .owl-sl-page.owl-sl-page--directory,
  .owl-sl-page.owl-sl-page--search {
    padding-left: clamp(24px, 2.60416667vw, 50px) !important;
    padding-right: clamp(24px, 2.60416667vw, 50px) !important;
  }
}