/* ════════════════════════════════════════════════════════════════════
   Payment Gateway — embed deltas for the v8 dashboard (hand-written)
   Loaded AFTER payment-gateway.css so it wins. Houses the few adjustments
   the standalone can't know about — keep embed-only tweaks here so the
   generated sheet stays pure (regenerable via tools/regenerate-payment.py).
   ════════════════════════════════════════════════════════════════════ */

/* ── DESKTOP/MOBILE · don't become a nested scroll-box ─────────────────
   The standalone is a full page that scrolls in the window. Mounted in the
   dashboard, the scoped `html, body { overflow-x: hidden }` lands on
   `.payment-gateway`, which (per spec) forces overflow-y → auto, turning the
   wrapper into its OWN scroll container. The dashboard shell locks #dash-view
   to the viewport height, so as a default flex item the wrapper got SHRUNK
   below its content and scrolled internally — clipping the tall device-wrap
   (the Charge/Cash buttons fell off the bottom).

   flex:1 0 auto (shrink 0, auto basis) makes the wrapper take its FULL content
   height instead, so nothing is clipped and the dashboard's own .dash-main
   provides the page scroll — same feel as the standalone. (Same idea as
   pos-retail-embed.css's `.pos-retail-desk { flex: 1 0 auto }`.) */
.payment-gateway {
  flex: 1 0 auto;
  min-height: 0;
}

/* ── DESKTOP · keep the Bamboo device at its standalone size ───────────
   The dashboard content area is ~300px narrower than the standalone's full
   page, so the proportional `1fr : 1.7fr` device column gives the device
   row only ~390px → the fixed-384px device flex-shrinks to ~316px and looks
   cramped / unlike the standalone. Give the device its OWN fixed-width column
   (sized to the 384px device + the card's padding) and stop it shrinking,
   whenever the dashboard row is wide enough for it to sit beside the
   transactions; below that, fall back to the standalone's stacked layout.
   A container query (not @media) so it responds to the ACTUAL panel width,
   not the viewport — the sidebar/collapse state changes the panel width
   without changing the viewport. (Same approach as pos-retail-embed.css.) */
.payment-gateway .pay-dash { container-type: inline-size; }
@container (min-width: 900px) {
  .payment-gateway .pay-dash__grid {
    grid-template-columns: 480px minmax(0, 1fr);
  }
  .payment-gateway .pay-dash__device-wrap .pay-device { flex-shrink: 0; }
}
@container (max-width: 899.98px) {
  .payment-gateway .pay-dash__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ── TXN DETAIL POPUP · Refund button right-edge gap ───────────────────
   #txnDetailModal's scroller (overflow:auto) shows a space-taking scrollbar
   once its content overflows. The sticky full-width Refund button is
   width:100% of the scroller's CONTENT box (minus that scrollbar gutter), so
   it stops a few px short of the panel's right edge — leaving a sliver of the
   panel background beside it ("hở"). The standalone uses the OS overlay
   scrollbar (no gutter), so it never shows this. Hide the scrollbar on this
   scroller (content still scrolls) so the button spans the full panel width —
   matching the standalone. Same pattern as .pay-dash__status-tabs /
   .sub-detail__feats elsewhere. */
.payment-gateway .pay-modal--txn .pay-modal__scroller {
  scrollbar-width: none;                 /* Firefox */
}
.payment-gateway .pay-modal--txn .pay-modal__scroller::-webkit-scrollbar {
  display: none;                         /* Chromium / WebKit — no gutter */
}

/* ── CONGRATS → COMPLETE · "giật" (one-frame vertical jump) ────────────
   Every device screen is a .pay-view { position:absolute; inset:0 } so they
   overlap and cross-fade. But .pay-congrats and .pay-complete override that
   with `position: relative` (in the source — meant to host the .pay-confetti
   layer, but .pay-view is ALREADY a positioned containing block, so it's
   redundant). Relative drops them into normal flow, so during the 240ms
   cross-fade the incoming Complete stacks BELOW the outgoing Congrats, then
   snaps up to the top when Congrats is removed → a visible jump right before
   "Payment complete" shows. Force them back to absolute so they overlap and
   fade cleanly like every other screen (inset:0 still comes from .pay-view;
   confetti + z-index layering keep working — the element stays positioned). */
.payment-gateway .pay-congrats,
.payment-gateway .pay-complete {
  position: absolute;
}

/* ── Transaction detail · hide Refund (both views) ─────────────────────
   Both transaction-detail views are read-only here, so hide their Refund
   button:
     • .pay-tx__refund        — dashboard popup (#txnDetailModal, opened from
                                 a .pay-dash__row); a full-width sticky bar.
     • .pay-txn-detail__refund — on-device history detail (tpl-txn-detail).
   display:none collapses each (sticky bar / margin-top) → no leftover gap. */
.payment-gateway .pay-tx__refund,
.payment-gateway .pay-txn-detail__refund {
  display: none;
}