/**
* 2018-2022 ICC Digital
*
*  @author    ICC Digital <contact@icc-digital.fr>
*  @copyright 2018-2022 ICC Digital
*  @license   https://www.icc-digital.fr  Proprietary
*/
#icc-product-selector-vehicle {
    background-color: red;
}

.icc-selector-vehicle .select-options li.hidden,
#category .select-vehicle-empty.hidden,
#category .select-vehicle-complete.hidden {
    display: none;
}

#vehicle-selected .delete-vehicle,
#category .select-vehicle-complete .delete-vehicle {
    cursor: pointer;
}

#category .select-vehicle-complete {
    position: relative;
}

#vehicle-selected.loading::after,
#category .select-vehicle-complete.loading::after {
    content: '';
    background-color: #00000085;
    width: 100%;
    height: 100%;
    position: absolute;
    color: #FAFDFF;
    top: 0;
    left: 0;
    border-radius: 16px;
    background-repeat: no-repeat;
    background-size: contain;
    vertical-align: middle;
    background-position: center;
    background-size: 59px;
}

#vehicle-selected.loading .loading-spinner,
#category .select-vehicle-complete.loading .loading-spinner {
    width: 35px;
    height: 35px;
    border: 8px solid #f9f9f9;
    border-top: 8px solid var(--dark-blue);
    border-radius: 50%;
    animation: spin 1.5s linear infinite;
    display: block;
    position: absolute;
    left: 50%;
    right: 50%;
    top: 42%;
    bottom: 50%;
    z-index: 5;
    box-shadow: 0px 0px 20px #f9f9f9;
}

.page-home .icc-selector-vehicle.vehicle-save {
    /* transition: 0.5s; */
    opacity: 0;
    height: 0;
}

/* Masquer le sélecteur sur toutes les pages quand un véhicule est sélectionné */
.icc-selector-vehicle.vehicle-save {
    display: none;
}

/* keyframes */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}


/* Modal - Form */
.form-vehicle {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-block: 40px;
    background-color: var(--mid-blue);
}

.form-vehicle .h2 {
    font: var(--font-h2);
    text-align: center;
    letter-spacing: var(--letter-7);
    color: var(--dark-blue);
}

.form-vehicle form {
    max-width: 1920px;
    margin-inline: auto;
    display: flex;
    gap: 40px;
    width: 100%;
}

.form-vehicle select {
    flex: 1;
    padding: 8px 20px;
    border-radius: 10px;
    background-color: var(--white);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='16' height='10' viewBox='0 0 16 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M15 1.59998L8 8.59998L1 1.59998' stroke='%23142E3E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e ");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 15px 8px;
    padding-right: 40px;
    color: var(--dark-blue);
    font: var(--font-bold);
    letter-spacing: var(--letter-3);
}

.form-vehicle select:focus-visible {
    outline: none;
    border: none;

}

.form-vehicle select::after {
    content: url("data:image/svg+xml;charset=UTF-8,%3csvg width='16' height='10' viewBox='0 0 16 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M15 1.59998L8 8.59998L1 1.59998' stroke='%23142E3E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e ");
    width: 14px;
    height: 7px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.form-vehicle .bouton-yellow {
    border: none;
}

/* === Z-INDEX desktop : ordre décroissant pour que les dropdowns
   des premiers selects passent par-dessus les suivants === */
.form-vehicle .select:nth-child(1)  { z-index: 19; }
.form-vehicle .select:nth-child(2)  { z-index: 18; }
.form-vehicle .select:nth-child(3)  { z-index: 17; }
.form-vehicle .select:nth-child(4)  { z-index: 16; }
.form-vehicle .select:nth-child(5)  { z-index: 15; }
.form-vehicle .select:nth-child(6)  { z-index: 14; }
.form-vehicle .select:nth-child(7)  { z-index: 13; }
.form-vehicle .select:nth-child(8)  { z-index: 12; }

/* Select avec dropdown ouverte : toujours au premier plan */
.form-vehicle .select:has(.select-styled.active) {
    z-index: 100;
}

#my-vehicule .name {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 157px;
}

@media(max-width: 1250px) {
    #my-vehicule .name {
        max-width: 127px;
    }
}
@media(max-width: 1024px) {
    #my-vehicule .name {
        max-width: 121px;
    }
}

@media(max-width: 768px) {
    .form-vehicle form {
        flex-direction: column;
        align-items: center;
    }

    .form-vehicle .bouton-yellow,
    .form-vehicle .select,
    .form-vehicle select {
        width: 360px;
        min-width: 360px;
    }

    .form-vehicle .bouton-yellow {
        display: flex;
        justify-content: center;
    }

    /* En colonne, la dropdown s'ouvre vers le bas et doit passer
       par-dessus les selects suivants : on isole chaque select
       dans son propre contexte d'empilement avec un z-index
       décroissant (le premier = le plus haut) */
    .form-vehicle form {
        /* Pas d'overflow hidden : laisse les dropdowns déborder */
        overflow: visible;
    }
}


/* === SELECT PERSONNALISÉ === */
.form-vehicle .select-hidden {
    display: none;
    visibility: hidden;
    padding-right: 10px;
}

.form-vehicle .select {
    flex: 1;
    background-color: var(--white);
    border-radius: 10px;
    position: relative;
}

.form-vehicle .select-styled {
    flex: 1;
    padding: 9px 20px;
    border-radius: 10px;
    background-color: var(--white);
    width: 100%;
    color: var(--dark-blue);
    font: var(--font-text);
    letter-spacing: var(--letter-3);
    box-shadow: 0 4px 8px rgba(20, 46, 62, 0.2);
    z-index: 1000;
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding-right: 40px;
    height: 100%;
    justify-content: space-between;
}

.form-vehicle .select-styled::after {
    content: "";
    background: url("data:image/svg+xml;charset=UTF-8,%3csvg width='16' height='10' viewBox='0 0 16 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M15 1.59998L8 8.59998L1 1.59998' stroke='%23142E3E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e ");
    width: 16px;
    height: 10px;
    position: absolute;
    right: 16px;
    transition: .3s;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.form-vehicle .select-styled.active::after {
    transform: scale(-1);
}

.form-vehicle .select-styled.disabled {
    cursor: not-allowed;
    pointer-events: all !important;
    opacity: 0.5;
    z-index: 0;
}

/* === OPTIONS === */
.form-vehicle .select-options {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: 999;
    margin: 0;
    padding: 0;
    list-style: none;
    background-color: var(--white);
    padding-top: 16px;
    padding-bottom: 8px;
    margin-top: -10px;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 8px rgba(20, 46, 62, 0.2);
    max-height: 400px;
    overflow-y: auto;
}

.form-vehicle .select-options li {
    margin: 0;
    padding: 4px 20px;
    transition: all 0.15s ease-in;
    background: var(--white);
    transition: .3s;
    font: var(--font-text);
    letter-spacing: var(--letter-2);
    color: var(--dark-blue);
    cursor: pointer;
}

.form-vehicle .select-options li:hover {
    background: var(--mid-blue);
}

.form-vehicle .select-options li[rel="hide"] {
    display: none;
}
#vehicle-selected .close {
    opacity: 1;
    position: absolute;
    top: -10px;
    right: -10px;
}
@media (max-width: 1500px) {
    .form-vehicle form {
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 20px;
    }

    .form-vehicle .select {
        min-width: 300px;
    }
}

#my-vehicule .name {
    white-space: nowrap;
    text-overflow: ellipsis;
}

.form-vehicle form {
    max-width: 1920px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    width: 100%;
}
.form-vehicle .bouton-select-vehicle:disabled {
    opacity: 0.5;
    cursor: not-allowed!important;
    pointer-events: all !important;
}
/* =============================================
   FORM-VEHICLE — Grid layout
   Grille 3 colonnes desktop
   ============================================= */

/* Ligne 1 : Marque | Modèle | Version (pas dans ce fichier CSS,
   ils sont positionnés naturellement par le flux) */

/* Sans caractéristiques : date 2 cols, bouton col 3 */
.form-vehicle .select-date           { grid-area: 2 / 1 / 3 / 2; }
.form-vehicle .bouton-select-vehicle { grid-area: 2 / 3 / 3 / 4; justify-content: center; }

/* Dès qu'au moins une carac est visible : date réduite à 1 colonne */
.form-vehicle form:is(.has-predisposition, .has-capacite, .has-dimensions, .has-oppening-back) .select-date {
    grid-area: 2 / 1 / 3 / 2;
}

/* ── Caractéristique seule ── */
.form-vehicle form.has-predisposition .select-predisposition { grid-area: 2 / 2 / 3 / 3; }
.form-vehicle form.has-capacite       .select-capacite       { grid-area: 2 / 2 / 3 / 3; }
.form-vehicle form.has-dimensions     .select-dimensions     { grid-area: 2 / 2 / 3 / 3; }
.form-vehicle form.has-oppening-back  .select-oppening-back  { grid-area: 2 / 2 / 3 / 3; }

/* ── 2 caractéristiques ── */
/* predispo + capacite */
.form-vehicle form.has-predisposition.has-capacite .select-predisposition { grid-area: 2 / 2 / 3 / 3; }
.form-vehicle form.has-predisposition.has-capacite .select-capacite       { grid-area: 2 / 3 / 3 / 4; }

/* predispo + dimensions */
.form-vehicle form.has-predisposition.has-dimensions .select-predisposition { grid-area: 2 / 2 / 3 / 3; }
.form-vehicle form.has-predisposition.has-dimensions .select-dimensions      { grid-area: 2 / 3 / 3 / 4; }

/* predispo + oppening-back */
.form-vehicle form.has-predisposition.has-oppening-back .select-predisposition { grid-area: 2 / 2 / 3 / 3; }
.form-vehicle form.has-predisposition.has-oppening-back .select-oppening-back  { grid-area: 2 / 3 / 3 / 4; }

/* capacite + dimensions */
.form-vehicle form.has-capacite.has-dimensions:not(.has-predisposition) .select-capacite   { grid-area: 2 / 2 / 3 / 3; }
.form-vehicle form.has-capacite.has-dimensions:not(.has-predisposition) .select-dimensions { grid-area: 2 / 3 / 3 / 4; }

/* capacite + oppening-back */
.form-vehicle form.has-capacite.has-oppening-back:not(.has-predisposition) .select-capacite      { grid-area: 2 / 2 / 3 / 3; }
.form-vehicle form.has-capacite.has-oppening-back:not(.has-predisposition) .select-oppening-back { grid-area: 2 / 3 / 3 / 4; }

/* dimensions + oppening-back */
.form-vehicle form.has-dimensions.has-oppening-back:not(.has-predisposition):not(.has-capacite) .select-dimensions    { grid-area: 2 / 2 / 3 / 3; }
.form-vehicle form.has-dimensions.has-oppening-back:not(.has-predisposition):not(.has-capacite) .select-oppening-back { grid-area: 2 / 3 / 3 / 4; }

/* ── 3 caractéristiques : row 2 = col2+col3, row 3 = col1, bouton = row3 col2-4 ── */
/* predispo + capacite + dimensions */
.form-vehicle form.has-predisposition.has-capacite.has-dimensions:not(.has-oppening-back) .select-predisposition { grid-area: 2 / 2 / 3 / 3; }
.form-vehicle form.has-predisposition.has-capacite.has-dimensions:not(.has-oppening-back) .select-capacite       { grid-area: 2 / 3 / 3 / 4; }
.form-vehicle form.has-predisposition.has-capacite.has-dimensions:not(.has-oppening-back) .select-dimensions     { grid-area: 3 / 1 / 4 / 2; }

/* predispo + capacite + oppening-back */
.form-vehicle form.has-predisposition.has-capacite.has-oppening-back:not(.has-dimensions) .select-predisposition { grid-area: 2 / 2 / 3 / 3; }
.form-vehicle form.has-predisposition.has-capacite.has-oppening-back:not(.has-dimensions) .select-capacite       { grid-area: 2 / 3 / 3 / 4; }
.form-vehicle form.has-predisposition.has-capacite.has-oppening-back:not(.has-dimensions) .select-oppening-back  { grid-area: 3 / 1 / 4 / 2; }

/* predispo + dimensions + oppening-back */
.form-vehicle form.has-predisposition.has-dimensions.has-oppening-back:not(.has-capacite) .select-predisposition { grid-area: 2 / 2 / 3 / 3; }
.form-vehicle form.has-predisposition.has-dimensions.has-oppening-back:not(.has-capacite) .select-dimensions     { grid-area: 2 / 3 / 3 / 4; }
.form-vehicle form.has-predisposition.has-dimensions.has-oppening-back:not(.has-capacite) .select-oppening-back  { grid-area: 3 / 1 / 4 / 2; }

/* capacite + dimensions + oppening-back */
.form-vehicle form.has-capacite.has-dimensions.has-oppening-back:not(.has-predisposition) .select-capacite      { grid-area: 2 / 2 / 3 / 3; }
.form-vehicle form.has-capacite.has-dimensions.has-oppening-back:not(.has-predisposition) .select-dimensions    { grid-area: 2 / 3 / 3 / 4; }
.form-vehicle form.has-capacite.has-dimensions.has-oppening-back:not(.has-predisposition) .select-oppening-back { grid-area: 3 / 1 / 4 / 2; }

/* ── 4 caractéristiques ── */
.form-vehicle form.has-predisposition.has-capacite.has-dimensions.has-oppening-back .select-predisposition { grid-area: 2 / 2 / 3 / 3; }
.form-vehicle form.has-predisposition.has-capacite.has-dimensions.has-oppening-back .select-capacite       { grid-area: 2 / 3 / 3 / 4; }
.form-vehicle form.has-predisposition.has-capacite.has-dimensions.has-oppening-back .select-dimensions     { grid-area: 3 / 1 / 4 / 2; }
.form-vehicle form.has-predisposition.has-capacite.has-dimensions.has-oppening-back .select-oppening-back  { grid-area: 3 / 2 / 4 / 3; }

/* ── Bouton Valider ── */
/* 0 ou 1 carac : col 3, row 2 */
.form-vehicle .bouton-select-vehicle { grid-area: 2 / 2 / 3 / 3; }
.form-vehicle form.has-capacite .bouton-select-vehicle { grid-area: 2 / 3 / 3 / 3; }
.form-vehicle form.has-dimensions .bouton-select-vehicle { grid-area: 2 / 3 / 3 / 3; }
.form-vehicle form.has-oppening-back .bouton-select-vehicle { grid-area: 2 / 3 / 3 / 3; }
.form-vehicle form.has-predisposition .bouton-select-vehicle { grid-area: 2 / 3 / 3 / 3; }

/* 2 caracs : les 2 occupent col2+col3 → bouton pleine largeur row 3 */
.form-vehicle form:is(
    .has-predisposition.has-capacite,
    .has-predisposition.has-dimensions,
    .has-predisposition.has-oppening-back,
    .has-capacite.has-dimensions,
    .has-capacite.has-oppening-back,
    .has-dimensions.has-oppening-back
):not(.has-predisposition.has-capacite.has-dimensions):not(
    .has-predisposition.has-capacite.has-oppening-back
):not(
    .has-predisposition.has-dimensions.has-oppening-back
):not(
    .has-capacite.has-dimensions.has-oppening-back
):not(
    .has-predisposition.has-capacite.has-dimensions.has-oppening-back
) .bouton-select-vehicle {
    grid-area: 3 / 2 / 4 / 3;
}

/* 3 caracs : la 3e carac est en col1 row3 → bouton col2-4 row3 */
.form-vehicle form.has-predisposition.has-capacite.has-dimensions:not(.has-oppening-back) .bouton-select-vehicle,
.form-vehicle form.has-predisposition.has-capacite.has-oppening-back:not(.has-dimensions) .bouton-select-vehicle,
.form-vehicle form.has-predisposition.has-dimensions.has-oppening-back:not(.has-capacite) .bouton-select-vehicle,
.form-vehicle form.has-capacite.has-dimensions.has-oppening-back:not(.has-predisposition) .bouton-select-vehicle {
    grid-area: 3 / 2 / 4 / 4;
}

/* 4 caracs : row 3 col1+col2 occupées → bouton col3 row3 */
.form-vehicle form.has-predisposition.has-capacite.has-dimensions.has-oppening-back .bouton-select-vehicle {
    grid-area: 3 / 3 / 4 / 4;
}

/* =============================================
   BREAKPOINT TABLETTE ≤1024px — 2 colonnes
   Ligne 1 : Marque | Modèle
   Ligne 2 : Version | Date
   Ligne 3 : Prédispo | Capacité
   Ligne 4 : Dimensions | Ouverture
   Ligne 5 : Bouton (pleine largeur)
   ============================================= */
@media (max-width: 1024px) {
    .form-vehicle form {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Row 1 : naturellement positionnés */

    /* Row 2 : Version col1, Date col2 */
    /* (Version est le 3e select natif, Date le 4e → on les force) */
    .form-vehicle .select-version { grid-area: 2 / 1 / 3 / 2; }
    .form-vehicle .select-date    { grid-area: 2 / 2 / 3 / 3; }

    /* Sans caractéristiques : bouton en row 3 */
    .form-vehicle form:not(.has-predisposition):not(.has-capacite):not(.has-dimensions):not(.has-oppening-back) .bouton-select-vehicle {
        grid-area: 
        3 / 1 / 4 / 3;
    }
    .form-vehicle form:is(.has-predisposition, .has-capacite, .has-dimensions, .has-oppening-back) .select-date {
        grid-area: 2 / 2 / 3 / 3;
    }
    
    .form-vehicle form:is( .has-predisposition.has-capacite, .has-predisposition.has-dimensions, .has-predisposition.has-oppening-back, .has-capacite.has-dimensions, .has-capacite.has-oppening-back, .has-dimensions.has-oppening-back ):not(.has-predisposition.has-capacite.has-dimensions):not( .has-predisposition.has-capacite.has-oppening-back ):not( .has-predisposition.has-dimensions.has-oppening-back ):not( .has-capacite.has-dimensions.has-oppening-back ):not( .has-predisposition.has-capacite.has-dimensions.has-oppening-back ) .bouton-select-vehicle {
        grid-area: 4 / 1 / 4 / 3;
    }

    .form-vehicle form.has-predisposition.has-capacite.has-dimensions:not(.has-oppening-back) .select-predisposition,
    .form-vehicle form.has-predisposition.has-capacite.has-dimensions.has-oppening-back .select-predisposition,
    .form-vehicle form.has-capacite.has-dimensions.has-oppening-back:not(.has-predisposition) .select-capacite,
    .form-vehicle form.has-dimensions .select-dimensions,
    .form-vehicle form.has-dimensions.has-oppening-back:not(.has-predisposition):not(.has-capacite) .select-dimensions,
    .form-vehicle form.has-predisposition.has-dimensions.has-oppening-back:not(.has-capacite) .select-predisposition,
    .form-vehicle form.has-predisposition .select-predisposition,
    .form-vehicle form.has-predisposition.has-capacite.has-oppening-back:not(.has-dimensions) .select-predisposition,
    .form-vehicle form.has-capacite .select-capacite {
        grid-area: 3 / 1 / 3 / 2;
    }
    .form-vehicle form.has-predisposition.has-capacite.has-dimensions:not(.has-oppening-back) .select-capacite,
    .form-vehicle form.has-predisposition.has-capacite.has-dimensions.has-oppening-back .select-capacite,
    .form-vehicle form.has-capacite.has-dimensions.has-oppening-back:not(.has-predisposition) .select-dimensions,
    .form-vehicle .bouton-select-vehicle,
    .form-vehicle form.has-dimensions.has-oppening-back:not(.has-predisposition):not(.has-capacite) .select-oppening-back,
    .form-vehicle form.has-predisposition.has-dimensions.has-oppening-back:not(.has-capacite) .select-dimensions,
    .form-vehicle form.has-predisposition.has-capacite.has-oppening-back:not(.has-dimensions) .select-capacite {
        grid-area: 3 / 2 / 3 / 3;
    }
    .form-vehicle form.has-predisposition.has-capacite.has-dimensions:not(.has-oppening-back) .select-dimensions,
    .form-vehicle form.has-predisposition.has-capacite.has-dimensions.has-oppening-back .select-dimensions,
    .form-vehicle form.has-capacite.has-dimensions.has-oppening-back:not(.has-predisposition) .select-oppening-back,
    .form-vehicle form.has-predisposition.has-dimensions.has-oppening-back:not(.has-capacite) .select-oppening-back,
    .form-vehicle form.has-predisposition.has-capacite.has-oppening-back:not(.has-dimensions) .select-oppening-back {    
        grid-area: 4 / 1 / 4 / 2;
    }
    .form-vehicle form.has-predisposition.has-capacite.has-dimensions:not(.has-oppening-back) .bouton-select-vehicle,
    .form-vehicle form.has-predisposition.has-capacite.has-dimensions.has-oppening-back .select-oppening-back,
    .form-vehicle form.has-capacite.has-dimensions.has-oppening-back:not(.has-predisposition) .bouton-select-vehicle,
    .form-vehicle form.has-predisposition.has-dimensions.has-oppening-back:not(.has-capacite) .bouton-select-vehicle,
    .form-vehicle form.has-predisposition.has-capacite.has-oppening-back:not(.has-dimensions) .bouton-select-vehicle {
        grid-area: 4 / 2 / 4 / 3;
    }
    .form-vehicle form.has-predisposition.has-capacite.has-dimensions.has-oppening-back .bouton-select-vehicle {
        grid-area: 5 / 1 / 5 / 3;
    }
}

/* =============================================
   BREAKPOINT MOBILE ≤768px — 1 colonne
   Tout empilé verticalement
   ============================================= */
@media (max-width: 768px) {
    .form-vehicle form {
        display: flex;
        gap: 25px;
    }
}

.form-vehicle .select-styled i svg {
    width: 15px;
    position: absolute;
    height: 15px;
    top: 50%;
    right: 0;
    bottom: 0;
    transform: translate(0, -50%);
}

.infobulle {
  cursor: help;
  position: relative;
}

/* on génère un élément :after lors du survol et du focus :*/

.infobulle:hover::after,
.infobulle:focus::after {
    content: attr(aria-label);  /* on affiche aria-label */
    position: absolute;
    top: -2.4em;
    left: 50%;
    transform: translateX(-50%); /* on centre horizontalement  */
    z-index: 1; /* pour s'afficher au dessus des éléments en position relative */
        /* white-space: nowrap; */
    background: var(--white);
    border-radius: 10px;
    padding: 5px;
    width: 300px;
    top: inherit;
    bottom: -54px;
}

.select-vehicle-complete .container-content .content .vehicle-infos.hidden {
    display: none;
}