/**
 * Gradia POS — Extra Features CSS
 * Custom items · Line notes · Item-level discounts · Tip · Gift cards ·
 * Layaway · Customer history · Bundles · Kitchen · Display · Barcode · Multi-location
 */

/* ────────────────────────────────────────────────────────────────
   TOAST
   ──────────────────────────────────────────────────────────────── */
.p9x-toast {
    position:       fixed;
    bottom:         24px;
    left:           50%;
    transform:      translateX(-50%) translateY(80px);
    background:     #1e293b;
    color:          #fff;
    padding:        12px 22px;
    border-radius:  99px;
    font-size:      13px;
    font-weight:    600;
    z-index:        99999;
    box-shadow:     0 4px 20px rgba(0,0,0,.28);
    opacity:        0;
    transition:     opacity .25s, transform .25s;
    pointer-events: none;
    white-space:    nowrap;
}
.p9x-toast.p9x-toast-show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ────────────────────────────────────────────────────────────────
   SHARED MODAL / DRAWER BASE
   ──────────────────────────────────────────────────────────────── */
.p9x-overlay {
    position:           fixed;
    inset:              0;
    z-index:            9990;
    background:         rgba(0,0,0,.55);
    backdrop-filter:    blur(4px);
    display:            flex;
    align-items:        flex-end;
    justify-content:    center;
    padding:            0;
}
@media (min-width: 641px) {
    .p9x-overlay { align-items: center; padding: 24px; }
}

.p9x-card {
    background:     var(--p9-card, #fff);
    border-radius:  22px 22px 0 0;
    width:          100%;
    max-width:      100%;
    max-height:     88dvh;
    display:        flex;
    flex-direction: column;
    overflow:       hidden;
    box-shadow:     0 -4px 40px rgba(0,0,0,.22);
    animation:      p9xSlide .24s cubic-bezier(.32,.72,0,1);
}
@media (min-width: 641px) {
    .p9x-card {
        border-radius: 22px;
        max-width:     560px;
        box-shadow:    0 20px 70px rgba(0,0,0,.25);
        animation:     p9xFade .2s ease;
    }
}

@keyframes p9xSlide { from { transform:translateY(30px); opacity:0; } to { transform:translateY(0); opacity:1; } }
@keyframes p9xFade  { from { transform:scale(.97) translateY(6px); opacity:0; } to { transform:scale(1) translateY(0); opacity:1; } }

.p9x-card-header {
    padding:         14px 20px;
    border-bottom:   1px solid var(--p9-border, rgba(0,0,0,.08));
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-shrink:     0;
}
.p9x-card-title {
    font-size:   15px;
    font-weight: 700;
    color:       var(--p9-text, #0f172a);
}
.p9x-card-body {
    flex:       1;
    min-height: 0;
    overflow-y: auto;
    padding:    18px 20px;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
}
@media (min-width: 641px) {
    .p9x-card-header { padding: 16px 24px; }
    .p9x-card-body   { padding: 20px 24px; }
}
.p9x-card-footer {
    padding:        14px 20px;
    border-top:     1px solid var(--p9-border, rgba(0,0,0,.08));
    display:        flex;
    gap:            10px;
    align-items:    center;
    flex-shrink:    0;
    background:     var(--p9-card, #fff);
}
@media (min-width: 641px) {
    .p9x-card-footer { padding: 16px 24px; }
}

.p9x-btn-close {
    background: none;
    border:     none;
    font-size:  22px;
    color:      var(--p9-muted, #64748b);
    cursor:     pointer;
    padding:    4px;
    line-height:1;
    flex-shrink:0;
}
.p9x-btn-primary {
    flex:           1;
    min-height:     48px;
    padding:        0 20px;
    background:     linear-gradient(135deg,var(--p9-grad-start,#1e90ff) 0%,#000 100%);
    color:          #fff;
    border:         none;
    border-radius:  999px;
    font-size:      14px;
    font-weight:    700;
    font-family:    inherit;
    cursor:         pointer;
    transition:     opacity .15s, transform .15s;
}
.p9x-btn-primary:hover:not(:disabled) { opacity: .88; transform:translateY(-1px); }
.p9x-btn-primary:disabled { background: #cbd5e1; cursor: not-allowed; transform:none; }
.p9x-btn-secondary {
    min-height:  48px;
    padding:     0 18px;
    background:  none;
    border:      1.5px solid var(--p9-border, rgba(0,0,0,.12));
    border-radius: 999px;
    font-size:   13.5px;
    font-weight: 600;
    font-family: inherit;
    color:       var(--p9-muted, #64748b);
    cursor:      pointer;
    flex-shrink: 0;
    transition:  border-color .15s;
}
.p9x-btn-secondary:hover { border-color: #94a3b8; }
.p9x-field { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.p9x-label { font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--p9-muted,#64748b); }
.p9x-input {
    width:       100%;
    min-height:  50px;
    padding:     0 16px;
    font-size:   16px;
    font-family: inherit;
    border:      1.5px solid var(--p9-border, rgba(0,0,0,.12));
    border-radius: 12px;
    background:  var(--p9-input-bg, #f8fafc);
    color:       var(--p9-text, #0f172a);
    outline:     none;
    box-sizing:  border-box;
    transition:  border-color .15s;
}
.p9x-input:focus { border-color: var(--p9-grad-start,#1e90ff); background: var(--p9-card, #fff); }
.p9x-error { color:#ef4444; font-size:13px; padding:8px 12px; background:rgba(239,68,68,.08); border-radius:8px; display:none; }
.p9x-loading { text-align:center; padding:28px 16px; font-size:13px; color:var(--p9-muted,#64748b); }
.p9x-empty   { text-align:center; padding:28px 16px; font-size:13px; color:var(--p9-muted,#64748b); }

/* Custom Item modal — pill inputs matching the app's global theme accent */
.p9x-ci-input {
    width:       100%;
    min-height:  46px;
    padding:     0 18px;
    font-size:   15px;
    font-family: inherit !important;
    border:      1.5px solid var(--p9-border, rgba(0,0,0,.12)) !important;
    border-radius: 999px !important;
    background:  var(--p9-input-bg, #f8fafc);
    color:       var(--p9-text, #0f172a);
    outline:     none;
    box-sizing:  border-box !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    transition:  border-color .15s;
}
.p9x-ci-input:focus { border-color: var(--p9-grad-start,#1e90ff); background: var(--p9-card, #fff); }
.p9x-ci-row { display:flex; gap:10px; }
.p9x-ci-row .p9x-field { flex:1; margin-bottom:0; }
.p9x-ci-row .p9x-field:first-child { flex:1.3; }
.p9x-ci-presets { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.p9x-ci-chip {
    padding:       7px 14px;
    border-radius: 999px !important;
    border:        1.5px solid var(--p9-border, rgba(0,0,0,.12)) !important;
    background:    var(--p9-card, #fff);
    color:         var(--p9-muted, #64748b);
    font-size:     12.5px;
    font-family:   inherit !important;
    cursor:        pointer;
    -webkit-appearance: none !important;
    appearance: none !important;
    outline: none;
    transition:    border-color .15s, color .15s;
}
.p9x-ci-chip:hover,
.p9x-ci-chip:focus-visible { border-color: var(--p9-grad-start,#1e90ff); color: var(--p9-grad-start,#1e90ff); }
.p9x-ci-chip:active { background: var(--p9-card, #fff); }
.p9x-ci-total-row {
    display:         flex;
    align-items:     baseline;
    justify-content: space-between;
    background:      var(--p9-input-bg, #f8fafc);
    border-radius:   12px;
    padding:         10px 14px;
    margin-bottom:   16px;
}
.p9x-ci-total-label { font-size:12.5px; color:var(--p9-muted,#64748b); }
.p9x-ci-total-value { font-size:18px; font-weight:700; color:var(--p9-text,#0f172a); }

body.gradia-pos-dark .p9x-ci-input        { background:#1e293b; border-color:rgba(255,255,255,.12); color:#e2e8f0; }
body.gradia-pos-dark .p9x-ci-input:focus  { background:#0f172a; }
body.gradia-pos-dark .p9x-ci-chip         { background:#1e293b; border-color:rgba(255,255,255,.12); color:#94a3b8; }
body.gradia-pos-dark .p9x-ci-total-row    { background:#1e293b; }
body.gradia-pos-dark .p9x-ci-total-value  { color:#e2e8f0; }

/* ────────────────────────────────────────────────────────────────
   DRAWER (slides in from right on desktop, full bottom-sheet on mobile)
   ──────────────────────────────────────────────────────────────── */
.p9x-drawer {
    position:   fixed;
    inset:      0;
    z-index:    9990;
    display:    flex;
    align-items: flex-end;
}
.p9x-drawer-backdrop {
    position:  absolute;
    inset:     0;
    background: rgba(0,0,0,.5);
    backdrop-filter: blur(3px);
}
.p9x-drawer-panel {
    position:       relative;
    z-index:        1;
    width:          100%;
    max-height:     90dvh;
    display:        flex;
    flex-direction: column;
    background:     var(--p9-card, #fff);
    border-radius:  22px 22px 0 0;
    overflow:       hidden;
    box-shadow:     0 -4px 40px rgba(0,0,0,.22);
    animation:      p9xSlide .24s cubic-bezier(.32,.72,0,1);
}
@media (min-width: 900px) {
    .p9x-drawer { align-items: stretch; justify-content: flex-end; }
    .p9x-drawer-panel {
        width:         420px;
        max-height:    100dvh;
        border-radius: 0;
        animation:     p9xDrawerRight .22s ease;
    }
}
@keyframes p9xDrawerRight { from { transform:translateX(60px); opacity:0; } to { transform:translateX(0); opacity:1; } }
.p9x-drawer-header {
    padding:         14px 20px;
    border-bottom:   1px solid var(--p9-border, rgba(0,0,0,.08));
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-shrink:     0;
}
.p9x-drawer-title { font-size:15px; font-weight:700; color:var(--p9-text,#0f172a); }
.p9x-drawer-body  { flex:1; min-height:0; overflow-y:auto; padding:16px 20px; box-sizing:border-box; -webkit-overflow-scrolling:touch; }
.p9x-drawer-footer { padding:14px 20px; border-top:1px solid var(--p9-border,rgba(0,0,0,.08)); flex-shrink:0; background:var(--p9-card,#fff); display:flex; gap:10px; }

/* ────────────────────────────────────────────────────────────────
   CUSTOM ITEM BUTTON (in product toolbar)
   ──────────────────────────────────────────────────────────────── */
#p9x-custom-item-btn {
    display:        inline-flex;
    align-items:    center;
    gap:            6px;
    padding:        9px 16px;
    min-height:     40px;
    border:         1.5px solid var(--p9-border, rgba(0,0,0,.12));
    border-radius:  999px;
    background:     var(--p9-card, #fff);
    color:          var(--p9-text, #0f172a);
    font-size:      13px;
    font-weight:    600;
    font-family:    inherit;
    cursor:         pointer;
    transition:     all .15s;
    white-space:    nowrap;
}
#p9x-custom-item-btn:hover { border-color:#1e40af; color:#1e40af; }

/* ────────────────────────────────────────────────────────────────
   LINE DISCOUNT & LINE NOTE (inline basket row)
   ──────────────────────────────────────────────────────────────── */
.p9x-line-disc-toggle,
.p9x-line-note-btn {
    background:   none;
    border:       1.5px solid var(--p9-border, rgba(0,0,0,.1));
    border-radius:6px;
    font-size:    11px;
    font-weight:  700;
    color:        var(--p9-muted, #64748b);
    cursor:       pointer;
    padding:      3px 7px;
    line-height:  1.4;
    transition:   all .14s;
    flex-shrink:  0;
}
.p9x-line-disc-toggle:hover,
.p9x-line-note-btn:hover { border-color:#1e40af; color:#1e40af; }
.p9x-line-disc-toggle.p9x-active { background:#dbeafe; border-color:#1e40af; color:#1e40af; }
.p9x-line-note-btn.p9x-active    { background:#dcfce7; border-color:#16a34a; color:#16a34a; }

.p9x-line-disc-wrap {
    display:       none;           /* hidden by default; JS .toggle() reveals it */
    align-items:   center;
    gap:           6px;
    padding:       6px 10px;
    margin:        2px 4px 4px;
    background:    rgba(30,64,175,.06);
    border-radius: 10px;
    border:        1px solid rgba(30,64,175,.14);
    flex-wrap:     nowrap;
    width:         auto;
}
.p9x-line-disc-type {
    padding:      6px 8px;
    border:       1.5px solid var(--p9-border, rgba(0,0,0,.1));
    border-radius:8px;
    background:   var(--p9-input-bg, #f8fafc);
    font-family:  inherit;
    font-size:    12px;
    flex-shrink:  0;
}
.p9x-line-disc-input {
    width:       80px;
    padding:     6px 10px;
    border:      1.5px solid var(--p9-border, rgba(0,0,0,.1));
    border-radius:8px;
    background:  var(--p9-input-bg, #f8fafc);
    font-family: inherit;
    font-size:   13px;
    outline:     none;
}
.p9x-line-disc-input:focus { border-color:#1e40af; background:var(--p9-card,#fff); }
.p9x-line-disc-apply {
    padding:     6px 12px;
    background:  #1e40af;
    color:       #fff;
    border:      none;
    border-radius:8px;
    font-size:   12px;
    font-weight: 700;
    font-family: inherit;
    cursor:      pointer;
    flex-shrink: 0;
}
.p9x-line-disc-clear {
    background: none;
    border:     none;
    color:      #ef4444;
    cursor:     pointer;
    font-size:  14px;
    padding:    4px;
    flex-shrink:0;
}

.p9x-line-note-wrap { padding: 4px 0 2px; }
.p9x-line-note-display {
    font-size:    12px;
    color:        #16a34a;
    font-style:   italic;
    padding:      2px 4px;
    background:   rgba(22,163,74,.07);
    border-radius:4px;
    display:      inline-block;
    max-width:    100%;
    word-break:   break-word;
}
.p9x-line-note-input {
    width:        100%;
    padding:      7px 12px;
    border:       1.5px solid #16a34a;
    border-radius:8px;
    background:   var(--p9-card,#fff);
    font-family:  inherit;
    font-size:    13px;
    outline:      none;
    box-sizing:   border-box;
}

/* ────────────────────────────────────────────────────────────────
   TIP ROW (in totals section)
   ──────────────────────────────────────────────────────────────── */
.p9x-tip-controls {
    display:     flex;
    align-items: center;
    gap:         8px;
    padding:     8px 0 4px;
    flex-wrap:   wrap;
}
.p9x-tip-toggle-label {
    display:     flex;
    align-items: center;
    gap:         6px;
    font-size:   12.5px;
    color:       var(--p9-muted,#64748b);
    cursor:      pointer;
    user-select: none;
}
#p9x-tip-input-row {
    display:     flex;
    align-items: center;
    gap:         8px;
    margin-top:  6px;
    flex-wrap:   wrap;
}
.p9x-tip-preset {
    padding:     6px 12px;
    border:      1.5px solid var(--p9-border,rgba(0,0,0,.1));
    border-radius:999px;
    background:  var(--p9-card,#fff);
    font-size:   12px;
    font-weight: 600;
    font-family: inherit;
    cursor:      pointer;
    transition:  all .14s;
    flex-shrink: 0;
}
.p9x-tip-preset:hover { border-color:#1e40af; color:#1e40af; }
#p9x-tip-value {
    width:       90px;
    padding:     7px 12px;
    border:      1.5px solid var(--p9-border,rgba(0,0,0,.1));
    border-radius:8px;
    background:  var(--p9-input-bg,#f8fafc);
    font-size:   14px;
    font-family: inherit;
    outline:     none;
}
#p9x-tip-value:focus { border-color:#1e40af; background:var(--p9-card,#fff); }
#p9x-tip-apply {
    padding:     8px 14px;
    background:  #1e40af;
    color:       #fff;
    border:      none;
    border-radius:8px;
    font-size:   12.5px;
    font-weight: 700;
    font-family: inherit;
    cursor:      pointer;
    flex-shrink: 0;
}
#p9x-tip-row {
    display:     flex;
    align-items: center;
    justify-content: space-between;
    font-size:   13px;
    padding:     3px 0;
    color:       var(--p9-text,#0f172a);
}
#p9x-tip-row .p9x-tip-lbl { color:var(--p9-muted,#64748b); }

/* ────────────────────────────────────────────────────────────────
   GIFT CARD PAYMENT TILE & APPLIED ROW
   ──────────────────────────────────────────────────────────────── */
#p9x-gc-btn {
    display:        inline-flex;
    align-items:    center;
    gap:            6px;
    padding:        10px 16px;
    border:         1.5px solid var(--p9-border,rgba(0,0,0,.12));
    border-radius:  12px;
    background:     var(--p9-card,#fff);
    color:          var(--p9-text,#0f172a);
    font-size:      13px;
    font-weight:    600;
    font-family:    inherit;
    cursor:         pointer;
    transition:     all .15s;
}
#p9x-gc-btn:hover { border-color:#1e40af; color:#1e40af; }

.p9x-gc-balance-row { padding:10px 0 4px; font-size:13px; }
.p9x-gc-balance-row .p9x-gc-bal-val { font-weight:700; color:#1e40af; }

#p9x-gc-applied-row {
    display:       flex;
    align-items:   center;
    justify-content:space-between;
    padding:       8px 12px;
    background:    rgba(30,64,175,.07);
    border-radius: 10px;
    font-size:     13px;
    margin-top:    8px;
}
#p9x-gc-remove {
    background: none;
    border:     none;
    color:      #ef4444;
    cursor:     pointer;
    font-size:  14px;
    padding:    2px 4px;
}

/* ────────────────────────────────────────────────────────────────
   LAYAWAY
   ──────────────────────────────────────────────────────────────── */
.p9x-layaway-amount-display {
    display:     flex;
    gap:         12px;
    margin:      14px 0;
}
.p9x-lay-amount-box {
    flex:          1;
    padding:       12px 14px;
    border:        1.5px solid var(--p9-border,rgba(0,0,0,.1));
    border-radius: 12px;
    background:    var(--p9-input-bg,#f8fafc);
    text-align:    center;
}
.p9x-lay-amount-label { font-size:11px; color:var(--p9-muted,#64748b); text-transform:uppercase; letter-spacing:.4px; }
.p9x-lay-amount-val   { font-size:18px; font-weight:700; color:var(--p9-text,#0f172a); margin-top:3px; }
.p9x-lay-amount-box.p9x-lay-balance { border-color:#f59e0b; background:rgba(245,158,11,.07); }
.p9x-lay-amount-box.p9x-lay-balance .p9x-lay-amount-val { color:#d97706; }

.p9x-layaway-row {
    display:       flex;
    align-items:   center;
    gap:           12px;
    padding:       12px 0;
    border-bottom: 1px solid var(--p9-border,rgba(0,0,0,.07));
    flex-wrap:     wrap;
}
.p9x-layaway-row:last-child { border-bottom:none; }
.p9x-lay-info   { display:flex; flex-direction:column; gap:2px; flex:1; min-width:120px; }
.p9x-lay-num    { font-size:13px; font-weight:700; color:var(--p9-text,#0f172a); }
.p9x-lay-cust   { font-size:12px; color:var(--p9-muted,#64748b); }
.p9x-lay-date   { font-size:11px; color:var(--p9-muted,#64748b); }
.p9x-lay-amounts{ display:flex; flex-direction:column; gap:2px; text-align:right; flex-shrink:0; font-size:12px; }
.p9x-lay-bal    { font-size:13px; font-weight:600; color:#d97706; }
.p9x-lay-pay-btn{
    padding:     7px 14px;
    background:  #1e40af;
    color:       #fff;
    border:      none;
    border-radius:8px;
    font-size:   12px;
    font-weight: 700;
    font-family: inherit;
    cursor:      pointer;
    flex-shrink: 0;
}

/* ────────────────────────────────────────────────────────────────
   CUSTOMER HISTORY DRAWER
   ──────────────────────────────────────────────────────────────── */
.p9x-history-meta {
    display:   flex;
    flex-wrap: wrap;
    gap:       12px 20px;
    padding:   12px 0;
    font-size: 13px;
    color:     var(--p9-muted,#64748b);
    border-bottom: 1px solid var(--p9-border,rgba(0,0,0,.07));
    margin-bottom: 12px;
}
.p9x-history-meta strong { color:var(--p9-text,#0f172a); }

.p9x-history-order {
    padding:       10px 0;
    border-bottom: 1px solid var(--p9-border,rgba(0,0,0,.06));
}
.p9x-history-order:last-child { border-bottom:none; }
.p9x-ho-header {
    display:   flex;
    flex-wrap: wrap;
    gap:       6px 12px;
    align-items:center;
    font-size: 13px;
    margin-bottom:5px;
}
.p9x-ho-num    { font-weight:700; color:var(--p9-text,#0f172a); }
.p9x-ho-date   { color:var(--p9-muted,#64748b); font-size:12px; }
.p9x-ho-total  { font-weight:700; color:#1e40af; margin-left:auto; }
.p9x-ho-status {
    font-size:   10.5px;
    font-weight: 700;
    padding:     2px 8px;
    border-radius:999px;
    text-transform:uppercase;
    letter-spacing:.4px;
    background: rgba(30,64,175,.1);
    color:      #1e40af;
}
.p9x-ho-status.completed  { background:rgba(22,163,74,.1);  color:#16a34a; }
.p9x-ho-status.processing { background:rgba(30,64,175,.1);  color:#1e40af; }
.p9x-ho-status.on-hold    { background:rgba(245,158,11,.1); color:#d97706; }
.p9x-ho-items  { display:flex; flex-wrap:wrap; gap:4px; }
.p9x-ho-item   { font-size:11.5px; color:var(--p9-muted,#64748b); background:var(--p9-input-bg,#f8fafc); padding:2px 8px; border-radius:999px; }

/* History button (shows when customer selected) */
#p9x-history-btn {
    display:     none;
    padding:     7px 14px;
    border:      1.5px solid var(--p9-border,rgba(0,0,0,.1));
    border-radius:999px;
    background:  var(--p9-card,#fff);
    font-size:   12px;
    font-weight: 600;
    font-family: inherit;
    cursor:      pointer;
    color:       var(--p9-text,#0f172a);
    transition:  all .14s;
    flex-shrink: 0;
}
#p9x-history-btn:hover { border-color:#1e40af; color:#1e40af; }

/* ────────────────────────────────────────────────────────────────
   BUNDLE MODAL
   ──────────────────────────────────────────────────────────────── */
.p9x-bundle-pill {
    display:        inline-flex;
    align-items:    center;
    gap:            4px;
    padding:        3px 9px;
    border:         1.5px solid #6366f1;
    border-radius:  999px;
    background:     rgba(99,102,241,.08);
    color:          #6366f1;
    font-size:      11px;
    font-weight:    700;
    cursor:         pointer;
    margin-top:     4px;
    transition:     all .14s;
}
.p9x-bundle-pill:hover { background:rgba(99,102,241,.16); }

.p9x-bundle-items {
    display:        flex;
    flex-direction: column;
    gap:            10px;
    max-height:     320px;
    overflow-y:     auto;
    -webkit-overflow-scrolling:touch;
}
.p9x-bundle-item {
    display:     flex;
    align-items: center;
    gap:         12px;
    padding:     10px 0;
    border-bottom:1px solid var(--p9-border,rgba(0,0,0,.07));
}
.p9x-bundle-item:last-child { border-bottom:none; }
.p9x-bundle-item img { width:44px; height:44px; border-radius:8px; object-fit:cover; flex-shrink:0; }
.p9x-bundle-no-img  { width:44px; height:44px; border-radius:8px; background:var(--p9-input-bg,#f8fafc); display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }
.p9x-bundle-item-name  { font-size:13px; font-weight:600; color:var(--p9-text,#0f172a); }
.p9x-bundle-item-price { font-size:12px; color:var(--p9-muted,#64748b); margin-top:2px; }

/* ────────────────────────────────────────────────────────────────
   BARCODE / LABEL MODAL
   ──────────────────────────────────────────────────────────────── */
.p9x-label-btn {
    display:    inline-flex;
    align-items:center;
    gap:        4px;
    padding:    4px 9px;
    border:     1.5px solid var(--p9-border,rgba(0,0,0,.1));
    border-radius:7px;
    background: var(--p9-card,#fff);
    font-size:  11px;
    font-weight:600;
    font-family:inherit;
    cursor:     pointer;
    color:      var(--p9-muted,#64748b);
    transition: all .14s;
    flex-shrink:0;
}
.p9x-label-btn:hover { border-color:#1e40af; color:#1e40af; }

.p9x-label-qty-row { display:flex; align-items:center; gap:10px; margin-top:10px; }
.p9x-label-qty-row label { font-size:13px; color:var(--p9-muted,#64748b); flex-shrink:0; }

/* ────────────────────────────────────────────────────────────────
   MULTI-LOCATION SELECTOR
   ──────────────────────────────────────────────────────────────── */
#p9x-location-selector {
    display:        inline-flex;
    align-items:    center;
    gap:            6px;
    padding:        6px 12px;
    border:         1.5px solid var(--p9-border,rgba(0,0,0,.1));
    border-radius:  999px;
    background:     var(--p9-card,#fff);
    font-size:      12.5px;
    font-weight:    600;
    font-family:    inherit;
    cursor:         pointer;
    color:          var(--p9-text,#0f172a);
    transition:     all .14s;
    max-width:      180px;
    overflow:       hidden;
    text-overflow:  ellipsis;
    white-space:    nowrap;
}
#p9x-location-selector:hover { border-color:#1e40af; color:#1e40af; }
#p9x-location-current         { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.p9x-loc-option {
    display:       flex;
    flex-direction:column;
    gap:           3px;
    padding:       14px 16px;
    border:        1.5px solid var(--p9-border,rgba(0,0,0,.08));
    border-radius: 12px;
    cursor:        pointer;
    transition:    all .14s;
    margin-bottom: 10px;
}
.p9x-loc-option:hover { border-color:#1e40af; background:rgba(30,64,175,.04); }
.p9x-loc-option.p9x-loc-active { border-color:#1e40af; background:rgba(30,64,175,.06); }
.p9x-loc-name { font-size:14px; font-weight:600; color:var(--p9-text,#0f172a); }
.p9x-loc-addr { font-size:12px; color:var(--p9-muted,#64748b); }

/* ────────────────────────────────────────────────────────────────
   GIFT CARD CHECK ROW
   ──────────────────────────────────────────────────────────────── */
.p9x-gc-code-row { display:flex; gap:10px; align-items:flex-end; }
.p9x-gc-code-row .p9x-input { flex:1; }
#p9x-gc-check {
    min-height:  50px;
    padding:     0 16px;
    background:  var(--p9-card,#fff);
    border:      1.5px solid var(--p9-border,rgba(0,0,0,.12));
    border-radius:12px;
    font-size:   13px;
    font-weight: 600;
    font-family: inherit;
    cursor:      pointer;
    flex-shrink: 0;
    transition:  all .14s;
    color:       var(--p9-text,#0f172a);
}
#p9x-gc-check:hover { border-color:#1e40af; color:#1e40af; }
#p9x-gc-check:disabled { opacity:.6; cursor:not-allowed; }

/* ────────────────────────────────────────────────────────────────
   EXTRAS TOOLBAR BUTTONS (injected into POS topbar/basket area)
   ──────────────────────────────────────────────────────────────── */
.p9x-toolbar {
    display:    flex;
    flex-wrap:  wrap;
    gap:        8px;
    padding:    8px 0 4px;
    align-items:center;
}
.p9x-toolbar-btn {
    display:     inline-flex;
    align-items: center;
    gap:         5px;
    padding:     8px 14px;
    min-height:  38px;
    border:      1.5px solid var(--p9-border,rgba(0,0,0,.1));
    border-radius:999px;
    background:  var(--p9-card,#fff);
    color:       var(--p9-text,#0f172a);
    font-size:   12.5px;
    font-weight: 600;
    font-family: inherit;
    cursor:      pointer;
    transition:  all .14s;
    white-space: nowrap;
    flex-shrink: 0;
}
.p9x-toolbar-btn:hover { border-color:#1e40af; color:#1e40af; }
.p9x-toolbar-btn.p9x-danger:hover { border-color:#ef4444; color:#ef4444; }

/* Dark mode */
body.gradia-pos-dark .p9x-card,
body.gradia-pos-dark .p9x-drawer-panel { background:#0f172a !important; color:#e2e8f0; }
body.gradia-pos-dark .p9x-card-header,
body.gradia-pos-dark .p9x-drawer-header { border-bottom-color:rgba(255,255,255,.1); }
body.gradia-pos-dark .p9x-card-footer,
body.gradia-pos-dark .p9x-drawer-footer { border-top-color:rgba(255,255,255,.1); background:#0f172a !important; }
body.gradia-pos-dark .p9x-card-title,
body.gradia-pos-dark .p9x-drawer-title,
body.gradia-pos-dark .p9x-loc-name      { color:#e2e8f0; }
body.gradia-pos-dark .p9x-input { background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.14); color:#e2e8f0; }
body.gradia-pos-dark .p9x-input:focus   { background:rgba(255,255,255,.11); border-color:#60a5fa; }
body.gradia-pos-dark .p9x-toolbar-btn,
body.gradia-pos-dark #p9x-gc-btn,
body.gradia-pos-dark #p9x-custom-item-btn,
body.gradia-pos-dark #p9x-location-selector { background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.14); color:#e2e8f0; }
body.gradia-pos-dark .p9x-layaway-row,
body.gradia-pos-dark .p9x-history-order { border-bottom-color:rgba(255,255,255,.07); }
body.gradia-pos-dark .p9x-ho-item       { background:rgba(255,255,255,.06); color:rgba(255,255,255,.6); }
body.gradia-pos-dark .p9x-bundle-item   { border-bottom-color:rgba(255,255,255,.07); }
body.gradia-pos-dark .p9x-loc-option    { border-color:rgba(255,255,255,.1); }
body.gradia-pos-dark .p9x-loc-option.p9x-loc-active { border-color:#60a5fa; background:rgba(96,165,250,.1); }

/* ── Custom Item Badge ─────────────────────────────────────────── */
.p9x-custom-badge {
    display:      inline-block;
    font-size:    9.5px;
    font-weight:  700;
    text-transform:uppercase;
    letter-spacing:.4px;
    padding:      2px 6px;
    border-radius:999px;
    background:   rgba(99,102,241,.12);
    color:        #6366f1;
    margin-left:  6px;
    vertical-align:middle;
}

/* ── Line total with strikethrough original ────────────────────── */
.p9x-bi-line-wrap { display:flex; flex-direction:column; align-items:flex-end; }
.p9x-bi-line-orig {
    font-size:   11px;
    color:       var(--p9-muted,#94a3b8);
    text-decoration:line-through;
    line-height: 1.2;
}

/* ── Row action buttons (%, note, delete) ──────────────────────── */
/* Grouped inside .p9x-row-actions so they sit in a tight horizontal row */
.p9x-row-actions {
    display:     flex;
    align-items: center;
    gap:         3px;
    flex-shrink: 0;
    margin-left: 6px;
}
.p9x-line-disc-toggle,
.p9x-line-note-btn {
    display:      flex;
    align-items:  center;
    justify-content:center;
    width:        26px;
    height:       26px;
    background:   none;
    border:       1.5px solid var(--p9-border, rgba(0,0,0,.12));
    border-radius:6px;
    font-size:    11px;
    font-weight:  700;
    color:        var(--p9-muted,#64748b);
    cursor:       pointer;
    padding:      0;
    line-height:  1;
    transition:   all .14s;
    flex-shrink:  0;
}
.p9x-line-disc-toggle:hover { border-color:#1e40af; color:#1e40af; }
.p9x-line-note-btn:hover    { border-color:#16a34a; color:#16a34a; }
.p9x-line-disc-toggle.p9x-active { background:rgba(30,64,175,.1); border-color:#1e40af; color:#1e40af; }
.p9x-line-note-btn.p9x-active    { background:rgba(22,163,74,.1); border-color:#16a34a; color:#16a34a; }

/* ── Inline discount form ──────────────────────────────────────── */
/* Hidden by default; JS sets display:flex explicitly on open */
.p9x-line-disc-wrap {
    display:         none;
    align-items:     center;
    gap:             6px;
    padding:         7px 10px;
    margin:          4px 0 2px 44px;   /* indent to align with item info */
    background:      rgba(30,64,175,.07);
    border-radius:   10px;
    border:          1px solid rgba(30,64,175,.18);
    flex-wrap:       nowrap;
    width:           fit-content;      /* only as wide as content */
    max-width:       calc(100% - 44px);
    align-self:      flex-start;       /* don't stretch across full column */
}
body.gradia-pos-dark .p9x-line-disc-wrap {
    background: rgba(96,165,250,.1);
    border-color: rgba(96,165,250,.25);
}
.p9x-line-disc-type {
    padding:     5px 8px;
    border:      1.5px solid var(--p9-border,rgba(0,0,0,.1));
    border-radius:8px;
    background:  var(--p9-card,#fff);
    font-family: inherit;
    font-size:   12px;
    flex-shrink: 0;
    cursor:      pointer;
}
.p9x-line-disc-input {
    width:       80px;
    padding:     5px 10px;
    border:      1.5px solid var(--p9-border,rgba(0,0,0,.1));
    border-radius:8px;
    background:  var(--p9-card,#fff);
    font-family: inherit;
    font-size:   13px;
    outline:     none;
    flex-shrink: 0;
}
.p9x-line-disc-input:focus { border-color:#1e40af; }
.p9x-line-disc-apply {
    padding:     5px 12px;
    background:  #1e40af;
    color:       #fff;
    border:      none;
    border-radius:8px;
    font-size:   12px;
    font-weight: 700;
    font-family: inherit;
    cursor:      pointer;
    flex-shrink: 0;
}
.p9x-line-disc-clear {
    background: none;
    border:     none;
    color:      #ef4444;
    cursor:     pointer;
    font-size:  14px;
    padding:    3px 5px;
    flex-shrink:0;
    line-height:1;
}

/* ── Inline note area ──────────────────────────────────────────── */
.p9x-line-note-wrap {
    padding:    3px 6px 4px;
    margin:     0 6px 2px;
}
.p9x-line-note-wrap:empty { display:none; }
.p9x-line-note-display {
    font-size:   12px;
    color:       #16a34a;
    font-style:  italic;
    padding:     2px 4px;
    background:  rgba(22,163,74,.07);
    border-radius:4px;
    display:     inline-block;
    max-width:   100%;
    word-break:  break-word;
}
.p9x-line-note-input {
    width:        100%;
    padding:      6px 12px;
    border:       1.5px solid #16a34a;
    border-radius:8px;
    background:   var(--p9-card,#fff);
    font-family:  inherit;
    font-size:    13px;
    outline:      none;
    box-sizing:   border-box;
}

/* Dark mode adjustments */
body.gradia-pos-dark .p9x-line-disc-wrap  { background:rgba(96,165,250,.06); }
body.gradia-pos-dark .p9x-line-disc-type,
body.gradia-pos-dark .p9x-line-disc-input { background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.14); color:#e2e8f0; }
body.gradia-pos-dark .p9x-line-note-input { background:rgba(255,255,255,.07); color:#e2e8f0; }