/* =========================================================
   Buketov Language Review — Modern UI overrides (OJS/PKP)
   Цель: современный UX/UI, меньше “боксов”, красивый хэдер,
   нормальный логотип, хорошие дропдауны, Kazakh-support fonts.
   Этот CSS можно вставить ПОСЛЕ того, что уже подключено.
   ========================================================= */

/* ---------- Fonts (Kazakh-friendly) ---------- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;500;600;700&family=Noto+Serif:wght@400;600;700&display=swap');

/* ---------- Theme tokens ---------- */
:root{
  --bg: #f6f7fb;
  --surface: #ffffff;
  --text: #0f172a;
  --muted: #5b6476;
  --line: rgba(15, 23, 42, .10);

  --brand: #1b3a74;         /* основной */
  --brand-2: #2f6cb1;       /* акцент */
  --brand-3: #27b0c2;       /* вторичный акцент */

  --link: #1b3a74;
  --linkHover: #0b2a5b;

  --radius: 16px;
  --radius-sm: 12px;

  --shadow-sm: 0 8px 18px rgba(15, 23, 42, .10);
  --shadow-md: 0 16px 34px rgba(15, 23, 42, .14);

  --container: 1320px;
}

/* ---------- Base / global overrides ---------- */
html{ overflow-x:hidden; }
body{
  font-family: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  color: var(--text) !important;
  background: var(--bg) !important;
  line-height: 1.65;
}

/* ссылки */
a{
  color: var(--link) !important;
  text-decoration: none !important;
  transition: color .2s ease, opacity .2s ease, transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}
a:hover{ color: var(--linkHover) !important; }

/* заголовки — немного “журнально”, но современно */
h1,h2,h3,h4,h5,h6{
  font-family: "Noto Serif", "Noto Sans", serif !important;
  color: var(--text) !important;
  letter-spacing: .1px;
}
p{ color: var(--text); }
small, .text-muted{ color: var(--muted) !important; }

/* контейнеры */
.container{
  max-width: var(--container) !important;
}

/* основная белая “подложка” сайта */
.pkpmainx{
  margin: 0 auto !important;
  max-width: 1400px;
  background: var(--surface) !important;
  /*border-radius: 22px;*/
  /*box-shadow: var(--shadow-md);/*
  overflow: hidden; /* чтобы хэдер/герой красиво “врезались” */
}

/* убираем лишние “серые” цвета из встроенного CSS */
body, body *{
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- Header (НЕ серый, современный) ---------- */
#header{
  height: auto !important;
  transition: all .35s ease;
  box-shadow: none !important; /* перехватываем старые тени */
  position: relative;
  isolation: isolate;
}

/* Твой HTML уже задаёт background image inline.
   Мы добавляем современный оверлей + лёгкий blur */
#header::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(1200px 600px at 20% 0%, rgba(39,176,194,.35), transparent 55%),
    radial-gradient(900px 500px at 90% 10%, rgba(47,108,177,.35), transparent 60%),
    linear-gradient(135deg, rgba(9,18,43,.78), rgba(10,22,50,.72));
  z-index:0;
}
#header::after{
  content:"";
  position:absolute;
  inset:0;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index:0;
  pointer-events:none;
}

/* верхняя панель */
.bg-header-a,
.bg-header-x{
  background: transparent !important; /* убираем “серый” слой */
  position: relative;
  
}
.bg-header-a{
  padding: 14px 0 !important;
  z-index: 3;
}
.bg-header-x{
  padding: 12px 0 18px !important;
  border-top: 1px solid rgba(255,255,255,.14) !important;
  z-index: 2;
}

/* логотип (белый!) */
#header .logo{
  position: relative;
  z-index: 2;
}
#header .logo a{ display:inline-flex; align-items:center; }
#header .logo img{
  padding: 0 !important;
  margin: 0 !important;
  max-height: 88px !important;  /* СБРОС max-height:40px */
  height: auto !important;
  width: auto !important;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.22));
}

/* исправляем text-light в лого (оставляем белым, но красивым) */
#header .logo .text-light,
#header .logo p.text-light,
#header .logo .logotitle,
#header .logo .logotitle.text-light{
  color: rgba(255,255,255,.95) !important;
}
#header .logo .logotitle{
  font-family: "Noto Serif", "Noto Sans", serif !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: .2px;
  line-height: 1.1;
  font-size: 26px !important;
  margin: 0 !important;
  text-shadow: 0 10px 22px rgba(0,0,0,.30);
}
#header .logo p.fs-6{
  font-family: "Noto Sans", sans-serif !important;
  font-weight: 500;
  opacity: .92;
  margin-top: 8px !important;
  text-shadow: 0 10px 20px rgba(0,0,0,.22);
}

/* ---------- Navigation / links ---------- */
.navbar{
  z-index: 2 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.bg-header-a .navbar-nav>li>a,
.bg-header-a .navbar-nav>li>div>a,
.bg-header-x .navbar-nav>li>a,
.bg-header-x .navbar-nav>li>div>a{
  color: rgba(255,255,255,.92) !important;
  font-weight: 600;
}

.navbar .nav-link{
  font-size: 14px !important;
  padding: 10px 14px !important;
  border-radius: 12px !important;
  background: transparent;
  transition: background-color .2s ease, transform .2s ease;
}
.navbar .nav-link:hover{
  background: rgba(255,255,255,.12);
  transform: translateY(-1px);
}

/* “язык/профиль” как pill */
.langhead .nav-link,
#_navigationUser .nav-link{
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
}
.langhead .nav-link:hover,
#_navigationUser .nav-link:hover{
  background: rgba(255,255,255,.14);
}

/* значок globe */
.langhead i{
  font-size: 20px !important;
}
.langhead small {
	color: #fff !important;
}

/* счётчик задач */
.task_count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 22px;
  height: 22px;
  margin-left: 8px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(39,176,194,.25);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

/* ---------- Dropdown (современный) ---------- */
.dropdown-menu{
  border: 1px solid rgba(15,23,42,.10) !important;
  border-radius: 14px !important;
  padding: 10px !important;
  box-shadow: 0 18px 45px rgba(15,23,42,.18) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.dropdown-item{
  border-radius: 10px !important;
  padding: 10px 12px !important;
  font-weight: 600;
  color: var(--text) !important;
}
.dropdown-item:hover{
  background: rgba(47,108,177,.10) !important;
  color: var(--text) !important;
}

/* ---------- Mobile modal меню (красивее) ---------- */
.modal-content{
  border: 0 !important;
  border-radius: 18px !important;
  box-shadow: var(--shadow-md) !important;
}
.modal-header{
  border-bottom: 1px solid var(--line) !important;
}
.modal-body{
  padding: 18px !important;
}
.modal-body .nav-link{
  color: var(--text) !important;
  background: rgba(15,23,42,.04);
  border: 1px solid rgba(15,23,42,.08);
  margin-bottom: 10px;
}
.modal-body .nav-link:hover{
  background: rgba(47,108,177,.08);
}

/* ---------- Hero (inner-page НЕ 60vh) ---------- */
.hero-section{
  position: relative;
}
.hero-section.inner-page{
  height: auto !important;      /* важно: перехват твоего 60vh */
  min-height: auto !important;
  background: linear-gradient(180deg, rgba(255,255,255,.00), rgba(255,255,255,.85)) !important;
  border-bottom: 1px solid var(--line) !important;
  padding: 8px 0 0 !important;
}
.hero-section.inner-page h1{
  font-family: "Noto Serif", serif !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  margin: 0 !important;
  padding: 18px 0 !important;
}

/* ---------- Breadcrumbs ---------- */
.cmp_breadcrumbs{
  display: block !important;
  margin: 6px 0 18px !important;
}
.cmp_breadcrumbs ol{
  margin: 0 0 14px !important;
  padding: 0 !important;
  font-size: 14px !important;
}
.cmp_breadcrumbs a{
  font-weight: 600;
}
.cmp_breadcrumbs .separator{
  opacity: .55;
}
.cmp_breadcrumbs .current{
  color: var(--muted) !important;
}

/* ---------- Page content (обычная страница) ---------- */
main[role="main"]{
  background: #fff !important; /* если раньше были паттерны/картинки — убираем “грязь” */
}
.pkpmainx > main{
  background: transparent !important;
}

.page.page_about{
  padding: 0 !important;
}

/* контентная колонка: читабельность и “воздух” */
.page.page_about p{
  font-size: 16px;
  color: rgba(15,23,42,.92);
  margin-bottom: 12px;
}
.page.page_about ul{
  margin: 14px 0 18px 18px;
}
.page.page_about li{
  margin: 8px 0;
  color: rgba(15,23,42,.92);
}
.page.page_about strong{
  color: var(--text);
}

/* убираем “лишнее выделение боксами”: делаем мягко */
.block_custom,
.sidebar-box,
.step,
.pricing,
.cmp_notification,
.cmp_table{
  border-radius: var(--radius) !important;
  box-shadow: none !important;
}
.cmp_notification{
  background: rgba(47,108,177,.08) !important;
  border-left: 4px solid rgba(47,108,177,.55) !important;
  color: var(--text) !important;
}
.cmp_table{
  border: 1px solid var(--line) !important;
  overflow: hidden;
}
.cmp_table th{
  background: rgba(15,23,42,.03);
}

/* ---------- Buttons ---------- */
.btn-primary,
.pkp_button_primary,
.cmp_button,
.page_search .submit button{
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 70%, var(--brand-3) 140%) !important;
  border: 0 !important;
  color: #fff !important;
  border-radius: 14px !important;
  padding: 10px 16px !important;
  box-shadow: 0 12px 26px rgba(27,58,116,.22) !important;
}
.btn-primary:hover,
.pkp_button_primary:hover,
.cmp_button:hover,
.page_search .submit button:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 34px rgba(27,58,116,.28) !important;
}

/* вторичные */
.cmp_button_wire,
.obj_galley_link{
  border-radius: 14px !important;
  border: 1px solid rgba(27,58,116,.35) !important;
  color: var(--brand) !important;
  background: rgba(27,58,116,.04) !important;
}
.cmp_button_wire:hover,
.obj_galley_link:hover{
  background: rgba(27,58,116,.10) !important;
}

/* ---------- Sidebar (CTA только “Отправить материал”) ---------- */
._pkp_structure_sidebar{
  padding: 0 !important;
  margin: 0 !important;
}

/* общий стиль пунктов */
._pkp_structure_sidebar > li > a{
  display:flex !important;
  align-items:center;
  justify-content:space-between;
  padding: 12px 14px !important;
  border-radius: 14px !important;
  background: rgba(15,23,42,.03);
  border: 1px solid rgba(15,23,42,.08);
  color: var(--text) !important;
  font-weight: 700;
  font-family: "Noto Sans", sans-serif !important;
  letter-spacing: .1px;
  margin-bottom: 10px;
}

/* hover */
._pkp_structure_sidebar > li > a:hover{
  background: rgba(47,108,177,.08);
  border-color: rgba(47,108,177,.18);
}

/* CTA — только первый пункт “Отправить материал / Make a Submission” */
._pkp_structure_sidebar > li:first-child > a{
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 75%, var(--brand-3) 150%) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 16px 34px rgba(27,58,116,.24) !important;
  position: relative;
  overflow: hidden;
}
._pkp_structure_sidebar > li:first-child > a::after{
  content:"";
  position:absolute;
  inset:-60% -40%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.28), transparent 55%);
  transform: rotate(12deg);
  pointer-events:none;
}
._pkp_structure_sidebar > li:first-child > a:hover{
  transform: translateY(-1px);
  box-shadow: 0 22px 44px rgba(27,58,116,.30) !important;
}

/* убираем “моноширинный” стиль, который портил вид */
._pkp_structure_sidebar a.font-monospace{
  font-family: "Noto Sans", sans-serif !important;
}

/* ---------- Forms (мягко, современно) ---------- */
.cmp_form input[type="text"],
.cmp_form input[type="email"],
.cmp_form input[type="password"],
.cmp_form input[type="url"],
.cmp_form input[type="tel"],
.cmp_form select,
.cmp_form textarea{
  border-radius: 14px !important;
  border: 1px solid rgba(15,23,42,.12) !important;
  background: #fff !important;
}
.cmp_form input:focus,
.cmp_form select:focus,
.cmp_form textarea:focus{
  border-color: rgba(47,108,177,.45) !important;
  box-shadow: 0 0 0 4px rgba(47,108,177,.12) !important;
}

/* ---------- Footer ---------- */
footer{
  background: #f3f4f7 !important;
  color: rgba(15,23,42,.70) !important;
  font-size: 14px !important;
}
footer a{ color: rgba(15,23,42,.82) !important; }
footer a:hover{ color: var(--brand) !important; }

/* ---------- Responsive tweaks ---------- */
@media (max-width: 991.5px){
  .bg-header-a .navbar-nav>li>a,
  .bg-header-a .navbar-nav>li>div>a,
  .bg-header-x .navbar-nav>li>a,
  .bg-header-x .navbar-nav>li>div>a{
    color: rgba(255,255,255,.92) !important; /* оставляем белым в хэдере */
  }

  #header .logo img{ max-height: 72px !important; }
  #header .logo .logotitle{ font-size: 16px !important; }
  #header .logo p.fs-6{ font-size: 12px !important; }

  .hero-section.inner-page h1{ font-size: 22px !important; }
}

@media (max-width: 575.5px){
  #header .logo img{ max-height: 62px !important; }
  #header .logo .logotitle{ font-size: 14px !important; }
}

/* ---------- Small safety overrides: stop weird legacy colors ---------- */
.text-primary{ color: var(--brand-2) !important; }
.obj_announcement_summary .read_more{ color: var(--brand) !important; }
.obj_announcement_summary .read_more:hover{ color: var(--linkHover) !important; }

/* если где-то старый CSS делал “серый текст” на всем */
body, .page, .page *{
  color: inherit;
}
.page p, .page li{ color: rgba(15,23,42,.92) !important; }
/* =========================
   PATCH ONLY (не ломаем дизайн)
   ========================= */

/* 1) Сброс плохого правила, которое убивает логотип */
#header .logo img{
  padding: 0 !important;
  margin: 0 !important;
  max-height: none !important;
  height: auto !important;
}

/* Если лого в .img-fluid — сделаем нормальный размер */
#header .logo .img-fluid{
  max-width: 100%;
  height: auto;
}

/* 2) text-light в шапке: реально белый (у тебя лого белым) */
#header .text-light,
#header .text-light *{
  color: #fff !important;
}

/* 3) "Перейти..." под названием журнала */
#header .logotitle{
  margin: 0 !important;
  line-height: 1.1;
}
#header .logotitle + p,
#header .logotitle + .mb-0,
#header .logo .col-9 a + a p{
  display:block !important;
  margin-top: 6px !important;
  margin-bottom: 0 !important;
  line-height: 1.25;
}

/* На всякий: убираем нежелательный "в ряд" */
#header .logo .col-9,
#header .logo .col-sm-9{
  display:flex;
  flex-direction: column;
  justify-content:center;
}

/* 4) Сброс высот hero (ты писал про 60vh и 100vh/880px) */
.hero-section.inner-page{
  height: auto !important;
  min-height: 0 !important;
}
.hero-section,
.hero-section > .container > .row{
  height: auto !important;
  min-height: 0 !important;
}



/* 6) Шрифт (без Inter), поддержка казахского/кириллицы */
body{
  font-family: "Manrope","Roboto","Noto Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif !important;
}
.journal-currentx .image {
	position: relative;
}
.journal-currentx .image .wrapx {

}
.journal-currentx .image .inx {
background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
left: 2.9%;
  top: 3%;
  width: 89%;
}
/* =========================
   MOBILE MENU MODAL (MDB)
   ========================= */

/* затемнение + лёгкий blur */
#exampleModal.modal .modal-backdrop,
#exampleModal.modal-backdrop { /* на случай разметки MDB */
  opacity: .65 !important;
}
#exampleModal.modal .modal-dialog{
  margin: 0 !important;
  height: 100%;
  display: flex;
  align-items: flex-end; /* снизу как "bottom sheet" */
}

/* сама карточка модалки */
#exampleModal .modal-content{
  border: 0 !important;
  border-radius: 22px 22px 0 0 !important;
  overflow: hidden;
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 -18px 60px rgba(0,0,0,.22);
  width: 100%;
}

/* шапка: компактно, с “ручкой” */
#exampleModal .modal-header{
  border: 0 !important;
  padding: 14px 16px 10px !important;
  position: relative;
}
#exampleModal .modal-header::before{
  content:"";
  width: 44px;
  height: 5px;
  border-radius: 999px;
  background: rgba(0,0,0,.18);
  position: absolute;
  left: 50%;
  top: 8px;
  transform: translateX(-50%);
}

/* крестик — аккуратнее */
#exampleModal .btn-close{
  opacity: .85;
  transform: scale(1.05);
}
#exampleModal .btn-close:focus{
  box-shadow: 0 0 0 4px rgba(23,56,103,.18) !important;
}

/* body: скролл внутри */
#exampleModal .modal-body{
  padding: 12px 16px 16px !important;
  max-height: calc(100vh - 120px);
  overflow: auto;
}

/* разделители */
#exampleModal hr{
  margin: 12px 0 !important;
  opacity: .12;
}

/* ====== PRIMARY NAV list ====== */
#exampleModal ul._pkp_navigation_primary{
  padding: 0 !important;
  margin: 0 !important;
}
#exampleModal ul._pkp_navigation_primary > li.nav-item{
  margin: 0 0 10px 0;
}

/* верхний уровень: как кнопки */
#exampleModal ul._pkp_navigation_primary > li .dropdown > a.nav-link{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px !important;
  border-radius: 16px !important;
  background: rgba(23,56,103,.06);
  border: 1px solid rgba(23,56,103,.10);
  color: #173867 !important;
  font-weight: 700;
  letter-spacing: .2px;
}

/* убрать стандартную стрелку bootstrap/mdb, сделать свою */
#exampleModal ul._pkp_navigation_primary > li .dropdown > a.dropdown-toggle::after{
  display: none !important;
}
#exampleModal ul._pkp_navigation_primary > li .dropdown > a.nav-link::after{
  content: "▾";
  font-size: 14px;
  opacity: .7;
  margin-left: 10px;
  transform: translateY(-1px);
}

/* hover */
#exampleModal ul._pkp_navigation_primary > li .dropdown > a.nav-link:hover{
  background: rgba(23,56,103,.09);
  border-color: rgba(23,56,103,.16);
}

/* ====== dropdown menu inside modal: НЕ “вылетающее” меню, а аккуратный блок ====== */
#exampleModal .dropdown-menu{
  position: static !important;       /* важно: внутри bottom-sheet */
  float: none !important;
  transform: none !important;
  width: 100%;
  margin-top: 8px !important;
  padding: 10px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  background: rgba(255,255,255,.88) !important;
  box-shadow: 0 14px 36px rgba(0,0,0,.10);
}

/* элементы dropdown */
#exampleModal .dropdown-item{
  border-radius: 12px;
  padding: 10px 12px !important;
  font-weight: 600;
  color: #1c2f45;
}
#exampleModal .dropdown-item:hover,
#exampleModal .dropdown-item:focus{
  background: rgba(23,56,103,.08) !important;
  color: #173867 !important;
}

/* ====== SECOND BLOCK (language + search + user) ====== */
#exampleModal .navbar-nav.d-block > li,
#exampleModal ul._pkp_navigation_user.d-block > li{
  margin-bottom: 10px;
}

/* “Язык” и “Найти” как аккуратные кнопки */
#exampleModal .navbar-nav.d-block .nav-link{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px !important;
  border-radius: 16px !important;
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.06);
  color: #1c2f45 !important;
  font-weight: 700;
}
#exampleModal .navbar-nav.d-block .nav-link:hover{
  background: rgba(0,0,0,.06);
}

/* user dropdown (chaikaolga + счётчик) */
#exampleModal #_navigationUser > li.profile > .dropdown > a.nav-link{
  background: rgba(45,113,161,.10);
  border-color: rgba(45,113,161,.18);
  color: #173867 !important;
}

/* task_count — бейдж */
#exampleModal .task_count{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  margin-left: 10px;
  font-size: 12px;
  font-weight: 800;
  background: rgba(23,56,103,.12);
  color: #173867;
}

/* footer можно скрыть если пустой */
#exampleModal .modal-footer{
  display: none !important;
}

/* чуть комфортнее на очень маленьких экранах */
@media (max-width: 360px){
  #exampleModal .modal-body{ padding: 10px 12px 14px !important; }
  #exampleModal .dropdown-menu{ padding: 8px !important; }
}
/* =========================
   FEEDBACK BUTTON FIX
   ========================= */

/* 1) Кнопка менее навязчивая + современный вид */
#feedbackButton{
  left: 16px !important;
  bottom: 16px !important;
  padding: 10px 14px !important;
  border-radius: 999px !important;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .2px;
  background: rgba(23,56,103,.92) !important;   /* под твою палитру */
  border: 1px solid rgba(255,255,255,.22) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
  z-index: 900 !important; /* ниже любых модалок */
  max-width: 78vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* можно отключить пульсацию или сделать спокойнее */
#feedbackButton{
  animation: pulse 3.2s infinite !important;
}
@keyframes pulse {
  0%   { transform: scale(1);   box-shadow: 0 10px 28px rgba(0,0,0,.18), 0 0 0 0 rgba(23,56,103,.25); }
  60%  { transform: scale(1.02);box-shadow: 0 10px 28px rgba(0,0,0,.18), 0 0 0 10px rgba(23,56,103,0); }
  100% { transform: scale(1);   box-shadow: 0 10px 28px rgba(0,0,0,.18), 0 0 0 0 rgba(23,56,103,0); }
}

/* 2) Когда открыто меню (MDB modal), прячем кнопку */
body.modal-open #feedbackButton{
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(10px);
}

/* 3) На очень маленьких экранах можно прижать/уменьшить */
@media (max-width: 420px){
  #feedbackButton{
    font-size: 12px;
    padding: 9px 12px !important;
    max-width: 72vw;
  }
}

/* 4) z-index для твоей кастомной feedback модалки (если она поверх всего нужна) */
#feedbackmodal{
  z-index: 1200 !important; /* выше кнопки */
}
#feedbackmodal .modal-content{
  border-radius: 16px !important;
  box-shadow: 0 18px 60px rgba(0,0,0,.25);
}
/* ONLY .details — no background at all */
.journal-currentx .details{
  padding: 14px 0 0;
  margin-top: 10px;

  background: transparent !important;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;

  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* лёгкий современный акцент (без фона): верхняя линия */
.journal-currentx .details::before{
  content: "";
  display: block;
  height: 1px;
  width: 100%;
  background: rgba(0,0,0,.10);
  margin-bottom: 10px;
}

/* заголовок */
.journal-currentx .details .titlex{
  margin: 0;
  font-weight: 800;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: .2px;
  color: #173867;
}

/* подзаголовок */
.journal-currentx .details .datex{
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
  color: rgba(0,0,0,.62);
}

/* кнопка */
.journal-currentx .details .btn{
  margin-top: 6px;
  align-self: flex-start;

  border-radius: 12px;
  padding: 10px 12px;

  font-weight: 800;
  font-size: 13px;
  letter-spacing: .2px;

  border: 1px solid rgba(23,56,103,.25);
  background: transparent;
  color: #173867;

  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

@media (hover:hover){
  .journal-currentx .details .btn:not(.disabled):not([aria-disabled="true"]):hover{
    transform: translateY(-1px);
    background: rgba(23,56,103,.06);
    box-shadow: 0 10px 22px rgba(0,0,0,.12);
  }
}

/* disabled */
.journal-currentx .details .btn.disabled,
.journal-currentx .details .btn:disabled,
.journal-currentx .details .btn[aria-disabled="true"]{
  background: transparent !important;
  border-color: rgba(0,0,0,.12) !important;
  color: rgba(0,0,0,.45) !important;
  box-shadow: none !important;
  opacity: 1 !important;
  cursor: not-allowed;
}

@media (max-width: 576px){
  .journal-currentx .details{
    padding-top: 12px;
  }
  .journal-currentx .details .titlex{ font-size: 15px; }
  .journal-currentx .details .datex{ font-size: 12.5px; }
}

/* ===== ISSN block (right side in header) ===== */
.issn-block{
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;

  padding: 10px 12px !important;
  margin: 0 !important;

  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.22);
  box-shadow: 0 12px 26px rgba(0,0,0,.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.issn-block > li{
  display: inline-flex !important;
  align-items: center;

  padding: 6px 10px;
  border-radius: 999px;

  font-size: 12px;
  font-weight: 700;
  letter-spacing: .25px;
  line-height: 1;

  color: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.20);
  background: rgba(255,255,255,.08);
}

/* разделитель между чипами */
.issn-block > li + li{
  margin-left: 0 !important;
}

/* мобильная адаптация */
@media (max-width: 992px){
  .issn-block{
    justify-content: flex-start;
    width: fit-content;
    max-width: 100%;
    margin-top: 10px !important;
  }
}

@media (max-width: 576px){
  .issn-block{
    padding: 8px 10px !important;
    gap: 6px;
    border-radius: 12px;
  }
  .issn-block > li{
    font-size: 11px;
    padding: 6px 9px;
  }
}
footer .footer-text{
  font-size:.95rem;
  line-height:1.6;
  color:rgba(0,0,0,.72);
}

footer .footer-links li{ margin:8px 0; }
footer .footer-meta li{ margin:7px 0; font-size:.92rem; color:rgba(0,0,0,.72); }

footer .footer-label{
  display:inline-block;
  min-width:110px;
  color:rgba(0,0,0,.55);
}

footer .footer-link{
  color:rgba(0,0,0,.78);
  text-decoration:none;
  transition:.2s ease;
}

footer .footer-link:hover{
  color:#173867;
  text-decoration:underline;
}

/* Buttons inside footer */
footer .footer-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

footer .footer-btn{
  background:#173867;
  color:#fff!important;
  border:1px solid #173867;
  border-radius:10px;
  padding:8px 12px;
  font-weight:600;
  text-decoration:none;
  transition:.2s ease;
}

footer .footer-btn:hover{
  transform:translateY(-1px);
  filter:brightness(1.05);
  color:#fff!important;
}

footer .footer-btn.footer-btn-outline{
  background:transparent;
  color:#173867!important;
}

footer .footer-btn.footer-btn-outline:hover{
  background:#173867;
  color:#fff!important;
}
/* ===== Announcements marquee (slick) ===== */
.annocx{
  --ann-bg: rgba(255,255,255,.70);
  --ann-brd: rgba(255,255,255,.45);
  --ann-shadow: 0 14px 40px rgba(0,0,0,.14);
  --ann-text: rgba(0,0,0,.85);
  --ann-accent: #173867;

  position: relative;
  z-index: 1;
}

.annocx .marquee{
  position: relative;
  background: var(--ann-bg);
  border: 1px solid var(--ann-brd);
  box-shadow: var(--ann-shadow);
  overflow: hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* subtle gradient lines on sides for “premium” look */
.annocx .marquee::before,
.annocx .marquee::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}

.annocx .marquee::before{
  left:0;
  background: linear-gradient(90deg, rgba(242,239,239,1) 0%, rgba(242,239,239,.0) 100%);
}

.annocx .marquee::after{
  right:0;
  background: linear-gradient(270deg, rgba(242,239,239,1) 0%, rgba(242,239,239,.0) 100%);
}

/* slick spacing */
.annocx .slick-list{ padding: 6px 0; }
.annocx .slick-track{ display:flex; align-items:center; }
.annocx .slick-slide{ height:auto; }

/* item card */
.annocx .slick-slide .inner{
  padding: 6px 10px;
}

.annocx .slick-slide .inner a{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 10px 14px;
  border-radius: 14px;

  color: var(--ann-text);
  text-decoration: none;
  font-weight: 650;
  letter-spacing: .2px;

  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.55);
  transition: .2s ease;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);

  /* text overflow nice */
  max-width: 520px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* icon bubble */
.annocx .slick-slide .inner a::before{
  content: "📣";
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(23,56,103,.10);
  border: 1px solid rgba(23,56,103,.18);
  flex: 0 0 auto;
}

/* hover */
.annocx .slick-slide .inner a:hover{
  transform: translateY(-1px);
  border-color: rgba(23,56,103,.28);
  background: rgba(255,255,255,.78);
  color: var(--ann-accent);
}

/* focus accessibility */
.annocx .slick-slide .inner a:focus-visible{
  outline: 3px solid rgba(23,56,103,.35);
  outline-offset: 3px;
}

/* smaller screens */
@media (max-width: 576px){
  .annocx .slick-slide .inner a{
    max-width: 86vw;
    padding: 10px 12px;
    border-radius: 14px;
  }
  .annocx .marquee::before,
  .annocx .marquee::after{
    width: 56px;
  }
}

/* If you use dark header on top of image — optional: make it pop */
header#header .annocx .marquee{
  background: rgba(255,255,255,.62);
  border-color: rgba(255,255,255,.40);
}
.obj_announcement_full > h1, .page_information > h1 {
	display: none;
}