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

    --oo-player-wrapper-width: 70%;
    --oo-player-wrapper-padding-y: 0.75rem;
    --oo-player-wrapper-padding-x: 1rem;
    --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(224, 218, 201, 0.5);


    --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.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: 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: 2.75rem;
    --oo-player-current-radio-cover-image-height: 2.75rem;
    --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;

}

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

        --oo-player-wrapper-width: 99%;
        --oo-player-wrapper-padding-y: 0.75rem;
        --oo-player-wrapper-padding-x: 1rem;
        --oo-player-wrapper-border-radius: 1rem;
        --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(224, 218, 201, 0.5);


        --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.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: 1.25rem;
        --oo-player-other-buttons-height: 1.25rem;
        --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: 2rem;
        --oo-player-wrapper-border-radius: 1.5rem;
        --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(224, 218, 201, 0.5);


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


        --oo-player-play-pause-button-width: 3.25rem;
        --oo-player-play-pause-button-height: 3.25rem;
        --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: 2rem;
        --oo-player-play-pause-button-svg-height: 2rem;
        --oo-player-play-pause-button-svg-color: rgb(0, 0, 0);


        --oo-player-other-buttons-width: 1.6rem;
        --oo-player-other-buttons-height: 1.6rem;
        --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.6rem;
        --oo-player-other-buttons-svg-height: 1.6rem;
        --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.02rem;
        --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.85rem;
        --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);
}

.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);
}

.oo-player-current-radio-cover-image {
    width: var(--oo-player-current-radio-cover-image-width);
    height: var(--oo-player-current-radio-cover-image-height);
    border-radius: var(--oo-player-current-radio-cover-image-border-radius);
    object-fit: cover; /* 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);
    height: var(--oo-player-play-pause-button-height);
    color: var(--oo-player-play-pause-button-text-color);
    border-radius: var(--oo-player-play-pause-button-border-radius);
    padding: var(--oo-player-play-pause-button-padding);
    background-color: var(--oo-player-play-pause-button-bg-color);
    border: none;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

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

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


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

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

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


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