/* ════════════════════════════════════════════════════════════
   MOJOOD — checkout.css
   ════════════════════════════════════════════════════════════ */

/* Minimal checkout nav */
.checkout-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 72px;
  background: rgba(10,10,11,.9);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 48px;
  z-index: 1000;
}

.checkout-steps {
  display: flex;
  align-items: center;
  gap: 12px;
}

.co-step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mid);
  transition: color .3s;
}

.co-step.active { color: var(--acid); }
.co-step.done   { color: var(--chrome); }

.step-num {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700;
  transition: all .3s;
}

.co-step.active .step-num {
  background: var(--acid);
  border-color: var(--acid);
  color: var(--void);
}

.step-line {
  width: 32px; height: 1px;
  background: var(--border);
}

.co-back-link {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--mid);
  text-decoration: none;
  transition: color .2s;
}

.co-back-link:hover { color: var(--chrome); }

/* ── LAYOUT ───────────────────────────────────────────────── */
.checkout-main {
  padding: 100px 48px 80px;
  min-height: 100vh;
}

.checkout-layout {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 48px;
  align-items: start;
}

/* ── STEP BLOCKS ──────────────────────────────────────────── */
.checkout-step {
  margin-bottom: 32px;
}

.co-step-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}

.co-step-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .15em;
  color: var(--acid);
}

.co-step-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--white);
}

.co-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-field { display: flex; flex-direction: column; gap: 8px; }
.form-field label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--chrome); }
.form-field input, .form-field select, .form-field textarea { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 13px 16px; color: var(--white); font-family: var(--font-body); font-size: .9rem; outline: none; transition: border-color .25s, box-shadow .25s; resize: none; -webkit-appearance: none; }
.form-field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%23666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; cursor: pointer; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: rgba(212,255,0,.5); box-shadow: 0 0 0 3px rgba(212,255,0,.07); }
.form-field input::placeholder, .form-field textarea::placeholder { color: var(--mid); }

.co-next-btn { justify-content: center; gap: 10px; }

.co-btn-row { display: flex; gap: 12px; align-items: center; margin-top: 8px; }
.co-btn-row .btn-ghost { flex-shrink: 0; }
.co-btn-row .co-next-btn { flex: 1; }

/* ── DELIVERY OPTIONS ─────────────────────────────────────── */
.delivery-options { display: flex; flex-direction: column; gap: 10px; }

.delivery-option {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 20px;
  cursor: pointer;
  transition: all .25s;
}

.delivery-option input[type="radio"] { display: none; }
.delivery-option:hover, .delivery-option.selected { border-color: rgba(212,255,0,.4); background: rgba(212,255,0,.04); }

.do-content { flex: 1; }
.do-name { font-family: var(--font-display); font-size: .95rem; font-weight: 700; color: var(--white); margin-bottom: 4px; }
.do-time { font-size: .8rem; color: var(--chrome); }
.do-price { font-family: var(--font-display); font-size: .95rem; font-weight: 700; color: var(--acid); }

/* ── PAYMENT OPTIONS ──────────────────────────────────────── */
.payment-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 8px; }

.payment-option {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  cursor: pointer;
  transition: all .25s;
  font-size: .875rem;
  color: var(--chrome);
}

.payment-option input[type="radio"] { display: none; }
.payment-option:hover, .payment-option.selected { border-color: rgba(212,255,0,.4); color: var(--white); background: rgba(212,255,0,.04); }
.po-icon { width: 24px; display: flex; justify-content: center; }

/* ── CHECKOUT SUMMARY ─────────────────────────────────────── */
.checkout-summary {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px;
  position: sticky;
  top: 90px;
}

.cs-title { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: var(--white); margin-bottom: 20px; }
.cs-row { display: flex; justify-content: space-between; font-size: .875rem; color: var(--chrome); margin-bottom: 12px; }
.cs-val { color: var(--white); }
.cs-divider { height: 1px; background: var(--border); margin: 16px 0; }
.cs-total { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: var(--white); }
.cs-total span:last-child { color: var(--acid); }

.co-summary-line {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.col-emoji { font-size: 1.4rem; flex-shrink: 0; }
.col-info { flex: 1; }
.col-name { font-size: .8rem; color: var(--chrome); line-height: 1.4; }
.col-qty { font-size: .75rem; color: var(--mid); }
.col-price { font-family: var(--font-display); font-size: .9rem; font-weight: 700; color: var(--white); white-space: nowrap; }

/* ── SUCCESS ──────────────────────────────────────────────── */
.co-success {
  text-align: center;
  padding: 60px 24px;
}

.cos-icon { width: 80px; height: 80px; margin: 0 auto 28px; }
.cos-icon svg { width: 80px; height: 80px; }

.co-success h2 { font-family: var(--font-display); font-size: 2rem; font-weight: 800; color: var(--white); margin-bottom: 16px; }
.co-success p { color: var(--chrome); max-width: 480px; margin: 0 auto 32px; line-height: 1.8; }

.cos-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 900px) {
  .checkout-layout { grid-template-columns: 1fr; }
  .checkout-summary { position: static; order: -1; }
  .checkout-main { padding: 90px 20px 60px; }
  .checkout-nav { padding: 0 20px; }
  .checkout-steps { display: none; }
  .form-row { grid-template-columns: 1fr; }
  .payment-options { grid-template-columns: 1fr; }
}