.suggestions-suggestions {
    background-color: #12122d; /* bg-cosmic-800 */
    border: 1px solid #1a1a40; /* border-cosmic-600 */
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 4px 20px rgba(125, 95, 255, 0.3); /* glow эффект */
    margin-top: 4px; /* Отступ от поля ввода */
    z-index: 1000; /* Убедимся, что список выше других элементов */
    font-family: 'Roboto', sans-serif; /* Соответствие шрифта */
    font-size: 16px; /* Соответствие размера текста */
    color: #ffffff; /* Белый текст */
    max-width: 100%; /* Ограничиваем ширину */
    width: 100%; /* Занимает ширину поля ввода */
    box-sizing: border-box;
}

/* Элемент списка предложений */
.suggestions-suggestion {
    padding: 12px 16px; /* Отступы, как у input */
    cursor: pointer;
    transition: all 0.2s ease; /* Плавный переход для ховер-эффекта */
    background-color: #12122d; /* bg-cosmic-800 */
    border-bottom: 1px solid #1a1a40; /* Разделитель между элементами */
}

/* Последний элемент без нижней границы */
.suggestions-suggestion:last-child {
    border-bottom: none;
}
#tariff-price {
    background: rgba(26, 26, 46, 0.9); /* Фон для читаемости, соответствует bg-cosmic-800/90 */
    padding: 2px 6px;
    border-radius: 4px;
    line-height: 1.2;
    font-size: 0.75rem; /* Мелкий шрифт (12px) */
}

/* Ховер-эффект для элемента списка */
.suggestions-suggestion:hover,
.suggestions-suggestion.suggestions-selected {
    background: linear-gradient(90deg, #2a2a5a, #3a3a7a); /* Градиент от cosmic-600 к cosmic-500 */
    color: #ffd166; /* Цвет текста star при ховере */
    border-radius: 0.25rem; /* Небольшое закругление углов */
}

/* Выделенный элемент (при навигации клавишами) */
.suggestions-suggestion.suggestions-selected {
    box-shadow: 0 0 10px rgba(125, 95, 255, 0.4); /* Эффект свечения, как у input:focus */
}

/* Подсветка совпадающего текста */
.suggestions-suggestion strong {
    color: #9d7dff; /* nebula-400 */
    font-weight: 600;
}
@media (max-width: 640px) {
    #tariff-price {
        font-size: 0.65rem;
        padding: 1px 4px;
    }
}
/* Адаптивность для мобильных устройств */
@media (max-width: 767px) {
    .suggestions-suggestions {
        max-height: 200px; /* Ограничение высоты на мобильных */
        overflow-y: auto; /* Прокрутка при большом количестве предложений */
        font-size: 14px; /* Меньший шрифт для компактности */
    }
    
    .suggestions-suggestion {
        padding: 10px 12px; /* Уменьшенные отступы */
    }
}
#main-order-form input[type="email"]::placeholder {
    color: #9d7dff; /* nebula-400 для плейсхолдера */
    opacity: 0.7;
}
.btn-primary.loading {
    pointer-events: none;
    opacity: 0.7;
}
.btn-primary.loading i {
    animation: spin 1s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

    html, body {
    overflow-x: hidden;
    width: 100%;
}
textarea:focus-visdible {
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
}
html {
    scroll-behavior: smooth;
}
            body {
                background: #000;
                background-attachment: fixed;
                overflow-x: hidden;
                font-family: "Roboto", sans-serif;
                color: #ffffff;

            }
.card-top_info {
    text-align: left;
}
.card-top_info p {
    padding-bottom: 20px;
}
.card-top_info .sample-btn {
    padding: 5px 20px !important;
}
            .constellation {
                position: fixed;
                inset: 0;
                overflow: hidden;
                z-index: -1;
            }
            .glow {
                box-shadow: 0 0 20px rgba(125, 95, 255, 0.3);
            }
            .card-glow {
                transition: all 0.3s ease;
            }
            .card-glow:hover {
                box-shadow: 0 0 25px rgba(125, 95, 255, 0.5);
                transform: translateY(-3px);
            }
            .fade-in {
                animation: fadeIn 0.6s ease-in-out;
            }
            @keyframes fadeIn {
                from {
                    opacity: 0;
                    transform: translateY(10px);
                }
                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }
            .custom-select-wrapper {
                position: relative;
            }
            .custom-select-wrapper select {
                appearance: none;
                -webkit-appearance: none;
                -moz-appearance: none;
                background-color: transparent;
            }
            .custom-select-wrapper::after {
                content: "\f078";
                font-family: "Font Awesome 6 Free";
                font-weight: 900;
                position: absolute;
                top: 50%;
                right: 1.25rem;
                transform: translateY(-50%);
                pointer-events: none;
                color: #9d7dff;
            }
#change-tariff-btn {
    background: linear-gradient(to right, #3b3b6b, #5a3d99);
    border: 1px solid #5a3d99;
    color: #fff;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
}
#change-tariff-btn:hover {
    background: linear-gradient(to right, #4a4a8c, #6b4eb3);
}
#order-form {
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
#order-form.hidden {
    opacity: 0;
    visibility: hidden;
}
            #typewriter {
                overflow: visible;
                display: inline-block;
                white-space: normal;
                min-height: 3em;
                z-index: 99;
                position: relative;
                color: #fff;
                margin-bottom: 0px;
            }
         
            .planet {
                position: absolute;
                width: 25px;
                height: 25px;
                background: radial-gradient(circle, rgba(157, 125, 255, 0.4) 0%, rgba(58, 58, 122, 0.1) 70%);
                border-radius: 50%;
                box-shadow: 0 0 12px rgba(125, 95, 255, 0.3), 0 0 25px rgba(255, 209, 102, 0.1);
                pointer-events: none;
                z-index: 5;
            }
            @keyframes flyPlanet {
                0% { transform: translate(0, 0) scale(0.8); }
                100% { transform: translate(var(--tx), var(--ty)) scale(1.1); }
            }
            @keyframes flicker {
                0%, 90% { opacity: 0.3; }
                95% { opacity: 0.5; }
                100% { opacity: 0.3; }
            }
            .max-w-2xl {
                max-width: 72rem !important;
            }
            .hero-title {
                font-family: "Playfair Display", serif;
                font-size: 4.5rem;
                line-height: 1.1;
                background: linear-gradient(90deg, #ffd166, #e8c79b, #ffffff, #e8c79b, #ffd166);
                background-size: 200% 100%;
                background-clip: text;
                -webkit-background-clip: text;
                color: transparent;
                text-shadow: 0 2px 10px rgba(255, 209, 102, 0.3);
                z-index: 99;
                position: relative;
                padding-top: 30px;
                animation: gradientShift 8s ease-in-out infinite;
            }
            @keyframes gradientShift {
                0% { background-position: 0% 50%; }
                50% { background-position: 100% 50%; }
                100% { background-position: 0% 50%; }
            }
            .section-title {
                 font-family: "Alumni Sans", sans-serif;
                font-size: 2.5rem;
                font-weight: 700;
                color: #ffffff;
            }
            .btn-primary {
                background: linear-gradient(90deg, #7d5fff, #9d7dff);
                padding: 0.75rem 2rem;
                border-radius: 0.5rem;
                font-weight: 600;
                transition: all 0.3s ease;
                position: relative;
                overflow: hidden;
            }
            .btn-primary:hover {
                background: linear-gradient(90deg, #9d7dff, #b39bff);
                box-shadow: 0 0 15px rgba(125, 95, 255, 0.4);
            }
            .btn-primary::after {
                content: '';
                position: absolute;
                top: 50%;
                left: 50%;
                width: 100%;
                height: 100%;
                background: radial-gradient(circle, rgba(157, 125, 255, 0.3) 0%, transparent 70%);
                transform: translate(-50%, -50%) scale(0);
                animation: pulseGlow 3s ease-in-out infinite;
                z-index: 0;
            }
            @keyframes pulseGlow {
                0%, 100% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
                50% { transform: translate(-50%, -50%) scale(1.5); opacity: 0.3; }
            }
            .btn-primary > * { position: relative; z-index: 1; }
            .tariff-card {
                position: relative;
            }
            
            .zodiac-container {
                position: relative;
                display: block;
                margin: 1.5rem auto 0;
                width: 500px;
                height: 500px;
                max-width: 90%;
                z-index: 5;
                margin-top: -270px;
                opacity: 0.8;
            }
            .zodiac-image {
                width: 100%;
                height: 100%;
                animation: rotateZodiac 20s linear infinite;
                box-shadow: 0 0 20px rgba(125, 95, 255, 0.3);
                border-radius: 50%;
                opacity: 1;
                position: relative;
                z-index: 6;
                filter: brightness(0.6);
            }
            .zodiac-container::before,
            .zodiac-container::after {
                content: '';
                position: absolute;
                top: 50%;
                left: 50%;
                width: 100%;
                height: 100%;
                background: radial-gradient(circle, rgba(125, 95, 255, 0.3) 50%, rgba(255, 209, 102, 0.6) 50%, transparent 70%);
                border-radius: 50%;
                transform: translate(-50%, -50%) scale(1);
                opacity: 0;
                z-index: 3;
            }
            .zodiac-container::before {
                animation: wavePulse 8s ease-in-out infinite;
            }
            .zodiac-container::after {
                animation: wavePulse 10s ease-in-out infinite 2s;
            }
            @keyframes rotateZodiac {
                from { transform: rotate(0deg); }
                to { transform: rotate(360deg); }
            }
            @keyframes wavePulse {
                0% {
                    transform: translate(-50%, -50%) scale(1);
                    opacity: 0.4;
                }
                50% {
                    transform: translate(-50%, -50%) scale(1.3);
                    opacity: 0.2;
                }
                100% {
                    transform: translate(-50%, -50%) scale(1.5);
                    opacity: 0;
                }
            }
            #button_get_tarif {
                background: linear-gradient(90deg, #ffd166, #e8c79b, #ffffff);
                color: #000;
            }
            
            @media (max-width: 768px) {
                #top_block h1 {
 
}
#top_block .hero-title {
    
}
#top_block {
    padding-top: 100px;
}
                .hero-title {
                    font-size: 2.5rem !important;
                    padding-top: 0px !important;
                }
                nav {
                margin-bottom: 50px !important;
            }
                 .section-title {
                 font-family: "Alumni Sans", sans-serif;
                font-size: 30px !important;
                font-weight: 700;
                line-height: 1 !important;
            }
                .zodiac-container {
                    width: 300px;
                    height: 300px;
                }
            }
            .aurora-effect {
                position: relative;
                overflow: visible;
                z-index: -2;
            }
            .aurora-effect::before {
                content: '';
                position: absolute;
                top: 0px;
                left: -100px;
                width: 100%;
                height: 100%;
                background: radial-gradient(circle at 60% 30%, rgba(0, 255, 255, 0.5), transparent),
                            radial-gradient(circle at 30% 70%, rgba(0, 128, 255, 0.4), transparent),
                            radial-gradient(circle at 80% 50%, rgba(255, 0, 255, 0.4), transparent);
                filter: blur(100px);
                
                z-index: -1;
                opacity: 0.8;
            }
              .aurora-effect2::before {
                content: '';
                position: absolute;
                top: 0px;
                left: 0px;
                width: 100%;
                height: 100%;
                background: radial-gradient(circle at 30% 30%, rgba(0, 255, 255, 0.5), transparent),
                            radial-gradient(circle at 70% 70%, rgba(0, 128, 255, 0.7), transparent),
                            radial-gradient(circle at 50% 50%, rgba(255, 0, 255, 0.1), transparent);
                filter: blur(100px);
                
                z-index: -1;
                opacity: 0.8;
            }
            @keyframes auroraMove {
                0% { transform: translate(0, 0) rotate(0deg); }
                50% { transform: translate(-10%, -10%) rotate(180deg); }
                100% { transform: translate(0, 0) rotate(360deg); }
            }
            /* New Styles for Enhanced Sections */
            .card-glow:nth-child(1) {
                border-image: linear-gradient(145deg, #ffd166, #e8c79b) 1;
            }
            .card-glow:nth-child(2) {
                border-image: linear-gradient(145deg, #7d5fff, #9d7dff) 1;
            }
            .card-glow:nth-child(3) {
                border-image: linear-gradient(145deg, #ff0049, #e8c79b) 1;
            }
            .card-glow .fa-seedling, .card-glow .fa-briefcase, .card-glow .fa-heart {
                transition: transform 0.3s ease;
            }
            .card-glow:hover .fa-seedling, .card-glow:hover .fa-briefcase, .card-glow:hover .fa-heart {
                transform: scale(1.2) rotate(5deg);
            }
            .sample-btn:hover {
                box-shadow: 0 0 10px rgba(157, 125, 255, 0.4);
            }
            .fa-brain {
                animation: pulseIcon 2s ease-in-out infinite;
            }
            @keyframes pulseIcon {
                0%, 100% { transform: scale(1); opacity: 0.8; }
                50% { transform: scale(1.1); opacity: 1; }
            }
            .cosmo-ai .font-bold {
                background: linear-gradient(90deg, #7d5fff, #ffd166);
                background-clip: text;
                -webkit-background-clip: text;
                color: transparent;
            }
            input:focus, select:focus, textarea:focus {
                box-shadow: 0 0 10px rgba(125, 95, 255, 0.4);
                border-color: #9d7dff;
            }
            #main-order-form img {
                animation: rotateSun 30s linear infinite;
            }
            @keyframes rotateSun {
                from { transform: rotate(0deg); }
                to { transform: rotate(360deg); }
            }
            .lead-magnet img:hover {
                box-shadow: 0 0 15px rgba(125, 95, 255, 0.5);
            }
            #get-guide-btn::after {
                content: '';
                position: absolute;
                top: 50%;
                left: 50%;
                width: 100%;
                height: 100%;
                background: radial-gradient(circle, rgba(157, 125, 255, 0.3) 0%, transparent 70%);
                transform: translate(-50%, -50%) scale(0);
                animation: pulseGlow 3s ease-in-out infinite;
                z-index: 0;
            }
            #get-guide-btn > * { position: relative; z-index: 1; }
            footer a:hover {
                color: #9d7dff;
                text-shadow: 0 0 10px rgba(125, 95, 255, 0.4);
                transform: translateY(-2px);
                transition: all 0.3s ease;
            }
            footer .fa-stars:hover {
                text-shadow: 0 0 10px rgba(125, 95, 255, 0.4);
            }
            .card-glow, .bg-cosmic-800, .bg-cosmic-900 {
                animation: fadeIn 0.6s ease-in-out;
            }
            .s70 {
                background: #ff0049 !important;
                display: inline-block !important;
            }

            /* New Colors */
            :root {
                --amethyst: #4B0082;
                --metallic-gold: #FFD700;
            }

            /* Enhanced Card Styles */
            .card-glow {
                position: relative;
                transition: transform 0.3s ease, box-shadow 0.3s ease;
                background: linear-gradient(145deg, rgba(18, 18, 45, 0.9), rgba(42, 42, 90, 0.7));
                overflow: inherit !important; /* Ensure labels aren’t clipped */
            }

            .card-glow:hover {
                transform: translateY(-5px);
                box-shadow: 0 10px 20px rgba(125, 95, 255, 0.5), 0 0 30px rgba(255, 209, 102, 0.2);
            }

            .sample-btn {
                position: relative;
                overflow: hidden;
                transition: all 0.3s ease;
            }


            /* Specific badge styles for variety */
            .card-glow:nth-child(1) span { background: linear-gradient(90deg, #ffd166, #9d7dff); }
            .card-glow:nth-child(2) span { background: linear-gradient(90deg, #9d7dff, #4B0082); }
            .card-glow:nth-child(3) span { background: linear-gradient(90deg, #ff0049, #ffd166); }
            .card-glow:nth-child(4) span { background: linear-gradient(90deg, #ffd166, #FFD700); }
            .card-glow:nth-child(5) span { background: linear-gradient(90deg, #9d7dff, #ffd166); }
            .card-glow:nth-child(6) span { background: linear-gradient(90deg, #ff0049, #ffd166); }

            .sample-btn::after {
                content: '';
                position: absolute;
                top: 50%;
                left: 50%;
                width: 200%;
                height: 200%;
                background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
                transform: translate(-50%, -50%) scale(0);
                transition: transform 0.5s ease;
            }

            .sample-btn:hover::after {
                transform: translate(-50%, -50%) scale(1);
            }

            /* Gradient Borders */
            .border-gradient-to-r {
                border-image-slice: 1;
            }

            .border-gradient-to-r.from-star.to-nebula-500 {
                border-image-source: linear-gradient(145deg, #ffd166, #9d7dff);
            }

            .border-gradient-to-r.from-nebula-500.to-amethyst {
                border-image-source: linear-gradient(145deg, #9d7dff, #4B0082);
            }

            .border-gradient-to-r.from-star-love.to-star {
                border-image-source: linear-gradient(145deg, #ff0049, #ffd166);
            }

            .border-gradient-to-r.from-star.to-metallic-gold {
                border-image-source: linear-gradient(145deg, #ffd166, #FFD700);
            }
            nav {
                padding-bottom: 50px !important;
            
            }

            .shooting-star {
                position: absolute;
                width: 2px;
                height: 2px;
                background: #ffffff;
                border-radius: 50%;
                box-shadow: 0 0 6px 2px rgba(255, 255, 255, 0.8), 0 0 12px 4px rgba(157, 125, 255, 0.4);
                pointer-events: none;
                z-index: 10;
                transform-origin: center;
            }
            .shooting-star::after {
                content: '';
                position: absolute;
                top: 50%;
                left: 100%;
                width: 50px;
                height: 1px;
                background: linear-gradient(to left, rgba(255, 255, 255, 0.6), transparent);
                transform: translateY(-50%);
            }
            @keyframes shoot {
                0% {
                    opacity: 1;
                    transform: translate(0, 0) rotate(-45deg);
                }
                100% {
                    opacity: 0;
                    transform: translate(300px, 300px) rotate(-45deg);
                }
            }
            #tariff-options-container {
                display: none;
            }
            .start_buy_button {
               background: #ff0049;
              margin-bottom: 15px;
            }
            .card-glow div.absolute {
                font-size: 30px;
            }
            .text-xl {
                font-size: 30px !important;
                margin-bottom: 20px !important;
            }
            .s603 {
                color: #ccc !important;
            }

            /* Additional styles for step tiles */
            .steps-section .card-glow {
              transition: transform 0.3s ease, box-shadow 0.3s ease;
            }
.s71 {
    padding-right: 15px;
    color: #ff0049;
}
.s80 {
    margin-bottom: 5px;
}


#email-form-container {
    transition: all 0.5s ease-in-out;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
}

#email-form-container:not(.hidden) {
    max-height: 200px; /* Достаточно большая высота, чтобы вместить форму */
    opacity: 1;
}
            .steps-section .card-glow:hover {
              transform: translateY(-5px);
              box-shadow: 0 10px 20px rgba(125, 95, 255, 0.5), 0 0 30px rgba(255, 209, 102, 0.2);
            }

            .steps-section .card-glow i {
              transition: transform 0.3s ease;
            }

            .steps-section .card-glow:hover i {
              transform: scale(1.2) rotate(5deg);
            }

            .steps-section .card-glow h3 {
              font-size: 1.5rem;
              line-height: 1.2;
            }

            .steps-section .card-glow p {
              font-size: 0.875rem;
              line-height: 1.5;
              min-height: 4rem; /* Ensure consistent height for text */
            }

            @media (max-width: 640px) {
              .steps-section .card-glow h3 {
                font-size: 1.25rem;
              }
              .steps-section .card-glow p {
                font-size: 0.75rem;
              }
            }

/* Стили для блока "Order Bump" */
.glow-subtle {
    box-shadow: 0 0 15px rgba(255, 0, 73, 0.2);
}

#order-bump-container .fa-fire {
    color: #ff0049;
}

#order-bump-container input[type="checkbox"] {
    transform: scale(1.2); /* Делаем чекбоксы чуть крупнее */
}

#order-bump-container input[type="checkbox"]:checked {
    background-color: #7d5fff; /* Цвет фона при выборе */
    border-color: #9d7dff;
}

/* Стили для плавного появления контейнера с доп. вопросом */
#custom-question-bump-container {
    transition: all 0.4s ease-in-out;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
}

#custom-question-bump-container:not(.hidden) {
    max-height: 500px; /* Достаточно большая высота, чтобы вместить поле */
    opacity: 1;
}


#main-order-form input[type="text"],
#main-order-form input[type="email"],
#main-order-form input[type="date"],
#main-order-form input[type="time"] {
    height: 48px; /* Явная высота для всех полей */
    padding: 12px 16px; /* Унифицированные отступы */
    font-size: 16px; /* Единый размер шрифта */
    line-height: 24px; /* Контроль высоты строки */
    box-sizing: border-box; /* Учитываем padding и border в высоте */
    appearance: none; /* Сбрасываем нативные стили браузеров */
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #12122d; /* bg-cosmic-800 */
    border: 1px solid #1a1a40; /* border-cosmic-600 */
    border-radius: 0.5rem;
    color: #ffffff; /* Цвет текста */
}

#main-order-form input[type="date"]::-webkit-calendar-picker-indicator,
#main-order-form input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(1); /* Инвертируем иконку для темной темы */
    cursor: pointer;
    padding: 4px; /* Увеличиваем область клика */
}

#main-order-form input:focus {
    box-shadow: 0 0 25px rgba(125, 95, 255, 0.5);
    border-color: #9d7dff;
    outline: none;
}

/* Убедимся, что поля даты и времени выглядят одинаково на мобильных */
@media (max-width: 767px) {
    #main-order-form input[type="date"],
    #main-order-form input[type="time"] {
        height: 48px; /* Повторяем высоту для мобильных */
        font-size: 16px; /* Размер шрифта не уменьшается */
        padding: 12px 16px; /* Те же отступы */
    }
}


:focus-visible {
  outline: none !important;
}


.purchase-label {
    margin-top: 12px;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background: none !important;
    box-shadow: none !important;
    color: rgb(255 209 102/var(--tw-text-opacity,1)) !important;
}

.purchase-label:hover {
    transform: scale(1.02);
    box-shadow: 0 0 15px rgba(255, 0, 73, 0.5);
}

.purchase-count {
    font-weight: 700;
    color: #ffffff; /* Белый для выделения числа */
}

@media (max-width: 640px) {
    .purchase-label {
        font-size: 10px;
        padding: 6px 12px;
    }
}
.card-glow li {
    color: #d9d9d9 !important;
  font-size: 14px !important;
  padding-bottom: 3px;
  line-height: 1.4;
}
}


/* Добавляем стили для top header и темы */
.top-header {
    height: 50px;
    transition: all 0.3s ease;
}

.top-header .theme-toggle {
    display: flex;
    align-items: center;
}

.top-header .toggle-slider {
    transition: background-color 0.3s ease;
}

.top-header .dot {
    transition: transform 0.3s ease;
}

body.light-theme {
    background: #f5f5f5;
    color: #333;
}

body.light-theme .top-header {
    background: rgba(245, 245, 245, 0.7);
}

body.light-theme .top-header a,
body.light-theme .top-header .text-white {
    color: #333;
}

body.light-theme .top-header .hover:text-nebula-400:hover {
    color: #9d7dff;
}

body.light-theme .btn-primary {
    background: linear-gradient(90deg, #6b48ff, #8a5fff);
}

body.light-theme .btn-primary:hover {
    background: linear-gradient(90deg, #8a5fff, #a77bff);
}

body.light-theme .card-glow {
    background: linear-gradient(145deg, rgba(245, 245, 245, 0.9), rgba(230, 230, 230, 0.7));
}

body.light-theme .card-glow:hover {
    box-shadow: 0 10px 20px rgba(107, 72, 255, 0.5), 0 0 30px rgba(255, 209, 102, 0.2);
}

body.light-theme .section-title {
    color: #333;
}

body.light-theme .text-gray-300 {
    color: #666;
}

body.light-theme .aurora-effect::before {
    background: radial-gradient(circle at 60% 30%, rgba(0, 255, 255, 0.2), transparent),
                radial-gradient(circle at 30% 70%, rgba(0, 128, 255, 0.15), transparent),
                radial-gradient(circle at 80% 50%, rgba(255, 0, 255, 0.15), transparent);
}

body.light-theme nav h1 {
    background: linear-gradient(90deg, #6b48ff, #8a5fff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

body.light-theme .hero-title {
    background: linear-gradient(90deg, #6b48ff, #8a5fff, #ffffff, #8a5fff, #6b48ff);
}

header.top-header {
    z-index: 999;
}

/* Адаптивность */
@media (max-width: 768px) {
    .top-header {
        height: 40px;
        padding: 0 8px;
    }

    .top-header .theme-toggle {
        flex-direction: column;
        align-items: flex-end;
    }

    .top-header .toggle-slider {
        margin-bottom: 4px;
    }

    .top-header a {
        font-size: 14px;
    }

    .top-header .text-sm {
        font-size: 12px;
    }
}

nav {
    margin-top: 5px !important; /* Смещаем nav под header */
    margin-bottom: 30px;
}
.login_link {
    font-size: 14px;
}

 select {
        appearance: none;
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right 1rem center;
        background-size: 1em;
      }
      .birth-date-group select,
      .birth-time-group select {
        width: auto;
        min-width: 80px;
        margin-right: 8px;
      }
   

       #order-form .birth-date-group input,
      #order-form .birth-date-group select,
      #order-form .birth-time-group input,
      #order-form .birth-time-group select,
      #order-form button {
        width: 100%;
        box-sizing: border-box;
      }
      #tariff-options-container {
        display: block;
      }

      .birth-date-group select,
      .birth-time-group select {
        width: auto;
        min-width: 80px;
        margin-right: 8px;
      }
      #natal-chart-output svg {
    max-width: 100%;
    max-height: 100%;
    height: auto;
}