/* Переключатель типа цен */
.sc-price-type-selector {
  margin-bottom: 20px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.sc-price-type-selector h3 {
  margin: 0 0 15px 0;
  font-size: 18px;
  color: #333;
  font-weight: 500;
}

.sc-price-type-options {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.sc-price-type-option {
  flex: 1;
  min-width: 120px;
  padding: 12px 16px;
  border: 2px solid #e9ecef;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  font-weight: 500;
  background: white;
}

.sc-price-type-option input[type="radio"] {
  display: none;
}

.sc-price-type-option span {
  font-size: 16px;
  color: #495057;
}

.sc-price-type-option:hover {
  border-color: #0071e3;
  background: #f8f9ff;
}

.sc-price-type-option.active {
  border-color: #0071e3;
  background: #e7f3ff;
  color: #0071e3;
}

.sc-price-type-option.active span {
  color: #0071e3;
  font-weight: 600;
}

/* Стиль для отображения стоимости неисправности */
.issue-price {
  font-size: 12px;
  font-weight: 400;
  background-color: #ffc600;
  color: #000;
  border-radius: 5px;
  padding: 2px 6px;
  margin-left: auto; /* Прижимаем вправо */
  display: inline-block;
  text-wrap-mode: nowrap;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
/* Фиксированная панель навигации */
  #fixed-nav-panel {
  position: fixed;
  bottom: 55px;
  left: 0;
  right: 0;
  padding: 15px;
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px) saturate(1.5);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 100;
  display: flex;
  justify-content: center;
  gap: 10px;
  }
}
.fixed-nav-btn {
  min-width: 100px;
}
/* Скрываем стандартные радиокнопки */
.sc-radio-item input[type="radio"] {
  display: none;
}

/* Скрываем стандартные чекбоксы */
.sc-checkbox-item input[type="checkbox"] {
  display: none;
}

/* Toggle Switch как отдельный элемент */
.sc-toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  margin-left: auto; /* Прижимаем к правому краю */
  cursor: pointer;
}

.sc-toggle-switch input[type="checkbox"] {
  opacity: 0;
  width: 0;
  height: 0;
}

.sc-toggle-switch::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 44px;
  height: 24px;
  background-color: #e0e0e0;
  border-radius: 12px;
  transition: background-color 0.3s ease;
}

.sc-toggle-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Состояние включен */
input[type="checkbox"]:checked + .sc-toggle-switch::before {
  background-color: #34c759;
}

input[type="checkbox"]:checked + .sc-toggle-switch::after {
  transform: translateX(20px);
}

/* Анимация при наведении */
.sc-toggle-switch:hover::after {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Сбрасываем отступы для всех чекбоксов и радиокнопок */
input[type=checkbox], input[type=radio] {
  margin: 0px!important;
}

#step-configurator-app {
  max-width: 700px;
  margin: 20px auto;
  font-family: 'Apple71', Arial, sans-serif;
  background-color: #fcfcfc;
  border-radius: 10px;
  box-shadow: 0 3px 45px rgb(0 0 0 / 15%);
  position: relative;
}

/* Глобальные стили для элементов форм */
label {
  font-weight: 500!important;
}

/* Блок над прогресс-баром */
.sc-header-block {
  padding: 40px 30px 30px 30px;
  border-radius: 10px 10px 0 0;
  background-image: url('https://ap71.tw1.ru/wp-content/uploads/2024/10/Service-blue4.jpg');
  background-size: cover;
  background-position: bottom;
  color: white;
  display: flex;
  align-items: flex-start;
  position: relative;
}

.sc-header-block::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* background: linear-gradient(180deg, #a9cce8 0%, rgba(0, 0, 0, 0) 100%); */
  border-radius: 10px 10px 0 0;
}

.sc-emoji-container {
  width: 50px;
  height: 50px;
  min-width: 50px;
  background: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  position: relative;
  z-index: 2;
  overflow: hidden;
}

.sc-emoji-container img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.sc-header-text {
  flex-grow: 1;
  position: relative;
  z-index: 2;
}

.sc-header-text h2 {
  margin: 0 0 8px 0;
  font-size: 28px;
  font-weight: 500;
  color: #1657aa;
  text-shadow: 0 3px 45px rgb(255 255 255);
}

.sc-header-text p {
  margin: 0;
  font-size: 15.3px;
  font-weight: 400;
  line-height: 1.5;
  color: #1657aa;
  text-shadow: 0 3px 45px rgb(255 255 255);
}

/* Улучшенный прогресс-бар */
#sc-progressbar {
  position: relative;
  height: 6px;
  background: #e0e0e0;
  overflow: hidden;
}

#sc-progress-indicator {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: #0071e3;
  transition: width 0.4s ease;
}

/* Шаги */
.sc-step {
  margin-bottom: 30px;
  padding: 20px;
}

.sc-step h1 {
  margin-top: 0;
  color: #333;
  font-size: 24px;
  margin-bottom: 20px;
  padding-bottom: 10px;
  font-family: 'Apple71', Arial, sans-serif;
}

/* Кнопки */
.sc-prev-btn, .sc-next-btn, #sc-submit-btn {
  margin-top: 15px;
  margin-right: 10px;
  padding: 10px 20px;
  cursor: pointer;
  border: none;
  border-radius: 4px;
  font-weight: 400;
  transition: all 0.3s;
  font-family: 'Apple71', Arial, sans-serif;
  margin-top: 0; /* Обнуляем margin-top, так как он будет в флекс контейнере */
}

/* Контейнер для кнопок */
.sc-buttons-container {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 15px;
}

/* Контейнеры для кнопок "Показать еще" */
#load-more-step1-container,
#load-more-step2-container,
#load-more-step3-container {
  display: inline-block;
}

.sc-prev-btn {
  background: #f0f0f0;
  color: #555;
}

.sc-next-btn, #sc-submit-btn {
  background: #0071e3;
  color: white;
}

.sc-prev-btn:hover {
  background: #e0e0e0;
}

.sc-next-btn:hover, #sc-submit-btn:hover {
  background: #0060c7;
}

.sc-next-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
}

/* Таблица стоимости */
#cost-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 15px;
  font-family: 'Apple71', Arial, sans-serif;
  table-layout: fixed;
}

#cost-table th, #cost-table td {
  text-align: left;
}

/* Ширина колонок в таблице стоимости */
#cost-table th:nth-child(1) { width: 40%; } /* Услуга */
#cost-table th:nth-child(2) { width: 20%; } /* Стоимость */
#cost-table th:nth-child(3) { width: 20%; } /* Время ремонта */
#cost-table th:nth-child(4) { width: 20%; } /* Гарантия */

#cost-table th {
  background: #f5f5f5;
  font-weight: 500;
  line-height: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 10px;
  font-size: 15px;
}

#cost-table td {
  border-right: 1px solid #f5f5f5;
  padding: 10px;
  text-align: left;
  line-height: 20px;
  border-radius: 10%;
  font-weight: 400;
  font-size: 15px;
}

#cost-table tr:nth-child(even) {
  background-color: #f9f9f9;
}

/* Стиль для поля "Итого" и его значения */
strong, #total-sum {
  font-weight: 600 !important;
  font-size: 17px;
}

/* Стиль для "₽" */
.currency {
  font-weight: 600;
}

/* Кнопка "Показать еще" */
.sc-load-more-btn {
  background: #0071e3;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 10px 20px;
  cursor: pointer;
  font-weight: 400;
  transition: all 0.3s;
  font-family: 'Apple71', Arial, sans-serif;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 120px;
  justify-content: center;
}

.sc-load-more-btn:hover {
  background: #0060c7;
}

.sc-load-more-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
}

/* Прелоадер в кнопке "Показать еще" */
.sc-load-more-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Радио- и чекбокс-элементы */
.sc-radio-item, .sc-checkbox-item {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  padding: 10px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  flex-wrap: nowrap; /* Без переноса */
}

.sc-radio-item:hover, .sc-checkbox-item:hover,
.sc-radio-item.active,
.sc-checkbox-item.active,
.sc-radio-item input[type="radio"]:checked ~ .sc-radio-label,
.sc-checkbox-item input[type="checkbox"]:checked ~ .sc-checkbox-label {
  border-color: #0071e3;
}

/* Стилизация для родительского .sc-radio-item, содержащего выбранный input */
.sc-radio-item:has(input[type="radio"]:checked),
.sc-checkbox-item:has(input[type="checkbox"]:checked) {
  background: #f5fff7;
  border: 1px solid #34c759;
}

.sc-radio-label, .sc-checkbox-label {
  margin-left: 8px;
  font-size: 16px;
  flex-grow: 1;
  font-weight: 500;
  font-family: 'Apple71', Arial, sans-serif;
}

span.sc-checkbox-label {
  line-height: 19px;
  max-width: 380px;
  display: flex;
  align-items: center;
}

.sc-radio-item::after {
  content: '';
  position: absolute;
  right: 15px;
  width: 8px;
  height: 12px;
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.5166 6.00684C7.5166 6.15072 7.48893 6.28353 7.43359 6.40527C7.37826 6.52702 7.29248 6.646 7.17627 6.76221L2.2041 11.6846C2.02148 11.8672 1.80013 11.9585 1.54004 11.9585C1.26888 11.9585 1.03923 11.8672 0.851074 11.6846C0.662923 11.4964 0.568848 11.2695 0.568848 11.0039C0.568848 10.7383 0.671224 10.5031 0.875977 10.2983L5.23389 6.00684L0.875977 1.71533C0.671224 1.51058 0.568848 1.27539 0.568848 1.00977C0.568848 0.744141 0.662923 0.52002 0.851074 0.337402C1.03923 0.149251 1.26888 0.0551758 1.54004 0.0551758C1.80013 0.0551758 2.02148 0.146484 2.2041 0.329102L7.17627 5.25146C7.40316 5.46729 7.5166 5.71908 7.5166 6.00684Z" fill="%238E8E93"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.2s, filter 0.2s;
}

.sc-radio-item:hover::after {
  transform: translateX(5px);
  filter: invert(44%) sepia(64%) saturate(2263%) hue-rotate(212deg) brightness(92%) contrast(91%);
}

/* Кнопка подсказки */
.sc-issue-help {
  background: #0071e3;
  color: #ffffff;
  border: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin-right: 5px;
  cursor: pointer;
  font-weight: 400;
  font-size: 15px;
  transition: all 0.2s;
  vertical-align: middle;
  text-align: center;
  flex-shrink: 0; /* Предотвращаем сжатие */
}

.sc-issue-help:hover {
  background: #0060c7;
  color: white;
}



/* Модальное окно */
#sc-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.sc-modal-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  max-width: 500px;
  width: 90%;
  position: relative;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

.sc-modal-close {
  position: absolute;
  bottom: -50px;
  right: 0;
  font-size: 34px;
  cursor: pointer;
  color: #999;
  background: #fff;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sc-modal-close:hover {
  color: #333;
}

#sc-modal p {
  font-family: 'Apple71', Arial, sans-serif;
  font-weight: 400;
  hyphens: auto;
}

/* Финальный шаг */
#sc-final-step {
  text-align: center;
  margin-top: 20px;
  padding: 30px;
  background: #f9f9f9;
  border-radius: 8px;
  border: 2px solid #55ce63;
  font-family: 'Apple71', Arial, sans-serif;
}

#sc-final-step h2 {
  color: #47b354;
  margin-top: 0;
  font-family: 'Apple71', Arial, sans-serif;
}

/* Поля ввода на шаге контактов */
#user-name, #user-phone {
  width: 100%;
  max-width: 300px; /* Одинаковая длина для обоих полей */
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
  font-family: 'Apple71', Arial, sans-serif;
  transition: all 0.3s ease;
}

/* Стиль при наведении */
#user-name:hover, #user-phone:hover {
  border: 1px solid #ffc600;
}

/* Стиль для валидных полей */
.valid-field {
  border: 1px solid #0DBB0D !important;
}

/* Стиль для невалидных полей */
.invalid-field {
  border: 1px solid #FF5252 !important;
}

/* Стиль для сообщения об ошибке */
.error-message {
  color: #FF5252;
  font-size: 12px;
  margin-top: -10px;
  margin-bottom: 10px;
}

/* Индикатор загрузки */
.sc-loading {
  text-align: center;
  padding: 15px;
  font-style: italic;
  color: #666;
  position: relative;
}

.sc-loading::after {
  content: '';
  position: absolute;
  width: 30px;
  height: 30px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #0DBB0D;
  border-radius: 50%;
  margin-left: 15px;
  vertical-align: middle;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Прелоадер для шорткода */
.sc-page-loading {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  z-index: 100;
  border-radius: 10px;
}

.sc-page-loading::after {
  content: '';
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #0DBB0D;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
  .sc-step h1 {
    font-size: 20px;
  }

  #cost-table th, #cost-table td {
    padding: 6px;
    font-size: 14px;
  }
}

/* Новые стили для карточек стоимости */
#cost-cards-container {
  margin-bottom: 30px;
}

.sc-cost-card {
  margin-bottom: 25px;
  border-radius: 8px;
  position: relative;
}

.sc-cost-card:not(:last-child)::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0;
  right: 0;
  height: 1px;
  background: #d6d6d6;
}

/* Линия сверху для первого блока на шаге стоимости */
.sc-step[data-step="4"] .sc-cost-card:first-child::before {
  content: '';
  position: absolute;
  top: -15px;
  left: 0;
  right: 0;
  height: 1px;
  background: #d6d6d6;
}

/* Линия снизу для последнего блока на шаге стоимости */
.sc-step[data-step="4"] .sc-cost-card:last-child::after {
  content: '';
  position: absolute;
  bottom: -15px;
  left: 0;
  right: 0;
  height: 1px;
  background: #d6d6d6;
}

.sc-cost-card-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  gap: 10px;
}

.sc-cost-card-title {
  font-family: "Apple71", Arial, sans-serif;
  font-size: 17px;
  font-weight: 500;
  color: #000;
  margin: 0;
  flex-grow: 1; /* Заголовок занимает максимальное пространство */
}

/* Кнопка удаления неисправности */
.sc-cost-card-remove-btn {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: none;
  color: #000;
  font-family: "Apple71", Arial, sans-serif;
  font-size: 26px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto; /* Прижимаем к правому краю */
  flex-shrink: 0;
  transition: all 0.2s ease;
  line-height: 1;
}

.sc-cost-card-remove-btn:hover {
  background: #d70015;
  border-radius: 50%;
  transform: scale(1.1);
}

.sc-cost-info-btn {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #0183ff;
  color: white;
  border: none;
  font-family: "Apple71", Arial, sans-serif;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sc-cost-info-btn:hover {
  background: #0066cc;
}

.sc-cost-options {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.sc-cost-option {
  flex: 1;
  position: relative;
}

.sc-cost-option-simple {
  flex: 1;
  position: relative;
  max-width: 260px;
}

.sc-cost-option-radio {
  display: none;
}

.sc-cost-option-label {
  display: block;
  padding: 10px 15px;
  border: 1px solid #f0f0f0;
  border-radius: 5px;
  background: #f0f0f0;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.sc-cost-option-simple .sc-cost-option-label {
  display: block;
  padding: 10px 15px;
  border: 1px solid #f0f0f0;
  border-radius: 5px;
  background: #f0f0f0;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.sc-cost-option-label.active {
  background: #ffdd2d;
  border-color: #ffdd2d;
}

.sc-cost-option-simple .sc-cost-option-label.active {
  background: #ffdd2d;
  border-color: #ffdd2d;
}

.sc-cost-option-type {
  font-family: "Apple71", Arial, sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #555;
  margin-bottom: 2px;
  line-height: 20px;
}

.sc-cost-option-label.active .sc-cost-option-type {
  color: #000;
}

.sc-cost-option-simple .sc-cost-option-label.active .sc-cost-option-type {
  color: #000;
}

.sc-cost-option-price {
  font-family: "Apple71", Arial, sans-serif;
  font-size: 15px;
  color: #555;
  line-height: 20px;
  font-weight: 400;
}

.sc-cost-option-label.active .sc-cost-option-price {
  color: #000;
}

.sc-cost-option-simple .sc-cost-option-label.active .sc-cost-option-price {
  color: #000;
}

.sc-cost-option-radio-indicator {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: white;
  border: 1px solid #ccc;
}

.sc-cost-option-simple .sc-cost-option-radio-indicator {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: white;
  border: 1px solid #ccc;
}

.sc-cost-option-radio-indicator::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #000;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.sc-cost-option-simple .sc-cost-option-radio-indicator::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #000;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.sc-cost-option-radio:checked + .sc-cost-option-label .sc-cost-option-radio-indicator::after {
  opacity: 1;
}

.sc-cost-option-radio:checked + .sc-cost-option-label .sc-cost-option-radio-indicator::after {
  opacity: 1;
}

.sc-cost-option-simple .sc-cost-option-radio:checked + .sc-cost-option-label .sc-cost-option-radio-indicator::after {
  opacity: 1;
}

.sc-cost-option-content {
  margin-left: 25px;
}

.sc-cost-option-content {
  margin-left: 25px;
}

.sc-cost-option-simple .sc-cost-option-content {
  margin-left: 25px;
}

/* Кнопка подсказки для опций выбора запчастей */
.sc-cost-option-info-btn {
  position: absolute;
  top: 18px;
  right: 12px;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  border: none;
  background: white;
  color: #000;
  font-family: "Apple71", Arial, sans-serif;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 3px 45px rgb(0 0 0 / 15%);
}

.sc-cost-option-simple .sc-cost-option-info-btn {
  position: absolute;
  top: 18px;
  right: 12px;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  border: none;
  background: white;
  color: #000;
  font-family: "Apple71", Arial, sans-serif;
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  text-align: center;
  flex-shrink: 0;
  transition: all 0.2s;
}

.sc-cost-option-info-btn:hover {
  background: #f5f5f5;
}

.sc-cost-option-info-btn:hover {
  background: #f5f5f5;
}

.sc-cost-option-simple .sc-cost-option-info-btn:hover {
  background: #f5f5f5;
}

.sc-cost-card-details {
  font-family: "Apple71", Arial, sans-serif;
  font-size: 15px;
  color: #000;
  line-height: 1.4;
  padding-bottom: 1px;
}

.sc-cost-card-details p {
  margin: 5px 0;
}

.sc-cost-card-warranty-link {
  color: #0183ff;
  text-decoration: none;
  cursor: pointer;
}

.sc-cost-card-warranty-link:hover {
  text-decoration: underline;
}