/**
 * Habillage Fast Dictate : noir et blanc, typographie du site, tout tient sans defilement.
 *
 * Charge apres frontend.css dans application/views/layouts/booking_layout.php.
 * Le noir vient du reglage "company color" ; cette feuille corrige ce que ce reglage ne
 * peut pas faire seul (contrastes devenus illisibles en noir pur, logo par defaut,
 * mise en page qui empile date et horaires) et fait disparaitre le chrome
 * Easy!Appointments dans l'iframe de /fr/demo.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@400;500;600&display=swap');

:root {
    --fd-encre: #000000;
    --fd-papier: #FAF7F0;
    --fd-trait: rgba(0, 0, 0, 0.14);
}

/* --- Cadre general ------------------------------------------------------- */

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
    /* Blanc et non creme : le moindre pixel non couvert par le calendrier se verrait
       dans le cadre blanc de la page de reservation. */
    background-color: #ffffff !important;
    background-image: none !important;
    margin: 0 !important;
}

/* min-vh-100 d'origine : dans une iframe, la page ferait toujours la hauteur du cadre,
   qui ne pourrait donc jamais retrecir. */
#main.container {
    max-width: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
}

#main .row.wrapper {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

#book-appointment-wizard {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #ffffff !important;
}

/* --- En-tete ------------------------------------------------------------- */

#header {
    background-color: var(--fd-encre) !important;
    border-color: var(--fd-encre) !important;
    padding: 0.85rem 1.25rem !important;
}

/* Le logo par defaut d'Easy!Appointments n'a rien a faire ici ; le nom suffit. */
#header #company-logo {
    display: none !important;
}

#company-name {
    font-family: 'Playfair Display', serif;
    margin: 0 !important;
}

/* En noir pur, les variations calculees a partir de la couleur de marque restent
   noires : sans ces regles, les numeros d'etape sont noirs sur noir. */
#book-appointment-wizard .book-step {
    background: rgba(255, 255, 255, 0.22) !important;
}

#book-appointment-wizard .book-step strong {
    color: #ffffff !important;
}

#book-appointment-wizard .book-step.active-step {
    background: #ffffff !important;
}

#book-appointment-wizard .book-step.active-step strong {
    color: var(--fd-encre) !important;
}

#book-appointment-wizard #company-name .display-selected-service,
#book-appointment-wizard #company-name .display-selected-provider,
#book-appointment-wizard #company-name .display-booking-selection {
    color: rgba(255, 255, 255, 0.72) !important;
    border-right-color: rgba(255, 255, 255, 0.3) !important;
}

/* --- Compacite : tout doit tenir dans le cadre --------------------------- */

.wizard-frame {
    padding: 1rem 1.25rem !important;
}

.frame-container {
    min-height: 0 !important;
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
}

.frame-title {
    font-size: 1.05rem !important;
    margin-bottom: 0.9rem !important;
}

/* Bootstrap n'aligne date et horaires qu'a partir de 992 px. Dans une iframe plus
   etroite, les deux s'empilent et il faut faire defiler pour reserver. */
@media (min-width: 680px) {
    #wizard-frame-2 .frame-content > .col-12 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}

#wizard-frame-2 #select-date {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
}

#wizard-frame-2 #select-time {
    padding-top: 0.25rem !important;
}

/* Fuseau horaire masque : les rendez-vous se prennent a l'heure de Paris. */
#select-timezone,
label[for="select-timezone"] {
    display: none !important;
}

#select-time > .mb-3:first-child {
    margin-bottom: 0 !important;
}

/* Horaires sur deux colonnes : la liste d'origine est etroite et demande de defiler. */
#wizard-frame-2 #select-time {
    max-width: none !important;
}

#available-hours {
    max-height: none !important;
    overflow: visible !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 0.25rem !important;
    padding-right: 0 !important;
}

#book-appointment-wizard #available-hours .available-hour {
    margin-bottom: 0 !important;
}

#available-hours #select-hour-prompt {
    grid-column: 1 / -1;
    margin-bottom: 0 !important;
}

/* Une seule prestation et un seul intervenant : Easy!Appointments saute la premiere
   etape, le compteur d'etapes n'a plus rien a compter. */
#steps {
    display: none !important;
}

.command-buttons {
    margin-top: 0.75rem !important;
    margin-bottom: 0.75rem !important;
}

/* --- Boutons ------------------------------------------------------------- */

.btn-primary,
.btn-dark,
.btn-primary:disabled,
.btn-dark:disabled {
    background: var(--fd-encre) !important;
    background-image: none !important;
    border-color: var(--fd-encre) !important;
    color: #ffffff !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active {
    background: #2a2a2a !important;
    border-color: #2a2a2a !important;
    color: #ffffff !important;
}

.btn-outline-primary {
    background: transparent !important;
    border-color: var(--fd-encre) !important;
    color: var(--fd-encre) !important;
    box-shadow: none !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background: var(--fd-encre) !important;
    border-color: var(--fd-encre) !important;
    color: #ffffff !important;
}

.btn-outline-secondary,
.btn-secondary {
    background: transparent !important;
    background-image: none !important;
    border-color: var(--fd-trait) !important;
    color: var(--fd-encre) !important;
    box-shadow: none !important;
}

.btn-outline-secondary:hover,
.btn-secondary:hover {
    background: rgba(0, 0, 0, 0.05) !important;
    border-color: var(--fd-encre) !important;
    color: var(--fd-encre) !important;
}

.btn:focus-visible {
    outline: 2px solid var(--fd-encre) !important;
    outline-offset: 2px;
    box-shadow: none !important;
}

/* --- Champs -------------------------------------------------------------- */

.form-control,
.form-select {
    border-color: var(--fd-trait) !important;
    border-radius: 8px !important;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--fd-encre) !important;
    box-shadow: none !important;
}

.form-check-input:checked {
    background-color: var(--fd-encre) !important;
    border-color: var(--fd-encre) !important;
}

.form-check-input:focus {
    border-color: var(--fd-encre) !important;
    box-shadow: none !important;
}

/* --- Calendrier ---------------------------------------------------------- */

.flatpickr-calendar {
    box-shadow: none !important;
    border: 1px solid var(--fd-trait) !important;
}

/* Bandeau du mois : noir, texte blanc. Le selecteur de mois garde sinon le fond
   noir de la couleur de marque avec un texte noir, donc invisible hors survol. */
.flatpickr-calendar .flatpickr-months,
.flatpickr-calendar .flatpickr-months .flatpickr-month,
.flatpickr-calendar .flatpickr-weekdays,
.flatpickr-calendar span.flatpickr-weekday,
.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months {
    background: var(--fd-encre) !important;
    color: #ffffff !important;
    fill: #ffffff !important;
}

.flatpickr-calendar .flatpickr-current-month input.cur-year,
.flatpickr-calendar .flatpickr-current-month span.cur-month {
    color: #ffffff !important;
}

.flatpickr-calendar .flatpickr-monthDropdown-months option {
    background: #ffffff !important;
    color: var(--fd-encre) !important;
}

.flatpickr-calendar .flatpickr-monthDropdown-months:hover {
    background: rgba(255, 255, 255, 0.14) !important;
}

.flatpickr-calendar .flatpickr-prev-month svg,
.flatpickr-calendar .flatpickr-next-month svg {
    fill: #ffffff !important;
}

.flatpickr-calendar .flatpickr-prev-month:hover svg,
.flatpickr-calendar .flatpickr-next-month:hover svg {
    fill: rgba(255, 255, 255, 0.7) !important;
}

.flatpickr-day:hover:not(.flatpickr-disabled) {
    background: rgba(0, 0, 0, 0.06) !important;
    border-color: transparent !important;
}

.flatpickr-day.today {
    border-color: var(--fd-encre) !important;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: var(--fd-encre) !important;
    border-color: var(--fd-encre) !important;
    color: #ffffff !important;
}

/* --- Creneaux horaires --------------------------------------------------- */

#available-hours .available-hour {
    border: 1px solid var(--fd-trait) !important;
    border-radius: 8px !important;
    color: var(--fd-encre) !important;
    padding: 0.5rem 0.4rem !important;
}

#available-hours .available-hour:hover {
    border-color: var(--fd-encre) !important;
    background: rgba(0, 0, 0, 0.04) !important;
}

#book-appointment-wizard #available-hours .selected-hour {
    background-color: var(--fd-encre) !important;
    border-color: var(--fd-encre) !important;
    color: #ffffff !important;
}

/* --- Pied de cadre ------------------------------------------------------- */

/* Ne restait dans ce pied que la marque Easy!Appointments et un selecteur de langue
   inutile sur une page francaise. */
#frame-footer {
    display: none !important;
}

#frame-footer .backend-link {
    background-color: var(--fd-encre) !important;
    border-color: var(--fd-encre) !important;
}

/* --- Liens --------------------------------------------------------------- */

a {
    color: var(--fd-encre);
}

a:hover {
    color: #2a2a2a;
}