/* =========================================================
   Peptide Bulk Pricing v6.2.0 – Frontend Styles
   Developer: Developer Sazzad
   ========================================================= */

:root {
  --pbp-table-bg:             #1a1f2e;
  --pbp-table-border:         #2d3548;
  --pbp-card-bg:              #0f1320;
  --pbp-badge-bg:             #c9a84c;
  --pbp-badge-text:           #1a1a1a;
  --pbp-price-color:          #c9a84c;
  --pbp-heading-color:        #ffffff;
  --pbp-subtext-color:        #9ca3af;
  --pbp-discount-bar-bg:      #fefce8;
  --pbp-discount-bar-border:  #eab308;
  --pbp-discount-badge-bg:    #eab308;
  --pbp-discount-badge-text:  #1a1a1a;
  --pbp-contact-btn-bg:       #c9a84c;
  --pbp-contact-btn-text:     #1a1a1a;
  --pbp-contact-btn-hover:    #b8973b;
  --pbp-selected-card-border: #c9a84c;
  --pbp-selected-card-bg:     #0f1320;
  --pbp-selected-card-glow:   rgba(201,168,76,0.22);
}

/* =========================================================
   HIDE WooCommerce DEFAULT VARIATION PRICE + CLEAR LINK
   ========================================================= */
.woocommerce div.product form.cart .woocommerce-variation-price,
.woocommerce div.product form.cart .woocommerce-variation-price *,
.woocommerce div.product .woocommerce-variation.single_variation,
.woocommerce div.product .woocommerce-variation.single_variation *,
.woocommerce div.product a.reset_variations,
.woocommerce div.product .reset_variations {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* =========================================================
   VARIATION LABEL TEXT COLOR
   ========================================================= */
.woocommerce div.product form.cart table.variations label,
.woocommerce div.product form.cart .variations label,
.woocommerce div.product .variations td.label label,
.woocommerce div.product .variations th.label {
  color: var(--pbp-variation-label-color, inherit) !important;
}

/* =========================================================
   FORM CART — WooCommerce overrides
   ========================================================= */
.woocommerce div.product form.cart {
  display: block !important;
  margin-bottom: 0 !important;
}

/* =========================================================
   BULK PRICING TABLE — Dark Gold Theme
   ========================================================= */
.pbp-bulk-table-wrap {
  background: var(--pbp-table-bg) !important;
  border: 1.5px solid var(--pbp-table-border) !important;
  border-radius: var(--pbp-table-radius, 14px) !important;
  padding: var(--pbp-table-padding, 20px) !important;
  margin: 0 0 18px 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  font-family: inherit !important;
}

/* Header row */
.pbp-bulk-table-header {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin-bottom: 18px !important;
}

.pbp-bulk-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  background: var(--pbp-header-icon-bg, rgba(201,168,76,0.12)) !important;
  border: 1px solid var(--pbp-header-icon-border, rgba(201,168,76,0.25)) !important;
  border-radius: 10px !important;
  color: var(--pbp-header-icon-color, var(--pbp-badge-bg)) !important;
}

.pbp-bulk-header-text {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}

.pbp-bulk-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--pbp-header-title-color, var(--pbp-badge-bg)) !important;
  font-size: var(--pbp-header-title-size, 16px) !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}

.pbp-bulk-subtitle {
  font-size: 13px !important;
  color: var(--pbp-header-subtitle-color, var(--pbp-subtext-color)) !important;
  font-size: var(--pbp-header-subtitle-size, 13px) !important;
  margin: 0 !important;
}

/* ---- Tier Cards row ---- */
.pbp-bulk-tiers {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
}

/* ══════════════════════════════════
   TIER CARDS — 3 states: Normal / Hover / Active
   ══════════════════════════════════ */

/* ── Normal (all cards) ── */
.pbp-tier-card {
  background: var(--pbp-card-bg-normal, var(--pbp-card-bg, #0f1320)) !important;
  border: 1.5px solid var(--pbp-card-border-normal, var(--pbp-table-border, #2d3548)) !important;
  border-radius: var(--pbp-card-radius, 10px) !important;
  padding: 16px 14px 14px !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  user-select: none !important;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.15s, background 0.18s !important;
  outline: none !important;
}

/* Standard card gets slightly muted bg */
.pbp-tier-card.pbp-tier-standard {
  background: var(--pbp-card-bg-std, rgba(255,255,255,0.04)) !important;
}

/* ── Hover ── */
.pbp-tier-card:hover:not(.pbp-tier-active) {
  background: var(--pbp-card-bg-hover, rgba(201,168,76,0.06)) !important;
  border-color: var(--pbp-card-border-hover, rgba(201,168,76,0.4)) !important;
  box-shadow: var(--pbp-card-shadow-hover, 0 4px 16px rgba(0,0,0,0.25)) !important;
  transform: translateY(-2px) !important;
}

/* ── Active / selected ── */
.pbp-tier-card.pbp-tier-active {
  background: var(--pbp-card-bg-active, var(--pbp-selected-card-bg, #0d1018)) !important;
  border-color: var(--pbp-card-border-active, var(--pbp-selected-card-border, #c9a84c)) !important;
  box-shadow: 0 0 0 2px var(--pbp-card-glow-active, var(--pbp-selected-card-glow, rgba(201,168,76,0.22))),
              0 6px 20px rgba(0,0,0,0.3) !important;
  transform: translateY(-3px) !important;
}

/* Badge: "10% OFF" */
.pbp-tier-badge {
  display: inline-block !important;
  background: var(--pbp-badge-bg) !important;
  color: var(--pbp-badge-text) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  border-radius: var(--pbp-badge-radius, 4px) !important;
  padding: 3px 8px !important;
  margin-bottom: 10px !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

/* "Standard Price" label */
.pbp-tier-badge.pbp-tier-badge--std {
  background: transparent !important;
  color: var(--pbp-subtext-color) !important;
  padding-left: 0 !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  margin-bottom: 6px !important;
}

.pbp-tier-qty {
  font-size: var(--pbp-card-qty-size, 14px) !important;
  font-weight: 600 !important;
  color: var(--pbp-heading-color) !important;
  margin-bottom: 6px !important;
  line-height: 1.3 !important;
}

.pbp-tier-custom-label {
  font-size: 11px !important;
  color: var(--pbp-subtext-color) !important;
  margin-bottom: 4px !important;
}

.pbp-tier-price {
  font-size: var(--pbp-card-price-size, 15px) !important;
  font-weight: 700 !important;
  color: var(--pbp-price-color) !important;
  margin-top: 4px !important;
  line-height: 1.2 !important;
}

.pbp-tier-price .woocommerce-Price-amount,
.pbp-tier-price bdi {
  color: var(--pbp-price-color) !important;
}

.pbp-tier-price .pbp-each {
  font-size: 12px !important;
  font-weight: 400 !important;
  color: var(--pbp-subtext-color) !important;
}

.pbp-tier-save {
  display: inline-flex !important;
  align-items: center !important;
  background: var(--pbp-save-bg, rgba(201,168,76,0.12)) !important;
  border: 1px solid var(--pbp-save-border, rgba(201,168,76,0.35)) !important;
  color: var(--pbp-save-color, var(--pbp-badge-bg)) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  border-radius: 20px !important;
  padding: 3px 10px !important;
  margin-top: 10px !important;
  white-space: nowrap !important;
}

.pbp-tier-save .woocommerce-Price-amount,
.pbp-tier-save bdi {
  color: var(--pbp-badge-bg) !important;
}

/* =========================================================
   ADD TO CART BUTTON
   — Width, padding, and border-radius are output directly by
     render_css_vars() in class-pbp-frontend.php as real CSS
     rules with !important so Elementor cannot override them.
     The static defaults (fit-content / 16px) are also output
     there, so NO button width/padding rules live here.
   ========================================================= */

/* Cart row: qty FIRST, then button — proper order on all devices */
form.cart .cart {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
}

/* Quantity always first */
form.cart .cart .quantity {
  flex: 0 0 auto !important;
  order: 1 !important;
  float: none !important;
  margin: 0 !important;
}

/* Button always second */
form.cart .cart .single_add_to_cart_button,
.woocommerce div.product form.cart .button {
  order: 2 !important;
  float: none !important;
  vertical-align: middle !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}

/* Mobile: stack qty then button vertically */
@media (max-width: 600px) {
  form.cart .cart {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  form.cart .cart .quantity { width: 100% !important; }
  form.cart .cart .single_add_to_cart_button { width: 100% !important; }
}

form.cart .single_add_to_cart_button:not(.pbp-contact-mode) {
  background-color: var(--pbp-btn-bg, inherit) !important;
  color: var(--pbp-btn-text, inherit) !important;
  transition: background-color 0.22s ease, color 0.22s ease, transform 0.18s ease, box-shadow 0.22s ease !important;
}

form.cart .single_add_to_cart_button:not(.pbp-contact-mode):hover {
  background-color: var(--pbp-btn-hover-bg, var(--pbp-btn-bg, inherit)) !important;
  color: var(--pbp-btn-hover-text, var(--pbp-btn-text, inherit)) !important;
}

/* ── Button Animations ── */
/* Pulse */
form.cart .single_add_to_cart_button.pbp-anim-pulse {
  animation: pbpBtnPulse 2s ease-in-out infinite !important;
}
@keyframes pbpBtnPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--pbp-btn-pulse-color, 201,168,76), 0.45); }
  50%       { box-shadow: 0 0 0 8px rgba(var(--pbp-btn-pulse-color, 201,168,76), 0); }
}

/* Shimmer */
form.cart .single_add_to_cart_button.pbp-anim-shimmer {
  position: relative !important;
  overflow: hidden !important;
}
form.cart .single_add_to_cart_button.pbp-anim-shimmer::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: -100% !important;
  width: 60% !important; height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.28), transparent) !important;
  animation: pbpBtnShimmer 2.2s ease-in-out infinite !important;
}
@keyframes pbpBtnShimmer {
  0%   { left: -100%; }
  100% { left: 180%; }
}

/* Bounce on hover */
form.cart .single_add_to_cart_button.pbp-anim-bounce:hover {
  animation: pbpBtnBounce 0.55s cubic-bezier(.36,.07,.19,.97) both !important;
}
@keyframes pbpBtnBounce {
  0%,100% { transform: translateY(0); }
  20%     { transform: translateY(-6px); }
  50%     { transform: translateY(-3px); }
  80%     { transform: translateY(-5px); }
}

/* Shake on hover */
form.cart .single_add_to_cart_button.pbp-anim-shake:hover {
  animation: pbpBtnShake 0.5s ease both !important;
}
@keyframes pbpBtnShake {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-5px); }
  40%     { transform: translateX(5px); }
  60%     { transform: translateX(-4px); }
  80%     { transform: translateX(4px); }
}

/* Scale glow on hover */
form.cart .single_add_to_cart_button.pbp-anim-glow:hover {
  transform: scale(1.04) !important;
  box-shadow: 0 6px 22px rgba(0,0,0,0.22) !important;
}

/* Slide text (reveal text on hover via pseudo clip) */
form.cart .single_add_to_cart_button.pbp-anim-slide {
  position: relative !important;
  overflow: hidden !important;
}
form.cart .single_add_to_cart_button.pbp-anim-slide .pbp-btn-hover-text {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: inherit !important;
  transform: translateY(100%) !important;
  transition: transform 0.28s cubic-bezier(.4,0,.2,1) !important;
}
form.cart .single_add_to_cart_button.pbp-anim-slide:hover .pbp-btn-default-text {
  transform: translateY(-100%) !important;
  transition: transform 0.28s cubic-bezier(.4,0,.2,1) !important;
}
form.cart .single_add_to_cart_button.pbp-anim-slide:hover .pbp-btn-hover-text {
  transform: translateY(0) !important;
}

/* =========================================================
   ANIMATIONS
   ========================================================= */
@keyframes pbpFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   DISCOUNT CARD
   ========================================================= */
.pbp-discount-card {
  align-items: stretch !important;
  background: #ffffff !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 12px !important;
  margin-top: 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  animation: pbpFadeIn 0.2s ease !important;
}

.pbp-dc-left {
  flex: 1 1 0% !important;
  padding: 14px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 5px !important;
  border-right: 1.5px solid #e5e7eb !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.pbp-dc-badge {
  display: inline-flex !important;
  align-items: center !important;
  align-self: flex-start !important;
  background: var(--pbp-discount-badge-bg, #eab308) !important;
  color: var(--pbp-discount-badge-text, #1a1a1a) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  border-radius: 4px !important;
  padding: 3px 9px !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

.pbp-dc-label {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  line-height: 1.3 !important;
}

.pbp-dc-sub {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}

.pbp-dc-range { font-size: 12px !important; color: #6b7280 !important; }
.pbp-dc-dot   { color: #9ca3af !important; font-size: 11px !important; }
.pbp-dc-save  { font-size: 12px !important; font-weight: 600 !important; color: #16a34a !important; }

.pbp-dc-right {
  flex: 0 0 auto !important;
  min-width: 220px !important;
  padding: 14px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

.pbp-dc-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
}

.pbp-dc-row-label { font-size: 12px !important; color: #6b7280 !important; white-space: nowrap !important; }
.pbp-dc-row-val   { font-size: 13px !important; color: #111827 !important; font-weight: 500 !important; white-space: nowrap !important; }
.pbp-dc-val--strike { text-decoration: line-through !important; color: #9ca3af !important; }
.pbp-dc-val--green  { color: #16a34a !important; font-weight: 600 !important; }

.pbp-dc-divider {
  height: 1px !important;
  background: #e5e7eb !important;
  margin: 3px 0 !important;
  width: 100% !important;
}

.pbp-dc-total-label {
  font-size: 13px !important; font-weight: 700 !important; color: #111827 !important;
  text-transform: uppercase !important; letter-spacing: 0.06em !important; white-space: nowrap !important;
}

.pbp-dc-total-val {
  font-size: 22px !important; font-weight: 700 !important; color: #111827 !important; white-space: nowrap !important;
}

/* =========================================================
   SIMPLE TOTAL BAR
   ========================================================= */
.pbp-simple-total {
  align-items: center !important;
  justify-content: space-between !important;
  background: #f8f9fa !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 10px !important;
  padding: 13px 18px !important;
  margin-top: 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  animation: pbpFadeIn 0.2s ease !important;
}

.pbp-st-left { display: flex !important; flex-direction: column !important; gap: 2px !important; }
.pbp-st-label { font-size: 11px !important; font-weight: 700 !important; color: #6b7280 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; line-height: 1 !important; }
.pbp-st-sublabel { font-size: 11px !important; color: #9ca3af !important; line-height: 1 !important; }
.pbp-st-val { font-size: 20px !important; font-weight: 700 !important; color: #111827 !important; white-space: nowrap !important; }

/* =========================================================
   CONTACT US BUTTON
   ========================================================= */
form.cart .single_add_to_cart_button.pbp-contact-mode {
  background: var(--pbp-contact-btn-bg) !important;
  color: var(--pbp-contact-btn-text) !important;
  border-color: var(--pbp-contact-btn-bg) !important;
}

form.cart .single_add_to_cart_button.pbp-contact-mode:hover {
  background: var(--pbp-contact-btn-hover) !important;
  border-color: var(--pbp-contact-btn-hover) !important;
}

/* =========================================================
   MAX QTY MESSAGE
   ========================================================= */
.pbp-max-qty-message {
  background: #fff7ed !important;
  border: 1.5px solid #f97316 !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  margin-top: 10px !important;
  font-size: 13px !important;
  color: #9a3412 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* =========================================================
   QUANTITY STEPPER  [ − ] 0 [ + ]
   ========================================================= */
.woocommerce div.product form.cart .quantity,
form.cart .quantity {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

form.cart .quantity input.qty {
  width: 68px !important;
  height: 48px !important;
  text-align: center !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  border: 1.5px solid #d1d5db !important;
  border-left: none !important;
  border-right: none !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  color: #111827 !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  -moz-appearance: textfield !important;
  appearance: textfield !important;
}

form.cart .quantity input.qty::-webkit-inner-spin-button,
form.cart .quantity input.qty::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

form.cart .quantity .minus,
form.cart .quantity .plus {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  background: #f3f4f6 !important;
  color: #374151 !important;
  border: 1.5px solid #d1d5db !important;
  border-radius: 0 !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: background 0.15s, color 0.15s !important;
  user-select: none !important;
  text-decoration: none !important;
  box-shadow: none !important;
  outline: none !important;
}

form.cart .quantity .minus { border-radius: 8px 0 0 8px !important; border-right: none !important; }
form.cart .quantity .plus  { border-radius: 0 8px 8px 0 !important; border-left: none !important; }

form.cart .quantity .minus:hover,
form.cart .quantity .plus:hover {
  background: #e5e7eb !important;
  color: #111827 !important;
}

form.cart .quantity .minus:active,
form.cart .quantity .plus:active {
  background: #d1d5db !important;
}

/* =========================================================
   CART BADGE
   ========================================================= */
.pbp-cart-badge {
  display: inline-block !important;
  background: var(--pbp-badge-bg) !important;
  color: var(--pbp-badge-text) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 1px 6px !important;
  border-radius: 3px !important;
  margin-left: 4px !important;
}

/* =========================================================
   RESPONSIVE — Tier grid: 3 → 2 → 1
   ========================================================= */
@media (max-width: 1024px) {
  .pbp-bulk-tiers {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 640px) {
  .pbp-bulk-tiers {
    grid-template-columns: 1fr !important;
  }
  .pbp-discount-card {
    flex-direction: column !important;
  }
  .pbp-dc-left {
    border-right: none !important;
    border-bottom: 1.5px solid #e5e7eb !important;
  }
  .pbp-dc-right {
    min-width: unset !important;
    width: 100% !important;
  }
}