/* ════════════════════════════════════════════════════════════════════
   Базовые правила — ДОСЛОВНО из <helmet> макетов.
   Правила, которые в макете стоят не на всех страницах, навешены
   на класс <body> этой страницы, чтобы не менять вид остальных.
   ════════════════════════════════════════════════════════════════════ */

/* общее для 27 страниц макета */
* { box-sizing: border-box; }
body { margin: 0; font-family: "Manrope", "Segoe UI", system-ui, sans-serif; color: #0B1626; -webkit-font-smoothing: antialiased; }
a { color: #1F7D79; } a:hover { color: #0B1626; }

/* страницы с таблицами: Dual, Mamuriyat, OchiqMalumotlar, Qabul */
body.ztex-dual table, body.ztex-mamuriyat table,
body.ztex-ochiqmalumotlar table, body.ztex-qabul table { border-collapse: collapse; width: 100%; }

/* Bosh (главная) — у неё свой helmet */
body.ztex-bosh { color: #0F1C2E; }
body.ztex-bosh h1, body.ztex-bosh h2, body.ztex-bosh h3, body.ztex-bosh h4 { margin: 0; }
body.ztex-bosh a:hover { color: #16305A; }

/* Qidiruv */
body.ztex-qidiruv input[type=search]::-webkit-search-cancel-button { display: none; }

@keyframes zt-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes zt-kenburns { from { transform: scale(1.08); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }


/* ════════════════════════════════════════════════════════════════════
   Добавлено сверх макета — ровно то, чего в статичном макете быть
   не могло: мобильная панель и состояния, которыми управляет JS.
   ════════════════════════════════════════════════════════════════════ */

/* ── мобильная панель и ящик меню ────────────────────────────────── */
/* ── две разметки: настольная и мобильная ────────────────────────── */
/* В пакете есть отдельный макет главной для телефона (Mobil-Bosh,
   390x4300, десять блоков вместо четырнадцати). Свёрнутая настольная
   даёт 18 582 px и расходится с ним на 72 % — значит это другая
   страница, а не та же в другом размере. Обе лежат в разметке,
   показом управляет этот переключатель. */
.ztex-mob { display: none; }

@media (max-width: 760px) {
  .ztex-mob { display: block; }
  .ztex-desktop { display: none !important; }
  .ztex-desktop-glavnaya { display: none !important; }
}

.ztex-burger { display: none; }

@media (max-width: 1100px) {
  .ztex-nav { display: none !important; }
  .ztex-cta-top { display: none !important; }
  .ztex-burger { display: inline-flex !important; }
}

/* Русская и английская строка шапки шире узбекской: замерено при ширине
   ряда 1264 px содержимое равно 1244 (ru), 1195 (en) и 1160 (uz). Ниже
   1340 px русская и английская перестают помещаться, и кнопка съезжала
   на вторую строку — шапка становилась двухэтажной. Для этих языков
   ниже 1340 px показываем ящик; узбекская раскладка не меняется. */
@media (max-width: 1340px) {
  html:lang(ru) .ztex-nav, html:lang(en) .ztex-nav,
  html:lang(ru) .ztex-cta-top, html:lang(en) .ztex-cta-top { display: none !important; }
  html:lang(ru) .ztex-burger, html:lang(en) .ztex-burger { display: inline-flex !important; }
}
@media (max-width: 760px) {
  /* верхняя полоса: оставляем телефон и язык, как в мобильном макете */
  .ztex-top-pochta, .ztex-top-chasy, .ztex-top-znachki { display: none !important; }
}

/* Правила из <helmet> макета Mobil-Menyu — ТОЛЬКО для ящика.
   Переносить их на весь сайт нельзя: у остальных 27 страниц свой
   helmet, где ul и p не обнуляются, и общее правило сдвинуло бы их
   вид. Без этого у пунктов меню вылезали точки списка. */
#ztex-yashik ul { margin: 0; padding: 0; list-style: none; }
#ztex-yashik p { margin: 0; }
#ztex-yashik h1, #ztex-yashik h2 { margin: 0; }
#ztex-yashik a { color: #9FD6E0; }

.ztex-yashik {
  position: fixed; inset: 0; z-index: 90;
  background: #16305A; color: #FFFFFF;
  display: flex; flex-direction: column; overflow: hidden;
  transform: translateX(100%); transition: transform .28s ease;
  visibility: hidden;
}
.ztex-yashik.open { transform: translateX(0); visibility: visible; }
body.ztex-zamok { overflow: hidden; }

/* ── таблицы на узком экране ─────────────────────────────────────── */
/* Замерено на 390 px: таблицы приёма, руководства, дуального обучения и
   открытых данных выходят за экран на 290–390 px. На большом экране
   обёртка ничего не делает — вид проверен попиксельной сверкой. */
.ztex-tablica { max-width: 100%; }
@media (max-width: 900px) {
  .ztex-tablica {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .ztex-tablica > table { min-width: 680px; }
}

/* ── широкие ячейки сетки на узком экране ────────────────────────── */
/* Замерено на 390 px: ячейка с grid-column: span 2 в сетке из одной
   колонки выходит за экран на 32 px (страница вакансий). На широком
   экране правило не действует, вид не меняется. */
@media (max-width: 760px) {
  [style*="grid-column: span 2"],
  [style*="grid-column: span 5"],
  [style*="grid-column: span 7"] { grid-column: 1 / -1 !important; }
}

/* ── широкие гибкие блоки на узком экране ────────────────────────── */
/* Замерено на 390 px: блок с flex: 1 1 420px не сжимается ниже своего
   содержимого (min-width: auto) и выносит страницу на 9 px за экран.
   min-width: 0 возвращает 379 → 350. Правило только для узкого экрана
   и только для блоков с основой от 300 px — у меньших беды нет. */
@media (max-width: 760px) {
  [style*="flex: 0 1 300px"],
  [style*="flex: 0 1 460px"],
  [style*="flex: 1 1 300px"],
  [style*="flex: 1 1 320px"],
  [style*="flex: 1 1 340px"],
  [style*="flex: 1 1 360px"],
  [style*="flex: 1 1 380px"],
  [style*="flex: 1 1 400px"],
  [style*="flex: 1 1 420px"],
  [style*="flex: 1 1 440px"],
  [style*="flex: 1 1 460px"],
  [style*="flex: 1 1 480px"],
  [style*="flex: 1 1 520px"],
  [style*="flex: 1 1 560px"],
  [style*="flex: 1 1 640px"],
  [style*="flex: 2 1 560px"],
  [style*="flex: 999 1 520px"],
  [style*="flex: 999 1 560px"],
  [style*="flex: 999 1 600px"],
  [style*="flex: 999 1 620px"],
  [style*="flex: 999 1 640px"] { min-width: 0 !important; }
}

/* ── полоса загрузки при переходе между страницами ───────────────── */
/* Переход идёт без перезагрузки, и человеку нужен признак, что
   страница уже грузится: иначе нажатие выглядит так, будто ничего
   не произошло. Полоса тонкая и поверх всего. */
.ztex-polosa {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  z-index: 120;
  background: linear-gradient(90deg, #5CC4BF, #9FD6E0);
  box-shadow: 0 0 10px rgba(92,196,191,.7);
  transition: width .32s ease;
  pointer-events: none;
  border-radius: 0 3px 3px 0;
}
.ztex-polosa.gotovo { transition: width .16s ease, opacity .3s ease .12s; opacity: 0; }

/* пока идёт переход — показываем, что ждём */
html[data-ztex-perehod] { cursor: progress; }
html[data-ztex-perehod] #ztex-stranica { opacity: .75; transition: opacity .18s ease; }

@media (prefers-reduced-motion: reduce) {
  .ztex-polosa { transition: none; }
  html[data-ztex-perehod] #ztex-stranica { opacity: 1; }
}

/* ── раскрывающиеся блоки (аккордеон) ────────────────────────────── */
.ztex-svorot[hidden] { display: none !important; }

/* ── лента бегущей строки ────────────────────────────────────────── */
.ztex-marquee-stop { animation-play-state: paused !important; }

/* ── отсев: мимо фильтра или мимо поиска ─────────────────────────── */
[data-ztex-mimo="1"], [data-ztex-mimo-poisk="1"] { display: none !important; }

/* ── блоки, показом которых правит JS ────────────────────────────── */
[data-ztex-esli][hidden] { display: none !important; }

/* ── шаги формы ──────────────────────────────────────────────────── */
[data-ztex-shag][hidden] { display: none !important; }

/* ── ошибка поля формы ───────────────────────────────────────────── */
.ztex-polomka { border-color: #C0392B !important; }
.ztex-polomka-text { color: #C0392B; font-size: 13.5px; margin-top: 6px; display: block; }

/* ── «ничего не нашлось» ─────────────────────────────────────────── */
.ztex-pusto { padding: 28px 0; color: #5B6B7D; font-size: 15.5px; }

/* ── доступность: видимая обводка при ходьбе табом ───────────────── */
:focus-visible { outline: 3px solid #5CC4BF; outline-offset: 2px; }

/* ── печать ──────────────────────────────────────────────────────── */
@media print {
  .ztex-nav, .ztex-burger, .ztex-yashik, .ztex-lightbox, footer { display: none !important; }
  body { color: #000 !important; }
}


/* ── Савол-жавоб на телефоне ──────────────────────────────────────── */
/* Вид взят с рабочего стола: номер, вопрос, круглый значок. Высоту
   ответа разворачиваем сеткой (0fr → 1fr): переход тогда работает в
   обе стороны и не нужно заранее знать высоту текста. */
.ztex-mv { border-radius: 22px; background: #FFFFFF; overflow: hidden; }
.ztex-mv__q {
  width: 100%; border: 0; background: transparent; padding: 18px 20px;
  display: flex; align-items: flex-start; gap: 12px; text-align: left;
  font-family: 'Manrope', sans-serif; cursor: pointer;
}
.ztex-mv__n { font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 12.5px; color: #1F7D79; padding-top: 3px; flex-shrink: 0; }
.ztex-mv__t { flex: 1; font-weight: 800; font-size: 16px; line-height: 1.35; color: #0B1626; }
.ztex-mv__z {
  width: 30px; height: 30px; flex-shrink: 0; border-radius: 999px;
  background: #F3F7F9; color: #0B1626; display: inline-flex;
  align-items: center; justify-content: center;
  transition: transform .3s ease, background .3s ease, color .3s ease;
}
.ztex-mv[data-otkryt="1"] .ztex-mv__z { transform: rotate(45deg); background: #0B1626; color: #FFFFFF; }
.ztex-mv__o { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s ease; }
.ztex-mv[data-otkryt="1"] .ztex-mv__o { grid-template-rows: 1fr; }
.ztex-mv__o > div { overflow: hidden; }
.ztex-mv__o p { margin: 0; padding: 0 20px 18px 44px; font-size: 14.5px; line-height: 1.65; color: #4A5A6C; }

@media (prefers-reduced-motion: reduce) {
  .ztex-mv__o, .ztex-mv__z { transition: none; }
}