/* t3953/t3954/t4027: every top header menu button matches the primary header CTA (.mb).
   Keep the 3D flip. One line, no overflow up to 125% zoom. Desktop + mobile menu. */

.sf-link {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  isolation: isolate;
  display: inline-block;
  perspective: 700px;
  white-space: nowrap !important;
}

.sf-front,
.sf-back,
.sb-lang,
.sb-mlang,
a.mb {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px !important;
  border: 0 !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  font-size: max(14px, calc(14px * var(--font-scale, 0.90))) !important;
  line-height: calc(20px * var(--font-scale, 0.90)) !important;
  color: #fff !important;
  background: radial-gradient(120% 160% at 25% 0%,#6366f1 0%,#312e81 45%,#0b1020 100%) !important;
  box-shadow: 0 0 28px #6366f188, 0 2px 0 #818cf8aa inset, 0 -10px 18px #000a inset !important;
  white-space: nowrap !important;
}

.sf-back { color: #d5fbff !important; }

.sb-lang:before,
.sb-mlang:before,
a.mb:before,
.sf-front:before,
.sf-back:before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 3px;
  height: 42%;
  border-radius: 12px 12px 40px 40px;
  background: linear-gradient(#ffffff88,#ffffff08);
  z-index: -1;
  pointer-events: none;
}
.sb-lang:after,
.sb-mlang:after,
a.mb:after,
.sf-front:after,
.sf-back:after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(40% 70% at 20% 80%,#22d3ee55,transparent 70%),
    repeating-linear-gradient(115deg,transparent 0 22px,#ffffff14 23px 24px,transparent 25px 48px);
  mix-blend-mode: screen;
  z-index: -1;
  pointer-events: none;
}

a.mb:hover,
.sb-lang:hover,
.sb-mlang:hover,
.sf-link:hover .sf-front {
  filter: brightness(1.12);
}


/* .sb-mlang is the compact-bar language control; desktop must hide it or it duplicates .sb-lang */
@media (min-width: 1280px) {
  .sb-mlang, .sb-burger { display: none !important; }
}
@media (max-width: 1279px) {
  .sb-right { display: none !important; }
  .sb-mlang { display: inline-flex !important; }
  .sb-burger { display: flex !important; }
}

/* Desktop: keep the whole bar on one line through 125% zoom (1280 CSS px). */
@media (min-width: 1280px) {
  .sb-h, .sb-w, .sb-right, .sb-nav, .sb-act {
    flex-wrap: nowrap !important;
  }
  .sb-w { overflow: visible; }
  .sb-nav { gap: 6px !important; }
  .sb-act { gap: 10px !important; }
  .sb-right { gap: 12px !important; }
  .sf-front, .sf-back, .sb-lang, a.mb { white-space: nowrap !important; }
}

/* Mobile menu: same chrome, each label stays on one line. */
.sb-menu .sf-front,
.sb-menu .sf-back,
.sb-menu .sb-lang,
.sb-menu a.mb {
  padding: 10px 14px !important;
}
.sb-menu nav,
.sb-menu .sb-ma {
  align-items: center;
}
.sb-menu .sf-link,
.sb-menu .sb-lang,
.sb-menu a.mb {
  white-space: nowrap !important;
}

@media (prefers-reduced-motion: reduce) {
  a.mb:hover, .sb-lang:hover, .sb-mlang:hover, .sf-link:hover .sf-front {
    filter: none;
  }
}