:root {
    --blue: #0e57ae;
    --blue-deep: #083f88;
    --blue-soft: #eaf3fb;
    --green: #6f8e50;
    --green-deep: #58783c;
    --gold: #f3ad2c;
    --ink: #24313f;
    --muted: #5f6d7c;
    --line: #dce7ef;
    --cream: #fffaf1;
    --white: #fff;

    --serif: Georgia, "Times New Roman", serif;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, Helvetica, sans-serif;
}


/* ---------------------------------------------------------
   BASE
--------------------------------------------------------- */

html,
body {
    background: #fff !important;
}

body {
    color: var(--ink) !important;
    font-family: var(--sans) !important;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

#main {
    background:
        linear-gradient(180deg, #fff 0%, #fff 78%, #f3f8fc 100%);
    padding-top: 32px;
    padding-bottom: 32px;
}


/* ---------------------------------------------------------
   MAIN BOOKING PANEL
--------------------------------------------------------- */

#book-appointment-wizard {
    background: #fff !important;
    border: 1px solid var(--line);
    border-radius: 9px !important;
    box-shadow: none !important;
}


/* ---------------------------------------------------------
   HEADER
--------------------------------------------------------- */

#header {
    background: #fff !important;
    color: var(--ink) !important;

    border-bottom: 1px solid rgba(220,231,239,.85);

    padding-top: 25px !important;
    padding-bottom: 25px !important;
}

#company-name {
    color: var(--blue-deep) !important;
    font-family: var(--sans) !important;
}

#company-name > span {
    color: var(--blue-deep) !important;

    font-family: var(--serif) !important;
    font-size: 1.55rem !important;
    font-weight: 400 !important;

    letter-spacing: -.01em;
}

#company-logo {
    max-height: 70px !important;
    width: auto !important;
}

.display-booking-selection {
    color: var(--green-deep) !important;
    font-family: var(--sans) !important;
}


/* ---------------------------------------------------------
   STEP INDICATORS
--------------------------------------------------------- */

#steps .book-step {
    border-radius: 50% !important;
    box-shadow: none !important;
}

#steps .active-step {
    background: var(--blue) !important;
    border: 1px solid var(--blue) !important;
}

#steps .active-step strong {
    color: #fff !important;
}

#steps .book-step:not(.active-step) {
    background: #fff !important;
    border: 1px solid var(--line) !important;
}

#steps .book-step:not(.active-step) strong {
    color: var(--blue) !important;
}


/* ---------------------------------------------------------
   TITLES
--------------------------------------------------------- */

.frame-title {
    color: var(--blue-deep) !important;

    font-family: var(--serif) !important;
    font-weight: 400 !important;

    position: relative;
    padding-bottom: 14px;
}

.frame-title::after {
    content: "";
    display: block;

    width: 42px;
    height: 2px;

    margin: 12px auto 0;

    background: var(--gold);
    border-radius: 2px;
}


/* ---------------------------------------------------------
   CONTENT
--------------------------------------------------------- */

.wizard-frame {
    background: #fff !important;
}

.frame-content,
.form-label,
.form-check-label {
    color: var(--ink);
    font-family: var(--sans);
}

.text-muted {
    color: var(--muted) !important;
}


/* ---------------------------------------------------------
   FORM CONTROLS
--------------------------------------------------------- */

.form-control,
.form-select {
    min-height: 44px;

    background-color: #fff !important;

    border: 1px solid var(--line) !important;
    border-radius: 8px !important;

    color: var(--ink) !important;

    font-family: var(--sans) !important;

    box-shadow: none !important;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--blue) !important;

    box-shadow:
        0 0 0 3px rgba(14,87,174,.10) !important;
}


/* ---------------------------------------------------------
   BUTTONS
--------------------------------------------------------- */

.btn {
    border-radius: 8px !important;

    font-family: var(--sans) !important;
    font-weight: 500 !important;

    transition:
        transform .16s ease,
        box-shadow .16s ease,
        background .16s ease !important;
}


/* Primary / next */

.btn-primary,
.btn-dark,
.button-next,
#book-appointment-submit {
    background: var(--blue) !important;
    border-color: var(--blue) !important;

    color: #fff !important;

    box-shadow:
        0 6px 14px rgba(14,87,174,.18) !important;
}

.btn-primary:hover,
.btn-dark:hover,
.button-next:hover,
#book-appointment-submit:hover {
    background: var(--blue-deep) !important;
    border-color: var(--blue-deep) !important;

    color: #fff !important;

    transform: translateY(-1px);

    box-shadow:
        0 8px 18px rgba(14,87,174,.24) !important;
}


/* Previous / secondary */

.button-back,
.btn-outline-secondary {
    background: #fff !important;

    color: var(--green-deep) !important;

    border: 1.5px solid var(--green) !important;

    box-shadow: none !important;
}

.button-back:hover,
.btn-outline-secondary:hover {
    background: #f8fbf5 !important;

    color: var(--green-deep) !important;

    border-color: var(--green) !important;

    transform: translateY(-1px);
}


/* ---------------------------------------------------------
   SERVICES / PROVIDERS
--------------------------------------------------------- */

#select-service,
#select-provider {
    background-color: #fff !important;
}


/* ---------------------------------------------------------
   AVAILABLE TIME BUTTONS
--------------------------------------------------------- */

#available-hours .btn {
    background: #fff !important;

    color: var(--blue) !important;

    border: 1px solid var(--line) !important;

    box-shadow: none !important;
}

#available-hours .btn:hover {
    background: var(--blue-soft) !important;

    color: var(--blue-deep) !important;

    border-color: var(--blue) !important;
}

#available-hours .btn-primary,
#available-hours .selected-hour {
    background: var(--blue) !important;

    color: #fff !important;

    border-color: var(--blue) !important;
}


/* ---------------------------------------------------------
   CALENDAR
--------------------------------------------------------- */

.flatpickr-calendar {
    font-family: var(--sans) !important;

    border: 1px solid var(--line) !important;
    border-radius: 9px !important;

    box-shadow: none !important;
}

.flatpickr-months .flatpickr-month,
.flatpickr-current-month,
.flatpickr-weekdays {
    background: #fff !important;
    color: var(--blue-deep) !important;
}

span.flatpickr-weekday {
    background: #fff !important;
    color: var(--green-deep) !important;
}

.flatpickr-day {
    border-radius: 50% !important;
}

.flatpickr-day:hover {
    background: var(--blue-soft) !important;
    border-color: var(--blue-soft) !important;
}

.flatpickr-day.today {
    border-color: var(--gold) !important;
    color: var(--blue-deep) !important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: var(--blue) !important;

    border-color: var(--blue) !important;

    color: #fff !important;
}


/* ---------------------------------------------------------
   LINKS + ACCENTS
--------------------------------------------------------- */

a {
    color: var(--blue);
}

a:hover {
    color: var(--blue-deep);
}

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


/* ---------------------------------------------------------
   FOOTER
--------------------------------------------------------- */

#frame-footer {
    background: #fff !important;

    border-top: 1px solid var(--line) !important;

    color: var(--muted);
}

#frame-footer .badge.bg-primary,
.backend-link {
    background: var(--blue) !important;
}


/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 767px) {

    #main {
        padding: 0;
        background: #fff;
    }

    #book-appointment-wizard {
        border-radius: 0 !important;
        border-left: 0;
        border-right: 0;
    }

    #header {
        padding-top: 22px !important;
        padding-bottom: 20px !important;
    }

    #company-logo {
        max-height: 64px !important;
    }
}

/* Final Villavie refinements */

#book-appointment-wizard {
    box-shadow: 0 8px 24px rgba(26,67,105,.10) !important;
}

/* White Villavie-style header */
#header {
    background: #fff !important;
}

#company-name,
#company-name > span {
    color: var(--blue-deep) !important;
}

#company-name > span {
    font-family: var(--serif) !important;
}

.display-booking-selection {
    color: var(--green-deep) !important;
}

/* Booking steps */
#steps .active-step {
    background: var(--blue) !important;
    border-color: var(--blue) !important;
}

#steps .active-step strong {
    color: #fff !important;
}

#steps .book-step:not(.active-step) {
    background: var(--blue-soft) !important;
    border-color: var(--line) !important;
}

#steps .book-step:not(.active-step) strong {
    color: var(--blue) !important;
}

/* Main booking title */
.frame-title {
    color: var(--blue-deep) !important;
    font-family: var(--serif) !important;
    font-weight: 400 !important;
}

/* Exact Villavie primary blue */
.bg-primary,
.btn-primary,
.btn-dark,
.button-next,
#book-appointment-submit,
#available-hours .btn-primary,
#available-hours .selected-hour {
    background-color: var(--blue) !important;
    border-color: var(--blue) !important;
}

/* No raised button styling */
.btn,
.btn-primary,
.btn-dark,
.button-next,
.button-back,
#book-appointment-submit,
#available-hours .btn {
    box-shadow: none !important;
}

/* Villavie green back button */
.button-back,
.btn-outline-secondary {
    background: #fff !important;
    color: var(--green-deep) !important;
    border: 1.5px solid var(--green) !important;
}

/* Calendar */
.flatpickr-months .flatpickr-month,
.flatpickr-weekdays,
span.flatpickr-weekday {
    background: var(--blue) !important;
    color: #fff !important;
}

.flatpickr-day.selected {
    background: var(--blue) !important;
    border-color: var(--blue) !important;
}

/* Gold accent under section titles */
.frame-title::after {
    background: var(--gold) !important;
}

/* Fix Easy!Appointments primary header specificity */
#header.bg-primary {
    background: #fff !important;
    background-color: #fff !important;
}

#header #company-name,
#header #company-name > span {
    color: var(--blue-deep) !important;
}

#header .display-booking-selection {
    color: var(--green-deep) !important;
}

/* Clean up calendar month header */
.flatpickr-current-month,
.flatpickr-current-month input.cur-year,
.flatpickr-current-month .flatpickr-monthDropdown-months {
    background: var(--blue) !important;
    color: #fff !important;
    border: 0 !important;
}

/* Override Easy!Appointments company-color rules */
#book-appointment-wizard #header {
    background: #fff !important;
    background-color: #fff !important;
}

#book-appointment-wizard #company-name,
#book-appointment-wizard #company-name > span {
    color: var(--blue-deep) !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: var(--green-deep) !important;
    border-right-color: var(--green-deep) !important;
}