/* =========================================
   FEATURES SLIDER STYLES
   ========================================= */

/* Отступы самой секции на странице */
.dp-features-section {
    padding: 80px 0;
    background-color: #ffffff;
    font-family: 'PP Neue Montreal', sans-serif;
}

.dp-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

/* --- ГЛАВНЫЙ КОНТЕЙНЕР (Серый, скругленный) --- */
.dp-features-wrapper {
    display: flex;
    align-items: stretch;
    background-color: #585858; /* Темно-серый фон */
    border-radius: 24px;       /* Скругление всего блока */
    overflow: hidden;
    color: #ffffff;            /* Весь текст белый */
    min-height: 600px;
}

/* --- ЛЕВАЯ КОЛОНКА (МЕНЮ) --- */
.dp-features-nav {
    width: 30%;
    /* Большие отступы, чтобы меню дышало */
    padding: 50px 0 50px 50px; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Вертикальная линия справа, отделяющая меню от контента */
    border-right: 1px solid rgba(255,255,255,0.1); 
}

.dp-features-title {
    font-size: 34px;
    line-height: 1.1;
    font-weight: 400;
    margin-bottom: 40px;
    padding-right: 40px;
    color: #ffffff;
}

.dp-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    padding-right: 30px; /* Отступ от разделительной линии */
}

/* Пункт меню */
.dp-nav-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 0;
    cursor: pointer;
    /* Горизонтальная линия под каждым пунктом */
    border-bottom: 1px solid rgba(255, 255, 255, 0.2); 
    opacity: 0.5; /* Полупрозрачный по умолчанию */
    transition: all 0.3s ease;
}

/* Линия сверху для первого элемента (чтобы было как в таблице) */
.dp-nav-item:first-child {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.dp-nav-item:hover,
.dp-nav-item.active {
    opacity: 1; /* При наведении и активе — полная яркость */
}

/* Миниатюра в меню */
.dp-nav-thumb {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    overflow: hidden;
    background: #ffffff; /* Белый фон под маленькой картинкой */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dp-nav-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dp-nav-item span {
    font-size: 18px;
    font-weight: 500;
    color: #ffffff;
}

/* --- ПРАВАЯ КОЛОНКА (КОНТЕНТ) --- */
.dp-features-content {
    width: 70%;
    position: relative;
    overflow: hidden; /* Скрываем неактивные слайды */
    cursor: grab;     /* Курсор "рука" для свайпа */
}

.dp-features-content:active {
    cursor: grabbing;
}

/* Слайд */
.dp-feature-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex; /* Flex для расположения Картинка + Текст */
    align-items: center; /* Центрируем по вертикали */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
    z-index: 1;
}

.dp-feature-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

/* --- КАРТИНКА СЛАЙДА (ИСПРАВЛЕНО) --- */
.dp-slide-image {
    width: 45%;
    height: 100%;
    /* Отступы, чтобы картинка не прилипала к краям и выглядела блоком */
    padding: 40px; 
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dp-slide-image img {
    width: 100%;
    height: auto;
    max-height: 550px;     /* Ограничиваем высоту, чтобы не растягивалась */
    aspect-ratio: 3.5/5;   /* Сохраняем вертикальную пропорцию */
    object-fit: cover;
    border-radius: 20px;   /* Закругленные края у картинки */
    display: block;
    /* Тень для объема (опционально) */
    box-shadow: 0 10px 30px rgba(0,0,0,0.2); 
}

/* --- ТЕКСТ СЛАЙДА --- */
.dp-slide-info {
    width: 55%;
    padding: 60px 60px 60px 20px; /* Отступы справа */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Анимация текста при смене слайда */
.dp-feature-slide.active .dp-slide-info {
    animation: slideContentUp 0.6s ease-out forwards;
}

@keyframes slideContentUp {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

.dp-slide-info h3 {
    font-size: 28px;
    font-weight: 400;
    text-transform: uppercase;
    margin-bottom: 20px;
    color: #ffffff;
}

.dp-desc {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 30px;
    color: rgba(255, 255, 255, 0.9);
}

/* Wavelength + Dots */
.dp-wavelength {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-bottom: 25px;
    margin-bottom: 25px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3); /* Белая линия */
}

.dp-wavelength .label {
    font-size: 14px;
    text-transform: uppercase;
    opacity: 0.8;
}

.dp-wavelength .value {
    font-size: 18px;
    font-weight: 700;
}

.dp-dots {
    display: flex;
    gap: 6px;
    margin-left: 10px;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.3); /* Неактивная точка */
}

.dot.filled {
    background-color: #ffffff; /* Активная белая точка */
}

/* Список преимуществ */
.dp-benefits {
    list-style: none;
    padding: 0;
    margin: 0;
}

.dp-benefits li {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 12px;
    font-size: 15px;
    line-height: 1.4;
    color: #ffffff;
}

.dp-benefits li img {
    width: 24px;
    height: 24px;
    filter: brightness(0) invert(1); /* Инвертируем черные иконки в белые */
}

/* --- МОБИЛЬНАЯ ВЕРСИЯ (< 1024px) --- */
@media (max-width: 1024px) {
    .dp-features-wrapper {
        flex-direction: column;
        height: auto;
    }
    
    .dp-features-nav {
        width: 100%;
        padding: 40px 20px;
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.2);
    }
    
    .dp-nav-list {
        display: flex;
        overflow-x: auto; /* Горизонтальный скролл */
        gap: 15px;
        padding-right: 0;
        padding-bottom: 10px; /* Место для скроллбара */
    }
    
    .dp-nav-item {
        flex-shrink: 0;
        flex-direction: column;
        text-align: center;
        width: 100px;
        border: none;
        padding: 10px;
        background: rgba(255,255,255,0.1); /* Плашки на мобилке */
        border-radius: 10px;
    }
    
    .dp-nav-item.active {
        background: rgba(255,255,255,0.25);
        opacity: 1;
    }
    
    .dp-nav-item span {
        font-size: 13px;
        margin-top: 8px;
    }

    .dp-features-content {
        width: 100%;
        min-height: auto;
    }
    
    .dp-feature-slide {
        position: relative; /* На мобилке ставим relative, чтобы высота считалась */
        flex-direction: column;
        display: none;
        opacity: 1;
        visibility: visible;
    }
    
    .dp-feature-slide.active {
        display: flex;
    }
    
    .dp-slide-image {
        width: 100%;
        height: auto;
        padding: 30px 20px 0;
    }
    
    .dp-slide-image img {
        max-height: 350px;
    }
    
    .dp-slide-info {
        width: 100%;
        padding: 30px 20px;
    }
}