/* Bar Calc — Reusable UI Components */
/* ═══ PREMIUM GRADIENT CATEGORY CARDS — same style as results ═══ */
.abv8-cat-card{
  background:linear-gradient(135deg, var(--p) 0%, var(--b) 100%) !important;
  border:none !important;
  color:#fff;
  padding:1.5rem !important;
  box-shadow:0 10px 30px rgba(110,61,181,0.25) !important;
  position:relative;
  overflow:hidden;
}
.abv8-cat-card::before{
  content:'';
  position:absolute;
  top:-60px;
  right:-60px;
  width:200px;
  height:200px;
  background:radial-gradient(circle,rgba(255,255,255,0.15),transparent 70%);
  pointer-events:none;
  z-index:0;
}
.abv8-cat-card > *{position:relative;z-index:1;}

/* Category header inside the gradient card — adapt colors */
.abv8-cat-card .abv8-cat-hdr{margin-bottom:18px;}
.abv8-cat-card .abv8-cat-icon{
  background:rgba(255,255,255,0.2) !important;
  backdrop-filter:blur(10px);
  width:44px;height:44px;
  border-radius:13px;
}
.abv8-cat-card .abv8-cat-title{
  color:#fff !important;
  font-size:17px;
  font-weight:600;
  letter-spacing:-0.2px;
}
.abv8-cat-card .abv8-cat-sub{
  color:rgba(255,255,255,0.8) !important;
  font-size:12px;
}

/* Ingredient rows inside gradient card — translucent white */
.abv8-cat-card .abv8-ing-row{
  background:rgba(255,255,255,0.12) !important;
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.15);
}
.abv8-cat-card .abv8-ing-row:hover{
  background:rgba(255,255,255,0.18) !important;
  box-shadow:0 4px 12px rgba(0,0,0,0.15);
}
.abv8-cat-card .abv8-ing-label{color:rgba(255,255,255,0.9) !important;}
.abv8-cat-card .abv8-ing-field-lbl{color:rgba(255,255,255,0.75) !important;}
.abv8-cat-card .abv8-ing-del{color:rgba(255,255,255,0.7) !important;}
.abv8-cat-card .abv8-ing-del:hover{
  background:rgba(255,255,255,0.2) !important;
  color:#fff !important;
}

/* Input fields inside gradient card */
.abv8-cat-card .abv8-inp{
  background:rgba(255,255,255,0.95) !important;
  border-color:transparent !important;
}
.abv8-cat-card .abv8-inp:focus-within{
  background:#fff !important;
  box-shadow:0 0 0 3px rgba(255,255,255,0.3) !important;
}
.abv8-cat-card .abv8-inp input{color:#1a1a1a !important;}
.abv8-cat-card .abv8-inp-unit{
  color:rgba(0,0,0,0.55) !important;
  border-left-color:rgba(0,0,0,0.15) !important;
}

/* 4-col fields inside gradient card */
.abv8-cat-card .abv8-4col-item label{color:rgba(255,255,255,0.85) !important;}
.abv8-cat-card .abv8-sm-inp{
  background:rgba(255,255,255,0.95) !important;
  border-color:transparent !important;
}
.abv8-cat-card .abv8-sm-inp:focus-within{
  background:#fff !important;
  box-shadow:0 0 0 3px rgba(255,255,255,0.3) !important;
}
.abv8-cat-card .abv8-sm-inp input{color:#1a1a1a !important;}
.abv8-cat-card .abv8-sm-unit{
  color:rgba(0,0,0,0.55) !important;
  border-left-color:rgba(0,0,0,0.15) !important;
}

/* Bitters slider wrap inside gradient card */
.abv8-cat-card .abv8-bit-slider-wrap{
  background:rgba(255,255,255,0.12) !important;
  border:1px solid rgba(255,255,255,0.15);
}
.abv8-cat-card .abv8-bit-slider-lbl{color:rgba(255,255,255,0.85) !important;}
.abv8-cat-card .abv8-bit-slider-val{color:#fff !important;}

/* Add button inside gradient card */
.abv8-cat-card .abv8-add-btn{
  border:1.5px dashed rgba(255,255,255,0.4) !important;
  color:rgba(255,255,255,0.9) !important;
  background:rgba(255,255,255,0.08) !important;
}
.abv8-cat-card .abv8-add-btn:hover{
  background:rgba(255,255,255,0.18) !important;
  border-color:rgba(255,255,255,0.7) !important;
  color:#fff !important;
  border-style:solid !important;
}

/* Other hint inside gradient card */
.abv8-cat-card .abv8-other-hint{
  background:rgba(255,255,255,0.12) !important;
  color:rgba(255,255,255,0.85) !important;
  border:1px solid rgba(255,255,255,0.1);
}
.abv8-cat-card .abv8-other-hint b{color:#fff !important;}

/* Dilution slider hints inside gradient card */
.abv8-cat-card .abv8-dilution-hints{color:rgba(255,255,255,0.9) !important;}

/* Dilution slider track on gradient card */
.abv8-cat-card .abv8-slider{
  background:rgba(255,255,255,0.25) !important;
}
.abv8-cat-card .abv8-slider::-webkit-slider-thumb{
  background:#fff !important;
  border:3px solid rgba(255,255,255,0.5) !important;
  box-shadow:0 2px 8px rgba(0,0,0,0.3) !important;
}
.abv8-cat-card .abv8-slider::-moz-range-thumb{
  background:#fff !important;
  border:3px solid rgba(255,255,255,0.5) !important;
  box-shadow:0 2px 8px rgba(0,0,0,0.3) !important;
}

.abv8-cat-hdr{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
}
.abv8-cat-icon{
  width:38px;height:38px;
  border-radius:11px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  color:#fff;
}
.abv8-cat-icon-spirit{background:linear-gradient(135deg,#c47a0a,#8a5208);}
.abv8-cat-icon-modifier{background:linear-gradient(135deg,#6e3db5,#4a2280);}
.abv8-cat-icon-bitters{background:linear-gradient(135deg,#c0392b,#8a2817);}
.abv8-cat-icon-syrup{background:linear-gradient(135deg,#2d8c50,#1a5c30);}
.abv8-cat-icon-other{background:linear-gradient(135deg,#1a7a7a,#0f4f4f);}
.abv8-cat-icon-dilution{background:linear-gradient(135deg,#2272b0,#144e82);}
.abv8-cat-title-wrap{flex:1;min-width:0;}
.abv8-cat-title{
  font-family:'Fraunces',serif;
  font-size:16px;
  font-weight:600;
  color:var(--text);
  line-height:1.1;
}
.abv8-cat-sub{
  font-size:11.5px;
  color:var(--muted);
  margin-top:2px;
}

/* Ingredient list */
.abv8-ing-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:10px;
  max-width:100%;
  width:100%;
}
.abv8-ing-row{
  background:var(--card2);
  border-radius:13px;
  padding:12px;
  position:relative;
  transition:all .2s;
  box-sizing:border-box;
  max-width:100%;
  overflow:hidden;
}
.abv8-ing-row:hover{background:var(--card);box-shadow:0 2px 8px rgba(0,0,0,0.04);}
.abv8-ing-title-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
  gap:8px;
}
.abv8-ing-label{
  font-size:12px;
  font-weight:600;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:0.5px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  flex:1;
  min-width:0;
}
.abv8-ing-del{
  width:26px;height:26px;
  border:none;
  background:transparent;
  border-radius:8px;
  color:var(--muted);
  cursor:pointer;
  font-size:16px;
  line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:all .18s;
  flex-shrink:0;
}
.abv8-ing-del:hover{background:var(--rl);color:var(--r);}

.abv8-ing-fields{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  width:100%;
}
.abv8-ing-field{
  display:flex;
  flex-direction:column;
  gap:5px;
  min-width:0;
}
.abv8-ing-field-lbl{
  font-size:10.5px;
  font-weight:600;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:0.5px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.abv8-inp{
  display:flex;
  align-items:center;
  border:1.5px solid var(--border);
  border-radius:10px;
  background:var(--card);
  overflow:hidden;
  transition:all .18s;
  min-width:0;
  width:100%;
  box-sizing:border-box;
}
.abv8-inp:focus-within{border-color:var(--b);box-shadow:0 0 0 3px rgba(34,114,176,0.1);}
.abv8-inp input{
  flex:1;
  min-width:0;
  width:100%;
  border:none;
  background:transparent;
  font-family:'Outfit',sans-serif;
  font-size:15px;
  font-weight:500;
  color:var(--text);
  padding:9px 10px;
  outline:none;
  box-sizing:border-box;
}
.abv8-inp-unit{
  padding:0 10px;
  font-size:11.5px;
  font-weight:600;
  color:var(--muted);
  border-left:1px solid var(--border);
  white-space:nowrap;
  flex-shrink:0;
}

/* Bitters slider row */
.abv8-bit-slider-wrap{
  background:var(--card);
  border-radius:10px;
  padding:10px 12px;
  margin-top:6px;
}
.abv8-bit-slider-lbl{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:11px;
  color:var(--muted);
  font-weight:600;
  margin-bottom:6px;
}
.abv8-bit-slider-val{
  color:var(--text);
  font-family:'Fraunces',serif;
  font-size:14px;
}
.abv8-bit-slider{
  width:100%;
  height:4px;
}

/* Add button */
.abv8-add-btn{
  width:100%;
  padding:12px;
  border-radius:12px;
  border:1.5px dashed rgba(34,114,176,0.35);
  background:rgba(34,114,176,0.04);
  cursor:pointer;
  font-family:'Outfit',sans-serif;
  font-size:13px;
  font-weight:600;
  color:var(--b);
  transition:all .2s;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.abv8-add-btn:hover{
  border-color:var(--b);
  border-style:solid;
  color:var(--b);
  background:var(--bl);
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(34,114,176,0.15);
}
.abv8-add-btn:active{transform:translateY(0);}
[data-theme="dark"] .abv8-add-btn{
  border-color:rgba(74,159,212,0.35);
  color:var(--b);
  background:rgba(34,114,176,0.06);
}
.abv8-add-plus{
  font-size:18px;
  font-weight:400;
  line-height:1;
}

/* 4-col for other ingredients */
.abv8-4col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  width:100%;
}
.abv8-4col-item{
  display:flex;
  flex-direction:column;
  gap:5px;
  min-width:0;
}
.abv8-4col-item label{
  font-size:11px;
  font-weight:600;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:0.5px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.abv8-sm-inp{
  display:flex;
  align-items:center;
  border:1.5px solid var(--border);
  border-radius:10px;
  background:var(--card);
  overflow:hidden;
  transition:all .18s;
  min-width:0;
  width:100%;
  box-sizing:border-box;
}
.abv8-sm-inp:focus-within{border-color:var(--t);box-shadow:0 0 0 3px rgba(26,122,122,0.1);}
.abv8-sm-inp input{
  flex:1;
  min-width:0;
  width:100%;
  border:none;
  background:transparent;
  font-family:'Outfit',sans-serif;
  font-size:14.5px;
  font-weight:500;
  color:var(--text);
  padding:9px 10px;
  outline:none;
  box-sizing:border-box;
}
.abv8-sm-unit{
  padding:0 10px;
  font-size:11px;
  font-weight:600;
  color:var(--muted);
  border-left:1px solid var(--border);
  white-space:nowrap;
  flex-shrink:0;
}
.abv8-other-hint{
  margin-top:12px;
  padding:10px 12px;
  background:var(--card2);
  border-radius:10px;
  font-size:11.5px;
  color:var(--muted);
  line-height:1.6;
}
.abv8-other-hint b{color:var(--text);font-weight:600;}

/* Dilution slider */
.abv8-dilution-card{padding-bottom:18px;}
.abv8-slider{
  width:100%;
  height:6px;
  margin:8px 0 14px;
  -webkit-appearance:none;
  appearance:none;
  background:var(--border);
  border-radius:3px;
  outline:none;
  cursor:pointer;
}
.abv8-slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:22px;height:22px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--b),var(--bd));
  cursor:pointer;
  box-shadow:0 2px 8px rgba(34,114,176,0.4);
  border:3px solid var(--card);
  transition:transform .15s;
}
.abv8-slider::-webkit-slider-thumb:hover{transform:scale(1.15);}
.abv8-slider::-moz-range-thumb{
  width:22px;height:22px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--b),var(--bd));
  cursor:pointer;
  box-shadow:0 2px 8px rgba(34,114,176,0.4);
  border:3px solid var(--card);
}
.abv8-dilution-hints{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:11.5px;
  color:var(--muted);
}
.abv8-dilution-hints>div{display:flex;align-items:center;gap:8px;}
.abv8-dil-pill{
  display:inline-block;
  padding:2px 8px;
  border-radius:20px;
  font-size:10px;
  font-weight:700;
  letter-spacing:0.3px;
  min-width:48px;
  text-align:center;
}
.abv8-dil-pill-built{background:var(--gl);color:var(--gd);}
.abv8-dil-pill-stirred{background:var(--bl);color:var(--bd);}
.abv8-dil-pill-shaken{background:var(--pl);color:var(--pd);}

/* Save card */
/* ═══ SAVE & SAVED cards — premium gradient like categories ═══ */
.abv8-save-card,
.abv8-saved-card{
  background:var(--card) !important;
  border:1.5px solid var(--border) !important;
  color:var(--text);
  padding:1.5rem !important;
  box-shadow:0 3px 12px rgba(0,0,0,0.06) !important;
  position:relative;
  overflow:hidden;
}
.abv8-save-card::before,
.abv8-saved-card::before{
  content:'';
  position:absolute;
  top:-40px;right:-40px;
  width:120px;height:120px;
  background:radial-gradient(circle,rgba(110,61,181,0.08),transparent 70%);
  pointer-events:none;
  z-index:0;
}
.abv8-save-card > *,
.abv8-saved-card > *{position:relative;z-index:1;}

/* Header inside save/saved cards */
.abv8-save-card .abv8-cat-hdr,
.abv8-saved-card .abv8-cat-hdr{margin-bottom:18px;}
.abv8-cat-icon-save{background:rgba(110,61,181,0.12) !important;}
.abv8-cat-icon-saved{background:rgba(34,114,176,0.12) !important;}
.abv8-save-card .abv8-cat-icon,
.abv8-saved-card .abv8-cat-icon{
  width:44px;height:44px;
  border-radius:13px;
  background:rgba(110,61,181,0.12) !important;
  backdrop-filter:none;
}
.abv8-save-card .abv8-cat-title,
.abv8-saved-card .abv8-cat-title{
  color:var(--text) !important;
  font-size:17px;
  font-weight:600;
  letter-spacing:-0.2px;
}
.abv8-save-card .abv8-cat-sub,
.abv8-saved-card .abv8-cat-sub{
  color:var(--muted) !important;
  font-size:12px;
}

/* Save row */
.abv8-save-title{
  font-family:'Fraunces',serif;
  font-size:15.5px;
  font-weight:600;
  color:var(--text);
  margin-bottom:12px;
}
.abv8-save-row{
  display:flex;
  gap:8px;
}
.abv8-save-input{
  flex:1;min-width:0;
  border:1.5px solid var(--border);
  border-radius:12px;
  background:var(--inp);
  font-family:'Outfit',sans-serif;
  font-size:14px;
  color:var(--text);
  padding:11px 14px;
  outline:none;
  transition:all .2s;
}
.abv8-save-input:focus{
  border-color:var(--p);
  box-shadow:0 0 0 3px rgba(110,61,181,0.12);
}
.abv8-save-input::placeholder{color:var(--muted);}

.abv8-save-btn{
  padding:11px 18px;
  border:1.5px solid var(--border);
  border-radius:12px;
  background:linear-gradient(135deg,var(--p),var(--b));
  color:#fff;
  font-family:'Outfit',sans-serif;
  font-size:13.5px;
  font-weight:600;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:7px;
  transition:all .2s;
  white-space:nowrap;
  box-shadow:0 4px 12px rgba(110,61,181,0.25);
}
.abv8-save-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(110,61,181,0.35);
}
.abv8-save-btn:active{transform:translateY(0);}

/* Search inside saved card */
.abv8-saved-card .abv8-search{
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 14px;
  border:1.5px solid var(--border);
  border-radius:12px;
  background:var(--inp);
  transition:all .2s;
  margin-bottom:12px;
}
.abv8-saved-card .abv8-search:focus-within{
  border-color:var(--p);
  box-shadow:0 0 0 3px rgba(110,61,181,0.12);
}
.abv8-saved-card .abv8-search svg{color:var(--muted);flex-shrink:0;}
.abv8-saved-card .abv8-search input{
  flex:1;
  border:none;background:transparent;
  font-family:'Outfit',sans-serif;
  font-size:13.5px;
  color:var(--text);
  padding:11px 0;
  outline:none;
}
.abv8-saved-card .abv8-search input::placeholder{color:var(--muted);}

/* Fallback: if save/saved cards are NOT gradient (e.g. theme override) */
.abv8-search{
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 14px;
  border:1.5px solid var(--border);
  border-radius:12px;
  background:var(--card2);
  transition:all .2s;
  margin-bottom:12px;
}
.abv8-search:focus-within{border-color:var(--b);box-shadow:0 0 0 3px rgba(34,114,176,0.08);}
.abv8-search svg{color:var(--muted);flex-shrink:0;}
.abv8-search input{
  flex:1;
  border:none;background:transparent;
  font-family:'Outfit',sans-serif;
  font-size:13.5px;
  color:var(--text);
  padding:10px 0;
  outline:none;
}
.abv8-search input::placeholder{color:var(--muted);}

/* Saved list — empty state inside gradient card */
.abv8-empty{
  text-align:center;
  padding:28px 16px;
  background:rgba(255,255,255,0.12);
  border-radius:12px;
  font-size:13px;
  color:rgba(255,255,255,0.85);
  line-height:1.7;
  border:1px solid rgba(255,255,255,0.12);
  backdrop-filter:blur(10px);
}
.abv8-saved-card .abv8-empty{
  background:rgba(255,255,255,0.12);
  color:rgba(255,255,255,0.85);
  border:1px solid rgba(255,255,255,0.12);
}
/* Override empty-state inside gradient saved card */
.abv8-saved-card .empty-state{
  background:rgba(255,255,255,0.12);
  border:1.5px dashed rgba(255,255,255,0.25);
  color:rgba(255,255,255,0.85);
}
.abv8-saved-card .empty-state .empty-state-icon{
  background:rgba(255,255,255,0.15);
  color:rgba(255,255,255,0.9);
}
.abv8-saved-card .empty-state .empty-state-title{
  color:#fff;
}
.abv8-saved-card .empty-state .empty-state-hint{
  color:rgba(255,255,255,0.75);
}
.abv8-saved-card .empty-state .empty-state-hint b{
  color:#fff;
}
.abv8-recipe-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  background:var(--card2);
  border-radius:12px;
  margin-bottom:7px;
  cursor:pointer;
  transition:all .2s;
  border:1px solid var(--border);
}
.abv8-recipe-item:hover{
  border-color:var(--b);
  transform:translateX(3px);
  background:linear-gradient(135deg, rgba(110,61,181,0.06), rgba(34,114,176,0.03));
  box-shadow:0 3px 10px rgba(110,61,181,0.15);
}
.abv8-recipe-item:active{
  transform:translateX(1px) scale(0.99);
  transition-duration:.08s;
}
.abv8-recipe-item:focus-visible{
  outline:2px solid var(--p);
  outline-offset:2px;
}
.abv8-recipe-info{flex:1;min-width:0;}
.abv8-recipe-name{
  font-family:'Fraunces',serif;
  font-size:14.5px;
  font-weight:600;
  color:var(--text);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.abv8-recipe-meta{
  font-size:11.5px;
  color:var(--muted);
  margin-top:3px;
}
.abv8-recipe-meta b{color:var(--b);font-weight:600;}
.abv8-recipe-acts{display:flex;gap:6px;flex-shrink:0;}
.abv8-recipe-btn{
  padding:6px 11px;
  border:1.5px solid var(--border);
  background:var(--card);
  border-radius:9px;
  font-family:'Outfit',sans-serif;
  font-size:11.5px;
  font-weight:600;
  color:var(--muted);
  cursor:pointer;
  transition:all .15s;
  white-space:nowrap;
}
.abv8-recipe-btn:hover{border-color:var(--b);color:var(--b);background:var(--bl);}
.abv8-recipe-btn.del:hover{border-color:var(--r);color:var(--r);background:var(--rl);}

/* Recipe items inside gradient saved card — translucent */
.abv8-saved-card .abv8-recipe-item{
  background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.15);
  backdrop-filter:blur(10px);
}
.abv8-saved-card .abv8-recipe-item:hover{
  background:rgba(255,255,255,0.18);
  border-color:rgba(255,255,255,0.3);
  transform:translateX(2px);
}
.abv8-saved-card .abv8-recipe-name{color:#fff;}
.abv8-saved-card .abv8-recipe-meta{color:rgba(255,255,255,0.75);}
.abv8-saved-card .abv8-recipe-meta b{color:#fff;}
.abv8-saved-card .abv8-recipe-btn{
  border:1.5px solid rgba(255,255,255,0.35);
  background:rgba(255,255,255,0.12);
  color:rgba(255,255,255,0.9);
  backdrop-filter:blur(10px);
}
.abv8-saved-card .abv8-recipe-btn:hover{
  border-color:rgba(255,255,255,0.7);
  background:rgba(255,255,255,0.25);
  color:#fff;
}
.abv8-saved-card .abv8-recipe-btn.del:hover{
  border-color:#ff7070;
  background:rgba(255,100,100,0.25);
  color:#fff;
}


/* COST CALCULATOR */

/* ── Buton generic Adaugă (folosit în Cost, Capsate, Pre-Batch modal) ── */
.add-btn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 16px;
  border:1.5px dashed rgba(45,140,80,0.4);
  border-radius:13px;
  background:rgba(45,140,80,0.05);
  font-family:'Outfit',sans-serif;
  font-size:13.5px;
  font-weight:600;
  color:#2d8c50;
  cursor:pointer;
  transition:all .2s;
  margin-top:4px;
}
.add-btn:hover{
  border-style:solid;
  border-color:#2d8c50;
  background:rgba(45,140,80,0.1);
  transform:translateY(-1px);
  box-shadow:0 4px 14px rgba(45,140,80,0.15);
}
.add-btn:active{transform:translateY(0);}
[data-theme="dark"] .add-btn{
  border-color:rgba(69,181,104,0.4);
  color:#5ed085;
  background:rgba(45,140,80,0.08);
}
[data-theme="dark"] .add-btn:hover{
  border-color:#5ed085;
  background:rgba(45,140,80,0.15);
}

/* ── Buton Salvează produs (Capsate) ── */
.capsate-save-btn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:11px 16px;
  border:none;
  border-radius:12px;
  background:linear-gradient(135deg,#5c35a8,#7c5ac0);
  color:#fff;
  font-family:'Outfit',sans-serif;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(92,53,168,0.3);
  transition:all .2s;
}
.capsate-save-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 20px rgba(92,53,168,0.4);
  background:linear-gradient(135deg,#6b44b8,#8a68d0);
}
.capsate-save-btn:active{transform:translateY(0);}


.cost-cur-btn{padding:6px 14px;border-radius:10px;border:1.5px solid var(--border);background:var(--card2);cursor:pointer;font-family:'Outfit',sans-serif;font-size:12px;font-weight:600;color:var(--muted);transition:all .18s;}
.cost-cur-btn:hover{border-color:var(--b);color:var(--b);background:var(--bl);}
.cost-cur-btn.active{background:var(--b);border-color:var(--b);color:#fff;}
.cost-ing-block{background:var(--card2);border-radius:12px;padding:12px;margin-bottom:8px;overflow:hidden;}
.cost-ing-name-row{display:flex;align-items:center;gap:6px;margin-bottom:10px;padding:8px 12px;background:var(--inp);border:1.5px solid var(--border);border-radius:10px;transition:all .18s;}
.cost-ing-name-row:focus-within{border-color:var(--g);box-shadow:0 0 0 3px rgba(45,140,80,0.12);}
.cost-ing-name-row input{flex:1;min-width:0;border:none;background:transparent;font-family:'Outfit',sans-serif;font-size:13px;font-weight:500;color:var(--text);outline:none;}
.cost-ing-name-row input::placeholder{color:var(--muted);}
.cost-ing-name-row .delx{flex-shrink:0;background:transparent;border:none;color:var(--muted);cursor:pointer;font-size:18px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:6px;padding:0;line-height:1;}
.cost-ing-name-row .delx:hover{color:var(--r);background:var(--rl);}

/* Unified small input (used in Cost cocktail + Pre-Batch) */
.sm-inp{
  display:flex;
  align-items:center;
  border:1.5px solid var(--border);
  border-radius:10px;
  overflow:hidden;
  background:var(--inp);
  transition:border-color .18s, box-shadow .18s;
  min-height:38px;
}
.sm-inp:focus-within{
  border-color:var(--g);
  box-shadow:0 0 0 3px rgba(45,140,80,0.12);
}
.sm-inp input{
  flex:1;
  min-width:0;
  width:100%;
  border:none;
  background:transparent;
  font-family:'Outfit',sans-serif;
  font-size:14px;
  font-weight:600;
  color:var(--text);
  padding:7px 9px;
  outline:none;
  text-align:center;
}
.sm-inp .ulab{
  padding:0 8px;
  font-size:11px;
  font-weight:500;
  color:var(--muted);
  border-left:1px solid var(--border);
  white-space:nowrap;
  align-self:stretch;
  display:flex;
  align-items:center;
}

.cost-three-col{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;width:100%;}
.cost-three-col > div{min-width:0;}
.cost-three-col .sm-inp{min-width:0;width:100%;}
.cost-three-col .sm-inp input{min-width:0;width:100%;font-size:14px;padding:7px 6px;}
.cost-three-col .sm-inp .ulab{padding:0 7px;font-size:11px;}
.cost-sm-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:2px;}
.break-row{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;background:var(--card2);border-radius:9px;font-size:12px;}
.break-row .br-name{color:var(--text);font-weight:500;flex:1;}
.break-row .br-cost{color:var(--b);font-family:'Fraunces',serif;font-size:14px;}
.break-row .br-pct{font-size:10px;color:var(--muted);min-width:36px;text-align:right;}

/* MODAL */
#serviceModal{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.55);
  z-index:900;
  pointer-events:all;
}
#serviceModalBox{
  width:min(480px,96vw);
  border-radius:22px 22px 0 0;
}
@keyframes spin{to{transform:rotate(360deg)}}
.service-tab-btn{flex:1;padding:8px 6px;border:none;background:transparent;border-radius:9px;font-family:'Outfit',sans-serif;font-size:12px;font-weight:600;color:var(--muted);cursor:pointer;transition:all .2s;}
.service-tab-btn.active{background:linear-gradient(135deg,#c05010,#e06820);color:#fff;box-shadow:0 3px 10px rgba(224,104,32,0.35);}
.service-recipe-item{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--card2);border:1.5px solid var(--border);border-radius:12px;margin-bottom:7px;transition:border-color .15s;}
.service-recipe-item.selected{border-color:#e06820;background:rgba(224,104,32,0.06);}
.service-recipe-name{flex:1;font-size:13px;font-weight:600;color:var(--text);}
.service-recipe-sub{font-size:10.5px;color:var(--muted);}
.service-qty-inp{width:64px;border:1.5px solid var(--border);border-radius:9px;background:var(--inp);color:var(--text);font-family:'Fraunces',serif;font-size:16px;font-weight:700;padding:5px 8px;text-align:center;outline:none;}
.service-qty-inp:focus{border-color:#e06820;}
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:900;display:none;}
.modal-overlay.open{display:flex;align-items:center;justify-content:center;padding:20px;}

/* Backup modal specific */
.backup-stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-bottom:16px;
  padding:12px;
  background:var(--card2);
  border-radius:12px;
  border:1px solid var(--border);
}
.backup-stat{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:8px 10px;
  background:var(--card);
  border-radius:9px;
  border:1px solid var(--border);
}
.backup-stat-count{
  font-family:'Fraunces',serif;
  font-size:20px;
  font-weight:700;
  color:var(--text);
  line-height:1;
}
.backup-stat-label{
  font-size:10.5px;
  font-weight:600;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:0.4px;
}
.backup-section{
  background:var(--card2);
  border:1px solid var(--border);
  border-radius:13px;
  padding:14px;
  margin-bottom:10px;
}
.backup-section-header{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
}
.backup-section-icon{
  width:40px;
  height:40px;
  border-radius:11px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  flex-shrink:0;
}
.backup-icon-export{
  background:linear-gradient(135deg, #2d8c50, #0f5f4a);
  box-shadow:0 4px 12px rgba(45,140,80,0.3);
}
.backup-icon-import{
  background:linear-gradient(135deg, #6e3db5, #4a2a85);
  box-shadow:0 4px 12px rgba(110,61,181,0.3);
}
.backup-section-text{flex:1;min-width:0;}
.backup-section-title{
  font-family:'Fraunces',serif;
  font-size:15px;
  font-weight:600;
  color:var(--text);
  line-height:1.2;
}
.backup-section-hint{
  font-size:11.5px;
  color:var(--muted);
  margin-top:2px;
  line-height:1.4;
}
.backup-btn{
  width:100%;
  padding:12px 16px;
  border:none;
  border-radius:11px;
  font-family:'Outfit',sans-serif;
  font-size:13.5px;
  font-weight:700;
  color:#fff;
  cursor:pointer;
  transition:all .18s;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  letter-spacing:0.3px;
}
.backup-btn-export{
  background:linear-gradient(135deg, #2d8c50, #0f5f4a);
  box-shadow:0 4px 12px rgba(45,140,80,0.25);
}
.backup-btn-export:hover,.backup-btn-export:active{
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(45,140,80,0.4);
}
.backup-btn-import{
  background:linear-gradient(135deg, #6e3db5, #4a2a85);
  box-shadow:0 4px 12px rgba(110,61,181,0.25);
}
.backup-btn-import:hover,.backup-btn-import:active{
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(110,61,181,0.4);
}
.backup-info{
  display:flex;
  align-items:flex-start;
  gap:8px;
  padding:10px 12px;
  background:rgba(34,114,176,0.08);
  border:1px solid rgba(34,114,176,0.25);
  border-radius:10px;
  font-size:11.5px;
  color:var(--muted);
  line-height:1.5;
  margin-top:6px;
}
[data-theme="dark"] .backup-info{
  background:rgba(34,114,176,0.12);
  color:rgba(255,255,255,0.75);
}
.backup-info svg{color:#2272b0;}
[data-theme="dark"] .backup-info svg{color:#5ab0ee;}
.modal-box{background:var(--card);border-radius:22px;padding:1.5rem 1rem 1.5rem;width:100%;max-width:460px;max-height:90vh;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;box-shadow:0 24px 64px rgba(0,0,0,.4);animation:fadeIn .22s ease;}
@keyframes slideUp{from{opacity:0;}to{opacity:1;}}
.modal-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;}
.modal-title{font-family:'Fraunces',serif;font-size:18px;font-weight:600;color:var(--text);}
.modal-close{width:36px;height:36px;border-radius:50%;border:1.5px solid var(--border);background:var(--card2);cursor:pointer;font-size:18px;color:var(--muted);display:flex;align-items:center;justify-content:center;}
.modal-close:hover{background:var(--rl);color:var(--r);border-color:var(--r);}

/* IO row kept for potential future use but hidden */
.io-row{display:none;}


/* ═══════════════════════════════════════════════════════════
   UNIFIED HERO CARD SYSTEM — same structure, different colors
   Each section has its own color story:
   - Super Juice: warm citrus (orange → amber)
   - ABV: mystical (purple → blue) [already done]
   - Cordial: floral (pink → magenta)
   - Pre-Batch: professional (teal → dark teal)
   - Cost: money (emerald → teal)
   ═══════════════════════════════════════════════════════════ */



/* Print styles */
/* ═══ PRINT STYLES ═══ */
@media print{
  body *{visibility:hidden!important;}
  #stockPrintArea,#stockPrintArea *{visibility:visible!important;}
  #stockPrintArea{
    position:fixed!important;
    top:0!important;left:0!important;
    width:210mm!important;
    min-height:297mm!important;
    background:#fff!important;
    color:#000!important;
    font-family:'Outfit',sans-serif!important;
    padding:15mm 15mm 10mm!important;
    box-sizing:border-box!important;
    visibility:visible!important;
  }
  .stock-print-hdr{margin-bottom:12mm;border-bottom:2px solid #0f6b7a;padding-bottom:6mm;}
  .stock-print-title{font-family:'Fraunces',serif;font-size:22pt;font-weight:700;color:#0f6b7a;}
  .stock-print-meta{font-size:10pt;color:#444;margin-top:3mm;display:flex;gap:20mm;}
  .stock-print-table{width:100%;border-collapse:collapse;font-size:9pt;}
  .stock-print-table th{background:#0f6b7a;color:#fff;padding:4mm 3mm;text-align:center;font-weight:700;font-size:8.5pt;letter-spacing:0.3px;}
  .stock-print-table th:first-child{text-align:left;}
  .stock-print-table td{padding:3.5mm 3mm;border-bottom:0.5pt solid #ccc;text-align:center;font-size:9pt;}
  .stock-print-table td:first-child{text-align:left;font-weight:600;}
  .stock-print-table tr:nth-child(even) td{background:#f5fbfc;}
  .stock-print-table td.final-col{font-weight:700;color:#0f6b7a;}
  .stock-print-table td.final-col.neg{color:#c0392b;}
  .stock-print-footer{margin-top:8mm;font-size:8pt;color:#888;text-align:right;border-top:1pt solid #ddd;padding-top:4mm;}
}

/* COST — layout gestionat în regula principală */

/* ═══════════════════════════════════════════════════════════
   COST — Mode toggle (Cocktail / Cafea)
   ═══════════════════════════════════════════════════════════ */
.cost-mode-toggle{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  background:var(--card);
  padding:6px;
  border-radius:16px;
  margin-bottom:14px;
  border:1px solid rgba(45,140,80,0.25);
  box-shadow:0 3px 12px rgba(0,0,0,0.05);
}
[data-theme="dark"] .cost-mode-toggle{
  border-color:rgba(45,140,80,0.4);
}
.cost-mode-btn{
  flex:1 1 calc(50% - 8px);
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:11px 8px;
  border:none;
  background:transparent;
  border-radius:11px;
  font-family:'Outfit',sans-serif;
  font-size:13px;
  font-weight:600;
  color:var(--muted);
  cursor:pointer;
  transition:all .25s cubic-bezier(.4,0,.2,1);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.cost-mode-btn svg{display:none;}
.cost-mode-btn:hover{color:var(--text);}
.cost-mode-btn.active{
  background:linear-gradient(135deg,#2d8c50 0%,#0f5f4a 100%);
  color:#fff;
  box-shadow:0 4px 14px rgba(45,140,80,0.3),inset 0 1px 0 rgba(255,255,255,0.25);
}
/* Butonul + adaugă — mai mic, în dreapta */
#costModeAddBtn{
  flex:0 0 38px!important;
  min-width:38px!important;
  font-size:20px!important;
  font-weight:400!important;
  border:1.5px dashed rgba(45,140,80,0.5)!important;
  color:var(--g)!important;
  padding:8px 4px!important;
}

/* ═══════════════════════════════════════════════════════════
   COFFEE INGREDIENTS
   ═══════════════════════════════════════════════════════════ */
.coffee-name-input{
  width:100%;
  padding:11px 14px;
  border:1.5px solid var(--border);
  border-radius:12px;
  background:var(--card);
  font-family:'Outfit',sans-serif;
  font-size:14px;
  color:var(--text);
  outline:none;
  box-sizing:border-box;
  transition:all .2s;
}
.coffee-name-input:focus{
  border-color:#2d8c50;
  box-shadow:0 0 0 3px rgba(45,140,80,0.12);
}
.coffee-name-input::placeholder{color:var(--muted);}

.coffee-ing-row{
  background:var(--card2);
  border:1px solid var(--border);
  border-radius:13px;
  padding:11px 12px;
  transition:all .2s;
}
.coffee-ing-row:hover{
  border-color:rgba(45,140,80,0.35);
  background:var(--card);
}
.coffee-ing-header{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:9px;
}
.coffee-ing-icon{
  width:32px;height:32px;
  border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;
  flex-shrink:0;
  background:rgba(45,140,80,0.12);
}
.coffee-ing-name{
  font-size:13.5px;
  font-weight:600;
  color:var(--text);
  flex:1;
  min-width:0;
}
.coffee-ing-unit-info{
  font-size:10.5px;
  color:var(--muted);
  font-weight:500;
}
.coffee-ing-fields{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:6px;
}
.coffee-ing-field{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
}
.coffee-ing-field label{
  font-size:10px;
  font-weight:600;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:0.4px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.coffee-ing-field .inp-wrap{
  height:36px;
  min-width:0;
}
.coffee-ing-field .inp-wrap input{
  font-size:13px;
  padding:6px 8px;
  min-width:0;
  width:100%;
}
.coffee-ing-field .inp-wrap .ulab{
  font-size:10px;
  padding:0 8px;
}
.coffee-ing-cost{
  margin-top:8px;
  padding:6px 10px;
  background:rgba(45,140,80,0.1);
  border-radius:8px;
  font-size:11.5px;
  color:var(--text);
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.coffee-ing-cost b{color:#2d8c50;font-weight:700;}
[data-theme="dark"] .coffee-ing-cost b{color:#5ed085;}

/* ═══════════════════════════════════════════════════════════
   COFFEE RESULTS + MARGIN BAR
   ═══════════════════════════════════════════════════════════ */
.coffee-pricing-row{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:10px;
  margin-top:4px;
}
.coffee-price-input-wrap label{
  display:block;
  font-size:11px;
  font-weight:600;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:0.5px;
  margin-bottom:5px;
}