/* ===================================================================
   Modal oynalar.

   Muhim qoida: modal — TO'LIQ QOP fon. Ilgari fon `--white` degan
   mavjud bo'lmagan tokendan olinardi, natijada oyna shaffof chiqib,
   orqadagi sahifa matni bilan aralashib ketardi va yozuvlar o'qilmasdi.
   Endi barcha yuzalar tema tokenlaridan olinadi.
   =================================================================== */
.overlay {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  background: #141A14;                 /* zaxira: var() ishlamasa ham qop fon */
  background: var(--overlay-bg);
  backdrop-filter: blur(10px) saturate(.6);
  -webkit-backdrop-filter: blur(10px) saturate(.6);
  display: grid; place-items: center;
  padding: var(--sp-4);
  overflow-y: auto;
  animation: fade .16s ease;
}
@keyframes fade { from { opacity: 0; } }

.modal {
  position: relative;
  width: 100%; max-width: 460px;
  max-height: calc(100vh - var(--sp-8));
  overflow-y: auto;
  /* Zaxira rang ataylab: `--surface` biror sababga ko'ra yechilmasa,
     oyna SHAFFOF bo'lib qolardi va orqadagi sahifa matni oyna matni
     bilan ustma-ust tushib, ikkalasi ham o'qilmasdi. */
  background: #FFFDF6;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  isolation: isolate;
  border-radius: var(--radius-l);
  padding: var(--sp-8);
  box-shadow: var(--shadow-lg);
  animation: rise .2s cubic-bezier(.2, .8, .3, 1);
}
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }

/* Oyna tepasidagi oltin chiziq — modal "qatlam" ekanini bildiradi */
.modal::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  border-radius: var(--radius-l) var(--radius-l) 0 0;
  background: var(--gold-shine);
}

.modal-wide { max-width: 680px; }
/* Sozlamalar oynasi — ENSIZ. Ichida faqat qisqa satrlar bor va 460 px
   da ular cho'zilib, o'rtasida katta bo'shliq qolardi. */
.modal-sheet { max-width: 360px; }
.modal h2 { font-size: var(--fs-xl); margin-bottom: var(--sp-4); color: var(--ink); }
.modal p { color: var(--ink-soft); }
.modal-close {
  position: absolute; top: var(--sp-4); right: var(--sp-4); z-index: 2;
  width: var(--ctl-h-sm); height: var(--ctl-h-sm); border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface-2); color: var(--ink-soft); font-size: var(--fs-base);
  border: 1px solid var(--line);
}
.modal-close:hover { background: var(--ink); color: var(--surface); }

/* Izoh bloki (bron/ariza tushuntirishi) */
.notice {
  background: var(--surface-2); border: 1px solid var(--line);
  border-left: 4px solid var(--gold-500);
  border-radius: var(--radius-s);
  padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2);
  font-size: var(--fs-sm); color: var(--ink);
}
.notice p { color: var(--ink); }
.notice b { color: var(--ink); }

/* Telegram havolasi.

   Avval `--emerald-100` fon + `--emerald-900` matn edi; tungi rejimda
   ikkalasi ham qorong'i bo'lib qolib, faqat ✈️ emoji ko'rinardi.
   Endi rang aniq: to'q ko'k-zumrad fon ustida oq matn — ikkala temada
   ham bir xil o'qiladi. */
.tg-line {
  display: flex; align-items: center; gap: var(--sp-2);
  /* TELEGRAM rangi — brend belgisi, tokenga o'tkazilmaydi va temaga
     qarab o'zgarmaydi: odam uni rangidan tanib turishi kerak. Ikkala
     to'xtash ham to'q, ustidagi oq matn 5.5 dan yuqori kontrast beradi. */
  background: linear-gradient(120deg, #1B7FA8 0%, #2AA0CC 100%);
  color: var(--white);
  border-radius: var(--radius-s); padding: var(--sp-3) var(--sp-4);
  font-weight: 700; font-size: var(--fs-sm);
  box-shadow: var(--shadow-sm);
  transition: filter var(--transition), transform var(--transition);
}
.tg-line:hover { filter: brightness(1.08); transform: translateY(-1px); }
.tg-line .ic { font-size: var(--fs-md); }

/* Yig'indi qutisi (narx hisobi) */
.total-box {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-s); padding: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-2);
  color: var(--ink);
}
.total-box .row { display: flex; justify-content: space-between; font-size: var(--fs-sm); }
.total-box .row span { color: var(--ink-soft); }
.total-box .row b { color: var(--ink); font-variant-numeric: tabular-nums; }
.total-box .row.grand {
  border-top: 1px solid var(--line); padding-top: var(--sp-2);
  font-size: var(--fs-md); font-weight: 700;
}
.total-box .row.grand b { color: var(--theme-accent); }

/* ===================================================================
   Bron/ariza oynasidagi menyu — MATN qatori ko'rinishida.

   Kartochkali to'r (`.menu-grid`) tanlash paytida noqulay edi: rasm
   katta joy egallab, nomi va narxi ikkinchi planda qolardi. Bu yerda
   aksincha — chapda nomi va narxi, o'ngda kichik rasm. "Bronlarim"
   ro'yxati bilan bir xil ritm.
   =================================================================== */
.pick-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.pick-row {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) auto 68px;
  align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border: 1.5px solid var(--line); border-radius: var(--radius-m);
  background: var(--surface); color: var(--ink);
  cursor: pointer; text-align: left;
  transition: border-color var(--transition), background var(--transition);
}
.pick-row:hover { border-color: var(--theme-accent); background: var(--surface-2); }
.pick-row.checked { border-color: var(--theme-accent); background: var(--theme-accent-dim); }
.pick-row .tick {
  width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid var(--line); background: var(--surface);
  display: grid; place-items: center; font-size: var(--fs-xs); font-weight: 800;
  color: transparent;
}
.pick-row.checked .tick {
  background: var(--theme-accent); border-color: var(--theme-accent); color: var(--on-accent);
}
.pick-row .info { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pick-row .info b { font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-row .info span { font-size: var(--fs-xs); color: var(--ink-faint); }
.pick-row .price { font-size: var(--fs-sm); font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pick-row .thumb {
  width: 68px; height: 50px; flex-shrink: 0;
  border-radius: var(--radius-s);
  object-fit: cover; background: var(--surface-2);
  /* Ramka — surat kartochka fonida "suzib yurmasin" */
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.pick-row.checked .thumb { border-color: var(--theme-accent); }
@media (max-width: 560px) {
  .pick-row { grid-template-columns: 24px minmax(0, 1fr) 56px; }
  .pick-row .price { grid-column: 2; font-size: var(--fs-xs); }
  .pick-row .thumb { width: 56px; height: 42px; grid-row: 1 / span 2; grid-column: 3; }
}

/* Tungi rejimda zaxira rang ham qorong'i bo'lsin — aks holda tema
   yechilmagan bir lahzada oq oyna "chaqnab" ketardi. */
:root[data-theme="dark"] .modal { background: #111B2B; background: var(--surface); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .modal { background: #111B2B; background: var(--surface); }
}

/* ===================================================================
   Baho tanlash — beshta yulduz.

   Yulduzlar KATTA (30px): bu oynadagi asosiy amal va barmoq bilan
   ham aniq bosiladigan bo'lishi kerak (tavsiya etilgan eng kichik
   nishon 44px, shuning uchun tugmaning o'zi kattaroq).

   Tanlanmagan yulduz — sust chiziq rangida, tanlangani oltin. Ikkala
   holat ham TO'LDIRILGAN shakl: bo'sh konturdan to'ldirilganga
   o'tish ko'zga sakrab tashlanadi, rang o'zgarishi esa yumshoq.
   =================================================================== */
.rating-picker {
  display: flex;
  gap: var(--sp-1);
}
.rating-star {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-s);
  color: var(--line);
  cursor: pointer;
  transition: color var(--transition), transform var(--transition);
}
.rating-star:hover { transform: translateY(-2px); }
.rating-star.is-on { color: var(--gold-mark); }

/* Tanlangan bahoning izohi ("Ajoyib") — yulduzlar ostida, tinch. */
.rating-caption {
  display: block;
  min-height: 1.2em;          /* matn paydo bo'lganda oyna sakramasin */
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-soft);
}

/* ===================================================================
   Biznes turini tanlash — "Nima ochmoqchisiz?"

   Ikkita KATTA tugma: restoran yoki to'yxona. Bu oynadagi yagona
   savol, shuning uchun ikkala variant ham teng kenglikda, yonma-yon
   turadi va har biri alohida kartochka bo'lib ko'rinadi.

   Ilgari bu yerda hech qanday uslub yo'q edi (`.biz-choice` va `.opt`
   CSS da umuman yozilmagan): tugmalar bezaksiz, ichki bo'shliqsiz
   chiqib, ikkala yozuv bir-biriga yopishib qolardi ("Restoran
   To'yxona") va ular umuman bosiladigan narsaga o'xshamasdi.
   =================================================================== */
.biz-choice {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
}

.opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  min-height: 132px;
  padding: var(--sp-5) var(--sp-4);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  text-align: center;
  transition: border-color var(--transition), background var(--transition),
              transform var(--transition), box-shadow var(--transition);
}
.opt:hover {
  border-color: var(--theme-accent);
  background: var(--surface-2);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.opt:focus-visible {
  outline: 2px solid var(--theme-accent);
  outline-offset: 2px;
}

/* Ikonka — doira ichida, aksent tusida. Tugmaning o'zi neytral
   qolgani uchun ko'z avval ikonkaga tushadi. */
.opt .ic {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--theme-accent-dim);
  color: var(--on-accent-dim);
}

.opt h3 { font-size: var(--fs-md); }

/* Telefonda bittadan: 390 px da ikkita kartochka har biriga ~170 px
   qoldiradi va "To'yxona" yozuvi ikkiga bo'linib ketardi. */
@media (max-width: 560px) {
  .biz-choice { grid-template-columns: 1fr; }
  .opt {
    flex-direction: row;
    justify-content: flex-start;
    gap: var(--sp-4);
    min-height: 0;
    padding: var(--sp-4);
    text-align: left;
  }
  .opt .ic { width: 48px; height: 48px; flex: none; }
  .opt h3 { margin-top: 0 !important; }
}

/* ===================================================================
   Sozlamalar oynasi — profildagi uch chiziqli tugma ochadi.

   Ichida uch xil qator bor va ularning BARCHASI bir xil balandlikda,
   bir xil ichki bo'shliqda turadi:
     · bosiladigan amal   (tahrirlash, rasm, chiqish)
     · tanlov             (til, tema — o'ngida chiplar)
     · havola             (restoranlar, telefon, pochta)

   Ramka yo'q: qatorlar ingichka chiziq bilan ajratiladi. Har biri
   alohida kartochka bo'lsa, o'n bitta qator o'n bitta quticha bo'lib
   ko'rinardi.
   =================================================================== */
.settings-sheet {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.ss-group { display: flex; flex-direction: column; gap: var(--sp-2); }

.ss-title {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-faint);
}

.ss-rows {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-m);
  background: var(--surface);
  overflow: hidden;
}

.ss-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  min-height: var(--ctl-h);
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: background var(--transition);
}
.ss-row:last-child { border-bottom: 0; }
.ss-row:hover { background: var(--surface-2); }
.ss-row:focus-visible { outline: 2px solid var(--theme-accent); outline-offset: -2px; }

.ss-ic {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-s);
  background: var(--surface-2);
  color: var(--ink-soft);
}

.ss-text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ss-text b { font-size: var(--fs-sm); font-weight: 600; }
/* Izoh O'RALADI, kesilmaydi: "Savol yoki taklif bo'lsa — Telegram
   orqali yozing" bitta qatorga sig'masdi va uch nuqta bilan uzilib,
   jumla ma'nosiz bo'lib qolardi. Ikki qatorgacha ochiladi. */
.ss-text span {
  font-size: var(--fs-xs);
  line-height: 1.35;
  color: var(--ink-faint);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ss-go { margin-left: auto; flex: none; color: var(--ink-faint); }

/* Chiqish — qaytarib bo'lmaydigan amal, shuning uchun alohida
   ro'yxatda va qizil tusda. */
.ss-row.is-danger { color: var(--danger); }
.ss-row.is-danger .ss-ic { background: var(--danger-dim); color: var(--danger); }
.ss-row.is-danger:hover { background: var(--danger-dim); }

/* --- ichki ekran sarlavhasi --- */
.ss-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.ss-head h2 { margin: 0; font-size: var(--fs-lg); }

.ss-back {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: var(--ctl-h-sm);
  height: var(--ctl-h-sm);
  margin-left: calc(var(--sp-2) * -1);
  border-radius: var(--radius-pill);
  color: var(--ink-soft);
  cursor: pointer;
  transition: color var(--transition), background var(--transition);
}
.ss-back:hover { color: var(--ink); background: var(--surface-2); }

/* Tanlangan til yoki tema yonidagi belgi — aksent tusida.
   Chip o'rniga BELGI: uchta til chipi qator bo'lib turganda qaysi biri
   tanlanganini rang bilan ajratish kerak edi, satr ko'rinishida esa
   oddiy belgi yetarli va u tanishroq (telefon sozlamalari shunday). */
.ss-tick { margin-left: auto; flex: none; color: var(--theme-accent); }

/* Til qisqartmasi (UZ / RU / EN) ikonka o'rnida turadi. */
.ss-row .ss-ic {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: .03em;
}

.ss-note {
  margin: 0;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--ink-faint);
}

/* Tahrirlash oynasidagi rasm amallari — maydonlardan OLDIN, chunki
   rasm ham shu oynaning bir qismi va uni pastga surib qo'yish "rasm
   qayerda o'zgaradi?" degan savol tug'dirardi. */
.edit-photo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line-soft);
}