.bootstrap-datetimepicker-widget.dropdown-menu {
    max-width: 550px;
    width: 100%;
    padding: 15px !important;
    border-radius: var(--border-radius-base);
}

.bootstrap-datetimepicker-widget table.table-condensed {
    width: 100%;
}

.timepicker .btn {
    width: 100% !important;
}

.datepicker-days th.prev,
.datepicker-days th.picker-switch,
.datepicker-days th.next {
    padding-bottom: 10px;
}

.datepicker-days th.dow {
    padding-bottom: 0 !important;
    padding: 5px 0 !important;
    font-weight: 700;
    text-transform: capitalize;
    text-align: center;
}

th.picker-switch {
    text-align: center;
    text-transform: capitalize;
}

.bootstrap-datetimepicker-widget table td.active, .bootstrap-datetimepicker-widget table td.active:hover {
    background-color: var(--color-primary) !important;
    color: var(--color-white) !important;
    border-radius: 0;
}

.timepicker {
    display: grid;
    align-items: center;
}

.timepicker .btn {
    width: 100% !important;
    background: #eee;
    border-radius: 8px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.timepicker-picker table tr td {
    text-align: center;
}

.timepicker-picker table tr td span.timepicker-hour,
.timepicker-picker table tr td span.timepicker-minute {
    display: inline-block;
    text-align: center;
    padding: 5px 0;
    width: 100%;
    box-sizing: content-box;
}

.timepicker-picker span {
    font-size: 20px !important;
}

.timepicker p.title_heure {
    text-align: center;
    margin-bottom: 10px;
}

.timepicker-picker span {
    font-size: 20px !important;
    background: transparent !important;
    line-height: 25px !important;
    height: 25px !important;
}

.bootstrap-datetimepicker-widget table td {
    height: inherit !important;
    line-height: inherit !important;
    width: inherit !important;
}

span.timepicker-minute {
    padding-bottom: 35px;
    padding-top: 14px;
}

.datepicker-days td.day {
    background: #eee;
    border-radius: 0 !important;
    width: 14.2857143% !important;
    padding: 6px 0px;
    text-align: center;
}

.datepicker-days td.day.weekend {
    background: #ddd !important;
}

.custom-control {
    min-height: 2.4rem;
}

.bootstrap-datetimepicker-widget.dropdown-menu.usetwentyfour.timepicker-sbs.bottom {
    top: 44px !important;
}

.datepicker-days th.prev, .datepicker-days th.picker-switch, .datepicker-days th.next {
    padding-bottom: 0 !important;
    padding: 6px 0 !important;
}

.datepicker-days th.prev, .datepicker-days th.next {
    background: #eee;
    border-radius: 8px;
    cursor: pointer;
}

.datepicker-days th.prev span, .datepicker-days th.next span {
    text-align: center;
    display: block;
}

/* ===== Customisations injectées par JS (label contextuel + bouton Suivant/Confirmer) ===== */
.bootstrap-datetimepicker-widget .resa-dp-label {
    text-align: center;
    font-family: "Poppins", sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 22px 8px 14px;       /* aligne ~avec la 1ère ligne de chiffres du calendrier */
}

.bootstrap-datetimepicker-widget table tr td.td-inner,
.bootstrap-datetimepicker-widget .timepicker {
    vertical-align: top;
}

.bootstrap-datetimepicker-widget .resa-dp-next {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 12px;
    padding: 10px 18px;
    background: var(--color-primary, #0d6efd);
    color: #ffffff !important;
    border: 0;
    border-radius: 10px;
    font-family: "Poppins", sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--color-primary, #0d6efd) 25%, transparent);
}
.bootstrap-datetimepicker-widget .resa-dp-next:hover {
    background: var(--color-primary-hover, #0a58ca);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--color-primary, #0d6efd) 35%, transparent);
}
.bootstrap-datetimepicker-widget .resa-dp-next svg { flex-shrink: 0; }


/* Force sideBySide layout when Bootstrap CSS is not loaded (Tailwind / competitor page) */
.bootstrap-datetimepicker-widget.timepicker-sbs .row {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;        /* étire les colonnes à la même hauteur */
    gap: 8px;
    margin: 0;
}
.bootstrap-datetimepicker-widget.timepicker-sbs .col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 0;
    display: flex;
    flex-direction: column;       /* permet d'aligner les enfants verticalement */
}
.bootstrap-datetimepicker-widget.timepicker-sbs .col-md-6 + .col-md-6 {
    border-left: 1px solid #e2e8f0;
    padding-left: 8px;
}

/* Le bouton "Suivant/Confirmer" se cale en bas de la colonne timepicker */
.bootstrap-datetimepicker-widget.timepicker-sbs .col-md-6 .resa-dp-next,
.bootstrap-datetimepicker-widget table tr td.td-inner .resa-dp-next {
    margin-top: auto;             /* push to bottom */
}