.playlist-row {
    display: flex;
    align-items: center;
    gap: 15px; /* відступи між часом, обкладинкою та назвою */
    margin-bottom: 10px;
}

.song-cover img {
    border-radius: 4px; /* закруглення для обкладинки */
    object-fit: cover;
}


h2.elementor-heading-title.elementor-size-default span {
    color: var(--global-palette1);
    display: block;
}

p {
    margin-block-start: 0;
}

.single-post .wp-site-blocks .post-thumbnail.thewebs-thumbnail-ratio-1-2 {
    padding-bottom: 40%;
    
}

.single-post .thewebs-thumbnail-position-behind {
    margin-bottom: -4em;
}

.content-style-unboxed .thewebs-thumbnail-position-behind:after {
    background: linear-gradient(0deg, var(--global-palette9) 15%, rgba(var(--global-palette9rgb), 0.35) 35%, rgba(255, 255, 255, 0) 50%);
}

.entry-header .thewebs-breadcrumbs {
    margin-top: 0;
}

/* ================================= Шапка сайту START */

#masthead {
    box-shadow: 0 20px 60px rgb(0 52 157);
}

.single-post #masthead {
    box-shadow: 0 5px 20px rgb(0 52 157 / 70%);
}

.home .child-is-fixed .site-main-header-wrap .site-header-row-container-inner,
.child-is-fixed .site-main-header-wrap .site-header-row-container-inner {
    background: var(--global-palette5);
}

#masthead .thewebs-sticky-header.item-is-fixed:not(.item-at-start):not(.item-hidden-above) > .site-header-row-container-inner {
    backdrop-filter: blur(19px);
}

.header-hero .hero-title {
    font-style: normal;
    font-weight: 900;
    font-size: 70px;
    line-height: 85px;
    letter-spacing: 0em;
    text-transform: uppercase;
}

#primary-menu>li:first-child a {
	padding-inline-start: calc(60px / 2);
}

#primary-menu>li:last-child a {
		padding-inline-end: calc(60px / 2);
}

.site-header-main-section-right a.header-button:before {
    content: " ";
    display: block;
    width: 20px;
    height: 10px;
    float: left;
    cursor: pointer;
    margin: 7px 0px 0px 0px;

    /* Встановлюємо потрібний колір маски (синій) */
    background-color: var(--global-palette3); /* Сюди можна вставити будь-який HEX, наприклад #1e73be */

    /* Задаємо шлях до SVG як маску для Chrome/Safari */
    -webkit-mask-image: url('./assets/image/footer-icon2.svg');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain; /* або 100% 100%, щоб SVG вписувався в розміри 25x10 */

    /* Задаємо шлях до SVG для Firefox та інших стандартів */
    mask-image: url('./assets/image/footer-icon2.svg');
    mask-repeat: no-repeat;
    mask-size: contain;
}

#masthead .thewebs-sticky-header.item-is-fixed:not(.item-at-start) a.header-button:before {
    background-color: var(--global-palette9); 
}


/* ================================= Шапка сайту END */


/* ================================= Блок плеєра START */


:root {
    /* Дизайн-система (змінні) */
    --player-bg-color: #013ec8; /* Темніший для плеєру */
    --text-color-white: #FFFFFF;
    --text-color-muted: rgba(255, 255, 255, 0.7);
    --accent-color: #FFBB00; /* Жовтий для кнопок та прогресу */
    --progress-bar-color: rgba(255, 255, 255, 0.3); /* Напівпрозорий білий */
    --font-family-main: Rubik, sans-serif;
    --border-radius-main: 20px;
}

div.floating_player {
    position: fixed;
    z-index: 1000;
    left: 18px;
    right: 18px;
    bottom: 16px;
    text-align: center;
}


/* Компонент: Елемент плеєру */
.player-bar {
    width: 100%;
    background-color: var(--player-bg-color);
    backdrop-filter: blur(5px); /* Ефект матового скла */
    border-radius: var(--border-radius-main);
    display: flex; /* Основний Flex-контейнер для плеєра */
    align-items: center;
    justify-content: space-between;
    padding: 20px 40px;
    box-sizing: border-box;
    z-index: 3; /* Найвищий шар */
    border: 1px solid #2e71dd;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .45), 0 0 26px rgba(232, 48, 42, .2);
}

/* Плеєр - Ліва частина */
.album-info {
    display: flex;
    align-items: center;
    gap: 20px;
}

.album-art {
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
    object-fit: cover; 
    border-radius: 4px;
}

.album-art::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 100%);
}

.song-details {
    display: flex;
    flex-direction: column;
    gap: 5px;
    color: #FFFFFF;
}

.song-title {
    color: var(--text-color-white);
    font-size: 20px;
    font-weight: bold;
    margin: 0;
}

.artist-name {
    color: var(--text-color-muted);
    font-size: 16px;
    margin: 0;
}

/* Плеєр - Центральна частина */
.controls-center {
    display: flex;
    align-items: center;
    flex-grow: 1; /* Займає весь вільний простір */
    margin: 0 40px;
    gap: 20px;
}

.player_song_title {
    max-width: 250px;          
    overflow: hidden;          
    white-space: nowrap;       
    text-overflow: ellipsis;
    text-transform: capitalize;
}

.play-button {
    width: 70px;
    height: 70px;
    background-color: var(--accent-color);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(255, 187, 0, 0.3);
}

.play-icon {
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 25px solid var(--text-color-white);
    margin-left: 10px; /* Трохи змістити, щоб виглядало по центру */
}

.timeline-info {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 10px;
}

/* Хвиля  */
.audio-wave-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px; /* Space between bars */
    height: 60px;
    width: 100%;
    background: #ad1414;
}

/* Base style for every vertical bar */
.audio-wave-container .stroke {
    display: block;
    position: relative;
    background: #ffffff; /* White color for the wave */
    height: 100%;
    width: 4px; /* Width of each bar */
    border-radius: 2px;
    animation: bounce 1.2s infinite ease-in-out;
}

/* Animation triggers for realistic look - different delays */
.audio-wave-container .stroke:nth-child(1) { animation-delay: 0.0s; height: 30%; }
.audio-wave-container .stroke:nth-child(2) { animation-delay: 0.3s; height: 50%; }
.audio-wave-container .stroke:nth-child(3) { animation-delay: 0.6s; height: 60%; }
.audio-wave-container .stroke:nth-child(4) { animation-delay: 0.1s; height: 70%; }
.audio-wave-container .stroke:nth-child(5) { animation-delay: 0.4s; height: 40%; }

/* The core animation: scaling the height of bars */
@keyframes bounce {
    0%, 100% {
        transform: scaleY(0.3); /* Compressed state */
    }
    50% {
        transform: scaleY(1); /* Full height state */
    }
}


.time-labels {
    display: flex;
    justify-content: space-between;
    color: var(--text-color-muted);
    font-size: 14px;
}


.stream_buttons {
    display: flex;
    flex-direction: column;
    row-gap: 5px;
    margin: 0px 15px;
}

.stream_buttons button {
    font-size: 15px;
    padding: 4px 12px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    border-radius: 10px;
    background: none;
    box-shadow: none;
    border: 1px solid var(--global-palette8);
}

/* Плеєр - Права частина */
.controls-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.volume-control {
    display: flex;
    align-items: center;
    gap: 10px;
}

.volume-icon {
    color: var(--text-color-white);
    font-size: 23px;
    line-height: 23px;
    height: 23px;
    padding: 0px;
}



/* ================================= Блок плеєра END */



/* ================================= Блок кліпи START */

.radio-clip-list {
    display: flex;
    flex-direction: column; 
    gap: 30px; 
    width: 100%;
    padding: 30px;
}

.clip-card-row {
    display: flex;
    background: #ffffff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); /* Легка світло-сіра тінь */
    overflow: hidden;
    width: 100%;
    align-items: stretch; /* Щоб картинка та текст були однієї висоти */
    border-radius: 10px;
}

/* Ліва частина: Мініатюра */
.clip-card-thumb {
    flex: 0 0 45%; /* Картинка займає приблизно 35% ширини картки */
    max-width: 490px; /* Обмежуємо максимальну ширину для великих екранів */
    position: relative;
    overflow: hidden;
}

.clip-card-thumb a {
    display: block;
    width: 100%;
    height: 100%;
}

.clip-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Картинка заповнює блок без спотворень */
    display: block;
    transition: transform 0.4s ease;
}

/* Ефект при наведенні на картинку */
.clip-card-row:hover .clip-card-thumb img {
    transform: scale(1.03);
}

/* Права частина: Текстовий блок */
.clip-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Притискає все ліворуч */
    padding: 30px 40px; /* Просторі відступи всередині картки */
}

/* Напис "Новинка" — тепер це акуратний овал з помаранчевим контуром */
.clip-card-badge {
    display: inline-block;
    border: 1px solid #ff7a00; /* Помаранчевий контур */
    color: #ff7a00; /* Помаранчевий текст */
    padding: 3px 14px;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 700;
    border-radius: 20px; /* Закруглена форма овала */
    margin-bottom: 16px;
    letter-spacing: 0.05em;
}

/* Заголовок кліпу (наприклад, YAKTAK — Місто вечірніх вогнів) */
.clip-card-title {
    margin: 0 0 14px 0;
    font-size: 24px; /* Великий чіткий шрифт */
    font-weight: 800; /* Жирне накреслення гротеску */
    line-height: 1.2;
}

.clip-card-title a {
    color: #08112b; /* Глибокий темно-синій або майже чорний колір */
    text-decoration: none;
    transition: color 0.2s ease;
}

.clip-card-title a:hover {
    color: #ff7a00; /* Колір міняється на помаранчевий при наведенні */
}

/* Текст опису кліпу */
.clip-card-excerpt {
    font-size: 15px;
    color: #5c6470; /* Акуратний сірий колір тексту */
    line-height: 1.6;
    margin-bottom: 24px;
    flex-grow: 1; /* Штовхає кнопку до низу, якщо тексту мало */
}

.clip-card-excerpt p {
    margin: 0 0 10px 0;
}
.clip-card-excerpt p:last-child {
    margin-bottom: 0;
}

/* Кнопка "ДИВИТИСЬ КЛІП" — прямокутна з легким заокругленням */
.clip-card-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #ff7a00; /* Яскравий помаранчевий фон */
    color: #ffffff !important;
    padding: 12px 28px;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 6px;
    letter-spacing: 0.05em;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.clip-card-btn:hover {
    background-color: #e06b00; /* Темнішає при наведенні */
}

.clip-card-btn:active {
    transform: scale(0.98); /* Ефект кліку */
}

@media (max-width: 992px) {
    .clip-card-body {
        padding: 24px; /* Зменшуємо падінги на планшетах */
    }
    .clip-card-title {
        font-size: 20px;
    }
}

@media (max-width: 768px) {
    .clip-card-row {
        flex-direction: column; /* На смартфонах картинка стає зверху, текст знизу */
    }
    
    .clip-card-thumb {
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
        aspect-ratio: 16 / 9; /* Задаємо правильну пропорцію для екрану відео */
    }
    
    .clip-card-body {
        padding: 20px;
    }
    
    .clip-card-btn {
        width: 100%; /* Кнопка на мобільних стає на всю ширину */
    }
}


/* ================================= Блок кліпи END */





/* ================================= Блок Footer Start */


#colophon {
	background-image: none !important;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	background-attachment: scroll;
	background-color: var(--global-palette3);
}

#colophon .site-footer-row.site-footer-row-columns-4.site-footer-row-column-layout-right-forty {
    grid-template-columns: 2fr 1fr 1fr 2fr;
}

.site-bottom-footer-wrap .site-footer-bottom-section-2 .footer-widget-area-inner {
    display: flex;
    align-items: center;
    justify-content: center;
}

.site-bottom-footer-wrap .site-footer-bottom-section-2 .footer-widget-area-inner .widget_block {
    margin-bottom: 0;
}

.site-bottom-footer-wrap .site-footer-bottom-section-2 .footer-widget-area-inner p {
    margin-block-start: 0;
    margin-block-end: 0;
}

.site-bottom-footer-wrap .site-footer-bottom-section-2 .footer-widget-area-inner svg {
    color: var(--global-palette2);
    margin: 7px 7px 0px 0px;
}

.site-middle-footer-wrap .site-middle-footer-inner-wrap .widget-area .wp-block-group .widget-title {
    margin-bottom: 15px;
}

#colophon a.footer-mail-icon:before {
    content: " ";
    display: block;
    width: 20px;
    height: 10px;
    float: left;
    cursor: pointer;
    margin: 9px 0px 0px 0px;

    /* Встановлюємо потрібний колір маски (синій) */
    background-color: var(--global-palette5); /* Сюди можна вставити будь-який HEX, наприклад #1e73be */

    /* Задаємо шлях до SVG як маску для Chrome/Safari */
    -webkit-mask-image: url('./assets/image/footer-icon2.svg');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain; /* або 100% 100%, щоб SVG вписувався в розміри 25x10 */

    /* Задаємо шлях до SVG для Firefox та інших стандартів */
    mask-image: url('./assets/image/footer-icon2.svg');
    mask-repeat: no-repeat;
    mask-size: contain;
}

/* ================================= Блок Footer END */