/* =========================================================
   RATIO BLOCK — CLEAN + ALIGNED VERSION
   ========================================================= */

/* Главная обёртка — две колонки  */
.vnr-ratio-layout{
    display: grid;
    grid-template-columns: 1fr 1fr;   /* ← 50 / 50 */
    gap: 40px;
    align-items: start;
}

/* Левая колонка: единый вертикальный ритм */
.vnr-ratio-main{
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Заголовки в обеих колонках: убираем возможные верхние отступы */
.vnr-ratio-main .vnr-h3,
.vnr-ratio-presets .vnr-h3{
    margin-top: 0;
}

/* Основные 5 элементов в одну линию */
.vnr-grid-main{
    display: grid;
    grid-template-columns: repeat(5, auto);
    gap: 24px;
    align-items: center;

    justify-content: start;
    width: fit-content;

    margin-bottom: 10px; /* было 30px — слишком большой провал */
}

/* Лейбл: символ + поле */
.vnr-grid-main label{
    display: grid;
    grid-template-columns: 28px 64px;
    align-items: center;
    gap: 6px;
    margin: 0;
}

/* Поля ввода */
.vnr-grid-main input[type="number"]{
    width: 64px;
    box-sizing: border-box;
}

/* =========================================================
   PRESETS (Классические варианты) — правая колонка
   ========================================================= */

.vnr-ratio-presets{
    display: flex;
    flex-direction: column;
    gap: 12px;        /* синхронизируем с левой колонкой */
    padding-left: 0;  /* убираем сдвиг вправо/влево внутри колонки */
    min-width: 560px; /* стабильная геометрия (подстрой 520–600) */
    max-width: 100%;
}

/* Заголовок правой колонки (если используешь отдельный div) */
.vnr-presets-header{
    font-size: 14px;
    font-weight: 600;
}

/* 4 кнопки в ряд */
.vnr-presets-cards{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

/* Карточки фаз — компактнее и ровнее */
.vnr-phase-card{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;

    min-height: 48px;     /* было 64px */
    padding: 8px 10px;    /* было 12px 14px */

    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;

    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.vnr-phase-card:hover{
    border-color: #9acfa3;
}

/* Иконка — чуть меньше, чтобы не раздувала высоту карточки */
.vnr-phase-icon{
    width: 22px;      /* было 34px */
    height: 22px;     /* было 34px */
    flex-shrink: 0;
    color: #9acfa3;
}

.vnr-phase-icon svg{
    width: 100%;
    height: 100%;
    display: block;
}

/* Текст */
.vnr-phase-title{
    font-size: 13px;  /* было 14px */
    font-weight: 500;
    line-height: 1.2;
}

/* Активная фаза */
.vnr-phase-card.active,
.vnr-phase-card.is-active{
    background: #f4fbf5;
    border-color: #6fbf73;
}

.vnr-phase-card.active .vnr-phase-icon,
.vnr-phase-card.is-active .vnr-phase-icon{
    color: #4caf50;
}

/* =========================================================
   PPM LINE STYLE (под кнопками)
   ========================================================= */

.vnr-ratio-ppm{
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid #e3e6ea;
}

.vnr-ppm-title{
    font-size: 12px;
    margin-bottom: 6px;
    opacity: 0.75;
}

.vnr-ratio-ppm-line{
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;  /* чуть компактнее */
    font-size: 13px;
}

.vnr-ratio-ppm-line > span{
    white-space: nowrap;
}

.vnr-ratio-ppm-line .vnr-label{
    margin-right: 4px;
}

.vnr-ratio-ppm-line .vnr-value{
    font-weight: 600;
}

/* =========================================================
   УСТАРЕВШЕЕ — УБРАТЬ, ЧТОБЫ НЕ КОНФЛИКТОВАЛО
   (если реально не используется в HTML)
   ========================================================= */

/*
.vnr-ratio-left{ ... }        // не нужно, если нет в разметке
.vnr-presets-list{ ... }      // у тебя используется .vnr-presets-cards
.vnr-presets-list button{ ... }
*/
/* =====================================================
   VNR — единый текст строк удобрений и микро
   ===================================================== */

.vnr-fert-name,
.vnr-micro-option{
    font-family: inherit;     /* берём шрифт сайта */
    font-size: 14px;          /* единый размер */
    font-weight: 500;         /* аккуратный средний */
    line-height: 1.4;
    color: #1f2937;           /* нейтральный тёмный */
}
/* =========================================================
   RESPONSIVE — VIKTORY RATIO BLOCK
   ========================================================= */

/* Планшет и ниже */
@media (max-width: 1024px){

    .vnr-ratio-layout{
        grid-template-columns: 1fr; /* одна колонка */
        gap: 28px;
    }

    .vnr-ratio-presets{
        min-width: unset;  /* убираем фиксированную ширину */
        width: 100%;
    }
}

/* Мобильные — кнопки фаз компактнее */
@media (max-width: 640px){

    .vnr-presets-cards{
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .vnr-phase-card{
        min-height: 44px;
        padding: 8px 10px;
    }

    .vnr-phase-icon{
        width: 20px;
        height: 20px;
    }
}

/* Очень узкие экраны */
@media (max-width: 420px){

    .vnr-presets-cards{
        grid-template-columns: 1fr;
    }

    .vnr-grid-main{
        grid-template-columns: repeat(2, auto);
        row-gap: 10px;
    }
}
/* =====================================================
   VNR — БЛОК УДОБРЕНИЙ (FINAL STABLE)
   ===================================================== */

/* ---------- Группа строк (вертикальные интервалы) ---------- */
.vnr-fert-group{
    display: grid;
    row-gap: 10px;
}

/* ---------- Строка удобрения ---------- */
/* 7 колонок:
   1 — чекбокс
   2 — название
   3 — поле 1
   4 — поле 2
   5 — поле 3 / spacer
   6 — количество (readonly)
   7 — производитель (note) */
.vnr-fert-row{
    display: grid;
    grid-template-columns: 28px 220px 140px 140px 140px 140px 280px;
    gap: 12px;
    align-items: center;
}
/* Количество */
.vnr-fert-qty{
    display: block;
    min-width: 0;
}

.vnr-fert-qty .vnr-amount{
    width: 100%;
}
/* Поле количества (readonly результат расчёта) */
.vnr-amount{
    background:#f3f4f6;
    font-weight:500;
    cursor:default;
}
/* ---------- Чекбокс ---------- */
.vnr-fert-row .vnr-enable{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}

/* ---------- Название удобрения ---------- */
.vnr-fert-name{
    display: block;
    white-space: nowrap;
}

/* ---------- Блок подпись + число ---------- */
.vnr-fert-row label{
    display: grid;
    grid-template-columns: 44px 78px;
    gap: 8px;
    align-items: center;
    margin: 0;
    min-width: 0;
}

/* Подписи N / CaO / K₂O ... */
.vnr-fert-row .vnr-label{
    width: 44px;
    text-align: right;
    font-size: 12px;
    opacity: 0.9;
}

/* ---------- Унифицированные инпуты ---------- */
.vnr-fertilizers input.vnr-input{
    box-sizing: border-box;
    height: 38px;
    padding: 0 10px;
    font-size: 14px;
}

/* Числовые поля фиксированной ширины */
.vnr-fert-row input[type="number"].vnr-input{
    width: 78px;
    appearance: textfield;
}

/* ---------- Поле "Название / производитель" ---------- */
.vnr-fert-note{
    width: 100%;
}

/* ---------- Пустой слот (если нет 3-го поля) ---------- */
.vnr-fert-spacer{
    display: block;
    height: 1px;
}
.vnr-fert-qty{
    display:grid;
    grid-template-columns:44px 1fr;
    gap:8px;
    align-items:center;
    min-width:0;
}

.vnr-fert-qty .vnr-amount{
    width:100%;
    background:#f3f4f6;
    font-weight:500;
    text-align:right;
}
/* =====================================================
   АДАПТИВ
   ===================================================== */
@media (max-width: 1100px){
    .vnr-fert-row{
        grid-template-columns: 28px 1fr 140px 140px;
    }

    /* Производитель вниз */
    .vnr-fert-note{
        grid-column: 2 / -1;
    }

    /* Количество вниз (в одну строку с note или отдельной — решаем шириной ниже) */
    .vnr-fert-qty{
        grid-column: 2 / -1;
    }
}
@media (max-width: 640px){
    .vnr-fert-row{
        grid-template-columns: 28px 1fr;
    }

    /* Все поля (label-элементы) и spacer — на всю ширину под названием */
    .vnr-fert-row label,
    .vnr-fert-spacer{
        grid-column: 2 / -1;
    }

    .vnr-fert-qty,
    .vnr-fert-note{
        grid-column: 2 / -1;
    }

    .vnr-amount{
        width: 100%;
    }
}
/* =====================================================
   VNR — ЛОКАЛЬНЫЙ RESET ДЛЯ УДОБРЕНИЙ
   ===================================================== */

/* Полностью переопределяем инпуты внутри блока удобрений */
.vnr-fertilizers input{
    min-height: 0;
    height: auto;
    line-height: normal;
    margin: 0;
    font: inherit;
}

.vnr-fertilizers input.vnr-input{
    box-sizing: border-box;
    height: 33px;
    padding: 0 10px;
    font-size: 14px;

    color: #2d3748;          /* основной цвет текста */
    background: #ffffff;     /* если тема красит фон */
    border: 1px solid #d6dbe1;
    border-radius: 6px;
}

/* Placeholder отдельно */
.vnr-fertilizers input.vnr-input::placeholder{
    color: #9aa3ad;          /* мягкий серый */
    opacity: 1;              /* чтобы тема не затемняла */
}

/* Числовые */
.vnr-fertilizers input[type="number"].vnr-input{
    width: 78px;
    appearance: textfield;
}

/* Производитель */
.vnr-fert-note{
    width: 100%;
}
/* =====================================================
   VNR — БЛОК ПОДСКАЗКИ (DETAILS)
   ===================================================== */

.vnr-group .vnr-fert-info{
    margin-top: 6px;
    padding: 8px 16px;
    background: #f6f8fa91;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 10px;
}

/* Заголовок */
.vnr-fertilizers .vnr-fert-info summary{
    cursor: pointer;
    font-weight: 500;
    color: #1f2937;
    list-style: none;
    outline: none;
}

/* Убираем стандартный маркер */
.vnr-fertilizers .vnr-fert-info summary::-webkit-details-marker{
    display: none;
}

/* Свой треугольник */
.vnr-fertilizers .vnr-fert-info summary::before{
    content: "▶";
    display: inline-block;
    margin-right: 8px;
    font-size: 12px;
    transition: transform 0.2s ease;
}

/* При открытии поворачиваем */
.vnr-fertilizers .vnr-fert-info[open] summary::before{
    transform: rotate(90deg);
}

/* Текст внутри */
.vnr-fertilizers .vnr-fert-info p{
    margin-top: 10px;
    color: #4b5563;
    line-height: 1.5;
}
/* =========================================================
   Дополнительные соотношения (K:Ca / Ca:Mg / K:Mg + Азот)
   ========================================================= */

.vnr-balance-layout{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
}

/* Левая часть */
/* Контейнер индикаторов */
.vnr-balance-stats{
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid #e3e6ea;

    display: flex;
    flex-direction: column;   /* заголовок сверху */
    gap: 8px;
}

/* Строка индикаторов */
.vnr-balance-inline{
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
}

/* Один индикатор */
.vnr-balance-item{
    white-space: nowrap;
}

.vnr-balance-item{
    display: flex;
    gap: 6px;
    align-items: center;
}

.vnr-balance-label{
    font-weight: 600;
}

/* Правая часть — формы азота */
.vnr-nitrogen-ratio{
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-left: 20px;
    /*border-left: 1px dashed rgba(0,0,0,0.15);*/
}

.vnr-nitrogen-inputs{
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 6px;
}

.vnr-nitrogen-inputs label{
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

.vnr-nitrogen-inputs input{
    width: 64px;
    padding: 2px 6px;
    font-size: 13px;
}

/* Warning NH4 */
.vnr-warning{
    display: block;
    width: 90%;
    box-sizing: border-box;
    margin-top: 10px;
    padding: 4px 12px;
    font-size: 12px;
    line-height: 1.3;
    color: #e57614;
    background: rgba(148, 226, 148, 0.11);
    border-left: 2px solid #6fbf73;
    border-radius: 6px;
}

/* =========================================================
   Коррекция воды
   ========================================================= */
/* =========================================================
   VNR — Коррекция воды (FINAL CLEAN)
   ========================================================= */

.vnr-water-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: start;
}

.vnr-water-col{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vnr-water-col h4{
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 600;
}

/* Базовая строка: слева текст, справа поле */
.vnr-water-col > label{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin: 0;
}

/* Поля внутри колонки */
.vnr-water-col input[type="number"],
.vnr-water-col select{
    box-sizing: border-box;
}

/* Ширины полей (как у тебя, но без конфликтов) */
input[name="water[volume]"]{ width: 140px; }
input[name="water[ec]"]{ width: 80px; }
input[name="water[ph]"]{ width: 80px; }

input[name="acid[target_ph]"]{ width: 80px; }
input[name="solution[target_ec]"]{ width: 80px; }

/* =========================================================
   Анализ воды (details)
   ========================================================= */

.vnr-water-analysis{
    margin-top: 6px;
}

.vnr-water-analysis .vnr-inline{
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.vnr-water-analysis label{
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

/* =========================================================
   Разделитель
   ========================================================= */

.vnr-divider{
    margin: 14px 0;
    border: none;
    border-top: 1px solid #e5e7eb;
}

/* =========================================================
   Примечания
   ========================================================= */

.vnr-water-note{
    margin-top: 8px;
    font-size: 15px;
    color: #9c9999;
    max-width: 420px;
}

/* =========================================================
   Тип кислоты — фиксируем вправо + ширина + стрелка
   ========================================================= */

/* переопределяем только эту строку под grid */
.vnr-water-col > label.vnr-acid-type{
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 16px;
}

/* ширина селекта задаётся ЗДЕСЬ (единый источник правды) */
.vnr-acid-type .vnr-select-wrap{
    position: relative;
    width: 260px;
}

/* сам select (важно: добавь класс vnr-select в HTML) */
.vnr-acid-type .vnr-select{
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    padding-right: 36px; /* место под стрелку */
    cursor: pointer;
}

/* стрелка */
.vnr-acid-type .vnr-select-wrap::after{
    content: "";
    position: absolute;
    top: 50%;
    right: 12px;
    width: 8px;
    height: 8px;
    border-right: 2px solid #64748b;
    border-bottom: 2px solid #64748b;
    transform: translateY(-60%) rotate(45deg);
    pointer-events: none;
}
/* =====================================================
   VNR — кастомный select
   ===================================================== */

.vnr-select-wrap{
    position: relative;
    width: 100%;
}

.vnr-select{
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    padding-right: 36px; /* место под стрелку */
    cursor: pointer;
}

/* стрелка */
.vnr-select-wrap::after{
    content: "";
    position: absolute;
    top: 50%;
    right: 12px;
    width: 8px;
    height: 8px;
    border-right: 2px solid #64748b;
    border-bottom: 2px solid #64748b;
    transform: translateY(-60%) rotate(45deg);
    pointer-events: none;
}

/* =========================================================
   Адаптив
   ========================================================= */

@media (max-width: 768px){

    .vnr-ratio-layout,
    .vnr-water-grid{
        grid-template-columns: 1fr;
    }

    .vnr-ratio-presets{
        border-left: none;
        padding-left: 0;
        border-top: 1px solid #e5e7eb;
        padding-top: 10px;
    }

    .vnr-water-col > label,
    .vnr-water-analysis label{
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .vnr-water-col input[type="number"],
    .vnr-water-col select{
        width: 100%;
    }
}
.vnr-presets-cards{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

/* =====================================================
   VNR — МИКРОЭЛЕМЕНТЫ 2x3 СЕТКА
   ===================================================== */

.vnr-micro-layout{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}

.vnr-micro-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    padding-block: 10px;
}

.vnr-micro-col{
    display: grid;
    row-gap: 14px;
}

.vnr-micro-col label{
    display: grid;
    grid-template-columns: 40px 90px;
    gap: 8px;
    align-items: center;
    margin: 0;
}

.vnr-micro-col .vnr-input{
    width: 90px;
}

.vnr-micro-info{
    margin-top: 20px;
}
/* =====================================================
   VNR — Микро: коррекция в один столбик
   ===================================================== */

.vnr-micro-adjust{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vnr-micro-option{
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.vnr-micro-option input[type="radio"]{
    margin: 0;
}
/* =========================================================
   Типографика калькулятора
   ========================================================= */

.vnr-calculator .vnr-h2{
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 12px;
    color: #73b767;
}

.vnr-calculator .vnr-h3{
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 8px;
    color: #6d737a;
}
/* =========================================================
   Сброс наследуемых стилей fieldset / legend
   ========================================================= */

.vnr-calculator fieldset{
    border: 1px solid #73b7678c;   /* твоя рамка */
    border-radius: 10px;
    padding: 16px 18px 18px;
    margin: 0 0 16px;

    background: #ffffff;
}

.vnr-calculator legend{
    padding: 0 8px;
    font-size: 16px;
    font-weight: 600;
    color: #73b767;
}
/* =========================================================
   VNR — БАЗОВЫЙ UI-СЛОЙ (единый стиль)
   ========================================================= */

/* Корневой контейнер */ 
.vnr-calculator{
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color: #0f172a;
}

/* ===============================
   Обозначения элементов / лейблы
   =============================== */

.vnr-label{
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    color: #0f172a;
    white-space: nowrap;
}

/* Мелкие единицы (% и т.п.) */
.vnr-unit{
    font-size: 12px;
    color: #6b7280;
}

/* ===============================
   Поля ввода
   =============================== */

.vnr-input,
.vnr-calculator input[type="number"],
.vnr-calculator select{
    height: 33px;
    padding: 3px 6px;

    font-size: 13px;
    line-height: 1.2;
    color: #0f172a;

    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 4px;

    box-sizing: border-box;
}

/* Убираем резкие браузерные стили */


/* Фокус — аккуратный, “инструментальный” */
.vnr-input:focus,
.vnr-calculator input:focus,
.vnr-calculator select:focus{
    outline: none;
    border-color: #6fbf73;
    box-shadow: 0 0 0 1px rgba(111,191,115,0.25);
}

/* ===============================
   Вычисляемые значения
   =============================== */

.vnr-value,
.vnr-balance-value,
.vnr-micro-value{
    font-size: 13px;
    font-weight: 500;
    color: #111827;
    font-variant-numeric: tabular-nums;
}

/* ===============================
   Подписи / пояснения
   =============================== */

.vnr-note,
.vnr-calculator small{
    font-size: 12px;
    color: #6b7280;
    line-height: 1.35;
}

/* ===============================
   Заголовки внутри калькулятора
   =============================== */

.vnr-calculator .vnr-h2{
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 12px;
    color: #73b767;
}

.vnr-calculator .vnr-h3{
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 8px;
    color: #6d737a;
}

.vnr-calculator .vnr-h4{
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 6px;
    color: #374151;
}

/* ===============================
   Fieldset / Legend — нормализация
   =============================== */

.vnr-calculator fieldset{
    border: 1px solid rgba(115,183,103,0.55);
    border-radius: 10px;
    padding: 16px 18px 18px;
    margin: 0 0 16px;
    background: #ffffff;
}

.vnr-calculator legend{
    padding: 0 8px;
    font-size: 15px;
    font-weight: 600;
    color: #73b767;
}

/* ===============================
   Кнопка расчёта
   =============================== */

.vnr-btn-primary{
    padding: 8px 18px;
    font-size: 14px;
    font-weight: 600;

    color: #ffffff;
    background: #6fbf73;

    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.vnr-btn-primary:hover{
    background: #5cab64;
}
/* ===============================
   Отступы от заголовков h3
   =============================== */
.vnr-section-header{
    display: flex;
    align-items: center;
    min-height: 28px;          /* ключевое */
    margin-bottom: 12px;       /* одинаковый отступ вниз */
}

.vnr-h3{
    margin: 0;                 /* обязательно */
    font-size: 14px;
    font-weight: 600;
    color: #6d737a;
}
/* ===============================
   Кнопки с иконками
   =============================== */
.vnr-phase-card{
    min-height: 42px;      /* было 64 */
    padding: 2px 2px;    /* было 12px 14px */
    gap: 2px;             /* было 12 */
}
.vnr-phase-icon{
    width: 28px;           /* было 34 */
    height: 28px;
}
.vnr-phase-title{
    font-size: 13px;       /* было 14 */
    font-weight: 500;
}
.vnr-presets-cards{
    gap: 8px;              /* было 10 */
}

/* ===============================
   Цвет в ppm составе
   =============================== */
.vnr-ppm-ok{
    color:#2e7d32;
    font-weight:600;
}

.vnr-ppm-info{
    color:#1565c0;
    font-weight:600;
}

.vnr-ppm-warning{
    color:#ef6c00;
    font-weight:600;
}

.vnr-ppm-critical{
    color:#c62828;
    font-weight:700;
}
.vnr-ok {
    color: #2e7d32;
}

.vnr-warn {
    color: #f9a825;
}

.vnr-bad {
    color: #c62828;
}