@import '../../../../assets/scss/variables';
@import '../../../../assets/scss/mixins';

.ftmct-wrapper {
    background: #F0F2F4 0% 0% no-repeat padding-box;
    opacity: 1;
    width: 100%;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    position: relative;

    > .__header {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: flex-end;
        justify-content: flex-end;
        align-items: flex-end;
        width: 100%;
        margin-bottom: 20px;

        > .__title {
            width: 100%;
            max-width: 50%;
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            align-content: center;
            justify-content: center;
            align-items: center;

            > h2 {
                color: #21262E;
                font-family: sans-serif;
                font-size: 38px;
                line-height: 44px;
                font-weight: bold;
            }
            
            > p {
                color: #7B7B7B;
                font-size: 18px;
                font-family: sans-serif;
                margin-bottom: 0;
            }
        }

        &.results {
            > .__title {
                max-width: 100%;
            }
        }

        > .__action-holder {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-content: flex-end;
            justify-content: flex-end;
            align-items: flex-end;
            width: 100%;
            max-width: 25%;
            min-width: 300px;

            > .__action_button {
                background: transparent linear-gradient(103deg, #14D7D0 0%, #259EF1 100%) 0% 0% no-repeat padding-box;
                border-radius: 20px 0px 0px 20px;
                opacity: 1;
                min-width: 270px;
                min-height: 70px;
                color: #ffffff;
                font-family: sans-serif;
                font-size: 18px;
                border: 2px solid #259ef18c;
                cursor: pointer;

                &:hover{
                    background: #1392B1 0% 0% no-repeat padding-box;
                    border-radius: 20px 0px 0px 20px;
                }
                
                > i.__compare_icon {
                    display: inline-block;
                    width: 26px;
                    height: 14px;
                    background-image: url('../images/compare-arrows.svg');
                    background-repeat: no-repeat;
                }

            }
        }
    }

    > .__search-wrapper {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        width: 100%;
        margin: 20px auto;

        > .__search_textbox {
            background: #FFFFFF 0% 0% no-repeat padding-box;
            border: 1px solid #D4D8DE;
            border-radius: 30px;
            width: 450px;
            min-height: 40px;
            padding: 10px;
            border: 1px solid #D4D8DE;
            margin: 5px 15px;
            text-align: left;
            font: normal normal 600 16px/22px sans-serif;

            &::placeholder{    
                color: #C9C9C9;
            }
        }

        >  .__search_button {
            width: 187px;
            height: 60px;
            background: #4E89C7 0% 0% no-repeat padding-box;
            border-radius: 30px;
            text-align: center;
            font: normal normal bold 16px/18px sans-serif;
            letter-spacing: 0px;
            color: #FFFFFF;
            border: none;
            cursor: pointer;

            &:hover{
                background: #FFFFFF 0% 0% no-repeat padding-box;
                border: 1px solid #4E89C7;
                text-align: center;
                font: normal normal bold 18px/22px sans-serif;
                letter-spacing: 0px;
                color: #4E89C7;
            }
        }
    }

    > .__sites-list {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center;
        align-items: flex-start;
        max-width: 1300px;
        margin: 25px auto;
        width: 100%;
        cursor: pointer;

        > .__site_item {
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            align-content: center;
            justify-content: flex-start;
            align-items: center;
            width: 250px;
            min-height: 160px;
            background: #FFFFFF 0% 0% no-repeat padding-box;
            border: 1px solid #D4D8DE;
            border-radius: 15px;
            margin: 10px;

            > .site-logo {
                width: 100%;
                min-height: 90px;
                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;
                align-content: center;
                justify-content: center;
                align-items: center;

                > img {
                    object-fit: cover;
                    max-width: 210px;
                }
            }

            > .divider {
                border-top: 1px solid #D4D8DE;
                display: block;
                width: 90%;
                margin: 0px auto 10px auto;
            }

            > .site-selector {
                text-align: center;
                font: normal normal 500 16px/19px sans-serif;
                letter-spacing: -0.28px;
                color: #21262E;
                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;
                align-content: center;
                justify-content: center;
                align-items: center;
                min-height: 50px;
                width: 100%;
                column-gap: 6px;
            }

            &.validate{
                --border-size: 0px;
                --border-angle: 0turn;
                background-image: conic-gradient(from var(--border-angle), #e83b462b, #1120 50%, #ffffff3d),conic-gradient(from var(--border-angle), transparent 20%, #18d0d5a8, #23a2ee45);
                background-size: calc(100% - var(--border-size)*2) calc(100% - var(--border-size)*2),cover;
                background-position: center center;
                background-repeat: no-repeat;
                animation: bg-spin 1.5s linear 1, bg-blending 1.5s linear;     
                background-blend-mode: overlay;           
            }               
        }

        &.results {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-content: flex-start;
            justify-content: center;
            align-items: center;
            column-gap: 30px;
            cursor: none;

            > .swiper-slide {
                display: flex;
                width: 100%;
                max-width: 360px;

                .__site_item_full {
                    display: flex;
                    flex-direction: column;
                    flex-wrap: nowrap;
                    align-content: center;
                    justify-content: flex-start;
                    align-items: center;
                    width: 100%;
                    max-width: 360px;
                    min-height: 160px;
                    background: #FFFFFF 0% 0% no-repeat padding-box;
                    border: 1px solid #D4D8DE;
                    border-radius: 15px;
                    margin: 10px auto;

                    > .site-logo {
                        width: 100%;
                        min-height: 90px;
                        display: flex;
                        flex-direction: row;
                        flex-wrap: nowrap;
                        align-content: center;
                        justify-content: center;
                        align-items: center;

                        > img {
                            object-fit: cover;
                            max-width: 210px;
                        }
                    }

                    > .divider {
                        border-top: 1px solid #D4D8DE;
                        display: block;
                        width: 90%;
                        margin: 0px auto 10px auto;
                    }

                    > .site-features {
                        display: flex;
                        flex-direction: column;
                        flex-wrap: nowrap;
                        align-content: center;
                        justify-content: flex-start;
                        align-items: center;
                        width: 100%;
                        margin: 15px auto;

                        > .__feature {
                            display: flex;
                            flex-direction: row;
                            flex-wrap: nowrap;
                            align-content: flex-start;
                            justify-content: center;
                            align-items: center;
                            width: 100%;
                            column-gap: 6px;
                            margin: 4px auto;

                            > label {
                                display: flex;
                                color: #616366;
                                text-align: right;
                                font: normal normal normal 15px/40px Sans-Serif;
                                letter-spacing: -0.28px;
                                text-transform: capitalize;
                                width: 45%;
                                flex-direction: row;
                                flex-wrap: nowrap;
                                align-content: center;
                                justify-content: flex-end;
                                align-items: center;
                                white-space: nowrap;
                            }

                            > span {
                                color: #21262E;
                                text-align: left;
                                font: normal normal bold 16px/40px Sans-Serif;
                                letter-spacing: -0.2px;
                                margin-right: 8px;
                                width: 55%;
                                display: flex;
                                flex-direction: row;
                                flex-wrap: nowrap;
                                align-content: center;
                                justify-content: flex-start;
                                align-items: center;
                                white-space: nowrap;
                            }


                        }

                        .__feature.__rating {
                            > span{
                                font-size: 22px;
                            }
                        }
                    }

                    > .site-price {
                        display: flex;
                        flex-direction: row;
                        flex-wrap: nowrap;
                        align-content: flex-start;
                        justify-content: center;
                        align-items: flex-start;
                        width: 100%;
                        margin: 20px auto;
                        column-gap: 10px;

                        > label {
                            display: flex;
                            text-align: left;
                            font: normal normal bold 16px/26px Sans-Serif;
                            letter-spacing: -0.28px;
                            color: #21262E;
                            flex-direction: row;
                            flex-wrap: nowrap;
                            align-content: flex-start;
                            justify-content: flex-end;
                            align-items: flex-start;
                        }

                        > span {
                            text-align: left;
                            font: normal normal bold 30px/40px Sans-Serif;
                            letter-spacing: -0.6px;
                            color: #17CCD6;
                        }
                    }

                    > .site-review-button {
                        display: block;

                        > a {
                            display: flex;
                            width: 100%;
                            min-width: 270px;
                            max-width: 90%;
                            min-height: 50px;
                            background: #4E89C7 0% 0% no-repeat padding-box;
                            border-radius: 25px;
                            color: #fff;
                            flex-direction: row;
                            flex-wrap: nowrap;
                            align-content: center;
                            justify-content: center;
                            align-items: center;
                            margin: 0px auto 25px auto;
                            font-size: 18px;
                            font-family: sans-serif;
                            text-decoration: none;
                            font-weight: 700;
                            padding: 0px 6px;
                            border:1px solid #4E89C7;

                            &:hover{
                                color: #4E89C7;
                                background: #ffffff 0% 0% no-repeat padding-box;
                                border:1px solid #4E89C7;
                                cursor: pointer;
                            }
                        }
                    }
                }
            }
        }
    }    

    .__sites-bottom-divider {
        display: block;
        border-top: 1px solid #cccccca3;
        height: 4px;
        width: 90%;
        margin: 20px auto;
    }

    > .__sites-bottom-disclaimer {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: center;
        justify-content: flex-start;
        align-items: center;

        > p {
            color: #7B7B7B;
            text-align: center;
            max-width: 1000px;
            font-family: sans-serif;
            font-size: 14px;
        }
    }

    .swiper {
        width: 100%;

        > .__sites-list {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-content: center;
            justify-content: center;
            align-items: flex-start;
            max-width: 1300px;
            margin: 25px auto;
            width: 100%;
    
            &.results {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                align-content: flex-start;
                justify-content: center;
                align-items: center;
                column-gap: 30px;
    
                > .swiper-slide {
                    display: flex;
                    width: 100%;
                    max-width: 360px;
    
                    .__site_item_full {
                        display: flex;
                        flex-direction: column;
                        flex-wrap: nowrap;
                        align-content: center;
                        justify-content: flex-start;
                        align-items: center;
                        width: 100%;
                        max-width: 360px;
                        min-height: 160px;
                        background: #FFFFFF 0% 0% no-repeat padding-box;
                        border: 1px solid #D4D8DE;
                        border-radius: 15px;
                        margin: 10px auto;
    
                        > .site-logo {
                            width: 100%;
                            min-height: 90px;
                            display: flex;
                            flex-direction: row;
                            flex-wrap: nowrap;
                            align-content: center;
                            justify-content: center;
                            align-items: center;
    
                            > img {
                                object-fit: cover;
                                max-width: 210px;
                            }
                        }
    
                        > .divider {
                            border-top: 1px solid #D4D8DE;
                            display: block;
                            width: 90%;
                            margin: 0px auto 10px auto;
                        }
    
                        > .site-features {
                            display: flex;
                            flex-direction: column;
                            flex-wrap: nowrap;
                            align-content: center;
                            justify-content: flex-start;
                            align-items: center;
                            width: 100%;
                            margin: 15px auto;
    
                            > .__feature {
                                display: flex;
                                flex-direction: row;
                                flex-wrap: nowrap;
                                align-content: flex-start;
                                justify-content: center;
                                align-items: center;
                                width: 100%;
                                column-gap: 6px;
                                margin: 4px auto;
    
                                > label {
                                    display: flex;
                                    color: #616366;
                                    text-align: right;
                                    font: normal normal normal 15px/40px Sans-Serif;
                                    letter-spacing: -0.28px;
                                    text-transform: capitalize;
                                    width: 45%;
                                    flex-direction: row;
                                    flex-wrap: nowrap;
                                    align-content: center;
                                    justify-content: flex-end;
                                    align-items: center;
                                    white-space: nowrap;
                                }
    
                                > span {
                                    color: #21262E;
                                    text-align: left;
                                    font: normal normal bold 16px/40px Sans-Serif;
                                    letter-spacing: -0.2px;
                                    margin-right: 8px;
                                    width: 55%;
                                    display: flex;
                                    flex-direction: row;
                                    flex-wrap: nowrap;
                                    align-content: center;
                                    justify-content: flex-start;
                                    align-items: center;
                                    white-space: nowrap;
                                }
    
    
                            }
    
                            .__feature.__rating {
                                > span{
                                    font-size: 22px;
                                }
                            }
                        }
    
                        > .site-price {
                            display: flex;
                            flex-direction: row;
                            flex-wrap: nowrap;
                            align-content: flex-start;
                            justify-content: center;
                            align-items: flex-start;
                            width: 100%;
                            margin: 20px auto;
                            column-gap: 10px;
    
                            > label {
                                display: flex;
                                text-align: left;
                                font: normal normal bold 16px/26px Sans-Serif;
                                letter-spacing: -0.28px;
                                color: #21262E;
                                flex-direction: row;
                                flex-wrap: nowrap;
                                align-content: flex-start;
                                justify-content: flex-end;
                                align-items: flex-start;
                            }
    
                            > span {
                                text-align: left;
                                font: normal normal bold 30px/40px Sans-Serif;
                                letter-spacing: -0.6px;
                                color: #17CCD6;
                            }
                        }
    
                        > .site-review-button {
                            display: block;
    
                            > a {
                                display: flex;
                                width: 100%;
                                min-width: 270px;
                                max-width: 90%;
                                min-height: 50px;
                                background: #4E89C7 0% 0% no-repeat padding-box;
                                border-radius: 25px;
                                color: #fff;
                                flex-direction: row;
                                flex-wrap: nowrap;
                                align-content: center;
                                justify-content: center;
                                align-items: center;
                                margin: 0px auto 25px auto;
                                font-size: 18px;
                                font-family: sans-serif;
                                text-decoration: none;
                                font-weight: 700;
                                padding: 0px 6px;
                                border:1px solid #4E89C7;
    
                                &:hover{
                                    color: #4E89C7;
                                    background: #ffffff 0% 0% no-repeat padding-box;
                                    border:1px solid #4E89C7;
                                    cursor: pointer;
                                }
                            }
                        }
                    }
                }
            }
        }

        > .swiper-pagination {
            position: relative;
            display: none;

            > span.swiper-pagination-bullet {
                --swiper-pagination-bullet-inactive-color : #fff;
                border: 1px solid #fff;
                box-shadow: 0px 0px 0px 2px #17CCD6;
            }
        }
    }

    > .__sites-bottom-button {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center;
        align-items: center;

        .__action_button {
            background: transparent linear-gradient(103deg, #14D7D0 0%, #259EF1 100%) 0% 0% no-repeat padding-box;
            border-radius: 20px;
            opacity: 1;
            min-width: 270px;
            min-height: 70px;
            color: #ffffff;
            font-family: sans-serif;
            font-size: 18px;
            font-weight: 700;
            border: 2px solid #259ef18c;
            cursor: pointer;

            &:hover{
                background: #1392B1 0% 0% no-repeat padding-box;
                border-radius: 20px;
            }

            > i.__compare_icon {
                display: inline-block;
                width: 26px;
                height: 14px;
                background-image: url('../images/compare-arrows.svg');
                background-repeat: no-repeat;
            }
        }
    }

    .swiper-button-prev, .swiper-button-next{
        display: none;
    }

    .ftmct_loading{
        display: none;
        width: 80px;
        height: 80px;
        position: absolute;
        top: calc(50% - 40px);
        left: calc(50% - 40px);

        &:after {
            content: " ";
            display: block;
            width: 64px;
            height: 64px;
            margin: 8px;
            border-radius: 50%;
            border: 6px solid #fff;
            border-color: #1292b1 transparent #4e89c7 transparent;
            animation: ftmct_loading 1.2s linear infinite;
          }

          @keyframes ftmct_loading {
            0% {
              transform: rotate(0deg);
            }
            100% {
              transform: rotate(360deg);
            }
          }
    }

    &.loading{
        background: #c0c5ca 0% 0% no-repeat padding-box;

        .ftmct_loading{
            display: inline-block;            
        }
    }

    #ftmct-compare-btn-mobile{
        display: none;
        background: transparent linear-gradient(103deg, #14D7D0 0%, #259EF1 100%) 0% 0% no-repeat padding-box;
        border-radius: 20px;
        opacity: 1;
        min-width: 270px;
        min-height: 70px;
        color: #ffffff;
        font-family: sans-serif;
        font-size: 18px;
        border: 2px solid #259ef18c;
        cursor: pointer;
        position: sticky;
        top: 0;

        &:hover{
            background: #1392B1 0% 0% no-repeat padding-box;
            border-radius: 20px;
        }
        
        > i.__compare_icon {
            display: inline-block;
            width: 26px;
            height: 14px;
            background-image: url('../images/compare-arrows.svg');
            background-repeat: no-repeat;
        }
    }
}
@keyframes bg-spin {
    to {
      --border-angle: 1turn;
    }
  }

 @keyframes bg-blending{
    0%{
        background-blend-mode: overlay;
    }
    30%{
        background-blend-mode: normal;
    }
    75%{
        background-blend-mode: normal;
    }
    100%{
        background-blend-mode: overlay;
    }
 } 

@property --border-angle {
    syntax: "<angle>";
    inherits: true;
    initial-value: 0turn;
  }

@media all and (max-width:764px) {

    .ftmct-wrapper{
        .swiper {
            > .swiper-pagination{
                display: block;
            }

            .__sites-list.results {
                display: flex;
                flex-wrap: nowrap;
                justify-content: unset;
                column-gap: 0px;
    
                > .swiper-slide {
                    max-width: unset;
                }
            }
        }

        .swiper-button-prev, .swiper-button-next{
            display: flex;
        }       
    }
}

@media all and (max-width:650px){

    .ftmct-wrapper{
        > .__header{
            flex-direction: column;

            > .__title{
                max-width: 100%;
                text-align: center;
            }

            > .__action-holder {
                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;
                align-content: center;
                justify-content: center;
                align-items: center;
                width: 100%;
                max-width: 100%;
                min-width: 300px;

                > .__action_button{
                    border-radius: 20px;
                    margin-top: 25px;
                    display: none;
                }
            }
        }

        > .__sites-list {
            > .__site_item{
                width: 100%;
                max-width: 200px;

                > .site-logo {
                    > img {
                        object-fit: cover;
                        max-width: 150px;
                    }
                }
            }
        }

        > .__search-wrapper {
            > .__search_textbox{
                width: 100%;
                min-height: auto;
            }
            > .__search_button{
                width: 30%;
                height: auto;
                min-height: 40px;
            }
        }

        #ftmct-compare-btn-mobile{
            display: block;
        }
    }
}

@media all and (max-width:400px){

    
    .ftmct-wrapper{
        > .__search-wrapper {
            > .__search_textbox{
                font-size: 13px;
            }
            > .__search_button{
                font-size: 13px;
            }
        }

        .swiper {
            > .swiper-pagination{
                display: block;
            }

            .__sites-list.results {
                display: flex;
                flex-wrap: nowrap;
                justify-content: unset;
                column-gap: 0px;
    
                > .swiper-slide {
                    max-width: unset;

                    .__site_item_full{
                        max-width: 290px;

                        .site-features {
                            > .__feature {
                                > label{
                                    font: normal normal normal 13px/13px Sans-Serif;
                                    letter-spacing: -0.4px;
                                }
                                
                                > span{
                                    font: normal normal bold 13px/40px Sans-Serif;
                                    letter-spacing: -0.2px;
                                }
                            }
                        }

                        > .site-price{
                            align-items: center;
                        }
                    }                    
                }
            }
        }  
        
        .swiper-button-next, .swiper-rtl .swiper-button-prev {
            right: var(--swiper-navigation-sides-offset,0px);
        }

        .swiper-button-prev, .swiper-rtl .swiper-button-next {
            left: var(--swiper-navigation-sides-offset,0px);
        }
    }
}