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

#custom-ancar-dealers {

    .custom-ancar-dealers-search {

        margin-bottom: 4rem;

        #dealerSearch {

            position: relative;

            input[type=text] {

                border-radius: 8px;
                border: 1px solid #e3e3e3;
                background: 0 0;
                box-sizing: border-box;
                padding: 20px;
                height: auto;
                font-size: 18px;
                width: 100%;
                -moz-appearance: none;
                -webkit-appearance: none;
                appearance: none;
                color: #000;

            }

            button[type=submit] {

                color: #000;
                position: absolute;
                background: 0 0;
                border: none;
                width: auto;
                height: auto;
                border-radius: unset;
                padding: 0;
                right: 16px;
                top: 50%;
                transform: translateY(-50%);

                .icon-search:before {
                    
                    text-align: center;
                    line-height: 38px;
                    font-size: 32px;
                    width: 38px;
                    height: 38px;
                    font-family: dashicons;
                    content: "\f179";
                    font-style: normal;
                    display: block;

                }

            }

        }

    }

    .button-go-back {

        text-align: center;
        padding: 2rem 0;

        a {

            color: #00e0aa;
            background: 0 0;
            padding: 1rem 2rem;
            cursor: pointer;
            width: auto;
            min-width: auto;
            text-align: center;
            margin-bottom: 0;
            text-decoration: none;
            border: solid 2px #00e0aa;
            font-size: 20px;
            border-radius: 100em 100em 100em 100em;
            line-height: normal;
            display: inline-block;
            -webkit-appearance: none;
            transition: all .2s ease-in-out;

            &:hover {

                color: #fff;
                background: #00efb6;

            }

        }

    }

    .continentList {

        display: grid;
        grid-auto-flow: column;
        column-gap: 15px;
        grid-auto-columns: 1fr;

        .label-continent {

            text-transform: capitalize;

        }

    }

    .country {

        display: block;
        text-decoration: none;
        padding: 20px 16px;
        background-color: #f5f5f5;
        color: #000;
        font-size: 18px;
        line-height: 24px;
        border-radius: 8px;
        transition: all .2s ease-in-out;

        &:not(last-child) {

            margin-bottom: 1rem;

        }

        &:after {
            font-family: dashicons;
            content: "\f543";
            display: block;
            float: right;
            color: #00e0aa;
            width: 24px;
            height: 24px;
            line-height: 24px;
            text-align: center;
            border-radius: 4px;
            transition: all .2s ease-in-out;
        }

        .flag {

            width: 20px;
            height: auto;
            margin-right: 10px;
            top: 1px;
            position: relative;

        }
        
    }

    .country:hover {

        background-color: #d2fdf2;

        &:after {

            background: #00e0aa;
            color: #fff;

        }

    }

    .country.loading:after {

        background: 0 0;
        animation: spin 1s linear infinite;
        color: #00e0aa;

    }

    .results {

        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;

        .dealer {

            background: #f5f5f5;
            padding: 30px;
            border-radius: 8px;

            .title {
                margin-bottom: 20px
            }

            .title h4 {
                margin-bottom: 3px;
                line-height: normal
            }

            .title .subTitle {
                font-size: 14px;
                display: block;
                line-height: normal
            }

            .address {
                margin-bottom: 20px
            }

            .phoneHolder {
                margin-bottom: 15px
            }

            .phoneHolder .wp-block-button:not(:last-child) {
                margin-bottom: 15px
            }

            .phone {
                display: inline-block;
                background: #d2fdf2;
                border-radius: 1em 1em 1em 1em;
                padding: 12px 24px;
                color: #000;
                text-decoration: none;
                line-height: normal;
                font-size: 18px
            }

            .phone:not(:last-child) {
                margin-bottom: 20px
            }

            .phone:hover {
                background: #00e0aa;
                color: #fff
            }

            .phone:hover:before {
                color: #fff
            }

            .phone:before {
                font-family: dashicons;
                content: "\f525";
                transform: rotateY(180deg);
                display: block;
                float: left;
                margin-right: 10px;
                color: #00e0aa
            }

            .linkHolder .wp-block-button:not(:last-child) {
                margin-bottom: 15px
            }

            .linkHolder a {
                display: block;
                font-size: 18px;
                color: #00e0aa;
                text-decoration: none
            }

            .linkHolder a:hover {
                text-decoration: underline
            }

            .linkHolder a:not(:last-child) {
                margin-bottom: 10px
            }

            .linkHolder a:before {
                font-family: dashicons;
                margin-right: 15px;
                float: left
            }

            .linkHolder .website:before {
                content: "\f11f"
            }

            .linkHolder .maps:before {
                content: "\f537"
            }

        }

    }

}