:root{--mondi-accent:#5abcb9;--mondi-bg:#fff;--mondi-text:#0F172A;--mondi-muted:#6b7280;--mondi-border:#e5e7eb;--mondi-border-hover:#cfeceb;--mondi-chip-bg:#f8fafc;--mondi-chip-border:#e2e8f0;--mondi-overlay:rgba(15,23,42,.5)}
.mondi-dialog-backdrop{position:fixed;inset:0;background:var(--mondi-overlay);backdrop-filter:saturate(120%) blur(2px);display:none;z-index:9998}
.mondi-dialog{position:fixed;inset:50% auto auto 50%;transform:translate(-50%,-50%);width:min(720px,92vw);max-height:80vh;overflow:auto;background:var(--mondi-bg);border:1px solid var(--mondi-border);border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.12);padding:20px 20px 16px;display:none;z-index:9999}
.mondi-dialog.open,.mondi-dialog-backdrop.open{display:block}
.mondi-dialog h2{font-size:20px;margin:0 0 6px;color:var(--mondi-text);font-weight:700}
.mondi-dialog p.muted{color:var(--mondi-muted);margin:0 0 14px}

.mondi-row{
display:grid;
grid-template-columns:1fr auto;
align-items:start;
gap:16px;
padding:16px;
border:1px solid var(--mondi-border);
border-radius:12px;
margin:12px 0;
transition:border-color .2s ease;
}
.mondi-row:hover{border-color:var(--mondi-border-hover)}

.mondi-row .left{
display:flex;
align-items:flex-start;
gap:12px;
min-width:0;
flex:1;
}

.mondi-row .left > div{
min-width:0;
flex:1;
}

.mondi-row .left > div > div:first-child{
font-weight:600;
color:var(--mondi-text);
line-height:1.5;
word-wrap:break-word;
overflow-wrap:break-word;
hyphens:auto;
margin-bottom:4px;
}

.mondi-row .left .muted{
color:var(--mondi-muted);
font-size:13px;
line-height:1.4;
margin-top:2px;
}

.mondi-price{
font-weight:700;
color:var(--mondi-accent);
white-space:nowrap;
align-self:center;
flex-shrink:0;
}

.mondi-info{
position:relative;
display:inline-flex;
align-items:center;
justify-content:center;
width:18px;
height:18px;
border-radius:999px;
border:1px solid var(--mondi-border);
color:var(--mondi-text);
font-size:12px;
line-height:1;
cursor:help;
user-select:none;
margin-left:6px;
flex-shrink:0;
}
.mondi-info:hover{border-color:var(--mondi-accent);color:var(--mondi-accent)}

#mondi-tooltip{
position:fixed;
left:0;
top:0;
transform:translate(-9999px,-9999px);
background:#fff;
color:var(--mondi-text);
border:1px solid var(--mondi-border);
border-radius:10px;
padding:12px 14px;
min-width:280px;
max-width:min(440px,85vw);
max-height:calc(100vh - 24px);
overflow-y:auto;
box-shadow:0 8px 24px rgba(0,0,0,.12);
z-index:100000;
pointer-events:none;
overflow-wrap:anywhere;
word-break:break-word;
opacity:0;
transition:opacity .12s ease;
}
#mondi-tooltip.show{opacity:1;pointer-events:auto}
#mondi-tooltip p{
margin:4px 0;
color:var(--mondi-muted);
line-height:1.6;
}
#mondi-tooltip p:first-child{margin-top:0}
#mondi-tooltip p:last-child{margin-bottom:0}
#mondi-tooltip::after{
content:"";
position:absolute;
width:10px;
height:10px;
background:#fff;
border-left:1px solid var(--mondi-border);
border-bottom:1px solid var(--mondi-border);
transform:rotate(45deg);
left:var(--arrowX, 16px);
bottom:var(--arrowBottom, -6px);
top:var(--arrowTop, auto);
}

.mondi-hint{background:#f3f4f6;border-radius:12px;padding:10px 12px;color:var(--mondi-muted);margin-top:8px}
.mondi-actions{display:flex;flex-direction:column;gap:8px;padding-top:16px}
.mondi-actions .mondi-btn.primary{width:100%;justify-content:center;padding:12px 16px;font-size:14px;font-weight:700}
.mondi-actions-secondary{display:flex;gap:4px;justify-content:center;flex-wrap:wrap}
.mondi-btn{appearance:none;border:1px solid var(--mondi-border);background:#fff;border-radius:10px;padding:10px 14px;font-size:14px;cursor:pointer;color:var(--mondi-text);display:inline-flex;align-items:center;gap:6px}
.mondi-btn:hover{border-color:var(--mondi-border-hover)}
.mondi-btn.primary{background:var(--mondi-accent);border-color:var(--mondi-accent);color:#fff}
.mondi-btn.mondi-btn-text{background:transparent;border-color:transparent;font-size:12px;color:var(--mondi-muted);padding:6px 10px}
.mondi-btn.mondi-btn-text:hover{color:var(--mondi-text);text-decoration:underline;background:transparent;border-color:transparent}
.mondi-btn[disabled]{opacity:.6;cursor:not-allowed}
.mondi-total{display:flex;align-items:center;justify-content:space-between;margin-top:6px;font-weight:600;color:var(--mondi-text)}
.mondi-close{position:absolute;right:12px;top:12px;line-height:1;border:none;background:transparent;cursor:pointer;color:#64748b}
.mondi-close:hover{color:var(--mondi-text)}
.mondi-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:#e8f7f6;border:1px solid #bfe7e5;color:var(--mondi-accent);font-weight:600;font-size:12px}

.mondi-checkbox{width:18px;height:18px;border:1px solid #94a3b8;border-radius:4px;display:inline-block;position:relative;flex:0 0 auto}
.mondi-checkbox input{position:absolute;inset:0;opacity:0;cursor:pointer}
.mondi-checkbox input:checked + .mark{content:"";position:absolute;inset:2px;background:var(--mondi-accent);border-radius:3px}

.mondi-cart-fab{position:fixed;right:18px;bottom:18px;z-index:10000;background:#0F172A;color:#fff;border-radius:999px;display:flex;align-items:center;gap:10px;padding:10px 14px;box-shadow:0 10px 30px rgba(0,0,0,.18);cursor:pointer;transition:opacity .2s,transform .2s}
.mondi-cart-fab.hidden{opacity:0;pointer-events:none;transform:translateY(10px)}
.mondi-cart-fab b{background:#fff;color:#0F172A;border-radius:999px;padding:2px 8px;font-size:12px}
.mondi-cart-fab .sum{font-weight:700}

.mondi-cart-panel{position:fixed;right:18px;bottom:72px;width:min(420px,92vw);max-height:70vh;overflow:auto;background:var(--mondi-bg);border:1px solid var(--mondi-border);border-radius:16px;box-shadow:0 12px 36px rgba(0,0,0,.16);display:none;z-index:10000}
.mondi-cart-panel.open{display:block}
.mondi-cart-head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--mondi-border);color:var(--mondi-text)}
.mondi-cart-items{padding:10px 14px}
.mondi-cart-item{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px dashed var(--mondi-border)}
.mondi-cart-item:last-child{border-bottom:none}
.mondi-cart-item .title{font-weight:600;color:var(--mondi-text)}
.mondi-chip{display:inline-flex;align-items:center;background:var(--mondi-chip-bg);border:1px solid var(--mondi-chip-border);border-radius:999px;padding:2px 8px;margin:2px 4px 0 0;font-size:12px;color:#475569}
.mondi-del{appearance:none;border:none;background:transparent;color:#ef4444;cursor:pointer;font-size:13px}
.mondi-del:hover{text-decoration:underline}
.mondi-cart-foot{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--mondi-border);padding:12px 14px}
.mondi-cart-foot .total{color:var(--mondi-accent);font-weight:700}

a[data-mondi-match]{position:relative}
a[data-mondi-match="ok"]{box-shadow:0 0 0 2px #16a34a inset}
a[data-mondi-match="miss"]{box-shadow:0 0 0 2px #dc2626 inset}
.mondi-match-badge{
position:absolute; top:-8px; right:-8px; z-index:1;
font-size:12px; line-height:1; padding:4px 6px; border-radius:999px;
background:#111827; color:#fff; border:1px solid #fff; white-space:nowrap
}
.mondi-match-badge.ok{background:#16a34a}
.mondi-match-badge.miss{background:#dc2626}

.mondi-upload-block{
margin-top:16px;
border-top:1px solid var(--mondi-border);
padding-top:12px;
}
.mondi-upload-block h4{
margin:0 0 6px;
font-size:14px;
color:var(--mondi-text);
}
.mondi-upload-zone{
margin-top:4px;
padding:10px 12px;
border:1px dashed var(--mondi-border);
border-radius:10px;
background:#f9fafb;
cursor:pointer;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
}
.mondi-upload-zone:hover{
border-color:var(--mondi-border-hover);
background:#f1f5f9;
}
.mondi-upload-zone.dragover{
border-color:var(--mondi-accent);
background:#e0f2f1;
}
.mondi-upload-zone p{
margin:0;
font-size:13px;
color:var(--mondi-muted);
}
.mondi-upload-zone .label{
font-weight:600;
color:var(--mondi-accent);
font-size:13px;
white-space:nowrap;
}
.mondi-upload-zone input[type="file"]{display:none;}
.mondi-upload-list{
margin-top:8px;
display:flex;
flex-wrap:wrap;
gap:6px;
}
.mondi-upload-pill{
padding:4px 8px;
border-radius:999px;
background:#e5f3f2;
border:1px solid #cde7e5;
font-size:12px;
color:#0f172a;
}
.mondi-upload-note{
margin-top:4px;
font-size:11px;
color:var(--mondi-muted);
}

.mondi-qty-wrap{
display:flex;
align-items:center;
gap:10px;
margin-top:10px;
padding:10px 13px;
background:#f8fafc;
border-radius:8px;
border:1px solid var(--mondi-border);
}
.mondi-qty-wrap label{
font-size:13px;
font-weight:600;
color:var(--mondi-text);
white-space:nowrap;
flex:1;
}
.mondi-qty-wrap input[type="number"]{
width:88px;
padding:8px 10px;
border:1.5px solid var(--mondi-border);
border-radius:8px;
font-size:15px;
font-weight:600;
text-align:center;
color:var(--mondi-text);
}
.mondi-qty-wrap input[type="number"]:focus{
outline:none;
border-color:var(--mondi-accent);
box-shadow:0 0 0 3px rgba(90,188,185,.1);
}
.mondi-qty-hint{
font-size:12px;
color:var(--mondi-muted);
white-space:nowrap;
}
.mondi-tip-gap{height:8px}
.mondi-tile-clickable{cursor:pointer}
.mondi-tile-clickable:hover{outline:2px solid var(--mondi-border-hover);outline-offset:4px;border-radius:inherit}

.mondi-plz-block{
margin-top:16px;
border-top:1px solid var(--mondi-border);
padding-top:12px;
}
.mondi-plz-block h4{
margin:0 0 6px;
font-size:14px;
color:var(--mondi-text);
font-weight:600;
}
.mondi-plz-wrap{
display:flex;
gap:12px;
align-items:center;
margin-top:6px;
flex-wrap:wrap;
}
.mondi-plz-wrap input[type="text"]{
width:120px;
padding:8px 12px;
border:1px solid var(--mondi-border);
border-radius:8px;
font-size:14px;
transition:border-color .2s;
}
.mondi-plz-wrap input[type="text"]:focus{
outline:none;
border-color:var(--mondi-accent);
}
.mondi-plz-result{
color:var(--mondi-accent);
font-weight:600;
font-size:14px;
min-height:20px;
}
.mondi-plz-note{
margin-top:6px;
font-size:12px;
color:var(--mondi-muted);
line-height:1.4;
}

@media (max-width: 640px) {
.mondi-row{
grid-template-columns:1fr;
gap:12px;
}
.mondi-price{
align-self:start;
margin-top:8px;
}
.mondi-dialog{
width:96vw;
max-height:85vh;
padding:16px;
}
#mondi-tooltip{
max-width:90vw;
min-width:240px;
}
.mondi-plz-wrap{
flex-direction:column;
align-items:flex-start;
}
}

/* Feature 1: removed – replaced by inline project selector */

/* Feature 2: Tile "already in cart" badge */
.mondi-in-cart {
  outline: 2px solid #5abcb9 !important;
  outline-offset: 2px;
}
.mondi-cart-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 20px;
  height: 20px;
  background: #5abcb9;
  color: #fff;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 10;
}

/* Feature 4: Project selector in modal header */
.mondi-project-selector {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 12px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 10px;
  font-size: 13px;
}
.mondi-project-selector-icon {
  font-size: 15px;
  flex-shrink: 0;
}
.js-project-select {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid #d1fae5;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  background: #fff;
  color: var(--mondi-text, #0f172a);
  cursor: pointer;
}
.js-project-select:focus { outline: none; border-color: var(--mondi-accent, #5abcb9); box-shadow: 0 0 0 3px rgba(90,188,185,.12); }