/**
 * UpPay site header — canonical shared chrome (donate-test).
 *
 * SHARED CHROME CONTRACT
 * This file is the ONLY source of truth for site header geometry and visuals.
 * Every rule is scoped under #uppay-site-header, so page stylesheets using
 * class-only selectors can never win regardless of <link> order.
 * Pages may not style descendants of #uppay-site-header.
 *
 * Requires css/uppay-design-tokens.css first.
 */

/* ------------------------------------------------------------------ *
 * 1. COMPONENT ISOLATION
 * Neutralises page resets (Tailwind preflight, global `*` rules) and UA
 * defaults so the header renders identically with or without them.
 * Scoped to the header only — never a site-wide reset.
 * ------------------------------------------------------------------ */
#uppay-site-header,
#uppay-site-header *,
#uppay-site-header *::before,
#uppay-site-header *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border-width: 0;
  border-style: solid;
  border-color: transparent;
  border-radius: 0;
  outline: 0;
  min-width: 0;
  min-height: 0;
  max-width: none;
  max-height: none;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-style: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: none;
  text-decoration: none;
  text-align: inherit;
  white-space: normal;
  background: transparent;
  box-shadow: none;
  transform: none;
  transition: none;
  opacity: 1;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

#uppay-site-header a,
#uppay-site-header button {
  color: inherit;
  cursor: pointer;
}

#uppay-site-header img,
#uppay-site-header svg {
  display: block;
  flex-shrink: 0;
}

/* Legacy bridge. games/css/uppay-donate-pubg-ml-bundle.css is generated and
   ships a global `button:hover { transform: translateY(-2px); box-shadow: … }`
   whose :not() allowlist carries IDs, so it outranks every selector this file
   can write and `!important` is the only weight that wins. The notification
   bell is already allowlisted there and animates its own transform, so it must
   stay excluded. Hover shadows stay data-driven via --uppay-header-hover-shadow,
   which each control sets in its own rule below. */
#uppay-site-header button:not(.uppay-site-header__notif):hover,
#uppay-site-header button:not(.uppay-site-header__notif):active {
  transform: none !important;
  box-shadow: var(--uppay-header-hover-shadow, var(--glass-inset)) !important;
}

/* ------------------------------------------------------------------ *
 * 2. CANONICAL TOKENS
 * Declared on the component itself, so :root / body overrides from page
 * CSS cannot reach them.
 * ------------------------------------------------------------------ */
#uppay-site-header {
  --uppay-header-control-size: 2.5rem;
  --uppay-header-control-radius: 999px;
  --uppay-header-control-font-size: 0.875rem;
  --uppay-header-control-icon: 1.15rem;
  --uppay-header-gap: 0.5rem;
  --uppay-header-brand-gap: 0.55rem;
  --uppay-header-inner-max: 1400px;
  --uppay-header-padding-x: 0.75rem;
  --uppay-header-padding-y: 0.45rem;
  --uppay-header-logo-h: 2.5rem;
  --uppay-header-logo-max-w: min(9.75rem, 44vw);
  --uppay-header-auth-zone-w: calc(var(--uppay-header-control-size) * 2 + var(--uppay-header-gap));
  --uppay-header-height: calc(var(--uppay-header-control-size) + var(--uppay-header-padding-y) * 2);

  --glass-bg: var(--uppay-glass-bg);
  --glass-border: var(--uppay-glass-border);
  --glass-inset: var(--uppay-glass-inset);
  --glass-blur: var(--uppay-glass-blur);
  --accent-ring: var(--uppay-ring);
  --accent-ring-soft: var(--uppay-ring-soft);
  --accent-ring-strong: var(--uppay-ring-strong);
  --accent-glow: var(--uppay-glow);
  --accent-glow-soft: var(--uppay-glow-soft);
  --accent-glow-strong: var(--uppay-glow-strong);
  --accent-halo: var(--uppay-halo);
  --zakaz-neon: var(--uppay-accent);
  --zakaz-glow: rgba(94, 200, 255, 0.35);
  /* Frame of the selected SBP tab on games checkout (css/uppay-checkout-card.css). */
  --uppay-header-frame-border: rgba(79, 125, 255, 0.45);
  --uppay-header-frame-bg: rgba(79, 125, 255, 0.1);
  --uppay-header-frame-shadow:
    0 0 0 1px var(--uppay-halo),
    0 0 22px var(--uppay-glow),
    0 0 36px rgba(124, 92, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);

  /* Legacy aliases — internal use only. */
  --header-control-h: var(--uppay-header-control-size);
  --header-control-radius: var(--uppay-header-control-radius);
  --header-control-fs: var(--uppay-header-control-font-size);

  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 50;
  overflow: visible;
  background: linear-gradient(to bottom, rgba(7, 11, 21, 0.94), rgba(7, 11, 21, 0.78));
  border-bottom: 1px solid rgba(161, 177, 214, 0.18);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  color: var(--uppay-text);
  font-family: var(--uppay-font);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: normal;
  text-align: left;
}

/* Page layout only: reserve space for the fixed header.
   --uppay-header-pad is measured by js/uppay-local-header.js. */
body.uppay-local-header-pad {
  padding-top: var(--uppay-header-pad, 3.85rem);
}

/* Until js/uppay-local-header.js measures the header, reserve the height it will measure
   (43px phone, 56px from 640px), so the page does not jump down when the header mounts. */
html.uppay-header-boot body:not(.uppay-local-header-pad) {
  padding-top: 43px;
}

@media (min-width: 640px) {
  html.uppay-header-boot body:not(.uppay-local-header-pad) {
    padding-top: 56px;
  }
}

/* ------------------------------------------------------------------ *
 * 3. INNER CONTAINER
 * ------------------------------------------------------------------ */
#uppay-site-header .uppay-site-header__row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--uppay-header-gap);
  width: 100%;
  max-width: var(--uppay-header-inner-max);
  min-height: var(--uppay-header-height);
  margin: 0 auto;
  padding: var(--uppay-header-padding-y) var(--uppay-header-padding-x);
}

@media (min-width: 640px) {
  #uppay-site-header {
    --uppay-header-padding-x: 1rem;
  }
}

@media (min-width: 1024px) {
  #uppay-site-header {
    --uppay-header-padding-x: 1.25rem;
  }
}

#uppay-site-header .uppay-site-header__brand {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--uppay-header-brand-gap);
}

/* ------------------------------------------------------------------ *
 * 4. LOGO
 * ------------------------------------------------------------------ */
#uppay-site-header .uppay-logo-link {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.5rem;
  height: var(--uppay-header-control-size);
  overflow: visible;
  color: var(--uppay-text);
}

#uppay-site-header .uppay-logo-link--asset {
  gap: 0;
}

#uppay-site-header .uppay-logo-asset {
  width: auto;
  height: var(--uppay-header-logo-h);
  max-height: var(--uppay-header-logo-h);
  max-width: var(--uppay-header-logo-max-w);
  object-fit: contain;
  object-position: left center;
}

#uppay-site-header .uppay-logo-mark-wrap {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  overflow: hidden;
  border-radius: 999px;
  padding: 0.125rem;
}

#uppay-site-header .uppay-logo-mark-wrap--image {
  background-color: #ffffff;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(0, 0, 0, 0.08);
}

#uppay-site-header .uppay-wordmark {
  flex-shrink: 0;
  color: var(--uppay-text);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

/* ------------------------------------------------------------------ *
 * 5. SEARCH
 * ------------------------------------------------------------------ */
#uppay-site-header .uppay-home-search-slot {
  flex: 1 1 auto;
  min-width: 0;
}

#uppay-site-header .uppay-search-wrap {
  position: relative;
  width: 100%;
}

#uppay-site-header .uppay-home-search-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  height: var(--uppay-header-control-size);
  min-height: var(--uppay-header-control-size);
  padding: 0 0.9rem;
  border: 1px solid var(--glass-border);
  border-radius: var(--uppay-header-control-radius);
  background: var(--glass-bg);
  box-shadow: var(--glass-inset);
  /* Header shell already blurs; nested backdrop-filter here causes a vertical
     compositing seam in Chromium when the notification popover opens. */
  cursor: text;
}

#uppay-site-header .uppay-home-search-field:focus-within {
  border-color: var(--accent-ring-strong);
  background: rgba(255, 255, 255, 0.08);
  box-shadow:
    0 0 0 1px var(--accent-halo),
    0 0 22px var(--accent-glow-strong),
    var(--glass-inset);
}

#uppay-site-header .uppay-home-search-field svg {
  width: 1.05rem;
  height: 1.05rem;
  color: #8ea0c8;
}

#uppay-site-header .uppay-home-search-input {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--uppay-text);
  font-size: var(--uppay-header-control-font-size);
  font-weight: 500;
  line-height: 1.2;
  cursor: text;
}

#uppay-site-header .uppay-home-search-input::placeholder {
  color: #8ea0c8;
  font-weight: 400;
  opacity: 1;
}

/* Mobile search trigger — opens the shared header search drawer. */
#uppay-site-header .uppay-site-header__search-trigger {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--uppay-header-control-size);
  height: var(--uppay-header-control-size);
  border: 1px solid var(--glass-border);
  border-radius: var(--uppay-header-control-radius);
  background: var(--glass-bg);
  box-shadow: var(--glass-inset);
  color: var(--uppay-text);
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
}

#uppay-site-header .uppay-site-header__search-trigger svg {
  width: 0.9375rem;
  height: 0.9375rem;
}

#uppay-site-header .uppay-site-header__search-trigger:hover,
#uppay-site-header .uppay-site-header__search-trigger:focus-visible {
  --uppay-header-hover-shadow: 0 0 14px var(--accent-glow-soft);
  border-color: var(--accent-ring-soft);
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  box-shadow: 0 0 14px var(--accent-glow-soft);
}

/* ------------------------------------------------------------------ *
 * 6. TOOLS + STABLE AUTH SLOT
 * ------------------------------------------------------------------ */
#uppay-site-header .uppay-site-header__tools {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: var(--uppay-header-gap);
  margin-left: auto;
}

/* Fixed-width slot: Login <-> Orders+Profile must not move anything left of it. */
#uppay-site-header .uppay-site-header__auth {
  display: flex;
  flex: 0 0 var(--uppay-header-auth-zone-w);
  align-items: center;
  justify-content: flex-end;
  gap: var(--uppay-header-gap);
  width: var(--uppay-header-auth-zone-w);
  min-width: var(--uppay-header-auth-zone-w);
  max-width: var(--uppay-header-auth-zone-w);
}

/* ------------------------------------------------------------------ *
 * 7. ACTION BUTTONS
 * ------------------------------------------------------------------ */
#uppay-site-header .uppay-test-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--uppay-header-control-size);
  min-height: var(--uppay-header-control-size);
  border-radius: var(--uppay-header-control-radius);
  font-size: var(--uppay-header-control-font-size);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

#uppay-site-header .uppay-test-catalog {
  flex-shrink: 0;
  gap: 0.45rem;
  padding: 0 1rem;
  border: 1px solid var(--uppay-header-frame-border);
  background: var(--uppay-header-frame-bg);
  box-shadow: var(--uppay-header-frame-shadow);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  color: #ffffff;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
}

#uppay-site-header .uppay-test-catalog:hover,
#uppay-site-header .uppay-test-catalog:focus-visible {
  border-color: rgba(120, 170, 255, 0.62);
  background: rgba(79, 125, 255, 0.16);
  color: #ffffff;
  box-shadow: var(--uppay-header-frame-shadow);
  outline: none;
}

#uppay-site-header .uppay-test-catalog svg {
  width: 1.05rem;
  height: 1.05rem;
}

/* «Статьи»: та же кнопка, что «Каталог»; на своём разделе — постоянно в состоянии наведения. */
#uppay-site-header .uppay-test-articles[aria-current="page"] {
  border-color: rgba(120, 170, 255, 0.62);
  background: rgba(79, 125, 255, 0.16);
  color: #ffffff;
}

/* Узкий планшет: поле поиска и так почти без места — кнопку не показываем. */
@media (min-width: 640px) and (max-width: 767px) {
  #uppay-site-header .uppay-test-articles {
    display: none;
  }
}

/* Планшет: только иконка, чтобы поле поиска не сжималось. */
@media (min-width: 768px) and (max-width: 1023px) {
  #uppay-site-header .uppay-test-articles {
    padding: 0;
    width: var(--uppay-header-control-size, 2.5rem);
    justify-content: center;
  }

  #uppay-site-header .uppay-test-articles span {
    display: none;
  }
}

#uppay-site-header .uppay-test-zakaz-donat {
  flex-shrink: 0;
  gap: 0.4rem;
  padding: 0 1rem;
  border: 1px solid var(--accent-ring-strong);
  background: var(--glass-bg);
  box-shadow:
    0 0 0 1px var(--accent-halo),
    0 0 22px var(--accent-glow-strong),
    var(--glass-inset);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  color: var(--uppay-text);
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
}

#uppay-site-header .uppay-test-zakaz-donat svg {
  width: 1.15rem;
  height: 1.15rem;
  color: var(--zakaz-neon);
  fill: currentColor;
  stroke: none;
  transition: color 0.15s ease, filter 0.15s ease;
}

#uppay-site-header .uppay-test-zakaz-donat:hover {
  border-color: var(--accent-ring-strong);
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  box-shadow:
    0 0 0 1px var(--accent-halo),
    0 0 22px var(--accent-glow-strong),
    var(--glass-inset);
}

#uppay-site-header .uppay-test-zakaz-donat:hover svg {
  color: var(--zakaz-neon);
  filter: drop-shadow(0 0 5px var(--zakaz-glow)) drop-shadow(0 0 1px var(--zakaz-neon));
}

#uppay-site-header .uppay-test-zakaz-donat:focus-visible {
  outline: 2px solid var(--zakaz-neon);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------ *
 * 8. AUTH CONTROLS
 * ------------------------------------------------------------------ */
#uppay-site-header .uppay-site-header__login {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  height: var(--uppay-header-control-size);
  min-height: var(--uppay-header-control-size);
  padding: 0 0.9rem;
  border: 1px solid var(--uppay-header-frame-border);
  border-radius: var(--uppay-header-control-radius);
  background: var(--uppay-header-frame-bg);
  box-shadow: var(--uppay-header-frame-shadow);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  color: #ffffff;
  font-size: var(--uppay-header-control-font-size);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
}

#uppay-site-header .uppay-site-header__login:hover,
#uppay-site-header .uppay-site-header__login:focus-visible {
  border-color: rgba(120, 170, 255, 0.62);
  background: rgba(79, 125, 255, 0.16);
  color: #ffffff;
  box-shadow: var(--uppay-header-frame-shadow);
  outline: none;
}

#uppay-site-header .uppay-test-orders,
#uppay-site-header .uppay-site-header__notif,
#uppay-site-header .uppay-site-header__profile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--uppay-header-control-size);
  height: var(--uppay-header-control-size);
  min-width: var(--uppay-header-control-size);
  min-height: var(--uppay-header-control-size);
  border: 1px solid var(--uppay-header-frame-border);
  border-radius: 14px;
  background: var(--uppay-header-frame-bg);
  box-shadow: var(--uppay-header-frame-shadow);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  color: #ffffff;
  font-size: var(--uppay-header-control-font-size);
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
}

#uppay-site-header .uppay-test-orders svg,
#uppay-site-header .uppay-site-header__notif svg,
#uppay-site-header .uppay-site-header__profile svg {
  width: var(--uppay-header-control-icon);
  height: var(--uppay-header-control-icon);
}

#uppay-site-header .uppay-test-orders:hover,
#uppay-site-header .uppay-site-header__notif:hover,
#uppay-site-header .uppay-site-header__profile:hover,
#uppay-site-header .uppay-test-orders:focus-visible,
#uppay-site-header .uppay-site-header__notif:focus-visible,
#uppay-site-header .uppay-site-header__profile:focus-visible {
  border-color: rgba(120, 170, 255, 0.62);
  background: rgba(79, 125, 255, 0.16);
  color: #ffffff;
  box-shadow: var(--uppay-header-frame-shadow);
  outline: none;
}

#uppay-site-header .uppay-site-header__notif {
  position: relative;
}

#uppay-site-header .uppay-site-header__notif-badge {
  position: absolute;
  top: -0.2rem;
  right: -0.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.05rem;
  height: 1.05rem;
  padding: 0 0.2rem;
  border: 1px solid rgba(8, 16, 28, 0.88);
  border-radius: 999px;
  background: linear-gradient(165deg, rgba(72, 168, 255, 0.95) 0%, rgba(42, 128, 230, 0.92) 100%);
  box-shadow:
    0 0 0 1px rgba(120, 170, 255, 0.22),
    0 0 8px rgba(94, 200, 255, 0.38);
  color: #f4fbff;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  pointer-events: none;
}

#uppay-site-header .uppay-site-header__notif-badge.hidden {
  display: none;
}

#uppay-site-header .uppay-site-header__notif.has-unread {
  border-color: var(--uppay-header-frame-border);
  box-shadow: var(--uppay-header-frame-shadow);
}

#uppay-site-header .uppay-site-header__profile-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
}

#uppay-site-header .uppay-site-header__profile-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#uppay-site-header .uppay-site-header__profile-photo img[hidden],
#uppay-site-header .uppay-site-header__profile-icon[hidden] {
  display: none;
}

#uppay-site-header .uppay-site-header__profile-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #ffffff;
}

/* ------------------------------------------------------------------ *
 * 9. AUTH VISIBILITY — shared header owns guest vs logged-in
 * Notifications are visible in both states.
 * ------------------------------------------------------------------ */
#uppay-site-header[data-auth-state="guest"] [data-auth-logged-only] {
  display: none;
}

#uppay-site-header[data-auth-state="logged-in"] [data-auth-guest-only] {
  display: none;
}

/* ------------------------------------------------------------------ *
 * 10. NOTIFICATION STATE HOOKS
 * Pages/QA may set data-notif-state on #uppay-site-header to pass state.
 * They may not restyle the control themselves.
 * ------------------------------------------------------------------ */
#uppay-site-header[data-notif-state="muted"] .uppay-site-header__notif {
  border-color: var(--uppay-header-frame-border);
  background: var(--uppay-header-frame-bg);
  color: #ffffff;
  box-shadow: var(--uppay-header-frame-shadow);
  opacity: 1;
}

#uppay-site-header[data-notif-state="muted"] .uppay-site-header__notif:hover,
#uppay-site-header[data-notif-state="muted"] .uppay-site-header__notif:focus-visible {
  border-color: rgba(120, 170, 255, 0.62);
  background: rgba(79, 125, 255, 0.16);
  color: #ffffff;
  box-shadow: var(--uppay-header-frame-shadow);
}

#uppay-site-header[data-notif-state="muted"] .uppay-site-header__notif-badge {
  display: none;
}

#uppay-site-header[data-notif-state="active"] .uppay-site-header__notif-icon {
  transform-origin: 50% 8%;
  animation: uppay-header-notif-bell-ding 7.5s ease-in-out infinite;
  will-change: transform;
}

#uppay-site-header[data-notif-state="active"] .uppay-site-header__notif-badge {
  animation: uppay-header-notif-badge-ding 7.5s ease-in-out infinite;
  will-change: filter, box-shadow;
}

/* ding ~800ms, pause ~6.7s -> repeat ~every 7.5s */
@keyframes uppay-header-notif-bell-ding {
  0%,
  10.7%,
  100% {
    transform: rotate(0deg);
  }
  2.7% {
    transform: rotate(-2deg);
  }
  5.3% {
    transform: rotate(2deg);
  }
  8% {
    transform: rotate(-1deg);
  }
}

@keyframes uppay-header-notif-badge-ding {
  0%,
  10.7%,
  100% {
    filter: brightness(1);
    box-shadow:
      0 0 0 1px rgba(120, 170, 255, 0.22),
      0 0 6px rgba(94, 200, 255, 0.34);
  }
  5.3% {
    filter: brightness(1.14);
    box-shadow:
      0 0 0 1px rgba(120, 170, 255, 0.38),
      0 0 14px rgba(94, 200, 255, 0.56);
  }
}

@media (prefers-reduced-motion: reduce) {
  #uppay-site-header[data-notif-state="active"] .uppay-site-header__notif-icon,
  #uppay-site-header[data-notif-state="active"] .uppay-site-header__notif-badge {
    animation: none;
    will-change: auto;
  }
}

/* ------------------------------------------------------------------ *
 * 11. MOBILE (<=639px) — canonical compact single row
 * ------------------------------------------------------------------ */
@media (max-width: 639px) {
  #uppay-site-header {
    --uppay-header-control-size: 2rem;
    --uppay-header-control-icon: 0.9375rem;
    --uppay-header-gap: 0.25rem;
    --uppay-header-brand-gap: 0.25rem;
    --uppay-header-padding-x: 0.75rem;
    --uppay-header-padding-y: 0.3125rem;
    --uppay-header-logo-h: 1.875rem;
    --uppay-header-logo-max-w: min(6.5rem, 30vw);
  }

  #uppay-site-header .uppay-home-search-slot,
  #uppay-site-header .uppay-test-zakaz-donat,
  #uppay-site-header .uppay-test-articles {
    display: none;
  }

  #uppay-site-header .uppay-site-header__search-trigger {
    display: inline-flex;
  }

  #uppay-site-header .uppay-test-catalog {
    gap: 0.1875rem;
    padding: 0 0.4375rem;
    font-size: 0.625rem;
    line-height: 1.1;
  }

  #uppay-site-header .uppay-test-catalog svg {
    width: 0.8125rem;
    height: 0.8125rem;
  }

  #uppay-site-header .uppay-site-header__login {
    padding: 0 0.5625rem;
    font-size: 0.6875rem;
    line-height: 1.1;
  }

  #uppay-site-header .uppay-site-header__notif-badge {
    top: -0.1rem;
    right: -0.05rem;
    min-width: 0.95rem;
    height: 0.95rem;
    font-size: 0.5625rem;
  }
}

/* Search dropdown under the header field. Values taken from css/uppay-shell.css (.uppay-search-dd, lines 368-422 and 1110-1127). */
#uppay-site-header .uppay-search-dd {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 90;
  max-height: min(320px, 50vh);
  overflow-y: auto;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(10, 12, 20, 0.96);
  backdrop-filter: blur(26px);
  -webkit-backdrop-filter: blur(26px);
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  display: none;
}

#uppay-site-header .uppay-search-dd.is-open {
  display: block;
}

#uppay-site-header .uppay-search-dd button {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
  text-align: left;
  font-size: 0.875rem;
  font-weight: 600;
  color: #d1d9e8;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease,
    background 0.15s ease,
    color 0.15s ease;
}

#uppay-site-header .uppay-search-dd button:hover,
#uppay-site-header .uppay-search-dd button:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(79, 125, 255, 0.35);
  background: rgba(79, 125, 255, 0.1);
  color: #f1f5f9;
  box-shadow: 0 8px 24px rgba(79, 125, 255, 0.12);
  outline: none;
}

#uppay-site-header .uppay-search-dd button:active {
  transform: translateY(0) scale(0.99);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

#uppay-site-header .uppay-search-dd button:disabled {
  cursor: default;
  color: #8ea0c8;
  transform: none;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

#uppay-site-header .uppay-search-dd-icon {
  display: block;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 0.6rem;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

#uppay-site-header .uppay-search-dd button > span {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: inherit;
}