.booking-page{
    margin-top: 78px;
    padding: 100px 0;
    background-color: #fff;
    min-height: calc(100vh - 173px);
}

.booking-why{
    margin-top: 100px;
    .title{
        line-height: 1.4em;
        color: $color-darkgray;
        font-size: 30px;
        font-weight: 400;
        margin-bottom: 20px;
    }
    .desc{
        line-height: 1.4em;
        color: $color-darkgray;
        font-size: 26px;
        font-weight: 300;
        font-family: 'Pridi', serif;
    }
}

.booking-register{
    border-right: 1px solid #e2e2e2;
    min-height: 600px;
    .title{
        line-height: 1.4em;
        color: $color-darkgray;
        font-size: 30px;
        font-weight: 400;
        margin-bottom: 20px;
    }
    .form-default{
        max-width: 400px;
        .password{
            padding-top: 30px;
        }
        .policy{
            margin-top: 40px;
            background-color: #EBEBEB;
            padding: 20px;
            font-weight: 300;
            font-family: 'Pridi', serif;
            font-size: 16px;
            color: $color-darkgray;
            line-height: 1.4em;
            .link{
                text-decoration: underline;
                color: $color-darkgray;
            }
        }
        .form-button{
            margin-top: 15px;
            .action{
                margin-top: 25px;
                text-align: center;
                .link{
                    font-weight: 300;
                    font-family: 'Pridi', serif;
                    font-size: 20px;
                    color: $color-danger;
                    text-decoration: underline;
                }
            }
        }
    }
}

.booking-login{
    width: 340px;
    margin: 100px 70px 0 70px;
    &.layout-2{
        text-align: center;
        .social{
            .link{
                height: auto;
                line-height: 1.4em;
                text-decoration: underline;
                box-shadow: none;
                &.facebook{
                    background-color: transparent;
                    color: #3A5998;
                }
                &.google{
                    background-color: transparent;
                    color: #DD4B39;
                }
                &.apple{
                    background-color: transparent;
                    color: #000;
                }
            }
        }   
        .action{
            margin-top: 0;
        }
    }
    .social{
        .link{
            height: 60px;
            line-height: 60px;
            border-radius: 30px;
            color: #fff;
            display: block;
            padding: 0 30px;
            font-size: 20px;
            font-weight: 300;
            font-family: 'Pridi', serif;
            box-shadow: 0 2px 6px rgba(0,0,0,0.1);
            .icon{
                display: inline-block;
                vertical-align: middle;
                position: relative;
                top: -2px;
                margin-right: 6px;
            }
            &.facebook{
                background-color: #3A5998;
            }
            &.google{
                background-color: #DD4B39;
            }
            &.apple{
                background-color: #000;
            }
            & + .link{
                margin-top: 20px;
            }
        }
    }
    .or{
        font-size: 18px;
        color: $color-mute;
        text-align: center;
        padding: 30px 0;
        font-weight: 300;
        font-family: 'Pridi', serif;
    }
    .mail{
        .link{
            border: 1px solid #ddd;
            height: 60px;
            line-height: 58px;
            border-radius: 30px;
            color: $color-darkgray;
            display: block;
            padding: 0 30px;
            font-size: 20px;
            font-weight: 300;
            font-family: 'Pridi', serif;
            .icon{
                display: inline-block;
                vertical-align: middle;
                position: relative;
                top: -2px;
                margin-right: 6px;
            }
        }
    }
    .action{
        margin-top: 20px;
        text-align: center;
        .link{
            font-weight: 300;
            font-family: 'Pridi', serif;
            color: $color-darkgray;
            text-decoration: underline;
            font-size: 20px;
        }
    }
}

.booking-sum{
    width: 430px;
    border: 1px solid #E2E2E2;
    font-family: 'Pridi', serif;
    font-weight: 300;
    color: $color-darkgray;
    font-size: 26px;
    line-height: 1.4em;
    .h-title{
        font-weight: 500;
        font-size: 27px;
        line-height: 1.4em;
        margin-bottom: 10px;
    }
    .block{
        padding: 30px;
        & + .block{
            border-top: 1px solid #e2e2e2;
        }
    }
    .row + .row{
        margin-top: 10px;
    }
    strong{
        font-weight: 500;
    }
    .price{
        text-align: right;
    }
    .action{
        .link{
            color: $color-darkgray;
            text-decoration: underline;
        }
    }
}
.booking-sum-action{
    margin-top: 15px;
}

.booking-payment{
    .h-title{
        line-height: 1.4em;
        color: $color-darkgray;
        font-size: 30px;
        font-weight: 400;
        margin-bottom: 20px;
    }
}
.payment-method{
    max-width: 670px;
    font-weight: 300;
    font-family: 'Pridi', serif;
    .item-list{
        li{
            & + li{
                border-top: 1px solid #e2e2e2;
            }
        }
    }
    .header{
        .link{
            padding: 15px 0;
            display: block;
            position: relative;
            color: $color-darkgray;
            line-height: 1.4em;
            font-size: 21px;
            padding-left: 35px;
            &:before{
                content: '';
                position: absolute;
                top: 21px;
                left: 0;
                border-radius: 50%;
                width: 20px;
                height: 20px;
                background-color: #fff;
                border: 5px solid #B2B2B2;
            }
            &.collapsed{
                &:before{
                    background-color: #B2B2B2;
                }
            }
            .icon{
                position: absolute;
                margin-left: 15px;
                top: 10px;
            }
        }
    }
    .card{
        border-radius: 0;
        border: none;
        padding: 20px 0;
    }
    .checkbox-control{
        margin-top: 15px;
    }
    .form-default{
        label{
            width: 120px;
            font-size: 15px;
            margin: 0;
            padding: 0;
        }

        .form-control{
            padding: 0 25px;
            .form-control{
                padding: 0;
                border: none;
                height: 58px;
                border: none;
            }
        }
        .moreinfo{
            position: absolute;
            top: 16px;
            left: 100%;
            width: 20px;
            margin-left: -10px;
        }
    }
}
.payment-promo{
    margin-top: 20px;
    .link{
        font-weight: 300;
        font-family: 'Pridi', serif;
        color: $color-danger;
        font-size: 15px;
    }
}

.booking-detail{
    border-top: 1px solid #e2e2e2;
    margin-top: 50px;
    padding-top: 50px;
    .h-title{
        line-height: 1.4em;
        color: $color-darkgray;
        font-size: 30px;
        font-weight: 400;
        margin-bottom: 30px;
    }
    .should{
        border-right: 1px solid #e2e2e2;
        min-height: 500px;
        padding-right: 190px;
    }   
    .should-list{
        margin-left: 12px;
        width: 390px;
        font-weight: 300;
        font-family: 'Pridi', serif;
        font-size: 20px;
        line-height: 1.4em;
        li{
            position: relative;
            border: 1px solid #e2e2e2;
            padding: 10px 25px;
            margin-top: 10px;
            & + li{
                margin-top: 20px;
            }
        }
        .icon{
            display: inline-block;
            vertical-align: top;
            position: relative;
            top: -2px;
            margin-right: 5px;
        }
        .allow{
            position: absolute;
            top: 12px;
            left: -12px;
            width: 24px;
            height: 24px;
            background: url('../img/icon/checked.svg') center no-repeat;
            background-size: cover;
        }
        .notallow{
            position: absolute;
            top: 12px;
            left: -12px;
            width: 24px;
            height: 24px;
            background: url('../img/icon/cancel.svg') center no-repeat;
            background-size: cover;
        }
    }
    .policy{
        margin-left: 40px;
        max-width: 420px;
        .editor-content{
            
        }
        .action{
            margin-top: 40px;
            .link{
                color: $color-darkgray;
                text-decoration: underline;
                font-weight: 300;
                font-family: 'Pridi', serif;
                font-size: 20px;
            }
        }
    }
}

.bookong-info{
    width: 580px;
    margin-right: 200px;
    .h-title{
        line-height: 1.4em;
        color: $color-darkgray;
        font-size: 30px;
        font-weight: 400;
        margin-bottom: 30px;
        .icon{
            width: 70px;
            display: inline-block;
            vertical-align: middle;
            position: relative;
            top: -1px;
            margin-right: 15px;
            img{
                width: 100%;
            }
        }
    }
    .thumb{
        border-radius: 20px;
        overflow: hidden;
        position: relative;
        .cover{
            padding-top: 51.8%;
        }
    }
    .info-header{
        margin-top: 25px;
        .title{
            font-size: 32px;
            font-weight: 400;
        }
        .zone{
            margin-top: 5px;
            font-weight: 300;
            font-family: 'Pridi', serif;
            font-size: 15px;
            line-height: 1.4em;
            .icon{
                font-family: 'DMSans';
                display: inline-block;
                vertical-align: middle;
                position: relative;
                top: -1px;
                width: 34px;
                height: 34px;
                color: #fff;
                text-align: center;
                line-height: 34px;
                background-color: #687A6A;
                border-radius: 50%;
                font-size: 16px;
                margin-left: 2px;
            }
        }
        .cover{
            width: 60px;
            height: 60px;
            border-radius: 50%;
        }
    }
    .info-detail{
        margin-top: 20px;
        padding-top: 20px;
        border-top: 1px solid #e2e2e2;
        font-weight: 300;
        font-family: 'Pridi', serif;
        font-size: 15px;
        line-height: 1.4em;
        strong{
            font-size: 23px;
            font-weight: 500;
            display: block;
            line-height: 1.4em;
        }
        .checkout{
            text-align: right;
        }
    }
    .action{
        margin-top: 30px;
        .btn{
            font-size: 22px;
        }
    }
}

.bookong-conclude{
    font-weight: 300;
    font-family: 'Pridi', serif;
    .wrapper{
        border: 1px solid #e2e2e2;
    }
    .h-title{
        font-weight: 500;
        font-size: 21px;
        line-height: 1.4em;
        margin-bottom: 5px;
    }
    .desc{
        font-size: 20px;
        line-height: 1.4em;
    }
    .link{
        font-size: 19px;
        color: $color-danger;
        text-decoration: underline;
        line-height: 1.4em;
    }
    .block{
        padding: 22px 30px;
        & + .block{
            border-top: 1px solid #e2e2e2;
        }
    }
    .row + .row{
        margin-top: 10px;
    }
    .action{
        text-align: center;
        padding: 30px 0;
        .btn{
            font-size: 22px;
            font-weight: 300;
            width: 260px;
        }
        .note{
            margin-top: 15px;
            font-size: 19px;
            color: $color-mute;
            line-height: 1.4em;
        }
    }
}