/*!
 * BL Blog Filters 2.0 — front-end styles
 *
 * Prefix: blf-
 * Every colour and font goes through var(--token, fallback) so the plugin
 * inherits the host theme's design tokens (base-blog-theme :root) and still
 * renders sensibly on a theme that does not define them.
 *
 * Contract (class names / ids) is defined in SPEC §3 and §5. Do not rename.
 *
 * Sections:
 *   1. Guards & utilities        ([hidden], .blf-sr-only, body lock)
 *   2. Shared controls           (.blf-select base, chevron)
 *   3. Toolbar                   (.blf-toolbar, search, market, open button)
 *   4. Active chips              (.blf-active, .blf-chip, .blf-clear)
 *   5. Drawer & backdrop         (.blf-backdrop, .blf-drawer, head, body)
 *   6. Facets                    (.blf-facet, selects, tag pills, groups)
 *   7. Results helpers           (.blf-more, .blf-more-btn, .blf-loader, busy state, empty state)
 *   8. Default card              (.blf-card — theme-agnostic fallback)
 *   9. Flags                     (.blf-flag-*; paths relative to this file)
 *  10. Responsive                (max-width: 640px)
 *  11. Reduced motion
 */

/* ==========================================================================
   1. Guards & utilities
   ========================================================================== */

/* JS toggles the `hidden` attribute. It must always win over our own
   display:flex / display:block declarations (drawer, backdrop, loader…).
   This is the ONLY place !important is allowed in this file. */
.blf-toolbar [hidden],
.blf-backdrop[hidden],
.blf-drawer[hidden],
.blf-drawer [hidden],
.blf-more[hidden],
.blf-more-btn[hidden],
.blf-loader[hidden],
[data-blf-pagination][hidden] {
  display: none !important;
}

/* Standard visually-hidden utility (labels, live status region). */
.blf-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Page scroll lock while the drawer is open (JS adds/removes the class). */
body.blf-drawer-open {
  overflow: hidden;
}

/* ==========================================================================
   2. Shared controls
   ========================================================================== */

/* Base <select> used in the drawer facets. The toolbar's market select
   shares the class and overrides the box model below (section 3).
   The chevron cannot read a CSS variable inside a data URI, so its colour
   is the --black fallback (#0C0212) hard-coded. */
.blf-select {
  display: block;
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 0 40px 0 14px;
  border: 1px solid var(--border, rgba(12, 2, 18, 0.1));
  border-radius: 12px;
  background-color: var(--white, #fff);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230C0212' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px 16px;
  color: var(--black, #0C0212);
  font-family: 'Mulish', sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.blf-select::-ms-expand {
  display: none;
}
.blf-select:focus {
  outline: none;
  border-color: var(--blue, #2F7DFF);
  box-shadow: 0 0 0 3px rgba(47, 125, 255, 0.25);
}
.blf-select:disabled {
  opacity: 0.5;
  cursor: default;
}

/* ==========================================================================
   3. Toolbar
   ========================================================================== */

.blf-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 1.25rem;
  font-family: 'Mulish', sans-serif;
  color: var(--black, #0C0212);
}

/* --- Search pill ------------------------------------------------------- */

.blf-search {
  position: relative;
  flex: 1 1 260px;
  min-width: 0;
  margin: 0;
}
.blf-input {
  display: block;
  width: 100%;
  height: 40px;
  margin: 0;
  padding: 0 44px 0 16px;
  border: 1px solid var(--border, rgba(12, 2, 18, 0.1));
  border-radius: 20px;
  background: var(--white, #fff);
  color: var(--black, #0C0212);
  font-family: 'Mulish', sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.blf-input::placeholder {
  color: var(--muted, #6b6b7b);
  font-weight: 600;
  opacity: 1;
}
/* The native WebKit clear button would sit under our icon button. */
.blf-input::-webkit-search-decoration,
.blf-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}
.blf-input:focus {
  outline: none;
  border-color: var(--blue, #2F7DFF);
  box-shadow: 0 0 0 3px rgba(47, 125, 255, 0.25);
}
.blf-search-btn {
  position: absolute;
  top: 50%;
  right: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted, #6b6b7b);
  cursor: pointer;
  transform: translateY(-50%);
  transition: color 0.15s, background-color 0.15s;
}
.blf-search-btn:hover,
.blf-search-btn:focus-visible {
  color: var(--blue, #2F7DFF);
  background: var(--blue-light, #e8f0ff);
  outline: none;
}
/* The inline SVG must use currentColor (stroke or fill) to pick up the colour. */
.blf-search-btn svg {
  display: block;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

/* --- Market pill ------------------------------------------------------- */

.blf-market {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--border, rgba(12, 2, 18, 0.1));
  border-radius: 20px;
  background: var(--white, #fff);
  transition: border-color 0.15s, box-shadow 0.15s;
}
/* The select inside has no border of its own; the pill carries the ring. */
.blf-market:focus-within {
  border-color: var(--blue, #2F7DFF);
  box-shadow: 0 0 0 3px rgba(47, 125, 255, 0.25);
}
.blf-label {
  margin: 0;
  color: var(--muted, #6b6b7b);
  font-family: 'Mulish', sans-serif;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}
.blf-flag {
  display: inline-block;
  flex: 0 0 auto;
  width: 22px;
  height: 15px;
  border-radius: 3px;
  background-color: var(--gray, #f4f4f6);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  /* Faint ring so the white parts of flags stay visible on the white pill. */
  box-shadow: inset 0 0 0 1px rgba(12, 2, 18, 0.08);
}
/* Overrides the .blf-select base: borderless, compact, chevron flush right. */
.blf-market-select {
  display: block;
  width: auto;
  max-width: 160px;
  height: 38px;
  padding: 0 20px 0 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-position: right 0 center;
  background-size: 14px 14px;
  font-size: 12px;
  font-weight: 700;
}
.blf-market-select:focus {
  border-color: transparent;
  box-shadow: none;
}

/* --- "All filters" button --------------------------------------------- */

.blf-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  margin: 0;
  padding: 0 18px;
  border: 0;
  border-radius: 20px;
  background: var(--black, #0C0212);
  color: var(--white, #fff);
  font-family: 'Mulish', sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s, box-shadow 0.15s;
}
.blf-open:hover,
.blf-open[aria-expanded="true"] {
  background: var(--blue, #2F7DFF);
  color: var(--white, #fff);
}
.blf-open:focus-visible {
  outline: none;
  background: var(--blue, #2F7DFF);
  box-shadow: 0 0 0 3px rgba(47, 125, 255, 0.35);
}
.blf-open svg {
  display: block;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

/* ==========================================================================
   4. Active chips
   ========================================================================== */

.blf-active {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.blf-active:empty {
  display: none;
}
.blf-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  margin: 0;
  padding: 5px 10px 5px 12px;
  border: 1px solid transparent;
  border-radius: 20px;
  background: var(--blue-light, #e8f0ff);
  color: var(--blue-dark, #1a5fd4);
  font-family: 'Mulish', sans-serif;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.4;
  text-align: left;
  /* A 100-char phrase without spaces (URL, SKU) must wrap inside the pill
     instead of forcing horizontal page overflow on mobile. */
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.blf-chip:hover,
.blf-chip:focus-visible {
  background: var(--blue, #2F7DFF);
  color: var(--white, #fff);
  outline: none;
}
/* The trailing "×" glyph: <span aria-hidden>×</span> */
.blf-chip > span {
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  opacity: 0.75;
}
.blf-chip:hover > span,
.blf-chip:focus-visible > span {
  opacity: 1;
}
.blf-clear {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 5px 12px;
  border: 1px solid var(--border, rgba(12, 2, 18, 0.1));
  border-radius: 20px;
  background: var(--white, #fff);
  color: var(--black, #0C0212);
  font-family: 'Mulish', sans-serif;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.blf-clear:hover,
.blf-clear:focus-visible {
  border-color: var(--blue, #2F7DFF);
  color: var(--blue, #2F7DFF);
  outline: none;
}

/* ==========================================================================
   5. Drawer & backdrop
   z-index 1200/1201 sits above the theme's sticky nav (z-index 100/101).
   JS: un-hide, then add .is-open on the next frame so the transition runs.
   ========================================================================== */

.blf-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(12, 2, 18, 0.45);
  opacity: 0;
  transition: opacity 0.2s;
}
.blf-backdrop.is-open {
  opacity: 1;
}

.blf-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1201;
  display: flex;
  flex-direction: column;
  width: min(440px, 100%);
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  background: var(--white, #fff);
  color: var(--black, #0C0212);
  box-shadow: -12px 0 40px rgba(12, 2, 18, 0.18);
  transform: translateX(100%);
  transition: transform 0.25s ease;
  font-family: 'Mulish', sans-serif;
}
.blf-drawer.is-open {
  transform: none;
}

.blf-drawer-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border, rgba(12, 2, 18, 0.1));
}
.blf-drawer-title {
  margin: 0;
  color: var(--black, #0C0212);
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
}
.blf-drawer-close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--gray, #f4f4f6);
  color: var(--black, #0C0212);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.blf-drawer-close:hover,
.blf-drawer-close:focus-visible {
  background: var(--blue-light, #e8f0ff);
  color: var(--blue, #2F7DFF);
  outline: none;
}
.blf-drawer-close svg {
  display: block;
  width: 16px;
  height: 16px;
}

.blf-drawer-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 1.5rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* ==========================================================================
   6. Facets
   ========================================================================== */

.blf-facet {
  margin: 0;
}
.blf-facet + .blf-facet {
  margin-top: 1.5rem;
}
.blf-facet-title {
  display: block;
  margin: 0 0 8px;
  color: var(--muted, #6b6b7b);
  font-family: 'Mulish', sans-serif;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

/* Tag cloud: groups are full-width headings, tags are .filter-btn-like pills. */
.blf-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
}
.blf-tag-group {
  flex-basis: 100%;
  margin: 12px 0 4px;
  color: var(--black, #0C0212);
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
}
.blf-tag-group:first-child {
  margin-top: 0;
}
.blf-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  margin: 0;
  padding: 7px 14px;
  border: 1px solid var(--border, rgba(12, 2, 18, 0.1));
  border-radius: 20px;
  background: var(--white, #fff);
  color: var(--black, #0C0212);
  font-family: 'Mulish', sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.blf-tag:hover,
.blf-tag:focus-visible {
  border-color: var(--blue, #2F7DFF);
  color: var(--blue, #2F7DFF);
  outline: none;
}
.blf-tag[aria-pressed="true"] {
  background: var(--blue, #2F7DFF);
  border-color: var(--blue, #2F7DFF);
  color: var(--white, #fff);
}
/* A pressed tag already has the blue border/text, so its focus needs a ring. */
.blf-tag[aria-pressed="true"]:focus-visible {
  box-shadow: 0 0 0 3px rgba(47, 125, 255, 0.35);
}
.blf-tag-count {
  color: var(--muted, #6b6b7b);
  font-size: 11px;
  font-weight: 700;
}
.blf-tag[aria-pressed="true"] .blf-tag-count {
  color: inherit;
  opacity: 0.8;
}

/* ==========================================================================
   7. Results helpers
   .blf-more is inserted by JS AFTER [data-blf-results] (a sibling, not a grid
   child), so it centres itself with the theme's container tokens.
   ========================================================================== */

.blf-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: var(--max-w, 1280px);
  margin: 0 auto;
  padding: 0 var(--px, 2rem) 3rem;
  text-align: center;
}
.blf-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  margin: 0;
  padding: 0 28px;
  border: 0;
  border-radius: 22px;
  background: var(--blue, #2F7DFF);
  color: var(--white, #fff);
  font-family: 'Mulish', sans-serif;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s, box-shadow 0.15s;
}
.blf-more-btn:hover,
.blf-more-btn:focus-visible {
  background: var(--blue-dark, #1a5fd4);
  color: var(--white, #fff);
  outline: none;
}
.blf-more-btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(47, 125, 255, 0.35);
}
.blf-more-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Ring spinner */
.blf-loader {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border: 3px solid var(--blue-light, #e8f0ff);
  border-top-color: var(--blue, #2F7DFF);
  border-radius: 50%;
  animation: blf-spin 0.8s linear infinite;
}
@keyframes blf-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Dim the grid while a request is in flight. */
[data-blf-results] {
  transition: opacity 0.15s;
}
[data-blf-results][aria-busy="true"] {
  opacity: 0.6;
  pointer-events: none;
}

/* Empty state injected into the (3-column) grid must span the full row.
   .search-empty is the theme's block (via bl_blog_filters_no_results_html);
   .blf-empty is the plugin's theme-agnostic fallback. */
[data-blf-results] > .search-empty,
[data-blf-results] > .blf-empty {
  grid-column: 1 / -1;
}
.blf-empty {
  margin: 0 auto;
  padding: 1rem 0 2rem;
  max-width: 560px;
  color: var(--muted, #6b6b7b);
  font-family: 'Mulish', sans-serif;
  font-size: 14px;
  line-height: 1.7;
  text-align: center;
}

/* ==========================================================================
   8. Default card (theme-agnostic fallback; the theme normally overrides
      rendering via bl_blog_filters_render_post, so keep this minimal)
   ========================================================================== */

.blf-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border, rgba(12, 2, 18, 0.1));
  border-radius: 12px;
  background: var(--white, #fff);
  color: var(--black, #0C0212);
  font-family: 'Mulish', sans-serif;
  transition: border-color 0.15s;
}
.blf-card:hover {
  border-color: var(--blue, #2F7DFF);
}
.blf-card-thumb {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--gray, #f4f4f6);
}
.blf-card-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.blf-card-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 1.1rem 1.2rem 1.3rem;
}
.blf-card-title {
  margin: 0 0 8px;
  color: var(--black, #0C0212);
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
}
.blf-card-title a {
  color: inherit;
  text-decoration: none;
}
.blf-card-title a:hover,
.blf-card-title a:focus-visible {
  color: var(--blue, #2F7DFF);
}
.blf-card-excerpt {
  margin: 0 0 12px;
  color: var(--muted, #6b6b7b);
  font-size: 11px;
  line-height: 1.6;
}
.blf-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  color: var(--muted, #6b6b7b);
  font-size: 10px;
  line-height: 1.4;
}

/* ==========================================================================
   9. Flags (paths are relative to this CSS file: assets/flags/*.svg)
   ========================================================================== */

.blf-flag-worldwide {
  background-image: url(flags/worldwide.svg);
  background-size: contain;
  background-color: var(--white, #fff);
}
.blf-flag-us {
  background-image: url(flags/us.svg);
}
.blf-flag-uk,
.blf-flag-gb {
  background-image: url(flags/gb.svg);
}
.blf-flag-in {
  background-image: url(flags/in.svg);
}

/* ==========================================================================
   10. Responsive
   ========================================================================== */

@media (max-width: 640px) {
  .blf-toolbar {
    gap: 10px;
  }
  /* Search takes its own row; market + "All filters" share the next one. */
  .blf-search {
    flex-basis: 100%;
  }
  .blf-market,
  .blf-open {
    flex: 1 1 0;
    min-width: 0;
  }
  .blf-market {
    justify-content: flex-start;
  }
  .blf-market-select {
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
    min-width: 0;
  }
  .blf-drawer {
    width: 100%;
    box-shadow: none;
  }
  .blf-drawer-head {
    padding: 1rem 1.25rem;
  }
  .blf-drawer-body {
    padding: 1.25rem;
  }
}

/* ==========================================================================
   11. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .blf-backdrop,
  .blf-drawer,
  .blf-select,
  .blf-input,
  .blf-search-btn,
  .blf-market,
  .blf-open,
  .blf-chip,
  .blf-clear,
  .blf-drawer-close,
  .blf-tag,
  .blf-more-btn,
  .blf-card,
  [data-blf-results] {
    transition: none;
  }
  .blf-loader {
    animation: none;
  }
}