/* Основные стили */
* {
  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;
  /* Отступ страницы — переменной: full-bleed блоки (шапка, баннеры, чипы,
     герой FAQ) компенсируют его отрицательными полями через var, и при
     смене отступа в медиа-запросах ничего не вылезает за экран */
  --page-pad: 20px;
  padding: var(--page-pad);
  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);
}

/* 🎨 СОВРЕМЕННОЕ МОДАЛЬНОЕ ОКНО ВЫБОРА КОЛИЧЕСТВА */
#checkout-page { padding-bottom: calc(var(--page-pad, 20px) + 110px); }
#checkout-form :is(input, textarea, button, fieldset) { scroll-margin-bottom: 120px; }
.delivery-insurance { min-width: 0; margin: 20px 0; padding: 14px; border: 1.5px solid #e4e7ec; border-radius: 14px; background: #fff; }
.delivery-insurance[hidden] { display: none; }
.delivery-insurance legend { padding: 0 5px; color: #101828; font-size: 16px; font-weight: 750; }
.insurance-required { color: #667eea; }
.delivery-insurance p { margin: 8px 0; font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.delivery-insurance .insurance-recommendation { margin: 0 0 12px; padding: 9px 10px; border-left: 3px solid #e6b55b; border-radius: 0 8px 8px 0; background: #fffbf3; color: #674d20; }
.insurance-options { display: grid; gap: 7px; }
.delivery-insurance .insurance-choice { position: relative; display: block; min-width: 0; min-height: 64px; margin: 0; padding: 10px 12px; border: 1.5px solid #e4e7ec; border-radius: 12px; background: #fff; cursor: pointer; }
.insurance-choice:has(input:checked) { border-color: #667eea; background: #f5f7ff; }
.insurance-choice:has(input:checked) strong { color: #3538cd; }
.insurance-choice input[type="radio"] { position: absolute; z-index: 1; right: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; margin: 0; accent-color: #667eea; }
.insurance-choice .radio-content { min-width: 0; padding-right: 26px; }
.insurance-choice-copy { min-width: 0; flex: 1; }
.insurance-choice strong { display: block; font-size: 14px; font-weight: 700; line-height: 1.35; }
.insurance-choice small { display: block; margin-top: 4px; color: #667085; font-size: 12px; font-weight: 400; line-height: 1.4; overflow-wrap: anywhere; }
.insurance-choice:has(input:focus-visible) { outline: 2px solid #667eea; outline-offset: 2px; }
.insurance-estimate { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: #f5f7ff; color: #3538cd; font-size: 12px; font-weight: 600; }
.insurance-estimate small { display: block; margin-top: 3px; color: #667085; font-size: 11px; font-weight: 400; }
.insurance-estimate strong { font-size: 16px; font-weight: 750; white-space: nowrap; }
.insurance-details { margin-top: 8px; }
.insurance-details summary { display: flex; align-items: center; justify-content: space-between; min-height: 36px; color: #667085; font-size: 12px; font-weight: 600; cursor: pointer; list-style: none; }
.insurance-details summary::-webkit-details-marker { display: none; }
.insurance-details summary::after { content: ''; width: 6px; height: 6px; margin-right: 3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
.insurance-details[open] summary::after { transform: rotate(225deg); }
.insurance-details summary:focus-visible { outline: 2px solid #667eea; outline-offset: 2px; border-radius: 4px; }
.insurance-details-body { padding-top: 2px; color: #667085; }
.insurance-details-body a { color: #535fc2; }
.delivery-insurance [role="alert"] { color: #b42318; font-size: 13px; font-weight: 600; }
.delivery-insurance [role="alert"]:empty { display: none; }
.delivery-insurance button { padding: 10px 14px; }
.insurance-history { margin-top: 12px; padding: 12px; background: #f4f8ff; border-radius: 10px; overflow-wrap: anywhere; font-size: 13px; line-height: 1.5; }

.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;
}

/* A short desktop WebView must scroll with a wheel, not only when a
   focused control is scrolled into view programmatically. */
#quantity-modal .modern-modal-content {
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
#quantity-modal .modal-actions {
  position: sticky;
  bottom: 0;
  z-index: 1;
  background: #fff;
}
#quantity-modal .product-mini-info,
#quantity-modal .modal-product-details { min-width: 0; }
#quantity-modal #modal-product-name { overflow-wrap: anywhere; }

.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: 1.5px dashed #b3cdff;
  background: #f5f9ff;
  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: #eef5ff;
  border-style: solid;
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2);
}

/* Плашки готовых партий: 10/50/100 — на них приходится основная часть опта */
.quantity-presets {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.qty-preset {
  flex: 1;
  padding: 9px 4px;
  border: 1.5px solid rgba(0, 123, 255, 0.3);
  border-radius: 10px;
  background: #f5f9ff;
  color: #007bff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
  -webkit-tap-highlight-color: transparent;
}

.qty-preset:active { background: #e4efff; }

.qty-preset.on {
  background: #007bff;
  border-color: #007bff;
  color: #fff;
}

/* Долгое нажатие на «+»/«−» — это автоповтор количества, а не выделение текста */
[data-qty-dir] {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

/* Подсказка про ручной ввод количества */
.quantity-input-note {
  font-size: 12px;
  color: #007bff;
  margin-top: 8px;
  text-align: center;
}

/* Секция информации о цене */
.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;
}

/* Сноска о принятии оферты под кнопкой "Оформить заказ" */
.terms-disclaimer {
  margin: 12px 0 0;
  text-align: center;
  font-size: 12px;
  line-height: 1.5;
  color: #8a8a8a;
}

.terms-disclaimer a {
  color: #b8972a;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  cursor: pointer;
}

.terms-disclaimer a:hover {
  color: #8c6f1f;
}

/* ===== Модалка юридических документов ===== */
.legal-modal-content {
  max-width: 560px !important;
  width: 92% !important;
  max-height: 85vh !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  overflow: hidden !important;
  /* Форсим GPU-слой на iOS — иначе ломается inner scrolling */
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.legal-modal-header {
  padding: 18px 20px 14px !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  flex-shrink: 0 !important;
  gap: 12px;
}

.legal-modal-title {
  font-size: 17px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  padding-right: 8px;
  line-height: 1.3;
  word-break: break-word;
}

.legal-modal-header .modern-modal-close {
  flex-shrink: 0;
}

.legal-modal-body {
  padding: 0 20px 24px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  overscroll-behavior: contain !important;
  /* Flexbox фикс для iOS — без min-height:0 скролл ломается в flex-контейнере */
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

/* Backdrop — явно даём понять что кликабельный для закрытия */
#legal-modal .modal-backdrop {
  cursor: pointer;
  touch-action: manipulation;
}

.legal-modal-body::-webkit-scrollbar {
  width: 6px;
}

.legal-modal-body::-webkit-scrollbar-track {
  background: transparent;
}

.legal-modal-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 3px;
}

/* Стили для контента документов внутри модалки */
.legal-modal-body h1 {
  font-size: 22px;
  font-weight: 900;
  text-align: center;
  margin: 18px 0 4px;
  letter-spacing: -0.3px;
  color: #1a1a1a;
}

.legal-modal-body .doc-subtitle {
  font-size: 14px;
  color: #4a4a4a;
  text-align: center;
  margin-bottom: 4px;
}

.legal-modal-body .updated {
  font-size: 13px;
  color: #888;
  margin: 8px 0 24px;
  text-align: center;
}

.legal-modal-body h2 {
  font-size: 15px;
  font-weight: 700;
  margin: 24px 0 10px;
  color: #1a1a1a;
}

.legal-modal-body p {
  font-size: 14px;
  color: #2a2a2a;
  margin-bottom: 10px;
  line-height: 1.6;
}

.legal-modal-body .sub {
  font-size: 14px;
  color: #2a2a2a;
  margin-bottom: 8px;
  padding-left: 14px;
  line-height: 1.6;
}

.legal-modal-body ul {
  font-size: 14px;
  color: #2a2a2a;
  margin: 0 0 12px 18px;
  line-height: 1.6;
}

.legal-modal-body ul li {
  margin-bottom: 5px;
}

.legal-modal-body a {
  color: #b8972a;
  text-decoration: underline;
}

.legal-modal-body .warning-box {
  background: #FFF7ED;
  border: 1px solid #FCD34D;
  border-radius: 10px;
  padding: 14px 16px;
  margin: 16px 0;
}

.legal-modal-body .warning-box p {
  margin-bottom: 6px;
  color: #92400E;
  font-size: 13.5px;
}

.legal-modal-body .warning-box p:last-child {
  margin-bottom: 0;
}

.legal-modal-body .contact-box {
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 18px;
  margin-top: 24px;
}

.legal-modal-body .contact-box p {
  margin-bottom: 8px;
  font-size: 13.5px;
}

.legal-modal-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0 16px;
  font-size: 13px;
}

.legal-modal-body th {
  background: #F3F4F6;
  text-align: left;
  padding: 8px 10px;
  border: 1px solid #E5E7EB;
  font-weight: 600;
  font-size: 13px;
}

.legal-modal-body td {
  padding: 8px 10px;
  border: 1px solid #E5E7EB;
  color: #2a2a2a;
  vertical-align: top;
  font-size: 13px;
}

.legal-modal-body .footer-note {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid #E5E7EB;
  font-size: 12px;
  color: #888;
  text-align: center;
}

/* Загрузка и ошибка */
.legal-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: #666;
}

.legal-loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #f0f0f0;
  border-top-color: #FFD600;
  border-radius: 50%;
  animation: legalSpin 0.8s linear infinite;
  margin-bottom: 14px;
}

.legal-loading p {
  font-size: 14px;
  color: #888;
}

@keyframes legalSpin {
  to { transform: rotate(360deg); }
}

.legal-error {
  padding: 40px 20px;
  text-align: center;
  color: #555;
}

.legal-error p {
  font-size: 14px;
  margin-bottom: 8px;
}

.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;
}

/* Ширина по содержимому, а не жёсткие 20 px: в круг влезала одна цифра, и на
   «10 шт» число вылезало за красный кружок. Оптовик берёт сотнями, так что
   трёх- и четырёхзначные значения здесь норма, а не край. */
.cart-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #dc3545;
  color: white;
  border-radius: 999px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  box-sizing: border-box;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums; /* цифры одной ширины — счётчик не дёргается */
  line-height: 20px;
  text-align: center;
  display: none;
  white-space: nowrap;
}

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

/* Подскок счётчика на смене числа */
.cart-badge.bump {
  animation: cart-badge-bump .42s cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes cart-badge-bump {
  0%   { transform: scale(1); }
  38%  { transform: scale(1.42); }
  100% { transform: scale(1); }
}

/* Картинка товара в полёте к корзине */
.cart-fly-ghost {
  position: fixed;
  z-index: 12000;
  border-radius: 10px;
  object-fit: cover;
  pointer-events: none;
  box-shadow: 0 8px 24px rgba(16, 24, 40, .28);
  will-change: transform, opacity;
}

/* Корзина принимает товар: короткий толчок иконки */
.bottom-menu button.cart-hit img {
  animation: cart-hit-pulse .46s cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes cart-hit-pulse {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.28) translateY(-2px); }
  60%  { transform: scale(.94); }
  100% { transform: scale(1); }
}

/* Тем, у кого в системе выключены анимации, ничего не прыгает */
@media (prefers-reduced-motion: reduce) {
  .cart-badge.bump,
  .bottom-menu button.cart-hit img { animation: none; }
}

/* 🔔 TELEGRAM-АДАПТИРОВАННЫЕ УВЕДОМЛЕНИЯ */
.notification {
  position: fixed;
  /* Обычный браузер / dev-доступ: чуть ниже статус-бара устройства */
  top: calc(env(safe-area-inset-top, 0px) + 16px);
  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);
}

/* В Telegram приложение работает в полноэкранном режиме (requestFullscreen):
   статус-бар и кнопки свернуть/закрыть накладываются на верх WebView.
   Уведомления опускаем под зарезервированную зону системных кнопок —
   ту же, на которую страницы получают padding-top (--tg-header-height
   пересчитывается из tg.safeAreaInsetTop на каждый viewportChanged) */
body.telegram-fullscreen .notification {
  top: calc(var(--tg-header-height, 130px) + 8px);
}

.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;
}

/* Адаптация для маленьких экранов (top наследуется от базового правила) */
@media (max-width: 480px) {
  .notification {
    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.telegram-fullscreen выше) */
body[data-telegram="true"] .notification {
  top: calc(var(--tg-header-height, 130px) + 8px);
}

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

/* Блок экономии для товара */
.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: тёмный графит (как баннеры главной), тигр жонглирует SIM,
   шкала прогресса привязана к настоящим шагам загрузки */
#splash-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background:
    radial-gradient(120% 85% at 50% 22%, #23304d 0%, rgba(0,0,0,0) 62%),
    linear-gradient(160deg, #16203a 0%, #0c1220 60%, #080c16 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  color: #fff;
  text-align: center;
  z-index: 10000;
  transition: opacity 0.5s ease;
}

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

/* Сцена: тигр + три SIM-карты по дуге. Горизонталь летит линейно (.splash-arc),
   вертикаль с замедлением (img) — вместе выходит парабола. */
.splash-stage { position: relative; width: 290px; height: 290px; }
.splash-stage .splash-tiger {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 236px; filter: drop-shadow(0 16px 30px rgba(0,0,0,.4));
  animation: splashBreathe 3.4s ease-in-out infinite;
}
@keyframes splashBreathe {
  0%, 100% { transform: translateX(-50%) translateY(0) scale(1); }
  50%      { transform: translateX(-50%) translateY(-5px) scale(1.012); }
}
.splash-arc {
  position: absolute; left: 12%; top: 35%; width: 42px; height: 42px;
  animation: splashArcX 2.4s linear infinite;
}
.splash-arc img {
  display: block; width: 100%; animation: splashArcSpin 2.4s linear infinite;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.35));
}
.splash-arc.b, .splash-arc.b img { animation-delay: .8s; }
.splash-arc.c, .splash-arc.c img { animation-delay: 1.6s; }
@keyframes splashArcX { from { transform: translateX(0); } to { transform: translateX(185px); } }
@keyframes splashArcSpin {
  0%   { transform: translateY(0) rotate(-14deg) scale(.84); opacity: 0; }
  14%  { opacity: 1; }
  50%  { transform: translateY(-126px) rotate(10deg) scale(1.08); opacity: 1; }
  86%  { opacity: 1; }
  100% { transform: translateY(4px) rotate(28deg) scale(.84); opacity: 0; }
}

.splash-wordmark {
  margin: 6px 0 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 27px; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase;
  text-shadow: 0 2px 10px rgba(0,0,0,.25);
}
.splash-tagline {
  margin: 9px 0 0; font-size: 13.5px; font-weight: 600; line-height: 1.45;
  color: rgba(255,255,255,.72); max-width: 300px;
}
.splash-tagline em { font-style: normal; color: #fde047; }

/* Шкала: ширину двигает showSplashAndWarmup по мере готовности данных.
   Замерла — значит именно там сейчас ждём сеть, и это честно. */
.splash-track {
  width: 214px; height: 6px; border-radius: 99px; margin-top: 26px;
  background: rgba(255,255,255,.2); overflow: hidden;
}
.splash-track i {
  display: block; height: 100%; width: 0%; border-radius: 99px;
  background: linear-gradient(90deg, #fde047, #f59e0b);
  transition: width .5s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 0 12px rgba(251,191,36,.55);
}
.splash-status {
  margin: 13px 0 0; font-size: 12.5px; font-weight: 600; height: 17px;
  color: rgba(255,255,255,.72);
}
.splash-pct { color: #fde047; }

@media (prefers-reduced-motion: reduce) {
  .splash-stage .splash-tiger, .splash-arc, .splash-arc img { animation: none !important; }
  .splash-arc { display: none; }
}

/* Точки-лоадер: используются в других экранах приложения (не на сплеше) */
.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 */
body.splash-active .page,
body.splash-active .bottom-nav {
  display: none;
}

@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;
  /* Картинка не имеет права вылезти за свой блок. Без этого ограничения на
     карточке шире 180 px квадрат оказывался выше блока и накрывал название с
     ценой — блок намеренно с overflow: visible, чтобы бейдж выступал наружу. */
  max-height: 100%;
  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;
  /* overflow-y: auto делает и ось X прокручиваемой — прижимаем, иначе любой
     full-bleed блок (шапка/баннеры с margin -20px) даёт боковой скролл */
  overflow-x: hidden;
  -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) {
  /* Каталог на узких телефонах остаётся в две колонки.
     Раньше здесь стояла одна колонка с картинкой 80×80: на экранах 390 px и
     уже человек видел по одному товару за экран, а в каталоге 88 позиций.
     Заказы за 30 дней по ширине окна: до 400 px — 1514 человек и 20 заказов
     (1.3 на сотню), 400–499 px — 814 человек и 39 заказов (4.8 на сотню).
     Место под вторую колонку берём из отступов страницы. */
  .page {
    --page-pad: 12px;
    padding: var(--page-pad);
  }

  .category-grid {
    grid-template-columns: 1fr;
  }

  .products-grid {
    gap: 10px;
  }

  /* Обеспечиваем отображение кнопок в мобильном 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-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;
}

/* «Город не найден» / «загружаем базу» — единое состояние внутри dropdown */
.autocomplete-empty {
  padding: 14px 12px;
  color: #555;
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
  background: #fafbfc;
  border-radius: 8px;
  user-select: none;
  -webkit-user-select: 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 {
  /* 04.09.2026: блок вставляется после нового пустого экрана прототипа —
     отступ 100px больше не нужен, а поля привязаны к --page-pad,
     чтобы на узких экранах (padding 12px) не вылезать за край */
  margin-top: 20px !important;
  margin-left: calc(-1 * var(--page-pad, 20px)) !important;
  margin-right: calc(-1 * var(--page-pad, 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 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  font-size: 14px;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
  transition: background 0.2s;
}

.suggestion-item:hover {
  background: #f8f9fa;
}

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

.suggestion-name {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.suggestion-highlight {
  font-weight: 600;
  color: #007bff;
}

.suggestion-show-all {
  padding: 10px 14px;
  cursor: pointer;
  background: #f0f4ff;
  color: #4a6cf7;
  font-weight: 600;
  font-size: 13px;
  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 {
  flex-shrink: 0;
  max-width: 40%;
  font-size: 11px;
  color: #aaa;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 🎛️ МОДАЛЬНОЕ ОКНО ФИЛЬТРОВ */
.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;
}

/* Компьютер и планшет: магазин остаётся мобильным приложением — колонка 480 px
   по центру на серой подложке.

   Пробовал раскрывать её в витрину на всю ширину монитора: каталог по четыре-пять
   товаров в ряд, меню плашкой. Выглядит хуже аккуратной колонки, поэтому колонку
   и оставляем. Магазин теперь и не просит разворот на компьютере — открывается
   компактным окном, а развернуть человек может сам кнопкой в углу Telegram
   (см. isTelegramDesktop в app-bonus.js). */
@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;
  }
  /* Две колонки, а не три: в рамке 480 px третья колонка режет карточку до
     ~145 px, и название страны с оператором в неё не укладывается. */
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    max-width: none;
    margin: 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);
}

/* Пополнение счёта — янтарным вместо фиолетового «НОВЫЕ В НАЛИЧИИ».
   Карточка должна отличаться от симки раньше, чем человек дочитает заголовок:
   именно по цене и флагу его и покупали вместо польской SIM. */
.product-badge.topup-badge {
  background: linear-gradient(135deg, #f79009, #dc6803);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: 0 2px 8px rgba(220, 104, 3, 0.4);
}

/* ──────────────────────────────────────────────
   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;
}

/* ══════════════════════════════════════════════════════════════
   КАТАЛОЖНАЯ КАРТОЧКА v2 (утверждённый «вариант 9» из прототипа)
   Название в одну строку без «Новые», подстрочник ≈ USDT/грн,
   единый ритм отступов 12px. Все правила заякорены на новые
   классы (.one-line / .with-subs / .even-gaps) — старые карточки
   без этих классов не затрагиваются.
   ══════════════════════════════════════════════════════════════ */
/* Название: страна + оператор жирным, в одну строку.
   12px сверху = отступ от шильдика «НОВЫЕ В НАЛИЧИИ», как в стоке */
.product-card .product-title.one-line {
  height: auto;
  min-height: 0;
  padding: 12px 4px 0;
  margin: 0 0 2px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  line-height: 1.2;
}

/* Уточнение из скобок («с тарифом», «без картонной упаковки») */
.product-card .title-qualifier {
  font-size: 9.5px;
  font-weight: 600;
  color: #8d97a5;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 0 2px;
  line-height: 1.25;
}
/* Карточки с уточнением подстраиваются под обычные по высоте */
.product-card.has-qual .product-title.one-line { padding-top: 10px; margin-bottom: 0; }

/* Цена: начертание как в стоке (600), плотный отступ до подстрочника
   (отступы ровно как в утверждённом прототипе: 0 сверху, 2px снизу) */
.product-card .product-price.with-subs {
  margin: 0 0 2px;
  color: #007bff;
  font-weight: 600;
}

/* Подстрочник примерных цен: USDT первым, гривна второй */
.product-card .price-subs { margin: 0 0 auto; text-align: center; }
.product-card .price-sub {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: #8d97a5;
  white-space: nowrap;
  line-height: 1.35;
}
.product-card .price-sub .usdt-word { font-size: 9px; letter-spacing: 0.2px; }

/* Кнопки: столько же воздуха, сколько между шильдиком и названием */
.product-card .product-buttons.even-gaps { gap: 12px; margin-top: 12px; }
.product-card .product-buttons.even-gaps .btn-primary,
.product-card .product-buttons.even-gaps .btn-add-cart,
.product-card .product-buttons.even-gaps .btn-notify-stock { margin: 0; }

/* ═══════════════════════════════════════════════════════════════
   МУЛЬТИВАЛЮТНЫЕ ПОДСТРОЧНИКИ ВЕЗДЕ (2026-08-11):
   карточка товара, таблица тиров, модалка количества, корзина
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Шапка карточки товара ──
   Цена и подстрочник разделены тонкой пунктирной линией, без лишнего воздуха */
.product-price-left { flex-wrap: wrap; row-gap: 0; }
.product-price-left .price-subs {
  flex-basis: 100%;
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px dashed rgba(102, 126, 234, .2);
}
/* Пока курсы не загрузились — не показываем пустую пунктирную линию */
.product-price-left .price-subs:empty { display: none; }
.product-price-left .price-sub {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: #8d97a5;
  white-space: nowrap;
  line-height: 1.5;
}
.product-price-left .price-sub .usdt-word { font-size: 9.5px; letter-spacing: .2px; }

/* ── 2. Таблица цен в карточке товара ──
   Евро — крупно и жирно (главная цена), подстрочники — мелкие и светлые.
   ВАЖНО: правило «.pricing-row span» задевает и вложенные спаны,
   поэтому для ячеек используем строгий child-селектор «>» */
.pricing-unified-table.with-fx-subs .pricing-row > span {
  padding: 10px 5px;
  font-size: 14px;
  vertical-align: middle;
}
.pricing-unified-table.with-fx-subs .pricing-row > .price { font-size: 16px; }
.pricing-unified-table.with-fx-subs .pricing-row > .total { font-size: 15px; }
.pricing-unified-table.with-fx-subs .pricing-row > .savings { font-size: 14px; }
.pricing-unified-table.with-fx-subs .pricing-header > span { padding: 12px 3px; font-size: 10px; }
/* Сброс табличного поведения для вложенных спанов */
.pricing-unified-table .pricing-row span span {
  display: inline !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
}
.pricing-unified-table .pricing-row .cell-main {
  display: block !important;
  text-align: center;
  line-height: 1.2;
}
.pricing-unified-table .pricing-row .cell-sub {
  display: block !important;
  margin-top: 1px;
  font-size: 9px;
  font-weight: 500;
  color: #98a2b3;
  -webkit-text-fill-color: #98a2b3; /* сбрасываем градиентный текст колонки .price */
  white-space: nowrap;
  line-height: 1.4;
  letter-spacing: -0.1px;
  text-align: center;
}
.pricing-unified-table .pricing-row .cell-sub .usdt-word {
  font-size: 7.5px;
  letter-spacing: .2px;
  -webkit-text-fill-color: #98a2b3;
}
/* Узкие экраны (320–360px): таблица ужимается, но не вылезает за экран */
@media (max-width: 360px) {
  .pricing-unified-table.with-fx-subs .pricing-row > span { padding: 8px 2px; font-size: 12.5px; }
  .pricing-unified-table.with-fx-subs .pricing-row > .price { font-size: 14px; }
  .pricing-unified-table.with-fx-subs .pricing-row > .total { font-size: 13px; }
  .pricing-unified-table.with-fx-subs .pricing-row > .savings { font-size: 12px; }
  .pricing-unified-table.with-fx-subs .pricing-header > span { padding: 10px 2px; font-size: 8.5px; }
  .pricing-unified-table .pricing-row .cell-sub { font-size: 8px; }
  .pricing-unified-table .pricing-row .cell-sub .usdt-word { font-size: 7px; }
  .pricing-unified-table.with-fx-subs { margin: 0 12px 16px 12px; }
}

/* ── 4. Модалка количества ── */
.price-info-section .price-value { text-align: right; }
.price-info-section .price-value .fx-sub {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  color: #8d97a5;
  white-space: nowrap;
  line-height: 1.4;
}
.price-info-section .price-value .fx-sub .usdt-word { font-size: 8.5px; letter-spacing: .2px; }
.modal-product-details .fx-sub-inline {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  color: #8d97a5;
  white-space: nowrap;
  margin-top: 1px;
}
.modal-product-details .fx-sub-inline .usdt-word { font-size: 8.5px; letter-spacing: .2px; }

/* Экономия — чип справа от «Количество», а не плашка в разбивке цены.
   Чип всегда занимает место (visibility), поэтому поп-ап НЕ меняет высоту
   и кнопки +/− не прыгают под пальцем при переходе через ценовой тир */
.quantity-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
}
.quantity-label-row .quantity-label { margin-bottom: 0; }
.modal-savings-chip {
  background: linear-gradient(135deg, #b4f0c9, #85e5a6);
  color: #0e7a35;
  box-shadow: 0 2px 6px rgba(40, 167, 69, 0.28);
  font-size: 12.5px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 20px;
  white-space: nowrap;
  /* Стресс-защита: гигантская экономия (9999 шт) не вылезает за модалку */
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  visibility: hidden;
  opacity: 0;
  transition: opacity .25s ease;
}
.modal-savings-chip.show {
  visibility: visible;
  opacity: 1;
}
@media (max-width: 360px) {
  .modal-savings-chip { font-size: 11px; padding: 4px 9px; }
}

/* Мотиватор в модалке (как в корзине): «Добавь ещё N шт → цена €X за штуку».
   Блок отрисован ВСЕГДА (фиксированное место) → поп-ап не меняет высоту.
   Тап по плашке сразу ставит нужное количество.
   Когда достигнут минимальный тир — зелёное «Лучшая цена за штуку» */
.modal-tier-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
  min-height: 52px;
  padding: 8px 14px;
  background: linear-gradient(135deg, rgba(0, 123, 255, 0.06), rgba(102, 126, 234, 0.08));
  border: 1.5px dashed rgba(0, 123, 255, 0.35);
  border-radius: 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: #2d3748;
  line-height: 1.4;
  text-align: center;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.modal-tier-hint:active { background: rgba(0, 123, 255, 0.12); }
.modal-tier-hint strong { color: #007bff; }
.modal-tier-hint .hint-icon { font-size: 15px; flex-shrink: 0; }
.modal-tier-hint.best {
  background: linear-gradient(135deg, #c3f4d4, #97e9b3);
  border: 1.5px solid rgba(40, 167, 69, 0.5);
  color: #0e7a35;
  box-shadow: 0 2px 7px rgba(40, 167, 69, 0.22);
  cursor: default;
}
/* Пока JS не заполнил плашку — не показываем пустой пунктирный прямоугольник */
.modal-tier-hint:empty { display: none; }
@media (max-width: 360px) {
  .modal-tier-hint { font-size: 11.5px; min-height: 56px; }
}

/* ── 5. Корзина ── */
/* Число количества в пунктирной рамке — как в модалке, видно что можно ввести вручную */
.quantity-input-modern {
  width: 56px;
  border: 1.5px dashed #b3cdff;
  background: #f5f9ff;
}
/* Позиция: защита от переполнения при больших суммах */
.cart-item-price-info { flex-wrap: wrap; gap: 2px 10px; }
.cart-item-price-info .total-price-block { text-align: right; margin-left: auto; }
.cart-item-price-info .total-price-block .fx-sub {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: #8d97a5;
  white-space: nowrap;
  line-height: 1.4;
}
.cart-item-price-info .total-price-block .fx-sub .usdt-word { font-size: 8px; letter-spacing: .2px; }

/* Футер: компактнее — меньше воздуха, конверсия одной строкой */
.cart-footer-content { padding: 10px 14px 12px; gap: 10px; }
.cart-footer-compact-grid { margin-bottom: 0; gap: 10px; }
.cart-total-compact { padding: 8px 10px; gap: 2px; }
.total-details-compact { margin-top: 2px; flex-direction: row; gap: 8px; }
.btn-checkout-modern { padding: 13px 20px; font-size: 15px; }
.cart-total-compact .total-fx-line {
  font-size: 10px;
  font-weight: 600;
  color: #8d97a5;
  line-height: 1.4;
}
.cart-total-compact .total-fx-line:empty { display: none; }
.cart-total-compact .total-fx-line .fx-chunk { white-space: nowrap; }
.cart-total-compact .total-fx-line .usdt-word { font-size: 8px; letter-spacing: .2px; }

/* ── 6. Подзаголовок таблицы тиров ──
   На узких экранах (320px) чипы «Больше покупаете» / «Больше экономите!»
   рвались посреди слова, а стрелка повисала в конце строки.
   Флекс с переносом ЦЕЛЫХ чипов: узко → аккуратные две строки по центру */
.pricing-unified-subtitle {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px 6px;
}
.pricing-unified-subtitle .highlight-text { white-space: nowrap; }

/* ── 7. РЕДИЗАЙН КАРТОЧКИ ТОВАРА В КОРЗИНЕ (v2) ──
   Было: эмодзи-мешанина (💳/💰), подсказка с левым бордером не в стиле
   модалки, всё расползается по вертикали. Стало: чистая карточка со
   скруглением, степпер слева / итог справа, мотиватор — та же пунктирная
   плашка, что в модалке (и тоже кликабельная) */
.cart-items { padding-left: 0 !important; padding-right: 0 !important; }
.cart-item-v2 {
  flex-direction: column;
  align-items: stretch; /* база даёт flex-start — в колонке это сжимает детей */
  gap: 12px;
  margin: 0 0 12px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(16, 24, 40, 0.07);
  box-shadow: 0 2px 10px rgba(16, 24, 40, 0.05);
}
.cart-item-v2 .cart-item-top { display: flex; gap: 12px; align-items: flex-start; }
.cart-item-v2 .cart-item-image {
  width: 64px; height: 64px;
  border-radius: 12px;
  border: 1px solid rgba(16, 24, 40, 0.06);
}
.cart-item-v2 .cart-item-title-block {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 3px;
}
.cart-item-v2 .cart-item-name { font-size: 15px; line-height: 1.3; }
.cart-item-v2 .cart-item-unit { font-size: 12.5px; font-weight: 600; color: #8d97a5; }
.cart-item-v2 .cart-item-remove {
  width: 28px; height: 28px; border-radius: 8px;
  background: rgba(16, 24, 40, 0.05); color: #98a2b3;
}
.cart-item-v2 .cart-item-remove:hover,
.cart-item-v2 .cart-item-remove:active {
  background: rgba(220, 53, 69, 0.12); color: #dc3545; transform: none;
}
.cart-item-v2 .cart-item-controls {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px 12px;
  flex-wrap: wrap; /* большие суммы (9999 шт) переезжают на свою строку, не вылезая за карточку */
}
.cart-item-v2 .cart-quantity-controls { padding: 4px; border: 1.5px solid rgba(16, 24, 40, 0.06); }
.cart-item-v2 .cart-item-total { text-align: right; min-width: 0; margin-left: auto; }
.cart-item-v2 .cart-item-total .total-eur {
  display: block;
  font-size: 17px; font-weight: 800; color: #101828; line-height: 1.2;
}
.cart-item-v2 .cart-item-total .fx-sub {
  display: block;
  font-size: 10px; font-weight: 600; color: #8d97a5;
  line-height: 1.4; white-space: nowrap;
}
.cart-item-v2 .cart-item-total .fx-sub .usdt-word { font-size: 8px; letter-spacing: .2px; }
.cart-item-v2 .cart-item-total.price-changed { animation: priceChange 0.6s ease-out; }
.cart-item-v2 .cart-tier-hint {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 8px 12px;
  background: linear-gradient(135deg, rgba(0, 123, 255, 0.06), rgba(102, 126, 234, 0.08));
  border: 1.5px dashed rgba(0, 123, 255, 0.35);
  border-radius: 10px;
  font-size: 12px; font-weight: 600; color: #2d3748;
  line-height: 1.35; text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cart-item-v2 .cart-tier-hint:active { background: rgba(0, 123, 255, 0.12); }
.cart-item-v2 .cart-tier-hint strong { color: #007bff; }
.cart-item-v2 .cart-tier-hint .hint-icon { font-size: 14px; flex-shrink: 0; }
.cart-item-v2 .cart-tier-hint.best {
  background: linear-gradient(135deg, #c3f4d4, #97e9b3);
  border: 1.5px solid rgba(40, 167, 69, 0.5);
  color: #0e7a35;
  cursor: default;
}
@media (max-width: 360px) {
  .cart-item-v2 .cart-item-image { width: 56px; height: 56px; }
  .cart-item-v2 .cart-item-name { font-size: 14px; }
  .cart-item-v2 .cart-item-total .total-eur { font-size: 16px; }
}

/* ═══════════════════════════════════════════════════════════
   🌍 ПЕРЕКЛЮЧАТЕЛЬ ЯЗЫКА (только в профиле, без флагов)
   ═══════════════════════════════════════════════════════════ */
.lang-switch {
  display: flex;
  gap: 8px;
  padding: 4px;
  background: #f1f3f7;
  border-radius: 14px;
}
.lang-switch .lang-option {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 8px;
  border: none;
  border-radius: 11px;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: #6b7280;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.lang-switch .lang-option.active {
  background: #fff;
  color: #1f2937;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
}
.lang-switch .lang-option:active { transform: scale(0.98); }

/* ============================================
   🏠 ВИТРИНА 2026-09: шапка, баннеры, чипы, поиск
   Дизайн перенесён из прототипа prototype-home.html
   ============================================ */

/* ── Шапка ── */
.top-bar {
  display: flex; align-items: center; gap: 8px;
  margin: calc(-1 * var(--page-pad, 20px)) calc(-1 * var(--page-pad, 20px)) 0;
  padding: 10px 14px;
  background: #fff; border-bottom: 1px solid #eaecf0;
  position: sticky; top: 0; z-index: 60;
}
.top-logo { display: flex; align-items: center; gap: 7px; margin-right: auto; }
.top-logo img { width: 26px; height: 26px; object-fit: contain; }
.top-logo b { font-size: 15px; font-weight: 900; letter-spacing: -.2px; white-space: nowrap; color: #101828; }
.top-btn {
  height: 34px; padding: 0 10px 0 8px; border-radius: 10px; gap: 5px;
  border: 1px solid #eaecf0; background: #f9fafb; cursor: pointer;
  display: flex; align-items: center; font-family: inherit;
  font-size: 12px; font-weight: 700; color: #475467; white-space: nowrap;
}
.top-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.top-btn.accent { background: #eef2ff; border-color: #dfe4ff; color: #667eea; }
@media (max-width: 374px) {
  .top-bar { gap: 6px; padding: 10px 12px; }
  .top-btn { padding: 0 8px 0 7px; }
}
/* Совсем узкие экраны: надпись PROFIT SIM не прячем (просьба владельца) —
   вместо этого ужимаем кнопки и шрифт, всё влезает и на 320px */
@media (max-width: 339px) {
  .top-logo { gap: 5px; }
  .top-logo img { width: 22px; height: 22px; }
  .top-logo b { font-size: 13px; }
  .top-btn { padding: 0 6px; font-size: 11px; gap: 4px; }
  .top-btn svg { width: 13px; height: 13px; }
}
/* Полноэкранный Telegram на телефоне: сверху плавают часы и кнопки
   «Закрыть»/«Свернуть», под них .page отступает на --tg-header-height.
   Sticky-шапке там места нет — top: 0 паркует её ровно под часами при
   скролле. Пусть скроллится вместе с контентом, как раньше. */
body.telegram-fullscreen .top-bar {
  position: static;
  margin-top: 0;
}

.home-body { padding-top: 14px; }

/* ── Баннеры (формат 10:3, скролл-снап, автопрокрутка) ── */
.banners {
  display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none;
  margin: 2px calc(-1 * var(--page-pad, 20px)) 0;
  padding: 0 var(--page-pad, 20px) 9px;
  scroll-snap-type: x mandatory; scroll-padding-left: var(--page-pad, 20px);
}
.banners::-webkit-scrollbar { display: none; }
.banner {
  flex: 0 0 100%; aspect-ratio: 10 / 3; scroll-snap-align: start;
  border-radius: 14px; padding: 11px 13px; color: #fff;
  position: relative; overflow: hidden; cursor: pointer;
  display: flex; flex-direction: column; justify-content: center;
  /* Оформление C из прототипа: цвет разлит по правой половине, текст на графите */
  background:
    radial-gradient(130% 175% at 84% 50%, var(--acc2) 0%, rgba(0,0,0,0) 66%),
    linear-gradient(120deg, #1c2534 0%, #0d1420 100%);
}
/* Фон-паттерн из силуэтов SIM — то же семейство форм, что в логотипе */
.banner::before {
  content: ''; position: absolute; inset: -20%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46' viewBox='0 0 46 46'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1.5'%3E%3Cpath d='M8 6h12l9 9v19a3 3 0 0 1-3 3H8a3 3 0 0 1-3-3V9a3 3 0 0 1 3-3z'/%3E%3Crect x='10' y='17' width='14' height='10' rx='1.5'/%3E%3C/g%3E%3C/svg%3E");
  transform: rotate(-12deg); opacity: .07; pointer-events: none;
}
.banner .glow {
  position: absolute; right: -6%; top: 50%; transform: translateY(-50%);
  width: 58%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 64%);
}
.banner .txt { position: relative; z-index: 2; max-width: 64%; }
.banner .eyebrow {
  font-size: 8.5px; font-weight: 800; letter-spacing: .9px;
  text-transform: uppercase; color: var(--eb); margin-bottom: 3px;
}
.banner h3 { margin: 0; font-size: 15px; font-weight: 800; line-height: 1.18; }
.banner p { margin: 3px 0 0; font-size: 11px; font-weight: 500; opacity: .9; line-height: 1.28; }
.banner .cta {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 7px;
  padding: 4px 9px 4px 10px; border-radius: 999px;
  background: rgba(250,204,21,.18); border: 1px solid rgba(250,204,21,.55);
  color: #fde68a; font-size: 9.5px; font-weight: 800; letter-spacing: .2px;
}
/* Сводный баннер условий: заголовок, жёлтое уточнение, три чекпоинта */
.banner.b-facts { padding: 9px 13px; }
.banner .facts { position: relative; z-index: 2; width: 74%; }
.banner .facts h3 {
  margin: 0; font-size: 17px; font-weight: 850;
  line-height: 1.06; letter-spacing: -.4px; white-space: nowrap;
}
.banner .facts h3 .sim { letter-spacing: 0; }
.banner .facts .sub {
  margin: 2px 0 6px; font-size: 11.5px; font-weight: 800;
  line-height: 1.1; white-space: nowrap; color: var(--eb);
}
.banner .facts .ck-list { display: flex; flex-direction: column; gap: 4px; }
.banner .facts .row {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 650; line-height: 1.1; white-space: nowrap;
}
.banner .facts .ck {
  flex-shrink: 0; width: 13px; height: 13px; border-radius: 4px;
  background: rgba(253,224,71,.16); color: var(--eb); font-style: normal;
  font-size: 9px; font-weight: 900; display: flex; align-items: center; justify-content: center;
}
.banner .char {
  position: absolute; right: -6px; bottom: -13%; height: 130%; width: auto;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.45)); pointer-events: none; z-index: 1;
}
.banner.low .char { height: 118%; bottom: -4%; right: -2px; }
.banner.b-wholesale .char { height: 116%; bottom: -19%; }
.banner.b-facts .char { height: 108%; bottom: -12%; right: -22px; }

.dots { display: flex; gap: 5px; justify-content: center; padding: 1px 0 12px; }
.dots i { width: 5px; height: 5px; border-radius: 50%; background: #d0d5dd; transition: all .18s; }
.dots i.on { width: 16px; border-radius: 3px; background: #667eea; }

/* ── Поле поиска ── */
.search-box { position: relative; margin-top: 2px; }
.search-field {
  display: flex; align-items: center; gap: 8px;
  padding: 0 12px; height: 44px;
  background: #f4f5f7; border: 1.5px solid #e4e7ec; border-radius: 12px;
}
.search-field:focus-within { border-color: #667eea; background: #fff; }
.search-field .sf-ic { font-size: 14px; flex-shrink: 0; opacity: .65; }
.search-field input {
  flex: 1; min-width: 0; height: 100%; border: none; outline: none;
  background: transparent; font-family: inherit; font-size: 14.5px;
  font-weight: 600; color: #101828;
}
.search-field input::placeholder { color: #98a2b3; font-weight: 500; }
.search-field .sf-clear {
  flex-shrink: 0; width: 24px; height: 24px; border: none; border-radius: 50%;
  background: #e4e7ec; color: #667085; font-size: 12px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
/* Подсказки: выпадают под новым полем */
.search-box .search-suggestions {
  border: 1px solid #eaecf0; border-radius: 12px; margin-top: 6px;
  box-shadow: 0 12px 32px rgba(16,24,40,.14);
}

/* ── Чипы сортировки ──
   Пять чипов в одну строку (просьба 04.09). Чтобы влезали на 390px,
   размеры компактнее, стрелки направления не рисуем («Дешевле»/«Дороже»
   сами говорят, куда сортировка). Счётчик наличия — своей строкой ниже.
   На совсем узких экранах строка тихо скроллится. */
.chips-wrap { margin: 10px 0 0; }
.chips {
  display: flex; flex-wrap: nowrap; gap: 4px; padding: 2px 0 4px;
  overflow-x: auto; scrollbar-width: none;
  margin: 0 calc(-1 * var(--page-pad, 20px));
  padding-left: var(--page-pad, 20px); padding-right: var(--page-pad, 20px);
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  position: relative; flex-shrink: 0; display: flex; align-items: center; gap: 4px;
  background: #fff; border: 1.5px solid #e4e7ec; border-radius: 999px;
  padding: 7px 8px; font-size: 12px; font-weight: 600; color: #344054;
  cursor: pointer; white-space: nowrap; font-family: inherit;
}
.chip.active { background: #101828; border-color: #101828; color: #fff; }
.chip .dir { display: none; }
@media (max-width: 389px) {
  .chip { padding: 7px 7px; font-size: 11.5px; }
}
@media (max-width: 364px) {
  .chip { padding: 7px 6px; font-size: 11px; }
}
/* Непрочитанные новинки: красный — это уведомление, как счётчик сообщений */
.chip-dot {
  min-width: 17px; height: 17px; margin-right: -3px; padding: 0 4px;
  border-radius: 999px; background: #f04438; color: #fff;
  font-size: 10.5px; font-weight: 800; line-height: 17px; text-align: center;
}
.chip.active .chip-dot { background: #fff; color: #101828; }
/* Счётчик наличия — отдельной строкой под чипами, прижат вправо */
.stock-line { display: flex; justify-content: flex-end; padding: 0 0 8px; }
.stock-note {
  font-size: 11.5px; font-weight: 600; color: #98a2b3; white-space: nowrap;
}

/* ── Лоадер каталога (не фиксированный — баннеры остаются видны) ── */
.catalog-loader {
  grid-column: 1 / -1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 46px 0 40px;
}
.catalog-loader .spin {
  width: 44px; height: 44px; border-radius: 50%;
  border: 4px solid rgba(102,126,234,.16); border-top-color: #667eea;
  animation: spin 1s linear infinite;
}
.catalog-loader span { margin-top: 14px; font-size: 13px; font-weight: 600; color: #98a2b3; }

/* ── Медаль в профиле: цветная карточка с бликом ── */
.medal-card {
  margin-top: 16px; padding: 15px 16px; border-radius: 18px;
  display: flex; align-items: center; gap: 14px; color: #fff;
  position: relative; overflow: hidden; text-align: left;
}
.medal-card.wooden { background: linear-gradient(135deg,#8b5a2b 0%,#a0522d 50%,#5c3a17 100%); box-shadow: 0 8px 22px rgba(139,90,43,.34); }
.medal-card.bronze { background: linear-gradient(135deg,#f59e0b 0%,#d97706 50%,#b45309 100%); box-shadow: 0 8px 22px rgba(217,119,6,.34); }
.medal-card.silver { background: linear-gradient(135deg,#a8b6c6 0%,#64748b 50%,#475569 100%); box-shadow: 0 8px 22px rgba(100,116,139,.34); }
.medal-card.gold   { background: linear-gradient(135deg,#fcd34d 0%,#f59e0b 50%,#d97706 100%); box-shadow: 0 8px 22px rgba(245,158,11,.36); }
.medal-card.vip    { background: linear-gradient(135deg,#a78bfa 0%,#7c3aed 50%,#5b21b6 100%); box-shadow: 0 8px 22px rgba(124,58,237,.36); }
.medal-card .disc {
  width: 62px; height: 62px; flex-shrink: 0; border-radius: 50%; position: relative;
  background: rgba(255,255,255,.2); border: 2px solid rgba(255,255,255,.42);
  display: flex; align-items: center; justify-content: center; font-size: 30px;
  overflow: hidden; animation: medal-breathe 3.6s ease-in-out infinite;
}
/* Блик медленно проходит по металлу — статус, а не иконка в списке.
   Анимируем transform, а не left: left считает layout каждый кадр и
   заметно грузит бюджетные Android; translateX едет на GPU */
.medal-card .disc .shine {
  position: absolute; top: -60%; left: -120%; width: 60%; height: 220%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent);
  transform: rotate(18deg); animation: medal-shine 3.6s ease-in-out infinite;
  will-change: transform;
}
@keyframes medal-shine {
  /* Сдвиг 467% своей ширины = путь от left -120% до 160% ширины диска */
  0%, 62% { transform: translateX(0) rotate(18deg); }
  88%, 100% { transform: translateX(467%) rotate(18deg); }
}
@keyframes medal-breathe {
  0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); }
}
.medal-card .lbl { font-size: 11px; font-weight: 700; opacity: .85; text-transform: uppercase; letter-spacing: .4px; }
.medal-card .mtx b { display: block; margin-top: 1px; font-size: 20px; font-weight: 900; letter-spacing: -.3px; }
.medal-card .mtx b span:last-child { font-weight: 700; opacity: .8; }
.medal-card .cb { margin-top: 3px; font-size: 12px; font-weight: 600; opacity: .92; }
.medal-card .cb:empty { display: none; }

/* ============================================
   🧭 РАЗДЕЛЫ 2026-09: избранное, корзина, FAQ,
   профиль — перенос дизайна ИЗ ПРОТОТИПА
   (public/prototype-home.html) один в один:
   те же классы, размеры и цвета. Логика не
   тронута — только разметка и внешний вид.
   ============================================ */

/* ── Заголовки страниц ── */
.page-header { margin-bottom: 14px; }
.page-header h2 {
  font-size: 20px; font-weight: 800; letter-spacing: -.3px; color: #101828;
}

/* ── Кнопка-CTA прототипа (общая для разделов) ── */
.sub-cta {
  width: 100%; margin-top: 4px; padding: 14px; border: none; border-radius: 14px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff;
  font-family: inherit; font-size: 14.5px; font-weight: 800; cursor: pointer;
}
.sub-cta.ghost {
  margin-top: 12px; background: #eef2ff; color: #4338ca;
  border: 1px solid #dfe4ff; box-shadow: none;
  display: flex; align-items: center; justify-content: center; gap: 7px;
}

/* ── Пустые состояния (избранное, корзина) — .empty-screen из прототипа ── */
.empty-screen {
  padding: 46px 24px 30px; text-align: center;
  background: none; border: none; box-shadow: none;
}
.empty-screen .ico {
  width: 68px; height: 68px; margin: 0 auto 16px; border-radius: 50%;
  background: #eef2ff; display: flex; align-items: center;
  justify-content: center; font-size: 28px;
}
.empty-screen b { display: block; font-size: 17px; font-weight: 800; color: #101828; }
.empty-screen p {
  margin: 8px auto 20px; max-width: 280px;
  font-size: 13px; line-height: 1.5; color: #98a2b3;
}
.empty-screen .sub-cta { max-width: 280px; margin: 0 auto; }

/* Счётчик избранного «N стран в избранном» */
.fav-count { margin-bottom: 12px; font-size: 12.5px; font-weight: 600; color: #98a2b3; }
.fav-count.hidden { display: none; }

/* ── Корзина: строки товаров — .cart-item из прототипа ──
   Селектор с #cart-page, потому что в старом CSS уже есть общий .cart-item
   (наследие чекаута) с тенью и крупными отступами — перекрываем всё. */
#cart-page .cart-item {
  display: flex; align-items: stretch; gap: 11px; padding: 11px; margin: 0 0 10px;
  background: #fff; border: 1px solid #eaecf0; border-radius: 14px; box-shadow: none;
}
/* contain, а не cover: у карточек товара флаг и название стоят по краям
   картинки, и квадратная обрезка съедала как раз их */
#cart-page .cart-item img {
  width: 62px; height: 62px; flex-shrink: 0; object-fit: contain;
  border-radius: 10px; background: #f7f8fa;
}
#cart-page .cart-item .mid { flex: 1; min-width: 0; }
#cart-page .cart-item .nm {
  display: block; font-size: 13px; font-weight: 700; color: #101828; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#cart-page .cart-item .per { margin-top: 2px; font-size: 11.5px; color: #98a2b3; font-weight: 600; }
/* Подсказка о следующей ступени — единственный элемент корзины, который
   что-то продаёт, поэтому он и выделен цветом скидки, а не серым */
#cart-page .cart-item .tier-up {
  display: inline-block; margin-top: 5px; padding: 4px 7px; border-radius: 10px;
  background: #ecfdf3; color: #027a48; font-size: 10.5px; font-weight: 700;
  line-height: 1.3; cursor: pointer;
}
#cart-page .cart-item .qty { display: flex; align-items: center; gap: 5px; margin-top: 8px; }
#cart-page .cart-item .q {
  width: 27px; height: 27px; flex-shrink: 0; border-radius: 10px;
  border: 1px solid #e4e7ec; background: #f9fafb; color: #344054;
  font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center; box-shadow: none;
}
#cart-page .cart-item .qn {
  width: 46px; height: 27px; text-align: center; border: 1px solid #e4e7ec;
  border-radius: 10px; font-family: inherit; font-size: 12.5px;
  font-weight: 800; color: #101828; background: #fff;
  font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield;
}
#cart-page .cart-item .qn::-webkit-outer-spin-button,
#cart-page .cart-item .qn::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#cart-page .cart-item .right {
  display: flex; flex-direction: column; align-items: flex-end;
  justify-content: space-between; flex-shrink: 0;
}
#cart-page .cart-item .rsum { text-align: right; }
#cart-page .cart-item .rsum .total-eur { display: block; font-size: 14px; font-weight: 800; color: #101828; white-space: nowrap; }
#cart-page .cart-item .rsum .fx-sub { display: block; font-size: 10px; color: #98a2b3; font-weight: 600; }
#cart-page .cart-item .rm {
  width: 24px; height: 24px; border: none; border-radius: 50%;
  background: #f2f4f7; color: #98a2b3; font-size: 11px; cursor: pointer;
  font-family: inherit; display: flex; align-items: center; justify-content: center;
  align-self: flex-end;
}
/* Совсем узкие экраны (старые iPhone SE, 320px): картинку и степпер ужимаем,
   иначе кнопка «+» наезжает на сумму справа */
@media (max-width: 350px) {
  #cart-page .cart-item { gap: 8px; padding: 10px; }
  #cart-page .cart-item img { width: 48px; height: 48px; }
  #cart-page .cart-item .q { width: 24px; height: 24px; font-size: 13px; }
  #cart-page .cart-item .qn { width: 38px; height: 24px; font-size: 12px; }
  #cart-page .cart-item .rsum .total-eur { font-size: 13px; }
}

/* ── Корзина: футер ── */
.cart-footer-background {
  background: #fff; border-top: 1px solid #eaecf0;
}
.total-label-compact { color: #667085; font-weight: 700; }
.total-amount-compact { color: #101828; font-weight: 900; }
.btn-checkout-modern {
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 14px; box-shadow: 0 8px 20px rgba(102, 126, 234, .32);
}
.btn-checkout-modern:hover { box-shadow: 0 8px 20px rgba(102, 126, 234, .32); transform: none; }

/* ── FAQ — дизайн из прототипа ── */
/* Тёмный герой с тигром вместо заголовка страницы. Тянем на всю ширину
   и в самый верх (страница даёт padding 20px); в полноэкранном Telegram
   верхний отступ страницы — зона системных кнопок, туда не лезем */
.sub-hero {
  position: relative; overflow: hidden;
  margin: calc(-1 * var(--page-pad, 20px)) calc(-1 * var(--page-pad, 20px)) 18px;
  padding: 22px 20px 24px;
  color: #fff;
}
body.telegram-fullscreen .sub-hero { margin-top: 0; }
.sub-hero.faq-hero {
  background: radial-gradient(130% 175% at 84% 50%, rgba(37, 99, 235, .68) 0%, rgba(0, 0, 0, 0) 66%),
              linear-gradient(120deg, #1c2534 0%, #0d1420 100%);
}
/* Тень слева направо: если тигр окажется под текстом, буквы всё равно читаются */
.sub-hero::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(13, 20, 32, .72) 0%, rgba(13, 20, 32, .35) 46%, rgba(13, 20, 32, 0) 70%);
}
.sub-hero .txt { position: relative; z-index: 2; max-width: 66%; }
.sub-hero .eyebrow {
  font-size: 10px; font-weight: 800; letter-spacing: .10em; text-transform: uppercase;
  color: #bfdbfe; margin-bottom: 5px;
}
.sub-hero h1 { margin: 0 0 6px; font-size: 21px; font-weight: 900; line-height: 1.15; letter-spacing: -.4px; color: #fff; }
.sub-hero p { margin: 0; font-size: 12.5px; line-height: 1.4; color: rgba(255, 255, 255, .8); }
.sub-hero img.char {
  position: absolute; right: -8px; bottom: -10px; height: 138%; z-index: 1;
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, .45));
}

/* Группы и гармошка — вид .faq-q/.faq-a из прототипа на боевых классах */
.faq-section { margin-bottom: 20px; }
.faq-section h3 {
  background: none; box-shadow: none; color: #101828;
  font-size: 15px; font-weight: 800; padding: 0; margin: 0 0 9px;
  border-radius: 0; border-bottom: none;
}
.faq-section h3 .section-icon { display: none; }
.faq-item {
  border-radius: 14px; border: 1.5px solid #eaecf0; margin-bottom: 8px;
  background: #fff; box-shadow: none; overflow: hidden;
}
.faq-item:hover { transform: none; box-shadow: none; }
.faq-item.active { border-color: #c7d2fe; }
.faq-question { padding: 13px 14px; background: none; }
.faq-question::before { display: none; }
.faq-question:hover { background: none; }
.faq-item.active .faq-question { background: #eef2ff; }
.question-text { font-size: 13.5px; font-weight: 700; color: #101828; line-height: 1.35; }
.faq-toggle {
  width: 26px; height: 26px; font-size: 16px; background: none;
  color: #98a2b3; box-shadow: none;
}
.faq-item.active .faq-toggle { background: none; color: #667eea; }
.faq-answer { background: #fff; }
.faq-answer .answer-content { font-size: 13px; line-height: 1.55; color: #475467; }

/* «Не нашли свой вопрос?» — блок из прототипа */
.faq-ask {
  margin-top: 22px; padding: 16px; border-radius: 14px;
  background: #f7f8fa; border: 1.5px solid #eaecf0; text-align: center;
}
.faq-ask b { display: block; font-size: 14px; font-weight: 800; color: #101828; }
.faq-ask span { display: block; margin: 5px 0 12px; font-size: 12.5px; color: #475467; }

/* ── Профиль — дизайн из прототипа ── */
/* Аватар и имя строкой */
.pr-me { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.pr-ava {
  width: 52px; height: 52px; flex-shrink: 0; border-radius: 50%;
  background: #eef2ff; object-fit: cover; border: none;
}
.pr-who b { display: block; font-size: 17px; font-weight: 800; color: #101828; }

/* Три цифры под медалью */
.stats-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.st3 {
  padding: 12px 6px; text-align: center; background: #fff;
  border: 1px solid #eaecf0; border-radius: 14px;
}
.st3 b { display: block; font-size: 16px; font-weight: 900; letter-spacing: -.3px; color: #101828; }
.st3 span { display: block; margin-top: 3px; font-size: 10px; font-weight: 600; color: #98a2b3; line-height: 1.25; }

/* Заголовки секций и строки-пункты */
.pr-h2 { margin: 24px 0 10px; font-size: 15px; font-weight: 800; color: #101828; }
.rows { display: flex; flex-direction: column; gap: 8px; }
.row-set {
  display: flex; align-items: center; gap: 11px; width: 100%; padding: 12px 13px;
  background: #fff; border: 1px solid #eaecf0; border-radius: 14px;
  font-family: inherit; font-size: 13.5px; font-weight: 600; color: #101828;
  text-align: left;
}
.row-set.link { cursor: pointer; }
.row-set .ic {
  width: 32px; height: 32px; flex-shrink: 0; border-radius: 10px;
  background: #f4f5f7; display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-style: normal;
}
.row-set .tt { min-width: 0; }
.row-set .tt b { display: block; font-size: 13.5px; font-weight: 700; }
.row-set .tt em { font-style: normal; font-size: 11px; color: #98a2b3; }
.row-set > i:last-child { margin-left: auto; color: #98a2b3; font-size: 17px; font-style: normal; }
.row-set .lang-pill { margin-left: auto; }

/* Переключатель языка — текстовая пилюля Укр|Рус (без флагов).
   Подсветку .active вешает updateLanguageUI */
.lang-pill {
  height: 34px; border-radius: 10px; border: 1px solid #eaecf0;
  background: #f4f5f7; display: flex; align-items: center; padding: 3px;
  font-size: 12px; font-weight: 800;
}
.lang-pill .lang-option {
  padding: 0 10px; height: 100%; display: flex; align-items: center;
  border: none; border-radius: 8px; background: none; color: #98a2b3;
  font-family: inherit; font-size: 12px; font-weight: 800; cursor: pointer;
}
.lang-pill .lang-option.active { background: #fff; color: #1f2937; box-shadow: 0 1px 3px rgba(16, 24, 40, .12); }

/* ── Оформление заказа ── */
.checkout-summary {
  background: #fff; border: 1px solid #eaecf0; border-radius: 14px;
  padding: 14px; box-shadow: none;
}
.checkout-summary h3 { font-size: 15px; font-weight: 800; color: #101828; margin-bottom: 12px; }
.checkout-item { background: #f9fafb; border-radius: 10px; }
.checkout-total {
  font-size: 16px; font-weight: 900; color: #101828;
  padding-top: 12px; border-top: 1px solid #f2f4f7;
}
.checkout-form .form-group label { font-size: 12.5px; font-weight: 700; color: #475467; }
.checkout-form .form-group input,
.checkout-form .form-group textarea {
  border: 1.5px solid #e4e7ec; border-radius: 12px; background: #f9fafb;
  font-size: 15px; font-weight: 600; color: #101828;
}
.checkout-form .form-group input:focus,
.checkout-form .form-group textarea:focus {
  border-color: #667eea; background: #fff; outline: none; box-shadow: none;
}
.radio-option { border: 1.5px solid #e4e7ec; border-radius: 12px; }
.radio-option:hover {
  transform: none; box-shadow: none;
  border-color: #e4e7ec; background: #fff;
}
/* Выбранный вариант: индиго-рамка. :has() везде в актуальных вебвью;
   без поддержки остаётся точка-индикатор из ::before — вариант читается */
.radio-option:has(input[type="radio"]:checked) { border-color: #667eea; background: #f5f7ff; }
.radio-option input[type="radio"]:checked + .radio-content { color: #3538cd; }
.radio-option input[type="radio"]:checked + .radio-content::before {
  background: #667eea; box-shadow: inset 0 0 0 4px #fff;
}
#submit-order {
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 14px; font-weight: 800;
  box-shadow: 0 8px 20px rgba(102, 126, 234, .32);
}

/* Модал количества: позднее legacy-правило .quantity-btn случайно ужимало
   кнопки +/− до 32px. Возвращаем нормальную touch-зону только этому контролу. */
.quantity-input-group > .quantity-btn {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border: none;
  border-radius: 12px;
  color: #007bff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

@media (max-width: 480px) {
  .quantity-input-group > .quantity-btn {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }
}