/* Сброс */
body {
  padding: 0 !important;
  margin: 0 !important;
}

/* Разрешаем переполнение у родителей конфигуратора для корректной работы position: sticky */
.bregvald-configurator-wrapper,
.bregvald-configurator-wrapper .row,
.entry-content,
.content-area,
.site-content {
  overflow: visible !important;
}

.nav-top-link i.icon-angle-down {
    display: none;
}

.flickity-prev-next-button {
  display: none !important;
}

/* Общий контейнер конфигуратора */
.bregvald-configurator-wrapper {
  box-sizing: border-box !important;
  background: transparent !important;
  color: #ffffff !important;
  font-family: Jost, sans-serif !important;
  color-scheme: dark !important;
}

.bregvald-configurator-wrapper .row {
  align-items: flex-start !important;
}

.bregvald-configurator-wrapper * {
  box-sizing: border-box !important;
}

/* Заголовки и тексты */
.bregvald-configurator-wrapper h2,
.bregvald-configurator-wrapper h3,
.bregvald-configurator-wrapper h4,
.bregvald-configurator-wrapper label,
.bregvald-configurator-wrapper span,
.bregvald-configurator-wrapper .group-title,
.bregvald-configurator-wrapper .door-row-title,
.bregvald-configurator-wrapper .door-field-label {
  color: #e2e8f0 !important;
}

.bregvald-configurator-wrapper .input-hint,
.bregvald-configurator-wrapper .track-card-desc {
  color: #94a3b8 !important;
}

/* Колоночная структура */
.bregvald-configurator-wrapper .visual-section,
.bregvald-configurator-wrapper .controls-section {
  min-width: 300px !important;
}

/* ЛЕВАЯ КОЛОНКА: Липкий визуализатор */
.bregvald-configurator-wrapper .visual-section {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 100px !important;
  height: fit-content !important;
  align-self: flex-start !important;
  z-index: 10 !important;
}

/* На широких экранах (от 1440px) тема добавляет внутренний отступ */
@media (min-width: 1440px) {
  .bregvald-configurator-wrapper .visual-section,
  .bregvald-configurator-wrapper .controls-section {
    padding: 0 40px !important;
    padding-bottom: 0px !important;
    margin-bottom: 60px !important;
  }
}

/* Поля ввода, селекты */
.bregvald-configurator-wrapper select, 
.bregvald-configurator-wrapper input[type="number"], 
.bregvald-configurator-wrapper input[type="text"], 
.bregvald-configurator-wrapper input[type="email"], 
.bregvald-configurator-wrapper textarea {
  width: 100% !important;
  padding: 12px 14px !important;
  background-color: #333333 !important;
  color: #ffffff !important;
  border: 1px solid #777777 !important;
  border-radius: 0px !important;
  font-size: 14px !important;
  font-family: Jost, sans-serif !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Chrome-фикс для select */
.bregvald-configurator-wrapper select {
  color-scheme: dark !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  height: auto !important;
  min-height: 48px !important;
  line-height: 1.4 !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 14px !important;
  padding: 12px 40px 12px 14px !important;
}

/* Скрываем оригинальный селект profileColor — он остаётся для логики */
#profileColor { display: none !important; }

.bregvald-configurator-wrapper select:disabled,
.bregvald-configurator-wrapper select option:disabled {
  -webkit-text-fill-color: #ffffff !important;
  color: #ffffff !important;
  opacity: 1 !important;
}

.bregvald-configurator-wrapper select:focus, 
.bregvald-configurator-wrapper input:focus, 
.bregvald-configurator-wrapper textarea:focus {
  border-color: #ffffff !important;
  outline: none !important;
  box-shadow: none !important;
}

.bregvald-configurator-wrapper select option {
  background-color: #333333 !important;
  color: #ffffff !important;
}

.bregvald-configurator-wrapper textarea {
  resize: vertical !important;
  min-height: 100px !important;
}

.bregvald-configurator-wrapper input.error {
  border-color: #ef4444 !important;
  background-color: #450a0a !important;
}

/* ФОН КОМНАТЫ: Всегда видна в правильном размере */
.room-scene-wrapper {
  position: relative !important;
  background-image: url('https://bregvald.ee/transa/imgs/background.webp') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  padding: 50px 40px !important;
  border: 1px solid #777777 !important;
  border-radius: 0px !important;
  box-sizing: border-box !important;
}

/* КАРКАС ПРОЕМА: Управляется через JS (.show / .hide) */
.door-frame {
  position: relative !important;

 /*  border: 1px solid #777777 !important;
*/
  border-radius: 0px !important;
  height: 380px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  overflow: hidden !important;
}

/* Шины */
.track-visual {
  height: 18px !important;
  width: 100% !important;
  border-radius: 0px !important;
}

.top-track {
  margin-bottom: 0px !important;
}

.bottom-track {
  margin-top: 0px !important;
  position: relative !important;
  height: 12px !important;
}

/* Обертка для створок */
.doors-wrapper {
  display: flex !important;
  height: 100% !important;
  width: 100% !important;
  padding: 1px !important;
  gap: 0px !important; /*если нужно будет добавить расстояние между дверьми */
}

/* Лист двери */
.door-leaf {
  border-radius: 0px !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 11px !important;
  font-weight: bold !important;
  text-align: center !important;
  padding: 0px !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  position: relative !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.door-leaf.fill-melamine { 
  /* background-color: #3d4451 !important; */
  background-image: none !important; 
  color: #ffffff !important; 
}
.door-leaf.fill-mirror { 
  background-image: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 35%, #bae6fd 70%, #93c5fd 100%) !important; 
  color: #0369a1 !important; 
}
.door-leaf.fill-mirror-bronze { 
  background-image: linear-gradient(135deg, #e7d59f 0%, #d4b55c 30%, #b45309 70%, #78350f 100%) !important; 
  color: #fde68a !important; 
}
.door-leaf.fill-mirror-custom { 
  background-image: linear-gradient(135deg, #f1f5f9 0%, #cbd5e1 40%, #64748b 80%, #334155 100%) !important; 
  color: #334155 !important; 
}

/* Маркеры */
.softclose-marker {
  position: absolute !important;
  top: 2px !important;
  height: 12px !important;
  background: #10b981 !important;
  z-index: 10 !important;
}
.softclose-marker.center-type { background: #8b5cf6 !important; }
.softclose-marker.double-combo { background: #f59e0b !important; }

.stopper-marker {
  position: absolute !important;
  bottom: 0 !important;
  top: auto !important;
  width: 6px !important;
  height: 5px !important;
  background: #10b981 !important;
  z-index: 5 !important;
}
.stopper-left-1 { left: 5px !important; }
.stopper-left-2 { left: 15px !important; }
.stopper-right-1 { right: 5px !important; }
.stopper-right-2 { right: 15px !important; }

/* Карточки выбора шины */
.track-cards-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}

.track-card {
  border: 1px solid #777777 !important;
  border-radius: 0px !important;
  padding: 12px !important;
  cursor: pointer !important;
  background: #333333 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  user-select: none !important;
}

.track-card.active {
  border-color: #ffffff !important;
  background: #3d4451 !important;
}

.track-card input[type="radio"] {
  cursor: pointer !important;
}

.track-card-title {
  font-weight: 600 !important;
  font-size: 13px !important;
  color: #ffffff !important;
}

/* Блоки настроек дверей */
.control-group {
  margin-bottom: 16px !important;
}

.dimensions-box {
  background: #333333 !important;
  padding: 12px !important;
  border-radius: 0px !important;
  border: 1px solid #777777 !important;
}

#doorsConfigList {
  background: #333333 !important;
  padding: 12px !important;
  border-radius: 0px !important;
  border: 1px solid #777777 !important;
  max-height: 450px !important;
  overflow-y: auto !important;
}

.door-row {
  background: #333333 !important;
  padding: 10px !important;
  border: 1px solid #777777 !important;
  border-radius: 0px !important;
  margin-bottom: 10px !important;
}

.melamine-colors-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-top: 6px !important;
}

.melamine-color-item {
  width: 28px !important;
  height: 28px !important;
  border-radius: 0px !important;
  border: 2px solid #777777 !important;
  cursor: pointer !important;
  position: relative !important;
  background-size: cover !important;
  background-position: center !important;
}

.melamine-color-item.square-item {
  width: 34px !important;
  height: 34px !important;
}

.melamine-color-item:hover {
  border-color: #d8232b !important;
  transform: scale(1.1) !important;
}

/* Активное состояние элемента */
.melamine-color-item.active {
  border-color: #d8232b !important;
  box-shadow: 0 0 0 2px rgba(216, 35, 43, 0.4) !important;
  transform: scale(1.1) !important;
}

.decor-group-title {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #94a3b8 !important;
  margin: 8px 0 4px 0 !important;
  text-transform: uppercase !important;
  border-top: 1px solid #777777 !important;
  padding-top: 6px !important;
  width: 100% !important;
}

/* Unified icon size + shared styles for room-bg-item and profile-color-item */
:root {
  --cfg-icon-size: 64px;   /* основная иконка */
  --cfg-icon-radius: 6px;
  --cfg-icon-border: 2px;
  --cfg-icon-gap: 10px;
}

/* Responsive adjustments */
@media (max-width: 480px) {
  :root { --cfg-icon-size: 48px; --cfg-icon-gap: 8px; }
}

/* Контейнеры */
.room-bg-grid,
.profile-color-grid {
  display: flex;
  gap: var(--cfg-icon-gap);
  flex-wrap: wrap;
  align-items: flex-start;
}

/* Общие правила для миниатюр (фон и профиль) */
.room-bg-item,
.profile-color-item {
  width: var(--cfg-icon-size);
  height: var(--cfg-icon-size);
  min-width: var(--cfg-icon-size);
  min-height: var(--cfg-icon-size);
  border: var(--cfg-icon-border) solid #777777;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: var(--cfg-icon-radius);
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-sizing: border-box;
  user-select: none;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease, opacity .12s ease;
  overflow: hidden;
}

/* Hover / active */
.room-bg-item:hover,
.profile-color-item:hover {
  transform: translateY(-2px) scale(1.02);
  border-color: #ffffff;
  box-shadow: 0 6px 14px rgba(0,0,0,0.45);
}

.room-bg-item.active,
.profile-color-item.active {
  border-color: #d8232b !important;
  box-shadow: 0 8px 22px rgba(216,35,43,0.16) ;
  transform: scale(1.06);
}

/* Фокус для клавиатуры */
.room-bg-item:focus,
.profile-color-item:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(216,35,43,0.16);
}

/* Если у миниатюры нет изображения, показать нейтральный фон */
.room-bg-item[style*="background-image: none"],
.profile-color-item[style*="background-image: none"] {
  background: linear-gradient(135deg,#4b4b4b 0%,#6b6b6b 100%);
}

/* --- Название профиля/цвета теперь ПОД превью, а не поверх картинки --- */

/* Обёртка: превью сверху, подпись снизу — единый блок, жёстко привязанный к иконке */
.profile-color-item-wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 2px !important;
  width: var(--cfg-icon-size) !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Сама кнопка-превью — без текста внутри, без встроенных отступов кнопки */
.profile-color-item-wrap .profile-color-item {
  width: var(--cfg-icon-size);
  height: var(--cfg-icon-size);
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}

/* Подпись под превью — по центру относительно иконки, тем же шрифтом что и весь сайт */
.profile-color-name-label {
  display: block !important;
  width: 100% !important;
  max-width: var(--cfg-icon-size);
  margin: 0 !important;
  padding: 0 !important;
  font-family: Jost, sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
  color: #e2e8f0 !important;
  text-align: center !important;
  white-space: normal !important;
  word-break: break-word !important;
}

/* Мобильные — чуть меньше шрифт */
@media (max-width: 480px) {
  .profile-color-name-label { font-size: 10px !important; }
}

/* Блок цены */
.price-summary-box {
  background: #333333 !important;
  border: 1px solid #777777 !important;
  border-radius: 0px !important;
  padding: 16px !important;
}

/* Кнопка отправки */
#btnSubmit {
  width: 100% !important;
  padding: 14px !important;
  background-color: #d93838 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 0px !important;
  font-size: 15px !important;
  font-weight: bold !important;
  font-family: Jost, sans-serif !important;
  cursor: pointer !important;
  text-transform: none !important;
  transition: background 0.2s ease !important;
}

#btnSubmit:hover {
  background-color: #c22e2e !important;
}

/* Кнопка показа/скрытия картинки профиля */
.profile-toggle-btn {
  background: #333333 !important;
  color: #e2e8f0 !important;
  border: 1px solid #777777 !important;
  border-radius: 0px !important;
  padding: 10px 14px !important;
  width: 100% !important;
  text-align: left !important;
  cursor: pointer !important;
  font-family: Jost, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  margin-top: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  transition: background 0.2s ease !important;
}

.profile-toggle-btn:hover {
  background: #3d4451 !important;
  border-color: #ffffff !important;
}

.profile-toggle-btn .toggle-icon {
  font-size: 16px !important;
  font-weight: bold !important;
  transition: transform 0.2s ease !important;
}

.profile-toggle-btn.active .toggle-icon {
  transform: rotate(45deg);
}

/* Выпадающий контейнер с картинкой в правой колонке */
.profile-image-container-right {
  background: #333333 !important;
  padding: 12px !important;
  border: 1px solid #777777 !important;
  border-top: none !important;
  border-radius: 0px !important;
  text-align: center !important;
}

.profile-image-container-right img {
  max-height: 130px !important;
  width: auto !important;
  display: inline-block !important;
}

/* --- Адаптивность для планшетов и мобильных устройств --- */
@media (max-width: 991px) {
  /* Выстраиваем колонки вертикально друг под другом */
  .bregvald-configurator-wrapper .row {
    display: flex !important;
    flex-direction: column !important;
  }

  /* Растягиваем блоки на всю ширину экрана */
  .bregvald-configurator-wrapper .visual-section,
  .bregvald-configurator-wrapper .controls-section {
    min-width: 100% !important;
    width: 100% !important;
  }


  /* Делаем визуальную часть стационарной (не липкой) */
  .bregvald-configurator-wrapper .visual-section {
    position: static !important;
    margin-bottom: 30px !important;
    z-index: 1 !important;
  }
}