/* #assets/css/ui_components.css — Yummy Lunchbox/assets/css */

/* =========================================
   1. БАЗОВЫЕ КНОПКИ (CANDY STYLE)
   ========================================= */
   .ui-btn {
    /* Цвета */
    background-color: var(--col-primary); 
    color: #FFFFFF; 
    
    /* FIX: Делаем толщину рамки адаптивной (мин 2px, макс 4px) */
    border: clamp(2px, 0.5vmin, 4px) solid #FFFFFF; 
    
    /* Сочная тень (в em для масштабирования вместе с кнопкой) */
    /* Уменьшили тень, чтобы кнопка не занимала лишнюю высоту */
    box-shadow: 0 0.2em 0 var(--col-primary-dark), 0 0.3em 0.6em rgba(0,0,0,0.15);
    
    /* Размеры и форма */
    border-radius: 2em; /* Полная таблетка */
    
    /* FIX: Уменьшили внутренние отступы для компактности */
    padding: 0.35em 1em;
    
    /* --- FIX MOBILE: ГИБКИЙ ШРИФТ --- */
    /* Шрифт плавно меняется от ~12px до ~20px в зависимости от vmin */
    font-family: var(--font-main);
    font-size: clamp(0.75rem, 3vmin, 1.3rem); 
    
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap; 
    
    /* Поведение */
    cursor: pointer;
    position: relative;
    transition: all 0.1s cubic-bezier(0.3, 0, 0.4, 1);
    
    /* Flex для центровки иконки и текста */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.4em;
    
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* Наведение */
.ui-btn:hover {
    filter: brightness(1.1);
    transform: translateY(-0.05em);
    box-shadow: 0 0.25em 0 var(--col-primary-dark), 0 0.4em 0.8em rgba(0,0,0,0.2);
}

/* Нажатие */
.ui-btn:active {
    transform: translateY(0.1em);
    box-shadow: 0 0 0 var(--col-primary-dark), inset 0 0.1em 0.2em rgba(0,0,0,0.2);
}

/* Отключенная кнопка */
.ui-btn:disabled, .ui-btn.disabled {
    filter: grayscale(0.8) opacity(0.6);
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* --- ВАРИАНТЫ КНОПОК --- */

/* Акцентная (Магазин/Видео) - Золотая */
.ui-btn.accent, #btn-shop {
    background-color: var(--col-accent);
    box-shadow: 0 0.2em 0 #E59400, 0 0.3em 0.6em rgba(0,0,0,0.15);
}
.ui-btn.accent:hover, #btn-shop:hover {
    box-shadow: 0 0.25em 0 #E59400, 0 0.4em 0.8em rgba(0,0,0,0.2);
}
.ui-btn.accent:active, #btn-shop:active {
    box-shadow: 0 0 0 #E59400, inset 0 0.1em 0.2em rgba(0,0,0,0.2);
}

/* --- FIX MOBILE: КРУГЛЫЕ КНОПКИ (ИКОНКИ) --- */
.ui-btn.icon-btn, .ui-btn.small {
    padding: 0;
    
    /* Размер задаем через em, чтобы он зависел от font-size кнопки */
    width: 2.8em;  
    height: 2.8em;
    border-radius: 50%;
    
    /* Адаптивный размер шрифта для иконок */
    /* clamp(MIN, PREFERRED, MAX) */
    font-size: clamp(12px, 4vmin, 26px);
}

/* --- NEW: КОМБИНИРОВАННЫЕ КНОПКИ (Иконка + Текст) --- */
.ui-btn.combined-btn {
    /* FIX: Делаем отступы такими же, как у обычной кнопки, чтобы выровнять высоту */
    padding: 0.35em 1em; 
    background-color: #6C5CE7;
    box-shadow: 0 0.2em 0 #5043B5, 0 0.3em 0.6em rgba(0,0,0,0.15);
}
.ui-btn.combined-btn:hover {
    box-shadow: 0 0.25em 0 #5043B5, 0 0.4em 0.8em rgba(0,0,0,0.2);
}
.ui-btn.combined-btn:active {
    box-shadow: 0 0 0 #5043B5, inset 0 0.1em 0.2em rgba(0,0,0,0.2);
}

/* =========================================
   2. ИКОНКИ (UI ICONS)
   ========================================= */
.ui-icon {
    width: 1.4em;
    height: 1.4em;
    pointer-events: none;
    object-fit: contain;
    
    /* SVG фильтр для перекраски в белый */
    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%);
}

/* --- NEW: МАЛЕНЬКАЯ ИКОНКА ВНУТРИ ТЕКСТОВОЙ КНОПКИ --- */
.ui-icon.small-inline {
    width: 1.25em;
    height: 1.25em;
    margin-right: 0.2em; 
    
    /* ПРИНУДИТЕЛЬНО инвертируем черный в белый (копия фильтра из .ui-icon) */
    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%);
}

/* Исключение для иконки магазина "Наши игры" в главном меню - не красим её 
.ui-icon.no-filter {
    filter: none !important;
}*/

/* =========================================
   3. ЭЛЕМЕНТЫ УПРАВЛЕНИЯ (Слайдеры, Переключатели)
   ========================================= */

/* Слайдер громкости */
input[type=range] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    background: transparent;
    cursor: pointer;
}
input[type=range]:focus { outline: none; }

/* Дорожка (Track) */
input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    /* Высота зависит от размера шрифта родителя */
    height: 0.6em; 
    background: #FFF;
    border-radius: 1em;
    border: 2px solid #eee;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.05);
}

/* Бегунок (Thumb) */
input[type=range]::-webkit-slider-thumb {
    height: 1.4em;
    width: 1.4em;
    border-radius: 50%;
    background: var(--col-primary);
    border: 2px solid #FFF;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    -webkit-appearance: none;
    appearance: none;
    /* Центрирование: (TrackHeight - ThumbHeight) / 2 */
    margin-top: -0.45em; 
    transition: transform 0.1s;
}
input[type=range]::-webkit-slider-thumb:active {
    transform: scale(1.1);
}

/* Кнопки выбора языка */
.lang-btn {
    /* Размеры в em для масштабирования */
    width: 3em;
    height: 2.2em;
    border-radius: 0.4em;
    border: 2px solid rgba(0,0,0,0.1);
    background-color: #FFF;
    padding: 0;
    cursor: pointer;
    overflow: hidden;
    opacity: 0.6;
    transition: all 0.2s;
    box-shadow: 0 0.2em 0 rgba(0,0,0,0.05);
}

.lang-btn.active {
    opacity: 1;
    border-color: var(--col-secondary);
    border-width: 3px;
    transform: scale(1.1);
    box-shadow: 0 0.2em 0.4em rgba(78, 205, 196, 0.2);
}

.lang-flag {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* =========================================
   4. СПЕЦИФИЧНЫЕ КНОПКИ (GAMEPLAY)
   ========================================= */

/* Кнопка Подсказки (Hint) - Стиль как у остальных (Розовая) */
.hint-btn {
    /* 1. ГЕОМЕТРИЯ: Сохраняем "таблетку" */
    font-size: clamp(12px, 4vmin, 26px) !important;
    height: 2.8em !important;
    padding: 0 1em !important; 
    border-radius: 1.4em !important;
    width: auto !important;

    /* 2. ЦВЕТА: Используем стандартные цвета темы (Pink) */
    background-color: var(--col-primary) !important;
    color: #FFFFFF !important; 
    border: clamp(2px, 0.5vmin, 4px) solid #FFFFFF !important;
    
    /* Стандартная тень */
    box-shadow: 0 0.2em 0 var(--col-primary-dark), 0 0.3em 0.6em rgba(0,0,0,0.15) !important;

    /* 3. ВЫРАВНИВАНИЕ */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
}

/* Ховер */
.hint-btn:hover {
    transform: translateY(-0.05em);
    filter: brightness(1.1);
    box-shadow: 0 0.25em 0 var(--col-primary-dark), 0 0.4em 0.8em rgba(0,0,0,0.2) !important;
}

/* Нажатие */
.hint-btn:active {
    transform: translateY(0.1em);
    box-shadow: 0 0 0 var(--col-primary-dark), inset 0 0.1em 0.2em rgba(0,0,0,0.2) !important;
}

/* SVG наследует белый цвет текста */
.hint-btn svg {
    width: 1.3em;
    height: 1.3em;
    fill: currentColor; 
    display: block;
}

.hint-btn span {
    padding-top: 0.1em;
}