/*==================================================
WEBBA BOOKING
Mountain Strong Steamboat
==================================================*/
body {

    background: #F3F1EC;

}

h1 {
    font-size: .8rem;
    padding-bottom: 20px;
}

.section {
    padding: 5rem 0;
}

img {
    width: auto;
}

button.back-top.visible{
    display: none;
}

/*==========================================
BOOKING HEADER
==========================================*/

header.site-header.scrolled {
    background: var(--sand);
    border-bottom: none;
}

.site-header {

    position: static;
}

.site-header .container.booking-header {

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: .75rem;

    padding: 0;


}

.booking-brand {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

}


.booking-header .logo {

    display: inline-flex;
    outline: none;

}

.site-header .booking-header .logo {

    display: inline-block;

    margin-bottom: .5rem;

}


.booking-header .logo img {

    width: 180px;

    height: auto;

}

.header-phone {

    font-size: 23px;

    font-weight: 600;

    color: var(--charcoal);

    text-decoration: none;

    transition: .3s;

    padding-bottom: 10px;


}

.header-phone:hover {

    color: var(--primary-dark);

}


.footer-brand p {

    padding-top: 10px;
}

.footer-contact {

    display: flex;

    flex-direction: column;

}


.footer-grid {
    align-items: flex-end;
}

@media (max-width: 992px) {
    .section {
        padding: 2rem 0;
    }
}



/*==================================================
Container
==================================================*/

.wbk-booking-form,
.wbk-wrapper,
.wbk_container,
.wbk_service_container {

    max-width: 1100px;

    margin: 0 auto;

}


/*==================================================
Typography
==================================================*/

.wbk-booking-form,
.wbk-booking-form * {

    font-family: inherit;

    color: var(--charcoal);

}


/*==================================================
Cards
==================================================*/

.wbk-booking-form {

    background: #fff;

    border: 1px solid var(--border);

    border-radius: var(--radius-large);

    padding: 3rem;

}


/*==================================================
Inputs
==================================================*/

.wbk-booking-form input,
.wbk-booking-form textarea,
.wbk-booking-form select {

    width: 100%;

    padding: 1rem 1.25rem;

    border: 1px solid var(--border);

    border-radius: var(--radius);

    background: #fff;

    transition: .3s;

    font: inherit;

}


.wbk-booking-form input:focus,
.wbk-booking-form textarea:focus,
.wbk-booking-form select:focus {

    outline: none;

    border-color: var(--primary);

}


/*==================================================
Buttons
==================================================*/

.wbk-booking-form button,
.wbk-booking-form input[type="submit"],
.wbk-booking-form .wbk-button {

    background: var(--primary);

    color: #fff;

    border: none;

    border-radius: 999px;

    padding: 1rem 2.25rem;

    font-weight: 700;

    cursor: pointer;

    transition: .35s;

}


.wbk-booking-form button:hover,
.wbk-booking-form input[type="submit"]:hover,
.wbk-booking-form .wbk-button:hover {

    background: var(--primary-dark);

    transform: translateY(-2px);

}


/*==================================================
Calendar
==================================================*/

.wbk-calendar {

    border: 1px solid var(--border);

    border-radius: var(--radius-large);

    overflow: hidden;

}


.wbk-day:hover {

    background: var(--sand);

}


.wbk-selected {

    background: var(--primary) !important;

    color: #fff !important;

}


/*==================================================
Time Slots
==================================================*/

.wbk-slot {

    border: 1px solid var(--border);

    border-radius: 999px;

    transition: .3s;

}


.wbk-slot:hover {

    border-color: var(--primary);

}


.wbk-slot-selected {

    background: var(--primary) !important;

    color: #fff !important;

}


/*==================================================
Messages
==================================================*/

.wbk-message {

    padding: 1rem 1.25rem;

    border-radius: var(--radius);

    background: var(--sand);

    border-left: 4px solid var(--primary);

}


/*==================================================
Responsive
==================================================*/

@media(max-width:768px) {

    .wbk-booking-form {

        padding: 2rem;

    }

}