/* File: public_html/bila-doxa/assets/css/checkout.css */
/* ============================================================================
   BILA — CHECKOUT PAGE (checkout.php)
   Standalone page (no phone frame), same design language as the rest of
   the app via theme.css.
   ============================================================================ */

body{ min-height:100vh; min-height:100dvh; }

.checkout-shell{
  max-width:520px;
  margin:0 auto;
  min-height:100vh;
  min-height:100dvh;
  background:var(--bg);
  display:flex;
  flex-direction:column;
}

.checkout-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px;
  border-bottom:1px solid var(--line);
  flex-shrink:0;
}
.checkout-header a{ color:var(--ink); text-decoration:none; }
.brand-mark{
  font-family:'Fraunces',serif;
  font-weight:600;
  font-size:18px;
  color:var(--ink);
}

.checkout-body{ padding:18px; flex:1; }

.checkout-items{ margin-bottom:20px; }
.cart-line{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 0;
  border-bottom:1px solid var(--line);
}
.cart-line .name{ font-size:13px; font-weight:600; color:var(--ink); margin-bottom:3px; }
.cart-line .unit{ font-size:11px; color:var(--muted); }
.cart-line .line-total{ font-size:12.5px; font-weight:700; color:var(--ink); white-space:nowrap; }

.method-toggle{ display:flex; gap:10px; margin-bottom:16px; }
.method-toggle .chip{ flex:1; text-align:center; padding:11px; border:1px solid var(--line); background:var(--surface); }
.method-toggle .chip.active{ background:var(--accent); border-color:var(--accent); color:#fff; }

.checkout-hint{ font-size:11.5px; color:var(--muted); margin:-8px 0 18px; }
.checkout-hint a{ color:var(--accent); font-weight:600; }

.summary-block{ margin:6px 0 20px; }
.summary-row{ display:flex; justify-content:space-between; font-size:12.5px; color:var(--muted); padding:6px 0; }
.summary-row.total{ font-size:15px; font-weight:700; color:var(--ink); border-top:1px solid var(--line); margin-top:6px; padding-top:12px; }

.empty-state{ text-align:center; padding:80px 20px 20px; color:var(--muted); }
.empty-state p{ font-size:13px; margin-bottom:18px; }

.toast-stack{
  position:fixed; left:16px; right:16px; bottom:24px; z-index:500;
  display:flex; flex-direction:column; gap:8px; pointer-events:none;
  max-width:480px; margin:0 auto;
}
.toast{
  background:var(--ink); color:#fff; font-family:'Archivo',sans-serif;
  font-size:12.5px; font-weight:600; padding:13px 16px; border-radius:12px;
  box-shadow:0 10px 24px rgba(0,0,0,0.25); opacity:0; transform:translateY(16px);
  transition:opacity .35s ease, transform .35s ease;
}
.toast.show{ opacity:1; transform:translateY(0); }

@media (min-width:640px){
  body{ background:#0E0F0D; }
  .checkout-shell{ margin:24px auto; border-radius:20px; overflow:hidden; box-shadow:0 30px 70px rgba(0,0,0,0.45); min-height:auto; }
}