/* Book Promotion Services — frontend.css */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

:root {
  --bps-teal:      #00BFC1;
  --bps-teal-dark: #008C8E;
  --bps-sand:      #A69E83;
  --bps-bg:        #e7edf2;
  --bps-white:     #ffffff;
  --bps-dark:      #0d1b2a;
  --bps-text:      #1a1a2e;
  --bps-muted:     #6b7280;
  --bps-border:    #e5e7eb;
  --bps-radius:    8px;
  --bps-font:      'Montserrat', sans-serif;
}

.bps-directory {
  font-family: 'Montserrat', sans-serif !important;
  color: #111111 !important;
  max-width: 900px !important;
  margin: 0 auto !important;
}
.bps-directory *,
.bps-directory *::before,
.bps-directory *::after {
  box-sizing: border-box !important;
}
/* Reset theme list injections */
.bps-directory ul li::before,
.bps-directory ul li::after,
.bps-directory ol li::before,
.bps-directory ol li::after {
  display: none !important;
  content: none !important;
}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.bps-hero {
  background: #0d1b2a !important;
  border-radius: 8px !important;
  padding: 1.5rem !important;
  margin-bottom: 1.25rem !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  flex-wrap: wrap !important;
  gap: 1rem !important;
}
.bps-hero-title {
  color: #fff !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  margin: 0 0 4px !important;
  font-family: 'Montserrat', sans-serif !important;
}
.bps-hero-sub {
  color: rgba(255,255,255,.6) !important;
  font-size: 13px !important;
  margin: 0 !important;
}
.bps-stats {
  display: flex !important;
  gap: 1.5rem !important;
  flex-wrap: wrap !important;
}
.bps-stat {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  color: rgba(255,255,255,.8) !important;
  font-size: 12px !important;
}
.bps-stat-num {
  color: #00BFC1 !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}

/* ── Filters ─────────────────────────────────────────────────────────────── */
.bps-filter-bar {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
  align-items: center !important;
}
.bps-filter-row {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin-bottom: 10px !important;
  align-items: center !important;
}
.bps-filter-label {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #6b7280 !important;
  min-width: 62px !important;
  flex-shrink: 0 !important;
}
.bps-search-wrap {
  position: relative !important;
}
.bps-search-icon {
  position: absolute !important;
  left: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 14px !important;
  color: #6b7280 !important;
  pointer-events: none !important;
}
.bps-search-input {
  width: 100% !important;
  padding: 8px 12px 8px 34px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-family: 'Montserrat', sans-serif !important;
  background: #ffffff !important;
  color: #111111 !important;
  outline: none !important;
}
.bps-search-input:focus {
  border-color: #00BFC1 !important;
  box-shadow: 0 0 0 3px rgba(0,191,193,.28) !important;
}
.bps-select {
  padding: 7px 10px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-family: 'Montserrat', sans-serif !important;
  background: #ffffff !important;
  color: #111111 !important;
  cursor: pointer !important;
}
.bps-select:focus {
  border-color: #00BFC1 !important;
  outline: none !important;
}

/* ── Checkboxes ──────────────────────────────────────────────────────────── */
.bps-cb-group {
  display: flex !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}
.bps-cb-label {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 13px !important;
  color: #6b7280 !important;
  cursor: pointer !important;
  padding: 5px 10px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 20px !important;
  background: #ffffff !important;
  user-select: none !important;
  transition: background .15s, border-color .15s !important;
  font-family: 'Montserrat', sans-serif !important;
}
.bps-cb-label:hover { background: #e7edf2 !important; }
.bps-cb-label.is-checked {
  background: #00BFC1 !important;
  border-color: #008C8E !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}
.bps-cb-label input {
  accent-color: #00BFC1 !important;
  width: 13px !important;
  height: 13px !important;
}
.bps-and-note {
  font-size: 11px !important;
  color: #6b7280 !important;
  align-self: center !important;
}

/* ── Active filter tags ──────────────────────────────────────────────────── */
.bps-active-tags {
  display: flex !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  margin-bottom: 10px !important;
}
.bps-active-tag {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 4px 10px !important;
  background: #00BFC1 !important;
  color: #ffffff !important;
  border-radius: 20px !important;
  cursor: pointer !important;
  font-family: 'Montserrat', sans-serif !important;
  border: none !important;
  transition: background .15s !important;
}
.bps-active-tag:hover { background: #008C8E !important; color: #ffffff !important; }

/* ── Results bar ─────────────────────────────────────────────────────────── */
.bps-results-bar {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 13px !important;
  color: #6b7280 !important;
  margin-bottom: 12px !important;
}
.bps-clear-btn {
  background: none !important;
  border: none !important;
  color: #00BFC1 !important;
  font-size: 13px !important;
  cursor: pointer !important;
  font-family: 'Montserrat', sans-serif !important;
  padding: 0 !important;
  text-decoration: underline !important;
}

/* ── Cards ───────────────────────────────────────────────────────────────── */
#bps-directory .bps-cards {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
#bps-directory .bps-card {
  background: #ffffff !important;
  border: 1px solid #d4dce3 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 10px rgba(13,27,42,.06) !important;
  transition: border-color .15s, box-shadow .15s !important;
}
#bps-directory .bps-card:hover { border-color: #00BFC1 !important; box-shadow: 0 4px 18px rgba(0,191,193,.18) !important; }
#bps-directory .bps-card.is-hidden { display: none !important; }

/* Zone 1 — Header: white bg */
#bps-directory .bps-card-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: .875rem 1.25rem !important;
  background: #ffffff !important;
}
#bps-directory .bps-card-identity {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  flex: 1 !important;
}
#bps-directory .bps-card-logo {
  width: 36px !important;
  height: 36px !important;
  border-radius: 6px !important;
  object-fit: contain !important;
  border: 0.5px solid #e5e7eb !important;
  flex-shrink: 0 !important;
  background: #e7edf2 !important;
}
#bps-directory .bps-card-logo-placeholder {
  width: 36px !important;
  height: 36px !important;
  border-radius: 6px !important;
  background: #00BFC1 !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  font-family: 'Montserrat', sans-serif !important;
}
#bps-directory .bps-card-name {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #111 !important;
  text-decoration: none !important;
  display: block !important;
  font-family: 'Montserrat', sans-serif !important;
  line-height: 1.3 !important;
}
#bps-directory .bps-card-name:hover { color: #00BFC1 !important; text-decoration: none !important; }
#bps-directory .bps-card-bestfor {
  font-size: 12px !important;
  color: #6b7280 !important;
  margin: 3px 0 0 !important;
  font-family: 'Montserrat', sans-serif !important;
}
#bps-directory .bps-card-price-wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 5px !important;
  flex-shrink: 0 !important;
}
.bps-list-badge {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #00BFC1 !important;
  white-space: nowrap !important;
}
.bps-price-badge {
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 3px 9px !important;
  border-radius: 20px !important;
  white-space: nowrap !important;
  font-family: 'Montserrat', sans-serif !important;
}
.bps-price-free {
  background: #00BFC1 !important;
  color: #ffffff !important;
  border-color: #00BFC1 !important;
}
.bps-price-paid {
  background: #e7edf2 !important;
  color: #555 !important;
}

/* Zone 2 — Description: light grey bg */
#bps-directory .bps-card-desc-zone {
  padding: .875rem 1.25rem !important;
  background: #eef3f6 !important;
  border-top: 0.5px solid #e5e7eb !important;
  border-bottom: 0.5px solid #e5e7eb !important;
}
#bps-directory .bps-card-desc {
  font-size: 14px !important;
  color: #374151 !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  font-family: 'Montserrat', sans-serif !important;
}

/* Zone 3 — Footer: white bg, tags + Learn more */
#bps-directory .bps-card-foot {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: .75rem 1.25rem !important;
  background: #ffffff !important;
  flex-wrap: wrap !important;
}
#bps-directory .bps-card-tags-row {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  flex-wrap: wrap !important;
  flex: 1 !important;
  min-width: 0 !important;
}

/* ── Tags ────────────────────────────────────────────────────────────────── */
#bps-directory .bps-tag {
  font-size: 11px !important;
  padding: 3px 8px !important;
  border-radius: 20px !important;
  white-space: nowrap !important;
  font-family: 'Montserrat', sans-serif !important;
}
#bps-directory .bps-tag--type     { background: #ebebeb !important; color: #444 !important; }
#bps-directory .bps-tag--genre    { background: #f0ece0 !important; color: #6b5c3e !important; }
#bps-directory .bps-tag--accepts  { background: #00BFC1 !important; color: #ffffff !important; font-weight: 600 !important; }
#bps-directory .bps-tag--req      { background: #f0e8d8 !important; color: #a06010 !important; }
#bps-directory .bps-tag--platform { background: #e8eeff !important; color: #3347b0 !important; }

/* ── Learn more button ───────────────────────────────────────────────────── */
#bps-directory .bps-learn-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 6px 14px !important;
  border: 1px solid #00BFC1 !important;
  border-radius: 8px !important;
  color: #00BFC1 !important;
  text-decoration: none !important;
  font-family: 'Montserrat', sans-serif !important;
  transition: background .15s !important;
  background: #ffffff !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}
#bps-directory .bps-learn-btn:hover {
  background: #00BFC1 !important;
  text-decoration: none !important;
  color: #ffffff !important;
  border-color: #00BFC1 !important;
}

/* ── Empty / no results ──────────────────────────────────────────────────── */
.bps-empty,
.bps-no-results {
  text-align: center !important;
  padding: 2.5rem !important;
  color: #6b7280 !important;
  font-size: 14px !important;
  font-family: 'Montserrat', sans-serif !important;
}

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.bps-faq {
  margin-top: 2rem !important;
  border-top: 1px solid #e5e7eb !important;
  padding-top: 1rem !important;
}
.bps-faq-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #111111 !important;
  margin-bottom: 12px !important;
  font-family: 'Montserrat', sans-serif !important;
}
.bps-faq-item {
  border-bottom: 1px solid #e5e7eb !important;
}
.bps-faq-q {
  width: 100% !important;
  text-align: left !important;
  background: none !important;
  border: none !important;
  padding: 12px 0 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #111111 !important;
  cursor: pointer !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-family: 'Montserrat', sans-serif !important;
  gap: 8px !important;
}
.bps-faq-q:hover { color: #00BFC1 !important; }
.bps-faq-icon {
  font-size: 18px !important;
  color: #00BFC1 !important;
  flex-shrink: 0 !important;
  transition: transform .2s !important;
  font-style: normal !important;
}
.bps-faq-a {
  font-size: 13px !important;
  color: #374151 !important;
  line-height: 1.6 !important;
  padding: 0 0 12px !important;
  display: none !important;
  font-family: 'Montserrat', sans-serif !important;
}
.bps-faq-a.is-open { display: block !important; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .bps-filter-bar {
    grid-template-columns: 1fr !important;
  }
  .bps-hero {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
#bps-directory .bps-card-top {
    flex-direction: column !important;
  }
  .bps-filter-label {
    min-width: 0 !important;
    width: 100% !important;
  }
}

/* ── [bps_faq] block ─────────────────────────────────────────────────────── */
.bps-faq-block {
  font-family: 'Montserrat', sans-serif !important;
  max-width: 860px !important;
  margin: 0 auto !important;
  padding: 1rem 0 !important;
}
.bps-faq-block-title {
  font-size: 22px !important;
  font-weight: 600 !important;
  color: #111111 !important;
  padding-bottom: 1rem !important;
  border-bottom: 2px solid #00BFC1 !important;
  margin-bottom: 1.75rem !important;
  font-family: 'Montserrat', sans-serif !important;
}
.bps-faq-block-item {
  margin-bottom: 1.5rem !important;
}
.bps-faq-block-q {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #111111 !important;
  margin: 0 0 .5rem !important;
  font-family: 'Montserrat', sans-serif !important;
  line-height: 1.5 !important;
}
.bps-faq-block-qlabel {
  color: #00BFC1 !important;
  font-weight: 600 !important;
  margin-right: 4px !important;
}
.bps-faq-block-a {
  font-size: 15px !important;
  color: #374151 !important;
  line-height: 1.7 !important;
  margin: 0 !important;
  font-family: 'Montserrat', sans-serif !important;
}

/* ── Card bottom: tags + Learn more on one row ───────────────────────────── */
#bps-directory .bps-card-bottom {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding-top: .75rem !important;
  margin-top: .75rem !important;
  border-top: 0.5px solid #e5e7eb !important;
  flex-wrap: wrap !important;
}
#bps-directory .bps-card-tags-row {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  flex-wrap: wrap !important;
  flex: 1 !important;
  min-width: 0 !important;
}
#bps-directory .bps-learn-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 6px 14px !important;
  border: 1px solid #00BFC1 !important;
  border-radius: 8px !important;
  color: #00BFC1 !important;
  text-decoration: none !important;
  font-family: 'Montserrat', sans-serif !important;
  transition: background .15s !important;
  background: transparent !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}
#bps-directory .bps-learn-btn:hover {
  background: #00BFC1 !important;
  text-decoration: none !important;
  color: #ffffff !important;
  border-color: #00BFC1 !important;
}


/* Card descriptions */
.bps-card-short-desc{
    color:#111827 !important;
    font-weight:600 !important;
}
.bps-card-full-desc{
    color:#374151 !important;
}


/* ─────────────────────────────────────────────────────────────
   v27 card redesign
   ───────────────────────────────────────────────────────────── */
#bps-directory {
  max-width: 980px !important;
}

#bps-directory .bps-cards {
  gap: 18px !important;
}

#bps-directory .bps-card {
  position: relative !important;
  background: #ffffff !important;
  border: 1px solid #d8e1e8 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 8px 24px rgba(13,27,42,.07) !important;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}

#bps-directory .bps-card:hover {
  border-color: rgba(0,191,193,.65) !important;
  box-shadow: 0 14px 34px rgba(13,27,42,.10) !important;
  transform: translateY(-1px) !important;
}

#bps-directory .bps-card--featured {
  border-color: rgba(0,191,193,.75) !important;
}

#bps-directory .bps-card-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 18px !important;
  padding: 24px 26px 18px !important;
  background: #ffffff !important;
}

#bps-directory .bps-card-identity {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  min-width: 0 !important;
  flex: 1 !important;
}

#bps-directory .bps-card-logo,
#bps-directory .bps-card-logo-placeholder {
  width: 70px !important;
  height: 70px !important;
  border-radius: 10px !important;
  flex-shrink: 0 !important;
}

#bps-directory .bps-card-logo {
  object-fit: contain !important;
  border: 1px solid #e5edf2 !important;
  background: #f4f8fa !important;
}

#bps-directory .bps-card-logo-placeholder {
  background: linear-gradient(135deg, #00BFC1, #009B9D) !important;
  color: #ffffff !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--bps-font) !important;
}

#bps-directory .bps-card-title-wrap {
  min-width: 0 !important;
}

#bps-directory .bps-card-name {
  color: #101828 !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: -.02em !important;
  text-decoration: none !important;
  font-family: var(--bps-font) !important;
  display: inline-block !important;
}

#bps-directory .bps-card-name:hover {
  color: #009B9D !important;
}

#bps-directory .bps-card-subtitle {
  margin: 6px 0 0 !important;
  color: #526174 !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
  font-family: var(--bps-font) !important;
}

#bps-directory .bps-card-actions {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  flex-shrink: 0 !important;
}

#bps-directory .bps-feature-star {
  color: #00A8AA !important;
  font-size: 28px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#bps-directory .bps-price-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 38px !important;
  padding: 8px 20px !important;
  border-radius: 999px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  font-family: var(--bps-font) !important;
}

#bps-directory .bps-price-free {
  background: #00BFC1 !important;
  color: #ffffff !important;
  border: 1px solid #00BFC1 !important;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.08) !important;
}

#bps-directory .bps-price-paid {
  background: #eef7f8 !important;
  color: #007b7d !important;
  border: 1px solid rgba(0,191,193,.35) !important;
}

#bps-directory .bps-bestfor-panel {
  display: grid !important;
  grid-template-columns: 48px 1fr !important;
  gap: 14px !important;
  align-items: center !important;
  margin: 0 26px 22px !important;
  padding: 18px 22px !important;
  background: linear-gradient(90deg, rgba(0,191,193,.08), rgba(0,191,193,.03)) !important;
  border-radius: 10px !important;
}

#bps-directory .bps-panel-icon {
  width: 42px !important;
  height: 42px !important;
  color: #009B9D !important;
}

#bps-directory .bps-panel-icon svg {
  width: 100% !important;
  height: 100% !important;
}

#bps-directory .bps-section-label {
  display: block !important;
  color: #344054 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  margin-bottom: 6px !important;
  font-family: var(--bps-font) !important;
}

#bps-directory .bps-bestfor-panel p {
  color: #101828 !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  line-height: 1.55 !important;
  margin: 0 !important;
  font-family: var(--bps-font) !important;
}

#bps-directory .bps-card-copy {
  padding: 0 26px 22px !important;
  background: #ffffff !important;
}

#bps-directory .bps-card-short-desc {
  color: #101828 !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  letter-spacing: -.015em !important;
  margin: 0 0 18px !important;
  font-family: var(--bps-font) !important;
}

#bps-directory .bps-card-full-desc {
  color: #475467 !important;
  font-size: 16px !important;
  line-height: 1.72 !important;
  margin: 0 !important;
  font-family: var(--bps-font) !important;
}

#bps-directory .bps-card-meta {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 !important;
  margin: 0 26px !important;
  padding: 20px 0 !important;
  border-top: 1px solid #dce5ec !important;
  border-bottom: 1px solid #dce5ec !important;
}

#bps-directory .bps-meta-block {
  padding: 0 20px !important;
  min-width: 0 !important;
  border-left: 1px solid #dce5ec !important;
}

#bps-directory .bps-meta-block:first-child {
  border-left: 0 !important;
  padding-left: 0 !important;
}

#bps-directory .bps-meta-block:last-child {
  padding-right: 0 !important;
}

#bps-directory .bps-meta-heading {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #526174 !important;
  text-transform: uppercase !important;
  letter-spacing: .055em !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  margin-bottom: 12px !important;
  font-family: var(--bps-font) !important;
}

#bps-directory .bps-meta-heading svg {
  width: 18px !important;
  height: 18px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  flex-shrink: 0 !important;
}

#bps-directory .bps-tag-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

#bps-directory .bps-tag {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 28px !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  font-family: var(--bps-font) !important;
}

#bps-directory .bps-tag--type {
  background: rgba(0,191,193,.12) !important;
  color: #006d70 !important;
}

#bps-directory .bps-tag--accepts {
  background: rgba(0,191,193,.16) !important;
  color: #007c7f !important;
}

#bps-directory .bps-tag--genre {
  background: #f0ece0 !important;
  color: #66583a !important;
  margin-top: 10px !important;
}

#bps-directory .bps-tag--req {
  background: #fff4e5 !important;
  color: #995c00 !important;
}

#bps-directory .bps-tag--platform {
  background: #eef4ff !important;
  color: #1d4ed8 !important;
}

#bps-directory .bps-meta-text {
  color: #344054 !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  margin: 0 !important;
  font-family: var(--bps-font) !important;
}

#bps-directory .bps-card-bottom {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 20px !important;
  padding: 22px 26px 24px !important;
  margin: 0 !important;
  border-top: 0 !important;
  background: #ffffff !important;
}

#bps-directory .bps-bottom-info {
  display: flex !important;
  align-items: flex-start !important;
  flex-wrap: wrap !important;
  gap: 22px !important;
  flex: 1 !important;
}

#bps-directory .bps-pricing-block,
#bps-directory .bps-audience-size-block {
  display: grid !important;
  grid-template-columns: 38px 1fr !important;
  gap: 12px !important;
  align-items: start !important;
  min-width: 190px !important;
}

#bps-directory .bps-bottom-icon {
  width: 34px !important;
  height: 34px !important;
  border-radius: 999px !important;
  border: 2px solid #00A8AA !important;
  color: #008C8E !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  font-family: var(--bps-font) !important;
}

#bps-directory .bps-pricing-block p,
#bps-directory .bps-audience-size-block p {
  color: #101828 !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
  margin: 0 0 4px !important;
  font-family: var(--bps-font) !important;
}

#bps-directory .bps-learn-btn {
  min-width: 220px !important;
  min-height: 54px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  padding: 14px 24px !important;
  border: 1px solid #00A8AA !important;
  border-radius: 8px !important;
  color: #008C8E !important;
  background: #ffffff !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  font-family: var(--bps-font) !important;
}

#bps-directory .bps-learn-btn:hover {
  background: #00BFC1 !important;
  color: #ffffff !important;
  border-color: #00BFC1 !important;
  text-decoration: none !important;
}

@media (max-width: 760px) {
  #bps-directory .bps-card-head,
  #bps-directory .bps-card-bottom {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  #bps-directory .bps-card-actions {
    justify-content: space-between !important;
  }

  #bps-directory .bps-card-meta {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  #bps-directory .bps-meta-block {
    border-left: 0 !important;
    padding: 0 !important;
  }

  #bps-directory .bps-learn-btn {
    width: 100% !important;
    min-width: 0 !important;
  }

  #bps-directory .bps-card-name {
    font-size: 22px !important;
  }

  #bps-directory .bps-card-short-desc {
    font-size: 18px !important;
  }

  #bps-directory .bps-bestfor-panel {
    grid-template-columns: 1fr !important;
  }
}


/* ─────────────────────────────────────────────────────────────
   v28 search icon + H2 card titles
   ───────────────────────────────────────────────────────────── */
#bps-directory .bps-card-title {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0 !important;
  line-height: 1 !important;
}

#bps-directory .bps-card-title .bps-card-name {
  color: #101828 !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: -.02em !important;
  text-decoration: none !important;
  font-family: var(--bps-font) !important;
  display: inline-block !important;
}

#bps-directory .bps-search-wrap,
#bps-directory .bps-search-field,
#bps-directory .bps-search-box {
  position: relative !important;
}

#bps-directory .bps-search-icon {
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 18px !important;
  height: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #008C8E !important;
  pointer-events: none !important;
  z-index: 2 !important;
  font-size: 0 !important;
}

#bps-directory .bps-search-icon svg,
#bps-directory .bps-search-inline-icon {
  width: 18px !important;
  height: 18px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  display: block !important;
}

#bps-directory input[type="search"].bps-search,
#bps-directory input.bps-search,
#bps-directory .bps-search-input {
  padding-left: 42px !important;
}

@media (max-width: 760px) {
  #bps-directory .bps-card-title .bps-card-name {
    font-size: 22px !important;
  }
}








/* ─────────────────────────────────────────────────────────────
   v32 final header fix
   ───────────────────────────────────────────────────────────── */

/* Fully remove legacy dark header */
#bps-directory .bps-header,
#bps-directory .bps-directory-header,
#bps-directory .bps-old-header,
#bps-directory .bps-legacy-header {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Main hero */
#bps-directory .bps-modern-hero {
  position: relative !important;
  overflow: hidden !important;
  margin: 0 0 18px !important;
  padding: 38px 42px 40px !important;
  border-radius: 16px !important;
  border: 1px solid #e1e9ef !important;
  background:
    radial-gradient(circle at 82% 12%, rgba(0,191,193,.13), transparent 36%),
    linear-gradient(135deg, #ffffff 0%, #f8fcfd 62%, #f1fbfb 100%) !important;
  box-shadow: 0 10px 34px rgba(15, 23, 42, .07) !important;
}

#bps-directory .bps-modern-hero::after {
  display: none !important;
  content: none !important;
}

#bps-directory .bps-hero-copy {
  position: relative !important;
  z-index: 2 !important;
  max-width: 980px !important;
}

#bps-directory .bps-hero-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 9px 16px !important;
  margin-bottom: 26px !important;
  border-radius: 999px !important;
  background: rgba(0,191,193,.13) !important;
  color: #008C8E !important;
  font-family: var(--bps-font) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  letter-spacing: .035em !important;
}

#bps-directory .bps-hero-mini-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  color: #009B9D !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

#bps-directory h1.bps-hero-title,
#bps-directory .bps-hero-title {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  margin: 0 !important;
  max-width: 980px !important;
  color: #0f172a !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(38px, 5vw, 58px) !important;
  line-height: 1.05 !important;
  letter-spacing: -.045em !important;
  font-weight: 800 !important;
  text-shadow: none !important;
}

#bps-directory .bps-hero-subtitle {
  max-width: 640px !important;
  margin: 24px 0 0 !important;
  color: #344054 !important;
  font-family: var(--bps-font) !important;
  font-size: 20px !important;
  line-height: 1.55 !important;
}

#bps-directory .bps-hero-stats {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 22px !important;
  margin-top: 30px !important;
}

#bps-directory .bps-hero-stat {
  display: grid !important;
  grid-template-columns: 54px auto !important;
  grid-template-rows: auto auto !important;
  column-gap: 14px !important;
  align-items: center !important;
  padding-right: 24px !important;
  border-right: 1px solid #d7e1e8 !important;
  min-width: 150px !important;
}

#bps-directory .bps-hero-stat:last-child {
  border-right: 0 !important;
}

#bps-directory .bps-stat-icon {
  grid-row: 1 / 3 !important;
  width: 52px !important;
  height: 52px !important;
  border-radius: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0,191,193,.11) !important;
  color: #009B9D !important;
  box-shadow: 0 8px 18px rgba(0,140,142,.12) !important;
  font-size: 25px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
}

#bps-directory .bps-hero-stat strong {
  color: #008C8E !important;
  font-family: var(--bps-font) !important;
  font-size: 30px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
}

#bps-directory .bps-hero-stat span:not(.bps-stat-icon) {
  color: #344054 !important;
  font-family: var(--bps-font) !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
}

/* Remove previous unwanted hero elements */
#bps-directory .bps-hero-updated,
#bps-directory .bps-hero-buttons {
  display: none !important;
}

/* Extra safety: hide any third stat if cached markup still contains it */
#bps-directory .bps-hero-stats .bps-hero-stat:nth-child(n+3) {
  display: none !important;
}

@media (max-width: 760px) {
  #bps-directory .bps-modern-hero {
    padding: 28px 22px !important;
    border-radius: 14px !important;
  }

  #bps-directory h1.bps-hero-title,
  #bps-directory .bps-hero-title {
    font-size: clamp(34px, 11vw, 46px) !important;
  }

  #bps-directory .bps-hero-subtitle {
    font-size: 17px !important;
  }

  #bps-directory .bps-hero-stat {
    width: 100% !important;
    border-right: 0 !important;
    padding-right: 0 !important;
  }
}


/* v33 remove remaining dark header block */
#bps-directory > .bps-header,
#bps-directory > .bps-directory-header,
#bps-directory > section.bps-header,
#bps-directory > section.bps-directory-header,
#bps-directory .bps-header-dark,
#bps-directory .bps-top-header,
#bps-directory .bps-stats-header,
#bps-directory .bps-legacy-header,
#bps-directory [class*="header"][style*="#081a2"],
#bps-directory [class*="header"][style*="#0b1"],
#bps-directory .bps-header + .bps-header,
#bps-directory .bps-directory-header + .bps-directory-header {
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    height:0 !important;
    min-height:0 !important;
    max-height:0 !important;
    overflow:hidden !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
}

/* specifically target duplicated old navy block */
#bps-directory div[style*="background:#081"],
#bps-directory div[style*="background: #081"],
#bps-directory div[style*="background:#0b1"],
#bps-directory div[style*="background: #0b1"]{
    display:none !important;
}


/* v34: old dark hero bar removed from PHP; hide any cached remnants */
#bps-directory > .bps-hero,
#bps-directory .bps-hero:not(.bps-modern-hero) {
    display:none !important;
    visibility:hidden !important;
    height:0 !important;
    min-height:0 !important;
    max-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    border:0 !important;
}


/* v35 larger filter typography */
#bps-directory .bps-filter-bar,
#bps-directory .bps-filter-bar label,
#bps-directory .bps-filter-group-title,
#bps-directory .bps-filter-chip,
#bps-directory .bps-checkbox-label,
#bps-directory select,
#bps-directory option,
#bps-directory .bps-search-input,
#bps-directory .bps-filter-pill {
    font-size: 15px !important;
}

#bps-directory .bps-filter-group-title,
#bps-directory .bps-filter-label {
    font-weight: 700 !important;
}

#bps-directory .bps-search-input {
    font-size: 16px !important;
}

#bps-directory select {
    min-height: 42px !important;
}

#bps-directory .bps-filter-chip,
#bps-directory .bps-checkbox-label {
    min-height: 38px !important;
}

/* ── Featured badge ──────────────────────────────────────────────────────── */
#bps-directory .bps-featured-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 5px 12px !important;
  background: rgba(0,191,193,.12) !important;
  border: 1px solid rgba(0,191,193,.4) !important;
  border-radius: 999px !important;
  color: #007b7d !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  font-family: var(--bps-font) !important;
  white-space: nowrap !important;
}
#bps-directory .bps-feature-star {
  color: #00A8AA !important;
  font-size: 14px !important;
  line-height: 1 !important;
}

/* ── Pagination ──────────────────────────────────────────────────────────── */
#bps-directory .bps-card.bps-page-hidden {
  display: none !important;
}
#bps-directory .bps-pagination {
  margin-top: 24px !important;
}
#bps-directory .bps-page-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}
#bps-directory .bps-page-btn {
  min-width: 38px !important;
  height: 38px !important;
  padding: 0 12px !important;
  border: 1px solid #d8e1e8 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #344054 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  font-family: var(--bps-font) !important;
  cursor: pointer !important;
  transition: background .15s, border-color .15s, color .15s !important;
  line-height: 1 !important;
}
#bps-directory .bps-page-btn:hover:not(:disabled) {
  background: rgba(0,191,193,.08) !important;
  border-color: #00BFC1 !important;
  color: #007b7d !important;
}
#bps-directory .bps-page-btn.bps-page-active {
  background: #00BFC1 !important;
  border-color: #00BFC1 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}
#bps-directory .bps-page-btn:disabled {
  opacity: .4 !important;
  cursor: default !important;
}
#bps-directory .bps-page-ellipsis {
  color: #6b7280 !important;
  padding: 0 4px !important;
  font-size: 14px !important;
  line-height: 38px !important;
}


/* v41 pagination/filter safety */
#bps-directory .bps-page-btn[disabled] {
    opacity: .45 !important;
    cursor: not-allowed !important;
}

/* ── [bps_article] ───────────────────────────────────────────────────────── */
.bps-article {
  font-family: 'Montserrat', sans-serif !important;
  max-width: 860px !important;
  margin: 2rem auto 0 !important;
  color: #1a1a1a !important;
}
.bps-article-section {
  margin-bottom: 2.5rem !important;
  padding-bottom: 2.5rem !important;
  border-bottom: 1px solid #e5e7eb !important;
}
.bps-article-section:last-child {
  border-bottom: none !important;
  margin-bottom: 0 !important;
}
.bps-article-heading {
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  margin: 0 0 1rem !important;
  padding-bottom: .5rem !important;
  border-bottom: 2px solid #00BFC1 !important;
  display: inline-block !important;
  font-family: 'Montserrat', sans-serif !important;
  line-height: 1.3 !important;
}
.bps-article-p {
  font-size: 15px !important;
  color: #374151 !important;
  line-height: 1.75 !important;
  margin: 0 0 1rem !important;
  font-family: 'Montserrat', sans-serif !important;
}
.bps-article-p:last-child { margin-bottom: 0 !important; }
.bps-article-list {
  padding-left: 1.25rem !important;
  margin: 0 0 1rem !important;
  list-style: disc !important;
}
.bps-article-list li {
  font-size: 15px !important;
  color: #374151 !important;
  line-height: 1.75 !important;
  margin-bottom: .4rem !important;
  font-family: 'Montserrat', sans-serif !important;
}
.bps-article-list li strong {
  color: #1e293b !important;
  font-weight: 600 !important;
}

/* ── Bottom Content ──────────────────────────────────────────────────────── */
#bps-directory .bps-bottom-content {
  margin-top: 3rem !important;
  padding-top: 2rem !important;
  border-top: 2px solid #f1f5f9 !important;
  color: #374151 !important;
  line-height: 1.8 !important;
  font-family: 'Montserrat', sans-serif !important;
}
#bps-directory .bps-bottom-content h2 {
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  margin: 2rem 0 1rem !important;
  padding-bottom: .5rem !important;
  border-bottom: 3px solid #00BFC1 !important;
  display: inline-block !important;
  font-family: 'Montserrat', sans-serif !important;
}
#bps-directory .bps-bottom-content h3 {
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  margin: 1.5rem 0 .75rem !important;
  font-family: 'Montserrat', sans-serif !important;
}
#bps-directory .bps-bottom-content p {
  margin: 0 0 1rem !important;
  font-size: 15px !important;
  font-family: 'Montserrat', sans-serif !important;
}
#bps-directory .bps-bottom-content ul,
#bps-directory .bps-bottom-content ol {
  margin: 0 0 1rem 1.5rem !important;
  padding: 0 !important;
}
#bps-directory .bps-bottom-content li {
  margin-bottom: .5rem !important;
  font-size: 15px !important;
  font-family: 'Montserrat', sans-serif !important;
}
#bps-directory .bps-bottom-content strong {
  color: #1e293b !important;
  font-weight: 600 !important;
}

/* ── FAQ filter link ─────────────────────────────────────────────────────── */
#bps-directory .bps-filter-faq-link {
  font-size: 12px !important;
  color: #00BFC1 !important;
  text-decoration: underline !important;
  white-space: nowrap !important;
  margin-left: 6px !important;
  align-self: center !important;
  font-family: 'Montserrat', sans-serif !important;
}
#bps-directory .bps-filter-faq-link:hover {
  color: #008C8E !important;
}

/* ── Update request CTA ──────────────────────────────────────────────────── */
#bps-directory .bps-update-cta {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 20px !important;
  padding: 14px 20px !important;
  background: rgba(22,173,175,.06) !important;
  border: 1px solid rgba(22,173,175,.2) !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-family: 'Montserrat', sans-serif !important;
  color: #374151 !important;
}
#bps-directory .bps-update-cta__icon {
  color: #16ADAF !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
}
#bps-directory .bps-update-cta__link {
  color: #16ADAF !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
}
#bps-directory .bps-update-cta__link:hover {
  color: #0e8f91 !important;
}

/* ── Two-column layout with sidebar ─────────────────────────────────────── */
#bps-directory.bps-directory--has-sidebar {
  display: grid !important;
  grid-template-columns: 1fr 280px !important;
  gap: 32px !important;
  align-items: start !important;
}
#bps-directory .bps-directory__main {
  min-width: 0 !important;
}
#bps-directory .bps-directory__sidebar {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
}

/* ── Sidebar widget ──────────────────────────────────────────────────────── */
#bps-directory .bps-sidebar-widget {
  background: linear-gradient(160deg, #edf9f9 0%, #d9f2f2 100%) !important;
  border: 1px solid #b8e4e4 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  font-family: 'Montserrat', sans-serif !important;
  padding: 24px 24px 20px !important;
}

/* Icon + badge on same row */
#bps-directory .bps-sidebar-widget__top {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
}
#bps-directory .bps-sidebar-widget__img {
  width: 52px !important;
  height: 52px !important;
  border-radius: 14px !important;
  object-fit: contain !important;
  background: rgba(22,173,175,.15) !important;
  padding: 10px !important;
  display: block !important;
  flex-shrink: 0 !important;
}

/* Badge label */
#bps-directory .bps-sidebar-widget__badge {
  display: inline-block !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase !important;
  color: #16ADAF !important;
  font-family: 'Montserrat', sans-serif !important;
  line-height: 1.3 !important;
}

/* Title */
#bps-directory .bps-sidebar-widget__title {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #0d2b3e !important;
  margin: 0 0 10px !important;
  line-height: 1.25 !important;
  font-family: 'Montserrat', sans-serif !important;
}

/* Body text */
#bps-directory .bps-sidebar-widget__text {
  font-size: 14px !important;
  color: #3d5a6a !important;
  line-height: 1.65 !important;
  margin-bottom: 20px !important;
  font-family: 'Montserrat', sans-serif !important;
}
#bps-directory .bps-sidebar-widget__text p {
  margin: 0 0 8px !important;
  font-size: 14px !important;
  color: #3d5a6a !important;
}
#bps-directory .bps-sidebar-widget__text p:last-child { margin-bottom: 0 !important; }

/* Button — always full-width filled teal with arrow */
#bps-directory .bps-sidebar-widget__btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 13px 18px !important;
  background: #16ADAF !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  font-family: 'Montserrat', sans-serif !important;
  text-align: center !important;
  text-decoration: none !important;
  border-radius: 8px !important;
  border: none !important;
  transition: background .15s !important;
  box-sizing: border-box !important;
  letter-spacing: .2px !important;
}
#bps-directory .bps-sidebar-widget__btn::after {
  content: '→' !important;
  font-size: 16px !important;
  line-height: 1 !important;
}
#bps-directory .bps-sidebar-widget__btn:hover {
  background: #0e8f91 !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

/* Collapse to single column on tablet/mobile */
@media (max-width: 900px) {
  #bps-directory.bps-directory--has-sidebar {
    grid-template-columns: 1fr !important;
  }
  #bps-directory .bps-directory__sidebar {
    position: static !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
  }
  #bps-directory .bps-sidebar-widget {
    flex: 1 1 240px !important;
  }
}