/* =============================================
   НАСТРОЙКИ ФОНА И ВЫСОТЫ
   ============================================= */
:root {
    /* Пропорции картинки (JS перезапишет автоматически) */
    --bg-aspect-pc: 1920 / 1161;
    --bg-aspect-pc-active: 1920 / 742;  /* ~75.7% от оригинала */
    
    /* === УПРАВЛЕНИЕ ВЫСОТОЙ ФОНА НА ПК === */
    --bg-min-height-pc: 720px;          /* минимум в обычном состоянии */
    --bg-max-height-pc: 800px;         /* максимум в обычном состоянии — всё что выше обрезается снизу */
    
    --bg-min-height-pc-active: 700px;   /* минимум когда матрица выбрана */
    --bg-max-height-pc-active: 830px;   /* максимум когда матрица выбрана — всё что выше обрезается снизу */
    
    /* Мобильные высоты оставляем фиксированными */
    --bg-height-mob-full: 100%;
    --bg-height-mob-active: 100%;
    
    /* ИКОНКИ ДЛЯ 4-Х МАТРИЦ — ПО УМОЛЧАНИЮ (неактивные) */
    --icon-m-1: url(/local/templates/main/img/icon-personal.png);
    --icon-m-2: url(/local/templates/main/img/icon-finance.png);
    --icon-m-3: url(/local/templates/main/img/icon-child.png);
    --icon-m-4: url(/local/templates/main/img/icon-compat.png);
    
    /* ИКОНКИ ДЛЯ 4-Х МАТРИЦ — АКТИВНЫЕ */
    --icon-m-1-active: url(/local/templates/main/img/icon-personala.png);
    --icon-m-2-active: url(/local/templates/main/img/icon-financea.png);
    --icon-m-3-active: url(/local/templates/main/img/icon-childa.png);
    --icon-m-4-active: url(/local/templates/main/img/icon-compata.png);
    
    /* Фоновые картинки */
    --bg-img-pc: url(/local/templates/main/img/bg-im.png) center top / cover no-repeat;
    --bg-img-mob: url(/local/templates/main/img/bg-im.png) center top / cover no-repeat;
    --bg-img: var(--bg-img-pc);
}

/* Переключаем на мобильную картинку */
@media (max-width: 992px) {
    :root {
        --bg-img: var(--bg-img-mob);
    }
}

/* ===== ФОНОВЫЙ БЛОК ===== */
#mform {
    position: relative !important;
    overflow: hidden !important;        /* ОБРЕЗКА снизу по max-height */
    margin-top: -92px !important;       /* Под шапку */
    z-index: 1 !important;
    
    width: 100%;
    aspect-ratio: var(--bg-aspect-pc);
    min-height: var(--bg-min-height-pc);
    max-height: var(--bg-max-height-pc);
    
    transition: aspect-ratio 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                min-height 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Состояние: матрица выбрана (меньшая высота) */
#mform.matrix-selected {
    aspect-ratio: var(--bg-aspect-pc-active);
    min-height: var(--bg-min-height-pc-active);
    max-height: var(--bg-max-height-pc-active);
}

/* Сама фоновая картинка — растягивается на всю высоту блока */
#mform::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: none;
    height: 100%;
    background: var(--bg-img);
    /*opacity: 0.4;*/
    mix-blend-mode: hard-light;
    z-index: 0;
}

/* Верхний градиент (Белый -> Прозрачный) — на всю высоту блока */
#mform::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background: linear-gradient(180deg, #F1F1EF 0%, rgba(241, 241, 239, 0) 100%);*/
    z-index: 1;
    pointer-events: none;
}

/* Контейнер с контентом — padding-top увеличен на 92px (раньше был на #mform) */
.new-calc-container {
    position: relative;
    z-index: 2;
    padding-top: 132px;  /* 92px компенсация под шапку + 40px оригинальный отступ */
    padding-bottom: 80px;
   /* background: radial-gradient(ellipse 50.00% 50.00% at 50.00% 100.00%, #F1F1EF 6%, rgba(241, 241, 239, 0) 100%);*/
}

/* ===== МОБИЛЬНАЯ: возвращаем фиксированные высоты ===== */
@media (max-width: 992px) {
    #mform {
        aspect-ratio: auto;
        min-height: auto;
        max-height: none;
        height: var(--bg-height-mob-full);
    }
    
    #mform.matrix-selected {
        aspect-ratio: auto;
        min-height: auto;
        max-height: none;
        height: var(--bg-height-mob-active);
    }
}

/* ===== ЗАГОЛОВКИ ===== */
.new-calc-header {
    margin-bottom: 20px;
}

.cos-h2 {
    font-family: 'Manrope', sans-serif;
    font-weight: 400 !important;
    color: #575757 !important;
    font-size: 44px !important;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.cos-subtitle {
    color: rgba(87, 87, 87, 0.75) !important;
    font-size: 18px;
    font-family: 'Manrope', sans-serif;
    font-weight: 300;
    margin-top: 0;
    margin-bottom: 0;
}

/* =============================================
   4 ГОРИЗОНТАЛЬНЫЕ КАРТОЧКИ (FIGMA)
   ============================================= */
.calc-types-row {
    display: flex !important;
    gap: 20px;
    margin-bottom: 24px;
}

.calc-type-col {
    flex: 0 0 295px;
}

.var-matrica {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    
    width: 100% !important;
    height: auto !important;
    min-height: 91px;
    padding: 8px 8px 8px 24px !important;
    
    border-radius: 12px !important;
    border: none !important;
    
    cursor: pointer;
    background: rgba(35, 0, 101, 0.18) !important;
    box-shadow: 0px 0px 17px rgba(39, 0, 50, 0.10);
    backdrop-filter: blur(7px);
    transition: all 0.3s ease;
}

/* Скрываем старые картинки, если они остались в HTML */
.var-matrica-img { display: none !important; }

/* Превьюшка (Квадратик справа) */
.var-matrica-thumb {
    width: 75px;
    height: 75px;
    flex-shrink: 0;
    border-radius: 4px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent; 
}

/* Иконки по умолчанию (неактивные) */
.thumb-personal { background-image: var(--icon-m-1); }
.thumb-finance { background-image: var(--icon-m-2); }
.thumb-child { background-image: var(--icon-m-3); }
.thumb-compat { background-image: var(--icon-m-4); }

/* Иконки активной карточки */
.var-matrica-active .thumb-personal { background-image: var(--icon-m-1-active); }
.var-matrica-active .thumb-finance { background-image: var(--icon-m-2-active); }
.var-matrica-active .thumb-child { background-image: var(--icon-m-3-active); }
.var-matrica-active .thumb-compat { background-image: var(--icon-m-4-active); }

/* Текст карточки */
.var-matrica-text {
    text-align: left;
    color: white !important;
    font-size: 22px;
    font-family: 'Manrope', sans-serif;
    font-weight: 500;
    line-height: 1.2;
    margin: 0;
}

/* Активная карточка */
.var-matrica-active {
    background: linear-gradient(45deg, #9378FB 0%, #C0DDFA 100%) !important;
    box-shadow: 0px 0px 17px rgba(39, 0, 50, 0.08);
}

.var-matrica:hover:not(.var-matrica-active) {
    transform: translateY(-2px);
}

/* =============================================
   ФОРМА (СТЕКЛЯННАЯ ПЛАШКА ПО FIGMA)
   ============================================= */
.var-matrica-form { 
    background: rgba(35, 0, 101, 0.45) !important;
    border-radius: 12px !important;
    padding: 24px !important;
    backdrop-filter: blur(7px);
    box-shadow: 0px 0px 17px rgba(39.18, 0, 50.02, 0.25);
    border: none !important;
    min-height: auto !important;
}

.form-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Горизонтальная обертка для формы (Личная и Детская) */
.form-row-main {
    flex-direction: row !important;
    align-items: center !important;
    gap: 24px !important;
}

.form-inputs-group {
    flex: 1 1 0;
    display: flex;
    gap: 8px;
}

.form-inputs-group .form-control-cos {
    flex: 1;
}

/* ===== ИНПУТЫ ===== */
.form-control-cos {
    width: 100%;
    padding: 10px 16px;
    background: #F1F1EF !important;
    border: none !important;
    border-radius: 12px !important; 
    height: 56px;
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    font-weight: 300;
    color: rgba(54.60, 0, 105.68, 0.80) !important;
    transition: all 0.3s ease;
    box-sizing: border-box;
    margin: 0 !important;
}

.form-control-cos:focus {
    outline: none !important;
    box-shadow: none !important;
    background: #e6e6e4 !important;
}

.form-control-cos::placeholder {
    color: rgba(54.60, 0, 105.68, 0.50);
}

/* Два инпута в ряд (Для совместимости) */
.form-row-dual {
    display: flex;
    gap: 8px;
}
.form-row-dual .form-control-cos {
    flex: 1;
}

/* ===== ПЕРЕКЛЮЧАТЕЛИ ПОЛА (LC SWITCH ОБНОВЛЕН) ===== */
.form-row-gender {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
    flex-wrap: nowrap;
}

.gender-label {
    color: #F1F1EF !important;
    font-size: 18px;
    font-family: 'Manrope', sans-serif;
    font-weight: 400;
    margin: 0 !important;
    white-space: nowrap;
}

.gender-label-wrap {
    display: inline-flex !important;
    align-items: center;
    cursor: pointer;
    gap: 8px;
    white-space: nowrap;
}

.gender-label-wrap span {
    color: #F1F1EF !important;
    font-size: 18px;
    font-family: 'Manrope', sans-serif;
    font-weight: 400;
    margin: 0 !important;
}

/* Настройки плагина lc_switch под новые цвета */
.lcs_wrap {
    height: 32px !important;
    width: 56px !important;
    display: inline-block !important;
    vertical-align: middle;
}
.lcs_wrap input { display: none !important; }

.lcs_switch {
    display: inline-block !important;
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 70px !important;
    background: #F1F1EF !important;
    overflow: hidden !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: none !important;
}

.lcs_label { display: none !important; }

.lcs_cursor {
    display: inline-block !important;
    position: absolute !important;
    top: 50% !important;
    margin-top: -12px !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 100% !important;
    background: linear-gradient(45deg, #9378FB 0%, #C0DDFA 100%) !important;
    box-shadow: none !important;
    z-index: 10 !important;
    transition: all 0.3s ease !important;
    left: 4px !important;
}

/* Состояние ON (Активный - Женский) */
.lcs_switch.lcs_on {
    background: linear-gradient(45deg, #9378FB 0%, #C0DDFA 100%) !important;
}
.lcs_switch.lcs_on .lcs_cursor {
    left: 28px !important;
    background: #F1F1EF !important;
}

/* ===== КНОПКА РАССЧИТАТЬ ===== */
.swiper_all_btn_1 {
    height: 56px;
    padding: 10px 32px;
    margin: 0 !important; 
    background: linear-gradient(45deg, #9378FB 0%, #C0DDFA 100%) !important;
    border: none;
    border-radius: 12px !important;
    cursor: pointer;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #fff !important;
    text-transform: uppercase;
    text-decoration: none !important;
    transition: all 0.3s ease;
    white-space: nowrap;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.swiper_all_btn_1:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(147, 120, 251, 0.4);
    color: #fff !important;
}

/* =============================================
   МОБИЛЬНЫЕ КАРТОЧКИ
   ============================================= */
.desctop-hidden {
    display: none !important;
}

/* Горизонтальная карточка: текст слева, иконка справа */
.mob-var-matrica {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    
    background: rgba(35, 0, 101, 0.18);
    border-radius: 12px;
    padding: 8px 5px 8px 7px !important;
    text-align: left;
    min-height: 70px;
    transition: all 0.3s ease;
    backdrop-filter: blur(7px);
    border: 1px solid rgba(255,255,255,0.1);
    gap: 3px;
}

/* Иконка в мобильной карточке — справа */
.mob-var-matrica::before {
    content: '';
    display: block;
    width: 48px;
    height: 48px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
    order: 2; /* перемещаем в конец (справа) */
}

/* Текст — слева, сжимается и переносится на 2 строки */
.mob-var-matrica span {
    order: 1;
    flex: 1 1 0;
    min-width: 0; /* обязательно для flex-shrink */
    font-family: 'Manrope', sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: white;
    text-align: left;
    line-height: 1.3;
    word-break: break-word;
}

/* Привязка иконок к конкретным матрицам по data-id */
.mob-var-matrica[data-id="1"]::before { background-image: var(--icon-m-1); }
.mob-var-matrica[data-id="2"]::before { background-image: var(--icon-m-4); } /* Совместимость = icon-compat */
.mob-var-matrica[data-id="3"]::before { background-image: var(--icon-m-3); }
.mob-var-matrica[data-id="4"]::before { background-image: var(--icon-m-2); }      /* Финансовая (без data-id) */

/* Активные иконки при выборе матрицы */
.mob-var-matrica-active[data-id="1"]::before { background-image: var(--icon-m-1-active); }
.mob-var-matrica-active[data-id="2"]::before { background-image: var(--icon-m-4-active); }
.mob-var-matrica-active[data-id="3"]::before { background-image: var(--icon-m-3-active); }

.mob-var-matrica:hover {
    transform: translateY(-2px);
}

.mob-var-matrica-active {
    background: linear-gradient(45deg, #9378FB 0%, #C0DDFA 100%) !important;
    border: none;
}

/* =============================================
   АДАПТИВ
   ============================================= */
@media (max-width: 1200px) {
    .calc-type-col {
        flex: 0 0 calc(50% - 10px);
        max-width: calc(50% - 10px);
    }
}

@media (max-width: 992px) {
    /* Показываем мобильные карточки */
    .desctop-hidden {
        display: flex !important;
    }
    .calc-types-row {
        display: none !important;
    }
    
    /* Форма становится вертикальной */
    .form-row-main {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    
    .form-inputs-group {
        flex-direction: column;
    }
    
    .form-row-gender {
       /* flex-wrap: wrap;*/
    }
    
    .swiper_all_btn_1 {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
}

@media (max-width: 576px) {
    #mform {
        margin-top: -72px !important; /* Под мобильную шапку */
    }
	
	
    
    .new-calc-container {
        padding-top: 112px; /* 72px + 40px */
        padding-bottom: 40px;
    }
    
    .cos-h2 {
        font-size: 32px !important;
    }
    
    .cos-subtitle {
        font-size: 18px !important;
    }
    
    .swiper_all_btn_1 {
        height: 50px !important;
        font-size: 18px !important;
    }
    
    .form-control-cos {
        height: 50px !important;
        font-size: 18px !important;
    }
    
    .var-matrica-form {
        padding: 16px !important;
    }
	
	.gender-label-wrap span {
    color: #F1F1EF !important;
    font-size: 15px;
    font-family: 'Manrope', sans-serif;
    font-weight: 400;
    margin: 0 !important;
}

.lcs_wrap {
  height: 30px !important;
  width: 54px !important;
  display: inline-block !important;
  vertical-align: middle;
}

.gender-label{font-size:15px;}
.form-row-gender {gap:10px;}

}


/* ===== ПЛАНШЕТЫ/УЗКИЕ ЭКРАНЫ: разрешаем фону растягиваться, чтобы форма не обрезалась ===== */
@media (max-width: 1800px) {
    #mform {
        aspect-ratio: auto !important;
        min-height: auto !important;
        max-height: none !important;
        height: var(--bg-height-mob-full) !important;
    }
    
    #mform.matrix-selected {
        aspect-ratio: auto !important;
        min-height: auto !important;
        max-height: none !important;
        height: var(--bg-height-mob-active) !important;
    }
}