/*
 * ForteVPN transparent lettering.
 * Static overlay above WebGL Earth and below the login form.
 */

#forte-vpn-overlay {
  position: fixed;
  left: 50%;
  top: 3.5vh;
  transform: translate(-50%, -75px);

  width: min(58vw, 1000px);
  height: auto;

  z-index: 1;
  pointer-events: none;
  user-select: none;

  /*
   * Transparency is contained in the PNG itself.
   * Keep opacity at 1 so its original alpha is preserved exactly.
   */
  opacity: 0.42;
}

@media (max-width: 900px) {
  #forte-vpn-overlay {
    top: 3vh;
    width: min(62vw, 620px);
  }
}

@media (max-width: 480px) {
  #forte-vpn-overlay {
    top: 2.5vh;
    width: 72vw;
  }
}

@media (forced-colors: active) {
  #forte-vpn-overlay {
    display: none;
  }
}

/* FORTE_OVERLAY_VERTICAL_FIX */
#forte-vpn-overlay {
  top: -55px !important;
  transform: translateX(-50%) !important;
}

/* FORTE_OVERLAY_CROPPED_POSITION_V2 */
#forte-vpn-overlay {
  top: 8px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: min(52vw, 900px) !important;
  opacity: 0.42 !important;
}

/* FORTE_OVERLAY_REAL_CROP_V3 */
#forte-vpn-overlay {
  position: fixed !important;
  top: 18px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: min(52vw, 900px) !important;
  opacity: 0.42 !important;
}

/* FORTE_LOGIN_LAYOUT_V4 */

/* letters: ~7% less transparent than opacity .42 */
#forte-vpn-overlay {
  opacity: 0.45 !important;
}

/* Remove the old heading */
#heading {
  display: none !important;
}

/* Move the whole auth flow lower.
   This keeps Email and OTP states aligned. */
.auth {
  transform: translateY(80px);
}

@media (max-width: 480px) {
  .auth {
    transform: translateY(45px);
  }
}

/* FORTE_LOGIN_LAYOUT_V5 */
.auth {
  transform: translateY(160px) !important;
}

@media (max-width: 480px) {
  .auth {
    transform: translateY(90px) !important;
  }
}

/* FORTE_OVERLAY_SIZE_V6 */
#forte-vpn-overlay {
  width: min(47vw, 810px) !important;
}

/* FORTE_OVERLAY_OPACITY_V7 */
#forte-vpn-overlay {
  opacity: 0.52 !important;
}

/* FORTE_OVERLAY_WATERMARK_V8 */
#forte-vpn-overlay {
  opacity: 0.28 !important;
  filter: brightness(0.78) contrast(0.82) !important;
}

/* FORTE_MOBILE_LOGIN_LOWER_THIRD_V9 */
@media (max-width: 480px) {
  .auth {
    position: fixed !important;

    left: 50% !important;
    right: auto !important;

    /*
     * Keep the login controls in the lower third.
     * OTP state follows the same positioning.
     */
    bottom: 11svh !important;

    width: min(384px, calc(100vw - 48px)) !important;
    max-width: 384px !important;

    margin: 0 !important;
    transform: translateX(-50%) !important;

    z-index: 3 !important;
  }
}

/* FORTE_MOBILE_COMPOSITION_V10 */
@media (max-width: 480px) {

  /* Email + button: raise by 1.5 input heights = 81px */
  .auth {
    bottom: calc(11svh + 81px) !important;
  }

  /*
   * Current mobile watermark was ~47vw.
   * Exactly 2x larger and ~0.5cm lower.
   */
  #forte-vpn-overlay {
    width: 94vw !important;
    top: 37px !important;
  }
}