/* File: vk-chat-search/assets/css/vk-slider.css */

.vk-post-slider {
    position: relative;
    width: 600px;
    height: 400px;
    max-width: 100%; /* Адаптивность для мобильных */
    margin: 0 auto 10px auto; /* Центрирование и отступ снизу */
    overflow: hidden;
    border-radius: 8px;
    background-color: #e1e3e6; /* Фон на случай, если фото грузится */
    -webkit-user-select: none; /* Запрет выделения */
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.slider-slides {
    display: flex;
    height: 100%;
    transition: transform 0.4s ease-in-out;
}

.slider-slide {
    min-width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.slider-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Это свойство идеально решает задачу вписывания и обрезки */
    object-position: center; /* Центрируем изображение перед обрезкой */
}

.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(20, 20, 20, 0.6);
    color: white;
    border: none;
    font-size: 24px;
    font-weight: bold;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease, background-color 0.2s ease;
}

.vk-post-slider:hover .slider-arrow {
    opacity: 1; /* Показываем стрелки при наведении на слайдер */
}

.slider-arrow:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.slider-arrow.prev {
    left: 10px;
    padding-right: 2px; /* Небольшая коррекция для центрирования символа */
}

.slider-arrow.next {
    right: 10px;
    padding-left: 2px; /* Небольшая коррекция для центрирования символа */
}