/* input(7006,1): run-time error CSS1019: Unexpected token, found '}'
input(9029,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')'
input(9034,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')'
input(9039,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')'
input(9044,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')'
input: run-time error CSS1036: Expected expression, found ''
input(15719,1): run-time error CSS1019: Unexpected token, found '}'
input(17887,70): run-time error CSS1063: Expected calculation unit, found 'max-content'
input(17887,70): run-time error CSS1064: Expected calculation product, found 'max-content'
input(17887,70): run-time error CSS1034: Expected closing parenthesis, found 'max-content'
input(17887,70): run-time error CSS1042: Expected function, found 'max-content'
input(17887,83): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')' */

@font-face {
    font-family: "Comfortaa";
    src: url('../font/Comfortaa/Comfortaa-VariableFont_wght.woff2?v=j2hwE-LvU5McGLPROnm-3xF6U10') format('woff2'),
         url('../font/Comfortaa/Comfortaa-VariableFont_wght.ttf?v=_TUBAEkaZkgRBierV1GLz-YCorU') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: "Oswald";
    src: url('../font/Oswald/Oswald-VariableFont_wght.woff2?v=1Q1jubtO-0TjweN4WJ6mF_zNO6c') format('woff2'),
         url('../font/Oswald/Oswald-VariableFont_wght.ttf?v=hPbDY53uxMdXQJMgqlBh1fjtl80') format('truetype');
    font-weight: 200 700;
    font-display: swap;
}

@font-face {
    font-family: "Manrope";
    src: url('../font/Manrope/Manrope-VariableFont.woff2?v=-W3MAzmCe96Zye0cGCuiWvwfmrs') format('woff2'),
         url('../font/Manrope/Manrope-VariableFont.ttf?v=RJQEI9tmZxZ1ro3WJIn4gKgtZYE') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: "JetBrains Mono";
    src: url('../font/JetBrainsMono/JetBrainsMono-Regular.woff2?v=fMWZPutfqSkDv_Og1VDliLsWoRU') format('woff2'),
         url('../font/JetBrainsMono/JetBrainsMono-Regular.ttf?v=KxkCzTCB64KEpzOW3THyJuNa5sQ') format('truetype');
    font-display: swap;
}




body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

a {
    color: #fff;
    text-decoration: underline;
}

a:hover {
    color: #979797;
}

.weak-password {
    color: red;
}

.strong-password {
    color: green;
}


b, strong {
    font-weight: 600;
}

.display-none {
    display: none;
}



.note-editor .note-editing-area .note-editable a {
    color: #fff
}

.d-none-wu {
    display: none;
    position: absolute;
}


#load-fake {
    position: relative;
    width: 100%;
    height: 100vh;
    justify-content: center;
    align-items: center;
    background-color: rgb(11, 12, 13);
    z-index: 5;
    display: grid;
    transition: opacity 0.1s;
    opacity: 1;
}





.nav-fill .nav-item .nav-link, .nav-justified .nav-item .nav-link {
    background: #171717;
}

.checkbox.sn-checkbox-open-in-new-window {
    display: none;
}

.checkbox.sn-checkbox-use-protocol {
    display: none;
}

primary.focus, .note-btn-primary:focus, .note-btn-primary:hover {
    color: #fff;
    text-decoration: none;
    border: 1px solid #18192500 !important;
    background-color: #20212a;
    border-radius: 1px;
    border-radius: 0.7rem;
}

.note-popover {
    position: absolute;
    z-index: 1060;
    display: block;
    font-size: 13px;
    font-family: sans-serif;
    display: none;
    background: #0e0b0b;
    border: 2px solid #541919;
    padding: 0.7rem !important;
    border-radius: 0.7rem;
}


.note-modal-content {
    position: relative;
    margin: 30px 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: #131313;
    background-clip: border-box;
    background-clip: border-box;
    outline: 0;
    border-radius: 5px;
    box-shadow: 0 3px 900px rgba(255, 255, 255, 0.5);
    padding: 1.2rem;
    margin: 0 auto
}

.close {
    float: right;
    line-height: 1;
    color: #fff;
    opacity: .2;
}

.note-modal-footer {
    height: 55px;
    padding: 10px;
    text-align: center;
}

.btn-primary.disabled, .btn-primary:disabled {
    color: #fff;
    background-color: #050402;
    border-color: #0d6efd;
    border-radius: 0.5rem;
    border: 2px solid #5a5a5a !important;
}

img {
    border-radius: 0.1rem
}


a.navbar-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
}

.text-gray-light {
    color: #a8a8a8;
}

.drag-handle {
    cursor: move;
    width: 3rem;
    height: 3rem;
    text-align: center;
    font-size: 16px;
    color: #999;
    background: #2c3136;
    background-color: rgb(44, 49, 54);
    padding: 0.45rem;
    font-size: 15pt;
    border-radius: 0.6rem;
}


.item-number-x {
    width: 3rem;
    height: 3rem;
    text-align: center;
    font-size: 16px;
    color: #999;
    background: #2c3136;
    background-color: rgb(44, 49, 54);
    padding: 0.45rem;
    font-size: 15pt;
    border-radius: 0.6rem;
}

.art-work-form {
    background: #0b0f12;
    padding: 1rem;
    margin: 0.4rem;
    border-radius: 1rem;
    min-width: 337px;
}

.dragging {
    background: #2c3136 !important;
    padding: 1rem;
    margin: 0.4rem;
    border-radius: 1rem;
    min-width: 337px;
}

.drag-handle:hover {
    background: #343a40;
}

html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}




footer {
    line-height: 15px;
}

body {
    background: linear-gradient(150deg, #09090c -0%, #0a0a0b 99%);
    scrollbar-width: thin;
    scrollbar-color: #3187e2 #988ba4;
}




/* ===== Scrollbar CSS ===== */
/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #4e8577 #272727;
}

    /* Chrome, Edge, and Safari */
    *::-webkit-scrollbar {
        width: 10px;
    }

    *::-webkit-scrollbar-track {
        background: #272727;
    }

    *::-webkit-scrollbar-thumb {
        background: #4e8577;
        border-radius: 25px;
        border: 10px solid #202026;
        border-radius: 1rem !important;
        -webkit-border-radius: 1ex;
        -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
    }






.border-top {
    border-top: 1px solid #e5e5e5;
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
    font-size: 1rem;
    line-height: inherit;
}


.footer {
    white-space: nowrap;
    line-height: 60px;
}


.color-panel-standart {
    background: #f6f6f6;
}

.buy-button-round {
    background: rgb(227, 69, 69) !important;
    margin-top: 0.1rem;
    padding: 0.9rem !important;
    color: #fff !important;
    font-size: 14pt !important;
    font-weight: 600;
    border: 0px solid #f6f6f6 !important;
    border-radius: 0px 0px 1.5rem 1.5rem !important;
}


.buy-button-box {
    background: rgb(227, 69, 69) !important;
    margin-top: 0.1rem;
    padding: 0.9rem !important;
    color: #fff !important;
    font-size: 14pt !important;
    font-weight: 600;
    border: 0px solid #f6f6f6 !important;
    border-radius: 0rem !important;
}


.buy-button-box, .buy-button-round:hover {
    background: rgb(165, 64, 64) !important
}

.buy-button-disable {
    background: black;
    border-radius: 0.6rem !important;
    margin-top: 1rem;
    padding: 0.7rem !important;
    color: #fff !important;
    font-size: 14pt !important;
    font-weight: 600;
}

.nav-tabs .nav-link {
    border-top-left-radius: .5rem;
    border-top-right-radius: .5rem;
    padding: 0.6rem 1.4rem;
}


.a-link-footer {
    padding: .5rem 0rem !important;
}

.footer-my {
    position: relative;
    background: #1c1d22;
    padding: 0rem 1rem;
    z-index: 1
}

.grecaptcha-badge {
    z-index: 8
}





.note-editor.note-airframe, .note-editor.note-frame {
    border: 1px solid rgba(0,0,0,.2) !important;
    background: white;
}



.reCaptcha-form {
    position: relative;
}















.cart-panel-item {
    padding: 1rem !important;
    background-image: linear-gradient(150deg, #0000 -0%, #64626282 799%);
    border-radius: 1rem;
    font-size: 15pt;
    font-weight: 600;
    color: #be3535;
}

.color-1 {
    color: #cdd1c0;
}


a.navbar-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
}




.img-bundle-product {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-bundle-col {
    height: 100px;
}


.ok {
    bottom: -170px;
    left: 0;
    right: 0;
    position: absolute;
    -webkit-transition: all 0.2s linear;
    opacity: 0;
    color: #000;
    height: 100%;
    background: #000000d4;
    font-family: Calibri;
}

.card:hover .ok {
    width: 100%;
    bottom: 0px;
    opacity: 1;
}

.card-v2 {
    border: 0px;
    border-radius: 0rem !important;
    min-height: 300px;
}

.card-img-v2 {
    border: 0px;
    border-radius: 0rem !important;
    position: relative;
    object-fit: fill;
    height: 100%;
    min-height: 405px;
    background-size: cover;
    object-fit: cover;
    left: 0;
    object-position: center;
}



.card-img-artwork {
    border: 0px;
    border-radius: 0rem !important;
    position: relative;
    object-fit: fill;
    height: 100%;
    background-size: cover;
    object-fit: cover;
    left: 0;
    object-position: center;
}


.card-img-v3-mini {
    min-height: 260px;
    max-height: 170px;
}


.card-img-v34-mini {
    min-height: 160px;
    max-height: 170px;
}


.card-img-v5-mini {
    min-height: 220px;
    max-height: 255px;
}


.card-img-v12-mini {
    min-height: 100px;
    max-height: 170px;
}

.card-img-v3adv-mini {
    min-height: 483px;
    max-height: 364px;
}

.card-img-v3adv-logo-mini {
    min-height: 220px;
    max-height: 344px;
    width: 70%;
    margin: 12rem auto;
    object-fit: contain;
}



.nav-link {
    color: white;
}

    .nav-link:hover {
        color: #e9ecef;
    }

    .nav-link::before, .nav-link:before, .nav-link:active, .nav-link:focus {
        color: #e9ecef;
    }




.h-menu-list {
    font-size: 12pt;
}





.h-menu-list-category {
    font-size: 12pt;
    padding: 0.4rem;
    text-shadow: 6px 1px 6px #1a2431, 0px 1px 4px #1a2431;
    border-radius: 1.5rem;
    font-weight: 600
}

.p-menu-list {
    font-size: 10pt;
}

.i-menu {
    font-size: 14pt;
}

.my-list-group-item {
    border: 0px !important;
    border-radius: 0.5rem;
}

.my-list-group-item-admin {
    border: 0px !important;
    border-radius: 1.0rem !important;
    background-color: #f9f9f9;
    padding: 2.5rem 2.5rem 2.5rem 2.5rem;
    min-height: 100px;
    overflow: hidden;
}

    .my-list-group-item-admin:hover {
        background-color: #ebebeb;
    }

.my-list-group-item-category {
    background-color: #0c060600 !important
}





.overlay-img {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    top: 0;
    z-index: 0;
}

.block-text-menu {
    z-index: 1;
    text-align: start;
    align-self: center !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

.block-text-menu-2 {
    z-index: 1;
    text-align: center;
}

.i-menu-2 {
    font-size: 15pt;
    z-index: 1;
}

.i-menu-3 {
    font-size: 16pt;
    z-index: 1;
}
/*.my-list-group-item-admin:hover {
    background-color: #f1f1f1;
}*/
.card-footer {
    background-color: rgba(0, 0, 0, 0)
}

.obj-img {
    position: absolute;
    object-fit: cover;
    object-position: center;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: -1
}

.card-menu {
    width: 200px;
    height: 400px;
    overflow: hidden;
    border-radius: 2.5rem;
    object-fit: cover;
    object-position: center;
    margin: 0.5rem;
}


.card-menu-link {
    color: #fff !important;
    text-decoration: underline
}

.card-menu-img {
    width: 100%;
    bottom: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.card-menu-img-overlay {
    background: linear-gradient(180deg, #0000 17%, #A53838 88%);
    z-index: 1;
    top: 0;
    bottom: 0;
    position: absolute;
    left: 0;
    right: 0;
}


    .card-menu-img-overlay:hover {
        background: linear-gradient(180deg, #0000 17%, #0F0101 88%)
    }


.bq-white {
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: #f9f9f9;
    z-index: -1;
}

.bq-dark-filter {
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: #161717;
    z-index: 0;
}


a {
    text-decoration: none
}






.card {
    --bs-card-cap-padding-y: 0.2rem !important;
    --bs-card-cap-padding-x: 0.2rem !important;
    --bs-card-spacer-y: 0.2rem !important;
    --bs-card-spacer-x: 0.2rem !important;
    background: #18181a;
    border-radius: 16px;
    padding: 20px 24px;
    margin-bottom: 16px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: white;
}

.my-btn {
    border-radius: 0.2rem;
    background: #6961b5;
    border: 0px;
}

    .my-btn:hover {
        border-radius: 0.2rem;
        background: #4961b5;
        border: 0px;
    }


.form-control {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: #202020;
    background-clip: padding-box;
    border: 2px solid #3e3f4000;
    background: var(--wenrexa-bg-secondary);
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.note-editor .note-toolbar .note-color-all .note-dropdown-menu, .note-popover .popover-content .note-color-all .note-dropdown-menu {
    color: #fff;
}

.lib-form-control {
    background-color: #1c1c1f !important;
    color: white;
    border: 2px solid #171717 !important;
    border-radius: 0.4rem !important;
    min-height: 50px;
}

    .lib-form-control:focus {
        color: #fff;
        background-color: #2b3137;
        outline: 0;
        box-shadow: 0px 0px 6px 0.1rem rgba(253, 227, 13, 0.25) !important;
        border: 2px solid #6dbb1f !important;
    }

.form-check.lib-title-product-panel.border-radius-10:hover {
    background: #1b1d20;
}




.btn-primary {
    border: 0px !important;
    outline: 0px !important;
}

    .btn-primary:hover {
        border: 0px !important;
        outline: 0px !important;
    }

    .btn-primary:focus {
        border: 0px !important;
        outline: 0px !important;
        box-shadow: unset !important;
    }

.my-color-1 {
    color: #0c0c0ce8 !important
}



.my-color-2 {
    background: #0c0c0ce8 !important
}

    .my-color-2:hover {
        background: #616161e8 !important
    }

.my-color-3 {
    background: #fff0 !important
}

.soc-facebook {
    background-image: url('../facebook-fake.png');
    background-color: none;
    height: 48px;
    width: 48px;
    background-size: cover;
}

.card-panel {
    border-radius: 2rem;
    max-width: 680px;
    margin: 0.5rem auto
}

.card-panel-2 {
    border-radius: 2rem;
    max-width: 1280px;
    margin: 0.5rem auto
}


.link-box {
    width: 150px;
    height: 150px;
    overflow: hidden;
    border-radius: 2.5rem;
    object-fit: cover;
    object-position: center;
    margin: 0.5rem;
}

.nav-my-1 {
    background: #d2d2d214 !important;
    border: 0;
    border-radius: 0.25rem;
}

    .nav-my-1:hover {
        background: #1e1e1e !important;
        border: 0;
        border-radius: 0.25rem;
    }

.nav-pills .nav-my-1.active, .nav-pills .show > .nav-my-1 {
    background: #78d6c5 !important
}

.form-control:focus {
    border: 2px solid #3e3f4000;
    background: #2b3136;
    box-shadow: 0 0 0 0.0rem rgb(13 110 253 / 25%);
    color: #cdcdcd;
}








/***/

.file {
    opacity: 0;
    width: 0.1px;
    height: 0.1px;
    position: absolute;
}

.file-input {
    width: 100%;
}

    .file-input label {
        display: block;
        position: relative;
        border-radius: 5px;
        /*border: 2px dashed #717171; */
        display: block;
        color: #767474;
        font-weight: 600;
        cursor: pointer;
        background: #ececec;
        text-align: center;
        padding: 1.25rem;
        margin: 5px;
        width: 100%;
    }

        .file-input label:hover {
            background: #ced4da;
        }
/*input:hover + label,
input:focus + label {
    transform: backgrou(1.02);
}

input:focus + label {
     outline: -webkit-focus-ring-color auto 2px; 
 
}
**/



.file-name {
    font-size: 0.85rem;
    color: #555;
    text-align: center;
    margin: 0 auto;
}






.my-list-group-item-admin-2 {
    border: 0px !important;
    border-radius: 1.0rem !important;
    background-color: #f9f9f9;
    padding: 2.5rem 2.0rem 2.5rem 1rem;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
    min-height: 100px;
    overflow: hidden;
}


.btn-product-list {
    color: #fff !important;
    background-color: rgb(133, 179, 87);
    border-radius: 0.5rem;
    min-height: 70px;
    width: 80px;
    height: 86px;
    text-align: center;
}

    .btn-product-list:hover {
        background-color: rgba(6, 5, 5, 0.62)
    }

.overlay-product-list {
    background: linear-gradient(-90deg, #5353f859 17%, #f9f9f9 88%);
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.overlay-product-list-title {
    background: linear-gradient(-90deg, #fff0 17%,#090A0A78 88%);
    padding: 1.1rem;
    border-radius: 0.5rem;
    color: white;
    position: relative;
    height: 86px;
}

.overlay-category-list-title {
    background: #47495b;
    padding: 1.1rem;
    border-radius: 0.5rem;
    color: #fff;
    position: relative;
    height: 86px;
    overflow: hidden
}



@media only screen and (max-width: 800px) {
    .flex-wrap-product {
        flex-wrap: wrap !important;
    }
}

.h-menu-list-tools {
    font-size: 10pt
}

.overlay-category-list {
    background: #f9f9f9;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}


.overlay-img-list {
    background: rgba(0, 0, 0, 0.77);
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}



.tag-apps {
    background: #8e435c;
    font-size: 10pt;
    border-radius: 0.4rem;
    color: #fff;
    padding: 0.4rem 0.6rem;
    line-height: normal;
}


.block-info-addon {
    padding: 0.12rem 0.3rem;
    border-radius: 0.5rem;
}

.title-block-info {
    font-size: 12pt;
    font-weight: 500;
    width: 100%;
}

.p-title-1 {
    font-size: 11pt;
    font-weight: 500;
    margin: 0rem 0rem 0.1rem 0rem;
}

.p-title-2 {
    font-size: 10pt;
    margin: 0rem 0rem 0.2rem 0rem;
}

.p-title-3 {
    font-size: 11pt;
    font-weight: 700;
    margin: 0rem 0rem 0.1rem 0rem;
}

.p-title-4 {
    font-size: 11pt;
    margin: 0rem;
}

.p-title-5 {
    font-size: 10pt;
    color: #808a93 !important;
    font-weight: 600 !important;
    margin: 0rem;
}

.warning-border-green {
    box-shadow: 0px 0px 6px 0.1rem rgba(253, 227, 13, 0.25) !important;
    border-color: #6dbb1f !important;
    border: 2px dotted #6dbb1f !important;
    border-style: dotted !important;
    background: #3a4d38;
    color: white !important;
    font-weight: initial;
}

.icon-item {
    width: 26px;
    height: 100%;
    font-size: 12pt;
    text-align: center;
}

.tab-item-1 {
    background: #f7f7f7;
    border-radius: 0.5rem;
    padding: 0.25rem 0.45rem
}

.nav-item-addon {
    font-size: 11pt;
    font-weight: 700;
}

.dropdown-dots-menu {
    background-color: rgba(222, 222, 222, 0) !important;
    border: 0px !important;
    color: #595151;
    font-size: 17pt;
}

    .dropdown-dots-menu:hover {
        color: #595151;
        font-size: 17pt;
    }

    .dropdown-dots-menu:focus {
        border: 0px solid;
        color: #595151;
        box-shadow: 0 0 0 0.0rem rgb(13 110 253 / 0%);
    }


.block-info-div {
    color: #000 !important;
    background: #f9f9f9;
    min-width: 100% !important;
    min-height: 110px;
    padding: 1.1rem 1.42rem !important;
}

.block-info-dd {
    color: #272727 !important;
    min-width: 150px;
}

.block-info-dd-h6 {
    font-size: 17pt;
    font-weight: 600;
}

.block-info-dd-mini-p {
    font-size: 9pt;
    height: 36px;
}

.block-info-dd-mini-icon {
    z-index: 1;
    font-size: 32pt;
}




.section-block-1 {
    background: #0e0e0e 60%;
    padding-bottom: 1.6rem;
    padding-top: 1.6rem;
    padding-left: 3rem;
    padding-right: 3rem;
    z-index: 0 !important;
    position: relative;
}

.section-block-2 {
    background: #15171e;
    padding-bottom: 1.6rem;
    padding-top: 1.6rem;
    z-index: 0 !important;
    position: relative;
    background: linear-gradient(180deg, rgb(16, 14, 14) 0%, rgb(0, 0, 0) 42%, rgb(17, 12, 12) 100%);
    background: #1d202321;
    border-radius: 2rem;
}


.overlay-block-pd {
    padding: 0.4rem 0.9rem;
    background: #ff4141;
    border-radius: 0.6rem;
    margin: 0.5rem;
    z-index: 3;
    width: auto;
}

.overlay-gradient-img {
    z-index: 2;
    bottom: 0px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(180deg, #0000 6%, #61ffe1b3 90%)
}


.news-title-block {
    padding: 1.2rem;
    position: absolute;
    bottom: 0;
    width: 100%;
}

.nav-tabs-project {
    padding: 0.6rem 1.4rem;
    font-weight: 600;
    font-size: 12pt;
    height: 130px;
    width: 130px;
    padding: 0.5rem;
    background: #f2f2f2 !important;
    border: 0px solid !important;
    border-radius: 0.7rem;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-tabs-project.active {
    background: #f9f9f9 !important;
    border-color: #dee2e6 #dee2e6 #fff;
}

.nav-item-project {
    padding: 0px !important;
}

.nav-tabs-main {
    border-bottom: 0px solid #dee2e6;
}

.my-list-group-item-project {
    border-radius: 0.6rem !important;
    overflow: hidden;
    border: 0px;
    background: #f000;
    color: #aeaeae;
    padding: 0.1rem
}

    .my-list-group-item-project:hover {
        background: linear-gradient(150deg, #0000 -0%, #fff0 299%);
        background-color: rgba(0, 0, 0, 0);
        color: white !important;
    }

    .my-list-group-item-project.active {
        z-index: 1;
        color: #fff;
        background-color: #0d6efd00;
        border-color: #0000;
        color: white !important;
    }

    .my-list-group-item-project.disabled, .my-list-group-item-project:disabled {
        z-index: 1;
        color: #535353;
        background-color: #1b1c1b;
        border-color: #0d6efd;
        pointer-events: none;
    }


.user-auth-style {
    background: #000000d4;
}



.details-card {
    object-fit: cover;
    object-position: center;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: -2;
}

.bq-image-product {
    position: relative;
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
}

.card-page {
    border-radius: 2rem;
    max-width: 1440px;
    margin: 0.5rem auto;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    overflow: hidden;
    padding: 0px;
    background: #1d2124;
    color: #fff;
    min-height: 500px;
    background: linear-gradient(150deg, #29292c -0%, #101214 99%);
    border: 1px solid #212121;
    margin-bottom: 5rem;
    margin-top: 2rem;
}

.card-page-admin {
    border-radius: 2rem;
    max-width: 1440px;
    margin: 0.5rem auto;
    padding: 1.5rem 0rem;
    background: #fff
}

.card-page-body {
    padding: 0rem !important;
    overflow: hidden;
    min-height: 455px;
}



.card-body-img-bq {
    background-repeat: repeat;
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: -1
}

.img-border-n1 {
    width: 100%
}

.img-border-n2 {
    width: 45%;
    border-radius: 2.3rem;
}


.number-order {
    font-size: 8pt;
    color: #6e6e6e !important;
    font-weight: 600
}

.obj-fit-img {
    object-fit: cover;
    object-position: center;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: -2;
}

.obj-fit-img-bq {
    position: relative;
    object-fit: cover;
    object-position: center;
    width: 100%;
    min-height: 1400px;
    margin-top: -10rem
}

.obj-fit-img-gradient {
    z-index: -1;
    background-image: linear-gradient(180deg, #0000 17%, #0e0e0e 60%);
    max-height: 1250px;
    height: 2000px;
    position: absolute;
    width: 100%;
    left: 0;
    right: 0;
}






.obj-fit-img-userpage {
    z-index: -1;
    background-image: linear-gradient(180deg, #0000 50%, #0d0707 99%);
    max-height: 1250px;
    height: 100%;
    position: absolute;
    width: 100%;
    left: 0;
    right: 0;
}




.design-page-form {
    background: rgb(188, 39, 39);
    z-index: 1;
    height: 50px;
    padding: 1rem;
    width: 50px;
    text-align: center;
    border-radius: 0.5rem;
    align-self: center;
    display: flex;
    color: white;
    align-items: center;
    align-content: center;
}

    .design-page-form:hover {
        background: rgb(208, 66, 66)
    }

.design-page-btn {
    width: 120px;
    background: #b93737;
    z-index: 1;
}


.user-page-bq {
    height: 200px;
    width: 100%;
    border-radius: 5px;
    border: 1px solid #bbb9b9;
    object-fit: cover;
    object-position: center;
}

.user-page-header {
    height: 200px;
    width: 100%;
    border-radius: 5px;
    border: 1px solid #bbb9b9;
    object-fit: cover;
    object-position: center;
}

.product-page-header {
    height: 200px;
    width: 100%;
    border-radius: 5px;
    border: 1px solid #bbb9b9;
    object-fit: cover;
    object-position: center;
}

.product-page-bq {
    height: 200px;
    border-radius: 5px;
    border: 1px solid #bbb9b9;
    object-fit: cover;
    object-position: center;
    width: 100%
}

.screenshots-img {
    height: 155px;
    object-position: center;
    object-fit: cover;
    border: 2px;
    border-radius: 1.0rem;
    background-color: #212529;
    border-radius: 1.0rem;
    border-style: dashed;
    border-color: #ffffff0d;
}


.tools-img-screenshots {
    position: absolute;
    bottom: 1rem;
    left: 0;
    right: 0;
    text-align: center;
}



.form-range::-moz-range-thumb {
    width: 2rem;
    height: 1rem;
    background-color: #96B936;
    border: 0;
    border-radius: 1rem;
    box-shadow: 0 4px 15px rgba(50, 91, 39, 0.31);
}





.form-range:focus::-moz-range-thumb {
    box-shadow: 0 0 0 2px #dff79c,0 0 0 .25rem rgba(215, 249, 53, 0.25);
}

.form-range:active:hover::-moz-range-thumb {
    width: 2rem;
    height: 1rem;
    background-color: #5a6816;
    border: 0;
    border-radius: 1rem;
    box-shadow: 0 0 0 2px #dff79c,0 0 0 .25rem rgba(160, 249, 53, 0.25);
}



.border-radius-15 {
    border-radius: 1.5rem !important;
    overflow: hidden;
}

.border-radius-full {
    border-radius: 10.5rem !important;
    overflow: hidden;
}

.border-radius-10 {
    border-radius: 1.0rem !important;
    overflow: hidden;
}

.border-radius-bottom-15 {
    border-radius: 0rem 0rem 1.5rem 1.5rem !important;
    overflow: hidden;
}

.discount-block-1 {
    background: #e83232;
    padding: 5px 10px;
    align-content: center;
    display: grid;
    border-radius: 0.5rem;
    font-weight: 600
}

.discount-block-2 {
    padding: 5px 10px;
    background: #000;
    border-radius: 0.5rem;
    align-self: center;
    font-weight: 600;
}

.price-block-angle {
    color: #fff
}

.cart-block-angle {
    padding: 0.9rem 1.5rem !important;
    margin: 0px;
    border-radius: 0rem 2rem 0px 0px !important;
}


.discount-block-free {
    padding: 5px 10px;
    background: #3f5c34ba;
    border-radius: 70.5rem;
    font-weight: 600;
}

.discount-block-free-2 {
    padding: 5px 10px;
    background: #000;
    border-radius: 0.5rem;
    font-weight: 600
}

.card-short-footer {
    font-size: 9pt;
    overflow: hidden;
    text-overflow: ellipsis;
}



.lib-price-custom-1 {
    padding: 0.7rem 1rem;
}

.lib-discount-custom-2 {
    text-align: center;
    text-transform: uppercase;
    color: #8eaa41;
    font-size: 14pt;
    font-weight: 400;
}





.card-buy-info {
    padding: 0.2rem;
    width: inherit;
    height: 100%;
}

.scroll-horz {
    overflow-x: auto;
    overflow-y: hidden;
}

.scroll-vert {
    overflow-x: hidden;
    overflow-y: auto;
}

.bundle-body {
    background: #f7f7f708;
    color: #fff;
    font-weight: lighter;
}

.gradient-main-page {
    z-index: -1;
    background-image: linear-gradient(180deg, #d9d9d900 17%, #f4f4f4 60%);
    max-height: 1250px;
    height: 2000px;
    position: absolute;
    width: 100%;
    left: 0;
    right: 0;
}


.header-main-page {
    object-fit: cover;
    object-position: center;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: -2;
}

.imgheader-main-page {
    position: relative;
    object-fit: cover;
    object-position: center;
    width: 100%;
    min-height: 1400px;
    margin-top: -10rem
}

.price-order-summary {
    background: #0b050570;
    border-radius: 0.3rem;
    margin: 0.1rem 0.3rem;
    padding: 3px;
    font-weight: 600;
    width: 120px;
    font-size: 11pt;
    color: #fff;
    text-align: center;
}

.price-order-summary-finish {
    background: #3b4f24;
}

.item-product-cart {
    border-radius: 1.0rem;
    overflow: hidden;
    padding: 0.2rem 0.8rem;
    border: 1px dashed #535353;
    margin-bottom: 0.2rem;
}

    .item-product-cart:hover {
        border: 1px dashed #8b8b8b;
    }

.item-product-cart-img {
    width: 100%;
    height: 100%;
    object-position: center top;
    object-fit: cover;
    position: absolute;
}


.title-name-bundle {
    font-size: 16pt;
    font-weight: 600
}

.product-title-cart-x {
    font-size: 12pt;
    color: #fff;
    font-weight: normal;
}

.item-product-cart-pos {
    object-fit: cover;
    object-position: center;
    overflow: hidden;
    position: relative;
    height: 100%;
    width: 100%;
}

.item-bundle-title-order {
    margin-top: 1rem;
    padding: 0.2rem;
    text-align: start;
    color: #fff;
    border: 2px solid #535353;
    border-style: dashed;
    border-radius: 0.7rem;
    margin-bottom: 1rem;
}

.item-product-cart-discount {
    padding: 1rem;
    width: 80px;
    font-weight: 600
}



.title-section {
    margin: 1.5rem 2.5rem 1.5rem 0.5rem;
    color: white
}

.title-item-1 {
    margin: 1.5rem 2.5rem 0.5rem 0.5rem;
    color: white
}

.bundle-body-warning {
    text-transform: none !important;
    color: rgb(89, 96, 103) !important;
    font-weight: 400;
}

.card-news-main-item {
    min-height: 516px;
    background-color: #fff0;
}

.card-news-mini-item {
    min-height: 120px;
    background-color: #fff0;
}

.form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label, .form-floating > .form-select ~ label {
    color: #8b9aa8 !important;
}

.focus-action-1 {
    border: 2px solid rgba(222, 222, 222, 0);
    -webkit-transition: border 0.3s, -webkit-transform 0.3s;
    transition: border 0.3s, transform 0.3s;
}

    .focus-action-1:hover {
        /*  border: 2px solid #fff;*/
        background-color: #fff0;
    }


.news-title-card {
    position: absolute;
    bottom: 0px;
}

.news-title-cardB {
    width: inherit;
    padding: 1rem 1rem 0rem 1rem;
    height: 105px;
    margin-top: -3rem;
}


.card-news-fill-link {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 5;
    position: absolute;
}


.form-floating > label {
    position: absolute;
    top: 0;
    z-index: 2;
    max-width: 100%;
    height: 100%;
    padding: 1rem .75rem;
    overflow: hidden;
    color: rgba(var(--bs-body-color-rgb),.65);
    text-align: start;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
    border: var(--bs-border-width) solid transparent;
    transform-origin: 0 0;
    transition: opacity .1s ease-in-out,transform .1s ease-in-out;
    font-weight: 600;
    color: #fff !important
}











.warning-border {
    border: 1px dashed;
    border-radius: 0.5rem;
}




.overlay-main-page {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #222222a6;
    margin-top: -11rem;
}


.p-title-news {
    padding: .5rem 5.5rem .5rem .5rem !important;
}


.tag-edit-tools {
    transition: 0.15s all ease;
    cursor: pointer;
    margin-left: 0.1rem;
    margin-right: 0.1rem;
}


    .tag-edit-tools:hover {
        background: #90c16d;
        cursor: pointer;
        position: static;
        color: #fff !important;
        transform: scale(1.1);
        transition: 0.1s all ease;
    }

.card-header-news {
    height: 340px;
    width: 100%;
    position: relative;
}

.color-panel-standart:hover {
    background: white;
}



.tag-edit-close {
    background: #f7f7f7;
    padding: 0.3rem 0.5rem;
    border-radius: 6px;
}

.avatar-user {
    object-fit: cover;
    height: 35px;
    width: 35px;
    margin-left: 1rem;
    display: flex;
    align-items: center;
}

.avatar-user-control {
    object-fit: cover;
    height: 75px;
    width: 75px;
}


.bq-green-bank {
    background: #213c28d6;
}


.bq-red-bank {
    background: #6f2c2cd6;
}

.bq-orange-bank {
    background: #a45c00d6
}


.bank-account-btn {
    background: #101113;
    border-radius: 1rem;
    padding: 1rem !important;
    min-width: 200px
}

    .bank-account-btn:hover {
        background: #18191c;
    }

    .bank-account-btn.active {
        background: #2c2f35 !important;
    }

.ba-4 {
    height: 170px;
    display: grid;
}

.ba-6 {
    height: 66px;
    display: grid;
}

.panel-item-btn {
    background: #ffffff1f;
    padding: 1rem !important;
    min-width: 200px;
}

    .panel-item-btn:hover {
        background: #eee;
    }

.panel-item-btn-p {
    background: #ffffff1f;
    padding: 1rem !important;
    min-width: 200px;
    opacity: 1
}

    .panel-item-btn-p:hover {
        background: #eee;
        opacity: 0.9
    }

.h-72px {
    height: 72px
}


.bank-account-set-type {
    background: white;
    padding: 2rem;
    border-radius: 1rem !important;
    border: 4px solid transparent;
    color: white;
    background: #131416;
}

.list-group-item.bank-account-set-type {
    cursor: pointer;
    border: 4px solid transparent;
}

.bank-account-set-disabled {
    color: #a8a8a8;
    padding: 0.5rem 1rem;
    background: #1c1c1f;
    border-radius: 1rem !important;
}

.btnCreateAccountBank:disabled {
    color: gray
}

.form-check-input:checked + .list-group-item.bank-account-set-type {
    border-color: #fff;
    box-shadow: 0 0 10px 3px rgba(160, 50, 50, 0.5);
    background: #fff;
    color: black;
}


.partners-card-company {
    position: relative;
    object-fit: contain;
    object-position: center;
    max-width: 500px
}

.partners-card-company-img {
    min-height: 500px;
    width: auto;
    object-fit: contain;
    object-position: center;
}

.gray-light-xs {
    color: #c8c8c8 !important;
}



.category-img-partners {
    z-index: 0;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    pointer-events: none
}


.category-img-partners-overlay {
    background: #040404a8;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 0;
}



.width-260px {
    width: 260px !important;
}

.avatar-user-bank {
    object-fit: cover;
    height: 52px;
    width: 52px;
    border: 4px solid #1a1a1a;
}

.account-profile-money {
    font-size: 12pt;
    font-weight: 600;
    color: #bbf713; /*! background: #2f5926; */
    padding: 0.2rem;
    border-radius: 0.5rem;
}



.tag-dark {
    background: #2b231e
}


.license-style-d {
    background: #d24141;
    color: #fff;
}


.animation-show-1 {
    /*   background-color: #78e08f;
   opacity: 0;
    transform: scale(0);*/
    visibility: visible;
    opacity: 1;
    /* transition: opacity 0.1s, scale 0.1s, visibility 1.3s;
    */
    transition: all .4s ease-in-out;
    -webkit-animation-name: fadeInShow;
    -webkit-animation-duration: 1s;
    animation-name: fadeInShow;
    animation-duration: 1s;
}


@-webkit-keyframes fadeInShow {
    0% {
        opacity: 0;
    }



    100% {
        opacity: 1;
        /*  transform: scale(1);*/
    }
}

@keyframes fadeInShow {
    0% {
        opacity: 0;
        /*  transform: scale(0.1);*/
    }


    100% {
        opacity: 1;
        /*  transform: scale(1.0);
        */
    }
}














.lib-push {
    padding: 0.3rem 0.6rem;
    border-radius: 1rem;
    color: #fff;
    position: relative;
}

.lib-push-badge {
    width: 40px !important;
    display: inline-block;
    text-align: center;
    padding: 0.2rem 0.6rem
}





.box {
    transition: opacity 4000ms;
    will-change: opacity;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

    .box.faded-out {
        opacity: 0;
        -webkit-transition: width 2s, height 2s, background-color 2s, -webkit-transform 2s;
        transition: width 2s, height 2s, background-color 2s, transform 2s;
    }





.main-page-more-bundle {
    background-color: #e33333;
    padding: 0.7rem 1rem;
    font-size: 17pt;
    border-radius: 0.6rem;
    z-index: 4;
}


    .main-page-more-bundle:hover {
        background-color: #9fb537;
    }






.main-page-more {
    background-color: #e33333;
    padding: 0.8rem;
    font-size: 17pt;
    border-radius: 0.6rem;
    z-index: 4;
    bottom: 220px;
    border-radius: 0rem !important;
}




    .main-page-more:hover {
        background-color: #9fb537;
        border-radius: 0.6rem;
    }


.main-page-more-cart {
    position: absolute;
    left: 4.4rem;
    background: #48a341;
}

.main-page-more-cart-ex {
    background: #3e8939;
}


.cart-br {
    border-radius: 0rem 1rem !important;
}



.card:hover .main-page-more {
    width: 100%;
    bottom: 0px;
    opacity: 1;
    display: block;
    opacity: 1.0;
}

.main-page-author {
    font-size: 11pt;
}

.card-body-d1 {
    padding: 21px;
    border-radius: 1.0rem;
    margin: -13px;
}

.card-body-title-h1 {
    font-size: 12pt;
    text-align: center;
    margin: -5px -10px 0px -10px;
    border-radius: 0.5rem;
    color: #fff;
    font-weight: 400;
    overflow: hidden;
    padding: 1rem;
}

.offcanvas-designer-page {
    background: rgb(27, 31, 34);
    color: #fff;
    padding: 1rem;
}


.tools-img-preview {
    height: 80px;
    width: 150px;
}


.upload-input-style1 {
    position: absolute;
    z-index: 2;
    background: rgba(0, 0, 0, 0.02);
    height: 80px;
    width: 144px;
    cursor: pointer;
    opacity: 0.001;
}


.upload-input-overlay {
    background: #ffffffd1;
    text-align: center;
    padding: 1.5rem;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}


.upload-input-style1-info {
    cursor: pointer;
    /* Style as you please, it will become the visible UI component. */
}



/* Sidebar. */

.bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}


.b-example-divider {
    height: 3rem;
    background-color: rgba(0, 0, 0, .1);
    border: solid rgba(0, 0, 0, .15);
    border-width: 1px 0;
    box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}

.b-example-vr {
    flex-shrink: 0;
    width: 1.5rem;
    height: 100vh;
}

.bi {
    vertical-align: -.125em;
    fill: currentColor;
}

.nav-scroller {
    position: relative;
    z-index: 2;
    height: 2.75rem;
    overflow-y: hidden;
}

    .nav-scroller .nav {
        display: flex;
        flex-wrap: nowrap;
        padding-bottom: 1rem;
        margin-top: -1px;
        overflow-x: auto;
        text-align: center;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }




.dropdown-toggle {
    outline: 0;
}

.btn-toggle {
    padding: .25rem .5rem;
    font-weight: 600;
    background-color: transparent;
}

    .btn-toggle:hover,
    .btn-toggle:focus {
        color: #d0d0d0
    }

    .btn-toggle::before {
        width: 1.25em;
        line-height: 0;
        content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba(222,222,222)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
        transition: transform .35s ease;
        transform-origin: .5em 50%;
    }

    .btn-toggle[aria-expanded="true"] {
        color: rgb(74, 74, 74);
    }

        .btn-toggle[aria-expanded="true"]::before {
            transform: rotate(90deg);
        }

.btn-toggle-nav a {
    padding: .1875rem .5rem;
    margin-top: .125rem;
    margin-left: 1.25rem;
}

    .btn-toggle-nav a:hover,
    .btn-toggle-nav a:focus {
        background-color: #657772;
    }

.scrollarea {
    overflow-y: auto;
}

.header-nav {
    /* background: linear-gradient(180deg, rgba(255, 255, 255, 0.64) 2%, rgba(255, 255, 255, 0.82) 80%);*/
    background: #fff;
    z-index: 2;
    width: 100%;
    background: #111315;
    box-shadow: 0px 0px 100px -20px rgb(0, 0, 0) !important;
    box-shadow: 0px -20px 70px rgba(98, 114, 125, 0.11) !important;
}

.news-big-item-container {
    height: 500px !important
}

.news-max-container {
    max-width: 1890px;
}

.global-max-container {
    max-width: 1890px;
}

.news-item-container {
    min-height: 155px !important;
}

.btn-sidebar-filter {
    color: #e5e5e5;
    width: 100%;
    padding: 0.7rem 0.8rem;
    padding-right: 0.8rem;
    padding-left: 0.8rem;
    text-transform: uppercase;
    font-size: 12pt;
    background: #302f34 !important;
    margin: 0.2rem 0.2rem;
    border-radius: 0.5rem !important;
    min-width: 170px;
    text-align: center !important;
    align-content: center;
    align-self: center;
    display: block !important;
    position: relative;
    font-weight: 600;
}

    .btn-sidebar-filter:hover {
        background: #1c1f23 !important;
    }


    .btn-sidebar-filter:disabled {
        background: #343434 !important;
        color: #575757;
    }


.cart-lib-item {
    color: #e5e5e5;
    padding: 0.7rem 0.8rem;
    background: #2c3136 !important;
    text-align: center !important;
    align-content: center;
    align-self: center;
    position: relative;
}

    .cart-lib-item:hover {
        background: #1c1f23 !important;
    }

.nav-bar-main-menu {
    background: #fff0;
    border-radius: 0.5rem;
}

.nav-sidebar-submenu {
    padding: 0.6rem 1.2rem !important;
    padding-left: 1.6rem !important;
    background: rgba(222, 222, 222, 0) !important;
    width: 100%
}

    .nav-sidebar-submenu:hover {
        background: #dfdfdf !important
    }

.sidebar-find-page {
    border-radius: 0.5rem;
    min-width: 260px;
    position: sticky;
    z-index: 2;
    top: 0;
    right: 0;
    padding-top: 0px !important;
    overflow: visible !important;
    height: 100%;
    background: rgba(0, 0, 0, 0.74);
}

.lib-status-public-part {
    position: absolute !important;
    z-index: 1;
    top: 0 !important;
    left: 0;
    background: #030303cc;
    padding: 0.4rem;
    border-radius: 0px 0px 5px 0px;
    font-weight: normal;
    text-transform: uppercase;
    font-size: 10pt;
    pointer-events: none;
}

.not-border-radius {
    border-radius: 0rem !important;
}



.range-switch-language {
    width: 30px;
}

.panel-language-product {
    width: 130px;
}



.lib-order-history-price-1 {
    background: #587033;
    padding: 0.5rem;
    border-radius: 0.2rem;
    display: flex;
    max-width: 200px;
}

.lib-order-history-price-2 {
    background: #772d2d;
    padding: 0.5rem;
    border-radius: 0.2rem;
    display: flex;
    max-width: 200px;
}





/* The slider itself */
.slider-c1 {
    -webkit-appearance: none; /* Override default CSS styles */
    appearance: none;
    width: 55px; /* Full-width */
    height: 25px; /* Specified height */
    outline: none; /* Remove outline */
    opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
    -webkit-transition: .2s; /* 0.2 seconds transition on hover */
    transition: opacity .2s;
}

    /* Mouse-over effects */
    .slider-c1:hover {
        opacity: 1; /* Fully shown on mouse-over */
    }

    /* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
    .slider-c1::-webkit-slider-thumb {
        -webkit-appearance: none; /* Override default look */
        appearance: none;
        width: 25px; /* Set a specific slider handle width */
        background: #04AA6D; /* Green background */
        cursor: pointer; /* Cursor on hover */
    }

    .slider-c1::-moz-range-thumb {
        width: 30px;
        background: #96B936;
        cursor: pointer;
        height: 15px;
    }


.slider-c::-moz-range-track {
    width: 100%;
    height: .7rem;
    color: transparent;
    cursor: pointer;
    background-color: #dee2e6;
    border-color: transparent;
    border-radius: 1rem;
}



.cover-main-filter {
    overflow: hidden;
    width: 100%;
    height: 350px;
}

.cover-main-filter-img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    object-fit: cover;
    object-position: center
}




.nav-bd-x {
    border-radius: 0.5rem !important;
    background: #fff;
    margin-top: 0.5rem
}

    .nav-bd-x:hover {
        background: #e6e6e6;
    }


.nav-pills .nav-link {
    border-radius: 0.5rem;
}

.bq-none {
    background: #0000 !important
}

.bq-filter {
    width: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    height: 100%;
    overflow: hidden;
    height: 100%;
}

.box-shadow-none {
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0) !important;
}

.bq-filter-overlay {
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    z-index: 0;
    background: rgb(22, 22, 22);
    overflow: hidden;
}

.bq-filter-img {
    width: 100%;
    position: fixed;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    object-fit: cover;
    object-position: center;
    overflow: hidden;
}






.m-center-align {
    margin: 0 auto;
}






/*the container must be positioned relative:*/
.custom-select {
    position: relative;
    width: 100%;
}

    .custom-select select {
        display: none; /*hide original SELECT element:*/
    }

.select-selected {
    background: rgba(222, 222, 222, 0);
    color: #eaeaea !important;
    padding: 0.6rem 0.8rem !important;
    border: 2px solid #8e8383 !important;
    border-radius: 0.6rem;
    font-weight: revert;
}

    /*style the arrow inside the select element:*/
    .select-selected:after {
        position: absolute;
        content: "";
        width: 0;
        height: 0;
        border: 7px solid transparent;
        border-color: #fff transparent transparent transparent;
        top: 14px;
        bottom: 0;
        right: 22px;
        margin-top: 5px;
    }

    /*point the arrow upwards when the select box is open (active):*/
    .select-selected.select-arrow-active:after {
        border-color: transparent transparent #fff transparent;
        top: 7px;
    }

/*style the items (options), including the selected item:*/
.select-items div, .select-selected {
    color: #d2d2d2;
    padding: 8px 16px;
    border: 1px solid #0000;
    border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
    cursor: pointer;
    user-select: none;
    background: #fff0;
    border-radius: 0.6rem;
    margin: 0.2rem;
    height: 46px;
    font-size: 11pt;
}


/*style items (options):*/
.select-items {
    position: absolute;
    background-color: #13181e;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 99;
    border-radius: 1rem;
    padding: 0.8rem;
    overflow-y: auto;
}

/*hide the items when the select box is closed:*/
.select-hide {
    display: none;
}

.select-items div:hover, .same-as-selected {
    background-color: rgb(174, 49, 49);
}

.select-selected:focus {
    border-color: #5ab4ea !important;
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(0, 0, 0, 0.35);
}















.avatar-user-col-g {
    border-radius: 0.8rem !important;
    margin: 0.3rem;
    overflow: hidden;
    background: black;
    min-height: 100px;
}




.product-col-g {
    border-radius: 0.8rem !important;
    margin: 0.3rem;
    overflow: hidden;
    background: black;
    min-height: 150px
}


.select-list-sidebar {
    border: 0px;
    height: 555px;
}

    .select-list-sidebar:focus {
        border: 0px;
        border-color: #86b7fe;
        box-shadow: 0 0 0 .0rem rgba(13,110,253,.25);
        outline: none;
        outline-style: none
    }




.select-list-sidebar-btn {
    padding: 1rem;
    border-radius: 0.6rem;
    margin: 0.4rem;
    outline: none;
    outline-style: none
}

    .select-list-sidebar-btn:focus {
        outline: none;
        outline-style: none
    }

    .select-list-sidebar-btn::selection {
        outline: none;
        outline-style: none
    }

    .select-list-sidebar-btn:hover {
        padding: 1rem;
        border-radius: 0.6rem;
        margin: 0.4rem;
        outline: none;
        outline-style: none;
    }


.title-sidebar-item1 {
    color: #aaa;
    font-weight: 200;
    font-size: 11pt
}

.title-sidebar-maintitle {
    color: #808a93 !important;
    font-weight: 600;
    font-size: 1.0rem;
}


.sidebar-select-title-list {
    background-color: #1c1f22;
    color: #eaeaea;
    padding: 0.6rem 0.8rem;
    border: 0px solid #3e4144;
    border-radius: 0.6rem;
    font-weight: lighter;
}




    .sidebar-select-title-list:focus {
        border-color: #5ab4ea;
        outline: 0;
        box-shadow: 0 0 0 .25rem rgba(0, 0, 0, 0.35);
    }



option {
    font-size: 18px;
    background-color: none;
}

    option:before {
        content: ">";
        font-size: 20px;
        display: none;
        background: red;
        border-radius: 1rem;
        color: #fff;
    }

    option:focus {
        border-color: #49d1e8;
        outline: 0;
        box-shadow: 0 0 0 .25rem rgba(9, 32, 36, 0.25);
    }



    option:hover:before {
        display: inline;
    }



.carousel-caption-header {
    position: absolute;
    color: #fff;
    text-align: center;
    top: 0;
    width: 100%;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 2rem;
}

.carousel-inner {
    height: 100%;
}

.carousel-indicators {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    display: flex;
    justify-content: center;
    padding: 0;
    margin-right: 15%;
    margin-bottom: 5rem;
    margin-left: 15%;
    list-style: none;
}




.library-list-item-product {
    word-wrap: break-word;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-top: 1px;
    padding: 0rem;
    color: #7d9d9d;
    border: 0px;
    box-shadow: -200px 0px 100px 110px rgba(180, 180, 180, 0.01);
}

.library-list-item-product-v2 {
    word-wrap: break-word;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-top: 1px;
    padding: 1.1rem 0.4rem;
    color: #7d9d9d;
    border: 0px;
    box-shadow: -200px 0px 100px 110px rgba(180, 180, 180, 0.01);
}


.library-list-item-product-v3 {
    word-wrap: break-word;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 0.8rem 0.5rem;
    color: #7d9d9d;
    border: 0px;
    box-shadow: -200px 0px 100px 110px rgba(180, 180, 180, 0.01);
    min-height: 85px
}

.library-list-item-product-tab-title {
    background-color: #111213f7;
    padding: 0.4rem 0.2rem;
    min-height: 4rem;
}

.library-list-item-product-active {
    background: #2f3337
}

.library-list-item-product-icon {
    height: 36px;
    width: 36px;
    margin-right: 0.3rem;
}

.library-list-item-product-icon-img {
    font-size: 11pt;
    height: 36px;
    width: 36px;
    padding: 0.05rem;
}

.library-list-item-product-title {
    word-wrap: break-word;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 11pt;
    position: absolute;
    width: 100%;
    text-align: left;
    padding-left: 43px;
    padding-right: 0.5rem;
}


.library-list-item-product-title2 {
    word-wrap: break-word;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 11pt;
    position: absolute;
    width: 100%;
    text-align: left;
    padding-left: 10px;
    padding-right: 0.5rem;
}

.library-btn-item-product-title {
    overflow: hidden;
}

    .library-btn-item-product-title:hover {
        box-shadow: -100px 0px 80px 0px rgba(131, 131, 132, 0.82);
        background-color: #3636370d;
    }

.project-main-content {
    overflow-x: hidden
}



.carousel-indicators [data-bs-target] {
    width: 100px;
    opacity: 0.6;
    background: none;
}

    .carousel-indicators [data-bs-target] > img:active {
        width: 100px;
        background: none;
        box-shadow: rgba(42, 49, 40, 0.94) 5px 4px 15px;
    }





.carousel-indicators .active {
    opacity: 1;
}


    .carousel-indicators .active > img {
        opacity: 1;
        border: 4px solid #622626
    }


.bq-filter-overlay-screenshoot {
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 0;
    background: linear-gradient(180deg, #2b2b2b1c 60%, #1b1f22 97%);
}


.c-indicators {
    height: 60px;
    object-fit: cover;
    object-position: center;
    border: 2px solid #1b1f22;
}



.carousel-control-custom-l {
    text-align: left;
    background: #c43c3c !important;
    height: 45px !important;
    width: 45px !important;
    border-radius: 5rem;
    margin-top: 1rem;
    margin-right: -1.3rem !important;
    position: relative !important;
    padding: 0px !important;
    border: 0px !important;
    text-indent: 0px !important;
    font-size: 23pt;
}


.carousel-control-custom-r {
    text-align: left;
    background: #c43c3c !important;
    height: 45px !important;
    width: 45px !important;
    border-radius: 5rem;
    margin-top: 1rem;
    margin-left: -1.3rem !important;
    position: relative !important;
    padding: 0px !important;
    border: 0px !important;
    text-indent: 0px !important;
    font-size: 23pt;
}

.info-carousel {
    font-size: 14pt;
    font-weight: lighter;
    text-transform: uppercase;
    color: #fff;
    padding: 0rem 2rem;
}

.icon-scr-arrow {
    margin-top: 0.4rem;
}

.comments-panel-edit {
    color: #cecece;
    background: linear-gradient(150deg, #292d31 -0%, #09090b 99%);
    height: 100%;
}

.h-80px {
    max-height: 82px !important;
}

.library-img-poster {
    width: 100%;
    border-radius: 1rem;
    margin: 1.3rem 1rem;
}

.library-poster-header {
    height: 220px;
    width: 100%;
    object-fit: cover;
    object-position: center;
    overflow: hidden
}

.library-img-poster-header {
    width: 100%;
    object-fit: cover;
    object-position: center;
}







.library-lang-tab-sys {
    width: 83px;
    font-size: 10pt;
}

.tab-btn-main:disabled {
    color: #3e3e3e !important;
    font-weight: 600 !important;
}

.library-socialmedia {
    background: #f7f7f708;
    border-radius: 0.5rem;
    padding: 1.25rem 1.45rem;
    color: aliceblue;
}

.library-carousel {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
}

.icon-item-library {
    font-size: 18pt;
    text-align: center;
    position: relative;
    align-content: center;
    align-items: center;
    align-self: center;
    display: inherit;
}

.library-item-main-header {
    padding: 0rem 1rem;
    min-width: 200px;
}

.library-item-main-header-title {
    font-size: 11pt;
    margin: 0rem;
    margin-top: 0rem;
    margin-left: 0rem;
    margin-top: -0.2rem;
}

.tab-btn-main {
    background: #e9ecef00 !important;
    padding: 0.5rem 1.3rem;
    margin-right: 0.7rem;
    height: 3rem;
}





.wen-discount-main-price-1 {
    background: #e83232;
    padding: 3px 7px;
    position: absolute;
    margin-top: -25px;
    margin-right: 8px;
    border-radius: 0.5rem;
    font-size: 16pt;
    font-weight: 600;
    top: 0rem;
    right: 0;
    text-align: center;
}

/* ═══════════════════════════════════════
   Price Hero — Library price display
   ═══════════════════════════════════════ */
.wenrexa-price-hero {
    display: flex;
    align-items: center;
    gap: 20px;
    background: rgba(0, 0, 0, 0.13);
    padding: 16px 24px;
    border-radius: 1.4rem;
}

.wenrexa-price-hero--plain {
    background: transparent;
    padding: 16px 24px;
}

.wenrexa-price-hero--free {
    background: rgba(142, 170, 65, 0.08);
}

.wenrexa-price-hero__pct {
    font-size: 42px;
    font-weight: 900;
    color: #ef4444;
    line-height: 1;
}

.wenrexa-price-hero__pct-sign {
    font-size: 20px;
    font-weight: 700;
}

.wenrexa-price-hero__right {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wenrexa-price-hero__old {
    font-size: 14px;
    font-weight: 500;
    color: #52525b;
    text-decoration: line-through;
}

.wenrexa-price-hero__current {
    font-size: 24px;
    font-weight: 700;
    color: #fafafa;
    line-height: 1;
}

.wenrexa-price-hero__free {
    font-size: 18px;
    font-weight: 700;
    color: #8eaa41;
    text-transform: uppercase;
}

/* ═══════════════════════════════════════
   Compact Price — card price display
   ═══════════════════════════════════════ */
.wenrexa-price-compact {
    display: flex;
    align-items: center;
    gap: 6px;
    border-radius: 10px;
    width: 100%;
    min-width: 0;
}

.wenrexa-price-compact--plain { }

.wenrexa-price-compact--free { }

.wenrexa-price-compact__pct {
    font-size: 16pt;
    font-weight: 900;
    color: #ef4444;
    line-height: 1;
    white-space: nowrap;
    align-self: end;
    flex-shrink: 0;
}

.wenrexa-price-compact__pct-sign {
    font-size: 12px;
    font-weight: 700;
}

.wenrexa-price-compact__right {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.wenrexa-price-compact__old {
    font-size: 11px;
    font-weight: 500;
    color: #52525b;
    text-decoration: line-through;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wenrexa-price-compact__current {
    font-size: 19px;
    font-weight: 600;
    color: #fafafa;
    line-height: 1.1;
    white-space: nowrap;
}

.wenrexa-price-compact__free {
    font-size: 14px;
    font-weight: 700;
    color: #8eaa41;
    text-transform: uppercase;
}

/* ═══════════════════════════════════════
   Meta Stat Bar — faded-slash style
   ═══════════════════════════════════════ */
.wenrexa-sb {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    background: var(--wenrexa-surface, #1515155e);
    border-radius: 1.4rem;
    padding: 0 18px;
    gap: 0.25rem;
    row-gap: 0;
}

.wenrexa-sb-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 11px 10px;
    font-size: 12pt;
    font-weight: 600;
    line-height: 1;
    color: var(--wenrexa-text-sec, #888);
    transition: color .2s;
    white-space: nowrap;
}

.wenrexa-sb-item:hover {
    color: #fff;
}

.wenrexa-sb-item:hover i {
    color: #fff;
}

.wenrexa-sb-sep {
    color: var(--wenrexa-sep, #222);
    font-weight: 200;
    font-size: 18px;
    line-height: 1;
    user-select: none;
}

.wenrexa-sb-val {
    color: var(--wenrexa-text, #e0e0e0);
    font-variant-numeric: tabular-nums;
}

.wenrexa-sb-sub {
    color: var(--wenrexa-text-dim, #555);
    font-size: 12px;
    margin-left: 1px;
}

@media (max-width: 700px) {
    .wenrexa-sb { padding: 0 14px; }
    .wenrexa-sb-item { padding: 9px 8px; font-size: 12px; }
    .wenrexa-sb-sep { font-size: 15px; }
}

@media (max-width: 480px) {
    .wenrexa-sb-sep { color: #191919; }
    .wenrexa-sb-item { padding: 8px 6px; gap: 5px; font-size: 12px; }
    .wenrexa-sb-sub { display: none; }
}


.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff !important;
    background-color: #1f2125 !important;
    border-color: #1861ac;
}


.nav-pills .lib-nav-btn.active, .nav-pills .show > .nav-link {
    color: #fff !important;
    background-color: #1b1f21 !important;
    border-color: #1861ac;
}



.btn-check:focus + .btn, .btn:focus {
    box-shadow: 0 0 0 .25rem rgba(66, 70, 73, 0)
}


.btn-check:active + .btn-dark:focus, .btn-check:checked + .btn-dark:focus, .btn-dark.active:focus, .btn-dark:active:focus, .show > .btn-dark.dropdown-toggle:focus {
    box-shadow: 0 0 0 0rem rgba(66,70,73,.5);
}


/*
* {
    -webkit-transition: linear 2s;
    transition: linear 2s;
    -webkit-transition: all 0.2s linear;
}

    *:hover {
        -webkit-transition: linear 2s;
        transition: linear 2s;
        -webkit-transition: all 0.2s linear;
    }
    */



.sidebar-library-page {
    border-radius: 0.5rem;
    min-width: 260px;
    background: rgba(222, 222, 222, 0);
    position: sticky;
    z-index: 2;
    top: 0;
    right: 0;
    overflow: hidden;
    position: relative
}

.sidebar-lib-bar {
    min-width: 400px;
}

.library-button-buy {
    background-color: #e33333 !important;
    text-transform: uppercase;
}

    .library-button-buy:hover {
        background: #b33e3e !important
    }


    .library-button-buy:disabled {
        background: #4a4a4a !important;
        color: #8c8c8c;
    }

.library-lang-color-x {
    color: #4a4a4a;
}


.library-tab-item-usercontrol {
    background: var(--wenrexa-bg-secondary);
    border-radius: 0.5rem;
    padding: 0.25rem 0.45rem;
    overflow: hidden;
    word-wrap: break-word;
}

.library-tab-item-1 {
    background: var(--wenrexa-bg-secondary);
    border-radius: 0.5rem;
    padding: 0.35rem 0.45rem;
    color: aliceblue;
    overflow: hidden;
    word-wrap: break-word;
}


.library-tab-menu {
    border-radius: 0.5rem !important;
    border: 0px !important;
    text-align: center;
    padding: 0.6rem !important;
    margin: 0.2rem;
    margin-bottom: 0.4rem;
    background: #16191a !important;
    border: 2px solid #ffffff0f !important;
}

    .library-tab-menu:hover {
        background: #1f2425 !important;
        border: 2px solid #ffffff2e !important;
    }

.nav-link::before, .nav-link::before, .nav-link:active, .nav-link:focus {
    color: #e9ecef;
}

.px5-imp {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}


.library-tab-menu:active, .library-tab-menu:active {
    color: #483e3e;
    background: #fff !important;
}


.library-tab-menu-icon-2 {
    height: 30px;
    width: 30px;
}



.library-tab-menu-icon {
    height: 30px;
    width: 30px;
}

.library-product-avatar-user {
    position: relative;
    margin: 0px;
    object-fit: cover;
    height: 40px;
    width: 40px;
}

.library-product-avatar-user-art {
    position: relative;
    margin: 0px;
    object-fit: cover;
    height: 100px;
    width: 100px;
}

.library-product-avatar-subuser-art {
    position: relative;
    margin: 0px;
    object-fit: cover;
    height: 40px;
    width: 40px;
}



.library-menu-items {
    overflow-y: auto !important;
    overflow-x: hidden;
}

.lib-logo-product-header {
    position: absolute;
    bottom: 0;
    text-align: center;
    margin: 0 auto;
    object-fit: cover;
    object-position: center;
    height: 14rem;
    display: flex;
    align-self: center;
    top: 4rem;
    z-index: -1;
}



.library-discount-block-price {
    margin-top: -5.2rem;
    position: absolute;
    background: #e83232;
    padding: 5px 10px;
    margin-right: 8px;
    border-radius: 0.5rem 0rem 0rem 0.5rem;
    font-weight: 400;
    margin-left: -4.5rem;
    font-size: 12pt;
    z-index: 1;
}


.library-strike-price {
    margin-top: -5.2rem;
    position: absolute;
    font-size: 11pt;
    color: #919191;
    text-align: end;
    margin-left: 2.3rem;
    background: #131313;
    padding: 0.36rem;
    padding-left: 0.4rem;
    border-radius: 0.4rem;
    padding-left: 1.4rem;
}


.library-price-free {
    font-weight: normal;
    text-transform: uppercase;
    font-size: 14pt;
    color: #8eaa41;
}

.library-nav-price {
    font-size: 22pt;
    font-weight: 500;
    line-height: normal;
    min-width: 160px;
}


.lib-tab-content {
    min-height: 160px;
}


.library-tab-menu .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    background: #efefef !important;
    color: black !important;
}

.library-nav-tabs {
    border: 0px !important
}


.lib-nav-mini-menu {
    background: rgb(18, 17, 17);
    border-right: 1px solid #383e407d;
}


.lib-nav-mini-menu-new {
    background: rgb(18, 17, 17);
    border-right: 1px solid #383e407d;
    padding: 1.1rem;
    min-width: 140px;
    background: linear-gradient(90deg, #181a1d 20%, #090909 99%) !important;
}

.lib-nav-mini-menu-link {
    background: #262a2e !important;
    margin: 0.2rem;
    text-align: center;
    padding: 0.8rem 1rem;
}

.h-600imp {
    height: 600px !important;
}



.lib-nav-mini-menu-link:hover {
    background: #1d1f1e !important;
    background: linear-gradient(150deg, #323642 -0%, #090909 99%) !important;
}

.lib-nav-mini-menu-link-notp {
    background: #262a2e00 !important;
    margin: 0.2rem;
    text-align: center;
    padding: 0.8rem 1rem;
    min-width: 117px;
    background: linear-gradient(150deg, #1c1d20 -0%, #090909 99%) !important;
}



.lib-product-item-mini-active {
    box-shadow: 0px 21px 130px -50px rgb(76, 48, 148);
    border: 4px solid #8685a3;
}




.lib-nav-mini-menu-link:disabled {
    color: #4d4d4d;
    background: #ffffff03 !important
}


.text-light-ipm {
    color: #fff !important
}


.lib-menu-sidebar-main {
    min-width: 24rem;
}


.lib-navbar-veritcal {
    background: #171a1c;
    top: 0px;
    z-index: 0;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.lib-nav-price-free {
    border: 2px dotted #8eaa41 !important;
}


.lib-main-panel {
    min-height: 55rem;
}

.lib-nav-pills {
    padding: 1.2rem;
    background: #1b1f22;
    position: relative;
    z-index: 1;
    border-bottom: 1px solid #22272b;
}

.lib-subpanel-product {
    background: #1b1f22;
    padding: 1.0rem;
    width: 100%;
}

.lib-subpanel-product-art {
    background: #0f0f0f;
    width: 100%;
    background: linear-gradient(150deg, #1d2024 0%, #0f0f0f80 99%);
    overflow: hidden;
}

.lib-authorized {
    height: 500px;
    margin-top: 20rem;
}

.lib-content {
    background: #161618;
    overflow-x: auto; /* 👈 добавляем */
}



#art-scroll-panel {
    position: relative;
    flex-direction: column;
    min-width: calc(5% - 2px);
    right: 0px !important;
    top: 0px;
    min-width: 300px;
}

#artworkspage {
}

@media (max-width: 768px) { /* Замените 'md' на конкретное значение, например 768px */
    #artworkspage, #art-scroll-panel {
        position: relative;
    }
}

@media (min-width: 1268px) { /* Замените 'md' на конкретное значение, например 768px */
    #art-scroll-panel {
        max-width: 430px;
    }
}

.nav-link-userpage {
    background: #151515;
}




.nav-pills .nav-link-userpage.active, .nav-pills .show > .nav-link {
    color: #000 !important;
    background-color: #fff !important;
    border-color: #fff0 !important;
}




.lib-item-file {
    font-size: 18pt;
    min-width: 3.3rem;
    font-weight: 300;
    color: #7d7d7d
}

.lib-item-file-b {
    min-width: 3.3rem;
    font-weight: 300;
    color: #7d7d7d
}

.lib-item-file-bytes {
    font-size: 18pt;
    min-width: 5rem;
    font-weight: 300;
    text-align: center;
}

.lib-item-file-info {
    font-size: 11pt;
}

.lib-item-file-h2 {
    color: #4ecaa7;
    font-weight: 600 !important;
}


.lib-item-file-icon {
    font-size: 2.4rem;
}


.lib-tag-file {
    position: absolute;
    top: 0;
    margin-top: -0.9rem;
    background: #a62d33;
    padding: 0.3rem 1rem;
    border-radius: 0.5rem;
    font-size: 10pt;
    font-weight: 600;
    right: 0;
    margin-right: 1rem;
}

.lib-tag-file-2 {
    position: relative;
    margin-top: 0.2rem;
    padding: 0.4rem 0.9rem;
    border-radius: 0.5rem;
    font-size: 10pt;
    font-weight: initial;
    color: #6f8080;
    margin-right: 10px;
    border: 1px #313539;
    border-style: dashed;
    text-align: center !important;
}






.lib-tag-file-4 {
    position: relative;
    margin-top: 0.2rem;
    padding: 0.4rem 0.9rem;
    border-radius: 0.5rem;
    font-size: 10pt;
    font-weight: initial;
    color: #6f8080;
    margin-right: 10px;
    text-align: center !important;
}



.lib-tag-file-warning {
    color: #d37d20 !important;
    border-color: #d37d20 !important;
}





.lib-min-w5 {
    min-width: 5rem;
}


.lib-size-file {
    color: #ff3b3b;
    border-color: #df2929;
    font-weight: 600;
}

.lib-orig-name-file {
    color: #998f70;
    border-color: #fff0;
}






/* контейнер и подсветка выбранного диапазона */
.dual-range {
    --track-h: 6px;
    --thumb: 16px;
    --bg: #dee2e6; /* фон трека */
    --fill: #ff4d4f; /* выбранный диапазон */
    position: relative;
    height: 2rem;
    display: block;
}

    /* подсветка: используем псевдоэлемент с CSS-переменными --min%, --max% */
    .dual-range::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: calc(50% - var(--track-h)/2);
        height: var(--track-h);
        border-radius: var(--track-h);
        background: linear-gradient(to right, var(--bg) 0 calc(var(--min) * 1%), var(--fill) calc(var(--min) * 1%) calc(var(--max) * 1%), var(--bg) calc(var(--max) * 1%) 100%);
    }

    /* два слайдера поверх, прозрачный трек, только ручки активны */
    .dual-range .dual {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        width: 100%;
        background: none;
        pointer-events: none; /* трек недоступен... */
        -webkit-appearance: none;
        appearance: none;
        height: 2rem;
        margin: 0;
    }

        .dual-range .dual::-webkit-slider-runnable-track {
            height: var(--track-h);
            background: transparent;
        }

        .dual-range .dual::-moz-range-track {
            height: var(--track-h);
            background: transparent;
        }

        /* ручки */
        .dual-range .dual::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: var(--thumb);
            height: var(--thumb);
            border-radius: 50%;
            background: #ff4d4f;
            box-shadow: 0 0 0 2px #fff;
            cursor: pointer;
            pointer-events: auto; /* ...но ручки кликабельны */
        }

        .dual-range .dual::-moz-range-thumb {
            width: var(--thumb);
            height: var(--thumb);
            border: 2px solid #fff;
            border-radius: 50%;
            background: #ff4d4f;
            cursor: pointer;
            pointer-events: auto;
        }

        /* чтобы при перекрытии верхняя ручка была поверх */
        .dual-range .dual.min {
            z-index: 2;
        }

        .dual-range .dual.max {
            z-index: 3;
        }

    .dual-range::before {
        transition: background 180ms ease;
    }
/* мягкая перекраска заполнения */
.price-outputs-fade {
    transition: opacity .18s ease;
}

    .price-outputs-fade.is-hidden {
        opacity: 0;
    }

#priceSlider::before {
    transition: background 180ms ease;
}



.lib-creator-item-sidebar {
    height: 130px;
}

.lib-creator-item {
    height: 60px;
}

.lib-creator-item-img {
    height: 60px;
}



.lib-creator-item-icon {
    margin: 0.3rem 0.2rem;
}

.lib-creator-item-icon-v2 {
    width: 73px;
}


.lib-moderator-border {
    border: 1px solid #abaeb71c;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-radius: 0.5rem;
    border-style: dashed;
}




.lib-creator-item-icon-img {
    font-size: 11pt;
    height: 46px;
    width: 46px;
    padding: 0.1rem;
    opacity: 0.2
}

.lib-creator-item-icon-img-2 {
    font-size: 11pt;
    height: 46px;
    width: 46px;
    padding: 0.1rem;
    opacity: 1
}

.lib-creator-item-icon-img-v3 {
    font-size: 11pt;
    height: 55px;
    width: 55px;
    padding: 0rem;
    opacity: 1;
    margin: 0px !important;
}

.lib-creator-item-title {
    font-size: 12pt;
    position: absolute;
    width: 100%;
    text-align: left;
    padding-left: 70px;
    padding-right: 0.5rem;
    font-weight: normal;
    font-weight: 600;
}


.lib-creator-mini-icon {
    font-size: 20pt !important;
}



.lib-creator-title-info {
    font-size: 10pt;
    font-weight: initial;
    color: #454b51 !important;
    text-align: left
}

.lib-creator-title-type {
    font-size: 10pt;
    font-weight: initial;
    color: #566969 !important;
    text-align: left
}


.font-14 {
    font-size: 14pt;
}

.font-16 {
    font-size: 16pt;
}

.font-25 {
    font-size: 25pt;
}

.library-creator-list-items {
    word-wrap: break-word;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-top: 3px;
    padding: 0rem;
    color: #cecece;
    background: #212529;
    background: linear-gradient(150deg, #292d31 -0%, #09090b 99%);
    flex-wrap: wrap;
    border-radius: 0.5rem
}

.exclusive-product {
    background: #993030;
    padding: 1.5rem;
    border-radius: 1rem;
}

.exclusive-product-off {
    padding: 1.5rem;
    border-radius: 1rem;
    background: linear-gradient(150deg, #2d3136 -0%, #1a1a1c 99%);
    color: #979797;
}

.cart-exclusive-product-info {
    color: #df9029 !important;
    font-size: 10pt;
    font-weight: 600 !important;
    text-transform: uppercase;
}

.library-creator-list-items-del {
    background: #292121 !important;
}

.library-creator-list-items-success {
    background: #212c1d
}

.library-creator-list-items-warning {
    background: #322d1c
}

.library-creator-list-items-last {
    background: #391315
}




.library-creator-list-link {
    padding: 1rem;
    font-size: 12pt;
    font-weight: 600;
    border: 3px dashed #6b7a27;
}

    .library-creator-list-link:hover {
        padding: 1rem;
        font-size: 12pt;
        font-weight: 600;
        border: 3px dashed #96ab39;
        background: linear-gradient(150deg, #30342f -0%, #09090b 99%);
    }

.lib-disable-product {
    color: #fefefe;
    font-size: 16pt;
}




.lib-list-group {
    border: 0px !important;
    border-radius: 0.4rem !important;
    background-color: #212529;
    padding: 2.5rem 2.5rem 2.5rem 2.5rem;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
    min-height: 70px;
    overflow: hidden;
    text-align: center;
    color: #bfc0c0;
}


.lib-list-btn {
    background: #939b9b14;
    border-radius: 0.4rem;
    min-width: 3rem;
}



.lib-listdown-creator {
    background-color: #171717 !important;
    color: white;
    border-color: #fff0;
    border: 2px solid #28212100 !important;
}


    .lib-listdown-creator:focus {
        box-shadow: 0px 0px 6px 0.1rem rgba(253, 227, 13, 0.25) !important;
        border: 2px solid #6dbb1f !important;
    }



.custom-file-upload {
    display: inline-block;
    padding: 1.3rem;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #66666685;
}


    .custom-file-upload:hover {
        background: #6660
    }




.lib-file-checked-viruses-success {
    padding: 0.4rem;
    border-radius: 0.6rem;
    color: #83ffb9;
    margin: 0.5rem;
    position: relative;
    justify-content: center;
}

.lib-file-checked-viruses-inProcess {
    padding: 0.4rem;
    border-radius: 0.6rem;
    color: #646464;
    margin: 0.5rem;
    position: relative;
    justify-content: center;
}

.lib-file-checked-viruses-dangerous {
    border-radius: 0.6rem;
    color: #ff1717;
    margin: 0.2rem;
    position: relative;
    justify-content: center;
}





.lib-file-checked-banned-false {
    border-radius: 0.6rem;
    color: #5e5e5e;
    margin: 0.2rem;
    position: relative;
    justify-content: center;
}



.box-shadow-glow-white {
    box-shadow: 0px -20px 70px rgb(58, 65, 71) !important;
    border-radius: 1rem;
    border: 2px solid #1d1d1d;
    background: linear-gradient(180deg, #0f0f0f 1%, #23272b 98%);
}

.modal {
    background: #0f0f0f78;
}





.lib-panel-color1 {
    background: #212529;
    padding: 1.5rem;
    border-radius: 1rem;
}

.lib-file-checked-banned-true {
    padding: 0.4rem;
    border-radius: 0.6rem;
    color: #ff1717;
    margin: 0.5rem;
    position: relative;
    justify-content: center;
}



.lib-item-rules-product {
    background: #973232;
    border-radius: 0.6rem;
    padding: 1rem;
    padding-left: 1rem;
    padding-left: 2rem;
    margin-top: 1rem
}




.lib-form-upload {
    height: 250px;
    width: 250px;
    overflow: hidden;
}

.h-150px {
    height: 150px;
}

.h-180px {
    height: 180px;
    width: 180px;
}

.h-180x325px {
    height: 180px;
    width: 325px;
}



.font-40 {
    font-size: 40pt;
}

.font-50 {
    font-size: 50pt;
}

.lib-upload-img-poster-1 {
    width: 300px !important;
    height: 300px !important;
    border-radius: 1rem !important;
    overflow: hidden;
    box-shadow: 0px 0px 6px 0.1rem rgba(27, 27, 30, 0.56) !important;
}



.lib-upload-img-2 {
    border-radius: 1rem !important;
    overflow: hidden;
    box-shadow: 0px 0px 6px 0.1rem rgba(27, 27, 30, 0.56) !important;
}

.lib-upload-border {
    font-size: 4rem;
    border: 0.2rem;
    border-color: #7b7b7bbd;
    border-style: dashed;
    border-radius: 1rem;
    opacity: 1
}

    .lib-upload-border:hover {
        opacity: 0.2
    }

.preview-product-img {
    border-radius: 5px;
    width: 100%;
    object-fit: cover;
}

.preview-product-icon-img {
    border-radius: 5px;
    width: 100%;
    object-fit: cover;
}



.lib-p-img-1 {
    min-height: 85px;
}


.lib-creator-tags {
    background: #191d20;
    padding: 0.2rem 0.8rem;
}




input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    background-color: #171717;
    margin: 0;
    margin-left: 0px;
    font: inherit;
    font-family: inherit;
    color: #fff;
    width: 1.15em;
    height: 1.15em;
    border: 0.13em solid #1b0c0c;
    border-top-color: rgb(55, 55, 55);
    border-right-color: rgb(55, 55, 55);
    border-bottom-color: rgb(55, 55, 55);
    border-left-color: rgb(55, 55, 55);
    border-radius: 0.15em;
    place-content: center;
}




    input[type="checkbox"]:focus {
        outline: max(0px, 0em) solid green;
    }

    input[type="checkbox"]:disabled {
        color: red;
        cursor: not-allowed;
    }



.form-check-input:focus {
    border-color: #494d53;
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(1, 4, 9, 0);
}


.form-check-input:checked {
    background-color: #1d202a;
    border-color: #838080;
}


.form-check-input {
    width: 1em;
    height: 1em;
    margin-top: .25em;
    vertical-align: top;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: 1px solid rgba(0, 0, 0, 0.91);
    border-top-color: rgba(0, 0, 0, 0.91);
    border-right-color: rgba(0, 0, 0, 0.91);
    border-bottom-color: rgba(0, 0, 0, 0.91);
    border-left-color: rgba(0, 0, 0, 0.91);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-print-color-adjust: exact;
    color-adjust: exact;
}

    .form-check-input[type="checkbox"] {
        border-radius: 0.25em;
        height: 22px !important;
        width: 22px !important;
    }







.lib-nav-btn-creator {
    height: 80px;
    text-align: center;
    font-size: 13pt;
}


.lib-nav-font-h6 {
    font-size: 11.3pt
}


.lib-form-control-color {
    color: #7d878f;
    background-color: #212529;
}

/*sdddddddddddddddddddddddddddddddddddddddddd overlay modal*/
.modal-backdrop {
    display: none
}



.lib-modal {
    color: #fff;
    padding-top: 2rem;
}


.lib-modal-content {
    background-color: #1d2124;
    border-radius: 1rem;
}


.lib-modal-content-border {
    border-radius: 1rem;
}

.lib-modal-dialog {
    border: 0px solid #3aeca1;
}


.lib-modal-overlay {
    background-color: #1d2124c2;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
}



.modal-header {
    border-bottom: 1px solid #383b3e;
}

.modal-footer {
    border-top: 1px solid #383b3e;
}



.btn-close {
    color: #000;
    background: #bbb url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
    opacity: 1;
}

    .btn-close:hover {
        opacity: 1;
        background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
    }



.reg-poster-start {
    background: url(/images/main/login-cover4.webp?v=f8czVLEs4dh5LeeXmFnJDTh8b5M);
    background-size: cover;
    background-position: center;
    min-height: 900px;
    height: 100%;
    width: 100%
}

.login-poster-start {
    background: url(/images/main/login-cover5.webp?v=XX1WkO9XwtmsVY1l7MRO94hnDTU);
    background-size: cover;
    background-position: center;
    height: 900px;
    width: 100%
}


.panel-identity {
    overflow: hidden;
    border-radius: 1.5rem;
    max-width: 1100px;
    min-height: 790px;
}

.main-category-overlay {
    background: linear-gradient(180deg, #0f0f0fab 7%, #3e5352d9 150%);
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3;
    /* Эта строка задаёт переход градиента */
    transition: background 2s ease-in-out;
    transition: all .4s ease-in-out;
}

    .main-category-overlay:hover {
        background: linear-gradient(180deg, #242424ab 7%, #3e535287 150%);
        position: absolute;
        bottom: 0;
        top: 0;
        left: 0;
        right: 0;
        z-index: 3;
    }

.main-category {
    background: rgba(62, 74, 81, 0.24);
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
}

    .main-category:hover {
        background: rgba(62, 74, 81, 0);
    }

.lib-bundle-item-count {
    display: flex;
    height: 100%;
    font-size: 14pt;
    text-align: center;
    margin: 0px !important;
    font-weight: 600
}



.lib-list-bundles-products {
    background: #212529;
    padding: 1rem !important;
    margin: 0px;
    margin-top: 3px;
}


.lib-bundles-product-li {
    background: #70865b;
    padding: 0.2rem 0.4rem;
    border-radius: 0.3rem;
    color: #184012;
    margin: 6px 6px 0px 0px !important;
    font-size: 9pt;
}


.lib-creator-item-info {
    height: 46px;
    width: 60px;
    margin-right: 0.3rem;
    font-size: 14pt;
}

.font-12 {
    font-size: 12pt;
}


.font-11 {
    font-size: 11pt;
}

.font-10 {
    font-size: 10pt !important;
}

.font-9 {
    font-size: 9pt;
}

.font-17 {
    font-size: 18pt;
}

.font-18 {
    font-size: 18pt;
}

.font-20 {
    font-size: 20pt;
}

.font-27 {
    font-size: 27pt;
}



.lib-bundles-items-product-list {
    background: #292d31;
    color: white;
    border-radius: 0.5rem;
    border: 1px solid #828282;
    border-style: dashed;
}


.lib-bundles-items-product-list-disable {
    color: #d75656;
    border-color: #d93d3d;
    background: #2f2121;
}


.lib-message-popup1 {
    background: #712b2b;
    padding: 1rem;
    border-radius: 0.5rem;
    color: azure;
}



.lib-creator-item-orderinfo {
    height: 46px;
    width: 157px;
    margin-right: 0.3rem;
    font-size: 14pt;
}


.lib-colorbq-red {
    background: #b53333
}

.lib-colorbq-green {
    background: #7f8c3f
}


.lib-dark-color1 {
    background: #1d2124
}


.lib-icon-xv {
    width: 30px;
    text-align: center;
    padding: 0px 5px 0px 5px;
}




.lib-bundle-footer {
    z-index: 3;
    margin-top: 2rem !important;
}

.lib-bundle-author {
    background: #171717;
    padding: 1rem 1rem;
    border-radius: 0.6rem;
    font-weight: 600
}



.lib-bundle-list-product {
    max-width: 730px;
}




.tag-video {
    background: #35383c;
    font-size: 10pt;
    border-radius: 0.4rem;
    color: #fff;
    padding: 0.4rem 0.6rem;
    line-height: normal;
    min-width: 600px;
}






















/* use reverse flexbox to take advantage of flex-direction: reverse */
.rating-area {
    overflow: hidden;
    width: 220px;
    margin-top: 1rem;
}

    .rating-area:not(:checked) > input {
        display: none;
    }

    .rating-area:not(:checked) > label {
        float: right;
        width: 42px;
        padding: 0;
        cursor: pointer;
        font-size: 21pt;
        line-height: 32px;
        color: lightgrey;
        text-shadow: 1px 1px #bbb;
    }

        .rating-area:not(:checked) > label:before {
            content: '★';
        }

    .rating-area > input:checked ~ label {
        color: gold;
        text-shadow: 1px 1px #c60;
    }

    .rating-area:not(:checked) > label:hover,
    .rating-area:not(:checked) > label:hover ~ label {
        color: gold;
    }

    .rating-area > input:checked + label:hover,
    .rating-area > input:checked + label:hover ~ label,
    .rating-area > input:checked ~ label:hover,
    .rating-area > input:checked ~ label:hover ~ label,
    .rating-area > label:hover ~ input:checked ~ label {
        color: gold;
        text-shadow: 1px 1px goldenrod;
    }

.rate-area > label:active {
    position: relative;
}




.rating-result {
    margin: 0 auto;
}

    .rating-result span {
        padding: 0;
        font-size: 18pt;
        margin: 0 3px;
        line-height: 1;
        color: lightgrey;
        text-shadow: 1px 1px #bbb;
    }

    .rating-result > span:before {
        content: '★';
    }

    .rating-result > span.active {
        color: gold;
        text-shadow: 1px 1px #c60;
    }











.lib-review-comment {
    background: #403a68;
    padding: 1rem;
    border-radius: 0.5rem;
    color: azure;
}


.disabled-star-oud > label {
    width: 23px;
    height: 16px;
    font-family: Arial;
    font-size: 17pt;
    transition: 0.2s ease;
    color: #777 !important
}



.lib-review-product-form {
    background: #0b0b0b;
    border-radius: 0.5rem;
    padding: 0.8rem 1rem !important;
    position: relative;
}


.lib-comment-form {
    background: #f7f7f708;
    border-radius: 0.5rem;
    padding: 0.5rem !important;
    position: relative;
}

.lib-userchat-form {
    border-radius: 0.5rem;
    position: relative;
}

.lib-review-avatar-user {
    height: 44px;
    width: 44px;
}

.del-btn-comment {
    position: absolute;
    right: 0;
    top: 0;
    margin: 0.5rem;
}


/* ==========================================
   COMMENTS THREADED SYSTEM
   ========================================== */

.comment-thread {
    margin-bottom: 0.75rem;
}

.comment-item,
.comment-reply-item {
    display: flex;
    gap: 0.65rem;
    padding: 0.5rem 0;
}

.comment-avatar {
    flex-shrink: 0;
}

.comment-avatar-img {
    width: 36px;
    height: 36px;
    object-fit: cover;
}

.comment-avatar-sm .comment-avatar-img {
    width: 28px;
    height: 28px;
}

.comment-content {
    flex: 1;
    min-width: 0;
}

.comment-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.comment-username {
    font-weight: 600;
    font-size: 0.85rem;
    color: #e0e0e0;
    text-decoration: none;
}

a.comment-username:hover {
    color: #fff;
    text-decoration: underline;
}

.comment-deleted-user {
    color: #888;
    font-style: italic;
}

.comment-author-badge {
    font-size: 0.7rem;
    font-weight: 600;
    color: #8b5cf6;
    background: rgba(139, 92, 246, 0.12);
    border: 1px solid rgba(139, 92, 246, 0.25);
    border-radius: 4px;
    padding: 1px 6px;
    margin-left: 6px;
    vertical-align: middle;
    white-space: nowrap;
}

.comment-delete-btn {
    background: none;
    border: none;
    color: #888;
    font-size: 0.75rem;
    padding: 0.15rem 0.3rem;
    cursor: pointer;
    margin-left: auto;
    opacity: 0;
    transition: opacity 0.2s;
}

.comment-item:hover .comment-delete-btn,
.comment-reply-item:hover .comment-delete-btn {
    opacity: 1;
}

/* ═══ Review stars ═══ */
.review-submit-area {
    display: flex;
    align-items: center;
    gap: 10px;
}

.review-stars-input {
    display: inline-flex;
    gap: 3px;
    cursor: pointer;
}

.review-stars-input .fa-star {
    font-size: 1.1rem;
    color: #666;
    transition: color 0.15s;
}

.review-stars-input .fa-star.fa-solid {
    color: #e0e0e0;
}

.review-stars-display {
    display: inline-flex;
    gap: 2px;
    margin-left: 8px;
    font-size: 0.7rem;
}

.review-stars-display .fa-star {
    color: #555;
}

.review-stars-display .fa-star.fa-solid {
    color: #e0e0e0;
}

.comment-delete-btn:hover {
    color: #e74c3c;
}

.comment-text {
    font-size: 0.88rem;
    color: #d4d4d4;
    margin-top: 0.15rem;
    word-break: break-word;
    line-height: 1.45;
}

.comment-deleted-text {
    font-style: italic;
    color: #777;
}

.comment-gif-preview {
    margin-top: 0.4rem;
}

.comment-gif-preview img {
    max-width: 280px;
    max-height: 200px;
    border-radius: 0.5rem;
    object-fit: cover;
}

.comment-footer {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.25rem;
    font-size: 0.75rem;
}

.comment-time {
    color: #888;
}

.comment-footer-dot {
    color: #666;
}

.comment-reply-btn {
    background: none;
    border: none;
    color: #888;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}

.comment-reply-btn:hover {
    color: #bbb;
}

.comment-toggle-replies {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    background: none;
    border: none;
    color: #5b9bd5;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.35rem 0 0.15rem;
}

.comment-toggle-replies:hover {
    color: #7cb8e8;
}

.comment-toggle-icon {
    font-size: 0.65rem;
    transition: transform 0.2s;
}

.comment-replies {
    margin-left: 0.5rem;
    padding-left: 0.75rem;
    border-left: 2px solid #3a3556;
}

.comment-reply-item {
    padding: 0.35rem 0;
}

.comment-loading {
    color: #888;
    font-size: 0.8rem;
    padding: 0.5rem 0;
}

/* Reply form inline */
.comment-reply-form {
    margin-top: 0.5rem;
}

.comment-reply-textarea {
    font-size: 0.85rem;
    resize: none;
    min-height: 2.5rem;
    background: #2a2548 !important;
    border: 1px solid #3a3556 !important;
    color: #e0e0e0 !important;
}

.comment-reply-textarea:focus {
    border-color: #5b9bd5 !important;
    box-shadow: none !important;
}

.comment-reply-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.35rem;
    gap: 0.5rem;
}

.comment-reply-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.comment-reply-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.comment-reply-counter {
    font-size: 0.7rem;
    color: #777;
}

.comment-reply-cancel {
    color: #888;
    font-size: 0.8rem;
}

.comment-reply-cancel:hover {
    color: #bbb;
}

.comment-reply-submit {
    background: #5b9bd5;
    color: #fff;
    border: none;
    font-size: 0.8rem;
    padding: 0.25rem 0.75rem;
    border-radius: 0.3rem;
}

.comment-reply-submit:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.comment-reply-submit:not(:disabled):hover {
    background: #4a8cc4;
}

/* Форма отправки основного комментария */
.comment-form-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.5rem;
}

.comment-form-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.comment-char-counter {
    font-size: 0.75rem;
    color: #777;
}

.comment-submit-btn {
    background: #5b9bd5;
    color: #fff;
    border: none;
    font-size: 0.85rem;
    padding: 0.35rem 1rem;
    border-radius: 0.3rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.comment-submit-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.comment-submit-btn:not(:disabled):hover {
    background: #4a8cc4;
    color: #fff;
}

/* Кнопка "Загрузить ещё" */
.comment-load-more {
    display: block;
    width: 100%;
    padding: 0.6rem;
    margin-top: 1rem;
    background: transparent;
    border: 1px solid #3a3556;
    color: #8ab4f8;
    font-size: 0.85rem;
    border-radius: 0.4rem;
    cursor: pointer;
    text-align: center;
}

.comment-load-more:hover {
    background: rgba(138, 180, 248, 0.1);
    border-color: #5b9bd5;
}

.comment-load-more:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}


.main-footer-bq {
    background: url('/images/bqfooter.webp?v=bpBq0M8PY8f8vQAxjOign3X715I');
    background-size: cover;
}



.lib-header-design-page {
    position: relative;
    height: 400px;
    object-fit: cover;
    object-position: center;
    width: 100%;
    background: url(../vvv.png?v=D9Q1lCuYwVrc7x3QG_DVqy5rnFY);
    background-size: auto;
    background-size: 10%;
    overflow: hidden;
}

    .lib-header-design-page > img {
        position: absolute;
        object-fit: cover;
        height: 100%;
        object-position: center;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }


.lib-header-design-page-user {
    position: relative;
    height: 400px;
    object-fit: cover;
    object-position: center;
    width: 100%;
    background: url(../vvv.png?v=D9Q1lCuYwVrc7x3QG_DVqy5rnFY);
    background-size: auto;
    background-size: 10%;
    overflow: hidden;
}




.lib-cart-cover-product {
    height: 33px;
    width: 33px
}


.lib-nav-tabs {
    border-bottom: 0px;
}

.border-radius-05 {
    border-radius: 0.5rem;
}


.lib-btn-product-tab {
    background: #151515 !important;
    padding: 0.7rem 1rem;
}

    .lib-btn-product-tab:hover {
        background: #2b2b2b !important
    }


.lib-btn-product-tab2 {
    background: #3d3d3d !important;
    padding: 0.7rem 1rem;
}

    .lib-btn-product-tab2:hover {
        background: #2b2b2b !important
    }


.nav-pills .lib-btn-product-tab.active, .nav-pills .show > .nav-link {
    color: #fff !important;
    background-color: #b63b3b !important;
    border-color: #1861ac;
}


.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {
    border: 0px #fff;
}

.nav-tabs .nav-link:focus, .nav-tabs .nav-link {
    border: 0px #fff;
}




.artwork-story-preview {
    position: relative;
    width: auto
}


.lib-bq-main-contet {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    z-index: 0;
}

.lib-bq-main-contet-overlay {
    background: linear-gradient(150deg, #0e0e0e -0%, #222 99%);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    z-index: 1;
}



.lib-list-notification {
    background: #fff;
    color: #3f3e3e;
}



.lib-btn-violet {
    background-color: #5933e3 !important;
}

    .lib-btn-violet:hover {
        background-color: #7253e1 !important
    }


    .lib-btn-violet:disabled {
        background-color: #23272b !important;
    }
























.theme-color-bundle {
    background: #fff;
}

.theme-color-bundle-back {
    background: #ececec;
}

.theme-color-title {
    color: #474d5e
}

.theme-color-main-title {
    color: #474d5e
}



.section-block-1 {
    background: #f4f4f4 60%;
    background: #191c1e;
}

.section-block-2 {
    background: #f4f4f4 60%;
    background: #191c1e;
}


.nav-bar-main-menu {
    min-height: 74px;
}

.nav-bar-link-1 {
    color: #808a93 !important;
    font-weight: 500 !important;
}

    .nav-bar-link-1:hover {
        color: #757575
    }

.theme-nav-bar-button {
    border-radius: 0.5rem;
    padding: 0.7rem 1.3rem;
    font-weight: 400;
    font-size: calc(14 / 16 * 1rem);
}

    .theme-nav-bar-button:hover {
        background: #303538;
        border-radius: 0.5rem;
        padding: 0.7rem 1.3rem;
    }

.theme-shadow {
    box-shadow: 0 4px 15px rgba(0,0,0,.03)
}

.theme-nav-link-color-1 {
    color: #282424 !important
}










.main-category-cover-img {
    height: 100%;
    width: 100%
}







#skew-2 {
    transform: skew(3deg, -0deg);
}




.main-header-present {
    overflow: hidden;
    position: relative;
    bottom: 0px;
    z-index: 1;
}


.main-header-present-img {
    object-fit: cover;
    height: 100%;
    object-position: center;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.main-header-present-img-h {
    object-fit: cover;
    object-position: center;
    overflow: hidden;
    bottom: 0;
    left: 0;
    right: 0;
}


.main-header-pr-slider-h {
    min-height: 750px;
}

.main-header-pr-slider-minh {
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    object-fit: cover;
    object-position: center;
    border-radius: 0px;
}


.main-header-slider-control-l {
    background: linear-gradient(90deg, rgba(12, 12, 19, 0.79) 0%, rgba(4, 4, 6, 0.69) 34%, rgba(0,212,255,0) 100%);
}

.main-header-slider-control-r {
    background: linear-gradient(280deg, rgb(12, 12, 19) 0%, rgb(4, 4, 6) 5%, rgba(0,0,0,0) 78%)
}


.screenshots-main-img {
    height: 96px;
    object-position: center;
    object-fit: cover;
    padding: 0.3rem;
    border: 0px !important;
    border-radius: 1.0rem;
    border-style: dashed;
    border-color: #ffffff0d;
}



.main-carousel-caption {
    position: relative;
    right: 0;
    bottom: 1.25rem;
    left: 0;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    color: #fff;
    text-align: center;
    margin-bottom: 5rem;
}




.lib-title-product-panel {
    background: #0f0f10;
    padding: 1rem;
}

.lib-title-product-panel-warning {
    background: #5b1d1d;
    padding: 1rem;
    color: #dfd9d9;
}


.lib-min-w80 {
    min-width: 80px;
}

.lib-min-w100 {
    min-width: 100px;
}

.lib-min-w120 {
    min-width: 120px;
}

.lib-min-w150 {
    min-width: 150px;
}

.lib-hr1 {
    background: #6f6f6f;
}




.accordion-item {
    background-color: #f7f7f708;
    border: 0px solid rgba(0,0,0,.125);
}



.lib-card-img {
    height: 300px;
    object-fit: cover;
    object-position: center;
}

.lib-card-mini-img {
    height: 140px;
    object-fit: cover;
    object-position: center;
}

.accordion-button:not(.collapsed) {
    color: #c2c2c2;
    background-color: #18191a;
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.125);
}




.accordion-button {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 1rem 1.25rem;
    font-size: 1rem;
    color: #bfbfbf;
    text-align: left;
    background-color: rgb(23, 27, 30);
    border: 0;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,border-radius .15s ease;
    background-color: rgba(47, 55, 57, 0.32);
}


.z-index-0 {
    z-index: 0
}

.col-x-card {
    max-width: 275px;
    margin-bottom: 0.4rem;
}

.col-card {
    margin: 0.2rem;
}

.col-x-card-games {
    max-width: 360px;
    height: 495px;
    margin-bottom: 0.4rem;
}

.col-card-games {
    max-width: 360px;
    height: 495px;
    margin: 0.2rem;
}

.lib-accordion-body {
    margin: 0px;
    padding: 0px
}


.lib-accordion-button {
    padding: 0.75rem 1rem;
    margin-top: 0.1rem;
    border-radius: 0.2rem;
    border: 0px
}



.accordion-button:not(.collapsed) {
    color: #c2c2c2;
    background-color: #0d0d0d;
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.125);
    outline: 0;
    border: 0px
}

.accordion-button:focus {
    z-index: 3;
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 .0rem rgba(13,110,253,.25);
    outline: 0;
    border: 0px
}

.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    transform: rotate(-180deg);
    color: white;
}


.lib-accordion-button-count {
    font-weight: 500;
    color: #606060;
    min-width: 48px;
    margin: 0px 0.1rem;
}


.lib-accordion-button-title {
    font-size: 11pt;
    color: #808a93 !important;
    font-weight: 600 !important;
}


.font-11 {
    font-size: 11pt
}



.login-overlay-cover {
    background: rgba(36, 35, 38, 0.82);
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
}




.lib-card-news {
    background: #0000
}



.lib-main-news-overlay-modal {
    background: rgba(7, 7, 7, 0.71);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
}






.glow-1 {
    box-shadow: 0px;
    transition: box-shadow 0.3s ease-in-out;
}

    .glow-1:hover {
        box-shadow: -0px 1px 20px -0px rgba(217, 217, 217, 0.05)
    }








.panel-download-file-main {
    font-weight: lighter;
    background: #f7f7f708;
    border-radius: 0.5rem;
    color: aliceblue;
    position: relative;
    padding: 0.9rem 0.9rem !important;
    border: 2px solid #0000 !important;
    max-width: 800px;
    min-width: 400px;
}

    .panel-download-file-main:hover {
        background: #1d222a;
        color: #f2f2f2;
        border: 2px solid #562da06b !important;
    }






.border-radius-0 {
    border-radius: 0rem
}


.lib-userpage-img {
    object-fit: cover;
    width: 100%;
}



.lib-company-logo-page {
    height: 160px;
    width: 160px;
    object-fit: cover;
    object-position: center;
    border-radius: 0.8rem 1.8rem;
    margin: 0.5rem;
    margin-left: 0.5rem;
    position: absolute;
    margin-left: -1rem;
}

.lib-company-logo-page-circle {
    height: 160px;
    width: 160px;
    object-fit: cover;
    object-position: center;
    border-radius: 10rem;
    margin: 0.5rem;
    margin-left: 0.5rem;
    position: absolute;
    margin-left: -1rem;
    border: 7px solid #070707;
}



.lib-userpage-header-company {
    background: rgb(19, 19, 19);
    border-radius: 1.5rem;
}


.w-background-container {
    position: absolute;
    height: 100%;
    width: 100%;
    overflow: hidden;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-size: cover;
    filter: blur(10px);
}


.lib-userpage-header-company-overlay {
    background: #010101a1;
    background: linear-gradient(-90deg, #0000 -20%, #000000ad 121%);
    border-radius: 1.5rem;
}

.lib-userpage-header-company-g {
    min-width: 579px;
    height: 9rem;
    margin-left: 5rem;
    margin-bottom: 1.5rem;
}

.lib-userpage-header-status {
    bottom: 0rem;
    left: 0;
    right: 0;
    z-index: 1;
}

.btn-subscribe {
    background: #bc2727 !important
}

.nav-account {
    height: 94px;
    align-items: center;
    display: flex;
    padding: 1.7rem;
}


.lib-product-card-top-platform {
    background: #1d1c1c;
    border-radius: 0.6rem;
    height: 2.5rem;
    width: 2.5rem;
    text-align: center;
    align-items: center;
    display: grid;
}

.section-subscribers {
    max-width: 1920px;
    margin: 0 auto;
    background: #0000 60%;
    min-height: 500px;
    height: 100vh;
}

.footer-menu-subscribe {
    padding: 0.6rem 1rem;
    margin: 0.2rem;
}

.lib-userpage-subscribers {
    position: relative
}

.btn-check:focus + .btn-primary, .btn-primary:focus {
    color: #fff;
    background-color: #a42727;
    border-color: #0a58ca;
    box-shadow: 0 0 0 .25rem rgba(49,132,253,.5);
}

.lib-userpage-subscribers-avatar {
    height: 70px;
    width: 70px;
}


.lib-userpage-panel {
    background: #e2e2e2;
    padding: 1rem;
    width: 140px;
    text-align: center;
    align-items: center;
    display: flex;
    border-radius: 1.5rem;
    position: relative;
    display: block;
}

    .lib-userpage-panel:hover {
        background: rgb(255, 255, 255)
    }


.lib-item-title-panel {
    padding-right: 4px;
    display: grid !important;
    word-wrap: break-word;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-top: 1px;
    position: absolute;
    left: 4.5rem;
}

.lib-item-title-panel-2v {
    padding-right: 4px;
    display: grid !important;
    word-wrap: break-word;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-top: -3px;
    margin-left: 1.5rem;
}



.lib-product-flicker {
    border: 0px #ff8519 solid;
    animation: flicker 1s;
    animation-iteration-count: 3;
}

@keyframes flicker {

    20% {
        border-color: #fff;
        border: 0.5px #ff8519 solid;
    }

    50% {
        border-color: #fff;
        border: 1px #ff8519 solid;
    }
}


.lib-download-disable {
    opacity: 0.5;
    text-decoration: none;
    cursor: not-allowed;
    pointer-events: none;
}

.lib-download-list-lb {
    max-width: 500px;
    word-wrap: break-word;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    border: 0px !important;
}




.lib-footer-overlay-decor1 {
    background: url('../images/element_decor1.webp?v=_9CpZEMHg-VZKMrV2gZsEPqWMGE');
    background-repeat: repeat;
    z-index: 1;
    width: 100%;
    background-repeat: no-repeat;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-position: center;
    border-top: 1px solid #3b4e54;
    box-shadow: 0px 5px 40px -10px rgb(75, 94, 103);
}







.lib-filter-form-select {
    display: block;
    width: 100%;
    padding: .375rem 2.25rem .375rem .75rem;
    padding-right: 2.25rem;
    -moz-padding-start: calc(0.75rem - 3px);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #cacaca;
    border-color: none !important;
    background: rgba(5, 6, 6, 0.24) !important;
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
    border: 0px solid #ced4da1f;
    border-radius: 0.5rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
}

    .lib-filter-form-select > ::before {
        content: ">";
        font-size: 14px;
        display: none;
        background: red;
        border-radius: 0rem;
        color: #fff;
        border-color: none !important;
    }

    .lib-filter-form-select > option {
        font-size: 14px;
        padding: 0.6rem 0.9rem;
        border-radius: 0.5rem;
        margin: 0.3rem 0rem;
        background: #25292e;
        color: #bcbcbc;
        outline: none;
    }



        .lib-filter-form-select > option::before {
            content: ">";
            font-size: 14px;
            display: none;
            background: red;
            border-radius: 0rem;
            color: #fff;
            border-color: none !important;
        }


    .lib-filter-form-select:focus {
        border-color: none !important;
        outline: 0;
        box-shadow: 0 0 0 .0rem rgba(13,110,253,.25);
    }



.lib-button-select {
    background-color: #1c1f2259;
    color: #eaeaea;
    padding: 0.5rem 0.8rem;
    border: 0px solid #3e4144;
    font-weight: lighter;
    padding-left: 2.2rem;
    text-transform: capitalize;
}

.lib-button-select-group {
    background-color: #252525db;
    color: #eaeaea;
    padding: 0.5rem 0.8rem;
    border: 0px solid #3e4144;
    font-weight: 400;
    padding-left: 2.2rem;
    text-transform: capitalize;
    border-radius: 0.2rem;
    margin: 0.1rem;
    font-weight: 600;
    padding: 0.4rem;
}


.btn-check:active + .btn-secondary, .btn-check:checked + .btn-secondary, .btn-secondary.active, .btn-secondary:active, .show > .btn-secondary.dropdown-toggle {
    color: #fff;
    background-color: #6f2828bf;
    border-color: #51585e;
    border-radius: 0.4rem;
}

.lib-filter-icon-item {
    position: absolute;
    align-content: center;
    align-items: center;
    display: flex;
    height: 100%;
    margin-left: 1.2rem;
}


.footer-card-product-x {
    font-size: 15.5px;
    color: #fff;
    font-weight: 400;
    overflow: hidden;
    padding: 1rem;
    background: #07101100;
    border-radius: 0rem 0rem 1.5rem 1.5rem;
    text-align: start;
}

.footer-small-card-x {
    color: #5f5f5f;
    font-size: 10pt;
    margin-top: 0.2rem !important;
}

.footer-small-platforms-card-x {
    color: #5f5f5f;
    font-size: 14.5px;
}




.list-products-main {
    background: #14171a;
    text-transform: initial;
    color: #fff;
}

    .list-products-main:hover {
        background: #0a0d0f;
        color: #fff !important;
    }

.list-products-main-img {
    width: 46px;
}



.list-cart-mini-div {
    padding: 0.2rem;
    border-radius: 0.6rem;
}

.list-products-main-price {
    padding: 0.8rem 1.2rem !important;
    height: 49px;
    background: linear-gradient(560deg, rgba(8, 7, 7, 0.89) 100%, rgba(176, 42, 42, 0) 100%);
    border-radius: 1.9rem 0px 0.5rem 0px !important;
}


.list-products-main-bundle-header {
    background: #101213;
    text-transform: initial;
    color: #fff;
}

.discount-main-price-1 {
    background: #e83232;
    padding: 3px 7px;
    position: absolute;
    margin-top: -22px;
    margin-right: 8px;
    border-radius: 0.5rem;
    font-weight: 600;
    top: 0rem;
    right: 0;
    text-align: center;
}


.pa-1r {
    padding: 0.6rem;
}

.pl-imp-0 {
    padding-left: 0
}


.lib-line-old-price {
    color: #b0b0b0;
    font-weight: 600;
}



.style-custom-text {
    color: #fff
}





.lib-header-bundle {
    position: relative;
    width: 100%;
    overflow: hidden;
    height: 250px;
}

.lib-header-bundle-img {
    position: relative;
    object-fit: cover;
    object-position: center;
}



.artproject-poster {
    height: 100px;
    width: 100px;
    object-fit: cover;
    object-position: center;
    border-radius: 0rem
}

.artproject-poster-180 {
    height: 190px;
    width: 190px;
    object-fit: cover;
    object-position: center;
    border-radius: 0rem
}


.artproject-poster-100 {
    height: 100px;
    width: 100px;
    object-fit: cover;
    object-position: center;
    border-radius: 0rem
}

.note-editor.note-airframe, .note-editor.note-frame {
    background: rgb(14, 13, 13) !important
}

.note-frame {
    color: #fff !important;
}

.note-toolbar {
    border-color: #1d2124 !important;
    background-color: #212026;
    border-bottom: 0px #fff solid;
}

.note-btn {
    display: inline-block;
    font-weight: 400;
    margin-bottom: 0;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    white-space: nowrap;
    outline: 0;
    color: #9d9d9d !important;
    background-color: #24232a;
    border: 1px solid #1d2124 !important;
    padding: 5px 10px;
    font-size: 14px;
    line-height: 1.4;
    border-radius: 3px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.note-dropdown-menu {
    background: #212026 !important;
    background-clip: border-box;
    border: 0px solid #393a4c !important;
    border-radius: 0.3rem;
}


.modal-artworks {
    background: rgb(27, 31, 34);
    color: #fff;
}

.art-project-preview {
    height: 200px;
    object-position: center;
    object-fit: cover;
    border: 2px;
    background-color: #212529;
    border-radius: 1.0rem;
    border-style: dashed;
    border-color: #ffffff0d;
}




.art-project-btn-tools {
    background-color: #e33333;
    font-size: 12pt;
    border-radius: 0.6rem;
    z-index: 4;
}


    .art-project-btn-tools:hover {
        background-color: #9fb537;
    }

#toast-container > div {
    position: relative;
    pointer-events: auto;
    overflow: hidden;
    margin: 0 0 6px;
    padding: 15px 15px 15px 50px;
    width: 300px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    background-position: 15px center;
    background-repeat: no-repeat;
    -moz-box-shadow: 0 0 12px #999;
    -webkit-box-shadow: 0 0 12px #999;
    box-shadow: 0 0 12px #9990;
    color: #FFF;
    opacity: .8;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
    filter: alpha(opacity=80);
    border-radius: 0.5rem;
    font-weight: initial;
}


.overflow-x {
    overflow-x: hidden !important
}


.artwork-story {
    background: #131416bd;
    padding: 1.2rem;
    border-radius: 1rem;
    margin: 1rem 2rem;
}

.artwork-story-message {
    font-size: 14pt;
    color: #fff
}

#wen-modal-media-art {
    background: linear-gradient(150deg, #1d2024 -0%, #0f0f0f66 99%);
    display: contents;
    box-sizing: content-box;
}

@media (max-width: 767px) {
    #wen-modal-media-art {
        height: auto; /* Adjust the height to be automatic or specify a new fixed height /
/ Other responsive styles as needed */
    }
}


.lib-sys-req {
    width: 100%;
    max-width: 600px;
}

.lib-productnews {
    max-width: 800px
}

.lib-additional-panel {
    max-width: 300px
}



.z-index-1 {
    z-index: 1
}

.z-index-9999 {
    z-index: 9999
}


.font-13 {
    font-size: 13pt
}

.font-13-imp {
    font-size: 13pt !important
}

.font-14-imp {
    font-size: 14pt !important
}

.resource-help-button {
    text-transform: capitalize;
    text-align: center !important;
    align-content: center;
    align-self: center;
    display: block !important;
    position: relative;
    background: #2b2e323d !important;
    border: 1px solid #55515166 !important;
}

.btn-resource-download {
    background: rgba(43, 46, 50, 0.24) !important;
    font-size: 24pt;
    padding: 0.5rem 1rem !important;
    color: white
}

    .btn-resource-download:hover {
        background: rgba(70, 74, 80, 0.24) !important
    }


.w-260 {
    width: 260px;
}

.artwork-title-t1 {
    color: #fff !important;
    font-weight: 500 !important;
}

.title-panel-top {
    color: #808a93 !important;
    font-weight: 500 !important;
}

.title-main-achievements {
    color: #fff !important;
    font-weight: 600 !important;
}

.title-2-panel-top {
    color: #808a93 !important;
    font-weight: 500 !important;
}

.title-3-panel-top {
    color: #808a93 !important;
    font-weight: 500 !important;
}


.title-4-img-drop {
    color: #fff !important;
}

.title-5-main-btn {
    color: #dbdbdb !important;
    font-weight: 600 !important;
}


.title-shop-panel-top-1 {
    color: #808a93 !important;
    font-weight: 600 !important;
}

.title-shop-panel-top-2 {
    color: #c95e34 !important;
    font-weight: 600 !important;
}

.title-shop-panel-top-3 {
    color: #808a93 !important;
    font-weight: 400 !important;
}

.title-shop-panel-top-4 {
    color: #fff !important;
    font-weight: 400 !important;
}

.title-shop-panel-top-subhelp {
    color: #a4afb9 !important;
    font-weight: 400 !important;
}


.p-2-5 {
    padding-top: 1.5rem;
}

.video-main {
    z-index: 1;
    color: aliceblue;
    background: #06060942;
    top: 0;
    left: 0;
    right: 0;
}


.video-main-center {
    -webkit-transform: translateX(-50%) translateY(-25%);
    transform: translateX(-50%) translateY(-25%);
    position: absolute;
    top: 25%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    z-index: -1000;
}


.video-main-title {
    color: #fff !important;
    font-weight: 600 !important;
}

.video-main-message {
    color: #b8b8b8 !important;
    font-weight: 400;
}



.video-main-btn {
    border: 2px solid #dbdbdb03 !important;
    color: #ececec;
    background: #e8e8e81c;
    border-radius: 0.5rem;
}

    .video-main-btn:hover {
        border: 2px solid #dbdbdb !important;
        color: #ececec;
        background: #eeeeee61;
        border-radius: 0.5rem;
        box-shadow: -5px 11px 50px -10px rgb(32, 221, 241);
    }


.lib-product-mini-cover {
    height: 416px !important;
    width: 268px !important;
    object-fit: cover;
}

.lib-product-mini-cover-2 {
    height: 116px !important;
    width: 68px !important;
    object-fit: cover;
}



.nav-link-product-library {
    background: #1f2327 !important
}

    .nav-link-product-library:hover {
        background: #101315 !important
    }

.nav-pills .nav-link-product-library.active, .nav-pills .show > .nav-link-product-library {
    color: #808a93 !important;
    font-weight: 600 !important;
    background-color: #101315 !important;
    border-color: #1861ac;
}

    .nav-pills .nav-link-product-library.active, .nav-pills .show > .nav-link-product-library:hover {
        background-color: #101315 !important;
    }


.lib-upload-img-poster-ach {
    width: 150px !important;
    height: 150px !important;
    border-radius: 1rem !important;
    overflow: hidden;
    box-shadow: 0px 0px 6px 0.1rem rgba(27, 27, 30, 0.56) !important;
}

.main-achievements-img {
    height: 100px;
    width: 100px;
    object-position: center;
    object-fit: cover;
    border: 2px;
    background-color: #212529;
    border-style: dashed;
    border-color: #364242;
}



.main-achievements-panel-icon {
    min-height: 130px;
    width: 90px;
    object-position: center;
    object-fit: cover;
    margin: 2px;
    text-align: center;
    justify-content: center;
    align-content: center;
    align-items: center;
}



.main-achievements-panel-title {
    color: #808a93 !important;
    font-weight: 600 !important;
}

.main-achievements-panel-title {
    color: #808a93 !important;
    font-weight: 600 !important;
}

.main-achievements-img-item {
    position: relative;
    transition: all .2s ease-in-out;
    border: 4px solid #fff0;
}

    .main-achievements-img-item:hover {
        transform: scale(1.1);
        border: 4px solid #fff;
        border-radius: 0.6rem;
    }




.main-achievements-img-p {
    height: 70px;
    width: 70px;
    object-position: center;
    object-fit: cover;
    border: 0px;
    background-color: #212529;
    border-style: dashed;
    border-color: #364242;
}




.main-panel-achievements {
    min-width: 330px;
    padding: 1rem;
    background: #1b1f22;
    background: linear-gradient(200deg, #2f2c2c -59%, #070707 91%);
    border-radius: 1.0rem;
    max-width: 600px;
    border: 2px solid #241f1f;
}

.main-achievements-img-icon {
    bottom: 0;
    right: 0;
    margin: 3px;
    color: #fff;
}





.art-project-preview-library {
    height: 100px;
    width: 100px;
    object-position: center;
    object-fit: cover;
    background-color: #212529;
}




.help-btn {
    background-color: #212529;
}

    .help-btn:hover {
        background-color: #112529;
    }





.nav-link-help {
    background: #212529 !important;
    color: #a9afb4;
    font-size: 11pt
}

.nav-pills .nav-link-help.active, .nav-pills .show > .nav-link-help {
    background: #15191c !important
}

.list-group-item-help {
    background: none !important;
    padding: 0.1rem 0.0rem;
    font-weight: normal !important;
    border: 0px;
}



.nav-title-title-menu-help {
    background: #f000 !important;
    color: #99a3ab;
    font-weight: 400;
    margin-bottom: 0.4rem
}


.box-shadow-not {
    box-shadow: none !important
}



.home-carousel-poster-price1 {
    bottom: 0;
    z-index: 2;
    padding: 0.2rem 1.4rem;
    font-size: 22pt;
    font-weight: 600;
    background: #0c0209;
    border-radius: 0.5rem;
    margin: 1rem;
}

.home-carousel-poster-price2 {
    bottom: 0;
    z-index: 2;
    padding: 0.2rem 1.0rem;
    font-weight: 600;
    background: #cd3828;
    border-radius: 0.5rem;
    margin: 1rem;
    margin-bottom: 1rem;
    margin-left: 1rem;
    margin-bottom: 3.5rem;
    margin-left: 3.5rem;
}

.home-carousel-poster-gradient {
    width: 360px;
    background-image: linear-gradient(180deg, #0000 50%, #4a3f98 99%);
    z-index: 1;
    margin-left: -0.5rem;
    border-radius: 1.5rem;
}


.home-carousel-effect1 {
    background-image: linear-gradient(180deg, #0000 -30%, #00000182 99%);
    z-index: 1;
    box-shadow: 0px 5px 400px -10px rgb(0, 0, 0);
}

.home-carousel-effect2 {
    z-index: 1;
    border-bottom: 1px solid #919191ab;
    box-shadow: 0px 15px 300px -100px rgb(154, 154, 154);
    border-bottom: 1px solid #ff62a4;
    box-shadow: 0px 15px 300px -100px rgb(255, 69, 130);
}


.box-shadow-fx-1 {
    box-shadow: 0px 5px 40px -10px rgb(65, 61, 135) !important;
}













.main-logo-product-promotion {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}



.main-logo-product-promotion-img {
    height: 150px;
    width: 200px;
    position: relative;
    text-align: center;
    margin: 2rem;
    z-index: 2;
    bottom: 130px;
    position: absolute;
}


.main-logo-product-promotion-decor {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border: 2px solid #ffffff12;
    z-index: 3;
    margin: .4rem;
    border-radius: 2rem;
    border-style: dashed;
}

}








.pulse {
    display: block;
    cursor: pointer;
    box-shadow: 0 0 0 rgba(65, 61, 135, 0.4);
    animation: pulse 4s infinite;
}

    .pulse:hover {
        animation: none;
    }

@-webkit-keyframes pulse {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(65, 61, 135, 23.4);
    }

    70% {
        -webkit-box-shadow: 0 0 0 20px rgba(65, 61, 135, 0);
    }

    100% {
        -webkit-box-shadow: 0 0 0 0 rgba(65, 61, 135, 0);
    }
}

@keyframes pulse {
    0% {
        -moz-box-shadow: 0 0 0 0 rgba(65, 61, 135, 23.4);
        box-shadow: 0 0 0 0 rgba(65, 61, 135, 0.4);
    }

    70% {
        -moz-box-shadow: 0 0 0 20px rgba(65, 61, 135, 0);
        box-shadow: 0 0 0 40px rgba(65, 61, 135, 0);
    }

    100% {
        -moz-box-shadow: 0 0 0 0 rgba(65, 61, 135, 0);
        box-shadow: 0 0 0 0 rgba(65, 61, 135, 0);
    }
}








.title-home-content {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-bottom: 0.5rem;
    font-size: 20pt;
    font-weight: normal;
    color: #fff !important;
    font-weight: normal;
}


    .title-home-content:not(:empty)::before, .title-home-content:not(:empty)::after {
        content: "";
        display: block;
        width: 262px;
        height: 30px;
        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAA9CAYAAADbA9GgAAAJ4klEQVR4nO3de6wcVR3A8e+2Up4Fyqs1VALakBpAQNHGEh+Q1geKCAIRkQDxASiIqEjUmEhE/EOjVPQf4h+KJEIKBsSIYIiJCvIIbwENCggmUBGQUpQCbc25/PZ2O3dmH3d3Zvbx/fyzuzNnZs6Z2bvn3PNsrH3uBdpptN3bhb5PULq9gDcAi+L9IcA84Crg0taLN3LeTe/YNBJpbWs6+j2lY0gSnfNISr9ISaer7462uXKXkar129Dx4vkBKotz6V+fAV2gxBvS309l/9/PQZrVJbs+qLwEzZ07Z/r9a0q7ynDaDtgb2A9YCiyJ95situl1HXAFcOOE3RtJ0gSZhALAAcAbgQOB5cBOmQy/6V/AD4Hr6ouqJEnVGMcCwMKoxn8LsD+wb0GG3+pKYBXwYvXRlSSpeuNSAFgS1fv/Bq6NdBVl9q2eAL4B3FFdVCVJqt+oFwAWA58AjgV+DazPSVNRQeCPwLnASxXEU5KkoTKqBYA9gJOAU1sy+N2iJqDpiajS3xPYKnN8qvL/drVRliRpeIxiAeAM4JPA1pntqc1/ThQIfgxsD7w7Mv+1wJ3ALcBfgbtrirskSUNhzgg9huVRzX8msE3O/pSWm4AT4v1xMbY/Dah8BdgI7GLmL0nS6NQAfA44Pd4XtemvivH75wMrMuFSxn848FCaBwHYUEGcJUkaWqNQAPgWcEyHXv2pP8CTwNXA7gVhUiHiDyXFUZKkkTLsTQDLI/Mv8lz8Z5/ScUN0Dsxzppm/JEmbDWMB4OCYm5/o7FfkMeDQKCT8tE24r0ffAEmSFIatAPBZ4HLgPxG35QXh7gOOAE4DLmhzvktjYiBJktRimPoAnBzt9Gk2v6ejI1+em4FPAV8BTmzpG5DG/N8DPBVzANwRYSVJUsawFABSZv+1yMwfiG3H54S7NTL/7wDvz+zbEEP+7gJWVxBnSZJG1jA0AaQZ/H7Q8vnxeD04E+6umPnvu1H9n5Um/nmbQ/wkSepsGGoAzs7E4+/ArsD8lm1/jur+i4CVBed5NjoNPlRyfCVJGnnDUABYkvn8Ykzr2/TPmNUvzd3/npz5ANLUvvcD34thgZIkqYO6CwDbAksz2w6LpX2TdZHpfxU4qiVM6ih4G3A7cC/wlwrjLEnSyKu7D8AyYIfMtpUtw/9WxOiAkzJh5gFvig6Br68orpIkjY26agAWRJv9bm3CHBaZ/Hk5+3aMPgJfBK4vMZ6SJI2lumoAvhAd/bLr9Dd9PvoCXFKw/+XoF2DmL0nSLNRVADghOv/tmLMvDQn8DfD7gmOfB44GHiw5jpIkja06CgAHxGtzrf5WaUGfH8V0wHm1A5uiP8Aj1UVXkqTxU0cfgA/E66kx53/TGuAs4BTgoIJjHecvSdIA1FEAWBSv+2fG9H8QWBxz/Oet/Z9qBv5UURwlSRprdRQA8podjo1JfG4oOOaOKABIkqQBqKMPwAuZz+fEZD7fBHYuOOYzFcRLkqSJUUcNQHO63rRozzWxfG/6z3/vgqr/NBRwbcVxlCRprNVRAHgpXlOmvhC4rCDjJ+YC+H6FcZMkaSLU0QTQXOVv55Ypf4v8YjIegyRJ1aqjBqCZ6Tcy//mvj9qBp2IFwMft+CdJUjmqLgAcGDMApoz/2mj7/0es+vd8FACynQQlSdKAVV0AuDBe0yp+v/NhSpJUjyr7ALwu1v6/zsxfkqR6VVkDcHq8ftlnLk11gv0QsEdMdNWpULxTTKOdltC+u81iWZLUlapqANL0vx8F7gT+66PRhJsffw97RiF8GXBIm1syP2bLfG2ET2HfPOk3UVJ/qigApB+vn8T7CzuElcbddsDHgAWZdB5akO4U/ricWTKX+U2R1I+yCwDp/BdFz//kLp+WJtg2kfnvmnMLHs3ZtnVk/rvk7HvML5KkfpTdB+BLwGHARuBvPilNsK2j2n+PnFtwX3SObTUvMv/dc8LfD/zWL5OkfpRZADgaOCPG/M+JHzlpEm0FHB9t/tlpr2/O6dCXwh8Tbf7Z8LcCN/ktktSvxtrn2s+705jdBU4Dzps6vDH9A9b6Q5bdVvTaS9gyzzH12pj+3Nhyf0rjpnid/fkHEsd+rtFoTU/X52rUlcaZzyAvLQONR25aZ5+GRv72xmzvQfd/N53SN3Nfl9/tDve9lzj2fsyrN+5/MUpiDTPk/5rN8jeudwO+0MzTDegCJd6Q5vSvs7tEm6Mqe4h9XrLrg8pL0Ny5m1v+y+gDsNd05i9J1Ur9LA7ynkudDboJYIdYvndOTtWlJFUhFQKO6rNGodd9VZyjyv3D8r7bePSyr5+wZXzOO2c31+m0bWPUiL2cc9yUQdYAzI0e/0sHeE5JktS7lL9v2+6oQdYAnAuszJRIUgnkSOCBIX9418UMa5IkTYRB1QB8uGWq31Y/G4HMP7kAeHoI4iFJ0iA0mwAKpVEA2XX5t9BFT74jo+q/WZvQPNc9U+OeG+0jMEo234vMXemva+vQmI5+T+kYkkTnPJLSLzLTO2LeC1r+DtL8F1fFUtfZ0y0H3pkJ/3ADrskNX7r+e1nX+m3oeHFHAczyxAPjKIBSz96V7CiAHWY5rWjK8M8BLs5pSng8hgKOTeYvdZD+hg7PBLkXuKIgM38r8K7MtvsLCwuSNGCpAPB8TCt6PvD2Lk+fwv0yCgDZZoQHgY8AT/qwNCHSwjzvyyT1Fl79T35jzi1Iw9RWZLbdBvyqILwkDVzrREDbxlK9qRrzeuD2ND95A54Fdozx/emH7ghg/zimdchK+uG6LNrT109HdIxmA7AJoO1R9aqvCeCAmPWyuTN9E26IAkCe/WIZ4OYRKfyN8fdWYty7YRNAqWwCsAlgyJoA8mYCTD9QZwPvTVOS5szsRSbj3xDzkq+KKswtWQAYGWNWADgL2MeZACduJsA2YWc8P9rc717j0Xlbx/h13LbF/saMbY2eji/c3yjYPoD36fvR8lPZ4/j+RnG44nvbzedZjfOfef+7+DwzngXHzEhrl8f1tO2VvGGAKRP/NLAwJtNIbZv7xnKkC6LJ4Kmo6r8pMv8ncs4j1Wkf774kFZrbbh6ANTGr3yXeP42gRywESFKhDWUtBjTAEwwPmwDaHlWv6voALAZOjuV901N/Jua7eKbgoLQC4Imxwl+S+tT8fOq1IJL2AZgl+wCUdeKBsQ9AqWfvSmsfgDKXA5bGzaKWzJ9o+kodX9cVpDM1o50Qa/tvipExlwPtS92SVAELAFJ3dgdOiYVmUmb+cPwnv77g6DS19McjfPIosNox/pKGhQUAqTvHAdtHyNRR9soYAVMkTY+9XRQWUofZqzuEl6RKDXI1QGmcLYq0PdxF5k9U/xP/+Zv5Sxo61gBI3UlrW8yPNvxuMvP7YgKt1Wb+koYO8H+ys786l/4F1QAAAABJRU5ErkJggg==) center/cover no-repeat;
        background-size: cover;
        background-size: contain;
    }

    .title-home-content::after {
        margin-left: 36px;
    }

    .title-home-content::before {
        margin-right: 36px;
        transform: rotate(180deg);
    }








.slide-in-left {
    -webkit-animation: slide-in-left 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
    animation: slide-in-left 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2023-1-12 21:24:1
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */
/**
 * ----------------------------------------
 * animation slide-in-left
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-left {
    0% {
        -webkit-transform: translateX(-1000px);
        transform: translateX(-1000px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slide-in-left {
    0% {
        -webkit-transform: translateX(-1000px);
        transform: translateX(-1000px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

.slide-in-right {
    -webkit-animation: slide-in-right 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
    animation: slide-in-right 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}


@-webkit-keyframes slide-in-right {
    0% {
        -webkit-transform: translateX(1000px);
        transform: translateX(1000px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slide-in-right {
    0% {
        -webkit-transform: translateX(1000px);
        transform: translateX(1000px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}


.nav-home-logo-title {
    font-size: 18pt;
    padding: 0px;
    margin: 0px;
    color: #fff !important;
    font-family: Comfortaa;
    font-weight: 800 !important;
}


.nav-home-author-title {
    color: #808a93 !important;
    font-weight: 300 !important;
    min-height: 87px;
    display: flex !important;
    justify-content: center;
    justify-items: center;
    justify-self: center;
    align-content: center;
    align-items: center;
}


.list-accordion-filter-max {
    max-height: 500px;
    overflow-y: auto;
}

.home-accordion-poster {
    height: 800px;
    min-width: 267px;
    object-fit: cover;
    object-position: center;
    position: relative;
    overflow: hidden;
    padding: 0px;
    margin: 0px;
    transition: all .4s ease-in-out;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}

    .home-accordion-poster:not(.collapsed)::after {
        background: none;
    }


    .home-accordion-poster.collapsed {
        width: 267px;
    }




    .home-accordion-poster:focus {
        /*width: 800px;*/
    }






    .home-accordion-poster:not(.collapsed) {
        width: 1000px;
        display: visible;
    }

.accordion-collapse {
    transition: all .4s ease-in-out;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}



.home-accordion-body-poster {
    transition: none 0s ease 0s !important;
    border-radius: 1.5rem;
    padding: 2.5rem;
    padding-bottom: 6rem;
    background: #000000b0;
    padding-bottom: 5rem;
    margin-bottom: 4.5rem;
    bottom: 0;
    position: absolute;
    left: 0;
    right: 0;
    margin-left: 1rem;
    margin-right: 1rem;
}

.home-accordion-collapse {
    padding: 2rem;
    background: rgba(0, 0, 0, 0.76);
    border-radius: 1.5rem;
}

.home-accordion-item {
    z-index: 0;
}


.home-accordion-header-promotion {
    overflow: hidden
}




.cursor-grab {
    cursor: grab;
}


.slide-in-fwd-center {
    animation: slide-in-fwd-center .4s cubic-bezier(.25,.46,.45,.94) .4s both
}
/* ----------------------------------------------
 * Generated by Animista on 2023-1-13 3:48:43
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

@keyframes slide-in-fwd-center {
    0% {
        transform: translateZ(-1400px);
        opacity: 0
    }

    100% {
        transform: translateZ(0);
        opacity: 1
    }
}

html, .accordion {
    scroll-behavior: smooth;
}









.slider-button-gnx {
    width: 130px !important;
    height: 80px !important;
}












.artproject-poster-auto-grid {
    object-fit: cover;
    object-position: center;
    width: 349px;
    height: 100%;
    align-content: center;
    align-items: center;
    align-self: center;
    display: inline-flex;
    top: 0;
    left: -38px;
    position: absolute;
    bottom: 0;
    right: 0;
    border-radius: 0px !important;
}





.section-44 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    grid-template-rows: repeat(1, 1fr);
    grid-auto-flow: dense;
    grid-gap: 0em;
}

.div-5 {
    object-fit: cover;
    object-position: center center;
    height: 280px;
    width: revert;
    align-items: center;
    justify-content: center;
}

    .div-5:before {
        align-items: center;
    }

.section-44 :first-of-type .div-5:nth-child(2) {
    grid-row: auto /span 2;
    grid-column: auto / span 2;
}

.section-44 + .section-44 .div-5:nth-child(3),
.section-44 + .section-44 .div-5:nth-child(5) {
    grid-row: auto /span 2;
    grid-column: auto / span 2;
}



.lib-navbar-cart {
    background: #8b1a1a;
    border-radius: 1rem;
    padding: 0.2rem 0.8rem;
    text-align: center;
    align-content: center;
    align-items: center;
    color: azure;
    display: inline-flex;
    justify-content: center;
}



.lib-navbar-cart-count {
    margin: 0px;
    margin-bottom: 0px;
    padding: 0px;
    line-height: 1;
    margin-bottom: 2px;
}

.lib-navbar {
    background: #16191a;
    border-radius: 1rem;
}

.lib-navbar-lang {
    box-shadow: -10px 0px 80px -20px rgb(73, 127, 127);
    border-bottom: 2px solid #333e3d !important;
    border-radius: 1rem;
}

.lib-navbar-item {
    color: #949494;
    text-align: center;
    padding: 1rem;
    border-radius: 1rem;
    min-width: 100px;
    margin: 0.2rem;
    min-height: 105px;
}



    .lib-navbar-item:hover {
        background: #303538;
    }


.lib-bank-item {
    min-width: 400px;
    background: none;
    color: white;
    font-weight: 600;
}



.support-item {
    min-width: 190px;
    min-height: 190px;
    padding: 1rem;
    border-radius: 1rem;
    color: #fff;
}

    .support-item:hover {
        background: #343434;
    }



.support-item-tab {
    background: #1a1a1a;
    border-radius: 1rem;
    margin: 0.3rem
}

    .support-item-tab.active {
        background: #ff681f;
    }




.support-body {
    padding: 1rem;
    margin-top: 3rem
}


.section-55 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    grid-template-rows: repeat(1, 1fr);
    grid-auto-flow: dense;
    grid-gap: 0em;
}



.section-preview-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-template-rows: repeat(1, 1fr);
    grid-auto-flow: dense;
    grid-gap: 0em;
}

.div-6 {
    object-fit: cover;
    object-position: center center;
    width: revert;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    height: 100%;
}




.div-6-mini {
    background: #38383829;
    transition: all 0.2s ease-out;
}


    .div-6-mini:hover {
        opacity: 0.7;
        transform: scale(1.01); /* Equal to scaleX(0.7) scaleY(0.7) */
        transition: all 0.2s ease-out;
    }



.div-5:before {
    align-items: center;
}






.section-55 :first-of-type .div-5:nth-child(2) {
    grid-row: auto /span 2;
    grid-column: auto / span 2;
}

.section-55 + .section-55 .div-5:nth-child(3),
.section-55 + .section-55 .div-5:nth-child(5) {
    grid-row: auto /span 2;
    grid-column: auto / span 2;
}



.section-687 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    /* grid-template-rows: repeat(1, 1fr);*/
    grid-auto-flow: dense;
    grid-gap: 0em;
}



    .section-687 :first-of-type .div-5:nth-child(2) {
        grid-row: auto /span 2;
        grid-column: auto / span 2;
    }

    .section-687 + .section-687 .div-5:nth-child(3),
    .section-687 + .section-687 .div-5:nth-child(5) {
        grid-row: auto /span 2;
        grid-column: auto / span 2;
    }



.section-687adv {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: auto;
    grid-gap: 0em;
}

    /* По умолчанию каждый блок div-5 занимает один столбец */
    .section-687adv > .div-6 {
        grid-column: span 1;
    }

        /* Пятый блок (первый блок второго ряда) будет занимать 2 столбца */
        .section-687adv > .div-6:nth-child(5) {
            grid-column: span 2;
        }



.section-icons-907 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    grid-template-rows: repeat(1, 1fr);
    grid-auto-flow: dense;
    grid-gap: 0em;
}



    .section-icons-907 :first-of-type .div-5:nth-child(2) {
        grid-row: auto /span 2;
        grid-column: auto / span 2;
    }

    .section-icons-907 + .section-icons-907 .div-5:nth-child(3),
    .section-icons-907 + .section-icons-907 .div-5:nth-child(5) {
        grid-row: auto /span 2;
        grid-column: auto / span 2;
    }



.color-yellow-light {
    color: #ffcb7a;
}

.section-avatars-907 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(125px, 1fr));
    grid-template-rows: repeat(1, 1fr);
    grid-auto-flow: dense;
    grid-gap: 0em;
}



    .section-avatars-907 :first-of-type .div-5:nth-child(2) {
        grid-row: auto /span 2;
        grid-column: auto / span 2;
    }

    .section-avatars-907 + .section-avatars-907 .div-5:nth-child(3),
    .section-avatars-907 + .section-avatars-907 .div-5:nth-child(5) {
        grid-row: auto /span 2;
        grid-column: auto / span 2;
    }

.slide-in-elliptic-top-fwd {
    -webkit-animation: slide-in-elliptic-top-fwd 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-in-elliptic-top-fwd 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
/* ----------------------------------------------
 * Generated by Animista on 2023-1-13 20:2:50
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-in-elliptic-top-fwd
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-elliptic-top-fwd {
    0% {
        -webkit-transform: translateY(-600px) rotateX(-30deg) scale(0);
        transform: translateY(-600px) rotateX(-30deg) scale(0);
        -webkit-transform-origin: 50% 100%;
        transform-origin: 50% 100%;
        opacity: 0;
    }

    100% {
        -webkit-transform: translateY(0) rotateX(0) scale(1);
        transform: translateY(0) rotateX(0) scale(1);
        -webkit-transform-origin: 50% 1400px;
        transform-origin: 50% 1400px;
        opacity: 1;
    }
}

@keyframes slide-in-elliptic-top-fwd {
    0% {
        -webkit-transform: translateY(-600px) rotateX(-30deg) scale(0);
        transform: translateY(-600px) rotateX(-30deg) scale(0);
        -webkit-transform-origin: 50% 100%;
        transform-origin: 50% 100%;
        opacity: 0;
    }

    100% {
        -webkit-transform: translateY(0) rotateX(0) scale(1);
        transform: translateY(0) rotateX(0) scale(1);
        -webkit-transform-origin: 50% 1400px;
        transform-origin: 50% 1400px;
        opacity: 1;
    }
}




img {
    pointer-events: none;
}





.item-block-str {
    display: grid;
    grid-template-rows: auto 1fr auto; /* Creates three rows: top, middle that stretches, and bottom */
    align-items: start; /* Aligns content to the top by default */
    height: 100%;
    width: 100%;
}


.lib-title-panel-artwork {
    padding: 2rem;
    z-index: 1;
    border-radius: 1rem;
    margin: 1rem;
}


.home-poster-artwork-overlay {
    position: absolute !important;
    z-index: 1;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    opacity: 0;
    color: #fff;
}


    .home-poster-artwork-overlay:hover {
        left: 0px !important;
        bottom: 0px !important;
        background: #050a0aad !important;
        opacity: 1;
        z-index: 0;
    }



.home-poster-artwork-overlay-link {
    height: 350px;
    position: absolute;
    width: 350px;
    display: block;
    z-index: 0;
}


.home-poster-artwork-overlay-title {
    bottom: -1500px
}


.home-art-avatar-panel {
    height: 69px !important;
    width: 69px !important;
    display: block;
}

.item-art-avatar-panel-link {
    position: absolute;
    width: auto;
    height: auto;
    display: block;
    z-index: 3;
    top: 0;
}

.item-art-panel-link {
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 3;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.subitem-card-art {
    margin-top: 3rem;
    height: 100%;
}

.home-art-poster-fx2 {
    top: 0px !important;
    left: 0px !important;
}

.home-art-poster-fx1 {
    padding: 0;
    top: 0;
    left: 0;
}


.home-art-link-im {
    width: 350px;
    height: 325px;
    position: relative;
    display: block;
}


.home-art-link-title {
    font-weight: 800;
    margin-bottom: 0.4rem;
}


.home-art-link-img-f2 {
    display: contents;
}


.lib-progress {
    border-radius: 1rem;
    background-color: #4d4d4d;
}

.lib-progress-bar {
    background-color: #3f7563;
    padding: 0.5rem;
}


.font-family-segoeui {
    font-family: Segoe UI;
}




.error-art-avatar {
    border-radius: 15rem;
    height: 150px;
    width: 150px;
    object-fit: cover;
    object-position: center;
    overflow: hidden
}




.color-red {
    color: #ff5454;
}


















.error-art-background {
    margin: auto;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    overflow: auto;
    background: linear-gradient(315deg, rgb(22, 20, 22) 3%, rgb(22, 24, 26) 38%, rgb(19, 20, 20) 68%, rgb(24, 24, 27) 98%);
    animation: gradient 15s ease infinite;
    background-size: 400% 400%;
    background-attachment: fixed;
}




@keyframes gradient {
    0% {
        background-position: 0% 0%;
    }

    50% {
        background-position: 100% 100%;
    }

    100% {
        background-position: 0% 0%;
    }
}

.wave {
    background: rgb(0, 0, 0);
    border-radius: 1000% 1000% 0 0;
    position: absolute;
    width: 200%;
    height: 40em;
    animation: wave 10s -3s linear infinite;
    transform: translate3d(10, 0, 0);
    opacity: 0.1;
    bottom: -150px;
    left: 0;
    z-index: 0;
}

    .wave:nth-of-type(2) {
        bottom: -1.25em;
        animation: wave 18s linear reverse infinite;
        opacity: 0.05;
    }

    .wave:nth-of-type(3) {
        bottom: 5.5em;
        animation: wave 20s -1s reverse infinite;
        opacity: 0.08;
    }


    .wave:nth-of-type(5) {
        bottom: 7.5em;
        animation: wave 10s -1s reverse infinite;
        opacity: 0.04;
    }


@keyframes wave {
    2% {
        transform: translateX(1);
    }

    25% {
        transform: translateX(-25%);
    }

    50% {
        transform: translateX(-50%);
    }

    75% {
        transform: translateX(-25%);
    }

    100% {
        transform: translateX(1);
    }
}















.element-cb {
    height: 250px;
    width: 250px;
    margin: 0 auto;
    z-index: 1;
    animation-name: stretch;
    animation-duration: 1.5s;
    animation-timing-function: ease-out;
    animation-delay: 0;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-fill-mode: none;
    animation-play-state: running;
}
/*
@keyframes stretch {
    0% {


        transform: scale(.3);
      
        border-radius: 100%;
    }

    50% {
      
    }

    100% {
        transform: scale(1.5);
       
    }
}

*/













.error-block {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}



.icon-container {
    position: relative;
    float: left;
    width: 40px;
    height: 40px;
    text-align: center;
}

.icon {
    position: absolute;
}














.puff-out-center {
    -webkit-animation: puff-out-center 2s ease-in-out 2.4s infinite alternate both;
    animation: puff-out-center 2s ease-in-out 2.4s infinite alternate both;
}

/* ----------------------------------------------
 * Generated by Animista on 2023-1-23 4:2:17
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation puff-out-center
 * ----------------------------------------
 */
@-webkit-keyframes puff-out-center {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-filter: blur(0px);
        filter: blur(0px);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(2);
        transform: scale(2);
        -webkit-filter: blur(4px);
        filter: blur(4px);
        opacity: 0;
    }
}

@keyframes puff-out-center {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-filter: blur(0px);
        filter: blur(0px);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(2);
        transform: scale(2);
        -webkit-filter: blur(4px);
        filter: blur(4px);
        opacity: 0;
    }
}













.heartbeat {
    -webkit-animation: heartbeat 1.5s ease-in-out infinite both;
    animation: heartbeat 1.5s ease-in-out infinite both;
}
/* ----------------------------------------------
 * Generated by Animista on 2023-1-23 3:46:27
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation heartbeat
 * ----------------------------------------
 */
@-webkit-keyframes heartbeat {
    from {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transform-origin: center center;
        transform-origin: center center;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    10% {
        -webkit-transform: scale(0.91);
        transform: scale(0.91);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    17% {
        -webkit-transform: scale(0.98);
        transform: scale(0.98);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    33% {
        -webkit-transform: scale(0.87);
        transform: scale(0.87);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    45% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
}

@keyframes heartbeat {
    from {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transform-origin: center center;
        transform-origin: center center;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    10% {
        -webkit-transform: scale(0.91);
        transform: scale(0.91);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    17% {
        -webkit-transform: scale(0.98);
        transform: scale(0.98);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    33% {
        -webkit-transform: scale(0.87);
        transform: scale(0.87);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    45% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
}




.slide-in-elliptic-top-fwd {
    -webkit-animation: slide-in-elliptic-top-fwd 3s ease-in-out infinite alternate-reverse both;
    animation: slide-in-elliptic-top-fwd 3s ease-in-out infinite alternate-reverse both;
}

/* ----------
    ------------------------------------
 * Generated by Animista on 2023-1-23 4:17:38
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-in-elliptic-top-fwd
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-elliptic-top-fwd {
    0% {
        -webkit-transform: translateY(-600px) rotateX(-30deg) scale(0);
        transform: translateY(-600px) rotateX(-30deg) scale(0);
        -webkit-transform-origin: 50% 100%;
        transform-origin: 50% 100%;
        opacity: 0;
    }

    100% {
        -webkit-transform: translateY(0) rotateX(0) scale(1);
        transform: translateY(0) rotateX(0) scale(1);
        -webkit-transform-origin: 50% 1400px;
        transform-origin: 50% 1400px;
        opacity: 1;
    }
}

@keyframes slide-in-elliptic-top-fwd {
    0% {
        -webkit-transform: translateY(-600px) rotateX(-30deg) scale(0);
        transform: translateY(-600px) rotateX(-30deg) scale(0);
        -webkit-transform-origin: 50% 100%;
        transform-origin: 50% 100%;
        opacity: 0;
    }

    100% {
        -webkit-transform: translateY(0) rotateX(0) scale(1);
        transform: translateY(0) rotateX(0) scale(1);
        -webkit-transform-origin: 50% 1400px;
        transform-origin: 50% 1400px;
        opacity: 1;
    }
}






































.wen-dragdrop-area.h-180px.lib-form-upload:hover {
    background: radial-gradient(circle, rgba(255, 255, 255, 0.83) 0%, rgba(255, 255, 255, 0.64) 35%, rgba(255, 255, 255, 0.99) 100%)
}





.drag-block {
    max-width: 600px;
    height: 230px !important;
    width: 100%;
}





.wen-dragdrop-area {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 500;
    font-size: 20px;
    cursor: pointer;
    color: #cccccc;
    height: 100%;
    width: 100%;
    overflow: hidden;
    max-width: 600px;
    border-radius: 1rem;
    z-index: 0;
    min-width: 200px;
    min-height: 200px;
    position: relative;
}



.wen-dragdrop-hover-state {
    border-style: solid;
}

.wen-dragdrop-file-input {
    display: none;
}

.wen-dragdrop-preview-thumb {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    overflow: hidden;
    background-color: #cccccc40;
    position: relative;
    background-size: cover;
    background-size: cover !important;
    background-position: center !important;
    border-radius: 1.2rem !important;
}

    .wen-dragdrop-preview-thumb::after {
        content: attr(data-label);
        position: absolute;
        bottom: 0px;
        left: 0px;
        width: 100%;
        padding: 5px 0px;
        color: rgb(255, 255, 255);
        background: rgba(0, 0, 0, 0.75);
        font-size: 14px;
        text-align: center;
        padding: 1rem;
        word-wrap: anywhere;
        font-size: 9pt;
        display: none;
    }



.wen-dragdrop-hint1 {
    position: absolute !important;
    z-index: 1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    align-content: center;
    align-items: center;
    align-self: center;
    display: inline-grid;
    font-size: 13pt;
    opacity: 1.0;
    border: 7px solid #313131;
    background: #000000a1;
    background: rgb(5,5,5);
    background: -moz-radial-gradient(circle, rgba(5,5,5,0.49) 0%, rgba(20,20,20,0.64) 35%, rgba(27,27,27,0.99) 100%);
    background: -webkit-radial-gradient(circle, rgba(5,5,5,0.49) 0%, rgba(20,20,20,0.64) 35%, rgba(27,27,27,0.99) 100%);
    background: radial-gradient(circle, rgba(5,5,5,0.49) 0%, rgba(20,20,20,0.64) 35%, rgba(27,27,27,0.99) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#050505",endColorstr="#1b1b1b",GradientType=1);
    border-radius: 1rem;
}


    .wen-dragdrop-hint1:hover {
        opacity: 0.5;
        background: #6660;
        background: rgb(5,5,5);
        background: -moz-radial-gradient(circle, rgba(5,5,5,0.19883287787771353) 0%, rgba(20,20,20,0.20443511877407217) 35%, rgba(27,27,27,0.8038748946844363) 100%);
        background: -webkit-radial-gradient(circle, rgba(5,5,5,0.19883287787771353) 0%, rgba(20,20,20,0.20443511877407217) 35%, rgba(27,27,27,0.8038748946844363) 100%);
        background: radial-gradient(circle, rgba(5,5,5,0.19883287787771353) 0%, rgba(20,20,20,0.20443511877407217) 35%, rgba(27,27,27,0.8038748946844363) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#050505",endColorstr="#1b1b1b",GradientType=1);
    }

.drop-icon-c {
    font-size: 27pt !important;
}


.drag-zone-title {
    font-size: 12pt;
    padding: 1rem;
    height: 100%
}


.drag-div {
    height: 170px;
    min-width: 280px;
}





/* ── FAB: scroll-top + chat — fixed bottom-right ── */
.wenrexa-fab-top {
    position: fixed;
    right: 18px;
    bottom: 76px;
    z-index: 1060;
    display: none;
}

.wenrexa-chat-widget-btn {
    position: fixed !important;
    right: 18px;
    bottom: 18px;
    z-index: 1060;
}

.button-top-fu {
    z-index: 1060;
    width: 54px;
    height: 54px;
    border-radius: 999px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    right: 76px;
    bottom: 18px;
}

    .button-top-fu:hover {
        background: rgb(91, 79, 177);
    }





.button-top-cart {
    background: #0f0f0f;
    z-index: 2;
    right: 5.5%;
    bottom: 5%;
    font-size: 22pt;
    border: 0px solid rgb(255, 255, 255);
    color: rgb(255, 255, 255);
    border-radius: 1.5rem;
    padding: 1.0rem 1.5rem !important;
}

    .button-top-cart:hover {
        background: rgb(91, 79, 177);
    }













#user-agreement {
    max-height: 250px;
    overflow: auto;
    position: relative;
    margin: 0.4rem;
    background: #212529;
    padding: 1rem;
}



.user-agreement-modal-b1 {
    padding: 2rem;
    background: #181a1b;
    max-width: 800px;
}

.lib-localization-product-body {
    background: #212529;
    padding: 1.5rem;
    border-radius: 1rem;
}

.lib-max-1 {
    max-width: 300px;
}

.lib-maxb-1 {
    height: 420px;
    min-width: 200px;
}























.center {
    width: 50px;
    height: 50px;
    z-index: 555
}

.icon-block {
    width: 50px;
    height: 50px;
    background-image: url("icon1.png");
    background-size: cover;
    opacity: 0;
    position: absolute;
}





.container-gg {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #16181a;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0
}

.icon-block {
    width: 50px;
    height: 50px;
    background-image: url("/images/icons/04.png");
    background-size: cover;
    opacity: 0
}

#block1 {
    animation: block1 2s ease-in-out;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}

#block2 {
    animation: block2 2s ease-in-out;
}

#block3 {
    animation: block3 2s ease-in-out;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

#block4 {
    animation: block4 2s ease-in-out;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}





#block5 {
    animation: block4 2s ease-in-out;
    animation-duration: 7s;
    animation-iteration-count: infinite;
}


#block6 {
    animation: block1 2s ease-in-out;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}



#block7 {
    animation: block3 2s ease-in-out;
}

#block8 {
    animation: block5 2s ease-in-out;
}


@keyframes block1 {
    0% {
        transform: translateX(-100px);
        transform: scale(0.7);
        /* Multiple animations */
        animation-delay: 1.1s, 480ms;
    }

    4% {
    }

    25% {
        background-image: url("/images/icons/01.png");
    }

    35% {
        background-image: url("/images/icons/02.png");
        transform: translateX(100px);
    }

    50% {
        background-image: url("/images/icons/03.png");
        opacity: 1;
        transform: scale(1.4);
    }

    71% {
        transform: translateX(0);
    }
}

@keyframes block2 {
    0% {
        transform: scale(0.4);
        transform: translateX(100px);
    }

    8% {
    }

    9% {
        background-image: url("/images/icons/01.png");
        /* Multiple animations */
        animation-delay: 4.1s, 480ms;
    }

    43% {
        background-image: url("/images/icons/02.png");
        transform: scale(1.2);
        transform: translateX(-200px);
    }

    78% {
        background-image: url("/images/icons/03.png");
        opacity: 1
    }

    89% {
        transform: translateX(0);
    }
}

@keyframes block3 {
    0% {
        transform: scale(0.2);
    }

    8% {
        transform: translateX(-50px);
    }

    25% {
        background-image: url("/images/icons/01.png");
    }

    43% {
        background-image: url("/images/icons/02.png");
        transform: scale(0.5);
        transform: translateX(100px);
    }

    88% {
        background-image: url("/images/icons/03.png");
        opacity: 1
    }

    49% {
        transform: translateX(0);
    }
}



@keyframes block4 {
    0% {
        /* Multiple animations */
        animation-delay: 2.1s, 480ms;
    }

    8% {
    }

    9% {
        background-image: url("/images/icons/03.png");
        transform: scale(0.7);
        transform: translateX(-80px);
    }

    33% {
        background-image: url("/images/icons/02.png");
    }

    68% {
        background-image: url("/images/icons/01.png");
        transform: scale(1.1);
        opacity: 1;
        transform: translateX(100px);
    }

    89% {
        transform: translateX(0);
    }
}

@keyframes block10 {
    0% {
    }

    40% {
    }

    41% {
        background-image: url("/images/icons/02.png");
    }

    45% {
        background-image: url("/images/icons/03.png");
        opacity: 1;
        transform: translateX(-100px);
    }

    80% {
        background-image: url("/images/icons/01.png");
    }

    81% {
        transform: translateY(0);
    }
}









.imgTagPreviewX {
    z-index: 1111;
    display: block;
    position: absolute;
    opacity: 0;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}







.btn-adv-1 {
    z-index: 11;
    position: absolute;
    margin: 1rem;
    margin-left: 3rem;
    bottom: 1rem;
}



.main-overlay-adv {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    z-index: 1;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(180deg, #0000 -20%, #202020 100%);
}








.btn-accordion-main-lib {
    padding: 0.75rem 1rem;
    margin-top: 0.1rem;
    border-radius: 0.2rem;
    border: 0px;
    color: #c2c2c2;
    background-color: rgb(23, 27, 30);
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.125);
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

    .btn-accordion-main-lib:hover {
        background-color: #2f3337;
    }

.lib-tab-count-item {
    min-width: 35px;
    display: inline-block;
    position: relative;
}



.btn-lib-category-product {
    font-style: normal;
}

    .btn-lib-category-product:disabled {
        color: #4f4f4f !important;
        background: rgb(32, 32, 32) !important;
    }























#languageList {
    max-height: 175px;
    overflow: hidden;
}

.languageListOpen {
    max-height: 100% !important;
    height: auto !important
}

.btn-lib-expand {
    background: none;
    border: 0px;
    text-align: center;
    width: 100%;
}

    .btn-lib-expand:hover {
        background: none;
        color: #7b858e !important;
    }













.lib-textarea-resize {
    resize: none
}




.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

        .dropdown-content a:hover {
            background-color: #ddd;
        }

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}

.vignette, .vignette .inner {
    position: relative;
    overflow: hidden;
}

    .vignette img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .vignette::before,
    .vignette::after,
    .vignette .inner::before,
    .vignette .inner::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
    }

    .vignette::before {
        background: radial-gradient(circle at top left, transparent, transparent, rgba(0, 0, 0, 0.3) 100%);
        );
    }

    .vignette::after {
        background: radial-gradient(circle at bottom left, transparent, transparent, rgba(0, 0, 0, 0.3) 100%);
        );
    }

    .vignette .inner::before {
        background: radial-gradient(circle at top right, transparent, transparent, rgba(0, 0, 0, 0.3) 100%);
        );
    }

    .vignette .inner::after {
        background: radial-gradient(circle at bottom right, transparent, transparent, rgba(0, 0, 0, 0.3) 100%);
        );
    }

.carousel-indicators-lib {
    position: relative;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    display: flex;
    justify-content: center;
    padding: 0;
    margin-right: 0%;
    margin-bottom: 0rem;
    margin-left: 0rem;
    list-style: none;
    overflow-y: scroll;
    z-index: 2;
}

    .carousel-indicators-lib [data-bs-target] {
        padding: 0rem;
        margin: 0rem;
        left: 0;
        box-sizing: inherit;
        width: 260px;
        height: auto;
        border: 0px;
    }

.c-indicators-lib {
    border: 0rem;
    border-radius: 0rem;
    box-shadow: none;
    padding: 0rem;
    margin: 0rem;
    border: 0px solid transparent;
    height: 180px
}

.c-indicators {
    object-fit: cover;
    object-position: center;
    border: 2px solid #1b1f22;
    border: 0px solid transparent;
    height: 100px;
}

.carousel-indicators-lib .active > img {
    opacity: 1;
    box-shadow: none;
    border: #622fbe 3px solid;
}

.bq-danger-type-1 {
    background: #1b1b1b !important;
    color: #b75639;
}

.carousel-control-next:hover {
    background: black;
    transition: opacity .15s ease-in-out;
}

.carousel-control-prev:hover {
    background: black;
    transition: opacity .15s ease-in-out;
}

.carousel-control-prev, .carousel-control-next {
    transition: .25s ease-in-out;
    top: 0;
    position: absolute;
    bottom: 0;
}


.release-announcement-block {
    padding: 5px 10px;
    background: #a02828;
    border-radius: 0.5rem;
    font-weight: 600;
}


.release-preorder-block {
    padding: 5px 5px;
    border-radius: 0.5rem;
    font-weight: 600;
    text-align: center;
    display: flex;
    align-items: end;
    align-self: end;
}

.lib-release-preorder-block {
    background: #000 !important;
    font-weight: 600;
}

.lib-release-announcement {
    text-align: center;
    text-transform: uppercase;
    font-size: 11pt;
    border-radius: 0.5rem;
    font-weight: 600;
    padding: 1rem;
    color: #e37d33;
}

.lib-carousel-max {
    flex-direction: row-reverse;
    z-index: 0;
}

.lib-carousel-max-glow {
    border-right: 1px solid #7767f85c;
    box-shadow: 55px 5px 100px -50px rgb(59, 54, 141);
}


.lib-carousel-max-list-scr {
    max-height: 1000px;
}


.font-weight-600 {
    font-weight: 600;
}


.overflow-y {
    overflow-y: auto;
}


.screenshot-form-xc {
    background: #0b0f12;
    padding: 1rem;
    margin: 0.4rem;
    border-radius: 1rem;
    min-width: 207px;
}



.main-title-dragmoveset {
    font-size: 11pt;
    z-index: 111;
    position: absolute;
    margin-top: -54px;
    background: #0000001c;
    padding: 1rem;
    width: 100%;
    text-align: center;
    color: #fff;
    top: -10px;
}

.lib-list-group-menu {
    min-height: 96px;
}

a.note-dropdown-item, a.note-dropdown-item:hover {
    margin: 5px 0;
    color: #afafaf;
    text-decoration: none;
}

note-modal-content {
    position: relative;
    width: auto;
    margin: 30px 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: #121212;
    background-clip: border-box;
    background-clip: border-box;
    outline: 0;
    border-radius: 5px;
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
    color: #e5e5e5
}

.note-form-label {
    display: block;
    width: 100%;
    font-size: 16px;
    color: #9a9a9a;
    margin-bottom: 10px;
    font-weight: 700;
}

.note-modal-title {
    font-size: 20px;
    color: #9a9a9a;
    margin: 0;
    line-height: 1.4;
}

.note-modal-header {
    padding: 10px 20px;
    border: 0px solid #00f;
}

.note-btn {
    padding: 0.7rem;
}

.note-dropdown-menu > :last-child {
    margin-right: 0;
    color: aliceblue;
}

.note-input {
    color: #9c9c9c
}







.about-site-img1 {
    background: url('/custom-img/about1.jpg?v=WFlgko7AM_2j5dhx5pEYHmuDgvc');
    background-position-x: 0%;
    background-position-y: 0%;
    background-size: auto;
    height: 300px;
    width: 400px;
    background-position: center;
    background-size: cover;
}


.about-site-img2 {
    background: url('/custom-img/about2.jpg?v=tcORwxQ0p1nalLJ9mxEj3JWLBT8');
    background-position-x: 0%;
    background-position-y: 0%;
    background-size: auto;
    height: 300px;
    width: 400px;
    background-position: center;
    background-size: cover;
}

.about-site-img3 {
    background: url('/custom-img/about3.jpg?v=SvSr3kQ0RVeVcLRGBgs6fVr7sO4');
    background-position-x: 0%;
    background-position-y: 0%;
    background-size: auto;
    height: 380px;
    width: 400px;
    background-position: center;
    background-size: cover;
    background-size: 220%;
}

.border-radius-bg-left {
    border-radius: 12rem 1rem;
}

.border-radius-bg-right {
    border-radius: 1rem 12rem;
}


.border-radius-01 {
    border-radius: 0.2rem !important
}


.fx-glow-accordion {
    box-shadow: 0px 8px 130px -50px rgba(164, 32, 32, 0.38);
}


.fx-btn-g1 {
    box-shadow: 0px 0px 50px -10px rgba(77, 23, 96, 0.00);
}

    .fx-btn-g1:hover {
        box-shadow: 0px 0px 50px -10px rgba(145, 147, 147, 0.93)
    }

.fx-btn-g2 {
    box-shadow: 0px 0px 50px 10px rgb(27, 37, 40, 0);
}

    .fx-btn-g2:hover {
        box-shadow: 0px 0px 50px 10px rgb(27, 37, 40);
    }



.fx-btn-g3 {
    box-shadow: -100px 0px 100px -20px rgba(101, 104, 133, 0.23);
}

    .fx-btn-g3:hover {
        box-shadow: -100px 0px 80px -20px rgba(207, 212, 255, 0.53);
    }



.nav-pills .fx-btn-g3.active, .nav-pills .show > .nav-link {
    box-shadow: -100px 0px 80px -20px rgb(73, 127, 127);
    border-left: 2px solid #5f8e87;
}

.fx-blur {
    -webkit-filter: blur(3px);
    -moz-filter: blur(3px);
    -ms-filter: blur(3px);
    -o-filter: blur(3px);
    filter: url("data:image/svg+xml;utf8,<svg height='0' xmlns='http://www.w3.org/2000/svg'><filter id='svgBlur' x='-5%' y='-5%' width='110%' height='110%'><feGaussianBlur in='SourceGraphic' stdDeviation='5'/></filter></svg>#svgBlur");
    filter: progid: DXImageTransform.Microsoft.Blur(PixelRadius = '3');
    filter: blur(3px);
}


.lib-item-title-panel-2 {
    padding-right: 7px;
    width: 100%;
    word-wrap: break-word;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    position: absolute;
}

.mgb-1 {
    margin: 0px 5.3rem -0.2rem 1.2rem;
    word-wrap: break-word;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.mgb-2v {
    word-wrap: break-word;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.mgb-text-wrap {
    word-wrap: break-word;
    overflow: hidden;
    white-space: normal;
    text-overflow: ellipsis;
}















.glass-lib-menu {
    /*background: url('/test_css_blur.jpg');*/
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    filter: blur(20px);
    z-index: -11;
    opacity: 0.2;
}

.glass {
    position: relative;
    background: rgb(11, 12, 13);
    box-shadow: 0 4px 150px rgba(129, 153, 170, 0.22);
    left: 0;
    bottom: 0;
    top: 0;
    right: 0;
}

    .glass::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: inherit;
        filter: blur(10px);
        z-index: -1;
    }

    .glass::after, .glass::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        color: transparent;
        z-index: -1;
        transform: translateY(-5px) translateZ(5px);
    }

    .glass::before {
        color: rgba(255, 0, 0, 0.5);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        transform: translateY(5px) translateZ(-5px);
        mix-blend-mode: screen;
    }

    .glass::after {
        color: rgba(0, 255, 255, 0.5);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        mix-blend-mode: screen;
    }



.cart-summary-choose-card {
    background: #262b2e;
    border: 1px solid #2b2c2d;
    height: 150px;
    width: 250px;
}



.cart-summary-choose-card-item {
    background: url(/images/cards/payment_sys_logos_card.webp?v=muLNC3jlRFxtOFL4YVuVL7V7Mk8);
    height: 100%;
    width: 100%;
    z-index: 1111;
    background-size: 85%;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}




.lib-nav-btn-creator > i {
    font-size: 20pt;
}



.modal-del {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    overflow: auto;
    z-index: 9999;
}

.modal-del-content {
    background-color: #ebebeb;
    margin: 15% auto;
    padding: 2rem;
    max-width: 500px;
    color: #444343;
    border-radius: 1rem;
}

.modal-del-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}


.modal-default-content {
    background-color: #16191c;
    margin: 15% auto;
    max-width: 500px;
    color: #fff;
    border-radius: 1rem;
}


.modal-finance {
    background-color: #16191c;
    margin: 15% auto;
    color: #fff;
    border-radius: 1rem;
}

.modal-default-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}



.hidden {
    display: none;
}


.ba-3 {
    height: 156px;
    display: grid;
}

.p-1d6 {
    padding: 1.1rem 1rem !important;
    height: 156px;
    width: 270px;
    align-content: center;
    align-self: center;
    display: grid;
}


    .p-1d6.active {
        background: #7e7e7e26 !important;
    }




.lib-pagination {
    background: #6c757d;
    color: #fff;
    border: 0px;
}

    .lib-pagination:hover {
        background: #6c757d;
        color: #cecece;
        border: 0px;
    }




.lib-pagination-active.active .page-link {
    background: #8f989f;
}




.video-bin {
    position: absolute;
    z-index: 0;
    bottom: 0px;
    left: 0px;
    right: 0px;
    top: 0;
    height: 800px;
}

.width-80px {
    width: 80px !important;
    min-width: 80px !important;
}

.width-100px {
    width: 100px !important;
    min-width: 100px !important;
}



.width-140px {
    width: 140px !important;
    min-width: 140px !important;
}


.width-160px {
    width: 160px !important;
    min-width: 160px !important;
}


.width-200px {
    width: 200px !important;
    min-width: 200px !important;
}

.width-260px {
    min-width: 260px !important;
}



.width-m860px {
    max-width: 860px !important;
}


.lib-item-file {
    border-radius: 0.6rem !important;
    border-color: #0000;
    background-color: #f9f9f9;
    overflow: hidden;
    background: #212529;
    color: #fff;
    border: 2px solid #ffffff05 !important;
    border-style: dashed !important;
    background: #16191a
}

.lib-item-filet:hover {
    background: #1f2425 !important;
    border: 2px solid #ffffff2e !important;
}

.lib-item-file.active {
    z-index: 1;
    color: #fff;
    background-color: #5b1d1d;
    border-color: #0000;
}

.lib-item-file.disabled, .lib-item-file:disabled {
    z-index: 1;
    color: #535353;
    background-color: #1b1c1b;
    border-color: #0d6efd;
    pointer-events: none;
}





.progress-bar-cux {
    margin: 0.4rem;
    margin-top: 0.4rem;
    border-radius: 1rem;
    height: 26px;
}


.btn-holder-me {
    color: #fff;
    cursor: pointer;
    font-size: 16px;
    border: 0px solid #5a565657;
    transition: background 0.3s, color 0.5s, border 0.3s ease-out;
    background: #0e0c12;
    margin: 0.1rem;
}

/* делаем инпут "невидимым", но кликабельным поверх зоны */
.su-hidden-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* чтобы оверлеи не блокировали клик/перетаскивание */
.x-upload-img-overlay {
    pointer-events: none;
}

/* красивое подсветка dnd по желанию */
.su-dragover {
    outline: 2px dashed #6ea8fe;
    outline-offset: 2px;
}

.btn-holder-me-active {
    color: #791a1a !important;
    background: #d73535 !important;
    border: 25px solid #e12727 !important;
    transition: background 3.0s, color 2.2s, border 2.45s ease-out;
}



.cart-delete-item {
    background-image: linear-gradient(950deg, #922d2db5 -0%, #f9384a 199%) !important;
    background: none;
}


.library-nav-price-2 {
    font-size: 15pt;
    font-weight: 500;
    line-height: normal;
    min-width: 160px;
}


.discount-main-price-3 {
    background: #e83232;
    padding: 3px 10px 3px 5px;
    position: absolute;
    margin-top: -28px;
    margin-right: 5px;
    border-radius: 0.5rem;
    font-weight: 600;
    top: 0rem;
    right: 0;
    text-align: center;
    font-size: 13pt;
}


.lib-modal-news-product-card {
    width: 100%;
    background: #2f33372b;
    border: 2px solid #05040766;
}




#loadingScreenFilter {
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    color: #fff;
    font-size: 2em;
    display: flex;
    text-transform: uppercase;
    font-size: 16pt;
    padding: 10rem 1rem;
}


/* блокировка формы во время AJAX */
.wen-form-lock {
    pointer-events: none;
    opacity: .55;
}

#endContentLoading {
    width: 100%;
    height: 1px; /* минимум для обзора */
    margin: 0;
    padding: 0;
    opacity: 0; /* полностью прозрачен */
    pointer-events: none;
    /* если карточки в CSS-grid и нужно убрать «дырку»: */
    grid-column: 1 / -1; /* занимает всю строку, но толщиной 1 px */
}






.loader-a {
    margin: auto;
    border: 5px solid #EAF0F6;
    border-top-width: 5px;
    border-top-style: solid;
    border-top-color: rgb(234, 240, 246);
    border-radius: 100%;
    border-top: 20px solid #FFF;
    width: 100px;
    height: 100px;
    animation: spinner-a 1.2s linear infinite;
}



@keyframes spinner-a {

    0% {
        transform: rotate(0deg);
        border: 5px solid #EAF0F6;
        border-top: 20px solid #FFF;
        border-radius: 100%;
        width: 100px;
        height: 100px;
        transform: rotate(0);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    50% {
        transform: rotate(360deg);
        border: 10px solid #F00;
        border-top: 14px solid #F00;
        border-radius: 30%;
        width: 60px;
        height: 80px;
        transform: rotate(900deg);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    100% {
        transform: rotate(0deg);
        border: 5px solid #EAF0F6;
        border-top: 20px solid #FFF;
        border-radius: 100%;
        width: 100px;
        height: 100px;
        transform: rotate(1800deg);
    }
}















.bq-gray-1 {
    background: #15181b
}

.color-green {
    color: #80c26e;
}





.context {
    width: 100%;
    position: absolute;
    top: 15rem;
}

    .context h1 {
        text-align: center;
        color: #fff;
        font-size: 50px;
    }


.area {
    background: #141719;
    background: -webkit-linear-gradient(to left, #8f94fb, #4e54c8);
    width: 100%;
    height: 100vh;
}

.circles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1
}

    .circles li {
        position: absolute;
        display: block;
        list-style: none;
        width: 20px;
        height: 20px;
        background: rgba(255, 255, 255, 0.2);
        animation: animate 10s linear infinite;
        bottom: -150px;
        border-radius: 0.5rem !important;
    }

        .circles li:nth-child(1) {
            left: 25%;
            width: 80px;
            height: 80px;
            animation-delay: 0s;
        }


        .circles li:nth-child(2) {
            left: 10%;
            width: 20px;
            height: 20px;
            animation-delay: 2s;
            animation-duration: 12s;
            background: rgba(255, 255, 255, 0.3);
        }

        .circles li:nth-child(3) {
            left: 70%;
            width: 20px;
            height: 20px;
            animation-delay: 4s;
        }

        .circles li:nth-child(4) {
            left: 40%;
            width: 60px;
            height: 60px;
            animation-delay: 0s;
            animation-duration: 5s;
            background: rgba(255, 255, 255, 0.4);
        }

        .circles li:nth-child(5) {
            left: 65%;
            width: 20px;
            height: 20px;
            animation-delay: 0s;
        }

        .circles li:nth-child(6) {
            left: 75%;
            width: 110px;
            height: 110px;
            animation-delay: 3s;
        }

        .circles li:nth-child(7) {
            left: 35%;
            width: 150px;
            height: 150px;
            animation-delay: 7s;
        }

        .circles li:nth-child(8) {
            left: 50%;
            width: 25px;
            height: 25px;
            animation-delay: 15s;
            animation-duration: 45s;
        }

        .circles li:nth-child(9) {
            left: 20%;
            width: 15px;
            height: 15px;
            animation-delay: 2s;
            animation-duration: 35s;
        }

        .circles li:nth-child(10) {
            left: 85%;
            width: 150px;
            height: 150px;
            animation-delay: 0s;
            animation-duration: 11s;
        }

.triangles li {
    position: absolute;
    list-style: none;
    animation: animate 10s linear infinite;
    animation-delay: 0s;
    bottom: -499px;
    border-radius: 10rem;
    background: url(/images/white-logo.svg?v=qlMSVa1MF8u7qLjcGfNSsSQbgm0);
    background-size: auto;
    background-size: cover;
}






.container-1600 {
    width: 75%;
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
}


.triangles li:nth-child(1) {
    left: 20%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
}


.triangles li:nth-child(2) {
    left: 5%;
    width: 20px;
    height: 20px;
    animation-delay: 2s;
    animation-duration: 12s;
}

.triangles li:nth-child(3) {
    left: 67%;
    width: 20px;
    height: 20px;
    animation-delay: 4s;
}

.triangles li:nth-child(4) {
    left: 38%;
    width: 60px;
    height: 60px;
    animation-delay: 0s;
    animation-duration: 5s;
}

.triangles li:nth-child(5) {
    left: 60%;
    width: 20px;
    height: 20px;
    animation-delay: 0s;
}

.triangles li:nth-child(6) {
    left: 67%;
    width: 110px;
    height: 110px;
    animation-delay: 3s;
}

.triangles li:nth-child(7) {
    left: 30%;
    width: 150px;
    height: 150px;
    animation-delay: 7s;
}

.triangles li:nth-child(8) {
    left: 44%;
    width: 25px;
    height: 25px;
    animation-delay: 15s;
    animation-duration: 45s;
}

.triangles li:nth-child(9) {
    left: 24%;
    width: 15px;
    height: 15px;
    animation-delay: 2s;
    animation-duration: 35s;
}

.triangles li:nth-child(10) {
    left: 76%;
    width: 150px;
    height: 150px;
    animation-delay: 0s;
    animation-duration: 11s;
}




@keyframes animate {
    0% {
        transform: translateY(0) rotate(0deg) scale(1);
        opacity: 1;
        border-radius: 0.5rem;
    }

    50% {
        transform: translateY(-500px) rotate(360deg) scale(0.5);
        opacity: 0.5;
        border-radius: 0;
    }

    100% {
        transform: translateY(-1000px) rotate(720deg) scale(0,9);
        opacity: 0;
        border-radius: 2rem;
    }
}



.item-vip-subscription {
    background: #121517;
    padding: 1rem;
    border-radius: 1.4rem;
    align-content: center;
    align-items: center;
    align-self: center;
    color: white;
}

    .item-vip-subscription:hover {
        background-color: #212629;
        color: white;
    }

.avatar-vip-subscription {
    border: 2px solid #ff4f46;
    box-shadow: 0px 0px 50px -10px rgba(255, 69, 60, 0.93);
    border-style: dotted;
}







.section-fill {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    grid-template-rows: repeat(1, 1fr);
    grid-auto-flow: dense;
    grid-gap: 0em;
}

.div-6-fill {
    object-fit: cover;
    object-position: center center;
    width: revert;
    align-items: center;
    justify-content: center;
    background: #090f0f;
    padding: 0.2rem;
    margin: 0.1rem;
    border-radius: 0rem;
    border-radius: 0.2rem;
    z-index: 1;
}

    .div-6-fill:before {
        align-items: center;
    }

.section-fill :first-of-type .div-6-fill:nth-child(2) {
    grid-row: auto /span 2;
    grid-column: auto / span 2;
}

.section-fill + .section-fill .div-6-fill:nth-child(3),
.section-fill + .section-fill .div-6-fill:nth-child(5) {
    grid-row: auto /span 2;
    grid-column: auto / span 2;
}




.my-item-div-6-fill {
    border: 0px !important;
    padding: 2.5rem 2.5rem 2.5rem 2.5rem;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
    min-height: 110px;
    overflow: hidden;
}




.color-dark1 {
    background: #131416 !important;
}

.color-orange {
    color: #f2752b;
}

.p-agreement {
    margin: 0px;
    color: #444;
}

.h-agreement {
    font-size: 24px;
    margin: 30px 0;
    display: block;
    line-height: 1.7;
    text-transform: uppercase;
}



.lib-categories-paneloverlay {
    background: #0909099e;
    padding: 1rem;
}


    .lib-categories-paneloverlay:hover {
        background: #3837375c;
        padding: 1rem;
    }


.color-gray-2 {
    color: #c1c1c1;
}



.lib-overlay-item {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.84); /* Черный фон с прозрачностью 0.7 */
    color: white; /* Белый текст */
    opacity: 1; /* Изначально видим */
    transition: opacity 0.3s; /* Плавный переход opacity */
    margin: 0;
}


.lib-overlay-item-plus {
    position: absolute;
    width: 100%;
    height: 100%;
    display: none;
    color: #fff;
}

.my-flex:hover .lib-overlay-item-plus {
    display: flex !important;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2rem;
    font-size: 15pt;
    align-content: center;
    background: linear-gradient(150deg, #171717de -0%, #202429d6 99%);
}

.my-flex {
    transition: opacity 0.3s; /* Плавный переход opacity */
    background-size: cover !important;
    background-position: center !important;
}

.my-overlay {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.84); /* Черный фон с прозрачностью 0.7 */
    color: white; /* Белый текст */
    opacity: 1; /* Изначально видим */
    transition: opacity 0.3s; /* Плавный переход opacity */
    margin: 0;
}

.my-flex:hover .my-overlay {
    opacity: 0.2; /* При наведении делаем overlay невидимым */
}



.my-overlay-card {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    color: white; /* Белый текст */
    opacity: 1; /* Изначально видим */

    margin: 0;
}



.bq-none {
    background: none !important
}




.category-container {
    min-width: 350px;
    width: 100%;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.my-flex {
    position: relative;
    transition: opacity 0.3s;
}

.my-overlay {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    opacity: 1;
    transition: opacity 0.3s;
    width: 90%; /* Устанавливаем ширину на 90%, чтобы оставить отступы по краям */
    text-align: center; /* Центрируем текст */
}

.category-container:hover .my-overlay {
    opacity: 0;
}



.wen-news-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    display: none;
    color: #fff;
    opacity: 0;
    z-index: 2
}

    .wen-news-overlay:hover {
        opacity: 1.0
    }

.my-plus {
    position: absolute;
    width: 100%;
    height: 100%;
    display: none;
    color: #fff;
}


.my-flex:hover .my-plus {
    display: flex !important;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2rem;
    font-size: 25pt;
    border: 3px dashed #fff;
}

.my-flex:hover .my-plus-lock {
    border: 3px dashed #aa3131;
    color: #ff3737;
}

.category-not-selected-set {
    width: 100%;
    pointer-events: none;
    border: 3px dashed #fff0;
    align-items: center;
    justify-items: center;
    justify-self: center;
    align-items: center;
    height: 210px;
    display: flex;
    justify-content: center;
}



.bank-card-item {
    width: 100%;
    background: url('/images/bank/bankcard_bq.webp?v=PcOyG5FxyAngbdGDtM7Us9CSlyQ');
    background-position: center;
    background-size: cover;
    align-items: center;
    justify-items: center;
    justify-self: center;
    align-items: center;
    height: 210px;
    display: flex;
    justify-content: center;
    padding: 2.0rem
}



.adv-not-selected-set {
    width: 100%;
    pointer-events: none;
    border: 3px dashed #fff0;
    align-items: center;
    justify-items: center;
    justify-self: center;
    align-items: center;
    height: 500px;
    display: flex;
    justify-content: center;
}







.category-selected-set {
    width: 100%;
    pointer-events: none;
    height: 100%;
    border: 3px dashed #3f6553;
    border-radius: 1rem;
    background: #152117e3;
    justify-items: center;
    justify-self: center;
    align-items: center;
    height: 210px;
    display: flex;
    justify-content: center;
}



.category-disabled-set {
    width: 100%;
    pointer-events: none;
    height: 100%;
    border-radius: 1rem;
    background: #0000006e;
    border: 3px dashed #fff0;
    justify-items: center;
    justify-self: center;
    align-items: center;
    height: 210px;
    display: flex;
    justify-content: center;
}

.category-disabled-text {
    color: #8c8c8c;
}


.category-selected-checked {
    position: absolute;
    top: 0;
    font-size: 25pt;
    display: block;
    right: 0;
    padding: 0px 1rem;
}



.form-disabled-color-important {
    color: #adadad3d !important;
}


    .form-disabled-color-important:checked {
        color: #adadad3d !important;
        pointer-events: none;
    }


.font-26 {
    font-size: 26pt
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-auto-rows: auto;
    grid-gap: 10px; /* Отступ между элементами сетки */
    width: 100%
}

.grid-container-category-main {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-auto-rows: auto;
    grid-gap: 10px; /* Отступ между элементами сетки */
    width: 100%
}


.grid-container-categories-sets {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-auto-rows: auto;
    grid-gap: 10px; /* Отступ между элементами сетки */
    width: 100%
}


.grid-container-categories-sets2 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-auto-rows: auto;
    grid-gap: 10px; /* Отступ между элементами сетки */
    width: 100%
}

.grid-container-lib {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    grid-auto-rows: auto;
    grid-gap: 10px; /* Отступ между элементами сетки */
    width: 100%
}









.lib-list-products-item-type {
    font-size: 10pt;
    font-weight: initial;
    color: #9d9d9d !important;
    text-align: left;
    position: absolute !important;
    z-index: 5;
    left: 0;
    bottom: 0;
    padding: 0.3rem 0.8rem !important;
    padding-left: 0.8rem;
    background: #00000038;
    padding-left: 2rem !important;
    border-radius: 0px 1rem 0px 0px;
}

.lib-list-products-item-title {
    color: #e7e7e7;
}

.lib-list-products-item-cover {
    object-fit: cover;
    object-position: top center;
    position: absolute;
    left: 0;
    right: 0;
    pointer-events: none;
    z-index: 0;
    top: 0;
    width: 100%;
}


.lib-list-products-item-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    border-bottom: 1px solid #77777726;
    background-image: linear-gradient(-150deg, #21212161 -20%, #000 99%);
}



    .lib-list-products-item-overlay:hover {
        background-image: linear-gradient(180deg, #21212161 -10%, #505050 119%);
    }

.library-list-item-product-active {
    background-image: linear-gradient(80deg, #2c704d96 -20%, #0f110c73 99%) !important;
    background: #000000ab;
}


.log-money-input {
    min-height: 120px;
    padding-top: 5rem !important;
    font-weight: 600;
    margin-top: 1rem
}

.log-money-input-pt {
    padding-top: 1rem !important;
}


.log-panel-money-clear {
    color: #88c26e !important;
    background-color: #121111;
    padding: 1rem;
    width: 100%;
    border-radius: 0.5rem;
    background: linear-gradient(150deg, #2d3136 -0%, #131317 99%);
}

.log-panel-notice {
    color: #fff !important;
    background-color: #121111;
    padding: 1rem;
    width: 100%;
    border-radius: 0.5rem;
    background: linear-gradient(150deg, #a03737 -30%, #131317 99%);
}






.fx-circles-1 {
    background: rgba(255, 255, 255, 0.06);
}




.lib-file-item-title {
    font-size: 10pt;
    margin-bottom: 0.1rem;
    color: #797979;
}

.lib-file-item-line-1 {
    bottom: 0;
    left: 0;
    right: 0;
    background: #0204048a;
}

.lib-file-item-icon {
    align-content: center;
    align-items: center;
    padding: 1.0rem 0.5rem;
    text-align: center;
    justify-content: center;
    padding: 1rem 2rem;
    min-width: 152px;
}

.lib-file-item-titlename {
    align-content: center;
    align-items: center;
    padding: 1.2rem;
    text-align: center;
    justify-content: center;
    font-size: 11pt;
    font-weight: 600;
}


.lib-file-subitem {
    align-content: center;
    align-items: center;
    padding: 1.0rem 0.5rem;
    text-align: center;
    justify-content: center;
}


.lib-file-download-btn {
    background: #522424;
    align-content: center;
    align-items: center;
    text-align: center;
    justify-content: center;
    color: #fff;
    font-weight: 600;
}

    .lib-file-download-btn:hover {
        background: #682b2b;
    }



.lib-file-item-box-shadow {
    width: 100%;
    position: absolute;
    height: 40px;
    box-shadow: 0px 15px 200px -10px rgb(134, 172, 174);
    top: -45px;
    min-width: 500px;
}



.lib-file-item-box-shadow-2 {
    box-shadow: 0px 15px 200px -20px rgb(134, 172, 174);
}


.lib-box-shadow-3 {
    box-shadow: 0px 15px 900px -20px rgb(134, 172, 174);
    position: absolute;
    height: 50px;
    min-width: 4000px;
    top: -50px;
}



.lib-file-subitem-div {
    background-image: linear-gradient(180deg, #0000 -20%, #22262a 99%);
    padding: 0px;
}



.lib-btm-0 {
    bottom: 0;
    left: 0;
    right: 0;
}


.lib-bt-0 {
    top: 0;
    bottom: 0;
    word-wrap: anywhere;
    position: relative;
}


.type-bankAccount-item {
    width: 100%;
    pointer-events: none;
    border: 3px dashed #fff0;
    align-items: center;
    justify-items: center;
    justify-self: center;
    align-items: center;
    height: 200px;
    display: flex;
    justify-content: center;
}


.type-project-item {
    width: 100%;
    pointer-events: none;
    border: 3px dashed #fff0;
    align-items: center;
    justify-items: center;
    justify-self: center;
    align-items: center;
    height: 300px;
    display: flex;
    justify-content: center;
}


.news-global-item {
    width: 100%;
    pointer-events: visible;
    border: 0px dashed #fff0;
    align-items: center;
    justify-content: center;
    padding: 1.0rem;
    position: absolute;
    height: 100%;
    background: -webkit-linear-gradient(-10deg, #0000004a 20%, #000000f5 99%);
    background: -moz-linear-gradient(-10deg, #0000004a 20%, #000000f5 99%);
    background: -o-linear-gradient(-10deg, #0000004a 20%, #000000f5 99%);
    background: linear-gradient(-10deg, #222121a6 20%, #141414f5 99%);
    -webkit-transition: background 1s ease-out;
    -moz-transition: background 1s ease-out;
    -o-transition: background 1s ease-out;
    transition: background 1s ease-out;
    z-index: 1;
    transition: background 0.2s ease-out;
}

    .news-global-item:hover {
        background: linear-gradient(-10deg, #4f4d4d99 20%, #000000f5 99%);
    }


.lib-product-mini-item {
    background-position: top center !important;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    object-fit: cover !important;
    object-position: center;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    min-height: 250px;
    width: auto;
    min-height: 190px;
}

.grid-container-adv {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(465px, 1fr));
    grid-auto-rows: auto;
    grid-gap: 10px;
    width: 100%;
}


.type-adv-item {
    width: 100%;
    pointer-events: none;
    border: 3px dashed #fff0;
    align-items: center;
    justify-items: center;
    justify-self: center;
    align-items: center;
    height: 400px;
    display: flex;
    justify-content: center;
}




.grid-container-type-project {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(265px, 1fr));
    grid-auto-rows: auto;
    grid-gap: 10px;
    width: 100%;
}



.grid-container-statistics-1 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
    grid-auto-rows: auto;
    grid-gap: 10px;
    width: 100%;
}






.grid-container-bank-accounts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(395px, 1fr));
    grid-auto-rows: auto;
    grid-gap: 10px;
    width: 100%;
}



.grid-container-news-global {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(800px, 1fr));
    grid-auto-rows: auto;
    grid-gap: 10px;
    width: 100%;
    min-height: 200px;
}

.max-height-500 {
    height: 500px !important;
}


.product-adv {
    background-size: cover !important;
    background-position: center !important;
    background: linear-gradient(150deg, #272a2d4f -0%, #8996a39e 99%);
}

.product-type-project-x {
    background-size: cover !important;
    background-position: center !important;
    background: linear-gradient(150deg, #272a2d -0%, #8996a3 99%);
    border-radius: 0.4rem;
    overflow: hidden;
}

.lib-startpage-item {
    background-size: cover !important;
    background-position: center !important;
    background: linear-gradient(150deg, #272a2d -0%, #8996a3 99%);
}


.global-news-x {
    background-size: cover !important;
    background-position: center !important;
    object-position: center;
    object-fit: cover;
    background: linear-gradient(150deg, #272a2d00 20%, #8996a3e3 99%);
    max-width: 1055px;
    z-index: 0;
}

.product-type-category-x {
    background-size: cover !important;
    background-position: center !important;
    background: linear-gradient(150deg, #171717de -0%, #202429d6 99%);
    border: 0px;
}

.product-type-rules-x {
    background-size: cover !important;
    background-position: center !important;
    background: linear-gradient(150deg, #171717de -0%, #202429d6 99%);
    border: 0px;
}




.lib-product-item-set {
    width: 100%;
    pointer-events: none;
    border-radius: 1rem;
    background: #152117e3;
    align-items: end;
    height: 210px;
    display: flex;
    justify-content: center;
    background-size: cover !important;
    background-position: center !important;
    background: linear-gradient(180deg, #17171700 -0%, #202429e0 89%);
    background: linear-gradient(180deg, #fff0 -0%, #00000038 89%);
}


.lib-product-overlay-link {
    color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
}

.lib-product-overlay-sublink {
    color: #fff;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    background: #100d0d;
    padding: 0.6rem 0.9rem;
    border-radius: 0.3rem;
    display: flex;
    justify-content: start;
    justify-items: center;
    align-items: center;
}


.text-red {
    color: #f64444 !important;
}

.lib-product-item-mini {
    padding: 0.5rem;
    background: #090908;
    background: #1212128c;
    overflow: hidden;
    border-radius: 1rem;
    min-height: 390px;
    height: 100%
}

.lib-product-overlay-sublink:hover {
    color: #fff;
    background: #282323;
}


.lib-product-footer-sublink {
    padding: 1rem !important;
    padding-top: 1rem;
    margin: 0rem !important;
    margin-top: 0rem;
    border-radius: 0rem 0rem 1rem 1rem;
    padding-top: 1rem !important;
    min-height: 160px;
}

.lib-product-header-img {
    background-size: cover !important;
    background-position: center !important;
    box-shadow: 0px 21px 130px -50px rgba(244, 54, 54, 0.82);
}

.grid-container-stats-products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 100px));
    grid-auto-rows: auto;
    grid-gap: 0px;
    width: 100%;
    height: 100px;
}

.rules-not-selected-set {
    width: 100%;
    pointer-events: none;
    border: 3px dashed #fff0;
    align-items: center;
    justify-items: center;
    justify-self: center;
    align-items: center;
    height: 350px;
    display: flex;
    justify-content: center;
    background: #f6f6f6 !important;
    color: #414141;
    padding: 3rem;
}


.policy-item-set {
    width: 100%;
    pointer-events: none;
    border: 3px dashed #fff0;
    align-items: center;
    justify-items: center;
    justify-self: center;
    align-items: center;
    display: flex;
    justify-content: center;
    background: #f6f6f6 !important;
    color: #414141;
    padding: 3rem;
}

.color-gray-rules {
    color: #606060;
}

.grid-rules-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
    grid-auto-rows: auto;
    grid-gap: 10px;
    width: 100%;
}

.stats-overlay-header {
    background: linear-gradient(0deg, #880000d6 -0%, #0a0a0a 99%);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
}




.lib-news-tag-title {
    padding: 5px 10px;
    background: #000;
    border-radius: 0.5rem;
    align-self: center;
    align-content: center;
    align-items: center;
    justify-content: center;
    display: flex;
}






.lib-news-img-cover {
    object-fit: cover;
    position: absolute;
    top: 0;
    width: 100%;
    background-size: cover !important;
    background-position: center !important;
    height: 100%;
    z-index: 0;
    pointer-events: none
}





.email-confirmed {
    background: #3b5b36;
    color: white;
}

.email-not-confirmed {
    color: #ff9814;
}

.deletion-requested {
    background: #3b5b36;
    color: white;
}

.deletion-not-requested {
    color: #ff9814;
}



.lib-upload-img-profile {
    border-radius: 10rem !important;
    overflow: hidden;
    box-shadow: 0px 0px 144px 0.1rem rgba(255, 255, 255, 0.23) !important;
    height: 100px;
    width: 100px;
    border: 2px solid #272727;
}


.custom-file-profile-upload {
    display: inline-block;
    padding: 1.0rem;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #3f3f3fd6;
}


.lib-user-account-item {
    border-radius: 1rem;
    position: relative;
    z-index: 0;
    margin: 1rem 0rem 1rem 0rem;
}

.tooltip-inner {
    max-width: 380px;
}


.wen-icon-tooltip {
    border-radius: 1rem;
    height: 25px;
    width: 25px;
    display: inline-block;
    align-content: center;
    text-align: center;
    color: #c8c8c8;
    font-weight: 800;
    font-size: 15pt;
}

.min-h80 {
    min-height: 80px;
}

.rules-license-item {
    background-color: #fff !important;
    border: 1px solid #efefef;
}

.nav-pills .rules-license-item.active, .nav-pills .show > .rules-license-item {
    background-color: #f4f4f4 !important;
    border: 1px solid #dbdbdb;
}



.list-group-item-refund {
    padding: 1.5rem;
    margin: 0.2rem 0rem;
    border: 0 !important;
    border-top-width: 0px;
    border-radius: 2rem !important;
    background: white;
}

.list-group-item-startpage {
    padding: 1.2rem;
    margin: 0.2rem 0rem;
    border: 0 !important;
    border-top-width: 0px;
    border-radius: 2rem !important;
    background: white;
}

.panel-allBankAccount {
    display: none
}


.text-orange {
    color: #db751b !important;
}


.lib-product-price-info {
    min-width: 90px;
}


.text-green {
    color: #86d04a !important
}


.lib-title-muted {
    color: #96989f;
    font-weight: 400;
    margin-bottom: 0rem;
    padding-bottom: 0rem;
    line-height: 1;
    border: 0px !important;
}

.page-partners-about-img {
    position: relative;
    z-index: 1;
    background-position: center;
    height: 1000px;
    width: 100%;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
}

.list-group-horizontal > .list-group-item:last-child:not(:first-child) {
    border: 0px !important;
}

.page-partners-about-img-header {
    position: relative;
    z-index: 1;
    background-position: center;
    height: 250px;
    width: 700px;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    margin: 0 auto;
    background-position: center !important;
}

.page-partners-about-button {
    padding: 1.5rem 2rem;
    min-width: 200px
}



.bank-account-nametag {
    background: #639a2f;
    padding: 0.5rem 1rem;
    border-radius: 0.3rem;
    color: #000;
    margin: 6px 6px 0px 0px !important;
    font-size: 12pt;
    width: 420px;
    font-weight: 600;
}



.input-color-container {
    position: relative;
    overflow: hidden;
    width: 40px;
    height: 40px;
    border-radius: 40px;
}


input[type="color"] {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background: none;
    border: 0;
    cursor: pointer;
    height: 55px;
    padding: 0;
    width: 55px;
}

.input-color {
    position: absolute;
    right: -8px;
    top: -8px;
    width: 56px;
    height: 56px;
    border: none;
    transform: scale(1.7);
}





::-webkit-color-swatch-wrapper {
    padding: 0;
}

::-webkit-color-swatch {
    border: 0;
    border-radius: 0;
}

::-moz-color-swatch,
::-moz-focus-inner {
    border: 0;
}

::-moz-focus-inner {
    padding: 0;
}



.filter-body {
    padding: 0;
    background: linear-gradient(150deg, #09090c -0%, #09090c 100%);
    z-index: 0;
    position: relative;
    border-radius: 1rem;
    min-height: 700px;
    overflow-x: clip;
}

/* Hidden H1 for SEO on home page (accessible to screen readers & crawlers) */
.wnx-home-h1 {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* Main content wrapper */
.wenrexa-main-content-wrap {
    padding: 1rem;
}




.push-menu-lib {
    min-width: 420px;
    overflow: auto;
}


.dropdown-menu {
    transform: translate(-50px, 36px) !important;
    inset: 0px !important;
}



.nav-notifications-item {
    background: #fff;
    border-radius: 0.6rem;
    color: #1c0707;
    border: 1px solid #d7d7d7;
    padding: 1.0rem 0.8rem !important;
}

.nav-drobdown-menu.show {
    border-radius: 0.7rem;
    position: absolute;
    right: 0px !important;
    inset: 0px !important;
}


.color-none {
    background: none !important;
}


.nav-profile-lib {
    padding: 1rem;
    display: flex;
    justify-content: center;
    background: #f3f3f3f2;
    border-radius: 1rem;
    border: 2px solid #353535;
    right: 0px;
    position: absolute;
    top: 20px;
    max-height: 90vh;
}

.color-none {
    background-color: none
}




.lib-item-empty {
    background: #000000f2;
    color: #a5a5a5 !important;
    font-weight: 600;
    font-size: 13pt;
    padding: 0px;
    margin: 0px;
}

    .lib-item-empty:hover {
        background: #8b2227f2;
        color: #d2d2d2 !important;
        font-weight: 600;
        font-size: 13pt;
    }

.lib-card-icon {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    justify-content: center;
    align-content: center;
    align-items: center;
    display: flex;
    text-align: center;
    z-index: 1;
    pointer-events: none
}

.lib-bank-title {
    background: #232323;
    padding: 0.5rem 1rem;
    color: #fff;
    border-radius: 0.4rem;
}



.lib-mini-product-list {
    background: #d55d23;
    padding: 0.4rem;
    min-width: 50px;
    font-size: 20pt;
    text-align: center;
    display: flex;
    justify-content: center;
    border-radius: 0.5rem;
}


.bq-red {
    background: #c2273d;
}













.x-upload-img-form {
    position: relative;
    height: 470px;
    width: 300px;
    text-align: center;
    display: grid;
    justify-items: center;
    align-content: center;
}


.x-sqrt {
    height: 260px;
    width: 260px;
}

.x-rectangle {
    height: 260px;
    width: 350px;
}



.x-upload-img-overlay {
    position: absolute;
    text-align: center;
    padding: 2rem;
    font-size: 12pt;
    font-weight: 600;
    color: #fff;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
    background: #000000b2;
    transition: all .2s ease-in-out;
    border: 4px solid #000;
    border-radius: 0.9rem;
}





.x-label-12 {
    font-weight: 600;
    font-size: 12pt
}

.x-label-20 {
    font-weight: 600;
    font-size: 20pt;
    line-height: 0.8
}


.x-icon-img {
    align-items: center;
    vertical-align: middle;
    margin: 0.5rem;
}

.x-upload-img-overlay:hover {
    background: #0006;
    color: #fff;
    text-shadow: #000 1px 0px 10px;
    opacity: 0.3;
}


.dragover {
    border: 3px dashed #ccc;
}



.x-upload-modal-bottom {
    background: #181818;
    bottom: 0;
    text-align: center;
    justify-items: center;
    display: flex;
    border-radius: 1rem !important;
    margin: 1rem auto;
    border: 0px;
    width: 500px;
    align-items: center;
    text-align: center;
    justify-content: center;
}




    .x-upload-modal-bottom :hover {
        background: #222 !important
    }


.result {
    min-width: 100px;
    min-height: 150px;
    overflow: hidden;
}

.x-upload-modal-content {
    background: #1e1e1e;
    border-radius: 1rem;
    border: 1px solid #2a2a2a;
}

.x-upload-modal-btn {
    color: #a4a4a4;
    font-weight: 600;
}


    .x-upload-modal-btn:hover {
        color: #fff;
    }

.x-upload-text {
    padding: 10px;
    display: flex;
    pointer-events: none
}




.file-drag-area {
    width: 500px;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed #000;
    cursor: pointer;
    margin: 0 auto;
}

.result-box {
    margin: 20px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.box-2.img-result {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    cursor: pointer;
    overflow: hidden;
    background: #474747;
    padding: 1rem;
    border-radius: 1rem;
    z-index: 0;
}

.hide {
    display: none;
}

.cropped {
    object-fit: cover;
    object-position: center;
    background-position: center;
    background-size: cover;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
}




.lib-dev-edit-product {
    background: linear-gradient(50deg, #151718 -0%, #1b1f22 99%) !important;
    border-left: 0;
    border-right: 0;
    border-top: 1px solid #050505;
}







.color-gray-3 {
    color: #707070;
    font-weight: 400;
}



.ban-image {
    width: 294px;
    height: 367px
}

.btn-preview-product {
    background-color: #ae3232bf !important;
}

    .btn-preview-product:hover {
        background-color: #6f2828bf !important;
    }






@keyframes growProgressBar {
    0%, 33% {
        --pgPercentage: 0;
    }

    100% {
        --pgPercentage: var(--value);
    }
}

@property --pgPercentage {
    syntax: '<number>';
    inherits: false;
    initial-value: 0;
}

div[role="progressbarCircle"] {
    --size: 12rem;
    --fg: green;
    --bg: lightgreen;
    --pgPercentage: var(--value);
    animation: growProgressBar 3s 1 forwards;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: radial-gradient(closest-side, white 80%, transparent 0 99.9%, white 0), conic-gradient(var(--fg) calc(var(--pgPercentage) * 1%), var(--bg) 0);
    font-family: Helvetica, Arial, sans-serif;
    font-size: calc(var(--size) / 5);
    color: var(--fg);
}

    div[role="progressbarCircle"]::before {
        counter-reset: percentage var(--value);
        content: counter(percentage) '%';
    }








.accordion-item {
    color: #c2c2c2;
}



.wen-nav-bardark {
    background: #0f0f0f6e;
    font-size: 11pt;
    font-weight: 600;
}

.wen-mega-menu {
    width: 100%;
    padding: 20px;
}





.wen-mega-menu-item {
    background: none !important;
    padding: 0.4rem 0.8rem;
    border-radius: 0.8rem;
    margin: 0px;
    box-sizing: border-box;
}


    .wen-mega-menu-item:hover {
        background: #efefef !important;
    }


.wen-search-menu {
    margin-right: -3.2rem !important;
    z-index: 1;
    pointer-events: none;
    position: absolute;
    align-items: center;
    height: 100%;
    margin: 0rem 0.6rem;
    color: #7a7a7a;
    border: 0px;
    font-size: 14pt;
    font-weight: lighter;
}




.dropdown-menu-megamenu {
    position: absolute;
    box-sizing: border-box;
    display: none;
    background: aquamarine;
    width: auto;
    padding: 24px;
    box-shadow: 0px 8px 8px 0px rgba(24,26,32,.08);
    background: none;
}





.wen-mega-menu .d-flex.flex-wrap > * {
    flex: 1;
}



.wen-mega-menu .d-flex.flex-wrap {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min-content, 1fr));
    grid-gap: 36px;
}





.nav-item.dropdown:hover .dropdown-menu-megamenu {
    position: absolute;
    background: none;
}




.wen-mega-item-title {
    padding: 0.1rem 0.5rem;
    color: #838383;
}

.wen-mega-menu-subbody {
    position: relative;
    box-shadow: 0px 8px 8px 0px rgba(24,26,32,.08);
    background: #fff;
    padding: 1.3rem;
    border-radius: 1rem;
    width: fit-content;
}


.dropdown-menu-megamenu {
    width: auto;
    min-width: 300px;
}



.bq-none-color, .bq-none-color:active, .bq-none-color:hover, .bq-none-color:visited, .bq-none-color:focus {
    background: none !important;
    color: inherit;
}

    .bq-none-color:hover {
        background: none !important;
    }

.color-gray-title {
    color: #555 !important
}



.max-width400 {
    max-width: 400px;
}

.min-heigt40 {
    min-height: 40px;
}



.wen-price-product {
    border: 0px !important;
    background: #b33737 !important;
    border-radius: 1.2rem !important;
    padding: 0.3rem 1.5rem !important;
    width: auto;
    display: inline-grid;
    min-width: 150px;
    max-width: 350px;
}



.wen-additional-art-info {
    position: relative;
    bottom: 0;
}

.modal-art {
    position: relative;
    overflow: hidden;
}


.wen-lib-mini-menu-item {
    display: flex;
    align-content: center;
    align-items: center;
    align-self: center;
    width: 100%;
    padding: 1rem;
    justify-content: center;
    justify-items: center;
    justify-self: center;
}


.img-thumbnail-art {
    border-radius: .25rem;
    width: 100%; /* Makes the image responsive */
    height: auto; /* Maintains aspect ratio */
    object-fit: cover; /* Ensures the image covers the area without stretching */
}

.wen-additional-info {
    position: absolute;
    bottom: 0;
    padding: 2rem 1rem;
    left: 5%;
    right: 5%;
}
/* если внутри label есть выбранный radio, то перекрашиваем .text-muted */
.w-tileset-btn:has(input[type="radio"]:checked) .text-muted {
    color: #fff !important;
}


.wen-search-placholder {
    padding: 0.8rem;
    border-radius: 1rem !important;
    color: #ebebeb !important;
}

    .wen-search-placholder::placeholder {
        color: rgb(87, 87, 87);
        opacity: 1; /* Firefox */
    }

.wen-modal-media {
    background-color: #110e0e91;
}


.card-img-art {
    position: relative;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 1rem;
    border-radius: calc(.25rem - 1px);
}




.wen-modal-img {
    max-width: 100%; /* максимальная ширина изображения - 100% ширины модального окна */
    max-height: 100%; /* максимальная высота изображения - 100% высоты модального окна */
    object-fit: contain; /* сохранение пропорций изображения */
    border-radius: 1rem !important;
    overflow: hidden;
}

.full-screen-img {
    width: 100vw; /* ширина изображения равна 100% ширины окна просмотра */
    height: 100vh; /* высота изображения равна 100% высоты окна просмотра */
    object-fit: contain; /* масштабирует изображение, сохраняя пропорции */
    position: fixed; /* фиксированное позиционирование */
    top: 50%; /* центрирование по вертикали */
    left: 50%; /* центрирование по горизонтали */
    transform: translate(-50%, -50%); /* выравнивание по центру */
    z-index: 1; /* установка высокого Z-индекса, чтобы изображение было поверх других элементов */
}



form.search-form {
    display: flex;
    align-items: center;
    width: 100%;
}



.wen-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
    padding: 1.7rem;
    border-radius: 5rem;
    position: relative;
}



.wen-brand-body {
    background: #6e2020;
    height: 115px;
    width: 100px;
    position: absolute;
    top: -1rem;
    z-index: 0;
    margin: 0 auto;
    text-align: center;
    left: 0;
    right: 0;
    border-radius: 0rem 0rem 5rem 5rem;
    border: 0.4rem solid #0f0f0f;
    border-top: 0px;
    background-image: linear-gradient(180deg, #0f0f0f 00%, #b72929fa 99%);
}




.wen-cover-info-product {
    background-image: linear-gradient(90deg, #131313f7 30%, #46454500 119%);
    position: absolute;
    top: 0%;
    left: 0%;
    right: 0%;
    bottom: 0%;
    height: 700px !important;
}


.wen-grid-info-product {
    position: absolute;
    width: auto;
    left: 5%;
    right: 5%;
    top: 15%;
    bottom: 15%;
    color: #fff;
    grid-template-columns: 1.8fr 1fr;
    gap: 20px;
    -moz-column-gap: 1.5rem;
    column-gap: 1.5rem;
    display: grid;
}

.wen-grid-info-product h1 {
    font-weight: 400;
}



.wen-media-object-item {
    color: #fff;
    height: 100%;
    display: flex;
    width: 100%;
    position: relative;
    box-sizing: content-box;
    border-radius: 2rem !important;
    overflow: hidden;
    min-height: 300px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}


    .wen-media-object-item:hover {
        background: #2d2d2d;
        cursor: pointer;
        box-shadow: 0px 0px 40px -20px rgb(255, 255, 255);
        transform: scale(1.01);
        transform: scale(1.01);
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
    }



.wen-carousel {
    background-image: linear-gradient(0deg, #181a1c 30%, #141414 89%);
}

.wen-overlay-price {
    border-radius: 0.5rem;
    background-image: linear-gradient(90deg, #0000 20%, #2424249c 99%)
}

.wen-price-sparkline-wrap {
    width: 100%;
    height: 50px;
    padding: 0 1rem;
    margin-bottom: 0.5rem;
    opacity: 0.85;
    transition: opacity 0.2s ease;
}

.wen-price-sparkline-wrap:hover {
    opacity: 1;
}

.wen-items-nav-product {
    background: none !important
}





.blur-background {
    position: absolute;
    background-position: center !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Применение размытия к фону за элементом */
    backdrop-filter: blur(0.5rem);
    filter: blur(0.5rem);
    -webkit-filter: blur(0.5rem);
    /* Для обеспечения совместимости с браузерами, которые не поддерживают backdrop-filter */
    -webkit-backdrop-filter: blur(0.5rem);
    /* Прозрачный фон, чтобы было видно размытый фон */
    background-color: rgba(255, 255, 255, 0.5);
    opacity: 0.2;
}

.blur-image {
    /* Применение размытия к изображению */

    filter: blur(3rem);
    /* Для обеспечения совместимости с браузерами, которые не поддерживают filter */
    -webkit-filter: blur(10px);
}

.wen-product-page-header-cover {
    position: relative;
    object-fit: fill;
    height: 100%;
    max-height: 1000px;
    min-height: 700px !important;
    background-size: cover;
    object-fit: cover;
    left: 0;
    object-position: center;
    width: 100%;
    object-position: 90% 50%;
}

#gameFrameContainer {
    border: 0px !important;
    border-radius: 0rem !important;
    overflow: hidden;
    height: 80vh;
}

.pointer-event-none {
    pointer-events: none
}

.wen-cover-container {
    height: 700px !important;
    width: 100%;
    object-fit: cover;
    object-position: center;
    margin: 0 auto;
    display: contents;
    position: relative;
    max-height: 1100px;
    min-height: 700px !important;
    box-shadow: 0px 0px 100px 20px rgba(0, 0, 0, 0.62);
    z-index: 1
}

.wen-list-files-item {
    background: #131416;
    padding: 1rem 1.2rem;
    display: flex;
    align-items: center;
    border-radius: 0.6rem;
    gap: .5rem !important;
    color: #96c65c;
    font-weight: 600;
    margin: 0.3rem 0rem;
}

.snow-flakes {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 9999;
    width: 100%;
}





@media (max-width: 1799px) {
    .wen-grid-info-product {
        grid-template-columns: 1fr;
        -moz-column-gap: 1.5rem;
        column-gap: 1.5rem;
        display: grid;
    }





    .wen-cover-info-product {
        max-height: 1100px !important;
        min-height: 880px !important;
    }

    .wen-cover-container {
        height: auto;
        max-height: 1100px;
        min-height: 880px !important;
    }

    .lib-additional-panel {
        max-width: 100%;
        min-width: 350px;
    }
}










@media (max-width: 1399px) {
    .wen-grid-info-product {
        grid-template-columns: 1fr;
        -moz-column-gap: 1.5rem;
        column-gap: 1.5rem;
        display: grid;
    }

    .dropdown-menu-megamenu {
        position: static;
        margin-bottom: 5rem;
    }

    .wen-mega-menu-item {
        color: #fff
    }

    .nav-item.dropdown:hover .dropdown-menu-megamenu {
        position: static;
        background: none;
    }


    .wen-mega-menu-subbody {
        background: none;
    }



    .section-687adv {
        grid-template-columns: repeat(2, 1fr);
    }
}

.wen-brand {
    margin-bottom: 0.5rem;
}

.wen-product-page-header-cover {
    object-position: 80% 50%;
}








@media (max-width: 999px) {
    .wen-product-page-header-cover {
        max-height: 1700px !important;
        min-height: 1180px !important;
    }

    .wen-cover-info-product {
        max-height: 1700px !important;
        min-height: 1180px !important;
    }

    .wen-cover-container {
        height: auto;
        max-height: 1800px;
        min-height: 1180px !important;
    }
}



@media (max-width: 699px) {
    .section-687adv {
        grid-template-columns: repeat(1, 1fr);
    }

        /* По умолчанию каждый блок div-5 занимает один столбец */
        .section-687adv > .div-6 {
            grid-column: span 1;
        }

            /* Пятый блок (первый блок второго ряда) будет занимать 2 столбца */
            .section-687adv > .div-6:nth-child(5) {
                grid-column: span 1;
            }
}




@media (max-width: 899px) {

    .wen-product-page-header-cover {
        max-height: 1700px !important;
        min-height: 1380px !important;
    }

    .wen-cover-info-product {
        max-height: 1700px !important;
        min-height: 1380px !important;
    }

    .wen-cover-container {
        height: auto;
        max-height: 1200px;
        min-height: 1100px !important;
    }
}




.max-width-1600 {
    max-width: 1600px
}

.max-width-400 {
    max-width: 400px
}

.max-width-500 {
    max-width: 500px
}

.lib-min-w35 {
    min-width: 35px
}


.disabled-btn {
    pointer-events: none !important;
    color: #626262 !important;
}



.wen-success-panel-product {
    background: #74212100 !important;
    border: 2px solid #aee21c;
    color: #b4ec1c !important;
    font-weight: 600;
    text-transform: uppercase;
}


.wen-warning-panel-product {
    background: #74212100 !important;
    border: 2px solid #f9553a;
    color: #f9553a !important;
    font-weight: 600;
    text-transform: uppercase;
}

.wen-line-success {
    background: linear-gradient(50deg, #293f21 -0%, #1b1f22 99%) !important;
}



.wen-line-danger {
    background: linear-gradient(50deg, #4b1a1a -0%, #1b1f22 99%) !important;
}

.log-panel-green {
    color: #fff !important;
    background-color: #121111;
    padding: 1rem;
    width: 100%;
    border-radius: 0.5rem;
    background: linear-gradient(150deg, #8fab2d -0%, #131317 99%);
    font-weight: 600 !important;
}




.wen-artwork-mini {
    position: absolute;
    top: 0;
    bottom: 0px;
    left: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(-90deg, #26262626 -200%, #0e0e0ee0 99%);
    padding: 2rem !important
}

.wen-artwork-link {
    position: relative;
}

.wen-artwork-mini-title {
    font-weight: 600;
    text-transform: uppercase;
    margin: 0px
}


.wen-artwork-mini-description {
    margin: 0px;
    font-size: 10pt;
    text-transform: initial;
    color: #848484;
    font-weight: 400;
}



.text-ellipsis {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}


.wen-product-steps {
    position: relative
}

.wen-product-steps-item {
    border-radius: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 55px;
    width: 55px;
}



.wen-product-steps-icon {
    align-self: center !important;
    font-size: 20pt;
}


.wen-products-item-title {
    font-size: 12pt;
    font-weight: 600;
    pointer-events: none
}



.rc-anchor-light {
    background: #84848400 !important;
    color: #fff !important;
    width: 150px;
    border: 0px !important;
}


.category-selected-sets-x {
    height: 130px;
}


.category-list {
    cursor: pointer;
    user-select: none;
}

.category-description-sets-x {
    display: none;
}

.category-item-sets-x:hover .category-description-sets-x {
    display: block;
}





.carousel-control-prev-main {
    height: 90px;
    position: relative;
    margin-top: -5.6rem;
    padding: 2rem;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
}



.carousel-control-next-main {
    height: 90px;
    position: relative;
    margin-top: -5.6rem;
    padding: 2rem;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 2;
}




.wen-waveform {
    padding: 2rem;
    background: #c6c6c6;
    margin: 1rem;
    border-radius: 1.5rem;
}





.slider-slc-mini {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.3s ease;
}









.slider-main-big {
    position: relative;
    z-index: 0
}

.time-stripe-content {
    position: absolute;
    left: 0;
    z-index: 9999;
    width: 100%;
    bottom: 3rem;
}

.slider-slc {
    margin: auto;
    position: relative;
    border-radius: 0rem 1.5rem 1.5rem 1.5rem;
    overflow: hidden;
}

    .slider-slc img {
        width: 100%;
        height: auto;
        object-position: 45% 20%;
        min-height: 600px;
        object-fit: cover;
        max-height: 740px;
    }

.slick-slide {
    transition: transform 0.3s, opacity 0.3s;
}

.slick-center {
    z-index: 2;
    opacity: 1.0;
}

.slick-slide:not(.slick-center) {
    border-radius: 1.5rem;
    opacity: 0.7;
}

.slider .slick-prev,
.slider .slick-next {
    position: absolute;
    height: 100%;
    bottom: 0;
    width: 3rem;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: white;
    font-size: 24px;
    margin: 1rem;
}


.slider-slc .slick-prev {
    left: 0;
    flex-direction: column;
    justify-content: center;
    z-index: 1;
    height: 100%;
    width: 3rem;
    display: flex;
    align-content: center;
    align-items: center;
}

.slider-slc .slick-next {
    right: 0;
    flex-direction: column;
    justify-content: center;
    z-index: 1;
    height: 100%;
    width: 3rem;
    display: flex;
    align-content: center;
    align-items: center;
}

.time-stripes {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.time-stripe, .time-stripe-main, time-stripe-mini {
    width: 10%;
    height: 4px;
    background-color: gray;
    margin: 0 5px;
    position: relative;
    overflow: hidden;
}

    .time-stripe .progress-slc {
        height: 100%;
        background-color: white;
        position: absolute;
        top: 0;
        left: 0;
        width: 0%;
    }

.slider-content {
    position: absolute;
    color: white;
    padding: 10px;
    border-radius: 5px;
    z-index: 2;
    pointer-events: auto;
    user-select: auto;
    bottom: 0;
    left: 0;
    left: 4%;
    right: 4%;
    bottom: 5rem;
    display: none; /* Hide by default */
}

.slider-content-slc-mini {
    bottom: 8rem;
}

.slider-content-btn {
    background: #111;
    color: black;
    padding: 0.5rem 1rem;
    border-radius: 0.6rem;
    display: flex;
    width: auto;
    position: relative;
    pointer-events: all;
    user-select: all;
    color: #fff;
    font-weight: 600;
    min-width: 120px;
    text-align: center;
    justify-content: center;
    bottom: 0;
    position: absolute;
    margin: 1rem;
    right: 0;
    border: #2f2f2f00 3px solid;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

    .slider-content-btn:hover {
        background: #2f2f2f00;
        border: #fff 3px solid;
    }

.slick-center .slider-content {
    display: block; /* Show only on the central slide */
}




.slide-overlay-content {
    background-image: linear-gradient(180deg, #0000 -30%, #19191af7 99%);
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}




.slide-logo-product {
    width: 197px !important;
    min-height: auto !important;
}

.slide-logo-product-100 {
    width: 100% !important;
    min-height: auto !important;
    object-position: 50% 50% !important;
    margin: 0 auto;
}





.wen-player {
    display: grid;
    grid-template-columns: 10rem 1fr;
    width: 40rem;
    background-color: #16191b;
    border-radius: 0.5rem;
    box-shadow: 0 1rem 1.0rem #3a373724;
    overflow: hidden;
    color: #fff;
}

.wen-thumb {
    background: #121619
}

.wen-player .wen-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wen-player .info {
    padding: 1rem;
}

.wen-player .detail {
    display: grid;
    grid-template-columns: 1fr 4rem;
    margin-bottom: 1rem;
}

.wen-player .title {
    font-size: 1.5rem;
    padding-bottom: 1rem;
}

    .wen-player .title .time {
        font-size: 0.9rem;
        color: #777;
        margin-top: 0.25rem;
    }

.wen-player .control i {
    width: 3.5rem;
    height: 3.5rem;
    display: grid;
    place-content: center;
    font-size: 1.25rem;
    background-color: #C46638;
    color: white;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 0rem #1AAFFFAA;
}

    .wen-player .control i:hover {
        box-shadow: 0 0 1.5rem #753415AB;
        font-size: 1.5rem;
    }



.loading-indicator {
    display: none;
    /* Add more styling as needed */
}

.wen-img-stat-preview {
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border: 0px !important;
}

.wen-img-stat-overlay-preview {
    background: linear-gradient(140deg, #262626e8 40%, #3f3f3f7d 99%);
}





.font-40 {
    font-size: 40pt
}

.wen-rotate-10 {
    transform: rotate(-10deg);
    /* Safari */
    -webkit-transform: rotate(-10deg);
    /* Firefox */
    -moz-transform: rotate(-10deg);
    /* IE */
    -ms-transform: rotate(-10deg);
    /* Opera */
    -o-transform: rotate(-10deg);
    /* Internet Explorer */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}








.wen-bq-tag-top {
    border: 2px solid #b3c5d5;
    color: #94a5b5;
}

.wen-bq-tag-top-2 {
    border: 2px solid #4f5a64;
    color: #94a5b5;
}

.wen-bq-tag-top-3 {
    background: #47505a00;
    border: 2px solid #252a2f;
    color: #545f6a;
}



.font-15 {
    font-size: 15pt
}

.menu-product-title {
    padding: 0.6rem 0.7rem 0.2rem 0.6rem;
    color: #e5a936;
}

.wen-custom-select {
    position: relative; /* якорь для выпадашки */
    display: inline-block;
    min-width: 200px;
    cursor: pointer;
    font: 10pt
}

.wen-custom-select-trigger {
    position: relative;
    padding: 0.6rem 1.5rem 0.8rem 0.8rem;
    border: 1px solid #2f2f2f;
    background-color: #0c0c0c;
    border-radius: 1rem;
    color: #cfcfcf;
}

    /* стрелочка */
    .wen-custom-select-trigger::after {
        content: '';
        position: absolute;
        top: 50%;
        right: 1rem;
        transform: translateY(-50%) rotate(45deg);
        border: solid white;
        border-width: 0 2px 2px 0;
        display: inline-block;
        padding: 3px;
        transition: transform 0.1s ease-in-out;
        pointer-events: none; /* чтобы не блокировать клик */
    }

.wen-custom-select.open .wen-custom-select-trigger::after {
    transform: translateY(-50%) rotate(-135deg);
}

/* выпадающий список */
.wen-custom-select-options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000; /* поверх всего */
    border: 1px solid #ddd;
    border-top: none;
    background-color: #fff;
    display: none;
    border-radius: 1rem;
    overflow: hidden;
    max-height: 260px; /* если вариантов много */
    overflow-y: auto;
}

.wen-custom-select.open .wen-custom-select-options {
    display: block;
}

.wen-custom-option {
    padding: 1rem;
    border-bottom: 1px solid #eee;
    background-color: #fff;
}

    .wen-custom-option:hover {
        background-color: #f7f7f7;
    }

    /* единый стиль выбранного пункта */
    .wen-custom-option.wen-selected {
        background-color: #eaeaea;
        color: #000;
    }



.note-editor.note-airframe .note-editing-area .note-editable, .note-editor.note-frame .note-editing-area .note-editable {
    min-height: 320px;
}



.section-265 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(265px, 1fr));
    grid-template-rows: repeat(1, 1fr);
    grid-auto-flow: dense;
    grid-gap: 0em;
}


.item-mi-product {
    position: relative
}



.item-mi-img {
    position: relative;
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 0.3rem;
    min-height: 50px;
}

.item-mi-img-400 {
    min-height: 400px
}




.item-mi-product-type {
    font-weight: 600;
    color: #979797;
    padding: 0.2rem;
}

.item-mi-product-title {
    font-weight: 600;
    color: #f5f5f5;
    padding: 0rem 0.2rem 0rem 0.2rem;
    font-size: 10pt;
    letter-spacing: 0;
    display: -webkit-box;
    line-clamp: 2;
    overflow: hidden;
    word-break: break-word;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    min-height: 45px;
}

.item-mi-product-badge {
    position: absolute;
    z-index: 1;
    background: #a5001e;
    padding: 0.4rem 1rem;
    right: 0.5rem;
    top: 0.5rem;
    border-radius: 5rem;
    font-size: 10pt;
    font-weight: 600;
    text-transform: uppercase;
    max-height: 35px;
}

.item-mi-product-art-price {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 1;
    background: black;
    padding: 0.3rem;
    border-radius: 0.8rem 0px 0px 0px;
}

.item-mi-product-badge-type {
    position: absolute;
    z-index: 1;
    background: #000000c2;
    padding: 0.3rem;
    right: 0;
    top: 0;
    border-radius: 0.3rem;
    font-size: 10pt;
    font-weight: 600;
    text-transform: uppercase;
    max-height: 35px;
    align-content: center;
    align-self: center;
    justify-content: end;
    justify-items: center;
    justify-self: center;
    display: flex;
}

.item-mi-product-addon {
    font-weight: 600;
    color: #f5f5f5;
    padding: 0rem 0.2rem 0rem 0.2rem;
    font-size: 11pt;
    letter-spacing: 0;
    display: -webkit-box;
    line-clamp: 2;
    overflow: hidden;
    word-break: break-word;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.item-mi-product-discount {
    padding: 0.3rem 0.5rem;
    background: #bb2743;
    border-radius: 0.6rem;
    font-size: 12pt;
    text-align: center;
    font-weight: 600;
    min-width: 65px;
}

.item-mi-product-free {
    padding: 0.3rem 0.5rem;
    background: #578642;
    border-radius: 0.6rem;
    font-size: 12pt;
    text-align: center;
    font-weight: 600;
    min-width: 58px;
}


.item-mi-product-price {
    padding: 0.3rem 0.5rem;
    justify-content: end;
    border-radius: 0.6rem;
    font-size: 12pt;
    text-align: center;
    font-weight: 600;
    flex-flow: wrap;
}


.item-mi-product-release-announce {
    justify-content: end;
    font-size: 12pt;
    text-align: center;
    font-weight: 600;
    color: #f0802d;
    text-transform: uppercase;
}


.item-mi-product-release-preorder {
    justify-content: end;
    font-size: 12pt;
    text-align: center;
    font-weight: 600;
    color: #f0802d;
    text-transform: uppercase;
}

.item-mi-product-overaly {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7); /* Полупрозрачный черный фон */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s, visibility 0.5s;
    pointer-events: none;
    z-index: 1;
}

.item-mi-subimg {
    position: relative
}

.item-mi-subimg-2 {
    position: relative;
    background: #131313;
    border-radius: 1rem;
}



/* Показывать кнопки при наведении */
.item-mi-subimg:hover .item-mi-product-overaly {
    opacity: 1;
    visibility: visible;
    border-radius: 0.3rem;
}

/* Показывать кнопки при наведении */
.item-mi-subimg-2:hover .item-mi-product-overaly {
    opacity: 1;
    visibility: visible;
    border-radius: 1rem;
}




.item-mi-product-buttons {
    z-index: 1;
    pointer-events: auto;
    font-size: 18pt;
    height: 50px;
    width: 50px;
    text-align: center;
    align-items: center;
    justify-items: center;
    display: grid;
    background: #0009;
    border-radius: 1rem;
}

.item-mi-product-platform {
    position: absolute;
    z-index: 1;
    right: 0.5rem;
    border-radius: 5rem;
    font-size: 10pt;
    font-weight: 600;
    text-transform: uppercase;
    max-height: 35px;
    bottom: 0.5rem;
}

.item-mi-like-add {
    border: 0px;
    color: #fff;
}

.item-mi-favorite-add {
    border: 0px;
    color: #fff;
}

.item-mi-edit-product {
    border: 0px;
    color: #fff;
}

.item-mi-download {
    border: 0px;
    color: #fff;
}

.item-mi-cart-add {
    border: 0px;
    color: #fff;
}

.item-mi-buyed {
    position: absolute;
    z-index: 1;
    right: 0;
    color: #b7b7b7;
    background: #202020;
    height: 35px;
    width: 35px;
    text-align: center;
    border-radius: 0rem 0.3rem 0rem 1rem;
    display: grid;
    align-content: center;
    pointer-events: none
}

.item-mi-avatar-70 {
    position: relative;
    margin: 0px;
    object-fit: cover;
    height: 70px;
    width: 70px;
    align-content: center;
    align-items: center;
    align-self: center;
    display: grid;
    border-radius: 10rem;
    pointer-events: auto;
    transition: box-shadow 0.3s, border 0.3s;
    border: 2px solid #fff0
}

.item-mi-avatar-50 {
    position: relative;
    margin: 0px;
    object-fit: cover;
    height: 50px;
    width: 50px;
    align-content: center;
    align-items: center;
    align-self: center;
    display: grid;
    border-radius: 10rem;
    pointer-events: auto;
    transition: box-shadow 0.3s, border 0.3s;
    border: 2px solid #fff0
}


    .item-mi-avatar-50:hover {
        border: 2px solid #fff;
        box-shadow: 0px 0px 50px 10px rgba(255, 255, 255, 0.45);
    }

.item-mi-avatar-70:hover {
    border: 2px solid #fff;
    box-shadow: 0px 0px 50px 10px rgba(255, 255, 255, 0.45);
}
/* блокируем клики по виджету пока идёт отправка */
[data-uploader].wu--busy {
    opacity: .6;
    pointer-events: none;
}


.item-mi-avatar-title {
    font-size: 10pt;
    margin-top: 0.6rem;
    font-weight: 600;
}


.item-mi-avatar-username {
    font-size: 12pt;
    margin-top: 0.6rem;
    font-weight: 600;
    z-index: 2;
    pointer-events: auto
}

    .item-mi-avatar-username:hover {
        color: #cecece;
    }

.item-mi-addons-tag-icons {
    z-index: 1;
    pointer-events: auto;
    font-size: 18pt;
    height: 50px;
    width: 50px;
    text-align: center;
    align-items: center;
    justify-items: center;
    display: grid;
    border-radius: 1rem;
    background: #0009;
}


.item-mi-addons-title-art {
    font-weight: 600;
    color: #f5f5f5;
    font-size: 10pt;
    letter-spacing: 0;
    display: -webkit-box;
    line-clamp: 2;
    overflow: hidden;
    word-break: break-word;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.item-mi-addons-stat {
    padding: 1rem 1rem 0.8rem 1rem;
    padding-top: 0px
}

.item-mi-product-type-top {
    font-weight: 600;
    color: #eee;
    padding: 0.2rem 0.6rem;
    background: #000000c4;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 0.2rem 0.8rem 0.8rem 0rem;
    margin: 0.2rem 0.2rem 0.2rem 0rem;
    margin-bottom: 0.2rem;
    align-content: center;
    align-items: center;
    align-self: center;
    display: grid;
    min-width: 80px;
}

.item-mi-product-type-nooverlay {
    display: flex;
    opacity: 1; /* Элемент полностью видим */
    transition: opacity 0.3s ease; /* Переход с анимацией */
}

/* Состояние элемента при наведении на .item-mi-subimg */
.item-mi-subimg:hover .item-mi-product-type-nooverlay {
    opacity: 0; /* Элемент полностью скрыт */
}

.item-mi-subimg:hover .item-mi-product-overaly {
}


.grid-container-categories-200 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-auto-rows: auto;
    grid-gap: 10px;
    width: 100%;
}


.grid-container-categories-220 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    grid-auto-rows: auto;
    grid-gap: 10px;
    width: 100%;
}


.grid-container-categories-240 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    grid-auto-rows: auto;
    grid-gap: 10px;
    width: 100%;
}

.grid-container-categories-400 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    grid-auto-rows: auto;
    grid-gap: 10px;
    width: 100%;
}


/* Исходный стиль для кнопки */
.anim-fx-bounce {
    transition: all 0.3s ease-in-out;
    border-radius: 5px;
}

    /* Эффект при наведении мыши */
    .anim-fx-bounce:hover {
        transform: scale(1.1);
    }

    .anim-fx-bounce:after {
        content: "";
        position: absolute;
        opacity: 0;
        transition: all 0.3s;
        box-shadow: 0 0 8px 40px white;
    }

    .anim-fx-bounce:active:after {
        box-shadow: 0 0 0 0 white;
        opacity: 1;
        transition: 0s;
    }





.wen-checkbox {
    display: flex;
    align-items: center;
    position: relative;
    margin-bottom: 0.2rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,border-radius .15s ease;
}

    .wen-checkbox input[type="checkbox"] {
        display: none;
    }

    .wen-checkbox label {
        position: relative;
        cursor: pointer;
        display: flex;
        align-items: center;
        color: #aaa;
        width: 100%;
        user-select: none;
    }

        .wen-checkbox label:before {
            content: '\f096'; /* Font Awesome square icon */
            font-family: 'Font Awesome 5 Free';
            font-weight: 900;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 20px;
            font-size: 16pt;
            height: 20px;
            border: 0px solid #ccc;
            border-radius: 5px;
            margin-right: 10px;
            transition: all 0.3s ease;
            color: #ccc;
            margin-top: 3px;
        }

    .wen-checkbox input[type="checkbox"]:checked + label:before {
        content: '\f14a'; /* Font Awesome check icon */
        color: #fff;
        background-color: none;
        border: 0px;
    }

    .wen-checkbox label:hover:before {
        border-color: #007bff;
    }

    .wen-checkbox label:hover {
        color: #fff;
    }

    .wen-checkbox label, .wen-checkbox label:before {
        transition: all 0.3s ease;
    }



    /* Состояние disabled: стиль метки и “квадратика” */
    .wen-checkbox input[type="checkbox"]:disabled + label {
        cursor: not-allowed;
        opacity: .6;
        color: #777;
        pointer-events: none; /* отключить hover-эффекты */
    }

        .wen-checkbox input[type="checkbox"]:disabled + label:before {
            content: '\f096'; /* тот же пустой квадрат */
            color: #666;
        }

        /* На всякий случай приглушим hover для disabled (если уберёшь pointer-events) */
        .wen-checkbox input[type="checkbox"]:disabled + label:hover,
        .wen-checkbox input[type="checkbox"]:disabled + label:hover:before {
            color: #777;
            border-color: #ccc;
        }

    /* Выключенные — некликабельные */
    .wen-checkbox input[type="checkbox"]:disabled + label {
        cursor: not-allowed;
        opacity: .6;
        color: #777;
        pointer-events: none; /* на всякий случай, если есть JS на label */
    }

        /* Иконка остаётся пустым квадратом */
        .wen-checkbox input[type="checkbox"]:disabled + label:before {
            content: '\f096';
            color: #666;
        }

    /* Если по проекту удобнее — можно таргетить класс */
    .wen-checkbox label.is-disabled {
        pointer-events: none;
    }



/* Disabled-контейнер (8) — полностью блокируем взаимодействие лейбла */
.wen-checkbox-disabled {
    pointer-events: none;
    opacity: .6;
}

/* Если хотите дополнительно стилизовать disabled input — сохраните ваши правила: */
.wen-checkbox_input:disabled + label {
    cursor: not-allowed;
    color: #777;
}

    .wen-checkbox_input:disabled + label:before {
        color: #666;
    }















.toggle-menu {
    display: none;
}

    .toggle-menu:checked ~ .form-group .filtersProduct {
        display: none;
    }

.wen-group-label {
    font-size: 12pt;
    cursor: pointer;
    color: #cecece;
    user-select: none;
    background: #242428;
    width: 100%;
    padding: 0.4rem 1.1rem;
    border-radius: 1rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
    transition: all 0.3s ease;
    position: relative;
}

    .wen-group-label:hover {
        background: #3c3c3c;
        color: #fff;
    }

.wen-max-270 {
    max-height: 270px;
    overflow-y: auto;
    /* Сохранение позиции скролла */
    scroll-behavior: smooth;
}

.toggle-icon {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    content: '\f0da'; /* Font Awesome down arrow */
}

.toggle-menu:checked + .wen-group-label .toggle-icon {
    display: none;
}

.toggle-menu:not(:checked) + .wen-group-label .toggle-icon {
    display: inline-block;
    color: #a6a6a6;
    padding: 0.4rem;
}



.wen-category-overlay {
    pointer-events: none;
    align-items: center;
    justify-items: center;
    justify-self: center;
    align-items: center;
    display: flex;
    justify-content: center;
    background: rgba(8, 1, 1, 0.87);
    color: white;
    opacity: 1;
    text-align: center;
    z-index: 1;
    position: relative !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 190px !important;
    width: 100%;
    transition: background 0.3s;
    pointer-events: all;
    word-wrap: break-word;
    word-break: break-all;
    padding-top: 1.1rem;
}


    .wen-category-overlay:hover {
        background: rgba(39, 40, 43, 0);
    }

.grid-categories {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    grid-auto-rows: auto;
    grid-gap: 4px;
    width: 100%;
}














.game-block {
    position: relative;
    background-size: cover;
    background-position: center;
    color: white;
    padding: 20px;
}

    .game-block .overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
    }

    .game-block .content {
        position: relative;
        z-index: 1;
    }

    .game-block img {
        width: 100%;
        height: auto;
    }
























.wen-card-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 8px;
    transition: all 0.3s ease-in-out;
}

.wen-card-image {
    width: 100%;
    height: auto;
}

.wen-card-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
    z-index: 1;
}

.wen-card-logo {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
}

.wen-card-title {
    position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 2;
    color: white;
}

.wen-card-icons {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 2;
}

.wen-hover-menu {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    color: white;
    display: none;
    z-index: 3;
    padding: 20px;
    box-sizing: border-box;
}

.wen-card-container:hover .wen-hover-menu {
    display: block;
}








.carousel-control-next, .carousel-control-prev {
    width: 8rem;
}


.wen-rating-top {
    font-size: 10pt;
    margin-top: 10px;
    margin-left: 5px;
}

.wen-data-product-header {
    z-index: 0;
    position: absolute;
    bottom: 0;
    display: block;
    left: 5%;
    right: 5%;
    margin-bottom: 2.5rem;
}

.wen-data-product-header-webgame {
    z-index: 1;
    position: relative;
    margin: 0rem;
    background: #0f0f0f;
    padding: 1rem;
}

.item-mi-product-buttons-big {
    z-index: 1;
    pointer-events: auto;
    font-size: 16pt;
    font-weight: 600;
    height: 50px;
    min-width: 220px;
    text-align: center;
    align-items: center;
    justify-items: center;
    display: grid;
    background: #aa2c2c;
    border-radius: 0.4rem;
    padding: 1.5rem;
    color: #fff;
}



.wen-item-author {
    display: flex;
    font-weight: 600;
    margin-top: 0.5rem;
    margin: 0.3rem;
}




.h-100imp {
    height: 100% !important;
}

.slide-slc-zoom {
    position: absolute;
    right: 0;
    bottom: 0;
    height: 100px;
    width: 100px;
    font-size: 25pt;
    text-align: center;
    justify-content: center;
    justify-items: center;
    align-content: center;
    background: #262626db;
    color: #fff;
    border-radius: 2rem;
    margin: 1rem;
}

    .slide-slc-zoom:hover {
        color: #fff;
        background: #050909db;
    }

.text-muted {
    --bs-text-opacity: 1;
    color: rgb(88, 93, 99) !important;
}

.readonly-select {
    pointer-events: none;
    background-color: #e9ecef; /* Цвет фона для неактивного состояния */
}

/* добавьте в свой CSS-файл */
.slider-slc-mini .slick-track {
    display: flex !important; /* вместо block          */
    flex-wrap: nowrap !important;
}



.lib-qr-img {
    height: 120px;
    width: 120px;
}


.sun-editor, .sun-editor .se-container, .sun-editor .se-toolbar, .sun-editor .se-menu-list, .sun-editor .se-dialog {
    background-color: rgba(27, 31, 34, 0.98) !important;
    color: #e5e7eb !important;
    border-color: rgba(255,255,255,0.08) !important;
    border-radius: 0.6rem;
}

    .sun-editor .se-btn-module-border, .sun-editor .se-toolbar, .sun-editor .se-toolbar-line, .sun-editor .se-dialog .se-dialog-inner {
        border-color: rgba(255,255,255,0.08) !important;
        overflow: hidden !important;
        border-radius: 0.6rem;
    }


/* фиксированная ширина правой колонки только на xl+ */
@media (min-width: 1200px) {
    .wen-sidebar-xl {
        width: 360px;
        flex: 0 0 auto;
    }
}
/* на <1200px ширина авто (100%), так что колонка станет полноширинной) */
















.wen-btn-green {
    background: #53812c;
    padding: 0.5rem 1.2rem;
    color: white;
    font-weight: initial;
    border-radius: 0.5rem;
    text-align: center;
}

    .wen-btn-green:hover {
        background: #6b9a44 !important;
    }




/* ============================ WU — Wenrexa Uploader ============================ */
/* Старается не конфликтовать с Bootstrap. Никаких позиций поверх сетки. */
/* Обёртка helper'а, чтобы виджет занимал ровно одну колоночную «ячейку» */
.wu-stack {
    display: block;
    width: 100%;
    min-width: 200px;
}

/* Контейнер виджета */
.wu {
    position: relative;
    display: block;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    min-height: 220px;
    background: #1c1c1e;
    cursor: pointer;
    transition: .18s;
    overflow: hidden;
}

    .wu:hover {
        box-shadow: 0 6px 16px rgba(16,24,40,.06);
        background: #2e3136;
    }

    .wu.wu--drag {
        border-color: #2563eb;
        transform: translateY(-1px);
    }

    /* ————— Оверлей (нажимается, т.к. это <label>) ————— */
    .wu .wu-overlay {
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        color: #6b7280;
        cursor: pointer; /* указатель */
        pointer-events: auto;
        outline: 0;
        z-index: 12;
        color: #fff
    }

        .wu .wu-overlay:focus-visible { /* доступность клавиатурой */
            outline: 2px solid #2563eb;
            outline-offset: 2px;
        }

.wu-overlay-inner { /* внутренний блок с текстом */
    display: grid;
    place-items: center;
    text-align: center;
    padding: 12px;
}

.wu .wu-title {
    display: block;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
}

.wu .wu-icon {
    display: block;
    color: #4d4d4e;
    width: 72px;
    height: 72px;
    background: #1c1c1e;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}


.wu .wu-hint {
    display: block;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.4);
}

/* Оверлей оставляем кликабельным (label[for] открывает диалог),
   прячем лишь контент внутри оверлея */
.wu.wu--hasfile .wu-overlay {
    pointer-events: auto;
}



/* Превью (для постера). Остаётся под label, клики идут в label */
.wu .wu-preview {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
    user-select: none;
    -webkit-user-drag: none;
    z-index: 10;
}
/* Фон оверлея рисуем псевдо-элементом, текст не трогаем */
.wu .wu-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: #000; /* цвет подложки */
    opacity: .4; /* базовая «тёмность» 40% */
    transition: opacity .15s ease;
    z-index: -1; /* под текстом оверлея */
}

/* Фон оверлея рисуем псевдо-элементом, текст не трогаем */
.wu .wu-overlay:hover::before {
    background: #000; /* цвет подложки */
    opacity: .2; /* базовая «тёмность» 40% */
}



/* Во время перетаскивания делаем фон чуть светлее (20%) */
.wu.wu--drag .wu-overlay::before {
    opacity: .2;
}
/* ————— Реальный input — «визуально скрытый», но доступный ————— */
/* Используем корректный accessible-hidden паттерн вместо left:-9999px */
.wu .wu-input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    border: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
}

.wu.wu--hasfile .wu-title,
.wu.wu--hasfile .wu-hint {
    opacity: 1;
}
/* ————— WU loading spinner ————— */
.wu.wu--loading::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 11;
    background: rgba(0, 0, 0, .45);
    border-radius: inherit;
    pointer-events: none;
}
.wu.wu--loading::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 32px; height: 32px;
    margin: -16px 0 0 -16px;
    border: 3px solid rgba(255, 255, 255, .2);
    border-top-color: #fff;
    border-radius: 50%;
    z-index: 13;
    pointer-events: none;
    animation: wu-spin .6s linear infinite;
}
@keyframes wu-spin { to { transform: rotate(360deg); } }
/* ————— Локальный список выбранных файлов ————— */
.wu-list {
    padding: 0.2rem;
    display: grid;
    gap: 4px;
}

.wu-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    background: #0d0d0e;
    border-radius: 10px;
    padding: 8px 15px;
}

.wu-thumb { /* мини-превью для изображений слева */
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: #f3f4f6 center/cover no-repeat;
    flex: 0 0 auto;
}

.wu-ext { /* «иконка» для не-картинок */
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #f8f9fa;
    border: 1px solid #eceff3;
    display: grid;
    place-items: center;
    color: #6c757d;
    flex: 0 0 auto;
}

.wu-name {
    flex: 1 1 auto;
    min-width: 0;
}




    .wu-name > div {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 10pt;
        font-weight: 600;
    }

    .wu-name small {
        color: #6b7280;
    }

.wu-rm {
    background: #fff;
    border-radius: 8px;
    padding: 0.2rem 0.5rem;
    cursor: pointer;
}

    .wu-rm:hover {
        color: #000;
    }
/* ================= WU DISABLED ================= */

.wu.disabled,
.wu[data-wu-disabled="true"] {
    cursor: not-allowed;
    background: var(--wenrexa-bg-secondary);
    pointer-events: none;
    color: #6e6e6e;
}

    /* убираем hover-эффекты */
    .wu.disabled:hover,
    .wu[data-wu-disabled="true"]:hover {
        box-shadow: none;
        background: #1c1c1e;
        transform: none;
    }

    /* убираем drag-подсветку */
    .wu.disabled.wu--drag,
    .wu[data-wu-disabled="true"].wu--drag {
        border-color: rgba(255,255,255,.06);
        transform: none;
    }

    /* overlay — НЕ кликабельный */
    .wu.disabled .wu-overlay,
    .wu[data-wu-disabled="true"] .wu-overlay {
        pointer-events: none;
        cursor: not-allowed;
    }

        /* overlay фон не реагирует */
        .wu.disabled .wu-overlay::before,
        .wu[data-wu-disabled="true"] .wu-overlay::before {
            opacity: .4;
        }

    /* input полностью выключен */
    .wu.disabled .wu-input,
    .wu[data-wu-disabled="true"] .wu-input {
        pointer-events: none;
    }

/* ————— Локальный прогресс каждого виджета ————— */
.wu-progress {
    height: 10px;
    border-radius: 10px;
    background: #222225;
    overflow: hidden;
    position: relative;
}

.wu-progress__bar {
    height: 100%;
    width: 0;
    background: #2563eb;
    transition: width .15s;
}

.wu-progress__text {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    color: #7b7b7b;
}

/* ————— Кнопка «Загрузить» скрыта, когда нечего грузить ————— */
.wu-send-hidden {
    display: none !important;
}

/* ============================ КРОП-модалка (общая одна) ============================ */
#wuCropModal[hidden] {
    display: none !important;
}

#wuCropModal {
    position: fixed;
    inset: 0;
    z-index: 1060;
    background: rgba(17,24,39,.55);
    display: grid;
    place-items: center;
    padding: 24px;
}

    #wuCropModal .wu-modal {
        width: min(92vw,760px);
        border-radius: 16px;
        padding: 16px;
        display: grid;
        gap: 12px;
        color: #fff;
        box-shadow: 0 12px 30px rgba(0,0,0,.2);
        outline: none;
    }

    #wuCropModal .wu-cropbox {
        width: min(86vw,560px);
        aspect-ratio: 1/1;
        margin: 0 auto;
        border-radius: 12px;
        overflow: hidden;
        background: #f9fafb;
    }

    #wuCropModal .btn {
        border: 1px solid #d9d9e3;
        border-radius: 10px;
        padding: 8px 12px;
        font-weight: 600;
    }

        #wuCropModal .btn.primary {
            background: #2563eb;
            color: #fff;
            border-color: transparent;
        }

/* ============================ «Пилюли» уже загруженных файлов ============================ */
.file-pill {
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    align-items: center;
    gap: .9rem;
    background: #0d0d0e;
    border-radius: 0.5rem;
    padding: .9rem 1rem;
    box-shadow: 0 1px 0 rgba(16,24,40,.02);
    cursor: grab;
}


    .file-pill:hover {
        box-shadow: 0 6px 16px rgba(16,24,40,.06);
    }

.file-thumb {
    width: 44px;
    height: 56px;
    border-radius: .5rem;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}

.file-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem .75rem;
    color: #677489;
}

.btn-kebab {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: .6rem;
}

.badge-soft-success {
    color: #198754;
    border: 1px solid #198754;
}

.badge-soft-danger {
    background: #fdeeee;
    color: #dc3545;
}



.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border-radius: .5rem;
    line-height: 1
}

.js-drag-handle {
    cursor: grab;
}

.drag-ghost {
    opacity: .35;
}

.drag-chosen {
    outline: 2px dashed currentColor;
    outline-offset: -2px;
}

.drag-moving {
    opacity: .6;
}



/* «Красные» элементы — отклонённые файлы */
.wu-item--rejected {
    border: 1px dashed #dc3545;
    background: rgba(220,53,69,.08);
    color: #dc3545;
}

    .wu-item--rejected .wu-name div {
        text-decoration: line-through;
    }


/* Контент должен уметь сжиматься, иначе выталкивает кнопки */
.file-main {
    min-width: 0;
}

    .file-main .fw-semibold {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

/* Метаданные — уже у тебя с wrap */
.file-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem .75rem;
}

/* Кнопки справа как компактный флекс-контейнер */
.file-actions {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap; /* можно завернуть во 2 строку, если их много */
    justify-self: end; /* прижать к правому краю колонки */
    min-width: 0;
}

/* Размер кнопок */
.btn-kebab {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: .6rem;
}

/* На узких экранах переносим блок кнопок на вторую строку */
@media (max-width: 640px) {
    .file-pill {
        grid-template-columns: auto minmax(0,1fr); /* 2 колонки: иконка + контент */
    }

    .file-actions {
        grid-column: 1 / -1; /* занять всю ширину ниже */
        justify-self: end; /* и прижаться вправо */
        margin-top: .5rem;
    }
}




.form-check {
    padding-left: 0.5em;
}



.form-control::placeholder {
    color: #999; /* свой цвет */
    opacity: 1; /* по умолчанию в bootstrap стоит 0.65, поэтому ставим 1 */
}



.bg-body-tertiary {
    background-color: rgb(28, 29, 30) !important;
}
/*Карточка downloads */

.w-item-bq {
    background-color: rgb(36, 37, 38) !important;
}


.btn {
    padding: 0.5rem 2rem;
    border: 0px !important;
    background: #18181b;
}



.w-item-card-art {
    background: #111113;
    color: #fff;
}

.w-item-card {
    background: #1c1d1e;
    color: #fff;
}

.w-cart-page {
    background: #1c1d1e;
    padding: 0.75rem;
    border-radius: 1rem;
}







.accordion-item-edit-pr {
    color: #c2c2c2;
    border-radius: 0.9rem !important;
    overflow: hidden;
    background: #111;
    border: 1px solid #121212 !important;
}






.accordion-button:hover {
    background: #141516;
}



.navbar .nav-link {
    white-space: nowrap;
}






.dropdown-menu.show {
    min-height: 240px;
}


.form-select:disabled {
    background-color: #5d5d5d;
    border: 1px solid #5d5d5d !important;
    color: #0e0e0e;
}




































































/* --- FILTERBAR --- */
.filterbar {
    position: sticky;
    top: 64px;
    z-index: 11;
    z-index: 11;
    background: rgba(0,0,0,0.55);
}

.filterbar-inner {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .75rem 1rem;
    justify-content: center !important;
    backdrop-filter: saturate(1.05) blur(6px);
    -webkit-backdrop-filter: saturate(1.05) blur(6px);
    background: rgba(0,0,0,0);
    border-bottom: 1px solid #1d1d1d;
}

/* каждая пара: чип + выпадашка */
.chip-wrap {
    position: relative; /* <-- теперь меню привязано к оболочке */
}


.chip-label {
    font-weight: 600;
    font-size: .9rem;
}

.chip-value {
    font-size: .85rem;
    opacity: .85;
}

.caret {
    width: .8rem;
    height: .8rem;
    margin-left: .25rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: .8;
}


/* выпадающее меню */

.chip-wrap[data-open="1"] .chip-menu {
    display: block;
}







.ps-busy {
    opacity: .6;
    pointer-events: none;
}

.chip-picker {
    border: 1px solid var(--bs-border-color);
    border-radius: .375rem;
    padding: .5rem;
    background: #fff;
}

    .chip-picker .cp-head {
        display: flex;
        gap: .5rem;
        align-items: center;
    }

    .chip-picker .cp-search {
        flex: 1;
    }

    .chip-picker .cp-chips {
        display: flex;
        flex-wrap: wrap;
        gap: .375rem;
        margin-top: .35rem;
    }

.chip {
    display: inline-flex;
    align-items: stretch;
    background: #f3f3f3;
    color: #090909;
    cursor: pointer;
    user-select: none;
    transition: border-color .15s, background .15s, color .15s;
    padding: 0;
    font-weight: 400;
    border-radius: 999px;
}

    .chip .x {
        cursor: pointer;
        font-weight: 700;
    }

.cp-menu {
    max-height: 180px;
    overflow: auto;
    border-radius: .375rem;
    display: none;
    background: #fff;
    position: absolute;
    z-index: 10;
    width: 100%;
}

.cp-item {
    padding: .25rem .5rem;
    cursor: pointer;
}

    .cp-item:hover {
        background-color: var(--bs-light);
    }

.cp-wrap {
    position: relative;
}





.af-product-desc .af-desc-body {
    color: #fff;
    font-size: 1rem;
}


.p-filter {
 
}


/* сетка внутри меню */
.menu-grid {
    display: grid;
    gap: .4rem .75rem;
    grid-template-columns: repeat(auto-fill, minmax(160px,1fr));
    max-height: 52vh;
    overflow: auto;
    padding: .25rem;
}

    .menu-grid .form-check {
        margin: 0;
        padding: .25rem;
        border-radius: .5rem;
        cursor: pointer;
        align-items: center !important;
        display: flex !important;
    }

        .menu-grid .form-check:hover {
            background: rgba(255,255,255,.05);
        }

.count-badge {
    display: inline-block;
    min-width: 1.6em;
    padding: .1em .45em;
    border-radius: 999px;
    font-size: .75rem;
    text-align: center;
    background: #1f1f1f;
    color: #bbb;
    margin-left: .35rem;
}

/* --- ACTIVE FILTERS (под баром) --- */
.active-filters {
    display: flex !important;
    flex-wrap: wrap;
    gap: .5rem;
    padding: 0.7rem;
}




/* адаптив */
@media (max-width: 640px) {


    .chip-menu {
        left: 50%;
        transform: translateX(-50%);
        max-width: 92vw;
    }
}

.chip-menu {
    position: absolute;
    right: 0;
    left: auto;
}

/* Левая часть: лейбл + значение + стрелка */
.chip-body {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem .85rem;
    border-top-left-radius: 999px;
    border-bottom-left-radius: 999px;
    min-width: 0;
}

    .chip-body .chip-label {
        font-weight: 700;
        font-size: .92rem;
    }

    .chip-body .chip-value {
        font-size: .88rem;
        opacity: .9;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .chip-body .caret {
        width: .4rem;
        height: .4rem;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg);
        opacity: .8;
        margin-left: .25rem;
    }
/* иконка в чипе слева от текста */
.chip-icon {
    font-size: .95rem;
    opacity: .9;
    margin-right: .5rem;
    width: 1.1rem; /* фикс ширина = ровное выравнивание */
    text-align: center;
}
/* Правая часть: крестик (по умолчанию скрыт) */
.chip-clear {
    display: none;
    align-items: center;
    justify-content: center;
    padding: .5rem .65rem;
    background: #1a1a1a;
    border-top-right-radius: 999px;
    border-bottom-right-radius: 999px;
    font-size: .95rem;
    background: #f3f3f3;
    line-height: 1;
    cursor: pointer;
    opacity: .95;
    margin-left: -.25rem;
}

    .chip-clear:hover {
        background: #262626;
    }

/* Появляется только у "грязных" чипов */
.chip--dirty .chip-clear {
    display: inline-flex;
}

/* В дефолтном состоянии чип снова становится цельным */
.chip:not(.chip--dirty) {
    border-radius: 999px;
}

    .chip:not(.chip--dirty) .chip-body {
        border-radius: 999px;
        padding-right: .85rem; /* выравниваем визуально */
    }

.chip--dirty .chip-body {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    padding-right: .6rem; /* чуть меньше, чтобы крест был ближе */
}



/* Когда чип «грязный» (не дефолт) — освобождаем правую часть под крест */
.chip--dirty {
    padding-right: 0; /* крест будет отдельным сегментом */
}




    .chip--dirty .caret {
        margin-right: .35rem;
    }

/* небольшой контраст всей пилюли при hover */
.chip:hover {
    background: #cecece;
}


.active-chip {
    align-items: center;
    justify-content: center;
    background: #262626;
    width: auto;
    margin-left: .35rem;
    cursor: pointer;
    opacity: .95;
    border-radius: 1.5rem;
    color: #fff;
    font-size: 11pt;
    text-align: center;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: fit-content;
}

.active-chip-label {
    padding: .3rem 0.8rem .3rem 0.8rem
}

.active-chip .active-chip-close {
    border-left: 1px solid rgba(255,255,255,.18);
    background: #0c0909;
    border-top-right-radius: 100rem;
    border-bottom-right-radius: 100rem;
    width: auto;
    margin-left: .35rem;
    cursor: pointer;
    opacity: .95;
    border-radius: 0.1rem 100rem 100rem 0.1rem;
    padding: .5rem .65rem .5rem .5rem;
    height: 100%;
    display: flex; /* Добавьте это */
    align-items: center; /* Добавьте это */
    justify-content: center; /* Добавьте это */
}

    .active-chip .active-chip-close:hover {
        background: #2f2f2f;
    }

    .active-chip .active-chip-close:active {
        background: #373737;
    }


/* ← «грязный» чип = виден крест */

/* подсветка открытого чипа */
.chip-wrap[data-open="1"] .chip {
    border-color: #7c5cff;
    box-shadow: 0 0 0 2px rgba(124,92,255,.25) inset;
}

/* меню остаётся привязанным к оболочке */
.chip-wrap {
    position: relative;
}

.chip-menu {
    position: absolute;
    left: 0;
    top: calc(100% + .5rem);
    min-width: 260px;
    max-width: min(90vw, 720px);
    background: #1a1a1a;
    color: #ddd;
    border-radius: .75rem;
    padding: .75rem;
    box-shadow: 0 16px 40px rgba(0,0,0,.45);
    display: none;
    z-index: 20;
    pointer-events: auto;
}

.chip-wrap[data-open="1"] .chip-menu {
    display: block;
}














/* слой с фоном, чуть больше радиуса — убираем белые пиксели по краям */
.wenrexa-type-card::before {
    content: "";
    position: absolute;
    inset: -2px; /* чуть вылезаем за границу */
    border-radius: inherit;
    background: inherit; /* забираем background-image c .wenrexa-type-card */
    background-size: inherit;
    background-position: inherit;
    background-repeat: inherit;
    z-index: -2;
}
/* тёмный оверлей сверху */
.wenrexa-type-card::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: rgba(0, 0, 0, 0.75);
    z-index: -1;
    transition: background .18s ease;
}

wenrexa-type-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.45);
}

.wenrexa-type-card:hover .wenrexa-type-card-ovrl {
    background: rgba(0,0,0,0.6);
}

.wenrexa-type-card--active .wenrexa-type-card-ovrl {
    background: rgba(0,0,0,0.5);
}

.wenrexa-type-card--disabled .wenrexa-type-card-ovrl {
    background: rgba(0,0,0,0.85);
}

.wenrexa-type-card--active::before {
    background: rgba(0,0,0,0.25);
}

.wenrexa-type-card--disabled::after {
    background: rgba(0,0,0,0.78);
}

.wenrexa-type-card--disabled {
    opacity: 0.35;
    cursor: default;
    box-shadow: none;
}

.wenrexa-type-card--active::after {
    background: rgba(0, 0, 0, 0.25);
}


.wenrexa-type-card-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    font-weight: 600;
    font-size: 0.92rem;
    white-space: nowrap;
}

.wenrexa-type-card-icon {
    font-size: 1.1rem;
}

.wenrexa-type-card-ovrl {
    position: absolute;
    inset: -1px; /* чуть больше, чтобы точно не было ореолов */
    border-radius: inherit;
    background: rgba(15, 15, 15, 0.82);
    pointer-events: none;
    z-index: 0;
    transition: background .18s ease;
}
/* правая часть: счётчик */
.wenrexa-type-card-count {
    font-size: 0.82rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.14);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.12);
    flex-shrink: 0;
}

.wenrexa-type-card-title {
    text-shadow: 0 1px 3px rgba(0,0,0,0.85);
    overflow: hidden;
    text-overflow: ellipsis;
}
/* левая часть: иконка + название */
.wenrexa-type-card-main {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    min-width: 0;
}

.wenrexa-type-card--disabled::before {
    background: rgba(0,0,0,0.7);
}

.wenrexa-type-card-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    font-weight: 600;
    font-size: 0.92rem;
    white-space: nowrap;
}

.wenrexa-type-card-icon {
    font-size: 1.1rem;
}

.wenrexa-type-card-title {
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

/* Базовый фон + примеры под типы.
   Тут просто подставь свои реальные картинки. */

.wenrexa-type-bg-default,
.wenrexa-type-bg-all {
    background-image: linear-gradient(135deg, #444, #111);
}

.wenrexa-type-bg-user {
    background-image: linear-gradient(135deg, #4e54c8, #24243e);
}

.wenrexa-type-bg-art,
.wenrexa-type-bg-artwork,
.wenrexa-type-bg-adopt {
    background-image: url("/images/type/artwork.jpg?v=SRugT8Fz1urIElTQd8gRattuMI4");
}

.wenrexa-type-bg-assets {
    background-image: url("/images/type/assets.jpg?v=T8CgCHdQU-yie-cT-RiwU293jR8");
}

.wenrexa-type-bg-games,
.wenrexa-type-bg-dlc,
.wenrexa-type-bg-webgame {
    background-image: url("/images/types/games.jpg");
}

.wenrexa-type-bg-sounds {
    background-image: url("/images/types/sounds.jpg");
}

.wenrexa-type-bg-templates {
    background-image: url("/images/types/templates.jpg");
}

.wenrexa-type-bg-utilities {
    background-image: url("/images/types/utilities.jpg");
}

.wenrexa-type-bg-software,
.wenrexa-type-bg-source-soft,
.wenrexa-type-bg-source-web {
    background-image: url("/images/types/software.jpg");
}

.wenrexa-type-bg-font {
    background-image: url("/images/types/font.jpg");
}

.wenrexa-type-bg-video {
    background-image: url("/images/types/video.jpg");
}

.wenrexa-type-bg-photobank {
    background-image: url("/images/types/photo.jpg");
}

.wenrexa-type-bg-plugins {
    background-image: url("/images/types/plugins.jpg");
}

.wenrexa-type-bg-platform {
    background-image: url("/images/types/platform.jpg");
}

.wenrexa-type-bg-shop,
.wenrexa-type-bg-shop-avatar,
.wenrexa-type-bg-shop-header,
.wenrexa-type-bg-shop-bg,
.wenrexa-type-bg-shop-theme {
    background-image: url("/images/types/shop.jpg");
}









.chip-wrap {
    outline: none; /* чтобы не было рамки при фокусе */
}

.chip-menu {
    display: none;
}

.chip-wrap:focus-within .chip-menu {
    display: block;
}




.wenrexa-type-strip-inner {
    display: flex;
    gap: 0.3rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    margin: 0;
    padding: 0rem 1rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
}


    .wenrexa-type-strip-inner::-webkit-scrollbar {
        display: none;
    }

.wenrexa-type-strip-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #333;
}

    .wenrexa-type-strip-arrow:hover {
        background: white;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        transform: translateY(-50%) scale(1.05);
    }

.wenrexa-type-strip-arrow--prev {
    left: 0;
}

.wenrexa-type-strip-arrow--next {
    right: 0;
}

.wenrexa-type-strip-arrow:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: translateY(-50%);
}

    .wenrexa-type-strip-arrow:disabled:hover {
        background: rgba(255, 255, 255, 0.9);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        transform: translateY(-50%);
    }


.wenrexa-type-strip {
    position: relative;
    padding: 7px 40px;
    backdrop-filter: saturate(1.05) blur(6px);
    -webkit-backdrop-filter: saturate(1.05) blur(6px);
    background: rgba(0, 0, 0, 0);
}


/* Адаптивность */
@media (max-width: 768px) {
    .wenrexa-type-strip {
        padding: 0 32px;
    }

    .wenrexa-type-card {
        max-width: 160px;
    }
}

@media (max-width: 576px) {
    .wenrexa-type-strip {
        padding: 0 28px;
    }

    .wenrexa-type-card {
        max-width: 140px;
    }
}




.wenrexa-type-strip-inner::-webkit-scrollbar {
    display: none;
}

.wenrexa-type-strip-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #333;
    font-size: 14px;
    margin: 0rem 1rem;
}

    .wenrexa-type-strip-arrow:hover {
        background: white;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        transform: translateY(-50%) scale(1.05);
    }

.wenrexa-type-strip-arrow--prev {
    left: 0;
}

.wenrexa-type-strip-arrow--next {
    right: 0;
}

.wenrexa-type-strip-arrow:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: translateY(-50%);
}

    .wenrexa-type-strip-arrow:disabled:hover {
        background: rgba(255, 255, 255, 0.9);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        transform: translateY(-50%);
    }

/* Адаптивность */
@media (max-width: 768px) {
    .wenrexa-type-strip {
        padding: 0 32px;
    }

    .wenrexa-type-card {
        max-width: 160px;
    }
}

@media (max-width: 576px) {
    .wenrexa-type-strip {
        padding: 0 28px;
    }

    .wenrexa-type-card {
        max-width: 140px;
    }
}







.wenrexa-sort-item {
    position: relative;
}

.wenrexa-sort-label {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    cursor: pointer;
    pointer-events: auto;
}







.wenrexa-loading-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: var(--stack-rail-w, 0px);
    z-index: 5000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(39, 39, 39, 0.92);
    transition: opacity .25s ease-out, visibility .25s ease-out;
    opacity: 1;
    visibility: visible;
}

    .wenrexa-loading-overlay.wenrexa-loading-overlay--hidden {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }


/* панель фильтров в центре (над карточками) */
.filter-panel-navbar {
    top: 0;
    padding-top: 0px;
    padding-bottom: 0px;
    position: sticky !important;
    top: calc(var(--topbar-h) + 0.0rem); /* под верхней шапкой Wenrexa */
    z-index: 104; /* выше карточек, ниже модалок */
    min-width: 265px;
}
/* ---- Верхняя строка: поиск + кнопка фильтров ---- */
.searchbar {
    position: sticky;
    top: 0;
    z-index: 12;
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255,255,255,.06);
    backdrop-filter: saturate(1.05) blur(6px);
    -webkit-backdrop-filter: saturate(1.05) blur(6px);
    background: rgba(0, 0, 0, 0);
}

.searchbar-inner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #313131;
    max-width: 1100px;
    margin: 0 auto;
    padding: .75rem 1rem;
}









/* сам инпут поиска */
.searchbar-input {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: .5rem;
    background: #000;
    border-radius: 2rem;
    background: #f9f9f9;
}


    .searchbar-input input {
        padding: 0.2rem 0.9rem 0.2rem 2.3rem;
        border-radius: 999px;
        border: 0;
        width: 100%;
        outline: none;
        font-size: 0.95rem;
        background: #f000;
        height: 35px;
    }

        .searchbar-input input::placeholder {
            color: rgba(28, 27, 27, 0.57);
            font-weight: 400;
        }


/* иконка лупы */
.searchbar-icon {
    position: absolute;
    left: 1.18rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14pt;
    pointer-events: none;
}

/* кнопка-переключатель фильтров справа */
.searchbar-filters-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.15);
    background: rgba(0,0,0,.8);
    color: rgba(255,255,255,.8);
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, transform .1s ease;
}

    .searchbar-filters-btn i {
        font-size: 1rem;
    }

    .searchbar-filters-btn:hover {
        background: #fff;
        color: #111;
        border-color: #fff;
        transform: translateY(-1px);
    }

/* чекбокс-переключатель (прячем) */
#FiltersToggle {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* по умолчанию фильтры видны */
.filterbar,
.wenrexa-type-strip,
#ActiveFilters {
    display: block;
}



/* Когда свернуто — bootstrap сам ставит .collapsed */
.searchbar-filters-btn.collapsed {
    background-color: #fff !important;
    color: #111 !important;
    border-color: #fff !important;
}

/* Когда развернуто */
.searchbar-filters-btn {
    background: rgba(0,0,0,.8);
    color: rgba(255,255,255,.85);
}

.wenrexa-type-card {
 
    max-width: 210px;
    position: relative;
    flex: 0 0 auto;
    height: 35px;
    border: 0;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;
    background: transparent;
    border-radius: 999px;
    overflow: hidden;
    color: #fff;
    text-align: left;
    transition: transform .15s ease, box-shadow .15s ease;
}
}

.wenrexa-type-card-bg {
    position: absolute;
    inset: -2px; /* чуть больше, чтобы точно перекрыть края */
    border-radius: inherit;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
}

/* твои классы фонов – переназначаем сюда */
.wenrexa-type-bg-default,
.wenrexa-type-bg-all {
    background-image: linear-gradient(135deg, #444, #111);
}

.wenrexa-type-bg-art,
.wenrexa-type-bg-artwork,
.wenrexa-type-bg-adopt {
    background-image: url("/images/type/artwork.jpg?v=SRugT8Fz1urIElTQd8gRattuMI4");
}

/* и дальше все wenrexa-type-bg-* классы оставляешь как есть */
/* Блок приглашения */
.wenrexa-signup-callout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(0,0,0,0.55);
    border-radius: 1rem 1rem 0rem 0rem;
    padding: 0.4rem 1rem;
    margin-bottom: 0.1rem;
    color: #fff;
}

/* Текст */
.wenrexa-signup-text {
    font-size: 0.92rem;
    font-weight: 500;
    line-height: 1.35;
    margin-right: 1rem;
    flex: 1 1 auto;
}

/* Кнопка регистрации */
.wenrexa-signup-btn {
    white-space: nowrap;
    padding: 0.55rem 1.2rem;
    font-weight: 400;
    border-radius: 8px;
    font-size: 0.9rem;
    background: #ff692d;
}

/* Мобильная адаптация */
@media (max-width: 576px) {
    .wenrexa-signup-callout {
        flex-direction: column;
        gap: 0.7rem;
        text-align: center;
    }

    .wenrexa-signup-text {
        margin-right: 0;
    }
}
























/* =============================================
   WENREXA PICKER — Universal chip selector
   Usage: Genres, Categories, Tags, Features, etc.
   ============================================= */

.wenrexa-picker-container {
    max-width: 680px;
}

.wenrexa-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.wenrexa-picker-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .wenrexa-picker-title h5 {
        font-size: 17px;
        font-weight: 600;
        color: #f5f5f7;
        margin: 0;
    }

.wenrexa-picker-counter {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: #2c2c2e;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: #86868b;
}

.wenrexa-picker-counter-current {
    color: #f5f5f7;
    font-weight: 600;
}

.wenrexa-picker-counter-full {
    background: rgba(52, 199, 89, 0.15);
}

    .wenrexa-picker-counter-full .wenrexa-picker-counter-current {
        color: #34c759;
    }

/* Search */
.wenrexa-picker-search {
    position: relative;
    margin-bottom: 24px;
}

.wenrexa-picker-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #6e6e73;
    font-size: 14px;
    pointer-events: none;
}

.wenrexa-picker-search-input {
    width: 100%;
    padding: 12px 14px 12px 40px;
    background: #1c1c1e;
    border: 1px solid #38383a;
    border-radius: 12px;
    font-size: 15px;
    color: #f5f5f7;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

    .wenrexa-picker-search-input::placeholder {
        color: #6e6e73;
    }

    .wenrexa-picker-search-input:focus {
        border-color: #0a84ff;
        box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.15);
    }

/* Sections */
.wenrexa-picker-section {
    margin-bottom: 24px;
}

.wenrexa-picker-section-label {
    font-size: 12px;
    font-weight: 500;
    color: #86868b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.wenrexa-picker-selected-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 40px;
    padding: 12px;
    background: #1c1c1e;
    border-radius: 12px;
    border: 1px solid #38383a;
}

.wenrexa-picker-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    color: #48484a;
    font-size: 14px;
}

.wenrexa-picker-available-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Chips */
.wenrexa-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #2c2c2e;
    border: 1px solid transparent;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    color: #f5f5f7;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
    animation: wenrexa-chip-in 0.2s ease;
}

    .wenrexa-chip:hover {
        background: #3a3a3c;
    }

    .wenrexa-chip.is-selected {
        background: rgba(10, 132, 255, 0.15);
        border-color: rgba(10, 132, 255, 0.3);
        color: #0a84ff;
    }

        .wenrexa-chip.is-selected:hover {
            background: rgba(10, 132, 255, 0.25);
        }

.wenrexa-chip-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 12px;
    transition: all 0.15s;
}

    /* Add icon (available state) */
    .wenrexa-chip-icon.is-add {
        background: transparent;
        color: #86868b;
    }

.wenrexa-chip:hover .wenrexa-chip-icon.is-add {
    color: #34c759;
}

/* Remove icon (selected state) */
.wenrexa-chip-icon.is-remove {
    background: rgba(10, 132, 255, 0.2);
    color: #0a84ff;
}

.wenrexa-chip.is-selected:hover .wenrexa-chip-icon.is-remove {
    background: #ff453a;
    color: #fff;
}

/* Locked state */
.wenrexa-chip.is-locked {
    opacity: 0.4;
    cursor: not-allowed;
}

    .wenrexa-chip.is-locked:hover {
        background: #2c2c2e;
    }

    .wenrexa-chip.is-locked .wenrexa-chip-icon {
        color: #48484a;
    }

/* Busy state */
.wenrexa-chip.is-busy {
    opacity: 0.6;
    pointer-events: none;
}

/* Messages */
.wenrexa-picker-message {
    display: none;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
    margin-top: 16px;
}

    .wenrexa-picker-message.is-visible {
        display: block;
    }

    .wenrexa-picker-message.is-warning {
        background: rgba(255, 149, 0, 0.1);
        color: #ff9500;
    }

    .wenrexa-picker-message.is-error {
        background: rgba(255, 69, 58, 0.1);
        color: #ff453a;
    }

    .wenrexa-picker-message.is-info {
        background: rgba(10, 132, 255, 0.1);
        color: #0a84ff;
    }

.wenrexa-picker-no-edit {
    padding: 12px 16px;
    background: rgba(255, 69, 58, 0.1);
    border-radius: 10px;
    font-size: 13px;
    color: #ff453a;
}

/* Animation */
@keyframes wenrexa-chip-in {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}
















:root {
 
   
    --accent-blue: #e52e2e;
    --accent-green: #3fb950;
    --accent-orange: #ffa657;
    --accent-red: #f85149;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
}














.badges-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0.4rem 0;
}

.badge {
    font-size: 11px;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    border: 1px solid;
}

.badge-kind {
    background: rgba(88, 166, 255, 0.1);
    border-color: var(--accent-blue);
    color: var(--accent-blue);
}

.badge-status {
    background: rgba(63, 185, 80, 0.1);
    border-color: var(--accent-green);
    color: var(--accent-green);
}

.badge-license {
    background: rgba(255, 166, 87, 0.1);
    border-color: var(--accent-orange);
    color: var(--accent-orange);
}

.badge-exclusive {
    background: rgba(248, 81, 73, 0.1);
    border-color: var(--accent-red);
    color: var(--accent-red);
}



.wenrexa-type-card-bg.wenrexa-type-card--active {
    opacity: 0.9;
    background-image: linear-gradient(135deg, #4440, #89ed6573);
    z-index: 1;
}












.wenrexa-list-myproducts {
    background: var(--wenrexa-pin-overlay-bg);
    color: #fff;
  
    border-radius: 1rem;
}




.wenrexa-masonry-grid.wenrexa-grid-list {
    display: grid !important;
    grid-template-columns: minmax(0, 1000px) !important;
    justify-content: start !important;
    gap: 4px !important;
    height: auto !important;
    padding:1rem
}

    .wenrexa-masonry-grid.wenrexa-grid-list > .wenrexa-masonry-item {
        position: relative !important;
        transform: none !important;
        width: 100% !important;
    }




/* =========================
   WENREXA: Grid fallback + MiniMasonry
   ========================= */

/* По умолчанию (и на мобилке) — нормальный Grid */
.wenrexa-masonry-grid {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

/* Чуть шире — всё равно Grid (приятный фоллбек, пока Masonry не включен) */
@media (min-width: 768px) {
    .wenrexa-masonry-grid {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 16px;
    }
}

/* Masonry включается ТОЛЬКО когда JS добавил класс */
.wenrexa-masonry-grid.wenrexa-masonry-enabled {
    position: relative;
    display: block;
}

    /* В режиме Masonry элементы абсолютно позиционируются */
    .wenrexa-masonry-grid.wenrexa-masonry-enabled .wenrexa-masonry-item {
        position: absolute;
        display: block;
        overflow: hidden;
        /* 1) убираем анимации полностью */
        animation: none !important;
        transition: none !important;
        /* 2) чтобы не было “кучи” на (0,0) — не показываем до первого layout */
        visibility: hidden;
        border-radius: 1rem;
    }

    .wenrexa-masonry-grid.wenrexa-masonry-enabled.wenrexa-masonry-ready .wenrexa-masonry-item {
        visibility: visible;
    }

    /* Новые карточки при дозагрузке прячем до раскладки */
    .wenrexa-masonry-grid.wenrexa-masonry-enabled .wenrexa-masonry-item.wenrexa-masonry-pending {
        visibility: hidden;
    }

/* Когда Masonry выключен — сбрасываем transform'ы */
.wenrexa-masonry-grid:not(.wenrexa-masonry-enabled) .wenrexa-masonry-item {
    position: relative !important;
    transform: none !important;
    width: 100% !important;
    content-visibility: auto;
    contain-intrinsic-size: auto 350px;
}

/* На всякий — если где-то осталась ваша animation-show-1 */
.wenrexa-masonry-item.animation-show-1 {
    animation: none !important;
    transition: none !important;
}

/* ===== Ratio (единый источник правды) ===== */
.wenrexa-masonry-item {
    --wenrexa-card-ratio: 1 / 1;
}

    /* buckets (если где-то не пришла переменная, либо вы хотите “корзины”) */
    .wenrexa-masonry-item.ratio-2-3 {
        --wenrexa-card-ratio: 2 / 3;
    }

    .wenrexa-masonry-item.ratio-3-4 {
        --wenrexa-card-ratio: 3 / 4;
    }

    .wenrexa-masonry-item.ratio-1-1 {
        --wenrexa-card-ratio: 1 / 1;
    }

    .wenrexa-masonry-item.ratio-4-3 {
        --wenrexa-card-ratio: 4 / 3;
    }

    .wenrexa-masonry-item.ratio-16-9 {
        --wenrexa-card-ratio: 16 / 9;
    }

    .wenrexa-masonry-item.ratio-21-9 {
        --wenrexa-card-ratio: 21 / 9;
    }

    /* Внутренний постер всегда имеет предсказуемую высоту ДО загрузки img */
    .wenrexa-masonry-item .wenrexa-poster-inner {
        width: 100%;
        aspect-ratio: var(--wenrexa-card-ratio);
    }

        .wenrexa-masonry-item .wenrexa-poster-inner img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
/* Mobile row: не растягиваем poster по высоте body */
.wenrexa-product-row-link {
    align-items: flex-start;
}

/* фиксируем ширину постера и НЕ даём ему растягиваться */
.wenrexa-product-row-poster {
    flex: 0 0 108px; /* подбери: 96/104/112/120 */
    width: 108px;
}

/* постер внутри — ровно по своему ratio */
.wenrexa-product-row-poster-inner {
    width: 100%;
    aspect-ratio: var(--wenrexa-card-ratio, 3 / 4);
    overflow: hidden;
    border-radius: 10px; /* если надо */
}

    /* img заполняет постер */
    .wenrexa-product-row-poster-inner img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

/* тело справа: пусть не раздувает карточку безлимитно */
.wenrexa-product-row-body {
    min-width: 0; /* важно для обрезки текста */
}

/* ограничиваем заголовок (иначе он и раздувает высоту) */
.wenrexa-product-row-title-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* 1 или 2 строки */
    overflow: hidden;
}

/* мета тоже можно в 1 строку */
.wenrexa-product-row-meta {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}












.wenrexa-masonry-grid2 {
    display: grid;
    grid-template-columns: 1fr; /* мобила: 1 в ряд */
    gap: 0.75rem;
    align-items: start;
}

/* md+ : 2 в ряд */
@media (min-width: 768px) {
    .wenrexa-masonry-grid2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* чтобы элементы нормально ужимались */
.wenrexa-masonry-grid2 > * {
    min-width: 0;
}

/* маяк бесконечной подгрузки — на всю ширину */
.wenrexa-masonry-grid2 #endContentLoading {
    grid-column: 1 / -1;
}






































.wenrexa-save-status {
    display: flex;
    align-items: center;
    gap: .5rem;
 

    font-size: .875rem;
    line-height: 1;
    user-select: none;
}

.wenrexa-save-status-icon {
    width: 1rem;
    height: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.wenrexa-save-status[data-state="saving"] {

    color:#fff
}

.wenrexa-save-status[data-state="saved"] {
    color: #fff
}

.wenrexa-save-status[data-state="error"] {
    background: rgba(220,53,69,.18);
    border-color: rgba(220,53,69,.35);
    color: red
}
.wenrexa-save-status-text {
    color: #cecece;
}
.sun-editor .se-toolbar {
    outline: 1px solid #2b2b2b!important;
}
.sun-editor .se-resizing-bar {
    border-top: 1px solid #3c3c3c !important;
}





























/* Фиксированные колонки (работают на всех устройствах) */
.masonry-cols-1 {
    column-count: 1 !important;
}

.masonry-cols-2 {
    column-count: 2 !important;
}

.masonry-cols-3 {
    column-count: 3 !important;
}

.masonry-cols-4 {
    column-count: 4 !important;
}

.masonry-cols-5 {
    column-count: 5 !important;
}

.masonry-cols-6 {
    column-count: 6 !important;
}
/* Адаптивные колонки - MOBILE FIRST подход */
/* Extra small devices (phones, less than 576px) - уже задано по умолчанию */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .masonry-cols-sm-1 {
        column-count: 1 !important;
    }

    .masonry-cols-sm-2 {
        column-count: 2 !important;
    }

    .masonry-cols-sm-3 {
        column-count: 3 !important;
    }

    .masonry-cols-sm-4 {
        column-count: 4 !important;
    }

    .masonry-cols-sm-5 {
        column-count: 5 !important;
    }

    .masonry-cols-sm-6 {
        column-count: 6 !important;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .masonry-cols-md-1 {
        column-count: 1 !important;
    }

    .masonry-cols-md-2 {
        column-count: 2 !important;
    }

    .masonry-cols-md-3 {
        column-count: 3 !important;
    }

    .masonry-cols-md-4 {
        column-count: 4 !important;
    }

    .masonry-cols-md-5 {
        column-count: 5 !important;
    }

    .masonry-cols-md-6 {
        column-count: 6 !important;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .masonry-cols-lg-1 {
        column-count: 1 !important;
    }

    .masonry-cols-lg-2 {
        column-count: 2 !important;
    }

    .masonry-cols-lg-3 {
        column-count: 3 !important;
    }

    .masonry-cols-lg-4 {
        column-count: 4 !important;
    }

    .masonry-cols-lg-5 {
        column-count: 5 !important;
    }

    .masonry-cols-lg-6 {
        column-count: 6 !important;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .masonry-cols-xl-1 {
        column-count: 1 !important;
    }

    .masonry-cols-xl-2 {
        column-count: 2 !important;
    }

    .masonry-cols-xl-3 {
        column-count: 3 !important;
    }

    .masonry-cols-xl-4 {
        column-count: 4 !important;
    }

    .masonry-cols-xl-5 {
        column-count: 5 !important;
    }

    .masonry-cols-xl-6 {
        column-count: 6 !important;
    }
}

/* XXL devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
    .masonry-cols-xxl-1 {
        column-count: 1 !important;
    }

    .masonry-cols-xxl-2 {
        column-count: 2 !important;
    }

    .masonry-cols-xxl-3 {
        column-count: 3 !important;
    }

    .masonry-cols-xxl-4 {
        column-count: 4 !important;
    }

    .masonry-cols-xxl-5 {
        column-count: 5 !important;
    }

    .masonry-cols-xxl-6 {
        column-count: 6 !important;
    }
}







/* MASONRY СЕТКА - ОТДЕЛЬНЫЕ СТИЛИ */
.art-masonry {
    margin-bottom: 3rem;
    width: 100%;
}

/* Базовый класс masonry */
/* Базовый класс masonry */
.masonry-columns {
    column-count: 2; /* значение по умолчанию */
    column-gap: 1.5rem;
    width: 100%;
}

    /* Базовые стили masonry элементов */
    .masonry-columns .masonry-item {
        break-inside: avoid;
        margin-bottom: 1.5rem;
        display: inline-block;
        width: 100%;
    }

.masonry-content {
    width: 100%;
    position: relative;
}

.masonry-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
}


/* Соотношения сторон для masonry */
.masonry-item.ratio-16-9 {
    aspect-ratio: 16/9;
}

.masonry-item.ratio-4-3 {
    aspect-ratio: 4/3;
}

.masonry-item.ratio-1-1 {
    aspect-ratio: 1/1;
}

.masonry-item.ratio-vertical {
    aspect-ratio: 2/3;
}
/* Описание арта — слой поверх изображения */
.art-description {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    backdrop-filter: blur(10px);
    padding: 2rem 2rem 2.8rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    z-index: 15;
    /* Скрыто по умолчанию (без JS) */
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}

.art-media-frame {
    max-height: calc(100vh - var(--topbar-h) - (var(--topbar-gap) * 2));
    max-width: 100%;
    min-height: 98px;
    display: flex;
    align-items: center;
    justify-content: center;
}
    /* Показываем описание, когда курсор над блоком с картинкой */
    .art-media-frame:hover .art-description {
        opacity: 1;
        pointer-events: auto;
    }

/* Больше не нужно полагаться на .active-класс */
.art-item.active .art-description,
.masonry-item.active .art-description {
    display: flex; /* можно оставить как есть, но уже не требуется */
}


/* Адаптивные классы соотношений сторон */
.ratio-16-9 {
    aspect-ratio: 16/9;
}

.ratio-4-3 {
    aspect-ratio: 4/3;
}

.ratio-1-1 {
    aspect-ratio: 1/1;
}

.ratio-vertical {
    aspect-ratio: 2/3;
}

/* Улучшенные ховер-эффекты */
.masonry-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
}

/* Контролы для masonry */
.masonry-item .art-controls {
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    display: flex;
    gap: 0.5rem;
    z-index: 20;
}
/* Адаптивность для мобильных */
@media (max-width: 1200px) {
    .masonry-columns {
        column-count: 2;
    }
}

@media (max-width: 768px) {
    .masonry-columns {
        column-count: 1;
    }
}

/* Плавная анимация появления */
.masonry-item {
    animation: fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== /wwwroot/css/wenrexa-root.css ===== */
/* Глобальные токены управления макетом и мега‑меню */

:root {
    /* Верхняя панель (navbar) */
    --topbar-h: 0px; /* 56 / 64 / 72 / 88 — высота шапки  (experiment: topbar hidden) */
    --topbar-gap: .75rem; /* отступ контента от шапки */
    --topbar-bg: color-mix(in srgb, #09090c 92%, #09090c);
    --topbar-border: color-mix(in srgb, #1a1b1f 92%, #02020200);
    /* Глобальная ширина оболочки */
    --shell-max: 99.00%; /* можно поставить, например, 1360px */
    --shell-side-pad: 5px; /* «поля» внутри, когда shell-max < 100% */
    /* Левая вертикальная навигация (V5 expanded / V4 collapsed) */
    --stack-rail-w: 180px;
    --stack-rail-collapsed-w: 90px;
    --rail-accent: #e8700a;
    --rail-accent-bg: rgba(232, 112, 10, .06);
    --rail-dot-size: 5px;
    --vnav-radius: 10rem;
    --vnav-gap: .15rem;
    /* Правая панель (artSidePanel) — фикс на md+ */
    --art-rail-base: 300px;
    --art-rail-w: var(--art-rail-base);
    /* Дополнительная правая колонка */
    --sec-rail-base: 300px;
    --sec-rail-w: var(--sec-rail-base);
    --rail-scroll-pad: 0px;
    /* Поиск в топбаре */
    --search-max-w: 960px;
    /* Цвета/акценты */
    --brand-accent: #76e0b2;
    --panel-bg: rgba(255,255,255,.03); /* фон карточек/панелей на тёмной теме */
    /* ===== Токены мега‑меню (белая панель) ===== */
    --mega-max-w: 1280px; /* ограничение ширины контента */
    --mega-pad: 1.25rem; /* внутренние поля панели */
    --mega-bg: #ffffff; /* БЕЛЫЙ фон */
    --mega-border: #e5e7eb; /* светлая рамка */
    --mega-radius: 12px; /* скругление нижних углов (desktop) */
    --mega-shadow: 0 24px 60px rgba(0,0,0,.35); /* тень панели */
    --mega-text: #111827; /* цвет текста на панели */
    --mega-muted: #6b7280; /* вторичный цвет текста */
    --mega-icon-bg: #f1f5f9; /* фон «плашек» под иконками */
    --mega-inner-bq: #fff; /* фон под меню */
    --mega-gap: 16px; /* отступ снизу */
    --mega-safe-bottom: env(safe-area-inset-bottom, 0px);
    --edge-pad: 16px; /* минимальный отступ панели от краёв экрана */
}

/* ===== /wwwroot/css/wenrexa-shell.css ===== */
/* Макет, топбар, мега‑меню (без кастомного JS), rails и служебные блоки */

/* ——— Контейнер, ограничивающий ширину макета ——— */
.shell-max {
    max-width: var(--shell-max);
    margin-inline: auto;
    padding-inline: clamp(2px, 2vw, var(--shell-side-pad));
    overflow-x: clip;
}

/* ——— Отступ контента от фиксированной шапки ——— */
/* EXPERIMENT: topbar hidden — no offset needed */
.with-topbar-offset {
    padding-top: 0;
}

/* ——— Топбар: высота и «стекло» ——— */
/* EXPERIMENT: topbar hidden — navigation moved to left-rail */
.navbar.fixed-top {
    display: none !important;
}

.navbar.fixed-top--original {
    height: var(--topbar-h);
    min-height: var(--topbar-h);
    font-size: 11pt;
    font-weight: 600;
}

.navbar.wen-top {
    backdrop-filter: saturate(1.05) blur(6px);
    -webkit-backdrop-filter: saturate(1.05) blur(6px);
    background: var(--topbar-bg);
    border-bottom: 1px solid var(--topbar-border);
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

    .navbar.wen-top .navbar-brand-badge {
        width: 28px;
        height: 28px;
        display: grid;
        place-items: center;
        background: linear-gradient(180deg, var(--brand-accent), #2bd5a2);
        color: #0b1720;
        font-weight: 900;
        border-radius: .6rem;
    }

    .navbar.wen-top .nav-link {
        color: #fff;
        font-weight: 500;
        transition: color .15s ease, opacity .15s;
    }

        .navbar.wen-top .nav-link:hover,
        .navbar.wen-top .nav-link.show,
        .navbar.wen-top .nav-link.active {
            color: #fff;
        }

/* ——— Обычные выпадающие меню (не мега‑меню) ——— */
.navbar .dropdown-menu:not(.dropdown-mega) {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 2000;
    margin-top: .25rem;
    background: var(--bs-dark-bg-subtle, #2a2a2a);
    border-radius: .75rem;
    border: 1px solid rgba(255,255,255,.1);
}

/* ——— Центральный поиск в топбаре ——— */
.top-search {
    flex: 1 1 0;
    min-width: 180px;
    display: flex;
    justify-content: center;
}

    .top-search .search-wrap {
        width: 100%;
        max-width: var(--search-max-w);
        box-sizing: border-box; /* страхуемся от переполнения */
    }
    .top-search .form-control {
        background: rgba(10,10,10,.78) !important;
        color: #fff;
        border: 1px solid rgba(255,255,255,.15);
        border-radius: 1rem !important;
        font-size: 10pt;
    }

        .top-search .form-control::placeholder {
            color: rgba(255,255,255,.6);
        }

    .top-search .dropdown-menu {
        width: 100%;
        max-height: min(60vh,520px);
        overflow: auto;
        background: var(--panel-bg);
        border: 1px solid var(--bs-border-color);
        border-top: none;
        border-radius: 0 0 .75rem .75rem;
    }

/* ——— Богатые пункты в дропдаунах (аккаунт/язык) ——— */
.menu-rich .dropdown-item {
    display: grid;
    grid-template-columns: 1.75rem 1fr;
    gap: .5rem;
    align-items: center;
    padding: .5rem .75rem;
    white-space: normal;
}

    .menu-rich .dropdown-item .bi {
        font-size: 1.1rem;
        opacity: .85;
    }

    .menu-rich .dropdown-item small {
        display: block;
        color: var(--bs-secondary-color);
        line-height: 1.1;
    }

/* ——— «Липкие» рельсы (legacy — kept for right rail) ——— */
.sticky-rail {
    position: sticky;
    top: 0;
}

/* ================================================================
   LEFT-RAIL — V5 expanded / V4 collapsed
   ================================================================ */
.left-rail {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--stack-rail-w);
    z-index: 200;
    border-right: 1px solid rgba(255,255,255,.06);
    background: #080808;
    display: flex;
    flex-direction: column;
    transition: width .25s ease;
}

/* ── Falling-cubes background (GPU-only: transform + opacity) ── */
.wr-cubes {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
    contain: strict;
}
.left-rail .sticky-rail { position: relative; z-index: 1; }

.wr-cubes i {
    position: absolute;
    top: 0;
    border-radius: 4px;
    background: rgba(255,255,255,.16);
    will-change: transform, opacity;
    backface-visibility: hidden;
    animation: wrCubeFall linear infinite backwards;
    display: block;
    font-style: normal;
}
.wr-cubes i:nth-child(1)  { left:8%;   width:32px; height:32px; animation: wrCubeFallA 14s   linear 0s    infinite backwards; background:rgba(255,255,255,.28); }
.wr-cubes i:nth-child(2)  { left:42%;  width:28px; height:28px; animation: wrCubeFallB 17s   linear 1.5s  infinite backwards; }
.wr-cubes i:nth-child(3)  { left:22%;  width:36px; height:36px; animation: wrCubeFallC 13s   linear 0.5s  infinite backwards; background:rgba(255,255,255,.26); }
.wr-cubes i:nth-child(4)  { left:68%;  width:24px; height:24px; animation: wrCubeFallA 18s   linear 3s    infinite backwards; }
.wr-cubes i:nth-child(5)  { left:55%;  width:30px; height:30px; animation: wrCubeFallB 15.5s linear 2s    infinite backwards; background:rgba(255,255,255,.24); }
.wr-cubes i:nth-child(6)  { left:78%;  width:26px; height:26px; animation: wrCubeFallC 16s   linear 4s    infinite backwards; }

@keyframes wrCubeFallA {
    0%   { transform: translateY(-40px)  rotate(0deg)   scale(.5);  opacity:0;   }
    5%   { transform: translateY(2vh)    rotate(30deg)  scale(.7);  opacity:.30; }
    50%  { transform: translateY(50vh)   rotate(180deg) scale(1.1); opacity:.35; }
    85%  { transform: translateY(85vh)   rotate(310deg) scale(.5);  opacity:.15; }
    100% { transform: translateY(102vh)  rotate(360deg) scale(.3);  opacity:0;   }
}
@keyframes wrCubeFallB {
    0%   { transform: translateY(-40px)  rotate(20deg)   scale(.4);  opacity:0;   }
    5%   { transform: translateY(2vh)    rotate(-15deg)  scale(.65); opacity:.28; }
    50%  { transform: translateY(50vh)   rotate(-160deg) scale(1.0); opacity:.32; }
    85%  { transform: translateY(85vh)   rotate(-290deg) scale(.5);  opacity:.12; }
    100% { transform: translateY(102vh)  rotate(-360deg) scale(.3);  opacity:0;   }
}
@keyframes wrCubeFallC {
    0%   { transform: translateY(-40px)  rotate(-30deg)  scale(.55); opacity:0;   }
    5%   { transform: translateY(2vh)    rotate(50deg)   scale(.75); opacity:.25; }
    50%  { transform: translateY(50vh)   rotate(220deg)  scale(.95); opacity:.30; }
    85%  { transform: translateY(85vh)   rotate(380deg)  scale(.45); opacity:.13; }
    100% { transform: translateY(102vh)  rotate(450deg)  scale(.3);  opacity:0;   }
}

@media (prefers-reduced-motion: reduce) {
    .wr-cubes { display: none; }
}

    /* Inner scrollable area */
    .left-rail .sticky-rail {
        flex: 1 1 0;
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        padding: .35rem 0;
        scrollbar-width: thin;
        scrollbar-color: rgba(255,255,255,.12) transparent;
    }

    .left-rail .sticky-rail::-webkit-scrollbar { width: 3px; }
    .left-rail .sticky-rail::-webkit-scrollbar-track { background: transparent; }
    .left-rail .sticky-rail::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 2px; }

    .left-rail .vnav {
        gap: var(--vnav-gap);
        align-items: stretch;
    }

    .left-rail .vnav .wenrexa-subctx-wrap {
        width: 100%;
    }

    /* === V5 Expanded: row layout (icon + text) === */
    .left-rail .vnav .nav-link {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 12px;
        width: 100%;
        padding: 9px 16px;
        border-radius: 0;
        color: #b1b1b1;
        text-decoration: none;
        position: relative;
        transition: color .2s ease, background .2s ease;
    }

    .left-rail .vnav .nav-link i,
    .left-rail .vnav .nav-link .bi {
        font-size: 1.1rem;
        line-height: 1;
        flex-shrink: 0;
        width: 20px;
        text-align: center;
    }

    .left-rail .vnav .nav-link small {
        font-size: .78rem;
        font-weight: 500;
        letter-spacing: .01em;
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
        opacity: 1;
        transition: opacity .2s ease;
    }

    .left-rail .vnav .nav-link:hover {
        color: #999;
        background: rgba(255,255,255,.02);
    }

    .left-rail .vnav .nav-link.active {
        color: var(--rail-accent);
        background: var(--rail-accent-bg);
    }

/* === V4 Collapsed: column layout, dot indicator === */
.left-rail--collapsed {
    --stack-rail-w: var(--stack-rail-collapsed-w);
    width: var(--stack-rail-collapsed-w);
}

    .left-rail--collapsed .sticky-rail { padding: .35rem .2rem; }

    .left-rail--collapsed .vnav .nav-link {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 8px 0;
        gap: 0;
    }

    .left-rail--collapsed .vnav .nav-link i,
    .left-rail--collapsed .vnav .nav-link .bi {
        font-size: 1.2rem;
        width: auto;
    }

    .left-rail--collapsed .vnav .nav-link small {
        display: block;
        font-size: 9px;
        font-weight: 600;
        letter-spacing: .05em;
        text-transform: uppercase;
        margin-top: 3px;
        color: #b1b1b1;
        text-align: center;
    }

    .left-rail--collapsed .vnav .nav-link:hover {
        color: #888;
        background: transparent;
    }

    .left-rail--collapsed .vnav .nav-link.active {
        color: #fff;
        background: transparent;
    }

    .left-rail--collapsed .vnav .nav-link.active::after {
        content: '';
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        width: var(--rail-dot-size);
        height: var(--rail-dot-size);
        border-radius: 50%;
        background: var(--rail-accent);
    }

    .left-rail--collapsed .vnav-collapse-btn i {
        transition: transform .25s ease;
        transform: rotate(180deg);
    }

/* Section label (hidden when collapsed) */
.wenrexa-rail-section-label {
    font-size: 8px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #2a2a2a;
    padding: 12px 16px 4px;
    display: block;
}
.left-rail--collapsed .wenrexa-rail-section-label { display: none; }

/* ================================================================
   MAIN CONTENT — offset by sidebar width (not flex, margin-based)
   ================================================================ */
.main-col {
    min-width: 0;
    flex: 1 1 0;
    margin-top: 0;
    overflow-x: clip;
}

/* The grid container needs left margin to clear the fixed sidebar.
   max-width shrinks to prevent horizontal overflow. */
.container-fluid.shell-max {
    margin-left: var(--stack-rail-w);
    margin-right: 0;
    max-width: calc(100% - var(--stack-rail-w));
    transition: margin-left .2s ease, max-width .2s ease;
}

/* When rail is collapsed, reduce the margin */
.left-rail--collapsed ~ .container-fluid.shell-max,
body:has(.left-rail--collapsed) .container-fluid.shell-max {
    margin-left: var(--stack-rail-collapsed-w);
    max-width: calc(100% - var(--stack-rail-collapsed-w));
}

/* The left-rail is no longer part of the flex row — hide it from grid */
.row.g-3 > .left-rail {
    display: none;
}

/* ——— Правая арт‑панель ——— */
@media (min-width: 768px) {
    #artSidePanelCol {
        flex: 0 0 var(--art-rail-w);
        max-width: var(--art-rail-w);
    }
}

#artSidePanel {
    background: var(--panel-bg);
    border: 0 !important;
    box-shadow: none !important;
    border-radius: .75rem;
}

@media (max-width: 1200px) {
    #artSidePanelCol {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .main-col {
        order: 2;
        width: 100%;
    }

    #artSidePanelCol {
        order: 3;
    }
}

/* ——— Mobile: same behavior as desktop (expanded/collapsed via toggle) ——— */
@media (max-width: 767.98px) {
    .container-fluid.shell-max {
        margin-left: var(--stack-rail-w);
        max-width: calc(100% - var(--stack-rail-w));
    }
}






/* ——— Логотип ——— */
.brand-logo {
    height: calc(var(--topbar-h) - 39px);
    display: flex;
    align-items: center;
}

    .brand-logo img {
        height: 100%;
        width: auto;
        object-fit: contain;
    }

/* ===================================================================== */
/* =========================  М Е Г А ‑ М Е Н Ю  ======================= */
/* ===================================================================== */
/* Десктоп (≥992px): фиксированная белая панель под шапкой на всю ширину */
/* Внешний контейнер — ТОЛЬКО позиционирование, без визуала */
.navbar .dropdown-menu.dropdown-mega,
.navbar .dropdown-menu.dropdown-mega[data-bs-popper] {
    position: fixed !important;
    top: var(--topbar-h) !important;
    inset-inline: 0 !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    margin: 0 !important;
    z-index: 2100;
    --bs-dropdown-min-width: 0;
    min-width: 0;
    padding: 0 !important;
    background: transparent !important;
    color: var(--mega-text);
    border: none !important;
    border-radius: 0;
    box-shadow: none !important;
    overflow-x: clip;
}

    .navbar .dropdown-menu.dropdown-mega.show {
        display: block;
    }

/* Заголовки секций */
.dropdown-mega .section-title {
    font-size: .75rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--mega-muted);
    margin: .1rem 0 .2rem
}

/* Пункты меню: иконка + текст, «кнопка» на всю строку */
.dropdown-mega .list-unstyled > li > a {
    display: grid;
    grid-template-columns: 2.05rem 1fr;
    align-items: center;
    gap: .5rem;
    padding: .5rem .6rem;
    border-radius: .6rem;
    text-decoration: none;
    color: inherit;
    transition: background .12s ease, filter .12s ease;
}

    .dropdown-mega .list-unstyled > li > a .bi {
        width: 2.05rem;
        height: 2.05rem;
        display: grid;
        place-items: center;
        border-radius: .5rem;
        font-size:15pt;
        background: var(--mega-icon-bg);
    }

    .dropdown-mega .list-unstyled > li > a small {
        display: block;
        line-height: 1.15;
        color: var(--mega-muted);
    }

    .dropdown-mega .list-unstyled > li > a:hover {
        background: #f7f7f7;
    }

/* ——— Мобильный режим (<992px): меню становится вертикальным в коллапсе ——— */
@media (max-width: 991.98px) {

    .navbar .navbar-collapse {
        min-width: 0;
        flex-wrap: nowrap;
        background: #131313;
        padding: 2rem;
        border-radius: 2rem;
    }
    .navbar .dropdown-menu.dropdown-mega {
        padding: 0 !important; /* внешний rail без отступов */
    }

    .dropdown-menu.dropdown-mega > .mega-wrap,
    .dropdown-menu.dropdown-mega > .mega-inner {
        max-width: none;
        border-radius: .75rem;
        border-top: 1px solid var(--mega-border); /* т.к. уже не прилипает к шапке */
        padding: .5rem;

    }

    .dropdown-menu.dropdown-mega .mega-inner {
        grid-template-columns: 1fr;
        gap: .5rem;
    }
}

 












/* Тоггл аккаунта в топбаре */
.navbar .acc-toggle .avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    flex: 0 0 auto;
    background: #0b0b0b;
    border: 1px solid rgba(255,255,255,.12)
}

    .navbar .acc-toggle .avatar img {
        width: 100%;
        height: 100%;
        object-fit: contain
    }

.navbar .acc-toggle .money-badge {
    font-size: .75rem;
    font-weight: 700;
    padding: .15rem .5rem;
    border-radius: .5rem;
    background: color-mix(in srgb, var(--brand-accent) 18%, #fff);
    border: 1px solid color-mix(in srgb, var(--brand-accent) 35%, #fff);
    color: #0b1720
}

/* Кнопка в виде пункта меню (для logout) */
.dropdown-as-link {
    display: grid;
    grid-template-columns: 2rem 1fr;
    gap: .5rem;
    align-items: center;
    padding: .35rem .5rem;
    width: 100%;
    background: transparent;
    border: 0;
    text-align: left;
    color: inherit;
    border-radius: .5rem
}

    .dropdown-as-link .bi {
        width: 2rem;
        height: 2rem;
        display: grid;
        place-items: center;
        background: var(--mega-icon-bg);
        border-radius: .5rem
    }

    .dropdown-as-link:hover {
        background: #f7f7f7
    }













/* Mobile (<992px): панель становится частью коллапса navbar (вертикальный список) */
@media (max-width: 991.98px) {
    .navbar .dropdown-menu.dropdown-mega,
    .navbar .dropdown-menu.dropdown-mega[data-bs-popper] {
        position: static !important; /* возвращаем поток */
        inset: auto !important;
        top: auto !important;
        transform: none !important;
        margin: .5rem 0 0 !important;
    }

    .dropdown-menu.dropdown-mega > .mega-wrap {
        max-width: none;
        padding-inline: 0;
    }

    .dropdown-menu.dropdown-mega .mega-inner {
        grid-template-columns: 1fr;
        gap: .5rem;
    }
}









/* ---------- МЕГА-МЕНЮ: внешний rail прозрачный, панель — внутри ---------- */

/* Делает сам .dropdown-mega прозрачным «рейлом» */
@media (min-width: 992px) {
    .navbar .dropdown-menu.dropdown-mega {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important; /* вертикальные отступы перенесём на панель */
        overflow: visible; /* на всякий случай */
        overscroll-behavior: none;
    }
}

/* ===== Scroll chaining: скролл только внутри панели ===== */
@media (min-width: 992px) {
    .dropdown-menu.dropdown-mega > .mega-wrap,
    .dropdown-menu.dropdown-mega > .mega-inner {
        overscroll-behavior: contain;
    }
}




.menu-rich .dropdown-item b {
    display: block;
}












/* Крупный аватар в шапке выпадашки */
.dropdown-mega .account-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0rem 1rem 1rem 1rem;
    border-bottom: 1px solid rgba(0,0,0,.05);
    position: relative;
}

.dropdown-mega .account-avatar {
    width: 72px; /* размер больше пунктов меню */
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--mega-border);
    box-shadow: 0 0 0 3px #fff; /* лёгкий белый ободок */
}

    .dropdown-mega .account-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
/* Контейнер аватарки */
.avatar-toggle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

    /* Само изображение */
    .avatar-toggle img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

/* Cart badge — фиксированный размер (CLS fix) */
#cartBadgeContainer .badge {
    min-width: 20px;
    text-align: center;
    display: inline-block;
}

.w-shell-shop {
    height: var(--topbar-h);
}



/* для языка, так как он прижат к правой стороне макета, чтиобы не выходил за пределы всего макета сайта. */
.dropdown-menu-lang.dropdown-mega > .mega-wrap,
.dropdown-menu-lang.dropdown-mega > .mega-inner {
    max-width: min(var(--mega-max-w), calc(100vw - var(--edge-pad) * 2));
    margin-inline: auto;
    right:0!important;
    position:fixed;
}


/* ===== BRAND: всегда в одну строку и по центру по высоте ===== */
.navbar .navbar-brand {
    display: flex;
    align-items: center;
    gap: .5rem;
    /* ключевые вещи: */
    white-space: nowrap; /* не переносить */
    word-break: normal; /* не ломать слова */
    overflow-wrap: normal; /* не переносить внутри слова */
    flex: 0 0 auto; /* не сжимать бренд */
    min-width: max-content; /* ширина = контент, чтобы его не “ломало” */
    line-height: 1; /* вписывается по высоте шапки */
}

    .navbar .navbar-brand strong {
        display: inline-block;
        line-height: 1;
        /* чуть адаптивнее, чтобы влезать, но не мелко */
        font-size: clamp(18px, 1.6vw, 18px);
    }

/* чтобы остальное не “выпихивало” бренд: поиск и левые ссылки ужимаются первыми */
.navbar .navbar-collapse {
    min-width: 0;
    flex-wrap: nowrap;
}




/* высота ссылки фиксирована, аватар/иконки центрируются */
.navbar .nav-link.acc-toggle {
    display: flex;
    align-items: center;
    height: var(--topbar-h);
    padding-block: 0;
}

/* язык: на средних ширинах оставляем только иконку, подпись скрываем */
@media (max-width: 1500px) {
    #ddLang .nav-label {
        display: none;
    }
    /* скрыть текст "Language" */
}

/* аккаунт: на средних ширинах скрыть имя, оставить только аватар */
@media (max-width: 1450px) {
    .navbar .acc-toggle .d-xl-inline {
        display: none !important;
    }
    /* твой span с именем */
}

/* ещё запас: на узких уменьшаем макс-ширину поиска, чтобы всё влезало */
@media (max-width: 1600px) {
    :root {
        --search-max-w: 720px;
    }
}

@media (max-width: 1400px) {
    :root {
        --search-max-w: 580px;
    }
}

@media (max-width: 1280px) {
    :root {
        --search-max-w: 460px;
    }


}



/* Оверлей .dropdown-mega растягиваем на ширину и даём внутренние поля,
   чтобы контент НЕ мог упереться в край вьюпорта */
@media (min-width: 992px) {
    .navbar .dropdown-menu.dropdown-mega {
        padding-inline: var(--edge-pad) !important; /* ← ключ: «подушка» по бокам */
    }

}

/* ВНУТРЕННЯЯ панель: ширина всегда влезает в вьюпорт */
.dropdown-menu.dropdown-mega > .mega-wrap,
.dropdown-menu.dropdown-mega > .mega-inner {
    max-width: min(var(--mega-max-w), calc(100vw - var(--edge-pad) * 2));
    margin-inline: auto; /* по умолчанию — по центру */
    padding: var(--mega-pad);
    background: var(--mega-bg);
    border: 1px solid var(--mega-border);
    border-top: none;
    border-radius: 0 0 var(--mega-radius) var(--mega-radius);
    box-shadow: var(--mega-shadow);
    /* высота и прокрутка — как у тебя */
    max-height: calc(100vh - var(--topbar-h) - var(--mega-gap) - var(--mega-safe-bottom));
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-gutter: stable both-edges;
    padding-bottom: max(var(--mega-pad), 8px + var(--mega-safe-bottom));
}

@media (min-width: 1400px) {
    .dropdown-menu-lang.dropdown-mega > .mega-wrap,
    .dropdown-menu-lang.dropdown-mega > .mega-inner {
        right: 1% !important;
    }
}
/* ====== ПОИСК В ТОПБАРЕ: меню ровно под инпутом ====== */

/* База: контейнер поиска — опорная система координат */
.navbar .top-search .dropdown.search-wrap {
    position: relative;
    isolation: isolate; /* отдельный слой, чтобы z-index не конфликтовал */
    z-index: 2050;
}

    .navbar .top-search .dropdown.search-wrap .dropdown-menu,
    .navbar .top-search .dropdown.search-wrap .dropdown-menu[data-bs-popper] {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        top: calc(100% + 4px) !important;
        margin: 0 !important;
        transform: none !important;
        /* НИКАКИХ display/height тут! */
        border-top: none;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        max-height: min(60vh, 520px);
        overflow: auto;
        min-height: 200px;
        overscroll-behavior: contain;
    }
        .navbar .top-search .dropdown.search-wrap .dropdown-menu.show,
        .navbar .top-search .dropdown.search-wrap .dropdown-menu.show[data-bs-popper] {
            display: block !important;
        }


.rail {
    width: 340px;
    flex: 0 0 340px;
}

@media (max-width:1199.98px) {
    .rail {
        width: 100%;
        flex: 0 0 auto;
    }
}






.creator-section-title {
    margin: 0.5rem 1rem;
    color: #ff723b;
    text-transform: uppercase;
}













/* локальный стиль для строк меню в сайдбаре */
.sidebar-list li a {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem .8rem;
    border-radius: .75rem;
    text-decoration: none;
    color: inherit;
}

    .sidebar-list li a:hover {
        background: rgba(255,255,255,.06);
    }

    .sidebar-list li a i {
        display: inline-flex;
        width: 2rem;
        height: 2rem;
        align-items: center;
        justify-content: center;
        font-size: 1.25rem;
    }

    .sidebar-list li a span small {
        display: block;
        opacity: .75;
    }

    .sidebar-list li a.active {
        background: rgba(255,255,255,.10);
    }

    .sidebar-list li a.disabled {
        pointer-events: none;
        opacity: .45;
    }













/* взяли мышью */
.drag-chosen {
    outline: 2px solid rgba(99,102,241,.6);
    outline-offset: 2px;
    border-radius: 10px;
    background: rgba(99,102,241,.08);
}

/* в процессе перетаскивания (оригинал-элемент) */
.drag-active {
    opacity: .85;
    transform: scale(.995);
}

/* «призрак» под курсором */
.drag-ghost {
    opacity: .5;
    background: rgba(255,255,255,.05);
    border: 1px dashed rgba(148,163,184,.4);
    border-radius: 10px;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}



.fade:not(.show) {
    opacity: 0;
    position: absolute;
    top: 0;
    pointer-events: none;
    z-index: -55555;
}



.dropdown-menu.dropdown-mega .mega-inner {
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fill, minmax(220px, min(100%, max-content)));
    gap: 12px;
    background: var(--mega-inner-bq);
}

/* Email confirmation warning in account menu */
.acc-email-warn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    margin-bottom: 6px;
    border-radius: 6px;
    background: rgb(188, 51, 51);
    color: #fff;
    font-size: .78rem;
    line-height: 1.3;
    text-decoration: none;
    transition: background .15s;
}

.acc-email-warn:hover {
    background: rgb(210, 60, 60);
    color: #fff;
    text-decoration: none;
}

.acc-email-warn i {
    flex-shrink: 0;
    font-size: .85rem;
}

/* ===== EXPERIMENT: rail-embedded dropdowns (notifications, language) ===== */

/* Wrapper for dropdown items inside left-rail */
.wenrexa-rail-dropdown-wrap {
    width: 100%;
    position: relative;
}

/* Dropdown that opens to the RIGHT of the rail — fixed to escape overflow */
.wenrexa-rail-dropdown-right {
    position: fixed !important;
    right: auto !important;
    transform: none !important;
    margin: 0 !important;
    min-width: 340px;
    max-width: 420px;
    max-height: min(80vh, 560px);
    overflow: auto;
    background: var(--mega-bg);
    border: 1px solid var(--mega-border);
    border-radius: var(--mega-radius);
    box-shadow: var(--mega-shadow);
    color: var(--mega-text);
    z-index: 2100;
    padding: .75rem;
    /* top/left set by JS on show */
}

/* Badge on rail icons (notifications, cart) */
.wenrexa-rail-badge {
    position: absolute;
    top: 2px;
    right: 6px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    font-size: .65rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    border-radius: 9px;
    background: #e8756a;
    color: #fff;
    pointer-events: none;
}

/* Cart bell — position context for badge */
.wenrexa-cart-bell {
    position: relative;
}

/* Cart badge container — same pattern as notification badge */
.wenrexa-cart-bell #cartBadgeContainerRail {
    position: absolute;
    top: 0;
    margin-top: -0.3rem;
    pointer-events: none;
    left: 36px;
    margin-left: 0;
}
.left-rail--collapsed .wenrexa-cart-bell #cartBadgeContainerRail {
    left: 50%;
    margin-left: 6px;
}

/* Cart badge — accent when items present */
.wenrexa-cart-badge {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 19px;
    height: 19px;
    padding: 1px 5px 0;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    background: var(--wenrexa-accent) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 20px;
}

/* Notification subctx menu — wider than default */
.wenrexa-notif-subctx {
    min-width: 340px;
    max-width: 420px;
    overflow-x: hidden;
}

/* Rail language dropdown — compact */
.wenrexa-rail-lang-menu {
    min-width: 200px;
    max-width: 280px;
}

.wenrexa-rail-lang-menu a {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .65rem;
    border-radius: .5rem;
    text-decoration: none;
    color: var(--mega-text);
    font-size: .85rem;
    transition: background .12s;
}

.wenrexa-rail-lang-menu a:hover {
    background: #f7f7f7;
}

.wenrexa-rail-lang-menu a.active {
    background: #f1f5f9;
    font-weight: 600;
}

/* Rail logo block — V5 expanded: row (img left, text right) */
.wenrexa-rail-logo {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 16px 16px 20px;
    text-decoration: none !important;
    color: rgba(255,255,255,.85) !important;
    order: -20;
}

.wenrexa-rail-logo img {
    width: 26px;
    height: 26px;
    object-fit: contain;
    flex-shrink: 0;
}

.wenrexa-rail-logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.45;
}

.wenrexa-rail-logo strong {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.wenrexa-rail-logo-sub {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--rail-accent);
    margin-top: 1px;
}

/* V4 collapsed: column (img top, text below centered) */
.left-rail--collapsed .wenrexa-rail-logo {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 14px 0;
    width: 100%;
}

.left-rail--collapsed .wenrexa-rail-logo img {
    width: 34px;
    height: 34px;
}

.left-rail--collapsed .wenrexa-rail-logo-text {
    align-items: center;
    line-height: 1.95;
}

.left-rail--collapsed .wenrexa-rail-logo strong {
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.left-rail--collapsed .wenrexa-rail-logo-sub {
    font-size: 9px;
    letter-spacing: .06em;
    margin-top: 0;
}

/* Rail avatar (round) */
.wenrexa-rail-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    border: none;
    display: block;
    flex-shrink: 0;
}

.left-rail--collapsed .wenrexa-rail-avatar {
    width: 36px;
    height: 36px;
}

#panel-tab-pin-personal-hub-new-action > small {
    color: #fff;
    font-weight: 600;
    font-size: 10pt;
}

/* Push bottom items to the rail bottom via spacer */
.wenrexa-rail-spacer {
    flex: 1 1 0;
    min-height: 8px;
}

/* Rail <hr> dividers */
.left-rail .vnav > hr {
    border-color: rgba(255,255,255,.06);
    margin: 4px 16px;
}
.left-rail--collapsed .vnav > hr {
    margin: 4px 8px;
}

/* Collapsed badge position tweak */
.left-rail--collapsed .wenrexa-rail-badge {
    right: 4px;
    top: 2px;
}

/* ============================================
   WENREXA MASONRY GRID - Сетка для карточек
   CSS Columns 
   ============================================ */

.wenrexa-masonry {
    column-count: 1;
    column-gap: 1.25rem;
    padding: 1rem;
    height: auto;
    min-height: 0;
    will-change: contents;
    animation: fadeInGrid 0.6s ease;
}

/* ============================================
   АДАПТИВНЫЕ КОЛОНКИ - Mobile First
   ============================================ */

/* Small Tablet: 2 колонки */
@media (min-width: 576px) {
    .wenrexa-masonry {
        column-count: 2;
    }
}

/* Tablet: 2 колонки */
@media (min-width: 768px) {
    .wenrexa-masonry {
        column-count: 3;
    }
}

/* Desktop: 4 колонки */
@media (min-width: 992px) {
    .wenrexa-masonry {
        column-count: 4;
    }
}

/* Large Desktop: 4 колонки */
@media (min-width: 1200px) {
    .wenrexa-masonry {
        column-count: 6;
    }

        .wenrexa-masonry.wenrexa-fixed-art-5 {
            column-count: 3 !important;
        }
}

/* Extra Large: 5 колонок */
@media (min-width: 1600px) {
    .wenrexa-masonry {
        column-count: 7;
    }

        .wenrexa-masonry.wenrexa-fixed-art-5 {
            column-count: 4!important;
        }
}

/* Ultra Wide: 6 колонок */
@media (min-width: 2000px) {
    .wenrexa-masonry {
        column-count: 8;
    }


        .wenrexa-masonry.wenrexa-fixed-art-5 {
            column-count: 5 !important;
        }
}
/* После Ultra Wide: 6 колонок добавьте: */

/* 7 колонок для очень широких экранов */
@media (min-width: 2400px) {
    .wenrexa-masonry {
        column-count: 9;
    }
}

/* 8 колонок для ультраширoких мониторов */
@media (min-width: 2800px) {
    .wenrexa-masonry {
        column-count: 10;
    }
}
/* ============================================
   ЭЛЕМЕНТЫ СЕТКИ - Карточки
   ============================================ */

.wenrexa-masonry .wenrexa-card {
    break-inside: avoid;
    page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    margin-bottom: 0.25rem;
    display: inline-block;
    width: 100%;
    vertical-align: top;
    contain: layout style paint;
    animation: fadeInUp 0.5s ease backwards;
}

/* ============================================
   ВАРИАНТЫ СЕТКИ
   ============================================ */

/* Компактная сетка (меньше отступы) */
.wenrexa-masonry.wenrexa-compact {
    column-gap: 0.75rem;
    padding: 0.75rem;
}

    .wenrexa-masonry.wenrexa-compact .wenrexa-card {
        margin-bottom: 0.75rem;
    }

/* Просторная сетка (больше отступы) */
.wenrexa-masonry.wenrexa-spacious {
    column-gap: 2rem;
    padding: 2rem;
}

    .wenrexa-masonry.wenrexa-spacious .wenrexa-card {
        margin-bottom: 1rem;
    }

/* Фиксированное количество колонок (игнорирует адаптивность) */
.wenrexa-masonry.wenrexa-fixed-2 {
    column-count: 2 !important;
}

.wenrexa-masonry.wenrexa-fixed-3 {
    column-count: 3 !important;
}

.wenrexa-masonry.wenrexa-fixed-4 {
    column-count: 4 !important;
}

.wenrexa-masonry.wenrexa-fixed-5 {
    column-count: 5 !important;
}
.wenrexa-masonry.wenrexa-fixed-6 {
    column-count: 6 !important;
}

.wenrexa-masonry.wenrexa-fixed-7 {
    column-count: 7 !important;
}

.wenrexa-masonry.wenrexa-fixed-8 {
    column-count: 8 !important;
}
/* ============================================
   КОНТЕЙНЕР СЕТКИ
   ============================================ */

.wenrexa-container {
    max-width: 100%;
    margin: 0 auto;
    background: #0f0f13;
    min-height: 100vh;
}

    .wenrexa-container.wenrexa-max-width {
        max-width: 2400px;
    }

/* ============================================
   АДАПТИВНОСТЬ ОТСТУПОВ
   ============================================ */

@media (max-width: 575px) {
    .wenrexa-masonry {
        column-gap: 0.6rem;
    }

        .wenrexa-masonry .wenrexa-card {
            margin-bottom: 0.25rem;
        }
}

@media (min-width: 576px) and (max-width: 991px) {
    .wenrexa-masonry {
        column-gap: 0.6rem;
       
    }

        .wenrexa-masonry .wenrexa-card {
            margin-bottom: 0.25rem;
        }
}

@media (min-width: 992px) {
    .wenrexa-masonry {
        column-gap: 0.6rem;
    }

        .wenrexa-masonry .wenrexa-card {
            margin-bottom: 0.25rem;
        }
}

@media (min-width: 1600px) {
    .wenrexa-masonry {
        column-gap: 0.2rem;
    }

        .wenrexa-masonry .wenrexa-card {
            margin-bottom: 0.25rem;
        }
}

/* ============================================
   АНИМАЦИИ ЗАГРУЗКИ
   ============================================ */

@keyframes fadeInGrid {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Последовательное появление карточек */
    .wenrexa-masonry .wenrexa-card:nth-child(1) {
        animation-delay: 0.05s;
    }

    .wenrexa-masonry .wenrexa-card:nth-child(2) {
        animation-delay: 0.1s;
    }

    .wenrexa-masonry .wenrexa-card:nth-child(3) {
        animation-delay: 0.15s;
    }

    .wenrexa-masonry .wenrexa-card:nth-child(4) {
        animation-delay: 0.2s;
    }

    .wenrexa-masonry .wenrexa-card:nth-child(5) {
        animation-delay: 0.25s;
    }

    .wenrexa-masonry .wenrexa-card:nth-child(6) {
        animation-delay: 0.3s;
    }

    .wenrexa-masonry .wenrexa-card:nth-child(7) {
        animation-delay: 0.35s;
    }

    .wenrexa-masonry .wenrexa-card:nth-child(8) {
        animation-delay: 0.4s;
    }

    .wenrexa-masonry .wenrexa-card:nth-child(9) {
        animation-delay: 0.45s;
    }

    .wenrexa-masonry .wenrexa-card:nth-child(10) {
        animation-delay: 0.5s;
    }

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   HEADER С ФИЛЬТРАМИ
   ============================================ */

.wenrexa-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem 1rem;
    flex-wrap: wrap;
    gap: 1rem;
    background: #0f0f13;
}

.wenrexa-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: white;
    margin: 0;
}

.wenrexa-subtitle {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

.wenrexa-filters {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.wenrexa-filter-btn {
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: none;
    border-radius: 20px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
}

    .wenrexa-filter-btn:hover {
        background: rgba(255, 255, 255, 0.2);
        transform: translateY(-2px);
    }

    .wenrexa-filter-btn.active {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    }

/* ============================================
   ПУСТОЕ СОСТОЯНИЕ
   ============================================ */

.wenrexa-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    min-height: 400px;
}

.wenrexa-empty-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.3;
}

.wenrexa-empty-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: rgba(255, 255, 255, 0.7);
}

.wenrexa-empty-text {
    font-size: 1rem;
    max-width: 400px;
    line-height: 1.6;
}

/* ============================================
   КНОПКА "ЗАГРУЗИТЬ ЕЩЕ"
   ============================================ */

.wenrexa-load-more {
    display: flex;
    justify-content: center;
    padding: 2rem;
}

.wenrexa-load-more-btn {
    padding: 0.75rem 2rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 24px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

    .wenrexa-load-more-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
    }

    .wenrexa-load-more-btn:active {
        transform: translateY(0);
    }

    .wenrexa-load-more-btn:disabled {
        background: rgba(255, 255, 255, 0.1);
        color: rgba(255, 255, 255, 0.4);
        cursor: not-allowed;
        box-shadow: none;
        transform: none;
    }

/* ============================================
   ИНДИКАТОР ЗАГРУЗКИ
   ============================================ */

.wenrexa-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3rem;
    color: rgba(255, 255, 255, 0.5);
    font-size: 1.2rem;
}

    .wenrexa-loading i {
        animation: spinLoading 1s linear infinite;
        margin-right: 0.5rem;
        font-size: 1.5rem;
    }

@keyframes spinLoading {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Скелетон для загружающихся карточек */
.wenrexa-masonry.is-loading .wenrexa-card {
    animation: pulseLoading 1.5s ease-in-out infinite;
}

@keyframes pulseLoading {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* ============================================
   СТАТИСТИКА
   ============================================ */

.wenrexa-stats {
    display: flex;
    gap: 2rem;
    padding: 1rem 2rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    margin: 1rem 2rem;
}

.wenrexa-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.wenrexa-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
}

.wenrexa-stat-label {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ============================================
   PERFORMANCE OPTIMIZATION
   ============================================ */


/* GPU ускорение для анимаций */
.wenrexa-card,
.wenrexa-card-overlay,
.wenrexa-card-image img {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    .wenrexa-masonry {
        column-count: 2 !important;
        column-gap: 1rem !important;
    }

    .wenrexa-card {
        page-break-inside: avoid;
        break-inside: avoid;
        contain: layout style paint;
        content-visibility: auto;
        contain-intrinsic-size: auto 350px;
    }

    .wenrexa-card-overlay,
    .wenrexa-action-buttons,
    .wenrexa-chips-right,
    .wenrexa-badges-left {
        display: none !important;
    }

    .wenrexa-header,
    .wenrexa-filters,
    .wenrexa-load-more {
        display: none !important;
    }
}

/* ============================================
   RESPONSIVE HELPERS
   ============================================ */

/* Скрыть на мобильных */
@media (max-width: 767px) {
    .wenrexa-hide-mobile {
        display: none !important;
    }
}

/* Скрыть на планшетах */
@media (min-width: 768px) and (max-width: 991px) {
    .wenrexa-hide-tablet {
        display: none !important;
    }
}

/* Скрыть на десктопе */
@media (min-width: 992px) {
    .wenrexa-hide-desktop {
        display: none !important;
    }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

/* Улучшенная видимость фокуса */
.wenrexa-masonry:focus-within {
    outline: none;
}

/* Плавная прокрутка */
.wenrexa-container {
    scroll-behavior: smooth;
}

/* Уменьшение движения для пользователей с настройками доступности */
@media (prefers-reduced-motion: reduce) {
    .wenrexa-card,
    .wenrexa-masonry .wenrexa-card,
    .wenrexa-card-image img,
    .wenrexa-card-overlay,
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================
   CSS VARIABLES - Кастомизация
   ============================================ */

:root {
    --wenrexa-gap: 1.25rem;
    --wenrexa-padding: 1rem;
    --wenrexa-card-margin: 1.25rem;
    --wenrexa-bg: #0f0f13;
    --wenrexa-text-primary: white;
    --wenrexa-text-secondary: rgba(255, 255, 255, 0.6);
    --wenrexa-accent: #667eea;
}

/* Использование переменных (опционально) */
.wenrexa-masonry.wenrexa-custom {
    column-gap: var(--wenrexa-gap);
    padding: var(--wenrexa-padding);
}

    .wenrexa-masonry.wenrexa-custom .wenrexa-card {
        margin-bottom: var(--wenrexa-card-margin);
    }

/* ============================================
   ТЕМНАЯ/СВЕТЛАЯ ТЕМА (опционально)
   ============================================ */

/* Светлая тема */
.wenrexa-container.wenrexa-light {
    background: #f5f5f7;
}

.wenrexa-light .wenrexa-card {
    background: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

    .wenrexa-light .wenrexa-card:hover {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    }

.wenrexa-light .wenrexa-card-overlay {
    background: linear-gradient( to bottom, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0.4) 100% );
}

.wenrexa-light .wenrexa-card-title,
.wenrexa-light .wenrexa-author-name {
    color: #1a1a1f;
}

/* ============================================
   UTILITIES
   ============================================ */

/* Текст не выделяется при двойном клике */
.wenrexa-no-select {
    user-select: none;
}

/* Плавная прокрутка */
.wenrexa-smooth-scroll {
    scroll-behavior: smooth;
}

/* Скрытие scrollbar (опционально) */
.wenrexa-hide-scrollbar::-webkit-scrollbar {
    display: none;
}

.wenrexa-hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}






/* Минимальный визуальный бокс, чтобы не было меньше 300px по высоте */
.wenrexa-card-image.min-300 {
    min-height: 300px;
}

.wenrexa-card-image.min-300 .wenrexa-card-link,
.wenrexa-card-image.min-300 .wenrexa-card-link img {
    min-height: inherit;
}

.wenrexa-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}












/* ─── Product Card Skeleton ─── */
.wen-skeleton-card {
    position: relative;
    border-radius: 14px;
    background: var(--wenrexa-bg-secondary, #161616);
    overflow: hidden;
    min-height: 280px;
}

.wen-skeleton-card__img {
    width: 100%;
    aspect-ratio: 4 / 3;
    background: var(--wenrexa-bg-tertiary, #1e1e1e);
}

.wen-skeleton-card__body {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wen-skeleton-card__line {
    height: 14px;
    border-radius: 4px;
    background: var(--wenrexa-bg-tertiary, #1e1e1e);
}

.wen-skeleton-card__line--title {
    width: 75%;
    height: 16px;
}

.wen-skeleton-card__line--subtitle {
    width: 50%;
}

.wen-skeleton-card__line--price {
    width: 30%;
    height: 18px;
    margin-top: 4px;
}

.wen-skeleton-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.03) 40%,
        rgba(255, 255, 255, 0.06) 50%,
        rgba(255, 255, 255, 0.03) 60%,
        transparent 100%
    );
    animation: wen-skeleton-shimmer 1.8s ease-in-out infinite;
}

@keyframes wen-skeleton-shimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.wen-skeleton-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 8px;
    width: 100%;
}

/* ============================================
       WENREXA CARD - Стили карточки товара
       ============================================ */








.img-fill {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.wenrexa-card {
    position: relative;
    animation: fadeIn 0.4s ease;
    scroll-behavior: smooth;
}

/* ── Скругление для внутренних слоёв ── */
.wenrexa-card.is-purchased::after,
.wenrexa-badges-left,
.wenrexa-chips-right {
    border-radius: inherit;
}
 
.wenrexa-card:hover {
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.4);
    background: #0000;
}

    /* Купленный товар */
    .wenrexa-card.is-purchased {
        opacity: 0.75;
    }

        .wenrexa-card.is-purchased::after {
            content: '';
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.2);
            pointer-events: none;
            z-index: 5;
        }

/* ============================================
       ИЗОБРАЖЕНИЕ
       ============================================ */

.wenrexa-card-link {
    display: block;
    position: relative;
    text-decoration: none;
}

.wenrexa-card-image {
    position: relative;
    width: 100%;
    display: block;
    overflow: hidden;
    border-radius: inherit;
    clip-path: inset(0 round 16px);
}

    .wenrexa-card-image > a {
        display: block;
        position: relative;
        z-index: 1;
    }

    .wenrexa-card-image img {
        width: 100%;
        height: auto;
        display: block;
        transform-origin: center center;
        min-height: 8rem;
        transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }

.wenrexa-card:hover .wenrexa-card-image img {
    transform: scale(1.08);
}

/* ============================================
       ОВЕРЛЕЙ - Затемнение при hover
       ============================================ */

.wenrexa-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.2) 100% );
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
    display: flex;
    align-items: stretch;
    pointer-events: none;
}

.wenrexa-card:hover .wenrexa-card-overlay {
    opacity: 1;
}

.wenrexa-hide-on-hover {
    transition: opacity 0.3s ease;
}

.wenrexa-card:hover .wenrexa-hide-on-hover {
    opacity: 0;
    pointer-events: none;
}

.wenrexa-card:hover .wenrexa-overlay-author {
    pointer-events: auto;
}

.wenrexa-overlay-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    width: 100%;
    height: 100%;
    padding: 10px;
    overflow: hidden;
    box-sizing: border-box;
}

/* Аватар и имя пользователя по центру */
.wenrexa-author-hover {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    animation: scaleIn 0.4s ease;
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.wenrexa-author-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
}

    .wenrexa-author-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.wenrexa-author-name {
    color: white;
    font-size: 1.1rem;
    font-weight: 600;
    text-align: center;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
}

/* Аватар + имя в overlay карточки */
.wenrexa-overlay-author {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    pointer-events: auto;
    position: relative;
    z-index: 5;
    flex-shrink: 0;
    text-decoration: none;
    color: inherit;
}

.wenrexa-overlay-author:hover {
    text-decoration: none;
}

.wenrexa-overlay-author-pic {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 4rem;
    overflow: hidden;
    flex-shrink: 0;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.wenrexa-overlay-author-name {
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
    line-height: 1.2;
}

/* Footer author link (always visible, not just on hover) */
.wenrexa-footer-author {
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: inherit;
    margin-bottom: 4px;
    position: relative;
    z-index: 3;
    pointer-events: auto;
}

.wenrexa-footer-author:hover .wenrexa-footer-author-name {
    color: #fff;
}

.wenrexa-footer-author-pic {
    width: 22px;
    height: 22px;
    min-width: 22px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
}

.wenrexa-footer-author-name {
    color: #999;
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .15s ease;
}

/* Индикатор «Куплено» в overlay */
.wenrexa-purchased-overlay {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #4ade80;
    font-size: 1.2rem;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6));
    z-index: 4;
    pointer-events: none;
}

/* ============================================
       БЕЙДЖИ слева вверху (Новинка, Скоро)
       ============================================ */

.wenrexa-badges-left {
    position: absolute;
    top: 6px;
    left: 6px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 3;
    pointer-events: none;
}

.wenrexa-badge {
    padding:4px 12px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    color: white;
}

.badge-new {
    background: #f94c7d;
}

.badge-soon {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.badge-ai,
.wenrexa-chip.badge-ai {
    background: #4c66f1;
    font-weight: 700;
    letter-spacing: 1.2px;
}

/* ============================================
       ЧИПЫ справа вверху
       ============================================ */

.wenrexa-chips-right {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    z-index: 3;
    pointer-events: none;
}

.wenrexa-chip {
    padding: 6px 12px;
    background: rgba(0, 0, 0, 0.85);
    border-radius: 20px;
    font-size: 0.65rem;
    font-weight: 600;
    color: white;
    border: none;
    box-shadow: none;
    letter-spacing: 0.3px;
    white-space: nowrap;
}


 

/* ============================================
       ФУТЕР КАРТОЧКИ - Название, Цена, Кнопки
       ============================================ */

.wenrexa-card-footer {
    position: relative;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px 10px;
    background: linear-gradient( to top, rgba(0, 0, 0, 0.97) 0%, rgba(0, 0, 0, 0.75) 50%, rgba(0, 0, 0, 0.0) 100% );
    z-index: 3;
    border-radius: 1rem;
}

.wenrexa-card-footer-none {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 14px;
    background: none!important;
    z-index: 3;
}

.wenrexa-card-bq-overlay {
    background: linear-gradient( to top, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.68) 50%, rgba(0, 0, 0, 0.39) 100% );
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    pointer-events: none;
}
/* Ссылка на заголовке карточки */
.wenrexa-card-title-link {
    text-decoration: none;
    color: inherit;
    pointer-events:auto;
}

/* Название проекта */
.wenrexa-card-title-wrapper {
    margin-bottom: 10px;
}

.wenrexa-card-title {
    color: white;
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
    user-select: text;
}

/* Иконки ОС перед названием */
.wenrexa-os-icons {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: 6px;
    vertical-align: baseline;
    flex-shrink: 0;
}

.wenrexa-os-icons i {
    font-size: inherit;
    color: inherit;
    opacity: 0.7;
}

/* Нижняя часть: цена и кнопки */
.wenrexa-card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.wenrexa-card-bottom .wenrexa-action-dots,
.wenrexa-card-bottom .wenrexa-filter-dropdown--card-act {
    margin-left: auto;
}

/* ============================================
       ЦЕНА
       ============================================ */

.wenrexa-price-box {
    flex: 1;
    min-width: 0;
}

.wenrexa-price {
    color: white;
    font-size: 1.3rem;
    font-weight: 700;
    display: block;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

.wenrexa-price-free {
    color: #4ade80;
    font-size: 12pt;
}

.wenrexa-discount-badge {
    padding: 3px 8px;
    background: #ef4444;
    color: white;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 700;
    align-self: flex-start;
    line-height: 1.2;
}

.wenrexa-price-old {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.8rem;
    text-decoration: line-through;
}

.wenrexa-price-new {
    color: #4ade80;
    font-size: 1.3rem;
    font-weight: 700;
}

/* ============================================
       КНОПКИ ДЕЙСТВИЙ
       ============================================ */

.wenrexa-action-buttons {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    padding-bottom: 0.2rem;
}


.item-mi-product-buttons-mini {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    font-size: 0.85rem;
}

/* ── wfg-chip state modifiers (карточки продуктов) ── */
.wfg-chip.is-favorite {
    background: rgba(248, 113, 113, 0.18);
    color: #f87171;
}
.wfg-chip.is-favorite:hover {
    background: rgba(248, 113, 113, 0.28);
    color: #fff;
}

.wfg-chip.is-active {
    background: rgba(74, 222, 128, 0.18);
    color: #4ade80;
}
.wfg-chip.is-active:hover {
    background: rgba(74, 222, 128, 0.28);
    color: #fff;
}


/* ============================================
       АДАПТИВНОСТЬ
       ============================================ */

/* Планшеты и меньше */
@media (max-width: 991px) {
    .wenrexa-card {
        border-radius: 12px;
    }

    .wenrexa-card-title {
        font-size: 1rem;
    }

    .wenrexa-card-footer {
        padding: 12px;
    }

    .wenrexa-price {
        font-size: 1.2rem;
    }

    .wenrexa-price-new {
        font-size: 1.2rem;
    }

    .wenrexa-chip {
        padding: 5px 10px;
        font-size: 0.65rem;
    }
}

/* Мобильные */
@media (max-width: 767px) {
    .wenrexa-card {
        border-radius: 10px;
    }

    /* На мобильных overlay показываем всегда снизу */
    .wenrexa-card-overlay {
        opacity: 1;
        background: linear-gradient( to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.6) 40%, transparent 70% );
        justify-content: flex-end;
        padding: 1rem;
    }

    .wenrexa-author-hover {
        display: none; /* На мобильных скрываем аватар при hover */
    }

    .wenrexa-overlay-author {
        display: none;
    }

    .wenrexa-card-footer {
        padding: 10px;
    }

    .wenrexa-card-title {
        font-size: 0.95rem;
        -webkit-line-clamp: 1; /* На мобильных 1 строка */
    }

    .wenrexa-card-bottom {
        gap: 8px;
    }

    .wenrexa-price {
        font-size: 1.1rem;
    }

    .wenrexa-price-new {
        font-size: 1.1rem;
    }

    .wenrexa-price-old {
        font-size: 0.85rem;
    }

    .wenrexa-action-buttons {
        gap: 6px;
    }

    .wenrexa-chips-right {
        top: 4px;
        right: 4px;
        gap: 3px;
    }

    .wenrexa-chip {
        padding: 4px 8px;
        font-size: 0.65rem;
    }

    .wenrexa-badges-left {
        top: 8px;
        left: 8px;
        gap: 6px;
    }

    .wenrexa-badge {
        padding: 4px 10px;
        font-size: 0.65rem;
    }
}

/* ============================================
       АНИМАЦИИ
       ============================================ */

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

    /* ============================================
       УТИЛИТЫ
       ============================================ */

    /* Предотвращение выделения текста */
    .wenrexa-card * {
        user-select: none;
    }

    /* Accessibility */
    .wenrexa-card:focus-within {
        /*  
        outline: 2px solid #667eea;
        outline-offset: 2px;
            */
    }

/* ============================================
       CSS VARIABLES (опционально)
       ============================================ */

:root {
    --wenrexa-card-bg: #1a1a1f;
    --wenrexa-overlay-bg: rgba(0, 0, 0, 0.85);
    --wenrexa-text-primary: white;
    --wenrexa-text-secondary: rgba(255, 255, 255, 0.7);
    --wenrexa-accent: #667eea;
    --wenrexa-success: #4ade80;
    --wenrexa-danger: #ef4444;
    --wenrexa-radius: 16px;
}
































/* ============================================
   БЕЙДЖИ (Новинка, Скоро)
   ============================================ */

/* Индикатор "Куплено" */
.item-mi-buyed {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    background: rgba(74, 222, 128, 0.95);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.9rem;
    z-index: 3;
    box-shadow: 0 4px 12px rgba(74, 222, 128, 0.5);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

/* Статус публикации */
.lib-status-public-part {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(0%);
    padding: 6px 14px;
    background: rgba(18, 18, 18, 0.95);
    color: white;
    border-radius: 0 0 12px 5px;
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    z-index: 4;
    left: 0px;
    box-shadow: none;
}

.wenrexa-art-title {
    padding: 1rem;
    text-align: center;
}

/* ============================================
   КРУГЛЫЕ КНОПКИ — удалён дубликат,
   ghost стиль определён выше (строка ~539)
   ============================================ */

/* ============================================
   АДАПТИВНОСТЬ
   ============================================ */














/* Чип "Эксклюзив" - золотой градиент */
.chip-exclusive {
    background: #e68823;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
    font-weight: 700;
    padding: 6px 14px;
}

/* Чип "Вид товара" - синий */
.chip-kind {
    background: rgba(0, 0, 0, 0.9);
   
}

/* Чип "Тип проекта" */
.chip-type {
    text-transform: uppercase;
    font-weight: 600;
}

/* Иконки в чипах */
.chip-exclusive i,
.chip-kind i {
    margin-right: 4px;
}


/* ============================================
   Статистика: просмотры и покупки
   ============================================ */

/* Контейнер для статистики под заголовком */
.wenrexa-stats-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 8px;
    margin-bottom: 12px;
    padding: 8px 0;
}

/* Отдельный элемент статистики */
.wenrexa-stats-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #6b7280;
    transition: all 0.2s ease;
}

    /* Иконки в статистике */
    .wenrexa-stats-item i {
        font-size: 16px;
        color: #9ca3af;
        transition: color 0.2s ease;
    }

/* Счетчик */
.wenrexa-stats-count {
    font-weight: 500;
    color: #4b5563;
}

/* Просмотры */
.wenrexa-views:hover {
    color: #3b82f6;
}

    .wenrexa-views:hover i {
        color: #3b82f6;
    }

/* Покупки */
.wenrexa-purchases:hover {
    color: #10b981;
}

    .wenrexa-purchases:hover i {
        color: #10b981;
    }

/* Рейтинг (звезда всегда жёлтая) */
.wenrexa-rating i {
    color: #f59e0b;
}

.wenrexa-rating:hover {
    color: #f59e0b;
}

    .wenrexa-rating:hover i {
        color: #d97706;
    }

/* ============================================
   Статистика в оверлее (при наведении)
   ============================================ */

.wenrexa-stats-overlay {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 0;
    padding: 0 0.5rem;
    border-radius: 0;
    box-shadow: none;
}

    .wenrexa-stats-overlay .wenrexa-stats-item {
        font-size: 15px;
        color: #aeaeae;
    }

        .wenrexa-stats-overlay .wenrexa-stats-item i {
            font-size: 14px;
            color: #aeaeae;
        }

    .wenrexa-stats-overlay .wenrexa-stats-count {
        font-weight: 600;
        color: #787878;
    }

/* ============================================
   Адаптивность
   ============================================ */

@media (max-width: 768px) {
    .wenrexa-stats-bar {
        gap: 12px;
        margin-top: 6px;
        margin-bottom: 10px;
    }

    .wenrexa-stats-item {
        font-size: 13px;
        gap: 5px;
    }

        .wenrexa-stats-item i {
            font-size: 14px;
        }

    .wenrexa-stats-overlay {
        gap: 16px;
        padding: 10px 16px;
    }

        .wenrexa-stats-overlay .wenrexa-stats-item {
            font-size: 14px;
        }
}

@media (max-width: 480px) {
    .wenrexa-stats-bar {
        gap: 10px;
    }

    .wenrexa-stats-item {
        font-size: 12px;
        gap: 4px;
    }

        .wenrexa-stats-item i {
            font-size: 13px;
        }

    .wenrexa-stats-overlay {
        gap: 12px;
        padding: 8px 12px;
    }
}
/* Контейнер для действий артов в оверлее */
.wenrexa-art-actions {
    margin-top: 1rem;
    display: flex;
    justify-content: center;
    animation: scaleIn 0.4s ease 0.1s both;
}

/* Адаптивность для артов */
@media (max-width: 767px) {
    .wenrexa-art-actions {
        margin-bottom: 3rem;
    }
}
/* ============================================
   Альтернативный вариант: компактный вид
   ============================================ */

/* Если нужен более компактный вид без hover-эффектов */
.wenrexa-stats-bar.compact {
    gap: 12px;
    margin-top: 6px;
    margin-bottom: 8px;
}

    .wenrexa-stats-bar.compact .wenrexa-stats-item {
        font-size: 13px;
        gap: 4px;
    }

        .wenrexa-stats-bar.compact .wenrexa-stats-item i {
            font-size: 14px;
        }

/* ============================================
   Темная тема (опционально)
   ============================================ */

[data-theme="dark"] .wenrexa-stats-item {
    color: #9ca3af;
}

    [data-theme="dark"] .wenrexa-stats-item i {
        color: #6b7280;
    }

[data-theme="dark"] .wenrexa-stats-count {
    color: #d1d5db;
}

[data-theme="dark"] .wenrexa-stats-overlay {
    background: rgba(31, 41, 55, 0.95);
}

    [data-theme="dark"] .wenrexa-stats-overlay .wenrexa-stats-item {
        color: #d1d5db;
    }

        [data-theme="dark"] .wenrexa-stats-overlay .wenrexa-stats-item i {
            color: #9ca3af;
        }

    [data-theme="dark"] .wenrexa-stats-overlay .wenrexa-stats-count {
        color: #f3f4f6;
    }

[data-theme="dark"] .wenrexa-rating i {
    color: #f59e0b;
}

    [data-theme="dark"] .wenrexa-rating:hover i {
        color: #fbbf24;
    }























/* ================================================================
   SITE FOOTER (wx-ft) — Editorial design system
   Fonts: Manrope · JetBrains Mono
   Palette: --bg #09090b · --fg2 #6e6e6b
   ================================================================ */
.wx-ft{
  --bg:#09090b;--bg2:#111113;
  --fg:#e8e8e6;--fg2:#6e6e6b;
  --acc:#da5521;
  --sans:'Manrope',system-ui,sans-serif;
  --mono:'JetBrains Mono',monospace;
  background:var(--bg);color:var(--fg);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  margin-left:var(--stack-rail-w,0);
  transition:margin-left .2s ease
}
.left-rail--collapsed ~ .wx-ft,
body:has(.left-rail--collapsed) .wx-ft{
  margin-left:var(--stack-rail-collapsed-w,0)
}
.wx-ft a{color:inherit;text-decoration:none}

.wx-ft__c{max-width:1340px;margin:0 auto;padding:44px 80px 28px}

/* ── Top row: brand + nav + social ── */
.wx-ft__top{
  display:grid;
  grid-template-columns:200px 1fr auto;
  gap:48px;
  align-items:start;
  padding-bottom:28px;
  position:relative
}
.wx-ft__top::after{
  content:'';position:absolute;bottom:0;left:0;right:0;
  height:1px;background:rgba(255,255,255,.06)
}

.wx-ft__brand{display:flex;align-items:center}
.wx-ft__logo img{opacity:.9;transition:opacity .2s}
.wx-ft__logo:hover img{opacity:1}

.wx-ft__nav{display:grid;grid-template-columns:repeat(2,1fr);gap:32px}
.wx-ft__col{display:flex;flex-direction:column;gap:5px}
.wx-ft__h{
  font-family:var(--mono);font-size:12px;font-weight:600;
  text-transform:uppercase;letter-spacing:2px;
  color:var(--fg);margin-bottom:4px;display:block
}
.wx-ft__lnk{
  color:var(--fg2);font-size:13px;
  transition:color .2s;font-weight:400;
  padding:2px 0
}
.wx-ft__lnk:hover{color:var(--fg)}

.wx-ft__social{display:flex;flex-direction:column;gap:10px;padding-top:2px}
.wx-ft__icons{display:flex;gap:10px}
.wx-ft__icons a{
  display:flex;align-items:center;justify-content:center;
  font-size:20px;color:var(--fg2);
  transition:color .3s,transform .3s
}
.wx-ft__icons a:hover{color:var(--fg);transform:translateY(-2px)}

/* ── Bottom bar: payment + legal ── */
.wx-ft__btm{
  display:flex;justify-content:space-between;align-items:center;
  padding:18px 0;gap:24px;flex-wrap:wrap
}
.wx-ft__pay{display:flex;align-items:center}
.wx-ft__pay img{filter:grayscale(30%) brightness(.85);transition:filter .2s}
.wx-ft__pay:hover img{filter:grayscale(0) brightness(1)}

.wx-ft__legal{display:flex;gap:18px;flex-wrap:wrap}
.wx-ft__legal a{
  color:var(--fg2);font-family:var(--mono);font-size:10px;
  letter-spacing:1px;text-transform:uppercase;transition:color .2s
}
.wx-ft__legal a:hover{color:var(--fg)}

/* ── Trademark ── */
.wx-ft__tm{
  padding-top:18px;position:relative
}
.wx-ft__tm::before{
  content:'';position:absolute;top:0;left:0;right:0;
  height:1px;background:rgba(255,255,255,.06)
}
    .wx-ft__tm p {
        color: var(--fg2);
        font-size: 11px;
        font-family: var(--mono);
        letter-spacing: .2px;
        line-height: 1.6;
        margin: 0;
        opacity: .7;
    }

/* ── Footer responsive ── */
@media(max-width:1024px){
  .wx-ft__c{padding:36px 40px 24px}
  .wx-ft__top{grid-template-columns:1fr;gap:24px}
  .wx-ft__nav{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .wx-ft__c{padding:28px 24px 20px}
  .wx-ft__nav{grid-template-columns:1fr;gap:20px}
  .wx-ft__btm{flex-direction:column;align-items:flex-start}
  .wx-ft__legal{gap:10px}
  .wx-ft__icons{gap:8px}
}











.wenrexa-product-row {
    border-radius: 14px;

    gap: 12px;
}

.wenrexa-product-row-link {
    color: inherit;
}

.wenrexa-product-row-poster {
    flex: 0 0 auto;
    width: 64px;
}

.wenrexa-product-row-poster-inner {
    width: 60px;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255,255,255,.04);
}

.wenrexa-product-row-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wenrexa-product-row-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.wenrexa-product-row-title-text {
    font-weight: 700;
    line-height: 1.15;
    font-size: 0.98rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.wenrexa-product-row-badges {
    display: flex;
    flex: 0 0 auto;
    gap: 6px;
}


/* ═══════════════════════════════════════════════════════════════
   Ghost Dropdown для карточек (--card-act modifier)
   Заменяет wenrexa-action-dots на glass-panel radio-toggle
   ═══════════════════════════════════════════════════════════════ */

/* Trigger: ghost chip (прозрачный, glass при hover) */
.wenrexa-filter-dropdown.wenrexa-filter-dropdown--card-act .wenrexa-filter-dropdown-btn {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    min-width: 40px;
    width: 40px;
    height: 40px;
    padding: 0;
    font-size: 1rem;
    gap: 0;
    pointer-events: auto;
}
.wenrexa-filter-dropdown.wenrexa-filter-dropdown--card-act .wenrexa-filter-dropdown-btn:hover {
    background: var(--wfg-btn-bg);
    backdrop-filter: var(--wfg-btn-blur);
    -webkit-backdrop-filter: var(--wfg-btn-blur);
}

/* Скрыть chevron (trigger — только иконка) */
.wenrexa-filter-dropdown.wenrexa-filter-dropdown--card-act .wenrexa-filter-dropdown-chevron {
    display: none;
}

/* Panel: открывается вниз-вправо от trigger
   Двойной класс .wenrexa-filter-dropdown повышает специфичность (0-3-0),
   чтобы перебить базовый left:0 из filters.glass.css (загружен позже) */
.wenrexa-filter-dropdown.wenrexa-filter-dropdown--card-act .wenrexa-filter-gl-panel {
    right: 0;
    left: auto;
    bottom: auto;
    top: calc(100% + 6px);
    transform: translateY(-8px);
    transform-origin: top right;
    overflow: visible;
    max-height: none;
    min-width: 48px;
}
.wenrexa-filter-dropdown.wenrexa-filter-dropdown--card-act .wenrexa-filter-dropdown-toggle:checked ~ .wenrexa-filter-gl-panel {
    transform: translateY(0);
}

/* Scroll контейнер: для card-act не нужен скролл */
.wenrexa-filter-dropdown.wenrexa-filter-dropdown--card-act .wenrexa-filter-scroll {
    overflow: visible;
    min-width: fit-content;
}

/* Кнопки внутри panel: наследуют wfg-chip стили, доп. правила не нужны */

/* Контейнеры внутри icon-grid: убираем лишние обёртки */
.wenrexa-filter-dropdown--card-act .wfg-icon-grid > .btnFavoriteContainer,
.wenrexa-filter-dropdown--card-act .wfg-icon-grid > .btnCartContainer,
.wenrexa-filter-dropdown--card-act .wfg-icon-grid > .btnLikeContainer,
.wenrexa-filter-dropdown--card-act .wfg-icon-grid > .btnDeleteContainer,
.wenrexa-filter-dropdown--card-act .wfg-icon-grid > .btnNewsContainer,
.wenrexa-filter-dropdown--card-act .wfg-icon-grid > .btnDownloadContainer {
    display: contents;
}

/* Mobile row: ghost dropdown trigger внутри компактной строки */
.wenrexa-product-row .wenrexa-filter-dropdown--card-act {
    flex-shrink: 0;
    align-self: center;
}

/* Overlay context: panel открывается вверх */
.wenrexa-card-overlay .wenrexa-filter-dropdown.wenrexa-filter-dropdown--card-act .wenrexa-filter-gl-panel,
.wenrexa-overlay-content .wenrexa-filter-dropdown.wenrexa-filter-dropdown--card-act .wenrexa-filter-gl-panel {
    top: auto;
    bottom: calc(100% + 6px);
    transform-origin: bottom right;
}

/* Masonry item: снять overflow/containment когда dropdown открыт,
   чтобы glass panel не обрезался контейнером */
.wenrexa-masonry-item:has(.wenrexa-filter-dropdown-toggle:checked) {
    overflow: visible !important;
    z-index: 100;
    content-visibility: visible;
    contain: none;
}


.swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
    pointer-events: none!important;
}

/* ============================================
       WENREXA DOWNLOAD ROW - ТОЛЬКО для TypePartialProductVisual.DownloadsProductCard
       Не трогает существующие .wenrexa-card стили
       ============================================ */

/* Горизонтальная карточка для списка загрузок */
.wenrexa-download-row {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    gap: 1rem;
    align-items: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    transition: all 0.3s ease;
    padding-right: 1rem;
}

    .wenrexa-download-row:hover {
        background: rgba(255, 255, 255, 0.06);
        border-color: rgba(255, 255, 255, 0.12);
        transform: translateX(4px);
    }


.wenrexa-download-img {
    width: 84px;
    height: 100%;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

.wenrexa-download-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* Контент (центр) */
.wenrexa-download-info {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

.wenrexa-download-title {
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .wenrexa-download-title:hover {
        color: #76e0b2;
    }

.wenrexa-download-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
}

.wenrexa-download-type::after {
    content: "•";
    margin-left: 0.75rem;
    color: rgba(255, 255, 255, 0.3);
}

.wenrexa-download-author {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
}

    .wenrexa-download-author:hover {
        color: #76e0b2;
    }

/* Кнопки действий (справа) */
.wenrexa-download-actions {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    flex-shrink: 0;
}

@media (max-width: 997px) {
    .wenrexa-download-img {
        width: 44px;
        height: 100%;
        border-radius: 8px;
        overflow: hidden;
        flex-shrink: 0;
    }
}

/* Адаптивность */
@media (max-width: 767px) {
    .wenrexa-download-row {
        grid-template-columns: 60px 1fr auto;
        gap: 0.6rem;
        padding: 0.6rem;
    }

    .wenrexa-download-img {
        border-radius: 8px;
        overflow: hidden;
        flex-shrink: 0;
    }


    .wenrexa-download-title {
        font-size: 0.9rem;
    }

    .wenrexa-download-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
        font-size: 0.75rem;
    }

    .wenrexa-download-type::after {
        display: none;
    }

    /* На мобильных чипы уменьшаются через wfg-chip responsive */
}

.wnx-input-wrap {
    position: relative;
}

.form-floating.wnx-input-wrap .form-control {
    border-radius: 8px !important;
 
}

    .form-floating.wnx-input-wrap .form-control:focus {
        box-shadow: 0 4px 12px rgba(13, 110, 253, 0.15) !important;
    }

 
 

.form-floating.wnx-input-wrap .form-control::-webkit-outer-spin-button,
.form-floating.wnx-input-wrap .form-control::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.wenrexa-subctx-wrap {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
}

/* position: fixed — escapes overflow:auto on scrollable .sticky-rail.
   JS (wenrexa.subctx-position.js) sets top/left dynamically. */
.wenrexa-panel-subctx-menu {
    position: fixed;
    z-index: 10000;
    min-width: 270px;
    max-width: 360px;
    max-height: var(--wenrexa-subctx-maxh, 560px);
    overflow-y: auto;
    pointer-events: none;
    background: var(--mega-bg, #fff);
    color: var(--mega-text, #111827);
    border: 1px solid var(--mega-border, #e5e7eb);
    border-radius: var(--mega-radius, 12px);
    box-shadow: var(--mega-shadow, 0 24px 60px rgba(0,0,0,.35));
    padding: 1rem;
    opacity: 0;
    transition: opacity .15s ease;
}

/* когда фокус внутри обёртки (кнопка или элементы меню) — показываем */
.wenrexa-subctx-wrap:focus-within .wenrexa-panel-subctx-menu {
    opacity: 1;
    pointer-events: auto
}

.wenrexa-panel-subctx-inner {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

/* ── Section headers (аналог .dropdown-mega .section-title) ── */
.wenrexa-panel-subctx-header {
    padding: .35rem .6rem .15rem;
}
.wenrexa-panel-subctx-header:not(:first-child) {
    margin-top: .5rem;
    border-top: 1px solid var(--mega-border, #e5e7eb);
    padding-top: .6rem;
}
.wenrexa-panel-subctx-header-title {
    font-size: .75rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--mega-muted, #6b7280);
    margin: .1rem 0 .2rem;
}
.wenrexa-panel-subctx-header-desc {
    font-size: .72rem;
    color: var(--mega-muted, #6b7280);
    line-height: 1.2;
    margin-top: .1rem;
}

/* ── Menu items: icon + text (аналог .dropdown-mega .list-unstyled > li > a) ── */
.wenrexa-panel-subctx-item {
    display: grid;
    grid-template-columns: 2.05rem 1fr;
    align-items: center;
    gap: .5rem;
    padding: .5rem .6rem;
    border-radius: .6rem;
    text-decoration: none;
    color: inherit;
    border: none;
    background: none;
    cursor: pointer;
    width: 100%;
    text-align: start;
    transition: background .12s ease, filter .12s ease;
}
a.wenrexa-panel-subctx-item { color: inherit; }
.wenrexa-panel-subctx-item:hover {
    background: #f7f7f7;
}
.wenrexa-panel-subctx-item.wenrexa-subctx-item--active {
    background: #f1f5f9;
}
.wenrexa-panel-subctx-item.wenrexa-subctx-item--active .wenrexa-panel-subctx-title {
    font-weight: 700;
}

/* Icon square (аналог .dropdown-mega .bi) */
.wenrexa-panel-subctx-icon {
    width: 2.05rem;
    height: 2.05rem;
    display: grid;
    place-items: center;
    border-radius: .5rem;
    font-size: 15pt;
    background: var(--mega-icon-bg, #f1f5f9);
    color: var(--mega-text, #111827);
}

/* Text block */
.wenrexa-panel-subctx-text {
    min-width: 0;
}
.wenrexa-panel-subctx-title {
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.25;
}
.wenrexa-panel-subctx-desc {
    display: block;
    font-size: .62rem;
    color: var(--mega-muted, #6b7280);
    line-height: 1.15;
    margin-top: .05rem;
}

.wenrexa-board-card {
    display: flex;
}

@media (min-width: 1400px) {
    .wenrexa-subctx-wrap[data-subctx-cols="2"] .wenrexa-panel-subctx-inner {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: .6rem;
        row-gap: .05rem;
    }

    .wenrexa-subctx-wrap[data-subctx-cols="2"] .wenrexa-panel-subctx-menu {
        max-width: 560px;
        min-width: 560px
    }
}

@media (max-width: 1399.98px) {
    .wenrexa-subctx-wrap[data-subctx-cols="2"] .wenrexa-panel-subctx-inner {
        display: flex;
        flex-direction: column;
        gap: .05rem;
    }
}

/* open-up positioning now handled by JS (position:fixed) */


/* =============================================================
   Wenrexa Filters v2 — Dark theme, borderless, modern
   Prefix: wnx-f-
   ============================================================= */

/* ── Variables ── */
:root {
    --wnx-f-bg: #292929;
    --wnx-f-bg-hover: #3a3a3a;
    --wnx-f-bg-open: rgba(255,255,255,.12);
    --wnx-f-text: rgba(255,255,255,.85);
    --wnx-f-text-muted: rgba(255,255,255,.45);
    --wnx-f-accent: var(--accent, #fff);
    --wnx-f-radius: 999px;
    --wnx-f-radius-box: 12px;
    --wnx-f-radius-sm: 6px;
    --wnx-f-font: 13px;
    --wnx-f-font-sm: 12px;
    --wnx-f-transition: all .2s ease;
    --wnx-f-dropdown-bg: rgba(22,22,26,.96);
    --wnx-f-dropdown-border: rgba(255,255,255,.06);
    --wnx-f-dropdown-shadow: 0 8px 32px rgba(0,0,0,.45);
}

/* ── Searchbar ── */
.wnx-f-searchbar {
    padding: 1rem 1rem 0.5rem;
    margin-bottom: 0.1rem;
}
.wnx-f-searchbar-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}
.wnx-f-search-input {
    position: relative;
    flex: 0 1 220px;
    min-width: 140px;
}
.wnx-f-search-input input {
    width: 100%;
    height: 35px;
    padding: 0 12px 0 36px;
    background: #fff;
    border: none;
    border-radius: 2rem;
    color: #000;
    font-size: var(--wnx-f-font);
    outline: none;
    transition: var(--wnx-f-transition);
}
.wnx-f-light .wnx-f-search-input input { background: #f3f3f3; color: #090909; }
.wnx-f-light .wnx-f-search-input input:hover { background: #cecece; }
.wnx-f-search-input input::placeholder { color: rgba(0,0,0,.45); }
.wnx-f-search-input input:focus { background: #fff; }
.wnx-f-search-input .searchbar-icon,
.wnx-f-search-input .wnx-f-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(0,0,0,.45);
    font-size: 13px;
    pointer-events: none;
}

/* ── TypeCardStrip inside searchbar (always separate row) ── */
.wnx-f-searchbar > .wnx-f-type-strip {
    padding: 0px 2.5rem;
    margin: 0;
    margin-top: 1.0rem !important;
}
.wnx-f-searchbar > .wnx-f-type-strip .wnx-f-type-card {
    height: 35px;
    max-width: 160px;
}

/* ── Filter collapse button ── */
.wnx-f-searchbar .p-filter,
.wnx-f-searchbar .searchbar-filters-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    background: #292929;
    border: none;
    border-radius: 10px;
    color: var(--wnx-f-text);
    font-size: 14px;
    cursor: pointer;
}
.wnx-f-searchbar .p-filter:hover,
.wnx-f-searchbar .searchbar-filters-btn:hover { background: #3a3a3a; }
.wnx-f-light .searchbar-filters-btn { background: #f3f3f3; color: #090909; }
.wnx-f-light .searchbar-filters-btn:hover { background: #cecece; }
.wnx-f-searchbar .p-filter:not(.collapsed),
.wnx-f-searchbar .searchbar-filters-btn:not(.collapsed) { background: var(--wnx-f-bg-open); color: var(--wnx-f-accent); }
.wnx-f-searchbar .p-filter.wnx-f-sidebar-active,
.wnx-f-searchbar .searchbar-filters-btn.wnx-f-sidebar-active { background: var(--wnx-f-bg-open); color: var(--wnx-f-accent); }

/* ── Filterbar (expanded panel — now a side drawer) ── */
.wnx-f-bar {
    padding: .5rem 0;
}
.wnx-f-bar-inner {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

/* ── Filter Sidebar (replaces collapse) ── */
.wnx-f-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: var(--stack-rail-w, 0px);
    z-index: 1040;
    display: none;
    pointer-events: none;
    transition: left .25s ease;
}
.wnx-f-sidebar.wnx-f-sidebar--open {
    display: flex;
    justify-content: flex-end;
    pointer-events: auto;
}
.wnx-f-sidebar-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.wnx-f-sidebar-panel {
    position: relative;
    z-index: 1;
    width: 320px;
    max-width: 85vw;
    height: 100vh;
    padding-top: calc(var(--topbar-h, 0px) + var(--topbar-gap, 0px));
    background: rgba(10,10,12,.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: wnx-f-slideIn .25s ease;
}
@keyframes wnx-f-slideIn {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}
.wnx-f-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .75rem 1rem;
    color: #fff;
    flex-shrink: 0;
}
.wnx-f-sidebar-header h6 {
    margin: 0;
    font-size: .95rem;
    font-weight: 600;
}
.wnx-f-sidebar-close {
    background: none;
    border: none;
    color: rgba(255,255,255,.5);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 4px;
    transition: var(--wnx-f-transition);
}
.wnx-f-sidebar-close:hover { color: #fff; }
.wnx-f-sidebar-body {
    flex: 1;
    overflow-y: auto;
    padding: .75rem 1rem;
    scrollbar-width: none;
}
.wnx-f-sidebar-body::-webkit-scrollbar { display: none; }

/* Sidebar internal: chips stacked vertically, full width */
.wnx-f-sidebar-body .wnx-f-bar { padding: 0; }
.wnx-f-sidebar-body .wnx-f-bar-inner {
    flex-direction: column;
    gap: 4px;
}
.wnx-f-sidebar-body .wnx-f-chip {
    width: 100%;
    display: block;
}
.wnx-f-sidebar-body .wnx-f-trigger {
    width: 100%;
    justify-content: space-between;
    background: rgba(255,255,255,.04);
    border-radius: 10px;
}
.wnx-f-sidebar-body .wnx-f-trigger:hover {
    background: rgba(255,255,255,.08);
}

/* Sidebar dropdowns: relative (inline, pushes content) */
.wnx-f-sidebar-body .wnx-f-dropdown {
    position: relative;
    top: 0;
    left: 0;
    min-width: 0;
    max-width: none;
    max-height: none;
    background: rgba(255,255,255,.03);
    border: none;
    border-radius: 8px;
    box-shadow: none;
    margin-top: 4px;
    margin-bottom: 4px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
/* In sidebar, dropdowns always visible when data-open="1" (no animation needed) */
.wnx-f-sidebar-body .wnx-f-chip[data-open="1"] > .wnx-f-dropdown {
    opacity: 1;
    visibility: visible;
    transform: none;
}
/* In sidebar, hide closed dropdowns with no transition */
.wnx-f-sidebar-body .wnx-f-dropdown {
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
    transition: none;
}
.wnx-f-sidebar-body .wnx-f-chip[data-open="1"] > .wnx-f-dropdown {
    max-height: 400px;
    padding: 0;
    overflow-y: auto;
}
.wnx-f-sidebar-body .wnx-f-list {
    max-height: none;
}

/* ── Chip (trigger + dropdown wrapper) ── */
.wnx-f-chip {
    position: relative;
    display: inline-block;
}

/* ── Trigger (visible pill) ── */
.wnx-f-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 1.1rem;
    height: 35px;
    background: var(--wnx-f-bg);
    border: 0;
    border-radius: var(--wnx-f-radius);
    color: #fff;
    font-size: var(--wnx-f-font);
    cursor: pointer;
    user-select: none;
    transition: var(--wnx-f-transition);
    white-space: nowrap;
    font-weight: 600;
}
.wnx-f-trigger:hover { background: var(--wnx-f-bg-hover); }
.wnx-f-light .wnx-f-trigger { background: #f3f3f3; color: #090909; }
.wnx-f-light .wnx-f-trigger:hover { background: #cecece; }
.wnx-f-chip[data-open="1"] > .wnx-f-trigger { background: var(--wnx-f-bg-open); }

/* ── Chip body ── */
.wnx-f-body {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ── Icon ── */
.wnx-f-icon {
    color: var(--wnx-f-text-muted);
    font-size: 12px;
    min-width: 14px;
    text-align: center;
}

/* ── Label ── */
.wnx-f-label {
    font-weight: 500;
    color: var(--wnx-f-text);
}

/* ── Value ── */
.wnx-f-value {
    color: var(--wnx-f-accent);
    font-weight: 500;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Caret ── */
.wnx-f-caret {
    display: inline-block;
    width: 0; height: 0;
    margin-left: 4px;
    border-left: 3.5px solid transparent;
    border-right: 3.5px solid transparent;
    border-top: 3.5px solid var(--wnx-f-text-muted);
    transition: transform .2s ease;
}
.wnx-f-chip[data-open="1"] .wnx-f-caret { transform: rotate(180deg); }

/* ── Clear button ── */
.wnx-f-clear {
    display: none;
    align-items: center;
    justify-content: center;
    width: 18px; height: 18px;
    margin-left: auto;
    background: rgba(255,255,255,.08);
    border: none;
    border-radius: 50%;
    font-size: 13px; line-height: 1;
    color: var(--wnx-f-text-muted);
    cursor: pointer;
    transition: var(--wnx-f-transition);
    flex-shrink: 0;
}
.wnx-f-clear:hover { background: var(--wnx-f-accent); color: #fff; }
.wnx-f-chip--dirty > .wnx-f-trigger > .wnx-f-clear,
.wnx-f-chip--dirty .wnx-f-clear { display: inline-flex; }

/* ── Dropdown ── */
.wnx-f-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 240px;
    max-width: 360px;
    max-height: 380px;
    background: var(--wnx-f-dropdown-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: none;
    border-radius: var(--wnx-f-radius-box);
    box-shadow: var(--wnx-f-dropdown-shadow);
    z-index: 1000;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    color: var(--wnx-f-text);
}
.wnx-f-chip[data-open="1"] > .wnx-f-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* ── Hover-to-show dropdown (searchbar chips only) ── */
.wnx-f-searchbar .wnx-f-chip:hover > .wnx-f-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.wnx-f-searchbar .wnx-f-chip:hover > .wnx-f-trigger {
    background: var(--wnx-f-bg-open);
}

/* ── List (options container inside dropdown) ── */
.wnx-f-list {
    padding: 0.7rem;
    overflow-y: auto;
    max-height: 360px;
}
.wnx-f-list::-webkit-scrollbar { width: 4px; }
.wnx-f-list::-webkit-scrollbar-track { background: transparent; }
.wnx-f-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 2px; }
.wnx-f-list::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.25); }

/* ── Option (single radio/checkbox row) ── */
.wnx-f-option {
    display: flex;
    align-items: center;
    padding: 6px 8px;
    border-radius: var(--wnx-f-radius-sm);
    cursor: pointer;
    transition: var(--wnx-f-transition);
    gap: 8px;
}
.wnx-f-option:hover { background: rgba(255,255,255,.06); }

/* ── Input (radio / checkbox) ── */
.wnx-f-input {
    width: 15px; height: 15px;
    margin: 0;
    accent-color: var(--wnx-f-accent);
    cursor: pointer;
    flex-shrink: 0;
}

/* ── Option label ── */
.wnx-f-option-label {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    font-size: var(--wnx-f-font-sm);
    color: var(--wnx-f-text);
    cursor: pointer;
    line-height: 1.3;
}
.wnx-f-option-label i { color: var(--wnx-f-text-muted); margin-right: 4px; }

/* ── Count badge ── */
.wnx-f-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px; height: 18px;
    padding: 0 5px;
    background: rgba(255,255,255,.08);
    border-radius: 8px;
    font-size: 11px;
    font-weight: 500;
    color: var(--wnx-f-text-muted);
    flex-shrink: 0;
}

/* ── wen-checkbox inside dropdown (compact) ── */
.wnx-f-dropdown .wen-checkbox {
    padding: 4px 8px;
    border-radius: var(--wnx-f-radius-sm);
    transition: var(--wnx-f-transition);
}
.wnx-f-dropdown .wen-checkbox:hover { background: rgba(255,255,255,.06); }
.wnx-f-dropdown .wen-checkbox .wen-checkbox_input {
    accent-color: var(--wnx-f-accent);
}
.wnx-f-dropdown .wen-checkbox label {
    font-size: var(--wnx-f-font-sm);
    color: var(--wnx-f-text);
}
.wnx-f-dropdown .count-badge {
    background: rgba(255,255,255,.08);
    color: var(--wnx-f-text-muted);
    font-size: 11px;
    padding: 0 5px;
    border-radius: 8px;
    min-width: 20px; height: 18px;
    display: inline-flex; align-items: center; justify-content: center;
}
.wnx-f-dropdown .text-muted { opacity: .5; }

/* ── wen-toggle switch inside dropdown (compact) ── */
.wnx-f-dropdown .wen-toggle {
    padding: 4px 8px;
    border-radius: var(--wnx-f-radius-sm);
    transition: var(--wnx-f-transition);
    width: 100%;
}
/* Switch (track) on LEFT, label on RIGHT — override default label-left */
.wnx-f-dropdown .wen-toggle.wen-toggle--label-left {
    flex-direction: row;
}
.wnx-f-dropdown .wen-toggle:hover { background: rgba(255,255,255,.06); }
.wnx-f-dropdown .wen-toggle__label {
    padding-top: 0;
}
.wnx-f-dropdown .wen-toggle__label-text {
    font-size: var(--wnx-f-font-sm);
    color: var(--wnx-f-text);
}
.wnx-f-dropdown .wen-toggle__count {
    background: rgba(255,255,255,.08);
    color: var(--wnx-f-text-muted);
    font-size: 11px;
}

/* ── Price range slider ── */
.wnx-f-range {
    position: relative;
    height: 24px;
    margin: 1rem 8px;
}
.wnx-f-range::before {
    content: '';
    position: absolute;
    top: 50%; left: 0; right: 0;
    height: 3px;
    background: rgba(255,255,255,.1);
    border-radius: 2px;
    transform: translateY(-50%);
}
.wnx-f-range input[type="range"] {
    position: absolute;
    top: 50%; left: 0; right: 0;
    width: 100%; height: 0; margin: 0;
    transform: translateY(-50%);
    pointer-events: none;
    -webkit-appearance: none; appearance: none;
    background: transparent;
}
.wnx-f-range input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 16px; height: 16px;
    background: var(--wnx-f-accent);
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
    border: 2px solid rgba(0,0,0,.3);
    box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.wnx-f-range input[type="range"]::-moz-range-thumb {
    width: 16px; height: 16px;
    background: var(--wnx-f-accent);
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
    border: 2px solid rgba(0,0,0,.3);
    box-shadow: 0 1px 4px rgba(0,0,0,.3);
}

/* ── Price mode pills ── */
.wnx-f-dropdown .btn-check + .btn {
    background: var(--wnx-f-bg);
    border: none;
    border-radius: var(--wnx-f-radius);
    color: var(--wnx-f-text);
    font-size: var(--wnx-f-font-sm);
    padding: 5px 12px;
    transition: var(--wnx-f-transition);
}
.wnx-f-dropdown .btn-check + .btn:hover { background: var(--wnx-f-bg-hover); }
.wnx-f-dropdown .btn-check:checked + .btn {
    background: var(--wnx-f-accent) !important;
    color: #080808 !important;
    font-weight: 600;
    border: none;
}

/* ── Price label inside chip ── */
.wnx-f-trigger .form-label {
    margin: 0;
    font-size: var(--wnx-f-font-sm);
    color: var(--wnx-f-text);
    white-space: nowrap;
}
.wnx-f-trigger .form-label output {
    color: var(--wnx-f-accent);
    font-weight: 500;
}

/* ── Active filters (tags below filterbar) ── */
.wnx-f-active-tags {
    display: flex;
    justify-content: center;
    gap: 6px;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 2px 0;
    min-height: 0;
}
.wnx-f-active-tags::-webkit-scrollbar { display: none; }
.wnx-f-active-tag {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    min-width: 60px;
    max-width: 210px;
    padding: 0 14px;
    background: #292929;
    border: 0;
    border-radius: var(--wnx-f-radius);
    overflow: hidden;
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--wnx-f-font);
    font-weight: 600;
    white-space: nowrap;
    cursor: default;
    transition: var(--wnx-f-transition);
    animation: wnx-f-fadeIn .2s ease;
}
@keyframes wnx-f-fadeIn {
    from { opacity: 0; transform: scale(.95); }
    to { opacity: 1; transform: scale(1); }
}
.wnx-f-active-tag-label { font-weight: 500; }
.wnx-f-active-tag-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px; height: 14px;
    border-radius: 50%;
    font-size: 12px; line-height: 1;
    color: var(--wnx-f-text-muted);
    cursor: pointer;
    transition: var(--wnx-f-transition);
}
.wnx-f-active-tag-close:hover { color: #fff; background: var(--wnx-f-accent); }

/* =============================================================
   TypeCardStrip v2 (wnx-f- themed)
   ============================================================= */
.wnx-f-type-strip {
    position: relative;
    padding: 8px 40px;
    margin-bottom: .5rem;
}
.wnx-f-type-strip-inner {
    display: flex;
    justify-content: center;
    gap: 6px;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 2px 0;
}
.wnx-f-type-strip-inner::-webkit-scrollbar { display: none; }

/* Arrows */
.wnx-f-type-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 33px; height: 33px;
    border-radius: 50%;
    border: none;
    background: rgb(0, 0, 0);
    color: var(--wnx-f-text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--wnx-f-transition);
    font-size: 12px;
}
.wnx-f-type-arrow:hover { background: rgb(92, 92, 92); }
.wnx-f-type-arrow:disabled { opacity: .3; cursor: not-allowed; }
.wnx-f-type-arrow--prev { left: 4px; }
.wnx-f-type-arrow--next { right: 4px; }

/* Card */
.wnx-f-type-card {
    position: relative;
    flex: 0 0 auto;
    height: 35px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;
    background: transparent;
    border: 0;
    border-radius: 10rem;
    overflow: hidden;
    color: #fff;
    font-size: var(--wnx-f-font);
    font-weight: 600;
    text-align: left;
    transition: transform .15s ease, box-shadow .15s ease;
    white-space: nowrap;
}
.wnx-f-type-card:hover {
    background: rgba(255,255,255,.08);
}

/* Background image layer */
.wnx-f-type-card-bg {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    opacity: .2;
    transition: opacity .2s ease;
}
.wnx-f-type-card:hover .wnx-f-type-card-bg { opacity: .3; }

/* Dark overlay */
.wnx-f-type-card-ovrl {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(0,0,0,.55);
    pointer-events: none;
    z-index: 1;
    transition: background .2s ease;
}
.wnx-f-type-card:hover .wnx-f-type-card-ovrl { background: rgba(0,0,0,.45); }

/* Content */
.wnx-f-type-card-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
}
.wnx-f-type-card-main {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.wnx-f-type-card-icon {
    font-size: 13px;
    color: var(--wnx-f-text-muted);
    flex-shrink: 0;
}
.wnx-f-type-card-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wnx-f-type-card-count {
    font-size: 10pt;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: var(--wnx-f-text-muted);
    flex-shrink: 0;
}

/* Active */
.wnx-f-type-card--active {
    background: rgba(255,255,255,.12);
}
.wnx-f-type-card--active .wnx-f-type-card-bg { opacity: .35; }
.wnx-f-type-card--active .wnx-f-type-card-ovrl { background: rgba(0,0,0,.35); }

/* Disabled */
.wnx-f-type-card--disabled { opacity: .35; cursor: default; pointer-events: none; }

/* ── Responsive ── */

/* ≤800px: Search input растягивается, заполняет строку рядом с кнопкой */
@media (max-width: 800px) {
    .wnx-f-search-input {
        flex: 1 1 0;
        min-width: 0;
    }
}

/* ≤768px: компактные размеры */
@media (max-width: 768px) {
    .wnx-f-trigger { padding: 0 12px; font-size: 12px; }
    .wnx-f-dropdown { min-width: 200px; max-width: 280px; }
    .wnx-f-searchbar-inner { gap: .375rem; }
    .wnx-f-searchbar .wnx-f-type-strip .wnx-f-type-card { height: 32px; max-width: 130px; font-size: 12px; }
    .wnx-f-searchbar .wnx-f-chip[data-chip-type="sort"] .wnx-f-label { display: none; }
    .wnx-f-searchbar .p-filter,
    .wnx-f-searchbar .searchbar-filters-btn { width: 32px; height: 32px; }
    .wnx-f-search-input input { height: 32px; }
    .wnx-f-sidebar-panel { width: 100%; max-width: 100%; }
}

/* ≤576px: мобильный — search + кнопка фильтров на отдельной строке, чипы ниже */
@media (max-width: 576px) {
    .wnx-f-search-input {
        flex: 1 1 calc(100% - 40px);
        order: -2;
    }
    .wnx-f-searchbar .searchbar-filters-btn {
        order: -1;
    }
    .wnx-f-searchbar .wnx-f-type-strip { padding: 0 24px; }
    .wnx-f-searchbar .wnx-f-type-strip .wnx-f-type-card { max-width: 120px; height: 30px; }
}

/* ── Sidebar footer: Apply + Reset ── */
.wnx-f-sidebar-footer {
    position: sticky;
    bottom: 0;
    z-index: 10;
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(22, 22, 26, .96);
    border-top: 1px solid var(--wnx-f-dropdown-border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    animation: wnxFooterSlideUp .2s ease;
}
@keyframes wnxFooterSlideUp {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

.wnx-f-apply-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 16px;
    background: var(--wnx-f-accent);
    color: #080808;
    border: none;
    border-radius: var(--wnx-f-radius);
    font-size: var(--wnx-f-font);
    font-weight: 600;
    cursor: pointer;
    transition: var(--wnx-f-transition);
}
.wnx-f-apply-btn:hover {
    filter: brightness(1.1);
}

.wnx-f-apply-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: rgba(0, 0, 0, .25);
    color: inherit;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}
.wnx-f-apply-badge:empty { display: none; }

.wnx-f-reset-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 12px;
    background: transparent;
    color: var(--wnx-f-text-muted);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: var(--wnx-f-radius);
    font-size: var(--wnx-f-font-sm);
    cursor: pointer;
    transition: var(--wnx-f-transition);
    white-space: nowrap;
}
.wnx-f-reset-btn:hover {
    color: var(--wnx-f-text);
    border-color: rgba(255, 255, 255, .25);
}

/* ── Dropdown footer: inline Apply (multi-select chips) ── */
.wnx-f-dropdown-footer {
    padding: 8px 12px;
    border-top: 1px solid var(--wnx-f-dropdown-border);
}
.wnx-f-dropdown-apply {
    width: 100%;
    padding: 6px 12px;
    background: var(--wnx-f-accent);
    color: #080808;
    border: none;
    border-radius: var(--wnx-f-radius);
    font-size: var(--wnx-f-font-sm);
    font-weight: 600;
    cursor: pointer;
    transition: var(--wnx-f-transition);
}
.wnx-f-dropdown-apply:hover {
    filter: brightness(1.1);
}

/* ── EAV group headers inside sidebar ── */
.wnx-f-eav-group-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 4px 4px;
    margin-top: 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--wnx-f-text-muted);
    border-top: 1px solid rgba(255, 255, 255, .06);
}
.wnx-f-eav-group-header:first-child {
    margin-top: 0;
    border-top: none;
}
.wnx-f-eav-group-header i {
    font-size: 12px;
    opacity: .6;
}

/* =============================================================
   Wenrexa Filters — Glass panel + dropdown
   ============================================================= */

:root {
    /* ── Button (dropdown trigger) ── */
    --wfg-btn-radius: 14px;
    --wfg-btn-padding: 10px 20px;
    --wfg-btn-gap: 8px;
    --wfg-btn-font-size: 13.5px;
    --wfg-btn-bg: rgba(25, 25, 25, 0.65);
    --wfg-btn-bg-hover: rgba(25, 25, 25, 0.78);
    --wfg-btn-bg-active: rgba(64, 64, 64, 0.82);
    --wfg-btn-blur: blur(18px) saturate(1.3);
    --wfg-btn-color: rgba(255,255,255,0.6);
    --wfg-btn-color-hover: rgba(255,255,255,0.82);
    --wfg-btn-color-active: rgba(255,255,255,0.9);
    /* ── Panel (dropdown body) ── */
    --wfg-panel-width: 270px;
    --wfg-panel-max-h: 480px;
    --wfg-panel-radius: 18px;
    --wfg-panel-bg: rgba(25, 25, 25, 0.72);
    --wfg-panel-blur: blur(22px) saturate(1.4);
    --wfg-panel-shadow: 0 8px 48px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.05);
    --wfg-panel-padding: 12px 18px 4px;
    /* ── Row / item ── */
    --wfg-row-radius: 10px;
    --wfg-row-bg-hover: rgba(255,255,255,0.05);
    /* ── Icon ── */
    --wfg-icon-size: 26px;
    --wfg-icon-radius: 7px;
    --wfg-icon-bg: rgba(255,255,255,0.07);
    --wfg-icon-color: rgba(255,255,255,0.55);
    --wfg-icon-bg-active: rgba(255,255,255,0.12);
    --wfg-icon-color-active: rgba(255,255,255,0.9);
    /* ── Label / text ── */
    --wfg-label-font-size: 13.5px;
    --wfg-label-color: rgba(255,255,255,0.72);
    --wfg-selected-color: rgba(255,255,255,0.97);
    /* ── Reset button ── */
    --wfg-reset-radius: 12px;
    --wfg-reset-bg: rgba(255,255,255,0.07);
    --wfg-reset-color: rgba(255,255,255,0.35);
    --wfg-reset-bg-hover: rgba(255,255,255,0.1);
    --wfg-reset-color-hover: rgba(255,255,255,0.5);
    /* ── Divider / scrollbar ── */
    --wfg-divider-color: rgba(255,255,255,0.06);
    --wfg-scroll-thumb: rgba(255,255,255,0.12);
    /* ── Value chip (selected value text) ── */
    --wfg-value-color: rgba(255,255,255,0.95);
    /* ── Sidebar overrides ── */
    --wfg-sb-btn-radius: 10px;
    --wfg-sb-btn-bg: rgba(255,255,255,0.04);
    --wfg-sb-btn-bg-hover: rgba(255,255,255,0.08);
    --wfg-sb-panel-radius: 0 0 12px 12px;
    /* ── Hint / count ── */
    --wfg-hint-color: rgba(255,255,255,0.3);
    --wfg-count-bg: rgba(255,255,255,0.08);
    --wfg-count-color: rgba(255,255,255,0.4);
    /* ── Accordion group label ── */
    --wfg-group-color: rgba(255,255,255,0.28);
    --wfg-group-color-hover: rgba(255,255,255,0.5);
    --wfg-group-color-open: rgba(255,255,255,0.45);
    /* ── Chip / Search (reuse --wfg-btn-* for shared design) ── */
    --wfg-chip-icon-size: 40px;
    --wfg-chip-text-max: 80px;
    --wfg-chip-count-color: rgba(255,255,255,0.35);
    --wfg-search-padding: 10px 16px 10px 40px;
    --wfg-search-bg: #fff;
    --wfg-search-color: #111;
    --wfg-search-placeholder: rgba(0,0,0,0.35);
    --wfg-search-icon-color: rgba(0,0,0,0.35);
    /* ── Badge ── */
    --wfg-badge-size: 18px;
    --wfg-badge-bg: #ff3b30;
    --wfg-badge-bg-muted: rgba(255,255,255,0.15);
    --wfg-badge-color: #fff;
    --wfg-badge-color-muted: rgba(255,255,255,0.4);
    --wfg-badge-font-size: 10px;
    /* ── Icon grid inside panel ── */
    --wfg-icon-grid-gap: 6px;
}

/* ── DROPDOWN WRAPPER ── */
.wenrexa-filter-dropdown {
    position: relative;
    display: inline-block;
}

.wenrexa-filter-dropdown .wenrexa-filter-dropdown-toggle {
    display: none;
}

.wenrexa-filter-dropdown .wenrexa-filter-dropdown-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--wfg-btn-gap);
    padding: var(--wfg-btn-padding);
    border-radius: var(--wfg-btn-radius);
    background: var(--wfg-btn-bg);
    backdrop-filter: var(--wfg-btn-blur);
    -webkit-backdrop-filter: var(--wfg-btn-blur);
    color: var(--wfg-btn-color);
    font-size: var(--wfg-btn-font-size);
    font-weight: 500;
    letter-spacing: 0.02em;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s, color 0.2s;
    border: none;
    position: relative;
    z-index: 3;
}

.wenrexa-filter-dropdown .wenrexa-filter-dropdown-btn:hover {
    background: var(--wfg-btn-bg-hover);
    color: var(--wfg-btn-color-hover);
}

.wenrexa-filter-dropdown .wenrexa-filter-dropdown-toggle:checked ~ .wenrexa-filter-dropdown-btn {
    background: var(--wfg-btn-bg-active);
    color: var(--wfg-btn-color-active);
}

.wenrexa-filter-dropdown .wenrexa-filter-dropdown-chevron {
    font-size: 10px;
    transition: transform 0.25s cubic-bezier(.4,0,.2,1);
}

.wenrexa-filter-dropdown .wenrexa-filter-dropdown-toggle:checked ~ .wenrexa-filter-dropdown-btn .wenrexa-filter-dropdown-chevron {
    transform: rotate(180deg);
}

/* ── PANEL APPEAR ── */
.wenrexa-filter-dropdown .wenrexa-filter-gl-panel {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
}

.wenrexa-filter-dropdown .wenrexa-filter-dropdown-toggle:checked ~ .wenrexa-filter-gl-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* ── Backdrop (close on outside click, CSS-only via label) ── */
.wenrexa-filter-dropdown-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999;
    cursor: default;
}

.wenrexa-filter-dropdown .wenrexa-filter-dropdown-toggle:checked ~ .wenrexa-filter-dropdown-backdrop {
    display: block;
}

/* ── Responsive: keep panel inside viewport ── */
@media (max-width: 576px) {
    .wenrexa-filter-dropdown .wenrexa-filter-gl-panel {
        left: 50%;
        transform: translateX(-50%) translateY(-8px);
        width: calc(100vw - 24px);
        max-width: 320px;
    }
    .wenrexa-filter-dropdown .wenrexa-filter-dropdown-toggle:checked ~ .wenrexa-filter-gl-panel {
        transform: translateX(-50%) translateY(0);
    }
    .wnx-f-sidebar-panel .wenrexa-filter-gl-panel {
        width: 100%;
        max-width: 100%;
    }
}

/* ── PANEL ── */
.wenrexa-filter-gl-panel {
    width: var(--wfg-panel-width);
    max-height: var(--wfg-panel-max-h);
    background: var(--wfg-panel-bg);
    backdrop-filter: var(--wfg-panel-blur);
    -webkit-backdrop-filter: var(--wfg-panel-blur);
    border-radius: var(--wfg-panel-radius);
    box-shadow: var(--wfg-panel-shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.wenrexa-filter-gl-panel .wenrexa-filter-scroll {
    flex: 1 1 0%;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--wfg-panel-padding);
    display: flex;
    flex-direction: column;
    pointer-events: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--wfg-scroll-thumb) transparent;
}

.wenrexa-filter-gl-panel .wenrexa-filter-scroll::-webkit-scrollbar { width: 4px; }
.wenrexa-filter-gl-panel .wenrexa-filter-scroll::-webkit-scrollbar-track { background: transparent; }
.wenrexa-filter-gl-panel .wenrexa-filter-scroll::-webkit-scrollbar-thumb {
    background: var(--wfg-scroll-thumb);
    border-radius: 4px;
}

.wenrexa-filter-gl-panel .wenrexa-filter-footer {
    padding: 8px 18px 16px;
    flex-shrink: 0;
}

/* ── ACCORDION ── */
.wenrexa-filter-gl-panel .wenrexa-filter-acc-input {
    display: none;
}

.wenrexa-filter-gl-panel .wenrexa-filter-group-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--wfg-group-color);
    text-transform: uppercase;
    padding: 10px 4px 6px;
    cursor: pointer;
    user-select: none;
    transition: color 0.18s;
    flex-shrink: 0;
}

.wenrexa-filter-gl-panel .wenrexa-filter-group-label:hover {
    color: var(--wfg-group-color-hover);
}

.wenrexa-filter-gl-panel .wenrexa-filter-acc-chevron {
    font-size: 9px;
    transition: transform 0.25s cubic-bezier(.4,0,.2,1);
    transform: rotate(-90deg);
}

.wenrexa-filter-gl-panel .wenrexa-filter-acc-input:checked + .wenrexa-filter-group-label {
    color: var(--wfg-group-color-open);
}

.wenrexa-filter-gl-panel .wenrexa-filter-acc-input:checked + .wenrexa-filter-group-label .wenrexa-filter-acc-chevron {
    transform: rotate(0deg);
}

.wenrexa-filter-gl-panel .wenrexa-filter-acc-content {
    display: flex;
    flex-direction: column;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s cubic-bezier(.4,0,.2,1);
    flex-shrink: 0;
}

.wenrexa-filter-gl-panel .wenrexa-filter-acc-input:checked + .wenrexa-filter-group-label + .wenrexa-filter-acc-content {
    max-height: 600px;
}

/* ── FILTER ROW ── */
.wenrexa-filter-gl-panel .wenrexa-filter-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 5px 4px;
    border-radius: var(--wfg-row-radius);
    transition: background 0.18s;
    cursor: pointer;
    flex-shrink: 0;
}

.wenrexa-filter-gl-panel .wenrexa-filter-row:hover {
    background: var(--wfg-row-bg-hover);
}

.wenrexa-filter-gl-panel .wenrexa-filter-row-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.wenrexa-filter-gl-panel .wenrexa-filter-icon {
    width: var(--wfg-icon-size);
    height: var(--wfg-icon-size);
    border-radius: var(--wfg-icon-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--wfg-icon-bg);
    color: var(--wfg-icon-color);
    font-size: 13px;
    transition: background 0.2s, color 0.2s;
}

.wenrexa-filter-gl-panel .wenrexa-filter-label {
    font-size: var(--wfg-label-font-size);
    font-weight: 400;
    color: var(--wfg-label-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s;
}

/* ── DIVIDER ── */
.wenrexa-filter-gl-panel .wenrexa-filter-divider {
    height: 1px;
    background: var(--wfg-divider-color);
    margin: 4px 0;
    flex-shrink: 0;
}

/* ── RESET ── */
.wenrexa-filter-gl-panel .wenrexa-filter-reset {
    padding: 10px;
    border-radius: var(--wfg-reset-radius);
    background: var(--wfg-reset-bg);
    color: var(--wfg-reset-color);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-align: center;
    user-select: none;
    cursor: pointer;
    transition: background 0.18s, color 0.18s;
}

.wenrexa-filter-gl-panel .wenrexa-filter-reset:hover {
    background: var(--wfg-reset-bg-hover);
    color: var(--wfg-reset-color-hover);
}

/* ── RADIO inside glass panel (hidden, selection via :has()) ── */
.wenrexa-filter-gl-panel .wenrexa-filter-radio-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.wenrexa-filter-gl-panel .wenrexa-filter-row:has(.wenrexa-filter-radio-input:checked) .wenrexa-filter-label {
    color: var(--wfg-selected-color);
    font-weight: 600;
    user-select: none;
}

.wenrexa-filter-gl-panel .wenrexa-filter-row:has(.wenrexa-filter-radio-input:checked) .wenrexa-filter-icon {
    background: var(--wfg-icon-bg-active);
    color: var(--wfg-icon-color-active);
}

/* ── wen-toggle (our switch widget) inside glass panel ── */
.wenrexa-filter-gl-panel .wen-toggle {
    padding: 5px 4px;
    border-radius: var(--wfg-row-radius);
    transition: background 0.18s;
    width: 100%;
    gap: 10px;
}

.wenrexa-filter-gl-panel .wen-toggle:hover {
    background: var(--wfg-row-bg-hover);
}

.wenrexa-filter-gl-panel .wen-toggle__label-text {
    font-size: var(--wfg-label-font-size);
    font-weight: 400;
    color: var(--wfg-label-color);
    transition: color 0.2s;
}

.wenrexa-filter-gl-panel .wen-toggle__label {
    padding-top: 0;
    flex: 1;
    min-width: 0;
}

.wenrexa-filter-gl-panel .wen-toggle__hint {
    color: var(--wfg-hint-color);
    font-size: 11px;
}

.wenrexa-filter-gl-panel .wen-toggle:has(.wen-toggle__input:checked) .wen-toggle__label-text {
    color: var(--wfg-selected-color);
    font-weight: 500;
}

.wenrexa-filter-gl-panel .wen-toggle__count {
    background: var(--wfg-count-bg);
    color: var(--wfg-count-color);
    font-size: 11px;
}

/* ── filter-row with icon + wen-toggle ── */
.wenrexa-filter-gl-panel .wenrexa-filter-row-switch {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 4px;
    border-radius: var(--wfg-row-radius);
    transition: background 0.18s;
    cursor: pointer;
    flex-shrink: 0;
}

.wenrexa-filter-gl-panel .wenrexa-filter-row-switch:hover {
    background: var(--wfg-row-bg-hover);
}

/* icon inside row-switch */
.wenrexa-filter-gl-panel .wenrexa-filter-row-switch .wenrexa-filter-icon {
    flex-shrink: 0;
}

/* tag-helper wrapper div: must stretch to fill remaining space */
.wenrexa-filter-gl-panel .wenrexa-filter-row-switch > div {
    flex: 1;
    min-width: 0;
}

/* wen-toggle inside row-switch: remove its own padding/hover (row handles it) */
.wenrexa-filter-gl-panel .wenrexa-filter-row-switch .wen-toggle {
    padding: 5px 0;
    gap: 8px;
    flex: 1;
    min-width: 0;
    justify-content: space-between;
}

.wenrexa-filter-gl-panel .wenrexa-filter-row-switch .wen-toggle:hover {
    background: none;
}

/* highlight icon when switch checked */
.wenrexa-filter-gl-panel .wenrexa-filter-row-switch:has(.wen-toggle__input:checked) .wenrexa-filter-icon {
    background: var(--wfg-icon-bg-active);
    color: var(--wfg-icon-color-active);
}

/* ── Icon without background (plain variant) ── */
.wenrexa-filter-gl-panel .wenrexa-filter-icon--plain {
    background: none;
}

.wenrexa-filter-gl-panel .wenrexa-filter-row:has(.wenrexa-filter-radio-input:checked) .wenrexa-filter-icon--plain,
.wenrexa-filter-gl-panel .wenrexa-filter-row-switch:has(.wen-toggle__input:checked) .wenrexa-filter-icon--plain {
    background: none;
}

/* ── Hidden "close all" radio ── */
.wenrexa-filter-gl-close-radio {
    display: none;
}

/* =============================================================
   Sidebar overrides — glass dropdowns inside sidebar panel
   ============================================================= */
.wnx-f-sidebar-body .wenrexa-filter-dropdown {
    display: block;
    width: 100%;
}

.wnx-f-sidebar-body .wenrexa-filter-dropdown-btn {
    width: 100%;
    justify-content: space-between;
    border-radius: var(--wfg-sb-btn-radius);
    background: var(--wfg-sb-btn-bg);
}

.wnx-f-sidebar-body .wenrexa-filter-dropdown-btn:hover {
    background: var(--wfg-sb-btn-bg-hover);
}

.wnx-f-sidebar-body .wenrexa-filter-dropdown-toggle:checked ~ .wenrexa-filter-dropdown-btn {
    background: var(--wfg-sb-btn-bg-hover);
}

/* Panel inside sidebar: inline accordion (not absolute) */
.wnx-f-sidebar-body .wenrexa-filter-gl-panel {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    transform: none;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    border-radius: var(--wfg-sb-panel-radius);
    transition: max-height 0.3s cubic-bezier(.4,0,.2,1);
}

.wnx-f-sidebar-body .wenrexa-filter-dropdown-toggle:checked ~ .wenrexa-filter-gl-panel {
    max-height: 600px;
    overflow: visible;
    margin-top: 2px;
    transform: none;
}

/* Sidebar: no nested scroll — sidebar body is the only scroll container */
.wnx-f-sidebar-body .wenrexa-filter-gl-panel .wenrexa-filter-scroll {
    overflow-y: visible;
}

/* Backdrop not needed in sidebar */
.wnx-f-sidebar-body .wenrexa-filter-dropdown-backdrop {
    display: none !important;
}

/* ── Value display inside glass btn ── */
.wenrexa-filter-dropdown-btn .wnx-f-value {
    color: var(--wfg-value-color);
    font-weight: 600;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Price controls inside glass panel ── */
.wenrexa-filter-gl-panel .wnx-f-range {
    padding: 8px 4px;
}

.wenrexa-filter-gl-panel .btn-check + .btn-outline-light {
    font-size: 12px;
    padding: 4px 12px;
    border-radius: var(--wfg-icon-radius);
}

/* ── wen-toggle directly inside glass panel (no row-switch wrapper) ── */
.wenrexa-filter-gl-panel > .wenrexa-filter-scroll > div > .wen-toggle,
.wenrexa-filter-gl-panel > .wenrexa-filter-scroll > .wen-toggle {
    padding: 5px 4px;
    border-radius: var(--wfg-row-radius);
    transition: background 0.18s;
    width: 100%;
    gap: 10px;
}

.wenrexa-filter-gl-panel > .wenrexa-filter-scroll > div > .wen-toggle:hover,
.wenrexa-filter-gl-panel > .wenrexa-filter-scroll > .wen-toggle:hover {
    background: var(--wfg-row-bg-hover);
}

/* =============================================================
   Glass UI Elements — Chip, Icon Button, Search
   ============================================================= */

/* ── CHIP (icon + text, no dropdown) ── */
.wfg-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--wfg-btn-gap);
    padding: var(--wfg-btn-padding);
    border-radius: var(--wfg-btn-radius);
    background: var(--wfg-btn-bg);
    backdrop-filter: var(--wfg-btn-blur);
    -webkit-backdrop-filter: var(--wfg-btn-blur);
    color: var(--wfg-btn-color);
    font-size: var(--wfg-btn-font-size);
    font-weight: 500;
    letter-spacing: 0.02em;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s, color 0.2s;
    border: none;
    white-space: nowrap;
}

.wfg-chip:hover {
    background: var(--wfg-btn-bg-hover);
    color: var(--wfg-btn-color-hover);
}

/* ── CHIP ICON-ONLY ── */
.wfg-chip--icon-only {
    width: var(--wfg-chip-icon-size);
    height: var(--wfg-chip-icon-size);
    padding: 0;
    justify-content: center;
}

/* ── CHIP COUNTED (icon + truncated text + count) ── */
.wfg-chip--counted .wfg-chip__text {
    max-width: var(--wfg-chip-text-max);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wfg-chip--counted .wfg-chip__count {
    color: var(--wfg-chip-count-color);
    font-weight: 400;
    flex-shrink: 0;
}

/* ── CHIP ACTIVE / DISABLED (modifiers for type-strip etc.) ── */
.wfg-chip--active {
    color: var(--wfg-btn-color-active);
    background: var(--wfg-btn-bg-active);
}

.wfg-chip--disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

/* ── SEARCH INPUT ── */
.wfg-search {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.wfg-search__icon {
    position: absolute;
    left: 14px;
    color: var(--wfg-search-icon-color);
    font-size: 13px;
    pointer-events: none;
    z-index: 1;
}

.wfg-search__input {
    padding: var(--wfg-search-padding);
    border-radius: var(--wfg-btn-radius);
    background: var(--wfg-search-bg);
    color: var(--wfg-search-color);
    font-size: var(--wfg-btn-font-size);
    font-weight: 500;
    letter-spacing: 0.02em;
    border: none;
    outline: none;
    transition: background 0.2s;
    width: 100%;
}

.wfg-search__input::placeholder {
    color: var(--wfg-search-placeholder);
}

.wfg-search__input:focus {
    background: var(--wfg-search-bg);
    outline: 1px solid rgba(0,0,0,0.15);
}

/* ── CHIP with BADGE ── */
.wfg-chip--badge {
    position: relative;
}

.wfg-chip__badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: var(--wfg-badge-size);
    height: var(--wfg-badge-size);
    padding: 0 5px;
    border-radius: 999px;
    background: var(--wfg-badge-bg);
    color: var(--wfg-badge-color);
    font-size: var(--wfg-badge-font-size);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: var(--wfg-badge-size);
    pointer-events: none;
    box-sizing: border-box;
}

.wfg-chip__badge--muted {
    background: var(--wfg-badge-bg-muted);
    color: var(--wfg-badge-color-muted);
}

/* ── Icon grid inside glass panel ── */
.wfg-icon-grid {
    display: flex;
    gap: var(--wfg-icon-grid-gap);
    padding: 4px 0;
}

.wfg-icon-grid--vertical {
    flex-direction: column;
    align-items: stretch;
}

/* Внутри card-act dropdown: кнопки не растягиваются */
.wenrexa-filter-dropdown--card-act .wfg-icon-grid--vertical {
    align-items: center;
}

.wfg-icon-grid--horizontal {
    flex-direction: row;
    flex-wrap: nowrap;
}

/* ── CHIP LIGHT (white bg, dark text) ── */
.wfg-chip--light {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: rgba(0, 0, 0, 0.75);
}

.wfg-chip--light:hover {
    background: rgba(255, 255, 255, 1);
    color: rgba(0, 0, 0, 0.9);
}

/* ── CHIP GHOST (transparent, bg on hover only) ── */
.wfg-chip--ghost {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.wfg-chip--ghost:hover {
    background: var(--wfg-btn-bg);
    backdrop-filter: var(--wfg-btn-blur);
    -webkit-backdrop-filter: var(--wfg-btn-blur);
}

/* ── CHIP DOWNLOAD (зелёная кнопка скачивания) ── */
.wfg-chip--download {
    background: #68a51d;
    color: #fff;
}
.wfg-chip--download:hover {
    background: #578a18;
    color: #fff;
}

/* ── Static (non-interactive, display-only icon) ── */
.wfg-chip--static {
    pointer-events: none;
    cursor: default;
}

/* ── Search-within-filter (tags search box) ── */
.wenrexa-filter-search-box {
    padding: 8px 18px 4px;
    flex-shrink: 0;
}

.wenrexa-filter-search-input {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--wfg-row-radius);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.9);
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s;
}

.wenrexa-filter-search-input:focus {
    border-color: var(--brand-accent, #6366f1);
}

.wenrexa-filter-search-input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

/* ── Server search results divider ── */
.wenrexa-filter-server-results:not(:empty)::before {
    content: '';
    display: block;
    height: 1px;
    background: var(--wfg-divider-color);
    margin: 6px 0;
}

/* ── Disabled dropdown (no matching products) ── */
.wenrexa-filter-dropdown--disabled {
    opacity: 0.35;
    pointer-events: none;
    user-select: none;
}

/* Panel auto-width (for horizontal icon grid) */
.wenrexa-filter-gl-panel--auto-w {
    width: auto;
    min-width: 0;
}



:root {
    --sun-bg: #0f172a; /* фон редактора */
    --sun-fg: #e5e7eb; /* базовый цвет текста */
    --sun-muted: #9ca3af; /* плейсхолдер/вторичный */
    --sun-brd: #334155; /* рамки */
    --sun-ui: #111827; /* тулбар/панели */
}

/* Корень SunEditor – добавим класс через JS: editor.core.container.classList.add('sun-dark') */
.sun-editor.sun-dark,
.sun-editor.sun-dark .se-container,
.sun-editor.sun-dark .se-toolbar,
.sun-editor.sun-dark .se-wrapper,
.sun-editor.sun-dark .se-wrapper-wysiwyg {
    background: var(--sun-bg);
    color: var(--sun-fg);
}

    /* Плейсхолдер */
    .sun-editor.sun-dark .se-wrapper .se-placeholder,
    .sun-editor.sun-dark .se-toolbar .se-btn-tooltip {
        color: var(--sun-muted);
    }

    /* Рамки/подпорки */
    .sun-editor.sun-dark,
    .sun-editor.sun-dark .se-toolbar,
    .sun-editor.sun-dark .se-wrapper,
    .sun-editor.sun-dark .se-resizing-bar {
        border-color: var(--sun-brd);
    }

        /* Тулбар/кнопки */
        .sun-editor.sun-dark .se-toolbar {
            background: var(--sun-ui);
        }

        .sun-editor.sun-dark .se-btn {
            color: var(--sun-fg);
        }

/* Адаптивность: редактор не должен «выпадать» за пределы контейнера */
.sun-editor,
.sun-editor .se-container {
    max-width: 100%;
    width: 100% !important;
    box-sizing: border-box;
}

.sun-editor .se-toolbar,
.sun-editor .se-wrapper,
.sun-editor .se-resizing-bar {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
}

    /* Контент внутри редактора — картинки/таблицы не выходят за край */
    .sun-editor .se-wrapper-wysiwyg img {
        max-width: 100%;
        height: auto;
    }

    .sun-editor .se-wrapper-wysiwyg table {
        max-width: 100%;
        display: block;
        overflow-x: auto;
    }

/* Плейсхолдер в textarea до инициализации (Bootstrap override) */
textarea.js-sun-editor::placeholder {
    color: var(--sun-muted);
    opacity: .9;
}




    /* Тёмная тема (минимально) */
    .sun-editor,
    .sun-editor .se-container,
    .sun-editor .se-toolbar,
    .sun-editor .se-menu-list,
    .sun-editor .se-dialog {
        background-color: var(--wenrexa-bg-secondary) !important;
        color: #e5e7eb !important;
        border-color: rgba(255,255,255,0.08) !important;
    }

        .sun-editor .se-btn-module-border,
        .sun-editor .se-toolbar-line {
            border-color: rgba(255,255,255,0.08) !important;
        }

        .sun-editor .se-dialog .se-dialog-inner {
            border-color: rgba(255,255,255,0.08) !important;
            overflow: hidden !important;
        }

        .sun-editor .se-toolbar {
            border-color: rgba(255,255,255,0.08) !important;
            overflow: visible !important;
            outline: 0;
            position: relative;
            z-index: 5;
        }

        /* Внутренний контейнер кнопок — скрываем лишнюю высоту/скролл */
        .sun-editor .se-toolbar-inner {
            overflow: hidden;
        }

        /* Область ввода ниже тулбара в стеке — чтобы не перекрывала dropdown */
        .sun-editor .se-wrapper {
            position: relative;
            z-index: 1;
        }

        /* Dropdown-меню (formatBlock и др.) — sibling .se-toolbar-inner, не обрезается */
        .sun-editor .se-submenu,
        .sun-editor .se-list-layer {
            z-index: 1000;
            overflow: visible !important;
        }

        /* Область редактирования */
        .sun-editor .se-wrapper,
        .sun-editor .se-wrapper .se-wrapper-inner {
            background-color: var(--wenrexa-bg-secondary) !important;
            color: #e5e7eb !important;
        }

        /* Подсказки/меню */
        .sun-editor .se-list-layer,
        .sun-editor .se-tooltip {
            background-color: var(--wenrexa-bg-secondary) !important;
            color: #e5e7eb !important;
        }

        /* Кнопки списка (formatBlock dropdown и др.) — белый текст */
        .sun-editor .se-list-basic .se-btn-list,
        .sun-editor .se-list-basic .se-btn-list *,
        .sun-editor .se-list-basic .se-btn-list h1,
        .sun-editor .se-list-basic .se-btn-list h2,
        .sun-editor .se-list-basic .se-btn-list h3,
        .sun-editor .se-list-basic .se-btn-list h4,
        .sun-editor .se-list-basic .se-btn-list h5,
        .sun-editor .se-list-basic .se-btn-list h6,
        .sun-editor .se-list-basic .se-btn-list p,
        .sun-editor .se-list-basic .se-btn-list div,
        .sun-editor .se-list-basic .se-btn-list pre,
        .sun-editor .se-list-basic .se-btn-list blockquote {
            color: #e5e7eb !important;
            border-color: rgba(255,255,255,0.12) !important;
            border: 0px;
        }

        .sun-editor .se-btn-tray {
            background: #0d0d0d;
        }

        .sun-editor .se-resizing-bar {
            background: rgba(255,255,255,0.0) !important;
            border-top: 1px solid #1f1f1f;
        }

        .sun-editor .se-btn:enabled:focus, .sun-editor .se-btn:enabled:hover {
            background-color: #e1e1e1;
            background: #2a3034 !important;
        }

        /* pre-блок в dropdown formatBlock — тёмный фон */
        .sun-editor .se-list-layer pre,
        .sun-editor .se-list-basic .se-btn-list pre {
            background-color: rgba(255,255,255,0.08) !important;
            color: #e5e7eb !important;
        }

        /* Hover кнопок dropdown — приглушённый фон, не сливается с текстом */
        .sun-editor .se-list-basic .se-btn-list:hover {
            background-color: rgba(255,255,255,0.08) !important;
        }
/* ==========================================================================
   Wenrexa Toggle Switch Component
   Pure CSS toggle that works as checkbox
   ========================================================================== */

:root {
    /* Toggle colors */
    --wen-toggle-bg-off: #39393d;
    --wen-toggle-bg-on: #30d158;
    --wen-toggle-bg-disabled: #1c1c1e;
    --wen-toggle-thumb: #ffffff;
    --wen-toggle-thumb-shadow: rgba(0, 0, 0, 0.3);
    /* Text colors */
    --wen-toggle-text: #ffffff;
    --wen-toggle-text-secondary: rgba(255, 255, 255, 0.6);
    --wen-toggle-text-disabled: rgba(255, 255, 255, 0.3);
    /* Sizes - Medium (default) */
    --wen-toggle-width: 51px;
    --wen-toggle-height: 31px;
    --wen-toggle-thumb-size: 27px;
    --wen-toggle-thumb-offset: 2px;
    /* Animation */
    --wen-toggle-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   Base Toggle Container
   ========================================================================== */

.wen-toggle {
    display: inline-flex;
    align-items: flex-start;
    gap: 12px;
    align-items: center;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.wen-toggle--label-left {
    flex-direction: row-reverse;
}

.wen-toggle--disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

/* ==========================================================================
   Hidden Input (but accessible)
   ========================================================================== */

.wen-toggle__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

    /* Focus visible for accessibility */
    .wen-toggle__input:focus-visible + .wen-toggle__track {
        outline: 2px solid #0a84ff;
        outline-offset: 2px;
    }

/* ==========================================================================
   Track (the pill-shaped background)
   ========================================================================== */

.wen-toggle__track {
    position: relative;
    display: flex;
    align-items: center;
    width: var(--wen-toggle-width);
    height: var(--wen-toggle-height);
    background: var(--wen-toggle-bg-off);
    border-radius: calc(var(--wen-toggle-height) / 2);
    cursor: pointer;
    transition: background-color var(--wen-toggle-transition);
    flex-shrink: 0;
}

/* Checked state */
.wen-toggle__input:checked + .wen-toggle__track {
    background: var(--wen-toggle-bg-on);
}

/* Disabled state */
.wen-toggle__input:disabled + .wen-toggle__track {
    background: var(--wen-toggle-bg-disabled);
    cursor: not-allowed;
}

/* Hover effect */
.wen-toggle__track:hover {
    filter: brightness(1.1);
}

.wen-toggle__input:disabled + .wen-toggle__track:hover {
    filter: none;
}

/* Active/pressed effect */
.wen-toggle__track:active .wen-toggle__thumb {
    width: calc(var(--wen-toggle-thumb-size) + 4px);
}

/* ==========================================================================
   Thumb (the sliding circle)
   ========================================================================== */

.wen-toggle__thumb {
    position: absolute;
    left: var(--wen-toggle-thumb-offset);
    width: var(--wen-toggle-thumb-size);
    height: var(--wen-toggle-thumb-size);
    background: var(--wen-toggle-thumb);
    border-radius: 50%;
    box-shadow: 0 2px 4px var(--wen-toggle-thumb-shadow);
    transition: transform var(--wen-toggle-transition), width var(--wen-toggle-transition);
    pointer-events: none;
}

/* Checked - move thumb to right */
.wen-toggle__input:checked + .wen-toggle__track .wen-toggle__thumb {
    transform: translateX(calc(var(--wen-toggle-width) - var(--wen-toggle-thumb-size) - var(--wen-toggle-thumb-offset) * 2));
}

/* Active/pressed - stretch thumb */
.wen-toggle__track:active .wen-toggle__thumb {
    width: calc(var(--wen-toggle-thumb-size) + 4px);
}

/* When checked and active, adjust position for stretched thumb */
.wen-toggle__input:checked + .wen-toggle__track:active .wen-toggle__thumb {
    transform: translateX(calc(var(--wen-toggle-width) - var(--wen-toggle-thumb-size) - var(--wen-toggle-thumb-offset) * 2 - 4px));
}

/* ==========================================================================
   Label
   ========================================================================== */

.wen-toggle__label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    cursor: pointer;
    padding-top: 4px; /* Align with toggle center */
}

.wen-toggle--disabled .wen-toggle__label {
    cursor: not-allowed;
}

.wen-toggle__label-text {
    font-size: 14px;
    font-weight: 400;
    color: var(--wen-toggle-text);
    line-height: 1.4;
}

.wen-toggle--disabled .wen-toggle__label-text {
    color: var(--wen-toggle-text-disabled);
}

/* Count badge */
.wen-toggle__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    margin-left: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 9px;
    font-size: 11px;
    font-weight: 600;
    color: var(--wen-toggle-text-secondary);
}

/* Hint text */
.wen-toggle__hint {
    display: block;
    font-size: 12px;
    color: var(--wen-toggle-text-secondary);
    line-height: 1.4;
}

.wen-toggle--disabled .wen-toggle__hint {
    color: var(--wen-toggle-text-disabled);
}

/* ==========================================================================
   Size Variants
   ========================================================================== */

/* Small */
.wen-toggle--sm {
    --wen-toggle-width: 40px;
    --wen-toggle-height: 24px;
    --wen-toggle-thumb-size: 20px;
    --wen-toggle-thumb-offset: 2px;
    gap: 10px;
}

    .wen-toggle--sm .wen-toggle__label {
        padding-top: 2px;
    }

    .wen-toggle--sm .wen-toggle__label-text {
        font-size: 13px;
    }

    .wen-toggle--sm .wen-toggle__hint {
        font-size: 11px;
    }

/* ==========================================================================
   Integration with existing forms
   ========================================================================== */

/* When used inside .wenrexa-toggle-row */
.wenrexa-toggle-row .wen-toggle {
    margin-left: auto;
}

/* When used inside Bootstrap form-check */
.form-check .wen-toggle {
    padding-left: 0;
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    .wen-toggle__track {
        border: 1px solid #000;
        background: transparent !important;
    }

    .wen-toggle__input:checked + .wen-toggle__track {
        background: #000 !important;
    }

    .wen-toggle__thumb {
        background: #fff;
        border: 1px solid #000;
    }
}



/* wwwroot/css/wenrexa-commission-workflow.css */
/* ─────────────────────────────────────────── */
/* Stepper, Event Cards, File Attachments     */
/* ─────────────────────────────────────────── */

/* ═══════════════════════════════════════════
   STEPPER (прогресс заказа в хедере чата)
   ═══════════════════════════════════════════ */

.wenrexa-chat-stepper {
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.wenrexa-chat-stepper-track {
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .wenrexa-chat-stepper-track::-webkit-scrollbar {
        display: none;
    }

.wenrexa-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 48px;
    flex-shrink: 0;
}

.wenrexa-step-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    border: 2px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.3);
    background: transparent;
    transition: all 0.3s ease;
}

.wenrexa-step-label {
    font-size: 0.6rem;
    margin-top: 2px;
    color: rgba(255, 255, 255, 0.3);
    white-space: nowrap;
    transition: color 0.3s ease;
}

/* Линия между шагами */
.wenrexa-step-line {
    flex: 1;
    height: 2px;
    background: rgba(255, 255, 255, 0.1);
    align-self: center;
    margin: 0 2px;
    margin-bottom: 14px;
    min-width: 12px;
    transition: background 0.3s ease;
}

/* Пройденный шаг */
.wenrexa-step--done .wenrexa-step-icon {
    border-color: #198754;
    background: #198754;
    color: #fff;
}

.wenrexa-step--done .wenrexa-step-label {
    color: #198754;
}

.wenrexa-step-line--done {
    background: #198754;
}

/* Текущий шаг */
.wenrexa-step--current .wenrexa-step-icon {
    border-color: #0d6efd;
    background: rgba(13, 110, 253, 0.15);
    color: #0d6efd;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
}

.wenrexa-step--current .wenrexa-step-label {
    color: #0d6efd;
    font-weight: 600;
}


/* ═══════════════════════════════════════════
   EVENT CARDS (карточки событий в чате)
   ═══════════════════════════════════════════ */

.wenrexa-chat-event-card {
    margin: 8px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
    overflow: hidden;
}

.wenrexa-chat-event-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: 0.85rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    color:#fff
}

.wenrexa-chat-event-icon {
    font-size: 0.9rem;
    flex-shrink: 0;
}

.wenrexa-chat-event-card-body {
    padding: 8px 12px;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75); 
    word-break: break-word;
}

.wenrexa-chat-event-card-footer {
    padding: 8px 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Варианты цветов */
.wenrexa-chat-event-card--delivery {
    border-color: rgba(13, 110, 253, 0.25);
    background: rgba(13, 110, 253, 0.05);
}



    .wenrexa-chat-event-card--delivery .wenrexa-chat-event-icon {
        color: #fff;
    }

.wenrexa-chat-event-card--revision {
    border-color: rgba(255, 193, 7, 0.3);
    background: rgba(255, 193, 7, 0.05);
}

    .wenrexa-chat-event-card--revision .wenrexa-chat-event-icon {
        color: #ffc107;
    }

.wenrexa-chat-event-card--success {
    border-color: rgba(25, 135, 84, 0.25);
    background: rgba(25, 135, 84, 0.05);
}

    .wenrexa-chat-event-card--success .wenrexa-chat-event-icon {
        color: #198754;
    }

.wenrexa-chat-event-card--danger {
    border-color: rgba(220, 53, 69, 0.25);
    background: rgba(220, 53, 69, 0.05);
}

    .wenrexa-chat-event-card--danger .wenrexa-chat-event-icon {
        color: #dc3545;
    }

.wenrexa-chat-event-card--info {
    border-color: rgba(13, 202, 240, 0.25);
    background: rgba(13, 202, 240, 0.05);
}

    .wenrexa-chat-event-card--info .wenrexa-chat-event-icon {
        color: #0dcaf0;
    }

.wenrexa-chat-event-card--completed {
    border-color: rgba(25, 135, 84, 0.35);
    background: rgba(25, 135, 84, 0.08);
}

    .wenrexa-chat-event-card--completed .wenrexa-chat-event-icon {
        color: #198754;
    }


/* ═══════════════════════════════════════════
   FILE ATTACHMENTS (файлы в сообщениях)
   ═══════════════════════════════════════════ */

.wenrexa-chat-event-files {
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wenrexa-chat-file-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.wenrexa-chat-file-preview {
    width: 48px;
    height: 48px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
}

.wenrexa-chat-file-icon {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.5);
    flex-shrink: 0;
}

.wenrexa-chat-file-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.wenrexa-chat-file-name {
    font-size: 0.8rem;
    color: #0d6efd;
    text-decoration: none;
}

    .wenrexa-chat-file-name:hover {
        text-decoration: underline;
    }

/* Inline файлы в обычных сообщениях */
.wenrexa-chat-msg-attachments {
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wenrexa-chat-file-item--inline {
    background: rgba(255, 255, 255, 0.02);
    border: none;
    padding: 4px;
}

.wenrexa-chat-file-preview--small {
    width: 100%;
    max-width: 200px;
    border-radius: 4px;
    cursor: pointer;
}



.wenrexa-chat-file-link {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    color: #ffaa3c;
    text-decoration: none;
    font-weight: 600;

}



    .wenrexa-chat-file-link:hover {
        color: #87d06d;
    }


/* ═══════════════════════════════════════════
   ACTION BAR (панель действий под чатом)
   ═══════════════════════════════════════════ */

.wenrexa-chat-actions-bar {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.02);
}

.wenrexa-chat-action-group {
    border-color: rgba(255, 255, 255, 0.06) !important;
}


/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */

@media (max-width: 576px) {
    .wenrexa-step-label {
        font-size: 0.5rem;
    }

    .wenrexa-step-icon {
        width: 24px;
        height: 24px;
        font-size: 0.6rem;
    }

    .wenrexa-chat-event-card {
        margin: 6px 8px;
    }

    .wenrexa-chat-event-card-header,
    .wenrexa-chat-event-card-body,
    .wenrexa-chat-event-card-footer {
        padding: 6px 8px;
    }
}

.wenrexa-chat-thread-list {
    max-height: calc(100vh - 220px);
    overflow-y: auto;
}

.wenrexa-chat-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.wenrexa-chat-messages {
    height: calc(100vh - 320px);
    overflow-y: auto;
    padding: 12px;
    background: rgba(0, 0, 0, 0.02);
}

.wenrexa-chat-messages-inner {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wenrexa-chat-system {
    padding: 6px 8px;
}

.wenrexa-chat-msg-row {
    display: flex;
    position: relative;
}

.wenrexa-chat-msg-row--mine {
    justify-content: flex-end;
}

.wenrexa-chat-msg-row--theirs {
    justify-content: flex-start;
}

.wenrexa-chat-msg-bubble {
    max-width: 78%;
    padding: 10px 12px;
    border-radius: 14px;
    background: #27272b;
    color: #fff;
}

.wenrexa-chat-msg-row--mine .wenrexa-chat-msg-bubble {
    background: rgba(59, 72, 56, 0.1);
}

.wenrexa-chat-msg-text {
    white-space: pre-wrap;
    word-break: break-word;
}

.wenrexa-chat-msg-meta {
    margin-top: 6px;
    font-size: 12px;
    opacity: 0.65;
    text-align: right;
}

.wenrexa-chat-textarea {
    resize: none;
}

.wenrexa-chat-msg-actions {
    position: absolute;
    top: -10px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms ease-in-out;
    z-index: 2;
}

.wenrexa-chat-msg-row--mine .wenrexa-chat-msg-actions {
    right: 0;
}

.wenrexa-chat-msg-row--theirs .wenrexa-chat-msg-actions {
    left: 0;
}

.wenrexa-chat-msg-row:hover .wenrexa-chat-msg-actions {
    opacity: 1;
    pointer-events: auto;
}

.wenrexa-chat-modal .modal-body {
    height: min(78vh, 780px);
}

/* ── Notification Bell (inside navbar acc-toggle) ── */
.wenrexa-notif-bell {
    position: relative;
}
.wenrexa-notif-bell::after {
    display: none !important; /* hide Bootstrap caret */
}

/* Badge container — positioned over the bell icon.
   Expanded: icon sits at padding-left (16px) + icon-width (20px) centre → ~26px from left.
   Collapsed: button is centred, icon at 50%.
   We use a CSS custom prop so it auto-adjusts if rail width changes. */
.wenrexa-notif-bell #notificationBadgeContainerRail {
    position: absolute;
    top: 0;
    margin-top: -0.3rem;
    pointer-events: none;
    /* expanded (default): icon left-edge ≈ padding 16px, icon 20px → right-edge 36px */
    left: 36px;
    margin-left: 0;
}

/* Collapsed: button is flex-column centred, icon at 50% */
.left-rail--collapsed .wenrexa-notif-bell #notificationBadgeContainerRail {
    left: 50%;
    margin-left: 6px;
}

/* ── Badge ── */
.wenrexa-notif-badge {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 19px;
    height: 19px;
    padding: 1px 5px 0;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    color: #fff;
    background: var(--wenrexa-accent);
    border-radius: 20px;
    pointer-events: none;
}
.wenrexa-notif-badge--empty {
    display: none !important;
}

/* ── Mega-inner override for notifications ── */
.wenrexa-notif-mega {
    display: flex !important;
    flex-direction: column;
    width: 100%;
    max-height: 520px;
    overflow: hidden;
    padding: 0 !important;
    grid-template-columns: 1fr !important;
}

/* ── Dropdown header ── */
.wenrexa-notif-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 10px;
    border-bottom: 1px solid var(--mega-border, rgba(0,0,0,.08));
}
.wenrexa-notif-header__title {
    font-size: 14px;
    font-weight: 600;
}
.wenrexa-notif-header__count {
    font-size: 12px;
    color: var(--mega-muted, #6b7280);
    margin-left: 6px;
}
.wenrexa-notif-header__mark-all {
    font-size: 12px;
    color: #e8756a;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: opacity .2s;
}
.wenrexa-notif-header__mark-all:hover { opacity: .8; }
.wenrexa-notif-header__mark-all--hidden {
    display: none !important;
}
.wenrexa-notif-header__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.wenrexa-notif-header__gear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: var(--mega-muted, #6b7280);
    font-size: 13px;
    text-decoration: none;
    transition: color .2s, background .2s;
}
.wenrexa-notif-header__gear:hover {
    color: var(--mega-fg, #fff);
    background: rgba(255,255,255,.1);
}

/* ── Dropdown body (scrollable list) ── */
.wenrexa-notif-body {
    overflow-y: auto;
    flex: 1 1 auto;
    overscroll-behavior: contain;
}

/* ── Notification item ── */
.wenrexa-notif-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 16px;
    cursor: pointer;
    transition: background .15s;
    text-decoration: none;
    color: inherit;
    position: relative;
    border: 0 !important;
    margin: 0.2rem;
}
.wenrexa-notif-item:hover {
    background: rgba(0,0,0,.04);
}
.wenrexa-notif-item--unread {
    background: #f8f8f8;
    border-radius: 1.2rem;
}
.wenrexa-notif-item--read {
    opacity: .6;
}

/* Avatar / image / icon */
.wenrexa-notif-avatar {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--mega-icon-bg, #f3f4f6);
}
.wenrexa-notif-image {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 6px;
    object-fit: cover;
    background: var(--mega-icon-bg, #f3f4f6);
}
.wenrexa-notif-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    background: var(--mega-icon-bg, #f3f4f6);
    color: var(--mega-muted, #6b7280);
}

/* Body */
.wenrexa-notif-item__body {
    flex: 1;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}
.wenrexa-notif-item__title {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.wenrexa-notif-item__message {
    font-size: 13px;
    font-weight: 400;
    opacity: .7;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.wenrexa-notif-item__time {
    font-size: 11px;
    color: var(--mega-muted, #6b7280);
    margin-top: 2px;
}

/* Dismiss X */
.wenrexa-notif-dismiss {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--mega-muted, #6b7280);
    background: none;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s, background .15s;
}
.wenrexa-notif-item:hover .wenrexa-notif-dismiss { opacity: 1; }
.wenrexa-notif-dismiss:hover {
    background: rgba(0,0,0,.06);
}

/* ── Dropdown footer ── */
.wenrexa-notif-footer {
    padding: 10px 16px;
    text-align: center;
}
.wenrexa-notif-footer a {
    font-size: 13px;
    font-weight: 500;
    color: #e8756a;
    text-decoration: none;
}
.wenrexa-notif-footer a:hover { text-decoration: underline; }

/* ── Empty state ── */
.wenrexa-notif-empty {
    padding: 40px 16px;
    text-align: center;
    color: var(--mega-muted, #6b7280);
    font-size: 13px;
}
.wenrexa-notif-empty i {
    display: block;
    font-size: 32px;
    margin-bottom: 10px;
    opacity: .4;
}

/* ── Loading ── */
.wenrexa-notif-loading {
    padding: 30px 16px;
    text-align: center;
    color: var(--mega-muted, #6b7280);
    font-size: 13px;
}

/* ── Full page (Index) ── */
.wenrexa-notif-page {
    max-width: 720px;
    min-height: 500px;
    margin: 0 auto;
    padding: 24px 16px;
}
.wenrexa-notif-page__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}
.wenrexa-notif-page__title {
    font-size: 22px;
    font-weight: 700;
    color: var(--wenrexa-fg-primary, #fff);
    margin-bottom: 0;
}
.wenrexa-notif-page__settings {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: var(--wenrexa-fg-secondary, #aaa);
    background: rgba(255,255,255,.06);
    transition: color .2s, background .2s;
    font-size: 16px;
    text-decoration: none;
}
.wenrexa-notif-page__settings:hover {
    color: var(--wenrexa-fg-primary, #fff);
    background: rgba(255,255,255,.12);
}

/* Page item (order-card style) */
.wenrexa-notif-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 10px;
    background: var(--wenrexa-bg-secondary, #141414);
    border: 1px solid var(--wenrexa-border-color, #262626);
    margin-bottom: 8px;
    transition: background .15s;
    text-decoration: none;
    color: inherit;
}
.wenrexa-notif-card:hover {
    background: var(--wenrexa-bg-hover, rgba(255,255,255,.04));
}
.wenrexa-notif-card--unread {
    border-left: 3px solid var(--brand-accent, #7c5cfc);
}
.wenrexa-notif-card--read {
    opacity: .55;
}
.wenrexa-notif-card__body {
    flex: 1;
    min-width: 0;
}
.wenrexa-notif-card__title {
    font-size: 14px;
    font-weight: 500;
    color: var(--wenrexa-fg-primary, #fff);
    margin-bottom: 2px;
}
.wenrexa-notif-card__message {
    font-size: 13px;
    color: var(--wenrexa-fg-secondary, #aaa);
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.wenrexa-notif-card__time {
    font-size: 11px;
    color: var(--wenrexa-fg-tertiary, #777);
}

/* ── Pagination ── */
.wenrexa-notif-pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 20px;
}
.wenrexa-notif-pagination a,
.wenrexa-notif-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    font-size: 13px;
    border-radius: 8px;
    border: 1px solid var(--wenrexa-border-color, #262626);
    color: var(--wenrexa-fg-secondary, #aaa);
    text-decoration: none;
    transition: background .15s, border-color .15s;
}
.wenrexa-notif-pagination a:hover {
    background: var(--wenrexa-bg-hover, rgba(255,255,255,.04));
    border-color: var(--brand-accent, #7c5cfc);
}
.wenrexa-notif-pagination .active {
    background: var(--brand-accent, #7c5cfc);
    border-color: var(--brand-accent, #7c5cfc);
    color: #fff;
    font-weight: 600;
}

/* ── Responsive ── */
@media (max-width: 991.98px) {
    .wenrexa-notif-mega {
        width: 100%;
        max-height: 60vh;
    }
}

.wenrexa-board-image {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
}

.wenrexa-board-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.wenrexa-board-mosaic {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 2px;
}

.wenrexa-board-mosaic-cell {
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.06);
}

    .wenrexa-board-mosaic-cell img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.wenrexa-board-overlay {
    pointer-events: none;
}

.wenrexa-board-overlay-content {
    pointer-events: none;
}

.wenrexa-board-title {
    margin: 0 0 6px 0;
}

.wenrexa-board-desc {
    color: rgba(255, 255, 255, 0.80);
    font-size: 0.92rem;
    line-height: 1.25rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wenrexa-board-meta {
    margin-top: 10px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    color: rgba(255, 255, 255, 0.70);
    font-size: 0.85rem;
}

.wenrexa-board-meta-item {
    display: inline-flex;
    align-items: center;
}
.wenrexa-board-mosaic-cell.is-empty {
    background: rgba(255, 255, 255, 0.08);
}

    .wenrexa-board-mosaic-cell.is-empty::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    }







.wenrexa-container-board {
    margin: 3rem 1rem;
}

:root {
}

/* Board Menu Container */
.wenrexa-board-menu-container {
    position: relative;
    display: inline-block;
}

/* Trigger Button — стили chip через wfg-chip, тут только active-состояние */
.wenrexa-board-trigger.active {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--wenrexa-accent);
}

/* Dropdown Menu */
.wenrexa-board-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: var(--wenrexa-bg-secondary);
    border: 1px solid var(--wenrexa-border);
    border-radius: var(--wenrexa-radius-lg);
    box-shadow: var(--wenrexa-shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px) scale(0.98);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
    overflow: hidden;
    height: 500px;
    overflow-y: auto;
    min-width: 320px;
}

    .wenrexa-board-dropdown.show {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
    }

/* Dropdown Header */
.wenrexa-dropdown-header {
    padding: 16px;
    border-bottom: 1px solid var(--wenrexa-border);
}

.wenrexa-add-board-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 16px;
    background: var(--wenrexa-accent);
    border: none;
    border-radius: var(--wenrexa-radius-md);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .wenrexa-add-board-btn:hover {
        background: var(--wenrexa-accent-hover);
        transform: scale(1.02);
    }

    .wenrexa-add-board-btn:active {
        transform: scale(0.98);
    }

/* Status Message */
.wenrexa-board-status-wrapper {
    padding: 1rem;
    text-align: center;
}

.wenrexa-board-status {
    font-size: 12px;
    min-height: 18px;
    transition: all 0.2s ease;
}

    .wenrexa-board-status.text-success {
        color: var(--wenrexa-success) !important;
    }

    .wenrexa-board-status.text-danger {
        color: var(--wenrexa-danger) !important;
    }

/* Boards List */
.wenrexa-boards-list {
    max-height: 340px;
    overflow-y: auto;
    padding: 8px;
}

    .wenrexa-boards-list::-webkit-scrollbar {
        width: 6px;
    }

    .wenrexa-boards-list::-webkit-scrollbar-track {
        background: transparent;
    }

    .wenrexa-boards-list::-webkit-scrollbar-thumb {
        background: var(--wenrexa-bg-elevated);
        border-radius: 3px;
    }

        .wenrexa-boards-list::-webkit-scrollbar-thumb:hover {
            background: rgba(255, 255, 255, 0.3);
        }

/* Board Item */
.wenrexa-board-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--wenrexa-radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

    .wenrexa-board-item:hover {
        background: var(--wenrexa-bg-tertiary);
    }

    .wenrexa-board-item.selected {
        background: rgba(239, 239, 239, 0.11);
    }

        .wenrexa-board-item.selected:hover {
            background: rgba(255, 69, 58, 0.15);
        }

    .wenrexa-board-item.loading {
        pointer-events: none;
        opacity: 0.6;
    }

.wenrexa-board-cover {
    width: 48px;
    height: 48px;
    border-radius: var(--wenrexa-radius-sm);
    object-fit: cover;
    background: var(--wenrexa-bg-elevated);
    flex-shrink: 0;
}

.wenrexa-board-cover-placeholder {
    width: 48px;
    height: 48px;
    border-radius: var(--wenrexa-radius-sm);
    background: linear-gradient(135deg, var(--wenrexa-bg-tertiary), var(--wenrexa-bg-elevated));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .wenrexa-board-cover-placeholder i {
        font-size: 20px;
        color: var(--wenrexa-text-tertiary);
    }

.wenrexa-board-info {
    flex: 1;
    min-width: 0;
}

.wenrexa-board-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--wenrexa-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

.wenrexa-board-meta {
    font-size: 12px;
    color: var(--wenrexa-text-secondary);
}

.wenrexa-board-check {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.wenrexa-board-item .wenrexa-board-check {
    color: var(--wenrexa-text-tertiary);
}

    .wenrexa-board-item .wenrexa-board-check i.bi-plus-circle {
        display: block;
    }

    .wenrexa-board-item .wenrexa-board-check i.bi-check-circle-fill {
        display: none;
    }

    .wenrexa-board-item .wenrexa-board-check i.bi-x-circle-fill {
        display: none;
    }

.wenrexa-board-item.selected .wenrexa-board-check {
    color: var(--wenrexa-accent);
}

    .wenrexa-board-item.selected .wenrexa-board-check i.bi-plus-circle {
        display: none;
    }

    .wenrexa-board-item.selected .wenrexa-board-check i.bi-check-circle-fill {
        display: block;
    }

.wenrexa-board-item.selected:hover .wenrexa-board-check {
    color: var(--wenrexa-danger);
}

    .wenrexa-board-item.selected:hover .wenrexa-board-check i.bi-check-circle-fill {
        display: none;
    }

    .wenrexa-board-item.selected:hover .wenrexa-board-check i.bi-x-circle-fill {
        display: block;
    }

/* Empty State */
.wenrexa-boards-empty {
    padding: 32px 16px;
    text-align: center;
}

    .wenrexa-boards-empty i {
        font-size: 40px;
        color: var(--wenrexa-text-tertiary);
        margin-bottom: 12px;
    }

    .wenrexa-boards-empty p {
        font-size: 14px;
        color: var(--wenrexa-text-secondary);
        margin: 0;
    }

/* Create Board Panel */
.wenrexa-create-board-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--wenrexa-bg-secondary);
    border-radius: var(--wenrexa-radius-lg);
    transform: translateX(100%);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: auto;
}

    .wenrexa-create-board-panel.show {
        transform: translateX(0);
        opacity: 1;
    }

.wenrexa-panel-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--wenrexa-border);
    flex-shrink: 0;
}

.wenrexa-back-btn {
    width: 32px;
    height: 32px;
    font-size: 12pt;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--wenrexa-bg-tertiary);
    border: none;
    border-radius: var(--wenrexa-radius-sm);
    color: var(--wenrexa-text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
}

    .wenrexa-back-btn:hover {
        background: var(--wenrexa-bg-elevated);
    }

.wenrexa-panel-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--wenrexa-text-primary);
}

.wenrexa-panel-body {
    padding: 16px;
    flex: 1;
    overflow-y: auto;
}

/* Form Styles */
.wenrexa-form-group {
    margin-bottom: 16px;
}

.wenrexa-form-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--wenrexa-text-secondary);
    margin-bottom: 8px;
}

.wenrexa-form-label-optional {
    font-weight: 400;
    color: var(--wenrexa-text-tertiary);
    font-size: 12px;
}

.wenrexa-form-input {
    width: 100%;
    padding: 12px 14px;
    background: var(--wenrexa-bg-tertiary);
    border-radius: var(--wenrexa-radius-md);
    color: var(--wenrexa-text-primary);
    font-size: 14px;
    transition: all 0.2s ease;
    outline: none;
    box-sizing: border-box;
}



.wenrexa-form-textarea {
    min-height: 80px;
}

/* Cover Upload */
.wenrexa-cover-upload {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px;
    background: var(--wenrexa-bg-tertiary);
    border: 2px dashed var(--wenrexa-border);
    border-radius: var(--wenrexa-radius-md);
    color: var(--wenrexa-text-tertiary);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    overflow: hidden;
}

    .wenrexa-cover-upload:hover {
        border-color: var(--wenrexa-accent);
        color: var(--wenrexa-text-secondary);
        background: rgba(10, 132, 255, 0.05);
    }

    .wenrexa-cover-upload.has-image {
        padding: 0;
        border-style: solid;
    }

    .wenrexa-cover-upload i {
        font-size: 28px;
    }

    .wenrexa-cover-upload input[type="file"] {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
    }

.wenrexa-cover-preview {
    width: 100%;
    height: 120px;
    object-fit: cover;
    display: none;
}

.wenrexa-cover-upload.has-image .wenrexa-cover-preview {
    display: block;
}

.wenrexa-cover-upload.has-image .wenrexa-cover-placeholder-content {
    display: none;
}

.wenrexa-cover-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    background: rgba(0, 0, 0, 0.7);
    border: none;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 5;
}

.wenrexa-cover-upload.has-image .wenrexa-cover-remove {
    display: flex;
}

.wenrexa-cover-remove:hover {
    background: var(--wenrexa-danger);
}

/* Create Button */
.wenrexa-create-btn {
    width: 100%;
    padding: 14px 20px;
    background: var(--wenrexa-accent);
    border: none;
    border-radius: var(--wenrexa-radius-md);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 8px;
}

    .wenrexa-create-btn:hover:not(:disabled) {
        background: var(--wenrexa-accent-hover);
        transform: translateY(-1px);
    }

    .wenrexa-create-btn:active:not(:disabled) {
        transform: translateY(0);
    }

    .wenrexa-create-btn:disabled {
        background: var(--wenrexa-bg-elevated);
        color: var(--wenrexa-text-tertiary);
        cursor: not-allowed;
    }

/* Backdrop */
.wenrexa-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: 0;
    pointer-events: none;
    display: none;
}

    .wenrexa-backdrop.show {
        display: block;
    }

.wenrexa-board-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14pt;
    margin-left: auto;
}

.wenrexa-board-delete-btn {
    border: 0;
    background: transparent;
    cursor: pointer;
    opacity: .8;
}

    .wenrexa-board-delete-btn:hover {
        opacity: 1;
    }

@keyframes wenrexa-spin {
    to {
        transform: rotate(360deg);
    }
}

.wenrexa-board-item-thumb {
    border-radius: 10px;
    object-fit: cover;
}

.wenrexa-board-items-panel {
    display: none;
}

    .wenrexa-board-items-panel.show {
        display: block;
    }



.wenrexa-board-mini-btn {
    border: 0;
    background: transparent;
    cursor: pointer;
    opacity: .8;
}

    .wenrexa-board-mini-btn:hover {
        border: 0;
        background: transparent;
        cursor: pointer;
        opacity: 1;
    }

.wenrexa-items-back-btn {
    width: 32px;
    height: 32px;
    font-size: 12pt;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--wenrexa-bg-tertiary);
    border: none;
    border-radius: var(--wenrexa-radius-sm);
    color: var(--wenrexa-text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
}

    .wenrexa-items-back-btn:hover {
        background: var(--wenrexa-bg-elevated);
    }

.tooltip.wenrexa-subctx-tooltip .tooltip-inner {
    background: rgba(0, 0, 0, 0.92);
    color: #fff;
    padding: 1.25rem;
    border-radius: 1.25rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tooltip.wenrexa-subctx-tooltip .tooltip-arrow {
    display: none;
}

.wenrexa-tier-materials .wenrexa-type-info {
    display: block;
}

.wenrexa-tier-materials .wenrexa-type-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wenrexa-tier-materials .wenrexa-type-item {
    padding: 0;
    overflow: hidden;
    border-radius: 10px;
}

.wenrexa-tier-materials .wenrexa-type-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 1 / 1;
    display: block;
}

/* ============================================================
   wenrexa.audio.player.css
   Audio player component — tracks, mini-cards, volume
   ============================================================ */

:root {
    --wap-bg: #1a1a1a;
    --wap-bg2: #111;
    --wap-wave: #4a4a4a;
    --wap-progress: #e8756a;
    --wap-text: #e0e0e0;
    --wap-accent: #ff6b4a;
    --wap-muted: #666;
    --wap-border: #2a2a2a;
    --wap-radius: 12px;
}

/* ── Track list container ─────────────────────────────────── */

.audio-tracklist {
    background: var(--wap-bg2);
    border-radius: var(--wap-radius);
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.audio-tracklist__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--wap-border);
    padding-bottom: 0.75rem;
    margin-bottom: 0.5rem;
}

.audio-tracklist__title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--wap-text);
}

.audio-tracklist__count {
    font-size: 0.85rem;
    color: var(--wap-muted);
}

/* ── Track row ────────────────────────────────────────────── */

.audio-track {
    display: grid;
    grid-template-columns: 2rem 2.5rem 1fr 5.5rem;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    transition: background 0.2s;
}

/* Body = info + waveform stacked vertically */
.audio-track__body {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.audio-track:hover {
    background: var(--wap-bg);
}

.audio-track--playing {
    background: rgba(232, 117, 106, 0.1);
    border-left: 3px solid var(--wap-accent);
}

.audio-track--locked {
    opacity: 0.5;
}

.audio-track--locked .audio-track__play {
    pointer-events: none;
}

/* ── Track: number ────────────────────────────────────────── */

.audio-track__num {
    color: var(--wap-muted);
    font-size: 0.85rem;
    text-align: center;
}

/* ── Track: play button ───────────────────────────────────── */

.audio-track__play {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--wap-bg2);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.audio-track__play:hover {
    background: var(--wap-accent);
}

/* ── Track: info ──────────────────────────────────────────── */

.audio-track__info {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.audio-track__name {
    font-weight: 500;
    color: var(--wap-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.audio-track__badge {
    display: inline-block;
    font-size: 0.7rem;
    padding: 0.15rem 0.5rem;
    border-radius: 9999px;
    border: 1px solid var(--wap-border);
    color: var(--wap-muted);
    line-height: 1.4;
    width: fit-content;
    margin-top: 0.2rem;
}

.audio-track__badge--free {
    border-color: #4a7a3a;
    color: #7ab85c;
}

.audio-track__badge--locked {
    border-color: #7a3a3a;
    color: #b85c5c;
}

/* ── Track: waveform ──────────────────────────────────────── */

.audio-track__waveform {
    height: 32px;
    overflow: hidden;
}

/* ── Track: time ──────────────────────────────────────────── */

.audio-track__time {
    font-size: 0.8rem;
    color: var(--wap-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-align: right;
}

/* ── Mini player card (search results) ────────────────────── */

.audio-card-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    transition: background 0.2s;
}

.audio-card-row:hover {
    background: rgba(255, 255, 255, 0.05);
}

.audio-card__play {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    background: var(--wap-bg2);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.audio-card__play:hover {
    background: var(--wap-accent);
}

.audio-card__poster {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 6px;
    object-fit: cover;
}

.audio-card__poster-placeholder {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 6px;
    background: var(--wap-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--wap-muted);
}

.audio-card__info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.audio-card__title {
    font-weight: 500;
    color: var(--wap-text);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s;
}

.audio-card__title:hover {
    color: var(--wap-accent);
}

.audio-card__artist {
    font-size: 0.8rem;
    color: var(--wap-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.audio-card__duration {
    font-size: 0.8rem;
    color: var(--wap-muted);
    font-variant-numeric: tabular-nums;
}

.audio-card__price {
    font-weight: 600;
    color: var(--wap-text);
}

/* ── Volume slider + controls ─────────────────────────────── */

.wap__volume-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 80px;
    height: 4px;
    background: #333;
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}

.wap__volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
}

.wap__volume-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    border: none;
    cursor: pointer;
}

.wap__volume-text {
    font-size: 0.75rem;
    color: var(--wap-muted);
    width: 2.5rem;
    text-align: right;
}

/* ── Inline tracklist inside order-card (AudioTrack card) ─── */

.wenrexa-order-card--audio {
    flex-wrap: wrap;
}

.audio-tracklist--inline {
    flex-basis: 100%;
    background: transparent;
    padding: 0.25rem 0.75rem 0.5rem 72px;
    margin: 0;
    border-radius: 0;
    border-top: 1px solid var(--wap-border);
}

.audio-tracklist--inline .audio-track {
    padding: 0.4rem 0.5rem;
}

.audio-tracklist--inline .audio-track__play {
    width: 2rem;
    height: 2rem;
    font-size: 0.7rem;
}

.audio-tracklist--inline .audio-track {
    grid-template-columns: 1.5rem 2rem 1fr 4.5rem;
    gap: 0.5rem;
}

.audio-tracklist--inline .audio-track__waveform {
    height: 24px;
}

/* ── Audio card navigation (single-track with prev/next) ─── */

.audio-card-nav__bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.35rem 0.75rem 0.25rem;
}

.audio-card-nav__btn {
    background: transparent;
    border: none;
    color: var(--wap-muted);
    cursor: pointer;
    padding: 0.25rem;
    font-size: 0.85rem;
    border-radius: 50%;
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s, background 0.2s;
}

.audio-card-nav__btn:hover:not(:disabled) {
    color: var(--wap-text);
    background: var(--wap-bg);
}

.audio-card-nav__btn:disabled {
    opacity: 0.3;
    cursor: default;
}

.audio-card-nav__counter {
    font-size: 0.75rem;
    color: var(--wap-muted);
    min-width: 2.5rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* ── Responsive ───────────────────────────────────────────── */

@media (max-width: 767px) {
    .audio-track {
        grid-template-columns: 1.5rem 2.5rem 1fr 4rem;
    }

    .audio-track__num {
        font-size: 0.75rem;
    }

    .audio-tracklist--inline {
        padding-left: 0.75rem;
    }
}

/* ============================================================
   Wenrexa — Orders & Payouts Unified Styles
   File: ~/css/wenrexa-orders-payouts.css
   Used by: Orders.cshtml, MyPayouts.cshtml, Payout/Index.cshtml
   ============================================================ */

/* ====== Layout ====== */
.lib-main-panel  { gap: 0; }
.lib-content     { min-height: 60vh; }
.font-12         { font-size: 12pt !important; }

/* ====== Amount colors (shared) ====== */
.amount-plus     { color: #4cc96b; font-weight: 700; }
.amount-minus    { color: #e8a32e; font-weight: 700; }
.amount-zero     { color: #9b9b9b; font-weight: 600; }
.amount-free     { color: #4cc96b; font-weight: 600; }

.wenrexa-payout-amount-plus  { color: #4cc96b; font-weight: 700; }
.wenrexa-payout-amount-zero  { color: #9b9b9b; font-weight: 600; }

/* ====== Badges (shared) ====== */
.wenrexa-badge--pending  { background: rgba(200,164,78,0.13); color: #c8a44e; }
.wenrexa-badge--done     { background: rgba(52,199,89,0.1);   color: #34c759; }
.wenrexa-badge--prog     { background: rgba(10,132,255,0.1);  color: #0a84ff; }
.wenrexa-badge--refund   { background: rgba(255,69,58,0.1);   color: #ff453a; }
.wenrexa-badge--included { background: rgba(52,199,89,0.1);   color: #34c759; }
.wenrexa-badge--ghost    { color: var(--wenrexa-text-secondary, #6b6b6b); }
.wenrexa-order-type-badge--free {
    background: rgb(37, 51, 38);
    color: #8dc1a5;
}

/* ====== Overlay actions (shared) ====== */
.wenrexa-overlay-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: auto;
}

/* Disabled overlay button */
.wenrexa-btn--disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
.wenrexa-btn--disabled:hover { background: rgba(255,255,255,0.08); }


/* ============================================================
   ORDER CARD
   ============================================================ */
.wenrexa-order-card {
    background: var(--wenrexa-card,#000);
    border-radius: var(--wenrexa-radius, 1rem);
    overflow: hidden;
    transition: background 0.25s ease;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: stretch;
    font-size: 12pt;
}
.wenrexa-order-card:hover {
    background: var(--wenrexa-card-hover, #111111);
    overflow: visible;
    z-index: 10;
}

/* Poster */
.wenrexa-order-poster {
    width: 45px;
    min-height: 45px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: var(--wenrexa-radius, 1rem) 0 0 var(--wenrexa-radius, 1rem);
}
.wenrexa-order-poster img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}
.wenrexa-order-poster--sm {
    width: 53px;
    max-height: 53px;
}

/* Body */
.wenrexa-order-body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    flex-grow: 1;
    padding: 0.5rem 0.75rem;
    gap: 0.25rem 0.75rem;
    min-width: 0;
}

.wenrexa-order-info   { flex: 1 1 180px; min-width: 0; }
.wenrexa-order-title  { font-size: 1em; font-weight: 500; }
.wenrexa-order-author { color: var(--wenrexa-text-secondary, #6b6b6b); }

/* Meta (price + qty) */
.wenrexa-order-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    margin-left: auto;
}
.wenrexa-order-price {
    font-size: 1em;
    font-weight: 600;
    font-family: 'SF Mono', 'JetBrains Mono', ui-monospace, monospace;
    white-space: nowrap;
}
.wenrexa-order-sep { color: var(--wenrexa-text-muted, #3a3a3a); }
.wenrexa-order-qty { color: var(--wenrexa-text-secondary, #6b6b6b); }

/* Date + ID */
.wenrexa-order-dateid {
    font-size: 10pt;
    color: var(--wenrexa-text-muted, #3a3a3a);
    white-space: nowrap;
}
.wenrexa-order-id {
    font-weight: 500;
    color: var(--wenrexa-text-secondary, #6b6b6b);
    font-family: 'SF Mono', 'JetBrains Mono', ui-monospace, monospace;
}

/* Type badges (purchase / sale) */
.wenrexa-order-type-badge {
    font-size: 0.7em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.1rem 0.4rem;
    border-radius: 0.3rem;
}
.wenrexa-order-type-badge--purchase {
    background: rgba(232,163,46,0.12);
    color: #e8a32e;
}
.wenrexa-order-type-badge--sale {
    background: rgba(76,201,107,0.1);
    color: #4cc96b;
}

/* Admin avatar */
.wenrexa-order-avatar {
    width: 20px; height: 20px;
    border-radius: 50%;
    object-fit: cover; display: block;
    flex-shrink: 0;
}
.wenrexa-order-avatar-link {
    display: inline-flex;
    flex-shrink: 0;
}
.wenrexa-order-user-link {
    color: var(--wenrexa-text-secondary, #6b6b6b);
    text-decoration: none;
    font-size: 0.75em;
    max-width: 90px;
}
.wenrexa-order-user-link:hover {
    color: #fff;
    text-decoration: underline;
}
.wenrexa-order-arrow {
    color: var(--wenrexa-text-muted, #3a3a3a);
    font-size: 0.7em;
    flex-shrink: 0;
}
/* Inline users block */
.wenrexa-order-users-inline {
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
}
.wenrexa-order-from-label {
    color: var(--wenrexa-text-muted, #3a3a3a);
    font-size: 0.75em;
    flex-shrink: 0;
}

/* Order overlay */
.wenrexa-overlay-details {
    position: absolute; top: 0; left: 44px; right: 0;
    min-height: 100%;
    background: rgba(8,8,8,0.97);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border-radius: 0 var(--wenrexa-radius, 1rem) var(--wenrexa-radius, 1rem) 0;
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 0.75rem; padding: 0.5rem 1rem;
    opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
    z-index: 1;
}
.wenrexa-order-card:hover .wenrexa-overlay-details {
    opacity: 1; pointer-events: auto;
}

.wenrexa-detail-label {
    line-height: 1;
    margin-bottom: 0.2rem;
    font-size: 11pt;
    padding: 0.2rem 0.55rem;
}

/* Bundle group header */
.wenrexa-bundle-header {
    background: linear-gradient(150deg, #111, #1a1a1a);
    border-radius: var(--wenrexa-radius, 1rem);
    padding: 0.75rem 1rem;
}


/* ============================================================
   PAYOUT CARD
   ============================================================ */
.wenrexa-payout-card {
    background: var(--wenrexa-card, #0a0a0a);
    border-radius: var(--wenrexa-radius, 1rem);
    overflow: hidden;
    transition: background 0.25s ease;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: stretch;
    font-size: 12pt;
}
.wenrexa-payout-card:hover {
    background: var(--wenrexa-card-hover, #111111);
    overflow: visible;
    z-index: 10;
}

/* Status icon */
.wenrexa-payout-icon {
    width: 72px;
    min-height: 72px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    border-radius: var(--wenrexa-radius, 1rem) 0 0 var(--wenrexa-radius, 1rem);
}
.wenrexa-payout-icon--pending  { background: rgba(200,164,78,0.10); color: #c8a44e; }
.wenrexa-payout-icon--prog     { background: rgba(10,132,255,0.08); color: #0a84ff; }
.wenrexa-payout-icon--done     { background: rgba(52,199,89,0.08);  color: #34c759; }
.wenrexa-payout-icon--rejected { background: rgba(255,69,58,0.08);  color: #ff453a; }

/* Body */
.wenrexa-payout-body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    flex-grow: 1;
    padding: 0.5rem 0.75rem;
    gap: 0.25rem 0.75rem;
    overflow: hidden;
    min-width: 0;
}

.wenrexa-payout-info { flex: 1 1 180px; min-width: 0; }

.wenrexa-payout-title {
    font-size: 1em;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.wenrexa-payout-sub {
    color: var(--wenrexa-text-secondary, #6b6b6b);
    font-size: 0.75em;
}

/* Date + ID */
.wenrexa-payout-dateid {
    font-size: 10pt;
    color: var(--wenrexa-text-muted, #3a3a3a);
    white-space: nowrap;
}
.wenrexa-payout-idnum {
    font-weight: 500;
    color: var(--wenrexa-text-secondary, #6b6b6b);
    font-family: 'SF Mono', 'JetBrains Mono', ui-monospace, monospace;
}

/* Meta (amount) */
.wenrexa-payout-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    margin-left: auto;
}
.wenrexa-payout-price {
    font-size: 1em;
    font-weight: 600;
    font-family: 'SF Mono', 'JetBrains Mono', ui-monospace, monospace;
    white-space: nowrap;
}

/* Payout overlay */
.wenrexa-payout-overlay {
    position: absolute; top: 0; left: 72px; right: 0;
    min-height: 100%;
    background: rgba(8,8,8,0.97);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border-radius: 0 var(--wenrexa-radius, 1rem) var(--wenrexa-radius, 1rem) 0;
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 0.75rem; padding: 0.5rem 1rem;
    opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
}
.wenrexa-payout-card:hover .wenrexa-payout-overlay {
    opacity: 1; pointer-events: auto;
}

.wenrexa-payout-detail-label {
    line-height: 1;
    margin-bottom: 0.2rem;
    font-size: 11pt;
    padding: 0.2rem 0.55rem;
}

/* Summary widget cards */
.wenrexa-payout-widget {
    background: var(--wenrexa-card, #0a0a0a);
    border-radius: var(--wenrexa-radius, 1rem);
    padding: 1rem 1.25rem;
    flex: 1 1 200px;
    min-width: 180px;
}
.wenrexa-payout-widget-value {
    font-size: 1.25rem;
    font-weight: 700;
    font-family: 'SF Mono', 'JetBrains Mono', ui-monospace, monospace;
}


/* ============================================================
   ACTIVITY LOG CARD (avatar slot)
   ============================================================ */
.wenrexa-activity-avatar {
    width: 72px;
    min-height: 72px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--wenrexa-radius, 1rem) 0 0 var(--wenrexa-radius, 1rem);
    overflow: hidden;
}
.wenrexa-activity-avatar img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}
.wenrexa-activity-avatar--anon {
    background: rgba(155,155,155,0.08);
    color: #6b6b6b;
    font-size: 1.4rem;
}

/* Product card badge (overlay) */
.wenrexa-badge-product {
    border-radius: 20px;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
}

/* Product card detail label (overlay) */
.wenrexa-detail-product-label {
    line-height: 1;
    margin-bottom: .2rem;
    font-size: 11pt;
}

/* Download actions — always above overlay */
.wenrexa-order-card .wenrexa-download-actions {
    position: relative;
    z-index: 2;
}

/* Allow dropdown panel to overflow card bounds when open */
.wenrexa-order-card:has(.wenrexa-filter-dropdown-toggle:checked) {
    overflow: visible;
    z-index: 10;
}

/* ============================================================
   DISCOUNT EVENT CARD (extends .wenrexa-order-card)
   ============================================================ */

/* Left icon slot — discount percentage */
.wenrexa-discount-icon {
    width: 72px;
    min-height: 72px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: var(--wenrexa-radius, 1rem) 0 0 var(--wenrexa-radius, 1rem);
    font-family: 'SF Mono', 'JetBrains Mono', ui-monospace, monospace;
}
.wenrexa-discount-icon--active   { background: rgba(52,199,89,0.10);  color: #34c759; }
.wenrexa-discount-icon--expired  { background: rgba(155,155,155,0.06); color: #6b6b6b; }
.wenrexa-discount-icon--upcoming { background: rgba(200,164,78,0.10); color: #c8a44e; }

/* Price column (between poster and body in Upsert product cards) */
.wenrexa-discount-price-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.75rem;
    flex-shrink: 0;
    min-width: 80px;
}
.wenrexa-discount-price-new {
    font-size: 1.25rem;
    font-weight: 700;
    color: #34c759;
    font-family: 'SF Mono', 'JetBrains Mono', ui-monospace, monospace;
    white-space: nowrap;
}
.wenrexa-discount-price-old {
    font-size: 0.75rem;
    color: #6b6b6b;
    text-decoration: line-through;
    white-space: nowrap;
}

/* Product items in overlay */
.wenrexa-discount-product-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}
.wenrexa-discount-product-poster {
    width: 28px; height: 28px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
}
.wenrexa-discount-product-poster--empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(155,155,155,0.08);
    color: #6b6b6b;
    font-size: 0.8rem;
}


/* ============================================================
   COMMENT / REVIEW CARD (MyComments page)
   ============================================================ */

/* Icon slot (left side — like payout icon) */
.wenrexa-comment-icon {
    width: 52px;
    min-height: 52px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    border-radius: var(--wenrexa-radius, 1rem) 0 0 var(--wenrexa-radius, 1rem);
}
.wenrexa-comment-icon--comment  { background: transparent; color: #fff; }
.wenrexa-comment-icon--review   { background: transparent; color: #c8a44e; }

/* On hover: icon area matches overlay bg */
.wenrexa-comment-card:hover .wenrexa-comment-icon {
    background: rgba(8,8,8,0.97);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}

/* Overlay offset = icon width */
.wenrexa-comment-card .wenrexa-overlay-details {
    left: 52px;
}

/* Line 2: product name */
.wenrexa-comment-product {
    color: var(--wenrexa-text-secondary, #6b6b6b);
    font-size: 0.8em;
    line-height: 1.3;
}
.wenrexa-comment-product-link {
    color: var(--wenrexa-text-secondary, #6b6b6b);
    font-size: 1em;
}
.wenrexa-comment-product-link:hover {
    color: #fff;
}

/* Line 3: user · date · stars */
.wenrexa-comment-meta {
    font-size: 0.75em;
    color: var(--wenrexa-text-muted, #3a3a3a);
    line-height: 1.3;
}
.wenrexa-comment-meta .wenrexa-order-user-link {
    font-size: 1em;
    max-width: 120px;
}
.wenrexa-comment-dot {
    color: var(--wenrexa-text-muted, #3a3a3a);
    flex-shrink: 0;
}

/* Stars in card */
.wenrexa-comment-stars {
    display: inline-flex;
    gap: 0.1rem;
    font-size: 0.85em;
    color: #c8a44e;
    flex-shrink: 0;
}
.wenrexa-comment-stars .fa-regular {
    color: #3a3a3a;
}

/* ============================================================
   NEWS CARD (Product News in modal)
   ============================================================ */
.wenrexa-news-icon {
    background: transparent;
    color: #5b9bd5;
}
.wenrexa-news-card:hover .wenrexa-comment-icon {
    background: rgba(8,8,8,0.97);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.wenrexa-news-card .wenrexa-overlay-details {
    left: 52px;
}

/* ============================================================
   REFERRAL CARD
   ============================================================ */
.wenrexa-referral-card .wenrexa-overlay-details {
    left: 52px;
}
.wenrexa-referral-card:hover .wenrexa-comment-icon {
    background: rgba(8,8,8,0.97);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}

/* Icon slot: registration count */
.wenrexa-referral-icon {
    background: transparent;
    color: var(--wenrexa-text-secondary, #6b6b6b);
}
.wenrexa-referral-count {
    font-size: 1.1rem;
    font-weight: 700;
    font-family: 'SF Mono', 'JetBrains Mono', ui-monospace, monospace;
    color: #fff;
}

/* Action buttons always visible */
.wenrexa-referral-card .wenrexa-order-meta {
    position: relative;
    z-index: 2;
}


/* Danger button for delete */
.wenrexa-btn-danger {
    background: rgba(255,69,58,0.12);
    color: #ff453a;
    border: none;
    cursor: pointer;
    padding: 0.25rem 0.6rem;
    border-radius: 0.4rem;
    font-size: 0.8em;
    font-weight: 500;
    transition: background 0.2s, color 0.2s;
    display: inline-flex;
    align-items: center;
}
.wenrexa-btn-danger:hover {
    background: rgba(255,69,58,0.25);
    color: #ff6961;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 576px) {
    /* Orders */
    .wenrexa-order-poster    { width: 45px; min-height: 45px; }
    .wenrexa-overlay-details { left: 44px; }
    .wenrexa-order-info      { flex-basis: 100%; }

    /* Payouts */
    .wenrexa-payout-icon     { width: 56px; min-height: 56px; font-size: 1.1rem; }
    .wenrexa-payout-overlay  { left: 56px; }
    .wenrexa-payout-info     { flex-basis: 100%; }

    /* Activity */
    .wenrexa-activity-avatar { width: 56px; min-height: 56px; }

    /* Discount */
    .wenrexa-discount-icon   { width: 56px; min-height: 56px; font-size: 0.95rem; }

    /* Comment card */
    .wenrexa-comment-icon { width: 40px; min-height: 40px; font-size: 0.9rem; }
    .wenrexa-comment-card .wenrexa-overlay-details { left: 40px; }

    /* Referral card */
    .wenrexa-referral-card .wenrexa-comment-icon { width: 40px; min-height: 40px; }
    .wenrexa-referral-card .wenrexa-overlay-details { left: 40px; }
    .wenrexa-referral-count { font-size: 0.9rem; }

    /* News card */
    .wenrexa-news-card .wenrexa-comment-icon { width: 40px; min-height: 40px; font-size: 0.9rem; }
    .wenrexa-news-card .wenrexa-overlay-details { left: 40px; }
}

/* ═══════════════════════════════════════════
   wenrexa.share.css — Share buttons
   ═══════════════════════════════════════════ */

.wnx-share {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
}

.wnx-share__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: rgba(255,255,255,.5);
    font-size: 14px;
    cursor: pointer;
    transition: color .15s, border-color .15s, background .15s;
    text-decoration: none;
    padding: 0;
    line-height: 1;
}
.wnx-share__btn:hover {
    color: #fff;
    border-color: rgba(255,255,255,.15);
    background: rgba(255,255,255,.06);
}

/* Platform accent colors on hover */
.wnx-share__btn--x:hover       { color: #fff; }
.wnx-share__btn--telegram:hover { color: #2aabee; border-color: rgba(42,171,238,.25); }
.wnx-share__btn--vk:hover       { color: #0077ff; border-color: rgba(0,119,255,.25); }
.wnx-share__btn--pinterest:hover { color: #e60023; border-color: rgba(230,0,35,.25); }
.wnx-share__btn--copy:hover     { color: #4ecdc4; border-color: rgba(78,205,196,.25); }

/* Copied feedback */
.wnx-share__btn--copy.copied {
    color: #4ecdc4;
    border-color: rgba(78,205,196,.3);
}
.wnx-share__btn--copy.copied i::before {
    content: "\f00c"; /* fa-check */
}

/* ═══════════════════════════════════════════
   wenrexa.breadcrumb.css — Visual breadcrumbs
   ═══════════════════════════════════════════ */

.wnx-breadcrumb {
    padding: .5rem 0 0;
}

.wnx-breadcrumb__list {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.wnx-breadcrumb__list::-webkit-scrollbar { display: none; }

.wnx-breadcrumb__item {
    font-size: .78rem;
    color: rgba(255,255,255,.4);
    line-height: 1.4;
}

.wnx-breadcrumb__item + .wnx-breadcrumb__item::before {
    content: "›";
    display: inline-block;
    margin: 0 .4rem;
    color: rgba(255,255,255,.2);
    font-size: .78rem;
}

.wnx-breadcrumb__item a {
    color: rgba(255,255,255,.5);
    text-decoration: none;
    transition: color .15s;
}
.wnx-breadcrumb__item a:hover {
    color: rgba(255,255,255,.8);
}

.wnx-breadcrumb__item--current {
    color: rgba(255,255,255,.7);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px;
}

:root {
    --wenrexa-bg-primary: #09090b;
    --wenrexa-bg-secondary: #1a1a1d;
    --wenrexa-bg-tertiary: #0e0e10;
    --wenrexa-bg-card: rgba(255,255,255,.03);
    --wenrexa-bg-hover: rgba(255,255,255,.06);
    --wenrexa-border: rgba(255,255,255,.08);
    --wenrexa-border-subtle: rgba(255,255,255,.04);
    --wenrexa-text-primary: #e8e8e6;
    --wenrexa-text-secondary: #999995;
    --wenrexa-text-tertiary: #6e6e73;
    --wenrexa-accent: #da5521;
    --wenrexa-accent-hover: #ac522f;
    --wenrexa-accent-green: #4e7435;
    --wenrexa-accent-green-hover: #e01235;


    --wenrexa-success: #30d158;
    --wenrexa-warning: #ffd60a;
    --wenrexa-error: #ff453a;
    --wenrexa-radius-sm: 8px;
    --wenrexa-radius-md: 12px !important;
    --wenrexa-radius-lg: 16px;
    --wenrexa-radius-xl: 24px;
    --wenrexa-shadow: 0 4px 24px rgba(0,0,0,0.4);
    --wenrexa-transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}




/* Main Container */
.wenrexa-creator {
    max-width: 980px;
    margin: 0 auto;
    padding: 40px 24px;
}
 
.wenrexa-creator-xl {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 24px;
}
/* Header */
.wenrexa-creator-header {
    text-align: center;
    margin-bottom: 24px;
}

.wenrexa-creator-title {
    font-size: 32px;
    font-weight: 600;
    letter-spacing: -0.5px;
    margin-bottom: 8px;
    background: linear-gradient(135deg, var(--wenrexa-text-primary) 0%, var(--wenrexa-text-secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.wenrexa-creator-subtitle {
    font-size: 17px;
    color: var(--wenrexa-text-secondary);
    font-weight: 400;
}

/* Horizontal Step Navigation */
.wenrexa-step-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
 
    background: var(--wenrexa-bg-secondary);
    border-radius: var(--wenrexa-radius-lg) var(--wenrexa-radius-lg) 0rem 0rem;
    padding: 6px; 
    flex-wrap: wrap;
}

.wenrexa-step-tabs {
    display: flex;
    align-items: center;
    gap: 0;
    flex: 1;
    min-width: 0;
    justify-content: center;
    flex-wrap: wrap;
}

.wenrexa-step-tab {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-radius: var(--wenrexa-radius-md);
    cursor: pointer;
    transition: var(--wenrexa-transition);
    background: transparent;
    border: none;
    font-family: inherit;
    position: relative;
    white-space: nowrap;
    flex-shrink: 0;
}

    .wenrexa-step-tab:hover:not(.disabled) {
        background: var(--wenrexa-bg-tertiary);
    }

    .wenrexa-step-tab.active {
        background: var(--wenrexa-bg-tertiary);
    }

    .wenrexa-step-tab.disabled {
        cursor: not-allowed;
        opacity: 0.5;
    }

.wenrexa-step-number {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--wenrexa-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--wenrexa-text-secondary);
    transition: var(--wenrexa-transition);
    flex-shrink: 0;
}

.wenrexa-step-tab.active .wenrexa-step-number {
    background: var(--wenrexa-accent);
    color: white;
}

.wenrexa-step-tab.completed .wenrexa-step-number {
    background: var(--wenrexa-success);
    color: white;
}

    .wenrexa-step-tab.completed .wenrexa-step-number::after {
        content: '✓';
        font-size: 12px;
    }

.wenrexa-step-tab.completed .wenrexa-step-num-text {
    display: none;
}

.wenrexa-step-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--wenrexa-text-secondary);
    transition: var(--wenrexa-transition);
}

.wenrexa-step-tab.active .wenrexa-step-label {
    color: var(--wenrexa-text-primary);
}

.wenrexa-step-tab.completed .wenrexa-step-label {
    color: var(--wenrexa-text-primary);
}

/* Connector line between tabs */
.wenrexa-step-connector {
    width: 24px;
    height: 2px;
    background: var(--wenrexa-border);
    transition: var(--wenrexa-transition);
    flex-shrink: 0;
}

    .wenrexa-step-connector.completed {
        background: var(--wenrexa-success);
    }

/* Requirement Indicator Buttons */
.wenrexa-nav-indicators {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-left: 12px; 
    flex-shrink: 0;
    padding-right: 12px;
}


.wenrexa-indicator-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--wenrexa-radius-sm);
    border: none;
    cursor: pointer;
    transition: var(--wenrexa-transition);
    font-family: inherit;
}

    .wenrexa-indicator-btn i {
        font-size: 14px;
    }

    .wenrexa-indicator-btn.errors {
        background: rgba(255, 69, 58, 0.15);
        color: var(--wenrexa-error);
    }

        .wenrexa-indicator-btn.errors:hover {
            background: rgba(255, 69, 58, 0.25);
        }

        .wenrexa-indicator-btn.errors.resolved {
            background: rgba(48, 209, 88, 0.15);
            color: var(--wenrexa-success);
        }

            .wenrexa-indicator-btn.errors.resolved:hover {
                background: rgba(48, 209, 88, 0.25);
            }

    .wenrexa-indicator-btn.warnings {
        background: rgba(255, 214, 10, 0.15);
        color: var(--wenrexa-warning);
    }

        .wenrexa-indicator-btn.warnings:hover {
            background: rgba(255, 214, 10, 0.25);
        }

        .wenrexa-indicator-btn.warnings.resolved {
            background: rgba(48, 209, 88, 0.1);
            color: var(--wenrexa-success);
            opacity: 0.6;
        }

    .wenrexa-indicator-btn.active {
        box-shadow: 0 0 0 2px var(--wenrexa-bg-primary), 0 0 0 4px currentColor;
    }

.wenrexa-indicator-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--wenrexa-error);
    color: white;
}

.wenrexa-indicator-btn.warnings .wenrexa-indicator-badge {
    background: var(--wenrexa-warning);
    color: #000;
}

.wenrexa-indicator-btn.resolved .wenrexa-indicator-badge {
    display: none;
}

.wenrexa-requirement-item.wenrexa-progress {
    color: white
}


.wenrexa-requirements-mini {
    padding: 1rem 2rem;
    animation: wenrexa-fadeIn 0.3s ease;
    color: #ff9f09;
 
}
/* Requirements Panel (inside card) */
.wenrexa-requirements-panel {
    display: none;
    padding: 24px;
    animation: wenrexa-fadeIn 0.3s ease;
}

    .wenrexa-requirements-panel.active {
        display: block;
    }

.wenrexa-requirements-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.wenrexa-requirements-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
}

    .wenrexa-requirements-title.errors {
        /*color: var(--wenrexa-error);*/
        color: var(--wenrexa-warning);
    }

    .wenrexa-requirements-title.warnings {
        color: var(--wenrexa-warning);
    }

    .wenrexa-requirements-title.success {
        color: var(--wenrexa-success);
    }

.wenrexa-requirements-close {
    width: 32px;
    height: 32px;
    border-radius: var(--wenrexa-radius-sm);
    border: none;
    background: var(--wenrexa-bg-secondary);
    color: var(--wenrexa-text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--wenrexa-transition);
}

    .wenrexa-requirements-close:hover {
        background: var(--wenrexa-bg-hover);
        color: var(--wenrexa-text-primary);
    }

.wenrexa-requirement-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wenrexa-requirement-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--wenrexa-bg-secondary);
    border-radius: var(--wenrexa-radius-md);
    cursor: pointer;
    transition: var(--wenrexa-transition);
}

    .wenrexa-requirement-item:hover {
        background: var(--wenrexa-bg-hover);
    }

.wenrexa-requirement-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--wenrexa-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.wenrexa-requirement-item.pending .wenrexa-requirement-icon {
    background: rgba(255, 69, 58, 0.15);
    color: var(--wenrexa-error);
}

.wenrexa-requirement-item.success .wenrexa-requirement-icon {
    background: rgba(48, 209, 88, 0.15);
    color: var(--wenrexa-success);
}

.wenrexa-requirement-item.warning .wenrexa-requirement-icon {
    background: rgba(255, 214, 10, 0.15);
    color: var(--wenrexa-warning);
}

.wenrexa-requirement-info {
    flex: 1;
}

.wenrexa-requirement-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--wenrexa-text-primary);
    margin-bottom: 2px;
}

.wenrexa-requirement-status {
    font-size: 12px;
    color: var(--wenrexa-text-tertiary);
}

.wenrexa-requirement-item.success .wenrexa-requirement-status {
    color: var(--wenrexa-success);
}

.wenrexa-requirement-item.pending .wenrexa-requirement-status {
    color: var(--wenrexa-error);
}

.wenrexa-requirement-item.warning .wenrexa-requirement-status {
    color: var(--wenrexa-warning);
}

.wenrexa-requirement-arrow {
    color: var(--wenrexa-text-tertiary);
    font-size: 12px;
}

/* Progress Steps - hidden by default, shown on mobile */
.wenrexa-steps {
    display: none;
    justify-content: center;
    gap: 8px;
    margin-bottom: 24px;
}

.wenrexa-step-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--wenrexa-border);
    transition: var(--wenrexa-transition);
}

    .wenrexa-step-dot.active {
        width: 24px;
        border-radius: 4px;
        background: var(--wenrexa-accent);
    }

    .wenrexa-step-dot.completed {
        background: var(--wenrexa-success);
    }

/* Mobile indicators row */
.wenrexa-mobile-indicators {
    display: none;
    justify-content: center;
    gap: 8px;
    margin-bottom: 16px;
}

/* Tablet: hide labels, show only numbers */
@media (max-width: 600px) {
    .wenrexa-step-nav {
        padding: 4px;
        gap: 8px;
    }

    .wenrexa-step-tab {
        padding: 10px 12px;
        gap: 0;
    }

    .wenrexa-step-label {
        display: none;
    }

    .wenrexa-step-connector {
        width: 12px;
    }

    .wenrexa-nav-indicators {
        padding-left: 8px;
        margin-left: 0;
        border-left: none;
    }

    .wenrexa-indicator-btn {
        width: 32px;
        height: 32px;
    }

        .wenrexa-indicator-btn i {
            font-size: 12px;
        }
}

@media (max-width: 420px) {
    .wenrexa-step-nav {
        justify-content: center;
    }

        .wenrexa-step-nav .wenrexa-nav-indicators {
            display: none;
        }

    .wenrexa-mobile-indicators {
        display: flex;
    }

    .wenrexa-steps {
        display: none;
    }
}

/* Main Card */
.wenrexa-card-glass {
    background: var(--wenrexa-bg-card);
    border-radius: 0rem 0rem var(--wenrexa-radius-xl)   var(--wenrexa-radius-xl);
 
    overflow: hidden;
    box-shadow: var(--wenrexa-shadow);
}

.wenrexa-card-panel {
    border: 1px solid var(--wenrexa-border);
    border-radius: 1rem;
    background: var(--wenrexa-bg-secondary);
    padding:1.2rem;
    margin-top:1rem
}


/* Step Content */
.wenrexa-step-content {
    padding: 20px;
    display: none;
    animation: wenrexa-fadeIn 0.4s ease;
}

    .wenrexa-step-content.active {
        display: block;
    }

@keyframes wenrexa-fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Upload Zone */
.wenrexa-upload-zone {
    position: relative;
}

.wenrexa-artworks-input {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px;
    border-radius: var(--wenrexa-radius-md);
    min-height: 52px;
    margin-bottom: 1rem
}

.wenrexa-upload-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    background: var(--wenrexa-bg-tertiary);
    border-radius: var(--wenrexa-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .wenrexa-upload-icon svg {
        width: 32px;
        height: 32px;
        stroke: var(--wenrexa-text-secondary);
    }

.wenrexa-upload-text {
    font-size: 17px;
    font-weight: 500;
    color: var(--wenrexa-text-primary);
    margin-bottom: 8px;
}

.wenrexa-upload-hint {
    font-size: 14px;
    color: var(--wenrexa-text-tertiary);
}

.wenrexa-upload-preview {
    width: 100%;
    aspect-ratio: 16/10;
    object-fit: cover;
    display: none;
}

.wenrexa-upload-zone.has-image .wenrexa-upload-preview {
    display: block;
}

/* Input Fields */
.wenrexa-field {
    margin-top: 15px;
    position: relative
}


/* Убираем стандартную стрелку */
.wenrexa-field-select select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 40px; /* Место для кастомной стрелки */
    background-image: none; /* Убираем стандартную стрелку в некоторых браузерах */
}




    .wenrexa-field-select select:disabled {
        background: #2b2b2b;
        pointer-events: none;
        color: #6e6e6e;
    }


/* Кастомная стрелка */
.wenrexa-field-select::after {
    content: "\f078";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%) rotate(0deg);
    font-size: 12px;
    color: #333;
    pointer-events: none;
    transition: transform 0.3s ease;
    z-index: 1;
}

.wenrexa-field-select:focus-within::after {
    transform: translateY(-50%) rotate(180deg);
}
/* Fallback для старых браузеров */
.wenrexa-field-select select:focus + label::after {
    transform: translateY(-50%) rotate(180deg);
}


/* Для поддержки в старых браузерах */
.wenrexa-field-select::-ms-expand {
    display: none; /* Убираем стрелку в IE */
}




.wenrexa-title {
    display: block;
    font-size: 12px;
    font-weight: 200;
    color: var(--wenrexa-text-secondary);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    top: 0;
    left: 0;
}



    .wenrexa-title > i {
        margin: 0rem 0.5rem;
    }

.wenrexa-label {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: var(--wenrexa-text-secondary);
    margin-bottom: 8px;
    letter-spacing: .5px;
    position: absolute;
    top: 0;
    left: 0;
    padding: .4rem 0.8rem;
    pointer-events: none;
    width: 100%;
}

.wenrexa-input {
    width: 100%;
    background: #0a0a0b;
    border: 0px solid var(--wenrexa-border-subtle);
    border-radius: var(--wenrexa-radius-md);
    padding: 16px 20px;
    font-size: 17px;
    color: var(--wenrexa-text-primary);
    transition: var(--wenrexa-transition);
    font-family: inherit;
}

    .wenrexa-input:focus {
        outline: none;
        border-color: var(--wenrexa-accent-green);
        box-shadow: 0 0 0 4px rgba(160, 200, 16, 0.15)
    }

    .wenrexa-input::placeholder {
        color: var(--wenrexa-text-tertiary);
    }

.wenrexa-input-large {
    font-size: 16px;
    padding: 1.2rem 1rem 0.5rem 0.8rem;
    text-align: start;
    letter-spacing: -.3px;
    background: #e9e9e9 !important;
    color: #1f1f1f !important;
    font-weight: 600;
}


    .wenrexa-input-large.disabled {
        background: #2b2b2b!important;
        pointer-events: none;
        color: #6e6e6e !important;
    }
.minw-250 {
    min-width: 250px !important;
}
.minw-200 {
    min-width: 200px !important;
}
.minw-150 {
    min-width: 150px !important;
}



.wenrexa-input-default {
    padding: 1.0rem 1.0rem 1.2rem 1.0rem!important;
}
/* для JS автосохранение эффект */
.wenrexa-input.is-valid,
.wenrexa-input.is-valid:focus {
    border-color: #28a745; /* зелёный */
    box-shadow: 0 0 0 4px rgba(40, 167, 69, 0.25);
}

.wenrexa-input.is-invalid,
.wenrexa-input.is-invalid:focus {
    border-color: #dc3545; /* красный */
    box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.35);
}

.se-wrapper-wysiwyg.wysiwyg-valid {
    outline: 2px solid #28a745;
    outline-offset: 2px;
}

.se-wrapper-wysiwyg.wysiwyg-invalid {
    outline: 2px solid #dc3545;
    outline-offset: 2px;
}

.wenrexa-inline-hint {
    margin-top: 6px;
    font-size: 0.85rem;
    color: #ff5b5b; /* wenrexa-error */
    opacity: 0;
    transition: opacity .25s ease;
}

    .wenrexa-inline-hint.show {
        opacity: 1;
    }

.wenrexa-step-tab.blocked {
    opacity: 0.35;
    cursor: not-allowed !important;
    pointer-events: none;
}


/* Type Selector */
/* Type Grid - Scrollable list */
.wenrexa-type-grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 12px;
    max-height: 320px;
    overflow-y: auto;
    padding-right: 8px;
}

    /* Custom scrollbar */
    .wenrexa-type-grid::-webkit-scrollbar {
        width: 6px;
    }

    .wenrexa-type-grid::-webkit-scrollbar-track {
        background: var(--wenrexa-bg-secondary);
        border-radius: 3px;
    }

    .wenrexa-type-grid::-webkit-scrollbar-thumb {
        background: var(--wenrexa-border);
        border-radius: 3px;
    }

        .wenrexa-type-grid::-webkit-scrollbar-thumb:hover {
            background: var(--wenrexa-text-tertiary);
        }

.wenrexa-type-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px; 
    border-radius: var(--wenrexa-radius-md);
    cursor: pointer;
    transition: var(--wenrexa-transition);
    flex-shrink: 0;
    background: var(--wenrexa-bg-secondary);
}

    .wenrexa-type-item:hover {
        border-color: var(--wenrexa-border);
        background: var(--wenrexa-bg-hover);
    }

    .wenrexa-type-item.selected {
        border-color: var(--wenrexa-accent-green);
        background: rgba(132, 209, 54, 0.08)
    }

.wenrexa-type-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--wenrexa-radius-sm);
    background: var(--wenrexa-bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--wenrexa-text-secondary);
    flex-shrink: 0;
    transition: var(--wenrexa-transition);
}

.wenrexa-type-img {
    width: 40px;
    height: 40px;
    border-radius: var(--wenrexa-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--wenrexa-text-secondary);
    flex-shrink: 0;
    position: relative;
    transition: var(--wenrexa-transition);
    overflow: hidden
}


    .wenrexa-type-img > img {
        background-size: contain;
        position: absolute;
        height: inherit;
        width: inherit;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }


.wenrexa-type-item:hover .wenrexa-type-icon {
    color: var(--wenrexa-text-primary);
}

.wenrexa-type-item.selected .wenrexa-type-icon {
    background: rgba(148, 255, 118, 0.15);
    color: var(--wenrexa-accent-green);
}

.wenrexa-type-info {
    flex: 1;
    min-width: 0;
}

.wenrexa-type-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--wenrexa-text-primary);
    margin-bottom: 2px;
}

.wenrexa-type-desc {
    font-size: 12px;
    color: var(--wenrexa-text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wenrexa-type-item.selected .wenrexa-type-name {
    color: var(--wenrexa-accent-green);
}

/* ====================== Type Picker Button ====================== */
/* Reuses .wenrexa-type-item / .selected styles — only overrides below */
.wenrexa-typepicker-btn {
    width: 100%;
    border: 0;
    text-align: left;
    font: inherit;
}

.wenrexa-typepicker-arrow {
    color: var(--wenrexa-text-tertiary);
    font-size: 12px;
    flex-shrink: 0;
    margin-right: 0.5rem;
    transition: var(--wenrexa-transition);
}

    .wenrexa-typepicker-btn:hover .wenrexa-typepicker-arrow {
        color: var(--wenrexa-text-primary);
        transform: translateX(2px);
    }

    .wenrexa-typepicker-btn.selected .wenrexa-typepicker-arrow {
        color: var(--wenrexa-accent-green);
    }

/* ====================== Type Picker Panel ====================== */
.wenrexa-typepanel-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.wenrexa-typepanel-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--wenrexa-text-primary);
    margin: 0;
}

.wenrexa-typepanel-body {
    display: flex;
    gap: 20px;
}

.wenrexa-typepanel-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    max-height: 550px;
    overflow-y: auto;
    padding-right: 1rem;
    flex: 1;
    min-width: 0;
    align-content: flex-start;
}

.wenrexa-typepanel-detail {
    width: 280px;
    flex-shrink: 0;
    background: var(--wenrexa-bg-secondary);
    border-radius: var(--wenrexa-radius-md);
    padding: 24px 20px;
    position: sticky;
}

.wenrexa-typepanel-detail-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: var(--wenrexa-text-tertiary);
    font-size: 13px;
    text-align: center;
    padding: 20px 0;
}

    .wenrexa-typepanel-detail-empty i {
        font-size: 20px;
    }

.wenrexa-typepanel-detail-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.wenrexa-typepanel-detail-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--wenrexa-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--wenrexa-text-secondary);
    flex-shrink: 0;
}

.wenrexa-typepanel-detail-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--wenrexa-text-primary);
}

.wenrexa-typepanel-detail-desc {
    font-size: 13px;
    line-height: 1.5;
    color: var(--wenrexa-text-secondary);
}

    .wenrexa-typepanel-grid .wenrexa-type-item {
        flex-direction: row;
        align-items: center;
        padding: 8px;
        gap: 12px;
        border: 0;
        border-radius: var(--wenrexa-radius-md);
        width: calc(50% - 5px);
        box-sizing: border-box;
        overflow: hidden;
    }

    .wenrexa-typepanel-grid .wenrexa-type-icon {
        width: 40px;
        height: 40px;
        font-size: 18px;
        flex-shrink: 0;
    }

    .wenrexa-typepanel-grid .wenrexa-type-info {
        min-width: 0;
        flex: 1;
    }

    .wenrexa-typepanel-grid .wenrexa-type-name {
        font-size: 13px;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .wenrexa-typepanel-grid .wenrexa-type-desc {
        display: none;
    }

    .wenrexa-typepanel-grid .wenrexa-type-item:hover {
        background: var(--wenrexa-bg-hover);
    }

    .wenrexa-typepanel-grid .wenrexa-type-item.selected {
        background: rgba(132, 209, 54, 0.08);
    }

@media (max-width: 991px) {
    .wenrexa-typepanel-body {
        flex-direction: column;
    }

    .wenrexa-typepanel-detail {
        width: 100%;
        position: static;
    }
}

@media (max-width: 575px) {
    .wenrexa-typepanel-grid .wenrexa-type-item {
        width: 100%;
    }

    .wenrexa-typepanel-detail-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

/* Price Section */
.wenrexa-price-section {
    display: block;
    align-items: center;
    gap: 7px;
}

/* Price compact — full width in upsert context */
.wenrexa-price-section .wenrexa-price-compact {
    width: auto;
    flex: unset;
}

/* Price display container */
.wpc-display {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 1rem;
    background: #0a0a0b;
    padding: 1rem;
    border-radius: 1rem;
}

/* Prevent currency symbol from wrapping to new line */
#prod-price-final {
    white-space: nowrap;
}

/* Type picker section — same visual as wpc-display */
.wpc-type-section {
    border-radius: 1rem;
    margin-top: 1rem;
}

/* Earnings rows (net profit, total cost, warnings) */
.wpc-earn-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
    font-size: 13px;
    color: #a1a1aa;
}

.wpc-earn-row i {
    font-size: 13px;
    flex-shrink: 0;
    width: 16px;
    text-align: center;
}

.wpc-earn-row strong {
    margin-left: auto;
    font-weight: 700;
}

.wpc-earn-row--profit { color: #4ade80; }
.wpc-earn-row--profit i { color: #4ade80; }
.wpc-earn-row--profit strong { color: #4ade80; }

.wpc-earn-row--warn { color: #facc15; }
.wpc-earn-row--warn i { color: #facc15; }

.wpc-earn-row--total { color: #a1a1aa; }
.wpc-earn-row--total strong { color: #e4e4e7; }

/* Info tooltip icon next to section title */
.wpc-info-tip {
    font-size: 12px;
    color: #52525b;
    cursor: help;
    margin-left: 4px;
    vertical-align: middle;
    transition: color .15s;
}

.wpc-info-tip:hover {
    color: #a1a1aa;
}

/* Discount events block */
.wpc-events {
    margin-top: .75rem;
    border-top: 1px solid rgba(255,255,255,.06);
    padding-top: .5rem;
}

.wpc-events__head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #71717a;
    margin-bottom: 4px;
}

.wpc-events__head i { font-size: 11px; }


.wenrexa-price-input-wrapper {
    flex: 1;
    position: relative;
}

.wenrexa-price-currency {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    font-weight: 600;
    color: var(--wenrexa-text-secondary);
}

.wenrexa-price-input {
    width: 100%;
    background: var(--wenrexa-bg-tertiary);
    border: 1px solid var(--wenrexa-border-subtle);
    border-radius: var(--wenrexa-radius-md);
    padding: 16px 20px 16px 48px;
    font-size: 24px;
    font-weight: 600;
    color: var(--wenrexa-text-primary);
    transition: var(--wenrexa-transition);
    font-family: inherit;
}

    .wenrexa-price-input:focus {
        outline: none;
        border-color: var(--wenrexa-accent);
    }

.wenrexa-free-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    background: var(--wenrexa-bg-tertiary);
    border-radius: var(--wenrexa-radius-md);
    cursor: pointer;
    transition: var(--wenrexa-transition);
}

    .wenrexa-free-toggle:hover {
        background: var(--wenrexa-bg-hover);
    }

    .wenrexa-free-toggle.active {
        background: rgba(48, 209, 88, 0.15);
    }

.wenrexa-toggle-switch {
    width: 44px;
    height: 26px;
    background: var(--wenrexa-border);
    border-radius: 13px;
    position: relative;
    transition: var(--wenrexa-transition);
}

    .wenrexa-toggle-switch::after {
        content: '';
        position: absolute;
        width: 22px;
        height: 22px;
        background: white;
        border-radius: 50%;
        top: 2px;
        left: 2px;
        transition: var(--wenrexa-transition);
    }

.wenrexa-free-toggle.active .wenrexa-toggle-switch {
    background: var(--wenrexa-success);
}

    .wenrexa-free-toggle.active .wenrexa-toggle-switch::after {
        left: 20px;
    }

.wenrexa-toggle-label {
    font-size: 15px;
    font-weight: 500;
    color: var(--wenrexa-text-primary);
}

/* Expandable Section */
.wenrexa-expandable {
    margin-top: 4px;
    border-top: 1px solid var(--wenrexa-border-subtle);
    padding-top: 4px;
}

.wenrexa-expand-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 12px 0;
}

.wenrexa-expand-title {
    font-size: 15px;
    font-weight: 500;
    color: var(--wenrexa-text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: var(--wenrexa-transition);
}

    .wenrexa-expand-title:hover {
        color: white;
    }


.wenrexa-expand-trigger:hover .wenrexa-expand-title {
    color: white;
    transform: scale(1.04);
}

    .wenrexa-expand-trigger:hover .wenrexa-expand-title i {
        color: white;
        transform: scale(1.04);
        transition: transform 0.1s ease;
    }







.wenrexa-expand-icon {
    width: 20px;
    height: 20px;
    transition: var(--wenrexa-transition);
}

.wenrexa-expandable.open .wenrexa-expand-icon {
    transform: rotate(180deg);
}

.wenrexa-expand-content {
    display: none;
    padding-top: 16px;
}

.wenrexa-expandable.open .wenrexa-expand-content {
    display: block;
    animation: wenrexa-fadeIn 0.3s ease;
}

/* Tags */
.wenrexa-tags-input {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px;
    border-radius: var(--wenrexa-radius-md);
    border: 1px solid var(--wenrexa-border-subtle);
    min-height: 52px;
}



.wenrexa-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--wenrexa-bg-secondary);
    border-radius: 20px;
    font-size: 13px;
    
    color: var(--wenrexa-text-primary);
}
    .wenrexa-tag.selected {
        background: var(--wenrexa-accent);
    }

    .wenrexa-tag:hover {
        background: var(--wenrexa-bg-hover);
    }
.wenrexa-chip-suggestion {
    opacity: .45;
    transition: opacity .15s ease;
}

    .wenrexa-chip-suggestion:hover {
        opacity: .85;
    }




.wenrexa-tag-remove {
    width: 16px;
    height: 16px;
    cursor: pointer;
    opacity: 0.6;
    transition: var(--wenrexa-transition);
}

    .wenrexa-tag-remove:hover {
        opacity: 1;
    }

.wenrexa-tag-input {
    flex: 1;
    min-width: 100px;
    background: none;
    border: none;
    font-size: 14px;
    color: var(--wenrexa-text-primary);
    padding: 6px;
}

    .wenrexa-tag-input:focus {
        outline: none;
    }

/* Navigation */
.wenrexa-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: var(--wenrexa-bg-secondary);
}

.wenrexa-nav-status {
    justify-content: center;
    gap: 16px;
    padding: 10px 20px;
    border-bottom: none;
    min-height: 40px;
}

.wenrexa-nav-guidance {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--wenrexa-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 1;
    min-width: 0;
}

.wenrexa-btn {
    padding: 12px 24px;
    border-radius: var(--wenrexa-radius-md);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--wenrexa-transition);
    border: none;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
}

.wenrexa-btn-secondary {
    background: var(--wenrexa-bg-tertiary);
    color: var(--wenrexa-text-primary);
}

    .wenrexa-btn-secondary:hover {
        background: var(--wenrexa-bg-hover);
    }

.wenrexa-btn-primary {
    background: var(--wenrexa-accent);
    color: white;
}

    .wenrexa-btn-primary:hover {
        background: var(--wenrexa-accent-hover);
        transform: translateY(-1px);
    }

    .wenrexa-btn-primary:active {
        transform: translateY(0);
    }

.wenrexa-btn-primary.is-active {
    background: #22c55e;
    color: #fff;
}

    .wenrexa-btn-primary.is-active:hover {
        background: #16a34a;
    }

.wenrexa-btn:disabled,
.wenrexa-btn[disabled],
.wenrexa-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
    color: #fff;
}

.wenrexa-btn--disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

    .wenrexa-btn--disabled:hover {
        background: rgba(255,255,255,0.08);
    }



/* Quick Info */
.wenrexa-quick-info {
    display: flex;
    gap: 24px;
    padding: 16px 40px;
    background: rgba(200, 16, 46, 0.05);
    border-top: 1px solid var(--wenrexa-border-subtle);
}

.wenrexa-info-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--wenrexa-text-secondary);
}

.wenrexa-info-icon {
    width: 16px;
    height: 16px;
    stroke: var(--wenrexa-success);
}

/* Textarea */
.wenrexa-textarea {
    width: 100%;
    background: var(--wenrexa-bg-secondary);
    border: 1px solid var(--wenrexa-border-subtle);
    border-radius: var(--wenrexa-radius-md);
    padding: 16px 20px;
    font-size: 15px;
    color: var(--wenrexa-text-primary);
    transition: var(--wenrexa-transition);
    font-family: inherit;
    resize: vertical;
    min-height: 120px;
}

    .wenrexa-textarea:focus {
        outline: none;
        border-color: var(--wenrexa-accent-green);
        box-shadow: 0 0 0 4px rgba(160, 200, 16, 0.15);
    }

/* Success State */
.wenrexa-success-screen {
    text-align: center;
    padding: 60px 40px;
}

.wenrexa-success-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
    background: rgba(48, 209, 88, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: wenrexa-scaleIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes wenrexa-scaleIn {
    from {
        transform: scale(0);
    }

    to {
        transform: scale(1);
    }
}

.wenrexa-success-icon svg {
    width: 40px;
    height: 40px;
    stroke: var(--wenrexa-success);
}

.wenrexa-success-title {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 8px;
}

.wenrexa-success-text {
    color: var(--wenrexa-text-secondary);
    margin-bottom: 32px;
}

/* File formats chips */
.wenrexa-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}


.wenrexa-chip.selected {
    background: rgba(200, 16, 46, 0.15);
    border-color: var(--wenrexa-accent);
    color: var(--wenrexa-text-primary);
}

/* Helper text */
.wenrexa-helper {
    font-size: 12pt;
    color: var(--wenrexa-text-secondary);
    margin-top: 8px;
}
.wenrexa-helper-warning {
    color: orange !important;
    font-size: 16px;
}
    /* Status Dropdown in Step 1 */
    .wenrexa-status-field {
        margin-top: 14px;
        padding-top: 4px;
        border-top: 1px solid var(--wenrexa-border-subtle);
    }

.wenrexa-status-dropdown {
    position: relative;
}
.wenrexa-input-warning {
   background: var(--wenrexa-accent);
}

    .wenrexa-input-warning + .wenrexa-label {
        color: #fff;
        font-weight:600
    }
    .wenrexa-input-warning:disabled + .wenrexa-label {
        color: rgba(255,255,255,.45);
        font-weight: 400;
    }


.wenrexa-status-selected {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--wenrexa-bg-secondary);
    border: 1px solid var(--wenrexa-border-subtle);
    border-radius: var(--wenrexa-radius-md);
    cursor: pointer;
    transition: var(--wenrexa-transition);
}

    .wenrexa-status-selected:hover {
        border-color: var(--wenrexa-border);
    }

.wenrexa-status-dropdown.open .wenrexa-status-selected {
    border-color: var(--wenrexa-accent);
}

.wenrexa-status-selected i:first-child {
    font-size: 16px;
    color: var(--wenrexa-success);
}

.wenrexa-status-selected span {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: var(--wenrexa-text-primary);
}

.wenrexa-status-arrow {
    font-size: 12px;
    color: var(--wenrexa-text-tertiary);
    transition: var(--wenrexa-transition);
}

.wenrexa-status-dropdown.open .wenrexa-status-arrow {
    transform: rotate(180deg);
}

.wenrexa-status-options {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--wenrexa-bg-card);
    border: 1px solid var(--wenrexa-border);
    border-radius: var(--wenrexa-radius-md);
    padding: 8px;
    box-shadow: var(--wenrexa-shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: var(--wenrexa-transition);
    z-index: 100;
}

.wenrexa-status-dropdown.open .wenrexa-status-options {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.wenrexa-status-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--wenrexa-radius-sm);
    cursor: pointer;
    transition: var(--wenrexa-transition);
}

    .wenrexa-status-option:hover {
        background: var(--wenrexa-bg-hover);
    }

    .wenrexa-status-option.selected {
        background: var(--wenrexa-bg-tertiary);
    }

    .wenrexa-status-option > i {
        font-size: 16px;
        width: 20px;
        text-align: center;
    }

.wenrexa-status-option-info {
    flex: 1;
}

.wenrexa-status-option-name {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--wenrexa-text-primary);
    margin-bottom: 2px;
}

.wenrexa-status-option-desc {
    display: block;
    font-size: 12px;
    color: var(--wenrexa-text-tertiary);
}

/* Responsive */
@media (max-width: 768px) {
    .wenrexa-creator {
        padding: 24px 16px;
    }

    .wenrexa-creator-header {
        margin-bottom: 20px;
    }

    .wenrexa-creator-title {
        font-size: 24px;
    }

    .wenrexa-step-content,
    .wenrexa-requirements-panel {
        padding: 20px;
    }

    .wenrexa-type-grid {
        max-height: 280px;
    }

    .wenrexa-nav {
        padding: 16px 20px;
    }

    .wenrexa-nav-guidance {
        display: none;
    }

    .wenrexa-price-section {
        flex-direction: column;
    }

    .wenrexa-quick-info {
        flex-direction: column;
        gap: 12px;
        padding: 16px 20px;
    }
}

.wenrexa-tag.is-locked {
    background: #333;
    color: #757575;
}

@media (max-width: 480px) {
    .wenrexa-upload-zone {
        padding: 40px 20px;
    }

    .wenrexa-input-large {
        font-size: 20px;
        padding: 16px 20px;
    }

    .wenrexa-btn {
        padding: 12px 20px;
        font-size: 14px;
    }

    .wenrexa-requirement-item {
        padding: 12px 14px;
    }
}





.wenrexa-tag.is-busy {
    pointer-events: none;
    opacity: 0.5;
    transition: opacity .25s ease;
}








.input-group > .form-control, .input-group > .form-floating, .input-group > .form-select {
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
    width: auto;
    background: var(--wenrexa-bg-secondary);
    border: 1px solid var(--wenrexa-border-subtle);
    border-radius: var(--wenrexa-radius-md);
    padding: 16px 20px;
    color: var(--wenrexa-text-primary);
    transition: var(--wenrexa-transition);
    font-family: inherit;
}



.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    border-radius: var(--wenrexa-radius-md);
}



.input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n+3), .input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-control, .input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-select, .input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) {
    border-top-right-radius: var(--wenrexa-radius-md);
    border-bottom-right-radius: var(--wenrexa-radius-md);
}









































/* Storage Card */
.wenrexa-file-storage {
    background: #151617;
    border-radius: 16px;
    padding: 20px 24px;
    margin-bottom: 16px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.wenrexa-file-storage-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 14px;
    flex-wrap: wrap;
    gap: 8px;
}

.wenrexa-file-storage-title {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.wenrexa-file-storage-value {
    font-size: 14px;
    color: #ffffff;
    font-weight: 500;
}

    .wenrexa-file-storage-value span {
        color: rgba(255, 255, 255, 0.4);
    }

/* Progress Bar */
.wenrexa-file-progress {
    height: 6px;
    background: var(--wenrexa-bg-card);
    border-radius: 3px;
    overflow: hidden;
}

.wenrexa-file-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #30d158, #34c759);
    border-radius: 3px;
    transition: width 0.5s ease;
    min-width: 4px;
}

/* Files Container */
.wenrexa-file-container {
    display: grid;
    gap: 8px;
    margin-top: 16px;
}

/* File Pill */
.wenrexa-file-pill {
    display: flex;
    align-items: center;
    padding: 14px 18px;
    gap: 14px;
    background: var(--wenrexa-bg-secondary);
    border-radius: 12px;
    border: 1px solid var(--wenrexa-border);
    transition: all 0.2s ease;
}

    .wenrexa-file-pill:hover {
        background: var(--wenrexa-bg-hover);
        border-color: rgba(255, 255, 255, 0.1);
    }

/* Drag Handle */
.wenrexa-file-drag-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    transition: color 0.2s ease;
    flex-shrink: 0;
    padding: 4px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 17pt;
    color: #3b3b3b;
}

.wenrexa-file-pill:hover .wenrexa-file-drag-handle {
    color: #fff;
}

.wenrexa-file-drag-handle:hover {
    color: #707070 !important;
}

.wenrexa-file-drag-handle:active {
    cursor: grabbing;
}

.wenrexa-file-drag-handle i {
    font-size: 18px;
}

/* Thumbnail */
.wenrexa-file-thumb {
    width: 44px;
    height: 44px;
    background: var(--wenrexa-bg-card);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid var(--wenrexa-border);
}

    .wenrexa-file-thumb i {
        font-size: 20px;
        color: rgba(255, 255, 255, 0.45);
    }

/* Warning badge — invalid extension */
.wenrexa-file-warn {
    color: #ff9f0a;
    font-size: 14px;
    flex-shrink: 0;
    cursor: help;
    margin-left: -4px;
    align-self: center;
}

/* File preview (modal) */
.wenrexa-file-preview {
    font-size: 12px;
    color: rgba(255,255,255,0.4);
    padding: 0 2px;
    font-family: 'SF Mono', 'JetBrains Mono', ui-monospace, monospace;
    word-break: break-all;
}

.wenrexa-file-thumb--image {
    background: linear-gradient(135deg, #5e5ce6 0%, #bf5af2 100%);
    border: none;
}

    .wenrexa-file-thumb--image i {
        color: #ffffff;
    }

.wenrexa-file-thumb--archive {
    background: linear-gradient(135deg, #ff9f0a 0%, #ff375f 100%);
    border: none;
}

    .wenrexa-file-thumb--archive i {
        color: #ffffff;
    }

.wenrexa-file-thumb--video {
    background: linear-gradient(135deg, #ff375f 0%, #ff2d55 100%);
    border: none;
}

    .wenrexa-file-thumb--video i {
        color: #ffffff;
    }

.wenrexa-file-thumb--audio {
    background: linear-gradient(135deg, #ff6482 0%, #ff2d55 100%);
    border: none;
}

    .wenrexa-file-thumb--audio i {
        color: #ffffff;
    }

.wenrexa-file-thumb--document {
    background: linear-gradient(135deg, #0a84ff 0%, #5ac8fa 100%);
    border: none;
}

    .wenrexa-file-thumb--document i {
        color: #ffffff;
    }

/* Main Content */
.wenrexa-file-main {
    flex: 1;
    min-width: 0;
}

.wenrexa-file-name {
    font-size: 15px;
    font-weight: 500;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 6px;
    letter-spacing: -0.01em;
}

/* Meta Info */
.wenrexa-file-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.4);
}

    .wenrexa-file-meta > span {
        display: inline-flex;
        align-items: center;
    }

/* Badge */
.wenrexa-file-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.wenrexa-file-badge--public {
    background: rgba(48, 209, 88, 0.15);
    color: #30d158;
}

.wenrexa-file-badge--hidden {
    background: rgba(255, 69, 58, 0.15);
    color: #ff453a;
}

/* Separator Dot */
.wenrexa-file-dot {
    width: 3px;
    height: 3px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    flex-shrink: 0;
}

/* Audio access toggle on file pill */
.wenrexa-file-audio-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
    flex-shrink: 0;
    margin-right: 8px;
}

.wenrexa-file-audio-toggle input { display: none; }

.wenrexa-file-audio-toggle__track {
    width: 34px;
    height: 18px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.15);
    position: relative;
    transition: background 0.2s;
    flex-shrink: 0;
}

.wenrexa-file-audio-toggle__track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.2s;
}

.wenrexa-file-audio-toggle input:checked + .wenrexa-file-audio-toggle__track {
    background: #30d158;
}

.wenrexa-file-audio-toggle input:checked + .wenrexa-file-audio-toggle__track::after {
    transform: translateX(16px);
}

.wenrexa-file-audio-toggle__label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    white-space: nowrap;
}

.wenrexa-file-audio-toggle input:checked ~ .wenrexa-file-audio-toggle__label {
    color: #30d158;
}

/* Actions */
.wenrexa-file-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.wenrexa-file-btn {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    border: none;
    background: var(--wenrexa-bg-card);
    color: rgba(255, 255, 255, 0.55);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

    .wenrexa-file-btn:hover {
        background: var(--wenrexa-bg-hover);
        color: #ffffff;
    }

    .wenrexa-file-btn i {
        font-size: 15px;
    }

.wenrexa-file-btn--download:hover {
    background: rgba(10, 132, 255, 0.18);
    color: #0a84ff;
}

.wenrexa-file-btn--edit:hover {
    background: rgba(255, 159, 10, 0.18);
    color: #ff9f0a;
}

.wenrexa-file-btn--delete:hover {
    background: rgba(255, 69, 58, 0.18);
    color: #ff453a;
}

.wenrexa-file-btn--disabled {
    opacity: .4;
    cursor: not-allowed;
    pointer-events: none;
}

    /* Download mode pill — no drag handle, compact left padding */
.wenrexa-file-pill--download {
    padding-left: 18px;
}

    /* Version badge */
.wenrexa-file-badge--version {
    background: rgba(10, 132, 255, 0.12);
    color: #0a84ff;
}

    /* Virus check status icons */
.wenrexa-file-virus-ok {
    color: #30d158;
    font-size: 13px;
}

.wenrexa-file-virus-pending {
    color: #ff9f0a;
    font-size: 13px;
}

    /* Download count in meta */
.wenrexa-file-downloads-count {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.wenrexa-file-downloads-count i {
    font-size: 11px;
}

    /* Empty State */
.wenrexa-file-empty {
    padding: 60px 20px;
    text-align: center;
    background: var(--wenrexa-bg-secondary);
    border-radius: 16px;
    border: 1px solid var(--wenrexa-border);
    margin-top: 16px;
}

.wenrexa-file-empty-icon {
    width: 72px;
    height: 72px;
    background: var(--wenrexa-bg-card);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.wenrexa-file-empty-icon i {
    font-size: 32px;
    color: rgba(255, 255, 255, 0.3);
}

.wenrexa-file-empty-title {
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 8px;
}

.wenrexa-file-empty-text {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.4);
}

/* ========================================
       MODAL STYLES 
       ======================================== */
.wenrexa-file-modal {
    background: var(--wenrexa-bg-secondary);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    color: #ffffff;
}

.wenrexa-file-modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 20px 24px;
}

.wenrexa-file-modal-header .modal-title {
    font-size: 18px;
    font-weight: 600;
}

.wenrexa-file-modal-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.wenrexa-file-modal-close:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

.wenrexa-file-modal-body {
    padding: 24px;
}

.wenrexa-file-modal-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 16px 24px;
    gap: 12px;
}




.wenrexa-file-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 8px;
}



    /* Modal Buttons */
    .wenrexa-file-btn-primary,
    .wenrexa-file-btn-secondary,
    .wenrexa-file-btn-danger {
        padding: 10px 20px;
        border-radius: 10px;
        font-size: 15px;
        font-weight: 500;
        border: none;
        cursor: pointer;
        transition: all 0.2s ease;
    }
    
    .wenrexa-file-btn-primary {
        background: #0a84ff;
        color: #ffffff;
    }

    .wenrexa-file-btn-primary:hover {
        background: #409cff;
    }

    .wenrexa-file-btn-secondary {
        background: rgba(255, 255, 255, 0.1);
        color: #ffffff;
    }

    .wenrexa-file-btn-secondary:hover {
        background: rgba(255, 255, 255, 0.15);
    }

    .wenrexa-file-btn-danger {
        background: #ff453a;
        color: #ffffff;
    }

    .wenrexa-file-btn-danger:hover {
        background: #ff6961;
    }

    /* Delete Warning */
    .wenrexa-file-delete-warning {
        text-align: center;
        padding: 20px 0;
    }

.wenrexa-file-delete-icon {
    width: 64px;
    height: 64px;
    background: rgba(255, 69, 58, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.wenrexa-file-delete-icon i {
    font-size: 28px;
    color: #ff453a;
}

.wenrexa-file-delete-warning p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 15px;
    margin: 0;
}

/* Responsive */
@media (max-width: 640px) {
    .wenrexa-file-pill {
        padding: 12px 14px;
        gap: 12px;
    }

    .wenrexa-file-name {
        font-size: 14px;
    }

    .wenrexa-file-meta {
        font-size: 11px;
        gap: 6px;
    }

    .wenrexa-file-btn {
        width: 34px;
        height: 34px;
    }

    .wenrexa-file-btn i {
        font-size: 14px;
    }

    .wenrexa-file-actions {
        gap: 4px;
    }

    .wenrexa-file-storage-header {
        flex-direction: column;
        gap: 4px;
    }
}
.wenrexa-save-pending .sun-editor,
.wenrexa-save-pending .se-container {
    box-shadow: 0 0 0 2px rgba(219, 219, 219, 0.1);
}

.wenrexa-save-ok .sun-editor,
.wenrexa-save-ok .se-container {
    box-shadow: 0 0 0 2px rgba(48,209,88,.35);
}

.wenrexa-save-err .sun-editor,
.wenrexa-save-err .se-container {
    box-shadow: 0 0 0 2px rgba(255,69,58,.45);
}






/* Подсветка контейнера SunEditor */
.wenrexa-save-ok {
    box-shadow: 0 0 0 2px rgba(48,209,88,.35);
    border-radius: 12px;
}

.wenrexa-save-err {
    box-shadow: 0 0 0 2px rgba(255,69,58,.45);
    border-radius: 12px;
}



.wenrexa-tip-form {
    width: 200px;
}


.list-group-item {
    background: var(--wenrexa-bg-secondary);
    border-radius:   var(--wenrexa-radius-lg);
    padding: 1rem;
    color:gray;
    border: 0px solid var(--wenrexa-border-subtle)!important;
    flex-wrap: wrap;
    transition: var(--wenrexa-transition);
}

    .list-group-item:hover,
    .list-group-item:focus {
        background: var(--wenrexa-bg-hover);
        border-color: var(--wenrexa-border);
    }


    .list-group-item.active {
        z-index: 2;
        color: var(--bs-list-group-active-color);
        background-color: var(--wenrexa-bg-tertiary);
        border-color: var(--bs-list-group-active-border-color);
    }




















/* =============================================
           SWIPER GALLERY
           ============================================= */
.wenrexa-slider-wrap {
    position: relative;
}

    .wenrexa-slider-wrap .swiper {
        border-radius: var(--wenrexa-radius-md);
        overflow: hidden;
    }

    .wenrexa-slider-wrap .swiper-slide {
        /*  aspect-ratio: 16 / 9; */
        overflow: hidden;
        background: var(--wenrexa-bg-secondary);
        cursor: grab;
    }

        .wenrexa-slider-wrap .swiper-slide:active {
            cursor: grabbing;
        }

        .wenrexa-slider-wrap .swiper-slide img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            background-position: center;
            object-position: center;
        }


.wenrexa-slider-header {
    position: absolute;
    z-index: 111;
    top: 2%;
    right: 2%;
}


.wenrexa-slide-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(145deg, #191919 0%, #222222 100%);
}

    .wenrexa-slide-placeholder i {
        font-size: 32px;
        color: var(--wenrexa-text-muted);
        opacity: 0.35;
    }

    .wenrexa-slide-placeholder span {
        font-size: 11px;
        color: var(--wenrexa-text-muted);
        opacity: 0.4;
    }

/* Swiper Arrows */
.wenrexa-slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(0,0,0,0.7);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.1);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--wenrexa-transition);
    font-size: 18px;
}

    .wenrexa-slider-arrow:hover {
        background: rgba(0,0,0,0.9);
        border-color: rgba(255,255,255,0.2);
        transform: translateY(-50%) scale(1.05);
    }

    .wenrexa-slider-arrow.swiper-button-disabled {
        opacity: 0.3;
        cursor: default;
    }

.wenrexa-slider-prev {
    left: 12px;
}

.wenrexa-slider-next {
    right: 12px;
}

/* Swiper pagination */
.wenrexa-slider-wrap .swiper-pagination-bullet {
    background: rgba(255,255,255,0.4);
    opacity: 1;
}

.wenrexa-slider-wrap .swiper-pagination-bullet-active {
    background: var(--wenrexa-accent);
}



.wenrexa-media-item {
    position: relative;
    border-radius: var(--wenrexa-radius-md, 12px);
    overflow: hidden;
    background: var(--wenrexa-bg-secondary, #181818);
}

    .wenrexa-media-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.wenrexa-media-item-vertical img {
    object-fit: cover;
    max-height: 1000px;
}

.wenrexa-media-zoom {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: rgba(0,0,0,0.65);
    border: 1px solid rgba(255,255,255,0.12);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
}

.wenrexa-media-badge {
    position: absolute;
    left: 12px;
    bottom: 12px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    background: rgba(0,0,0,0.55);
    border: 1px solid rgba(255,255,255,0.10);
    color: #fff;
    z-index: 3;
}

.wenrexa-media-modal {
    background: rgba(10,10,10,0.98);
    color: var(--wenrexa-text-primary, #f5f5f7);
}

.wenrexa-media-modal-item {
    width: 100%;
    /*    height: calc(100vh - 100px); */

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

.wenrexa-media-modal-img {
    max-width: 100%;
    max-height: 85vh;
    object-fit: contain;
    display: block;
}

































/* ============================================
   WENREXA ACTION DOTS — CSS only, hover
   Добавь к существующим стилям карточки
   ============================================ */

.wenrexa-action-dots {
    position: relative;
    z-index: 10;
}

.wenrexa-dots-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 10px;
    background: rgb(10, 10, 10);
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    pointer-events: auto;
}


    .wenrexa-dots-trigger:hover {
        background: rgba(255, 255, 255, 0.15);
        color: #fff;
    }

.wenrexa-action-dots:hover .wenrexa-dots-trigger {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.wenrexa-dots-menu {
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px;
    background: rgba(28, 28, 32, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
 
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px) scale(0.95);
    transform-origin: bottom right;
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s cubic-bezier(0.2, 0, 0, 1);
    pointer-events: none;
}

.wenrexa-action-dots:hover .wenrexa-dots-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.wenrexa-dots-menu::after {
    content: '';
    position: absolute;
    bottom: -5px;
    right: 12px;
    width: 10px;
    height: 10px;
    background: rgba(28, 28, 32, 0.96);
 
    transform: rotate(45deg);
}

.wenrexa-dots-menu::before {
    content: '';
    position: absolute;
    bottom: -10px;
    right: 0;
    width: 100%;
    height: 12px;
}

.wenrexa-dots-menu .item-mi-product-buttons,
.wenrexa-dots-menu .wenrexa-btn-action {
    width: 38px;
    height: 38px; 
    transition: background 0.15s ease, transform 0.15s ease;
}

    .wenrexa-dots-menu .item-mi-product-buttons:hover,
    .wenrexa-dots-menu .wenrexa-btn-action:hover {
        background: rgba(255, 255, 255, 0.1);
        transform: scale(1.1);
    }

.wenrexa-action-dots:hover .wenrexa-dots-menu .item-mi-product-buttons,
.wenrexa-action-dots:hover .wenrexa-dots-menu .wenrexa-btn-action {
    animation: wenrexa-dot-item-in 0.25s ease both;
}

.wenrexa-action-dots:hover .wenrexa-dots-menu > :nth-child(1) {
    animation-delay: 0.03s;
}

.wenrexa-action-dots:hover .wenrexa-dots-menu > :nth-child(2) {
    animation-delay: 0.06s;
}

.wenrexa-action-dots:hover .wenrexa-dots-menu > :nth-child(3) {
    animation-delay: 0.09s;
}

.wenrexa-action-dots:hover .wenrexa-dots-menu > :nth-child(4) {
    animation-delay: 0.12s;
}

@keyframes wenrexa-dot-item-in {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@media (hover: none) {
    .wenrexa-dots-trigger {
        display: none;
    }

    .wenrexa-dots-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        pointer-events: auto;
        flex-direction: row;
        background: none;
        border: none;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        padding: 0;
        gap: 2px;

    }

        .wenrexa-dots-menu::after, .wenrexa-dots-menu::before {
            display: none;
        }

        .wenrexa-dots-menu .item-mi-product-buttons,
        .wenrexa-dots-menu .wenrexa-btn-action {
            width: 34px;
            height: 34px;
            animation: none !important;
        }
}

@media (max-width: 991px) {
    .wenrexa-dots-trigger {
        width: 34px;
        height: 34px;
    }

    .wenrexa-dots-menu .item-mi-product-buttons,
    .wenrexa-dots-menu .wenrexa-btn-action {
        width: 36px;
        height: 36px;
    }
}





























.page-link {
    color: #fff !important;
    background-color: #000 !important;
    border: 0px !important;
}
    .active > .page-link, .page-link.active {
        background-color: var(--wenrexa-accent)!important
    }

    .page-link:hover {
        background-color: #a3a3a3 !important
    }

/* ── Email verification banner ── */
.wen-email-banner {
    position: fixed;
    top: var(--topbar-h, 72px);
    left: 0;
    right: 0;
    z-index: 1029;
    background: linear-gradient(90deg, #1a1400 0%, #2d2200 100%);
    border-bottom: 1px solid rgba(255, 214, 10, .2);
}
.wen-email-banner__inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 20px;
    font-size: 13px;
}
.wen-email-banner__icon {
    color: var(--wenrexa-warning, #ffd60a);
    font-size: 16px;
    flex-shrink: 0;
}
.wen-email-banner__text {
    color: #e8e0c0;
    flex: 1;
}
.wen-email-banner__link {
    color: var(--wenrexa-warning, #ffd60a);
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
    font-weight: 500;
}
.wen-email-banner__link:hover {
    color: #fff;
}
.wen-email-banner__close {
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    padding: 4px 6px;
    line-height: 1;
    font-size: 14px;
}
.wen-email-banner__close:hover {
    color: #fff;
}
@media (max-width: 576px) {
    .wen-email-banner__inner { padding: 6px 12px; font-size: 12px; }
}

/* ── wen-alert-card — notification card (wenrexa-alert-8 style) ── */

.wen-alert-card {
    background: var(--wenrexa-bg-secondary, #131316);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 12px;
}

.wen-alert-card__top {
    background: var(--wenrexa-bg-tertiary, #1a1a1f);
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.wen-alert-card__tag {
    font-size: 12px;
    font-weight: 600;
    color: #eab308;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.wen-alert-card__body {
    padding: 18px 20px;
}

.wen-alert-card__text {
    font-size: 10.8pt;
    line-height: 1.65;
    color: var(--wenrexa-text-dim, #a1a1aa);
}

.wen-alert-card__text p {
    margin: 0 0 8px;
}

.wen-alert-card__text p:last-child {
    margin-bottom: 0;
}

.wen-alert-card__actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

/* ═══════════════════════════════════════════════════════════════
   wenrexa-desktop.css

   Класс .wenrexa-desktop добавляется автоматически JS-мостом
   когда сайт открыт в десктоп-клиенте.
   В обычном браузере этот класс отсутствует → стили не работают.
   ═══════════════════════════════════════════════════════════════ */


/* ─── 1. Скрываем то, что уже есть в Shell ─── */

/* Header сайта — навигация уже в title bar десктопа */
.wenrexa-desktop header,
.wenrexa-desktop nav.navbar {
    display: none !important;
}

/* Footer — не нужен в десктоп-режиме */
.wenrexa-desktop footer {
    display: none !important;
}


/* ─── 2. Контент занимает всё пространство ─── */

.wenrexa-desktop body {
    padding-top: 0 !important;
    margin-top: 0 !important;
    overflow-x: hidden;
}

.wenrexa-desktop main {
    padding-top: 0 !important;
    min-height: 100vh !important;
}


/* ─── 3. Скроллбар в стиле приложения ─── */

.wenrexa-desktop ::-webkit-scrollbar {
    width: 8px;
}

.wenrexa-desktop ::-webkit-scrollbar-track {
    background: #1a1a2e;
}

.wenrexa-desktop ::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 4px;
}

    .wenrexa-desktop ::-webkit-scrollbar-thumb:hover {
        background: #555;
    }