/* Horeca4U Bestellen: alle stijlen vallen onder .h4ub zodat het thema niet geraakt wordt. */
.h4ub{
  --h4ub-bg:#f4f5f8; --h4ub-surface:#fff; --h4ub-surface-2:#f0f2f6; --h4ub-text:#14213a; --h4ub-muted:#5b6678;
  --h4ub-border:#dde1e8; --h4ub-brand:#0f1f3a; --h4ub-accent:#f5a400; --h4ub-accent-ink:#1b1300;
  --h4ub-ok:#1f8a4c; --h4ub-ok-bg:#e5f5ec; --h4ub-warn:#a45d00; --h4ub-warn-bg:#fff1d6;
  --h4ub-info:#2357b5; --h4ub-info-bg:#e6eefc; --h4ub-danger:#b3261e;
  max-width:1040px; margin:0 auto; padding:16px 16px 110px; color:var(--h4ub-text);
  font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; box-sizing:border-box; text-align:left;
}
.h4ub *, .h4ub *::before, .h4ub *::after{box-sizing:border-box}
.h4ub h2{font-size:17px; margin:18px 0 8px; display:flex; align-items:center; gap:8px; color:var(--h4ub-text); font-weight:700; letter-spacing:0; text-transform:none}
.h4ub h3{margin:0; font-size:18px}
.h4ub [hidden]{display:none !important}
.h4ub button, .h4ub input, .h4ub select, .h4ub textarea{font:inherit; color:inherit; letter-spacing:normal; text-transform:none; box-shadow:none}
.h4ub-loading{padding:40px 16px; text-align:center; color:var(--h4ub-muted)}
.h4ub-top{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:6px}
.h4ub-hello{font-size:15px}
.h4ub-links{margin-left:auto; display:flex; gap:14px; font-size:14px}
.h4ub-links a{color:var(--h4ub-info)}
.h4ub-tabs{display:flex; gap:4px; border-bottom:1px solid var(--h4ub-border); margin-bottom:6px; overflow-x:auto}
.h4ub .h4ub-tabs button{background:none; border:0; border-bottom:3px solid transparent; border-radius:0; padding:10px 14px; color:var(--h4ub-muted); font-weight:600; cursor:pointer; white-space:nowrap}
.h4ub .h4ub-tabs button[aria-selected="true"]{color:var(--h4ub-text); border-bottom-color:var(--h4ub-accent)}
.h4ub-card{background:var(--h4ub-surface); border:1px solid var(--h4ub-border); border-radius:12px; overflow:hidden}
.h4ub-search{position:sticky; top:0; z-index:5; background:var(--h4ub-bg); padding:10px 0 12px; margin:0 -16px; padding-left:16px; padding-right:16px}
.h4ub .h4ub-q{width:100%; padding:13px 14px 13px 42px; border-radius:12px; border:1px solid var(--h4ub-border); background:var(--h4ub-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%238a94a6' stroke-width='2'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='m13 13 4 4'/%3E%3C/svg%3E") 14px center no-repeat; font-size:16px; outline:none; height:auto; margin:0}
.h4ub .h4ub-q:focus{border-color:var(--h4ub-accent); box-shadow:0 0 0 3px rgba(245,164,0,.3)}
.h4ub-hint{font-size:13px; color:var(--h4ub-muted); margin-top:6px}
.h4ub-count{font-weight:500; color:var(--h4ub-muted); font-size:14px}
.h4ub-chips{display:flex; gap:6px; flex-wrap:wrap; margin:4px 0 8px}
.h4ub .h4ub-chip{border:1px solid var(--h4ub-border); background:var(--h4ub-surface); border-radius:999px; padding:4px 12px; font-size:13px; cursor:pointer; color:var(--h4ub-text)}
.h4ub .h4ub-chip[aria-pressed="true"]{background:var(--h4ub-brand); color:#fff; border-color:var(--h4ub-brand)}
.h4ub-row{display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center; padding:10px 14px; border-top:1px solid var(--h4ub-border)}
.h4ub-row:first-child{border-top:0}
.h4ub-row.h4ub-has{background:#fff8e8}
.h4ub-pname{font-weight:600}
.h4ub-meta{font-size:13px; color:var(--h4ub-muted)}
.h4ub-tag{display:inline-block; font-size:11px; font-weight:700; border-radius:6px; padding:1px 6px; margin-left:6px; vertical-align:1px; text-transform:uppercase; letter-spacing:.3px}
.h4ub-tag.h4ub-new{background:var(--h4ub-info-bg); color:var(--h4ub-info)}
.h4ub-tag.h4ub-bestel{background:var(--h4ub-warn-bg); color:var(--h4ub-warn); cursor:help}
.h4ub-tag.h4ub-nvv{background:#eceef2; color:#5b6678; cursor:help}
.h4ub-row.h4ub-row-nvv .h4ub-pname{color:var(--h4ub-muted)}
.h4ub-unavail{font-size:12px; line-height:1.3; color:var(--h4ub-muted); text-align:center; width:128px}
.h4ub-qty{display:flex; align-items:center; border:1px solid var(--h4ub-border); border-radius:10px; overflow:hidden; background:var(--h4ub-surface)}
.h4ub .h4ub-qty button{width:38px; height:38px; border:0; border-radius:0; background:var(--h4ub-surface-2); color:var(--h4ub-text); cursor:pointer; font-size:18px; font-weight:700; padding:0; line-height:1}
.h4ub .h4ub-qty input{width:52px; height:38px; border:0; border-radius:0; text-align:center; background:transparent; font-weight:700; padding:0; margin:0; -moz-appearance:textfield; appearance:textfield}
.h4ub .h4ub-qty input::-webkit-outer-spin-button, .h4ub .h4ub-qty input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.h4ub-empty{padding:28px 16px; text-align:center; color:var(--h4ub-muted)}
.h4ub-note{font-size:13px; border-radius:10px; padding:8px 12px; margin:10px 0 8px; background:var(--h4ub-info-bg); color:var(--h4ub-info)}
.h4ub-err{font-size:14px; border-radius:10px; padding:10px 12px; margin-top:10px; background:#fdecea; color:var(--h4ub-danger); font-weight:600}
.h4ub-banner{background:var(--h4ub-warn-bg); color:var(--h4ub-warn); border-radius:10px; padding:10px 14px; margin:8px 0; display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-weight:600}
.h4ub-banner .h4ub-btn{margin-left:auto}
.h4ub-foot{position:fixed; left:0; right:0; bottom:0; background:var(--h4ub-surface); border-top:1px solid var(--h4ub-border); box-shadow:0 -4px 16px rgba(0,0,0,.06); z-index:9990}
.h4ub-foot-in{max-width:1040px; margin:0 auto; padding:12px 16px; display:flex; align-items:center; gap:12px}
.h4ub-sum{font-size:14px}
.h4ub-sum b{font-size:16px}
.h4ub-foot .h4ub-btn{margin-left:auto}
.h4ub .h4ub-btn{border:0; border-radius:10px; padding:11px 18px; font-weight:700; cursor:pointer; line-height:1.2; text-decoration:none; display:inline-block}
.h4ub .h4ub-primary{background:var(--h4ub-accent); color:var(--h4ub-accent-ink)}
.h4ub .h4ub-primary:disabled{opacity:.45; cursor:not-allowed}
.h4ub .h4ub-ghost{background:var(--h4ub-surface-2); border:1px solid var(--h4ub-border); color:var(--h4ub-text)}
.h4ub .h4ub-link{background:none; padding:6px 8px; color:var(--h4ub-info); font-weight:600}
.h4ub .h4ub-danger{color:var(--h4ub-danger); margin-right:auto}
.h4ub-dlg{border:0; border-radius:16px; padding:0; width:min(640px, calc(100vw - 24px)); max-height:calc(100vh - 32px); background:var(--h4ub-surface); color:var(--h4ub-text)}
.h4ub-dlg::backdrop{background:rgba(8,14,28,.55)}
.h4ub-dlg-h{padding:16px 18px; border-bottom:1px solid var(--h4ub-border); display:flex; align-items:center}
.h4ub-dlg-h button{margin-left:auto}
.h4ub-dlg-b{padding:8px 18px 16px; overflow:auto; max-height:calc(100vh - 220px)}
.h4ub-dlg-f{padding:12px 18px; border-top:1px solid var(--h4ub-border); display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap}
.h4ub-field{margin-top:12px}
.h4ub-field label{display:block; font-size:13px; font-weight:600; margin-bottom:4px}
.h4ub-reffilter{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:12px 0}
.h4ub-reffilter label{font-weight:600; font-size:14px}
.h4ub-reffilter select{padding:8px 10px; border-radius:10px; border:1px solid var(--h4ub-border); background:var(--h4ub-surface); min-width:220px; max-width:100%; margin:0}
.h4ub-ref{display:inline-block; font-size:12px; font-weight:700; border-radius:6px; padding:1px 8px; background:var(--h4ub-brand); color:#fff; vertical-align:1px}
.h4ub-banner-info{background:var(--h4ub-info-bg); color:var(--h4ub-info)}
.h4ub-field input[type=text], .h4ub-field input:not([type]), .h4ub-field select, .h4ub-field textarea{width:100%; padding:10px; border-radius:10px; border:1px solid var(--h4ub-border); background:var(--h4ub-surface); margin:0}
.h4ub-table{width:100%; border-collapse:collapse; font-size:14px; margin:0}
.h4ub-table th, .h4ub-table td{text-align:left; padding:8px 6px; border:0; border-bottom:1px solid var(--h4ub-border); vertical-align:top; background:none}
.h4ub-table th{font-size:12px; color:var(--h4ub-muted); text-transform:uppercase; letter-spacing:.3px}
.h4ub-table .h4ub-n{text-align:right; font-weight:700; white-space:nowrap}
.h4ub-order{padding:14px; border-top:1px solid var(--h4ub-border); display:grid; grid-template-columns:1fr auto; gap:8px 12px; align-items:center}
.h4ub-order:first-child{border-top:0}
.h4ub-acts{display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end}
.h4ub-lines{font-size:13px; color:var(--h4ub-muted); grid-column:1/-1}
.h4ub-status{font-size:12px; font-weight:700; border-radius:999px; padding:2px 10px}
.h4ub-st-nieuw{background:var(--h4ub-warn-bg); color:var(--h4ub-warn)}
.h4ub-st-verwerkt{background:var(--h4ub-info-bg); color:var(--h4ub-info)}
.h4ub-st-geleverd{background:var(--h4ub-ok-bg); color:var(--h4ub-ok)}
.h4ub-st-geannuleerd{background:var(--h4ub-surface-2); color:var(--h4ub-muted)}
.h4ub-toast{position:fixed; left:50%; bottom:90px; transform:translateX(-50%); background:var(--h4ub-brand); color:#fff; padding:10px 16px; border-radius:10px; font-weight:600; z-index:9999; opacity:0; transition:opacity .2s; pointer-events:none; max-width:calc(100vw - 32px)}
.h4ub-toast.h4ub-show{opacity:1}
.h4ub-toast.h4ub-toast-action{pointer-events:auto; display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.h4ub .h4ub-undo{background:var(--h4ub-accent); color:var(--h4ub-accent-ink); border:0; border-radius:8px; padding:6px 12px; font-weight:700; cursor:pointer}
.h4ub-row.h4ub-row-rm{grid-template-columns:1fr auto auto}
.h4ub .h4ub-rm{width:34px; height:34px; border:1px solid var(--h4ub-border); border-radius:50%; background:var(--h4ub-surface); color:var(--h4ub-muted); font-size:20px; line-height:1; cursor:pointer; padding:0}
.h4ub .h4ub-rm:hover, .h4ub .h4ub-rm:focus-visible{color:var(--h4ub-danger); border-color:var(--h4ub-danger)}
.h4ub .h4ub-rm:disabled{opacity:.4}
.h4ub-rm-hint{margin:8px 2px 0}
.h4ub-login{max-width:440px; padding-bottom:40px}
.h4ub-login form p{margin:0 0 12px}
.h4ub-login label{display:block; font-weight:600; margin-bottom:4px}
.h4ub-login input[type=text], .h4ub-login input[type=password]{width:100%; padding:10px 12px; border:1px solid var(--h4ub-border); border-radius:10px}
.h4ub-login .login-remember label{display:inline; font-weight:400}
.h4ub-login input[type=submit]{background:var(--h4ub-accent); color:var(--h4ub-accent-ink); border:0; border-radius:10px; padding:11px 18px; font-weight:700; cursor:pointer}
@media (max-width:600px){
  .h4ub-row{padding:10px 12px}
  .h4ub .h4ub-qty button{width:34px}
  .h4ub .h4ub-qty input{width:44px}
  .h4ub-row.h4ub-row-rm{gap:8px}
  .h4ub .h4ub-rm{width:30px; height:30px; font-size:18px}
  .h4ub-order{grid-template-columns:1fr}
  .h4ub-acts{justify-content:flex-start}
  .h4ub-sum{font-size:13px}
}