/* TrendishShop v196 — MOBILE ONLY auth modal / virtual keyboard hardening.
   Keeps desktop auth untouched. On phones the modal becomes a clean, keyboard-aware sheet
   that always fits inside the visible viewport and scrolls the focused field into view. */

@media (max-width: 600px){
  html.auth-mobile-dialog-open,
  body.auth-modal-open{
    overscroll-behavior:none!important;
  }

  body.auth-modal-open{
    position:fixed!important;
    width:100%!important;
    left:0!important;
    right:0!important;
    overflow:hidden!important;
  }

  .auth-modal.auth-modal-modern{
    display:flex!important;
    align-items:flex-start!important;
    justify-content:center!important;
    inset:auto 0 auto 0!important;
    top:var(--auth-vv-top,0px)!important;
    width:100%!important;
    height:var(--auth-vv-height,100dvh)!important;
    min-height:0!important;
    padding:max(8px,env(safe-area-inset-top)) 10px max(8px,env(safe-area-inset-bottom))!important;
    overflow:hidden!important;
  }

  .auth-modal-modern .auth-modal-backdrop{
    position:fixed!important;
    inset:0!important;
  }

  .auth-modal-modern .auth-modal-card{
    display:block!important;
    width:100%!important;
    max-width:520px!important;
    height:100%!important;
    max-height:100%!important;
    min-height:0!important;
    margin:0 auto!important;
    padding:16px 15px max(18px,env(safe-area-inset-bottom))!important;
    border-radius:22px!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
    scroll-padding-top:86px!important;
    scroll-padding-bottom:28px!important;
    background:rgba(255,255,255,.985)!important;
    box-shadow:0 16px 46px rgba(31,20,29,.23)!important;
    transform:none!important;
  }

  .auth-modal-modern .auth-modal-close{
    position:sticky!important;
    top:0!important;
    float:left!important;
    z-index:30!important;
    width:34px!important;
    height:34px!important;
    margin:0 0 -34px 0!important;
    background:#f7edf1!important;
    box-shadow:0 2px 10px rgba(31,20,29,.05)!important;
  }

  .auth-modal-brand{
    min-height:58px!important;
    gap:10px!important;
    padding:0 2px 12px 40px!important;
    align-items:center!important;
  }
  .auth-brand-mark{
    flex:0 0 48px!important;
    width:48px!important;
    height:46px!important;
    border-radius:14px!important;
  }
  .auth-brand-mark img{width:38px!important;height:30px!important}
  .auth-modal-brand small{font-size:9px!important}
  .auth-modal-brand h2{font-size:18px!important;line-height:1.35!important}
  .auth-modal-brand p{font-size:9.5px!important;line-height:1.55!important;margin-top:1px!important}

  .auth-modal-modern .auth-modal-tabs{
    position:sticky!important;
    top:0!important;
    z-index:20!important;
    margin:0 0 12px!important;
    padding:4px!important;
    min-height:46px!important;
    border-radius:14px!important;
    background:rgba(252,238,242,.97)!important;
    -webkit-backdrop-filter:blur(10px)!important;
    backdrop-filter:blur(10px)!important;
  }
  .auth-modal-modern .auth-modal-tabs button{
    min-height:38px!important;
    padding:7px 8px!important;
    font-size:12px!important;
    border-radius:10px!important;
  }

  .auth-social-login{margin:0 0 12px!important}
  .auth-google-button{height:44px!important;border-radius:13px!important;font-size:12px!important}
  .auth-google-mark{width:23px!important;height:23px!important;flex-basis:23px!important}
  .auth-google-logo{width:21px!important;height:21px!important}
  .auth-social-divider{margin-top:10px!important;font-size:10px!important}

  .auth-modern-field{margin-bottom:10px!important}
  .auth-modern-field input{
    height:50px!important;
    min-height:50px!important;
    padding:17px 43px 6px 12px!important;
    border-radius:14px!important;
    font-size:16px!important;
  }
  .auth-modern-field label{right:43px!important;top:14px!important;font-size:12px!important}
  .auth-modern-field input:focus+label,
  .auth-modern-field input:not(:placeholder-shown)+label{top:4px!important;font-size:9px!important}
  .auth-field-icon{right:14px!important;top:14px!important;font-size:15px!important}
  .auth-password-field input{padding-left:58px!important}
  .auth-password-toggle{left:9px!important;top:10px!important;height:30px!important}

  .auth-primary-action{
    min-height:48px!important;
    margin-top:3px!important;
    border-radius:14px!important;
    font-size:14px!important;
  }
  .auth-form-note{margin:11px 0 2px!important;font-size:11px!important}

  .auth-register-progress{margin:0 2px 12px!important;gap:8px!important}
  .auth-register-progress>span b{width:25px!important;height:25px!important}
  .auth-step-intro{margin-bottom:10px!important}
  .auth-step-intro h3{font-size:16px!important}
  .auth-step-intro p{font-size:10.5px!important}
  .auth-register-actions{grid-template-columns:88px minmax(0,1fr)!important;gap:8px!important}
  .auth-privacy-note{margin-top:8px!important}

  /* When the software keyboard is visible, remove decorative blocks and keep the form compact. */
  .auth-modal.auth-keyboard-open .auth-modal-card{
    padding-top:8px!important;
    border-radius:16px!important;
    scroll-padding-top:58px!important;
    scroll-padding-bottom:20px!important;
  }
  .auth-modal.auth-keyboard-open .auth-modal-brand{
    display:none!important;
  }
  .auth-modal.auth-keyboard-open .auth-modal-close{
    position:absolute!important;
    top:8px!important;
    left:9px!important;
  }
  .auth-modal.auth-keyboard-open .auth-modal-tabs{
    top:0!important;
    margin:0 42px 9px 0!important;
    min-height:40px!important;
  }
  .auth-modal.auth-keyboard-open .auth-modal-tabs button{
    min-height:33px!important;
    padding:5px 7px!important;
  }
  .auth-modal.auth-keyboard-open .auth-social-login{
    display:none!important;
  }
  .auth-modal.auth-keyboard-open .auth-register-progress{
    margin-bottom:8px!important;
  }
  .auth-modal.auth-keyboard-open .auth-step-intro{
    display:none!important;
  }
  .auth-modal.auth-keyboard-open .auth-modern-field{
    margin-bottom:8px!important;
  }
  .auth-modal.auth-keyboard-open .auth-modern-field input{
    height:46px!important;
    min-height:46px!important;
  }
  .auth-modal.auth-keyboard-open .auth-primary-action{
    min-height:44px!important;
  }
  .auth-modal.auth-keyboard-open .auth-form-note{
    margin-top:8px!important;
  }
}

@media (max-width: 360px){
  .auth-modal.auth-modal-modern{padding-inline:6px!important}
  .auth-modal-modern .auth-modal-card{padding-inline:12px!important;border-radius:18px!important}
  .auth-modal-brand p{display:none!important}
  .auth-modal-modern .auth-modal-tabs{margin-bottom:10px!important}
  .auth-modern-field input{height:48px!important;min-height:48px!important}
}