/* =============================================================================
   PureKing Shop — shared styles
   Cart, fulfillment pane, pickup code, QR verify, admin order list
   ============================================================================= */

/* ── Fulfillment Pane ─────────────────────────────────────────────────────── */
.pk-fulfillment-pane { padding: 0 0 1rem; }
.pk-fulfillment-pane .pk-fulfillment-radios .form-item { margin: 0.5rem 0; }
.pk-fulfillment-pane .pk-fulfillment-radios label {
  font-size: 1.05rem; padding: 0.75rem 1rem;
  border: 2px solid #D8E0EC; border-radius: 8px; cursor: pointer;
  display: flex; align-items: center; gap: 0.5rem;
}
.pk-fulfillment-pane .pk-fulfillment-radios input[type="radio"]:checked + label,
.pk-fulfillment-pane .pk-fulfillment-radios label:has(input:checked) {
  border-color: #0A1628; background: #f0f4ff;
}
.pk-fulfillment-notice {
  background: #fff8e1; border: 1px solid #fbc02d; border-radius: 6px;
  padding: 0.75rem 1rem; margin-bottom: 1rem; color: #795548;
}
.pk-payment-radios .form-item label {
  padding: 0.5rem 0.75rem; border: 2px solid #D8E0EC; border-radius: 6px;
  cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem;
}

/* ── Status Badges ────────────────────────────────────────────────────────── */
.pk-badge {
  display: inline-block; padding: 3px 10px; border-radius: 20px;
  font-size: 0.8rem; font-weight: 600; white-space: nowrap;
}
.pk-badge--pickup-cod   { background: #fff3cd; color: #856404; border: 1px solid #ffc107; }
.pk-badge--pickup-paid  { background: #d1ecf1; color: #0c5460; border: 1px solid #17a2b8; }
.pk-badge--shipping     { background: #d4edda; color: #155724; border: 1px solid #28a745; }
.pk-badge--completed    { background: #c3e6cb; color: #155724; border: 1px solid #28a745; }
.pk-badge--default      { background: #e2e3e5; color: #383d41; }

/* ── Admin Order Table ────────────────────────────────────────────────────── */
.pk-shop-orders-table td.pk-badge--pickup-cod  { background: #fffdf0; }
.pk-shop-orders-table td.pk-badge--pickup-paid { background: #f0fafd; }
.pk-shop-orders-table td.pk-badge--shipping    { background: #f0fff4; }

.pk-status-tabs {
  display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem;
}
.pk-tab {
  padding: 6px 16px; border: 2px solid #D8E0EC; border-radius: 20px;
  font-size: 0.85rem; text-decoration: none; color: #444;
  background: #fff; white-space: nowrap;
}
.pk-tab:hover { border-color: #0A1628; color: #0A1628; }
.pk-tab--active { background: #0A1628; color: #fff; border-color: #0A1628; }

/* ── Pickup Code Page ─────────────────────────────────────────────────────── */
.pk-pickup-page {
  max-width: 420px; margin: 0 auto; padding: 1rem 1rem 3rem;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  text-align: center;
}
.pk-pickup-header { margin-bottom: 1.5rem; }
.pk-pickup-badge {
  display: inline-block; padding: 4px 14px; border-radius: 20px;
  background: #d1ecf1; color: #0c5460; font-size: 0.85rem; margin-bottom: 0.5rem;
}
.pk-pickup-page--verified .pk-pickup-badge { background: #c3e6cb; color: #155724; }
.pk-pickup-title { font-size: 1.75rem; font-weight: 700; margin: 0.25rem 0; color: #0A1628; }
.pk-pickup-subtitle { color: #6c757d; margin: 0; }

.pk-pickup-qr-frame {
  background: #fff; border: 3px solid #0A1628; border-radius: 12px;
  padding: 1.5rem; display: inline-block; margin: 1rem auto;
  min-width: 220px; min-height: 220px;
}
.pk-pickup-qr-frame--verified {
  border-color: #28a745; background: #f8fff9;
}
.pk-pickup-qr-url { font-size: 0.65rem; color: #aaa; word-break: break-all; margin-top: 0.5rem; }
.pk-pickup-verified-stamp {
  font-size: 2rem; padding: 2rem; color: #28a745; font-weight: 700;
}

.pk-pickup-summary { text-align: left; margin: 1.5rem 0; }
.pk-pickup-items { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.pk-pickup-items th, .pk-pickup-items td {
  border-bottom: 1px solid #eee; padding: 6px 8px; text-align: left;
}
.pk-pickup-items tfoot td { font-weight: 600; border-top: 2px solid #333; }

.pk-pickup-actions { display: flex; gap: 0.75rem; justify-content: center; margin-top: 1rem; }

/* ── Staff Verify Page ────────────────────────────────────────────────────── */
.pk-verify-page {
  max-width: 500px; margin: 0 auto; padding: 1rem;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
.pk-verify-heading { font-size: 1.4rem; font-weight: 700; color: #0A1628; margin-bottom: 0.5rem; }
.pk-verify-hint    { color: #6c757d; margin-bottom: 1rem; }

.pk-verify-viewfinder {
  position: relative; width: 100%; border-radius: 12px;
  overflow: hidden; background: #000; aspect-ratio: 1;
  max-width: 320px; margin: 0 auto 1rem;
}
.pk-verify-viewfinder video { width: 100%; height: 100%; object-fit: cover; }
.pk-verify-overlay {
  position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center;
}
.pk-verify-crosshair {
  width: 60%; aspect-ratio: 1;
  border: 3px solid rgba(201,162,39,0.9); border-radius: 8px;
}
.pk-verify-status {
  position: absolute; bottom: 8px; left: 0; right: 0;
  text-align: center; color: #fff; font-size: 0.8rem; margin: 0;
  text-shadow: 0 1px 3px rgba(0,0,0,.8);
}

.pk-verify-manual { margin: 1rem 0; text-align: left; }
.pk-verify-manual label { font-weight: 600; display: block; margin-bottom: 0.4rem; }
.pk-verify-manual-row { display: flex; gap: 0.5rem; }
.pk-verify-manual-row input { flex: 1; }

.pk-verify-start-btn { width: 100%; padding: 0.85rem; font-size: 1.05rem; margin-top: 0.5rem; }

/* Order detail panel */
.pk-verify-detail-header {
  background: #0A1628; color: #fff; border-radius: 10px;
  padding: 1rem 1.25rem; margin-bottom: 1rem;
}
.pk-verify-detail-header .pk-order-num  { font-size: 1.3rem; font-weight: 700; }
.pk-verify-detail-header .pk-order-name { font-size: 0.9rem; opacity: .8; margin-top: 0.25rem; }

.pk-verify-items-table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
.pk-verify-items-table th, .pk-verify-items-table td {
  border-bottom: 1px solid #eee; padding: 6px 8px; text-align: left;
}
.pk-verify-items-table tfoot td { font-weight: 700; border-top: 2px solid #333; }

.pk-verify-cod-prompt {
  background: #fff3cd; border: 2px solid #ffc107; border-radius: 10px;
  padding: 1.25rem; text-align: center; margin-bottom: 1rem;
}
.pk-verify-cod-icon   { font-size: 2.5rem; }
.pk-verify-cod-amount { font-size: 1.75rem; font-weight: 700; color: #0A1628; }

.pk-verify-already-done {
  background: #d4edda; border: 1px solid #28a745; border-radius: 8px;
  padding: 1rem; text-align: center; margin-bottom: 1rem; color: #155724;
}

.pk-verify-actions { display: flex; flex-direction: column; gap: 0.75rem; }
.pk-verify-actions .button { padding: 0.85rem; font-size: 1rem; text-align: center; }

.pk-verify-feedback { margin-top: 0.75rem; text-align: center; font-weight: 600; }
.pk-verify-feedback.success { color: #28a745; }
.pk-verify-feedback.error   { color: #dc3545; }

.pk-btn-gold {
  background: #c9a227; border-color: #b38f20; color: #fff;
}
.pk-btn-gold:hover { background: #b38f20; }

/* ── Mobile-first stepper checkout ───────────────────────────────────────── */
@media (max-width: 600px) {
  .pk-pickup-page { padding: 0.75rem; }
  .pk-verify-page { padding: 0.5rem; }

  /* Drupal Commerce checkout progress: make it scrollable on mobile */
  .checkout-pane { padding: 0.75rem !important; }
  .layout-checkout-progress { overflow-x: auto; white-space: nowrap; }
  .layout-checkout-progress__item { display: inline-block; }
}