/* ==========================================================
   ALEX SELLER — Checkout page
   ========================================================== */

/* ---------------- Step Progress ---------------- */
.checkout-steps{ display:flex; justify-content:center; gap:0; margin-bottom:44px; flex-wrap:wrap; }
.checkout-step{
  display:flex; align-items:center; gap:10px; padding:0 26px; position:relative; opacity:0.4; transition: var(--transition);
}
.checkout-step.active, .checkout-step.completed{ opacity:1; }
.checkout-step:not(:last-child)::after{
  content:""; position:absolute; right:-2px; top:50%; width:40px; height:2px;
  background: var(--border-glass); transform: translateY(-50%);
}
.checkout-step.completed:not(:last-child)::after{ background: var(--grad-primary); }
.step-num{
  width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background: var(--bg-glass-strong); border:1.5px solid var(--border-glass); font-weight:700; font-size:14px;
}
.checkout-step.active .step-num, .checkout-step.completed .step-num{ background: var(--grad-primary); border-color:transparent; color:#fff; }
.step-label{ font-size:13.5px; font-weight:600; white-space:nowrap; }

@media (max-width: 700px){ .checkout-step{ padding:0 12px; } .step-label{ display:none; } }

/* ---------------- Layout ---------------- */
.checkout-grid{ display:grid; grid-template-columns: 1.6fr 1fr; gap:28px; align-items:start; }
.checkout-panel{ display:none; }
.checkout-panel.active{ display:block; animation: panelFade 0.35s ease; }
@keyframes panelFade{ from{ opacity:0; transform: translateY(10px);} to{ opacity:1; transform:translateY(0);} }
.checkout-panel h3{ font-size:22px; margin-bottom:22px; }
.checkout-panel-actions{ display:flex; gap:14px; margin-top:26px; }

/* ---------------- Gateway Cards ---------------- */
.gateway-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; }
.gateway-card{
  padding:22px 16px; text-align:center; cursor:pointer; border:1.5px solid var(--border-glass);
}
.gateway-card:hover{ border-color: var(--border-glow); }
.gateway-card.selected{ border-color: var(--c-primary); box-shadow: var(--shadow-glow); }
.gateway-logo{ width:48px; height:48px; object-fit:contain; margin:0 auto 12px; border-radius:10px; }
.gateway-logo-fallback{ display:flex; align-items:center; justify-content:center; background: var(--bg-glass-strong); }
.gateway-logo-fallback i{ width:22px; height:22px; color: var(--c-accent-2); }
.gateway-name{ font-weight:600; font-size:14.5px; margin-bottom:8px; }

@media (max-width: 700px){ .gateway-grid{ grid-template-columns: repeat(2,1fr); } }

/* ---------------- Payment Details ---------------- */
.payment-details-card{ padding:28px; margin-bottom:20px; }
.payment-details-header{ display:flex; align-items:center; gap:14px; margin-bottom:20px; }
.payment-details-header img{ width:44px; height:44px; border-radius:10px; object-fit:contain; }
.payment-qr{ text-align:center; margin:20px 0; }
.payment-qr img{ width:180px; height:180px; margin:0 auto; border-radius: var(--radius-md); background:#fff; padding:8px; }
.payment-address-row{
  display:flex; align-items:center; gap:10px; background: var(--bg-glass);
  border:1px solid var(--border-glass); border-radius: var(--radius-sm); padding:12px 16px; margin:14px 0;
}
.payment-address-row span{ flex:1; word-break:break-all; font-family:monospace; font-size:14px; }
.payment-instructions{ font-size:14px; color: var(--text-secondary); margin:14px 0; white-space:pre-line; }
.payment-warning{
  display:flex; gap:10px; background: rgba(244,63,94,0.1); border:1px solid rgba(244,63,94,0.35);
  border-radius: var(--radius-sm); padding:14px 16px; font-size:13.5px; color:#fca5b1; margin-top:14px;
}
.payment-warning i{ width:18px; height:18px; flex-shrink:0; }

.payment-timer{
  display:flex; align-items:center; gap:10px; justify-content:center; padding:16px; font-weight:600;
  color: var(--c-warning); border:1px solid rgba(250,204,21,0.35);
}
.payment-timer i{ width:18px; height:18px; }
.payment-timer.expired{ color: var(--c-danger); border-color: rgba(244,63,94,0.35); }

/* ---------------- Upload ---------------- */
.proof-form{ padding:28px; }
.upload-dropzone{
  border:2px dashed var(--border-glass); border-radius: var(--radius-md);
  padding:36px 20px; text-align:center; cursor:pointer; transition: var(--transition); margin-top:6px;
}
.upload-dropzone:hover, .upload-dropzone.dragover{ border-color: var(--c-primary); background: var(--bg-glass); }
.upload-dropzone i{ width:32px; height:32px; color: var(--c-accent-2); margin-bottom:10px; }
.upload-dropzone p{ margin:0 0 4px; font-size:14.5px; }
#screenshotPreview{ max-width:100%; max-height:220px; margin:16px auto 0; border-radius: var(--radius-sm); }

/* ---------------- Order Success ---------------- */
.order-success-card{ text-align:center; padding:52px 32px; }
.order-success-icon{ width:76px; height:76px; border-radius:50%; background: var(--grad-primary); display:flex; align-items:center; justify-content:center; margin:0 auto 20px; }
.order-success-icon i{ width:38px; height:38px; color:#fff; }
.order-success-id{
  display:inline-block; margin:18px 0; padding:10px 22px; border-radius:999px;
  background: var(--bg-glass-strong); font-family:monospace; font-size:16px; font-weight:700; letter-spacing:0.05em;
}
.order-success-actions{ display:flex; gap:14px; justify-content:center; margin-top:22px; flex-wrap:wrap; }

/* ---------------- Summary Sidebar ---------------- */
.checkout-summary{ padding:26px; position:sticky; top:100px; }
.checkout-summary h3{ font-size:18px; margin-bottom:18px; }
.checkout-summary-items{ display:flex; flex-direction:column; gap:10px; margin-bottom:16px; }
.checkout-summary-item{ display:flex; justify-content:space-between; font-size:13.5px; color: var(--text-secondary); }

@media (max-width: 992px){ .checkout-grid{ grid-template-columns:1fr; } .checkout-summary{ position:static; } }