/* DELIVERY SECTION — phone, search, customer card, courier journey */

/* Override aspect ratio for delivery — content varies wildly per step */
.ds-stage-screen-delivery {
  background: #0a0e22;
  aspect-ratio: auto;
  height: 580px;
  overflow: hidden;
}
.ds-pos-wrap { width: 100%; height: 100%; }
.ds-pos-wrap .pos-preview { height: 100%; aspect-ratio: auto; }

/* Restart button */
.ds-restart {
  margin-top: 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.8);
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
}
.ds-restart:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2); }

/* === Step 0: Ringing phone === */
.dlv-ring {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  height: 100%; padding: 30px 20px;
  overflow: hidden;
}
.dlv-ring-pulse {
  position: absolute; left: 50%; top: 50%;
  width: 180px; height: 180px;
  border-radius: 50%; border: 2px solid #10b981;
  transform: translate(-50%, -50%);
  animation: dlvRingPulse 2s ease-out infinite;
  opacity: 0;
}
.dlv-ring-pulse-2 { animation-delay: 0.6s; }
.dlv-ring-pulse-3 { animation-delay: 1.2s; }
@keyframes dlvRingPulse {
  0% { width: 180px; height: 180px; opacity: 0.7; }
  100% { width: 540px; height: 540px; opacity: 0; }
}
.dlv-ring-card {
  position: relative;
  background: #131836;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 22px;
  padding: 26px 24px;
  width: 290px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}
.dlv-ring-icon {
  font-size: 30px; margin-bottom: 8px;
  display: inline-block;
  animation: dlvShake 0.5s ease-in-out infinite;
}
@keyframes dlvShake {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-15deg); }
  75% { transform: rotate(15deg); }
}
.dlv-ring-label { font-size: 10px; color: #6b7494; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; margin-bottom: 4px; }
.dlv-ring-num { font-size: 16px; color: white; font-weight: 700; margin-bottom: 10px; }
.dlv-ring-name { font-size: 22px; color: white; font-weight: 800; margin-bottom: 4px; letter-spacing: 0.05em; }
.dlv-ring-meta { font-size: 11px; color: #8a92b8; margin-bottom: 20px; }
.dlv-ring-actions { display: flex; gap: 14px; justify-content: center; }
.dlv-ring-decline {
  width: 50px; height: 50px; border-radius: 50%;
  background: #ef4444; border: none; color: white;
  font-size: 16px; cursor: pointer;
  box-shadow: 0 6px 16px rgba(239,68,68,0.4);
}
.dlv-ring-answer {
  display: flex; align-items: center; gap: 8px;
  padding: 0 20px; height: 50px;
  background: linear-gradient(135deg, #10b981, #059669);
  border: none; color: white; border-radius: 999px;
  font-size: 13px; font-weight: 700; cursor: pointer;
  box-shadow: 0 6px 16px rgba(16,185,129,0.4);
  animation: dlvPulseBtn 1.2s ease-in-out infinite;
}
@keyframes dlvPulseBtn {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
.dlv-ring-answer-icon { font-size: 14px; }

/* === POS shell sub-nav === */
.dlv-pos { width: 100%; height: 100%; background: #0a0e22; display: flex; flex-direction: column; }
.dlv-subnav {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 14px;
  background: #0d1330;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}
.dlv-subnav-brand { display: flex; align-items: center; gap: 8px; }
.dlv-subnav-brand img { width: 24px; height: 24px; }
.dlv-subnav-name { font-size: 12px; font-weight: 800; color: white; }
.dlv-subnav-sub { font-size: 8px; color: #6b7494; letter-spacing: 0.1em; }
.dlv-subnav-tabs { flex: 1; display: flex; justify-content: center; gap: 4px; }
.dlv-subnav-tab {
  background: transparent; border: none;
  padding: 6px 10px; border-radius: 8px;
  color: #8a92b8; font-size: 11px; font-weight: 700;
  cursor: pointer;
}
.dlv-subnav-tab:hover { background: rgba(255,255,255,0.04); }
.dlv-subnav-tab-on { background: #10b981 !important; color: white !important; }
.dlv-subnav-user { display: flex; align-items: center; gap: 6px; }
.dlv-subnav-dot { width: 7px; height: 7px; border-radius: 50%; background: #10b981; }
.dlv-subnav-uavatar { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg,#3b6dff,#7c3aed); color: white; font-size: 10px; font-weight: 800; display: grid; place-items: center; }
.dlv-subnav-uname { font-size: 10px; color: white; font-weight: 700; line-height: 1.2; }
.dlv-subnav-urole { font-size: 8px; color: #6b7494; font-weight: 500; }

/* === Step 1: Search === */
.dlv-search-wrap { flex: 1; display: flex; align-items: center; justify-content: center; padding: 20px; }
.dlv-search-card {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 22px;
  width: 380px; max-width: 100%;
  text-align: center;
}
.dlv-search-icon {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px;
  background: rgba(59,109,255,0.15); border-radius: 12px;
  font-size: 20px; margin-bottom: 10px;
}
.dlv-search-title { font-size: 16px; font-weight: 800; color: white; margin-bottom: 4px; }
.dlv-search-sub { font-size: 11px; color: #8a92b8; margin-bottom: 16px; }
.dlv-search-input {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px; min-height: 18px;
  text-align: left;
}
.dlv-search-input-icon { color: #6b7494; font-size: 12px; }
.dlv-search-input-text { color: white; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; }
.dlv-search-caret { color: #3b6dff; animation: dlvBlink 0.8s steps(2) infinite; margin-left: 1px; }
@keyframes dlvBlink { 50% { opacity: 0; } }
.dlv-search-btn {
  width: 100%; padding: 11px;
  background: #2563eb; border: none; color: white;
  border-radius: 8px; font-size: 12px; font-weight: 800;
  cursor: pointer; display: flex; gap: 6px; align-items: center; justify-content: center;
}

/* === Step 2: Customer card === */
.dlv-cust { padding: 10px 12px; flex: 1; overflow: auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.dlv-cust-head {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 10px 12px;
}
.dlv-cust-avatar {
  width: 38px; height: 38px; border-radius: 10px;
  background: linear-gradient(135deg, #3b6dff, #7c3aed);
  color: white; font-size: 18px; font-weight: 800;
  display: grid; place-items: center;
}
.dlv-cust-id { flex: 1; }
.dlv-cust-name { font-size: 15px; font-weight: 800; color: white; }
.dlv-cust-phones { font-size: 11px; color: #8a92b8; display: flex; gap: 5px; }
.dlv-cust-phones-sep { color: #4a5278; }
.dlv-cust-newsearch {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  color: white;
  padding: 6px 10px; border-radius: 6px;
  font-size: 10px; font-weight: 700; cursor: pointer;
}
.dlv-cust-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: rgba(255,255,255,0.06);
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.06);
  overflow: hidden;
}
.dlv-cust-stat { background: #0d1330; padding: 10px 8px; text-align: center; }
.dlv-cust-stat-lab { font-size: 8px; color: #6b7494; font-weight: 700; letter-spacing: 0.1em; margin-bottom: 3px; }
.dlv-cust-stat-val { font-size: 15px; font-weight: 800; color: white; }
.dlv-cust-stat-green { color: #10b981; }
.dlv-cust-stat-yellow { color: #fbbf24; }
.dlv-cust-cols { display: grid; grid-template-columns: 1.1fr 1fr; gap: 10px; flex: 1; min-height: 0; }
.dlv-cust-col {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 10px;
  display: flex; flex-direction: column; gap: 6px;
}
.dlv-cust-col-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 9px; color: #8a92b8; font-weight: 700; letter-spacing: 0.08em;
  margin-bottom: 4px;
}
.dlv-cust-add {
  background: rgba(59,109,255,0.18);
  border: 1px solid rgba(59,109,255,0.3);
  color: #93c5fd; padding: 3px 8px; border-radius: 999px;
  font-size: 9px; font-weight: 700; cursor: pointer;
}
.dlv-cust-addr {
  display: flex; gap: 8px; padding: 8px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
}
.dlv-cust-addr-active {
  background: rgba(59,109,255,0.1);
  border-color: rgba(59,109,255,0.4);
}
.dlv-cust-addr-icon {
  width: 26px; height: 26px; border-radius: 6px;
  background: rgba(255,255,255,0.04);
  display: grid; place-items: center; font-size: 12px;
  flex-shrink: 0;
}
.dlv-cust-addr-info { min-width: 0; flex: 1; }
.dlv-cust-addr-title { font-size: 11px; font-weight: 700; color: white; display: flex; align-items: center; gap: 6px; }
.dlv-cust-addr-default {
  background: rgba(59,109,255,0.2); color: #93c5fd;
  font-size: 7px; padding: 1px 5px; border-radius: 3px; letter-spacing: 0.06em;
}
.dlv-cust-addr-line { font-size: 11px; color: rgba(255,255,255,0.85); }
.dlv-cust-addr-meta { font-size: 9px; color: #6b7494; }
.dlv-cust-order {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 10px;
}
.dlv-cust-order-top { display: flex; gap: 6px; align-items: center; margin-bottom: 3px; }
.dlv-cust-order-id { font-size: 11px; color: white; font-weight: 700; }
.dlv-cust-order-status {
  font-size: 8px; padding: 2px 6px;
  background: rgba(16,185,129,0.18); color: #6ee7b7;
  border-radius: 999px; font-weight: 700; letter-spacing: 0.05em;
}
.dlv-cust-order-amount { margin-left: auto; color: #10b981; font-weight: 800; font-size: 12px; }
.dlv-cust-order-meta { font-size: 9px; color: #6b7494; margin-bottom: 6px; }
.dlv-cust-order-acts { display: flex; gap: 5px; }
.dlv-cust-order-acts button {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.85);
  padding: 3px 8px; border-radius: 5px;
  font-size: 9px; font-weight: 600; cursor: pointer;
}
.dlv-cust-order-acts button:nth-child(2) {
  background: rgba(59,109,255,0.18); border-color: rgba(59,109,255,0.3); color: #93c5fd;
}
.dlv-cust-footer {
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px; padding: 10px 12px;
}
.dlv-cust-footer-info { font-size: 11px; color: #8a92b8; display: flex; gap: 5px; flex-wrap: wrap; min-width: 0; }
.dlv-cust-footer-addr { color: white; font-weight: 700; }
.dlv-cust-newbtn {
  background: #2563eb; border: none; color: white;
  padding: 8px 16px; border-radius: 8px;
  font-size: 11px; font-weight: 800; cursor: pointer;
  display: flex; gap: 5px; align-items: center;
  box-shadow: 0 4px 12px rgba(37,99,235,0.35);
  flex-shrink: 0;
}
.dlv-cust-newbtn:hover { background: #1d4ed8; }

/* =============================================================
   COURIER JOURNEY (Phase 4)
   ============================================================= */
.cj-wrap {
  width: 100%; height: 100%;
  background: linear-gradient(160deg, #0a0e22 0%, #131a3a 100%);
  display: flex; flex-direction: column;
  padding: 14px 18px;
  overflow: hidden;
}

/* Step indicator */
.cj-steps {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 0 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 14px;
  position: relative;
}
.cj-step {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  position: relative;
  flex: 1; max-width: 120px;
  opacity: 0.4;
  transition: opacity 0.3s;
}
.cj-step-on { opacity: 1; }
.cj-step-active .cj-step-dot {
  background: linear-gradient(135deg, #3b82f6, #7c3aed) !important;
  border-color: #7c3aed !important;
  box-shadow: 0 0 0 4px rgba(124,58,237,0.25);
}
.cj-step-dot {
  width: 28px; height: 28px; border-radius: 50%;
  background: #1a2347;
  border: 1px solid rgba(255,255,255,0.1);
  color: white; font-size: 12px; font-weight: 800;
  display: grid; place-items: center;
  z-index: 2;
}
.cj-step-on .cj-step-dot {
  background: #10b981;
  border-color: #10b981;
}
.cj-step-lab {
  font-size: 9px; color: rgba(255,255,255,0.7); font-weight: 700;
  text-align: center; letter-spacing: 0.03em;
  max-width: 100px;
}
.cj-step-line {
  position: absolute; top: 13px; left: 50%; right: -50%;
  height: 2px;
  background: rgba(255,255,255,0.06);
  z-index: 1;
}
.cj-step-on + .cj-step .cj-step-line,
.cj-step-on .cj-step-line { background: #10b981; }

/* Card content */
.cj-card {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 22px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cj-icon-big { font-size: 44px; margin-bottom: 10px; animation: cjBounce 1.6s ease-in-out infinite; }
.cj-icon-mid { font-size: 32px; }
@keyframes cjBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.cj-title { font-size: 18px; font-weight: 800; color: white; margin-bottom: 4px; }
.cj-sub { font-size: 12px; color: #8a92b8; margin-bottom: 16px; }
.cj-title-sm { font-size: 14px; font-weight: 800; color: white; }
.cj-sub-sm { font-size: 11px; color: #8a92b8; }

/* Phase 0 — printer ticket */
.cj-printer {
  position: relative;
  margin-top: 10px;
}
.cj-ticket {
  background: white;
  color: #0d1330;
  width: 220px;
  padding: 14px 16px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  border-radius: 4px;
  text-align: left;
  box-shadow: 0 12px 28px rgba(0,0,0,0.4);
  animation: cjPrint 1.5s ease-out;
  transform-origin: top;
}
@keyframes cjPrint {
  0% { transform: scaleY(0); }
  100% { transform: scaleY(1); }
}
.cj-ticket-head { font-weight: 800; padding-bottom: 6px; border-bottom: 1.5px dashed rgba(0,0,0,0.2); margin-bottom: 6px; letter-spacing: 0.04em; }
.cj-ticket-row { padding: 2px 0; }
.cj-ticket-foot { margin-top: 6px; padding-top: 6px; border-top: 1.5px dashed rgba(0,0,0,0.2); font-weight: 700; }

/* Phase 1 — Map */
.cj-route { padding: 14px; gap: 10px; }
.cj-route-head {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.cj-route-driver { display: flex; align-items: center; gap: 10px; }
.cj-driver-av {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: white; font-size: 14px; font-weight: 800;
  display: grid; place-items: center;
}
.cj-driver-name { font-size: 13px; font-weight: 800; color: white; text-align: left; }
.cj-driver-meta { font-size: 10px; color: #8a92b8; text-align: left; }
.cj-eta-pill {
  display: flex; flex-direction: column; align-items: center;
  background: rgba(16,185,129,0.18);
  border: 1px solid rgba(16,185,129,0.4);
  padding: 6px 14px; border-radius: 12px;
}
.cj-eta-num { font-size: 18px; font-weight: 800; color: #6ee7b7; line-height: 1; }
.cj-eta-lab { font-size: 9px; color: #6ee7b7; font-weight: 700; letter-spacing: 0.1em; margin-top: 2px; }
.cj-map {
  width: 100%; flex: 1; min-height: 0;
  background: #0d1330;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.06);
  padding: 6px;
  display: flex;
}
.cj-map-svg { width: 100%; height: 100%; }
.cj-route-foot {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; color: #8a92b8;
  padding-top: 4px;
}
.cj-pulse-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #10b981;
  animation: cjPulse 1.2s ease-in-out infinite;
}
@keyframes cjPulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(16,185,129,0.7); }
  50% { opacity: 0.5; box-shadow: 0 0 0 6px rgba(16,185,129,0); }
}

/* Phase 2 — door */
.cj-door {
  display: flex; align-items: center; gap: 24px;
  margin-top: 12px;
}
.cj-door-frame {
  width: 110px; height: 160px;
  background: linear-gradient(180deg, #4a3520, #2a1f12);
  border: 4px solid #8b6f47;
  border-radius: 6px 6px 0 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 14px;
  position: relative;
}
.cj-door-frame::after {
  content: '';
  position: absolute;
  right: 12px; top: 50%;
  width: 6px; height: 6px;
  background: #fbbf24; border-radius: 50%;
  box-shadow: 0 0 8px #fbbf24;
}
.cj-door-bell { font-size: 22px; }
.cj-door-name { font-size: 12px; font-weight: 800; color: white; letter-spacing: 0.04em; }
.cj-door-floor { font-size: 10px; color: rgba(255,255,255,0.6); }
.cj-courier-icon {
  font-size: 56px;
  animation: cjArrive 0.6s ease-out;
}
@keyframes cjArrive {
  0% { transform: translateX(-200px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

/* Phase 3 — Pay at door */
.cj-pay { padding: 16px; gap: 12px; }
.cj-pay-head {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.cj-pay-head > div:nth-child(2) { flex: 1; text-align: left; }
.cj-pay-amount {
  font-size: 20px; font-weight: 800; color: #6ee7b7;
}

/* Cash flow */
.cj-cash {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  flex: 1; min-height: 0;
}
.cj-cash-stack {
  display: flex; flex-direction: column; gap: 6px;
}
.cj-bill {
  width: 90px; height: 50px;
  border-radius: 6px;
  display: grid; place-items: center;
  font-size: 16px; font-weight: 800;
  color: white;
  box-shadow: 0 6px 14px rgba(0,0,0,0.4);
  animation: cjHandover 0.8s ease-out;
}
.cj-bill-20 { background: linear-gradient(135deg, #fbbf24, #f59e0b); }
.cj-bill-10 { background: linear-gradient(135deg, #60a5fa, #2563eb); animation-delay: 0.1s; }
@keyframes cjHandover {
  0% { transform: translateX(-30px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}
.cj-arrow { font-size: 22px; color: #6ee7b7; }
.cj-cash-receive {
  background: rgba(16,185,129,0.08);
  border: 1px solid rgba(16,185,129,0.3);
  border-radius: 10px;
  padding: 12px 16px;
  display: flex; flex-direction: column; gap: 8px;
  min-width: 140px;
}
.cj-cash-row {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 12px; color: rgba(255,255,255,0.85); font-weight: 600;
}
.cj-cash-change { color: #6ee7b7; font-weight: 800; padding-top: 6px; border-top: 1px solid rgba(255,255,255,0.08); }

/* Card flow */
.cj-cardpay {
  display: flex; align-items: center; justify-content: center; gap: 26px;
  flex: 1; min-height: 0;
  position: relative;
}
.cj-pos-mobile {
  width: 110px;
  background: #1a2347;
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.4);
  border: 2px solid #2a3460;
}
.cj-pos-screen {
  background: #0a0e22;
  border-radius: 6px;
  padding: 12px 8px;
  text-align: center;
  margin-bottom: 8px;
}
.cj-pos-amt { font-size: 16px; font-weight: 800; color: #6ee7b7; margin-bottom: 4px; }
.cj-pos-msg { font-size: 8px; color: #8a92b8; line-height: 1.3; font-weight: 600; }
.cj-pos-keys {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px;
}
.cj-pos-keys span {
  height: 14px; background: rgba(255,255,255,0.05); border-radius: 3px;
}
.cj-tap-card {
  position: relative;
  width: 110px; height: 70px;
  border-radius: 8px;
  background: linear-gradient(135deg, #3b82f6, #1e40af);
  padding: 8px 10px;
  box-shadow: 0 8px 22px rgba(59,130,246,0.4);
  animation: cjTapMove 1.4s ease-in-out infinite;
}
@keyframes cjTapMove {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.cj-tap-card-inner { display: flex; flex-direction: column; gap: 8px; height: 100%; }
.cj-tap-chip {
  width: 22px; height: 16px;
  background: linear-gradient(135deg, #fbbf24, #d97706);
  border-radius: 3px;
}
.cj-tap-num { font-size: 10px; font-weight: 700; color: white; letter-spacing: 0.08em; margin-top: auto; }
.cj-tap-wave {
  position: absolute;
  left: -10px; top: 50%;
  width: 24px; height: 24px;
  border: 2px solid #6ee7b7;
  border-radius: 50%;
  border-right: transparent; border-bottom: transparent;
  transform: translateY(-50%) rotate(45deg);
  animation: cjWave 1.4s ease-out infinite;
}
.cj-tap-wave-2 { left: -18px; animation-delay: 0.5s; }
@keyframes cjWave {
  0% { opacity: 0; transform: translateY(-50%) rotate(45deg) scale(0.6); }
  50% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-50%) rotate(45deg) scale(1.4); }
}

.cj-pay-btn {
  width: 100%;
  background: linear-gradient(135deg, #10b981, #059669);
  border: none; color: white;
  padding: 12px; border-radius: 10px;
  font-size: 13px; font-weight: 800;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(16,185,129,0.35);
}
.cj-pay-btn:hover { transform: translateY(-1px); }

/* Phase 4 — Done */
.cj-done { padding: 30px; }
.cj-done-burst {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  font-size: 40px; font-weight: 800;
  display: grid; place-items: center;
  margin-bottom: 16px;
  box-shadow: 0 0 0 12px rgba(16,185,129,0.18), 0 12px 30px rgba(16,185,129,0.4);
  animation: cjBurst 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes cjBurst {
  0% { transform: scale(0); }
  60% { transform: scale(1.1); }
  100% { transform: scale(1); }
}
.cj-done-stamp {
  display: flex; align-items: center; gap: 8px;
  margin-top: 14px;
  font-size: 11px; font-weight: 700;
  color: #6ee7b7;
  background: rgba(16,185,129,0.08);
  border: 1px solid rgba(16,185,129,0.2);
  border-radius: 999px;
  padding: 6px 14px;
}