body.booking-open {
	overflow: hidden;
}

.booking-button {
    width: fit-content;
    margin: 0 auto;
    display: block;
    letter-spacing: 1px;
    padding: 0.418047em 1.41575em;
    font-size: 1.2em;
    border-radius: 20px;
    background: linear-gradient(0deg, #8dc3cf59 0%, #68c5db4f 22%, #68c5db 100%), linear-gradient(90deg, #68c5db, transparent);
    color: #02182b;
    text-shadow: 1px 1px 4px #ffffff;
    box-shadow: inset -7px -10px 21px -6px #39cef1, inset 34px 10px 21px -6px #d7f0f6, 2px 1px 15px -7px #02182b;
    border: 1px solid #c7eff9;
    filter: invert(1) hue-rotate(-171deg) brightness(2.3) drop-shadow(2px 2px 6px rgb(0,0,0,0.7));
}

button.booking-button:hover {
    filter: invert(1) hue-rotate(-171deg) brightness(2.4) drop-shadow(2px 2px 7px rgb(0,0,0,0.7));
    background: linear-gradient(0deg, #8dc3cf59 0%, #68c5db4f 22%, #68c5db 100%), linear-gradient(90deg, #68c5db, transparent);
    border: 1px solid #c7eff9;
}

#booking-modal {
    position: fixed;
    top:0; left:0;
    width:100%; height:100%;
    background: rgba(0,0,0,0.5);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:10001;
}

.modal-content {
    max-height: 100%;
    overflow: auto;
	position:relative;
    background:#fff;
    padding:20px;
    width:400px;
    border-radius:8px;
	border: 1px solid #4e4e4e;
}

.step {
    margin-top:15px;
}

#close-modal {
    position: absolute;
    top: 20px;
    right: 20px;
    border-radius: 20px;
    background: #c9e2e8;
    border: 1px solid #00ade7;
    box-shadow: inset 1px 1px 1px #4a4a4a;
    font-size: 22px;
    font-weight: 700;
    padding: 0px 13px;
}

#close-modal span {
    display: block;
    transform: scale(1.5, 0.8);
}

.booking-modal-title {
    font-size: 24px;
    margin-bottom: 10px;
    font-weight: 600;
}

.therapy-btn, .slot-btn {
    border-radius: 8px;
    background: #a2dae8;
    border: 1px solid #00ade7;
    box-shadow: inset 1px 1px 1px #4a4a4a, 2px 2px 6px #e4e4e4;
    font-size: 17px;
    padding: 2px 14px;
    margin: 4px 4px;
}

button.therapy-btn:hover, button.slot-btn:hover {
    background: #c9e2e8;
    border: 1px solid #00ade7;
    box-shadow: inset 1px 1px 1px #4a4a4a, 3px 3px 6px #e4e4e4;
}

.booking-navigation-buttons {
    padding-top: 16px;
    display: flex;
    justify-content: space-between;
}

button.back, button.next {
    border-radius: 8px;
    background: #c9e2e8;
    border: 1px solid #00ade7;
    box-shadow: inset 1px 1px 1px #4a4a4a;
    font-size: 17px;
    padding: 3px 13px;
}

.modal-content input[type="date"] {
    border: 1px solid #00ade7;
    border-radius: 8px;
    padding: 2px 14px;
    font-size: 17px;
}

.modal-content #summary, .modal-content #confirmation-summary {
    padding: 10px;
    border: 1px solid #00ade782;
    margin: 26px 0 8px;
    border-radius: 8px;
}

.modal-content #summary p, .modal-content #confirmation-summary p {
    margin-top: 3px;
    margin-bottom: 0;
    line-height: 21px;
}

.modal-content .text {
    border: 1px solid #00ade7;
    padding: 8px;
    border-radius: 8px;
    margin-bottom: 7px;
}

.modal-content .block {
	display:block;
}

.modal-content .block input[type="checkbox"] {
    transform: scale(1.5);
    margin-left: 3px;
    margin-right: 6px;
}

.email-note {
    font-size: 85%;
    display: block;
    line-height: 18px;
    margin: 6px 0;
}

#book-btn {
    width: fit-content;
    display: block;
    letter-spacing: 1px;
    padding: 0.418047em 1.41575em;
    font-size: 1.2em;
    border-radius: 20px;
    background: linear-gradient(0deg, #8dc3cf59 0%, #68c5db4f 22%, #68c5db 100%), linear-gradient(90deg, #68c5db, transparent);
    color: #02182b;
    text-shadow: 1px 1px 4px #ffffff;
    box-shadow: inset -7px -10px 21px -6px #39cef1, inset 34px 10px 21px -6px #d7f0f6, 2px 1px 15px -7px #02182b;
    border: 1px solid #c7eff9;
    filter: invert(1) hue-rotate(-171deg) brightness(2.3) drop-shadow(2px 2px 6px rgb(0,0,0,0.7));
}

#booking-error {
	color:red;
}

.slot-btn {
    width: 100%;
}

.slot-btn.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.flatpickr-month-notice {
    padding: 10px 12px;
    text-align: center;
    font-size: 14px;
    color: #666;
    border-top: 1px solid #eee;
    background: #fafafa;
}