/* TrendishShop v249 — slim and compact login/register modal */

/* Desktop / tablet: noticeably smaller, cleaner card */
@media (min-width:601px){
  .auth-modal.auth-modal-modern{
    padding:18px!important;
  }

  .auth-modal-modern .auth-modal-card{
    width:min(455px,calc(100vw - 36px))!important;
    max-height:calc(100vh - 30px)!important;
    padding:19px 22px 18px!important;
    border-radius:22px!important;
  }

  .auth-modal-modern .auth-modal-close{
    top:11px!important;
    left:11px!important;
    width:31px!important;
    height:31px!important;
    font-size:21px!important;
  }

  .auth-modal-modern .auth-modal-brand{
    gap:11px!important;
    min-height:52px!important;
    padding:0 2px 11px 38px!important;
  }

  .auth-modal-modern .auth-brand-mark{
    flex-basis:52px!important;
    width:52px!important;
    height:48px!important;
    border-radius:14px!important;
  }
  .auth-modal-modern .auth-brand-mark img{
    width:42px!important;
    height:32px!important;
  }

  /* Separate auth logo from v248: wide logo, but kept delicate */
  .auth-modal-modern .auth-brand-mark.auth-brand-mark-custom{
    flex:0 0 92px!important;
    width:92px!important;
    height:50px!important;
    padding:4px 5px!important;
    border-radius:14px!important;
  }
  .auth-modal-modern .auth-brand-mark.auth-brand-mark-custom img{
    width:100%!important;
    height:100%!important;
    border-radius:9px!important;
  }

  .auth-modal-modern .auth-modal-brand small{
    margin-bottom:0!important;
    font-size:10px!important;
  }
  .auth-modal-modern .auth-modal-brand h2{
    font-size:21px!important;
    line-height:1.35!important;
  }
  .auth-modal-modern .auth-modal-brand p{
    margin-top:1px!important;
    font-size:10.5px!important;
    line-height:1.55!important;
  }

  .auth-modal-modern .auth-modal-tabs{
    padding:3px!important;
    margin-bottom:12px!important;
    border-radius:13px!important;
  }
  .auth-modal-modern .auth-modal-tabs button{
    min-height:36px!important;
    padding:7px 11px!important;
    border-radius:10px!important;
    font-size:12px!important;
  }

  .auth-modal-modern .auth-social-login{
    margin:-1px 0 11px!important;
  }
  .auth-modal-modern .auth-google-button{
    height:41px!important;
    border-radius:12px!important;
    font-size:12px!important;
  }
  .auth-modal-modern .auth-google-mark{
    width:22px!important;
    height:22px!important;
    flex-basis:22px!important;
  }
  .auth-modal-modern .auth-google-logo{
    width:20px!important;
    height:20px!important;
  }
  .auth-modal-modern .auth-social-divider{
    margin-top:8px!important;
    font-size:10px!important;
  }

  .auth-modal-modern .auth-modern-field{
    margin-bottom:9px!important;
  }
  .auth-modal-modern .auth-modern-field input{
    height:46px!important;
    min-height:46px!important;
    padding-top:17px!important;
    padding-bottom:5px!important;
    border-radius:13px!important;
  }
  .auth-modal-modern .auth-modern-field label{
    top:13px!important;
    font-size:12px!important;
  }
  .auth-modal-modern .auth-modern-field input:focus+label,
  .auth-modal-modern .auth-modern-field input:not(:placeholder-shown)+label{
    top:4px!important;
    font-size:9px!important;
  }
  .auth-modal-modern .auth-field-icon{
    top:12px!important;
    font-size:15px!important;
  }
  .auth-modal-modern .auth-password-toggle{
    top:9px!important;
    height:27px!important;
  }

  .auth-modal-modern .auth-primary-action{
    min-height:45px!important;
    margin-top:3px!important;
    border-radius:13px!important;
    box-shadow:0 9px 20px rgba(232,140,171,.17)!important;
  }
  .auth-modal-modern .auth-primary-action b{
    font-size:16px!important;
  }
  .auth-modal-modern .auth-form-note{
    margin-top:10px!important;
    font-size:10.5px!important;
  }

  .auth-modal-modern .auth-register-progress{
    gap:9px!important;
    margin:0 2px 11px!important;
  }
  .auth-modal-modern .auth-register-progress>span{
    gap:5px!important;
    font-size:10px!important;
  }
  .auth-modal-modern .auth-register-progress>span b{
    width:24px!important;
    height:24px!important;
    font-size:10px!important;
  }
  .auth-modal-modern .auth-step-intro{
    margin-bottom:9px!important;
  }
  .auth-modal-modern .auth-step-intro h3{
    font-size:15px!important;
  }
  .auth-modal-modern .auth-step-intro p{
    font-size:10.5px!important;
  }
  .auth-modal-modern .auth-privacy-note{
    margin-top:8px!important;
    font-size:9px!important;
  }
  .auth-modal-modern .auth-register-actions{
    grid-template-columns:105px 1fr!important;
    gap:8px!important;
    margin-top:3px!important;
  }
  .auth-modal-modern .auth-back-button{
    height:45px!important;
    border-radius:13px!important;
    font-size:11px!important;
  }
  .auth-modal-modern .auth-password-strength{
    margin:-3px 2px 8px!important;
  }
}

/* Mobile was already compact; refine it a little more without hurting keyboard use. */
@media (max-width:600px){
  .auth-modal-modern .auth-modal-card{
    width:min(90vw,400px)!important;
    padding:12px 13px 14px!important;
    border-radius:18px!important;
  }
  .auth-modal-modern .auth-modal-brand{
    padding-bottom:7px!important;
  }
  .auth-modal-modern .auth-modal-tabs{
    margin-bottom:8px!important;
  }
  .auth-modal-modern .auth-modern-field{
    margin-bottom:7px!important;
  }
  .auth-modal-modern .auth-primary-action{
    min-height:42px!important;
  }
  .auth-modal-modern .auth-form-note{
    margin-top:8px!important;
  }
}