/* Sprint 659 — OTP delivery + premium mobile app refinement.
   Desktop Sprint 658 styling stays intact. */

.tf-otp-boxes{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:7px;
}
.tf-otp-boxes input{
  min-width:0;
  width:100%;
  height:58px;
  padding:0;
  border:1px solid #d6e0ea;
  border-radius:11px;
  background:#f7f9fc;
  color:#12365c;
  text-align:center;
  font-size:21px;
  font-weight:900;
  outline:0;
}
.tf-otp-boxes input:focus{
  border-color:#1768cf;
  background:#fff;
  box-shadow:0 0 0 3px rgba(23,104,207,.08);
}

.tf-login-mobile-visual{display:none}

@media(max-width:520px){
  html,body{background:#f2f4f8!important}

  .tf-premium-login{
    display:block!important;
    min-height:100dvh!important;
    background:#f2f4f8!important;
  }

  /* Hide desktop/navy hero on mobile; app screen owns visual hierarchy. */
  .tf-premium-login__visual{
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    min-height:0!important;
    overflow:hidden!important;
    clip:rect(0 0 0 0)!important;
  }

  .tf-premium-login__panel{
    min-height:100dvh!important;
    display:block!important;
    margin:0!important;
    padding:0!important;
    background:#f2f4f8!important;
  }

  .tf-login-card{
    width:100%!important;
    min-height:100dvh!important;
    margin:0!important;
    padding:0 0 24px!important;
    overflow:hidden!important;
    border:0!important;
    border-radius:0!important;
    background:#fff!important;
    box-shadow:none!important;
  }

  .tf-login-mobile-visual{
    position:relative!important;
    display:block!important;
    height:315px!important;
    padding:16px 20px 18px!important;
    overflow:hidden!important;
    border-radius:0 0 28px 28px!important;
    background:#eef3f8!important;
    color:#133556!important;
    text-align:center!important;
  }

  .tf-login-mobile-visual__brand{
    display:flex!important;
    align-items:center!important;
    gap:7px!important;
    width:max-content!important;
    margin:0 auto!important;
    font-size:10px!important;
    font-weight:900!important;
  }
  .tf-login-mobile-visual__brand img{
    width:28px!important;
    height:28px!important;
    object-fit:contain!important;
  }

  .tf-login-mobile-visual__scene{
    position:relative!important;
    width:220px!important;
    height:170px!important;
    margin:10px auto 5px!important;
  }
  .tf-scene-globe{
    position:absolute!important;
    left:41px!important;
    top:24px!important;
    display:grid!important;
    place-items:center!important;
    width:110px!important;
    height:110px!important;
    border:13px solid #dce8f5!important;
    border-radius:50%!important;
    color:#1768cf!important;
    font-size:52px!important;
    font-weight:900!important;
  }
  .tf-scene-box{
    position:absolute!important;
    display:grid!important;
    place-items:center!important;
    width:52px!important;
    height:45px!important;
    border-radius:9px!important;
    box-shadow:0 8px 18px rgba(12,40,73,.10)!important;
    font-size:11px!important;
    font-weight:900!important;
  }
  .tf-scene-box--one{
    left:20px!important;
    bottom:20px!important;
    background:#ffc23a!important;
    color:#0b2b52!important;
    transform:rotate(-7deg)!important;
  }
  .tf-scene-box--two{
    right:14px!important;
    bottom:30px!important;
    background:#123b68!important;
    color:#fff!important;
    transform:rotate(7deg)!important;
  }
  .tf-scene-person{
    position:absolute!important;
    left:91px!important;
    bottom:2px!important;
    width:44px!important;
    height:74px!important;
  }
  .tf-scene-person i{
    display:block!important;
    width:27px!important;
    height:27px!important;
    margin:0 auto!important;
    border-radius:50%!important;
    background:#d7a479!important;
  }
  .tf-scene-person b{
    display:block!important;
    width:44px!important;
    height:49px!important;
    margin-top:-2px!important;
    border-radius:17px 17px 9px 9px!important;
    background:#1768cf!important;
  }
  .tf-scene-shield{
    position:absolute!important;
    right:42px!important;
    top:18px!important;
    display:grid!important;
    place-items:center!important;
    width:31px!important;
    height:31px!important;
    border-radius:50%!important;
    background:#18a16d!important;
    color:#fff!important;
    font-size:15px!important;
    font-weight:900!important;
    box-shadow:0 5px 14px rgba(24,161,109,.22)!important;
  }

  .tf-login-mobile-visual>strong{
    display:block!important;
    margin-top:0!important;
    color:#153657!important;
    font-size:17px!important;
    line-height:1.1!important;
  }
  .tf-login-mobile-visual>small{
    display:block!important;
    margin-top:5px!important;
    color:#74869a!important;
    font-size:8px!important;
  }
  .tf-login-mobile-dots{
    display:flex!important;
    justify-content:center!important;
    gap:5px!important;
    margin-top:12px!important;
  }
  .tf-login-mobile-dots i{
    display:block!important;
    width:6px!important;
    height:6px!important;
    border-radius:99px!important;
    background:#d2dbe5!important;
  }
  .tf-login-mobile-dots i.active{
    width:25px!important;
    background:#ffc23a!important;
  }

  .tf-login-card__mobile-brand{
    display:none!important;
  }

  .tf-login-progress{
    position:absolute!important;
    top:14px!important;
    left:14px!important;
    z-index:3!important;
    margin:0!important;
    opacity:0!important;
    pointer-events:none!important;
  }

  .tf-login-slider{
    min-height:0!important;
    padding:24px 20px 6px!important;
    overflow:visible!important;
  }

  .tf-login-slide{
    animation:tfMobileSlide .22s ease!important;
  }
  @keyframes tfMobileSlide{
    from{opacity:.4;transform:translateX(12px)}
    to{opacity:1;transform:none}
  }

  .tf-login-slide__head>span{
    color:#1768cf!important;
    font-size:6.5px!important;
  }
  .tf-login-slide__head h2,
  .tf-login-success h2{
    margin-top:5px!important;
    font-size:25px!important;
  }
  .tf-login-slide__head p{
    max-width:330px!important;
    font-size:8.5px!important;
    line-height:1.5!important;
  }

  .tf-email-step,.tf-otp-step,.tf-password-step{
    margin-top:18px!important;
  }

  .tf-login-control{
    min-height:50px!important;
    border-radius:12px!important;
    background:#f7f9fc!important;
  }
  .tf-login-control input{
    height:48px!important;
    font-size:10px!important;
  }

  .tf-login-main-btn{
    height:50px!important;
    margin-top:3px!important;
    border-radius:12px!important;
    background:#ffc23a!important;
    color:#0b2b52!important;
  }

  .tf-login-password-option{
    min-height:62px!important;
    border-radius:12px!important;
    background:#f7f9fc!important;
  }

  .tf-login-divider{
    margin:15px 0!important;
  }

  .tf-login-register{
    margin-top:16px!important;
    font-size:7.5px!important;
  }

  .tf-login-security{
    margin:12px 20px 0!important;
    border-radius:11px!important;
  }

  .tf-login-message{
    margin:10px 20px 0!important;
  }

  /* OTP page: screenshot-style clean white screen. */
  .tf-login-slide[data-slide="otp"]{
    min-height:390px!important;
    padding-top:4px!important;
  }
  .tf-login-slide[data-slide="otp"] .tf-login-back-step{
    min-height:34px!important;
    margin:0 0 20px!important;
    font-size:8px!important;
  }
  .tf-login-slide[data-slide="otp"] .tf-login-slide__head h2{
    font-size:26px!important;
  }
  .tf-login-slide[data-slide="otp"] .tf-login-slide__head p{
    font-size:9px!important;
  }

  .tf-otp-boxes{
    gap:6px!important;
  }
  .tf-otp-boxes input{
    height:52px!important;
    border-radius:10px!important;
    background:#f5f7fa!important;
    font-size:18px!important;
  }

  .tf-login-resend-row{
    justify-content:flex-start!important;
    margin-top:17px!important;
  }

  .tf-login-success{
    min-height:360px!important;
    padding-top:70px!important;
  }
}

@media(max-width:360px){
  .tf-login-mobile-visual{
    height:285px!important;
  }
  .tf-login-mobile-visual__scene{
    transform:scale(.88)!important;
    transform-origin:center top!important;
    margin-bottom:-10px!important;
  }
  .tf-login-slider{
    padding-left:15px!important;
    padding-right:15px!important;
  }
  .tf-otp-boxes{
    gap:4px!important;
  }
  .tf-otp-boxes input{
    height:46px!important;
  }
}