/* =========================================================
   PAREACLUB ROOM WEB RADIO 3D V1
   BLUE NEON GLASS
========================================================= */

#pareaRoomRadio3dV1 {
    position: relative;
    width: calc(100% - 12px);
    margin: 8px 6px 10px;
    padding: 11px;
    border-radius: 17px;

    color: #e9fbff;

    background:
        radial-gradient(
            circle at 15% 0%,
            rgba(0,217,255,.20),
            transparent 34%
        ),
        radial-gradient(
            circle at 90% 100%,
            rgba(100,64,255,.20),
            transparent 40%
        ),
        linear-gradient(
            145deg,
            rgba(14,29,49,.97),
            rgba(4,10,20,.98)
        );

    border:
        1px solid rgba(84,220,255,.36);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.16),
        inset 0 -1px 0 rgba(0,0,0,.7),
        0 12px 25px rgba(0,0,0,.42),
        0 0 20px rgba(0,191,255,.12);

    overflow: hidden;
    transform-style: preserve-3d;
}

#pareaRoomRadio3dV1::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    background:
        linear-gradient(
            120deg,
            rgba(255,255,255,.11),
            transparent 27%,
            transparent 75%,
            rgba(77,222,255,.07)
        );
}

.parea-room-radio-top {
    position: relative;
    z-index: 2;

    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 9px;
}

.parea-room-radio-brand {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .7px;

    text-shadow:
        0 0 8px rgba(72,222,255,.7);
}

.parea-room-radio-onair {
    display: flex;
    align-items: center;
    gap: 5px;

    padding: 4px 7px;
    border-radius: 20px;

    font-size: 9px;
    font-weight: 900;
    letter-spacing: .6px;

    color: #8aa0aa;

    background:
        rgba(255,255,255,.055);

    border:
        1px solid rgba(255,255,255,.08);
}

.parea-room-radio-onair.active {
    color: #ff808c;

    box-shadow:
        0 0 14px rgba(255,45,75,.23);

    border-color:
        rgba(255,75,95,.34);
}

.parea-room-radio-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;

    background: #64727a;
}

.parea-room-radio-onair.active
.parea-room-radio-dot {
    background: #ff3850;

    box-shadow:
        0 0 8px #ff3850;
}

.parea-room-radio-screen {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: 42px minmax(0,1fr);
    gap: 9px;
    align-items: center;

    min-height: 54px;

    padding: 8px;

    margin-bottom: 9px;

    border-radius: 12px;

    background:
        linear-gradient(
            180deg,
            rgba(0,229,255,.08),
            rgba(0,0,0,.24)
        );

    border:
        1px solid rgba(96,218,255,.15);

    box-shadow:
        inset 0 0 15px rgba(0,0,0,.3);
}

.parea-room-radio-disc {
    position: relative;

    width: 40px;
    height: 40px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            #07111b 0 13%,
            #33dafa 14% 18%,
            #101c2c 19% 31%,
            #253b52 32% 34%,
            #07111c 35% 51%,
            #21374e 52% 54%,
            #050b13 55%
        );

    border:
        1px solid rgba(109,228,255,.28);

    box-shadow:
        inset 0 0 8px rgba(0,0,0,.8),
        0 0 14px rgba(0,213,255,.15);
}

#pareaRoomRadio3dV1.playing
.parea-room-radio-disc {
    animation:
        pareaRoomRadioDiscSpin
        4s linear infinite;
}

@keyframes pareaRoomRadioDiscSpin {
    to {
        transform: rotate(360deg);
    }
}

.parea-room-radio-display-text {
    min-width: 0;
}

.parea-room-radio-small {
    font-size: 8px;
    opacity: .58;
    letter-spacing: .8px;
}

#pareaRoomRadioStationName {
    display: block;

    margin-top: 3px;

    font-size: 12px;
    font-weight: 900;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    color: #85eeff;

    text-shadow:
        0 0 9px rgba(72,218,255,.35);
}

.parea-room-radio-eq {
    display: flex;
    align-items: end;
    gap: 2px;

    height: 11px;

    margin-top: 4px;
}

.parea-room-radio-eq span {
    display: block;

    width: 3px;
    height: 3px;

    border-radius: 2px;

    background:
        linear-gradient(
            #baffff,
            #19c9f5
        );

    opacity: .45;
}

#pareaRoomRadio3dV1.playing
.parea-room-radio-eq span {
    opacity: 1;

    animation:
        pareaRoomEq
        .7s ease-in-out infinite alternate;
}

#pareaRoomRadio3dV1.playing
.parea-room-radio-eq span:nth-child(2) {
    animation-delay: .12s;
}

#pareaRoomRadio3dV1.playing
.parea-room-radio-eq span:nth-child(3) {
    animation-delay: .28s;
}

#pareaRoomRadio3dV1.playing
.parea-room-radio-eq span:nth-child(4) {
    animation-delay: .08s;
}

#pareaRoomRadio3dV1.playing
.parea-room-radio-eq span:nth-child(5) {
    animation-delay: .35s;
}

@keyframes pareaRoomEq {
    from {
        height: 3px;
    }

    to {
        height: 11px;
    }
}

#pareaRoomRadioStationSelect {
    position: relative;
    z-index: 2;

    width: 100%;

    padding: 7px 8px;

    margin-bottom: 8px;

    border-radius: 9px;

    border:
        1px solid rgba(85,219,255,.18);

    background:
        rgba(3,10,20,.86);

    color: #dffaff;

    font-size: 10px;

    outline: none;
}

.parea-room-radio-controls {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: 38px minmax(0,1fr) 31px;
    gap: 8px;
    align-items: center;
}

#pareaRoomRadioPlay {
    width: 37px;
    height: 37px;

    border: 0;
    border-radius: 50%;

    cursor: pointer;

    color: #07111b;

    font-size: 14px;
    font-weight: 900;

    background:
        radial-gradient(
            circle at 35% 25%,
            #eaffff,
            #4ae4ff 38%,
            #0085bc 75%,
            #004667
        );

    box-shadow:
        inset 0 2px 2px rgba(255,255,255,.62),
        inset 0 -4px 8px rgba(0,39,78,.52),
        0 4px 9px rgba(0,0,0,.5),
        0 0 12px rgba(40,217,255,.32);

    transition:
        transform .15s ease;
}

#pareaRoomRadioPlay:hover {
    transform:
        translateY(-1px)
        scale(1.03);
}

#pareaRoomRadioPlay:active {
    transform:
        translateY(1px)
        scale(.98);
}

#pareaRoomRadioVolume {
    width: 100%;

    accent-color:
        #31d8ff;
}

#pareaRoomRadioVolumeValue {
    text-align: right;

    font-size: 9px;

    color: #7feaff;
}

#pareaRoomRadioMessage {
    position: relative;
    z-index: 2;

    min-height: 13px;

    margin-top: 7px;

    font-size: 9px;

    color: #8da7b2;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#pareaRoomRadioMessage.error {
    color: #ff8791;
}

#pareaRoomRadioMessage.ok {
    color: #84ffc1;
}

/*
 * Δεν αλλάζουμε desktop layout.
 * Απλώς προσαρμόζουμε το player
 * στο διαθέσιμο πλάτος.
 */
@media (max-width:650px) {

    #pareaRoomRadio3dV1 {
        padding: 7px;
        border-radius: 12px;
    }

    .parea-room-radio-brand {
        font-size: 8px;
    }

    .parea-room-radio-onair {
        padding: 3px 4px;
        font-size: 7px;
    }

    .parea-room-radio-screen {
        grid-template-columns: 30px minmax(0,1fr);
        min-height: 40px;
        padding: 5px;
    }

    .parea-room-radio-disc {
        width: 29px;
        height: 29px;
    }

    #pareaRoomRadioStationName {
        font-size: 9px;
    }

    #pareaRoomRadioStationSelect {
        font-size: 8px;
        padding: 5px;
    }

    .parea-room-radio-controls {
        grid-template-columns: 31px minmax(0,1fr) 26px;
        gap: 4px;
    }

    #pareaRoomRadioPlay {
        width: 30px;
        height: 30px;
        font-size: 11px;
    }

    #pareaRoomRadioVolumeValue,
    #pareaRoomRadioMessage {
        font-size: 7px;
    }
}


/* PAREACLUB ROOM RADIO PLACEMENT V1B */
.users-panel #pareaRoomRadio3dV1 {
    flex: 0 0 auto;
    box-sizing: border-box;
}

.users-panel #usersListUI {
    min-height: 0;
}


/* =========================================================
   PAREACLUB RADIO SELECT DARK OPTIONS V1
========================================================= */

#pareaRoomRadio3dV1 select {
    color-scheme: dark !important;

    background-color: #07131f !important;
    color: #ffffff !important;

    border-color: #c58b00 !important;
}

#pareaRoomRadio3dV1 select option,
#pareaRoomRadio3dV1 select optgroup {
    background-color: #07131f !important;
    color: #ffffff !important;
}

#pareaRoomRadio3dV1 select option:checked {
    background-color: #1256c4 !important;
    color: #ffffff !important;
}