/**
 * BarkinBargain Reviews UX v4.0.2
 * Strong overrides for WooCommerce Photo Reviews (wcpr-*)
 * Fixes: All-stars dropdown cut-off, inconsistent colour, zero-count appearance
 */

:root {
  --bb-review-bg: #fafaf9;
  --bb-review-surface: #ffffff;
  --bb-review-border: #e7e5e4;
  --bb-review-text: #1c1917;
  --bb-review-muted: #78716c;
  --bb-review-accent: #166534;
  --bb-review-accent-soft: #dcfce7;
  --bb-review-radius: 10px;
  --bb-review-font: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* --------------------------------------------------------------------------
   Kill theme content-visibility that clips the filter dropdown
   -------------------------------------------------------------------------- */
.wcpr-filter-container,
#reviews .wcpr-filter-container,
.woocommerce-Reviews .wcpr-filter-container {
  content-visibility: visible !important;
  contain: none !important;
  contain-intrinsic-size: auto !important;
  overflow: visible !important;
  background: var(--bb-review-bg) !important;
  border: 1px solid var(--bb-review-border) !important;
  border-radius: var(--bb-review-radius) !important;
  padding: 0.75rem 1rem !important;
  margin-bottom: 1.5rem !important;
  box-shadow: none !important;
  position: relative !important;
  z-index: 5 !important;
}

/* Filter row layout */
.wcpr-filter-container,
.wcpr-filter-button-wrap,
.wcpr-filter-button-ul {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
  align-items: center !important;
  overflow: visible !important;
}

.wcpr-filter-button-li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  position: relative !important;
}

/* --------------------------------------------------------------------------
   ALL filter pills – same base style (including the All-stars wrap)
   -------------------------------------------------------------------------- */
.wcpr-filter-button,
a.wcpr-filter-button,
.wcpr-filter-button-images,
.wcpr-filter-button-verified,
.wcpr-filter-button-wrap,
.wcpr-filter-button-wrap.wcpr-filter-button,
.wcpr-filter-button-wrap.wcpr-active,
.wcpr-filter-rating-placeholder,
.wcpr-filter-button-li > a,
.wcpr-filter-button-ul li a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.35rem !important;
  background: #ffffff !important;
  color: #1c1917 !important;
  border: 1.5px solid #e7e5e4 !important;
  border-radius: 999px !important;
  padding: 0.45rem 1rem !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  overflow: visible !important;
  min-height: 2.15rem !important;
  height: auto !important;
  max-width: none !important;
  position: relative !important;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
}

/* Hover – identical soft green for every pill including All stars */
.wcpr-filter-button:hover,
a.wcpr-filter-button:hover,
.wcpr-filter-button-images:hover,
.wcpr-filter-button-verified:hover,
.wcpr-filter-button-wrap:hover,
.wcpr-filter-button-wrap.wcpr-filter-button:hover,
.wcpr-filter-rating-placeholder:hover,
.wcpr-filter-button-li > a:hover,
.wcpr-filter-button-ul li a:hover {
  background: #dcfce7 !important;
  border-color: #166534 !important;
  color: #166534 !important;
  text-decoration: none !important;
}

/* Active / selected – solid green + white text (All stars included) */
.wcpr-filter-button.wcpr-active,
a.wcpr-filter-button.wcpr-active,
.wcpr-filter-button-wrap.wcpr-active,
.wcpr-filter-button-wrap.wcpr-filter-button.wcpr-active,
.wcpr-filter-button-wrap.wcpr-active .wcpr-filter-rating-placeholder,
.wcpr-filter-button-li.wcpr-active > a,
.wcpr-filter-button-ul li.wcpr-active a,
.wcpr-filter-button.wcpr-active:hover,
.wcpr-filter-button-wrap.wcpr-active:hover,
.wcpr-filter-button-wrap.wcpr-active .wcpr-filter-rating-placeholder:hover {
  background: #166534 !important;
  border-color: #166534 !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

/* Placeholder text inside All-stars must inherit colour */
.wcpr-filter-button-wrap .wcpr-filter-rating-placeholder,
.wcpr-filter-button-wrap.wcpr-active .wcpr-filter-rating-placeholder {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  color: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  white-space: nowrap !important;
  display: inline !important;
}

/* Count spans */
.wcpr-filter-button-count {
  font-weight: 500 !important;
  color: inherit !important;
  opacity: 0.9;
}

/* --------------------------------------------------------------------------
   All-stars DROPDOWN – the real source of the cut-off
   -------------------------------------------------------------------------- */
.wcpr-filter-button-wrap {
  position: relative !important;
  overflow: visible !important;
  z-index: 20 !important;
}

.wcpr-filter-button-ul {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  left: 0 !important;
  right: auto !important;
  min-width: 160px !important;
  background: #ffffff !important;
  border: 1px solid #e7e5e4 !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
  padding: 0.4rem !important;
  margin: 0 !important;
  z-index: 50 !important;
  overflow: visible !important;
  display: none; /* plugin toggles this */
}

/* When plugin shows the dropdown, keep it fully visible */
.wcpr-filter-button-wrap:hover .wcpr-filter-button-ul,
.wcpr-filter-button-wrap.wcpr-active .wcpr-filter-button-ul,
.wcpr-filter-button-ul[style*="display: block"],
.wcpr-filter-button-ul[style*="display:block"] {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.25rem !important;
}

.wcpr-filter-button-ul .wcpr-filter-button-li,
.wcpr-filter-button-ul .wcpr-filter-button-li a {
  width: 100% !important;
  justify-content: flex-start !important;
  border-radius: 8px !important;
  border: none !important;
  background: transparent !important;
  color: #1c1917 !important;
  padding: 0.45rem 0.75rem !important;
  min-height: auto !important;
}

.wcpr-filter-button-ul .wcpr-filter-button-li a:hover {
  background: #dcfce7 !important;
  color: #166534 !important;
}

.wcpr-filter-button-ul .wcpr-filter-button-li a.wcpr-active,
.wcpr-filter-button-ul .wcpr-filter-button-li.wcpr-active a {
  background: #166534 !important;
  color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   Icons
   -------------------------------------------------------------------------- */
.wcpr-filter-button svg,
.wcpr-filter-button i,
.wcpr-filter-button-wrap svg,
.wcpr-filter-button-wrap i,
.wcpr-filter-button-li a svg,
.wcpr-filter-button-li a i {
  color: inherit !important;
  fill: currentColor !important;
  flex-shrink: 0 !important;
  width: 14px !important;
  height: 14px !important;
}

/* --------------------------------------------------------------------------
   Review cards (keep previous improvements)
   -------------------------------------------------------------------------- */
.wcpr-grid,
.wcpr-masonry-3-col {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1rem !important;
}

.wcpr-grid-item,
.wcpr-content .comment,
.woocommerce-Reviews .comment {
  background: #ffffff !important;
  border: 1px solid #e7e5e4 !important;
  border-radius: 10px !important;
  padding: 1.25rem !important;
  box-shadow: none !important;
  margin: 0 !important;
}

.wcpr-comment-author,
.woocommerce-review__author {
  font-weight: 600 !important;
  font-size: 0.9375rem !important;
  color: #1c1917 !important;
}

.woocommerce-review__verified,
.wcpr-content .verified,
[class*="verified"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  color: #166534 !important;
  background: #dcfce7 !important;
  padding: 0.15rem 0.5rem !important;
  border-radius: 999px !important;
}

/* Skeletons – keep short and non-dominant */
.wcpr-grid .wcpr-grid-item.loading,
.wcpr-content .skeleton,
[class*="skeleton"],
.wcpr-filter-rating-placeholder:empty {
  max-height: 18px !important;
  border-radius: 6px !important;
}

/* Mobile */
@media (max-width: 640px) {
  .wcpr-filter-container {
    padding: 0.5rem !important;
  }
  .wcpr-filter-button,
  .wcpr-filter-button-wrap,
  .wcpr-filter-button-li > a {
    font-size: 0.75rem !important;
    padding: 0.35rem 0.75rem !important;
  }
  .wcpr-filter-button-ul {
    min-width: 140px !important;
  }
}

/* Focus */
.wcpr-filter-button:focus-visible,
.wcpr-filter-button-wrap:focus-visible,
.wcpr-filter-button-li a:focus-visible {
  outline: 2px solid #166534 !important;
  outline-offset: 2px !important;
}

/* --------------------------------------------------------------------------
   Review star rating (injected)
   -------------------------------------------------------------------------- */
.bb-review-stars {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.15rem !important;
  margin: 0.25rem 0 0.5rem !important;
  line-height: 1 !important;
}

.bb-review-stars .bb-star {
  font-size: 1rem !important;
  color: #ca8a04 !important; /* warm amber */
  speak: never;
}

.bb-review-stars .bb-star-label {
  margin-left: 0.35rem !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  color: #78716c !important;
}

/* If plugin rating slot exists, keep layout tidy */
.wcpr-review-rating {
  display: flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  min-height: 1.25rem !important;
}

/* --------------------------------------------------------------------------
   Size guide readout (safe — does not alter swatch buttons)
   -------------------------------------------------------------------------- */
.bb-size-readout {
  margin: 0.5rem 0 0.85rem !important;
  padding: 0.55rem 0.75rem !important;
  background: #fafaf9 !important;
  border: 1px solid #e7e5e4 !important;
  border-radius: 8px !important;
  font-size: 0.8125rem !important;
  line-height: 1.4 !important;
  color: #1c1917 !important;
}

.bb-size-readout-label {
  color: #78716c !important;
  font-weight: 600 !important;
  margin-right: 0.4rem !important;
}

.bb-size-readout-value {
  font-weight: 500 !important;
  color: #166534 !important;
}