/* ==========================================================
   STAR INDO KASIR
   POPUP SYSTEM V2
   VERSION 2.0
========================================================== */



/* ==========================================================
   GLOBAL MODAL
========================================================== */

.global-modal{

    position:fixed;

    inset:0;

    display:none;

    justify-content:center;

    align-items:center;

    z-index:999999;

    background:rgba(15,23,42,.52);

    backdrop-filter:none;
    -webkit-backdrop-filter:none;

    opacity:0;

    visibility:hidden;

    transition:

        opacity .18s ease,

        visibility .18s ease;

}


/* ==========================================================
   SHOW
========================================================== */

.global-modal.show{

    display:flex;

    opacity:1;

    visibility:visible;

}


/* ==========================================================
   HIDDEN
========================================================== */

.global-modal.hidden{

    display:none;

}


/* ==========================================================
   POPUP BOX
========================================================== */

.global-modal-box{

    position:relative;

    width:min(460px, calc(100vw - 32px));

    max-width:460px;

    height:auto;

    min-height:auto;

    max-height:calc(100dvh - 32px);

    padding:28px 28px 24px;

    border-radius:24px;

    background:#ffffff;

    border:1px solid rgba(226,232,240,.85);

    box-shadow:

        0 24px 56px rgba(15,23,42,.18),
        0 6px 18px rgba(76,29,149,.08);

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:0;

    text-align:center;

    box-sizing:border-box;

    overflow-y:auto;
    overscroll-behavior:contain;

    transform:

        scale(.92)

        translateY(18px);

    transition:

        transform .18s ease,

        opacity .18s ease;

}


/* ==========================================================
   SHOW ANIMATION
========================================================== */

.global-modal.show

.global-modal-box{

    transform:

        scale(1)

        translateY(0);

}


/* ==========================================================
   HIDE ANIMATION
========================================================== */

.global-modal.hidden

.global-modal-box{

    transform:

        scale(.92)

        translateY(12px);

}


/* ==========================================================
   POPUP LOCK
========================================================== */

body.popup-open{

    overflow:hidden;

}


/* ==========================================================
   STACK
========================================================== */

.popup-inactive{

    pointer-events:none;

    opacity:.45;

    filter:none;

}

.payment-popup-overlay,
.pos-popup-overlay,
.popup-overlay,
.popup-backdrop,
.modal-overlay{

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

    backdrop-filter:none;
    -webkit-backdrop-filter:none;

}
/* ==========================================================
   STAR INDO KASIR
   POPUP SYSTEM V2
   PART 9B
========================================================== */


/* ==========================================================
   POPUP TITLE
========================================================== */

.popup-title{

    display:block;

    flex:0 0 auto;

    width:100%;

    max-width:100%;

    margin:0 0 8px;

    padding:0;

    font-size:24px;

    font-weight:800;

    line-height:1.25;

    letter-spacing:-.2px;

    text-align:center;

    align-self:stretch;

    white-space:normal;

    max-height:none;

    overflow:visible;

    text-overflow:unset;

    word-break:normal;

    overflow-wrap:break-word;

    color:#111827;

}

.popup-text:empty{

    display:none;

}


/* ==========================================================
   MODERN POS POPUP VISUAL
========================================================== */

.pos-popup-icon{

    width:60px;
    height:60px;
    margin:0 auto 18px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;
    font-size:28px;
    font-weight:900;
    line-height:1;

    color:#7c3aed;
    background:
        radial-gradient(circle at 35% 25%, #ffffff 0, #ffffff 22%, transparent 23%),
        linear-gradient(135deg,#f2e7ff,#ffffff);

    box-shadow:
        0 8px 20px rgba(124,58,237,.12),
        inset 0 0 0 1px rgba(124,58,237,.14);

}

.pos-popup-icon--warning{

    color:#d97706;
    background:linear-gradient(135deg,#fff7ed,#ffffff);

}

.pos-popup-icon--error{

    color:#dc2626;
    background:linear-gradient(135deg,#fef2f2,#ffffff);

}

.pos-popup-icon--info{

    color:#7c3aed;
    background:linear-gradient(135deg,#f5f3ff,#ffffff);

}

.pos-popup-icon--success{

    width:64px;
    height:64px;
    color:#22c55e;
    font-size:32px;
    background:linear-gradient(135deg,#dcfce7,#f7fff9);

    box-shadow:
        0 8px 20px rgba(34,197,94,.14),
        inset 0 0 0 2px rgba(34,197,94,.14);

}

.pos-popup-icon--printer,
.pos-popup-icon--whatsapp,
.pos-popup-icon--confirm{

    color:#7c3aed;
    background:linear-gradient(135deg,#efe1ff,#ffffff);

}

.pos-popup-icon--whatsapp{

    color:#22c55e;

}

.pos-popup-icon--processing{

    width:64px;
    height:64px;
    color:#7c3aed;
    font-size:30px;
    background:linear-gradient(135deg,#eee2ff,#ffffff);

}

.pos-popup-icon svg{

    display:block;
    width:32px;
    height:32px;
    flex:0 0 auto;

}

.pos-popup-info{

    width:100%;
    max-width:100%;
    margin-top:18px;
    padding:13px 15px;

    border:1px solid rgba(168,85,247,.16);
    border-radius:14px;

    color:#4c1d95;
    background:#faf7ff;

    font-size:14px;
    font-weight:600;
    line-height:1.45;
    text-align:left;
    box-sizing:border-box;

}

.pos-popup-info[hidden]{

    display:none;

}

.pos-popup-summary{

    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px 18px;
    text-align:left;

}

.pos-popup-summary-item{

    min-width:0;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;

}

.pos-popup-summary-item:only-child{

    grid-column:1 / -1;

}

.pos-popup-summary-item span{

    display:block;
    margin-bottom:4px;
    color:#6b7280;
    font-size:12px;
    font-weight:700;

}

.pos-popup-summary-item strong{

    color:#111827;
    font-size:16px;
    font-weight:800;

}

.pos-popup-summary-note{

    display:block;
    margin-top:5px;
    color:#6b7280;
    font-size:12px;
    font-weight:500;
    line-height:1.45;

}

.pos-popup--success .popup-title{

    font-size:26px;

}

.pos-popup-variant--piutang .popup-title{

    font-size:23px;

    line-height:1.25;

    letter-spacing:0;

    text-transform:none;

}

.pos-popup-variant--piutang .popup-text{

    font-size:15px;

    line-height:1.45;

    letter-spacing:0;

    text-transform:none;

}

.pos-popup-variant--process .global-modal-box,
.pos-popup-variant--print .global-modal-box{

    width:min(460px, calc(100vw - 32px));
    max-width:460px;
    padding:28px 28px 24px;
    border-radius:24px;
    border:1px solid rgba(226,232,240,.9);
    background:#ffffff;
    box-shadow:
        0 24px 56px rgba(15,23,42,.18),
        0 6px 18px rgba(76,29,149,.08);

}

.pos-popup-variant--process .pos-popup-icon,
.pos-popup-variant--print .pos-popup-icon{

    position:relative;
    width:76px;
    height:76px;
    margin:0 auto 14px;
    font-size:0;
    color:#8a00ff;
    background:#f1e4ff;
    box-shadow:0 14px 34px rgba(138,0,255,.22);

}

.pos-popup-variant--process .pos-popup-icon::before,
.pos-popup-variant--print .pos-popup-icon::before{

    position:relative;
    z-index:1;
    font-size:32px;
    line-height:1;
    font-weight:900;

}

.pos-popup-variant--process .pos-popup-icon::before{

    content:none;

}

.pos-popup-variant--print .pos-popup-icon::before{

    content:none;

}

.pos-popup-variant--process .pos-popup-icon::after,
.pos-popup-variant--print .pos-popup-icon::after{

    content:"";
    position:absolute;
    inset:-12px;
    border:1px dashed rgba(168,85,247,.20);
    border-radius:999px;
    pointer-events:none;

}

.pos-popup-variant--process .pos-popup-icon::before,
.pos-popup-variant--print .pos-popup-icon::before{

    content:none;
    display:none;

}

.pos-popup-variant--process .pos-popup-icon svg,
.pos-popup-variant--print .pos-popup-icon svg{

    width:34px;
    height:34px;

}

.pos-popup-variant--process .pos-popup-icon{

    width:64px;
    height:64px;
    margin:0 auto 18px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#f3e8ff;
    color:#8a00ff;
    box-shadow:
        0 8px 20px rgba(147,51,234,.14),
        inset 0 0 0 6px rgba(147,51,234,.05);

}

.pos-popup-variant--process .pos-popup-icon svg{

    width:36px;
    height:36px;

}

.pos-popup-variant--process .popup-title,
.pos-popup-variant--print .popup-title{

    margin:0 0 8px;
    font-size:24px;
    line-height:1.2;
    font-weight:800;
    color:#111827;
    letter-spacing:-.02em;
    text-transform:none;

}

.pos-popup-variant--process .popup-text,
.pos-popup-variant--print .popup-text{

    max-width:390px;
    margin:0 auto;
    font-size:15px;
    line-height:1.45;
    color:#667085;

}

.pos-popup-variant--process .pos-popup-info,
.pos-popup-variant--print .pos-popup-info{

    width:100%;
    margin-top:0;
    padding:0;
    border:0;
    background:transparent;
    box-shadow:none;
    text-align:inherit;

}

.pos-popup-summary--payment{

    margin-top:22px;
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:0;
    padding:16px 18px;
    border:1px solid #e5e7eb;
    border-radius:16px;
    background:linear-gradient(180deg,#ffffff 0%,#f8f9ff 100%);
    box-sizing:border-box;

}

.pos-popup-summary--payment .pos-popup-summary-item{

    display:flex;
    align-items:center;
    gap:12px;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    text-align:left;

}

.pos-popup-summary-divider{

    width:1px;
    height:42px;
    margin:0 16px;
    background:#e5e7eb;

}

.pos-popup-summary-icon{

    flex:0 0 auto;
    margin:0;
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:14px;
    color:#8a00ff;
    background:#f3e8ff;
    font-size:20px;
    font-weight:900;

}

.pos-popup-summary-icon--green{

    color:#16a34a;
    background:#dcfce7;

}

.pos-popup-summary-icon--purple{

    color:#8a00ff;
    background:#f3e8ff;

}

.pos-popup-variant--process .pos-popup-summary-icon--purple{

    color:#8a00ff;
    background:linear-gradient(135deg,#f3e8ff 0%,#ffffff 100%);
    box-shadow:
        inset 0 0 0 1px rgba(138,0,255,.10),
        0 8px 18px rgba(138,0,255,.12);

}

.pos-popup-variant--process .pos-popup-summary-icon--green{

    color:#16a34a;
    background:linear-gradient(135deg,#dcfce7 0%,#ffffff 100%);
    box-shadow:
        inset 0 0 0 1px rgba(22,163,74,.10),
        0 8px 18px rgba(22,163,74,.12);

}

.pos-popup-summary-icon svg,
.pos-popup-template-icon svg{

    display:block;
    width:24px;
    height:24px;
    flex:0 0 auto;

}

.pos-popup-summary--payment .pos-popup-summary-item span:not(.pos-popup-summary-icon){

    margin:0 0 4px;
    color:#667085;
    font-size:12px;
    font-weight:700;

}

.pos-popup-summary--payment .pos-popup-summary-item strong{

    color:#111827;
    font-size:18px;
    font-weight:800;

}

.pos-popup-variant--process .pos-popup-summary--payment{

    margin-top:22px;
    width:100%;
    display:grid;
    grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr);
    align-items:center;
    gap:0;
    padding:16px 18px;
    border:1px solid #e5e7eb;
    border-radius:16px;
    background:linear-gradient(180deg,#ffffff 0%,#f8f9ff 100%);
    box-sizing:border-box;

}

.pos-popup-variant--process .pos-popup-summary--payment .pos-popup-summary-item{

    display:grid;
    grid-template-columns:48px minmax(0,1fr);
    align-items:center;
    gap:12px;
    min-width:0;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    text-align:left;

}

.pos-popup-variant--process .pos-popup-summary-divider{

    width:1px;
    height:44px;
    margin:0;
    background:#e5e7eb;
    justify-self:center;

}

.pos-popup-variant--process .pos-popup-summary-icon{

    width:48px;
    height:48px;
    min-width:48px;
    flex:0 0 48px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:16px;
    box-sizing:border-box;

}

.pos-popup-variant--process .pos-popup-summary-icon svg{

    display:block;
    width:26px;
    height:26px;
    flex:0 0 auto;

}

.pos-popup-summary-copy{

    min-width:0;

}

.pos-popup-variant--process .pos-popup-summary-label{

    display:block;
    margin:0 0 4px;
    color:#667085;
    font-size:12px;
    line-height:1.2;
    font-weight:700;

}

.pos-popup-variant--process .pos-popup-summary-value{

    display:block;
    color:#111827;
    font-size:18px;
    line-height:1.2;
    font-weight:900;
    white-space:nowrap;

}

@media (max-width:560px){

    .pos-popup-variant--process .pos-popup-summary--payment{

        grid-template-columns:1fr;
        gap:14px;

    }

    .pos-popup-variant--process .pos-popup-summary-divider{

        width:100%;
        height:1px;

    }

}

.pos-popup-divider{

    width:100%;
    margin-top:20px;
    border-top:1px dashed #e5e7eb;

}

.pos-popup-template-box{

    margin-top:18px;
    padding:14px 18px;
    border-radius:14px;
    background:linear-gradient(180deg,#f7edff 0%,#f2e7ff 100%);
    color:#6b21a8;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    font-size:15px;
    font-weight:500;

}

.pos-popup-template-icon{

    width:24px;
    height:24px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#8a00ff;
    font-size:18px;
    line-height:1;

}

.pos-popup-template-box strong{

    font-weight:800;
    color:#7e22ce;

}

.pos-popup-variant--process .global-modal-actions,
.pos-popup-variant--print .global-modal-actions{

    margin-top:22px;
    display:grid;
    grid-template-columns:1fr 1.15fr;
    gap:14px;

}

.pos-popup-variant--process .popup-button,
.pos-popup-variant--print .popup-button{

    height:48px;
    border-radius:13px;
    font-size:15px;
    font-weight:800;

}

.pos-popup-variant--process .btn-primary,
.pos-popup-variant--print .btn-primary{

    color:#ffffff;
    border:none;
    background:linear-gradient(135deg,#7c00ff 0%,#b000ff 100%);
    box-shadow:0 7px 16px rgba(147,51,234,.20);

}

.pos-popup-variant--process .btn-secondary,
.pos-popup-variant--print .btn-secondary{

    color:#374151;
    background:#ffffff;
    border:1px solid #d7dce8;
    box-shadow:none;

}

.pos-popup-variant--whatsapp .global-modal-box{

    width:min(520px, calc(100vw - 32px));
    max-width:520px;
    padding:34px 32px 28px;
    border-radius:28px;
    border:1px solid rgba(226,232,240,.9);
    background:#ffffff;
    box-shadow:
        0 24px 70px rgba(17,24,39,.24),
        0 0 45px rgba(147,51,234,.24);
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;

}

.pos-popup-variant--whatsapp .pos-popup-icon{

    position:relative;
    width:86px;
    height:86px;
    margin:0 auto 14px;
    color:#22c55e;
    font-size:0;
    background:
        radial-gradient(circle at center,#ffffff 0%,#ffffff 58%,#f3e8ff 100%);
    border:1px solid rgba(168,85,247,.35);
    box-shadow:
        0 14px 34px rgba(147,51,234,.22),
        inset 0 0 0 7px rgba(147,51,234,.06);

}

.pos-popup-variant--whatsapp .pos-popup-icon::before{

    content:none;
    position:relative;
    z-index:1;
    font-size:46px;
    line-height:1;
    font-weight:900;

}

.pos-popup-variant--whatsapp .pos-popup-icon::after{

    content:"";
    position:absolute;
    inset:-8px;
    border-radius:999px;
    border:1px solid rgba(168,85,247,.22);
    pointer-events:none;

}

.pos-popup-variant--whatsapp .pos-popup-icon::before{

    content:none;
    display:none;

}

.pos-popup-variant--whatsapp .pos-popup-icon svg{

    width:46px;
    height:46px;

}

.pos-popup-variant--whatsapp .popup-title{

    width:100%;
    margin:0 0 8px;
    font-size:24px;
    line-height:1.2;
    font-weight:800;
    color:#111827;
    text-align:center;
    letter-spacing:-.02em;
    text-transform:none;

}

.pos-popup-variant--whatsapp .popup-text{

    width:100%;
    max-width:390px;
    margin:0 auto;
    font-size:15px;
    line-height:1.45;
    color:#475467;
    text-align:center;

}

.pos-popup-variant--whatsapp .pos-popup-info{

    width:100%;
    margin-top:18px;
    padding:0;
    border:0;
    background:transparent;
    box-shadow:none;
    box-sizing:border-box;

}

.pos-popup-whatsapp-info{

    width:100%;
    padding:14px 16px;
    border-radius:14px;
    background:linear-gradient(180deg,#f4e8ff 0%,#f1e3ff 100%);
    color:#312e81;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    font-size:14px;
    font-weight:500;
    box-sizing:border-box;

}

.pos-popup-whatsapp-info-icon{

    width:26px;
    height:26px;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#7c00ff;
    border:2px solid currentColor;
    font-size:16px;
    font-weight:800;
    line-height:1;

}

.pos-popup-variant--whatsapp .global-modal-actions{

    width:100%;
    margin-top:22px;
    padding-top:18px;
    border-top:1px solid #e5e7eb;
    display:grid;
    grid-template-columns:1fr 1.15fr;
    gap:14px;

}

.pos-popup-variant--whatsapp .popup-button{

    height:54px;
    border-radius:14px;
    font-size:15px;
    font-weight:800;

}

.pos-popup-variant--whatsapp .btn-secondary{

    color:#111827;
    background:#ffffff;
    border:1px solid #d7dce8;
    box-shadow:none;

}

.pos-popup-variant--whatsapp .btn-primary{

    color:#ffffff;
    border:none;
    background:linear-gradient(135deg,#7c00ff 0%,#b000ff 100%);
    box-shadow:0 14px 34px rgba(147,51,234,.40);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;

}

.pos-popup-variant--whatsapp .btn-primary::after{

    content:"\27A4";
    font-size:20px;
    line-height:1;
    transform:rotate(-18deg);

}

.pos-popup--processing .global-modal-box{

    width:min(460px, calc(100vw - 32px));
    max-width:460px;
    padding:28px 28px 24px;

}

.pos-popup--processing .popup-title{

    font-size:24px;

}

.pos-popup-processing-steps{

    display:none;
    width:100%;
    margin-top:20px;
    padding:16px;
    border:1px solid rgba(168,85,247,.16);
    border-radius:18px;
    background:linear-gradient(135deg,rgba(168,85,247,.10),rgba(255,255,255,.8));
    box-sizing:border-box;

}

.pos-popup--processing .pos-popup-processing-steps{

    display:grid;
    gap:12px;

}

.pos-popup-step{

    display:grid;
    grid-template-columns:34px 1fr auto;
    align-items:center;
    gap:12px;

    color:#111827;
    font-size:14px;
    font-weight:800;
    text-align:left;

}

.pos-popup-step-icon{

    width:30px;
    height:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    color:#8b00ff;
    background:#f3e8ff;

}

.pos-popup-step strong{

    color:#8b00ff;
    font-size:13px;
    font-weight:800;

}

.pos-popup-step strong::before{

    content:"";
    width:14px;
    height:14px;
    display:inline-block;
    margin-right:8px;
    vertical-align:-2px;
    border:2px solid rgba(139,0,255,.25);
    border-top-color:#8b00ff;
    border-radius:50%;
    animation:posPopupSpin .8s linear infinite;

}

.pos-popup-processing-footer{

    display:none;
    width:100%;
    margin-top:18px;
    padding-top:18px;
    border-top:1px solid #e5e7eb;
    align-items:center;
    justify-content:space-between;
    gap:16px;

}

.pos-popup--processing .pos-popup-processing-footer{

    display:flex;

}

.pos-popup-processing-note{

    display:flex;
    align-items:center;
    gap:12px;
    color:#111827;
    text-align:left;

}

.pos-popup-processing-note > span{

    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#f3e8ff;

}

.pos-popup-processing-note strong,
.pos-popup-processing-note small{

    display:block;

}

.pos-popup-processing-note small{

    margin-top:3px;
    color:#6b7280;

}

.pos-popup-cancel-danger{

    min-width:190px;
    height:52px;
    border:1px solid rgba(239,68,68,.55);
    border-radius:16px;
    color:#ef4444;
    background:#ffffff;
    font-size:15px;
    font-weight:900;
    opacity:.65;
    cursor:not-allowed;

}

@keyframes posPopupSpin{

    to{

        transform:rotate(360deg);

    }

}


/* ==========================================================
   POPUP DESCRIPTION
========================================================== */

.popup-text{

    width:100%;

    max-width:100%;

    margin:0;

    padding:0;

    font-size:15px;

    font-weight:400;

    line-height:1.5;

    text-align:center;

    color:#6b7280;

    white-space:normal;

    overflow:visible;

    text-overflow:unset;

    word-break:normal;

    overflow-wrap:break-word;

}


/* ==========================================================
   ACTION WRAPPER
========================================================== */

.global-modal-actions{

    width:100%;

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(0,1fr));

    align-items:center;

    gap:12px;

    margin-top:22px;

}


#popupConfirm .global-modal-actions{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:12px;

    margin-top:22px;

}


/* ==========================================================
   BUTTON BASE
========================================================== */

.popup-button{

    width:100%;

    height:48px;

    border:none;

    outline:none;

    cursor:pointer;

    border-radius:13px;

    font-size:15px;

    font-weight:800;

    transition:

        transform .18s ease,

        box-shadow .18s ease,

        background .18s ease;

}


/* ==========================================================
   PRIMARY BUTTON
========================================================== */

.btn-primary{

    color:#ffffff;

    background:

        linear-gradient(

            135deg,

            #7c00ff,

            #a100ff

        );

    box-shadow:

        0 7px 16px

        rgba(124,0,255,.20);

}


.btn-primary:hover{

    transform:translateY(-1px);

    box-shadow:

        0 10px 20px

        rgba(124,0,255,.26);

}


.btn-primary:active{

    transform:scale(.98);

}


/* ==========================================================
   SECONDARY BUTTON
========================================================== */

.btn-secondary{

    color:#374151;

    background:#ffffff;

    border:1px solid #dfe3ee;

    box-shadow:none;

}


.btn-secondary:hover{

    background:#e2e8f0;

}


.btn-secondary:active{

    transform:scale(.98);

}

.popup-button.btn-danger{color:#fff;background:linear-gradient(135deg,#ef4444,#dc2626);box-shadow:0 7px 16px rgba(220,38,38,.20)}
.popup-button.btn-danger:focus-visible,.popup-button.btn-danger.is-active{background:linear-gradient(135deg,#dc2626,#b91c1c);box-shadow:0 0 0 3px rgba(239,68,68,.22),0 9px 20px rgba(220,38,38,.24)}


/* ==========================================================
   KEYBOARD ACTIVE BUTTON STATE
========================================================== */

.popup-button.is-active,
.popup-button:focus-visible{

    outline:none;

    transform:translateY(-1px);

    box-shadow:

        0 0 0 3px

        rgba(139,92,246,.25),

        0 12px 28px

        rgba(139,92,246,.30);

}


.popup-button.btn-primary.is-active,
.popup-button.btn-primary:focus-visible{

    color:#ffffff;

    background:

        linear-gradient(

            135deg,

            #8b00ff,

            #a100ff

        );

    box-shadow:

        0 0 0 3px

        rgba(139,92,246,.25),

        0 14px 32px

        rgba(139,92,246,.45);

}


.popup-button.btn-secondary.is-active,
.popup-button.btn-secondary:focus-visible{

    color:#5b21b6;

    background:#ede9fe;

    box-shadow:

        0 0 0 3px

        rgba(139,92,246,.22),

        0 10px 24px

        rgba(17,24,39,.14);

}


/* ==========================================================
   PROMPT INPUT
========================================================== */

.prompt-input{

    width:100%;

    height:52px;

    padding:0 16px;

    border-radius:14px;

    border:1px solid #dbe3ef;

    background:#ffffff;

    color:#111827;

    font-size:15px;

    outline:none;

    transition:

        border-color .18s ease,

        box-shadow .18s ease;

}


.prompt-input::placeholder{

    color:#94a3b8;

}


.prompt-input:focus{

    border-color:#6d5dfc;

    box-shadow:

        0 0 0 3px

        rgba(109,93,252,.12);

}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:520px){

    .global-modal-box{

        width:calc(100vw - 32px);

        padding:22px 20px 20px;

    }

    .global-modal-actions{

        grid-template-columns:1fr;

    }

    #popupConfirm .global-modal-actions{

        grid-template-columns:1fr;

    }

    .pos-popup-summary{

        grid-template-columns:1fr;

    }

    .pos-popup-summary--payment{

        grid-template-columns:1fr;
        gap:14px;

    }

    .pos-popup-summary-divider{

        width:100%;
        height:1px;
        margin:0;

    }

    .pos-popup-variant--whatsapp .global-modal-actions{

        grid-template-columns:1fr 1.15fr;

    }

    .pos-popup--processing .global-modal-box{

        padding:28px 24px;

    }

    .pos-popup-step{

        grid-template-columns:30px 1fr;

    }

    .pos-popup-step strong{

        grid-column:2;

    }

    .pos-popup--processing .pos-popup-processing-footer{

        align-items:stretch;

        flex-direction:column;

    }

    .popup-button{

        width:100%;

    }

}
/* ==========================================================
   STAR INDO KASIR
   POPUP SYSTEM V2
   PART 9C
========================================================== */


/* ==========================================================
   POPUP STRUK
========================================================== */

.popup-struk{

    position:fixed;

    inset:0;

    display:none;

    justify-content:center;

    align-items:center;

    z-index:999998;

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

}


.popup-struk.show{

    display:flex;

}


.popup-struk .popup-content{

    width:380px;

    max-width:92vw;

    background:#ffffff;

    border-radius:24px;

    padding:30px 32px;

    box-shadow:

        0 24px 60px rgba(15,23,42,.18);

    text-align:center;

}


.popup-actions{

    display:flex;

    gap:12px;

    margin-top:22px;

}

@media (max-width:640px){

    .pos-popup-variant--whatsapp .global-modal-box{

        width:calc(100vw - 32px);
        padding:28px 22px 24px;
        text-align:center;

    }

    .pos-popup-variant--whatsapp .popup-title,
    .pos-popup-variant--whatsapp .popup-text{

        max-width:100%;
        text-align:center;

    }

    .pos-popup-variant--whatsapp .pos-popup-info{

        margin-top:0;

    }

    .pos-popup-variant--whatsapp .global-modal-actions{

        grid-template-columns:1fr;

    }

}


/* ==========================================================
   GENERIC POPUP
========================================================== */

.popup,

.popup-member{

    position:fixed;

    inset:0;

    display:none;

    justify-content:center;

    align-items:center;

    z-index:9999;

}


.popup.show,

.popup-member.show{

    display:flex;

}


/* ==========================================================
   GENERIC CONTENT
========================================================== */

.popup-content{

    width:90%;

    max-width:650px;

    max-height:85vh;

    overflow:hidden;

    display:flex;

    flex-direction:column;

    background:#ffffff;

    border-radius:22px;

    box-shadow:

        0 24px 60px rgba(15,23,42,.16);

}


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

.popup-header{

    padding:18px 20px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    border-bottom:

        1px solid #eef2f7;

    font-size:18px;

    font-weight:800;

}


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

.popup-body{

    flex:1;

    overflow-y:auto;

    padding:18px;

}


/* ==========================================================
   MEMBER LIST
========================================================== */

.member-list{

    display:flex;

    flex-direction:column;

}


.member-item,

.piutang-item{

    padding:14px 16px;

    cursor:pointer;

    border-bottom:

        1px solid #eef2f7;

    transition:.18s;

}


.member-item:hover,

.piutang-item:hover,

.member-item.active,

.piutang-item.active{

    background:#f4f1ff;

    color:#6d5dfc;

}


/* ==========================================================
   EMPTY DATA
========================================================== */

.piutang-empty{

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:60px;

    border-radius:16px;

    background:#f8fafc;

    border:1px solid #e5e7eb;

    color:#64748b;

    font-weight:600;

}


/* ==========================================================
   SCROLLBAR
========================================================== */

.popup-body::-webkit-scrollbar,

.member-list::-webkit-scrollbar{

    width:8px;

}


.popup-body::-webkit-scrollbar-thumb,

.member-list::-webkit-scrollbar-thumb{

    background:#d1d5db;

    border-radius:8px;

}


.popup-body::-webkit-scrollbar-track,

.member-list::-webkit-scrollbar-track{

    background:transparent;

}


/* ==========================================================
   ANIMATION
========================================================== */

@keyframes popupFade{

    from{

        opacity:0;

        transform:

            translateY(16px)

            scale(.96);

    }

    to{

        opacity:1;

        transform:

            translateY(0)

            scale(1);

    }

}


.global-modal.show .global-modal-box,

.popup.show .popup-content,

.popup-member.show .popup-content,

.popup-struk.show .popup-content{

    animation:

        popupFade .18s ease;

}