/* ============================================================
   Quizzer.TOP — /quizzes: «мостик» к дизайну основного сайта.
   Файл подключается последним (blocks/css.php), поэтому перекрывает
   цвета и шрифты блогового шаблона обычными правилами.

   Палитра и типографика те же, что в css/theme/style.css основного
   сайта («Violet Cosmos»): тёмный фиолет, сияющая лаванда, Inter +
   Unbounded. Переменные названы с префиксом --q-, чтобы не спорить
   с токенами шаблона.
   ============================================================ */
:root {
  --q-bg:        #130B28;
  --q-bg-deep:   #0D0719;
  --q-surface:   #1D1338;
  --q-surface-2: #181030;
  --q-surface-3: #271A4A;
  --q-line:      #3D2B72;
  --q-line-soft: #332460;
  --q-accent:    #B892FF;
  --q-accent-2:  #8E6CFF;
  --q-accent-soft: rgba(184, 146, 255, .14);
  --q-on-accent: #230F4E;
  --q-text:      #F3F0FF;
  --q-muted:     #A99CCF;
  --q-muted-2:   #7A6BA6;
  --q-coral:     #FF6B8B;
  --q-mint:      #4DEBB8;
  --q-amber:     #FFC94D;
  --q-r-sm: 8px;
  --q-r-md: 12px;
  --q-r-lg: 18px;
  --q-font-body: "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --q-font-display: "Unbounded", "Inter", sans-serif;
}

/* ---------- База ---------- */
html { scroll-behavior: smooth; }
body {
  background-color: var(--q-bg) !important;
  color: var(--q-text);
  font-family: var(--q-font-body);
}
body::before { display: none; }              /* белая подложка шаблона */
#page-wrapper, .magazine-view, .feed-view, .outer-wrapper { background: transparent; }
.bg-light { background-color: transparent !important; }
h1, h2, h3, .post-title, .title-heading, .fbt-sep-title h4 {
  font-family: var(--q-font-display);
  color: var(--q-text);
}
/* Акцентный цвет ссылок шаблона журнала. ЛОГОТИП основного сайта — исключение:
   его разметку (.logo + .logo-text) печатает blocks/header.php, а собственного
   цвета у .logo-text нет, поэтому «голое» правило `a` красило надпись
   «QUIZZER.TOP» фиолетовым вместо белого (задача владельца). `a:not(.logo)`
   оставляет логотип с базовым цветом текста, а акцентную «.TOP» задаёт
   css/theme/style.css (.logo-text b). */
a:not(.logo) { color: var(--q-accent); }
a:not(.logo):hover, a:not(.logo):focus { color: #D6BCFF; text-decoration: none; }
p { color: var(--q-muted); }
hr, .divider:before, .divider:after { border-color: var(--q-line-soft); }
/* Ширину контента журнала не трогаем (1180px), а вот шапка и подвал сайта
   используют «голый» .container — он должен быть как на сайте (1200px из
   css/theme/style.css), иначе шапка на /quizzes была на 20px уже, чем везде. */
.container { max-width: var(--container); }
.fbt-elastic-container { max-width: 1180px; }
::selection { background: var(--q-accent); color: var(--q-on-accent); }

/* ---------- Верхняя строка ---------- */
.qzq-topbar {
  background: var(--q-bg-deep);
  border-bottom: 1px solid var(--q-line-soft);
  font-size: 12.5px;
}
.qzq-topbar__in { display: flex; align-items: center; gap: 14px; min-height: 40px; flex-wrap: wrap; }
.qzq-topbar__tag { color: var(--q-muted-2); letter-spacing: .02em; }
.qzq-topbar__spacer { flex: 1 1 auto; }
.qzq-topbar__link { color: var(--q-muted); font-weight: 600; }
.qzq-topbar__link:hover { color: var(--q-accent); }
.qzq-topbar__social {
  width: 30px; height: 30px;
  display: inline-grid; place-items: center;
  border-radius: var(--q-r-sm);
  background: var(--q-surface-3);
  border: 1px solid var(--q-line-soft);
  color: var(--q-muted);
  transition: color .2s, border-color .2s, transform .2s;
}
.qzq-topbar__social:hover { color: var(--q-accent); border-color: var(--q-accent); transform: translateY(-2px); }

/* ---------- Меню ---------- */
.qzq-nav {
  background: rgba(24, 16, 48, .94);
  border-bottom: 1px solid var(--q-line);
  position: sticky;
  top: 0;
  z-index: 40;
}
.qzq-nav__in { display: flex; align-items: center; gap: 18px; min-height: 68px; flex-wrap: wrap; }
.qzq-logo { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.qzq-logo__mark {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: linear-gradient(135deg, #D6BCFF, #B892FF 45%, #8E5CFF);
  color: var(--q-on-accent);
  font-family: var(--q-font-display);
  font-weight: 800;
  font-size: 17px;
  box-shadow: 0 8px 24px rgba(184, 146, 255, .28);
}
.qzq-logo__text {
  font-family: var(--q-font-display);
  font-size: 15px;
  font-weight: 800;
  color: var(--q-text);
  letter-spacing: .03em;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.qzq-logo__text b { color: var(--q-accent); }
.qzq-logo__text i {
  font-family: var(--q-font-body);
  font-style: normal;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--q-muted-2);
}
.qzq-nav__list { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; flex-wrap: wrap; }
.qzq-nav__list a {
  display: inline-flex; align-items: center;
  padding: 9px 13px;
  border-radius: var(--q-r-sm);
  color: var(--q-muted);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  transition: color .2s, background .2s;
}
.qzq-nav__list a:hover { color: var(--q-text); background: rgba(142, 96, 255, .14); }
.qzq-nav__list a.is-active { background: var(--q-accent); color: var(--q-on-accent); }
.qzq-nav__auth { margin-left: auto; display: flex; align-items: center; gap: 8px; }


/* Кнопки раздела: свои (основной css/theme/style.css сюда не подключён) */
.qzq-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px;
  padding: 0 18px;
  border-radius: var(--q-r-md);
  border: 1px solid var(--q-line);
  background: var(--q-surface-3);
  color: var(--q-text);
  font-family: var(--q-font-body);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: transform .2s, border-color .2s, background .2s, box-shadow .2s, color .2s;
}
.qzq-btn:hover, .qzq-btn:focus { color: var(--q-text); border-color: var(--q-accent); transform: translateY(-2px); }
.qzq-btn--accent {
  background: var(--q-accent);
  border-color: var(--q-accent);
  color: var(--q-on-accent);
  box-shadow: 0 8px 26px rgba(184, 146, 255, .28);
}
.qzq-btn--accent:hover, .qzq-btn--accent:focus { color: var(--q-on-accent); background: #C7A6FF; }
.qzq-btn--lg { min-height: 50px; padding: 0 26px; font-size: 15px; border-radius: 14px; }

/* ---------- Панель «нужна авторизация» ---------- */
.qzq-container { padding-top: 12px; padding-bottom: 30px; }
.qzq-card {
  position: relative;
  background: var(--q-surface);
  border: 1px solid var(--q-line-soft);
  border-radius: var(--q-r-lg);
  padding: 34px;
  box-shadow: 0 18px 50px rgba(6, 3, 14, .45);
}
.qzq-auth-card { max-width: 720px; margin: 24px auto 0; text-align: center; }
.qzq-auth-card__ico {
  width: 62px; height: 62px;
  margin: 0 auto 16px;
  display: grid; place-items: center;
  border-radius: 20px;
  background: var(--q-accent-soft);
  border: 1px solid rgba(184, 146, 255, .34);
  color: var(--q-accent);
}
.qzq-auth-card h1 { font-size: clamp(22px, 3vw, 30px); line-height: 1.24; margin-bottom: 10px; }
.qzq-auth-card__lead { color: var(--q-muted); font-size: 15px; max-width: 560px; margin: 0 auto 22px; }
.qzq-auth-card__btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.qzq-auth-card__list {
  list-style: none;
  margin: 24px auto 0;
  padding: 18px 22px;
  max-width: 520px;
  text-align: left;
  background: var(--q-surface-2);
  border: 1px solid var(--q-line-soft);
  border-radius: var(--q-r-md);
}
.qzq-auth-card__list li { color: var(--q-muted); font-size: 13.8px; padding: 4px 0 4px 20px; position: relative; }
.qzq-auth-card__list li:before { content: "\2022"; position: absolute; left: 4px; color: var(--q-accent); font-weight: 900; }
.qzq-auth-card__back { display: inline-block; margin-top: 20px; font-weight: 700; font-size: 13.5px; }
.qzq-auth-card__quiz-url { display: block; margin-top: 8px; color: var(--q-muted-2); font-size: 12px; word-break: break-all; }

/* ---------- Подвал раздела ---------- */
.qzq-footer { background: var(--q-bg-deep); border-top: 1px solid var(--q-line-soft); padding: 22px 0; }
.qzq-footer__in { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.qzq-footer__note { color: var(--q-muted-2); font-size: 12.5px; }
.qzq-footer__spacer { flex: 1 1 auto; }
.qzq-footer__link { color: var(--q-muted); font-size: 12.5px; font-weight: 600; }

/* ============================================================
   Оверрайды блогового шаблона (Bootstrap 4 + css/style.css)
   ============================================================ */
/* Карточки-посты и плитки каталога */
.card, .post-item, .fbt-index-post.card, .blog-post-comments .comment {
  background-color: var(--q-surface);
  border: 1px solid var(--q-line-soft);
  border-radius: var(--q-r-lg);
  color: var(--q-text);
}
.card-body, .fbt-post-caption, .title-caption { background: transparent; }
.post-title { font-size: 17px; line-height: 1.35; }
.post-title a { color: var(--q-text); }
.post-title a:hover { color: var(--q-accent); }
.post-meta, .post-date, .post-author, .text-muted { color: var(--q-muted-2) !important; }
.fbt-post-thumbnail { overflow: hidden; border-radius: var(--q-r-md); }
.fbt-post-thumbnail img { border-radius: var(--q-r-md); }

/* Заголовки-разделители и виджеты сайдбара */
.fbt-sep-title .title-sep { border-color: var(--q-line); }
.fbt-sep-title h4.title-heading-left { color: var(--q-text); }
.widget, .fbt_ad, .fbt-main-sidebar__content, .FeaturedPostContainer { background: transparent; color: var(--q-text); }
.fbt_ad, .widget .widget-content { border-radius: var(--q-r-md); }
.fbt_list_posts .post-content { border-bottom: 1px solid var(--q-line-soft); }

/* Формы */
.form-control, input[type="text"], input[type="email"], input[type="search"], textarea, select {
  background-color: var(--q-surface-3);
  border: 1px solid var(--q-line);
  border-radius: var(--q-r-md);
  color: var(--q-text);
}
.form-control:focus, input:focus, textarea:focus, select:focus {
  background-color: var(--q-surface-3);
  border-color: var(--q-accent);
  color: var(--q-text);
  box-shadow: 0 0 0 3px var(--q-accent-soft);
}
input::placeholder, textarea::placeholder { color: var(--q-muted-2); }
.btn:not(.btn-accent):not(.btn-dark):not(.btn-vk):not(.btn-fb):not(.btn-insta), .btn-primary {
  background-color: var(--q-accent);
  border-color: var(--q-accent);
  color: var(--q-on-accent);
  border-radius: var(--q-r-md);
  font-weight: 700;
}
.btn:not(.btn-accent):not(.btn-dark):not(.btn-vk):not(.btn-fb):not(.btn-insta):hover, .btn-primary:hover { background-color: #C7A6FF; border-color: #C7A6FF; color: var(--q-on-accent); }

/* Поиск (оверлей шаблона) */
form#search { background: var(--q-bg-deep); }
form#search input.search { background: transparent; color: var(--q-text); }

/* Пагинация */
.pagenav a, .pager a, .pagination .page-link {
  background: var(--q-surface-3);
  border-color: var(--q-line);
  color: var(--q-muted);
  border-radius: var(--q-r-sm);
}
.pagenav a:hover, .pager a:hover, .pagination .page-link:hover { color: var(--q-accent); border-color: var(--q-accent); }

/* Подвал шаблона (footer-dark / #credits) */
.footer-dark, .footer-dark.pt-4, #credits { background-color: var(--q-bg-deep) !important; color: var(--q-text); }
.footer-dark p, .footer-dark .list-unstyled li a, .footer-dark .copyright-section { color: var(--q-muted) !important; }
.footer-dark a, .footer-dark .nav-link { color: var(--q-muted); }
.footer-dark a:hover, .footer-dark .nav-link:hover { color: var(--q-accent); }
.footer-dark .divider:before, .footer-dark .divider:after { border-color: var(--q-line-soft); }
.footer-dark .logoImage img, .footer-2 .logoImage img { max-width: 190px; }

/* Экран прохождения квиза (css/quiz.css + старые классы движка) */
.b-qq, .qq, .question, .answer, .answer_image, .b-result, .answers_a, .answers_q { color: var(--q-text); }
.qq, .question {
  background: var(--q-surface);
  border: 1px solid var(--q-line-soft);
  border-radius: var(--q-r-lg);
}
.qq .answer, .answer, .answer_image {
  background: var(--q-surface-3);
  border: 1px solid var(--q-line);
  border-radius: var(--q-r-md);
  color: var(--q-text);
  transition: border-color .2s, background .2s, transform .2s;
}
.qq .answer:hover, .answer:hover, .answer_image:hover { border-color: var(--q-accent); transform: translateY(-2px); }
.qq .answer.select, .answer.select, .answer_image.select,
.qq .answer.selected, .answer.selected {
  background: var(--q-accent-soft);
  border-color: var(--q-accent);
}
.qq .answer.correct, .answer.correct, .answer_image.correct { border-color: var(--q-mint); }
.qq .answer.incorrect, .answer.incorrect, .answer_image.incorrect { border-color: var(--q-coral); }
.cssProgress { background: var(--q-surface-3); border-radius: 999px; }
.cssProgress .cssProgress-bar { background: linear-gradient(135deg, #D6BCFF, #B892FF 45%, #8E5CFF); }
.cssProgress .cssProgress-label { color: var(--q-text); }
.b-result .coins { color: var(--q-amber); }

/* Адаптив */
@media (max-width: 767px) {
  .qzq-nav__in { min-height: 0; padding: 10px 0; gap: 10px; }
  .qzq-nav__list { order: 3; width: 100%; }
  .qzq-nav__auth { margin-left: auto; }
  .qzq-card { padding: 24px 18px; }
}

.qzq-footer__link:hover { color: var(--q-accent); }


/* ============================================================
   ШАПКА, ПОДВАЛ И ФОН — КАК НА ОСНОВНОМ САЙТЕ (задача владельца:
   «/quizzes должен быть полностью в стиле сайта и шапка такая же»)
   ------------------------------------------------------------
   Разметку шапки/подвала печатают quizzes/engine/blocks/header.php и
   footer.php теми же классами, что основной сайт, а вид задаёт
   css/theme/style.css (подключён в blocks/css.php). Здесь — только то,
   что нужно убрать/поправить в шаблоне журнала, чтобы не было «двух
   подвалов» и лишних полей.
   ============================================================ */
/* Старый подвал журнала (#credits: © … | соцсети иконками), весь блок
   виджетов #footer-content и «полоса» квизов .qzq-footer (её печатала только
   theme/auth_required.php) больше не нужны: ниже стоит подвал сайта
   (.site-footer). Без этого на странице было ДВА подвала подряд. */
#credits,
#footer-menu,
#footer-content,
.qzq-footer { display: none !important; }

/* Подвал сайта отделяем от контента. */
.site-footer { margin-top: 56px; }

/* Списки шапки и подвала сайта: bootstrap-4 reboot шаблона журнала оставляет
   `ul { margin-bottom: 1rem }` (16px) — из-за него блок меню в шапке получался
   56px вместо 40 и пункты стояли не по центру строки. */
.site-header ul,
.site-footer ul { margin: 0; padding: 0; list-style: none; }

/* Шапка — первой в <body> (как на основном сайте), поэтому #page-wrapper
   больше НЕ нужен верхний отступ: раньше `padding-top: 76px` сдвигал шапку
   вниз и над ней оставалась пустая полоса. Контент журнала идёт сразу за
   шапкой: `.outer-wrapper.mt-...` (+48px) и `.fbt-gallery.mt-n5` (−48px)
   сворачиваются в нулевой отступ. */
#page-wrapper { padding-top: 0; }

/* Фон страницы — как у сайта (декоративный слой .bg-decor из style.css). */
body { background: #120A26; }