/* 
   Ouviradios Designer - Radio Player Styles
   Versão: 11.0 (REBASE PRODUCTION - BLUE THEME)
*/

:root {
    --primary-color: #0057A4; /* Admin Blue */
    --primary-darker: #00417C;
    --secondary-color: #2ecc71; /* Verde para botões de ação secundários */
    --light-color: #ffffff; /* White */
    --dark-color: #2c3e50; /* Admin Dark Text */
    --gray-light: #f4f6f9; /* Admin Content Background */
    --gray-medium: #e9ecef; /* Admin Borders */
    --gray-dark: #7f8c8d;   /* Admin Secondary Text */
    --danger-color: #e74c3c;
    --warning-color: #f39c12;
    --text-on-primary: #ffffff;
    --border-radius: 6px;
    --box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* Sombra mais suave */
    --font-family-main: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --content-max-width: 1100px; 
}

/* Page Layout */
main.main-content { 
    flex-grow: 1; 
    padding: 30px 20px 60px 20px; 
    width: 100%; 
    box-sizing: border-box; 
    background-color: var(--gray-light);
}

.page-container {
    max-width: var(--content-max-width);
    margin-left: auto;
    margin-right: auto;
    padding: 0 15px;
}

/* Radio Header */
.radio-header { 
    display: flex; 
    align-items: center; 
    flex-wrap: wrap; 
    margin-bottom: 25px; 
    border-bottom: 1px solid var(--gray-medium); 
    padding-bottom: 20px; 
    gap: 20px; 
    background-color: var(--light-color);
    padding: 20px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

.radio-logo img { 
    width: 90px; 
    height: 90px; 
    object-fit: contain; 
    flex-shrink: 0; 
    background-color: #fff; 
    border-radius: var(--border-radius); 
    padding: 5px; 
    border: 1px solid var(--gray-medium); 
}

.radio-title-slogan { flex-grow: 1; }
.radio-title-slogan h1 { margin: 0 0 5px 0; font-size: 1.8em; color: var(--dark-color); font-weight: 700; }
.radio-title-slogan .slogan { font-size: 1em; color: var(--gray-dark); margin: 0; line-height: 1.4; }

.report-header-container { margin-left: auto; text-align: right; display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.header-action-button, .report-button {
    background-color: var(--light-color); 
    border: 1px solid var(--gray-medium); 
    color: var(--dark-color); 
    padding: 8px 15px; 
    border-radius: var(--border-radius); 
    cursor: pointer; 
    transition: all 0.2s ease; 
    font-size: 0.9em;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.header-action-button:hover, .report-button:hover { 
    background-color: var(--gray-medium); 
    border-color: var(--gray-dark);
}

.favorite-button.favorited { background-color: var(--danger-color); border-color: var(--danger-color); color: var(--light-color); }
.report-button { background-color: var(--warning-color); color: var(--dark-color); border-color: var(--warning-color); }
.report-button:hover { background-color: #e68a00; }

/* Player Container */
section.audio-player-main { 
    margin: 25px 0; 
    padding: 20px; 
    background-color: var(--light-color); 
    border-radius: var(--border-radius); 
    box-shadow: var(--box-shadow); 
}

/* Plyr Adjustments */
.plyr--audio { background: transparent; box-shadow: none; }
.plyr--audio .plyr__controls { background: transparent; padding: 10px 0; }
.plyr--audio .plyr__control[data-plyr='play'] { background-color: var(--primary-color); color: var(--text-on-primary); box-shadow: 0 2px 5px rgba(0,0,0,0.15); }
.plyr--audio .plyr__control[data-plyr='play']:hover { background-color: var(--primary-darker); }
.plyr--audio .plyr__control[data-plyr='mute'] { color: var(--gray-dark); }
.plyr--audio .plyr__control[data-plyr='mute']:hover { color: var(--dark-color); background: var(--gray-medium); }
.plyr--audio input[type='range'] { color: var(--primary-color); }

.plyr__radio_info { 
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--dark-color);
    font-weight: 700;
}
.plyr__radio_info img { 
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 4px;
    border: 1px solid var(--gray-medium); 
}

.plyr__controls .plyr-status-container { 
    font-size: 12px;
    color: var(--gray-dark); 
    background-color: var(--gray-medium); 
    padding: 4px 10px;
    border-radius: 4px;
    margin-left: 10px;
}

/* Live Games Section */
.live-games-section { 
    margin-top: 30px; 
    padding: 25px; 
    background-color: var(--light-color); 
    border-radius: var(--border-radius); 
    box-shadow: var(--box-shadow);
}
.live-games-section h3 { 
    color: var(--primary-color); 
    border-bottom: 1px solid var(--gray-medium); 
    padding-bottom: 10px; 
    font-size: 1.4em;
}
.live-game-item { 
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px; 
    background-color: var(--gray-light); 
    border-radius: var(--border-radius); 
    color: var(--dark-color); 
    border-left: 4px solid var(--primary-color); 
    margin-bottom: 10px;
    text-decoration: none;
    transition: all 0.2s;
}
.live-game-item:hover { 
    background-color: var(--gray-medium); 
    transform: translateX(2px); 
}

/* Sections */
.like-section, .share-section, section.comments-section, #channel-info-details { 
    margin: 25px 0; 
    padding: 25px; 
    background-color: var(--light-color); 
    border-radius: var(--border-radius); 
    box-shadow: var(--box-shadow);
}

.section-title, h2, h3 { 
    color: var(--primary-color); 
    margin-bottom: 20px;
}

/* Related Radios */
.related-radios-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); 
    gap: 20px; 
}
.related-radio-item {
    display: flex; flex-direction: column; align-items: center; text-align: center; 
    text-decoration: none; color: var(--dark-color); background-color: var(--light-color); 
    padding: 15px; border-radius: var(--border-radius); 
    /* transition:transform 0.2s ease, box-shadow 0.2s ease; */ transition: transform 0.2s, opacity 0.2s; 
    border: 1px solid var(--gray-medium);
}
.related-radio-item:hover { transform: translateY(-3px); box-shadow: var(--box-shadow); }
.related-radio-item img { 
    width: 80px; height: 80px; object-fit: contain; margin-bottom: 10px; 
    border-radius: 4px; border: 1px solid var(--gray-medium); padding: 3px; background-color: #fff;
}

/* Metadata */
.metadata-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
    gap: 20px; 
    margin-top: 25px; 
}
.metadata-item { 
    display: flex; align-items: flex-start; gap: 12px; 
    color: var(--gray-dark); padding: 15px; 
    background-color: var(--gray-light); 
    border-radius: var(--border-radius); 
    border-left: 4px solid var(--primary-color); 
}
.metadata-item i { color: var(--primary-color); font-size: 1.1em; }
.metadata-item .label { font-weight: 600; color: var(--dark-color); margin-right: 8px; }

.genre-tag, .location-tag { 
    display: inline-block;
    background-color: var(--gray-medium); 
    color: var(--dark-color); 
    padding: 4px 10px; 
    border-radius: var(--border-radius); 
    font-size: 0.9em; 
    margin-right: 5px;
    margin-bottom: 5px;
}

/* Comments */
.comment-item {
    background-color: var(--gray-light);
    border: 1px solid var(--gray-medium);
    border-radius: var(--border-radius);
    padding: 15px;
    margin-bottom: 15px;
}
.comment-meta {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 0.9em;
    color: var(--gray-dark);
}
.comment-meta .user-name { font-weight: 600; color: var(--dark-color); }

/* Responsive */
@media (max-width: 768px) { 
    .radio-header { flex-direction: column; align-items: flex-start; } 
    .report-header-container { margin-left: 0; margin-top: 15px; width: 100%; justify-content: space-around; } 
    .related-radios-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}
.player-controls > .btn-control { flex: 0 0 56px !important; }
.player-info { min-width: 0 !important; overflow: hidden !important; }
.now-playing,
.now-playing-meta-box { min-width: 0 !important; max-width: 100% !important; overflow: hidden !important; }
.now-playing-meta-img { min-width: 55px !important; flex: 0 0 55px !important; }
.now-playing-meta-text { min-width: 0 !important; flex: 1 1 auto !important; max-width: 100% !important; overflow: hidden !important; }
.now-playing-meta-artist,
.now-playing-meta-track,
.now-playing-prog-name-container,
.now-playing-prog-host { display: block !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 100% !important; }