/* Pcngon cart drawer (mockup B — Thẻ mềm). Port từ Pcngon 3 màn.dc.html.
 * Màu lấy theo brand: --pcn-primary tự set từ Flatsome --primary-color (cart.js),
 * fallback #0066CC. Font: inherit (khớp theme). docs/10-website-cart-checkout.md. */

:root {
  --pcn-primary: #0066CC;
  --pcn-primary-dark: #0052A3;
  --pcn-primary-soft: #EAF3FC;
  --pcn-save: #16A34A;
  --pcn-save-soft: #EAF7EF;
  --pcn-ink: #333;
  --pcn-ink-strong: #1A1F26;
  --pcn-muted: #6B7280;
  --pcn-line: #E5E7EB;
  --pcn-bg-soft: #F7F8FA;
  --pcn-danger: #DC2626;
  --pcn-shadow: 0 1px 3px rgba(16,24,40,.08);
  --pcn-shadow-lg: 0 8px 28px rgba(16,24,40,.14);
}

/* ---- Scrim + drawer ---- */
.pcn-scrim {
  position: fixed; inset: 0; background: rgba(16,24,40,.45);
  opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s;
  z-index: 99998;
}
.pcn-scrim.is-open { opacity: 1; visibility: visible; }

.pcn-cart {
  position: fixed; top: 0; right: 0; height: 100%; width: 392px; max-width: 100vw;
  background: var(--pcn-bg-soft); box-shadow: var(--pcn-shadow-lg);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .28s cubic-bezier(.4,0,.2,1);
  z-index: 99999; font-family: inherit; color: var(--pcn-ink);
}
.pcn-cart.is-open { transform: translateX(0); }
.pcn-cart *, .pcn-cart *::before, .pcn-cart *::after { box-sizing: border-box; }
@media (max-width: 480px) {
  .pcn-cart { width: 100vw; }
  .pcn-qty button { width: 38px; height: 38px; }   /* dễ chạm hơn trên mobile */
  .pcn-item-del { padding: 6px; margin: -6px -6px 0 0; }
}

/* ---- Head ---- */
.pcn-cart-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px 12px; flex: none;
}
.pcn-cart-title { font-size: 18px; font-weight: 700; color: var(--pcn-ink-strong); }
.pcn-cart-title small { font-weight: 500; color: var(--pcn-muted); margin-left: 4px; }
.pcn-x {
  width: 34px; height: 34px; border-radius: 999px; background: #fff;
  box-shadow: var(--pcn-shadow); border: none; cursor: pointer;
  color: #9ca3af; font-size: 18px; line-height: 1; display: flex;
  align-items: center; justify-content: center;
}

/* ---- Body (list) ---- */
.pcn-cart-body {
  flex: 1; overflow-y: auto; padding: 0 14px 8px;
  display: flex; flex-direction: column; gap: 12px;
}
.pcn-item {
  background: #fff; border-radius: 12px; padding: 14px; box-shadow: var(--pcn-shadow);
  display: flex; gap: 12px;
}
.pcn-item.is-oos { opacity: .62; }
.pcn-item-img {
  width: 64px; height: 64px; border-radius: 0; background: var(--pcn-bg-soft);
  flex: none; display: flex; align-items: center; justify-content: center;
  color: #c2c8d0; overflow: hidden;
}
.pcn-item-img img { width: 100%; height: 100%; object-fit: cover; }
.pcn-item-main { flex: 1; min-width: 0; }
.pcn-item-top { display: flex; justify-content: space-between; gap: 8px; }
.pcn-item-name {
  font-size: 14px; line-height: 1.35; color: var(--pcn-ink);
  white-space: normal; word-break: break-word;
}
.pcn-item-pname { display: block; }
.pcn-item-variant {
  display: inline-block; margin-top: 5px; font-size: 12px; font-weight: 700;
  color: var(--pcn-primary); background: var(--pcn-primary-soft, #EAF3FC);
  padding: 1px 9px; border-radius: 999px; line-height: 1.7;
}
.pcn-item-del { color: #c2c8d0; cursor: pointer; flex: none; background: none; border: none; padding: 0; margin: 0 !important; min-height: 0 !important; line-height: 1 !important; }
.pcn-item-del:hover { color: var(--pcn-danger); }
.pcn-item-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.pcn-qty { display: flex; align-items: center; background: var(--pcn-bg-soft); border-radius: 8px; padding: 3px; }
.pcn-qty button {
  /* reset cứng để thắng style button toàn cục của Flatsome */
  width: 32px !important; height: 32px !important; min-height: 0 !important;
  padding: 0 !important; margin: 0 !important; line-height: 1 !important;
  text-transform: none !important; letter-spacing: normal !important;
  -webkit-appearance: none; appearance: none;
  border-radius: 6px; background: #fff; box-shadow: var(--pcn-shadow);
  border: none; cursor: pointer; font-size: 18px; font-weight: 600; color: var(--pcn-primary);
  display: flex; align-items: center; justify-content: center;
}
.pcn-qty button.minus { color: var(--pcn-muted); }
.pcn-qty .num { width: 34px; text-align: center; font-size: 14px; font-weight: 600; }
.pcn-item-total { font-size: 15px; font-weight: 700; color: var(--pcn-ink-strong); }
.pcn-item-total.sale { color: var(--pcn-save); }
.pcn-item-oos-tag {
  font-size: 11px; font-weight: 600; color: var(--pcn-danger);
  background: #FEF2F2; border-radius: 4px; padding: 2px 7px;
}

/* ---- Foot ---- */
.pcn-cart-foot { padding: 14px; flex: none; }
.pcn-foot-card { background: #fff; border-radius: 12px; padding: 16px; box-shadow: var(--pcn-shadow); }
.pcn-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.pcn-row .lbl { font-size: 14px; color: var(--pcn-muted); }
.pcn-row .val { font-size: 14px; color: var(--pcn-ink); }
.pcn-row .val.free { font-weight: 600; color: var(--pcn-save); }
.pcn-row.total { padding-top: 12px; border-top: 1px dashed var(--pcn-line); margin-bottom: 0; }
.pcn-row.total .lbl { font-size: 15px; font-weight: 600; color: var(--pcn-ink-strong); }
.pcn-row.total .val { font-size: 20px; font-weight: 700; color: var(--pcn-ink-strong); }
.pcn-btn-primary {
  width: 100%; height: 50px; margin-top: 14px; border: none; border-radius: 10px;
  background: var(--pcn-primary); color: #fff; font-size: 16px; font-weight: 700; cursor: pointer;
  transition: background .15s; display: flex; align-items: center; justify-content: center; gap: 8px;
}
.pcn-btn-primary:hover { background: var(--pcn-primary-dark); }
.pcn-continue { display: block; width: 100%; text-align: center; margin-top: 10px;
  background: none; border: none; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--pcn-primary); }

/* ---- Empty ---- */
.pcn-empty { text-align: center; padding: 56px 28px; margin: auto 0; }
.pcn-empty-ic {
  width: 84px; height: 84px; border-radius: 999px; background: var(--pcn-primary-soft);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; color: var(--pcn-primary);
}
.pcn-empty-title { font-size: 17px; font-weight: 700; color: var(--pcn-ink-strong); margin-bottom: 8px; }
.pcn-empty-sub { font-size: 14px; line-height: 1.55; color: var(--pcn-muted); margin-bottom: 24px; }

/* ---- Floating trigger (FAB) ---- */
.pcn-fab {
  position: fixed; right: 18px; bottom: 18px; width: 56px; height: 56px; border-radius: 999px;
  background: var(--pcn-primary); color: #fff; border: none; cursor: pointer;
  box-shadow: var(--pcn-shadow-lg); display: flex; align-items: center; justify-content: center;
  z-index: 99990;
}
.pcn-fab-badge {
  position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 999px; background: var(--pcn-danger); color: #fff; font-size: 11px; font-weight: 700;
  display: none; align-items: center; justify-content: center; line-height: 20px;
}
.pcn-fab-badge.show { display: flex; }
.pcn-toast {
  position: fixed; left: 50%; bottom: 88px; transform: translateX(-50%) translateY(10px);
  background: var(--pcn-ink-strong); color: #fff; font-size: 13px; padding: 10px 16px; border-radius: 8px;
  opacity: 0; visibility: hidden; transition: opacity .2s, transform .2s; z-index: 100000;
}
.pcn-toast.show { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }