/* ============================================================
   Techiaas — cart (slide-out panel + cart page + checkout)
   ============================================================ */

/* ---------- Slide-out panel ---------- */
.cart-overlay {
  position: fixed; inset: 0; background: rgba(44, 35, 30, .45);
  opacity: 0; visibility: hidden; transition: opacity var(--t-base), visibility var(--t-base);
  z-index: 300;
}
.cart-overlay.is-open { opacity: 1; visibility: visible; }

.cart-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100%);
  background: var(--bg); z-index: 310; display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform var(--t-slow);
  box-shadow: var(--shadow-lg);
}
.cart-panel.is-open { transform: translateX(0); }
.cart-panel__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-md); border-bottom: 1px solid var(--border); flex: 0 0 auto;
}
.cart-panel__head h2 { font-size: 1.2rem; }
.cart-panel__close { width: 40px; height: 40px; border-radius: 50%; font-size: 1.2rem; color: var(--text); display: inline-flex; align-items: center; justify-content: center; }
.cart-panel__close:hover { background: var(--bg-alt); }
.cart-panel__body { flex: 1 1 auto; overflow-y: auto; padding: var(--space-md); }
.cart-panel__foot { flex: 0 0 auto; padding: var(--space-md); border-top: 1px solid var(--border); background: var(--surface); }

.cart-empty { text-align: center; color: var(--text-muted); padding: var(--space-xl) var(--space-md); }
.cart-empty i { font-size: 2.5rem; color: var(--border); margin-bottom: var(--space-sm); display: block; }

.cart-line { display: flex; gap: var(--space-sm); padding: var(--space-sm) 0; border-bottom: 1px solid var(--border-light); }
.cart-line__img { width: 70px; height: 90px; flex: 0 0 auto; border-radius: var(--radius-sm); object-fit: cover; }
.cart-line__info { flex: 1 1 auto; min-width: 0; }
.cart-line__name { font-size: .92rem; font-weight: 700; margin-bottom: .2rem; }
.cart-line__opt { font-size: .78rem; color: var(--text-muted); margin-bottom: .4rem; }
.cart-line__price { font-size: .9rem; font-weight: 700; }
.cart-line__remove { font-size: .78rem; color: var(--text-light); margin-left: auto; }
.cart-line__remove:hover { color: var(--accent-deep); }

.qty { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.qty button { width: 32px; height: 32px; font-size: 1rem; color: var(--text); display: inline-flex; align-items: center; justify-content: center; transition: background var(--t-fast); }
.qty button:hover { background: var(--bg-alt); }
.qty input { width: 40px; height: 32px; text-align: center; border: none; border-left: 1px solid var(--border); border-right: 1px solid var(--border); font-family: inherit; font-size: .9rem; color: var(--text); background: transparent; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.cart-line__foot { display: flex; align-items: center; gap: var(--space-sm); margin-top: .5rem; }

.cart-subtotal { display: flex; justify-content: space-between; margin-bottom: var(--space-sm); }
.cart-subtotal strong { font-size: 1.15rem; }
.cart-ship-note { font-size: .78rem; color: var(--text-muted); margin-bottom: var(--space-sm); }

/* ---------- Cart page ---------- */
.cart-page { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--space-xl); align-items: start; }
.cart-items-box { background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: var(--space-md); }
.cart-page .cart-line__img { width: 90px; height: 115px; }

.summary-box { background: var(--bg-alt); border-radius: var(--radius-md); padding: var(--space-lg); position: sticky; top: calc(var(--nav-height) + var(--space-md)); }
.summary-box h2 { font-size: 1.2rem; margin-bottom: var(--space-md); }
.summary-row { display: flex; justify-content: space-between; padding: .5rem 0; font-size: .95rem; }
.summary-row--total { border-top: 1px solid var(--border); margin-top: var(--space-sm); padding-top: var(--space-md); font-size: 1.25rem; font-weight: 700; }

.checkout-form { margin-top: var(--space-lg); }
.checkout-form h2 { font-size: 1.3rem; margin-bottom: var(--space-md); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.pay-methods { display: grid; gap: .5rem; margin-bottom: var(--space-md); }
.pay-method { display: flex; align-items: center; gap: .7rem; border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: .8rem 1rem; cursor: pointer; transition: border-color var(--t-fast); font-size: .92rem; }
.pay-method:hover { border-color: var(--accent); }
.pay-method input { accent-color: var(--accent); }
.pay-method i { color: var(--text-muted); }
.agree-note { font-size: .82rem; color: var(--text-muted); margin-bottom: var(--space-md); }
.agree-note a { color: var(--accent-deep); text-decoration: underline; }

@media (max-width: 960px) {
  .cart-page { grid-template-columns: 1fr; gap: var(--space-lg); }
  .summary-box { position: static; }
}
@media (max-width: 480px) {
  .form-row { grid-template-columns: 1fr; }
}