/*
 * Вход по звонку-сбросу (widget/login/phone): подсказка под телефоном и карточка «Звоним на …» между телефоном и кодом.
 * ui-ux-pro-max: ожидание не «замирает» — мягкие волны вокруг трубки (transform/opacity, 1,6 с, по кругу), пример номера
 * с подсвеченными 4 последними цифрами объясняет, где взять код, не только цветом; при prefers-reduced-motion — статично.
 * Отдельный файл, чтобы не смешивать с общими стилями входа (login.css).
 */
.yg-call-hint { margin: 8px 0 0; color: var(--yg-muted, #5B7083); font-size: 13.5px; line-height: 1.45; }

.yg-call {
    display: flex; align-items: center; gap: 16px; margin: 4px 0 16px; padding: 16px;
    border-radius: 16px; background: var(--yg-sky-soft, #F0F9FF); box-shadow: inset 0 0 0 1px var(--yg-border, #D9E7F1);
    animation: yg-call-in .35s cubic-bezier(.2, .7, .2, 1) both;
}
.yg-call[hidden] { display: none; }

.yg-call__ring { position: relative; flex: none; width: 56px; height: 56px; display: grid; place-items: center; }
.yg-call__icon {
    position: relative; z-index: 1; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
    background: var(--yg-sea, #0369A1); color: #fff; box-shadow: 0 6px 16px rgba(3, 105, 161, .3);
    animation: yg-call-shake 1.6s ease-in-out infinite;
}
.yg-call__icon svg { width: 22px; height: 22px; }
.yg-call__wave {
    position: absolute; inset: 4px; border-radius: 50%; border: 2px solid var(--yg-sea, #0369A1); opacity: 0;
    animation: yg-call-wave 1.6s cubic-bezier(.2, .7, .4, 1) infinite;
}
.yg-call__wave + .yg-call__wave { animation-delay: .8s; }

.yg-call__text { display: grid; gap: 4px; min-width: 0; }
.yg-call__title { color: var(--yg-ink, #0B2E45); font-size: 16px; font-weight: 800; line-height: 1.3; }
.yg-call__title span { white-space: nowrap; }
.yg-call__sub { color: var(--yg-ink-soft, #33526A); font-size: 14px; line-height: 1.45; }
.yg-call__number {
    margin-top: 2px; color: var(--yg-muted, #5B7083); font-size: 15px; font-weight: 700; letter-spacing: .06em;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.yg-call__number mark {
    display: inline-block; min-width: 1.15em; margin: 0 1px; padding: 0 2px; border-radius: 6px; text-align: center;
    background: var(--yg-sun, #FFC123); color: var(--yg-ink, #0B2E45);
}

/* Через 25 с: звонок, скорее всего, уже был — волны стихают, текст подсказывает про пропущенные */
.yg-call.is-quiet .yg-call__wave { animation: none; opacity: 0; }
.yg-call.is-quiet .yg-call__icon { animation: none; background: var(--yg-ink, #0B2E45); box-shadow: none; }

@keyframes yg-call-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes yg-call-wave { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(1.75); opacity: 0; } }
@keyframes yg-call-shake {
    0%, 55%, 100% { transform: rotate(0); }
    10%, 30% { transform: rotate(-12deg); }
    20%, 40% { transform: rotate(12deg); }
}

@media (max-width: 400px) {
    .yg-call { gap: 12px; padding: 14px 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .yg-call, .yg-call__icon { animation: none; }
    .yg-call__wave { animation: none; opacity: .35; transform: scale(1.25); }
    .yg-call__wave + .yg-call__wave { display: none; }
}

/* Пароль: поле с кнопкой «показать» (44×44), ссылки шагов («Забыли пароль?», «Изменить номер») */
.yg-pass { position: relative; display: block; }
.yg-pass input { width: 100%; padding-right: 52px; }
.yg-pass__eye {
    position: absolute; top: 50%; right: 4px; transform: translateY(-50%); width: 44px; height: 44px; border: 0; border-radius: 12px;
    display: grid; place-items: center; background: transparent; color: var(--yg-muted, #5B7083); cursor: pointer;
}
.yg-pass__eye:hover, .yg-pass__eye[aria-pressed="true"] { color: var(--yg-sea, #0369A1); }
.yg-pass__eye:focus-visible { outline: 3px solid var(--yg-sun, #FFC123); outline-offset: 0; }
.yg-pass__eye svg { width: 20px; height: 20px; }
.yg-step-back, .yg-step-forgot { display: inline-block; margin-top: 8px; }

/* «Номер подтверждён. Придумайте пароль» — спокойная карточка с солнечной полосой: успех и следующий шаг */
.yg-newpass {
    display: grid; gap: 6px; margin: 0 0 12px; padding: 16px; border-radius: 16px;
    background: var(--yg-sky-soft, #F0F9FF); box-shadow: inset 4px 0 0 var(--yg-sun, #FFC123), inset 0 0 0 1px var(--yg-border, #D9E7F1);
    animation: yg-call-in .35s cubic-bezier(.2, .7, .2, 1) both;
}
.yg-newpass[hidden] { display: none; }
.yg-newpass__title { color: var(--yg-ink, #0B2E45); font-size: 16px; font-weight: 800; line-height: 1.3; }
.yg-newpass__sub { color: var(--yg-ink-soft, #33526A); font-size: 14px; line-height: 1.45; }
.yg-newpass .yg-auth-phone__field { margin-top: 8px; margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .yg-newpass { animation: none; } }

/* «Звонок не пришёл? Позвоните нам сами» — заметная, но второстепенная плашка-кнопка (44 px, не путать с главной) */
.yg-inbound-offer {
    display: block; width: 100%; min-height: 44px; margin: -4px 0 16px; padding: 12px 14px; border: 0; border-radius: 14px;
    background: #fff; box-shadow: inset 0 0 0 2px var(--yg-sun, #FFC123); color: var(--yg-ink-soft, #33526A);
    font: inherit; font-size: 14px; line-height: 1.4; text-align: left; cursor: pointer;
    animation: yg-call-in .35s cubic-bezier(.2, .7, .2, 1) both;
}
.yg-inbound-offer[hidden] { display: none; }
.yg-inbound-offer b { display: block; color: var(--yg-ink, #0B2E45); font-size: 15px; }
.yg-inbound-offer:hover { background: var(--yg-sky-soft, #F0F9FF); }
.yg-inbound-offer:focus-visible { outline: 3px solid var(--yg-sun, #FFC123); outline-offset: 2px; }

/* Исходящий: человек звонит нам — трубка солнечная, волны «к нам»; номер — крупная ссылка tel: */
.yg-call--out .yg-call__icon { background: var(--yg-sun, #FFC123); color: var(--yg-ink, #0B2E45); box-shadow: 0 6px 16px rgba(242, 169, 0, .35); }
.yg-call--out .yg-call__wave { border-color: var(--yg-sun-dark, #F2A900); animation-direction: reverse; }
.yg-call--out .yg-call__title a { color: var(--yg-sea, #0369A1); white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .yg-inbound-offer { animation: none; } }