/* ===========================
   DGMARK MODAL
=========================== */

.dgmark-modal{

    position:fixed;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

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

    backdrop-filter:
    blur(4px);

    opacity:0;

    visibility:hidden;

    transition:.3s ease;

    z-index:99999;

}


.dgmark-modal.active{

    opacity:1;

    visibility:visible;

}



/* ===========================
   MODAL CARD
=========================== */

.dgmark-modal-card{

    width:640px;

    max-width:92vw;

    background:#fff;

    border-radius:24px;

    overflow:hidden;

    box-shadow:
    0 25px 60px rgba(0,0,0,.18);

    transform:scale(.92);

    transition:.25s ease;

}



.dgmark-modal.active 
.dgmark-modal-card{

    transform:scale(1);

}



/* ===========================
   HEADER
=========================== */

.dgmark-modal-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:16px 24px;

    border-bottom:
    1px solid #e5e7eb;

}



.dgmark-modal-header h3{

    margin:0;

    font-size:1.25rem;

    line-height:1.5rem;

    font-weight:700;

    color:#111827;

}



/* CLOSE BUTTON */

.dgmark-close{

    width:38px;

    height:38px;

    display:flex;

    align-items:center;

    justify-content:center;


    border:none;

    border-radius:10px;

    background:#f1f5f9;

    color:#475569;

    font-size:22px;

    line-height:1;

    cursor:pointer;

    transition:.25s ease;

}



.dgmark-close:hover{

    background:#e2e8f0;

}



/* ===========================
   BODY
=========================== */

.dgmark-modal-body{

    padding:15px 24px;

}



.dgmark-field{

    margin-bottom:10px;

}



.dgmark-field label{

    display:block;

    margin-bottom:5px;

    font-size:13px;

    font-weight:600;

    color:#334155;

}



/* ===========================
   INPUT WITH ICON
=========================== */

.dgmark-input-wrap{

    position:relative;

}



.dgmark-input-wrap i{

    position:absolute;

    left:14px;

    top:50%;

    transform:translateY(-50%);


    color:#94a3b8;

    font-size:18px;

    line-height:1;

    pointer-events:none;

    z-index:2;

}



.dgmark-input-wrap input,
.dgmark-input-wrap select{

    width:100%;

    height:45px;

    padding-left:52px !important;

    padding-right:16px;

    border:1px solid #d1d5db;

    border-radius:10px;

    background:#fff;

    font-size:14px;

    color:#334155;

    transition:.25s ease;

}


.dgmark-input-wrap input::placeholder{

    color:#94a3b8;

}

.dgmark-input-wrap i{

    position:absolute;

    left:18px;

    top:50%;

    transform:translateY(-50%);

    color:#94a3b8;

    font-size:18px;

    line-height:1;

    pointer-events:none;

    z-index:2;

}

.dgmark-input-wrap input::placeholder{

    color:#94a3b8;

    opacity:1;

}

/* ===========================
   CUSTOM SELECT ARROW
=========================== */


.dgmark-select-wrap select{

    appearance:none;

    -webkit-appearance:none;

    -moz-appearance:none;

    padding-right:45px !important;

    cursor:pointer;

}



.dgmark-select-wrap::after{

    content:"\ea5f";

    font-family:"tabler-icons";

    position:absolute;

    right:16px;

    top:50%;

    transform:translateY(-50%);

    color:#94a3b8;

    font-size:18px;

    pointer-events:none;

}

.dgmark-input-wrap input:focus,
.dgmark-input-wrap select:focus{

    outline:none;

    border-color:#008e5a;

    box-shadow:

    0 0 0 3px rgba(0,142,90,.12);

}



/* ===========================
   PRODUCT INFO
=========================== */


.dgmark-product-info{

    margin-top:16px;

    padding:12px 14px;

    background:#f8fafc;

    border:1px solid #e2e8f0;

    border-radius:12px;

}



.dgmark-product-info span{

    display:block;

    font-size:11px;

    text-transform:uppercase;

    letter-spacing:.5px;

    color:#64748b;

    margin-bottom:4px;

}



.dgmark-product-info strong{

    font-size:14px;

    color:#0f172a;

}



/* ===========================
   FOOTER
=========================== */


.dgmark-modal-footer{

    display:flex;

    justify-content:flex-end;

    gap:12px;

    padding:16px 24px;

    border-top:

    1px solid #e5e7eb;

    background:#fafafa;

}



/* BUTTON CANCEL */

.dgmark-btn-cancel{


    border:

    1px solid #ef4444;


    color:#ef4444;


    background:#fff;


    border-radius:10px;


    padding:10px 22px;


    font-weight:600;


    transition:.25s ease;

}



.dgmark-btn-cancel:hover{

    background:#fef2f2;

}



/* BUTTON SUBMIT */


.dgmark-btn-submit{


    background:#008e5a;


    color:#fff;


    border:none;


    border-radius:10px;


    padding:10px 24px;


    font-weight:600;


    transition:.25s ease;

}



.dgmark-btn-submit:hover{

    transform:translateY(-1px);

}



/* ===========================
   TOAST
=========================== */


.dgmark-toast{


    position:fixed;


    top:24px;

    right:24px;


    width:340px;


    background:#fff;


    border-left:

    4px solid #16a34a;


    border-radius:14px;


    padding:18px;


    box-shadow:

    0 15px 40px rgba(0,0,0,.15);


    transform:

    translateX(120%);


    transition:.35s ease;


    z-index:999999;

}



.dgmark-toast.show{

    transform:

    translateX(0);

}

/* ===========================
   CUSTOM DROPDOWN
=========================== */


.dgmark-native-select{

    display:none;

}



.dgmark-custom-select{

    position:relative;

}



.dgmark-select-display{


    height:45px;

    width:100%;


    padding-left:44px;

    padding-right:45px;


    display:flex;

    align-items:center;


    border:1px solid #d1d5db;

    border-radius:10px;


    font-size:14px;

    color:#64748b;


    cursor:pointer;


    background:#fff;

}



.dgmark-select-arrow{


    position:absolute;

    right:18px;

    top:50%;


    width:8px;

    height:8px;


    border-right:2px solid #94a3b8;

    border-bottom:2px solid #94a3b8;


    transform:

    translateY(-65%)

    rotate(45deg);

}



.dgmark-select-options{


    position:absolute;


    left:0;

    right:0;


    top:52px;


    background:#fff;


    border-radius:12px;


    border:1px solid #e2e8f0;


    box-shadow:

    0 15px 35px rgba(0,0,0,.12);


    padding:6px;


    opacity:0;

    visibility:hidden;


    transform:

    translateY(-8px);


    transition:.2s ease;


    z-index:100;


}



.dgmark-custom-select.open 
.dgmark-select-options{


    opacity:1;

    visibility:visible;


    transform:

    translateY(0);

}



.dgmark-select-options div{


    padding:10px 14px;


    border-radius:8px;


    font-size:14px;


    color:#334155;


    cursor:pointer;


}



.dgmark-select-options div:hover{


    background:#f1f5f9;


}



.dgmark-select-options div.active{


    background:#ecfdf5;

    color:#008e5a;

}