/* page-checkout.css — checkout page */

.xb-co-pg { background:var(--xb-bg);min-height:100vh;padding-bottom:calc(var(--xb-bot-h)+20px); }

/* ── CHECKOUT HEADER ── */
.xb-co-header {
  background:var(--xb-ink);padding:18px 20px;
}
.xb-co-header-inner {
  max-width:var(--xb-max);margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;
}
.xb-co-logo {
  font-family:'Syne',sans-serif;font-weight:800;font-size:1.2rem;
  color:#fff;display:flex;align-items:center;gap:4px;
}

/* ── STEP INDICATOR ── */
.xb-co-steps {
  display:flex;align-items:center;justify-content:center;gap:0;
  padding:20px 16px;max-width:500px;margin-inline:auto;
}
.xb-co-step {
  display:flex;flex-direction:column;align-items:center;gap:5px;flex:1;
}
.xb-co-step-dot {
  width:28px;height:28px;border-radius:50%;border:2px solid #e5e5e3;
  display:flex;align-items:center;justify-content:center;
  font-size:.72rem;font-weight:700;color:var(--xb-ink2);background:var(--xb-surface);
  position:relative;z-index:1;transition:all .3s;
}
.xb-co-step.active .xb-co-step-dot { border-color:var(--xb-accent);color:var(--xb-accent);background:var(--xb-accent-pale); }
.xb-co-step.done .xb-co-step-dot { background:var(--xb-accent);border-color:var(--xb-accent);color:#fff; }
.xb-co-step-label { font-size:.68rem;font-weight:600;color:var(--xb-ink3); }
.xb-co-step.active .xb-co-step-label,.xb-co-step.done .xb-co-step-label { color:var(--xb-accent); }
.xb-co-step-line {
  flex:1;height:2px;background:#e5e5e3;margin-top:-16px;position:relative;z-index:0;max-width:60px;
  transition:background .3s;
}
.xb-co-step-line.done { background:var(--xb-accent); }

/* ── LAYOUT ── */
.xb-co-layout {
  max-width:var(--xb-max);margin-inline:auto;
  padding:0 16px 24px;display:flex;flex-direction:column;gap:20px;
}

/* ── FORM SECTION ── */
.xb-co-form-card {
  background:var(--xb-surface);border-radius:var(--xb-r-xl);
  padding:20px;box-shadow:var(--xb-s-xs);
}
.xb-co-section-title {
  font-family:'Syne',sans-serif;font-size:.95rem;font-weight:700;
  color:var(--xb-ink);margin-bottom:16px;display:flex;align-items:center;gap:8px;
}
.xb-co-section-title span {
  width:22px;height:22px;border-radius:50%;
  background:var(--xb-accent);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:.68rem;font-weight:800;flex-shrink:0;
}
.xb-co-row { display:grid;grid-template-columns:1fr;gap:12px; }

.xb-co-field { display:flex;flex-direction:column;gap:5px; }
.xb-co-field label {
  font-size:.78rem;font-weight:600;color:var(--xb-ink2);text-transform:uppercase;letter-spacing:.02em;
}
.xb-co-input {
  height:44px;padding:0 14px;
  border:1.5px solid #e5e5e3;border-radius:var(--xb-r-sm);
  font-size:.9rem;color:var(--xb-ink);background:#fff;outline:none;
  transition:border-color .2s;
}
.xb-co-input:focus { border-color:var(--xb-accent); }
.xb-co-input.is-error { border-color:#ef4444; }
.xb-co-select {
  height:44px;padding:0 14px;
  border:1.5px solid #e5e5e3;border-radius:var(--xb-r-sm);
  font-size:.9rem;color:var(--xb-ink);background:#fff;outline:none;
  cursor:pointer;-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6b65' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:16px;
}
.xb-co-select:focus { border-color:var(--xb-accent); }
.xb-co-field-error { font-size:.74rem;color:#ef4444;display:none; }
.xb-co-field-error.visible { display:block; }

/* ── PAYMENT GATEWAYS ── */
.xb-gw-list { display:flex;flex-direction:column;gap:10px; }
.xb-gw-option {
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;border-radius:var(--xb-r-md);
  border:2px solid rgba(0,0,0,.08);cursor:pointer;
  transition:all .2s;background:#fff;
}
.xb-gw-option:hover { border-color:var(--xb-accent); }
.xb-gw-option.active {
  border-color:var(--xb-accent);background:var(--xb-accent-pale);
  box-shadow:0 0 0 3px rgba(255,107,0,.12);
}
.xb-gw-radio {
  width:18px;height:18px;border-radius:50%;border:2px solid #d1d5db;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:all .2s;
}
.xb-gw-option.active .xb-gw-radio {
  border-color:var(--xb-accent);
}
.xb-gw-radio::after {
  content:'';width:8px;height:8px;border-radius:50%;background:var(--xb-accent);
  display:none;
}
.xb-gw-option.active .xb-gw-radio::after { display:block; }
.xb-gw-icon {
  width:40px;height:28px;border-radius:6px;background:var(--xb-bg);
  display:flex;align-items:center;justify-content:center;
  font-family:'Syne',sans-serif;font-size:.6rem;font-weight:800;color:var(--xb-ink);
  border:1px solid rgba(0,0,0,.07);
}
.xb-gw-info { flex:1;min-width:0; }
.xb-gw-name { font-weight:700;font-size:.88rem;color:var(--xb-ink); }
.xb-gw-desc { font-size:.74rem;color:var(--xb-ink2);margin-top:1px; }

/* ── ORDER SUMMARY ── */
.xb-co-summary {
  background:var(--xb-surface);border-radius:var(--xb-r-xl);
  padding:20px;box-shadow:var(--xb-s-md);
}
.xb-co-sum-title {
  font-family:'Syne',sans-serif;font-size:1rem;font-weight:800;
  color:var(--xb-ink);margin-bottom:14px;
}
.xb-co-sum-item {
  display:flex;align-items:center;gap:10px;
  padding:10px 0;border-bottom:1px solid rgba(0,0,0,.05);
}
.xb-co-sum-thumb {
  width:44px;height:56px;border-radius:var(--xb-r-xs);flex-shrink:0;
  background:linear-gradient(135deg,#374151,#111827);
  display:flex;align-items:flex-end;padding:5px;
  font-family:'Syne',sans-serif;font-size:.42rem;font-weight:800;
  color:rgba(255,255,255,.85);text-transform:uppercase;letter-spacing:.04em;
}
.xb-co-sum-info { flex:1;min-width:0; }
.xb-co-sum-name { font-size:.84rem;font-weight:600;color:var(--xb-ink); white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.xb-co-sum-variant { font-size:.72rem;color:var(--xb-ink2); }
.xb-co-sum-price { font-family:'Syne',sans-serif;font-weight:700;font-size:.9rem;color:var(--xb-ink); }
.xb-co-divider { height:1px;background:rgba(0,0,0,.06);margin:10px 0; }
.xb-co-sum-row { display:flex;justify-content:space-between;font-size:.86rem;color:var(--xb-ink2);margin-bottom:6px; }
.xb-co-sum-total {
  display:flex;justify-content:space-between;
  font-family:'Syne',sans-serif;font-size:1.1rem;font-weight:800;color:var(--xb-ink);
  padding-top:10px;margin-top:4px;border-top:2px solid rgba(0,0,0,.07);
}

/* ── PLACE ORDER BUTTON ── */
.xb-place-order {
  width:100%;height:52px;
  background:linear-gradient(135deg,var(--xb-accent),#e55a00);
  color:#fff;font-size:.97rem;font-weight:700;
  border-radius:var(--xb-r-full);border:none;cursor:pointer;
  box-shadow:0 4px 20px rgba(255,107,0,.4);
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:18px;transition:opacity .2s,transform .15s;
}
.xb-place-order:hover { opacity:.9;transform:translateY(-1px); }
.xb-place-order:disabled { opacity:.55;cursor:not-allowed;transform:none; }
.xb-place-order.is-loading .xb-po-spinner { display:block; }
.xb-place-order.is-loading .xb-po-text { display:none; }
.xb-po-spinner { width:20px;height:20px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:xb-spin .7s linear infinite;display:none; }
@keyframes xb-spin { to{transform:rotate(360deg)} }

.xb-co-secure { display:flex;align-items:center;gap:6px;justify-content:center;font-size:.74rem;color:var(--xb-ink2);margin-top:10px; }

/* ── SUCCESS STATE ── */
.xb-co-success {
  text-align:center;padding:48px 20px;
  animation:xb-fadeUp .5s ease both;
}
.xb-co-success-icon {
  width:80px;height:80px;border-radius:50%;
  background:var(--xb-green-pale);
  display:flex;align-items:center;justify-content:center;
  margin-inline:auto;margin-bottom:18px;
  box-shadow:0 0 0 12px rgba(22,163,74,.1);
}
.xb-co-success h2 {
  font-family:'Syne',sans-serif;font-size:1.4rem;font-weight:800;
  color:var(--xb-ink);margin-bottom:8px;
}
.xb-co-success p { font-size:.9rem;color:var(--xb-ink2);margin-bottom:6px; }
.xb-co-order-num {
  font-family:'Syne',sans-serif;font-size:1rem;font-weight:700;
  color:var(--xb-accent);background:var(--xb-accent-pale);
  padding:8px 20px;border-radius:var(--xb-r-full);
  display:inline-block;margin:12px 0;
}
.xb-co-go-account {
  display:inline-flex;align-items:center;gap:6px;
  padding:12px 24px;border-radius:var(--xb-r-full);
  background:var(--xb-ink);color:#fff;font-weight:700;font-size:.88rem;
  margin-top:16px;transition:opacity .2s;
}
.xb-co-go-account:hover { opacity:.85; }

/* ── CHECKOUT ERROR ── */
.xb-co-error {
  background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.25);
  border-radius:var(--xb-r-sm);padding:12px 16px;
  font-size:.84rem;color:#b91c1c;margin-bottom:14px;display:none;
}
.xb-co-error.visible { display:block; }

/* ── RESPONSIVE ── */
@media (min-width:768px) {
  .xb-co-layout {
    flex-direction:row;align-items:flex-start;gap:28px;padding:0 24px 32px;
  }
  .xb-co-form-side { flex:1;min-width:0;display:flex;flex-direction:column;gap:16px; }
  .xb-co-summary { width:360px;flex-shrink:0;position:sticky;top:calc(var(--xb-nav-h)+16px); }
  .xb-co-row { grid-template-columns:1fr 1fr; }
  .xb-co-pg { padding-bottom:20px; }
}