/* ============================================================
   FILE: /templates/{your-template}/css/configurator.css

   Все стили конфигуратора. Чтобы поменять цвета —
   правьте переменные в самом верху (--sc-brand и пр.).
   ============================================================ */

.sarbaz-cfg{
  /* === ЦВЕТА — измените здесь, чтобы перекрасить весь блок === */
  --sc-brand:        #15a1cb;  /* Основной фирменный (голубой)         */
  --sc-brand-dark:   #0f7fa2;  /* Тёмный оттенок основного             */
  --sc-brand-soft:   #e6f5fa;  /* Светлый фон для подсветки активного */
  --sc-accent:       #b3142d;  /* Шапка таблицы характеристик (красный)*/
  --sc-ink:          #1c2a36;  /* Основной цвет текста                 */
  --sc-muted:        #6b7a87;  /* Приглушённый текст                   */
  --sc-line:         #e3e9ee;  /* Цвет границ                          */
  --sc-bg:           #f6f9fb;  /* Светлый фон                          */
  --sc-card:         #ffffff;  /* Фон карточек                         */

  /* === Геометрия === */
  --sc-shadow: 0 6px 24px rgba(20,40,60,.07);
  --sc-radius: 14px;

  background: var(--sc-card);
  border-radius: var(--sc-radius);
  padding: 24px;
  box-shadow: var(--sc-shadow);
  color: var(--sc-ink);
  margin: 24px 0;
  font-family: inherit;
}
.sarbaz-cfg *{ box-sizing: border-box; }

/* ============ Крошки шагов ============ */
.sarbaz-cfg .sc-steps{
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--sc-bg);
  border-radius: 10px;
  margin-bottom: 22px;
  font-size: 13px;
}
.sarbaz-cfg .sc-step{ display: inline-flex; align-items: center; gap: 8px; color: var(--sc-muted); }
.sarbaz-cfg .sc-step__num{
  width: 22px; height: 22px; border-radius: 50%;
  background: #dbe3e9; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600;
  transition: background .25s;
}
.sarbaz-cfg .sc-step.is-active .sc-step__num{ background: var(--sc-brand); }
.sarbaz-cfg .sc-step.is-active{ color: var(--sc-ink); font-weight: 600; }
.sarbaz-cfg .sc-step.is-done   .sc-step__num{ background: #28a745; }
.sarbaz-cfg .sc-step.is-done{ color: var(--sc-ink); }
.sarbaz-cfg .sc-step__sep{ color: #c5cdd4; }
.sarbaz-cfg .sc-step__value{
  color: var(--sc-brand-dark);
  background: var(--sc-brand-soft);
  padding: 2px 8px;
  border-radius: 6px;
  margin-left: 4px;
  font-weight: 600;
}

/* ============ Заголовки шагов ============ */
.sarbaz-cfg .sc-block{ margin-bottom: 24px; }
.sarbaz-cfg .sc-block__title{
  font-size: 15px; font-weight: 600; color: var(--sc-ink);
  margin: 0 0 12px;
  display: flex; align-items: center; gap: 8px;
}
.sarbaz-cfg .sc-block__title .sc-badge{
  background: var(--sc-brand); color: #fff;
  font-size: 11px;
  padding: 3px 8px; border-radius: 20px; font-weight: 500;
}
.sarbaz-cfg .sc-block.is-locked{ opacity: .45; pointer-events: none; }

/* ============ Шаг 1 — карточки моделей ============ */
.sarbaz-cfg .sc-models{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
.sarbaz-cfg .sc-model{
  cursor: pointer;
  border: 1px solid var(--sc-line);
  border-radius: 12px;
  padding: 18px;
  background: #fff;
  display: flex; align-items: center; gap: 16px;
  transition: transform .25s, border-color .25s, box-shadow .25s;
  position: relative;
}
.sarbaz-cfg .sc-model:hover{
  transform: translateY(-2px);
  border-color: var(--sc-brand);
  box-shadow: 0 8px 18px rgba(21,161,203,.12);
}
.sarbaz-cfg .sc-model.is-active{
  border-color: var(--sc-brand);
  box-shadow: 0 0 0 3px rgba(21,161,203,.18);
  background: linear-gradient(180deg, #f4fbfd 0%, #fff 100%);
}
.sarbaz-cfg .sc-model img{
  width: 80px; height: 80px;
  object-fit: contain; flex-shrink: 0;
}
.sarbaz-cfg .sc-model__info h3{ margin: 0 0 4px; font-size: 17px; color: var(--sc-ink); }
.sarbaz-cfg .sc-model__info p{  margin: 0; font-size: 13px; color: var(--sc-muted); line-height: 1.4; }
.sarbaz-cfg .sc-model.is-active::after{
  content: "\2713";
  position: absolute; top: 10px; right: 12px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--sc-brand); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
}

/* ============ Шаг 2 — чипы размеров ============ */
.sarbaz-cfg .sc-sizes{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}
.sarbaz-cfg .sc-size{
  cursor: pointer;
  border: 1px solid var(--sc-line);
  border-radius: 10px;
  padding: 14px 10px;
  text-align: center;
  background: #fff;
  font-size: 14px; font-weight: 600;
  color: var(--sc-ink);
  transition: transform .2s, border-color .2s, background .2s;
}
.sarbaz-cfg .sc-size small{
  display: block;
  font-size: 11px;
  color: var(--sc-muted);
  font-weight: 500;
  margin-top: 2px;
}
.sarbaz-cfg .sc-size:hover{ transform: translateY(-2px); border-color: var(--sc-brand); }
.sarbaz-cfg .sc-size.is-active{
  background: var(--sc-brand);
  color: #fff;
  border-color: var(--sc-brand);
  box-shadow: 0 6px 14px rgba(21,161,203,.3);
}
.sarbaz-cfg .sc-size.is-active small{ color: rgba(255,255,255,.85); }

/* ============ Шаг 3 — панель характеристик ============ */
.sarbaz-cfg .sc-specs-wrap{
  border: 1px solid var(--sc-line);
  border-radius: var(--sc-radius);
  background: linear-gradient(180deg, #fff 0%, #fbfdfe 100%);
  overflow: hidden;
}
.sarbaz-cfg .sc-empty{
  padding: 36px 20px;
  text-align: center;
  color: var(--sc-muted);
  font-size: 14px;
}
.sarbaz-cfg .sc-empty strong{
  display: block;
  color: var(--sc-ink);
  margin-bottom: 4px;
  font-size: 15px;
}
.sarbaz-cfg .sc-panel{
  padding: 24px 26px;
  opacity: 0; transform: translateY(8px);
  transition: opacity .35s, transform .35s;
}
.sarbaz-cfg .sc-panel.is-visible{ opacity: 1; transform: translateY(0); }
.sarbaz-cfg .sc-panel__head{
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--sc-line);
  padding-bottom: 14px;
  margin-bottom: 18px;
}
.sarbaz-cfg .sc-panel__title{
  margin: 0;
  font-size: 20px;
  color: var(--sc-brand-dark);
  font-weight: 700;
}
.sarbaz-cfg .sc-reset{
  background: transparent;
  border: 1px solid var(--sc-line);
  border-radius: 8px;
  padding: 8px 14px;
  color: var(--sc-muted);
  font-size: 13px;
  cursor: pointer;
  transition: all .2s;
}
.sarbaz-cfg .sc-reset:hover{ border-color: var(--sc-brand); color: var(--sc-brand); }

/* ============ Таблица характеристик ============ */
.sarbaz-cfg .sc-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  border: 1px solid var(--sc-line);
  border-radius: 10px;
  overflow: hidden;
}
.sarbaz-cfg .sc-table thead th{
  background: var(--sc-accent);
  color: #fff;
  font-weight: 600;
  padding: 12px 14px;
  text-align: left;
  font-size: 14px;
}
.sarbaz-cfg .sc-table tbody td{
  padding: 11px 14px;
  border-top: 1px solid var(--sc-line);
  vertical-align: top;
}
.sarbaz-cfg .sc-table tbody tr:nth-child(even){ background: #fafcfd; }
.sarbaz-cfg .sc-table td:first-child{ color: var(--sc-ink); width: 60%; }
.sarbaz-cfg .sc-table td:last-child{ color: var(--sc-ink); font-weight: 500; }

/* ============ Адаптив ============ */
@media (max-width: 540px){
  .sarbaz-cfg{ padding: 16px; }
  .sarbaz-cfg .sc-panel{ padding: 18px; }
  .sarbaz-cfg .sc-table{ font-size: 13px; }
  .sarbaz-cfg .sc-table thead th,
  .sarbaz-cfg .sc-table tbody td{ padding: 9px 10px; }
  .sarbaz-cfg .sc-model{ padding: 14px; gap: 12px; }
  .sarbaz-cfg .sc-model img{ width: 60px; height: 60px; }
}