.digages_popup {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 99999999999; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    /* overflow: auto; */
    background-color: rgb(0, 0, 0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.digages_popup-content {
    background-color: #fefefe;
    margin: auto; /* 15% from the top and centered */  
    width: 640px; /* Could be more or less, depending on screen size */ 
    max-width: none !important; 
    /* overflow-y: auto;  */
}


.digages_popup-contentw {
    background-color: #fefefe;
    margin: auto; /* 15% from the top and centered */  
    max-width: none !important; 
    /* overflow-y: auto;  */
}



/* hide on mobile (screens smaller than 768px) */
@media (max-width: 767px) {
    .digages_popup-content { 
    width: 100% !important;  
    max-width: none !important; 
    margin: 0 !important; 
    height: 100vh;  
    border-radius: 0px !important; 
    height: 100%; /* Ensure content covers full height */
    position: relative;

    }
    .digages_popup-contentw { 
    width: 100% !important;  
    max-width: none !important; 
    margin: 0 !important; 
    height: 100vh;  
    border-radius: 0px !important; 
    height: 100%; /* Ensure content covers full height */
    position: relative;

    }
}

.digages_close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.digages_close:hover,
.digages_close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* Direct Payments order detail right-side drawer. */
body.digages-popup-open { overflow: hidden; }
#orderDetailsModal.digages-order-drawer-overlay { align-items: -webkit-fill-available; justify-content: flex-end; background: rgba(15, 18, 24, .34); }
#orderDetailsModal.digages-order-drawer-overlay[aria-hidden="false"] { display: flex !important; }
.digages-order-drawer-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: transparent; cursor: default; }
#orderDetailsModal .digages-order-drawer { position: relative; z-index: 2; width: min(550px, calc(100vw - 40px)); height: 100%; display: flex; flex-direction: column; margin: 0; border-radius: 0; background: #fff; box-shadow: -12px 0 35px rgba(16,24,40,.2); animation: digagesDrawerIn .22s ease both; }
@keyframes digagesDrawerIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
.digages-order-drawer__head { display: flex; justify-content: space-between; gap: 16px; padding: 23px 25px 19px; border-bottom: 1px solid #e0e3e8; }
.digages-order-drawer__head p { margin: 0 0 6px; color: #6a717c; font-size: 12px; }
.digages-order-drawer__head p:last-child { margin: 7px 0 0; }
.digages-order-drawer__head a { color: #533582; text-decoration: none; }
.digages-order-drawer__title { display: flex; align-items: center; gap: 10px; }
.digages-order-drawer__title h2 { margin: 0; color: #17191d; font-size: 23px; line-height: 1.2; }
#orderDetailsModal .digages-order-drawer__close { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 0; background: transparent; color: #59606a; font-size: 28px; }
.digages-order-drawer__body { flex: 1 1 auto; overflow-y: auto; padding: 20px 25px 105px; }
.digages-order-drawer__loading { min-height: 260px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #6a717c; }
.digages-order-drawer__loading .spinner { float: none; margin: 0 0 10px; }
.digages-order-amount { padding: 17px 18px; border: 1px solid #dfe2e7; border-radius: 7px; background: #fbfcfd; }
.digages-order-amount span,.digages-order-amount small { display: block; color: #68707b; font-size: 12px; }
.digages-order-amount strong { display: block; margin: 4px 0; color: #17191d; font-size: 25px; }
.digages-order-drawer-section { margin-top: 18px; padding: 18px; border: 1px solid #dfe2e7; border-radius: 7px; background: #fff; }
.digages-order-drawer-section h3 { margin: 0 0 14px; color: #202329; font-size: 14px; }
.digages-order-drawer-section dl { display: grid; grid-template-columns: 145px 1fr; gap: 0; margin: 0; }
.digages-order-drawer-section dt,.digages-order-drawer-section dd { margin: 0; padding: 7px 0; border-bottom: 1px solid #eef0f3; font-size: 12px; }
.digages-order-drawer-section dt { color: #68707b; }
.digages-order-drawer-section dd { color: #262a31; font-weight: 500; word-break: break-word; }
.digages-order-drawer-section a { color: #533582; }
.digages-order-method { display: flex; align-items: flex-start; gap: 12px; }
.digages-order-method__icon { width: 36px; height: 36px; display: grid; place-items: center; flex: 0 0 36px; border-radius: 50%; background: #f3eff9; color: #533582; }
.digages-order-method > span:last-child { display: flex; flex-direction: column; gap: 4px; }
.digages-order-method small { color: #68707b; line-height: 1.5; }
.digages-order-proof { display: grid; grid-template-columns: 38px 1fr 18px; align-items: center; gap: 11px; min-height: 62px; padding: 9px 11px; border: 1px solid #dfe2e7; border-radius: 6px; color: #282c33 !important; }
.digages-order-proof > span { width: 36px; height: 40px; display: grid; place-items: center; border-radius: 4px; background: #f0f1f3; }
.digages-order-proof b { display: flex; flex-direction: column; gap: 3px; }
.digages-order-proof small { color: #68707b; font-size: 10px; font-weight: 400; }
.digages-order-empty-proof { display: flex; align-items: center; gap: 11px; padding: 14px; border: 1px dashed #afb5bf; border-radius: 6px; color: #68707b; }
.digages-order-reference { margin-top: 13px !important; }
.digages-order-muted { color: #8a9099; font-weight: 400; }
.digages-order-status { display: inline-flex; align-items: center; gap: 5px; width: max-content; padding: 4px 9px; border-radius: 5px; background: #edf0f3; color: #555c65; font-size: 11px; text-transform: capitalize; }
.digages-order-status.is-pending,.digages-order-status.is-on-hold { background: #fff1d9; color: #955600; }
.digages-order-status.is-confirmed,.digages-order-status.is-processing,.digages-order-status.is-completed { background: #e5f4e9; color: #27733a; }
.digages-order-status.is-cancelled,.digages-order-status.is-failed { background: #ffe9e7; color: #ae2c23; }
.digages-order-status-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.digages-order-status-row > span:last-child { color: #68707b; font-size: 11px; text-align: right; }
.digages-order-drawer__foot { position: absolute; z-index: 3; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: 1fr 1.25fr; gap: 10px; padding: 16px 25px; border-top: 1px solid #dfe2e7; background: #fff; box-shadow: 0 -8px 18px rgba(16,24,40,.04); }
.digages-order-action { min-height: 42px; border: 1px solid; border-radius: 5px; cursor: pointer; font-weight: 600; }
.digages-order-action.is-cancel { border-color: #df5750; background: #fff; color: #b12d25; }
.digages-order-action.is-confirm { border-color: #533582; background: #533582; color: #fff; }
.digages-order-action:disabled { border-color: #d7dae0; background: #f1f2f4; color: #9297a0; cursor: not-allowed; }

@media (max-width: 600px) {
 #orderDetailsModal .digages-order-drawer { width: 100vw !important; }
 .digages-order-drawer__head,.digages-order-drawer__body,.digages-order-drawer__foot { padding-left: 16px; padding-right: 16px; }
 .digages-order-drawer-section dl { grid-template-columns: 1fr; }
 .digages-order-drawer-section dt { padding-bottom: 0; border-bottom: 0; }
}