/* ═══════════════════════════════════════════════════════════
   Article: Калькулятор воздухообмена для Алматы
   Дополнения к .arr-calc из sections.css.
   Цветовая дифференциация трёх калькуляторов:
   apartment — фирменный teal, office — синий, cafe — оранжевый.
═══════════════════════════════════════════════════════════ */

.arr-calc--airflow {
  margin: 36px 0;
}

.arr-calc--airflow + .arr-calc__hint {
  margin-top: -8px;
}

/* ─── APARTMENT — фирменный teal (как у эталона) ─── */
/* Базовые .arr-calc стили уже teal — переопределять не нужно */

/* ─── OFFICE — синий ─── */
.arr-calc--airflow[data-airflow-type="office"]::before {
  background: linear-gradient(90deg, #1E5BBA 0%, #4A89E8 100%);
}
.arr-calc--airflow[data-airflow-type="office"] .arr-calc__icon {
  background: linear-gradient(135deg, #1E5BBA 0%, #4A89E8 100%);
}
.arr-calc--airflow[data-airflow-type="office"] .arr-calc__field-label svg {
  color: #1E5BBA;
}
.arr-calc--airflow[data-airflow-type="office"] .arr-calc__input:focus,
.arr-calc--airflow[data-airflow-type="office"] .arr-calc__select:focus {
  border-color: #1E5BBA;
  box-shadow: 0 0 0 3px rgba(30, 91, 186, 0.14);
}
.arr-calc--airflow[data-airflow-type="office"] .arr-calc__select,
.arr-calc--airflow[data-airflow-type="office"] .arr-calc__select:hover,
.arr-calc--airflow[data-airflow-type="office"] .arr-calc__select:focus {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231E5BBA' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

/* ─── CAFE — оранжевый ─── */
.arr-calc--airflow[data-airflow-type="cafe"]::before {
  background: linear-gradient(90deg, #C2410C 0%, #F59E0B 100%);
}
.arr-calc--airflow[data-airflow-type="cafe"] .arr-calc__icon {
  background: linear-gradient(135deg, #C2410C 0%, #F59E0B 100%);
}
.arr-calc--airflow[data-airflow-type="cafe"] .arr-calc__field-label svg {
  color: #C2410C;
}
.arr-calc--airflow[data-airflow-type="cafe"] .arr-calc__input:focus,
.arr-calc--airflow[data-airflow-type="cafe"] .arr-calc__select:focus {
  border-color: #C2410C;
  box-shadow: 0 0 0 3px rgba(194, 65, 12, 0.14);
}
.arr-calc--airflow[data-airflow-type="cafe"] .arr-calc__select,
.arr-calc--airflow[data-airflow-type="cafe"] .arr-calc__select:hover,
.arr-calc--airflow[data-airflow-type="cafe"] .arr-calc__select:focus {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23C2410C' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

/* ─── Бейдж типа калькулятора в шапке ─── */
.arr-calc__type-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  margin-bottom: 8px;
  border-radius: 999px;
  background: rgba(11, 15, 20, 0.06);
  color: var(--arr-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1;
}
.arr-calc--airflow[data-airflow-type="apartment"] .arr-calc__type-badge {
  background: rgba(13, 124, 104, 0.10);
  color: var(--arr-accent);
}
.arr-calc--airflow[data-airflow-type="office"] .arr-calc__type-badge {
  background: rgba(30, 91, 186, 0.10);
  color: #1E5BBA;
}
.arr-calc--airflow[data-airflow-type="cafe"] .arr-calc__type-badge {
  background: rgba(194, 65, 12, 0.10);
  color: #C2410C;
}

/* ─── Двойной вывод (приток / вытяжка) ─── */
.arr-calc--airflow [data-airflow-out="primary"] {
  font-variant-numeric: tabular-nums;
}
.arr-calc--airflow [data-airflow-out="secondary"] {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  color: var(--arr-mint);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  opacity: 0.95;
}
.arr-calc--airflow[data-airflow-type="office"] [data-airflow-out="secondary"] {
  color: #6EB1FF;
}
.arr-calc--airflow[data-airflow-type="cafe"] [data-airflow-out="secondary"] {
  color: #FBBF24;
}

/* ─── Note под результатом ─── */
.arr-calc--airflow [data-airflow-out="note"] {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
}
.arr-calc--airflow [data-airflow-out="note"]:empty::before {
  content: 'Заполните параметры выше – расчёт обновится автоматически.';
  color: rgba(255, 255, 255, 0.55);
  font-style: italic;
}

/* ─── Адаптив ─── */
@media (max-width: 768px) {
  .arr-calc--airflow {
    margin: 28px 0;
  }
  .arr-calc--airflow [data-airflow-out="secondary"] {
    font-size: 13px;
  }
}