/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

#brxe-etobht:hover .link::after,
.link:hover::after {
    width: 100%;
}

footer a:hover {
    color: var(--primary);
    transition: color 0.3s ease;
}

.hygieneloesung {
    --green: var(--brand-green);
    --green-ring: #E3EFE0;
    --blue: var(--brand-blue);
    --blue-ring: #CCE9F3;
    --yellow: var(--brand-yellow);
    --yellow-ring: #FEF1D3;
    --orbit: rgba(0, 0, 0, 0.18);
    --circle-radius: 90px;
    --active-circle-radius: 125px;
    --main-circle-radius: 240px;
    --animation-speed: 0.8s;

    position: relative;
    max-width: 820px;
    display: grid;
    place-items: center;
    margin: 2em auto calc(var(--active-circle-radius) + 2em) auto;

    & .main_circle {
        position: relative;
        width: calc(var(--main-circle-radius) * 2);
        height: calc(var(--main-circle-radius) * 2);
        border: 3px dashed var(--orbit);
        border-radius: 50%;
    }

    & .circle {
        width: calc(var(--circle-radius) * 2);
        height: calc(var(--circle-radius) * 2);
        border-radius: 50%;
        color: #fff;
        display: grid;
        place-items: center;
        text-align: center;
        font-size: var(--text-l);
        padding: 1em;
        position: absolute;
        transition: box-shadow var(--animation-speed) ease,
        width var(--animation-speed) linear,
        height var(--animation-speed) linear,
        top var(--animation-speed) linear,
        left var(--animation-speed) linear;
        cursor: pointer;

        &::after {
            content: "";
            position: absolute;
            inset: 0;
            border-color: var(--orbit);
            border-width: 0;
            border-style: dashed;
            border-radius: 50%;
            transition: inset var(--animation-speed) ease, border-width var(--animation-speed) step-end;
        }
    }

    & .circle.gestalten {
        background: var(--brand-green);
        box-shadow: 0 0 0 25px var(--green-ring);

        &::after {
            border-color: var(--brand-green);
        }
    }

    & .circle.uberprufen {
        background: var(--brand-blue);
        box-shadow: 0 0 0 25px var(--blue-ring);

        &::after {
            border-color: var(--brand-blue);
        }
    }

    & .circle.verstehen {
        background: var(--brand-yellow);
        box-shadow: 0 0 0 25px var(--yellow-ring);

        &::after {
            border-color: var(--brand-yellow);
        }
    }

    & .circle.circle_active {
        width: calc(var(--active-circle-radius) * 2);
        height: calc(var(--active-circle-radius) * 2);
        top: calc((var(--main-circle-radius) * 2) - var(--active-circle-radius));
        left: calc(var(--main-circle-radius) - var(--active-circle-radius));

        &::after {
            inset: -35px;
            border-width: 2px;
        }
    }

    & .circle.circle_left {
        top: calc(var(--main-circle-radius) - var(--circle-radius));
        left: calc(var(--circle-radius) * -1);
    }

    & .circle.circle_right {
        top: calc(var(--main-circle-radius) / 10);
        left: calc((var(--main-circle-radius) * 2) - var(--circle-radius) - (var(--main-circle-radius) / 5));
    }

    & .circle.circle_left:focus,
    & .circle.circle_right:focus,
    & .circle.circle_left:hover,
    & .circle.circle_right:hover {
        box-shadow: 0 0 0 25px #fff;
        transition: box-shadow var(--animation-speed) ease,
        width var(--animation-speed) linear,
        height var(--animation-speed) linear,
        top var(--animation-speed) linear,
        left var(--animation-speed) linear;

        &::after {
            inset: -25px;
            border-width: 2px;
            transition: inset var(--animation-speed) ease, border-width var(--animation-speed) step-start;
        }
    }

    &.hygiene_mobile {
        display: none;
    }
}

#hygiene_gestalten_content, #hygiene_verstehen_content, #hygiene_uberprufen_content {
    display: none;

    &.hygiene_parent_active {
        display: grid;
    }
}

@media (min-width: 1333px) {
    .hygiene_div::after {
        content: "";
        position: absolute;
        top: 15%;
        right: 0;
        width: 100%;
        height: 70%;
        border-right: 2px dashed #ddd;
    }

    .hygiene_div:last-child::after {
        display: none;
    }
}

#brxe-exbrhx > div:hover {
    box-shadow: 0 0 20px 0 #ccc;
    background: var(--light);
    transition: box-shadow 0.5s ease, background 0.5s ease;

    & .modul-title {
        color: var(--primary);
        transition: color 0.5s ease;
    }
}

@media (max-width: 767px) {
    .hygieneloesung {
        &.hygiene_mobile {
            display: grid;
            width: 100%;
            margin: 1em auto;

            & .circle {
                position: relative;
            }
        }
    }

    #hygiene_gestalten_content,
    #hygiene_verstehen_content,
    #hygiene_uberprufen_content {
        display: grid;
    }
}

.vier_bereiche_grid {
    transition: transform 0.5s ease;

    &:hover {
        transform: translate(0, -16px);
        transition: transform 0.5s ease;

        .vier_bereiche_svg {
            svg {
                transform: translate(-10px, 0);
            }
        }

        svg {
            transition: transform 0.5s ease;

        }
    }

    .vier_bereiche_svg {
        svg {
            transition: transform 0.5s ease;
            margin-top: 2em;
        }
    }
}

.brxe-nav-nested.brx-open .brx-nav-nested-items {
    background: transparent;
    position: static;
    flex-direction: row;

    @media (max-width: 991px) {
        flex-direction: column;
    }
}

#brxe-hzeans > .brxe-block li > ul.brx-submenu-positioned li.open.active .brx-submenu-positioned a .icon {
    color: inherit;
    width: 20px;
}

@media (max-width: 991px) {
    #brxe-hzeans.brx-open {
        background: var(--light);
        position: fixed;
        z-index: 1001;
        width: 100vw;
        height: 100vh;
        box-shadow: 0 0 20px 0 #ccc;
        overflow-y: auto;
        align-items: baseline;

        & .brx-submenu-positioned .brx-submenu-toggle {
            justify-content: flex-start;
        }

        & #brxe-ttnyxl {
            & > .brxe-container {
                padding: 0;
            }

            & li.brx-has-megamenu {
                border-bottom: 1px solid #1e1e1e;

                & > .brx-submenu-toggle {
                    padding: 0 2em;
                }
            }

            & li > ul.brx-submenu-positioned {
                & .brxe-text {
                    padding-bottom: 1em;
                    border-bottom: 2px dashed #333;
                }

                & > .brxe-container {
                    gap: 1em;
                }

                & li.open.active .brx-submenu-positioned {
                    padding: 0;
                    margin: 0 0 0 0.5em;

                    & a {
                        padding: 0.5em 0;

                        & .icon {
                            color: inherit;
                            width: 20px;
                        }
                    }
                }
            }

            & .brx-dropdown-content {
                color: var(--light);
                background: #1E1E1E;
                position: static;
                opacity: 1;
                visibility: visible;

                & .brxe-container {
                    padding: 2em;
                }
            }

            & li.brx-has-megamenu > .brx-submenu-toggle svg {
                transform: rotate(-90deg);
            }

            & li.brx-has-megamenu.open.active > .brx-submenu-toggle svg {
                transform: rotate(-270deg);
            }

            & .brx-submenu-positioned .brx-has-multilevel > .brx-submenu-toggle svg {
                transform: rotate(0deg);
            }

            & .brx-submenu-positioned .brx-has-multilevel.open.active > .brx-submenu-toggle svg {
                transform: rotate(-180deg);
            }
        }

        & #brxe-znvjzm {
            & > .brxe-container {
                padding: 0;
            }

            & li.brx-has-megamenu {
                border-bottom: 1px solid #f6f6f6;

                & > .brx-submenu-toggle {
                    padding: 0 2em;
                }
            }

            & li > ul.brx-submenu-positioned {
                & > .brxe-container {
                    gap: 1em;
                    padding: 2em;
                }

                & .brxe-text {
                    padding-bottom: 1em;
                    border-bottom: 2px dashed #ccc;
                }

                & li.open.active .brx-submenu-positioned {
                    padding: 0;
                    margin: 0 0 0 0.5em;

                    & a {
                        padding: 0.5em 0;

                        & .icon {
                            color: inherit;
                            width: 20px;
                        }
                    }
                }
            }

            & .brx-dropdown-content {
                background: #F6F6F6;
                position: static;
                opacity: 1;
                visibility: visible;

                & .brxe-container {
                    padding: 0;
                }
            }

            & li.brx-has-megamenu > .brx-submenu-toggle svg {
                transform: rotate(-90deg);
            }

            & li.brx-has-megamenu.open.active > .brx-submenu-toggle svg {
                transform: rotate(-270deg);
            }

            & .brx-submenu-positioned .brx-has-multilevel > .brx-submenu-toggle svg {
                transform: rotate(0deg);
            }

            & .brx-submenu-positioned .brx-has-multilevel.open.active > .brx-submenu-toggle svg {
                transform: rotate(-180deg);
            }
        }

        .submenu-right-block {
            margin: 0;
            row-gap: var(--space-s);
        }
    }
}

@media (max-width: 478px) {
    .btn {
        white-space: normal
    }
}

.wpcf7-form {
    & p {
        & > span {
            display: block;
            margin-bottom: 1em;

            & select, & input, & textarea {
                border-radius: var(--radius-s);
                padding: 0.6em 1.2em;

                &::placeholder {
                    color: #777;
                }
            }

            & input[type="checkbox"] {
                accent-color: var(--primary);
                width: 24px;
                height: 24px;
            }
        }

        & input[type="submit"] {
            padding: var(--space-2xs) var(--space-xl);
            background: var(--primary);
            color: #f6f6f6;
            font-size: var(--text-m);
            border-radius: var(--radius-xl);
            transition: background 0.25s ease-in-out, background 0.25s ease-in-out;
            outline: 0;
            cursor: pointer;
            border: 1px solid var(--primary);
            white-space: nowrap;
        }

        & br {
            display: none;
        }
    }

    & .wpcf7-not-valid-tip {
        font-size: var(--text-s);
        padding: 0 calc(1.2rem + 2px);
    }

    & .wpcf7-acceptance,
    & .wpcf7-checkbox {
        label {
            line-height: 1.2;
            display: grid;
            grid-template-columns: 24px auto;
            align-items: start;
            gap: 0.5em;
            cursor: pointer;
        }
    }

    & .wpcf7-form-footer {
        width: 100%;
        margin-top: var(--space-m);

        & > p:has([type="submit"]) {
            display: grid;
            grid-template-columns: 50% max-content;
            gap: var(--space-s);
            @media (max-width: 991.98px) {
                grid-template-columns: 1fr;
            }

            input[type="submit"] {
                height: max-content;
                width: 100%;
                text-align: center;
            }
        }
    }

    & .wpcf7-form-control-wrap:has(.codedropz-upload-wrapper) {
        margin-bottom: 0;
    }

    & .wpcf7-form-control-wrap:has(.codedropz-upload-wrapper .dnd-upload-status) {
        padding-bottom: 70px;
        overflow: hidden;
        @media (max-width: 991.98px) {
            padding-bottom: 0;
        }
    }

    & .codedropz-upload-wrapper {
        margin: 0;

        & .codedropz-upload-handler {
            border: 1px solid var(--secondary);
            border-radius: var(--radius-xl);
            padding: var(--space-2xs) var(--space-xl);
            background: var(--secondary);
            transition: background 0.25s ease-in-out, background 0.25s ease-in-out;
            outline: 0;
            cursor: pointer;
            white-space: nowrap;
            margin: 0;

            &:has(.codedropz-btn-wrap:hover, .codedropz-btn-wrap:focus, .codedropz-btn-wrap:focus-within),
            &:hover,
            &:focus,
            &:focus-within {
                background: var(--secondary-l-2);
                border-color: var(--secondary-l-2);
            }
        }

        & .codedropz-upload-container {
            padding: 0;
        }

        & .codedropz-upload-inner {
            & span,
            & h3 {
                display: none;
            }

            .codedropz-btn-wrap {
                color: var(--text-body);
                font-size: var(--text-m);
                line-height: 1.15;

                & a {
                    color: currentColor;
                }
            }
        }

        & .dnd-upload-counter {
            display: none;
        }
    }
}

.color-group-primary {
    border: 2px solid var(--primary);

    .brxe-text-basic {
        color: var(--primary);
    }

    &:hover {
        background: var(--primary);
        box-shadow: 0 10px 10px 0 var(--primary);
    }
}

.color-group-secondary {
    border: 2px solid var(--secondary);

    .brxe-text-basic {
        color: var(--secondary);
    }

    &:hover {
        background: var(--secondary);
        box-shadow: 0 10px 10px 0 var(--secondary);
    }
}

.color-group-red {
    border: 2px solid var(--brand-red);

    .brxe-text-basic {
        color: var(--brand-red);
    }

    &:hover {
        background: var(--brand-red);
        box-shadow: 0 10px 10px 0 var(--brand-red);
    }
}

.color-group-purple {
    border: 2px solid var(--brand-purple);

    .brxe-text-basic {
        color: var(--brand-purple);
    }

    &:hover {
        background: var(--brand-purple);
        box-shadow: 0 10px 10px 0 var(--brand-purple);
    }
}

.color-group-dark {
    border: 2px solid var(--dark-20);

    .brxe-text-basic {
        color: var(--dark);
    }

    &:hover {
        background: var(--dark);
        box-shadow: 0 10px 10px 0 var(--dark);
    }
}

.product-filters {

}

@media (max-width: 766px) {
    .text-align-hucker {
        text-align: left;
    }
}

#brx-header.brx-sticky.slide-up:not(:has(.cart-detail.off-canvas.active,.brxe-offcanvas.brx-open)) {
    overflow: visible;

    & #brxe-omgbkm {
        transition: transform 0.2s ease;
        transform: translateY(-100px);
    }
}

#brx-header.brx-sticky.sliding {
    overflow: visible;
}

.woocommerce{
    & .left-half,
    & .right-half {
        width: 49%;
        @media (max-width: 1240px) {
            width: 100%;
        }
    }
    & .left-half {
        float: left;
        clear: unset;
    }
    & .right-half {
        float: right;
        clear: unset;
    }

    & .select2{
        &.select2-container--open{
            & .selection{
                border-color: var(--primary);
            }
        }

        & .select2-selection{
            display: block;
            height: 100%;
            & .select2-selection__rendered{
                padding-block: var(--space-4xs);
            }
        }
    }
}

.select2-dropdown{
    border-color: var(--primary);
    background: var(--light);
    box-shadow: var(--shadow-l);
}

.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-account-fields {
    margin: 0 0 var(--space-m);
    --check-size: clamp(1.13rem,calc(0.37vw + 1.05rem),1.38rem);
}

.woocommerce-checkout .woocommerce-account-fields{
    margin: var(--space-m) 0;
}

.woocommerce-checkout .woocommerce-shipping-fields #ship-to-different-address label,
.woocommerce-checkout .woocommerce-account-fields .create-account label.woocommerce-form__label-for-checkbox{
    margin-bottom: 0;
    font-size: var(--text-m);
    display: grid;
    grid-template-columns: var(--check-size) auto;
    column-gap: var(--space-xs);
    align-items: center;
    cursor: pointer;
}

.woocommerce-checkout .woocommerce-shipping-fields #ship-to-different-address input,
.woocommerce-checkout .woocommerce-account-fields .create-account input[type="checkbox"]{
    position: static;
    transform: none;
    margin: 0;
}

.woocommerce-checkout .woocommerce,
.woocommerce-notices-wrapper {
    & .woocommerce-message,
    & .woocommerce-error,
    & .woocommerce-info{
        @media (max-width: 991.98px) {
            display: grid;
            grid-template-columns: 1fr;
            justify-items: center;
            text-align: center;
            row-gap: var(--space-m);
        }
        & .button{
            width: max-content;
        }
    }
}

.woocommerce-account .woocommerce-MyAccount-navigation {
    background: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
    padding: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
    margin-block: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation a {
    color: var(--text-body);
    font-weight: 600;
    padding: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation a:focus,
.woocommerce-account .woocommerce-MyAccount-navigation .is-active a {
    color: var(--secondary);
}

.woocommerce-account .woocommerce-form-login:not([class^=brxe-]), .woocommerce-account .woocommerce-form-register:not([class^=brxe-]) {
    border: none;
    padding: 0;
    text-align: left;
}

.woocommerce-account form .show-password-input {
    right: 2px;
}

.woocommerce-checkout .place-order .button {
    line-height: 1em;
}