/* Кнопка с заливкой-волной — разметку воды создаёт static/js/fill_button.js */
.fill-btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.fill-btn > *:not(.fill-btn__water) {
    position: relative;
    z-index: 2;
}
.fill-btn__water {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: var(--fill-water, var(--bs-primary, #0d6efd));
    transform: translateY(100%);
    transition: transform .4s cubic-bezier(.25, 1, .5, 1);
}
.fill-btn.is-filling .fill-btn__water { transition: none; }
.fill-btn__crest {
    position: absolute;
    top: -15px;
    left: 0;
    right: 0;
    height: 16px;
    overflow: visible;
}
.fill-btn__wave {
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 100%;
    display: block;
}
.fill-btn__wave path { fill: var(--fill-water, var(--bs-primary, #0d6efd)); }
.fill-btn__wave--back {
    opacity: .45;
    animation: fill-wave-back 4.05s linear infinite;
}
.fill-btn__wave--front { animation: fill-wave-front 3s linear infinite; }
.fill-btn__body {
    position: absolute;
    top: calc(100% - 2px);
    left: 0;
    right: 0;
    height: 26px;
    background: var(--fill-water, var(--bs-primary, #0d6efd));
}
@keyframes fill-wave-front {
    from { transform: translateX(-50%); }
    to { transform: translateX(0); }
}
@keyframes fill-wave-back {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* Тёмная тема: подложка того же цвета, что и кнопка, чуть темнее воды,
   чтобы уровень читался, а надпись оставалась видимой */
.fill-btn.is-filling,
.fill-btn.is-error {
    background-color: color-mix(in srgb, var(--bs-primary, #0d6efd) 42%, #0b1220) !important;
    border-color: transparent !important;
    color: #fff !important;
}
.fill-btn.is-error { --fill-water: #dc2626; }

/* Светлая тема: без тёмной подложки — вода идёт по фону страницы,
   надпись переключается на белый, когда вода доходит до текста (класс из JS) */
[data-theme="light"] .fill-btn.is-filling,
[data-theme="light"] .fill-btn.is-error {
    background-color: transparent !important;
    border-color: var(--bs-primary, #0d6efd) !important;
    color: var(--bs-primary, #0d6efd) !important;
}
[data-theme="light"] .fill-btn.is-submerged {
    color: #fff !important;
}

@media (prefers-reduced-motion: reduce) {
    .fill-btn__wave { animation: none; }
    .fill-btn__water { transition: none; }
}