/* ============================================================
   AMBER STORE — CHECKOUT PAGE STYLES
   ============================================================ */

body.is-checkout { background: var(--clr-off-white); }

.checkout-page { padding: 2rem 0 5rem; }

/* ---- Steps bar ---- */
.steps-bar {
  display: flex; align-items: center; justify-content: center;
  gap: 0; margin-bottom: 2.5rem;
}
.step {
  display: flex; align-items: center; gap: .5rem;
  font-size: .82rem; font-weight: 600; color: var(--clr-sage);
}
.step-bubble {
  width: 32px; height: 32px; border-radius: var(--r-full);
  border: 2px solid var(--clr-light);
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 700; background: var(--clr-white);
  transition: var(--t-normal);
}
.step-bubble i { font-size: .7rem; }
.step.done .step-bubble {
  background: var(--clr-success);
  border-color: var(--clr-success);
  color: var(--clr-white);
}
.step.active .step-bubble {
  background: var(--clr-gold);
  border-color: var(--clr-gold);
  color: var(--clr-dark);
}
.step.active { color: var(--clr-dark); }
.step-line { flex: 1; height: 2px; background: var(--clr-light); max-width: 60px; }
.step.done + .step-line { background: var(--clr-gold); }

/* ---- Layout ---- */
.checkout-grid {
  display: grid; grid-template-columns: 1.5fr 1fr;
  gap: 2rem; align-items: start;
}
.checkout-card {
  background: var(--clr-white); border-radius: var(--r-xl);
  padding: 2.5rem; box-shadow: var(--shadow-sm);
}
.checkout-card-title {
  display: flex; align-items: center; gap: .75rem;
  font-size: 1.1rem; font-weight: 700;
  margin-bottom: 2rem; padding-bottom: 1.25rem;
  border-bottom: 2px solid var(--clr-light);
}
.checkout-card-title i { color: var(--clr-gold); font-size: 1.2rem; }

/* ---- Form ---- */
.form-group { margin-bottom: 1.5rem; }
.form-group label {
  display: flex; align-items: center; gap: .4rem;
  font-size: .85rem; font-weight: 700;
  margin-bottom: .5rem; color: var(--clr-dark);
}
.form-group label .req { color: var(--clr-danger); }
.form-control {
  width: 100%; padding: .75rem 1rem;
  border: 2px solid var(--clr-light);
  border-radius: var(--r-sm);
  font-size: .95rem; outline: none;
  transition: var(--t-fast);
  background: var(--clr-off-white);
}
.form-control:focus {
  border-color: var(--clr-gold);
  background: var(--clr-white);
  box-shadow: 0 0 0 4px rgba(223,183,79,.08);
}
.form-control.valid   { border-color: var(--clr-success); }
.form-control.invalid { border-color: var(--clr-danger); }
.field-hint {
  font-size: .75rem; margin-top: .35rem;
  display: flex; align-items: center; gap: .3rem;
}
.field-hint.ok  { color: var(--clr-success); }
.field-hint.err { color: var(--clr-danger); }
.field-hint--info {
  font-size: .72rem; color: var(--clr-sage); margin-top: .3rem;
}

/* ---- Payment block ---- */
.payment-block {
  display: flex; align-items: center; gap: 1.25rem;
  background: linear-gradient(135deg, var(--clr-off-white), var(--clr-light));
  border-radius: var(--r-lg); padding: 1.25rem 1.5rem;
  border: 2px solid var(--clr-gold);
  margin-top: 1.5rem;
}
.payment-icon {
  width: 52px; height: 52px; border-radius: var(--r-full);
  background: var(--grad-gold);
  display: flex; align-items: center; justify-content: center;
  color: var(--clr-dark); font-size: 1.3rem; flex-shrink: 0;
}
.payment-block h4 { font-size: .95rem; margin-bottom: .25rem; }
.payment-block p  { font-size: .82rem; color: var(--clr-sage); margin: 0; }

/* ---- Order summary ---- */
.order-items { max-height: 280px; overflow-y: auto; margin-bottom: 1.25rem; }
.order-items::-webkit-scrollbar { width: 3px; }
.order-items::-webkit-scrollbar-thumb { background: var(--clr-light); }
.order-item {
  display: flex; gap: 1rem; padding: .75rem;
  border-radius: var(--r-md); background: var(--clr-off-white);
  margin-bottom: .5rem;
}
.order-item-img   { width: 56px; height: 56px; border-radius: var(--r-sm); object-fit: cover; flex-shrink: 0; }
.order-item-name  { font-size: .88rem; font-weight: 600; margin-bottom: .2rem; }
.order-item-sub   { font-size: .78rem; color: var(--clr-sage); }
.order-item-price { font-size: .9rem; font-weight: 700; color: var(--clr-gold); white-space: nowrap; }

.totals-block { border-top: 2px solid var(--clr-light); padding-top: 1.25rem; }
.total-line {
  display: flex; justify-content: space-between;
  align-items: center; padding: .4rem 0;
  font-size: .92rem;
}
.total-line.big {
  font-size: 1.15rem; font-weight: 700;
  padding-top: .75rem; margin-top: .25rem;
  border-top: 2px dashed var(--clr-light);
}
.total-line .val-gold  { color: var(--clr-gold); font-weight: 700; }
.total-line .val-green { color: var(--clr-success); font-weight: 700; }

.shipping-notice-checkout {
  display: flex; align-items: center; gap: .5rem;
  padding: .6rem .9rem;
  border-radius: var(--r-sm);
  font-size: .78rem; font-weight: 600;
  margin: 1rem 0;
}
.shipping-notice-checkout.free { background: #d4edda; color: #155724; }
.shipping-notice-checkout.paid { background: #fff3cd; color: #856404; }

.btn-confirm {
  width: 100%; padding: 1.1rem;
  font-size: 1rem; font-weight: 700;
  margin-top: 1.5rem;
  display: flex; align-items: center; justify-content: center; gap: .6rem;
}
.btn-confirm:disabled { opacity: .55; cursor: not-allowed; pointer-events: none; }

.back-to-shop {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  font-size: .82rem; color: var(--clr-sage);
  margin-top: 1rem; cursor: pointer;
  transition: var(--t-fast);
}
.back-to-shop:hover { color: var(--clr-gold); }

/* ---- Success modal ---- */
.success-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.8); backdrop-filter: blur(6px);
  z-index: 1000; display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: var(--t-normal);
}
.success-overlay.show { opacity: 1; visibility: visible; }
.success-modal {
  background: var(--clr-white); border-radius: var(--r-xl);
  padding: 3rem; max-width: 480px; width: 90%;
  text-align: center; transform: scale(.9);
  transition: transform var(--t-spring);
}
.success-overlay.show .success-modal { transform: scale(1); }
.success-check {
  width: 80px; height: 80px; border-radius: var(--r-full);
  background: #d4edda;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.5rem; color: var(--clr-success);
  margin: 0 auto 1.5rem;
  animation: pulse-gold 1.5s ease 3;
}
.success-modal h2 { margin-bottom: .75rem; }
.success-modal p  { color: var(--clr-sage); font-size: .9rem; }
.success-order-num {
  font-family: var(--ff-head); font-size: 1.3rem; color: var(--clr-gold);
  background: var(--clr-off-white); padding: .5rem 1.5rem;
  border-radius: var(--r-pill); display: inline-block; margin: .75rem 0;
}
.success-btns      { display: flex; gap: 1rem; margin-top: 2rem; }
.success-btns .btn { flex: 1; }

/* ---- Checkout layout container ---- */
.checkout-container { max-width: 1000px; }

@media (max-width: 968px) {
  .checkout-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .checkout-card { padding: 1.5rem; }
  .steps-bar     { gap: 0; }
  .step-line     { max-width: 30px; }
  .success-btns  { flex-direction: column; }
}