/* =====================================================
   ANOWXRADIO - PLAYER STYLES
   Version: 1.4.0 - Added CSS Variable Support for Admin Color Controls
   ===================================================== */

.player-page{padding-top:10px}
.breadcrumb{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text-muted);flex-wrap:wrap}
.breadcrumb a{color:var(--accent-red);font-weight:500;transition:var(--transition)}
.breadcrumb a:hover{color:var(--accent-dark-red)}
.breadcrumb .fa-chevron-right{font-size:10px;opacity:.4}
.player-container{background:var(--player-card-bg, var(--bg-card));border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);margin-bottom:30px}

/* Hero */
.player-hero{position:relative;background:var(--gradient-player);padding:45px 35px;overflow:hidden}
.player-bg-glow{position:absolute;top:50%;left:20%;width:300px;height:300px;background:radial-gradient(circle,var(--player-glow-color, rgba(220,20,60,.12)),transparent 70%);transform:translate(-50%,-50%);pointer-events:none}
.player-hero-content{position:relative;display:flex;align-items:center;gap:35px;z-index:1}

/* Image with Status Ring */
.player-image-wrap{position:relative;flex-shrink:0;width:170px;height:170px}
.player-image{width:100%;height:100%;border-radius:50%;object-fit:cover;border:4px solid rgba(255,255,255,.1);position:relative;z-index:2}
.status-ring{position:absolute;top:-5px;left:-5px;width:180px;height:180px;z-index:1}
.ring-svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring-bg{fill:none;stroke:rgba(255,255,255,.08);stroke-width:3}
.ring-progress{fill:none;stroke:var(--accent-red);stroke-width:3;stroke-linecap:round;stroke-dasharray:352;stroke-dashoffset:352;transition:stroke-dashoffset 1s var(--ease),stroke .3s}

/* Status Indicator */
.status-indicator{position:absolute;bottom:5px;right:5px;width:50px;height:50px;border-radius:50%;background:rgba(30,30,30,.9);border:3px solid var(--player-card-bg, var(--bg-card));display:flex;align-items:center;justify-content:center;z-index:3;backdrop-filter:blur(8px)}
.status-idle,.status-buffering,.status-playing,.status-error{display:none;align-items:center;justify-content:center}
.status-idle{color:rgba(255,255,255,.6);font-size:16px}

/* Buffering Wave Bars */
.wave-bars{display:flex;align-items:center;gap:2px;height:24px}
.wave-bars span{width:3px;background:#f39c12;border-radius:2px;animation:wave 1.2s ease-in-out infinite}
.wave-bars span:nth-child(1){height:6px;animation-delay:0s}
.wave-bars span:nth-child(2){height:12px;animation-delay:.1s}
.wave-bars span:nth-child(3){height:18px;animation-delay:.2s}
.wave-bars span:nth-child(4){height:12px;animation-delay:.3s}
.wave-bars span:nth-child(5){height:6px;animation-delay:.4s}
@keyframes wave{0%,100%{transform:scaleY(.4);opacity:.5}50%{transform:scaleY(1);opacity:1}}

/* Playing EQ Bars */
.eq-bars{display:flex;align-items:flex-end;gap:2px;height:24px}
.eq-bars span{width:4px;background:#2ecc71;border-radius:2px;animation:eq .8s ease-in-out infinite alternate}
.eq-bars span:nth-child(1){height:8px;animation-delay:0s}
.eq-bars span:nth-child(2){height:16px;animation-delay:.1s}
.eq-bars span:nth-child(3){height:22px;animation-delay:.2s}
.eq-bars span:nth-child(4){height:14px;animation-delay:.3s}
.eq-bars span:nth-child(5){height:10px;animation-delay:.4s}
@keyframes eq{0%{height:4px}100%{height:22px}}

/* States */
.status-error i{color:#e74c3c;font-size:18px}
[data-state="idle"] .status-idle{display:flex}
[data-state="buffering"] .status-buffering{display:flex}
[data-state="playing"] .status-playing{display:flex}
[data-state="error"] .status-error{display:flex}
[data-state="buffering"] .ring-progress{stroke:#f39c12;stroke-dashoffset:88;animation:ring-spin 2s linear infinite}
[data-state="playing"] .ring-progress{stroke:#2ecc71;stroke-dashoffset:0}
[data-state="error"] .ring-progress{stroke:#e74c3c;stroke-dashoffset:264}
@keyframes ring-spin{0%{transform:rotate(-90deg)}100%{transform:rotate(270deg)}}

/* Player Details */
.player-details{flex:1;color:#fff}
.player-title{font-size:28px;font-weight:800;margin-bottom:14px;line-height:1.2;text-shadow:0 2px 8px rgba(0,0,0,.3);color:var(--player-title-color, #ffffff)}
.player-tags{display:flex;gap:10px;margin-bottom:20px;flex-wrap:wrap}
.tag{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:50px;font-size:12px;font-weight:600;backdrop-filter:blur(4px)}
.country-tag{background:rgba(255,255,255,.12);color:#fff}
.category-tag{background:rgba(220,20,60,.25);color:#FFD700}
.live-tag{background:rgba(39,174,96,.25);color:#2ecc71}
.live-dot-sm{width:8px;height:8px;border-radius:50%;background:#2ecc71;animation:pulse-dot 1.5s ease-in-out infinite}
@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}
.player-stats{display:flex;gap:25px}
.stat-item{display:flex;align-items:center;gap:8px;color:var(--player-stats-color, rgba(255,255,255,.7));font-size:14px}
.stat-item i{font-size:16px;color:var(--accent-pink)}
.stat-item span{font-weight:700;color:var(--player-title-color, #ffffff)}
.stat-item small{font-size:11px;opacity:.5}

/* =====================================================
   CONTROLS BAR - DESKTOP (Default)
   ===================================================== */
.player-controls-bar{
    display:flex;
    align-items:center;
    gap:15px;
    padding:20px 30px;
    background:var(--player-controls-bg, linear-gradient(135deg,#1a1a2e,#16213e));
    border-top:1px solid rgba(255,255,255,.03)
}
.controls-left{display:flex;align-items:center;gap:10px}
.ctrl-btn{
    width:48px;
    height:48px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:18px;
    transition:var(--transition);
    border:none;
    cursor:pointer;
}
.play-btn{
    width:58px;
    height:58px;
    background:linear-gradient(135deg,var(--accent-red),var(--accent-pink));
    font-size:22px;
    box-shadow:0 4px 20px rgba(220,20,60,.4)
}
.play-btn:hover{transform:scale(1.08);box-shadow:0 6px 25px rgba(220,20,60,.5)}
.stop-btn{background:rgba(255,255,255,.08)}
.stop-btn:hover{background:rgba(255,255,255,.15)}
.controls-center{flex:1;padding:0 15px;overflow:hidden}
.status-text{color:rgba(255,255,255,.65);font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}

/* Audio Visualizer */
.audio-visualizer{height:30px;margin-top:6px;overflow:hidden;border-radius:4px}
#visualizerCanvas{width:100%;height:100%;display:block}

.controls-right{display:flex;align-items:center;gap:8px}
.volume-btn{
    color:#fff;
    font-size:18px;
    padding:8px;
    transition:var(--transition);
    background:transparent;
    border:none;
    cursor:pointer;
}
.volume-btn:hover{color:var(--accent-pink)}
.volume-wrap{width:90px}
.volume-slider{
    -webkit-appearance:none;
    appearance:none;
    width:100%;
    height:5px;
    border-radius:3px;
    background:rgba(255,255,255,.12);
    outline:none;
    cursor:pointer
}
.volume-slider::-webkit-slider-thumb{
    -webkit-appearance:none;
    width:16px;
    height:16px;
    border-radius:50%;
    background:linear-gradient(135deg,var(--accent-red),var(--accent-pink));
    cursor:pointer;
    box-shadow:0 2px 8px rgba(220,20,60,.4);
    transition:var(--transition)
}
.volume-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}
.volume-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--accent-red);cursor:pointer;border:none}
.like-btn{
    color:rgba(255,255,255,.5);
    font-size:20px;
    transition:var(--transition);
    background:transparent;
    border:none;
    cursor:pointer;
}
.like-btn:hover,.like-btn.liked{color:var(--accent-red)}

/* =====================================================
   MOBILE EQ INDICATOR - Base Styles (Hidden on Desktop)
   ===================================================== */
.mobile-eq-indicator{
    display:none;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    background:linear-gradient(135deg, rgba(39,174,96,0.2), rgba(46,204,113,0.1));
    border-radius:12px;
    border:1px solid rgba(39,174,96,0.3);
}
.mobile-eq-indicator .eq-bars-mobile{
    display:flex;
    align-items:flex-end;
    justify-content:center;
    gap:3px;
    height:20px;
}
.mobile-eq-indicator .eq-bars-mobile span{
    width:3px;
    background:linear-gradient(to top, #2ecc71, #58d68d);
    border-radius:2px;
    animation:mobileEqAnim 0.5s ease-in-out infinite alternate;
}
.mobile-eq-indicator .eq-bars-mobile span:nth-child(1){height:5px;animation-delay:0s}
.mobile-eq-indicator .eq-bars-mobile span:nth-child(2){height:10px;animation-delay:0.1s}
.mobile-eq-indicator .eq-bars-mobile span:nth-child(3){height:16px;animation-delay:0.15s}
.mobile-eq-indicator .eq-bars-mobile span:nth-child(4){height:10px;animation-delay:0.2s}
.mobile-eq-indicator .eq-bars-mobile span:nth-child(5){height:5px;animation-delay:0.25s}

@keyframes mobileEqAnim{
    0%{transform:scaleY(0.5);opacity:0.7}
    100%{transform:scaleY(1);opacity:1}
}

/* =====================================================
   MOBILE RESPONSIVE - 768px and below
   Beautiful Compact Layout
   ===================================================== */
@media (max-width: 768px) {
    
    /* Controls Bar - Flexbox Grid */
    .player-controls-bar{
        display:grid !important;
        grid-template-columns:auto 1fr auto;
        grid-template-rows:auto auto;
        gap:12px !important;
        padding:16px !important;
        align-items:center;
    }
    
    /* Row 1, Col 1: Play + Stop Buttons */
    .controls-left{
        grid-column:1;
        grid-row:1;
        display:flex !important;
        align-items:center !important;
        gap:8px !important;
    }
    
    /* Row 1, Col 2: EQ Indicator (Center) */
    .mobile-eq-indicator{
        grid-column:2;
        grid-row:1;
        display:none;
        justify-self:start;
        margin-left:5px;
    }
    
    /* Show EQ only when playing */
    [data-state="playing"] .mobile-eq-indicator{
        display:flex !important;
    }
    
    /* Row 1, Col 3: Like + Volume */
    .controls-right{
        grid-column:3;
        grid-row:1;
        display:flex !important;
        align-items:center !important;
        gap:6px !important;
        justify-self:end;
    }
    
    /* Row 2: Full Width - Now Playing + Visualizer */
    .controls-center{
        grid-column:1 / -1;
        grid-row:2;
        padding:12px 0 0 0 !important;
        border-top:1px solid rgba(255,255,255,0.08);
    }
    
    /* Now Playing Text */
    .controls-center .now-playing-text{
        text-align:center;
        margin-bottom:10px;
    }
    
    .controls-center .status-text{
        font-size:13px !important;
        font-weight:600;
        color:rgba(255,255,255,0.9);
    }
    
    /* Audio Visualizer - Full Width Beautiful Wave */
    .controls-center .audio-visualizer{
        width:100%;
        height:50px !important;
        border-radius:12px !important;
        background:linear-gradient(180deg, rgba(0,0,0,0.3), rgba(0,0,0,0.15)) !important;
        border:1px solid rgba(255,255,255,0.05);
    }
    
    /* Button Sizes - Compact */
    .play-btn{
        width:50px !important;
        height:50px !important;
        font-size:18px !important;
    }
    
    .stop-btn{
        width:40px !important;
        height:40px !important;
        font-size:14px !important;
    }
    
    /* Like Button - Styled */
    .like-btn{
        width:38px !important;
        height:38px !important;
        font-size:16px !important;
        background:rgba(220,20,60,0.1) !important;
        border-radius:10px !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
    }
    
    .like-btn.liked{
        background:rgba(220,20,60,0.25) !important;
    }
    
    /* Volume Controls - Compact */
    .volume-btn{
        width:32px !important;
        height:32px !important;
        font-size:14px !important;
    }
    
    .volume-wrap{
        width:55px !important;
    }
    
    .volume-slider{
        height:4px !important;
    }
    
    .volume-slider::-webkit-slider-thumb{
        width:14px !important;
        height:14px !important;
    }
}

/* =====================================================
   SMALL MOBILE - 480px and below
   ===================================================== */
@media (max-width: 480px) {
    
    .player-controls-bar{
        padding:14px !important;
        gap:10px !important;
    }
    
    .play-btn{
        width:46px !important;
        height:46px !important;
        font-size:16px !important;
    }
    
    .stop-btn{
        width:36px !important;
        height:36px !important;
        font-size:12px !important;
    }
    
    .mobile-eq-indicator{
        width:36px !important;
        height:36px !important;
        border-radius:10px !important;
    }
    
    .mobile-eq-indicator .eq-bars-mobile{
        gap:2px;
        height:16px;
    }
    
    .mobile-eq-indicator .eq-bars-mobile span{
        width:2.5px !important;
    }
    
    .like-btn{
        width:34px !important;
        height:34px !important;
        font-size:14px !important;
        border-radius:8px !important;
    }
    
    .volume-btn{
        width:28px !important;
        height:28px !important;
        font-size:12px !important;
    }
    
    .volume-wrap{
        width:45px !important;
    }
    
    .controls-center .audio-visualizer{
        height:55px !important;
    }
    
    .controls-center .status-text{
        font-size:12px !important;
    }
}

/* =====================================================
   EMBED SECTION
   ===================================================== */
.embed-section{padding:25px 30px;border-bottom:1px solid var(--border-light)}
.embed-section h3{font-size:16px;font-weight:700;color:var(--text-primary);margin-bottom:8px;display:flex;align-items:center;gap:8px}
.embed-section h3 i{color:var(--accent-red)}
.embed-desc{font-size:13px;color:var(--text-muted);margin-bottom:15px}
.embed-code-wrap{display:flex;align-items:stretch;gap:0;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border-light);margin-bottom:20px}
.embed-code{flex:1;padding:14px 16px;background:var(--bg-secondary);font-size:12px;color:var(--text-secondary);font-family:'Courier New',monospace;word-break:break-all;line-height:1.5;overflow-x:auto;white-space:pre-wrap}
.embed-copy-btn{padding:14px 20px;background:var(--accent-red);color:#fff;font-weight:600;font-size:13px;display:flex;align-items:center;gap:6px;white-space:nowrap;transition:var(--transition);border:none;cursor:pointer}
.embed-copy-btn:hover{background:var(--accent-dark-red)}
.embed-copy-btn.copied{background:#27ae60}
.embed-preview h4{font-size:13px;color:var(--text-muted);margin-bottom:10px;text-transform:uppercase;letter-spacing:.5px}
.embed-player-preview{border:1px solid var(--border-light);border-radius:var(--radius);overflow:hidden}
.embed-mini{display:flex;align-items:center;gap:14px;padding:14px 18px;background:var(--player-controls-bg, linear-gradient(135deg,#1a1a2e,#16213e))}
.embed-mini-img{width:50px;height:50px;border-radius:var(--radius-sm);object-fit:cover;border:2px solid rgba(255,255,255,.1)}
.embed-mini-info{flex:1}
.embed-mini-info strong{display:block;color:#fff;font-size:14px}
.embed-mini-info span{font-size:11px;color:rgba(255,255,255,.5)}
.embed-mini-play{width:40px;height:40px;border-radius:50%;background:var(--accent-red);color:#fff;font-size:16px;display:flex;align-items:center;justify-content:center;transition:var(--transition);border:none;cursor:pointer}
.embed-mini-play:hover{transform:scale(1.1)}

/* =====================================================
   DESCRIPTION SECTION
   ===================================================== */
.radio-description-section{padding:25px 30px;border-bottom:1px solid var(--border-light)}
.radio-description-section h3{font-size:16px;font-weight:700;color:var(--text-primary);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.radio-description-section h3 i{color:var(--accent-red)}
.radio-description-section p{font-size:14px;color:var(--text-secondary);line-height:1.8}

/* =====================================================
   DETAILS GRID
   ===================================================== */
.radio-details-grid{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--border-light)}
.detail-card{display:flex;align-items:center;gap:12px;padding:20px;border-right:1px solid var(--border-light);transition:var(--transition);text-decoration:none}
.detail-card:last-child{border-right:none}
.detail-card:hover{background:var(--bg-card-hover)}
.detail-icon{width:44px;height:44px;border-radius:var(--radius);background:linear-gradient(135deg,rgba(220,20,60,.08),rgba(255,20,147,.08));display:flex;align-items:center;justify-content:center;color:var(--accent-red);font-size:18px;flex-shrink:0}
.detail-info{display:flex;flex-direction:column}
.detail-info strong{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px}
.detail-info span{font-size:14px;font-weight:600;color:var(--text-primary)}

/* =====================================================
   RADIO LINKS SECTION
   ===================================================== */
.radio-links-section{padding:25px 30px;border-bottom:1px solid var(--border-light)}
.radio-links-section h3{font-size:16px;font-weight:700;color:var(--text-primary);margin-bottom:15px;display:flex;align-items:center;gap:8px}
.radio-links-section h3 i{color:var(--accent-red)}
.radio-links{display:flex;flex-wrap:wrap;gap:10px}
.radio-link-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:50px;font-size:13px;font-weight:600;color:#fff;transition:var(--transition);text-decoration:none}
.radio-link-btn:hover{transform:translateY(-2px);box-shadow:0 4px 15px rgba(0,0,0,.2)}
.radio-link-btn.website{background:linear-gradient(135deg,#2c3e50,#34495e)}
.radio-link-btn.facebook{background:#1877f2}
.radio-link-btn.instagram{background:linear-gradient(135deg,#f09433,#dc2743,#bc1888)}
.radio-link-btn.twitter{background:#1da1f2}
.radio-link-btn.youtube{background:#ff0000}
.radio-link-btn.whatsapp{background:#25d366}

/* =====================================================
   SHARE & REPORT SECTION
   ===================================================== */
.share-report-section{display:flex;align-items:flex-start;justify-content:space-between;padding:25px 30px;gap:20px;flex-wrap:wrap}
.share-section h3{font-size:16px;font-weight:700;color:var(--text-primary);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.share-section h3 i{color:var(--accent-red)}
.share-icons{display:flex;gap:10px;flex-wrap:wrap}
.share-icon{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px;transition:var(--transition);text-decoration:none}
.share-icon:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 6px 20px rgba(0,0,0,.2)}
.share-icon.facebook{background:#3b5998}
.share-icon.twitter{background:#1da1f2}
.share-icon.whatsapp{background:#25d366}
.share-icon.telegram{background:#0088cc}
.share-icon.email{background:var(--accent-red)}
.share-icon.copy{background:#6c757d}
.report-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border:2px solid var(--accent-red);border-radius:50px;color:var(--accent-red);font-weight:600;font-size:14px;transition:var(--transition);margin-top:30px;text-decoration:none;background:transparent;cursor:pointer}
.report-btn:hover{background:var(--accent-red);color:#fff;transform:translateY(-2px)}