/*==============================================================
NP Collection Drawer
==============================================================*/

#np-collection-overlay{

    position:fixed;
    inset:0;

    background:rgba(0,0,0,.45);

    opacity:0;
    visibility:hidden;

    transition:.25s;

    z-index:9998;

}

#np-collection-overlay.open{

    opacity:1;
    visibility:visible;

}

#np-collection-drawer{

    position:fixed;

    top:0;
    right:-520px;

    width:520px;
    max-width:100%;

    height:100vh;

    background:#fff;

    overflow-y:auto;

    transition:.3s ease;

    z-index:9999;

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

}

#np-collection-drawer.open{

    right:0;

}

/*==============================================================
Header
==============================================================*/

.np-drawer-header{

    position:sticky;

    top:0;

    background:#fff;

    padding:22px 24px;

    border-bottom:1px solid #ececec;

    z-index:20;

}

.np-drawer-label{

    display:inline-block;

    font-size:12px;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

    color:#888;

    margin-bottom:8px;

}

#np-coin-title{

    margin:0;

    font-size:21px;

    line-height:1.45;

    font-weight:700;

    color:#111;

    padding-right:40px;

}

#np-close-drawer{

    position:absolute;

    right:18px;

    top:18px;

    width:38px;

    height:38px;

    border:none;

    border-radius:50%;

    background:#f4f4f4;

    font-size:22px;

    cursor:pointer;

    transition:.2s;

}

#np-close-drawer:hover{

    background:#111;

    color:#fff;

}

/*==============================================================
Reference badges
==============================================================*/

.np-reference-row{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

    margin-top:15px;

}

.np-reference-row span{

    background:#f6f7f9;

    border:1px solid #e8e8e8;

    border-radius:50px;

    padding:5px 11px;

    font-size:12px;

    font-weight:600;

    color:#444;

}

/*==============================================================
Form
==============================================================*/

#np-collection-form{

    padding:22px;

}

.np-form-section{

    margin-bottom:30px;

    padding-bottom:25px;

    border-bottom:1px solid #f2f2f2;

}

.np-form-section:last-child{

    border-bottom:none;

}

.np-form-section h3{

    margin:0 0 18px;

    font-size:18px;

    font-weight:700;

    color:#111;

}

.np-form-section label{

    display:block;

    margin:14px 0 7px;

    font-size:14px;

    font-weight:600;

    color:#333;

}

/*==============================================================
Inputs
==============================================================*/

#np-collection-form input[type=text],
#np-collection-form input[type=number],
#np-collection-form input[type=date],
#np-collection-form select,
#np-collection-form textarea{

    width:100%;

    padding:12px 14px;

    border:1px solid #d9d9d9;

    border-radius:8px;

    font-size:14px;

    background:#fff;

    transition:.2s;

    box-sizing:border-box;

}

#np-collection-form textarea{

    resize:vertical;

    min-height:120px;

}

#np-collection-form input:focus,
#np-collection-form select:focus,
#np-collection-form textarea:focus{

    outline:none;

    border-color:#2563eb;

    box-shadow:0 0 0 4px rgba(37,99,235,.12);

}

/*==============================================================
Radio Buttons
==============================================================*/

.np-radio-group{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

    margin-top:10px;

}

.np-radio-group label{

    display:flex;

    align-items:center;

    gap:8px;

    margin:0;

    font-weight:500;

}

.np-radio-group input{

    margin:0;

}

/*==============================================================
Checkbox
==============================================================*/

.np-checkbox{

    display:flex !important;

    align-items:center;

    gap:10px;

    margin-top:18px !important;

}

/*==============================================================
Hidden blocks
==============================================================*/

#np-sold-fields,
#np-auction-fields,
#np-certification-fields,
#np-source-name-field{

    margin-top:16px;

    padding:18px;

    border-radius:10px;

    background:#fafafa;

    border:1px solid #ececec;

}

/*==============================================================
Help Text
==============================================================*/

.np-help-text{

    display:block;

    margin-top:8px;

    font-size:12px;

    color:#777;

}

/*==============================================================
Footer
==============================================================*/

.np-drawer-footer{

    position:sticky;

    bottom:0;

    background:#fff;

    padding:18px 22px;

    border-top:1px solid #ececec;

    display:flex;

    justify-content:flex-end;

    gap:12px;

}

/*==============================================================
Buttons
==============================================================*/

.np-btn{

    padding:12px 22px;

    border-radius:8px;

    border:none;

    cursor:pointer;

    font-size:14px;

    font-weight:600;

    transition:.2s;

}

.np-btn-secondary{

    background:#f3f3f3;

    color:#333;

}

.np-btn-secondary:hover{

    background:#e4e4e4;

}

.np-btn-primary{

    background:#2563eb;

    color:#fff;

}

.np-btn-primary:hover{

    background:#1d4ed8;

}

/*==============================================================
Responsive
==============================================================*/

@media(max-width:768px){

#np-collection-drawer{

    width:100%;

}

.np-radio-group{

    flex-direction:column;

    gap:12px;

}

.np-drawer-footer{

    flex-direction:column;

}

.np-btn{

    width:100%;

}

}