/* ===================== checkout.css — Checkout page ===================== */

.checkout-hero{
  background:linear-gradient(160deg,var(--navy-950) 0%,var(--navy-900) 55%,var(--navy-800) 100%);
  color:#fff; padding:40px 20px 46px; text-align:center;
}
.checkout-hero h1{ font-size:24px; font-weight:800; margin:12px 0 8px; }
.checkout-hero p{ color:#c3d2f2; font-size:13.5px; }

.checkout-wrap{ padding:34px 20px 60px; }
.checkout-layout{ display:grid; grid-template-columns:1fr; gap:22px; }
@media (min-width:940px){ .checkout-layout{ grid-template-columns:1fr 1fr; } }

.invoice, .checkout-form{
  background:#fff; border:1px solid var(--slate-200); border-radius:var(--radius-lg);
  padding:26px; box-shadow:var(--shadow-card);
}

.invoice-header{ display:flex; justify-content:space-between; align-items:flex-start; border-bottom:1px solid var(--slate-200); padding-bottom:14px; }
.invoice-header h2{ margin:0; font-size:17px; }
.invoice-no{ margin-top:4px; font-size:12.5px; color:var(--slate-600); font-family:var(--font-mono); }
.invoice-logo{ font-weight:800; letter-spacing:.5px; color:var(--blue-600); font-size:14px; font-family:var(--font-mono); }
.invoice-logo span{ color:var(--slate-900); }

.invoice-table{ margin-top:16px; }
.invoice-row{ display:grid; grid-template-columns:1fr 60px 110px; padding:10px 0; font-size:13.5px; }
.invoice-row.head{ font-weight:700; color:var(--slate-600); border-bottom:1px solid var(--slate-200); font-size:12.5px; }
.invoice-row:not(.head){ border-bottom:1px dashed var(--slate-200); }

.invoice-summary{ margin-top:16px; padding-top:14px; border-top:1px solid var(--slate-200); display:flex; justify-content:flex-end; gap:10px; }
.invoice-summary strong{ font-family:var(--font-mono); font-size:17px; color:var(--blue-600); }
.invoice-footer{ margin-top:16px; font-size:11.5px; color:var(--slate-600); text-align:center; }

.checkout-form h2{ margin:0 0 4px; font-size:17px; }
.form-desc{ font-size:12.5px; color:var(--slate-600); margin-bottom:6px; }

input, textarea, select{
  width:100%; padding:13px 14px; margin-top:12px; border-radius:var(--radius-sm);
  border:1px solid var(--slate-200); font-size:14px; font-family:inherit; background:var(--slate-50);
  transition:border .2s ease, box-shadow .2s ease, background .2s ease;
}
input:focus, textarea:focus, select:focus{
  outline:none; background:#fff; border-color:var(--blue-500); box-shadow:0 0 0 3px rgba(47,107,255,.15);
}
textarea{ min-height:90px; resize:vertical; }

.main-btn{
  margin-top:18px; width:100%; padding:15px; border-radius:var(--radius-md); border:none;
  font-size:15px; font-weight:800; color:#fff; display:flex; align-items:center; justify-content:center; gap:8px;
  background:linear-gradient(135deg,var(--blue-600),var(--blue-400)); box-shadow:0 14px 28px -12px rgba(22,86,224,.5);
  transition:transform .2s ease;
}
.main-btn:hover{ transform:translateY(-2px); }

.modal{ position:fixed; inset:0; background:rgba(7,15,32,.6); display:none; align-items:center; justify-content:center; z-index:1500; padding:20px; }
.modal.show{ display:flex; }
.modal-box{ background:#fff; padding:26px; border-radius:var(--radius-lg); width:100%; max-width:380px; text-align:center; box-shadow:var(--shadow-card-hover); }
.modal-box p{ font-size:13.5px; color:var(--slate-600); line-height:1.8; margin-bottom:6px; }
.modal-box button{
  margin-top:12px; width:100%; padding:13px; border-radius:var(--radius-sm); border:none;
  background:linear-gradient(135deg,var(--blue-600),var(--blue-400)); color:#fff; font-size:14px; font-weight:700;
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.modal-box button.alt{ background:linear-gradient(135deg,#16a34a,#22c55e); }

@media (max-width:600px){
  .checkout-wrap{ padding:24px 14px 44px; }
  .invoice, .checkout-form{ padding:18px; }
  .checkout-hero{ padding:30px 16px 36px; }
  .checkout-hero h1{ font-size:20px; }
}