.site-header{
    position: fixed;
    top: 0;
    width: 100%;
    height: 170px;
    display: flex;
    align-items: center;
    background-color: transparent;
    // background: linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 100%);
    // background-size: 300% 100%;
    z-index: 999;
    box-shadow: 0 3px 6px 0 rgba($color: #000000, $alpha: 0);
    transition: all 200ms;
    &.tiny{
        height: 112px;
        // background: linear-gradient(180deg, rgb(237, 237, 235) 0%, rgb(237, 237, 235) 100%);
        background-color: rgb(237, 237, 235);
        box-shadow: 0 3px 6px 0 rgba($color: #000000, $alpha: 0.1);
        .search-form{opacity: 1; pointer-events: unset;}
    }
    .brand{
        img{width: 172px;}
    }
    .b-right{
        font-family: 'DMSans';
        font-weight: 500;
        li{
            position: relative;
            padding: 0 40px; line-height: 40px;
            &:nth-child(2){padding-right: 0;}
            &:first-child:before{
                content: '';
                position: absolute;
                top: 0;
                right: 0;
                width: 1px;
                height: 100%;
                border-left: 1px solid $color-darkgray;
            }
            .link{color: $color-darkgray;}
            .btn-lang{
                background-color: $color-none;
                border: none;
                outline: 0;
            }
            .signup{
                background-color: #d54e38;
                font-family: "Pridi", sans-serif;
                font-weight: 500;
                font-size: 18px;
                min-width: 136px;
                height: 42px;
                padding: 0 24px;
                line-height: 42px;
                border-radius: 30px;
                color: $color-light;
                text-align: center;
                &:hover{
                    background-color: $color-darkgray;
                }
            }
        }
        .member{
            display: flex; align-items: center;
            position: relative;
            &.active{
                &:before{
                    content: '';
                    position: absolute;
                    top: 3px;
                    right: -8px;
                    width: 15px;
                    height: 15px;
                    background-color: $color-danger;
                    border: 1px solid $color-light;
                    border-radius: 50%;
                }
            }
            span{margin-right: 12px;}
        }
    }
    .dropdown-menu{
        margin-top: 12px;
        width: 100%;
        border-radius: 10px;
        min-height: inherit;
        min-width: 71px;
        margin-left: -20px;
        border: none;
        padding: 0;
        &.dropdown-member{
            min-width: 276px;
            border-radius: 10px;
            overflow: hidden;
            .dropdown-item{
                font-family: "Pridi" , sans-serif;
                position: relative;
                font-size: 21px;
                font-weight: 300;
                padding: 10px 28px;
                text-align: left;
                color: $color-darkgray;
                border-radius: 0;
                span{
                    margin-right: 20px;
                    img{
                        width: 22px;
                        filter: brightness(1) invert(0);
                        transition: all 200ms;
                    }
                }
                &:hover{
                    color: $color-light;
                    img{filter: brightness(0) invert(1);}
                }
                &.active{
                    .text{
                        position: relative;
                        &:before{
                            content: '';
                            position: absolute;
                            width: 15px;
                            height: 15px;
                            right: -19px;
                            top: 1px;
                            border-radius: 50%;
                            background-color: $color-danger;
                        }
                    }
                }
            }
        }
        .dropdown-item{
            padding: 0; text-align: center;
            background-color: $color-light;
            position: relative;
            border-radius: 10px;
            color: $color-darkgray;
            transition: all 200ms;
            &:focus,
            &:hover{
                color: $color-light;
                background-color: $color-darkgray;
            }
        }
    }
    .search-form{
        opacity: 0; pointer-events: none;
        transition: all 200ms;
        .txt-key{
            position: relative;
            background-color: $color-light;
            height: 60px;
            width: 502px;
            margin: 0 auto;
            border-radius: 50px;
            padding: 16px 30px;
            .item-list{margin-top: -5px;}
            li{
                width: calc(100% / 3);
                position: relative;
                &:not(:last-child):before{
                    content: '';
                    position: absolute;
                    top: 0;
                    right: 0;
                    width: 1px;
                    height: 100%;
                    border-right: 1px solid rgba(112, 112, 112, 0.24);
                    z-index: 1;
                }
            }
            .form-control{
                border: none;
                outline: 0;
                line-height: 1.6em;
                width: 100%;
                padding: 0;
                line-height: 38px;
                background-color: $color-light;
                &:focus{outline: 0; box-shadow: none;}
                &::placeholder {color: #282828; opacity: 1;} 
                &:-ms-input-placeholder {color: #282828; opacity: 1;}
                &::-ms-input-placeholder {color: #282828; opacity: 1;}
                &.add-guest{padding-left: 15px;}
            }
            .btn-search{
                position: absolute;
                top: 10px;
                right: 15px;
                background-color: $color-light;
                border: none;
                border-radius: 50%;
                width: 35px;
                height: 35px;
            }
        }
        .add-guest{
            position: relative;
            .guest{
                .btn{
                    width: 42px;
                    height: 42px;
                    min-width: inherit;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-radius: 50%;
                    color: $color-darkgray;
                    background-color: $color-light;
                    border: 1px solid #BABABA;
                    transition: all 200ms;
                    &:hover{
                        color: $color-light;
                        background-color: $color-darkgray;
                        border-color: $color-darkgray;
                    }
                    &.add{float: right;}
                }
            }
            .dropdown-guest{
                display: none;
                position: absolute;
                top: 57px;
                right: 0;
                left: 0;
                width: 244px;
                background-color: $color-light;
                border-radius: 20px;
                padding: 15px 20px;
                &.show{display: block;}
                .form-control{
                    margin: 0;
                    text-align: center;
                }
            }
        }
    }
    .row > div{display: flex; align-items: center; justify-content: center;}
    
    &.acc-header{
        // background: linear-gradient(180deg, rgb(237, 237, 235) 0%, rgb(237, 237, 235) 100%);
        background-color: #F8F7F5;
        box-shadow: 0 3px 6px 0 rgba(0,0,0,0.1);
        height: 78px;
        &.tiny{
            height: 78px;
        }
        .row > div{display: flex; align-items: center; justify-content: flex-start;}
        .secure{
            margin-left: 100px;
            .link{
                font-family: 'Pridi', serif;
                font-weight: 300;
                color: $color-darkgray;
                .icon{
                    display: inline-block;
                    vertical-align: middle;
                    position: relative;
                    top: -1px;
                }
                .text{
                    text-decoration: underline;
                }
            }
        }
    }

    &.header-search{
        background-color: #F8F7F5;
        box-shadow: 0 3px 6px 0 rgba(0,0,0,0.1);
        height: 112px;
        .search-form{opacity: 1; pointer-events: unset;}
        &.tiny{
            height: 112px;
        }
    }

    .overlay{
        position: fixed;
        top: 112px;
        right: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba($color: #000000, $alpha: 0.8);
        opacity: 0;
        transition: all 400ms;
        z-index: 0;
        pointer-events: none;
        &.show{opacity: 1; z-index: 1; pointer-events: unset;}
    }
    input:focus ~ .overlay {opacity: 1; z-index: 1; pointer-events: unset;}
    &.reset-header{
        height: 112px;
        background-color: $color-light;
        border-bottom: 1px solid #707070;
        box-shadow: none;
        &.tiny{
            height: 112px;
            background-color: $color-light;
        }
    }
}

// @supports (backdrop-filter: none) {
//     .site-header.tiny{
//         background: rgba($color: $color-light, $alpha: 0.5);
//         -webkit-backdrop-filter: blur(10px);
//         backdrop-filter: blur(10px);
//         opacity: 1;
//     }
// }
// @supports not (backdrop-filter: none) {
//     .site-header.tiny{
//         background: rgba($color: $color-light, $alpha: 0.9);
//         opacity: 1;
//     }
// }