/* ==========================================================
   МОДАЛКА ПРОВЕРКИ АВТОМОБИЛЯ (#inspectionModal)
   Стиль: Pavel-Avto — craft paper + terracotta + ink
   ========================================================== */


/* ---------- 1. Геометрия модалки и общая карточка ---------- */

#inspectionModal .modal-dialog {
  max-width: 960px;            /* ширина карточки проверки */
}

#inspectionModal .modal-content {
  background: var(--paper-100);
  border: 2px solid var(--paper-300);
  border-radius: var(--radius);
  box-shadow: 0 24px 48px rgba(31,30,22,.28);
  color: var(--ink);

  /* по высоте не вылезаем за окно браузера, внутри будет скролл */
  max-height: calc(100vh - 3rem);
  display: flex;
  flex-direction: column;

  padding-bottom: 0 !important;
}

/* запрещаем прокрутку самой модалки — скролл только в теле */
#inspectionModal {
  overflow: hidden;  /* переопределяем bootstrap overflow-y:auto */
}


/* ---------- 2. Шапка модалки (верхняя плашка) ---------- */

#inspectionModal .modal-header {
  background: var(--paper-200);
  border-bottom: 2px solid var(--paper-300);
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
  padding: 1rem 1.25rem;
}

#inspectionModal .modal-title {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--ink);
}

/* крестик закрытия */
#inspectionModal .btn-close {
  filter: invert(12%) sepia(6%) saturate(336%) hue-rotate(16deg)
          brightness(95%) contrast(92%);
  opacity: .8;
}
#inspectionModal .btn-close:hover {
  opacity: 1;
}


/* ---------- 3. Тело модалки (здесь скроллим содержимое) ---------- */

#inspectionModal .modal-body {
  background: var(--paper-100);
  padding: 1.25rem;

  flex: 1 1 auto;      /* растягивается между шапкой и футером */
  overflow-y: auto;    /* вертикальный скролл */
}

/* вводный абзац под заголовком */
#inspectionModal .modal-body > p:first-child {
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--ink-60);
}


/* ==========================================================
   4. Секции проверки (1–6) — структура без внутренних карточек
   ========================================================== */

#inspectionModal .inspection-section {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;

  padding: 0 0 1.25rem;   /* только расстояние вниз */
  margin-bottom: 1.25rem;
}

/* разделительная линия между секциями */
#inspectionModal .inspection-section + .inspection-section {
  border-top: 1px solid rgba(0,0,0,.08);
  padding-top: 1.25rem;
}

/* заголовки секций (1. Проверка силовых элементов...) */
#inspectionModal .inspection-section h6 {
  font-weight: 800;
  letter-spacing: .02em;
  margin-bottom: .75rem;
  color: var(--ink);
}

/* описание секции (fw-semibold в HTML) */
#inspectionModal .inspection-section .fw-semibold {
  color: var(--ink);
  line-height: 1.5;
  font-weight: 600;
}


/* ---------- 5. Картинки внутри секций ---------- */

/* уменьшаем ширину, чтобы описание + картинка лучше помещались */
#inspectionModal .inspection-section img {
  width: 85%;
  max-width: 720px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}

/* гарантированно центрируем контейнер картинки */
#inspectionModal .inspection-section .my-3.text-center {
  text-align: center;
}


/* ---------- 6. Списки пунктов (ол/ли) ---------- */

#inspectionModal .inspection-section ol {
  padding-left: 1.2rem;
  margin-bottom: 0;
}

#inspectionModal .inspection-section li {
  font-size: 0.95rem;
  margin-bottom: 0.25rem;
  color: var(--ink);
}

/* мобильная адаптация: колонки в одну */
@media (max-width: 575.98px) {
  #inspectionModal .inspection-section .row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }
  #inspectionModal .inspection-section .row > [class*="col-"] + [class*="col-"] {
    margin-top: 0.75rem;
  }
}


/* ---------- 7. Подытог секции (если есть текст) ---------- */

#inspectionModal .inspection-section-summary {
  border-top: 1px solid rgba(0,0,0,.08);
  margin-top: .75rem;
  padding-top: .75rem;
  font-size: .9rem;
  color: var(--ink-60);
}


/* ---------- 8. Низкий текст ("можем отправить отчёт") ---------- */

#inspectionModal .modal-body p.small {
  color: var(--ink-60);
  margin-top: 1rem;
}


/* ==========================================================
   9. Футер модалки (нижняя плашка с кнопкой "Понятно")
   ========================================================== */

#inspectionModal .modal-footer {
  background: var(--paper-200);              /* тот же фон, что у шапки */
  border-top: 2px solid var(--paper-300);   /* линия как вверху */

  padding: 1rem 1.25rem;                    /* те же отступы, что у .modal-header */
  margin: 0 !important;                     /* убираем любые внешние отступы */
  width: 100%;                              /* на всю ширину карточки */

  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);

  display: flex;
  justify-content: flex-end;                /* кнопка справа */
  align-items: center;
}

/* кнопка "Понятно" */
#inspectionModal .modal-footer .btn-primary {
  background: var(--terracotta);
  border-color: var(--terracotta);
  color: #fff;
  font-weight: 700;
  border-radius: .6rem;
  padding: .55rem 1.2rem;
  box-shadow: var(--btnshadow);
}
#inspectionModal .modal-footer .btn-primary:hover {
  background: var(--terracotta-hover);
  border-color: var(--terracotta-hover);
}


/* ==========================================================
   10. Убираем скролл у страницы, когда открыта модалка
   ========================================================== */

body.modal-open {
  overflow: hidden !important;
  padding-right: 0 !important;
}

html.modal-open {
  overflow: hidden !important;
}