/**
 * PBC Backorder — Warning banners, badges, and card overlay styles.
 *
 * BEM naming: pbc-backorder-warning__*, pbc-backorder-badge, pbc-backorder-card-badge
 * Amber colour palette for backorder visual language.
 *
 * @package PBC_Core
 * @since 1.0.0
 */

/* ==========================================================================
   Backorder Warning Banner
   ========================================================================== */

.pbc-backorder-warning {
  margin: 16px 0;
  padding: 16px 20px;
  background: rgba(245, 158, 11, 0.14);
  border-left: 4px solid #f59e0b;
  border-radius: var(--pbc-border-radius, 8px);
}

.pbc-backorder-warning__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--pbc-font-ui, 'Inter', sans-serif);
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  color: #92400e;
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.pbc-backorder-warning__icon {
  flex-shrink: 0;
  color: #f59e0b;
  width: 18px;
  height: 18px;
}

/* Warning triangle icon fallback via CSS */
.pbc-backorder-warning__icon--triangle::before {
  content: '\26A0';
  font-size: 16px;
}

.pbc-backorder-warning__message {
  font-family: var(--pbc-font-ui, 'Inter', sans-serif);
  font-size: var(--pbc-text-small, 13px);
  line-height: var(--pbc-lh-small, 20px);
  color: var(--pbc-graphite, #2B3642);
  margin: 0;
}

.pbc-backorder-warning__list {
  list-style: disc;
  margin: 0 0 8px 20px;
  padding: 0;
  font-family: var(--pbc-font-ui, 'Inter', sans-serif);
  font-size: var(--pbc-text-small, 13px);
  line-height: var(--pbc-lh-small, 20px);
  color: var(--pbc-graphite, #2B3642);
}

.pbc-backorder-warning__list li {
  padding: 2px 0;
}

.pbc-backorder-warning__price {
  font-family: var(--pbc-font-ui, 'Inter', sans-serif);
  font-size: var(--pbc-text-body, 16px);
  line-height: var(--pbc-lh-body, 24px);
  margin: 12px 0 0;
}

.pbc-backorder-warning__price del {
  color: #6B7280;
  font-weight: 400;
  text-decoration: line-through;
}

.pbc-backorder-warning__price ins {
  color: #92400e;
  font-weight: 700;
  text-decoration: none;
  margin-left: 4px;
}

.pbc-backorder-warning__price-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  color: #92400e;
  background-color: rgba(245, 158, 11, 0.15);
  padding: 3px 8px;
  border-radius: 4px;
  margin-left: 8px;
  vertical-align: middle;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* ==========================================================================
   Backorder Badge (inline pill — cart, price display)
   ========================================================================== */

.pbc-backorder-badge {
  display: inline-block;
  font-family: var(--pbc-font-ui, 'Inter', sans-serif);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  color: #92400e;
  background-color: rgba(245, 158, 11, 0.15);
  padding: 3px 8px;
  border-radius: 4px;
  vertical-align: middle;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* ==========================================================================
   Backorder Card Badge (positioned overlay for shop product cards)
   ========================================================================== */

.pbc-backorder-card-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--pbc-font-ui, 'Inter', sans-serif);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  color: #92400e;
  background-color: #fef3c7;
  border: 1px solid #f59e0b;
  padding: 5px 10px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Required for .pbc-backorder-card-badge absolute positioning */
.pbc-product-card__image-link {
  position: relative;
}

/* ==========================================================================
   WooCommerce Stock Status — Backorder Banner
   ========================================================================== */

.stock.pbc-stock-backorder {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0;
  padding: 10px 14px;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid #f59e0b;
  border-radius: var(--pbc-border-radius, 8px);
  font-family: var(--pbc-font-ui, 'Inter', sans-serif);
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
  color: #92400e;
}

.stock.pbc-stock-backorder::before {
  content: '\26A0\FE0F';
  font-size: 16px;
  flex-shrink: 0;
}

/* ==========================================================================
   Volume Pricing — Backorder Overlay
   ========================================================================== */

.pbc-volume-pricing {
  position: relative;
}

.pbc-volume-pricing__backorder-overlay {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 5;
  background: rgba(254, 243, 199, 0.92);
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px 20px;
}

.pbc-volume-pricing__backorder-overlay--active {
  display: flex;
}

.pbc-volume-pricing__backorder-overlay-inner {
  max-width: 280px;
}

.pbc-volume-pricing__backorder-overlay-icon {
  display: block;
  font-size: 24px;
  margin-bottom: 8px;
}

.pbc-volume-pricing__backorder-overlay-title {
  font-family: var(--pbc-font-ui, 'Inter', sans-serif);
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  color: #92400e;
  margin: 0 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.pbc-volume-pricing__backorder-overlay-msg {
  font-family: var(--pbc-font-ui, 'Inter', sans-serif);
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
  color: #78350f;
  margin: 0;
}

/* ==========================================================================
   Responsive — Mobile
   ========================================================================== */

/* ==========================================================================
   Dual-Path Backorder UI — Pre-Order vs Notify Me
   ========================================================================== */

.pbc-backorder-paths {
  margin: 16px 0;
  border: 1px solid #e6eaf0;
  border-radius: 8px;
  overflow: hidden;
}

.pbc-backorder-paths__tabs {
  display: flex;
  border-bottom: 2px solid #e6eaf0;
}

.pbc-backorder-paths__tab {
  flex: 1;
  padding: 12px 16px;
  background: #f5f7fa;
  border: none;
  font-family: var(--pbc-font-ui, 'Inter', sans-serif);
  font-size: 13px;
  font-weight: 600;
  color: #6B7280;
  cursor: pointer;
  transition: all 150ms;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.pbc-backorder-paths__tab:hover {
  color: #2B3642;
  background: #eef1f5;
}

.pbc-backorder-paths__tab--active {
  color: #0B1F33;
  background: #ffffff;
  border-bottom: 2px solid #0AA6B4;
  margin-bottom: -2px;
}

.pbc-backorder-paths__tab-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  color: #ffffff;
  background: #16a34a;
  padding: 3px 6px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.pbc-backorder-paths__panel {
  display: none;
  padding: 20px;
}

.pbc-backorder-paths__panel--active {
  display: block;
}

/* Pre-Order panel: savings callout */
.pbc-backorder-paths__savings {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: linear-gradient(135deg, #ecfdf5, #f0fdf4);
  border: 1px solid #86efac;
  border-radius: 6px;
  margin-bottom: 16px;
}

.pbc-backorder-paths__savings-amount {
  font-family: var(--pbc-font-ui, 'Inter', sans-serif);
  font-size: 16px;
  font-weight: 700;
  color: #16a34a;
}

.pbc-backorder-paths__savings-detail {
  font-family: var(--pbc-font-ui, 'Inter', sans-serif);
  font-size: 14px;
  color: #2B3642;
}

.pbc-backorder-paths__savings-detail del {
  color: #9ca3af;
  margin-right: 6px;
}

.pbc-backorder-paths__savings-detail ins {
  text-decoration: none;
  font-weight: 700;
  color: #16a34a;
}

.pbc-backorder-paths__perks {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}

.pbc-backorder-paths__perks li {
  font-family: var(--pbc-font-ui, 'Inter', sans-serif);
  font-size: 13px;
  line-height: 20px;
  color: #2B3642;
  padding: 4px 0;
  padding-left: 22px;
  position: relative;
}

.pbc-backorder-paths__perks li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: #16a34a;
  font-weight: 700;
}

/* Backorder acknowledgment (inside pre-order panel) */
.pbc-backorder-ack__label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  padding: 10px 12px;
  background: #f5f7fa;
  border: 1px solid #e6eaf0;
  border-radius: 6px;
}

.pbc-backorder-ack__input {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  flex-shrink: 0;
  accent-color: #0AA6B4;
  cursor: pointer;
}

.pbc-backorder-ack__text {
  font-family: var(--pbc-font-ui, 'Inter', sans-serif);
  font-size: 13px;
  line-height: 20px;
  color: #2B3642;
}

/* Notify Me panel */
.pbc-backorder-paths__notify-desc {
  font-family: var(--pbc-font-ui, 'Inter', sans-serif);
  font-size: 14px;
  line-height: 22px;
  color: #2B3642;
  margin: 0 0 16px;
}

.pbc-backorder-paths__notify-form {
  display: flex;
  gap: 8px;
}

.pbc-backorder-paths__notify-email {
  flex: 1;
  padding: 10px 14px;
  font-family: var(--pbc-font-ui, 'Inter', sans-serif);
  font-size: 14px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  outline: none;
  transition: border-color 150ms;
}

.pbc-backorder-paths__notify-email:focus {
  border-color: #0AA6B4;
  box-shadow: 0 0 0 2px rgba(10, 166, 180, 0.15);
}

.pbc-backorder-paths__notify-email--error {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.15) !important;
}

.pbc-backorder-paths__notify-btn {
  padding: 10px 20px;
  font-family: var(--pbc-font-ui, 'Inter', sans-serif);
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  background: #0B1F33;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 150ms;
}

.pbc-backorder-paths__notify-btn:hover {
  background: #0d2740;
}

.pbc-backorder-paths__notify-btn:disabled {
  opacity: 0.6;
  cursor: wait;
}

.pbc-backorder-paths__notify-status {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
}

.pbc-backorder-paths__notify-status--success {
  background: #ecfdf5;
  color: #16a34a;
  border: 1px solid #86efac;
}

.pbc-backorder-paths__notify-status--error {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fca5a5;
}

.pbc-backorder-paths__notify-note {
  margin: 12px 0 0;
  font-family: var(--pbc-font-ui, 'Inter', sans-serif);
  font-size: 12px;
  color: #9ca3af;
}

/* ==========================================================================
   Notify Me → Upsell Prompt (shown after successful subscription)
   ========================================================================== */

.pbc-backorder-paths__upsell {
  margin-top: 16px;
}

.pbc-backorder-paths__upsell-inner {
  padding: 20px;
  background: linear-gradient(135deg, #ecfdf5, #f0fdf4);
  border: 1px solid #86efac;
  border-radius: 8px;
  text-align: center;
}

.pbc-backorder-paths__upsell-title {
  font-family: var(--pbc-font-ui, 'Inter', sans-serif);
  font-size: 16px;
  font-weight: 700;
  color: #0B1F33;
  margin: 0 0 6px;
}

.pbc-backorder-paths__upsell-icon {
  font-size: 18px;
}

.pbc-backorder-paths__upsell-text {
  font-family: var(--pbc-font-ui, 'Inter', sans-serif);
  font-size: 14px;
  line-height: 22px;
  color: #2B3642;
  margin: 0 0 16px;
}

.pbc-backorder-paths__upsell-btn {
  display: inline-block;
  padding: 12px 28px;
  font-family: var(--pbc-font-ui, 'Inter', sans-serif);
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  background: #16a34a;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 150ms;
  letter-spacing: 0.01em;
}

.pbc-backorder-paths__upsell-btn:hover {
  background: #15803d;
}

.pbc-backorder-paths__upsell-dismiss {
  font-family: var(--pbc-font-ui, 'Inter', sans-serif);
  font-size: 12px;
  color: #9ca3af;
  margin: 12px 0 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pbc-backorder-paths__upsell-dismiss:hover {
  color: #6B7280;
}

/* ==========================================================================
   FOMO Message — Notify Me Tab Discount Warning
   ========================================================================== */

.pbc-backorder-paths__fomo {
  margin: 0 0 16px;
}

.pbc-backorder-paths__fomo-inner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid #f59e0b;
  border-left: 4px solid #f59e0b;
  border-radius: 6px;
}

.pbc-backorder-paths__fomo-icon {
  flex-shrink: 0;
  font-size: 18px;
  line-height: 1.2;
}

.pbc-backorder-paths__fomo-text {
  font-family: var(--pbc-font-ui, 'Inter', sans-serif);
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
  color: #92400e;
  margin: 0;
}

/* ==========================================================================
   Quantity Stepper — +/- Buttons
   ========================================================================== */

.quantity.pbc-qty-enhanced {
  display: inline-flex !important;
  align-items: center;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  overflow: hidden;
  background: #ffffff;
}

.pbc-qty-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: #f5f7fa;
  color: #2B3642;
  cursor: pointer;
  transition: background 100ms;
  flex-shrink: 0;
}

.pbc-qty-btn:hover:not(:disabled) {
  background: #e6eaf0;
}

.pbc-qty-btn:active:not(:disabled) {
  background: #d1d5db;
}

.pbc-qty-btn:disabled {
  color: #d1d5db;
  cursor: not-allowed;
}

.quantity.pbc-qty-enhanced input[type="number"] {
  width: 48px !important;
  height: 40px;
  text-align: center;
  font-family: var(--pbc-font-ui, 'Inter', sans-serif);
  font-size: 15px;
  font-weight: 600;
  color: #0B1F33;
  border: none;
  border-left: 1px solid #e6eaf0;
  border-right: 1px solid #e6eaf0;
  background: #ffffff;
  -moz-appearance: textfield;
  outline: none;
  padding: 0;
  margin: 0;
}

.quantity.pbc-qty-enhanced input[type="number"]::-webkit-inner-spin-button,
.quantity.pbc-qty-enhanced input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ==========================================================================
   Responsive — Mobile
   ========================================================================== */

@media (max-width: 768px) {
  /* Backorder warning banner */
  .pbc-backorder-warning {
    margin: 12px 0;
    padding: 12px 14px;
    border-radius: 6px;
    border-left-width: 3px;
  }

  .pbc-backorder-warning__title {
    font-size: 13px;
    gap: 6px;
  }

  .pbc-backorder-warning__message {
    font-size: 13px;
  }

  .pbc-backorder-warning__price {
    font-size: 14px;
    margin-top: 8px;
  }

  .pbc-backorder-warning__list {
    font-size: 12px;
    margin-left: 16px;
  }

  /* Backorder card badge */
  .pbc-backorder-card-badge {
    top: 8px;
    left: 8px;
    font-size: 10px;
    padding: 4px 8px;
  }

  /* Dual-path tabs — card-style on mobile for clear distinction */
  .pbc-backorder-paths {
    margin: 12px 0;
    border: none;
    background: transparent;
    overflow: visible;
  }

  .pbc-backorder-paths__tabs {
    flex-direction: column;
    gap: 8px;
    border-bottom: none;
    padding: 0 0 4px;
  }

  .pbc-backorder-paths__tab {
    padding: 14px 16px;
    min-height: 52px;
    justify-content: flex-start;
    font-size: 14px;
    font-weight: 700;
    border-radius: 10px;
    border: 2px solid #e6eaf0;
    background: #f8fafc;
    color: #6B7280;
    position: relative;
  }

  .pbc-backorder-paths__tab--active {
    border-bottom: 2px solid #0AA6B4;
    border-color: #0AA6B4;
    background: #ffffff;
    color: #0B1F33;
    margin-bottom: 0;
    box-shadow: 0 2px 8px rgba(10, 166, 180, 0.15);
  }

  .pbc-backorder-paths__tab--active[data-tab="preorder"] {
    border-color: #16a34a;
    box-shadow: 0 2px 8px rgba(22, 163, 74, 0.15);
  }

  /* Preorder tab — green accent when active */
  .pbc-backorder-paths__tab[data-tab="preorder"]:not(.pbc-backorder-paths__tab--active) {
    border-color: rgba(22, 163, 74, 0.3);
    background: linear-gradient(135deg, #f0fdf4, #ecfdf5);
    color: #15803d;
  }

  /* Notify tab — blue accent when inactive */
  .pbc-backorder-paths__tab[data-tab="notify"]:not(.pbc-backorder-paths__tab--active) {
    border-color: rgba(59, 130, 246, 0.3);
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    color: #1d4ed8;
  }

  .pbc-backorder-paths__tab[data-tab="notify"].pbc-backorder-paths__tab--active {
    border-color: #3b82f6;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
  }

  .pbc-backorder-paths__tab-badge {
    font-size: 11px;
    padding: 4px 8px;
  }

  .pbc-backorder-paths__panel {
    padding: 16px;
    border: 1px solid #e6eaf0;
    border-radius: 0 0 10px 10px;
    background: #ffffff;
    margin-top: -4px;
  }

  /* Savings callout — stacked */
  .pbc-backorder-paths__savings {
    flex-direction: column;
    gap: 6px;
    text-align: center;
    padding: 10px 12px;
  }

  .pbc-backorder-paths__savings-amount {
    font-size: 15px;
  }

  .pbc-backorder-paths__savings-detail {
    font-size: 13px;
  }

  /* Perks list */
  .pbc-backorder-paths__perks li {
    font-size: 13px;
  }

  /* Acknowledgment checkbox — larger touch target */
  .pbc-backorder-ack__label {
    padding: 10px;
    gap: 10px;
  }

  .pbc-backorder-ack__input {
    width: 22px;
    height: 22px;
    min-width: 22px;
  }

  .pbc-backorder-ack__text {
    font-size: 13px;
  }

  /* Notify Me form — stacked */
  .pbc-backorder-paths__notify-form {
    flex-direction: column;
  }

  .pbc-backorder-paths__notify-email {
    min-height: 44px;
    font-size: 16px; /* prevent iOS zoom */
  }

  .pbc-backorder-paths__notify-btn {
    min-height: 44px;
    width: 100%;
    font-size: 15px;
  }

  .pbc-backorder-paths__notify-desc {
    font-size: 13px;
    line-height: 20px;
  }

  /* Upsell prompt */
  .pbc-backorder-paths__upsell-inner {
    padding: 16px;
  }

  .pbc-backorder-paths__upsell-title {
    font-size: 15px;
  }

  .pbc-backorder-paths__upsell-text {
    font-size: 13px;
    line-height: 20px;
  }

  .pbc-backorder-paths__upsell-btn {
    width: 100%;
    min-height: 48px;
    padding: 12px 20px;
    font-size: 15px;
  }

  /* Quantity stepper — 44px touch targets */
  .pbc-qty-btn {
    width: 44px;
    height: 44px;
  }

  .quantity.pbc-qty-enhanced input[type="number"] {
    height: 44px;
    width: 52px !important;
    font-size: 16px; /* prevent iOS zoom */
  }

  /* Volume pricing overlay — mobile */
  .pbc-volume-pricing__backorder-overlay {
    padding: 16px;
  }

  .pbc-volume-pricing__backorder-overlay-inner {
    max-width: 240px;
  }

  .pbc-volume-pricing__backorder-overlay-title {
    font-size: 13px;
  }

  .pbc-volume-pricing__backorder-overlay-msg {
    font-size: 12px;
  }

  /* FOMO message */
  .pbc-backorder-paths__fomo-inner {
    padding: 12px 14px;
    gap: 8px;
  }

  .pbc-backorder-paths__fomo-text {
    font-size: 12px;
    line-height: 18px;
  }

  /* Stock status banner */
  .stock.pbc-stock-backorder {
    font-size: 12px;
    padding: 8px 12px;
    margin: 8px 0;
  }
}

/* Professional pre-order price display */
.pbc-preorder-price {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
}

.pbc-preorder-price__current {
  font-size: 1.1em;
  font-weight: 600;
  color: var(--pbc-near-black, #0E1720);
}

.pbc-preorder-price__detail {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.pbc-preorder-price__regular {
  font-size: 12px;
  color: var(--pbc-text-muted, #6b7280);
  font-weight: 400;
}

.pbc-preorder-price__savings {
  font-size: 12px;
  color: var(--pbc-accessible-teal, #078A94);
  font-weight: 500;
}

.pbc-preorder-price__label {
  font-size: 11px;
  color: var(--pbc-text-muted, #6b7280);
  font-weight: 400;
}

.pbc-preorder-price--card {
  gap: 1px;
}

.pbc-preorder-price--card .pbc-preorder-price__current {
  font-size: 1em;
}