/* ГАРАНТИРУЕМ, ЧТО МОДАЛЬНОЕ ОКНО ЗАПЧАСТИ БУДЕТ ВЫШЕ ЛЮБОГО СТАРТОВОГО ФОНА */
#partDetailModal.modal {
    z-index: 4000 !important;
}

/* Фон, который открывается с модальным окном запчастей, должен быть на 1 ниже */
#partDetailModal ~ .modal-backdrop {
    z-index: 3999 !important;
}

/* ПРИОРИТЕТ Z-INDEX: Модальное окно поверх всего */
#donorimageModal.modal {
    /* ЭТО НУЖНО УДАЛИТЬ ИЛИ ЗАКОММЕНТИРОВАТЬ */
    z-index: 4000 !important;
}



/* 🔑 Изображение: ИЗМЕНЕНИЕ ДЛЯ РАСТЯГИВАНИЯ */
#donorimageModal .carousel-item img {
    border-radius: 0 !important;
    max-height: 100%;
    height: 100%;
    width: 100%;
    object-fit: cover !important;
    object-position: center !important;
    position: relative;
}

/* ========================================================= */
/* СТИЛИ ДЛЯ КНОПОК (ИЗМЕНЕНИЯ В КРЕСТИКЕ) */
/* ========================================================= */

/* 🔑 КРЕСТИК: ОЧЕНЬ КРУПНЫЙ (5rem) И ВЫРОВНЕН ПО ВЕРТИКАЛИ СО СТРЕЛКАМИ */
#donorimageModal .btn-close {
    /* 🔑 УВЕЛИЧЕНИЕ РАЗМЕРА КОНТЕЙНЕРА */
    width: 5rem;
    height: 5rem;

    /* Убираем фон */
    background-color: transparent;
    border-radius: 0;
    filter: invert(1); /* Делаем крестик белым */
    right: 0;
    /* НОВОЕ ПОЗИЦИОНИРОВАНИЕ: Вертикальное центрирование и выравнивание со стрелкой */
    top: 0; /* Смещаем на половину высоты */
    margin: 0; /* Сбрасываем лишние margin от Bootstrap */
    z-index: 1060;
}

#donorimageModal .btn-close:focus,
#donorimageModal .btn-close:active {
    /* 🔑 Убираем стандартное внешнее свечение */
    box-shadow: none !important;
    /* Убеждаемся, что фон остается прозрачным */
    background-color: transparent !important;
    /* Убираем рамку, если она есть */
    outline: none !important;
}

#donorimageModal .btn-close:hover {
    opacity: 1;
}

/* ---------------------------------------------------- */
/* СТИЛИ ДЛЯ БОЛЬШИХ КНОПОК НАВИГАЦИИ (СТРЕЛОК) */
/* ---------------------------------------------------- */

/* Сдвигаем стрелки влево и вправо, чтобы они выходили за пределы изображения */
#donorimageModal .carousel-control-prev{
    width: 5rem;
    opacity: 0.8;
    transition: opacity 0.15s ease;
}
#donorimageModal .carousel-control-next {
    width: 5rem;
    opacity: 0.8;
    transition: opacity 0.15s ease;
}

#donorimageModal .carousel-control-prev-icon,
#donorimageModal .carousel-control-next-icon {
    background-color: transparent;
    border-radius: 0;
    padding: 0.5rem;
    width: 3.5rem;
    height: 3.5rem;
}




/* ========================================================= */
/* 2. СТИЛИ ДЛЯ ВЛОЖЕННОЙ ГАЛЕРЕИ #imageModal */
/* ========================================================= */

/* Устанавливаем высокий Z-index для галереи, чтобы она была поверх модалки запчасти */
#imageModal.modal {
    z-index: 4005 !important;
}

/* 🔑 Изображение: ИЗМЕНЕНИЕ ДЛЯ РАСТЯГИВАНИЯ */
#imageModal .carousel-item img {
    border-radius: 0 !important;
    max-height: 100%;
    height: 100%;
    width: 100%;
    object-fit: cover !important;
    object-position: center !important;
    position: relative;
}

/* ========================================================= */
/* СТИЛИ ДЛЯ КНОПОК (ИЗМЕНЕНИЯ В КРЕСТИКЕ) */
/* ========================================================= */

/* 🔑 КРЕСТИК: ОЧЕНЬ КРУПНЫЙ (5rem) И ВЫРОВНЕН ПО ВЕРТИКАЛИ СО СТРЕЛКАМИ */
#imageModal .btn-close {
    /* 🔑 УВЕЛИЧЕНИЕ РАЗМЕРА КОНТЕЙНЕРА */
    width: 5rem;
    height: 5rem;

    /* Убираем фон */
    background-color: transparent;
    border-radius: 0;
    filter: invert(1); /* Делаем крестик белым */
    right: 0;
    /* НОВОЕ ПОЗИЦИОНИРОВАНИЕ: Вертикальное центрирование и выравнивание со стрелкой */
    top: 0; /* Смещаем на половину высоты */
    margin: 0; /* Сбрасываем лишние margin от Bootstrap */
    z-index: 1060;
}

#imageModal .btn-close:focus,
#imageModal .btn-close:active {
    /* 🔑 Убираем стандартное внешнее свечение */
    box-shadow: none !important;
    /* Убеждаемся, что фон остается прозрачным */
    background-color: transparent !important;
    /* Убираем рамку, если она есть */
    outline: none !important;
}

#imageModal .btn-close:hover {
    opacity: 1;
}

/* ---------------------------------------------------- */
/* СТИЛИ ДЛЯ БОЛЬШИХ КНОПОК НАВИГАЦИИ (СТРЕЛОК) */
/* ---------------------------------------------------- */

/* Сдвигаем стрелки влево и вправо, чтобы они выходили за пределы изображения */
#imageModal .carousel-control-prev{
    width: 5rem;
    opacity: 0.8;
    transition: opacity 0.15s ease;
}
#imageModal .carousel-control-next {
    width: 5rem;
    opacity: 0.8;
    transition: opacity 0.15s ease;
}

#imageModal .carousel-control-prev-icon,
#imageModal .carousel-control-next-icon {
    background-color: transparent;
    border-radius: 0;
    padding: 0.5rem;
    width: 3.5rem;
    height: 3.5rem;
}