/* 
*  Conteneur fixe qui contient le contenu du comparateur
*/
#posts-comparator-ui{
    display: none;
    position: fixed;
    z-index: 99999;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: white;
    overflow-y: scroll;
}

/* 
*  Par défaut les boutons de type "Ajouter au comparateurs" sont masqués, il sont affichés par JS en fonction de la présence ou non dans le comparateur
*/
.posts-comparator-update-item{
    display: none;
}




/*************************************************
*
*  Partie "Sélection" des véhicules du comparateur 
*
**************************************************/

#posts-comparator-ui-selection{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
    margin: 20px 0;
    max-width: 100%;
    justify-content: center;
}

/* 
*  Item de la partie "Sélection" des véhicules du comparateur 
*/
#posts-comparator-ui-selection .posts-comparator-ui-selection-item{
    width: 200px;
    cursor: pointer;
}

/* 
*  Item de la partie "Sélection" des véhicules du comparateur : Si la limite de 4 véhicules sélectionnés est atteinte, l'item aura cette classe et sera grisé 
*/
#posts-comparator-ui-selection .posts-comparator-ui-selection-item.selection-limit-reached{
    opacity: 0.5;
    pointer-events: none;
}

/* 
*  Photo d'un item de la partie "Sélection" des véhicules du comparateur 
*/
#posts-comparator-ui-selection .posts-comparator-ui-selection-item .posts-comparator-ui-selection-item-photo{
    position: relative;
    height: 150px;
}
#posts-comparator-ui-selection .posts-comparator-ui-selection-item .posts-comparator-ui-selection-item-photo img{
    width: 100%;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

/* 
*  Conteneur des actions d'un item de la partie "Sélection" des véhicules du comparateur 
*/
#posts-comparator-ui-selection .posts-comparator-ui-selection-item .posts-comparator-ui-selection-item-photo .posts-comparator-ui-selection-item-actions{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 0 15px;
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    /*background: rgba(0,0,0,.7);*/
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

/* 
*  Action d'un item de la partie "Sélection" des véhicules du comparateur : Checkbox
*/
#posts-comparator-ui-selection .posts-comparator-ui-selection-item .posts-comparator-ui-selection-item-photo .posts-comparator-ui-selection-item-actions .posts-comparator-ui-selection-item-action-select{
    display: inline-block;
    vertical-align: middle;
    pointer-events: none;
    accent-color: #EC008C;
    transform: scale(1.5);
}

/* 
*  Action d'un item de la partie "Sélection" des véhicules du comparateur : Suppression
*/
#posts-comparator-ui-selection .posts-comparator-ui-selection-item .posts-comparator-ui-selection-item-photo .posts-comparator-ui-selection-item-actions .posts-comparator-ui-selection-item-action-delete{
    display: inline-block;
    vertical-align: middle;
    height: 20px !important;
    width: 20px !important;
    margin-left: 15px !important;
    font-size: 12px;
    padding: 0;
}
.posts-comparator-ui-selection-item-action-delete {
    background-color: #000 !important;
    border-color: #000 !important;
}
.posts-comparator-ui-selection-item-action-delete:hover {
    background-color: var( --e-global-color-accent ) !important;
    border-color: var( --e-global-color-accent ) !important;
    color: #fff !important;
}

/* 
*  Détails d'un item de la partie "Sélection" des véhicules du comparateur : Marque, modèle
*/
#posts-comparator-ui-selection .posts-comparator-ui-selection-item .posts-comparator-ui-selection-item-details{
    width: 100%;
    padding: 20px;
    background-color: #F5F9FF;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

#posts-comparator-ui-selection .posts-comparator-ui-selection-item .posts-comparator-ui-selection-item-details ul{
    padding: 0;
    list-style-type: none;
    font-size: 14px;
}

/* 
*  Breakpoint mobile Elementor
*/
@media (max-width: 767px){
    /* 
    *  Les items de la partie "Sélection" s'étendent sur toute la largeur
    */
    #posts-comparator-ui-selection .posts-comparator-ui-selection-item{
        flex: 0 0 100%;
        display: flex;
    }
    /* 
    *  La taille de la photo est réduite
    */
    #posts-comparator-ui-selection .posts-comparator-ui-selection-item .posts-comparator-ui-selection-item-photo{
        height: 80px;
        width: 120px;
    }
    #posts-comparator-ui-selection .posts-comparator-ui-selection-item .posts-comparator-ui-selection-item-photo img{
        height: 80px;
    }
}




/*************************************************
*
*  Partie "Comparaison" des véhicules du comparateur 
*
**************************************************/

/* 
*  Conteneur flex des items à comparés
*/
#posts-comparator-ui-comparator{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    width: 100%;
    gap: 10px;
    justify-content: center;
}

/* 
*  Premier item flex contenant les clés des valeurs à comparées : Prix, Année, Énergie, etc..
*/
#posts-comparator-ui-comparator .posts-comparator-ui-comparator-item.compare-with table{
    width: 160px;
}
#posts-comparator-ui-comparator .posts-comparator-ui-comparator-item.compare-with th{
    border: none !important;
    background: transparent !important;
}
#posts-comparator-ui-comparator .posts-comparator-ui-comparator-item.compare-with td{
    border: solid 1px white;
    background-color: #fff;
    color: black;
    font-weight: bold;
    text-align: left;
    text-transform: uppercase;
}

/* 
*  Deuxième item flex contenant les items qui contiennent les valeurs de chaque véhicule
*/
#posts-comparator-ui-comparator .posts-comparator-ui-comparator-items-container{
    display: flex;
    flex-direction: row;
    gap: 10px;
    overflow-x: auto;
}

/* 
*  Item contenant un table avec soit les clés soit les valeurs à comparées
*/
#posts-comparator-ui-comparator .posts-comparator-ui-comparator-items-container .posts-comparator-ui-comparator-item{
    width: 250px;
}
#posts-comparator-ui-comparator .posts-comparator-ui-comparator-items-container .posts-comparator-ui-comparator-item td ul{
    font-size: 11px;
    white-space: wrap;
    padding: 0;
}
#posts-comparator-ui-comparator .posts-comparator-ui-comparator-item table th{
    height: 180px;
    font-weight: normal;
    text-align: center;
    border-radius: 15px 15px 0 0;
    background: #f5f9ff;
    border: none;
}
#posts-comparator-ui-comparator .posts-comparator-ui-comparator-item td, #posts-comparator-ui-comparator .posts-comparator-ui-comparator-item th{
    white-space: nowrap;
    vertical-align: middle;
    text-align: left;
}

/* 
*  Item contenant uniquement une table avec les valeurs à comparées
*/
#posts-comparator-ui-comparator .posts-comparator-ui-comparator-item:not(.compare-with) td {
	border: solid 1px white;
	background-color: #f5f9ff;
	color: black;
	font-weight: bold;
	text-align: left;
	border-radius: 0 0 15px 15px;
}
#posts-comparator-ui-comparator .posts-comparator-ui-comparator-item:not(.compare-with)  table tbody > tr:nth-child(2n+1) > td  {
	background-color: #fff !important;
}

/* 
*  Breakpoint mobile
*/
@media (max-width: 767px){
    #posts-comparator-ui-comparator .posts-comparator-ui-comparator-items-container .posts-comparator-ui-comparator-item{
        flex: 0 0 calc(100% - 40px);
    }
}

/*Cœur sur page annonce*/
.posts-comparator-update-item a {
	background-color: rgba(255,255,255,0.8) !important;
	border-radius: 100% !important;
	padding: 16px !important;
	border: 0px !important;
    cursor: pointer;
}
.posts-comparator-update-item a:hover {
	background-color: #fff !important;
	color: var( --e-global-color-secondary ) !important;
}
.posts-comparator-open, .posts-comparator-close{
    cursor: pointer;
}
.posts-comparator-close a {
	border-radius: 80px !important;
	background-color: transparent !important;
	border-color: #000 !important;
}
.posts-comparator-close a:hover {
	color: var( --e-global-color-secondary ) !important;
	border-color: var( --e-global-color-secondary ) !important;
}

#posts-comparator-ui-comparator .posts-comparator-ui-comparator-item:not(.compare-with) tr:last-of-type td ul {
	height: 400px !important;
	overflow-x: scroll;
}
#posts-comparator-ui-comparator .posts-comparator-ui-comparator-item:not(.compare-with) tr:last-of-type td {
	height: 400px !important;
	overflow-x: scroll;
}