/* =========================================================================
   VYPA — language switcher (sign-in / sign-up)
   Injected by assets/js/vypa-translate.js.
   =========================================================================
   The control renders on the sign-in and sign-up pages and nowhere else, so
   .is-auth is the only variant.

   The menu deliberately copies .portal-dropdown-menu from login.css — the
   "Advertise ▾" switcher a few pixels away on the same page. Same gradient,
   same border, same radius, same item padding, same hover. Two dropdowns
   sitting side by side should not look like they came from different apps.
   ========================================================================= */

/* The wrapper is a positioning context and nothing else: no background, no
   border. The pill below carries the looks, so the menu can hang off the
   wrapper without inheriting the pill's rounding or padding. */
.vypa-lang-switch {
  position: relative;
  display: inline-block;
}

/* ── ONE PLACEMENT FOR EVERY AUTH PAGE ─────────────────────────────────────
   The sign-in page is the reference. Every login, signup, forgot-password and
   reset-password page across all three portals uses the identical rule below.

   Panels need a containing block for it. Advertise and host already set
   position:relative; signage does not, and without it the pill would escape
   the panel and pin itself to the page. Safe to add: the only absolutely
   positioned descendant in these panels is .portal-dropdown-menu, and that
   anchors to .login-header-row, which is position:relative in all three
   portals — nothing changes anchor.
   ─────────────────────────────────────────────────────────────────────────── */
.login-left,
.signup-left,
.auth-left {
  position: relative;
}

.vypa-lang-switch.is-auth {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 20;              /* over the panel art; the dark toggle is far right */
}

/* ── Making the sign-up box clear the pill the same way sign-in does ────────
   The pill reserves no space, so whether anything collides comes down to how
   far below the panel top the box begins. On a phone the panel grows to fit
   its content, so that distance is simply the panel's top padding plus the
   box's top margin:

     sign-in   30px + 30px = 60px   → clears the pill (bottom edge ~54px)
     sign-up   20px + 20px = 40px   → 14px UNDER the pill

   That is the entire bug, and the whole of the fix is to give sign-up the
   sign-in numbers. No different mechanism, no stacking, no reflow — the two
   pages then place the pill and the box identically, which is the point.

   Both values are set explicitly rather than nudged, so the total is 60px in
   every portal regardless of what each one's own stylesheet uses. This file
   loads last on all twelve pages, so these win at equal specificity.

   Phone widths only. Above them the panel is taller than its content, so the
   box centres with room to spare and never reaches the pill; host switches at
   900px rather than 768px, so the wider bound covers both.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .signup-left,
  .auth-left {
    padding-top: 30px;
  }

  .signup-left > .signup-box,
  .auth-left > .auth-box {
    margin-top: 30px;
  }
}

/* ── The pill ──────────────────────────────────────────────────────────────
   A real button. The previous version painted a div and laid an invisible
   <select> over it to catch clicks, which is what covered neighbouring
   controls when the wrapper was not positioned. */
.vypa-lang-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-family: 'Inter', Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
  transition: background 0.2s ease, border-color 0.2s ease;

  /* Same glass as .login-box in login.css — same blur, same gradient, same
     border — so the control reads as part of the panel rather than a white
     sticker dropped on top of the artwork. */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.271) 0%, rgba(184, 191, 196, 0.18) 100%);
  border: 1px solid rgba(255, 255, 255, 0.733);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}

.vypa-lang-btn:hover {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.36) 0%, rgba(184, 191, 196, 0.26) 100%);
}

.vypa-lang-btn:focus-visible {
  outline: 2px solid #0042ff;
  outline-offset: 2px;
}

.vypa-lang-btn .vypa-lang-icon {
  font-size: 14px;
  line-height: 1;
}

.vypa-lang-btn .vypa-lang-current {
  white-space: nowrap;
}

/* The only cue that the control opens, so it is sized to be seen rather than
   to be tasteful. */
.vypa-lang-btn .vypa-lang-caret {
  font-size: 13px;
  margin-left: 2px;
  transition: transform 200ms ease;
}

.vypa-lang-switch.is-open .vypa-lang-caret {
  transform: rotate(180deg);
}

/* ── The menu ──────────────────────────────────────────────────────────────
   The element also carries .portal-dropdown-menu, so every colour — gradient,
   border, item text, hover, and the whole dark-mode treatment — comes from the
   host portal's own login.css. Nothing to duplicate and nothing to keep in
   sync: this is why the list is themed correctly instead of coming up as the
   white system menu a native <select> was drawing.

   Only placement is corrected here. The portal rule pins its menu to the top
   RIGHT of the header row (right:0; top:45px); this one hangs beneath its own
   pill. Two classes (0-2-0) beats the portal rule's one (0-1-0), so this wins
   regardless of which stylesheet the page happens to load first. */
.vypa-lang-menu.portal-dropdown-menu {
  top: calc(100% + 8px);
  left: 0;
  right: auto;
}

/* The tick occupies its column whether or not it is shown, so the labels line
   up instead of shifting by the width of an icon. */
.vypa-lang-menu .vypa-lang-tick {
  font-size: 11px;
  width: 12px;
  flex: none;
  visibility: hidden;
}

/* Beats .portal-dropdown-menu li:nth-child(n) i (0-2-2), which exists to tint
   the Host and Advertise icons and would otherwise tint the first two ticks
   two unrelated colours. currentColor keeps the tick the same shade as the
   label it belongs to, in every portal and both themes. */
.vypa-lang-menu.portal-dropdown-menu li a .vypa-lang-tick {
  color: currentColor;
}

.vypa-lang-menu .vypa-lang-option.is-current .vypa-lang-tick {
  visibility: visible;
}

/* An <a> with no href gets neither the pointer nor the portal items' inline
   font-weight, so both are restored here. */
.vypa-lang-menu .vypa-lang-option {
  cursor: pointer;
  font-weight: 600;
}

/* ── Signage in light mode ─────────────────────────────────────────────────
   The pill is white-on-glass because Advertise and Host paint their auth panel
   with a deep gradient — blue and green respectively — and white reads on
   both. Signage does not: in light mode its panel is the transparent-lines
   artwork over the default white page, and white text on it is invisible.

   So only the two colours that carry contrast change. The glass, the blur, the
   radius and every measurement stay shared, which is the point of scoping this
   here instead of keeping a forked copy of the file in that portal.

   :not(.dark-mode) rather than source order, because signage's dark panel is
   as dark as the other two and wants the shared dark-mode treatment below.
   Written as a guard, neither rule depends on which is declared first. */
body.portal-signage:not(.dark-mode) .vypa-lang-btn {
  color: #000000;
  border-color: rgba(0, 0, 0, 0.733);
}

/* Matching .portal-button in dark mode: solid black with a white edge. */
body.dark-mode .vypa-lang-btn {
  background: #000000;
  border: 1px solid #ffffff;
  color: #f1f5fa;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.dark-mode .vypa-lang-btn:hover {
  background: #1a1a1a;
}

/* ── Google's own chrome ───────────────────────────────────────────────────
   The widget injects a toolbar that shoves the whole document down and leaves
   a grey banner across the top. The translation is wanted; its chrome is not. */
.goog-te-banner-frame,
.skiptranslate iframe {
  display: none !important;
}

body {
  top: 0 !important;
}

/* Its hover balloon follows the cursor around the page otherwise. */
#goog-gt-tt,
.goog-te-balloon-frame {
  display: none !important;
}

.goog-text-highlight {
  background: none !important;
  box-shadow: none !important;
}

/* Tighter inset on the smallest screens — same on every auth page. The pill's
   bottom edge moves up to ~48px, so the 60px clearance above still holds. */
@media (max-width: 480px) {
  .vypa-lang-switch.is-auth {
    top: 14px;
    left: 14px;
  }
}