/* Калькулятор стоимости дома СТРОЙСИНТЕЗ — попап (тёмное стекло, бренд оранжевый/графит) */
:root {
    --sc-orange: #F47C20;
    --sc-orange-d: #E06E12;
    --sc-orange-l: #FF9A44;
    --sc-ink: #14161B;
    --sc-panel: #23272F;
    --sc-text: #EDEFF2;
    --sc-muted: rgba(255,255,255,.60);
    --sc-faint: rgba(255,255,255,.42);
    --sc-line: rgba(255,255,255,.10);
    --sc-glass: rgba(255,255,255,.06);
}

.scalc-overlay {
    position: fixed; inset: 0; z-index: 99999;
    background: rgba(10,12,16,.48);
    display: none; align-items: center; justify-content: center;
    padding: 16px; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
}
.scalc-overlay.is-open { display: flex; }
body.scalc-lock { overflow: hidden; }

.scalc-modal {
    position: relative; width: 100%; max-width: 660px; max-height: 92vh;
    display: flex; flex-direction: column;
    background: var(--sc-ink); border-radius: 20px; overflow: hidden;
    box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06);
    font-family: inherit; color: var(--sc-text);
    animation: scalc-in .22s cubic-bezier(.2,.8,.2,1);
}
@keyframes scalc-in { from { transform: translateY(18px) scale(.985); opacity: 0; } to { transform: none; opacity: 1; } }

/* Фоновый слой этапа: фото + тёмная вуаль. Пока фото нет — тёплый графитовый градиент. */
.scalc-modal::before {
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(130% 90% at 50% -15%, rgba(244,124,32,.20), transparent 58%),
        linear-gradient(180deg, #262A33 0%, #14161B 100%);
    background-size: cover; background-position: center;
}
.scalc-modal[data-step="floors"]::before { background-image: linear-gradient(180deg, rgba(20,22,28,.32), rgba(16,18,23,.58)), url(/media/plg_system_stroycalc/images/step-1-floors.webp); }
.scalc-modal[data-step="dims"]::before { background-image: linear-gradient(180deg, rgba(20,22,28,.32), rgba(16,18,23,.58)), url(/media/plg_system_stroycalc/images/step-2-dims.webp); }
.scalc-modal[data-step="wall"]::before { background-image: linear-gradient(180deg, rgba(20,22,28,.32), rgba(16,18,23,.58)), url(/media/plg_system_stroycalc/images/step-3-walls.webp); }
.scalc-modal[data-step="roof"]::before { background-image: linear-gradient(180deg, rgba(20,22,28,.32), rgba(16,18,23,.58)), url(/media/plg_system_stroycalc/images/step-4-roof.webp); }
.scalc-modal[data-step="floorType"]::before { background-image: linear-gradient(180deg, rgba(20,22,28,.32), rgba(16,18,23,.58)), url(/media/plg_system_stroycalc/images/step-5-floor.webp); }
.scalc-modal[data-step="foundation"]::before { background-image: linear-gradient(180deg, rgba(20,22,28,.32), rgba(16,18,23,.58)), url(/media/plg_system_stroycalc/images/step-6-foundation.webp); }
.scalc-modal[data-step="result"]::before { background-image: linear-gradient(180deg, rgba(18,20,25,.42), rgba(14,16,21,.66)), url(/media/plg_system_stroycalc/images/step-1-floors.webp); }

.scalc-close {
    position: absolute; top: 12px; right: 14px; z-index: 3;
    width: 34px; height: 34px; border: 0; border-radius: 50%;
    background: rgba(255,255,255,.12); color: #fff; font-size: 22px; line-height: 1;
    cursor: pointer; transition: background .15s, transform .15s;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.scalc-close:hover { background: rgba(255,255,255,.24); transform: rotate(90deg); }

.scalc-head {
    position: relative; z-index: 1; padding: 22px 24px 16px; color: #fff;
    background: rgba(18,20,25,.45); border-bottom: 1px solid var(--sc-line);
    -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3);
}
.scalc-title { font-size: 21px; font-weight: 800; letter-spacing: -.015em; }
.scalc-sub { font-size: 12.5px; color: var(--sc-muted); margin-top: 3px; }
.scalc-progress { height: 5px; background: rgba(255,255,255,.14); border-radius: 6px; margin-top: 14px; overflow: hidden; }
.scalc-bar { height: 100%; width: 0; border-radius: 6px; background: linear-gradient(90deg, var(--sc-orange), var(--sc-orange-l)); box-shadow: 0 0 14px rgba(244,124,32,.6); transition: width .3s ease; }

.scalc-body { position: relative; z-index: 1; padding: 24px; overflow-y: auto; flex: 1; color: var(--sc-text); }
.scalc-h { font-size: 18px; font-weight: 700; margin: 0 0 16px; color: #fff; letter-spacing: -.01em; }
.scalc-sublabel { font-size: 13px; font-weight: 600; color: var(--sc-muted); margin: 18px 0 9px; }

/* ---- Glassmorphism-карточки ---- */
.scalc-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px; }
.scalc-cards--sm { grid-template-columns: repeat(3, 1fr); }
.scalc-card {
    position: relative; text-align: left; padding: 15px 16px;
    border: 1px solid rgba(255,255,255,.14); border-radius: 14px;
    background: var(--sc-glass);
    -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
    cursor: pointer; font-size: 14px; color: var(--sc-text);
    box-shadow: 0 4px 18px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.09);
    transition: transform .18s ease, border-color .18s, background .18s, box-shadow .18s;
}
.scalc-card:hover {
    transform: translateY(-2px);
    border-color: rgba(244,124,32,.55); background: rgba(255,255,255,.10);
    box-shadow: 0 12px 30px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.12);
}
.scalc-card.is-on {
    border-color: var(--sc-orange); background: rgba(244,124,32,.15);
    box-shadow: 0 0 0 1px var(--sc-orange), 0 12px 34px rgba(244,124,32,.28), inset 0 1px 0 rgba(255,255,255,.14);
}
.scalc-card.is-on::after {
    content: '✓'; position: absolute; top: 10px; right: 11px;
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--sc-orange); color: #fff; font-size: 12px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(244,124,32,.5);
}
.scalc-card-t { font-weight: 600; display: block; color: #fff; padding-right: 18px; }
.scalc-card-sub { display: block; margin-top: 6px; font-size: 11.5px; line-height: 1.45; color: var(--sc-faint); }
.scalc-card.is-on .scalc-card-sub { color: rgba(255,255,255,.72); }

.scalc-angle { margin-top: 12px; }
.scalc-angle-chip {
    display: inline-block; padding: 6px 13px; border-radius: 20px;
    background: rgba(244,124,32,.16); border: 1px solid rgba(244,124,32,.4);
    color: #FFCBA0; font-size: 13px; font-weight: 600;
}

.scalc-dims { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.scalc-field { display: flex; flex-direction: column; font-size: 13px; color: var(--sc-muted); gap: 7px; }
.scalc-field input {
    padding: 13px 15px; border: 1px solid rgba(255,255,255,.16); border-radius: 12px;
    font-size: 16px; color: #fff; background: rgba(255,255,255,.05);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    transition: border-color .15s, box-shadow .15s;
}
.scalc-field input::placeholder { color: rgba(255,255,255,.5); }
.scalc-field input:focus { outline: none; border-color: var(--sc-orange); box-shadow: 0 0 0 3px rgba(244,124,32,.22); }
.scalc-field input.is-bad { border-color: #F87171; background: rgba(248,113,113,.10); }
.scalc-hint { font-size: 12px; color: var(--sc-faint); margin-top: 11px; line-height: 1.5; }

.scalc-foot {
    position: relative; z-index: 1;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 24px; border-top: 1px solid var(--sc-line);
    background: rgba(18,20,25,.55);
    -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3);
}
.scalc-step-num { font-size: 12px; color: var(--sc-faint); letter-spacing: .02em; }
.scalc-btn {
    padding: 12px 24px; border: 0; border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer;
    background: rgba(255,255,255,.09); color: var(--sc-text);
    border: 1px solid rgba(255,255,255,.12); transition: all .15s;
}
.scalc-btn:hover { background: rgba(255,255,255,.16); }
.scalc-next, .scalc-primary {
    background: linear-gradient(135deg, var(--sc-orange), var(--sc-orange-l)); color: #fff; border: 0;
    box-shadow: 0 8px 24px rgba(244,124,32,.38);
}
.scalc-next:hover, .scalc-primary:hover { background: linear-gradient(135deg, var(--sc-orange-d), var(--sc-orange)); box-shadow: 0 10px 28px rgba(244,124,32,.46); }
.scalc-btn:disabled { opacity: .55; cursor: default; }

.scalc-error { margin-top: 14px; padding: 11px 14px; background: rgba(248,113,113,.14); border: 1px solid rgba(248,113,113,.35); color: #FCA5A5; border-radius: 10px; font-size: 13px; }
.scalc-loading { text-align: center; padding: 48px 0; color: var(--sc-muted); font-size: 15px; }

/* результат */
.scalc-result { text-align: center; }
.scalc-total-label { font-size: 13px; color: var(--sc-muted); }
.scalc-total {
    font-size: 38px; font-weight: 800; margin: 6px 0 2px; letter-spacing: -.02em; line-height: 1.05;
    background: linear-gradient(135deg, #FFD9B0, var(--sc-orange-l)); -webkit-background-clip: text; background-clip: text;
    color: transparent;
}
.scalc-total-m2 { font-size: 13px; color: var(--sc-muted); margin-bottom: 18px; }
.scalc-tbl { width: 100%; border-collapse: collapse; text-align: left; }
.scalc-tbl th { padding: 7px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--sc-faint); border-bottom: 1px solid var(--sc-line); font-weight: 600; }
.scalc-tbl th:not(:first-child) { text-align: right; }
.scalc-tbl td { padding: 10px 4px; border-bottom: 1px solid rgba(255,255,255,.07); font-size: 14px; color: var(--sc-text); }
.scalc-tbl td:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.scalc-tbl td.scalc-perm2 { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--sc-faint); font-size: 13px; }
.scalc-tbl-total td { font-weight: 700; font-size: 15px; border-top: 2px solid var(--sc-orange); border-bottom: 0; color: #fff; padding-top: 12px; }
.scalc-tbl-total td.scalc-perm2 { color: #FFCBA0; }
.scalc-areas { font-size: 12px; color: var(--sc-faint); margin-top: 14px; line-height: 1.6; }
.scalc-areas b { color: var(--sc-muted); }
.scalc-note { font-size: 12px; color: #F4C58A; background: rgba(244,124,32,.10); border: 1px solid rgba(244,124,32,.28); border-radius: 10px; padding: 11px 13px; margin: 16px 0; text-align: left; line-height: 1.5; }
.scalc-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 4px; }

.scalc-leadbox {
    text-align: left; background: var(--sc-glass); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 18px; margin-top: 8px;
    -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
}
.scalc-leadttl { font-weight: 700; color: #fff; margin-bottom: 14px; font-size: 15px; }
.scalc-in {
    width: 100%; padding: 13px 15px; border: 1px solid rgba(255,255,255,.16); border-radius: 11px;
    font-size: 15px; margin-bottom: 11px; box-sizing: border-box; color: #fff; background: rgba(255,255,255,.05);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.scalc-in::placeholder { color: rgba(255,255,255,.5); }
.scalc-in:focus { outline: none; border-color: var(--sc-orange); box-shadow: 0 0 0 3px rgba(244,124,32,.22); }
.scalc-leadbox .scalc-send { width: 100%; }
.scalc-policy { font-size: 11px; color: var(--sc-faint); margin-top: 9px; line-height: 1.5; }
.scalc-leadmsg { margin-top: 11px; font-size: 13px; }
.scalc-leadmsg.ok { color: #6EE7A0; }
.scalc-leadmsg.err { color: #FCA5A5; }

/* Перебиваем глобальные стили инпутов шаблона stroysintez:
   input[type=tel]:not(.form-control){background:#fff;color:#495057} — выше по специфичности,
   из-за чего поля были белыми, а белый плейсхолдер на белом невидим.
   Фон/цвет у шаблона без !important, поэтому наш !important гарантированно выигрывает.
   Скоплено на .scalc-modal — остальной сайт и белая форма обратной связи (.scfb-) не затронуты. */
.scalc-modal input.scalc-in,
.scalc-modal .scalc-field input {
    background: rgba(255,255,255,.07) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff;
    border: 1px solid rgba(255,255,255,.18) !important;
    border-radius: 11px !important;
    padding: 13px 15px !important;
    height: auto !important;
    font-size: 16px !important;
}
.scalc-modal input.scalc-in:focus,
.scalc-modal .scalc-field input:focus {
    border-color: var(--sc-orange) !important;
    box-shadow: 0 0 0 3px rgba(244,124,32,.22) !important;
    outline: none !important;
}
.scalc-modal input.scalc-in::placeholder,
.scalc-modal .scalc-field input::placeholder {
    color: rgba(255,255,255,.62) !important;
    -webkit-text-fill-color: rgba(255,255,255,.62);
    opacity: 1 !important;
}
.scalc-modal .scalc-field input.is-bad {
    border-color: #F87171 !important;
    background: rgba(248,113,113,.14) !important;
}
.scalc-modal input.scalc-in:-webkit-autofill,
.scalc-modal .scalc-field input:-webkit-autofill {
    -webkit-text-fill-color: #fff !important;
    -webkit-box-shadow: 0 0 0 1000px rgba(28,31,38,.92) inset !important;
    caret-color: #fff;
}

@media (max-width: 560px) {
    .scalc-modal { max-height: 96vh; border-radius: 16px; }
    .scalc-cards, .scalc-cards--sm { grid-template-columns: 1fr 1fr; }
    .scalc-total { font-size: 31px; }
    .scalc-head { padding: 18px 18px 13px; }
    .scalc-body { padding: 18px; }
    .scalc-foot { padding: 12px 18px; }
    .scalc-btn { padding: 11px 18px; }
}

/* ============================================================
   Форма обратной связи (попап) — в брендинге сайта (оранжевый/тёмный)
   ============================================================ */
.scfb-modal {
    position: relative; width: 100%; max-width: 460px; max-height: 94vh;
    display: flex; flex-direction: column;
    background: #fff; border-radius: 16px; overflow: hidden;
    box-shadow: 0 24px 60px rgba(0,0,0,.4);
    font-family: inherit; color: #1C1F26;
    animation: scalc-in .18s ease-out;
}
.scfb-head { background: #23272F; color: #fff; padding: 24px 26px 20px; }
.scfb-title { font-size: 23px; font-weight: 700; letter-spacing: -.015em; }
.scfb-sub { font-size: 13px; line-height: 1.5; opacity: .78; margin-top: 7px; }
.scfb-body { padding: 22px 26px 24px; display: flex; flex-direction: column; }
.scfb-in {
    width: 100%; padding: 14px 16px; border: 2px solid #E2E6EB; border-radius: 11px;
    font-size: 15px; color: #1C1F26; margin-bottom: 11px; box-sizing: border-box; background: #fff;
}
.scfb-in:focus { outline: none; border-color: #F47C20; }
.scfb-area { resize: vertical; min-height: 76px; font-family: inherit; }
.scfb-send {
    width: 100%; background: #F47C20 !important; color: #fff !important;
    border: 0; border-radius: 11px; padding: 16px; font-size: 16px; font-weight: 700;
    cursor: pointer; box-shadow: 0 10px 26px rgba(244,124,32,.32); transition: background .15s; margin-top: 2px;
}
.scfb-send:hover { background: #E06E12 !important; }
.scfb-send:disabled { opacity: .7; cursor: default; }
.scfb-policy { font-size: 11px; color: #9AA3AD; margin-top: 11px; text-align: center; line-height: 1.5; }
.scfb-msg { margin-top: 12px; font-size: 13.5px; text-align: center; font-weight: 600; }
.scfb-msg.ok { color: #1b7a3d; }
.scfb-msg.err { color: #b71c1c; }
@media (max-width: 560px) {
    .scfb-modal { max-height: 96vh; border-radius: 14px; }
    .scfb-head { padding: 19px 18px 15px; }
    .scfb-title { font-size: 21px; }
    .scfb-body { padding: 18px; }
}

/* Логотип Max в футере вместо fa-иконки (SPPB icon addon только с fontawesome).
   Класс icon_class ложится на <li>, кружок (фон/размер/радиус) — на вложенный <a>. */
.ss-max-ico > a {
    background-image: url(/images/max-logo.png) !important;
    background-size: cover !important; background-position: center !important;
    background-repeat: no-repeat !important; border-radius: 50% !important;
}
.ss-max-ico > a > i { opacity: 0 !important; }

/* ============================================================
   Адаптив страниц нового дизайна (.ss-page = главная + компания).
   Вёрстка на инлайн-стилях, поэтому переопределяем через
   селекторы по подстроке style + !important.
   ============================================================ */
/* ---- Планшет ≤1024px ---- */
@media (max-width: 1024px) {
    .ss-page [style*="max-width:1220px"] { padding-left: 26px !important; padding-right: 26px !important; }
    .ss-page [style*="grid-template-columns:repeat(4"] { grid-template-columns: repeat(2, 1fr) !important; }
    .ss-page [style*="grid-template-columns:repeat(3"] { grid-template-columns: repeat(2, 1fr) !important; }
    .ss-page h1 { font-size: 34px !important; }
    .ss-page h2 { font-size: 30px !important; }
}
/* ---- Мобильный ≤767px ---- */
@media (max-width: 767px) {
    /* боковой отступ контента от края экрана.
       Структурный селектор (section > div) — надёжнее, чем [style*=...]
       (его не может «съесть» оптимизатор CSS/PSO). Карточки внутри не трогаем. */
    .ss-page > section > div { padding-left: 14px !important; padding-right: 14px !important; }
    .ss-page [style*="max-width:1220px"],
    .ss-page [style*="max-width:920px"] { padding-left: 14px !important; padding-right: 14px !important; }
    /* страховка от горизонтальной прокрутки (из-за неё контент «липнет» к краю) */
    .ss-page { overflow-x: hidden; }
    /* вертикальные отступы секций */
    .ss-page [style*="padding:96px 0"],
    .ss-page [style*="padding:90px 0"],
    .ss-page [style*="padding:88px 0"],
    .ss-page [style*="padding:80px 0"],
    .ss-page [style*="padding:64px 0"] { padding-top: 46px !important; padding-bottom: 46px !important; }
    /* любые grid → одна колонка */
    .ss-page [style*="display:grid"] { grid-template-columns: 1fr !important; gap: 16px !important; }
    /* цифры компании оставляем в 2 столбца */
    .ss-page [style*="grid-template-columns:repeat(4"] { grid-template-columns: 1fr 1fr !important; }
    /* крупные flex-блоки (квиз, финальный CTA) — в колонку */
    .ss-page [style*="display:flex"][style*="justify-content:space-between"] { flex-direction: column !important; align-items: stretch !important; }
    /* заголовки и крупные размеры */
    .ss-page h1 { font-size: 26px !important; line-height: 1.2 !important; }
    .ss-page h2 { font-size: 22px !important; line-height: 1.22 !important; }
    .ss-page h3 { font-size: 18px !important; }
    .ss-page [style*=" 76px/"] { font-size: 44px !important; }
    .ss-page [style*=" 64px/"] { font-size: 40px !important; }
    .ss-page [style*=" 56px/"] { font-size: 38px !important; }
    .ss-page [style*=" 44px/"] { font-size: 30px !important; }
    .ss-page [style*=" 42px/"] { font-size: 28px !important; }
    .ss-page [style*=" 40px/"] { font-size: 27px !important; }
    /* большие внутренние паддинги блоков */
    .ss-page [style*="padding:60px 64px"] { padding: 28px 20px !important; }
    .ss-page [style*="padding:44px 46px"] { padding: 26px 20px !important; }
    .ss-page [style*="padding:42px 48px"] { padding: 24px 20px !important; }
    .ss-page [style*="padding:40px 42px"],
    .ss-page [style*="padding:38px 40px"],
    .ss-page [style*="padding:36px 38px"],
    .ss-page [style*="padding:34px 38px"],
    .ss-page [style*="padding:34px 32px"] { padding: 24px 20px !important; }
    /* высокие картинки в 2-колоночных блоках */
    .ss-page [style*="height:480px"],
    .ss-page [style*="height:440px"] { height: 260px !important; }
    /* герой главной — снять фикс.высоту */
    .ss-page #top { height: auto !important; min-height: 0 !important; }
    /* Виджет мессенджеров (EngageBox box 2) — опускаем ниже, но выше кнопки
       прокрутки .sp-scroll-up (bottom:60px, высота 36px → занимает низ до ~96px).
       .eb-2 = .eb-inst (фикс. флекс на весь экран), низ задаём через align-items+padding. */
    .eb-2 { align-items: flex-end !important; padding-bottom: 120px !important; }
}