/* =========================
   Изолированные стили конфигуратора v2.5
   ========================= */

#motor-configurator-app {
  --canvas: #E8E8E8;
  --surface: #FFFFFF;
  --text: #333333;
  --text-2: #555555;
  --text-3: #6B6B6B;
  --border: #DADADA;
  --table-head: #F3F3F3;
  --zebra: #FAFAFA;
  --primary: #D32F2F;
  --primary-hover: #C62828;
  --primary-active: #B71C1C;
  --primary-weak: #F8D7D7;
  --primary-outline: #F2B9B9;
  --disabled-bg: #E6E6E6;
  --disabled-text: #9E9E9E;
  --success: #28a745;
  --info: #007bff;

  --fs-base: 15px;
  --lh-base: 22px;
  --fs-label: 13px;
  --fs-table: 13px;
  --lh-table: 18px;
  --radius-ctl: 8px;
  --radius-card: 4px;
  --gap-24: 24px;
  --gap-16: 16px;
  --gap-12: 12px;
  --gap-8: 8px;
  --shadow-pop: 0 6px 16px rgba(0, 0, 0, .12);
  --focus-halo: 0 0 0 2px var(--primary-outline);

  margin: 0;
  color: var(--text);
  font-family: Inter, Roboto, "Open Sans", system-ui, Arial, sans-serif;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  box-sizing: border-box;
}

#motor-configurator-app * {
  box-sizing: border-box;
}

/* Контейнер с двойной рамкой */
#motor-configurator-app .container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto 32px;
  background: var(--surface);
  position: relative;
  padding: 24px;
  border: 1px solid var(--primary);
  border-radius: var(--radius-card);
}

#motor-configurator-app .container::after {
  content: "";
  position: absolute;
  inset: 2px;
  border: 1px solid var(--primary-outline);
  border-radius: calc(var(--radius-card) - 1px);
  pointer-events: none;
}

/* Заголовки */
#motor-configurator-app .page-title {
  margin: 0 0 var(--gap-16);
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}

#motor-configurator-app h2 {
  margin: 0 0 var(--gap-12);
  font-size: 18px;
  font-weight: 600;
}

#motor-configurator-app .table-title {
  margin: 0; /* (ИСПРАВЛЕНО) Убран отступ, т.к. теперь во flex */
  font-size: 16px;
  font-weight: 600;
}

/* ======= ГЛАВНАЯ РАЗМЕТКА (ФИЛЬТРЫ + КАРТИНКА) ======= */
#motor-configurator-app .config-main-layout {
  display: grid;
  /* Уменьшили ширину правой колонки до 290px */
  grid-template-columns: 1fr 290px; 
  gap: 20px; /* Чуть меньше отступ */
  align-items: start;
  margin-bottom: 24px; 
}

/* БЛОК КАРТИНКИ */
#motor-configurator-app .image-placeholder {
  position: sticky;
  top: 24px;
  /* Увеличили высоту, чтобы картинка была крупной */
  min-height: 480px; 
  height: auto; 
  
  border: 1px solid var(--border); 
  border-radius: var(--radius-card);
  background-color: var(--surface); 
  
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* Прижимаем к верху */
  padding: 20px; 
}

/* Сама картинка */
#motor-configurator-app .image-placeholder img {
  width: auto;       /* Ширина авто */
  max-width: 100%;   /* НО не больше родителя */
  height: auto;
  object-fit: contain; 
}
/* Чтобы контейнер не растягивался содержимым */
#motor-configurator-app .image-placeholder {
    overflow: hidden; 
}
#motor-configurator-app .main-visual-block {
    width: 100%;
    text-align: center;
}

/* Адаптив: на планшетах картинка уходит вниз */
@media (max-width: 1100px) {
  #motor-configurator-app .config-main-layout {
    grid-template-columns: 1fr;
  }
  #motor-configurator-app .image-placeholder {
    min-height: 300px; /* Чуть меньше на мобильных */
  }
}
#motor-configurator-app .filters {
  display: block;
}

#motor-configurator-app .filters-grid {
  display: grid;
  /* ДЕЛАЕМ 4 КОЛОНКИ */
  grid-template-columns: repeat(4, 1fr); 
  column-gap: 14px;
  row-gap: 20px; /* Больше отступ между строками */
}

@media (max-width: 1250px) {
  #motor-configurator-app .filters-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 колонки на средних экранах */
  }
}
@media (max-width: 600px) {
  #motor-configurator-app .filters-grid {
    grid-template-columns: 1fr; /* 1 колонка на мобильных */
  }
}

/* === СДВОЕННОЕ ПОЛЕ (СКОРОСТЬ + i) === */
#motor-configurator-app .split-field-container {
  display: flex;
  gap: 8px; /* Расстояние между инпутами */
  align-items: flex-start;
}

#motor-configurator-app .split-field-item {
  flex: 1;      /* Растягиваем равномерно */
  min-width: 0; /* Чтобы не вылезало за пределы */
}

/* Скрываем лишний текст в допусках внутри сдвоенного поля, чтобы влезло */
#motor-configurator-app .split-field-item .tolerance-controls .field__help-inline,
#motor-configurator-app .split-field-item .tolerance-controls .addon--unit {
    display: none; 
}
/* Делаем поле ввода процента совсем маленьким */
#motor-configurator-app .split-field-item .tolerance__num {
    width: 34px; 
    padding: 2px 4px;
    font-size: 12px;
    margin-right: 4px;
}
/* Слайдер растягиваем */
#motor-configurator-app .split-field-item input[type="range"] {
    flex: 1;
    width: auto;
    max-width: none;
}

/* Поле формы */
#motor-configurator-app .field {
  display: flex;
  flex-direction: column;
}

#motor-configurator-app .field__label {
  color: var(--text-2);
  font-weight: 600;
  font-size: var(--fs-label);
  line-height: 1.25; /* Межстрочный интервал для переносов */
  margin: 0 0 8px;
  
  min-height: 34px; /* Принудительная высота под 2 строки */
  display: flex;    /* Включаем флекс */
  align-items: flex-end; /* Прижимаем текст к низу (к инпуту) */
  
  white-space: normal; /* Разрешаем перенос слов */
  overflow: visible;
}

#motor-configurator-app .field__label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 8px;
}

#motor-configurator-app .field__help {
  color: var(--text-3);
  font-size: 12.5px;
  line-height: 18px;
}

#motor-configurator-app .field__help-inline {
  color: var(--text-3);
  font-size: 12px;
  white-space: nowrap;
}

/* Инпут с аддоном (единицы) */
#motor-configurator-app .input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex-grow: 1; 
}

#motor-configurator-app .input,
#motor-configurator-app .select {
  width: 100%;
  height: 40px;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: var(--radius-ctl);
  background: #fff;
  color: #111827;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

/* Стили для фасеточной фильтрации */
#motor-configurator-app .select option:disabled {
  color: #aaa;
  background-color: #f9f9f9;
}

/* Стиль для авто-посчитанного поля */
#motor-configurator-app .input.is-calculated {
  background-color: var(--zebra);
  color: var(--text-2);
  font-style: italic;
}
#motor-configurator-app .input.is-calculated:focus {
  background-color: #fff;
  font-style: normal;
  color: var(--text);
}


#motor-configurator-app .input::placeholder {
  color: #9ca3af;
}

#motor-configurator-app .input:hover,
#motor-configurator-app .select:hover {
  border-color: #bdbdbd;
}

#motor-configurator-app .input:focus,
#motor-configurator-app .select:focus {
  border-color: var(--primary);
  box-shadow: var(--focus-halo);
}

@media (max-width: 767px) {
  #motor-configurator-app .input,
  #motor-configurator-app .select {
    height: 36px;
  }
}

#motor-configurator-app .addon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-3);
  font-size: 13px;
  pointer-events: none;
}

#motor-configurator-app .addon--unit {
  min-width: 56px;
  text-align: right;
}

#motor-configurator-app .field__input-row {
  display: flex;
  flex-direction: column; 
  align-items: stretch;    
  gap: 8px;              
}
#motor-configurator-app .tolerance-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

#motor-configurator-app .tolerance .addon {
  position: static;
  transform: none;
  min-width: auto;
  font-size: 13px;
  color: var(--text-3);
}

/* Селект — стрелка */
#motor-configurator-app .select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #767676 50%),
    linear-gradient(135deg, #767676 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 12px) 50%;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}

/* Допуски - УМЕНЬШЕНИЕ ШИРИНЫ */
#motor-configurator-app .tolerance {
  display: flex;
  gap: 5px; 
  align-items: center;
  margin-top: 0;
}

#motor-configurator-app .tolerance__num {
  width: 45px; 
  height: 30px; 
  padding: 4px 6px; 
  font-size: 13px; 
  text-align: center;
  border: 1px solid #d1d5db;
  border-radius: var(--radius-ctl);
}

#motor-configurator-app .tolerance input[type="range"] {
  flex: 1;
  height: 4px;
  appearance: none;
  background: var(--border);
  border-radius: 2px;
  max-width: 60px; 
}

#motor-configurator-app .tolerance input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

/* Ошибки */
#motor-configurator-app .error {
  display: none;
  margin-top: 6px;
  color: var(--primary-active);
  font-size: 13px;
}

#motor-configurator-app .input.invalid {
  border-color: var(--primary-active);
  background: #fff1f1;
}

#motor-configurator-app .error.show {
  display: block;
}

#motor-configurator-app :focus-visible {
  outline: 2px solid var(--primary);
}

/* Кнопки */
#motor-configurator-app .btn {
  height: 40px;
  padding: 0 18px;
  border-radius: 6px;
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease,
    border-color 0.15s ease, box-shadow 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
}

#motor-configurator-app .btn:focus {
  box-shadow: var(--focus-halo);
}

#motor-configurator-app .btn:disabled {
  background: var(--disabled-bg);
  color: var(--disabled-text);
  cursor: not-allowed;
  opacity: 0.7;
}

#motor-configurator-app .btn-primary {
  background: var(--primary);
  color: #fff;
}

#motor-configurator-app .btn-primary:hover {
  background: var(--primary-hover);
}

#motor-configurator-app .btn-primary:active {
  background: var(--primary-active);
}

#motor-configurator-app .btn-outline {
  background: #fff;
  color: var(--primary);
  border-color: var(--primary);
}

#motor-configurator-app .btn-outline:hover {
  background: #fff1f1;
}

#motor-configurator-app .btn-outline:active {
  background: var(--primary-weak);
}

#motor-configurator-app .btn-secondary {
  background: #fff;
  color: var(--text);
  border-color: var(--border);
}

#motor-configurator-app .btn-secondary:hover {
  background: #f9f9f9;
  border-color: #c0c0c0;
}

#motor-configurator-app .btn--full {
  width: 100%;
}

/* Кнопки-иконки для таблицы */
#motor-configurator-app .btn-icon {
  display: block; 
  align-items: center;
  justify-content: center;
  width: 26px; 
  height: 26px; 
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text-2);
  cursor: pointer;
  transition: all 0.15s ease;
}
#motor-configurator-app .btn-icon:hover {
  border-color: #a0a0a0;
  background: #f8f8f8;
  color: #000;
}
#motor-configurator-app .btn-icon:focus {
  box-shadow: var(--focus-halo);
}
#motor-configurator-app .btn-icon svg {
  width: 16px;
  height: 16px;
}

/* Стили для разных кнопок-иконок */
#motor-configurator-app .btn-icon--save:hover {
  color: var(--info);
  border-color: var(--info);
}
#motor-configurator-app .btn-icon--save.is-saved {
  color: var(--info);
  background: #e0f0ff;
}

#motor-configurator-app .btn-icon--share:hover {
  color: var(--success);
  border-color: var(--success);
}
#motor-configurator-app .btn-icon--quote:hover {
  color: var(--primary);
  border-color: var(--primary);
}
#motor-configurator-app .btn-icon--remove:hover {
  color: var(--primary-active);
  border-color: var(--primary-active);
}
#motor-configurator-app .btn-icon--pdf:hover {
  color: #333;
  border-color: #333;
}


/* Контейнер для кнопок в таблице */
#motor-configurator-app .table-actions {
  display: grid;
  grid-template-columns: 1fr 1fr; 
  gap: 4px;
  justify-items: center; 
  width: 100%;
}

/* Кнопка раскрытия — на всю ширину сетки */
#motor-configurator-app .filters__toggle-col {
  grid-column: 1 / -1;
}

/* Sticky-панель действий */
#motor-configurator-app .actions-sticky {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  padding-top: 16px;
  margin-top: 16px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.9) 30%);
}

#motor-configurator-app .actions-sticky__left {
  display: flex;
  align-items: center;
  gap: 12px;
}
#motor-configurator-app .actions-sticky__right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Лоадер и счетчик */
#motor-configurator-app .loader {
  font-size: 14px;
  color: var(--text-2);
  font-weight: 600;
}
#motor-configurator-app .results-counter {
  font-size: 14px;
  color: var(--text-2);
  font-weight: 600;
  white-space: nowrap;
}


/* ======= РЕЗУЛЬТАТЫ ======= */
#motor-configurator-app .results {
  margin-top: 24px;
}

/* (НОВЫЙ) Стили для заголовка таблицы (h2 + чекбокс) */
#motor-configurator-app .results-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  gap: 16px;
  flex-wrap: wrap; /* Для мобильных */
}

/* (НОВЫЙ) Стили для обертки чекбокса "В наличии" */
#motor-configurator-app #stockFilterWrapper {
  display: flex;
  align-items: center;
  gap: var(--gap-8);
}

#motor-configurator-app .table-scroll {
  max-height: 80vh;
  overflow-x: auto;
  overflow-y: visible;  
  position: relative;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  isolation: isolate;
}
#motor-configurator-app .recommendation-table {
  width: 100%;
  table-layout: auto;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--fs-table);
  line-height: var(--lh-table);
}

/* ======================================= */
/* ====== СТИЛИ ТАБЛИЦЫ (Z-INDEX) ====== */
/* ======================================= */

div#motor-configurator-app table.recommendation-table thead th {
  position: sticky;
  top: 0;
  z-index: 3; 
  background: var(--table-head);
  color: var(--text);
  border-bottom: 2px solid var(--border); 
  font-weight: 600;
  text-align: center;
  padding: 8px 5px; 
  vertical-align: middle;
  transform: translateZ(0);
}

/* Управление переносом строк в заголовках */
div#motor-configurator-app table.recommendation-table thead th:nth-child(3), /* Передаточное */
div#motor-configurator-app table.recommendation-table thead th:nth-child(4), /* Скорость */
div#motor-configurator-app table.recommendation-table thead th:nth-child(8)  /* Мощность */
{
  min-width: 90px;
}

div#motor-configurator-app table.recommendation-table thead th:nth-child(5), /* Момент */
div#motor-configurator-app table.recommendation-table thead th:nth-child(10) /* Действия */
{
    white-space: nowrap;
}

/* Ячейки тела */
div#motor-configurator-app table.recommendation-table tbody tr td {
  padding: 8px 5px; 
  border-bottom: 1px solid var(--border);
  background: #fff;
  vertical-align: middle;
  color: var(--text) !important;
  white-space: nowrap;
}

div#motor-configurator-app table.recommendation-table tbody tr:nth-child(even) td {
  background: var(--zebra);
  color: var(--text) !important;
}

/* (ИСПРАВЛЕНО) Фон при наведении */
div#motor-configurator-app table.recommendation-table tbody tr:hover td {
  background: #fff1f1 !important;
  color: var(--text) !important;
}

div#motor-configurator-app table.recommendation-table tbody tr.low-fs td {
  background: var(--primary-weak) !important;
  color: var(--text) !important;
}
div#motor-configurator-app table.recommendation-table tbody tr.low-fs td:nth-child(6) {
  color: var(--primary-active) !important;
  font-weight: 600;
}

div#motor-configurator-app table.recommendation-table tbody tr.is-active td {
  background: var(--primary-weak) !important;
  color: var(--text) !important;
  box-shadow: inset 3px 0 0 0 var(--primary);
}

/* Изоляция стилей ссылок в таблице */
div#motor-configurator-app table.recommendation-table a,
div#motor-configurator-app table.recommendation-table a:link,
div#motor-configurator-app table.recommendation-table a:visited {
  color: var(--primary) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  background: none !important;
  border: none !important;
}
div#motor-configurator-app table.recommendation-table a:hover {
  text-decoration: underline !important;
  color: var(--primary-hover) !important;
}
div#motor-configurator-app table.recommendation-table a:active {
  color: var(--primary-active) !important;
}


/* Колонка действий */
#motor-configurator-app .recommendation-table th.table-column-actions,
#motor-configurator-app .recommendation-table td.table-column-actions {
  min-width: 60px; 
  width: 60px; 
}

/* "Липкая" колонка (тело) */
div#motor-configurator-app table.recommendation-table tbody tr td:last-child {
  position: sticky;
  right: 0;
  z-index: 2; 
  transform: translateZ(0);
}

/* Угол (шапка) */
div#motor-configurator-app table.recommendation-table thead th:last-child {
  position: sticky;
  right: 0;
  z-index: 4; 
  background: var(--table-head); 
  transform: translateZ(0);
}


/* Фон для "липкой" колонки (тело) */
div#motor-configurator-app table.recommendation-table tbody tr td:last-child {
    background: var(--surface); /* Фон для нечетных строк */
}
div#motor-configurator-app table.recommendation-table tbody tr:nth-child(even) td:last-child {
    background: var(--zebra); /* Фон для четных строк */
}
div#motor-configurator-app table.recommendation-table tbody tr:hover td:last-child {
    background: #fff1f1 !important; /* Фон при наведении */
}
div#motor-configurator-app table.recommendation-table tbody tr.low-fs td:last-child {
    background: var(--primary-weak) !important; /* Фон для low-fs */
}
div#motor-configurator-app table.recommendation-table tbody tr.is-active td:last-child {
    background: var(--primary-weak) !important;
}
/* ======================================= */
/* === КОНЕЦ ИСПРАВЛЕНИЯ СЛОЕВ (Z-INDEX) === */
/* ======================================= */


/* Выравнивание числовых колонок */
#motor-configurator-app .recommendation-table td:nth-child(2),
#motor-configurator-app .recommendation-table td:nth-child(3),
#motor-configurator-app .recommendation-table td:nth-child(4),
#motor-configurator-app .recommendation-table td:nth-child(5),
#motor-configurator-app .recommendation-table td:nth-child(6),
#motor-configurator-app .recommendation-table td:nth-child(8),
#motor-configurator-app .recommendation-table td:nth-child(9) {
  text-align: center;
}

/* Добавляем толстую левую границу для 7-й колонки (Электродвигатель) */
#motor-configurator-app .recommendation-table th:nth-child(7),
#motor-configurator-app .recommendation-table td:nth-child(7) {
  border-left: 2px solid var(--border);
}

/* Сортировка (индикатор) */
#motor-configurator-app th[data-sort] {
  cursor: pointer;
}
#motor-configurator-app th[data-sort="none"] {
  cursor: default;
}

#motor-configurator-app th[data-sort].is-asc::after {
  content: " ↑";
}

#motor-configurator-app th[data-sort].is-desc::after {
  content: " ↓";
}

/* Скелет-строки */
#motor-configurator-app .skel td {
  position: relative;
}
#motor-configurator-app .skel td::before {
  content: "";
  display: block;
  width: 100%;
  height: 12px;
  border-radius: 3px;
  background: linear-gradient(90deg, #eee, #f5f5f5, #eee);
  animation: motor-configurator-shimmer 1.2s infinite;
}

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

/* Пагинация */
#motor-configurator-app .pagination {
  display: flex;
  justify-content: center;
  padding: 12px;
}

/* Ссылки (общие) */
#motor-configurator-app a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
}
#motor-configurator-app a:hover {
  text-decoration: underline;
}
#motor-configurator-app a:active {
  color: var(--primary-active);
}

/* ===========================================
 * Стили модального окна
 * =========================================== */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal[hidden] {
  display: none;
}
.modal__overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal__container {
  background-color: #fff;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-pop);
  max-height: 90vh;
  width: 95%; /* Чуть шире по умолчанию */
  max-width: 1300px; /* Увеличили максимальную ширину */
  display: flex;
  flex-direction: column;
}
.modal__header {
  padding: var(--gap-16) var(--gap-24);
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal__title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}
.modal__close {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  width: 24px;
  height: 24px;
  position: relative;
}
.modal__close::before,
.modal__close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 2px;
  background-color: var(--text-2);
  transform-origin: center;
}
.modal__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.modal__close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.modal__close:hover::before,
.modal__close:hover::after {
  background-color: var(--text);
}

.modal__content {
  padding: var(--gap-24);
  overflow-y: auto;
  flex-grow: 1;
}
.modal__footer {
  padding: var(--gap-16) var(--gap-24);
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
}
/* В модальном окне таблица не прилипает */
div#motor-configurator-app .modal__content table.recommendation-table thead th {
  position: static; /* СБРОС */
  z-index: auto;
}
/* ...и колонка действий тоже не прилипает */
div#motor-configurator-app .modal__content table.recommendation-table tbody tr td {
  position: static; /* СБРОС */
  z-index: auto;
}
div#motor-configurator-app .modal__content table.recommendation-table thead th:last-child,
div#motor-configurator-app .modal__content table.recommendation-table tbody tr td:last-child {
  position: static; /* СБРОС */
  z-index: auto;
  background: inherit; /* Сброс фона, чтобы он наследовался */
}


/* Адаптив */
@media (max-width: 992px) {
  /* Скрываем 2-ю колонку: Габарит редуктора */
  #motor-configurator-app .recommendation-table th:nth-child(2),
  #motor-configurator-app .recommendation-table td:nth-child(2) {
    display: none;
  }
}

@media (max-width: 992px) {
  /* При скрытии 2-й колонки, 3-я становится 2-й.
     Нам нужно, чтобы числовые колонки оставались центрированными. 
     Корректируем nth-child для центрирования после скрытия.
   */
  #motor-configurator-app .recommendation-table td:nth-child(3),
  #motor-configurator-app .recommendation-table td:nth-child(4),
  #motor-configurator-app .recommendation-table td:nth-child(5),
  #motor-configurator-app .recommendation-table td:nth-child(6),
  #motor-configurator-app .recommendation-table td:nth-child(8),
  #motor-configurator-app .recommendation-table td:nth-child(9) {
    text-align: center;
  }
}

@media (max-width: 767px) {
  #motor-configurator-app .recommendation-table {
    font-size: 12.5px;
    line-height: 18px;
  }
  #motor-configurator-app .actions-sticky {
    flex-wrap: wrap;
    padding-bottom: 12px;
  }
  #motor-configurator-app .actions-sticky__left {
    flex-basis: 100%;
    order: 2;
  }
  #motor-configurator-app .actions-sticky__right {
    flex-basis: 100%;
    order: 1;
    justify-content: flex-end;
  }
  #motor-configurator-app .btn {
    height: 38px;
    font-size: 13px;
  }
  #motor-configurator-app .container {
    padding: 16px;
  }
  .modal__container {
    width: 95%;
  }
  .modal__content {
    padding: 16px;
  }
  /* (НОВОЕ) Перенос чекбокса "в наличии" */
  #motor-configurator-app .results-header {
      flex-direction: column;
      align-items: flex-start;
  }
}
/* ФИКС: Контейнер таблицы */
#motor-configurator-app .table-scroll {
  overflow-x: auto;
  overflow-y: visible;
  position: relative;
}

/* ==================== ФИКС: Sticky таблица (КРИТИЧЕСКИЙ!) ==================== */
#motor-configurator-app .recommendation-table {
  border-collapse: separate; /* Возвращаем separate для корректной работы sticky */
  border-spacing: 0;
  table-layout: auto;
  width: 100%;
}

#motor-configurator-app .recommendation-table thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
  background-color: var(--table-head) !important; /* Серый фон шапки */
  border-bottom: 2px solid var(--border) !important;
}

#motor-configurator-app .recommendation-table tbody td {
  z-index: 1;
  border-bottom: 1px solid #eee;
}

/* Sticky ПРАВАЯ колонка "Действия" */
#motor-configurator-app .recommendation-table th:last-child,
#motor-configurator-app .recommendation-table td:last-child {
  position: sticky;
  right: 0;
  z-index: 2; /* Достаточно z-index: 2 для ячеек тела */
  border-left: 1px solid var(--border);
}
/* Фон для угла шапки */
#motor-configurator-app .recommendation-table thead th:last-child {
  background: var(--table-head) !important;
  z-index: 4; /* Угол должен быть выше всего */
}

/* Фон для ячеек в последней колонке в зависимости от строки */
#motor-configurator-app .recommendation-table tbody tr td:last-child {
  background: var(--surface);
}
#motor-configurator-app .recommendation-table tbody tr:nth-child(even) td:last-child {
  background: var(--zebra);
}
#motor-configurator-app .recommendation-table tbody tr:hover td:last-child {
  background: #fff1f1 !important;
}
#motor-configurator-app .recommendation-table tbody tr.low-fs td:last-child {
  background: var(--primary-weak) !important;
}
#motor-configurator-app .recommendation-table tbody tr.is-active td:last-child {
    background: var(--primary-weak) !important;
}

/* 1. Колонка "Редукторы" (первая) - делаем чуть шире */
#motor-configurator-app .recommendation-table th:nth-child(1),
#motor-configurator-app .recommendation-table td:nth-child(1) {
  min-width: 220px; /* Увеличено для отображения цен/остатков */
  white-space: normal; /* Позволяем тексту переноситься */
}

/* 2. Колонка "Электродвигатели" - единственная широкая */
#motor-configurator-app .recommendation-table .table-column-engine-model {
  width: 30%; /* Задаем относительную ширину, чтобы она была самой большой */
  min-width: 240px; /* Увеличено для отображения цен/остатков */
  white-space: normal; /* Обязательно разрешаем перенос строк */
}

/* 3. Колонка "Действия" - делаем максимально узкой */
#motor-configurator-app .recommendation-table .table-column-actions {
  width: 60px;  /* Ширина для 4 кнопок (2х2) */
}

/* 4. Для остальных колонок НЕ задаем ширину. 
*/
#motor-configurator-app .recommendation-table thead th {
  white-space: nowrap; /* По умолчанию запрещаем перенос в заголовках */
}
/* ...а для тех, где можно, разрешаем */
#motor-configurator-app .recommendation-table th:nth-child(1),
#motor-configurator-app .recommendation-table .table-column-engine-model {
  white-space: normal; /* Разрешаем перенос в заголовках "Редуктор" и "Электродвигатель" */
}
/* Стили для аксессуаров в главной таблице */
.model-accessories {
  font-size: 12px;
  line-height: 16px;
  color: var(--text-3);
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--border);
}
.model-accessories-item {
  display: block;
}

/* Стили для деталей (аксессуары/чертеж) в "Избранном" */
.favorite-details {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}
.favorite-accessories {
  flex: 1;
  font-size: 13px;
  min-width: 220px;
}
.favorite-accessories strong {
  display: block;
  margin-bottom: 8px;
}
.favorite-accessories ul {
  margin: 0;
  padding-left: 20px;
}
.favorite-drawing {
  flex: 1;
  min-width: 200px;
  margin-top: 12px;
}
.favorite-drawing strong {
  display: block;
  margin-bottom: 8px;
}
.favorite-drawing img {
  width: 100%;
  max-width: 300px;
  height: auto;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #fdfdfd;
}

/* Стили для неактивной карточки аксессуаров */
#motor-configurator-app .filter-card.is-disabled {
  background-color: var(--zebra);
  opacity: 0.7;
}
#motor-configurator-app .filter-card.is-disabled .filter-card-body {
  pointer-events: none;
}
/* Стиль для подсказки внутри карточки */
#motor-configurator-app .filter-card .field__help {
   font-size: 13px;
   color: var(--text-2);
   padding: 4px 0;
   margin: 0;
}
/* ===========================================
   Переключатель "Только в наличии"
   =========================================== */

#motor-configurator-app .field--checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f1f1f1; /* Легкая подложка */
  padding: 6px 12px;
  border-radius: 20px;
  transition: background 0.2s;
}
#motor-configurator-app .field--checkbox:hover {
  background: #e9e9e9;
}

#motor-configurator-app #stockFilterWrapper {
  height: auto; 
  padding-bottom: 0; 
  margin-left: auto; /* Прижать вправо на десктопе */
}

/* Скрываем стандартный чекбокс */
#motor-configurator-app .checkbox {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Рисуем переключатель */
#motor-configurator-app .checkbox-label {
  position: relative;
  padding-left: 44px; /* Место под переключатель */
  color: var(--text);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  user-select: none;
  line-height: 24px;
}

/* Подложка переключателя */
#motor-configurator-app .checkbox-label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 36px;
  height: 22px;
  background-color: #ccc;
  border-radius: 11px;
  transition: background-color 0.2s ease;
}

/* Кружок переключателя */
#motor-configurator-app .checkbox-label::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  width: 18px;
  height: 18px;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* Состояние: Включен */
#motor-configurator-app .checkbox:checked + .checkbox-label::before {
  background-color: var(--success); /* Зеленый при включении */
}

#motor-configurator-app .checkbox:checked + .checkbox-label::after {
  transform: translateX(14px);
}

/* ===================================================
   (ИСПРАВЛЕНО) Стили для отображения остатков и цен в ячейках v2.5
   =================================================== */

/* 1. Блок-контейнер для информации (для script.js v2.5) */
.stock-price-info {
  font-size: 12px;
  color: var(--text-3); /* Мягкий серый цвет по умолчанию */
  display: flex;
  flex-direction: row; /* (ИСПРАВЛЕНО) В одну строку */
  flex-wrap: wrap; /* Разрешаем перенос, если не влезает */
  gap: 6px; /* Отступ между элементами */
  margin-top: 6px; 
  padding-top: 6px; 
  border-top: 1px solid var(--border); 
  white-space: nowrap; 
}

/* (НОВОЕ) Разделитель | */
.stock-price-info .stock-separator {
  color: var(--border);
  margin: 0 2px;
}

/* 2. Стиль для "Остаток: X шт." (в наличии) */
.stock-price-info .stock-available {
  color: var(--success) !important; /* Зеленый цвет из вашей темы */
  font-weight: 600; 
}

/* 3. Стиль для "Нет в наличии" */
.stock-price-info .stock-unavailable {
  color: var(--text-3) !important; /* Оставляем мягким серым */
  font-weight: 500;
}

/* 4. (КРИТИЧНО) Отключаем старую подсветку ВСЕЙ строки */
#motor-configurator-app .recommendation-table tbody tr.no-data,
#motor-configurator-app .recommendation-table tbody tr.out-of-stock,
#motor-configurator-app .recommendation-table tbody tr.out-of-stock:nth-child(even),
#motor-configurator-app .recommendation-table tbody tr.in-stock,
#motor-configurator-app .recommendation-table tbody tr.in-stock:nth-child(even) {
  background-color: transparent !important; /* Отменяем !important из старых правил */
}

/* 5. Убеждаемся, что :hover по-прежнему работает */
#motor-configurator-app .recommendation-table tbody tr:hover td {
  background: #fff1f1 !important;
}

/* 6. Убеждаемся, что :hover для "липкой" колонки тоже работает */
#motor-configurator-app .recommendation-table tbody tr:hover td:last-child {
  background: #fff1f1 !important;
}

/* 7. Убеждаемся, что low-fs (низкий сервис-фактор) по-прежнему работает */
#motor-configurator-app .recommendation-table tbody tr.low-fs td {
  background: var(--primary-weak) !important;
}
#motor-configurator-app .recommendation-table tbody tr.low-fs td:last-child {
  background: var(--primary-weak) !important;
}
/* === Новые стили для Избранного (Компактные v4.0) === */

/* Контейнер ячейки */
.fav-cell-content {
  display: flex;
  flex-direction: column;
  gap: 0; /* Убираем лишние отступы между строками */
}

/* Строка с основным товаром (Редуктор) */
.fav-product-row.is-main {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
  padding-bottom: 4px;
  border-bottom: 1px solid #eee;
}

.fav-product-row.is-main .fav-product-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
}

.fav-product-row.is-main .fav-item-price {
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  margin-left: 8px;
}

/* Строка с аксессуаром (компактная) */
.fav-product-row.is-sub {
  display: flex;
  justify-content: space-between;
  align-items: center; /* Центрируем по вертикали */
  padding: 2px 0 2px 12px; /* Отступ слева для лесенки */
  border-bottom: 1px dotted #f0f0f0;
  position: relative;
}

/* Маркер списка для аксессуара */
.fav-product-row.is-sub::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #999;
  font-size: 10px;
  line-height: 1;
}

.fav-sub-name {
  font-size: 12px; /* Мелкий шрифт */
  color: #444;
  line-height: 1.2;
}

.fav-item-price.is-sub-price {
  font-size: 12px;
  color: #666;
  background: none;
  padding: 0;
  white-space: nowrap;
  margin-left: 8px;
}

/* Цена основного товара (мотора/редуктора) без серого фона */
.fav-product-row:not(.is-sub) .fav-item-price {
    font-size: 15px; /* Чуть крупнее, как было */
    font-weight: 700;
    color: #333;
    background: none !important; /* Убираем серый фон */
    padding: 0 !important;       /* Убираем отступы */
    border-radius: 0 !important; /* Убираем скругление */
    white-space: nowrap;
}

/* Блок ИТОГО */
.fav-total-row {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 2px solid #ddd;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  font-weight: 800;
  color: #000;
}

/* Мотор */
.fav-motor-block {
    display: flex; 
    justify-content: space-between; 
    align-items: baseline;
}
.fav-motor-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
}

/* === Стили для кнопок переключения (v3.1) === */
.filters__buttons-row {
  grid-column: 1 / -1; /* На всю ширину сетки */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 576px) {
  .filters__buttons-row {
    grid-template-columns: 1fr; /* На мобильном одна под другой */
    gap: 8px;
  }
}

/* === Панель Аксессуаров === */
.accessories-panel {
  background-color: #f8f9fa;
  border: 1px solid var(--border);
  border-radius: var(--radius-ctl);
  padding: 16px;
  margin-top: 16px;
  margin-bottom: 16px;
  animation: fadeIn 0.2s ease-in-out;
}

.accessories-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e0e0e0;
}

.accessories-title {
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
}

.accessories-content {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

/* Группа аксессуаров (например, Фланцы) */
.acc-group {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 12px;
}

.acc-group-title {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Радио-группа для типов (FA, FB...) */
.acc-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.acc-radio-label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  font-size: 13px;
  user-select: none;
}

.acc-radio-label input[type="radio"] {
  margin-right: 6px;
}

/* Вложенные опции (конкретные фланцы) */
.acc-sub-options {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #eee;
  padding-left: 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.acc-checkbox-label {
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.acc-checkbox-label input {
  margin-right: 8px;
}
/* Стиль для строки ИТОГО (как на скриншоте) */
.fav-total-row {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 2px solid #eee; /* Линия-разделитель сверху */
  font-size: 18px;
  font-weight: 800;
  color: #000;
  text-transform: uppercase;
  line-height: 1.2;
}

/* === Стили для Визуального конфигуратора аксессуаров === */
.accessories-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

/* Сетка для карточек с опциями */
.acc-grid-layout {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Две колонки */
  gap: 15px;
  flex: 1; /* Занимает всё доступное место */
}

/* Карточка одной группы */
.acc-card {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.acc-card-title {
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 700;
  color: #555;
  margin-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 6px;
}

.acc-inputs-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.acc-label {
  display: flex;
  align-items: center;
  font-size: 13px;
  color: #333;
  cursor: pointer;
}

.acc-label input {
  margin-right: 8px;
  width: 16px;
  height: 16px;
  accent-color: #d32f2f;
}

/* Блок для схемы справа */
.accessories-visual {
  width: 300px; /* Фиксированная ширина картинки */
  flex-shrink: 0;
  display: none; /* Скрыт по умолчанию */
}

.acc-visual-preview {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  position: sticky;
  top: 20px;
}

.acc-visual-preview img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Мобильный вид */
@media (max-width: 768px) {
  .acc-grid-layout { grid-template-columns: 1fr; }
  .accessories-visual { width: 100%; margin-top: 20px; }
  .acc-visual-preview { position: static; }
}
/* Делаем так, чтобы картинки стояли вертикально */
#motor-configurator-app .image-placeholder {
  flex-direction: column; /* Вертикальный стек */
  justify-content: flex-start; /* Прижать к верху */
  height: auto; /* Высота по содержимому */
  min-height: 350px;
}

#motor-configurator-app .main-visual-block {
    margin-bottom: 10px;
    text-align: center;
}

/* Стили для блока аксессуара справа */
#motor-configurator-app .accessories-visual {
  width: 100% !important; /* На всю ширину колонки */
  display: none; /* Скрыто по умолчанию */
}

#motor-configurator-app .acc-visual-preview {
  background: transparent;
  border: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: static; /* Убираем sticky внутри sticky */
}

/* === Стили для строки ИТОГО (на всю ширину таблицы) === */
.fav-summary-row td {
  background-color: #fafafa !important; /* Очень светлый серый фон */
  border-bottom: 2px solid #ccc !important; /* Жирная разделительная линия */
  text-align: right;
  padding: 12px 24px !important;
}

.fav-summary-wrapper {
  display: flex;
  justify-content: flex-end; /* Прижать вправо */
  align-items: center;
  gap: 15px;
}

.fav-total-label {
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 600;
  color: #555;
  letter-spacing: 0.5px;
}

.fav-total-val {
  font-size: 20px; /* Крупный шрифт */
  font-weight: 800;
  color: #000;
}
/* ===========================================================
   ФИНАЛЬНЫЙ РАЗМЕР ПРАВОЙ КОЛОНКИ (+15% к аксессуарам)
   =========================================================== */

/* ===========================================================
   ФИНАЛЬНЫЙ РАЗМЕР ПРАВОЙ КОЛОНКИ (+15% к аксессуарам)
   =========================================================== */

/* 1. Контейнер правой колонки */
#motor-configurator-app .image-placeholder {
  position: sticky;
  top: 24px;
  
  height: auto !important;
  min-height: 320px !important; /* Оптимальная высота */
  overflow: hidden; /* Обрезаем всё, что торчит */
  
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  
  gap: 16px; 
  padding: 16px; /* Чуть меньше отступы внутри */
  
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}

/* 2. РЕДУКТОР (Верхняя картинка) */
#motor-configurator-app .main-visual-block {
    margin: 0;
    padding: 0;
    width: 100%;
    text-align: center;
}

#motor-configurator-app .main-visual-block img {
    /* Оставляем 280px - это оптимально */
    max-height: 280px !important; 
    width: auto;        
    max-width: 100%;
    object-fit: contain;
}

/* 3. АКСЕССУАР (Нижняя картинка) */
#motor-configurator-app .accessories-visual {
  width: 100% !important;
  display: none; 
  margin-top: 0 !important; 
  
  padding-top: 15px !important;
  border-top: 1px solid #e0e0e0; 
}

#motor-configurator-app .acc-visual-preview {
  background: transparent;
  border: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#motor-configurator-app .acc-visual-preview img {
  /* УВЕЛИЧИЛИ ЕЩЕ НА 15% (было 200px -> стало 230px) */
  max-height: 230px !important; 
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

#motor-configurator-app .acc-visual-preview span {
    display: block;
    font-size: 12px;
    color: #888;
    margin-bottom: 8px;
    text-align: center;
}
/* === ТАБЛИЦА: PROFESSIONAL & MODERN (v8.0 - Final Polish) === */

/* 1. Основа таблицы */
#motor-configurator-app .recommendation-table {
    table-layout: fixed;
    width: 100%;
    border-collapse: separate; 
    border-spacing: 0;
    font-family: 'Inter', 'Segoe UI', Roboto, sans-serif;
}

/* 2. Шапка таблицы (Без разделителей) */
#motor-configurator-app .recommendation-table thead th {
    background-color: #2c3e50;
    color: #ffffff;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 10px; 
    padding: 6px 1px; 
    letter-spacing: 0.3px;
    vertical-align: middle;
    text-align: center;
    border-bottom: 3px solid #1a252f;
    
    /* УБРАЛ ЧЕРНЫЕ ПОЛОСКИ РАЗДЕЛИТЕЛЕЙ */
    border-right: none !important; 
    
    white-space: normal !important;
    line-height: 1.1;
}

/* 3. Тело таблицы */
#motor-configurator-app .recommendation-table tbody td {
    padding: 5px 3px !important;
    font-size: 12px;
    vertical-align: middle;
    color: #333;
    border-bottom: 1px solid #e1e4e8;
    border-right: 1px solid transparent; 
    line-height: 1.2;
}

/* Зебра */
#motor-configurator-app .recommendation-table tbody tr:nth-child(even) {
    background-color: #f8f9fa;
}
#motor-configurator-app .recommendation-table tbody tr:hover {
    background-color: #f1f4f8;
}

/* 4. Разделитель блоков (Жирная черта после FS) */
#motor-configurator-app .recommendation-table th:nth-child(7),
#motor-configurator-app .recommendation-table td:nth-child(7) {
    border-right: 2px solid #95a5a6 !important;
}

/* 5. Настройка ширины */

/* Ст. 1: Редуктор */
#motor-configurator-app .recommendation-table th:nth-child(1) { width: 17%; }
#motor-configurator-app .recommendation-table td:nth-child(1) { text-align: left; border-right: 1px solid #eee; }

/* Узкие технические столбцы */
/* ТИП: Сделал шире (было 40 -> стало 50) */
#motor-configurator-app .recommendation-table th:nth-child(2) { width: 50px; } 

#motor-configurator-app .recommendation-table th:nth-child(3) { width: 42px; } /* Вал */
#motor-configurator-app .recommendation-table th:nth-child(4) { width: 45px; } /* i */
#motor-configurator-app .recommendation-table th:nth-child(5) { width: 50px; } /* Скор */

/* МОМЕНТ: Сделал уже (было 55 -> стало 45) */
#motor-configurator-app .recommendation-table th:nth-child(6) { width: 45px; } 

#motor-configurator-app .recommendation-table th:nth-child(7) { width: 45px; } /* FS */

#motor-configurator-app .recommendation-table td:nth-child(2),
#motor-configurator-app .recommendation-table td:nth-child(3),
#motor-configurator-app .recommendation-table td:nth-child(4),
#motor-configurator-app .recommendation-table td:nth-child(5),
#motor-configurator-app .recommendation-table td:nth-child(6),
#motor-configurator-app .recommendation-table td:nth-child(7) {
    text-align: center;
    border-right: 1px solid #f0f0f0;
}

/* Ст. 8: Электродвигатель */
#motor-configurator-app .recommendation-table th:nth-child(8) { width: 16%; }
#motor-configurator-app .recommendation-table td:nth-child(8) { text-align: left; border-right: 1px solid #eee; }

/* Узкие моторные столбцы */
#motor-configurator-app .recommendation-table th:nth-child(9)  { width: 50px; } /* кВт */
#motor-configurator-app .recommendation-table th:nth-child(10) { width: 50px; } /* Скор */
#motor-configurator-app .recommendation-table th:nth-child(11) { width: 55px; } /* Мат */
#motor-configurator-app .recommendation-table th:nth-child(12) { width: 40px; } /* Габарит */

#motor-configurator-app .recommendation-table td:nth-child(9),
#motor-configurator-app .recommendation-table td:nth-child(10),
#motor-configurator-app .recommendation-table td:nth-child(11),
#motor-configurator-app .recommendation-table td:nth-child(12) {
    text-align: center;
    border-right: 1px solid #f0f0f0;
}

/* Ст. 13: Действия */
#motor-configurator-app .recommendation-table th:nth-child(13) { 
    width: 50px; 
    text-align: center;
    border-right: none !important;
}
#motor-configurator-app .recommendation-table td:nth-child(13) {
    padding: 2px !important;
    text-align: center; /* Центровка содержимого ячейки */
}


/* 6. Детали контента */

.gb-name a, .motor-name a {
    font-weight: 700;
    color: #2980b9;
    text-decoration: none;
    display: block;
    margin-bottom: 2px;
}
.gb-name a:hover, .motor-name a:hover {
    text-decoration: underline;
    color: #c0392b;
}

.stock-price-row {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    margin-top: 4px;
    padding-top: 3px;
    border-top: 1px dashed #ccc;
    color: #666;
}
.stock-available { color: #27ae60; font-weight: 700; }
.stock-unavailable { color: #c0392b; }
.price-val { font-weight: 700; color: #333; }

/* Сетка кнопок (Центровка) */
.table-actions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    justify-content: center;
    align-items: center;
    margin: 0 auto; /* ГЛАВНОЕ: Центрирует сам блок сетки внутри ячейки */
    width: fit-content; /* Сжимаем блок до размера кнопок */
}

.btn-icon {
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 3px;
    background: transparent;
    color: #555;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.btn-icon:hover {
    background-color: #e2e6ea;
    color: #000;
    border-color: #ccc;
}
.btn-icon svg { width: 14px; height: 14px; }

.btn-icon--quote:hover { color: #d35400; }
.btn-icon--pdf:hover { color: #c0392b; }
.btn-icon--save:hover { color: #2980b9; }
.btn-icon--save.is-saved { color: #2980b9; fill: #2980b9; }
.btn-icon--share:hover { color: #8e44ad; }
/* === КНОПКИ РАСКРЫТИЯ === */
#motor-configurator-app .filters__buttons-row {
  grid-column: 1 / -1; /* Занимает всю ширину сетки */
  display: grid;
  grid-template-columns: 1fr 1fr; /* Две равные кнопки */
  gap: 20px;
  margin-top: 10px;
}

/* === ОБЕРТКА ДЛЯ ВЫПАДАЮЩИХ ПАНЕЛЕЙ === */
#motor-configurator-app .expandable-panels-wrapper {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr; 
  gap: 20px;
  align-items: start;
  margin-top: 16px;
}

/* ЖЕСТКАЯ ПРИВЯЗКА К КОЛОНКАМ */
/* Даже если один блок скрыт, второй останется на своем месте */
#motor-configurator-app #advancedFilters {
    grid-column: 1; 
}
#motor-configurator-app #accessoriesPanel {
    grid-column: 2;
}

/* Адаптив: на узких экранах сбрасываем привязку */
@media (max-width: 1200px) {
  #motor-configurator-app .expandable-panels-wrapper {
    grid-template-columns: 1fr;
  }
  #motor-configurator-app #advancedFilters,
  #motor-configurator-app #accessoriesPanel {
    grid-column: auto;
  }
}

/* Стили для самих панелей, чтобы они выглядели аккуратно */
#motor-configurator-app .advanced,
#motor-configurator-app .accessories-panel {
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 20px;
    background: #fafafa;
}

/* Если панели скрыты через атрибут hidden, они исчезнут сами. 
   Но добавим display: block для состояния "открыто" внутри грида */
#motor-configurator-app .advanced:not([hidden]),
#motor-configurator-app .accessories-panel:not([hidden]) {
    display: block;
    animation: fadeIn 0.2s ease-in-out;
}

@media (max-width: 1200px) {
  #motor-configurator-app .expandable-panels-wrapper {
    grid-template-columns: 1fr; /* На планшете одна под другой */
  }
}