/* ==== THEME ==== */
:root[data-theme="light"]{
  --bg:#ffffff; --fg:#0b0c0e; --muted:#0000004d;
  --card:#ffffff; --line:#e7e9ef; --accent:#0033FF;
  --chip:#eef2ff; --chipfg:#26316b;
  --lb-bg:#fff; --lb-x:#111; /* фон/иконка в зуме */
  --btn-hover: rgba(0, 0, 0, 0.05);
  --btn-hover-opaque: #f2f2f2; 
}
:root[data-theme="dark"]{
  --bg:#000; --fg:#e9ecf1; --muted:#ffffff4d;
  --card:#0e1117; --line:#1b1f2a; --accent:#0033FF;
  --chip:#1b2233; --chipfg:#c9d1d9;
  --lb-bg:#000; --lb-x:#fff;
  --btn-hover: rgba(255, 255, 255, 0.1);
  --btn-hover-opaque: #191919;
}

@media (min-width:801px){
  /* Десктоп: фиксация кнопки Everywhere на прокрутке при активном фильтре */
  header .header-actions .action-btn.everywhere.desk-sticky-fixed{
    position: fixed; top: 12px; right: var(--page-pad-x); z-index: 102;
    opacity: 1 !important;
  }
  header .header-actions .action-btn.everywhere.desk-sticky-fixed.is-filtered{
    box-shadow: 0 0 0 2px var(--bg);
  }
}

/* ==== BASE ==== */
*{box-sizing:border-box}
html,body{min-height:100dvh;}
/* Красим и html и body, чтобы фон всегда перекрашивался при смене темы */
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--fg);
  font-family:"Onest", system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif;font-weight:500;}
*{touch-action: manipulation;-ms-touch-action: manipulation;-webkit-tap-highlight-color: transparent;-webkit-touch-callout: none;}

/* ==== POPUP BACKGROUND HIDING (для iOS) ==== */
/* При открытии любого попапа скрываем все содержимое страницы */
body.popup-open header,
body.popup-open main,
body.popup-open footer,
body.popup-open .mobile-actions {
  opacity: 0 !important;
  transition: opacity .2s ease;
}

/* Блокировка скролла при открытии полных экранных попапов (geo, year) */
body.fullscreen-popup-open {
  overflow: hidden !important;
  position: fixed;
  width: 100%;
  height: 100%;
}

/* Быстрое появление при закрытии zoom-попапа */
body.popup-closing header,
body.popup-closing main,
body.popup-closing footer,
body.popup-closing .mobile-actions {
  opacity: 1 !important;
  transition: opacity .1s ease;
}


/* Контейнерные горизонтальные отступы и вертикальный над шапкой */
:root{ --page-pad-x:12px; --header-top-gap:12px; }
@media (min-width:801px){ :root{ --page-pad-x:48px; --header-top-gap:48px; } }

/* ==== HEADER ==== */
header{
  position:relative;
  display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center;
  padding:var(--header-top-gap) var(--page-pad-x) 0;
  background:var(--bg);
  z-index: 101;
  overflow: visible;
  opacity:0; 
  animation: headerFadeIn .3s ease forwards;
}
h1{margin:0 0 0 12px;font-size:18px; font-weight: 500;}
#toc{display:none}

/* Раскладка: кнопка меню слева, действия — справа */
header .menu-toggle{ grid-column: 1; }
header .header-actions{ grid-column: 3; justify-self: end; }

/* Группа кнопок действий в шапке */
.header-actions{ display:inline-flex; align-items:center; gap:8px; }

/* Общий стиль кнопок действий */
.action-btn{
  appearance:none; border:0; background:var(--bg); color:var(--fg);
  display:inline-flex; align-items:center; justify-content:center;
  height:36px; padding:0 12px; border-radius:9999px;
  font: inherit; font-size:18px; line-height:24px; text-decoration:none; cursor:pointer;
}
.action-btn:hover,
.action-btn:focus-visible{ background: var(--btn-hover); outline:0; }
.action-btn .icon{ display:inline-block; }
.action-btn .label{ margin-left:8px; font-size:18px; line-height:24px; }

/* Тема: иконка переключателя темы */
.switch-icon{ background-image: url('assets/switch.svg'); filter:none; width:20px; height:20px;}
:root[data-theme="dark"] .switch-icon{ transform: scaleY(-1); filter: invert(1); }
/* В лайтбоксе — muted-цвет и svg как mask для свитчера тоже */
.zb-actions .switch-icon{
  background-image: none;
  -webkit-mask-image: url('assets/switch.svg');
  mask-image: url('assets/switch.svg');
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  background-color: var(--muted);
  filter: none !important;
}

/* Menu Icon */
.icon-menu{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  position: relative;
}
.menu-icon-img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
}
.menu-icon-img.active{
  opacity: 1;
}
/* Инверсия цвета иконки меню в темной теме */
:root[data-theme="dark"] .menu-icon-img{
  filter: invert(1);
}

/* Instagram */
.icon-instagram{
  -webkit-mask-image: url('assets/instagram.svg');
  mask-image: url('assets/instagram.svg');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: var(--fg);
  width:20px; height:20px;
}

/* Everywhere */
.icon-earth{
  -webkit-mask-image: url('assets/earth.svg');
  mask-image: url('assets/earth.svg');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: var(--fg);
  width:20px; height:20px;
}
.icon-caret{
  -webkit-mask-image: url('assets/dropdown-arrow.svg');
  mask-image: url('assets/dropdown-arrow.svg');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: var(--fg);
  width:24px; height:24px;
  margin-left: 4px;
}
.action-btn.everywhere{ padding-left:8px; padding-right:8px; }
/* Фильтр активен: инвертируем цвета кнопки и иконок, и заменяем стрелку на clear */
.action-btn.everywhere.is-filtered{ background: var(--fg); color: var(--bg); }
.action-btn.everywhere.is-filtered .icon{ background-color: var(--bg); }
.action-btn.everywhere.is-filtered:hover,
.action-btn.everywhere.is-filtered:focus-visible{ background: var(--fg); }
.action-btn.everywhere.is-filtered .icon-caret{
  -webkit-mask-image: url('assets/clear.svg');
  mask-image: url('assets/clear.svg');
  width:24px; height:24px;
}
/* В тёмной теме — белая кнопка, чёрный текст/иконки */
:root[data-theme="dark"] .action-btn.everywhere.is-filtered{ background:#fff; color:#000; }
:root[data-theme="dark"] .action-btn.everywhere.is-filtered .icon{ background-color:#000; }
:root[data-theme="dark"] .action-btn.everywhere.is-filtered:hover,
:root[data-theme="dark"] .action-btn.everywhere.is-filtered:focus-visible{ background:#fff; }

/* ==== NAVIGATION MENU ==== */
.nav-menu{
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg);
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, -10px, 0);
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: -1;
  pointer-events: none;
  grid-column: 1 / -1;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translate3d(0, -10px, 0);
}
.nav-menu.show{
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  pointer-events: auto;
}
.nav-menu-content{
  padding: 8px 28px 20px 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}
/* Градиент снизу меню */
.nav-menu::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 300px;
  background: linear-gradient(to bottom, var(--bg), transparent);
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
}
.nav-menu .nav-item{
  height: 36px;
  padding: 0 12px;
  background: transparent;
  justify-content: flex-start;
  text-decoration: none;
  width: fit-content;
  opacity: 0;
}
.nav-menu.show .nav-item{
  animation: fadeInRow 0.3s ease-out forwards;
  animation-delay: 0.15s;
}
.nav-menu.show .nav-item:nth-child(2){
  animation-delay: 0.2s;
}
.nav-menu .nav-item:hover,
.nav-menu .nav-item:focus-visible{
  background: var(--btn-hover);
}
.nav-item .label{
  margin-left: 0;
}
/* Выбранный пункт меню (стиль как в year-popup) */
.nav-menu .nav-item.current{
  background: var(--fg);
  color: var(--bg);
  font-weight: 500;
}
.nav-menu .nav-item.current:hover,
.nav-menu .nav-item.current:focus-visible{
  background: var(--fg);
}
:root[data-theme="dark"] .nav-menu .nav-item.current{
  background: #fff;
  color: #000;
}
:root[data-theme="dark"] .nav-menu .nav-item.current:hover,
:root[data-theme="dark"] .nav-menu .nav-item.current:focus-visible{
  background: #fff;
}

/* ==== CONTENT ==== */
main{
  min-height:50vh;
  opacity:0; 
  animation: headerFadeIn .3s ease forwards; 
  animation-delay: 0.3s;
}
section{padding:24px calc(var(--page-pad-x) + 8px) 24px}
section h2{margin:0px;font-size:60px;font-weight:700;line-height:1; }
.year-title-btn{
  color:var(--fg);
  font-size:60px; font-weight:700; line-height:0.8;
  text-decoration:none; cursor:pointer; padding:0; margin:0;
  border-bottom: 1px solid transparent;
  position: relative; z-index: 1;
  display: inline-block;
  height: 50px;
  overflow: hidden;
  vertical-align: top;
}
.year-title-btn:hover,
.year-title-btn:focus-visible{ 
  border-bottom: 1px solid var(--fg);
}
@media (min-width:801px){
  .year-title-btn{ font-size: 70px; height: 60px;}
}
/* Группа заголовка года и описания */
.year-head{ 
  display:block; 
  margin-bottom:12px; 
  position: relative; 
  opacity: 0;
  animation: fadeInHeader 0.5s ease-out forwards;
}
/* мета по году: список стран и городов */
.year-meta{ 
  margin:10px 0 0; color:var(--fg); font-size:16px; line-height:20px; 
  position: relative; z-index: 10; pointer-events: auto;
}
.year-meta .cities{ color: var(--muted); }
/* muted запятая между блоками */
.year-meta .sep{ color: var(--muted); }
/* Ховер/фокус по странам и городам под годами */
.year-meta .ym-item{ cursor: pointer; text-decoration: none; border-bottom: 1px solid transparent; }
.year-meta .ym-item:hover,
.year-meta .ym-item:focus-visible{ color: var(--fg); border-bottom-color: currentColor; outline: 0; }
/* Уточнение отступа вниз: при наличии year-meta */
.year-head:has(.year-meta){ margin-bottom:20px; }
/* Десктоп ≥801px: секции и отступы заголовка */
@media (min-width:801px){
  section{padding:50px calc(var(--page-pad-x) + 12px) 0}
  .year-head{ margin-bottom:20px; }
  .year-head:has(.year-meta){ margin-bottom:36px; }
  section h2 { font-size: 70px; }
  .year-meta{ font-size:18px; line-height:24px;}
}

/* ==== Masonry (absolute; без дыр) ==== */
.masonry{
  --gap:4px;
  --col-min:280px;
  position:relative; width:100%; height:0;
}
@media (max-width:1100px){ .masonry{ --col-min:200px } }
@media (max-width:800px){  .masonry{ --col-min:150px } }
@media (max-width:560px){  .masonry{ --col-min:100px } }
@media (min-width: 801px){ .masonry{ --gap:12px; } }

.card{
  position:absolute; margin:0; border:0; border-radius:0;
  opacity:0; transform:translateY(8px);
  transition:opacity .5s ease, transform .5s ease;
  cursor: zoom-in;
}
.card.show{opacity:1; transform:none; text-decoration:none;}

/* превью + эффект нажатия */
.card .thumb{
  display:block; width:100%; height:auto; object-fit:contain;
  transition: transform .1s ease;
  will-change: transform;
}
/* убран эффект «зажата» */
.card:active .thumb,
.card.pressed .thumb{ transform: none; }

.caption{margin:0;padding-top:4px;color:var(--muted);font-size:13px;line-height:1}
/* Подписи в ленте отключаем */
.masonry .caption{ display:none; }

/* ==== In-place ZOOM (плавный, полностью непрозрачный фон) ==== */
#zoombox{
  position:fixed; inset:0; z-index:9999; min-height:100dvh;
  pointer-events:none; visibility:hidden;
  isolation:isolate;                 /* исключаем любые бленды с фоном страницы */
}
/* ФОН через псевдоэлемент: на пике он сплошной (не rgba<1), а анимируем только opacity */
#zoombox::before{
  content:""; position:fixed; inset:0; z-index:0;
  background:var(--lb-bg);           /* чисто белый/чёрный */
  opacity:0;                         /* старт: прозрачен */
  transition:opacity .2s ease;       /* плавное появление/исчезание фона */
}
#zoombox.show,
#zoombox.closing{
  pointer-events:auto; visibility:visible;
}
#zoombox{
  /* предотвращаем скролл‑сквозь на некоторых мобильных браузерах */
  overscroll-behavior: contain;
}
#zoombox.show::before{ opacity:1; }   /* полностью непрозрачно */
#zoombox.closing::before{ opacity:0; }/* плавное скрытие */

/* старый .zb-backdrop можно оставить в DOM, но он не используется */
.zb-backdrop{ display:none; }

/* скрыть крестик в лайтбоксе */
#zb-close{ display:none; }

/* Панель действий в правом верхнем углу лайтбокса */
.zb-actions{
  position: fixed; top: 12px; right: 12px; z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
  opacity: 1;
  transition: opacity 1s ease;
  cursor: pointer;
}
.zb-actions .action-btn{
  padding: 0; width: 36px; height: 36px;
}
.zb-actions .action-btn.is-hidden{ display:none; }

/* Подпись под фото в лайтбоксе */
.zb-caption{
  position: fixed; left: 0; right: 0; z-index: 2;
  color: var(--muted);
  font-size: 18px; line-height: 24px;
  text-align: center;
  opacity: 1; transition: opacity 1s ease;
  pointer-events: none;
}
#zoombox.is-idle .zb-caption{ opacity: 0; }
#zoombox.closing .zb-caption{ opacity: 0; transition: opacity .1s ease; }
/* Иконки панели действий */
.icon-fullscreen,
.icon-download,
.icon-prev,
.icon-next,
.icon-close{
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  background-color: var(--muted);
  width: 20px; height: 20px; display:inline-block;
}
.icon-fullscreen{ -webkit-mask-image: url('assets/fullscreen.svg'); mask-image: url('assets/fullscreen.svg'); }
.icon-download{ -webkit-mask-image: url('assets/download.svg'); mask-image: url('assets/download.svg'); }
.icon-prev{ -webkit-mask-image: url('assets/prev.svg'); mask-image: url('assets/prev.svg'); }
.icon-next{ -webkit-mask-image: url('assets/next.svg'); mask-image: url('assets/next.svg'); }
.icon-close{ -webkit-mask-image: url('assets/close.svg'); mask-image: url('assets/close.svg'); }

/* При активном fullscreen меняем иконку на fullscreen-off */
.action-btn[aria-pressed="true"] .icon.icon-fullscreen{
  -webkit-mask-image: url('assets/fullscreen-off.svg');
  mask-image: url('assets/fullscreen-off.svg');
}

/* На ховере — иконки обычного цвета (var(--fg)) */
.zb-actions .action-btn:hover .icon,
.zb-actions .action-btn:focus-visible .icon{
  background-color: var(--fg);
}

/* Скрытие панели при бездействии */
#zoombox.is-idle .zb-actions{ opacity: 0; }
/* Прячем курсор, когда панель скрыта */
#zoombox.is-idle{ cursor: none !important; }
#zoombox.is-idle .zb-img{ cursor: none !important; }
#zoombox.is-idle .zb-actions{ opacity: 0; }

/* Быстрый фейдаут (0.1s) при закрытии лайтбокса */
#zoombox.closing .zb-actions{ opacity: 0; transition: opacity .1s ease; }

.zb-img{
  position:fixed; left:0; top:0; width:0; height:0; z-index:1;
  transition: left .28s ease, top .28s ease, width .28s ease, height .28s ease, opacity .2s ease;
  will-change: left, top, width, height, opacity;
  object-fit: contain;
}
/* Анимация "отскока" при достижении первой/последней фотографии */
@keyframes bounce-left {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(20px); }
  75% { transform: translateX(-5px); }
}
@keyframes bounce-right {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-20px); }
  75% { transform: translateX(5px); }
}
.zb-img.bounce-left {
  animation: bounce-left 0.4s ease-out;
}
.zb-img.bounce-right {
  animation: bounce-right 0.4s ease-out;
}
/* Превью «кусочка» предыдущего/следующего изображения при ховере */
/* «Пики» отключены */
.zb-peek{ display:none; }

/* Запрещаем выделение и перетаскивание в лайтбоксе */
#zoombox, #zoombox .zb-img{
  -webkit-user-drag: none;
  user-select: none;
}

/* курсор: на фото — лупа с минусом; остальное управляется JS */
#zoombox .zb-img{ cursor: zoom-out; }

/* Вспомогательное */
.loading{opacity:.7;padding:20px}
footer{opacity:.8;color:var(--muted);}
footer{padding:30px calc(var(--page-pad-x) + 12px);}
.sentinel{height:1px}

/* Плавное появление шапки при загрузке страницы */
@keyframes headerFadeIn{ 
  from{ opacity: 0; } 
  to{ opacity: 1; } 
}

/* Плавное появление футера с задержкой 1с, чтобы не мерцал на старте */
@keyframes footerFadeIn{ to{ opacity:.8; } }
footer{ opacity:0; animation: footerFadeIn .3s ease forwards; animation-delay: 1s; }

/* Анимация появления строк в попапах */
@keyframes fadeInRow{ 
  from{ opacity: 0; transform: scale(0.9); } 
  to{ opacity: 1; transform: scale(1.0); } 
}

/* Анимация появления заголовков и описаний */
@keyframes fadeInHeader{ 
  from{ opacity: 0; } 
  to{ opacity: 1; } 
}

/* ==== Download popup (inside zoom) ==== */
#dl-popup{
  position: fixed; inset: 0; z-index: 100000; display: flex;
  align-items: center; justify-content: center;
  pointer-events: none; visibility: hidden;
}
#dl-popup.show{ pointer-events: auto; visibility: visible; }
#dl-popup::before{
  content:""; position: absolute; inset: 0; background: var(--lb-bg);
  opacity: 0; transition: opacity .15s ease;
}
#dl-popup.show::before{ opacity: .80; }
#dl-popup .dl-inner{
  position: relative; z-index: 1; width: 316px;
  background: var(--bg); color: var(--fg);
  border-radius: 28px; box-shadow: 0 0 0 2px var(--fg);
  padding: 28px 12px 12px; text-align: center;
  opacity: 0; transform: scale(.90);
  transition: opacity .10s ease-out, transform .10s ease-out;
}
#dl-popup.show .dl-inner{ opacity: 1; transform: scale(1); }
#dl-popup .dl-close{ position:absolute; right:12px; top:12px; padding:0; width:36px; height:36px; }
#dl-popup .dl-avatar{ display:flex; align-items:center; justify-content:center; }
#dl-popup .dl-avatar img{ width: 260px; height: auto; border-radius: 50% / 35%; object-fit: cover; }
#dl-popup .dl-title{ margin-top:24px; font-size:20px; line-height:24px; font-weight:700; }
#dl-popup .dl-mail{ margin-bottom: 16px; font-size:18px; line-height:24px; display:inline-block; color: var(--fg); text-decoration: underline; }

#dl-popup .dl-btn{
  display:block;
  height: 60px;
  margin:12px 0 0;
  padding: 9px 16px;
  border-radius:16px;
  font-size:18px; line-height:24px;
  text-decoration:none;
  cursor:pointer; }
#dl-popup .dl-ask{ background: var(--btn-hover-opaque); color: var(--fg); }
#dl-popup .dl-download{ background: var(--fg); color: var(--bg); }
#dl-popup .dl-meta{ opacity:.40; font-size:13px; line-height:16px; margin-top:2px; }


/* Hidden by default; shown only on mobile breakpoint */
.mobile-actions{ 
  display:none; 
  opacity:0; 
  animation: headerFadeIn .3s ease forwards;
}

/* ==== MOBILE ≤800px: header buttons layout ==== */
@media (max-width:800px){
  /* Шапка остаётся в одну строку: заголовок слева, две иконки справа */
  header{ grid-template-columns: auto 1fr auto; grid-template-rows: auto; gap:10px; }
  .header-actions{ display:inline-flex; align-items:center; gap:4px; }

  /* Instagram and theme: icon-only 36x36 */
  .header-actions .action-btn.instagram .label,
  .header-actions .action-btn.theme-toggle .label{ display:none; }
  .header-actions .action-btn.instagram,
  .header-actions .action-btn.theme-toggle{ padding:0; width:36px; height:36px; }
  /* Hide third in header; show separate full-width below header */
  .header-actions .action-btn.everywhere{ display:none; }
  .mobile-actions{ display:block; padding: 20px 12px 4px 12px; }
  .mobile-actions .action-btn.everywhere{
    width: 100%;
    height: 60px;
    padding: 0 18px 0 20px;
    background: var(--btn-hover-opaque);
    justify-content: flex-start;
  }

  /* Перекрываем фон для is-filtered в мобильной панели с учётом темы */
  :root[data-theme="light"] .mobile-actions .action-btn.everywhere.is-filtered{
    background: var(--fg);
    color: var(--bg);
  }
  :root[data-theme="light"] .mobile-actions .action-btn.everywhere.is-filtered .icon{ background-color: var(--bg); }
  :root[data-theme="light"] .mobile-actions .action-btn.everywhere.is-filtered:hover,
  :root[data-theme="light"] .mobile-actions .action-btn.everywhere.is-filtered:focus-visible{ background: var(--fg); }

  :root[data-theme="dark"] .mobile-actions .action-btn.everywhere.is-filtered{ background:#fff; color:#000; }
  :root[data-theme="dark"] .mobile-actions .action-btn.everywhere.is-filtered .icon{ background-color:#000; }
  :root[data-theme="dark"] .mobile-actions .action-btn.everywhere.is-filtered:hover,
  :root[data-theme="dark"] .mobile-actions .action-btn.everywhere.is-filtered:focus-visible{ background:#fff; }
  .mobile-actions .action-btn.everywhere .icon{ margin-right:8px; }
  .mobile-actions .action-btn.everywhere .icon-caret{ margin-left:auto; margin-right:0; }

  /* Sticky поведение для мобильной панели фильтра при активном фильтре */
  .ma-sentinel{ height:12px; }
  .mobile-actions.ma-sticky{ position: sticky; top: calc(12px - var(--ma-btn-offset, 20px)); z-index: 100; }
  /* Белый оверлей за кнопкой, но над остальным контентом — только когда панель прилипла */
  .mobile-actions.is-stuck::before{
    content: ""; position: fixed; left: 0; right: 0; top: 0;
    height: var(--ma-overlay-h, 42px);
    background: var(--bg); pointer-events: none; z-index: -1;
  }
  /* Белая двухпиксельная обводка у кнопки в состоянии sticky+filtered */
  .mobile-actions.is-stuck .action-btn.everywhere.is-filtered{
    box-shadow: 0 0 0 2px var(--bg);
  }
}

/* ==== GEO POPUP (fullscreen) ==== */
#geo-popup{
  position: fixed; inset: 0; z-index: 9998;
  display: none; overflow: auto;
  background: var(--bg); color: var(--fg);
  /* Исправление скролла на iPhone */
  touch-action: pan-y;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
#geo-popup.show{ 
  display: block; 
  pointer-events: auto;
}
.geo-inner{ 
  padding: var(--header-top-gap) var(--page-pad-x) 40px; 
  position: relative; 
  pointer-events: auto;
  z-index: 1;
}

.geo-close{
  position: fixed; top: 12px; right: 12px;
  padding: 0; width:36px; height:36px;
  z-index: 9999;
}
.geo-close-icon{
  -webkit-mask-image: url('assets/close.svg');
  mask-image: url('assets/close.svg');
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  background-color: var(--fg);
  width:20px; height:20px; display:inline-block;
}

.geo-grid{
  display: grid; grid-template-columns: auto 1fr; align-items: start;
  gap: 8px;
  pointer-events: auto;
  position: relative;
  z-index: 1;
}
.geo-row{ 
  display: contents; 
}
.geo-country{ 
  grid-column: 1; 
  display: inline-block;
  width: fit-content;
}
.geo-cities{ 
  grid-column: 2; 
  display:flex; 
  flex-wrap: wrap; 
  gap:8px; 
  flex-direction: column; 
  align-items: flex-start; 
  width: fit-content;
}
.geo-country .action-btn, .geo-cities .action-btn{ 
  height:36px; padding:0 12px; 
  pointer-events: auto;
  position: relative;
  z-index: 2;
  opacity: 0;
  animation: fadeInRow 0.3s ease-out forwards;
}

@media (max-width:800px){
  .geo-grid {font-size: 16px; line-height: 20px;}
}

/* ==== YEAR POPUP (fullscreen) ==== */
#year-popup{
  position: fixed; inset: 0; z-index: 9998;
  display: none; overflow: auto;
  background: var(--bg); color: var(--fg);
  /* Исправление скролла на iPhone */
  touch-action: pan-y;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
#year-popup.show{ 
  display: block; 
  pointer-events: auto;
}
.year-inner{ 
  padding: var(--header-top-gap) var(--page-pad-x) 40px; 
  position: relative; 
  pointer-events: auto;
  z-index: 1;
}

.year-close{
  position: fixed; top: 12px; right: 12px;
  padding: 0; width:36px; height:36px;
  z-index: 9999;
}
.year-close-icon{
  -webkit-mask-image: url('assets/close.svg');
  mask-image: url('assets/close.svg');
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  background-color: var(--fg);
  width:20px; height:20px; display:inline-block;
}

.year-list{
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: auto;
  position: relative;
  z-index: 1;
  align-items: flex-start;
}
.year-item{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: fit-content;
  opacity: 0;
  animation: fadeInRow 0.3s ease-out forwards;
}
.year-item .action-btn{
  height: 36px;
  padding: 0 12px;
  pointer-events: auto;
  position: relative;
  z-index: 2;
}
.year-item.current .action-btn{
  background: var(--fg);
  color: var(--bg);
  font-weight: 500;
}
/* В тёмной теме — белая кнопка, чёрный текст */
:root[data-theme="dark"] .year-item.current .action-btn{
  background: #fff;
  color: #000;
}

/* ==== SINGLE YEAR PANEL ==== */
.single-year-panel{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  background: var(--bg);
  border-bottom: 1px solid var(--fg);
  transform: translateY(-100%);
  transition: transform 0.3s ease;
  pointer-events: none;
}
.single-year-panel.show{
  transform: translateY(0);
  pointer-events: auto;
}
.single-year-content{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px calc(var(--page-pad-x) + 8px);
  max-width: 100%;
}
.single-year-text{
  color: var(--fg);
  font-size: 18px;
  line-height: 24px;
  flex: 1;
  margin-right: 12px;
}
.single-year-close{
  padding: 0;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  background: transparent;
  transition: background 0.2s ease;
}
.single-year-close:hover{
  background: var(--btn-hover);
}
.single-year-close-icon{
  -webkit-mask-image: url('assets/clear.svg');
  mask-image: url('assets/clear.svg');
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  background-color: var(--fg);
  width: 24px;
  height: 24px;
  display: inline-block;
}

/* Скейл при нажатии */
.header-actions .action-btn:active,
.zb-actions .action-btn:active,
#geo-close:active, #dl-close:active, #year-close:active
{scale: 0.9;transition: all 0.1s ease;}
.geo-inner .action-btn:active,
.year-inner .action-btn:active,
.nav-menu .nav-item:active,
header .menu-toggle:active
{scale: 0.95;transition: all 0.1s ease;}
@media (min-width: 800px){ 
  .header-actions .action-btn:active{ scale: 0.95 }
}

/* ==== Scrollbars (一致ные для сайта и попапов) ==== */
/* Firefox */
html, #geo-popup, #year-popup{ scrollbar-width: auto; scrollbar-color: var(--muted) var(--bg); }
/* WebKit-based (Chrome/Edge/Safari) */
html::-webkit-scrollbar,
#geo-popup::-webkit-scrollbar,
#year-popup::-webkit-scrollbar{ width:16px; height:12px; }
html::-webkit-scrollbar-track,
#geo-popup::-webkit-scrollbar-track,
#year-popup::-webkit-scrollbar-track{ background: var(--bg); }
html::-webkit-scrollbar-thumb,
#geo-popup::-webkit-scrollbar-thumb,
#year-popup::-webkit-scrollbar-thumb{
  background-color: var(--muted);
  border-radius: 9999px;
  border: 3px solid var(--bg);
}
html::-webkit-scrollbar-thumb:hover,
#geo-popup::-webkit-scrollbar-thumb:hover,
#year-popup::-webkit-scrollbar-thumb:hover{ background-color: var(--fg); }