/* ============================================================================
   Shared cart — header button, drawer (with editable lines), checkout modal.
   Loaded on every page that has a #cart-button. Reuses tokens from styles.css.
   ========================================================================== */

/* ---- Header cart button ---- */
.cart-btn[hidden] { display: none !important; }
.cart-btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--border); background: var(--white); color: var(--navy);
  font-family: inherit; font-size: 14px; font-weight: 600; transition: all .2s;
}
.cart-btn:hover { border-color: var(--blue); color: var(--blue); }
.cart-btn .cart-btn-count {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--grad); color: var(--white); font-size: 11px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}
.cart-btn[data-empty="1"] .cart-btn-count { background: var(--muted); }
.cart-btn .cart-btn-label { display: inline; }
@media (max-width:520px) { .cart-btn .cart-btn-label { display: none; } }

/* Shared quantity stepper (product cards + cart lines) */
.qty-stepper { display:inline-flex; align-items:center; border:1.5px solid var(--border); border-radius:9px; overflow:hidden; }
.qty-stepper button {
  width:30px; height:32px; border:none; background:var(--off); color:var(--navy);
  font-size:16px; font-weight:700; cursor:pointer; line-height:1; transition:background .15s;
}
.qty-stepper button:hover { background:var(--border); }
.qty-stepper input {
  width:40px; height:32px; border:none; text-align:center; font-size:14px; font-weight:600;
  color:var(--text); font-family:inherit; background:var(--white); -moz-appearance:textfield;
}
.qty-stepper input::-webkit-outer-spin-button,
.qty-stepper input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }

/* ---- Drawer ---- */
.cart-overlay {
  position:fixed; inset:0; background:rgba(13,27,62,.45); z-index:1000;
  opacity:0; visibility:hidden; transition:opacity .25s;
}
.cart-overlay.open { opacity:1; visibility:visible; }
.cart-drawer {
  position:fixed; top:0; right:0; bottom:0; width:min(440px,94vw); z-index:1001;
  background:var(--white); box-shadow:-8px 0 40px rgba(13,27,62,.2);
  transform:translateX(100%); transition:transform .3s ease;
  display:flex; flex-direction:column;
}
.cart-drawer.open { transform:translateX(0); }
.cart-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 24px; border-bottom:1px solid var(--border);
}
.cart-head h3 { font-size:19px; color:var(--navy); }
.cart-close { background:none; border:none; font-size:24px; line-height:1; cursor:pointer; color:var(--muted); padding:4px; }
.cart-close:hover { color:var(--navy); }

.cart-lines { flex:1; overflow-y:auto; padding:8px 24px; }
.cart-empty { text-align:center; color:var(--muted); padding:60px 12px; font-size:14px; }

/* Editable cart line */
.cart-line { display:flex; gap:12px; padding:18px 0; border-bottom:1px solid var(--border); }
.cart-line-media {
  width:46px; height:46px; border-radius:10px; background:var(--off); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.cart-line-media img { max-width:100%; max-height:100%; object-fit:contain; }
.cart-line-info { flex:1; min-width:0; }
.cart-line-name { font-size:14px; font-weight:700; color:var(--navy); margin-bottom:8px; }
.cart-line-controls { display:flex; flex-wrap:wrap; gap:8px 10px; align-items:center; }
.cart-line-denom { display:flex; flex-direction:column; gap:3px; }
.cart-line-denom label, .cart-line-qty-label { font-size:10.5px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.03em; }
.cart-line-denom-input {
  width:110px; padding:7px 9px; border-radius:8px; border:1.5px solid var(--border);
  font-size:13px; font-family:inherit; color:var(--text); background:var(--off);
}
.cart-line-denom-input:focus { outline:none; border-color:var(--blue); background:var(--white); }
.cart-line-denom-fixed { font-size:14px; font-weight:700; color:var(--navy); }
.cart-line-qty { display:flex; flex-direction:column; gap:3px; }
.cart-line-bottom { display:flex; align-items:center; justify-content:space-between; margin-top:10px; }
.cart-line-total { font-size:14px; font-weight:800; color:var(--navy); white-space:nowrap; }
.cart-line-err { font-size:11px; color:#dc2626; margin-top:6px; min-height:0; }
.cart-remove {
  background:none; border:none; cursor:pointer; color:var(--muted); font-size:13px; font-weight:600;
  padding:4px 8px; border-radius:6px;
}
.cart-remove:hover { color:#dc2626; background:rgba(220,38,38,.08); }

.cart-foot { border-top:1px solid var(--border); padding:20px 24px; }
.cart-totals { margin-bottom:16px; }
.cart-total-row { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
.cart-total-row .label { font-size:14px; color:var(--muted); }
.cart-total-row .value { font-size:20px; font-weight:800; color:var(--navy); font-family:'Plus Jakarta Sans',sans-serif; }
.cart-foot .btn { width:100%; justify-content:center; }
.cart-clear { width:100%; margin-top:10px; background:none; border:none; color:var(--muted); font-size:12.5px; cursor:pointer; padding:8px; }
.cart-clear:hover { color:#dc2626; }

/* ---- Checkout / success modal ---- */
.modal-overlay {
  position:fixed; inset:0; background:rgba(13,27,62,.55); z-index:1100;
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; visibility:hidden; transition:opacity .25s;
}
.modal-overlay.open { opacity:1; visibility:visible; }
.modal-box {
  background:var(--white); border-radius:var(--r-xl); width:min(560px,100%);
  max-height:88vh; overflow:hidden; display:flex; flex-direction:column;
  box-shadow:var(--shadow-md); transform:translateY(12px); transition:transform .25s;
}
.modal-overlay.open .modal-box { transform:translateY(0); }
.modal-head { padding:24px 28px 18px; border-bottom:1px solid var(--border); }
.modal-head h3 { font-size:20px; color:var(--navy); margin-bottom:4px; }
.modal-head p { font-size:13px; color:var(--muted); }
.modal-body { padding:12px 28px; overflow-y:auto; }
.modal-item { padding:14px 0; border-bottom:1px solid var(--border); }
.modal-item-top { display:flex; justify-content:space-between; gap:12px; }
.modal-item-name { font-size:14px; font-weight:700; color:var(--navy); }
.modal-item-total { font-size:14px; font-weight:700; color:var(--navy); white-space:nowrap; }
.modal-item-meta { font-size:12px; color:var(--muted); margin-top:3px; }
.modal-item-code { font-size:11px; color:var(--muted); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.modal-grand { display:flex; justify-content:space-between; align-items:baseline; padding:14px 0 4px; }
.modal-grand .label { font-size:15px; font-weight:600; color:var(--navy); }
.modal-grand .value { font-size:22px; font-weight:800; color:var(--navy); font-family:'Plus Jakarta Sans',sans-serif; }
.modal-foot { padding:18px 28px 24px; border-top:1px solid var(--border); display:flex; gap:12px; }
.modal-foot .btn { flex:1; justify-content:center; }
.modal-error { color:#dc2626; font-size:13px; padding:0 28px 10px; }
.modal-captcha { display:flex; justify-content:center; padding:6px 28px 4px; min-height:70px; }

.modal-success { text-align:center; padding:40px 28px; }
.modal-success .check {
  width:64px; height:64px; border-radius:50%; margin:0 auto 20px;
  background:linear-gradient(135deg,#22c55e,#16a34a); color:#fff; font-size:32px;
  display:flex; align-items:center; justify-content:center;
}
.modal-success h3 { font-size:21px; color:var(--navy); margin-bottom:10px; }
.modal-success p { font-size:14px; color:var(--muted); max-width:400px; margin:0 auto 8px; line-height:1.6; }
.modal-success .ref { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:16px; font-weight:700; color:var(--navy); background:var(--off); padding:8px 14px; border-radius:8px; display:inline-block; margin:6px 0 22px; }