/* /Components/Layouts/UserLayout.razor.rz.scp.css */
.site-footer[b-vz6sn9n4bz] {
    margin-top: 40px;
    border-top: 1px solid #e8e8e8;
    background: rgba(255, 255, 255, .85);
    padding: 14px 16px;
}

.site-footer-inner[b-vz6sn9n4bz] {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
    font-size: 13px;
    color: #6b6b6b;
}

.site-footer-brand[b-vz6sn9n4bz] {
    font-weight: 700;
    color: #212121;
}

.site-footer-links[b-vz6sn9n4bz] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
}

.site-footer-links a[b-vz6sn9n4bz] {
    color: #6b6b6b;
    text-decoration: none;
}

.site-footer-links a:hover[b-vz6sn9n4bz] {
    color: #1976d2;
    text-decoration: underline;
}

/* Копирайт прижимаем вправо, пока строка не переносится; после переноса
   auto-margin схлопывается и он просто встаёт слева, как остальные блоки. */
.site-footer-copy[b-vz6sn9n4bz] {
    margin-left: auto;
}

@media (max-width: 600px) {
    .site-footer-copy[b-vz6sn9n4bz] {
        margin-left: 0;
    }
}
/* /Features/Common/Scene/SceneCmpt.razor.rz.scp.css */
.scene-viewport[b-ua1h6nuccu] {
    flex: 1;
    overflow: auto;
    background: #ededed;
    padding: 12px;
    outline: none;
    touch-action: none;
}

.scene-viewport.panning[b-ua1h6nuccu] {
    cursor: grabbing;
}

.guide[b-ua1h6nuccu] {
    position: absolute;
    background: #ff4081;
    pointer-events: none;
    z-index: 9;
}

.scene-zoom[b-ua1h6nuccu] {
    position: relative;
}

.scene-content[b-ua1h6nuccu] {
    position: relative;
    transform-origin: top left;
}

.scene-canvas[b-ua1h6nuccu] {
    position: absolute;
    overflow: hidden;
    box-shadow: 0 0 0 1px #d0d0d0;
}

.scene-canvas.with-grid[b-ua1h6nuccu] {
    background-image:
        linear-gradient(to right, #e8e8e8 1px, transparent 1px),
        linear-gradient(to bottom, #e8e8e8 1px, transparent 1px);
}

.scene-object[b-ua1h6nuccu] {
    position: absolute;
    left: 0;
    top: 0;
    transform-origin: 0 0;
    user-select: none;
    -webkit-user-drag: none;
    cursor: move;
}

.scene-object.locked[b-ua1h6nuccu] {
    cursor: default;
    pointer-events: none;
}

.selection[b-ua1h6nuccu] {
    position: absolute;
    border-style: solid;
    border-color: #1976d2;
    pointer-events: none;
    z-index: 10;
}

.work-area[b-ua1h6nuccu] {
    position: absolute;
    border-style: dashed;
    border-color: #1976d2;
    box-sizing: border-box;
    pointer-events: none;
    z-index: 5;
}

/* Полоса захвата границы рабочей области: прозрачная, подсвечивается под курсором.
   Ниже выделения и ручек объекта, но выше самих объектов — иначе в границу не попасть. */
.work-area-edge[b-ua1h6nuccu] {
    position: absolute;
    z-index: 6;
    background: transparent;
    transition: background-color 0.1s;
}

.work-area-edge:hover[b-ua1h6nuccu] {
    background: rgba(25, 118, 210, 0.35);
}

.handle[b-ua1h6nuccu] {
    position: absolute;
    background: #ffffff;
    border-style: solid;
    border-color: #1976d2;
    box-sizing: border-box;
    z-index: 11;
}

.ruler[b-ua1h6nuccu] {
    position: absolute;
    background: #f0f0f0;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
    font-size: 9px;
    color: #555;
}

.ruler-h[b-ua1h6nuccu] {
    border-bottom: 1px solid #ccc;
    background-image: repeating-linear-gradient(to right, #999 0 1px, transparent 1px 10px);
    background-position: bottom;
    background-size: 100% 6px;
    background-repeat: repeat-x;
}

.ruler-v[b-ua1h6nuccu] {
    border-right: 1px solid #ccc;
    background-image: repeating-linear-gradient(to bottom, #999 0 1px, transparent 1px 10px);
    background-position: right;
    background-size: 6px 100%;
    background-repeat: repeat-y;
}

.ruler-h .ruler-label[b-ua1h6nuccu] {
    position: absolute;
    top: 1px;
    transform: translateX(2px);
}

.ruler-v .ruler-label[b-ua1h6nuccu] {
    position: absolute;
    left: 1px;
    transform: translateY(2px);
}

.ruler-corner[b-ua1h6nuccu] {
    position: absolute;
    left: 0;
    top: 0;
    background: #f0f0f0;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}
/* /Features/FrameLayout/Components/FrameLayoutEditor.razor.rz.scp.css */
.layout-editor[b-mlcrp3570s] {
    display: grid;
    grid-template-columns: 260px 1fr 300px;
    grid-template-rows: 1fr auto;
    grid-template-areas:
        "layers canvas properties"
        "footer footer footer";
    height: 82vh;
    gap: 8px;
}

.layout-panel[b-mlcrp3570s] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.layers[b-mlcrp3570s] {
    grid-area: layers;
}

.properties[b-mlcrp3570s] {
    grid-area: properties;
    overflow: hidden;
}

/* Прокручивается только список свойств выделения — блок сцены остаётся на виду. */
.properties-scroll[b-mlcrp3570s] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 10px 10px;
}

.layout-canvas[b-mlcrp3570s] {
    grid-area: canvas;
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
}

.layout-footer[b-mlcrp3570s] {
    grid-area: footer;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 4px 0;
}

.panel-head[b-mlcrp3570s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    background: #fafafa;
    border-bottom: 1px solid #e0e0e0;
}

.canvas-toolbar[b-mlcrp3570s] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    background: #fafafa;
    border-bottom: 1px solid #e0e0e0;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.frame-name[b-mlcrp3570s] {
    font-weight: 500;
    color: #444;
}

.zoom-label[b-mlcrp3570s] {
    min-width: 42px;
    color: #666;
}

.toolbar-spacer[b-mlcrp3570s] {
    flex: 1;
}

.layer-list[b-mlcrp3570s] {
    flex: 1;
    overflow-y: auto;
}

.layer[b-mlcrp3570s] {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px 4px 2px 2px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
}

.layer:hover[b-mlcrp3570s] {
    background: #f7f9fc;
}

.layer.selected[b-mlcrp3570s] {
    background: #e3f2fd;
}

.layer.locked[b-mlcrp3570s] {
    opacity: 0.65;
    cursor: default;
}

.layer-title[b-mlcrp3570s] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.layer-name[b-mlcrp3570s] {
    font-size: 0.82rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.layer-sub[b-mlcrp3570s] {
    font-size: 0.68rem;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.section-label[b-mlcrp3570s] {
    display: block;
    color: #888;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 8px 0 2px;
}

.align-buttons[b-mlcrp3570s] {
    flex-wrap: wrap;
}

.advanced[b-mlcrp3570s] {
    margin-top: 10px;
}

/* Прибито к низу панели свойств: относится ко всей сцене, а не к выделенному объекту,
   и должно быть доступно без прокрутки при любом размере списка свойств. */
.scene-props[b-mlcrp3570s] {
    flex-shrink: 0;
    padding: 0 10px 8px;
    border-top: 1px solid #eee;
    background: #fff;
    max-height: 60%;
    overflow-y: auto;
}

.hint[b-mlcrp3570s] {
    display: block;
    color: #aaa;
    margin-top: 2px;
}

.empty-properties[b-mlcrp3570s] {
    padding: 16px 10px;
    color: #888;
}

.dirty[b-mlcrp3570s] {
    color: #ed6c02;
    font-weight: 500;
}

.clean[b-mlcrp3570s] {
    color: #888;
}
/* /Features/Main/Components/DoorCheckContent.razor.rz.scp.css */
.check-empty[b-qcyi9wnxpy] {
    font-size: 14px;
    color: #888;
    margin: 0;
}

.meta-row[b-qcyi9wnxpy] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 14px;
    margin-bottom: 8px;
}

.meta-row .label[b-qcyi9wnxpy] {
    color: #777;
}

.meta-row .value[b-qcyi9wnxpy] {
    color: #222;
    font-weight: 600;
    margin-left: auto;
    text-align: right;
}

.meta-row--attr .value[b-qcyi9wnxpy] {
    font-weight: 400;
    color: #555;
}

.section-caption[b-qcyi9wnxpy] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #9a9a9a;
    margin: 18px 0 10px;
}

.line[b-qcyi9wnxpy] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 9px;
}

.line--spaced[b-qcyi9wnxpy] {
    margin-top: 12px;
}

.line-name[b-qcyi9wnxpy] {
    color: #222;
    font-size: 15px;
}

.line-note[b-qcyi9wnxpy] {
    color: #999;
    font-size: 12px;
    display: block;
}

.line-dots[b-qcyi9wnxpy] {
    flex: 1;
    border-bottom: 1px dotted #d0d0d0;
    min-width: 12px;
    transform: translateY(-4px);
}

.line-price[b-qcyi9wnxpy] {
    font-size: 15px;
    color: #222;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.line-price--free[b-qcyi9wnxpy] {
    color: #4caf50;
    font-size: 13px;
}

.line-price--discount[b-qcyi9wnxpy] {
    color: #c62828;
}

.gift[b-qcyi9wnxpy] {
    font-size: 12px;
    font-weight: 600;
    color: #2e7d32;
    background: #e8f5e9;
    border-radius: 10px;
    padding: 2px 10px;
    white-space: nowrap;
}

.total[b-qcyi9wnxpy] {
    display: flex;
    align-items: baseline;
    border-top: 1px solid #e0e0e0;
    margin-top: 18px;
    padding-top: 14px;
}

.total-label[b-qcyi9wnxpy] {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #222;
}

.total-value[b-qcyi9wnxpy] {
    margin-left: auto;
    font-size: 24px;
    font-weight: 700;
    color: #1976d2;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 480px) {
    .total-value[b-qcyi9wnxpy] {
        font-size: 20px;
    }
}
/* /Features/Main/Components/DoorReceipt.razor.rz.scp.css */
.receipt[b-n6bsv2v7vv] {
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .16));
    max-width: 420px;
    margin: 0 auto;
}

.receipt-paper[b-n6bsv2v7vv] {
    --tooth: 18px;
    --tooth-h: 9px;
    background: #fff;
    padding: 30px 26px 26px;
    /* Зубчатый край. У нижнего слоя маски обязательно add:
       intersect с пустым фоном обнулил бы всю маску. */
    mask:
        conic-gradient(from -45deg at 50% var(--tooth-h), #0000 0 90deg, #000 0) 0 0 / var(--tooth) 100%,
        conic-gradient(from 135deg at 50% calc(100% - var(--tooth-h)), #0000 0 90deg, #000 0) 0 0 / var(--tooth) 100%;
    mask-composite: intersect, add;
}

.receipt-title[b-n6bsv2v7vv] {
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #222;
    margin: 0;
}

.receipt-subtitle[b-n6bsv2v7vv] {
    text-align: center;
    font-size: 13px;
    color: #777;
    margin: 6px 0 0;
}

.rule[b-n6bsv2v7vv] {
    border: 0;
    border-top: 1px dashed #d9d9d9;
    margin: 18px 0;
}

@media (max-width: 480px) {
    .receipt-paper[b-n6bsv2v7vv] {
        padding: 26px 16px 22px;
    }
}
/* /Features/Main/Components/FinalCheckComponent.razor.rz.scp.css */
/* Тело панели повторяет фон остальных секций конфигуратора в MainSelector,
   чтобы чек читался как ещё один аккордеон, а не как отдельный блок.
   Сами строки чека стилизует DoorCheckContent. */
.check-body[b-15inlfd6rs] {
    background-color: #fafafa;
    padding: 16px 18px;
    border-bottom-left-radius: 3px;
}

.title-total[b-15inlfd6rs] {
    margin-left: 12px;
    font-weight: 700;
    color: #1976d2;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

@media (max-width: 480px) {
    .check-body[b-15inlfd6rs] {
        padding: 14px 12px;
    }
}
/* /Features/Main/Components/Images/PdfClientNameDialog.razor.rz.scp.css */
.kp-content[b-eo2rv98qy0] {
    position: relative;
}

.kp-layout[b-eo2rv98qy0] {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

/* Перекрываем всю форму, пока идёт генерация: клики по полям и по чеку
   в это время ничего не меняют, а видимая занятость честнее, чем застывшее окно. */
.kp-generating[b-eo2rv98qy0] {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: rgba(255, 255, 255, .85);
    backdrop-filter: blur(2px);
}

.kp-generating-text[b-eo2rv98qy0] {
    font-size: 17px;
    font-weight: 600;
    color: #212121;
}

.kp-generating-note[b-eo2rv98qy0] {
    font-size: 13px;
    color: #777;
}

.kp-form[b-eo2rv98qy0] {
    flex: 0 0 250px;
    padding-top: 4px;
}

/* Чек длинный, а модалка не должна вырастать за экран: прокручиваем только его.
   Отрицательные поля с компенсирующим padding — чтобы тень и зубцы не обрезались. */
.kp-receipt[b-eo2rv98qy0] {
    flex: 1 1 auto;
    min-width: 0;
    max-height: 60vh;
    overflow-y: auto;
    margin: -6px;
    padding: 6px;
}

@media (max-width: 800px) {
    .kp-layout[b-eo2rv98qy0] {
        flex-direction: column;
    }

    .kp-form[b-eo2rv98qy0] {
        flex: 0 0 auto;
        width: 100%;
    }

    .kp-receipt[b-eo2rv98qy0] {
        width: 100%;
        max-height: 45vh;
    }
}
/* /Features/Main/Components/ModelFrameSelector.razor.rz.scp.css */
.texture-group[b-umj9cozqmy] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(125px, 1fr));
    gap: 15px 10px;
}

.texture-group .texture-item[b-umj9cozqmy] {
    cursor: pointer;
    text-align: center;
    position: relative;
}

.texture-group .texture-item.active[b-umj9cozqmy] {
    cursor: default;
}

.texture-group .texture-item.active .texture-title[b-umj9cozqmy],
.texture-group .texture-item:hover .texture-title[b-umj9cozqmy] {
    color: #000;
}

.texture-group .texture-item.active .texture-image-cover[b-umj9cozqmy]:after {
    opacity: 1;
}

.texture-group .texture-image-cover[b-umj9cozqmy] {
    position: relative;
    width: 100%;
    height: 150px;
    margin: 0 auto 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    background-color: #f8f9fa;
}

.texture-group .texture-image-cover[b-umj9cozqmy]:after {
    content: '';
    opacity: 0;
    position: absolute;
    inset: -4px;
    border: 2px solid #5BC8FF;
    border-radius: 2px;
    transition: 0.1s linear opacity;
    pointer-events: none;
}

.texture-group .texture-image[b-umj9cozqmy] {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: none;
    background-repeat: no-repeat;
    background-size: cover;
    object-fit: contain;
}

.texture-group .texture-title[b-umj9cozqmy] {
    font-size: 12px;
    line-height: 12px;
    margin: 0 auto;
    color: #BFBFBF;
    max-width: 118px;
    transition: 0.1s linear color;
}

.texture-devtools[b-umj9cozqmy] {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding-top: 6px;
    color: #666;
}

@media (max-width: 768px) {
    .texture-group[b-umj9cozqmy] {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 10px;
        gap: 10px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .texture-group .texture-item[b-umj9cozqmy] {
        flex: 0 0 auto;
        min-width: 125px;
    }

    .texture-group .texture-image-cover[b-umj9cozqmy] {
        width: 100%;
        height: 150px;
    }

    .texture-group .texture-image[b-umj9cozqmy] {
        width: 100%;
        height: 100%;
    }

    .texture-group .texture-title[b-umj9cozqmy] {
        max-width: 120px;
        font-size: 11px;
        line-height: 11px;
    }
}

@media (max-width: 480px) {
    .texture-group .texture-item[b-umj9cozqmy] {
        min-width: 100px;
    }

    .texture-group .texture-image-cover[b-umj9cozqmy] {
        width: 100%;
        height: 150px;
    }

    .texture-group .texture-image[b-umj9cozqmy] {
        width: 100%;
        height: 100%;
    }

    .texture-group .texture-title[b-umj9cozqmy] {
        max-width: 100px;
        font-size: 10px;
        line-height: 10px;
    }
}
/* /Features/Main/Components/Radios/BigCardSelect.razor.rz.scp.css */
.texture-group[b-2631vzdjvq] {
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
    gap: 20px 15px;
    justify-content: space-between;
}

    .texture-group .texture-item[b-2631vzdjvq] {
        cursor: pointer;
        text-align: center;
        position: relative;
        flex: 0 0 calc(50% - 7.5px); /* 2 columns with gap */
    }

        .texture-group .texture-item.active[b-2631vzdjvq] {
            cursor: default;
        }

            .texture-group .texture-item.active .texture-title[b-2631vzdjvq],
            .texture-group .texture-item:hover .texture-title[b-2631vzdjvq] {
                color: #000;
            }

            .texture-group .texture-item.active .texture-image-cover[b-2631vzdjvq]:after {
                opacity: 1;
            }


    /* Отступ держим здесь, а не на картинке: цена и рамка выделения позиционируются
       от низа обёртки, поэтому её коробка должна совпадать с картинкой пиксель в пиксель. */
    .texture-group .texture-image-cover[b-2631vzdjvq] {
        position: relative;
        margin-bottom: 8px;
    }

        .texture-group .texture-image-cover[b-2631vzdjvq]:after {
            content: '';
            opacity: 0;
            position: absolute;
            /* box-sizing не наследуется псевдоэлементом: без этого 3px рамка
               прибавляется к height:100% и рамка выпирает за картинку. */
            box-sizing: border-box;
            height: 100%;
            width: 100%;
            left: 0;
            top: 0;
            border: 3px solid #5BC8FF;
            box-shadow: inset 0 0 0 4px #FFF;
            transition: 0.1s linear opacity;
        }

    /* display:block убирает щель под инлайновой картинкой: как inline она стоит
       на базовой линии, и снизу остаётся место под «хвосты» букв. */
    .texture-group .texture-image[b-2631vzdjvq] {
        display: block;
        height: 250px;
        border: none;
        background-repeat: no-repeat;
        background-size: contain;
        background-color: #f8f9fa;
    }

        .texture-group .texture-image .image[b-2631vzdjvq] {
            width: 100%;
            height: 100%;
            border: 1px solid #DBDBDB;
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
            background-color: #f8f9fa;
        }


    .texture-group .texture-price[b-2631vzdjvq] {
        position: absolute;
        bottom: 12px;
        left: 0;
        width: 100%;
        text-align: center;
        color: #FFF;
        text-shadow: 0 1px 4px #000000, 0 1px 4px rgba(0, 0, 0, 0.5);
        font-size: 16px;
        line-height: 16px;
        font-weight: bold;
        opacity: 0.8;
    }


    .texture-group .texture-title[b-2631vzdjvq] {
        font-size: 14px;
        line-height: 16px;
        margin: 0 auto;
        color: #BFBFBF;
        max-width: 280px;
        transition: 0.1s linear color;
        padding: 5px 0;
    }

/* Tablet responsive styles */
@media (max-width: 1024px) {
    .texture-group .texture-image[b-2631vzdjvq] {
        width: 220px;
        height: 220px;
    }

    .texture-group .texture-title[b-2631vzdjvq] {
        max-width: 200px;
        font-size: 13px;
        line-height: 15px;
    }

    .texture-group .texture-price[b-2631vzdjvq] {
        font-size: 15px;
        line-height: 15px;
        bottom: 10px;
    }
}

/* Mobile responsive styles */
@media (max-width: 768px) {
    .texture-group[b-2631vzdjvq] {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 15px;
        padding-bottom: 10px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .texture-group[b-2631vzdjvq]::-webkit-scrollbar {
        height: 4px;
    }

    .texture-group[b-2631vzdjvq]::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 2px;
    }

    .texture-group[b-2631vzdjvq]::-webkit-scrollbar-thumb {
        background: #c1c1c1;
        border-radius: 2px;
    }

    .texture-group[b-2631vzdjvq]::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
    }

    .texture-group .texture-item[b-2631vzdjvq] {
        flex: 0 0 auto;
        min-width: 250px;
    }

    .texture-group .texture-image[b-2631vzdjvq] {
        width: 250px;
        height: 250px;
        margin: 0 auto 8px;
    }

    .texture-group .texture-title[b-2631vzdjvq] {
        max-width: 250px;
        font-size: 13px;
        line-height: 15px;
    }

    .texture-group .texture-price[b-2631vzdjvq] {
        font-size: 14px;
        line-height: 14px;
        bottom: 10px;
    }
}

@media (max-width: 480px) {
    .texture-group .texture-item[b-2631vzdjvq] {
        min-width: 200px;
    }

    .texture-group .texture-image[b-2631vzdjvq] {
        width: 200px;
        height: 200px;
    }

    .texture-group .texture-title[b-2631vzdjvq] {
        max-width: 200px;
        font-size: 12px;
        line-height: 14px;
    }

    .texture-group .texture-price[b-2631vzdjvq] {
        font-size: 13px;
        line-height: 13px;
        bottom: 8px;
    }
} 
/* /Features/Main/Components/Radios/ColorDotSelect.razor.rz.scp.css */
.color-dot-group[b-xd9u5a774w] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    max-width: 100%;
}

/* Размер подобран под соседние карточки: мельче кружок выглядел приклеенным к подписи. */
.color-dot[b-xd9u5a774w] {
    width: 52px;
    height: 52px;
    padding: 3px;
    border-radius: 50%;
    border: 1px solid #DBDBDB;
    background: #fff;
    cursor: pointer;
    transition: 0.1s linear border-color, 0.1s linear box-shadow;
}

.color-dot-swatch[b-xd9u5a774w] {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
}

.color-dot:hover[b-xd9u5a774w] {
    border-color: #9E9E9E;
}

/* Выделение кольцом, а не рамкой: на круглой форме рамка съедает сам цвет. */
.color-dot.active[b-xd9u5a774w] {
    cursor: default;
    border-color: #5BC8FF;
    box-shadow: 0 0 0 2px #5BC8FF;
}

.color-dot-caption[b-xd9u5a774w] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 10px;
}

.color-dot-name[b-xd9u5a774w] {
    font-size: 13px;
    line-height: 15px;
    color: #333;
}

.color-dot-price[b-xd9u5a774w] {
    font-size: 13px;
    line-height: 15px;
    font-weight: 600;
    color: #6B6B6B;
}

@media (max-width: 480px) {
    .color-dot[b-xd9u5a774w] {
        width: 44px;
        height: 44px;
    }
}
/* /Features/Main/Components/Radios/ExtraBigCardSelect.razor.rz.scp.css */
*[b-bxqwxuctt7] {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    font-size: 100%;
    vertical-align: baseline;
    box-sizing: border-box;
    outline: none;
}

body[b-bxqwxuctt7] {
    font-family: 'Roboto', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    color: #666;
    line-height: 1.25;
}

.step[b-bxqwxuctt7] {
    width: 616px;
    margin: auto;
}

.cfg-model-wrapper[b-bxqwxuctt7] {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.cfg-model-container[b-bxqwxuctt7] {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.cfg-model[b-bxqwxuctt7] {
    position: relative;
    z-index: 30;
    opacity: 0.5;
    cursor: pointer;
    transition: 0.2s ease opacity;
}

.cfg-model:hover[b-bxqwxuctt7] {
    opacity: 0.8;
}

.cfg-model[b-bxqwxuctt7]:after {
    content: '';
    opacity: 0;
    position: absolute;
    /* Ресет * выше не достаёт до псевдоэлементов, а box-sizing не наследуется:
       без этой строки 3px рамка добавляется к height:100% и рамка торчит на 6px
       ниже карточки, из-за чего у панели появляется скролл на пустом месте. */
    box-sizing: border-box;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    border-radius: 15px;
    overflow: hidden;
    z-index: -1;
    border: 3px solid #5BC8FF;
    box-shadow: inset 0 0 0 3px #FFF;
    transition: 0.2s ease opacity, 0.2s ease z-index;
}

.cfg-model.active[b-bxqwxuctt7]:after {
    opacity: 1;
    z-index: 10;
    pointer-events: none;
}

.cfg-model.active[b-bxqwxuctt7] {
    opacity: 1;
    cursor: default;
}

.cfg-model.active:hover[b-bxqwxuctt7] {
    opacity: 1;
}

.cfg-model-inner[b-bxqwxuctt7] {
    box-shadow: inset 0 0 0 3px transparent;
    /* From 1199px: adjusted columns, gap and padding */
    grid-template-columns: 0.7fr 1fr;
    gap: 25px;
    padding: 20px;
    border-radius: 15px;
    overflow: hidden;
    position: relative;
    z-index: 1;
    display: grid;
}

.cfg-model-inner[b-bxqwxuctt7]:before {
    background-image: var(--before-bg);
    content: '';
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 15px;
    overflow: hidden;
    pointer-events: none;
}

.cfg-model-inner[b-bxqwxuctt7]:after {
    content: '';
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(10, 40, 90, 0.55) 0%, rgba(10, 60, 130, 0.30) 100%);
    border-radius: 15px;
    overflow: hidden;
    pointer-events: none;
}

.cfg-model-name[b-bxqwxuctt7] {
    font-size: 24px;
    line-height: 28px;
    color: #ffffff;
}

.cfg-model-inner > .cfg-model-name[b-bxqwxuctt7] {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cfg-tooltip[b-bxqwxuctt7] {
    /* From 1199px */
    padding: 5px 8px;
    border-radius: 3px;
    color: #000;
    font-size: 12px;
    line-height: 14px;
    font-weight: 500;
    width: fit-content;
}

.cfg-model-head[b-bxqwxuctt7] {
    font-size: 24px;
    line-height: 28px;
    margin-bottom: 20px;
    margin-top: 15px;
    padding: 0 15px;
    text-align: center;
}

@media (max-width: 480px) {
    .cfg-model-head[b-bxqwxuctt7] {
        font-size: 20px;
        line-height: 24px;
        margin-bottom: 15px;
        padding: 0 10px;
    }
}

.cfg-tooltip-blue[b-bxqwxuctt7] {
    color: #fff;
    background: linear-gradient(93.19deg, #5BC8FF 0%, #1470CC 100%);
}

.cfg-tooltip-success[b-bxqwxuctt7] {
    color: #FFF;
    background: linear-gradient(97.27deg, #30D921 0%, #1F8C15 100%);
}

.cfg-tooltip-elite[b-bxqwxuctt7] {
    background: linear-gradient(94.73deg, #FFE5AF 0%, #D69E75 100%);
}

.cfg-model-title[b-bxqwxuctt7] {
    /* From 1199px */
    margin-top: 10px;
    font-weight: 700;
    line-height: 1.2;
}

.cfg-model-cost[b-bxqwxuctt7] {
    margin-top: 2px;
    font-weight: 400;
    font-size: 90%;
    opacity: 0.5;
}

.cfg-model-info-wrapper[b-bxqwxuctt7] {
    margin: 0px;
}

.cfg-model-inner > div:not(.cfg-model-name)[b-bxqwxuctt7] {
    position: relative;
    z-index: 10;
}

/* .cfg-model-info — desktop grid hidden by default (was hidden at 1199px) */
.cfg-model-info[b-bxqwxuctt7] {
    display: none;
    grid-auto-flow: column;
    grid-template-rows: repeat(3, min-content);
    gap: 10px 18px;
    margin-top: 15px;
}

.cfg-model-info .info[b-bxqwxuctt7] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.cfg-model-info .info-value[b-bxqwxuctt7] {
    /* From 1199px */
    line-height: 20px;
    font-size: 14px;
    width: auto;
    height: auto;
    margin-right: 5px;
    font-weight: 700;
    color: #ffffff;
    display: grid;
    place-items: center;
    text-align: center;
    border-radius: 50%;
    box-sizing: border-box;
    position: relative;
    font-variant-numeric: tabular-nums;
    -moz-font-feature-settings: "tnum";
    font-feature-settings: "tnum";
    transform: translateY(-0.5px);
}

/* :after circle removed at 1199px */
.cfg-model-info .info .info-value[b-bxqwxuctt7]:after {
    content: none;
}

.cfg-model-info .info-title[b-bxqwxuctt7] {
    /* From 1199px */
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    opacity: 0.65;
    color: #ffffff;
    display: flex;
    flex-direction: column;
}

.cfg-model-info .info-descr[b-bxqwxuctt7] {
    position: absolute;
    top: 26px;
    left: 27px;
    font-size: 10px;
    line-height: 10px;
    font-weight: bold;
}

.cfg-model-info .info-title .rating-good[b-bxqwxuctt7] {
    color: #A4BF1D;
}

/* Mobile grid shown by default (was shown at 1199px) */
.cfg-model-info.cfg-model-info--mobile[b-bxqwxuctt7] {
    display: grid;
    grid-auto-flow: row;
    margin-top: 10px;
    gap: 5px;
}

@media (max-width: 989px) {
    .step[b-bxqwxuctt7] {
        width: 100%;
        padding: 0 15px;
    }

    .cfg-model-head[b-bxqwxuctt7] {
        margin-bottom: 20px;
        text-align: center;
    }

    .cfg-model-container[b-bxqwxuctt7] {
        display: flex;
        flex-direction: row;
        gap: 10px;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 15px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .cfg-model-container[b-bxqwxuctt7]::-webkit-scrollbar {
        height: 4px;
    }

    .cfg-model-container[b-bxqwxuctt7]::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 2px;
    }

    .cfg-model-container[b-bxqwxuctt7]::-webkit-scrollbar-thumb {
        background: #c1c1c1;
        border-radius: 2px;
    }

    .cfg-model-container[b-bxqwxuctt7]::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
    }

    .cfg-model[b-bxqwxuctt7] {
        min-width: 280px;
        flex: 0 0 auto;
        margin-bottom: 0;
    }

    .cfg-model-inner[b-bxqwxuctt7] {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 15px;
        height: 100%;
    }

    .cfg-tooltip[b-bxqwxuctt7] {
        padding: 1px 15px;
        display: block;
        text-align: center;
    }

    .cfg-model-cost[b-bxqwxuctt7] {
        font-size: 95%;
    }

    .cfg-model-info-wrapper[b-bxqwxuctt7] {
        display: none;
    }

    .cfg-model-info[b-bxqwxuctt7] {
        margin-top: 0;
        gap: 0;
        grid-template-rows: auto;
        grid-auto-flow: row;
    }
}

@media (max-width: 639px) {
    .cfg-model[b-bxqwxuctt7] {
        min-width: 260px;
    }

    .cfg-model-container[b-bxqwxuctt7] {
        gap: 8px;
    }
}
/* /Features/Main/Components/Radios/FrameCardSelect.razor.rz.scp.css */
.frame-selector[b-pneilzxdkv] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    padding: 10px;
}

.frame-selector:has(.frame-card.active)[b-pneilzxdkv] {
    grid-template-columns: 1fr;
}

.frame-card:not(.active) .frame-card-header[b-pneilzxdkv] {
    padding: 12px;
}

.frame-card:not(.active) .frame-image-container[b-pneilzxdkv] {
    width: 80px;
    height: 80px;
}

.frame-card:not(.active) .frame-title h3[b-pneilzxdkv] {
    font-size: 14px;
}

.frame-card:not(.active) .frame-cost[b-pneilzxdkv] {
    font-size: 14px;
    padding: 2px 8px;
}

.frame-card[b-pneilzxdkv] {
    background: #ffffff;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    transition: all 0.3s ease;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.frame-card:hover[b-pneilzxdkv] {
    border-color: #2196f3;
    box-shadow: 0 4px 16px rgba(33, 150, 243, 0.2);
}

.frame-card.active[b-pneilzxdkv] {
    border-color: #2196f3;
}

.frame-card-header[b-pneilzxdkv] {
    display: flex;
    align-items: center;
    padding: 16px;
    gap: 16px;
}

.frame-image-container[b-pneilzxdkv] {
    position: relative;
    flex-shrink: 0;
    width: 120px;
    height: 120px;
    border-radius: 8px;
    overflow: hidden;
    background: #f5f5f5;
}

.frame-image[b-pneilzxdkv] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: white;
}

.frame-overlay[b-pneilzxdkv] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 500;
}

.frame-overlay[b-pneilzxdkv]::after {
    content: 'Нажмите для выбора';
    font-size: 14px;
    text-align: center;
}

.frame-title[b-pneilzxdkv] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.frame-title h3[b-pneilzxdkv] {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
    line-height: 1.2;
}

.frame-cost[b-pneilzxdkv] {
    font-size: 16px;
    font-weight: 600;
    color: #2196f3;
    background: rgba(33, 150, 243, 0.1);
    padding: 4px 12px;
    border-radius: 20px;
    display: inline-block;
    width: fit-content;
}

.frame-controls[b-pneilzxdkv] {
    border-top: 1px solid #e0e0e0;
    padding: 20px;
    background: #f8f9fa;
}

.size-type-selector[b-pneilzxdkv] {
    margin-bottom: 20px;
}

.size-type-selector h4[b-pneilzxdkv] {
    margin: 0 0 12px 0;
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.radio-group[b-pneilzxdkv] {
    display: flex;
    gap: 12px;
}

.radio-option[b-pneilzxdkv] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: white;
    flex: 1;
    justify-content: center;
}

.radio-option:hover[b-pneilzxdkv] {
    border-color: #2196f3;
    background: #f8fbff;
}

.radio-option.selected[b-pneilzxdkv] {
    border-color: #2196f3;
    background: #e3f2fd;
    color: #1976d2;
}

.radio-option input[type="radio"][b-pneilzxdkv] {
    margin: 0;
    width: 16px;
    height: 16px;
}

.radio-option:has(input:disabled)[b-pneilzxdkv] {
    opacity: 0.5;
    cursor: not-allowed;
}

.radio-label[b-pneilzxdkv] {
    font-weight: 500;
    font-size: 14px;
}

.size-inputs[b-pneilzxdkv] {
    margin-top: 16px;
}

.standard-sizes label[b-pneilzxdkv] {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #333;
}

.size-select[b-pneilzxdkv] {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    background: white;
    transition: border-color 0.2s ease;
}

.size-select:focus[b-pneilzxdkv] {
    outline: none;
    border-color: #2196f3;
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
}

.manual-sizes[b-pneilzxdkv] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.input-group[b-pneilzxdkv] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.input-field[b-pneilzxdkv] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.input-field label[b-pneilzxdkv] {
    font-weight: 500;
    color: #333;
    font-size: 14px;
}

.size-input[b-pneilzxdkv] {
    padding: 12px 16px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    transition: border-color 0.2s ease;
}

.size-input:focus[b-pneilzxdkv] {
    outline: none;
    border-color: #2196f3;
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
}

.error-message[b-pneilzxdkv] {
    color: #d32f2f;
    font-size: 13px;
    background: #ffebee;
    padding: 8px 12px;
    border-radius: 6px;
    border-left: 4px solid #d32f2f;
}

.calculate-btn[b-pneilzxdkv] {
    background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);
}

.calculate-btn:hover[b-pneilzxdkv] {
    background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%);
    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.4);
    transform: translateY(-1px);
}

.calculate-btn:active[b-pneilzxdkv] {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(33, 150, 243, 0.3);
}

/* Tablet responsive */
@media (max-width: 1024px) {
    .frame-selector[b-pneilzxdkv] {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        padding: 8px;
    }
    
    .frame-selector:has(.frame-card.active)[b-pneilzxdkv] {
        grid-template-columns: 1fr;
    }
    
    .frame-card-header[b-pneilzxdkv] {
        padding: 12px;
        gap: 12px;
    }
    
    .frame-image-container[b-pneilzxdkv] {
        width: 100px;
        height: 100px;
    }
    
    .frame-title h3[b-pneilzxdkv] {
        font-size: 16px;
    }
}

/* Mobile responsive */
@media (max-width: 768px) {
    .frame-selector[b-pneilzxdkv] {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 4px;
    }
    
    .frame-selector:has(.frame-card.active)[b-pneilzxdkv] {
        grid-template-columns: 1fr;
    }
    
    .frame-card-header[b-pneilzxdkv] {
        flex-direction: column;
        text-align: center;
        padding: 16px;
        gap: 12px;
    }
    
    .frame-image-container[b-pneilzxdkv] {
        width: 150px;
        height: 150px;
        margin: 0 auto;
    }
    
    .frame-controls[b-pneilzxdkv] {
        padding: 16px;
    }
    
    .radio-group[b-pneilzxdkv] {
        flex-direction: column;
        gap: 8px;
    }
    
    .input-group[b-pneilzxdkv] {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .frame-title h3[b-pneilzxdkv] {
        font-size: 18px;
    }
    
    .frame-cost[b-pneilzxdkv] {
        align-self: center;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .frame-card-header[b-pneilzxdkv] {
        padding: 12px;
    }
    
    .frame-image-container[b-pneilzxdkv] {
        width: 120px;
        height: 120px;
    }
    
    .frame-controls[b-pneilzxdkv] {
        padding: 12px;
    }
    
    .radio-option[b-pneilzxdkv] {
        padding: 8px 12px;
        font-size: 13px;
    }
    
    .size-input[b-pneilzxdkv], .size-select[b-pneilzxdkv] {
        padding: 10px 12px;
        font-size: 13px;
    }
    
    .calculate-btn[b-pneilzxdkv] {
        padding: 10px 20px;
        font-size: 13px;
    }
}
/* /Features/Main/Components/Radios/ManualCostInput.razor.rz.scp.css */
/* Отделяем от карточек выбора: цена относится ко всей услуге, а не к соседнему варианту. */
.manual-cost-group[b-lawjtet40x] {
    display: flex;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.manual-cost-field[b-lawjtet40x] {
    flex: 1 1 200px;
    max-width: 320px;
}
/* /Features/Main/Components/Radios/ModelCardSelect.razor.rz.scp.css */
.texture-group[b-r41epsxv56] {
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
    gap: 20px 15px;
    justify-content: flex-start;
}

    .texture-group .texture-item[b-r41epsxv56] {
        cursor: pointer;
        text-align: center;
        position: relative;
        flex: 0 0 calc((100% - 75px) / 6);
        max-width: calc((100% - 75px) / 6);
    }

        .texture-group .texture-item.active[b-r41epsxv56] {
            cursor: default;
        }

            .texture-group .texture-item.active .texture-title[b-r41epsxv56],
            .texture-group .texture-item:hover .texture-title[b-r41epsxv56] {
                color: #000;
            }

            .texture-group .texture-item.active .texture-image-cover[b-r41epsxv56]:after {
                opacity: 1;
            }


    .texture-group .texture-image-cover[b-r41epsxv56] {
        position: relative;
    }

        .texture-group .texture-image-cover[b-r41epsxv56]:after {
            content: '';
            opacity: 0;
            position: absolute;
            /* box-sizing не наследуется псевдоэлементом: без этого 3px рамка
               прибавляется к height:100% и рамка выпирает за картинку. */
            box-sizing: border-box;
            height: 100%;
            width: 100%;
            left: 0;
            top: 0;
            border: 3px solid #5BC8FF;
            box-shadow: inset 0 0 0 1px #FFF;
            transition: 0.1s linear opacity;
        }

    .texture-group .texture-image[b-r41epsxv56] {
        width: 100%;
        height: 150px;
        border: none;
        background-repeat: no-repeat;
        background-size: contain;
        background-color: #f8f9fa;
        display: block;
        object-fit: contain;
    }

        .texture-group .texture-image .image[b-r41epsxv56] {
            width: 100%;
            height: 100%;
            border: 1px solid #DBDBDB;
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
            background-color: #f8f9fa;
        }


    .texture-group .texture-price[b-r41epsxv56] {
        position: absolute;
        bottom: 12px;
        left: 0;
        width: 100%;
        text-align: center;
        color: #FFF;
        text-shadow: 0 1px 1px #000000, 0 1px 4px rgba(0, 0, 0, 0.5);
        font-size: 16px;
        line-height: 16px;
        font-weight: bold;
        opacity: 0.8;
    }


    .texture-group .texture-title[b-r41epsxv56] {
        font-size: 14px;
        line-height: 16px;
        margin: 0 auto;
        color: #BFBFBF;
        max-width: 100%;
        transition: 0.1s linear color;
        padding: 5px 0;
    }

@media (max-width: 1024px) {
    .texture-group .texture-image[b-r41epsxv56] { width: 100%; height: auto; }

    .texture-group .texture-title[b-r41epsxv56] {
        max-width: 100%;
        font-size: 13px;
        line-height: 15px;
    }

    .texture-group .texture-price[b-r41epsxv56] {
        font-size: 15px;
        line-height: 15px;
        bottom: 10px;
    }
}

@media (max-width: 768px) {
    .texture-group[b-r41epsxv56] {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 15px;
        padding-bottom: 10px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .texture-group[b-r41epsxv56]::-webkit-scrollbar { height: 4px; }
    .texture-group[b-r41epsxv56]::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 2px; }
    .texture-group[b-r41epsxv56]::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 2px; }
    .texture-group[b-r41epsxv56]::-webkit-scrollbar-thumb:hover { background: #a8a8a8; }

    .texture-group .texture-item[b-r41epsxv56] { flex: 0 0 auto; min-width: 125px; }
    .texture-group .texture-image[b-r41epsxv56] { width: 100%; height: auto; margin: 0 auto 8px; }
    .texture-group .texture-title[b-r41epsxv56] { max-width: 100%; font-size: 13px; line-height: 15px; }
    .texture-group .texture-price[b-r41epsxv56] { font-size: 14px; line-height: 14px; bottom: 10px; }
}

@media (max-width: 480px) {
    .texture-group .texture-item[b-r41epsxv56] { min-width: 100px; }
    .texture-group .texture-image[b-r41epsxv56] { width: 100%; height: auto; }
    .texture-group .texture-title[b-r41epsxv56] { max-width: 100%; font-size: 12px; line-height: 14px; }
    .texture-group .texture-price[b-r41epsxv56] { font-size: 13px; line-height: 13px; bottom: 8px; }
}


/* /Features/Main/Components/Radios/NumberInputSelect.razor.rz.scp.css */
.number-input-group[b-71op08c3jm] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.number-input-field[b-71op08c3jm] {
    flex: 1 1 200px;
    max-width: 320px;
}
/* /Features/Main/Components/Radios/SmallCardSelect.razor.rz.scp.css */
.texture-group[b-kwl0ezl0xd] {
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
    gap: 15px 10px;
    justify-content: center;
}

    .texture-group .texture-item[b-kwl0ezl0xd] {
        cursor: pointer;
        text-align: center;
        position: relative;
    }

        .texture-group .texture-item.active[b-kwl0ezl0xd] {
            cursor: default;
        }

            .texture-group .texture-item.active .texture-title[b-kwl0ezl0xd],
            .texture-group .texture-item:hover .texture-title[b-kwl0ezl0xd] {
                color: #000;
            }

            .texture-group .texture-item.active .texture-image-cover[b-kwl0ezl0xd]:after {
                opacity: 1;
            }


    /* Отступ держим здесь, а не на картинке: цена и рамка выделения позиционируются
       от низа обёртки, поэтому её коробка должна совпадать с картинкой пиксель в пиксель. */
    .texture-group .texture-image-cover[b-kwl0ezl0xd] {
        position: relative;
        margin-bottom: 5px;
    }

        .texture-group .texture-image-cover[b-kwl0ezl0xd]:after {
            content: '';
            opacity: 0;
            position: absolute;
            /* box-sizing не наследуется псевдоэлементом: без этого 2px рамка
               прибавляется к height:100% и рамка выпирает за картинку. */
            box-sizing: border-box;
            height: 100%;
            width: 100%;
            left: 0;
            top: 0;
            border: 2px solid #5BC8FF;
            box-shadow: inset 0 0 0 3px #FFF;
            transition: 0.1s linear opacity;
        }

    /* display:block убирает щель под инлайновой картинкой: как inline она стоит
       на базовой линии, и снизу остаётся место под «хвосты» букв. */
    .texture-group .texture-image[b-kwl0ezl0xd] {
        display: block;
        width: 170px;
        height: 120px;
        border: none;
        background-repeat: no-repeat;
        background-size: cover;
    }

        .texture-group .texture-image .image[b-kwl0ezl0xd] {
            width: 100%;
            height: 100%;
            border: 1px solid #DBDBDB;
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
        }


    .texture-group .texture-price[b-kwl0ezl0xd] {
        position: absolute;
        bottom: 8px;
        left: 0;
        width: 100%;
        text-align: center;
        color: #FFF;
        text-shadow: 0 1px 4px #000000, 0 1px 4px rgba(0, 0, 0, 0.5);
        font-size: 14px;
        line-height: 14px;
        font-weight: normal;
        opacity: 0.6;
    }


    .texture-group .texture-title[b-kwl0ezl0xd] {
        font-size: 12px;
        line-height: 12px;
        margin: 0 auto;
        color: #BFBFBF;
        max-width: 118px;
        transition: 0.1s linear color;
    }

/* Mobile responsive styles */
@media (max-width: 768px) {
    .texture-group[b-kwl0ezl0xd] {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 10px;
        gap: 10px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .texture-group[b-kwl0ezl0xd]::-webkit-scrollbar {
        height: 4px;
    }

    .texture-group[b-kwl0ezl0xd]::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 2px;
    }

    .texture-group[b-kwl0ezl0xd]::-webkit-scrollbar-thumb {
        background: #c1c1c1;
        border-radius: 2px;
    }

    .texture-group[b-kwl0ezl0xd]::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
    }

    .texture-group .texture-item[b-kwl0ezl0xd] {
        flex: 0 0 auto;
        min-width: 120px;
    }

    .texture-group .texture-image[b-kwl0ezl0xd] {
        width: 120px;
        height: 80px;
    }

    .texture-group .texture-title[b-kwl0ezl0xd] {
        max-width: 120px;
        font-size: 11px;
        line-height: 11px;
    }
}

@media (max-width: 480px) {
    .texture-group .texture-item[b-kwl0ezl0xd] {
        min-width: 100px;
    }

    .texture-group .texture-image[b-kwl0ezl0xd] {
        width: 100px;
        height: 66px;
    }

    .texture-group .texture-title[b-kwl0ezl0xd] {
        max-width: 100px;
        font-size: 10px;
        line-height: 10px;
    }

    .texture-group .texture-price[b-kwl0ezl0xd] {
        font-size: 12px;
        line-height: 12px;
        bottom: 6px;
    }
}
/* /Features/Main/Components/Radios/TextCardSelect.razor.rz.scp.css */
/* Раскладка повторяет .texture-group из карточек с картинками, чтобы в одном
   мини-шаге разные типы групп стояли по одной сетке.
   Выравнивание по левому краю: у услуги вариантов обычно один-два, и по центру
   карточка повисала в пустоте, оторванная от названия слева. */
.text-card-group[b-laesee0sg5] {
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
    gap: 10px;
    justify-content: flex-start;
}

.text-card-group .text-card[b-laesee0sg5] {
    position: relative;
    box-sizing: border-box;
    width: 170px;
    min-height: 64px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    background: #fff;
    border: 1px solid #DBDBDB;
    border-radius: 4px;
    text-align: center;
    transition: 0.1s linear border-color, 0.1s linear color;
}

/* Единственный вариант: строка во всю ширину, название слева, цена справа. */
.text-card-group--single .text-card[b-laesee0sg5] {
    width: 100%;
    min-height: 0;
    padding: 12px 16px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    text-align: left;
    cursor: default;
}

.text-card-group .text-card:hover .text-card-name[b-laesee0sg5] {
    color: #000;
}

.text-card-group .text-card.active[b-laesee0sg5] {
    cursor: default;
    border-color: #5BC8FF;
    /* Тот же приём выделения, что у карточек с картинкой: рамка плюс внутреннее
       белое кольцо, чтобы толщина читалась и на светлом фоне. */
    box-shadow: inset 0 0 0 2px #5BC8FF, inset 0 0 0 4px #FFF;
}

.text-card-group .text-card.active .text-card-name[b-laesee0sg5] {
    color: #000;
}

.text-card-group .text-card-name[b-laesee0sg5] {
    font-size: 13px;
    line-height: 15px;
    color: #6B6B6B;
    transition: 0.1s linear color;
}

.text-card-group .text-card-price[b-laesee0sg5] {
    font-size: 14px;
    line-height: 16px;
    font-weight: 600;
    color: #333;
}

@media (max-width: 768px) {
    .text-card-group[b-laesee0sg5] {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 10px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .text-card-group[b-laesee0sg5]::-webkit-scrollbar {
        height: 4px;
    }

    .text-card-group[b-laesee0sg5]::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 2px;
    }

    .text-card-group[b-laesee0sg5]::-webkit-scrollbar-thumb {
        background: #c1c1c1;
        border-radius: 2px;
    }

    .text-card-group .text-card[b-laesee0sg5] {
        flex: 0 0 auto;
        width: 140px;
    }
}

@media (max-width: 480px) {
    .text-card-group .text-card[b-laesee0sg5] {
        width: 120px;
        min-height: 56px;
        padding: 8px 10px;
    }

    .text-card-group .text-card-name[b-laesee0sg5] {
        font-size: 12px;
        line-height: 14px;
    }

    .text-card-group .text-card-price[b-laesee0sg5] {
        font-size: 13px;
        line-height: 15px;
    }
}
/* /Features/Main/Components/Radios/VerticalCardSelect.razor.rz.scp.css */
.texture-group[b-ce0hgve4xi] {
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
    gap: 20px 15px;
}

    .texture-group .texture-item[b-ce0hgve4xi] {
        cursor: pointer;
        text-align: center;
        position: relative;
    }

        .texture-group .texture-item.active[b-ce0hgve4xi] {
            cursor: default;
        }

            .texture-group .texture-item.active .texture-title[b-ce0hgve4xi],
            .texture-group .texture-item:hover .texture-title[b-ce0hgve4xi] {
                color: #000;
            }

            .texture-group .texture-item.active .texture-image-cover[b-ce0hgve4xi]:after {
                opacity: 1;
            }


    /* Отступ держим здесь, а не на картинке: цена и рамка выделения позиционируются
       от низа обёртки, поэтому её коробка должна совпадать с картинкой пиксель в пиксель. */
    .texture-group .texture-image-cover[b-ce0hgve4xi] {
        position: relative;
        margin-bottom: 8px;
    }

        .texture-group .texture-image-cover[b-ce0hgve4xi]:after {
            content: '';
            opacity: 0;
            position: absolute;
            /* box-sizing не наследуется псевдоэлементом: без этого 2px рамка
               прибавляется к height:100% и рамка выпирает за картинку. */
            box-sizing: border-box;
            height: 100%;
            width: 100%;
            left: 0;
            top: 0;
            border: 2px solid #5BC8FF;
            box-shadow: inset 0 0 0 3px #FFF;
            transition: 0.1s linear opacity;
        }

    /* display:block убирает щель под инлайновой картинкой: как inline она стоит
       на базовой линии, и снизу остаётся место под «хвосты» букв. */
    .texture-group .texture-image[b-ce0hgve4xi] {
        display: block;
        width: 120px;
        height: 200px;
        border: none;
        background-repeat: no-repeat;
        background-size: cover;
    }

        .texture-group .texture-image .image[b-ce0hgve4xi] {
            width: 100%;
            height: 100%;
            border: 1px solid #DBDBDB;
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
        }


    .texture-group .texture-price[b-ce0hgve4xi] {
        position: absolute;
        bottom: 12px;
        left: 0;
        width: 100%;
        text-align: center;
        color: #FFF;
        text-shadow: 0 1px 4px #000000, 0 1px 4px rgba(0, 0, 0, 0.5);
        font-size: 16px;
        line-height: 16px;
        font-weight: normal;
        opacity: 0.6;
    }


    .texture-group .texture-title[b-ce0hgve4xi] {
        font-size: 14px;
        line-height: 14px;
        margin: 0 auto;
        color: #BFBFBF;
        max-width: 200px;
        transition: 0.1s linear color;
    }

/* Mobile responsive styles */
@media (max-width: 768px) {
    .texture-group[b-ce0hgve4xi] {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 10px;
        gap: 15px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .texture-group[b-ce0hgve4xi]::-webkit-scrollbar {
        height: 4px;
    }

    .texture-group[b-ce0hgve4xi]::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 2px;
    }

    .texture-group[b-ce0hgve4xi]::-webkit-scrollbar-thumb {
        background: #c1c1c1;
        border-radius: 2px;
    }

    .texture-group[b-ce0hgve4xi]::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
    }

    .texture-group .texture-item[b-ce0hgve4xi] {
        flex: 0 0 auto;
        min-width: 160px;
    }

    .texture-group .texture-image[b-ce0hgve4xi] {
        width: 160px;
        height: 110px;
    }

    .texture-group .texture-title[b-ce0hgve4xi] {
        max-width: 160px;
        font-size: 13px;
        line-height: 13px;
    }

    .texture-group .texture-price[b-ce0hgve4xi] {
        font-size: 14px;
        line-height: 14px;
        bottom: 10px;
    }
}

@media (max-width: 480px) {
    .texture-group .texture-item[b-ce0hgve4xi] {
        min-width: 140px;
    }

    .texture-group .texture-image[b-ce0hgve4xi] {
        width: 140px;
        height: 95px;
    }

    .texture-group .texture-title[b-ce0hgve4xi] {
        max-width: 140px;
        font-size: 12px;
        line-height: 12px;
    }

    .texture-group .texture-price[b-ce0hgve4xi] {
        font-size: 13px;
        line-height: 13px;
        bottom: 8px;
    }
} 
/* /Features/Prices/Pages/PriceSetupPage.razor.rz.scp.css */
/* Гасим горизонтальные отступы MudContainer из макета, чтобы широкая матрица шла от края до края. */
.price-setup[b-zh2iz4vm6v] {
    margin-left: -16px;
    margin-right: -16px;
}

@media (min-width: 600px) {
    .price-setup[b-zh2iz4vm6v] {
        margin-left: -24px;
        margin-right: -24px;
    }
}