.sp-calendar-product {
    margin: 20px auto;
    max-width: min-content;
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 20px;
    flex-wrap: nowrap;
    border-radius: 30px;
}

.booking-group {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 1;
}

.date-input, .time-select {
    padding: 14px !important;
    border: 1px solid #ddd;
    font-size: 16px;
    margin: 5px;
    border-radius: 5px !important;
}

.date-input {
    width: 180px;
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='2.25' y='4.5' width='13.5' height='11.25' rx='2' stroke='%23888' stroke-width='1.5'/%3E%3Cpath d='M5.25 2.25V5.25' stroke='%23888' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M12.75 2.25V5.25' stroke='%23888' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M2.25 7.5H15.75' stroke='%23888' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px 18px;
}

.time-select {
    width: 90px !important;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 30px;
    font-size: 16px;
    color: #000;
    padding: 14px;
    /* background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23888' stroke-width='2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    */
    background-size: 12px 8px;
}

#book_now {
    min-width: fit-content;
    flex: 0 0 auto;
    padding: 15px 25px;
    background-color: #000000;
    color: #ffffff;
    border: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    transition: background-color 0.3s ease;
    margin: 0;
    white-space: nowrap;
}

#book_now:hover {
    background-color: #005177;
}

/* Responsive styles */
@media (max-width: 768px) {
    .sp-calendar-product {
        flex-direction: column;
        align-items: center;
        max-width: 100%;
        padding: 20px 10px;
    }

    .booking-group {
        width: 100%;
        gap: 8px;
    }

    .date-input,
    .time-select {
        width: 100%;
        max-width: 100%;
        margin: 0;
        box-sizing: border-box;
    }

    #book_now {
        width: 100%;
        max-width: 100%;
        margin: 10px 0 0 0;
    }
}

/* Styles spécifiques pour le calendrier Flatpickr */
.sp-flatpickr-calendar {
    z-index: 999999 !important;
    position: absolute !important;
    box-shadow: 0 3px 13px rgba(0,0,0,0.2) !important;
}

.flatpickr-calendar {
    z-index: 999999 !important;
    position: absolute !important;
    box-shadow: 0 3px 13px rgba(0,0,0,0.2) !important;
}

/* --- En-tête mois/année ---
   Le thème (Kadence/WooCommerce) applique ses styles globaux de <select> et <input>
   (padding, hauteur, bordure, fond...) au menu déroulant du mois et au champ de l'année.
   Ces contrôles deviennent trop hauts et débordent de la zone du mois (34px, overflow caché),
   ce qui chevauche la ligne des jours de la semaine. On rétablit ici les styles natifs de
   Flatpickr en !important pour neutraliser ces surcharges quelle que soit leur spécificité. */
.flatpickr-calendar .flatpickr-months {
    display: flex !important;
    align-items: center !important;
}

.flatpickr-calendar .flatpickr-months .flatpickr-month {
    height: 34px !important;
    line-height: 1 !important;
    overflow: hidden !important;
}

.flatpickr-calendar .flatpickr-current-month {
    height: 34px !important;
    padding: 7.48px 0 0 0 !important;
    font-size: 135% !important;
    line-height: 1 !important;
    font-weight: 300 !important;
}

.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-calendar .flatpickr-current-month input.cur-year {
    height: auto !important;
    min-height: 0 !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 0 0 0.5ch !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    font-size: inherit !important;
    font-family: inherit !important;
    font-weight: 300 !important;
    line-height: inherit !important;
    color: inherit !important;
    vertical-align: initial !important;
}

.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months {
    -webkit-appearance: menulist !important;
    -moz-appearance: menulist !important;
    appearance: menulist !important;
    cursor: pointer !important;
}

.flatpickr-calendar .flatpickr-current-month input.cur-year {
    -webkit-appearance: textfield !important;
    -moz-appearance: textfield !important;
    appearance: textfield !important;
}

.flatpickr-calendar .flatpickr-current-month .numInputWrapper {
    width: 7ch !important;
    display: inline-block !important;
    vertical-align: initial !important;
}

.flatpickr-calendar .flatpickr-months .flatpickr-prev-month,
.flatpickr-calendar .flatpickr-months .flatpickr-next-month {
    height: 34px !important;
    padding: 10px !important;
    background: transparent !important;
    border: 0 !important;
}

/* S'assurer que le calendrier est au-dessus des éléments Kadence */
.kt-modal,
.kt-modal-content,
.kt-modal-overlay,
.kt-modal-container {
    z-index: 999998 !important;
}

/* Styles pour le calendrier sur mobile */
@media (max-width: 768px) {
    .flatpickr-calendar,
    .sp-flatpickr-calendar {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 90% !important;
        max-width: 320px !important;
        margin: 0 !important;
    }

    .flatpickr-calendar .flatpickr-months,
    .flatpickr-calendar .flatpickr-weekdays,
    .flatpickr-calendar .flatpickr-days {
        width: 100% !important;
    }

    .flatpickr-calendar .flatpickr-day {
        height: 40px !important;
        line-height: 40px !important;
    }
}