/* TechBites cart page (new UI, "A · Two columns"): items grouped by type + sticky summary. Scoped under .tbc.
   Line markup comes from app.js initCartPage(); the checkout popup below the page keeps its own styles. */
.tbc { --s1:#151518; --s2:#1A1A1E; --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.14); --brand:#F39125; --green:#19E68C; --cyan:#22D3EE; --gold:#FFC857;
  --tx:#F4F4F5; --tx2:#B4B4BD; --tx3:#85858F; --spring:cubic-bezier(.34,1.56,.64,1);
  font-family:Cairo, sans-serif; color:var(--tx); line-height:1.6; text-align:right; }
.tbc h1, .tbc h2, .tbc h3, .tbc p { margin:0; }
.tbc-ico { width:18px; height:18px; flex:none; }
.tbc-num, .tbc .p-num { font-family:'JetBrains Mono', ui-monospace, monospace; font-weight:800; direction:ltr; unicode-bidi:isolate; white-space:nowrap; }

.tbc-top { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.tbc-top h1 { font-family:Cairo, sans-serif; font-weight:900; font-size:clamp(28px,3.6vw,40px); line-height:1.35; color:#fff; }
.tbc-cnt { font-size:.5em; color:var(--tx3); margin-inline-start:8px; }
.tbc-link { display:inline-flex; align-items:center; gap:6px; font-weight:800; font-size:14px; color:var(--brand); padding:8px 4px; }
.tbc-link:hover { text-decoration:underline; color:var(--brand); } .tbc-link .tbc-ico { width:16px; height:16px; }

/* Summary sits on the right (first column in RTL), items on the left; on phones the summary drops under the items. */
.tbc-grid { display:grid; grid-template-columns:360px minmax(0,1fr); gap:22px; align-items:start; margin-top:20px; }
.tbc-grid > .tbc-sum { order:-1; }
.tbc-grp + .tbc-grp { margin-top:18px; }
.tbc-grp h2 { font-family:Cairo, sans-serif; font-size:14px; font-weight:900; color:var(--tx2); margin:0 4px 8px; }
.tbc-items { border-radius:20px; background:var(--s1); border:1px solid var(--line); overflow:hidden; }
.tbc-it { position:relative; display:grid; grid-template-columns:120px minmax(0,1fr) auto; gap:14px; align-items:center; padding:12px; transition:background .2s; }
.tbc-it + .tbc-it { border-top:1px solid var(--line); }
.tbc-it:hover { background:rgba(255,255,255,.02); }
.tbc-it img { width:120px; height:auto; aspect-ratio:460/215; object-fit:cover; border-radius:10px; display:block; background:var(--s2); }
/* Regional Steam wallet code: the country flag, whole, centred on the tile. */
.tbc-it img.tbc-flag { object-fit:contain; padding:10px 22px; box-sizing:border-box; }
.tbc-it h3 { font-family:Cairo, sans-serif; font-size:16px; font-weight:800; line-height:1.35; color:#fff; overflow-wrap:anywhere; }
.tbc-meta { display:flex; align-items:center; gap:8px; margin-top:5px; flex-wrap:wrap; }
.tbc-unit { color:var(--tx3); font-size:12.5px; } .tbc-unit .tbc-num { font-weight:700; }
.tbc-status { display:block; margin-top:2px; font-size:11.5px; font-weight:800; min-height:0; }
.tbc-status:empty { display:none; }
.tbc-chip { display:inline-flex; align-items:center; font-size:12px; font-weight:800; padding:1px 9px; border-radius:99px; border:1px solid; white-space:nowrap; }
.tbc-chip.gift { color:#66c0f4; border-color:rgba(102,192,244,.35); background:rgba(102,192,244,.08); }
.tbc-chip.card { color:var(--gold); border-color:rgba(255,200,87,.35); background:rgba(255,200,87,.08); }
.tbc-chip.key { color:var(--cyan); border-color:rgba(34,211,238,.35); background:rgba(34,211,238,.08); }
.tbc-chip.acc { color:#a78bfa; border-color:rgba(167,139,250,.35); background:rgba(167,139,250,.08); }
.tbc-chip.offer { color:var(--gold); border-color:rgba(255,200,87,.45); background:rgba(255,200,87,.12); }
.tbc-it-end { display:flex; align-items:center; gap:12px; }
.tbc-qty { display:inline-flex; align-items:center; gap:2px; padding:3px; border-radius:12px; background:#0B0B0D; border:1px solid var(--line2); }
.tbc-qty button { width:36px; height:36px; border:0; border-radius:9px; background:rgba(255,255,255,.05); color:#fff; cursor:pointer; font-weight:900; font-size:16px; }
.tbc-qty button:hover { background:rgba(255,255,255,.12); } .tbc-qty .tbc-num { min-width:26px; text-align:center; font-size:14px; }
.tbc-lt { min-width:92px; text-align:left; font-size:17px; color:#fff; } .tbc-lt small { font-size:.6em; color:var(--tx3); }
.tbc-rm { width:36px; height:36px; display:grid; place-items:center; border:0; border-radius:10px; background:none; color:var(--tx3); cursor:pointer; }
.tbc-rm svg { width:18px; height:18px; } .tbc-rm:hover { color:#fb7185; background:rgba(251,113,133,.1); }

.tbc-sum { position:sticky; top:96px; border-radius:22px; background:var(--s1); border:1px solid var(--line2); padding:20px; display:grid; gap:14px; }
.tbc-sum h2 { font-family:Cairo, sans-serif; font-size:18px; font-weight:900; color:#fff; }
.tbc-sum hr { border:0; border-top:1px dashed var(--line2); margin:2px 0; width:100%; }
.tbc-row { display:flex; justify-content:space-between; align-items:center; color:var(--tx2); font-weight:700; font-size:14.5px; }
.tbc-row .tbc-num { color:#fff; font-size:15px; }
.tbc-row.is-disc, .tbc-row.is-disc .tbc-num { color:var(--green); }
.tbc-row.is-fee, .tbc-row.is-fee .tbc-num { color:#fcd34d; }
.tbc-note { border-radius:12px; border:1px solid rgba(34,211,238,.25); background:rgba(34,211,238,.05); padding:10px 12px; font-size:12px; line-height:1.8; color:var(--tx2); }
.tbc-note a { color:var(--brand); text-decoration:underline; }
.tbc-total { display:flex; justify-content:space-between; align-items:baseline; }
.tbc-total > span:first-child { font-weight:900; font-size:17px; color:#fff; }
.tbc-total .tbc-num { font-size:28px; color:var(--brand); }
.tbc-btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:54px; padding:0 22px; border-radius:16px; border:0; cursor:pointer; font:900 16px Cairo, sans-serif; background:var(--brand); color:#0b0b0d; box-shadow:0 10px 28px rgba(243,145,37,.3); transition:transform .2s var(--spring), box-shadow .2s; width:100%; text-decoration:none; }
.tbc-btn:hover { transform:translateY(-2px); box-shadow:0 14px 34px rgba(243,145,37,.45); color:#0b0b0d; }
.tbc-btn:disabled { transform:none; }
.tbc-btn:focus-visible, .tbc-qty button:focus-visible, .tbc-rm:focus-visible, .tbc-clear:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.tbc-pays { display:flex; align-items:center; justify-content:center; gap:8px; color:var(--tx3); font-size:12.5px; font-weight:700; flex-wrap:wrap; }
.tbc-pays b { color:var(--tx2); padding:2px 9px; border-radius:8px; border:1px solid var(--line2); font-weight:800; }
.tbc-clear { display:block; margin:0 auto; background:none; border:0; color:var(--tx3); font:700 13px Cairo, sans-serif; cursor:pointer; padding:6px; }
.tbc-clear:hover { color:#fb7185; }
.tbc-help { margin-top:22px; text-align:center; font-size:13px; font-weight:700; color:var(--tx3); } .tbc-help a { color:#25D366; }
.tbc-empty { text-align:center; padding:56px 20px; border-radius:24px; border:1px dashed var(--line2); }
.tbc-empty h2 { font-family:Cairo, sans-serif; font-size:24px; font-weight:900; color:#fff; } .tbc-empty p { color:var(--tx2); font-weight:700; margin-top:4px; }
.tbc-empty .tbc-btn { width:auto; margin-top:18px; }

@media (max-width:1023px) {
  .tbc-grid { grid-template-columns:minmax(0,1fr); } .tbc-sum { position:static; } .tbc-grid > .tbc-sum { order:0; }
}
@media (max-width:720px) {
  .tbc-it { grid-template-columns:96px minmax(0,1fr); grid-template-areas:"img info" "img end"; row-gap:8px; }
  .tbc-it img { width:96px; grid-area:img; align-self:center; }
  .tbc-it-info { grid-area:info; padding-inline-end:34px; }
  .tbc-it-end { grid-area:end; justify-content:space-between; gap:8px; }
  .tbc-rm { position:absolute; top:6px; left:6px; } .tbc-lt { min-width:0; font-size:16px; }
}
@media (prefers-reduced-motion:reduce) { .tbc * { transition:none !important; } }
/* Empty cart: no summary box, just the empty state */
.tbc-grid:has(.tbc-empty) { grid-template-columns:minmax(0,1fr); } .tbc-grid:has(.tbc-empty) .tbc-sum { display:none; }


/* Steam game lines: cover, title and chip open the game page */
.tbc-it[data-game-href] img, .tbc-it[data-game-href] .tbc-chip { cursor:pointer; }
.tbc-title-link { color:inherit; text-decoration:none; }
.tbc-title-link:hover, .tbc-title-link:focus-visible { text-decoration:underline; }

/* Held unpaid order (two-hour window): one card above the cart. Robot | title + time left + text + two buttons side by side */
.tbc-held { display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 18px; align-items:center; margin:0 0 18px; padding:16px 20px; border-radius:22px; border:1px solid rgba(243,145,37,.42);
  background:radial-gradient(60% 120% at 0% 50%, rgba(243,145,37,.16), transparent 70%), #151518; }
.tbc-held[hidden] { display:none; }
.tbc-held-bot { grid-row:1 / span 3; width:104px; height:104px; }
.tbc-held-bot.tb-rspot { margin-inline:0; }
.tbc-held-head { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; }
.tbc-held-head strong { color:#fff; font-size:17px; font-weight:900; font-family:Cairo, sans-serif; }
.tbc-held-left { display:inline-flex; align-items:center; gap:6px; min-height:28px; padding:0 12px; border-radius:999px; background:rgba(243,145,37,.16); border:1px solid rgba(243,145,37,.4); color:#FFAB40; font:800 12.5px Cairo, sans-serif; }
.tbc-held-left[hidden] { display:none; }
.tbc-held-left.is-low { background:rgba(255,23,68,.14); border-color:rgba(255,23,68,.45); color:#FF6B81; }
#held-order-text { margin:0; color:#D1D5DB; font-size:13.5px; line-height:1.7; }
.tbc-held-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:8px; }
.tbc-held-actions .tbc-btn { display:inline-flex; align-items:center; justify-content:center; width:auto; flex:0 0 auto; margin:0; min-height:48px; min-width:168px; padding:0 22px; }
.tbc-held-cancel { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 18px; border-radius:14px; background:transparent; border:1px solid rgba(255,255,255,.18); color:#D1D5DB; font:800 14px Cairo, sans-serif; cursor:pointer; transition:border-color .2s, color .2s, background .2s; }
.tbc-held-cancel svg { width:16px; height:16px; }
.tbc-held-cancel:hover, .tbc-held-cancel:focus-visible { border-color:rgba(255,23,68,.6); color:#FF6B81; background:rgba(255,23,68,.08); outline:none; }
@media (max-width:640px) {
  .tbc-held { grid-template-columns:minmax(0,1fr); padding:14px 14px 16px; }
  .tbc-held-bot { grid-row:auto; width:88px; height:88px; justify-self:start; }
  .tbc-held-actions { display:grid; grid-template-columns:1.4fr 1fr; }
  .tbc-held-actions .tbc-btn { min-width:0; width:100%; padding:0 12px; }
  .tbc-held-cancel { padding:0 10px; }
}