/* === Базовые стили === */
.shape-container {
  position: relative;
  width: 100%;
  max-width: 700px;
}

/* === Стили для комбинаций углов === */
.combination-image {
  width: 100%;
  height: auto;
  object-fit: contain;
  transition: opacity 0.3s ease;
}

.combination-image:hover {
  opacity: 0.9;
}

/* Современная адаптивность с Container Queries */
@container (max-width: 768px) {
  .variant .raduisWrapper input {
    width: var(--corner-size-mobile);
    height: var(--corner-size-mobile);
  }
}

@container (max-width: 600px) {
  .variant .raduisWrapper input {
    width: var(--corner-size-small);
    height: var(--corner-size-small);
  }
}

/* Fallback для браузеров без поддержки Container Queries */
@media (max-width: 768px) {
  .combination-image {
    max-width: 100%;
  }
  
  .variant .raduisWrapper input {
    width: var(--corner-size-mobile);
    height: var(--corner-size-mobile);
  }
}

@media (max-width: 600px) {
  .combination-image {
    max-width: 100%;
  }
  
  .variant .raduisWrapper input {
    width: var(--corner-size-small);
    height: var(--corner-size-small);
  }
}

/* Серо-синий фильтр для изображений форм */
/* .shape-container img[alt="Форма"] {
  filter: grayscale(0.3) sepia(0.2) hue-rotate(200deg) saturate(0.8) brightness(0.9);
  transition: filter 0.3s ease;
} */

/* ✅ НОВАЯ ЛОГИКА: 4 разрезанных изображения углов для прямой формы */
.corner-slice {
  position: absolute;
  pointer-events: none;
  z-index: 5;
  width: 50%;
  height: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}

.corner-slice-top-left {
  top: 0;
  left: 0;
}

.corner-slice-top-right {
  top: 0;
  right: 0;
}

.corner-slice-bottom-left {
  bottom: 0;
  left: 0;
}

.corner-slice-bottom-right {
  bottom: 0;
  right: 0;
}

/* Серо-синий фильтр для скруглений углов (старая логика для Г и П форм) */
.ugol {
  position: absolute;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 5;
  /* filter: grayscale(0.3) sepia(0.2) hue-rotate(200deg) saturate(0.8) brightness(0.9);
  transition: filter 0.3s ease; */
}

/* ✅ Позиционирование изображений углов в углы базового изображения */
/* Прямая форма - изображения позиционируются относительно .shape-container */
.shape-container .ugol.u_priamayar0 { 
  position: absolute !important;
  top: 0 !important; 
  left: 0 !important; 
  width: 50% !important;
  height: 50% !important;
  transform: none !important;
  z-index: 1 !important;
  pointer-events: none !important;
  object-fit: cover !important;
  object-position: top left !important;
}
.shape-container .ugol.u_priamayar1 { 
  position: absolute !important;
  top: 0 !important; 
  right: 0 !important; 
  width: 50% !important;
  height: 50% !important;
  transform: none !important;
  z-index: 1 !important;
  pointer-events: none !important;
  object-fit: cover !important;
  object-position: top right !important;
}
.shape-container .ugol.u_priamayar2 { 
  position: absolute !important;
  bottom: 0 !important; 
  right: 0 !important; 
  width: 50% !important;
  height: 50% !important;
  transform: none !important;
  z-index: 1 !important;
  pointer-events: none !important;
  object-fit: cover !important;
  object-position: bottom right !important;
}
.shape-container .ugol.u_priamayar3 { 
  position: absolute !important;
  bottom: 0 !important; 
  left: 0 !important; 
  width: 50% !important;
  height: 50% !important;
  transform: none !important;
  z-index: 1 !important;
  pointer-events: none !important;
  object-fit: cover !important;
  object-position: bottom left !important;
}

/* Старые стили raduisWrapper удалены - используются новые позиции ниже */

/* Устанавливаем контекст позиционирования для .shape-container */
.shape-container {
  position: relative !important;
}

/* G-образная форма */
/* Уменьшаем базовое изображение Г-образной формы */
.variant[data-type=gobraz] > img {
  max-width: 100% !important;
  margin: 0 auto !important;
}

/* Г-образная форма - изображения масштабируются вместе с базовым изображением */
.variant[data-type=gobraz] .ugol.u_gobrazr0 { 
  position: absolute !important;
  top: 0 !important; 
  left: 0 !important;
  width: 50% !important;
  height: 50% !important;
  transform: none !important;
  z-index: 1 !important;
  pointer-events: none !important;
  object-fit: cover !important;
  object-position: top left !important;
}
.variant[data-type=gobraz] .ugol.u_gobrazr1 { 
  position: absolute !important;
  top: 0 !important; 
  right: 0 !important;
  width: 50% !important;
  height: 50% !important;
  transform: none !important;
  z-index: 1 !important;
  pointer-events: none !important;
  object-fit: cover !important;
  object-position: top right !important;
}
.variant[data-type=gobraz] .ugol.u_gobrazr2 { 
  position: absolute !important;
  bottom: 0 !important; 
  left: 0 !important;
  width: 50% !important;
  height: 50% !important;
  transform: none !important;
  z-index: 1 !important;
  pointer-events: none !important;
  object-fit: cover !important;
  object-position: bottom left !important;
}
.variant[data-type=gobraz] .ugol.u_gobrazr3 { 
  position: absolute !important;
  bottom: 0 !important; 
  right: 0 !important;
  width: 50% !important;
  height: 50% !important;
  transform: none !important;
  z-index: 1 !important;
  pointer-events: none !important;
  object-fit: cover !important;
  object-position: bottom right !important;
}

/* П-образная форма */
.variant[data-type=pobraz] .ugol.u_pobrazr0 { 
  position: absolute !important;
  top: 31.5% !important; 
  left: 19.5% !important; 
  transform: none !important;
  z-index: 10 !important;
}
.variant[data-type=pobraz] .ugol.u_pobrazr1 { 
  position: absolute !important;
  top: 31.5% !important; 
  left: 46% !important; 
  transform: none !important;
  z-index: 10 !important;
}
.variant[data-type=pobraz] .ugol.u_pobrazr2 { 
  position: absolute !important;
  top: 70.7% !important; 
  left: 19.5% !important; 
  transform: none !important;
  z-index: 10 !important;
}
.variant[data-type=pobraz] .ugol.u_pobrazr3 { 
  position: absolute !important;
  top: 70.7% !important; 
  left: 41% !important; 
  transform: none !important;
  z-index: 10 !important;
}
.variant[data-type=pobraz] .ugol.u_pobrazr4 { 
  position: absolute !important;
  top: 70.7% !important; 
  left: 63% !important; 
  transform: none !important;
  z-index: 10 !important;
}
.variant[data-type=pobraz] .ugol.u_pobrazr5 { 
  position: absolute !important;
  top: 70.7% !important; 
  left: 86.5% !important; 
  transform: none !important;
  z-index: 10 !important;
}

/* Эффект при наведении */
/* .shape-container:hover img[alt="Форма"] {
  filter: grayscale(0.2) sepia(0.1) hue-rotate(200deg) saturate(0.9) brightness(0.95);
}

.raduisWrapper:hover .ugol {
  filter: grayscale(0.2) sepia(0.1) hue-rotate(200deg) saturate(0.9) brightness(0.95);
} */

.raduisWrapper {
  position: absolute;
  z-index: 5;
  width: 16px;
  height: 16px;
}

.raduisWrapper input[type="checkbox"] {
  position: relative;
  z-index: 10;
}

/* === Перемещение самих чекбоксов отдельно (дефолт) === */
/* === Простое и надежное позиционирование чекбоксов === */
.shape-container {
  position: relative;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}

.shape-container img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

.variant {
  position: relative;
}

.raduisWrapper {
  position: absolute;
  z-index: 10;
  width: 20px;
  height: 20px;
}

.raduisWrapper input {
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: #3b82f6;
}

/* Прямая форма - позиции углов */
.variant[data-type=priamaya] .raduisWrapper.r0 { 
  top: 30%; 
  left: 15%; 
}
.variant[data-type=priamaya] .raduisWrapper.r1 { 
  top: 30%; 
  right: 10%; 
}
.variant[data-type=priamaya] .raduisWrapper.r2 { 
  bottom: 20%; 
  right: 10%; 
}
.variant[data-type=priamaya] .raduisWrapper.r3 { 
  bottom: 20%; 
  left: 15%; 
}

/* Г-образная форма - позиции углов */
.variant[data-type=gobraz] .raduisWrapper.r0 { 
  top: 45%; 
  left: 38%; 
}
.variant[data-type=gobraz] .raduisWrapper.r1 { 
  top: 45%; 
  right: 15%; 
}
.variant[data-type=gobraz] .raduisWrapper.r2 { 
  bottom: 20%; 
  left: 15%; 
}
.variant[data-type=gobraz] .raduisWrapper.r3 { 
  bottom: 20%; 
  left: 35%; 
}

/* П-образная форма - позиции 6 углов */
.variant[data-type=pobraz] .raduisWrapper.r0 { 
  top: 45%; 
  left: 35%; 
}
.variant[data-type=pobraz] .raduisWrapper.r1 { 
  top: 45%; 
  right: 35%; 
}
.variant[data-type=pobraz] .raduisWrapper.r2 { 
  bottom: 20%; 
  left: 15%; 
}
.variant[data-type=pobraz] .raduisWrapper.r3 { 
  bottom: 20%; 
  right: 16%; 
}
.variant[data-type=pobraz] .raduisWrapper.r4 { 
  bottom: 20%; 
  left: 32%; 
}
.variant[data-type=pobraz] .raduisWrapper.r5 { 
  bottom: 20%; 
  right: 33%; 
}

.sizWrapper {
  position: absolute;
  z-index: 8;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
}

.sizWrapper input[type="number"] {
  position: relative;
  z-index: 20;
  -moz-appearance: textfield;
  width: 60px;
  font-size: 12px;
  padding: 4px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.sizWrapper input[type="number"]::-webkit-outer-spin-button,
.sizWrapper input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.size-unit {
  font-size: 12px;
  color: #555;
  white-space: nowrap;
}

.size {
  width: 60px;
  font-size: 12px;
  padding: 4px;
}

/* === Позиционирование чекбоксов углов (десктоп - ОБНОВЛЁННЫЕ) === */
/* Старые стили прямой формы удалены - используются новые позиции выше */

/* Старые стили Г-образной формы удалены - используются новые позиции выше */

/* Старые стили удалены - используются новые позиции выше */

/* === Позиционирование input полей размеров === */
.variant[data-type=priamaya] .sizWrapper.s0 { left: 53%; top: 10%; }
.variant[data-type=priamaya] .sizWrapper.s1 { left: 9%; top: 53%; }

.variant[data-type=gobraz] .sizWrapper.s0 { left: 50%; top: 7%; }
.variant[data-type=gobraz] .sizWrapper.s1 { left: 95%; top: 35%; }
.variant[data-type=gobraz] .sizWrapper.s2 { left: 27%; top: 93%; }
.variant[data-type=gobraz] .sizWrapper.s3 { left: 0%; top: 40%; }

.variant[data-type=pobraz] .sizWrapper.s0 { left: 50%; top: 6%; }
.variant[data-type=pobraz] .sizWrapper.s1 { left: 93%; top: 50%; }
.variant[data-type=pobraz] .sizWrapper.s2 { left: 73%; top: 93%; }
.variant[data-type=pobraz] .sizWrapper.s3 { left: 50%; top: 35%; }
.variant[data-type=pobraz] .sizWrapper.s4 { left: 25%; top: 93%; }
.variant[data-type=pobraz] .sizWrapper.s5 { left: 2%; top: 50%; }

.variant[data-type=fartuk] .sizWrapper.s0 { left: 50%; top: 5%; }
.variant[data-type=fartuk] .sizWrapper.s1 { left: 5%; top: 75%; }

/* === Миниатюры форм (desktop defaults; mobile overrides in calculator.css) === */
.shape-selector-panel button img {
  width: 100%;
  height: 64px;
  object-fit: contain;
  background-color: #fff;
}

/* === Мобильные стили === */
@media (max-width: 600px) {
  .raduisWrapper {
    width: 10px;
    height: 10px;
  }

  .raduisWrapper input[type="checkbox"] {
    transform: scale(0.7);
  }

  .size {
    width: 40px;
    font-size: 10px;
    padding: 2px;
  }

  /* 📱 Прямая */
  /* Старые мобильные стили прямой формы удалены - используются новые позиции выше */

  /* 📱 Адаптивные сдвиги для изображений углов - Прямая форма */
  .shape-container .ugol.u_priamayar0 { 
    top: 0% !important; 
    left: 0% !important; 
    width: 45% !important;
    height: 45% !important;
  }
  .shape-container .ugol.u_priamayar1 { 
    top: 0% !important; 
    right: 0% !important; 
    width: 45% !important;
    height: 45% !important;
  }
  .shape-container .ugol.u_priamayar2 { 
    bottom: 0% !important; 
    right: 0% !important; 
    width: 45% !important;
    height: 45% !important;
  }
  .shape-container .ugol.u_priamayar3 { 
    bottom: 0% !important; 
    left: 0% !important; 
    width: 45% !important;
    height: 45% !important;
  }

  /* Адаптивное позиционирование для мобильных устройств */
  .variant .raduisWrapper {
    position: absolute;
    z-index: 10;
  }

  .variant .raduisWrapper input {
    position: relative;
    z-index: 11;
    transform: translate(-50%, -50%);
  }

  /* Прямая форма - мобильные позиции */
  .variant[data-type=priamaya] .raduisWrapper.r0 { 
    top: 30%; 
    left: 15%; 
  }
  .variant[data-type=priamaya] .raduisWrapper.r1 { 
    top: 30%; 
    right: 10%; 
  }
  .variant[data-type=priamaya] .raduisWrapper.r2 { 
    bottom: 20%; 
    right: 10%; 
  }
  .variant[data-type=priamaya] .raduisWrapper.r3 { 
    bottom: 20%; 
    left: 15%; 
  }

  .variant[data-type=priamaya] .sizWrapper.s0 { left: 53%; top: 7%; }
  .variant[data-type=priamaya] .sizWrapper.s1 { left: 7%; top: 52%; }

  /* 📱 Г-образная */
  /* Старые мобильные стили Г-образной формы удалены - используются новые позиции выше */

  /* 📱 Адаптивные сдвиги для изображений углов - Г-образная форма */
  .variant[data-type=gobraz] .ugol.u_gobrazr0 { 
    top: 0% !important; 
    left: 0% !important; 
    width: 45% !important;
    height: 45% !important;
  }
  .variant[data-type=gobraz] .ugol.u_gobrazr1 { 
    top: 0% !important; 
    right: 0% !important; 
    width: 45% !important;
    height: 45% !important;
  }
  .variant[data-type=gobraz] .ugol.u_gobrazr2 { 
    bottom: 0% !important; 
    left: 0% !important; 
    width: 45% !important;
    height: 45% !important;
  }
  .variant[data-type=gobraz] .ugol.u_gobrazr3 { 
    bottom: 0% !important; 
    right: 0% !important; 
    width: 45% !important;
    height: 45% !important;
  }

  /* Г-образная форма - мобильные позиции удалены - используются основные стили */

  .variant[data-type=gobraz] .sizWrapper.s0 { left: 48%; top: 5%; }
  .variant[data-type=gobraz] .sizWrapper.s1 { left: 93%; top: 33%; }
  .variant[data-type=gobraz] .sizWrapper.s2 { left: 25%; top: 91%; }
  .variant[data-type=gobraz] .sizWrapper.s3 { left: 0%; top: 40%; }

  /* 📱 П-образная */
  /* Старые мобильные стили удалены - используются новые позиции выше */

  /* П-образная форма - мобильные позиции */
  .variant[data-type=pobraz] .raduisWrapper.r0 { 
    top: 45%; 
    left: 35%; 
  }
  .variant[data-type=pobraz] .raduisWrapper.r1 { 
    top: 45%; 
    right: 35%; 
  }
  .variant[data-type=pobraz] .raduisWrapper.r2 { 
    bottom: 20%; 
    left: 15%; 
  }
  .variant[data-type=pobraz] .raduisWrapper.r3 { 
    bottom: 20%; 
    right: 16%; 
  }
  .variant[data-type=pobraz] .raduisWrapper.r4 { 
    bottom: 20%; 
    left: 32%; 
  }
  .variant[data-type=pobraz] .raduisWrapper.r5 { 
    bottom: 20%; 
    right: 33%; 
  }

  .variant[data-type=pobraz] .sizWrapper.s0 { left: 48%; top: 4%; }
  .variant[data-type=pobraz] .sizWrapper.s1 { left: 91%; top: 49%; }
  .variant[data-type=pobraz] .sizWrapper.s2 { left: 72%; top: 92%; }
  .variant[data-type=pobraz] .sizWrapper.s3 { left: 50%; top: 34%; }
  .variant[data-type=pobraz] .sizWrapper.s4 { left: 24%; top: 92%; }
  .variant[data-type=pobraz] .sizWrapper.s5 { left: 2%; top: 48%; }

  /* 📱 Радиальная */
  .variant[data-type=fartuk] .sizWrapper.s0 { left: 48%; top: 3%; }
  .variant[data-type=fartuk] .sizWrapper.s1 { left: 3%; top: 73%; }
}