/* ============================================================
   cart.css  — Cart, Order Sheet, Payment, Tracking
   ============================================================ */

/* ── CART LIST ──────────────────────────────────────────── */
.cart-list { padding: 12px 16px; display: flex; flex-direction: column; gap: 9px; }
.ci {
  background: var(--glass); border: 1px solid var(--bd);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border-radius: 16px; padding: 13px 14px;
  display: flex; align-items: center; gap: 11px;
}
.ci-ico { font-size: 1.8rem; flex-shrink: 0; }
.ci-info { flex: 1; min-width: 0; }
.ci-name { font-size: 0.85rem; font-weight: 800; color: var(--text); margin-bottom: 2px; }
.ci-sub  { font-size: 0.72rem; color: var(--text2); }
.ci-price { font-size: 0.82rem; font-weight: 800; color: var(--c1); white-space: nowrap; }
.ci-del {
  width: 28px; height: 28px; border-radius: 9px;
  background: rgba(255,59,48,.1); border: none;
  color: #ff3b30; font-size: 0.85rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .18s; flex-shrink: 0;
}
.ci-del:active { transform: scale(.86); }

.ci-note {
  font-size: 0.68rem; color: var(--text3); font-style: italic;
  margin-top: 2px; line-height: 1.4;
}

/* ── CART SUMMARY ───────────────────────────────────────── */
.cart-sum {
  background: var(--glass); border: 1px solid var(--bd);
  backdrop-filter: var(--blur); border-radius: 18px;
  margin: 0 16px 12px; padding: 15px 16px;
}
.sum-row {
  display: flex; justify-content: space-between;
  align-items: center; font-size: 0.82rem;
  color: var(--text2); margin-bottom: 8px;
}
.sum-row:last-child { margin-bottom: 0; }
.sum-row.total {
  font-size: 0.92rem; font-weight: 900;
  color: var(--text); border-top: 1px solid var(--bd);
  padding-top: 10px; margin-top: 6px;
}
.sum-row.total .sv { color: var(--c1); }
.sv { color: var(--text); font-weight: 800; }

/* ── EMPTY CART ─────────────────────────────────────────── */
#emptyCart {
  text-align: center; padding: 64px 24px;
}
#emptyCart .ec-ico { font-size: 3.5rem; margin-bottom: 12px; }
#emptyCart h3 { font-size: 0.95rem; font-weight: 800; margin-bottom: 6px; }
#emptyCart p  { font-size: 0.78rem; color: var(--text2); line-height: 1.8; }

/* ── ORDER FORM SHEET ───────────────────────────────────── */
.ord-hdr {
  padding: 20px 20px 14px;
  border-bottom: 1px solid var(--bd);
  display: flex; align-items: center; justify-content: space-between;
}
.ord-hdr h3 { font-size: 0.95rem; font-weight: 900; }
.ord-hdr .mclose { position: static; }

.ord-body { padding: 16px 20px; }

.ord-prods {
  background: var(--glass); border: 1px solid var(--bd);
  border-radius: 13px; padding: 12px 14px; margin-bottom: 14px;
}
.ord-prod-row {
  display: flex; justify-content: space-between;
  font-size: 0.8rem; color: var(--text2); margin-bottom: 6px;
}
.ord-prod-row:last-child { margin-bottom: 0; }
.ord-prod-row .opn { color: var(--text); font-weight: 700; }
.ord-prod-row .opp { color: var(--c1); font-weight: 800; }

.zone-sel {
  display: grid; grid-template-columns: repeat(2,1fr);
  gap: 8px; margin-bottom: 11px;
}
.zone-opt {
  background: var(--glass); border: 1.5px solid var(--bd);
  border-radius: 11px; padding: 10px 8px;
  font-family: 'Cairo', sans-serif; font-size: 0.78rem;
  font-weight: 700; color: var(--text2);
  cursor: pointer; text-align: center; transition: all .2s;
}
.zone-opt.on { background: var(--c1s); border-color: var(--c1); color: var(--c1); }

/* ── PAYMENT SECTION ────────────────────────────────────── */
.pay-methods { display: flex; gap: 8px; margin-bottom: 11px; }
.pm {
  flex: 1; background: var(--glass); border: 1.5px solid var(--bd);
  border-radius: 12px; padding: 10px 8px;
  font-family: 'Cairo', sans-serif; font-size: 0.78rem;
  font-weight: 700; color: var(--text2);
  cursor: pointer; text-align: center; transition: all .2s;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.pm .pm-ico { font-size: 1.4rem; }
.pm.on { background: var(--c1s); border-color: var(--c1); color: var(--c1); }

.bank-info {
  background: var(--glass); border: 1px solid var(--bd);
  border-radius: 12px; padding: 12px 14px; margin-bottom: 11px;
}
.bank-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.8rem; margin-bottom: 7px;
}
.bank-row:last-child { margin-bottom: 0; }
.bank-row .bk { color: var(--text2); }
.bank-row .bv { color: var(--text); font-weight: 800; }
.bank-row .copy-btn {
  background: var(--c1s); border: 1px solid rgba(253,184,20,.3);
  color: var(--c1); padding: 3px 9px; border-radius: 6px;
  font-family: 'Cairo', sans-serif; font-size: 0.7rem;
  font-weight: 700; cursor: pointer;
}

/* ── TOTAL ROW IN ORDER FORM ─────────────────────────────── */
.ord-total {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--c1s); border: 1px solid rgba(253,184,20,.2);
  border-radius: 12px; padding: 12px 14px; margin-bottom: 14px;
}
.ord-total .ot-l { font-size: 0.82rem; font-weight: 800; color: var(--text); }
.ord-total .ot-v { font-size: 1rem; font-weight: 900; color: var(--c1); }

/* ── SUCCESS SHEET ──────────────────────────────────────── */
.succ-wrap {
  text-align: center; padding: 32px 24px;
}
.succ-ico { font-size: 3.5rem; margin-bottom: 12px; }
.succ-wrap h3 { font-size: 1.05rem; font-weight: 900; margin-bottom: 8px; }
.succ-wrap p  { font-size: 0.8rem; color: var(--text2); line-height: 1.85; margin-bottom: 20px; }
.order-id-box {
  background: var(--glass); border: 1px solid var(--bd);
  border-radius: 12px; padding: 12px 16px;
  font-size: 0.82rem; color: var(--text); margin-bottom: 16px;
}
.order-id-box strong { color: var(--c1); font-size: 1.05rem; display: block; margin-top: 3px; }
.succ-btns { display: flex; flex-direction: column; gap: 9px; }
.succ-wa {
  background: #25D366; border: none; color: white;
  padding: 13px; border-radius: 13px;
  font-family: 'Cairo', sans-serif; font-size: 0.88rem;
  font-weight: 900; cursor: pointer;
}
.succ-close {
  background: var(--glass); border: 1px solid var(--bd);
  color: var(--text2); padding: 12px; border-radius: 13px;
  font-family: 'Cairo', sans-serif; font-size: 0.82rem;
  font-weight: 700; cursor: pointer;
}

/* ── ABOUT / INFO PAGE ──────────────────────────────────── */
.about-hero {
  text-align: center; padding: 32px 24px 20px;
}
.about-logo { width: 120px; height: auto; margin-bottom: 10px; }
.about-hero h2 { font-size: 1rem; font-weight: 900; margin-bottom: 6px; }
.about-hero p  { font-size: 0.78rem; color: var(--text2); line-height: 1.85; }

.contact-cards { padding: 0 16px; display: flex; flex-direction: column; gap: 9px; }
.cc {
  background: var(--glass); border: 1px solid var(--bd);
  backdrop-filter: var(--blur); border-radius: 15px;
  padding: 14px; display: flex; align-items: center;
  gap: 12px; cursor: pointer; text-decoration: none;
  color: var(--text); transition: all .2s;
}
.cc:active { transform: scale(.97); }
.cc-ico  { font-size: 1.5rem; flex-shrink: 0; }
.cc-info { flex: 1; }
.cc-lbl  { font-size: 0.78rem; color: var(--text2); margin-bottom: 2px; }
.cc-val  { font-size: 0.88rem; font-weight: 800; color: var(--text); }
.cc-arr  { color: var(--text3); font-size: 0.8rem; }

/* ── LIGHT OVERRIDES ─────────────────────────────────────── */
body.light .ci,
body.light .cart-sum,
body.light .ord-prods,
body.light .bank-info,
body.light .zone-opt,
body.light .pm { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.09); }
body.light .zone-opt.on,
body.light .pm.on { background: var(--c1s); border-color: var(--c1); }
body.light .ord-total { background: var(--c1s); border-color: rgba(253,184,20,.2); }
body.light .cc { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.09); }