/* Phone-only sign-in redesign — mirrors the mobile app's Welcome / Sign In
   screen. Desktop/laptop keeps the original sign-styles.css look untouched;
   everything below is scoped to small screens only. */
@media screen and (max-width: 768px) {
  body {
    background-image: none !important;
    background-color: #0b3f73 !important;
  }

  header {
    background-color: #0b3f73 !important;
  }

  .auth-container {
    background-image: none !important;
    background-color: transparent !important;
    min-height: calc(100vh - 70px) !important;
    justify-content: center !important;
  }

  /* The app's Sign In screen has no website footer — it's full-bleed like
     every other phone screen in the app. */
  .main-footer {
    display: none !important;
  }

  #sign-in.form-box {
    background-color: #ffffff;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    padding: 26px 22px;
  }

  #sign-in.form-box h2 {
    font-size: 1.6rem;
  }

  /* Wrapper injected by sign-mobile.js so the eye icon can sit inside the
     PIN input. Selectors here are scoped with .form-box to out-specificity
     the base ".form-box button"/".form-box input" rules in sign-styles.css. */
  .form-box .pin-field-wrap {
    position: relative;
  }

  .form-box .pin-field-wrap input {
    padding-right: 36px;
    margin-bottom: 10px;
  }

  .form-box button.pin-eye-toggle {
    position: absolute;
    right: 6px;
    top: 0;
    width: auto;
    height: 34px;
    background: none;
    border: none;
    color: #777;
    font-size: 16px;
    padding: 0 8px;
    margin-bottom: 0;
    cursor: pointer;
  }
}