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

.grid-header {
  display: grid;
  grid-template-columns: repeat(11, auto);
  grid-template-rows: repeat(2, auto);
  align-items: center;
  justify-content: center;
  gap: 1px 20px;
  width: 90vw;
  max-width: 1250px;
  background-color: #ffffff;
  position: sticky;
  top: 45px;
  z-index: 100;
}

.grid-footer {
  display: grid;
  /* 11 колонок равной ширины */
  grid-template-columns: repeat(6, auto);
  /* 8 строк равной высоты */
  grid-template-rows: repeat(4, auto);
  align-items: center;
  justify-content: center;
  /* Расстояние между ячейками */
  gap: 1px 20px;
  /* Ширина и высота блока (можно подстроить) */
  width: 90vw;
  max-width: 1250px;
  /* height: 200px; */
  background-color: #ffffff;
  /* padding: 5px; */
  position: sticky;
  bottom: 0;
  z-index: 100;
}

.grid-container-product {
  display: grid;
  /* 11 колонок равной ширины */
  grid-template-columns: repeat(11, auto);
  /* 8 строк равной высоты */
  grid-template-rows: repeat(7, auto);
  align-items: center;
  justify-content: center;
  /* Расстояние между ячейками */
  gap: 1px 20px;
  /* Ширина и высота блока (можно подстроить) */
  width: 90vw;
  max-width: 1250px;
  /* height: 200px; */
  /* background-color: #ededed; */
  /* padding: 5px; */
  line-height: 1.3;
}

.btn-edit-product,
.btn-fav-product,
.btn-delete-product,
.btn-delete-all,
.btn-fav-all {
  width: 25px;
  max-width: 25px;
  min-width: 25px;
  height: 25px;
  max-height: 25px;
  min-height: 25px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  outline: none;
  padding: 0px;
  background-color: white;
}

.btn-fav-product.active {
  color: #ffd700;
  text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
}

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

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.grid-container-product {
  animation: slideUp 0.3s ease;
}

/* *1 Итого ¥ */
.grid-item-prod-1 {
  grid-area: 1 / 11 / 2 / 12;
  align-items: center;
  text-align: center;
  color: #333;
  font-size: 13px;
  font-weight: 600;
  height: 25px;
  max-height: 25px;
  min-height: 25px;
  width: 76px;
  max-width: 76px;
  min-width: 76px;
}

/* *2 Цена ¥ */
.grid-item-prod-2 {
  grid-area: 1 / 10 / 2 / 11;
  align-items: center;
  text-align: center;
  color: #333;
  font-size: 13px;
  font-weight: 600;
  height: 25px;
  max-height: 25px;
  min-height: 25px;
  width: 76px;
  max-width: 76px;
  min-width: 76px;
}

/* *3 Кол-во шт */
.grid-item-prod-3 {
  grid-area: 1 / 9 / 2 / 10;
  align-items: center;
  text-align: center;
  color: #333;
  font-size: 13px;
  font-weight: 700;
  height: 25px;
  max-height: 25px;
  min-height: 25px;
  width: 76px;
  max-width: 76px;
  min-width: 76px;
}

/* 4 Пробел разделитель между блоками */
.grid-item-prod-4 {
  grid-area: 1 / 8 / 2 / 9;
  align-items: center;
  text-align: center;
  color: #333;
  font-size: 13px;
  transform: rotate(-90deg);
  width: 10px;
  max-width: 10px;
  min-width: 10px;
}

/* 5 Цена ¥ */
.grid-item-prod-5 {
  grid-area: 1 / 7 / 2 / 8;
  align-items: center;
  text-align: center;
  color: #333;
  font-size: 13px;
  height: 25px;
  max-height: 25px;
  min-height: 25px;
  width: 96px;
  max-width: 96px;
  min-width: 96px;
}

/* 6 Кол-во шт */
.grid-item-prod-6 {
  grid-area: 1 / 6 / 2 / 7;
  align-items: center;
  text-align: center;
  color: #333;
  font-size: 13px;
  height: 25px;
  max-height: 25px;
  min-height: 25px;
  width: auto;
  max-width: 105px;
  min-width: 105px;
}

/* 7 Информация о товаре */
.grid-item-prod-7 {
  grid-area: 1 / 5 / 2 / 6;
  align-items: center;
  text-align: center;
  color: #333;
  font-size: 13px;
  height: 25px;
  max-height: 25px;
  min-height: 25px;
  width: 350px;
  max-width: 350px;
  min-width: 350px;
}

/* 8 Изображение */
.grid-item-prod-8 {
  grid-area: 1 / 4 / 2 / 5;
  align-items: center;
  text-align: center;
  color: #333;
  font-size: 13px;
  height: 25px;
  max-height: 25px;
  min-height: 25px;
  width: 130px;
  max-width: 130px;
  min-width: 130px;
}

/* 9 Пустое место */
.grid-item-prod-9 {
  grid-area: 1 / 3 / 2 / 4;
  color: #333;
  font-size: 13px;
  font-size: 13px;
  height: 25px;
  max-height: 25px;
  min-height: 25px;
  width: 20px;
  max-width: 20px;
  min-width: 20px;
}

/* 10 Выбрать все радио кнопка*/
.grid-item-prod-10 {
  grid-area: 1 / 2 / 2 / 3;
  align-items: center;
  text-align: center;
  color: #333;
  font-size: 13px;
  height: 25px;
  max-height: 25px;
  min-height: 25px;
  width: 20px;
  max-width: 20px;
  min-width: 20px;
}

/* 11 Кнопки управления */
.grid-item-prod-11 {
  grid-area: 1 / 1 / 2 / 2;
  align-items: center;
  text-align: center;
  color: #333;
  font-size: 13px;
  width: 20px;
  max-width: 20px;
  min-width: 20px;
  height: 25px;
  max-height: 25px;
  min-height: 25px;
}

/* Подчеркивание в Хэдере */
.grid-item-prod-35 {
  grid-area: 2 / 1 / 3 / 12;
  border: 1px solid #cdcdcd;
  font-size: 13px;
  height: 1px;
  max-height: 1px;
  min-height: 1px;
  /* margin-top: 10px; */
}

/* 12 Имя сайта */
.grid-item-prod-12 {
  grid-area: 2 / 4 / 3 / 5;
  color: #333;
  font-size: 12px;
  align-items: center;
  text-align: center;
  height: 15px;
  max-height: 15px;
  min-height: 15px;
}

/* 13 Имя товара+ссылка */
.grid-item-prod-13 {
  grid-area: 3 / 5 / 4 / 6;
  align-items: center;
  text-align: start;
  color: #0066cc;
  font-size: 16px;
  height: 25px;
  max-height: 25px;
  min-height: 25px;
  width: 350px;
  max-width: 350px;
  min-width: 350px;
}

/* 14 кол-во шт число */
.grid-item-prod-14 {
  grid-area: 3 / 6 / 4 / 7;
  align-items: center;
  text-align: center;
  color: #4d4d4d;
  font-size: 13px;
  height: 25px;
  max-height: 25px;
  min-height: 25px;
  width: auto;
  max-width: 105px;
  min-width: 105px;
}

/* 15 цена 1шт число */
.grid-item-prod-15 {
  grid-area: 3 / 7 / 4 / 8;
  align-items: center;
  text-align: center;
  color: #4d4d4d;
  font-size: 13px;
  height: 25px;
  max-height: 25px;
  min-height: 25px;
  width: 96px;
  max-width: 96px;
  min-width: 96px;
}

/* *16 кол-во шт число */
.grid-item-prod-16 {
  grid-area: 3 / 9 / 4 / 10;
  align-items: center;
  text-align: center;
  color: #4d4d4d;
  font-size: 13px;
  height: 25px;
  max-height: 25px;
  min-height: 25px;
  width: 76px;
  max-width: 76px;
  min-width: 76px;
  padding-top: 2px;
}

/* *17 цена 1шт число */
.grid-item-prod-17 {
  grid-area: 3 / 10 / 4 / 11;
  align-items: center;
  text-align: center;
  color: #ff8c08;
  font-size: 13px;
  height: 20px;
  max-height: 20px;
  min-height: 20px;
  width: 76px;
  max-width: 76px;
  min-width: 76px;
}

/* *18 цена всего число */
.grid-item-prod-18 {
  grid-area: 3 / 11 / 4 / 12;
  align-items: center;
  text-align: center;
  color: #ff8c08;
  font-size: 13px;
  font-weight: 700;
  width: 76px;
  max-width: 76px;
  min-width: 76px;
  height: 20px;
  max-height: 20px;
  min-height: 20px;
}

/* 19 Подчеркивание заголовков */
.grid-item-prod-19 {
  grid-area: 1 / 1 / 2 / 12;
  /* border: 1px solid #cdcdcd; */
  font-size: 13px;
  padding: 0;
  height: 1px;
  max-height: 1px;
  min-height: 1px;
}

/* 20 Данные инфо о товаре */
.grid-item-prod-20 {
  grid-area: 4 / 5 / 8 / 6;
  text-align: start;
  font-size: 13px;
  color: #333;
  height: 102px;
  max-height: 102px;
  min-height: 102px;
  width: 350px;
  max-width: 350px;
  min-width: 350px;
}

/* 21 Подчеркивание заголовков */
.grid-item-prod-21 {
  grid-area: 7 / 1 / 8 / 12;
  /* border: 1px solid #cdcdcd; */
  /* border: 0.5px solid #cdcdcd; */
  font-size: 13px;
  height: 1px;
  max-height: 1px;
  min-height: 1px;
}

/* 22 Данные фото товара */
.grid-item-prod-22 {
  grid-area: 3 / 4 / 7 / 5;
  align-items: center;
  text-align: center;
  font-size: 13px;
  color: #333;
  border-radius: 20px;
  height: 130px;
  max-height: 130px;
  min-height: 130px;
  width: 130px;
  max-width: 130px;
  min-width: 130px;
}

/* 23 Радио кнопка № товара */
.grid-item-prod-23 {
  grid-area: 3 / 3 / 4 / 4;
  align-items: center;
  text-align: center;
  font-size: 13px;
  color: #333;
  width: 20px;
  max-width: 20px;
  min-width: 20px;
  height: 20px;
  max-height: 20px;
  min-height: 20px;
}

/* 24 Радио кнопка № продавца */
.grid-item-prod-24 {
  grid-area: 3 / 2 / 4 / 3;
  align-items: center;
  text-align: center;
  font-size: 13px;
  color: #333;
  width: 20px;
  max-width: 20px;
  min-width: 20px;
  height: 20px;
  max-height: 20px;
  min-height: 20px;
}

/* 25 Данные № товара */
.grid-item-prod-25 {
  grid-area: 6 / 3 / 7 / 4;
  align-items: center;
  text-align: end;
  color: #333;
  font-size: 12px;
  white-space: nowrap;
  transform: rotate(-90deg);
  width: 20px;
  max-width: 20px;
  min-width: 20px;
}

/* 26 Данные № продавца */
.grid-item-prod-26 {
  grid-area: 6 / 2 / 7 / 3;
  align-items: center;
  text-align: end;
  font-size: 12px;
  color: #333;
  white-space: nowrap;
  transform: rotate(-90deg);
  width: 20px;
  max-width: 20px;
  min-width: 20px;
}

/* 27 Кнопка "Редактировать" */
.grid-item-prod-27 {
  grid-area: 4 / 1 / 5 / 2;
  align-items: center;
  text-align: center;
  font-size: 13px;
  color: #333;
  width: 20px;
  max-width: 20px;
  min-width: 20px;
  height: 20px;
  max-height: 20px;
  min-height: 20px;
}

/* 28 Кнопка "Добавить в Избранное" */
.grid-item-prod-28 {
  grid-area: 5 / 1 / 6 / 2;
  align-items: center;
  text-align: center;
  font-size: 13px;
  color: #333;
  width: 20px;
  max-width: 20px;
  min-width: 20px;
  height: 20px;
  max-height: 20px;
  min-height: 20px;
}

/* 29 Кнопка "Удалить" */
.grid-item-prod-29 {
  grid-area: 6 / 1 / 7 / 2;
  align-items: center;
  text-align: center;
  font-size: 13px;
  color: #333;
  width: 20px;
  max-width: 20px;
  min-width: 20px;
  height: 20px;
  max-height: 20px;
  min-height: 20px;
}

/* 30 Параметры 1 ед */
.grid-item-prod-30 {
  grid-area: 5 / 6 / 6 / 8;
  align-items: center;
  text-align: center;
  font-size: 12px;
  color: #000066;
  height: 20px;
  max-height: 20px;
  min-height: 20px;
  padding-top: 8px;
}

/* 31 Вес товара, кг */
.grid-item-prod-31 {
  grid-area: 6 / 6 / 7 / 7;
  align-items: center;
  text-align: center;
  font-size: 13px;
  color: #4d4d4d;
  height: 25px;
  max-height: 25px;
  min-height: 25px;
  width: auto;
  max-width: 105px;
  min-width: 50px;
}

/* 32 Объём товара, м3 */
.grid-item-prod-32 {
  grid-area: 6 / 7 / 7 / 8;
  align-items: center;
  text-align: center;
  font-size: 13px;
  color: #4d4d4d;
  height: 25px;
  max-height: 25px;
  min-height: 25px;
}

/* 33 Параметры, всего */
.grid-item-prod-33 {
  grid-area: 5 / 9 / 6 / 12;
  align-items: center;
  text-align: start;
  font-size: 12px;
  color: #000066;
  height: 20px;
  max-height: 20px;
  min-height: 20px;
  padding-top: 8px;
}

/* 34 Параметры, данные */
.grid-item-prod-34 {
  grid-area: 6 / 9 / 7 / 12;
  align-items: center;
  text-align: start;
  font-size: 13px;
  color: #4d4d4d;
  height: 20px;
  max-height: 20px;
  min-height: 20px;
}

/* ФУТЕР */

/* Подчеркивание в Футере */
.grid-item-prod-36 {
  grid-area: 1 / 1 / 2 / 12;
  border: 1px solid #cdcdcd;
  font-size: 13px;
  height: 1px;
  max-height: 1px;
  min-height: 1px;
  margin-bottom: 10px;
  width: 1179px;
}

/* Радио-кнопка выбрать всё */
.grid-item-prod-37 {
  grid-area: 2 / 1 / 3 / 2;
  align-items: center;
  text-align: start;
  font-size: 13px;
  height: 20px;
  max-height: 20px;
  min-height: 20px;
}

/* Кнопка удалить выбранное */
.grid-item-prod-38 {
  grid-area: 2 / 2 / 3 / 3;
  align-items: center;
  text-align: start;
  font-size: 13px;
  height: 20px;
  max-height: 20px;
  min-height: 20px;
}

/* Кнопка добавить в избранное */
.grid-item-prod-39 {
  grid-area: 2 / 3 / 3 / 4;
  align-items: center;
  text-align: start;
  font-size: 13px;
  height: 20px;
  max-height: 20px;
  min-height: 20px;
}

/* Детальная информация о составе груза (кол-во) */
.grid-item-prod-40 {
  grid-area: 2 / 4 / 3 / 8;
  align-items: center;
  text-align: start;
  font-size: 13px;
  width: 681px;
  max-width: 681px;
  min-width: 681px;
}

/* Детальная информация о составе груза (вес, обьем, плотность)*/
.grid-item-prod-41 {
  grid-area: 3 / 4 / 4 / 8;
  align-items: center;
  text-align: start;
  font-size: 13px;
  height: 20px;
  max-height: 20px;
  min-height: 20px;
}

/* Сумма заказа */
.grid-item-prod-42 {
  grid-area: 2 / 8 / 4 / 10;
  align-items: center;
  text-align: end;
  font-size: 16px;
  font-weight: 700;
  width: 152px;
  max-width: 152px;
  min-width: 152px;
}

/* Сумма заказа Данные, цифры*/
.grid-item-prod-43 {
  grid-area: 2 / 10 / 4 / 12;
  align-items: center;
  text-align: start;
  font-size: 18px;
  color: #ff8c08;
  font-weight: 700;
  width: 86px;
  max-width: 86px;
  min-width: 86px;
}




/* ============================================
   АНИМАЦИИ ДЛЯ КНОПОК
   (наведение, нажатие, плавность)
   ============================================ */

/* Общие стили для всех кнопок – только transition */
.btn-edit-product,
.btn-fav-product,
.btn-delete-product,
.btn-delete-all,
.btn-fav-all {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
  /* не переопределяем фон, бордер, отступы – оставляем как есть */
}

/* Эффект при наведении (только для активных кнопок) */
.btn-edit-product:enabled:hover,
.btn-fav-product:enabled:hover,
.btn-delete-product:enabled:hover,
.btn-delete-all:enabled:hover,
.btn-fav-all:enabled:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Эффект при нажатии (active) */
.btn-edit-product:enabled:active,
.btn-fav-product:enabled:active,
.btn-delete-product:enabled:active,
.btn-delete-all:enabled:active,
.btn-fav-all:enabled:active {
  transform: scale(0.95);
}

/* Дополнительно: если хотите разные цвета для разных типов кнопок,
   раскомментируйте и настройте под свои нужды */


.btn-edit-product:enabled:hover {
  background-color: #e0e7ff;
  border-color: #6c63ff;
}

.btn-delete-product:enabled:hover,
.btn-delete-all:enabled:hover {
  background-color: #fee2e2;
  border-color: #ef4444;
}

.btn-fav-product:enabled:hover,
.btn-fav-all:enabled:hover {
  background-color: #fef3c7;
  border-color: #f59e0b;
}