/* Hyper Endurance Fitness | language selector styles
   Bottom left, because the chat launcher owns the bottom right. */

.hef-lang{
  position:fixed;
  left:max(16px, env(safe-area-inset-left));
  bottom:max(16px, env(safe-area-inset-bottom));
  /* Above the chat widget rather than under it. Both are fixed to the
     same corner region on a phone, and whichever loses is a button that
     looks present and does nothing when tapped. */
  z-index:2147483050;
  /* Removes the wait for a possible double tap, so the first tap acts
     immediately instead of feeling ignored for 300ms. */
  touch-action:manipulation;
  font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

/* Never on top of the opening film. */
html.hef-intro-open .hef-lang{ display:none; }

/* Google's translated pages carry their own banner and can shift the
   viewport. Keep clear of it rather than fighting it. */
.translated-ltr .hef-lang,
.translated-rtl .hef-lang{ bottom:max(22px, env(safe-area-inset-bottom)); }

.hef-lang-btn{
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:38px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(20,21,23,0.82);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  color:#c9cccd;
  font-size:12px;
  font-weight:500;
  letter-spacing:0.06em;
  cursor:pointer;
  transition:border-color 200ms ease, color 200ms ease;
}
.hef-lang-btn:hover,
.hef-lang-btn:focus-visible{ border-color:rgba(201,163,90,0.6); color:#fff; }
.hef-lang-btn svg{ opacity:0.75; flex:none; }

.hef-lang-list{
  position:absolute;
  left:0;
  bottom:calc(100% + 8px);
  min-width:172px;
  max-height:min(52vh, 340px);
  overflow-y:auto;
  overscroll-behavior:contain;     /* scrolling the list must not scroll the page */
  padding:6px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(16,17,19,0.96);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:0 18px 48px rgba(0,0,0,0.55);
}
.hef-lang-list[hidden]{ display:none; }

.hef-lang-opt{
  touch-action:manipulation;
  display:block;
  width:100%;
  text-align:left;
  min-height:38px;
  padding:0 12px;
  border:0;
  border-radius:9px;
  background:none;
  color:#c9cccd;
  font:inherit;
  font-size:13px;
  cursor:pointer;
  transition:background 160ms ease, color 160ms ease;
}
.hef-lang-opt:hover,
.hef-lang-opt:focus-visible{ background:rgba(255,255,255,0.06); color:#fff; }
.hef-lang-opt.is-current{ color:#c9a35a; }

.hef-lang-btn:focus-visible,
.hef-lang-opt:focus-visible{ outline:2px solid #c9a35a; outline-offset:2px; }

/* On a phone the chat launcher sits at bottom right, so this keeps to its
   own side and stays narrow enough that the two never meet. */
@media (max-width:560px){
  .hef-lang{ left:12px; bottom:12px; }

  /* Was 36px, which is below every published minimum for a touch target:
     Apple asks for 44, Google for 48. A control that small is missed as
     often as it is hit, which is exactly what an unresponsive button
     feels like on a phone. The options were 38px for the same reason. */
  .hef-lang-btn{ min-height:46px; padding:0 15px; font-size:12.5px; }
  .hef-lang-btn span{ max-width:92px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .hef-lang-list{ min-width:168px; max-height:min(46vh, 280px); }
  .hef-lang-opt{ min-height:48px; font-size:14px; }
}

@media (prefers-reduced-motion: reduce){
  .hef-lang-btn, .hef-lang-opt{ transition:none; }
}