/* CSS de correction pour le formulaire de réservation */
.booking-form-field {
    display: inline-block;
    width: 45% !important;
    padding: 10px !important;
    margin: 10px !important;
    vertical-align: top;
    box-sizing: border-box;
}

.booking-form-group {
    width: 100%;
    clear: both;
    margin-bottom: 20px !important;
    display: block !important;
}

.booking-form-field label {
    display: block;
    margin-bottom: 10px !important;
    font-weight: bold;
}

.booking-form-field input,
.booking-form-field select {
    width: 100% !important;
    padding: 10px !important;
    box-sizing: border-box;
}

/* Force le débordement à être visible */
.wptotem-cplx-booking-container {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    padding: 20px !important;
}

/* Classe pour champs pleine largeur */
.full-width {
    width: 94% !important;
}

/* Résout les problèmes sur mobile */
@media (max-width: 768px) {
    .booking-form-field {
        width: 100% !important;
        display: block;
    }
}

/* STYLES POUR GARANTIR LA VISIBILITÉ DES BOUTONS SANS TROP MODIFIER LE THÈME */

/* Boutons de sélection de date - Contraste amélioré */
.wptotem-cplx-booking-container .date-select-btn {
    /* Propriétés essentielles pour la visibilité */
    background-color: #f8f8f8;
    border: 1px solid #ddd;
    color: #333333;
    /* Autres propriétés qui peuvent s'adapter au thème */
    padding: 10px 15px;
    margin-bottom: 8px;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    display: block;
    width: 100%;
    min-height: 24px; /* Hauteur minimale pour éviter l'écrasement */
}

.wptotem-cplx-booking-container .date-select-btn:hover {
    background-color: #ececec;
    border-color: #aaa;
}

.wptotem-cplx-booking-container .date-select-btn.selected {
    /* Ces propriétés doivent être préservées pour indiquer la sélection */
    background-color: #20376C !important;
    color: white !important;
    border-color: #20376C !important;
    font-weight: bold;
}

/* Créneaux horaires - Contraste amélioré sans écraser le thème */
.wptotem-cplx-booking-container .slot-item {
    /* Propriétés essentielles pour la visibilité */
    background-color: #f8f8f8;
    border: 1px solid #ddd;
    color: #333;
    /* Autres propriétés qui peuvent s'adapter au thème */
    padding: 10px 15px;
    margin-bottom: 8px;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    display: block;
    position: relative;
    min-height: 40px; /* Hauteur minimale pour éviter l'écrasement */
}

.wptotem-cplx-booking-container .slot-item:hover:not(.unavailable) {
    background-color: #ececec;
    border-color: #aaa;
}

.wptotem-cplx-booking-container .slot-item.selected {
    /* Ces propriétés doivent être préservées pour indiquer la sélection */
    background-color: #20376C !important;
    color: white !important;
    border-color: #20376C !important;
    font-weight: bold;
}

.wptotem-cplx-booking-container .slot-item.unavailable {
    background-color: #e9e9e9;
    color: #999;
    border-color: #ddd;
    cursor: not-allowed;
    opacity: 0.7;
}

/* Styles spécifiques pour le texte à l'intérieur des créneaux */
.wptotem-cplx-booking-container .slot-time {
    color: inherit;
    display: block;
    margin-bottom: 4px;
}

.wptotem-cplx-booking-container .slot-item.selected .slot-time {
    color: white !important; /* Important pour garantir la lisibilité */
}

.wptotem-cplx-booking-container .slot-item .slot-places {
    display: block;
    color: inherit;
}

/* Bouton retour */
.wptotem-cplx-booking-container .back-button {
    background-color: #f0f0f0;
    color: #333;
    border: 1px solid #ddd;
    padding: 8px 14px;
    margin-bottom: 15px;
    cursor: pointer;
}