/*
 * Compatibility aliases for the former Elementor global variables.
 * Point these at the Bricks palette / typography variables of the site
 * (e.g. var(--bricks-color-xxxxxx)) or set the values directly.
 */
:root {
    --e-global-color-primary: var(--bricks-color-primary, #000);
    --e-global-color-secondary: var(--bricks-color-secondary, #e30613);
    --e-global-color-text: var(--bricks-color-text, #333);
    --e-global-color-accent: var(--bricks-color-accent, #fff);
    --e-global-color-2d934f7: var(--bricks-color-light-grey, #eee);
    --e-global-typography-68b43bb-font-family: "Inter";
    --e-global-typography-primary-font-family: "Sport2000";
    --e-global-typography-secondary-font-family: "Sport2000";
    --e-global-typography-text-font-family: "Inter";
    --e-global-typography-accent-font-family: "Inter";
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
}

/* Utility from the former Hello Elementor theme.css, toggled by the gallery and rental process scripts */
.hide {
    display: none !important;
}

/* Linked images: no inline baseline gap under the image */
a.brxe-image>img {
    display: block;
}

/* Sticky header: only the main bar sticks, the red info bar scrolls away */
#brx-header:has(.sh-header-main) {
    display: contents;
}

.sh-header-main {
    position: sticky;
    top: var(--wp-admin--admin-bar--height, 0px);
    z-index: 10;
}

/* Compact state while stuck, class toggled by theme.js (former .elementor-sticky--active).
   The #brx-header prefix outranks the section padding Bricks sets by element id. */
#brx-header .sh-header-main.sticky {
    border-bottom: 1px solid #eee;
    padding-block: 20px;
}

h1,
h2,
h3,
h4,
strong,
bdi,
.woocommerce-Price-amount {
    font-family: var(--e-global-typography-primary-font-family) !important;
    font-weight: 700 !important;
}

/* Title Unterline Element */
h1.-underline,
h2.-underline,
h3.-underline,
h4.-underline,
.-underline h1,
.-underline h2,
.-underline h3,
.-underline h4 {
    padding-bottom: 16px;
    position: relative;

    &:after {
        content: "";
        display: flex;
        width: 100px;
        height: 3px;
        background: var(--e-global-color-secondary);
        position: absolute;
        left: 0;
        bottom: 0;
    }
}

/* Tax Font */
.includes_tax,
.wgm-tax {
    font-size: 12px !important;
    font-weight: 400 !important;
    font-family: var(--e-global-typography-primary-font-family) !important;

    * {
        font-family: var(--e-global-typography-primary-font-family) !important;
        font-weight: 400 !important;
        font-size: 12px !important;
    }
}

/* G-Translate */
.gtranslate_wrapper {
    display: flex;
    position: relative;

    .gt_switcher {
        width: 40px !important;

        .gt_option {
            position: absolute !important;
            top: calc(100% + 5px);
            display: flex !important;
            flex-direction: column !important;
            gap: 5px;

            a {
                &.gt_current {
                    display: none !important;
                }
            }
        }

        .gt_selected,
        .gt_option {
            width: 40px !important;
            background: none !important;
            border: none !important;

            a {
                display: flex;
                justify-content: space-between;
                align-items: center;
                border: none !important;
                background: none !important;
                font-size: 0 !important;
                padding: 0 !important;



                img {
                    width: 20px;
                    height: 20px;
                    aspect-ratio: 1;
                    border-radius: 50px;
                    object-fit: cover;
                }

                &:after {
                    right: 0 !important;
                }
            }
        }
    }
}

p:has(.includes_tax),
p:has(.wgm-break) {
    display: flex;
    flex-direction: column;
    align-items: end;

    .wgm-break {
        display: none;
    }
}

/* Bricks nested slider (former Elementor nested carousel) */
.sh-carousel {
    --arrow-size: 43.75px;
    --arrow-gap: 10px;
    padding-bottom: 80px !important;

    /* Space the Elementor carousel reserved below the slides for its (outside) pagination */
    .splide__track {
        padding-bottom: 26px;
    }

    .splide__slide {
        justify-content: flex-start;
    }

    &:not(.sh-slider-desktop-grid) {
        .splide__slide {
            box-shadow: inset 0 0 0 1px #9E9E9E;
            border-color: transparent !important;
        }
    }

    .splide__arrow {
        transform: none !important;
        top: auto !important;
        left: auto !important;
        bottom: 0 !important;
        right: 0;
        display: flex;
        width: var(--arrow-size);
        height: var(--arrow-size);
        aspect-ratio: 1;
        border-radius: 50%;
        background: #1D1D1C;
        align-items: center;
        justify-content: center;
        opacity: 1;
        z-index: 6 !important;

        svg,
        img {
            width: 20px !important;
            height: 20px !important;
        }

        &.splide__arrow--prev {
            right: calc(var(--arrow-size) + var(--arrow-gap));
            background: #eee;
        }

        &.splide__arrow--next svg path {
            stroke: #fff;
        }

        @media (max-width: 1024px) {
            right: auto !important;
            left: 50% !important;
            bottom: 4px !important;

            &.splide__arrow--prev {
                transform: translateX(calc(-50% - 69px)) !important;
                background: #fff;
            }

            &.splide__arrow--next {
                transform: translateX(calc(-50% + 69px)) !important;
            }
        }
    }

    &.sh-slider-desktop-grid .splide__slide {
        .brxe-image {
            height: auto !important;
        }

        img {
            width: auto !important;
            height: auto !important;
            aspect-ratio: 1/1 !important;
        }
    }

    @media (min-width: 1200px) {
        &.sh-slider-desktop-grid .splide__arrows {
            display: none !important;
        }
    }

    /* "1 von 5" counter between the arrows, rendered by theme.js (former Swiper fraction pagination) */
    .sh-carousel__fraction {
        display: none;

        @media (max-width: 1024px) {
            align-items: center;
            background: #eee;
            border-radius: 50px;
            bottom: 0;
            color: #000;
            display: flex;
            gap: 4px;
            height: calc(var(--arrow-size) + 8px);
            justify-content: center;
            left: 50%;
            /* The Swiper version had an extra empty flex item (the hidden " / ") plus one more gap at the start */
            padding-left: 4px;
            padding-right: 5px;
            position: absolute;
            transform: translateX(-50%);
            width: 190px;
            z-index: 0;
        }
    }
}

/* Banner after a self-service account deletion (inc/woocommerce/edit-account.php) */
.sh-account-deleted-notice {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
    background: #e0f5e5;
    color: #219e52;
    padding: 14px 24px;
    border-radius: 12px;
    font-size: 16px;
}

/* Animation */

@keyframes icon_loading {
    from {
        transform: translate(-50%, -50%) rotate(0);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}