/*!
 * Mobile Responsive Styles
 * Enhanced mobile experience for Online Radio
 *
 * BREAKPOINT-DRIVEN MODULAR RESPONSIVE DESIGN
 * ============================================
 * This file is organized by breakpoints to prevent unwarranted effects
 * on other screen sizes when editing a specific size.
 *
 * STRUCTURE:
 * 1. BASE STYLES (no media query - applies to all screens)
 * 2. DESKTOP LARGE (min-width: 1200px)
 * 3. DESKTOP (min-width: 992px)
 * 4. TABLET ONLY (min-width: 768px and max-width: 991.98px)
 * 5. TABLET AND BELOW (max-width: 991.98px)
 * 6. MOBILE (max-width: 767.98px)
 * 7. SMALL MOBILE (max-width: 479.98px)
 * 8. EXTRA SMALL MOBILE (max-width: 359.98px)
 * 9. LANDSCAPE MOBILE (max-height: 500px and orientation: landscape)
 * 10. SPECIAL QUERIES (touch, print, reduced motion, high contrast)
 *
 * IMPORTANT: When adding new styles, place them in the appropriate
 * breakpoint section. Do NOT scatter media queries throughout the file.
 * ----------------------------------------------- */


/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║                                                                          ║
   ║                     SECTION 1: BASE STYLES                               ║
   ║                     (No media query - All screens)                       ║
   ║                                                                          ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* ========================================
   1.1 FULL SCREEN CONTAINMENT
   ======================================== */
html {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    touch-action: manipulation;
}

body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
    -webkit-overflow-scrolling: touch;
}

/* ========================================
   1.2 LAZY LOADING STYLES
   ======================================== */
img.lazy, img.lazy-loading, img[data-src] {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: lazyShimmer 1.5s infinite;
}

img.lazy-loaded {
    opacity: 1;
    animation: none;
    background: none;
}

img.lazy-error {
    opacity: 0.5;
    animation: none;
    background: #f5f5f5;
}

@keyframes lazyShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

[data-theme="dark"] img.lazy,
[data-theme="dark"] img.lazy-loading,
[data-theme="dark"] img[data-src] {
    background: linear-gradient(90deg, #2d2d2d 25%, #3d3d3d 50%, #2d2d2d 75%);
    background-size: 200% 100%;
}

.lazy-bg { background-color: #f0f0f0; transition: background-image 0.3s ease-in-out; }
.lazy-bg-loaded { background-color: transparent; }
[data-theme="dark"] .lazy-bg { background-color: #2d2d2d; }

.cover__image img.lazy, .cover__image img.lazy-loading, .cover__image img[data-src] {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    width: 100%;
    height: auto;
}

.list-group__cover img.lazy, .list-group__cover img.lazy-loading {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.swiper-slide img.lazy, .swiper-slide img.lazy-loading { min-height: 100px; }
img[loading="lazy"] { content-visibility: auto; }

/* ========================================
   1.3 PLAYER BASE STYLES
   UNIVERSAL RULES:
   - Visualizer: NEVER resize (always 300px)
   - Rotary Volume: ALWAYS rightmost when visible
   - ALL elements: ALWAYS vertically centered

   ELEMENT REFERENCE:
   1. Digital Clock (auto) - LEFT-MOST when visible
   2. Favorite Button (auto)
   3. Station Logo/Image (part of list-group)
   4. Station Info/Text (part of list-group)
   5. Play Controls v1 [Prev|Play/Stop|Next]
   6. Play Controls v2 [Play/Stop]
   7. Visualizer (300px fixed)
   8. Rotary LED Volume (auto, RIGHT-ALIGNED always)
      - #volume_knob_container (outer container)
      - #volume_knob_wrapper (inner wrapper)
        └─ #volume_leds (LED indicators surrounding the knob)
        └─ #volume_knob (knob in the center of LEDs)
      - These elements must NOT be separated

   PLACEMENT BY BREAKPOINT:
   BASE STYLES:        [1][2][3][4][5][7][8]
   DESKTOP LARGE:      [1][2][3][4][5][7][8]
   DESKTOP:            [1][2][3][4][5][7][8]
   TABLET ONLY:        [2][3][4][6][7][8]
   TABLET AND BELOW:   [3][4][6][7]
   MOBILE:             [3][6][7]
   SMALL MOBILE:       [3][6][7]
   EXTRA SMALL MOBILE: [6][7]
   LANDSCAPE MOBILE:   [2][3][5][7][8]
   ======================================== */

/* Player spacing variables */
#player {
    --visualizer-margin-right: 1px;
}

/* Player container - vertical centering */
#player,
#player .mejs__container,
#player .mejs__inner,
#player .mejs__controls {
    display: flex !important;
    align-items: center !important;
}

#player .mejs__buttons-wrapper {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    flex-wrap: nowrap !important;
}

/* ELEMENT ORDER 1: Digital Clock - LEFT-MOST when visible */
#player_clock,
#player #player_clock {
    order: 0 !important;
    flex: 0 0 auto !important;
    margin: 0 0 0 14px !important;
    display: flex !important;
    align-items: center !important;
}

/* ELEMENT ORDER 2: Favorite Button */
#player .mejs__favorite-button {
    order: 2 !important;
    flex: 0 0 auto !important;
    margin: 0 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ELEMENT ORDER 3-4: Station Logo + Info (list-group contains both) - ALWAYS LEFT-ALIGNED */
#player .mejs__controls > .list-group,
#player .list-group,
#player .list-group.list-group-flush,
div#player .list-group.list-group-flush {
    order: 3 !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: left !important;
}

/* Override ALL Bootstrap padding on list-group-item inside player */
#player .list-group .list-group-item,
#player .list-group .list-group-item.ps-3,
#player .list-group .list-group-item.pe-4,
#player .list-group .list-group-item.d-flex,
div#player .list-group .list-group-item {
    padding: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    gap: 8px !important;
    justify-content: flex-start !important;
}

#player .list-group .list-group__cover {
    flex: 0 0 auto !important;
    display: flex !important;

}

/* Override Bootstrap ps-2 class on list-group__content */
#player .list-group .list-group__content,
#player .list-group .list-group__content.ps-2,
div#player .list-group .list-group__content {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    padding-left: 8px !important;
    padding-right: 0 !important;
    text-align: left !important;
}

/* ELEMENT ORDER 5: Play Controls v1 [Prev|Play/Stop|Next] - full controls */
#player .mejs__controls-center {
    order: 5 !important;
    flex: 1 1 auto !important;  /* Grow to fill space - centers controls between neighbors */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ELEMENT ORDER 6: Play Controls v2 [Play/Stop] - minimal controls (hidden by default) */
/* Note: This is the standalone playpause button, shown on mobile */

/* ELEMENT ORDER 7: Visualizer - NEVER resize (always 300px), ALWAYS RIGHT-ALIGNED */
/*
   Flex Item approach: controls-center (flex: 1 1 auto) grows to fill space between
   Logo|Text and Visualizer, centering play buttons between its neighbors.
   Visualizer stays right-aligned naturally as a fixed-width flex item after controls-center.
*/
#visualizer_wrap,
#player #visualizer_wrap,
#player .mejs__controls #visualizer_wrap,
#player .mejs__visualizer,
div#visualizer_wrap.mejs__visualizer {
    /* Flex order and sizing */
    order: 7 !important;
    flex: 0 0 300px !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;

    /* Fixed dimensions - NEVER resize */
    width: 300px !important;
    min-width: 300px !important;
    max-width: 300px !important;

    /* RIGHT-ALIGN: controls-center flex-grow pushes this right; keep margin-right for volume spacing */
    margin-left: 0 !important;
    margin-right: var(--visualizer-margin-right, 1px) !important;

    /* Display as flex item */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ========================================
   ELEMENT ORDER 8: Rotary LED Volume
   ========================================
   Structure:
   #volume_knob_container (outer container)
   └─ #volume_knob_wrapper (inner wrapper)
      └─ #volume_leds (LED indicators surrounding the knob)
      └─ #volume_knob (knob sitting in the center of LEDs)

   RULES:
   - Always RIGHT-ALIGNED when visible
   - All elements must stay together as a unit
   - order: 999 ensures rightmost position
   ======================================== */
#volume_knob_container,
#volume_knob_wrapper,
#player #volume_knob_container,
#player #volume_knob_wrapper,
#player .mejs__controls #volume_knob_container,
#player .mejs__controls #volume_knob_wrapper {
    order: 999 !important;
    margin-left: 0 !important;  /* No auto - controls-center flex-grow pushes visualizer+volume right */
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-shrink: 0 !important;
    position: relative !important;
}

/* Outer container - rightmost positioning */
#volume_knob_container,
#player #volume_knob_container,
#player .mejs__controls #volume_knob_container {
    margin-right: 18px !important;
}

/* Inner wrapper - stays with container */
#volume_knob_wrapper,
#player #volume_knob_wrapper,
#player .mejs__controls #volume_knob_wrapper {
    margin: 0 !important;
}

/* Hide standard volume controls - using Rotary LED Volume instead */
#player .mejs__volume-button,
#player .mejs__horizontal-volume-slider {
    display: none !important;
}

/* UNIVERSAL RULE: All player child elements - vertically centered */
#player .mejs__controls > *,
#player .mejs__controls-center,
#player .list-group,
#player .list-group-item {
    display: flex !important;
    align-items: center !important;
}

#player .list-group .list-group__title {
    font-size: 14px !important;
    line-height: 1.3 !important;
}

#player .list-group .list-group__subtitle {
    font-size: 12px !important;
    line-height: 1.3 !important;
}

/* ========================================
   1.4 MOBILE BOTTOM NAVIGATION (Base)
   ======================================== */
.mobile-bottom-nav__search, #mobile_search_btn { display: none !important; }

.mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: var(--player-bg, #ffffff);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    padding: 0;
    padding-bottom: env(safe-area-inset-bottom, 0);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

[data-theme="dark"] .mobile-bottom-nav {
    background: #1a1a2e;
    border-top-color: rgba(255, 255, 255, 0.08);
}

.mobile-bottom-nav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 48px;
    min-width: 56px;
    padding: 6px 4px;
    color: var(--bs-gray-600, #6c757d);
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.mobile-bottom-nav__item:hover, .mobile-bottom-nav__item:focus { color: var(--bs-primary, #dc3545); text-decoration: none; }
.mobile-bottom-nav__item.active { color: var(--bs-primary, #dc3545); }
.mobile-bottom-nav__icon { font-size: 22px; line-height: 1; margin-bottom: 2px; }
.mobile-bottom-nav__item.active .ri-home-3-line::before { content: "\ee19"; }
.mobile-bottom-nav__item.active .ri-radio-2-line::before { content: "\f00a"; }
.mobile-bottom-nav__item.active .ri-building-2-line::before { content: "\eb4a"; }
.mobile-bottom-nav__item.active .ri-heart-3-line::before { content: "\ee55"; }
.mobile-bottom-nav__label { font-size: 10px; font-weight: 500; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.02em; }

[data-theme="dark"] .mobile-bottom-nav__item { color: rgba(255, 255, 255, 0.6); }
[data-theme="dark"] .mobile-bottom-nav__item:hover,
[data-theme="dark"] .mobile-bottom-nav__item:focus,
[data-theme="dark"] .mobile-bottom-nav__item.active { color: var(--bs-primary, #dc3545); }

/* ========================================
   1.5 MOBILE SEARCH OVERLAY (Base)
   ======================================== */
.mobile-search-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999;
    background: var(--bs-body-bg, #ffffff);
    display: flex; flex-direction: column;
    opacity: 0; visibility: hidden; transform: translateY(20px);
    transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
    pointer-events: none;
}
.mobile-search-overlay.active { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
[data-theme="dark"] .mobile-search-overlay { background: #121212; }

.mobile-search-overlay__header {
    display: flex; align-items: center;
    padding: 12px 16px; padding-top: calc(12px + env(safe-area-inset-top, 0));
    gap: 12px; background: var(--bs-body-bg, #ffffff);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
[data-theme="dark"] .mobile-search-overlay__header { background: #1a1a2e; border-bottom-color: rgba(255, 255, 255, 0.08); }

.mobile-search-overlay__close {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border: none; background: none;
    color: var(--bs-body-color, #212529); font-size: 24px;
    cursor: pointer; border-radius: 50%; transition: background 0.2s; flex-shrink: 0;
}
.mobile-search-overlay__close:hover { background: rgba(0, 0, 0, 0.05); }
[data-theme="dark"] .mobile-search-overlay__close { color: #ffffff; }
[data-theme="dark"] .mobile-search-overlay__close:hover { background: rgba(255, 255, 255, 0.1); }

.mobile-search-overlay__input-wrap { flex: 1; position: relative; }
.mobile-search-overlay__input {
    width: 100%; height: 44px; padding: 0 16px 0 44px;
    border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 22px;
    font-size: 16px; background: var(--bs-gray-100, #f8f9fa);
    color: var(--bs-body-color, #212529); outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.mobile-search-overlay__input:focus { border-color: var(--bs-primary, #dc3545); box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15); }
.mobile-search-overlay__input::placeholder { color: var(--bs-gray-500, #adb5bd); }
[data-theme="dark"] .mobile-search-overlay__input { background: #2d2d2d; border-color: rgba(255, 255, 255, 0.12); color: #ffffff; }

.mobile-search-overlay__icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 18px; color: var(--bs-gray-500, #adb5bd); pointer-events: none; }
.mobile-search-overlay__body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0)); }
.mobile-search-overlay__section-title { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--bs-gray-500, #6c757d); margin-bottom: 12px; }

.mobile-search-overlay__recent-item {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 12px 16px; margin-bottom: 4px; border: none;
    background: var(--bs-gray-100, #f8f9fa); border-radius: 8px;
    color: var(--bs-body-color, #212529); font-size: 14px;
    text-align: left; cursor: pointer; transition: background 0.2s;
}
.mobile-search-overlay__recent-item:hover { background: var(--bs-gray-200, #e9ecef); }
[data-theme="dark"] .mobile-search-overlay__recent-item { background: #2d2d2d; color: #ffffff; }
[data-theme="dark"] .mobile-search-overlay__recent-item:hover { background: #3d3d3d; }

.mobile-search-overlay__results { pointer-events: auto; }
.mobile-search-overlay__result-item {
    display: flex; align-items: center; gap: 12px; padding: 12px; margin-bottom: 8px;
    background: var(--bs-gray-100, #f8f9fa); border-radius: 12px;
    text-decoration: none; color: inherit; transition: background 0.2s, transform 0.15s;
    cursor: pointer; pointer-events: auto; position: relative; z-index: 1;
}
.mobile-search-overlay__result-item:hover { background: var(--bs-gray-200, #e9ecef); text-decoration: none; }
.mobile-search-overlay__result-item:active { transform: scale(0.98); }
[data-theme="dark"] .mobile-search-overlay__result-item { background: #2d2d2d; }
[data-theme="dark"] .mobile-search-overlay__result-item:hover { background: #3d3d3d; }

.mobile-search-overlay__result-img { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: var(--bs-gray-200, #e9ecef); }
.mobile-search-overlay__result-info { flex: 1; min-width: 0; }
.mobile-search-overlay__result-title { font-size: 15px; font-weight: 600; color: var(--bs-body-color, #212529); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-theme="dark"] .mobile-search-overlay__result-title { color: #ffffff; }
.mobile-search-overlay__result-subtitle { font-size: 13px; color: var(--bs-gray-600, #6c757d); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mobile-search-overlay__loading, .mobile-search-overlay__empty { display: flex; align-items: center; justify-content: center; padding: 40px 20px; color: var(--bs-gray-500, #6c757d); font-size: 14px; text-align: center; }
.mobile-search-overlay__loading i { margin-right: 8px; font-size: 18px; }

@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.ri-spin { animation: spin 1s linear infinite; }

.mobile-search-overlay__clear-recent { display: inline-block; padding: 4px 8px; margin-left: 8px; font-size: 11px; color: var(--bs-gray-500, #6c757d); background: none; border: none; cursor: pointer; text-decoration: underline; }
.mobile-search-overlay__clear-recent:hover { color: var(--bs-primary, #dc3545); }

/* ========================================
   1.6 DARK MODE
   ======================================== */
[data-theme="dark"] { --bs-body-color: #e0e0e0; --bs-gray-100: #2d2d2d; --bs-gray-200: #3d3d3d; --bs-gray-600: #adb5bd; }
[data-theme="dark"] .cover { background-color: #1e1e1e; }
[data-theme="dark"] .card { background-color: #1e1e1e; border-color: rgba(255, 255, 255, 0.08); }
[data-theme="dark"] .cover__title, [data-theme="dark"] .section__head h3 { color: #ffffff; }
[data-theme="dark"] .cover__subtitle, [data-theme="dark"] .section__subtitle { color: rgba(255, 255, 255, 0.7); }
[data-theme="dark"] .search input, [data-theme="dark"] #pb-search-input { background: #2d2d2d; border-color: rgba(255, 255, 255, 0.12); color: #ffffff; }
[data-theme="dark"] .search input::placeholder, [data-theme="dark"] #pb-search-input::placeholder { color: rgba(255, 255, 255, 0.5); }
[data-theme="dark"] .section__icon { background: rgba(220, 53, 69, 0.2); }
[data-theme="dark"] #footer { background: #0d0d0d; border-top-color: rgba(255, 255, 255, 0.08); }

/* ========================================
   1.7 FAVORITES PAGE
   ======================================== */
#favorites-container .cover__image::before { content: ''; position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; background: var(--bs-primary, #dc3545); border-radius: 50%; z-index: 5; }
#favorites-container .cover__image::after { content: '\EB7A'; font-family: 'remixicon', sans-serif; position: absolute; top: 12px; right: 12px; font-size: 14px; color: white; z-index: 6; }

/* ========================================
   1.8 LOADING SKELETON
   ======================================== */
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.skeleton { background: linear-gradient(90deg, var(--bs-gray-200, #e9ecef) 25%, var(--bs-gray-100, #f8f9fa) 50%, var(--bs-gray-200, #e9ecef) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 4px; }
[data-theme="dark"] .skeleton { background: linear-gradient(90deg, #2d2d2d 25%, #3d3d3d 50%, #2d2d2d 75%); background-size: 200% 100%; }

/* ========================================
   1.9 FOCUS VISIBLE
   ======================================== */
.mobile-bottom-nav__item:focus-visible, .mobile-search-overlay__close:focus-visible, .mobile-search-overlay__input:focus-visible, .mobile-search-overlay__recent-item:focus-visible, .mobile-search-overlay__result-item:focus-visible, .mobile-menu-close:focus-visible { outline: 2px solid var(--bs-primary, #dc3545); outline-offset: 2px; }
.mobile-bottom-nav__item:focus:not(:focus-visible), .mobile-search-overlay__close:focus:not(:focus-visible), .mobile-menu-close:focus:not(:focus-visible) { outline: none; }
.skip-to-content { position: absolute; top: -100px; left: 50%; transform: translateX(-50%); padding: 12px 24px; background: var(--bs-primary, #dc3545); color: white; text-decoration: none; border-radius: 0 0 8px 8px; z-index: 99999; transition: top 0.3s; }
.skip-to-content:focus { top: 0; }
.mobile-menu-close { display: none; }


/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║                     SECTION 2: DESKTOP LARGE (min-width: 1200px)         ║
   ║                                                                          ║
   ║  PLACEMENT: [1][2][3][4][5][7][8]                                        ║
   ║  HIDDEN: [6] Play Controls v2                                            ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */
@media (min-width: 1200px) {
    /* Player controls layout */
    #player .mejs__controls {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 0 0 0 16px !important;
        gap: 8px !important;
        position: relative !important;
    }

    /* [1] Digital Clock - LEFT-MOST */
    #player_clock,
    #player #player_clock {
        display: flex !important;
        order: 0 !important;
        flex: 0 0 auto !important;
        margin: 0 0 0 14px !important;
    }

    /* [2] Favorite button - VISIBLE */
    #player .mejs__favorite-button {
        display: flex !important;
        order: 2 !important;
        flex: 0 0 auto !important;
        margin: 0 8px !important;
    }

    /* [3][4] Station Logo + Info (list-group) - left-aligned, natural width */
    #player .mejs__controls > .list-group {
        display: flex !important;
        order: 3 !important;
        flex: 0 1 auto !important;
        min-width: 0 !important;
        margin: 0 8px !important;
    }

    /* [5] Play Controls v1 - VISIBLE [Prev|Play/Stop|Next] - centered between neighbors */
    #player .mejs__controls-center {
        display: flex !important;
        order: 5 !important;
        flex: 1 1 auto !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 5 !important;
        margin: 0 8px !important;
    }

    #player .mejs__buttons-wrapper {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
    }

    /* [7] Visualizer - VISIBLE, fixed 300px, RIGHT-ALIGNED with Volume */
    #visualizer_wrap,
    #player #visualizer_wrap,
    #player .mejs__controls #visualizer_wrap {
        display: flex !important;
        order: 7 !important;
        flex: 0 0 300px !important;
        width: 300px !important;
        min-width: 300px !important;
        max-width: 300px !important;
        margin-left: 0 !important;
        margin-right: var(--visualizer-margin-right, 1px) !important;
        z-index: 1 !important;
    }

    /* [8] Rotary LED Volume - ALWAYS RIGHT-ALIGNED */
    #volume_knob_container,
    #volume_knob_wrapper,
    #player #volume_knob_container {
        display: flex !important;
        order: 999 !important;
        flex: 0 0 auto !important;
        margin-left: 0 !important;
        margin-right: 18px !important;
        justify-content: flex-end !important;
        align-items: center !important;
        flex-shrink: 0 !important;
        z-index: 10 !important;
    }

    /* HIDDEN: Standard volume controls */
    #player .mejs__volume-button,
    #player .mejs__horizontal-volume-slider {
        display: none !important;
    }

    /* Playlist button - after volume */
    #player .mejs__playlist-button,
    #player .mejs__controls > .mejs__button:last-child {
        order: 1000 !important;
        flex: 0 0 auto !important;
        margin-right: 8px !important;
    }
}


/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║                     SECTION 3: DESKTOP (min-width: 992px)                ║
   ║                                                                          ║
   ║  PLACEMENT: [1][2][3][4][5][7][8]                                        ║
   ║  HIDDEN: [6] Play Controls v2                                            ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */
@media (min-width: 992px) {
    #player { position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; z-index: 99 !important; }

    /* Player controls - flex layout */
    #player .mejs__controls {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 0 0 0 16px !important;
        gap: 8px !important;
        position: relative !important;
    }

    /* [1] Digital Clock - LEFT-MOST */
    #player_clock,
    #player #player_clock {
        display: flex !important;
        order: 0 !important;
        flex: 0 0 auto !important;
        margin: 0 0 0 14px !important;
    }

    /* [2] Favorite button - VISIBLE */
    #player .mejs__favorite-button {
        display: flex !important;
        order: 2 !important;
        flex: 0 0 auto !important;
        margin: 0 8px !important;
    }

    /* [3][4] Station Logo + Info (list-group) - left-aligned, natural width */
    #player .mejs__controls > .list-group {
        display: flex !important;
        order: 3 !important;
        flex: 0 1 auto !important;
        min-width: 0 !important;
        margin: 0 8px !important;
    }

    /* [5] Play Controls v1 - VISIBLE [Prev|Play/Stop|Next] - centered between neighbors */
    #player .mejs__controls-center {
        display: flex !important;
        order: 5 !important;
        flex: 1 1 auto !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 5 !important;
        margin: 0 8px !important;
    }

    #player .mejs__buttons-wrapper {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
    }

    /* [7] Visualizer - VISIBLE, fixed 300px, RIGHT-ALIGNED with Volume */
    #visualizer_wrap, #player #visualizer_wrap, #player > #visualizer_wrap, #player .mejs__controls #visualizer_wrap,
    #player .mejs__controls .mejs__visualizer, #player .mejs__visualizer, .mejs__visualizer, div#visualizer_wrap.mejs__visualizer {
        display: flex !important; visibility: visible !important; opacity: 1 !important;
        position: relative !important; left: auto !important;
        width: 300px !important; min-width: 300px !important; max-width: 300px !important; height: 36px !important;
        flex: 0 0 300px !important;
        order: 7 !important;
        margin-left: 0 !important; margin-right: var(--visualizer-margin-right, 1px) !important;
        overflow: hidden !important; align-items: center !important; justify-content: center !important; z-index: 1 !important;
    }

    #visualizer, #player #visualizer, #player .mejs__visualizer canvas, #player .mejs__controls #visualizer_wrap canvas,
    #player #visualizer_wrap canvas, #visualizer_wrap canvas, canvas#visualizer {
        display: block !important; visibility: visible !important; width: 100% !important; height: 28px !important; z-index: 1 !important;
    }

    /* [8] Rotary LED Volume - ALWAYS RIGHT-ALIGNED */
    #volume_knob_container,
    #volume_knob_wrapper,
    #player #volume_knob_container {
        display: flex !important;
        order: 999 !important;
        margin-left: 0 !important;
        margin-right: 18px !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex-shrink: 0 !important;
        z-index: 10 !important;
    }

    /* HIDDEN: Standard volume controls */
    #player .mejs__volume-button,
    #player .mejs__horizontal-volume-slider {
        display: none !important;
    }
}


/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║                     SECTION 4: TABLET ONLY (768px - 991.98px)            ║
   ║                                                                          ║
   ║  PLACEMENT: [2][3][4][6][7][999]                                         ║
   ║  ORDER: [Favorite][Logo][Info][Play/Stop][Visualizer][Volume]            ║
   ║  HIDDEN: [1] Digital Clock, [5] Play Controls v1                         ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */
@media (min-width: 768px) and (max-width: 991.98px) {
    /* Hide header-bottom nav bar - bottom navbar handles navigation at this breakpoint.
       When .show is added (via bottom navbar Menu button), allow it to appear as overlay. */
    .header-bottom:not(.show) {
        display: none !important;
    }

    /* Also hide the hamburger toggler in header-top since bottom navbar has Menu button */
    .header-top .navbar-toggler {
        display: none !important;
    }

    /* Show mobile bottom nav at tablet breakpoint */
    .mobile-bottom-nav {
        display: flex !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 999 !important;
        background: var(--player-bg, #ffffff);
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
    [data-theme="dark"] .mobile-bottom-nav {
        background: #1a1a2e;
        border-top-color: rgba(255, 255, 255, 0.08);
    }

    #player {
        position: fixed !important; bottom: calc(48px + env(safe-area-inset-bottom, 0)) !important;
        left: 0 !important; right: 0 !important; z-index: 998 !important;
        background: var(--player-bg, #ffffff); border-top: 1px solid rgba(0, 0, 0, 0.08);
        padding: 8px 0 8px 0; height: 72px !important; min-height: 72px;
    }
    [data-theme="dark"] #player { background: #1a1a2e; border-top-color: rgba(255, 255, 255, 0.08); }

    /* Ensure all containers take full width */
    #player .mejs__container,
    #player .mejs__container.mejs__video,
    #player .mejs__inner {
        width: 100% !important;
        flex: 1 1 100% !important;
    }

    #player .mejs__controls {
        display: flex !important; flex-direction: row !important; align-items: center !important;
        justify-content: flex-start !important; padding: 0 0 0 16px !important; position: relative !important;
        gap: 8px !important; width: 100% !important; flex: 1 1 100% !important;
    }

    /* HIDDEN: [1] Digital Clock */
    #player_clock,
    #player #player_clock {
        display: none !important;
    }

    /* [2] Favorite button - VISIBLE - HIGH SPECIFICITY */
    #player .mejs__favorite-button,
    #player .mejs__controls .mejs__favorite-button,
    #player .mejs__controls > .mejs__favorite-button,
    div#player .mejs__favorite-button {
        display: flex !important;
        order: 2 !important;
        flex: 0 0 auto !important;
        margin: 0 4px !important;
        align-items: center !important;
        justify-content: center !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        width: auto !important;
        height: auto !important;
        min-width: 34px !important;
        min-height: 34px !important;
        overflow: visible !important;
        pointer-events: auto !important;
    }

    #player .mejs__favorite-button > button,
    div#player .mejs__favorite-button > button {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 34px !important;
        height: 34px !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* [3][4] Station Logo + Info (list-group) - left-aligned, natural width */
    #player .mejs__controls > .list-group {
        display: flex !important;
        order: 3 !important;
        flex: 0 1 auto !important;
        min-width: 0 !important;
        align-items: center !important;
    }

    /* [6] Play Controls v2 appearance: Show controls-center but hide Prev/Next,
       leaving only Play/Stop visible - centered between neighbors via flex-grow */
    #player .mejs__controls-center,
    #player .mejs__controls .mejs__controls-center,
    div#player .mejs__controls-center,
    div#player .mejs__controls .mejs__controls-center {
        display: flex !important;
        order: 6 !important;
        flex: 1 1 auto !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 5 !important;
        margin: 0 8px !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Hide Prev/Next buttons inside controls-center (keep only Play/Stop) */
    #player .mejs__controls-center > .mejs__button:not(.mejs__playpause-button),
    #player .mejs__controls-center > .mejs__favorite-button {
        display: none !important;
    }

    /* Hide the buttons-wrapper if used, show playpause directly */
    #player .mejs__controls-center .mejs__playpause-button {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 44px !important;
        height: 44px !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #player .mejs__controls-center .mejs__playpause-button > button {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 44px !important;
        height: 44px !important;
        align-items: center !important;
        justify-content: center !important;
    }


    /* [7] Visualizer - VISIBLE, fixed 300px, RIGHT-ALIGNED with Volume */
    #visualizer_wrap, #player #visualizer_wrap, #player .mejs__controls #visualizer_wrap, #player .mejs__visualizer, div#visualizer_wrap.mejs__visualizer {
        display: flex !important; visibility: visible !important; opacity: 1 !important;
        position: relative !important; left: auto !important;
        width: 300px !important; min-width: 300px !important; max-width: 300px !important; height: 36px !important;
        order: 7 !important; flex: 0 0 300px !important;
        margin-left: 0 !important; margin-right: var(--visualizer-margin-right, 1px) !important;
        align-items: center !important; justify-content: center !important;
        z-index: 1 !important;
    }

    #visualizer, #player .mejs__visualizer canvas, #visualizer_wrap canvas {
        display: block !important; visibility: visible !important; width: 300px !important; max-width: 300px !important; height: 32px !important;
    }

    /* [999] Rotary LED Volume - ALWAYS RIGHT-ALIGNED */
    #volume_knob_container,
    #volume_knob_wrapper,
    #player #volume_knob_container {
        display: flex !important;
        order: 999 !important;
        margin-left: 0 !important;
        margin-right: 18px !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        z-index: 10 !important;
    }

    /* HIDDEN: Standard volume controls */
    #player .mejs__volume-button,
    #player .mejs__horizontal-volume-slider {
        display: none !important;
    }

    /* Header-bottom overlay when opened via bottom navbar Menu button */
    .header-bottom.show {
        display: block !important;
        position: fixed !important; top: unset !important; left: 0 !important; right: 0 !important; bottom: 48px !important;
        z-index: 9998; background: var(--bs-body-bg, #ffffff); padding: 0;
        opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
        max-height: 40vh !important; height: auto !important; min-height: auto !important;
        border-top-left-radius: 16px; border-top-right-radius: 16px; box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    }
    [data-theme="dark"] .header-bottom.show { background: #121212; box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4); }
    .header-bottom.show .navbar-collapse,
    .header-bottom.show #main_navbar {
        display: flex !important; flex-direction: column;
    }
    .header-bottom.show .navbar-nav { padding: 8px 0; flex-direction: column; margin-bottom: 0 !important; }
    .header-bottom.show .navbar-nav .nav-item:has(.nav-link[href$="/"]),
    .header-bottom.show .navbar-nav .nav-item:has(.nav-link[href*="/radio"]),
    .header-bottom.show .navbar-nav .nav-item:has(.nav-link[href*="/network"]),
    .header-bottom.show .navbar-nav .nav-item:has(.nav-link[href*="/favorites"]) { display: none !important; }
    .header-bottom.show .nav-link { padding: 12px 20px; font-size: 16px; border-radius: 10px; }
    .header-bottom.show .container { padding-top: 16px; padding-bottom: 16px; }

    .under-header { padding-bottom: calc(72px + 48px + env(safe-area-inset-bottom, 0) + 16px) !important; }
    #footer { padding-bottom: calc(72px + 48px + env(safe-area-inset-bottom, 0) + 20px) !important; }
}

/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║              SECTION 4b: TABLET ≤850px (768px - 849.98px)                ║
   ║                                                                          ║
   ║  Play/Stop centered between [Logo+Text] edge and [Visualizer]           ║
   ║  instead of screen-center, to avoid overlap on narrower tablets          ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */
@media (min-width: 768px) and (max-width: 849.98px) {
    /* [6] Play Controls - grows to fill gap between Logo+Text and Visualizer */
    #player .mejs__controls-center,
    #player .mejs__controls .mejs__controls-center,
    div#player .mejs__controls-center,
    div#player .mejs__controls .mejs__controls-center {
        flex: 1 1 auto !important;
    }

    /* Visualizer: remove margin-left:auto since controls-center fills the gap */
    #visualizer_wrap, #player #visualizer_wrap, #player .mejs__controls #visualizer_wrap,
    #player .mejs__visualizer, div#visualizer_wrap.mejs__visualizer {
        margin-left: 0 !important;
    }
}

@media (min-width: 768px) and (max-width: 800px) {
    #player .mejs__controls { justify-content: flex-start; }
}


/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║                     SECTION 5: BELOW TABLET (max-width: 767.98px)        ║
   ║                                                                          ║
   ║  PLACEMENT: [3][4][6][7]                                                 ║
   ║  HIDDEN: [1] Clock, [2] Favorite, Prev/Next from Controls, [8] Volume    ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */
@media (max-width: 767.98px) {
    html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
    body { overflow-x: hidden; }

    .header-top .container { padding-left: 15px; padding-right: 15px; }
    .navbar-brand img { width: 35px !important; }
    .navbar-brand-text { font-size: 18px; }
    .header-bottom .search, nav .search, .navbar .search { display: none !important; }
    .navbar-toggler { padding: 8px; border: none; }
    .navbar-toggler i { font-size: 24px; }

    .under-header { padding-top: 24px; padding-bottom: 80px; }
    html body div#main div.under-header, #main .under-header { margin-top: 0 !important; padding-top: 0 !important; }

    .section__head h3 { font-size: 20px; }
    .section__subtitle { font-size: 11px; }
    .cover__title { font-size: 13px; }
    .cover__subtitle { font-size: 11px; }

    #footer { padding-top: 40px; padding-bottom: 80px; }
    #footer .row > div { margin-bottom: 30px; }
    .footer-title { font-size: 16px !important; }
    .app-download { flex-wrap: wrap; gap: 10px; }
    .app-download .btn { flex: 1; justify-content: center; margin: 0 !important; }

    .swiper-carousel .swiper { padding-bottom: 10px; }
    .playlist-sidebar { margin-bottom: 20px; }

    .cover--details { flex-direction: column; text-align: center; }
    .cover--details .cover__image { margin-bottom: 20px; }
    .cover--details .cover__body { padding-left: 0 !important; }

    .mobile-bottom-nav { display: flex; bottom: 0; }
    .header-top .navbar-toggler { display: none !important; }
    .cookie { top: 50% !important; bottom: auto !important; transform: translate(-50%, -50%) !important; }

    .sidebar { margin-top: 30px; padding-top: 20px; border-top: 1px solid rgba(0, 0, 0, 0.08); }
    [data-theme="dark"] .sidebar { border-top-color: rgba(255, 255, 255, 0.08); }
    .sidebar .playlist-sidebar { margin-bottom: 16px; }

    .cover__image > a { min-height: 44px; }
    .btn-icon, .btn-icon.btn-sm { min-width: 44px; min-height: 44px; }
    .nav-link { min-height: 44px; display: flex; align-items: center; }
    .list-group-item { min-height: 44px; }
    #player .mejs__button > button, #player .list-group__cover { min-width: 48px; min-height: 48px; }
    .station-favorite-btn, .station-favorite-btn .radio-info__icon { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; }
    .cover__image > a::after { min-width: 50px; min-height: 50px; }

    /* HIDDEN: [1] Digital Clock, [2] Favorite, [8] Rotary LED Volume */
    #player_clock, #player #player_clock { display: none !important; }
    #player .mejs__favorite-button { display: none !important; }
    #volume_knob_container, #volume_knob_wrapper, #player #volume_knob_container { display: none !important; }

    /* [6] Controls v2 - centered between [Logo|Text] and [Visualizer] via flex-grow */
    #player .mejs__controls-center {
        display: flex !important;
        order: 6 !important;
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        flex: 1 1 auto !important;
        align-items: center !important;
        justify-content: center !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 5 !important;
        margin: 0 8px !important;
    }
    #player .mejs__controls-center > .mejs__button:not(.mejs__playpause-button),
    #player .mejs__controls-center > .mejs__favorite-button {
        display: none !important;
    }

    /* Visualizer: no auto-margin needed, controls-center fills the gap */
    #visualizer_wrap, #player #visualizer_wrap, #player .mejs__controls #visualizer_wrap,
    #player .mejs__visualizer, div#visualizer_wrap.mejs__visualizer {
        margin-left: 0 !important;
    }

    @supports (padding-bottom: env(safe-area-inset-bottom)) {
        #player { padding-bottom: env(safe-area-inset-bottom); }
        .mobile-bottom-nav { padding-bottom: env(safe-area-inset-bottom); }
        #footer { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
        .cookie { bottom: calc(20px + env(safe-area-inset-bottom)) !important; }
        .mobile-search-overlay__header { padding-top: calc(12px + env(safe-area-inset-top)); }
        .mobile-search-overlay__body { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
    }

    .header-bottom {
        position: fixed !important; top: unset !important; left: 0 !important; right: 0 !important; bottom: 48px !important;
        z-index: 9998; background: var(--bs-body-bg, #ffffff); padding: 0;
        opacity: 0; visibility: hidden; pointer-events: none;
        transition: opacity 0.3s, visibility 0.3s, transform 0.3s; transform: translateY(100%);
        max-height: 40vh !important; height: auto !important; min-height: auto !important;
        border-top-left-radius: 16px; border-top-right-radius: 16px; box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    }
    .header-bottom.show { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
    [data-theme="dark"] .header-bottom { background: #121212; box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4); }

    .header-bottom .container { height: auto !important; min-height: auto !important; display: flex; flex-direction: column; padding-top: 16px; padding-bottom: 16px; position: relative; }
    .header-bottom .navbar { flex-direction: column; height: auto !important; min-height: auto !important; }

    .header-bottom.show .navbar-collapse, .header-bottom.show .navbar-collapse.collapse, .header-bottom.show .navbar-collapse.collapse:not(.show),
    .header-bottom.show .navbar-collapse.collapse.show, .header-bottom.show #main_navbar, .header-bottom.show #main_navbar.collapse, .header-bottom.show #main_navbar.collapse.show {
        display: flex !important; flex-direction: column; flex: 0 0 auto !important; height: auto !important;
        overflow-y: auto; -webkit-overflow-scrolling: touch; visibility: visible !important; opacity: 1 !important;
    }
    .header-bottom .navbar-collapse.collapsing { height: auto !important; display: flex !important; }
    .header-bottom:not(.show) .navbar-collapse, .header-bottom:not(.show) #main_navbar { display: none !important; }
    .header-bottom .mobile-menu-close { display: none !important; }
    .header-bottom .navbar-nav { padding: 8px 0; flex-direction: column; margin-bottom: 0 !important; }

    .header-bottom .navbar-nav .nav-item:has(.nav-link[href$="/"]),
    .header-bottom .navbar-nav .nav-item:has(.nav-link[href*="/radio"]),
    .header-bottom .navbar-nav .nav-item:has(.nav-link[href*="/network"]),
    .header-bottom .navbar-nav .nav-item:has(.nav-link[href*="/favorites"]) { display: none !important; }

    .header-bottom .nav-item { margin-bottom: 2px; }
    .header-bottom .nav-link { padding: 12px 20px; font-size: 16px; border-radius: 10px; transition: background 0.2s; }
    .header-bottom .nav-link:hover, .header-bottom .nav-link.active { background: rgba(220, 53, 69, 0.1); }
    .header-bottom .nav-link .nav-icon { font-size: 22px; margin-right: 12px; }
    .header-bottom .search { margin-top: auto; padding: 0 0 20px 0; width: 100%; }
    .header-bottom .search input { height: 50px; font-size: 16px; }

    .mobile-menu-close {
        position: absolute; top: calc(16px + env(safe-area-inset-top, 0)); right: 16px;
        width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
        font-size: 28px; color: var(--bs-body-color, #212529); cursor: pointer; z-index: 10;
        border-radius: 50%; border: none; background: transparent; transition: background 0.2s;
    }
    .mobile-menu-close:hover { background: rgba(0, 0, 0, 0.05); }
    [data-theme="dark"] .mobile-menu-close { color: #ffffff; }
    [data-theme="dark"] .mobile-menu-close:hover { background: rgba(255, 255, 255, 0.1); }
}


/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║                     SECTION 6: MOBILE (max-width: 767.98px)              ║
   ║                                                                          ║
   ║  PLACEMENT: [3][6][7]                                                    ║
   ║  HIDDEN: [1] Clock, [2] Favorite, [4] Info, Prev/Next from Ctrl, [8] Knob║
   ╚══════════════════════════════════════════════════════════════════════════╝ */
@media (max-width: 767.98px) {
    .container { padding-left: 12px; padding-right: 12px; }
    .header-top { padding: 6px 0; }
    .header-bottom { padding: 4px 0; }
    .navbar-brand img { width: 28px !important; margin-right: 6px !important; }
    .navbar-brand-text { font-size: 15px; }
    .site-tagline { display: none !important; }
    .header-bottom .search, nav .search, .navbar .search { display: none !important; }

    .section { margin-bottom: 16px; }
    .section__head { margin-bottom: 10px; }
    .section__head h3 { font-size: 16px; }
    .section__icon { width: 36px; height: 36px; }
    .section__icon i { font-size: 16px; }

    .card-item.col-6 { padding-left: 6px; padding-right: 6px; }
    .row.g-4 { --bs-gutter-x: 12px; --bs-gutter-y: 12px; }

    .cover__image img { border-radius: 6px; }
    .cover__body { padding: 6px 0; }
    .cover__title { font-size: 11px; line-height: 1.2; }
    .cover__subtitle { font-size: 9px; }
    .cover__label__view { font-size: 9px; padding: 3px 6px; }

    #footer { padding: 20px 0 70px; }
    #footer .row > div { margin-bottom: 16px; }
    .footer-link li { margin-bottom: 5px; }
    .footer-link a { font-size: 13px; }
    .last-footer { font-size: 11px; padding: 10px 0 !important; }

    /* Player - PLACEMENT: [3][6][7] */
    #player {
        position: fixed !important; bottom: calc(48px + env(safe-area-inset-bottom, 0)) !important;
        left: 0; right: 0; height: 72px !important; min-height: 72px;
        padding: 8px 12px 8px 12px !important; border-radius: 0; z-index: 998;
        display: flex !important; flex-direction: row !important; align-items: center !important;
    }
    #player .mejs__container { min-height: auto !important; padding: 0 !important; margin: 0 !important; display: flex !important; width: 100% !important; }
    #player .mejs__inner { padding: 0 !important; margin: 0 !important; width: 100% !important; }
    #player .mejs__controls { flex-wrap: nowrap !important; padding: 0 !important; margin: 0 !important; justify-content: flex-start !important; align-items: center !important; gap: 0; width: 100% !important; display: flex !important; flex-direction: row !important; position: relative !important; }

    /* HIDDEN: [1] Clock, [2] Favorite, [4] Info text, [8] Rotary LED Volume */
    #player_clock, #player #player_clock { display: none !important; }
    #player .mejs__favorite-button { display: none !important; }
    #volume_knob_container, #volume_knob_wrapper, #player #volume_knob_container { display: none !important; }
    #player .mejs__volume-button, #player .mejs__horizontal-volume-slider { display: none !important; }

    /* [6] Controls v2 - centered between [Logo] and [Visualizer] via flex */
    #player .mejs__controls-center {
        display: flex !important;
        order: 6 !important;
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        flex: 1 1 auto !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 5 !important;
        margin: 0 !important;
    }
    #player .mejs__controls-center > .mejs__button:not(.mejs__playpause-button),
    #player .mejs__controls-center > .mejs__favorite-button {
        display: none !important;
    }

    /* Visualizer: no auto-margin needed, controls-center fills the gap */
    #visualizer_wrap, #player #visualizer_wrap, #player .mejs__controls #visualizer_wrap,
    #player .mejs__visualizer, div#visualizer_wrap.mejs__visualizer {
        margin-left: 0 !important;
    }

    /* [3] Station Logo - VISIBLE (no text) */
    #player .mejs__controls > .list-group, #player .list-group {
        display: flex !important; order: 3 !important; flex: 0 0 auto !important;
        align-items: center !important; margin: 0 !important; padding: 0 !important;
    }
    #player .list-group .list-group__cover {
        display: flex !important; width: 44px; height: 44px; min-width: 44px; flex-shrink: 0;
        margin: 0 !important; padding: 0 !important; align-items: center;
    }
    #player .list-group .list-group__cover img { width: 44px; height: 44px; object-fit: cover; border-radius: 4px; }
    #player .list-group .list-group__content,
    #player .list-group .list-group__content.ps-2,
    div#player .list-group .list-group__content { display: none !important; } /* Hide text on mobile */

    /* [6] Play Controls v2 - VISIBLE (simple play/pause) */
    #player .mejs__playpause-button {
        display: flex !important; order: 6 !important; flex: 0 0 auto !important;
        align-items: center !important; justify-content: center !important;
        width: 44px !important; height: 44px !important; margin: 0 1px !important; padding: 0 !important;
    }
    #player .mejs__playpause-button > button {
        display: flex !important; align-items: center !important; justify-content: center !important;
        width: 44px !important; height: 44px !important; color: #212529 !important; background: transparent !important;
    }
    #player .mejs__playpause-button > button [class^="ri-"],
    #player .mejs__playpause-button > button [class*=" ri-"] { font-size: 24px !important; }
    [data-theme="dark"] #player .mejs__playpause-button > button { color: #ffffff !important; }

    /* [7] Visualizer - VISIBLE, fixed 300px */
    #visualizer_wrap, #player #visualizer_wrap, #player .mejs__controls #visualizer_wrap, #player .mejs__visualizer, div#visualizer_wrap.mejs__visualizer {
        display: flex !important; visibility: visible !important; opacity: 1 !important;
        order: 7 !important; flex: 0 0 300px !important;
        width: 300px !important; min-width: 300px !important; max-width: 300px !important; height: 44px !important;
        margin-left: 0 !important; margin-right: var(--visualizer-margin-right, 1px) !important; align-items: center !important;
    }
    #visualizer, #player #visualizer, #visualizer_wrap canvas {
        display: block !important; visibility: visible !important;
        width: 300px !important; max-width: 300px !important; height: 32px !important;
    }

    #player .mejs__controls-center .mejs__playpause-button > button:focus, #player .mejs__controls-center .mejs__playpause-button > button:active, #player .mejs__controls-center .mejs__playpause-button > button:hover, #player .mejs__buttons-wrapper .mejs__playpause-button > button:focus, #player .mejs__buttons-wrapper .mejs__playpause-button > button:active, #player .mejs__buttons-wrapper .mejs__playpause-button > button:hover, #player .mejs__button.mejs__playpause-button > button:focus, #player .mejs__button.mejs__playpause-button > button:active, #player .mejs__button.mejs__playpause-button > button:hover { background: transparent !important; box-shadow: none !important; outline: none !important; border: none !important; -webkit-tap-highlight-color: transparent !important; }
    #player .mejs__playpause-button, #player .mejs__button.mejs__playpause-button { -webkit-tap-highlight-color: transparent !important; }
    #player .mejs__playpause-button:focus, #player .mejs__playpause-button:active, #player .mejs__button.mejs__playpause-button:focus, #player .mejs__button.mejs__playpause-button:active { background: transparent !important; box-shadow: none !important; outline: none !important; }

    #player .mejs__controls-center .mejs__playpause-button > button svg, #player .mejs__buttons-wrapper .mejs__playpause-button > button svg { stroke: #212529 !important; opacity: 1 !important; }
    body[data-theme="dark"] #player .mejs__controls-center .mejs__playpause-button > button, body[data-theme="dark"] #player .mejs__buttons-wrapper .mejs__playpause-button > button, [data-theme="dark"] #player .mejs__controls-center .mejs__playpause-button > button, [data-theme="dark"] #player .mejs__buttons-wrapper .mejs__playpause-button > button { color: #ffffff !important; }
    [data-theme="dark"] #player .mejs__controls-center .mejs__playpause-button > button svg, [data-theme="dark"] #player .mejs__buttons-wrapper .mejs__playpause-button > button svg { stroke: #ffffff !important; }
    [data-theme="dark"] #player .mejs__controls-center .mejs__playpause-button > button [class^="ri-"], [data-theme="dark"] #player .mejs__controls-center .mejs__playpause-button > button [class*=" ri-"], [data-theme="dark"] #player .mejs__buttons-wrapper .mejs__playpause-button > button [class^="ri-"], [data-theme="dark"] #player .mejs__buttons-wrapper .mejs__playpause-button > button [class*=" ri-"] { color: #ffffff !important; }

    #visualizer_wrap, #player #visualizer_wrap, #player > #visualizer_wrap, #player .mejs__controls #visualizer_wrap, #player .mejs__visualizer, div#visualizer_wrap.mejs__visualizer { display: flex !important; visibility: visible !important; opacity: 1 !important; position: relative !important; left: auto !important; width: 300px !important; min-width: 300px !important; max-width: 300px !important; height: 44px !important; order: 7 !important; flex: 0 0 300px !important; margin-left: 0 !important; margin-right: var(--visualizer-margin-right, 1px) !important; padding: 0 !important; justify-content: center !important; align-items: center !important; background: transparent !important; border: none !important; }
    #visualizer, #player #visualizer, #player .mejs__visualizer canvas, #visualizer_wrap canvas, canvas#visualizer { display: block !important; visibility: visible !important; width: 300px !important; max-width: 300px !important; height: 32px !important; }
    [data-theme="dark"] #visualizer_wrap, [data-theme="dark"] #player #visualizer_wrap, [data-theme="dark"] div#visualizer_wrap.mejs__visualizer { background: transparent !important; border: none !important; }

    #player .mejs__favorite-button, #player .mejs__controls > .mejs__favorite-button, #player [class*="favorite"]:not(#favorites-container):not([href*="favorite"]) { display: none !important; position: absolute !important; left: -9999px !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; visibility: hidden !important; pointer-events: none !important; }
    #player_clock, #player #player_clock, #player_clock_time { display: none !important; position: absolute !important; left: -9999px !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; }
    #volume_knob_container, #volume_knob_wrapper, #volume_knob { display: none !important; position: absolute !important; left: -9999px !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; }
    #player .mejs__volume-button, #player .mejs__horizontal-volume-slider, #player .mejs__time, #player #player_toggler, #player .playlist-toggle, #player [data-playlist-toggle] { display: none !important; }
    #player .mejs__controls > .mejs__button:last-child, #player .ri-play-list-2-fill, #player .ri-playlist-fill, #player button[aria-label*="playlist" i], #player .mejs__playlist-button { display: none !important; }

    #player_info { padding: 16px; }
    #player_info .cover { display: none; }
    #player .playlist { padding-left: 0; }
    .under-header { padding-bottom: calc(72px + 48px + env(safe-area-inset-bottom, 0) + 16px) !important; }
    #footer { padding-bottom: calc(72px + 48px + env(safe-area-inset-bottom, 0) + 20px) !important; }

    .cookie { width: calc(100% - 40px) !important; max-width: 300px !important; position: fixed !important; left: 50% !important; top: 50% !important; bottom: auto !important; right: auto !important; transform: translate(-50%, -50%) !important; padding: 16px !important; margin: 0 !important; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px !important; }
    .cookie .txt { width: 100% !important; margin: 0 !important; padding: 0 !important; }
    .cookie .txt p { font-size: 13px; line-height: 1.4; margin: 0 !important; }
    .cookie .accept { padding: 8px 24px !important; font-size: 14px !important; margin: 0 !important; }

    .cta { padding: 6px 14px; width: 100%; max-width: 300px; margin-left: auto; margin-right: auto; display: flex; justify-content: center; align-items: center; }
    .cta:before { width: 40px; height: 40px; }
    .cta span { font-size: 14px; }

    [data-swiper-slides="4"] { --swiper-slides: 2 !important; }
    [data-swiper-slides="6"] { --swiper-slides: 3 !important; }
    [data-swiper-slides="4"] .swiper-slide { width: calc(50% - 8px) !important; }
    .swiper-carousel .swiper { margin: 0 -8px; padding: 0 8px; }
    .swiper-pagination { position: relative; margin-top: 16px; }
    .swiper-pagination-bullet { width: 8px; height: 8px; }

    *:not(#player) > .list-group .list-group__title, .sidebar .list-group__title { font-size: 13px; }
    *:not(#player) > .list-group .list-group__subtitle, .sidebar .list-group__subtitle { font-size: 11px; }

    .radio-info { flex-direction: column; align-items: flex-start; }
    .radio-info__btn { flex-wrap: wrap; gap: 8px; }
    .radio-info__btn .btn { flex: 1; min-width: 100px; }

    .cover--details { margin: 0; padding: 0; }
    .cover--details .cover__hero { display: none !important; }
    .cover--details .section, .cover.cover--air.cover--details { padding-top: 16px; }
    .cover--details .cover__desc { flex-direction: column; text-align: center; padding: 40px 16px 20px 16px; border-top: none !important; }
    .cover--details .cover__image, .cover--details #station_cover_image { display: block !important; margin: 0 auto 20px auto; width: 80vw; height: 80vw; max-width: 300px; max-height: 300px; min-width: unset; min-height: unset; border-width: 3px !important; border-radius: 16px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); overflow: hidden; position: relative; flex-shrink: 0; }
    .cover--details .cover__image img, .cover--details #station_cover_image img, .cover--details #cover_image { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block !important; }
    .cover--details .cover__body { padding: 0; text-align: center; width: 100%; }
    .cover--details .cover__title { font-size: 22px !important; display: block !important; font-weight: 600; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
    .cover--details .cover__subtitle { display: block !important; margin-top: 4px; font-size: 14px; }
    .cover--details .radio-info { display: flex !important; flex-direction: row !important; flex-wrap: nowrap; justify-content: center; align-items: center; margin-top: 12px !important; gap: 16px; }
    .cover--details .radio-info li { display: flex !important; align-items: center; margin: 0; }
    .cover--details .radio-info li .radio-info__icon { margin-right: 4px; }
    .cover--details .cover__body > div[style*="font-size"] { text-align: center; margin-top: 16px !important; }
    .cover--details .d-flex.align-items-center.mt-4 { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 20px !important; }
    .cover--details .btn.btn-red { order: -1; width: auto; min-width: 140px; height: 44px; font-size: 15px; }
    .cover--details .btn.btn-default.btn-icon { width: 44px; height: 44px; }
    .review-card { padding: 16px; }
    .review-header { flex-wrap: wrap; gap: 12px; }
    .review-avatar { width: 40px; height: 40px; }
    .star-rating { width: 100%; order: 3; }
}


/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║                     SECTION 7: SMALL MOBILE (max-width: 479.98px)        ║
   ║                                                                          ║
   ║  PLACEMENT: [3+6 overlay][7]                                             ║
   ║  Play/Stop overlaid on Logo. No separate play button.                    ║
   ║  HIDDEN: [1] Clock, [2] Favorite, [4] Info, [5] Controls v1, [8] Knob    ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */
@media (max-width: 479.98px) {
    .navbar-brand img { width: 28px !important; }
    .navbar-brand-text { font-size: 14px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .btn-icon.btn-sm { width: 32px; height: 32px; min-width: 32px; min-height: 32px; }
    .btn-icon.btn-sm i { font-size: 16px; }
    .container { padding-left: 12px; padding-right: 12px; }
    .under-header { padding-top: 16px; padding-bottom: 90px; }
    .section__head h3 { font-size: 16px; }
    .section__icon { width: 36px; height: 36px; }
    .card-item.col-6 { padding-left: 6px; padding-right: 6px; }
    .row.g-4 { --bs-gutter-x: 12px; --bs-gutter-y: 12px; }
    .cover__body { padding: 8px 0; }
    .cover__title { font-size: 11px; }
    .cover__subtitle { font-size: 9px; }
    .cover__label__view { font-size: 9px; padding: 3px 6px; }
    .cover__label__view i { font-size: 10px; }

    /* Player - PLACEMENT: [3+6 overlay][7] */
    /* Budget: 8px pad-L + 44px logo(+overlay) + 4px gap + 300px viz + 8px pad-R + 8px ctrl-pad-R = 372px */
    #player { padding: 6px 8px 6px 8px !important; height: 72px !important; min-height: 72px; }
    #player .mejs__controls { padding: 0 8px 0 0; gap: 4px; }

    /* [3] Station Logo - container is position:relative for overlay */
    #player .list-group .list-group__cover {
        width: 44px !important; height: 44px !important; min-width: 44px !important;
        position: relative !important;
    }
    #player .list-group .list-group__cover img { width: 44px !important; height: 44px !important; }

    /* [4] Info text - HIDDEN at small mobile */
    #player .list-group .list-group__content,
    #player .list-group .list-group__content.ps-2,
    div#player .list-group .list-group__content { display: none !important; }

    /* [6] controls-center: overlay on logo via negative margin */
    #player .mejs__controls-center {
        flex: 0 0 auto !important;
        width: 44px !important;
        height: 44px !important;
        order: 4 !important; /* right after logo (order: 3) so negative margin overlaps it */
        margin-left: -48px !important; /* slide back over logo: -(44px logo + 4px gap) */
        margin-right: 0 !important;
        padding: 0 !important;
        position: relative !important;
        z-index: 10 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        pointer-events: none !important;
    }

    /* [6] Play/Stop button - overlay on top of Logo */
    #player .mejs__playpause-button {
        width: 44px !important;
        height: 44px !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 4px !important;
        background: rgba(0, 0, 0, 0.35) !important;
        pointer-events: auto !important;
    }
    #player .mejs__playpause-button > button {
        width: 44px !important; height: 44px !important;
        display: flex !important; align-items: center !important; justify-content: center !important;
        background: transparent !important;
        color: #ffffff !important;
    }
    #player .mejs__playpause-button > button [class^="ri-"],
    #player .mejs__playpause-button > button [class*=" ri-"] {
        font-size: 22px !important;
        color: #ffffff !important;
    }
    #player .mejs__playpause-button > button svg {
        stroke: #ffffff !important;
    }
    /* Dark mode: same white icon on overlay */
    [data-theme="dark"] #player .mejs__playpause-button > button { color: #ffffff !important; }
    [data-theme="dark"] #player .mejs__playpause-button > button [class^="ri-"],
    [data-theme="dark"] #player .mejs__playpause-button > button [class*=" ri-"] { color: #ffffff !important; }

    /* [7] Visualizer - fixed 300px */
    #visualizer_wrap, #player #visualizer_wrap {
        flex: 0 0 300px !important; width: 300px !important; min-width: 300px !important; max-width: 300px !important;
    }

    #footer { padding: 25px 0 80px; }
    #footer .navbar-brand img { width: 35px !important; }
    .footer-title { font-size: 14px !important; margin-bottom: 12px !important; }
    .footer-link a { font-size: 13px; }
    .app-download { flex-direction: column; }
    .app-download .btn { width: 100%; margin-bottom: 8px; }
    .last-footer { font-size: 11px; }
    .modal-dialog { margin: 10px; }
    .modal-body { padding: 15px; }
    .cta:before { width: 35px; height: 35px; }
    .cta span { font-size: 13px; }

    .cover--details { margin: 0; padding: 0; }
    .cover--details .cover__hero { display: none !important; }
    .cover--details .section, .cover.cover--air.cover--details { padding-top: 16px; }
    .cover--details .cover__desc { flex-direction: column; text-align: center; padding: 40px 16px 20px 16px; border-top: none !important; }
    .cover--details .cover__image, .cover--details #station_cover_image { display: block !important; margin: 0 auto 20px auto; width: 80vw; height: 80vw; max-width: 300px; max-height: 300px; min-width: unset; min-height: unset; border-width: 3px !important; border-radius: 16px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); overflow: hidden; position: relative; flex-shrink: 0; }
    .cover--details .cover__image img, .cover--details #station_cover_image img, .cover--details #cover_image { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block !important; }
    .cover--details .cover__body { padding: 0; text-align: center; width: 100%; }
    .cover--details .cover__title { font-size: 22px !important; display: block !important; font-weight: 600; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
    .cover--details .cover__subtitle { display: block !important; margin-top: 4px; font-size: 14px; }
    .cover--details .radio-info { display: flex !important; flex-direction: row !important; flex-wrap: nowrap; justify-content: center; align-items: center; margin-top: 12px !important; gap: 16px; }
    .cover--details .radio-info li { display: flex !important; align-items: center; margin: 0; }
    .cover--details .radio-info li .radio-info__icon { margin-right: 4px; }
    .cover--details .cover__body > div[style*="font-size"] { text-align: center; margin-top: 16px !important; }
    .cover--details .d-flex.align-items-center.mt-4 { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 20px !important; }
    .cover--details .btn.btn-red { order: -1; width: auto; min-width: 140px; height: 44px; font-size: 15px; }
    .cover--details .btn.btn-default.btn-icon { width: 44px; height: 44px; }
    .review-card { padding: 16px; }
    .review-header { flex-wrap: wrap; gap: 12px; }
    .review-avatar { width: 40px; height: 40px; }
    .star-rating { width: 100%; order: 3; }
}


/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║                     SECTION 7: SMALL MOBILE (max-width: 479.98px)        ║
   ║                                                                          ║
   ║  PLACEMENT: [3+6 overlay][7]                                             ║
   ║  Play/Stop overlaid on Logo. No separate play button.                    ║
   ║  HIDDEN: [1] Clock, [2] Favorite, [4] Info, [5] Controls v1, [8] Knob    ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */
@media (max-width: 479.98px) {
    .navbar-brand img { width: 28px !important; }
    .navbar-brand-text { font-size: 14px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .btn-icon.btn-sm { width: 32px; height: 32px; min-width: 32px; min-height: 32px; }
    .btn-icon.btn-sm i { font-size: 16px; }
    .container { padding-left: 10px; padding-right: 10px; }
    .section__head h3 { font-size: 14px; }
    .section__subtitle { font-size: 10px; }
    .cover__title { font-size: 10px; }
    .cover__subtitle { font-size: 8px; }
    .footer-link a { font-size: 12px; }

    /* Player - PLACEMENT: [3+6 overlay][7] */
    /* Budget: 8px pad-L + 44px logo(+overlay) + 4px gap + 300px viz + 8px pad-R + 8px ctrl-pad-R = 372px */
    #player { padding: 6px 8px 6px 8px !important; height: 72px !important; min-height: 72px; }
    #player .mejs__controls { padding: 0 8px 0 0; gap: 4px; }

    /* [3] Station Logo - container is position:relative for overlay */
    #player .list-group .list-group__cover {
        width: 44px !important; height: 44px !important; min-width: 44px !important;
        position: relative !important;
    }
    #player .list-group .list-group__cover img { width: 44px !important; height: 44px !important; }

    /* [4] Info text - HIDDEN at small mobile */
    #player .list-group .list-group__content,
    #player .list-group .list-group__content.ps-2,
    div#player .list-group .list-group__content { display: none !important; }

    /* [6] controls-center: overlay on logo via negative margin */
    #player .mejs__controls-center {
        flex: 0 0 auto !important;
        width: 44px !important;
        height: 44px !important;
        order: 4 !important; /* right after logo (order: 3) so negative margin overlaps it */
        margin-left: -48px !important; /* slide back over logo: -(44px logo + 4px gap) */
        margin-right: 0 !important;
        padding: 0 !important;
        position: relative !important;
        z-index: 10 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        pointer-events: none !important;
    }

    /* [6] Play/Stop button - overlay on top of Logo */
    #player .mejs__playpause-button {
        width: 44px !important;
        height: 44px !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 4px !important;
        background: rgba(0, 0, 0, 0.35) !important;
        pointer-events: auto !important;
    }
    #player .mejs__playpause-button > button {
        width: 44px !important; height: 44px !important;
        display: flex !important; align-items: center !important; justify-content: center !important;
        background: transparent !important;
        color: #ffffff !important;
    }
    #player .mejs__playpause-button > button [class^="ri-"],
    #player .mejs__playpause-button > button [class*=" ri-"] {
        font-size: 22px !important;
        color: #ffffff !important;
    }
    #player .mejs__playpause-button > button svg {
        stroke: #ffffff !important;
    }
    /* Dark mode: same white icon on overlay */
    [data-theme="dark"] #player .mejs__playpause-button > button { color: #ffffff !important; }
    [data-theme="dark"] #player .mejs__playpause-button > button [class^="ri-"],
    [data-theme="dark"] #player .mejs__playpause-button > button [class*=" ri-"] { color: #ffffff !important; }

    /* [7] Visualizer - fixed 300px */
    #visualizer_wrap, #player #visualizer_wrap, #player .mejs__controls #visualizer_wrap, #player .mejs__visualizer, div#visualizer_wrap.mejs__visualizer {
        display: flex !important; visibility: visible !important;
        order: 7 !important; flex: 0 0 300px !important;
        width: 300px !important; min-width: 300px !important; max-width: 300px !important; height: 44px !important;
        margin-left: 0 !important; margin-right: var(--visualizer-margin-right, 1px) !important; align-items: center !important;
    }
    #visualizer, #player #visualizer, #visualizer_wrap canvas {
        display: block !important; visibility: visible !important;
        width: 300px !important; max-width: 300px !important; height: 32px !important;
    }

    #player .mejs__controls-center .mejs__playpause-button > button:focus, #player .mejs__controls-center .mejs__playpause-button > button:active, #player .mejs__controls-center .mejs__playpause-button > button:hover, #player .mejs__buttons-wrapper .mejs__playpause-button > button:focus, #player .mejs__buttons-wrapper .mejs__playpause-button > button:active, #player .mejs__buttons-wrapper .mejs__playpause-button > button:hover, #player .mejs__button.mejs__playpause-button > button:focus, #player .mejs__button.mejs__playpause-button > button:active, #player .mejs__button.mejs__playpause-button > button:hover { background: transparent !important; box-shadow: none !important; outline: none !important; border: none !important; -webkit-tap-highlight-color: transparent !important; }
    #player .mejs__playpause-button, #player .mejs__button.mejs__playpause-button { -webkit-tap-highlight-color: transparent !important; }
    #player .mejs__playpause-button:focus, #player .mejs__playpause-button:active, #player .mejs__button.mejs__playpause-button:focus, #player .mejs__button.mejs__playpause-button:active { background: transparent !important; box-shadow: none !important; outline: none !important; }

    #player .mejs__controls-center .mejs__playpause-button > button svg, #player .mejs__buttons-wrapper .mejs__playpause-button > button svg { stroke: #212529 !important; opacity: 1 !important; }
    body[data-theme="dark"] #player .mejs__controls-center .mejs__playpause-button > button, body[data-theme="dark"] #player .mejs__buttons-wrapper .mejs__playpause-button > button, [data-theme="dark"] #player .mejs__controls-center .mejs__playpause-button > button, [data-theme="dark"] #player .mejs__buttons-wrapper .mejs__playpause-button > button { color: #ffffff !important; }
    [data-theme="dark"] #player .mejs__controls-center .mejs__playpause-button > button svg, [data-theme="dark"] #player .mejs__buttons-wrapper .mejs__playpause-button > button svg { stroke: #ffffff !important; }
    [data-theme="dark"] #player .mejs__controls-center .mejs__playpause-button > button [class^="ri-"], [data-theme="dark"] #player .mejs__controls-center .mejs__playpause-button > button [class*=" ri-"], [data-theme="dark"] #player .mejs__buttons-wrapper .mejs__playpause-button > button [class^="ri-"], [data-theme="dark"] #player .mejs__buttons-wrapper .mejs__playpause-button > button [class*=" ri-"] { color: #ffffff !important; }

    #visualizer_wrap, #player #visualizer_wrap, #player > #visualizer_wrap, #player .mejs__controls #visualizer_wrap, #player .mejs__visualizer, div#visualizer_wrap.mejs__visualizer { display: flex !important; visibility: visible !important; opacity: 1 !important; position: relative !important; left: auto !important; width: 300px !important; min-width: 300px !important; max-width: 300px !important; height: 44px !important; order: 7 !important; flex: 0 0 300px !important; margin-left: 0 !important; margin-right: var(--visualizer-margin-right, 1px) !important; padding: 0 !important; justify-content: center !important; align-items: center !important; background: transparent !important; border: none !important; }
    #visualizer, #player #visualizer, #player .mejs__visualizer canvas, #visualizer_wrap canvas, canvas#visualizer { display: block !important; visibility: visible !important; width: 300px !important; max-width: 300px !important; height: 32px !important; }
    [data-theme="dark"] #visualizer_wrap, [data-theme="dark"] #player #visualizer_wrap, [data-theme="dark"] div#visualizer_wrap.mejs__visualizer { background: transparent !important; border: none !important; }

    #player .mejs__favorite-button, #player .mejs__controls > .mejs__favorite-button, #player [class*="favorite"]:not(#favorites-container):not([href*="favorite"]) { display: none !important; position: absolute !important; left: -9999px !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; visibility: hidden !important; pointer-events: none !important; }
    #player_clock, #player #player_clock, #player_clock_time { display: none !important; position: absolute !important; left: -9999px !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; }
    #volume_knob_container, #volume_knob_wrapper, #volume_knob { display: none !important; position: absolute !important; left: -9999px !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; }
    #player .mejs__volume-button, #player .mejs__horizontal-volume-slider, #player .mejs__time, #player #player_toggler, #player .playlist-toggle, #player [data-playlist-toggle] { display: none !important; }

    #player_info { padding: 16px; }
    #player_info .cover { display: none; }
    #player .playlist { padding-left: 0; }
    .under-header { padding-bottom: calc(72px + 48px + env(safe-area-inset-bottom, 0) + 16px) !important; }
    #footer { padding-bottom: calc(72px + 48px + env(safe-area-inset-bottom, 0) + 20px) !important; }

    .cookie { width: calc(100% - 40px) !important; max-width: 300px !important; position: fixed !important; left: 50% !important; top: 50% !important; bottom: auto !important; right: auto !important; transform: translate(-50%, -50%) !important; padding: 16px !important; margin: 0 !important; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px !important; }
    .cookie .txt { width: 100% !important; margin: 0 !important; padding: 0 !important; }
    .cookie .txt p { font-size: 13px; line-height: 1.4; margin: 0 !important; }
    .cookie .accept { padding: 8px 24px !important; font-size: 14px !important; margin: 0 !important; }

    .cta { padding: 6px 14px; width: 100%; max-width: 300px; margin-left: auto; margin-right: auto; display: flex; justify-content: center; align-items: center; }
    .cta:before { width: 40px; height: 40px; }
    .cta span { font-size: 14px; }

    [data-swiper-slides="4"] { --swiper-slides: 2 !important; }
    [data-swiper-slides="6"] { --swiper-slides: 3 !important; }
    [data-swiper-slides="4"] .swiper-slide { width: calc(50% - 8px) !important; }
    .swiper-carousel .swiper { margin: 0 -8px; padding: 0 8px; }
    .swiper-pagination { position: relative; margin-top: 16px; }
    .swiper-pagination-bullet { width: 8px; height: 8px; }

    *:not(#player) > .list-group .list-group__title, .sidebar .list-group__title { font-size: 13px; }
    *:not(#player) > .list-group .list-group__subtitle, .sidebar .list-group__subtitle { font-size: 11px; }

    .radio-info { flex-direction: column; align-items: flex-start; }
    .radio-info__btn { flex-wrap: wrap; gap: 8px; }
    .radio-info__btn .btn { flex: 1; min-width: 100px; }

    .cover--details { margin: 0; padding: 0; }
    .cover--details .cover__hero { display: none !important; }
    .cover--details .section, .cover.cover--air.cover--details { padding-top: 16px; }
    .cover--details .cover__desc { flex-direction: column; text-align: center; padding: 40px 16px 20px 16px; border-top: none !important; }
    .cover--details .cover__image, .cover--details #station_cover_image { display: block !important; margin: 0 auto 20px auto; width: 80vw; height: 80vw; max-width: 300px; max-height: 300px; min-width: unset; min-height: unset; border-width: 3px !important; border-radius: 16px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); overflow: hidden; position: relative; flex-shrink: 0; }
    .cover--details .cover__image img, .cover--details #station_cover_image img, .cover--details #cover_image { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block !important; }
    .cover--details .cover__body { padding: 0; text-align: center; width: 100%; }
    .cover--details .cover__title { font-size: 22px !important; display: block !important; font-weight: 600; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
    .cover--details .cover__subtitle { display: block !important; margin-top: 4px; font-size: 14px; }
    .cover--details .radio-info { display: flex !important; flex-direction: row !important; flex-wrap: nowrap; justify-content: center; align-items: center; margin-top: 12px !important; gap: 16px; }
    .cover--details .radio-info li { display: flex !important; align-items: center; margin: 0; }
    .cover--details .radio-info li .radio-info__icon { margin-right: 4px; }
    .cover--details .cover__body > div[style*="font-size"] { text-align: center; margin-top: 16px !important; }
    .cover--details .d-flex.align-items-center.mt-4 { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 20px !important; }
    .cover--details .btn.btn-red { order: -1; width: auto; min-width: 140px; height: 44px; font-size: 15px; }
    .cover--details .btn.btn-default.btn-icon { width: 44px; height: 44px; }
    .review-card { padding: 16px; }
    .review-header { flex-wrap: wrap; gap: 12px; }
    .review-avatar { width: 40px; height: 40px; }
    .star-rating { width: 100%; order: 3; }
}


/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║                     SECTION 8: EXTRA SMALL MOBILE (max-width: 359.98px)  ║
   ║                                                                          ║
   ║  PLACEMENT: [3+6 overlay][7]                                             ║
   ║  Play/Stop overlaid on Logo (smaller). No separate play button.          ║
   ║  HIDDEN: [1] Clock, [2] Favorite, [4] Info, [5] Ctrl v1, [8] Knob       ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */
@media (max-width: 359.98px) {
    .navbar-brand-text { display: none; }
    .container { padding-left: 10px; padding-right: 10px; }
    .section__head h3 { font-size: 14px; }
    .section__subtitle { font-size: 10px; }
    .cover__title { font-size: 10px; }
    .cover__subtitle { font-size: 8px; }
    .footer-link a { font-size: 12px; }

    /* Player - PLACEMENT: [3+6 overlay][7] */
    #player { padding: 5px 8px !important; height: 72px !important; min-height: 72px; }
    #player .mejs__controls { padding: 0; gap: 4px; }

    /* [3] Station Logo - VISIBLE (smaller), keeps overlay */
    #player .list-group, #player .mejs__controls > .list-group { display: flex !important; }
    #player .list-group .list-group__cover {
        width: 38px !important; height: 38px !important; min-width: 38px !important;
        position: relative !important;
    }
    #player .list-group .list-group__cover img { width: 38px !important; height: 38px !important; }

    /* [6] controls-center: overlay on logo via negative margin */
    #player .mejs__controls-center {
        flex: 0 0 auto !important;
        width: 38px !important; height: 38px !important;
        order: 4 !important;
        margin-left: -42px !important; /* -(38px logo + 4px gap) */
        margin-right: 0 !important; padding: 0 !important;
        position: relative !important; z-index: 10 !important;
        display: flex !important; align-items: center !important; justify-content: center !important;
        pointer-events: none !important;
    }

    /* [6] Play/Stop overlay - sized to match smaller logo */
    #player .mejs__playpause-button {
        width: 38px !important; height: 38px !important;
        margin: 0 !important;
        background: rgba(0, 0, 0, 0.35) !important;
        border-radius: 4px !important;
        pointer-events: auto !important;
    }
    #player .mejs__playpause-button > button {
        width: 38px !important; height: 38px !important;
        color: #ffffff !important; background: transparent !important;
    }
    #player .mejs__playpause-button > button [class^="ri-"],
    #player .mejs__playpause-button > button [class*=" ri-"] { font-size: 18px !important; color: #ffffff !important; }

    /* [7] Visualizer - fixed 300px */
    #visualizer_wrap, #player #visualizer_wrap {
        display: flex !important; order: 7 !important;
        flex: 0 0 300px !important; width: 300px !important; min-width: 300px !important; max-width: 300px !important;
        margin-left: 0 !important;
    }
}


/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║                     SECTION 9: LANDSCAPE MOBILE                          ║
   ║                     (max-height: 500px and orientation: landscape)       ║
   ║                                                                          ║
   ║  PLACEMENT: [2][3][5][7][8]                                              ║
   ║  HIDDEN: [1] Clock, [4] Info text                                        ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */
@media (max-height: 500px) and (orientation: landscape) {
    #player { height: 72px !important; min-height: 72px; padding: 4px 10px !important; display: flex !important; align-items: center !important; justify-content: center !important; }
    #player .mejs__container,
    #player .mejs__container.mejs__video,
    #player .mejs__inner {
        display: flex !important; align-items: center !important; height: 100% !important;
        width: 100% !important; flex: 1 1 100% !important;
        min-width: 0 !important; max-width: 100% !important;
    }
    #player .mejs__controls { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; height: 100% !important; width: 100% !important; flex: 1 1 100% !important; gap: 8px !important; position: relative !important; }

    /* HIDDEN: [1] Digital Clock, [4] Info text, stray MEJS elements */
    #player_clock, #player #player_clock { display: none !important; }
    #player .list-group .list-group__content,
    #player .list-group .list-group__content.ps-2,
    div#player .list-group .list-group__content { display: none !important; }
    #player .mejs__time, #player .mejs__time-rail,
    #player .mejs__controls > .mejs__playpause-button:not(.mejs__controls-center .mejs__playpause-button),
    #player .mejs__controls > .mejs__button.mejs__playpause-button:not(.mejs__controls-center .mejs__playpause-button),
    #player .mejs__volume-button, #player .mejs__horizontal-volume-slider,
    #player .mejs__playlist-button, #player [data-playlist-toggle],
    #player #player_toggler { display: none !important; }

    /* [5] Controls v1 (Previous, Play/Stop, Next) - centered between [Logo] and [Visualizer] via flex */
    #player .mejs__controls-center {
        display: flex !important;
        order: 5 !important;
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        flex: 1 1 auto !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 5 !important;
        margin: 0 !important;
    }
    /* Show Prev/Next buttons, only hide Favorite inside controls-center */
    #player .mejs__controls-center > .mejs__favorite-button {
        display: none !important;
    }

    /* Visualizer: no auto-margin needed, controls-center fills the gap */
    #visualizer_wrap, #player #visualizer_wrap, #player .mejs__controls #visualizer_wrap,
    #player .mejs__visualizer, div#visualizer_wrap.mejs__visualizer {
        margin-left: 0 !important;
    }

    /* [2] Favorite Button - VISIBLE */
    #player .mejs__favorite-button, #player .mejs__controls > .mejs__favorite-button, #player .mejs__controls .mejs__favorite-button {
        display: flex !important; position: relative !important; left: auto !important;
        width: 36px !important; height: 36px !important; min-width: 36px !important;
        margin: 0 !important; padding: 0 !important; overflow: visible !important;
        visibility: visible !important; pointer-events: auto !important;
        align-items: center !important; justify-content: center !important;
        order: 2 !important; flex: 0 0 36px !important;
    }
    #player .mejs__favorite-button > button { display: flex !important; align-items: center; justify-content: center; width: 100%; height: 100%; }

    /* [3] Station Logo - VISIBLE (no text) */
    #player .mejs__controls > .list-group, #player .mejs__controls > .list-group.list-group-flush, #player .mejs__controls .list-group, #player .list-group, #player .list-group.list-group-flush {
        margin: 0 !important; display: flex !important; align-items: center !important;
        order: 3 !important; flex: 0 0 auto !important;
    }
    #player .list-group .list-group__cover { width: 42px !important; height: 42px !important; min-width: 42px !important; flex-shrink: 0; display: flex !important; }
    #player .list-group .list-group__cover img { width: 42px !important; height: 42px !important; }

    /* [5] Play Controls v1 (Previous, Play/Stop, Next) - VISIBLE
       DOM order is [Prev][PlayPause][Next] — use CSS order to guarantee visual order */
    /* Previous button (first child of controls-center) */
    #player .mejs__controls-center > .mejs__button:first-child {
        display: flex !important; order: 1 !important;
        flex: 0 0 auto !important;
        width: 36px !important; height: 36px !important;
        align-items: center !important; justify-content: center !important;
    }
    /* Play/Stop button (middle) */
    #player .mejs__controls-center > .mejs__playpause-button {
        display: flex !important; order: 2 !important; flex: 0 0 auto !important;
        width: 40px !important; height: 40px !important;
        align-items: center !important; justify-content: center !important;
    }
    #player .mejs__controls-center > .mejs__playpause-button > button {
        display: flex !important; width: 40px !important; height: 40px !important;
        align-items: center !important; justify-content: center !important;
    }
    /* Next button (last child of controls-center) */
    #player .mejs__controls-center > .mejs__button:last-child {
        display: flex !important; order: 3 !important;
        flex: 0 0 auto !important;
        width: 36px !important; height: 36px !important;
        align-items: center !important; justify-content: center !important;
    }

    /* [7] Visualizer - VISIBLE, fixed 300px, before Volume Knob */
    #visualizer_wrap, #player #visualizer_wrap, #player > #visualizer_wrap, #player .mejs__controls #visualizer_wrap, #player .mejs__visualizer, div#visualizer_wrap.mejs__visualizer {
        display: flex !important; align-items: center !important;
        order: 7 !important; flex: 0 0 300px !important; flex-shrink: 0 !important;
        margin-left: 0 !important; margin-right: var(--visualizer-margin-right, 1px) !important;
        width: 300px !important; min-width: 300px !important; max-width: 300px !important;
        visibility: visible !important; opacity: 1 !important;
        position: relative !important;
        z-index: 1 !important;
    }

    /* [8] Rotary LED Volume - ALWAYS RIGHT-ALIGNED
       Must reset ALL properties set by mobile section (position, left, width, height, etc.)
       so the volume knob participates in flex layout correctly. */
    #volume_knob_container,
    #player #volume_knob_container {
        display: flex !important;
        order: 999 !important;
        position: relative !important;
        left: auto !important;
        width: auto !important;
        height: auto !important;
        margin-left: 0 !important;
        margin-right: 4px !important;
        padding: 0 !important;
        overflow: visible !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex-shrink: 0 !important;
        z-index: 10 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
    #volume_knob_wrapper,
    #player #volume_knob_wrapper {
        display: flex !important;
        order: 999 !important;
        position: relative !important;
        left: auto !important;
        width: 56px !important;
        height: 56px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
    /* Reset #volume_knob itself (hidden by mobile section) */
    #volume_knob,
    #player #volume_knob {
        display: block !important;
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 36px !important;
        height: 36px !important;
        overflow: visible !important;
        visibility: visible !important;
        pointer-events: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .under-header { padding-bottom: 80px; }
}


/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║                     SECTION 10: SPECIAL QUERIES                          ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* Touch Devices */
@media (hover: none) and (pointer: coarse) {
    .nav-link, .btn:not(#player .btn):not(.mejs__button > button) { min-height: 44px; }
    .cover__image > a[href*="/station/"]::after { display: none; }
    .nav-link { padding: 14px 16px; }
    .btn, a, button { -webkit-tap-highlight-color: rgba(220, 53, 69, 0.2); }
}

/* Print */
@media print {
    #player, .cookie, #header, .sidebar, .btn-back-to-top, .mobile-bottom-nav { display: none !important; }
    .main { width: 100% !important; }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
    .mobile-search-overlay { transition: none; }
    .mobile-bottom-nav { transition: none; }
}

/* High Contrast */
@media (prefers-contrast: more) {
    .cover { border: 2px solid currentColor; }
    .mobile-bottom-nav__item.active { border-bottom: 3px solid var(--bs-primary, #dc3545); }
    .btn, button { border: 2px solid currentColor; }
}

/* END OF RESPONSIVE STYLES */