/* @rozgor-part 9/10 — OVQAT VARAG'I + SOZLAMALAR bo'limi
   BO'LINDI (5d-blok): ilgari bitta `style.css` (3058 qator) edi. TARTIB MUHIM —
   keyingi qoida oldingisini bosadi, shuning uchun public/index.html dagi <link>
   teglari AYNAN shu raqamlar tartibida turishi SHART. */
/* --- Ovqat varag'i (meal sheet) — mahsulot varag'i naqshi ------------------
   Qobiq (.sheet-overlay / .sheet / .sheet-title / .sheet-sep / .sheet-actions)
   mahsulot varag'idan MEROS — bu yerda faqat ovqatga xos qismlar. */

/* Sarlavha ostidagi sana ("3-yanvar, chorshanba"). `.sheet-title` — 19px qalin
   matn; sana uning OSTIDA turishi uchun kichik tepa oraliq beriladi (manfiy
   margin ISHLATILMAYDI — uzun sarlavha 2 qatorga o'ralganda ustma-ust tushardi). */
.meal-sheet-date {
  margin: 4px 0 10px;
  color: var(--tg-hint);
  font-size: 13px;
  line-height: 1.3;
}

/* Ovqat nomi maydoni. font-size 16px — iOS zumlashiga qarshi. */
.meal-name-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(128, 128, 128, 0.3);
  border-radius: 10px;
  background: var(--tg-bg);
  color: var(--tg-text);
  font-family: inherit;
  font-size: 16px;
}

.meal-name-input:focus {
  outline: none;
  border-color: var(--tg-link);
}

/* "Mahsulotlar (7)" + o'ngda "✨ AI" tugmasi */
.meal-items-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 4px 0 6px;
}

.meal-items-title {
  color: var(--tg-hint);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.meal-ai {
  min-height: 32px;
  padding: 6px 12px;
  border: 1px solid rgba(36, 129, 204, 0.4);
  border-radius: 16px;
  background: transparent;
  color: var(--tg-link);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.meal-ai:active {
  opacity: 0.7;
}

.meal-ai[disabled] {
  opacity: 0.45;
  cursor: default;
}

.meal-items {
  display: flex;
  flex-direction: column;
}

.meal-it {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 6px 0;
  border-top: 1px solid rgba(128, 128, 128, 0.15);
}

/* Ro'yxatda bor/yo'q belgisi: yashil "✓" yoki sariq "+" (qo'shish kerak) */
.meal-it-mark {
  flex: 0 0 18px;
  font-size: 14px;
  line-height: 1;
  text-align: center;
}

.meal-it-mark.has {
  color: var(--done);
}

.meal-it-mark.miss {
  color: var(--warn);
}

.meal-it-name {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.meal-it-qty {
  flex: 0 0 auto;
  color: var(--tg-hint);
  font-size: 13px;
}

/* Mahsulotni ovqatdan olib tashlash. Ko'rinadigan o'lcham kichik, bosish
   maydoni 40px (::before bilan kengaytirilgan — .family-act naqshi). */
.meal-it-del {
  position: relative;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 13px;
  background: transparent;
  color: var(--tg-hint);
  font-family: inherit;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.meal-it-del::before {
  content: "";
  position: absolute;
  top: -7px;
  right: -7px;
  bottom: -7px;
  left: -7px;
}

.meal-it-del:active {
  color: var(--danger);
}

/* Bo'sh holat: "Mahsulot yo'q — AI bilan to'ldiring yoki qo'lda qo'shing" */
.meal-items-empty {
  padding: 10px 0;
  color: var(--tg-hint);
  font-size: 13.5px;
  line-height: 1.4;
}

/* Qo'lda qo'shish qatori: matn maydoni + "+" tugmasi */
.meal-add-row {
  display: flex;
  gap: 8px;
  margin: 8px 0 2px;
}

/* font-size 16px — iOS zumlashiga qarshi. */
.meal-add-input {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid rgba(128, 128, 128, 0.3);
  border-radius: 10px;
  background: var(--tg-bg);
  color: var(--tg-text);
  font-family: inherit;
  font-size: 16px;
}

.meal-add-input:focus {
  outline: none;
  border-color: var(--tg-link);
}

.meal-add-btn {
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 40px;
  border: none;
  border-radius: 10px;
  background: var(--tg-button);
  color: var(--tg-button-text);
  font-family: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.meal-add-btn:active {
  opacity: 0.85;
}

/* Yangi ovqat varag'idagi "✨ Mahsulotlarni AI tanlasin" tanlovi (belgilangan
   holatda AI so'rovi ketadi — bu PUL, shuning uchun oshkora tanlov). */
.meal-ai-opt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 10px 0;
  border: none;
  background: transparent;
  color: inherit;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.meal-ai-box {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border: 1.5px solid rgba(128, 128, 128, 0.5);
  border-radius: 6px;
  color: transparent;
  font-size: 14px;
  line-height: 1;
}

.meal-ai-opt[aria-checked="true"] .meal-ai-box {
  border-color: var(--tg-link);
  background: var(--tg-link);
  color: #fff;
}

.meal-ai-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.meal-ai-label {
  font-size: 15px;
  font-weight: 600;
}

.meal-ai-hint {
  color: var(--tg-hint);
  font-size: 12.5px;
  line-height: 1.35;
}

/* --- "⚙️ Sozlamalar" bo'limi — guruhlangan qatorlar ----------------------- */
.set-group {
  margin: 0 0 18px;
}

/* Bo'lim sarlavhasi — kichik va kulrang (filtr paneli sarlavhalari kabi) */
.set-group-label {
  margin: 0 4px 6px;
  color: var(--tg-hint);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.set-rows {
  border-radius: var(--radius);
  background: var(--tg-secondary-bg);
  overflow: hidden;
}

/* Qatorlar orasidagi ingichka ajratgich (til akkordeoni o'ralgan .lang-dd ham
   shu qoidaga tushadi — shuning uchun `* + *`). */
.set-rows > * + * {
  border-top: 1px solid rgba(128, 128, 128, 0.15);
}

.set-row {
  display: flex;
  align-items: center;
  /* Bo'shliq va o'lcham ATAYLAB ixcham: 375px ekranda eng uzun juftlik
     (ru/uzc tarjimasidagi "Oila" qatori + izohi + "2 kishi") sig'sin. */
  gap: 8px;
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  border: none;
  background: transparent;
  color: var(--tg-text);
  font-family: inherit;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.set-row:active {
  background: rgba(128, 128, 128, 0.14);
}

.set-row-icon {
  flex: none;
  width: 20px;
  font-size: 18px;
  line-height: 1;
  text-align: center;
}

/* Nom + (bo'lsa) kichik izoh ustma-ust turadigan ustun. Faqat "👥 Oila"
   qatorida ishlatiladi ("A'zolar va taklif havolasi"); boshqa qatorlarda nom
   to'g'ridan-to'g'ri .set-row bolasi bo'lib qolaveradi. */
.set-row-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Nom UCH NUQTAGA kesilmaydi — joy yetmasa o'raladi (qator balandroq bo'ladi).
   Uzunroq tarjimalarda (ru/uzc) matn yashirinib qolmasligi uchun ATAYLAB. */
.set-row-name {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Qator ostidagi kichik kulrang izoh — nima ochilishini aytadi. */
.set-row-sub {
  color: var(--tg-hint);
  font-size: 12px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

/* O'ngdagi qiymat ("2 kishi", "O'zbekcha") — xira */
.set-row-val {
  flex: none;
  max-width: 46%;
  color: var(--tg-hint);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.set-row-chev {
  flex: none;
  color: var(--tg-hint);
  font-size: 20px;
  line-height: 1;
}

.add-input {
  flex: 1;
  padding: 12px 14px;
  border: none;
  border-radius: var(--radius);
  background: var(--tg-secondary-bg);
  color: var(--tg-text);
  font-size: 16px;
  outline: none;
}

.add-input::placeholder {
  color: var(--tg-hint);
}

.add-btn {
  flex: none;
  width: 48px;
  border: none;
  border-radius: var(--radius);
  background: var(--tg-button);
  color: var(--tg-button-text);
  font-size: 26px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
}

.add-btn:disabled {
  opacity: 0.5;
}