/* Version two. Version one remains in login-concept.css and login_1.ctp. */
body.login-modern{
    background:radial-gradient(ellipse at 78% 30%,#fff 0%,#f4faff 45%,#deefff 100%);
    color:#0b3b8f;
}
.login-modern #form-login{min-height:calc(100vh - 82px);padding:0}
.login-modern #form{grid-template-columns:repeat(2,minmax(0,1fr));gap:0;padding:0;align-items:center}
.login-modern .hospital-brand{
    position:relative;isolation:isolate;align-self:stretch;max-width:none;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    padding:40px 28px 32px;text-shadow:none;overflow:hidden;
    color:#fff;background:linear-gradient(145deg,#006cdf 0%,#084793 24%,#052c70 65%,#065bd0 100%);
}
.login-modern .hospital-brand:before{
    content:"";position:absolute;z-index:-1;width:650px;height:650px;
    top:-220px;right:-140px;border-radius:50%;
    background:linear-gradient(130deg,rgba(0,42,110,.26),rgba(0,136,255,.12));
}
.login-modern .hospital-brand:after{
    content:"";position:absolute;z-index:-1;width:700px;height:500px;bottom:-320px;
    left:-210px;border:32px solid rgba(0,157,255,.12);border-radius:50%;transform:rotate(20deg);
}
.login-modern .brand-cross{position:absolute;top:24px;left:30px;font:110px/1 Arial,sans-serif;color:#168cff;opacity:.18;pointer-events:none}
.login-modern .hospital-logo{height:145px;max-width:165px;margin:0 0 18px;padding:10px;background:radial-gradient(ellipse,#ffffff 35%,#eff8ff 68%,rgba(239,248,255,.0) 73%);filter:drop-shadow(0 4px 10px rgba(0,22,60,.12))}
.login-modern .hospital-brand h1{font-size:clamp(22px,2vw,34px);color:#fff;line-height:1.8}
.login-modern .hospital-name-en{color:#fff;font-size:clamp(19px,1.7vw,27px);margin-top:4px}
.login-modern .hospital-subtitle{color:#edf6ff;font-size:16px;letter-spacing:3px;margin:18px 0 0}
.login-modern .brand-rule{width:56px;height:3px;background:#15adff;margin:24px 0}
.login-modern .brand-rule:after{display:none}
.login-modern .hospital-message{color:#eef6ff;font-size:17px;line-height:1.9;text-shadow:none}
.brand-values{display:grid;grid-template-columns:repeat(3,1fr);width:100%;max-width:430px;gap:12px;margin-top:32px}
.brand-values>div{font-family:Battambang,Arial,sans-serif;font-size:14px;line-height:1.7;text-align:center}
.value-icon{display:flex;justify-content:center;align-items:center;width:64px;height:64px;margin:0 auto 10px;border-radius:50%;background:#087be633;border:1px solid #198cf88c;color:#fff}
.value-icon svg{width:34px;height:34px}
.brand-values>div:nth-child(2) .value-icon{background:#00ac9226;border-color:#00af9280}
.brand-values>div:nth-child(3) .value-icon{background:#fa9b2026;border-color:#fa9b2080}
.login-modern .login-panel{position:relative;width:calc(100% - 100px);max-width:550px;justify-self:center;margin:38px 0;padding:38px 40px;border-radius:24px;box-shadow:0 18px 48px rgba(30,88,151,.09),0 2px 8px rgba(30,88,151,.025);border:1px solid #e8f0f9}
.login-modern .login-panel h2{font-size:24px;margin-bottom:12px}
.login-modern .login-intro{font-size:14px;line-height:1.9;color:#526888;margin-bottom:28px}
.login-modern .feature-settings{background:#fff9f2}
.login-modern .login-footer{min-height:82px;padding:18px 4vw;background:linear-gradient(90deg,#065bd0 50%,#eff8ff 50%);border:0;gap:35px}
.login-modern .footer-copyright{color:#edf6ff;width:46%;font-size:12px}
.login-modern .footer-copyright svg{color:#fff}
.login-modern .login-footer .bottom-waves{display:none}
.login-modern .language-switch{margin-left:auto}
/* Local polish, including the existing CakePHP login error element. */
.login-modern .login-panel .ui-state-error{
    background:#fff4f2;border:1px solid #f2d0ca;border-left:3px solid #d76252;
    border-radius:10px;color:#a4362a;font-family:Battambang,Arial,sans-serif;
    font-size:14px;line-height:1.7;box-shadow:none;
}
.login-modern .login-panel .ui-state-error p{margin:11px 0}
.login-modern .login-panel .ui-state-error .ui-icon{margin-top:4px}
.login-modern .login-panel .ui-widget{font-family:Battambang,Arial,sans-serif}
.login-modern .icon_input{background:#fbfdff;border-color:#d6e2ef}
.login-modern .icon_input:hover{border-color:#b9cfe8}
.login-modern .icon_input:focus-within{background:#fff;border-color:#1677ff}
.login-modern .feature{border-radius:15px;box-shadow:none}
.login-modern .feature:hover{box-shadow:0 5px 14px rgba(22,77,143,.07)}
.login-modern .feature strong{font-size:13px;line-height:1.8}
.login-modern .feature span{color:#5d7391;font-size:12px}
.login-modern .value-icon{box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.login-modern .language-switch button{transition:background-color .15s}
@media(prefers-reduced-motion:reduce){
    .login-modern .language-switch button{transition:none}
}
@media(min-width:1001px) and (max-height:800px){
    .login-modern .hospital-brand{padding:26px 22px}
    .login-modern .hospital-logo{height:110px;margin-bottom:12px}
    .login-modern .hospital-brand h1{font-size:25px}
    .login-modern .hospital-name-en{font-size:21px}
    .login-modern .brand-rule{margin:18px 0}
    .login-modern .hospital-message{font-size:15px}
    .brand-values{margin-top:24px}
    .value-icon{width:54px;height:54px}
    .login-modern .login-panel{margin:24px 0;padding:28px 32px;max-width:510px}
    .login-modern .login-panel h2{font-size:24px}
    .login-modern .login-intro{font-size:14px;margin-bottom:22px}
}
@media(max-width:1000px){
    .login-modern #form{grid-template-columns:repeat(2,minmax(0,1fr))}
    .login-modern .hospital-brand{padding:32px 18px}
    .login-modern .hospital-logo{height:110px}
    .login-modern .hospital-message{font-size:15px}
    .login-modern .hospital-subtitle{font-size:13px}
    .brand-values{gap:6px}
    .brand-values>div{font-size:12px}
    .value-icon{width:46px;height:46px}
    .value-icon svg{width:27px;height:27px}
    .login-modern .login-panel{width:calc(100% - 48px);padding:28px 24px}
    .login-modern .login-panel h2{font-size:24px}
    .login-modern .login-intro{font-size:14px}
    .login-modern .login-footer{background:linear-gradient(90deg,#065bd0 50%,#eff8ff 50%)}
    .login-modern .footer-copyright{width:46%;font-size:11px}
}
@media(max-width:700px){
    .login-modern #form-login{min-height:0}
    .login-modern #form{grid-template-columns:1fr}
    .login-modern .hospital-brand{padding:28px 20px}
    .login-modern .hospital-logo{height:85px}
    .login-modern .hospital-brand h1{font-size:24px}
    .login-modern .brand-values{display:none}
    .login-modern .hospital-message{font-size:14px}
    .login-modern .brand-rule{margin:14px 0}
    .login-modern .login-panel{width:calc(100% - 32px);margin:24px auto;max-width:500px}
    .login-modern .login-footer{background:#eff8ff;padding:18px;gap:14px}
    .login-modern .footer-copyright{width:auto;max-width:440px;color:#42618c}
    .login-modern .footer-copyright svg{color:#42618c}
    .login-modern .language-switch{margin:0}
}

/* Compact typography for the login card only. */
.login-modern .login-panel .icon_input input{font-size:14px;line-height:1.8}
.login-modern .login-panel .btnLogin{font-size:18px}
.login-modern .login-panel .feature-divider{font-size:12px}
.login-modern .login-panel .login-help,
.login-modern .login-panel .ui-state-error{font-size:13px}
@media(max-width:700px){
    .login-modern .login-panel .icon_input input{font-size:16px}
}