/*
	Theme Name: Kolhakfar
	Description: Child theme of Hello Elementor for Kolhakfar website
	Template: hello-elementor
	Version: 1.1.5
	Author: Kolhakfar Team
	Text Domain: kolhakfar
*/

/* 
 * Parent theme styles are loaded via functions.php
 * This is the recommended WordPress method for child themes
 */

/* Custom styles for Kolhakfar theme */
/* Radio Player Full Width Override */
.kolhakfar-radio-player {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

/* Radio Metadata Compact Layout */
.kolhakfar-radio-player .radio-metadata {
    margin-bottom: -20px !important;
}

/* Volume Control Compact Layout */
.kolhakfar-radio-player .volume-control {
    display: flex !important;
    align-items: center !important;
    justify-content: right !important;
    gap: 8px !important;
    margin-top: -15px !important;
}

/* Pop-out Button Styling */
.kolhakfar-radio-player .popout-btn {
    background: none !important;
    border: none !important;
    font-size: 16px !important;
    cursor: pointer !important;
    padding: 4px !important;
    color: inherit !important;
    opacity: 0.8 !important;
    transition: opacity 0.2s ease !important;
}

.kolhakfar-radio-player .popout-btn:hover {
    opacity: 1 !important;
}

/* Volume Button Styling - Remove Background and Hover */
.kolhakfar-radio-player #volume-btn {
    background: none !important;
    border: none !important;
    padding: 4px !important;
    color: inherit !important;
    opacity: 0.8 !important;
    cursor: default !important;
    transition: none !important;
}

.kolhakfar-radio-player #volume-btn:hover {
    background: none !important;
    opacity: 0.8 !important;
    transform: none !important;
}

/* Muted volume slider styling */
.volume-control.muted .volume-slider::-webkit-slider-thumb {
    background-color: #888 !important;
}

.volume-control.muted .volume-slider::-moz-range-thumb {
    background-color: #888 !important;
}

/* Ensure play/pause buttons use text symbols */
.kolhakfar-radio-player .play-pause-btn .play-icon,
.kolhakfar-radio-player .play-pause-btn .pause-icon {
    font-family: Arial, sans-serif !important;
    font-size: 20px !important;
    line-height: 1 !important;
}

/* Radio Player Controls Layout */
.kolhakfar-radio-player .radio-controls {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    justify-content: flex-start !important;
}

/* Radio Player Waveform Animation */
.kolhakfar-radio-player .waveform-container {
    display: flex !important;
    align-items: center !important;
    height: 40px !important;
    margin: 0 !important;
}

.kolhakfar-radio-player .waveform {
    display: flex !important;
    align-items: flex-end !important;
    gap: 1px !important;
    height: 30px !important;
}

.kolhakfar-radio-player .waveform-bar {
     background: #666666 !important;
     width: 1.5px !important;
     border-radius: 0.5px !important;
     opacity: 0.6 !important;
     transform-origin: bottom !important;
     animation-play-state: paused !important;
 }

 .kolhakfar-radio-player.player-playing .waveform-bar {
     background: #ffffff !important;
     opacity: 0.9 !important;
     animation-play-state: running !important;
 }

 .kolhakfar-radio-player.player-paused .waveform-bar {
     background: #666666 !important;
     opacity: 0.6 !important;
     animation-play-state: paused !important;
 }

/* Individual bar animations with different heights and delays */
.kolhakfar-radio-player .waveform-bar[data-bar="0"] { height: 8px; animation: wave1 0.8s ease-in-out infinite; }
.kolhakfar-radio-player .waveform-bar[data-bar="1"] { height: 15px; animation: wave2 1.2s ease-in-out infinite; }
.kolhakfar-radio-player .waveform-bar[data-bar="2"] { height: 6px; animation: wave3 0.9s ease-in-out infinite; }
.kolhakfar-radio-player .waveform-bar[data-bar="3"] { height: 20px; animation: wave1 1.1s ease-in-out infinite; }
.kolhakfar-radio-player .waveform-bar[data-bar="4"] { height: 12px; animation: wave2 0.7s ease-in-out infinite; }
.kolhakfar-radio-player .waveform-bar[data-bar="5"] { height: 18px; animation: wave3 1.3s ease-in-out infinite; }
.kolhakfar-radio-player .waveform-bar[data-bar="6"] { height: 9px; animation: wave1 0.6s ease-in-out infinite; }
.kolhakfar-radio-player .waveform-bar[data-bar="7"] { height: 25px; animation: wave2 1.4s ease-in-out infinite; }
.kolhakfar-radio-player .waveform-bar[data-bar="8"] { height: 14px; animation: wave3 0.8s ease-in-out infinite; }
.kolhakfar-radio-player .waveform-bar[data-bar="9"] { height: 7px; animation: wave1 1.0s ease-in-out infinite; }
.kolhakfar-radio-player .waveform-bar[data-bar="10"] { height: 22px; animation: wave2 0.9s ease-in-out infinite; }
.kolhakfar-radio-player .waveform-bar[data-bar="11"] { height: 11px; animation: wave3 1.2s ease-in-out infinite; }
.kolhakfar-radio-player .waveform-bar[data-bar="12"] { height: 16px; animation: wave1 0.7s ease-in-out infinite; }
.kolhakfar-radio-player .waveform-bar[data-bar="13"] { height: 5px; animation: wave2 1.1s ease-in-out infinite; }
.kolhakfar-radio-player .waveform-bar[data-bar="14"] { height: 19px; animation: wave3 0.8s ease-in-out infinite; }
.kolhakfar-radio-player .waveform-bar[data-bar="15"] { height: 13px; animation: wave1 1.3s ease-in-out infinite; }
.kolhakfar-radio-player .waveform-bar[data-bar="16"] { height: 8px; animation: wave2 0.6s ease-in-out infinite; }
.kolhakfar-radio-player .waveform-bar[data-bar="17"] { height: 21px; animation: wave3 1.0s ease-in-out infinite; }
.kolhakfar-radio-player .waveform-bar[data-bar="18"] { height: 10px; animation: wave1 0.9s ease-in-out infinite; }
.kolhakfar-radio-player .waveform-bar[data-bar="19"] { height: 17px; animation: wave2 1.2s ease-in-out infinite; }
.kolhakfar-radio-player .waveform-bar[data-bar="20"] { height: 4px; animation: wave3 0.5s ease-in-out infinite; }
.kolhakfar-radio-player .waveform-bar[data-bar="21"] { height: 23px; animation: wave1 1.5s ease-in-out infinite; }
.kolhakfar-radio-player .waveform-bar[data-bar="22"] { height: 9px; animation: wave2 0.8s ease-in-out infinite; }
.kolhakfar-radio-player .waveform-bar[data-bar="23"] { height: 16px; animation: wave3 1.1s ease-in-out infinite; }
.kolhakfar-radio-player .waveform-bar[data-bar="24"] { height: 12px; animation: wave1 0.9s ease-in-out infinite; }
.kolhakfar-radio-player .waveform-bar[data-bar="25"] { height: 27px; animation: wave2 1.6s ease-in-out infinite; }
.kolhakfar-radio-player .waveform-bar[data-bar="26"] { height: 6px; animation: wave3 0.7s ease-in-out infinite; }
.kolhakfar-radio-player .waveform-bar[data-bar="27"] { height: 18px; animation: wave1 1.2s ease-in-out infinite; }
.kolhakfar-radio-player .waveform-bar[data-bar="28"] { height: 14px; animation: wave2 0.6s ease-in-out infinite; }
.kolhakfar-radio-player .waveform-bar[data-bar="29"] { height: 8px; animation: wave3 1.0s ease-in-out infinite; }
.kolhakfar-radio-player .waveform-bar[data-bar="30"] { height: 20px; animation: wave1 0.8s ease-in-out infinite; }
.kolhakfar-radio-player .waveform-bar[data-bar="31"] { height: 11px; animation: wave2 1.3s ease-in-out infinite; }
.kolhakfar-radio-player .waveform-bar[data-bar="32"] { height: 15px; animation: wave3 0.9s ease-in-out infinite; }
.kolhakfar-radio-player .waveform-bar[data-bar="33"] { height: 7px; animation: wave1 1.1s ease-in-out infinite; }
.kolhakfar-radio-player .waveform-bar[data-bar="34"] { height: 24px; animation: wave2 0.7s ease-in-out infinite; }
.kolhakfar-radio-player .waveform-bar[data-bar="35"] { height: 13px; animation: wave3 1.4s ease-in-out infinite; }
.kolhakfar-radio-player .waveform-bar[data-bar="36"] { height: 5px; animation: wave1 0.6s ease-in-out infinite; }
.kolhakfar-radio-player .waveform-bar[data-bar="37"] { height: 19px; animation: wave2 1.0s ease-in-out infinite; }
.kolhakfar-radio-player .waveform-bar[data-bar="38"] { height: 10px; animation: wave3 0.8s ease-in-out infinite; }
.kolhakfar-radio-player .waveform-bar[data-bar="39"] { height: 22px; animation: wave1 1.2s ease-in-out infinite; }

/* Multiple wave animations for variety */
 @keyframes wave1 {
     0%, 100% { transform: scaleY(0.3); }
     25% { transform: scaleY(0.8); }
     50% { transform: scaleY(1.2); }
     75% { transform: scaleY(0.6); }
 }

 @keyframes wave2 {
     0%, 100% { transform: scaleY(0.5); }
     33% { transform: scaleY(1.1); }
     66% { transform: scaleY(0.4); }
 }

 @keyframes wave3 {
     0%, 100% { transform: scaleY(0.4); }
     20% { transform: scaleY(0.9); }
     40% { transform: scaleY(1.3); }
     60% { transform: scaleY(0.7); }
     80% { transform: scaleY(1.0); }
 }