:root {
    --tabbar-height: 96px;
    --tabbar-bar: #244288;
    --tabbar-active: #fff;
    --tabbar-center: #00b0dd;
    --tabbar-ease: cubic-bezier(0.32, 0.72, 0, 1);
}

.tabbar {
    display: none;
}

.header-catalog {
    display: block !important;
    transition: opacity .5s var(--tabbar-ease), transform .56s var(--tabbar-ease), visibility 0s linear .4s;
}

.header.is-catalog-open .header-catalog,
#header.is-catalog-open .header-catalog {
    transition: opacity .52s var(--tabbar-ease), transform .58s var(--tabbar-ease), visibility 0s;
}

@keyframes bp-popup-show {
    from {
        opacity: 0;
        transform: translate3d(0, 22px, 0) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@keyframes bp-popup-close {
    from {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }

    to {
        opacity: 0;
        transform: translate3d(0, 16px, 0) scale(0.98);
    }
}

@keyframes bp-overlay-show {
    from {
        opacity: 0;
    }

    to {
        opacity: 0.45;
    }
}

.popup-window.popup-window-show-animation-opacity,
.popup-window.popup-window-show-animation-opacity-transform {
    animation-name: bp-popup-show !important;
    animation-duration: .52s !important;
    animation-timing-function: var(--tabbar-ease) !important;
    animation-fill-mode: both !important;
}

.popup-window.popup-window-close-animation-opacity,
.popup-window.popup-window-close-animation-opacity-transform {
    animation-name: bp-popup-close !important;
    animation-duration: .4s !important;
    animation-timing-function: var(--tabbar-ease) !important;
    animation-fill-mode: both !important;
}

.popup-window-overlay {
    opacity: 0;
}

.popup-window-overlay[style*="display: block"],
.popup-window-overlay[style*="display:block"] {
    animation-name: bp-overlay-show;
    animation-duration: .45s;
    animation-timing-function: var(--tabbar-ease);
    animation-fill-mode: both;
}

@media (max-width: 767px) {
    .tabbar {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        position: fixed;
        left: 14px;
        right: 14px;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        z-index: 100;
        height: auto;
        padding: 0;
        background: transparent;
        border: none;
        box-shadow: none;
        pointer-events: none;
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        transition: opacity .45s var(--tabbar-ease), transform .5s var(--tabbar-ease);
    }

    .tabbar__bar {
        pointer-events: auto;
    }

    .tabbar__search {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
        display: grid;
        grid-template-rows: 0fr;
        margin-bottom: 0;
        min-height: 0;
        pointer-events: none;
    }

    .tabbar .header__search {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        max-width: none;
        height: auto;
        min-height: 0;
        overflow: hidden;
        visibility: hidden;
        opacity: 0;
        transform: translateY(22px);
        pointer-events: none;
        transition: opacity .38s var(--tabbar-ease), transform .48s var(--tabbar-ease), visibility 0s linear .38s;
    }

    .tabbar.is-search-open .tabbar__search {
        grid-template-rows: 1fr;
        pointer-events: auto;
    }

    .tabbar.is-search-open .header__search {
        overflow: visible;
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
        transition: opacity .5s var(--tabbar-ease) .06s, transform .56s var(--tabbar-ease), visibility 0s;
    }

    .tabbar.is-search-open .header__search-input {
        height: 46px;
        padding: 0 46px 0 16px;
        border: none;
        border-radius: 16px;
        background: #fff;
        box-shadow: 0 8px 24px rgba(20, 24, 40, 0.16);
        color: var(--osnovnoy-tekst);
        font-size: 15px;
    }

    .tabbar.is-search-open .header__search-input::placeholder,
    .tabbar.is-search-open .header__search-input::-webkit-input-placeholder,
    .tabbar.is-search-open .header__search-input::-moz-placeholder,
    .tabbar.is-search-open .header__search-input:-ms-input-placeholder,
    .tabbar.is-search-open .header__search-input:-moz-placeholder {
        color: var(--tekst-vnutri-okna);
    }

    .tabbar.is-search-open .header__search-submit {
        right: 12px;
    }

    .tabbar.is-search-open .header__search-submit-icon {
        fill: var(--tabbar-bar);
    }

    .tabbar.is-search-open .header__search-dropdown {
        top: auto;
        bottom: calc(100% + 8px);
        border: none;
        border-radius: 16px;
        background: #fff;
        box-shadow: 0 8px 24px rgba(20, 24, 40, 0.16);
    }

    .tabbar__bar {
        display: flex;
        align-items: center;
        height: 68px;
        padding: 0 6px;
        background: #244288;
        border-radius: 8px;
        box-shadow: 0 12px 28px rgba(20, 24, 40, 0.28);
        transform: translateY(0);
        transition: opacity .42s var(--tabbar-ease), transform .5s var(--tabbar-ease), visibility 0s;
    }

    .tabbar.is-search-open .tabbar__bar {
        opacity: 0;
        visibility: hidden;
        transform: translateY(18px);
        pointer-events: none;
        transition: opacity .34s var(--tabbar-ease), transform .46s var(--tabbar-ease), visibility 0s linear .34s;
    }

    .header__search-toggle {
        display: none !important;
    }

    .wrapper {
        padding-bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom, 0px));
    }

    .tabbar__item {
        display: flex;
        flex: 1;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        min-width: 0;
        margin: 0;
        padding: 0;
        border: none;
        background: none;
        color: rgba(255, 255, 255, 0.72);
        font: inherit;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .tabbar__item:hover,
    .tabbar__item.is-active,
    .tabbar.is-search-open .tabbar__search-btn {
        color: var(--tabbar-active);
    }

    .tabbar__icon-wrap {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        line-height: 0;
    }

    .tabbar__icon {
        width: 22px;
        height: 22px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .tabbar__label {
        font-family: var(--font-family);
        font-size: 11px;
        font-weight: 500;
        line-height: 1;
        white-space: nowrap;
    }

    .tabbar__item.is-active .tabbar__label,
    .tabbar.is-search-open .tabbar__search-btn .tabbar__label {
        font-weight: 700;
    }

    .tabbar__item--center {
        flex: 0 0 78px;
        color: #fff;
    }

    .tabbar__item--center:hover,
    .tabbar__item--center.is-active {
        color: #fff;
    }

    .tabbar__item--center .tabbar__icon-wrap {
        width: 64px;
        height: 64px;
        margin-top: -8px;
        border-radius: 50%;
        background: #00b0dd;
        box-shadow: 0 0 0 5px #fff, 0 8px 18px rgba(0, 176, 221, 0.38);
    }

    .tabbar__item--center .tabbar__icon {
        width: 26px;
        height: 26px;
        stroke: #fff;
    }

    .tabbar__item--center .tabbar__label {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        border: 0;
    }

    .tabbar__badge {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: -5px;
        right: -8px;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        border-radius: 8px;
        background: var(--zelenyy);
        color: var(--belyy);
        font-size: 10px;
        font-weight: 600;
        line-height: 1;
    }

    .header-catalog {
        display: block !important;
        height: calc(100vh - 56px - var(--tabbar-height) - env(safe-area-inset-bottom, 0px));
        height: calc(100dvh - 56px - var(--tabbar-height) - env(safe-area-inset-bottom, 0px));
        opacity: 0;
        visibility: hidden;
        transform: translateY(-24px);
        pointer-events: none;
        transition: opacity .42s var(--tabbar-ease), transform .56s var(--tabbar-ease), visibility 0s linear .42s;
    }

    #header.is-catalog-open .header-catalog {
        height: calc(100vh - 56px);
        height: calc(100dvh - 56px);
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
        transition: opacity .52s var(--tabbar-ease), transform .58s var(--tabbar-ease), visibility 0s;
    }

    .catalog-aside__mobile-popup {
        display: block !important;
        opacity: 0;
        visibility: hidden;
        transform: translateY(24px);
        pointer-events: none;
        transition: opacity .42s var(--tabbar-ease), transform .56s var(--tabbar-ease), visibility 0s linear .42s;
    }

    .catalog-aside__mobile-popup.is-show {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
        transition: opacity .52s var(--tabbar-ease), transform .58s var(--tabbar-ease), visibility 0s;
    }

    body:has(#header.is-catalog-open) .tabbar,
    body:has(.popup-window.--open) .tabbar,
    .tabbar.is-hidden {
        opacity: 0;
        visibility: hidden;
        transform: translateY(20px);
        pointer-events: none;
        transition: opacity .36s var(--tabbar-ease), transform .48s var(--tabbar-ease), visibility 0s linear .36s;
    }

    body:has(#header.is-catalog-open) .tabbar .tabbar__search,
    body:has(#header.is-catalog-open) .tabbar .tabbar__bar,
    body:has(.popup-window.--open) .tabbar .tabbar__search,
    body:has(.popup-window.--open) .tabbar .tabbar__bar,
    .tabbar.is-hidden .tabbar__search,
    .tabbar.is-hidden .tabbar__bar {
        pointer-events: none;
    }

    body .catalog-aside__mobile-popup {
        height: calc(100% - 56px - var(--tabbar-height) - env(safe-area-inset-bottom, 0px));
    }

    .fixed-cookie {
        bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom, 0px));
    }

    .popup-custom.popup-window.is-keyboard-fit {
        position: fixed !important;
        top: var(--popup-vv-top, 0px) !important;
        bottom: auto !important;
        left: 0 !important;
        width: 100% !important;
        height: var(--popup-vv-height, 100%) !important;
        max-height: var(--popup-vv-height, 100%) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        touch-action: pan-y;
        justify-content: flex-start !important;
    }

    .popup-custom.popup-window.is-keyboard-fit.is-keyboard-scroll .popup-window-content {
        margin-top: 12px;
        margin-bottom: 28px;
    }
}