/* ==========================================================
   FIXFLEET LOGIN — FINAL MOBILE / BRAND POLISH
========================================================== */


/* Real FixFleet logo on desktop */

.ff-product-logo{
  display:flex;
  align-items:center;
  width:100%;
  min-height:105px;
}

.ff-product-logo > *{
  display:none !important;
}

.ff-product-logo::before{
  content:"";
  display:block;
  width:min(100%,380px);
  height:105px;

  background:
    url("/cfs-login-hero.png")
    center left / contain
    no-repeat;
}


/* Mobile logo */

.ff-login-mobile-brand{
  display:none;
}

.ff-login-mobile-brand > *{
  display:none !important;
}

.ff-login-mobile-brand::before{
  content:"";
  display:block;
  width:min(100%,320px);
  height:105px;

  background:
    url("/cfs-login-hero.png")
    center / contain
    no-repeat;
}


/* ==========================================================
   TABLET / MOBILE
========================================================== */

@media(max-width:900px){

  #login.ff-login-shell{
    display:block;

    width:min(
      520px,
      calc(100vw - 24px)
    );

    max-width:520px;
    min-height:0;

    margin:
      max(14px,env(safe-area-inset-top))
      auto
      max(14px,env(safe-area-inset-bottom));

    overflow:hidden;

    border-radius:24px;
  }


  /* Remove desktop split panel */

  .ff-login-brand-panel{
    display:none !important;
  }


  .ff-login-form-panel{
    display:block;

    width:100%;
    min-width:0;
    min-height:0;

    padding:
      30px
      28px
      30px;
  }


  .ff-login-form-wrap{
    width:100%;
    max-width:none;
    min-width:0;
  }


  /* Real logo above login */

  .ff-login-mobile-brand{
    display:flex !important;

    width:100%;
    min-height:100px;

    align-items:center;
    justify-content:center;

    margin:
      0
      auto
      14px;
  }


  .ff-login-eyebrow{
    margin-top:0;
    text-align:center;
  }


  .ff-login-form-wrap h2{
    margin:
      8px
      0
      8px;

    text-align:center;

    font-size:32px;
    line-height:1.08;
  }


  .ff-login-form-wrap > p{
    max-width:330px;

    margin:
      8px
      auto
      24px;

    text-align:center;
  }


  .ff-login-form-wrap .label{
    margin-top:18px;
  }


  /* Prevent squeezed mobile fields */

  .ff-login-form-wrap .field{
    display:block;

    width:100% !important;
    max-width:none !important;
    min-width:0 !important;

    min-height:56px;

    box-sizing:border-box;

    font-size:16px;
  }


  .ff-login-button{
    display:block;

    width:100% !important;
    max-width:none;

    min-height:56px;

    margin-top:22px;
  }


  .ff-login-security{
    margin-top:18px;
    text-align:center;
  }

}


/* ==========================================================
   SMALL PHONES
========================================================== */

@media(max-width:600px){

  #login.ff-login-shell{
    width:calc(100vw - 20px);

    margin-top:
      max(
        10px,
        env(safe-area-inset-top)
      );

    border-radius:20px;
  }


  .ff-login-form-panel{
    padding:
      20px
      18px
      24px;
  }


  .ff-login-mobile-brand{
    min-height:88px;
    margin-bottom:8px;
  }


  .ff-login-mobile-brand::before{
    width:min(100%,275px);
    height:88px;
  }


  .ff-login-form-wrap h2{
    font-size:29px;
  }


  .ff-login-form-wrap > p{
    margin-bottom:20px;
  }


  .ff-login-form-wrap .field{
    min-height:55px;
    border-radius:14px;
  }


  .ff-login-button{
    min-height:55px;
    border-radius:14px;
  }

}



/* FIXFLEET LOGO BLACK BACKGROUND REMOVAL */

/*
  The source logo has a black image background.
  Screen blending makes black disappear into the
  existing FixFleet login background while keeping
  the blue / green / silver logo visible.
*/

.ff-product-logo::before,
.ff-login-mobile-brand::before{
  mix-blend-mode:screen;
  filter:
    saturate(1.08)
    contrast(1.04);
}

/* FIXFLEET IOS SAFE AREA V1 */

@supports (
  padding-top:
    env(safe-area-inset-top)
){

  @media(max-width:900px){

    #top.top{
      padding-top:
        max(
          14px,
          env(safe-area-inset-top)
        );

      padding-left:
        max(
          14px,
          env(safe-area-inset-left)
        );

      padding-right:
        max(
          14px,
          env(safe-area-inset-right)
        );
    }

  }

}