/* Basic styles for vape shop */
/* Дополнительные стили будут добавлены по мере необходимости */

/* Import shared utilities to avoid duplication */
@import url('shared-utilities.css');

/* Переменные цветов */
:root {
    --main-color: #001418;
    --secondary-color: #001517;
    --contrast-color: #00090b;
    --accent-smoke: #e1f7fb;
    --accent-light: #f5fcfd;
}

/* Старые стили спинера удалены - используется только VapeSpinner */

/* Note: Pulse animation moved to shared-utilities.css - use .pulse-animation class */

/* Заглушки для изображений */
.image-placeholder {
    background-color: var(--main-color);
    color: var(--accent-smoke);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    width: 100%;
    height: 100%;
}

/* Анимации для карточек */
.product-card:hover {
    transform: translateY(-5px);
}

/* Стили пагинации удалены */

/* Стили для звездочек рейтинга */
.rating {
    display: flex;
    gap: 2px;
}

/* Анимации для кнопок действия */
.action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}



/* Стили для индикатора загрузки */
@keyframes loadingProgress {
    0% { width: 0; }
    50% { width: 50%; }
    100% { width: 90%; }
}
.animate-loading {
    animation: loadingProgress 2s ease-in-out infinite;
}

/* Стили для хлебных крошек */
.breadcrumbs {
    margin-bottom: 1rem;
}

.breadcrumbs a {
    transition: color 0.2s;
}

.breadcrumbs a:hover {
    color: var(--accent-light);
}

/* Глобальные стили для обработки оверлеев и индикаторов загрузки */
.search-loading:not(.active),
[class*="loading"]:not(.active),
[class*="overlay"]:not(.active) {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    display: none !important;
    z-index: -1 !important;
}

/* Когда оверлей активен, обеспечиваем правильное отображение */
.search-loading.active,
[class*="loading"].active,
[class*="overlay"].active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    display: flex;
    z-index: 9999;
}

/* Поддержка безопасной области для мобильных устройств */
.pb-safe {
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
}

.pt-safe {
    padding-top: calc(1rem + env(safe-area-inset-top));
}

.mb-safe {
    margin-bottom: calc(1rem + env(safe-area-inset-bottom));
}

.mt-safe {
    margin-top: calc(1rem + env(safe-area-inset-top));
}

/* Дополнительные стили для мобильного поиска */
@media (max-width: 768px) {
    /* Обеспечиваем правильное отображение поля поиска на iOS */
    #mobile-search-input {
        /* Предотвращаем масштабирование на iOS */
        font-size: 16px;
        /* Убираем тень и обводку по умолчанию */
        -webkit-appearance: none;
        -webkit-tap-highlight-color: transparent;
    }
    
    /* Стили для панели поиска */
    #mobile-search-overlay .absolute.bottom-0 {
        max-height: 90vh;
        overflow-y: auto;
    }
    
    /* Анимация фокуса для лучшего UX */
    #mobile-search-input:focus {
        transform: scale(1.02);
        transition: transform 0.2s ease;
    }
}