html {
    scroll-padding: 250px;
}

.quest-list {
    font: 400 16px/1.5 var(--font);
    margin-bottom: 80px;
    container-type: inline-size;

    h2 {
        font: 700 32px/1.25 var(--font);
        margin-bottom: 8px;
        @container (width < 1024px) {
            font-size: 24px;
            line-height: 32px;
        }
    }

    h3 {
        font: 700 24px/1.333 var(--font);
        margin-bottom: 16px;
        @container (width < 1024px) {
            font-size: 20px;
            line-height: 28px;
        }
    }

    h4 {
        font: 700 20px/1.4 var(--font);

        &.pump-2 {
            margin-bottom: 16px;
        }

        @container (width < 1024px) {
            font: 700 16px/1.5 var(--font);
            margin-bottom: 8px;
        }
    }

    h5 {
        font: 700 16px/1.5 var(--font);
    }

    .form-title {
        margin-bottom: 24px;

        & + .callout {
            margin-top: -10px;
        }

        h3 {
            @container (width < 1024px) {
                font-size: 16px;
                line-height: 1.5;
            }
        }

        @container (width < 1024px) {
            margin-bottom: 16px;
        }
    }

    form {
        margin-top: 63px;
        @container (width < 1024px) {
            margin-top: 24px;
        }

        &:not(.changed) {
            button {
                pointer-events: none;
            }

            .btn-blue {
                background: silver;
            }

            .btn-white {
                --color-brand: silver;
            }
        }
    }

    strong {
        font-weight: inherit;
        color: var(--color-brand);
    }

    .quest-list__sheets {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .quest-list__sheet {
        border: 1px solid var(--color-brand);
        padding: 70px 50px;
        border-radius: 8px;
        page-break-inside: avoid;
        @container (width < 1024px) {
            padding: 24px 16px;
        }
    }

    .quest-list__sheet-title {
        font: 700 24px/1.333 var(--font);
        color: var(--color-brand);
        background: var(--color-light);
        padding: 16px 32px;
        display: inline-block;
        margin-bottom: 40px;
        border-radius: 4px;
        @container (width < 1024px) {
            font-size: 20px;
            line-height: 1.4;
            padding: 8px 16px;
            margin-bottom: 32px;
        }
    }

    .quest-list__sheet-content {
        display: flex;
        flex-direction: column;
        gap: 40px;
        @media (width < 1024px) {
            gap: 24px;
        }
    }

    input[type="number"] {
        appearance: textfield;

        &::-webkit-outer-spin-button,
        &::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
    }

    .input-wrapper {
        position: relative;
        @container (width < 1024px) {
            display: flex;
            flex-direction: column-reverse;
        }

        input[type="text"], textarea, input[type="email"] {
            width: 100%;
            padding: 16px 24px;
            background: #f7f7f7;
            border: 1px solid transparent;
            font: inherit;
            border-radius: 4px;
            @container (width < 1024px) {
                padding: 8px 16px;
            }
        }

        @container (width >= 1024px) {
            input:placeholder-shown + label,
            input:placeholder-shown + .label,
            textarea:placeholder-shown + label,
            textarea:placeholder-shown + label {
                opacity: .5;
                top: 16px;
                left: 24px;
                font-size: 16px;
                transition: .3s;
                pointer-events: none;
            }

            label,
            .label,
            input:focus + label,
            input:focus + .label,
            textarea:focus + label,
            textarea:focus + .label {
                position: absolute;
                font-size: 16px;
                top: -28px;
                left: 0;
                opacity: .5;
                text-overflow: ellipsis;
            }

            .label {
                max-width: calc(100% - 32px);
                overflow: hidden;
            }

            .label > label {
                position: static;
                opacity: 1;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
    }

    [data-if-checked]:not(.visible) {
        display: none;
    }

    [data-checked-mark].marked ~ tr {
        display: none;
    }

    textarea {
        resize: vertical;
        height: 56px;
        min-height: 58px;
    }

    .textarea {
        width: 100%;
        padding: 16px 24px;
        background: #f7f7f7;
        border-radius: 4px;
        white-space: pre-wrap;
        line-break: strict;
    }

    input, textarea {
        &:focus {
            outline: 1px solid var(--color-brand);
        }
    }

    input.touched:invalid:not(:focus) {
        border-color: var(--color-error);
    }

    .input-wrapper:has(input.touched:invalid:not(:focus)):after {
        display: block;
        content: "Это поле необходимо заполнить";
        position: absolute;
        color: var(--color-error);
        font: 400 14px/1 var(--font);
        bottom: -14px;
        right: 4px;
    }
    .group-wrapper {
        display: flex;
        flex-direction: column;
        gap: 32px;

        & > h4 {
            margin-top: 16px;
        }

        @container (width < 1024px) {
            gap: 8px;
        }
    }

    .number-wrapper {
        display: flex;
        flex-direction: column;
        gap: 32px;
        position: relative;

        @container (width > 1024px) {
            padding-left: 25px;
        }

        @container (width < 1024px) {
            gap: 8px;
            margin-top: 16px;
        }

        .number {
            font: 700 16px/1.5 var(--font);

            @container (width > 1024px) {
                position: absolute;
                left: 0;
                top: 0;
            }

            @container (width < 1024px) {
                margin-bottom: 0;
            }


        }


    }

    .input-group {
        display: flex;
        flex-direction: column;
        gap: 16px;
        position: relative;
        border-radius: 4px;

        @container (width < 1024px) {
            gap: 8px;

            .radio:not(:nth-last-child(1 of .radio)) {
                border-bottom: 1px solid #EBEBEB;
                padding-bottom: 8px;
            }
        }

        &.pumps-params {
            gap: 8px;
        }

        &:has(input.touched:invalid:not(:focus)),
        &.no-empty:has(input.touched:invalid){
            outline: 1px solid var(--color-error);

            &:after {
                content: "Необходимо выбрать вариант";
                position: absolute;
                color: var(--color-error);
                font: 400 14px/1 var(--font);
                bottom: -14px;
                right: 4px;
                display: block;
            }
        }
    }

    .fake-check {
        background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xIDQuMzI1NzFDMSA0LjMyNTcxIDMuNCA0Ljc1IDQuMzE3MDggN0M1LjggMy4yNSA5IDEgOSAxIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=) no-repeat 50%, var(--color-brand);
        background-size: 16px;
        display: inline-block;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        cursor: not-allowed;

        @media (width <= 1024px) {
            width: 31px;
            height: 31px;
        }
    }

    label.radio {
        --ink: var(--color-green);
        --r1: 50%;
        --r2: 16px;
        --r3: 12px;
    }

    label.checkbox {
        --ink: var(--color-brand);
        --r1: 50%;
        --r2: 50%;
        --r3: 50%;
    }

    label.radio {
        .toggler {
            width: 38px;

            @container (width < 1024px) {
                width: 51px;
            }

            &:before {
                content: "";
                display: block;
                position: absolute;
                width: 20px;
                height: 20px;
                background-color: #ffffff;
                border-radius: var(--r1);
                top: 2px;
                left: 2px;
                box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, .25);
                transition: .3s;
                @container (width < 1024px) {
                    height: 27px;
                    width: 27px;
                }
            }
        }

        &:has(input:checked) {
            .toggler {
                &:before {
                    left: 16px;
                    @container (width < 1024px) {
                        left: 22px;
                    }
                }
            }
        }
    }

    label.checkbox {
        .toggler {
            width: 24px;
            @container (width < 1024px) {
                width: 31px;
                border-radius: var(--r2);
            }
        }

        &:has(input:checked) {
            .toggler {
                background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xIDQuMzI1NzFDMSA0LjMyNTcxIDMuNCA0Ljc1IDQuMzE3MDggN0M1LjggMy4yNSA5IDEgOSAxIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=) no-repeat 50%, var(--ink);
                background-size: 16px;
            }
        }
    }

    label.radio, label.checkbox {
        display: flex;
        gap: 8px;
        cursor: pointer;
        width: fit-content;
        flex-shrink: 0;
        flex-grow: 0;
        @container (width < 1024px) {
            flex-direction: row-reverse;
            justify-content: space-between;
            align-items: center;
            width: 100%;
        }

        input {
            opacity: 0;
            position: absolute;
        }

        .toggler {
            display: inline-block;
            height: 24px;
            border-radius: var(--r3);
            background: #f7f7f7;
            position: relative;
            transition: .3s;
            overflow: hidden;
            flex-shrink: 0;
            flex-grow: 0;
            box-shadow: 0 0 2px 0 rgba(0, 0, 0, .25) inset;
            @container (width < 1024px) {
                height: 31px;
                border-radius: var(--r2);
            }
        }

        &:has(input:checked) {
            .toggler {
                background-color: var(--ink);
            }
        }

        &:has(input:disabled) {
            opacity: .4;
            pointer-events: none;
        }
    }

    .radio-title {
        text-wrap: balance;
        @media (width < 1024px) {
            line-height: 24px;
        }
    }

    .flex-note {
        display: flex;
        flex-wrap: wrap;
        align-items: center;

        &:not(:first-child) {
            @container (width < 1024px) {
                border-top: 1px solid #EBEBEB;
                padding-top: 16px;
            }
        }

        .note {
            border: none;
            background: #f7f7f7;
            font-size: 16px;
            border-radius: 4px;
            padding: 0.5em 1em;
            margin-top: -.5em;
            min-width: 15em;
            margin-left: .25em;
            flex-grow: 1;

            & + label {
                white-space: nowrap;
            }

            @container (width < 1024px) {
                flex-grow: 1;
                padding: 8px 32px 8px 16px;
                border-radius: 4px;
                margin-top: 6px;

                & + label {
                    position: absolute;
                    right: 6px;
                    top: 12px;
                    opacity: .4;
                }
            }
        }
    }

    .note-wrapper {
        display: flex;
        position: relative;
        align-items: center;
        flex-grow: 1;
        @container (width < 1024px) {
            width: 100%;
            margin-top: 8px;
        }
    }

    .complex:has(.radio input:not(:checked)) .note-wrapper {
        opacity: .3;
        pointer-events: none;
    }

    .btn-wrapper {
        margin-top: 64px;
        display: flex;
        justify-content: center;
        gap: 16px;

        @media (width < 768px) {
            margin-top: 32px;
            flex-direction: column;
        }
    }

    .btn-blue {
        border-radius: 4px;
        padding-inline: 56px;
        @media (width < 1024px) {
            padding-block: 16px;
        }
    }

    .btn-white {
        --ink: var(--color-brand);
        font: 700 16px/1.5 var(--font);
        color: var(--ink);
        border-color: var(--ink);
        border-radius: 4px;
        padding-inline: 14px;

        @media (any-hover: hover) {
            &:hover {
                --ink: var(--color-dark);
            }
        }


    }

    .grid-1, .grid-2, .grid-3, .grid-4 {
        display: grid;
        gap: 16px 40px;
        grid-template-columns: 1fr;
    }

    .subgrid {
        margin-bottom: 8px;
        margin-left: 2em;
        margin-top: 16px;
        gap: 8px;

        label {
            border-bottom: none !important;
        }
    }

    @container (width > 1200px) {
        .grid-1 {
            grid-template-columns: auto;
            width: fit-content;
        }

        .grid-2 {
            grid-template-columns: auto auto;
            width: fit-content;
        }

        .grid-3 {
            width: fit-content;
            grid-template-columns: repeat(3, auto);
        }

        .grid-4 {
            grid-template-columns: repeat(4, auto);
        }

        .full {
            width: 100%;
        }

        .subgrid {
            margin-bottom: 0;
        }
    }

    @container (width <= 1200px) {
        .flex-note:has(input[type="radio"]:not(:checked)) .note-wrapper {
            opacity: .5;
            pointer-events: none;
        }
    }

    &.pdf {
        label.radio, label.checkbox {
            input {
                opacity: 1;
                position: static;
                appearance: radio;
                font-size: 200%;
            }

            .toggler {
                display: none;
            }
        }

        .no-print {
            display: none !important;
        }
    }

    .pdf-page {
        article:not(.hidden) + article {
            margin-top: 16px;
        }
    }

    .pdf-page:not(:has(article:not(.hidden))) {
        display: none;
    }

    .footer {
        margin-top: 16px;
        @media (width < 1024px) {
            margin-top: 0;
        }
    }

    picture {
        width: 100%;
        display: block;

        img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
    }

    .flex {
        display: flex;
        align-items: center;
    }

    .callout {
        align-items: center;

        .icon {
            width: 26px;
            height: 26px;
            flex-shrink: 0;

            @media (width <= 1024px) {
                align-self: start;
                margin-top: 4px;
            }
        }
    }

    .recommend-buttons {
        justify-content: flex-start;
        gap: 8px;
        margin-block: 16px 32px;

        .btn {
            background: var(--color-light);
            color: var(--color-brand);
            padding: 10px 50px;

            @media (any-hover: hover) {
                &:hover {
                    color: var(--color-light);
                    background: var(--color-brand);
                }
            }

            @media (width <= 1024px) {
                border-radius: 4px;
            }

        }

        @container (width <= 1024px) {
            flex-direction: column;

            .btn {
                width: 100%;
                text-align: center;
            }
        }
    }

    .flex-radio {
        display: flex;
        align-items: center;
        gap: 44px;
        @container (width < 1024px) {
            flex-direction: column;
            gap: 8px;
        }
    }

    .v-flex {
        gap: 8px;
        display: flex;
        flex-direction: column;
    }

    .grid-08-02 {
        display: grid;
        border-top: 1px solid silver;
        border-left: 1px solid silver;
        grid-template-columns: 220px 3fr 2fr 2fr;
        grid-template-areas:
            "A B C D"
            "A E F G"
            "A H I I"
            "A J K L"
            "A J M N"
            "A O P Q";

        .A {
            grid-area: A;
            background: var(--color-light);
            display: flex;
            align-items: center;
            font-weight: 700;
        }

        .B {
            grid-area: B;
        }

        .C {
            grid-area: C;
        }

        .D {
            grid-area: D;
        }

        .E {
            grid-area: E;
        }

        .F {
            grid-area: F;
        }

        .G {
            grid-area: G;
        }

        .H {
            grid-area: H;
        }

        .I {
            grid-area: I;
        }

        .J {
            grid-area: J;
        }

        .K {
            grid-area: K;
        }

        .L {
            grid-area: L;
        }

        .M {
            grid-area: M;
        }

        .N {
            grid-area: N;
        }

        .O {
            grid-area: O;
        }

        .P {
            grid-area: P;
        }

        .Q {
            grid-area: Q;
        }

        & > *,
        .content-wrapper > * {
            padding: 6px 10px;
            border-right: 1px solid silver;
            border-bottom: 1px solid silver;

            @container (width <= 1024px) {
                border: none;
                padding-inline: 0;
            }
        }

        .content-wrapper {
            border: none !important;

            &.hidden-2-disabled {
                display: contents !important;
            }
        }

        .input-wrapper {
            input {
                padding: 4px;
            }
        }

        .hidden .L span {
            opacity: .4;
        }
    }

    .content-wrapper {
        display: contents;
    }

    @container (width <= 1024px) {
        .desktop {
            display: none !important;
        }

        .B {
            font-weight: 700;
        }

        .C, .F {
            border-bottom: 1px solid silver !important;
        }

        .F {
            .flex {
                justify-content: space-between;
                flex-direction: row-reverse;
            }
        }

        .E {
            font-weight: 700;

            &:after {
                content: " *";
            }
        }

        .K, .L, .H {
            font-weight: 700;
        }

        .I, .M, .N {
            label:first-child {
                border-bottom: 1px solid silver !important;
                padding-bottom: 8px;
            }
        }

        .J {
            display: none;
        }

        .E, .H, .K {
            padding-top: 24px !important;
        }

        .Q {
            .mobile {
                margin-bottom: 12px;
            }
        }
    }

    @container (width > 1024px) {
        .mobile {
            display: none;
        }
    }

}

@container (width <= 1024px) {
    .p-modal {
        display: none;

        .input-group {
            outline: none !important;

            &:after {
                content: none !important;
            }
        }
    }

    .mobile-b {
        font-weight: 700;
    }
}

@container (width > 1024px) {
    .pump-1 .radio-title {
        display: none;
    }

    .p-modal {
        display: flex;
        flex-direction: column;
        gap: 40px;
    }
}

.mobile:not(:has(.p-modal-start.visible)) .p-modal-start {
    /* if parent have no any visible item  */
    opacity: .5;
    pointer-events: none;
}

.pumps-params:not(:has(.visible)) {
    display: none;
}

.mobile:has(+.p-modal.step-1-valid) .p-modal-start[data-step="1"],
.mobile:has(+.p-modal.step-2-valid) .p-modal-start[data-step="2"],
.mobile:has(+.p-modal.step-3-valid) .p-modal-start[data-step="3"],
.mobile:has(+.p-modal.step-4-valid) .p-modal-start[data-step="4"],
.mobile:has(+.p-modal.step-5-valid) .p-modal-start[data-step="5"],
.mobile:has(+.p-modal.step-6-valid) .p-modal-start[data-step="6"] {
    &:after {
        content: "заполнено";
        order: 2;
        flex-grow: 1;
        padding-right: 8px;
        text-align: right;
        opacity: .4;
    }
}

.p-modal-start {
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    padding: 8px 0;

    &:not(#fake) {
        display: flex;
        align-items: center;

        .visible ~ & {
            display: none;
        }
    }

    &:not(.visible) {
        border-bottom: 1px solid var(--color-grey);
    }

    .icon {
        order: 3;
    }
}

.p-modal-close {
    position: absolute;
    right: 26px;
    top: 34px;
    cursor: pointer;
    z-index: 5;

    .icon {
        font-size: 25px;
        color: #6e6e72;
    }
}

.pump-title {
    color: var(--color-brand);
    font: 700 20px/1.4 var(--font);
    margin-top: 60px;
}


body.p-open {
    overflow: hidden;

    #scroll-to-top,
    jdiv {
        z-index: 0 !important;
    }

    .p-modal {
        display: block;
        position: fixed;
        inset: 0;
        overflow: auto;
        padding: 16px;
        background: #f2f2f7;
        z-index: 100;

        &.invalid {
            .p-modal-save {
                background: #ebebeb;
                color: #8a8a8e;
                pointer-events: none;
            }

            .p-modal-next {
                display: none;
            }
        }

        &.last-step {
            .p-modal-next {
                display: none;
            }
        }

        .pump-1, .pump-2 {
            display: none;
        }

        &.step-1 .pump-1-1, &.step-1 .pump-2-1,
        &.step-2 .pump-1-2, &.step-2 .pump-2-2,
        &.step-3 .pump-1-3, &.step-3 .pump-2-3,
        &.step-4 .pump-1-4, &.step-4 .pump-2-4,
        &.step-5 .pump-1-5, &.step-5 .pump-2-5,
        &.step-6 .pump-1-6, &.step-6 .pump-2-6 {
            display: block;
        }
    }

    .visible .grid-08-02 {
        &.pump-2 {
            background: #ffffff;
            padding: 24px 16px;
            border-radius: 8px;
            border: 1px solid var(--color-brand);
        }
    }
}

.p-modal-footer {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 16px;
    margin-bottom: 24px;
}

.pump-error {
    color: var(--color-error);

    &.hidden {
        display: none;
    }
}

dialog#wait {
    &::backdrop {
        background: rgba(0, 0, 0, .5);
        backdrop-filter: blur(4px);
    }
}

.sent-note {
    text-align: center;
    margin-block: 64px;

    .title {
        display: flex;
        justify-content: center;
        gap: 24px;
        align-items: baseline;

        @media (width < 1024px) {
            align-items: center;
            flex-direction: column-reverse;
        }
    }
}

.quiz-table {
    width: 100%;
    border-collapse: collapse;

    th, td {

        padding: 8px 16px;
        vertical-align: middle;

        &.measure {
            text-align: center;
        }
    }

    td:first-child {
        i {
            font-style: normal;
        }
    }

    @container (width >= 1280px) {
        th, td {
            border: 1px solid silver;

            &:nth-child(1) {
                width: 30%;
                text-wrap: balance;
            }

            &:nth-child(2) {
                width: 10%;
            }
        }

        td:first-child {
            i {
                color: #8a8a8e;
            }
        }

        .input-wrapper {
            &::after {
                content: none !important;
            }

            input[type=text] {
                padding: 8px;
            }

            label {
                display: none;
            }
        }
    }

    @container (width < 1280px) {

        thead {
            display: none;
        }

        .measure {
            display: none;
        }

        tr, td, th {
            display: block;
            padding-inline: 0;
        }

        td:not(:last-child) {
            border-bottom: 1px solid silver;
        }

        td:first-child {
            font-weight: 700;
        }

        &.modal-table {
            border: 1px solid var(--color-brand);
            padding: 16px 16px 24px;
            border-radius: 8px;
            background: #ffffff;
            display: block;
            margin-bottom: 24px;
        }
    }

    @container (width < 1280px) {
        .d-only {
            display: none !important;
        }
    }

    .ta-center {
        text-align: center;
    }

}

.pumps-wrapper.hidden {
    display: none;
}

.mobile:has(.pump-error:not(.hidden)) {
    outline: 1px solid var(--color-error);
    border-radius: 4px;
}

.modal-table:not(:has(.marked)) {
    pointer-events: none;
    opacity: .4;
}

.pdf .quest-list__sheets {
    min-width: 100%;
}

.input-set {
    display: flex;
    flex-direction: column;
    gap: 16px;
    @container (width > 1024px) {
        gap: 32px;
    }
    @container (width < 1024px) {
        h4 {
            /*margin-bottom: 0;*/
        }
    }

    .grid-2,
    .grid-3,
    .grid-4 {
        column-gap: 16px;
    }
}

/* fixes */
.quest-list__sheet-title + * .number-wrapper:first-of-type {
    margin-top: 0;
}

.quest-list__sheet-content .group-wrapper:first-child h4:first-child {
    margin-top: 0;
}