/* ==========================================================================
   1001 XIZMAT · QULAYLIK (A11Y) QATLAMI — v2
   Fayl: platform/platform-core/public/a11y-v2.css
   Maqsad: yoshi katta va tajribasiz foydalanuvchi ham ilovani qiynalmasdan
           ishlatishi uchun ko'rinishni yumshatish. Mavjud dizayn tili
           (sariq #FFD21F, qora #17181C, oq/kulrang fonlar) saqlanadi —
           bu fayl faqat USTIDAN qo'shimcha qatlam.

   ULASH TARTIBI (index.html ga LEAD qo'shadi, ENG OXIRIDA):
       <link rel="stylesheet" href="/home.css?v=...">
       <link rel="stylesheet" href="/a11y-v2.css?v=20261007.1">

   KATTA SHRIFT REJIMI (118%):
       document.documentElement.classList.add("a11y-large");
       document.documentElement.classList.remove("a11y-large");

   NIMA QAMRAB OLINGAN:
     1) Baza: shrift, qator balandligi, harflar orasi .... (1-bo'lim)
     2) Matn o'lchamlari: asosiy 16px+, kichik 13px+ ..... (2-bo'lim)
     3) Bosish maydonlari: 48px (telefonda 44px) ......... (3-bo'lim)
     4) Kontrast: WCAG AA 4.5:1 (kulranglar quyuqlashadi)  (4-bo'lim)
     5) Fokus: aniq sariq halqa (:focus-visible) ......... (5-bo'lim)
     6) Harakatni kamaytirish ............................ (6-bo'lim)
     7) Kuchaytirilgan kontrast (prefers-contrast) ....... (7-bo'lim)
     8) Katta shrift rejimi (html.a11y-large = 118%) ..... (8-bo'lim)
     9) Ikonka yolg'iz qolmasin (.a11y-icon-label) ....... (9-bo'lim)
    10) Yordamchi sinflar (sr-only, skip-link, tap) ...... (10-bo'lim)

   ESLATMA: bu fayl hech narsani o'chirmaydi va mavjud fayllarga tegmaydi.
   ========================================================================== */

/* ==========================================================================
   0-BO'LIM: SOZLANUVCHI O'LCHOVLAR
   ========================================================================== */

html {
  /* Katta shrift rejimi shu bitta o'zgaruvchini o'zgartiradi (8-bo'lim). */
  --a11y-scale: 1;

  /* Matn ranglari — barchasi WCAG AA (4.5:1) dan o'tadi:
     #8F949C (eski kulrang, oq fonda ~2,9:1) -> #5E646E (oq fonda ~5,8:1). */
  --a11y-ink: #101216;            /* asosiy matn */
  --a11y-muted: #5E646E;          /* ikkilamchi/kulrang matn */
  --a11y-blue: #2E4E8F;           /* havola-ko'k matn (eski #6E8DCE o'rniga) */
  --a11y-gold: #7A5A00;           /* sariq-oltin matn (eski #E0A800 o'rniga) */
  --a11y-placeholder: #6B7280;    /* maydon ichidagi namuna matn */
  --a11y-decor: #5E646E;          /* o'q (strelka) kabi belgilar */
  --a11y-line: #C6CAD2;           /* chegara chizig'i */

  /* Brend ranglar (o'zgarmaydi) */
  --a11y-brand: #FFD21F;
  --a11y-brand-deep: #F2C400;
  --a11y-dark: #17181C;

  /* Shrift o'lchovlari: katta rejimda 118% ga ko'payadi */
  --a11y-fs-body: calc(16px * var(--a11y-scale));
  --a11y-fs-small: calc(13px * var(--a11y-scale));

  /* Minimal bosish maydoni: kompyuterda 48px, telefonda 44px */
  --a11y-target: 48px;
}

@media (max-width: 599px) {
  html {
    --a11y-target: 44px;
  }
}

/* ==========================================================================
   1-BO'LIM: BAZA — O'QISH QULAYLIGI
   ========================================================================== */

html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-size: var(--a11y-fs-body);
  line-height: 1.55;            /* kamida 1.5 — o'qish qulayligi */
  letter-spacing: 0.01em;       /* harflar bir-biriga yopishmasin */
  color: var(--a11y-ink);
  text-underline-offset: 0.18em;
  text-rendering: optimizeLegibility;
}

/* Matn tanlanganda brend rangi ko'rinadi */
::selection {
  background: var(--a11y-brand);
  color: var(--a11y-ink);
}

/* Matn bloklari: kamida 16px va 1.5 qator balandligi */
p,
li,
dd,
dt,
blockquote,
figcaption,
.a11y-text {
  font-size: var(--a11y-fs-body);
  line-height: 1.6;
  letter-spacing: 0.01em;
}

/* Sarlavhalar: tipografik me'yor — 1.35 (matn bloklari 1.5+) */
h1,
h2,
h3,
h4,
h5,
h6,
.sec-head h2,
.bsheet-head h3,
.cs-title,
.ss-title {
  line-height: 1.35;
}

/* Uzun so'zlar va manzillar qatorni buzmasin */
.a11y-no-truncate,
.loc-txt span,
.mini b,
.kat-label,
.tav b,
.tav-desc,
.cs-item b,
.cs-item i,
.ss-item b,
.ss-item i,
.mx-kv span,
.mx-chip {
  white-space: normal;
  overflow-wrap: break-word;
}

/* Disabled tugmalar "o'chib qolmasin" — matni o'qiladigan bo'lsin
   (xira opacity kontrastni 4.5:1 dan pastga tushiradi). */
button[disabled],
button[aria-disabled="true"],
.mx-btn[disabled],
.mx-step[disabled],
.hr-arr[disabled],
input[disabled],
select[disabled],
textarea[disabled] {
  opacity: 1;
  background: #E4E7EC;
  color: #4A4F58;
  border-color: var(--a11y-line);
  cursor: not-allowed;
}

.mx-btn-danger[disabled] {
  background: #3A3F49;
  color: #EDEFF3;
}

/* ==========================================================================
   2-BO'LIM: MATN O'LCHAMLARI
   Asosiy (birlamchi) matn va boshqaruv yozuvlari — 16px dan kam emas.
   Kichik (ikkilamchi) yozuvlar — 13px dan kam emas.
   ========================================================================== */

/* 2.1 — ASOSIY MATN: 16px (katta rejimda 18,9px) */
.search input,
.sec-head .more,
.sec-you .sec-head .more,
.sec-food .sec-head .more,
.tav b,
.loc-txt b,
.bsheet li a,
.bs-grid a,
.cs-qisqa,
.cs-item b,
.ss-item b,
.ss-val,
.mx-note,
.mx-card,
.mx-list-item,
.mx-list-item b,
.mx-check,
.mx-kv,
.mx-kv span,
.mx-field input,
.mx-field select,
.mx-field textarea,
.mx-btn,
.mx-btn-sm,
.mx-step,
.mx-tab,
.dr-item,
.dr-cta,
.nav-item,
.toast,
#bolimlar li {
  font-size: var(--a11y-fs-body);
  line-height: 1.5;
}

/* 2.2 — KICHIK (IKKILAMCHI) MATN: 13px (katta rejimda 15,3px) */
.loc-txt span,
.kat-label,
.tav-desc,
.tst-tx i,
.tst-tx em,
.mini b,
.bsheet h4,
.cs-label,
.cs-item i,
.ss-label,
.ss-item i,
.bs-sec,
.mx-sub,
.mx-field > span,
.mx-list-item i,
.mx-kv b,
.mx-chip,
.mx-live,
.loc-cap,
.dr-label,
.dr-brand i,
.dr-ptx i,
#bolimlar h2,
#bolimlar .eslatma {
  font-size: var(--a11y-fs-small);
  line-height: 1.5;
}

/* 2.3 — Baho/statistika ustuni (eski 6,4px va 8,8px juda mayda edi) */
.tst-tx {
  line-height: 1.5;
}

.tst-tx i,
.tst-tx em {
  white-space: normal;
}

/* 2.4 — Maydon yorlig'i bilan maydon bog'lanishi ko'rinib tursin */
.mx-field:focus-within > span {
  color: var(--a11y-ink);
}

/* ==========================================================================
   3-BO'LIM: BOSISH MAYDONLARI (TOUCH TARGET)
   Barcha tugma/havola: kamida 48x48px, telefonda 44x44px.
   Inline (matn ichidagi) havolalarga min-height ta'sir qilmaydi — bu to'g'ri.
   ========================================================================== */

button,
[role="button"],
[role="tab"],
[role="menuitem"],
[role="option"],
a[href],
summary,
label,
select,
input:not([type="checkbox"]):not([type="radio"]),
textarea,
.a11y-tap {
  min-height: var(--a11y-target);
}

button,
[role="button"],
[role="tab"],
[role="menuitem"],
a[href].a11y-tap,
.a11y-tap {
  min-width: var(--a11y-target);
}

/* 3.1 — Tepa qator: menyu, manzil va qidiruv */
.menu-btn {
  width: var(--a11y-target);
  height: var(--a11y-target);
  min-width: var(--a11y-target);
  min-height: var(--a11y-target);
}

.menu-btn svg {
  width: 24px;
  height: 24px;
}

.top-icons .ic,
.top-icons .bell-btn,
.top-icons .tb-grid {
  min-width: var(--a11y-target);
  min-height: var(--a11y-target);
}

.loc {
  height: auto;
  min-height: var(--a11y-target);
  padding: 4px 15px 4px 8px;
}

.search {
  height: auto;
  min-height: var(--a11y-target);
  padding-top: 4px;
  padding-bottom: 4px;
}

.search input {
  min-height: max(40px, calc(var(--a11y-target) - 8px));
}

.s-right .s-cam {
  width: 24px;
}

.s-right .s-mic {
  width: 20px;
}

/* 3.2 — Oyna sarlavhasidagi dumaloq tugmalar (orqaga/yopish) */
.bsheet-close,
.cs-back,
.cs-close,
.ss-back,
.ss-close {
  width: var(--a11y-target);
  height: var(--a11y-target);
  min-width: var(--a11y-target);
  min-height: var(--a11y-target);
}

.bsheet-close svg,
.cs-back svg,
.cs-close svg,
.ss-back svg,
.ss-close svg,
.cs-back img,
.cs-close img,
.ss-back img,
.ss-close img {
  width: 20px;
  height: 20px;
}

/* 3.3 — Kartochka va ro'yxat qatorlari */
.cs-item,
.ss-item,
.bs-grid a,
.bsheet li a,
.mx-tab,
.mx-btn,
.mx-btn-sm,
.mx-step,
.dr-cta,
.nav-item,
.hr-arr {
  min-height: var(--a11y-target);
}

.mx-btn,
.mx-step {
  min-height: calc(var(--a11y-target) + 4px);
}

.nav-item,
.dr-item {
  height: auto;
  min-height: var(--a11y-target);
  padding-top: 8px;
  padding-bottom: 8px;
}

.cs-item,
.ss-item {
  padding-top: 12px;
  padding-bottom: 12px;
}

/* 3.4 — Maydonlar (kiritish uchun qulay balandlik) */
.mx-field input,
.mx-field select {
  height: auto;
  min-height: calc(var(--a11y-target) + 4px);
  padding-top: 10px;
  padding-bottom: 10px;
}

#osheet .mx-field textarea {
  min-height: 104px;
  padding-top: 12px;
  padding-bottom: 12px;
}

/* 3.5 — Rozilik katakchasi: 18px -> 24px, butun qator bosiladi */
.mx-check {
  align-items: center;
  gap: 12px;
  min-height: var(--a11y-target);
  padding-top: 4px;
  padding-bottom: 4px;
}

.mx-check input {
  width: 24px;
  height: 24px;
  margin-top: 0;
}

/* 3.6 — Holat belgisi (chip) — bu tugma emas, shunchaki yorliq;
   baribir 22px dan kattaroq va o'qiladigan qilinadi. */
.mx-chip {
  height: auto;
  min-height: 28px;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 12px;
  padding-right: 12px;
  border-radius: 999px;
}

/* 3.7 — Gorizontal karusel kartochkalari matnga joy bo'shatsin */
.kat {
  flex: 0 0 96px;
  width: 96px;
}

.tav {
  flex: 0 0 170px;
  width: 170px;
}

.tav-stats {
  padding-right: 52px;
}

.mini {
  flex: 0 0 auto;
  min-width: 76px;
}

/* ==========================================================================
   4-BO'LIM: KONTRAST — WCAG AA (4.5:1)
   Eski och kulrang #8F949C oq fonda ~2,9:1 beradi (AA dan o'tmaydi).
   Yangi #5E646E — oq fonda ~5,8:1, #FBFAF7 fonda ~5,6:1. ✅
   ========================================================================== */

/* 4.1 — Ikkilamchi (kulrang) matnlar */
.loc-txt span,
.loc-cap,
.loc-ch,
.bsheet h4,
.cs-qisqa,
.cs-label,
.cs-item i,
.ss-label,
.ss-item i,
.bs-sec,
.mx-sub,
.mx-note,
.mx-field > span,
.mx-list-item i,
.mx-kv b,
.dr-label {
  color: var(--a11y-muted);
}

/* 4.2 — Namuna (placeholder) matn: #A0A6B1/#A9AEB6 juda och edi */
.search input::placeholder,
.mx-field input::placeholder,
.mx-field select::placeholder,
#osheet .mx-field textarea::placeholder {
  color: var(--a11y-placeholder);
  opacity: 1;
}

/* 4.3 — Ko'k va oltin rangli mayda matnlar */
.tav-desc {
  color: var(--a11y-blue);
}

.ss-val,
.dr-brand i {
  color: var(--a11y-gold);
}

.tst-tx em {
  color: var(--a11y-muted);
}

/* 4.4 — Xato matni: #D64550 oq fonda ~4,3:1 edi */
.mx-note.is-error,
.mx-card.is-error {
  color: #B3242F;
}

/* 4.5 — O'q (strelka) belgilari va nofaol nuqta */
.cs-arr,
.ss-arr,
.csheet .mx-list-item .cs-arr,
.csheet .mx-list-item .cs-arr i {
  color: var(--a11y-decor);
  font-style: normal;
}

.mx-dot-off {
  background: var(--a11y-decor);
}

/* 4.6 — Qulflangan band belgisi (opacity kontrastni tushirmasin) */
.mx-lock {
  opacity: 1;
  color: var(--a11y-muted);
}

.mx-lock svg {
  width: 14px;
  height: 14px;
}

/* 4.7 — Toast (xabarnoma) matni: tor ekranda ham to'liq o'qiladi */
.toast {
  white-space: normal;
  max-width: calc(100vw - 32px);
  text-align: center;
  line-height: 1.5;
  padding: 12px 18px;
}

/* 4.8 — Boshlang'ich (launch) ekrandagi och kulranglar */
#bolimlar h2,
#bolimlar .eslatma {
  color: var(--a11y-muted);
}

#bolimlar li {
  line-height: 1.6;
}

/* ==========================================================================
   5-BO'LIM: FOKUS KO'RINISHI (:focus-visible — klaviatura bilan yurish)
   Halqa ikki qatlamli: qora ichki chiziq (oq fonda ham ko'rinadi)
   + qalin SARIQ halqa (brend rangi). Faqat klaviatura fokusida chiqadi.
   ========================================================================== */

:focus-visible:not([tabindex="-1"]) {
  outline: 3px solid var(--a11y-dark);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--a11y-brand);
}

/* Maydonlar: mavjud `outline:none` qoidalaridan kuchliroq selektorlar */
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.mx-field input:focus-visible,
.mx-field select:focus-visible,
.mx-field textarea:focus-visible,
.csheet .mx-field input:focus-visible,
.csheet .mx-field select:focus-visible,
.csheet .mx-field textarea:focus-visible,
.search input:focus-visible,
#osheet .mx-field textarea:focus-visible {
  outline: 3px solid var(--a11y-dark);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--a11y-brand);
}

/* Qorong'i yuza ustidagi elementlar: qora chiziq ko'rinmaydi — oq qilamiz */
.dr-promo :focus-visible,
.mx-btn-danger:focus-visible,
.mx-step:focus-visible,
.nav-item.active:focus-visible,
.dr-item.active:focus-visible,
.toast:focus-visible {
  outline-color: #FFFFFF;
}

/* ==========================================================================
   6-BO'LIM: HARAKATNI KAMAYTIRISH (prefers-reduced-motion)
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  /* Oynalar darhol ochilib-yopiladi (siljish yo'q) */
  .drawer,
  .drawer-scrim,
  .drawer-panel,
  .csheet,
  .csheet-panel,
  .ssheet,
  .ss-panel,
  .bsheet,
  .toast,
  .hr-arr {
    transition: none !important;
    animation: none !important;
  }
}

/* ==========================================================================
   7-BO'LIM: KUCHAYTIRILGAN KONTRAST (prefers-contrast: more)
   ========================================================================== */

@media (prefers-contrast: more) {
  html {
    --a11y-ink: #000000;
    --a11y-muted: #2B2F36;
    --a11y-blue: #1B3570;
    --a11y-gold: #5A4200;
    --a11y-placeholder: #3A3F49;
    --a11y-decor: #2B2F36;
    --a11y-line: #101216;
  }

  body,
  .page {
    background: #FFFFFF;
    color: #000000;
  }

  /* Barcha muhim yuza va maydonlar aniq chegaraga ega bo'ladi */
  .search,
  .loc,
  .menu-btn,
  .mx-field input,
  .mx-field select,
  .mx-field textarea,
  .mx-card,
  .mx-list-item,
  .cs-item,
  .ss-item,
  .bs-grid a,
  .bsheet-card {
    border: 2px solid #101216 !important;
  }

  button,
  a[href],
  input,
  select,
  textarea {
    text-underline-offset: 0.2em;
  }

  :focus-visible:not([tabindex="-1"]) {
    outline-width: 4px;
    outline-color: #000000;
    box-shadow: 0 0 0 8px var(--a11y-brand);
  }

  button[disabled],
  .mx-btn[disabled],
  .mx-step[disabled],
  .hr-arr[disabled] {
    opacity: 1;
    background: #E2E5EA;
    color: #2B2F36;
    border: 2px solid #101216;
  }

  .toast {
    border: 2px solid #FFFFFF;
  }
}

/* ==========================================================================
   8-BO'LIM: KATTA SHRIFT REJIMI (html.a11y-large = 118%)
   Barcha o'lchamlar `--a11y-scale` orqali ko'payadi, bosish maydonlari
   (48/44px) esa o'zgarmaydi — ular baribir yetarli katta.
   ========================================================================== */

html.a11y-large {
  --a11y-scale: 1.18;
  font-size: 118%;
}

html.a11y-large body {
  letter-spacing: 0.012em;
  line-height: 1.6;
}

html.a11y-large .a11y-text,
html.a11y-large p,
html.a11y-large li {
  line-height: 1.65;
}

/* Katta rejimda sarlavhalar ham biroz nafas oladi */
html.a11y-large h1,
html.a11y-large h2,
html.a11y-large h3 {
  line-height: 1.4;
}

/* ==========================================================================
   9-BO'LIM: IKONKA YOLG'IZ QOLMASIN (.a11y-icon-label)
   Ishlatilishi (markup):
     <button class="a11y-icon-label" type="button">
       <svg class="a11y-icon" aria-hidden="true">...</svg>
       <span class="a11y-icon-label__text">Katalog</span>
     </button>

   Faqat ikonka qolgan tugmalar uchun `.a11y-icon-only` — u `aria-label`
   qiymatini KO'RINADIGAN matn sifatida chiqaradi:
     <button class="a11y-icon-only" type="button" aria-label="Kamera">
       <svg aria-hidden="true">...</svg>
     </button>
   ========================================================================== */

.a11y-icon-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--a11y-target);
  font-size: var(--a11y-fs-body);
  font-weight: 700;
  line-height: 1.5;
  color: inherit;
  text-align: left;
}

.a11y-icon-label > svg,
.a11y-icon-label > img,
.a11y-icon-label > .a11y-icon {
  width: 24px;
  height: 24px;
  flex: none;
}

.a11y-icon-label > .a11y-icon-label__text {
  display: inline-block;
  font-size: var(--a11y-fs-body);
  line-height: 1.5;
  white-space: normal;
  overflow-wrap: break-word;
}

/* Matnsiz ikonka tugma: yozuv `aria-label` dan olinadi */
.a11y-icon-only {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: var(--a11y-target);
  min-height: var(--a11y-target);
  padding-left: 10px;
  padding-right: 10px;
  font-size: var(--a11y-fs-small);
  font-weight: 700;
  line-height: 1.4;
}

.a11y-icon-only > svg,
.a11y-icon-only > img {
  width: 24px;
  height: 24px;
  flex: none;
}

.a11y-icon-only::after {
  content: attr(aria-label);
  display: inline-block;
  max-width: 18ch;
  white-space: normal;
  overflow-wrap: break-word;
}

.a11y-icon-only[aria-label=""]::after,
.a11y-icon-only:not([aria-label])::after {
  content: none;
}

/* ==========================================================================
   10-BO'LIM: YORDAMCHI SINFLAR
   ========================================================================== */

/* Faqat ekran o'quvchi uchun ko'rinadigan matn */
.a11y-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* "Asosiy mazmunga o'tish" havolasi (klaviatura uchun) */
.a11y-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  display: inline-flex;
  align-items: center;
  min-height: var(--a11y-target);
  padding: 12px 18px;
  background: var(--a11y-brand);
  color: var(--a11y-ink);
  font-size: var(--a11y-fs-body);
  font-weight: 800;
  border-radius: 0 0 12px 0;
  text-decoration: none;
}

.a11y-skip-link:focus-visible {
  left: 0;
}

/* Istalgan elementni 48/44px bosish maydoniga aylantirish */
.a11y-tap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--a11y-target);
  min-height: var(--a11y-target);
}

/* Kichik izoh matni (13px+, o'qiladigan kulrang) */
.a11y-hint {
  display: block;
  font-size: var(--a11y-fs-small);
  line-height: 1.5;
  color: var(--a11y-muted);
}

/* O'qish uchun qulay matn bloki */
.a11y-readable {
  max-width: 68ch;
  font-size: var(--a11y-fs-body);
  line-height: 1.65;
  letter-spacing: 0.01em;
}