@import url('https://fonts.googleapis.com/css2?family=TildaSans:wght@400;300;500;700&display=swap');

:root {
  --color-background: #2A2A2A;
  --color-text: #FFFFFF;
  --color-text-alt: #CCCCCC;
  --color-border: #FFFFFF;
  --color-red: #FF0000;
  --color-red-hover: #CC0000;
}

#popup-calculator {
  font-family: 'TildaSans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  color: var(--color-text);
}

/* База попапа: скрыт по умолчанию, активен — во весь экран */
#popup-calculator { display: none; }
#popup-calculator.active {
  display: flex;
  position: fixed;
  inset: 0;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  overflow: hidden;
}

/* Фон затемнения */
#popup-calculator .calc__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 1;
}

/* Рамка/контент попапа (как у apartment) */
.calculator-popup-content.calc__frame {
  background: var(--color-background);
  border-radius: 12px;
  max-width: 1080px;
  width: 96%;
  margin: 40px auto;
  padding: 24px;
  box-shadow: 0 4px 32px rgba(0,0,0,0.25);
  border: 2px solid var(--color-border);
  position: relative;
  z-index: 2;
}

.calculator-title {
  font-size: 42px;
  font-weight: 500;
  color: var(--color-text);
  text-align: center;
  margin-bottom: 32px;
  letter-spacing: .5px;
}

.calculator-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.calc-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
}

.calc-col {
  flex: 1 1 220px;
  min-width: 220px;
}

.calc-label {
  font-size: 24px;
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: 12px;
  display: block;
}

.calc-radio-group, .calc-checkbox-group { display: flex; flex-direction: column; gap: 10px; }

/* Сегментированный переключатель типа системы (оригинальный стиль + поддержка класса .home-type-option--active для JS) */
.home-type-group { flex-direction: row; gap: 12px; }
.home-type-option { position: relative; display: flex; align-items: center; padding: 14px 20px; background:#2f2f2f; border:1px solid rgba(255,255,255,0.18); border-radius:14px; cursor:pointer; font-size:18px; font-weight:500; letter-spacing:.3px; transition:background .25s,border-color .25s, box-shadow .25s; }
.home-type-option input { position:absolute; opacity:0; inset:0; cursor:pointer; }
.home-type-option span { pointer-events:none; }
.home-type-option:hover { background:#353535; }
.home-type-option input:checked + span { color: var(--color-text); }
.home-type-option input:checked ~ span { color: var(--color-text); }
.home-type-option:has(input:checked),
.home-type-option.home-type-option--active { box-shadow: 0 0 0 3px rgba(255,255,255,0.07), 0 6px 20px rgba(0,0,0,0.55); border-color: rgba(255,255,255,0.35); background:#373737; }

/* Группы систем (новые стили, интегрированы) */
.calc-systems-wrapper { display: flex; flex-direction: column; gap: 26px; }
.calc-systems-group-title { font-size: 22px; font-weight:600; margin-bottom:14px; letter-spacing:.5px; }
.calc-systems-group--main .calc-systems-group-title { color:#fff; }
.calc-systems-group--extra .calc-systems-group-title { color:#ccc; }

/* Сетка чекбоксов оригинальная + расширение */
.calc-checkbox-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 900px){ .calc-checkbox-grid { grid-template-columns: 1fr 1fr; } }

.calc-radio, .calc-checkbox { font-size: 20px; color: var(--color-text); display: flex; align-items: center; gap: 10px; }
.calc-checkbox { border: 1px solid rgba(255,255,255,0.18); border-radius: 10px; padding: 12px 14px; background: #2f2f2f; transition: background .25s, border-color .25s; }
.calc-checkbox:hover { background: #353535; }
.calc-checkbox span { font-weight: 500; }
.calc-checkbox input:checked + i { color: var(--color-text); }
.calc-checkbox i { color: var(--color-text-alt); font-size: 20px; margin-right: 6px; width: 22px; text-align: center; }
.calc-checkbox input:checked ~ span { color: var(--color-red); font-weight:600; }

.calc-radio input[type="radio"], .calc-checkbox input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--color-red); cursor: pointer; }

.calc-select { width: 100%; padding: 10px; border-radius: 8px; border: 2px solid var(--color-border); background: #242424; color: var(--color-text); font-size: 20px; font-family: inherit; }

.calc-slider { width: 100%; margin-top: 8px; accent-color: var(--color-red); height: 6px; border-radius: 3px; background: rgba(255,255,255,0.1); }

#areaValue { font-weight: 700; color: var(--color-red); margin-left: 8px; }

.calc-result-card { background: #242424; border-radius: 12px; border: 2px solid var(--color-border); padding: 20px; width: 100%; margin-top: 12px; }

.calc-result-title { font-size: 22px; color: var(--color-text-alt); margin-bottom: 10px; text-align: left; }

.calc-price-display { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }

.calc-price-value { font-size: 25px; font-weight: 600; color: var(--color-text); letter-spacing: .5px; }

.calc-price-currency { font-size: 22px; color: var(--color-text-alt); }

.calc-breakdown { margin-top: 40px; font-size: 20px; color: var(--color-text); display: flex; flex-wrap: wrap; gap: 8px; min-height: 44px; align-items: flex-start; }

.calc-system-pill { display: inline-flex; align-items: center; gap: 10px; background: linear-gradient(145deg,#343434,#2c2c2c); border:1px solid rgba(255,255,255,0.18); padding:10px 18px; border-radius: 28px; font-size:16px; font-weight:500; line-height:1.2; position:relative; overflow:hidden; }
.calc-system-pill:before { content:''; position:absolute; inset:0; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.09), transparent 70%); opacity:.7; }
.calc-system-pill span { font-size:14px; color: var(--color-text-alt); font-weight:400; }
.calc-system-pill--empty { opacity: .6; }

/* Примечание для проводных систем */
.calc-wired-note { font-size:12px; color:#ccc; margin-top:4px; font-style:italic; letter-spacing:.3px; }

/* Эстетика карточки результата */
.calc-result-card { background: linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.01)); box-shadow: 0 8px 32px rgba(0,0,0,0.4); backdrop-filter: blur(3px); position: relative; }
.calc-price-display { position: relative; }
.calc-price-display:before { content:''; position:absolute; inset:-10px -14px -10px -14px; border:1px solid rgba(255,255,255,0.12); border-radius:16px; pointer-events:none; }
.calc-price-value { text-shadow: 0 0 12px rgba(255,255,255,0.15); }

@media (max-width: 700px) {
  .calculator-popup-content { padding: 16px 4px; max-width: 98vw; }
  .calculator-title { font-size: 26px; }
  .calc-label { font-size: 16px; }
  .calc-radio, .calc-checkbox { font-size: 16px; }
  .calc-select, .calc-input { font-size: 16px; }
  .calc-price-value { font-size: 22px; }
  .calculator-button { font-size: 18px; height: 44px; }
  .calc-systems-group-title { font-size:18px; }
}