section.djh-jugi {

    margin: 80px 0;

    overflow-y: unset;

    section {
        overflow-y: unset;
    }

    >.container {

        .select-wrapper {
            &:not(:last-child) {
                margin-bottom: 8px;
            }
        }

        .wrapper {

            border-radius: 16px;
            background-color: var(--djh-pink);
            color: white;
            padding: 20px;

            h2.title {
                margin-bottom: 15px;
            }

            .description {
                font: normal normal normal 20px/28px 'ITC Officina Sans';
                margin-right: 20px;

                p:last-child {
                    margin-bottom: 0;
                }
            }

            .icon {
                text-align: center;

                img,
                svg {
                    width: 140px;
                    height: auto;

                    path {
                        fill: white;
                    }
                }
            }

            .question-buttons {
                margin-top: 60px;

                .questions-grid {
                    display: grid;
                    grid-template-columns: repeat(3, 1fr);
                    grid-auto-rows: minmax(60px, auto);
                    gap: 30px;

                    button,
                    label.button {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        margin-bottom: 0;

                        p {
                            margin-bottom: 0;
                        }

                        padding: 17px 20px 13px 20px;
                        position: relative;

                        &::after {
                            content: '»';
                            font: normal normal 500 30px / 1 'ITC Officina Sans';
                            /* position: absolute; */
                            /* right: 20px; */
                            /* bottom: 13px; */
                        }
                    }
                }

                button.next.button {
                    color: var(--djh-pink);
                    font: normal normal 400 14px / 1 'ITC Officina Sans';
                    padding: 8px 12px;
                    height: unset;
                    min-height: unset;
                    width: fit-content;

                    display: block;
                    margin-left: auto;
                    margin-top: 20px;
                }
            }


            .question-content {
                .questions-container {
                    display: flex;
                    flex-direction: column;

                    > div {
                        
                        .djh-question,
                        .djh-submit {
                            display: none;
                            /* &.show {
                                display: block;
                            } */

                            h3.title {
                                margin-bottom: 16px;
                            }

                            .answers {
                                display: flex;
                                flex-direction: column;

                                .answer {
                                    &:not(:last-child) {
                                        margin-bottom: 8px;
                                    }

                                    .info-icon {
                                        background-color: var(--djh-pink);
                                        border-radius: 50%;
                                        border: 1px solid var(--djh-pink);
                                        color: white;

                                        position: absolute;
                                        top: 50%;
                                        right: 20px;
                                        transform: translate(0, -50%);

                                        font-size: 18px;
                                        font-weight: bold;
                                        padding: 2px;
                                        text-align: center;
                                        width: 26px;

                                        &:hover,
                                        &:focus {
                                            +.djh-visually-hidden {
                                                background: #f9f9f9;
                                                border: 1px solid #ccc !important;
                                                padding: 6px !important;
                                                color: black;
                                                border-radius: 8px;
                                                display: block;
                                                z-index: 100;
                                                max-width: 400px;
                                                width: fit-content;
                                                height: auto;
                                                right: 0;
                                                left: unset;
                                                bottom: 0;
                                                transform: translate(0, -46px);
                                            }
                                        }
                                    }

                                    padding: 20px;
                                    position: relative;
                                }
                            }

                            &.radio {

                                .answers {
                                    +.options {
                                        margin-top: 8px;
                                    }
                                }

                                .options {
                                    label {
                                        display: flex;

                                        input[type="checkbox"] {
                                            margin-right: 8px;
                                            margin-left: 0;
                                        }

                                        &:not(:last-child) {
                                            margin-bottom: 8px;
                                        }
                                    }
                                }
                            }

                            &.age-select {
                                .persons {

                                    display: flex;
                                    flex-direction: column;

                                    label {
                                        display: flex;
                                        align-items: center;
                                        justify-content: space-between;
                                        position: relative;

                                        &:not(:last-child) {
                                            margin-bottom: 8px;
                                        }
                                    }
                                }

                                div.utility {
                                    margin-top: 8px;

                                    button {
                                        &.add-person {}

                                        &.remove-person {
                                            &.hidden {
                                                display: none;
                                            }
                                        }
                                    }
                                }
                            }

                            &.timespan {
                                .timespan-wrapper {
                                    display: flex;
                                    /* align-items: center; */
                                    flex-direction: column;

                                    .wrapper {
                                        display: flex;
                                        flex-wrap: wrap;

                                        label {
                                            margin-bottom: 0;

                                            display: flex;
                                            align-items: center;

                                            p {
                                                width: fit-content;
                                            }

                                            p:not(.to) {
                                                margin-right: 8px;
                                            }

                                            p.to {
                                                margin: 0 8px;
                                            }

                                            input[type="date"] {
                                                min-width: 130px;
                                            }

                                        }

                                        padding: 0;

                                        +.wrapper {
                                            margin-top: 16px;
                                        }
                                    }

                                    p {
                                        margin-bottom: 0;
                                    }
                                }
                            }

                            &.timespan_2 {
                                .timespan-wrapper {
                                    display: flex;
                                    flex-direction: column;
                                    gap: 8px;

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

                                    .select-wrapper {

                                        &:not(:last-child) {
                                            margin-bottom: 0px;
                                        }

                                        &:has(select.holiday-select) {
                                            display: none;
                                        }
                                    }

                                    .date-selection {
                                        display: none;
                                        align-items: center;

                                        label {
                                            margin-right: 8px;
                                        }

                                        p {
                                            margin: 0 8px 0 0;
                                        }
                                    }
                                }
                            }

                            &.counter {
                                .counter-wrapper {
                                    display: flex;
                                    flex-direction: column;

                                    label {
                                        display: flex;
                                        justify-content: space-between;
                                        align-items: center;

                                        &:not(:last-child) {
                                            margin-bottom: 8px;
                                        }

                                        p {
                                            width: fit-content;
                                            margin-bottom: 0;
                                        }
                                    }
                                }
                            }

                            &.multi-selection {
                                label {
                                    display: flex;

                                    &:not(:last-child) {
                                        margin-bottom: 8px;
                                    }

                                    &:has(input[type=checkbox]:focus, input[type=checkbox]:focus-visible) {
                                        background-color: var(--selected) !important;
                                        color: var(--djh-pink) !important;

                                        /* background-color: black; */
                                        /* color: white; */

                                        input[type=checkbox] {
                                            background-color: white !important;
                                            &::after {
                                                border-color: var(--djh-pink) !important;
                                            }
                                        }
                                    }
                                }
                            }

                            &.budget-range {
                                span.min {
                                    margin-right: 10px;
                                }

                                span.max {
                                    margin: 0 10px
                                }
                            }

                            &.inquiry,
                            &.booking,
                            &.results-page {

                                form.service-center-form {
                                    display: none;

                                    button.service-center-submit {
                                        display: none;
                                    }
                                }

                                label {
                                    display: flex;

                                    &:not(:has(input[type="checkbox"])) {
                                        flex-direction: column;
                                    }

                                    &:has(input[type="checkbox"]) {
                                        margin: 16px 0;

                                        input[type="checkbox"] {
                                            margin: auto 8px auto 0;
                                        }

                                        p {
                                            margin: 0;
                                        }
                                    }

                                    &:not(:last-child) {
                                        margin-bottom: 8px;
                                    }

                                    p {
                                        margin-bottom: 8px;
                                    }

                                    input,
                                    textarea {
                                        &:not(type="checkbox") {
                                            width: 100%;
                                        }
                                    }
                                }

                                button[type="submit"] {
                                    font: normal normal 500 18px / 1 'ITC Officina Sans';
                                    height: auto;
                                    min-height: auto;
                                    padding: 10px;
                                }
                            }

                            &.participants {
                                .participants-wrapper {

                                    label {
                                        display: flex;
                                        align-items: center;
                                        justify-content: space-between;

                                        &:not(:last-child) {
                                            margin-bottom: 8px;
                                        }

                                        input[type="number"] {
                                            width: 100px;
                                        }
                                    }
                                }
                            }

                            .select-wrapper {
                                .ts-control:not(:has(div.item[data-value="''"])) {
                                    background-color: black;
                                    color: white;
                                    
                                    &::after {
                                        border-color: white !important;
                                    }
                                }
                            }

                            &.classes {
                                p {
                                    margin-bottom: 13px;
                                }
                            }
                        }
                    }

                    button {
                        color: var(--djh-pink);

                        font: normal normal 400 14px / 1 'ITC Officina Sans';

                        padding: 8px 12px;

                        height: unset;

                        width: fit-content;
                    }

                    .notification:has(p, span, div) {
                        margin-top: 20px;
                    }

                    .navigation {
                        margin-top: 20px;
                        display: flex;
                        justify-content: space-between;

                        button {
                            opacity: 0;
                            pointer-events: none;
                            min-height: auto;

                            &.active {
                                opacity: 1;
                                pointer-events: all;
                            }
                        }
                    }
                }


                >.right {

                    display: flex;
                    flex-direction: column;

                    .icon:has(+.button.reset) {
                        margin-bottom: 16px;
                    }

                    .button.reset {
                        color: var(--djh-pink);
                        font: normal normal 400 14px / 1 'ITC Officina Sans';

                        margin-top: auto;
                        margin-left: auto;
                        padding: 8px 12px;

                        height: unset;
                        min-height: auto;
                        width: fit-content;
                    }
                }
            }
        }
    }
}

@media (max-width: 1399.98px) {
    /*  */
}
@media (max-width: 1199.98px) {
    section.djh-jugi {
        >.container {
            .wrapper {
                .question-buttons {
                    .questions-grid {
                        gap: 20px;
                    }
                }

                .question-content {
                    .questions-container {
                        >div {
                            .djh-question,
                            .djh-submit {
                                &.timespan {
                                    .timespan-wrapper {
                                        .wrapper {
                                            flex-direction: column;
                                            row-gap: 16px;

                                            label {
                                                p.to {
                                                    margin: 0 8px 0 0;
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

@media (max-width: 991.98px) {
    section.djh-jugi {
        >.container {
            .wrapper {
                .question-buttons {
                    .questions-grid {
                        grid-template-columns: repeat(2, 1fr);
                    }
                }
            }
        }
    }
}

@media (max-width: 767.98px) {
    section.djh-jugi {
        >.container {
            .wrapper {
                gap: 20px;

                .icon {
                    margin-top: 16px;
                }

                & .question-buttons {
                    .questions-grid {
                        grid-template-columns: repeat(1, 1fr);
                    }
                }

                .question-content {
                    flex-direction: column-reverse;

                    >.right {
                        flex-direction: column-reverse;
                        margin-bottom: 40px;
                    }

                    & .questions-container {
                        &>div {

                            & .djh-question,
                            & .djh-submit {

                                &.inquiry,
                                &.booking,
                                &.results-page {
                                    & label {
                                        &:not(:last-child) {
                                            margin-bottom: 20px;
                                        }
                                    }
                                }
                            }
                        }
                    }

                }

                & label {
                    p.to {
                        margin: 0;
                    }
                }
            }
        }
    }
}

@media (max-width: 575.98px) {
    /*  */
}