/* ══════════════════════════════════════════════════════
   dtp.css  —  DTP МОДАЛКА (bottom sheet многошаговая форма)
   Структура:
     1. SHEET КОНТЕЙНЕР
     2. ШАПКА / ПРОГРЕСС
     3. ПАНЕЛИ И АНИМАЦИИ
     4. ИНСТРУКЦИИ (шаг 0)
     5. ГЕОЛОКАЦИЯ (шаг 1)
     6. ВЫБОР ОПЦИЙ (шаги 2-3)
     7. СТРАХОВКА (шаг 3)
     8. ФОТО (шаги 4-5)
     9. СВОДКА (шаг 6)
    10. ОТПРАВКА / УСПЕХ (шаг 7)
    11. STICKY NAV
   ══════════════════════════════════════════════════════ */

/* ── 1. SHEET КОНТЕЙНЕР ───────────────────────────────── */
.dtp-sheet{
  background:var(--card);
  max-height:92dvh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  transition:transform .38s cubic-bezier(.32,.72,0,1);
}

/* ── 2. ШАПКА / ПРОГРЕСС ─────────────────────────────── */
.dtp-header{
  display:flex;flex-direction:column;align-items:center;
  padding:0 20px 10px;gap:5px;flex-shrink:0;
}

.dtp-progress-steps{display:flex;align-items:center;gap:5px}

.dtp-prog-dot{
  width:8px;height:8px;border-radius:50%;
  background:rgba(255,255,255,0.15);
  transition:background .3s,width .35s,border-radius .35s;flex-shrink:0;
}
.dtp-prog-dot.active{background:var(--red);width:22px;border-radius:4px}
.dtp-prog-dot.done{background:var(--green)}

.dtp-step-label{font-size:0.68rem;color:var(--grey);font-weight:600;letter-spacing:.04em}

/* ── 3. ПАНЕЛИ И АНИМАЦИИ ────────────────────────────── */
.dtp-panels-wrap{
  flex:1;overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  scroll-behavior:smooth;display:flex;flex-direction:column;
}

.dtp-panel{
  display:none;padding:0 20px;flex-direction:column;
  animation:dtpFadeUp .33s ease-in-out;
}
.dtp-panel.active{display:flex}

@keyframes dtpFadeUp{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}

/* Заголовок шага */
.dtp-step-header{padding:8px 0 4px;flex-shrink:0}
.dtp-title{font-size:1.15rem;font-weight:700;letter-spacing:-0.03em;margin-bottom:6px;line-height:1.2}
.dtp-subtitle{font-size:0.82rem;color:var(--grey);line-height:1.6;margin-bottom:16px}

/* ── 4. ИНСТРУКЦИИ — шаг 0 ───────────────────────────── */
.dtp-instr-list{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}

.dtp-instr-item{
  display:flex;align-items:flex-start;gap:12px;
  background:var(--card2);border:1px solid var(--border);border-radius:14px;padding:14px;
}

.dtp-instr-ico{
  width:44px;height:44px;background:rgba(229,62,62,0.15);border-radius:50%;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  color:var(--red);
}
.dtp-instr-body{display:flex;flex-direction:column}
.dtp-instr-body strong{font-size:0.875rem;font-weight:700;display:block;margin-bottom:3px}
.dtp-instr-body span{font-size:0.78rem;color:var(--grey);line-height:1.45}

/* ── 5. ГЕОЛОКАЦИЯ — шаг 1 ───────────────────────────── */
.dtp-geo-btn{
  background:rgba(10,132,255,0.1);border:1px solid rgba(10,132,255,0.25);
  border-radius:14px;padding:14px 16px;display:flex;align-items:center;
  justify-content:center;gap:10px;cursor:pointer;margin-bottom:12px;
  transition:background .2s,transform .1s;font-size:0.95rem;font-weight:600;color:#60a5fa;
}
.dtp-geo-btn:active{transform:scale(0.98);background:rgba(10,132,255,0.2)}

.dtp-geo-status{
  font-size:0.78rem;color:var(--grey);
  margin-bottom:12px;padding-left:4px;min-height:18px;
}

.dtp-form-field{
  background:rgba(255,255,255,0.07);border:1px solid var(--border);
  border-radius:14px;padding:14px 16px;margin-bottom:12px;
}
.dtp-form-field input{
  width:100%;background:transparent;border:none;color:#fff;
  font-size:1rem;outline:none;font-family:inherit;
}

/* ── 6. ВЫБОР ОПЦИЙ — шаги 2-3 ──────────────────────── */
.dtp-option-group{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}

.dtp-option-btn{
  background:rgba(255,255,255,0.06);border:1px solid var(--border);
  border-radius:13px;padding:13px 16px;cursor:pointer;
  transition:all .2s;font-size:0.9rem;color:#e2e8f0;
}
.dtp-option-btn.active{background:rgba(229,62,62,0.12);border-color:rgba(229,62,62,0.5);color:#fc8181}
.dtp-option-btn:active{transform:scale(0.98)}

/* ── 7. СТРАХОВКА — шаг 3 ────────────────────────────── */
.dtp-insurance-row{display:flex;gap:10px;flex-direction:column;margin-bottom:8px}

.dtp-insurance-card{
  background:rgba(255,255,255,0.04);border:1px solid var(--border);
  border-radius:16px;padding:14px;
}
.dtp-insurance-card h4{font-size:0.8rem;color:var(--grey);margin-bottom:10px;font-weight:600}

/* ── 8. ФОТО — шаги 4-5 ─────────────────────────────── */
.dtp-photo-cats{display:flex;flex-direction:column;gap:14px;margin-bottom:8px}

.dtp-photo-cat{
  background:rgba(255,255,255,0.04);border:1px solid var(--border);
  border-radius:16px;padding:12px;
}
.dtp-photo-cat-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:10px;font-size:0.85rem;font-weight:600;
}
.dtp-photo-counter{
  font-size:0.7rem;color:var(--grey);
  background:rgba(255,255,255,0.08);padding:4px 10px;border-radius:20px;
}

.dtp-upload-area{
  border:2px dashed rgba(255,255,255,0.15);border-radius:12px;
  padding:14px;text-align:center;cursor:pointer;
  font-size:0.8rem;color:var(--grey);transition:all .2s;margin-bottom:10px;
}
.dtp-upload-area.hidden{display:none}
.dtp-upload-area:active{background:rgba(255,255,255,0.05)}

.dtp-photo-preview{display:flex;flex-wrap:wrap;gap:8px}

/* Превью фото */
.dtp-prev-item{
  position:relative;width:72px;height:72px;border-radius:12px;overflow:hidden;
  background:var(--card2);border:1px solid var(--border);
  animation:dtpPhotoIn .2s ease-out;
}
@keyframes dtpPhotoIn{
  from{opacity:0;transform:scale(0.8)}
  to{opacity:1;transform:scale(1)}
}
.dtp-prev-img{width:100%;height:100%;object-fit:cover}
.dtp-prev-del{
  position:absolute;top:4px;right:4px;background:rgba(0,0,0,0.65);
  backdrop-filter:blur(4px);border-radius:50%;width:22px;height:22px;
  display:flex;align-items:center;justify-content:center;
  font-size:10px;cursor:pointer;color:#fff;transition:background .15s;
}
.dtp-prev-del:hover{background:rgba(229,62,62,0.85)}

/* ── 9. СВОДКА — шаг 6 ───────────────────────────────── */
.dtp-summary-block{
  background:rgba(255,255,255,0.05);border:1px solid var(--border);
  border-radius:16px;padding:16px;margin-bottom:12px;
}
.dtp-sum-row{
  display:flex;justify-content:space-between;align-items:flex-start;
  padding:8px 0;border-bottom:0.5px solid rgba(255,255,255,0.07);
}
.dtp-sum-row:last-child{border-bottom:none}
.dtp-sum-lbl{color:var(--grey);font-size:0.8rem}
.dtp-sum-val{font-weight:600;font-size:0.82rem;text-align:right;word-break:break-word;max-width:58%;line-height:1.4}

/* ── 10. УСПЕХ — шаг 7 ───────────────────────────────── */
.dtp-success-wrap{text-align:center;padding:16px 0 8px;flex-shrink:0}

.dtp-success-anim{
  width:80px;height:80px;border-radius:50%;
  background:rgba(56,161,105,0.12);border:2px solid rgba(56,161,105,.4);
  display:flex;align-items:center;justify-content:center;
  color:var(--green);margin:0 auto 14px;
  animation:successPop .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes successPop{
  from{transform:scale(.4);opacity:0}
  to{transform:scale(1);opacity:1}
}

.dtp-sent-count{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(56,161,105,0.12);border:1px solid rgba(56,161,105,0.25);
  color:var(--green);font-size:0.78rem;font-weight:700;
  padding:6px 14px;border-radius:20px;margin-top:8px;
}

.dtp-wait-title{
  font-size:0.72rem;color:var(--grey);font-weight:600;
  text-transform:uppercase;letter-spacing:.05em;
  margin:16px 0 8px;flex-shrink:0;
}

.dtp-todo-list{display:flex;flex-direction:column;gap:8px;margin-bottom:4px;flex-shrink:0}
.dtp-todo-item{
  display:flex;align-items:center;gap:10px;
  background:var(--card2);border:1px solid var(--border);border-radius:12px;
  padding:12px 14px;font-size:0.82rem;font-weight:600;color:var(--grey);min-height:44px;
}
.dtp-todo-item svg{flex-shrink:0;color:var(--grey2)}

/* ── 11. STICKY NAV ──────────────────────────────────── */
.dtp-sticky-actions{
  position:sticky;bottom:0;
  padding:10px 0 calc(20px + var(--safe-b));
  background:linear-gradient(to top,var(--card) 65%,transparent);
  display:flex;flex-direction:column;gap:8px;z-index:5;
  margin-top:auto;flex-shrink:0;
}
.dtp-nav-row{display:flex;gap:8px}
.dtp-nav-row .btn {
  flex: 1 1 0; /* по умолчанию равные размеры */
  min-width: 0; /* разрешаем сжатие */
  white-space: nowrap; /* запрещаем перенос текста */
  overflow: hidden;
  width:auto;
  text-overflow: ellipsis; /* если совсем не влезет - троеточие */
}

/* Для маленьких экранов, когда вторая кнопка шире */
@media (max-width: 480px) {
  .dtp-nav-row {
    flex-wrap: nowrap;
  }
  
  .dtp-nav-row .btn:first-child {
    flex: 0 1 auto; /* первая кнопка может сжиматься до минимума */
  }
  
  .dtp-nav-row .btn:last-child {
    flex: 1 0 auto; /* вторая кнопка занимает всё доступное место */
  }
}

/* Лоадер-спиннер */
.dtp-loader{
  display:inline-block;width:16px;height:16px;
  border:2px solid rgba(255,255,255,0.25);border-top-color:#fff;
  border-radius:50%;animation:dtpSpin .7s linear infinite;
  vertical-align:middle;margin-right:4px;
}
@keyframes dtpSpin{to{transform:rotate(360deg)}}

/* Блок предупреждения (используется в dtpSendStatus) */
.dtp-send-status-err{
  display:inline-flex;align-items:center;gap:6px;
  color:#fc8181;font-size:0.82rem;
}

/* ═══════════════════════════════════════════════════════════════════════
   ДОПОЛНИТЕЛЬНЫЕ СТИЛИ ДЛЯ НОВОЙ СТРУКТУРЫ ФОРМЫ
   ═══════════════════════════════════════════════════════════════════════ */

/* Фото места ДТП — увеличенная область */
.dtp-photo-place-area {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 16px;
}

.dtp-photo-place-area .dtp-photo-cat-head {
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: 12px;
}

/* Секция документов */
.dtp-docs-row {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 16px;
}

.dtp-docs-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
}

.dtp-docs-card h4 {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--redLight);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Кнопка "Продолжить заполнение" на шаге успеха */
.dtp-success-actions {
  display: flex;
  gap: 12px;
  margin-top: 16px;
  flex-direction: column;
}

.dtp-success-actions .btn-outline {
  background: transparent;
  border-color: rgba(229,62,62,0.4);
  color: var(--redLight);
}

/* Адаптация для маленьких экранов */
@media (max-width: 480px) {
  .dtp-docs-card {
    padding: 12px;
  }
  .dtp-success-actions {
    gap: 8px;
  }
}