/* radiostay.面与文字对齐 */

/* 底部固定播放器容器 */
.main_player.player-min, #globalPlayer {
  position: fixed; left: 0; right: 0; bottom: 0; height: 64px; z-index: 999;
  display: flex; align-items: center; padding: 0 14px;
  background: linear-gradient(135deg, #667eea 0%, #6f5ccf 50%, #6c4db2 100%);
}

/* 封面 */
.main_player.player-min .cover, #globalPlayer .cover { width: 50px; height: 50px; border-radius: 6px; overflow: hidden; }
.main_player.player-min .cover img, #globalPlayer .cover img { width: 100%; height: 100%; object-fit: cover; }

/* 元信息 */
.main_player.player-min .station_player, #globalPlayer .meta { display: flex; align-items: center; gap: 12px; color: #fff; }
.main_player.player-min .station_player .name a, #globalPlayer .name a { color: #fff; font-weight: 700; text-decoration: none; }
.main_player.player-min .station_player .track, #globalPlayer .track { color: #d7e1ee; font-size: 12px; }

/* 播放按钮：方形、箭头垂直水平居中 */
.main_player.player-min .button_player, .station_page .button_player, #globalPlayer .btn-play {
  width: 44px; height: 44px; border-radius: 6px; background:#fff; color:#405673; display:flex; align-items:center; justify-content:center;
  box-shadow: 0 2px 6px rgba(0,0,0,.2); border: none; cursor: pointer;
}
.main_player.player-min .button_player i, .station_page .button_player i { display:block; width:0; height:0; border-style:solid; border-width:10px 0 10px 16px; border-color:transparent transparent transparent #405673; }
.main_player.player-min .button_player.playing i { width:14px; height:14px; border:0; box-shadow: inset 0 0 0 3px #405673, inset 7px 0 0 0 #fff, inset -7px 0 0 0 #fff; }

/* 音量：竖向滑块，悬浮出现 */
.main_player .volume_controll { position: relative; margin: 0 10px; }
.main_player .volume_controll .vertical_range { position:absolute; left:50%; transform: translateX(-50%); bottom:52px; display:none; padding:8px; background:#fff; border-radius:8px; box-shadow:0 8px 20px rgba(0,0,0,.2); }
.main_player .volume_controll:hover .vertical_range { display:block; }
.main_player .volume_controll input[type=range] { writing-mode: bt-lr; -webkit-appearance: slider-vertical; width: 6px; height: 120px; }

/* 边框动画（按钮按下时） */
.main_player.player-min .button_player, .station_page .button_player { position: relative; }
.main_player.player-min .button_player::after, .station_page .button_player::after {
  content:''; position:absolute; inset:0; border-radius:6px; border:2px solid rgba(255,255,255,.6); opacity:0; transition:opacity .2s; pointer-events:none;
}
.main_player.player-min .button_player:active::after, .station_page .button_player:active::after { opacity:1; animation: pulseBorder .6s ease-out; }
@keyframes pulseBorder { 0%{transform:scale(1); opacity:1} 100%{transform:scale(1.2); opacity:0} }

/* 播放器样式 - 完全复刻 radiostay.cn 的简洁风格 */
.main_player {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0 20px;
}

.main_player .button_player {
    width: 50px;
    height: 50px;
    background: #fff;
    display: inline-block;
    border-radius: 50%;
    text-align: center;
    cursor: pointer;
}

.main_player .button_player i {
    font-size: 30px;
    line-height: 50px;
    color: #667eea;
}

.main_player .button_player i.icon-play {
    margin: 0 0 0 5px;
}

.main_player .station_player {
    padding: 0 0 0 50px;
    height: 50px;
}

.main_player .station_player .image {
    float: left;
}

.main_player .station_player .other_info {
    padding: 0 0 0 10px;
    float: left;
    margin: -5px 0 0 0;
}

.main_player .station_player .other_info .name {
    color: #fff;
    box-sizing: content-box;
}

.main_player .station_player .other_info .name a {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
}

.main_player .station_player .other_info .track {
    color: #fff;
}

.main_player .volume_controll {
    float: left;
    padding: 20px 0;
}

.main_player .volume_controll .volume {
    margin: 0 0 0 20px;
    width: 50px;
    height: 50px;
    display: inline-block;
    text-align: center;
    font-size: 30px;
    color: #fff;
    cursor: pointer;
}

.main_player .volume_controll .vertical_range {
    position: absolute;
    bottom: 70px;
    background-color: rgba(58, 80, 114, 0.9);
    padding: 20px;
    left: 85px;
    border-radius: 10px;
    display: none;
}

.main_player .volume_controll .vertical_range input {
    width: 20px;
    height: 200px;
    padding: 0 5px;
}

/* Loading动画样式 - 完全复刻 radiostay.cn */
.custom-loader {
    width: 30px;
    height: 30px;
    display: grid;
    border: 4px solid #0000;
    border-radius: 50%;
    border-color: #E4E4ED #0000;
    animation: s6 1s infinite linear;
    margin: 10px 0 0 10px;
}

.custom-loader::before,
.custom-loader::after {    
    content: "";
    grid-area: 1/1;
    margin: 2px;
    border: inherit;
    border-radius: 50%;
}

.custom-loader::before {
    border-color: #766DF4 #0000;
    animation: inherit; 
    animation-duration: .5s;
    animation-direction: reverse;
}

.custom-loader::after {
    margin: 8px;
}

@keyframes s6 { 
    100% { transform: rotate(1turn) }
}

/* 全站Loading遮罩 - 完全复刻 radiostay.cn */
.shadow_block {
    position: fixed;
    width: 100%;
    height: 100%;
    background: #000;
    left: 0;
    top: 0;
    z-index: 13;
    opacity: .5;
    display: flex;
    justify-content: center;
    align-items: center;
}

.shadow_block.noshow {
    display: none;
}

.shadow_block .custom-loader {
    width: 100px;
    height: 100px;
}

/* 播放器显示/隐藏控制 */
.main_player.noshow {
    display: none;
}

.main_player.show {
    display: flex;
}

/* 当有播放器时，调整页面底部边距 */
body.has-player {
    padding-bottom: 70px;
}

footer:not(.no_player) {
    margin-bottom: 70px;
}

/* 评论系统样式 - 完全复刻 radiostay.cn */
.jq-stars {
    display: inline-block;
}

.jq-rating-label {
    font-size: 22px;
    display: inline-block;
    position: relative;
    vertical-align: top;
    font-family: helvetica, arial, verdana;
}

.jq-star {
    width: 100px;
    height: 100px;
    display: inline-block;
    cursor: pointer;
}

.jq-star-svg {
    padding-left: 3px;
    width: 100%;
    height: 100%;
}

.jq-star-svg path {
    stroke-linejoin: round;
}

.station_reviews {
    margin: 20px 0 20px 0;
}

.station_reviews .add_review_block {
    background: #fff;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 0px 10px!important;
    border-radius: 10px;
    padding: 20px;
    margin: 20px 0 20px 0;
}

.station_reviews .one_review {
    background: #fff;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 0px 10px!important;
    border-radius: 10px;
    padding: 20px;
    margin: 20px 0 20px 0;
}

.station_reviews .one_review i.filled {
    color: #FEBE15;
}

.station_reviews .one_review .top_info {
    margin: 0 0 10px 0;
}

.station_reviews .one_review .top_info .date {
    color: #777;
    font-size: 13px;
    margin: 0 0 0 10px;
}

.station_reviews .one_review .top_info .user_name {
    margin: 0 10px 0 0;
}

.station_reviews .reviews_list {
    position: relative;
}

.station_reviews .reviews_list .custom-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -20px;
    margin-left: -20px;
}

/* ===== Global Player final overrides (alignment, popover volume, mobile) ===== */
#globalPlayer{position:fixed;left:0;right:0;bottom:0;height:60px;z-index:999;display:flex;align-items:center;gap:12px;padding:0 14px;background:linear-gradient(135deg,#667eea 0%,#6f5ccf 50%,#6c4db2 100%);} 
#globalPlayer .cover{width:72px;height:40px;border-radius:6px;overflow:hidden;flex:0 0 auto}
#globalPlayer .cover img{width:100%;height:100%;object-fit:cover;display:block}
#globalPlayer .meta{display:flex;flex-direction:column;justify-content:center;min-width:0;flex:1 1 auto}
#globalPlayer .name{font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#globalPlayer .name a{color:inherit;text-decoration:none}
#globalPlayer .js-track{color:#d7e1ee;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#globalPlayer .actions{display:flex;align-items:center;gap:12px;position:relative}
#globalPlayer .btn-play{width:44px;height:44px;border-radius:8px;background:#fff;color:#405673;display:inline-flex;align-items:center;justify-content:center;border:none;box-shadow:0 2px 6px rgba(0,0,0,.2);cursor:pointer}
#globalPlayer .btn-play .icon{display:block;width:0;height:0;border-style:solid;border-width:10px 0 10px 16px;border-color:transparent transparent transparent #405673;margin-left:2px}
#globalPlayer .btn-pause .icon{width:14px;height:14px;border:0;box-shadow:inset 0 0 0 3px #405673,inset 7px 0 0 0 #fff,inset -7px 0 0 0 #fff}
#globalPlayer .vol{position:relative;color:#fff}
#globalPlayer .vol i{font-size:18px;cursor:pointer;display:inline-flex;align-items:center}
#globalPlayer .vol .popover{display:none;position:absolute;right:0;bottom:52px;padding:10px;background:#fff;border:1px solid #E6EAF2;border-radius:8px;box-shadow:0 8px 24px rgba(18,38,63,.1)}
#globalPlayer .vol.open .popover{display:block}
#globalPlayer .vol .slider-wrap{height:120px;width:36px;display:flex;align-items:center;justify-content:center}
#globalPlayer .vol input.js-volume{transform:rotate(-90deg);width:120px;accent-color:#6f5ccf}
@media(max-width:576px){#globalPlayer{height:56px;padding:0 10px;gap:10px}#globalPlayer .cover{width:60px;height:36px}#globalPlayer .js-track{display:none}#globalPlayer .btn-play{width:40px;height:40px}}

/* --- Play Button Loading Animation --- */
.js-station-play-button.loading .fa-play,
.js-station-play-button.loading .fa-pause {
    animation: spin 1s linear infinite;
}

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