/* public/css/login-popup.css: попап входа в хедере (#panel-login).
   Положение, белый фон и анимация задаются в site.css (.panel-modal), здесь только оформление содержимого.
   Подключается в site_layout.php только для гостей. */

#panel-login { width: min(92vw, 410px); border-radius: 8px; }

.login-body { padding: 44px clamp(22px, 8.5vw, 35px) 38px; }
.login-title { margin: 0 0 32px; text-align: center; font-size: clamp(20px, 6vw, 24px); font-weight: 600; line-height: 1.2; letter-spacing: 0; text-transform: none; color: #0b0d12; }

.login-close { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; color: #6b6f78; }
.login-close svg { width: 22px; height: 22px; }
.login-close:hover { color: #111; }

#panel-login [hidden] { display: none !important; }
#panel-login label { display: block; margin: 0 0 8px; font-size: 14px; font-weight: 300; line-height: 1.2; color: rgba(17, 17, 17, .62); }
#panel-login input[type=email], #panel-login input[type=text] {
    display: block; width: 100%; height: 44px; padding: 0 12px; font: inherit; font-size: 14px; font-weight: 300; color: #111;
    background: #fff; border: 1px solid #d9d9d9; border-radius: 4px; outline: none; -webkit-appearance: none; appearance: none;
    transition: border-color .2s;
}
#panel-login input::placeholder { color: #c4c4c4; }
#panel-login input:focus { border-color: #111; }
#panel-login input:disabled { color: #9aa0ab; background: #f6f6f6; }
#panel-login #otp { height: 52px; font-size: 24px; letter-spacing: .5em; text-align: center; text-indent: .5em; }

#panel-login .error { min-height: 18px; margin-top: 8px; font-size: 13px; line-height: 1.3; color: #d62d2d; }
#panel-login .info { margin-top: 4px; font-size: 13px; line-height: 1.3; color: #1f8f5f; }

/* кнопка «Войти»: чёрная капсула по центру */
#panel-login .btn {
    display: block; min-width: 148px; height: 40px; margin: 18px auto 0; padding: 0 32px; font: inherit; font-size: 15px; font-weight: 500;
    color: #fff; background: #171717; border: 0; border-radius: 999px; cursor: pointer; transition: background .2s, opacity .2s;
}
#panel-login .btn:hover:not(:disabled) { background: #000; }
#panel-login .btn:disabled { opacity: .55; cursor: default; }

#panel-login .hint { margin: 18px 0 0; text-align: center; font-size: 13px; font-weight: 300; line-height: 1.4; color: rgba(17, 17, 17, .62); }
#panel-login .link {
    padding: 0; font: inherit; color: #8d97ad; background: none; border: 0; cursor: pointer;
    text-decoration: underline; text-underline-offset: 3px; transition: color .2s;
}
#panel-login .link:hover:not(:disabled) { color: #111; }
#panel-login .link:disabled { color: #c2c6d0; text-decoration: none; cursor: default; }