/* ===================================
   PAGINATION STYLES
   Стили для компонентов пагинации
   =================================== */
@import url('shared-utilities.css');

/* Основной контейнер пагинации */
.pagination-container {
    @apply w-full;
}

/* ===================================
   LOAD MORE BUTTON STYLES
   =================================== */

/* Кнопка "Показать еще" */
#load-more-btn {
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
}

#load-more-btn:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 10px 25px -5px rgba(139, 92, 246, 0.3);
}

#load-more-btn:active {
    transform: translateY(0) scale(0.98);
}

#load-more-btn:disabled {
    @apply opacity-50 cursor-not-allowed;
    transform: none !important;
}

/* Анимация иконки стрелки */
#load-more-btn .main-content svg {
    transition: transform 0.3s ease;
}

#load-more-btn:hover .main-content svg {
    transform: rotate(180deg);
}

/* Индикатор загрузки */
.loading-indicator {
    animation: fadeIn 0.3s ease-in-out;
}

.loading-indicator svg {
    animation: spin 1s linear infinite;
}

/* Анимация появления/скрытия */
.main-content,
.loading-indicator {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.main-content.hidden,
.loading-indicator.hidden {
    opacity: 0;
    transform: scale(0.9);
}

/* ===================================
   CLASSIC PAGINATION STYLES
   =================================== */

/* Ссылки пагинации */
.pagination-link {
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.pagination-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.1), transparent);
    transition: left 0.5s ease;
}

.pagination-link:hover::before {
    left: 100%;
}

/* Текущая страница */
.pagination-current {
    position: relative;
    overflow: hidden;
}

.pagination-current::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent);
    pointer-events: none;
}

/* Номера страниц */
.pagination-number {
    min-width: 2.5rem;
    height: 2.5rem;
}

.pagination-number:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(139, 92, 246, 0.2);
}

/* Кнопки навигации */
.pagination-prev,
.pagination-next {
    min-width: auto;
}

.pagination-prev:hover,
.pagination-next:hover {
    transform: translateY(-1px);
}

/* ===================================
   PROGRESS BAR STYLES
   =================================== */

.pagination-progress {
    @apply w-full bg-gray-200 rounded-full h-2 overflow-hidden;
}

.pagination-progress-bar {
    @apply h-full rounded-full transition-all duration-500 ease-out;
    background: linear-gradient(90deg, #8b5cf6, #3b82f6);
    transform-origin: left;
    animation: progressGlow 2s ease-in-out infinite alternate;
}

@keyframes progressGlow {
    0% {
        box-shadow: 0 0 5px rgba(139, 92, 246, 0.3);
    }
    100% {
        box-shadow: 0 0 15px rgba(139, 92, 246, 0.6);
    }
}

/* ===================================
   ERROR CONTAINER STYLES
   =================================== */

#pagination-error-container {
    animation: slideDown 0.3s ease-out;
}

#pagination-error-container.show {
    @apply block;
}

#pagination-retry-btn {
    transition: all 0.2s ease;
}

#pagination-retry-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.2);
}

#pagination-retry-btn svg {
    transition: transform 0.2s ease;
}

#pagination-retry-btn:hover svg {
    transform: rotate(180deg);
}

/* ===================================
   ANIMATIONS
   =================================== */


@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* Анимация появления новых товаров */
.product-item-enter {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
}

.product-item-enter-active {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===================================
   RESPONSIVE STYLES
   =================================== */

/* Мобильные устройства */
@media (max-width: 640px) {
    #load-more-btn {
        @apply px-6 py-3 text-sm;
    }
    
    #load-more-btn .page-info {
        @apply hidden;
    }
    
    .pagination-link {
        @apply px-2 py-1 text-xs;
    }
    
    .pagination-number {
        @apply w-8 h-8 text-xs;
        min-width: 2rem;
        height: 2rem;
    }
    
    .pagination-prev span,
    .pagination-next span {
        @apply hidden;
    }
}

/* Планшеты */
@media (min-width: 641px) and (max-width: 1024px) {
    #load-more-btn {
        @apply px-7 py-3.5;
    }
    
    .pagination-link {
        @apply px-3 py-2;
    }
}

/* Десктоп */
@media (min-width: 1025px) {
    #load-more-btn:hover {
        transform: translateY(-3px) scale(1.03);
        box-shadow: 0 15px 35px -5px rgba(139, 92, 246, 0.4);
    }
}

/* ===================================
   ACCESSIBILITY STYLES
   =================================== */

/* Фокус для клавиатурной навигации */
.pagination-link:focus,
#load-more-btn:focus,
#pagination-retry-btn:focus {
    @apply outline-none ring-2 ring-purple-500 ring-offset-2;
}

/* Высокий контраст */
@media (prefers-contrast: high) {
    .pagination-link {
        @apply border-2;
    }
    
    .pagination-current {
        @apply border-2 border-purple-800;
    }
    
    #load-more-btn {
        @apply border-2 border-purple-800;
    }
}

/* Уменьшенная анимация */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    #load-more-btn:hover {
        transform: none;
    }
    
    .pagination-link:hover {
        transform: none;
    }
}

/* ===================================
   LOADING STATES
   =================================== */

.pagination-loading {
    @apply pointer-events-none opacity-75;
}

.pagination-loading #load-more-btn {
    @apply cursor-wait;
}

.pagination-loading .pagination-link {
    @apply pointer-events-none opacity-50;
}

/* Скелетон для загрузки */
.pagination-skeleton {
    @apply animate-pulse;
}

.pagination-skeleton .skeleton-item {
    @apply bg-gray-300 rounded;
    animation: pulse 1.5s ease-in-out infinite;
}

/* ===================================
   DARK MODE SUPPORT
   =================================== */

@media (prefers-color-scheme: dark) {
    .pagination-container {
        @apply text-gray-200;
    }
    
    .pagination-link {
        @apply bg-gray-800 border-gray-600 text-gray-200;
    }
    
    .pagination-link:hover {
        @apply bg-gray-700 border-gray-500;
    }
    
    .pagination-current {
        @apply bg-purple-700 text-white;
    }
    
    #pagination-error-container {
        @apply bg-red-900 border-red-700;
    }
    
    #pagination-error-container h3 {
        @apply text-red-200;
    }
    
    #pagination-error-container p {
        @apply text-red-300;
    }
}

/* ===================================
   UTILITY CLASSES
   =================================== */

.pagination-hidden {
    @apply hidden;
}

.pagination-visible {
    @apply block;
}

.pagination-fade-in {
    animation: fadeIn 0.3s ease-out;
}

.pagination-slide-up {
    animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}