/* ===== ИКОНКИ ===== */
.ux-panel {
 display: flex;
 align-items: center;
 gap: 15px;
}

.ux-search-wrapper {
 position: relative;
 width: 32px;
 height: 32px;
}

.ux-search-wrapper a {
 position: absolute;
 top: 0;
 left: 0;
 transition: opacity 0.3s, transform 0.3s;
}

.ux-panel a {
 cursor: pointer;
 display: flex;
}

.ux-icon-diamond svg path {
 transition: 0.3s ease;
}

.ux-icon-diamond:hover svg path {
 filter: drop-shadow(0 0 6px #33aaff);
 fill: #33aaff;
}


/* =========================================================
 ========== МОДАЛЬНОЕ ОКНО + АНИМАЦИЯ ===================
 ========================================================= */

/* Контейнер модалки */
.ux-modal {
 position: fixed;
 inset: 0;
 background: rgba(0,0,0,0.6);
 display: none;
 justify-content: center !important;
 align-items: center !important;
 z-index: 99999;
 padding: 20px;
 transition: opacity 0.3s ease;
}

/* При активном состоянии — класс добавляется JS */
.ux-modal.active {
 display: flex;
 animation: uxModalFadeIn 0.35s ease forwards;
}

/* Анимация появления */
@keyframes uxModalFadeIn {
 0% {
 opacity: 0;
 transform: scale(0.92);
 filter: blur(3px);
 }
 100% {
 opacity: 1;
 transform: scale(1);
 filter: blur(0);
 }
}

/* Анимация исчезновения (рассыпание/исчезновение кусочками) */
@keyframes uxModalShatterOut {
 0% {
 opacity: 1;
 transform: scale(1);
 filter: blur(0) contrast(100%);
 }
 40% {
 opacity: 0.5;
 transform: scale(0.95);
 filter: blur(4px) contrast(180%);
 }
 100% {
 opacity: 0;
 transform: scale(0.85);
 filter: blur(12px) contrast(250%) brightness(150%);
 }
}

/* Содержимое модалки */
.ux-modal-content {
 background: #fff;
 padding: 25px;
 width: 420px;
 max-width: 100%;
 border-radius: 12px;
 position: relative;
 box-shadow: 0 0 25px rgba(0,0,0,0.3);
 transition: transform 0.25s ease;
}

/* Иконки внутри */
.ux-modal-icons {
 display: flex;
 gap: 15px;
 margin-bottom: 20px;
}

/* Текст */
.ux-modal-text {
 font-size: 16px;
 line-height: 1.5;
}

/* Крестик */
.ux-close {
 position: absolute;
 top: 12px;
 right: 12px;
 border: none;
 background: none;
 font-size: 20px;
 cursor: pointer;
}

/* Центрирование на маленьких экранах */
@media (max-height: 500px) {
 .ux-modal {
 align-items: center !important;
 }
}