/* =========================================================
   ABOTRIX CASHIER POS V19
   MODERN COMMERCIAL POS WORKSTATION
   Inspired by modern restaurant POS dashboards
   ========================================================= */

@media (min-width:1100px) {

  /* =====================================================
     CASHIER PAGE ONLY
     ===================================================== */

  body:has(#content .abx-pos-v18) {
    overflow:hidden !important;
  }

  body:has(#content .abx-pos-v18) #appView {
    height:100dvh !important;
    min-height:0 !important;
    overflow:hidden !important;
  }

  body:has(#content .abx-pos-v18) #appView > main {
    height:100dvh !important;
    min-height:0 !important;

    padding:
      12px
      14px
      12px !important;

    overflow:hidden !important;

    background:#f5f7fb !important;
  }


  /* =====================================================
     COMPACT CASHIER HEADER
     ===================================================== */

  body:has(#content .abx-pos-v18) .v12-page-header {
    height:58px !important;
    min-height:58px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;

    margin:0 0 8px !important;
    padding:4px 2px !important;

    overflow:hidden !important;
  }

  body:has(#content .abx-pos-v18) .v12-page-header .v12-eyebrow,
  body:has(#content .abx-pos-v18) .v12-page-header > small {
    font-size:8px !important;
    line-height:1 !important;
  }

  body:has(#content .abx-pos-v18) .v12-page-header h1 {
    margin:2px 0 !important;

    font-size:22px !important;
    line-height:1 !important;
  }

  body:has(#content .abx-pos-v18) .v12-page-header p {
    margin:3px 0 0 !important;

    font-size:9px !important;
    line-height:1.1 !important;
  }


  /* We already have the full sidebar.
     Remove duplicated Dashboard / Cashier POS / Sales strip. */

  body:has(#content .abx-pos-v18)
  #content > .restaurant-toolbar {
    display:none !important;
  }


  /* =====================================================
     CONTENT AREA
     ===================================================== */

  body:has(#content .abx-pos-v18) #content {
    height:calc(100dvh - 82px) !important;
    min-height:0 !important;

    display:flex !important;
    flex-direction:column !important;

    overflow:hidden !important;
  }


  #content .abx-pos-v18 {
    flex:1 1 auto !important;

    width:100% !important;
    min-width:0 !important;

    height:100% !important;
    min-height:0 !important;

    display:flex !important;
    flex-direction:column !important;

    gap:8px !important;

    margin:0 !important;
    padding:0 !important;

    overflow:hidden !important;
  }


  /* =====================================================
     TOP STATUS BAR
     Branch / Terminal / Printer / Customer Display
     ===================================================== */

  #content .abx-pos-v18-device {
    flex:0 0 58px !important;

    width:100% !important;
    min-height:58px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;

    gap:10px !important;

    margin:0 !important;
    padding:7px 10px !important;

    border:1px solid #dfe5ec !important;
    border-radius:12px !important;

    background:#ffffff !important;

    box-shadow:
      0 3px 12px rgba(15,23,42,.045) !important;

    overflow:hidden !important;
  }


  #content .abx-pos-v18-device-info {
    min-width:0 !important;

    display:flex !important;
    align-items:center !important;

    gap:7px !important;

    overflow:hidden !important;
  }


  #content .abx-pos-v18-device-label {
    min-width:140px !important;

    padding-right:8px !important;

    border-right:1px solid #e8edf3 !important;
  }


  #content .abx-pos-v18-device-label small,
  #content .abx-pos-v18-device-chip small {
    display:block !important;

    margin:0 0 3px !important;

    color:#7b8798 !important;

    font-size:7px !important;
    font-weight:800 !important;

    letter-spacing:.08em !important;
    line-height:1 !important;
  }


  #content .abx-pos-v18-device-label strong {
    display:block !important;

    color:#0b1f3a !important;

    font-size:12px !important;
    line-height:1.05 !important;
  }


  #content .abx-pos-v18-device-label span {
    display:block !important;

    margin-top:3px !important;

    color:#64748b !important;

    font-size:8px !important;

    white-space:nowrap !important;
  }


  #content .abx-pos-v18-device-chip {
    min-width:90px !important;
    max-width:150px !important;

    padding:6px 9px !important;

    border:1px solid #e2e8f0 !important;
    border-radius:8px !important;

    background:#f8fafc !important;
  }


  #content .abx-pos-v18-device-chip strong {
    display:block !important;

    overflow:hidden !important;

    color:#172033 !important;

    font-size:9px !important;

    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }


  #content .abx-pos-v18-device-actions {
    flex:0 0 auto !important;

    display:flex !important;
    align-items:center !important;

    gap:5px !important;
  }


  #content .abx-pos-v18-device-actions button {
    min-height:36px !important;

    padding:6px 10px !important;

    border:1px solid #dce4ee !important;
    border-radius:8px !important;

    background:#ffffff !important;

    color:#172033 !important;

    font-size:8px !important;
    font-weight:800 !important;

    white-space:nowrap !important;
  }


  #content .abx-pos-v18-device-actions button:hover {
    background:#f5f8fb !important;
  }


  #content .abx-pos-v18-display {
    border-color:#c9eaf1 !important;

    background:#eefbfe !important;

    color:#087d93 !important;
  }


  #content .abx-pos-v18-display span {
    display:block !important;

    margin-top:2px !important;

    font-size:6px !important;
  }


  /* =====================================================
     POS ACTIVATION
     ===================================================== */

  #content .abx-pos-v18-activation {
    flex:0 0 auto !important;

    padding:8px 10px !important;

    border-radius:10px !important;
  }


  #content .abx-pos-v18-activation-fields {
    display:grid !important;

    grid-template-columns:
      minmax(130px,1fr)
      minmax(150px,1fr)
      auto !important;

    gap:6px !important;
  }


  /* =====================================================
     MAIN WORKSTATION
     LEFT = MENU
     RIGHT = CURRENT ORDER
     ===================================================== */

  #content .abx-pos-v18-workspace {
    flex:1 1 auto !important;

    width:100% !important;
    min-width:0 !important;

    height:0 !important;
    min-height:0 !important;

    display:grid !important;

    grid-template-columns:
      minmax(0,1fr)
      405px !important;

    gap:9px !important;

    overflow:hidden !important;
  }


  /* =====================================================
     PRODUCT CATALOG
     ===================================================== */

  #content .abx-pos-v18-catalog,
  #content .pos-catalog {
    width:100% !important;
    min-width:0 !important;

    height:100% !important;
    min-height:0 !important;

    display:flex !important;
    flex-direction:column !important;

    padding:9px !important;

    border:1px solid #dfe5ec !important;
    border-radius:12px !important;

    background:#ffffff !important;

    box-shadow:
      0 3px 12px rgba(15,23,42,.04) !important;

    overflow:hidden !important;
  }


  /* Hide Choose Items title to gain POS space */

  #content .abx-pos-v18-section-head {
    flex:0 0 34px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;

    margin:0 0 5px !important;
  }


  #content .abx-pos-v18-section-head > div:first-child {
    display:none !important;
  }


  /* Hold / Resume / Clear */

  #content .abx-pos-v18-order-tools {
    display:flex !important;

    gap:4px !important;
  }


  #content .abx-pos-v18-order-tools button {
    min-width:58px !important;
    min-height:30px !important;

    padding:4px 8px !important;

    border:1px solid #dce4ee !important;
    border-radius:7px !important;

    background:#ffffff !important;

    font-size:8px !important;
    font-weight:800 !important;
  }


  /* =====================================================
     SEARCH
     ===================================================== */

  #content .abx-pos-v18-search {
    flex:0 0 38px !important;

    width:100% !important;

    margin:-39px 190px 6px 0 !important;

    padding-right:190px !important;
  }


  #content #posSearch {
    width:100% !important;

    height:36px !important;
    min-height:36px !important;

    margin:0 !important;
    padding:6px 11px !important;

    border:1px solid #dbe3ec !important;
    border-radius:8px !important;

    background:#fbfcfe !important;

    font-size:10px !important;
  }


  #content #posSearch:focus {
    border-color:#25aeca !important;

    outline:none !important;

    box-shadow:
      0 0 0 3px rgba(37,174,202,.10) !important;
  }


  /* =====================================================
     CATEGORY CHIPS
     ===================================================== */

  #content #posCategories,
  #content .abx-pos-v18-categories {
    flex:0 0 32px !important;

    width:100% !important;

    display:flex !important;

    gap:5px !important;

    margin:0 0 6px !important;

    overflow-x:auto !important;
    overflow-y:hidden !important;

    scrollbar-width:none !important;
  }


  #content #posCategories::-webkit-scrollbar {
    display:none !important;
  }


  #content #posCategories button {
    flex:0 0 auto !important;

    min-height:29px !important;

    padding:4px 12px !important;

    border:1px solid #dbe3ec !important;
    border-radius:999px !important;

    background:#ffffff !important;

    color:#243248 !important;

    font-size:8px !important;
    font-weight:800 !important;
  }


  #content #posCategories button.active {
    border-color:#07182b !important;

    background:#07182b !important;

    color:#ffffff !important;
  }


  /* =====================================================
     MENU PRODUCT GRID
     ===================================================== */

  #content #posProducts,
  #content .abx-pos-v18-products,
  #content .pos-products {
    flex:1 1 auto !important;

    width:100% !important;
    min-width:0 !important;

    height:0 !important;
    min-height:0 !important;

    display:grid !important;

    grid-template-columns:
      repeat(4,minmax(0,1fr)) !important;

    grid-auto-rows:max-content !important;

    align-content:start !important;

    gap:7px !important;

    padding:1px 3px 7px 1px !important;

    overflow-y:auto !important;
    overflow-x:hidden !important;

    scrollbar-width:thin !important;
  }


  #content .pos-product {
    min-width:0 !important;
    min-height:142px !important;

    display:flex !important;
    flex-direction:column !important;

    padding:7px !important;

    border:1px solid #e0e6ed !important;
    border-radius:9px !important;

    background:#ffffff !important;

    box-shadow:
      0 2px 7px rgba(15,23,42,.035) !important;

    cursor:pointer !important;
  }


  #content .pos-product:hover {
    border-color:#9bd5df !important;

    box-shadow:
      0 5px 14px rgba(15,23,42,.07) !important;
  }


  #content .pos-product .product-icon {
    width:100% !important;
    height:62px !important;

    margin:0 0 5px !important;

    overflow:hidden !important;

    border-radius:7px !important;

    background:#f1f5f9 !important;

    object-fit:cover !important;
  }


  #content .pos-product strong {
    display:block !important;

    margin:3px 0 !important;

    color:#111827 !important;

    font-size:10px !important;
    line-height:1.15 !important;
  }


  #content .pos-product small {
    color:#748197 !important;

    font-size:7px !important;
  }


  #content .pos-product .product-foot {
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;

    gap:4px !important;

    margin-top:auto !important;

    font-size:8px !important;
  }


  #content .pos-product button {
    width:100% !important;

    min-height:28px !important;

    margin-top:5px !important;
    padding:3px 6px !important;

    border:0 !important;
    border-radius:6px !important;

    background:#07182b !important;

    color:#ffffff !important;

    font-size:8px !important;
    font-weight:800 !important;
  }


  /* =====================================================
     CURRENT ORDER PANEL
     ===================================================== */

  #content .abx-pos-v18-order,
  #content .pos-cart {
    width:100% !important;

    height:100% !important;
    min-height:0 !important;
    max-height:none !important;

    position:static !important;

    display:flex !important;
    flex-direction:column !important;

    padding:9px !important;

    border:1px solid #dfe5ec !important;
    border-radius:12px !important;

    background:#ffffff !important;

    box-shadow:
      0 3px 12px rgba(15,23,42,.045) !important;

    overflow:hidden !important;
  }


  /* =====================================================
     CURRENT ORDER HEADER
     ===================================================== */

  #content .abx-pos-v18-order-head,
  #content .cart-heading {
    flex:0 0 34px !important;

    min-height:34px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;

    margin:0 0 5px !important;
    padding:0 0 5px !important;

    border-bottom:1px solid #edf1f5 !important;
  }


  #content .abx-pos-v18-order-head small,
  #content .cart-heading small {
    display:none !important;
  }


  #content .abx-pos-v18-order-head h2,
  #content .cart-heading h2 {
    margin:0 !important;

    color:#111827 !important;

    font-size:14px !important;
  }


  #content .abx-pos-v18-order-head > span {
    color:#7b8798 !important;

    font-size:7px !important;
  }


  /* =====================================================
     ORDER ITEM LIST
     ===================================================== */

  #content #posCartLines,
  #content .abx-pos-v18-cart-lines,
  #content .cart-lines {
    flex:0 0 125px !important;

    min-height:75px !important;
    max-height:125px !important;

    display:flex !important;
    flex-direction:column !important;

    gap:4px !important;

    margin:0 0 5px !important;
    padding:2px 1px 5px !important;

    overflow-y:auto !important;
    overflow-x:hidden !important;

    scrollbar-width:thin !important;
  }


  #content .pos-empty-cart {
    min-height:78px !important;

    padding:10px !important;

    border-radius:7px !important;
  }


  #content .pos-empty-cart strong {
    font-size:9px !important;
  }


  #content .pos-empty-cart span {
    font-size:7px !important;
  }


  #content .pos-cart-item {
    padding:5px !important;

    border-radius:7px !important;

    box-shadow:none !important;
  }


  #content .pos-cart-item-main {
    grid-template-columns:
      22px
      minmax(0,1fr)
      auto !important;

    gap:5px !important;
  }


  #content .pos-cart-item-number {
    width:21px !important;
    height:21px !important;

    border-radius:5px !important;

    font-size:7px !important;
  }


  #content .pos-cart-item-info strong {
    font-size:8px !important;
  }


  #content .pos-cart-item-info small,
  #content .pos-cart-line-total {
    font-size:7px !important;
  }


  #content .pos-cart-item-actions {
    margin-top:3px !important;
    padding-top:3px !important;

    gap:3px !important;
  }


  #content .pos-quantity-control button {
    width:23px !important;
    min-width:23px !important;
    height:23px !important;

    font-size:12px !important;
  }


  #content .pos-quantity-control span {
    min-width:31px !important;

    padding:2px 3px !important;
  }


  #content .pos-remove-item {
    min-height:23px !important;

    padding:2px 5px !important;

    font-size:6px !important;
  }


  /* =====================================================
     CHECKOUT
     ===================================================== */

  #content #checkoutForm,
  #content .abx-pos-v18-checkout {
    flex:1 1 auto !important;

    width:100% !important;

    height:0 !important;
    min-height:0 !important;

    display:block !important;

    margin:0 !important;
    padding:0 2px 1px 0 !important;

    overflow-y:auto !important;
    overflow-x:hidden !important;

    scrollbar-width:thin !important;
  }


  #content .abx-pos-v18-checkout-section {
    margin:0 0 5px !important;
    padding:5px !important;

    border:1px solid #e6ebf1 !important;
    border-radius:7px !important;

    background:#fbfcfe !important;
  }


  #content .abx-pos-v18-checkout-title {
    margin:0 0 4px !important;

    color:#64748b !important;

    font-size:7px !important;
    font-weight:800 !important;

    letter-spacing:.06em !important;
  }


  /* Order type */

  #content .abx-pos-v18-order-types,
  #content .order-toggle {
    display:grid !important;

    grid-template-columns:
      repeat(4,minmax(0,1fr)) !important;

    gap:3px !important;
  }


  #content .order-toggle label {
    min-height:28px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    gap:3px !important;

    padding:3px !important;

    border-radius:6px !important;

    font-size:7px !important;
  }


  /* Form fields */

  #content .abx-pos-v18-fields {
    display:grid !important;

    grid-template-columns:1fr !important;

    gap:3px !important;
  }


  #content .abx-pos-v18-fields.two {
    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;
  }


  #content #checkoutForm input,
  #content #checkoutForm select {
    width:100% !important;

    height:28px !important;
    min-height:28px !important;

    padding:3px 6px !important;

    border-radius:6px !important;

    font-size:8px !important;
  }


  #content #checkoutForm textarea {
    width:100% !important;

    height:31px !important;
    min-height:31px !important;
    max-height:31px !important;

    padding:4px 6px !important;

    border-radius:6px !important;

    font-size:8px !important;

    resize:none !important;
  }


  /* =====================================================
     TOTALS
     ===================================================== */

  #content .abx-pos-v18-totals,
  #content .totals-box {
    display:grid !important;

    grid-template-columns:
      repeat(5,minmax(0,1fr)) !important;

    gap:2px !important;

    margin:0 0 5px !important;
    padding:5px !important;

    border-radius:7px !important;

    background:#f8fafc !important;
  }


  #content .totals-box > div {
    padding:2px !important;
  }


  #content .totals-box span {
    display:block !important;

    color:#718096 !important;

    font-size:6px !important;
  }


  #content .totals-box b,
  #content .totals-box strong {
    font-size:8px !important;
  }


  #content .totals-box .grand-total strong {
    color:#07182b !important;

    font-size:12px !important;
  }


  /* =====================================================
     PAYMENT METHODS
     ===================================================== */

  #content .abx-pos-v18-payment,
  #content .payment-section {
    margin:0 0 5px !important;
    padding:5px !important;

    border-radius:7px !important;
  }


  #content .payment-heading {
    margin:0 0 3px !important;
  }


  #content .payment-heading small {
    font-size:6px !important;
  }


  #content .payment-heading h3 {
    margin:0 !important;

    font-size:8px !important;
  }


  #content #paymentDue {
    font-size:11px !important;
  }


  #content .payment-methods {
    display:grid !important;

    grid-template-columns:
      repeat(4,minmax(0,1fr)) !important;

    gap:3px !important;
  }


  #content .payment-method {
    min-height:31px !important;

    padding:3px !important;

    border-radius:6px !important;
  }


  #content .payment-method span {
    font-size:7px !important;
  }


  #content .payment-method small {
    display:none !important;
  }


  #content .payment-fields {
    margin-top:3px !important;

    gap:3px !important;
  }


  #content .change-preview {
    min-height:28px !important;

    padding:3px 5px !important;
  }


  /* =====================================================
     COMPLETE PAYMENT
     ===================================================== */

  #content #checkoutForm .pay-now,
  #content .abx-pos-v18-pay {
    width:100% !important;

    min-height:36px !important;

    margin:0 !important;
    padding:5px 8px !important;

    border:0 !important;
    border-radius:7px !important;

    background:
      linear-gradient(
        135deg,
        #087d93,
        #12a8c5
      ) !important;

    color:#ffffff !important;
  }


  #content #checkoutForm .pay-now span {
    font-size:9px !important;
    font-weight:900 !important;
  }


  #content #checkoutForm .pay-now small {
    display:block !important;

    margin-top:1px !important;

    font-size:6px !important;
  }

}


/* =========================================================
   1366 LAPTOP
   ========================================================= */

@media (min-width:1100px) and (max-width:1366px) {

  #content .abx-pos-v18-workspace {
    grid-template-columns:
      minmax(0,1fr)
      355px !important;
  }

  #content #posProducts,
  #content .abx-pos-v18-products {
    grid-template-columns:
      repeat(3,minmax(0,1fr)) !important;
  }

}


/* =========================================================
   TABLET / MOBILE
   Keep existing ABOTRIX responsive behavior
   ========================================================= */

@media (max-width:1099px) {

  body:has(#content .abx-pos-v18) {
    overflow:auto !important;
  }

}

/* =========================================================
   ABOTRIX POS V19.2
   ORDER TYPE LABEL + SMALL RADIO CIRCLE FIX
   ========================================================= */

@media (min-width:1100px) {

  #content .order-toggle {
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:6px !important;
    width:100% !important;
  }

  #content .order-toggle label {
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:6px !important;

    width:100% !important;
    min-width:0 !important;
    min-height:36px !important;

    padding:6px 8px !important;

    border:1px solid #dbe3ec !important;
    border-radius:8px !important;

    background:#ffffff !important;
    color:#172033 !important;

    overflow:visible !important;
    opacity:1 !important;
    visibility:visible !important;
  }

  #content .order-toggle label input[type="radio"] {
    appearance:none !important;
    -webkit-appearance:none !important;

    flex:0 0 12px !important;

    width:12px !important;
    height:12px !important;
    min-width:12px !important;
    min-height:12px !important;

    margin:0 !important;

    border:1.5px solid #94a3b8 !important;
    border-radius:50% !important;

    background:#ffffff !important;

    position:relative !important;
  }

  #content .order-toggle label input[type="radio"]:checked {
    border-color:#1473e6 !important;
    box-shadow:inset 0 0 0 3px #ffffff !important;
    background:#1473e6 !important;
  }

  #content .order-toggle label span,
  #content .order-toggle label {
    font-size:9px !important;
    font-weight:800 !important;
    line-height:1.1 !important;

    white-space:nowrap !important;

    color:#172033 !important;

    opacity:1 !important;
    visibility:visible !important;
  }

}

/* =========================================================
   ABOTRIX POS V19.3
   TRANSACTION DETAILS NORMAL SIZE
   ========================================================= */

@media (min-width:1100px) {

  /* Transaction Details container */
  #content .pos-transaction-section,
  #content .transaction-details,
  #content .order-information {
    padding:10px 12px !important;
    margin:6px 0 !important;
    border-radius:10px !important;
  }

  /* Small section heading */
  #content .pos-transaction-section small,
  #content .transaction-details small,
  #content .order-information small {
    font-size:9px !important;
    line-height:1.2 !important;
  }

  /* Transaction Details title */
  #content .pos-transaction-section h3,
  #content .transaction-details h3,
  #content .order-information h3 {
    margin:2px 0 3px !important;
    font-size:14px !important;
    line-height:1.2 !important;
    font-weight:800 !important;
  }

  /* Description */
  #content .pos-transaction-section p,
  #content .transaction-details p,
  #content .order-information p {
    margin:0 0 7px !important;
    font-size:10px !important;
    line-height:1.3 !important;
  }

  /* Field labels */
  #content .pos-cart label,
  #content .transaction-details label {
    font-size:10px !important;
    line-height:1.2 !important;
  }

  /* Normal-size fields */
  #content .pos-cart input,
  #content .pos-cart select {
    min-height:34px !important;
    height:34px !important;
    padding:6px 9px !important;
    font-size:10px !important;
    border-radius:7px !important;
  }

  /* Notes remains usable without becoming huge */
  #content .pos-cart textarea {
    min-height:46px !important;
    max-height:58px !important;
    padding:7px 9px !important;
    font-size:10px !important;
    line-height:1.3 !important;
    border-radius:7px !important;
  }

  /* Order type should have enough room for text */
  #content .order-toggle {
    min-height:38px !important;
    margin-top:5px !important;
  }

  #content .order-toggle label {
    min-height:34px !important;
    padding:6px 7px !important;
  }

}

/* =========================================================
   ABOTRIX POS V19.4
   NORMAL ORDER SUMMARY
   ========================================================= */

@media (min-width:1100px) {

  /* Transaction Total / Order Summary card */
  #content .pos-order-summary,
  #content .order-summary,
  #content .totals-box {
    display:block !important;
    width:100% !important;

    padding:10px 12px !important;
    margin:6px 0 !important;

    border:1px solid #dce4ed !important;
    border-radius:10px !important;

    background:#fff !important;

    font-size:11px !important;
  }

  /* Every total line */
  #content .totals-box > div,
  #content .order-summary > div,
  #content .pos-order-summary > div {
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:space-between !important;

    width:100% !important;

    min-height:24px !important;
    padding:3px 0 !important;

    font-size:11px !important;
    line-height:1.25 !important;

    white-space:normal !important;
  }

  /* Labels */
  #content .totals-box > div > span:first-child,
  #content .order-summary > div > span:first-child,
  #content .pos-order-summary > div > span:first-child {
    display:block !important;

    font-size:11px !important;
    font-weight:600 !important;

    color:#475569 !important;

    white-space:nowrap !important;
  }

  /* Amounts */
  #content .totals-box > div > span:last-child,
  #content .order-summary > div > span:last-child,
  #content .pos-order-summary > div > span:last-child,
  #content .totals-box strong {
    display:block !important;

    margin-left:auto !important;

    font-size:11px !important;
    font-weight:800 !important;

    color:#0f172a !important;

    white-space:nowrap !important;
    text-align:right !important;
  }

  /* Final Total */
  #content .totals-box > div:last-child,
  #content .order-summary > div:last-child,
  #content .pos-order-summary > div:last-child {
    min-height:32px !important;

    margin-top:5px !important;
    padding-top:7px !important;

    border-top:1px solid #dce4ed !important;

    font-size:14px !important;
    font-weight:900 !important;
  }

  #content .totals-box > div:last-child *,
  #content .order-summary > div:last-child *,
  #content .pos-order-summary > div:last-child * {
    font-size:14px !important;
    font-weight:900 !important;
    color:#07182b !important;
  }

}

/* =========================================================
   ABOTRIX POS V19.5
   PAYMENT VISIBILITY + PAYMENT ICONS
   ========================================================= */

@media (min-width:1100px) {

  /* Give the checkout form extra breathing room at the bottom */
  #content #checkoutForm,
  #content .abx-pos-v18-checkout {
    padding-bottom:14px !important;
  }

  /* Keep payment button comfortably above the bottom edge */
  #content #checkoutForm .pay-now,
  #content .abx-pos-v18-pay {
    position:sticky !important;
    bottom:8px !important;

    min-height:52px !important;

    margin-top:8px !important;
    margin-bottom:4px !important;

    padding:8px 12px !important;

    border-radius:9px !important;

    box-shadow:
      0 6px 16px rgba(15,23,42,.14) !important;
  }

  #content #checkoutForm .pay-now span {
    font-size:12px !important;
  }

  #content #checkoutForm .pay-now small {
    font-size:7px !important;
  }


  /* =====================================================
     PAYMENT METHOD CARDS
     ===================================================== */

  #content .payment-method {
    position:relative !important;

    min-height:58px !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;

    gap:4px !important;

    padding:6px 4px !important;
  }

  #content .payment-method span {
    font-size:8px !important;
    font-weight:900 !important;
  }

  /* Hide default native radio visually but keep it functional */
  #content .payment-method input[type="radio"] {
    position:absolute !important;

    width:1px !important;
    height:1px !important;

    opacity:0 !important;
  }


  /* =====================================================
     ICON CIRCLES
     ===================================================== */

  #content .payment-method::before {
    content:"" !important;

    width:24px !important;
    height:24px !important;

    display:grid !important;
    place-items:center !important;

    border-radius:7px !important;

    background:#f1f5f9 !important;

    color:#0f172a !important;

    font-size:14px !important;
    font-weight:900 !important;

    line-height:1 !important;
  }


  /* CASH */
  #content .payment-method:has(input[value="CASH"])::before {
    content:"₱" !important;

    background:#ecfdf5 !important;

    color:#16a34a !important;
  }


  /* GCASH */
  #content .payment-method:has(input[value="GCASH"])::before {
    content:"G" !important;

    background:#eff6ff !important;

    color:#1677ff !important;

    border:1px solid #bfdbfe !important;

    border-radius:50% !important;
  }


  /* MAYA */
  #content .payment-method:has(input[value="MAYA"])::before {
    content:"M" !important;

    background:#ecfdf5 !important;

    color:#16a34a !important;

    font-family:Arial,sans-serif !important;
  }


  /* CARD */
  #content .payment-method:has(input[value="CARD"])::before {
    content:"▣" !important;

    background:#eff6ff !important;

    color:#2563eb !important;
  }


  /* Selected payment method */
  #content .payment-method:has(input[type="radio"]:checked) {
    border-color:#14b8a6 !important;

    background:#f0fdfa !important;

    box-shadow:
      0 0 0 1px rgba(20,184,166,.16) !important;
  }

}

/* =========================================================
   ABOTRIX POS V19.6
   MENU PRODUCT VISIBILITY FIX
   ========================================================= */

@media (min-width:1100px) {

  /* PRODUCT GRID */
  #content #posProducts,
  #content .abx-pos-v18-products,
  #content .pos-products {
    display:grid !important;

    grid-template-columns:
      repeat(4,minmax(0,1fr)) !important;

    grid-auto-rows:max-content !important;

    align-content:start !important;

    gap:8px !important;

    padding:2px 4px 10px 2px !important;

    overflow-y:auto !important;
    overflow-x:hidden !important;
  }


  /* COMPLETE PRODUCT CARD */
  #content .pos-product {
    min-width:0 !important;
    min-height:190px !important;

    display:flex !important;
    flex-direction:column !important;

    padding:7px !important;

    border:1px solid #dce4ed !important;
    border-radius:10px !important;

    background:#ffffff !important;

    overflow:hidden !important;
  }


  /* =====================================================
     PRODUCT IMAGE
     Make food clearly visible
     ===================================================== */

  #content .pos-product .product-icon,
  #content .pos-product img.product-icon,
  #content .pos-product .product-image,
  #content .pos-product img {
    display:block !important;

    width:100% !important;

    height:100px !important;
    min-height:100px !important;
    max-height:100px !important;

    margin:0 0 7px !important;

    border-radius:8px !important;

    object-fit:cover !important;
    object-position:center center !important;

    background:#f1f5f9 !important;
  }


  /* CATEGORY */
  #content .pos-product small {
    display:block !important;

    margin:0 0 3px !important;

    color:#64748b !important;

    font-size:8px !important;
    line-height:1.2 !important;

    opacity:1 !important;
    visibility:visible !important;
  }


  /* PRODUCT NAME */
  #content .pos-product strong {
    display:block !important;

    min-height:28px !important;

    margin:2px 0 5px !important;

    color:#111827 !important;

    font-size:12px !important;
    font-weight:900 !important;

    line-height:1.2 !important;

    opacity:1 !important;
    visibility:visible !important;

    overflow:visible !important;
  }


  /* PRICE / STOCK */
  #content .pos-product .product-foot {
    display:flex !important;

    align-items:center !important;
    justify-content:space-between !important;

    gap:6px !important;

    width:100% !important;

    margin:0 0 6px !important;
  }


  #content .pos-product .product-foot b {
    color:#07182b !important;

    font-size:11px !important;
    font-weight:900 !important;
  }


  #content .pos-product .product-foot span,
  #content .pos-product .product-foot small {
    color:#64748b !important;

    font-size:8px !important;

    white-space:nowrap !important;
  }


  /* ADD BUTTON */
  #content .pos-product button {
    width:100% !important;

    min-height:32px !important;

    margin-top:auto !important;
    padding:5px 7px !important;

    border:0 !important;
    border-radius:7px !important;

    background:#07182b !important;
    color:#ffffff !important;

    font-size:9px !important;
    font-weight:900 !important;
  }

}


/* 1366 LAPTOP:
   use 3 products per row so menu stays readable */

@media (min-width:1100px) and (max-width:1366px) {

  #content #posProducts,
  #content .abx-pos-v18-products,
  #content .pos-products {
    grid-template-columns:
      repeat(3,minmax(0,1fr)) !important;
  }

}

/* =========================================================
   ABOTRIX POS V19.7
   BIGGER PRODUCT IMAGE / DETAILS LOWER
   ========================================================= */

@media (min-width:1100px) {

  /* Slightly taller card */
  #content .pos-product {
    min-height:210px !important;
    padding:7px !important;
  }

  /* Make photo the main focus */
  #content .pos-product .product-icon,
  #content .pos-product img.product-icon,
  #content .pos-product .product-image,
  #content .pos-product img {
    width:100% !important;

    height:128px !important;
    min-height:128px !important;
    max-height:128px !important;

    margin:0 0 8px !important;

    object-fit:cover !important;
    object-position:center center !important;

    border-radius:8px !important;
  }

  /* Push all text/details beneath photo */
  #content .pos-product small {
    margin:0 0 3px !important;

    font-size:7px !important;
    line-height:1.1 !important;
  }

  #content .pos-product strong {
    min-height:22px !important;

    margin:2px 0 5px !important;

    font-size:11px !important;
    line-height:1.15 !important;
  }

  /* Price and stock stay on one clean lower row */
  #content .pos-product .product-foot {
    min-height:22px !important;

    margin-top:auto !important;
    margin-bottom:6px !important;

    display:flex !important;
    align-items:flex-end !important;
    justify-content:space-between !important;
  }

  #content .pos-product .product-foot b {
    font-size:10px !important;
  }

  #content .pos-product .product-foot span,
  #content .pos-product .product-foot small {
    margin:0 !important;

    font-size:7px !important;
  }

  /* Compact Add button at very bottom */
  #content .pos-product button {
    min-height:29px !important;

    margin:0 !important;
    padding:4px 7px !important;

    font-size:8px !important;
  }

}


/* Standard laptop */
@media (min-width:1100px) and (max-width:1366px) {

  #content .pos-product .product-icon,
  #content .pos-product img.product-icon,
  #content .pos-product .product-image,
  #content .pos-product img {
    height:112px !important;
    min-height:112px !important;
    max-height:112px !important;
  }

}

/* =========================================================
   ABOTRIX POS V19.8
   ELEGANT TOP BAR + ACTION BUTTON COLORS
   ========================================================= */

@media (min-width:1100px) {

  /* =====================================================
     TOP DEVICE STATUS BAR
     ===================================================== */

  #content .abx-pos-v18-device {
    border-color:#d6e5ef !important;

    background:
      linear-gradient(
        135deg,
        #ffffff 0%,
        #f8fcff 55%,
        #f2fbfd 100%
      ) !important;

    box-shadow:
      0 5px 16px rgba(7,24,43,.06) !important;
  }


  /* Active POS identity */
  #content .abx-pos-v18-device-label {
    padding:7px 10px !important;

    border:1px solid #c9e8ef !important;
    border-radius:9px !important;

    background:#effbfe !important;
  }

  #content .abx-pos-v18-device-label small {
    color:#0b91aa !important;
  }

  #content .abx-pos-v18-device-label strong {
    color:#06344a !important;
  }


  /* Branch */
  #content .abx-pos-v18-device-chip:nth-of-type(2) {
    border-color:#cfe2ff !important;

    background:#f1f6ff !important;
  }

  #content .abx-pos-v18-device-chip:nth-of-type(2) small {
    color:#3b82f6 !important;
  }


  /* Terminal */
  #content .abx-pos-v18-device-chip:nth-of-type(3) {
    border-color:#c9eee7 !important;

    background:#effcf9 !important;
  }

  #content .abx-pos-v18-device-chip:nth-of-type(3) small {
    color:#0f9f85 !important;
  }


  /* Receipt Printer */
  #content .abx-pos-v18-device-chip:nth-of-type(4) {
    border-color:#ddd6fe !important;

    background:#f7f5ff !important;
  }

  #content .abx-pos-v18-device-chip:nth-of-type(4) small {
    color:#7c5ce7 !important;
  }


  /* =====================================================
     TOP RIGHT BUTTONS
     ===================================================== */

  /* Change Device */
  #content .abx-pos-v18-device-actions
  button:nth-child(1) {
    border-color:#d8e0ea !important;

    background:#f8fafc !important;

    color:#334155 !important;
  }

  #content .abx-pos-v18-device-actions
  button:nth-child(1):hover {
    background:#eef2f7 !important;
  }


  /* Printer Center */
  #content .abx-pos-v18-device-actions
  button:nth-child(2) {
    border-color:#bfdbfe !important;

    background:#eff6ff !important;

    color:#1d4ed8 !important;
  }

  #content .abx-pos-v18-device-actions
  button:nth-child(2):hover {
    background:#dbeafe !important;
  }


  /* Customer Display */
  #content .abx-pos-v18-device-actions
  .abx-pos-v18-display {
    border-color:#a5e6ef !important;

    background:
      linear-gradient(
        135deg,
        #ecfeff,
        #e6f8ff
      ) !important;

    color:#087f96 !important;
  }

  #content .abx-pos-v18-device-actions
  .abx-pos-v18-display:hover {
    background:#d8f6fb !important;
  }


  /* =====================================================
     HOLD / RESUME / CLEAR BUTTONS
     ===================================================== */

  /* Hold */
  #content .abx-pos-v18-order-tools
  button:nth-child(1) {
    border-color:#fde68a !important;

    background:#fffbeb !important;

    color:#b45309 !important;
  }

  #content .abx-pos-v18-order-tools
  button:nth-child(1):hover {
    background:#fef3c7 !important;
  }


  /* Resume */
  #content .abx-pos-v18-order-tools
  button:nth-child(2) {
    border-color:#bfdbfe !important;

    background:#eff6ff !important;

    color:#1d4ed8 !important;
  }

  #content .abx-pos-v18-order-tools
  button:nth-child(2):hover {
    background:#dbeafe !important;
  }


  /* Clear */
  #content .abx-pos-v18-order-tools
  button:nth-child(3) {
    border-color:#fecaca !important;

    background:#fff1f2 !important;

    color:#dc2626 !important;
  }

  #content .abx-pos-v18-order-tools
  button:nth-child(3):hover {
    background:#ffe4e6 !important;
  }


  /* Slightly stronger hover feel */
  #content .abx-pos-v18-order-tools button,
  #content .abx-pos-v18-device-actions button {
    transition:
      background .16s ease,
      border-color .16s ease,
      transform .16s ease,
      box-shadow .16s ease !important;
  }

  #content .abx-pos-v18-order-tools button:hover,
  #content .abx-pos-v18-device-actions button:hover {
    transform:translateY(-1px) !important;

    box-shadow:
      0 4px 10px rgba(15,23,42,.08) !important;
  }

}

/* =========================================================
   ABOTRIX POS V19.9
   HOLD / RESUME / CLEAR CLICK REPAIR
   Prevent search field from covering action buttons
   ========================================================= */

@media (min-width:1100px) {

  /* Action buttons must always sit above the search area */
  #content .abx-pos-v18-order-tools {
    position:relative !important;
    z-index:30 !important;
    pointer-events:auto !important;
  }

  #content .abx-pos-v18-order-tools button {
    position:relative !important;
    z-index:31 !important;
    pointer-events:auto !important;
    cursor:pointer !important;
  }

  /* Search stays underneath the action buttons */
  #content .abx-pos-v18-search {
    position:relative !important;
    z-index:1 !important;
  }

  #content #posSearch {
    position:relative !important;
    z-index:1 !important;
  }

}


/* =========================================================
   ABOTRIX V22.8
   CASHIER POS — TWO PANEL SCREEN-FIT WORKSTATION

   LEFT  : Menu / Product Catalog
   RIGHT : Current Transaction / Checkout
   ========================================================= */

@media (min-width:1100px) {

  /* ---------------------------------------------------------
     MAIN TWO-COLUMN WORKSPACE
     --------------------------------------------------------- */

  #content .abx-pos-v18-workspace {
    width:100% !important;
    min-width:0 !important;

    flex:1 1 auto !important;

    height:0 !important;
    min-height:0 !important;

    display:grid !important;

    /*
       Drawing proportion:
       MENU        = 67%
       TRANSACTION = 33%
    */
    grid-template-columns:
      minmax(0, 2.05fr)
      minmax(340px, 1fr) !important;

    gap:12px !important;

    align-items:stretch !important;

    overflow:hidden !important;
  }


  /* ---------------------------------------------------------
     LEFT — MENU COLUMN
     --------------------------------------------------------- */

  #content .abx-pos-v18-catalog,
  #content .pos-catalog {
    width:100% !important;
    min-width:0 !important;

    height:100% !important;
    min-height:0 !important;
    max-height:100% !important;

    display:flex !important;
    flex-direction:column !important;

    overflow:hidden !important;

    border:1px solid #dbe4ee !important;
    border-radius:20px !important;

    background:#ffffff !important;

    box-shadow:
      0 8px 24px rgba(15,23,42,.055) !important;
  }


  /* Product area becomes LEFT panel internal scrollbar */

  #content #posProducts,
  #content .abx-pos-v18-products,
  #content .pos-products {
    flex:1 1 auto !important;

    width:100% !important;
    min-width:0 !important;

    height:0 !important;
    min-height:0 !important;

    overflow-y:auto !important;
    overflow-x:hidden !important;

    overscroll-behavior:contain !important;
    scrollbar-gutter:stable !important;
  }


  /* ---------------------------------------------------------
     RIGHT — TRANSACTION COLUMN
     --------------------------------------------------------- */

  #content .abx-pos-v18-order,
  #content .pos-cart {
    width:100% !important;
    min-width:0 !important;

    height:100% !important;
    min-height:0 !important;
    max-height:100% !important;

    display:flex !important;
    flex-direction:column !important;

    overflow:hidden !important;

    border:1px solid #dbe4ee !important;
    border-radius:20px !important;

    background:#ffffff !important;

    box-shadow:
      0 8px 24px rgba(15,23,42,.055) !important;
  }


  /* Keep Current Order heading visible */

  #content .abx-pos-v18-order-head {
    flex:0 0 auto !important;
  }


  /* Cart items stay inside transaction column */

  #content .abx-pos-v18-cart-lines,
  #content .cart-lines {
    flex:0 1 auto !important;

    min-height:70px !important;
    max-height:24vh !important;

    overflow-y:auto !important;
    overflow-x:hidden !important;

    overscroll-behavior:contain !important;
  }


  /* Checkout becomes RIGHT panel internal scroll area */

  #content #checkoutForm,
  #content .abx-pos-v18-checkout {
    flex:1 1 auto !important;

    width:100% !important;
    min-width:0 !important;

    height:0 !important;
    min-height:0 !important;

    overflow-y:auto !important;
    overflow-x:hidden !important;

    overscroll-behavior:contain !important;
    scrollbar-gutter:stable !important;

    padding-right:4px !important;
  }


  /* Prevent controls from forcing right column wider */

  #content .abx-pos-v18-order *,
  #content .pos-cart * {
    max-width:100%;
    box-sizing:border-box;
  }


  /* ---------------------------------------------------------
     MODERN INTERNAL SCROLLBARS
     --------------------------------------------------------- */

  #content #posProducts,
  #content #checkoutForm,
  #content .abx-pos-v18-cart-lines {
    scrollbar-width:thin;
    scrollbar-color:#7890a8 transparent;
  }

  #content #posProducts::-webkit-scrollbar,
  #content #checkoutForm::-webkit-scrollbar,
  #content .abx-pos-v18-cart-lines::-webkit-scrollbar {
    width:7px;
  }

  #content #posProducts::-webkit-scrollbar-track,
  #content #checkoutForm::-webkit-scrollbar-track,
  #content .abx-pos-v18-cart-lines::-webkit-scrollbar-track {
    background:transparent;
  }

  #content #posProducts::-webkit-scrollbar-thumb,
  #content #checkoutForm::-webkit-scrollbar-thumb,
  #content .abx-pos-v18-cart-lines::-webkit-scrollbar-thumb {
    background:#7890a8;
    border-radius:999px;
  }

}


/* =========================================================
   LAPTOP WIDTH
   Keep same two-column proportion instead of old fixed 355px
   ========================================================= */

@media (min-width:1100px) and (max-width:1366px) {

  #content .abx-pos-v18-workspace {
    grid-template-columns:
      minmax(0, 1.9fr)
      minmax(330px, 1fr) !important;

    gap:10px !important;
  }

}


/* =========================================================
   SMALLER TABLET
   Return to stacked layout when two columns become too narrow
   ========================================================= */

@media (max-width:1099px) {

  #content .abx-pos-v18-workspace {
    grid-template-columns:1fr !important;
  }

}


/* =========================================================
   ABOTRIX CASHIER POS V22.9
   COMPLETE ROUNDED TWO-COLUMN VIEW
   Visible top AND bottom edges
   ========================================================= */

@media (min-width:1100px) {

  /*
     Leave a visible breathing space at the bottom so the
     two large POS panels never look cut by the viewport.
  */
  #content .abx-pos-v18-workspace {
    flex:0 1 auto !important;

    height:calc(100% - 14px) !important;
    max-height:calc(100% - 14px) !important;
    min-height:0 !important;

    margin-bottom:14px !important;

    align-self:stretch !important;

    overflow:hidden !important;
  }


  /* =====================================================
     LEFT PANEL — MENU
     ===================================================== */

  #content .abx-pos-v18-catalog,
  #content .pos-catalog {
    height:100% !important;
    max-height:100% !important;
    min-height:0 !important;

    overflow:hidden !important;

    border:1px solid #d9e3ed !important;
    border-radius:20px !important;

    background:#ffffff !important;

    box-shadow:
      0 7px 22px rgba(15,35,55,.06) !important;
  }


  /* Product list scrolls INSIDE the rounded menu panel */

  #content #posProducts,
  #content .abx-pos-v18-products,
  #content .pos-products {
    flex:1 1 auto !important;

    height:0 !important;
    min-height:0 !important;

    overflow-y:auto !important;
    overflow-x:hidden !important;

    padding-bottom:12px !important;
  }


  /* =====================================================
     RIGHT PANEL — TRANSACTION
     ===================================================== */

  #content .abx-pos-v18-order,
  #content .pos-cart {
    height:100% !important;
    max-height:100% !important;
    min-height:0 !important;

    overflow:hidden !important;

    border:1px solid #d9e3ed !important;
    border-radius:20px !important;

    background:#ffffff !important;

    box-shadow:
      0 7px 22px rgba(15,35,55,.06) !important;
  }


  /*
     Checkout content scrolls INSIDE the transaction panel.
     Outer rounded box never moves.
  */

  #content #checkoutForm,
  #content .abx-pos-v18-checkout {
    flex:1 1 auto !important;

    height:0 !important;
    min-height:0 !important;

    overflow-y:auto !important;
    overflow-x:hidden !important;

    padding-bottom:14px !important;
  }


  /*
     Keep Complete Payment slightly away from the rounded
     bottom edge so it looks intentional and polished.
  */

  #content #checkoutForm .pay-now,
  #content #checkoutForm button[type="submit"] {
    margin-bottom:4px !important;
  }


  /* Bottom radius must always remain visible */

  #content .abx-pos-v18-catalog,
  #content .abx-pos-v18-order {
    clip-path:inset(0 round 20px) !important;
  }

}


/* Laptop screen */
@media (min-width:1100px) and (max-height:800px) {

  #content .abx-pos-v18-workspace {
    height:calc(100% - 10px) !important;
    max-height:calc(100% - 10px) !important;
    margin-bottom:10px !important;
  }

}

/* =========================================================
   ABOTRIX CASHIER POS V22.10
   DOUBLE-FRAME TWO-COLUMN SAAS DESIGN

   OUTER FRAME
      └── INNER MENU / TRANSACTION PANEL
   ========================================================= */

@media (min-width:1100px) {

  /* More breathing room between the two framed columns */
  #content .abx-pos-v18-workspace {
    gap:18px !important;

    padding:
      7px
      7px
      15px !important;

    overflow:visible !important;
  }


  /* =====================================================
     BOTH MAIN COLUMNS
     ===================================================== */

  #content .abx-pos-v18-catalog,
  #content .abx-pos-v18-order {
    position:relative !important;

    height:100% !important;
    min-height:0 !important;

    /*
      INNER PANEL
    */
    border:1px solid #cfdbe7 !important;
    border-radius:22px !important;

    background:#ffffff !important;

    /*
      OUTER FRAME:
      white spacing ring + blue-gray outer border
    */
    box-shadow:
      0 0 0 6px #f4f7fb,
      0 0 0 7px #b9cada,
      0 10px 30px rgba(15,35,55,.08) !important;

    overflow:hidden !important;
  }


  /* =====================================================
     LEFT MENU COLUMN
     ===================================================== */

  #content .abx-pos-v18-catalog {
    border-color:#bfcfdd !important;
  }


  /* =====================================================
     RIGHT TRANSACTION COLUMN
     ===================================================== */

  #content .abx-pos-v18-order {
    border-color:#bfcfdd !important;
  }


  /* =====================================================
     INNER SOFT EDGE
     Gives the card the same double-outline feeling
     as your drawing
     ===================================================== */

  #content .abx-pos-v18-catalog::before,
  #content .abx-pos-v18-order::before {
    content:"" !important;

    position:absolute !important;
    inset:5px !important;

    z-index:0 !important;

    border:1px solid rgba(77,111,146,.14) !important;
    border-radius:17px !important;

    pointer-events:none !important;
  }


  /*
    Keep actual POS content above the decorative inner line.
  */

  #content .abx-pos-v18-catalog > *,
  #content .abx-pos-v18-order > * {
    position:relative !important;
    z-index:1 !important;
  }


  /* =====================================================
     BOTTOM OF BOTH PANELS
     Ensure outer frame remains visible
     ===================================================== */

  #content .abx-pos-v18-workspace {
    height:calc(100% - 16px) !important;
    max-height:calc(100% - 16px) !important;

    margin-bottom:16px !important;
  }


  /* =====================================================
     INTERNAL SCROLLING ONLY
     ===================================================== */

  #content #posProducts {
    overflow-y:auto !important;
    overflow-x:hidden !important;
  }

  #content #checkoutForm {
    overflow-y:auto !important;
    overflow-x:hidden !important;
  }

}


/* =========================================================
   LAPTOP
   Keep double-frame safe on smaller desktop screens
   ========================================================= */

@media (min-width:1100px) and (max-width:1366px) {

  #content .abx-pos-v18-workspace {
    gap:16px !important;

    padding-left:7px !important;
    padding-right:7px !important;
  }

}

/* =========================================================
   ABOTRIX CASHIER POS V22.11
   FINAL ALIGNED TWO-COLUMN FRAME
   Menu + Transaction same top / same bottom
   ========================================================= */

@media (min-width:1100px) {

  /* ---------- MASTER TWO-COLUMN WORKSPACE ---------- */

  #content .abx-pos-v18-workspace {
    display:grid !important;

    grid-template-columns:
      minmax(0, 2fr)
      minmax(340px, 1fr) !important;

    gap:18px !important;

    /* Fill the available POS area */
    flex:1 1 auto !important;
    width:100% !important;

    height:calc(100% - 10px) !important;
    max-height:calc(100% - 10px) !important;
    min-height:0 !important;

    margin:0 0 10px 0 !important;

    /* Equal vertical alignment */
    align-items:stretch !important;
    align-content:stretch !important;

    /* Small space for the OUTER frame */
    padding:6px !important;

    box-sizing:border-box !important;
    overflow:hidden !important;
  }


  /* ---------- BOTH MAIN PANELS ---------- */

  #content .abx-pos-v18-catalog,
  #content .pos-catalog,
  #content .abx-pos-v18-order,
  #content .pos-cart {

    position:relative !important;

    align-self:stretch !important;

    width:100% !important;
    min-width:0 !important;

    height:100% !important;
    min-height:0 !important;
    max-height:100% !important;

    margin:0 !important;

    box-sizing:border-box !important;

    background:#ffffff !important;

    border:1px solid #cbd9e7 !important;
    border-radius:20px !important;

    box-shadow:
      0 5px 18px rgba(15,35,55,.055) !important;

    overflow:hidden !important;
  }


  /* ---------- CLEAN OUTER FRAME ---------- */

  #content .abx-pos-v18-catalog::before,
  #content .abx-pos-v18-order::before {
    content:"" !important;

    position:absolute !important;

    inset:5px !important;

    border:1px solid #d9e5f0 !important;
    border-radius:16px !important;

    pointer-events:none !important;

    z-index:0 !important;
  }


  /* Content remains above decorative inner frame */

  #content .abx-pos-v18-catalog > *,
  #content .abx-pos-v18-order > * {
    position:relative !important;
    z-index:1 !important;
  }


  /* ---------- LEFT MENU INTERNAL SCROLL ---------- */

  #content #posProducts {
    flex:1 1 auto !important;

    min-height:0 !important;
    height:0 !important;

    overflow-y:auto !important;
    overflow-x:hidden !important;

    overscroll-behavior:contain !important;
  }


  /* ---------- RIGHT TRANSACTION INTERNAL SCROLL ---------- */

  #content #checkoutForm,
  #content .abx-pos-v18-checkout {
    flex:1 1 auto !important;

    min-height:0 !important;
    height:0 !important;

    overflow-y:auto !important;
    overflow-x:hidden !important;

    overscroll-behavior:contain !important;
  }


  /* Never allow Current Order to drop below Menu */

  #content .abx-pos-v18-order {
    top:auto !important;
    bottom:auto !important;
    transform:none !important;

    margin-top:0 !important;
    margin-bottom:0 !important;
  }
}


/* =========================================================
   LAPTOP WIDTH
   ========================================================= */

@media (min-width:1100px) and (max-width:1366px) {

  #content .abx-pos-v18-workspace {
    grid-template-columns:
      minmax(0, 1.9fr)
      minmax(330px, .95fr) !important;

    gap:14px !important;
  }

}


/* =========================================================
   ABOTRIX CASHIER POS V22.12
   CURRENT ORDER SAFE SCROLL LAYOUT
   No overlapping Complete Payment button
   ========================================================= */

@media (min-width:1100px) {

  /* RIGHT COLUMN = fixed shell */
  #content .abx-pos-v18-order,
  #content .pos-cart {
    display:flex !important;
    flex-direction:column !important;

    height:100% !important;
    min-height:0 !important;

    overflow:hidden !important;
  }


  /* Current Order header stays visible */
  #content .abx-pos-v18-order-head,
  #content .cart-heading {
    flex:0 0 auto !important;

    position:relative !important;
    z-index:20 !important;

    background:#ffffff !important;
  }


  /* =====================================================
     CHECKOUT BODY
     This becomes the ONLY vertical scroll region
     ===================================================== */

  #content #checkoutForm,
  #content .abx-pos-v18-checkout {
    flex:1 1 auto !important;

    display:flex !important;
    flex-direction:column !important;

    height:0 !important;
    min-height:0 !important;

    overflow-y:auto !important;
    overflow-x:hidden !important;

    overscroll-behavior:contain !important;
    scrollbar-gutter:stable !important;

    padding-bottom:14px !important;
  }


  /* All transaction sections remain in normal document flow */
  #content #checkoutForm > *,
  #content .abx-pos-v18-checkout > * {
    position:relative !important;
    top:auto !important;
    bottom:auto !important;
    transform:none !important;

    flex-shrink:0 !important;
  }


  /* =====================================================
     TRANSACTION TOTAL / ORDER SUMMARY
     Must never be covered
     ===================================================== */

  #content .pos-order-summary,
  #content .transaction-total,
  #content .order-summary {
    position:relative !important;

    z-index:2 !important;

    margin-top:8px !important;
    margin-bottom:8px !important;

    background:#ffffff !important;
  }


  /* =====================================================
     PAYMENT SECTION
     Keep inside flow and clear of summary
     ===================================================== */

  #content .pos-payment-section,
  #content .payment-section,
  #content .payment-methods {
    position:relative !important;

    margin-top:8px !important;
    margin-bottom:8px !important;

    background:#ffffff !important;
  }


  /* =====================================================
     COMPLETE PAYMENT
     Sticky at bottom of RIGHT panel,
     but reserves its own space and does not cover content.
     ===================================================== */

  #content #checkoutForm button[type="submit"],
  #content #checkoutForm .pay-now,
  #content #checkoutForm .complete-payment {
    position:sticky !important;
    bottom:0 !important;

    z-index:30 !important;

    flex:0 0 auto !important;

    width:100% !important;

    margin-top:10px !important;
    margin-bottom:0 !important;

    box-shadow:
      0 -8px 18px rgba(15,23,42,.08) !important;
  }


  /* Give content extra breathing room above sticky button */
  #content #checkoutForm::after {
    content:"" !important;
    display:block !important;

    height:10px !important;
    flex:0 0 10px !important;
  }


  /* =====================================================
     INTERNAL RIGHT SCROLLBAR
     ===================================================== */

  #content #checkoutForm {
    scrollbar-width:thin !important;
    scrollbar-color:#70869b transparent !important;
  }

  #content #checkoutForm::-webkit-scrollbar {
    width:7px !important;
  }

  #content #checkoutForm::-webkit-scrollbar-track {
    background:transparent !important;
  }

  #content #checkoutForm::-webkit-scrollbar-thumb {
    background:#70869b !important;
    border-radius:999px !important;
  }

}


/* =========================================================
   ABOTRIX CASHIER POS V22.13
   CURRENT ORDER NATURAL SCROLL
   Complete Payment NEVER covers transaction details
   ========================================================= */

@media (min-width:1100px) {

  /* Right column stays a fixed-height shell */
  #content .abx-pos-v18-order,
  #content .pos-cart {
    display:flex !important;
    flex-direction:column !important;

    height:100% !important;
    min-height:0 !important;

    overflow:hidden !important;
  }


  /* Current Order title stays at top */
  #content .abx-pos-v18-order-head,
  #content .cart-heading {
    flex:0 0 auto !important;

    position:relative !important;
    top:auto !important;
    bottom:auto !important;

    z-index:5 !important;

    background:#ffffff !important;
  }


  /* =====================================================
     ENTIRE TRANSACTION BODY = ONE SCROLL AREA
     ===================================================== */

  #content #checkoutForm,
  #content .abx-pos-v18-checkout {
    flex:1 1 auto !important;

    display:block !important;

    height:0 !important;
    min-height:0 !important;

    overflow-y:auto !important;
    overflow-x:hidden !important;

    position:relative !important;

    padding-bottom:14px !important;

    overscroll-behavior:contain !important;
    scrollbar-gutter:stable !important;
  }


  /*
     Every transaction section stays in normal document flow.
     No floating cards.
  */

  #content #checkoutForm > * {
    position:relative !important;

    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;

    transform:none !important;

    z-index:auto !important;
  }


  /* =====================================================
     COMPLETE PAYMENT
     IMPORTANT: NOT STICKY
     ===================================================== */

  #content #checkoutForm button[type="submit"],
  #content #checkoutForm .pay-now,
  #content #checkoutForm .complete-payment {

    position:relative !important;

    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;

    z-index:1 !important;

    display:block !important;

    width:100% !important;

    margin-top:10px !important;
    margin-bottom:8px !important;

    transform:none !important;

    box-shadow:none !important;
  }


  /* Order Summary stays normal */
  #content .pos-order-summary,
  #content .transaction-total,
  #content .order-summary {
    position:relative !important;

    top:auto !important;
    bottom:auto !important;

    margin-top:8px !important;
    margin-bottom:8px !important;

    z-index:1 !important;
  }


  /* Payment method area stays below Order Summary */
  #content .pos-payment-section,
  #content .payment-section,
  #content .payment-methods {
    position:relative !important;

    top:auto !important;
    bottom:auto !important;

    margin-top:8px !important;

    z-index:1 !important;
  }


  /* Remove old fake space used by sticky payment button */
  #content #checkoutForm::after {
    content:none !important;
    display:none !important;
  }

}

/* =========================================================
   ABOTRIX CASHIER POS V22.14
   SEARCH BORDER + HOLD/RESUME/CLEAR CLICK FIX
   ========================================================= */

@media (min-width:1100px) {

  /* -------------------------------------------------------
     TOP CATALOG TOOLBAR
     Prevent invisible layers from covering the buttons
     ------------------------------------------------------- */

  #content .abx-pos-v18-section-head {
    position:relative !important;
    z-index:50 !important;

    pointer-events:none !important;

    overflow:visible !important;
  }

  #content .abx-pos-v18-order-tools {
    position:relative !important;
    z-index:100 !important;

    pointer-events:auto !important;

    display:flex !important;
    align-items:center !important;
    gap:7px !important;
  }

  #content .abx-pos-v18-order-tools button {
    position:relative !important;
    z-index:101 !important;

    pointer-events:auto !important;
    cursor:pointer !important;

    isolation:isolate !important;
  }


  /* -------------------------------------------------------
     SEARCH BOX
     Give the complete outside edge a visible SaaS border
     ------------------------------------------------------- */

  #content .abx-pos-v18-search {
    position:relative !important;
    z-index:20 !important;

    width:100% !important;

    padding:3px !important;

    border:1px solid #c9d8e6 !important;
    border-radius:11px !important;

    background:#f8fbfd !important;

    box-shadow:
      0 1px 2px rgba(15,23,42,.04),
      inset 0 0 0 1px rgba(255,255,255,.8) !important;

    box-sizing:border-box !important;

    pointer-events:auto !important;
  }

  #content #posSearch {
    position:relative !important;
    z-index:21 !important;

    width:100% !important;

    border:1px solid #d7e2ec !important;
    border-radius:8px !important;

    outline:none !important;

    background:#ffffff !important;

    box-shadow:none !important;

    pointer-events:auto !important;
  }

  #content .abx-pos-v18-search:focus-within {
    border-color:#19a7c4 !important;

    box-shadow:
      0 0 0 3px rgba(25,167,196,.12) !important;
  }

  #content #posSearch:focus {
    border-color:#61bfd2 !important;
  }


  /* -------------------------------------------------------
     ENSURE DECORATIVE POS FRAMES CANNOT INTERCEPT CLICKS
     ------------------------------------------------------- */

  #content .abx-pos-v18-catalog::before,
  #content .abx-pos-v18-order::before {
    pointer-events:none !important;
  }

}

/* =========================================================
   ABOTRIX POS V22.15
   CLEAN SEARCH BAR — REMOVE WHITE/BLURRED OVERLAY
   ========================================================= */

@media (min-width:1100px) {

  /* Search container should NOT look like a second input */
  #content .abx-pos-v18-search {
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    outline:0 !important;

    padding:0 !important;

    position:relative !important;
    z-index:20 !important;

    pointer-events:auto !important;
  }

  /* Remove any decorative overlay */
  #content .abx-pos-v18-search::before,
  #content .abx-pos-v18-search::after {
    content:none !important;
    display:none !important;
  }

  /* The actual search input becomes the ONE visible box */
  #content #posSearch {
    display:block !important;

    width:100% !important;
    height:40px !important;

    padding:0 14px !important;

    background:#ffffff !important;

    border:1px solid #cbd8e6 !important;
    border-radius:10px !important;

    outline:none !important;

    box-shadow:
      0 1px 2px rgba(15,23,42,.04) !important;

    color:#0f2742 !important;

    opacity:1 !important;

    filter:none !important;
    backdrop-filter:none !important;

    position:relative !important;
    z-index:21 !important;

    pointer-events:auto !important;

    transition:
      border-color .15s ease,
      box-shadow .15s ease !important;
  }

  #content #posSearch::placeholder {
    color:#718096 !important;
    opacity:1 !important;
  }

  /* Modern SaaS focus state */
  #content #posSearch:focus {
    background:#ffffff !important;

    border-color:#16a6c5 !important;

    box-shadow:
      0 0 0 3px rgba(22,166,197,.12),
      0 1px 2px rgba(15,23,42,.05) !important;
  }

  /* Kill the old wrapper focus glow */
  #content .abx-pos-v18-search:focus-within {
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }

}

/* =========================================================
   ABOTRIX POS V22.16
   REMOVE SEARCH-AREA FRAME OVERLAY
   Preserve clean double-panel SaaS frame
   ========================================================= */

@media (min-width:1100px) {

  /* -------------------------------------------------------
     REMOVE OLD PSEUDO INNER FRAME
     It was visually crossing the toolbar/search area.
     ------------------------------------------------------- */

  #content .abx-pos-v18-catalog::before,
  #content .abx-pos-v18-order::before {
    content:none !important;
    display:none !important;
  }


  /* -------------------------------------------------------
     RECREATE INNER FRAME SAFELY AS INSET SHADOW
     This stays on the panel edge only.
     ------------------------------------------------------- */

  #content .abx-pos-v18-catalog,
  #content .abx-pos-v18-order {
    box-shadow:
      inset 0 0 0 1px #d8e4ee,
      0 5px 18px rgba(15,35,55,.055) !important;
  }


  /* -------------------------------------------------------
     SEARCH INPUT — ONE CLEAN VISIBLE SURFACE
     ------------------------------------------------------- */

  #content .abx-pos-v18-search {
    background:transparent !important;
    border:0 !important;
    outline:0 !important;
    box-shadow:none !important;

    padding:0 !important;
    margin:0 !important;

    overflow:visible !important;
  }

  #content #posSearch {
    width:100% !important;
    height:40px !important;

    padding:0 14px !important;

    background:#ffffff !important;

    border:1px solid #afc3d6 !important;
    border-radius:9px !important;

    box-shadow:
      0 1px 3px rgba(15,23,42,.06) !important;

    outline:none !important;

    opacity:1 !important;
    filter:none !important;
    backdrop-filter:none !important;
  }


  /* Strong but clean focus effect */

  #content #posSearch:focus {
    border-color:#159fbd !important;

    box-shadow:
      0 0 0 2px rgba(21,159,189,.13),
      0 1px 3px rgba(15,23,42,.06) !important;
  }


  /* -------------------------------------------------------
     TOOLBAR AREA
     Solid background prevents any frame showing through.
     ------------------------------------------------------- */

  #content .abx-pos-v18-section-head,
  #content .abx-pos-v18-search {
    background:#ffffff !important;
  }


  /* Buttons remain clickable and unchanged */

  #content .abx-pos-v18-order-tools,
  #content .abx-pos-v18-order-tools button {
    pointer-events:auto !important;
  }

}

/* =========================================================
   ABOTRIX POS V22.17
   CLEAN SEARCH + ACTION BUTTON TOOLBAR
   ========================================================= */

@media (min-width:1100px) {

  #content .abx-pos-v18-section-head {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 72px 72px 72px !important;
    align-items:center !important;
    column-gap:10px !important;

    width:100% !important;
    padding:10px 12px !important;
    margin:0 !important;

    background:#ffffff !important;
    border:0 !important;
    box-shadow:none !important;
    outline:none !important;
  }

  #content .abx-pos-v18-section-head::before,
  #content .abx-pos-v18-section-head::after,
  #content .abx-pos-v18-search::before,
  #content .abx-pos-v18-search::after,
  #content .abx-pos-v18-order-tools::before,
  #content .abx-pos-v18-order-tools::after {
    content:none !important;
    display:none !important;
  }

  #content .abx-pos-v18-search {
    grid-column:1 !important;

    width:100% !important;
    min-width:0 !important;

    margin:0 !important;
    padding:0 !important;

    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    outline:none !important;
  }

  #content #posSearch {
    display:block !important;

    width:100% !important;
    height:44px !important;
    box-sizing:border-box !important;

    margin:0 !important;
    padding:0 15px !important;

    background:#ffffff !important;

    border:1px solid #9eb6cc !important;
    border-radius:8px !important;

    outline:none !important;
    box-shadow:none !important;

    opacity:1 !important;
    filter:none !important;
    backdrop-filter:none !important;
  }

  #content #posSearch:focus {
    border-color:#159fbd !important;
    box-shadow:0 0 0 2px rgba(21,159,189,.10) !important;
  }

  #content .abx-pos-v18-order-tools {
    display:contents !important;
  }

  #content .abx-pos-v18-order-tools button {
    width:72px !important;
    min-width:72px !important;
    height:44px !important;

    margin:0 !important;
    padding:0 8px !important;

    border-radius:8px !important;

    position:relative !important;
    inset:auto !important;
    transform:none !important;

    pointer-events:auto !important;
    cursor:pointer !important;

    box-shadow:none !important;
  }

  #content .abx-pos-v18-order-tools button:nth-child(1) {
    grid-column:2 !important;

    background:#fffaf0 !important;
    border:1px solid #f2c94c !important;
    color:#a35b00 !important;
  }

  #content .abx-pos-v18-order-tools button:nth-child(2) {
    grid-column:3 !important;

    background:#f3f8ff !important;
    border:1px solid #a9c9ff !important;
    color:#075dcc !important;
  }

  #content .abx-pos-v18-order-tools button:nth-child(3) {
    grid-column:4 !important;

    background:#fff5f5 !important;
    border:1px solid #ffb5b5 !important;
    color:#d82323 !important;
  }

}


/* =========================================================
   ABOTRIX POS V22.18
   TRUE SINGLE-ROW SEARCH + ACTION TOOLBAR
   Search | Hold | Resume | Clear
   ========================================================= */

@media (min-width:1100px) {

  /* -------------------------------------------------------
     MENU PANEL MASTER GRID
     ------------------------------------------------------- */

  #content .abx-pos-v18-catalog {
    display:grid !important;

    grid-template-columns:
      minmax(0,1fr)
      68px
      68px
      68px !important;

    grid-template-rows:
      42px
      38px
      minmax(0,1fr) !important;

    column-gap:8px !important;
    row-gap:6px !important;

    align-items:center !important;

    padding:10px !important;

    min-height:0 !important;
    overflow:hidden !important;
  }


  /* -------------------------------------------------------
     HEADER BECOMES TRANSPARENT TO THE GRID
     This allows its buttons to sit beside Search.
     ------------------------------------------------------- */

  #content .abx-pos-v18-section-head {
    display:contents !important;
  }

  /* Old hidden title remains hidden */
  #content .abx-pos-v18-section-head > div:first-child {
    display:none !important;
  }


  /* -------------------------------------------------------
     SEARCH — TOP LEFT
     ------------------------------------------------------- */

  #content .abx-pos-v18-search {
    grid-column:1 !important;
    grid-row:1 !important;

    width:100% !important;
    min-width:0 !important;

    margin:0 !important;
    padding:0 !important;

    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;

    box-shadow:none !important;
    outline:none !important;

    position:relative !important;
    z-index:10 !important;
  }

  #content #posSearch {
    width:100% !important;
    height:40px !important;

    margin:0 !important;
    padding:0 14px !important;

    box-sizing:border-box !important;

    background:#ffffff !important;

    border:1px solid #aebfd0 !important;
    border-radius:8px !important;

    box-shadow:none !important;
    outline:none !important;

    position:relative !important;
    inset:auto !important;

    opacity:1 !important;
    filter:none !important;
    backdrop-filter:none !important;
  }

  #content #posSearch:focus {
    border-color:#169fbd !important;

    box-shadow:
      0 0 0 2px rgba(22,159,189,.10) !important;
  }


  /* -------------------------------------------------------
     ACTION BUTTON GROUP
     ------------------------------------------------------- */

  #content .abx-pos-v18-order-tools {
    display:contents !important;
  }

  #content .abx-pos-v18-order-tools button {
    width:68px !important;
    min-width:68px !important;
    max-width:68px !important;

    height:40px !important;
    min-height:40px !important;

    padding:0 5px !important;
    margin:0 !important;

    border-radius:8px !important;

    position:relative !important;
    inset:auto !important;

    transform:none !important;

    z-index:20 !important;

    pointer-events:auto !important;
    cursor:pointer !important;

    font-size:8px !important;
    font-weight:800 !important;

    box-shadow:none !important;
  }


  /* HOLD */
  #content .abx-pos-v18-order-tools button:nth-child(1) {
    grid-column:2 !important;
    grid-row:1 !important;

    background:#fffaf0 !important;
    border:1px solid #efc84a !important;
    color:#a65b00 !important;
  }


  /* RESUME */
  #content .abx-pos-v18-order-tools button:nth-child(2) {
    grid-column:3 !important;
    grid-row:1 !important;

    background:#f4f8ff !important;
    border:1px solid #a9c7f8 !important;
    color:#075ccd !important;
  }


  /* CLEAR */
  #content .abx-pos-v18-order-tools button:nth-child(3) {
    grid-column:4 !important;
    grid-row:1 !important;

    background:#fff5f5 !important;
    border:1px solid #ffb4b4 !important;
    color:#d82323 !important;
  }


  /* -------------------------------------------------------
     CATEGORIES — SECOND ROW
     ------------------------------------------------------- */

  #content .abx-pos-v18-categories,
  #content .pos-categories {
    grid-column:1 / -1 !important;
    grid-row:2 !important;

    width:100% !important;

    margin:0 !important;
    padding:0 !important;

    align-self:center !important;
  }


  /* -------------------------------------------------------
     PRODUCTS — THIRD ROW / INTERNAL SCROLL
     ------------------------------------------------------- */

  #content #posProducts,
  #content .abx-pos-v18-products,
  #content .pos-products {
    grid-column:1 / -1 !important;
    grid-row:3 !important;

    width:100% !important;
    height:100% !important;

    min-width:0 !important;
    min-height:0 !important;

    overflow-y:auto !important;
    overflow-x:hidden !important;

    margin:0 !important;
  }


  /* Remove old pseudo overlays */
  #content .abx-pos-v18-search::before,
  #content .abx-pos-v18-search::after,
  #content .abx-pos-v18-section-head::before,
  #content .abx-pos-v18-section-head::after {
    content:none !important;
    display:none !important;
  }

}


/* =========================================================
   ABOTRIX POS V22.19
   CLEAN SEARCH FIELD - NO WHITE OVERLAY
   ========================================================= */

@media (min-width:1100px) {

  /* Search wrapper completely transparent */
  #content .abx-pos-v18-search {
    background:transparent !important;
    background-image:none !important;

    border:0 !important;
    box-shadow:none !important;
    outline:none !important;

    filter:none !important;
    backdrop-filter:none !important;

    opacity:1 !important;
  }

  /* Remove every pseudo overlay */
  #content .abx-pos-v18-search::before,
  #content .abx-pos-v18-search::after,
  #content #posSearch::before,
  #content #posSearch::after {
    content:none !important;
    display:none !important;
  }

  /* Actual search field */
  #content #posSearch {
    width:100% !important;
    height:40px !important;

    padding:0 14px !important;

    /* no solid white overlay */
    background:#f7fafc !important;
    background-image:none !important;

    border:1px solid #8fa9c0 !important;
    border-radius:8px !important;

    box-shadow:none !important;
    outline:none !important;

    filter:none !important;
    backdrop-filter:none !important;

    opacity:1 !important;

    color:#17324d !important;
  }

  #content #posSearch::placeholder {
    color:#647b91 !important;
    opacity:1 !important;
  }

  /* Clean modern focus */
  #content #posSearch:focus {
    background:#ffffff !important;

    border-color:#159fbd !important;

    box-shadow:
      0 0 0 2px rgba(21,159,189,.10) !important;
  }

}