/* =========================================================
   ТЕХНИЧЕСКИЙ КОНТРОЛЬ — ССЫЛКА
   ========================================================= */

.technical-control-preview-button {

    display: inline-block;

    line-height: 0;

    padding: 0;

    background: transparent;

    border: 3px solid var(--blue);

    border-radius: 3px;

    box-sizing: border-box;

    color: var(--blue);

    cursor: pointer;

    transform: scale(1);

    transition:
        color .2s ease,
        border-color .2s ease,
        transform .2s ease;

}


/* =========================================================
   ИКОНКА АВТОМОБИЛЯ
   ========================================================= */

.technical-control-car-icon {

    width: 141px;
    height: 182px;

    background-color: currentColor;

    -webkit-mask-image: url("/static/assets/svg/small_car.svg");
    mask-image: url("/static/assets/svg/small_car.svg");

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    -webkit-mask-position: center;
    mask-position: center;

    -webkit-mask-size: contain;
    mask-size: contain;

}


/* =========================================================
   НАВЕДЕНИЕ
   ========================================================= */

.technical-control-preview-button:hover {

    color: var(--blue-dark);

    border-color: var(--blue-dark);

    transform: scale(1.1);

}

/* =========================================================
   ТЕХНИЧЕСКИЙ КОНТРОЛЬ ЗАГОЛОВОК
   ========================================================= */
   
.technical-control-modal-title {

    height: 100%;

    display: flex;
    align-items: center;

    padding: 0 20px;

    box-sizing: border-box;

    font-family:
        Inter,
        system-ui,
        sans-serif;

    font-size: 17px;
    font-weight: 500;
    line-height: 1;

    justify-content: center;

    color: #FFFFFF;

}

/* =========================================================
   НАСТРОЙКА КОД - ПОВРЕЖДЕНИЕ
   ========================================================= */

.technical-control-legend > div:not(.technical-control-assessment) {
    display: grid;
    grid-template-columns: 50px 1fr;
}

.technical-control-section-title {
    margin-bottom: 6px;
}

/* =========================================================
   ТЕХНИЧЕСКИЙ КОНТРОЛЬ — МОДАЛКА
   ========================================================= */

.technical-control-modal-window {

    width: 95%;
    max-width: 1200px;

}


/* =========================================================
   ЗАГОЛОВОК
   ========================================================= */

.technical-control-modal-title {

    height: 100%;

    display: flex;
    align-items: center;

    padding: 0 20px;

    box-sizing: border-box;

    font-family:
        Inter,
        system-ui,
        sans-serif;

    font-size: 17px;
    font-weight: 500;
    line-height: 1;

    color: #FFFFFF;

}


/* =========================================================
   ОСНОВНАЯ ОБЛАСТЬ
   ========================================================= */

.technical-control-content {

    display: grid;

    grid-template-columns:
        0.6fr
        1.7fr
        1.1fr;

    gap: 20px;

    padding: 28px 30px 0;

    background: #F3F4F6;

}

/* =========================================================
   СХЕМА АВТОМОБИЛЯ
   ========================================================= */

.technical-control-car {

    display: flex;

    align-items: center;
    justify-content: center;

}


#car-map {

    position: relative;

    display: inline-block;

}


#car-map img {

    display: block;

    width: 100%;

    height: auto;

}


#car-overlay {

    position: absolute;

    inset: 0;

    pointer-events: none;

}


.car-marker {

    position: absolute;

    width: 17px;
    height: 17px;

    display: flex;

    align-items: center;
    justify-content: center;

    font-family:
        Inter,
        system-ui,
        sans-serif;

    font-size: 17px;
    font-weight: 700;
    line-height: 1;

    color: var(--blue);

}


/* =========================================================
   РАСШИФРОВКА ОБОЗНАЧЕНИЙ
   ========================================================= */

.technical-control-legend {

    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: 8px;

    font-family:
        Inter,
        system-ui,
        sans-serif;

    font-size: 17px;

    line-height: 1.4;

    color: #374151;

}


/* =========================================================
   ИНФОРМАЦИЯ О ТЕХНИЧЕСКОМ КОНТРОЛЕ
   ========================================================= */

.technical-control-info {

    display: flex;

    flex-direction: column;

    justify-content: center;

    font-family:
        Inter,
        system-ui,
        sans-serif;

    font-size: 17px;

    line-height: 1.4;

    color: #374151;

}


.technical-control-section-title {

    margin-bottom: 8px;

    font-weight: 500;

    color: #111827;

}


.technical-control-list {

    min-height: 22px;

}


.technical-control-specialist {

    margin-top: 24px;

}


.technical-control-date {

    margin-top: 6px;

}


/* =========================================================
   ВЫРАВНИВАНИЕ SVG И ТЕКСТА
   ========================================================= */
   
.technical-control-damage {

    display: flex;

    align-items: center;

    gap: 8px;

}

.technical-control-damage span {

    font-size: 17px;

    line-height: 1.2;

}

   
/* =========================================================
   КНОПКА — ЗАКРЫТЬ ТЕХНИЧЕСКИЙ КОНТРОЛЬ
   ========================================================= */


.technical-control-actions {

    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;

    padding: 60px 30px 20px;

    box-sizing: border-box;

    background: #F3F4F6;
	

}

/* =========================================================
   СПИСОК - (.)
   ========================================================= */

.technical-control-list {
    min-height: 22px;
}

.technical-control-list-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.technical-control-list-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: var(--blue);
}

.technical-control-accent {
    color: var(--blue);
}

/* =========================================================
   ТЕХНИЧЕСКАЯ ОЦЕНКА
   ========================================================= */

.technical-control-assessment {

    margin-top: 28px;

}

.technical-control-assessment-item {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 7px;

    line-height: 1.4;

}