/* файл add-product-form.css */

/* 
 * Глобальные CSS-переменные для цветовой схемы и настроек 
 * Позволяют легко изменять оформление во всем приложении
 */
:root {
  /* Основные цвета интерфейса */
  --primary-color-ap: #2c3e50;
  /* Основной цвет текста */
  --accent-color-ap: #e74c3c;
  /* Акцентный цвет для важных элементов */
  --border-color-ap: #ffffff;
  /* Цвет границ полей ввода */
  /* Цвета для полей формы */
  --required-color-ap-ap: #666666;
  /* Цвет обязательных полей */
  --optional-color-ap: #666666;
  /* Цвет необязательных полей */
  --placeholder-color-ap: #ff6a00;
  /* Цвет текста-подсказки */
  /* Цвета кнопок */
  --button-bg-ap: #ffffff;
  /* Фон кнопок */
  /* Цвета статусов */
  --valid-color-ap: #2ecc71;
  /* Валидное значение */
  --invalid-color-ap: #e74c3c;
  /* Ошибка */
  --checking-color-ap: #62b1ff;
  /* Проверка */
  --warning-color-ap: #ff6a00;
  /* Предупреждение */

  /* Градиент для фона Фоомы оформления заказа */
  --window-bg-ap: linear-gradient(to bottom, #CCFFFF, #D1EAFF);
}


/* ===== ОБЩИЕ СТИЛИ ДЛЯ ОБОИХ КЛАССОВ ===== */
.add-prod-containeroz,
.add-prod-window {
  /* Базовые настройки */
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  border-color: #4a90e2;            /* Синяя рамка (цвет согласован) */
  
  /* Переходы – плавность для тени, фона и трансформации */
  transition:
    background-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.2s ease-out;

  /* Оптимизация рендеринга (layout – безопаснее для вложенных элементов) */
  contain: layout;
  will-change: transform;           /* Для плавных анимаций */
}

/* ===== КОНТЕЙНЕР (сетка) ===== */
.add-prod-containeroz {
  /* Размеры и адаптивность */
  min-width: 1260px;                /* Минимальная ширина */
  width: fit-content;              /* Автоматическая ширина по содержимому */
  max-width: 100%;                 /* Защита от переполнения */
  height: auto;
  min-height: 390px;

  /* Сеточная разметка */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  justify-content: center;
  align-content: center;
  gap: 20px;

  /* Визуальное оформление */
  border-radius: 20px;
  background-color: none;          /* Прозрачный фон */
  /* box-shadow: 0 4px 12px rgba(0,0,0,0.15); — закомментировано */

  /* Дополнительная оптимизация для тяжёлой сетки */
  contain: strict;                 /* Более агрессивная изоляция */
}

/* ===== ОКНО (флекс-колонка) ===== */
.add-prod-window {
  /* Размеры с приоритетом адаптивности */
  width: min(100%, 1260px);        /* Надёжная альтернатива fit-content */
  max-width: 100vw;
  min-width: 150px;
  max-height: min(800px, 90vh);    /* Ограничение по высоте с учётом вьюпорта */
  min-height: 310px;
  height: auto;

  /* Флекс-раскладка (колонка) */
  display: flex;
  flex-direction: column;
  justify-content: center;          /* Центрирование по вертикали (для flex) */
  gap: 10px;
  /* padding: 20px; */

  /* Оформление */
  background: var(--window-bg-ap, linear-gradient(145deg, #f0f4ff, #ffffff));
  /* box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.2); */
  border-radius: 25px / 24px;      /* Эллиптические скругления */

  /* Внутренние отступы и прокрутка */
  padding: 15px;
  overflow: auto;                  /* Прокрутка при переполнении */
  white-space: normal;             /* Перенос строк */
}



/* Адаптация для изображений */
.add-prod-window img {
  max-width: 100%;
  height: 50px;
  object-fit: contain;
}

/* Медиа-запросы для тонкой настройки */
@media (max-width: 768px) {
  .add-prod-window {
    min-width: 75vw;
    /* На мобильных занимает почти весь экран */
    padding: 15px;
    border-radius: 15px;
  }

  #window-content {
    grid-template-columns: 1fr;
    /* Одна колонка на мобильных */
  }
}

@media (max-width: 480px) {
  .add-prod-window {
    min-width: 95vw;
    padding: 10px;
    border-radius: 10px;
  }
}

.productListMode {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 1rem;
  position: sticky;
  top: 0;
  z-index: 100;
}

/* 
 * Заголовок окна приложения 
 */
.add-prod-title-oz {
  font-size: 18px;
  /* Размер шрифта */
  color: var(--optional-color-ap);
  /* Цвет текста */
  font-weight: normal;
  /* Нормальное начертание */
  margin-bottom: 0px;
  /* Отступ снизу */
  text-align: center;
  /* Центрирование текста */
}

.add-prod-title {
  font-size: 10px;
  /* Размер шрифта */
  color: var(--optional-color-ap);
  /* Цвет текста */
  font-weight: normal;
  /* Нормальное начертание */
  margin-bottom: 0px;
  /* Отступ снизу */
  text-align: center;
  /* Центрирование текста */
}


/* 
 * Контейнер для блоков с CSS Grid 
 * Создает 12-колоночную сетку с 4 строками
 */
.add-prod-blocks-container {
  display: grid;
  /* Использование CSS Grid */
  grid-template-columns: repeat(12, auto);
  /* 12 равных колонок */
  grid-template-rows: repeat(4, auto);
  /* 4 равных строки */
  gap: 7px;
  /* Расстояние между элементами */
  width: 100%;
  /* Ширина на весь контейнер */
  height: 220px;
  /* Фиксированная высота */
  position: relative;
}

.add-prod-bt-block {
  background-color: white;
  border-radius: 15px;
  padding: 0px;
  transition: box-shadow 0.3s ease, transform 0.2s ease-out;
  cursor: pointer;
  text-align: center;
  display: grid;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  border: 2px solid #e9ecef;
  width: 40px;
  /* Ширина под содержимое */
  height: 40px;
  /* Высота под содержимое */
  min-width: 40px;
  /* Минимальная ширина */
  max-width: 40px;
  /* Не превышает 230px */
  min-height: 40px;
  /* Минимальная высота */
  max-height: 40px;
  /* Не превышает 230px */
}

.add-prod-required-middle {
  display: block;
  /* Блочный элемент */
  text-align: center;
  /* Центрирование текста */
  width: 65%;
  /* Ширина на весь контейнер */
}

.add-prod-optional-middle {
  display: block;
  /* Блочный элемент */
  text-align: center;
  /* Центрирование текста */
  width: 65%;
}

/* Позиционирование каждого блока в сетке  */
.add-prod-upload-options {
  grid-area: 1 / 1 / 2 / 2;

}

.add-prod-upload-options1 {
  grid-area: 3 / 1 / 4 / 2;

}

/* Контейнеры для кнопок загрузки */
.add-prod-upload-options,
.add-prod-upload-options1 {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
}

.add-prod-upload-option-fl,
.add-prod-upload-option-bf {
  width: 40px;
  height: 40px;
  border-radius: 15px;
  background: white;
  /* border: 2px dashed #e9ecef; */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.2s;
}

.add-prod-upload-option-fl:hover,
.add-prod-upload-option-bf:hover {
  transform: scale(1.05);
  border-color: var(--primary);
  background: var(--primary-light);
}

.add-prod-upload-option-fl:hover {
  transform: scale(0.95);
}

.add-prod-upload-option-fl.add-prod-visible {
  display: inline-flex;
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  animation: btnFadeIn 0.2s ease-out;
}

.add-prod-upload-option-fl:active {
  transform: scale(0.95);
  background: #FF8000;
  /* Более насыщенный красный */
}

/* Вторая строка, первая колонка */
.add-prod-upload-option-bf {
  border-radius: 15px;
  /* Скругленные углы */
  width: 45px;
  height: 45px;
}

.add-prod-upload-option-bf:hover {
  transform: scale(1.1);
}

.add-prod-upload-option-bf.add-prod-visible {
  display: inline-flex;
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  animation: btnFadeIn 0.2s ease-out;
}

.add-prod-upload-option-bf:active {
  transform: scale(0.95);
  background: #FF8000;
  /* Более насыщенный красный */
}

/* Контейнер галереи */
.add-prod-gallery-container {
  grid-area: 1 / 2 / 5 / 5;
  display: flex;
  flex-direction: column;
  background: #fbfdff;
  border-radius: 20px;
  padding: 2px;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  /* width: 100%; */
  border: 2px dashed #e9ecef;
  width: 220px;
  max-width: 220px;
  min-width: 220px;
}


/* Стили загрузки */
.add-prod-upload-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 15px;
  text-align: center;
  color: #666;
}

#paste-area:hover {
  background: #f5f5f5;
}

.add-prod-upload-label svg {
  margin-top: 8px;
  color: #4a90e2;
}

/* Стили вставки */
#paste-area {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background 0.3s;
}

#paste-area:hover {
  background: #f5f5f5;
}


/* Область превью */
.add-prod-preview-area {
  flex: 1;
  min-height: 150px;
  /* background: #fff; */
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* Пустое состояние */
.add-prod-empty-state {
  text-align: center;
  color: #999;
}

.add-prod-empty-state h3 {
  font-size: 1rem;
  margin: 0.5rem 0 0.25rem;
}

.add-prod-empty-state p {
  font-size: 0.85rem;
  margin: 0;
}

/* Контейнер фото */
#photoContainer {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

#mainPreview {
  max-width: 100%;
  max-height: 200px;
  object-fit: contain;
  border-radius: 4px;
}

/* Кнопка удаления */
.add-prod-photo-actions {
  position: absolute;
  top: 8px;
  right: 8px;
}

/* Миниатюры */
.add-prod-thumbnail-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 3px;
  /* max-height: 50px; */
  overflow-y: auto;
  padding: 3px;
}

.thumbnail {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 10px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: 0.2s;
}

.thumbnail:hover {
  border-color: #aaa;
}

.thumbnail.active {
  border-color: #007bff;
}

/* Адаптивность */
@media (max-width: 768px) {
  .add-prod-thumbnails-container {
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
    gap: 7px;
    max-height: 120px;
  }

  .add-prod-thumbnails-container {
    border-width: 1px;
  }
}

/* Состояния */
.add-prod-preview-image:hover {
  transform: scale(1.02);
  /* Легкое увеличение при наведении */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  /* Более выраженная тень */
}

@media (max-width: 768px) {
  .add-prod-preview-image {
    max-width: 200px;
    max-height: 200px;
    /* Уменьшаем размеры на мобильных */
  }
}

.add-prod-delete-btn {
  width: 32px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  font-size: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.2s;
}

.add-prod-delete-btn:hover {
  background: #f44336;
  color: white;
  transform: scale(1.05);
}

.add-prod-delete-btn:active {
  transform: scale(0.95);
  background: #f5222d;
}

/* Анимация появления */
@keyframes btnFadeIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Для принудительного отображения (когда нужно всегда видно) */
.add-prod-delete-btn.add-prod-visible {
  display: inline-flex;
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  animation: btnFadeIn 0.2s ease-out;
}


/* Остальные блоки позиционируются аналогично */
.add-prod-block-4 {
  grid-area: 1 / 5 / 1 / 8;
  height: 100%;
  position: relative;
}

.add-prod-block-5 {
  grid-area: 1 / 8 / 1 / 11;
  height: 100%;
}



/* Стили для контейнера поля ввода */
.add-prod-url-input-container {
  position: relative;
  /* Относительное позиционирование для вложенных элементов */
  display: flex;
  /* Flexbox для выравнивания содержимого */
  align-items: center;
  /* Центрирование по вертикали */
  width: 100%;
  /* Занимает всю ширину контейнера */
  height: 50px;
  /* Фиксированная высота */
  padding: 0px;
  /* Внутренние отступы */
  box-sizing: border-box;
  /* Учет padding в размерах */
}


/* ------------Копирование ссылки------------------------------- */

.add-prod-copy-url-container {
  position: relative;
  /* Относительное позиционирование для вложенных элементов */
  display: flex;
  /* Flexbox для выравнивания содержимого */
  align-items: center;
  /* Центрирование по вертикали */
  /* Занимает всю ширину контейнера */
  height: 50px;
  /* Фиксированная высота */
  padding: 0px;
  /* Внутренние отступы */
  box-sizing: border-box;
  /* Учет padding в размерах */
}

/* Стили для кнопки копирования */
.add-prod-copy-btn {
  /* Позиционирование */
  position: absolute;
  right: 40px;
  /* Отступ справа */
  width: 25px;
  height: 25px;
  border-radius: 100%;
  border: none;
  /* Убираем стандартную границу */
  /* Текст/иконка */
  line-height: 1;
  /* Центрирование текста */
  cursor: pointer;
  /* Курсор-указатель при наведении */
  user-select: none;
  /* Запрет выделения текста */
  align-items: center;
  /* Центрирование содержимого по вертикали */
  justify-content: center;
  /* Центрирование содержимого по горизонтали */
  background: transparent;
  /* Полупрозрачный белый фон */
  color: #000000;
  /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); */
  /* Легкая тень */
  transition: all 0.25s cubic-bezier(0.3, 0, 0.1, 1);
  /* Плавный переход при наведении */
  /* display: none;  */
  /* Скрываем кнопку по умолчанию */
}

.add-prod-copy-btn:hover {
  background: transparent;
  /* Полностью непрозрачный */
  /* Более насыщенный красный */
  color: #2ecc71;
  /* Белый цвет иконки */
  /* Белый цвет текста */
  transform: scale(1.1);
}

.add-prod-copy-btn:active {
  transform: scale(0.95);
  background: transparent;
  /* Более насыщенный красный */
}


/* ///////////////////////////////////////// */
/* Стили для кнопки очистки поля от информации */
.add-prod-clear-container {
  position: relative;
  /* Относительное позиционирование для вложенных элементов */
  display: flex;
  /* Flexbox для выравнивания содержимого */
  align-items: center;
  /* Центрирование по вертикали */
  /* Занимает всю ширину контейнера */
  height: 50px;
  /* Фиксированная высота */
  padding: 0px;
  /* Внутренние отступы */
  box-sizing: border-box;
  /* Учет padding в размерах */
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
}

.add-prod-clear-btn {
  /* Позиционирование */
  position: absolute;
  right: 5px;
  /* Отступ справа */
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  line-height: 1;
  /* Центрирование текста */
  cursor: pointer;
  /* Курсор-указатель при наведении */
  user-select: none;
  /* Запрет выделения текста */
  align-items: center;
  /* Центрирование содержимого по вертикали */
  justify-content: center;
  /* Центрирование содержимого по горизонтали */
  /* background: #fffffff4;  */
  background: none;
  /* Полупрозрачный белый фон */
  color: #333333;
  /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); */
  /* Легкая тень */
  transition: all 0.25s cubic-bezier(0.3, 0, 0.1, 1);
  /* Плавный переход при наведении */
  opacity: 0;
  visibility: hidden;
  font-size: 10px;
}


.add-prod-clear-btn:hover {
  background: transparent;
  /* Полностью непрозрачный */
  /* Более насыщенный красный */
  color: #ff2727;
  /* Белый цвет иконки */
  /* Белый цвет текста */
  transform: scale(1.1);
}

.add-prod-clear-btn svg {
  display: block;
  width: 15px;
  height: 15px;
}

.add-prod-clear-btn:active {
  transform: scale(0.95);
  background: transparent;
  /* Более насыщенный красный */
}

.add-prod-clearable-input {
  padding-right: 35px !important;
  width: 100%;
}

/* Показываем кнопку когда поле не пустое */
.add-prod-clearable-input:not(:placeholder-shown)~.add-prod-clear-container {
  opacity: 1;
  visibility: visible;
}

@keyframes click-animation {
  0% {
    transform: translateY(-0%) scale(1);
  }

  50% {
    transform: translateY(-0%) scale(1.2);
  }

  100% {
    transform: translateY(-0%) scale(1);
  }
}

.add-prod-click-animation {
  animation: click-animation 0.10s ease;
}


/* ///////////////////////////////////////////// */

/* Увеличиваем правый отступ у input чтобы кнопка не перекрывала текст */
#productUrl {
  padding-right: 0px;
}

/* Стиль при успешном копировании */
.add-prod-copy-success {
  position: absolute;
  right: 70px;
  background: #e5f8ed;
  color: #2ecc71;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  animation: fadeOut 1.5s forwards;
  animation-delay: 0.5s;
}

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


.add-prod-block-6 {
  grid-area: 1 / 11 / 1 / 12;
  height: 100%;
  justify-content: center;
  /* Центрирование содержимого по вертикали */
  align-items: center;
  border-radius: 11px / 10px;
}


.add-prod-block-7 {
  grid-area: 1 / 12 / 1 / 13;
  justify-content: center;
  /* Центрирование содержимого по вертикали */
  align-items: center;
  height: 100%;
}

.add-prod-block-8 {
  grid-area: 2 / 5 / 3 / 7;
  justify-content: center;
  /* Центрирование содержимого по вертикали */
  align-items: center;
  /* Центрирование содержимого по горизонтали */
  height: 100%;
}

.add-prod-block-9 {
  grid-area: 2 / 7 / 3 / 9;
  /* Адаптивные размеры */
  justify-content: center;
  /* Центрирование содержимого по вертикали */
  align-items: center;
  /* Центрирование содержимого по горизонтали */
  height: 100%;
}

.add-prod-block-10 {
  /* Позиционирование в grid */
  grid-area: 2 / 9 / 3 / 11;
  justify-content: center;
  /* Центрирование содержимого по вертикали */
  align-items: center;
  /* Центрирование содержимого по горизонтали */
  height: 100%;
}

.add-prod-block-11 {
  grid-area: 3 / 5 / 3 / 11;
  height: 100%;
  justify-content: center;
  /* Центрирование содержимого по вертикали */
  align-items: center;
  text-wrap: balanser;
  text-wrap-mode: initial;
  text-wrap-style: balance;
}

/* Базовые стили для textarea */
#productMessage {
  min-height: 50px;
  /* Исходная минимальная высота */
  max-height: 200px;
  /* Максимальная высота при активном состоянии */
  height: 50px;
  /* Фиксированная исходная высота */
  resize: vertical;
  /* Разрешаем изменять размер только по вертикали */
  /* transition: height 0.3s ease, max-height 0.3s ease; */
  /* Плавная анимация */
  overflow-y: hidden;
  /* Скрываем скроллбар когда неактивно */
}

/* Стили для активного состояния */
#productMessage:focus {
  height: auto;
  /* Автоматическая высота при фокусе */
  max-height: 50px;
  /* Увеличиваем максимальную высоту */
  overflow-y: auto;
  /* Показываем скроллбар если нужно */
}

.add-prod-block-12 {
  grid-area: 4 / 7 / 5 / 9;
  height: 100%;
  justify-content: center;
  /* Центрирование содержимого по вертикали */
  align-items: center;
}

.add-prod-block-13 {
  grid-area: 4 / 9 / 5 / 11;
  height: 100%;
  justify-content: center;
  /* Центрирование содержимого по вертикали */
  align-items: center;
}

.add-prod-block-14 {
  grid-area: 4 / 11 / 5 / 12;
  height: 100%;
  justify-content: center;
  /* Центрирование содержимого по вертикали */
  align-items: center;
  /* Адаптивные размеры */

  /* Не превышает 230px */
}

.add-prod-block-15 {
  grid-area: 4 / 12 / 5 / 13;
  height: 100%;
  justify-content: center;
  /* Центрирование содержимого по вертикали */
  align-items: center;
  /* Адаптивные размеры */

  /* Не превышает 230px */
}

/* 
 * Специальный стиль для блока 16 
 * Прозрачный блок без тени
 */
.add-prod-block-16 {
  grid-area: 3 / 11 / 3 / 13;
  /* Позиция в сетке */
  background: transparent;
  /* Прозрачный фон */
  box-shadow: none;
  /* Без тени */
  font-size: 12px;
  /* Уменьшенный шрифт */
  align-self: center;
  /* Вертикальное центрирование */
  justify-self: center;
  /* Горизонтальное центрирование */
  color: var(--optional-color-ap);
  /* Цвет текста */
  text-align: center;
  /* Центрирование текста */
  padding-top: 30px;
  /* Внутренние отступы */
  box-sizing: border-box;
  /* Учет padding в размерах */
  position: relative;
  /* Для абсолютного позиционирования элементов внутри */
  overflow: hidden;
  /* Скрытие переполнения */
  transition: background-color 0.3s ease;
  /* Плавный переход цвета фона */
  height: 100%;
  /* Flex-разметка */
  flex-direction: column;
  /* Элементы в колонку */
  justify-content: center;
  /* Центрирование содержимого по вертикали */
  align-items: center;
  /* Центрирование содержимого по горизонтали */
}

.add-prod-block-17 {
  grid-area: 2 / 11 / 2 / 13;
  /* Позиция в сетке */
  background: transparent;
  /* Прозрачный фон */
  box-shadow: none;
  /* Без тени */
  font-size: 12px;
  /* Уменьшенный шрифт */
  align-self: center;
  /* Вертикальное центрирование */
  justify-self: center;
  /* Горизонтальное центрирование */
  color: var(--optional-color-ap);
  /* Цвет текста */
  text-align: center;
  /* Центрирование текста */
  padding: 0px;
  /* Внутренние отступы */
  box-sizing: border-box;
  /* Учет padding в размерах */
  position: relative;
  /* Для абсолютного позиционирования элементов внутри */
  overflow: hidden;
  /* Скрытие переполнения */
  transition: background-color 0.3s ease;
  /* Плавный переход цвета фона */
  cursor: pointer;
  /* Курсор-указатель при наведении */
  height: 100%;
  /* Flex-разметка */
  flex-direction: column;
  /* Элементы в колонку */
  justify-content: center;
  /* Центрирование содержимого по вертикали */
  align-items: center;
  /* Центрирование содержимого по горизонтали */
}

.add-prod-block-18 {
  grid-area: 4 / 5 / 5 / 7;
  height: 100%;
  justify-content: center;
  /* Центрирование содержимого по вертикали */
  align-items: center;
}


/* 
 * Стили для групп полей формы 
 */
.add-prod-form-group {
  display: flex;
  /* Flexbox для выравнивания содержимого */
  border-radius: 15px / 14px;
  position: relative;
  /* Для абсолютного позиционирования лейблов */
  width: 100%;
  /* Ширина на весь блок */
  height: 50px;
  /* Высота на весь блок */
}

.add-prod-form-group-c {
  display: flex;
  /* Flexbox для выравнивания содержимого */
  position: relative;
  /* Для абсолютного позиционирования лейблов */
  width: 150px;
  /* Ширина на весь блок */
  height: 50px;
  /* Высота на весь блок */
}

/* 
 * Стили для лейблов полей ввода 
 * Плавающие лейблы
 */
.add-prod-form-group label {
  position: absolute;
  /* Абсолютное позиционирование */
  top: 2px;
  /* Отступ сверху */
  left: 5px;
  /* Отступ слева */
  padding: 0 5px;
  /* Внутренние отступы */
  font-size: 12px;
  /* Размер шрифта */
  font-weight: 600;
  /* Полужирное начертание */
  z-index: 1;
  /* Над другими элементами */
}

.add-prod-form-group-c label {
  position: absolute;
  /* Абсолютное позиционирование */
  top: 2px;
  /* Отступ сверху */
  /* left: 5px; */
  /* Отступ слева */
  /* padding: 0 5px; */
  /* Внутренние отступы */
  font-size: 12px;
  /* Размер шрифта */
  font-weight: 600;
  /* Полужирное начертание */
  z-index: 1;
  /* Над другими элементами */
}

/* 
 * Стили для обязательных и необязательных полей 
 */
.add-prod-required {
  color: var(--optional-color-ap);
  /* Красный цвет для обязательных */
}

.add-prod-required:after {
  content: " *";
  /* Добавляем звездочку */
}

.add-prod-optional {
  color: var(--optional-color-ap);
  /* Серый цвет для необязательных */
}

/* 
 * Стили полей ввода 
 * Единые стили для всех типов полей
 */
.add-prod-form-group input[type="text"],
.add-prod-form-group input[type="number"],
.add-prod-form-group input[type="url"],
.add-prod-form-group textarea {
  width: 100%;
  /* Ширина на весь контейнер */
  height: 100%;
  /* Высота на весь контейнер */
  padding: 20px 10px 5px;
  /* Особые отступы для плавающих лейблов */
  font-size: 13px;
  /* Размер шрифта */
  font-family: "Nunito", sans-serif;
  /* Шрифт */
  box-sizing: border-box;
  /* Учет padding в размерах */
  border-color: transparent;
}

/* 
 * Специальные стили для textarea 
 */
.add-prod-form-group textarea,
.add-prod-form-group input {
  min-height: 50px;
  /* Минимальная высота */
  resize: vertical;
  /* Разрешаем изменять размер только по вертикали */
  background-color: #ffffffeb;
  border-radius: 15px / 14px;
}

/* 
 * Стили для полей в фокусе 
 */
input:hover,
textarea:hover {
  background-color: #e8fff7;
  /* border-color: #2ecc71; */
}

/* 
 * Стили для полей с кнопками (+/-) 
 */
.add-prod-input-with-button {
  /* Расположение элементов, задняя область блока с кнопками*/
  display: grid;
  grid-template-columns: 25px auto 25px;
  /* Кнопки | Поле ввода | Кнопки */
  gap: 2px;
  /* Расстояние между элементами */
  padding: 0px;
  /* Отступы от краев контейнера */
  position: relative;
  /* Для позиционирования кнопок */
  /* Стили контейнера */
  width: auto;
  /* Ширина под содержимое */
  border-radius: 10px;
  /* Скругление углов */
  height: 48px;
  /* Высота под содержимое */
  overflow: hidden;
  /* Для сохранения скругления углов */
  /* Граница и фон */
  /* border: 1px solid #d1d1d1;  */
  /* Цвет границы контейнера */
  background-color: transparent;
  /* Прозрачный фон контейнера */
  /* Выравнивание содержимого */
  align-items: center;
  /* Центрирование содержимого по вертикали */
  justify-content: center;
  /* Центрирование содержимого по горизонтали и вертикали */
  /* Тень и переходы */
  /* box-shadow: 0 2px 4px rgba(0,0,0,0.1); */
  transition: all 0.3s ease;
  /* Плавный переход для всех свойств */
  cursor: pointer;
  /* Курсор-указатель при наведении */
}

/* Стили для кнопок +/- */
.add-prod-input-with-button .add-prod-quantity-btn {
  /* Размеры и выравнивание */
  width: 100%;
  /* Ширина на весь контейнер */
  height: 25px;
  /* Высота на весь контейнер */
  display: flex;
  /* Flex-разметка для содержимого */
  align-items: center;
  /* Центрирование содержимого по вертикали */
  justify-content: center;
  /* Центрирование содержимого по горизонтали */
  /* Визуальные стили */
  border-radius: 11px / 10px;
  /* Скругление углов */
  /* Цвет границы кнопок /*/
  box-shadow: 2px solid #ffb4b4;
  /* Легкая тень */
  /* Плавный переход для всех свойств */
  /* transition: background-color 0.3s ease, box-shadow 0.3s ease; */
  /* Плавный переход для всех свойств */
  /* Стили кнопок */
  background-color: #ffffff;
  /* Фон кнопок */
  border: none;
  cursor: pointer;
  font-size: 10px;
  font-weight: 600;
  color: #666666;
  /* Цвет текста кнопок */
}


/* Стили для поля ввода */
.add-prod-input-with-button input {
  border: none;
  background: transparent;
  padding: 17px 0px 0px 0px;
  text-align: center;
  font-size: 13px;
  width: 100%;
  height: 100%;
  cursor: pointer;
}



.add-prod-minus-btn {
  /* Стили для кнопки уменьшения */
  background-color: #666666;
  /* Фон кнопки */
  color: #666666;
  /* Цвет текста кнопки */
  border-right: 1px solid #e9e9e9;
  /* Граница справа */
  padding: 0px;
}


.add-prod-minus-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: #cccccc;
}

.add-prod-plus-btn {
  /* Стили для кнопки увеличения */
  background-color: #666666;
  /* Фон кнопки */
  color: #666666;
  /* Цвет текста кнопки */
  border-left: 1px solid #e9e9e9;
  /* Граница слева */
  padding: 0px;
}

.add-prod-plus-btn:hover {
  color: #FF8000;
  /* Черный цвет текста при наведении */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /* Легкая тень при наведении */
}

.add-prod-minus-btn:hover {
  color: #FF8000;
  /* Черный цвет текста при наведении */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /* Легкая тень при наведении */
}

.add-prod-plus-btn:active {
  background-color: #00e1ff;
  /* Светло-синий фон при наведении */
  transform: translateY(-1%) scale(0.9);
  color: #FF8000;
  /* Черный цвет текста при наведении */
}

.add-prod-minus-btn:active {
  background-color: #00e1ff;
  /* Красный фон при наведении */
  transform: translateY(-1%) scale(0.9);
  color: #FF8000;
  /* Черный цвет текста при наведении */
}

/* Состояния при наведении и фокусе */
.add-prod-input-with-button:hover {
  border-color: #a1a1a1;
}

.add-prod-input-with-button .add-prod-quantity-btn:hover {
  background-color: #d9d9d9;
}


/* Стоит прозрачность 100%, поэтому ничего не отображается */
.add-prod-input-with-button:hover {
  border-color: #1890ff;
  /* Изменение цвета границы при наведении */
}



/* 
 * Поля ввода с кнопками 
 */
.add-prod-input-with-button input {
  border-radius: 15px / 14px;
  /* Скругление углов */
  background-color: #ffffff;
}

.add-prod-input-with-button input:hover {
  background-color: #e4fff5;
}

.add-prod-input-with-button input:focus {
  outline: none;
  background-color: #ffffffe0;
}

.add-prod-input-with-button input:active {
  border: 2px;
  border-color: 2px #e8fff7;
}





/* 
 * Кнопки изменения количества 
 */
.add-prod-quantity-btn {
  border-radius: 19px / 11px;
  /* Скругление углов */
}

/* Стиль при наведении */
.add-prod-quantity-btn:hover {
  background: #dff6f6;
  /* Темнее фон */
}

/* Стиль при нажатии */
.add-prod-quantity-btn:active {
  background: #ccffff;
  /* Еще темнее */
}

/* Первая кнопка (уменьшение) */
.add-prod-quantity-btn.add-prod-decrease {
  border-right: 0px solid #00f7ff;
  /* Разделитель между кнопкой и полем */
}

/* Вторая кнопка (увеличение) */
.add-prod-quantity-btn.add-prod-increase {
  border-left: 0px solid #00f7ff;
  /* Разделитель между полем и кнопкой */
}

/* ======================= */
/* Стили статусов URL */
/* ======================= */
.add-prod-url-status {
  font-size: 12px;
  /* Размер шрифта */
  margin-top: 5px;
  /* Отступ сверху */
  padding: 4px 8px;
  /* Внутренние отступы */
  border-radius: 12px / 11px;
  /* Скругление углов */
  display: none;
  /* По умолчанию скрыт */
}

/* Валидный URL */
.add-prod-url-status.add-prod-valid {
  display: block;
  /* Показываем статус */
  color: var(--valid-color-ap);
  /* Зеленый цвет */
  background-color: rgba(46, 204, 113, 0.1);
  /* Полупрозрачный фон */
}

/* Невалидный URL */
.add-prod-url-status.add-prod-invalid {
  display: block;
  /* Показываем статус */
  color: var(--invalid-color-ap);
  /* Красный цвет */
  background-color: rgba(231, 76, 60, 0.1);
  /* Полупрозрачный фон */
}

/* URL в процессе проверки */
.add-prod-url-status.add-prod-checking {
  display: block;
  /* Показываем статус */
  color: var(--checking-color-ap);
  /* Синий цвет */
  background-color: rgba(52, 152, 219, 0.1);
  /* Полупрозрачный фон */
}

/* URL требует внимания (например, антибот) */
.add-prod-url-status.add-prod-warning {
  display: block;
  /* Показываем статус */
  color: var(--warning-color-ap);
  /* Оранжевый цвет */
  background-color: rgba(255, 106, 0, 0.1);
  /* Полупрозрачный фон */
}

/* 
 * Анимация пульсации для статуса проверки 
 */
@keyframes pulse-ap {
  0% {
    opacity: 0.6;
  }

  /* Начальное состояние */
  50% {
    opacity: 1;
  }

  /* Промежуточное состояние */
  100% {
    opacity: 0.6;
  }

  /* Конечное состояние */
}

/* 
 * Стили подвала (footer) 
 */
.add-prod-footer {
  background-color: #f5f5f5;
  /* Цвет фона */
  padding: 20px;
  /* Внутренние отступы */
  text-align: center;
  /* Выравнивание по центру */
  font-size: 14px;
  /* Размер шрифта */
  color: var(--optional-color-ap);
  /* Цвет текста */
  display: flex;
  flex-direction: column;
  /* Элементы в колонку */
  align-items: center;
  /* Центрирование по горизонтали */
}

/* Логотип в подвале */
.add-prod-footer-logo img {
  height: 40px;
  /* Высота логотипа */
  margin-bottom: 10px;
  /* Отступ снизу */
}

/* Ссылки в подвале */
.add-prod-footer-links {
  display: flex;
  gap: 15px;
  /* Расстояние между ссылками */
  margin-bottom: 10px;
  /* Отступ снизу */
  flex-wrap: wrap;
  /* Перенос на новую строку при необходимости */
  justify-content: center;
  /* Центрирование по горизонтали */
}

/* Стили для ссылок */
.add-prod-footer-links a {
  color: var(--optional-color-ap);
  /* Цвет текста */
  text-decoration: none;
  /* Убираем подчеркивание */
}

/* 
 * Адаптивные стили для разных размеров экранов 
 */

/* Для экранов до 1200px */
@media (max-width: 1200px) {
  .add-prod-blocks-container {
    grid-template-columns: repeat(8, 1fr);
    /* 8 колонок вместо 12 */
    height: auto;
    /* Автоматическая высота */
    grid-auto-rows: minmax(50px, auto);
    /* Минимальная высота строки */
  }
}

/* Для экранов до 768px (планшеты) */
@media (max-width: 768px) {
  .add-prod-blocks-container {
    grid-template-columns: repeat(2, 1fr);
    /* 2 колонки */
  }


  /* В медиа-запросе для мобильных */
  @media (max-width: 768px) {
    .add-prod-blocks-container {
      grid-template-columns: 1fr;
      /* Меняем сетку */
    }

    .add-prod-block {
      grid-column: auto;
      /* Сбрасываем позиции */
      grid-row: auto;
    }
  }

  .add-prod-block {
    transition: grid-column 0.3s ease, grid-row 0.3s ease;
  }

  /* Вертикальное расположение кнопок +/- */
  .add-prod-input-with-button {
    flex-direction: column;
    /* Элементы в колонку */
    height: auto;
    /* Автоматическая высота */
  }

  .add-prod-quantity-btn {
    width: 100%;
    /* Кнопки на всю ширину */
    height: 50px;
    /* Фиксированная высота */
  }
}

/* Для экранов до 480px (мобильные) */
@media (max-width: 480px) {
  .add-prod-blocks-container {
    grid-template-columns: 1fr;
    /* Одна колонка */
  }

  /* Вертикальное расположение ссылок в подвале */
  .add-prod-footer-links {
    flex-direction: column;
    /* Элементы в колонку */
    gap: 7px;
    /* Меньшее расстояние */
  }
}