/*
 * Friends POS terminal -- neumorphic overhaul, "candlelight & brass" palette.
 *
 * Scope: POS terminal only (body.lockscreen, set by app.blade.php whenever
 * $pos_layout is true), per explicit request -- dashboard/login/etc. are
 * untouched. Same "no build step" constraint as every other admin-app CSS
 * file in this project: everything here is hand-written, real CSS, not
 * generated Tailwind utilities, loaded after brand-admin.css so it wins
 * the cascade without needing !important except where already established.
 *
 * Neumorphism's classic weakness is legibility -- raised/pressed surfaces
 * only read clearly when background and surface are nearly the same
 * color, which is exactly what starves text/icon contrast. The fix used
 * throughout: neumorphic shadow only carries STRUCTURE (what's raised,
 * pressed, a card vs the canvas) -- text stays espresso-on-linen (already
 * proven ~7:1+ contrast elsewhere in this project) regardless of the
 * shadow treatment, and gold/oxblood are reserved for accents/icons/active
 * states, never for body text on the linen surface.
 */

:root {
  --neu-base: #F3EEE3;
  --neu-surface: #F5EEE0;
  --neu-light: rgba(255, 253, 248, 0.95);
  --neu-dark: rgba(36, 22, 16, 0.14);
  --neu-dark-strong: rgba(36, 22, 16, 0.22);
  --neu-text: #241610;
  --neu-text-muted: #6B5A4A;
  --neu-gold: #C29A3B;
  --neu-gold-deep: #9A7B2E;
  --neu-oxblood: #7E2F1E;
  --neu-oxblood-deep: #63241A;
  --neu-radius: 18px;
  --neu-radius-sm: 12px;
}

/* ---------------------------------------------------------------------
   0. Canvas
   --------------------------------------------------------------------- */
body.lockscreen main.tw-bg-gray-100 {
  background: var(--neu-base) !important;
}

/* ---------------------------------------------------------------------
   1. Core neumorphic primitives
   --------------------------------------------------------------------- */
.neu-surface {
  background: var(--neu-surface);
}
.neu-raised {
  background: var(--neu-surface);
  border-radius: var(--neu-radius);
  box-shadow: 7px 7px 14px var(--neu-dark), -7px -7px 14px var(--neu-light);
  border: none;
  transition: box-shadow 0.18s ease, transform 0.12s ease;
}
.neu-raised--sm {
  border-radius: var(--neu-radius-sm);
  box-shadow: 4px 4px 9px var(--neu-dark), -4px -4px 9px var(--neu-light);
}
.neu-pressable {
  cursor: pointer;
}
.neu-pressable:hover {
  box-shadow: 5px 5px 11px var(--neu-dark), -5px -5px 11px var(--neu-light);
}
.neu-pressable:active,
.neu-pressable.is-pressed {
  box-shadow: inset 4px 4px 8px var(--neu-dark-strong), inset -4px -4px 8px var(--neu-light);
  transform: translateY(1px);
}
.neu-inset {
  background: var(--neu-surface);
  border-radius: var(--neu-radius-sm);
  box-shadow: inset 3px 3px 7px var(--neu-dark), inset -3px -3px 7px var(--neu-light);
  border: none;
}
.neu-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  background: var(--neu-surface);
  box-shadow: 4px 4px 9px var(--neu-dark), -4px -4px 9px var(--neu-light);
  color: var(--neu-text);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  border: none;
  transition: box-shadow 0.15s ease, color 0.15s ease;
}
.neu-pill:hover {
  color: var(--neu-oxblood);
}
.neu-pill.is-active {
  box-shadow: inset 3px 3px 7px var(--neu-dark-strong), inset -3px -3px 7px var(--neu-light);
  color: var(--neu-oxblood);
}
.neu-pill.is-active .neu-pill-dot {
  background: var(--neu-gold);
}

/* ---------------------------------------------------------------------
   2. Order board
   --------------------------------------------------------------------- */
.order-board {
  margin-bottom: 1.25rem;
  padding: 1.1rem 1.2rem 1.3rem;
}
.order-board-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.9rem;
}
.order-board-title {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: 'opsz' 30;
  font-size: 1.15rem;
  color: var(--neu-text);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.order-board-tabs {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.order-board-cards {
  display: flex;
  gap: 0.85rem;
  overflow-x: auto;
  padding-bottom: 0.35rem;
}
.order-card {
  flex: 0 0 auto;
  width: 200px;
  padding: 0.85rem 0.95rem;
  cursor: pointer;
}
.order-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.order-card-invoice {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--neu-text);
}
.order-card-status {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
}
.order-card-status--waiting {
  background: rgba(194, 154, 59, 0.18);
  color: var(--neu-gold-deep);
}
.order-card-status--ready {
  background: rgba(63, 122, 76, 0.16);
  color: #2F6A3B;
}
.order-card-status--served {
  background: rgba(107, 90, 74, 0.14);
  color: var(--neu-text-muted);
}
.order-card-customer {
  font-size: 0.82rem;
  color: var(--neu-text);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0.15rem;
}
.order-card-meta {
  font-size: 0.72rem;
  color: var(--neu-text-muted);
  display: flex;
  justify-content: space-between;
}
.order-board-empty {
  font-size: 0.85rem;
  color: var(--neu-text-muted);
  padding: 0.5rem 0.1rem;
}

/* ---------------------------------------------------------------------
   3. Product / cart / sidebar panels -- reskin existing structure
   --------------------------------------------------------------------- */
body.lockscreen .tw-rounded-2xl.tw-bg-white {
  background: var(--neu-surface) !important;
  border: none !important;
  border-radius: var(--neu-radius) !important;
  box-shadow: 7px 7px 16px var(--neu-dark), -7px -7px 16px var(--neu-light) !important;
}
body.lockscreen .box {
  background: var(--neu-surface) !important;
  border: none !important;
  border-top: none !important;
  border-radius: var(--neu-radius) !important;
  box-shadow: 7px 7px 16px var(--neu-dark), -7px -7px 16px var(--neu-light) !important;
  overflow: hidden;
}
body.lockscreen .box-header {
  background: transparent !important;
}

/* Category / Brands trigger pills -- neumorphic instead of flat gradient.
   IMPORTANT: pos_sidebar.blade.php reuses the SAME for="my-drawer-4"/
   for="my-drawer-brand" attribute on two different <label> elements -- the
   visible trigger button AND the full-viewport drawer-close overlay. A
   plain label[for="..."] selector matched both and painted the overlay
   solid gold across the whole screen. Scoping to .tw-bg-gradient-to-r
   (only present on the trigger, never the overlay) avoids that. */
body.lockscreen label[for="my-drawer-4"].tw-bg-gradient-to-r,
body.lockscreen label[for="my-drawer-brand"].tw-bg-gradient-to-r {
  background: linear-gradient(155deg, var(--neu-gold), var(--neu-oxblood)) !important;
  border-radius: var(--neu-radius-sm) !important;
  box-shadow: 5px 5px 11px var(--neu-dark), -5px -5px 11px var(--neu-light) !important;
  border: none !important;
}

/* Category/brand/product cards inside drawers + suggestion grid */
body.lockscreen .tw-dw-card,
body.lockscreen .product_box {
  background: var(--neu-surface) !important;
  border: none !important;
  border-radius: var(--neu-radius-sm) !important;
  box-shadow: 5px 5px 11px var(--neu-dark), -5px -5px 11px var(--neu-light) !important;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
body.lockscreen .tw-dw-card:hover,
body.lockscreen .product_box:hover {
  box-shadow: 3px 3px 7px var(--neu-dark), -3px -3px 7px var(--neu-light) !important;
  transform: translateY(1px);
}
body.lockscreen .product_box .image-container {
  border-radius: var(--neu-radius-sm) var(--neu-radius-sm) 0 0;
  box-shadow: inset 0 -3px 7px rgba(36, 22, 16, 0.06);
}

/* Cart table -- soften into the surface */
body.lockscreen #pos_table thead {
  --tw-gradient-from: var(--neu-surface) var(--tw-gradient-from-position);
  --tw-gradient-to: var(--neu-surface) var(--tw-gradient-to-position);
}
body.lockscreen #pos_table {
  background: var(--neu-surface);
}
body.lockscreen .tw-overflow-x-auto.tw-rounded-lg.tw-border {
  border: none !important;
  border-radius: var(--neu-radius-sm) !important;
  box-shadow: inset 3px 3px 7px var(--neu-dark), inset -3px -3px 7px var(--neu-light);
}

/* Totals box */
body.lockscreen .tw-bg-gray-50.tw-rounded-lg,
body.lockscreen div[class*="tw-p-4"].tw-bg-gray-50 {
  background: var(--neu-surface) !important;
  border: none !important;
  box-shadow: inset 3px 3px 7px var(--neu-dark), inset -3px -3px 7px var(--neu-light) !important;
}

/* Payment action row -- neumorphic buttons, brand colors preserved exactly
   from the earlier admin rebrand (see section 6 of brand-admin.css).

   The bar's own container has no visible surface of its own -- no white
   box, no card edge. Each button already carries its own neumorphic
   shadow (ghost pills, chips, the Charge button, icon buttons all do),
   so removing the container's background lets them read as individually
   floating on the canvas instead of sitting inside a distinct white
   strip. A soft upward scrim (fully transparent at the top edge, a
   faint canvas-color wash pooling at the very bottom) keeps the row
   legible over whatever catalog/cart content scrolls underneath a
   fixed-position bar, without ever reading as a hard-edged panel. */
body.lockscreen .tw-fixed.tw-bottom-0,
body.lockscreen footer.tw-bg-white,
body.lockscreen .pos-form-actions {
  background: linear-gradient(to top, rgba(243, 238, 227, 0.88) 0%, rgba(243, 238, 227, 0.55) 45%, rgba(243, 238, 227, 0) 100%) !important;
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  border-top: none !important;
  box-shadow: none !important;
}
body.lockscreen .tw-dw-btn,
body.lockscreen button.btn,
body.lockscreen a.btn {
  border-radius: var(--neu-radius-sm);
  box-shadow: 4px 4px 9px var(--neu-dark), -4px -4px 9px var(--neu-light);
  border: none !important;
  transition: box-shadow 0.15s ease, transform 0.1s ease;
}
body.lockscreen .tw-dw-btn:active,
body.lockscreen button.btn:active,
body.lockscreen a.btn:active {
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.25);
  transform: translateY(1px);
}

/* Customer / search inputs -- inset (recessed into the surface) */
body.lockscreen .input-group.tw-shadow-sm {
  background: var(--neu-surface);
  border: none !important;
  border-radius: var(--neu-radius-sm) !important;
  box-shadow: inset 3px 3px 7px var(--neu-dark), inset -3px -3px 7px var(--neu-light) !important;
  overflow: hidden;
}
body.lockscreen .input-group.tw-shadow-sm .form-control,
body.lockscreen .input-group.tw-shadow-sm .input-group-addon,
body.lockscreen .input-group.tw-shadow-sm .input-group-btn {
  background: transparent !important;
}

/* ---------------------------------------------------------------------
   4. POS header toolbar (layouts/partials/header-pos.blade.php) -- this
      bar was untouched by the first neumorphic pass (only the product
      grid/cart/order board were), so it was still shipping the stock
      white-bordered square icon buttons. Scoped under .pos-header (the
      partial's own wrapper) so these selectors can safely stay generic
      (button.pull-right etc) without colliding with unrelated buttons
      elsewhere on the page -- every action in this toolbar carries both
      .pos-header ancestry and .pull-right.
   --------------------------------------------------------------------- */
body.lockscreen .pos-header .tw-bg-white.tw-rounded-xl {
  background: var(--neu-surface) !important;
  border: none !important;
  box-shadow: 7px 7px 16px var(--neu-dark), -7px -7px 16px var(--neu-light) !important;
}
body.lockscreen .pos-header select#select_location_id {
  background: var(--neu-surface) !important;
  border: none !important;
  border-radius: var(--neu-radius-sm) !important;
  box-shadow: inset 3px 3px 7px var(--neu-dark), inset -3px -3px 7px var(--neu-light) !important;
  color: var(--neu-text) !important;
}
/* Datetime badge -- background already brand-oxblood via brand-admin.css
   section 6 (.tw-bg-\[\#646EE4\]); only the shape changes here. */
body.lockscreen .pos-header div[class*="646EE4"] {
  border-radius: var(--neu-radius-sm) !important;
  box-shadow: 4px 4px 9px var(--neu-dark), -4px -4px 9px var(--neu-light) !important;
}
body.lockscreen .pos-header button.pull-right,
body.lockscreen .pos-header a.pull-right {
  background: var(--neu-surface) !important;
  border: none !important;
  border-radius: var(--neu-radius-sm) !important;
  box-shadow: 4px 4px 9px var(--neu-dark), -4px -4px 9px var(--neu-light) !important;
  color: var(--neu-text) !important;
  transition: box-shadow 0.15s ease, transform 0.1s ease;
}
body.lockscreen .pos-header button.pull-right:hover,
body.lockscreen .pos-header a.pull-right:hover {
  box-shadow: 3px 3px 7px var(--neu-dark), -3px -3px 7px var(--neu-light) !important;
}
body.lockscreen .pos-header button.pull-right:active,
body.lockscreen .pos-header a.pull-right:active {
  box-shadow: inset 3px 3px 6px var(--neu-dark-strong), inset -3px -3px 6px var(--neu-light) !important;
  transform: translateY(1px);
}
/* Minimalist, monochrome icon treatment -- one accent color on hover
   instead of the seven unrelated arbitrary hex colors the stock toolbar
   used per-icon. */
body.lockscreen .pos-header button.pull-right i,
body.lockscreen .pos-header a.pull-right i {
  color: var(--neu-text-muted) !important;
}
body.lockscreen .pos-header button.pull-right:hover i,
body.lockscreen .pos-header a.pull-right:hover i {
  color: var(--neu-oxblood) !important;
}
body.lockscreen .pos-header span.tw-inline {
  color: var(--neu-text) !important;
}
body.lockscreen .pos-header i.hamburger {
  color: var(--neu-text) !important;
}

/* ---------------------------------------------------------------------
   5. Modals -- shared Bootstrap chrome reused by every POS modal
      (payment, customer capture/selection, discount, shipping, order
      tax, suspend note, recurring invoice, weighing scale, configure
      search, row price edit, service staff availability, admin token,
      recent transactions, suspended sales...). One set of rules here
      reskins all of them at once instead of touching ~20 blade files.
   --------------------------------------------------------------------- */
body.lockscreen .modal-content {
  background: var(--neu-surface) !important;
  border: none !important;
  border-radius: var(--neu-radius) !important;
  box-shadow: 10px 10px 24px var(--neu-dark), -10px -10px 24px var(--neu-light) !important;
}
body.lockscreen .modal-header {
  background: transparent !important;
  border-bottom: 1px solid rgba(36, 22, 16, 0.1) !important;
  padding: 1.1rem 1.4rem 0.9rem;
}
/* Stock modal headers used bg-primary/bg-info/etc solid color blocks;
   flattened to match the rest of the terminal's minimal surface. */
body.lockscreen .modal-header.bg-primary,
body.lockscreen .modal-header.bg-info,
body.lockscreen .modal-header.bg-success,
body.lockscreen .modal-header.bg-warning,
body.lockscreen .modal-header.bg-danger {
  background: transparent !important;
  color: var(--neu-text) !important;
}
body.lockscreen .modal-title {
  color: var(--neu-text) !important;
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: 'opsz' 30;
}
body.lockscreen .modal-title i {
  color: var(--neu-oxblood) !important;
}
body.lockscreen .modal-header .close {
  background: var(--neu-surface);
  color: var(--neu-text-muted);
  opacity: 1;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  box-shadow: 3px 3px 7px var(--neu-dark), -3px -3px 7px var(--neu-light);
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: none;
  float: none;
  margin: 0 0 0 auto;
  font-size: 1.1rem;
  line-height: 1;
  transition: box-shadow 0.15s ease, color 0.15s ease;
}
body.lockscreen .modal-header .close:hover {
  color: var(--neu-oxblood);
  box-shadow: inset 3px 3px 6px var(--neu-dark-strong), inset -3px -3px 6px var(--neu-light);
}
body.lockscreen .modal-body {
  color: var(--neu-text);
}
body.lockscreen .modal-body label,
body.lockscreen .modal-body .control-label {
  color: var(--neu-text);
  font-weight: 600;
}
body.lockscreen .modal-body .help-block,
body.lockscreen .modal-body small.text-muted {
  color: var(--neu-text-muted);
}
body.lockscreen .modal-body .form-control,
body.lockscreen .modal-body select.form-control {
  background: var(--neu-surface) !important;
  border: none !important;
  border-radius: var(--neu-radius-sm) !important;
  box-shadow: inset 3px 3px 7px var(--neu-dark), inset -3px -3px 7px var(--neu-light) !important;
  color: var(--neu-text) !important;
}
body.lockscreen .modal-body .input-group-addon {
  background: var(--neu-surface) !important;
  border: none !important;
  color: var(--neu-text-muted) !important;
}
/* Payment modal's totals summary + the reused .box.box-solid pattern in
   other modals -- inset panel instead of the stock solid-orange block. */
body.lockscreen .modal-body .box.box-solid,
body.lockscreen .modal-body .bg-lightgray {
  background: var(--neu-surface) !important;
  border: none !important;
  border-radius: var(--neu-radius-sm) !important;
  box-shadow: inset 3px 3px 7px var(--neu-dark), inset -3px -3px 7px var(--neu-light) !important;
  color: var(--neu-text) !important;
}
body.lockscreen .modal-body .box.box-solid strong,
body.lockscreen .modal-body .box.box-solid span,
body.lockscreen .modal-body .box.box-solid .lead {
  color: var(--neu-text) !important;
}
body.lockscreen .modal-body .box.box-solid hr {
  border-color: rgba(36, 22, 16, 0.12);
}
body.lockscreen .modal-footer {
  border-top: 1px solid rgba(36, 22, 16, 0.1) !important;
  padding: 0.9rem 1.4rem 1.1rem;
}
body.lockscreen .modal-footer .btn,
body.lockscreen .modal-footer .tw-dw-btn {
  border-radius: var(--neu-radius-sm);
  box-shadow: 4px 4px 9px var(--neu-dark), -4px -4px 9px var(--neu-light);
  border: none !important;
}
body.lockscreen .modal-footer .btn:active,
body.lockscreen .modal-footer .tw-dw-btn:active {
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.25);
  transform: translateY(1px);
}
body.lockscreen .modal-backdrop.in {
  opacity: 0.6;
}

/* ---------------------------------------------------------------------
   6. Tooltips (data-toggle="tooltip", initialized in pos-ui-enhance.js)
   --------------------------------------------------------------------- */
body.lockscreen .tooltip-inner {
  background: var(--neu-text);
  color: var(--neu-surface);
  border-radius: 8px;
  font-size: 0.75rem;
  padding: 0.35rem 0.6rem;
}
body.lockscreen .tooltip.top .tooltip-arrow {
  border-top-color: var(--neu-text);
}
body.lockscreen .tooltip.bottom .tooltip-arrow {
  border-bottom-color: var(--neu-text);
}
body.lockscreen .tooltip.left .tooltip-arrow {
  border-left-color: var(--neu-text);
}
body.lockscreen .tooltip.right .tooltip-arrow {
  border-right-color: var(--neu-text);
}

/* Header toolbar icon clusters (layouts/partials/header-pos.blade.php) --
   groups related actions (nav/session, people/register, tools/history)
   into their own soft-shadowed pill instead of one undifferentiated row
   of icons, matching the approved rearrangement mockup. */
.pos-header-cluster {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem;
  border-radius: var(--neu-radius-sm);
  background: var(--neu-surface);
  box-shadow: 3px 3px 8px var(--neu-dark), -3px -3px 8px var(--neu-light);
}
.pos-header-cluster:empty {
  display: none;
}

/* ---------------------------------------------------------------------
   7. Main split -- catalog/ticket rearrangement. DOM order is left
      untouched (ticket column first, catalog column second, matching
      pos_form.blade.php's original markup) -- only the flex `order` is
      swapped, so nothing about existing jQuery selectors/traversal
      changes, just the visual position. Widths swap correspondingly
      (catalog becomes the wider, primary surface).
   --------------------------------------------------------------------- */
body.lockscreen #pos_ticket_col {
  order: 2;
}
body.lockscreen #pos_catalog_col {
  order: 1;
}

/* Ticket-panel tab switcher (Current Order / Order Board), only present
   on create.blade.php -- edit.blade.php has no order board, so these
   selectors simply never match there. */
.pos-ticket-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.9rem;
}
.pos-ticket-tab {
  flex: 1;
  text-align: center;
  padding: 0.55rem 0.75rem;
  border-radius: 999px;
  background: var(--neu-surface);
  box-shadow: 4px 4px 9px var(--neu-dark), -4px -4px 9px var(--neu-light);
  border: none;
  color: var(--neu-text-muted);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: box-shadow 0.15s ease, color 0.15s ease;
}
.pos-ticket-tab.is-active {
  color: var(--neu-linen, var(--neu-surface));
  background: linear-gradient(155deg, var(--neu-gold), var(--neu-oxblood));
  box-shadow: 4px 4px 9px var(--neu-dark), -4px -4px 9px var(--neu-light);
}
.pos-ticket-tab .pos-ticket-tab-count {
  opacity: 0.75;
  font-weight: 500;
}

/* Order board, renested inside the (now narrower) ticket panel -- tighten
   the padding the full-width top-strip version used. */
#pos_ticket_panel_board .order-board {
  margin-bottom: 0;
  padding: 0;
  box-shadow: none;
  background: transparent;
}
#pos_ticket_panel_board .order-board-head {
  margin-bottom: 0.7rem;
}

/* ---------------------------------------------------------------------
   8. Payment action bar v2 -- hierarchy instead of nine same-weight
      buttons: a quiet secondary cluster (Draft/Quotation/Post Order/
      Captain Order), one primary Charge action with payment-method
      quick-pick chips + Cancel beneath it, and a compact summary
      cluster (Recent Transactions/Suspended Sales). Every element below
      keeps its original id/class/data-attribute (pos.js click handlers
      are unchanged) -- only the visual grouping and classes changed.
   --------------------------------------------------------------------- */
.pos-actions-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
/* .pos-actions-secondary has no Tailwind visibility utility of its own
   (it's meant to render at every breakpoint), so it owns its `display`.
   .pos-actions-primary/.pos-actions-summary carry `tw-hidden md:tw-flex`
   in the blade markup instead -- deliberately NOT setting `display` here
   so that Tailwind utility (loaded earlier, same specificity, would lose
   a display fight to an unconditional rule here) keeps full control of
   whether they render at a given breakpoint; only their internal layout
   is defined in this file. */
.pos-actions-secondary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.pos-actions-summary {
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.pos-actions-primary {
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
}
.pos-actions-chips {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

.pos-action-ghost {
  background: var(--neu-surface);
  border: none;
  border-radius: var(--neu-radius-sm);
  box-shadow: 3px 3px 7px var(--neu-dark), -3px -3px 7px var(--neu-light);
  color: var(--neu-text-muted);
  font-weight: 600;
  font-size: 0.78rem;
  padding: 0.5rem 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  transition: box-shadow 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.pos-action-ghost:hover {
  color: var(--neu-oxblood);
}
.pos-action-ghost:active {
  box-shadow: inset 2px 2px 5px var(--neu-dark-strong), inset -2px -2px 5px var(--neu-light);
  transform: translateY(1px);
}
.pos-action-ghost:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pos-action-chip {
  background: var(--neu-surface);
  border: none;
  border-radius: 999px;
  box-shadow: 3px 3px 7px var(--neu-dark), -3px -3px 7px var(--neu-light);
  color: var(--neu-text);
  font-weight: 600;
  font-size: 0.76rem;
  padding: 0.45rem 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.1s ease;
}
.pos-action-chip:active {
  box-shadow: inset 2px 2px 5px var(--neu-dark-strong), inset -2px -2px 5px var(--neu-light);
  transform: translateY(1px);
}
.pos-action-chip--cancel {
  color: var(--neu-oxblood-deep);
}

.pos-action-charge {
  background: linear-gradient(155deg, var(--neu-gold), var(--neu-gold-deep));
  border: none;
  border-radius: 999px;
  box-shadow: 5px 5px 12px var(--neu-dark), -5px -5px 12px var(--neu-light);
  color: var(--neu-text);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.65rem 2rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.1s ease;
  white-space: nowrap;
}
.pos-action-charge:active {
  box-shadow: inset 3px 3px 7px rgba(0, 0, 0, 0.25);
  transform: translateY(1px);
}
.pos-action-charge .pos-action-charge-amount {
  font-variant-numeric: tabular-nums;
}

.pos-action-icon-btn {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--neu-oxblood);
  color: var(--neu-surface);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 3px 3px 8px var(--neu-dark);
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.1s ease;
}
.pos-action-icon-btn:active {
  transform: translateY(1px);
}

.pos-actions-payable {
  text-align: right;
}
.pos-actions-payable .pos-actions-payable-label {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--neu-text-muted);
}
.pos-actions-payable .pos-actions-payable-amount {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--neu-text);
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .neu-raised,
  .neu-pill,
  body.lockscreen .product_box,
  body.lockscreen .tw-dw-card,
  body.lockscreen .tw-dw-btn {
    transition: none;
  }
}