/* Price calculator */
.price-calculator {
    display: flex;
    flex-direction: column;
    background: var(--price-bg);
    border-radius: 1rem;
    padding: 1rem;
    margin: 1rem 0;
    box-shadow: var(--shadow);
    min-width: min-content;
}
.calculator-form {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2rem;
    min-width: min-content;
}
.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: center;
}
.form-row label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
/* .form-row select, .form-row input[type="number"] { */
.form-row select {
    padding: 0.4rem;
    border-radius: 0.5rem;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
}
.select-product {
    width: var(--product-select-width);
    overflow: hidden;
} 
.number-input {
    display: flex;
    padding: 0.4rem;
    border-radius: 0.5rem;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
}
.number-input input {
    display: block;
    text-align: right;
    border: none;
    outline: none;               /* убирает обводку при фокусе (если нужна) */
    box-shadow: none;            /* убирает возможные тени */
    -webkit-appearance: none;
    appearance: none;
    background: var(--bg);
    color: var(--text);
    padding-right: 0.5rem;
}
.btn-minus, .btn-plus {
    background: var(--bg);
    color: var(--text);
    border: none;          /* убирает стандартную рамку */
    background: none;      /* убирает фон (если не нужен) */
    outline: none;         /* убирает обводку при фокусе (клике) */
    box-shadow: none;      /* убирает возможные тени */
    cursor: pointer;       /* оставляет указатель, чтобы было понятно, что кнопка */
}


.features-panel {
    background: var(--specs-bg);
    padding: 1rem;
    border-radius: 0.75rem;
    margin-bottom: 1.5rem;
}
.features-panel h3 {
    margin-top: 0;
}
.features-panel ul {
    list-style: disc;
    padding-left: 1.5rem;
}
.price-result {
    display: flex;
    flex-direction: column;
    width: var(--price-result-width);
    min-width: min-content;
    background: var(--chapter-dark-bg);
    color: var(--chapter-dark); 
    padding: 1rem;
    border-radius: 0.75rem;
}
.price-line {
    display: grid;
    grid-template-columns: 3fr 1fr 0.2fr;
    justify-content: space-between;
    align-items: stretch;
    flex-wrap: wrap;
    margin: 0.5rem 0;
    column-gap: 0;
}
.price-line-sum {
    display: block;
    text-align: right;
    margin-right: 0.1rem;
    margin-left: 0.5rem;
    text-wrap: nowrap;
}
.price-line.total {
    display: grid;
    grid-template-columns: 3fr 1fr 0.2fr;
    font-size: 1.1rem;
    /* border-top: 1px solid var(--border); */
    padding-top: 0.5rem;
    margin-top: 0.5rem;
    text-wrap: wrap;
}
.discount-note, .price-validity {
    font-size: 0.8rem;
    margin-top: 1rem;
    text-wrap: nowrap;
}

.features-comparison {
    overflow-x: auto;
    margin: 2rem 0;
}
.comparison-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
}
.comparison-table th,
.comparison-table td {
    border: 1px solid var(--border);
    padding: 0.75rem;
    text-align: center;
    vertical-align: middle;
}
.comparison-table th {
    background-color: var(--specs-bg);
    font-weight: bold;
}
.comparison-table .feature-name {
    text-align: left;
    font-weight: normal;
    background-color: var(--bg);
}
.comparison-table .feature-cell {
    font-size: 1.2rem;
}
.comparison-row {
    display: contents;
}
.comparison-row > div {
    padding: 0.75rem;
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
}
.comparison-row.header > div {
    font-weight: bold;
    background: var(--specs-bg);
    text-align: center;
}
.feature-name {
    font-weight: normal;
    background: var(--bg);
}
.feature-cell {
    text-align: center;
}
.variant-header {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

/* Скрываем стандартные кнопки у number */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Для Firefox */
input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/*
    compare-table
        compare-table-feature-column compare-table-product-column [compare-table-product-column] ...
*/        
.compare-table {
    display: flex;
    flex-direction: row;
}
.compare-table-feature-column {
    display: flex;
    flex-direction: column;
}
.compare-table-product-column {
    display: flex;
    flex-direction: column;
}


/* Контейнер таблицы сравнения */
.features-comparison {
    margin: 2rem 0;
    overflow-x: auto;
}

/* Сетка: первая колонка фиксированной ширины, остальные 4 колонки равномерно */
.comparison-grid {
    display: grid;
    grid-template-columns: 1.5fr repeat(4, 1fr);
    background: var(--price-bg);
    gap: 0px;
    max-width: 100%;
    min-width: min-content;
    /* background-color: var(--border); */
    /* border: 1px solid var(--border); */
    font-size: 80%;
    border: 0px;
    position: relative;
}

/* Общие стили для заголовков и ячеек */
.grid-header,
.grid-row {
    background: var(--price-bg);
    font-size: var(--price-font-size);
    padding: 0.5rem 0.15rem 0.5rem 0.15rem;
    position: relative;
}
.grid-header {
    overflow-wrap: anywhere;
}
/* Заголовки вариантов (продукт + редакция) */
.variant-header {
    text-align: center;
    font-weight: normal;
}
.feature-name-header {
    font-weight: normal;
    font-size: var(--price-font-size);
}
/* Стили для первой колонки (названия фич) */
.feature-name {
    text-align: left;
    font-weight: normal;
    font-size: var(--price-font-size);
    /* background-color: var(--bg); */
}



/* Ячейки с галочками */
.feature-cell {
    text-align: center;
    font-size: 1.2rem;
}

/* Подсветка выбранной колонки – общая рамка (тень) без изменения фона */
.highlighted {
    /* box-shadow: 0 0 0 0px var(--border);  */
    background-color: var(--chapter-dark-bg);
    color: var(--chapter-dark);
    z-index: 2;
}
/* Закругление для первой ячейки колонки (верхние углы) */
.highlighted.first-in-column {
    border-top-left-radius: 0.75rem;
    border-top-right-radius: 0.75rem;
}

/* Закругление для последней ячейки колонки (нижние углы) */
.highlighted.last-in-column {
    border-bottom-left-radius: 0.75rem;
    border-bottom-right-radius: 0.75rem;
}

.check-icon,
.cross-icon {
    width: 1.6rem;
    height: 1.6rem;
    display: inline-block;
    vertical-align: middle;
}
.highlighted .check-icon path {
    stroke: lightgreen; /* или другой цвет */
}
.highlighted .cross-icon path {
    stroke: lightgray; /* или другой цвет */
}
.comparison-grid {
    user-select: none; /* запрещает выделение текста */
}