/* ── View transitions ── */
.view { display: none; }
.view.active { display: block; }

/* ── Product card ── */
.product-card {
  background: rgba(30, 41, 59, 0.75);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s;
}
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(34, 211, 238, 0.15);
  border-color: #22d3ee55;
}
.product-thumb {
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  background: rgba(15, 23, 42, 0.6);
  user-select: none;
}
.product-price {
  font-size: 1.15rem;
  font-weight: 700;
  color: #22d3ee;
}
.btn-add-cart {
  background: linear-gradient(135deg, #818cf8, #22d3ee);
  border: none;
  font-weight: 600;
  color: #0f172a;
  transition: opacity 0.2s, transform 0.15s;
}
.btn-add-cart:hover { opacity: 0.88; transform: scale(1.03); color: #0f172a; }

/* ── Cart ── */
.cart-item {
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
}
.cart-item-emoji { font-size: 2.2rem; min-width: 3rem; }
.qty-btn {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid #334155;
  background: transparent;
  color: #94a3b8;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.qty-btn:hover { background: #334155; color: #fff; }
.cart-total-row {
  border-top: 1px solid rgba(255,255,255,0.1);
}
.btn-checkout {
  background: linear-gradient(135deg, #22d3ee, #818cf8);
  border: none;
  font-weight: 700;
  font-size: 1.05rem;
  color: #0f172a;
  padding: 14px 36px;
  border-radius: 50px;
  transition: opacity 0.2s, transform 0.15s;
}
.btn-checkout:hover:not(:disabled) { opacity: 0.88; transform: scale(1.03); }
.btn-checkout:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Checkout / SDK ── */
#nestpay-sdk-container {
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(34, 211, 238, 0.2);
  border-radius: 16px;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
}
/* When SDK has rendered content, reset flex centering and let it fill */
#nestpay-sdk-container:has(#nestpay-drop-in) {
  display: block;
  padding: 0;
  overflow: hidden;
}
#nestpay-drop-in {
  width: 100%;
  min-height: 320px;
  border-radius: 16px;
  overflow: hidden;
}
/* Make the nestpay payment form fill the container */
#nestpay-drop-in .nestpay__payment-form-container,
#nestpay-drop-in .nestpay__payment-methods-list {
  width: 100% !important;
  max-width: 100% !important;
}
/* Override SDK's max-width constraint on all nested elements */
#nestpay-drop-in > div,
#nestpay-drop-in > div > div,
#nestpay-drop-in div[class] {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
#nestpay-drop-in > div {
  border-radius: 16px;
}
.sdk-placeholder {
  text-align: center;
  width: 100%;
}
.sdk-loading-ring {
  width: 52px; height: 52px;
  border: 3px solid rgba(34, 211, 238, 0.2);
  border-top-color: #22d3ee;
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
  margin: 0 auto 20px;
}
@keyframes spin { to { transform: rotate(360deg); } }

.sdk-ready-frame {
  width: 100%;
  background: rgba(15, 23, 42, 0.9);
  border: 1px dashed rgba(34, 211, 238, 0.35);
  border-radius: 12px;
  padding: 40px 24px;
  text-align: center;
}
.sdk-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(34,211,238,0.1);
  color: #22d3ee;
  border: 1px solid rgba(34,211,238,0.25);
  border-radius: 999px;
  padding: 3px 12px;
  margin-bottom: 20px;
}

/* ── Order summary sidebar ── */
.order-summary {
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
}
.order-summary-item {
  font-size: 0.875rem;
}
.order-summary-total {
  border-top: 1px solid rgba(255,255,255,0.08);
  font-weight: 700;
  font-size: 1rem;
  color: #22d3ee;
}

/* ── Step indicator ── */
.step-indicator {
  display: flex;
  align-items: center;
  gap: 0;
}
.step {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: #475569;
  font-weight: 600;
}
.step.active { color: #22d3ee; }
.step.done { color: #818cf8; }
.step-dot {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #1e293b;
  border: 2px solid #334155;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  flex-shrink: 0;
}
.step.active .step-dot { background: #22d3ee22; border-color: #22d3ee; color: #22d3ee; }
.step.done  .step-dot { background: #818cf822; border-color: #818cf8; color: #818cf8; }
.step-line {
  flex: 1;
  height: 1px;
  background: #334155;
  min-width: 24px;
  max-width: 48px;
}

/* ── Status badge ── */
.status-badge {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.status-badge.status-loading {
  background: rgba(255, 193, 7, 0.1);
  color: #ffc107;
  border: 1px solid rgba(255, 193, 7, 0.3);
}
.status-badge.status-loaded {
  background: rgba(25, 135, 84, 0.1);
  color: #198754;
  border: 1px solid rgba(25, 135, 84, 0.3);
}
.status-badge.status-error {
  background: rgba(220, 53, 69, 0.1);
  color: #dc3545;
  border: 1px solid rgba(220, 53, 69, 0.3);
}