/* ===== АДАПТИВНОСТЬ И МЕДИА-ЗАПРОСЫ ===== */
/* Адаптивные стили для различных устройств и экранов */

/* ===== ОСНОВНАЯ МОБИЛЬНАЯ АДАПТИВНОСТЬ ===== */
@media (max-width: 768px) {
    /* Базовые настройки */
    body {
        font-size: 15px;
    }
    
    /* Модальные окна */
    .modal-content {
        padding: 24px;
        margin: 16px;
        border-radius: 20px;
    }
    
    /* Карточки */
    .card {
        border-radius: 12px;
    }
    
    /* Кнопки */
    .btn {
        padding: 10px 20px;
        font-size: 14px;
    }
    
    /* Статистика */
    .stat-value {
        font-size: 24px;
    }
    
    /* Профиль */
    .profile-avatar {
        width: 64px;
        height: 64px;
        font-size: 28px;
    }

    /* Toast уведомления на мобильных */
    .toast {
        top: 10px !important;
        right: 16px;
        left: 16px;
        max-width: none;
        transform: translateX(0) translateY(-20px);
        opacity: 0;
    }
    
    .toast.show {
        transform: translateX(0) translateY(0);
        opacity: 1;
    }

    /* Компактные табы с иконками */
    .tab-btn {
        padding: 6px 8px !important;
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: flex-start; /* По умолчанию к левому краю */
        flex: 1;
        min-width: auto;
    }

    /* Только для кнопки "Лента" - по центру */
    .tab-btn:nth-child(3) {
        justify-content: center !important;
    }

    .tab-btn i {
        font-size: 12px;
        margin-right: 4px !important;
    }

    nav {
        padding: 8px 12px;
        gap: 4px;
    }
}

/* ===== МАЛЫЕ ЭКРАНЫ (до 480px) ===== */
@media (max-width: 480px) {
    /* Статистика */
    .stats-card {
        padding: 12px;
    }
    
    .stats-card .text-2xl {
        font-size: 1.5rem;
    }
    
    .stats-card .text-xl {
        font-size: 1.25rem;
    }

    /* Модалки для авторизации */
    .auth-modal {
        margin: 1rem;
        padding: 1.5rem;
    }
    
    .btn-auth, .btn-guest {
        padding: 0.75rem 1.5rem;
        font-size: 0.875rem;
    }

    /* Stars модальное окно */
    .stars-modal {
        width: 95%;
        max-height: 95vh;
        margin: 10px;
    }
    
    .stars-modal-content {
        padding: 15px;
        overflow-y: auto;
        max-height: calc(95vh - 60px);
    }
    
}

/* ===== ПЛАНШЕТЫ (768px - 1024px) ===== */
@media (min-width: 769px) and (max-width: 1024px) {
    .modal-content {
        max-width: 600px;
        padding: 40px;
    }
    
    .card {
        border-radius: 20px;
    }
}

/* ===== ДЕСКТОПЫ (от 1025px) ===== */
@media (min-width: 1025px) {
    .modal-content {
        max-width: 700px;
        padding: 48px;
    }
    
    /* Увеличиваем размеры для больших экранов */
    .profile-avatar {
        width: 96px;
        height: 96px;
        font-size: 40px;
    }
    
    .stat-value {
        font-size: 32px;
    }
}

/* ===== СПЕЦИАЛЬНЫЕ АНИМАЦИИ ДЛЯ СВЕТЛОЙ ТЕМЫ "БОМБА" ===== */

/* Специальные hover эффекты для светлой темы */
.light .interactive:hover {
    transform: scale(1.05);
    filter: brightness(1.05);
}

.light .hover-lift:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: var(--shadow-lg), var(--shadow-colored);
}

/* Анимация пульса для светлой темы */
@keyframes lightPulse {
    0%, 100% { 
        box-shadow: 0 0 5px rgba(99, 102, 241, 0.2);
    }
    50% { 
        box-shadow: 0 0 20px rgba(99, 102, 241, 0.4), 0 0 30px rgba(99, 102, 241, 0.1);
    }
}

.light .profile-avatar::after {
    animation: lightPulse 2s ease-in-out infinite;
}

/* Специальная анимация для активных элементов */
.light .tab-active,
.light .feed-active {
    animation: lightGlow 2s ease-in-out infinite alternate;
}

@keyframes lightGlow {
    from { 
        box-shadow: var(--neon-glow-sm);
    }
    to { 
        box-shadow: var(--neon-glow-md), 0 0 25px rgba(99, 102, 241, 0.15);
    }
}

/* Улучшенная анимация появления для светлой темы */
.light .fade-in {
    animation: lightFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes lightFadeIn {
    from { 
        opacity: 0; 
        transform: translateY(30px) scale(0.95);
        filter: blur(5px);
    }
    to { 
        opacity: 1; 
        transform: translateY(0) scale(1);
        filter: blur(0px);
    }
}

/* Специальный эффект для кнопок в светлой теме */
.light .btn::before {
    background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.2), transparent);
}

/* Градиентная анимация для статистических карточек */
.light .stat-value {
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 3s ease-in-out infinite;
}

@keyframes gradientShift {
    0%, 100% { filter: hue-rotate(0deg); }
    50% { filter: hue-rotate(10deg); }
}

/* Специальный эффект для модальных окон */
.light .modal.active .modal-content {
    animation: lightModalIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes lightModalIn {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(50px);
        filter: blur(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
        filter: blur(0px);
    }
}

/* ===== ДОСТУПНОСТЬ ===== */

/* Уменьшение движения для пользователей с ограниченными возможностями */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Высокая контрастность */
@media (prefers-contrast: high) {
    :root {
        --glass-blur: 10px;
        --card-border: rgba(255, 255, 255, 0.2);
    }
    
    .light {
        --card-border: rgba(0, 0, 0, 0.2);
        --text-primary: #000000;
    }
}

/* Предпочтение темной темы */
@media (prefers-color-scheme: dark) {
    /* Автоматически применяем темную тему если пользователь предпочитает */
    :root {
        color-scheme: dark;
    }
}

/* Предпочтение светлой темы */
@media (prefers-color-scheme: light) {
    /* Можем применить светлую тему по умолчанию если нужно */
    :root {
        color-scheme: light;
    }
}

/* ===== СПЕЦИАЛЬНЫЕ СТИЛИ ДЛЯ АВТОРИЗАЦИИ ===== */

/* Overlay для авторизации */
.auth-overlay {
    backdrop-filter: blur(8px);
    animation: fadeIn 0.3s ease-out;
}

.auth-modal {
    animation: slideUp 0.3s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

/* Состояния профиля */
.auth-required {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
    border: 1px solid rgba(102, 126, 234, 0.2);
}

.guest-mode {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(168, 85, 247, 0.1));
    border: 1px solid rgba(99, 102, 241, 0.2);
}

/* Кнопки авторизации */
.btn-auth {
    transition: all 0.3s ease;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
}

.btn-auth:hover {
    background: linear-gradient(135deg, #2563eb, #1e40af);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
}

.btn-guest {
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-guest:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

/* ===== TELEGRAM LOGIN WIDGET ===== */
iframe[src*="oauth.telegram.org"] {
    border-radius: 12px !important;
    overflow: hidden;
}

/* ===== ПЛАТЕЖНЫЕ ФОРМЫ ===== */

/* Селектор типов оплаты */
.payment-type-selector {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}

.payment-type-btn.active {
    border-color: #3b82f6;
    background: rgba(59,130,246,0.2);
}

.payment-type-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.payment-type-info {
    text-align: left;
}

/* ===== МОДАЛЬНЫЕ ОКНА СУБСКРИПЦИЙ ===== */

/* Sub-tabs стили */
.modal-sub-tab {
    transition: all 0.2s ease;
}

.modal-sub-tab:not(.modal-sub-tab-active):hover {
    background: rgba(255, 255, 255, 0.15);
    color: white;
}

.modal-user-item {
    transition: all 0.2s ease;
}

.modal-user-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* ===== ШИРОКИЕ ЭКРАНЫ (от 1440px) ===== */
@media (min-width: 1440px) {
    .modal-content {
        max-width: 800px;
        padding: 56px;
    }
    
    .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 24px;
    }
}

/* ===== ОЧЕНЬ ШИРОКИЕ ЭКРАНЫ (от 1920px) ===== */
@media (min-width: 1920px) {
    .modal-content {
        max-width: 900px;
        padding: 64px;
    }
    
    .container {
        max-width: 1400px;
        padding: 0 32px;
    }
}

/* ===== ГОРИЗОНТАЛЬНАЯ ОРИЕНТАЦИЯ НА МОБИЛЬНЫХ ===== */
@media (max-width: 768px) and (orientation: landscape) {
    .modal-content {
        max-height: 85vh;
        overflow-y: auto;
    }
    
    .profile-avatar {
        width: 56px;
        height: 56px;
        font-size: 24px;
    }
}

/* ===== ВЫСОТА ЭКРАНА ===== */
@media (max-height: 600px) {
    .modal-content {
        max-height: 90vh;
        overflow-y: auto;
        padding: 20px;
    }
    
    .auth-modal {
        padding: 1rem;
    }
}