/* Єдиний стиль pdr-test.com.ua у кольоровій стилістиці travel.clixoft.com:
   світло-сірий фон, білі картки з великим заокругленням без тіней, майже чорний текст, шрифт Akt,
   акценти синій / зелений / червоний / помаранчевий зі світлими підкладками, шапка — біла «таблетка».
   Підключається з lib/nav.php на PHP-сторінках, у tests/test.html, tests/index.html (3D) і tg.php.
   Стоїть останнім, тож перекриває локальні стилі сторінок з тією ж специфічністю. */

@font-face {
  font-family: Akt;
  src: url(/assets/fonts/Akt-VariableFont_wght.ttf) format("truetype-variations"), url(/assets/fonts/Akt-VariableFont_wght.ttf) format("truetype");
  font-weight: 100 900;
  font-display: swap;
}

:root, body.test-page {
  --t-font: Akt, Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-bg: #efeeee;
  --t-card: #fff;
  --t-ink: #0a0a0a;
  --t-ink-soft: #272727;
  --t-muted: #6b6a6a;
  --t-stroke: #e0e0e0;
  --t-stroke-dark: #d2d1d1;
  --t-blue: #0856b5;   --t-blue-10: #c7d8ec;
  --t-green: #08b529;  --t-green-10: #c7ecce;
  --t-red: #d33a26;    --t-red-10: #f6d5d1;
  --t-yellow: #f88f2b; --t-yellow-10: #f0dfc3;
  --t-radius: 2rem;
  --t-radius-sm: 1.25rem;
  --t-shadow: 0 6px 16px rgba(0, 0, 0, .12);

  /* змінні, які вже використовують сторінки сайту й тестів */
  --bg: var(--t-bg); --ink: var(--t-ink); --muted: var(--t-muted);
  --blue: var(--t-blue); --blue-dark: #064a9c; --accent: var(--t-blue); --accent-dark: #064a9c;
  --green: var(--t-green); --ok: var(--t-green); --ok-bg: var(--t-green-10);
  --red: var(--t-red); --bad: var(--t-red); --bad-bg: var(--t-red-10);
  --amber: var(--t-yellow); --yellow: var(--t-yellow);
  --line: var(--t-stroke);
}

/* ---------- Основа ---------- */
html { background: var(--t-bg); color-scheme: light; }

/* Кнопки, що ведуть до оплати: той самий золотий градієнт, що й плашка Premium */
.btn-buy,
body .btn-buy,
body .btn-primary.btn-buy,
body.test-page .cta.btn-buy,
.box .btn.btn-buy {
  background: linear-gradient(135deg, #22c55e, #0a9c3d);
  color: #fff;
  border: 0;
  box-shadow: 0 10px 24px rgba(10, 156, 61, .3);
}
@media (hover: hover) { .btn-buy:hover, body .btn-buy:hover { filter: brightness(1.06); background: linear-gradient(135deg, #22c55e, #0a9c3d); } }
 /* темна схема Telegram робила текст полів білим на білому */
body, body.test-page {
  font-family: var(--t-font); color: var(--t-ink);
  background: var(--t-bg); background-image: none;
  -webkit-font-smoothing: antialiased;
}
body button, body input, body textarea, body select { font-family: var(--t-font); }
body h1, body .t-hero h1 { font-weight: 500; letter-spacing: -.03em; }
body h2, body h3 { font-weight: 500; letter-spacing: -.02em; }
body a { color: var(--t-blue); }

/* ---------- Картки ---------- */
.glass, .glass-strong, .box, body.test-page .card, .article {
  background: var(--t-card); background-image: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 0; box-shadow: none;
}
.glass, .glass-strong, .box, body.test-page .card { border-radius: var(--t-radius); }

/* плитки на сірому фоні — білі; усередині білої картки — сірі */
.cat-card, .sign-card, .marking-card, .section-link, .q-preview, .test-row, .stat-card {
  background: var(--t-card); background-image: none; border: 1px solid transparent; box-shadow: none;
  border-radius: 1.5rem; backdrop-filter: none; -webkit-backdrop-filter: none;
}
@media (hover: hover) { .cat-card:hover, .sign-card:hover, .marking-card:hover, .section-link:hover { border-color: var(--t-stroke-dark); transform: none; } }
/* ті самі плитки всередині білої картки — сірі, щоб не зливалися */
.glass .cat-card, .glass .sign-card, .glass .marking-card, .glass .section-link, .glass .stat-card, .glass .test-row,
.glass-strong .cat-card, .glass-strong .sign-card, .glass-strong .section-link { background: var(--t-bg); }
.section-num { background: var(--t-blue-10) !important; color: var(--t-blue) !important; background-image: none !important; }
.pill, .t-mode, .t-list button, .t-review > li {
  background: var(--t-bg); background-image: none; border: 1px solid transparent; box-shadow: none; border-radius: var(--t-radius-sm);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
@media (hover: hover) { .t-list button:hover:not(:disabled) { border-color: var(--t-stroke-dark); background: var(--t-bg); transform: none; } }
.t-mode-exam { background: var(--t-blue-10); }
.t-review > li.is-ok { background: var(--t-green-10); border-color: transparent; }
.t-review > li.is-bad { background: var(--t-red-10); border-color: transparent; }
.t-code, .t-count { color: var(--t-ink); }
.t-count { background: #fff; }

/* ---------- Шапка: біла «таблетка», під нею розмиття, як нижнє меню travel.clixoft.com ---------- */
.site-nav {
  position: -webkit-sticky; position: sticky; top: 0; z-index: 60;
  padding: 10px 10px 14px; padding-top: max(10px, calc(env(safe-area-inset-top) + var(--pdr-tg-top, 0px)));
  background: transparent; border: 0; box-shadow: none;
  font-family: var(--t-font);
}
.site-nav::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--t-bg);
  backdrop-filter: blur(1rem); -webkit-backdrop-filter: blur(1rem);
  -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 45%); mask-image: linear-gradient(to top, transparent 0%, #000 45%);
}
/* однакові відступи зліва й справа: логотип у кружечку та кнопка кабінету стоять на однаковій відстані від краю */
/* «рідке скло»: напівпрозора таблетка з розмиттям, крізь неї видно сцену */
.site-nav .nav-inner {
  position: relative; max-width: 960px; margin: 0 auto; padding: 4px 15px;
  display: flex; align-items: center; gap: 8px; border-radius: 9999px;
  background: linear-gradient(140deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .52));
  backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .75);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 8px 24px rgba(15, 23, 42, .1);
}
/* однакова шапка на всіх сторінках: висота таблетки не залежить від стилів конкретної сторінки */
.site-nav .nav-inner { min-height: 64px; }
.site-nav .brand { display: flex; align-items: center; gap: 8px; flex-shrink: 0; padding: 0; text-decoration: none; color: var(--t-ink); font-weight: 600; font-size: 16px; letter-spacing: -.01em; }
/* над назвою — дрібний рядок «Офіційні тести» */
.site-nav .brand-name { display: flex; flex-direction: column; line-height: 1.05; }
.site-nav .brand-name small { font-size: 10px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--t-muted); }
.site-nav .brand img {
  width: 34px; height: 34px; display: block; box-sizing: border-box; padding: 5px;
  background: var(--t-bg); border: 1px solid var(--t-stroke); border-radius: 50%; filter: none;
}
@media (hover: hover) { .site-nav .brand:hover img { background: #e6e5e5; } }
.site-nav .nav-links {
  display: flex; align-items: center; gap: 2px; min-width: 0; flex: 1; justify-content: flex-end;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.site-nav .nav-links::-webkit-scrollbar { display: none; }
.site-nav a.nav-item, .site-nav a.nav-cab {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
  padding: 8px 14px; border-radius: 9999px; white-space: nowrap; border: 0; box-shadow: none;
  text-decoration: none; color: var(--t-ink); font-size: 14px; font-weight: 500;
  transition: background .15s;
}
@media (hover: hover) { .site-nav a.nav-item:hover, .site-nav a.nav-cab:hover { background: var(--t-bg); color: var(--t-ink); } }
.site-nav a.nav-item.active, .site-nav a.nav-cab.active { background: var(--t-bg); color: var(--t-ink); box-shadow: none; }
.site-nav a.nav-cab { background: var(--t-ink); color: #fff; font-weight: 500; }
@media (hover: hover) { .site-nav a.nav-cab:hover, .site-nav a.nav-cab.active { background: var(--t-ink-soft); color: #fff; } }
.site-nav .avatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex-shrink: 0; box-shadow: none; }
.site-nav .cab-name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
/* на широкому екрані обгортка меню нічого не змінює */
.site-nav .nav-drop { display: contents; }
.site-nav .nav-burger { display: none; }

/* телефон: логотип із назвою зліва, бургер справа, меню плавно розкривається */
@media (max-width: 640px) {
  .site-nav .nav-inner { position: relative; }
  .site-nav .nav-inner { justify-content: space-between; }
  /* на телефоні шапка однакова скрізь: бічні відступи й ширина не залежать від контейнера сторінки,
     тому перекриваємо інлайнові значення, які підставляє скрипт у lib/nav.php */
  body .site-nav { padding-left: 16px !important; padding-right: 16px !important; }
  body .site-nav .nav-inner { max-width: none !important; height: 64px; }
  .site-nav .brand { flex: none; }
  /* назва — рівно по центру шапки, між логотипом і бургером */
  .site-nav .brand-name {
    display: flex; align-items: center; font-size: 15px; white-space: nowrap; pointer-events: none;
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  }
  .site-nav .brand-name small { font-size: 9.5px; }
  .site-nav .nav-burger {
    display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
    flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
    background: var(--t-bg); cursor: pointer;
  }
  .site-nav .brand img { width: 40px; height: 40px; padding: 7px; } /* рівно як кнопка бургера */
  .site-nav .nav-burger span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--t-ink); transition: transform .22s ease, opacity .18s ease; }
  .site-nav.open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .site-nav.open .nav-burger span:nth-child(2) { opacity: 0; }
  .site-nav.open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .site-nav .nav-drop {
    display: flex; flex-direction: column; gap: 2px; align-items: stretch;
    position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 5;
    padding: 8px; border-radius: 22px;
    /* суцільний фон: крізь відкрите меню не має просвічувати текст сторінки (у Telegram-вебв'ю розмиття не працює) */
    background: linear-gradient(140deg, #fff, #f6f6f8);
    backdrop-filter: blur(24px) saturate(190%); -webkit-backdrop-filter: blur(24px) saturate(190%);
    border: 1px solid rgba(255, 255, 255, .9);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 18px 40px rgba(15, 23, 42, .16);
    opacity: 0; visibility: hidden; transform: translateY(-10px) scale(.98);
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
  }
  .site-nav.open .nav-drop { opacity: 1; visibility: visible; transform: none; }
  .site-nav .nav-links { flex-direction: column; align-items: stretch; overflow: visible; mask-image: none; -webkit-mask-image: none; }
  .site-nav a.nav-item, .site-nav a.nav-cab { padding: 11px 14px; font-size: 15px; border-radius: 14px; }
  .site-nav a.nav-cab { justify-content: center; margin-top: 4px; }
  .site-nav .cab-name { max-width: none; }
}

/* ---------- Кнопки ---------- */
.btn-primary, .cta, .box .btn:not(.btn-ghost), .t-actions a.cta, body.test-page .cta {
  background: var(--t-ink); background-image: none; color: #fff; border: 0; border-radius: 9999px;
  box-shadow: none; text-shadow: none; font-weight: 500;
}
@media (hover: hover) { .btn-primary:hover, .cta:hover, .box .btn:not(.btn-ghost):hover, body.test-page .cta:hover { background: var(--t-ink-soft); transform: none; } }
body.test-page .ghost, .btn-ghost, .btn-outline, .nav-page, .t-back, .tab:not(.active) {
  background: var(--t-bg); background-image: none; border: 1px solid transparent; color: var(--t-ink);
  border-radius: 9999px; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
@media (hover: hover) { body.test-page .ghost:hover:not(:disabled), .btn-ghost:hover, .btn-outline:hover, .nav-page:hover { border-color: var(--t-stroke-dark); color: var(--t-ink); background: var(--t-bg); } }
.tab.active { background: var(--t-ink); color: #fff; box-shadow: none; }
.tabs .tab { border-radius: 9999px; }

/* ---------- Поля ---------- */
.input, .t-search, .code-input {
  background: var(--t-bg); border: 1px solid transparent; border-radius: 1rem; color: var(--t-ink);
  box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
.input:focus, .t-search:focus, .code-input:focus { background: #fff; border-color: var(--t-ink); box-shadow: none; outline: none; }

/* ---------- Тести ---------- */
body.test-page .t-grid button {
  background: var(--t-bg); border: 1.5px solid transparent; color: var(--t-ink); box-shadow: none; border-radius: 9999px;
}
body.test-page .t-grid button.done { background: var(--t-blue-10); color: var(--t-blue); }
body.test-page .t-grid button.ok { background: var(--t-green-10); color: #067a1c; }
body.test-page .t-grid button.bad { background: var(--t-red-10); color: var(--t-red); }
body.test-page .t-grid button.cur { border-color: var(--t-ink); box-shadow: none; }
body.test-page .t-timer, body.test-page .t-progress { background: var(--t-bg); color: var(--t-ink); border: 0; box-shadow: none; }
body.test-page .t-timer.t-warn { background: var(--t-red-10); color: var(--t-red); }
body.test-page .t-meta { color: var(--t-muted); }
body.test-page .t-quiz-head .t-finish { background: #fff; border: 1px solid var(--t-stroke); color: var(--t-ink); }

body.test-page .t-options button {
  background: var(--t-bg); background-image: none; border: 1.5px solid transparent; border-radius: var(--t-radius-sm);
  color: var(--t-ink); box-shadow: none;
}
@media (hover: hover) { body.test-page .t-options button:hover:not(:disabled) { background: var(--t-bg); border-color: var(--t-stroke-dark); transform: none; } }
body.test-page .t-options .num { background: #fff; border: 1.5px solid var(--t-stroke-dark); box-shadow: none; }
body.test-page .t-options button.picked { background: var(--t-blue-10); border-color: var(--t-blue); }
body.test-page .t-options button.picked .num { background: var(--t-blue); border-color: var(--t-blue); box-shadow: inset 0 0 0 3px #fff; }
body.test-page .t-options button.ok { background: var(--t-green-10); border-color: var(--t-green); color: var(--t-ink); }
body.test-page .t-options button.ok .num { background: var(--t-green); border-color: var(--t-green); box-shadow: inset 0 0 0 3px #fff; }
body.test-page .t-options button.bad { background: var(--t-red-10); border-color: var(--t-red); color: var(--t-ink); }
body.test-page .t-options button.bad .num { background: var(--t-red); border-color: var(--t-red); box-shadow: inset 0 0 0 3px #fff; }
body.test-page .t-figure img { background: var(--t-bg); border-radius: var(--t-radius-sm); box-shadow: none; }
body.test-page .t-verdict { font-weight: 500; letter-spacing: -.02em; }
body.test-page .t-given { background: var(--t-red-10); color: var(--t-red); }
body.test-page .t-right { background: var(--t-green-10); color: #067a1c; }
body.test-page .t-review .t-expl { background: #fff; color: var(--t-ink-soft); }
body.test-page .t-review .refs, body.test-page .t-source a, body.test-page .t-rule a { color: var(--t-blue); }

/* заглушка для питань без ілюстрації */
.t-noimg-box {
  width: 100%; aspect-ratio: 16 / 10; max-height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  border-radius: var(--t-radius-sm); color: var(--t-muted); font-size: 14px; font-weight: 500; text-align: center;
  background: var(--t-bg); border: 0;
}
.t-noimg-box svg { width: 34px; height: 34px; stroke-width: 1.8; opacity: .6; }

/* ---------- 3D-тренажер (tests/index.html) ---------- */
.app .chip, .app .seg {
  background: #fff; background-image: none; border: 1px solid var(--t-stroke);
  backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: var(--t-shadow);
}
.app .seg button { color: var(--t-ink); }
.app .seg button.on { background: var(--t-bg); color: var(--t-ink); box-shadow: none; }
.app .panel { background: var(--t-bg); }
.app .card {
  background: #fff; background-image: none; border: 0;
  backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 -6px 16px rgba(0, 0, 0, .12);
}
.app .options button { background: var(--t-bg); background-image: none; border: 1.5px solid transparent; border-radius: var(--t-radius-sm); box-shadow: none; }
@media (hover: hover) { .app .options button:hover:not(:disabled) { background: var(--t-bg); border-color: var(--t-stroke-dark); } }
.app .options .num { background: #fff; }
.app .options button.ok { background: var(--t-green-10); border-color: var(--t-green); }
.app .options button.bad { background: var(--t-red-10); border-color: var(--t-red); }
.app .explain { background: var(--t-bg); border: 0; box-shadow: none; }
.app .cta { background: var(--t-ink); border-radius: 9999px; box-shadow: var(--t-shadow); }
@media (min-width: 960px) { .app .card { border-radius: var(--t-radius); box-shadow: none; } }
/* телефон: шторка з питанням наїжджає на сцену — за заокругленими кутами має бути видно анімацію, а не сірий фон */
@media (max-width: 959px) { .app .panel { background: transparent; } }

/* ---------- «Довідник ▾» у меню (ПДР, знаки, розмітка, теми, статті) ---------- */
.site-nav .nav-dd { position: relative; flex-shrink: 0; }
.site-nav .nav-dd-btn { display: flex; align-items: center; gap: 4px; padding: 8px 12px 8px 14px; border: 0; border-radius: 9999px; background: none;
  font: inherit; font-size: 14px; font-weight: 500; color: var(--t-ink); cursor: pointer; white-space: nowrap; }
.site-nav .nav-dd.active .nav-dd-btn, .site-nav .nav-dd.open .nav-dd-btn { background: var(--t-bg); }
.site-nav .nav-dd-chev { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.site-nav .nav-dd.open .nav-dd-chev { transform: rotate(180deg); }
.site-nav .nav-dd-menu { display: none; position: absolute; z-index: 30; top: 100%; left: 0; min-width: 210px; padding: 6px;
  margin-top: 8px; border-radius: 16px; background: #fff; border: 1px solid var(--t-stroke); box-shadow: 0 16px 40px rgba(15, 23, 42, .14); }
.site-nav .nav-dd-menu::before { content: ''; position: absolute; left: 0; right: 0; top: -10px; height: 10px; } /* місток для наведення */
.site-nav .nav-dd.open .nav-dd-menu { display: grid; }
@media (hover: hover) and (min-width: 641px) {
  .site-nav .nav-dd:hover .nav-dd-menu { display: grid; }
  .site-nav .nav-dd-btn:hover { background: var(--t-bg); }
  .site-nav .nav-dd-menu a:hover { background: var(--t-bg); }
}
.site-nav .nav-dd-menu a { display: block; padding: 10px 12px; border-radius: 10px; color: var(--t-ink); text-decoration: none; font-size: 14px; font-weight: 500; white-space: nowrap; }
.site-nav .nav-dd-menu a.active { background: var(--t-bg); }
@media (max-width: 640px) {
  /* у розкритому меню телефона «Довідник» — підзаголовок із пунктами під ним */
  .site-nav .nav-dd { margin-top: 4px; order: 2; }
  /* «Premium» одразу під основними розділами, а не наприкінці «Довідника» */
  .site-nav .nav-links { order: 0; } .site-nav a.nav-prem { order: 1; } .site-nav a.nav-cab { order: 3; } .site-nav a.nav-out { order: 4; }
  .site-nav .nav-dd-btn { width: 100%; padding: 8px 14px 4px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
    color: var(--t-muted); cursor: default; background: none !important; }
  .site-nav .nav-dd-chev { display: none; }
  .site-nav .nav-dd-menu { display: grid; position: static; margin: 0; padding: 0; min-width: 0; border: 0; box-shadow: none; background: none; }
  .site-nav .nav-dd-menu::before { display: none; }
  .site-nav .nav-dd-menu a { padding: 11px 14px; font-size: 15px; border-radius: 14px; }
}