.app-header {
    position: fixed;
    z-index: 5;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    text-transform: uppercase;
    font: normal 1.3rem Geneva, sans-serif;
    background-color: var(--background);
    color: var(--gray);

    .app-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        z-index: 1;
        height: 100%;
        background-color: var(--background);
        transition: padding-top .2s, padding-bottom .2s;
        padding-block: 20px;
        @media (width >= 1024px) {
            padding-block: 30px;
        }
        @media (width >= 1280px) {
            padding-block: 45px;
        }
        @media (width >= 1536px) {
            padding-block: 60px;
        }
    }

    .app-logo-wrapper {
        position: absolute !important;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        height: 100%;
        padding: 8px 0;
        display: grid;
        place-content: center;
        img {
            width: 70px;
            height: auto;
            object-fit: cover;
            object-position: center top;
            @media (width >= 1024px) {
                width: 90px;
            }
            @media (width >= 1280px) {
                width: 108px;
            }
            @media (width >= 1536px) {
                width: 124px;
            }
        }
        &::after {
            display: none;
        }
    }

    &.app-reduced {
        .app-container {
            padding-block: 8px;
            @media (width >= 1024px) {
                padding-block: 14px;
            }
            @media (width >= 1280px) {
                padding-block: 20px;
            }
            @media (width >= 1536px) {
                padding-block: 25px;
            }
        }
        .app-logo-wrapper img {
            height: 36px;
            @media (width >= 1024px) {
                height: 46px;
            }
            @media (width >= 1280px) {
                height: 57px;
            }
            @media (width >= 1536px) {
                height: 66px;
            }
        }
        .app-side-menu {
            padding-top: calc(var(--header-height-md-reduced) + 30px);
            transition: transform .4s;
            @media (width >= 1024px) {
                padding-top: calc(var(--header-height-lg-reduced) + 30px);
            }
            @media (width >= 1280px) {
                padding-top: calc(var(--header-height-xl-reduced) + 30px);
            }
            @media (width >= 1536px) {
                padding-top: calc(var(--header-height-xxl-reduced) + 30px);
            }
        }
    }

    .app-menu-1 {
        display: flex;
        align-items: center;
        > * {
            margin-right: 30px;
            cursor: pointer;
        }
    }

    .app-menu-2 {
        display: flex;
        align-items: center;
        > * {
            margin-left: 30px;
            cursor: pointer;
        }
    }

    .app-side-menu {
        position: fixed;
        top: 0;
        bottom: 0;
        display: flex;
        flex-direction: column;
        width: var(--side-menu-width);
        padding: calc(var(--header-height-md) + 30px) 15px 30px;
        background-color: var(--background);
        transition: transform .4s, padding-top .4s;
        @media (width >= 1024px) {
            padding-top: calc(var(--header-height-lg) + 30px);
            padding-inline: 30px;
        }
        @media (width >= 1280px) {
            padding-top: calc(var(--header-height-xl) + 30px);
            padding-inline: 45px;
        }
        @media (width >= 1536px) {
            padding-top: calc(var(--header-height-xxl) + 30px);
            padding-inline: 60px;
        }
        > a {
            display: block;
            width: fit-content;
            margin-bottom: 45px;
        }
        &.app-shown {
            transform: translateX(0);
        }
    }
    .app-side-menu-left {
        left: 0;
        align-items: flex-start;
        border-right: 1px solid var(--beige);
        text-align: left;
        transform: translateX(-100%);
    }
    .app-side-menu-right {
        right: 0;
        align-items: flex-end;
        border-left: 1px solid var(--beige);
        transform: translateX(100%);
    }
    .app-menu-estates {
        text-align: center;
        @media (width >= 768px) {
            width: 400px;
        }
        > a, > div {
            margin: 15px auto;
        }
        > a {
            margin-top: 0;
            padding: 0;
        }
        img {
            width: 100%;
            aspect-ratio: 2 / 1;
            object-fit: cover;
            margin-bottom: 15px;
        }
        span, p {
            display: block;
            margin-top: 15px;
            text-transform: none;
            font-family: Gotham, sans-serif;
            font-size: 1.3rem;
        }
    }

    .app-mobile-menu-trigger {
        width: 100px;
        height: 45px;
        background: url(/wp-content/themes/origins/assets/images/menu.svg) no-repeat center center / contain;
    }

    .app-mobile-menu {
        position: fixed;
        z-index: 3;
        top: 85px;
        left: 0;
        width: 100%;
        bottom: 0;
        padding: 30px;
        background-color: var(--background);
        transform: translateX(-100%);
        transition: top .1s, transform .4s;
        overflow: auto;
        &.app-increased {
            top: 61px;
        }
        &.app-shown {
            transform: translateX(0);
        }
        .app-menu-estates {
            padding: 15px 0;
            > a::after {
                opacity: 1;
            }
            > div:first-of-type {
                margin: 45px 0 30px;
            }
        }
        > span, > a {
            display: block;
            padding: 15px 0;
        }
        > span {
            img {
                width: 15px;
                margin-left: 15px;
                transition: transform .2s;
            }
            &.app-active {
                img {
                    transform: rotate(180deg);
                }
            }
        }
        > span + div {
            display: none;
            &:not(.app-menu-estates) {
                a {
                    display: block;
                    margin-left: 30px;
                    padding: 15px 0;
                }
            }
        }
    }
}

aside.country-selector.weglot-dropdown {
    .wgcurrent::after {
        top: 15px;
        transform: rotate(0);
        background-image: url(/wp-content/themes/origins/assets/images/arrow-down.svg);
    }
    .wgcurrent span, a{
        padding-right: 30px;
        @media (width < 768px) {
            padding-left: 0;
            padding-right: 40px;
        }
    }

    &, .wgcurrent, ul {
        border: none;
        background-color: var(--background);
    }
    a {
        color: inherit;
        &:hover::after {
            display: none;
        }
    }

    input:checked ~ .wgcurrent::after {
        transform: rotate(180deg);
    }
}