/* Final shared styling for Login and Registration controls. */
:root{--auth-deep:#075f59;--auth-deep-dark:#054c47;--auth-deep-light:#087f75}

body:has(.login-page) .login-submit,
body:has(.signup-page) .signup-submit{
 display:block!important;
 width:100%!important;
 min-height:48px!important;
 margin-top:2px!important;
 padding:0 18px!important;
 border:2px solid var(--auth-deep)!important;
 border-radius:30px!important;
 background:linear-gradient(180deg,var(--auth-deep-light),var(--auth-deep-dark))!important;
 color:#fff!important;
 font:700 17px/1 Arial,sans-serif!important;
 text-align:center!important;
 cursor:pointer!important;
 box-shadow:0 8px 15px rgba(2,73,67,.28)!important;
}

body:has(.login-page) .login-submit:hover,
body:has(.signup-page) .signup-submit:hover{
 background:linear-gradient(180deg,#096f67,#043f3b)!important;
}

body:has(.login-page) .login-submit:focus-visible,
body:has(.signup-page) .signup-submit:focus-visible{
 outline:3px solid rgba(255,255,255,.72)!important;
 outline-offset:2px!important;
}

/* Make the hero, form and remaining viewport one seamless teal surface. */
body:has(.login-page) .login-page,
body:has(.signup-page) .signup-page{
 background:#12b6aa!important;
}

body:has(.login-page) .login-hero,
body:has(.signup-page) .signup-hero{
 margin-bottom:-1px!important;
 border:0!important;
}

body:has(.login-page) .login-form-panel,
body:has(.signup-page) .signup-form-panel{
 min-height:calc(100dvh - clamp(185px,32vh,250px) + 1px)!important;
 margin:0!important;
 border:0!important;
 background:#12b6aa!important;
 box-shadow:none!important;
}

/* Keep authentication fields fixed when they receive focus. */
body:has(.login-page) .login-input,
body:has(.signup-page) .signup-input{
 position:relative!important;
 z-index:1;
 transform:none!important;
 transition:none!important;
 will-change:auto;
}

body:has(.login-page) .login-input:focus-within,
body:has(.signup-page) .signup-input:focus-within{
 z-index:1;
 transform:none!important;
 border-color:#075f59!important;
 box-shadow:0 0 0 2px rgba(255,255,255,.52)!important;
}

@media(max-width:380px){
 body:has(.login-page) .login-input:focus-within,
 body:has(.signup-page) .signup-input:focus-within{
  transform:none!important;
 }
}

@media(prefers-reduced-motion:reduce){
 body:has(.login-page) .login-input,
 body:has(.signup-page) .signup-input{transition:none!important}
}

/* High-contrast text on the teal authentication background. */
body:has(.login-page) .login-title,
body:has(.signup-page) .signup-title-row h2,
body:has(.login-page) .login-create a,
body:has(.signup-page) .signup-login a{
 color:#fff!important;
}

/* Center the BIRLA PAINTS mark inside both authentication hero images. */
body:has(.login-page) .login-brand-logo,
body:has(.signup-page) .signup-brand-logo{
 display:block!important;
 position:absolute!important;
 z-index:4!important;
 left:50%!important;
 bottom:18px!important;
 width:82px!important;
 height:82px!important;
 border:3px solid #fff!important;
 border-radius:50%!important;
 object-fit:cover!important;
 transform:translateX(-50%)!important;
 box-shadow:0 8px 20px rgba(0,45,42,.38)!important;
}

@media(max-width:380px){
 body:has(.login-page) .login-brand-logo,
 body:has(.signup-page) .signup-brand-logo{
  width:72px!important;
  height:72px!important;
 }
}

/* Reference-sized auth controls: comfortably tall without oversized corners. */
body:has(.login-page) .login-language-toggle,
body:has(.signup-page) .signup-language-toggle{
 min-height:42px!important;
 padding:9px 15px!important;
}
body:has(.login-page) .login-input,
body:has(.signup-page) .signup-input{
 min-height:54px!important;
 border-radius:9px!important;
}
body:has(.login-page) .login-input input,
body:has(.signup-page) .signup-input input{
 min-height:50px!important;
 padding-top:0!important;
 padding-bottom:0!important;
 font-size:16px!important;
}
body:has(.login-page) .login-phone-input>span,
body:has(.signup-page) .signup-phone-input>span,
body:has(.signup-page) .signup-icon-input>span{
 height:34px!important;
}
body:has(.login-page) .login-password-input>button,
body:has(.signup-page) .signup-password-input>button{
 height:50px!important;
}
body:has(.login-page) .login-submit,
body:has(.signup-page) .signup-submit{
 min-height:54px!important;
}