/*
Theme Name: Starostina Theme
Theme URI: https://example.com
Author: Oleg Shashkevych
Description: Custom Landing Page for Valeriya Starostina with Monobank integration.
Version: 1.0
Text Domain: starostina
*/

/* Мы используем Tailwind через CDN для скорости разработки, 
  поэтому здесь стилей будет минимум. 
*/

@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');

body {
    overflow-x: hidden;
}

.current-lang {
    display: none;
}

/* === НОВЫЙ КАСТОМНЫЙ СКРОЛЛБАР === */

/* Firefox */
html {
    scrollbar-width: thin;
    /* Тонкий скроллбар */
    scrollbar-color: #1a1a1a #efe3dd;
    /* Ползунок и Трек */
}

/* Chrome, Edge, Safari */
::-webkit-scrollbar {
    width: 12px;
    /* Ширина всего элемента скроллбара */
}

::-webkit-scrollbar-track {
    background: #efe3dd;
    /* Бежевый цвет фона (трека) */
}

::-webkit-scrollbar-thumb {
    background-color: #1a1a1a;
    /* Темно-серый цвет ползунка */
    border-radius: 20px;
    /* Полное скругление */
    border: 3px solid #efe3dd;
    /* Внутренняя граница создает отступ, делая ползунок визуально тоньше и "парящим" */
}

::-webkit-scrollbar-thumb:hover {
    background-color: #333333;
    /* Немного светлее при наведении */
}

/* ================================= */

/* Анимации */
.fade-in-up {
    animation: fadeInUp 1s ease-out forwards;
    opacity: 0;
    transform: translateY(20px);
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.delay-200 {
    animation-delay: 0.2s;
}

.delay-400 {
    animation-delay: 0.4s;
}

/* Скроллбар */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

/* Скрытие экрана успеха по умолчанию */
#success-screen {
    display: none;
}

/* Стили для описания продукта (возвращаем маркеры списков) */
.product-desc ul {
    list-style-type: disc;
    padding-left: 1.5rem;
    margin-bottom: 1rem;
    display: inline-block;
    /* Чтобы список центрировался блоком, если текст по центру */
    text-align: left;
    /* Сам текст списка читабельнее слева */
}

.product-desc li {
    margin-bottom: 0.5rem;
}

.product-desc strong {
    font-weight: 700;
    color: #1a1a1a;
}

/* На мобильных выравниваем список по левому краю для удобства */
@media (max-width: 768px) {
    .product-desc {
        text-align: left;
    }
}