/**
 * Theme Components CSS
 * Consolidated static CSS for radiostation-child theme
 *
 * Contents:
 * 1. Preloader
 * 2. Station Tooltip
 * 3. Shoutbox Modal
 * 4. Body & Container (using CSS variables for dynamic values)
 */

/* ==========================================================================
   1. PRELOADER
   ========================================================================== */

/* Preloader REMOVED - causes white loading flash (RADIOS-PERFORMANCE-001)
   All preloader CSS and functionality removed for better performance.
   The body opacity rules have been completely removed to prevent invisible content issues.
*/

/* Emergency fix for production blue gradient overlay (2026-02-01) */
#rs-newyear-overlay {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Force remove any body gradients that might be stuck */
body {
    background-image: none !important;
}

body.rs-custom-bg {
    background: #ffffff !important;
    background-image: none !important;
}

/* ==========================================================================
   2. STATION TOOLTIP
   ========================================================================== */

/* Station Tooltip - Bootstrap-style floating tooltip */
.station-tooltip {
    position: fixed;
    z-index: 99999;
    max-width: 200px;
    padding: 6px 12px;
    color: #fff;
    text-align: center;
    background-color: #000;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease-in-out;
    white-space: nowrap;
}

.station-tooltip.show {
    opacity: 1;
}

/* Arrow */
.station-tooltip::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -6px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #000;
}

/* Arrow position when tooltip is below */
.station-tooltip.tooltip-bottom::after {
    bottom: auto;
    top: -6px;
    border-top: none;
    border-bottom: 6px solid #000;
}

.station-tooltip__name {
    display: block;
    font-weight: 600;
}

.station-tooltip__rating {
    display: flex;
    justify-content: center;
    gap: 2px;
    margin-top: 4px;
}

.station-tooltip__star {
    width: 16px;
    height: 16px;
    fill: #666;
}

.station-tooltip__star--full {
    fill: #fbbf24;
}

.station-tooltip__star--half {
    fill: url(#tooltip-star-gradient);
}

/* Hide on mobile */
@media (max-width: 768px) {
    .station-tooltip {
        display: none !important;
    }
}

/* ==========================================================================
   3. SHOUTBOX MODAL
   ========================================================================== */

/* Prevent scroll but keep scrollbar visible to avoid layout shift */
html.rs-modal-open,
html.rs-modal-open body {
    overflow-y: scroll !important;
    height: 100% !important;
}

html.rs-modal-open body {
    overflow: hidden !important;
}

.rs-shoutbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.rs-shoutbox-overlay.active {
    opacity: 1;
    visibility: visible;
}

.rs-shoutbox-modal {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    max-width: 400px;
    width: 100%;
    position: relative;
    transform: scale(0.9);
    transition: transform 0.2s ease;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.rs-shoutbox-overlay.active .rs-shoutbox-modal {
    transform: scale(1);
}

.rs-shoutbox-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: none;
    border: none;
    cursor: pointer;
    color: #666;
    padding: 4px;
    border-radius: 4px;
    transition: background 0.2s, color 0.2s;
}

.rs-shoutbox-close:hover {
    background: #f0f0f0;
    color: #333;
}

.rs-shoutbox-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px 0;
    font-size: 18px;
    color: #333;
}

.rs-shoutbox-title svg {
    color: var(--main, #e31e24);
}

.rs-shoutbox-description {
    margin: 0 0 16px 0;
    color: #666;
    font-size: 13px;
}

.rs-shoutbox-field {
    margin-bottom: 14px;
}

.rs-shoutbox-field label {
    display: block;
    font-weight: 600;
    margin-bottom: 4px;
    font-size: 13px;
    color: #333;
}

.rs-shoutbox-field input,
.rs-shoutbox-field textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: inherit;
}

.rs-shoutbox-field input:focus,
.rs-shoutbox-field textarea:focus {
    outline: none;
    border-color: var(--main, #e31e24);
    box-shadow: 0 0 0 3px rgba(227, 30, 36, 0.1);
}

.rs-shoutbox-field textarea {
    resize: vertical;
    min-height: 80px;
}

.rs-shoutbox-counter {
    display: block;
    text-align: right;
    font-size: 11px;
    color: #999;
    margin-top: 4px;
}

/* Quick Messages */
.rs-shoutbox-quick {
    margin-bottom: 16px;
}

.rs-shoutbox-quick__label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #666;
    margin-bottom: 8px;
}

.rs-shoutbox-quick__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.rs-shoutbox-quick__btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
    color: #333;
}

.rs-shoutbox-quick__btn:hover {
    background: #fff;
    border-color: var(--main, #e31e24);
    color: var(--main, #e31e24);
}

.rs-shoutbox-quick__btn.active {
    background: var(--main, #e31e24);
    border-color: var(--main, #e31e24);
    color: #fff;
}

.rs-shoutbox-quick__emoji {
    font-size: 14px;
    line-height: 1;
}

.rs-shoutbox-quick__text {
    white-space: nowrap;
}

.rs-shoutbox-rules {
    font-size: 11px;
    color: #999;
    margin: 0 0 14px 0;
    padding: 8px 10px;
    background: #f8f8f8;
    border-radius: 4px;
}

.rs-shoutbox-submit {
    width: 100%;
    padding: 12px 20px;
    background: var(--main, #e31e24);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.rs-shoutbox-submit:hover {
    background: var(--main-hover, #c91a1f);
}

.rs-shoutbox-submit:active {
    transform: scale(0.98);
}

.rs-shoutbox-submit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.rs-shoutbox-spinner {
    animation: rs-spin 1s linear infinite;
}

@keyframes rs-spin {
    100% { transform: rotate(360deg); }
}

.rs-shoutbox-feedback {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 13px;
    text-align: center;
}

.rs-shoutbox-feedback.success {
    background: #d4edda;
    color: #155724;
}

.rs-shoutbox-feedback.error {
    background: #f8d7da;
    color: #721c24;
}

.rs-shoutbox-limit {
    text-align: center;
    padding: 20px 0;
}

.rs-shoutbox-limit svg {
    color: var(--main, #e31e24);
    margin-bottom: 12px;
}

.rs-shoutbox-limit h3 {
    margin: 0 0 8px 0;
    color: #333;
}

.rs-shoutbox-limit p {
    margin: 0;
    color: #666;
    font-size: 14px;
}

/* Trigger button (can be placed anywhere) */
.rs-shoutbox-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--main, #e31e24);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.rs-shoutbox-trigger:hover {
    background: var(--main-hover, #c91a1f);
}

/* Report Modal */
.rs-report-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.rs-report-overlay.active {
    opacity: 1;
    visibility: visible;
}

.rs-report-modal {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    max-width: 380px;
    width: 100%;
    position: relative;
    transform: scale(0.9);
    transition: transform 0.2s ease;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    text-align: center;
}

.rs-report-overlay.active .rs-report-modal {
    transform: scale(1);
}

.rs-report-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: none;
    border: none;
    cursor: pointer;
    color: #666;
    padding: 4px;
    border-radius: 4px;
    transition: background 0.2s, color 0.2s;
}

.rs-report-close:hover {
    background: #f0f0f0;
    color: #333;
}

.rs-report-icon {
    margin-bottom: 16px;
    color: #f59e0b;
}

.rs-report-icon--success {
    color: #10b981;
}

.rs-report-icon--error {
    color: #ef4444;
}

.rs-report-title {
    margin: 0 0 8px 0;
    font-size: 18px;
    color: #333;
}

.rs-report-description {
    margin: 0 0 16px 0;
    color: #666;
    font-size: 14px;
    line-height: 1.5;
}

.rs-report-message-preview {
    background: #f8f8f8;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 20px;
    font-size: 13px;
    color: #333;
    text-align: left;
    max-height: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rs-report-message-preview strong {
    color: var(--main, #e31e24);
}

.rs-report-buttons {
    display: flex;
    gap: 12px;
}

.rs-report-btn {
    flex: 1;
    padding: 12px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.rs-report-btn--cancel {
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    color: #374151;
}

.rs-report-btn--cancel:hover {
    background: #e5e7eb;
}

.rs-report-btn--confirm {
    background-image: linear-gradient(to right, #e64141, #ff6767);
    border: none;
    color: #fff;
    box-shadow: 0 3px 0px 1px #d21515;
    border-radius: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    transition-duration: 0.2s;
}

.rs-report-btn--confirm:hover {
    background-image: linear-gradient(to right, #d93a3a, #f55a5a);
}

.rs-report-btn--confirm:active,
.rs-report-btn--confirm:focus {
    box-shadow: none;
    border: none;
    outline: none;
}

.rs-report-btn--confirm:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    box-shadow: none;
}

/* ==========================================================================
   4. BODY & CONTAINER BACKGROUNDS (Dynamic via CSS Variables)
   ========================================================================== */

/* Body background - uses CSS variables set by PHP */
body {
    background-color: var(--rs-body-bg, var(--white-ash, #ffffff));
}

/* Container background */
.content-wraper {
    background-color: var(--rs-container-bg, transparent);
}

/* Gradient overlay for station grids */
.no-background .station-cat-grid::after,
.has-background .station-cat-grid::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 130px;
    background: linear-gradient(to bottom, var(--rs-container-bg-transparent, transparent), var(--rs-container-bg, transparent));
    pointer-events: none;
}

/* ==========================================================================
   5. DARK MODE MARQUEE
   Uses CSS variables set by PHP: --dm-bg, --dm-text, --dm-label-bg, --dm-label-text, --dm-separator
   ========================================================================== */

/* Standard marquee (non-BNR) dark mode */
:root[data-theme="dark"] body.marquee-dark-mode .rp3-latest-marquee:not(.rp3-latest-marquee--bnr):not(.rp3-latest-marquee--now-playing):not(.rp3-latest-marquee--switchable):not(.rp3-latest-marquee--switchable-icons):not(.rp3-latest-marquee--switchable-icons-dropdown):not(.rp3-latest-marquee--switchable-icon-toggle) {
    background-color: var(--dm-bg) !important;
}

:root[data-theme="dark"] body.marquee-dark-mode .rp3-latest-marquee:not(.rp3-latest-marquee--bnr):not(.rp3-latest-marquee--now-playing):not(.rp3-latest-marquee--switchable):not(.rp3-latest-marquee--switchable-icons):not(.rp3-latest-marquee--switchable-icons-dropdown):not(.rp3-latest-marquee--switchable-icon-toggle) .rp3-latest-marquee__item {
    color: var(--dm-text);
}

:root[data-theme="dark"] body.marquee-dark-mode .rp3-latest-marquee:not(.rp3-latest-marquee--bnr):not(.rp3-latest-marquee--now-playing):not(.rp3-latest-marquee--switchable):not(.rp3-latest-marquee--switchable-icons):not(.rp3-latest-marquee--switchable-icons-dropdown):not(.rp3-latest-marquee--switchable-icon-toggle) .rp3-latest-marquee__item a {
    color: var(--dm-text);
}

:root[data-theme="dark"] body.marquee-dark-mode .rp3-latest-marquee:not(.rp3-latest-marquee--bnr):not(.rp3-latest-marquee--now-playing):not(.rp3-latest-marquee--switchable):not(.rp3-latest-marquee--switchable-icons):not(.rp3-latest-marquee--switchable-icons-dropdown):not(.rp3-latest-marquee--switchable-icon-toggle) .rp3-latest-marquee__item + .rp3-latest-marquee__item::before {
    color: var(--dm-separator);
}

/* BNR-style marquee dark mode */
:root[data-theme="dark"] body.marquee-dark-mode .rp3-latest-marquee--bnr .rp3-latest-marquee__wrap,
:root[data-theme="dark"] body.marquee-dark-mode .rp3-latest-marquee--bnr .rp3-latest-marquee__ticker,
:root[data-theme="dark"] body.marquee-dark-mode .rp3-latest-marquee--bnr .rp3-latest-marquee__collection {
    background: var(--dm-bg) !important;
}

:root[data-theme="dark"] body.marquee-dark-mode .rp3-latest-marquee--bnr .rp3-latest-marquee__wrap::after {
    background: linear-gradient(to right, transparent, var(--dm-bg)) !important;
}

:root[data-theme="dark"] body.marquee-dark-mode .rp3-latest-marquee--bnr .rp3-latest-marquee__wrap::before {
    background: linear-gradient(to right, var(--dm-bg), transparent) !important;
}

:root[data-theme="dark"] body.marquee-dark-mode .rp3-latest-marquee--bnr .rp3-latest-marquee__item a {
    color: var(--dm-text) !important;
}

:root[data-theme="dark"] body.marquee-dark-mode .rp3-latest-marquee--bnr .rp3-latest-marquee__item::before {
    color: var(--dm-separator) !important;
}

:root[data-theme="dark"] body.marquee-dark-mode .rp3-latest-marquee--bnr .rp3-latest-marquee__slogan {
    background: var(--dm-label-bg) !important;
}

:root[data-theme="dark"] body.marquee-dark-mode .rp3-latest-marquee--bnr .rp3-latest-marquee__slogan::before {
    background: var(--dm-label-bg) !important;
}

:root[data-theme="dark"] body.marquee-dark-mode .rp3-latest-marquee--bnr .rp3-latest-marquee__skew p {
    color: var(--dm-label-text) !important;
}

:root[data-theme="dark"] body.marquee-dark-mode .rp3-latest-marquee--bnr .rp3-latest-marquee__slogan::after {
    box-shadow: inset 24px 0 12px -8px var(--dm-bg) !important;
}

/* Now Playing marquee dark mode */
:root[data-theme="dark"] body.marquee-dark-mode .rp3-latest-marquee--now-playing .rp3-latest-marquee__wrap {
    background: var(--dm-bg) !important;
}

:root[data-theme="dark"] body.marquee-dark-mode .rp3-latest-marquee--now-playing .rp3-latest-marquee__ticker,
:root[data-theme="dark"] body.marquee-dark-mode .rp3-latest-marquee--now-playing .rp3-latest-marquee__collection {
    background: var(--dm-bg) !important;
}

:root[data-theme="dark"] body.marquee-dark-mode .rp3-latest-marquee--now-playing .rp3-latest-marquee__slogan {
    background: var(--dm-label-bg) !important;
}

:root[data-theme="dark"] body.marquee-dark-mode .rp3-latest-marquee--now-playing .rp3-latest-marquee__slogan::before {
    background: var(--dm-label-bg) !important;
}

:root[data-theme="dark"] body.marquee-dark-mode .rp3-latest-marquee--now-playing .rp3-latest-marquee__slogan::after {
    background: linear-gradient(to left, transparent, var(--dm-bg)) !important;
}

:root[data-theme="dark"] body.marquee-dark-mode .rp3-latest-marquee--now-playing .rp3-latest-marquee__skew p {
    color: var(--dm-label-text) !important;
}

:root[data-theme="dark"] body.marquee-dark-mode .rp3-latest-marquee--now-playing .rp3-now-playing__label,
:root[data-theme="dark"] body.marquee-dark-mode .rp3-latest-marquee--now-playing .rp3-now-playing__song {
    color: var(--dm-text) !important;
}

:root[data-theme="dark"] body.marquee-dark-mode .rp3-latest-marquee--now-playing .rp3-latest-marquee__item::before {
    color: var(--dm-separator) !important;
}

/* Switchable marquee (all variants) dark mode */
:root[data-theme="dark"] body.marquee-dark-mode .rp3-latest-marquee--switchable,
:root[data-theme="dark"] body.marquee-dark-mode .rp3-latest-marquee--switchable-icons,
:root[data-theme="dark"] body.marquee-dark-mode .rp3-latest-marquee--switchable-icons-dropdown,
:root[data-theme="dark"] body.marquee-dark-mode .rp3-latest-marquee--switchable-icon-toggle {
    background: var(--dm-bg) !important;
}

:root[data-theme="dark"] body.marquee-dark-mode .rp3-latest-marquee--switchable .rp3-latest-marquee__wrap,
:root[data-theme="dark"] body.marquee-dark-mode .rp3-latest-marquee--switchable-icons .rp3-latest-marquee__wrap,
:root[data-theme="dark"] body.marquee-dark-mode .rp3-latest-marquee--switchable-icons-dropdown .rp3-latest-marquee__wrap,
:root[data-theme="dark"] body.marquee-dark-mode .rp3-latest-marquee--switchable-icon-toggle .rp3-latest-marquee__wrap {
    background: var(--dm-bg) !important;
}

:root[data-theme="dark"] body.marquee-dark-mode .rp3-latest-marquee--switchable .rp3-marquee-content,
:root[data-theme="dark"] body.marquee-dark-mode .rp3-latest-marquee--switchable-icons .rp3-marquee-content,
:root[data-theme="dark"] body.marquee-dark-mode .rp3-latest-marquee--switchable-icons-dropdown .rp3-marquee-content,
:root[data-theme="dark"] body.marquee-dark-mode .rp3-latest-marquee--switchable-icon-toggle .rp3-marquee-content,
:root[data-theme="dark"] body.marquee-dark-mode .rp3-latest-marquee--switchable .rp3-latest-marquee__ticker,
:root[data-theme="dark"] body.marquee-dark-mode .rp3-latest-marquee--switchable-icons .rp3-latest-marquee__ticker,
:root[data-theme="dark"] body.marquee-dark-mode .rp3-latest-marquee--switchable-icons-dropdown .rp3-latest-marquee__ticker,
:root[data-theme="dark"] body.marquee-dark-mode .rp3-latest-marquee--switchable-icon-toggle .rp3-latest-marquee__ticker {
    background: var(--dm-bg) !important;
}

:root[data-theme="dark"] body.marquee-dark-mode .rp3-latest-marquee--switchable .rp3-latest-marquee__collection,
:root[data-theme="dark"] body.marquee-dark-mode .rp3-latest-marquee--switchable-icons .rp3-latest-marquee__collection,
:root[data-theme="dark"] body.marquee-dark-mode .rp3-latest-marquee--switchable-icons-dropdown .rp3-latest-marquee__collection,
:root[data-theme="dark"] body.marquee-dark-mode .rp3-latest-marquee--switchable-icon-toggle .rp3-latest-marquee__collection {
    background: var(--dm-bg) !important;
}

:root[data-theme="dark"] body.marquee-dark-mode .rp3-latest-marquee--switchable .rp3-latest-marquee__wrap::after,
:root[data-theme="dark"] body.marquee-dark-mode .rp3-latest-marquee--switchable-icons .rp3-latest-marquee__wrap::after,
:root[data-theme="dark"] body.marquee-dark-mode .rp3-latest-marquee--switchable-icons-dropdown .rp3-latest-marquee__wrap::after,
:root[data-theme="dark"] body.marquee-dark-mode .rp3-latest-marquee--switchable-icon-toggle .rp3-latest-marquee__wrap::after {
    background: linear-gradient(to right, transparent, var(--dm-bg)) !important;
}

:root[data-theme="dark"] body.marquee-dark-mode .rp3-latest-marquee--switchable .rp3-latest-marquee__wrap::before,
:root[data-theme="dark"] body.marquee-dark-mode .rp3-latest-marquee--switchable-icons .rp3-latest-marquee__wrap::before,
:root[data-theme="dark"] body.marquee-dark-mode .rp3-latest-marquee--switchable-icons-dropdown .rp3-latest-marquee__wrap::before,
:root[data-theme="dark"] body.marquee-dark-mode .rp3-latest-marquee--switchable-icon-toggle .rp3-latest-marquee__wrap::before {
    background: linear-gradient(to right, var(--dm-bg), transparent) !important;
}

:root[data-theme="dark"] body.marquee-dark-mode .rp3-latest-marquee--switchable .rp3-latest-marquee__slogan,
:root[data-theme="dark"] body.marquee-dark-mode .rp3-latest-marquee--switchable .rp3-latest-marquee__slogan--dropdown {
    background: var(--dm-label-bg) !important;
}

:root[data-theme="dark"] body.marquee-dark-mode .rp3-latest-marquee--switchable .rp3-latest-marquee__slogan::before,
:root[data-theme="dark"] body.marquee-dark-mode .rp3-latest-marquee--switchable .rp3-latest-marquee__slogan--dropdown::before {
    background: var(--dm-label-bg) !important;
}

:root[data-theme="dark"] body.marquee-dark-mode .rp3-latest-marquee--switchable .rp3-latest-marquee__slogan::after,
:root[data-theme="dark"] body.marquee-dark-mode .rp3-latest-marquee--switchable .rp3-latest-marquee__slogan--dropdown::after {
    background: linear-gradient(to left, transparent, var(--dm-bg)) !important;
}

:root[data-theme="dark"] body.marquee-dark-mode .rp3-latest-marquee--switchable .rp3-now-playing__label,
:root[data-theme="dark"] body.marquee-dark-mode .rp3-latest-marquee--switchable .rp3-now-playing__song,
:root[data-theme="dark"] body.marquee-dark-mode .rp3-latest-marquee--switchable-icons .rp3-now-playing__label,
:root[data-theme="dark"] body.marquee-dark-mode .rp3-latest-marquee--switchable-icons .rp3-now-playing__song,
:root[data-theme="dark"] body.marquee-dark-mode .rp3-latest-marquee--switchable-icons-dropdown .rp3-now-playing__label,
:root[data-theme="dark"] body.marquee-dark-mode .rp3-latest-marquee--switchable-icons-dropdown .rp3-now-playing__song,
:root[data-theme="dark"] body.marquee-dark-mode .rp3-latest-marquee--switchable-icon-toggle .rp3-now-playing__label,
:root[data-theme="dark"] body.marquee-dark-mode .rp3-latest-marquee--switchable-icon-toggle .rp3-now-playing__song {
    color: var(--dm-text) !important;
}

:root[data-theme="dark"] body.marquee-dark-mode .rp3-latest-marquee--switchable .rp3-latest-marquee__item a,
:root[data-theme="dark"] body.marquee-dark-mode .rp3-latest-marquee--switchable-icons .rp3-latest-marquee__item a,
:root[data-theme="dark"] body.marquee-dark-mode .rp3-latest-marquee--switchable-icons-dropdown .rp3-latest-marquee__item a,
:root[data-theme="dark"] body.marquee-dark-mode .rp3-latest-marquee--switchable-icon-toggle .rp3-latest-marquee__item a {
    color: var(--dm-text) !important;
}

:root[data-theme="dark"] body.marquee-dark-mode .rp3-latest-marquee--switchable .rp3-latest-marquee__item::before,
:root[data-theme="dark"] body.marquee-dark-mode .rp3-latest-marquee--switchable-icons .rp3-latest-marquee__item::before,
:root[data-theme="dark"] body.marquee-dark-mode .rp3-latest-marquee--switchable-icons-dropdown .rp3-latest-marquee__item::before,
:root[data-theme="dark"] body.marquee-dark-mode .rp3-latest-marquee--switchable-icon-toggle .rp3-latest-marquee__item::before {
    color: var(--dm-separator) !important;
}

/* Icon dropdown wrapper */
:root[data-theme="dark"] body.marquee-dark-mode .rp3-marquee-icon-dropdown-wrap {
    background: var(--dm-bg) !important;
}

:root[data-theme="dark"] body.marquee-dark-mode .rp3-marquee-icon-dropdown-wrap::after {
    background: linear-gradient(to right, var(--dm-bg), transparent) !important;
}

:root[data-theme="dark"] body.marquee-dark-mode .rp3-marquee-icon-trigger {
    color: #ffffff !important;
}

:root[data-theme="dark"] body.marquee-dark-mode .rp3-marquee-icon-trigger svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

:root[data-theme="dark"] body.marquee-dark-mode .rp3-marquee-icon-trigger:hover {
    background: rgba(255, 255, 255, 0.15) !important;
}

:root[data-theme="dark"] body.marquee-dark-mode .rp3-marquee-icon-dropdown {
    background: var(--dm-bg) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

:root[data-theme="dark"] body.marquee-dark-mode .rp3-marquee-icon-dropdown__item {
    color: var(--dm-text) !important;
}

:root[data-theme="dark"] body.marquee-dark-mode .rp3-marquee-icon-dropdown__item:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

:root[data-theme="dark"] body.marquee-dark-mode .rp3-marquee-icon-dropdown__item--active {
    background: rgba(255, 255, 255, 0.15) !important;
}

:root[data-theme="dark"] body.marquee-dark-mode .rp3-marquee-icon-dropdown__item svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

:root[data-theme="dark"] body.marquee-dark-mode .rp3-marquee-icons {
    background: var(--dm-label-bg) !important;
}

:root[data-theme="dark"] body.marquee-dark-mode .rp3-marquee-icon-btn {
    color: var(--dm-label-text) !important;
}

:root[data-theme="dark"] body.marquee-dark-mode .rp3-marquee-icon-btn svg {
    fill: var(--dm-label-text) !important;
}

:root[data-theme="dark"] body.marquee-dark-mode .rp3-marquee-icon-btn:hover,
:root[data-theme="dark"] body.marquee-dark-mode .rp3-marquee-icon-btn--active {
    background: rgba(255, 255, 255, 0.15) !important;
}

:root[data-theme="dark"] body.marquee-dark-mode .rp3-marquee-icon-dropdown__write {
    border-top-color: rgba(255, 255, 255, 0.1) !important;
}

/* Desktop menu active item */
:root[data-theme="dark"] .main-navigation a.is-active,
:root[data-theme="dark"] .main-navigation .menu-item a.is-active,
:root[data-theme="dark"] .primary-menu a.is-active,
:root[data-theme="dark"] .site-header .menu a.is-active {
    color: #ffffff !important;
}

:root[data-theme="dark"] .main-navigation a.is-active:hover,
:root[data-theme="dark"] .main-navigation .menu-item a.is-active:hover,
:root[data-theme="dark"] .primary-menu a.is-active:hover,
:root[data-theme="dark"] .site-header .menu a.is-active:hover {
    color: var(--main, #e31e24) !important;
}

/* ==========================================================================
   6. ANIMATED LOGO
   Uses CSS variables: --logo-scale, --logo-text, --logo-accent, --logo-accent2, --logo-text-dark
   ========================================================================== */

.rs-animated-logo {
    text-decoration: none;
    display: inline-block;
}

.rs-animated-logo .logo-container {
    display: inline-flex;
    align-items: center;
    gap: calc(10px * var(--logo-scale, 1));
}

.rs-animated-logo .note-bars {
    display: flex;
    align-items: flex-end;
    gap: 4px;
}

.rs-animated-logo .nb-note-wrap {
    display: inline-block;
    transform-origin: bottom center;
    margin-top: 4px;
    margin-right: -4px;
}

.rs-animated-logo .nb-note {
    display: block;
    width: calc(24px * var(--logo-scale, 1));
    height: calc(36px * var(--logo-scale, 1));
    fill: var(--logo-accent, #e63946);
}

.rs-animated-logo .nb-bars {
    display: flex;
    align-items: flex-end;
    gap: calc(3px * var(--logo-scale, 1));
    height: calc(28px * var(--logo-scale, 1));
    margin-bottom: calc(5px * var(--logo-scale, 1));
}

.rs-animated-logo .nb-bar {
    width: max(3px, calc(4px * var(--logo-scale, 1)));
    background: var(--logo-accent, #e63946);
    border-radius: 2px;
    height: calc(8px * var(--logo-scale, 1));
    transition: all 0.2s ease;
}

.rs-animated-logo .logo-text {
    font-size: calc(28px * var(--logo-scale, 1));
    font-weight: 700;
    color: var(--logo-text, #2d3436);
    letter-spacing: -0.5px;
}

.rs-animated-logo .logo-text .dot,
.rs-animated-logo .logo-text .nl {
    color: var(--logo-accent, #e63946);
}

/* Playing state animations */
.rs-animated-logo.playing .nb-bar {
    background: linear-gradient(to top, var(--logo-accent, #e63946), var(--logo-accent2, #ff6b6b)) !important;
}

.rs-animated-logo.playing .nb-bar:nth-child(1) {
    animation: nb-grow1 0.4s ease-in-out infinite !important;
}

.rs-animated-logo.playing .nb-bar:nth-child(2) {
    animation: nb-grow2 0.35s ease-in-out infinite !important;
    animation-delay: 0.1s !important;
}

.rs-animated-logo.playing .nb-bar:nth-child(3) {
    animation: nb-grow3 0.45s ease-in-out infinite !important;
    animation-delay: 0.15s !important;
}

.rs-animated-logo.playing .nb-note {
    animation: nb-bounce 0.8s ease-in-out infinite !important;
}

@keyframes nb-grow1 {
    0%, 100% { height: calc(6px * var(--logo-scale, 1)); }
    50% { height: calc(22px * var(--logo-scale, 1)); }
}

@keyframes nb-grow2 {
    0%, 100% { height: calc(10px * var(--logo-scale, 1)); }
    50% { height: calc(18px * var(--logo-scale, 1)); }
}

@keyframes nb-grow3 {
    0%, 100% { height: calc(4px * var(--logo-scale, 1)); }
    50% { height: calc(20px * var(--logo-scale, 1)); }
}

@keyframes nb-bounce {
    0%, 100% { transform: rotate(-5deg); }
    50% { transform: rotate(5deg); }
}

/* Smooth transition when stopping */
.rs-animated-logo.stopping .nb-bar {
    transition: height 1s ease-out;
}

.rs-animated-logo.stopping .nb-note {
    transition: transform 1s ease-out;
}

/* Hide normal logo when animated logo is active */
body.has-animated-logo .site-logo {
    display: none !important;
}

.rs-animated-logo-wrapper {
    display: inline-flex;
    align-items: center;
}

/* Dark mode support */
[data-theme="dark"] .rs-animated-logo .logo-text,
.dark-mode .rs-animated-logo .logo-text {
    color: var(--logo-text-dark, #ffffff);
}

[data-theme="dark"] .rs-animated-logo .logo-text .dot,
[data-theme="dark"] .rs-animated-logo .logo-text .nl,
.dark-mode .rs-animated-logo .logo-text .dot,
.dark-mode .rs-animated-logo .logo-text .nl {
    color: var(--logo-accent, #e63946);
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .rs-animated-logo .logo-text {
        font-size: 22px;
    }

    .rs-animated-logo .nb-note {
        width: 20px;
        height: 30px;
    }

    .rs-animated-logo .nb-bars {
        height: 25px;
    }

    .rs-animated-logo .nb-bar {
        width: 5px;
        height: 8px;
    }

    .rs-animated-logo.playing .nb-bar {
        animation: nb-grow-mobile 0.5s ease-in-out infinite;
    }

    @keyframes nb-grow-mobile {
        0%, 100% { height: 8px; }
        50% { height: 25px; }
    }
}

/* Footer animated logo */
.rs-footer-animated-logo-wrapper {
    padding-left: 2.5rem;
}

.rs-animated-logo--footer .logo-container {
    gap: 0.5rem;
}

.rs-animated-logo--footer .logo-text {
    font-size: 1.25rem;
    color: #fff;
}

.rs-animated-logo--footer .logo-text .dot,
.rs-animated-logo--footer .logo-text .nl {
    color: var(--logo-accent, #e63946);
}

.rs-animated-logo--footer .nb-note {
    width: 1rem;
    height: 1.5rem;
    fill: var(--logo-accent, #e63946);
}

.rs-animated-logo--footer .nb-bars {
    height: 1.25rem;
    gap: 0.125rem;
    margin-bottom: 0.25rem;
}

.rs-animated-logo--footer .nb-bar {
    width: 0.1875rem;
    height: 0.375rem;
    background: var(--logo-accent, #e63946);
}

body.has-animated-logo #footer-widgets .footer-widget-1 .wp-block-image {
    display: none !important;
}

/* ==========================================================================
   7. RS-ADS STICKY SIDEBAR
   ========================================================================== */

@media (min-width: 1201px) {
    .rsad-wrapper.rsad-sticky {
        position: sticky !important;
        top: 20px;
        align-self: flex-start;
    }

    body.has-marquee .rsad-wrapper.rsad-sticky {
        top: calc(var(--marquee-height, 30px) + 20px);
    }
}

/* ==========================================================================
   8. SINGLE POST LAYOUT FIX
   Sidebar is inside content-area, so content-area needs 100% width
   ========================================================================== */

.single-post-container .content-area,
.single .site-content .content-area {
    width: 100%;
}

/* ==========================================================================
   9. FAVORITES LOADING STATE & ERROR TOAST
   ========================================================================== */

/* Loading state for favorite button */
.btn-favorite.is-loading {
    opacity: 0.6;
    pointer-events: none;
    cursor: wait;
}

.btn-favorite.is-loading i {
    animation: pulse-favorite 1s ease-in-out infinite;
}

@keyframes pulse-favorite {
    0%, 100% {
        opacity: 0.4;
        transform: scale(0.95);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
}

/* Error toast notification */
.fav-error-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: rgba(230, 57, 70, 0.95);
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 9999;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    max-width: 90%;
    text-align: center;
}

.fav-error-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .fav-error-toast {
        bottom: 20px;
        padding: 10px 20px;
        font-size: 13px;
    }
}

/* ==========================================================================
   10. FAVORITE BUTTON ACTIVE STATE
   ========================================================================== */

/* Heart icon - groen wanneer station favoriet is */
.btn-favorite.active .icon-heart {
    fill: #22c55e !important; /* Groen voor actieve favoriet */
    stroke: #16a34a !important;
}

/* Hover effect voor actieve favoriet */
.btn-favorite.active:hover .icon-heart {
    fill: #16a34a !important; /* Donkerder groen bij hover */
    stroke: #15803d !important;
}

/* Transition voor smooth kleurverandering */
.btn-favorite .icon-heart {
    transition: fill 0.2s ease, stroke 0.2s ease;
}