/* Login dialog follows the shop's dark surfaces and orange action colour. */
:is(#ovLogin,#ovChangePassword){padding:16px;}
:is(#ovLogin,#ovChangePassword) .login-modal{max-width:440px;max-height:min(88vh,calc(100dvh - 32px));border-radius:20px;}
:is(#ovLogin,#ovChangePassword) .modal-header{align-items:flex-start;padding:28px 28px 0;border-bottom:0;gap:16px;}
:is(#ovLogin,#ovChangePassword) .login-heading{min-width:0;}
:is(#ovLogin,#ovChangePassword) .login-mark{display:flex;align-items:center;justify-content:center;width:46px;height:46px;margin-bottom:20px;border-radius:14px;background:var(--surface-2);color:var(--ember);}
:is(#ovLogin,#ovChangePassword) .login-mark svg{width:24px;height:24px;}
:is(#ovLogin,#ovChangePassword) .modal-header h3{font-family:inherit;font-size:23px;font-weight:700;line-height:1.35;letter-spacing:-.025em;}
:is(#ovLogin,#ovChangePassword) .login-intro{margin:8px 0 0;color:var(--muted);font-size:14px;line-height:1.65;}
:is(#ovLogin,#ovChangePassword) .modal-close{display:flex;align-items:center;justify-content:center;flex:none;width:34px;height:34px;padding:0;margin:-8px -8px 0 0;border-radius:50%;background:var(--surface);font-size:22px;line-height:1;transition:color .15s,background .15s;}
:is(#ovLogin,#ovChangePassword) .modal-close:hover{background:var(--surface-2);color:var(--text);}
:is(#ovLogin,#ovChangePassword) .modal-body{padding:26px 28px 0;}
:is(#ovLogin,#ovChangePassword) .login-box{gap:20px;}
:is(#ovLogin,#ovChangePassword) label{margin-bottom:9px;font-size:13px;font-weight:600;color:var(--text);}
:is(#ovLogin,#ovChangePassword) .login-field{position:relative;}
:is(#ovLogin,#ovChangePassword) .login-field-icon{position:absolute;left:15px;top:50%;width:19px;height:19px;transform:translateY(-50%);color:var(--muted);pointer-events:none;}
:is(#ovLogin,#ovChangePassword) .login-input{display:block;width:100%;min-width:0;min-height:50px;margin:0;padding:13px 14px 13px 44px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2);color:var(--text);font:inherit;font-size:16px;line-height:1.4;caret-color:var(--ember);transition:border-color .15s,background .15s;}
:is(#ovLogin,#ovChangePassword) .login-input::placeholder{color:var(--muted);opacity:.7;font-size:14px;}
:is(#ovLogin,#ovChangePassword) .login-input:focus{border-color:var(--ember);background:var(--surface);outline:2px solid var(--ember-dim);outline-offset:2px;}
:is(#ovLogin,#ovChangePassword) #pwInput{padding-right:48px;}
:is(#ovLogin,#ovChangePassword) .password-toggle{position:absolute;right:8px;top:50%;display:flex;align-items:center;justify-content:center;width:38px;height:38px;transform:translateY(-50%);padding:0;border-radius:7px;background:transparent;color:var(--muted);}
:is(#ovLogin,#ovChangePassword) .password-toggle svg{width:19px;height:19px;}
:is(#ovLogin,#ovChangePassword) .password-toggle:hover,:is(#ovLogin,#ovChangePassword) .password-toggle[aria-pressed=true]{color:var(--ember);background:var(--surface);}
:is(#ovLogin,#ovChangePassword) .modal-footer{display:grid;grid-template-columns:1fr 1.65fr;gap:12px;padding:28px;}
:is(#ovLogin,#ovChangePassword) .modal-footer .btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 14px;border-radius:10px;font-size:14px;font-weight:700;}
:is(#ovLogin,#ovChangePassword) #cancelLogin{background:transparent;color:var(--muted);}
:is(#ovLogin,#ovChangePassword) #cancelLogin:hover{color:var(--text);border-color:var(--muted);}
:is(#ovLogin,#ovChangePassword) #submitLogin{background:var(--ember);color:var(--bg);box-shadow:none;}
:is(#ovLogin,#ovChangePassword) #submitLogin:disabled{cursor:wait;opacity:.75;}
#ovChangePassword .login-input{padding-right:48px;}
#ovChangePassword .password-cancel{background:transparent;color:var(--muted);}
#ovChangePassword .password-cancel:hover{color:var(--text);border-color:var(--muted);}
#ovChangePassword .password-submit{background:var(--ember);color:var(--bg);box-shadow:none;}
#ovChangePassword .password-submit:disabled{cursor:wait;opacity:.75;}
#ovChangePassword .password-form-error{margin:4px 0 0;color:var(--danger);font-size:13px;line-height:1.6;}
@media(max-width:380px){
  :is(#ovLogin,#ovChangePassword) .modal-header{padding:24px 20px 0;}
  :is(#ovLogin,#ovChangePassword) .modal-header h3{font-size:21px;}
  :is(#ovLogin,#ovChangePassword) .modal-body{padding:22px 20px 0;}
  :is(#ovLogin,#ovChangePassword) .modal-footer{padding:24px 20px;gap:10px;}
}