/**
 * Styles pour le formulaire de recherche de vans
 * Charte graphique: Primary #1F374A, Secondary #F9B022, Text #1F374A
 */

.cvpm-recherche-form-container {
    width: 100%;
}

.cvpm-recherche-form {
}

.cvpm-form-row {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
}

.cvpm-form-field {
    flex: 1;
    width:25%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

.cvpm-form-field-dates {
    flex: 2;
    width: 50%;
    border-left: 1px solid rgba(31, 55, 74, 0.3);
}

.cvpm-form-field label {
    font-weight: 600;
    margin-bottom: 10px;
    color: #1F374A;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cvpm-form-field select,
.cvpm-form-field input[type="text"] {
    padding: 8px 16px 8px 45px;
    border: none;
    font-size: 20px!important;
    font-weight: 600!important;
    color: var(--e-global-color-primary)!important;
    transition: all 0.3s ease;
    outline: none;
}

.cvpm-form-field select:focus,
.cvpm-form-field input[type="text"]:focus {
    outline: none;
    background: #fff;
}

/* Icône pour le sélecteur d'agence */
.cvpm-form-field:has(#cvpm-agence)::before {
    content: '';
    position: absolute;
    left: 12px;
    bottom: 9px;
    width: 30px;
    height: 30px;
    background-image: url('../img/place.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    z-index: 1;
}

/* Icône pour le sélecteur de dates range */
.cvpm-form-field-dates::before {
    content: '';
    position: absolute;
    left: 9px;
    bottom: 9px;
    width: 30px;
    height: 30px;
    background-image: url('../img/calendar.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    z-index: 1;
}

.cvpm-form-submit {
    flex: 0 0 auto;
    min-width: auto;
    padding-right: 10px
}

.cvpm-btn {
    padding: 7px 14px!important;
    background: var(--e-global-color-primary)!important;
    color: white;
    border: none!important;
    font-size: 17px!important;
    font-weight: 700!important;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    text-transform: uppercase!important;
    letter-spacing: 0.5px!important;
}

.cvpm-btn:hover:not(:disabled) {
    opacity: 0.6;
}

.cvpm-btn:disabled, .cvpm-btn:hover {
    opacity: 0.7;
    cursor: not-allowed;
    background: var(--e-global-color-primary)!important;
}

/* Modal personnalisée pour les alertes */
.cvpm-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(31, 55, 74, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    animation: cvpmFadeIn 0.2s ease forwards;
}

@keyframes cvpmFadeIn {
    to {
        opacity: 1;
    }
}

.cvpm-modal {
    background: #fff;
    border-radius: 12px;
    padding: 30px;
    max-width: 450px;
    width: 90%;
    box-shadow: 0 10px 30px rgba(31, 55, 74, 0.3);
    border: 3px solid #F9B022;
    transform: scale(0.9);
    animation: cvpmScaleIn 0.2s ease forwards;
}

@keyframes cvpmScaleIn {
    to {
        transform: scale(1);
    }
}

.cvpm-modal-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 20px;
    background: #F9B022;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
}

.cvpm-modal-title {
    color: #1F374A;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 15px;
    text-align: center;
}

.cvpm-modal-message {
    color: #1F374A;
    font-size: 16px;
    line-height: 1.6;
    text-align: center;
    margin-bottom: 25px;
}

.cvpm-modal-btn {
    width: 100%;
    padding: 14px 20px;
    background: #1F374A;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cvpm-modal-btn:hover {
    background: #2a4c66;
    transform: translateY(-1px);
}

/* Responsive */
@media (max-width: 768px) {
    .cvpm-form-row {
        flex-direction: row;
        flex-wrap: wrap;
    }

    /* Agence sur la première ligne (100% de largeur) */
    .cvpm-form-field:has(#cvpm-agence) {
        width: 100%;
        flex: 0 0 100%;
        border-bottom: 1px solid rgba(31, 55, 74, 0.3);
        margin-bottom: 3px;
    }

    /* Le champ de dates range sur la deuxième ligne (100%) */
    .cvpm-form-field-dates {
        width: 100%;
        flex: 0 0 100%;
        border-bottom: 1px solid rgba(31, 55, 74, 0.3);
        margin-bottom: 3px;
    }

    /* Bouton sur la troisième ligne (100% de largeur) */
    .cvpm-form-submit {
        width: 100%;
        flex: 0 0 100%;
    }

    .cvpm-btn {
        width: 100%;
        margin: 5px 0;
    }

    .cvpm-form-field-dates {
        border-left: 0;
    }
}

/* Override flatpickr styles pour meilleure intégration avec la charte */
.flatpickr-calendar {
    font-family: inherit;
    box-shadow: 0 4px 12px rgba(31, 55, 74, 0.2);
    border: 2px solid #1F374A;
    border-radius: 8px;
}

.flatpickr-day.disabled,
.flatpickr-day.disabled:hover {
    color: #ccc !important;
    cursor: not-allowed !important;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover {
    background: #F9B022 !important;
    border-color: #F9B022 !important;
    color: #1F374A !important;
}

.flatpickr-day:hover {
    background: rgba(249, 176, 34, 0.2) !important;
    border-color: #F9B022 !important;
}

.flatpickr-day.today {
    border-color: #1F374A !important;
}

.flatpickr-months .flatpickr-month {
    background: #1F374A !important;
}
.flatpickr-current-month{
    padding: 3px 0;
}

.flatpickr-prev-month,.flatpickr-next-month{
    padding: 8px 10px!important;
}
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
    font-weight: 600;
    color: white !important;
}

.flatpickr-weekday {
    color: #F9B022;
    font-weight: 600;
}

.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
    fill: white !important;
    transition: all 0.3s ease-in-out;
}
.flatpickr-months .flatpickr-prev-month:hover svg{
    transform: translateX(-3px);
}

.flatpickr-months .flatpickr-next-month:hover svg {
    transform: translateX(3px);
}
.flatpickr-calendar.arrowTop:before{
    border: 0px !important;
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+Cjxzdmcgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDgwMCA4MDAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM6c2VyaWY9Imh0dHA6Ly93d3cuc2VyaWYuY29tLyIgc3R5bGU9ImZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoyOyI+CiAgICA8ZyB0cmFuc2Zvcm09Im1hdHJpeCg1MCwwLDAsNTAsLTQwMCwtMjM0Ljc1KSI+CiAgICAgICAgPHBhdGggZD0iTTgsMjAuNjk1TDE1Ljk5Nyw5LjMwNUwyNCwyMC42OTVMOCwyMC42OTVaIiBzdHlsZT0iZmlsbDpyZ2IoMzEsNTUsNzQpO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpyZ2IoMzEsNTUsNzQpO3N0cm9rZS13aWR0aDowLjAycHg7Ii8+CiAgICA8L2c+Cjwvc3ZnPgo=);
    width: 16px;
    height: 14px;
    background-size: contain;
    background-position: bottom center;
    background-repeat: no-repeat;
}

.flatpickr-calendar.arrowTop:after{
    display: none;
}

/* Jours fériés, jours off et weekends en orange (texte seulement) */
.flatpickr-day.cvpm-jour-ferie,
.flatpickr-day.cvpm-jour-off,
.flatpickr-day.cvpm-weekend {
    color: #FFA500 !important;
    font-weight: 700 !important;
}

.flatpickr-day.cvpm-jour-ferie:hover,
.flatpickr-day.cvpm-jour-off:hover,
.flatpickr-day.cvpm-weekend:hover {
    background: rgba(249, 176, 34, 0.2) !important;
    border-color: #F9B022 !important;
    color: #1F374A !important;
}

/* Si le jour est sélectionné */
.flatpickr-day.cvpm-jour-ferie.selected,
.flatpickr-day.cvpm-jour-off.selected,
.flatpickr-day.cvpm-weekend.selected {
    background: #F9B022 !important;
    color: #1F374A !important;
    border-color: #F9B022 !important;
}

.flatpickr-day.cvpm-jour-ferie.startRange,
.flatpickr-day.cvpm-jour-ferie.endRange,
.flatpickr-day.cvpm-jour-off.startRange,
.flatpickr-day.cvpm-jour-off.endRange,
.flatpickr-day.cvpm-weekend.startRange,
.flatpickr-day.cvpm-weekend.endRange {
    background: #F9B022 !important;
    color: #1F374A !important;
    border-color: #F9B022 !important;
}

.flatpickr-day.cvpm-jour-ferie.inRange,
.flatpickr-day.cvpm-jour-off.inRange,
.flatpickr-day.cvpm-weekend.inRange {
    background: rgba(249, 176, 34, 0.1) !important;
    color: #FFA500 !important;
}

/* Légende du calendrier */
.flatpickr-calendar .cvpm-calendar-legend {
    padding: 10px 15px;
    background: #f8f9fa;
    border-top: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.flatpickr-calendar .cvpm-calendar-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.flatpickr-calendar .cvpm-calendar-legend-color {
    color: #FFA500;
    font-weight: 700;
    font-size: 14px;
}