/* ===========================================================
 * 05-ingredients.css — APPEND to your style.css
 * Ingredient editor patches (P5): photo, icon picker, g_per_unit
 * =========================================================== */

/* Photo / icon section */
.ing-photo-section {
  background: var(--surface, #fff);
  border: 1px solid var(--border-soft, #EEF0EA);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 14px;
}
.ing-photo-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
}
.ing-photo-head-icon {
  width: 30px; height: 30px; border-radius: 9px;
  background: #DCFCE7; color: #0F7A35;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0;
}
.ing-photo-head h3 { font-size: 14px; font-weight: 700; margin: 0; letter-spacing: -0.005em; }
.ing-photo-head p { font-size: 11px; color: var(--muted, #6B7280); margin: 1px 0 0; line-height: 1.4; }

.ing-photo-row {
  display: flex; gap: 12px; align-items: center;
  margin-bottom: 12px;
}
.ing-photo-slot {
  position: relative;
  width: 96px; height: 96px;
  border-radius: 20px;
  background: #FAFAF8;
  border: 1.5px dashed #D1D5DB;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.ing-photo-img {
  width: 100%; height: 100%;
  background-size: cover; background-position: center;
}
.ing-photo-slot .ing-icon-tile {
  /* no border when icon shown */
}
.ing-photo-clear {
  position: absolute; top: -6px; right: -6px;
  width: 24px; height: 24px;
  background: #EF4444; color: #fff;
  border: 2px solid #fff; border-radius: 50%;
  font-size: 14px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(239,68,68,0.4);
  cursor: pointer; padding: 0;
}
.ing-photo-actions {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.ing-btn {
  min-height: 36px; padding: 0 12px;
  background: var(--primary, #16A34A); border: 0; border-radius: 10px;
  color: #fff; font-size: 12.5px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer;
}
.ing-btn-block { width: 100%; }
.ing-btn-soft { background: #F1F2EE; color: var(--text-2, #374151); }
.ing-photo-hint {
  font-size: 10.5px; color: var(--faint, #9CA3AF);
  line-height: 1.4; margin-top: 2px;
}

.ing-icon-divider {
  display: flex; align-items: center; gap: 10px;
  margin: 6px 0 10px;
  font-size: 11px; color: var(--faint, #9CA3AF);
}
.ing-icon-divider::before, .ing-icon-divider::after {
  content: ""; flex: 1; height: 1px;
  background: var(--border-soft, #EEF0EA);
}
.ing-icon-divider.is-hidden { display: none; }

.ing-icon-picker {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}
.ing-icon-picker.is-hidden { display: none; }
.ing-icon-opt {
  padding: 4px;
  background: transparent;
  border: 1.5px solid transparent;
  border-radius: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.ing-icon-opt.is-active {
  border-color: var(--primary, #16A34A);
  background: #ECFDF5;
}

/* g_per_unit section */
.ing-gpu-section {
  background: linear-gradient(135deg, #FAF5FF 0%, var(--surface, #fff) 100%);
  border: 1px solid #E9D5FF;
  border-radius: 14px;
  padding: 14px;
  margin: 16px 0;
}
.ing-gpu-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
}
.ing-gpu-icon {
  width: 30px; height: 30px; border-radius: 9px;
  background: #EDE9FE; color: #6D28D9;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.ing-gpu-head h3 { font-size: 14px; font-weight: 700; margin: 0; letter-spacing: -0.005em; }
.ing-gpu-head p { font-size: 11px; color: var(--muted, #6B7280); margin: 1px 0 0; line-height: 1.4; }

.ing-gpu-field { display: flex; flex-direction: column; gap: 5px; }
.ing-gpu-field label {
  font-size: 11.5px; font-weight: 600;
  color: var(--muted, #6B7280);
}
.ing-gpu-input-wrap {
  display: flex; align-items: stretch;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #E7E9E3);
  border-radius: 10px;
  overflow: hidden;
}
.ing-gpu-input {
  flex: 1; min-width: 0;
  height: 42px; padding: 0 12px;
  border: 0; background: transparent;
  font-size: 14px; font-weight: 700;
  color: var(--text, #111827);
  outline: none;
  font-variant-numeric: tabular-nums;
  font-family: "Inter", "IBM Plex Sans Thai", sans-serif;
}
.ing-gpu-input-wrap > span {
  display: inline-flex; align-items: center;
  padding: 0 12px;
  font-size: 12px; color: var(--muted, #6B7280);
  font-weight: 600;
  border-left: 1px solid var(--border-soft, #EEF0EA);
  background: #FAFAF8;
}
.ing-gpu-hint {
  font-size: 10.5px; color: var(--faint, #9CA3AF);
  margin-top: 3px; line-height: 1.4;
}