/* Floating labels: the label lies inside the field like a placeholder and moves
   above the field as soon as it is focused or filled.
   The fields carry placeholder=" " because the moved state is detected via :placeholder-shown. */

.planning-support-form .floating-label {
    display: block;
    position: relative;
    /* the top margin keeps room for the moved label */
    margin: 24px 0 10px;
}

/* input and textarea are not styled alike by the browser, so both get the same
   font here - style.css only sets a font size on textareas */
.planning-support-form .floating-label input[type="text"],
.planning-support-form .floating-label input[type="email"],
.planning-support-form .floating-label textarea,
.planning-support-form input[type="file"] {
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
    line-height: 1.4em;
}

.planning-support-form .floating-label input[type="text"],
.planning-support-form .floating-label input[type="email"],
.planning-support-form .floating-label textarea {
    margin-bottom: 0;
}

.planning-support-form .floating-label label {
    position: absolute;
    /* resting position: the fields are padded with 13px, so the label sits right
       on the text content - centered in the input, on the first line in the
       textarea - and reads like a placeholder */
    top: 13px;
    left: 13px;
    font-size: 15px;
    line-height: 1.4em;
    color: #767676;
    /* clicks have to reach the field below */
    pointer-events: none;
    transition: top 0.15s ease-out, left 0.15s ease-out, font-size 0.15s ease-out;
}

/* moved position: above the field */
.planning-support-form .floating-label input[type="text"]:focus + label,
.planning-support-form .floating-label input[type="text"]:not(:placeholder-shown) + label,
.planning-support-form .floating-label input[type="email"]:focus + label,
.planning-support-form .floating-label input[type="email"]:not(:placeholder-shown) + label,
.planning-support-form .floating-label textarea:focus + label,
.planning-support-form .floating-label textarea:not(:placeholder-shown) + label {
    top: -19px;
    left: 0;
    font-size: 11px;
}

/* Appointment booking: calendar on the left, the slots of the chosen day next to it */

.planning-support-booking {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin: 24px 0 20px;
}

/* flatpickr keeps the target element as an anchor and inserts the calendar as its
   next sibling, so the anchor itself is only in the way here */
.planning-support-booking .booking-calendar {
    display: none;
}

.planning-support-booking .flatpickr-calendar.inline {
    margin-right: 40px;
}

/* the slot column keeps the width of the calendar instead of filling the rest
   of the row, otherwise the buttons end up much wider than the calendar sheet */
.planning-support-booking .booking-slots {
    flex: 0 0 210px;
    display: flex;
    flex-direction: column;
    /* same height as the calendar sheet */
    height: 307px;
}

.planning-support-booking .booking-hint {
    font-size: 15px;
    color: #767676;
    margin: 0 0 10px;
}

.planning-support-booking .booking-error {
    color: #cc0000;
}

/* long slot lists scroll instead of stretching the layout */
.planning-support-booking .booking-slot-list {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
    overflow-y: auto;
}

.planning-support-booking .booking-slot-list li {
    margin-bottom: 8px;
}

.planning-support-booking .booking-slot {
    width: 100%;
    background-color: #e2e2e2;
    border: 0;
    padding: 13px;
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
    text-align: left;
    cursor: pointer;
    -webkit-appearance: none;
}

.planning-support-booking .booking-slot:hover {
    background-color: #d2d2d2;
}

.planning-support-booking .booking-slot.is-selected {
    background-color: #0e3a63;
    color: #ffffff;
}

/* flatpickr in the colours of the form */

.planning-support-booking .flatpickr-calendar.inline {
    box-shadow: none;
    background-color: #e2e2e2;
}

.planning-support-booking .flatpickr-day.selected,
.planning-support-booking .flatpickr-day.selected:hover {
    background: #0e3a63;
    border-color: #0e3a63;
}

/* response of the product database after sending the form */
.planning-support-result.form-error,
.planning-support-result .form-error {
    color: #cc0000;
}

/* file fields have no placeholder, their label stays above the field */
.planning-support-form .file-label label {
    display: block;
    font-size: 11px;
    color: #767676;
    margin-bottom: 5px;
}