/* ========================================================================
   SITE HEADER — SHAIYA ADDICTED
   ======================================================================== */

.site-header {
    position: absolute;

    left: 0;
    right: 0;
    top: 0;

    z-index: 40;

    height: 66px;

    background:
        linear-gradient(
            180deg,
            rgba(13, 16, 20, .97),
            rgba(12, 15, 18, .91)
        );

    border-bottom:
        1px solid rgba(208, 198, 150, .09);

    box-shadow:
        0 8px 28px rgba(0, 0, 0, .20);

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);
}


.site-header::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: -1px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(208, 198, 150, .05) 18%,
            rgba(208, 198, 150, .25) 50%,
            rgba(208, 198, 150, .05) 82%,
            transparent 100%
        );

    pointer-events: none;
}


.site-header__inner {
    display: flex !important;

    align-items: center !important;

    height: 66px;

    margin: 0 auto;
}


/* ------------------------------------------------------------------------
   BRAND
   ------------------------------------------------------------------------ */

.site-header__brand {
    display: flex;
    align-items: center;

    flex: 0 0 auto;

    min-width: 168px;

    margin-right: 17px;

    color: inherit !important;

    text-decoration: none !important;
}


.site-header__brand-mark {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    margin-right: 9px;

    color: #e4d9a5;

    background:
        linear-gradient(
            145deg,
            rgba(208, 198, 150, .14),
            rgba(208, 198, 150, .035)
        );

    border:
        1px solid rgba(208, 198, 150, .20);

    border-radius: 7px;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .04),
        0 4px 12px rgba(0, 0, 0, .13);

    font-family:
        HelveticaNeue,
        Arial,
        sans-serif;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: .7px;
}


.site-header__brand-text {
    display: flex;
    flex-direction: column;

    min-width: 0;
}


.site-header__brand-text strong {
    color: #e7eaed;

    font-family:
        HelveticaNeue,
        Arial,
        sans-serif;

    font-size: 12px;
    line-height: 15px;
    font-weight: 700;

    white-space: nowrap;
}


.site-header__brand-text small {
    margin-top: 1px;

    color: #626d77;

    font-size: 8px;
    line-height: 10px;

    letter-spacing: .55px;
    text-transform: uppercase;
}


/* ------------------------------------------------------------------------
   NAVIGATION
   ------------------------------------------------------------------------ */

.site-header__nav {
    display: flex;
    align-items: stretch;

    flex: 1 1 auto;

    height: 66px;

    min-width: 0;
}


.site-header__nav-item {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    height: 66px;

    margin: 0;

    padding: 0 13px;

    color: #aeb5bc !important;

    background: transparent;

    border: 0;

    font-family:
        HelveticaNeue,
        Arial,
        sans-serif;

    font-size: 12px;
    line-height: 66px;
    font-weight: 500;

    letter-spacing: .15px;

    text-decoration: none !important;

    text-transform: uppercase;

    cursor: pointer;

    transition:
        color .16s ease,
        background .16s ease;
}


.site-header__nav-item::after {
    content: "";

    position: absolute;

    left: 13px;
    right: 13px;
    bottom: 0;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            rgba(208, 198, 150, .35),
            #d0c696,
            rgba(208, 198, 150, .35)
        );

    opacity: 0;

    transform:
        scaleX(.4);

    transition:
        opacity .16s ease,
        transform .16s ease;
}


.site-header__nav-item:hover,
.site-header__nav-item.is-active {
    color: #eee6bd !important;

    background:
        linear-gradient(
            180deg,
            rgba(208, 198, 150, .035),
            rgba(208, 198, 150, .010)
        );
}


.site-header__nav-item:hover::after,
.site-header__nav-item.is-active::after {
    opacity: 1;

    transform:
        scaleX(1);
}


/* ------------------------------------------------------------------------
   DROPDOWN TRIGGER
   ------------------------------------------------------------------------ */

.site-header__nav-item--dropdown {
    padding: 0;
}


.site-header__nav-trigger {
    display: flex;
    align-items: center;
    justify-content: center;

    height: 66px;

    margin: 0;
    padding: 0 13px;

    color: inherit;

    background: transparent;

    border: 0;

    font: inherit;
    line-height: 66px;

    text-transform: inherit;

    cursor: pointer;
}


.site-header__chevron {
    width: 6px;
    height: 6px;

    margin:
        -4px 0
        0 7px;

    border-right:
        1px solid currentColor;

    border-bottom:
        1px solid currentColor;

    transform:
        rotate(45deg);

    opacity: .60;

    transition:
        transform .16s ease,
        opacity .16s ease;
}


.site-header__nav-item--dropdown:hover
.site-header__chevron,
.site-header__nav-item--dropdown:focus-within
.site-header__chevron {
    opacity: 1;

    transform:
        translateY(3px)
        rotate(225deg);
}


/* ------------------------------------------------------------------------
   DROPDOWN
   ------------------------------------------------------------------------ */

.site-header__dropdown {
    position: absolute;

    left: 0;
    top: calc(100% - 1px);

    z-index: 60;

    width: 255px;

    padding: 7px;

    visibility: hidden;
    opacity: 0;

    background:
        linear-gradient(
            180deg,
            rgba(20, 24, 28, .99),
            rgba(12, 15, 18, .99)
        );

    border:
        1px solid rgba(208, 198, 150, .12);

    border-radius:
        0 0
        6px 6px;

    box-shadow:
        0 16px 35px rgba(0, 0, 0, .35);

    transform:
        translateY(6px);

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


.site-header__dropdown::before {
    content: "";

    position: absolute;

    left: 12px;
    right: 12px;
    top: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(208, 198, 150, .55),
            transparent
        );
}


.site-header__dropdown--right {
    left: auto;
    right: 0;
}


.site-header__nav-item--dropdown:hover
.site-header__dropdown,
.site-header__nav-item--dropdown:focus-within
.site-header__dropdown {
    visibility: visible;
    opacity: 1;

    transform:
        translateY(0);
}


.site-header__dropdown-item {
    display: grid;

    grid-template-columns:
        34px
        minmax(0, 1fr);

    align-items: center;

    gap: 9px;

    min-height: 48px;

    padding: 6px 8px;

    color: #b7bec5 !important;

    background:
        transparent;

    border:
        1px solid transparent;

    border-radius: 4px;

    text-decoration: none !important;

    transition:
        color .15s ease,
        background .15s ease,
        border-color .15s ease;
}


.site-header__dropdown-item:hover,
.site-header__dropdown-item.is-active {
    color: #eadfac !important;

    background:
        rgba(208, 198, 150, .055);

    border-color:
        rgba(208, 198, 150, .09);
}


.site-header__dropdown-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;

    color: #8e958c;

    background:
        rgba(255, 255, 255, .025);

    border:
        1px solid rgba(255, 255, 255, .05);

    border-radius: 5px;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: .2px;

    transition:
        color .15s ease,
        border-color .15s ease,
        background .15s ease;
}


.site-header__dropdown-item:hover
.site-header__dropdown-icon,
.site-header__dropdown-item.is-active
.site-header__dropdown-icon {
    color: #d8ce99;

    background:
        rgba(208, 198, 150, .06);

    border-color:
        rgba(208, 198, 150, .12);
}


.site-header__dropdown-item > span:last-child {
    display: flex;
    flex-direction: column;

    min-width: 0;
}


.site-header__dropdown-item strong {
    color: inherit;

    font-size: 11px;
    line-height: 14px;
    font-weight: 700;
}


.site-header__dropdown-item small {
    margin-top: 2px;

    color: #69737d;

    font-size: 8px;
    line-height: 11px;
}


/* ------------------------------------------------------------------------
   ACCOUNT
   ------------------------------------------------------------------------ */

.site-header__account {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    flex: 0 0 auto;

    min-width: 150px;

    margin-left: 12px;
}


.site-header__profile {
    display: grid;

    grid-template-columns:
        30px
        minmax(0, 1fr);

    align-items: center;

    gap: 8px;

    min-width: 112px;

    padding:
        5px 8px;

    color: inherit !important;

    background:
        rgba(255, 255, 255, .025);

    border:
        1px solid rgba(255, 255, 255, .055);

    border-radius: 5px;

    text-decoration: none !important;

    transition:
        background .15s ease,
        border-color .15s ease;
}


.site-header__profile:hover {
    background:
        rgba(208, 198, 150, .05);

    border-color:
        rgba(208, 198, 150, .13);
}


.site-header__profile-icon {
    position: relative;

    display: block;

    width: 28px;
    height: 28px;

    background:
        linear-gradient(
            145deg,
            rgba(208, 198, 150, .12),
            rgba(208, 198, 150, .035)
        );

    border:
        1px solid rgba(208, 198, 150, .13);

    border-radius: 50%;
}


.site-header__profile-icon::before {
    content: "";

    position: absolute;

    left: 50%;
    top: 6px;

    width: 7px;
    height: 7px;

    background: #c9bf90;

    border-radius: 50%;

    transform:
        translateX(-50%);
}


.site-header__profile-icon::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 5px;

    width: 13px;
    height: 7px;

    background: #c9bf90;

    border-radius:
        8px 8px
        5px 5px;

    transform:
        translateX(-50%);
}


.site-header__profile-text {
    display: flex;
    flex-direction: column;

    min-width: 0;
}


.site-header__profile-text small {
    color: #626c76;

    font-size: 7px;
    line-height: 9px;

    text-transform: uppercase;
}


.site-header__profile-text strong {
    max-width: 105px;

    overflow: hidden;

    color: #d4d8dc;

    font-size: 10px;
    line-height: 13px;
    font-weight: 600;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.site-header__logout {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;

    margin-left: 7px;

    color: #7d858d !important;

    background:
        rgba(255, 255, 255, .025);

    border:
        1px solid rgba(255, 255, 255, .055);

    border-radius: 5px;

    font-family: Arial, sans-serif;

    font-size: 16px;

    text-decoration: none !important;

    transition:
        color .15s ease,
        background .15s ease,
        border-color .15s ease;
}


.site-header__logout:hover {
    color: #d7cc98 !important;

    background:
        rgba(208, 198, 150, .06);

    border-color:
        rgba(208, 198, 150, .13);
}


/* ------------------------------------------------------------------------
   GUEST ACCOUNT
   ------------------------------------------------------------------------ */

.site-header__login,
.site-header__register {
    display: flex;
    align-items: center;
    justify-content: center;

    height: 34px;

    padding: 0 12px;

    border-radius: 4px;

    font-size: 10px;
    font-weight: 600;

    text-decoration: none !important;

    transition:
        color .15s ease,
        background .15s ease,
        border-color .15s ease;
}


.site-header__login {
    color: #aab2ba !important;

    background:
        rgba(255, 255, 255, .025);

    border:
        1px solid rgba(255, 255, 255, .06);
}


.site-header__login:hover {
    color: #e4e7ea !important;

    background:
        rgba(255, 255, 255, .045);
}


.site-header__register {
    margin-left: 6px;

    color: #18150e !important;

    background:
        linear-gradient(
            180deg,
            #d9cf9a,
            #bcb17a
        );

    border:
        1px solid #d0c696;
}


.site-header__register:hover {
    color: #111 !important;

    background:
        linear-gradient(
            180deg,
            #e3d9a5,
            #c8bd83
        );
}


/* ------------------------------------------------------------------------
   KEEP EXISTING HEADER BACKGROUND PLACEMENT
   ------------------------------------------------------------------------ */

/*
|--------------------------------------------------------------------------
| Старый .top-nav больше не используется, но top-video оставляем как есть.
| Новая шапка имеет высоту 66px вместо 58px.
|--------------------------------------------------------------------------
*/


@media (max-width: 1250px) {

    .site-header__brand {
        min-width: 150px;

        margin-right: 8px;
    }


    .site-header__nav-item,
    .site-header__nav-trigger {
        padding-left: 9px;
        padding-right: 9px;

        font-size: 11px;
    }


    .site-header__account {
        min-width: 135px;

        margin-left: 7px;
    }


    .site-header__profile {
        min-width: 100px;
    }

}



/* ========================================================================
   SITE HEADER V2 — FINAL POLISH
   ======================================================================== */


/* ------------------------------------------------------------------------
   MENU SPACING
   ------------------------------------------------------------------------ */

.site-header__nav {
    column-gap: 3px !important;
}


.site-header__nav-item {
    padding-left: 15px !important;
    padding-right: 15px !important;
}


.site-header__nav-trigger {
    padding-left: 15px !important;
    padding-right: 15px !important;
}


/* ------------------------------------------------------------------------
   ACTIVE ITEM
   ------------------------------------------------------------------------ */

.site-header__nav-item::after {
    left: 23% !important;
    right: 23% !important;

    height: 1px !important;

    bottom: 0 !important;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(208, 198, 150, .75) 25%,
            #d0c696 50%,
            rgba(208, 198, 150, .75) 75%,
            transparent 100%
        ) !important;

    box-shadow:
        0 0 7px rgba(208, 198, 150, .22) !important;
}


.site-header__nav-item.is-active {
    color: #eee5b7 !important;

    text-shadow:
        0 0 7px rgba(208, 198, 150, .16);
}


.site-header__nav-item:hover {
    color: #e6dfbd !important;
}


/* ------------------------------------------------------------------------
   DROPDOWN POSITION
   ------------------------------------------------------------------------ */

/*
|--------------------------------------------------------------------------
| Dropdown начинается ровно под пунктом меню.
|--------------------------------------------------------------------------
*/

.site-header__nav-item--dropdown {
    position: relative !important;
}


.site-header__dropdown {
    left: 50% !important;
    right: auto !important;

    top: calc(100% - 1px) !important;

    transform:
        translate(-50%, 6px) !important;
}


.site-header__nav-item--dropdown:hover
.site-header__dropdown,
.site-header__nav-item--dropdown:focus-within
.site-header__dropdown {
    transform:
        translate(-50%, 0) !important;
}


/* Сообщество держим внутри правой границы header */

.site-header__dropdown--right {
    left: auto !important;
    right: 0 !important;

    transform:
        translate(0, 6px) !important;
}


.site-header__nav-item--dropdown:hover
.site-header__dropdown--right,
.site-header__nav-item--dropdown:focus-within
.site-header__dropdown--right {
    transform:
        translate(0, 0) !important;
}


/* ------------------------------------------------------------------------
   DROPDOWN POLISH
   ------------------------------------------------------------------------ */

.site-header__dropdown {
    padding: 8px !important;

    background:
        linear-gradient(
            180deg,
            rgba(20, 24, 28, .995),
            rgba(11, 14, 17, .995)
        ) !important;

    border-color:
        rgba(208, 198, 150, .14) !important;

    box-shadow:
        0 16px 34px rgba(0, 0, 0, .40),
        inset 0 1px 0 rgba(255, 255, 255, .02) !important;
}


.site-header__dropdown-item {
    min-height: 50px !important;

    padding:
        7px 9px !important;
}


.site-header__dropdown-item + .site-header__dropdown-item {
    margin-top: 2px;
}


/* ------------------------------------------------------------------------
   BRAND
   ------------------------------------------------------------------------ */

.site-header__brand {
    margin-right: 21px !important;
}


.site-header__brand-mark {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .05),
        0 0 12px rgba(208, 198, 150, .05),
        0 4px 12px rgba(0, 0, 0, .14) !important;
}


/* ------------------------------------------------------------------------
   ACCOUNT
   ------------------------------------------------------------------------ */

.site-header__account {
    position: relative;

    top: -1px;

    margin-left: 16px !important;
}


.site-header__profile {
    background:
        rgba(255, 255, 255, .035) !important;

    border-color:
        rgba(255, 255, 255, .075) !important;
}


.site-header__profile:hover {
    background:
        rgba(208, 198, 150, .065) !important;

    border-color:
        rgba(208, 198, 150, .16) !important;
}


.site-header__profile-text small {
    color: #727c86 !important;
}


.site-header__profile-text strong {
    color: #e0e4e7 !important;
}


.site-header__logout {
    background:
        rgba(255, 255, 255, .035) !important;

    border-color:
        rgba(255, 255, 255, .07) !important;
}


/* ------------------------------------------------------------------------
   HEADER DEPTH
   ------------------------------------------------------------------------ */

.site-header {
    background:
        linear-gradient(
            180deg,
            rgba(13, 16, 20, .985),
            rgba(11, 14, 17, .945)
        ) !important;

    box-shadow:
        0 8px 26px rgba(0, 0, 0, .24) !important;
}


/* ------------------------------------------------------------------------
   RESPONSIVE SAFETY
   ------------------------------------------------------------------------ */

@media (max-width: 1350px) {

    .site-header__nav {
        column-gap: 1px !important;
    }


    .site-header__nav-item,
    .site-header__nav-trigger {
        padding-left: 11px !important;
        padding-right: 11px !important;
    }


    .site-header__brand {
        margin-right: 12px !important;
    }


    .site-header__account {
        margin-left: 9px !important;
    }

}