.cit-compare-wrapper {

    width: 100%;

    max-width: 1600px;

    margin: 50px auto;
}

/*
|--------------------------------------------------------------------------
| Search Area
|--------------------------------------------------------------------------
*/

.cit-compare-search-area {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 24px;

    margin-bottom: 35px;
}

.cit-search-box {

    position: relative;
}

.cit-search-input {

    width: 100%;

    height: 56px;

    padding: 0 18px;

    border: 1px solid var(--cit-border-color);

    background: #ffffff;

    font-size: 16px;

    color: #222222;

    outline: none;

    box-sizing: border-box;

    transition: all 0.2s ease;
}

.cit-search-input:focus {

    border-color: #999999;
}

/*
|--------------------------------------------------------------------------
| Search Results
|--------------------------------------------------------------------------
*/

.cit-search-results {

    position: absolute;

    top: 100%;

    left: 0;

    width: 100%;

    background: #ffffff;

    border: 1px solid var(--cit-border-color);

    border-top: none;

    z-index: 9999;

    display: none;

    max-height: 320px;

    overflow-y: auto;

    box-sizing: border-box;
}

.cit-result-item {

    padding: 14px 18px;

    cursor: pointer;

    border-bottom: 1px solid #eeeeee;

    transition: background 0.2s ease;

    font-size: 15px;

    line-height: 1.5;
}

.cit-result-item:hover {

    background: #f5f5f5;
}

/*
|--------------------------------------------------------------------------
| Compare Results
|--------------------------------------------------------------------------
*/

.cit-compare-results {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 35px;

    align-items: start;
}

#cit-compare-left,
#cit-compare-right {

    width: 100%;
}

/*
|--------------------------------------------------------------------------
| Ultrawide
|--------------------------------------------------------------------------
*/

@media screen and (min-width: 1920px) {

    .cit-compare-wrapper {

        max-width: 1800px;
    }

    .cit-compare-results {

        gap: 45px;
    }

    .cit-search-input {

        height: 60px;

        font-size: 18px;
    }
}

/*
|--------------------------------------------------------------------------
| Desktop
|--------------------------------------------------------------------------
*/

@media screen and (max-width: 1200px) {

    .cit-compare-results {

        gap: 25px;
    }
}

/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

@media screen and (max-width: 991px) {

    .cit-compare-search-area {

        grid-template-columns: 1fr;
    }

    .cit-compare-results {

        grid-template-columns: 1fr;
    }
}

/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media screen and (max-width: 767px) {

    .cit-search-input {

        height: 50px;

        font-size: 14px;

        padding: 0 14px;
    }

    .cit-result-item {

        font-size: 14px;

        padding: 12px 14px;
    }

    .cit-compare-wrapper {

        margin: 30px auto;
    }
}

/*
|--------------------------------------------------------------------------
| Small Mobile
|--------------------------------------------------------------------------
*/

@media screen and (max-width: 480px) {

    .cit-search-input {

        height: 46px;

        font-size: 13px;
    }

    .cit-result-item {

        font-size: 13px;
    }
}