/* Основные стили */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  width: 100%;
  overflow-x: hidden;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  background-color: #f5f5f5;
  color: #333;
  line-height: 1.6;
  padding-bottom: 80px;
  width: 100%;
  overflow-x: hidden;
  /* Улучшаем скролл на мобильных */
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

/* Страницы */
.page {
  display: block;
  padding: 20px;
  min-height: calc(100vh - 80px);
  width: 100%;
  margin: 0;
  background: white;
}

.page.hidden {
  display: none;
}

/* Универсальный класс для скрытия элементов */
.hidden {
  display: none !important;
}

/* Заголовки страниц */
.page-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  gap: 10px;
}

.product-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  gap: 10px;
}

.btn-back {
  background: none;
  border: none;
  font-size: 16px;
  color: #007bff;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.btn-back:hover {
  background-color: #f0f0f0;
}

/* Главная страница */
header {
  text-align: center;
  margin-bottom: 30px;
}

header h1 {
  font-size: 28px;
  font-weight: 600;
  color: #333;
  margin-bottom: 20px;
}

.header-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.btn-secondary {
  background: #e3f2fd;
  color: #1976d2;
  border: none;
  padding: 14px 20px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.btn-secondary:hover {
  background: #bbdefb;
}

/* Категории */
.categories {
  text-align: left;
}

.categories h2 {
  font-size: 20px;
  margin-bottom: 20px;
  color: #333;
  text-align: center;
}

.category-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.category-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s;
  display: flex;
  flex-direction: row;
  align-items: center;
  min-height: 120px;
}

.category-card:hover {
  transform: translateY(-2px);
}

.category-content {
  flex: 1;
  padding: 20px 0 20px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start !important;
  gap: 8px;
  text-align: left !important;
}

.category-card img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
  margin: 16px;
}

.category-card h3 {
  margin: 0 !important;
  font-size: 18px;
  color: #333;
  line-height: 1.2;
  text-align: left !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
  justify-self: flex-start !important;
  align-self: flex-start !important;
}

.category-card .btn-primary {
  margin-top: 8px;
  margin-left: 0 !important;
  align-self: flex-start !important;
  text-align: left !important;
  padding-left: 16px !important;
}

/* Убран медиа-запрос - используем единое выравнивание */

/* Каталог */
.search-container {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.search-wrapper {
  position: relative;
  flex: 1;
}

#search-input {
  width: 100%;
  padding: 12px 36px 12px 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 16px;
  background-color: #f5f5f5;
  color: #000;
  caret-color: #007bff;
  box-sizing: border-box;
}

.search-clear-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: #c0c0c0;
  border: none;
  color: #fff;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
  z-index: 2;
}

#search-input::selection {
  background-color: var(--tg-theme-link-color, #007bff);
  color: #fff;
}

.btn-filter {
  padding: 10px 14px;
  background: #f8f9fa;
  border: 1px solid #ddd;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  white-space: nowrap;
  flex-shrink: 0;
}

.btn-sort {
  padding: 10px 14px;
  background: #f0f4ff;
  border: 1px solid #c5d0f5;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  color: #4a6cf7;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.2s;
}

.btn-sort:hover {
  background: #e0e8ff;
}

/* Чип активной сортировки */
.active-sort-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.active-sort-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #4a6cf7;
  color: #fff;
  padding: 6px 10px 6px 12px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
}

.sort-chip-close {
  background: rgba(255,255,255,0.25);
  border: none;
  color: #fff;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
}

.sort-chip-close:hover {
  background: rgba(255,255,255,0.4);
}

/* ── Sort Bottom Sheet ── */
.sort-sheet {
  background: #fff;
  border-radius: 20px 20px 0 0;
  width: 100%;
  max-width: 500px;
  padding-bottom: env(safe-area-inset-bottom, 16px);
  animation: slideUp 0.3s ease-out;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.sort-sheet-handle {
  width: 36px;
  height: 4px;
  background: #d1d5db;
  border-radius: 2px;
  margin: 12px auto 0;
}

.sort-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
}

.sort-sheet-title {
  font-size: 17px;
  font-weight: 700;
  color: #111;
}

.sort-sheet-close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: #f0f0f0;
  color: #666;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sort-sheet-list {
  display: flex;
  flex-direction: column;
  padding: 0 16px;
  gap: 2px;
}

.sort-row {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 15px 16px;
  background: #f7f8fa;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  box-sizing: border-box;
  transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.sort-row:active {
  background: #eef0f5;
}

.sort-row.selected {
  background: #eef2ff;
}

.sort-row-icon {
  font-size: 20px;
  flex-shrink: 0;
  width: 32px;
  text-align: center;
}

.sort-row-label {
  flex: 1;
  font-size: 15px;
  font-weight: 500;
  color: #1a1a1a;
  padding: 0 10px;
}

.sort-row-check {
  font-size: 16px;
  font-weight: 700;
  color: #4a6cf7;
  width: 20px;
  text-align: right;
  flex-shrink: 0;
}

.sort-sheet-actions {
  display: flex;
  gap: 10px;
  padding: 16px 16px 4px;
}

.sort-apply-btn {
  flex: 1;
  padding: 15px;
  background: #4a6cf7;
  color: #fff;
  border: none;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}

.sort-apply-btn:active {
  opacity: 0.85;
}

.sort-reset-btn {
  flex: 1;
  padding: 15px;
  background: #f0f0f0;
  color: #555;
  border: none;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.sort-reset-btn:active {
  background: #e4e4e4;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.product-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* ИСПРАВЛЕНО: Hover только для устройств с мышью */
@media (hover: hover) and (pointer: fine) {
  .product-card:hover {
    transform: translateY(-2px);
  }
}

/* Убираем синюю обводку при фокусе */
.product-card:focus {
  outline: none;
}

.product-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #f8f9fa;
  flex-shrink: 0;
}

/* 📱 АДАПТИВНОСТЬ ДЛЯ ПЛАНШЕТОВ И ПК */
@media (min-width: 768px) {
  /* Планшеты: 3 в ряд */
  .products-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

@media (min-width: 1024px) {
  /* Компьютеры: 3 в ряд */
  .products-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
  }
}

.product-badge {
  position: absolute;
  top: 165px; /* ⭐ По центру между картинкой и названием */
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  padding: 5px 10px; /* ⭐ Уменьшен padding */
  border-radius: 8px;
  font-size: 9px; /* ⭐ Уменьшен шрифт с 11px до 9px */
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap; /* ⭐ В одну строку */
  z-index: 3;
}

.product-card h3 {
  padding: 12px;
  font-size: 14px;
  color: #333;
}

.product-card .product-price {
  padding: 0 12px;
  color: #007bff;
  font-weight: 600;
  margin-bottom: 8px;
}

.product-card .btn-primary {
  margin: 0 12px 12px 12px;
  padding: 8px;
  font-size: 14px;
}

.btn-favorite {
  position: absolute;
  top: 8px;
  right: 8px;
  background: white;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  color: #999;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: color 0.3s;
}

.btn-favorite:hover {
  color: #e74c3c;
}

/* Карточка товара */
.product-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 180px; /* Отступ для кнопки "Добавить в корзину" */
}

/* Слайдер изображений */
.product-slider {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
  border-radius: 12px;
  background: #f8f9fa;
}

.slider-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.slider-track {
  display: flex;
  transition: transform 0.3s ease;
  height: 100%;
}

.slider-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  flex-shrink: 0;
}

.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  color: white;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  z-index: 10;
  transition: background-color 0.3s;
}

.slider-btn:hover {
  background: rgba(0,0,0,0.7);
}

.slider-btn.prev {
  left: 10px;
}

.slider-btn.next {
  right: 10px;
}

/* Информация о товаре */
.product-info {
  padding: 0 10px;
}



.product-info h1 {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

.product-price-range {
  color: #007bff;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 20px;
}

/* Таблица ценообразования */
.pricing-table {
  margin-bottom: 24px;
}

.pricing-table h3 {
  font-size: 18px;
  margin-bottom: 16px;
  color: #333;
}

.pricing-grid {
  display: table !important;
  width: 100% !important;
  border-collapse: collapse;
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.pricing-header {
  display: table-row !important;
  font-weight: 600;
  background: #f8f9fa;
}

.pricing-header span {
  display: table-cell !important;
  background: #f8f9fa;
  padding: 12px 8px;
  font-size: 14px;
  text-align: center;
  color: #666;
  border-bottom: 2px solid #ddd;
}

.pricing-row {
  display: table-row !important;
  cursor: pointer;
  transition: background-color 0.3s;
}

.pricing-row.price-hidden {
  display: none !important;
}

.pricing-row:hover span {
  background: #f0f8ff;
}

.pricing-row span {
  display: table-cell !important;
  background: white;
  padding: 12px 8px;
  font-size: 14px;
  text-align: center;
  transition: background-color 0.3s;
  border-bottom: 1px solid #eee;
}

.pricing-row span:first-child {
  font-weight: 600;
}

.pricing-row .price {
  color: #007bff;
  font-weight: 600;
}

.pricing-row .savings {
  color: #28a745;
  font-weight: 600;
}

/* Примеры расчета */
.calculation-examples {
  margin-bottom: 24px;
}

.calculation-examples h3 {
  font-size: 18px;
  margin-bottom: 12px;
  color: #333;
}

#calculation-content {
  font-size: 14px;
  line-height: 1.4;
  color: #666;
  white-space: normal;
  word-wrap: break-word;
}

#calculation-content br {
  display: none;
}

#calculation-content p {
  margin: 0;
  padding: 0;
  display: inline;
}

/* Скрываем отдельные точки */
.product-section .card-content {
  line-height: 1.5;
}

.product-section .card-content > *:first-child {
  display: inline;
}

/* КРИТИЧНО: Все текстовые элементы внутри разделов товара должны быть inline */
.product-section .card-content * {
  display: inline !important;
}

/* ИСКЛЮЧЕНИЯ: br должен быть block */
.product-section .card-content br {
  display: block !important;
  margin: 8px 0 !important;
}

/* КРИТИЧНО: Правильное форматирование для ВСЕХ разделов товара */
#product-about, #product-guarantee, #product-delivery, #product-how-to-order {
  padding: 20px !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: #4a5568 !important;
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
}

/* ОТСТУП СНИЗУ ДЛЯ КНОПКИ В КОРЗИНУ */
#product-delivery {
  margin-bottom: 100px !important;
}

/* Разделы информации */
.product-section {
  margin-bottom: 24px;
}

.product-section h3 {
  font-size: 18px;
  margin-bottom: 12px;
  color: #333;
}

.product-section div {
  font-size: 14px;
  line-height: 1.6;
  color: #666;
}

/* Кнопки сверху товара */
.product-top-buttons {
  display: flex;
  gap: 12px;
  padding: 16px;
  background: #f8f9fa;
}

.btn-telegram, .btn-contact {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  background: white;
  color: #333;
  white-space: nowrap;
}

.btn-telegram:hover, .btn-contact:hover {
  background: #f8f9fa;
  border-color: #007bff;
}

/* Слайдер товара */
.product-slider {
  position: relative;
  margin-bottom: 20px;
}

.slider-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1; /* Современный способ создания квадрата */
  overflow: hidden;
  border-radius: 12px;
}

.slider-track {
  display: flex;
  transition: transform 0.3s ease;
  width: 100%;
  height: 100%;
}

.slider-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  flex-shrink: 0;
}

.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  color: white;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  z-index: 2;
}

.slider-btn.prev {
  left: 10px;
}

.slider-btn.next {
  right: 10px;
}



/* Категория товара - синий текст */
.product-category {
  display: block;
  color: #007bff;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 8px;
}

/* Название товара */
#product-name {
  font-size: 20px;
  font-weight: 700;
  color: #333;
  margin: 8px 0;
  line-height: 1.3;
}

/* Цена товара */
.product-price-range {
  font-size: 18px;
  font-weight: 700;
  color: #333;
  margin-bottom: 20px;
}

/* Модальное окно для изображений */
.image-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-modal.hidden {
  display: none;
}

.image-modal-content {
  position: relative;
  max-width: 90%;
  max-height: 90%;
}

.image-modal-close {
  position: absolute;
  top: -40px;
  right: 0;
  background: none;
  border: none;
  color: white;
  font-size: 30px;
  cursor: pointer;
  z-index: 10001;
}

#modal-image {
    max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 8px;
}

.image-modal-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

.image-modal-btn {
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  pointer-events: all;
  transition: background 0.3s ease;
}

.image-modal-btn:hover {
  background: rgba(0, 0, 0, 0.8);
}

.image-modal-btn.prev {
  margin-left: -60px;
}

.image-modal-btn.next {
  margin-right: -60px;
}

/* Кнопка добавления в корзину */
.btn-add-to-cart {
  position: fixed;
  bottom: 95px; /* Поднимаем выше (было 80px) */
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.95), rgba(37, 99, 235, 0.95)); /* СИНИЙ градиент */
  backdrop-filter: blur(20px); /* Современный эффект размытия */
  -webkit-backdrop-filter: blur(20px);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2); /* Тонкая белая граница */
  padding: 18px 40px; /* Увеличили padding для ширины */
  border-radius: 30px; /* Более округлые углы */
  font-size: 17px;
  font-weight: 700; /* Жирнее шрифт */
  cursor: pointer;
  box-shadow: 
    0 8px 32px rgba(59, 130, 246, 0.3), /* СИНЯЯ тень */
    0 4px 16px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.2); /* Внутренний блик */
  z-index: 1000;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Плавная анимация */
  /* Показываем ТОЛЬКО на странице товара */
  display: none;
  min-width: 280px; /* Шире (было 200px) */
  max-width: 90vw; /* Адаптивность */
  text-align: center;
  letter-spacing: 0.5px; /* Межбуквенное расстояние */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* Тень текста */
  
  /* Мотивирующая анимация */
  animation: 
    slideUpFade 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards,
    motivatingPulse 3s ease-in-out infinite 1s; /* Начинается через 1 сек после появления */
}

.btn-add-to-cart:hover {
  transform: translateX(-50%) translateY(-4px) scale(1.02); /* Увеличиваем и поднимаем */
  background: linear-gradient(135deg, rgba(59, 130, 246, 1), rgba(37, 99, 235, 1)); /* СИНИЙ при hover */
  box-shadow: 
    0 12px 40px rgba(59, 130, 246, 0.4), /* СИНЯЯ тень */
    0 6px 20px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  animation-play-state: paused; /* Останавливаем пульсацию при hover */
}

.btn-add-to-cart:active {
  transform: translateX(-50%) translateY(-2px) scale(0.98); /* Эффект нажатия */
  transition: all 0.1s ease;
}

/* Показываем большую кнопку ТОЛЬКО на странице товара */
#product-page:not(.hidden) .btn-add-to-cart {
  display: block !important;
  /* Анимация уже определена в основном классе */
}

/* Анимация появления кнопки снизу */
@keyframes slideUpFade {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* Мотивирующая анимация пульсации и свечения */
@keyframes motivatingPulse {
  0%, 100% {
    transform: translateX(-50%) translateY(0) scale(1);
    box-shadow: 
      0 8px 32px rgba(59, 130, 246, 0.3), /* СИНЯЯ тень */
      0 4px 16px rgba(0, 0, 0, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }
  
  50% {
    transform: translateX(-50%) translateY(-2px) scale(1.03);
    box-shadow: 
      0 12px 40px rgba(59, 130, 246, 0.5), /* СИНЯЯ тень - усиливаем свечение */
      0 6px 20px rgba(0, 0, 0, 0.15),
      inset 0 1px 0 rgba(255, 255, 255, 0.3),
      0 0 20px rgba(59, 130, 246, 0.4); /* СИНЕЕ внешнее свечение */
  }
}

/* В Telegram WebApp адаптируем под новый дизайн */
body[data-telegram="true"] .btn-add-to-cart,
.tg-viewport .btn-add-to-cart {
  bottom: 105px; /* Поднимаем выше в Telegram */
  padding: 16px 36px; /* Чуть меньше для мобильного */
  font-size: 16px;
  min-width: 260px; /* Чуть уже для мобильного */
  border-radius: 28px;
  backdrop-filter: blur(15px); /* Меньше размытия на мобильном */
  -webkit-backdrop-filter: blur(15px);
}

/* 🎨 СОВРЕМЕННОЕ МОДАЛЬНОЕ ОКНО ВЫБОРА КОЛИЧЕСТВА */

.modern-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  animation: modalFadeIn 0.3s ease-out;
}

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

.modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.modern-modal-content {
  position: relative;
  background: white;
  border-radius: 24px;
  width: 90%;
  max-width: 450px;
  max-height: 80vh;
  overflow: hidden;
  box-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.3),
    0 8px 32px rgba(0, 0, 0, 0.15);
  animation: modalSlideUp 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Заголовок модального окна */
.modern-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 24px 20px 24px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.product-mini-info {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
}

.modal-product-thumb {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  object-fit: cover;
  border: 2px solid rgba(0, 0, 0, 0.05);
}

.modal-product-details h3 {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 4px 0;
  line-height: 1.3;
}

.modal-product-details p {
  font-size: 14px;
  color: #666;
  margin: 0;
}

.modern-modal-close {
  width: 40px;
  height: 40px;
  border: none;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #666;
  flex-shrink: 0;
}

.modern-modal-close:hover {
  background: rgba(0, 0, 0, 0.1);
  transform: scale(1.05);
}

/* Секция выбора количества */
.quantity-selector-section {
  padding: 24px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.quantity-label {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 16px;
}

.quantity-input-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: #f8f9fa;
  border-radius: 16px;
  padding: 8px;
  border: 2px solid rgba(0, 0, 0, 0.05);
  transition: border-color 0.3s ease;
}

.quantity-input-group:focus-within {
  border-color: #007bff;
  box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.1);
}

.quantity-btn {
  width: 48px;
  height: 48px;
  border: none;
  background: white;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #007bff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.quantity-btn:hover {
  background: #007bff;
  color: white;
  transform: scale(1.05);
}

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

.quantity-input {
  flex: 1;
  border: none;
  background: transparent;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  color: #000 !important; /* Фиксированный черный - видно в любой теме */
  padding: 12px 16px;
  margin: 0 8px;
  border-radius: 12px;
  transition: background-color 0.2s ease;
  min-width: 80px;
  /* Фиксированный синий курсор */
  caret-color: #007bff;
}

.quantity-input::selection {
  background-color: var(--tg-theme-link-color, #007bff);
  color: #fff;
}

.quantity-input:focus {
  outline: none;
  background: #f5f5f5;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2);
}

/* Секция информации о цене */
.price-info-section {
  padding: 24px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.price-breakdown {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.price-label {
  font-size: 16px;
  color: #666;
}

.price-value {
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
}

.total-row {
  padding-top: 12px;
  border-top: 2px solid rgba(0, 0, 0, 0.1);
}

.total-row .price-label {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a1a;
}

.total-price {
  font-size: 16px; /* УМЕНЬШИЛ С 22px */
  font-weight: 700; /* ЧУТЬ МЕНЬШЕ ВЕС */
  color: #007bff;
}

.savings-row {
  background: linear-gradient(135deg, #d4edda, #c3e6cb);
  padding: 12px 16px;
  border-radius: 12px;
  margin-top: 8px;
}

.savings-label {
  font-size: 14px;
  font-weight: 600;
  color: #155724;
}

.savings-value {
  font-size: 16px;
  font-weight: 700;
  color: #28a745;
}

/* Кнопка добавления в корзину */
.modal-actions {
  padding: 24px;
  background: white;
}

.btn-add-to-cart-full {
  width: 100%;
  padding: 18px 24px;
  border: none;
  background: linear-gradient(135deg, #007bff, #0056b3);
  color: white;
  border-radius: 18px;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 6px 20px rgba(0, 123, 255, 0.3);
  position: relative;
  overflow: hidden;
}

.btn-add-to-cart-full:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 123, 255, 0.4);
  background: linear-gradient(135deg, #0056b3, #004085);
}

.btn-add-to-cart-full:active {
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
}

.btn-add-to-cart-full::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.btn-add-to-cart-full:hover::before {
  left: 100%;
}

/* Анимации */
@keyframes modalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

/* Адаптивность */
@media (max-width: 480px) {
  .modern-modal-content {
    width: 95%;
    max-height: 85vh;
    border-radius: 20px;
  }
  
  .modern-modal-header {
    padding: 20px 20px 16px 20px;
  }
  
  .modal-product-thumb {
    width: 50px;
    height: 50px;
  }
  
  .modal-product-details h3 {
    font-size: 16px;
  }
  
  .quantity-selector-section,
  .price-info-section,
  .modal-actions {
    padding: 20px;
  }
  
  .btn-add-to-cart-full {
    padding: 16px 20px;
    font-size: 16px;
    border-radius: 16px;
  }
  
  .quantity-btn {
    width: 44px;
    height: 44px;
  }
  
  .quantity-input {
    font-size: 18px;
    min-width: 70px;
  }
}

/* 🛒 СОВРЕМЕННАЯ КОРЗИНА */

.modern-cart-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  margin: 0 -20px 16px -20px; /* Растягиваем на всю ширину */
  background: white;
  border-radius: 0; /* Убираем скругления для полноэкранного вида */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  border-left: none;
  border-right: none;
  border-top: none;
  transition: all 0.3s ease;
}

.modern-cart-item:hover {
  background: #fafafa;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Контейнер корзины */
.cart-content {
  padding-bottom: 120px; /* Отступ для фиксированного футера */
}

.cart-items {
  padding: 0; /* Убираем внутренние отступы */
  padding-bottom: 320px !important; /* 🔧 Отступ снизу чтобы последний товар не перекрывался футером */
}

.cart-item-image {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: 16px;
  overflow: hidden;
  background: #f8f9fa;
  border: 2px solid rgba(0, 0, 0, 0.05);
}

.cart-item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.cart-item-image:hover img {
  transform: scale(1.05);
}

.cart-item-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.cart-item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

/* Новая структура шапки карточки */
.cart-item-header-new {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.cart-item-title-line {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.unit-price-inline {
  font-size: 13px;
  color: #28a745;
  font-weight: 600;
  margin-top: 2px;
}

.cart-item-name {
  font-size: 16px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0;
  line-height: 1.4;
  flex: 1;
  min-width: 0;
  word-wrap: break-word;
}

.cart-item-remove {
  width: 32px;
  height: 32px;
  border: none;
  background: rgba(220, 53, 69, 0.1);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #dc3545;
  flex-shrink: 0;
}

.cart-item-remove:hover {
  background: #dc3545;
  color: white;
  transform: scale(1.1);
}

.cart-item-price-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.unit-price {
  font-size: 14px;
  color: #666;
  font-weight: 500;
}

.total-price {
  font-size: 14px; /* УМЕНЬШИЛ С 18px */
  font-weight: 600; /* МЕНЬШЕ ВЕС */
  color: #007bff;
}

.cart-quantity-controls {
  display: flex;
  align-items: center;
  gap: 0;
  background: #f8f9fa;
  border-radius: 14px;
  padding: 6px;
  border: 2px solid rgba(0, 0, 0, 0.05);
  width: fit-content;
}

/* Новая структура контролов количества */
.cart-quantity-controls-new {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 12px;
  gap: 16px;
  margin-left: -20px; /* Сдвигаем весь блок левее */
  padding-left: 20px;
}

.quantity-controls-left {
  display: flex;
  align-items: center;
  gap: 0;
  background: #f8f9fa;
  border-radius: 14px;
  padding: 6px;
  border: 2px solid rgba(0, 0, 0, 0.05);
  width: fit-content;
  /* Убираем ограничение ширины */
}

.quantity-controls-right {
  flex-shrink: 0;
}

.total-price-inline {
  font-size: 16px;
  font-weight: 700;
  color: #007bff;
  background: linear-gradient(135deg, rgba(0, 123, 255, 0.1), rgba(0, 123, 255, 0.05));
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(0, 123, 255, 0.2);
}

.quantity-btn-modern {
  width: 36px;
  height: 36px;
  border: none;
  background: white;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #007bff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.quantity-btn-modern:hover {
  background: #007bff;
  color: white;
  transform: scale(1.05);
}

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

.quantity-input-modern {
  width: 50px;
  border: 1px solid transparent;
  background: transparent;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: #1a1a1a;
  padding: 8px 4px;
  margin: 0 4px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  -moz-appearance: textfield; /* Убираем стрелочки в Firefox */
}

/* Убираем стрелочки в Chrome/Safari/Edge */
.quantity-input-modern::-webkit-outer-spin-button,
.quantity-input-modern::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.quantity-input-modern:hover {
  background: rgba(0, 123, 255, 0.05);
  border-color: rgba(0, 123, 255, 0.2);
}

.quantity-input-modern:focus {
  outline: none;
  background: rgba(0, 123, 255, 0.1);
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);
}

.quantity-display {
  min-width: 60px;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: #1a1a1a;
  padding: 8px 4px;
  margin: 0 4px;
}

/* Адаптивность для корзины */
@media (max-width: 480px) {
  .modern-cart-item {
  padding: 16px;
  gap: 12px;
}

  .cart-item-image {
    width: 60px;
    height: 60px;
  }
  
  .cart-item-name {
    font-size: 15px;
  }
  
  .cart-item-remove {
    width: 28px;
    height: 28px;
  }
  
  .total-price {
  font-size: 13px; /* ЕЩЁ МЕНЬШЕ ДЛЯ МОБИЛЬНЫХ */
  }
  
  .quantity-btn-modern {
    width: 32px;
    height: 32px;
  }
  
  .quantity-input-modern {
    width: 40px;
    font-size: 14px;
  }
}

/* Пустая корзина */
.empty-cart {
  text-align: center;
  padding: 60px 20px;
  color: #666;
}

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

.empty-cart h3 {
  font-size: 24px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 12px 0;
}

.empty-cart p {
  font-size: 16px;
  margin: 0 0 32px 0;
  color: #666;
}

.btn-browse {
  background: linear-gradient(135deg, #007bff, #0056b3);
  color: white;
  border: none;
  padding: 16px 32px;
  border-radius: 16px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 16px rgba(0, 123, 255, 0.3);
}

.btn-browse:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 123, 255, 0.4);
}

/* 🚀 СОВРЕМЕННЫЙ ФУТЕР КОРЗИНЫ */
.modern-cart-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999; /* УВЕЛИЧИЛ z-index */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  min-height: 80px; /* МИНИМАЛЬНАЯ ВЫСОТА */
}

/* Когда footer НЕ скрыт - показываем его принудительно */
.modern-cart-footer:not(.hidden) {
  display: block !important;
}

/* Специальные стили для Telegram WebApp */
body[data-telegram="true"] .modern-cart-footer {
  bottom: 100px; /* ЕЩЁ ВЫШЕ - БЫЛО 80px */
  z-index: 10000;
}

.cart-footer-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, 
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.98) 100%);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.cart-footer-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: 16px 20px;
  gap: 16px; /* Увеличили gap между строками */
  max-width: 500px;
  margin: 0 auto;
}

/* Верхняя строка с двумя колонками */
.cart-footer-top-row {
  display: flex;
  align-items: stretch;
  gap: 16px;
}

.cart-footer-divider {
  width: 2px;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(102, 94, 234, 0.15) 10%,
    rgba(102, 94, 234, 0.25) 50%,
    rgba(102, 94, 234, 0.15) 90%,
    transparent
  );
  border-radius: 2px;
  flex-shrink: 0;
  box-shadow: 0 0 8px rgba(102, 94, 234, 0.1);
}

.cart-total-section {
  flex: 1;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px 12px;
  background: linear-gradient(135deg, rgba(0, 123, 255, 0.03) 0%, rgba(0, 86, 179, 0.03) 100%);
  border-radius: 12px;
  border: 1px solid rgba(0, 123, 255, 0.12);
  transition: all 0.3s ease;
}

.total-label {
  font-size: 13px;
  color: #4a5568;
  font-weight: 600;
  margin-bottom: 2px;
  letter-spacing: -0.01em;
}

/* Информационная иконка рядом с "Итого к оплате" */
.bonus-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
  opacity: 0.6;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
  vertical-align: middle;
}

.bonus-info-icon svg {
  display: block;
  color: #667eea;
}

.bonus-info-icon:hover {
  opacity: 1;
  transform: scale(1.15);
}

.bonus-info-icon:active {
  transform: scale(0.95);
}

.total-amount {
  font-size: 26px;
  font-weight: 900;
  background: linear-gradient(135deg, #0066cc 0%, #004999 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-shadow: 0 2px 4px rgba(0, 102, 204, 0.15);
}

.total-items {
  font-size: 12px;
  color: #718096;
  margin-top: 3px;
  font-weight: 500;
}

/* 📦 МИНИ-ИНФО О ДОСТАВКЕ (компактная строка) */
.delivery-mini-info {
  font-size: 11px;
  color: #a0aec0;
  margin-top: 4px;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.3;
}

/* ============================================
   🎨 КОМПАКТНЫЙ GRID-ФУТЕР (ВАРИАНТ 3)
   ============================================ */
.cart-footer-compact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

/* ЛЕВАЯ КОЛОНКА: Итого */
.cart-total-compact {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: linear-gradient(135deg, rgba(0, 123, 255, 0.04) 0%, rgba(0, 86, 179, 0.04) 100%);
  border-radius: 10px;
  border: 1px solid rgba(0, 123, 255, 0.15);
}

.total-main {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.total-label-compact {
  font-size: 12px;
  font-weight: 600;
  color: #4a5568;
}

.total-amount-compact {
  font-size: 20px;
  font-weight: 800;
  background: linear-gradient(135deg, #0066cc 0%, #004999 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}

.total-details-compact {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
  color: #4a5568;
  font-weight: 500;
  margin-top: 4px;
}

.delivery-mini-compact {
  font-size: 12px;
  color: #667eea;
  font-weight: 500;
}

/* ПРАВАЯ КОЛОНКА: Бонусы (компактная версия) */
.bonuses-compact-grid {
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: none;
}

.bonuses-compact-grid .cart-bonuses-inline {
  width: 100%;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
  border-radius: 10px;
  border: 1px solid rgba(102, 126, 234, 0.18);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.bonuses-compact-grid .bonus-checkbox-inline {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  padding: 0;
}

.bonuses-compact-grid .bonus-text-wrapper {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  flex: 1;
}

.bonuses-compact-grid .bonus-label {
  font-size: 12px;
  font-weight: 600;
  color: #2d3748;
  line-height: 1.2;
}

.bonuses-compact-grid .bonus-amount-inline {
  font-size: 11px;
  color: #667eea;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
}


.bonuses-compact-grid .cart-bonuses-inline.disabled {
  opacity: 0.6;
}

.bonuses-compact-grid .cart-bonuses-inline.disabled .bonus-label {
  color: #a0aec0;
}

.bonuses-compact-grid .cart-bonuses-inline.disabled .bonus-amount-inline {
  color: #a0aec0;
}

.bonuses-compact-grid .checkbox-mark {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Адаптация для мобильных */
@media (max-width: 480px) {
  .cart-footer-compact-grid {
    gap: 10px;
  }
  
  .total-amount-compact {
    font-size: 18px;
  }
  
  .total-label-compact {
    font-size: 11px;
  }
  
  .total-details-compact {
    font-size: 11px;
  }
  
  .bonuses-compact-grid .bonus-label {
    font-size: 11px;
  }
  
  .bonuses-compact-grid .bonus-amount-inline {
    font-size: 10px;
  }
}

.btn-checkout-modern {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 24px;
  background: linear-gradient(135deg, #007bff, #0056b3);
  color: white;
  border: none;
  border-radius: 16px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 100%; /* Кнопка на всю ширину */
  box-shadow: 0 4px 16px rgba(0, 123, 255, 0.3);
  position: relative;
  overflow: hidden;
}

.btn-checkout-modern:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 123, 255, 0.4);
  background: linear-gradient(135deg, #0056b3, #004085);
}

.btn-checkout-modern:active {
  transform: translateY(0);
}

.checkout-emoji {
  font-size: 18px;
  animation: rocketPulse 2s ease-in-out infinite;
}

.checkout-text {
  font-weight: 700;
}

.checkout-arrow {
  font-size: 16px;
  transition: transform 0.3s ease;
}

.btn-checkout-modern:hover .checkout-arrow {
  transform: translateX(4px);
}

.btn-checkout-modern::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.btn-checkout-modern:hover::before {
  left: 100%;
}

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

/* 🔄 Индикатор загрузки на кнопке */
.checkout-loader {
  /* По умолчанию скрыт - управляется через JavaScript */
  align-items: center;
  justify-content: center;
  margin-left: 8px;
}

.checkout-loader .spinner {
  width: 20px;
  height: 20px;
  animation: rotate 1s linear infinite;
}

.checkout-loader .path {
  stroke: white;
  stroke-linecap: round;
  animation: dash 1.5s ease-in-out infinite;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes dash {
  0% {
    stroke-dasharray: 1, 150;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -124;
  }
}

/* Кнопка в состоянии загрузки */
.btn-checkout-modern.loading {
  opacity: 0.8;
  cursor: wait;
  pointer-events: none;
}

.btn-checkout-modern.loading .checkout-emoji,
.btn-checkout-modern.loading .checkout-arrow {
  opacity: 0.5;
}

/* Адаптивность футера */
@media (max-width: 480px) {
  .cart-footer-content {
    padding: 14px 16px;
  gap: 12px;
}

  .total-amount {
    font-size: 20px;
  }
  
  .btn-checkout-modern {
    padding: 12px 20px;
    font-size: 15px;
  }
  
  .checkout-emoji {
  font-size: 16px;
  }
}

/* Кнопки */
.btn-primary {
  background: #007bff;
  color: white;
  border: none;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.btn-primary:hover {
  background: #0056b3;
}

.btn-primary:disabled {
  background: #ccc;
  cursor: not-allowed;
}

/* Модальное окно */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
}

.modal-content {
  background-color: white;
  margin: 10% auto;
  padding: 0;
  border-radius: 12px;
  width: 90%;
  max-width: 400px;
  max-height: 80vh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #eee;
}

.modal-header h3 {
  margin: 0;
  font-size: 18px;
  color: #333;
}

.modal-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #999;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-close:hover {
  color: #333;
}

.quantity-options {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.quantity-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border: 1px solid #ddd;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
}

.quantity-option:hover {
  background: #f8f9fa;
  border-color: #007bff;
}

.quantity-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.quantity-info .quantity {
  font-weight: 600;
  font-size: 16px;
  color: #333;
}

.quantity-info .unit-price {
  color: #666;
  font-size: 14px;
}

.total-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.total-info .total {
  font-weight: 600;
  color: #007bff;
  font-size: 16px;
}

.total-info .savings {
  color: #28a745;
  font-size: 12px;
}

/* Корзина */
.cart-content {
  padding: 20px;
}

.empty-cart {
  text-align: center;
  padding: 40px 20px;
  color: #666;
}

.empty-cart img {
  width: 80px;
  height: 80px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.cart-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  margin-bottom: 12px;
}

.cart-item img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 8px;
}

.cart-item-info {
  flex: 1;
}

.cart-item-info h4 {
  margin: 0 0 4px 0;
  font-size: 16px;
  color: #333;
}

.cart-item-info p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

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

.quantity-controls button {
  width: 32px;
  height: 32px;
  border: 1px solid #ddd;
  background: white;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  transition: background-color 0.3s;
}

.quantity-controls button:hover {
  background: #f8f9fa;
}

.quantity-controls span {
  min-width: 24px;
  text-align: center;
  font-weight: 600;
}

.cart-item-total {
  font-weight: 600;
  color: #007bff;
  min-width: 60px;
  text-align: right;
}

.btn-remove {
  background: none;
  border: none;
  color: #dc3545;
  font-size: 20px;
  cursor: pointer;
  padding: 4px;
  transition: color 0.3s;
}

.btn-remove:hover {
  color: #c82333;
}

.cart-footer {
  position: sticky;
  bottom: 0;
  background: white;
  padding: 20px;
  border-top: 1px solid #eee;
  margin-top: 20px;
}

.cart-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  font-size: 18px;
  font-weight: 600;
}

/* Оформление заказа */
.checkout-summary {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 12px;
  margin-bottom: 20px;
}

.checkout-summary h3 {
  margin-bottom: 16px;
  font-size: 18px;
  color: #333;
}

.checkout-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.checkout-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: white;
  border-radius: 8px;
}

.checkout-item img {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 6px;
}

.checkout-item-details {
  flex: 1;
}

.checkout-item-details h4 {
  margin: 0 0 4px 0;
  font-size: 14px;
  color: #333;
}

.checkout-item-details p {
  margin: 0;
  color: #666;
  font-size: 12px;
}

.checkout-item-price {
  font-weight: 600;
  color: #007bff;
}

.checkout-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  font-weight: 600;
  border-top: 1px solid #ddd;
  padding-top: 12px;
}

.checkout-form {
  background: white;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.delivery-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

.tab-button {
  flex: 1;
  padding: 12px;
  background: #f8f9fa;
  border: 1px solid #ddd;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s;
}

.tab-button.active {
  background: #007bff;
  color: white;
  border-color: #007bff;
}

.delivery-form {
  display: none;
}

.delivery-form.active {
  display: block;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #333;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 16px;
  font-family: inherit;
  line-height: 1.5;
  /* Фиксированный светло-серый фон для видимости в темной теме */
  background-color: #f5f5f5;
  color: #000;
  caret-color: #007bff;
}

/* Стили выделения текста для темной темы */
.form-group input::selection,
.form-group textarea::selection {
  background-color: var(--tg-theme-link-color, #007bff);
  color: #fff;
}

.form-group textarea {
  resize: vertical;
  min-height: 80px;
}

.radio-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.radio-group label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: normal;
  cursor: pointer;
}

.radio-group input[type="radio"] {
  width: auto;
  margin: 0;
}

/* FAQ */
.faq-content {
  padding: 20px;
}

.faq-section {
  margin-bottom: 24px;
}

.faq-section h3 {
  font-size: 18px;
  margin-bottom: 16px;
  color: #333;
  padding-bottom: 8px;
  border-bottom: 2px solid #007bff;
}

.faq-item {
  margin-bottom: 12px;
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
}

.faq-question {
  padding: 16px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  background: #f8f9fa;
  transition: background-color 0.3s;
}

.faq-question:hover {
  background: #e9ecef;
}

.faq-toggle {
  font-size: 20px;
  color: #007bff;
  font-weight: 600;
}

.faq-answer {
  display: none;
  padding: 16px;
  background: white;
  border-top: 1px solid #eee;
  color: #666;
  line-height: 1.6;
}

/* Профиль */
.profile-content {
  padding: 20px;
}

.profile-info {
  text-align: center;
  margin-bottom: 24px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 12px;
}

.profile-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-bottom: 16px;
  object-fit: cover;
}

.profile-info h3 {
  margin-bottom: 16px;
  color: #333;
}

.profile-sections {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.profile-section {
  background: white;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.profile-section h4 {
  margin-bottom: 16px;
  color: #333;
}

.profile-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.profile-section li {
  padding: 12px 0;
  border-bottom: 1px solid #eee;
}

.profile-section li:last-child {
  border-bottom: none;
}

.profile-section a {
  color: #333;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: color 0.3s;
}

.profile-section a:hover {
  color: #007bff;
}

.profile-section a::after {
  content: "→";
  color: #999;
}

/* Нижнее меню */
.bottom-menu {
  position: fixed;
  bottom: 5px;
  left: 0;
  width: 100%;
  background: white;
  display: flex;
  border-top: 1px solid #eee;
  padding: 12px 0;
  z-index: 100;
  transition: transform 0.3s ease;
}

/* УБРАНА ВСЯ ЛОГИКА СКРЫТИЯ МЕНЮ - ПУСТЬ РАБОТАЕТ СТАНДАРТНО */

.bottom-menu button {
  flex: 1;
  background: none;
  border: none;
  padding: 12px 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: #999;
  font-size: 13px;
  position: relative;
  transition: none; /* Убираем transition для мгновенного переключения */
}

.bottom-menu button.active {
  color: #007bff;
}

.bottom-menu button[data-tab="profile-page"].active img {
  outline: 2.5px solid #007bff;
  outline-offset: 1px;
  border-radius: 50%;
}

.bottom-menu button img {
  width: 28px;
  height: 28px;
  transition: none; /* Убираем transition для мгновенного переключения иконок */
}

.bottom-menu button span {
  font-size: 12px;
}

.cart-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #dc3545;
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 12px;
  font-weight: 600;
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 20px;
}

.cart-badge.show {
  display: flex;
}

/* 🔔 TELEGRAM-АДАПТИРОВАННЫЕ УВЕДОМЛЕНИЯ */
.notification {
  position: fixed;
  top: 80px; /* Отступ от верха для Telegram */
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px);
  padding: 16px 20px;
  border-radius: 16px;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.08);
  z-index: 10000;
  max-width: calc(100vw - 40px);
  width: 90%;
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  border-left: 4px solid #007bff;
  display: flex;
  align-items: center;
  gap: 12px;
}

.notification.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.notification.notification-success {
  border-left-color: #28a745;
  background: linear-gradient(135deg, rgba(40, 167, 69, 0.05), rgba(255, 255, 255, 0.98));
}

.notification.notification-error {
  border-left-color: #dc3545;
  background: linear-gradient(135deg, rgba(220, 53, 69, 0.05), rgba(255, 255, 255, 0.98));
}

.notification.notification-info {
  border-left-color: #17a2b8;
  background: linear-gradient(135deg, rgba(23, 162, 184, 0.05), rgba(255, 255, 255, 0.98));
}

.notification.notification-warning {
  border-left-color: #ffc107;
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.05), rgba(255, 255, 255, 0.98));
}

.notification-icon {
  font-size: 20px;
  flex-shrink: 0;
  animation: notificationPulse 0.6s ease-out;
}

.notification-message {
  flex: 1;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: #1a1a1a;
  white-space: pre-line;
}

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

/* Анимация для поля с ошибкой */
@keyframes fieldError {
  0%, 100% { 
    border-color: #ff4444;
    box-shadow: 0 0 0 0 rgba(255, 68, 68, 0.4);
  }
  50% { 
    border-color: #ff4444;
    box-shadow: 0 0 0 8px rgba(255, 68, 68, 0.1);
  }
}

/* Стили для двуязычного автокомплита городов */
.autocomplete-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: background-color 0.2s;
}

.autocomplete-item:hover {
  background-color: #f8f9fa;
}

.autocomplete-item:last-child {
  border-bottom: none;
}

.city-name {
  font-weight: 500;
  color: #333;
  font-size: 15px;
}

.city-type {
  font-size: 12px;
  color: #666;
  background: #e9ecef;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 400;
}

.no-results {
  color: #999;
  font-style: italic;
  text-align: center;
  padding: 16px;
}

/* Адаптация для маленьких экранов */
@media (max-width: 480px) {
  .notification {
    top: 70px;
    margin: 0 20px;
    min-width: auto;
    width: calc(100vw - 40px);
    padding: 14px 16px;
  }
  
  .notification-message {
    font-size: 14px;
  }
  
  .notification-icon {
    font-size: 18px;
  }
}

/* Для Telegram WebApp */
body[data-telegram="true"] .notification {
  top: 90px; /* Больший отступ в Telegram */
}

@media (max-width: 480px) {
  body[data-telegram="true"] .notification {
    top: 80px;
  }
}

/* 💰 МАРКЕТИНГОВЫЕ ЭЛЕМЕНТЫ КОРЗИНЫ */

/* Блок экономии для товара */
.cart-item-savings {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  padding: 8px 12px;
  background: linear-gradient(135deg, rgba(40, 167, 69, 0.1), rgba(40, 167, 69, 0.05));
  border-radius: 12px;
  border-left: 3px solid #28a745;
}

.savings-badge {
  font-size: 12px;
  font-weight: 700;
  color: #28a745;
  background: rgba(40, 167, 69, 0.15);
  padding: 4px 8px;
  border-radius: 8px;
}

.savings-amount {
  font-size: 13px;
  font-weight: 600;
  color: #28a745;
}

/* Компактный блок экономии в карточке */
.cart-item-savings-compact {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 4px 8px;
  background: rgba(40, 167, 69, 0.1);
  border-radius: 8px;
  width: fit-content;
}

.cart-item-savings-compact .savings-icon {
  font-size: 12px;
}

.cart-item-savings-compact .savings-text {
  font-size: 12px;
  font-weight: 600;
  color: #28a745;
}

/* Персональная подсказка скидки для каждого товара */
.cart-item-discount-hint {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
  padding: 6px 10px;
  background: linear-gradient(135deg, rgba(0, 123, 255, 0.1), rgba(0, 123, 255, 0.05));
  border-radius: 10px;
  border-left: 3px solid #007bff;
  animation: hintPulse 2s ease-in-out infinite;
}

.hint-icon {
  font-size: 16px;
}

.hint-text {
  font-size: 12px;
  font-weight: 600;
  color: #007bff;
  flex: 1;
  text-align: center;
}

.hint-arrow {
  font-size: 14px;
  animation: arrowBounce 1.5s ease-in-out infinite;
}

@keyframes hintPulse {
  0%, 100% { 
    background: linear-gradient(135deg, rgba(0, 123, 255, 0.1), rgba(0, 123, 255, 0.05));
    border-left-color: #007bff;
  }
  50% { 
    background: linear-gradient(135deg, rgba(0, 123, 255, 0.15), rgba(0, 123, 255, 0.08));
    border-left-color: #0056b3;
  }
}

@keyframes arrowBounce {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(2px); }
}

/* Строка с подсказкой и кнопками */
.cart-controls-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  flex-wrap: wrap; /* Для адаптивности */
}

/* Инлайн подсказка скидки */
.cart-item-discount-hint-inline {
  flex: 1;
  min-width: 200px; /* Минимальная ширина для читаемости */
  padding: 8px 12px;
  background: linear-gradient(135deg, rgba(0, 123, 255, 0.08), rgba(0, 123, 255, 0.04));
  border-radius: 8px;
  border-left: 3px solid #007bff;
  display: flex;
  align-items: center;
  gap: 6px;
  animation: hintGlow 3s ease-in-out infinite;
}

.cart-item-discount-hint-inline .hint-icon {
  font-size: 14px;
  flex-shrink: 0;
  animation: diamondPulse 2s ease-in-out infinite;
}

.cart-item-discount-hint-inline .hint-text {
  font-size: 12px;
  line-height: 1.3;
  color: #007bff;
  font-weight: 500;
  flex: 1;
}

.hint-content {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.cart-item-discount-hint-improved .hint-icon {
  font-size: 16px;
  flex-shrink: 0;
  animation: diamondPulse 2s ease-in-out infinite;
}

.cart-item-discount-hint-improved .hint-text {
  font-size: 13px;
  line-height: 1.4;
  color: #007bff;
  font-weight: 500;
  flex: 1;
  word-wrap: break-word;
  hyphens: auto;
}

.cart-item-discount-hint-improved .hint-text strong {
  font-weight: 700;
  color: #0056b3;
}

@keyframes hintGlow {
  0%, 100% { 
    background: linear-gradient(135deg, rgba(0, 123, 255, 0.08), rgba(0, 123, 255, 0.04));
    border-left-color: #007bff;
  }
  50% { 
    background: linear-gradient(135deg, rgba(0, 123, 255, 0.12), rgba(0, 123, 255, 0.06));
    border-left-color: #0056b3;
  }
}

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

/* Старые стили большого блока экономии удалены - используется компактная версия в карточках */

/* Блок прогресса скидок */
.discount-progress-block {
  margin: 12px 0;
  padding: 12px;
  background: linear-gradient(135deg, rgba(0, 123, 255, 0.1), rgba(0, 123, 255, 0.05));
  border-radius: 16px;
  border-left: 4px solid #007bff;
}

.discount-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.discount-emoji {
  font-size: 20px;
  animation: truckMove 2s ease-in-out infinite;
}

.discount-text p {
  margin: 2px 0;
  font-size: 13px;
  color: #1a1a1a;
}

.next-price {
  color: #007bff;
  font-weight: 700;
}

.savings-preview {
  font-size: 11px;
  color: #28a745;
  font-weight: 600;
  margin-top: 6px;
  text-align: center;
}

/* Блок максимальной скидки */
.max-discount-achieved {
  background: linear-gradient(135deg, #ffc107, #ff9800);
  color: #1a1a1a;
  border-left-color: #28a745;
}

.max-discount-celebration {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.max-discount-celebration .celebration-text h3 {
  margin: 0 0 4px 0;
  font-size: 14px;
  font-weight: 700;
}

.max-discount-celebration .celebration-text p {
  margin: 0;
  font-size: 12px;
}

/* Блок информации о доставке (УДАЛЕН - заменен на скидки) */

/* Общие стили прогресс-бара (используется для скидок) */
.progress-bar {
  width: 100%;
  height: 6px;
  background: rgba(0, 123, 255, 0.2);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 6px;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #007bff, #0056b3);
  border-radius: 3px;
  transition: width 0.5s ease;
}

.celebration-emoji {
  font-size: 24px;
  animation: celebrationSpin 2s ease-in-out infinite;
}

/* Анимации (удалены неиспользуемые анимации больших блоков) */

@keyframes truckMove {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4px); }
}

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

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

/* Анимация изменения цены */
@keyframes priceChange {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); color: #28a745; }
  100% { transform: scale(1); }
}

.total-price.price-changed {
  animation: priceChange 0.6s ease-out;
}

/* Адаптивность для маркетинговых элементов */
@media (max-width: 480px) {
  .total-savings-block,
  .discount-progress-block {
    margin: 10px 0;
    padding: 10px 12px;
  }
  
  .savings-emoji,
  .celebration-emoji,
  .discount-emoji {
    font-size: 20px;
  }
  
  .total-savings-amount {
    font-size: 20px;
  }
  
  .savings-celebration,
  .discount-progress,
  .max-discount-celebration {
    gap: 10px;
  }
  
  .quantity-display {
    min-width: 50px;
    font-size: 14px;
  }
  
  .discount-text p {
    font-size: 12px;
  }
  
  .savings-preview {
    font-size: 10px;
  }
  
  .cart-item-discount-hint {
    padding: 5px 8px;
    margin-top: 4px;
  }
  
  .hint-text {
    font-size: 11px;
  }
  
  .hint-icon,
  .hint-arrow {
    font-size: 12px;
  }
  
  .cart-item-savings-compact {
    padding: 3px 6px;
    margin-top: 4px;
  }
  
  .cart-item-savings-compact .savings-icon {
    font-size: 11px;
  }
  
  .cart-item-savings-compact .savings-text {
    font-size: 11px;
  }
  
  .cart-item-discount-hint-improved {
    padding: 8px 10px;
    margin-top: 6px;
  }
  
  .cart-item-discount-hint-improved .hint-text {
    font-size: 12px;
    line-height: 1.3;
    word-spacing: 0.15em; /* Меньше отступы для мобильных */
    letter-spacing: 0.2px;
  }
  
  .cart-item-discount-hint-improved .hint-icon {
    font-size: 14px;
  }
  
  .hint-content {
    align-items: flex-start;
    min-height: 18px;
  }
  
  .cart-item-discount-hint-improved .hint-icon {
    margin-top: 1px;
  }
  
  .cart-item-discount-hint-improved {
    margin: 10px 0 6px -80px;
    padding: 10px 12px 10px 92px;
    border-radius: 0 10px 10px 0;
  }
  
  .cart-quantity-controls-new {
    gap: 12px;
    margin-left: -16px;
    padding-left: 16px;
  }
  
  .hint-content {
    align-items: flex-start;
    min-height: 18px;
  }
  
  .total-price-inline {
    font-size: 13px;
    padding: 6px 8px;
  }
  
  .unit-price-inline {
    font-size: 12px;
  }
  
  .cart-controls-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  
  .cart-item-discount-hint-inline {
    min-width: auto;
    padding: 6px 10px;
    margin-bottom: 4px;
  }
  
  .cart-item-discount-hint-inline .hint-text {
    font-size: 11px;
    line-height: 1.2;
  }
  
  .cart-item-discount-hint-inline .hint-icon {
    font-size: 12px;
  }
}

/* 🚀 ОБНОВЛЕННЫЙ SPLASH SCREEN */
#splash-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #5a67d8 100%);
  background-size: 400% 400%;
  animation: gradientShift 8s ease infinite;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  transition: opacity 0.5s ease;
}

#splash-screen.hidden {
  opacity: 0;
  pointer-events: none;
}

.splash-content {
  text-align: center;
  color: white;
  animation: fadeInUp 0.8s ease-out;
}

.splash-logo {
  margin-bottom: 40px;
}

.logo-container {
  display: inline-block;
  margin-bottom: 24px;
}

.loading-logo {
  width: 140px;
  height: auto;
  max-height: 140px;
  object-fit: contain;
  animation: logoFloat 2s ease-in-out infinite;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.4));
}

.splash-title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 48px;
  font-weight: 900;
  margin: 0 0 20px 0;
  color: #ffffff;
  text-shadow: 
    0 1px 0 rgba(255,255,255,0.3),
    0 2px 4px rgba(0,0,0,0.3),
    0 8px 16px rgba(0,0,0,0.2);
  letter-spacing: 3px;
  text-transform: uppercase;
  background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 50%, #ffffff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
}



.splash-subtitle {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 18px;
  margin: 0 0 50px 0;
  opacity: 0.95;
  font-weight: 400;
  letter-spacing: 1.2px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
  line-height: 1.5;
  color: rgba(255,255,255,0.9);
}

.loading-text {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  font-size: 16px;
  opacity: 0.9;
  margin-top: 20px;
  font-weight: 400;
  letter-spacing: 0.5px;
}

/* 🎨 АНИМАЦИИ */
@keyframes logoFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

@keyframes rocketBounce {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.1) rotate(5deg); }
}

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

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}



.sim-card {
  width: 80px;
  height: 60px;
  background: linear-gradient(135deg, #ffffff, #f0f0f0);
  border-radius: 8px;
  position: relative;
  animation: simCardFloat 2s ease-in-out infinite;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.sim-chip {
  width: 20px;
  height: 16px;
  background: linear-gradient(135deg, #ffd700, #ffed4e);
  border-radius: 2px;
  position: absolute;
  top: 12px;
  left: 12px;
  border: 1px solid #e6c200;
}

.splash-logo h1 {
  font-size: 32px;
  font-weight: 700;
  margin: 0;
  background: linear-gradient(135deg, #ffffff, #f0f0f0);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.splash-loading {
  margin-top: 20px;
}

.loading-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
}

.dot {
  width: 12px;
  height: 12px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  animation: dotPulse 1.4s ease-in-out infinite both;
}

.dot:nth-child(1) { animation-delay: -0.32s; }
.dot:nth-child(2) { animation-delay: -0.16s; }
.dot:nth-child(3) { animation-delay: 0s; }

.splash-loading p {
  font-size: 16px;
  margin: 0;
  opacity: 0.9;
  font-weight: 500;
}

/* Скрыть основной контент при показе splash */
body.splash-active .page,
body.splash-active .bottom-nav {
  display: none;
}

@keyframes simCardFloat {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(2deg); }
}

@keyframes dotPulse {
  0%, 80%, 100% { 
    transform: scale(0.8); 
    opacity: 0.5; 
  }
  40% { 
    transform: scale(1.2); 
    opacity: 1; 
  }
}

/* === НОВЫЙ ДИЗАЙН ПРОФИЛЯ ПО РИСУНКУ === */
.new-profile-header {
  padding: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  margin: 0 0 24px 0;
  border-radius: 20px;
}

.profile-user-section {
  text-align: center;
  margin-bottom: 20px;
}

.new-profile-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.3);
  margin-bottom: 10px;
}

.new-profile-name {
  color: white;
  font-size: 24px;
  font-weight: 600;
  margin: 0;
}

.medal-section {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 25px;
}

.medal-icon {
  font-size: 32px;
  flex-shrink: 0;
}

.medal-text-container {
  text-align: left;
}

.medal-name {
  color: white;
  font-size: 20px;
  font-weight: 600;
  margin: 0;
  line-height: 1.2;
}

.medal-subtitle {
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  margin: 2px 0 0 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 15px;
  margin-bottom: 25px;
}

.stat-block {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  padding: 15px 10px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.stat-block .stat-value {
  color: white;
  font-size: 18px;
  font-weight: 700;
  display: block;
  margin-bottom: 5px;
}

.stat-block .stat-label {
  color: rgba(255, 255, 255, 0.9);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.btn-details-full {
  width: 100%;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 15px;
  padding: 15px;
  color: white;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-details-full:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}

.btn-details-full .btn-icon {
  font-size: 20px;
}

.btn-details-full .btn-text {
  flex: 1;
  text-align: center;
}

.btn-details-full .btn-arrow {
  font-size: 18px;
  font-weight: bold;
}

/* ПРОФИЛЬ - СОВРЕМЕННЫЙ ДИЗАЙН (СТАРЫЙ) */
.profile-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 20px;
  border-radius: 20px;
  margin: 20px;
  margin-bottom: 20px;
}

/* УДАЛЕНЫ ЛИШНИЕ КНОПКИ СВЕРХУ */

.profile-user-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.profile-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.3);
  margin-bottom: 12px;
  object-fit: cover;
}

.profile-user-info h2 {
  margin: 0 0 12px 0;
  font-size: 24px;
  font-weight: 600;
}

.btn-edit-profile {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-edit-profile:hover {
  background: rgba(255, 255, 255, 0.3);
}

.profile-menu {
  padding: 0 20px;
}

.profile-menu-section {
  margin-bottom: 30px;
}

.profile-menu-section h3 {
  font-size: 16px;
  color: #666;
  margin: 0 0 15px 0;
  font-weight: 600;
}

.profile-menu-item {
  display: flex;
  align-items: center;
  padding: 16px;
  background: white;
  border-radius: 12px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.profile-menu-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.profile-menu-icon {
  font-size: 24px;
  width: 40px;
  text-align: center;
  margin-right: 16px;
}

.profile-menu-text {
  flex: 1;
}

.profile-menu-title {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 2px;
}

.profile-menu-subtitle {
  display: block;
  font-size: 13px;
  color: #666;
}

.profile-menu-arrow {
  font-size: 20px;
  color: #ccc;
  margin-left: 8px;
}

/* ИСТОРИЯ ЗАКАЗОВ */
.order-history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: white;
  border-bottom: 1px solid #eee;
  position: sticky;
  top: 0;
  z-index: 100;
}

.back-btn {
  background: none;
  border: none;
  font-size: 18px;
  color: #667eea;
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.back-btn:hover {
  background: rgba(102, 126, 234, 0.1);
}

.profile-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  color: #333;
}

.order-history-content {
  padding: 20px;
}

.order-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ПРЕМИУМ ДИЗАЙН ИСТОРИИ ЗАКАЗОВ */
.order-card-premium {
  background: linear-gradient(135deg, rgba(139, 69, 19, 0.1), rgba(255, 255, 255, 0.9));
  border-radius: 20px;
  padding: 20px;
  margin-bottom: 16px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.order-card-premium:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.order-card-premium:nth-child(2n) {
  background: linear-gradient(135deg, rgba(219, 112, 147, 0.1), rgba(255, 255, 255, 0.9));
}

.order-card-premium:nth-child(3n) {
  background: linear-gradient(135deg, rgba(70, 130, 180, 0.1), rgba(255, 255, 255, 0.9));
}

.order-header-premium {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.order-info-premium {
  display: flex;
  align-items: center;
  gap: 12px;
}

.order-emoji {
  font-size: 32px;
  animation: float 3s ease-in-out infinite;
}

.order-details-premium h3 {
  margin: 0 0 4px 0;
  font-size: 18px;
  font-weight: 700;
  color: #2c5530;
}

.order-date {
  font-size: 13px;
  color: #666;
  margin: 0;
}

.order-status-premium {
  font-size: 14px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(5px);
}

.order-summary-premium {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.order-total, .order-method {
  font-size: 14px;
  font-weight: 600;
  color: #2c5530;
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
}

/* КАРТА КЛИЕНТА */
.client-card-content {
  padding: 20px;
}

/* ИНФОРМАЦИОННЫЙ БЛОК О КЭШБЕКЕ */
.cashback-explanation-card {
  background: linear-gradient(135deg, #f8f9ff 0%, #e8f2ff 100%);
  border: 1px solid rgba(59, 130, 246, 0.1);
  border-radius: 20px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.08);
}

.explanation-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.explanation-icon {
  font-size: 28px;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  border-radius: 12px;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.explanation-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.3;
}

.explanation-content p {
  margin: 0 0 18px 0;
  font-size: 15px;
  line-height: 1.4;
  color: #475569;
}

.explanation-features {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: white;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(59, 130, 246, 0.1);
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  width: 100%;
  box-sizing: border-box;
}

.feature-icon {
  font-size: 20px;
  flex-shrink: 0;
}

/* Мобильная адаптация */
@media (max-width: 480px) {
  .cashback-explanation-card {
    padding: 16px;
    border-radius: 16px;
  }
  
  .explanation-header {
  gap: 10px;
    margin-bottom: 14px;
  }
  
  .explanation-icon {
    font-size: 24px;
    padding: 6px;
  border-radius: 10px;
  }
  
  .explanation-header h3 {
    font-size: 16px;
  }
  
  .explanation-content p {
    font-size: 14px;
    margin-bottom: 16px;
  }
  
  .explanation-features {
    gap: 10px;
  }
  
  .feature-item {
    padding: 12px 14px;
    gap: 10px;
    font-size: 13px;
  }
  
  .feature-icon {
    font-size: 18px;
  }
}

/* КОМПАКТНАЯ ШКАЛА ПРОГРЕССА */
.level-progress-compact {
  background: white;
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.progress-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.progress-levels {
  display: flex;
  align-items: center;
  gap: 8px;
}

.current-level {
  color: #1e293b;
  font-weight: 600;
  font-size: 14px;
}

.progress-arrow {
  color: #007bff;
  font-size: 16px;
  font-weight: bold;
  margin: 0 4px;
}

.next-level {
  color: #6366f1;
  font-weight: 600;
  font-size: 14px;
}

.progress-remaining {
  display: flex;
  align-items: center;
  gap: 4px;
}

.remaining-label {
  color: #64748b;
  font-size: 13px;
}

.remaining-value {
  color: #dc2626;
  font-weight: 700;
  font-size: 14px;
}

.progress-bar-compact {
  position: relative;
}

.progress-track-compact {
  background: #f1f5f9;
  height: 16px;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.progress-fill-compact {
  background: linear-gradient(90deg, #10b981, #059669);
  height: 100%;
  border-radius: 7px;
  position: relative;
  transition: width 0.8s ease;
}

.progress-fill-compact::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: compact-shimmer 2s infinite;
}

@keyframes compact-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 11px;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
}

@media (max-width: 768px) {
  .level-progress-compact {
    padding: 14px;
  }
  
  .progress-info-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  margin-bottom: 10px;
  }
  
  .progress-levels {
    align-self: stretch;
    justify-content: center;
  }
  
  .progress-remaining {
    align-self: center;
  }
  
  .current-level,
  .next-level {
    font-size: 13px;
  }
  
  .progress-arrow {
    font-size: 14px;
  }
  
  .progress-track-compact {
    height: 14px;
  }
  
  .progress-text {
    font-size: 10px;
  }
}

/* УЛУЧШЕННАЯ КАРТА ПРОГРАММЫ ЛОЯЛЬНОСТИ */
.card-chip {
  background: rgba(255, 255, 255, 0.2);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 16px;
  backdrop-filter: blur(10px);
  margin-left: auto;
}

.large-card-status-enhanced {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20px 0;
}

.status-medal-section {
  flex: 1;
}

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

.medal-icon {
  font-size: 48px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

.medal-info {
  display: flex;
  flex-direction: column;
}

.medal-name {
  color: white;
  font-size: 24px;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  line-height: 1;
}

.medal-subtitle {
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 400;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  margin-top: 2px;
}

.status-benefit-enhanced {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

.benefit-number-large {
  color: white;
  font-size: 36px;
  font-weight: 800;
  text-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
  line-height: 1;
}

.benefit-desc-enhanced {
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  margin-top: 4px;
}

/* АНИМАЦИЯ ЗАГРУЗКИ СКЕЛЕТОНА */
.loading-skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,0.1) 25%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.1) 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 4px;
  color: transparent !important;
}

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

/* АНИМАЦИЯ УСПЕШНОГО ЗАКАЗА */
.success-animation-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: fadeIn 0.3s ease;
}

.success-content {
  background: white;
  border-radius: 20px;
  padding: 30px;
  max-width: 350px;
  width: 90%;
  text-align: center;
  animation: slideUp 0.5s ease;
}

.success-icon {
  font-size: 60px;
  margin-bottom: 15px;
  animation: bounce 0.8s ease;
}

.success-content h3 {
  color: #1e293b;
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 20px 0;
}

.success-details {
  margin-bottom: 20px;
}

.success-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f1f5f9;
}

.success-item:last-child {
  border-bottom: none;
}

.success-label {
  color: #64748b;
  font-size: 14px;
}

.success-value {
  color: #10b981;
  font-weight: 600;
  font-size: 14px;
}

.success-progress {
  text-align: center;
}

.progress-text {
  color: #64748b;
  font-size: 13px;
  margin-bottom: 10px;
}

.progress-bar-success {
  background: #f1f5f9;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill-success {
  background: linear-gradient(90deg, #10b981, #059669);
  height: 100%;
  width: 0%;
  border-radius: 3px;
  animation: fillProgress 3s ease-out forwards;
}

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

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

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-10px); }
  60% { transform: translateY(-5px); }
}

@keyframes fillProgress {
  from { width: 0%; }
  to { width: 100%; }
}

/* ВСТРОЕННАЯ ШКАЛА ПРОГРЕССА В БОЛЬШОЙ КАРТЕ */
.integrated-progress-section {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.progress-header-integrated {
  text-align: center;
  margin-bottom: 12px;
}

.progress-levels-integrated {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

.progress-arrow-integrated {
  color: rgba(255, 255, 255, 0.8);
  font-size: 16px;
  font-weight: bold;
  margin: 0 4px;
}

.next-level-integrated {
  color: rgba(255, 255, 255, 0.7);
  font-weight: 600;
  font-size: 14px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.remaining-amount-integrated {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
}

.remaining-label-integrated {
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
}

.remaining-value-integrated {
  color: #FFD700;
  font-weight: 700;
  font-size: 14px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.current-level-integrated {
  color: #FFD700;
  font-weight: 700;
  font-size: 16px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.max-level-text {
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.progress-bar-integrated {
  position: relative;
}

.progress-track-integrated {
  background: rgba(255, 255, 255, 0.2);
  height: 16px;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.progress-fill-integrated {
  background: linear-gradient(90deg, #FFD700, #FFA500);
  height: 100%;
  border-radius: 7px;
  position: relative;
  transition: width 0.8s ease;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.progress-text-integrated {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: rgba(0, 0, 0, 0.8);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .integrated-progress-section {
    margin-top: 16px;
    padding-top: 16px;
  }
  
  .progress-levels-integrated {
    flex-direction: column;
    gap: 4px;
  }
  
  .current-level-integrated {
    font-size: 14px;
  }
  
  .max-level-text {
    font-size: 12px;
  }
  
  .progress-text-integrated {
  font-size: 11px;
  }
}

/* Делаем надписи статистики белыми */
.large-stat .stat-label {
  color: rgba(255, 255, 255, 0.8) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  font-weight: 500;
}

.large-stat .stat-value {
  color: white !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  font-weight: 700;
}

/* УРОВНИ КЭШБЕКА */
.cashback-levels-card {
  background: white;
  border-radius: 20px;
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.cashback-levels-card h3 {
  margin: 0 0 20px 0;
  font-size: 20px;
  font-weight: 700;
  color: #1e293b;
  text-align: center;
}

.levels-grid-modern {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.level-card-modern {
  background: white;
  border: none;
  border-radius: 20px;
  padding: 20px 16px;
  text-align: center;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.level-card-modern::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, transparent 0%, rgba(255,255,255,0.1) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.level-card-modern:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.level-card-modern:hover::before {
  opacity: 1;
}

.level-badge {
  font-size: 40px;
  margin-bottom: 16px;
  display: block;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
  transition: transform 0.3s ease;
}

.level-card-modern:hover .level-badge {
  transform: scale(1.1) rotate(5deg);
}

.level-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.level-title {
  font-size: 16px;
  font-weight: 800;
  color: white;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
  margin-bottom: 6px;
  line-height: 1.2;
  word-spacing: -1px;
}

.level-requirement {
  font-size: 13px;
  color: rgba(255,255,255,0.9);
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.level-benefit {
  font-size: 16px;
  font-weight: 700;
  color: white;
  margin-top: 8px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
  padding: 6px 12px;
  background: rgba(255,255,255,0.2);
  border-radius: 12px;
  backdrop-filter: blur(10px);
}

/* Специальные стили для уровней */
.wooden-modern {
  background: linear-gradient(135deg, #8b4513 0%, #a0522d 50%, #654321 100%);
}

.wooden-modern:hover {
  box-shadow: 0 20px 40px rgba(139, 69, 19, 0.4);
}

.bronze-modern {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 50%, #b45309 100%);
}

.bronze-modern:hover {
  box-shadow: 0 20px 40px rgba(217, 119, 6, 0.4);
}

.silver-modern {
  background: linear-gradient(135deg, #94a3b8 0%, #64748b 50%, #475569 100%);
}

.silver-modern:hover {
  box-shadow: 0 20px 40px rgba(100, 116, 139, 0.4);
}

.gold-modern {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%);
}

.gold-modern:hover {
  box-shadow: 0 20px 40px rgba(245, 158, 11, 0.4);
}

.platinum-modern {
  background: linear-gradient(135deg, #a855f7 0%, #8b5cf6 50%, #7c3aed 100%);
}

.platinum-modern:hover {
  box-shadow: 0 20px 40px rgba(139, 92, 246, 0.4);
}

/* Активный уровень */
.active-level {
  background: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%) !important;
  transform: scale(1.05);
  box-shadow: 0 12px 30px rgba(16, 185, 129, 0.4) !important;
}

.active-level:hover {
  transform: translateY(-8px) scale(1.07);
  box-shadow: 0 25px 50px rgba(16, 185, 129, 0.5) !important;
}

.active-level::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, #10b981, #059669, #047857, #10b981);
  border-radius: 22px;
  z-index: -1;
  animation: borderGlow 3s ease-in-out infinite;
}

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

.current-level-badge {
  position: absolute;
  top: -1px;
  right: -1px;
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 0 14px 0 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Мобильная адаптация для уровней кэшбека */
@media (max-width: 480px) {
  .client-card-content {
    padding: 16px;
  }
  
  .cashback-levels-card {
    padding: 20px;
    border-radius: 16px;
  }
  
  .cashback-levels-card h3 {
    font-size: 18px;
    margin-bottom: 16px;
  }
  
  .levels-grid-modern {
    gap: 12px;
  }
  
  .level-card-modern {
    padding: 20px 14px;
    border-radius: 16px;
  }
  
  .level-card-modern:hover {
    transform: translateY(-6px) scale(1.01);
  }
  
  .level-badge {
    font-size: 32px;
    margin-bottom: 12px;
  }
  
  .level-card-modern:hover .level-badge {
    transform: scale(1.05) rotate(3deg);
  }
  
  .level-title {
  font-size: 14px;
    line-height: 1.2;
    word-spacing: -1px;
  }
  
  .level-requirement {
    font-size: 12px;
  }
  
  .level-benefit {
    font-size: 14px;
    margin-top: 6px;
    padding: 5px 10px;
    border-radius: 10px;
  }
  
  .current-level-badge {
    font-size: 9px;
    padding: 3px 6px;
    border-radius: 0 14px 0 12px;
  }
  
  .active-level {
    transform: scale(1.03);
  }
  
  .active-level:hover {
    transform: translateY(-6px) scale(1.04);
  }
}

.client-card {
  background: linear-gradient(135deg, #c0c0c0, #e8e8e8);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 24px;
  color: #333;
  position: relative;
  overflow: hidden;
}

.client-card::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
  pointer-events: none;
}

.card-level {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 8px;
}

.card-discount {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
}

.card-progress {
  display: flex;
  align-items: center;
  gap: 12px;
}

.progress-bar {
  flex: 1;
  height: 8px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #4CAF50, #8BC34A);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.card-levels {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.level-item {
  display: flex;
  align-items: center;
  padding: 16px;
  background: white;
  border-radius: 12px;
  opacity: 0.6;
  transition: all 0.3s ease;
}

.level-item.active {
  opacity: 1;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.level-icon {
  font-size: 32px;
  margin-right: 16px;
}

.level-info h4 {
  margin: 0 0 4px 0;
  font-size: 16px;
  font-weight: 600;
}

.level-info p {
  margin: 0;
  font-size: 14px;
  color: #666;
}

/* РЕФЕРАЛЬНАЯ ПРОГРАММА */
.referral-content {
  padding: 20px;
}

.referral-card {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  margin-bottom: 24px;
}

.referral-card h3 {
  margin: 0 0 8px 0;
  font-size: 20px;
  font-weight: 600;
}

.referral-card p {
  margin: 0 0 20px 0;
  opacity: 0.9;
}

.referral-qr {
  background: white;
  border-radius: 12px;
  padding: 20px;
  margin: 20px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
}

.qr-placeholder {
  color: #666;
  font-size: 16px;
}

.btn-share {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  padding: 12px 24px;
  border-radius: 25px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-share:hover {
  background: rgba(255, 255, 255, 0.3);
}

.referral-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.stat-item {
  background: white;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.stat-number {
  font-size: 24px;
  font-weight: 700;
  color: #667eea;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: #666;
}

/* FAQ ПРЕМИУМ ДИЗАЙН 2025 - БЕЗ ПОИСКА */

/* КНОПКА ОБНОВЛЕНИЯ FAQ УБРАНА - АВТОМАТИЧЕСКОЕ ОБНОВЛЕНИЕ */

.faq-sections {
  padding: 20px;
  background: #f8f9fa;
}

.faq-section {
  margin-bottom: 32px;
}

.faq-section h3 {
  font-size: 20px;
  font-weight: 700;
  color: #2c3e50;
  margin: 0 0 20px 0;
  padding: 16px 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 16px;
  display: flex;
  align-items: center;
  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3);
}

.section-icon {
  margin-right: 12px;
  font-size: 24px;
}

.faq-item {
  background: white;
  border-radius: 16px;
  margin-bottom: 12px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  border: 1px solid #f1f3f4;
}

.faq-item:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

.faq-question {
  padding: 20px 24px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  color: #2c3e50;
  transition: all 0.3s ease;
  position: relative;
}

.faq-question::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 0 4px 4px 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.faq-item.active .faq-question::before {
  opacity: 1;
}

.question-text {
  flex: 1;
  font-size: 16px;
  line-height: 1.4;
}

.faq-question:hover {
  background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%);
}

.faq-toggle {
  font-size: 24px;
  color: #667eea;
  transition: all 0.3s ease;
  font-weight: 300;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(102, 126, 234, 0.1);
}

.faq-item.active .faq-toggle {
  transform: rotate(45deg);
  background: #667eea;
  color: white;
}

.faq-answer {
  padding: 0 24px 24px 24px;
  color: #4a5568;
  line-height: 1.7;
  display: none;
  animation: slideDown 0.3s ease;
  border-top: 1px solid #f1f3f4;
}

.faq-item.active .faq-answer {
  display: block;
}

.answer-content {
  font-size: 15px;
  padding-top: 16px;
}

/* ФОРМАТИРОВАНИЕ ТЕКСТА FAQ */
.faq-answer strong {
  color: #2c3e50;
  font-weight: 700;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.faq-answer em {
  color: #667eea;
  font-style: italic;
  font-weight: 500;
}

.faq-answer ul {
  margin: 16px 0;
  padding: 0;
  list-style: none;
}

.faq-answer li {
  padding: 8px 0 8px 32px;
  position: relative;
  color: #4a5568;
}

.faq-answer li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 8px;
  color: #10b981;
  font-weight: bold;
  font-size: 16px;
}

.check-mark {
  color: #10b981;
  font-size: 18px;
  margin: 0 4px;
}

.cross-mark {
  color: #ef4444;
  font-size: 18px;
  margin: 0 4px;
}

.warning-mark {
  color: #f59e0b;
  font-size: 18px;
  margin: 0 4px;
}

.emoji {
  font-size: 20px;
  margin: 0 4px;
  display: inline-block;
  animation: pulse 2s infinite;
}

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

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

.faq-error {
  text-align: center;
  padding: 60px 20px;
  color: #666;
  background: white;
  border-radius: 16px;
  margin: 20px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.error-icon {
  font-size: 64px;
  margin-bottom: 20px;
}

.faq-error h3 {
  margin: 0 0 12px 0;
  font-size: 20px;
  color: #2c3e50;
  font-weight: 600;
}

.faq-error p {
  margin: 0;
  font-size: 16px;
  color: #666;
}

.faq-no-results {
  text-align: center;
  padding: 60px 20px;
  color: #666;
  background: white;
  border-radius: 16px;
  margin: 20px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.no-results-icon {
  font-size: 64px;
  margin-bottom: 20px;
}

.faq-no-results h3 {
  margin: 0 0 12px 0;
  font-size: 20px;
  color: #2c3e50;
  font-weight: 600;
}

.faq-no-results p {
  margin: 0;
  font-size: 16px;
}

/* ПОИСК FAQ УБРАН ПО ПРОСЬБЕ ПОЛЬЗОВАТЕЛЯ */

/* ИЗБРАННОЕ */
.empty-favorites {
  text-align: center;
  padding: 60px 20px;
  color: #666;
}

.empty-favorites-icon {
  font-size: 64px;
  margin-bottom: 20px;
  animation: heartbeat 2s ease-in-out infinite;
}

.empty-favorites h3 {
  margin: 0 0 8px 0;
  font-size: 20px;
  color: #333;
}

.empty-favorites p {
  margin: 0 0 20px 0;
  font-size: 16px;
  color: #666;
}

.btn-browse {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 25px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-browse:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
}

.favorites-list {
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

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

/* КОРЗИНА */
.empty-cart {
  text-align: center;
  padding: 60px 20px;
  color: #666;
}

.empty-cart-icon {
  font-size: 64px;
  margin-bottom: 20px;
  animation: cartBounce 2s ease-in-out infinite;
}

.empty-cart h3 {
  margin: 0 0 8px 0;
  font-size: 20px;
  color: #333;
}

.empty-cart p {
  margin: 0 0 20px 0;
  font-size: 16px;
  color: #666;
}

.cart-items {
  padding: 20px;
  padding-bottom: 320px !important; /* 🔧 Отступ снизу чтобы последний товар не перекрывался футером */
}

.cart-item {
  background: white;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.cart-item img {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  object-fit: cover;
}

.cart-item-info {
  flex: 1;
}

.cart-item-info h4 {
  margin: 0 0 4px 0;
  font-size: 14px;
  font-weight: 600;
}

.cart-item-price {
  font-size: 16px;
  font-weight: 700;
  color: #667eea;
}

.cart-item-quantity {
  display: flex;
  align-items: center;
  gap: 8px;
}

.quantity-btn {
  width: 32px;
  height: 32px;
  border: 1px solid #ddd;
  background: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
}

.quantity-btn:hover {
  background: #667eea;
  color: white;
  border-color: #667eea;
}

.cart-footer {
  background: white;
  padding: 20px;
  border-top: 1px solid #eee;
  position: sticky;
  bottom: 80px;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
}

.cart-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  font-size: 18px;
  font-weight: 700;
}

@keyframes cartBounce {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

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

/* ДИАЛОГИ И УВЕДОМЛЕНИЯ */
.confirm-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: fadeIn 0.3s ease;
}

.confirm-dialog {
  background: white;
  border-radius: 16px;
  padding: 24px;
  max-width: 320px;
  width: 90%;
  text-align: center;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
}

.confirm-dialog h3 {
  margin: 0 0 12px 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.confirm-dialog p {
  margin: 0 0 20px 0;
  color: #666;
  line-height: 1.4;
}

.dialog-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.btn-cancel, .btn-confirm {
  padding: 10px 20px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
}

.btn-cancel {
  background: #f8f9fa;
  color: #666;
}

.btn-cancel:hover {
  background: #e9ecef;
}

.btn-confirm {
  background: #dc3545;
  color: white;
}

.btn-confirm:hover {
  background: #c82333;
}

/* Дублированные стили уведомлений удалены - используется основная Telegram-адаптированная версия выше */

/* СТИЛИ ДЛЯ КАРТОЧЕК ТОВАРОВ */
.product-card {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  /* height: 100%; УБРАНО - позволяет карточке быть высокой! */
}

/* ИСПРАВЛЕНО: Hover только для устройств с мышью */
@media (hover: hover) and (pointer: fine) {
  .product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  }
}

.product-image {
  position: relative;
  width: 100%;
  height: 180px;
  background: #f8f9fa;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible; /* ⭐ Бейдж может выходить за границы! */
}

.product-image img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #f8f9fa;
  padding: 0;
}

.product-badge {
  position: absolute;
  top: 165px; /* ⭐ По центру между картинкой и названием */
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  padding: 5px 10px; /* ⭐ Уменьшен padding */
  border-radius: 8px;
  font-size: 9px; /* ⭐ Уменьшен шрифт с 11px до 9px */
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap; /* ⭐ В одну строку */
  z-index: 3;
  letter-spacing: 0.5px;
}
  letter-spacing: 0.5px;
  z-index: 5;
}

.btn-favorite {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: none;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.btn-favorite:hover {
  transform: scale(1.1);
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn-favorite.active {
  animation: heartbeat 0.6s ease;
}

.product-info {
  padding: 8px;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 130px;
}

.product-title {
  font-size: 12px;
  font-weight: 600;
  color: #333;
  margin: 0 0 4px 0;
  line-height: 1.2;
  height: 44px;
  overflow: hidden;
  text-align: center;
}

.product-suffix {
  font-size: 12px;
  font-weight: 600;
  color: #333;
  display: block;
  margin-top: 2px;
}

.product-price {
  font-size: 15px;
  font-weight: 700;
  color: #2c5530;
  margin: 2px 0 auto 0;
  white-space: nowrap;
  flex-shrink: 0;
  text-align: center;
}

.product-buttons {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  align-items: center;
}

.btn-add-cart {
  width: 100%;
  padding: 12px 16px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0;
  text-align: center;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.btn-add-cart:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3);
}

.btn-add-cart:active {
  transform: translateY(0);
}

/* ЭЛЕМЕНТЫ КЛИКАБЕЛЬНОСТИ */
.click-hint {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 11px;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 5;
}

/* ИСПРАВЛЕНО: Hover только для устройств с мышью */
@media (hover: hover) and (pointer: fine) {
  .product-card:hover .click-hint {
    opacity: 1;
  }
}

.view-details {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  background: transparent;
  border: 2px solid #667eea;
  border-radius: 12px;
  color: #667eea;
  font-size: 10px;
  font-weight: 600;
  transition: all 0.3s ease;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  flex-shrink: 0;
  width: 100%;
  text-align: center;
}

/* Адаптивность для маленьких экранов */
@media (max-width: 380px) {
  .view-details {
    font-size: 9px;
    padding: 6px 12px;
  gap: 4px;
    letter-spacing: 0.2px;
  }
  
  .view-details .arrow {
    font-size: 10px;
  }
}

/* ИСПРАВЛЕНО: Hover только для устройств с мышью */
@media (hover: hover) and (pointer: fine) {
  .view-details:hover {
    background: #667eea;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
  }

  .view-details:hover .arrow {
    transform: translateX(3px);
  }
}

.view-details .arrow {
  font-size: 12px;
  transition: transform 0.3s ease;
  font-weight: bold;
}

/* УЛУЧШЕННАЯ АНИМАЦИЯ КАРТОЧЕК */
.product-card {
  position: relative;
  overflow: hidden;
}

.product-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  transition: left 0.5s ease;
  z-index: 1;
  pointer-events: none;
}

/* ИСПРАВЛЕНО: Hover только для устройств с мышью */
@media (hover: hover) and (pointer: fine) {
  .product-card:hover::before {
    left: 100%;
  }
}

/* СТИЛИ ДЛЯ ИЗБРАННЫХ ТОВАРОВ */


/* АДАПТИВНОСТЬ ДЛЯ TELEGRAM - ПОЛНОЭКРАННЫЙ РЕЖИМ */
body.telegram-fullscreen {
  position: fixed;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

/* Специальные стили для Telegram WebApp */
.tg-viewport .product-card .btn-add-cart,
body[data-telegram="true"] .product-card .btn-add-cart {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 10 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 36px !important;
  background: linear-gradient(135deg, #667eea, #764ba2) !important;
  border: none !important;
  color: white !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 10px 16px !important;
  border-radius: 10px !important;
  cursor: pointer !important;
}

.tg-viewport .product-buttons,
body[data-telegram="true"] .product-buttons {
  display: flex !important;
  visibility: visible !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin-top: 8px !important;
}

body.telegram-fullscreen .page {
  padding-top: var(--tg-header-height, 130px);
  height: calc(var(--tg-viewport-height, 100vh) - 80px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

@supports not (padding-top: var(--tg-header-height)) {
  body.telegram-fullscreen .page {
    padding-top: 130px !important;
  }
}

/* === ЗАГЛУШКА РАЗРАБОТКИ === */
.development-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 70vh;
  padding: 40px 20px;
  text-align: center;
}

.dev-animation {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30px;
}

.dev-emoji {
  font-size: 64px;
  margin-bottom: 20px;
  animation: bounce 2s infinite;
}

.dev-dots {
  display: flex;
  gap: 8px;
}

.dot {
  width: 8px;
  height: 8px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 50%;
  animation: pulse 1.5s infinite ease-in-out;
}

.dot:nth-child(1) { animation-delay: 0s; }
.dot:nth-child(2) { animation-delay: 0.3s; }
.dot:nth-child(3) { animation-delay: 0.6s; }

.dev-title {
  font-size: 28px;
  font-weight: 700;
  color: #333;
  margin-bottom: 10px;
}

.dev-subtitle {
  font-size: 16px;
  color: #666;
  margin-bottom: 40px;
}

.dev-features {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 40px;
  max-width: 300px;
}

.dev-feature {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px 20px;
  background: rgba(102, 126, 234, 0.1);
  border-radius: 16px;
  border: 1px solid rgba(102, 126, 234, 0.2);
}

.feature-icon {
  font-size: 24px;
  flex-shrink: 0;
}

.feature-text {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.dev-coming-soon {
  font-size: 18px;
  font-weight: 600;
  color: #764ba2;
  margin: 0;
}

/* Анимации */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

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

/* Адаптивность для заглушки */
@media (max-width: 480px) {
  .dev-emoji {
    font-size: 48px;
  }
  
  .dev-title {
    font-size: 24px;
  }
  
  .dev-features {
    width: 100%;
    max-width: none;
  }
}

/* === ИНФОРМАЦИОННЫЕ СТРАНИЦЫ === */
.info-page-content {
  padding: 20px;
  max-width: 600px;
  margin: 0 auto;
}

.info-page-content h1 {
  color: #333;
  font-size: 28px;
  font-weight: 600;
  margin: 0 0 30px 0;
  text-align: center;
}

.info-section {
  margin-bottom: 30px;
  background: white;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.info-section:last-child {
  margin-bottom: 0;
}

.info-section h3 {
  color: #333;
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 16px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.info-section p {
  color: #666;
  margin: 0 0 12px 0;
  font-size: 16px;
  line-height: 1.6;
}

.info-section p:last-child {
  margin-bottom: 0;
}

.info-section ul {
  margin: 12px 0 0 0;
  padding-left: 20px;
}

.info-section li {
  color: #666;
  margin-bottom: 8px;
  font-size: 16px;
  line-height: 1.5;
}

.contact-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
}

.contact-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  text-decoration: none;
  border-radius: 16px;
  font-weight: 500;
  font-size: 16px;
  transition: transform 0.2s, box-shadow 0.2s;
}

.contact-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
  color: white;
  text-decoration: none;
}

.contact-link span:first-child {
  font-size: 20px;
}

/* Адаптивность для информационных страниц */
@media (max-width: 480px) {
  .info-page-content {
    padding: 16px;
  }
  
  .info-page-content h1 {
    font-size: 24px;
    margin-bottom: 24px;
  }
  
  .info-section {
    padding: 16px;
    margin-bottom: 20px;
  }
  
  .info-section h3 {
    font-size: 18px;
  }
  
  .info-section p,
  .info-section li {
    font-size: 15px;
  }
  
  .contact-link {
    padding: 14px 16px;
    font-size: 15px;
  }
}

/* ===== МОДАЛЬНОЕ ОКНО ВЫБОРА РЕГИОНА ===== */
.region-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 20px;
}

.region-modal {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border-radius: 24px;
  padding: 32px 24px;
  max-width: 400px;
  width: 100%;
  box-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.15),
    0 8px 32px rgba(0, 0, 0, 0.1);
  animation: modalSlideUp 0.3s ease-out;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

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

.region-modal-header {
  text-align: center;
  margin-bottom: 32px;
}

.region-modal-header h2 {
  font-size: 24px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 8px 0;
  background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.region-modal-header p {
  font-size: 16px;
  color: #666;
  margin: 0;
  line-height: 1.4;
}

.region-options {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.region-option {
  display: flex;
  align-items: center;
  padding: 20px;
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border: 2px solid #e9ecef;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: left;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.region-option::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: left 0.5s ease;
}

/* ИСПРАВЛЕНО: Hover только для устройств с мышью (не touch) */
@media (hover: hover) and (pointer: fine) {
  .region-option:hover {
    border-color: #3498db;
    transform: translateY(-2px);
    box-shadow: 
      0 8px 25px rgba(52, 152, 219, 0.15),
      0 4px 12px rgba(0, 0, 0, 0.1);
  }

  .region-option:hover::before {
    left: 100%;
  }
}

/* Убираем синюю обводку при фокусе (проблема "залипания" на мобильных) */
.region-option:focus {
  outline: none;
}

.region-option:active {
  transform: translateY(0);
}

.region-icon {
  font-size: 32px;
  margin-right: 16px;
  flex-shrink: 0;
}

.region-info {
  flex: 1;
}

.region-info h3 {
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
  margin: 0 0 4px 0;
}

.region-info p {
  font-size: 14px;
  color: #7f8c8d;
  margin: 0;
}

.region-arrow {
  font-size: 20px;
  color: #3498db;
  font-weight: bold;
  margin-left: 12px;
  transition: transform 0.3s ease;
}

/* ИСПРАВЛЕНО: Hover только для устройств с мышью */
@media (hover: hover) and (pointer: fine) {
  .region-option:hover .region-arrow {
    transform: translateX(4px);
  }
}

/* Адаптивность для модального окна */
@media (max-width: 480px) {
  .region-modal {
    padding: 24px 20px;
    margin: 20px;
  }
  
  .region-modal-header h2 {
    font-size: 20px;
  }
  
  .region-modal-header p {
    font-size: 14px;
  }
  
  .region-option {
    padding: 16px;
  }
  
  .region-icon {
    font-size: 28px;
    margin-right: 12px;
  }
  
  .region-info h3 {
    font-size: 16px;
  }
  
  .region-info p {
    font-size: 13px;
  }
}

/* Скрытие модального окна */
.region-modal-overlay.hidden {
  display: none;
}

/* ===== СКЛАДСКИЕ ОСТАТКИ И ПЛАШКИ НАЛИЧИЯ ===== */
.stock-badge {
  position: absolute;
  top: 165px; /* ⭐ Картинка 180px, бейдж ~30px высотой = 180-15=165 */
  left: 50%; /* ⭐ По центру горизонтально */
  transform: translateX(-50%); /* ⭐ Центрируем */
  padding: 6px 12px; /* ⭐ Больше padding для одной строки */
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap; /* ⭐ ТЕКСТ В ОДНУ СТРОКУ! */
  z-index: 3;
}

.stock-badge.out-of-stock {
  background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
  color: white;
  box-shadow: 0 2px 8px rgba(231, 76, 60, 0.3);
}

/* Стили для товаров без остатков */
.product-card.out-of-stock {
  position: relative;
  /* ❌ УБРАЛИ opacity: 0.7 чтобы кнопка была яркой! */
}

.product-card.out-of-stock::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.15); /* ⭐ Чуть сильнее затемнение */
  z-index: 1;
  pointer-events: none;
  border-radius: 20px;
}

.product-card.out-of-stock .product-image img {
  filter: grayscale(30%) brightness(0.85); /* ⭐ Затемняем картинку */
  opacity: 0.8; /* ⭐ Дополнительное затемнение картинки */
}

.product-card.out-of-stock .product-title {
  color: #7f8c8d;
  opacity: 0.8; /* ⭐ Затемняем текст */
}

.product-card.out-of-stock .product-price {
  color: #95a5a6;
  opacity: 0.8; /* ⭐ Затемняем цену */
}

/* ⭐ КНОПКИ, ССЫЛКИ И БЕЙДЖИ ВСЕГДА ЯРКИЕ */
.product-card.out-of-stock .btn-notify-stock,
.product-card.out-of-stock .view-details,
.product-card.out-of-stock .stock-badge {
  opacity: 1 !important; /* Всегда яркие элементы */
  z-index: 3; /* Выше оверлея */
}

/* Отключенная кнопка "В корзину" */
.btn-add-cart.disabled {
  background: linear-gradient(135deg, #bdc3c7 0%, #95a5a6 100%) !important;
  color: #7f8c8d !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

.btn-add-cart.disabled:hover {
  transform: none !important;
  box-shadow: none !important;
}

.btn-add-cart.disabled:active {
  transform: none !important;
}

/* Адаптивность для плашек */
@media (max-width: 480px) {
  .stock-badge {
    font-size: 10px;
    padding: 5px 10px; /* ⭐ Достаточно для одной строки */
    white-space: nowrap; /* ⭐ Всегда одна строка */
  }
}


/* Адаптивность */
@media (max-width: 390px) {
  .page {
    padding: 15px;
  }
  
  .category-grid {
    grid-template-columns: 1fr;
  }
  
  .products-grid {
    grid-template-columns: 1fr;
  }
  
  .product-card {
  display: flex;
    align-items: center;
    gap: 12px;
    min-height: 100px;
  }
  
  /* Обеспечиваем отображение кнопок в мобильном layout */
  .product-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
    min-height: 80px;
  }
  
  .product-buttons {
    display: flex !important;
  flex-direction: column;
  gap: 4px;
    margin-top: 8px;
  }
  
  .btn-add-cart {
    display: block !important;
    width: 100% !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
  }
  
  .product-card img {
  width: 80px;
  height: 80px;
    flex-shrink: 0;
  }
  
  .product-slider {
    height: 250px;
  }
  
  .pricing-grid {
    display: table !important;
    width: 100% !important;
  }
  
  .pricing-row span {
    padding: 8px 4px;
    font-size: 12px;
  }
}

/* Улучшение скролла для страницы товара */
#product-page {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overflow-y: auto; /* Принудительно включаем скролл */
  overflow-x: hidden;
  position: relative;
}

.product-container {
  /* Обеспечиваем плавный скролл */
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  position: relative;
  z-index: 1;
}

/* 🎨 СОВРЕМЕННЫЕ КАРТОЧКИ */
.modern-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9ff 100%);
  border-radius: 16px;
  margin: 20px 5px; /* Уменьшили боковые отступы */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  overflow: hidden;
  transition: all 0.3s ease;
  position: relative;
}

.modern-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.modern-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
}

.card-header {
  display: flex;
  align-items: center;
  padding: 20px 20px 10px 20px;
  gap: 12px;
}

.card-icon {
  font-size: 24px;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
  animation: iconFloat 3s ease-in-out infinite;
}

@keyframes iconFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-3px); }
}

.card-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #2d3748;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.card-content {
  padding: 0 25px 25px 25px; /* Увеличили внутренние отступы */
  color: #4a5568;
  line-height: 1.6;
  font-size: 16px; /* Увеличили размер текста */
  word-wrap: break-word; /* КРИТИЧНО: Переносим длинные слова */
  overflow-wrap: break-word;
  white-space: normal; /* КРИТИЧНО: Нормальный перенос текста */
}

/* КРИТИЧНО: Strong внутри текста должен быть inline! */
.card-content strong,
.card-content b {
  display: inline !important;
  font-weight: 600;
  color: #1a202c;
  margin: 0 !important;
  padding: 0 !important;
  white-space: normal !important; /* КРИТИЧНО: Нормальный перенос внутри strong */
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

/* 📋 СПИСКИ ФУНКЦИЙ */
.feature-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 20px;
}

.feature-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 15px; /* Увеличили padding */
  background: rgba(255, 255, 255, 0.6);
  border-radius: 12px;
  border-left: 4px solid #667eea;
  transition: all 0.3s ease;
  font-size: 16px; /* Увеличили размер текста */
}

.feature-item:hover {
  background: rgba(102, 126, 234, 0.1);
  transform: translateX(4px);
}

.feature-emoji {
  font-size: 20px;
  min-width: 24px;
  animation: pulse 2s infinite;
}

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

/* ⚠️ БЛОК ПРЕДУПРЕЖДЕНИЯ */
.warning-box {
  background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
  border: 1px solid #ffeaa7;
  border-radius: 12px;
  padding: 16px;
  margin-top: 16px;
  position: relative;
  overflow: hidden;
}

.warning-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #f39c12 0%, #e74c3c 100%);
}

.warning-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-weight: 600;
  color: #8b4513;
}

.warning-emoji {
  font-size: 18px;
  animation: warning-blink 2s infinite;
}

@keyframes warning-blink {
  0%, 50%, 100% { opacity: 1; }
  25%, 75% { opacity: 0.5; }
}

/* 🛡️ ГАРАНТИИ */
.guarantee-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.guarantee-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: linear-gradient(135deg, #e8f5e8 0%, #f0fff0 100%);
  border-radius: 12px;
  border-left: 4px solid #28a745;
  transition: all 0.3s ease;
}

.guarantee-item:hover {
  background: linear-gradient(135deg, #d4edda 0%, #e8f5e8 100%);
  transform: translateX(4px);
}

.guarantee-emoji {
  font-size: 20px;
  min-width: 24px;
}

/* 🚚 ДОСТАВКА */
.delivery-options {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.delivery-option {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: linear-gradient(135deg, #e3f2fd 0%, #f0f8ff 100%);
  border-radius: 12px;
  border-left: 4px solid #2196f3;
  transition: all 0.3s ease;
}

.delivery-option:hover {
  background: linear-gradient(135deg, #bbdefb 0%, #e3f2fd 100%);
  transform: translateX(4px);
}

.delivery-flag {
  font-size: 24px;
  min-width: 32px;
  text-align: center;
}

.delivery-info {
  flex: 1;
  color: #1565c0;
}

/* 📱 МОБИЛЬНАЯ АДАПТАЦИЯ */
@media (max-width: 480px) {
  /* Обеспечиваем видимость кнопок на всех мобильных устройствах */
  .product-card .btn-add-cart {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    min-height: 36px !important;
  }
  
  .product-buttons {
    display: flex !important;
    visibility: visible !important;
  }
  
  .modern-card {
    margin: 16px 2px; /* Уменьшили боковые отступы */
    border-radius: 12px;
  }
  
  .card-header {
    padding: 18px 18px 10px 18px; /* Увеличили отступы */
  }
  
  .card-content {
    padding: 0 18px 18px 18px; /* Увеличили отступы */
    font-size: 15px; /* Увеличили размер текста */
  }
  
  .feature-item, .guarantee-item, .delivery-option {
    padding: 12px;
    gap: 10px;
  }
  
  .card-icon {
    width: 36px;
    height: 36px;
    font-size: 20px;
  }
  
  .feature-emoji, .guarantee-emoji {
    font-size: 18px;
  }
  
  .delivery-flag {
    font-size: 20px;
    min-width: 28px;
  }
}

/* 🚀 VERSION 2: ULTRA-MODERN DESIGN */

/* 🎯 PRICING HERO SECTION */
.pricing-hero {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
  border-radius: 20px;
  padding: 30px;
  margin: 25px 0;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(102, 126, 234, 0.3);
}

.pricing-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="50" cy="10" r="0.5" fill="rgba(255,255,255,0.05)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
  opacity: 0.3;
}

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

.pricing-emoji-animation {
  font-size: 48px;
  margin-bottom: 15px;
  animation: coinSpin 4s ease-in-out infinite;
  display: inline-block;
}

@keyframes coinSpin {
  0%, 100% { transform: rotateY(0deg) scale(1); }
  25% { transform: rotateY(90deg) scale(1.1); }
  50% { transform: rotateY(180deg) scale(1); }
  75% { transform: rotateY(270deg) scale(1.1); }
}

.pricing-hero-title {
  color: white;
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 15px 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  line-height: 1.4;
}

.pricing-subtitle {
  color: rgba(255, 255, 255, 0.9);
  font-size: 16px;
  font-weight: 500;
  margin: 0;
}

.highlight-text {
  background: rgba(255, 255, 255, 0.2);
  padding: 4px 8px;
  border-radius: 8px;
  font-weight: 600;
  backdrop-filter: blur(10px);
}

.pricing-wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30px;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120"><path d="M0,60 C300,120 900,0 1200,60 L1200,120 L0,120 Z" fill="rgba(255,255,255,0.1)"/></svg>');
  background-size: cover;
  animation: waveMove 6s ease-in-out infinite;
}

@keyframes waveMove {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-50px); }
}

/* 💎 PRICING CARDS GRID */
.pricing-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin: 30px 0;
}

.pricing-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 20px;
  padding: 25px;
  position: relative;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.pricing-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, transparent 0%, rgba(102, 126, 234, 0.05) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.pricing-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 60px rgba(102, 126, 234, 0.2);
}

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

/* 🏆 SPECIAL BADGES */
.popular-badge, .best-deal-badge, .wholesale-badge {
  position: absolute;
  top: -10px;
  right: 20px;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  color: white;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 3;
}

.popular-badge {
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
  box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
}

.best-deal-badge {
  background: linear-gradient(135deg, #ffa726 0%, #ff7043 100%);
  box-shadow: 0 4px 15px rgba(255, 167, 38, 0.4);
  animation: dealPulse 2s infinite;
}

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

.wholesale-badge {
  background: linear-gradient(135deg, #9c27b0 0%, #673ab7 100%);
  box-shadow: 0 4px 15px rgba(156, 39, 176, 0.4);
}

/* 📊 CARD CONTENT */
.pricing-card-header {
  text-align: center;
  margin-bottom: 20px;
  position: relative;
  z-index: 2;
}

.qty-badge {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 8px 20px;
  border-radius: 25px;
  font-size: 14px;
  font-weight: 600;
  display: inline-block;
  margin-bottom: 15px;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.price-display {
  text-align: center;
}

.price-value {
  display: block;
  font-size: 32px;
  font-weight: 800;
  color: #2d3748;
  margin-bottom: 5px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.price-label {
  font-size: 14px;
  color: #718096;
  font-weight: 500;
}

.pricing-card-body {
  border-top: 2px solid rgba(102, 126, 234, 0.1);
  padding-top: 20px;
  position: relative;
  z-index: 2;
}

.total-section, .savings-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding: 12px;
  background: rgba(102, 126, 234, 0.05);
  border-radius: 12px;
  transition: all 0.3s ease;
}

.total-section:hover, .savings-section:hover {
  background: rgba(102, 126, 234, 0.1);
  transform: translateX(4px);
}

.total-label, .savings-label {
  font-size: 14px;
  color: #4a5568;
  font-weight: 500;
}

.total-value {
  font-size: 18px;
  font-weight: 700;
  color: #2d3748;
}

.savings-value {
  font-size: 16px;
  font-weight: 700;
  color: #38a169;
}

/* 🎨 SPECIAL CARD STYLES */
.pricing-card.popular {
  border: 2px solid #ff6b6b;
  transform: scale(1.05);
}

.pricing-card.best-deal {
  border: 2px solid #ffa726;
  background: linear-gradient(135deg, rgba(255, 167, 38, 0.1) 0%, rgba(255, 255, 255, 0.95) 100%);
}

.pricing-card.wholesale {
  border: 2px solid #9c27b0;
  background: linear-gradient(135deg, rgba(156, 39, 176, 0.1) 0%, rgba(255, 255, 255, 0.95) 100%);
}

/* 🔍 АВТОКОМПЛИТ ГОРОДОВ */
.autocomplete-container {
  position: relative;
}

.autocomplete-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.autocomplete-item {
  padding: 12px;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
  user-select: none; /* Предотвращаем выделение текста */
  -webkit-user-select: none;
  -webkit-touch-callout: none; /* Отключаем контекстное меню на iOS */
  -webkit-tap-highlight-color: transparent; /* Убираем подсветку тапа */
}

.autocomplete-item:hover {
  background-color: #f8f9fa;
}

.autocomplete-item:active {
  background-color: #e9ecef;
}

/* Специальные стили для Telegram WebApp */
body[data-telegram="true"] .autocomplete-item {
  padding: 16px 12px; /* Увеличиваем область тапа */
  font-size: 16px; /* Увеличиваем шрифт для лучшего тапа */
  min-height: 48px; /* Минимальная высота для удобного тапа */
  display: flex;
  align-items: center;
}

body[data-telegram="true"] .autocomplete-item:active {
  background-color: #007AFF;
  color: white;
}

.autocomplete-item:last-child {
  border-bottom: none;
}

/* 🚨 АНИМАЦИЯ ОШИБОК */
.error-message {
  animation: shake 0.3s ease-in-out;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

/* 🎨 КРАСИВЫЕ РАДИОКНОПКИ */
.radio-group-modern {
  display: flex;
  flex-direction: column;
  gap: 6px; /* Еще больше уменьшил с 8px до 6px */
}

.radio-option {
  position: relative;
  cursor: pointer;
  display: block;
  background: white;
  border: 2px solid #e1e8ed;
  border-radius: 12px;
  padding: 8px 16px; /* Еще больше уменьшил высоту до 8px */
  transition: all 0.3s ease;
  overflow: hidden;
}

.radio-option:hover {
  border-color: #007AFF;
  background: #f8f9fa;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 122, 255, 0.15);
}

.radio-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.radio-option input[type="radio"]:checked + .radio-content {
  color: #007AFF;
}

.radio-option input[type="radio"]:checked + .radio-content::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background: #007AFF;
  border-radius: 50%;
  box-shadow: inset 0 0 0 4px white;
}

.radio-option input[type="radio"]:checked {
  border-color: #007AFF;
  background: linear-gradient(135deg, rgba(0, 122, 255, 0.1) 0%, rgba(255, 255, 255, 0.95) 100%);
}

.radio-content {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px; /* Уменьшил с 12px до 10px */
  font-size: 13px; /* Уменьшил с 14px до 13px */
  font-weight: 500;
}

.radio-icon {
  font-size: 16px; /* Уменьшил с 18px до 16px */
  width: 24px;
  text-align: center;
}

.radio-text {
  flex: 1;
}

/* Анимация выбора */
.radio-option input[type="radio"]:checked {
  animation: radioSelect 0.3s ease;
}

@keyframes radioSelect {
  0% { transform: scale(1); }
  50% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

/* 🌍 ВЫБОР СТРАНЫ ДЛЯ МЕЖДУНАРОДНОЙ ДОСТАВКИ */
.phone-input-container {
  display: flex;
  gap: 8px;
}

.country-selector {
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 12px 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 120px;
  font-size: 14px;
  transition: all 0.2s ease;
}

.country-selector:hover {
  border-color: #007AFF;
  background: #f8f9fa;
}

.dropdown-arrow {
  font-size: 10px;
  color: #666;
}

.country-modal-content {
  max-width: 400px;
  max-height: 500px;
}

.country-search {
  padding: 16px;
  border-bottom: 1px solid #eee;
}

.country-search input {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
  /* Фиксированный светло-серый фон */
  background-color: #f5f5f5;
  color: #000;
  caret-color: #007bff;
}

.country-search input::selection {
  background-color: var(--tg-theme-link-color, #007bff);
  color: #fff;
}

.countries-list {
  max-height: 300px;
  overflow-y: auto;
  padding: 8px 0;
}

.country-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.country-item:hover {
  background: #f8f9fa;
}

.country-flag {
  font-size: 18px;
}

.country-name {
  flex: 1;
  font-size: 14px;
}

.country-code {
  font-size: 14px;
  color: #666;
  font-weight: 500;
}

/* 📱 MOBILE RESPONSIVENESS */
@media (max-width: 768px) {
  .pricing-cards-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .pricing-card {
    padding: 20px;
    border-radius: 16px;
  }
  
  .pricing-hero {
    padding: 25px 20px;
    margin: 20px 0;
  }
  
  .pricing-hero-title {
    font-size: 18px;
  }
  
  .pricing-emoji-animation {
    font-size: 36px;
  }
  
  .price-value {
    font-size: 28px;
  }
  
  .pricing-card.popular {
    transform: none;
  }
}

/* 🎯 VERSION 3: BEAUTIFUL HERO + CLASSIC TABLE */

/* 📊 СТИЛЬНАЯ ТАБЛИЦА V3 */
.pricing-table-v3 {
  margin: 25px 0;
}

.pricing-table-v3 .pricing-grid {
  display: table !important;
  width: 100% !important;
  border-collapse: separate;
  border-spacing: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(102, 126, 234, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  position: relative;
}

.pricing-table-v3 .pricing-grid::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
}

.pricing-table-v3 .pricing-header {
  display: table-row !important;
  font-weight: 700;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pricing-table-v3 .pricing-header span {
  display: table-cell !important;
  padding: 20px 16px;
  font-size: 14px;
  text-align: center;
  position: relative;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.pricing-table-v3 .pricing-row {
  display: table-row !important;
  transition: all 0.3s ease;
  position: relative;
}

.pricing-table-v3 .pricing-row:nth-child(even) {
  background: rgba(102, 126, 234, 0.03);
}

.pricing-table-v3 .pricing-row:hover {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
  transform: scale(1.02);
  box-shadow: 0 4px 20px rgba(102, 126, 234, 0.2);
  z-index: 2;
}

.pricing-table-v3 .pricing-row span {
  display: table-cell !important;
  padding: 18px 16px;
  font-size: 15px;
  text-align: center;
  transition: all 0.3s ease;
  border-bottom: 1px solid rgba(102, 126, 234, 0.1);
  position: relative;
}

.pricing-table-v3 .pricing-row:last-child span {
  border-bottom: none;
}

.pricing-table-v3 .pricing-row span:first-child {
  font-weight: 600;
  color: #4a5568;
  background: rgba(102, 126, 234, 0.05);
}

.pricing-table-v3 .pricing-row .price {
  font-weight: 700;
  font-size: 18px;
  color: #667eea;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.pricing-table-v3 .pricing-row .total {
  font-weight: 600;
  color: #2d3748;
  font-size: 16px;
}

.pricing-table-v3 .pricing-row .savings {
  font-weight: 700;
  color: #38a169;
  font-size: 16px;
}

.pricing-table-v3 .pricing-row:hover .price {
  transform: scale(1.1);
}

.pricing-table-v3 .pricing-row:hover .savings {
  animation: savingsPulse 0.6s ease;
}

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

/* 🎨 СПЕЦИАЛЬНЫЕ ЭФФЕКТЫ ДЛЯ СТРОК */
.pricing-table-v3 .pricing-row[data-qty="5"] {
  border-left: 4px solid #ff6b6b;
}

.pricing-table-v3 .pricing-row[data-qty="50"] {
  border-left: 4px solid #ffa726;
  background: linear-gradient(135deg, rgba(255, 167, 38, 0.05) 0%, rgba(255, 255, 255, 0.95) 100%);
}

.pricing-table-v3 .pricing-row[data-qty="1000"] {
  border-left: 4px solid #9c27b0;
  background: linear-gradient(135deg, rgba(156, 39, 176, 0.05) 0%, rgba(255, 255, 255, 0.95) 100%);
}

/* 📱 МОБИЛЬНАЯ АДАПТАЦИЯ V3 */
@media (max-width: 768px) {
  /* Компактный заголовок для мобильных */
  .pricing-hero {
    padding: 25px 20px;
    margin: 20px 0;
    border-radius: 20px;
    min-height: auto;
  }
  
  .pricing-hero-title {
    font-size: 18px;
    line-height: 1.3;
    margin-bottom: 15px;
  }
  
  .pricing-emoji-animation {
    font-size: 36px;
  margin-bottom: 12px;
}

  .pricing-subtitle {
    font-size: 14px;
  }
  
  .highlight-text {
    padding: 3px 8px;
    font-size: 13px;
  }
  
  .pricing-wave {
    height: 20px;
  }
  
  .pricing-table-v3 .pricing-grid {
    border-radius: 16px;
  }
  
  .pricing-table-v3 .pricing-header span,
  .pricing-table-v3 .pricing-row span {
    padding: 14px 8px;
    font-size: 13px;
  }
  
  .pricing-table-v3 .pricing-row .price {
    font-size: 16px;
  }
  
  .pricing-table-v3 .pricing-row .total,
  .pricing-table-v3 .pricing-row .savings {
    font-size: 14px;
  }
  
  .pricing-table-v3 .pricing-row:hover {
    transform: scale(1.01);
  }
}

/* Дополнительная оптимизация для очень маленьких экранов */
@media (max-width: 480px) {
  .pricing-hero {
    padding: 20px 16px;
    margin: 16px 0;
    border-radius: 16px;
  }
  
  .pricing-hero-title {
    font-size: 16px;
    margin-bottom: 12px;
  }
  
  .pricing-emoji-animation {
    font-size: 32px;
    margin-bottom: 10px;
  }
  
  .pricing-subtitle {
    font-size: 13px;
  }
  
  .highlight-text {
    padding: 2px 6px;
    font-size: 12px;
  }
}

/* 🎨 ОБЪЕДИНЕННЫЙ БЛОК: Заголовок + Таблица */
.pricing-unified-block {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
  border-radius: 32px;
  margin: 30px 5px; /* Уменьшили боковые отступы */
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(102, 126, 234, 0.3);
  animation: morphingGradient 8s ease-in-out infinite;
  background-size: 400% 400%;
}

@keyframes morphingGradient {
  0%, 100% { background-position: 0% 50%; }
  25% { background-position: 100% 50%; }
  50% { background-position: 100% 100%; }
  75% { background-position: 0% 100%; }
}

/* 📝 ЗАГОЛОВОК ВНУТРИ БЛОКА */
.pricing-unified-header {
  text-align: center;
  padding: 40px 30px 30px 30px;
  position: relative;
  z-index: 3;
}

.pricing-unified-title {
  color: white;
  font-size: 24px;
  font-weight: 700;
  margin: 15px 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  line-height: 1.4;
}

.pricing-unified-subtitle {
  color: rgba(255, 255, 255, 0.9);
  font-size: 16px;
  font-weight: 500;
  margin: 0;
}

/* 📊 ТАБЛИЦА ВНУТРИ БЛОКА */
.pricing-unified-table {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  margin: 0 20px 20px 20px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.3);
  position: relative;
  z-index: 2;
}

.pricing-unified-table .pricing-grid {
  display: table !important;
  width: 100% !important;
  border-collapse: separate;
  border-spacing: 0;
  background: transparent;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: none;
  border: none;
}

.pricing-unified-table .pricing-header {
  display: table-row !important;
  font-weight: 700;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pricing-unified-table .pricing-header span {
  display: table-cell !important;
  padding: 18px 16px;
  font-size: 14px;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.pricing-unified-table .pricing-row {
  display: table-row !important;
  transition: all 0.3s ease;
  position: relative;
}

.pricing-unified-table .pricing-row:nth-child(even) {
  background: rgba(102, 126, 234, 0.03);
}

.pricing-unified-table .pricing-row:hover {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
  transform: scale(1.02);
  box-shadow: 0 4px 20px rgba(102, 126, 234, 0.2);
  z-index: 2;
}

.pricing-unified-table .pricing-row span {
  display: table-cell !important;
  padding: 16px 12px;
  font-size: 15px;
  text-align: center;
  transition: all 0.3s ease;
  border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}

.pricing-unified-table .pricing-row:last-child span {
  border-bottom: none;
}

.pricing-unified-table .pricing-row span:first-child {
  font-weight: 600;
  color: #4a5568;
  background: rgba(102, 126, 234, 0.05);
}

.pricing-unified-table .pricing-row .price {
  font-weight: 700;
  font-size: 18px;
  color: #667eea;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.pricing-unified-table .pricing-row .total {
  font-weight: 600;
  color: #2d3748;
  font-size: 16px;
}

.pricing-unified-table .pricing-row .savings {
  font-weight: 700;
  color: #38a169;
  font-size: 16px;
}

/* 🌊 ДЕКОРАТИВНАЯ ВОЛНА ВНИЗУ */
.pricing-wave-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30px;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120"><path d="M0,60 C300,120 900,0 1200,60 L1200,120 L0,120 Z" fill="rgba(255,255,255,0.1)"/></svg>');
  background-size: cover;
  animation: waveMove 6s ease-in-out infinite;
  z-index: 1;
}

@keyframes waveMove {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-50px); }
}

/* 📱 МОБИЛЬНАЯ АДАПТАЦИЯ ОБЪЕДИНЕННОГО БЛОКА */
@media (max-width: 768px) {
  .pricing-unified-block {
    margin: 25px 0;
    border-radius: 24px;
  }
  
  .pricing-unified-header {
    padding: 30px 20px 25px 20px;
  }
  
  .pricing-unified-title {
    font-size: 18px;
    margin: 12px 0;
  }
  
  .pricing-emoji-animation {
    font-size: 36px;
    margin-bottom: 12px;
  }
  
  .pricing-unified-subtitle {
    font-size: 14px;
  }
  
  .pricing-unified-table {
    margin: 0 15px 15px 15px;
    border-radius: 16px;
  }
  
  .pricing-unified-table .pricing-header span,
  .pricing-unified-table .pricing-row span {
    padding: 14px 8px;
    font-size: 13px;
  }
  
  .pricing-unified-table .pricing-row .price {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .pricing-unified-block {
    margin: 20px 0;
    border-radius: 20px;
  }
  
  .pricing-unified-header {
    padding: 25px 16px 20px 16px;
  }
  
  .pricing-unified-title {
    font-size: 16px;
    margin: 10px 0;
  }
  
  .pricing-emoji-animation {
    font-size: 32px;
    margin-bottom: 10px;
  }
  
  .pricing-unified-subtitle {
    font-size: 13px;
  }
  
  .pricing-unified-table {
    margin: 0 12px 12px 12px;
    border-radius: 14px;
  }
  
  .highlight-text {
    padding: 2px 6px;
    font-size: 12px;
  }
}

/* 🎨 КОМПАКТНЫЕ КНОПКИ СВЕРХУ */
.product-top-buttons-enhanced {
  display: flex;
  gap: 12px; /* Промежуток между кнопками */
  justify-content: center;
  padding: 15px 20px; /* Отступы как у других элементов */
  margin-bottom: 8px; /* Уменьшили отступ */
}

/* ВЫРАВНИВАНИЕ КНОПОК ПО ШИРИНЕ НА СТРАНИЦЕ ТОВАРА */
.product-top-buttons-enhanced .btn-enhanced {
  flex: 1; /* Кнопки растягиваются на всю доступную ширину */
  max-width: none; /* Убираем ограничение ширины */
  justify-content: center; /* Центрируем содержимое кнопки */
}

.btn-enhanced {
  position: relative;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 16px; /* Уменьшили скругление */
  padding: 10px 16px; /* Уменьшили padding */
  color: white;
  font-size: 13px; /* Уменьшили шрифт */
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px; /* Уменьшили gap между иконкой и текстом */
  transition: all 0.3s ease;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3); /* Уменьшили тень */
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  flex: 1; /* Кнопки равной ширины */
  max-width: 180px; /* Ограничиваем максимальную ширину */
}

.btn-enhanced:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 12px 35px rgba(102, 126, 234, 0.4);
}

.btn-enhanced:active {
  transform: translateY(0) scale(0.98);
}

.btn-icon-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.btn-emoji {
  font-size: 16px;
  z-index: 2;
  position: relative;
}

.btn-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.btn-enhanced:hover .btn-glow {
  opacity: 1;
  animation: glowPulse 1.5s ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.3; }
  50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.6; }
}

.btn-shine {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: left 0.6s ease;
}

.btn-enhanced:hover .btn-shine {
  left: 100%;
}

.btn-text {
  white-space: nowrap;
  z-index: 2;
  position: relative;
}

/* 🎪 УЛУЧШЕННЫЙ SHOWCASE */
.product-showcase {
  position: relative;
  margin: 20px 5px; /* Уменьшили боковые отступы */
  padding: 20px;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
  border-radius: 30px;
  overflow: hidden;
}

.floating-decorations {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1;
}

.decoration-sim {
  position: absolute;
  font-size: 24px;
  opacity: 0.1;
  animation: floatSim 8s ease-in-out infinite;
}

.sim-1 {
  top: 10%;
  left: 10%;
  animation-delay: 0s;
}

.sim-2 {
  top: 20%;
  right: 15%;
  animation-delay: 2s;
}

.sim-3 {
  bottom: 20%;
  left: 15%;
  animation-delay: 4s;
}

.sim-4 {
  bottom: 10%;
  right: 10%;
  animation-delay: 6s;
}

@keyframes floatSim {
  0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.1; }
  25% { transform: translateY(-10px) rotate(5deg); opacity: 0.2; }
  50% { transform: translateY(-20px) rotate(-5deg); opacity: 0.15; }
  75% { transform: translateY(-10px) rotate(3deg); opacity: 0.2; }
}

/* 📱 УЛУЧШЕННЫЙ СЛАЙДЕР */
.product-slider-enhanced {
  position: relative;
  z-index: 2;
}

.slider-wrapper-enhanced {
  position: relative;
  width: 100%;
  max-width: 500px; /* Увеличили с 400px до 500px */
  margin: 0 auto;
  aspect-ratio: 1;
  border-radius: 25px;
  overflow: hidden;
  background: white;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  border: 3px solid rgba(102, 126, 234, 0.2);
}

.slider-btn-enhanced {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.25); /* Еще более прозрачный фон */
  border: none;
  width: 36px; /* Еще меньше */
  height: 36px; /* Еще меньше */
  border-radius: 50%;
  color: white;
  font-size: 16px; /* Меньше размер стрелки */
  font-weight: normal; /* Убрали bold */
  cursor: pointer;
  z-index: 3;
  transition: all 0.3s ease;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); /* Очень деликатная тень */
  backdrop-filter: blur(3px);
}

.slider-btn-enhanced:hover {
  transform: translateY(-50%) scale(1.05); /* Еще меньше hover эффект */
  background: rgba(0, 0, 0, 0.4); /* Слегка темнее при наведении */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.slider-btn-enhanced.prev {
  left: 20px; /* Сдвинули еще ближе к центру */
}

.slider-btn-enhanced.next {
  right: 20px; /* Сдвинули еще ближе к центру */
}

.btn-arrow {
  display: block;
  line-height: 1;
}

.slider-glow {
  position: absolute;
  top: -20px;
  left: -20px;
  right: -20px;
  bottom: -20px;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
  border-radius: 45px;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.product-slider-enhanced:hover .slider-glow {
  opacity: 1;
  animation: glowPulse 2s ease-in-out infinite;
}

/* 💎 ИНФОРМАЦИЯ О ТОВАРЕ ПО ЛЕВОМУ КРАЮ */
.product-info-left {
  text-align: left; /* Выравнивание по левому краю */
  margin: 10px 0 20px 0; /* Уменьшили отступы */
  padding: 0 10px; /* Уменьшили боковые отступы */
}

/* 1. КАТЕГОРИЯ СВЕРХУ */
.product-category-top {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 3px 12px rgba(102, 126, 234, 0.3);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
  margin-bottom: 8px; /* Маленький отступ до названия */
}

/* 2. НАЗВАНИЕ ТОВАРА */
.product-name-left {
  font-size: 22px;
  font-weight: 800;
  color: #2d3748;
  margin: 0 0 8px 0; /* Маленький отступ до цены */
  line-height: 1.2;
  background: linear-gradient(135deg, #2d3748 0%, #4a5568 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 3. ЦЕНА СНИЗУ */
.product-price-left {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 18px;
  color: #4a5568;
  margin: 0;
  padding: 12px 20px;
  background: rgba(102, 126, 234, 0.05);
  border-radius: 15px;
  border: 1px solid rgba(102, 126, 234, 0.1);
  width: fit-content; /* Ширина по содержимому */
}

.category-icon {
  font-size: 12px;
}

.product-price-enhanced {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 18px;
  color: #4a5568;
  margin: 20px 0;
  padding: 12px 20px;
  background: rgba(102, 126, 234, 0.05);
  border-radius: 15px;
  border: 1px solid rgba(102, 126, 234, 0.1);
}

.price-label {
  font-weight: 500;
  color: #718096;
}

.price-value {
  font-weight: 800;
  font-size: 22px;
  color: #667eea;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.price-unit {
  font-weight: 500;
  color: #718096;
}

/* 📱 МОБИЛЬНАЯ АДАПТАЦИЯ ВЕРХНЕЙ ЧАСТИ */
@media (max-width: 768px) {
  .product-top-buttons-enhanced {
    gap: 6px; /* Уменьшили gap */
    padding: 12px 15px; /* Уменьшили padding */
  }
  
  .btn-enhanced {
    padding: 8px 12px; /* Уменьшили padding */
    font-size: 12px; /* Уменьшили шрифт */
    border-radius: 14px;
    max-width: 160px; /* Уменьшили максимальную ширину */
  }
  
  .btn-emoji {
    font-size: 12px; /* Уменьшили иконку */
  }
  
  .product-showcase {
    margin: 12px 0; /* Уменьшили отступы */
    padding: 12px;
    border-radius: 25px;
  }
  
  .decoration-sim {
    font-size: 20px;
  }
  
  .slider-wrapper-enhanced {
    max-width: 400px; /* Увеличили с 320px */
    border-radius: 20px;
  }
  
  .slider-btn-enhanced {
    width: 40px; /* Оставляем компактными */
    height: 40px; /* Оставляем компактными */
    font-size: 18px; /* Оставляем умеренными */
  }
  
  .slider-btn-enhanced.prev {
    left: 20px; /* Сдвинули ближе к центру */
  }
  
  .slider-btn-enhanced.next {
    right: 20px; /* Сдвинули ближе к центру */
  }
  
  .product-info-left {
    margin: 8px 0 16px 0;
    padding: 0 8px; /* Уменьшили отступы для планшетов */
  }
  
  .product-category-top {
    font-size: 11px;
    padding: 5px 10px;
    margin-bottom: 6px;
  }
  
  .product-name-left {
    font-size: 18px;
    margin: 0 0 6px 0;
  }
  
  .product-price-left {
  font-size: 16px;
    padding: 10px 16px;
}

  .category-icon {
  font-size: 11px;
  }
  
  .price-value {
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  .product-top-buttons-enhanced {
    flex-direction: row; /* Оставляем в строчку */
    gap: 6px;
    padding: 10px 12px;
  }
  
  .btn-enhanced {
    flex: 1; /* Равная ширина */
    justify-content: center;
    padding: 8px 10px; /* Еще меньше padding */
    font-size: 11px; /* Еще меньше шрифт */
    max-width: 140px; /* Еще меньше максимальная ширина */
  }
  
  .btn-emoji {
    font-size: 11px;
  }
  
  .product-showcase {
    padding: 10px;
    border-radius: 20px;
  }
  
  .slider-wrapper-enhanced {
    max-width: 350px; /* Увеличили с 280px */
    border-radius: 18px;
  }
  
  .slider-btn-enhanced {
    width: 36px; /* Оставляем компактными */
    height: 36px; /* Оставляем компактными */
    font-size: 16px; /* Оставляем умеренными */
  }
  
  .slider-btn-enhanced.prev {
    left: 20px; /* Сдвинули ближе к центру */
  }
  
  .slider-btn-enhanced.next {
    right: 20px; /* Сдвинули ближе к центру */
  }
  
  .product-info-left {
    margin: 6px 0 12px 0;
    padding: 0 5px; /* Уменьшили отступы для мобильных */
  }
  
  .product-category-top {
    font-size: 10px;
    padding: 4px 8px;
  border-radius: 12px;
    margin-bottom: 5px;
  }
  
  .product-name-left {
    font-size: 16px;
    margin: 0 0 5px 0;
  }
  
  .product-price-left {
    font-size: 14px;
    padding: 8px 12px;
  }
  
  .category-icon {
    font-size: 10px;
  }
}

/* 🎨 МОДЕРНИЗИРОВАННАЯ ГЛАВНАЯ СТРАНИЦА */

/* 📱 ЗАГОЛОВОК ГЛАВНОЙ СТРАНИЦЫ */
.homepage-header {
  padding: 20px 10px;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
  border-radius: 0 0 30px 30px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}

.header-buttons-modern {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 25px;
}

/* Специальные стили для двух кнопок */
.header-buttons-modern.two-buttons {
  gap: 12px;
  max-width: 350px;
  margin: 0 auto 25px auto;
}

.header-buttons-modern.two-buttons .btn-modern {
  flex: 1;
  min-width: 0;
  padding: 12px 16px;
}

.btn-modern {
  position: relative;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 16px;
  padding: 10px 16px;
  color: white;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.3s ease;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  flex: 1;
  max-width: 180px;
}

.btn-modern:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 12px 35px rgba(102, 126, 234, 0.4);
}

/* ВЫРАВНИВАНИЕ КНОПОК В ПРОФИЛЕ */
#profile-page .header-buttons {
  padding: 20px; /* Отступы как у других элементов в профиле */
  margin-bottom: 0; /* Убираем лишний отступ */
  gap: 12px; /* Промежуток между кнопками */
}

#profile-page .header-buttons .btn-modern {
  flex: 1; /* Кнопки растягиваются на всю доступную ширину */
  max-width: none; /* Убираем ограничение ширины */
  justify-content: center; /* Центрируем содержимое кнопки */
}

/* 🎪 HERO СЕКЦИЯ */
.hero-section {
  text-align: center;
  position: relative;
  z-index: 2;
}

.hero-title {
  font-size: 32px;
  font-weight: 800;
  color: #2d3748;
  margin: 0 0 10px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: linear-gradient(135deg, #2d3748 0%, #4a5568 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.title-icon {
  font-size: 36px;
  animation: iconFloat 3s ease-in-out infinite;
}

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

.hero-subtitle {
  font-size: 18px;
  color: #718096;
  margin: 0;
  font-weight: 500;
}

.hero-decoration {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1;
}

.floating-sim {
  position: absolute;
  font-size: 20px;
  opacity: 0.1;
  animation: floatSim 6s ease-in-out infinite;
}

.sim-float-1 {
  top: 20%;
  left: 15%;
  animation-delay: 0s;
}

.sim-float-2 {
  top: 30%;
  right: 20%;
  animation-delay: 2s;
}

.sim-float-3 {
  bottom: 25%;
  left: 20%;
  animation-delay: 4s;
}

/* 🎯 СОВРЕМЕННЫЕ КАТЕГОРИИ */
.categories-modern {
  padding: 0 5px;
}

.category-grid-modern {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.category-card-modern {
  position: relative;
  background: white;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;
  border: 1px solid rgba(102, 126, 234, 0.1);
}

.category-card-modern:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

.category-card-modern:hover .category-glow {
  opacity: 1;
}

.category-background {
  height: 120px;
  position: relative;
  overflow: hidden;
}

.category-image {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.category-pattern {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}

.sim-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  height: 100%;
}

.sim-icon {
  font-size: 24px;
  opacity: 0.8;
  animation: iconBounce 2s ease-in-out infinite;
}

.sim-icon:nth-child(2) {
  animation-delay: 0.3s;
}

.sim-icon:nth-child(3) {
  animation-delay: 0.6s;
}

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

.category-content-modern {
  padding: 20px;
  position: relative;
}

.category-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

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

.category-badge.social {
  background: linear-gradient(135deg, #4267B2 0%, #34A853 100%);
  color: white;
}

.category-badge.used {
  background: linear-gradient(135deg, #FF6B6B 0%, #4ECDC4 100%);
  color: white;
}

.category-title {
  font-size: 20px;
  font-weight: 700;
  color: #2d3748;
  margin: 0 0 8px 0;
  line-height: 1.2;
}

.category-description {
  font-size: 14px;
  color: #718096;
  margin: 0 0 15px 0;
  line-height: 1.4;
}

.btn-category {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 12px;
  padding: 12px 20px;
  color: white;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.btn-category:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}

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

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

.category-glow {
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.3) 0%, rgba(118, 75, 162, 0.3) 100%);
  border-radius: 22px;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* 📱 МОБИЛЬНАЯ АДАПТАЦИЯ ГЛАВНОЙ СТРАНИЦЫ */
@media (max-width: 768px) {
  .homepage-header {
    padding: 15px 8px;
    margin-bottom: 15px;
  }
  
  .header-buttons-modern {
    gap: 6px;
    margin-bottom: 20px;
  }
  
  .btn-modern {
    padding: 8px 12px;
    font-size: 12px;
    max-width: 160px;
  }
  
  .hero-title {
    font-size: 26px;
    gap: 10px;
  }
  
  .title-icon {
    font-size: 30px;
  }
  
  .hero-subtitle {
    font-size: 16px;
  }
  
  .category-grid-modern {
    gap: 15px;
  }
  
  .category-background {
    height: 100px;
  }
  
  .sim-icons {
    gap: 15px;
  }
  
  .sim-icon {
    font-size: 20px;
  }
  
  .category-content-modern {
    padding: 16px;
  }
  
  .category-title {
    font-size: 18px;
  }
  
  .category-description {
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .homepage-header {
    padding: 12px 5px;
    border-radius: 0 0 20px 20px;
  }
  
  .header-buttons-modern {
    gap: 5px;
    margin-bottom: 18px;
  }
  
  .btn-modern {
    padding: 8px 10px;
    font-size: 11px;
    max-width: 140px;
  }
  
  .hero-title {
    font-size: 22px;
    gap: 8px;
  }
  
  .title-icon {
    font-size: 26px;
  }
  
  .hero-subtitle {
    font-size: 14px;
  }
  
  .categories-modern {
    padding: 0 2px;
  }
  
  .category-grid-modern {
    gap: 12px;
  }
  
  .category-background {
    height: 90px;
  }
  
  .sim-icons {
    gap: 12px;
  }
  
  .sim-icon {
    font-size: 18px;
  }
  
  .category-content-modern {
    padding: 14px;
  }
  
  .category-title {
    font-size: 16px;
  }
  
  .category-description {
    font-size: 12px;
    margin-bottom: 12px;
  }
  
  .btn-category {
    padding: 10px 16px;
    font-size: 13px;
  }
}

/* 🚀 КОМПАКТНЫЙ ДИЗАЙН V3 */

.categories-experimental {
  padding: 0 5px;
}

/* 📦 КОМПАКТНЫЕ КАРТОЧКИ */
.category-card-compact {
  background: white;
  border-radius: 20px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  border: 2px solid transparent;
  overflow: hidden;
  position: relative;
}

.category-card-compact:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
  border-color: rgba(102, 126, 234, 0.2);
}

.card-content-compact {
  padding: 20px;
  position: relative;
}

/* 🏷️ ГЛАВНЫЙ БЕЙДЖ */
.category-badge-main {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  color: white;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}

.category-badge-main::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s;
}

.category-badge-main:hover::before {
  left: 100%;
}

.category-badge-main.new {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.category-badge-main.social {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.category-badge-main.used {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

/* 📋 ИНФОРМАЦИЯ */
.card-info-compact {
  margin-bottom: 16px;
}

.category-title-compact {
  font-size: 20px;
  font-weight: 700;
  color: #2d3748;
  margin: 0 0 8px 0;
  line-height: 1.2;
}

.category-description-compact {
  font-size: 14px;
  color: #718096;
  margin: 0 0 12px 0;
  line-height: 1.4;
}

/* 📊 СТАТИСТИКА */
.card-stats-compact {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.stat-item-compact {
  background: rgba(102, 126, 234, 0.1);
  color: #667eea;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

/* ⭐ ФИЧИ */
.card-features-compact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 16px;
}

.feature-item-compact {
  background: #f7fafc;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  color: #4a5568;
  font-weight: 500;
  text-align: center;
  border: 1px solid #e2e8f0;
  transition: all 0.2s;
}

.feature-item-compact:hover {
  background: #edf2f7;
  transform: translateY(-1px);
}

/* 🔘 КНОПКА */
.btn-category-compact {
  width: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-category-compact:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
}

.btn-text-compact {
  flex: 1;
}

.arrow-compact {
  font-size: 16px;
  transition: transform 0.3s;
}

.btn-category-compact:hover .arrow-compact {
  transform: translateX(4px);
}

/* 🚀 ЛЕТАЮЩИЙ ЛОГОТИП */
.floating-logo-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.floating-logo {
  position: absolute;
  font-size: 20px;
  opacity: 0.15;
  animation: floatLogo 8s ease-in-out infinite;
  transition: opacity 0.3s;
}

@keyframes floatLogo {
  0% {
    transform: translate(20px, 80px) rotate(0deg);
    opacity: 0.1;
  }
  25% {
    transform: translate(80%, 20px) rotate(90deg);
    opacity: 0.2;
  }
  50% {
    transform: translate(60%, 70%) rotate(180deg);
    opacity: 0.15;
  }
  75% {
    transform: translate(10%, 50%) rotate(270deg);
    opacity: 0.1;
  }
  100% {
    transform: translate(20px, 80px) rotate(360deg);
    opacity: 0.1;
  }
}

.category-card-compact:hover .floating-logo {
  opacity: 0.25;
  animation-duration: 4s;
}

/* Обеспечиваем что контент поверх анимации */
.card-content-compact {
  position: relative;
  z-index: 2;
}

/* 📱 МОБИЛЬНАЯ АДАПТАЦИЯ КОМПАКТНОГО ДИЗАЙНА */
@media (max-width: 480px) {
  .card-content-compact {
    padding: 16px;
  }
  
  .category-badge-main {
    font-size: 11px;
    padding: 6px 12px;
    margin-bottom: 12px;
  }
  
  .category-title-compact {
    font-size: 18px;
    margin-bottom: 6px;
  }
  
  .category-description-compact {
    font-size: 13px;
    margin-bottom: 10px;
  }
  
  .card-stats-compact {
    gap: 6px;
    margin-bottom: 10px;
  }
  
  .stat-item-compact {
    padding: 3px 6px;
    font-size: 10px;
  }
  
  .card-features-compact {
    gap: 4px;
    margin-bottom: 12px;
  }
  
  .feature-item-compact {
    padding: 5px 8px;
    font-size: 10px;
  }
  
  .btn-category-compact {
    padding: 10px 14px;
    font-size: 13px;
  }
}

.category-grid-experimental {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.category-card-experimental {
  position: relative;
  background: white;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  border: 2px solid transparent;
  min-height: 280px;
}

.category-card-experimental:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2);
  border-color: rgba(102, 126, 234, 0.3);
}

/* 🎨 АНИМИРОВАННЫЕ ФОНЫ */
.card-background-animated {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 140px;
  overflow: hidden;
}

.animated-gradient {
  width: 100%;
  height: 100%;
  background-size: 400% 400%;
  animation: gradientShift 8s ease-in-out infinite;
  position: relative;
}

.gradient-new {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #667eea 75%, #764ba2 100%);
}

.gradient-social {
  background: linear-gradient(135deg, #4267B2 0%, #34A853 25%, #1DA1F2 50%, #4267B2 75%, #34A853 100%);
}

.gradient-used {
  background: linear-gradient(135deg, #FF6B6B 0%, #4ECDC4 25%, #45B7D1 50%, #FF6B6B 75%, #4ECDC4 100%);
}

@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  25% { background-position: 100% 50%; }
  50% { background-position: 100% 100%; }
  75% { background-position: 0% 100%; }
}

/* 🎪 ПЛАВАЮЩИЕ ЭЛЕМЕНТЫ */
.floating-elements {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.float-element {
  position: absolute;
  font-size: 20px;
  opacity: 0.3;
  animation: floatAround 12s linear infinite;
}

.element-1 {
  top: 20%;
  left: 15%;
  animation-delay: 0s;
}

.element-2 {
  top: 30%;
  right: 20%;
  animation-delay: 3s;
}

.element-3 {
  bottom: 30%;
  left: 20%;
  animation-delay: 6s;
}

.element-4 {
  bottom: 20%;
  right: 15%;
  animation-delay: 9s;
}

@keyframes floatAround {
  0%, 100% { 
    transform: translateY(0) rotate(0deg) scale(1); 
    opacity: 0.3; 
  }
  25% { 
    transform: translateY(-15px) rotate(90deg) scale(1.2); 
    opacity: 0.6; 
  }
  50% { 
    transform: translateY(-30px) rotate(180deg) scale(1); 
    opacity: 0.4; 
  }
  75% { 
    transform: translateY(-15px) rotate(270deg) scale(1.1); 
    opacity: 0.5; 
  }
}

/* 📝 КОНТЕНТ КАРТОЧЕК */
.card-content-experimental {
  padding: 160px 25px 25px 25px;
  position: relative;
  z-index: 2;
}

.card-header-experimental {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 15px;
  flex-wrap: wrap;
  gap: 10px;
}

.category-badge-experimental {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: white;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.category-badge-experimental.new {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.category-badge-experimental.social {
  background: linear-gradient(135deg, #4267B2 0%, #34A853 100%);
}

.category-badge-experimental.used {
  background: linear-gradient(135deg, #FF6B6B 0%, #4ECDC4 100%);
}

.card-stats {
  display: flex;
  gap: 8px;
}

.stat-item {
  background: rgba(102, 126, 234, 0.1);
  color: #667eea;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(102, 126, 234, 0.2);
}

.category-title-experimental {
  font-size: 22px;
  font-weight: 800;
  color: #2d3748;
  margin: 0 0 10px 0;
  line-height: 1.2;
  background: linear-gradient(135deg, #2d3748 0%, #4a5568 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.category-description-experimental {
  font-size: 15px;
  color: #718096;
  margin: 0 0 15px 0;
  line-height: 1.4;
}

.card-features {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.feature-item-small {
  background: rgba(102, 126, 234, 0.05);
  color: #667eea;
  padding: 6px 12px;
  border-radius: 15px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid rgba(102, 126, 234, 0.1);
}

/* 🎯 ЭКСПЕРИМЕНТАЛЬНЫЕ КНОПКИ */
.btn-category-experimental {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 16px;
  padding: 0;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  width: 100%;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}

.btn-category-experimental:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 40px rgba(102, 126, 234, 0.4);
}

.btn-text-experimental {
  flex: 1;
  padding: 16px 20px;
  font-size: 15px;
  font-weight: 700;
  text-align: left;
}

.btn-icon-experimental {
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.btn-category-experimental:hover .btn-icon-experimental {
  background: rgba(255, 255, 255, 0.3);
}

.arrow-experimental {
  font-size: 20px;
  font-weight: bold;
  transition: transform 0.3s ease;
}

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

/* 🎨 ДЕКОРАТИВНЫЕ ЭЛЕМЕНТЫ */
.card-decoration {
  position: absolute;
  bottom: 25px;
  right: 25px;
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0.3;
}

.decoration-line {
  width: 30px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #667eea, transparent);
}

.decoration-dots {
  display: flex;
  gap: 4px;
}

.decoration-dots .dot {
  width: 4px;
  height: 4px;
  background: #667eea;
  border-radius: 50%;
  animation: dotPulse 2s ease-in-out infinite;
}

.decoration-dots .dot:nth-child(2) {
  animation-delay: 0.3s;
}

.decoration-dots .dot:nth-child(3) {
  animation-delay: 0.6s;
}

@keyframes dotPulse {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.5); }
}

/* 📱 МОБИЛЬНАЯ АДАПТАЦИЯ V2 */
@media (max-width: 768px) {
  .category-grid-experimental {
    gap: 20px;
  }
  
  .category-card-experimental {
    min-height: 260px;
    border-radius: 20px;
  }
  
  .card-background-animated {
    height: 120px;
  }
  
  .card-content-experimental {
    padding: 140px 20px 20px 20px;
  }
  
  .category-title-experimental {
    font-size: 20px;
  }
  
  .category-description-experimental {
    font-size: 14px;
  }
  
  .float-element {
    font-size: 18px;
  }
  
  .btn-text-experimental {
    font-size: 14px;
    padding: 14px 18px;
  }
  
  .btn-icon-experimental {
    width: 55px;
    height: 55px;
  }
}

@media (max-width: 480px) {
  .categories-experimental {
    padding: 0 2px;
  }
  
  .category-grid-experimental {
    gap: 16px;
  }
  
  .category-card-experimental {
    min-height: 240px;
    border-radius: 18px;
  }
  
  .card-background-animated {
    height: 100px;
  }
  
  .card-content-experimental {
    padding: 120px 16px 16px 16px;
  }
  
  .card-header-experimental {
    margin-bottom: 12px;
  }
  
  .category-badge-experimental {
    font-size: 9px;
    padding: 5px 12px;
  }
  
  .category-title-experimental {
    font-size: 18px;
    margin-bottom: 8px;
  }
  
  .category-description-experimental {
    font-size: 13px;
    margin-bottom: 12px;
  }
  
  .card-features {
    gap: 8px;
    margin-bottom: 16px;
  }
  
  .feature-item-small {
    font-size: 11px;
    padding: 5px 10px;
  }
  
  .float-element {
    font-size: 16px;
  }
  
  .btn-text-experimental {
    font-size: 13px;
    padding: 12px 16px;
  }
  
  .btn-icon-experimental {
    width: 50px;
    height: 50px;
  }
  
  .arrow-experimental {
    font-size: 18px;
  }
}

/* ============================================
   💰 СТРАНИЦА УСПЕШНОЙ ОПЛАТЫ
   ============================================ */

.payment-success-container {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
}

.success-icon {
  margin-bottom: 30px;
}

.checkmark-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4caf50, #45a049);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(76, 175, 80, 0.3);
  animation: successPulse 2s ease-in-out infinite;
}

.checkmark {
  color: white;
  font-size: 40px;
  font-weight: bold;
  animation: checkmarkAppear 0.6s ease-out;
}

.success-title {
  font-size: 24px;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 10px;
  background: linear-gradient(135deg, #4caf50, #45a049);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.success-subtitle {
  font-size: 16px;
  color: #666;
  margin-bottom: 30px;
  line-height: 1.5;
}

.payment-info-card, .next-steps-card, .support-card {
  background: white;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  border: 1px solid #f0f0f0;
}

.payment-info-card h3, .next-steps-card h3 {
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 15px;
  text-align: left;
}

.payment-details {
  text-align: left;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f5f5f5;
}

.detail-row:last-child {
  border-bottom: none;
}

.detail-label {
  font-weight: 500;
  color: #666;
}

.detail-value {
  font-weight: 600;
  color: #2c3e50;
}

.success-status {
  color: #4caf50 !important;
}

.steps-list {
  text-align: left;
}

.step-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.step-number {
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}

.step-text {
  color: #555;
  font-size: 14px;
  line-height: 1.4;
}

.action-buttons {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}

.btn-primary, .btn-secondary {
  flex: 1;
  padding: 12px 20px;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-primary {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.btn-secondary {
  background: #f8f9fa;
  color: #666;
  border: 1px solid #e9ecef;
}

.btn-secondary:hover {
  background: #e9ecef;
  transform: translateY(-1px);
}

.support-card {
  background: #f8f9ff;
  border: 1px solid #e3f2fd;
  text-align: center;
}

.support-card p {
  margin: 5px 0;
  font-size: 14px;
  color: #555;
}

.support-card a {
  color: #667eea;
  text-decoration: none;
  font-weight: 600;
}

.support-card a:hover {
  text-decoration: underline;
}

/* 🎭 АНИМАЦИИ */
@keyframes successPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes checkmarkAppear {
  0% { transform: scale(0) rotate(45deg); opacity: 0; }
  50% { transform: scale(1.2) rotate(45deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* 📱 АДАПТИВНОСТЬ */
@media (max-width: 480px) {
  .payment-success-container {
    padding: 15px;
  }
  
  .success-title {
    font-size: 20px;
  }
  
  .action-buttons {
    flex-direction: column;
  }
  
  .btn-primary, .btn-secondary {
    width: 100%;
  }
}

/* ============================================
   ⏳ СТРАНИЦА ОЖИДАНИЯ ОПЛАТЫ
   ============================================ */

.payment-pending-container {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
}

.pending-icon {
  margin-bottom: 30px;
}

.loading-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffa726, #ff9800);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(255, 167, 38, 0.3);
  animation: pendingPulse 2s ease-in-out infinite;
}

.spinner {
  color: white;
  font-size: 40px;
  animation: rotate 2s linear infinite;
}

.pending-title {
  font-size: 24px;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 10px;
  background: linear-gradient(135deg, #ffa726, #ff9800);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.pending-subtitle {
  font-size: 16px;
  color: #666;
  margin-bottom: 30px;
  line-height: 1.5;
}

.pending-status {
  color: #ffa726 !important;
}

.instruction-list {
  text-align: left;
}

.instruction-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.instruction-number {
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, #ffa726, #ff9800);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}

.instruction-text {
  color: #555;
  font-size: 14px;
  line-height: 1.4;
}

.auto-update-info {
  background: #fff8e1;
  border: 1px solid #ffecb3;
  border-radius: 12px;
  padding: 15px;
  margin-bottom: 20px;
}

.auto-update-info p {
  margin: 0 0 10px 0;
  font-size: 14px;
  color: #f57f17;
  font-weight: 500;
}

.progress-bar {
  width: 100%;
  height: 4px;
  background: #ffecb3;
  border-radius: 2px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #ffa726, #ff9800);
  width: 0%;
  transition: width 1s linear;
  border-radius: 2px;
}

/* 🎭 АНИМАЦИИ */
@keyframes pendingPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

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

/* 📱 АДАПТИВНОСТЬ */
@media (max-width: 480px) {
  .payment-pending-container {
    padding: 15px;
  }
  
  .pending-title {
    font-size: 20px;
  }
}

/* ============================================
   💰 СТРАНИЦА ИНСТРУКЦИЙ КРИПТОПЛАТЕЖЕЙ
   ============================================ */

.crypto-instructions-container {
  max-width: 450px;
  margin: 0 auto;
  padding: 20px;
}

.instructions-header {
  text-align: center;
  margin-bottom: 30px;
}

.crypto-icon {
  font-size: 60px;
  margin-bottom: 15px;
  animation: cryptoFloat 3s ease-in-out infinite;
}

.instructions-title {
  font-size: 26px;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 10px;
  background: linear-gradient(135deg, #ffa726, #ff9800);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.instructions-subtitle {
  font-size: 16px;
  color: #666;
  line-height: 1.5;
}

.order-info-card, .instructions-card, .warnings-card, .recommendations-card {
  background: white;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  border: 1px solid #f0f0f0;
}

.order-info-card h3, .instructions-card h3, .warnings-card h3, .recommendations-card h3 {
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.order-details {
  text-align: left;
}

.step-item {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  margin-bottom: 20px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 12px;
  border-left: 4px solid #ffa726;
}

.step-number {
  width: 30px;
  height: 30px;
  background: linear-gradient(135deg, #ffa726, #ff9800);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(255, 167, 38, 0.3);
}

.step-content h4 {
  margin: 0 0 8px 0;
  color: #2c3e50;
  font-size: 16px;
  font-weight: 600;
}

.step-content p {
  margin: 0;
  color: #555;
  font-size: 14px;
  line-height: 1.4;
}

.network-options {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.network-option {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #e9ecef;
  background: white;
  font-size: 13px;
}

.network-option.recommended {
  border-color: #4caf50;
  background: #f1f8e9;
}

.network-option strong {
  display: block;
  margin-bottom: 2px;
}

.network-option small {
  color: #666;
  font-size: 11px;
}

.warning-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 15px;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid #ffecb3;
  background: #fffbf0;
}

.warning-item.critical {
  border-color: #ff6b6b;
  background: #fff5f5;
}

.warning-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.warning-text {
  font-size: 14px;
  line-height: 1.4;
  color: #333;
}

.warning-text strong {
  color: #d32f2f;
}

.recommendation-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.recommendation-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
}

.rec-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.rec-text {
  font-size: 14px;
  color: #555;
  line-height: 1.4;
}

.btn-primary.crypto-continue {
  background: linear-gradient(135deg, #ffa726, #ff9800);
  box-shadow: 0 4px 15px rgba(255, 167, 38, 0.3);
  font-size: 16px;
  padding: 14px 20px;
}

.btn-primary.crypto-continue:hover {
  box-shadow: 0 6px 20px rgba(255, 167, 38, 0.4);
}

/* 🎭 АНИМАЦИИ */
@keyframes cryptoFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

/* 📱 АДАПТИВНОСТЬ */
@media (max-width: 480px) {
  .crypto-instructions-container {
    padding: 15px;
  }
  
  .instructions-title {
    font-size: 22px;
  }
  
  .step-item {
    flex-direction: column;
    text-align: center;
  }
  
  .step-number {
    align-self: center;
  }
}

/* ======= ПОДСКАЗКА О РАЗВОРАЧИВАНИИ ======= */
.expand-hint {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  margin-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.hint-text {
  font-size: 12px;
  color: #666;
  font-weight: 500;
}

.hint-arrow {
  font-size: 10px;
  color: #007bff;
  transition: transform 0.3s ease;
}

.order-card-premium:hover .hint-arrow {
  transform: translateY(2px);
}

.order-card-premium:hover .expand-hint {
  background: rgba(0, 123, 255, 0.05);
  border-radius: 6px;
}

/* МИНИМАЛИСТИЧНАЯ ШАПКА ИСТОРИИ ЗАКАЗОВ */
.order-history-header-simple {
  padding: 25px 20px;
  text-align: center;
  background: #ffffff;
  color: #333;
  margin-bottom: 20px;
  border-bottom: 1px solid #e9ecef;
}

.order-history-header-simple .profile-title {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  color: #333;
}

/* ======= БЕЙДЖ С БОНУСАМИ ======= */
.bonus-badge {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 16px;
  padding: 16px;
  margin: 16px 0;
  color: white;
  box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
  position: relative;
  overflow: hidden;
}

.bonus-badge::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
  pointer-events: none;
}

.bonus-badge-level {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
}

.level-icon {
  font-size: 20px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.level-text {
  font-size: 18px;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  letter-spacing: 0.5px;
}

.bonus-badge-amount {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
}

.bonus-icon {
  font-size: 18px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.bonus-text {
  font-size: 22px;
  font-weight: 800;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  letter-spacing: 0.5px;
}

.bonus-badge-progress {
  position: relative;
  z-index: 1;
}

/* ======= ДЕТАЛЬНАЯ СТАТИСТИКА КЛИЕНТА ======= */
.customer-stats {
  margin: 15px 0;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 16px;
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0;
  font-size: 14px;
}

.stat-row:first-child {
  margin-top: 0;
}

.stat-row:last-child {
  margin-bottom: 0;
}

.stat-label {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 400;
  font-size: 13px;
}

.stat-value {
  color: #ffffff;
  font-weight: 600;
  font-size: 15px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* ======= ИНФОРМАЦИЯ О ПРОГРЕССЕ ======= */
.progress-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  gap: 10px;
}

.next-level-bonus {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(76, 175, 80, 0.25);
  padding: 4px 8px;
  border-radius: 12px;
  border: 1px solid rgba(76, 175, 80, 0.4);
  backdrop-filter: blur(5px);
  font-weight: 500;
  white-space: nowrap;
}

.progress-text {
  font-size: 12px;
  opacity: 0.9;
  margin-bottom: 6px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.progress-bar {
  height: 6px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #00d4aa, #00b4d8);
  border-radius: 3px;
  transition: width 0.8s ease;
  box-shadow: 0 0 8px rgba(0, 212, 170, 0.6);
}

/* УРОВНИ БОНУСОВ */
.bonus-badge.bronze {
  background: linear-gradient(135deg, #8d6e63 0%, #6d4c41 100%);
  box-shadow: 0 8px 32px rgba(141, 110, 99, 0.3);
}

.bonus-badge.silver {
  background: linear-gradient(135deg, #90a4ae 0%, #607d8b 100%);
  box-shadow: 0 8px 32px rgba(144, 164, 174, 0.3);
}

.bonus-badge.gold {
  background: linear-gradient(135deg, #ffb74d 0%, #ff9800 100%);
  box-shadow: 0 8px 32px rgba(255, 183, 77, 0.3);
}

.bonus-badge.platinum {
  background: linear-gradient(135deg, #ab47bc 0%, #9c27b0 100%);
  box-shadow: 0 8px 32px rgba(171, 71, 188, 0.3);
}

/* ======= МОДАЛЬНОЕ ОКНО УСПЕШНОГО ЗАКАЗА ======= */
.success-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  backdrop-filter: blur(10px);
}

.success-modal.show {
  display: flex;
  animation: fadeIn 0.3s ease-out;
}

.success-modal-content {
  background: #ffffff;
  border-radius: 20px;
  padding: 40px 30px;
  max-width: 360px;
  width: 90%;
  text-align: center;
  color: #333;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  animation: slideInUp 0.4s ease-out;
  position: relative;
  border: 1px solid #e0e0e0;
}

.success-icon {
  font-size: 60px;
  margin-bottom: 20px;
  animation: bounce 0.6s ease-out;
}

.success-title {
  font-size: 24px;
  font-weight: 600;
  margin: 15px 0;
  color: #333;
}

.order-number {
  font-size: 20px;
  font-weight: 700;
  margin: 20px 0;
  color: #4CAF50;
  background: #f8f9fa;
  padding: 12px 20px;
  border-radius: 12px;
  border: 2px solid #e8f5e8;
}

.success-message {
  margin: 25px 0;
  text-align: left;
  background: #f8f9fa;
  border-radius: 16px;
  padding: 20px;
  border: 1px solid #e9ecef;
}

.success-message p {
  margin: 14px 0;
  font-size: 15px;
  color: #555;
  font-weight: 500;
  line-height: 1.4;
}

.success-message p:first-child {
  margin-top: 0;
}

.success-message p:last-child {
  margin-bottom: 0;
}

.success-note {
  background: #e8f5e8;
  border-radius: 12px;
  padding: 16px;
  margin: 20px 0;
  font-size: 14px;
  color: #2e7d32;
  border: 1px solid #c8e6c9;
  text-align: center;
  line-height: 1.5;
}

.success-note strong {
  color: #4CAF50;
  font-weight: 600;
}

.success-close-btn {
  background: #4CAF50;
  border: none;
  color: white;
  padding: 16px 32px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 25px;
  width: 100%;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

.success-close-btn:hover {
  background: #45a049;
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
}

.success-close-btn:active {
  transform: translateY(0);
}

/* Анимации */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

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

/* ======= АНИМАЦИЯ ЗАГРУЗКИ КНОПКИ ======= */
.loading-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #ffffff;
  animation: spin 1s ease-in-out infinite;
  margin-right: 8px;
}

.btn-primary.loading {
  background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
  cursor: not-allowed;
  opacity: 0.8;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ======= КОМПАКТНАЯ ИНФОРМАЦИЯ О ЗАКАЗЕ ======= */
.order-full-info-compact {
  padding: 10px 0;
}

.info-section-compact {
  margin-bottom: 15px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  border-left: 3px solid rgba(0, 123, 255, 0.3);
}

.section-header {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

/* КОМПАКТНЫЕ ТОВАРЫ */
.item-compact {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.item-compact:last-of-type {
  border-bottom: none;
  margin-bottom: 8px;
}

.item-name-compact {
  font-weight: 500;
  color: #333;
  font-size: 13px;
  flex: 1;
  margin-right: 8px;
}

.item-calc {
  font-weight: 600;
  color: #28a745;
  font-size: 12px;
  white-space: nowrap;
}

.total-compact {
  text-align: right;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 14px;
  color: #28a745;
}

/* КОМПАКТНЫЕ СТРОКИ */
.compact-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  font-size: 13px;
}

.compact-label {
  font-weight: 500;
  color: #555;
}

.compact-value {
  font-weight: 600;
  color: #333;
  text-align: right;
}

.payment-amount {
  color: #dc3545 !important;
  font-weight: 700;
}

.payment-note {
  margin-top: 4px;
  text-align: center;
  font-style: italic;
  color: #666;
}

.tracking-compact {
  font-family: 'Courier New', monospace;
  background: rgba(0, 123, 255, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
  color: #007bff !important;
  font-size: 11px;
}

/* КОМПАКТНАЯ МЕТА-ИНФОРМАЦИЯ */
.order-meta-compact {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  margin-bottom: 10px;
}

.meta-item {
  font-size: 11px;
  color: #666;
  font-weight: 500;
}

/* КОМПАКТНЫЕ КНОПКИ */
.actions-compact {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.btn-compact {
  flex: 1;
  min-width: 80px;
  padding: 8px 12px;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-compact.track {
  background: linear-gradient(135deg, #007bff, #0056b3);
  color: white;
}

.btn-compact.pay {
  background: linear-gradient(135deg, #28a745, #1e7e34);
  color: white;
}

.btn-compact.support {
  background: linear-gradient(135deg, #6c757d, #495057);
  color: white;
}

.btn-compact:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* МОБИЛЬНАЯ АДАПТАЦИЯ */
@media (max-width: 480px) {
  .compact-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  
  .compact-value {
    text-align: left;
  }
  
  .order-meta-compact {
    flex-direction: column;
    gap: 4px;
  }
  
  .actions-compact {
    flex-direction: column;
  }
  
  .btn-compact {
    flex: none;
  }
}

/* ============================================
   📦 МОДАЛЬНОЕ ОКНО ОГРАНИЧЕНИЯ ОСТАТКОВ
   ============================================ */

.stock-limit-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.3s ease;
  padding: 20px;
}

.stock-limit-overlay.active {
  opacity: 1;
}

.stock-limit-modal {
  background: white;
  border-radius: 24px;
  max-width: 400px;
  width: 100%;
  padding: 32px 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  transform: scale(0.9);
  transition: transform 0.3s ease;
}

.stock-limit-overlay.active .stock-limit-modal {
  transform: scale(1);
}

.stock-limit-header {
  text-align: center;
  margin-bottom: 24px;
}

.stock-limit-icon {
  font-size: 48px;
  margin-bottom: 12px;
  animation: pulse 2s infinite;
}

.stock-limit-header h2 {
  font-size: 22px;
  font-weight: 700;
  color: #333;
  margin: 0;
}

.stock-limit-content {
  margin-bottom: 24px;
}

.stock-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-radius: 12px;
  background: #f8f9fa;
  margin-bottom: 12px;
}

.stock-info-row.highlight {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.stock-label {
  font-size: 15px;
  font-weight: 500;
}

.stock-value {
  font-size: 18px;
  font-weight: 700;
}

.stock-value.requested {
  color: #dc3545;
}

.stock-value.available {
  color: #ffc107;
}

.stock-value.max {
  color: white;
}

.stock-info-row.highlight .stock-label {
  color: rgba(255, 255, 255, 0.9);
}

.stock-limit-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.stock-limit-actions .btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  padding: 16px 24px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s;
}

.stock-limit-actions .btn-primary:active {
  transform: scale(0.95);
}

.stock-limit-actions .btn-secondary {
  background: #f8f9fa;
  color: #666;
  border: none;
  padding: 14px 24px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}

.stock-limit-actions .btn-secondary:active {
  background: #e9ecef;
}

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

/* ============================================
   💰 СТИЛИ БОНУСНОЙ СИСТЕМЫ
   ============================================ */

/* Блок бонусов в корзине */
.cart-bonuses-block {
  background: linear-gradient(135deg, #667eea15, #764ba215);
  border: 2px solid #667eea;
  border-radius: 16px;
  padding: 16px;
  margin: 16px 0;
  animation: fadeIn 0.3s ease-out;
}

.cart-bonuses-block.disabled {
  background: #f8f9fa;
  border-color: #dee2e6;
}

.bonuses-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

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

.bonuses-text {
  font-size: 15px;
  font-weight: 600;
  color: #667eea;
}

.bonuses-text-small {
  font-size: 14px;
  font-weight: 500;
  color: #6c757d;
}

.bonuses-checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 12px;
  background: white;
  border-radius: 12px;
  transition: all 0.2s;
}

.bonuses-checkbox-label:active {
  transform: scale(0.98);
}

.bonuses-checkbox {
  width: 24px;
  height: 24px;
  cursor: pointer;
  accent-color: #667eea;
}

.bonuses-checkbox-text {
  font-size: 15px;
  font-weight: 500;
  color: #333;
  flex: 1;
}

.bonuses-discount-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  margin-top: 12px;
  background: white;
  border-radius: 12px;
  font-size: 15px;
  color: #6c757d;
}

.discount-value {
  font-weight: 600;
  color: #28a745;
}

.bonuses-final-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px;
  margin-top: 8px;
  background: linear-gradient(135deg, #28a745, #20c997);
  border-radius: 12px;
  font-size: 18px;
  font-weight: 700;
  color: white;
}

.final-total-value {
  font-size: 20px;
}

.bonuses-minimum-hint {
  padding: 12px;
  background: white;
  border-radius: 12px;
  text-align: center;
  font-size: 13px;
  color: #6c757d;
  line-height: 1.5;
}

/* Блок бонусов на checkout */
.checkout-bonuses-info {
  padding: 12px 0;
  border-top: 1px solid #e9ecef;
  margin-top: 12px;
}

.checkout-bonus-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  font-size: 15px;
  color: #6c757d;
}

.bonus-discount {
  font-weight: 600;
  color: #28a745;
  font-size: 16px;
}

.delivery-cost {
  font-weight: 600;
  color: #007bff;
  font-size: 16px;
}

/* VIP статус в профиле */
.bonus-badge.vip {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  border-color: #f5576c;
}

/* ============================================
   💎 БЛОК БОНУСОВ С РАЗДЕЛИТЕЛЕМ (КАК ИТОГО)
   ============================================ */
.premium-empty-cart-bonus-block-2025 {
  margin-top: 100px !important;
  margin-left: -20px !important;
  margin-right: -20px !important;
  padding: 16px 20px !important;
  background: linear-gradient(135deg, 
    rgba(102, 94, 234, 0.05) 0%, 
    rgba(118, 75, 162, 0.05) 100%
  ) !important;
  border: 1.5px solid rgba(102, 94, 234, 0.2) !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  box-shadow: 0 2px 8px rgba(102, 94, 234, 0.06) !important;
  width: calc(100% + 40px) !important;
}

/* ЛЕВАЯ ЧАСТЬ: Иконка + Бонусы */
.bonus-left-2025 {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.premium-bonus-icon-2025 {
  font-size: 32px !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}

.bonus-amount-wrapper-2025 {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.bonus-amount-label-2025 {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #6c757d !important;
  line-height: 1.2 !important;
}

.bonus-amount-value-2025 {
  font-size: 16px !important;
  font-weight: 700 !important;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
}

/* РАЗДЕЛИТЕЛЬ */
.bonus-divider-2025 {
  width: 2px !important;
  height: 50px !important;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(102, 94, 234, 0.2) 10%,
    rgba(102, 94, 234, 0.3) 50%,
    rgba(102, 94, 234, 0.2) 90%,
    transparent
  ) !important;
  border-radius: 2px !important;
  flex-shrink: 0 !important;
}

/* ПРАВАЯ ЧАСТЬ: Описание */
.bonus-right-2025 {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
}

.premium-bonus-text-2025 {
  font-size: 13px !important;
  color: #6c757d !important;
  line-height: 1.4 !important;
  font-weight: 500 !important;
  margin: 0 !important;
  text-align: left !important;
}

/* ============================================
   💰 БОНУСНАЯ СИСТЕМА - PREMIUM ДИЗАЙН 2025
   ============================================ */

.cart-bonuses-inline {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0;
  margin: 0;
  background: linear-gradient(135deg, rgba(102, 94, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
  border-radius: 12px;
  padding: 8px 12px;
  border: 1px solid rgba(102, 94, 234, 0.15);
  transition: all 0.3s ease;
}

.cart-bonuses-inline:not(.disabled):hover {
  border-color: rgba(102, 94, 234, 0.3);
  box-shadow: 0 4px 12px rgba(102, 94, 234, 0.1);
  transform: translateY(-1px);
}

.cart-bonuses-inline.disabled {
  opacity: 0.6;
  background: linear-gradient(135deg, rgba(150, 150, 150, 0.05) 0%, rgba(180, 180, 180, 0.05) 100%);
  border-color: rgba(150, 150, 150, 0.15);
}

.bonus-checkbox-inline {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
}

.bonus-checkbox-inline:hover:not(:has(input:disabled)) .checkbox-mark {
  border-color: #667eea;
  box-shadow: 0 0 8px rgba(102, 94, 234, 0.3);
}

.bonus-checkbox-inline input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkbox-mark {
  width: 22px;
  height: 22px;
  border: 2.5px solid #667eea;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: white;
  flex-shrink: 0;
  margin-top: 1px;
  box-shadow: 0 2px 6px rgba(102, 94, 234, 0.15);
}

.bonus-checkbox-inline input[type="checkbox"]:checked ~ .checkbox-mark {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-color: #667eea;
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(102, 94, 234, 0.4);
  animation: checkBounce 0.3s ease;
}

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

.bonus-checkbox-inline input[type="checkbox"]:checked ~ .checkbox-mark::after {
  content: "✓";
  color: white;
  font-size: 14px;
  font-weight: 800;
  animation: checkPop 0.3s ease;
}

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

/* ============================================
   DISABLED СОСТОЯНИЕ (когда < €20 или == 0)
   ============================================ */
.bonus-checkbox-inline input[type="checkbox"]:disabled ~ .checkbox-mark {
  background: #f7fafc;
  border-color: #cbd5e0;
  cursor: not-allowed;
  opacity: 0.6;
  box-shadow: none;
}

.cart-bonuses-inline.disabled .bonus-checkbox-inline {
  cursor: not-allowed;
}

.cart-bonuses-inline.disabled .bonus-label {
  color: #a0aec0;
  font-weight: 500;
}

.cart-bonuses-inline.disabled .bonus-amount-inline {
  background: linear-gradient(135deg, #cbd5e0 0%, #a0aec0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 600;
}

.bonus-text-wrapper {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
}

.bonus-label {
  font-size: 14px;
  font-weight: 600;
  color: #2d3748;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.bonus-amount-inline {
  font-size: 13px;
  font-weight: 700;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.bonus-label-small {
  font-size: 13px;
  font-weight: 500;
  color: #718096;
}

.bonus-discount-inline {
  font-size: 13px;
  font-weight: 700;
  color: #10b981;
  margin-top: 2px;
  text-shadow: 0 1px 2px rgba(16, 185, 129, 0.2);
  animation: fadeIn 0.3s ease;
}

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

/* ============================================
   🚚 БЛОК ВЫБОРА ДОСТАВКИ (ЕВРОПА)
   ============================================ */
.cart-delivery-selector {
  margin-top: 16px;
  padding: 16px;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
  border: 1.5px solid rgba(102, 126, 234, 0.2);
  border-radius: 16px;
  animation: slideIn 0.4s ease;
}

.delivery-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(102, 126, 234, 0.15);
}

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

.delivery-title {
  font-size: 15px;
  font-weight: 700;
  color: #2d3748;
}

.delivery-options {
  display: flex;
  gap: 12px;
}

.delivery-option {
  flex: 1;
  position: relative;
  cursor: pointer;
  border: 2px solid rgba(203, 213, 224, 0.5);
  border-radius: 12px;
  padding: 12px;
  background: white;
  transition: all 0.3s ease;
}

.delivery-option:hover {
  border-color: rgba(102, 126, 234, 0.4);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.1);
  transform: translateY(-2px);
}

.delivery-option.active {
  border-color: #667eea;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%);
  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.25);
}

.delivery-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.delivery-option-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

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

.delivery-option-name {
  font-size: 14px;
  font-weight: 700;
  color: #2d3748;
}

.delivery-option.active .delivery-option-name {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.delivery-option-price {
  font-size: 16px;
  font-weight: 800;
  color: #667eea;
}

.delivery-option-time {
  font-size: 12px;
  color: #718096;
  font-weight: 500;
}

/* 📦 КОМПАКТНЫЙ БЛОК ДОСТАВКИ (БЕЗ ВЫБОРА) */
.delivery-compact-info {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%);
  border-radius: 12px;
  padding: 12px 16px;
  border: 1.5px solid rgba(102, 126, 234, 0.3);
}

.delivery-compact-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.delivery-compact-content .delivery-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.delivery-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.delivery-name {
  font-size: 14px;
  font-weight: 700;
  color: #2d3748;
}

.delivery-time {
  font-size: 12px;
  color: #718096;
  font-weight: 500;
}

.delivery-compact-content .delivery-price {
  font-size: 16px;
  font-weight: 800;
  color: #667eea;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .delivery-compact-info {
    padding: 10px 14px;
  }
  
  .delivery-name {
    font-size: 13px;
  }
  
  .delivery-compact-content .delivery-price {
    font-size: 15px;
  }
}

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

/* Адаптация для мобильных */
@media (max-width: 768px) {
  .delivery-options {
    flex-direction: column;
  }
  
  .delivery-option {
    padding: 14px;
  }
  
  .delivery-option-name {
    font-size: 13px;
  }
  
  .delivery-option-price {
    font-size: 15px;
  }
}

/* Адаптация для мобильных */
@media (max-width: 768px) {
  .bonus-label {
    font-size: 12px;
  }
  
  .bonus-amount-inline {
    font-size: 10px;
  }
  
  .checkbox-mark {
    width: 18px;
    height: 18px;
  }
}

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

.cart-bonuses-block-compact {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.08), rgba(118, 75, 162, 0.08));
  border: 1px solid rgba(102, 126, 234, 0.3);
  border-radius: 12px;
  padding: 12px;
  margin: 0; /* Убрали margin */
  display: flex;
  flex-direction: column;
  gap: 10px;
  order: 1; /* ПОКАЗЫВАЕМ БОНУСЫ ПЕРВЫМИ (СВЕРХУ) */
}

.cart-bonuses-block-compact.disabled {
  opacity: 0.6;
  border-color: #dee2e6;
  background: #f8f9fa;
}

/* Одна строка: иконка + текст */
.bonuses-row-compact {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bonus-icon-sm {
  font-size: 20px;
  flex-shrink: 0;
}

.bonus-text-sm {
  font-size: 14px;
  font-weight: 600;
  color: #667eea;
  flex: 1;
}

.cart-bonuses-block-compact.disabled .bonus-text-sm {
  color: #6c757d;
}

/* Компактный чекбокс */
.bonus-checkbox-compact {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  position: relative;
}

.bonus-checkbox-compact input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkbox-icon {
  width: 20px;
  height: 20px;
  border: 2px solid #667eea;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  background: white;
  flex-shrink: 0;
}

.bonus-checkbox-compact input[type="checkbox"]:checked ~ .checkbox-icon {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-color: #667eea;
}

.bonus-checkbox-compact input[type="checkbox"]:checked ~ .checkbox-icon::after {
  content: "✓";
  color: white;
  font-size: 14px;
  font-weight: 700;
}

.checkbox-text-sm {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  flex: 1;
}

/* Результат расчётов */
.bonus-result-compact {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  background: white;
  border-radius: 8px;
  border: 1px solid #e1e8ed;
}

.result-label {
  font-size: 13px;
  color: #6c757d;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.result-label strong {
  color: #1a1f36;
  font-weight: 700;
}

/* Адаптация для мобильных */
@media (max-width: 768px) {
  .cart-bonuses-block-compact {
    padding: 10px;
    margin: 10px 0;
  }
  
  .bonus-icon-sm {
    font-size: 18px;
  }
  
  .bonus-text-sm {
    font-size: 13px;
  }
  
  .checkbox-text-sm {
    font-size: 13px;
  }
  
  .result-label {
    font-size: 12px;
  }
}

/* ============================================
   💰 БОНУСНАЯ СИСТЕМА V2 - МИНИМАЛИСТИЧНЫЙ ДИЗАЙН
   ============================================ */

.cart-bonuses-block-v2 {
  background: #ffffff;
  border: 1.5px solid #e1e8ed;
  border-radius: 16px;
  padding: 20px;
  margin: 20px 0;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease;
}

.cart-bonuses-block-v2.disabled {
  opacity: 0.7;
}

.bonuses-header-v2 {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.bonuses-icon-wrapper {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.bonuses-icon-v2 {
  font-size: 26px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

.bonuses-info-v2 {
  flex: 1;
}

.bonuses-title {
  font-size: 14px;
  font-weight: 600;
  color: #8b95a5;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.bonuses-amount {
  font-size: 22px;
  font-weight: 700;
  color: #1a1f36;
  letter-spacing: -0.5px;
}

.bonuses-amount.small {
  font-size: 18px;
  color: #6c757d;
}

/* Кастомный чекбокс */
.bonuses-checkbox-v2 {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  padding: 14px;
  background: #f8f9fa;
  border-radius: 12px;
  transition: all 0.2s ease;
  margin-bottom: 12px;
  position: relative;
}

.bonuses-checkbox-v2:active {
  transform: scale(0.98);
}

.bonuses-checkbox-v2 input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkbox-custom {
  width: 24px;
  height: 24px;
  border: 2px solid #667eea;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  background: white;
  flex-shrink: 0;
}

.bonuses-checkbox-v2 input[type="checkbox"]:checked ~ .checkbox-custom {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-color: #667eea;
}

.bonuses-checkbox-v2 input[type="checkbox"]:checked ~ .checkbox-custom::after {
  content: "✓";
  color: white;
  font-size: 16px;
  font-weight: 700;
}

.checkbox-label {
  font-size: 15px;
  font-weight: 500;
  color: #1a1f36;
  flex: 1;
}

/* Расчёты */
.bonuses-calculation {
  border-top: 1.5px solid #e1e8ed;
  padding-top: 12px;
  margin-top: 12px;
}

.calc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}

.calc-row.total {
  padding: 14px;
  margin: 12px -4px 0 -4px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
}

.calc-label {
  font-size: 15px;
  font-weight: 500;
  color: #6c757d;
}

.calc-row.total .calc-label {
  color: white;
  font-weight: 600;
  font-size: 16px;
}

.calc-value {
  font-size: 17px;
  font-weight: 700;
  color: #1a1f36;
}

.calc-value.discount {
  color: #28a745;
}

.calc-row.total .calc-value {
  color: white;
  font-size: 22px;
  letter-spacing: -0.5px;
}

/* Подсказка */
.bonuses-hint {
  padding: 12px;
  background: #f8f9fa;
  border-radius: 10px;
  text-align: center;
  font-size: 13px;
  color: #6c757d;
  line-height: 1.6;
  margin-top: 12px;
}

/* Адаптация для мобильных V2 */
@media (max-width: 768px) {
  .cart-bonuses-block-v2 {
    padding: 16px;
    margin: 16px 0;
  }
  
  .bonuses-icon-wrapper {
    width: 44px;
    height: 44px;
  }
  
  .bonuses-icon-v2 {
    font-size: 24px;
  }
  
  .bonuses-amount {
    font-size: 20px;
  }
  
  .checkbox-label {
    font-size: 14px;
  }
  
  .calc-row.total .calc-value {
    font-size: 20px;
  }
}

/* Адаптация для мобильных */
@media (max-width: 768px) {
  .cart-bonuses-block {
    padding: 14px;
    margin: 12px 0;
  }
  
  .bonuses-text {
    font-size: 14px;
  }
  
  .bonuses-checkbox-text {
    font-size: 14px;
  }
  
  .bonuses-final-total {
    padding: 12px;
    font-size: 16px;
  }
  
  .final-total-value {
    font-size: 18px;
  }
}

/* ============================================
   🎨 КОНЕЦ СТИЛЕЙ
   ============================================ */
  
/* 🔍 ПОИСК С АВТОДОПОЛНЕНИЕМ */
.search-wrapper {
  position: relative;
  flex: 1;
}

.search-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #ddd;
  border-top: none;
  border-radius: 0 0 8px 8px;
  max-height: 300px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior: contain;
  z-index: 1000;
  display: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.search-suggestions.active {
  display: block;
}

.suggestion-item {
  padding: 12px 16px;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
  transition: background 0.2s;
}

.suggestion-item:hover {
  background: #f8f9fa;
}

.suggestion-item:last-child {
  border-bottom: none;
}

.suggestion-highlight {
  font-weight: 600;
  color: #007bff;
}

.suggestion-show-all {
  padding: 12px 16px;
  cursor: pointer;
  background: #f0f4ff;
  color: #4a6cf7;
  font-weight: 600;
  font-size: 14px;
  text-align: center;
  border-top: 1px solid #dde3ff;
  transition: background 0.2s;
}

.suggestion-show-all:hover {
  background: #e0e8ff;
}

.suggestion-empty {
  padding: 12px 16px;
  color: #999;
  font-size: 14px;
  text-align: center;
}

.suggestion-translation {
  display: block;
  font-size: 11px;
  color: #aaa;
  margin-top: 2px;
}

/* 🎛️ МОДАЛЬНОЕ ОКНО ФИЛЬТРОВ */
.filters-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 10000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.filters-modal-overlay.hidden {
  display: none;
}

.filters-modal {
  background: white;
  border-radius: 24px 24px 0 0;
  width: 100%;
  max-width: 500px;
  max-height: 80vh;
  overflow-y: auto;
  animation: slideUp 0.3s ease-out;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

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

.filters-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-bottom: 1px solid #eee;
  position: sticky;
  top: 0;
  background: white;
  z-index: 1;
}

.filters-header h2 {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
}

.btn-close-modal {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: #f0f0f0;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.btn-close-modal:hover {
  background: #e0e0e0;
  transform: rotate(90deg);
}

.filters-content {
  padding: 20px;
}

.filter-group {
  margin-bottom: 24px;
}

.filter-label {
  display: block;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #333;
}

.filter-options {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.filter-btn {
  padding: 10px 16px;
  border: 2px solid #e0e0e0;
  background: white;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.filter-btn:hover {
  border-color: #007bff;
  color: #007bff;
}

.filter-btn.active {
  background: #007bff;
  border-color: #007bff;
  color: white;
}

.filter-select {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  font-size: 14px;
  background: white;
  cursor: pointer;
  transition: border-color 0.2s;
}

.filter-select:focus {
  outline: none;
  border-color: #007bff;
}

.price-range-inputs {
  display: flex;
  align-items: center;
  gap: 12px;
}

.price-range-inputs input {
  flex: 1;
  padding: 12px 16px;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  font-size: 14px;
  transition: border-color 0.2s;
  /* Фиксированный светло-серый фон */
  background-color: #f5f5f5;
  color: #000;
  caret-color: #007bff;
}

.price-range-inputs input::selection {
  background-color: var(--tg-theme-link-color, #007bff);
  color: #fff;
}

.price-range-inputs input:focus {
  outline: none;
  border-color: #007bff;
}

.price-range-inputs span {
  color: #999;
  font-weight: 600;
}

.filters-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}

.filters-actions .btn-primary,
.filters-actions .btn-secondary {
  flex: 1;
  padding: 14px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
}

.btn-secondary {
  background: #f0f0f0;
  color: #666;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-secondary:hover {
  background: #e0e0e0;
}

/* 🔔 КНОПКА УВЕДОМЛЕНИЙ О НАЛИЧИИ */
.btn-notify-stock {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
  opacity: 1 !important; /* ⭐ ВСЕГДА ЯРКАЯ, даже в out-of-stock карточках */
  position: relative;
  z-index: 2; /* Выше затемненного оверлея */
}

.btn-notify-stock:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.btn-notify-stock.subscribed {
  background: linear-gradient(135deg, #38a169 0%, #2f855a 100%);
  cursor: default;
  opacity: 1 !important; /* ⭐ ВСЕГДА ЯРКАЯ */
}

.btn-notify-stock.subscribed:hover {
  transform: none;
}

/* Десктоп: магазин как мобильное приложение — 480px по центру */
@media (min-width: 600px) {
  html {
    background-color: #e8e8e8;
    min-height: 100vh;
    display: flex;
    justify-content: center;
  }
  body {
    max-width: 480px;
    width: 100%;
    min-height: 100vh;
    background-color: #ffffff;
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
  }
  /* Нижняя навигация — держать строго в 480px рамке */
  .bottom-menu {
    left: 50%;
    transform: translateX(-50%);
    width: 480px;
    right: auto;
  }
  /* Уведомления — по центру, ограничить ширину */
  .notification {
    max-width: 440px;
  }
  /* Футер корзины — держать в 480px рамке */
  .modern-cart-footer {
    left: 50%;
    transform: translateX(-50%);
    width: 480px;
    right: auto;
  }
}

/* Скрытие строк таблицы цен — стоит последним, побеждает все !important выше */
.pricing-row.price-hidden,
.pricing-table-v3 .pricing-row.price-hidden,
.pricing-unified-table .pricing-row.price-hidden {
  display: none !important;
}

/* ──────────────────────────────────────────────
   eSIM — бейдж на карточке товара
   ────────────────────────────────────────────── */
.product-badge.esim-badge {
  background: linear-gradient(135deg, #6c5ce7, #a29bfe);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: 0 2px 8px rgba(108, 92, 231, 0.45);
}

/* ──────────────────────────────────────────────
   eSIM — информационный блок в checkout
   ────────────────────────────────────────────── */
.esim-checkout-info {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, #6c5ce7, #8b7cf6);
  border-radius: 14px;
  padding: 16px 18px;
  margin: 12px 0 4px;
  box-shadow: 0 4px 16px rgba(108, 92, 231, 0.35);
}
.esim-info-icon {
  font-size: 30px;
  flex-shrink: 0;
}
.esim-info-text {
  font-size: 13px;
  line-height: 1.5;
  color: #ffffff;
}
.esim-info-text strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 3px;
  color: #ffffff;
}

/* ──────────────────────────────────────────────
   eSIM — модал конфликта корзины
   ────────────────────────────────────────────── */
.esim-conflict-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.55);
  padding: 20px;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.esim-conflict-modal.esim-conflict-visible {
  opacity: 1;
  pointer-events: all;
}
.esim-conflict-inner {
  background: var(--card-bg, #1e1e2e);
  border-radius: 20px;
  padding: 28px 24px 24px;
  max-width: 340px;
  width: 100%;
  text-align: center;
  box-shadow: 0 24px 64px rgba(0,0,0,0.5);
  animation: esimConflictIn 0.35s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
@keyframes esimConflictIn {
  from { transform: scale(0.8) translateY(20px); opacity: 0; }
  to   { transform: scale(1) translateY(0);       opacity: 1; }
}
.esim-conflict-icon {
  font-size: 48px;
  margin-bottom: 12px;
}
.esim-conflict-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary, #fff);
  margin: 0 0 10px;
}
.esim-conflict-text {
  font-size: 13px;
  color: var(--text-secondary, #aaa);
  line-height: 1.55;
  margin: 0 0 10px;
}
.esim-conflict-text strong {
  color: var(--text-primary, #fff);
}
.esim-conflict-hint {
  font-size: 12px;
  color: #a29bfe;
  background: rgba(108,92,231,0.1);
  border-radius: 8px;
  padding: 8px 12px;
  margin: 0 0 18px;
  line-height: 1.4;
}
.esim-conflict-btn {
  display: block;
  width: 100%;
  padding: 13px;
  background: linear-gradient(135deg, #6c5ce7, #a29bfe);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.esim-conflict-btn:active {
  transform: scale(0.97);
  opacity: 0.85;
}