/* FlairFly - selettori data/ora: stessi colori e forme delle form (rame; rosso nella form preventivo) */
.ffb-form, .ffx { --ffp: #c57a4a; --ffp-dark: #a86744; --ffp-soft: #f6efe9; --ffp-ink: #233e49; accent-color: var(--ffp); }

/* il calendario sta sopra la sezione successiva ma sotto menu/header: z-index 1 sulla form (contesto locale), nessun z-index alto */
.ffb-form, .ffx { position: relative; z-index: 1; }
.ffb-form .flatpickr-calendar.open, .ffx .flatpickr-calendar.open { z-index: 2; }
.ffx-quote { --ffp: #F95353; --ffp-dark: #DB3232; --ffp-soft: #fdeaea; }

.ffb-form .flatpickr-wrapper, .ffx .flatpickr-wrapper { display: block; width: 100%; position: relative; }
.ffb-form input.flatpickr-input[readonly], .ffx input.flatpickr-input[readonly] { cursor: pointer; }

/* calendario */
.ffb-form .flatpickr-calendar, .ffx .flatpickr-calendar {
    font-family: inherit; border-radius: 12px; border: 1px solid #d3dbe0; box-shadow: 0 10px 24px rgba(20, 35, 45, .14); color: var(--ffp-ink);
}
.ffb-form .flatpickr-calendar:before, .ffb-form .flatpickr-calendar:after, .ffx .flatpickr-calendar:before, .ffx .flatpickr-calendar:after { display: none; }
.ffb-form .flatpickr-months .flatpickr-month, .ffx .flatpickr-months .flatpickr-month,
.ffb-form .flatpickr-current-month, .ffx .flatpickr-current-month { color: var(--ffp-ink); fill: var(--ffp-ink); }
.ffb-form .flatpickr-current-month .flatpickr-monthDropdown-months, .ffx .flatpickr-current-month .flatpickr-monthDropdown-months { font-weight: 600; }
.ffb-form span.flatpickr-weekday, .ffx span.flatpickr-weekday { color: var(--ffp-ink); font-weight: 600; background: transparent; }
.ffb-form .flatpickr-months .flatpickr-prev-month, .ffb-form .flatpickr-months .flatpickr-next-month,
.ffx .flatpickr-months .flatpickr-prev-month, .ffx .flatpickr-months .flatpickr-next-month { color: var(--ffp-ink); fill: var(--ffp-ink); }
.ffb-form .flatpickr-months .flatpickr-prev-month:hover svg, .ffb-form .flatpickr-months .flatpickr-next-month:hover svg,
.ffx .flatpickr-months .flatpickr-prev-month:hover svg, .ffx .flatpickr-months .flatpickr-next-month:hover svg { fill: var(--ffp); }
.ffb-form .flatpickr-day, .ffx .flatpickr-day { color: var(--ffp-ink); border-radius: 8px; }
.ffb-form .flatpickr-day:hover, .ffb-form .flatpickr-day:focus, .ffx .flatpickr-day:hover, .ffx .flatpickr-day:focus { background: var(--ffp-soft); border-color: var(--ffp-soft); }
.ffb-form .flatpickr-day.today, .ffx .flatpickr-day.today { border-color: var(--ffp); }
.ffb-form .flatpickr-day.today:hover, .ffx .flatpickr-day.today:hover { background: var(--ffp-soft); color: var(--ffp-ink); }
.ffb-form .flatpickr-day.selected, .ffb-form .flatpickr-day.selected:hover, .ffb-form .flatpickr-day.selected:focus,
.ffx .flatpickr-day.selected, .ffx .flatpickr-day.selected:hover, .ffx .flatpickr-day.selected:focus { background: var(--ffp); border-color: var(--ffp); color: #fff; }
.ffb-form .flatpickr-day.flatpickr-disabled, .ffb-form .flatpickr-day.flatpickr-disabled:hover,
.ffx .flatpickr-day.flatpickr-disabled, .ffx .flatpickr-day.flatpickr-disabled:hover { color: #b9c3c8; background: transparent; border-color: transparent; }
.ffb-form .flatpickr-day.prevMonthDay, .ffb-form .flatpickr-day.nextMonthDay, .ffx .flatpickr-day.prevMonthDay, .ffx .flatpickr-day.nextMonthDay { color: #aab6bc; }

/* orologio */
.ffb-form .flatpickr-time, .ffx .flatpickr-time { border-top-color: #e3e8ea; }
.ffb-form .flatpickr-time input, .ffb-form .flatpickr-time .flatpickr-time-separator, .ffb-form .flatpickr-time .flatpickr-am-pm,
.ffx .flatpickr-time input, .ffx .flatpickr-time .flatpickr-time-separator, .ffx .flatpickr-time .flatpickr-am-pm { color: var(--ffp-ink); font-weight: 600; }
.ffb-form .flatpickr-time input:hover, .ffb-form .flatpickr-time input:focus, .ffx .flatpickr-time input:hover, .ffx .flatpickr-time input:focus { background: var(--ffp-soft); }
.ffb-form .numInputWrapper:hover, .ffx .numInputWrapper:hover { background: var(--ffp-soft); }
.ffb-form .numInputWrapper span.arrowUp:after, .ffx .numInputWrapper span.arrowUp:after { border-bottom-color: var(--ffp); }
.ffb-form .numInputWrapper span.arrowDown:after, .ffx .numInputWrapper span.arrowDown:after { border-top-color: var(--ffp); }

/* niente celeste: selezione, riempimento automatico e segmenti dei campi data/ora nativi (se la libreria non c'e') */
.ffb-form ::selection, .ffx ::selection { background: var(--ffp-soft); color: var(--ffp-ink); }
.ffb-form input:-webkit-autofill, .ffb-form input:-webkit-autofill:hover, .ffb-form input:-webkit-autofill:focus,
.ffx input:-webkit-autofill, .ffx input:-webkit-autofill:hover, .ffx input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #fff inset !important; box-shadow: 0 0 0 1000px #fff inset !important; -webkit-text-fill-color: var(--ffp-ink) !important; transition: background-color 9999s;
}
.ffb-form input::-webkit-datetime-edit-day-field:focus, .ffb-form input::-webkit-datetime-edit-month-field:focus, .ffb-form input::-webkit-datetime-edit-year-field:focus,
.ffb-form input::-webkit-datetime-edit-hour-field:focus, .ffb-form input::-webkit-datetime-edit-minute-field:focus, .ffb-form input::-webkit-datetime-edit-ampm-field:focus,
.ffx input::-webkit-datetime-edit-day-field:focus, .ffx input::-webkit-datetime-edit-month-field:focus, .ffx input::-webkit-datetime-edit-year-field:focus,
.ffx input::-webkit-datetime-edit-hour-field:focus, .ffx input::-webkit-datetime-edit-minute-field:focus, .ffx input::-webkit-datetime-edit-ampm-field:focus { background: var(--ffp-soft); color: var(--ffp-ink); outline: none; }