@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&display=swap');

@font-face {
    font-family: 'Songer';
    src: url('https://cdn.jsdelivr.net/gh/nicktimko/font-songer/SONGER_SE_Bold.otf') format('opentype');
    font-weight: bold;
}

/* ===== SAFE AREA И TELEGRAM MINI APPS ===== */
:root {
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-left: env(safe-area-inset-left, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);
    --tg-viewport-height: 100vh;
    --tg-viewport-stable-height: 100vh;
    --tg-theme-bg-color: #ffffff;
    --tg-theme-header-color: #e6ade4;
}

/* Telegram Mini App - применяем динамический фон */
body.tg-webapp {
    background-color: var(--tg-theme-bg-color, #ffffff) !important;
}

html.tg-webapp,
body.tg-webapp,
body.tg-webapp .main-content,
body.tg-webapp .catalog-section,
body.tg-webapp .stories-section,
body.tg-webapp .categories-section,
body.tg-webapp .section-header {
    background-color: var(--bg-color, var(--tg-theme-bg-color, #0a0a0f)) !important;
}

/* ===== ОПТИМИЗАЦИИ ДЛЯ ПРОИЗВОДИТЕЛЬНОСТИ ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    height: 100%;
    height: -webkit-fill-available;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    min-height: 100vh;
    min-height: -webkit-fill-available;
    min-height: var(--tg-viewport-stable-height, 100vh);
    padding-top: var(--safe-area-top);
    padding-bottom: var(--safe-area-bottom);
    padding-left: var(--safe-area-left);
    padding-right: var(--safe-area-right);
    overscroll-behavior: none;
    overscroll-behavior-y: none;
    -webkit-overflow-scrolling: touch;
}

/* Блокировка движения окна в Telegram */
html {
    overscroll-behavior: none;
    overscroll-behavior-y: none;
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body {
    position: fixed;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

/* GPU ускорение для модалок и анимаций */
.cart-modal,
.checkout-modal,
.success-modal,
.upsell-modal,
.product-modal,
.modifiers-popup,
.bottom-nav,
.notification {
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Быстрые переходы */
.product-card,
.category-chip,
.story-card,
.bottom-nav-item,
button,
.btn {
    transition: transform 0.15s ease, opacity 0.15s ease, background 0.15s ease;
}

/* Активное нажатие */
.product-card:active,
.category-chip:active,
.story-card:active,
button:active {
    transform: scale(0.97);
}

/* Отключаем анимации для экономии батареи */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

:root {
    /* Основные цвета */
    --bg-color: #0a0a0f;
    --text-color: #ffffff;
    --primary-color: #ffffff;
    --secondary-color: #666666;
    --accent-color: #ffffff;
    --highlight-color: #ffd54f;
    --neon-pink: #fbc3dc;
    
    /* Карточки товаров */
    --card-bg: #15151f;
    --card-border: #2a2a2a;
    --card-title-color: #ffffff;
    --card-price-color: #ffffff;
    --card-button-color: #ffffff;
    --product-font-family: 'Montserrat', sans-serif;
    
    /* Шапка */
    --header-bg: #0a0a0f;
    --header-title-color: #ffffff;
    
    /* Категории */
    --category-bg: #1a1a24;
    --category-text: #ffffff;
    --category-border: #333;
    --category-hover: #252525;
    --category-active-bg: #ffffff;
    --category-active-text: #000000;
    
    /* Нижнее меню */
    --nav-bg-color: rgba(25, 25, 35, 0.95);
    --nav-active-color: #4ade80;
    --nav-icon-color: #888888;
    --nav-text-color: #888888;
    
    /* Спецпредложения */
    --stories-title-color: #ffffff;
    --stories-border-color: #ffffff;
    
    /* Общие */
    --shadow-color: rgba(0, 0, 0, 0.8);
    --border-radius: 16px;
}

/* ===== КРАСИВАЯ ЗАГРУЗКА ===== */
.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0a0a0f;
    z-index: 9999999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.loading-screen.hidden {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.8s ease;
}

.loading-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
}

@keyframes bgShift {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.8; }
}

.falling-emojis {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

.falling-emoji {
    position: absolute;
    font-size: 30px;
    animation: fall linear forwards;
    opacity: 0.7;
    filter: blur(1px);
}

@keyframes fall {
    0% {
        transform: translateY(-50px) rotate(0deg) scale(0.5);
        opacity: 0;
    }
    10% {
        opacity: 0.8;
        transform: scale(1);
    }
    90% {
        opacity: 0.6;
    }
    100% {
        transform: translateY(100vh) rotate(360deg) scale(0.3);
        opacity: 0;
    }
}

.loading-content {
    position: relative;
    z-index: 2;
    text-align: center;
}

.loading-stage {
    display: none;
    flex-direction: column;
    align-items: center;
    animation: fadeInUp 0.5s ease;
}

.loading-stage.active {
    display: flex;
}

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

.loading-emoji {
    font-size: 80px;
    margin-bottom: 30px;
    filter: drop-shadow(0 0 30px rgba(251, 195, 220, 0.6));
}

.loading-emoji.bounce {
    animation: bounce 1s ease-in-out infinite;
}

.loading-emoji.spin {
    animation: spinBounce 1.5s ease-in-out infinite;
}

.loading-emoji.pulse {
    animation: pulse 1s ease-in-out infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-20px) scale(1.1); }
}

@keyframes spinBounce {
    0% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(10deg) scale(1.1); }
    50% { transform: rotate(0deg) scale(1); }
    75% { transform: rotate(-10deg) scale(1.1); }
    100% { transform: rotate(0deg) scale(1); }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 30px rgba(251, 195, 220, 0.6)); }
    50% { transform: scale(1.15); filter: drop-shadow(0 0 50px rgba(251, 195, 220, 0.9)); }
}

.loading-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: white;
    margin-bottom: 10px;
    text-shadow: 0 0 20px rgba(251, 195, 220, 0.5);
}

.loading-dots {
    display: flex;
    gap: 5px;
}

.loading-dots span {
    font-size: 30px;
    color: var(--neon-pink);
    animation: dotPulse 1.5s ease-in-out infinite;
}

.loading-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.loading-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes dotPulse {
    0%, 100% { opacity: 0.3; transform: translateY(0); }
    50% { opacity: 1; transform: translateY(-5px); }
}

.loading-progress {
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
}

.loading-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color), var(--primary-color));
    background-size: 200% 100%;
    border-radius: 2px;
    transition: width 0.3s ease;
    animation: shimmer 2s linear infinite;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ===== КНОПКА СМЕНЫ ТЕМЫ НА САЙТЕ ===== */
.theme-toggle-site {
    display: none;
    margin-left: auto;
}

.theme-toggle-site.hidden-theme-btn,
.hidden-theme-btn {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.theme-toggle-site input {
    display: none;
}

.theme-toggle-site label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 34px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 34px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    box-shadow: 
        0 0 20px rgba(251, 195, 220, 0.3),
        0 0 40px rgba(251, 195, 220, 0.15),
        inset 0 0 10px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(251, 195, 220, 0.3);
}

.theme-toggle-site label::before {
    content: '';
    position: absolute;
    left: 4px;
    width: 26px;
    height: 26px;
    background: linear-gradient(135deg, #fbc3dc 0%, #ffffff 100%);
    border-radius: 50%;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 20px rgba(251, 195, 220, 0.6);
}

.theme-toggle-site label:hover {
    box-shadow: 
        0 0 30px rgba(251, 195, 220, 0.5),
        0 0 60px rgba(251, 195, 220, 0.3),
        inset 0 0 10px rgba(0, 0, 0, 0.3);
}

.theme-toggle-site .theme-icon-dark,
.theme-toggle-site .theme-icon-light {
    position: absolute;
    font-size: 16px;
    transition: all 0.3s ease;
    z-index: 1;
}

.theme-toggle-site .theme-icon-dark {
    left: 10px;
    opacity: 1;
}

.theme-toggle-site .theme-icon-light {
    right: 10px;
    opacity: 0.3;
}

.theme-toggle-site input:checked ~ label {
    background: linear-gradient(135deg, #fff9e6 0%, #fff3cd 100%);
    border-color: rgba(255, 193, 7, 0.4);
    box-shadow: 
        0 0 25px rgba(255, 193, 7, 0.4),
        0 0 50px rgba(255, 193, 7, 0.2),
        inset 0 0 10px rgba(255, 255, 255, 0.5);
}

.theme-toggle-site input:checked ~ label::before {
    transform: translateX(36px);
    background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
    box-shadow: 0 0 20px rgba(255, 193, 7, 0.7);
}

.theme-toggle-site input:checked ~ label .theme-icon-dark {
    opacity: 0.3;
}

.theme-toggle-site input:checked ~ label .theme-icon-light {
    opacity: 1;
}

/* ===== ОНБОРДИНГ - КОСМОС ===== */
.onboarding {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0a0a0f;
    z-index: 50000;
    overflow: hidden;
}

.onboarding.hidden {
    display: none;
}

.onboarding-step {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 20px 0;
    opacity: 0;
    transform: scale(0.9);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.onboarding-step.active {
    opacity: 1;
    transform: scale(1);
    pointer-events: all;
}

.onboarding-step.exit {
    opacity: 0;
    transform: scale(1.1);
}

/* ===== ПРИВЕТСТВИЕ ===== */
.welcome-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 20% 80%, rgba(233, 30, 99, 0.4) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(156, 39, 176, 0.4) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(103, 58, 183, 0.3) 0%, transparent 70%),
        linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 100%);
    /* Полностью непрозрачный фон */
}

@keyframes bgPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.95; }
}

.welcome-logo {
    font-size: 100px;
    margin-bottom: 30px;
    animation: logoFloat 3s ease-in-out infinite;
    filter: drop-shadow(0 0 30px rgba(233, 30, 99, 0.5));
}

@keyframes logoFloat {
    0%, 100% { transform: translateY(0) rotate(-5deg); }
    50% { transform: translateY(-20px) rotate(5deg); }
}

.welcome-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 48px;
    font-weight: 800;
    color: white;
    margin-bottom: 20px;
    background: linear-gradient(135deg, #fff 0%, #f8bbd9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.welcome-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.8;
    max-width: 300px;
    margin: 0 auto 40px;
}

.welcome-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 20px 50px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border: none;
    border-radius: 50px;
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 10px 40px rgba(233, 30, 99, 0.4);
    margin: 0 auto;
}

.welcome-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 50px rgba(233, 30, 99, 0.5);
}

.welcome-btn:active {
    transform: scale(0.98);
}

.btn-arrow {
    font-size: 24px;
    transition: transform 0.3s ease;
}

.welcome-btn:hover .btn-arrow {
    transform: translateX(5px);
}

/* ===== КОНТЕНТ ===== */
.onboarding-content {
    text-align: center;
    padding: 60px 20px 40px 20px;
    max-width: 420px;
    width: 100%;
    position: relative;
    z-index: 2;
    margin-top: auto;
    margin-bottom: auto;
}

.back-btn {
    position: fixed;
    top: 25px;
    left: 25px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50px;
    padding: 14px 24px;
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 8px;
}

.back-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: scale(1.05);
}

/* ===== ИНДИКАТОР ШАГОВ ===== */
.step-indicator {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 30px;
}

.step-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.step-dot.active {
    width: 30px;
    border-radius: 5px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
}

.step-dot.done {
    background: #4caf50;
}

/* ===== ЭМОДЗИ ===== */
.onboarding-emoji {
    font-size: 80px;
    margin-bottom: 20px;
}

.onboarding-emoji.pulse {
    animation: pulse 2s ease-in-out infinite;
}

.onboarding-emoji.bounce {
    animation: bounce-soft 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

@keyframes bounce-soft {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

.onboarding-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: white;
    margin-bottom: 10px;
}

.onboarding-subtitle {
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 35px;
}

/* ===== ОПЦИИ ВЫБОРА ===== */
.onboarding-options {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.option-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: left;
    position: relative;
    z-index: 5;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.option-card:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateX(10px);
}

.option-card:active {
    transform: scale(0.98);
}

.option-card.delivery:hover {
    border-color: var(--primary-color);
    box-shadow: 0 0 30px rgba(233, 30, 99, 0.2);
}

.option-card.pickup:hover {
    border-color: #4caf50;
    box-shadow: 0 0 30px rgba(76, 175, 80, 0.2);
}

.option-icon {
    font-size: 40px;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}

.option-content {
    flex: 1;
}

.option-title {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: white;
    margin-bottom: 5px;
}

.option-desc {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
}

.option-arrow {
    font-size: 30px;
    color: rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.option-card:hover .option-arrow {
    color: white;
    transform: translateX(5px);
}

/* ===== СПИСОК ГОРОДОВ - ПРЕМИУМ КАРТОЧКИ ===== */
.cities-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: none;
    overflow-y: visible;
    overflow-x: hidden;
    padding: 10px 5px 40px 5px;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}

.cities-list::-webkit-scrollbar {
    width: 0;
    display: none;
}

.city-card {
    position: relative;
    background: linear-gradient(145deg, rgba(30, 30, 50, 0.9) 0%, rgba(20, 20, 35, 0.95) 100%);
    border-radius: 20px;
    padding: 16px 20px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: left;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Градиентная рамка при ховере */
.city-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 24px;
    padding: 2px;
    background: linear-gradient(135deg, #ffffff, #666666, #673ab7);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.city-card:hover::before {
    opacity: 1;
}

/* Свечение */
.city-card::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(233, 30, 99, 0.15) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.city-card:hover::after {
    opacity: 1;
}

.city-card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 20px 60px rgba(233, 30, 99, 0.25), 0 0 40px rgba(156, 39, 176, 0.15);
}

.city-card:active {
    transform: scale(0.98);
}

/* Контент карточки */
.city-card-inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 18px;
}

.city-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, rgba(233, 30, 99, 0.3), rgba(156, 39, 176, 0.2));
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    flex-shrink: 0;
    position: relative;
    overflow: visible;
}

/* Анимированный дым для машинки */
.city-icon::after {
    content: '💨';
    position: absolute;
    right: -10px;
    font-size: 18px;
    opacity: 0;
    animation: smokePuff 2s ease-in-out infinite;
}

@keyframes smokePuff {
    0% {
        opacity: 0;
        transform: translateX(0) scale(0.5);
    }
    50% {
        opacity: 0.7;
        transform: translateX(-15px) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateX(-30px) scale(1.2);
    }
}

.city-details {
    flex: 1;
    min-width: 0;
}

.city-name {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: white;
    margin-bottom: 6px;
    display: block;
}

.city-price {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
}

.city-free {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    color: #ffd54f;
    display: flex;
    align-items: center;
    gap: 4px;
}

.city-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.city-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 20px;
    white-space: nowrap;
}

.city-badge.price {
    color: #ffd54f;
    background: rgba(255, 213, 79, 0.15);
    border: 1px solid rgba(255, 213, 79, 0.3);
}

.city-badge.free {
    color: #69f0ae;
    background: rgba(105, 240, 174, 0.15);
    border: 1px solid rgba(105, 240, 174, 0.3);
}

.city-arrow {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 20px;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.city-card:hover .city-arrow {
    background: linear-gradient(135deg, #ffffff, #666666);
    color: white;
    transform: translateX(4px);
}

/* ===== КАРТОЧКИ САМОВЫВОЗА ===== */
.pickups-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: none;
    overflow-y: visible;
    overflow-x: hidden;
    padding: 10px 5px 40px 5px;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}

.pickups-list::-webkit-scrollbar {
    width: 0;
    display: none;
}

.pickup-card {
    position: relative;
    background: linear-gradient(145deg, rgba(30, 50, 35, 0.9) 0%, rgba(20, 35, 25, 0.95) 100%);
    border-radius: 24px;
    padding: 22px 24px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: left;
    overflow: hidden;
    border: 1px solid rgba(76, 175, 80, 0.2);
}

.pickup-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 24px;
    padding: 2px;
    background: linear-gradient(135deg, #4caf50, #00c853, #69f0ae);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.pickup-card:hover::before {
    opacity: 1;
}

.pickup-card::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(76, 175, 80, 0.15) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.pickup-card:hover::after {
    opacity: 1;
}

.pickup-card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 20px 60px rgba(76, 175, 80, 0.25), 0 0 40px rgba(105, 240, 174, 0.15);
}

.pickup-card-inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 18px;
}

.pickup-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.3), rgba(105, 240, 174, 0.2));
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    flex-shrink: 0;
}

.pickup-details {
    flex: 1;
}

.pickup-name {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: white;
    margin-bottom: 6px;
    display: block;
}

.pickup-address {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 4px;
}

.pickup-hours {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    color: #69f0ae;
    display: flex;
    align-items: center;
    gap: 4px;
}

.pickup-arrow {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 20px;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.pickup-card:hover .pickup-arrow {
    background: linear-gradient(135deg, #4caf50, #00c853);
    color: white;
    transform: translateX(4px);
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ===== ЗАГРУЗКА И СПИННЕР ===== */
.loading-container {
    padding: 40px;
}

.spinner-ring {
    width: 80px;
    height: 80px;
    margin: 0 auto 30px;
    position: relative;
    animation: spinnerRotate 2s linear infinite;
}

@keyframes spinnerRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.spinner-segment {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 4px solid transparent;
    border-radius: 50%;
}

.spinner-segment:nth-child(1) {
    border-top-color: #ffffff;
    animation: spinnerPulse 1.5s ease-in-out infinite;
}

.spinner-segment:nth-child(2) {
    border-right-color: #666666;
    animation: spinnerPulse 1.5s ease-in-out infinite 0.2s;
}

.spinner-segment:nth-child(3) {
    border-bottom-color: #673ab7;
    animation: spinnerPulse 1.5s ease-in-out infinite 0.4s;
}

@keyframes spinnerPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.95); }
}

.loading-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.7);
    animation: textPulse 1.5s ease-in-out infinite;
}

@keyframes textPulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

/* ===== УСПЕХ ===== */
.success-container {
    animation: successAppear 0.5s ease-out;
}

.success-container.hidden {
    display: none;
}

@keyframes successAppear {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

.success-check {
    width: 100px;
    height: 100px;
    margin: 0 auto 30px;
    background: linear-gradient(135deg, #4caf50, #2e7d32);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 50px;
    color: white;
    box-shadow: 0 10px 40px rgba(76, 175, 80, 0.4);
    animation: checkBounce 0.5s ease-out;
}

@keyframes checkBounce {
    0% { transform: scale(0); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* ===== КОНФЕТТИ ===== */
.confetti {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.confetti-piece {
    position: absolute;
    width: 12px;
    height: 12px;
    top: -20px;
    animation: confettiFall 3s ease-out forwards;
}

@keyframes confettiFall {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
    }
}

/* ===== НОВЫЙ ОНБОРДИНГ - ИМЯ, ПОЛ, ДЕНЬ РОЖДЕНИЯ ===== */

/* Анимированные эмодзи */
.animated-emoji {
    display: inline-block;
}

.animated-emoji.wave {
    animation: wave 2s ease-in-out infinite;
    transform-origin: 70% 70%;
}

@keyframes wave {
    0%, 100% { transform: rotate(0deg); }
    10% { transform: rotate(14deg); }
    20% { transform: rotate(-8deg); }
    30% { transform: rotate(14deg); }
    40% { transform: rotate(-4deg); }
    50% { transform: rotate(10deg); }
    60%, 100% { transform: rotate(0deg); }
}

/* Поле ввода имени */
.input-wrapper {
    margin-bottom: 30px;
}

.onboarding-input {
    width: 100%;
    padding: 18px 24px;
    font-size: 18px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    color: white;
    background: rgba(255, 255, 255, 0.08);
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    outline: none;
    transition: all 0.3s ease;
    text-align: center;
}

.onboarding-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.onboarding-input:focus {
    border-color: #ffffff;
    background: rgba(233, 30, 99, 0.1);
    box-shadow: 0 0 20px rgba(233, 30, 99, 0.3);
}

/* Выбор пола */
.gender-options {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-bottom: 30px;
}

.gender-card {
    flex: 1;
    max-width: 140px;
    padding: 25px 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.gender-card:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-5px);
}

.gender-card:active {
    transform: scale(0.95);
}

.gender-card.selected {
    background: linear-gradient(135deg, rgba(233, 30, 99, 0.3), rgba(156, 39, 176, 0.2));
    border-color: #ffffff;
    box-shadow: 0 0 30px rgba(233, 30, 99, 0.4);
}

.gender-emoji {
    font-size: 50px;
    transition: transform 0.3s ease;
}

.gender-card:hover .gender-emoji {
    transform: scale(1.1);
}

.gender-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: white;
}

/* Выбор дня рождения */
.birthday-picker {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-bottom: 30px;
}

.birthday-select {
    padding: 15px 20px;
    font-size: 16px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    color: white;
    background: rgba(255, 255, 255, 0.08);
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    outline: none;
    cursor: pointer;
    transition: all 0.3s ease;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23fff' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    padding-right: 40px;
}

.birthday-select option {
    background: #1a1a2e;
    color: white;
}

.birthday-select:focus {
    border-color: #ffffff;
    box-shadow: 0 0 15px rgba(233, 30, 99, 0.3);
}

/* Кнопка пропустить */
.skip-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    cursor: pointer;
    margin-top: 15px;
    transition: color 0.3s ease;
}

.skip-btn:hover {
    color: white;
}

/* ===== ПЛАВАЮЩИЕ ЭМОДЗИ ===== */
.floating-emojis {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.floating-emoji {
    position: absolute;
    font-size: 30px;
    opacity: 0.4;
    animation: floatUp 5s ease-out forwards;
}

@keyframes floatUp {
    0% {
        transform: translateY(100vh) rotate(0deg) scale(0);
        opacity: 0;
    }
    10% {
        opacity: 0.4;
        transform: translateY(90vh) rotate(30deg) scale(1);
    }
    90% {
        opacity: 0.4;
    }
    100% {
        transform: translateY(-50px) rotate(360deg) scale(0.5);
        opacity: 0;
    }
}

/* ===== ЧАСТИЦЫ ===== */
.particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    animation: particleFloat 8s ease-in-out infinite;
}

@keyframes particleFloat {
    0%, 100% {
        transform: translateY(0) translateX(0);
        opacity: 0.5;
    }
    50% {
        transform: translateY(-30px) translateX(20px);
        opacity: 1;
    }
}

body.light-theme {
    --bg-color: var(--light-bg-color, #ffffff);
    --text-color: var(--light-text-color, #000000);
    --card-bg: var(--light-card-bg, #f5f5f5);
    --card-border: #e0e0e0;
    --header-bg: var(--light-bg-color, #ffffff);
    --category-bg: var(--light-bg-color, #ffffff);
    --category-border: #ddd;
    --category-hover: #f0f0f0;
    --category-active-bg: #000000;
    --category-active-text: #ffffff;
    --shadow-color: rgba(0, 0, 0, 0.1);
}

body {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg-color);
    min-height: 100vh;
    padding: 0;
    color: var(--text-color);
}

body.light-theme {
    background: var(--light-bg-color, #ffffff) !important;
    color: var(--light-text-color, #000000) !important;
}

body.light-theme .product-card,
body.light-theme .product-info {
    background: var(--light-card-bg, #f5f5f5) !important;
}

/* Светлая тема для каталога */
body.light-theme .product-name,
body.light-theme .product-price,
body.light-theme .header-fixed h1,
body.light-theme .category-btn,
body.light-theme .onboarding-title,
body.light-theme .onboarding-subtitle,
body.light-theme .city-name,
body.light-theme .pickup-name,
body.light-theme h1, body.light-theme h2, body.light-theme h3 {
    color: var(--light-text-color, #000000) !important;
}

body.light-theme .category-btn.active {
    background: #000000 !important;
    color: #ffffff !important;
}

body.light-theme .product-card {
    border: 1px solid #e0e0e0 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}

/* Светлая тема - онбординг */
body.light-theme .onboarding-overlay {
    background: linear-gradient(180deg, #f5f5f5 0%, #ffffff 100%) !important;
}

body.light-theme .welcome-bg {
    background: 
        radial-gradient(circle at 20% 80%, rgba(233, 30, 99, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(156, 39, 176, 0.15) 0%, transparent 50%),
        linear-gradient(135deg, #f5f5f5 0%, #ffffff 100%) !important;
}

body.light-theme .city-card,
body.light-theme .pickup-card {
    background: var(--light-card-bg, #f5f5f5) !important;
    border: 1px solid #e0e0e0 !important;
}

body.light-theme .city-card::before,
body.light-theme .pickup-card::before {
    background: linear-gradient(135deg, #ffffff, #666666, #673ab7) !important;
}

body.light-theme .city-name,
body.light-theme .pickup-name,
body.light-theme .city-price,
body.light-theme .pickup-address,
body.light-theme .city-free,
body.light-theme .pickup-hours {
    color: var(--light-text-color, #000000) !important;
}

body.light-theme .welcome-text,
body.light-theme .welcome-title,
body.light-theme .loading-text {
    color: var(--light-text-color, #000000) !important;
}

body.light-theme .back-btn {
    background: rgba(255, 255, 255, 0.9) !important;
    color: #000000 !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

body.light-theme .step-icon {
    background: var(--light-card-bg, #f5f5f5) !important;
    border: 2px solid #e0e0e0 !important;
}

body.light-theme .choice-btn {
    background: var(--light-card-bg, #f5f5f5) !important;
    color: var(--light-text-color, #000000) !important;
    border: 2px solid #e0e0e0 !important;
}

body.light-theme .choice-btn:hover {
    border-color: #ffffff !important;
}

/* Светлая тема - header */
body.light-theme .header-fixed {
    background: rgba(255, 255, 255, 0.95) !important;
    border-bottom: 1px solid #e0e0e0 !important;
}

/* Светлая тема - категории */
body.light-theme .category-btn {
    background: var(--light-card-bg, #f5f5f5) !important;
    color: var(--light-text-color, #000000) !important;
    border: 1px solid #e0e0e0 !important;
}

/* Светлая тема - корзина */
body.light-theme .cart-popup,
body.light-theme .cart-content {
    background: var(--light-bg-color, #ffffff) !important;
    color: var(--light-text-color, #000000) !important;
}

body.light-theme .cart-item {
    background: var(--light-card-bg, #f5f5f5) !important;
    border: 1px solid #e0e0e0 !important;
}

body.light-theme .cart-item-name,
body.light-theme .cart-item-price,
body.light-theme .cart-total-label,
body.light-theme .cart-total-price {
    color: var(--light-text-color, #000000) !important;
}

/* Светлая тема - расширенные стили */
body.light-theme .modal-content,
body.light-theme .modal-overlay .modal-content,
body.light-theme .checkout-modal,
body.light-theme .product-modal {
    background: var(--light-bg-color, #ffffff) !important;
    color: var(--light-text-color, #000000) !important;
}

body.light-theme .modal-title,
body.light-theme .product-modal-name,
body.light-theme .product-modal-price,
body.light-theme .product-modal-description,
body.light-theme .checkout-title,
body.light-theme .section-title {
    color: var(--light-text-color, #000000) !important;
}

/* Светлая тема - формы и инпуты */
body.light-theme input,
body.light-theme textarea,
body.light-theme select,
body.light-theme .input-field,
body.light-theme .form-input {
    background: var(--light-card-bg, #f5f5f5) !important;
    color: var(--light-text-color, #000000) !important;
    border: 1px solid #d0d0d0 !important;
}

body.light-theme input::placeholder,
body.light-theme textarea::placeholder {
    color: #888888 !important;
}

body.light-theme input:focus,
body.light-theme textarea:focus,
body.light-theme select:focus {
    border-color: #ffffff !important;
    outline: none;
}

/* Светлая тема - лейблы и текст */
body.light-theme label,
body.light-theme .label,
body.light-theme .input-label,
body.light-theme .form-label,
body.light-theme p,
body.light-theme span:not(.emoji):not(.loading-emoji) {
    color: var(--light-text-color, #000000) !important;
}

/* Светлая тема - секции оформления */
body.light-theme .checkout-section,
body.light-theme .order-section,
body.light-theme .delivery-section {
    background: var(--light-card-bg, #f5f5f5) !important;
    border: 1px solid #e0e0e0 !important;
}

body.light-theme .checkout-section-title,
body.light-theme .section-header {
    color: var(--light-text-color, #000000) !important;
}

/* Светлая тема - карточки доставки */
body.light-theme .delivery-option,
body.light-theme .payment-option,
body.light-theme .time-slot {
    background: var(--light-card-bg, #f5f5f5) !important;
    color: var(--light-text-color, #000000) !important;
    border: 1px solid #e0e0e0 !important;
}

body.light-theme .delivery-option.active,
body.light-theme .payment-option.active,
body.light-theme .time-slot.active {
    border-color: #ffffff !important;
    background: rgba(233, 30, 99, 0.1) !important;
}

/* Светлая тема - модификаторы */
body.light-theme .modifier-item,
body.light-theme .modifier-group,
body.light-theme .upsell-item {
    background: var(--light-card-bg, #f5f5f5) !important;
    color: var(--light-text-color, #000000) !important;
    border: 1px solid #e0e0e0 !important;
}

body.light-theme .modifier-name,
body.light-theme .modifier-price,
body.light-theme .upsell-name,
body.light-theme .upsell-price {
    color: var(--light-text-color, #000000) !important;
}

/* Светлая тема - навигация */
body.light-theme .nav-bottom,
body.light-theme .bottom-nav {
    background: rgba(255, 255, 255, 0.95) !important;
    border-top: 1px solid #e0e0e0 !important;
}

body.light-theme .nav-item,
body.light-theme .nav-text {
    color: #666666 !important;
}

body.light-theme .nav-item.active,
body.light-theme .nav-item.active .nav-text {
    color: #ffffff !important;
}

/* Светлая тема - профиль */
body.light-theme .profile-container,
body.light-theme .profile-card,
body.light-theme .bonus-card,
body.light-theme .history-item,
body.light-theme .promo-card,
body.light-theme .referral-card,
body.light-theme .task-card {
    background: var(--light-card-bg, #f5f5f5) !important;
    color: var(--light-text-color, #000000) !important;
    border: 1px solid #e0e0e0 !important;
}

body.light-theme .profile-name,
body.light-theme .bonus-amount,
body.light-theme .bonus-label,
body.light-theme .history-title,
body.light-theme .history-date,
body.light-theme .history-price {
    color: var(--light-text-color, #000000) !important;
}

/* Светлая тема - сторис */
body.light-theme .stories-title {
    color: var(--light-text-color, #000000) !important;
}

/* Светлая тема - регистрация и онбординг */
body.light-theme .reg-container,
body.light-theme .reg-step,
body.light-theme .onboarding-container {
    background: var(--light-bg-color, #ffffff) !important;
}

body.light-theme .reg-title,
body.light-theme .reg-subtitle,
body.light-theme .reg-label,
body.light-theme .reg-hint {
    color: var(--light-text-color, #000000) !important;
}

body.light-theme .reg-input,
body.light-theme .onboarding-input {
    background: var(--light-card-bg, #f5f5f5) !important;
    color: var(--light-text-color, #000000) !important;
    border: 1px solid #d0d0d0 !important;
}

/* Светлая тема - промокоды */
body.light-theme .promo-input-container input,
body.light-theme .promo-code-input {
    background: var(--light-card-bg, #f5f5f5) !important;
    color: var(--light-text-color, #000000) !important;
    border: 1px solid #d0d0d0 !important;
}

/* Светлая тема - итого и кнопки */
body.light-theme .cart-summary,
body.light-theme .order-summary {
    background: var(--light-card-bg, #f5f5f5) !important;
    border: 1px solid #e0e0e0 !important;
}

body.light-theme .summary-row,
body.light-theme .summary-label,
body.light-theme .summary-value {
    color: var(--light-text-color, #000000) !important;
}

/* Светлая тема - бонусы */
body.light-theme .bonus-slider-container,
body.light-theme .bonus-info {
    background: var(--light-card-bg, #f5f5f5) !important;
}

body.light-theme .bonus-available,
body.light-theme .bonus-will-use {
    color: var(--light-text-color, #000000) !important;
}

/* Светлая тема - уведомления */
body.light-theme .notification {
    background: var(--light-card-bg, #f5f5f5) !important;
    color: var(--light-text-color, #000000) !important;
    border: 1px solid #e0e0e0 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
}

/* Светлая тема - скролл */
body.light-theme ::-webkit-scrollbar-track {
    background: #f0f0f0 !important;
}

body.light-theme ::-webkit-scrollbar-thumb {
    background: #c0c0c0 !important;
}

body.light-theme ::-webkit-scrollbar-thumb:hover {
    background: #a0a0a0 !important;
}

/* Светлая тема - загрузочный экран */
body.light-theme .loading-screen,
body.light-theme #loadingScreen {
    background: linear-gradient(180deg, #f5f5f5 0%, #ffffff 100%) !important;
}

body.light-theme .loading-emoji,
body.light-theme .loading-stage {
    color: var(--light-text-color, #000000) !important;
}

/* Светлая тема - шапка с логотипом */
body.light-theme .shop-logo,
body.light-theme .header-title {
    color: var(--light-text-color, #000000) !important;
}

/* Светлая тема - пустые состояния */
body.light-theme .empty-state,
body.light-theme .empty-message {
    color: #666666 !important;
}

/* Светлая тема - подсказки */
body.light-theme .tooltip,
body.light-theme .hint {
    background: var(--light-card-bg, #f5f5f5) !important;
    color: var(--light-text-color, #000000) !important;
    border: 1px solid #e0e0e0 !important;
}

/* Светлая тема - разделители */
body.light-theme hr,
body.light-theme .divider {
    border-color: #e0e0e0 !important;
}

/* ===== СНЕЖИНКИ ===== */
.snowflakes,
.snowflakes-catalog {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 10;
}

.snowflakes-catalog {
    position: fixed;
    z-index: 9000;
}

.snowflake {
    position: absolute;
    top: -20px;
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
    opacity: 0.8;
    box-shadow: 0 0 10px rgba(255,255,255,0.8);
    animation: snowfall linear infinite;
}

@keyframes snowfall {
    0% {
        transform: translateY(-20px) translateX(0);
        opacity: 0.8;
    }
    100% {
        transform: translateY(100vh) translateX(20px);
        opacity: 0.3;
    }
}

.snowflake:nth-child(1) { left: 3%; animation-duration: 8s; animation-delay: 0s; width: 4px; height: 4px; }
.snowflake:nth-child(2) { left: 8%; animation-duration: 12s; animation-delay: 0.5s; width: 6px; height: 6px; }
.snowflake:nth-child(3) { left: 13%; animation-duration: 10s; animation-delay: 1s; width: 3px; height: 3px; }
.snowflake:nth-child(4) { left: 18%; animation-duration: 14s; animation-delay: 1.5s; width: 5px; height: 5px; }
.snowflake:nth-child(5) { left: 23%; animation-duration: 9s; animation-delay: 2s; width: 7px; height: 7px; }
.snowflake:nth-child(6) { left: 28%; animation-duration: 11s; animation-delay: 2.5s; width: 4px; height: 4px; }
.snowflake:nth-child(7) { left: 33%; animation-duration: 13s; animation-delay: 3s; width: 6px; height: 6px; }
.snowflake:nth-child(8) { left: 38%; animation-duration: 8s; animation-delay: 3.5s; width: 3px; height: 3px; }
.snowflake:nth-child(9) { left: 43%; animation-duration: 10s; animation-delay: 4s; width: 5px; height: 5px; }
.snowflake:nth-child(10) { left: 48%; animation-duration: 12s; animation-delay: 4.5s; width: 8px; height: 8px; }
.snowflake:nth-child(11) { left: 53%; animation-duration: 9s; animation-delay: 5s; width: 4px; height: 4px; }
.snowflake:nth-child(12) { left: 58%; animation-duration: 14s; animation-delay: 5.5s; width: 6px; height: 6px; }
.snowflake:nth-child(13) { left: 63%; animation-duration: 11s; animation-delay: 6s; width: 3px; height: 3px; }
.snowflake:nth-child(14) { left: 68%; animation-duration: 8s; animation-delay: 6.5s; width: 7px; height: 7px; }
.snowflake:nth-child(15) { left: 73%; animation-duration: 13s; animation-delay: 7s; width: 5px; height: 5px; }
.snowflake:nth-child(16) { left: 78%; animation-duration: 10s; animation-delay: 7.5s; width: 4px; height: 4px; }
.snowflake:nth-child(17) { left: 83%; animation-duration: 12s; animation-delay: 0.2s; width: 6px; height: 6px; }
.snowflake:nth-child(18) { left: 88%; animation-duration: 9s; animation-delay: 0.7s; width: 3px; height: 3px; }
.snowflake:nth-child(19) { left: 93%; animation-duration: 11s; animation-delay: 1.2s; width: 5px; height: 5px; }
.snowflake:nth-child(20) { left: 98%; animation-duration: 14s; animation-delay: 1.7s; width: 7px; height: 7px; }

/* ===== ШАПКИ СЕКЦИЙ ===== */
.section-header {
    padding: 15px 20px;
    background: var(--bg-color, transparent);
    display: flex;
    align-items: center;
}

/* Заголовок спецпредложений (сторис) */
.section-header.stories-header .section-title,
.section-header:has(+ #storiesSection) .section-title,
.stories-section-header .section-title {
    color: var(--stories-title-color, var(--text-color));
}

.section-header:first-of-type {
    padding-top: calc(20px + env(safe-area-inset-top, 0px));
}

body.tg-webapp .section-header:first-of-type {
    padding-top: calc(20px + var(--tg-safe-area-top, 0px));
}

.section-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-color);
    letter-spacing: 2px;
    margin: 0;
    text-transform: uppercase;
}

.categories-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mini-header {
    display: none;
}

.stories-title {
    font-family: var(--tg-stories-title-font, 'Montserrat', sans-serif);
    font-size: var(--tg-stories-title-size, 18px);
    font-weight: 600;
    color: var(--stories-title-color, var(--text-color));
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* ===== СТОРИС ===== */
.stories-section {
    background: var(--bg-color, transparent);
    padding: 0;
}

/* Telegram WebApp */
body.tg-webapp .stories-section {
    background: var(--bg-color) !important;
    padding: 0;
}

.stories-scroll {
    display: flex;
    gap: 10px;
    padding: 10px 15px 15px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.stories-scroll::-webkit-scrollbar {
    display: none;
}

.story-card {
    flex-shrink: 0;
    width: calc((100vw - 50px) / 3);
    max-width: 180px;
    height: calc(((100vw - 50px) / 3) * 1.5);
    max-height: 270px;
    min-height: 200px;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    /* Мягкая тень с небольшой прозрачностью */
    box-shadow: 
        0 6px 20px rgba(233, 30, 99, 0.15),
        0 10px 25px rgba(156, 39, 176, 0.1),
        0 3px 10px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border: 3px solid var(--stories-border-color, var(--primary-color));
    transform: translateY(0);
}

/* Увеличенные сторис для Telegram Mini App */
body.tg-webapp .story-card {
    width: calc((100vw - 30px) / 2);
    max-width: 260px;
    height: calc(((100vw - 30px) / 2) * 1.35);
    max-height: 380px;
    min-height: 280px;
}

.story-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 13px;
}

.story-card-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
}

.story-card:hover {
    transform: translateY(-6px) scale(1.03);
    box-shadow: 
        0 10px 30px rgba(233, 30, 99, 0.25),
        0 15px 35px rgba(156, 39, 176, 0.15),
        0 5px 15px rgba(0, 0, 0, 0.12);
}

.story-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(transparent, rgba(0,0,0,0.6));
    pointer-events: none;
}

.story-label {
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 600;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
    z-index: 2;
}

/* ===== ДИНАМИЧЕСКИЕ СТОРИС ИЗ АДМИНКИ ===== */
.dynamic-story {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

.dynamic-story::after {
    display: none;
}

.story-title-overlay {
    position: absolute;
    bottom: 10px;
    left: 5px;
    right: 5px;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: white;
    text-align: center;
    text-shadow: 0 1px 5px rgba(0,0,0,0.8);
    z-index: 3;
}

/* ===== FULLSCREEN СТОРИС (как Instagram) ===== */
.story-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease;
}

.story-fullscreen-inner {
    width: 100%;
    height: 100%;
    max-width: 500px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.story-progress-container {
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    display: flex;
    gap: 4px;
    z-index: 10;
}

.story-progress-item {
    flex: 1;
    height: 3px;
    background: rgba(255,255,255,0.3);
    border-radius: 2px;
    overflow: hidden;
}

.story-progress-item.viewed {
    background: white;
}

.story-progress-item.active {
    background: white;
    animation: progressFill 5s linear forwards;
}

@keyframes progressFill {
    from { background: linear-gradient(to right, white 0%, rgba(255,255,255,0.3) 0%); }
    to { background: linear-gradient(to right, white 100%, rgba(255,255,255,0.3) 100%); }
}

.story-close-btn {
    position: absolute;
    top: 40px;
    right: 15px;
    width: 40px;
    height: 40px;
    background: rgba(0,0,0,0.5);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 20px;
    cursor: pointer;
    z-index: 10;
}

.story-fullscreen-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.story-fullscreen-placeholder {
    font-size: 100px;
    color: rgba(255,255,255,0.3);
}

.story-fullscreen-info {
    position: absolute;
    bottom: 100px;
    left: 20px;
    right: 20px;
    text-align: center;
    z-index: 10;
}

.story-fullscreen-info h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    font-weight: 800;
    color: white;
    margin-bottom: 10px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

.story-fullscreen-info p {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    color: rgba(255,255,255,0.9);
    text-shadow: 0 1px 5px rgba(0,0,0,0.5);
}

.story-action-btn {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    color: #333;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 700;
    padding: 15px 50px;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    z-index: 10;
}

.story-nav-areas {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    z-index: 5;
}

.story-nav-prev,
.story-nav-next {
    flex: 1;
    cursor: pointer;
}

/* Убираем старые стили модалки */
    transform: scale(1.05);
}

/* ===== ПРОСМОТР СТОРИС НА ВЕСЬ ЭКРАН ===== */
.story-viewer {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 10000;
    justify-content: center;
    align-items: center;
}

.story-viewer.active {
    display: flex;
}

/* Скрываем ВСЕ кнопки story по умолчанию */
.story-close,
.story-prev,
.story-next {
    display: none !important;
}

/* Показываем кнопки ТОЛЬКО когда viewer активен */
.story-viewer.active .story-close,
.story-viewer.active .story-prev,
.story-viewer.active .story-next {
    display: flex !important;
}

.story-viewer img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.story-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 28px;
    cursor: pointer;
    z-index: 10;
    align-items: center;
    justify-content: center;
}

.story-prev,
.story-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 32px;
    cursor: pointer;
}

.story-prev { left: 20px; }
.story-next { right: 20px; }

.story-progress {
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    display: flex;
    gap: 5px;
}

.story-progress-bar {
    flex: 1;
    height: 3px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    overflow: hidden;
}

.story-progress-bar.active {
    background: rgba(255, 255, 255, 0.9);
}

.story-progress-bar.viewed {
    background: rgba(255, 255, 255, 0.9);
}

/* ===== ШАПКА С КАТЕГОРИЯМИ (ЗАКРЕПЛЕНА) ===== */
.header-fixed {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    background: var(--header-bg);
    padding: 15px 20px;
    padding-top: calc(15px + env(safe-area-inset-top, 0px));
    z-index: 999999 !important;
    border-bottom: 1px solid var(--category-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform;
    /* Для Telegram WebApp */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

body.tg-webapp .header-fixed {
    padding-top: calc(15px + var(--tg-safe-area-top, 0px));
}

.header-fixed h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--header-title-color, var(--text-color));
    letter-spacing: 2px;
    margin: 0;
}

.header-controls {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* ===== КНОПКИ В ШАПКЕ - ЧИСТЫЙ НЕОН ===== */
.header-btn {
    width: 56px;
    height: 56px;
    background: rgba(251, 195, 220, 0.15);
    border: none !important;
    outline: none !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    box-shadow: 
        0 0 25px rgba(251, 195, 220, 0.5),
        0 0 50px rgba(251, 195, 220, 0.3),
        0 0 75px rgba(251, 195, 220, 0.15),
        inset 0 0 20px rgba(251, 195, 220, 0.2);
}

.header-btn:hover {
    transform: scale(1.15);
    box-shadow: 
        0 0 35px rgba(251, 195, 220, 0.7),
        0 0 70px rgba(251, 195, 220, 0.5),
        0 0 100px rgba(251, 195, 220, 0.3),
        inset 0 0 30px rgba(251, 195, 220, 0.3);
}

.header-btn:active {
    transform: scale(0.95);
}

.btn-emoji {
    font-size: 28px;
    filter: drop-shadow(0 0 12px rgba(251, 195, 220, 0.8));
}

/* Старые классы для совместимости */
.profile-btn,
.favorites-btn,
.cart-btn {
    border: none !important;
    outline: none !important;
}

.profile-btn:hover,
.favorites-counter:hover,
.cart-counter:hover {
    transform: scale(1.1);
    box-shadow: 0 0 30px rgba(251, 195, 220, 0.5), inset 0 0 20px rgba(251, 195, 220, 0.1);
    border-color: rgba(251, 195, 220, 0.6);
}

.profile-icon {
    font-size: 24px;
}

.heart-icon-big {
    font-size: 22px;
}

.favorites-label,
.cart-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 7px;
    font-weight: 600;
    color: var(--text-color);
    opacity: 0.9;
    letter-spacing: 0.5px;
    margin-top: 2px;
    text-transform: uppercase;
}

.cart-icon-big {
    font-size: 22px;
}

.cart-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: linear-gradient(135deg, #e53935, #c62828);
    color: white;
    font-size: 10px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(229, 57, 53, 0.4);
}

.cart-badge:empty,
.cart-badge[data-count="0"] {
    display: none;
}

/* ===== МОДАЛКА КОРЗИНЫ ===== */
.cart-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, var(--bg-color) 0%, #0d0d15 100%);
    z-index: 9999999;
    justify-content: center;
    align-items: stretch;
}

.cart-modal.active {
    display: flex;
}

/* Блокировка скролла при открытой корзине */
body.cart-open {
    overflow: hidden !important;
    position: fixed;
    width: 100%;
    height: 100%;
}

body.cart-open .bottom-nav {
    display: none !important;
}

.cart-content {
    background: transparent;
    width: 100%;
    max-width: 600px;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin: 0 auto;
}

.cart-header {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255,255,255,0.03);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    flex-shrink: 0;
}

.cart-header h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: 10px;
}

.cart-close {
    width: 44px;
    height: 44px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 50%;
    color: var(--text-color);
    font-size: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.cart-close:hover {
    background: rgba(255,255,255,0.15);
    transform: rotate(90deg);
}

.cart-items {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
    -webkit-overflow-scrolling: touch;
}

.cart-item {
    display: flex;
    gap: 15px;
    padding: 16px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    margin-bottom: 12px;
    transition: all 0.3s ease;
}

.cart-item:hover {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.12);
}

.cart-item-image {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    object-fit: cover;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.cart-item-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cart-item-name {
    font-family: var(--tg-product-title-font, 'Montserrat'), sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 6px;
    line-height: 1.3;
}

.cart-item-price {
    font-family: var(--tg-product-price-font, 'Montserrat'), sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--card-price-color, #ffffff);
}

/* Счётчик количества в корзине */
.cart-item-controls {
    display: flex;
    align-items: center;
    gap: 0;
    background: rgba(30,30,40,0.8);
    border-radius: 12px;
    padding: 4px;
    align-self: center;
}

.cart-item-controls button {
    width: 36px;
    height: 36px;
    background: rgba(255,255,255,0.1);
    border: none;
    border-radius: 10px;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cart-item-controls button:hover {
    background: rgba(255,255,255,0.2);
}

.cart-item-controls span {
    min-width: 30px;
    text-align: center;
    font-weight: 600;
    font-size: 16px;
    color: #fff;
}

.cart-item-remove {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #ff4757, #ff6b81);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 18px;
    cursor: pointer;
    align-self: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(255,71,87,0.3);
}

.cart-item-remove:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(255,71,87,0.5);
}

/* Модификаторы в корзине */
.cart-modifier {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    margin: 4px 0 0 0;
    padding: 4px 8px;
    background: rgba(255,255,255,0.05);
    border-radius: 6px;
    display: inline-block;
}

body.light-theme .cart-modifier {
    color: rgba(0, 0, 0, 0.5);
    background: rgba(0,0,0,0.05);
}

/* Апсел товары в корзине */
.cart-item-upsell {
    background: linear-gradient(135deg, rgba(233, 30, 99, 0.1), rgba(156, 39, 176, 0.1));
    border: 1px solid rgba(233, 30, 99, 0.2);
}

.cart-item-emoji {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
}

.cart-empty {
    text-align: center;
    padding: 60px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
}

.cart-empty-icon {
    font-size: 70px;
    margin-bottom: 20px;
    opacity: 0.8;
}

.cart-empty-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: rgba(255,255,255,0.6);
    margin-bottom: 25px;
}

.cart-empty-btn {
    padding: 14px 32px;
    background: linear-gradient(135deg, #ffffff, #666666);
    border: none;
    border-radius: 30px;
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 25px rgba(255,255,255,0.4);
    transition: all 0.3s ease;
}

.cart-empty-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(255,255,255,0.5);
}

/* Апсел в корзине */
.cart-upsell {
    padding: 18px 20px;
    border-top: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.03);
}

.cart-upsell-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cart-upsell-items {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
}

.cart-upsell-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.cart-upsell-item:hover {
    border-color: rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.08);
}

.cart-upsell-item.added {
    border-color: #4caf50;
    background: linear-gradient(145deg, rgba(76, 175, 80, 0.15), rgba(56,142,60,0.1));
}

.cart-upsell-emoji {
    font-size: 28px;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,0.2));
}

.cart-upsell-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cart-upsell-name {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

.cart-upsell-price {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    color: rgba(255,255,255,0.6);
    font-weight: 700;
}

.cart-upsell-add {
    width: 32px;
    height: 32px;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    color: white;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.cart-upsell-add:hover {
    background: rgba(255,255,255,0.25);
    transform: scale(1.1);
}

.cart-upsell-item.added .cart-upsell-add {
    background: linear-gradient(135deg, #4caf50, #388e3c);
    box-shadow: 0 4px 15px rgba(76,175,80,0.4);
}

.cart-footer {
    padding: 20px;
    padding-bottom: calc(25px + env(safe-area-inset-bottom, 20px));
    border-top: 1px solid rgba(255,255,255,0.1);
    background: linear-gradient(180deg, rgba(15,15,25,0.98), rgba(10,10,20,0.99));
    position: sticky;
    bottom: 0;
    backdrop-filter: blur(20px);
}

.cart-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Montserrat', sans-serif;
    margin-bottom: 18px;
}

.cart-total-label {
    font-size: 16px;
    font-weight: 700;
    color: rgba(255,255,255,0.7);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cart-total-price {
    font-size: 26px;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.btn-checkout {
    width: 100%;
    padding: 18px;
    background: linear-gradient(135deg, #ffffff, #e0e0e0);
    border: none;
    border-radius: 18px;
    color: #0a0a0f;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    position: relative;
    z-index: 100;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    box-shadow: 0 8px 30px rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.btn-checkout:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(255, 255, 255, 0.3);
}

.btn-checkout:active {
    transform: scale(0.98);
}

/* ===== МОДАЛКА ОФОРМЛЕНИЯ ===== */
.checkout-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, var(--bg-color) 0%, #0d0d15 100%);
    z-index: 99999999;
    justify-content: center;
    align-items: stretch;
}

.checkout-modal.active {
    display: flex;
}

.checkout-content {
    background: transparent;
    width: 100%;
    max-width: 600px;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin: 0 auto;
}

.checkout-scroll {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 20px;
}

.checkout-header {
    padding: 20px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, rgba(255,255,255,0.15), rgba(150,150,150,0.1));
    border-bottom: 1px solid rgba(255,255,255,0.2);
    flex-shrink: 0;
}

.checkout-header h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: 10px;
}

.checkout-close {
    width: 44px;
    height: 44px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 50%;
    color: var(--text-color);
    font-size: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.checkout-close:hover {
    background: rgba(255,255,255,0.15);
    transform: rotate(90deg);
}

/* Секции формы */
.form-section {
    padding: 20px;
    margin: 0 15px 15px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
}

.form-section:first-child {
    margin-top: 15px;
}

.form-section:last-of-type {
    border-bottom: none;
}

.form-section-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-row {
    display: flex;
    gap: 15px;
}

.form-group.half {
    flex: 1;
}

/* УЛУЧШЕННЫЕ Способы оплаты */
.payment-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.payment-option {
    width: 100%;
}

.payment-option input {
    display: none;
}

.payment-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px 12px;
    min-height: 100px;
    background: linear-gradient(145deg, rgba(30,30,40,0.8), rgba(20,20,30,0.9));
    border: 2px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.payment-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, transparent 0%, rgba(255,255,255,0.03) 100%);
    pointer-events: none;
}

.payment-card:hover {
    border-color: rgba(255,255,255,0.25);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.payment-option input:checked + .payment-card {
    border-color: #ffffff;
    background: linear-gradient(145deg, rgba(255,255,255,0.2), rgba(150,150,150,0.15));
    box-shadow: 0 0 25px rgba(255,255,255,0.3), inset 0 0 20px rgba(255,255,255,0.1);
}

.payment-icon {
    font-size: 32px;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));
}

.payment-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.payment-desc {
    font-size: 10px;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

#checkoutForm {
    padding: 0;
}

/* Улучшенные поля ввода в checkout */
.checkout-modal input[type="text"],
.checkout-modal input[type="tel"],
.checkout-modal input[type="date"],
.checkout-modal select,
.checkout-modal textarea {
    background: rgba(255,255,255,0.08);
    border: 2px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 15px;
    color: #fff;
    transition: all 0.3s ease;
}

.checkout-modal input:focus,
.checkout-modal select:focus,
.checkout-modal textarea:focus {
    border-color: #ffffff;
    background: rgba(255,255,255,0.08);
    outline: none;
    box-shadow: 0 0 20px rgba(255,255,255,0.15);
}

.checkout-modal label {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
    margin-bottom: 8px;
    display: block;
}

/* Итоговая сумма */
.checkout-summary {
    padding: 20px;
    margin: 0 15px;
    background: linear-gradient(145deg, rgba(30,30,40,0.9), rgba(20,20,30,0.95));
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    margin-bottom: 15px;
}

#checkoutForm .form-group {
    margin-bottom: 15px;
}

#checkoutForm .form-group:last-child {
    margin-bottom: 0;
}

#checkoutForm label {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#checkoutForm input,
#checkoutForm select,
#checkoutForm textarea {
    width: 100%;
    padding: 15px;
    background: var(--category-bg);
    border: 1px solid var(--category-border);
    border-radius: 10px;
    color: var(--text-color);
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
}

#checkoutForm textarea {
    min-height: 80px;
    resize: vertical;
}

/* ===== БОНУСЫ И ПРОМОКОД В ОФОРМЛЕНИИ ===== */
.bonus-promo-section {
    background: var(--category-bg);
    border-radius: 12px;
    padding: 15px;
    margin: 0 20px 15px;
}

.bonus-balance-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.bonus-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bonus-icon {
    font-size: 20px;
}

.bonus-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    color: var(--text-muted);
}

.bonus-amount {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #4caf50;
}

.use-bonus-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.use-bonus-toggle input {
    display: none;
}

.toggle-slider {
    width: 44px;
    height: 24px;
    background: var(--category-border);
    border-radius: 12px;
    position: relative;
    transition: all 0.3s ease;
}

.toggle-slider::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: all 0.3s ease;
}

.use-bonus-toggle input:checked + .toggle-slider {
    background: #4caf50;
}

.use-bonus-toggle input:checked + .toggle-slider::after {
    left: 22px;
}

.toggle-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    color: var(--text-muted);
}

.bonus-discount-info {
    background: rgba(76, 175, 80, 0.1);
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 15px;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    color: #4caf50;
}

.promo-code-row {
    display: flex;
    gap: 10px;
}

.promo-code-row input {
    flex: 1;
    padding: 12px 15px;
    background: var(--input-bg);
    border: 1px solid var(--category-border);
    border-radius: 10px;
    color: var(--text-color);
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
}

.apply-promo-btn {
    padding: 12px 20px;
    background: transparent;
    border: 1px solid var(--category-border);
    border-radius: 10px;
    color: var(--text-color);
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.apply-promo-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
}

.promo-result {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
}

.promo-result.success {
    background: rgba(76, 175, 80, 0.1);
    color: #4caf50;
}

.promo-result.error {
    background: rgba(244, 67, 54, 0.1);
    color: #f44336;
}

.checkout-summary {
    background: var(--category-bg);
    border-radius: 12px;
    padding: 15px;
    margin: 20px;
    margin-bottom: 10px;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    color: var(--text-color);
    margin-bottom: 10px;
}

.summary-row.total {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 0;
    padding-top: 10px;
    border-top: 1px solid var(--category-border);
}

.btn-submit-order {
    width: calc(100% - 40px);
    margin: 10px 20px 20px;
    padding: 18px;
    background: linear-gradient(135deg, #4caf50, #2e7d32);
    border: none;
    border-radius: 12px;
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 1px;
}

/* ===== УСПЕШНЫЙ ЗАКАЗ ===== */
.success-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 999999999;
    justify-content: center;
    align-items: center;
}

.success-modal.active {
    display: flex;
}

.success-content {
    background: var(--card-bg);
    padding: 40px;
    border-radius: 20px;
    text-align: center;
    max-width: 350px;
}

.success-icon {
    font-size: 60px;
    margin-bottom: 20px;
}

.success-content h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 10px;
}

.success-content p {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    color: var(--text-color);
    opacity: 0.8;
    margin-bottom: 10px;
}

.order-number {
    font-weight: 600;
    opacity: 1;
}

.btn-success-close {
    margin-top: 20px;
    padding: 15px 40px;
    background: linear-gradient(135deg, #ffffff, #888888);
    border: none;
    border-radius: 12px;
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

/* ===== КНОПКА В КОРЗИНУ ===== */
.btn-add-to-cart {
    display: none !important;
}

.btn-add-to-cart:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(233, 30, 99, 0.5);
}

.btn-add-to-cart:active {
    transform: scale(0.95);
}

/* Переключатель темы */
.theme-toggle-wrapper {
    width: 70px;
}

.theme-toggle-checkbox {
    display: none;
}

.theme-toggle-label {
    display: block;
    width: 70px;
    height: 35px;
    border-radius: 18px;
    position: relative;
    cursor: pointer;
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #7e22ce 100%);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

body.light-theme .theme-toggle-label {
    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #ffc3a0 100%);
}

.theme-toggle-button {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 29px;
    height: 29px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
}

.theme-toggle-checkbox:checked + .theme-toggle-label .theme-toggle-button {
    transform: translateX(35px);
}

.theme-toggle-label::before {
    content: '🌙';
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
}

.theme-toggle-label::after {
    content: '☀️';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
}

/* ===== КАТЕГОРИИ ===== */

/* Секция категорий — общий фон от шапки */
.categories-section {
    background: var(--bg-color) !important;
    border-bottom: none;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.categories-section .section-header {
    background: var(--bg-color) !important;
}

.categories-scroll {
    background: var(--bg-color) !important;
    padding: 10px 0 20px 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

/* Уменьшенная шапка категорий для Telegram */
body.tg-webapp .categories-scroll {
    padding: 3px 0 8px 0;
}

.categories-scroll::-webkit-scrollbar {
    display: none;
}

.categories {
    display: flex;
    gap: 12px;
    padding: 0 20px;
    min-width: min-content;
}

/* Уменьшенные категории для Telegram */
body.tg-webapp .categories {
    gap: 6px;
    padding: 0 12px;
}

.category-btn {
    background: var(--category-bg);
    border: 1px solid var(--category-border);
    border-radius: 12px;
    padding: 12px 20px;
    color: var(--category-text, var(--text-color));
    font-family: var(--tg-category-font, 'Montserrat', sans-serif);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    transform: translateY(0);
}

/* Уменьшенные кнопки категорий для Telegram */
body.tg-webapp .category-btn {
    padding: 6px 12px;
    font-size: var(--tg-category-font-size, 11px);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.category-btn:hover {
    background: var(--category-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}

.category-btn.active {
    background: var(--category-active-bg);
    color: var(--category-active-text);
    font-weight: 600;
}

/* === СТИЛИ КАТЕГОРИЙ === */

/* Minimal - чистый минимализм */
.cat-style-minimal .category-btn {
    background: transparent !important;
    border: none !important;
    color: rgba(255,255,255,0.5);
    font-weight: 400;
}
.cat-style-minimal .category-btn.active {
    background: transparent !important;
    color: #fff !important;
    font-weight: 700;
}

/* Gradient - градиентная подсветка */
.cat-style-gradient .category-btn {
    background: rgba(255,255,255,0.05) !important;
    border: none !important;
    color: rgba(255,255,255,0.7);
}
.cat-style-gradient .category-btn.active {
    background: linear-gradient(135deg, var(--category-neon-color, #e91e63), var(--cat-neon-glow-70, rgba(233,30,99,0.7))) !important;
    color: #fff !important;
    font-weight: 600;
    box-shadow: 0 4px 20px var(--cat-neon-glow-50, rgba(233,30,99,0.5));
    transform: translateY(-2px);
}

/* Neon - неоновое свечение */
.cat-style-neon .category-btn {
    background: transparent !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    color: rgba(255,255,255,0.5);
}
.cat-style-neon .category-btn.active {
    background: transparent !important;
    border-color: var(--category-neon-color, #e91e63) !important;
    color: var(--category-neon-color, #e91e63) !important;
    box-shadow: 0 0 20px var(--cat-neon-glow-50, rgba(233, 30, 99, 0.5)), 
                inset 0 0 20px var(--cat-neon-glow-15, rgba(233, 30, 99, 0.15));
    text-shadow: 0 0 10px currentColor;
}

/* Chips - Material Design */
.cat-style-chips .category-btn {
    background: rgba(255,255,255,0.08) !important;
    border: none !important;
    border-radius: 8px !important;
    color: rgba(255,255,255,0.8);
}
.cat-style-chips .category-btn.active {
    background: var(--category-neon-color, #e91e63) !important;
    color: #fff !important;
    font-weight: 600;
    box-shadow: 0 4px 15px var(--cat-neon-glow-50, rgba(233,30,99,0.5));
}

/* Underline - элегантная линия */
.cat-style-underline .category-btn {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    color: rgba(255,255,255,0.5);
    padding-bottom: 10px !important;
    border-bottom: 2px solid transparent !important;
    box-shadow: none !important;
}
.cat-style-underline .category-btn.active {
    background: transparent !important;
    color: var(--category-neon-color, #e91e63) !important;
    border-bottom-color: var(--category-neon-color, #e91e63) !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Bubble - мягкие пузырьки */
.cat-style-bubble .category-btn {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 25px !important;
    color: rgba(255,255,255,0.6);
}
.cat-style-bubble .category-btn.active {
    background: var(--cat-neon-glow-15, rgba(233,30,99,0.15)) !important;
    border-color: var(--category-neon-color, #e91e63) !important;
    color: var(--category-neon-color, #e91e63) !important;
    box-shadow: 0 0 20px var(--cat-neon-glow-40, rgba(233,30,99,0.4));
}

/* Tags - хештеги */
.cat-style-tag .category-btn {
    background: transparent !important;
    border: none !important;
    color: rgba(255,255,255,0.4);
    font-size: 13px !important;
}
.cat-style-tag .category-btn::before {
    content: '#';
}
.cat-style-tag .category-btn.active {
    background: transparent !important;
    color: #00bcd4 !important;
    font-weight: 600;
}

/* iOS - Apple стиль */
.cat-style-ios .categories-scroll {
    background: rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 4px;
}
.cat-style-ios .category-btn {
    background: transparent !important;
    border: none !important;
    border-radius: 10px !important;
    color: rgba(255,255,255,0.7);
}
.cat-style-ios .category-btn.active {
    background: #fff !important;
    color: #000 !important;
    font-weight: 600;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}

/* Circle - круглые кнопки как сторис */
.cat-style-circle .categories-section .section-header,
.cat-style-circle-neon .categories-section .section-header,
.cat-style-circle-gold .categories-section .section-header,
.cat-style-circle-rainbow .categories-section .section-header,
.cat-style-circle-glow .categories-section .section-header,
.cat-style-circle-minimal .categories-section .section-header {
    display: none !important;
}
/* Стили для categories-scroll когда класс на нем самом */
.categories-scroll.cat-style-circle,
.categories-scroll.cat-style-circle-neon,
.categories-scroll.cat-style-circle-gold,
.categories-scroll.cat-style-circle-rainbow,
.categories-scroll.cat-style-circle-glow,
.categories-scroll.cat-style-circle-minimal,
body.cat-style-circle .categories-scroll,
body.cat-style-circle-neon .categories-scroll,
body.cat-style-circle-gold .categories-scroll,
body.cat-style-circle-rainbow .categories-scroll,
body.cat-style-circle-glow .categories-scroll,
body.cat-style-circle-minimal .categories-scroll {
    padding: 15px 12px !important;
    gap: 15px !important;
}
.cat-style-circle .category-btn,
.cat-style-circle-neon .category-btn,
.cat-style-circle-gold .category-btn,
.cat-style-circle-rainbow .category-btn,
.cat-style-circle-glow .category-btn,
.cat-style-circle-minimal .category-btn,
.categories-scroll.cat-style-circle .category-btn,
.categories-scroll.cat-style-circle-neon .category-btn,
.categories-scroll.cat-style-circle-gold .category-btn,
.categories-scroll.cat-style-circle-rainbow .category-btn,
.categories-scroll.cat-style-circle-glow .category-btn,
.categories-scroll.cat-style-circle-minimal .category-btn,
body.cat-style-circle .category-btn,
body.cat-style-circle-neon .category-btn,
body.cat-style-circle-gold .category-btn,
body.cat-style-circle-rainbow .category-btn,
body.cat-style-circle-glow .category-btn,
body.cat-style-circle-minimal .category-btn {
    width: 70px !important;
    height: auto !important;
    min-width: 70px !important;
    border-radius: 0 !important;
    padding: 0 !important;
    font-size: 9px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible !important;
    position: relative !important;
    transition: all 0.3s ease !important;
    margin-top: 15px !important;
}
/* Сброс стилей для active - эффекты должны быть на .category-icon, не на .category-btn */
.cat-style-circle .category-btn.active,
.cat-style-circle-neon .category-btn.active,
.cat-style-circle-gold .category-btn.active,
.cat-style-circle-rainbow .category-btn.active,
.cat-style-circle-glow .category-btn.active,
.cat-style-circle-minimal .category-btn.active,
.categories-scroll.cat-style-circle .category-btn.active,
.categories-scroll.cat-style-circle-neon .category-btn.active,
.categories-scroll.cat-style-circle-gold .category-btn.active,
.categories-scroll.cat-style-circle-rainbow .category-btn.active,
.categories-scroll.cat-style-circle-glow .category-btn.active,
.categories-scroll.cat-style-circle-minimal .category-btn.active,
body.cat-style-circle .category-btn.active,
body.cat-style-circle-neon .category-btn.active,
body.cat-style-circle-gold .category-btn.active,
body.cat-style-circle-rainbow .category-btn.active,
body.cat-style-circle-glow .category-btn.active,
body.cat-style-circle-minimal .category-btn.active {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}
/* Отключаем ::before на кнопке для circle стилей */
.cat-style-circle .category-btn.active::before,
.cat-style-circle-neon .category-btn.active::before,
.cat-style-circle-gold .category-btn.active::before,
.cat-style-circle-rainbow .category-btn.active::before,
.cat-style-circle-glow .category-btn.active::before,
.cat-style-circle-minimal .category-btn.active::before,
body.cat-style-circle .category-btn.active::before,
body.cat-style-circle-neon .category-btn.active::before,
body.cat-style-circle-gold .category-btn.active::before,
body.cat-style-circle-rainbow .category-btn.active::before,
body.cat-style-circle-glow .category-btn.active::before,
body.cat-style-circle-minimal .category-btn.active::before {
    display: none !important;
}
/* Иконка внутри кружка */
.cat-style-circle .category-btn .category-icon,
.cat-style-circle-neon .category-btn .category-icon,
.cat-style-circle-gold .category-btn .category-icon,
.cat-style-circle-rainbow .category-btn .category-icon,
.cat-style-circle-glow .category-btn .category-icon,
.cat-style-circle-minimal .category-btn .category-icon,
.categories-scroll.cat-style-circle .category-btn .category-icon,
.categories-scroll.cat-style-circle-neon .category-btn .category-icon,
.categories-scroll.cat-style-circle-gold .category-btn .category-icon,
.categories-scroll.cat-style-circle-rainbow .category-btn .category-icon,
.categories-scroll.cat-style-circle-glow .category-btn .category-icon,
.categories-scroll.cat-style-circle-minimal .category-btn .category-icon,
body.cat-style-circle .category-btn .category-icon,
body.cat-style-circle-neon .category-btn .category-icon,
body.cat-style-circle-gold .category-btn .category-icon,
body.cat-style-circle-rainbow .category-btn .category-icon,
body.cat-style-circle-glow .category-btn .category-icon,
body.cat-style-circle-minimal .category-btn .category-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px !important;
    background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
    background-size: cover;
    background-position: center;
    border: 3px solid rgba(255,255,255,0.15);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}
/* Текст под кружком */
.cat-style-circle .category-btn .category-text,
.cat-style-circle-neon .category-btn .category-text,
.cat-style-circle-gold .category-btn .category-text,
.cat-style-circle-rainbow .category-btn .category-text,
.cat-style-circle-glow .category-btn .category-text,
.cat-style-circle-minimal .category-btn .category-text,
.categories-scroll.cat-style-circle .category-btn .category-text,
.categories-scroll.cat-style-circle-neon .category-btn .category-text,
.categories-scroll.cat-style-circle-gold .category-btn .category-text,
.categories-scroll.cat-style-circle-rainbow .category-btn .category-text,
.categories-scroll.cat-style-circle-glow .category-btn .category-text,
.categories-scroll.cat-style-circle-minimal .category-btn .category-text,
body.cat-style-circle .category-btn .category-text,
body.cat-style-circle-neon .category-btn .category-text,
body.cat-style-circle-gold .category-btn .category-text,
body.cat-style-circle-rainbow .category-btn .category-text,
body.cat-style-circle-glow .category-btn .category-text,
body.cat-style-circle-minimal .category-btn .category-text {
    font-size: 11px !important;
    margin-top: 8px;
    max-width: 75px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff;
    text-align: center;
}
/* Circle активная - используем переменную цвета */
.cat-style-circle .category-btn.active .category-icon,
.categories-scroll.cat-style-circle .category-btn.active .category-icon,
body.cat-style-circle .category-btn.active .category-icon {
    border: 3px solid var(--category-active-bg, var(--category-neon-color, #ffffff)) !important;
    border-radius: 50% !important;
    box-shadow: 
        0 0 15px var(--cat-neon-glow-70, rgba(74, 222, 128, 0.7)),
        0 0 30px var(--cat-neon-glow-40, rgba(74, 222, 128, 0.4)),
        inset 0 0 15px var(--cat-neon-glow-15, rgba(74, 222, 128, 0.15));
    transform: scale(1.08);
}
.cat-style-circle .category-btn.active .category-text,
body.cat-style-circle .category-btn.active .category-text {
    text-shadow: 0 0 10px var(--cat-neon-glow-70, rgba(74, 222, 128, 0.7));
    color: var(--category-active-text, var(--category-neon-color, #ffffff));
}
/* Отключаем ::before для circle - используем border */
.cat-style-circle .category-btn.active .category-icon::before,
body.cat-style-circle .category-btn.active .category-icon::before {
    display: none !important;
}

/* Circle Neon - неоновое свечение (для обратной совместимости) */
.cat-style-circle-neon .category-btn .category-icon,
body.cat-style-circle-neon .category-btn .category-icon {
    border: 3px solid rgba(0,255,136,0.3);
    background: rgba(0,20,10,0.5);
}
.cat-style-circle-neon .category-btn.active .category-icon,
body.cat-style-circle-neon .category-btn.active .category-icon {
    border: 3px solid #00ff88 !important;
    border-radius: 50% !important;
    box-shadow: 
        0 0 15px rgba(0,255,136,0.8),
        0 0 30px rgba(0,255,136,0.5),
        0 0 45px rgba(0,255,136,0.3),
        inset 0 0 20px rgba(0,255,136,0.15);
    transform: scale(1.08);
}
.cat-style-circle-neon .category-btn.active .category-text,
body.cat-style-circle-neon .category-btn.active .category-text {
    text-shadow: 0 0 10px rgba(0,255,136,0.8);
    color: #00ff88;
}
/* Отключаем ::before для neon - используем только border */
.cat-style-circle-neon .category-btn.active .category-icon::before,
body.cat-style-circle-neon .category-btn.active .category-icon::before {
    display: none !important;
}

/* Circle Gold - золотой */
.cat-style-circle-gold .category-btn .category-icon,
body.cat-style-circle-gold .category-btn .category-icon {
    border-color: rgba(255,215,0,0.3);
}
.cat-style-circle-gold .category-btn.active .category-icon,
body.cat-style-circle-gold .category-btn.active .category-icon {
    border: 3px solid transparent;
    box-shadow: 0 0 25px rgba(255,215,0,0.5), 0 4px 15px rgba(0,0,0,0.3);
    transform: scale(1.05);
}
.cat-style-circle-gold .category-btn.active .category-icon::before,
body.cat-style-circle-gold .category-btn.active .category-icon::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    padding: 3px;
    background: linear-gradient(135deg, #ffd700, #ffb347, #ffd700);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: 0;
}
.cat-style-circle-gold .category-btn.active .category-text,
body.cat-style-circle-gold .category-btn.active .category-text {
    color: #ffd700;
}

/* Circle Rainbow - радуга */
.cat-style-circle-rainbow .category-btn.active .category-icon,
body.cat-style-circle-rainbow .category-btn.active .category-icon {
    border: 3px solid transparent;
    box-shadow: 0 0 20px rgba(255,0,128,0.4), 0 4px 15px rgba(0,0,0,0.3);
    transform: scale(1.05);
}
.cat-style-circle-rainbow .category-btn.active .category-icon::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    padding: 3px;
    background: conic-gradient(#ff0000, #ff8000, #ffff00, #00ff00, #00ffff, #0080ff, #8000ff, #ff0080, #ff0000);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: 0;
    animation: rainbow-spin 3s linear infinite;
}
@keyframes rainbow-spin {
    to { transform: rotate(360deg); }
}

/* Circle Glow - свечение */
.cat-style-circle-glow .category-btn.active .category-icon {
    border-color: rgba(255,255,255,0.5);
    background: radial-gradient(circle at center, rgba(255,255,255,0.3), rgba(255,255,255,0.05));
    box-shadow: 0 0 40px rgba(255,255,255,0.6), 0 0 80px rgba(255,255,255,0.3);
    transform: scale(1.05);
}
.cat-style-circle-glow .category-btn.active .category-text {
    color: #ff6b9d;
}

/* Circle Minimal - минималистичный */
.cat-style-circle-minimal .category-btn .category-icon {
    border: 2px solid rgba(255,255,255,0.15);
    background: transparent;
    box-shadow: none;
}
.cat-style-circle-minimal .category-btn.active .category-icon {
    border-color: #fff;
    transform: scale(1.05);
}

/* С картинкой - для всех Circle - картинка на .category-icon */
.cat-style-circle .category-btn[data-image] .category-icon,
.cat-style-circle-neon .category-btn[data-image] .category-icon,
.cat-style-circle-gold .category-btn[data-image] .category-icon,
.cat-style-circle-rainbow .category-btn[data-image] .category-icon,
.cat-style-circle-glow .category-btn[data-image] .category-icon,
.cat-style-circle-minimal .category-btn[data-image] .category-icon {
    font-size: 0 !important;
    background-size: cover !important;
    background-position: center !important;
}

/* Скрытие заголовка "КАТЕГОРИИ" */
.hide-category-title .categories-section .section-header,
.hide-category-title .categories-section .section-title,
.hide-category-title .categories-section .categories-header,
.hide-category-title #categoriesSectionTitle,
.hide-category-title .categories-section h2,
body.hide-category-title .categories-section > .section-header,
body.hide-category-title .categories-section > header,
body.hide-category-title .categories-header {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
}

/* Скрытие текста под категориями (для Circle стилей) */
body.hide-category-text .category-btn .category-text {
    display: none !important;
}
body.hide-category-text .category-btn {
    margin-top: 5px !important;
}

/* Также скрываем для всех Circle стилей автоматически (опционально) */
.cat-style-circle .categories-section .categories-header,
.cat-style-circle-neon .categories-section .categories-header,
.cat-style-circle-gold .categories-section .categories-header,
.cat-style-circle-rainbow .categories-section .categories-header,
.cat-style-circle-glow .categories-section .categories-header {
    /* Закомментировано - включается отдельным чекбоксом */
}

/* === ВАРИАНТЫ СТИЛЕЙ CIRCLE === */

/* Circle Gradient - градиентная рамка */
.cat-style-circle-gradient .category-btn.active::before {
    background: linear-gradient(135deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3) !important;
}

/* Circle Neon - неоновое свечение */
.cat-style-circle-neon .category-btn {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.cat-style-circle-neon .category-btn.active {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.cat-style-circle-neon .category-btn.active::before {
    display: none !important;
}

/* Circle Gold - золотой */
.cat-style-circle-gold .category-btn {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.cat-style-circle-gold .category-btn.active {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.cat-style-circle-gold .category-btn.active::before {
    display: none !important;
}

/* Circle Rainbow - радуга */
.cat-style-circle-rainbow .category-btn {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.cat-style-circle-rainbow .category-btn.active {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.cat-style-circle-rainbow .category-btn.active::before {
    display: none !important;
}
@keyframes rainbow-spin {
    to { transform: rotate(360deg); }
}

/* Circle Minimal - минималистичный */
.cat-style-circle-minimal .category-btn {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.cat-style-circle-minimal .category-btn.active {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.cat-style-circle-minimal .category-btn.active::before {
    display: none !important;
}

/* Circle Glow - свечение */
.cat-style-circle-glow .category-btn {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.cat-style-circle-glow .category-btn.active {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.cat-style-circle-glow .category-btn.active::before {
    display: none !important;
}

/* Pill - капсулы */
.cat-style-pill .category-btn {
    border-radius: 50px !important;
    padding: 10px 20px !important;
    background: rgba(255,255,255,0.08) !important;
    border: none !important;
}
.cat-style-pill .category-btn.active {
    background: var(--category-active-bg, #fff) !important;
    color: var(--category-active-text, #000) !important;
}

/* Outline - только рамка */
.cat-style-outline .category-btn {
    background: transparent !important;
    border: 2px solid rgba(255,255,255,0.2) !important;
    border-radius: 20px !important;
}
.cat-style-outline .category-btn.active {
    background: transparent !important;
    border-color: var(--category-active-bg, #fff) !important;
    color: var(--category-active-bg, #fff) !important;
}

/* ===== КАТАЛОГ ===== */
.catalog-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    max-width: 600px;
    margin: 0 auto;
    padding: 15px 12px 50px;
    background: var(--bg-color);
    /* Фикс наслоения при скролле */
    position: relative;
    z-index: 1;
    isolation: isolate;
}

/* === СТИЛИ КАРТОЧЕК ТОВАРОВ === */

/* Default - стандартный */
/* ===== СТИЛИ КАРТОЧЕК ТОВАРОВ ===== */

/* Classic - классический (по умолчанию) */
.card-style-classic .product-card {
    border-radius: 12px;
    background: var(--card-bg, #15151f);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    overflow: hidden;
}

/* Rounded - сильно скруглённые */
.card-style-rounded .product-card {
    border-radius: 24px;
    background: var(--card-bg, #15151f);
    overflow: hidden;
}
.card-style-rounded .product-card .card-image-container,
.card-style-rounded .product-card .product-image-container {
    border-radius: 20px 20px 0 0;
}

/* Sharp - острые углы */
.card-style-sharp .product-card {
    border-radius: 4px;
    background: var(--card-bg, #15151f);
}
.card-style-sharp .product-card .card-image-container,
.card-style-sharp .product-card .product-image-container {
    border-radius: 2px 2px 0 0;
}

/* Glass - стеклянный эффект */
.card-style-glass .product-card {
    border-radius: 16px;
    background: rgba(255,255,255,0.08) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.15) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}
.card-style-glass .product-card .card-info {
    background: transparent;
}

/* Neon - неоновое свечение */
.card-style-neon .product-card {
    border-radius: 12px;
    background: var(--card-bg, #15151f);
    border: 2px solid var(--neon-color, #00ff88) !important;
    box-shadow: 
        0 0 15px var(--neon-glow-40, rgba(0, 255, 136, 0.4)),
        0 0 30px var(--neon-glow-20, rgba(0, 255, 136, 0.2)),
        inset 0 0 20px var(--neon-glow-10, rgba(0, 255, 136, 0.1));
    transition: all 0.3s ease;
}
.card-style-neon .product-card:hover {
    box-shadow: 
        0 0 25px var(--neon-glow-60, rgba(0, 255, 136, 0.6)),
        0 0 50px var(--neon-glow-30, rgba(0, 255, 136, 0.3)),
        inset 0 0 30px var(--neon-glow-15, rgba(0, 255, 136, 0.15));
}

/* Gradient Border - градиентная рамка */
.card-style-gradient-border .product-card {
    border-radius: 16px;
    background: var(--card-bg, #15151f);
    position: relative;
    overflow: visible;
}
.card-style-gradient-border .product-card::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 18px;
    background: linear-gradient(135deg, #ffffff, #666666, #673ab7, #ffffff);
    background-size: 300% 300%;
    animation: gradient-move 4s ease infinite;
    z-index: -1;
}
@keyframes gradient-move {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}
.card-style-gradient-border .product-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background: var(--card-bg, #15151f);
    z-index: -1;
}

/* Minimal - минималистичный */
.card-style-minimal .product-card {
    border-radius: 12px;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}
.card-style-minimal .product-card .card-image-container,
.card-style-minimal .product-card .product-image-container {
    border-radius: 12px;
}
.card-style-minimal .product-card .card-info {
    background: var(--card-bg, #15151f);
    border-radius: 10px;
    padding: 12px;
    margin-top: 8px;
}

/* Shadow - глубокая тень */
.card-style-shadow .product-card {
    border-radius: 20px;
    background: var(--card-bg, #15151f);
    box-shadow: 
        0 10px 30px rgba(0,0,0,0.4),
        0 20px 50px rgba(0,0,0,0.2);
    transform: translateY(0);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.card-style-shadow .product-card:hover {
    transform: translateY(-8px);
    box-shadow: 
        0 15px 40px rgba(0,0,0,0.5),
        0 30px 70px rgba(0,0,0,0.3);
}

/* Outline - тонкая рамка */
.card-style-outline .product-card {
    border-radius: 12px;
    background: transparent !important;
    border: 2px solid rgba(255,255,255,0.2) !important;
    box-shadow: none;
    transition: all 0.3s ease;
}
.card-style-outline .product-card:hover {
    border-color: var(--primary-color, #ffffff) !important;
    background: rgba(255,255,255,0.03) !important;
}
.card-style-outline .product-card .card-info {
    background: transparent;
}

/* Polaroid - как фото Polaroid */
.card-style-polaroid .product-card {
    border-radius: 4px;
    background: #ffffff !important;
    padding: 8px 8px 0 8px;
    box-shadow: 
        0 4px 15px rgba(0,0,0,0.2),
        0 8px 30px rgba(0,0,0,0.1);
    transform: rotate(-1deg);
    transition: all 0.3s ease;
}
.card-style-polaroid .product-card:nth-child(even) {
    transform: rotate(1deg);
}
.card-style-polaroid .product-card:hover {
    transform: rotate(0deg) scale(1.02);
}
.card-style-polaroid .product-card .card-image-container,
.card-style-polaroid .product-card .product-image-container {
    border-radius: 0;
}
.card-style-polaroid .product-card .card-info {
    background: #ffffff;
    padding: 12px 8px 15px 8px;
}
.card-style-polaroid .product-card .card-title,
.card-style-polaroid .product-card .product-name {
    color: #333 !important;
}
.card-style-polaroid .product-card .card-price,
.card-style-polaroid .product-card .product-price {
    color: #ffffff !important;
}
.card-style-polaroid .product-card .add-to-cart-btn {
    background: #333 !important;
}

/* Светлая тема для карточек */
body.light-theme .card-style-neon .product-card {
    border-color: rgba(233, 30, 99, 0.4) !important;
    box-shadow: 
        0 0 15px rgba(233, 30, 99, 0.2),
        0 0 30px rgba(233, 30, 99, 0.1);
}
body.light-theme .card-style-neon .product-card .card-price,
body.light-theme .card-style-neon .product-card .product-price {
    color: #ffffff !important;
    text-shadow: none;
}
body.light-theme .card-style-outline .product-card {
    border-color: rgba(0,0,0,0.15) !important;
}
body.light-theme .card-style-outline .product-card:hover {
    background: rgba(0,0,0,0.02) !important;
}
body.light-theme .card-style-glass .product-card {
    background: rgba(255,255,255,0.7) !important;
    border-color: rgba(0,0,0,0.1) !important;
}

/* ===== ТАЙМЕР АКЦИЙ НА КАРТОЧКАХ ===== */
.product-timer {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 10;
    font-family: 'Roboto Mono', 'Montserrat', monospace;
}

/* Classic */
.timer-style-classic .product-timer {
    background: rgba(0,0,0,0.7);
    color: var(--timer-color, #ff4757);
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    backdrop-filter: blur(5px);
}

/* Boxes */
.timer-style-boxes .product-timer {
    display: flex;
    gap: 4px;
}
.timer-style-boxes .product-timer .timer-block {
    background: var(--timer-color, #ff4757);
    color: #fff;
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
}

/* Neon */
.timer-style-neon .product-timer {
    background: rgba(0,0,0,0.8);
    color: var(--timer-color, #ff4757);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    text-shadow: 0 0 10px var(--timer-color, #ff4757), 0 0 20px var(--timer-color, #ff4757);
    border: 1px solid var(--timer-color, #ff4757);
    box-shadow: 0 0 15px var(--timer-glow, rgba(255,71,87,0.4));
}

/* Gradient */
.timer-style-gradient .product-timer {
    background: linear-gradient(90deg, var(--timer-color, #ff4757), #ff6b81);
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
}

/* Minimal */
.timer-style-minimal .product-timer {
    background: transparent;
    color: rgba(255,255,255,0.9);
    font-size: 12px;
    padding: 4px 8px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

/* Fire */
.timer-style-fire .product-timer {
    background: linear-gradient(135deg, #ff4757, #ff6b35);
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
}
.timer-style-fire .product-timer::before {
    content: '🔥 ';
}

/* Pill */
.timer-style-pill .product-timer {
    background: var(--timer-color, #ff4757);
    color: #fff;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

/* Badge */
.timer-style-badge .product-timer {
    background: linear-gradient(135deg, var(--timer-color, #ff4757), #ff6b81);
    color: #fff;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    box-shadow: 0 4px 15px var(--timer-glow, rgba(255,71,87,0.4));
}
.timer-style-badge .product-timer::before {
    content: '⏰ ';
}

/* Flip */
.timer-style-flip .product-timer {
    display: flex;
    gap: 3px;
}
.timer-style-flip .product-timer .timer-block {
    background: linear-gradient(180deg, #2d2d2d 0%, #1a1a1a 50%, #2d2d2d 50%, #1a1a1a 100%);
    color: var(--timer-color, #ff4757);
    padding: 5px 7px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid rgba(255,255,255,0.1);
}

/* Urgent */
.timer-style-urgent .product-timer {
    background: var(--timer-color, #ff4757);
    color: #fff;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    animation: pulse-timer 1s ease-in-out infinite;
}
.timer-style-urgent .product-timer::before {
    content: '⚡ ';
}

@keyframes pulse-timer {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.85; transform: scale(1.02); }
}

/* Timer text (если есть) */
.timer-promo-text {
    font-size: 10px;
    margin-top: 3px;
    opacity: 0.9;
}

/* ===== ФУТЕР ===== */
.shop-footer {
    background: var(--footer-bg, var(--bg-color));
    color: var(--footer-text-color, rgba(255,255,255,0.7));
    border-top: 1px solid var(--footer-border-color, rgba(255,255,255,0.06));
    padding: 40px 20px 30px;
    margin-top: 30px;
    font-family: var(--tg-footer-font, 'Montserrat', sans-serif);
    /* Скрываем до загрузки контента */
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Показываем после загрузки */
body.loaded .shop-footer {
    opacity: 1;
}

.shop-footer a {
    color: var(--footer-link-color, var(--footer-text-color, rgba(255,255,255,0.5)));
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.shop-footer a:hover {
    opacity: 0.8;
}

/* Контакты - компактный блок */
.footer-contacts {
    text-align: center;
    margin-bottom: 25px;
    padding: 20px;
    background: rgba(0,0,0,0.15);
    border-radius: 16px;
    max-width: 350px;
    margin-left: auto;
    margin-right: auto;
    display: none; /* Скрыто по умолчанию, показывается через JS если есть данные */
}

.footer-address {
    font-size: 13px;
    margin-bottom: 10px;
    opacity: 0.9;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.footer-phone {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.footer-phone a {
    color: inherit;
}

.footer-hours {
    font-size: 13px;
    opacity: 0.7;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* Юридические ссылки - сетка 2x2 */
.footer-legal-links {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    max-width: 320px;
    margin: 0 auto 25px;
}

.footer-legal-links a {
    font-size: 12px;
    opacity: 0.6;
    text-align: center;
    padding: 8px 12px;
    background: rgba(0,0,0,0.1);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.footer-legal-links a:hover {
    opacity: 1;
    background: rgba(0,0,0,0.2);
}

/* Реквизиты - мелкий текст */
.footer-requisites {
    text-align: center;
    font-size: 10px;
    margin-bottom: 20px;
    line-height: 1.5;
    opacity: 0.4;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
}

/* Платёжные системы */
.footer-payments {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 25px;
    padding: 15px 25px;
    background: rgba(255,255,255,0.05);
    border-radius: 12px;
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
}

.footer-payments .payment-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.footer-payments svg {
    height: 24px;
    width: auto;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.footer-payments svg:hover {
    opacity: 1;
}

.footer-payments img {
    height: 28px;
    width: auto;
    object-fit: contain;
    opacity: 0.85;
    filter: grayscale(20%);
    transition: all 0.3s ease;
}

.footer-payments img:hover {
    opacity: 1;
    filter: grayscale(0%);
}

/* Платформа NEOKODEGROUP */
.platform-footer {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid var(--footer-border-color, rgba(255,255,255,0.04));
}

.platform-label {
    font-size: 9px;
    margin-bottom: 4px;
    opacity: 0.3;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.platform-name {
    color: rgba(212,168,83,0.6);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
    margin-bottom: 8px;
}

.platform-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    margin-top: 6px;
    opacity: 0.5;
}

.platform-link svg {
    width: 12px;
    height: 12px;
}

.product-card {
    background: var(--card-bg);
    border-radius: var(--border-radius, 12px);
    overflow: hidden;
    box-shadow: 0 6px 20px var(--shadow-color);
    cursor: pointer;
    border: 1px solid var(--card-border);
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 
        0 12px 30px var(--shadow-color),
        0 8px 20px rgba(0, 0, 0, 0.1);
}

/* Отключаем hover эффекты в Telegram */
body.tg-webapp .product-card:hover {
    transform: none;
    box-shadow: 0 4px 15px var(--shadow-color);
}

/* Уменьшаем карточки товаров в Telegram */
body.tg-webapp .catalog-grid {
    gap: 8px;
    padding: 0 10px;
}

body.tg-webapp .product-card {
    border-radius: 12px;
}

.card-image-container {
    position: relative;
    width: 100%;
    aspect-ratio: 3/4;
    overflow: hidden;
}

.card-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.badge {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    z-index: 2;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.badge-hit {
    background: linear-gradient(135deg, #f5af19, #f12711);
    color: white;
}

.badge-new {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
}

.badge-sale {
    background: linear-gradient(135deg, #ff416c, #ff4b2b);
    color: white;
}

.badge-premium {
    background: linear-gradient(135deg, #1a1a1a, #434343);
    color: #ffd700;
    border: 1px solid #ffd700;
}

.badge-exclusive {
    background: linear-gradient(135deg, #4a0080, #7b1fa2);
    color: #ffd700;
    border: 1px solid #ffd700;
}

.badge-fresh {
    background: linear-gradient(135deg, #11998e, #38ef7d);
    color: white;
}

.badge-bestseller {
    background: linear-gradient(135deg, #2193b0, #6dd5ed);
    color: white;
}

.badge-gift {
    background: linear-gradient(135deg, #c62828, #e53935);
    color: white;
}

.badge-love {
    background: linear-gradient(135deg, #ec407a, #f48fb1);
    color: white;
}

.badge-newyear {
    background: linear-gradient(135deg, #1b5e20, #c62828);
    color: white;
}

.favorite-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    z-index: 2;
    backdrop-filter: blur(10px);
    transition: all 0.2s ease;
}

.favorite-btn:active {
    transform: scale(0.9);
}

body.light-theme .favorite-btn {
    background: rgba(255, 255, 255, 0.8);
}

.favorite-btn.active {
    background: rgba(255, 65, 108, 0.9);
}

.product-info {
    padding: 12px;
    background: var(--card-bg);
}

.product-title {
    font-family: var(--tg-product-title-font, 'Montserrat', sans-serif);
    font-size: var(--tg-product-title-size, 15px);
    font-weight: 600;
    color: var(--card-title-color, var(--text-color));
    margin-bottom: 6px;
    letter-spacing: 0.3px;
    line-height: 1.3;
}

.product-price {
    font-family: var(--tg-product-price-font, 'Montserrat', sans-serif);
    font-size: var(--tg-product-price-size, 16px);
    font-weight: 700;
    color: var(--card-price-color, var(--primary-color));
}

/* Кнопка В корзину на карточке товара */
/* Кнопка В корзину - минималистичный стиль */
.add-to-cart-btn {
    width: 100%;
    padding: 12px 15px;
    margin-top: 12px;
    background: transparent;
    color: var(--tg-add-to-cart-color, var(--text-color));
    border: 1.5px solid var(--tg-add-to-cart-color, rgba(255, 255, 255, 0.2));
    border-radius: 12px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.25s ease;
    backdrop-filter: blur(5px);
}

.add-to-cart-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--tg-add-to-cart-color, rgba(255, 255, 255, 0.4));
}

.add-to-cart-btn:active {
    transform: scale(0.97);
    background: rgba(255, 255, 255, 0.15);
}

/* Светлая тема */
body.light-theme .add-to-cart-btn {
    border-color: var(--tg-add-to-cart-color, rgba(0, 0, 0, 0.15));
    color: var(--tg-add-to-cart-color, var(--text-color));
}

body.light-theme .add-to-cart-btn:hover {
    background: rgba(0, 0, 0, 0.05);
    border-color: var(--tg-add-to-cart-color, rgba(0, 0, 0, 0.3));
}

/* ===== ЛАЙТБОКС ===== */
.lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.lightbox.active {
    display: flex;
}

/* Скрываем ВСЕ кнопки lightbox по умолчанию */
.lightbox-close,
.lightbox-prev,
.lightbox-next {
    display: none !important;
}

/* Показываем кнопки ТОЛЬКО когда lightbox активен */
.lightbox.active .lightbox-close,
.lightbox.active .lightbox-prev,
.lightbox.active .lightbox-next {
    display: flex !important;
}

.lightbox img {
    max-width: 90%;
    max-height: 80%;
    object-fit: contain;
    border-radius: 12px;
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 28px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
}

.lightbox-prev,
.lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 32px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }

.lightbox-dots {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
}

.lightbox-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    cursor: pointer;
}

.lightbox-dot.active {
    background: white;
}

/* ===== СНЕГОВИК С ПРОМОКОДОМ ===== */
.promo-animation {
    position: fixed;
    left: 30px;
    bottom: -300px;
    z-index: 9999;
    display: flex;
    align-items: flex-end;
    gap: 20px;
    transition: bottom 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.promo-animation.show {
    bottom: 20px;
}

.promo-emoji {
    font-size: 100px;
    animation: snowmanJump 0.8s ease-in-out infinite;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.3));
}

@keyframes snowmanJump {
    0%, 100% { transform: translateY(0) rotate(-5deg); }
    50% { transform: translateY(-20px) rotate(5deg); }
}

.promo-box {
    background: linear-gradient(135deg, #e3f2fd 0%, #ffffff 50%, #e1f5fe 100%);
    padding: 20px 30px;
    border-radius: 25px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    border: 3px solid #4fc3f7;
}

.promo-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    color: #1565c0;
    line-height: 1.6;
    font-weight: 500;
}

.promo-text strong {
    color: #d32f2f;
    font-weight: 700;
    font-size: 22px;
}

/* ===== ДОПЫ (АПСЕЙЛ) ===== */
.upsell-popup {
    position: fixed;
    right: -400px;
    bottom: 80px;
    z-index: 9999;
    background: #ffffff;
    padding: 25px 30px;
    border-radius: 20px 0 0 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    transition: right 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    max-width: 300px;
}

body.light-theme .upsell-popup {
    background: #1a1a1a;
}

.upsell-popup.show {
    right: 0;
}

.upsell-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #000000;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 20px;
    text-align: center;
}

body.light-theme .upsell-title {
    color: #ffffff;
}

.upsell-items {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.upsell-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 18px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 15px;
    transition: all 0.3s ease;
}

body.light-theme .upsell-item {
    background: rgba(255, 255, 255, 0.1);
}

.upsell-item:hover {
    transform: translateX(-5px);
}

.upsell-item-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.upsell-item-emoji {
    font-size: 28px;
}

.upsell-item-name {
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #000000;
}

body.light-theme .upsell-item-name {
    color: #ffffff;
}

.upsell-item-price {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #000000;
}

body.light-theme .upsell-item-price {
    color: #ffffff;
}

.upsell-footer {
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.5);
    margin-top: 18px;
    padding-top: 15px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

body.light-theme .upsell-footer {
    color: rgba(255, 255, 255, 0.5);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Уменьшаем апсейл для смартфонов */
@media (max-width: 768px) {
    .upsell-popup {
        max-width: 240px;
        padding: 18px 20px;
        bottom: 70px;
    }
    
    .upsell-title {
        font-size: 12px;
        margin-bottom: 15px;
    }
    
    .upsell-item {
        padding: 12px 15px;
    }
    
    .upsell-item-emoji {
        font-size: 24px;
    }
    
    .upsell-item-name {
        font-size: 13px;
    }
    
    .upsell-item-price {
        font-size: 14px;
    }
}

/* Адаптив */
@media (max-width: 600px) {
    .splash-logo {
        font-size: 70px;
    }
    
    .splash-text {
        font-size: 18px;
    }
    
    .catalog-grid {
        gap: 15px;
        padding: 20px 15px 40px;
    }
    
    .product-title {
        font-size: var(--tg-product-title-size, 18px);
    }
    
    .product-price {
        font-size: var(--tg-product-price-size, 18px);
    }
}

/* ===== НИЖНЯЯ НАВИГАЦИЯ ===== */
.bottom-nav {
    position: fixed;
    bottom: calc(20px + var(--safe-area-bottom, 0px));
    left: calc(20px + var(--safe-area-left, 0px));
    right: calc(20px + var(--safe-area-right, 0px));
    height: 70px;
    z-index: 99997;
}

.nav-bg {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 70px;
    background: rgba(20, 20, 30, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 35px;
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.4);
}

.nav-items {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
}

.nav-item {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 2;
    width: 50px;
    height: 50px;
}

.nav-icon-wrap {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    background: transparent;
}

.nav-icon {
    width: 24px;
    height: 24px;
    color: rgba(255, 255, 255, 0.5);
    transition: all 0.3s ease;
}

.nav-label {
    display: none;
}

/* ========== СТИЛЬ 1: FLOAT (по умолчанию) - активная кнопка поднимается ========== */
.nav-style-float .nav-item.active {
    transform: translateY(-20px);
}

.nav-style-float .nav-item.active .nav-icon-wrap {
    width: 54px;
    height: 54px;
    background: var(--nav-active-color, #4ade80);
    box-shadow: 0 8px 25px color-mix(in srgb, var(--nav-active-color, #4ade80) 50%, transparent);
}

.nav-style-float .nav-item.active .nav-icon {
    color: #000;
    width: 26px;
    height: 26px;
}

/* ========== СТИЛЬ 2: GLOW - неоновое свечение ========== */
.nav-style-glow .nav-bg {
    background: rgba(10, 10, 20, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-style-glow .nav-item.active .nav-icon-wrap {
    background: transparent;
    box-shadow: 0 0 20px var(--nav-active-color, #4ade80), 0 0 40px var(--nav-active-color, #4ade80), 0 0 60px var(--nav-active-color, #4ade80);
}

.nav-style-glow .nav-item.active .nav-icon {
    color: var(--nav-active-color, #4ade80);
    filter: drop-shadow(0 0 10px var(--nav-active-color, #4ade80));
    width: 28px;
    height: 28px;
}

/* ========== СТИЛЬ 3: PILL - активный элемент в капсуле ========== */
.nav-style-pill .nav-bg {
    border-radius: 20px;
    height: 65px;
}

.nav-style-pill .nav-items {
    gap: 15px;
}

.nav-style-pill .nav-item {
    padding: 0 15px;
    width: auto;
}

.nav-style-pill .nav-item.active {
    background: var(--nav-active-color, #4ade80);
    border-radius: 30px;
    padding: 10px 25px;
}

.nav-style-pill .nav-item.active .nav-icon-wrap {
    background: transparent;
    width: auto;
    height: auto;
}

.nav-style-pill .nav-item.active .nav-icon {
    color: #000;
}

.nav-style-pill .nav-label {
    display: none;
}

.nav-style-pill .nav-item.active .nav-label {
    display: block;
    color: #000;
    font-size: 12px;
    font-weight: 600;
    margin-left: 8px;
}

/* ========== СТИЛЬ 4: GLASS - стеклянный эффект ========== */
.nav-style-glass .nav-bg {
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(30px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255,255,255,0.1);
}

.nav-style-glass .nav-item.active .nav-icon-wrap {
    background: var(--nav-active-color, #4ade80);
    box-shadow: 0 4px 15px color-mix(in srgb, var(--nav-active-color, #4ade80) 40%, transparent);
}

.nav-style-glass .nav-item.active .nav-icon {
    color: #000;
}

/* ========== СТИЛЬ 5: DOCK - как в macOS ========== */
.nav-style-dock .nav-bg {
    background: rgba(30, 30, 40, 0.9);
    border-radius: 18px;
    height: 60px;
    border: 1px solid rgba(255,255,255,0.1);
}

.nav-style-dock .nav-items {
    gap: 8px;
}

.nav-style-dock .nav-item {
    width: 44px;
    height: 44px;
    transition: all 0.2s ease;
}

.nav-style-dock .nav-item:hover {
    transform: translateY(-8px) scale(1.2);
}

.nav-style-dock .nav-item.active {
    transform: translateY(-8px) scale(1.2);
}

.nav-style-dock .nav-item.active .nav-icon-wrap {
    background: var(--nav-active-color, #4ade80);
    border-radius: 12px;
    width: 44px;
    height: 44px;
}

.nav-style-dock .nav-item.active .nav-icon {
    color: #000;
}

.nav-style-dock .nav-item.active::after {
    content: '';
    position: absolute;
    bottom: -8px;
    width: 4px;
    height: 4px;
    background: var(--nav-active-color, #4ade80);
    border-radius: 50%;
}

/* === MINIMAL STYLE === */
.nav-style-minimal .nav-bg {
    background: transparent !important;
    box-shadow: none !important;
}

.nav-style-minimal .nav-item.active .nav-icon-wrap {
    background: transparent !important;
    box-shadow: none !important;
}

.nav-style-minimal .nav-item.active .nav-icon {
    color: var(--nav-active-color, #4ade80);
}

.nav-style-minimal .nav-item.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 20px;
    height: 2px;
    background: var(--nav-active-color, #4ade80);
    border-radius: 2px;
}

/* === BUBBLE STYLE === */
.nav-style-bubble .nav-item.active .nav-icon-wrap {
    background: var(--nav-active-color, #4ade80) !important;
    border-radius: 50% !important;
    width: 50px !important;
    height: 50px !important;
    transform: scale(1.15);
    box-shadow: 0 0 20px var(--nav-active-color, #4ade80);
}

.nav-style-bubble .nav-item.active .nav-icon {
    color: #000;
}

/* === iOS STYLE === */
.nav-style-ios .nav-bg {
    background: rgba(255,255,255,0.1) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
}

.nav-style-ios .nav-item.active .nav-icon-wrap {
    background: transparent !important;
    box-shadow: none !important;
}

.nav-style-ios .nav-item.active .nav-icon {
    color: var(--nav-active-color, #007aff);
}

.nav-style-ios .nav-item .nav-label {
    display: block !important;
    font-size: 10px;
    margin-top: 4px;
}

/* Hover эффект общий */
.nav-item:not(.active):hover .nav-icon {
    color: rgba(255, 255, 255, 0.8);
}

/* Бейдж корзины */
.nav-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 18px;
    height: 18px;
    background: #f44336;
    color: white;
    font-size: 10px;
    font-weight: 700;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    opacity: 0;
    transform: scale(0);
    transition: all 0.3s ease;
}

.nav-badge.show {
    opacity: 1;
    transform: scale(1);
}

/* Отступ для контента снизу */
body {
    padding-bottom: 100px;
}

/* Светлая тема для навигации */
.light-theme .nav-bg {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 -5px 30px rgba(0, 0, 0, 0.1);
}

.light-theme .nav-icon {
    color: rgba(0, 0, 0, 0.4);
}

.light-theme .nav-label {
    color: rgba(0, 0, 0, 0.4);
}

.light-theme .nav-item:not(.active):hover .nav-icon {
    color: rgba(0, 0, 0, 0.7);
}

.light-theme .nav-item:not(.active):hover .nav-label {
    color: rgba(0, 0, 0, 0.7);
}

/* ===== МОДАЛЬНОЕ ОКНО ТОВАРА ===== */
.product-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999999;
    display: none;
    align-items: flex-end;
    justify-content: center;
}

.product-modal.show {
    display: flex;
}

.product-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
}

.product-modal-content {
    position: relative;
    width: 100%;
    max-width: 500px;
    max-height: 95vh;
    background: linear-gradient(180deg, #1a1a2e 0%, #0f0f1a 100%);
    border-radius: 24px 24px 0 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.product-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    z-index: 10;
    backdrop-filter: blur(10px);
}

/* Галерея */
.product-modal-gallery {
    position: relative;
    width: 100%;
    max-height: 60vh;
    overflow: hidden;
    background: #000;
}

.product-modal-images {
    display: flex;
    width: 100%;
    height: auto;
    transition: transform 0.3s ease;
}

.product-modal-images img {
    min-width: 100%;
    width: 100%;
    height: auto;
    max-height: 60vh;
    object-fit: contain;
    cursor: zoom-in;
}

.gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    backdrop-filter: blur(10px);
}

.gallery-prev { left: 10px; }
.gallery-next { right: 10px; }

.gallery-dots {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
}

.gallery-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: all 0.2s;
}

.gallery-dot.active {
    background: white;
    width: 24px;
    border-radius: 4px;
}

/* Информация */
.product-modal-info {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.product-modal-title {
    font-family: var(--tg-product-title-font, 'Montserrat', sans-serif) !important;
    font-size: var(--product-modal-title-size, 24px);
    font-weight: 600;
    margin-bottom: 8px;
}

.product-modal-price {
    font-family: var(--tg-product-price-font, 'Montserrat', sans-serif) !important;
    font-size: var(--product-modal-price-size, 28px);
    font-weight: 700;
    color: var(--card-price-color, #ffffff);
    margin-bottom: 12px;
}

.product-modal-desc {
    font-size: var(--product-modal-desc-size, 14px);
    opacity: 0.7;
    line-height: 1.5;
    margin-bottom: 20px;
}

/* Модификаторы в модальном */
.product-modal-modifiers {
    margin-bottom: 20px;
}

.modal-modifier-group {
    margin-bottom: 15px;
}

.modal-modifier-group-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px;
    opacity: 0.8;
}

.modal-modifier-items {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.modal-modifier-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.modal-modifier-item:hover {
    background: rgba(255, 255, 255, 0.1);
}

.modal-modifier-item.selected {
    background: rgba(233, 30, 99, 0.2);
    border-color: #ffffff;
}

.modal-modifier-item-emoji {
    font-size: 18px;
}

.modal-modifier-item-name {
    font-size: 13px;
}

.modal-modifier-item-price {
    font-size: 12px;
    color: #4ade80;
    margin-left: auto;
}

/* Итого */
.product-modal-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    margin-bottom: 15px;
    font-size: 18px;
    font-weight: 600;
}

.product-modal-total span:last-child {
    color: #ffffff;
    font-size: 22px;
}

/* Ряд цены с единицей измерения */
.product-modal-price-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 10px;
}

.product-modal-unit {
    font-size: 14px;
    opacity: 0.6;
}

/* Счётчик фото */
.gallery-counter {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.6);
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
}

/* КБЖУ */
.product-modal-nutrition {
    background: rgba(76, 175, 80, 0.1);
    border: 1px solid rgba(76, 175, 80, 0.3);
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 15px;
}

.nutrition-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 12px;
    opacity: 0.9;
}

.nutrition-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    text-align: center;
}

.nutrition-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nutrition-value {
    font-size: 18px;
    font-weight: 700;
    color: #4caf50;
}

.nutrition-label {
    font-size: 11px;
    opacity: 0.6;
}

.nutrition-weight {
    margin-top: 10px;
    font-size: 12px;
    opacity: 0.7;
    text-align: center;
}

/* Размеры */
.product-modal-sizes {
    margin-bottom: 15px;
}

.sizes-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 12px;
}

.sizes-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.size-btn {
    min-width: 48px;
    padding: 10px 14px;
    background: rgba(255,255,255,0.08);
    border: 2px solid rgba(255,255,255,0.15);
    border-radius: 10px;
    color: white;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.size-btn:hover {
    border-color: rgba(255,255,255,0.3);
}

.size-btn.selected {
    background: linear-gradient(135deg, #ffffff, #666666);
    border-color: #ffffff;
}

.size-btn.disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Количество в модалке */
.product-modal-quantity {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 15px;
    background: rgba(255,255,255,0.05);
    border-radius: 12px;
    margin-bottom: 15px;
}

.quantity-label {
    font-size: 14px;
    opacity: 0.8;
}

.quantity-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.quantity-controls .qty-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.15);
    color: white;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.quantity-controls .qty-btn:hover {
    background: linear-gradient(135deg, #ffffff, #666666);
}

.quantity-controls .qty-value {
    min-width: 30px;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
}

/* Зум фото */
.photo-zoom-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.98);
    z-index: 100001;
    align-items: center;
    justify-content: center;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.photo-zoom-modal.show {
    display: flex;
}

.photo-zoom-modal img {
    max-width: 100%;
    max-height: 100vh;
    width: auto;
    height: auto;
    object-fit: contain;
    touch-action: pinch-zoom;
    user-select: none;
}

.zoom-close {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    background: rgba(255,255,255,0.2);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 24px;
    cursor: pointer;
    z-index: 10;
    backdrop-filter: blur(10px);
}

.zoom-nav {
    position: fixed;
    top: 50%;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    transform: translateY(-50%);
    pointer-events: none;
}

.zoom-prev, .zoom-next {
    width: 50px;
    height: 50px;
    background: rgba(255,255,255,0.2);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 28px;
    cursor: pointer;
    pointer-events: auto;
    backdrop-filter: blur(10px);
}

/* Кнопка добавить */
.product-modal-add-btn {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, #ffffff, #666666);
    border: none;
    border-radius: 16px;
    color: white;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 4px 20px rgba(233, 30, 99, 0.4);
    transition: all 0.3s;
}

.product-modal-add-btn:active {
    transform: scale(0.98);
}

/* Светлая тема */
body.light-theme .product-modal-content {
    background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
    color: #333;
}

body.light-theme .product-modal-close {
    background: rgba(0, 0, 0, 0.1);
    color: #333;
}

body.light-theme .modal-modifier-item {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.1);
}

body.light-theme .modal-modifier-item.selected {
    background: rgba(233, 30, 99, 0.1);
}

body.light-theme .product-modal-total {
    background: rgba(0, 0, 0, 0.03);
}

/* Блокировка прокрутки */
body.modal-open {
    overflow: hidden !important;
    position: fixed;
    width: 100%;
}

/* ===== POPUP МОДИФИКАТОРОВ ===== */
.modifiers-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100000;
    display: none;
    align-items: center;
    justify-content: center;
}

.modifiers-popup.show {
    display: flex;
}

.modifiers-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
}

.modifiers-content {
    position: relative;
    background: linear-gradient(145deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 24px;
    padding: 30px;
    max-width: 400px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    animation: popupSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes popupSlideIn {
    from {
        opacity: 0;
        transform: translateY(50px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modifiers-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 36px;
    height: 36px;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: white;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.modifiers-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

.modifiers-header {
    text-align: center;
    margin-bottom: 25px;
}

.modifiers-emoji {
    font-size: 50px;
    margin-bottom: 15px;
    animation: bounce 2s infinite;
}

.modifiers-title {
    font-family: 'Yaginya', serif;
    font-size: 28px;
    color: white;
    margin-bottom: 8px;
}

.modifiers-subtitle {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
}

.modifiers-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 25px;
}

.modifier-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 18px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.3s ease;
}

.modifier-item:hover {
    background: rgba(255, 255, 255, 0.1);
}

.modifier-item.selected {
    border-color: #ffffff;
    background: rgba(233, 30, 99, 0.15);
}

.modifier-item-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.modifier-item-emoji {
    font-size: 28px;
}

.modifier-item-info {
    display: flex;
    flex-direction: column;
}

.modifier-item-name {
    color: white;
    font-weight: 500;
    font-size: 16px;
}

.modifier-item-desc {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
}

.modifier-item-price {
    color: #4ade80;
    font-weight: 600;
    font-size: 16px;
}

.modifier-checkbox {
    width: 24px;
    height: 24px;
    border-radius: 8px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    margin-left: 12px;
}

.modifier-item.selected .modifier-checkbox {
    background: #ffffff;
    border-color: #ffffff;
}

.modifier-item.selected .modifier-checkbox::after {
    content: '✓';
    color: white;
    font-size: 14px;
}

.modifiers-actions {
    display: flex;
    gap: 12px;
}

.modifiers-skip {
    flex: 1;
    padding: 16px;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    font-size: 16px;
    font-weight: 500;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.modifiers-skip:hover {
    background: rgba(255, 255, 255, 0.2);
}

.modifiers-add {
    flex: 1;
    padding: 16px;
    border: none;
    background: linear-gradient(135deg, #ffffff, #666666);
    color: white;
    font-size: 16px;
    font-weight: 600;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.modifiers-add:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(233, 30, 99, 0.4);
}

/* ===== POPUP АПСЕЛ (МОДАЛЬНЫЙ) ===== */
.upsell-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
}

.upsell-modal.show {
    display: flex;
}

.upsell-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
}

.upsell-modal-content {
    position: relative;
    background: linear-gradient(145deg, #1a1a2e 0%, #0f0f1a 100%);
    border-radius: 28px;
    padding: 30px;
    max-width: 420px;
    width: 92%;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 30px 100px rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    animation: popupSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.upsell-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
    border: none;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    color: white;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.upsell-modal-close:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: scale(1.1);
}

.upsell-modal-header {
    text-align: center;
    margin-bottom: 25px;
}

.upsell-modal-emoji {
    font-size: 55px;
    margin-bottom: 15px;
    display: inline-block;
    animation: pulse 2s infinite;
}

.upsell-modal-title {
    font-family: 'Yaginya', serif;
    font-size: 26px;
    color: white;
    margin-bottom: 8px;
}

.upsell-modal-subtitle {
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
}

.upsell-modal-items {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 25px;
}

.upsell-modal-item {
    display: flex;
    align-items: center;
    padding: 16px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.3s ease;
    cursor: pointer;
}

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

.upsell-modal-item.selected {
    background: rgba(233, 30, 99, 0.15);
    border-color: #ffffff;
}

.upsell-modal-item.selected .upsell-modal-item-check .check-circle {
    background: #ffffff;
}

.upsell-modal-item.selected .upsell-modal-item-check .check-circle::after {
    content: '✓';
    color: white;
    font-size: 14px;
}

.upsell-modal-item-check {
    margin-left: 10px;
}

.upsell-modal-item-check .check-circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.upsell-modal-item-emoji {
    font-size: 36px;
    margin-right: 15px;
}

.upsell-modal-item-info {
    flex: 1;
}

.upsell-modal-item-name {
    color: white;
    font-weight: 500;
    font-size: 16px;
    margin-bottom: 3px;
}

.upsell-modal-item-desc {
    color: rgba(255, 255, 255, 0.4);
    font-size: 12px;
}

.upsell-modal-item-price {
    color: #4ade80;
    font-weight: 600;
    font-size: 17px;
    margin-right: 12px;
}

.upsell-modal-item-add {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    border: none;
    background: linear-gradient(135deg, #ffffff, #666666);
    color: white;
    font-size: 22px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.upsell-modal-item-add:hover {
    transform: scale(1.1);
    box-shadow: 0 5px 20px rgba(233, 30, 99, 0.4);
}

.upsell-modal-item-add.added {
    background: #4ade80;
}

.upsell-modal-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.upsell-modal-skip {
    padding: 14px 30px;
    border: none;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
    font-size: 15px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.upsell-modal-skip:hover {
    background: rgba(255, 255, 255, 0.12);
    color: white;
}

.upsell-modal-confirm {
    padding: 14px 30px;
    border: none;
    background: linear-gradient(135deg, #ffffff, #666666);
    color: white;
    font-size: 15px;
    font-weight: 600;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(233, 30, 99, 0.4);
}

.upsell-modal-confirm:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(233, 30, 99, 0.5);
}

/* Светлая тема для модификаторов и апсел */
body.light-theme .modifiers-content,
body.light-theme .upsell-modal-content {
    background: linear-gradient(145deg, #ffffff 0%, #f5f5f5 100%);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

body.light-theme .modifiers-title,
body.light-theme .upsell-modal-title {
    color: #000000;
}

body.light-theme .modifiers-subtitle,
body.light-theme .upsell-modal-subtitle {
    color: rgba(0, 0, 0, 0.5);
}

body.light-theme .modifier-item {
    background: rgba(0, 0, 0, 0.03);
}

body.light-theme .modifier-item:hover {
    background: rgba(0, 0, 0, 0.06);
}

body.light-theme .modifier-item-name,
body.light-theme .upsell-modal-item-name {
    color: #000000;
}

body.light-theme .upsell-modal-item {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.06);
}

body.light-theme .upsell-modal-item:hover {
    background: rgba(0, 0, 0, 0.06);
}

body.light-theme .modifiers-close,
body.light-theme .upsell-modal-close,
body.light-theme .modifiers-skip,
body.light-theme .upsell-modal-skip {
    background: rgba(0, 0, 0, 0.05);
    color: #000000;
}

/* ========================================
   БОНУСНАЯ СИСТЕМА - ПОДАРОК
   ======================================== */

.bonus-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100000;
    display: none;
    align-items: center;
    justify-content: center;
}

.bonus-modal.active {
    display: flex;
}

.bonus-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 20% 80%, rgba(233, 30, 99, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(156, 39, 176, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(103, 58, 183, 0.2) 0%, transparent 70%),
        linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 100%);
    opacity: 0;
    animation: bonusBgFade 0.5s ease-out forwards;
}

@keyframes bonusBgFade {
    to { opacity: 1; }
}

.bonus-content {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bonus-title {
    font-size: 36px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 10px;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
    animation: titleSlide 0.6s ease-out 0.3s backwards;
}

.bonus-subtitle {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 40px;
    animation: titleSlide 0.6s ease-out 0.5s backwards;
}

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

.bonus-gift-box {
    position: relative;
    width: 250px;
    height: 250px;
    margin: 0 auto 30px;
    cursor: pointer;
    animation: giftFloat 2s ease-in-out infinite;
    transition: transform 0.3s ease;
}

.bonus-gift-box:active {
    transform: scale(0.9) !important;
}

@keyframes giftFloat {
    0%, 100% { transform: translateY(0px) rotate(-5deg); }
    50% { transform: translateY(-20px) rotate(5deg); }
}

.gift-emoji {
    font-size: 200px;
    position: relative;
    z-index: 2;
    animation: giftSpin 3s ease-in-out infinite;
    line-height: 1;
}

@keyframes giftSpin {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-10deg); }
    75% { transform: rotate(10deg); }
}

.gift-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 300px;
    margin: -150px 0 0 -150px;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.4) 0%, transparent 70%);
    animation: glowPulse 2s ease-in-out infinite;
    z-index: 1;
}

@keyframes glowPulse {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.2); opacity: 1; }
}

.tap-instruction {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    animation: tapBounce 1s ease-in-out infinite;
}

.tap-finger {
    font-size: 48px;
    animation: fingerTap 1.5s ease-in-out infinite;
}

@keyframes fingerTap {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-10px) scale(1.1); }
}

.tap-text {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    letter-spacing: 0.5px;
}

@keyframes tapBounce {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Результат открытия подарка */
.bonus-result {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 10;
    animation: resultAppear 0.5s ease-out forwards;
}

@keyframes resultAppear {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.bonus-result-emoji {
    font-size: 80px;
    margin-bottom: 20px;
    animation: emojiSpin 0.6s ease-out;
}

@keyframes emojiSpin {
    from { transform: rotate(-180deg) scale(0); }
    to { transform: rotate(0) scale(1); }
}

.bonus-result-title {
    font-size: 32px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 20px;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

.bonus-result-amount {
    font-size: clamp(48px, 12vw, 64px);
    font-weight: 900;
    color: #ffd700;
    text-shadow: 0 4px 30px rgba(255, 215, 0, 0.8);
    margin-bottom: 10px;
    animation: amountPulse 1s ease-in-out infinite;
    white-space: nowrap;
}

@keyframes amountPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.bonus-result-text {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 10px;
}

.bonus-result-hint {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 400;
}

/* Уведомление о бонусе в каталоге */
.bonus-notification {
    position: fixed;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    animation: notifSlideDown 0.5s ease-out;
}

@keyframes notifSlideDown {
    from { transform: translate(-50%, -100%); opacity: 0; }
    to { transform: translateX(-50%); opacity: 1; }
}

.bonus-notif-content {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 20px;
    padding: 20px 25px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 10px 40px rgba(102, 126, 234, 0.4);
    max-width: 90vw;
}

.bonus-notif-icon {
    font-size: 40px;
    animation: iconWobble 2s ease-in-out infinite;
}

@keyframes iconWobble {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-10deg); }
    75% { transform: rotate(10deg); }
}

.bonus-notif-text {
    flex: 1;
}

.bonus-notif-title {
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 5px;
}

.bonus-notif-title span {
    color: #ffd700;
}

.bonus-notif-subtitle {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
}

.bonus-notif-close {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: #ffffff;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Конфетти для бонуса */
.bonus-confetti {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
}

.confetti-piece {
    position: absolute;
    width: 10px;
    height: 10px;
    animation: confettiFall 3s ease-out forwards;
}

.confetti-emoji {
    position: absolute;
    animation: emojiConfettiFall 4s ease-out forwards;
    pointer-events: none;
}

@keyframes emojiConfettiFall {
    0% {
        opacity: 1;
        transform: translateY(0) rotate(0deg) scale(0);
    }
    10% {
        transform: translateY(10vh) rotate(30deg) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(100vh) rotate(360deg) scale(0.5);
    }
}

@keyframes confettiFall {
    0% {
        opacity: 1;
        transform: translateY(0) rotate(0deg);
    }
    100% {
        opacity: 0;
        transform: translateY(100vh) rotate(720deg);
    }
}

@keyframes notifSlideUp {
    from { transform: translateX(-50%); opacity: 1; }
    to { transform: translate(-50%, -100%); opacity: 0; }
}

/* ========================================
   ШИКАРНЫЙ AUTH MODAL С ПАДАЮЩИМИ ЭМОДЗИ
   ======================================== */

.auth-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
    display: none;
    align-items: center;
    justify-content: center;
    touch-action: none;
    overscroll-behavior: contain;
}

.auth-modal.active {
    display: flex;
}

.auth-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 20% 80%, rgba(233, 30, 99, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(156, 39, 176, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(103, 58, 183, 0.2) 0%, transparent 70%),
        linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 100%);
    opacity: 0;
    animation: authBgFade 0.5s ease-out forwards;
}

@keyframes authBgFade {
    to { opacity: 1; }
}

.auth-close-btn {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 24px;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.auth-close-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.1);
}

.auth-content {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 20px 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 400px;
    max-height: 90vh;
    overflow-y: auto;
}

.auth-step {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: stepFadeIn 0.5s ease-out;
    position: relative;
}

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

.auth-gift-box {
    position: relative;
    width: 140px;
    height: 140px;
    margin: 0 auto 15px;
    cursor: pointer;
    animation: giftFloat 2s ease-in-out infinite;
    transition: transform 0.3s ease;
}

.auth-gift-box:active {
    transform: scale(0.9) !important;
}

.auth-gift-box .gift-emoji {
    font-size: 100px;
    position: relative;
    z-index: 2;
    animation: giftSpin 3s ease-in-out infinite;
    line-height: 1;
}

.auth-gift-box .gift-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 250px;
    height: 250px;
    margin: -125px 0 0 -125px;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.4) 0%, transparent 70%);
    animation: glowPulse 2s ease-in-out infinite;
    z-index: 1;
}

.auth-title {
    font-size: 32px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 15px;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
    animation: titleSlide 0.6s ease-out backwards;
}

.auth-subtitle {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 30px;
    line-height: 1.5;
    animation: titleSlide 0.6s ease-out 0.2s backwards;
}

.auth-icon-circle {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    margin: 0 auto 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: iconPop 0.5s ease-out;
}

.auth-icon-circle.pink {
    background: linear-gradient(135deg, #ffffff, #666666);
    box-shadow: 0 15px 50px rgba(233, 30, 99, 0.5);
}

.auth-icon-circle.purple {
    background: linear-gradient(135deg, #666666, #673ab7);
    box-shadow: 0 15px 50px rgba(156, 39, 176, 0.5);
}

.auth-icon-circle.gold {
    background: linear-gradient(135deg, #ffc107, #ff9800);
    box-shadow: 0 15px 50px rgba(255, 193, 7, 0.5);
}

.auth-icon-circle.green {
    background: linear-gradient(135deg, #4caf50, #2e7d32);
    box-shadow: 0 15px 50px rgba(76, 175, 80, 0.5);
}

.auth-icon-circle.large {
    width: 140px;
    height: 140px;
}

.auth-icon-circle .animated-emoji {
    font-size: 60px;
    animation: emojiFloat 2s ease-in-out infinite;
}

.auth-icon-circle.large .animated-emoji {
    font-size: 70px;
}

@keyframes iconPop {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes emojiFloat {
    0%, 100% { transform: translateY(0) rotate(-5deg); }
    50% { transform: translateY(-10px) rotate(5deg); }
}

.auth-input {
    width: 100%;
    padding: 18px 20px;
    background: rgba(255, 255, 255, 0.08);
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    color: white;
    font-size: 18px;
    text-align: center;
    margin-bottom: 15px;
    box-sizing: border-box;
    outline: none;
    transition: all 0.3s ease;
}

.auth-input:focus {
    border-color: rgba(233, 30, 99, 0.5);
    background: rgba(255, 255, 255, 0.12);
}

.auth-input.code-input {
    font-size: 28px;
    letter-spacing: 10px;
    font-weight: bold;
}

.auth-row {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    width: 100%;
}

.auth-select {
    flex: 1;
    padding: 18px;
    background: rgba(255, 255, 255, 0.08);
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    color: white;
    font-size: 16px;
    outline: none;
}

.auth-select option {
    background: #1a1a24;
    color: white;
}

.auth-btn {
    width: 100%;
    padding: 18px;
    border: none;
    border-radius: 16px;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 10px;
}

.auth-btn.pink {
    background: linear-gradient(135deg, #ffffff, #666666);
    color: white;
    box-shadow: 0 10px 30px rgba(233, 30, 99, 0.4);
}

.auth-btn.purple {
    background: linear-gradient(135deg, #666666, #673ab7);
    color: white;
    box-shadow: 0 10px 30px rgba(156, 39, 176, 0.4);
}

.auth-btn.gold {
    background: linear-gradient(135deg, #ffc107, #ff9800);
    color: #000;
    box-shadow: 0 10px 30px rgba(255, 193, 7, 0.4);
}

.auth-btn.green {
    background: linear-gradient(135deg, #4caf50, #2e7d32);
    color: white;
    box-shadow: 0 10px 30px rgba(76, 175, 80, 0.4);
}

.auth-btn:active {
    transform: scale(0.95);
}

.auth-error {
    display: none;
    color: #f44336;
    font-size: 14px;
    margin-bottom: 15px;
}

.auth-skip {
    display: block;
    margin-top: 15px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 14px;
    text-decoration: none;
}

.auth-link-text {
    margin-top: 20px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
}

.auth-link {
    color: #ffc107;
    text-decoration: none;
    font-weight: 600;
}

.auth-code-display {
    background: linear-gradient(135deg, #ffc107, #ff9800);
    border-radius: 20px;
    padding: 25px;
    margin-bottom: 25px;
}

.auth-code-display span {
    font-size: 40px;
    font-weight: bold;
    letter-spacing: 12px;
    color: #000;
}

.auth-confetti {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 100;
}

/* Падающие эмодзи для auth */
.auth-falling-emojis .falling-emoji {
    position: absolute;
    top: -50px;
    animation: authEmojisFall linear forwards;
    pointer-events: none;
    z-index: 0;
}

@keyframes authEmojisFall {
    to {
        transform: translateY(110vh) rotate(360deg);
    }
}

/* ========================================
   КРАСИВЫЙ AUTH MODAL - В СТИЛЕ ЗАГРУЗКИ
   ======================================== */

/* Контейнер замка/подарка с свечением */
.auth-lock-container {
    position: relative;
    width: 150px;
    height: 150px;
    margin: 0 auto 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-lock-emoji {
    font-size: 100px;
    animation: lockFloat 2s ease-in-out infinite;
    filter: drop-shadow(0 0 30px rgba(255, 193, 7, 0.5));
    transition: all 0.5s ease;
}

.auth-lock-glow {
    position: absolute;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(255, 193, 7, 0.3) 0%, transparent 70%);
    border-radius: 50%;
    animation: glowPulse 2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes lockFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-15px) scale(1.05); }
}

@keyframes glowPulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.2); }
}

/* Заголовок intro */
.auth-intro-title {
    font-size: 26px;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 10px 0;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
    animation: titleFadeIn 0.8s ease-out;
}

.auth-intro-subtitle {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 15px 0;
    line-height: 1.5;
}

.auth-intro-subtitle strong {
    color: #ffc107;
    font-weight: 700;
}

/* Преимущества */
.auth-benefits {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
    animation: benefitsFadeIn 0.8s ease-out 0.3s backwards;
}

.auth-benefit {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 10px 15px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.auth-benefit:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: translateX(5px);
}

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

/* Кнопки intro */
.auth-intro-buttons {
    opacity: 0;
    transform: translateY(20px);
    animation: buttonsAppear 0.5s ease-out 2s forwards;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Вторичная кнопка Войти */
.login-btn-secondary {
    background: transparent !important;
    border: 2px solid rgba(255, 255, 255, 0.4) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

.login-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
}

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

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

/* Обёртка для инпутов с отступами */
.auth-input-wrapper {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 30px;
    width: 100%;
    max-width: 350px;
    margin-left: auto;
    margin-right: auto;
}

.auth-input-wrapper .onboarding-input {
    width: 100%;
    box-sizing: border-box;
}

/* Кнопка с отступом сверху */
.auth-btn-spaced {
    margin-top: 15px;
}

/* Центрированные кнопки */
.auth-buttons-centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    width: 100%;
    margin-top: 20px;
}

.auth-buttons-centered .welcome-btn {
    width: 100%;
    max-width: 350px;
}

.auth-buttons-centered .skip-btn {
    margin-top: 0;
}

/* Красивый выбор даты рождения */
.auth-birthday-wrapper {
    margin: 0 auto 30px auto;
    width: 100%;
    max-width: 350px;
}

.auth-birthday-select {
    display: flex;
    gap: 15px;
    background: rgba(255, 255, 255, 0.08);
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    padding: 15px 20px;
    backdrop-filter: blur(10px);
}

.auth-select {
    flex: 1;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 12px 15px;
    color: white;
    font-size: 16px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    transition: all 0.3s ease;
}

.auth-select:hover {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.4);
}

.auth-select:focus {
    outline: none;
    border-color: #ffffff;
    box-shadow: 0 0 15px rgba(233, 30, 99, 0.3);
}

.auth-select option {
    background: #2d1b4e;
    color: white;
    padding: 10px;
}

/* Успешная регистрация - красивая анимация */

/* Индикатор шагов регистрации */
.auth-step-indicator {
    position: fixed !important;
    top: 25px !important;
    left: 130px !important;
    background: linear-gradient(135deg, rgba(233, 30, 99, 0.3), rgba(156, 39, 176, 0.3));
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 12px 18px;
    border-radius: 25px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
    letter-spacing: 0.5px;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    white-space: nowrap;
    z-index: 10;
}

/* Контейнер навигации - не анимируем */
.auth-nav-row {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    padding: 20px !important;
    z-index: 100 !important;
    pointer-events: none;
}

.auth-nav-row > * {
    pointer-events: auto;
}

/* Кнопка "Назад" */
.auth-back-btn {
    position: fixed !important;
    top: 20px !important;
    left: 20px !important;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.9);
    padding: 14px 20px;
    border-radius: 25px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    z-index: 10;
}

.auth-back-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    transform: translateX(-3px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.auth-back-btn:active {
    transform: translateX(-5px) scale(0.98);
}

.auth-success-container {
    position: relative;
    width: 150px;
    height: 150px;
    margin: 0 auto 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-success-emoji {
    font-size: 100px;
    animation: successPop 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards,
               successFloat 2s ease-in-out 0.6s infinite;
    filter: drop-shadow(0 0 30px rgba(76, 175, 80, 0.5));
}

.auth-success-rings {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.auth-success-rings::before,
.auth-success-rings::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150px;
    height: 150px;
    border: 3px solid rgba(76, 175, 80, 0.5);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: successRing 2s ease-out infinite;
}

.auth-success-rings::after {
    animation-delay: 1s;
}

@keyframes successPop {
    0% { transform: scale(0) rotate(-180deg); opacity: 0; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

@keyframes successFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-10px) scale(1.05); }
}

@keyframes successRing {
    0% { transform: translate(-50%, -50%) scale(0.5); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(2); opacity: 0; }
}

/* Бонус при успехе */
.auth-success-bonus {
    background: linear-gradient(135deg, rgba(255, 152, 0, 0.3), rgba(255, 193, 7, 0.3));
    border: 2px solid rgba(255, 193, 7, 0.5);
    border-radius: 20px;
    padding: 20px 40px;
    margin: 20px 0 30px;
    text-align: center;
    animation: bonusPulse 1s ease-in-out infinite;
}

.auth-success-bonus span {
    display: block;
    font-size: 36px;
    font-weight: 800;
    color: #ffc107;
    text-shadow: 0 2px 10px rgba(255, 193, 7, 0.5);
}

.auth-success-bonus small {
    display: block;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 5px;
}

@keyframes bonusPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 20px rgba(255, 193, 7, 0.3); }
    50% { transform: scale(1.02); box-shadow: 0 0 30px rgba(255, 193, 7, 0.5); }
}


/* Конфетти анимация */
@keyframes confettiExplode {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(var(--tx), var(--ty)) rotate(var(--r)) scale(0);
        opacity: 0;
    }
}

#authConfetti {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
    z-index: 10;
}

/* ========================================
   PUSH-УВЕДОМЛЕНИЯ О СТАТУСЕ ЗАКАЗА
   ======================================== */

.order-push-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 999999;
    display: flex;
    flex-direction: column;
    gap: 15px;
    pointer-events: none;
}

.order-push {
    pointer-events: auto;
    width: 360px;
    max-width: calc(100vw - 40px);
    background: linear-gradient(145deg, rgba(30, 30, 45, 0.98), rgba(20, 20, 30, 0.98));
    border-radius: 20px;
    padding: 20px;
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    animation: pushSlideIn 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
    position: relative;
    overflow: hidden;
}

.order-push.hiding {
    animation: pushSlideOut 0.4s ease forwards;
}

@keyframes pushSlideIn {
    from {
        opacity: 0;
        transform: translateX(100px) scale(0.8);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes pushSlideOut {
    to {
        opacity: 0;
        transform: translateX(100px) scale(0.8);
    }
}

/* Цветная полоска статуса сверху */
.order-push::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--push-color, linear-gradient(90deg, #ffc107, #ff9800));
    border-radius: 20px 20px 0 0;
}

/* Анимированный фон */
.order-push::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, var(--push-glow, rgba(255, 193, 7, 0.1)) 0%, transparent 70%);
    animation: pushGlow 3s ease-in-out infinite;
    pointer-events: none;
}

@keyframes pushGlow {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.1); }
}

/* Кнопка закрытия */
.order-push-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.6);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10;
}

.order-push-close:hover {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    transform: rotate(90deg);
}

/* Контент уведомления */
.order-push-content {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

/* Иконка статуса */
.order-push-icon {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    flex-shrink: 0;
    background: var(--push-icon-bg, linear-gradient(135deg, #ffc107, #ff9800));
    box-shadow: 0 8px 25px var(--push-shadow, rgba(255, 193, 7, 0.4));
    animation: iconPulse 2s ease-in-out infinite;
}

@keyframes iconPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* Текст уведомления */
.order-push-text {
    flex: 1;
    min-width: 0;
}

.order-push-title {
    font-size: 16px;
    font-weight: 700;
    color: white;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.order-push-title .status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--push-dot, #4caf50);
    animation: dotPulse 1.5s ease-in-out infinite;
}

@keyframes dotPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.3); }
}

.order-push-message {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.4;
    margin-bottom: 8px;
}

.order-push-order-id {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    gap: 6px;
}

.order-push-order-id span {
    background: rgba(255, 255, 255, 0.1);
    padding: 3px 10px;
    border-radius: 10px;
    font-family: monospace;
}

/* Прогресс-бар для статусов */
.order-push-progress {
    margin-top: 15px;
    position: relative;
    z-index: 5;
}

.order-push-progress-bar {
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.order-push-progress-fill {
    height: 100%;
    background: var(--push-color, linear-gradient(90deg, #ffc107, #ff9800));
    border-radius: 3px;
    transition: width 0.5s ease;
    position: relative;
}

.order-push-progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: progressShine 1.5s ease-in-out infinite;
}

@keyframes progressShine {
    from { transform: translateX(-100%); }
    to { transform: translateX(100%); }
}

.order-push-progress-steps {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.4);
}

.order-push-progress-steps span.active {
    color: var(--push-text, #ffc107);
    font-weight: 600;
}

/* Падающие эмодзи в уведомлении */
.order-push-emojis {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    border-radius: 20px;
    z-index: 1;
}

.push-emoji {
    position: absolute;
    font-size: 16px;
    opacity: 0.4;
    animation: pushEmojiFloat 4s ease-in-out infinite;
}

@keyframes pushEmojiFloat {
    0%, 100% { 
        transform: translateY(0) rotate(0deg);
        opacity: 0.4;
    }
    50% { 
        transform: translateY(-20px) rotate(10deg);
        opacity: 0.6;
    }
}

/* Адаптив для мобильных */
@media (max-width: 480px) {
    .order-push-container {
        top: 10px;
        right: 10px;
        left: 10px;
    }
    
    .order-push {
        width: 100%;
    }
    
    .order-push-icon {
        width: 50px;
        height: 50px;
        font-size: 26px;
    }
    
    .order-push-title {
        font-size: 15px;
    }
    
    .order-push-message {
        font-size: 13px;
    }
}

/* Цветовые схемы для разных статусов */
.order-push.status-new {
    --push-color: linear-gradient(90deg, #ffc107, #ff9800);
    --push-icon-bg: linear-gradient(135deg, #ffc107, #ff9800);
    --push-shadow: rgba(255, 193, 7, 0.4);
    --push-glow: rgba(255, 193, 7, 0.1);
    --push-dot: #ffc107;
    --push-text: #ffc107;
}

.order-push.status-confirmed {
    --push-color: linear-gradient(90deg, #2196f3, #1976d2);
    --push-icon-bg: linear-gradient(135deg, #2196f3, #1976d2);
    --push-shadow: rgba(33, 150, 243, 0.4);
    --push-glow: rgba(33, 150, 243, 0.1);
    --push-dot: #2196f3;
    --push-text: #2196f3;
}

.order-push.status-preparing {
    --push-color: linear-gradient(90deg, #666666, #7b1fa2);
    --push-icon-bg: linear-gradient(135deg, #666666, #7b1fa2);
    --push-shadow: rgba(156, 39, 176, 0.4);
    --push-glow: rgba(156, 39, 176, 0.1);
    --push-dot: #666666;
    --push-text: #666666;
}

.order-push.status-delivering {
    --push-color: linear-gradient(90deg, #00bcd4, #0097a7);
    --push-icon-bg: linear-gradient(135deg, #00bcd4, #0097a7);
    --push-shadow: rgba(0, 188, 212, 0.4);
    --push-glow: rgba(0, 188, 212, 0.1);
    --push-dot: #00bcd4;
    --push-text: #00bcd4;
}

.order-push.status-delivered {
    --push-color: linear-gradient(90deg, #4caf50, #388e3c);
    --push-icon-bg: linear-gradient(135deg, #4caf50, #388e3c);
    --push-shadow: rgba(76, 175, 80, 0.4);
    --push-glow: rgba(76, 175, 80, 0.1);
    --push-dot: #4caf50;
    --push-text: #4caf50;
}

.order-push.status-cancelled {
    --push-color: linear-gradient(90deg, #f44336, #d32f2f);
    --push-icon-bg: linear-gradient(135deg, #f44336, #d32f2f);
    --push-shadow: rgba(244, 67, 54, 0.4);
    --push-glow: rgba(244, 67, 54, 0.1);
    --push-dot: #f44336;
    --push-text: #f44336;
}

/* === СПОСОБЫ ОПЛАТЫ - ИСПРАВЛЕНО === */
.payment-options {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
    margin-top: 15px !important;
}

.payment-option {
    display: block;
    cursor: pointer !important;
}

.payment-option input[type="radio"] {
    display: none !important;
}

.payment-option .payment-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 20px 12px !important;
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 16px !important;
    transition: all 0.3s ease !important;
    min-height: 120px !important;
    height: 120px !important;
    box-sizing: border-box !important;
}

.payment-option:hover .payment-card {
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(255,255,255,0.2) !important;
}

.payment-option input[type="radio"]:checked + .payment-card {
    background: rgba(255,255,255,0.12) !important;
    border-color: #ffffff !important;
    box-shadow: 0 0 25px rgba(255,255,255,0.15) !important;
}

.payment-option .payment-icon {
    font-size: 32px !important;
    margin-bottom: 12px !important;
    filter: grayscale(0.3) !important;
}

.payment-option input[type="radio"]:checked + .payment-card .payment-icon {
    filter: grayscale(0) !important;
    transform: scale(1.1) !important;
}

.payment-option .payment-text {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #fff !important;
    line-height: 1.3 !important;
}

.payment-option .payment-desc {
    display: block !important;
    font-size: 10px !important;
    opacity: 0.5 !important;
    margin-top: 4px !important;
    color: #fff !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
}

@media (max-width: 500px) {
    .payment-options {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .payment-option .payment-card {
        min-height: 100px !important;
        height: 100px !important;
        padding: 12px 6px !important;
    }
    .payment-option .payment-icon {
        font-size: 24px !important;
        margin-bottom: 8px !important;
    }
    .payment-option .payment-text {
        font-size: 9px !important;
        line-height: 1.2 !important;
    }
    .payment-option .payment-desc {
        font-size: 8px !important;
        margin-top: 2px !important;
    }
}

@media (max-width: 350px) {
    .payment-options {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .payment-option .payment-card {
        min-height: 90px !important;
        height: 90px !important;
    }
}

/* === TELEGRAM MINI APP - Компактный режим === */
@media (max-height: 700px) {
    .auth-lock-container {
        width: 100px;
        height: 100px;
        margin: 0 auto 15px;
    }
    
    .auth-lock-emoji {
        font-size: 70px;
    }
    
    .auth-lock-glow {
        width: 130px;
        height: 130px;
    }
    
    .auth-intro-title {
        font-size: 22px;
        margin: 0 0 8px 0;
    }
    
    .auth-intro-subtitle {
        font-size: 13px;
        margin: 0 0 12px 0;
    }
    
    .auth-benefits {
        gap: 6px;
        margin-bottom: 15px;
    }
    
    .auth-benefit {
        padding: 8px 12px;
        font-size: 13px;
    }
    
    .auth-intro-buttons {
        gap: 10px;
    }
    
    .welcome-btn {
        padding: 14px 30px;
        font-size: 14px;
    }
    
    .login-btn-secondary {
        padding: 12px 25px;
        font-size: 13px;
    }
    
    .onboarding-content {
        padding: 15px 20px;
    }
    
    .onboarding-emoji {
        font-size: 50px;
        margin-bottom: 15px;
    }
    
    .onboarding-title {
        font-size: 20px;
    }
    
    .onboarding-subtitle {
        font-size: 13px;
    }
}

/* Очень маленькие экраны (iPhone SE и т.п.) */
@media (max-height: 600px) {
    .auth-lock-container {
        width: 80px;
        height: 80px;
        margin: 0 auto 10px;
    }
    
    .auth-lock-emoji {
        font-size: 55px;
    }
    
    .auth-lock-glow {
        width: 100px;
        height: 100px;
    }
    
    .auth-intro-title {
        font-size: 20px;
    }
    
    .auth-benefits {
        gap: 5px;
        margin-bottom: 12px;
    }
    
    .auth-benefit {
        padding: 6px 10px;
        font-size: 12px;
    }
    
    .welcome-btn {
        padding: 12px 25px;
        font-size: 13px;
    }
    
    .auth-close-btn {
        top: 10px;
        right: 10px;
        width: 40px;
        height: 40px;
        font-size: 20px;
    }
}