.isc-radio-player {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
width: 95%;
max-width: 500px;
background: linear-gradient(135deg, #c31432 0%, #240b36 100%);
color: #fff;
border-radius: 20px;
box-shadow: 0 10px 40px rgba(195, 20, 50, 0.4);
z-index: 9999;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
overflow: hidden;
}
.isc-radio-visualizer {
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 50px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0;
background: rgba(0,0,0,0.2);
padding: 0;
overflow: hidden;
}
.isc-wave {
flex: 1;
min-height: 4px;
background: rgba(255,255,255,0.7);
border-radius: 0;
animation: wave-idle 1.5s ease-in-out infinite;
}
.isc-wave:nth-child(1) { 
animation-delay: 0s; 
height: 8px; 
}
.isc-wave:nth-child(2) { 
animation-delay: 0.02s; 
height: 15px; 
}
.isc-wave:nth-child(3) { 
animation-delay: 0.04s; 
height: 12px; 
}
.isc-wave:nth-child(4) { 
animation-delay: 0.06s; 
height: 20px; 
}
.isc-wave:nth-child(5) { 
animation-delay: 0.08s; 
height: 18px; 
}
.isc-wave:nth-child(6) { 
animation-delay: 0.1s; 
height: 25px; 
}
.isc-wave:nth-child(7) { 
animation-delay: 0.12s; 
height: 16px; 
}
.isc-wave:nth-child(8) { 
animation-delay: 0.14s; 
height: 22px; 
}
.isc-wave:nth-child(9) { 
animation-delay: 0.16s; 
height: 14px; 
}
.isc-wave:nth-child(10) { 
animation-delay: 0.18s; 
height: 28px; 
}
.isc-wave:nth-child(11) { 
animation-delay: 0.2s; 
height: 19px; 
}
.isc-wave:nth-child(12) { 
animation-delay: 0.22s; 
height: 24px; 
}
.isc-wave:nth-child(13) { 
animation-delay: 0.24s; 
height: 11px; 
}
.isc-wave:nth-child(14) { 
animation-delay: 0.26s; 
height: 30px; 
}
.isc-wave:nth-child(15) { 
animation-delay: 0.28s; 
height: 17px; 
}
.isc-wave:nth-child(16) { 
animation-delay: 0.3s; 
height: 21px; 
}
.isc-wave:nth-child(17) { 
animation-delay: 0.32s; 
height: 13px; 
}
.isc-wave:nth-child(18) { 
animation-delay: 0.34s; 
height: 26px; 
}
.isc-wave:nth-child(19) { 
animation-delay: 0.36s; 
height: 15px; 
}
.isc-wave:nth-child(20) { 
animation-delay: 0.38s; 
height: 32px; 
}
.isc-wave:nth-child(21) { 
animation-delay: 0.4s; 
height: 23px; 
}
.isc-wave:nth-child(22) { 
animation-delay: 0.42s; 
height: 16px; 
}
.isc-wave:nth-child(23) { 
animation-delay: 0.44s; 
height: 28px; 
}
.isc-wave:nth-child(24) { 
animation-delay: 0.46s; 
height: 14px; 
}
.isc-wave:nth-child(25) { 
animation-delay: 0.48s; 
height: 21px; 
}
.isc-wave:nth-child(26) { 
animation-delay: 0.5s; 
height: 19px; 
}
.isc-wave:nth-child(27) { 
animation-delay: 0.52s; 
height: 27px; 
}
.isc-wave:nth-child(28) { 
animation-delay: 0.54s; 
height: 12px; 
}
.isc-wave:nth-child(29) { 
animation-delay: 0.56s; 
height: 31px; 
}
.isc-wave:nth-child(30) { 
animation-delay: 0.58s; 
height: 17px; 
}
.isc-wave:nth-child(31) { 
animation-delay: 0.6s; 
height: 8px; 
}
.isc-wave:nth-child(32) { 
animation-delay: 0.62s; 
height: 15px; 
}
.isc-wave:nth-child(33) { 
animation-delay: 0.64s; 
height: 12px; 
}
.isc-wave:nth-child(34) { 
animation-delay: 0.66s; 
height: 20px; 
}
.isc-wave:nth-child(35) { 
animation-delay: 0.68s; 
height: 18px; 
}
.isc-wave:nth-child(36) { 
animation-delay: 0.7s; 
height: 25px; 
}
.isc-wave:nth-child(37) { 
animation-delay: 0.72s; 
height: 16px; 
}
.isc-wave:nth-child(38) { 
animation-delay: 0.74s; 
height: 22px; 
}
.isc-wave:nth-child(39) { 
animation-delay: 0.76s; 
height: 14px; 
}
.isc-wave:nth-child(40) { 
animation-delay: 0.78s; 
height: 28px; 
}
.isc-wave:nth-child(41) { 
animation-delay: 0.8s; 
height: 19px; 
}
.isc-wave:nth-child(42) { 
animation-delay: 0.82s; 
height: 24px; 
}
.isc-wave:nth-child(43) { 
animation-delay: 0.84s; 
height: 11px; 
}
.isc-wave:nth-child(44) { 
animation-delay: 0.86s; 
height: 30px; 
}
.isc-wave:nth-child(45) { 
animation-delay: 0.88s; 
height: 17px; 
}
.isc-wave:nth-child(46) { 
animation-delay: 0.9s; 
height: 21px; 
}
.isc-wave:nth-child(47) { 
animation-delay: 0.92s; 
height: 13px; 
}
.isc-wave:nth-child(48) { 
animation-delay: 0.94s; 
height: 26px; 
}
.isc-wave:nth-child(49) { 
animation-delay: 0.96s; 
height: 15px; 
}
.isc-wave:nth-child(50) { 
animation-delay: 0.98s; 
height: 32px; 
}
.isc-wave:nth-child(51) { 
animation-delay: 1s; 
height: 23px; 
}
.isc-wave:nth-child(52) { 
animation-delay: 1.02s; 
height: 16px; 
}
.isc-wave:nth-child(53) { 
animation-delay: 1.04s; 
height: 28px; 
}
.isc-wave:nth-child(54) { 
animation-delay: 1.06s; 
height: 14px; 
}
.isc-wave:nth-child(55) { 
animation-delay: 1.08s; 
height: 21px; 
}
.isc-wave:nth-child(56) { 
animation-delay: 1.1s; 
height: 19px; 
}
.isc-wave:nth-child(57) { 
animation-delay: 1.12s; 
height: 27px; 
}
.isc-wave:nth-child(58) { 
animation-delay: 1.14s; 
height: 12px; 
}
.isc-wave:nth-child(59) { 
animation-delay: 1.16s; 
height: 31px; 
}
.isc-wave:nth-child(60) { 
animation-delay: 1.18s; 
height: 17px; 
}
.isc-wave:nth-child(61) { 
animation-delay: 1.2s; 
height: 8px; 
}
.isc-wave:nth-child(62) { 
animation-delay: 1.22s; 
height: 15px; 
}
.isc-wave:nth-child(63) { 
animation-delay: 1.24s; 
height: 12px; 
}
.isc-wave:nth-child(64) { 
animation-delay: 1.26s; 
height: 20px; 
}
.isc-wave:nth-child(65) { 
animation-delay: 1.28s; 
height: 18px; 
}
.isc-wave:nth-child(66) { 
animation-delay: 1.3s; 
height: 25px; 
}
.isc-wave:nth-child(67) { 
animation-delay: 1.32s; 
height: 16px; 
}
.isc-wave:nth-child(68) { 
animation-delay: 1.34s; 
height: 22px; 
}
.isc-wave:nth-child(69) { 
animation-delay: 1.36s; 
height: 14px; 
}
.isc-wave:nth-child(70) { 
animation-delay: 1.38s; 
height: 28px; 
}
.isc-wave:nth-child(71) { 
animation-delay: 1.4s; 
height: 19px; 
}
.isc-wave:nth-child(72) { 
animation-delay: 1.42s; 
height: 24px; 
}
.isc-wave:nth-child(73) { 
animation-delay: 1.44s; 
height: 11px; 
}
.isc-wave:nth-child(74) { 
animation-delay: 1.46s; 
height: 30px; 
}
.isc-wave:nth-child(75) { 
animation-delay: 1.48s; 
height: 17px; 
}
.isc-wave:nth-child(76) { 
animation-delay: 1.5s; 
height: 21px; 
}
.isc-wave:nth-child(77) { 
animation-delay: 1.52s; 
height: 13px; 
}
.isc-wave:nth-child(78) { 
animation-delay: 1.54s; 
height: 26px; 
}
.isc-wave:nth-child(79) { 
animation-delay: 1.56s; 
height: 15px; 
}
.isc-wave:nth-child(80) { 
animation-delay: 1.58s; 
height: 32px; 
}
.isc-wave:nth-child(81) { 
animation-delay: 1.6s; 
height: 23px; 
}
.isc-wave:nth-child(82) { 
animation-delay: 1.62s; 
height: 16px; 
}
.isc-wave:nth-child(83) { 
animation-delay: 1.64s; 
height: 28px; 
}
.isc-wave:nth-child(84) { 
animation-delay: 1.66s; 
height: 14px; 
}
.isc-wave:nth-child(85) { 
animation-delay: 1.68s; 
height: 21px; 
}
.isc-wave:nth-child(86) { 
animation-delay: 1.7s; 
height: 19px; 
}
.isc-wave:nth-child(87) { 
animation-delay: 1.72s; 
height: 27px; 
}
.isc-wave:nth-child(88) { 
animation-delay: 1.74s; 
height: 12px; 
}
.isc-wave:nth-child(89) { 
animation-delay: 1.76s; 
height: 31px; 
}
.isc-wave:nth-child(90) { 
animation-delay: 1.78s; 
height: 17px; 
}
.isc-wave:nth-child(91) { 
animation-delay: 1.8s; 
height: 8px; 
}
.isc-wave:nth-child(92) { 
animation-delay: 1.82s; 
height: 15px; 
}
.isc-wave:nth-child(93) { 
animation-delay: 1.84s; 
height: 12px; 
}
.isc-wave:nth-child(94) { 
animation-delay: 1.86s; 
height: 20px; 
}
.isc-wave:nth-child(95) { 
animation-delay: 1.88s; 
height: 18px; 
}
.isc-wave:nth-child(96) { 
animation-delay: 1.9s; 
height: 25px; 
}
.isc-wave:nth-child(97) { 
animation-delay: 1.92s; 
height: 16px; 
}
.isc-wave:nth-child(98) { 
animation-delay: 1.94s; 
height: 22px; 
}
.isc-wave:nth-child(99) { 
animation-delay: 1.96s; 
height: 14px; 
}
.isc-wave:nth-child(100) { 
animation-delay: 1.98s; 
height: 28px; 
}
.isc-wave:nth-child(101) { 
animation-delay: 2s; 
height: 19px; 
}
.isc-wave:nth-child(102) { 
animation-delay: 2.02s; 
height: 24px; 
}
.isc-wave:nth-child(103) { 
animation-delay: 2.04s; 
height: 11px; 
}
.isc-wave:nth-child(104) { 
animation-delay: 2.06s; 
height: 30px; 
}
.isc-wave:nth-child(105) { 
animation-delay: 2.08s; 
height: 17px; 
}
.isc-wave:nth-child(106) { 
animation-delay: 2.1s; 
height: 21px; 
}
.isc-wave:nth-child(107) { 
animation-delay: 2.12s; 
height: 13px; 
}
.isc-wave:nth-child(108) { 
animation-delay: 2.14s; 
height: 26px; 
}
.isc-wave:nth-child(109) { 
animation-delay: 2.16s; 
height: 15px; 
}
.isc-wave:nth-child(110) { 
animation-delay: 2.18s; 
height: 32px; 
}
.isc-wave:nth-child(111) { 
animation-delay: 2.2s; 
height: 23px; 
}
.isc-wave:nth-child(112) { 
animation-delay: 2.22s; 
height: 16px; 
}
.isc-wave:nth-child(113) { 
animation-delay: 2.24s; 
height: 28px; 
}
.isc-wave:nth-child(114) { 
animation-delay: 2.26s; 
height: 14px; 
}
.isc-wave:nth-child(115) { 
animation-delay: 2.28s; 
height: 21px; 
}
.isc-wave:nth-child(116) { 
animation-delay: 2.3s; 
height: 19px; 
}
.isc-wave:nth-child(117) { 
animation-delay: 2.32s; 
height: 27px; 
}
.isc-wave:nth-child(118) { 
animation-delay: 2.34s; 
height: 12px; 
}
.isc-wave:nth-child(119) { 
animation-delay: 2.36s; 
height: 31px; 
}
.isc-wave:nth-child(120) { 
animation-delay: 2.38s; 
height: 17px; 
}
.isc-wave:nth-child(121) { 
animation-delay: 2.4s; 
height: 8px; 
}
.isc-wave:nth-child(122) { 
animation-delay: 2.42s; 
height: 15px; 
}
.isc-wave:nth-child(123) { 
animation-delay: 2.44s; 
height: 12px; 
}
.isc-wave:nth-child(124) { 
animation-delay: 2.46s; 
height: 20px; 
}
.isc-wave:nth-child(125) { 
animation-delay: 2.48s; 
height: 18px; 
}
.isc-wave:nth-child(126) { 
animation-delay: 2.5s; 
height: 25px; 
}
.isc-wave:nth-child(127) { 
animation-delay: 2.52s; 
height: 16px; 
}
.isc-wave:nth-child(128) { 
animation-delay: 2.54s; 
height: 22px; 
}
.isc-wave:nth-child(129) { 
animation-delay: 2.56s; 
height: 14px; 
}
.isc-wave:nth-child(130) { 
animation-delay: 2.58s; 
height: 28px; 
}
.isc-wave:nth-child(131) { 
animation-delay: 2.6s; 
height: 19px; 
}
.isc-wave:nth-child(132) { 
animation-delay: 2.62s; 
height: 24px; 
}
.isc-wave:nth-child(133) { 
animation-delay: 2.64s; 
height: 11px; 
}
.isc-wave:nth-child(134) { 
animation-delay: 2.66s; 
height: 30px; 
}
.isc-wave:nth-child(135) { 
animation-delay: 2.68s; 
height: 17px; 
}
.isc-wave:nth-child(136) { 
animation-delay: 2.7s; 
height: 21px; 
}
.isc-wave:nth-child(137) { 
animation-delay: 2.72s; 
height: 13px; 
}
.isc-wave:nth-child(138) { 
animation-delay: 2.74s; 
height: 26px; 
}
.isc-wave:nth-child(139) { 
animation-delay: 2.76s; 
height: 15px; 
}
.isc-wave:nth-child(140) { 
animation-delay: 2.78s; 
height: 32px; 
}
.isc-wave:nth-child(141) { 
animation-delay: 2.8s; 
height: 23px; 
}
.isc-wave:nth-child(142) { 
animation-delay: 2.82s; 
height: 16px; 
}
.isc-wave:nth-child(143) { 
animation-delay: 2.84s; 
height: 28px; 
}
.isc-wave:nth-child(144) { 
animation-delay: 2.86s; 
height: 14px; 
}
.isc-wave:nth-child(145) { 
animation-delay: 2.88s; 
height: 21px; 
}
.isc-wave:nth-child(146) { 
animation-delay: 2.9s; 
height: 19px; 
}
.isc-wave:nth-child(147) { 
animation-delay: 2.92s; 
height: 27px; 
}
.isc-wave:nth-child(148) { 
animation-delay: 2.94s; 
height: 12px; 
}
.isc-wave:nth-child(149) { 
animation-delay: 2.96s; 
height: 31px; 
}
.isc-wave:nth-child(150) { 
animation-delay: 2.98s; 
height: 17px; 
}
.isc-wave:nth-child(151) { 
animation-delay: 3s; 
height: 8px; 
}
.isc-wave:nth-child(152) { 
animation-delay: 3.02s; 
height: 15px; 
}
.isc-wave:nth-child(153) { 
animation-delay: 3.04s; 
height: 12px; 
}
.isc-wave:nth-child(154) { 
animation-delay: 3.06s; 
height: 20px; 
}
.isc-wave:nth-child(155) { 
animation-delay: 3.08s; 
height: 18px; 
}
.isc-wave:nth-child(156) { 
animation-delay: 3.1s; 
height: 25px; 
}
.isc-wave:nth-child(157) { 
animation-delay: 3.12s; 
height: 16px; 
}
.isc-wave:nth-child(158) { 
animation-delay: 3.14s; 
height: 22px; 
}
.isc-wave:nth-child(159) { 
animation-delay: 3.16s; 
height: 14px; 
}
.isc-wave:nth-child(160) { 
animation-delay: 3.18s; 
height: 28px; 
}
.isc-wave:nth-child(161) { 
animation-delay: 3.2s; 
height: 19px; 
}
.isc-wave:nth-child(162) { 
animation-delay: 3.22s; 
height: 24px; 
}
.isc-wave:nth-child(163) { 
animation-delay: 3.24s; 
height: 11px; 
}
.isc-wave:nth-child(164) { 
animation-delay: 3.26s; 
height: 30px; 
}
.isc-wave:nth-child(165) { 
animation-delay: 3.28s; 
height: 17px; 
}
.isc-wave:nth-child(166) { 
animation-delay: 3.3s; 
height: 21px; 
}
.isc-wave:nth-child(167) { 
animation-delay: 3.32s; 
height: 13px; 
}
.isc-wave:nth-child(168) { 
animation-delay: 3.34s; 
height: 26px; 
}
.isc-wave:nth-child(169) { 
animation-delay: 3.36s; 
height: 15px; 
}
.isc-wave:nth-child(170) { 
animation-delay: 3.38s; 
height: 32px; 
}
.isc-wave:nth-child(171) { 
animation-delay: 3.4s; 
height: 23px; 
}
.isc-wave:nth-child(172) { 
animation-delay: 3.42s; 
height: 16px; 
}
.isc-wave:nth-child(173) { 
animation-delay: 3.44s; 
height: 28px; 
}
.isc-wave:nth-child(174) { 
animation-delay: 3.46s; 
height: 14px; 
}
.isc-wave:nth-child(175) { 
animation-delay: 3.48s; 
height: 21px; 
}
.isc-wave:nth-child(176) { 
animation-delay: 3.5s; 
height: 19px; 
}
.isc-wave:nth-child(177) { 
animation-delay: 3.52s; 
height: 27px; 
}
.isc-wave:nth-child(178) { 
animation-delay: 3.54s; 
height: 12px; 
}
.isc-wave:nth-child(179) { 
animation-delay: 3.56s; 
height: 31px; 
}
.isc-wave:nth-child(180) { 
animation-delay: 3.58s; 
height: 17px; 
}
.isc-wave:nth-child(181) { 
animation-delay: 3.6s; 
height: 8px; 
}
.isc-wave:nth-child(182) { 
animation-delay: 3.62s; 
height: 15px; 
}
.isc-wave:nth-child(183) { 
animation-delay: 3.64s; 
height: 12px; 
}
.isc-wave:nth-child(184) { 
animation-delay: 3.66s; 
height: 20px; 
}
.isc-wave:nth-child(185) { 
animation-delay: 3.68s; 
height: 18px; 
}
.isc-wave:nth-child(186) { 
animation-delay: 3.7s; 
height: 25px; 
}
.isc-wave:nth-child(187) { 
animation-delay: 3.72s; 
height: 16px; 
}
.isc-wave:nth-child(188) { 
animation-delay: 3.74s; 
height: 22px; 
}
.isc-wave:nth-child(189) { 
animation-delay: 3.76s; 
height: 14px; 
}
.isc-wave:nth-child(190) { 
animation-delay: 3.78s; 
height: 28px; 
}
.isc-wave:nth-child(191) { 
animation-delay: 3.8s; 
height: 19px; 
}
.isc-wave:nth-child(192) { 
animation-delay: 3.82s; 
height: 24px; 
}
.isc-wave:nth-child(193) { 
animation-delay: 3.84s; 
height: 11px; 
}
.isc-wave:nth-child(194) { 
animation-delay: 3.86s; 
height: 30px; 
}
.isc-wave:nth-child(195) { 
animation-delay: 3.88s; 
height: 17px; 
}
.isc-wave:nth-child(196) { 
animation-delay: 3.9s; 
height: 21px; 
}
.isc-wave:nth-child(197) { 
animation-delay: 3.92s; 
height: 13px; 
}
.isc-wave:nth-child(198) { 
animation-delay: 3.94s; 
height: 26px; 
}
.isc-wave:nth-child(199) { 
animation-delay: 3.96s; 
height: 15px; 
}
.isc-wave:nth-child(200) { 
animation-delay: 3.98s; 
height: 32px; 
}
@keyframes wave-idle {
0%, 100% { transform: scaleY(0.3); opacity: 0.4; }
50% { transform: scaleY(0.5); opacity: 0.6; }
}
@keyframes wave-active {
0% { transform: scaleY(0.5); }
25% { transform: scaleY(1.2); }
50% { transform: scaleY(0.8); }
75% { transform: scaleY(1.4); }
100% { transform: scaleY(0.5); }
}
.isc-radio-player.playing .isc-wave {
animation: wave-active 0.8s ease-in-out infinite;
background: rgba(255,255,255,0.9);
opacity: 1;
}
.isc-radio-player.playing .isc-wave:nth-child(odd) {
animation-duration: 0.6s;
}
.isc-radio-player.playing .isc-wave:nth-child(even) {
animation-duration: 0.9s;
}
.isc-radio-player.playing .isc-wave:nth-child(3n) {
animation-duration: 0.7s;
}
.isc-radio-content {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
margin-top: 50px;
}
.isc-radio-left {
display: flex;
align-items: center;
gap: 12px;
flex: 1;
}
.isc-radio-icon {
width: 44px;
height: 44px;
background: rgba(255,255,255,0.2);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
.isc-radio-player.playing .isc-radio-icon {
animation: pulse 2s ease-in-out infinite;
}
.isc-radio-info {
display: flex;
flex-direction: column;
gap: 4px;
}
.isc-radio-title {
font-weight: 600;
font-size: 15px;
letter-spacing: 0.3px;
}
.isc-radio-status {
font-size: 11px;
color: #ffcccb;
font-weight: 600;
letter-spacing: 1px;
animation: blink 2s ease-in-out infinite;
}
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.isc-radio-center {
margin: 0 16px;
}
.isc-radio-btn {
width: 48px;
height: 48px;
background: rgba(255,255,255,0.2);
border: 2px solid rgba(255,255,255,0.3);
border-radius: 50%;
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.isc-radio-btn:hover {
background: rgba(255,255,255,0.3);
transform: scale(1.05);
}
.isc-radio-btn:active {
transform: scale(0.95);
}
.isc-radio-right {
display: flex;
align-items: center;
gap: 12px;
}
.isc-volume-control {
display: flex;
align-items: center;
gap: 8px;
position: relative;
}
#isc-volume-btn {
background: transparent;
border: none;
color: #fff;
cursor: pointer;
padding: 8px;
border-radius: 50%;
transition: background 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
#isc-volume-btn:hover {
background: rgba(255,255,255,0.1);
}
.isc-volume-slider-container {
width: 0;
opacity: 0;
overflow: hidden;
transition: all 0.3s ease;
}
.isc-volume-control:hover .isc-volume-slider-container {
width: 80px;
opacity: 1;
}
.isc-volume-slider {
width: 80px;
height: 4px;
border-radius: 2px;
outline: none;
-webkit-appearance: none;
background: rgba(255,255,255,0.3);
}
.isc-volume-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 12px;
height: 12px;
border-radius: 50%;
background: #fff;
cursor: pointer;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.isc-volume-slider::-moz-range-thumb {
width: 12px;
height: 12px;
border-radius: 50%;
background: #fff;
cursor: pointer;
border: none;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
#isc-radio-close {
background: transparent;
border: none;
color: #fff;
cursor: pointer;
padding: 8px;
border-radius: 50%;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
#isc-radio-close:hover {
background: rgba(255,255,255,0.2);
transform: rotate(90deg);
}
audio {
display: none;
}
.isc-radio-player:not(:has(.isc-radio-visualizer)) .isc-radio-content {
margin-top: 0;
}
.isc-radio-player .isc-radio-content {
margin-top: 50px;
}
.isc-radio-player .isc-radio-content:first-child {
margin-top: 0;
}
@media (max-width: 600px) {
.isc-radio-player {
max-width: calc(100% - 32px);
bottom: 16px;
}
.isc-radio-content {
padding: 10px 12px;
}
.isc-radio-icon {
width: 36px;
height: 36px;
}
.isc-radio-title {
font-size: 13px;
}
.isc-radio-btn {
width: 44px;
height: 44px;
}
.isc-radio-center {
margin: 0 8px;
}
.isc-volume-slider-container {
display: none;
}
}