/* Come To UK Academy login structure. This is the final structural layer for Klassroom login. */
body.pagelayout-login .klassroom-login-card{width:min(100%,980px)!important;max-width:980px!important;display:flex!important;align-items:stretch!important;overflow:hidden!important}
body.pagelayout-login .klassroom-login-left{flex:0 0 52%!important;width:52%!important;min-width:0!important}
body.pagelayout-login .klassroom-login-right{flex:1 1 48%!important;width:48%!important;min-width:0!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:36px!important;text-align:center!important}
body.pagelayout-login .klassroom-login-inner{padding:38px 42px!important}

/* Moodle 5.2 renders the password field through core/togglesensitive.
   Keep Moodle's native input-group intact and override Klassroom's legacy display:unset rule. */
body.pagelayout-login .login-form-password{position:relative!important}
body.pagelayout-login .login-form-password .toggle-sensitive-wrapper.input-group{display:flex!important;flex-wrap:nowrap!important;align-items:stretch!important;width:80%!important;max-width:100%!important;margin:0 auto!important;padding:0!important}
body.pagelayout-login .login-form-password .toggle-sensitive-wrapper.input-group>#password{display:block!important;flex:1 1 auto!important;width:1%!important;min-width:0!important;height:42px!important;margin:0!important;padding:8px 12px!important;border:0!important;border-bottom:2px solid #fff!important;border-radius:0!important;background:transparent!important;color:#fff!important;box-shadow:none!important}
body.pagelayout-login .login-form-password .toggle-sensitive-wrapper.input-group>.toggle-sensitive-btn{position:static!important;inset:auto!important;transform:none!important;display:inline-flex!important;flex:0 0 42px!important;align-items:center!important;justify-content:center!important;width:42px!important;min-width:42px!important;max-width:42px!important;height:42px!important;min-height:42px!important;max-height:42px!important;margin:0!important;padding:0!important;align-self:flex-end!important;border:0!important;border-bottom:2px solid #fff!important;border-radius:0!important;background:transparent!important;background-image:none!important;color:#fff!important;box-shadow:none!important;filter:none!important}
body.pagelayout-login .login-form-password .toggle-sensitive-wrapper.input-group>.toggle-sensitive-btn:hover,
body.pagelayout-login .login-form-password .toggle-sensitive-wrapper.input-group>.toggle-sensitive-btn:focus,
body.pagelayout-login .login-form-password .toggle-sensitive-wrapper.input-group>.toggle-sensitive-btn:active{background:rgba(255,255,255,.08)!important;color:#fff!important;outline:0!important;box-shadow:none!important}
body.pagelayout-login .login-form-password .toggle-sensitive-wrapper.input-group>.toggle-sensitive-btn .icon{margin:0!important;color:inherit!important}
body.pagelayout-login .login-form-password .toggle-sensitive-wrapper.input-group>#password:focus{border:1px solid rgba(255,255,255,.75)!important;border-right:0!important;border-radius:6px 0 0 6px!important;padding:8px 12px!important;background:rgba(255,255,255,.04)!important;box-shadow:0 0 0 2px rgba(255,255,255,.12),0 0 8px rgba(255,255,255,.18)!important}
body.pagelayout-login .login-form-password .toggle-sensitive-wrapper.input-group>#password:focus+.toggle-sensitive-btn{border:1px solid rgba(255,255,255,.75)!important;border-left:0!important;border-radius:0 6px 6px 0!important;background:rgba(255,255,255,.04)!important;box-shadow:0 0 0 2px rgba(255,255,255,.12),0 0 8px rgba(255,255,255,.18)!important}

body.pagelayout-login .klassroom-login-branding{width:100%!important;max-width:420px!important;margin:auto!important;text-align:center!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:14px!important}
body.pagelayout-login .klassroom-login-brand-logo{width:100%!important;text-align:center!important;margin:0!important}
body.pagelayout-login .klassroom-login-brand-logo img{display:block!important;width:auto!important;height:auto!important;max-width:min(72%,240px)!important;max-height:92px!important;margin:0 auto!important;object-fit:contain!important}
body.pagelayout-login .klassroom-login-brand-heading{margin:2px 0 0!important;color:#fff!important;font-size:clamp(1.7rem,3vw,2.5rem)!important;line-height:1.15!important;font-weight:800!important;letter-spacing:-.02em!important;text-align:center!important}
body.pagelayout-login .klassroom-login-brand-tagline{margin:0!important;color:rgba(255,255,255,.92)!important;font-size:clamp(.92rem,1.4vw,1.08rem)!important;line-height:1.5!important;font-weight:500!important;text-align:center!important}

@media(max-width:767px){
 body.pagelayout-login .klassroom-login-card{width:min(100%,520px)!important;max-width:520px!important;flex-direction:column!important}
 body.pagelayout-login .klassroom-login-left,body.pagelayout-login .klassroom-login-right{width:100%!important;flex:0 0 auto!important}
 body.pagelayout-login .klassroom-login-inner{padding:28px 22px!important}
 body.pagelayout-login .klassroom-login-right{padding:30px 22px 34px!important;min-height:230px!important}
 body.pagelayout-login .klassroom-login-brand-logo img{max-width:200px!important;max-height:78px!important}
 body.pagelayout-login .login-form-password .toggle-sensitive-wrapper.input-group{width:100%!important}
}

@media(max-width:390px){
 body.pagelayout-login .klassroom-login-inner{padding:24px 16px!important}
 body.pagelayout-login .login-form-password .toggle-sensitive-wrapper.input-group>.toggle-sensitive-btn{flex-basis:40px!important;width:40px!important;min-width:40px!important;max-width:40px!important}
}