/* =========================================================
   NEXORAHOST — ADMIN CATALOG
   ========================================================= */

.nxcatalog-page{
    width:100%;
    margin-top:24px;
}


/* TOOLBAR */

.nxcatalog-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;

    margin-bottom:18px;
}

.nxcatalog-toolbar-left{
    display:flex;
    align-items:center;
    gap:12px;
}

.nxcatalog-search{
    width:310px;

    display:flex;
    align-items:center;
    gap:8px;

    padding:0 12px;

    border:1px solid #2c3447;
    border-radius:11px;

    background:#0d111b;
}

.nxcatalog-search span{
    color:#8c95aa;
}

.nxcatalog-search input{
    width:100%;
    height:40px;

    padding:0;

    border:0;
    outline:0;

    background:transparent;
    color:inherit;

    font-size:10px;
}

.nxcatalog-count{
    color:#858fa5;
    font-size:10px;
}


.nxcatalog-create{
    gap:8px;
}

.nxcatalog-plus{
    width:19px;
    height:19px;

    display:grid;
    place-items:center;

    border-radius:6px;

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

    font-size:16px;
    line-height:1;
}


/* GRID */

.nxcatalog-grid{
    display:grid;

    grid-template-columns:
        repeat(auto-fill,minmax(280px,1fr));

    gap:14px;
}


/* CARD */

.nxcatalog-card{
    min-width:0;

    display:flex;
    flex-direction:column;

    border:1px solid #2a3245;
    border-radius:16px;

    background:#111621;

    overflow:hidden;

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

.nxcatalog-card:hover{
    border-color:#3a435a;
    transform:translateY(-1px);
}

.nxcatalog-card[hidden]{
    display:none;
}


.nxcatalog-card-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;

    padding:16px 17px 0;
}

.nxcatalog-category{
    padding:5px 7px;

    border:1px solid #393f58;
    border-radius:999px;

    color:#aaa1d8;

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

    text-transform:uppercase;
    letter-spacing:.05em;
}

.nxcatalog-published{
    display:flex;
    align-items:center;
    gap:5px;

    color:#809087;

    font-size:8px;
}

.nxcatalog-published i{
    width:6px;
    height:6px;

    border-radius:50%;

    background:#5ecf8d;
}


/* MAIN */

.nxcatalog-card-main{
    padding:17px;
}

.nxcatalog-card-main h3{
    margin:0;

    font-size:16px;
}

.nxcatalog-price{
    display:flex;
    align-items:baseline;
    gap:5px;

    margin-top:12px;
}

.nxcatalog-price strong{
    font-size:23px;
}

.nxcatalog-price span{
    color:#828ca1;
    font-size:9px;
}


/* FEATURES */

.nxcatalog-features{
    flex:1;

    display:grid;
    align-content:start;
    gap:8px;

    padding:0 17px 17px;
}

.nxcatalog-features>div{
    display:flex;
    align-items:center;
    gap:8px;

    color:#a5aec0;

    font-size:10px;
}

.nxcatalog-features>div>span{
    color:#67cf91;
}

.nxcatalog-features small{
    color:#727c92;
    font-size:8px;
}

.nxcatalog-no-feature{
    color:#707a90 !important;
}


/* FOOTER */

.nxcatalog-card-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;

    padding:12px 17px;

    border-top:1px solid #252c3c;

    background:#10141e;
}

.nxcatalog-card-footer>span{
    color:#697388;
    font-size:8px;
}

.nxcatalog-edit{
    min-height:34px;

    padding:0 12px;

    font-size:9px;
}


/* EMPTY */

.nxcatalog-empty{
    padding:70px 20px;

    border:1px dashed #30384b;
    border-radius:16px;

    text-align:center;

    background:#10151f;
}

.nxcatalog-empty-icon{
    width:46px;
    height:46px;

    display:grid;
    place-items:center;

    margin:0 auto 14px;

    border:1px solid #54468b;
    border-radius:13px;

    background:#191629;
    color:#af9df9;

    font-size:24px;
}

.nxcatalog-empty h3{
    margin:0;
}

.nxcatalog-empty p{
    margin:7px 0 17px;

    color:#828ca1;

    font-size:10px;
}


/* =========================================================
   DRAWER
   ========================================================= */

.nxcatalog-drawer{
    position:fixed;
    inset:0;

    z-index:12000;

    visibility:hidden;
    pointer-events:none;
}

.nxcatalog-drawer.open{
    visibility:visible;
    pointer-events:auto;
}


.nxcatalog-backdrop{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    padding:0;
    border:0;

    opacity:0;

    background:rgba(3,6,11,.72);

    backdrop-filter:blur(4px);

    transition:opacity .18s ease;
}

.nxcatalog-drawer.open .nxcatalog-backdrop{
    opacity:1;
}


.nxcatalog-drawer-panel{
    position:absolute;

    top:0;
    right:0;

    width:min(500px,100%);
    height:100%;

    overflow:auto;

    background:#0d121d;

    border-left:1px solid #30384c;

    box-shadow:
        -24px 0 70px rgba(0,0,0,.45);

    transform:translateX(100%);

    transition:transform .2s ease;
}

.nxcatalog-drawer.open .nxcatalog-drawer-panel{
    transform:translateX(0);
}


/* HEADER */

.nxcatalog-drawer-head{
    position:sticky;
    top:0;
    z-index:4;

    min-height:86px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;

    padding:18px 20px;

    border-bottom:1px solid #293145;

    background:#101621;
}

.nxcatalog-drawer-head>div>span{
    display:block;

    margin-bottom:5px;

    color:#8c7fd0;

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

    letter-spacing:.1em;
}

.nxcatalog-drawer-head h2{
    margin:0;

    font-size:16px;
}

.nxcatalog-drawer-head p{
    margin:5px 0 0;

    color:#818ba1;

    font-size:9px;
}

.nxcatalog-close{
    width:34px;
    height:34px;

    display:grid;
    place-items:center;

    padding:0;

    border:1px solid #30384c;
    border-radius:9px;

    background:#171c29;
    color:#aab3c5;

    cursor:pointer;

    font-size:19px;
}


/* FORM */

.nxcatalog-form{
    padding:20px;
}

.nxcatalog-field{
    margin-bottom:18px;
}

.nxcatalog-field label{
    display:block;

    margin-bottom:5px;

    font-size:11px;
    font-weight:700;
}

.nxcatalog-field small{
    display:block;

    margin-bottom:9px;

    color:#7e889e;

    font-size:9px;
}

.nxcatalog-field input,
.nxcatalog-field select,
.nxcatalog-field textarea{
    width:100%;

    box-sizing:border-box;

    border:1px solid #30384c;
    border-radius:10px;

    background:#0a0f18;
    color:inherit;

    padding:11px 12px;

    outline:0;

    font-size:11px;
}

.nxcatalog-field input,
.nxcatalog-field select{
    min-height:43px;
}

.nxcatalog-field textarea{
    resize:vertical;

    min-height:150px;

    line-height:1.6;
}

.nxcatalog-field input:focus,
.nxcatalog-field select:focus,
.nxcatalog-field textarea:focus{
    border-color:#8068d8;
}


.nxcatalog-form-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:13px;
}


/* PRICE */

.nxcatalog-price-input{
    position:relative;
}

.nxcatalog-price-input input{
    padding-right:38px;
}

.nxcatalog-price-input>span{
    position:absolute;

    right:13px;
    top:50%;

    transform:translateY(-50%);

    color:#7f899d;

    font-size:11px;
}


/* PREVIEW INFO */

.nxcatalog-public-preview{
    margin-top:4px;

    padding:13px;

    border:1px solid #3e3860;
    border-radius:11px;

    background:#161522;
}

.nxcatalog-public-preview>span{
    color:#9e8ceb;

    font-size:8px;
    font-weight:800;
}

.nxcatalog-public-preview>strong{
    display:block;

    margin-top:6px;

    font-size:10px;
}

.nxcatalog-public-preview>p{
    margin:5px 0 0;

    color:#7f899d;

    font-size:9px;
    line-height:1.5;
}


/* FOOTER */

.nxcatalog-form-footer{
    display:flex;
    justify-content:flex-end;
    gap:9px;

    margin-top:19px;

    padding-top:17px;

    border-top:1px solid #293145;
}


body.nxcatalog-drawer-open{
    overflow:hidden;
}


/* RESPONSIVE */

@media(max-width:700px){

    .nxcatalog-toolbar{
        align-items:stretch;
        flex-direction:column;
    }

    .nxcatalog-toolbar-left{
        align-items:stretch;
        flex-direction:column;
    }

    .nxcatalog-search{
        width:100%;
    }

    .nxcatalog-create{
        width:100%;
    }

    .nxcatalog-grid{
        grid-template-columns:1fr;
    }

    .nxcatalog-form-row{
        grid-template-columns:1fr;
    }
}