/* =============================================================================
   Order items popup 2026 (gx) - the popup behind the cart icon on a delivery
   card and the grocery button on Add Order. Built by js/order-items-2026.js.

   Everything is scoped to .show-modal.gx-modal (the popup) or body.gx-open
   (the blurred backdrop). Both classes are added when this popup opens and
   removed when it closes, so no other popup is affected.

   The long selectors are deliberate: common.css forces sizes on everything
   inside a modal with !important, and these have to outrank it.

   TO SWITCH OFF: remove the two "order-items-2026" lines from
   include-files/common-css.php and include-files/common-js.php.
   ============================================================================= */
body.gx-open .modal-overlay{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:rgba(15,23,42,.55)!important;opacity:1!important}
/* common.css gives the invisible .modal wrapper different positions on phone and desktop and clips
   what does not fit; for this popup it is simply centred and never clips. */
.modal.show-modal.gx-modal{top:50%!important;bottom:auto!important;left:50%!important;width:100%!important;max-width:none!important;max-height:none!important;height:auto!important;overflow:visible!important;-webkit-transform:translate(-50%,-50%)!important;transform:translate(-50%,-50%)!important}
.modal.show-modal.gx-modal .modal-content{display:flex!important;flex-direction:column;width:96%!important;max-width:440px!important;max-height:94vh!important;max-height:94dvh!important;min-height:0!important;height:auto!important;padding:0!important;margin:0 auto!important;overflow:hidden!important;border-radius:16px;background:#fff;box-shadow:0 20px 50px rgba(0,0,0,.35);text-align:left}
.modal.show-modal.gx-modal .modal-content .gx,.modal.show-modal.gx-modal .modal-content .gx *{font-size:inherit!important;line-height:inherit!important;box-sizing:border-box}
.modal.show-modal.gx-modal .modal-content .gx{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;color:#0f172a;font-size:13.5px!important;line-height:1.35!important}
.modal.show-modal.gx-modal .modal-content .gx .gx-head{display:flex;align-items:center;gap:10px;flex:0 0 auto;padding:12px 14px 10px;border-bottom:1px solid #e5e7eb}
.modal.show-modal.gx-modal .modal-content .gx .gx-title{flex:1 1 auto;min-width:0}
.modal.show-modal.gx-modal .modal-content .gx .gx-name{font-size:16px!important;font-weight:600;overflow-wrap:anywhere}
.modal.show-modal.gx-modal .modal-content .gx .gx-sub{font-size:12px!important;color:#64748b;margin-top:1px}
.modal.show-modal.gx-modal .modal-content .gx .gx-icon-btn{flex:0 0 auto;width:38px;height:38px;border:0;border-radius:10px;background:#eef4ff;color:#2563eb;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.modal.show-modal.gx-modal .modal-content .gx .gx-icon-btn .material-icons{font-size:20px!important;line-height:1!important;color:#2563eb}
.modal.show-modal.gx-modal .modal-content .gx .gx-search{position:relative;flex:0 0 auto;padding:8px 14px;border-bottom:1px solid #e5e7eb;background:#f8fafc}
.modal.show-modal.gx-modal .modal-content .gx .gx-search input.gx-search-input{display:block;width:100%!important;height:42px!important;margin:0!important;padding:0 40px 0 12px!important;border:1px solid #cbd5e1!important;border-radius:10px!important;background:#fff!important;box-shadow:none!important;font-size:16px!important;color:#0f172a}
.modal.show-modal.gx-modal .modal-content .gx .gx-search input.gx-search-input:focus{border-color:#2563eb!important;box-shadow:0 0 0 3px rgba(37,99,235,.15)!important}
.modal.show-modal.gx-modal .modal-content .gx .gx-search-clear{position:absolute;right:18px;top:50%;transform:translateY(-50%);width:32px;height:32px;border:0;background:transparent;color:#64748b;font-size:22px!important;line-height:1!important;cursor:pointer;padding:0}
.modal.show-modal.gx-modal .modal-content .gx .gx-hint{margin-top:6px;font-size:12px!important;color:#b45309}
.modal.show-modal.gx-modal .modal-content .gx .gx-body{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:2px 14px 8px}
.modal.show-modal.gx-modal .modal-content .gx .gx-results{margin:8px 0;border:1px solid #cbd5e1;border-radius:10px;overflow:hidden;background:#fff}
.modal.show-modal.gx-modal .modal-content .gx .gx-res{display:flex;width:100%;align-items:center;justify-content:space-between;gap:10px;min-height:46px;margin:0;padding:8px 12px;border:0;border-bottom:1px solid #eef2f7;border-radius:0;background:#fff;color:#0f172a;text-align:left;cursor:pointer;font-size:14px!important}
.modal.show-modal.gx-modal .modal-content .gx .gx-res:last-child{border-bottom:0}
.modal.show-modal.gx-modal .modal-content .gx .gx-res:active{background:#eef4ff}
.modal.show-modal.gx-modal .modal-content .gx .gx-res-n{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.modal.show-modal.gx-modal .modal-content .gx .gx-res-p{flex:0 0 auto;font-weight:600;white-space:nowrap}
.modal.show-modal.gx-modal .modal-content .gx .gx-res-tag{display:inline-block;margin-left:6px;font-size:11px!important;color:#b45309}
.modal.show-modal.gx-modal .modal-content .gx .gx-note{padding:12px;color:#64748b}
.modal.show-modal.gx-modal .modal-content .gx .gx-sec{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:10px 0 2px;font-size:11px!important;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#64748b}
.modal.show-modal.gx-modal .modal-content .gx .gx-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:5px 0;border-bottom:1px solid #f1f5f9;-webkit-column-break-inside:avoid;break-inside:avoid}
.modal.show-modal.gx-modal .modal-content .gx .gx-n{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.modal.show-modal.gx-modal .modal-content .gx .gx-q{color:#64748b;white-space:nowrap}
.modal.show-modal.gx-modal .modal-content .gx .gx-amt{flex:0 0 auto;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.modal.show-modal.gx-modal .modal-content .gx .gx-tag{display:inline-block;min-width:26px;margin-right:6px;padding:0 5px;border-radius:5px;background:#fef3c7;color:#92400e;font-size:11px!important;font-weight:700;text-align:center}
.modal.show-modal.gx-modal .modal-content .gx .gx-empty{padding:14px 0;color:#94a3b8;text-align:center}
.modal.show-modal.gx-modal .modal-content .gx .gx-erow{padding:8px 0;border-bottom:1px solid #f1f5f9;transition:background-color .3s}
.modal.show-modal.gx-modal .modal-content .gx .gx-erow.gx-flash{background:#ecfdf5}
.modal.show-modal.gx-modal .modal-content .gx .gx-ename{font-weight:500;overflow-wrap:anywhere;margin-bottom:6px}
.modal.show-modal.gx-modal .modal-content .gx .gx-ectl{display:flex;align-items:center;gap:5px}
.modal.show-modal.gx-modal .modal-content .gx .gx-ectl input{flex:0 0 auto;height:36px!important;margin:0!important;padding:0 4px!important;border:1px solid #cbd5e1!important;border-radius:8px!important;background:#fff!important;box-shadow:none!important;font-size:16px!important;color:#0f172a;text-align:center;-moz-appearance:textfield;appearance:textfield}
.modal.show-modal.gx-modal .modal-content .gx .gx-ectl input::-webkit-outer-spin-button,.modal.show-modal.gx-modal .modal-content .gx .gx-ectl input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.modal.show-modal.gx-modal .modal-content .gx .gx-ectl input:focus{border-color:#2563eb!important}
.modal.show-modal.gx-modal .modal-content .gx .gx-ectl input.price-input{width:64px!important}
.modal.show-modal.gx-modal .modal-content .gx .gx-ectl input.qty-input{width:46px!important}
.modal.show-modal.gx-modal .modal-content .gx .gx-rs,.modal.show-modal.gx-modal .modal-content .gx .gx-x{flex:0 0 auto;color:#64748b}
.modal.show-modal.gx-modal .modal-content .gx .gx-step{flex:0 0 auto;width:30px;height:36px;border:1px solid #cbd5e1;border-radius:8px;background:#f8fafc;color:#0f172a;font-size:18px!important;line-height:1!important;cursor:pointer;padding:0}
.modal.show-modal.gx-modal .modal-content .gx .total-cell{flex:1 1 auto;min-width:0;text-align:right;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.modal.show-modal.gx-modal .modal-content .gx .gx-del{flex:0 0 auto;width:30px;height:36px;border:0;background:transparent;color:#dc2626;font-size:24px!important;line-height:1!important;cursor:pointer;padding:0}
.modal.show-modal.gx-modal .modal-content .gx .gx-break{flex:0 0 auto;padding:8px 14px 2px;border-top:1px solid #e5e7eb;background:#f8fafc}
.modal.show-modal.gx-modal .modal-content .gx .gx-brow{display:flex;justify-content:space-between;gap:10px;padding:2px 0;color:#475569}
.modal.show-modal.gx-modal .modal-content .gx .gx-brow span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap}
.modal.show-modal.gx-modal .modal-content .gx .gx-brow.gx-due{color:#b91c1c}
.modal.show-modal.gx-modal .modal-content .gx .gx-brow.gx-adv{color:#047857}
.modal.show-modal.gx-modal .modal-content .gx .gx-brow.gx-strong{color:#0f172a;font-weight:600}
.modal.show-modal.gx-modal .modal-content .gx .gx-brow.gx-grand{color:#0f172a;font-size:17px!important;font-weight:700;margin-top:4px;padding-top:6px;border-top:1px dashed #cbd5e1}
.modal.show-modal.gx-modal .modal-content .gx .gx-brow.gx-grand:first-child{margin-top:0;padding-top:2px;border-top:0}
.modal.show-modal.gx-modal .modal-content .gx .gx-ask{flex:0 0 auto;padding:10px 14px 12px;border-top:1px solid #fed7aa;background:#fff7ed}
.modal.show-modal.gx-modal .modal-content .gx .gx-ask-msg{margin-bottom:8px;font-weight:600;color:#9a3412}
.modal.show-modal.gx-modal .modal-content .gx .gx-ask-btns{display:flex;gap:8px}
.modal.show-modal.gx-modal .modal-content .gx .gx-foot{flex:0 0 auto;display:flex;gap:8px;padding:10px 14px 12px;background:#f8fafc}
.modal.show-modal.gx-modal .modal-content .gx .gx-btn{flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;height:44px;margin:0;padding:0 10px;border:1px solid #cbd5e1;border-radius:12px;background:#fff;color:#0f172a;font-size:14px!important;font-weight:600;white-space:nowrap;cursor:pointer;text-transform:none;letter-spacing:0}
.modal.show-modal.gx-modal .modal-content .gx .gx-btn.gx-wa{flex:1.7 1 0;border-color:#16a34a;background:#16a34a;color:#fff}
.modal.show-modal.gx-modal .modal-content .gx .gx-btn.gx-primary{flex:1.7 1 0;border-color:#2563eb;background:#2563eb;color:#fff}
.modal.show-modal.gx-modal .modal-content .gx .hide{display:none!important}
@media only screen and (min-width:720px){
.modal.show-modal.gx-modal .modal-content{max-width:780px!important}
.modal.show-modal.gx-modal .modal-content .gx .gx-list{-webkit-column-count:2;column-count:2;-webkit-column-gap:28px;column-gap:28px}
.modal.show-modal.gx-modal .modal-content .gx .gx-erow{display:flex;align-items:center;gap:12px}
.modal.show-modal.gx-modal .modal-content .gx .gx-ename{flex:1 1 auto;min-width:0;margin-bottom:0}
.modal.show-modal.gx-modal .modal-content .gx .gx-ectl{flex:0 0 auto}
.modal.show-modal.gx-modal .modal-content .gx .total-cell{flex:0 0 auto;min-width:76px}
}