/*
This file describes the popup styles
 */
.popup{
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(52, 124, 190, 0.6);
    backdrop-filter: blur(5px);
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: var(--main-font);
    z-index: 5
}
.popup__content{
    margin: 15px;
    position: relative
}

.popup .close{
    position: absolute;
    top: 8px;
    right: 8px;
    cursor: pointer
}
.popup.none{
    display: none
}
.popup form{
    background-color: var(--main-color)
}
.popup form input:not(input[type="checkbox"]), .popup form textarea, select{
    width: 100%
}
.popup form a{
    color: var(--white);
    font-weight: 700
}
.popup-subtitle{
    color: var(--main-color);
    font-size: 3rem;
    font-weight: 400;
    line-height: 4.5rem;
    margin-bottom: 35px
}
.popup-book-now-content{
    display: flex
}
.popup-book-now-content >div{
    width: 50%;
    max-width: 728px
}
.popup-book-now-content >div:first-child{
    padding: 123px 80px 105px
}
.popup-book-now-content >div:last-child{
    padding: 123px 33px 105px
}
.popup-book-now-content h2, .popup-thank-you .text p{
    line-height: normal
}
.popup-book-now-content.popup-thank-you .text p{
    margin-top: 0
}
.popup-book-now-content .text .short-line, .popup-book-now-content .text p{
    margin-top: 50px
}
.popup-book-now-content .text{
    background-color: var(--white)
}
.popup-book-now-content .form{
    background-color: var(--main-color)
}
.popup-book-now-content form{
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 12px
}
.popup-book-now-content:not(.popup-reserve-content) form .form-group:nth-child(1), .popup-book-now-content:not(.popup-reserve-content) form .form-group:nth-child(2){
    margin-bottom: 27px
}
.popup-book-now-content:not(.popup-reserve-content) .form-group.textarea{
    grid-column: 1 / 3;
    margin-top: 27px
}
.popup-book-now-content:not(.popup-reserve-content) .form-group.textarea textarea{
    width: 100%
}
.popup-book-now-content form .form-group.agreement, .popup-book-now-content form .form-group.submit{
    grid-column: 1/3
}
.popup-book-now-content form .form-group.agreement{
    margin-top: 74px;
    position: relative
}
.popup-book-now-content form .form-group.submit{
    margin-top: 30px
}
.agreement label{
    font-size: 1.8rem;
    color: var(--white)
}
.popup-book-now-content form .form-group.agreement input{
    float: left
}
.popup-book-now-content form .form-group.agreement label{
    margin-left: 33px;
    position: absolute;
    top: -6px
}
.popup-book-now-content form [type="submit"]{
    width: 100%
}
.form-title{
    color: var(--white);
    font-size: 2.7rem;
    font-weight: 700;
    line-height: 4.1rem;
    margin-bottom: 30px
}
.popup-reserve-content .form-title + p{
    font-size: 2rem;
    line-height: normal;
    color: var(--white);
    margin-bottom: 35px;
    padding-right: 10%
}
.popup-reserve-content form{
    display: block
}
.popup-reserve-content form .form-group.submit{
    margin-top: 45px
}
.popup-thank-you form {
    background-color: #ffffff;
}
.popup-thank-you .text{
    width: 100%
}
.popup-thank-you .close{
    background-color: var(--main-color);
    outline: 5px solid #ffffff;
    outline-offset: -3px;
    width: 30px
}


@media all and (min-width: 1201px) {
    .popup-book-now-content form{
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        /*grid-template-rows: repeat(5, 1fr);*/
        grid-template-rows: repeat(9, 1fr);
        column-gap: 12px
    }
    
    .popup-book-now-content form .form-group:nth-child(1) {
        grid-column: span 2 / span 2;
        grid-row: span 2 / span 2;
    }
    
    .popup-book-now-content form .form-group:nth-child(2) {
        grid-column: span 5 / span 5;
        grid-row: span 2 / span 2;
        grid-column-start: 3;
    }
    
    .popup-book-now-content form .form-group:nth-child(3) {
        grid-column: span 5 / span 5;
        grid-row: span 2 / span 2;
        grid-column-start: 8;
    }
    
    .popup-book-now-content form .form-group:nth-child(4) {
        grid-column: span 6 / span 6;
        grid-row: span 2 / span 2;
        grid-row-start: 3;
    }
    
    .popup-book-now-content form .form-group:nth-child(5) {
        grid-column: span 6 / span 6;
        grid-row: span 2 / span 2;
        grid-column-start: 7;
        grid-row-start: 3;
    }
    
    .popup-book-now-content form .form-group:nth-child(6) {
        grid-column: span 6 / span 6;
        grid-row-start: 5;
    }
    
    .popup-book-now-content form .form-group:nth-child(7) {
        grid-column: span 6 / span 6;
        grid-column-start: 7;
        grid-row-start: 5;
    }
    
    .popup-book-now-content form .form-group:nth-child(8) {
        grid-column: span 12 / span 12;
        grid-row: span 2 / span 2;
        grid-row-start: 6;
    }
    
    .popup-book-now-content form .form-group:nth-child(9) {
        grid-column: span 12 / span 12;
        grid-row: span 2 / span 2;
        grid-row-start: 8;
    }
}

@media all and (max-width: 1200px){
    .popup-book-now-content form{
        grid-template-columns: 1fr;
        column-gap: 0
    }
    .popup-book-now-content form .form-group.agreement, .popup-book-now-content form .form-group.submit {
        grid-column: 1
    }
    .popup-book-now-content:not(.popup-reserve-content) form .form-group:nth-child(3),
    .popup-book-now-content:not(.popup-reserve-content) form .form-group:nth-child(4)
    
    {
        margin-bottom: 27px
    }
}
@media all and (max-width: 991px){
    select {
        padding: 15px 10px;
    }
    .popup .close {
        background-color: var(--main-color);
        outline: 3px solid var(--white);
        outline-style: auto;
        top: 7px;
        right: 7px;
        width: 30px
    }
    .popup-thank-you .close{
        outline-offset: 0
    }
    .popup-subtitle{
        font-size: 2.4rem;
        margin-bottom: 15px
    }
    .popup-book-now-content h2 + .short-line {
        margin-top: 15px
    }

    .popup-book-now-content{
        flex-direction: column;
        max-height: calc(100vh - 30px);
        overflow-y: auto
    }
    .popup-book-now-content >div:first-child, .popup-book-now-content >div:last-child{
        width: 100%;
        max-width: 100%;
        padding: 60px 30px
    }
    .popup-book-now-content:not(.popup-reserve-content) form .form-group:nth-child(1),
    .popup-book-now-content:not(.popup-reserve-content) form .form-group:nth-child(2),
    .popup-book-now-content:not(.popup-reserve-content) form .form-group:nth-child(3),
    .popup-book-now-content:not(.popup-reserve-content) form .form-group:nth-child(4)
    {
        margin-bottom: 12px
    }
    .popup-book-now-content form .form-group.agreement{
        margin-top: 45px
    }
    .popup__content{
        width: 100%
    }

}
@media all and (max-width: 768px){
    .popup-book-now-content >div:first-child, .popup-book-now-content >div:last-child{
        padding: 30px 15px
    }
    .popup-subtitle {
        font-size: 1.92rem;
        margin-bottom: 10px
    }
    .popup-reserve-content form .form-group.submit{
        margin-top: 30px
    }
    .popup-reserve-content .form-title + p{
        margin-bottom: 25px
    }
    .popup-reserve-content .form-title + p{
        font-size: 1.8rem
    }
    .form-title{
        margin-bottom: 15px
    }
    .popup-book-now-content .text .short-line, .popup-book-now-content .text p {
        margin-top: 30px
    }
}
@media all and (max-width: 446px){
    .popup .agreement .acform-error {
        margin-top: 55px
    }
}