/* =========================================================
   Peptide Bulk Pricing v6.1.1 – Variation Swatches
   Developer: Developer Sazzad
   Fully CSS-var driven — all values from dashboard settings
   ========================================================= */

/* Fix WC table layout */
.woocommerce div.product table.variations td.value {
  width: auto !important;
}

/* ── Wrapper ── */
body .pbp-swatches-wrap {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--pbp-swatch-gap, 8px) !important;
  padding: 0 !important;
  margin: 0 0 12px 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  list-style: none !important;
  background: none !important;
  border: none !important;
  align-items: center !important;
}

/* ══════════════════════════════════════════════════
   PILL — Base / Normal State
   ══════════════════════════════════════════════════ */
body .pbp-swatches-wrap .pbp-swatch-pill {
  /* Layout */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  flex: 0 0 auto !important;

  /* Size */
  min-width: var(--pbp-swatch-width, 64px) !important;
  height: var(--pbp-swatch-height, auto) !important;
  padding: 7px 16px !important;
  margin: 0 !important;
  box-sizing: border-box !important;

  /* Shape */
  border-radius: var(--pbp-swatch-border-radius, 50px) !important;
  border: 1.5px solid var(--pbp-swatch-inactive-border, #d1d5db) !important;
  outline: none !important;
  box-shadow: none !important;
  cursor: pointer !important;

  /* Normal bg */
  background: var(--pbp-swatch-inactive-bg, #ffffff) !important;
  color: inherit !important; /* Let label span handle color */

  /* Transition */
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.12s !important;
}

/* ── Label text inside pill ── */
body .pbp-swatches-wrap .pbp-swatch-pill .pbp-swatch-label {
  font-size: var(--pbp-swatch-font-size, 13px) !important;
  font-weight: var(--pbp-swatch-font-weight, 500) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;

  /* Normal label color */
  color: var(--pbp-swatch-inactive-text, #1a1a1a) !important;
  transition: color 0.15s !important;
}

/* ══════════════════════════════════════════════════
   DOT — stock indicator
   ══════════════════════════════════════════════════ */
body .pbp-swatches-wrap .pbp-swatch-dot {
  display: inline-block !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  transition: background 0.15s !important;
}

body .pbp-swatches-wrap .pbp-dot-instock {
  background: var(--pbp-swatch-dot-instock, #22c55e) !important;
}

body .pbp-swatches-wrap .pbp-dot-outofstock {
  background: var(--pbp-swatch-dot-outofstock, #ef4444) !important;
}

/* ══════════════════════════════════════════════════
   HOVER State
   ══════════════════════════════════════════════════ */
body .pbp-swatches-wrap .pbp-swatch-pill:not(.pbp-swatch-active):not(.pbp-swatch-disabled):hover {
  background: var(--pbp-swatch-hover-bg, #f3f4f6) !important;
  border-color: var(--pbp-swatch-hover-border, #6b7280) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08) !important;
}

/* Hover label color */
body .pbp-swatches-wrap .pbp-swatch-pill:not(.pbp-swatch-active):not(.pbp-swatch-disabled):hover .pbp-swatch-label {
  color: var(--pbp-swatch-hover-text, #111827) !important;
}

/* ══════════════════════════════════════════════════
   ACTIVE State (selected)
   ══════════════════════════════════════════════════ */
body .pbp-swatches-wrap .pbp-swatch-pill.pbp-swatch-active {
  background: var(--pbp-swatch-active-bg, #1a1a1a) !important;
  border-color: var(--pbp-swatch-active-border, #1a1a1a) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.22) !important;
  transform: translateY(-1px) !important;
}

/* Active label color */
body .pbp-swatches-wrap .pbp-swatch-pill.pbp-swatch-active .pbp-swatch-label {
  color: var(--pbp-swatch-active-text, #ffffff) !important;
}

/* Active dot — semi-transparent white overlay */
body .pbp-swatches-wrap .pbp-swatch-pill.pbp-swatch-active .pbp-swatch-dot {
  background: rgba(255,255,255,0.55) !important;
}

/* ══════════════════════════════════════════════════
   DISABLED / Out of Stock
   ══════════════════════════════════════════════════ */
body .pbp-swatches-wrap .pbp-swatch-pill.pbp-swatch-disabled {
  opacity: 0.38 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  filter: grayscale(0.4) !important;
}