/* Varsayılan (mobil) genişlik */
:root {

    --oo-player-wrapper-width: 100%;
    --oo-player-wrapper-padding-y: 0.45rem;
    --oo-player-wrapper-padding-x: 0.9rem;
    --oo-player-wrapper-border-radius: 0rem;
    --oo-player-wrapper-bottom-position: 0rem;
    --oo-player-wrapper-box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    --oo-player-wrapper-backdrop-blur: blur(16px);
    --oo-player-wrapper-bg-color: rgba(255, 255, 255, 0.83);


    --oo-player-visualizer-bg-color: rgba(255, 0, 0, 0.34);


    --oo-player-play-pause-button-width: 3rem;
    --oo-player-play-pause-button-height: 3rem;
    --oo-player-play-pause-button-text-color: black;
    --oo-player-play-pause-button-border-radius: 50%;
    --oo-player-play-pause-button-padding: 0.75rem;
    --oo-player-play-pause-button-bg-color: rgba(255, 255, 255, 1);
    --oo-player-play-pause-button-svg-width: 2.5rem;
    --oo-player-play-pause-button-svg-height: 2.5rem;
    --oo-player-play-pause-button-svg-color: rgb(0, 0, 0);


    --oo-player-other-buttons-width: 1.5rem;
    --oo-player-other-buttons-height: 1.5rem;
    --oo-player-other-buttons-text-color: #232323;
    --oo-player-other-buttons-border-radius: 20%;
    --oo-player-other-buttons-padding: 0rem;
    --oo-player-other-buttons-bg-color: rgba(255, 0, 0, 0);
    --oo-player-other-buttons-svg-width: 1.2rem;
    --oo-player-other-buttons-svg-height: 1.2rem;
    --oo-player-other-buttons-svg-color: #232323;
    --oo-player-other-buttons-svg-color-stroke-width: 1.3;


    --oo-player-current-radio-cover-image-width: 3rem;
    --oo-player-current-radio-cover-image-height: 3rem;
    --oo-player-current-radio-cover-image-border-radius: 50%;


    --oo-player-current-radio-title-font-size: 0.82rem;
    --oo-player-current-radio-title-font-weight: 600;
    --oo-player-current-radio-title-color: #000;
    --oo-player-current-radio-title-line-height: 1.5;
    --oo-player-current-radio-title-margin: 0;
    --oo-player-current-radio-title-padding: 0;
    --oo-player-current-radio-title-text-transform: none;
    --oo-player-current-radio-title-letter-spacing: normal;
    --oo-player-current-radio-title-text-align: left;

    --oo-player-current-radio-description-font-size: 0.68rem;
    --oo-player-current-radio-description-font-weight: 300;
    --oo-player-current-radio-description-color: #000;
    --oo-player-current-radio-description-line-height: 1.5;
    --oo-player-current-radio-description-margin: 0;
    --oo-player-current-radio-description-padding: 0;
    --oo-player-current-radio-description-text-transform: none;
    --oo-player-current-radio-description-letter-spacing: normal;
    --oo-player-current-radio-description-text-align: left;


    --oo-player-other-stations-cover-image-width: 5rem;
    --oo-player-other-stations-cover-image-height: 5rem;
    --oo-player-other-stations-cover-image-border-radius: 50%;
    --oo-player-other-stations-cover-image-box-shadow: 0 10px 15px rgba(0, 0, 0, 0.25);
    --oo-player-other-stations-cover-image-object-fit: cover;

}

/* sm: Ekran genişliği 640px ve üstü */
@media (min-width: 640px) {
    :root {

        --oo-player-wrapper-width: 80%;
        --oo-player-wrapper-padding-y: 0.75rem;
        --oo-player-wrapper-padding-x: 1rem;
        --oo-player-wrapper-border-radius: 0.6rem;
        --oo-player-wrapper-bottom-position: 2rem;
        --oo-player-wrapper-box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
        --oo-player-wrapper-backdrop-blur: blur(16px);
        --oo-player-wrapper-bg-color: rgba(255, 255, 255, 0.83);


        --oo-player-visualizer-bg-color: rgba(255, 0, 0, 0.34);


        --oo-player-play-pause-button-width: 3.5rem;
        --oo-player-play-pause-button-height: 3.5rem;
        --oo-player-play-pause-button-text-color: black;
        --oo-player-play-pause-button-border-radius: 50%;
        --oo-player-play-pause-button-padding: 0.75rem;
        --oo-player-play-pause-button-bg-color: rgba(255, 255, 255, 1);
        --oo-player-play-pause-button-svg-width: 3rem;
        --oo-player-play-pause-button-svg-height: 3rem;
        --oo-player-play-pause-button-svg-color: rgb(0, 0, 0);


        --oo-player-other-buttons-width: 1.75rem;
        --oo-player-other-buttons-height: 1.75rem;
        --oo-player-other-buttons-text-color: #232323;
        --oo-player-other-buttons-border-radius: 50%;
        --oo-player-other-buttons-padding: 0rem;
        --oo-player-other-buttons-bg-color: rgba(255, 0, 0, 0);
        --oo-player-other-buttons-svg-width: 1.75rem;
        --oo-player-other-buttons-svg-height: 1.75rem;
        --oo-player-other-buttons-svg-color: #232323;
        --oo-player-other-buttons-svg-color-stroke-width: 1.3;


        --oo-player-current-radio-cover-image-width: 3rem;
        --oo-player-current-radio-cover-image-height: 3rem;
        --oo-player-current-radio-cover-image-border-radius: 50%;


        --oo-player-current-radio-title-font-size: 1rem;
        --oo-player-current-radio-title-font-weight: 600;
        --oo-player-current-radio-title-color: #000;
        --oo-player-current-radio-title-line-height: 1.5;
        --oo-player-current-radio-title-margin: 0;
        --oo-player-current-radio-title-padding: 0;
        --oo-player-current-radio-title-text-transform: none;
        --oo-player-current-radio-title-letter-spacing: normal;
        --oo-player-current-radio-title-text-align: left;

        --oo-player-current-radio-description-font-size: 0.82rem;
        --oo-player-current-radio-description-font-weight: 300;
        --oo-player-current-radio-description-color: #000;
        --oo-player-current-radio-description-line-height: 1.5;
        --oo-player-current-radio-description-margin: 0;
        --oo-player-current-radio-description-padding: 0;
        --oo-player-current-radio-description-text-transform: none;
        --oo-player-current-radio-description-letter-spacing: normal;
        --oo-player-current-radio-description-text-align: left;


        --oo-player-other-stations-cover-image-width: 5rem;
        --oo-player-other-stations-cover-image-height: 5rem;
        --oo-player-other-stations-cover-image-border-radius: 50%;
        --oo-player-other-stations-cover-image-box-shadow: 0 10px 15px rgba(0, 0, 0, 0.25);
        --oo-player-other-stations-cover-image-object-fit: cover;

    }
}

/* lg: Ekran genişliği 1024px ve üstü */
@media (min-width: 1024px) {
    :root {

        --oo-player-wrapper-width: 50%;
        --oo-player-wrapper-padding-y: 0.75rem;
        --oo-player-wrapper-padding-x: 1rem;
        --oo-player-wrapper-border-radius: 0.6rem;
        --oo-player-wrapper-bottom-position: 2rem;
        --oo-player-wrapper-box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
        --oo-player-wrapper-backdrop-blur: blur(16px);
        --oo-player-wrapper-bg-color: rgba(255, 255, 255, 0.83);


        --oo-player-visualizer-bg-color: rgba(255, 0, 0, 0.34);


        --oo-player-play-pause-button-width: 3.75rem;
        --oo-player-play-pause-button-height: 3.75rem;
        --oo-player-play-pause-button-text-color: black;
        --oo-player-play-pause-button-border-radius: 50%;
        --oo-player-play-pause-button-padding: 0.75rem;
        --oo-player-play-pause-button-bg-color: rgba(255, 255, 255, 1);
        --oo-player-play-pause-button-svg-width: 2.4rem;
        --oo-player-play-pause-button-svg-height: 2.4rem;
        --oo-player-play-pause-button-svg-color: rgb(0, 0, 0);


        --oo-player-other-buttons-width: 2rem;
        --oo-player-other-buttons-height: 2rem;
        --oo-player-other-buttons-text-color: #232323;
        --oo-player-other-buttons-border-radius: 50%;
        --oo-player-other-buttons-padding: 0rem;
        --oo-player-other-buttons-bg-color: rgba(255, 0, 0, 0);
        --oo-player-other-buttons-svg-width: 2rem;
        --oo-player-other-buttons-svg-height: 2rem;
        --oo-player-other-buttons-svg-color: #232323;
        --oo-player-other-buttons-svg-color-stroke-width: 1.3;


        --oo-player-current-radio-cover-image-width: 4rem;
        --oo-player-current-radio-cover-image-height: 4rem;
        --oo-player-current-radio-cover-image-border-radius: 50%;


        --oo-player-current-radio-title-font-size: 1.1rem;
        --oo-player-current-radio-title-font-weight: 600;
        --oo-player-current-radio-title-color: #000;
        --oo-player-current-radio-title-line-height: 1.5;
        --oo-player-current-radio-title-margin: 0;
        --oo-player-current-radio-title-padding: 0;
        --oo-player-current-radio-title-text-transform: none;
        --oo-player-current-radio-title-letter-spacing: normal;
        --oo-player-current-radio-title-text-align: left;

        --oo-player-current-radio-description-font-size: 0.96rem;
        --oo-player-current-radio-description-font-weight: 300;
        --oo-player-current-radio-description-color: #000;
        --oo-player-current-radio-description-line-height: 1.5;
        --oo-player-current-radio-description-margin: 0;
        --oo-player-current-radio-description-padding: 0;
        --oo-player-current-radio-description-text-transform: none;
        --oo-player-current-radio-description-letter-spacing: normal;
        --oo-player-current-radio-description-text-align: left;


        --oo-player-other-stations-cover-image-width: 6rem;
        --oo-player-other-stations-cover-image-height: 6rem;
        --oo-player-other-stations-cover-image-border-radius: 50%;
        --oo-player-other-stations-cover-image-box-shadow: 0 10px 15px rgba(0, 0, 0, 0.25);
        --oo-player-other-stations-cover-image-object-fit: cover;

    }
}
/* GENERAL CSS */

.oo-radio-player {
    padding: var(--oo-player-wrapper-padding-y) var(--oo-player-wrapper-padding-x);
    box-shadow: var(--oo-player-wrapper-box-shadow);
    bottom: var(--oo-player-wrapper-bottom-position);
}

.oo-radio-player-border-radius {
    border-radius: var(--oo-player-wrapper-border-radius)!important;
}

.oo-radio-player-backdrop {
    backdrop-filter: var(--oo-player-wrapper-backdrop-blur);
    -webkit-backdrop-filter: var(--oo-player-wrapper-backdrop-blur);
}

.oo-radio-player-bg-color {
    background-color: var(--oo-player-wrapper-bg-color)!important;
}

.oo-player-current-radio-cover-image {
    width: var(--oo-player-current-radio-cover-image-width)!important;
    height: var(--oo-player-current-radio-cover-image-height)!important;
    border-radius: var(--oo-player-current-radio-cover-image-border-radius)!important;
    object-fit: cover!important; /* object-cover */
}

.oo-player-current-radio-title {
    font-size: var(--oo-player-current-radio-title-font-size);
    font-weight: var(--oo-player-current-radio-title-font-weight);
    color: var(--oo-player-current-radio-title-color);
    line-height: var(--oo-player-current-radio-title-line-height);
    margin: var(--oo-player-current-radio-title-margin);
    padding: var(--oo-player-current-radio-title-padding);
    text-transform: var(--oo-player-current-radio-title-text-transform);
    letter-spacing: var(--oo-player-current-radio-title-letter-spacing);
    text-align: var(--oo-player-current-radio-title-text-align);
}

.oo-player-current-radio-description {
    font-size: var(--oo-player-current-radio-description-font-size);
    font-weight: var(--oo-player-current-radio-description-font-weight);
    color: var(--oo-player-current-radio-description-color);
    line-height: var(--oo-player-current-radio-description-line-height);
    margin: var(--oo-player-current-radio-description-margin);
    padding: var(--oo-player-current-radio-description-padding);
    text-transform: var(--oo-player-current-radio-description-text-transform);
    letter-spacing: var(--oo-player-current-radio-description-letter-spacing);
    text-align: var(--oo-player-current-radio-description-text-align);
}

.oo-player-play-pause-button {
    width: var(--oo-player-play-pause-button-width)!important;
    height: var(--oo-player-play-pause-button-height)!important;
    color: var(--oo-player-play-pause-button-text-color)!important;
    border-radius: var(--oo-player-play-pause-button-border-radius)!important;
    padding: var(--oo-player-play-pause-button-padding)!important;
    background-color: var(--oo-player-play-pause-button-bg-color)!important;
    border: none!important;
    outline: none!important;
    display: flex!important;
    align-items: center!important;
    justify-content: center!important;
    cursor: pointer!important;
}

.oo-player-play-pause-button:focus {
    outline: none!important;
}

.oo-player-play-pause-button-svg {
    width: var(--oo-player-play-pause-button-svg-width)!important;
    height: var(--oo-player-play-pause-button-svg-height)!important;
    color: var(--oo-player-play-pause-button-svg-color)!important;
    fill: currentColor!important;
    stroke-linecap: round!important;
    stroke-linejoin: round!important;
}


.oo-player-other-buttons {
    width: var(--oo-player-other-buttons-width)!important;
    height: var(--oo-player-other-buttons-height)!important;
    color: var(--oo-player-other-buttons-text-color)!important;
    border-radius: var(--oo-player-other-buttons-border-radius)!important;
    padding: var(--oo-player-other-buttons-padding)!important;
    background-color: var(--oo-player-other-buttons-bg-color)!important;
    border: none!important;
    outline: none!important;
    display: flex!important;
    align-items: center!important;
    justify-content: center!important;
    cursor: pointer!important;
}

.oo-player-other-buttons:focus {
    outline: none!important;
}

.oo-player-other-buttons-svg {
    width: var(--oo-player-other-buttons-svg-width)!important;
    height: var(--oo-player-other-buttons-svg-height)!important;
    color: var(--oo-player-other-buttons-svg-color)!important;
    fill: none!important;
    stroke-linecap: round!important;
    stroke-linejoin: round!important;
    stroke-width: var(--oo-player-other-buttons-svg-color-stroke-width, 2)!important;
}


.oo-player-other-stations-cover-image {
    width: var(--oo-player-other-stations-cover-image-width)!important;
    height: var(--oo-player-other-stations-cover-image-height)!important;
    border-radius: var(--oo-player-other-stations-cover-image-border-radius)!important;
    box-shadow: var(--oo-player-other-stations-cover-image-box-shadow)!important;
    object-fit: var(--oo-player-other-stations-cover-image-object-fit)!important;
}

.oo-radio-volume-input {
    padding:0!important;
}