/* =========== © 2025 Centroarts.com - https://5play.org =========== */

:root {
    --header-h: 72px;
    --headersec-h: 64px;
    --logo-h: 38px;
    --logo-max-w: 180px;
    scroll-padding-top: var(--headersec-h);
}

.header-first {
    height: var(--header-h);
}

.header-first .wrp {
    height: inherit;
}

.head-r {
    margin-left: auto;
}

@media (min-width: 992px) {
    :root {
        --header-h: 80px;
        --headersec-h: var(--header-h);
        --logo-h: 46px;
        --logo-max-w: 220px;
    }

    .header-first {
        position: sticky;
        top: 0;
        z-index: 99;
        background-color: hsl(var(--c-body));
    }
}

/* Logo */
.logotype {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: auto;
    max-width: min(52vw, var(--logo-max-w));
    min-width: 0;
    line-height: 0;
}

.head-l {
    min-width: 0;
}

.logotype svg {
    width: 100px;
    height: 36px;
    display: block;
    flex: 0 0 auto;
}

.logotype img,
.logotype .custom-logo,
.logotype .logotype-image {
    display: block;
    width: auto !important;
    height: auto !important;
    max-width: 100%;
    max-height: var(--logo-h);
    object-fit: contain;
    object-position: left center;
}

@media (max-width: 575px) {
    .logotype {
        max-width: min(56vw, 160px);
    }
}

.logo-text,
.logo-icon path:nth-child(3) {
    fill: hsl(var(--c-primary));
}

/* Right Buttons */
.hbtn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s ease;
}

.hbtn+.hbtn {
    margin-left: 4px;
}

.hbtn:hover {
    transform: scale(1.04);
}

.hbt .im {
    width: 24px;
    height: 24px;
    transition: transform .2s ease, opacity .2s ease;
    opacity: 0;
    transform: scale(0.5);
}

.hbt .im+.im {
    margin-left: -24px;
}

/* Dark Mod */
html.darkmod .mod-btn .im-sun,
html:not(.darkmod) .mod-btn .im-moon {
    opacity: 1;
    transform: scale(1);
}

/* QSearch BTN */
@media (min-width: 992px) {
    .head-r .qs-toggle {
        display: flex !important;
    }
}

html.qs .head-r .qs-toggle .im-close,
html:not(.qs) .head-r .qs-toggle .im-search {
    opacity: 1;
    transform: scale(1);
}

/* Login BTN */
.hbtn+.huser {
    margin-left: 8px;
}

.huser .mask {
    --mask-img: url(../img/user-mask.svg);
    --mask-w: 100%;
    --mask-h: 100%;
    --mask-size: auto 100%;

    display: flex;
    align-items: center;
    justify-content: center;
    width: inherit;
    height: inherit;
}

.huser.hlogin .mask {
    --mask-bg: hsla(var(--c-primary), 0.2);
}

.huser.hlogin .mask .im {
    --im-color: hsl(var(--c-primary));
}

.huser.hlogged .mask {
    --mask-bg: hsla(var(--c-second), 0.2);
}

html.darkmod .huser.hlogged .mask {
    --mask-bg: hsla(var(--c-text), 0.2);
}

.huser.hlogged .mask img {
    width: inherit;
    height: inherit;
}

/* Head Menu */
.header-tools,
.header-second {
    height: var(--headersec-h);
}

@media (max-width: 991px) {
    .header-second {
        position: sticky;
        top: 0;
        z-index: 99;
        margin-top: -8px;
        padding-left: 0;
        padding-right: 0;
        background-color: hsl(var(--c-body));
    }

    .header-second.scrolled .qs-form {
        position: fixed;
        inset: 0;
        bottom: auto;
    }

    .header-second.scrolled.searchopen .qs-form {
        margin-top: 0;
    }
}

@media (min-width: 992px) {
    .header-second {
        margin-top: calc(var(--header-h)/-1);
        pointer-events: none;
        position: sticky;
        top: 0;
        z-index: 99;
    }

    .header-tools {
        pointer-events: all;
        margin: 0 188px;
    }

    .hbtn+.huser {
        margin-left: 16px;
    }

    #header-placeholder {
        display: none;
    }
}

.hmenu-list,
.qs-control {
    transition: opacity .25s ease, transform .25s ease;
    will-change: transform;
}

html.qs .hmenu-list {
    transform: translateY(-16px);
    opacity: 0;
    pointer-events: none;
}

.hmenu,
.qs-form {
    position: relative;
    height: var(--headersec-h);
}

@media (max-width: 991px) {
    .hmenu-list {
        min-width: 100%;
        padding: 0 calc(var(--wrp-p) - 12px);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        scroll-snap-type: x mandatory;
    }

    .hmenu-list::-webkit-scrollbar {
        display: none;
    }

    .hmenu-list .m-item {
        scroll-margin-left: calc(var(--wrp-p) - 12px);
        scroll-margin-right: calc(var(--wrp-p) - 12px);
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .hmenu-list a.m-item {
        display: flex !important;
    }

    .hmenu-list .qs-toggle {
        order: -1;
        display: flex !important;
    }
}

@media (min-width: 992px) {
    .hmenu-list>button.m-item {
        display: none !important;
    }

    .hmenu-list .dropdown {
        display: block !important;
    }

    .hmenu-list .dropdown-box {
        min-width: 240px;
    }

    .hmenu-list .dropdown-box .hmenu-sub-list {
        padding: var(--dropdown-p);
    }

    .hmenu-list .dropdown-box .hmenu-sub-list+.hmenu-sub-list {
        border-top: 1px solid hsla(var(--c-text), .1);
    }
}

/* Quick Search Field */
.qs-form {
    overflow: hidden;
    margin-top: calc(var(--headersec-h)/-1);
    pointer-events: none;
}

.qs-form .qs-control {
    transform: translateY(16px);
    opacity: 0;
    pointer-events: none;
}

.searchopen .qs-control {
    transform: translateY(0);
    opacity: 1;
    pointer-events: all;
}

.qs-control {
    --qs-field-h: 48px;
    --qs-field-lh: 24px;
    --qs-field-c-bg: hsl(var(--c-body));
    --qs-field-c-brd: hsla(var(--c-text), 0.15);
    --qs-field-rd: 24px;

    display: flex;
    width: 100%;
    position: relative;
}

.qs-input {
    height: var(--qs-field-h) !important;
    line-height: var(--qs-field-lh) !important;
    padding: calc((var(--qs-field-h) - var(--qs-field-lh))/2) calc((var(--qs-field-h) - var(--qs-field-lh))/1.5) !important;
    background-color: var(--qs-field-c-bg) !important;
    box-shadow: inset 0 0 0 1.5px var(--qs-field-c-brd) !important;
    border-radius: var(--qs-field-rd) !important;

    padding-right: calc(var(--qs-field-h) + 12px) !important;
}

.qs-input:focus {
    --qs-field-c-brd: hsla(var(--c-primary), 0.5);
}

.qs-control .qs-toggle,
.qs-control .qs-btn {
    position: absolute;
    top: 0;
    width: var(--qs-field-h);
    height: var(--qs-field-h);
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 992px) {
    .qs-control .qs-toggle {
        display: none;
    }
}

@media (max-width: 991px) {
    .qs-form {
        padding-left: calc(var(--wrp-p) - 10px);
        padding-right: calc(var(--wrp-p) - 10px);
    }

    .qs-control {
        --qs-field-h: 44px;
    }

    .qs-control .qs-toggle {
        left: 0;
    }

    .qs-control .qs-toggle .im {
        position: relative;
        --im-size: 16px;
        --im-color: hsl(var(--c-primary));
    }

    .qs-control .qs-toggle .im::after {
        content: "";
        position: absolute;
        left: calc(50% - 14px);
        top: calc(50% - 14px);
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background-color: hsla(var(--c-primary), 0.2);
    }

    .qs-input {
        padding-left: var(--qs-field-h) !important;
    }

}

.qs-control .qs-btn {
    right: 0;
}

/* --- Быстрый поиск --- */
html:not(.qs) #searchsuggestions {
    display: none !important;
}

#searchsuggestions {
    z-index: 2200;
    position: fixed !important;
    border-radius: var(--modal-rd);
    overflow: hidden;
    background-color: hsl(var(--modal-bg));
    box-shadow: var(--modal-sw);
    background-clip: padding-box;
    font-size: var(--fs-2);
    box-sizing: border-box;
    padding: 12px 20px;
}

.fastsearch-item {
    display: flex;
    align-items: center;
    padding: 8px 0;
}

.fastsearch-item:not(:first-child) {
    border-top: 1px solid var(--c-border);
}

.fastsearch-item .cover {
    align-self: start;
    min-width: 40px;
    flex: 0 0 40px;
    height: 40px;
    background-color: hsla(var(--c-text), .1);
    aspect-ratio: 1 / 1;
    border-radius: 22%;
}

.fastsearch-title {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 12px;
}

.fastsearch-item .fastsearch-title>span {
    opacity: .7;
    transition: opacity .12s ease;
}

.fastsearch-item:hover .fastsearch-title>span {
    opacity: 1;
}

.fastsearch-title>span {
    display: block;
    line-height: 1.5em;
    max-height: 3em;
    overflow: hidden;
}

@media (min-width: 992px) and (max-width: 1407px) {
    #searchsuggestions {
        left: calc(var(--wrp-p) + 188px) !important;
        right: calc(var(--wrp-p) + 188px) !important;
    }
}

@media (max-width: 991px) {
    #searchsuggestions {
        top: 132px !important;
        left: var(--wrp-p) !important;
        right: var(--wrp-p) !important;
    }

    .scrolled~#searchsuggestions {
        top: var(--headersec-h) !important;
    }
}

@media (min-width: 992px) {
    #searchsuggestions {
        top: var(--header-h) !important;
        margin-top: -8px !important;
    }
}

@media (min-width: 1408px) {
    #searchsuggestions {
        width: 888px !important;
        left: 50% !important;
        transform: translateX(-50%);
    }
}

#searchsuggestions .seperator {
    display: none;
}

/* --- Mobile Menu --- */
@media (min-width: 992px) {
    .mobilemenu {
        display: none !important;
    }
}

@media (max-width: 991px) {
    .mobilemenu {
        position: fixed;
        right: 0;
        left: calc(50% - 180px);
        top: 50%;
        z-index: 103;
        margin: 8px;
        width: 360px;
        min-width: 280px;
        opacity: 0;
        visibility: hidden;
        transform: translate(0, calc(50%/-1 + 32px));
        background-color: hsl(var(--modal-bg));
        border-radius: var(--modal-rd);
        box-shadow: var(--modal-sw);

        transition: opacity .3s ease, visibility .3s ease, transform .3s ease;
    }

    .mobilemenu-cont {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        max-height: 90vh;
        padding: 32px 20px;
    }

    .mobilemenu-cont::-webkit-scrollbar {
        display: none;
    }

    .mmenu-list+.mmenu-sublist {
        margin-top: 24px;
    }

    .mobile-menu-overlay {
        position: fixed;
        inset: 0;
        z-index: 101;
        background-color: var(--modal-overlay);
        transition: opacity .3s ease, visibility .3s ease;
        opacity: 0;
        visibility: hidden;
    }

    html.mo body {
        overflow: hidden;
    }

    html.mo .mobilemenu {
        transform: translate(0, -50%);
    }

    html.mo .mobile-menu-overlay,
    html.mo .mobilemenu {
        opacity: 1;
        visibility: visible;
    }
}

@media (max-width: 575px) {
    .mobilemenu {
        top: auto;
        left: 0;
        bottom: 0;
        width: auto;
        max-width: 100%;
        margin: 0;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        transform: translateY(32px);
    }

    html.mo .mobilemenu {
        transform: translateY(0);
    }
}