/* ============================================================================
 * MoonPopup (v39) — окно платной реакции «Луны».
 * Тёмное стекло в духе приложения. Состояния:
 *   .moon-popup__state.is-zero — лун на посте ещё нет (template-pay-reaction-zero)
 *   иначе — луны уже есть (template-pay-reaction)
 * .moon-popup__pattern — узор-луна (moon (2).svg), плавно появляется/исчезает
 *   рядом с основной луной.
 * ==========================================================================*/
.moon-popup-overlay {
    position: fixed; inset: 0; z-index: 10050; /* выше postDetailOverlay (9999) и тоста (10001) */
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity .16s ease;
    padding: 16px;
}
.moon-popup-overlay.is-open { opacity: 1; }
.moon-popup-overlay[hidden] { display: none; }

.moon-popup {
    position: relative;
    width: 100%; max-width: 330px;
    box-sizing: border-box;
    padding: 22px 20px 18px;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,.10);
    background: #171a22; /* v45 */
    color: var(--text, #eef1f8);
    box-shadow: 0 18px 60px rgba(0,0,0,.5);
    transform: translateY(10px) scale(.96);
    transition: transform .16s ease;
    text-align: center;
    font: inherit;
}
.moon-popup-overlay.is-open .moon-popup { transform: translateY(0) scale(1); }

.moon-popup__close {
    position: absolute; top: 10px; right: 10px;
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 0;
    background: rgba(255,255,255,.08);
    color: var(--text, #fff);
    font-size: 18px; line-height: 1;
    cursor: pointer;
    transition: background .15s ease;
}
.moon-popup__close:hover { background: rgba(255,255,255,.16); }

/* основная луна + анимационный узор */
.moon-popup__moon-wrap {
    position: relative;
    width: 84px; height: 84px;
    margin: 2px auto 10px;
}
.moon-popup__moon {
    width: 84px; height: 84px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 6px 18px rgba(0,0,0,.45));
}
.moon-popup__pattern {
    position: absolute;
    width: 32px; height: 32px;
    right: -10px; top: -2px;
    object-fit: contain;
    pointer-events: none;
    opacity: 0;
    animation: moon-pattern-fade 3.2s ease-in-out infinite;
}
@keyframes moon-pattern-fade {
    0%   { opacity: 0; transform: scale(.7) rotate(-8deg); }
    45%  { opacity: 1; transform: scale(1) rotate(0deg); }
    70%  { opacity: .9; transform: scale(1.04) rotate(4deg); }
    100% { opacity: 0; transform: scale(.8) rotate(10deg); }
}
@media (prefers-reduced-motion: reduce) {
    .moon-popup__pattern { animation: none; opacity: .35; }
}

.moon-popup__title {
    font-size: 16.5px; font-weight: 700;
    letter-spacing: .2px;
}
.moon-popup__state {
    margin-top: 4px;
    font-size: 13px;
    color: var(--text-muted, #9aa3b8);
}
.moon-popup__state.is-zero { color: #8f96ab; font-style: italic; }

.moon-popup__amount-row {
    display: flex; align-items: center; justify-content: center;
    gap: 6px;
    margin: 14px 0 10px;
    flex-wrap: wrap;
}
.moon-popup__chip {
    min-width: 38px; height: 34px;
    padding: 0 9px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    color: var(--text, #fff);
    font: inherit; font-size: 13.5px; font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
.moon-popup__chip:hover { background: rgba(255,255,255,.13); }
.moon-popup__chip:active { transform: scale(.94); }

.moon-popup__input {
    width: 108px; height: 36px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(0,0,0,.28);
    color: var(--text, #fff);
    font: inherit; font-size: 14px;
    text-align: center;
    outline: none;
    transition: border-color .15s ease;
    -moz-appearance: textfield;
}
.moon-popup__input::-webkit-outer-spin-button,
.moon-popup__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.moon-popup__input:focus { border-color: var(--accent, #8b7cf7); }
.moon-popup__input.is-error { border-color: #e5484d; animation: moon-input-shake .3s ease; }
@keyframes moon-input-shake {
    0%, 100% { transform: translateX(0); }
    30% { transform: translateX(-4px); }
    60% { transform: translateX(4px); }
}

.moon-popup__balance {
    font-size: 12.5px;
    color: var(--text-muted, #9aa3b8);
    min-height: 16px;
    margin-bottom: 12px;
}

.moon-popup__actions {
    display: flex; gap: 8px;
}
.moon-popup__btn {
    flex: 1;
    height: 42px;
    border-radius: 12px;
    border: 0;
    font: inherit; font-size: 14.5px; font-weight: 700;
    cursor: pointer;
    transition: transform .12s ease, filter .15s ease, background .15s ease;
}
.moon-popup__btn:active { transform: scale(.97); }
.moon-popup__btn--ghost {
    background: rgba(255,255,255,.08);
    color: var(--text, #fff);
}
.moon-popup__btn--ghost:hover { background: rgba(255,255,255,.14); }
.moon-popup__btn--primary {
    background: #8b7cf7; /* v45 */
    color: #fff;
}
.moon-popup__btn--primary:hover { filter: brightness(1.08); }
.moon-popup__btn:disabled { opacity: .6; cursor: wait; }

/* мобильный: чуть крупнее тач-зоны */
@media (max-width: 899px) {
    .moon-popup { max-width: 320px; padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
    .moon-popup__chip { height: 38px; }
    .moon-popup__input { height: 40px; }
}

/* светлая тема */
body[data-theme="light"] .moon-popup {
    background: #f7f8fc; /* v45 */
    border-color: rgba(0,0,0,.10);
    color: #1c2130;
}
body[data-theme="light"] .moon-popup__state,
body[data-theme="light"] .moon-popup__balance { color: #5b6272; }
body[data-theme="light"] .moon-popup__chip {
    background: rgba(0,0,0,.05);
    border-color: rgba(0,0,0,.12);
    color: #1c2130;
}
body[data-theme="light"] .moon-popup__chip:hover { background: rgba(0,0,0,.10); }
body[data-theme="light"] .moon-popup__input {
    background: #fff;
    border-color: rgba(0,0,0,.14);
    color: #1c2130;
}
body[data-theme="light"] .moon-popup__close { background: rgba(0,0,0,.07); color: #1c2130; }
body[data-theme="light"] .moon-popup__btn--ghost { background: rgba(0,0,0,.06); color: #1c2130; }
body[data-theme="light"] .moon-popup__btn--ghost:hover { background: rgba(0,0,0,.11); }
body[data-theme="light"] .moon-popup-overlay { background: rgba(15,17,23,.35); }