/* ==========================================================================
   Skipintro Recipe Crawler – Frontend Styles (recipe.css)
   Fokus: Layout/UI der Toolbar + Zutatenliste, nondestruktiv zur Logik
   ========================================================================== */

/* ---------- Utility ------------------------------------------------------ */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- Toolbar (2 Spalten, dotted Separator) ----------------------- */
.sitc-controls {
  display: flex;
  align-items: center;
  justify-content: space-between; /* links: Skalierung, rechts: Actions */
  gap: .75rem;
  margin: 1rem 0;
  padding: .5rem 0;
  border-top: 1px dashed #cccccc;
  border-bottom: 1px dashed #cccccc;
}

/* Linke Spalte: Skalierung */
.sitc-servings-control {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border-radius: 999px;
  padding: .25rem .5rem;
}

/* Personen-Icon (ersetzt Text-Label) */
.sitc-icon-person {
  display: inline-block;
  width: 22px; height: 22px;
  background-color: #000; /* schwarz */
  -webkit-mask: url('../img/person_add_56dp_000_FILL0_wght200_GRAD0_opsz48.svg') no-repeat center / contain;
          mask: url('../img/person_add_56dp_000_FILL0_wght200_GRAD0_opsz48.svg') no-repeat center / contain;
}

/* Runde schwarze Buttons NUR für +/− */
.sitc-servings-control .sitc-btn {
  position: relative;
  background-color: #000;
  color: transparent;       /* vermeidet doppelte Zeichen */
  border: none;
  border-radius: 50%;
  width: 36px; height: 36px;
  font-size: 0;             /* Text unsichtbar, SR-Text bleibt in .sr-only */
  line-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.sitc-servings-control .sitc-btn:hover { background-color: #333; }

/* Icon-Inlay (weiß) in den runden Buttons */
.sitc-servings-control .sitc-btn::before {
  content: "";
  width: 18px; height: 18px;
  background-color: #fff; /* weißes Icon */
}
.sitc-servings-control .sitc-btn-minus::before {
  -webkit-mask: url('../img/remove_24dp_000_FILL0_wght300_GRAD0_opsz24.svg') no-repeat center / contain;
          mask: url('../img/remove_24dp_000_FILL0_wght300_GRAD0_opsz24.svg') no-repeat center / contain;
}
.sitc-servings-control .sitc-btn-plus::before {
  -webkit-mask: url('../img/add_24dp_000_FILL0_wght300_GRAD0_opsz24.svg') no-repeat center / contain;
          mask: url('../img/add_24dp_000_FILL0_wght300_GRAD0_opsz24.svg') no-repeat center / contain;
}

/* Anzeige der Menge */
.sitc-servings-display {
  min-width: 2ch;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Rechte Spalte: Actions (flache, schwarze Icons – ohne runden Hintergrund) */
.sitc-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-left: auto; /* drückt nach rechts */
}
.sitc-actions .sitc-btn {
  background: transparent;
  border: 0;
  padding: 0;
  width: 40px; height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
/* Falls Material-Icon-Fonts vorhanden sind: visuell ausblenden */
.sitc-actions .sitc-btn .material-symbols-outlined { display: none; }

/* Schwarze Mask-Icons */
.sitc-actions .sitc-btn::before {
  content: "";
  width: 32px; height: 32px;
  background-color: #000; /* schwarz */
}

/* Einkaufszettel (cart mit +) */
.sitc-actions .sitc-btn-grocery::before {
  -webkit-mask: url('../img/add_shopping_cart_56dp_000_FILL0_wght200_GRAD0_opsz48.svg') no-repeat center / contain;
          mask: url('../img/add_shopping_cart_56dp_000_FILL0_wght200_GRAD0_opsz48.svg') no-repeat center / contain;
}

/* Bildschirm anlassen (Kochmütze als Symbol) */
.sitc-actions .sitc-btn-wake::before {
  -webkit-mask: url('../img/chef_hat_56dp_000_FILL0_wght200_GRAD0_opsz48.svg') no-repeat center / contain;
          mask: url('../img/chef_hat_56dp_000_FILL0_wght200_GRAD0_opsz48.svg') no-repeat center / contain;
}

/* Refresh Button (Dev) */
.sitc-actions .sitc-btn-refresh::before {
  -webkit-mask: url('../img/refresh_56dp_000_FILL0_wght200_GRAD0_opsz48.svg') no-repeat center / contain;
          mask: url('../img/refresh_56dp_000_FILL0_wght200_GRAD0_opsz48.svg') no-repeat center / contain;
}

/* Vorbereitete, aber vorerst unsichtbare Buttons (kommen später mit Logik) */
.sitc-actions .sitc-btn-trash,
.sitc-actions .sitc-btn-photo { display: none !important; }

/* ---------- Zutatenliste ------------------------------------------------- */
ul.sitc-ingredients {
  list-style: none;
  padding-left: 0;
  margin-left: 0 !important;
}
.sitc-ingredient-group-title {
  list-style: none;
  margin: 1.4rem 0 .5rem;
  padding: 0;
}
.sitc-ingredient-group-title .sitc-group-title {
  display: inline-block;
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.35;
  margin: 0;
  color: #000;
}
.sitc-ingredients > .sitc-ingredient-group-title:first-child {
  margin-top: 0;
}
.sitc-ingredient { margin: .35rem 0; }

/* Label als 2-Spalten-Grid: [Checkbox][Text] (hängender Einzug) */
.sitc-ingredient > label {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  column-gap: .5rem;
  margin: 0;
}

/* Checkbox bündig links; kleiner vertikaler Offset */
.sitc-ingredient .sitc-chk {
  margin: 0;
  transform: translateY(1px);
  margin-top: 6px;
}

/* Textblock soll sauber umbrechen */
.sitc-ingredient .sitc-line { display: block; }
.sitc-ingredient.checked .sitc-name {
  text-decoration: line-through;
  opacity: .7;
}

/* Mengen fett */
.sitc-qty { font-weight: bold; }

/* ---------- Einkaufslisten-Panel ---------------------------------------- */
.sitc-shopping { margin-top: 1rem; }
.sitc-shopping .sitc-shopping-btn {
  background: #000;
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: .45rem .8rem;
  cursor: pointer;
}
.sitc-shopping-panel {
  display: none;
  margin-top: .75rem;
  border: 1px dashed #aaa;
  border-radius: .5rem;
  padding: .75rem;
}
.sitc-shopping-panel.active { display: block; }

/* ---------- Papierkorb-Bereich (nicht Toolbar) -------------------------- */
.sitc-trash { margin-top: 1rem; }
.sitc-trash .sitc-trash-btn {
  background: #000;
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: .45rem .8rem;
  cursor: pointer;
}

/* ---------- Quellen/Meta ------------------------------------------------- */
.sitc-source {
  margin-top: 1rem;
  font-size: .95rem;
}

/* Bullet-Points entfernen */
.sitc-ingredients {
  list-style: none;
  padding-left: 0;
}

/* Checked = durchgestrichen */
.sitc-ingredient input[type="checkbox"]:checked + .sitc-line {
  text-decoration: line-through;
  opacity: 0.6;
}

/* ---------- Responsive Tweaks (optional, leichtgewichtig) --------------- */
@media (min-width: 768px) {
  .sitc-actions { gap: 14px; }
  .sitc-servings-control .sitc-btn { width: 38px; height: 38px; }
  .sitc-servings-control .sitc-btn::before { width: 19px; height: 19px; }
}