/* =========================================================
   SaleHoverPreview Module — Glassmorphism Popup Styles
   ========================================================= */

.sale-hover-popup {
  position: fixed;
  z-index: 99999;
  width: 480px;
  max-width: 92vw;
  max-height: 540px;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(200, 200, 220, 0.35);
  border-radius: 14px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  padding: 0;
  overflow: hidden;
  animation: shpFadeInUp 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #1e293b;
}

@keyframes shpFadeInUp {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ---- Header ---- */
.shp-header {
  background: linear-gradient(135deg, #4361ee 0%, #6c5ce7 100%);
  padding: 14px 18px;
  color: #fff;
}
.shp-ref-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.shp-ref {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.shp-date {
  font-size: 12px;
  opacity: 0.85;
}
.shp-badges {
  display: flex;
  gap: 6px;
}
.shp-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  text-transform: capitalize;
  letter-spacing: 0.3px;
}
.shp-status-completed { background: rgba(16, 185, 129, 0.25); color: #d1fae5; }
.shp-status-pending { background: rgba(245, 158, 11, 0.25); color: #fef3c7; }
.shp-status-ordered { background: rgba(59, 130, 246, 0.25); color: #dbeafe; }
.shp-pay-paid { background: rgba(16, 185, 129, 0.25); color: #d1fae5; }
.shp-pay-partial { background: rgba(245, 158, 11, 0.25); color: #fef3c7; }
.shp-pay-unpaid { background: rgba(239, 68, 68, 0.25); color: #fecaca; }

/* ---- Info ---- */
.shp-info {
  display: flex;
  gap: 6px;
  padding: 10px 18px;
  border-bottom: 1px solid #f1f3f5;
  flex-wrap: wrap;
}
.shp-info-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  color: #475569;
  background: #f8fafc;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
}
.shp-info-icon {
  font-size: 14px;
  color: #6366f1;
}

/* ---- Products Table ---- */
.shp-products-wrapper {
  max-height: 250px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}
.shp-products-wrapper::-webkit-scrollbar {
  width: 5px;
}
.shp-products-wrapper::-webkit-scrollbar-track {
  background: transparent;
}
.shp-products-wrapper::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 10px;
}
.shp-products-wrapper::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}
.shp-products-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.shp-products-table thead th {
  background: #f8fafc;
  padding: 7px 12px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: 0.5px;
  border-bottom: 2px solid #e2e8f0;
  position: sticky;
  top: 0;
  z-index: 1;
}
.shp-products-table tbody tr {
  border-bottom: 1px solid #f1f5f9;
  transition: background 0.15s ease;
}
.shp-products-table tbody tr:hover {
  background: #f8fafc;
}
.shp-products-table tbody tr:last-child {
  border-bottom: none;
}
.shp-products-table tbody td {
  padding: 8px 12px;
  color: #334155;
  vertical-align: middle;
}
.shp-product-name {
  white-space: normal;
  word-break: break-word;
  font-weight: 500;
  line-height: 1.35;
  font-size: 12px;
}
.shp-product-code {
  display: inline-block;
  background: #eef2ff;
  color: #6366f1;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 3px;
  margin-right: 4px;
  vertical-align: middle;
}
.shp-product-total {
  font-weight: 600;
  color: #1e293b;
}

/* ---- Totals ---- */
.shp-totals {
  padding: 10px 18px 14px;
  border-top: 2px solid #e2e8f0;
  background: #fafbfc;
}
.shp-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 0;
  font-size: 12.5px;
  color: #475569;
}
.shp-total-val {
  font-weight: 600;
  color: #1e293b;
}
.shp-grand-total {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  padding: 6px 0;
  margin-top: 2px;
  border-top: 1px dashed #cbd5e1;
}
.shp-grand-total .shp-total-val {
  color: #4361ee;
  font-size: 15px;
}
.shp-discount {
  color: #ef4444 !important;
}
.shp-paid {
  color: #10b981 !important;
}
.shp-due {
  color: #f59e0b !important;
}

/* ---- Loading ---- */
.shp-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 36px 20px;
  gap: 12px;
  color: #64748b;
  font-size: 13px;
}
.shp-loading-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid #e2e8f0;
  border-top-color: #4361ee;
  border-radius: 50%;
  animation: shpSpin 0.7s linear infinite;
}
@keyframes shpSpin {
  to { transform: rotate(360deg); }
}