/* ========================================
   КАЛЬКУЛЯТОР ДЛЯ ОЦЕНКИ МЕТАЛЛОВ (AURUM-CALC)
   Основной контейнер и глобальные стили
   ======================================== */

/* Основная обёртка калькулятора */
.aurum-calc {
  background: #111; /* Тёмный фон */
  border-radius: 12px; /* Скруглённые углы */
  padding: 22px; /* Внутренние отступы */
  max-width: 400px; /* Максимальная ширина */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); /* Глубокая тень */
  color: #fff; /* Белый текст */
  font-family: Arial, sans-serif; /* Шрифт без засечек */
  margin: 0 auto; /* Центрирование по горизонтали */
}

/* Заголовок калькулятора */
.aurum-calc__title {
  font-size: 23px; /* Размер шрифта */
  margin-bottom: 20px; /* Отступ снизу */
  font-weight: bold; /* Жирный текст */
  color: #e4b44d; /* Золотистый цвет заголовка */
}


/* ========================================
   ТАБЫ ВЫБОРА МЕТАЛЛА
   ======================================== */

/* Контейнер для кнопок-табов (металлы: золото, серебро и т.д.) */
.aurum-calc__tabs {
  display: flex;
  flex-wrap: wrap; /* Перенос на новую строку при нехватке места */
  gap: 6px; /* Расстояние между кнопками */
  margin-bottom: 15px; /* Отступ снизу */
}

/* Стили для каждой кнопки таба */
.aurum-calc__tabs button {
  flex: 1; /* Равномерное распределение пространства */
  min-width: 80px; /* Минимальная ширина кнопки */
  text-align: center; /* Центрирование текста */
  padding: 10px 5px; /* Вертикальные и горизонтальные отступы */
  height: 42px; /* Фиксированная высота */
  line-height: 1.2; /* Высота строки текста */
  background: #1a1a1a; /* Тёмный фон кнопки */
  border: 1px solid #333; /* Тонкая рамка */
  border-radius: 6px; /* Скруглённые углы */
  cursor: pointer; /* Курсор в виде руки */
  transition: all 0.3s ease; /* Плавные анимации */
  color: #ddd; /* Светло-серый текст */
  font-size: 14px; /* Размер шрифта */
  position: relative; /* Для позиционирования псевдоэлементов */
  overflow: hidden; /* Скрытие эффектов за границами кнопки */
}

/* Активный таб (выбранный металл) */
.aurum-calc__tabs button.active {
  background: linear-gradient(180deg, #e4b44d, #d4a73c); /* Градиент золотого цвета */
  border-color: #d4a73c; /* Подсветка границы */
  color: #000; /* Тёмный текст для контраста */
  font-weight: bold; /* Усиленный шрифт */
}

/* Эффект свечения при активации таба */
.aurum-calc__tabs button.active::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, transparent 70%);
  transform: rotate(25deg);
  animation: blink 3s infinite linear; /* Бесконечная анимация */
}

/* Анимация движения светового блика */
@keyframes blink {
  0% {
    transform: translate(-150%, -150%) rotate(25deg);
  }
  100% {
    transform: translate(150%, 150%) rotate(25deg);
  }
}


/* ========================================
   КНОПКИ ВЫБОРА ПРОБЫ
   ======================================== */

/* Сетка для проб (например, 585, 750 и т.д.) */
.aurum-calc__probes {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 5 колонок одинаковой ширины */
  gap: 8px; /* Расстояние между кнопками */
  margin-bottom: 15px; /* Отступ снизу */
}

/* Каждая кнопка пробы */
.aurum-calc__probe {
  padding: 8px 0; /* Вертикальные отступы */
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 6px;
  cursor: pointer;
  text-align: center;
  transition: all 0.3s ease;
  font-size: 14px;
  color: #ddd;
  position: relative;
  overflow: hidden;
}

/* Активная проба — выделение */
.aurum-calc__probe.active {
  background: linear-gradient(180deg, #e4b44d, #d4a73c);
  border-color: #d4a73c;
  color: #000;
  font-weight: bold;
}

/* Эффект свечения у активной пробы (аналогично табам) */
.aurum-calc__probe.active::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, transparent 70%);
  transform: rotate(25deg);
  animation: blink 3s infinite linear;
}


/* ========================================
   ПОЛЕ ВВОДА ВЕСА
   ======================================== */

/* Поле для ввода веса изделия */
.aurum-calc__weight {
  width: 100%; /* На всю ширину родителя */
  padding: 10px; /* Отступы */
  font-size: 16px !important; /* Размер шрифта (с приоритетом) */
  border: 1px solid #444; /* Темная рамка */
  border-radius: 6px; /* Скругление */
  margin-bottom: 15px; /* Отступ снизу */
  box-sizing: border-box; /* Включает padding в ширину */
  background: #000; /* Чёрный фон */
  color: #fff; /* Белый текст */
}

/* Плейсхолдер (подсказка внутри поля) */
.aurum-calc__weight::placeholder {
  color: #999; /* Серый цвет */
  font-size: 14px; /* Меньший размер */
}


/* ========================================
   ВЫБОР ТИПА КЛИЕНТА (физ/юр лицо)
   ======================================== */

/* Контейнер для радио-кнопок */
.aurum-calc__client {
  display: flex;
  gap: 15px; /* Расстояние между опциями */
  margin-bottom: 20px; /* Отступ снизу */
  font-size: 14px; /* Размер текста */
}

/* Стиль для меток радио-кнопок */
.aurum-calc__client label {
  cursor: pointer; /* Курсор при наведении */
}


/* ========================================
   КНОПКА "РАССЧИТАТЬ"
   ======================================== */

/* Кнопка расчёта */
.aurum-calc__btn {
  width: 100%;
  padding: 12px;
  background: linear-gradient(180deg, #e4b44d, #d4a73c); /* Золотой градиент */
  color: #000; /* Тёмный текст */
  font-size: 16px;
  font-weight: bold;
  border: none; /* Без рамки */
  border-radius: 8px; /* Скруглённые углы */
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden; /* Для эффекта свечения */
}

/* Эффект при наведении */
.aurum-calc__btn:hover {
  background: linear-gradient(180deg, #f0c85c, #d4a73c); /* Светлее при наведении */
}

/* Анимированный блик на кнопке */
.aurum-calc__btn::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0) 80%
  );
  transform: translateX(-100%) rotate(25deg);
  animation: shine 3s infinite; /* Бесконечная анимация */
}

/* Анимация движения блика */
@keyframes shine {
  0% {
    transform: translateX(-100%) rotate(25deg);
  }
  60% {
    transform: translateX(100%) rotate(25deg);
  }
  100% {
    transform: translateX(100%) rotate(25deg);
  }
}


/* ========================================
   ОТОБРАЖЕНИЕ РЕЗУЛЬТАТА
   ======================================== */

/* Блок результата */
.aurum-calc__result {
	display: none; /* по умолчанию скрыт */
    margin-top: 15px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    color: var(--theme-form-text-initial-color, var(--theme-text-color));
    padding: var(--has-classic-forms, var(--theme-form-field-padding, 5px 15px 0px));
    border-width: var(--theme-form-field-border-width, 1px);
    border-style: var(--theme-form-field-border-style, solid);
    border-color: var(--theme-form-field-border-initial-color);
    border-radius: var(--has-classic-forms, var(--theme-form-field-border-radius, 3px));
    background-color: var(--has-classic-forms, var(--theme-form-field-background-initial-color));
}

/* Строка результата (например, "Вы получите:") */
.aurum-calc__result .row {
  display: flex;
  justify-content: space-between; /* Растяжение по краям */
  margin-bottom: 5px; /* Отступ между строками */
}

/* Дополнительная информация (подпись) */
.aurum-calc__result .meta {
  font-size: 13px;
  color: #5f5f5f; /* Серый цвет */
  text-align: center;
}


/* ========================================
   ПРИМЕЧАНИЕ (мелкий текст)
   ======================================== */

/* Общее примечание под калькулятором */
.aurum-calc__note {
  margin-top: 15px;
  font-size: 13px;
  color: #aaa;
  text-align: center;
}

/* Скрываем стандартные radio */
.aurum-calc__client input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  position: relative;
  width: 18px;
  height: 18px;
  border: 2px solid #e4b44d; /* золотая рамка */
  border-radius: 50%;
  outline: none;
  cursor: pointer;
  margin-right: 6px;
  vertical-align: middle;
  background: #111; /* фон в стиле калькулятора */
  transition: all 0.3s ease;
}

/* При наведении — подсветка */
.aurum-calc__client input[type="radio"]:hover {
  box-shadow: 0 0 6px rgba(228,180,77,0.6);
}

/* Включённый radio */
.aurum-calc__client input[type="radio"]:checked {
  background: radial-gradient(circle, #e4b44d 40%, #111 41%);
  border-color: #e4b44d;
}

/* Подписи к radio */
.aurum-calc__client label {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #ddd;
  margin: 0px;
}