/* Правая часть шапки (поиск, язык, вход) и окно входа. Логотип и навигация — прежние стили. */

.hx {
  --hx-text: #1b1a17;
  --hx-muted: #7a766e;
  --hx-glass: #ffffffa6;
  --hx-line: #1b1a1714;
  --hx-accent: #ff782e;
  --hx-ease: cubic-bezier(.16, 1, .3, 1);
  margin-left: auto; display: flex; align-items: center; gap: 10px;
  font-family: Inter, system-ui, sans-serif; color: var(--hx-text);
}
.hx svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Поиск-таблетка: расширяется при вводе */
.hx-search {
  position: relative; display: flex; align-items: center; gap: 8px;
  width: 280px; height: 44px; padding: 0 8px 0 14px; border-radius: 999px;
  background: var(--hx-glass); border: 1px solid var(--hx-line);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  transition: width .45s var(--hx-ease), background-color .2s, border-color .2s, box-shadow .2s;
}
.hx-search:hover { background: #ffffffd9; }
.hx-search:focus-within { width: 380px; background: #fff; border-color: #ff782e66; box-shadow: 0 0 0 4px #ff782e1a, 0 10px 30px -12px #0000002e; }
.hx-search__icon { width: 18px; height: 18px; flex: none; color: var(--hx-muted); }
.hx-search__field { flex: 1; min-width: 0; position: relative; }
.hx .hx-search__field input { width: 100%; height: 40px; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; outline: 0 !important; min-height: 0 !important; font: 450 14px/1 Inter, sans-serif; color: var(--hx-text); }
.hx .hx-search__field input::placeholder { color: var(--hx-muted); }
.hx .hx-search__field input::-webkit-search-cancel-button { display: none; }
.hx-search__field .suggest { top: calc(100% + 14px); left: -40px; right: -40px; min-width: 320px; border-radius: 16px; }

/* Таблетки и меню */
.hx-pop { position: relative; }
.hx-pop > summary { list-style: none; cursor: pointer; }
.hx-pop > summary::-webkit-details-marker { display: none; }
.hx-pill {
  display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px 0 8px; border-radius: 999px;
  background: var(--hx-glass); border: 1px solid var(--hx-line); font: 600 13px/1 Inter, sans-serif;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); transition: background-color .2s;
}
.hx-pill:hover, .hx-pop[open] > .hx-pill { background: #fff; }
.hx-lang > svg:first-child { width: 26px; height: 26px; border-radius: 50%; box-shadow: 0 0 0 1px #0000001a; }
.hx-caret { width: 16px; height: 16px; color: var(--hx-muted); transition: transform .3s var(--hx-ease); }
.hx-pop[open] .hx-caret { transform: rotate(180deg); }

.hx-menu {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 1100; min-width: 220px; padding: 6px;
  border-radius: 18px; background: #fffffff2; border: 1px solid var(--hx-line);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  box-shadow: 0 20px 50px -16px #00000040; display: flex; flex-direction: column;
  animation: hx-in .22s var(--hx-ease);
}
@keyframes hx-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
.hx-menu__name { margin: 6px 10px 8px; font-weight: 700; font-size: 15px; }
.hx .hx-menu a, .hx .hx-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: 12px;
  background: none; font: 500 14px/1.2 Inter, sans-serif; text-align: left; text-decoration: none !important; cursor: pointer;
}
body.service-site .hx .hx-menu a, body.service-site .hx .hx-menu button { color: var(--hx-text) !important; -webkit-text-fill-color: var(--hx-text) !important; }
.hx .hx-menu a:hover, .hx .hx-menu button:hover { background: #1b1a170d; }
.hx-menu form { margin: 0; }
.hx-lang img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px #0000001a; }

/* Меню языка: заголовок, список с флагами, «Сохранить» */
.hx .hx-langs { width: 260px; padding: 18px 18px 16px; gap: 0; border-radius: 20px; background: #fff; border: 0; box-shadow: 0 18px 48px -14px #0000003d, 0 2px 8px #0000000d; }
.hx-langs__title { margin: 0 0 10px; font: 700 17px/1.2 Inter, sans-serif; color: var(--hx-text); }
.hx-langs__list { display: flex; flex-direction: column; gap: 2px; margin: 0 -8px; }
.hx .hx-langs .hx-langs__item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 8px; border: 0; border-radius: 12px; background: none; font: 500 15px/1.2 Inter, sans-serif; cursor: pointer; text-align: left; }
.hx .hx-langs .hx-langs__item:hover { background: #1b1a170a; }
.hx-langs__item img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 1px #0000001a; }
.hx-langs__item span { padding-bottom: 1px; border-bottom: 1px solid transparent; }
body.service-site .hx .hx-langs .hx-langs__item[aria-checked=true] span { color: var(--hx-muted) !important; -webkit-text-fill-color: var(--hx-muted) !important; border-bottom-color: currentColor; }
.hx-langs__title--second { margin-top: 14px !important; padding-top: 14px; border-top: 1px solid #1b1a170f; }
.hx .hx-langs__list--currency .hx-langs__item { gap: 10px; }
.hx-langs__code { min-width: 38px; font: 650 14px/1 Inter, sans-serif; border-bottom: 1px solid transparent; padding-bottom: 1px; }
.hx-langs__item small { font: 400 13px/1.2 Inter, sans-serif; color: var(--hx-muted); }
body.service-site .hx .hx-langs .hx-langs__item[aria-checked=true] .hx-langs__code { color: var(--hx-muted) !important; -webkit-text-fill-color: var(--hx-muted) !important; border-bottom-color: currentColor; }

/* Вход и аватар */
/* «Войти»: тёмный кружок со стрелкой растягивается на всю кнопку.
   Из Uiverse.io, cssbuttons-io «massive-mayfly-74» (MIT), под размеры шапки. */
.hx .hx-login {
  --hx-login-ease: cubic-bezier(.65, 0, .076, 1);
  position: relative; display: inline-block; vertical-align: middle;
  width: 120px; height: 44px; padding: 0; border: 0; outline: none;
  background: transparent; cursor: pointer; font: inherit; text-decoration: none;
}
.hx-login__circle {
  position: relative; display: block; margin: 0; width: 44px; height: 44px; border-radius: 22px;
  background: var(--hx-text); transition: all .45s var(--hx-login-ease);
}
.hx-login__arrow {
  position: absolute; top: 0; bottom: 0; left: 11px; margin: auto; width: 18px; height: 2px;
  background: none; transition: all .45s var(--hx-login-ease);
}
.hx-login__arrow::before {
  content: ''; position: absolute; top: -4.6px; right: 1px; width: 10px; height: 10px;
  border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg);
}
.hx-login__text {
  position: absolute; inset: 0; display: grid; place-items: center; margin: 0 0 0 30px;
  font: 700 14px/1 Inter, sans-serif; color: var(--hx-text); transition: all .45s var(--hx-login-ease);
}
.hx-login:hover .hx-login__circle, .hx-login:focus-visible .hx-login__circle { width: 100%; }
.hx-login:hover .hx-login__arrow, .hx-login:focus-visible .hx-login__arrow { background: #fff; transform: translateX(16px); }
.hx-login:hover .hx-login__text, .hx-login:focus-visible .hx-login__text { color: #fff; }
.hx .hx-login:focus-visible { outline: 2px solid var(--hx-accent); outline-offset: 3px; border-radius: 24px; }
@media (prefers-reduced-motion: reduce) { .hx-login * { transition: none !important; } }

.hx-avatar {
  position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, #ff9a52, #ff6a1f); color: #fff; font: 700 16px/1 Inter, sans-serif;
  box-shadow: 0 0 0 3px #ffffffb3, 0 6px 16px -8px #ff6a1f; transition: transform .25s var(--hx-ease);
}
.hx-avatar:hover { transform: scale(1.05); }
.hx-dot { position: absolute; top: -4px; right: -4px; display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--hx-text); color: #fff; font: 700 10px/1 Inter, sans-serif; font-style: normal; }

/* Старые элементы шапки, которых больше нет */
.header .header-search, .header .theme-toggle, .header .burger, .mobile-menu { display: none !important; }

@media (max-width: 1180px) {
  .hx-search { width: 220px; }
  .hx-search:focus-within { width: 300px; }
}
@media (max-width: 860px) {
  .header .header__inner { flex-wrap: wrap; }
  /* Элементы правой части встают прямо в строку шапки: кнопки справа от логотипа, поиск вторым рядом */
  .header .header__inner { row-gap: 10px; }
  .hx { display: contents; }
  .hx > .hx-search + * { margin-left: auto; }
  .hx-search { order: 10; flex: 1 1 100%; width: 100%; }
  .hx-search:focus-within { width: 100%; }
  .hx-lang span { display: none; }
}

/* Окно входа */
.auth-dialog { width: min(440px, calc(100vw - 24px)); padding: 28px; border: 0; border-radius: 24px; background: #fff; color: #1b1a17; box-shadow: 0 24px 60px -12px #0000004d; font-family: Inter, system-ui, sans-serif; position: fixed; inset: 0; margin: auto; height: fit-content; max-height: calc(100svh - 24px); overflow-y: auto; }
.auth-dialog::backdrop { background: #0000006b; }
.auth-dialog svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.auth-dialog__close { position: absolute; top: 16px; right: 16px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid #dedad3; background: none; color: #77736b; cursor: pointer; }
.auth-dialog__close svg { width: 18px; height: 18px; }
.auth-dialog__close:hover { color: #1b1a17; border-color: #1b1a17; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.auth-tabs { display: inline-flex; gap: 4px; padding: 4px; margin: 0 0 24px; border-radius: 12px; background: #f2f0ec; }
.auth-tabs button { height: 38px; padding: 0 18px; border: 0; border-radius: 9px; background: none; color: #77736b; font: 600 15px/1 Inter, sans-serif; cursor: pointer; }
.auth-tabs button[aria-selected=true] { background: #fff; color: #1b1a17; box-shadow: 0 1px 3px #0000001a; }
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-form[hidden] { display: none; }
.auth-field { display: flex; flex-direction: column; gap: 6px; margin: 0 !important; font-size: 14px; font-weight: 500; color: #4d4a44; }
.auth-field small { font-weight: 400; color: #8f8b84; }
.auth-dialog input:not([type=checkbox]), .auth-dialog select { width: 100%; height: 48px; padding: 0 14px !important; border: 1px solid #dedad3 !important; border-radius: 12px !important; background: #fff !important; color: #1b1a17 !important; font: 400 16px/1 Inter, sans-serif; box-shadow: none !important; outline: 0; min-height: 0 !important; }
.auth-dialog input:focus, .auth-dialog select:focus { border-color: #ff782e !important; box-shadow: 0 0 0 3px #ff782e1f !important; }
.auth-phone { display: grid; grid-template-columns: 112px 1fr; gap: 8px; }
.auth-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.auth-agree { display: flex; gap: 10px; align-items: flex-start; margin: 0 !important; font-size: 13px; line-height: 1.45; color: #4d4a44; }
.auth-agree input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: #ff782e; flex: none; }
.auth-agree a, .auth-link { color: #e0621b !important; }
.auth-submit { height: 52px; margin-top: 4px; border: 0; border-radius: 12px; background: #ff782e; color: #fff; font: 650 16px/1 Inter, sans-serif; cursor: pointer; transition: filter .15s; }
.auth-submit:hover { filter: brightness(1.05); }
.auth-link { align-self: center; font-size: 14px; text-decoration: none !important; }
.auth-link:hover { text-decoration: underline !important; }

@media (max-width: 860px) {
  .auth-dialog { width: 100vw; max-width: none; margin: auto 0 0; border-radius: 24px 24px 0 0; padding: 24px 20px calc(24px + env(safe-area-inset-bottom)); }
}


/* Производительность прокрутки.
   Карточки размывали фон под собой (24 размытия на кадр), а фоновые пятна
   анимировались бесконечно: всё это пересчитывалось на каждом кадре. */
body.service-site .pcard { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background-color: #fffaf5 !important; }
body.service-site::before, body.service-site::after { animation: none !important; will-change: auto !important; }

/* Знак белорусского рубля: официальный SVG Нацбанка как маска, красится в цвет текста */
.byn-sign {
  display: inline-block; width: .66em; height: .82em; vertical-align: -.02em;
  background: currentColor;
  -webkit-mask: url("/static/img/byn-sign.svg") center / contain no-repeat;
  mask: url("/static/img/byn-sign.svg") center / contain no-repeat;
}

/* Старое декоративное пятно за логотипом (showcase.css) выключено */
body.service-site .header::before { content: none !important; display: none !important; }

/* Ширина кнопки языка не зависит от того, успел ли загрузиться шрифт: иначе поиск рядом сдвигался */
.hx .hx-lang { width: 138px; justify-content: space-between; }
@media (max-width: 860px) { .hx .hx-lang { width: auto; } }

/* The auth pages use a dark photo behind the header. */
.auth-scene .hx .hx-login__text { color:#fff4e8; text-shadow:0 1px 4px #0006; }

/* ---------- Бургер-меню на телефоне ---------- */
.hx-burger { display: none; }
.mnav { display: none; }
@media (max-width: 860px) {
  /* Первый ряд: логотип и уведомления. Второй ряд: поиск и справа от него бургер */
  .hx .hx-login, .hx .hx-account, .hx [data-lang-pop], .hx #themeToggle { display: none !important; }
  .hx > .hx-search + * { margin-left: 0; }
  .header .logo { margin-right: auto; }
  .hx .hx-search, .hx .hx-search:focus-within { flex: 1 1 calc(100% - 64px); width: auto; min-width: 0; }
  .hx .hx-burger { order: 11; }
  .hx-burger {
    display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 14px;
    background: var(--hx-glass, #ffffffa6); color: var(--hx-text, #1b1a17); box-shadow: inset 0 0 0 1px var(--hx-line, #1b1a1714); cursor: pointer;
  }
  .hx-burger svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

  .mnav[open] {
    --mn-bg: #fffdf9; --mn-text: #1b1a17; --mn-muted: #7a766e; --mn-line: #1b1a1714; --mn-soft: #f3f0eb; --mn-accent: #ff782e;
    display: flex; flex-direction: column; position: fixed; inset: 0 0 0 auto; margin: 0; padding: 0; border: 0;
    width: min(360px, 88vw); height: 100dvh; max-width: none; max-height: none; overflow: hidden;
    background: var(--mn-bg); color: var(--mn-text); font-family: Inter, system-ui, sans-serif;
    box-shadow: -20px 0 50px -20px #00000059; animation: mnav-in .28s cubic-bezier(.16, 1, .3, 1);
  }
  html[data-theme="dark"] .mnav[open] { --mn-bg: #1c1f20; --mn-text: #f3f1ec; --mn-muted: #a7a39b; --mn-line: #ffffff17; --mn-soft: #26292b; }
  .mnav::backdrop { background: #0000006b; }
  @keyframes mnav-in { from { transform: translateX(100%); } to { transform: none; } }
  .mnav svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  .mnav__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 12px 20px; border-bottom: 1px solid var(--mn-line); }
  .mnav__logo { text-decoration: none !important; }
  .mnav__close { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 12px; background: var(--mn-soft); color: var(--mn-text); cursor: pointer; }
  .mnav__close svg { width: 20px; height: 20px; }
  .mnav__body { flex: 1; overflow-y: auto; padding: 16px 20px calc(24px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 18px; overscroll-behavior: contain; }
  .mnav__user { display: flex; align-items: center; gap: 12px; }
  .mnav__avatar { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, #ff9a52, #ff6a1f); color: #fff; font: 700 18px/1 Inter, sans-serif; }
  .mnav__user b { display: block; font-size: 16px; }
  .mnav__user small { font-size: 13px; color: var(--mn-muted); }
  .mnav__auth { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .mnav__btn { height: 46px; border: 0; border-radius: 14px; background: var(--mn-soft); color: var(--mn-text); font: 600 15px/1 Inter, sans-serif; cursor: pointer; }
  .mnav__btn--primary { background: var(--mn-accent); color: #fff; }
  .mnav__links { display: flex; flex-direction: column; margin: 0 -8px; }
  .mnav__links a { display: flex; align-items: center; justify-content: space-between; padding: 13px 8px; border-radius: 12px; font: 500 16px/1.2 Inter, sans-serif; color: var(--mn-text) !important; text-decoration: none !important; }
  .mnav__links a::after { content: '›'; font-size: 20px; color: var(--mn-muted); }
  .mnav__links a:active { background: var(--mn-soft); }
  .mnav__group { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: 1px solid var(--mn-line); }
  .mnav__label { margin: 0; font: 600 13px/1 Inter, sans-serif; color: var(--mn-muted); text-transform: uppercase; letter-spacing: .06em; }
  .mnav__chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .mnav__chip { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 1px solid var(--mn-line); border-radius: 999px; background: none; color: var(--mn-text); font: 500 14px/1 Inter, sans-serif; cursor: pointer; }
  .mnav__chip img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
  body.service-site .mnav .mnav__chip[aria-pressed="true"] { border-color: var(--mn-accent); background: #ff782e1a; color: var(--mn-text) !important; -webkit-text-fill-color: currentColor; }
  .mnav__theme { flex-direction: row; align-items: center; justify-content: space-between; }
  .mnav .mnav__switch { position: relative; flex: none; box-sizing: border-box; width: 52px !important; min-width: 52px !important; height: 30px !important; min-height: 30px !important; padding: 0 !important; margin: 0; border: 0; border-radius: 999px; background: var(--mn-soft); box-shadow: inset 0 0 0 1px var(--mn-line); cursor: pointer; transition: background-color .2s; }
  .mnav .mnav__switch span { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px #0003; transition: transform .25s cubic-bezier(.16, 1, .3, 1); }
  .mnav__switch[aria-checked="true"] { background: var(--mn-accent); }
  .mnav__switch[aria-checked="true"] span { transform: translateX(22px); }
  .mnav__logout { margin: 0; padding-top: 16px; border-top: 1px solid var(--mn-line); }
  .mnav__logout .mnav__btn { width: 100%; }
}