/**
 * auth-forgot-success.css — состояние «Письмо отправлено» для страницы восстановления пароля.
 * Drop-in дополнение к auth-ui.css. Подключается ТОЛЬКО на client/forgot-password
 * (отдельной строкой в $body['header_after_theme'], ПОСЛЕ auth-ui.css).
 *
 * Всё изолировано под .dm-auth и префиксом dm- — на login/register/reset не влияет.
 * Переиспользует токены и .dm-steps/.dm-step (анимация dmStepIn) из auth-ui.css.
 */

/* ---- верхняя прогресс-полоса карточки (загрузка + авто-возврат) ----
   Дремлет на всех .user-form-card (width:0, opacity:0); активна только когда
   forgot-password добавляет .is-loading / .is-redirect. Другие страницы не трогает. */
.dm-auth .user-form-card { position: relative; overflow: hidden; }
.dm-auth .user-form-card::before {
    content: ""; position: absolute; top: 0; left: 0; height: 4px; width: 0%;
    background: linear-gradient(90deg, var(--dm-accent-strong), var(--dm-accent));
    border-radius: 0 4px 4px 0; opacity: 0; transition: opacity .2s ease;
}
.dm-auth .user-form-card.is-loading::before { opacity: 1; animation: dmTopLoad 1.5s cubic-bezier(.4,0,.2,1) forwards; }
.dm-auth .user-form-card.is-redirect::before { opacity: 1; width: 0%; animation: dmTopRedirect var(--dm-redirect, 6s) linear forwards; }
@keyframes dmTopLoad { 0% { width: 8%; } 60% { width: 72%; } 100% { width: 90%; } }
@keyframes dmTopRedirect { from { width: 100%; } to { width: 0%; } }

/* =================================================================
   УСПЕХ — «Письмо отправлено»
   База = конечное (видимое) состояние; анимация идёт ИЗ скрытого.
   Если анимация не проигралась — контент всё равно виден.
   ================================================================= */
.dm-auth .dm-sent { text-align: center; }

/* печать с галочкой */
.dm-auth .dm-seal { position: relative; width: 96px; height: 96px; margin: 6px auto 22px; }
.dm-auth .dm-seal .ring-pulse {
    position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--dm-accent-strong);
    opacity: 0; transform: scale(.6);
}
.dm-auth .dm-step.is-on .dm-seal .ring-pulse { animation: dmRing 1.1s ease-out .25s 1; }
@keyframes dmRing { 0% { opacity: .5; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.5); } }

.dm-auth .dm-seal .disc {
    position: absolute; inset: 0; border-radius: 50%;
    background: radial-gradient(120% 120% at 50% 0%, #eafcdd 0%, #d7f8c0 100%);
    box-shadow: 0 10px 26px rgba(116,217,47,.30), inset 0 0 0 1.5px rgba(116,217,47,.30);
    display: flex; align-items: center; justify-content: center;
    transform: scale(1); opacity: 1;
}
.dm-auth .dm-step.is-on .dm-seal .disc { animation: dmPop .5s cubic-bezier(.34,1.56,.64,1) .08s both; }
@keyframes dmPop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.dm-auth .dm-seal svg.check { width: 46px; height: 46px; color: #1d8a3a; overflow: visible; }
.dm-auth .dm-seal svg.check path {
    fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 40; stroke-dashoffset: 0;
}
.dm-auth .dm-step.is-on .dm-seal svg.check path { animation: dmDraw .5s cubic-bezier(.65,0,.35,1) .42s both; }
@keyframes dmDraw { from { stroke-dashoffset: 40; } to { stroke-dashoffset: 0; } }

/* заголовок/текст успеха */
.dm-auth .dm-sent h2 { font-size: 25px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 9px; color: var(--dm-text); }
.dm-auth .dm-sent .lede { font-size: 14px; line-height: 1.6; color: #5b6470; margin: 0 0 4px; }
.dm-auth .dm-sent .to-email {
    display: inline-flex; align-items: center; gap: 8px; margin: 14px 0 2px; padding: 9px 14px;
    background: var(--dm-control-bg); border-radius: 999px; font-size: 14px; font-weight: 700; color: var(--dm-text);
    max-width: 100%; word-break: break-all;
}
.dm-auth .dm-sent .to-email .dm-ic { color: var(--dm-accent-strong); font-size: 15px; flex: 0 0 auto; }

/* подсказка про спам */
.dm-auth .dm-sent .hint {
    display: flex; gap: 9px; align-items: flex-start; text-align: left; margin: 20px 0 4px; padding: 12px 14px;
    border-radius: var(--dm-radius-m); background: var(--dm-accent-tint); color: #2f4d18; font-size: 12px; line-height: 1.5;
}
.dm-auth .dm-sent .hint .dm-ic { margin-top: 1px; color: var(--dm-accent-strong); flex: 0 0 auto; font-size: 14px; }

/* действия */
.dm-auth .dm-sent .acts { margin-top: 22px; }
.dm-auth .dm-sent .btn-primary {
    width: 100%; min-height: 52px; border: 1.5px solid transparent; border-radius: var(--dm-radius-m);
    background: var(--dm-accent); color: #0a0f08; font: inherit; font-size: 14.5px; font-weight: 700; letter-spacing: .03em;
    text-transform: uppercase; cursor: pointer; box-shadow: 0 8px 20px rgba(143,244,81,.34); transition: .18s ease;
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
}
.dm-auth .dm-sent .btn-primary:hover { background: var(--dm-accent-soft); border-color: var(--dm-accent); transform: translateY(-1px); }
.dm-auth .dm-sent .btn-primary:active { transform: translateY(0); }

/* счётчик авто-возврата */
.dm-auth .dm-countdown {
    margin-top: 18px; font-size: 12.5px; color: var(--dm-muted);
    display: inline-flex; align-items: center; gap: 7px; justify-content: center;
}
.dm-auth .dm-countdown b { color: var(--dm-link); font-weight: 700; }

/* стаггер появления контента успеха */
.dm-auth .dm-rise { opacity: 1; transform: none; }
.dm-auth .dm-step.is-on .dm-rise { animation: dmRise .5s ease both; }
.dm-auth .dm-step.is-on .dm-rise.d1 { animation-delay: .30s; }
.dm-auth .dm-step.is-on .dm-rise.d2 { animation-delay: .42s; }
.dm-auth .dm-step.is-on .dm-rise.d3 { animation-delay: .54s; }
.dm-auth .dm-step.is-on .dm-rise.d4 { animation-delay: .66s; }
.dm-auth .dm-step.is-on .dm-rise.d5 { animation-delay: .78s; }
@keyframes dmRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    .dm-auth .dm-step.is-on .dm-seal .disc,
    .dm-auth .dm-step.is-on .dm-seal svg.check path,
    .dm-auth .dm-step.is-on .dm-seal .ring-pulse,
    .dm-auth .dm-step.is-on .dm-rise { animation: none !important; }
}