/* ============================================================
   stock.css — SHENOVA Stock Badge & State Styles
   ============================================================
   Link AFTER pdp.css / style.css in product.html and checkout.html:
       <link rel="stylesheet" href="css/stock.css">
   ============================================================ */

/* ── PDP Stock Badge — base ────────────────────────────────── */
.stock-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: 50px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 20px;
  font-family: var(--sans, 'DM Sans', sans-serif);
  transition: opacity 0.3s ease;
  width: fit-content;
}

/* ── Animated pulse dot ─────────────────────────────────────── */
.stock-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── IN STOCK ───────────────────────────────────────────────── */
.stock-ok {
  background: rgba(16, 120, 70, 0.07);
  color: #0a6040;
  border: 1px solid rgba(16, 120, 70, 0.18);
}
.stock-dot-ok {
  background: #22c55e;
  animation: stockPulseGreen 2s ease-in-out infinite;
}

/* ── LOW STOCK ──────────────────────────────────────────────── */
.stock-low {
  background: rgba(194, 120, 3, 0.07);
  color: #854d0e;
  border: 1px solid rgba(194, 120, 3, 0.2);
}
.stock-dot-low {
  background: #f59e0b;
  animation: stockPulseAmber 1.4s ease-in-out infinite;
}

/* ── OUT OF STOCK ───────────────────────────────────────────── */
.stock-oos {
  background: rgba(185, 28, 28, 0.06);
  color: #991b1b;
  border: 1px solid rgba(185, 28, 28, 0.18);
}
.stock-dot-oos {
  background: #ef4444;
  /* No pulse — static signals finality */
}

/* ── Pulse keyframes ────────────────────────────────────────── */
@keyframes stockPulseGreen {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
  50%       { box-shadow: 0 0 0 5px rgba(34, 197, 94, 0); }
}
@keyframes stockPulseAmber {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.55); }
  50%       { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0); }
}

/* ══════════════════════════════════════════════════════════════
   DISABLED STATE — Add to Cart when out of stock
══════════════════════════════════════════════════════════════ */
.pdp-add-btn--disabled,
.pdp-add-btn[disabled] {
  background: #d1cec9 !important;
  border-color: #d1cec9 !important;
  color: #7a7672 !important;
  cursor: not-allowed !important;
  transform: none !important;
  pointer-events: none;
  opacity: 0.78;
}
.pdp-add-btn--disabled::after,
.pdp-add-btn[disabled]::after {
  display: none;
}

/* ── Disabled size grid ─────────────────────────────────────── */
.pdp-sizes--disabled .size {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}
.pdp-sizes--disabled .size::before {
  display: none;
}

/* ══════════════════════════════════════════════════════════════
   PRODUCT CARD BADGES  (listing pages, related products)
══════════════════════════════════════════════════════════════ */
.card-stock-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 10px;
  border-radius: 50px;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  font-family: var(--sans, 'DM Sans', sans-serif);
  backdrop-filter: blur(6px);
  z-index: 2;
  pointer-events: none;
}
.card-stock-oos {
  background: rgba(185, 28, 28, 0.82);
  color: #fff;
}
.card-stock-low {
  background: rgba(194, 120, 3, 0.85);
  color: #fff;
}

/* Make card image wrapper position: relative if it isn't */
.prod-img,
.card-img-wrap,
figure {
  position: relative;
}

/* ══════════════════════════════════════════════════════════════
   ADMIN DASHBOARD — stock column highlights
══════════════════════════════════════════════════════════════ */
.stock-badge-admin {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 50px;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  font-family: var(--sans, 'DM Sans', sans-serif);
  white-space: nowrap;
}
.stock-badge-admin.ok  { background: rgba(16,120,70,0.1);  color: #0a6040; }
.stock-badge-admin.low { background: rgba(194,120,3,0.1);  color: #854d0e; }
.stock-badge-admin.oos { background: rgba(185,28,28,0.1);  color: #991b1b; }

/* Legacy support: direct td coloring used in existing dashboard */
td.stock-critical { color: #b91c1c; font-weight: 600; }
td.stock-warn     { color: #92400e; font-weight: 500; }

/* ── Admin stock summary card ─────────────────────────────── */
.stock-summary-cards {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.stock-summary-card {
  flex: 1;
  min-width: 120px;
  padding: 14px 18px;
  border-radius: 12px;
  font-family: var(--sans, 'DM Sans', sans-serif);
  border: 1px solid transparent;
}
.stock-summary-card .ssc-count {
  font-size: 28px;
  font-weight: 600;
  line-height: 1;
  margin-bottom: 4px;
}
.stock-summary-card .ssc-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.7;
}
.stock-summary-card.ok  { background: rgba(16,120,70,0.06); border-color: rgba(16,120,70,0.15); color: #0a6040; }
.stock-summary-card.low { background: rgba(194,120,3,0.06); border-color: rgba(194,120,3,0.18); color: #854d0e; }
.stock-summary-card.oos { background: rgba(185,28,28,0.06); border-color: rgba(185,28,28,0.15); color: #991b1b; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 600px) {
  .stock-badge {
    font-size: 10px;
    padding: 8px 14px;
    letter-spacing: 0.14em;
  }
  .stock-summary-cards { flex-direction: column; }
}