/**
 * calculator-mobile.css - Адаптация калькулятора для мобильных устройств
 */

/* Для планшетов и маленьких экранов */
@media (max-width: 768px) {
  .calculator {
    padding: 1.5em !important;
    margin: 1.5em 0 !important;
  }
  
  /* Уменьшаем заголовок на 20% */
  .calculator > div:first-child span {
    font-size: 1.12em !important; /* 1.4em * 0.8 = 1.12em */
    padding-bottom: 0.4em !important;
  }
  
  .calculator > div:first-child p {
    font-size: 12px !important;
    margin-top: 0.8em !important;
  }
  
  /* Уменьшаем расстояние между блоками */
  .calculator > div:nth-child(2) {
    gap: 15px !important;
  }
  
  /* Уменьшаем отступы у левой колонки */
  .calculator > div:nth-child(2) > div:first-child > div {
    margin-bottom: 0.8em !important;
  }
  
  /* Уменьшаем размер шрифта label */
  .calculator label {
    font-size: 12px !important;
    margin-bottom: 0.2em !important;
  }
  
  /* Уменьшаем размер полей ввода */
  .calculator select,
  .calculator input[type="number"] {
    padding: 0.6em 0.8em !important;
    font-size: 13px !important;
  }
  
  /* Уменьшаем дополнительный текст */
  .calculator small {
    font-size: 10px !important;
  }
  
  /* ПРАВЫЙ БЛОК - уменьшаем высоту */
  .calculator > div:nth-child(2) > div:last-child {
    padding: 1em !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
  }
  
  /* Уменьшаем заголовок правого блока */
  .calculator > div:nth-child(2) > div:last-child > div:first-child span {
    font-size: 0.9em !important;
  }
  
  /* Уменьшаем блок с ценой */
  .calculator > div:nth-child(2) > div:last-child > div:nth-child(2) {
    padding: 0.8em !important;
    margin-bottom: 0.8em !important;
  }
  
  /* Уменьшаем саму цену */
  #calc_total {
    font-size: 1.6em !important; /* Было 2.2em */
  }
  
  /* Уменьшаем таблицу с детализацией */
  .calculator table {
    font-size: 0.8em !important;
  }
  
  .calculator table td {
    padding: 0.3em 0 !important;
  }
  
  /* Уменьшаем кнопку заказа */
  .calculator .btn {
    padding: 0.6em !important;
    font-size: 13px !important;
  }
  
  /* Уменьшаем примечания */
  .calculator > div:last-child {
    margin-top: 1em !important;
    padding-top: 0.8em !important;
    font-size: 10px !important;
  }
}

/* Для очень маленьких телефонов */
@media (max-width: 480px) {
  .calculator {
    padding: 1em !important;
  }
  
  /* Ещё сильнее уменьшаем заголовок */
  .calculator > div:first-child span {
    font-size: 1em !important; /* 1.4em * 0.71 = 1em */
  }
  
  .calculator > div:first-child p {
    font-size: 11px !important;
  }
  
  /* Делаем поля ещё компактнее */
  .calculator select,
  .calculator input[type="number"] {
    padding: 0.5em 0.7em !important;
    font-size: 12px !important;
  }
  
  /* Ещё сильнее уменьшаем цену */
  #calc_total {
    font-size: 1.4em !important;
  }
  
  /* Убираем часть отступов */
  .calculator > div:nth-child(2) {
    gap: 10px !important;
  }
  
  /* Делаем правый блок ещё меньше */
  .calculator > div:nth-child(2) > div:last-child {
    padding: 0.8em !important;
  }
  
  /* Уменьшаем таблицу */
  .calculator table {
    font-size: 0.7em !important;
  }
  
  /* Уменьшаем чекбоксы */
  .calculator input[type="checkbox"] {
    transform: scale(0.8);
    margin-right: 2px;
  }
  
  .calculator label[style*="align-items: center"] {
    font-size: 11px !important;
  }
}