/* Cart — /cart. last13's basket (shop blocks, lines grouped by game under
 * a heading, column labels, code : name, select-all per page and per shop,
 * bulk delete, prizes inside their shop's block, a checkout bar that rises
 * once something is ticked) on the theme-v2 tokens. Classes are sf-cart-*
 * (the kit's .sf-cart grid and .sf-summary are reused as they are).
 * Markup: storefront/cart + storefront/orders/_similar. JS: js/pkg-cart.js. */

.sf-cart-main { min-width: 0; }
.sf-cart-onlyq { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding: 12px 14px; font-size: 13px; color: #d9d0e6; background: #00f0ff0a; border: 1px dashed #00f0ff44; }
.sf-cart-onlyq .icon { flex: 0 0 18px; width: 18px; height: 18px; color: var(--v2-accent); }

/* ---------- Checkboxes ---------- */
.sf-cart-check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13px; }
.sf-cart-check input { width: 18px; height: 18px; flex: none; accent-color: var(--v2-accent); cursor: pointer; }
.sf-cart-check input:disabled { cursor: not-allowed; opacity: .35; }

/* ---------- Page select-all bar ---------- */
.sf-cart-allbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 12px; padding: 10px 14px; background: var(--v2-surface); border: 1px solid #ffffff1a; }
.sf-cart-delsel { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 12px; color: #ff5c9d; border: 1px solid #ff006e66; }
.sf-cart-delsel .icon { width: 14px; height: 14px; }
.sf-cart-delsel b { font-family: var(--v2-mono); }
.sf-cart-delsel:hover { background: #ff006e1a; }
.sf-cart-delsel[hidden], .sf-cart-bar-del[hidden] { display: none; }

/* ---------- Shop block ---------- */
.sf-cart-block { margin-bottom: 16px; padding: 0; }
.sf-panel.sf-cart-block + .sf-panel.sf-cart-block { margin-top: 0; }
.sf-cart-bhead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 14px 18px; border-bottom: 1px solid var(--v2-line); background: #0a001466; }
.sf-cart-shoplink { display: inline-flex; align-items: center; gap: 10px; min-width: 0; margin-right: auto; font-weight: 700; font-size: 14px; }
.sf-cart-shoplink .sf-shop-logo { flex: 0 0 30px; width: 30px; height: 30px; font-size: 13px; overflow: hidden; }
.sf-cart-shoplink .sf-shop-logo img { width: 100%; height: 100%; object-fit: cover; }
.sf-cart-shoplink b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-cart-shoplink > .icon { flex: none; width: 14px; height: 14px; color: var(--v2-muted); }
a.sf-cart-shoplink:hover { color: var(--v2-accent); }
.sf-cart-bsum { font-size: 12px; color: var(--v2-muted); white-space: nowrap; }
.sf-cart-bsum b { font: 700 14px var(--v2-mono); color: var(--v2-text); }
.sf-cart-bsum[hidden] { display: none; }
.sf-cart-lockmsg { margin: 12px 18px 0; }
.sf-cart-block.is-locked .sf-cart-line:not(.is-prize) { opacity: .6; }

/* Column labels + line grid share one template. */
.sf-cart-cols, .sf-cart-line {
  display: grid; align-items: center; column-gap: 14px;
  grid-template-columns: 22px 64px minmax(0, 1fr) 100px 128px 104px 40px;
  grid-template-areas: "chk img info unit qty sub rm";
}
.sf-cart-cols { padding: 8px 18px; font: 400 10px var(--v2-mono); letter-spacing: 1px; text-transform: uppercase; color: var(--v2-muted); border-bottom: 1px solid var(--v2-line); }
.sf-cart-cols span:nth-child(3), .sf-cart-cols span:nth-child(4), .sf-cart-cols span:nth-child(5) { text-align: center; }
.sf-cart-cols span:nth-child(2) { grid-column: 2 / 4; }
.sf-cart-cols span:nth-child(3) { grid-area: unit; }
.sf-cart-cols span:nth-child(4) { grid-area: qty; }
.sf-cart-cols span:nth-child(5) { grid-area: sub; }

/* ---------- Game heading ---------- */
.sf-cart-game + .sf-cart-game { border-top: 1px solid var(--v2-line); }
.sf-cart-gameh { display: flex; align-items: center; gap: 10px; padding: 12px 18px 2px; font: 700 11px/1.4 'Noto Sans Thai', var(--v2-display); letter-spacing: .5px; color: var(--v2-accent); }
.sf-cart-gameh::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, #00f0ff33, transparent); }

/* ---------- Lines ---------- */
.sf-cart-line { padding: 14px 18px; border-bottom: 1px solid #ffffff0d; }
.sf-cart-game .sf-cart-line:last-child { border-bottom: 0; }
.sf-cart-line > .sf-cart-check { grid-area: chk; }
.sf-cart-thumb { grid-area: img; display: block; width: 64px; height: 89px; padding: 0; overflow: hidden; background: var(--v2-surface-2); border: 1px solid #ffffff14; cursor: zoom-in; }
.sf-cart-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.sf-cart-thumb:hover img { transform: scale(1.06); }
.sf-cart-info { grid-area: info; min-width: 0; display: grid; gap: 3px; }
.sf-cart-info h4 { display: flex; align-items: flex-start; gap: 5px; min-width: 0; font-size: 14px; font-weight: 600; line-height: 1.45; }
.sf-cart-info h4 > a, .sf-cart-info h4 > span:last-child { min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.sf-cart-info h4 > a:hover { color: var(--v2-accent); }
.sf-cart-code { flex: none; margin-top: 2px; font: 700 12px var(--v2-mono); color: #cfc4df; white-space: nowrap; }
.sf-cart-sep { flex: none; color: var(--v2-muted); }
.sf-cart-info p { font-size: 11px; color: var(--v2-muted); }
.sf-cart-unit-m { display: none; }
.sf-cart-simbtn { justify-self: start; display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 11px; color: var(--v2-muted); white-space: nowrap; }
.sf-cart-simbtn .icon { width: 13px; height: 13px; }
.sf-cart-simbtn:hover { color: var(--v2-accent); }
.sf-cart-unit { grid-area: unit; text-align: center; font: 400 13px var(--v2-mono); color: #d9d0e6; }
.sf-cart-qty { grid-area: qty; justify-self: center; height: 38px; }
.sf-cart-qty button { width: 34px; }
.sf-cart-qty button:disabled { color: #ffffff30; cursor: not-allowed; background: transparent; }
.sf-cart-sub { grid-area: sub; text-align: center; font: 700 15px var(--v2-mono); color: var(--v2-accent); }
.sf-cart-rm { grid-area: rm; justify-self: end; }
.sf-cart-rm button { display: inline-grid; place-items: center; width: 34px; height: 34px; color: var(--v2-muted); border: 1px solid transparent; }
.sf-cart-rm button:hover { color: #ff5c9d; border-color: #ff006e55; }
.sf-cart-rm .icon { width: 15px; height: 15px; }
.sf-cart-rm span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Prizes: owned already — no stepper, no delete. */
.sf-cart-line.is-prize { grid-template-columns: 22px 64px minmax(0, 1fr); grid-template-areas: "chk img info"; }
.sf-cart-prizemeta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 2px; }
.sf-cart-prizemeta a.sf-orders-tag:hover { filter: brightness(1.3); }
.sf-cart-paid { display: inline-flex; align-items: center; gap: 4px; color: #3ee8a0; }
.sf-cart-paid .icon { width: 12px; height: 12px; }

.sf-cart-clear { margin-top: 6px; }
.sf-cart-summary [data-cart-submit]:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.sf-cart-summary dt[hidden], .sf-cart-summary dd[hidden] { display: none; }

/* ---------- Similar sheet ---------- */
.sf-cart-simdlg { width: min(680px, calc(100% - 24px)); }
.sf-cart-simdlg .sf-dialog-head button { display: grid; place-items: center; width: 32px; height: 32px; color: var(--v2-muted); }
.sf-cart-simdlg .sf-dialog-head button:hover { color: var(--v2-accent); }
.sf-cart-sim { display: grid; gap: 10px; margin-top: 10px; }
.sf-cart-simrow { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--v2-line); }
.sf-cart-simimg img { width: 52px; height: 72px; object-fit: cover; background: var(--v2-surface-2); }
.sf-cart-simrow > div { display: grid; gap: 2px; min-width: 0; font-size: 13px; }
.sf-cart-simrow b { display: flex; gap: 5px; font-weight: 600; }
.sf-cart-simrow small { font-size: 11px; color: var(--v2-muted); }
.sf-cart-simrow .sf-mono { color: var(--v2-accent); font-weight: 700; }
.sf-cart-simrow .sf-mono small { font-weight: 400; margin-left: 6px; }
.sf-cart-simrow .button:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- Checkout bar (≤1080px, once something is ticked) ---------- */
.sf-cart-bar { display: none; }
@media (max-width: 1080px) {
  .sf-cart-bar:not([hidden]) {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    display: flex; align-items: center; gap: 12px; padding: 10px max(16px, env(safe-area-inset-left)) calc(10px + env(safe-area-inset-bottom));
    background: var(--v2-surface); border-top: 1px solid #00f0ff55; box-shadow: 0 -12px 30px #000a;
  }
  .sf-cart-bar-del { display: inline-flex; align-items: center; gap: 4px; height: 44px; padding: 0 12px; color: #ff5c9d; border: 1px solid #ff006e66; }
  .sf-cart-bar-del .icon { width: 16px; height: 16px; }
  .sf-cart-bar-del b { font: 700 12px var(--v2-mono); }
  .sf-cart-bar-sum { display: grid; margin-left: auto; text-align: right; line-height: 1.2; }
  .sf-cart-bar-sum small { font-size: 11px; color: var(--v2-muted); }
  .sf-cart-bar-sum b { font: 700 18px var(--v2-mono); color: var(--v2-accent); }
  .sf-cart-bar .button { min-height: 44px; padding: 0 18px; gap: 10px; }
  body:has([data-cart-bar]:not([hidden])) .sf-page { padding-bottom: 120px; }
}
/* On a phone the bar takes the tab bar's place while something is ticked
   (last13: body.cart-has-selection hid its bottom nav the same way). The
   component renders the bar's [hidden]; :has() follows it with no JS. */
@media (max-width: 680px) {
  body:has([data-cart-bar]:not([hidden])) .sf-chrome-tabs { display: none; }
}

@media (max-width: 860px) {
  .sf-cart-cols { display: none; }
  .sf-cart-line {
    grid-template-columns: 22px 60px minmax(0, 1fr) auto; row-gap: 10px; column-gap: 12px;
    grid-template-areas: "chk img info rm" "chk img sub qty";
    align-items: start;
  }
  .sf-cart-line > .sf-cart-check { align-self: center; grid-row: 1 / span 2; }
  .sf-cart-thumb { width: 60px; height: 84px; grid-row: 1 / span 2; }
  .sf-cart-unit { display: none; }
  .sf-cart-unit-m { display: block; }
  .sf-cart-sub { align-self: center; justify-self: start; text-align: left; }
  .sf-cart-qty { justify-self: end; height: 36px; }
  .sf-cart-qty button { width: 32px; }
  .sf-cart-rm { align-self: start; margin: -6px -8px 0 0; }
  .sf-cart-line.is-prize { grid-template-columns: 22px 60px minmax(0, 1fr); grid-template-areas: "chk img info"; }
  .sf-cart-line.is-prize .sf-cart-thumb { grid-row: auto; }
  .sf-cart-line.is-prize > .sf-cart-check { grid-row: auto; }
  /* code : name as one flowing label — side by side it left the name a
     sliver of the column. */
  .sf-cart-info h4 { display: block; font-size: 13px; }
  .sf-cart-info h4 > a, .sf-cart-info h4 > span:last-child { display: inline; overflow-wrap: break-word; } /* inline after the code: "anywhere" split "B|attle" */
  .sf-cart-code { margin-right: 4px; font-size: 11px; }
  .sf-cart-sep { margin-right: 1px; } /* + the space after it in the markup = the break point before the name */
}
@media (max-width: 680px) {
  .sf-cart-bhead { padding: 12px 14px; }
  .sf-cart-bsum { width: 100%; padding-left: 28px; }
  .sf-cart-line { padding: 12px 14px; }
  .sf-cart-gameh { padding: 10px 14px 0; }
  .sf-cart-lockmsg { margin: 10px 14px 0; }
  .sf-cart-simrow { grid-template-columns: 44px minmax(0, 1fr); }
  .sf-cart-simimg { grid-row: span 2; }
  .sf-cart-simimg img { width: 44px; height: 60px; }
  .sf-cart-simrow .button { grid-column: 2; justify-self: start; }
}

/* ---------- Alignment + colour (2026-10-09, owner: "ให้ checkbox อยู่ในแนวเดียวกัน เพิ่มสีสันให้หน่อย") ----------
   One checkbox column: every row (select-all, shop head, line) starts 18px in (14px on phones)
   and the browser's own 4px checkbox margin is gone — select-all sat 4px left of the rest.
   Colour follows palette.css: prices gold (--sf-price), codes violet (--sf-code), headings with
   the pink mark, a ticked line lit cyan, shop heads tinted violet, the off button plainly off. */
.sf-cart-check input { margin: 0; }
.sf-cart-allbar { padding-left: 18px; background: linear-gradient(90deg, #00f0ff0d, transparent 45%), var(--v2-surface); }
.sf-cart-allbar:has([data-cart-all]:checked) { border-color: #00f0ff55; }
.sf-cart-bhead { background: linear-gradient(90deg, #8b5cf626, #ff2e880a 45%, #0a001466 75%); border-bottom-color: #b9a8ff2e; }
.sf-cart-bsum b { color: var(--sf-price); }
/* the diamond sits centred on the checkbox column (18px box → 5.5px in), the game name starts where
   the card pictures do (checkbox 22px + gap 14px; 12px ≤860px): 5.5 + 7 + margin + the 10px gap. */
.sf-cart-gameh::before { content: ''; flex: none; width: 7px; height: 7px; margin: 0 13.5px 0 5.5px; transform: rotate(45deg); background: var(--v2-accent); box-shadow: 0 0 8px #00f0ff99; }
.sf-cart-code { color: var(--sf-code); }
.sf-cart-sub { color: var(--sf-price); }
.sf-cart-line { transition: background-color .2s, box-shadow .2s; }
.sf-cart-line:has(> .sf-cart-check input:checked) { background: linear-gradient(90deg, #00f0ff14, transparent 65%); box-shadow: inset 3px 0 0 var(--sf-action); }
.sf-cart-summary .sf-total { color: var(--sf-price); text-shadow: 0 0 18px #ffd24a40; }
.sf-cart-summary [data-cart-sel-n] { color: var(--sf-action); font-weight: 700; }
.sf-cart-summary h2 .icon { color: var(--sf-heading-mark); filter: drop-shadow(0 0 6px #ff2e8866); }
:is(.sf-cart-summary, .sf-cart-bar) [data-cart-submit]:disabled { background: #ffffff14; color: var(--sf-muted); opacity: 1; }
.sf-cart-clear .text-link { color: var(--sf-muted); }
.sf-cart-clear .text-link:hover { color: var(--sf-danger); }
@media (max-width: 1080px) {
  .sf-cart-bar-sum b { color: var(--sf-price); }
}
@media (max-width: 860px) {
  .sf-cart-gameh::before { margin-right: 11.5px; }
}
@media (max-width: 680px) {
  .sf-cart-allbar { padding-left: 14px; }
}