/* Контейнер для кнопок навигации */
.buttons-top-container {
    position: fixed;
    left: 30px;
    top: 88px;
    padding: 10px;
    z-index: 100;
}

.buttons-top-wrapper {
    
    border-radius: 12px;
    padding: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    border: 1px solid #444444;
    backdrop-filter: blur(10px);
    min-width: 60px;
}

.buttons-top {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Добавляем специфичность - применяем стили ТОЛЬКО к кнопкам внутри нашего меню */
.buttons-top .top-btn {
    width: 40px;
    height: 40px;
    background: #444444;
    border: 1.5px solid #555555;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
    position: relative;
}

/* Обертка для SVG для точного центрирования - ТОЛЬКО в нашем меню */
.buttons-top .top-btn svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    stroke: #cccccc;
    stroke-width: 1.5;
    transition: stroke 0.2s ease;
}

.buttons-top .top-btn:hover {
    background: #555555;
    border-color: #666666;
    transform: translateY(-1px);
}

.buttons-top .top-btn.active {
    background: #3b3b3b;
    border-color: #3399cc;
    box-shadow: 0 0 0 1px rgba(51, 153, 204, 0.3);
}

.buttons-top .top-btn.active svg {
    stroke: #ffffff;
}

/* Анимация при клике */
.buttons-top .top-btn:active {
    transform: translateY(0);
    transition: transform 0.1s;
}

/* Адаптивность */
@media (max-width: 1199px) {
    .buttons-top-container {
        left: 5px !important;
        top: 80px !important;
        padding: 5px;
    }
    
    .buttons-top-wrapper {
        padding: 5px;
        min-width: 52px;
    }
    
    .buttons-top .top-btn {
        width: 40px;
        height: 40px;
    }
    
    .buttons-top .top-btn svg {
        width: 22px !important;
        height: 22px !important;
        stroke-width: 1.3;
    }
}

@media (max-width: 480px) {
    .buttons-top-container {
        left: 5px !important;
        top: 80px !important;
        padding: 5px;
    }
    
    .buttons-top-wrapper {
        padding: 5px;
        min-width: 52px;
    }
    
    .buttons-top .top-btn {
        width: 40px;
        height: 40px;
    }
    
    .buttons-top .top-btn svg {
        width: 22px !important;
        height: 22px !important;
        stroke-width: 1.3;
    }
}

@media (max-width: 360px) {
    .buttons-top-container {
        left: 5px !important;
        top: 80px !important;
        padding: 5px;
    }
    
    .buttons-top-wrapper {
        padding: 5px;
        min-width: 52px;
    }
    
    .buttons-top .top-btn {
        width: 40px;
        height: 40px;
    }
    
    .buttons-top .top-btn svg {
        width: 22px !important;
        height: 22px !important;
        stroke-width: 1.3;
    }
}


/* Меню выбора модели */

.model-selector {

    position: sticky !important;
    top: 100px !important;
    align-self: start;
    z-index: 1000;
    border-radius: 8px;
    padding: 23px 10px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    background-color: #333333;
    border: 1px solid #444444;
    margin-left: 0px;
    padding-right: 20px; /* И справа тоже */
    height: 30px; 
}

.dropdown-btn {
    height: 32px; /* Высота контейнера */
    min-height: 32px; 
}

.model-label {
    font-family: 'Open Sans', Open Sans;
    font-size: 14px;
    color: #9e9e9e;
    font-weight: 400;
    flex-shrink: 0;
    margin-right: 0px;
    
}

.dropdown-container {
    position: relative;
    flex-grow: 1;
    min-width: 100px;
    height: 30px; 
    margin-right: 0px;
    margin-left: -8px;
}

.dropdown-btn {
    width: 103%;
    background-color: #444444;
    color: #ffffff;
    border: 1px solid #555555;
    border-radius: 6px;
    padding: 10px 5px;
    font-family: 'Open Sans', Open Sans;
    font-size: 15px;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.3s, border-color 0.3s;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dropdown-btn:hover {
    background-color: #555555;
    border-color: #666666;
}

.dropdown-btn:after {
    content: '';
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #cccccc;
    margin-left: 5px;
    flex-shrink: 0;
}

.dropdown-placeholder {
    color: #999999;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #444444;
    border-radius: 6px;
    border: 1px solid #555555;
    margin-top: 5px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    z-index: 100;
    display: none;
    max-height: 300px;
    overflow-y: auto;
}

.dropdown-menu.show {
    display: block;
}

.dropdown-item {
    padding: 10px 10px;
    font-family: 'Open Sans', Open Sans;
    font-size: 16px;
    color: #bdbdbd;
    cursor: pointer;
    transition: background-color 0.3s;
    border-bottom: 1px solid #555555;
}

.dropdown-item:last-child {
    border-bottom: none;
}

.dropdown-item:hover {
    background-color: #555555;
}

.dropdown-item.selected {
    background-color: #666666;
    color: #ffffff;
}

/* Адаптация меню выбора модели для мобильных - только отступы */
@media (max-width: 1199px) {
    .model-selector {
        top: 90px !important;
        align-self: start;
        z-index: 100;
        margin-left: 65px; /* Отступ слева */
        margin-right: 0px; /* Отступ справа 10px */
        width: calc(100% - 65px); /* 70px слева + 10px справа = 80px */
        box-sizing: border-box; /* Важно! Чтобы padding не увеличивал ширину */
        
    }

    .dropdown-container {
    position: relative;
    flex-grow: 1;
    min-width: 100px;
    height: 30px; 
    margin-right: -8px;
    margin-left: -8px;
}

}



/* Адаптация меню выбора модели для мобильных - только отступы */
@media (max-width: 768px) {
    .model-selector {
        top: 90px !important;
        align-self: start;
        z-index: 100;
        margin-left: 65px; /* Отступ слева */
        margin-right: 0px; /* Отступ справа 10px */
        width: calc(100% - 65px); /* 70px слева + 10px справа = 80px */
        box-sizing: border-box; /* Важно! Чтобы padding не увеличивал ширину */
        

}

.dropdown-container {
    position: relative;
    flex-grow: 1;
    min-width: 100px;
    height: 30px; 
    margin-right: -8px;
    margin-left: -8px;
}
    
}





/* Стили выпадающего списка выбора модели */
.dropdown-menu {
    position: absolute;
    top: calc(100% + 25px);
    left: 0;
    background-color: #444444;
    border-radius: 6px;
    border: 1px solid #555555;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    z-index: 1000;
    display: none;
    max-height: 300px;
    overflow-y: auto;
    min-width: 250px;
    width: 100%;
    box-sizing: border-box;
    
    /* Стили для скроллбара */
    scrollbar-width: thin;
    scrollbar-color: #666666 #444444;
}

/* Стилизация скроллбара для WebKit браузеров */
.dropdown-menu::-webkit-scrollbar {
    width: 8px;
}

.dropdown-menu::-webkit-scrollbar-track {
    background: #444444;
    border-radius: 0 6px 6px 0;
}

.dropdown-menu::-webkit-scrollbar-thumb {
    background-color: #666666;
    border-radius: 4px;
    border: 2px solid #444444;
}

.dropdown-menu::-webkit-scrollbar-thumb:hover {
    background-color: #777777;
}

.dropdown-menu.show {
    display: block;
}

.dropdown-item {
    padding: 12px 16px;
    font-family: 'Open Sans', Open Sans;
    font-size: 15px;
    color: #e0e0e0;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 1px solid #4a4a4a;
    text-decoration: none;
    display: block;
    line-height: 1.4;
}

.dropdown-item:last-child {
    border-bottom: none;
}

.dropdown-item:hover {
    background-color: #4d4d4d;
    color: #ffffff;
}

/* Активная модель - синий цвет (#3399cc) */
.dropdown-item.active {
    background-color: rgba(51, 153, 204, 0.2);
    color: #3399cc;
    position: relative;
}

.dropdown-item.active:before {
    content: "✓";
    position: absolute;
    left: 8px;
    color: #3399cc;
    font-weight: bold;
}

.dropdown-item.active .dropdown-item-text {
    color: #3399cc;
    font-weight: 600;
    margin-left: 15px;
}

/* Когда модель выбрана, текст на кнопке тоже синий */
.model-selected .dropdown-placeholder {
    color: #3399cc !important;
    font-weight: 600;
}

/* АДАПТАЦИЯ ДЛЯ РАЗНЫХ ЭКРАНОВ */

/* Десктопы (большие экраны) */
@media (min-width: 1200px) {
    .dropdown-menu {
        min-width: 300px;
        max-height: 400px;
    }
    
    .dropdown-item {
        padding: 14px 20px;
        font-size: 16px;
    }
}

/* Планшеты и маленькие десктопы */
@media (max-width: 1199px) and (min-width: 992px) {
    .dropdown-menu {
        min-width: 280px;
        max-height: 380px;
    }
    
    .dropdown-item {
        padding: 13px 18px;
        font-size: 15px;
    }
}

/* Планшеты (портрет) */
@media (max-width: 991px) and (min-width: 768px) {
    .dropdown-menu {
        min-width: 260px;
        max-height: 350px;
    }
    
    .dropdown-item {
        padding: 12px 16px;
        font-size: 15px;
    }
}

/* Мобильные (ландшафт) */
@media (max-width: 767px) and (min-width: 576px) {
    .dropdown-menu {
        min-width: 220px;
        max-height: 320px;
        left: -5px;
    }
    
    .dropdown-item {
        padding: 10px 14px;
        font-size: 14px;
    }
}

/* Мобильные (портрет) */
@media (max-width: 575px) {
    .dropdown-menu {
        min-width: 200px;
        max-height: 280px;
        left: -10px;
        width: calc(100% + 20px);
    }
    
    .dropdown-item {
        padding: 9px 12px;
        font-size: 14px;
    }
    
    .dropdown-item.active:before {
        left: 6px;
    }
    
    .dropdown-item.active .dropdown-item-text {
        margin-left: 12px;
    }
}

/* Для очень маленьких экранов */
@media (max-width: 375px) {
    .dropdown-menu {
        min-width: 180px;
        max-height: 250px;
        left: -15px;
        width: calc(100% + 30px);
    }
    
    .dropdown-item {
        padding: 8px 10px;
        font-size: 13px;
    }
}

/* КЛАССЫ ДЛЯ РЕДАКТИРОВАНИЯ ПАРАМЕТРОВ */

/* Редактируемый отступ слева */
.dropdown-menu.left-offset-0 { left: 0px; }
.dropdown-menu.left-offset-5 { left: 5px; }
.dropdown-menu.left-offset-10 { left: 10px; }
.dropdown-menu.left-offset-15 { left: 15px; }
.dropdown-menu.left-offset-20 { left: 20px; }
.dropdown-menu.left-offset-30 { left: 30px; }

/* Редактируемая ширина */
.dropdown-menu.width-auto { 
    width: auto; 
    min-width: auto; 
}
.dropdown-menu.width-full { 
    width: 100%; 
    min-width: 100%;
}
.dropdown-menu.width-250 { 
    width: 250px; 
    min-width: 250px;
}
.dropdown-menu.width-300 { 
    width: 300px; 
    min-width: 300px;
}
.dropdown-menu.width-350 { 
    width: 350px; 
    min-width: 350px;
}
.dropdown-menu.width-400 { 
    width: 400px; 
    min-width: 400px;
}

/* Редактируемая высота */
.dropdown-menu.height-auto { 
    max-height: none; 
    height: auto;
}
.dropdown-menu.height-200 { max-height: 200px; }
.dropdown-menu.height-250 { max-height: 250px; }
.dropdown-menu.height-300 { max-height: 300px; }
.dropdown-menu.height-350 { max-height: 350px; }
.dropdown-menu.height-400 { max-height: 400px; }
.dropdown-menu.height-500 { max-height: 500px; }

/* Редактируемый размер шрифта для элементов */
.dropdown-menu.font-sm .dropdown-item { font-size: 14px !important; }
.dropdown-menu.font-md .dropdown-item { font-size: 16px !important; }
.dropdown-menu.font-lg .dropdown-item { font-size: 18px !important; }
.dropdown-menu.font-xl .dropdown-item { font-size: 20px !important; }

/* Редактируемый размер шрифта для кнопки */
.dropdown-btn.font-sm { font-size: 14px !important; }
.dropdown-btn.font-md { font-size: 16px !important; }
.dropdown-btn.font-lg { font-size: 18px !important; }
.dropdown-btn.font-xl { font-size: 20px !important; }

/* Дополнительные стили для скроллбара при разных высотах */
.dropdown-menu.height-200::-webkit-scrollbar,
.dropdown-menu.height-250::-webkit-scrollbar,
.dropdown-menu.height-300::-webkit-scrollbar {
    width: 6px;
}

.dropdown-menu.height-350::-webkit-scrollbar,
.dropdown-menu.height-400::-webkit-scrollbar,
.dropdown-menu.height-500::-webkit-scrollbar {
    width: 8px;
}

/* Для Firefox */
.dropdown-menu.height-200,
.dropdown-menu.height-250,
.dropdown-menu.height-300 {
    scrollbar-width: thin;
}

.dropdown-menu.height-350,
.dropdown-menu.height-400,
.dropdown-menu.height-500 {
    scrollbar-width: auto;
}

/* ============================================
   Текст AiMax
   ============================================ */

.aimax-header-text {
    
    display: inline-block;
    margin-left: 0px;
    transform: translateY(0px);
    vertical-align: middle;
    cursor: default;
}

.aimax-letters {
    display: flex;
    gap: 1px;
}

.letter {
    font-family: 'Open Sans', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #4facfe;
    position: relative;
    display: inline-block;
    transition: all 0.2s ease;
    text-shadow: 0 0 8px rgba(79, 172, 254, 0.3);
}

/* КЛЮЧЕВОЕ ИЗМЕНЕНИЕ: Увеличиваем общую длительность анимации,
   чтобы добавить паузу в конце */
.letter {
    animation: letterGlowWithPause 8s infinite; /* 8 секунд вместо 2.5 */
}

/* Задержки для каждой буквы */
.letter:nth-child(1) { animation-delay: 0s; }      /* A */
.letter:nth-child(2) { animation-delay: 0.5s; }    /* i */
.letter:nth-child(3) { animation-delay: 1s; }      /* M */
.letter:nth-child(4) { animation-delay: 1.5s; }    /* a */
.letter:nth-child(5) { animation-delay: 2s; }      /* x */

/* Анимация с паузой:
   - 0-25%: Анимация свечения (2 секунды)
   - 25-100%: Пауза (6 секунд) */
@keyframes letterGlowWithPause {
    /* =========== ФАЗА АНИМАЦИИ (0-25% = 2 секунды) =========== */
    
    /* Начало - синяя буква */
    0% {
        color: #4facfe;
        text-shadow: 0 0 8px rgba(79, 172, 254, 0.3);
        transform: scale(1);
    }
    
    /* Начинает светиться (5% от 8с = 0.4с) */
    5% {
        color: #a5d8ff;
        text-shadow: 0 0 12px rgba(79, 172, 254, 0.6);
        transform: scale(1.03);
    }
    
    /* Пик свечения (10% от 8с = 0.8с) */
    10% {
        color: #ffffff;
        text-shadow: 
            0 0 16px rgba(255, 255, 255, 0.9),
            0 0 32px rgba(255, 255, 255, 0.6);
        transform: scale(1.05);
    }
    
    /* Затухание (15% от 8с = 1.2с) */
    15% {
        color: #a5d8ff;
        text-shadow: 0 0 12px rgba(79, 172, 254, 0.6);
        transform: scale(1.03);
    }
    
    /* Возврат к синему (20% от 8с = 1.6с) */
    20% {
        color: #4facfe;
        text-shadow: 0 0 8px rgba(79, 172, 254, 0.3);
        transform: scale(1);
    }
    
    /* Конец анимации (25% от 8с = 2с) */
    25% {
        color: #4facfe;
        text-shadow: 0 0 8px rgba(79, 172, 254, 0.3);
        transform: scale(1);
    }
    
    /* =========== ФАЗА ПАУЗЫ (25-100% = 6 секунд) =========== */
    
    /* Все буквы синие и не меняются */
    25%, 100% {
        color: #4facfe;
        text-shadow: 0 0 8px rgba(79, 172, 254, 0.3);
        transform: scale(1);
    }
}

/* ============================================
   ВАРИАНТ С НАСТРАИВАЕМОЙ ПАУЗОЙ
   ============================================ */

/* Используем CSS переменные для настройки */
.aimax-header-text.pause-adjusted {
    --animation-duration: 2s;    /* Длительность анимации свечения */
    --pause-duration: 4s;        /* Длительность паузы */
    --total-duration: calc(var(--animation-duration) + var(--pause-duration));
}

.pause-adjusted .letter {
    animation: adjustablePauseGlow var(--total-duration) infinite;
}

/* Разные задержки для букв */
.pause-adjusted .letter:nth-child(1) { animation-delay: 0s; }
.pause-adjusted .letter:nth-child(2) { animation-delay: 0.4s; }
.pause-adjusted .letter:nth-child(3) { animation-delay: 0.8s; }
.pause-adjusted .letter:nth-child(4) { animation-delay: 1.2s; }
.pause-adjusted .letter:nth-child(5) { animation-delay: 1.6s; }

@keyframes adjustablePauseGlow {
    /* Анимация (первые var(--animation-duration)) */
    0% {
        color: #4facfe;
        text-shadow: 0 0 8px rgba(79, 172, 254, 0.3);
    }
    
    25% {
        color: #a5d8ff;
        text-shadow: 0 0 12px rgba(79, 172, 254, 0.6);
    }
    
    50% {
        color: #ffffff;
        text-shadow: 
            0 0 16px rgba(255, 255, 255, 0.9),
            0 0 32px rgba(255, 255, 255, 0.6);
    }
    
    75% {
        color: #a5d8ff;
        text-shadow: 0 0 12px rgba(79, 172, 254, 0.6);
    }
    

}

/* ============================================
   ПРОСТОЙ ВАРИАНТ С ФИКСИРОВАННОЙ ПАУЗОЙ
   ============================================ */

/* Простой расчет: 2с анимация + 3с пауза = 5с общая длительность */
@keyframes simplePauseGlow {
    /* Анимация: 0-40% (2 секунды из 5) */
    0% {
        color: #4facfe;
        text-shadow: 0 0 8px rgba(79, 172, 254, 0.3);
    }
    
    10% {
        color: #a5d8ff;
        text-shadow: 0 0 12px rgba(79, 172, 254, 0.6);
    }
    
    20% {
        color: #ffffff;
        text-shadow: 
            0 0 16px rgba(255, 255, 255, 0.9),
            0 0 32px rgba(255, 255, 255, 0.6);
    }
    
    30% {
        color: #a5d8ff;
        text-shadow: 0 0 12px rgba(79, 172, 254, 0.6);
    }
    
    40% {
        color: #4facfe;
        text-shadow: 0 0 8px rgba(79, 172, 254, 0.3);
    }
    
    /* Пауза: 40-100% (3 секунды) */
    40%, 100% {
        color: #4facfe;
        text-shadow: 0 0 8px rgba(79, 172, 254, 0.3);
    }
}

/* Применяем с разными задержками */
.pause-simple .letter {
    animation: simplePauseGlow 5s infinite; /* 5 секунд = 2с анимация + 3с пауза */
}

.pause-simple .letter:nth-child(1) { animation-delay: 0s; }
.pause-simple .letter:nth-child(2) { animation-delay: 0.4s; }
.pause-simple .letter:nth-child(3) { animation-delay: 0.8s; }
.pause-simple .letter:nth-child(4) { animation-delay: 1.2s; }
.pause-simple .letter:nth-child(5) { animation-delay: 1.6s; }

/* ============================================
   ВАРИАНТ С ДЛИННОЙ ПАУЗОЙ (5 секунд)
   ============================================ */

@keyframes longPauseGlow {
    /* Анимация: 0-28.5% (2 секунды из 7) */
    0% {
        color: #4facfe;
        text-shadow: 0 0 8px rgba(79, 172, 254, 0.3);
    }
    
    7% {
        color: #a5d8ff;
        text-shadow: 0 0 12px rgba(79, 172, 254, 0.6);
    }
    
    14% {
        color: #ffffff;
        text-shadow: 
            0 0 16px rgba(255, 255, 255, 0.9),
            0 0 32px rgba(255, 255, 255, 0.6);
    }
    
    21% {
        color: #a5d8ff;
        text-shadow: 0 0 12px rgba(79, 172, 254, 0.6);
    }
    
    28.5% {
        color: #4facfe;
        text-shadow: 0 0 8px rgba(79, 172, 254, 0.3);
    }
    
    /* Пауза: 28.5-100% (5 секунд) */
    28.5%, 100% {
        color: #4facfe;
        text-shadow: 0 0 8px rgba(79, 172, 254, 0.3);
    }
}

.long-pause .letter {
    animation: longPauseGlow 7s infinite; /* 7 секунд = 2с анимация + 5с пауза */
}

.long-pause .letter:nth-child(1) { animation-delay: 0s; }
.long-pause .letter:nth-child(2) { animation-delay: 0.4s; }
.long-pause .letter:nth-child(3) { animation-delay: 0.8s; }
.long-pause .letter:nth-child(4) { animation-delay: 1.2s; }
.long-pause .letter:nth-child(5) { animation-delay: 1.6s; }

/* ============================================
   ЭФФЕКТ ПРИ НАВЕДЕНИИ
   ============================================ */

.aimax-header-text:hover .letter {
    animation-play-state: paused;
    color: #a5d8ff;
    text-shadow: 
        0 0 12px rgba(79, 172, 254, 0.7),
        0 0 24px rgba(79, 172, 254, 0.4);
    transform: scale(1.03);
    transition: all 0.15s ease;
}

/* ============================================
   МОБИЛЬНАЯ ВЕРСИЯ
   ============================================ */

@media (max-width: 1024px) {
    .aimax-header-text {
        display: inline-block; /* без !important */
        margin-left: 10px; /* меньший отступ */
    }
    
    .letter {
        font-size: 20px; /* меньший размер на мобильных */
    }
}

@media (max-width: 768px) {
    .aimax-header-text {
        margin-left: 5px;
    }
    
    .letter {
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    .aimax-header-text {
        /* Только на очень маленьких можно скрыть */
        display: none;
    }
}