/* =========================================================
   PAREACLUB DJ PLAYER RESPONSIVE COMPACT V5
   ========================================================= */

/* Παντού σωστό sizing */
#djPlayerWindow,
#djPlayerWindow * {
    box-sizing: border-box;
}


/* ---------------------------------------------------------
   PLAYER WINDOW
--------------------------------------------------------- */

#djPlayerWindow.dj-player-window {
    width: 500px !important;
    max-width: calc(100vw - 16px) !important;

    min-width: 340px !important;

    max-height: 88vh !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    container-type: inline-size;
}


/* ---------------------------------------------------------
   ΑΦΑΙΡΕΣΗ ΠΑΛΙΟΥ LIVE DJ BADGE
--------------------------------------------------------- */

#djPlayerWindow #djLiveDjBadge,
#djPlayerWindow .dj-live-owner-badge {
    display: none !important;
}


/* Κρατάμε μόνο το καινούργιο */
#djPlayerWindow #djModernOwnerBadge,
#djPlayerWindow .dj-modern-owner-badge {
    display: block !important;

    flex: 0 0 auto;

    white-space: nowrap;

    max-width: 145px;

    overflow: hidden;
    text-overflow: ellipsis;
}


/* ---------------------------------------------------------
   HEADER
--------------------------------------------------------- */

#djPlayerWindow .dj-player-header {
    width: 100% !important;

    display: flex !important;
    align-items: center !important;

    gap: 8px !important;

    padding: 7px 9px !important;

    overflow: hidden;
}


#djPlayerWindow .dj-player-header > div:first-child {
    min-width: 0 !important;

    flex: 1 1 auto !important;

    display: flex !important;
    align-items: center !important;
    gap: 7px !important;

    white-space: nowrap;
}


#djPlayerWindow #closeDjPlayerBtn {
    flex: 0 0 40px !important;

    width: 40px !important;
    height: 40px !important;
}


/* ---------------------------------------------------------
   NOW PLAYING
--------------------------------------------------------- */

#djPlayerWindow .dj-now-playing {
    width: auto !important;

    margin: 8px 10px !important;

    display: grid !important;

    grid-template-columns:
        64px
        minmax(0, 1fr)
        118px !important;

    gap: 9px !important;

    align-items: center !important;

    overflow: hidden !important;
}


#djPlayerWindow .dj-cover {
    width: 64px !important;
    height: 64px !important;

    min-width: 64px !important;
}


#djPlayerWindow .dj-track-info {
    min-width: 0 !important;

    overflow: hidden !important;
}


#djPlayerWindow #djNowTitle,
#djPlayerWindow .dj-now-title {
    width: 100% !important;

    min-width: 0 !important;

    overflow: hidden !important;

    white-space: nowrap !important;

    text-overflow: ellipsis !important;
}


#djPlayerWindow #djModernSpectrum,
#djPlayerWindow .dj-modern-spectrum {
    width: 118px !important;
    min-width: 0 !important;

    height: 58px !important;

    margin: 0 !important;

    overflow: hidden !important;
}


/* ---------------------------------------------------------
   PROGRESS
   ΚΡΑΤΑΜΕ ΚΑΙ ΤΟΝ ΔΕΞΙ ΧΡΟΝΟ ΠΑΝΤΑ ΟΡΑΤΟ
--------------------------------------------------------- */

#djPlayerWindow .dj-progress-row {
    width: auto !important;

    margin: 5px 10px !important;

    padding: 5px 2px !important;

    display: grid !important;

    grid-template-columns:
        44px
        minmax(0, 1fr)
        44px !important;

    gap: 6px !important;

    align-items: center !important;

    overflow: visible !important;
}


#djPlayerWindow #djCurrentTime,
#djPlayerWindow #djDuration {
    width: 44px !important;

    min-width: 44px !important;

    display: block !important;

    white-space: nowrap !important;

    font-size: 10px !important;

    text-align: center !important;

    overflow: visible !important;
}


#djPlayerWindow #djDuration {
    text-align: right !important;

    padding-right: 2px !important;
}


#djPlayerWindow #djProgress {
    width: 100% !important;

    min-width: 0 !important;
}


/* ---------------------------------------------------------
   TRANSPORT BUTTONS
--------------------------------------------------------- */

#djPlayerWindow .dj-controls {
    width: auto !important;

    margin: 6px 10px !important;

    padding: 3px !important;

    display: flex !important;

    justify-content: center !important;

    gap: 7px !important;

    flex-wrap: nowrap !important;
}


#djPlayerWindow .dj-controls button {
    width: 39px !important;
    height: 39px !important;

    min-width: 39px !important;

    flex: 0 0 39px !important;

    padding: 0 !important;
}


/* ---------------------------------------------------------
   VOLUME
--------------------------------------------------------- */

#djPlayerWindow .dj-volume-row {
    width: auto !important;

    margin: 5px 10px 8px !important;

    padding: 5px 3px !important;

    display: grid !important;

    grid-template-columns:
        20px
        minmax(0, 1fr)
        42px !important;

    gap: 7px !important;

    align-items: center !important;
}


#djPlayerWindow #djVolume {
    width: 100% !important;

    min-width: 0 !important;
}


#djPlayerWindow #djVolumeValue {
    width: 42px !important;

    min-width: 42px !important;

    white-space: nowrap !important;

    text-align: right !important;
}


/* ---------------------------------------------------------
   DIGITAL EQUALIZER
--------------------------------------------------------- */

#djPlayerWindow .dj-modern-eq {
    width: auto !important;

    margin: 8px 10px !important;

    padding: 9px !important;

    overflow: hidden !important;
}


#djPlayerWindow .dj-modern-eq-top {
    width: 100% !important;

    display: flex !important;

    align-items: center !important;

    gap: 7px !important;

    flex-wrap: wrap !important;
}


#djPlayerWindow .dj-modern-eq-title {
    flex: 1 1 auto !important;

    min-width: 125px !important;
}


#djPlayerWindow .dj-modern-eq-bands {
    width: 100% !important;

    display: grid !important;

    grid-template-columns:
        repeat(10, minmax(0, 1fr)) !important;

    gap: 3px !important;

    overflow: hidden !important;
}


#djPlayerWindow .dj-modern-band {
    min-width: 0 !important;

    overflow: visible !important;
}


#djPlayerWindow .dj-modern-band input {
    width: 16px !important;

    height: 84px !important;
}


#djPlayerWindow .dj-modern-band span {
    font-size: 8px !important;

    white-space: nowrap !important;
}


/* BASS / TREBLE / BALANCE */

#djPlayerWindow .dj-modern-tone-row {
    width: 100% !important;

    display: grid !important;

    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;

    gap: 6px !important;

    margin-top: 8px !important;
}


#djPlayerWindow .dj-modern-tone {
    min-width: 0 !important;

    padding: 5px !important;

    overflow: hidden !important;
}


#djPlayerWindow .dj-modern-tone input {
    width: 100% !important;

    min-width: 0 !important;
}


/* ---------------------------------------------------------
   YOUTUBE / UPLOAD
--------------------------------------------------------- */

#djPlayerWindow .dj-add-section {
    width: auto !important;

    margin: 8px 10px !important;

    padding: 9px !important;

    overflow: hidden !important;
}


#djPlayerWindow .dj-search-row {
    width: 100% !important;

    display: grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        auto !important;

    gap: 7px !important;
}


#djPlayerWindow .dj-search-row input {
    width: 100% !important;

    min-width: 0 !important;
}


#djPlayerWindow .dj-add-row {
    width: 100% !important;

    display: grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        auto !important;

    gap: 7px !important;
}


#djPlayerWindow .dj-add-row input {
    width: 100% !important;

    min-width: 0 !important;
}


#djPlayerWindow .dj-search-results {
    max-height: 165px !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;
}


/* ---------------------------------------------------------
   PLAYLIST
--------------------------------------------------------- */

#djPlayerWindow .dj-playlist-header {
    width: auto !important;

    margin-left: 10px !important;
    margin-right: 10px !important;
}


#djPlayerWindow .dj-playlist {
    width: auto !important;

    margin-left: 10px !important;
    margin-right: 10px !important;

    max-height: 185px !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;
}


/* =========================================================
   ΟΤΑΝ ΤΟ ΙΔΙΟ ΤΟ DJ WINDOW ΓΙΝΕΤΑΙ ΣΤΕΝΟ
   όχι μόνο όταν μικραίνει ο browser
========================================================= */

@container (max-width: 455px) {

    #djPlayerWindow .dj-player-header {
        padding-left: 7px !important;
        padding-right: 7px !important;
    }


    #djPlayerWindow .dj-player-header {
        font-size: 13px !important;
    }


    #djPlayerWindow #djModernOwnerBadge {
        font-size: 10px !important;

        padding: 4px 7px !important;
    }


    #djPlayerWindow .dj-now-playing {
        grid-template-columns:
            55px
            minmax(0, 1fr)
            92px !important;

        gap: 6px !important;
    }


    #djPlayerWindow .dj-cover {
        width: 55px !important;
        height: 55px !important;

        min-width: 55px !important;
    }


    #djPlayerWindow #djModernSpectrum,
    #djPlayerWindow .dj-modern-spectrum {
        width: 92px !important;
        height: 52px !important;
    }


    #djPlayerWindow .dj-now-title {
        font-size: 13px !important;
    }


    #djPlayerWindow .dj-controls {
        gap: 5px !important;
    }


    #djPlayerWindow .dj-controls button {
        width: 36px !important;
        height: 36px !important;

        min-width: 36px !important;

        flex-basis: 36px !important;
    }


    #djPlayerWindow .dj-modern-eq {
        padding: 7px !important;
    }


    #djPlayerWindow .dj-modern-eq-bands {
        gap: 1px !important;
    }


    #djPlayerWindow .dj-modern-band input {
        height: 72px !important;
        width: 14px !important;
    }


    #djPlayerWindow .dj-modern-band span {
        font-size: 7px !important;
    }
}


/* ΑΚΟΜΑ ΠΙΟ ΣΤΕΝΟ */

@container (max-width: 390px) {

    #djPlayerWindow .dj-now-playing {
        grid-template-columns:
            48px
            minmax(0, 1fr)
            76px !important;
    }


    #djPlayerWindow .dj-cover {
        width: 48px !important;
        height: 48px !important;

        min-width: 48px !important;
    }


    #djPlayerWindow #djModernSpectrum,
    #djPlayerWindow .dj-modern-spectrum {
        width: 76px !important;
        height: 47px !important;
    }


    #djPlayerWindow .dj-controls button {
        width: 33px !important;
        height: 33px !important;

        min-width: 33px !important;

        flex-basis: 33px !important;
    }


    #djPlayerWindow .dj-modern-tone-row {
        gap: 3px !important;
    }


    #djPlayerWindow .dj-modern-tone {
        padding: 3px !important;

        font-size: 7px !important;
    }
}


/* ---------------------------------------------------------
   ΜΙΚΡΗ ΟΘΟΝΗ
--------------------------------------------------------- */

@media (max-width: 520px) {

    #djPlayerWindow.dj-player-window {
        width: calc(100vw - 10px) !important;

        min-width: 300px !important;

        max-height: 92vh !important;
    }
}