:root {
  --bg: #0f1117; --panel: #1a1d27; --border: #2e3350; --accent: #4f8ef7;
  --text: #e8eaf0; --dim: #8890aa; --green: #34c97b;
}
body.cd-theme-light {
  --bg: #f2f4f8; --panel: #ffffff; --border: #d5dbe7; --text: #1c2333; --dim: #667085;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body { background: var(--bg); color: var(--text); font-family: -apple-system, "Segoe UI", Roboto, sans-serif; }

#cd-root { display: flex; height: 100%; }
#cd-cart-panel { flex: 1; display: flex; flex-direction: column; min-width: 0; position: relative; }
#cd-promo-panel, #cd-msg-panel { border-left: 2px solid var(--border); }

/* layout proportions */
body.cd-layout-split2 #cd-promo-panel { display: flex !important; flex: 1; }
body.cd-layout-split3 #cd-promo-panel { display: flex !important; flex: 1; }
body.cd-layout-split3 #cd-msg-panel { display: flex !important; flex: 0 0 26%; }
body.cd-layout-split2 #cd-cart-panel, body.cd-layout-split3 #cd-cart-panel { flex: 0 0 44%; }

/* ── idle / welcome ── */
#cd-idle { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 24px; }
#cd-logo { max-height: 110px; border-radius: 16px; }
#cd-store { font-size: 3rem; font-weight: 800; color: var(--accent); letter-spacing: -1px; }
#cd-welcome { font-size: 1.4rem; color: var(--dim); }

/* ── live cart ── */
#cd-cart { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 22px; }
#cd-items { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.cd-item { display: flex; align-items: baseline; gap: 12px; background: var(--panel); border: 1px solid var(--border);
  border-radius: 12px; padding: 12px 16px; animation: cd-pop .25s ease; }
@keyframes cd-pop { from { transform: translateY(8px); opacity: 0; } }
.cd-item-qty { font-weight: 800; color: var(--accent); font-size: 1.2rem; min-width: 2.4ch; }
.cd-item-name { flex: 1; font-size: 1.25rem; font-weight: 600; }
.cd-item-sub { display: block; font-size: .85rem; color: var(--dim); font-weight: 400; }
.cd-item-price { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
#cd-totals { border-top: 2px solid var(--border); margin-top: 12px; padding-top: 12px; }
.cd-total-row { display: flex; justify-content: space-between; font-size: 1.05rem; color: var(--dim); padding: 3px 0; }
.cd-total-row.cd-grand { font-size: 2.2rem; font-weight: 800; color: var(--text); }
.cd-total-row.cd-grand span:last-child { color: var(--accent); }

/* ── payment done ── */
#cd-done { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; }
.cd-done-check { width: 110px; height: 110px; border-radius: 50%; background: var(--green); color: #fff;
  font-size: 4rem; display: flex; align-items: center; justify-content: center; animation: cd-pop .3s ease; }
#cd-done-total { font-size: 2.4rem; font-weight: 800; }
#cd-done-change { font-size: 1.5rem; color: var(--accent); font-weight: 700; }
#cd-done-msg { font-size: 1.2rem; color: var(--dim); }

/* ── promo gallery ── */
#cd-promo-panel { flex-direction: column; overflow: hidden; }
#cd-slide { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 26px; text-align: center; transition: opacity .5s; }
#cd-slide.cd-fade { opacity: 0; }
#cd-slide img { max-width: 88%; max-height: 62vh; object-fit: contain; border-radius: 18px; }
/* template "Fill" mode — image edge to edge, caption overlaid at the bottom */
#cd-slide.cd-slide-full { padding: 0; gap: 0; position: relative; }
#cd-slide.cd-slide-full img.cd-img-cover { max-width: 100%; max-height: 100%; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
#cd-slide.cd-slide-full .cd-slide-name, #cd-slide.cd-slide-full .cd-slide-price {
  position: absolute; left: 0; right: 0; padding: 10px 16px; background: rgba(0,0,0,.45); color: #fff; }
#cd-slide.cd-slide-full .cd-slide-name { bottom: 0; }
#cd-slide.cd-slide-full .cd-slide-price { bottom: 52px; background: none; text-shadow: 0 1px 6px rgba(0,0,0,.7); }
.cd-slide-emoji { font-size: 9rem; line-height: 1; }
.cd-slide-name { font-size: 2rem; font-weight: 800; }
.cd-slide-price { font-size: 1.6rem; font-weight: 700; color: var(--accent); }

/* ── promo messages panel ── */
#cd-msg-panel { align-items: center; justify-content: center; padding: 22px; }
#cd-msg { font-size: 1.5rem; font-weight: 700; text-align: center; line-height: 1.4; color: var(--accent);
  transition: opacity .5s; }
#cd-msg.cd-fade { opacity: 0; }

@media (max-width: 900px) {
  #cd-root { flex-direction: column; }
  #cd-promo-panel, #cd-msg-panel { border-left: none; border-top: 2px solid var(--border); }
  body.cd-layout-split2 #cd-cart-panel, body.cd-layout-split3 #cd-cart-panel { flex: 1; }
}