/* Have fun adding your style here :) - PS: At all times this file should contain a comment or a rule, otherwise opera might act buggy :( */

/* КЛЮЧЕВЫЕ КАДРЫ ДЛЯ ВЫРАЗИТЕЛЬНОЙ ДВОЙНОЙ ПУЛЬСАЦИИ */
@keyframes expressive-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(193, 132, 64, 0.5), 
                    0 0 0 0 rgba(193, 132, 64, 0.3);
    }
    40% {
        box-shadow: 0 0 0 12px rgba(193, 132, 64, 0), 
                    0 0 0 0 rgba(193, 132, 64, 0.6);
    }
    80% {
        box-shadow: 0 0 0 12px rgba(193, 132, 64, 0), 
                    0 0 0 22px rgba(193, 132, 64, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(193, 132, 64, 0), 
                    0 0 0 0 rgba(193, 132, 64, 0);
    }
}

/* КОНТЕЙНЕР ПЛЕЄРА */
.wp-music-container.fixed-corner {
    position: fixed;
    bottom: 12%;
    right: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    background-color: #fff;
    border-radius: 30px;
    border: 2px solid #C18440;
    z-index: 999999;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    height: 48px;
    box-sizing: border-box;
    overflow: hidden;
    animation: expressive-pulse 2s infinite ease-in-out;
}

/* ТЕКСТ-ПРОМОКОМАНДА */
.music-vibe-text {
    font-family: sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: #C18440;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    transition: color 0.2s ease;
}
.music-vibe-text:hover {
    color: #a36b32;
}

/* РОЗКРИТТЯ ХОВЕРУ (ДЛЯ ПОВЗУНКА ГУЧНОСТІ) */
.wp-music-container.fixed-corner:hover {
    padding: 10px 7px;
    box-shadow: 0 4px 15px rgba(193, 132, 64, 0.25);
}

/* ІКОНКА-КНОПКА */
.music-icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: #C18440;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}
.music-icon-btn:hover {
    transform: scale(1.15);
}

/* ПОЛЗУНОК */
.music-volume-slider {
    width: 0px;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: #f8f2eb;
    border-radius: 3px;
    outline: none;
    cursor: pointer;
    opacity: 0;
    transition: width 0.3s ease, opacity 0.2s ease;
}

/* Позунок виїжджає лише при наведенні */
.wp-music-container.fixed-corner:hover .music-volume-slider {
    width: 70px;
    opacity: 1;
}

/* БІГУНОК ХРОМ */
.music-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #C18440;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}

/* БІГУНОК ФАЄРФОКС */
.music-volume-slider::-moz-range-thumb {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #C18440;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
    cursor: pointer;
}

/* General Custom CSS */




/*
Desktop Styles
================================================== */
/* Note: Add new css to the media query below that you want to only effect the desktop view of your site */

@media only screen and (min-width: 768px) {
  /* Add your Desktop Styles here */

}



/*
Mobile Styles
================================================== */
/* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */

@media only screen and (max-width: 767px) {
  /* Add your Mobile Styles here */

}