/*
 Theme Name:   Kentha Child
 Theme URI:    http://qantumthemes.xyz/
 Description:  Kentha Child Theme
 Author:       QantumThemes
 Author URI:   http://qantumthemes.xyz/helpdesk
 Template:     kentha
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         right-sidebar
 Text Domain:  kentha-child
*/

/***************************************************************
****************************************************************
************* PUT YOUR CUSTOM STYLES BELOW ********************/

/* ==============================================================
Write your custom styles here 
============================================================== */

/* Définir la hauteur pour les conteneurs de carte OpenStreetMap */
.qt_dynamicmaps { /* CHANGEMENT ICI */
    height: 350px; /* Utilise la hauteur par défaut ou ajuste si nécessaire */
    width: 100%;
}

/* Styles pour les vidéos d'artiste */
.qt-artist-video-wrapper {
    max-width: 400px !important; /* Ajuste cette valeur selon la taille souhaitée pour les vidéos portrait */
    margin: 0 auto !important; /* Centre le conteneur */
    width: 100% !important;
    margin-bottom: 20px !important;
    position: relative !important; /* Ajouté pour contenir la vidéo si elle est positionnée absolument */
    overflow: hidden !important; /* Cache tout débordement */
    height: 766px !important; /* Forcer la hauteur du conteneur parent pour le JS */
}

.qt-artist-video-wrapper video {
    width: 100% !important;
    height: 100% !important; /* La vidéo prend 100% de la hauteur du wrapper */
    display: block !important;
    object-fit: contain !important; /* Assure que la vidéo s'adapte sans être coupée */
}

/* Styles pour le lecteur MediaElement.js intégré par WordPress */
.qt-artist-video-wrapper .mejs__container {
    width: 100% !important;
    position: relative !important;
    background-color: #000 !important;
}

.custom-video-wrapper.is-portrait .mejs__container {
    width: 100% !important; /* Permet à la largeur de s'ajuster */
}

/* Assurer que les contrôles du lecteur sont en bas */
.custom-video-wrapper .mejs__controls {
    position: absolute !important;
    bottom: 0 !important;
    width: 100% !important;
    background-color: rgba(0,0,0,0.8) !important; /* Garde la couleur de fond des contrôles */
    z-index: 10 !important; /* Assure que les contrôles sont au-dessus */
}

/* Styles pour les conteneurs vidéo Creatools (le JavaScript gérera la hauteur interne) */
.cus-creatools-video-contener-one,
.cus-creatools-video-contener-two,
.cus-creatools-video-contener-three,
.cus-creatools-video-contener-four,
.cus-creatools-video-contener-five,
.cus-creatools-video-contener-six {
    height: 766px !important; /* Le conteneur extérieur doit avoir une hauteur fixe */
    max-height: 766px !important;
}

/* Cible les éléments générés par MediaElement.js à l'intérieur de nos conteneurs */
.cus-creatools-video-contener-one .mejs__container,
.cus-creatools-video-contener-two .mejs__container,
.cus-creatools-video-contener-three .mejs__container,
.cus-creatools-video-contener-four .mejs__container,
.cus-creatools-video-contener-five .mejs__container,
.cus-creatools-video-contener-six .mejs__container {
    height: 100% !important; /* Le conteneur MEJS doit prendre 100% de la hauteur de son parent (.cus-creatools-video-contener-X) */
    padding-top: 0 !important; /* Annule le padding-top basé sur le ratio car la hauteur est fixe */
}

.cus-creatools-video-contener-one .mejs__mediaelement,
.cus-creatools-video-contener-two .mejs__mediaelement,
.cus-creatools-video-contener-three .mejs__mediaelement,
.cus-creatools-video-contener-four .mejs__mediaelement,
.cus-creatools-video-contener-five .mejs__mediaelement,
.cus-creatools-video-contener-six .mejs__mediaelement {
    height: 100% !important;
    width: 100% !important;
}

.qt-artist-video-wrapper .mejs__mediaelement {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

.qt-artist-video-wrapper .mejs__overlay-button {
    background-color: rgba(0,0,0,0.7) !important;
    border-radius: 50% !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    background-position: 0 -29px !important;
    height: 120px !important;
    width: 80px !important;
    margin-left: 0px !important;
}

.qt-artist-video-wrapper .mejs__controls {
    background-color: rgba(0,0,0,0.8) !important;
}

/* Corriger la hauteur de l'overlay de lecture de MediaElement.js */
.mejs-overlay.mejs-layer.mejs-overlay-play {
    height: 766px !important;
}

/* Corriger la hauteur de l'élément mediaelementwrapper */
.mejs-mediaelement {
    height: 766px !important;
    width: 100% !important; /* Ajouté pour s'assurer qu'il prend toute la largeur */
}

/* Règles supplémentaires pour surcharger les styles en ligne */
div.mejs-container.mejs-video {
    height: 766px !important;
    min-height: 766px !important;
}

div.mejs-container.mejs-video .mejs-inner div.mejs-layers div.mejs-poster,
div.mejs-container.mejs-video .mejs-inner div.mejs-layers div.mejs-overlay,
div.mejs-container.mejs-video .mejs-inner div.mejs-layers div.mejs-overlay-play,
div.mejs-container.mejs-video .mejs-inner div.mejs-mediaelement {
    height: 766px !important;
    min-height: 766px !important;
}

/* Règle ultra-spécifique pour le conteneur principal du lecteur */
div.mejs-container {
    height: 766px !important;
    min-height: 766px !important;
}

/* Règles très spécifiques pour les éléments internes de MediaElement.js */
div.mejs-container .mejs-inner,
div.mejs-container .mejs-inner .mejs-layers,
div.mejs-container .mejs-inner .mejs-poster,
div.mejs-container .mejs-inner .mejs-overlay,
div.mejs-container .mejs-inner .mejs-overlay-play {
    height: 766px !important;
    min-height: 766px !important;
    width: 100% !important;
}

/* Force le centrage du bouton de lecture de l'overlay */
.qt-artist-video-wrapper .mejs__overlay-button {
    margin-left: 0px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}