/* ==========================================================================
   Pressable — эффект "утопания" с прогрессией по времени удержания.
   Быстрый тап (<250ms) → лёгкое нажатие, долгий зажим → максимум (0.94).
   Плавная кривая без ступенек.
   ========================================================================== */

.pressable {
    transition: transform 120ms cubic-bezier(0.4, 0, 0.2, 1);
    transform: scale(1) translateZ(0);
    will-change: transform;
}

/* Fallback без JS: мгновенное лёгкое нажатие */
.pressable:active {
    transform: scale(0.985) translateZ(0);
}

/* JS добавляет класс .pressing на pointerdown → запускает прогрессирующую анимацию.
   keyframes плавно доводят scale до 0.97 за 250ms. */
.pressable.pressing {
    transition: none;
    animation: pressable-press 250ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes pressable-press {
    0%   { transform: scale(1)     translateZ(0); }
    100% { transform: scale(0.97)  translateZ(0); }
}

/* Accessibility: пользователи с prefers-reduced-motion получают только лёгкий эффект */
@media (prefers-reduced-motion: reduce) {
    .pressable.pressing {
        animation: none;
        transform: scale(0.985) translateZ(0);
    }
}

/* ==========================================================================
   Обводка при нажатии и в активном состоянии.
   outline (а не border) — не влияет на layout и не перебивает существующий box-shadow.
   ========================================================================== */

/* ==========================================================================
   dd-panel (тёмная тема) — переопределяем фон/бордер/тень.
   Стили идентичны светлой теме по структуре, но цвета под #283341.
   ========================================================================== */
[data-theme="dark"] .filter_box .dd-panel,
[data-theme="dark"] .filter_box .range-panel {
    background: #283341;
    border: 1px solid rgba(255, 255, 255, 0.04);
    box-shadow: 0px 2px 10px rgb(0 0 0 / 34%);
}