/* Custom price prototype: explicit decimal entry, scoped to its QuickSale dialog. */
.qs-custom-price-modal {
  --cp-surface: #fff;
  --cp-surface-2: #f4f7f2;
  --cp-key: #f2f5f0;
  --cp-key-hover: #e8eee5;
  --cp-key-pressed: #dce5d8;
  --cp-ink: #16261a;
  --cp-ink-2: #4e6153;
  --cp-muted: #9aa99d;
  --cp-line: #e0e8dd;
  --cp-green: #3a9821;
  --cp-green-dark: #2f7e1a;
  --cp-soft: #e6f3e0;
  --cp-warn: #c2410c;
  --cp-warn-soft: #fff1e6;
  --cp-danger: #c2303f;
}
body[data-theme="dark"] .qs-custom-price-modal {
  --cp-surface: #172517;
  --cp-surface-2: #1d2f1c;
  --cp-key: #203320;
  --cp-key-hover: #273d26;
  --cp-key-pressed: #2f482d;
  --cp-ink: #e6f0e4;
  --cp-ink-2: #a9bca7;
  --cp-muted: #6a8068;
  --cp-line: #2a4128;
  --cp-green: #5dbb3f;
  --cp-green-dark: #6cc94f;
  --cp-soft: #24401d;
  --cp-warn: #fb923c;
  --cp-warn-soft: #3a2614;
  --cp-danger: #ff6b7a;
}
#quickSaleCenter.qs-custom-price-modal .modal-dialog {
  width: calc(100% - 32px);
  max-width: 420px;
  margin: 1.75rem auto;
}
#quickSaleCenter.qs-custom-price-modal .modal-content {
  border: 0;
  border-radius: 12px;
  background: var(--cp-surface);
  box-shadow: 0 24px 60px -20px rgb(0 0 0 / 45%);
  overflow: hidden;
}
.qs-custom-price {
  color: var(--cp-ink);
  background: var(--cp-surface);
  font-family: "IBM Plex Sans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
.qs-custom-price button {
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  touch-action: manipulation;
}
.qs-custom-price button:focus-visible { outline: 2px solid var(--cp-green); outline-offset: 2px; }
.qs-custom-price button:disabled { cursor: not-allowed; }
.qs-custom-price__head { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px 0; }
.qs-custom-price__head > div { flex: 1; min-width: 0; }
.qs-custom-price__head h3 { margin: 0; font-size: 18px; font-weight: 700; color: var(--cp-ink); }
.qs-custom-price__tag { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 2px 9px 2px 7px; border-radius: 5px; color: var(--cp-green-dark); background: var(--cp-soft); font-size: 12.5px; font-weight: 600; }
.qs-custom-price__tag svg { width: 13px; height: 13px; }
.qs-custom-price__service { margin: 6px 0 0; font-size: 12px; color: var(--cp-ink-2); overflow-wrap: anywhere; }
.qs-custom-price__service-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.qs-custom-price__service-row .qs-custom-price__service { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qs-custom-price__original { margin-top: 6px; font-size: 12px; color: var(--cp-ink-2); white-space: nowrap; }
.qs-custom-price .qs-custom-price__close { flex-shrink: 0; margin-left: auto; width: 36px; height: 36px; border-radius: 6px; display: grid; place-items: center; color: var(--cp-ink-2); background: transparent; }
.qs-custom-price__close:hover { background: var(--cp-surface-2); }
.qs-custom-price__display { margin: 16px 20px 0; border: 1.5px solid var(--cp-line); border-radius: 8px; padding: 12px 16px 10px; background: var(--cp-surface-2); }
.qs-custom-price__display.has-value { border-color: var(--cp-green); background: var(--cp-surface); }
.qs-custom-price__display.has-error { border-color: var(--cp-danger); }
.qs-custom-price__label { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--cp-muted); font-weight: 500; }
.qs-custom-price__amount { display: flex; align-items: baseline; justify-content: flex-end; gap: 4px; min-height: 52px; margin-top: 2px; }
.qs-custom-price__currency { margin-right: auto; align-self: center; font-size: 22px; font-weight: 600; color: var(--cp-muted); }
.qs-custom-price__number { display: inline-flex; align-items: center; gap: 2px; font-size: clamp(28px, 8vw, 40px); font-weight: 700; letter-spacing: -.01em; line-height: 1.1; }
.qs-custom-price__value { font-size: inherit; }
.qs-custom-price__ghost { color: var(--cp-muted); font-weight: 600; }
.qs-custom-price__caret { flex: none; width: 2px; height: .85em; background: var(--cp-green); margin-left: 1px; animation: qs-custom-price-blink 1s steps(1) infinite; }
@keyframes qs-custom-price-blink { 50% { opacity: 0; } }
.qs-custom-price__message { min-height: 16px; margin-top: 2px; text-align: right; font-size: 12px; color: var(--cp-muted); }
.has-error .qs-custom-price__message { color: var(--cp-danger); }
.qs-custom-price__quick { display: flex; gap: 8px; margin: 12px 20px 0; }
.qs-custom-price .qs-custom-price__quick button { flex: 1; height: auto; padding: 8px 0; border: 1px solid var(--cp-line); border-radius: 6px; background: transparent; font-weight: 600; color: var(--cp-ink-2); }
.qs-custom-price__quick button:hover { border-color: var(--cp-green); color: var(--cp-green-dark); }
.qs-custom-price__pad { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 60px); gap: 8px; margin: 14px 20px 0; }
.qs-custom-price .qs-custom-price__pad button { height: 100%; border-radius: 6px; background: var(--cp-key); font-size: 22px; font-weight: 600; display: grid; place-items: center; user-select: none; transition: background .08s, transform .08s; }
.qs-custom-price__pad button:hover { background: var(--cp-key-hover); }
.qs-custom-price__pad button:active { background: var(--cp-key-pressed); transform: scale(.97); }
.qs-custom-price .qs-custom-price__pad .qs-custom-price__back { grid-column: 4; grid-row: 1 / span 2; color: var(--cp-ink-2); }
.qs-custom-price__back svg { width: 28px; height: 28px; }
.qs-custom-price .qs-custom-price__pad .qs-custom-price__clear { grid-column: 4; grid-row: 3 / span 2; background: var(--cp-warn-soft); color: var(--cp-warn); font-size: 15px; font-weight: 700; }
.qs-custom-price .qs-custom-price__pad .qs-custom-price__double { font-size: 18px; }
.qs-custom-price__foot { display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px; padding: 16px 20px 20px; }
.qs-custom-price .qs-custom-price__foot button { height: 52px; border-radius: 6px; font-size: 15px; font-weight: 700; }
.qs-custom-price .qs-custom-price__cancel { background: var(--cp-surface); border: 1px solid var(--cp-line); color: var(--cp-ink-2); }
.qs-custom-price .qs-custom-price__submit { background: var(--cp-green); color: #fff; display: flex; align-items: center; justify-content: center; gap: 4px; }
.qs-custom-price .qs-custom-price__submit:hover { background: var(--cp-green-dark); }
.qs-custom-price .qs-custom-price__submit:disabled { background: var(--cp-key); color: var(--cp-muted); }
.qs-custom-price__submit-amount { font-weight: 600; opacity: .9; }
@media (max-width: 420px) {
  #quickSaleCenter.qs-custom-price-modal .modal-dialog { width: 100%; margin: 0 auto; min-height: 100dvh; padding-top: 16px; align-items: flex-end; }
  #quickSaleCenter.qs-custom-price-modal .modal-content { border-radius: 12px 12px 0 0; }
  .qs-custom-price__pad { grid-template-rows: repeat(4, 58px); }
  .qs-custom-price__foot { padding-bottom: max(20px, env(safe-area-inset-bottom)); }
}
@media (max-height: 640px) {
  .qs-custom-price__pad { grid-template-rows: repeat(4, 44px); }
  .qs-custom-price__display { margin-top: 10px; padding-top: 8px; }
  .qs-custom-price__amount { min-height: 44px; }
  .qs-custom-price__quick, .qs-custom-price__pad { margin-top: 8px; }
  .qs-custom-price__foot { padding-top: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .qs-custom-price__caret { animation: none; }
  .qs-custom-price__pad button { transition: none; }
}

/* Edit Price with Dual Price: Cash/Card boxes reuse the Extra price cards. */
.qs-dual-price { margin: 16px 20px 0; }
.qs-dual-price .qs-custom-price__label { margin-bottom: 6px; }
.qs-dual-price .qs-extra__price { container-type: inline-size; overflow: hidden; }
.qs-dual-price .qs-extra__number { font-size: clamp(15px, 16cqi, 26px); }
@container (max-width: 140px) {
  .qs-dual-price .qs-extra__price-label { gap: 3px; font-size: 11px; }
  .qs-dual-price .qs-extra__price-label svg { display: none; }
}

/* Compact Extra dialog from Extra.html; inherits the price dialog palette. */
#extraPrice.qs-extra-modal .modal-dialog { width: calc(100% - 32px); max-width: 430px; margin: 1.75rem auto; }
#extraPrice.qs-extra-modal .modal-content { border: 0; border-radius: 12px; background: var(--cp-surface); box-shadow: 0 24px 60px -20px rgb(0 0 0 / 45%); max-height: calc(100dvh - 16px); overflow: hidden; }
#extraPrice.qs-extra-modal .modal-header { display: none; }
#extraPrice.qs-extra-modal .modal-body { padding: 0 !important; min-height: 0; overflow-y: auto; background: var(--cp-surface) !important; }
.qs-extra__head { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 14px; border-bottom: 1px solid var(--cp-line); }
.qs-extra__head h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--cp-ink); }
.qs-extra__icon { flex: none; width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center; color: var(--cp-green-dark); background: var(--cp-soft); }
.qs-extra__icon svg { width: 15px; height: 15px; }
.qs-extra__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--cp-muted); }
.qs-extra__fee { flex: none; margin-left: auto; padding: 1px 6px; font-size: 11.5px; font-weight: 600; white-space: nowrap; color: var(--cp-ink-2); background: var(--cp-surface-2); border: 1px solid var(--cp-line); border-radius: 4px; }
.qs-extra .qs-extra__close { flex: none; width: 32px; height: 32px; display: grid; place-items: center; color: var(--cp-ink-2); background: transparent; border-radius: 6px; }
.qs-extra__body { display: flex; flex-direction: column; gap: 8px; padding: 10px 14px 14px; }
.qs-extra__prices { display: grid; grid-template-columns: 1fr 30px 1fr; gap: 4px; align-items: center; }
:is(.qs-extra, .qs-dual-price) .qs-extra__price { display: block; min-width: 0; height: auto; padding: 6px 10px; text-align: left; background: var(--cp-surface-2); border: 1.5px solid var(--cp-line); border-radius: 8px; }
:is(.qs-extra, .qs-dual-price) .qs-extra__price[aria-pressed="true"] { border-color: var(--cp-green); background: var(--cp-surface); box-shadow: 0 0 0 3px var(--cp-soft); }
.qs-extra__price-label { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--cp-ink-2); }
.qs-extra__price-label > span { white-space: nowrap; }
.qs-extra__price-label svg { flex: none; width: 15px; height: 15px; color: var(--cp-muted); }
.qs-extra__price[aria-pressed="true"] .qs-extra__price-label, .qs-extra__price[aria-pressed="true"] .qs-extra__price-label svg { color: var(--cp-green-dark); }
.qs-extra__tag { margin-left: auto; font-size: 10.5px; font-weight: 700; padding: 0 5px; border-radius: 4px; line-height: 17px; background: var(--cp-soft); color: var(--cp-green-dark); }
.qs-extra__price[aria-pressed="true"] .qs-extra__tag { background: var(--cp-green); color: #fff; }
.qs-extra__price-amount { display: flex; align-items: baseline; justify-content: flex-end; margin-top: 0; font-weight: 700; }
.qs-extra__number { display: inline-flex; align-items: center; gap: 1px; min-width: 0; font-size: 24px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.qs-extra__currency { margin-right: auto; font-size: 16px; font-weight: 600; color: var(--cp-muted); }
.qs-extra__price[aria-pressed="false"] .qs-extra__number { color: var(--cp-ink-2); }
.qs-extra__price[aria-pressed="false"] .qs-custom-price__caret, .qs-extra__price.fresh .qs-custom-price__caret { display: none; }
.qs-extra__price.fresh .qs-extra__value { background: var(--cp-soft); border-radius: 4px; padding: 0 3px; }
:is(.qs-extra, .qs-dual-price) .qs-extra__swap { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--cp-line); background: var(--cp-surface); display: grid; place-items: center; color: var(--cp-ink-2); }
.qs-extra__swap svg { width: 15px; height: 15px; }
.qs-extra__presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.qs-extra .qs-extra__presets button { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 54px; padding: 0; gap: 1px; border: 1.5px solid var(--cp-line); border-radius: 6px; background: var(--cp-surface); }
.qs-extra__presets b { font-size: 21px; font-weight: 700; line-height: 1.2; }
.qs-extra__presets small { font-size: 11.5px; color: var(--cp-muted); }
.qs-extra .qs-extra__presets button[aria-pressed="true"] { border-color: var(--cp-green); background: var(--cp-soft); }
.qs-extra__presets button[aria-pressed="true"] small { color: var(--cp-green-dark); }
.qs-extra__info { min-height: 0; font-size: 12.5px; color: var(--cp-danger); }
.qs-extra__info:empty { display: none; }
.qs-extra .qs-extra__pad { margin: 0; grid-template-rows: repeat(4, 46px); gap: 6px; }
.qs-extra .qs-extra__pad button { font-size: 19px; }
.qs-extra .qs-extra__pad .qs-custom-price__clear { font-size: 15px; }
.qs-extra__foot { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; }
.qs-extra .qs-extra__foot button { height: 46px; border-radius: 6px; font-size: 15px; font-weight: 700; }
.qs-extra .qs-extra__cancel { background: var(--cp-surface); border: 1px solid var(--cp-line); color: var(--cp-ink-2); }
.qs-extra .qs-extra__submit { display: flex; flex-wrap: wrap; align-content: center; align-items: center; justify-content: center; column-gap: 6px; background: var(--cp-green); color: #fff; }
.qs-extra__submit-amount { font-size: 12px; font-weight: 600; white-space: nowrap; opacity: .9; }
.qs-extra .qs-extra__submit:disabled { background: var(--cp-key); color: var(--cp-muted); }
.qs-extra__price:hover, .qs-extra__presets button:hover { border-color: var(--cp-green); }
.qs-extra .qs-extra__close:hover { background: var(--cp-surface-2); }
@media (max-width: 620px) {
  #extraPrice.qs-extra-modal .modal-dialog { width: 100%; margin: 0 auto; min-height: 100dvh; padding-top: 16px; align-items: flex-end; }
  #extraPrice.qs-extra-modal .modal-content { border-radius: 12px 12px 0 0; }
  .qs-extra__body { padding-bottom: max(14px, env(safe-area-inset-bottom)); }
  .qs-extra .qs-extra__presets button { height: 50px; }
  .qs-extra__number { font-size: 22px; }
  .qs-extra .qs-extra__pad { grid-template-rows: repeat(4, 48px); }
}
@media (max-width: 360px) {
  .qs-extra__number { font-size: 20px; }
  .qs-extra__price-label { gap: 3px; font-size: 10px; }
  .qs-extra__price-label svg { width: 11px; height: 11px; }
  .qs-extra__tag { font-size: 9px; padding: 0 3px; }
}
@media (max-height: 520px) {
  .qs-extra .qs-extra__presets button { height: 38px; }
  .qs-extra__presets b { font-size: 18px; }
  .qs-extra .qs-extra__pad { grid-template-rows: repeat(4, 44px); }
  .qs-extra .qs-extra__foot button { height: 44px; }
}

.qsp-container-payment {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--px-12);
  background: transparent;
  height: auto;
  overflow: visible;
}

/* ===== LEFT: Payment Buttons ===== */
.qsp-payment-lst-button {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 140px;
  flex-shrink: 0;
}

.qsp-ck-am-de {
  background: #9e9e9e;
  border-radius: var(--px-8);
  padding: var(--px-16) 10px;
  text-align: center;
  color: #fff;
  margin-bottom: var(--px-4);
}

.qsp-ck-am-de .qsp-txt-title {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  opacity: 0.9;
}

.qsp-ck-am-de .qsp-cardprice {
  display: block;
  font-size: 20px;
  font-weight: 800;
  margin-top: 2px;
}

.qsp-btn-payment {
  border: none;
  border-radius: var(--px-8);
  padding: var(--px-16) 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #fff;
  cursor: pointer;
  text-align: center;
  user-select: none;
  transition:
    filter 0.15s,
    transform 0.1s;
}

.qsp-btn-payment:hover {
  filter: brightness(1.1);
  transform: scale(1.02);
}

.qsp-btn-payment:active {
  transform: scale(0.97);
}

.qsp-btn-payment.qsp-cash {
  background: #76c442;
}

.qsp-btn-payment.qsp-card {
  background: #29b6c8;
}

.qsp-btn-payment.qsp-gift {
  background: #f7931e;
}

.qsp-btn-payment.qsp-other {
  background: #9b6ac4;
}

/* ===== CENTER: Keyboard / Input ===== */
.qsp-payment-content {
  flex: 1;
}

.qsp-ck-input-pm {
  background: #fff;
  border-radius: var(--px-12);
  box-shadow: 0 var(--px-4) 18px rgba(0, 0, 0, 0.1);
  padding: 24px 20px 20px;
  text-align: center;
}

.checkout-input-amount {
  width: 100%;
  border: none;
  outline: none;
  font-size: 28px;
  font-weight: 700;
  color: var(--bs-main);
  text-align: center;
  background: transparent;
  margin-bottom: var(--px-4);
  letter-spacing: 1px;
}

.qsp-cash-discount-line {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--px-8);
  font-size: 13px;
  color: #666;
  margin-bottom: 18px;
}

.qsp-cash-discount-line .qsp-cash-line-amount {
  font-weight: 700;
  color: #333;
}

.qsp-checkout-cash-keyboard {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.qsp-btnt {
  /* background: #fff;
    border: 1.5px solid #e0e0e0;
    border-radius: 6px;
    width: 100%;
    height: 58px;
    font: normal normal 600 var(--s-18);
    color: var(--bs-text);
    cursor: pointer;
    margin: 0 auto;
    display: block;
    transition: background 0.12s, box-shadow 0.12s, transform 0.1s;
    box-shadow: 0 1px var(--px-4) rgba(0, 0, 0, 0.07); */
  width: 100%;
  height: var(--px-56);
  background-color: var(--bs-muted-bg);
  border: none;
  border-radius: var(--px-8);
  font: normal normal 700 var(--s-18);
  color: var(--bs-heading-color);
  cursor: pointer;
  transition: all 0.15s;
}

.qsp-btnt:hover {
  background: #f5f5f5;
  box-shadow: 0 2px var(--px-8) rgba(0, 0, 0, 0.12);
}

.qsp-btnt:active {
  transform: scale(0.92);
  background: var(--bs-body-bg);
}

/* ===== RIGHT: Due & Payment Summary ===== */
.qsp-payment-view-price {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 145px;
  flex-shrink: 0;
}

.qsp-ck-outstanding {
  background: var(--bs-main-500);
  border-radius: var(--px-8);
  margin-bottom: var(--px-4);
  padding: var(--px-16) var(--px-12);
  text-align: center;
  color: #fff;
  width: 100%;
  display: flex;
  height: 80px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.qsp-ck-outstanding .qsp-txt-title {
  display: block;
  font: normal normal 700 var(--s-13);
  letter-spacing: 1px;
  opacity: 0.9;
}

.qsp-ck-outstanding .qsp-ck-line-amount {
  display: block;
  font: normal normal 700 var(--s-20);
  margin-top: 2px;
}

.qsp-money-row {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  border-bottom: 1px solid var(--bs-border-color);
  padding-bottom: 2px;
}

.qsp-money-row .qsp-money-pay {
  color: var(--bs-text);
  font: normal normal 600 var(--s-14);
  text-align: right;
}

/* dis-none helper */
.qsp-dis-none {
  display: none !important;
}

.lst-payment-footer {
  display: flex;
  margin: var(--px-16) 0 0;
  justify-content: flex-end;
  gap: var(--px-12);
}

.btn_payment_cash.close-bill:disabled {
  background-color: #9ca3af !important;
  cursor: not-allowed !important;
  opacity: 0.6;
}

.btn_payment_cash.close-bill:disabled:hover {
  background-color: #9ca3af !important;
  transform: none;
}

/* Close Bill (main footer button in QuickSale) */
.checkout-btn.close-bill:disabled {
  background: #9ca3af !important;
  border-color: #9ca3af !important;
  color: #eef2f7 !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
  box-shadow: none !important;
  transform: none !important;
}

.checkout-btn.close-bill.is-loading {
  pointer-events: none;
}

.checkout-btn.close-bill .qs-btn-inline-spinner {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #ffffff;
  display: inline-block;
  margin-right: 8px;
  animation: qs-spin 0.8s linear infinite;
  vertical-align: -2px;
}

@keyframes qs-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Full-screen soft lock while calling Close Bill API */
/* Quick Sale kept alive but invisible while the closed-ticket receipt is on top. */
#quickSaleModal.qs-behind-receipt {
  display: none !important;
}

.qs-closebill-screenlock {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(1px);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: all;
}

/* Close-bill alerts and authorization confirms must sit above the screen lock. */
body:has(> .qs-closebill-screenlock) > .swal2-container {
  z-index: 1000000;
}

.qs-closebill-screenlock__box {
  background: #ffffff;
  border: 1px solid var(--bs-border-color);
  border-radius: 12px;
  padding: 10px 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: normal normal 600 var(--s-14);
  color: var(--bs-text);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.qs-closebill-spinner {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid #cbd5e1;
  border-top-color: #0f172a;
  animation: qs-spin 0.8s linear infinite;
}

/* ===== GIFT CARD PAYMENT COMPONENT ===== */
.giftcard-payment-content {
  position: static;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  background: transparent;
  overflow-y: visible;
  display: flex;
  justify-content: center;
  align-items: center;
}

.gc-card {
  background: #fff;
  border-radius: var(--px-16);
  box-shadow: 0 var(--px-4) var(--px-24) rgba(0, 0, 0, 0.1);
  padding: var(--px-28) var(--px-24) var(--px-24);
  width: 320px;
  display: flex;
  flex-direction: column;
  gap: var(--px-16);
}

.gc-title {
  text-align: center;
  color: #00bcd4;
  font: normal normal 700 var(--s-16);
  letter-spacing: 1.5px;
  margin: 0 0 var(--px-4);
}

.gc-balance-box {
  border: 2px dashed #ccc;
  border-radius: var(--px-8);
  text-align: center;
  padding: var(--px-12);
  font: normal normal 700 var(--s-14);
  color: var(--bs-text-muted);
  letter-spacing: 1px;
}

.gc-balance-amount {
  color: #f5a623;
  margin-left: var(--px-8);
}

.gc-input-group {
  display: flex;
  align-items: center;
  border-bottom: 1.5px solid var(--bs-border-color);
  padding-bottom: 6px;
  gap: var(--px-8);
}

.gc-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.gc-input {
  flex: 1;
  border: none;
  outline: none;
  font: normal normal 500 var(--s-13);
  color: var(--bs-text-muted);
  letter-spacing: 0.5px;
  background: transparent;
}

.gc-input::placeholder {
  color: #aaa;
}

.gc-scan-btn {
  background: none;
  border: none;
  color: #00bcd4;
  font: normal normal 700 var(--s-12);
  cursor: pointer;
  letter-spacing: 0.5px;
  padding: 0;
  white-space: nowrap;
}

.gc-scan-btn:hover {
  color: #0097a7;
}

.gc-info-row {
  display: flex;
  align-items: center;
  gap: var(--px-12);
  padding: var(--px-4) 0;
}

.gc-info-icon {
  display: flex;
  align-items: center;
  color: #aaa;
}

.gc-info-icon.gc-icon-orange {
  color: #f5a623;
}

.gc-info-label {
  font: normal normal 600 var(--s-12);
  color: var(--bs-text-muted);
  flex: 1;
}

.gc-info-value {
  font: normal normal 500 var(--s-13);
  color: var(--bs-text);
}

.gc-process-btn {
  margin-top: var(--px-8);
  background: #f5a623;
  color: #fff;
  border: none;
  border-radius: var(--px-8);
  padding: var(--px-12);
  width: 100%;
  font: normal normal 700 var(--s-14);
  letter-spacing: 2px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.gc-process-btn:hover {
  background: #e0951a;
}

.gc-process-btn:disabled {
  background: #f5a623;
  opacity: 0.6;
  cursor: not-allowed;
}

/* ===== END GIFT CARD PAYMENT ===== */

/* ===== CREDIT CARD PAYMENT COMPONENT ===== */
.credit-payment-content {
  position: static;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  background: transparent;
  overflow-y: visible;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cp-card {
  background-color: white;
  border-radius: var(--px-16);
  padding: var(--px-10) var(--px-16) var(--px-10);
  width: 300px;
  max-height: min(75vh, 560px);
  display: flex;
  flex-direction: column;
  gap: var(--px-10);
  border: 1px solid var(--bs-border-color);
  overflow: hidden;
  min-height: 0;
}

.cp-title {
  text-align: center;
  color: #00bcd4;
  font: normal normal 700 var(--s-16);
  letter-spacing: 1.5px;
  margin: 0;
  line-height: 1.25;
  flex-shrink: 0;
}

.cp-forms-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: 2px;
  margin-right: -2px;
}

.cp-payment-forms-stack {
  display: flex;
  flex-direction: column;
  gap: var(--px-10);
}

.cp-form-box {
  border: 1.5px solid #5a4630;
  border-radius: var(--px-12);
  padding: var(--px-8) var(--px-12);
  display: flex;
  flex-direction: column;
  gap: 0;
  background: transparent;
}

.cp-input-group {
  display: flex;
  align-items: center;
  gap: var(--px-2);
  padding: var(--px-12) 1px;
  border-bottom: 1px solid #5a4630;
}

.cp-input-group:last-child {
  border-bottom: none;
}

.cp-input-group.cp-row-split {
  gap: 0;
}

.cp-input-group.cp-row-split .cp-input-half {
  flex: 1 1 0;
  min-width: 0;
}

.cp-tip-wrap {
  display: flex;
  align-items: center;
  gap: var(--px-6);
  border-left: 1px solid #5a4630;
  padding-left: var(--px-8);
  min-width: 0;
}

.cp-input-group.cp-row-split > input.cp-input-half {
  padding-right: var(--px-8);
}

.cp-tip-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.cp-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.cp-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--bs-text-muted);
  letter-spacing: 0.5px;
  font: normal normal 500 var(--s-13);
}

.cp-input::placeholder {
  color: #7a6a55;
  letter-spacing: var(--px-8);
  font: normal normal 600 var(--s-12);
}

.cp-input-half {
  flex: 1;
}

.cp-tip {
  padding-left: 0;
}

.cp-tip-edit-btn {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--bs-border-color);
  background: #ffffff;
  color: #64748b;
  border-radius: var(--px-8);
  cursor: pointer;
  padding: 0;
}

.cp-tip-edit-btn:hover {
  background: var(--bs-body-bg);
  border-color: #cbd5e1;
  color: #475569;
}

.cp-tip-edit-btn:active {
  background: #eef2f7;
}

.cp-process-btn {
  background: #8b6914;
  color: #fff;
  border: none;
  border-radius: var(--px-8);
  padding: var(--px-10);
  width: 100%;
  font: normal normal 700 var(--s-14);
  letter-spacing: 2px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.cp-process-btn:hover {
  background: #a07c1a;
}

.cp-add-payment-btn {
  background: #8b6914;
  color: #fff;
  border: none;
  border-radius: var(--px-8);
  padding: var(--px-10);
  width: 100%;
  font: normal normal 700 var(--s-14);
  letter-spacing: 1px;
  cursor: pointer;
  transition: background 0.2s ease;
  margin-top: var(--px-8);
  flex-shrink: 0;
}

.cp-add-payment-btn:hover {
  background: #a07c1a;
}

.cp-form-box .cp-action-row {
  margin-top: var(--px-8);
}

.cp-action-row {
  margin-top: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--px-8);
}

.cp-action-btn {
  width: 100%;
  border-radius: var(--px-8);
  padding: var(--px-8);
  font: normal normal 700 var(--s-13);
  letter-spacing: 1.5px;
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
  border: 1px solid transparent;
  background: #fff;
}

.cp-void-btn {
  border-color: #b91c1c;
  color: #b91c1c;
}

.cp-void-btn:hover {
  background: #fee2e2;
}

.cp-refund-btn {
  border-color: #0f766e;
  color: #0f766e;
}

.cp-refund-btn:hover {
  background: #ccfbf1;
}

/* ===== END CREDIT CARD PAYMENT COMPONENT ===== */

/* ===== OTHER PAYMENTS COMPONENT ===== */
.other-payment-content {
  position: static;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  background: transparent;
  overflow-y: visible;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.op-card {
  background: #f5f5f5;
  border-radius: var(--px-16);
  padding: var(--px-24) var(--px-20);
  width: 300px;
  display: flex;
  flex-direction: column;
  gap: var(--px-12);
}

.op-title {
  text-align: center;
  color: #00bcd4;
  font: normal normal 700 var(--s-16);
  letter-spacing: 1.5px;
  margin: 0 0 6px;
}

.op-form-box {
  background: #fff;
  border: 1.5px solid var(--bs-border-color);
  border-radius: var(--px-12);
  padding: var(--px-12) var(--px-16) var(--px-12);
  display: flex;
  flex-direction: column;
  gap: var(--px-8);
  position: relative;
}

.op-label {
  font: normal normal 600 var(--s-13);
  color: #444;
  letter-spacing: 0.3px;
}

.op-input {
  border: none;
  border-bottom: 1.5px solid #ccc;
  outline: none;
  background: transparent;
  color: var(--bs-text);
  font: normal normal 500 var(--s-14);
  width: 80px;
  padding-bottom: 3px;
}

.op-input:focus {
  border-bottom-color: #00bcd4;
}

/* ===== END OTHER PAYMENTS COMPONENT ===== */

/* ===== OTHER PAYMENT MODAL ===== */
.opm-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 9999;
  justify-content: center;
  align-items: center;
}

.opm-overlay.opm-show {
  display: flex;
}

.opm-modal {
  background: #fff;
  border-radius: var(--px-16);
  width: 340px;
  padding: 18px 18px 20px;
  box-shadow: 0 var(--px-8) 32px rgba(0, 0, 0, 0.18);
}

.opm-header {
  text-align: center;
  margin-bottom: 10px;
}

.opm-header-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--bs-text);
  letter-spacing: 1px;
}

.opm-note-row {
  display: flex;
  align-items: center;
  gap: var(--px-8);
  margin-bottom: 16px;
  border-bottom: 1.5px solid var(--bs-border-color);
  padding-bottom: 10px;
}

.opm-note-icon {
  display: flex;
  align-items: center;
}

.opm-note-line {
  flex: 1;
  height: 1.5px;
  background: #ddd;
}

.opm-body {
  display: flex;
  gap: var(--px-12);
}

.opm-left {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 80px;
}

.opm-quick {
  border: 1.5px solid #ccc;
  border-radius: var(--px-8);
  background: #fff;
  padding: var(--px-8) 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--bs-text);
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.opm-quick:hover {
  border-color: #00bcd4;
  color: #00bcd4;
}

.opm-quick.opm-exact {
  border-color: #00bcd4;
  color: #00bcd4;
  font-weight: 700;
  display: flex;
  justify-content: center;
  align-items: center;
}

.opm-quick.active {
  background: #e8f8fb;
  border-color: #00bcd4;
  color: #00bcd4;
}

.opm-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.opm-display {
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  color: #f5a623;
  letter-spacing: 1px;
  padding: var(--px-4) 0;
}

.opm-numpad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}

.opm-num {
  border: 1.5px solid var(--bs-border-color);
  border-radius: 50%;
  background: #fff;
  width: 48px;
  height: 48px;
  font-size: 16px;
  font-weight: 600;
  color: var(--bs-text);
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
}

.opm-num:hover {
  background: #f0f0f0;
  border-color: #aaa;
}

.opm-num:active {
  background: #e0e0e0;
}

.opm-pay-btn {
  background: #7dc243;
  color: #fff;
  border: none;
  border-radius: var(--px-8);
  padding: var(--px-12);
  width: 100%;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 2px;
  cursor: pointer;
  transition: background 0.2s;
  display: flex;
  justify-content: center;
  align-items: center;
}

.opm-pay-btn:hover {
  background: #6aad35;
}

.cqs-op-clear {
  background: none;
  border: none;
  color: #e53935;
  font-size: var(--px-16);
  font-weight: 700;
  cursor: pointer;
  padding: 0 var(--px-4);
  line-height: 1;
  position: absolute !important;
  vertical-align: middle;
  bottom: var(--px-12);
  height: 32px;
  left: 80px;
}

.cqs-op-clear:hover {
  color: #b71c1c;
}

/* ===== END OTHER PAYMENT MODAL ===== */

/* Grid wrapper */
.tix-grid {
  display: grid;
  gap: var(--px-12);
  grid-template-columns: repeat(2, 1fr);
}

/* ----------------------------------------
   Card base
   ---------------------------------------- */
.tix-card {
  background: #ffffff;
  border-radius: 16px;
  border: 1.5px solid #ccc9e8;
  box-shadow: 0 2px var(--px-8) rgba(140, 120, 200, 0.1);
  position: relative;
  overflow: visible;
  /*transition: box-shadow 0.2s ease;*/
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.tix-card:hover {
  box-shadow: 0 var(--px-4) 16px rgba(108, 91, 191, 0.18);
}

.tix-card.pass-date {
  opacity: 0.93;
}

/* ----------------------------------------
   Index badge — top-left
   ---------------------------------------- */

.tix-card-index {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tix-index {
  position: absolute;
  top: -1px;
  left: -1px;
  background: #7c6fd4;
  border-radius: var(--px-12) 0 10px 0;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.tix-index p {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}

/* ----------------------------------------
   More options button — top-right
   ---------------------------------------- */
.tix-btn-more {
  position: absolute !important;
  top: 0px;
  right: var(--px-8);
  background: none;
  border: none;
  color: #bbb;
  cursor: pointer;
  font-size: 16px;
  padding: 2px var(--px-4);
  border-radius: 6px;
  line-height: 1;
  transition:
    background 0.15s,
    color 0.15s;
  z-index: 2;
}

.tix-btn-more:hover {
  background: #f3f1fc;
  color: #7c6fd4;
}

/* ----------------------------------------
   Client name — top section
   ---------------------------------------- */
.tix-top {
  padding: var(--px-8) 10px 6px 44px;
  cursor: pointer;
}

.tix-group {
  width: 100%;
  position: relative;
}

.tix-info {
  display: flex;
  flex-direction: column;
}

.tix-client-name {
  font-size: var(--px-16);
  font-weight: 700;
  color: #1a1a2e;
  line-height: 1.2;
  display: inline-block;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s;
}

.tix-client-name:hover {
  border-bottom-color: #06b6d4;
}

.tix-subname {
  font-size: 11px;
  color: #aaa;
  font-weight: 400;
  letter-spacing: 0.03em;
  margin-top: 1px;
  display: block;
}

/* ----------------------------------------
   Time row
   ---------------------------------------- */
.tix-time-row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2px var(--px-16);
  font-size: var(--px-12);
  padding: 0 var(--px-12) 0 44px;
  margin-bottom: 6px;
  color: #555;
}

.tix-label {
  font-size: 11px;
  color: #bbb;
  margin-right: 1px;
}

.tix-appt {
  display: flex;
  align-items: center;
  gap: var(--px-4);
  color: #0891b2;
  font-weight: 500;
}

.tix-checkout {
  color: #475569;
  font-size: var(--px-12);
}

.tix-duration {
  color: #475569;
  font-size: var(--px-12);
}

.tix-checkin-time {
  display: flex;
  align-items: center;
  color: #888;
  font-size: var(--px-12);
  margin-left: auto;
}

.tix-hidden {
  display: none !important;
}

/* ----------------------------------------
   Divider
   ---------------------------------------- */
.tix-divider {
  border: none;
  border-top: 1px solid #e8e6f0;
  margin: 0 var(--px-12) var(--px-8) var(--px-12);
}

/* ----------------------------------------
   Service name
   ---------------------------------------- */
.tix-service {
  padding: 0 var(--px-12) var(--px-8) var(--px-12);
}

.tix-service p {
  font-size: 15px;
  font-weight: 700;
  color: #111;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

/* ----------------------------------------
   Staff row
   ---------------------------------------- */
.tix-staff-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px 10px var(--px-8);
}

.tix-avatar-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

.tix-staff-photo {
  display: inline-flex;
}

/* Staff name badge — background set via inline style */
.tix-staff-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--px-8);
  padding: 5px 16px;
  font-size: 13px;
  font-weight: 700;
  height: 34px;
  color: #fff !important;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}

/* Play button — outlined circle */
.tix-play-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid #ccc9e8;
  background: #fff;
  color: #7c6fd4;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 11px;
  transition:
    background 0.2s,
    color 0.2s,
    border-color 0.2s,
    transform 0.15s;
  flex-shrink: 0;
}

.tix-play-btn:hover {
  background: #7c6fd4;
  color: #fff;
  border-color: #7c6fd4;
  transform: scale(1.08);
}

.tix-play-btn:active {
  transform: scale(0.96);
}

/* ----------------------------------------
   Progress bar section
   ---------------------------------------- */
.tix-process-container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px 10px var(--px-8);
  gap: var(--px-12);
}

.tix-progress-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  flex: 1;
}

.tix-pause-btn {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #aaa;
  font-size: 10px;
  cursor: pointer;
  border-radius: var(--px-4);
  flex-shrink: 0;
  transition:
    background 0.15s,
    color 0.15s;
}

.tix-pause-btn:hover {
  background: #f3f1fc;
  color: #7c6fd4;
}

.tix-progress-bar {
  flex: 1;
  min-width: 0;
}

.tix-progress-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--px-4);
}

.tix-progress-text {
  font-size: 11px;
  color: #0891b2;
  font-weight: 500;
  line-height: 1;
}

.tix-progress-percent {
  font-size: var(--px-12);
  font-weight: 700;
  color: var(--bs-text);
  line-height: 1;
}

.tix-progress-track {
  width: 100%;
  height: 7px;
  background: #ede9f8;
  border-radius: var(--px-4);
  overflow: hidden;
}

.tix-progress-fill {
  height: 100%;
  border-radius: var(--px-4);
  transition: width 0.4s ease;
}

/* Fill color variants */
.tix-fill-red {
  background: linear-gradient(90deg, #e8455a 60%, #f0654a 100%);
}

.tix-fill-orange {
  background: linear-gradient(90deg, #f59e0b 60%, #fbbf24 100%);
}

.tix-fill-green {
  background: linear-gradient(90deg, #10b981 60%, #34d399 100%);
}

/* ----------------------------------------
   Dollar icon — bottom-right with circle
   ---------------------------------------- */
.tix-dollar {
  /* position: absolute; */
  /* bottom: 9px; */
  /* right: 10px; */
  color: #7c6fd4;
  font-size: 17px;
  line-height: 1;
}

.tix-dollar i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1.5px solid #7c6fd4;
  border-radius: 50%;
  font-size: 11px;
}

/* Popup placeholder */
.tix-icon-popup {
  display: none;
}

/* Multi-select state for ticket cards */
.tix-card-multi-selected {
  border: 3px solid var(--bs-main) !important;
  box-shadow:
    0 0 0 var(--px-4) rgba(58, 152, 33, 0.15),
    0 var(--px-4) var(--px-12) rgba(58, 152, 33, 0.25) !important;
  transform: scale(1.02) translateY(-2px);
  background: linear-gradient(135deg, rgba(58, 152, 33, 0.03) 0%, rgba(58, 152, 33, 0.08) 100%);
  z-index: 10;
}

.tix-card-multi-selected::before {
  content: "✓";
  position: absolute;
  top: var(--px-8);
  right: var(--px-8);
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, var(--bs-main) 0%, var(--bs-main) 100%);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 18px;
  z-index: 15;
  box-shadow: 0 2px var(--px-8) rgba(58, 152, 33, 0.5);
  animation: checkmarkPop 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes checkmarkPop {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.tix-card-selecting {
  opacity: 0.6;
  pointer-events: none;
  filter: grayscale(0.3);
}

.tix-card-selected {
  border-color: #10b981 !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

#ticket.active .tix-card:hover:not(.tix-card-multi-selected) {
  border-color: #93c5fd !important;
  box-shadow: 0 0 0 2px rgba(147, 197, 253, 0.4);
  transform: translateY(-2px);
}

.tix-card-multi-selected::after {
  content: attr(data-selection-order);
  position: absolute;
  top: var(--px-8);
  left: var(--px-8);
  width: 24px;
  height: 24px;
  background: white;
  color: var(--bs-main);
  border: 2px solid var(--bs-main);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: var(--px-12);
  z-index: 14;
}

/* responsive */
.pos-container-mobile {
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: 0 auto;
}

.mobile-modal {
  max-width: 100vw !important;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Fill the drawer. Without this the mobile shell only sizes to its header + an
   empty grid (~0px tall), so the first-load qs-loading-overlay (absolute inset 0
   on .services-grid) collapses and clips the spinner in half while the rest of
   the 100dvh drawer stays blank white. */
.mobile-modal > .pos-container-mobile {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  width: 100%;
}

/* header */
.mobile-modal .modal-header {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 10;
  padding: var(--px-12);
  border-bottom: 0.5px solid var(--color-border-tertiary);
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  gap: var(--px-12);
  flex-shrink: 0;
}

.mobile-modal .header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.mobile-modal .header-top h2 {
  font-size: 18px;
  font-weight: 500;
  color: var(--color-text-primary);
  margin: 0;
}

.mobile-modal .btn-icon {
  padding: var(--px-8);
  background: none;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
}

.mobile-modal .btn-icon:hover {
  background: var(--color-background-secondary);
}

.mobile-modal .header-actions {
  display: flex;
  gap: var(--px-8);
}

.mobile-modal .header-actions-mobile {
  display: flex;
  gap: var(--px-8);
  width: 100%;
  align-items: stretch;
}

.mobile-modal .header-actions-mobile .qs-print-more {
  flex: 0 0 auto;
  align-self: stretch;
}

/* Outline style (same voice as desktop Open Ticket / old Print). Avoid :hover fill
   on touch — sticky hover after tap left the ellipsis dark-on-green. */
.mobile-modal .header-actions-mobile .qs-print-more-btn {
  width: var(--px-44);
  height: 100%;
  min-height: var(--px-44);
  border-radius: var(--px-10);
  border: 1px solid var(--bs-main);
  background: #ffffff;
  color: var(--bs-main);
  box-shadow: none;
}

.mobile-modal .header-actions-mobile .qs-print-more-btn[aria-expanded="true"] {
  background: #ffffff;
  border-color: var(--bs-main);
  color: var(--bs-main);
  box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
  .mobile-modal .header-actions-mobile .qs-print-more-btn:hover {
    background: var(--bs-muted-bg, #f3f4f6);
    border-color: var(--bs-main);
    color: var(--bs-main);
    box-shadow: none;
  }
}

.mobile-modal .header-actions-mobile .qs-print-more-menu {
  right: 0;
  left: auto;
  z-index: 40;
}

.mobile-modal .header-actions-mobile [data-purpose="ticket-action"] {
  flex: 1;
  background: #ffffff;
  border: 1px solid var(--bs-main);
  color: var(--bs-main);
}

.mobile-modal .header-actions-mobile [data-purpose="ticket-action"].is-active {
  background: var(--bs-main);
  border-color: var(--bs-main);
  color: #ffffff;
}

.mobile-modal .btn-primary {
  flex: 1;
  background: var(--bs-main);
  color: #fff;
  border: none;
  padding: var(--px-8) 16px;
  border-radius: var(--px-8);
  font: normal normal 500 var(--s-13);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
}

.mobile-modal .btn-primary:hover {
  opacity: 0.9;
}

.mobile-modal .btn-secondary {
  flex: 1;
  background: none;
  border: 0.5px solid var(--border);
  color: var(--color-text-primary);
  padding: var(--px-8) 16px;
  border-radius: var(--px-8);
  font: normal normal 500 var(--s-13);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
}

.mobile-modal .btn-secondary:hover {
  background: var(--bs-main-hover);
}

@media (hover: none) {
  .mobile-modal .btn-secondary:hover {
    background: none;
  }

  .mobile-modal .header-actions-mobile [data-purpose="ticket-action"]:hover:not(.is-active) {
    background: #ffffff;
    color: var(--bs-main);
  }
}

.mobile-modal .category-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--px-8);
  overflow-x: auto;
  scrollbar-width: none;
  width: 100%;
}

.mobile-modal .category-nav::-webkit-scrollbar {
  display: none;
}

.mobile-modal .tab-active {
  flex-shrink: 0;
  padding: 6px var(--px-16);
  background: var(--bs-main);
  color: #fff;
  border: none;
  border-radius: var(--px-8);
  font: normal normal 500 var(--s-13);
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  flex: 1;
}

.mobile-modal .tab-inactive {
  flex-shrink: 0;
  padding: 6px var(--px-16);
  border: 1px solid #d3d3d3;
  background-color: white;
  color: var(--black);
  border-radius: var(--px-8);
  font: normal normal 500 var(--s-13);
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  flex: 1;
}

.mobile-modal .tab-inactive:hover {
  background: var(--color-background-tertiary);
}

.mobile-modal .search-filter,
.pos-container-mobile .search-filter {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

/* Positioning shell only. client.css styles bare `.search-wrap` as a bordered
   flex chip (height/padding/bg) for the Clients page — that chrome must not
   land on this field, or the absolute magnifier sits over the placeholder. */
.mobile-modal .search-filter .search-wrap,
.pos-container-mobile .search-filter .search-wrap {
  /* Clients applies position: static !important and flex-basis: 100% on phones.
     The search icon needs this containing block; a column must size to the input. */
  position: relative !important;
  flex: 0 0 auto;
  min-width: 0;
  display: block;
  width: 100%;
  height: auto;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-sizing: border-box;
}

.mobile-modal .search-filter .search-wrap svg,
.pos-container-mobile .search-filter .search-wrap svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--color-text-secondary, #6b7280);
  pointer-events: none;
  z-index: 1;
}

/* Input owns the visible box. !important beats client.css `.search-input`
   (padding: 0 8px; border: none; background: transparent) which otherwise
   leaves the magnifier overlapping "Search…". */
.mobile-modal .search-filter .search-wrap .search-input,
.mobile-modal .search-filter .search-wrap input,
.pos-container-mobile .search-filter .search-wrap .search-input,
.pos-container-mobile .search-filter .search-wrap input {
  display: block;
  width: 100% !important;
  height: var(--px-44) !important;
  min-height: var(--px-44) !important;
  margin: 0;
  padding: 0 12px 0 40px !important;
  background: #fff !important;
  border: 1px solid #d3d3d3 !important;
  border-radius: var(--px-8) !important;
  font: normal normal 500 var(--s-14);
  line-height: var(--px-44) !important;
  color: var(--bs-input-color, #111827);
  box-sizing: border-box !important;
  outline: none;
  /* newclient.css sets every bare .search-input to opacity 0 and
     pointer-events: none until .search-wrap.expanded. This field is always open. */
  opacity: 1 !important;
  pointer-events: auto !important;
}

@media (max-width: 767.98px) {
  /* The global mobile input rule forces 16px, overriding the catalogue font. */
  #quickSaleModal .pos-container-mobile .search-filter .search-wrap .search-input {
    font-size: 13px !important;
    font-weight: 400;
  }
}

.mobile-modal .search-filter .search-wrap .search-input:focus,
.mobile-modal .search-filter .search-wrap input:focus,
.pos-container-mobile .search-filter .search-wrap .search-input:focus,
.pos-container-mobile .search-filter .search-wrap input:focus {
  border-color: var(--bs-main) !important;
  box-shadow: 0 0 0 2px rgba(58, 152, 33, 0.15);
}

.mobile-modal .filter-tags,
.pos-container-mobile .filter-tags {
  display: flex;
  gap: var(--px-12);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 2px 0;
  max-height: 96px;
  align-items: flex-start;
  -webkit-overflow-scrolling: touch;
}

.mobile-modal .filter-tags::-webkit-scrollbar,
.pos-container-mobile .filter-tags::-webkit-scrollbar {
  display: none;
}

.mobile-modal .btn-scroll-form,
.pos-container-mobile .btn-scroll-form {
  display: none !important;
}

.mobile-modal .filter-tags.qs-mobile-staff-tools {
  max-height: none;
  padding: 0;
}

/* Category chips in .filter-tags are cate-box cards (quickSale.css).
   Keep these pill rules off that row so tag-active doesn't go dark-fill. */

/* content
   Column + min-height:0 so #lst-services (flex:1) receives the leftover height
   under the sticky header. Scroll lives on the grid, not here — otherwise an
   empty grid stays ~0px and the absolute .qs-loading-overlay clips the spinner. */
.mobile-modal .modal-content,
.pos-container-mobile .modal-content {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  overflow-x: clip;
  box-sizing: border-box;
  gap: var(--px-12);
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

.mobile-modal .modal-content > .services-grid,
.mobile-modal .modal-content > .products-grid,
.mobile-modal .modal-content > .giftcards-grid,
.mobile-modal .modal-content > .staff-grid-container,
.pos-container-mobile .modal-content > .services-grid,
.pos-container-mobile .modal-content > .products-grid,
.pos-container-mobile .modal-content > .giftcards-grid,
.pos-container-mobile .modal-content > .staff-grid-container {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  align-self: stretch;
  position: relative;
  z-index: 0;
  box-sizing: border-box;
}

/* First-load empty grid still needs a floor if any ancestor flex link fails. */
.mobile-modal .services-grid:has(> .qs-loading-overlay),
.pos-container-mobile .services-grid:has(> .qs-loading-overlay) {
  min-height: 240px;
}

/* footer */
.mobile-modal .modal-footer {
  position: sticky;
  bottom: 0;
  z-index: 10;
  background: white;
  border-top: 1px solid #d3d3d3;
  flex-shrink: 0;
  width: 100%;
}

.modal-footer .footer-actions {
  display: flex;
  gap: var(--px-8);
  margin-bottom: 16px;
  overflow-x: auto;
  scrollbar-width: none;
  width: 100%;
  justify-content: space-between;
}

.modal-footer .footer-actions::-webkit-scrollbar {
  display: none;
}

.modal-footer .footer-action-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px var(--px-12);
  border-radius: var(--px-8);
  border: 0.5px solid #d3d3d3;
  background: white;
  font: normal normal 500 var(--s-12);
  color: var(--bs-text);
  white-space: nowrap;
  cursor: pointer;
  flex: 1;
}

.modal-footer .footer-action-btn:hover {
  background: var(--color-background-secondary);
}

.modal-footer .footer-action-btn svg {
  flex-shrink: 0;
}

.modal-footer .price-details {
  display: flex;
  flex-direction: column;
  gap: var(--px-8);
  width: 100%;
}

.modal-footer .price-row {
  display: flex;
  justify-content: space-between;
  font: normal normal 500 var(--s-13);
  color: var(--color-text-secondary);
}

.modal-footer .price-row-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--px-8);
  border-top: 0.5px solid var(--color-border-tertiary);
}

.modal-footer .price-row-total .label {
  font: normal normal 500 var(--s-16);
  color: var(--bs-text);
}

.modal-footer .price-row-total .amount {
  font: normal normal 700 var(--s-24);
  color: var(--bs-text);
}

.modal-footer .payment-btn {
  width: 100%;
  background: white;
  color: var(--bs-text);
  font: normal normal 500 var(--s-16);
  padding: var(--px-16);
  border: 1px solid #d3d3d3;
  border-radius: var(--px-8);
  cursor: not-allowed;
  box-sizing: border-box;
  transition:
    background 0.2s,
    color 0.2s;
}

.modal-footer .payment-btn.active {
  background: var(--bs-main);
  color: #fff;
  cursor: pointer;
}

.modal-footer .payment-btn.active:hover {
  opacity: 0.9;
}

.pos-container-mobile .qs-cart-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  background: #3b82f6;
  color: #fff;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  z-index: 30;
  transition: background 0.2s;
}

.pos-container-mobile .qs-cart-fab:hover {
  background: #2563eb;
}

.pos-container-mobile .qs-cart-icon {
  width: 24px;
  height: 24px;
}

@media (min-width: 768px) {
  .pos-container-mobile .qs-cart-fab {
    display: none;
  }
}

/* Cart summary and payment choice, shared by the sidebar and phone cart. */
.cart-footer:has(.continue-btn:not(.dis-none)),
.cart-footer:has(.payment-row:not(.dis-none)) {
  padding: var(--px-12);
  padding-top: var(--px-2);
  max-height: 55%;
  overflow-y: auto;
  background: #ffffff;
  color: #172033;
  box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.04);
}

.salon-service-card__price.qs-quick-price,
.salon-service-card__addon-price.qs-quick-price {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 3px 7px;
  border: 1px solid #a6cca0;
  border-radius: 6px;
  background: #f1f8ef;
  cursor: pointer;
  white-space: nowrap;
}

.qs-quick-price:hover {
  background: #e4f1df;
  border-color: #30981c;
}

.qs-quick-price:focus-visible {
  outline: 2px solid #30981c;
  outline-offset: 2px;
}

.qs-cart-summary-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--px-8);
  margin-bottom: var(--px-8);
  font: normal normal 700 var(--s-14);
  color: #172033;
}

.qs-cart-item-count {
  font: normal normal 700 var(--s-12);
  color: #7b8ba3;
}

.qs-order-summary .total-row {
  display: flex;
  justify-content: space-between;
  gap: var(--px-8);
  margin-bottom: var(--px-4);
  color: #7b8ba3;
  font: normal normal 400 var(--s-12);
}

.qs-order-summary .total-row strong {
  color: #344054;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.qs-order-summary .totals {
  margin: 0 0 var(--px-8);
}

.cart-footer .discount-view .del-discount .fa-xmark {
  color: #e57373;
}

.cart-footer .total-row.tip .del-tip {
  display: inline-flex;
  align-items: center;
  color: inherit;
  cursor: pointer;
}

.cart-footer .total-row.tip .del-tip .fa-xmark {
  color: #e57373;
}

:is(#quickSaleModal, .cart-modal) .qs-summary-control-label {
  display: inline-flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  gap: 6px;
}

:is(#quickSaleModal, .cart-modal) .qs-summary-tax-toggle {
  height: 28px;
  padding: 3px 8px;
  border: 1px solid var(--bs-border-color);
  border-radius: 6px;
  background: var(--bs-surface-bg);
  color: var(--bs-main);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

:is(#quickSaleModal, .cart-modal) .qs-summary-fee-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 24px;
  height: 28px;
  width: 24px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--bs-red, #dc2626);
}

/* Order summary alignment.
   Every adjustment row shares one 24px height and one vertical centre line, and every removable
   row (Credit Surcharge / Tip / Discount / Rewards) shares one 20px "x" slot + 6px gap, so the
   x glyphs and the labels line up in a column. The Tip/Discount icons used to be bare light glyphs
   with an inline gap:8px while the fee row used a 24px solid button, which left them out of line;
   the Tax chip (28px) pushed its amount to the top of the row, and the Tip amount used a larger font. */
:is(#quickSaleModal, .cart-modal) .cart-footer .totals .total-row:not(.grand-total):not(.cash):not(.card-price) {
  align-items: center;
  min-height: 24px;
  margin-bottom: 2px;
}

:is(#quickSaleModal, .cart-modal) .cart-footer .totals .total-row > span:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

:is(#quickSaleModal, .cart-modal) .cart-footer .totals #tip {
  font: inherit;
  font-weight: 600;
}

:is(#quickSaleModal, .cart-modal) .qs-summary-tax-toggle {
  height: 24px;
  padding: 0 8px;
  line-height: 1;
}

:is(#quickSaleModal, .cart-modal) .cart-footer .totals :is(.del-tip, .del-discount) {
  display: inline-flex;
  align-items: center;
  gap: 6px !important; /* beats the inline style="gap: 8px" in the markup */
}

:is(#quickSaleModal, .cart-modal) .cart-footer .totals :is(.del-tip, .del-discount) > .fa-xmark,
:is(#quickSaleModal, .cart-modal) .cart-footer .totals .qs-summary-fee-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 20px;
  width: 20px;
  height: 24px;
  padding: 0;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

/* Order summary redesign ("Order summary - Redesign" mockup), desktop + mobile cart.
   Restyles the heading, the item-count pill and the Subtotal / Tax / Other Fee / Tip /
   Discount / Coupon / Rewards rows. The Cash Price / Card Price / Total cluster is excluded
   on purpose and keeps its current look.
   - the remove "x" moved from before the label to the far right, after the amount; rows
     without an "x" reserve the same 32px slot so every amount stays in one column. The markup
     (and the delegated .del-tip / .del-discount click handlers) is untouched: the wrappers
     become display:contents and flex `order` places label, amount and "x".
   - text: labels and amounts use the main text colour (the Rewards label was purple, the Tip
     amount green); Rewards is the one value that stays green, as in the mockup. */
:is(#quickSaleModal, .cart-modal) .cart-footer .qs-cart-summary-heading {
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--bs-text, #0f172a);
}

:is(#quickSaleModal, .cart-modal) .cart-footer .qs-cart-item-count {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--bs-muted-bg, #f1f5f9);
  color: var(--bs-text, #334155);
  font-size: 12px;
  font-weight: 600;
}

:is(#quickSaleModal, .cart-modal) .cart-footer .totals .total-row:not(.grand-total):not(.cash):not(.card-price) {
  gap: 8px;
  min-height: 34px;
  margin-bottom: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--bs-border-color, #cbd5e1) 40%, transparent);
  font-size: 14px;
  color: var(--bs-text, #0f172a);
}

/* The last visible adjustment row has no divider, otherwise its line sits right on top of the
   Cash / Card payment card. Hidden rows (.dis-none) and the Cash / Card / Total cluster do not count. */
:is(#quickSaleModal, .cart-modal) .cart-footer .totals .total-row:not(.grand-total):not(.cash):not(.card-price):not(:has(~ .total-row:not(.dis-none):not(.grand-total):not(.cash):not(.card-price))) {
  border-bottom: 0;
}

:is(#quickSaleModal, .cart-modal) .cart-footer .totals .total-row:first-child {
  min-height: 48px;
  font-size: 15px;
  font-weight: 600;
}

:is(#quickSaleModal, .cart-modal) .cart-footer .totals .total-row:not(.grand-total):not(.cash):not(.card-price) > span:last-child,
:is(#quickSaleModal, .cart-modal) .cart-footer .totals .total-row:not(.grand-total):not(.cash):not(.card-price) #tip {
  font-size: 14px;
  font-weight: 600;
  color: var(--bs-text, #0f172a);
}

:is(#quickSaleModal, .cart-modal) .cart-footer .totals .total-row:first-child > span:last-child {
  font-size: 18px;
  font-weight: 700;
}

:is(#quickSaleModal, .cart-modal) .cart-footer .totals .total-row.rewards-view #rewards {
  color: #047857;
}

html[data-pos-ui][data-pos-appearance=dark] :is(#quickSaleModal, .cart-modal) .cart-footer .totals .total-row.rewards-view #rewards {
  color: #34d399;
}

/* The label takes the free space so the "x" and the amount sit at the right edge. */
:is(#quickSaleModal, .cart-modal) .cart-footer .totals .total-row:not(.grand-total):not(.cash):not(.card-price) > :first-child {
  flex: 1 1 auto;
  min-width: 0;
}

:is(#quickSaleModal, .cart-modal) .cart-footer .totals .total-row.rewards-view .del-discount > span:not(.fa-xmark) {
  color: var(--bs-text, #0f172a); /* was purple */
}

/* Removable rows: label | x | amount, so every amount is flush with the right edge. */
:is(#quickSaleModal, .cart-modal) .cart-footer .totals :is(.del-tip, .del-discount, .other-fee-view .qs-summary-control-label) {
  display: contents;
}

:is(#quickSaleModal, .cart-modal) .cart-footer .totals .del-discount.rewards {
  color: inherit !important; /* inline style="color: #a855f7" in the markup */
}

:is(#quickSaleModal, .cart-modal) .cart-footer .totals :is(.tip-label, .del-discount > span, .other-fee-label) {
  order: 1;
  flex: 1 1 auto;
  min-width: 0;
}

:is(#quickSaleModal, .cart-modal) .cart-footer .totals :is(.tip, .discount-view, .rewards-view, .other-fee-view) > span:last-child {
  order: 3;
}

:is(#quickSaleModal, .cart-modal) .cart-footer .totals :is(.del-tip, .del-discount) > .fa-xmark,
:is(#quickSaleModal, .cart-modal) .cart-footer .totals .qs-summary-fee-remove {
  order: 2;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  font-size: 14px;
  color: #dc2626;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

:is(#quickSaleModal, .cart-modal) .cart-footer .totals :is(.del-tip, .del-discount) > .fa-xmark:hover,
:is(#quickSaleModal, .cart-modal) .cart-footer .totals .qs-summary-fee-remove:hover {
  background: #fee2e2;
  color: #b91c1c;
}

:is(#quickSaleModal, .cart-modal) [data-summary-action]:disabled {
  opacity: 0.5;
  cursor: wait;
}

.cart-footer:has(.qs-cart-payment-summary) .totals {
  margin: 0;
}

.cart-footer:has(.qs-cart-payment-summary) .total-row {
  margin-bottom: var(--px-4);
  font: normal normal 400 var(--s-12);
  color: #7b8ba3;
}

.cart-footer:has(.qs-cart-payment-summary) .total-row > span:last-child {
  color: #344054;
  font-variant-numeric: tabular-nums;
}

.cart-footer:has(.continue-btn:not(.dis-none)) .total-row.cash,
.cart-footer:has(.continue-btn:not(.dis-none)) .total-row.card-price,
.cart-footer:has(.continue-btn:not(.dis-none)) .total-row.grand-total {
  display: none;
}

.cart-footer:has(.payment-row:not(.dis-none)) .total-row.cash,
.cart-footer:has(.payment-row:not(.dis-none)) .total-row.card-price {
  display: none;
}

.cart-footer:has(.payment-row:not(.dis-none)) .qs-cart-summary-heading,
.cart-footer:has(.payment-row:not(.dis-none)) .qs-cart-payment-summary {
  display: block;
}

.cart-footer:has(.payment-row:not(.dis-none)) .qs-cart-summary-heading {
  display: flex;
}

.cart-items:has(> .qs-assigned-staff-bar + .salon-booking-wrapper) {
  gap: 0;
}

.cart-items > .qs-assigned-staff-bar + .salon-booking-wrapper {
  margin-top: 0;
  padding-top: 0;
}

.qs-cart-payment-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--px-8);
}

.qs-cart-payment-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--px-4);
  min-width: 0;
  height: auto;
  min-height: 0;
  justify-content: flex-start;
  overflow: visible;
  padding: var(--px-10) var(--px-10) var(--px-6);
  border: 2px solid #cbd5e1;
  border-radius: var(--px-10);
  background: #ffffff;
  color: #172033;
  text-align: left;
  cursor: pointer;
}

.qs-cart-payment-option[aria-pressed="true"] {
  border-color: #cbd5e1;
  box-shadow: none;
  background: var(--bs-main-50);
}

.qs-cart-payment-option:hover,
.qs-cart-payment-option:focus-visible {
  border-color: #cbd5e1;
}

.qs-cart-payment-option:focus-visible {
  outline: 2px solid #64748b;
  outline-offset: 2px;
}

.qs-cart-payment-option:disabled {
  cursor: default;
  opacity: 0.6;
}

.qs-cart-payment-option__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--px-4);
  width: 100%;
  font: normal normal 500 var(--s-11);
}

.qs-cart-payment-option__heading > span {
  display: inline-flex;
  align-items: center;
  gap: var(--px-4);
}

.qs-cart-payment-check {
  flex-shrink: 0;
  visibility: hidden;
}

.qs-cart-payment-option[aria-pressed="true"] .qs-cart-payment-check {
  visibility: visible;
  color: var(--bs-main);
}

.qs-cart-payment-amount {
  font: normal normal 700 var(--s-14);
  font-variant-numeric: tabular-nums;
}

.qs-cart-cash-saving {
  /* padding: 1px var(--px-6); */
  /* border: 1px solid #b9f1df; */
  border-radius: 999px;
  /* background: #ecfdf5; */
  color: var(--bs-accent);
  font: normal normal 500 var(--s-10);
}

.qs-cart-card-note {
  color: #94a3b8;
  font: normal normal 400 var(--s-10);
}

.qs-cart-total-due {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--px-8);
  margin: var(--px-6) 0 var(--px-6);
  font: normal normal 500 var(--s-12);
}

.qs-cart-total-due strong {
  font: normal normal 700 var(--s-22);
  font-variant-numeric: tabular-nums;
}

.cart-footer:has(.qs-cart-payment-summary) .continue-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--px-8);
  width: 100%;
  min-height: var(--px-40);
  padding: var(--px-10);
  border-radius: var(--px-10);
  background: var(--bs-main);
  color: #ffffff;
  font: normal normal 600 var(--s-12);
  animation: none;
  box-shadow: none;
}

.cart-footer:has(.qs-cart-payment-summary) .continue-btn:disabled {
  background: #e2e8f0;
  color: #94a3b8;
}

.qs-cart-action-spacer {
  flex: 0 0 auto;
  pointer-events: none;
}

.cart-items .service-card-expanded:focus {
  outline: none;
}

.cart-items .service-card-expanded > .service-action-panel {
  padding-bottom: var(--px-16);
}

/* Keep the booking area compact; cards retain their own spacing. */
.cart-items:has(> .qs-assigned-staff-bar) > .salon-booking-wrapper {
  padding-top: 0;
  gap: 0;
  height: auto;
  min-height: 0;
}

.cart-items:has(> .qs-assigned-staff-bar) #unassignedBody {
  padding-top: var(--px-6);
}

.cart-items:has(> .qs-assigned-staff-bar) .salon-services-list:not(.has-tech) {
  padding-top: var(--px-12);
}

#quickSaleModal .qs-pos-container .main-content > .cart-sidebar > .cart-items > .salon-booking-wrapper {
  padding-top: 0;
  gap: 0;
  height: auto;
  min-height: 0;
}

#quickSaleModal .qs-pos-container .main-content > .cart-sidebar > .cart-items .salon-services-list:not(.has-tech) {
  padding-top: var(--px-12);
}

.cart-items .salon-appointment-card__header {
  padding-top: var(--px-8);
}

.cart-items .salon-appointment-card__body {
  padding-top: var(--px-6);
}

.cart-items .salon-service-card > .service-action-panel {
  margin-top: var(--px-8);
  padding: var(--px-12);
  border: 1px solid #eef1f5;
  border-radius: var(--px-10);
  background: #ffffff;
}

.cart-items .salon-service-card > .service-action-panel .svc-menu__action {
  border-color: #edf0f4;
  border-radius: var(--px-10);
  background: #f8fafc;
  color: #344054;
}

.cart-items .salon-service-card > .service-action-panel .svc-menu__action:hover {
  border-color: var(--bs-main-200);
  background: var(--bs-main-50);
}

.cart-items .salon-service-card > .service-action-panel .svc-menu__icon:not(.svc-menu__icon--remove) {
  color: var(--bs-main);
  background: var(--bs-main-50);
}

.cart-items .salon-service-card > .service-action-panel .svc-menu__footer {
  margin: var(--px-10) 0 0;
  padding: var(--px-10) 0 0;
  border-top: 1px solid #edf0f4;
  border-radius: 0;
  background: transparent;
}

.salon-appointment-card__header .salon-staff-assign-btn {
  background-color: #f87171;
  color: #ffffff;
  font-weight: 700;
  box-shadow: var(--bs-shadow-xs);
}

.salon-appointment-card__header .salon-staff-assign-btn:hover {
  background-color: #ef4444;
  color: #ffffff;
}

/* Cart Modal Styles */
.cart-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.cart-modal {
  background: #fff;
  width: 100vw;
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}

.cart-modal .mobile-cart-sidebar {
  transform: translateX(0%);
}

/* Per-tech Start/Done sit on the same header as desktop; keep them tappable
   and stop the name from shoving the icons off a narrow sheet. */
.cart-modal .cart-staff-header__top {
  gap: var(--px-4);
}

.cart-modal .cart-staff-header__top .header-left .staff-avatar-cart {
  flex-shrink: 0;
}

.cart-modal .cart-staff-header__top .header-texts .staff-name-cart {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cart-modal .cart-staff-header__top .header-actions .icon-btn {
  padding: var(--px-8);
  min-width: 36px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cart-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid var(--bs-border-color);
}

.cart-modal-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.cart-modal-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #666;
}

.cart-modal-body {
  padding: 16px;
  overflow-y: auto;
  flex: 1;
}

.cart-items-list {
  margin-bottom: 16px;
}

.cart-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--px-12) 0;
  border-bottom: 1px solid #f0f0f0;
}

.cart-item:last-child {
  border-bottom: none;
}

.cart-item-name {
  font-weight: 500;
  color: var(--bs-text);
}

.cart-item-details {
  text-align: right;
}

.cart-item-duration {
  display: block;
  font-size: var(--px-12);
  color: #666;
}

.cart-item-price {
  font-weight: 600;
  color: #000;
}

.cart-total {
  text-align: right;
  font-size: 16px;
  font-weight: 700;
  color: #000;
  padding-top: var(--px-12);
  border-top: 1px solid var(--bs-border-color);
}

.empty-cart-text {
  text-align: center;
  color: #666;
  font-style: italic;
}

.empty-cart .empty-text {
  font: normal normal 700 var(--s-16);
  color: var(--bs-heading-color);
  font-family: Sora, sans-serif;
}

.empty-cart .empty-subtext {
  font-family: Sora, sans-serif;
}

.cart-modal .close-cart-modal {
  position: absolute;
  z-index: 1200;
  background: var(--bs-surface-bg);
  top: 10px;
  right: 10px;
  border: 1px solid var(--bs-border-color);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--px-12);
  border-radius: 50%;
  width: 42px;
  height: 42px;
  color: var(--bs-text);
}

/* COUPON MODAL STYLES */

.coupon-modal-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
}

.cpn-overflow-wrapper {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Tab Switcher */
.cpn-tab-switcher {
  display: flex;
  background: var(--bs-body-bg);
  border-radius: 10px;
  padding: var(--px-4);
  margin-bottom: 24px;
  gap: var(--px-4);
}

.cpn-tab-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--px-8);
  padding: 10px 16px;
  font-size: var(--px-16);
  font-weight: 600;
  border-radius: var(--px-8);
  border: none;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cpn-tab-icon {
  width: 18px;
  height: 18px;
}

.cpn-tab-btn:hover {
  color: #475569;
}

.cpn-tab-btn.cpn-tab-active {
  background: #fff;
  color: var(--bs-text);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.cpn-panel {
  display: none;
}

.cpn-panel.cpn-panel-active {
  display: block;
}

.cpn-input-wrapper {
  margin-bottom: 20px;
}

.cpn-code-input {
  width: 100%;
  padding: 20px 20px;
  border: 2px solid var(--bs-border-color);
  border-radius: var(--px-12);
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bs-text);
  transition: all 0.2s ease;
}

.cpn-code-input::placeholder {
  color: #cbd5e1;
  font-weight: 500;
  letter-spacing: 0.15em;
}

.cpn-code-input:focus {
  outline: none;
  border-color: #14b8a6;
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.1);
}

.cpn-hint-text {
  font-size: var(--px-12);
  color: #94a3b8;
  margin-top: var(--px-8);
  margin-bottom: 20px;
}

/* QR Placeholder */
.cpn-qr-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  background: var(--bs-body-bg);
  border: 2px dashed #cbd5e1;
  border-radius: var(--px-12);
  min-height: 280px;
}

.cpn-qr-icon {
  color: #cbd5e1;
  margin-bottom: 16px;
}

.cpn-qr-text {
  font-size: var(--px-16);
  color: #64748b;
  font-weight: 500;
}

.cpn-info-display {
  margin-bottom: 20px;
  animation: cpnFadeIn 0.3s ease;
}

@keyframes cpnFadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.cpn-info-card {
  background: #f0fdf4;
  border: 1px solid #86efac;
  border-radius: var(--px-12);
  padding: 16px;
}

.cpn-success-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #22c55e;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.cpn-success-icon svg {
  stroke: #fff;
}

.cpn-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #dcfce7;
}

.cpn-info-row:last-child {
  border-bottom: none;
}

.cpn-info-label {
  font-size: var(--px-16);
  font-weight: 500;
  color: #166534;
}

.cpn-info-value {
  font-size: 15px;
  font-weight: 700;
  color: #15803d;
}

.cpn-info-desc {
  text-align: right;
  max-width: 60%;
  font-weight: 500;
}

/* Summary Grid */
.cpn-summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--px-12);
  margin-bottom: 20px;
  animation: cpnFadeIn 0.3s ease;
}

.cpn-summary-card {
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 10px;
  padding: 16px;
  text-align: center;
}

.cpn-summary-card-highlight {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border-color: #86efac;
}

.cpn-summary-label {
  font: normal normal 500 var(--s-12);
  color: var(--bs-text-muted);
  margin-bottom: var(--px-8);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cpn-summary-value {
  font: normal normal 700 var(--s-18);
  color: var(--bs-text);
}

.cpn-summary-value-large {
  font-size: 24px;
  color: #15803d;
}

/* Footer */
.cpn-footer-section {
  padding: var(--px-16) 0;
  background: #fff;
  border-top: 1px solid var(--bs-border-color);
}

.cpn-footer-section .cpn-apply-btn {
  width: 100%;
  height: auto;
  padding: var(--px-16);
  font: normal normal 700 var(--s-16);
  border-radius: var(--px-12);
  border: none;
  background: #14b8a6;
  color: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cpn-footer-section .cpn-apply-btn:hover:not(:disabled) {
  background: #0d9488;
  transform: translateY(-1px);
  box-shadow: 0 var(--px-4) var(--px-12) rgba(20, 184, 166, 0.3);
}

.cpn-footer-section .cpn-apply-btn:disabled {
  background: #e2e8f0;
  color: #94a3b8;
  cursor: not-allowed;
}

/* Scan QR Panel */
.cpn-qr-scan-area {
  position: relative;
  border: 2px dashed var(--bs-border-color);
  border-radius: var(--px-16);
  padding: var(--px-32);
  text-align: center;
  margin-bottom: var(--px-20);
  cursor: pointer;
  transition: all 0.3s ease;
  background: white;
}

.cpn-qr-scan-area .icon-scan {
  color: rgb(13 148 136 / 1);
}

.cpn-qr-scan-area:hover {
  border-color: #14b8a6;
  background: rgba(20, 184, 166, 0.05);
}

.cpn-qr-scan-area.cpn-qr-scanning {
  border-color: #14b8a6;
  background: rgba(20, 184, 166, 0.1);
  animation: cpnQrPulse 1.5s ease-in-out infinite;
}

@keyframes cpnQrPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.02);
    opacity: 0.95;
  }
}

.cpn-qr-frame {
  width: 64px;
  height: 64px;
  background: #fff;
  border-radius: var(--px-16);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--px-12);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.cpn-qr-icon {
  color: #14b8a6;
}

.cpn-qr-scanning .cpn-qr-icon {
  animation: cpnQrIconSpin 2s linear infinite;
}

@keyframes cpnQrIconSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.cpn-qr-title {
  font: normal normal 600 var(--s-14);
  color: var(--bs-text);
  margin-bottom: var(--px-4);
}

.cpn-qr-subtitle {
  font-size: var(--px-12);
  color: #94a3b8;
  margin-top: var(--px-4);
}

/* ===== REFUND AMOUNT MODAL ===== */
.rfm-swal-title {
  text-align: center !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--bs-text) !important;
  padding-bottom: var(--px-4) !important;
}

.rfm-swal-body {
  margin: 0 !important;
  padding: 0 !important;
}

.rfm-wrap {
  display: flex;
  gap: var(--px-16);
  padding: var(--px-12) 0 var(--px-4);
}

.rfm-quick {
  display: flex;
  flex-direction: column;
  gap: var(--px-8);
  min-width: 72px;
}

.rfm-quick-label {
  font: normal normal 700 var(--s-10);
  color: #94a3b8;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.rfm-quick-btn {
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--px-8);
  padding: var(--px-8) var(--px-4);
  font: normal normal 600 var(--s-13);
  color: var(--bs-text);
  cursor: pointer;
  text-align: center;
  transition:
    background 0.15s,
    border-color 0.15s;
}

.rfm-quick-btn:hover {
  background: #e2e8f0;
  border-color: #cbd5e1;
}

.rfm-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rfm-display {
  background: var(--bs-body-bg);
  border: 1.5px solid var(--bs-border-color);
  border-radius: var(--px-12);
  padding: var(--px-16) 16px;
  text-align: center;
}

.rfm-display-label {
  font: normal normal 700 var(--s-10);
  color: var(--bs-text-muted);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: var(--px-8);
}

.rfm-display-amount {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 3px;
}

.rfm-currency {
  font: normal normal 700 var(--s-22);
  color: var(--bs-main);
  line-height: 1;
}

#rfm-amount-display {
  font: normal normal 700 var(--s-42);
  color: var(--bs-main);
  line-height: 1;
  transition: color 0.2s;
}

.rfm-numpad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--px-8);
}

.rfm-num-btn {
  background: #fff;
  border: 1px solid var(--bs-border-color);
  border-radius: 10px;
  padding: 13px;
  font-size: 18px;
  font-weight: 500;
  color: var(--bs-text);
  cursor: pointer;
  transition:
    background 0.12s,
    border-color 0.12s;
  text-align: center;
}

.rfm-num-btn:hover {
  background: var(--bs-body-bg);
  border-color: #cbd5e1;
}

.rfm-num-btn:active {
  background: #e2e8f0;
}

.rfm-clear {
  color: #ef4444 !important;
  font-weight: 700 !important;
}

.rfm-footer {
  display: flex;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid #f1f5f9;
  margin: var(--px-12) -24px 0;
}

.rfm-cancel-btn {
  flex: 1;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  padding: var(--px-12);
  font-size: var(--px-16);
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  transition: background 0.15s;
}

.rfm-cancel-btn:hover {
  background: #f8fafc;
}

.rfm-confirm-btn {
  flex: 1;
  background: var(--bs-main-hover);
  border: none;
  border-radius: 10px;
  padding: var(--px-12);
  font-size: var(--px-16);
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  letter-spacing: 0.5px;
  transition: background 0.15s;
}

.rfm-confirm-btn:hover {
  background: var(--bs-main-hover);
}

/* ===== END REFUND AMOUNT MODAL ===== */

/* ===== TIP AMOUNT MODAL ===== */
.tfm-swal-title {
  display: none !important;
}

.tfm-swal-body {
  margin: 0 !important;
  padding: 0 !important;
}

.tfm-wrap {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 18px;
  align-items: stretch;
  padding: 6px 0 18px;
}

.tfm-choose {
  border-right: 1px solid var(--bs-border-color);
  padding-right: var(--px-16);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tfm-choose-title {
  font-size: var(--px-12);
  font-weight: 700;
  letter-spacing: 1px;
  color: #64748b;
  margin-bottom: 2px;
}

.tfm-choose-btn {
  width: 100%;
  height: 46px;
  border-radius: var(--px-4);
  border: 1px solid var(--bs-border-color);
  background: #ffffff;
  font-size: 22px;
  font-weight: 700;
  color: var(--bs-text);
  cursor: pointer;
}

.tfm-choose-btn:hover {
  background: var(--bs-body-bg);
}

.tfm-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.tfm-header {
  text-align: center;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #f59e0b;
  margin: 2px 0 var(--px-12);
}

.tfm-numpad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--px-16);
  padding: 0 var(--px-8) var(--px-16);
}

.tfm-key {
  height: 64px;
  border-radius: 999px;
  border: 2px solid var(--bs-border-color);
  background: #ffffff;
  font-size: 26px;
  font-weight: 800;
  color: var(--bs-text);
  cursor: pointer;
}

.tfm-key:hover {
  background: var(--bs-body-bg);
}

.tfm-key:active {
  background: #eef2f7;
}

.tfm-clear {
  font-size: 22px;
  color: #ef4444;
}

.tfm-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--px-12);
  padding: 0 var(--px-8) 6px;
}

.tfm-cancel,
.tfm-confirm {
  height: 48px;
  border-radius: var(--px-4);
  border: none;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.5px;
  cursor: pointer;
}

.tfm-cancel {
  background: #e5e7eb;
  color: #ffffff;
}

.tfm-confirm {
  background: var(--bs-main);
  color: #ffffff;
}

.tfm-cancel:hover,
.tfm-confirm:hover {
  filter: brightness(0.98);
}

/* hidden but kept for live updates / debugging */
.tfm-hidden-display {
  height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 640px) {
  .tfm-wrap {
    grid-template-columns: 150px 1fr;
    gap: var(--px-12);
  }

  .tfm-key {
    height: 58px;
    font-size: 24px;
  }
}

/* ===== END TIP AMOUNT MODAL ===== */

/* Responsive */
@media (max-width: 640px) {
  .cpn-content-padding {
    padding: 16px;
  }

  .cpn-code-input {
    font-size: 18px;
    padding: 16px;
  }

  .cpn-summary-grid {
    grid-template-columns: 1fr;
  }

  .cpn-qr-scan-area {
    padding: 24px 16px;
  }

  .cpn-qr-frame {
    width: 56px;
    height: 56px;
  }

  .cpn-qr-icon {
    width: 64px;
    height: 64px;
  }
}



/* ==================== QUICK SALE MODAL - PHONE LAYOUT ====================
   Breakpoint is 767.98px to line up with CustomQuickSale.updateContainerVisibility,
   which swaps .qs-pos-container for .pos-container-mobile at innerWidth < 768. A plain
   `max-width: 768px` would leave the two disagreeing on exactly 768px.

   Two things about the surrounding CSS are worth knowing before editing this block:
   - --s-* are `font` shorthands (size/line-height/family), not sizes. They go in
     `font:`, never `font-size:`.
   - site.css sets `button { height: var(--px-40) }` globally, so every control in
     this header is a hard 35px. `min-height` on them does nothing; only `height`
     moves them.
   ======================================================================== */
@media (max-width: 767.98px) {
  /* ---- Drawer fills the phone ----
     .quicksale-modal-content is capped at --custom-width (60vw), which on a 390px
     phone is 234px. .mobile-modal already overrides max-width, but the drawer also
     keeps the desktop rounded corner and side shadow, and 100vh leaves the footer
     under the browser toolbar on iOS. dvh tracks the toolbar; vh stays as fallback. */
  #quickSaleModal .quicksale-modal-content {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
    box-shadow: none;
  }

  /* ---- Desktop-only floating controls ----
     Both sit outside the drawer and are positioned from --custom-width, so against a
     full-width drawer they land on top of the header. JS does try to hide them, but
     `#quickSaleModal.show .quicksale-expand-btn` (0,2,1) outranks `.dis-none`, and
     QuickSale.resetCheckoutFooterToServices() strips `dis-none` again on every open.
     Settle it in CSS so no call site can bring them back. */
  #quickSaleModal .quicksale-expand-btn,
  #quickSaleModal.show .quicksale-expand-btn,
  #quickSaleModal .quicksale-close-outside-btn,
  #quickSaleModal.show .quicksale-close-outside-btn {
    display: none !important;
  }

  /* ---- Header ----
     Four stacked rows ate 237px of an 800px screen before a single service showed.
     The row heights themselves are left alone: they are tap targets, and 35px is
     already the floor worth keeping on a touch screen. Only the padding, the gaps
     and the horizontal padding of the pills come down. */
  .mobile-modal .modal-header {
    padding: var(--px-8) var(--px-12);
    padding-top: calc(var(--px-8) + env(safe-area-inset-top, 0px));
    gap: var(--px-4);
  }

  .mobile-modal .header-top h2 {
    font: normal normal 500 var(--s-16);
  }

  /* Narrower pills so "Gift cards" stops wrapping to a second line at 320px. */
  .mobile-modal .btn-primary,
  .mobile-modal .btn-secondary,
  .mobile-modal .tab-active,
  .mobile-modal .tab-inactive {
    padding-left: var(--px-12);
    padding-right: var(--px-12);
    white-space: nowrap;
  }

  .mobile-modal .search-filter,
  .pos-container-mobile .search-filter {
    gap: var(--px-8);
  }

  /* Reinforce the base undo of client.css `.search-wrap` chrome on phone.
     !important is needed: client.css max-width:480px re-applies height/padding. */
  .mobile-modal .search-filter .search-wrap,
  .pos-container-mobile .search-filter .search-wrap {
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    height: auto !important;
    padding: 0 !important;
    width: 100% !important;
    order: 0 !important;
  }

  /* Match the pills and buttons around it - site.css pins those to var(--px-40)
     through the bare `button` selector, which an input never picks up.
     Keep left padding 40px so the absolute magnifier never covers the placeholder. */
  .mobile-modal .search-filter .search-wrap .search-input,
  .mobile-modal .search-filter .search-wrap input,
  .pos-container-mobile .search-filter .search-wrap .search-input,
  .pos-container-mobile .search-filter .search-wrap input {
    height: var(--px-44) !important;
    min-height: var(--px-44) !important;
    line-height: var(--px-44) !important;
    padding: 0 12px 0 40px !important;
  }

  /* Category chips scroll sideways; snap so a swipe lands on a whole chip. */
  .mobile-modal .filter-tags,
  .mobile-modal .category-nav {
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .mobile-modal .filter-tags > *,
  .mobile-modal .category-nav > * {
    scroll-snap-align: start;
  }

  /* ---- Item grid ----
     Two columns roughly halves the scrolling: 8 services fit in 4 rows instead of 8.
     `grid-auto-rows: max-content` is the important half. The tracks were resolving to
     a uniform height that ignored the cards content, so a service whose name wrapped
     to two lines pushed its price out through the bottom border and onto the card
     below - visible at 320-375px, where names wrap most. */
  .mobile-modal .services-grid,
  .mobile-modal .products-grid,
  .mobile-modal .giftcards-grid,
  .pos-container-mobile .services-grid,
  .pos-container-mobile .products-grid,
  .pos-container-mobile .giftcards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: max-content;
    /* quickSale.css @media (max-width:768px) sets margin:12px on these grids.
       Combined with width:100% that adds 24px past the viewport, so the right
       column hangs off the screen. Padding keeps the gutter inside the box. */
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: var(--px-12);
    padding-bottom: calc(var(--px-100) + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    overflow-x: hidden;
  }

  .mobile-modal .products-grid.is-empty,
  .pos-container-mobile .products-grid.is-empty {
    display: flex;
    grid-template-columns: none;
    grid-auto-rows: auto;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
  }

  .mobile-modal .services-grid .service-card,
  .mobile-modal .products-grid .service-card,
  .mobile-modal .giftcards-grid .service-card,
  .pos-container-mobile .services-grid .service-card,
  .pos-container-mobile .products-grid .service-card,
  .pos-container-mobile .giftcards-grid .service-card,
  .mobile-modal .products-grid .product-card,
  .pos-container-mobile .products-grid .product-card {
    height: auto;
    min-height: 0;
    min-width: 0;
    max-width: 100%;
    justify-content: flex-start;
    gap: var(--px-4);
    box-sizing: border-box;
  }

  /* max-width:140px was sized for the desktop 4-up grid and truncates early in a
     two-up phone column. */
  .mobile-modal .service-card .service-name,
  .pos-container-mobile .service-card .service-name {
    max-width: none;
  }

  /* Mockup: name + duration stacked top-left; ellipsis/addon top-right; price
     left + pill stepper right. site.css sets `button { height: 40px }`, so
     these controls must set height explicitly. */
  .mobile-modal .services-grid .service-card,
  .pos-container-mobile .services-grid .service-card,
  .mobile-modal .products-grid .product-card,
  .pos-container-mobile .products-grid .product-card {
    padding: var(--px-10) var(--px-12) var(--px-10) var(--px-10);
    gap: var(--px-8);
    justify-content: space-between;
    height: 100%;
  }

  .mobile-modal .service-card .card-header,
  .pos-container-mobile .service-card .card-header {
    align-items: flex-start;
    padding: 0;
    gap: var(--px-6);
    flex: 0 0 auto;
  }

  .mobile-modal .service-card .card-header-main,
  .pos-container-mobile .service-card .card-header-main {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: var(--px-4);
  }

  .mobile-modal .service-card .card-header-main .service-name,
  .pos-container-mobile .service-card .card-header-main .service-name {
    max-width: none;
    align-self: stretch;
    line-height: 1.4;
    min-height: calc(1.4em * 2);
  }

  .mobile-modal .service-card .card-header-main .duration,
  .pos-container-mobile .service-card .card-header-main .duration {
    gap: var(--px-4);
    font: normal normal 500 var(--s-11);
  }

  .mobile-modal .service-card .card-header-main .clock-icon svg,
  .pos-container-mobile .service-card .card-header-main .clock-icon svg {
    width: 12px;
    height: 12px;
    display: block;
  }

  .mobile-modal .service-card .card-header-actions,
  .pos-container-mobile .service-card .card-header-actions {
    display: flex;
    align-items: center;
    gap: var(--px-4);
    flex-shrink: 0;
    margin-left: auto;
  }

  .mobile-modal .service-card .add-btn,
  .pos-container-mobile .service-card .add-btn {
    position: static;
    right: auto;
    bottom: auto;
    width: 24px;
    height: 24px;
    font: normal normal 500 var(--s-16);
    line-height: 1;
    background-color: var(--bs-main-100);
    color: var(--bs-main-600);
    transform: none;
  }

  .mobile-modal .service-card .add-btn:hover,
  .pos-container-mobile .service-card .add-btn:hover {
    transform: none;
  }

  .mobile-modal .service-card .card-footer,
  .pos-container-mobile .service-card .card-footer {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--px-8);
    width: 100%;
    margin-top: auto;
    flex-shrink: 0;
    padding: var(--px-8) 0 0;
  }

  .mobile-modal .service-card .card-footer .price,
  .pos-container-mobile .service-card .card-footer .price {
    font: normal normal 700 var(--s-16);
    line-height: 1.2;
    min-width: 0;
    white-space: nowrap;
  }

  .mobile-modal .service-card .svc-qty,
  .pos-container-mobile .service-card .svc-qty {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
    width: auto;
    height: 32px;
    margin-top: 0;
    padding: 2px 2px 2px 4px;
    background: var(--bs-muted-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 999px;
    flex-shrink: 0;
    box-sizing: border-box;
  }

  .mobile-modal .service-card .svc-qty__btn,
  .pos-container-mobile .service-card .svc-qty__btn {
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--bs-text-muted);
    font: normal normal 600 var(--s-16);
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
  }

  .mobile-modal .service-card .svc-qty__btn--plus,
  .pos-container-mobile .service-card .svc-qty__btn--plus {
    background-color: var(--bs-main-100);
    color: var(--bs-main-600);
  }

  .mobile-modal .service-card.has-qty .svc-qty__btn--plus,
  .pos-container-mobile .service-card.has-qty .svc-qty__btn--plus {
    background-color: var(--bs-main);
    color: #fff;
  }

  .mobile-modal .service-card .svc-qty__btn:active,
  .pos-container-mobile .service-card .svc-qty__btn:active {
    transform: scale(0.94);
  }

  .mobile-modal .service-card .svc-qty__btn:disabled,
  .pos-container-mobile .service-card .svc-qty__btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    transform: none;
  }

  .mobile-modal .service-card .svc-qty__count,
  .pos-container-mobile .service-card .svc-qty__count {
    min-width: 1.1em;
    padding: 0 4px;
    text-align: center;
    font: normal normal 600 var(--s-13);
    color: var(--bs-heading-color);
    line-height: 1;
    user-select: none;
  }

  .mobile-modal .service-card .svc-qty__btn,
  .pos-container-mobile .service-card .svc-qty__btn,
  .mobile-modal .service-card .add-btn,
  .pos-container-mobile .service-card .add-btn {
    touch-action: manipulation;
  }

  .mobile-modal .service-card:has(.svc-qty:active),
  .pos-container-mobile .service-card:has(.svc-qty:active),
  .mobile-modal .service-card:has(.add-btn:active),
  .pos-container-mobile .service-card:has(.add-btn:active) {
    transform: none;
  }

  /* ---- Cart sheet ----
     .cart-sidebar carries `max-width: var(--px-420)`, so at 390px the sheet stopped
     ~20px short of the right edge.
     The 768px rule in quickSale.css also makes EVERY .cart-sidebar `position:fixed;
     height:100vh`. 100vh on iOS includes the Safari toolbar, so Continue was
     painted behind it and clipped by this overlay's overflow:hidden. Keep the
     sheet in normal flow inside the overlay and size to the dynamic viewport. */
  .cart-modal-overlay,
  .cart-modal {
    height: 100%;
    height: 100dvh;
    max-height: 100dvh;
  }

  .cart-modal {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .cart-modal .cart-sidebar {
    position: relative;
    inset: auto;
    max-width: none;
    width: 100%;
    flex: 1 1 0;
    min-height: 0;
    height: auto;
    max-height: none;
    transform: none;
    z-index: auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: none;
    border-left: none;
    border-radius: 0;
  }

  .cart-modal .client-header {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
  }

  .cart-modal .cart-items {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    padding-bottom: var(--px-16);
    margin-bottom: 0;
  }

  .cart-modal .empty-cart {
    height: auto;
    min-height: 100%;
    flex-shrink: 0;
  }

  .cart-modal .empty-icon {
    flex-shrink: 0;
  }

  .cart-modal .cart-footer {
    flex: 0 0 auto;
    padding-bottom: calc(var(--px-16) + env(safe-area-inset-bottom, 0px));
  }

  /* Bounce-in starts at opacity:0 with an 800ms delay — on a rebuilt sheet that
     left Continue invisible until the animation finished, and clipped if the
     footer was already off-screen. */
  .cart-modal .cart-footer .continue-btn,
  .cart-modal .cart-footer .checkout-btn {
    width: 100%;
    animation: none;
    opacity: 1;
    transform: none;
    flex-shrink: 0;
  }

  .pos-container-mobile .qs-cart-fab {
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }
}

/* ---- Very narrow phones (iPhone SE and down) ----
   Two columns leave ~140px per card. Names still fit inside the 2-line clamp, but
   only just; one column keeps the service name readable, which matters more than
   density when picking the wrong service means a mis-rung ticket. */
@media (max-width: 359.98px) {
  .mobile-modal .services-grid,
  .mobile-modal .products-grid,
  .mobile-modal .giftcards-grid,
  .pos-container-mobile .services-grid,
  .pos-container-mobile .products-grid,
  .pos-container-mobile .giftcards-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- Short viewports: landscape phones, split-screen ----
   The portrait header is 206px. Against a 360px-tall landscape phone that left 157px
   of list - barely one row. Shrink the controls (via height, see the note at the top)
   and fold the search field and the category chips onto one line. */
@media (max-width: 926px) and (max-height: 560px) {
  .mobile-modal .modal-header {
    padding: var(--px-4) var(--px-12);
    padding-top: calc(var(--px-4) + env(safe-area-inset-top, 0px));
  }

  .mobile-modal .header-top h2 {
    font: normal normal 500 var(--s-14);
  }

  .mobile-modal .btn-icon,
  .mobile-modal .btn-primary,
  .mobile-modal .btn-secondary,
  .mobile-modal .tab-active,
  .mobile-modal .tab-inactive {
    height: var(--px-32);
    min-height: 0;
  }

  .mobile-modal .search-filter,
  .pos-container-mobile .search-filter {
    flex-direction: row;
    align-items: flex-start;
  }

  .mobile-modal .filter-tags,
  .pos-container-mobile .filter-tags {
    max-height: 96px;
    align-self: flex-start;
  }

  .mobile-modal .search-filter .search-wrap,
  .pos-container-mobile .search-filter .search-wrap {
    flex: 0 0 38%;
  }

  .mobile-modal .search-filter .search-wrap .search-input,
  .mobile-modal .search-filter .search-wrap input,
  .pos-container-mobile .search-filter .search-wrap .search-input,
  .pos-container-mobile .search-filter .search-wrap input {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .mobile-modal .filter-tags {
    flex: 1 1 auto;
    min-width: 0;
  }
}

@media (max-width: 926px) and (max-height: 560px) and (orientation: landscape) {
  .mobile-modal .services-grid,
  .mobile-modal .products-grid,
  .mobile-modal .giftcards-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ==================== QUICK SALE HEADER - NARROW DRAWER ====================
   Desktop catalog search lives in `.qs-catalog-search` above categories now, so
   the header only carries tabs / Opened By / actions. Below 1280px wrap: tabs
   full width, then Opened By + actions on one row.
   ======================================================================== */

/* Below 1280px: tabs on their own row; ticket owner + actions share the next. */
@media (max-width: 1279.98px) {
  .header-top-bar {
    flex-wrap: wrap;
  }

  .header-top-bar .top-tabs {
    order: 1;
    flex: 1 1 100%;
    min-width: 0;
  }

  /* flex-basis 0 + min-width 0 lets the chip give way so Check-in / Print stay
     on this row instead of wrapping under it. */
  .header-top-bar .open-by-ticket {
    order: 2;
    flex: 1 1 0;
    min-width: 0;
    margin-right: 0;
    overflow: hidden;
  }

  .header-top-bar .btn-list-actions {
    order: 3;
    flex: 0 0 auto;
    margin-left: 0;
    flex-wrap: nowrap;
    gap: var(--px-6);
  }

  .header-top-bar .btn-list-actions .checkin-btn,
  .header-top-bar .btn-list-actions .start-btn,
  .header-top-bar .btn-list-actions .combine-btn,
  .header-top-bar .btn-list-actions .done-btn {
    padding-left: var(--px-10);
    padding-right: var(--px-10);
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Combine + Delete get their own full-width row at the bottom of the header.
     The action list is flattened into the header's flex flow so that row can span
     the whole header instead of only the action cluster's width. */
  .header-top-bar .btn-list-actions:has(> .qs-ticket-manage-actions > :not(.dis-none)) {
    display: contents;
  }

  .header-top-bar .btn-list-actions:has(> .qs-ticket-manage-actions > :not(.dis-none)) > * {
    order: 3;
  }

  .header-top-bar .btn-list-actions > .qs-ticket-manage-actions:has(> :not(.dis-none)) {
    order: 4;
    display: flex;
    flex: 1 1 100%;
    gap: var(--px-8);
  }

  .header-top-bar .qs-ticket-manage-actions > .combine-btn {
    flex: 1 1 0;
    justify-content: center;
  }
}

/* Desktop: the Combine / Delete wrapper is layout-neutral, the buttons sit inline
   with the other actions. */
.qs-ticket-manage-actions {
  display: contents;
}

@media (min-width: 768px) {
  .qs-pos-container .header-top-bar {
    position: relative;
    z-index: 10;
    padding: var(--px-8) var(--px-6);
  }

  .qs-pos-container .btn-list-actions {
    gap: 4px;
  }

  .qs-pos-container .header-top-bar .btn-list-actions:has(> .qs-ticket-manage-actions > :not(.dis-none)) {
    display: flex;
  }

  .qs-pos-container .header-top-bar .btn-list-actions > .qs-ticket-manage-actions:has(> :not(.dis-none)) {
    display: contents;
  }

  .qs-pos-container .header-top-bar .open-by-ticket__label {
    white-space: nowrap;
  }

  .qs-pos-container .btn-list-actions .qs-header-icon-action {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 22px 16px;
    align-items: center;
    justify-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 80px;
    height: 44px;
    min-height: 44px;
    box-sizing: border-box;
    padding: 3px 2px;
    gap: 0;
    overflow: visible;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--bs-text-muted);
    box-shadow: none;
    transform: none;
    animation: none;
    letter-spacing: 0;
    transition: background-color 180ms ease, color 180ms ease;
  }

  .qs-pos-container .btn-list-actions .qs-header-icon-action.dis-none {
    display: none;
  }

  .qs-pos-container .btn-list-actions .qs-header-icon-action > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    font-size: 20px;
    font-weight: 400;
    color: inherit;
    line-height: 22px;
    flex-shrink: 0;
  }

  .qs-pos-container .btn-list-actions .qs-header-icon-action[data-purpose="delete-action"] > i {
    color: #dc2626;
  }

  .qs-pos-container .btn-list-actions .qs-header-icon-action[data-purpose="start-action"] > i {
    color: var(--bs-main);
  }

  /* The previous Open Ticket outline uses !important in quickSale.css. */
  .qs-pos-container .btn-list-actions .qs-header-icon-action.print {
    background: transparent !important;
    border: 0 !important;
    color: var(--bs-text-muted) !important;
  }

  .qs-pos-container .btn-list-actions .qs-header-icon-action:hover {
    background: var(--bs-muted-bg);
    box-shadow: none;
    transform: none;
  }

  .qs-pos-container .btn-list-actions .qs-header-icon-action.print:hover {
    background: var(--bs-muted-bg) !important;
  }

  .qs-pos-container .btn-list-actions .qs-header-icon-action[aria-expanded="true"] {
    color: var(--bs-main-700) !important;
  }

  .qs-pos-container .btn-list-actions .qs-header-action-label {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    width: 100%;
    height: 16px;
    min-width: 0;
    overflow: hidden;
    font-size: 12px;
    font-weight: 600;
    line-height: 12px;
    text-align: center;
    white-space: nowrap;
    overflow-wrap: anywhere;
    letter-spacing: 0;
    transition: color 180ms ease;
    align-content: center;
  }

  .qs-pos-container .btn-list-actions .qs-header-icon-action::before,
  .qs-pos-container .btn-list-actions .qs-header-icon-action::after {
    content: none;
    display: none;
  }

  .qs-pos-container .btn-list-actions .qs-header-icon-action:focus-visible {
    outline: 2px solid var(--bs-main);
    outline-offset: 2px;
  }
}

@media (max-width: 767.98px) {
  #quickSaleModal .qs-print-more-btn .qs-header-action-label {
    display: none;
  }
}

.combine-btn.delete-ticket-btn {
  background: #ffffff;
  color: #dc2626;
  border: 1px solid #dc2626;
  box-shadow: 0 2px var(--px-8) rgba(220, 38, 38, 0.15);
}

.combine-btn.delete-ticket-btn:hover {
  background: #fef2f2;
  box-shadow: 0 4px var(--px-12) rgba(220, 38, 38, 0.25);
}

/* Phone layout (.pos-container-mobile): Combine / Delete row under Check-in / Print. */
.mobile-modal .header-actions-mobile--manage {
  margin-top: var(--px-8);
}

.mobile-modal .header-actions-mobile--manage.dis-none {
  display: none;
}

.mobile-modal .header-actions-mobile--manage .btn-secondary {
  flex: 1 1 auto;
  min-width: 0;
  padding-left: var(--px-4);
  padding-right: var(--px-4);
}

.mobile-modal .btn-secondary.btn-danger-outline {
  color: #dc2626;
  border-color: #dc2626;
}

.mobile-modal .btn-secondary.btn-danger-outline:hover {
  background: #fef2f2;
}

/* Combine picker on a phone runs in the desktop container (see
   updateContainerVisibility) — give the ticket grid the full width. */
@media (max-width: 767.98px) {
  .qs-pos-container.qs-combine-mode > .main-content > .cart-sidebar {
    display: none;
  }
}

/* ==================== CATEGORY STRIP PADDING ====================
   The next/prev chevrons were position:absolute over the track. padding-right on
   an overflow-x scroller only shows up at the end of the scroll, so the last
   visible chip (Acrylic Nails) sat under the >. Keep the buttons in the flex
   row so sidebar-content never runs under them, and give the track real padding.
   ======================================================================== */
#quickSaleModal .qs-pos-container .sidebar {
  min-width: 0;
  flex-shrink: 0;
  overflow: hidden;
  gap: var(--px-8);
  padding: var(--px-8) var(--px-12);
}

/* The banner and categories keep their height; only the service viewport shrinks. */
#quickSaleModal .qs-pos-container .main-list-services > #selected-staff-banner-container {
  flex-shrink: 0;
}

#quickSaleModal .qs-pos-container .main-list-services > .tab-content-wrapper {
  flex: 1 1 0;
  min-height: 0;
  height: auto;
}

#quickSaleModal .qs-pos-container .sidebar-content {
  padding: var(--px-4) var(--px-4);
  gap: var(--px-12);
}

#quickSaleModal .qs-pos-container .sidebar.qs-cat-has-prev .sidebar-content,
#quickSaleModal .qs-pos-container .sidebar.qs-cat-has-next .sidebar-content {
  padding-left: var(--px-4);
  padding-right: var(--px-4);
}

#quickSaleModal .qs-pos-container .sidebar > button.btn-scroll-form {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  transform: none;
  margin: 0;
  flex-shrink: 0;
  z-index: 1;
}

#quickSaleModal .qs-pos-container .sidebar > button.btn-scroll-form.btn-next {
  right: auto;
  left: auto;
}

/* ==================== SMALL DESKTOP DRAWER (768–1599) ====================
   Phone layout only swaps in below 768. From 768 up this is still .qs-pos-container
   with a 60vw drawer and a 360–420px cart, so the catalog column collapses:
   category chips clip under the cart, services-grid auto-fit falls to one column.
   Widen the drawer via --qs-drawer-collapsed (JS sets --custom-width to that var)
   and shrink the cart so the catalog keeps a usable track. Leave ≥12vw on the
   left so the outside Close / Expand buttons still sit on the calendar.
   ======================================================================== */

@media (max-width: 1599.98px) {
  :root {
    --qs-drawer-collapsed: 78vw;
  }

  #quickSaleModal .qs-pos-container > .main-content > .main-list-services,
  #quickSaleModal .qs-pos-container > .main-content > .main-payment {
    min-width: 0;
  }

  #quickSaleModal .qs-pos-container > .main-content > .cart-sidebar {
    flex: 0 1 340px;
    width: auto;
    max-width: min(360px, 38%);
    min-width: 280px;
  }
}

@media (max-width: 1439.98px) {
  :root {
    --qs-drawer-collapsed: 82vw;
  }
}

@media (max-width: 1279.98px) {
  :root {
    --qs-drawer-collapsed: 88vw;
  }

  #quickSaleModal .qs-pos-container > .main-content > .cart-sidebar {
    flex: 0 1 300px;
    max-width: min(320px, 36%);
    min-width: 260px;
  }

  #quickSaleModal .qs-pos-container .services-grid,
  #quickSaleModal .qs-pos-container .products-grid {
    grid-template-columns: repeat(auto-fill, minmax(156px, 1fr));
  }

  #quickSaleModal .qs-pos-container .giftcards-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }

  #quickSaleModal .qs-pos-container .sidebar-content > .category-btn,
  #quickSaleModal .qs-pos-container .sidebar-content > .open_item {
    min-width: 100px;
    min-height: 64px;
    padding: 6px 10px;
    gap: 6px;
  }

  #quickSaleModal .qs-pos-container .tab-content {
    padding: var(--px-12) var(--px-16);
  }

  #quickSaleModal .qs-pos-container .main-content > .cart-sidebar .qs-assigned-staff-label {
    white-space: normal;
    line-height: 1.25;
  }
}

@media (max-width: 1099.98px) {
  :root {
    --qs-drawer-collapsed: 90vw;
  }

  #quickSaleModal .qs-pos-container > .main-content > .cart-sidebar {
    flex: 0 1 280px;
    max-width: min(300px, 34%);
    min-width: 244px;
  }

  #quickSaleModal .qs-pos-container .sidebar-content {
    max-height: 84px;
  }

  .header-top-bar .tab-btn-sale {
    padding-left: var(--px-12);
    padding-right: var(--px-12);
  }

  .header-top-bar .open-by-ticket__label {
    display: none;
  }
}

@media (max-width: 899.98px) {
  :root {
    --qs-drawer-collapsed: 92vw;
  }

  #quickSaleModal .qs-pos-container > .main-content > .cart-sidebar {
    flex: 0 0 240px;
    max-width: 240px;
    min-width: 220px;
  }

  #quickSaleModal .qs-pos-container .services-grid,
  #quickSaleModal .qs-pos-container .products-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }
}

@media (max-width: 419.98px) {
  .header-top-bar .open-by-ticket {
    padding: var(--px-6) var(--px-8);
    gap: var(--px-6);
  }

  .header-top-bar .open-by-ticket__label {
    display: none;
  }

  .header-top-bar .open-by-ticket__avatar {
    width: var(--px-28);
    height: var(--px-28);
  }

  .header-top-bar .qs-print-more-btn {
    width: 36px;
    height: 36px;
  }
}

/* ==================== CART FAB - ITEM COUNT ====================
   On phones the cart lives behind this floating button, so adding a service gave
   no visible feedback at all. The badge is hidden at zero rather than showing "0".
   ============================================================== */
.pos-container-mobile .qs-cart-fab {
  position: fixed;
  overflow: visible;
}

.pos-container-mobile .qs-cart-fab__badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: var(--px-22);
  height: var(--px-22);
  padding: 0 5px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font: normal normal 700 var(--s-12);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bs-surface-bg);
  box-sizing: border-box;
  pointer-events: none;
}

/* One-shot pop so a tap on a service registers even when the count goes 1 -> 2. */
.pos-container-mobile .qs-cart-fab__badge.is-bumped {
  animation: qs-cart-badge-bump 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes qs-cart-badge-bump {
  0% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.35);
  }
  100% {
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pos-container-mobile .qs-cart-fab__badge.is-bumped {
    animation: none;
  }
}

/* ==================== PRINT OPTIONS MENU ====================
   Redesign of .qs-print-more-menu. Loaded after quickSale.css, so these override the
   base rules there at equal specificity.

   Two problems with the original: every row used one of two glyphs (three
   fa-arrows-rotate, two fa-print), so the icons carried no information and the eye
   had to read all six labels; and the panel hardcoded #ffffff, which is wrong under
   body[data-theme="dark"] where --bs-text goes light.

   Each row now has its own glyph (see _QuickSale.cshtml) sitting in a tinted chip,
   with the tint keyed to what the action does: blue/violet for the two data-reload
   actions, green/amber for the two that move money, slate for the two that print.
   Tints are literal rgba rather than color-mix on --bs-main-50, because that
   variable is defined once on :root and does not flip with the theme - a 12% wash of
   a saturated hue reads correctly on both #ffffff and #151a20.
   ========================================================== */

.qs-print-more-btn {
  border-color: var(--bs-border-color);
  background: var(--bs-surface-bg);
  color: var(--bs-text-muted);
}

.qs-print-more-btn:hover {
  border-color: var(--bs-main-hover);
  background: var(--bs-muted-bg);
  color: var(--bs-main);
  box-shadow: var(--bs-shadow-sm);
}

.qs-print-more-btn[aria-expanded="true"] {
  border-color: var(--bs-main);
  background: var(--bs-main);
  color: #ffffff;
}

.qs-print-more-menu {
  min-width: var(--px-240);
  padding: var(--px-6);
  background: var(--bs-surface-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--px-14);
  box-shadow: var(--bs-shadow-lg);
  transform-origin: top right;
  animation: qs-print-more-in 140ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes qs-print-more-in {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .qs-print-more-menu {
    animation: none;
  }
}

.qs-print-more-item {
  gap: var(--px-10);
  padding: var(--px-6) var(--px-8);
  border-radius: var(--px-10);
  color: var(--bs-text);
  font: normal normal 500 var(--s-14);
  /* site.css centres every button through a bare `button { justify-content: center }`,
     which left each row floating in the middle of the panel with a ragged left edge.
     A menu reads down a single column of icons. */
  justify-content: flex-start;
}

.qs-print-more-item + .qs-print-more-item {
  margin-top: 2px;
}

/* The last two rows send something to a printer; the four above them change the
   ticket. A hairline keeps that split readable without adding a heading. */
.qs-print-more-item[data-purpose="print-service-record"] {
  margin-top: var(--px-6);
  border-top: 1px solid var(--bs-border-color);
  padding-top: var(--px-10);
}

.qs-print-more-item i {
  width: var(--px-30);
  height: var(--px-30);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: var(--px-10);
  font-size: var(--s-14);
  color: var(--qs-pm-accent, var(--bs-main));
  background: var(--qs-pm-tint, transparent);
  transition:
    transform 0.15s ease,
    background-color 0.15s ease;
}

.qs-print-more-item:hover {
  background: var(--bs-muted-bg);
  color: var(--bs-heading-color);
}

.qs-print-more-item:hover i {
  transform: scale(1.08);
}

.qs-print-more-item:active i {
  transform: scale(0.96);
}

.qs-print-more-item:focus-visible {
  outline: 2px solid var(--qs-pm-accent, var(--bs-main));
  outline-offset: -2px;
}

.qs-print-more-item:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.qs-print-more-item:disabled:hover {
  background: transparent;
}

.qs-print-more-item:disabled:hover i {
  transform: none;
}

/* Reload the ticket from the server */
.qs-print-more-item[data-purpose="print-refresh"] {
  --qs-pm-accent: #2563eb;
  --qs-pm-tint: rgba(37, 99, 235, 0.12);
}

.qs-print-more-item[data-purpose="print-refresh-trans"] {
  --qs-pm-accent: #7c3aed;
  --qs-pm-tint: rgba(124, 58, 237, 0.12);
}

/* Money */
.qs-print-more-item[data-purpose="print-cash-discount"] {
  --qs-pm-accent: #059669;
  --qs-pm-tint: rgba(5, 150, 105, 0.14);
}

.qs-print-more-item[data-purpose="print-bonus-turn"] {
  --qs-pm-accent: #d97706;
  --qs-pm-tint: rgba(217, 119, 6, 0.14);
}

/* Printing */
.qs-print-more-item[data-purpose="print-service-record"] {
  --qs-pm-accent: #0891b2;
  --qs-pm-tint: rgba(8, 145, 178, 0.13);
}

.qs-print-more-item[data-purpose="print-bill"] {
  --qs-pm-accent: #475569;
  --qs-pm-tint: rgba(71, 85, 105, 0.15);
}

.qs-print-more-item[data-purpose="Print-action"] {
  --qs-pm-accent: #2563eb;
  --qs-pm-tint: rgba(37, 99, 235, 0.13);
}

/* The bonus-turn row is a toggle: the label alternates between "Bonus Turn" and
   "Apply Turn". Swap the plus for a check so the glyph does not contradict it.
   \f058 is fa-circle-check; overriding .fa-circle-plus:before (0,1,1) needs this
   selector's extra attribute (0,2,1). */
.qs-print-more-item[data-bonus-turn-mode="apply"] {
  --qs-pm-accent: #0f9d58;
  --qs-pm-tint: rgba(15, 157, 88, 0.14);
}

.qs-print-more-item[data-bonus-turn-mode="apply"] i::before {
  content: "\f058";
}

/* Phones: the menu is anchored to a button near the right edge of a full-width
   drawer, so let it use the width it has and keep the rows finger-sized. */
@media (max-width: 767.98px) {
  .qs-print-more-menu {
    min-width: var(--px-220);
    max-width: calc(100vw - var(--px-24));
  }

  .qs-print-more-item {
    padding: var(--px-8) var(--px-8);
  }
}

/* ==================== SELECTED STAFF BANNER - PHONE ====================
   #selected-staff-banner-container lives inside .main-list-services, which is hidden
   below 768px, so assigning a staff on a phone produced no confirmation anywhere.
   The mobile layout now carries its own slot at the top of the scroll area and
   QuickSale.staffBannerContainer picks between the two.

   The desktop banner reserves a fixed 120px. That is a seventh of an 800px phone
   screen on top of a 206px header, so the mobile copy drops the explanatory line and
   shrinks the avatar - the name is the part that matters.
   ==================================================================== */
@media (max-width: 767.98px) {
  #selected-staff-banner-container-mobile {
    position: relative;
    z-index: 5;
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0 var(--px-12) var(--px-8);
    overflow: visible;
    perspective: none;
    background: var(--bs-surface-bg);
    transition: height 0.3s ease;
  }

  /* No staff assigned: take no room at all rather than leaving a gap above the grid. */
  #selected-staff-banner-container-mobile:empty {
    display: none;
  }

  /* custom.css keeps the banner `position:absolute` inside #quickSaleModal, which
     pulls it out of flow so .services-grid (next sibling, also position:relative)
     paints over Switch Staff / Close. Keep it in-flow on the phone slot. */
  #quickSaleModal #selected-staff-banner-container-mobile #selected-staff-banner,
  #quickSaleModal #selected-staff-banner-container-mobile #selected-staff-banner-old {
    position: relative !important;
    top: auto;
    left: auto;
    right: auto;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: visible;
    box-shadow: none;
    border-bottom-width: 0;
  }

  #selected-staff-banner-container-mobile .selected-staff-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--px-8);
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: var(--px-8) var(--px-12);
    padding-left: var(--px-12);
    padding-right: var(--px-12);
    box-sizing: border-box;
    border: 1px solid var(--bs-border-color);
    border-bottom: 1px solid var(--bs-border-color) !important;
    border-radius: var(--px-20);
    background: var(--bs-surface-bg);
    box-shadow: none;
    overflow: visible;
  }

  #selected-staff-banner-container-mobile .banner-left {
    display: flex;
    align-items: center;
    gap: var(--px-10);
    min-width: 0;
    flex: 1 1 auto;
  }

  #selected-staff-banner-container-mobile .banner-left > div:not(.staff-avatar-select) {
    min-width: 0;
    flex: 1 1 auto;
  }

  #selected-staff-banner-container-mobile .staff-avatar-select {
    width: var(--px-40);
    height: var(--px-40);
    flex: 0 0 var(--px-40);
    border-radius: 50%;
    box-shadow: none;
    overflow: visible;
  }

  /* "Currently Adding Services To" plus its sparkle is a desktop nicety. On a phone
     the banner sits directly above the service grid, so the sentence is redundant. */
  #selected-staff-banner-container-mobile .banner-service-text,
  #selected-staff-banner-container-mobile .banner-sub--role {
    display: none;
  }

  #selected-staff-banner-container-mobile .banner-texts {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    width: 100%;
    margin-top: 0;
  }

  #selected-staff-banner-container-mobile .banner-texts::before {
    display: none;
  }

  #selected-staff-banner-container-mobile .banner-title-row {
    display: flex;
    align-items: center;
    gap: var(--px-6);
    min-width: 0;
    max-width: 100%;
  }

  #selected-staff-banner-container-mobile .banner-title {
    flex: 0 1 auto;
    min-width: 0;
    font: normal normal 700 var(--s-14);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #selected-staff-banner-container-mobile .banner-staff-badge {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    padding: 1px var(--px-8);
    border-radius: 999px;
    background: var(--bs-main-50);
    color: var(--bs-main-700, var(--bs-main));
    font: normal normal 600 var(--s-11);
    line-height: 1.4;
    white-space: nowrap;
  }

  #selected-staff-banner-container-mobile .banner-sub--group {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
    font: normal normal 400 var(--s-12);
    color: var(--bs-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #selected-staff-banner-container-mobile .banner-actions {
    display: flex;
    align-items: center;
    gap: var(--px-4);
    flex: 0 0 auto;
  }

  #selected-staff-banner-container-mobile .switch-staff-btn {
    height: var(--px-32);
    min-height: var(--px-32);
    padding: 0 var(--px-10);
    border-radius: 999px;
    border: 1px solid var(--bs-border-color);
    background: var(--bs-surface-bg);
    color: var(--bs-text);
    font: normal normal 500 var(--s-12);
    white-space: nowrap;
    gap: var(--px-6);
  }

  #selected-staff-banner-container-mobile .switch-staff-btn::before {
    display: none;
  }

  #selected-staff-banner-container-mobile .switch-staff-btn__icon {
    display: block;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    stroke: var(--bs-text-muted);
  }

  #selected-staff-banner-container-mobile .switch-staff-btn:hover {
    background: var(--bs-muted-bg);
    color: var(--bs-text);
  }

  #selected-staff-banner-container-mobile .switch-staff-btn:focus-visible,
  #selected-staff-banner-container-mobile .clear-staff-btn:focus-visible {
    outline: 2px solid var(--bs-main);
    outline-offset: 2px;
  }

  #selected-staff-banner-container-mobile .clear-staff-btn {
    display: none;
  }
}

@media (max-width: 767.98px) {
  .pos-container-mobile:has(#lst-staff:not(.dis-none)) #selected-staff-banner-container-mobile,
  .pos-container-mobile:has(#lst-products:not(.dis-none)) #selected-staff-banner-container-mobile,
  .pos-container-mobile:has(#lst-giftcards:not(.dis-none)) #selected-staff-banner-container-mobile {
    display: none !important;
  }

  .pos-container-mobile .modal-content > #lst-staff:not(.dis-none) {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
  }

  .pos-container-mobile .search-filter .filter-tags.qs-mobile-staff-tools,
  .mobile-modal .search-filter .filter-tags.qs-mobile-staff-tools {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--px-8);
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    overflow: visible;
    flex-wrap: nowrap;
  }

  .pos-container-mobile .qs-mobile-staff-tools .lst-tab-clock-tech,
  .mobile-modal .qs-mobile-staff-tools .lst-tab-clock-tech {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--px-4);
    width: 100%;
    min-height: var(--px-44);
    margin: 0;
    padding: var(--px-4);
    border-bottom: 0;
    background: var(--bs-muted-bg);
    border-radius: var(--px-12);
  }

  .pos-container-mobile .qs-mobile-staff-tools .btn-tab-clock-tech,
  .mobile-modal .qs-mobile-staff-tools .btn-tab-clock-tech {
    flex: 1 1 0;
    min-width: 0;
    height: var(--px-36);
    min-height: var(--px-36);
    padding: 0 var(--px-6);
    border: 0;
    border-radius: var(--px-8);
    font: normal normal 500 var(--s-12);
    opacity: 1;
    color: var(--bs-text-muted);
    background: transparent;
    white-space: nowrap;
  }

  .pos-container-mobile .qs-mobile-staff-tools .btn-tab-clock-tech.active,
  .mobile-modal .qs-mobile-staff-tools .btn-tab-clock-tech.active {
    background: var(--bs-surface-bg);
    color: var(--bs-heading-color);
    font: normal normal 600 var(--s-12);
  }

  /* Nút settings ở cuối track segmented. Nút 36px bằng chiều cao tab; "Card
     size" chỉ áp cho lưới desktop (QuickSale.setStaffScale) nên ẩn ở đây. */
  .pos-container-mobile .qs-mobile-staff-tools .qs-staff-tools,
  .mobile-modal .qs-mobile-staff-tools .qs-staff-tools {
    gap: 0;
    padding-left: var(--px-4);
    border-left: 1px solid var(--bs-border-color);
  }

  .pos-container-mobile .qs-mobile-staff-tools .qs-staff-tools .sc2-icon-btn,
  .mobile-modal .qs-mobile-staff-tools .qs-staff-tools .sc2-icon-btn {
    width: var(--px-36);
    height: var(--px-36);
  }

  .pos-container-mobile .qs-staff-tools .qs-staff-card-size,
  .mobile-modal .qs-staff-tools .qs-staff-card-size {
    display: none;
  }

  .pos-container-mobile .qs-back-to-services,
  .mobile-modal .qs-back-to-services {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--px-6);
    width: 100%;
    height: var(--px-36);
    min-height: var(--px-36);
    padding: 0 var(--px-12);
    border: 0;
    border-radius: var(--px-8);
    background: var(--bs-main);
    color: var(--bs-surface-bg);
    font: normal normal 500 var(--s-13);
    overflow: visible;
  }

  .pos-container-mobile .qs-back-to-services:hover,
  .mobile-modal .qs-back-to-services:hover {
    background: var(--bs-main-hover);
    color: var(--bs-surface-bg);
  }

  .pos-container-mobile .qs-back-to-services:active,
  .mobile-modal .qs-back-to-services:active {
    background: var(--bs-main-hover);
    color: var(--bs-surface-bg);
  }

  .pos-container-mobile .qs-back-to-services::before,
  .mobile-modal .qs-back-to-services::before {
    content: none;
    display: none;
  }

  .pos-container-mobile #lst-staff .lst-tab-clock-tech {
    display: none;
  }


}

/* ==================== PHONE HEADER - SPACING & TABS ====================
   Keep the staff switch beside the title and secondary ticket actions in More.
   Compact spacing gives the catalogue more height while retaining readable controls.
   ====================================================================== */
@media (max-width: 767.98px) {
  .mobile-modal .modal-header {
    padding: 10px 12px;
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
    gap: 8px;
  }

  .mobile-modal .header-top {
    margin-bottom: 0;
    gap: 8px;
  }

  .mobile-modal .header-top h2 {
    font: normal normal 600 var(--s-16);
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .pos-container-mobile .header-top [data-purpose="mobile-close"] {
    border: 2px solid var(--bs-text-muted, #6b7280);
    flex-shrink: 0;
  }

  /* Primary ticket actions remain directly available. */
  .mobile-modal .header-actions-mobile {
    gap: 8px;
  }

  .mobile-modal .btn-primary,
  .mobile-modal .btn-secondary {
    height: 40px;
    border-radius: 8px;
    font: normal normal 600 var(--s-13);
  }

  .mobile-modal .header-actions-mobile .qs-print-more-btn {
    width: 40px;
    min-height: 40px;
  }

  .mobile-modal .header-actions-mobile .qs-print-more-menu {
    width: min(260px, calc(100vw - 24px));
    max-height: calc(100dvh - 116px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .mobile-modal .qs-mobile-ticket-actions {
    display: flex;
    flex-direction: column;
    padding-bottom: 6px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--bs-border-color);
  }

  .mobile-modal .qs-print-more-item {
    min-height: 40px;
  }

  .mobile-modal .qs-print-more-item--danger,
  .mobile-modal .qs-print-more-item--danger i {
    color: var(--bs-red, #dc2626);
  }

  #quickSaleModal .header-top #selected-staff-banner-container-mobile {
    flex: 0 1 156px;
    min-width: 0;
    width: auto;
    max-width: 44%;
    margin-left: auto;
    padding: 0;
  }

  #quickSaleModal #selected-staff-banner-container-mobile .selected-staff-banner {
    display: block;
    padding: 0;
    border: 0 !important;
    background: transparent;
    animation: none;
    transform: none;
  }

  #quickSaleModal #selected-staff-banner-container-mobile .switch-staff-btn {
    display: flex;
    width: 100%;
    height: 36px;
    min-height: 36px;
    gap: 6px;
    padding: 4px 6px 4px 4px;
    background: var(--bs-muted-bg);
  }

  #quickSaleModal #selected-staff-banner-container-mobile .staff-avatar-select {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    font-size: 10px;
    font-weight: 700;
  }

  #selected-staff-banner-container-mobile .staff-chip-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 600;
  }

  /* ---- Catalogue tabs as a segmented control ----
     .category-nav is the track; the buttons lose their individual borders so the
     group reads as one control with the active segment filled. */
  .mobile-modal .category-nav {
    background: var(--bs-muted-bg);
    border-radius: var(--px-12);
    padding: var(--px-4);
    gap: var(--px-4);
    justify-content: stretch;
  }

  .mobile-modal .category-nav .tab-active,
  .mobile-modal .category-nav .tab-inactive {
    flex: 1 1 0;
    height: var(--px-36);
    border: 0;
    border-radius: var(--px-8);
    justify-content: center;
    gap: var(--px-6);
    font: normal normal 500 var(--s-13);
    padding-left: var(--px-8);
    padding-right: var(--px-8);
  }

  .mobile-modal .category-nav .tab-inactive {
    background: transparent;
    color: var(--bs-text-muted);
  }

  .mobile-modal .category-nav .tab-inactive:hover {
    background: var(--bs-surface-bg);
    color: var(--bs-text);
  }

  .mobile-modal .category-nav .tab-active {
    background: var(--bs-main);
    color: #ffffff;
    box-shadow: var(--bs-shadow-sm);
  }

  /* ---- Search and category chips ---- */
  .mobile-modal .search-filter,
  .pos-container-mobile .search-filter {
    gap: var(--px-8);
  }

  .mobile-modal .search-filter .search-wrap .search-input,
  .mobile-modal .search-filter .search-wrap input,
  .pos-container-mobile .search-filter .search-wrap .search-input,
  .pos-container-mobile .search-filter .search-wrap input {
    height: 40px !important;
    min-height: 40px !important;
    line-height: 40px !important;
    border-radius: var(--px-10) !important;
  }

  .mobile-modal .filter-tags {
    gap: 8px;
  }

  .mobile-modal .filter-tags:not(.qs-mobile-staff-tools) > .category-btn,
  .mobile-modal .filter-tags:not(.qs-mobile-staff-tools) > .open_item {
    min-height: 60px;
    gap: 4px;
    padding: 6px 8px;
  }

  /* A little air between the header and the first row of cards. */
  .mobile-modal .modal-content {
    padding-top: var(--px-4);
  }
}

/* ==================== PAYMENT SCREEN BAR - PHONE ====================
   Payment.continueToPayment swaps .pos-container-mobile out for .qs-pos-container and
   hides .quicksale-close-outside-btn, so on a phone the payment step had no back
   affordance and no way to close the modal - the only exit was the browser.
   Desktop keeps its own header, so this bar is phone-only.
   ==================================================================== */
.qs-payment-bar {
  display: none;
}

@media (max-width: 767.98px) {
  /* The bar is a direct child of .qs-pos-container, which is also the services layout,
     so reveal it only while the payment panel is up. :has() keeps that condition in
     CSS instead of adding another class for JS to keep in sync. */
  .qs-pos-container:has(> .main-content > .main-payment:not(.dis-none)) > .qs-payment-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--px-12);
    flex-shrink: 0;
    padding: var(--px-12) var(--px-16);
    padding-top: calc(var(--px-12) + env(safe-area-inset-top, 0px));
    background: var(--bs-surface-bg);
    border-bottom: 1px solid var(--bs-border-color);
  }

  .qs-payment-bar__title {
    margin: 0;
    font: normal normal 600 var(--s-18);
    color: var(--bs-heading-color);
  }

  .qs-payment-bar__btn {
    width: var(--px-40);
    height: var(--px-40);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--bs-border-color);
    border-radius: 50%;
    background: var(--bs-surface-bg);
    color: var(--bs-text);
    font-size: var(--s-16);
  }

  .qs-payment-bar__btn:hover {
    background: var(--bs-muted-bg);
  }

  /* Small navigation controls share the Customer / visit-badge heading. */
  .cart-modal .qs-customer-heading .back-cart-modal,
  .cart-modal .qs-customer-heading .close-cart-modal {
    position: static;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--bs-border-color);
    border-radius: 50%;
    background: var(--bs-surface-bg);
    color: var(--bs-text);
  }

  .cart-modal .back-cart-modal:hover,
  .cart-modal .close-cart-modal:hover {
    background: var(--bs-muted-bg);
  }

  /* Shared customer card UI lives in quickSale.css. */
  .cart-modal .client-header {
    padding: 0;
    background: var(--bs-surface-bg);
    border-bottom: 0;
  }

  .cart-modal .cart-sheet-close-btn {
    display: none !important;
  }

  .cart-modal .qs-client-header-wrapper {
    padding: var(--px-16);
  }

  .cart-modal .qs-customer-empty,
  .cart-modal .qs-client-header-wrapper {
    padding-top: calc(var(--px-16) + env(safe-area-inset-top, 0px));
  }

  /* Keep the selected customer compact so staff and services retain room. */
  .cart-modal .client-header:has(.qs-client-summary-card) .qs-client-header-wrapper {
    padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 8px;
  }

  .cart-modal .qs-client-summary-card {
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: 6px 8px;
    padding: 10px;
    border-radius: 12px;
  }

  .cart-modal .qs-client-summary-card .qs-client-avatar-circle {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: center;
    width: 36px;
    height: 36px;
  }

  .cart-modal .qs-client-summary-card .qs-client-details-col {
    display: contents;
  }

  .cart-modal .qs-client-summary-card .qs-client-name-row {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    gap: 3px;
  }

  .cart-modal .qs-client-summary-card .qs-client-full-name {
    font-size: 13px;
  }

  .cart-modal .qs-client-summary-card .qs-client-identity {
    gap: 4px;
  }

  .cart-modal .qs-client-summary-card .qs-client-card-actions {
    grid-column: 3;
    grid-row: 1;
    gap: 4px;
  }

  .cart-modal .qs-client-card-actions > .qs-action-icon-btn {
    width: 32px;
    height: 32px;
  }

  .cart-modal .qs-client-summary-card .qs-client-meta-line {
    grid-column: 2 / -1;
    grid-row: 2;
    margin-top: 0;
  }

  .cart-modal .qs-client-summary-card .qs-client-stats,
  .cart-modal .qs-client-summary-card .qs-client-note,
  .cart-modal .qs-client-summary-card .qs-mem-slot {
    grid-column: 1 / -1;
    margin-top: 0;
  }

  .cart-modal .qs-client-stat {
    padding: 6px 8px;
    border-radius: 8px;
  }

  .cart-modal .qs-client-stat-label {
    margin-bottom: 3px;
    font-size: 9px;
  }

  .cart-modal .qs-client-stat-value {
    gap: 4px;
    font-size: 12px;
  }

  .cart-modal .qs-mem-chip {
    min-height: 36px;
    padding: 5px 8px;
    gap: 8px;
    border-radius: 8px;
  }

  .cart-modal .qs-mem-chip-label {
    font-size: 11px;
  }

  .cart-modal .qs-mem-chip-name {
    font-size: 10px;
  }

  .cart-modal .cart-items {
    min-height: min(180px, 35dvh);
  }

  .cart-modal .cart-footer:has(.qs-cart-payment-summary) {
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  }

  .cart-modal .qs-cart-payment-option {
    min-height: 64px;
    padding: 6px 8px;
    gap: 2px;
  }

  .cart-modal .qs-cart-total-due {
    margin: 8px 0;
  }

  /* Client forms keep the ticket heading above their fields. */
  .cart-modal:has(.client-inline-picker) .client-header,
  .cart-modal:has(.client-inline-form) .client-header {
    padding: 12px 16px 8px;
  }

  .cart-modal .client-inline-picker__search-input {
    height: 44px;
    min-height: 44px;
    box-sizing: border-box;
  }

  .cart-modal .client-inline-form__input {
    height: 44px;
    font-size: 16px;
    line-height: 1.4;
    color: var(--bs-heading-color, #263238);
    caret-color: var(--bs-heading-color, #263238);
  }

  .cart-modal .client-inline-form__input::placeholder {
    font-size: 13px;
    color: var(--bs-text-muted, #9ca3af);
    -webkit-text-fill-color: var(--bs-text-muted, #9ca3af);
    opacity: 1;
  }

  .cart-modal .client-inline-form__input:focus::placeholder {
    opacity: 0.35;
  }

  .cart-modal .clients-list-meta {
    padding-left: 0;
  }
}

/* ==================== PAYMENT STEP ON PHONES ====================
   Payment.continueToPayment swaps the phone layout out for .qs-pos-container, so this
   step renders the desktop header. Three things go wrong there below 768px.
   ================================================================ */
@media (max-width: 767.98px) {
  /* Search only applies to catalogue picking. On payment the desktop catalog
     search rides along with the swapped-in .qs-pos-container — hide it. */
  .qs-pos-container:has(> .main-content > .main-payment:not(.dis-none)) .qs-catalog-search {
    display: none;
  }

  /* The phone header supplies Payment and Back; the footer supplies Total due. */
  #quickSaleModal .qs-pos-container .main-payment .payment-checkout-heading,
  #quickSaleModal .qs-pos-container .main-payment .payment-amount-overview {
    display: none;
  }

  /* Payment header: tabs full-bleed on their own row; opened-by chip + actions
     share the row under them. Chip shrinks (name ellipsizes) so the buttons
     never wrap onto a third row. */
  .qs-pos-container:has(> .main-content > .main-payment:not(.dis-none)) > .header-top-bar {
    flex-wrap: wrap;
    align-items: center;
    gap: var(--px-10);
  }

  .qs-pos-container:has(> .main-content > .main-payment:not(.dis-none)) > .header-top-bar .top-tabs {
    order: 1;
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
  }

  .qs-pos-container:has(> .main-content > .main-payment:not(.dis-none)) > .header-top-bar .open-by-ticket {
    order: 2;
    margin-right: 0;
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    overflow: hidden;
  }

  .qs-pos-container:has(> .main-content > .main-payment:not(.dis-none)) > .header-top-bar .btn-list-actions {
    order: 3;
    margin-left: 0;
    flex: 0 0 auto;
    flex-wrap: nowrap;
  }

  /* ---- 1. Catalogue tabs ----
     Match the choosing-service segmented control: muted track, equal segments,
     filled active pill. quickSale.css mobile resets .top-tabs to surface +
     underline-style tabs — override that here so payment reads the same weight. */
  .header-top-bar .top-tabs {
    justify-content: stretch;
    padding: var(--px-4);
    border-radius: var(--px-12);
    gap: var(--px-4);
    background: var(--bs-muted-bg);
    border-bottom: 0;
    box-shadow: none;
  }

  .header-top-bar .top-tabs .tab-btn-sale {
    flex: 1 1 0;
    min-width: 0;
    height: var(--px-36);
    padding: 0 var(--px-8);
    justify-content: center;
    gap: var(--px-6);
    border-radius: var(--px-8);
    font: normal normal 600 var(--s-13);
    background: transparent;
    color: var(--bs-text-muted);
    box-shadow: none;
  }

  .header-top-bar .top-tabs .tab-btn-sale:hover:not(.active) {
    background: var(--bs-surface-bg);
    color: var(--bs-text);
  }

  .header-top-bar .top-tabs .tab-btn-sale.active {
    background: var(--bs-main);
    color: #ffffff;
    box-shadow: var(--bs-shadow-sm);
  }

  /* The desktop rule paints an underline under the active pill; against a filled
     segment it reads as a stray line. */
  .header-top-bar .top-tabs .tab-btn-sale.active::after {
    display: none;
  }

  /* ---- 2. Add Tip ----
     .tip-v3-body is a two-column grid that the 900px block collapses to one column,
     but the container keeps `height: min(720px, 92vh)` and every level keeps
     `overflow: hidden`. Stacked, the two halves need ~250px more than that, so the
     keypad and the confirm button were cut off with no way to scroll to them. */
  .tip-modal-container-v3 {
    height: auto;
    max-height: 88dvh;
  }

  .tip-v3-body {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: min-content;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
  }

  .tip-v3-left,
  .tip-v3-right {
    overflow: visible;
    min-height: 0;
  }

  /* ---- 3. Coupon (and every other Quick Sale dialog) ----
     client.css carries an unscoped `.modal-body { min-height: 450px }` in its
     max-width:480px block, meant for the Clients profile modal. It lands on the
     coupon sheet too, leaving 172px of blank white under "Apply Coupon". Quick Sale
     dialogs size to their content. */
  #quickSaleCoupon .modal-body,
  #quickSaleCenter .modal-body,
  #quickSaleDiscount .modal-body,
  #quickSaleTip .modal-body,
  #extraPrice .modal-body {
    min-height: 0;
    background: #fff;
  }

  #quickSaleDiscount .modal-body {
    overflow: hidden !important;
    padding: 0 !important;
  }

  /* Payment footer: Close Bill lives in the desktop cart-sidebar.
     Below 768px that sidebar is either `dis-none` or the 768px rule turns EVERY
     .cart-sidebar into a 100vh overlay (z-index 999), so Chrome device-mode
     showed Payment with no footer. Keep the sidebar in flow as a bottom bar. */
  #quickSaleModal .qs-pos-container:has(> .main-content > .main-payment:not(.dis-none)) > .main-content {
    flex-direction: column;
    min-height: 0;
    height: auto;
  }

  #quickSaleModal .qs-pos-container:has(> .main-content > .main-payment:not(.dis-none)) > .main-content > .main-payment {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
  }

  #quickSaleModal .qs-pos-container:has(> .main-content > .main-payment:not(.dis-none)) > .main-content > .main-payment .payment-content {
    flex: 1 1 auto;
    min-height: 0;
  }

  #quickSaleModal .qs-pos-container:has(> .main-content > .main-payment:not(.dis-none)) > .main-content > .cart-sidebar,
  #quickSaleModal .qs-pos-container > .main-content > .cart-sidebar.qs-cart-sidebar--payment-bar {
    display: flex !important;
    position: relative;
    inset: auto;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
    height: auto;
    max-height: none;
    transform: none;
    z-index: 2;
    flex-direction: column;
    overflow: visible;
    border-left: none;
    border-radius: 0;
    box-shadow: none;
    background: var(--bs-surface-bg);
  }

  #quickSaleModal .qs-pos-container:has(> .main-content > .main-payment:not(.dis-none)) > .main-content > .cart-sidebar > :not(.cart-footer),
  #quickSaleModal .qs-pos-container > .main-content > .cart-sidebar.qs-cart-sidebar--payment-bar > :not(.cart-footer) {
    display: none !important;
  }

  #quickSaleModal .qs-pos-container:has(> .main-content > .main-payment:not(.dis-none)) > .main-content > .cart-sidebar .cart-footer,
  #quickSaleModal .qs-pos-container > .main-content > .cart-sidebar.qs-cart-sidebar--payment-bar .cart-footer {
    padding: var(--px-12) var(--px-16);
    padding-bottom: calc(var(--px-12) + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.08);
    border-top: 1px solid var(--bs-border-color);
    /* The cart's 55% cap shrinks this footer inside its content-sized sidebar,
       leaving empty space and clipping Total due / Back / Close Bill. */
    height: auto;
    max-height: none;
    overflow: visible;
  }

  /* Totals stay visible on Payment (discount / tip / cash / card). Close Bill
     replaces Continue; Back stays in the phone header. */
  #quickSaleModal .qs-pos-container:has(> .main-content > .main-payment:not(.dis-none)) > .main-content > .cart-sidebar .cart-footer .ticket-action-grid,
  #quickSaleModal .qs-pos-container:has(> .main-content > .main-payment:not(.dis-none)) > .main-content > .cart-sidebar .cart-footer .continue-btn,
  #quickSaleModal .qs-pos-container > .main-content > .cart-sidebar.qs-cart-sidebar--payment-bar .cart-footer .ticket-action-grid,
  #quickSaleModal .qs-pos-container > .main-content > .cart-sidebar.qs-cart-sidebar--payment-bar .cart-footer .continue-btn {
    display: none !important;
  }

  #quickSaleModal .qs-pos-container:has(> .main-content > .main-payment:not(.dis-none)) > .main-content > .cart-sidebar .cart-footer .totals,
  #quickSaleModal .qs-pos-container > .main-content > .cart-sidebar.qs-cart-sidebar--payment-bar .cart-footer .totals {
    display: block;
    margin: 0 0 var(--px-12) 0;
    max-height: min(36vh, 220px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  #quickSaleModal .qs-pos-container:has(> .main-content > .main-payment:not(.dis-none)) > .main-content > .cart-sidebar .cart-footer .totals .total-row,
  #quickSaleModal .qs-pos-container > .main-content > .cart-sidebar.qs-cart-sidebar--payment-bar .cart-footer .totals .total-row {
    margin-bottom: var(--px-6);
  }

  #quickSaleModal .qs-pos-container:has(> .main-content > .main-payment:not(.dis-none)) > .main-content > .cart-sidebar .cart-footer .payment-row,
  #quickSaleModal .qs-pos-container > .main-content > .cart-sidebar.qs-cart-sidebar--payment-bar .cart-footer .payment-row {
    display: flex !important;
  }

  #quickSaleModal .qs-pos-container:has(> .main-content > .main-payment:not(.dis-none)) > .main-content > .cart-sidebar .payment-back,
  #quickSaleModal .qs-pos-container > .main-content > .cart-sidebar.qs-cart-sidebar--payment-bar .payment-back {
    display: none;
  }

  #quickSaleModal .qs-pos-container:has(> .main-content > .main-payment:not(.dis-none)) > .main-content > .cart-sidebar .cart-footer .payment-row .checkout-btn {
    min-height: var(--px-44);
    height: auto;
  }
}

@media (max-width: 767.98px) and (max-height: 600px) {
  /* Short phones and landscape: scroll checkout and summary together so the
     footer cannot consume the entire area beneath the header. */
  #quickSaleModal .qs-pos-container:has(> .main-content > .main-payment:not(.dis-none)) > .main-content {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  #quickSaleModal .qs-pos-container:has(> .main-content > .main-payment:not(.dis-none)) > .main-content > .main-payment {
    flex: 0 0 auto;
    overflow: visible;
  }

  #quickSaleModal .qs-pos-container:has(> .main-content > .main-payment:not(.dis-none)) > .main-content > .main-payment .payment-content {
    flex: 0 0 auto;
    overflow: visible;
  }
}

/* ==================== REMOVE SERVICE SHEET ====================
   Replaces the generic Swal warning. Mobile docks to the bottom like a sheet;
   desktop stays a centered card. No ticket/service ID in the body. */
.swal2-popup.swal2-popup-remove-service {
  --qs-remove-accent: #e11d8c;
  --qs-remove-accent-soft: #fce7f3;
  --qs-remove-warn: #ea580c;
  --qs-remove-muted: #6b7280;
  --qs-remove-ink: #111827;
  width: 420px;
  max-width: calc(100vw - 32px);
  padding: 20px 22px 22px;
  border-radius: 24px;
  box-shadow: 0 16px 48px rgba(15, 23, 42, 0.18);
}

.swal2-popup-remove-service .swal2-title-remove {
  font: normal normal 700 var(--s-20);
  color: var(--qs-remove-ink);
  margin: 0 0 8px;
  padding: 0;
  line-height: 1.25;
  text-align: center;
}

.swal2-popup-remove-service .swal2-html-remove {
  margin: 0;
  padding: 0;
  color: var(--qs-remove-muted);
}

.swal2-popup-remove-service .qs-remove-svc__icon {
  border: none !important;
  width: 56px;
  height: 56px;
  margin: 4px auto 14px;
  background: var(--qs-remove-accent-soft);
  color: var(--qs-remove-accent);
  border-radius: 50%;
  box-shadow: none;
}

.swal2-popup-remove-service .qs-remove-svc__icon .swal2-icon-content {
  font-size: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.swal2-popup-remove-service .qs-remove-svc__icon svg {
  width: 22px;
  height: 22px;
  stroke: var(--qs-remove-accent);
}

.qs-remove-svc__lead {
  margin: 0 0 16px;
  font: normal normal 500 var(--s-14);
  color: var(--qs-remove-muted);
  line-height: 1.45;
  text-align: center;
}

.qs-remove-svc__card {
  text-align: left;
  background: #f8fafc;
  border: 1px solid #eef2f7;
  border-radius: 16px;
  padding: 14px 14px 12px;
  margin: 0 0 8px;
}

.qs-remove-svc__badge {
  display: inline-block;
  margin-bottom: 8px;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--qs-remove-accent-soft);
  color: var(--qs-remove-accent);
  font: normal normal 700 var(--s-11);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.qs-remove-svc__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.qs-remove-svc__name {
  font: normal normal 700 var(--s-15);
  color: var(--qs-remove-ink);
  line-height: 1.3;
  min-width: 0;
}

.qs-remove-svc__price {
  flex-shrink: 0;
  font: normal normal 700 var(--s-16);
  color: var(--qs-remove-ink);
  line-height: 1.3;
}

.qs-remove-svc__duration {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font: normal normal 500 var(--s-12);
  color: var(--qs-remove-muted);
}

.qs-remove-svc__duration svg {
  flex-shrink: 0;
}

.qs-remove-svc__note {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 10px 0 0;
  font: normal normal 500 var(--s-12);
  color: var(--qs-remove-warn);
  line-height: 1.4;
}

.qs-remove-svc__note svg {
  flex-shrink: 0;
  margin-top: 1px;
}

.swal2-popup-remove-service .qs-remove-svc__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin: 12px 0 0;
  padding: 0;
  position: static;
  flex: 0 0 auto;
  border-top: 0;
  background: transparent;
}

.swal2-popup-remove-service .qs-remove-svc__confirm,
.swal2-popup-remove-service .qs-remove-svc__cancel {
  width: 100%;
  margin: 0;
  flex: 0 0 auto;
  height: 40px;
  min-height: 40px;
  max-height: 40px;
  padding: 0 12px;
  border-radius: 10px;
  font: normal normal 600 var(--s-14);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  border: none;
  box-shadow: none;
  white-space: nowrap;
}

.swal2-popup-remove-service .qs-remove-svc__confirm {
  background: var(--qs-remove-accent);
  color: #fff;
  box-shadow: 0 8px 18px rgba(225, 29, 140, 0.28);
}

.swal2-popup-remove-service .qs-remove-svc__confirm:hover {
  filter: brightness(1.05);
}

.swal2-popup-remove-service .qs-remove-svc__confirm:focus-visible,
.swal2-popup-remove-service .qs-remove-svc__cancel:focus-visible {
  outline: 3px solid var(--qs-remove-accent);
  outline-offset: 2px;
}

.swal2-popup-remove-service .qs-remove-svc__cancel {
  background: #f3f4f6;
  color: #374151;
}

.swal2-popup-remove-service .qs-remove-svc__cancel:hover {
  background: #e5e7eb;
}

@media (max-width: 767.98px) {
  /* sweetalert-mobile.css turns every Swal into a full-viewport sheet and lets
     action buttons flex-grow. This confirm should hug its content at the bottom. */
  body .swal2-container:has(> .swal2-popup-remove-service) {
    justify-content: flex-end !important;
    align-items: stretch !important;
    padding: 0 !important;
  }

  body .swal2-container > .swal2-popup.swal2-popup-remove-service {
    flex: 0 0 auto !important;
    align-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: min(85dvh, 100%) !important;
    margin: 0 !important;
    padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 20px 20px 0 0 !important;
    overflow: visible;
  }

  body .swal2-popup.swal2-popup-remove-service .swal2-title {
    padding: 0 0 8px !important;
    text-align: center !important;
  }

  body .swal2-popup.swal2-popup-remove-service .qs-remove-svc__lead {
    text-align: center !important;
  }

  body .swal2-popup.swal2-popup-remove-service .swal2-html-container {
    flex: 0 0 auto !important;
    padding: 0 !important;
    overflow: visible;
  }

  body .swal2-popup.swal2-popup-remove-service .swal2-icon {
    margin: 4px auto 10px !important;
  }

  body .swal2-popup.swal2-popup-remove-service .swal2-actions {
    position: static !important;
    flex: 0 0 auto !important;
    margin: 12px 0 0 !important;
    padding: 0 !important;
    border-top: 0 !important;
    gap: 8px !important;
  }

  body .swal2-popup.swal2-popup-remove-service .swal2-actions > button {
    flex: 0 0 auto !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 0 12px !important;
    white-space: nowrap !important;
    font-size: 14px !important;
    line-height: 1 !important;
  }

  .swal2-popup-remove-service::before {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    margin: 4px auto 10px;
    border-radius: 999px;
    background: #e5e7eb;
  }
}

@media (min-width: 768px) {
  /* Keep the staff bar outside the scrolling booking list. */
  #quickSaleModal .qs-pos-container .main-content > .cart-sidebar > .cart-items {
    min-height: 0;
    overflow: hidden;
    padding-top: var(--px-4);
    padding-bottom: 0;
    gap: var(--px-4);
  }

  #quickSaleModal .qs-pos-container .main-content > .cart-sidebar > .cart-items > .qs-assigned-staff-bar {
    margin-bottom: 0;
  }

  #quickSaleModal .qs-pos-container .main-content > .cart-sidebar > .cart-items > .salon-booking-wrapper {
    flex: 1 1 0;
    min-height: 0;
    height: auto;
    overflow-y: auto;
    scroll-padding-top: 0;
    overscroll-behavior: contain;
    /* Active cards scale beyond their bounds; keep their edges and shadow visible. */
    margin-inline: calc(-1 * var(--px-16));
    padding: var(--px-8) var(--px-16) 96px;
  }

  #quickSaleModal .qs-pos-container .main-content > .cart-sidebar .salon-booking-wrapper::-webkit-scrollbar {
    width: var(--px-8);
  }

  #quickSaleModal .qs-pos-container .main-content > .cart-sidebar .salon-booking-wrapper::-webkit-scrollbar-track {
    background: transparent;
  }

  #quickSaleModal .qs-pos-container .main-content > .cart-sidebar .salon-booking-wrapper::-webkit-scrollbar-thumb {
    background: var(--bs-border-color);
    border-radius: var(--px-4);
  }

  #quickSaleModal .qs-pos-container .main-content > .cart-sidebar .salon-booking-wrapper::-webkit-scrollbar-thumb:hover {
    background: var(--bs-border-strong);
  }
}

/* Shared Remove confirmations use the compact Discount layout. */
.swal2-popup.swal2-popup-remove-discount {
  --qs-remove-red: #ef3154;
  --qs-remove-accent-soft: #fff0f2;
  --qs-remove-accent: #ec526b;
  --qs-remove-ink: #182235;
  --qs-remove-muted: #8491a5;
  width: 500px;
  max-width: calc(100vw - 32px);
  padding: 22px 24px 18px;
  border-radius: 22px;
  text-align: left;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.2);
}

.swal2-popup-remove-discount .qs-remove-discount__sr-title {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.swal2-popup-remove-discount .qs-remove-discount__html { overflow: visible; margin: 0; padding: 0; text-align: left; }
.qs-remove-discount__badge { display: inline-flex; align-items: center; gap: 8px; min-height: 29px; margin: 0 0 15px; padding: 0 12px; border-radius: 999px; background: #fff0f2; color: #ec526b; font: 700 12px/1 "Inter", sans-serif; letter-spacing: .035em; }
.qs-remove-discount__badge span { width: 7px; height: 7px; border-radius: 50%; background: #fa647d; }
.qs-remove-discount__content { display: flex; align-items: flex-start; gap: 18px; }
.qs-remove-discount__icon { position: relative; display: flex; flex: 0 0 58px; align-items: center; justify-content: center; width: 58px; height: 58px; margin-top: 1px; border: 1px solid #ffe0e4; border-radius: 17px; background: #fff5f5; color: var(--qs-remove-red); box-shadow: 0 2px 5px rgba(239, 49, 84, .08); }
.qs-remove-discount__icon > i { position: absolute; top: -7px; right: -5px; display: grid; width: 21px; height: 21px; place-items: center; border: 2px solid #fff; border-radius: 50%; background: #f04461; color: #fff; font-size: 10px; }
.qs-remove-discount__copy h3 { margin: 2px 0 5px; color: #182235; font: 700 21px/1.25 "Inter", sans-serif; }
.qs-remove-discount__copy p { margin: 0; color: #8491a5; font: 500 14px/1.45 "Inter", sans-serif; }
.swal2-popup-remove-discount .qs-remove-discount__actions { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 10px; width: 100%; margin: 20px 0 0; padding: 0; }
.swal2-popup-remove-discount .qs-remove-discount__actions button { display: inline-flex; flex: 1 1 0 !important; align-items: center; justify-content: center; gap: 7px; width: 50% !important; min-width: 0; min-height: 48px; margin: 0 !important; border-radius: 12px; font: 600 14px/1 "Inter", sans-serif; cursor: pointer; white-space: nowrap; }
.swal2-popup-remove-discount .qs-remove-discount__cancel { border: 2px solid #e0e6ef; background: #fff; color: #475569; }
.swal2-popup-remove-discount .qs-remove-discount__confirm { border: 0; background: linear-gradient(135deg, #f33d5b, #e91649); color: #fff; box-shadow: 0 5px 12px rgba(225, 29, 72, .24); }
.swal2-popup-remove-discount .qs-remove-discount__close { top: 15px; right: 16px; color: #9aa6b7; font-size: 25px; }
.swal2-popup-remove-discount .qs-remove-discount__footer { margin: 12px 0 0; padding: 0; border: 0 !important; box-shadow: none !important; }
.swal2-popup-remove-discount .swal2-footer { border-top: 0 !important; }
.qs-remove-discount__hint { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 0; color: #9aa6b7; font: 500 12px/1.4 "Inter", sans-serif; text-align: center; }

body .swal2-container.qs-remove-confirm-container:has(> .swal2-popup-remove-discount) {
  display: flex;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px !important;
}

body .swal2-container.qs-remove-confirm-container > .swal2-popup.swal2-popup-remove-discount {
  display: flex !important;
  flex: 0 1 auto;
  flex-direction: column;
  align-self: center;
  width: min(500px, calc(100vw - 24px)) !important;
  min-height: 0;
  max-height: calc(100dvh - 24px);
  margin: auto;
  padding: 22px 24px 18px;
  border-radius: 22px;
  overflow: auto;
}

body .swal2-container.qs-remove-confirm-container .swal2-popup-remove-discount .qs-remove-discount__html {
  flex: 0 0 auto;
  padding: 0;
  margin: 0;
  text-align: left;
}

body .swal2-container.qs-remove-confirm-container .swal2-popup-remove-discount .qs-remove-discount__actions {
  position: static;
  flex: 0 0 auto;
  margin: 20px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
}

body .swal2-container.qs-remove-confirm-container .swal2-popup-remove-discount .qs-remove-discount__actions > button {
  min-height: 48px;
  padding: 0 10px;
  border-radius: 12px;
  font: 600 14px/1 "Inter", sans-serif;
  white-space: nowrap;
}

body .swal2-container.qs-remove-confirm-container .swal2-popup-remove-discount .qs-remove-discount__close {
  width: 32px;
  height: 32px;
  background: transparent !important;
  color: #9aa6b7;
}

body .swal2-container.qs-remove-confirm-container .swal2-popup-remove-discount .qs-remove-discount__footer {
  margin: 12px 0 0;
  padding: 0;
}

.swal2-popup-remove-discount .qs-remove-svc__card { margin: 16px 0 0; }
.swal2-popup-remove-discount .qs-remove-svc__badge { font-size: 11px; }
.swal2-popup-remove-discount .qs-remove-svc__name { font-size: 14px; }
.swal2-popup-remove-discount .qs-remove-svc__price { font-size: 15px; }
.swal2-popup-remove-discount .qs-remove-svc__duration { font-size: 12px; }
.swal2-popup-remove-discount .qs-remove-discount__copy { min-width: 0; }
.swal2-popup-remove-discount .qs-remove-discount__actions > button:focus-visible { outline: 3px solid #fda4af; outline-offset: 2px; }
.swal2-popup-remove-discount .qs-remove-discount__cancel:hover { background: #f8fafc; }
.swal2-popup-remove-discount .qs-remove-discount__confirm:hover { filter: brightness(.96); }

@media (max-width: 575.98px) {
  .swal2-popup.swal2-popup-remove-discount { width: calc(100vw - 24px); padding: 20px 16px 16px; border-radius: 20px; }
  .qs-remove-discount__badge { margin-bottom: 15px; }
  .qs-remove-discount__content { gap: 13px; }
  .qs-remove-discount__icon { flex-basis: 54px; width: 54px; height: 54px; border-radius: 16px; }
  .qs-remove-discount__copy h3 { font-size: 19px; }
  .qs-remove-discount__copy p { font-size: 13px; }
  .qs-remove-discount__hint { font-size: 11px; }
  .swal2-popup-remove-discount .qs-remove-discount__actions { gap: 7px; margin-top: 17px; }
  .swal2-popup-remove-discount .qs-remove-discount__actions button { min-height: 44px; padding: 0 6px; font-size: 12px; }
  body .swal2-container.qs-remove-confirm-container > .swal2-popup.swal2-popup-remove-discount { padding: 20px 16px 16px; border-radius: 20px; }
  body .swal2-container.qs-remove-confirm-container .swal2-popup-remove-discount .qs-remove-discount__actions { margin-top: 17px; }
  body .swal2-container.qs-remove-confirm-container .swal2-popup-remove-discount .qs-remove-discount__actions > button { min-height: 44px; padding: 0 6px; font-size: 12px; }
}

/* Desktop cart Add Staff — compact system chip (border + fill).
   Keep this outside the phone media query so the sidebar picks it up. */
#quickSaleModal .qs-pos-container .main-content > .cart-sidebar .qs-assigned-staff-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--px-12);
  width: 100%;
  flex: 0 0 auto;
  margin-bottom: var(--px-8);
}

#quickSaleModal .qs-pos-container .main-content > .cart-sidebar .qs-assigned-staff-label {
  min-width: 0;
  font: normal normal 600 var(--s-11);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bs-text-muted);
}

#quickSaleModal .qs-pos-container .main-content > .cart-sidebar .qs-assigned-staff-bar .btn_add_tech {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  min-height: var(--px-32);
  margin: 0;
  padding: var(--px-4) var(--px-12);
  border: 1px solid var(--bs-main);
  border-radius: var(--px-6);
  background: var(--bs-main-50);
  box-shadow: none;
  color: var(--bs-main);
  font: normal normal 600 var(--s-13);
  white-space: nowrap;
  overflow: visible;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

#quickSaleModal .qs-pos-container .main-content > .cart-sidebar .qs-assigned-staff-bar .btn_add_tech:hover {
  background: var(--bs-main);
  border-color: var(--bs-main);
  color: #fff;
}

#quickSaleModal .qs-pos-container .main-content > .cart-sidebar .qs-assigned-staff-bar .btn_add_tech:active {
  background: var(--bs-main-hover);
  border-color: var(--bs-main-hover);
  color: #fff;
}

#quickSaleModal .qs-pos-container .main-content > .cart-sidebar .qs-assigned-staff-bar .btn_add_tech::before {
  content: none;
  display: none;
}

#quickSaleModal .qs-pos-container .main-content > .cart-sidebar .qs-assigned-staff-bar .btn_add_tech svg {
  display: none;
}

/* Quick Sale uses the Salon Center technician tabs and counters. */
#quickSaleModal .lst-tab-clock-tech:not(.sc2-frame-header) {
    --sc2-muted: var(--bs-text-muted);
    --sc2-primary: var(--bs-main);
    --sc2-header-fg: var(--bs-text);
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    min-height: 40px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}
#quickSaleModal .lst-tab-clock-tech:not(.sc2-frame-header) .sc2-tech-tabs {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}
#quickSaleModal .lst-tab-clock-tech:not(.sc2-frame-header) .sc2-tech-tabs::-webkit-scrollbar {
    display: none;
}
#quickSaleModal .lst-tab-clock-tech:not(.sc2-frame-header) .sc2-tech-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    gap: 6px;
    width: auto;
    height: 36px;
    min-height: 36px;
    padding: 6px 8px 9px;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--sc2-muted);
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
    white-space: nowrap;
    opacity: 1;
    box-shadow: none;
    transform: none;
}
#quickSaleModal .lst-tab-clock-tech:not(.sc2-frame-header) .sc2-tech-tab:hover {
    color: var(--sc2-header-fg);
}
#quickSaleModal .lst-tab-clock-tech:not(.sc2-frame-header) .sc2-tech-tab.is-active {
    color: var(--sc2-primary);
}
#quickSaleModal .lst-tab-clock-tech:not(.sc2-frame-header) .sc2-tech-tab::before,
#quickSaleModal .lst-tab-clock-tech:not(.sc2-frame-header) .sc2-tech-tab::after {
    display: none;
}
#quickSaleModal .lst-tab-clock-tech:not(.sc2-frame-header) .sc2-tech-tab.is-active::after {
    display: block;
    content: "";
    position: absolute;
    left: 6px;
    right: 6px;
    bottom: 0;
    width: auto;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--sc2-primary);
}
#quickSaleModal .lst-tab-clock-tech:not(.sc2-frame-header) .sc2-tech-tab__count {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.08);
    color: var(--sc2-muted);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}
#quickSaleModal .lst-tab-clock-tech:not(.sc2-frame-header) .is-active .sc2-tech-tab__count {
    background: var(--sc2-primary);
    color: #fff;
}

/* Mobile service rows follow the online-booking catalog layout. */
@media (max-width: 767.98px) {
    #quickSaleModal #lst-services .qs-mobile-service-card {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        gap: 8px;
        height: auto;
        min-height: 0;
        padding: 12px 14px;
        border: 1px solid var(--bs-border-color);
        border-radius: 14px;
        background: var(--bs-surface-bg);
        box-shadow: none;
        transform: none;
        overflow: hidden;
        transition: border-color 160ms ease, box-shadow 160ms ease;
    }
    #quickSaleModal #lst-services .qs-mobile-service-card.has-qty {
        border-color: var(--bs-main);
        box-shadow: inset 0 0 0 1px var(--bs-main);
    }
    #quickSaleModal #lst-services .qs-mobile-service-card:active {
        transform: none;
    }
    #quickSaleModal #lst-services .qs-service-copy {
        display: grid;
        gap: 2px;
        min-width: 0;
        overflow-wrap: anywhere;
    }
    #quickSaleModal #lst-services .service-name {
        margin: 0;
        max-width: none;
        min-height: 0;
        font-size: 14.5px;
        font-weight: 600;
        line-height: 1.35;
        white-space: normal;
        overflow: visible;
        display: block;
    }
    #quickSaleModal #lst-services .qs-service-description {
        margin: 0;
        color: var(--bs-text-muted);
        font-size: 12.5px;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
    }
    #quickSaleModal #lst-services .qs-service-foot {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }
    #quickSaleModal #lst-services .qs-service-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        min-width: 0;
        column-gap: 6px;
    }
    #quickSaleModal #lst-services .price {
        min-width: 0;
        font-size: 14.5px;
        font-weight: 700;
        line-height: 1.4;
        overflow-wrap: anywhere;
    }
    #quickSaleModal #lst-services .qs-service-duration {
        color: var(--bs-text-muted);
        font-size: 12.5px;
    }
    #quickSaleModal #lst-services .qs-service-duration::before {
        content: "\00b7";
        margin-right: 6px;
    }
    #quickSaleModal #lst-services .svc-qty {
        gap: 4px;
        height: 32px;
        padding: 0;
        background: transparent;
        border: 0;
        border-radius: 0;
    }
    #quickSaleModal #lst-services .svc-qty__btn {
        width: 32px;
        height: 32px;
        border: 1px solid var(--bs-border-color);
        border-radius: 50%;
        background: var(--bs-surface-bg);
        color: var(--bs-text);
        font-size: 20px;
        font-weight: 400;
    }
    #quickSaleModal #lst-services .has-qty .svc-qty__btn--plus {
        background: var(--bs-main);
        border-color: var(--bs-main);
        color: #fff;
    }
    #quickSaleModal #lst-services .service-card:not(.has-qty) .svc-qty__btn--minus,
    #quickSaleModal #lst-services .service-card:not(.has-qty) .svc-qty__count {
        display: none;
    }
    #quickSaleModal #lst-services .qs-service-addons {
        display: none;
        position: static;
        align-items: center;
        justify-content: space-between;
        flex-shrink: 0;
        width: auto;
        height: auto;
        min-height: 40px;
        margin: 0 -14px -12px;
        padding: 10px 14px;
        border: 0;
        border-top: 1px solid var(--bs-border-color);
        border-radius: 0;
        background: transparent;
        color: var(--bs-main);
        font-size: 12.5px;
        font-weight: 600;
        transform: none;
    }
    #quickSaleModal #lst-services .has-qty .qs-service-addons {
        display: flex;
    }
}

/* Desktop ticket action follows the floating drawer controls. */
#quickSaleModal .quicksale-delete-outside-btn {
    position: absolute;
    right: calc(var(--custom-width) + var(--px-12));
    top: calc(60px + var(--px-48) + var(--px-12));
    width: var(--px-48);
    height: var(--px-48);
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--bs-border-calendar);
    background: var(--bs-surface-bg);
    color: #dc2626;
    box-shadow: var(--bs-shadow-md);
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10001;
    transition: right 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s;
}
#quickSaleModal .quicksale-delete-outside-btn i {
    font-size: 20px;
}
@media (min-width: 768px) {
    #quickSaleModal.show .quicksale-delete-outside-btn:not(.dis-none) {
        display: flex;
    }
    #quickSaleModal .quicksale-delete-outside-btn:hover {
        background: var(--bs-header-cart);
        border-color: var(--qs-cash-btn-hover-border);
    }
}

/* Combine replaces the entire picker, including the sibling technician tools. */
#quickSaleModal .qs-combine-mode .main-list-services > :not(.tab-content-wrapper),
#quickSaleModal .qs-combine-mode .tab-content-wrapper > :not(#ticket):not(.footer-ticket-combine) {
    display: none !important;
}
#quickSaleModal .qs-combine-mode .tab-content-wrapper {
    overflow: hidden;
}
#quickSaleModal .qs-combine-mode #ticket.active {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    height: auto;
    padding: 0;
    overflow: hidden;
    animation: none;
}
#quickSaleModal .qs-combine-tabs {
    flex: 0 0 auto;
    padding: 6px 12px 0;
    border-bottom: 1px solid var(--bs-border-color);
    background: var(--bs-surface-bg);
}
#quickSaleModal .qs-combine-picker .tix-grid {
    flex: 1 1 0;
    min-height: 0;
    padding: 16px;
    overflow-y: auto;
    overflow-x: hidden;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
    align-content: start;
    align-items: start;
    gap: 14px;
}
#quickSaleModal .qs-combine-mode .footer-ticket-combine {
    flex: 0 0 auto;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
}
#quickSaleModal .qs-combine-empty {
    grid-column: 1 / -1;
    padding: 48px 16px;
    text-align: center;
    color: var(--bs-text-muted);
}
/* Cards with a status tab ("Add services to start") get a 14px top margin in the list layout;
   give every picker card the same one so the grid row stays aligned and the tab isn't clipped. */
#quickSaleModal .qs-combine-picker .tix-grid > .qs-combine-ticket {
    margin-top: 14px;
}
#quickSaleModal .qs-combine-ticket .sc2-ticket__inner * {
    pointer-events: none;
}
#quickSaleModal .qs-combine-ticket__id {
    flex: 0 0 auto;
    font-weight: 700;
    font-size: 12px;
    color: var(--bs-text-muted);
}
#quickSaleModal .qs-combine-selection {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    border: 1px solid var(--bs-border-color);
    border-radius: 50%;
    background: var(--bs-surface-bg);
}
#quickSaleModal .qs-combine-selection i {
    visibility: hidden;
    font-size: 12px;
}
#quickSaleModal .qs-combine-ticket.is-selected .qs-combine-selection {
    border-color: var(--bs-main);
    background: var(--bs-main);
    color: #fff;
}
#quickSaleModal .qs-combine-ticket.is-selected .qs-combine-selection i {
    visibility: visible;
}
@media (max-width: 768px) {
    #quickSaleModal .qs-combine-mode > .header-top-bar,
    #quickSaleModal .qs-combine-mode > .main-content > .cart-sidebar {
        display: none !important;
    }
    #quickSaleModal .qs-combine-mode > .main-content {
        padding: 0;
    }
    #quickSaleModal .qs-combine-mode > .main-content > .main-list-services {
        display: flex !important;
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 0;
    }
    #quickSaleModal .qs-combine-tabs {
        padding-left: 6px;
        padding-right: 6px;
    }
    #quickSaleModal .qs-combine-tabs .sc2-tech-tabs {
        gap: 0;
    }
    #quickSaleModal .qs-combine-tabs .sc2-tech-tab {
        flex: 1 0 auto;
        gap: 4px;
        padding-left: 6px;
        padding-right: 6px;
    }
    #quickSaleModal .qs-combine-picker .tix-grid {
        padding: 12px;
    }
    #quickSaleModal .qs-combine-mode .footer-ticket-combine {
        gap: 8px;
        padding: 12px;
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }
    #quickSaleModal .qs-combine-mode .footer-ticket-combine button {
        padding: 12px 8px !important;
        font-size: 13px !important;
    }
}

/* Add-item fly effect (desktop): a round "+" badge flies into the staff card,
   where a placeholder row holds the spot until the cart round-trips finish. */
.qs-fly-ghost {
  position: fixed;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bs-main);
  color: #fff;
  font-size: 16px;
  pointer-events: none;
  will-change: transform, opacity;
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.22),
    0 0 0 6px color-mix(in srgb, var(--bs-main) 22%, transparent);
}

.qs-fly-placeholder {
  pointer-events: none;
  position: relative;
  overflow: hidden;
  opacity: 0.55;
}

.qs-fly-placeholder--landed {
  animation: qs-fly-pop 0.22s ease-out;
}

.qs-fly-placeholder--landed::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.55) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: qs-fly-shimmer 1s ease-in-out infinite;
}

.qs-fly-card-pulse {
  animation: qs-fly-card-pulse 0.5s ease-out;
}

.qs-fly-fab-pulse {
  animation: qs-fly-fab-pulse 0.5s ease-out;
}

@keyframes qs-fly-fab-pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--bs-main) 45%, transparent);
  }
  40% {
    transform: scale(1.12);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 12px transparent;
  }
}

@keyframes qs-fly-shimmer {
  to {
    transform: translateX(100%);
  }
}

@keyframes qs-fly-pop {
  from {
    transform: scale(0.94);
  }
  to {
    transform: scale(1);
  }
}

@keyframes qs-fly-card-pulse {
  from {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--bs-main) 45%, transparent);
  }
  to {
    box-shadow: 0 0 0 10px transparent;
  }
}

/* Combined bill (desktop): one client-header + cart-items block per ticket, scrolling together.
   Blocks are built by QuickSale.renderTicketSections; the open ticket keeps the original pair. */
@media (min-width: 768px) {
  #quickSaleModal .qs-pos-container .main-content > .cart-sidebar.qs-multi-ticket {
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  #quickSaleModal .qs-pos-container .main-content > .cart-sidebar.qs-multi-ticket > .client-header {
    flex: 0 0 auto;
  }

  #quickSaleModal .qs-pos-container .main-content > .cart-sidebar.qs-multi-ticket > .cart-items {
    flex: 0 0 auto;
    min-height: auto;
    overflow: visible;
    padding-bottom: var(--px-8);
    margin-bottom: 0;
  }

  #quickSaleModal .qs-pos-container .main-content > .cart-sidebar.qs-multi-ticket > .cart-items > .salon-booking-wrapper {
    flex: none;
    overflow: visible;
    margin-inline: 0;
    padding: var(--px-8) 0 0;
  }

  #quickSaleModal .qs-pos-container .main-content > .cart-sidebar.qs-multi-ticket > .cart-footer {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: var(--bs-surface-bg);
  }

  /* Another ticket's header is a full client header; a rule marks where the next ticket starts. */
  #quickSaleModal .qs-pos-container .main-content > .cart-sidebar > .qs-ticket-header {
    border-top: 1px solid var(--bs-border-color);
    cursor: pointer;
  }

  /* The client picker replaces the cart: hide the extra ticket blocks with it. */
  #quickSaleModal .cart-sidebar:has(.list_client:not(.dis-none)) .qs-ticket-extra {
    display: none;
  }
}

/* Phone cart sheet: same per-ticket blocks; the whole sheet scrolls and the totals stay at the bottom. */
.cart-modal .cart-sidebar.qs-multi-ticket {
  overflow-y: auto;
  overscroll-behavior: contain;
}

.cart-modal .cart-sidebar.qs-multi-ticket > .client-header {
  flex: 0 0 auto;
  overflow: visible;
}

.cart-modal .cart-sidebar.qs-multi-ticket > .cart-items {
  flex: 0 0 auto;
  min-height: auto;
  overflow: visible;
}

.cart-modal .cart-sidebar.qs-multi-ticket > .cart-items > .salon-booking-wrapper {
  overflow: visible;
}

.cart-modal .cart-sidebar.qs-multi-ticket > .cart-footer {
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: var(--bs-surface-bg);
}

.cart-modal .cart-sidebar > .qs-ticket-header {
  border-top: 1px solid var(--bs-border-color);
  cursor: pointer;
}

.cart-modal .cart-sidebar:has(.list_client:not(.dis-none)) .qs-ticket-extra {
  display: none;
}

/* Header actions while a ticket opened from Salon Center is still loading: buttons are
   already in their final state but not actionable yet, so they don't flip or get tapped early. */
.btn-list-actions.qs-actions-loading .qs-header-icon-action,
.btn-list-actions.qs-actions-loading .start-btn,
.btn-list-actions.qs-actions-loading .checkin-btn {
  pointer-events: none;
  opacity: 0.6;
}
.btn-list-actions .qs-header-icon-action,
.btn-list-actions .start-btn,
.btn-list-actions .checkin-btn {
  transition: opacity 0.15s ease;
}