/* Разметка калькулятора на странице */
#calc .calc-grid{
  display:grid;
  grid-template-columns: 1fr;   /* одна колонка: форма + итог внутри */
  gap:18px;
  min-width: 0;                 /* не раздувать родителя при узком viewport */
  width: 100%;
}
@media (max-width: 880px){
  #calc .calc-grid{ grid-template-columns: 1fr; }
}

/* Карточка с формой внутри (общие переменные темы берём из styles.css) */
#calc .card{
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.07));
  border:1px solid rgba(255,255,255,.16);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:18px;
  min-width:0;
}

/* Мини-заголовки секций */
#calc .section-title{
  font-size:13px;
  letter-spacing:.4px;
  text-transform:uppercase;
  color:var(--muted);
  margin:10px 0 6px;
}

/* Разделители между смысловыми блоками */
#calc .section{ margin:6px 0 10px; }
#calc .section + .section{ margin-top:14px; }
#calc .section.divider{ border-top:1px solid rgba(255,255,255,.12); padding-top:12px; }

/* Универсальный разделитель для строк внутри секций */
#calc .divider{
  border-top:1px solid rgba(255,255,255,.18);
  margin:12px 0;
}

/* 2×2 сетка секций внутри карточки */
#calc .form-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
  align-items:start;
  min-width: 0;
}
#calc .form-grid .section{
  margin:0;
  min-width:0; /* иначе колонка не сжимается и даёт горизонтальный скролл */
}
@media (max-width:880px){
  #calc .form-grid{ grid-template-columns:1fr; }
}

/* Вертикальный список полей: подпись сверху, контрол снизу */
#calc .vlist{
  display:flex; flex-direction:column; gap:12px;
}

/* Единый вид полей и отступ подпись/контрол */
#calc .field{ display:flex; flex-direction:column; gap:6px; margin:0; }
#calc .field input,
#calc .field select,
#calc .field textarea{
  background:#2a3344;
  border:1px solid rgba(255,255,255,.14);
  color:var(--text);
  padding:10px 12px;
  border-radius:12px;
  outline:none;
  font-size:15px;
  min-height:40px;
}
#calc .field input:focus,
#calc .field select:focus,
#calc .field textarea:focus{
  border-color:var(--brand);
}

/* Контролы справа от подписи: вторая колонка гибкая, фикс. 280px только как потолок */
#calc .form-grid{ --ctrl-w: 280px; }
#calc .vlist .field input,
#calc .vlist .field select{
  width:100%;
  max-width:min(var(--ctrl-w), 100%);
  min-width:0;
}
#calc .vlist .field input[type="number"]{ text-align:left; }
@media (max-width:880px){
  #calc .form-grid{ --ctrl-w: 100%; }  /* на телефоне на всю ширину */
}

/* Радиокнопки «кружок с точкой» для Цвета */
#calc .radios{
  width:100%;
  max-width:min(var(--ctrl-w), 100%);
  min-width:0;
  display: flex; gap: 18px; align-items: center;
  padding: 4px 0;
  flex-wrap:wrap;
}
#calc .radio{
  display: inline-flex; align-items: center;
  gap: 8px; cursor: pointer; user-select: none;
  color: var(--text);
}
#calc .radio input{
  position: absolute; opacity: 0; pointer-events: none;
}
#calc .radio .bullet{
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.55);
  background: transparent; display: inline-block; position: relative;
  transition: border-color .15s ease, box-shadow .15s ease;
}
#calc .radio input:checked + .bullet::after{
  content: ""; position: absolute; inset: 3px;
  border-radius: 50%; background: var(--brand);
}
#calc .radio:hover .bullet{ border-color: var(--brand); }
#calc .radio input:focus + .bullet{
  box-shadow: 0 0 0 3px rgba(106,167,255,.35);
}

/* Радиокнопка ширины в недоступном состоянии */
#calc .radio.disabled {
  opacity: .45;
  cursor: not-allowed;
}
#calc .radio.disabled .bullet {
  border-color: rgba(255,255,255,.35);
  box-shadow: none;
}

/* Подсказка (иконка i) и тултип — локально для калькулятора */
#calc .hint{
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; font-weight:700; font-size:12px;
  border-radius:50%; cursor:help;
  background:rgba(255,255,255,.12); color:#cfe2ff;
}
#calc .hint:hover{ background:rgba(255,255,255,.2) }
#calc .hint[data-tip]{ position:relative }
#calc .hint[data-tip]:hover::after{
  content:attr(data-tip);
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:125%;
  background:#343d50;
  color:#f5f5f5;                    /* вместо голубого — нейтральный светлый */
  border:1px solid rgba(255,255,255,.15);
  padding:8px 10px;
  border-radius:10px;
  width:260px;
  box-shadow:0 4px 18px rgba(0,0,0,.5); /* мягкая тень */
  white-space:normal;
  z-index:10;
}


/* Итог под формой — полный вид + отключаем sticky */
#calc .summary{
  background: linear-gradient(180deg, rgba(122,163,255,.14), rgba(127,255,212,.1));
  border:1px dashed rgba(255,255,255,.24);
  border-radius:var(--radius);
  padding:16px;
  position: static !important;
  top: auto !important;
  margin-top: 16px;
  width: 100%;
  place-self: auto;
}
#calc .price{ font-size:32px; font-weight:800; }

/* Горизонтальное выравнивание полей — переносим сюда из styles.css */
#calc .form-grid {
  --label-w: 220px;
  --ctrl-w: 320px;
}

#calc .vlist .field {
  display: grid;
  grid-template-columns: minmax(0, var(--label-w)) minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin: 0;
  min-width: 0;
}

/* Подпись и поле в одну линию */
#calc .vlist .field > span {
  white-space: nowrap;
}

/* Адаптив — подписи сверху */
@media (max-width: 880px) {
  #calc .vlist .field {
    grid-template-columns: 1fr;
  }
}

/* Для отдельных полей в .vlist — подпись сверху, контрол снизу */
#calc .vlist .field.stacked{
  display: grid;
  grid-template-columns: 1fr;   /* одна колонка */
}

/* Поле с роликом: подпись | ползунок | число+ед. (на мобилке та же строка, компактнее отступы) */
#calc .vlist .field.with-slider{
  display:grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items:center;
  column-gap:10px;
  row-gap:0;
  --label-w: 120px;
}

/* Блок справа: число + единицы измерения */
#calc .vlist .field.with-slider .num{
  display:flex; align-items:center; gap:8px;
}
#calc .vlist .field.with-slider .num .unit{
  color:var(--muted); white-space:nowrap;
}

/* Ползунок — «ролик» */
#calc .roller{
  width:100%;
  max-width:100%;
  min-width:0;
  background:transparent;
  height:24px; /* чтобы удобнее было брать мышкой */
  -webkit-appearance:none; appearance:none;
}

/* Линия — пунктир */
#calc .roller::-webkit-slider-runnable-track{
  height:2px; background:repeating-linear-gradient(
    to right,
    rgba(255,255,255,.35) 0 8px,
    rgba(255,255,255,0) 8px 16px
  );
  border-radius:2px;
}
#calc .roller::-moz-range-track{
  height:2px; background:repeating-linear-gradient(
    to right,
    rgba(255,255,255,.35) 0 8px,
    rgba(255,255,255,0) 8px 16px
  );
  border-radius:2px;
}

/* Бегунок — голубой кружок с белой обводкой */
#calc .roller::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:28px; height:28px; margin-top:-13px;
  border-radius:50%;
  background:#97d9ff;
  border:3px solid #fff;
  box-shadow:0 0 0 3px rgba(106,167,255,.35);
  cursor:pointer;
}
#calc .roller:active::-webkit-slider-thumb{ box-shadow:0 0 0 5px rgba(106,167,255,.45) }

#calc .roller::-moz-range-thumb{
  width:28px; height:28px; border-radius:50%;
  background:#97d9ff; border:3px solid #fff;
  box-shadow:0 0 0 3px rgba(106,167,255,.35);
  cursor:pointer;
}
#calc .roller:active::-moz-range-thumb{ box-shadow:0 0 0 5px rgba(106,167,255,.45) }

/* Компактные числовые поля справа от ролика */
#calc { --num-w: 120px;            /* общая ширина правого блока */
        --num-input-w: 84px; }     /* ширина самого input (4 цифры + запас) */

@media (min-width: 881px){
  #calc .vlist .field.with-slider{
    grid-template-columns: var(--label-w) minmax(0, 1fr) var(--num-w);
    column-gap:12px;
  }
}

@media (max-width: 880px){
  #calc .vlist .field.with-slider{
    column-gap:8px;
    --num-input-w: 68px;
  }
  #calc .vlist .field.with-slider > span{
    min-width:0;
  }
  #calc .vlist .field.with-slider .num{
    flex-shrink:0;
  }
}

#calc .vlist .field.with-slider .num{
  justify-content: flex-end;       /* прижимаем число к правому краю блока */
  gap: 6px;                        /* чуть компактнее отступ между числом и ед.изм. */
}

#calc .vlist .field.with-slider .num input{
  width: var(--num-input-w);       /* перекрываем глобальную ширину контролов */
  text-align: left;
  min-height: 36px;                /* можно 36px, чтобы визуально стали компактнее */
  padding: 8px 10px;               /* чуть меньше паддинги */
}

/* при желании на узких экранах можно вернуть full width: */
/*
@media (max-width: 880px){
  #calc { --num-w: 100%; --num-input-w: 100%; }
}
*/

/* Отдельный раздел "Дополнительно" после формы */
#calc .extras {
  padding: 16px 0;
  margin-top: 18px;
  border: none;
  background: transparent;
}


/* Две колонки внутри "Дополнительно" */
#calc .extras-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}

/* Адаптив: на телефоне одна колонка */
@media (max-width: 880px) {
  #calc .extras-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Компактная вёрстка полей только в секции "Дополнительно" ───────── */

#calc .extras{
  --label-w: 220px;     /* ширина колонки с подписями */
  --ctrl-compact: 56px; /* короче примерно в 3 раза от обычных полей */
  min-width: 0;
}
#calc .extras .vlist{
  min-width: 0;
}

/* «Дополнительно»: одна строка — подпись | поле | ед.изм.; .stacked — колонка (радиокарниз) */
#calc .extras .vlist .field{
  display: grid;
  align-items: center;
  column-gap: 10px;
  row-gap: 0;
  min-width: 0;
}
#calc .extras .vlist .field:not(.stacked){
  grid-template-columns: minmax(0, 1fr) auto auto;
}
#calc .extras .vlist .field.stacked{
  grid-template-columns: 1fr;
  row-gap: 8px;
}
@media (min-width: 881px){
  #calc .extras .vlist .field:not(.stacked){
    grid-template-columns: var(--label-w) var(--ctrl-compact) auto;
    column-gap: 12px;
  }
}

/* Узкие числовые инпуты справа от подписи */
#calc .extras .vlist .field input[type="number"],
#calc .extras .vlist .field input[type="text"]{
  width: var(--ctrl-compact);
  min-height: 34px;
  padding: 6px 8px;
  text-align: left;
}

/* Узкий select (текст обрежется троеточием, чтобы не рвать сетку) */
#calc .extras .vlist .field select{
  width: var(--ctrl-compact);
  min-height: 34px;
  padding: 6px 28px 6px 8px; /* справа место под стрелку */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Узкие экраны: компактные числа в одной строке с подписью; селект — на оставшуюся ширину */
@media (max-width: 880px){
  #calc .extras{
    --ctrl-compact: 72px;
  }
  #calc .extras .vlist{
    gap: 6px;
  }
  #calc .extras .vlist .field > span{
    white-space: normal;
  }
  #calc .extras .vlist .field:not(.stacked) select,
  #calc #profile{
    grid-column: 2 / -1;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  #calc .extras .vlist .field input[type="number"],
  #calc .extras .vlist .field input[type="text"]{
    width: var(--ctrl-compact);
    max-width: var(--ctrl-compact);
    min-width: 0;
  }
}

/* ===== Итоговый блок в стиле макета со скрина ===== */
#calc .summary-pro{
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  border: none;
  background: transparent;
  padding: 0;
  min-width: 0;
}

#calc .summary-pro-left{
  background: #96d5fb;           /* светло-голубой */
  color: #0c3b64;
  border-radius: 14px;
  padding: 16px;
  min-height: 110px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#calc .summary-pro-left .small{
color:#0a3d66;      /* темнее */
  opacity:1;          /* не полупрозрачная */
  font-weight:600;    /* чуть жирнее */
}
#calc .summary-pro-left .fromto{ display:flex; align-items: baseline; gap:10px; }
#calc .summary-pro-left .fromto + .fromto{ margin-top: 8px; }
#calc .summary-pro-left .label{ color:#0c3b64; }
#calc .summary-pro-left .value{
  font-size: 28px; font-weight: 800; color:#0c3b64;
}

#calc .summary-pro-right{ padding: 6px 0; }
#calc .summary-pro-row{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 260px);
  gap: 16px;
  align-items: center;
  margin-bottom: 8px;
  min-width: 0;
}
#calc .summary-input{
  background: #fff;
  color: #1a1a1a;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  padding: 12px 14px;
  min-height: 44px;
  font-size: 16px;
}
#calc .summary-pro-right .cta.big{
  min-height: 48px;
  border-radius: 28px;
  font-weight: 700;
}

/* чекбокс + текст */
#calc .agree{
  display:flex; align-items:center; gap:10px;
  color: var(--text);
  margin: 6px 0;
}
#calc .agree input{ width:18px; height:18px; }
#calc .agree a{ color:#2f82ff; text-decoration:underline; }

/* сноска */
#calc .note{
  color: var(--muted);
  font-size: 14px;
  line-height: 1.35;
}

/* Адаптив: одна колонка раньше, чем ломается строка имя/телефон/кнопка */
@media (max-width: 920px){
  #calc .summary-pro{ grid-template-columns: 1fr; }
  #calc .summary-pro-row{ grid-template-columns: 1fr; }
  #calc .summary-pro-right .cta.big{ width: 100%; }
}

/* Убираем верхнюю линию у первых разделов калькулятора */
#calc .form-grid .section.divider:first-of-type,
#calc .form-grid .section.divider:nth-of-type(2) {
    border-top: none !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
}

#calc .vlist { gap: 8px; }                /* было 12px */
#calc .field { gap: 4px; }                /* было 6px */
#calc .section { margin: 4px 0 6px; }     /* было 6px 0 10px */
#calc .section.divider { padding-top: 8px; } /* было 12px */

#calc .radios {
  flex-wrap: wrap;     /* перенос на две строки при нехватке ширины */
  gap: 10px;           /* вместо 18px */
  row-gap: 4px;        /* для экономии вертикали */
}
#calc .radio span { font-size: 14px; }

#calc .field input,
#calc .field select {
  font-size: 14px;
  padding: 6px 10px;
  min-height: 34px;
}

#calc #profile{
  width: 260px;          /* можно 280–320px, если хотите ещё длиннее */
  min-width: 260px;
}
@media (max-width: 880px){
  #calc #profile{
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
}

/* ────────────────────────────────
   МИНИМАЛИСТИЧНЫЕ СТРЕЛОЧКИ В INPUT[type=number]
   — стиль в духе macOS / iOS, единый с калькулятором
──────────────────────────────── */

/* Вернуть нативные стрелочки и аккуратно стилизовать */
#calc input[type="number"]::-webkit-inner-spin-button,
#calc input[type="number"]::-webkit-outer-spin-button{
  -webkit-appearance: inner-spin-button; /* вернуть нативный вид */
  appearance: auto;
  margin: 0;
  opacity: .45;                 /* приглушаем по умолчанию */
  filter: grayscale(40%);       /* убираем «металличность» */
  transition: opacity .2s ease, filter .2s ease;
}

#calc input[type="number"]:hover::-webkit-inner-spin-button,
#calc input[type="number"]:hover::-webkit-outer-spin-button{
  opacity: .85;                 /* при наведении — чуть ярче */
  filter: grayscale(0%);
}

/* Базовый вид самого поля — оставить как был */
#calc input[type="number"]{
  background:#2a3344;
  color:var(--text);
  border:1px solid rgba(255,255,255,.14);
  border-radius:10px;
  padding:6px 10px;
  font-size:14px;
  transition: border-color .2s ease, box-shadow .2s ease;
  -moz-appearance: textfield;   /* у Firefox скрывает «стрелки» (они там другие) */
}
#calc input[type="number"]:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(106,167,255,.25);
  outline:none;
}

/* Единицы справа от поля — стиль как у площади/периметра */
#calc .extras .vlist .field .unit{
  color: var(--muted);
  white-space: nowrap;
}

/* ────────────────────────────────
   Унификация расстояний между input и единицами
──────────────────────────────── */

/* Единицы ближе к полю, но не вплотную */
#calc .vlist .field .unit {
  margin-left: 6px;       /* вместо 10–14px */
  color: var(--muted);
  align-self: center;
  white-space: nowrap;
}

/* Для раздела "Дополнительно" — то же правило */
#calc .extras .vlist .field .unit {
  margin-left: 6px;
}

/* Поля "Площадь" и "Периметр" — выравниваем ширину */
#calc .vlist .field.with-slider .num input {
  width: var(--num-input-w);
  min-height: 36px;
  padding: 6px 10px;
  text-align: left;
  box-sizing: border-box;
}

/* Чтобы цифры и стрелочки у всех полей были на одной линии */
#calc .vlist .field input[type="number"] {
  display: inline-block;
  vertical-align: middle;
}