:root{
    --blue:#1976D2;
    --blue-light:#42A5F5;
    --green:#43A047;
    --orange:#FF9800;
    --pink:#E91E63;
    --yellow:#FFC107;
    --dark:#14213d;
    --text:#0f172a;
    --muted:#64748b;
    --border:#d7dee8;
    --soft:#F5F7FA;
    --white:#ffffff;
    --shadow:0 14px 35px rgba(15,23,42,.12);
    --shadow-soft:0 8px 22px rgba(15,23,42,.10);
}

*{
    box-sizing:border-box;
    font-family:Arial,Helvetica,sans-serif;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    padding:22px 10px;
    color:var(--text);
    background:
        radial-gradient(circle at top left, rgba(66,165,245,.15), transparent 35%),
        linear-gradient(180deg,#f8fbff,#f4f6f9);
}

.container{
    width:100%;
    max-width:700px;
    margin:auto;
    background:var(--white);
    padding:0 18px 105px;
    border-radius:22px;
    box-shadow:var(--shadow);
    overflow:hidden;
}

.title-box{
    position:relative;
    margin:0 -18px 18px;
    padding:24px 24px 26px;
    color:white;
    text-align:left;
    background:linear-gradient(135deg,#0D6EFD,#1976D2 55%,#0066d6);
    overflow:hidden;
}

.title-box::after{
    content:"";
    position:absolute;
    width:260px;
    height:160px;
    right:-80px;
    bottom:-90px;
    border-radius:50%;
    background:rgba(255,255,255,.13);
}

.title-inner{
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    gap:18px;
}

.title-icon{
    width:72px;
    height:72px;
    min-width:72px;
    border-radius:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,.14);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
}

.title-icon i{
    font-size:42px;
    color:white;
}

.title-box h2{
    margin:0;
    color:white;
    font-size:34px;
    line-height:1.05;
    font-weight:900;
    letter-spacing:.5px;
}

.title-box p{
    margin:8px 0 0;
    color:rgba(255,255,255,.92);
    font-size:17px;
    font-weight:700;
}

.note-box{
    position:relative;
    background:linear-gradient(135deg,#fff7d6,#fff1ba);
    border:2px solid var(--yellow);
    color:#6b4600;
    padding:18px 18px;
    border-radius:16px;
    font-size:15px;
    font-weight:800;
    text-align:center;
    margin:18px 0;
    line-height:1.65;
    box-shadow:0 12px 25px rgba(255,193,7,.18);
}

.note-box::before{
    content:"⚠️ PENTING ⚠️";
    display:block;
    color:#f57c00;
    font-size:24px;
    font-weight:900;
    margin-bottom:6px;
    letter-spacing:.3px;
}

.note-highlight{
    color:#d32f2f;
    font-weight:900;
}

.countdown-box{
    background:linear-gradient(135deg,#0D6EFD,#1976D2);
    border-radius:16px;
    padding:16px 14px;
    margin:18px 0 24px;
    color:white;
    box-shadow:0 18px 32px rgba(25,118,210,.28);
    width:100%;
}

.countdown-row{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:13px;
}

.countdown-title{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    font-size:17px;
    font-weight:900;
    text-transform:uppercase;
    text-align:center;
    white-space:nowrap;
}

.countdown-title::before{
    content:"
017";
    font-family:"Font Awesome 6 Free";
    font-weight:900;
    font-size:18px;
}

.countdown-wrapper{
    width:100%;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
}

.count-item{
    min-width:0;
    padding:11px 8px;
    border-radius:14px;
    background:rgba(255,255,255,.16);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}

.count-number{
    font-size:30px;
    font-weight:900;
    line-height:1;
    width:100%;
    text-align:center;
}

.count-label{
    font-size:12px;
    margin-top:7px;
    text-transform:uppercase;
    width:100%;
    text-align:center;
    font-weight:800;
}

.field-wrap{
    position:relative;
    margin:8px 0 18px;
}

.field-wrap i{
    position:absolute;
    left:18px;
    top:50%;
    transform:translateY(-50%);
    font-size:20px;
    color:#14365f;
    opacity:.95;
}

input[type="text"],
input[type="tel"]{
    width:100%;
    padding:17px 18px;
    margin:8px 0;
    border-radius:14px;
    border:1.5px solid var(--border);
    background:white;
    color:var(--text);
    font-size:16px;
    outline:none;
    transition:.2s;
}

.field-wrap input{
    padding-left:52px;
    margin:0;
}

input[type="text"]:focus,
input[type="tel"]:focus{
    border-color:var(--blue);
    box-shadow:0 0 0 4px rgba(25,118,210,.10);
}

input::placeholder{
    color:#8a94a6;
}

.section-label,
label{
    font-weight:900;
}

.section-label{
    display:flex;
    align-items:center;
    gap:10px;
    margin:20px 0 10px;
    font-size:18px;
}

.section-label i{
    color:var(--blue);
    font-size:22px;
    width:24px;
    text-align:center;
}

.gender-icon{
    display:inline-flex;
    align-items:center;
    gap:2px;
}

.gender-icon .fa-mars{
    color:#0D6EFD;
}

.gender-icon .fa-venus{
    color:var(--pink);
}

.radio-group{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin:8px 0 6px;
}

.radio-group label{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-width:74px;
    min-height:50px;
    border:2px solid #d3d8df;
    background:#fff;
    border-radius:13px;
    padding:10px 16px;
    cursor:pointer;
    transition:.2s;
    user-select:none;
    font-size:16px;
    margin:0;
    box-shadow:0 2px 7px rgba(15,23,42,.04);
}

.radio-group input{
    display:none;
}

.radio-group label:hover{
    border-color:var(--blue-light);
    transform:translateY(-1px);
}

.radio-group label.active{
    background:linear-gradient(135deg,#1976D2,#0D6EFD);
    color:#fff;
    border-color:#1976D2;
    box-shadow:0 10px 20px rgba(25,118,210,.24);
}

.radio-group label.active i{
    color:#fff;
}

.radio-group label.disabled{
    opacity:.38;
    pointer-events:none;
    background:#eef2f6;
}

.size-row{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    margin:0 0 12px;
}

.size-chart-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    background:linear-gradient(135deg,#FF9800,#fb8500);
    color:white;
    border:none;
    border-radius:12px;
    padding:12px 16px;
    cursor:pointer;
    font-weight:900;
    font-size:15px;
    transition:.2s;
    box-shadow:0 10px 18px rgba(255,152,0,.25);
}

.size-chart-btn:hover{
    transform:translateY(-1px);
}

#sizeLainnya{
    margin-top:12px;
}

.button-group{
    display:grid;
    grid-template-columns:1fr 1.35fr;
    gap:14px;
    margin-top:20px;
}

.left-buttons{
    display:block;
}

.btn{
    width:100%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    background:linear-gradient(135deg,#1976D2,#0D6EFD);
    color:white;
    border:none;
    padding:16px 18px;
    border-radius:14px;
    cursor:pointer;
    font-size:16px;
    font-weight:900;
    box-shadow:0 12px 22px rgba(25,118,210,.24);
    transition:.2s;
}

.btn:hover,
.floating-btn:hover{
    transform:translateY(-1px);
}

.btn-send{
    background:linear-gradient(135deg,#43A047,#2fac49);
    box-shadow:0 12px 22px rgba(67,160,71,.22);
}

button:disabled{
    opacity:.65;
    cursor:not-allowed;
    transform:none!important;
}

.table-wrapper{
    width:100%;
    overflow-x:auto;
}

table{
    width:100%;
    margin-top:18px;
    border-collapse:separate;
    border-spacing:0;
    font-size:13px;
    overflow:hidden;
    border-radius:14px;
}

th,td{
    padding:10px;
    border:1px solid #e3e8ef;
    text-align:center;
}

th{
    background:#f2f7ff;
    color:#14365f;
    font-weight:900;
}

.delete-btn{
    background:#f44336;
    color:white;
    border:none;
    padding:8px 12px;
    border-radius:10px;
    cursor:pointer;
    font-weight:900;
}

.floating-wa{
    position:fixed;
    right:16px;
    bottom:calc(env(safe-area-inset-bottom, 20px) + 18px);
    z-index:999;
}

.floating-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    background:linear-gradient(135deg,#16c96f,#18b95f);
    color:white;
    border:none;
    border-radius:50px;
    padding:15px 22px;
    font-size:16px;
    font-weight:900;
    cursor:pointer;
    box-shadow:0 14px 28px rgba(22,201,111,.28);
}

.wa-dropdown{
    display:none;
    flex-direction:column;
    margin-bottom:10px;
    gap:8px;
}

.wa-dropdown button{
    background:#25D366;
    color:white;
    border:none;
    border-radius:12px;
    padding:11px 14px;
    cursor:pointer;
    font-weight:800;
}

.popup-overlay{
    position:fixed;
    inset:0;
    background:rgba(15,23,42,.55);
    display:none;
    justify-content:center;
    align-items:center;
    z-index:9999;
    padding:18px;
}

.popup-box{
    background:white;
    padding:24px;
    width:100%;
    max-width:340px;
    border-radius:20px;
    text-align:center;
    box-shadow:var(--shadow);
    animation:popupShow .2s ease;
}

.popup-icon{
    font-size:48px;
    margin-bottom:10px;
}

.popup-message{
    font-size:15px;
    margin-bottom:18px;
    line-height:1.5;
    color:#172033;
}

.popup-buttons{
    display:flex;
    justify-content:center;
    gap:10px;
}

.popup-buttons button{
    border:none;
    border-radius:12px;
    padding:11px 18px;
    cursor:pointer;
    font-weight:900;
}

.popup-ok{
    background:#1976D2;
    color:white;
}

#popupOk:disabled,
.popup-ok:disabled{
    opacity:0.45!important;
    cursor:not-allowed!important;
    background:#94a3b8!important;
    color:#ffffff!important;
    transform:none!important;
    box-shadow:none!important;
}

.popup-cancel{
    background:#e5e7eb;
    color:#111827;
}

.loading-spinner{
    width:42px;
    height:42px;
    border:5px solid #e5e7eb;
    border-top:5px solid #1976D2;
    border-radius:50%;
    margin:0 auto 12px;
    animation:spin .8s linear infinite;
}

.success-check{
    width:52px;
    height:52px;
    border-radius:50%;
    background:#4CAF50;
    color:white;
    font-size:32px;
    margin:0 auto 12px;
    display:flex;
    align-items:center;
    justify-content:center;
}

@keyframes spin{
    to{ transform:rotate(360deg); }
}

@keyframes popupShow{
    from{ transform:scale(.92); opacity:0; }
    to{ transform:scale(1); opacity:1; }
}

.sizechart-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.65);
    display:none;
    justify-content:center;
    align-items:center;
    z-index:99999;
    padding:15px;
}

.sizechart-box{
    position:relative;
    width:100%;
    max-width:900px;
    max-height:90vh;
    background:white;
    padding:15px;
    border-radius:18px;
    animation:popupZoom .2s ease;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    touch-action:auto;
}

.sizechart-image{
    width:100%;
    border-radius:12px;
    touch-action:auto;
    user-select:auto;
    -webkit-user-drag:auto;
    cursor:default;
}

.sizechart-image.dragging{
    cursor:grabbing;
}

.sizechart-close{
    position:absolute;
    top:8px;
    right:12px;
    font-size:30px;
    font-weight:bold;
    cursor:pointer;
    color:#444;
}

.sizechart-close:hover{
    color:red;
}

@keyframes popupZoom{
    from{ transform:scale(.88); opacity:0; }
    to{ transform:scale(1); opacity:1; }
}

.btn-send.closed{
    background:#9e9e9e !important;
    color:white;
    cursor:not-allowed;
    box-shadow:none;
}

.network-status{
    display:none;
    position:relative;
    background:linear-gradient(135deg,#fff5f5,#ffe8e8);
    color:#8a1f1f;
    border:1.8px solid #ffb4b4;
    border-left:6px solid #ef4444;
    padding:14px 15px 14px 52px;
    border-radius:16px;
    font-size:14px;
    font-weight:800;
    text-align:left;
    margin:0 0 16px;
    line-height:1.55;
    box-shadow:0 10px 22px rgba(239,68,68,.12);
}

.network-status::before{
    content:"\f1eb";
    font-family:"Font Awesome 6 Free";
    font-weight:900;
    position:absolute;
    left:16px;
    top:17px;
    width:25px;
    height:25px;
    border-radius:50%;
    background:#ef4444;
    color:white;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
}

.network-status.show{
    display:block;
    animation:offlineBoxShow .25s ease, offlinePulse 2s ease-in-out infinite;
}

@keyframes offlineBoxShow{
    from{
        opacity:0;
        transform:translateY(-6px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes offlinePulse{
    0%{
        box-shadow:0 10px 22px rgba(239,68,68,.12);
    }

    50%{
        box-shadow:0 14px 28px rgba(239,68,68,.22);
    }

    100%{
        box-shadow:0 10px 22px rgba(239,68,68,.12);
    }
}

.btn-send.closed,
.btn-send.offline{
    background:#9e9e9e !important;
    color:white !important;
    cursor:not-allowed;
    box-shadow:none;
}

@media(max-width:768px){
    body{
        padding:0;
        background:#f3f6fb;
    }

    .container{
        max-width:none;
        min-height:100vh;
        border-radius:0;
        box-shadow:none;
        padding:0 20px 115px;
    }

    .title-box{
        margin:0 -20px 18px;
        padding:28px 22px 28px;
        text-align:left;
    }

    .title-icon{
        width:64px;
        height:64px;
        min-width:64px;
        border-radius:18px;
    }

    .title-icon i{
        font-size:38px;
    }

    .title-box h2{
        font-size:34px;
    }

    .title-box p{
        font-size:16px;
    }

    .note-box{
        font-size:15px;
        padding:22px 18px;
        border-radius:18px;
    }

    .note-box::before{
        font-size:26px;
    }

    .countdown-box{
        padding:16px 12px;
        border-radius:18px;
    }

    .countdown-wrapper{
        gap:10px;
    }

    .count-number{
        font-size:28px;
    }

    .count-label{
        font-size:12px;
    }

    input[type="text"],
    input[type="tel"]{
        font-size:20px;
        padding:20px 18px;
        border-radius:17px;
    }

    .field-wrap input{
        padding-left:58px;
    }

    .field-wrap i{
        font-size:22px;
        left:20px;
    }

    .section-label{
        font-size:26px;
        margin-top:24px;
        margin-bottom:12px;
    }

    .section-label i{
        font-size:26px;
        width:28px;
    }

    .size-chart-btn{
        font-size:20px;
        padding:15px 20px;
        border-radius:14px;
    }

    .radio-group{
        gap:14px;
    }

    .radio-group label{
        min-width:84px;
        min-height:64px;
        font-size:24px;
        border-radius:16px;
        padding:12px 20px;
    }

    .button-group{
        grid-template-columns:1fr;
        gap:16px;
    }

    .btn{
        font-size:24px;
        padding:20px 18px;
        border-radius:16px;
    }

    .floating-btn{
        font-size:23px;
        padding:18px 26px;
    }

    table thead{
        display:none;
    }

    table,tbody,tr,td{
        display:block;
        width:100%;
    }

    tr{
        background:#fff;
        margin-bottom:12px;
        border-radius:14px;
        padding:12px;
        box-shadow:0 4px 14px rgba(15,23,42,.09);
    }

    td{
        display:flex;
        justify-content:space-between;
        border:none;
        border-bottom:1px solid #eee;
        text-align:left;
        font-size:15px;
    }

    td::before{
        content:attr(data-label);
        font-weight:900;
        margin-right:12px;
    }
}

@media(max-width:390px){
    .title-box h2{
        font-size:29px;
    }

    .title-inner{
        gap:12px;
    }

    .title-icon{
        width:56px;
        height:56px;
        min-width:56px;
    }

    .title-icon i{
        font-size:32px;
    }

    .note-box{
        font-size:15px;
    }

    .radio-group label{
        min-width:74px;
        min-height:58px;
        font-size:21px;
        padding:10px 16px;
    }

    .floating-btn{
        font-size:18px;
        padding:15px 20px;
    }
}

.sheet-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    margin-right:2px;
}

.sheet-icon i{
    margin:0!important;
}

.sheet-icon .fa-google{
    font-size:.9em;
}

.sheet-icon .fa-table-cells{
    font-size:.9em;
}

.note-box{
    animation:pulseNote 2s ease-in-out infinite;
}

.countdown-box{
    animation:glowCountdown 2s ease-in-out infinite;
}

@keyframes pulseNote{
    0%{
        box-shadow:0 12px 25px rgba(255,193,7,.18);
    }

    50%{
        box-shadow:0 16px 32px rgba(255,193,7,.30);
    }

    100%{
        box-shadow:0 12px 25px rgba(255,193,7,.18);
    }
}

@keyframes glowCountdown{
    0%{
        box-shadow:0 18px 32px rgba(25,118,210,.28);
    }

    50%{
        box-shadow:0 22px 40px rgba(25,118,210,.42);
    }

    100%{
        box-shadow:0 18px 32px rgba(25,118,210,.28);
    }
}

.summary-confirm{
    text-align:left;
    background:#f8fbff;
    border:1.5px solid #dbeafe;
    border-radius:16px;
    padding:14px;
    margin:8px 0 4px;
}

.summary-title{
    color:#14365f;
    font-size:17px;
    font-weight:900;
    text-align:center;
    margin-bottom:10px;
}

.summary-row{
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding:8px 0;
    border-bottom:1px solid #e5edf8;
    font-size:14px;
}

.summary-row:last-of-type{
    border-bottom:none;
}

.summary-row span{
    color:#64748b;
    font-weight:800;
}

.summary-row b{
    color:#0f172a;
    text-align:right;
}

.summary-total{
    text-align:center;
    color:#0f172a;
    font-size:15px;
    margin-bottom:10px;
}

.summary-list{
    max-height:220px;
    overflow:auto;
    display:flex;
    flex-direction:column;
    gap:8px;
}

.summary-card{
    background:white;
    border:1px solid #e5edf8;
    border-radius:12px;
    padding:10px;
    color:#334155;
    font-size:13px;
    line-height:1.45;
}

.summary-card-title{
    color:#1976D2;
    font-weight:900;
    margin-bottom:4px;
}

.summary-note{
    margin-top:12px;
    color:#d97706;
    background:#fff7d6;
    border:1px solid #ffe08a;
    border-radius:10px;
    padding:9px 10px;
    font-size:13px;
    font-weight:900;
    text-align:center;
}

.payment-box{
    margin-top:10px;
    padding:10px;
    border-radius:14px;
    background:linear-gradient(180deg,#f8fbff,#eef6ff);
    border:1.5px solid #dbeafe;
}

.payment-title{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    color:#14365f;
    font-size:13px;
    font-weight:900;
    margin-bottom:8px;
    line-height:1.2;
}

.payment-title i{
    color:#1976D2;
    font-size:13px;
}

.payment-choice{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.payment-choice label{
    position:relative;
    display:flex;
    align-items:center;
    gap:8px;
    padding:9px 34px 9px 9px;
    border:1.5px solid #dbeafe;
    border-radius:12px;
    background:#ffffff;
    cursor:pointer;
    color:#14365f;
    text-align:left;
    transition:.2s;
    box-shadow:0 4px 10px rgba(15,23,42,.05);
}

.payment-choice label:hover{
    border-color:#93c5fd;
    transform:translateY(-1px);
}

.payment-choice input{
    display:none;
}

.payment-icon{
    width:26px;
    height:26px;
    min-width:26px;
    border-radius:9px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#eff6ff;
    color:#1976D2;
    font-size:13px;
}

.payment-text{
    flex:1;
    min-width:0;
}

.payment-text b{
    display:block;
    color:#0f172a;
    font-size:12px;
    line-height:1.15;
    font-weight:900;
}

.payment-text small{
    display:block;
    margin-top:2px;
    color:#64748b;
    font-size:10px;
    font-weight:800;
    line-height:1.25;
}

.payment-choice label:has(input:checked){
    border-color:#1976D2;
    background:linear-gradient(135deg,#1976D2,#0D6EFD);
    color:white;
    box-shadow:0 8px 16px rgba(25,118,210,.18);
}

.payment-choice label:has(input:checked) .payment-icon{
    background:white;
    color:#1976D2;
}

.payment-choice label:has(input:checked) .payment-text b,
.payment-choice label:has(input:checked) .payment-text small{
    color:white;
}

.payment-choice label:has(input:checked)::after{
    content:"✓";
    position:absolute;
    right:9px;
    top:50%;
    transform:translateY(-50%);
    width:19px;
    height:19px;
    border-radius:50%;
    background:white;
    color:#1976D2;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
    font-weight:900;
}

.payment-error{
    margin-top:8px;
    display:none;
    color:#dc2626;
    background:#fee2e2;
    border:1px solid #fecaca;
    border-radius:9px;
    padding:7px 8px;
    font-size:10.5px;
    line-height:1.3;
    font-weight:900;
    text-align:center;
}

@media(max-width:768px){
    .payment-box{
        padding:8px;
        border-radius:12px;
    }

    .payment-title{
        font-size:12px;
        margin-bottom:7px;
        gap:5px;
    }

    .payment-title i{
        font-size:12px;
    }

    .payment-choice{
        gap:7px;
    }

    .payment-choice label{
        padding:8px 31px 8px 8px;
        border-radius:11px;
        gap:7px;
    }

    .payment-icon{
        width:24px;
        height:24px;
        min-width:24px;
        border-radius:8px;
        font-size:12px;
    }

    .payment-text b{
        font-size:11.2px;
    }

    .payment-text small{
        font-size:9.2px;
        line-height:1.2;
    }

    .payment-choice label:has(input:checked)::after{
        right:8px;
        width:17px;
        height:17px;
        font-size:11px;
    }

    .payment-error{
        font-size:10px;
        padding:6px 7px;
    }
}

.rekening-box{
    text-align:left;
    background:#f8fbff;
    border:1.5px solid #dbeafe;
    border-radius:16px;
    padding:14px;
    margin-top:8px;
}

.rekening-title{
    color:#14365f;
    font-size:16px;
    font-weight:900;
    text-align:center;
    margin-bottom:10px;
}

.rekening-total{
    text-align:center;
    color:#16a34a;
    font-size:24px;
    font-weight:900;
    line-height:1.1;
    margin:4px 0 4px;
}

.rekening-subtitle{
    text-align:center;
    color:#64748b;
    font-size:12px;
    font-weight:900;
    margin-bottom:9px;
}

.kode-unik-box{
    margin:6px 0 8px;
    padding:7px 8px;
    border-radius:10px;
    background:linear-gradient(135deg,#fff7d6,#fff1ba);
    border:1.2px dashed #f59e0b;
    text-align:center;
}

.kode-unik-label{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    color:#92400e;
    font-size:10.5px;
    font-weight:900;
    margin-bottom:3px;
}

.kode-unik-label i{
    color:#f59e0b;
    font-size:10px;
}

.kode-unik-value{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:4px 9px;
    border-radius:8px;
    background:#ffffff;
    color:#dc2626;
    font-size:16px;
    font-weight:900;
    letter-spacing:.7px;
    border:1px solid #fde68a;
}

.kode-unik-copy-wrap{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    margin:2px 0 1px;
}

.kode-unik-copy-btn{
    border:none;
    border-radius:8px;
    padding:5px 9px;
    background:#1976D2;
    color:#ffffff;
    font-size:11px;
    font-weight:900;
    cursor:pointer;
    line-height:1;
    box-shadow:0 4px 10px rgba(25,118,210,.16);
}

.kode-unik-copy-btn:active{
    transform:scale(.97);
}

.kode-unik-copy-info{
    min-height:12px;
    margin-top:2px;
    color:#16a34a;
    font-size:9px;
    font-weight:900;
    line-height:1.1;
}

.kode-unik-note{
    margin-top:4px;
    color:#7c2d12;
    font-size:9.8px;
    font-weight:900;
    line-height:1.25;
}

@media(max-width:480px){
    .kode-unik-box{
        margin:5px 0 7px;
        padding:6px 7px;
        border-radius:9px;
    }

    .kode-unik-label{
        font-size:9.8px;
        margin-bottom:3px;
    }

    .kode-unik-label i{
        font-size:9.5px;
    }

    .kode-unik-value{
        font-size:14px;
        padding:3px 8px;
        border-radius:7px;
    }

    .kode-unik-note{
        font-size:9px;
        line-height:1.2;
    }
}

.rekening-detail-list{
    max-height:150px;
    overflow:auto;
    display:flex;
    flex-direction:column;
    gap:7px;
    margin:8px 0 12px;
}

.rekening-detail-card{
    background:#ffffff;
    border:1px solid #dbeafe;
    border-radius:11px;
    padding:8px 9px;
    font-size:12px;
}

.rekening-detail-title{
    color:#1976D2;
    font-weight:900;
    margin-bottom:3px;
}

.rekening-detail-name{
    color:#0f172a;
    font-size:12px;
    font-weight:900;
    line-height:1.25;
    margin-bottom:4px;
    word-break:break-word;
}

.rekening-detail-line{
    display:flex;
    justify-content:space-between;
    gap:8px;
    color:#334155;
    font-weight:800;
}

.rekening-detail-line b{
    color:#0f172a;
    text-align:right;
}

.rekening-detail-small{
    margin-top:3px;
    color:#64748b;
    font-size:11px;
    font-weight:800;
    line-height:1.35;
}

.rekening-title-bank{
    margin-top:4px;
}

.rekening-row{
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding:8px 0;
    border-bottom:1px solid #e5edf8;
    font-size:14px;
}

.rekening-row:last-child{
    border-bottom:none;
}

.rekening-row span{
    color:#64748b;
    font-weight:800;
}

.rekening-row b{
    color:#0f172a;
    text-align:right;
}

.rekening-note{
    margin-top:12px;
    color:#d97706;
    background:#fff7d6;
    border:1px solid #ffe08a;
    border-radius:10px;
    padding:9px 10px;
    font-size:13px;
    font-weight:900;
    text-align:center;
}

@media(max-width:768px){
    .summary-confirm{
        padding:14px;
    }

    .summary-title{
        font-size:20px;
    }

    .summary-row{
        font-size:16px;
    }

    .summary-card{
        font-size:15px;
    }

    .summary-note{
        font-size:15px;
    }
}

.popup-icon i{
    color:#1976D2;
    font-size:44px;
}

input#hp{
    letter-spacing:.3px;
}

.sizechart-close{
    display:none!important;
}

@media(max-width:768px){
    body{
        padding:0;
    }

    .container{
        padding:0 14px 95px;
    }

    .title-box{
        margin:0 -14px 14px;
        padding:20px 18px 22px;
    }

    .title-inner{
        gap:12px;
    }

    .title-icon{
        width:52px;
        height:52px;
        min-width:52px;
        border-radius:15px;
    }

    .title-icon i{
        font-size:30px;
    }

    .title-box h2{
        font-size:28px;
        letter-spacing:.2px;
    }

    .title-box p{
        font-size:14px;
        margin-top:5px;
    }

    .note-box{
        font-size:13px;
        padding:15px 13px;
        border-radius:15px;
        margin:14px 0;
        line-height:1.55;
    }

    .note-box::before{
        font-size:21px;
        margin-bottom:4px;
    }

    .countdown-box{
        padding:13px 10px;
        border-radius:15px;
        margin:14px 0 20px;
    }

    .countdown-row{
        gap:10px;
    }

    .countdown-title{
        font-size:15px;
    }

    .countdown-wrapper{
        gap:8px;
    }

    .count-item{
        padding:9px 5px;
        border-radius:12px;
    }

    .count-number{
        font-size:23px;
    }

    .count-label{
        font-size:10px;
        margin-top:5px;
    }

    .field-wrap{
        margin:6px 0 14px;
    }

    input[type="text"],
    input[type="tel"]{
        font-size:16px;
        padding:15px 14px;
        border-radius:14px;
    }

    .field-wrap input{
        padding-left:46px;
    }

    .field-wrap i{
        font-size:18px;
        left:16px;
    }

    .section-label{
        font-size:20px;
        margin-top:18px;
        margin-bottom:10px;
        gap:8px;
    }

    .section-label i{
        font-size:21px;
        width:23px;
    }

    .size-chart-btn{
        font-size:15px;
        padding:12px 15px;
        border-radius:12px;
    }

    .radio-group{
        gap:10px;
    }

    .radio-group label{
        min-width:64px;
        min-height:48px;
        font-size:17px;
        border-radius:13px;
        padding:9px 14px;
    }

    .button-group{
        gap:12px;
        margin-top:18px;
    }

    .btn{
        font-size:18px;
        padding:16px 15px;
        border-radius:14px;
    }

    .floating-wa{
        right:12px;
        bottom:calc(env(safe-area-inset-bottom, 20px) + 14px);
    }

    .floating-btn{
        font-size:17px;
        padding:13px 18px;
    }

    .network-status{
        font-size:13px;
        padding:12px 12px 12px 48px;
        border-radius:14px;
    }

    .network-status::before{
        left:14px;
        top:15px;
    }
}

@media(max-width:390px){
    .container{
        padding:0 12px 90px;
    }

    .title-box{
        margin:0 -12px 12px;
        padding:18px 15px 20px;
    }

    .title-box h2{
        font-size:25px;
    }

    .title-box p{
        font-size:13px;
    }

    .title-icon{
        width:48px;
        height:48px;
        min-width:48px;
    }

    .title-icon i{
        font-size:28px;
    }

    .note-box{
        font-size:12.5px;
        padding:13px 11px;
    }

    .note-box::before{
        font-size:19px;
    }

    .count-number{
        font-size:21px;
    }

    .count-label{
        font-size:9px;
    }

    .section-label{
        font-size:18px;
    }

    .radio-group label{
        min-width:58px;
        min-height:45px;
        font-size:16px;
        padding:8px 12px;
    }

    .btn{
        font-size:17px;
        padding:15px 14px;
    }

    .floating-btn{
        font-size:15px;
        padding:12px 16px;
    }
}

.note-box,
.countdown-box{
    will-change:box-shadow;
    transform:none!important;
    backface-visibility:hidden;
}

.sizechart-overlay,
.sizechart-box,
.sizechart-image{
    touch-action:auto!important;
}

.sizechart-image{
    transform:none!important;
}

.floating-wa{
    position:static!important;
    right:auto!important;
    bottom:auto!important;
    z-index:auto!important;
    width:100%;
    max-width:700px;
    margin:16px auto 24px;
    padding:0 18px;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
}

.floating-btn{
    width:auto;
}

.wa-dropdown{
    width:auto;
    align-items:stretch;
}

@media(max-width:768px){
    .floating-wa{
        max-width:none;
        margin:14px auto 22px;
        padding:0 14px;
        align-items:stretch;
    }

    .floating-btn{
        width:100%;
    }
}

@media(max-width:390px){
    .floating-wa{
        padding:0 12px;
    }
}

.wa-header-btn{
    position:absolute;
    top:18px;
    right:18px;
    z-index:5;
    width:46px;
    height:46px;
    border:none;
    border-radius:50%;
    background:#25D366;
    color:white;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:27px;
    cursor:pointer;
    box-shadow:0 10px 22px rgba(37,211,102,.30);
    transition:.2s;
}

.wa-header-btn:hover{
    transform:translateY(-1px) scale(1.03);
}

.wa-header-dropdown{
    position:absolute;
    top:70px;
    right:18px;
    z-index:6;
    display:none;
    flex-direction:column;
    gap:8px;
    min-width:155px;
}

.wa-header-dropdown button{
    border:none;
    border-radius:13px;
    padding:11px 13px;
    background:white;
    color:#166534;
    font-size:14px;
    font-weight:900;
    cursor:pointer;
    box-shadow:0 10px 22px rgba(15,23,42,.18);
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:8px;
}

.wa-header-dropdown button i{
    color:#25D366;
    font-size:18px;
}

@media(max-width:768px){
    .wa-header-btn{
        top:14px;
        right:14px;
        width:42px;
        height:42px;
        font-size:25px;
    }

    .wa-header-dropdown{
        top:62px;
        right:14px;
    }
}

@media(max-width:390px){
    .wa-header-btn{
        width:39px;
        height:39px;
        font-size:23px;
    }

    .wa-header-dropdown{
        top:58px;
    }
}

.admin-popup-overlay{
    position:fixed!important;
    inset:0!important;
    z-index:100000!important;
    background:rgba(15,23,42,.58)!important;
    display:none;
    align-items:center!important;
    justify-content:center!important;
    padding:18px!important;
}

.admin-popup-overlay.show{
    display:flex!important;
}

.admin-popup-box{
    position:relative!important;
    width:100%!important;
    max-width:360px!important;
    background:#ffffff!important;
    border-radius:22px!important;
    padding:26px 20px 20px!important;
    text-align:center!important;
    box-shadow:0 20px 45px rgba(15,23,42,.25)!important;
    animation:popupShow .2s ease!important;
}

.admin-popup-close{
    position:absolute!important;
    top:12px!important;
    right:12px!important;
    width:34px!important;
    height:34px!important;
    border:none!important;
    border-radius:50%!important;
    background:#f1f5f9!important;
    color:#334155!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    cursor:pointer!important;
    font-size:16px!important;
}

.admin-popup-icon{
    width:70px!important;
    height:70px!important;
    border-radius:50%!important;
    background:#25D366!important;
    color:white!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    margin:0 auto 12px!important;
    font-size:40px!important;
    box-shadow:0 12px 24px rgba(37,211,102,.28)!important;
}

.admin-popup-box h3{
    margin:0 0 8px!important;
    color:#14365f!important;
    font-size:22px!important;
    font-weight:900!important;
}

.admin-popup-box p{
    margin:0!important;
    color:#475569!important;
    font-size:15px!important;
    line-height:1.55!important;
    font-weight:700!important;
}

.admin-popup-buttons{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
    margin-top:18px!important;
}

.admin-popup-buttons button{
    border:none!important;
    border-radius:14px!important;
    padding:13px 12px!important;
    background:#25D366!important;
    color:white!important;
    font-size:15px!important;
    font-weight:900!important;
    cursor:pointer!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:8px!important;
    box-shadow:0 10px 20px rgba(37,211,102,.20)!important;
}

.admin-popup-buttons button:hover{
    transform:translateY(-1px)!important;
}

@media(max-width:390px){
    .admin-popup-box{
        max-width:320px!important;
        padding:24px 16px 18px!important;
    }

    .admin-popup-box h3{
        font-size:20px!important;
    }

    .admin-popup-box p{
        font-size:14px!important;
    }

    .admin-popup-buttons button{
        font-size:14px!important;
        padding:12px 10px!important;
    }
}

.container{
    box-shadow:0 10px 24px rgba(15,23,42,.08)!important;
}

.title-box{
    box-shadow:none!important;
}

.note-box{
    box-shadow:0 8px 16px rgba(255,193,7,.12)!important;
}

.countdown-box{
    box-shadow:0 10px 20px rgba(25,118,210,.16)!important;
}

.count-item{
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)!important;
}

.size-chart-btn{
    box-shadow:0 6px 12px rgba(255,152,0,.16)!important;
}

.btn{
    box-shadow:0 7px 14px rgba(25,118,210,.14)!important;
}

.btn-send{
    box-shadow:0 7px 14px rgba(67,160,71,.14)!important;
}

.radio-group label.active{
    box-shadow:0 6px 12px rgba(25,118,210,.16)!important;
}

.network-status{
    box-shadow:0 6px 14px rgba(239,68,68,.10)!important;
}

.wa-header-btn{
    box-shadow:0 6px 14px rgba(37,211,102,.18)!important;
}

.admin-popup-box,
.popup-box{
    box-shadow:0 14px 30px rgba(15,23,42,.18)!important;
}

.admin-popup-icon{
    box-shadow:0 7px 16px rgba(37,211,102,.18)!important;
}

.admin-popup-buttons button{
    box-shadow:0 6px 13px rgba(37,211,102,.14)!important;
}

@keyframes pulseNote{
    0%{
        box-shadow:0 8px 16px rgba(255,193,7,.12);
    }

    50%{
        box-shadow:0 10px 20px rgba(255,193,7,.18);
    }

    100%{
        box-shadow:0 8px 16px rgba(255,193,7,.12);
    }
}

@keyframes glowCountdown{
    0%{
        box-shadow:0 10px 20px rgba(25,118,210,.16);
    }

    50%{
        box-shadow:0 12px 24px rgba(25,118,210,.22);
    }

    100%{
        box-shadow:0 10px 20px rgba(25,118,210,.16);
    }
}

@keyframes offlinePulse{
    0%{
        box-shadow:0 6px 14px rgba(239,68,68,.10);
    }

    50%{
        box-shadow:0 8px 18px rgba(239,68,68,.15);
    }

    100%{
        box-shadow:0 6px 14px rgba(239,68,68,.10);
    }
}

.wa-header-btn.wa-notice{
    animation:waNoticeMove 1.15s ease-in-out 1;
}

@keyframes waNoticeMove{
    0%{
        transform:translateY(0) rotate(0deg) scale(1);
    }

    20%{
        transform:translateY(-3px) rotate(-8deg) scale(1.06);
    }

    40%{
        transform:translateY(2px) rotate(8deg) scale(1.06);
    }

    60%{
        transform:translateY(-2px) rotate(-6deg) scale(1.04);
    }

    80%{
        transform:translateY(1px) rotate(4deg) scale(1.03);
    }

    100%{
        transform:translateY(0) rotate(0deg) scale(1);
    }
}

.wa-header-btn::after{
    content:"";
    position:absolute;
    inset:-5px;
    border-radius:50%;
    border:2px solid rgba(37,211,102,.35);
    opacity:0;
    pointer-events:none;
}

.wa-header-btn.wa-notice::after{
    animation:waRingNotice 1.15s ease-out 1;
}

@keyframes waRingNotice{
    0%{
        opacity:0;
        transform:scale(.85);
    }

    35%{
        opacity:1;
    }

    100%{
        opacity:0;
        transform:scale(1.35);
    }
}

.btn-send{
    animation:sendButtonNotice 4s ease-in-out infinite;
}

@keyframes sendButtonNotice{
    0%, 72%, 100%{
        transform:translateY(0);
        box-shadow:0 7px 14px rgba(67,160,71,.14);
    }

    78%{
        transform:translateY(-2px);
        box-shadow:0 10px 18px rgba(67,160,71,.20);
    }

    84%{
        transform:translateY(0);
        box-shadow:0 7px 14px rgba(67,160,71,.14);
    }

    90%{
        transform:translateY(-1px);
        box-shadow:0 9px 16px rgba(67,160,71,.18);
    }
}

.size-chart-btn i{
    animation:sizeChartIconNotice 5s ease-in-out infinite;
}

@keyframes sizeChartIconNotice{
    0%, 76%, 100%{
        transform:rotate(0deg) scale(1);
    }

    82%{
        transform:rotate(-8deg) scale(1.08);
    }

    88%{
        transform:rotate(8deg) scale(1.08);
    }

    94%{
        transform:rotate(0deg) scale(1);
    }
}

.btn-send:hover{
    animation-play-state:paused;
}

.size-chart-btn:hover i{
    animation-play-state:paused;
}

@media(prefers-reduced-motion:reduce){
    .btn-send,
    .size-chart-btn i,
    .wa-header-btn.wa-notice,
    .wa-header-btn.wa-notice::after{
        animation:none!important;
    }
}

tr.new-saved-row{
    animation:newSavedRowNotice 3s ease-in-out 1;
}

tr.new-saved-row td{
    animation:newSavedCellNotice 3s ease-in-out 1;
}

@keyframes newSavedRowNotice{
    0%{
        transform:translateY(-4px);
    }

    25%{
        transform:translateY(0);
    }

    100%{
        transform:translateY(0);
    }
}

@keyframes newSavedCellNotice{
    0%{
        background:#e8f5ff;
        box-shadow:inset 0 0 0 999px rgba(25,118,210,.10);
    }

    45%{
        background:#f0fdf4;
        box-shadow:inset 0 0 0 999px rgba(67,160,71,.10);
    }

    100%{
        background:transparent;
        box-shadow:none;
    }
}

@media(max-width:768px){
    tr.new-saved-row{
        animation:newSavedMobileCard 3s ease-in-out 1;
    }

    tr.new-saved-row td{
        animation:none;
    }
}

@keyframes newSavedMobileCard{
    0%{
        transform:translateY(-5px);
        background:#e8f5ff;
        box-shadow:0 6px 18px rgba(25,118,210,.18);
    }

    45%{
        transform:translateY(0);
        background:#f0fdf4;
        box-shadow:0 6px 18px rgba(67,160,71,.14);
    }

    100%{
        transform:translateY(0);
        background:#ffffff;
        box-shadow:0 4px 14px rgba(15,23,42,.09);
    }
}

@media(prefers-reduced-motion:reduce){
    tr.new-saved-row,
    tr.new-saved-row td{
        animation:none!important;
    }
}

.radio-group label.radio-pop{
    animation:radioPop .32s ease-out 1;
}

@keyframes radioPop{
    0%{
        transform:scale(1);
    }

    45%{
        transform:scale(1.07);
    }

    100%{
        transform:scale(1);
    }
}

.popup-box,
.admin-popup-box{
    animation:popupSmoothIn .18s ease-out 1!important;
}

@keyframes popupSmoothIn{
    0%{
        opacity:0;
        transform:translateY(8px);
    }

    100%{
        opacity:1;
        transform:translateY(0);
    }
}

.popup-box.popup-error-shake,
.admin-popup-box.popup-error-shake{
    animation:none!important;
}

.input-error-shake{
    animation:errorShake .36s ease-in-out 1!important;
    border-color:#ef4444!important;
    box-shadow:0 0 0 4px rgba(239,68,68,.12)!important;
}

@keyframes errorShake{
    0%,100%{
        transform:translateX(0);
    }

    20%{
        transform:translateX(-6px);
    }

    40%{
        transform:translateX(6px);
    }

    60%{
        transform:translateX(-4px);
    }

    80%{
        transform:translateX(4px);
    }
}

@media(prefers-reduced-motion:reduce){
    .radio-group label.radio-pop,
    .popup-box,
    .admin-popup-box,
    .popup-box.popup-error-shake,
    .admin-popup-box.popup-error-shake,
    .input-error-shake{
        animation:none!important;
    }
}

.popup-box.popup-error-mode{
    animation:popupErrorIn .42s ease-in-out 1!important;
}

@keyframes popupErrorIn{
    0%{
        opacity:0;
        transform:translateY(8px);
    }

    22%{
        opacity:1;
        transform:translateY(0);
    }

    38%{
        transform:translateX(-7px);
    }

    54%{
        transform:translateX(7px);
    }

    70%{
        transform:translateX(-4px);
    }

    86%{
        transform:translateX(4px);
    }

    100%{
        opacity:1;
        transform:translateX(0);
    }
}

@media(prefers-reduced-motion:reduce){
    .popup-box.popup-error-mode{
        animation:none!important;
    }
}

.wa-header-btn,
.size-chart-btn i,
.btn-send,
.radio-group label{
    will-change:transform, box-shadow;
}

.size-chart-btn i{
    display:inline-block!important;
    transform-origin:center!important;
}

.btn-send:not(:disabled){
    animation:sendButtonNoticeStrong 3.4s ease-in-out infinite!important;
}

@keyframes sendButtonNoticeStrong{
    0%, 68%, 100%{
        transform:translateY(0) scale(1);
        box-shadow:0 7px 14px rgba(67,160,71,.14);
    }

    76%{
        transform:translateY(-4px) scale(1.018);
        box-shadow:0 13px 24px rgba(67,160,71,.28);
    }

    84%{
        transform:translateY(0) scale(1);
        box-shadow:0 7px 14px rgba(67,160,71,.14);
    }

    92%{
        transform:translateY(-2px) scale(1.01);
        box-shadow:0 11px 20px rgba(67,160,71,.22);
    }
}

.size-chart-btn i{
    animation:sizeChartIconNoticeStrong 3.8s ease-in-out infinite!important;
}

@keyframes sizeChartIconNoticeStrong{
    0%, 70%, 100%{
        transform:rotate(0deg) translateX(0) scale(1);
    }

    78%{
        transform:rotate(-14deg) translateX(-2px) scale(1.16);
    }

    86%{
        transform:rotate(14deg) translateX(2px) scale(1.16);
    }

    94%{
        transform:rotate(0deg) translateX(0) scale(1);
    }
}

.radio-group label.radio-pop{
    animation:radioPopStrong .48s cubic-bezier(.2,.9,.2,1.35) 1!important;
}

@keyframes radioPopStrong{
    0%{
        transform:scale(1);
    }

    45%{
        transform:scale(1.12);
    }

    70%{
        transform:scale(.98);
    }

    100%{
        transform:scale(1);
    }
}

.popup-box.popup-error-mode{
    animation:popupErrorStrong .62s ease-in-out 1!important;
}

@keyframes popupErrorStrong{
    0%{
        opacity:0;
        transform:translateY(10px) scale(.98);
    }

    18%{
        opacity:1;
        transform:translateY(0) scale(1);
    }

    32%{
        transform:translateX(-12px);
    }

    46%{
        transform:translateX(12px);
    }

    60%{
        transform:translateX(-8px);
    }

    74%{
        transform:translateX(8px);
    }

    88%{
        transform:translateX(-4px);
    }

    100%{
        opacity:1;
        transform:translateX(0);
    }
}

.input-error-shake{
    animation:inputErrorStrong .55s ease-in-out 1!important;
}

@keyframes inputErrorStrong{
    0%,100%{
        transform:translateX(0);
    }

    20%{
        transform:translateX(-9px);
    }

    40%{
        transform:translateX(9px);
    }

    60%{
        transform:translateX(-6px);
    }

    80%{
        transform:translateX(6px);
    }
}

.wa-header-btn:not(.wa-notice){
    animation:waIdlePulse 4.2s ease-in-out infinite!important;
}

@keyframes waIdlePulse{
    0%, 72%, 100%{
        transform:scale(1) rotate(0deg);
        box-shadow:0 6px 14px rgba(37,211,102,.18);
    }

    80%{
        transform:scale(1.10) rotate(-7deg);
        box-shadow:0 10px 22px rgba(37,211,102,.32);
    }

    88%{
        transform:scale(1.06) rotate(7deg);
        box-shadow:0 8px 18px rgba(37,211,102,.26);
    }
}

.wa-header-btn.wa-notice{
    animation:waNoticeMoveStrong 1.2s ease-in-out 1!important;
}

@keyframes waNoticeMoveStrong{
    0%{
        transform:translateY(0) rotate(0deg) scale(1);
    }

    20%{
        transform:translateY(-5px) rotate(-12deg) scale(1.13);
    }

    40%{
        transform:translateY(3px) rotate(12deg) scale(1.12);
    }

    60%{
        transform:translateY(-3px) rotate(-8deg) scale(1.08);
    }

    80%{
        transform:translateY(2px) rotate(6deg) scale(1.05);
    }

    100%{
        transform:translateY(0) rotate(0deg) scale(1);
    }
}

@media(max-width:768px){
    .btn-send:not(:disabled){
        animation-duration:3s!important;
    }

    .size-chart-btn i{
        animation-duration:3.2s!important;
    }

    .wa-header-btn:not(.wa-notice){
        animation-duration:3.5s!important;
    }
}

@media(max-width:768px){
    tr.new-saved-row{
        position:relative!important;
        overflow:hidden!important;
        animation:newSavedMobileCardStrong 3.4s ease-in-out 1!important;
        border:2px solid rgba(25,118,210,.35)!important;
    }

    tr.new-saved-row::before{
        content:"Baru";
        position:absolute;
        top:8px;
        left:10px;
        right:auto;
        z-index:2;
        background:#1976D2;
        color:#fff;
        font-size:10px;
        font-weight:900;
        padding:4px 7px;
        border-radius:999px;
        line-height:1;
        animation:newSavedBadgeStrong 3.4s ease-in-out 1!important;
    }

    tr.new-saved-row td{
        background:transparent!important;
    }

    @keyframes newSavedMobileCardStrong{
        0%{
            transform:translateY(-10px) scale(.98);
            background:#e8f5ff;
            box-shadow:0 0 0 0 rgba(25,118,210,.0);
        }

        12%{
            transform:translateY(0) scale(1.015);
            background:#e8f5ff;
            box-shadow:0 0 0 5px rgba(25,118,210,.16),
                       0 10px 24px rgba(25,118,210,.20);
        }

        38%{
            transform:translateY(0) scale(1);
            background:#f0fdf4;
            box-shadow:0 0 0 4px rgba(67,160,71,.14),
                       0 10px 24px rgba(67,160,71,.17);
        }

        72%{
            background:#fffbea;
            box-shadow:0 0 0 3px rgba(255,193,7,.16),
                       0 8px 18px rgba(255,193,7,.12);
        }

        100%{
            transform:translateY(0) scale(1);
            background:#ffffff;
            box-shadow:0 4px 14px rgba(15,23,42,.09);
        }
    }

    @keyframes newSavedBadgeStrong{
        0%{
            opacity:0;
            transform:translateY(-6px) scale(.9);
        }

        15%{
            opacity:1;
            transform:translateY(0) scale(1);
        }

        78%{
            opacity:1;
            transform:translateY(0) scale(1);
        }

        100%{
            opacity:0;
            transform:translateY(-4px) scale(.95);
        }
    }
}

@media(max-width:390px){
    tr.new-saved-row::before{
        font-size:10px;
        padding:4px 7px;
    }
}

@media(max-width:768px){
    tr.new-saved-row{
        padding-top:28px!important;
    }
}

@media(max-width:390px){
    tr.new-saved-row::before{
        font-size:9px!important;
        padding:3px 6px!important;
        top:7px!important;
        left:9px!important;
    }
}

.design-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    background:linear-gradient(135deg,#1976D2,#0D6EFD);
    color:white;
    border:none;
    border-radius:12px;
    padding:12px 16px;
    cursor:pointer;
    font-weight:900;
    font-size:15px;
    transition:.2s;
    box-shadow:0 6px 12px rgba(25,118,210,.16);
}

.design-btn:hover{
    transform:translateY(-1px);
}

.design-btn i{
    display:inline-block;
    transform-origin:center;
    animation:designIconNotice 4.2s ease-in-out infinite;
}

@keyframes designIconNotice{
    0%, 72%, 100%{
        transform:translateY(0) scale(1) rotate(0deg);
    }

    80%{
        transform:translateY(-2px) scale(1.12) rotate(-6deg);
    }

    88%{
        transform:translateY(1px) scale(1.08) rotate(6deg);
    }
}

.design-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.65);
    display:none;
    justify-content:center;
    align-items:center;
    z-index:99999;
    padding:15px;
    touch-action:auto!important;
}

.design-box{
    position:relative;
    width:100%;
    max-width:900px;
    max-height:90vh;
    background:white;
    padding:15px;
    border-radius:18px;
    animation:popupZoom .2s ease;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    touch-action:auto!important;
}

.design-image{
    width:100%;
    border-radius:12px;
    touch-action:auto!important;
    user-select:auto;
    -webkit-user-drag:auto;
    cursor:default;
    transform:none!important;
}

@media(max-width:768px){
    .size-row{
        gap:9px;
    }

    .design-btn{
        font-size:15px;
        padding:12px 14px;
        border-radius:12px;
    }

    .design-btn i{
        animation-duration:3.4s!important;
    }
}

@media(max-width:390px){
    .size-row{
        gap:8px;
    }

    .design-btn,
    .size-chart-btn{
        font-size:13px!important;
        padding:11px 12px!important;
    }
}

@media(prefers-reduced-motion:reduce){
    .design-btn i{
        animation:none!important;
    }
}

.design-btn{
    position:relative;
    overflow:hidden;
    will-change:transform, box-shadow;
}

.design-btn::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        120deg,
        transparent 0%,
        rgba(255,255,255,.0) 35%,
        rgba(255,255,255,.30) 50%,
        rgba(255,255,255,.0) 65%,
        transparent 100%
    );
    transform:translateX(-130%);
    pointer-events:none;
}

.design-btn{
    animation:designButtonNoticeStrong 3.6s ease-in-out infinite!important;
}

.design-btn::after{
    animation:designButtonShine 3.6s ease-in-out infinite!important;
}

.design-btn i{
    animation:designIconNoticeStrong 3.6s ease-in-out infinite!important;
}

@keyframes designButtonNoticeStrong{
    0%, 68%, 100%{
        transform:translateY(0) scale(1);
        box-shadow:0 6px 12px rgba(25,118,210,.16);
    }

    76%{
        transform:translateY(-3px) scale(1.025);
        box-shadow:0 12px 22px rgba(25,118,210,.28);
    }

    84%{
        transform:translateY(0) scale(1);
        box-shadow:0 6px 12px rgba(25,118,210,.16);
    }

    92%{
        transform:translateY(-2px) scale(1.012);
        box-shadow:0 10px 18px rgba(25,118,210,.22);
    }
}

@keyframes designButtonShine{
    0%, 65%, 100%{
        transform:translateX(-130%);
    }

    78%{
        transform:translateX(130%);
    }
}

@keyframes designIconNoticeStrong{
    0%, 68%, 100%{
        transform:translateY(0) scale(1) rotate(0deg);
    }

    76%{
        transform:translateY(-2px) scale(1.22) rotate(-10deg);
    }

    84%{
        transform:translateY(1px) scale(1.14) rotate(10deg);
    }

    92%{
        transform:translateY(0) scale(1.06) rotate(0deg);
    }
}

@media(max-width:768px){
    .design-btn{
        animation-duration:3s!important;
    }

    .design-btn::after{
        animation-duration:3s!important;
    }

    .design-btn i{
        animation-duration:3s!important;
    }
}

@media(prefers-reduced-motion:reduce){
    .design-btn,
    .design-btn::after,
    .design-btn i{
        animation:none!important;
    }
}

.design-btn{
    position:relative!important;
    overflow:visible!important;
    animation:designBtnPulseFinal 2.4s ease-in-out infinite!important;
    transform-origin:center!important;
    box-shadow:0 7px 14px rgba(25,118,210,.18)!important;
}

.design-btn i{
    display:inline-block!important;
    animation:designIconBounceFinal 2.4s ease-in-out infinite!important;
    transform-origin:center!important;
}

.design-btn::before{
    content:"Lihat";
    position:absolute;
    top:-9px;
    right:-7px;
    z-index:3;
    background:#ff9800;
    color:white;
    font-size:10px;
    font-weight:900;
    line-height:1;
    padding:4px 6px;
    border-radius:999px;
    box-shadow:0 4px 10px rgba(255,152,0,.28);
    animation:designBadgePulseFinal 2.4s ease-in-out infinite!important;
}

.design-btn::after{
    content:"";
    position:absolute;
    inset:-5px;
    border:2px solid rgba(25,118,210,.32);
    border-radius:16px;
    opacity:0;
    pointer-events:none;
    animation:designRingFinal 2.4s ease-in-out infinite!important;
    background:none!important;
    transform:none;
}

@keyframes designBtnPulseFinal{
    0%, 64%, 100%{
        transform:translateY(0) scale(1);
        box-shadow:0 7px 14px rgba(25,118,210,.18);
    }

    72%{
        transform:translateY(-5px) scale(1.045);
        box-shadow:0 16px 28px rgba(25,118,210,.34);
    }

    82%{
        transform:translateY(0) scale(1);
        box-shadow:0 7px 14px rgba(25,118,210,.18);
    }

    92%{
        transform:translateY(-3px) scale(1.025);
        box-shadow:0 13px 22px rgba(25,118,210,.28);
    }
}

@keyframes designIconBounceFinal{
    0%, 64%, 100%{
        transform:rotate(0deg) scale(1);
    }

    72%{
        transform:rotate(-14deg) scale(1.30);
    }

    82%{
        transform:rotate(12deg) scale(1.20);
    }

    92%{
        transform:rotate(0deg) scale(1.10);
    }
}

@keyframes designBadgePulseFinal{
    0%, 64%, 100%{
        transform:scale(1);
        opacity:.92;
    }

    72%{
        transform:scale(1.18);
        opacity:1;
    }

    82%{
        transform:scale(1);
        opacity:.95;
    }

    92%{
        transform:scale(1.10);
        opacity:1;
    }
}

@keyframes designRingFinal{
    0%, 60%, 100%{
        opacity:0;
        transform:scale(.96);
    }

    72%{
        opacity:1;
        transform:scale(1.05);
    }

    92%{
        opacity:.35;
        transform:scale(1.12);
    }
}

@media(max-width:768px){
    .design-btn{
        animation-duration:3.2s!important;
    }

    .design-btn i,
    .design-btn::before,
    .design-btn::after{
        animation-duration:3.2s!important;
    }
}

@media(max-width:390px){
    .design-btn::before{
        font-size:9px;
        top:-8px;
        right:-6px;
        padding:3px 5px;
    }
}

.design-btn{
    overflow:hidden!important;
    animation:none!important;
    transform:none!important;
}

.design-btn::before,
.design-btn::after{
    display:none!important;
    content:none!important;
    animation:none!important;
}

.design-btn i{
    display:inline-block!important;
    transform-origin:center!important;
    animation:designIconSimpleNotice 3.2s ease-in-out infinite!important;
}

@keyframes designIconSimpleNotice{
    0%, 70%, 100%{
        transform:rotate(0deg) translateY(0) scale(1);
    }

    78%{
        transform:rotate(-10deg) translateY(-1px) scale(1.12);
    }

    86%{
        transform:rotate(10deg) translateY(1px) scale(1.12);
    }

    94%{
        transform:rotate(0deg) translateY(0) scale(1);
    }
}

@media(prefers-reduced-motion:reduce){
    .design-btn i{
        animation:none!important;
    }
}

.design-btn{
    overflow:hidden!important;
    animation:none!important;
    transform:none!important;
}

.design-btn::before,
.design-btn::after{
    display:none!important;
    content:none!important;
    animation:none!important;
}

.design-btn i{
    display:inline-block!important;
    transform-origin:center!important;
    animation:sizeChartIconNoticeStrong 3.2s ease-in-out infinite!important;
}

@media(prefers-reduced-motion:reduce){
    .design-btn i{
        animation:none!important;
    }
}

.design-btn:hover,
.design-btn:active{
    transform:translateY(-1px)!important;
}

.design-btn{
    transition:.2s!important;
}

.design-btn{
    position:relative!important;
    overflow:hidden!important;
    animation:none!important;
    transition:.2s!important;
}

.design-btn:hover,
.design-btn:active{
    transform:translateY(-1px)!important;
}

.design-btn::before,
.design-btn::after{
    display:none!important;
    content:none!important;
    animation:none!important;
}

.design-btn i{
    display:inline-block!important;
    transform-origin:center center!important;
    animation:designIconNoticeHP 2.8s ease-in-out infinite!important;
    will-change:transform!important;
}

@keyframes designIconNoticeHP{
    0%, 58%, 100%{
        transform:rotate(0deg) translateY(0) scale(1);
    }

    68%{
        transform:rotate(-14deg) translateY(-2px) scale(1.22);
    }

    78%{
        transform:rotate(14deg) translateY(1px) scale(1.22);
    }

    88%{
        transform:rotate(0deg) translateY(0) scale(1.08);
    }
}

@media(max-width:768px){
    .design-btn i{
        animation:designIconNoticeHP 2.2s ease-in-out infinite!important;
    }
}

@media(prefers-reduced-motion:reduce){
    .design-btn i{
        animation:none!important;
    }
}

.design-btn{
    animation:none!important;
    overflow:hidden!important;
}

.design-btn::before,
.design-btn::after{
    display:none!important;
    content:none!important;
    animation:none!important;
}

.design-btn i.fa-shirt{
    display:inline-block!important;
    transform-origin:center center!important;
    animation:desainBajuIconFinal 1.8s ease-in-out infinite!important;
    color:#ffffff!important;
    will-change:transform,color,text-shadow!important;
}

@keyframes desainBajuIconFinal{
    0%, 52%, 100%{
        transform:translateX(0) translateY(0) rotate(0deg) scale(1);
        color:#ffffff;
        text-shadow:none;
    }

    62%{
        transform:translateX(-4px) translateY(-2px) rotate(-16deg) scale(1.38);
        color:#FFE082;
        text-shadow:0 0 8px rgba(255,224,130,.75);
    }

    72%{
        transform:translateX(4px) translateY(1px) rotate(16deg) scale(1.38);
        color:#FFE082;
        text-shadow:0 0 8px rgba(255,224,130,.75);
    }

    82%{
        transform:translateX(-2px) translateY(0) rotate(-8deg) scale(1.18);
        color:#ffffff;
        text-shadow:none;
    }
}

@media(max-width:768px){
    .design-btn i.fa-shirt{
        animation-duration:1.5s!important;
    }
}

@media(prefers-reduced-motion:reduce){
    .design-btn i.fa-shirt{
        animation:none!important;
    }
}

.design-btn{
    overflow:hidden!important;
    animation:none!important;
}

.design-btn::before,
.design-btn::after{
    display:none!important;
    content:none!important;
    animation:none!important;
}

.design-btn i{
    animation:none!important;
    transform:none!important;
    text-shadow:none!important;
}

.design-icon-wrap{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:20px!important;
    height:20px!important;
    min-width:20px!important;
    transform-origin:center center!important;
    animation:designIconWrapNotice 1.6s ease-in-out infinite!important;
    will-change:transform, filter!important;
}

.design-icon-wrap i{
    color:#ffffff!important;
    font-size:16px!important;
}

@keyframes designIconWrapNotice{
    0%, 48%, 100%{
        transform:translateX(0) translateY(0) rotate(0deg) scale(1);
        filter:none;
    }

    60%{
        transform:translateX(-4px) translateY(-2px) rotate(-16deg) scale(1.38);
        filter:drop-shadow(0 0 6px rgba(255,255,255,.65));
    }

    72%{
        transform:translateX(4px) translateY(1px) rotate(16deg) scale(1.38);
        filter:drop-shadow(0 0 6px rgba(255,255,255,.65));
    }

    84%{
        transform:translateX(-2px) translateY(0) rotate(-8deg) scale(1.16);
        filter:none;
    }
}

@media(max-width:768px){
    .design-icon-wrap{
        width:22px!important;
        height:22px!important;
        min-width:22px!important;
        animation-duration:1.35s!important;
    }

    .design-icon-wrap i{
        font-size:17px!important;
    }
}

@media(prefers-reduced-motion:reduce){
    .design-icon-wrap{
        animation:none!important;
    }
}

.design-btn{
    animation:none!important;
    overflow:visible!important;
}

.design-btn::before,
.design-btn::after{
    display:none!important;
    content:none!important;
    animation:none!important;
}

.design-btn i{
    animation:none!important;
}

.design-icon-wrap{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:22px!important;
    height:22px!important;
    min-width:22px!important;
    animation:designSvgIconMove 1.45s ease-in-out infinite!important;
    transform-origin:center center!important;
    will-change:transform!important;
}

.design-shirt-svg{
    width:22px!important;
    height:22px!important;
    fill:#ffffff!important;
    display:block!important;
    animation:designSvgIconGlow 1.45s ease-in-out infinite!important;
    will-change:filter, fill!important;
}

@keyframes designSvgIconMove{
    0%, 46%, 100%{
        transform:translateX(0) translateY(0) rotate(0deg) scale(1);
    }

    58%{
        transform:translateX(-5px) translateY(-2px) rotate(-18deg) scale(1.42);
    }

    70%{
        transform:translateX(5px) translateY(1px) rotate(18deg) scale(1.42);
    }

    82%{
        transform:translateX(-2px) translateY(0) rotate(-8deg) scale(1.18);
    }
}

@keyframes designSvgIconGlow{
    0%, 46%, 100%{
        fill:#ffffff;
        filter:none;
    }

    58%, 70%{
        fill:#FFE082;
        filter:drop-shadow(0 0 8px rgba(255,224,130,.90));
    }

    82%{
        fill:#ffffff;
        filter:none;
    }
}

@media(max-width:768px){
    .design-icon-wrap{
        width:24px!important;
        height:24px!important;
        min-width:24px!important;
        animation-duration:1.2s!important;
    }

    .design-shirt-svg{
        width:24px!important;
        height:24px!important;
        animation-duration:1.2s!important;
    }
}

@media(prefers-reduced-motion:reduce){
    .design-icon-wrap,
    .design-shirt-svg{
        animation:designSvgIconMove 1.2s ease-in-out infinite!important;
    }
}

.design-icon-wrap{
    animation:designSvgIconMoveSoft 3.2s ease-in-out infinite!important;
}

.design-shirt-svg{
    animation:designSvgIconGlowSoft 3.2s ease-in-out infinite!important;
}

@keyframes designSvgIconMoveSoft{
    0%, 62%, 100%{
        transform:translateX(0) translateY(0) rotate(0deg) scale(1);
    }

    72%{
        transform:translateX(-2px) translateY(-1px) rotate(-8deg) scale(1.14);
    }

    82%{
        transform:translateX(2px) translateY(0) rotate(8deg) scale(1.14);
    }

    92%{
        transform:translateX(0) translateY(0) rotate(0deg) scale(1.04);
    }
}

@keyframes designSvgIconGlowSoft{
    0%, 62%, 100%{
        fill:#ffffff;
        filter:none;
    }

    72%, 82%{
        fill:#fff2b8;
        filter:drop-shadow(0 0 4px rgba(255,224,130,.45));
    }

    92%{
        fill:#ffffff;
        filter:none;
    }
}

@media(max-width:768px){
    .design-icon-wrap{
        animation-duration:3.2s!important;
    }

    .design-shirt-svg{
        animation-duration:3.2s!important;
    }
}

@media(max-width:768px){
    .size-chart-btn,
    .design-btn{
        min-height:44px!important;
        height:44px!important;
        padding:11px 12px!important;
        font-size:13px!important;
        line-height:1!important;
        border-radius:12px!important;
        gap:7px!important;
        align-items:center!important;
    }

    .design-icon-wrap{
        width:16px!important;
        height:16px!important;
        min-width:16px!important;
        max-width:16px!important;
        max-height:16px!important;
    }

    .design-shirt-svg{
        width:16px!important;
        height:16px!important;
        max-width:16px!important;
        max-height:16px!important;
    }

    .size-chart-btn i{
        font-size:16px!important;
        width:16px!important;
        height:16px!important;
        line-height:16px!important;
    }
}

@media(max-width:390px){
    .size-chart-btn,
    .design-btn{
        min-height:42px!important;
        height:42px!important;
        padding:10px 10px!important;
        font-size:12.5px!important;
        gap:6px!important;
    }

    .design-icon-wrap,
    .design-shirt-svg{
        width:15px!important;
        height:15px!important;
        min-width:15px!important;
        max-width:15px!important;
        max-height:15px!important;
    }

    .size-chart-btn i{
        font-size:15px!important;
        width:15px!important;
        height:15px!important;
        line-height:15px!important;
    }
}

@media(max-width:768px){
    .container{
        padding:0 10px 80px!important;
    }

    .title-box{
        margin:0 -10px 10px!important;
        padding:12px 14px 13px!important;
    }

    .title-inner{
        gap:8px!important;
    }

    .title-icon{
        width:38px!important;
        height:38px!important;
        min-width:38px!important;
        border-radius:10px!important;
    }

    .title-icon i{
        font-size:22px!important;
    }

    .title-box h2{
        font-size:20px!important;
        line-height:1.05!important;
        letter-spacing:.1px!important;
    }

    .title-box p{
        font-size:10.5px!important;
        margin-top:3px!important;
    }

    .wa-header-btn{
        width:30px!important;
        height:30px!important;
        top:10px!important;
        right:10px!important;
        font-size:18px!important;
    }

    .note-box{
        margin:10px 0!important;
        padding:10px 9px!important;
        border-radius:11px!important;
        font-size:9.7px!important;
        line-height:1.42!important;
        border-width:1.5px!important;
    }

    .note-box::before{
        font-size:13px!important;
        margin-bottom:3px!important;
    }

    .countdown-box{
        margin:10px 0 13px!important;
        padding:9px 8px!important;
        border-radius:11px!important;
    }

    .countdown-row{
        gap:7px!important;
    }

    .countdown-title{
        font-size:10.5px!important;
        gap:5px!important;
    }

    .countdown-wrapper{
        gap:6px!important;
    }

    .count-item{
        padding:7px 3px!important;
        border-radius:9px!important;
    }

    .count-number{
        font-size:17px!important;
    }

    .count-label{
        font-size:7.5px!important;
        margin-top:3px!important;
    }

    .field-wrap{
        margin:4px 0 10px!important;
    }

    input[type="text"],
    input[type="tel"]{
        font-size:12px!important;
        padding:10px 10px!important;
        border-radius:9px!important;
    }

    .field-wrap input{
        padding-left:32px!important;
    }

    .field-wrap i{
        font-size:12px!important;
        left:12px!important;
    }

    .section-label{
        font-size:13px!important;
        margin-top:11px!important;
        margin-bottom:7px!important;
        gap:5px!important;
    }

    .section-label i,
    .gender-icon i{
        font-size:14px!important;
        width:auto!important;
    }

    .size-row{
        gap:6px!important;
        margin-bottom:8px!important;
    }

    .size-chart-btn,
    .design-btn{
        min-height:31px!important;
        height:31px!important;
        padding:7px 8px!important;
        font-size:10px!important;
        border-radius:8px!important;
        gap:4px!important;
        line-height:1!important;
    }

    .size-chart-btn i{
        font-size:11px!important;
        width:11px!important;
        height:11px!important;
        line-height:11px!important;
    }

    .design-icon-wrap,
    .design-shirt-svg{
        width:12px!important;
        height:12px!important;
        min-width:12px!important;
        max-width:12px!important;
        max-height:12px!important;
    }

    .radio-group{
        gap:6px!important;
        margin:6px 0 4px!important;
    }

    .radio-group label{
        min-width:45px!important;
        min-height:32px!important;
        font-size:12px!important;
        border-radius:8px!important;
        padding:6px 9px!important;
        gap:5px!important;
        border-width:1.5px!important;
    }

    #sizeLainnya{
        margin-top:7px!important;
    }

    .button-group{
        gap:9px!important;
        margin-top:12px!important;
    }

    .btn{
        font-size:13px!important;
        padding:11px 11px!important;
        border-radius:10px!important;
        gap:6px!important;
    }

    table{
        margin-top:12px!important;
    }

    tr{
        padding:9px!important;
        border-radius:11px!important;
        margin-bottom:10px!important;
    }

    td{
        font-size:12px!important;
        padding:7px 8px!important;
    }

    .delete-btn{
        padding:7px 10px!important;
        border-radius:8px!important;
        font-size:12px!important;
    }

    .popup-box{
        max-width:300px!important;
        padding:18px!important;
        border-radius:16px!important;
    }

    .popup-icon{
        font-size:36px!important;
    }

    .popup-message{
        font-size:13px!important;
    }

    .popup-buttons button{
        padding:9px 14px!important;
        border-radius:10px!important;
        font-size:13px!important;
    }
}

@media(max-width:390px){
    .container{
        padding:0 9px 76px!important;
    }

    .title-box{
        margin:0 -9px 9px!important;
        padding:11px 12px 12px!important;
    }

    .title-icon{
        width:35px!important;
        height:35px!important;
        min-width:35px!important;
    }

    .title-icon i{
        font-size:20px!important;
    }

    .title-box h2{
        font-size:18px!important;
    }

    .title-box p{
        font-size:10px!important;
    }

    .wa-header-btn{
        width:28px!important;
        height:28px!important;
        font-size:17px!important;
    }

    .note-box{
        font-size:9.2px!important;
        padding:9px 8px!important;
    }

    .note-box::before{
        font-size:12px!important;
    }

    .count-number{
        font-size:15px!important;
    }

    .count-label{
        font-size:7px!important;
    }

    .section-label{
        font-size:12.5px!important;
    }

    .size-chart-btn,
    .design-btn{
        min-height:29px!important;
        height:29px!important;
        padding:6px 7px!important;
        font-size:9.2px!important;
    }

    .radio-group label{
        min-width:42px!important;
        min-height:30px!important;
        font-size:11.2px!important;
        padding:5px 8px!important;
    }

    .btn{
        font-size:12.5px!important;
        padding:10px 10px!important;
    }
}

@media(max-width:768px){
    .table-wrapper{
        padding:0 4px!important;
        overflow:visible!important;
    }

    table{
        margin-top:10px!important;
    }

    tbody{
        display:block!important;
        width:100%!important;
    }

    tr{
        width:calc(100% - 12px)!important;
        margin:0 auto 9px!important;
        padding:7px 9px!important;
        border-radius:10px!important;
        box-shadow:0 3px 10px rgba(15,23,42,.08)!important;
    }

    td{
        font-size:11.5px!important;
        padding:6px 5px!important;
        min-height:28px!important;
        align-items:center!important;
    }

    td::before{
        font-size:11.5px!important;
        margin-right:10px!important;
    }

    .delete-btn{
        padding:6px 9px!important;
        border-radius:8px!important;
        font-size:11.5px!important;
    }

    tr.new-saved-row{
        width:calc(100% - 12px)!important;
        padding-top:24px!important;
    }

    tr.new-saved-row::before{
        top:6px!important;
        left:8px!important;
        font-size:8.5px!important;
        padding:3px 6px!important;
    }
}

@media(max-width:390px){
    .table-wrapper{
        padding:0 6px!important;
    }

    tr{
        width:calc(100% - 16px)!important;
        padding:6px 8px!important;
        border-radius:9px!important;
    }

    td{
        font-size:11px!important;
        padding:5px 4px!important;
        min-height:26px!important;
    }

    td::before{
        font-size:11px!important;
    }

    .delete-btn{
        font-size:11px!important;
        padding:5px 8px!important;
    }

    tr.new-saved-row{
        width:calc(100% - 16px)!important;
        padding-top:23px!important;
    }
}

@media(max-width:768px){
    .table-wrapper{
        padding:0!important;
        overflow:visible!important;
    }

    tr{
        width:100%!important;
        margin:0 0 9px!important;
    }

    tr.new-saved-row{
        width:100%!important;
    }
}

@media(max-width:390px){
    .table-wrapper{
        padding:0!important;
    }

    tr{
        width:100%!important;
        margin:0 0 9px!important;
    }

    tr.new-saved-row{
        width:100%!important;
    }
}

@media(max-width:768px){
    .size-chart-btn,
    .design-btn{
        min-height:34px!important;
        height:34px!important;
        padding:8px 10px!important;
        font-size:10.8px!important;
        border-radius:9px!important;
        gap:5px!important;
    }

    .size-chart-btn i{
        font-size:12px!important;
        width:12px!important;
        height:12px!important;
        line-height:12px!important;
    }

    .design-icon-wrap,
    .design-shirt-svg{
        width:13px!important;
        height:13px!important;
        min-width:13px!important;
        max-width:13px!important;
        max-height:13px!important;
    }

    .radio-group label{
        min-width:49px!important;
        min-height:35px!important;
        font-size:12.8px!important;
        padding:7px 10px!important;
        border-radius:9px!important;
    }

    .btn{
        font-size:14px!important;
        padding:12px 12px!important;
        border-radius:11px!important;
    }

    .delete-btn{
        font-size:12.2px!important;
        padding:7px 10px!important;
        border-radius:8px!important;
    }

    .popup-buttons button,
    .admin-popup-buttons button{
        font-size:13.5px!important;
        padding:10px 15px!important;
        border-radius:11px!important;
    }
}

@media(max-width:390px){
    .size-chart-btn,
    .design-btn{
        min-height:32px!important;
        height:32px!important;
        padding:7px 9px!important;
        font-size:10.2px!important;
    }

    .radio-group label{
        min-width:46px!important;
        min-height:33px!important;
        font-size:12px!important;
        padding:6px 9px!important;
    }

    .btn{
        font-size:13.2px!important;
        padding:11px 11px!important;
    }
}

@media(max-width:768px){
    input[type="text"],
    input[type="tel"]{
        font-size:13px!important;
        padding:11px 11px!important;
        border-radius:10px!important;
    }

    .field-wrap input{
        padding-left:35px!important;
    }

    .field-wrap i{
        font-size:13px!important;
        left:13px!important;
    }
}

@media(max-width:390px){
    input[type="text"],
    input[type="tel"]{
        font-size:12.5px!important;
        padding:10.5px 10px!important;
        border-radius:10px!important;
    }

    .field-wrap input{
        padding-left:34px!important;
    }

    .field-wrap i{
        font-size:12.5px!important;
        left:12.5px!important;
    }
}

@media(max-width:768px){
    .countdown-box{
        padding:7px 8px!important;
        margin:9px 0 12px!important;
        border-radius:10px!important;
    }

    .countdown-row{
        gap:5px!important;
    }

    .countdown-title{
        font-size:10px!important;
    }

    .count-item{
        padding:5px 3px!important;
        border-radius:8px!important;
    }

    .count-number{
        font-size:16px!important;
    }

    .count-label{
        font-size:7px!important;
        margin-top:2px!important;
    }
}

@media(max-width:390px){
    .countdown-box{
        padding:6px 7px!important;
        margin:8px 0 11px!important;
    }

    .count-item{
        padding:4px 3px!important;
    }

    .count-number{
        font-size:15px!important;
    }

    .count-label{
        font-size:6.8px!important;
    }
}

.site-footer{
    margin-top:24px;
    padding:16px 10px 6px;
    text-align:center;
    color:#64748b;
    font-size:13px;
    font-weight:700;
    border-top:1px solid #e5e7eb;
}

.site-footer span{
    color:#1976D2;
    font-weight:900;
}

@media(max-width:768px){
    .site-footer{
        margin-top:18px;
        padding:13px 8px 4px;
        font-size:11px;
    }
}

.network-status{
    display:none;
    position:sticky!important;
    top:10px!important;
    z-index:50!important;
    background:linear-gradient(135deg,#fff1f2,#ffe4e6 55%,#fecdd3)!important;
    color:#7f1d1d!important;
    border:2px solid #ef4444!important;
    border-left:9px solid #dc2626!important;
    padding:16px 16px 16px 58px!important;
    border-radius:18px!important;
    font-size:14px!important;
    font-weight:800!important;
    text-align:left!important;
    margin:0 0 18px!important;
    line-height:1.55!important;
    box-shadow:0 14px 32px rgba(220,38,38,.24), 0 0 0 4px rgba(239,68,68,.08)!important;
}

.network-status::before{
    content:"\f1eb"!important;
    font-family:"Font Awesome 6 Free"!important;
    font-weight:900!important;
    position:absolute!important;
    left:17px!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    width:30px!important;
    height:30px!important;
    border-radius:50%!important;
    background:#dc2626!important;
    color:white!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    font-size:14px!important;
    box-shadow:0 0 0 6px rgba(220,38,38,.14)!important;
}

.network-status.show{
    display:block!important;
    animation:offlineBoxStrongShow .25s ease, offlineStrongPulse 1.35s ease-in-out infinite!important;
}

.offline-title{
    font-size:16px!important;
    font-weight:900!important;
    color:#991b1b!important;
    margin-bottom:3px!important;
    text-transform:uppercase!important;
    letter-spacing:.2px!important;
}

.offline-message{
    font-size:13px!important;
    font-weight:800!important;
    color:#7f1d1d!important;
}

@keyframes offlineBoxStrongShow{
    from{
        opacity:0;
        transform:translateY(-8px) scale(.98);
    }
    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

@keyframes offlineStrongPulse{
    0%,100%{
        box-shadow:0 14px 32px rgba(220,38,38,.24), 0 0 0 4px rgba(239,68,68,.08);
    }
    50%{
        box-shadow:0 18px 40px rgba(220,38,38,.36), 0 0 0 7px rgba(239,68,68,.14);
    }
}

@media(max-width:768px){
    .network-status{
        top:8px!important;
        padding:13px 12px 13px 52px!important;
        border-radius:14px!important;
        margin:0 0 12px!important;
        border-left-width:7px!important;
    }

    .network-status::before{
        left:13px!important;
        width:27px!important;
        height:27px!important;
        font-size:12px!important;
    }

    .offline-title{
        font-size:13px!important;
    }

    .offline-message{
        font-size:11.3px!important;
        line-height:1.45!important;
    }
}

#customPopup{
    padding:10px!important;
}

#customPopup .popup-box{
    max-width:316px!important;
    padding:14px!important;
    border-radius:17px!important;
}

#customPopup .popup-icon{
    font-size:32px!important;
    margin-bottom:6px!important;
}

#customPopup .popup-icon i{
    font-size:34px!important;
}

#customPopup .popup-message{
    font-size:12.5px!important;
    line-height:1.35!important;
    margin-bottom:12px!important;
}

#customPopup .popup-buttons{
    gap:8px!important;
}

#customPopup .popup-buttons button{
    padding:8px 15px!important;
    border-radius:10px!important;
    font-size:12.5px!important;
}

#customPopup .summary-confirm{
    padding:10px!important;
    margin:4px 0 0!important;
    border-radius:14px!important;
}

#customPopup .summary-title{
    font-size:16px!important;
    margin-bottom:6px!important;
    line-height:1.2!important;
}

#customPopup .summary-total{
    font-size:12.5px!important;
    margin-bottom:7px!important;
}

#customPopup .summary-row{
    padding:5px 0!important;
    font-size:12px!important;
    gap:8px!important;
}

#customPopup .summary-list{
    max-height:145px!important;
    gap:6px!important;
}

#customPopup .summary-card{
    padding:7px 8px!important;
    border-radius:10px!important;
    font-size:11.5px!important;
    line-height:1.25!important;
}

#customPopup .summary-card-title{
    margin-bottom:2px!important;
    font-size:11.5px!important;
}

#customPopup .summary-note{
    margin-top:8px!important;
    padding:7px 8px!important;
    border-radius:9px!important;
    font-size:11.2px!important;
    line-height:1.35!important;
}

#customPopup .payment-box{
    margin-top:8px!important;
    padding:7px!important;
    border-radius:12px!important;
}

#customPopup .payment-title{
    font-size:11.5px!important;
    margin-bottom:6px!important;
    gap:5px!important;
}

#customPopup .payment-title i{
    font-size:11.5px!important;
}

#customPopup .payment-choice{
    gap:6px!important;
}

#customPopup .payment-choice label{
    min-height:42px!important;
    padding:7px 28px 7px 7px!important;
    border-radius:10px!important;
    gap:7px!important;
}

#customPopup .payment-icon{
    width:23px!important;
    height:23px!important;
    min-width:23px!important;
    border-radius:8px!important;
    font-size:11px!important;
}

#customPopup .payment-text b{
    font-size:11px!important;
    line-height:1.15!important;
}

#customPopup .payment-text small{
    margin-top:1px!important;
    font-size:8.8px!important;
    line-height:1.15!important;
}

#customPopup .payment-choice label:has(input:checked)::after{
    right:7px!important;
    width:16px!important;
    height:16px!important;
    font-size:10px!important;
}

#customPopup .payment-error{
    margin-top:6px!important;
    padding:5px 6px!important;
    border-radius:8px!important;
    font-size:9.5px!important;
    line-height:1.25!important;
}

@media(max-width:390px){
    #customPopup .popup-box{
        max-width:292px!important;
        padding:12px!important;
        border-radius:16px!important;
    }

    #customPopup .summary-title{
        font-size:15px!important;
    }

    #customPopup .summary-list{
        max-height:130px!important;
    }

    #customPopup .summary-card{
        font-size:11px!important;
        padding:6px 7px!important;
    }

    #customPopup .summary-note{
        font-size:10.5px!important;
    }

    #customPopup .payment-choice label{
        min-height:40px!important;
    }
}

#customPopup{
    padding:14px!important;
}

#customPopup .popup-box{
    max-width:340px!important;
    padding:18px!important;
    border-radius:18px!important;
}

#customPopup .popup-icon{
    font-size:38px!important;
    margin-bottom:8px!important;
}

#customPopup .popup-icon i{
    font-size:38px!important;
}

#customPopup .popup-message{
    font-size:13.5px!important;
    line-height:1.45!important;
    margin-bottom:14px!important;
}

#customPopup .popup-buttons{
    gap:9px!important;
}

#customPopup .popup-buttons button{
    padding:9px 16px!important;
    border-radius:11px!important;
    font-size:13px!important;
}

#customPopup .summary-confirm{
    padding:12px!important;
    margin:6px 0 0!important;
    border-radius:15px!important;
}

#customPopup .summary-title{
    font-size:17px!important;
    margin-bottom:8px!important;
    line-height:1.25!important;
}

#customPopup .summary-total{
    font-size:13.2px!important;
    margin-bottom:8px!important;
}

#customPopup .summary-row{
    padding:6px 0!important;
    font-size:12.8px!important;
    gap:9px!important;
}

#customPopup .summary-list{
    max-height:160px!important;
    gap:6px!important;
}

#customPopup .summary-card{
    padding:8px 9px!important;
    border-radius:11px!important;
    font-size:12px!important;
    line-height:1.28!important;
}

#customPopup .summary-card-title{
    margin-bottom:3px!important;
    font-size:12.3px!important;
}

#customPopup .summary-card-name{
    color:#0f172a!important;
    font-size:13px!important;
    font-weight:900!important;
    line-height:1.25!important;
    margin-bottom:5px!important;
    word-break:break-word!important;
}

#customPopup .summary-card-meta{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:5px!important;
    margin-bottom:5px!important;
}

#customPopup .summary-mini-chip{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:3px 7px!important;
    border-radius:999px!important;
    background:#eef4ff!important;
    color:#1e40af!important;
    font-size:11px!important;
    font-weight:900!important;
    line-height:1.1!important;
    border:1px solid #dbeafe!important;
}

#customPopup .summary-card-sub{
    color:#64748b!important;
    font-size:11.2px!important;
    font-weight:800!important;
    line-height:1.25!important;
}

#customPopup .summary-note{
    margin-top:10px!important;
    padding:8px 9px!important;
    border-radius:10px!important;
    font-size:12px!important;
    line-height:1.4!important;
}

#customPopup .payment-box{
    margin-top:10px!important;
    padding:9px!important;
    border-radius:13px!important;
}

#customPopup .payment-title{
    font-size:12.7px!important;
    margin-bottom:8px!important;
    gap:6px!important;
}

#customPopup .payment-title i{
    font-size:12.7px!important;
}

#customPopup .payment-choice{
    gap:7px!important;
}

#customPopup .payment-choice label{
    min-height:48px!important;
    padding:8px 30px 8px 8px!important;
    border-radius:11px!important;
    gap:8px!important;
}

#customPopup .payment-icon{
    width:27px!important;
    height:27px!important;
    min-width:27px!important;
    border-radius:9px!important;
    font-size:12.5px!important;
}

#customPopup .payment-text b{
    font-size:12px!important;
    line-height:1.2!important;
}

#customPopup .payment-text small{
    margin-top:2px!important;
    font-size:9.8px!important;
    line-height:1.2!important;
}

#customPopup .payment-choice label:has(input:checked)::after{
    right:8px!important;
    width:18px!important;
    height:18px!important;
    font-size:11px!important;
}

#customPopup .payment-error{
    margin-top:7px!important;
    padding:6px 7px!important;
    border-radius:9px!important;
    font-size:10.5px!important;
    line-height:1.3!important;
}

@media(max-width:390px){
    #customPopup .popup-box{
        max-width:318px!important;
        padding:16px!important;
        border-radius:17px!important;
    }

    #customPopup .summary-title{
        font-size:16px!important;
    }

    #customPopup .summary-list{
        max-height:150px!important;
    }

    #customPopup .summary-card{
        font-size:11.8px!important;
        padding:7px 8px!important;
    }

    #customPopup .summary-note{
        font-size:11.5px!important;
    }

    #customPopup .payment-choice label{
        min-height:45px!important;
    }
}

#customPopup .popup-box{
    padding:18px 16px 14px !important;
}

#customPopup .popup-icon{
    width:48px !important;
    height:48px !important;
    min-width:48px !important;
    min-height:48px !important;
    font-size:26px !important;
    margin:0 auto 8px !important;
    border-radius:12px !important;
}

#customPopup .popup-icon i{
    font-size:24px !important;
}

#customPopup .popup-message{
    margin-top:0 !important;
}

#customPopup .rekening-box{
    padding:12px !important;
    margin-top:4px !important;
}

#customPopup .rekening-title{
    font-size:15px !important;
    margin-bottom:8px !important;
}

#customPopup .rekening-total{
    font-size:22px !important;
    margin:2px 0 3px !important;
}

#customPopup .rekening-subtitle{
    margin-bottom:8px !important;
}

#customPopup .rekening-detail-list{
    max-height:220px !important;
    margin:8px 0 10px !important;
}

#customPopup .popup-buttons{
    gap:10px !important;
}

#customPopup .popup-buttons button{
    min-width:86px !important;
}

@media(max-width:768px){
    #customPopup .popup-box{
        padding:16px 14px 12px !important;
    }

    #customPopup .popup-icon{
        width:42px !important;
        height:42px !important;
        min-width:42px !important;
        min-height:42px !important;
        font-size:22px !important;
        margin-bottom:6px !important;
    }

    #customPopup .popup-icon i{
        font-size:21px !important;
    }

    #customPopup .rekening-detail-list{
        max-height:240px !important;
    }

    #customPopup .popup-buttons button{
        min-width:78px !important;
    }
}

#customPopup .popup-box{
    padding-top:12px!important;
}

#customPopup .popup-icon{
    width:32px!important;
    height:32px!important;
    min-width:32px!important;
    min-height:32px!important;
    margin:0 auto 0!important;
    padding:0!important;
    line-height:1!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
}

#customPopup .popup-icon i{
    font-size:20px!important;
    line-height:1!important;
}

#customPopup .success-check{
    width:34px!important;
    height:34px!important;
    font-size:22px!important;
    margin:0 auto 2px!important;
}

#customPopup .loading-spinner{
    width:32px!important;
    height:32px!important;
    margin:0 auto 3px!important;
}

#customPopup .popup-message{
    margin-top:-6px!important;
    margin-bottom:12px!important;
}

#customPopup .summary-confirm{
    margin-top:-4px!important;
}

#customPopup .rekening-box{
    margin-top:-4px!important;
    padding-top:10px!important;
}

#customPopup .summary-list{
    max-height:190px!important;
}

#customPopup .rekening-detail-list{
    max-height:270px!important;
}

@media(max-width:768px){
    #customPopup .popup-box{
        padding-top:10px!important;
    }

    #customPopup .popup-icon{
        width:28px!important;
        height:28px!important;
        min-width:28px!important;
        min-height:28px!important;
        margin-bottom:0!important;
    }

    #customPopup .popup-icon i{
        font-size:18px!important;
    }

    #customPopup .popup-message{
        margin-top:-7px!important;
    }

    #customPopup .summary-confirm,
    #customPopup .rekening-box{
        margin-top:-5px!important;
    }

    #customPopup .summary-list{
        max-height:200px!important;
    }

    #customPopup .rekening-detail-list{
        max-height:285px!important;
    }
}

#customPopup .popup-icon{
    margin:0 auto 12px!important;
}

#customPopup .popup-message{
    margin-top:0!important;
}

#customPopup .summary-confirm,
#customPopup .rekening-box{
    margin-top:0!important;
}

@media(max-width:768px){
    #customPopup .popup-icon{
        margin:0 auto 10px!important;
    }
}

.wa-header-btn.wa-help-slide{
    overflow:hidden!important;
    white-space:nowrap!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:8px!important;
    padding:0!important;
    width:46px!important;
    min-width:46px!important;
    height:46px!important;
    border-radius:999px!important;
    transform-origin:right center!important;
    will-change:width, transform, box-shadow!important;
}

.wa-header-btn.wa-help-slide i{
    width:46px!important;
    min-width:46px!important;
    height:46px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    margin:0!important;
    line-height:1!important;
    font-size:27px!important;
}

.wa-header-btn.wa-help-slide .wa-help-text{
    display:inline-block!important;
    max-width:0!important;
    opacity:0!important;
    overflow:hidden!important;
    color:#ffffff!important;
    font-size:13px!important;
    font-weight:900!important;
    line-height:1!important;
    transform:translateX(-8px)!important;
    animation:waHelpTextMuncul 5.4s ease-in-out infinite!important;
}

.wa-header-btn.wa-help-slide:not(.wa-notice){
    animation:waHelpGeserKiri 5.4s ease-in-out infinite!important;
}

@keyframes waHelpGeserKiri{
    0%, 18%, 100%{
        width:46px;
        transform:translateX(0) scale(1);
        padding:0;
        box-shadow:0 6px 14px rgba(37,211,102,.18);
    }

    30%, 70%{
        width:168px;
        transform:translateX(-118px) scale(1.02);
        padding:0 13px 0 0;
        box-shadow:0 10px 22px rgba(37,211,102,.30);
    }

    84%{
        width:46px;
        transform:translateX(0) scale(1);
        padding:0;
        box-shadow:0 6px 14px rgba(37,211,102,.18);
    }
}

@keyframes waHelpTextMuncul{
    0%, 23%, 82%, 100%{
        max-width:0;
        opacity:0;
        transform:translateX(-8px);
    }

    34%, 70%{
        max-width:112px;
        opacity:1;
        transform:translateX(0);
    }
}

@media(max-width:768px){
    .wa-header-btn.wa-help-slide{
        width:42px!important;
        min-width:42px!important;
        height:42px!important;
    }

    .wa-header-btn.wa-help-slide i{
        width:42px!important;
        min-width:42px!important;
        height:42px!important;
        font-size:25px!important;
    }

    .wa-header-btn.wa-help-slide .wa-help-text{
        font-size:12px!important;
    }

    @keyframes waHelpGeserKiri{
        0%, 18%, 100%{
            width:42px;
            transform:translateX(0) scale(1);
            padding:0;
        }

        30%, 70%{
            width:153px;
            transform:translateX(-108px) scale(1.02);
            padding:0 12px 0 0;
        }

        84%{
            width:42px;
            transform:translateX(0) scale(1);
            padding:0;
        }
    }
}

@media(max-width:390px){
    .wa-header-btn.wa-help-slide{
        width:39px!important;
        min-width:39px!important;
        height:39px!important;
    }

    .wa-header-btn.wa-help-slide i{
        width:39px!important;
        min-width:39px!important;
        height:39px!important;
        font-size:23px!important;
    }

    .wa-header-btn.wa-help-slide .wa-help-text{
        font-size:11px!important;
    }

    @keyframes waHelpGeserKiri{
        0%, 18%, 100%{
            width:39px;
            transform:translateX(0) scale(1);
            padding:0;
        }

        30%, 70%{
            width:140px;
            transform:translateX(-99px) scale(1.02);
            padding:0 10px 0 0;
        }

        84%{
            width:39px;
            transform:translateX(0) scale(1);
            padding:0;
        }
    }
}

@media(prefers-reduced-motion:reduce){
    .wa-header-btn.wa-help-slide:not(.wa-notice),
    .wa-header-btn.wa-help-slide .wa-help-text{
        animation:none!important;
    }
}

.wa-header-btn.wa-help-slide{
    position:absolute!important;
    top:18px!important;
    right:18px!important;
    width:168px!important;
    height:46px!important;
    min-width:168px!important;
    padding:0!important;
    border:none!important;
    border-radius:999px!important;
    background:transparent!important;
    box-shadow:none!important;
    overflow:visible!important;
    display:block!important;
    z-index:8!important;
    animation:none!important;
    transform:none!important;
}

.wa-header-btn.wa-help-slide:not(.wa-notice){
    animation:none!important;
}

.wa-header-btn.wa-help-slide::after{
    display:none!important;
    content:none!important;
    animation:none!important;
}

.wa-header-btn.wa-help-slide .wa-help-text{
    position:absolute!important;
    top:0!important;
    right:0!important;
    width:168px!important;
    max-width:168px!important;
    height:46px!important;
    border-radius:999px!important;
    background:#25D366!important;
    color:#ffffff!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    padding:0 14px 0 52px!important;
    font-size:13px!important;
    font-weight:900!important;
    line-height:1!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    opacity:0!important;
    transform:scaleX(.28)!important;
    transform-origin:right center!important;
    box-shadow:0 6px 14px rgba(37,211,102,.18)!important;
    animation:waHelpPillMunculFinal 5.2s ease-in-out infinite!important;
    pointer-events:none!important;
}

.wa-header-btn.wa-help-slide i{
    position:absolute!important;
    top:0!important;
    right:0!important;
    z-index:2!important;
    width:46px!important;
    min-width:46px!important;
    height:46px!important;
    border-radius:50%!important;
    background:#25D366!important;
    color:#ffffff!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    font-size:27px!important;
    line-height:1!important;
    margin:0!important;
    box-shadow:0 6px 14px rgba(37,211,102,.22)!important;
    animation:waHelpIconGeserFinal 5.2s ease-in-out infinite!important;
    will-change:transform!important;
}

@keyframes waHelpIconGeserFinal{
    0%,18%,100%{
        transform:translateX(0) scale(1);
    }
    30%,70%{
        transform:translateX(-118px) scale(1.02);
    }
    84%{
        transform:translateX(0) scale(1);
    }
}

@keyframes waHelpPillMunculFinal{
    0%,20%,84%,100%{
        opacity:0;
        transform:scaleX(.28);
    }
    30%,70%{
        opacity:1;
        transform:scaleX(1);
    }
}

@media(max-width:768px){
    .wa-header-btn.wa-help-slide{
        top:10px!important;
        right:10px!important;
        width:153px!important;
        min-width:153px!important;
        height:42px!important;
    }

    .wa-header-btn.wa-help-slide .wa-help-text{
        width:153px!important;
        max-width:153px!important;
        height:42px!important;
        padding:0 12px 0 48px!important;
        font-size:12px!important;
    }

    .wa-header-btn.wa-help-slide i{
        width:42px!important;
        min-width:42px!important;
        height:42px!important;
        font-size:25px!important;
    }

    @keyframes waHelpIconGeserFinal{
        0%,18%,100%{
            transform:translateX(0) scale(1);
        }
        30%,70%{
            transform:translateX(-108px) scale(1.02);
        }
        84%{
            transform:translateX(0) scale(1);
        }
    }
}

@media(max-width:390px){
    .wa-header-btn.wa-help-slide{
        width:142px!important;
        min-width:142px!important;
        height:39px!important;
    }

    .wa-header-btn.wa-help-slide .wa-help-text{
        width:142px!important;
        max-width:142px!important;
        height:39px!important;
        padding:0 10px 0 44px!important;
        font-size:11px!important;
    }

    .wa-header-btn.wa-help-slide i{
        width:39px!important;
        min-width:39px!important;
        height:39px!important;
        font-size:23px!important;
    }

    @keyframes waHelpIconGeserFinal{
        0%,18%,100%{
            transform:translateX(0) scale(1);
        }
        30%,70%{
            transform:translateX(-100px) scale(1.02);
        }
        84%{
            transform:translateX(0) scale(1);
        }
    }
}

.title-box{
    overflow:visible!important;
}

.title-box::after{
    z-index:0!important;
    pointer-events:none!important;
}

.wa-header-btn.wa-help-slide{
    position:absolute!important;
    top:10px!important;
    right:10px!important;
    width:165px!important;
    min-width:165px!important;
    height:44px!important;
    padding:0!important;
    margin:0!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
    overflow:visible!important;
    display:block!important;
    z-index:50!important;
    transform:none!important;
    animation:none!important;
}

.wa-header-btn.wa-help-slide::after{
    display:none!important;
    content:none!important;
}

.wa-header-btn.wa-help-slide::before{
    content:""!important;
    position:absolute!important;
    top:0!important;
    right:0!important;
    width:165px!important;
    height:44px!important;
    border-radius:999px!important;
    background:#25D366!important;
    box-shadow:0 8px 18px rgba(37,211,102,.30)!important;
    opacity:0!important;
    transform:scaleX(.27)!important;
    transform-origin:right center!important;
    animation:waBantuanPill 5.2s ease-in-out infinite!important;
    z-index:1!important;
}

.wa-header-btn.wa-help-slide i{
    position:absolute!important;
    top:0!important;
    right:0!important;
    width:44px!important;
    min-width:44px!important;
    height:44px!important;
    border-radius:50%!important;
    background:#25D366!important;
    color:#ffffff!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    font-size:27px!important;
    line-height:1!important;
    margin:0!important;
    box-shadow:0 6px 14px rgba(37,211,102,.25)!important;
    z-index:3!important;
    animation:waBantuanIcon 5.2s ease-in-out infinite!important;
}

.wa-header-btn.wa-help-slide .wa-help-text{
    position:absolute!important;
    top:0!important;
    right:12px!important;
    height:44px!important;
    width:105px!important;
    max-width:105px!important;
    padding:0!important;
    margin:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    background:transparent!important;
    color:#ffffff!important;
    font-size:13px!important;
    font-weight:900!important;
    white-space:nowrap!important;
    overflow:visible!important;
    opacity:0!important;
    transform:translateX(8px)!important;
    z-index:4!important;
    text-shadow:0 1px 2px rgba(0,0,0,.15)!important;
    animation:waBantuanText 5.2s ease-in-out infinite!important;
    pointer-events:none!important;
}

@keyframes waBantuanIcon{
    0%,18%,84%,100%{transform:translateX(0) scale(1);}
    30%,70%{transform:translateX(-121px) scale(1.02);}
}

@keyframes waBantuanPill{
    0%,20%,84%,100%{opacity:0;transform:scaleX(.27);}
    30%,70%{opacity:1;transform:scaleX(1);}
}

@keyframes waBantuanText{
    0%,25%,78%,100%{opacity:0;transform:translateX(8px);}
    35%,68%{opacity:1;transform:translateX(0);}
}

@media(max-width:390px){
    .wa-header-btn.wa-help-slide{
        width:150px!important;
        min-width:150px!important;
        height:40px!important;
    }

    .wa-header-btn.wa-help-slide::before{
        width:150px!important;
        height:40px!important;
    }

    .wa-header-btn.wa-help-slide i{
        width:40px!important;
        min-width:40px!important;
        height:40px!important;
        font-size:24px!important;
    }

    .wa-header-btn.wa-help-slide .wa-help-text{
        height:40px!important;
        width:96px!important;
        max-width:96px!important;
        font-size:12px!important;
    }

    @keyframes waBantuanIcon{
        0%,18%,84%,100%{transform:translateX(0) scale(1);}
        30%,70%{transform:translateX(-110px) scale(1.02);}
    }
}

.title-box{
    overflow:visible!important;
}

.title-box::after{
    z-index:0!important;
    pointer-events:none!important;
}

.wa-header-btn.wa-help-slide,
.wa-header-btn.wa-help-slide.wa-notice{
    position:absolute!important;
    top:12px!important;
    right:12px!important;
    width:44px!important;
    min-width:44px!important;
    height:44px!important;
    min-height:44px!important;
    padding:0!important;
    margin:0!important;
    border:0!important;
    border-radius:999px!important;
    background:#25D366!important;
    color:#ffffff!important;
    box-shadow:0 8px 18px rgba(37,211,102,.32)!important;
    overflow:hidden!important;
    display:block!important;
    z-index:999!important;
    transform:none!important;
    animation:none!important;
    transition:width .55s cubic-bezier(.22,1,.36,1), box-shadow .35s ease!important;
}

.wa-header-btn.wa-help-slide::before,
.wa-header-btn.wa-help-slide::after{
    display:none!important;
    content:none!important;
}

.wa-header-btn.wa-help-slide i{
    position:absolute!important;
    top:0!important;
    right:0!important;
    width:44px!important;
    min-width:44px!important;
    height:44px!important;
    min-height:44px!important;
    border-radius:50%!important;
    background:#25D366!important;
    color:#ffffff!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    font-size:27px!important;
    line-height:1!important;
    margin:0!important;
    padding:0!important;
    z-index:3!important;
    box-shadow:none!important;
    transform:translateX(0)!important;
    transition:transform .55s cubic-bezier(.22,1,.36,1)!important;
    animation:none!important;
}

.wa-header-btn.wa-help-slide .wa-help-text{
    position:absolute!important;
    top:0!important;
    left:52px!important;
    right:12px!important;
    width:auto!important;
    max-width:none!important;
    height:44px!important;
    min-height:44px!important;
    padding:0!important;
    margin:0!important;
    border:0!important;
    background:transparent!important;
    color:#ffffff!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    font-size:13px!important;
    font-weight:900!important;
    line-height:44px!important;
    white-space:nowrap!important;
    overflow:visible!important;
    opacity:0!important;
    visibility:hidden!important;
    transform:translateX(-8px)!important;
    transition:opacity .28s ease .22s, visibility .28s ease .22s, transform .38s ease .18s!important;
    z-index:4!important;
    pointer-events:none!important;
    text-shadow:0 1px 2px rgba(0,0,0,.18)!important;
    animation:none!important;
}

.wa-header-btn.wa-help-slide.wa-help-open{
    width:174px!important;
    min-width:174px!important;
    box-shadow:0 10px 22px rgba(37,211,102,.38)!important;
}

.wa-header-btn.wa-help-slide.wa-help-open i{
    transform:translateX(-130px)!important;
}

.wa-header-btn.wa-help-slide.wa-help-open .wa-help-text{
    opacity:1!important;
    visibility:visible!important;
    transform:translateX(0)!important;
}

@media(max-width:390px){
    .wa-header-btn.wa-help-slide,
    .wa-header-btn.wa-help-slide.wa-notice{
        top:12px!important;
        right:10px!important;
        width:40px!important;
        min-width:40px!important;
        height:40px!important;
        min-height:40px!important;
    }

    .wa-header-btn.wa-help-slide i{
        width:40px!important;
        min-width:40px!important;
        height:40px!important;
        min-height:40px!important;
        font-size:24px!important;
    }

    .wa-header-btn.wa-help-slide .wa-help-text{
        left:49px!important;
        right:10px!important;
        height:40px!important;
        min-height:40px!important;
        line-height:40px!important;
        font-size:12px!important;
    }

    .wa-header-btn.wa-help-slide.wa-help-open{
        width:160px!important;
        min-width:160px!important;
    }

    .wa-header-btn.wa-help-slide.wa-help-open i{
        transform:translateX(-120px)!important;
    }
}

.wa-header-btn.wa-help-slide,
.wa-header-btn.wa-help-slide.wa-notice{
    transition:
        width 1.05s cubic-bezier(.16,1,.3,1),
        min-width 1.05s cubic-bezier(.16,1,.3,1),
        box-shadow .65s ease,
        background .65s ease!important;
    will-change:width!important;
}

.wa-header-btn.wa-help-slide i{
    transition:transform 1.05s cubic-bezier(.16,1,.3,1)!important;
    will-change:transform!important;
}

.wa-header-btn.wa-help-slide .wa-help-text{
    transition:
        opacity .72s ease .36s,
        visibility .72s ease .36s,
        transform .88s cubic-bezier(.16,1,.3,1) .28s!important;
    will-change:opacity,transform!important;
}

.wa-header-btn.wa-help-slide.wa-help-open{
    width:184px!important;
    min-width:184px!important;
}

.wa-header-btn.wa-help-slide.wa-help-open i{
    transform:translateX(-140px)!important;
}

.wa-header-btn.wa-help-slide.wa-help-open .wa-help-text{
    opacity:1!important;
    visibility:visible!important;
    transform:translateX(0)!important;
}

@media(max-width:390px){
    .wa-header-btn.wa-help-slide.wa-help-open{
        width:170px!important;
        min-width:170px!important;
    }

    .wa-header-btn.wa-help-slide.wa-help-open i{
        transform:translateX(-130px)!important;
    }
}

.wa-header-btn.wa-help-slide,
.wa-header-btn.wa-help-slide.wa-notice{
    overflow:hidden!important;
    transition:
        width 1.35s cubic-bezier(.16,1,.3,1),
        min-width 1.35s cubic-bezier(.16,1,.3,1),
        box-shadow .8s ease!important;
}

.wa-header-btn.wa-help-slide i{
    transition:transform 1.35s cubic-bezier(.16,1,.3,1)!important;
}

.wa-header-btn.wa-help-slide .wa-help-text{
    left:54px!important;
    right:14px!important;
    opacity:1!important;
    visibility:visible!important;
    transform:translateX(120px)!important;
    transition:transform 1.35s cubic-bezier(.16,1,.3,1)!important;
    white-space:nowrap!important;
    overflow:visible!important;
    color:#fff!important;
    text-shadow:0 1px 2px rgba(0,0,0,.18)!important;
}

.wa-header-btn.wa-help-slide.wa-help-open .wa-help-text{
    opacity:1!important;
    visibility:visible!important;
    transform:translateX(0)!important;
}

.wa-header-btn.wa-help-slide:not(.wa-help-open) .wa-help-text{
    opacity:1!important;
    visibility:visible!important;
    transform:translateX(120px)!important;
}

@media(max-width:390px){
    .wa-header-btn.wa-help-slide .wa-help-text{
        left:50px!important;
        right:10px!important;
        transform:translateX(112px)!important;
    }

    .wa-header-btn.wa-help-slide:not(.wa-help-open) .wa-help-text{
        transform:translateX(112px)!important;
    }

    .wa-header-btn.wa-help-slide.wa-help-open .wa-help-text{
        transform:translateX(0)!important;
    }
}

#customPopup .rekening-title-bank{
    margin-top:4px!important;
    margin-bottom:4px!important;
    font-size:15px!important;
    line-height:1.15!important;
}

#customPopup .rekening-row{
    padding:5px 0!important;
    gap:8px!important;
    font-size:13px!important;
    line-height:1.2!important;
}

#customPopup .rekening-row span,
#customPopup .rekening-row b{
    font-size:13px!important;
    line-height:1.2!important;
}

#customPopup .rekening-note{
    margin-top:8px!important;
    padding:7px 8px!important;
    border-radius:9px!important;
    font-size:12px!important;
    line-height:1.28!important;
}

#customPopup .rekening-box{
    padding-bottom:10px!important;
}

@media(max-width:480px){
    #customPopup .rekening-title-bank{
        margin-top:3px!important;
        margin-bottom:3px!important;
        font-size:14px!important;
    }

    #customPopup .rekening-row{
        padding:4px 0!important;
        gap:6px!important;
        font-size:12px!important;
    }

    #customPopup .rekening-row span,
    #customPopup .rekening-row b{
        font-size:12px!important;
        line-height:1.18!important;
    }

    #customPopup .rekening-row span{
        min-width:76px!important;
    }

    #customPopup .rekening-row b{
        max-width:170px!important;
    }

    #customPopup .rekening-note{
        margin-top:7px!important;
        padding:6px 8px!important;
        font-size:11.5px!important;
        line-height:1.25!important;
    }
}

@media(max-width:380px){
    #customPopup .rekening-row{
        padding:3px 0!important;
        font-size:11.5px!important;
    }

    #customPopup .rekening-row span,
    #customPopup .rekening-row b{
        font-size:11.5px!important;
    }

    #customPopup .rekening-note{
        font-size:11px!important;
        padding:6px 7px!important;
    }
}

@media(max-width:480px){
    .wa-header-btn.wa-help-slide,
    .wa-header-btn.wa-help-slide.wa-notice{
        top:10px!important;
        right:10px!important;
        width:38px!important;
        min-width:38px!important;
        height:38px!important;
        min-height:38px!important;
        transition:
            width 1.2s cubic-bezier(.16,1,.3,1),
            min-width 1.2s cubic-bezier(.16,1,.3,1),
            box-shadow .7s ease!important;
    }

    .wa-header-btn.wa-help-slide i{
        width:38px!important;
        min-width:38px!important;
        height:38px!important;
        min-height:38px!important;
        font-size:22px!important;
        transition:transform 1.2s cubic-bezier(.16,1,.3,1)!important;
    }

    .wa-header-btn.wa-help-slide .wa-help-text{
        left:45px!important;
        right:9px!important;
        height:38px!important;
        min-height:38px!important;
        line-height:38px!important;
        font-size:10.8px!important;
        transform:translateX(98px)!important;
        transition:transform 1.2s cubic-bezier(.16,1,.3,1)!important;
    }

    .wa-header-btn.wa-help-slide.wa-help-open{
        width:145px!important;
        min-width:145px!important;
    }

    .wa-header-btn.wa-help-slide.wa-help-open i{
        transform:translateX(-107px)!important;
    }

    .wa-header-btn.wa-help-slide.wa-help-open .wa-help-text{
        transform:translateX(0)!important;
    }

    .wa-header-btn.wa-help-slide:not(.wa-help-open) .wa-help-text{
        transform:translateX(98px)!important;
    }
}

@media(max-width:380px){
    .wa-header-btn.wa-help-slide,
    .wa-header-btn.wa-help-slide.wa-notice{
        width:36px!important;
        min-width:36px!important;
        height:36px!important;
        min-height:36px!important;
    }

    .wa-header-btn.wa-help-slide i{
        width:36px!important;
        min-width:36px!important;
        height:36px!important;
        min-height:36px!important;
        font-size:21px!important;
    }

    .wa-header-btn.wa-help-slide .wa-help-text{
        left:42px!important;
        right:8px!important;
        height:36px!important;
        min-height:36px!important;
        line-height:36px!important;
        font-size:10.2px!important;
        transform:translateX(90px)!important;
    }

    .wa-header-btn.wa-help-slide.wa-help-open{
        width:132px!important;
        min-width:132px!important;
    }

    .wa-header-btn.wa-help-slide.wa-help-open i{
        transform:translateX(-96px)!important;
    }

    .wa-header-btn.wa-help-slide:not(.wa-help-open) .wa-help-text{
        transform:translateX(90px)!important;
    }
}

#customPopup #popupIcon.popup-icon{
    width:auto!important;
    height:auto!important;
    min-width:0!important;
    min-height:0!important;
    max-width:none!important;
    max-height:none!important;
    padding:0!important;
    margin:0 auto 10px!important;
    border-radius:0!important;
    background:transparent!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    line-height:1!important;
    flex:none!important;
    aspect-ratio:auto!important;
}

#customPopup #popupIcon .loading-spinner{
    flex:0 0 42px!important;
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    min-height:42px!important;
    max-width:42px!important;
    max-height:42px!important;
    aspect-ratio:1 / 1!important;
    border-radius:50%!important;
    border:5px solid #e5e7eb!important;
    border-top-color:#1976D2!important;
    display:block!important;
    box-sizing:border-box!important;
    margin:0 auto 8px!important;
    padding:0!important;
    transform-origin:center center!important;
}

#customPopup #popupIcon .success-check{
    flex:0 0 52px!important;
    width:52px!important;
    height:52px!important;
    min-width:52px!important;
    min-height:52px!important;
    max-width:52px!important;
    max-height:52px!important;
    aspect-ratio:1 / 1!important;
    border-radius:50%!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    box-sizing:border-box!important;
    margin:0 auto 10px!important;
    padding:0!important;
    line-height:1!important;
    background:#4CAF50!important;
    color:#ffffff!important;
    font-size:32px!important;
    font-weight:900!important;
    transform:none!important;
}

#customPopup #popupIcon .success-check,
#customPopup #popupIcon .loading-spinner{
    align-self:center!important;
    justify-self:center!important;
    overflow:hidden!important;
}

@media(max-width:390px){
    #customPopup #popupIcon .loading-spinner{
        flex-basis:40px!important;
        width:40px!important;
        height:40px!important;
        min-width:40px!important;
        min-height:40px!important;
        max-width:40px!important;
        max-height:40px!important;
    }

    #customPopup #popupIcon .success-check{
        flex-basis:48px!important;
        width:48px!important;
        height:48px!important;
        min-width:48px!important;
        min-height:48px!important;
        max-width:48px!important;
        max-height:48px!important;
        font-size:30px!important;
    }
}

#customPopup .rekening-note-highlight{
    color:#dc2626!important;
    font-weight:900!important;
    white-space:nowrap!important;
}

#customPopup .rekening-box{
    padding:10px 10px 8px !important;
    border-radius:14px !important;
}

#customPopup .rekening-title{
    font-size:13px !important;
    margin-bottom:4px !important;
    line-height:1.15 !important;
}

#customPopup .rekening-total{
    font-size:19px !important;
    line-height:1.05 !important;
    margin:0 0 2px !important;
}

#customPopup .rekening-subtitle{
    font-size:10px !important;
    margin-bottom:6px !important;
    line-height:1.15 !important;
}

#customPopup .kode-unik-box{
    margin:4px 0 6px !important;
    padding:5px 6px !important;
    border-radius:8px !important;
}

#customPopup .kode-unik-label{
    gap:3px !important;
    font-size:9.5px !important;
    margin-bottom:2px !important;
}

#customPopup .kode-unik-label i{
    font-size:9px !important;
}

#customPopup .kode-unik-value{
    font-size:14px !important;
    padding:3px 8px !important;
    border-radius:7px !important;
    letter-spacing:.4px !important;
}

#customPopup .kode-unik-note{
    margin-top:3px !important;
    font-size:8.8px !important;
    line-height:1.2 !important;
}

@media(max-width:480px){
    #customPopup .rekening-box{
        padding:9px 9px 8px !important;
        border-radius:13px !important;
    }

    #customPopup .rekening-title{
        font-size:12px !important;
        margin-bottom:3px !important;
    }

    #customPopup .rekening-total{
        font-size:18px !important;
        margin:0 0 1px !important;
    }

    #customPopup .rekening-subtitle{
        font-size:9.5px !important;
        margin-bottom:5px !important;
    }

    #customPopup .kode-unik-box{
        margin:4px 0 5px !important;
        padding:5px !important;
        border-radius:8px !important;
    }

    #customPopup .kode-unik-label{
        font-size:9px !important;
    }

    #customPopup .kode-unik-value{
        font-size:13.5px !important;
        padding:3px 7px !important;
    }

    #customPopup .kode-unik-note{
        font-size:8.4px !important;
    }
}

#customPopup .rekening-detail-list{
    gap:5px !important;
    margin:6px 0 8px !important;
}

#customPopup .rekening-detail-card{
    padding:6px 7px !important;
    border-radius:10px !important;
    font-size:11px !important;
}

#customPopup .rekening-detail-title{
    font-size:11px !important;
    margin-bottom:2px !important;
    line-height:1.15 !important;
}

#customPopup .rekening-detail-name{
    font-size:11.5px !important;
    line-height:1.2 !important;
    margin-bottom:3px !important;
}

#customPopup .rekening-detail-line{
    gap:6px !important;
    font-size:11px !important;
    line-height:1.2 !important;
}

#customPopup .rekening-detail-small{
    margin-top:2px !important;
    font-size:10px !important;
    line-height:1.2 !important;
}

@media(max-width:480px){
    #customPopup .rekening-detail-list{
        gap:4px !important;
        margin:5px 0 7px !important;
    }

    #customPopup .rekening-detail-card{
        padding:5px 6px !important;
        border-radius:9px !important;
        font-size:10.5px !important;
    }

    #customPopup .rekening-detail-title{
        font-size:10.5px !important;
        margin-bottom:2px !important;
    }

    #customPopup .rekening-detail-name{
        font-size:11px !important;
        margin-bottom:2px !important;
    }

    #customPopup .rekening-detail-line{
        font-size:10.5px !important;
        gap:5px !important;
    }

    #customPopup .rekening-detail-small{
        font-size:9.6px !important;
    }
}

.loading-warning-text{
    margin-top:6px;
    color:#dc2626;
    font-size:12px;
    font-weight:900;
    line-height:1.35;
}
@media(max-width:480px){
    .loading-warning-text{
        font-size:11.5px;
    }
}

.bukti-tf-success-box{
    margin-top:12px;
    padding:10px;
    border-radius:12px;
    background:#f0fdf4;
    border:1.5px solid #bbf7d0;
    color:#166534;
    font-size:12px;
    font-weight:900;
    line-height:1.35;
}
.bukti-tf-success-btn{
    width:100%;
    margin-top:10px;
    border:none;
    border-radius:12px;
    padding:12px 14px;
    background:#25D366;
    color:#ffffff;
    font-size:13px;
    font-weight:900;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
}
.bukti-tf-success-btn:active{
    transform:scale(.98);
}
.bukti-tf-kode-info{
    margin-top:8px;
    padding:8px 9px;
    border-radius:10px;
    background:#fff7ed;
    border:1.4px solid #fed7aa;
    color:#9a3412;
    font-size:11.5px;
    font-weight:900;
    line-height:1.35;
}
.bukti-tf-kode-info b{
    color:#dc2626;
    font-size:13px;
    letter-spacing:.3px;
    white-space:nowrap;
}
@media(max-width:480px){
    .bukti-tf-success-box{
        font-size:11.5px;
        padding:9px;
    }
    .bukti-tf-success-btn{
        font-size:12.5px;
        padding:11px 12px;
    }
    .bukti-tf-kode-info{
        font-size:10.8px;
        padding:7px 8px;
    }
    .bukti-tf-kode-info b{
        font-size:12.3px;
    }
}

.rekening-row-copy{
    align-items:center;
}
.rekening-copy-wrap{
    display:inline-flex;
    align-items:center;
    justify-content:flex-end;
    gap:6px;
    flex-wrap:wrap;
}
.rekening-copy-number{
    color:#0f172a;
    font-weight:900;
    text-align:right;
}
.rekening-copy-btn{
    border:none;
    border-radius:8px;
    padding:5px 9px;
    background:#1976D2;
    color:#ffffff;
    font-size:11px;
    font-weight:900;
    cursor:pointer;
    line-height:1;
    box-shadow:0 4px 10px rgba(25,118,210,.16);
}
.rekening-copy-btn:active{
    transform:scale(.97);
}
.rekening-copy-info{
    min-height:12px;
    margin:-3px 0 4px;
    color:#16a34a;
    font-size:9px;
    font-weight:900;
    line-height:1.15;
    text-align:right;
}
@media(max-width:480px){
    .rekening-copy-wrap{
        gap:5px;
    }
    .rekening-copy-btn{
        font-size:10px;
        padding:4px 8px;
    }
    .rekening-copy-info{
        font-size:8.8px;
        text-align:right;
    }
}

#customPopup .rekening-row-copy{
    display:grid!important;
    grid-template-columns:88px 1fr!important;
    align-items:center!important;
    gap:8px!important;
}

#customPopup .rekening-row-copy > span{
    font-size:13px!important;
    font-weight:900!important;
}

#customPopup .rekening-copy-wrap{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:7px!important;
    flex-wrap:nowrap!important;
}

#customPopup .rekening-copy-number{
    font-size:14px!important;
    font-weight:900!important;
    letter-spacing:.3px!important;
    white-space:nowrap!important;
}

#customPopup .rekening-copy-btn{
    font-size:11.5px!important;
    padding:6px 10px!important;
    border-radius:8px!important;
    min-width:auto!important;
}

@media(max-width:390px){
    #customPopup .rekening-row-copy{
        grid-template-columns:82px 1fr!important;
        gap:6px!important;
    }

    #customPopup .rekening-row-copy > span{
        font-size:12.5px!important;
    }

    #customPopup .rekening-copy-number{
        font-size:13px!important;
    }

    #customPopup .rekening-copy-btn{
        font-size:10.5px!important;
        padding:5px 8px!important;
    }
}

#customPopup .rekening-row-copy{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:8px!important;
}

#customPopup .rekening-row-copy > span{
    flex:0 0 auto!important;
    min-width:76px!important;
    text-align:left!important;
    font-size:13px!important;
    font-weight:900!important;
}

#customPopup .rekening-copy-wrap{
    margin-left:auto!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:6px!important;
    flex-wrap:nowrap!important;
    text-align:right!important;
    max-width:100%!important;
}

#customPopup .rekening-copy-number{
    display:inline-block!important;
    color:#0f172a!important;
    font-size:13.5px!important;
    font-weight:900!important;
    letter-spacing:.15px!important;
    white-space:nowrap!important;
    text-align:right!important;
}

#customPopup .rekening-copy-btn{
    flex:0 0 auto!important;
    font-size:10.8px!important;
    padding:5px 8px!important;
    border-radius:8px!important;
    min-width:auto!important;
}

#customPopup .rekening-copy-info{
    text-align:right!important;
    font-size:9px!important;
    line-height:1.15!important;
    margin:-3px 0 4px!important;
    padding-left:78px!important;
}

@media(max-width:390px){
    #customPopup .rekening-row-copy{
        gap:5px!important;
    }

    #customPopup .rekening-row-copy > span{
        min-width:70px!important;
        font-size:12px!important;
    }

    #customPopup .rekening-copy-wrap{
        gap:5px!important;
    }

    #customPopup .rekening-copy-number{
        font-size:12.3px!important;
        letter-spacing:0!important;
    }

    #customPopup .rekening-copy-btn{
        font-size:9.8px!important;
        padding:4px 7px!important;
    }

    #customPopup .rekening-copy-info{
        font-size:8.6px!important;
        padding-left:72px!important;
    }
}

#customPopup .rekening-row{
    border-bottom:none!important;
}

#customPopup .rekening-row-copy{
    border-bottom:none!important;
}

#customPopup .rekening-copy-info{
    border-bottom:none!important;
}

button[onclick="simpan()"]{
    line-height:1.2!important;
}

.design-split-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    margin-bottom:7px;
}

.design-side-card{
    background:#f8fbff;
    border:1px solid #dbeafe;
    border-radius:12px;
    padding:9px;
}

.design-side-title{
    text-align:center;
    color:#14365f;
    font-size:12.5px;
    font-weight:900;
    margin:0 0 7px;
}

.design-side-image{
    width:100%;
    max-height:56vh;
    object-fit:contain;
    display:block;
    border-radius:10px;
    background:#ffffff;
}

.design-info-panel.ultra-compact-info{
    margin:7px 0 0!important;
    padding:7px 8px!important;
    border-radius:10px!important;
    background:#f8fbff!important;
    border:1px solid #dbeafe!important;
    text-align:center!important;
    color:#0f172a!important;
    line-height:1.25!important;
}

.design-ultra-line{
    font-size:10.8px!important;
    font-weight:900!important;
    color:#0f172a!important;
    margin:2px 0!important;
}

.design-ultra-line b{
    color:#14365f!important;
}

.design-ultra-note{
    margin-top:4px!important;
    padding-top:4px!important;
    border-top:1px dashed #dbeafe!important;
    color:#92400e!important;
    font-size:9.2px!important;
    font-weight:900!important;
    line-height:1.2!important;
}

.design-box{
    max-height:90vh!important;
    overflow:auto!important;
}

@media(max-width:640px){
    .design-split-grid{
        grid-template-columns:1fr;
        gap:9px;
    }

    .design-side-card{
        padding:7px;
    }

    .design-side-title{
        font-size:11.5px;
        margin-bottom:5px;
    }

    .design-side-image{
        max-height:34vh;
    }
}

@media(max-width:480px){
    button[onclick="simpan()"]{
        font-size:12.5px!important;
        padding-left:10px!important;
        padding-right:10px!important;
    }

    .design-info-panel.ultra-compact-info{
        margin-top:6px!important;
        padding:6px 7px!important;
        border-radius:9px!important;
    }

    .design-ultra-line{
        font-size:9.7px!important;
        line-height:1.22!important;
    }

    .design-ultra-note{
        font-size:8.4px!important;
        margin-top:3px!important;
        padding-top:3px!important;
    }
}

@media(max-width:640px){
    .design-box{
        width:100%!important;
        max-width:340px!important;
        max-height:86vh!important;
        padding:10px!important;
        border-radius:16px!important;
    }

    .design-split-grid{
        display:grid!important;
        grid-template-columns:1fr 1fr!important;
        gap:7px!important;
        margin-bottom:6px!important;
    }

    .design-side-card{
        padding:6px!important;
        border-radius:10px!important;
    }

    .design-side-title{
        font-size:10.2px!important;
        line-height:1.1!important;
        margin:0 0 5px!important;
    }

    .design-side-image{
        width:100%!important;
        max-height:30vh!important;
        object-fit:contain!important;
        border-radius:8px!important;
    }

    .design-info-panel.ultra-compact-info{
        margin-top:6px!important;
        padding:6px 7px!important;
        border-radius:9px!important;
    }

    .design-ultra-line{
        font-size:8.8px!important;
        line-height:1.2!important;
        margin:1px 0!important;
    }

    .design-ultra-note{
        font-size:7.8px!important;
        line-height:1.15!important;
        margin-top:3px!important;
        padding-top:3px!important;
    }
}

@media(max-width:380px){
    .design-box{
        max-width:318px!important;
        padding:9px!important;
    }

    .design-split-grid{
        gap:6px!important;
    }

    .design-side-card{
        padding:5px!important;
    }

    .design-side-title{
        font-size:9.5px!important;
    }

    .design-side-image{
        max-height:28vh!important;
    }

    .design-ultra-line{
        font-size:8.2px!important;
    }

    .design-ultra-note{
        font-size:7.3px!important;
    }
}

.design-overlay{
    padding:15px!important;
}

.design-box{
    position:relative!important;
    width:100%!important;
    max-width:900px!important;
    max-height:90vh!important;
    background:#ffffff!important;
    padding:15px!important;
    border-radius:18px!important;
    overflow:auto!important;
    -webkit-overflow-scrolling:touch!important;
    touch-action:auto!important;
}

.design-split-grid{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:12px!important;
    margin-bottom:8px!important;
}

.design-side-card{
    padding:10px!important;
    border-radius:12px!important;
}

.design-side-title{
    font-size:13px!important;
    line-height:1.2!important;
    margin:0 0 8px!important;
}

.design-side-image{
    width:100%!important;
    max-height:62vh!important;
    object-fit:contain!important;
    display:block!important;
    border-radius:10px!important;
    background:#ffffff!important;
}

@media(max-width:640px){
    .design-box{
        width:100%!important;
        max-width:900px!important;
        max-height:90vh!important;
        padding:15px!important;
        border-radius:18px!important;
    }

    .design-split-grid{
        grid-template-columns:1fr!important;
        gap:12px!important;
        margin-bottom:8px!important;
    }

    .design-side-card{
        padding:10px!important;
        border-radius:12px!important;
    }

    .design-side-title{
        font-size:13px!important;
        margin:0 0 8px!important;
    }

    .design-side-image{
        max-height:65vh!important;
    }

    .design-info-panel.ultra-compact-info{
        margin-top:8px!important;
        padding:8px 9px!important;
        border-radius:10px!important;
    }

    .design-ultra-line{
        font-size:10px!important;
        line-height:1.25!important;
    }

    .design-ultra-note{
        font-size:8.8px!important;
        line-height:1.2!important;
    }
}

#desainBajuPopup{
    padding:12px!important;
    align-items:center!important;
}

#desainBajuPopup .design-box{
    width:100%!important;
    max-width:900px!important;
    max-height:94vh!important;
    padding:12px!important;
    border-radius:18px!important;
    overflow:auto!important;
    background:#ffffff!important;
}

#desainBajuPopup .design-split-grid{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:8px!important;
    margin-bottom:10px!important;
}

#desainBajuPopup .design-side-card{
    padding:6px!important;
    border-radius:13px!important;
    background:linear-gradient(180deg,#f8fbff,#ffffff)!important;
    border:1.5px solid #dbeafe!important;
}

#desainBajuPopup .design-side-title{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    min-height:24px!important;
    margin:0 0 6px!important;
    padding:4px 8px!important;
    border-radius:999px!important;
    background:linear-gradient(135deg,#1976D2,#0D6EFD)!important;
    color:#ffffff!important;
    font-size:12.5px!important;
    font-weight:900!important;
    line-height:1.1!important;
    text-align:center!important;
}

#desainBajuPopup .design-side-image{
    width:100%!important;
    max-height:62vh!important;
    object-fit:contain!important;
    display:block!important;
    border-radius:10px!important;
    background:#ffffff!important;
}

#desainBajuPopup .design-info-panel.ultra-compact-info{
    margin-top:8px!important;
    padding:10px 11px!important;
    border-radius:13px!important;
    background:linear-gradient(135deg,#f8fbff,#eef6ff)!important;
    border:1.5px solid #bfdbfe!important;
    box-shadow:0 6px 14px rgba(25,118,210,.08)!important;
    text-align:center!important;
}

#desainBajuPopup .design-ultra-line{
    font-size:12.2px!important;
    line-height:1.35!important;
    font-weight:900!important;
    color:#0f172a!important;
    margin:3px 0!important;
}

#desainBajuPopup .design-ultra-line b{
    color:#1976D2!important;
}

#desainBajuPopup .design-ultra-note{
    margin-top:7px!important;
    padding-top:7px!important;
    border-top:1px dashed #93c5fd!important;
    color:#92400e!important;
    font-size:10.8px!important;
    line-height:1.25!important;
    font-weight:900!important;
}

@media(max-width:640px){
    #desainBajuPopup{
        padding:8px!important;
    }

    #desainBajuPopup .design-box{
        max-width:900px!important;
        max-height:95vh!important;
        padding:8px!important;
        border-radius:16px!important;
    }

    #desainBajuPopup .design-split-grid{
        grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
        gap:5px!important;
        margin-bottom:7px!important;
    }

    #desainBajuPopup .design-side-card{
        padding:4px!important;
        border-radius:10px!important;
    }

    #desainBajuPopup .design-side-title{
        min-height:20px!important;
        margin-bottom:4px!important;
        padding:3px 5px!important;
        font-size:9.8px!important;
        border-radius:999px!important;
    }

    #desainBajuPopup .design-side-image{
        max-height:54vh!important;
        border-radius:8px!important;
    }

    #desainBajuPopup .design-info-panel.ultra-compact-info{
        margin-top:6px!important;
        padding:8px 8px!important;
        border-radius:11px!important;
    }

    #desainBajuPopup .design-ultra-line{
        font-size:10.2px!important;
        line-height:1.28!important;
        margin:2px 0!important;
    }

    #desainBajuPopup .design-ultra-note{
        font-size:9.2px!important;
        line-height:1.2!important;
        margin-top:5px!important;
        padding-top:5px!important;
    }
}

@media(max-width:380px){
    #desainBajuPopup{
        padding:6px!important;
    }

    #desainBajuPopup .design-box{
        padding:7px!important;
    }

    #desainBajuPopup .design-split-grid{
        gap:4px!important;
    }

    #desainBajuPopup .design-side-card{
        padding:3px!important;
    }

    #desainBajuPopup .design-side-title{
        font-size:8.8px!important;
        min-height:18px!important;
        padding:3px 4px!important;
    }

    #desainBajuPopup .design-side-image{
        max-height:52vh!important;
    }

    #desainBajuPopup .design-ultra-line{
        font-size:9.4px!important;
    }

    #desainBajuPopup .design-ultra-note{
        font-size:8.5px!important;
    }
}

.note-box{
    position:relative!important;
    background:linear-gradient(135deg,#fffdf8,#fffaf1)!important;
    border:1.5px solid #f5b942!important;
    color:#111827!important;
    padding:22px 20px 24px!important;
    border-radius:18px!important;
    font-size:16px!important;
    font-weight:500!important;
    text-align:left!important;
    margin:18px 0!important;
    line-height:1.78!important;
    box-shadow:0 8px 22px rgba(15,23,42,.06)!important;
    animation:none!important;
}

.note-box::before{
    content:"⚠️  PENTING  ⚠️"!important;
    display:block!important;
    text-align:center!important;
    color:#ff4b16!important;
    font-size:22px!important;
    font-weight:900!important;
    margin-bottom:10px!important;
    letter-spacing:.2px!important;
}

.note-highlight{
    color:#ff1515!important;
    font-weight:900!important;
}

.countdown-box{
    width:100%!important;
    background:#ffffff!important;
    border:1.5px solid #e3e8f0!important;
    color:#101828!important;
    border-radius:18px!important;
    padding:20px 18px 22px!important;
    margin:18px 0 24px!important;
    box-shadow:0 10px 28px rgba(15,23,42,.05)!important;
    animation:none!important;
}

.countdown-row{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    gap:14px!important;
}

.countdown-title{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:10px!important;
    color:#11183a!important;
    font-size:18px!important;
    font-weight:800!important;
    text-transform:none!important;
    text-align:center!important;
    white-space:nowrap!important;
}

.countdown-title::before{
    display:none!important;
    content:none!important;
}

.countdown-title i{
    color:#0d6efd!important;
    font-size:20px!important;
}

.countdown-wrapper{
    width:100%!important;
    display:grid!important;
    grid-template-columns:repeat(4,1fr)!important;
    gap:0!important;
}

.count-item{
    position:relative!important;
    min-width:0!important;
    padding:10px 6px!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
}

.count-item:not(:last-child)::after{
    content:""!important;
    position:absolute!important;
    right:0!important;
    top:18%!important;
    width:1px!important;
    height:64%!important;
    background:#d9dee8!important;
}

.count-number{
    color:#0d6efd!important;
    font-size:31px!important;
    font-weight:900!important;
    line-height:1!important;
    width:100%!important;
    text-align:center!important;
}

.count-label{
    color:#1b2145!important;
    font-size:13px!important;
    margin-top:8px!important;
    text-transform:none!important;
    width:100%!important;
    text-align:center!important;
    font-weight:500!important;
}

.countdown-end-date{
    color:#8c91a8!important;
    font-size:15px!important;
    font-weight:800!important;
    margin-top:0!important;
    text-align:center!important;
}

@media(max-width:768px){
    .note-box{
        font-size:14.5px!important;
        padding:18px 16px!important;
        border-radius:16px!important;
        margin:14px 0!important;
        line-height:1.65!important;
    }

    .note-box::before{
        font-size:20px!important;
        margin-bottom:8px!important;
    }

    .countdown-box{
        padding:18px 12px!important;
        border-radius:16px!important;
        margin:14px 0 20px!important;
    }

    .countdown-row{
        gap:12px!important;
    }

    .countdown-title{
        font-size:16px!important;
        gap:8px!important;
    }

    .countdown-title i{
        font-size:18px!important;
    }

    .count-item{
        padding:9px 4px!important;
    }

    .count-number{
        font-size:26px!important;
    }

    .count-label{
        font-size:12px!important;
        margin-top:7px!important;
    }

    .countdown-end-date{
        font-size:13px!important;
    }
}

@media(max-width:390px){
    .note-box{
        font-size:13px!important;
        padding:16px 14px!important;
        line-height:1.6!important;
    }

    .note-box::before{
        font-size:18px!important;
    }

    .countdown-box{
        padding:16px 10px!important;
    }

    .countdown-title{
        font-size:15px!important;
    }

    .count-number{
        font-size:23px!important;
    }

    .count-label{
        font-size:11px!important;
    }

    .countdown-end-date{
        font-size:12px!important;
    }
}

.note-box{
    padding:16px 15px!important;
    margin:12px 0!important;
    border-radius:14px!important;
    font-size:13.5px!important;
    line-height:1.55!important;
    border-width:1.2px!important;
    box-shadow:0 5px 14px rgba(15,23,42,.045)!important;
}

.note-box::before{
    font-size:17px!important;
    margin-bottom:6px!important;
    line-height:1.15!important;
}

.countdown-box{
    padding:11px 10px 12px!important;
    margin:10px 0 14px!important;
    border-radius:13px!important;
    border-width:1.2px!important;
    box-shadow:0 5px 14px rgba(15,23,42,.04)!important;
}

.countdown-row{
    gap:7px!important;
}

.countdown-title{
    font-size:12.5px!important;
    gap:5px!important;
    line-height:1.1!important;
}

.countdown-title i{
    font-size:14px!important;
}

.countdown-wrapper{
    gap:0!important;
}

.count-item{
    padding:5px 2px!important;
}

.count-item:not(:last-child)::after{
    top:20%!important;
    height:58%!important;
}

.count-number{
    font-size:20px!important;
    line-height:.95!important;
}

.count-label{
    font-size:9px!important;
    margin-top:4px!important;
    line-height:1!important;
}

.countdown-end-date{
    font-size:10.5px!important;
    line-height:1.1!important;
}

@media(max-width:768px){
    .note-box{
        padding:13px 12px!important;
        margin:10px 0!important;
        border-radius:13px!important;
        font-size:12.2px!important;
        line-height:1.48!important;
    }

    .note-box::before{
        font-size:15.5px!important;
        margin-bottom:5px!important;
    }

    .countdown-box{
        padding:8px 8px 9px!important;
        margin:8px 0 11px!important;
        border-radius:11px!important;
    }

    .countdown-row{
        gap:5px!important;
    }

    .countdown-title{
        font-size:10.5px!important;
        gap:4px!important;
    }

    .countdown-title i{
        font-size:12px!important;
    }

    .count-item{
        padding:4px 2px!important;
    }

    .count-number{
        font-size:16px!important;
    }

    .count-label{
        font-size:7.2px!important;
        margin-top:2px!important;
    }

    .countdown-end-date{
        font-size:8.8px!important;
    }
}

@media(max-width:390px){
    .note-box{
        padding:11px 10px!important;
        margin:8px 0!important;
        border-radius:12px!important;
        font-size:11.2px!important;
        line-height:1.43!important;
    }

    .note-box::before{
        font-size:14px!important;
        margin-bottom:4px!important;
    }

    .countdown-box{
        padding:7px 7px 8px!important;
        margin:7px 0 10px!important;
        border-radius:10px!important;
    }

    .countdown-title{
        font-size:9.5px!important;
    }

    .countdown-title i{
        font-size:10.5px!important;
    }

    .count-item{
        padding:3px 1px!important;
    }

    .count-number{
        font-size:14px!important;
    }

    .count-label{
        font-size:6.6px!important;
        margin-top:2px!important;
    }

    .countdown-end-date{
        font-size:8px!important;
    }
}

.data-pemesan-card{
    width:100%!important;
    background:#ffffff!important;
    border:1.2px solid #e5eaf2!important;
    border-radius:13px!important;
    padding:11px 10px!important;
    margin:9px 0 12px!important;
    box-shadow:0 5px 14px rgba(15,23,42,.035)!important;
}

.data-pemesan-title{
    margin:0 0 8px!important;
    padding:0!important;
    display:flex!important;
    align-items:center!important;
    gap:7px!important;
    color:#10183a!important;
    font-size:12.5px!important;
    line-height:1.1!important;
    font-weight:900!important;
    text-transform:uppercase!important;
}

.data-pemesan-title i{
    color:#0d6efd!important;
    font-size:14px!important;
    width:15px!important;
    text-align:center!important;
}

.data-pemesan-card .pemesan-field{
    margin:0 0 7px!important;
    position:relative!important;
}

.data-pemesan-card .pemesan-field:last-child{
    margin-bottom:0!important;
}

.data-pemesan-card .pemesan-field i{
    left:12px!important;
    font-size:12.5px!important;
    color:#838aa3!important;
}

.data-pemesan-card .pemesan-field input{
    margin:0!important;
    width:100%!important;
    padding:10px 10px 10px 34px!important;
    min-height:37px!important;
    border-radius:10px!important;
    border:1.2px solid #e1e7ef!important;
    background:#ffffff!important;
    font-size:12.5px!important;
    line-height:1.1!important;
    box-shadow:none!important;
}

.data-pemesan-card .pemesan-field input::placeholder{
    color:#8f96ad!important;
}

.data-pemesan-card .pemesan-field input:focus{
    border-color:#0d6efd!important;
    box-shadow:0 0 0 3px rgba(13,110,253,.09)!important;
}

@media(max-width:768px){
    .data-pemesan-card{
        padding:10px 9px!important;
        margin:8px 0 11px!important;
        border-radius:12px!important;
    }

    .data-pemesan-title{
        margin-bottom:7px!important;
        font-size:12px!important;
        gap:6px!important;
    }

    .data-pemesan-title i{
        font-size:13px!important;
        width:14px!important;
    }

    .data-pemesan-card .pemesan-field{
        margin-bottom:6px!important;
    }

    .data-pemesan-card .pemesan-field i{
        left:11px!important;
        font-size:12px!important;
    }

    .data-pemesan-card .pemesan-field input{
        min-height:34px!important;
        padding:9px 9px 9px 32px!important;
        border-radius:9px!important;
        font-size:12px!important;
    }
}

@media(max-width:390px){
    .data-pemesan-card{
        padding:9px 8px!important;
        margin:7px 0 10px!important;
        border-radius:11px!important;
    }

    .data-pemesan-title{
        font-size:11.3px!important;
        margin-bottom:6px!important;
    }

    .data-pemesan-title i{
        font-size:12px!important;
    }

    .data-pemesan-card .pemesan-field{
        margin-bottom:5px!important;
    }

    .data-pemesan-card .pemesan-field i{
        left:10px!important;
        font-size:11.5px!important;
    }

    .data-pemesan-card .pemesan-field input{
        min-height:32px!important;
        padding:8px 8px 8px 30px!important;
        border-radius:8px!important;
        font-size:11.5px!important;
    }
}

.size-card.compact-ui-card{
    background:#ffffff!important;
    border:1px solid #e6ebf2!important;
    border-radius:16px!important;
    padding:14px 14px 16px!important;
    margin:14px 0!important;
    box-shadow:0 4px 14px rgba(15,23,42,.035)!important;
}

.size-card-header{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:12px!important;
    margin:0 0 12px!important;
}

.size-card-title{
    margin:0!important;
    min-width:max-content!important;
    font-size:18px!important;
    line-height:1!important;
    text-transform:uppercase!important;
    color:#0b123d!important;
}

.size-card-title i{
    color:#0D6EFD!important;
}

.size-actions{
    flex:1!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:10px!important;
    min-width:0!important;
}

.size-card .size-chart-btn,
.size-card .design-btn{
    width:auto!important;
    min-width:0!important;
    min-height:42px!important;
    height:42px!important;
    padding:0 15px!important;
    border-radius:11px!important;
    font-size:14px!important;
    line-height:1!important;
    white-space:nowrap!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:7px!important;
    margin:0!important;
}

.size-card .size-options{
    width:100%!important;
    display:grid!important;
    grid-template-columns:repeat(8, minmax(0, 1fr))!important;
    gap:10px!important;
    margin:0!important;
}

.size-card .size-options label{
    min-width:0!important;
    width:100%!important;
    min-height:48px!important;
    height:48px!important;
    padding:0 6px!important;
    border-radius:10px!important;
    font-size:15px!important;
    font-weight:800!important;
    box-shadow:none!important;
}

.size-card #sizeLainnya{
    margin:10px 0 0!important;
}

@media(max-width:768px){
    .size-card.compact-ui-card{
        border-radius:13px!important;
        padding:10px!important;
        margin:10px 0!important;
    }

    .size-card-header{
        gap:7px!important;
        margin-bottom:9px!important;
    }

    .size-card-title{
        font-size:13px!important;
        gap:5px!important;
    }

    .size-card-title i{
        font-size:14px!important;
    }

    .size-actions{
        gap:6px!important;
    }

    .size-card .size-chart-btn,
    .size-card .design-btn{
        height:32px!important;
        min-height:32px!important;
        padding:0 9px!important;
        font-size:10.2px!important;
        border-radius:8px!important;
        gap:4px!important;
    }

    .size-card .size-chart-btn i{
        font-size:11px!important;
        width:11px!important;
        height:11px!important;
        line-height:11px!important;
    }

    .size-card .design-icon-wrap,
    .size-card .design-shirt-svg{
        width:12px!important;
        height:12px!important;
        min-width:12px!important;
        max-width:12px!important;
        max-height:12px!important;
    }

    .size-card .size-options{
        grid-template-columns:repeat(8, minmax(0, 1fr))!important;
        gap:6px!important;
    }

    .size-card .size-options label{
        min-height:35px!important;
        height:35px!important;
        padding:0 3px!important;
        border-radius:8px!important;
        font-size:11.4px!important;
        border-width:1.3px!important;
    }

    .size-card #sizeLainnya{
        margin-top:8px!important;
    }
}

@media(max-width:480px){
    .size-card-header{
        gap:6px!important;
    }

    .size-card-title{
        font-size:12px!important;
    }

    .size-actions{
        gap:5px!important;
    }

    .size-card .size-chart-btn,
    .size-card .design-btn{
        height:30px!important;
        min-height:30px!important;
        padding:0 7px!important;
        font-size:9px!important;
        border-radius:8px!important;
    }

    .size-card .size-options{
        grid-template-columns:repeat(4, minmax(0, 1fr))!important;
        gap:7px!important;
    }

    .size-card .size-options label{
        height:32px!important;
        min-height:32px!important;
        font-size:11px!important;
    }
}

@media(max-width:380px){
    .size-card.compact-ui-card{
        padding:9px!important;
    }

    .size-card-title{
        font-size:11.3px!important;
    }

    .size-card .size-chart-btn,
    .size-card .design-btn{
        height:28px!important;
        min-height:28px!important;
        padding:0 6px!important;
        font-size:8.2px!important;
        gap:3px!important;
    }

    .size-card .size-options{
        gap:6px!important;
    }
}

.lengan-umur-row{
    width:100%!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:12px!important;
    margin:12px 0!important;
    align-items:stretch!important;
}

.choice-card{
    min-width:0!important;
    background:#ffffff!important;
    border:1px solid #e6ebf2!important;
    border-radius:15px!important;
    padding:13px!important;
    box-shadow:0 4px 14px rgba(15,23,42,.035)!important;
}

.choice-card-title{
    margin:0 0 10px!important;
    padding:0!important;
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    color:#0b123d!important;
    font-size:16px!important;
    line-height:1!important;
    font-weight:900!important;
    text-transform:uppercase!important;
}

.choice-card-title i{
    color:#0D6EFD!important;
    font-size:18px!important;
    width:19px!important;
    text-align:center!important;
}

.choice-card-options{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
    margin:0!important;
    width:100%!important;
}

.choice-card-options label{
    width:100%!important;
    min-width:0!important;
    min-height:46px!important;
    height:46px!important;
    padding:0 8px!important;
    border-radius:11px!important;
    font-size:14px!important;
    font-weight:800!important;
    gap:7px!important;
    white-space:nowrap!important;
    box-shadow:none!important;
}

.choice-card-options label i{
    font-size:16px!important;
}

@media(max-width:768px){
    .lengan-umur-row{
        gap:8px!important;
        margin:10px 0!important;
    }

    .choice-card{
        border-radius:12px!important;
        padding:10px!important;
    }

    .choice-card-title{
        margin-bottom:8px!important;
        gap:6px!important;
        font-size:12px!important;
    }

    .choice-card-title i{
        font-size:14px!important;
        width:15px!important;
    }

    .choice-card-options{
        gap:6px!important;
    }

    .choice-card-options label{
        min-height:35px!important;
        height:35px!important;
        padding:0 5px!important;
        border-radius:9px!important;
        font-size:10.7px!important;
        gap:4px!important;
        border-width:1.3px!important;
    }

    .choice-card-options label i{
        font-size:12px!important;
    }
}

@media(max-width:480px){
    .lengan-umur-row{
        gap:7px!important;
        margin:9px 0!important;
    }

    .choice-card{
        padding:9px!important;
    }

    .choice-card-title{
        font-size:11px!important;
        margin-bottom:7px!important;
    }

    .choice-card-title i{
        font-size:13px!important;
    }

    .choice-card-options{
        gap:5px!important;
    }

    .choice-card-options label{
        min-height:32px!important;
        height:32px!important;
        padding:0 4px!important;
        border-radius:8px!important;
        font-size:9.6px!important;
        gap:3px!important;
    }

    .choice-card-options label i{
        font-size:11px!important;
    }
}

@media(max-width:380px){
    .lengan-umur-row{
        gap:6px!important;
    }

    .choice-card{
        padding:8px!important;
    }

    .choice-card-title{
        font-size:10.3px!important;
        gap:5px!important;
    }

    .choice-card-options label{
        min-height:30px!important;
        height:30px!important;
        font-size:8.8px!important;
        padding:0 3px!important;
    }

    .choice-card-options label i{
        font-size:10px!important;
    }
}

.gender-card{
    width:100%!important;
    background:#ffffff!important;
    border:1px solid #e6ebf2!important;
    border-radius:15px!important;
    padding:13px!important;
    margin:12px 0!important;
    box-shadow:0 4px 14px rgba(15,23,42,.035)!important;
}

.gender-card-title{
    margin:0 0 10px!important;
    padding:0!important;
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    color:#0b123d!important;
    font-size:16px!important;
    line-height:1!important;
    font-weight:900!important;
    text-transform:uppercase!important;
}

.gender-card-title .gender-icon{
    display:inline-flex!important;
    align-items:center!important;
    gap:2px!important;
    width:auto!important;
    min-width:34px!important;
}

.gender-card-title .gender-icon i{
    font-size:18px!important;
    width:auto!important;
}

.gender-options{
    width:100%!important;
    display:flex;
    flex-wrap:nowrap!important;
    gap:10px!important;
    margin:0!important;
}

.gender-options label{
    flex:1 1 0!important;
    width:100%!important;
    min-width:0!important;
    min-height:46px!important;
    height:46px!important;
    padding:0 8px!important;
    border-radius:11px!important;
    font-size:14px!important;
    font-weight:800!important;
    gap:7px!important;
    white-space:nowrap!important;
    box-shadow:none!important;
}

.gender-options label i{
    font-size:17px!important;
}

@media(max-width:768px){
    .gender-card{
        border-radius:12px!important;
        padding:10px!important;
        margin:10px 0!important;
    }

    .gender-card-title{
        margin-bottom:8px!important;
        gap:6px!important;
        font-size:12px!important;
    }

    .gender-card-title .gender-icon{
        min-width:29px!important;
    }

    .gender-card-title .gender-icon i{
        font-size:14px!important;
    }

    .gender-options{
        gap:7px!important;
    }

    .gender-options label{
        min-height:35px!important;
        height:35px!important;
        padding:0 6px!important;
        border-radius:9px!important;
        font-size:11px!important;
        gap:5px!important;
        border-width:1.3px!important;
    }

    .gender-options label i{
        font-size:13px!important;
    }
}

@media(max-width:480px){
    .gender-card{
        padding:9px!important;
        margin:9px 0!important;
    }

    .gender-card-title{
        font-size:11px!important;
        margin-bottom:7px!important;
    }

    .gender-card-title .gender-icon i{
        font-size:13px!important;
    }

    .gender-options{
        gap:6px!important;
    }

    .gender-options label{
        min-height:32px!important;
        height:32px!important;
        padding:0 5px!important;
        border-radius:8px!important;
        font-size:10px!important;
        gap:4px!important;
    }

    .gender-options label i{
        font-size:12px!important;
    }
}

@media(max-width:380px){
    .gender-card{
        padding:8px!important;
    }

    .gender-card-title{
        font-size:10.3px!important;
        gap:5px!important;
    }

    .gender-options label{
        min-height:30px!important;
        height:30px!important;
        font-size:9px!important;
        padding:0 4px!important;
    }

    .gender-options label i{
        font-size:11px!important;
    }
}

.action-button-stack{
    display:flex!important;
    flex-direction:column!important;
    gap:10px!important;
    margin-top:12px!important;
    width:100%!important;
}

.action-button-stack .left-buttons{
    width:100%!important;
    display:block!important;
}

.action-button-stack .btn-add-order{
    min-height:58px!important;
    padding:12px 16px!important;
    border-radius:13px!important;
    font-size:16px!important;
    font-weight:800!important;
    line-height:1.15!important;
    gap:10px!important;
}

.action-button-stack .btn-add-order i{
    font-size:28px!important;
    line-height:1!important;
}

.action-button-stack .btn-clear-form{
    min-height:44px!important;
    padding:10px 14px!important;
    border-radius:12px!important;
    background:#f1f5f9!important;
    color:#334155!important;
    border:1.5px solid #dbe3ee!important;
    box-shadow:none!important;
    font-size:14px!important;
    font-weight:900!important;
    line-height:1.15!important;
    gap:8px!important;
    animation:none!important;
    transform:none!important;
}

.action-button-stack .btn-clear-form i{
    color:#475569!important;
    font-size:15px!important;
    line-height:1!important;
}

.action-button-stack .btn-clear-form:hover{
    background:#e2e8f0!important;
    color:#0f172a!important;
    transform:translateY(-1px)!important;
}

@media(max-width:390px){
    .action-button-stack .btn-clear-form{
        min-height:40px!important;
        padding:9px 12px!important;
        font-size:13px!important;
    }
}

.action-button-stack .btn-send-big{
    min-height:72px!important;
    padding:11px 14px 10px!important;
    border-radius:13px!important;
    background:linear-gradient(135deg,#039b1d,#008c1c)!important;
    color:#ffffff!important;
    border:none!important;
    box-shadow:0 8px 16px rgba(0,141,33,.18)!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:4px!important;
    line-height:1.1!important;
    animation:none!important;
    transform:none!important;
}

.action-button-stack .btn-send-big .send-main{
    display:block!important;
    font-size:24px!important;
    font-weight:900!important;
    line-height:1!important;
    letter-spacing:.1px!important;
}

.action-button-stack .btn-send-big .send-sub{
    display:block!important;
    font-size:13px!important;
    font-weight:800!important;
    line-height:1.15!important;
    opacity:.97!important;
}

.action-button-stack .btn-send-big:hover,
.action-button-stack .btn-send-big:active{
    transform:translateY(-1px)!important;
}

@media(max-width:768px){
    .action-button-stack{
        gap:9px!important;
        margin-top:10px!important;
    }

    .action-button-stack .btn-add-order{
        min-height:56px!important;
        padding:11px 12px!important;
        border-radius:11px!important;
        font-size:15px!important;
        gap:8px!important;
    }

    .action-button-stack .btn-add-order i{
        font-size:24px!important;
    }

    .action-button-stack .btn-send-big{
        min-height:66px!important;
        padding:10px 12px 9px!important;
        border-radius:11px!important;
        gap:3px!important;
    }

    .action-button-stack .btn-send-big .send-main{
        font-size:20px!important;
    }

    .action-button-stack .btn-send-big .send-sub{
        font-size:11.8px!important;
    }
}

@media(max-width:390px){
    .action-button-stack{
        gap:8px!important;
        margin-top:9px!important;
    }

    .action-button-stack .btn-add-order{
        min-height:53px!important;
        font-size:14px!important;
        padding:10px 10px!important;
        border-radius:10px!important;
    }

    .action-button-stack .btn-add-order i{
        font-size:22px!important;
    }

    .action-button-stack .btn-send-big{
        min-height:62px!important;
        padding:9px 10px 8px!important;
        border-radius:10px!important;
    }

    .action-button-stack .btn-send-big .send-main{
        font-size:19px!important;
    }

    .action-button-stack .btn-send-big .send-sub{
        font-size:11px!important;
    }
}

.section-label,
.size-card-title,
.choice-card-title,
.gender-card-title{
    gap:10px!important;
}

.section-label > i,
.size-card-title > i,
.choice-card-title > i{
    margin-right:2px!important;
    flex-shrink:0!important;
}

.gender-card-title .gender-icon{
    margin-right:4px!important;
    flex-shrink:0!important;
}

@media(max-width:768px){
    .section-label,
    .size-card-title,
    .choice-card-title,
    .gender-card-title{
        gap:8px!important;
    }

    .section-label > i,
    .size-card-title > i,
    .choice-card-title > i{
        margin-right:1px!important;
    }

    .gender-card-title .gender-icon{
        margin-right:3px!important;
    }
}

@media(max-width:380px){
    .section-label,
    .size-card-title,
    .choice-card-title,
    .gender-card-title{
        gap:7px!important;
    }
}

@media(max-width:768px){
    .size-card .size-options{
        display:grid!important;
        grid-template-columns:repeat(8, minmax(0, 1fr))!important;
        gap:5px!important;
        width:100%!important;
        margin:0!important;
    }

    .size-card .size-options label{
        width:100%!important;
        min-width:0!important;
        height:32px!important;
        min-height:32px!important;
        padding:0 2px!important;
        border-radius:7px!important;
        font-size:8.7px!important;
        line-height:1!important;
        white-space:nowrap!important;
        display:flex!important;
        align-items:center!important;
        justify-content:center!important;
    }
}

@media(max-width:430px){
    .size-card .size-options{
        gap:4px!important;
    }

    .size-card .size-options label{
        height:30px!important;
        min-height:30px!important;
        font-size:7.8px!important;
        padding:0 1px!important;
        border-radius:7px!important;
    }
}

@media(max-width:360px){
    .size-card .size-options{
        gap:3px!important;
    }

    .size-card .size-options label{
        height:28px!important;
        min-height:28px!important;
        font-size:7px!important;
        border-radius:6px!important;
    }
}

.btn-send.btn-send-big{
    min-height:82px!important;
    padding:10px 14px 12px!important;
    border-radius:12px!important;
    background:linear-gradient(180deg,#039e22 0%,#008619 100%)!important;
    color:#ffffff!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:8px!important;
    line-height:1!important;
    text-align:center!important;
    box-shadow:0 6px 13px rgba(0,134,25,.18)!important;
    animation:none!important;
}

.btn-send.btn-send-big .send-main{
    display:block!important;
    color:#ffffff!important;
    font-size:30px!important;
    font-weight:900!important;
    line-height:1!important;
    letter-spacing:.2px!important;
}

.btn-send.btn-send-big .send-sub{
    display:block!important;
    color:#ffffff!important;
    font-size:21px!important;
    font-weight:500!important;
    line-height:1.15!important;
    opacity:.98!important;
}

@media(max-width:768px){
    .btn-send.btn-send-big{
        min-height:78px!important;
        gap:7px!important;
        border-radius:12px!important;
    }

    .btn-send.btn-send-big .send-main{
        font-size:28px!important;
    }

    .btn-send.btn-send-big .send-sub{
        font-size:19px!important;
    }
}

@media(max-width:390px){
    .btn-send.btn-send-big{
        min-height:70px!important;
        gap:6px!important;
    }

    .btn-send.btn-send-big .send-main{
        font-size:24px!important;
    }

    .btn-send.btn-send-big .send-sub{
        font-size:15px!important;
    }
}

.button-group.action-button-stack{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
    width:100%!important;
    margin-top:14px!important;
}

.button-group.action-button-stack .left-buttons{
    width:100%!important;
}

.button-group.action-button-stack .btn-add-order{
    width:100%!important;
}

button.btn.btn-send.btn-send-big,
.button-group.action-button-stack button.btn-send.btn-send-big{
    width:100%!important;
    min-height:82px!important;
    padding:10px 14px 12px!important;
    border:0!important;
    border-radius:12px!important;
    background:linear-gradient(180deg,#009f22 0%,#008719 100%)!important;
    color:#ffffff!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:5px!important;
    text-align:center!important;
    line-height:1!important;
    font-family:Arial,Helvetica,sans-serif!important;
    box-shadow:none!important;
    animation:none!important;
    transform:none!important;
}

button.btn.btn-send.btn-send-big .send-main,
.button-group.action-button-stack button.btn-send.btn-send-big .send-main{
    display:block!important;
    width:100%!important;
    color:#ffffff!important;
    font-size:30px!important;
    font-weight:900!important;
    line-height:1.05!important;
    letter-spacing:.1px!important;
    text-align:center!important;
    margin:0!important;
    padding:0!important;
}

button.btn.btn-send.btn-send-big .send-sub,
.button-group.action-button-stack button.btn-send.btn-send-big .send-sub{
    display:block!important;
    width:100%!important;
    color:#ffffff!important;
    font-size:21px!important;
    font-weight:600!important;
    line-height:1.15!important;
    text-align:center!important;
    margin:0!important;
    padding:0!important;
    opacity:1!important;
    white-space:nowrap!important;
}

button.btn.btn-send.btn-send-big:hover,
button.btn.btn-send.btn-send-big:active{
    transform:translateY(-1px)!important;
}

@media(max-width:768px){
    .button-group.action-button-stack{
        gap:10px!important;
        margin-top:12px!important;
    }

    button.btn.btn-send.btn-send-big,
    .button-group.action-button-stack button.btn-send.btn-send-big{
        min-height:76px!important;
        padding:9px 10px 10px!important;
        border-radius:11px!important;
        gap:4px!important;
    }

    button.btn.btn-send.btn-send-big .send-main,
    .button-group.action-button-stack button.btn-send.btn-send-big .send-main{
        font-size:clamp(24px,7.4vw,30px)!important;
    }

    button.btn.btn-send.btn-send-big .send-sub,
    .button-group.action-button-stack button.btn-send.btn-send-big .send-sub{
        font-size:clamp(15px,4.7vw,21px)!important;
        font-weight:500!important;
    }
}

@media(max-width:390px){
    button.btn.btn-send.btn-send-big,
    .button-group.action-button-stack button.btn-send.btn-send-big{
        min-height:70px!important;
        padding:8px 8px 9px!important;
        gap:4px!important;
    }
}

.button-group.action-button-stack{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    width:100%!important;
    margin-top:14px!important;
}

button.btn.btn-send.btn-send-big,
.button-group.action-button-stack button.btn-send.btn-send-big{
    width:100%!important;
    min-height:56px!important;
    padding:8px 12px!important;
    border:0!important;
    border-radius:10px!important;
    background:linear-gradient(180deg,#069c23 0%,#008a18 100%)!important;
    color:#ffffff!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:3px!important;
    text-align:center!important;
    line-height:1!important;
    box-shadow:none!important;
    animation:none!important;
    transform:none!important;
}

button.btn.btn-send.btn-send-big .send-main-row,
.button-group.action-button-stack button.btn-send.btn-send-big .send-main-row{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:7px!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
}

button.btn.btn-send.btn-send-big .send-main-row i,
.button-group.action-button-stack button.btn-send.btn-send-big .send-main-row i{
    font-size:15px!important;
    color:#ffffff!important;
    line-height:1!important;
    margin:0!important;
}

button.btn.btn-send.btn-send-big .send-main,
.button-group.action-button-stack button.btn-send.btn-send-big .send-main{
    display:block!important;
    width:auto!important;
    color:#ffffff!important;
    font-size:17px!important;
    font-weight:800!important;
    line-height:1.05!important;
    letter-spacing:.1px!important;
    text-align:center!important;
    margin:0!important;
    padding:0!important;
}

button.btn.btn-send.btn-send-big .send-sub,
.button-group.action-button-stack button.btn-send.btn-send-big .send-sub{
    display:block!important;
    width:100%!important;
    color:#ffffff!important;
    font-size:11px!important;
    font-weight:500!important;
    line-height:1.2!important;
    text-align:center!important;
    margin:0!important;
    padding:0!important;
    opacity:1!important;
    white-space:normal!important;
}

button.btn.btn-send.btn-send-big:hover,
button.btn.btn-send.btn-send-big:active{
    transform:translateY(-1px)!important;
}

@media(max-width:768px){
    .button-group.action-button-stack{
        gap:10px!important;
        margin-top:12px!important;
    }

    button.btn.btn-send.btn-send-big,
    .button-group.action-button-stack button.btn-send.btn-send-big{
        min-height:54px!important;
        padding:7px 10px!important;
        border-radius:10px!important;
        gap:3px!important;
    }

    button.btn.btn-send.btn-send-big .send-main-row i,
    .button-group.action-button-stack button.btn-send.btn-send-big .send-main-row i{
        font-size:14px!important;
    }

    button.btn.btn-send.btn-send-big .send-main,
    .button-group.action-button-stack button.btn-send.btn-send-big .send-main{
        font-size:16px!important;
    }

    button.btn.btn-send.btn-send-big .send-sub,
    .button-group.action-button-stack button.btn-send.btn-send-big .send-sub{
        font-size:10.5px!important;
    }
}

@media(max-width:390px){
    button.btn.btn-send.btn-send-big,
    .button-group.action-button-stack button.btn-send.btn-send-big{
        min-height:52px!important;
        padding:7px 8px!important;
    }

    button.btn.btn-send.btn-send-big .send-main-row{
        gap:6px!important;
    }

    button.btn.btn-send.btn-send-big .send-main-row i,
    .button-group.action-button-stack button.btn-send.btn-send-big .send-main-row i{
        font-size:13px!important;
    }

    button.btn.btn-send.btn-send-big .send-main,
    .button-group.action-button-stack button.btn-send.btn-send-big .send-main{
        font-size:15px!important;
    }

    button.btn.btn-send.btn-send-big .send-sub,
    .button-group.action-button-stack button.btn-send.btn-send-big .send-sub{
        font-size:9.8px!important;
    }
}

.button-group.action-button-stack{
    gap:8px!important;
}

.button-group.action-button-stack .left-buttons{
    width:100%!important;
}

.button-group.action-button-stack .btn-add-order{
    min-height:38px!important;
    height:38px!important;
    padding:6px 10px!important;
    border-radius:8px!important;
    font-size:11.5px!important;
    font-weight:800!important;
    gap:6px!important;
    line-height:1!important;
    box-shadow:none!important;
    animation:none!important;
}

.button-group.action-button-stack .btn-add-order i{
    font-size:12px!important;
    line-height:1!important;
    margin:0!important;
}

@media(max-width:768px){
    .button-group.action-button-stack .btn-add-order{
        min-height:37px!important;
        height:37px!important;
        padding:6px 9px!important;
        font-size:11px!important;
        border-radius:8px!important;
        gap:5px!important;
    }

    .button-group.action-button-stack .btn-add-order i{
        font-size:11px!important;
    }
}

@media(max-width:390px){
    .button-group.action-button-stack .btn-add-order{
        min-height:35px!important;
        height:35px!important;
        padding:5px 8px!important;
        font-size:10.2px!important;
        border-radius:8px!important;
        gap:5px!important;
    }

    .button-group.action-button-stack .btn-add-order i{
        font-size:10.5px!important;
    }
}

.note-box{
    text-align:left!important;
    text-align-last:auto!important;
    font-size:12.5px!important;
    line-height:1.58!important;
    padding:14px 14px 15px!important;
    margin:12px 0!important;
    border-radius:14px!important;
}

.note-box::before{
    text-align:center!important;
    text-align-last:center!important;
    font-size:18px!important;
    margin-bottom:7px!important;
}

.note-box .note-highlight,
.note-highlight{
    font-weight:900!important;
}

@media(max-width:768px){
    .note-box{
        font-size:11.4px!important;
        line-height:1.54!important;
        padding:12px 12px 13px!important;
        margin:10px 0!important;
        border-radius:12px!important;
    }

    .note-box::before{
        font-size:16px!important;
        margin-bottom:6px!important;
    }
}

@media(max-width:390px){
    .note-box{
        font-size:10.8px!important;
        line-height:1.5!important;
        padding:11px 10px 12px!important;
        margin:9px 0!important;
        border-radius:11px!important;
    }

    .note-box::before{
        font-size:15px!important;
        margin-bottom:5px!important;
    }
}

#genderGroup label.radio-pop,
.gender-options label.radio-pop{
    animation:genderRadioPopSoftFinal .26s ease-out 1!important;
}

@keyframes genderRadioPopSoftFinal{
    0%{
        transform:scale(1);
    }

    45%{
        transform:scale(1.03);
    }

    100%{
        transform:scale(1);
    }
}

.radio-group label.radio-pop{
    animation:radioPopSoftAllFinal .26s ease-out 1!important;
}

@keyframes radioPopSoftAllFinal{
    0%{
        transform:scale(1);
    }

    45%{
        transform:scale(1.03);
    }

    100%{
        transform:scale(1);
    }
}

#nama{
    font-size:14.5px!important;
    min-height:42px!important;
    padding-top:12px!important;
    padding-bottom:12px!important;
}

.field-wrap:has(#nama) i{
    font-size:14px!important;
}

@media(max-width:390px){
    #nama{
        font-size:14px!important;
        min-height:41px!important;
        padding-top:11.5px!important;
        padding-bottom:11.5px!important;
    }

    .field-wrap:has(#nama) i{
        font-size:13.5px!important;
    }
}

.admin-login-trigger{
    border:none!important;
    cursor:pointer!important;
    padding:0!important;
    outline:none!important;
    transition:.2s ease!important;
}

.admin-login-trigger:hover{
    transform:translateY(-1px) scale(1.03)!important;
    background:rgba(255,255,255,.22)!important;
}

.admin-login-trigger:focus-visible{
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.25),
        0 0 0 4px rgba(255,255,255,.25)!important;
}

.admin-login-popup-overlay{
    position:fixed!important;
    inset:0!important;
    z-index:100001!important;
    background:rgba(15,23,42,.62)!important;
    display:none;
    align-items:center!important;
    justify-content:center!important;
    padding:18px!important;
}

.admin-login-popup-overlay.show{
    display:flex!important;
}

.admin-login-popup-box{
    position:relative!important;
    width:100%!important;
    max-width:380px!important;
    background:#ffffff!important;
    border-radius:22px!important;
    padding:26px 20px 20px!important;
    text-align:left!important;
    box-shadow:0 18px 40px rgba(15,23,42,.22)!important;
    animation:popupSmoothIn .18s ease-out 1!important;
}

.admin-login-close{
    position:absolute!important;
    top:12px!important;
    right:12px!important;
    width:34px!important;
    height:34px!important;
    border:none!important;
    border-radius:50%!important;
    background:#f1f5f9!important;
    color:#334155!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    cursor:pointer!important;
    font-size:16px!important;
}

.admin-login-head{
    text-align:center!important;
    margin-bottom:16px!important;
}

.admin-login-icon{
    width:70px!important;
    height:70px!important;
    border-radius:22px!important;
    background:linear-gradient(135deg,#1976D2,#0D6EFD)!important;
    color:white!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    margin:0 auto 12px!important;
    font-size:34px!important;
    box-shadow:0 10px 22px rgba(25,118,210,.22)!important;
}

.admin-login-head h3{
    margin:0 0 6px!important;
    color:#14365f!important;
    font-size:23px!important;
    font-weight:900!important;
    text-align:center!important;
}

.admin-login-head p{
    margin:0!important;
    color:#64748b!important;
    font-size:13px!important;
    font-weight:800!important;
    line-height:1.45!important;
    text-align:center!important;
}

.admin-login-field{
    margin:11px 0!important;
}

.admin-login-field label{
    display:block!important;
    color:#14365f!important;
    font-size:13px!important;
    font-weight:900!important;
    margin-bottom:6px!important;
}

.admin-login-field input{
    width:100%!important;
    border:1.5px solid #d7dee8!important;
    border-radius:13px!important;
    padding:13px 14px!important;
    font-size:15px!important;
    outline:none!important;
    color:#0f172a!important;
    background:#ffffff!important;
}

.admin-login-field input:focus{
    border-color:#1976D2!important;
    box-shadow:0 0 0 4px rgba(25,118,210,.10)!important;
}

.admin-login-error{
    display:none;
    margin:10px 0 0!important;
    padding:9px 10px!important;
    border-radius:11px!important;
    background:#fee2e2!important;
    border:1px solid #fecaca!important;
    color:#b91c1c!important;
    font-size:12px!important;
    font-weight:900!important;
    text-align:center!important;
    line-height:1.35!important;
}

.admin-login-error.show{
    display:block!important;
}

.admin-login-remember{
    display:flex!important;
    align-items:flex-start!important;
    gap:9px!important;
    margin:11px 0 2px!important;
    padding:10px 11px!important;
    border:1px solid #dbeafe!important;
    border-radius:12px!important;
    background:#f8fbff!important;
    color:#14365f!important;
    cursor:pointer!important;
}

.admin-login-remember input{
    width:17px!important;
    height:17px!important;
    min-width:17px!important;
    margin:1px 0 0!important;
    accent-color:#1976D2!important;
    cursor:pointer!important;
}

.admin-login-remember span{
    display:block!important;
    font-size:12px!important;
    font-weight:900!important;
    line-height:1.35!important;
}

.admin-login-remember small{
    display:block!important;
    margin-top:2px!important;
    color:#64748b!important;
    font-size:10.5px!important;
    font-weight:800!important;
    line-height:1.3!important;
}

.admin-login-submit{
    width:100%!important;
    margin-top:14px!important;
    border:none!important;
    border-radius:14px!important;
    padding:14px 16px!important;
    background:linear-gradient(135deg,#1976D2,#0D6EFD)!important;
    color:white!important;
    font-size:16px!important;
    font-weight:900!important;
    cursor:pointer!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:8px!important;
    box-shadow:0 8px 18px rgba(25,118,210,.18)!important;
}

.admin-login-submit:hover{
    transform:translateY(-1px)!important;
}

.admin-login-hint{
    margin-top:10px!important;
    color:#64748b!important;
    font-size:11px!important;
    font-weight:800!important;
    line-height:1.35!important;
    text-align:center!important;
}

@media(max-width:390px){
    .admin-login-popup-box{
        max-width:320px!important;
        padding:24px 16px 18px!important;
    }

    .admin-login-icon{
        width:62px!important;
        height:62px!important;
        font-size:30px!important;
    }

    .admin-login-head h3{
        font-size:20px!important;
    }
}

.data-pemesan-card,
.size-card.compact-ui-card,
.choice-card,
.gender-card{
    border-width:1.65px!important;
    border-color:#c9d3e1!important;
    box-shadow:0 5px 14px rgba(15,23,42,.05)!important;
}

.data-pemesan-card .pemesan-field input,
#sizeLainnya{
    border-width:1.5px!important;
    border-color:#cfd8e6!important;
}

.radio-group label,
.size-card .size-options label,
.choice-card-options label,
.gender-options label{
    border-width:1.7px!important;
    border-color:#c4cfdd!important;
}

.radio-group label:hover,
.size-card .size-options label:hover,
.choice-card-options label:hover,
.gender-options label:hover{
    border-color:#8cbfff!important;
}

.countdown-box,
.note-box{
    border-width:1.65px!important;
}

.count-item:not(:last-child)::after{
    width:1.2px!important;
}

.summary-confirm,
.payment-box,
.rekening-box{
    border-width:1.55px!important;
}

.summary-card,
.rekening-detail-card{
    border-width:1.35px!important;
}

@media(max-width:768px){
    .data-pemesan-card,
    .size-card.compact-ui-card,
    .choice-card,
    .gender-card{
        border-width:1.55px!important;
        border-color:#c9d3e1!important;
    }

    .radio-group label,
    .size-card .size-options label,
    .choice-card-options label,
    .gender-options label{
        border-width:1.55px!important;
        border-color:#c4cfdd!important;
    }

    .countdown-box,
    .note-box{
        border-width:1.55px!important;
    }

    .count-item:not(:last-child)::after{
        width:1.1px!important;
    }
}

.countdown-box{
    border-width:2px!important;
    border-style:solid!important;
    border-color:#c4cfdd!important;
    box-shadow:0 6px 16px rgba(15,23,42,.055)!important;
}

.note-box{
    border-width:2px!important;
    border-style:solid!important;
    box-shadow:0 6px 16px rgba(255,193,7,.13)!important;
}

.count-item:not(:last-child)::after{
    width:1.4px!important;
    background:#c9d3e1!important;
}

@media(max-width:768px){
    .countdown-box,
    .note-box{
        border-width:1.9px!important;
    }

    .count-item:not(:last-child)::after{
        width:1.3px!important;
    }
}

@media(max-width:390px){
    .countdown-box,
    .note-box{
        border-width:1.8px!important;
    }

    .count-item:not(:last-child)::after{
        width:1.2px!important;
    }
}

.button-group.action-button-stack .btn-add-order .add-order-icon{
    font-size:13px!important;
    line-height:1!important;
    margin:0!important;
}

.btn-send .fa-paper-plane{
    display:inline-block!important;
    transform-origin:center center!important;
    animation:planeSendSlowSmooth 3.35s ease-in-out infinite!important;
    will-change:transform, filter!important;
}

.btn-send:disabled .fa-paper-plane,
.btn-send.closed .fa-paper-plane,
.btn-send.offline .fa-paper-plane{
    animation:none!important;
    transform:none!important;
    filter:none!important;
}

@keyframes planeSendSlowSmooth{
    0%,100%{
        transform:translateX(0) translateY(0) rotate(0deg) scale(1);
        filter:none;
    }
    32%{
        transform:translateX(1.5px) translateY(-1.3px) rotate(-3.5deg) scale(1.018);
        filter:drop-shadow(0 .8px 2px rgba(255,255,255,.22));
    }
    58%{
        transform:translateX(2.4px) translateY(-.2px) rotate(0deg) scale(1.01);
        filter:none;
    }
    82%{
        transform:translateX(1.1px) translateY(-.8px) rotate(3deg) scale(1.014);
        filter:drop-shadow(0 .8px 1.5px rgba(255,255,255,.18));
    }
}

@media(max-width:768px){
    .btn-send .fa-paper-plane{
        animation-duration:3.6s!important;
    }
}

@media(prefers-reduced-motion:reduce){
    .btn-send .fa-paper-plane{
        animation:none!important;
        transform:none!important;
        filter:none!important;
    }
}

.size-chart-btn i{
    display:inline-block!important;
    transform-origin:center center!important;
    animation:sizeChartIconSlowSmooth 4.8s ease-in-out infinite!important;
    will-change:transform, filter!important;
}

@keyframes sizeChartIconSlowSmooth{
    0%,100%{
        transform:translateY(0) rotate(0deg) scale(1);
        filter:none;
    }
    38%{
        transform:translateY(-1px) rotate(-3deg) scale(1.035);
        filter:drop-shadow(0 1px 2px rgba(255,255,255,.16));
    }
    68%{
        transform:translateY(0) rotate(2.5deg) scale(1.018);
        filter:none;
    }
}

.design-icon-wrap{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    transform-origin:center center!important;
    animation:designIconSlowSmooth 4.8s ease-in-out infinite!important;
    will-change:transform, filter!important;
}

.design-shirt-svg{
    animation:designShirtGlowSlowSmooth 4.8s ease-in-out infinite!important;
    will-change:filter, fill!important;
}

@keyframes designIconSlowSmooth{
    0%,100%{
        transform:translateY(0) rotate(0deg) scale(1);
        filter:none;
    }
    38%{
        transform:translateY(-1px) rotate(-3.5deg) scale(1.04);
        filter:drop-shadow(0 1px 2px rgba(255,255,255,.18));
    }
    68%{
        transform:translateY(0) rotate(3deg) scale(1.018);
        filter:none;
    }
}

@keyframes designShirtGlowSlowSmooth{
    0%,100%{
        fill:#ffffff;
        filter:none;
    }
    38%{
        fill:#fff5c2;
        filter:drop-shadow(0 0 3px rgba(255,224,130,.26));
    }
    68%{
        fill:#ffffff;
        filter:none;
    }
}

.btn-send .fa-paper-plane{
    animation:planeSendExtraSlowSmooth 4.45s ease-in-out infinite!important;
}

@keyframes planeSendExtraSlowSmooth{
    0%,100%{
        transform:translateX(0) translateY(0) rotate(0deg) scale(1);
        filter:none;
    }
    34%{
        transform:translateX(1px) translateY(-1px) rotate(-2.5deg) scale(1.01);
        filter:drop-shadow(0 .7px 1.5px rgba(255,255,255,.16));
    }
    64%{
        transform:translateX(1.8px) translateY(-.2px) rotate(1.8deg) scale(1.008);
        filter:none;
    }
}

.wa-header-btn.wa-help-slide,
.wa-header-btn.wa-help-slide.wa-notice{
    transition:
        width 1.75s cubic-bezier(.16,1,.3,1),
        min-width 1.75s cubic-bezier(.16,1,.3,1),
        box-shadow 1.1s ease!important;
}

.wa-header-btn.wa-help-slide i{
    transition:transform 1.75s cubic-bezier(.16,1,.3,1)!important;
}

.wa-header-btn.wa-help-slide .wa-help-text{
    transition:
        transform 1.75s cubic-bezier(.16,1,.3,1),
        opacity 1.1s ease,
        visibility 1.1s ease!important;
}

@media(max-width:480px){
    .wa-header-btn.wa-help-slide,
    .wa-header-btn.wa-help-slide.wa-notice{
        transition:
            width 1.55s cubic-bezier(.16,1,.3,1),
            min-width 1.55s cubic-bezier(.16,1,.3,1),
            box-shadow 1s ease!important;
    }

    .wa-header-btn.wa-help-slide i,
    .wa-header-btn.wa-help-slide .wa-help-text{
        transition-duration:1.55s!important;
    }
}

@media(prefers-reduced-motion:reduce){
    .size-chart-btn i,
    .design-icon-wrap,
    .design-shirt-svg,
    .btn-send .fa-paper-plane{
        animation:none!important;
        transform:none!important;
        filter:none!important;
    }
}

.local-size-note{
    width:100%!important;
    display:flex!important;
    align-items:flex-start!important;
    gap:8px!important;
    margin:-2px 0 12px!important;
    padding:10px 12px!important;
    border-radius:13px!important;
    background:linear-gradient(135deg,#fff7d6,#fff1ba)!important;
    border:1.5px solid #facc15!important;
    color:#7c2d12!important;
    font-size:13px!important;
    font-weight:900!important;
    line-height:1.35!important;
    text-align:left!important;
}
.local-size-note i{
    color:#f59e0b!important;
    font-size:15px!important;
    margin-top:1px!important;
    flex:0 0 auto!important;
}
.sizechart-local-note{
    display:flex!important;
    align-items:flex-start!important;
    gap:8px!important;
    margin:0 0 12px!important;
    padding:11px 12px!important;
    border-radius:13px!important;
    background:linear-gradient(135deg,#fff7d6,#fff1ba)!important;
    border:1.5px solid #facc15!important;
    color:#7c2d12!important;
    font-size:14px!important;
    font-weight:900!important;
    line-height:1.4!important;
    text-align:left!important;
}
.sizechart-local-note i{
    color:#f59e0b!important;
    font-size:16px!important;
    margin-top:1px!important;
    flex:0 0 auto!important;
}
@media(max-width:768px){
    .local-size-note{
        margin:-1px 0 10px!important;
        padding:9px 10px!important;
        border-radius:12px!important;
        font-size:12px!important;
    }
    .sizechart-local-note{
        margin:0 0 10px!important;
        padding:9px 10px!important;
        border-radius:12px!important;
        font-size:12px!important;
    }
}

@media(max-width:480px){
    .local-size-note{
        margin:-2px 0 8px!important;
        padding:6px 8px!important;
        gap:5px!important;
        border-radius:9px!important;
        border-width:1px!important;
        font-size:10.5px!important;
        line-height:1.24!important;
        font-weight:800!important;
    }

    .local-size-note i{
        font-size:11px!important;
        margin-top:1px!important;
    }

    .sizechart-local-note{
        margin:0 0 7px!important;
        padding:6px 8px!important;
        gap:5px!important;
        border-radius:9px!important;
        border-width:1px!important;
        font-size:10.5px!important;
        line-height:1.24!important;
        font-weight:800!important;
    }

    .sizechart-local-note i{
        font-size:11px!important;
        margin-top:1px!important;
    }
}

@media(max-width:390px){
    .local-size-note,
    .sizechart-local-note{
        font-size:10px!important;
        line-height:1.22!important;
        padding:6px 7px!important;
    }
}

@media(max-width:480px){
    .local-size-note,
    .sizechart-local-note{
        margin:0 0 5px!important;
        padding:4px 6px!important;
        gap:4px!important;
        border-radius:7px!important;
        border-width:1px!important;
        font-size:9px!important;
        line-height:1.15!important;
        font-weight:800!important;
        box-shadow:none!important;
    }

    .local-size-note i,
    .sizechart-local-note i{
        font-size:9px!important;
        margin-top:1px!important;
    }
}

@media(max-width:390px){
    .local-size-note,
    .sizechart-local-note{
        margin:0 0 4px!important;
        padding:3px 5px!important;
        gap:3px!important;
        border-radius:6px!important;
        font-size:8.5px!important;
        line-height:1.12!important;
    }

    .local-size-note i,
    .sizechart-local-note i{
        font-size:8.5px!important;
    }
}

@media(max-width:768px){
    .size-chart-btn i{
        display:inline-block!important;
        transform-origin:center center!important;
        animation:hpSizeChartIconNotice 2.85s ease-in-out infinite!important;
        will-change:transform, filter!important;
    }

    .design-icon-wrap,
    .design-btn i.fa-shirt{
        display:inline-flex!important;
        transform-origin:center center!important;
        animation:hpShirtIconNotice 2.85s ease-in-out infinite!important;
        will-change:transform, filter!important;
    }

    .design-shirt-svg{
        animation:hpShirtSvgGlow 2.85s ease-in-out infinite!important;
        will-change:filter, fill!important;
    }

    .btn-send .fa-paper-plane{
        display:inline-block!important;
        transform-origin:center center!important;
        animation:hpPlaneIconNotice 3s ease-in-out infinite!important;
        will-change:transform, filter!important;
    }
}

@keyframes hpSizeChartIconNotice{
    0%, 64%, 100%{
        transform:translateY(0) rotate(0deg) scale(1);
        filter:none;
    }
    72%{
        transform:translateY(-2px) rotate(-7deg) scale(1.12);
        filter:drop-shadow(0 1px 3px rgba(255,255,255,.24));
    }
    82%{
        transform:translateY(1px) rotate(7deg) scale(1.10);
        filter:drop-shadow(0 1px 2px rgba(255,255,255,.18));
    }
    92%{
        transform:translateY(0) rotate(0deg) scale(1.04);
        filter:none;
    }
}

@keyframes hpShirtIconNotice{
    0%, 64%, 100%{
        transform:translateY(0) rotate(0deg) scale(1);
        filter:none;
    }
    72%{
        transform:translateY(-2px) rotate(-8deg) scale(1.14);
        filter:drop-shadow(0 1px 3px rgba(255,224,130,.30));
    }
    82%{
        transform:translateY(1px) rotate(8deg) scale(1.12);
        filter:drop-shadow(0 1px 2px rgba(255,224,130,.22));
    }
    92%{
        transform:translateY(0) rotate(0deg) scale(1.04);
        filter:none;
    }
}

@keyframes hpShirtSvgGlow{
    0%, 64%, 100%{
        fill:#ffffff;
        filter:none;
    }
    72%, 82%{
        fill:#fff2b8;
        filter:drop-shadow(0 0 4px rgba(255,224,130,.35));
    }
    92%{
        fill:#ffffff;
        filter:none;
    }
}

@keyframes hpPlaneIconNotice{
    0%, 62%, 100%{
        transform:translateX(0) translateY(0) rotate(0deg) scale(1);
        filter:none;
    }
    72%{
        transform:translateX(3px) translateY(-2px) rotate(-5deg) scale(1.08);
        filter:drop-shadow(0 1px 3px rgba(255,255,255,.24));
    }
    84%{
        transform:translateX(4px) translateY(-.5px) rotate(4deg) scale(1.06);
        filter:drop-shadow(0 1px 2px rgba(255,255,255,.18));
    }
    94%{
        transform:translateX(1px) translateY(0) rotate(0deg) scale(1.02);
        filter:none;
    }
}

@media(prefers-reduced-motion:reduce){
    .size-chart-btn i,
    .design-icon-wrap,
    .design-btn i.fa-shirt,
    .design-shirt-svg,
    .btn-send .fa-paper-plane{
        animation:none!important;
        transform:none!important;
        filter:none!important;
    }
}

@media(max-width:768px){
    html[lang="id"] .size-card .size-chart-btn,
    html[lang="id"] .size-card .design-btn{
        font-size:9px!important;
    }
}

@media(max-width:480px){
    html[lang="id"] .size-card .size-chart-btn,
    html[lang="id"] .size-card .design-btn{
        font-size:8px!important;
    }
}

@media(max-width:380px){
    html[lang="id"] .size-card .size-chart-btn,
    html[lang="id"] .size-card .design-btn{
        font-size:7.5px!important;
    }
}

.title-box{
    overflow:visible!important;
}

.language-switch-row{
    position:absolute!important;
    right:16px!important;
    bottom:-17px!important;
    z-index:60!important;
    width:auto!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    display:flex!important;
    justify-content:flex-end!important;
    align-items:center!important;
    pointer-events:none!important;
}

.language-toggle-btn{
    pointer-events:auto!important;
    border:1.5px solid #dbeafe!important;
    background:rgba(255,255,255,.98)!important;
    color:#14365f!important;
    border-radius:999px!important;
    padding:0 10px!important;
    min-width:56px!important;
    height:29px!important;
    min-height:29px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:5px!important;
    font-size:11px!important;
    font-weight:900!important;
    cursor:pointer!important;
    box-shadow:0 6px 16px rgba(15,23,42,.16)!important;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease!important;
    line-height:1!important;
    -webkit-tap-highlight-color:transparent!important;
}

.language-toggle-btn:hover,
.language-toggle-btn:active{
    transform:translateY(-1px)!important;
    border-color:#93c5fd!important;
    box-shadow:0 8px 18px rgba(25,118,210,.18)!important;
}

.language-toggle-btn .language-globe{
    font-size:12px!important;
    line-height:1!important;
}

.title-box + .note-box{
    margin-top:27px!important;
}

html[lang="en"] .note-box::before{
    content:"⚠️ IMPORTANT ⚠️"!important;
}

html[lang="en"] tr.new-saved-row::before{
    content:"New"!important;
}

@media(max-width:768px){
    .language-switch-row{
        right:12px!important;
        bottom:-15px!important;
    }

    .language-toggle-btn{
        min-width:50px!important;
        height:25px!important;
        min-height:25px!important;
        padding:0 9px!important;
        font-size:10px!important;
        gap:4px!important;
    }

    .language-toggle-btn .language-globe{
        font-size:11px!important;
    }

    .title-box + .note-box{
        margin-top:23px!important;
    }
}

@media(max-width:390px){
    .language-switch-row{
        right:10px!important;
        bottom:-14px!important;
    }

    .language-toggle-btn{
        min-width:48px!important;
        height:24px!important;
        min-height:24px!important;
        padding:0 8px!important;
        font-size:9.8px!important;
    }

    .language-toggle-btn .language-globe{
        font-size:10.5px!important;
    }

    .title-box + .note-box{
        margin-top:21px!important;
    }
}

@media(max-width:768px){
    .title-box{
        overflow:visible!important;
        padding-right:106px!important;
        padding-bottom:18px!important;
    }

    .wa-header-btn.wa-help-slide,
    .wa-header-btn.wa-help-slide.wa-notice{
        top:8px!important;
        right:10px!important;
        width:34px!important;
        min-width:34px!important;
        height:34px!important;
        min-height:34px!important;
        border-radius:999px!important;
        box-shadow:0 6px 14px rgba(37,211,102,.26)!important;
    }

    .wa-header-btn.wa-help-slide i{
        width:34px!important;
        min-width:34px!important;
        height:34px!important;
        min-height:34px!important;
        font-size:20px!important;
    }

    .wa-header-btn.wa-help-slide .wa-help-text{
        left:40px!important;
        right:8px!important;
        height:34px!important;
        min-height:34px!important;
        line-height:34px!important;
        font-size:9.6px!important;
        transform:translateX(86px)!important;
    }

    .wa-header-btn.wa-help-slide.wa-help-open{
        width:128px!important;
        min-width:128px!important;
    }

    .wa-header-btn.wa-help-slide.wa-help-open i{
        transform:translateX(-94px)!important;
    }

    .wa-header-btn.wa-help-slide.wa-help-open .wa-help-text{
        transform:translateX(0)!important;
    }

    .wa-header-btn.wa-help-slide:not(.wa-help-open) .wa-help-text{
        transform:translateX(86px)!important;
    }

    .language-switch-row{
        top:46px!important;
        right:10px!important;
        bottom:auto!important;
        z-index:1000!important;
        width:auto!important;
        max-width:none!important;
        justify-content:flex-end!important;
    }

    .language-toggle-btn{
        min-width:42px!important;
        height:20px!important;
        min-height:20px!important;
        padding:0 7px!important;
        border-radius:999px!important;
        font-size:8.6px!important;
        gap:3px!important;
        box-shadow:0 4px 10px rgba(15,23,42,.14)!important;
    }

    .language-toggle-btn .language-globe{
        font-size:9px!important;
    }

    .title-box + .note-box{
        margin-top:15px!important;
    }
}

@media(max-width:390px){
    .title-box{
        padding-right:96px!important;
        padding-bottom:17px!important;
    }

    .wa-header-btn.wa-help-slide,
    .wa-header-btn.wa-help-slide.wa-notice{
        top:8px!important;
        right:9px!important;
        width:32px!important;
        min-width:32px!important;
        height:32px!important;
        min-height:32px!important;
    }

    .wa-header-btn.wa-help-slide i{
        width:32px!important;
        min-width:32px!important;
        height:32px!important;
        min-height:32px!important;
        font-size:19px!important;
    }

    .wa-header-btn.wa-help-slide .wa-help-text{
        left:38px!important;
        right:7px!important;
        height:32px!important;
        min-height:32px!important;
        line-height:32px!important;
        font-size:9px!important;
        transform:translateX(78px)!important;
    }

    .wa-header-btn.wa-help-slide.wa-help-open{
        width:118px!important;
        min-width:118px!important;
    }

    .wa-header-btn.wa-help-slide.wa-help-open i{
        transform:translateX(-86px)!important;
    }

    .wa-header-btn.wa-help-slide:not(.wa-help-open) .wa-help-text{
        transform:translateX(78px)!important;
    }

    .language-switch-row{
        top:43px!important;
        right:9px!important;
    }

    .language-toggle-btn{
        min-width:40px!important;
        height:19px!important;
        min-height:19px!important;
        padding:0 6px!important;
        font-size:8.2px!important;
        gap:2px!important;
    }

    .language-toggle-btn .language-globe{
        font-size:8.5px!important;
    }

    .title-box + .note-box{
        margin-top:14px!important;
    }
}

.language-switch-row{
    pointer-events:none!important;
}

.language-toggle-btn{
    pointer-events:auto!important;
    width:48px!important;
    min-width:48px!important;
    height:22px!important;
    min-height:22px!important;
    padding:0!important;
    border:0!important;
    border-radius:999px!important;
    background:transparent!important;
    color:inherit!important;
    box-shadow:none!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    cursor:pointer!important;
    line-height:1!important;
    -webkit-tap-highlight-color:transparent!important;
}

.language-toggle-btn:hover,
.language-toggle-btn:active{
    transform:translateY(-1px)!important;
    box-shadow:none!important;
}

.language-switch-track{
    position:relative!important;
    width:48px!important;
    height:22px!important;
    border-radius:999px!important;
    background:rgba(255,255,255,.96)!important;
    border:1.2px solid rgba(219,234,254,.95)!important;
    box-shadow:0 4px 11px rgba(15,23,42,.16)!important;
    display:block!important;
    overflow:hidden!important;
}

.language-switch-thumb{
    position:absolute!important;
    top:2px!important;
    left:2px!important;
    width:22px!important;
    height:16px!important;
    border-radius:999px!important;
    background:linear-gradient(135deg,#1976D2,#0D6EFD)!important;
    box-shadow:0 3px 8px rgba(25,118,210,.28)!important;
    transform:translateX(0)!important;
    transition:transform .22s ease!important;
    z-index:1!important;
}

.language-toggle-btn.is-en .language-switch-thumb{
    transform:translateX(20px)!important;
}

.language-switch-label{
    position:absolute!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    z-index:2!important;
    font-size:7.2px!important;
    font-weight:900!important;
    letter-spacing:.1px!important;
    line-height:1!important;
    transition:color .18s ease!important;
    user-select:none!important;
}

.language-switch-label-id{
    left:7px!important;
    color:#ffffff!important;
}

.language-switch-label-en{
    right:6px!important;
    color:#1e3a8a!important;
}

.language-toggle-btn.is-en .language-switch-label-id{
    color:#1e3a8a!important;
}

.language-toggle-btn.is-en .language-switch-label-en{
    color:#ffffff!important;
}

@media(max-width:768px){
    .language-switch-row{
        top:45px!important;
        right:10px!important;
        bottom:auto!important;
    }

    .language-toggle-btn{
        width:43px!important;
        min-width:43px!important;
        height:19px!important;
        min-height:19px!important;
    }

    .language-switch-track{
        width:43px!important;
        height:19px!important;
    }

    .language-switch-thumb{
        top:2px!important;
        left:2px!important;
        width:19px!important;
        height:13px!important;
    }

    .language-toggle-btn.is-en .language-switch-thumb{
        transform:translateX(20px)!important;
    }

    .language-switch-label{
        font-size:6.5px!important;
    }

    .language-switch-label-id{
        left:6px!important;
    }

    .language-switch-label-en{
        right:5px!important;
    }
}

@media(max-width:390px){
    .language-switch-row{
        top:42px!important;
        right:9px!important;
    }

    .language-toggle-btn{
        width:40px!important;
        min-width:40px!important;
        height:18px!important;
        min-height:18px!important;
    }

    .language-switch-track{
        width:40px!important;
        height:18px!important;
    }

    .language-switch-thumb{
        width:18px!important;
        height:12px!important;
    }

    .language-toggle-btn.is-en .language-switch-thumb{
        transform:translateX(18px)!important;
    }

    .language-switch-label{
        font-size:6.1px!important;
    }

    .language-switch-label-id{
        left:5.5px!important;
    }

    .language-switch-label-en{
        right:4.5px!important;
    }
}

#customPopup .rekening-detail-list{
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior:contain!important;
}

#customPopup .rekening-detail-list::-webkit-scrollbar{
    width:5px;
}

#customPopup .rekening-detail-list::-webkit-scrollbar-thumb{
    background:#cbd5e1;
    border-radius:999px;
}

#customPopup .summary-list{
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior:contain!important;
}

#customPopup .summary-list::-webkit-scrollbar{
    width:5px;
}

#customPopup .summary-list::-webkit-scrollbar-thumb{
    background:#cbd5e1;
    border-radius:999px;
}

#customPopup .rekening-detail-list,
#customPopup .summary-list{
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior:contain!important;
}

#customPopup .rekening-detail-list::-webkit-scrollbar,
#customPopup .summary-list::-webkit-scrollbar{
    width:5px;
}

#customPopup .rekening-detail-list::-webkit-scrollbar-thumb,
#customPopup .summary-list::-webkit-scrollbar-thumb{
    background:#cbd5e1;
    border-radius:999px;
}

#customPopup .rekening-detail-list{
    height:auto!important;
    max-height:156px!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior:contain!important;
    padding-right:3px!important;
}

#customPopup .rekening-detail-list::-webkit-scrollbar{
    width:5px!important;
}

#customPopup .rekening-detail-list::-webkit-scrollbar-thumb{
    background:#cbd5e1!important;
    border-radius:999px!important;
}

@media(max-width:480px){
    #customPopup .rekening-detail-list{
        max-height:160px!important;
    }
}

#customPopup .qris-payment-wrap{
    margin-top:8px;
    padding:10px;
    border-radius:14px;
    background:#ffffff;
    border:1.5px solid #dbeafe;
    text-align:center;
}

#customPopup .qris-payment-image{
    width:100%;
    max-width:245px;
    max-height:245px;
    object-fit:contain;
    border-radius:14px;
    background:#ffffff;
    border:1px solid #e2e8f0;
    padding:8px;
    display:block;
    margin:0 auto 8px;
}

#customPopup .qris-payment-name{
    color:#0f172a;
    font-size:13px;
    font-weight:900;
    line-height:1.35;
}

#customPopup .qris-payment-note{
    margin-top:7px;
    color:#475569;
    font-size:11.5px;
    font-weight:800;
    line-height:1.35;
}

#customPopup .qris-payment-empty{
    color:#dc2626;
    background:#fee2e2;
    border:1px solid #fecaca;
    border-radius:12px;
    padding:10px;
    font-size:12px;
    font-weight:900;
    line-height:1.35;
}

@media(max-width:480px){
    #customPopup .qris-payment-image{
        max-width:210px;
        max-height:210px;
    }
}

#customPopup .qris-compact-multi-info{
    display:none;
}

@media(max-width:480px){
    #customPopup.popup-qris-mode{
        align-items:center!important;
        padding:8px!important;
    }

    #customPopup.popup-qris-mode .popup-box{
        width:100%!important;
        max-width:340px!important;
        max-height:calc(100dvh - 22px)!important;
        padding:10px 10px 8px!important;
        border-radius:18px!important;
        overflow:hidden!important;
    }

    #customPopup.popup-qris-mode .popup-icon{
        width:28px!important;
        height:28px!important;
        min-width:28px!important;
        min-height:28px!important;
        margin:0 auto 4px!important;
    }

    #customPopup.popup-qris-mode .popup-icon i{
        font-size:18px!important;
    }

    #customPopup.popup-qris-mode .popup-message{
        max-height:calc(100dvh - 102px)!important;
        overflow-y:auto!important;
        -webkit-overflow-scrolling:touch!important;
        overscroll-behavior:contain!important;
        margin:0 0 7px!important;
        padding-right:2px!important;
        font-size:11px!important;
        line-height:1.25!important;
    }

    #customPopup.popup-qris-mode .rekening-box{
        padding:8px!important;
        border-radius:14px!important;
        margin:0!important;
    }

    #customPopup.popup-qris-mode .rekening-title{
        font-size:13px!important;
        margin-bottom:4px!important;
        line-height:1.15!important;
    }

    #customPopup.popup-qris-mode .rekening-total{
        font-size:20px!important;
        margin:0!important;
        line-height:1.05!important;
    }

    #customPopup.popup-qris-mode .rekening-subtitle{
        font-size:10.5px!important;
        margin:1px 0 5px!important;
        line-height:1.15!important;
    }

    #customPopup.popup-qris-mode .qris-compact-multi-info{
        display:block!important;
        margin:0 0 5px!important;
        color:#64748b!important;
        font-size:9.8px!important;
        font-weight:900!important;
        line-height:1.2!important;
        text-align:center!important;
    }

    #customPopup.popup-qris-mode .kode-unik-box{
        margin:5px 0 6px!important;
        padding:6px 7px!important;
        border-radius:10px!important;
    }

    #customPopup.popup-qris-mode .kode-unik-label{
        font-size:9px!important;
        margin-bottom:2px!important;
        gap:3px!important;
    }

    #customPopup.popup-qris-mode .kode-unik-label i{
        font-size:9px!important;
    }

    #customPopup.popup-qris-mode .kode-unik-copy-wrap{
        gap:5px!important;
        margin:1px 0!important;
    }

    #customPopup.popup-qris-mode .kode-unik-value{
        font-size:17px!important;
        padding:4px 9px!important;
        border-radius:8px!important;
        letter-spacing:.4px!important;
    }

    #customPopup.popup-qris-mode .kode-unik-copy-btn{
        font-size:10px!important;
        padding:5px 8px!important;
        border-radius:8px!important;
    }

    #customPopup.popup-qris-mode .kode-unik-note{
        margin-top:3px!important;
        font-size:8.8px!important;
        line-height:1.15!important;
    }

    #customPopup.popup-qris-mode.popup-qris-multi-mode .rekening-detail-list{
        display:none!important;
    }

    #customPopup.popup-qris-mode:not(.popup-qris-multi-mode) .rekening-detail-list{
        max-height:74px!important;
        margin:5px 0 6px!important;
        gap:4px!important;
    }

    #customPopup.popup-qris-mode .rekening-detail-card{
        padding:5px 6px!important;
        border-radius:9px!important;
        font-size:10px!important;
        line-height:1.15!important;
    }

    #customPopup.popup-qris-mode .rekening-detail-title,
    #customPopup.popup-qris-mode .rekening-detail-name,
    #customPopup.popup-qris-mode .rekening-detail-line,
    #customPopup.popup-qris-mode .rekening-detail-small{
        font-size:10px!important;
        line-height:1.15!important;
        margin-bottom:2px!important;
    }

    #customPopup.popup-qris-mode .rekening-title-bank{
        font-size:14px!important;
        margin:5px 0 6px!important;
    }

    #customPopup.popup-qris-mode .qris-payment-wrap{
        margin-top:4px!important;
        padding:6px!important;
        border-radius:12px!important;
    }

    #customPopup.popup-qris-mode .qris-payment-image{
        max-width:160px!important;
        max-height:160px!important;
        padding:4px!important;
        border-radius:11px!important;
        margin:0 auto 5px!important;
    }

    #customPopup.popup-qris-mode .qris-payment-name{
        font-size:10.8px!important;
        line-height:1.2!important;
    }

    #customPopup.popup-qris-mode .qris-payment-note{
        margin-top:3px!important;
        font-size:9.5px!important;
        line-height:1.15!important;
    }

    #customPopup.popup-qris-mode .rekening-note{
        margin-top:6px!important;
        padding:7px 8px!important;
        border-radius:10px!important;
        font-size:10.5px!important;
        line-height:1.25!important;
    }

    #customPopup.popup-qris-mode .popup-buttons{
        gap:8px!important;
        margin-top:0!important;
    }

    #customPopup.popup-qris-mode .popup-buttons button{
        min-width:78px!important;
        padding:8px 14px!important;
        font-size:12px!important;
        border-radius:10px!important;
    }
}

@media(max-width:480px) and (max-height:760px){
    #customPopup.popup-qris-mode .qris-payment-image{
        max-width:140px!important;
        max-height:140px!important;
    }

    #customPopup.popup-qris-mode .rekening-note{
        font-size:9.8px!important;
        line-height:1.18!important;
        padding:6px 7px!important;
    }

    #customPopup.popup-qris-mode .kode-unik-note{
        display:none!important;
    }
}

#customPopup .qris-payment-name{
    display:none!important;
}

#customPopup .qris-payment-wrap{
    padding:8px!important;
    overflow:hidden!important;
}

#customPopup .qris-payment-image{
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    max-height:none!important;
    object-fit:contain!important;
    border:0!important;
    padding:0!important;
    background:transparent!important;
    border-radius:10px!important;
    margin:0 auto!important;
    display:block!important;
}

@media(max-width:480px){
    #customPopup.popup-qris-mode.popup-qris-multi-mode .rekening-detail-list{
        display:flex!important;
        max-height:105px!important;
        margin:5px 0 6px!important;
        gap:4px!important;
        overflow-y:auto!important;
        -webkit-overflow-scrolling:touch!important;
        padding-right:3px!important;
    }

    #customPopup.popup-qris-mode .rekening-detail-list{
        max-height:105px!important;
        margin:5px 0 6px!important;
        gap:4px!important;
        overflow-y:auto!important;
        -webkit-overflow-scrolling:touch!important;
        padding-right:3px!important;
    }

    #customPopup.popup-qris-mode .qris-compact-multi-info{
        display:none!important;
    }

    #customPopup.popup-qris-mode .qris-payment-wrap{
        margin-top:4px!important;
        padding:6px!important;
        border-radius:12px!important;
    }

    #customPopup.popup-qris-mode .qris-payment-image{
        width:100%!important;
        max-width:100%!important;
        max-height:none!important;
        padding:0!important;
        border:0!important;
        border-radius:9px!important;
        margin:0 auto!important;
    }

    #customPopup.popup-qris-mode .rekening-title-bank{
        margin:5px 0 5px!important;
    }
}

@media(max-width:480px) and (max-height:760px){
    #customPopup.popup-qris-mode .qris-payment-image{
        width:100%!important;
        max-width:100%!important;
        max-height:none!important;
    }
}

@media(max-width:480px){
    #customPopup.popup-qris-mode .kode-unik-box{
        margin:4px 0 5px!important;
        padding:5px!important;
        border-radius:8px!important;
    }

    #customPopup.popup-qris-mode .kode-unik-label{
        font-size:9px!important;
        margin-bottom:2px!important;
        gap:3px!important;
    }

    #customPopup.popup-qris-mode .kode-unik-label i{
        font-size:9px!important;
    }

    #customPopup.popup-qris-mode .kode-unik-copy-wrap{
        gap:5px!important;
        margin:1px 0!important;
    }

    #customPopup.popup-qris-mode .kode-unik-value{
        font-size:13.5px!important;
        padding:3px 7px!important;
        border-radius:7px!important;
        letter-spacing:.4px!important;
    }

    #customPopup.popup-qris-mode .kode-unik-copy-btn{
        font-size:9px!important;
        padding:4px 7px!important;
        border-radius:7px!important;
        line-height:1!important;
    }

    #customPopup.popup-qris-mode .kode-unik-note{
        display:block!important;
        visibility:visible!important;
        margin-top:3px!important;
        font-size:7.6px!important;
        line-height:1.15!important;
    }
}

@media(max-width:480px) and (max-height:760px){
    #customPopup.popup-qris-mode .kode-unik-note{
        display:block!important;
        visibility:visible!important;
        font-size:7.2px!important;
        line-height:1.12!important;
    }
}

#sizeChartPopup{
    padding:12px!important;
    align-items:center!important;
}

#sizeChartPopup .sizechart-box{
    width:100%!important;
    max-width:900px!important;
    max-height:94vh!important;
    padding:12px!important;
    border-radius:18px!important;
    overflow:auto!important;
    background:#ffffff!important;
}

#sizeChartPopup .sizechart-image{
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    display:block!important;
    border-radius:10px!important;
}

@media(max-width:640px){
    #sizeChartPopup{
        padding:8px!important;
    }

    #sizeChartPopup .sizechart-box{
        max-width:900px!important;
        max-height:95vh!important;
        padding:8px!important;
        border-radius:16px!important;
    }

    #sizeChartPopup .sizechart-image{
        border-radius:8px!important;
    }
}

@media(max-width:380px){
    #sizeChartPopup{
        padding:6px!important;
    }

    #sizeChartPopup .sizechart-box{
        padding:7px!important;
    }
}

@media(max-width:480px){
    #customPopup.popup-qris-mode .popup-buttons{
        gap:10px!important;
        margin-top:0!important;
        justify-content:center!important;
        align-items:center!important;
    }

    #customPopup.popup-qris-mode .popup-buttons button{
        width:78px!important;
        min-width:78px!important;
        min-height:34px!important;
        padding:9px 16px!important;
        border-radius:11px!important;
        font-size:13px!important;
        line-height:1.2!important;
        display:inline-flex!important;
        align-items:center!important;
        justify-content:center!important;
    }
}

@media(max-width:480px){
    #customPopup.popup-qris-mode .popup-box{
        padding-bottom:18px!important;
    }

    #customPopup.popup-qris-mode .popup-buttons{
        margin-bottom:6px!important;
    }
}

@media(max-width:480px) and (max-height:760px){
    #customPopup.popup-qris-mode .popup-box{
        padding-bottom:15px!important;
    }

    #customPopup.popup-qris-mode .popup-buttons{
        margin-bottom:5px!important;
    }
}

@media(max-width:480px){
    #customPopup.popup-qris-mode{
        align-items:center!important;
        padding:10px 8px calc(18px + env(safe-area-inset-bottom, 0px))!important;
    }

    #customPopup.popup-qris-mode .popup-box{
        display:flex!important;
        flex-direction:column!important;
        max-height:calc(100dvh - 32px - env(safe-area-inset-bottom, 0px))!important;
        padding:10px 10px calc(14px + env(safe-area-inset-bottom, 0px))!important;
        overflow:hidden!important;
    }

    #customPopup.popup-qris-mode .popup-message{
        flex:1 1 auto!important;
        min-height:0!important;
        max-height:none!important;
        overflow-y:auto!important;
        -webkit-overflow-scrolling:touch!important;
        margin:0!important;
        padding:0 2px 10px 0!important;
        overscroll-behavior:contain!important;
    }

    #customPopup.popup-qris-mode .popup-buttons{
        flex:0 0 auto!important;
        gap:10px!important;
        margin:8px 0 0!important;
        padding:0 0 8px!important;
        justify-content:center!important;
        align-items:center!important;
        background:#ffffff!important;
    }

    #customPopup.popup-qris-mode .popup-buttons button{
        width:78px!important;
        min-width:78px!important;
        min-height:34px!important;
        padding:9px 16px!important;
        border-radius:11px!important;
        font-size:13px!important;
        line-height:1.2!important;
    }
}

@media(max-width:480px) and (max-height:760px){
    #customPopup.popup-qris-mode .popup-box{
        max-height:calc(100dvh - 28px - env(safe-area-inset-bottom, 0px))!important;
    }

    #customPopup.popup-qris-mode .popup-message{
        padding-bottom:8px!important;
    }

    #customPopup.popup-qris-mode .popup-buttons{
        padding-bottom:10px!important;
    }
}

@media(max-width:480px){
    #customPopup.popup-qris-mode{
        padding-bottom:calc(14px + env(safe-area-inset-bottom, 0px))!important;
    }

    #customPopup.popup-qris-mode .popup-box{
        max-height:calc(100dvh - 30px - env(safe-area-inset-bottom, 0px))!important;
        padding:10px 10px 0!important;
        overflow:hidden!important;
    }

    #customPopup.popup-qris-mode .popup-message{
        padding:0 2px 9px 0!important;
        margin:0!important;
        min-height:0!important;
        overflow-y:auto!important;
        -webkit-overflow-scrolling:touch!important;
    }

    #customPopup.popup-qris-mode .popup-buttons{
        flex:0 0 auto!important;
        width:100%!important;
        gap:10px!important;
        justify-content:center!important;
        align-items:center!important;
        margin:9px 0 0!important;
        padding:0 0 20px!important;
        background:#ffffff!important;
        border-radius:0 0 18px 18px!important;
    }

    #customPopup.popup-qris-mode .popup-buttons button{
        width:78px!important;
        min-width:78px!important;
        min-height:34px!important;
        padding:9px 16px!important;
        border-radius:11px!important;
        font-size:13px!important;
        line-height:1.2!important;
    }
}

@media(max-width:480px) and (max-height:760px){
    #customPopup.popup-qris-mode .popup-box{
        max-height:calc(100dvh - 24px - env(safe-area-inset-bottom, 0px))!important;
    }

    #customPopup.popup-qris-mode .popup-message{
        padding-bottom:7px!important;
    }

    #customPopup.popup-qris-mode .popup-buttons{
        margin-top:8px!important;
        padding-bottom:18px!important;
    }
}

@media(max-width:768px){
    .table-wrapper{
        margin-top:10px!important;
        overflow:visible!important;
    }

    .table-wrapper table,
    .table-wrapper tbody{
        display:block!important;
        width:100%!important;
    }

    .table-wrapper thead{
        display:none!important;
    }

    .table-wrapper tbody tr{
        position:relative!important;
        display:flex!important;
        flex-wrap:wrap!important;
        align-items:center!important;
        gap:6px 7px!important;
        width:100%!important;
        margin:0 0 10px!important;
        padding:12px!important;
        border:1px solid #e5edf8!important;
        border-radius:16px!important;
        background:#ffffff!important;
        box-shadow:0 5px 14px rgba(15,23,42,.08)!important;
    }

    .table-wrapper tbody tr.new-saved-row{
        padding-top:12px!important;
        border:1px solid rgba(25,118,210,.30)!important;
    }

    .table-wrapper tbody tr.new-saved-row::before{
        top:10px!important;
        left:auto!important;
        right:54px!important;
        font-size:9px!important;
        line-height:1!important;
        padding:4px 7px!important;
        border-radius:999px!important;
        background:#1976D2!important;
        color:#ffffff!important;
        z-index:3!important;
    }

    .table-wrapper tbody tr td{
        display:inline-flex!important;
        align-items:center!important;
        justify-content:flex-start!important;
        width:auto!important;
        min-height:0!important;
        padding:0!important;
        border:none!important;
        border-bottom:none!important;
        text-align:left!important;
        line-height:1.2!important;
        font-size:11.5px!important;
    }

    .table-wrapper tbody tr td::before{
        content:none!important;
    }

    .table-wrapper tbody tr td[data-label="No"]{
        position:absolute!important;
        top:10px!important;
        right:12px!important;
        z-index:2!important;
        padding:4px 8px!important;
        border:1px solid #bfdbfe!important;
        border-radius:999px!important;
        background:#eff6ff!important;
        color:#1976D2!important;
        font-size:10.5px!important;
        font-weight:900!important;
    }

    .table-wrapper tbody tr td[data-label="No"]::before{
        content:"#"!important;
        margin-right:2px!important;
        color:#1976D2!important;
        font-size:10.5px!important;
        font-weight:900!important;
    }

    .table-wrapper tbody tr td[data-label="Nama"]{
        order:1!important;
        flex:1 1 100%!important;
        display:block!important;
        padding-right:82px!important;
        color:#0f172a!important;
        font-size:14px!important;
        font-weight:900!important;
        white-space:nowrap!important;
        overflow:hidden!important;
        text-overflow:ellipsis!important;
    }

    .table-wrapper tbody tr td[data-label="Ukuran"],
    .table-wrapper tbody tr td[data-label="Lengan"],
    .table-wrapper tbody tr td[data-label="Kategori Umur"],
    .table-wrapper tbody tr td[data-label="Jenis Kelamin"]{
        order:2!important;
        padding:5px 8px!important;
        border:1px solid #e2e8f0!important;
        border-radius:999px!important;
        background:#f8fafc!important;
        color:#334155!important;
        font-size:11px!important;
        font-weight:850!important;
    }

    .table-wrapper tbody tr td[data-label="Nomor WhatsApp Aktif"],
    .table-wrapper tbody tr td[data-label="Waktu"]{
        order:3!important;
        margin-top:2px!important;
        color:#64748b!important;
        font-size:10.5px!important;
        font-weight:800!important;
        min-width:0!important;
    }

    .table-wrapper tbody tr td[data-label="Nomor WhatsApp Aktif"]::before{
        content:"WA:"!important;
        display:inline!important;
        margin-right:4px!important;
        color:#94a3b8!important;
        font-size:10.5px!important;
        font-weight:900!important;
    }

    .table-wrapper tbody tr td[data-label="Waktu"]::before{
        content:"Waktu:"!important;
        display:inline!important;
        margin-right:4px!important;
        color:#94a3b8!important;
        font-size:10.5px!important;
        font-weight:900!important;
    }

    .table-wrapper tbody tr td[data-label="Aksi"]{
        order:3!important;
        margin-left:auto!important;
        margin-top:2px!important;
    }

    .table-wrapper tbody tr td[data-label="Aksi"]::before{
        content:none!important;
    }

    .table-wrapper .delete-btn{
        padding:6px 10px!important;
        border-radius:10px!important;
        font-size:10.5px!important;
        line-height:1!important;
        box-shadow:0 4px 10px rgba(244,67,54,.14)!important;
    }
}

@media(max-width:390px){
    .table-wrapper tbody tr{
        gap:5px 6px!important;
        padding:10px!important;
        border-radius:14px!important;
    }

    .table-wrapper tbody tr.new-saved-row{
        padding-top:10px!important;
    }

    .table-wrapper tbody tr.new-saved-row::before{
        right:50px!important;
        top:9px!important;
        font-size:8.5px!important;
        padding:3px 6px!important;
    }

    .table-wrapper tbody tr td[data-label="No"]{
        top:8px!important;
        right:10px!important;
        font-size:10px!important;
        padding:3px 7px!important;
    }

    .table-wrapper tbody tr td[data-label="Nama"]{
        padding-right:76px!important;
        font-size:13.5px!important;
    }

    .table-wrapper tbody tr td[data-label="Ukuran"],
    .table-wrapper tbody tr td[data-label="Lengan"],
    .table-wrapper tbody tr td[data-label="Kategori Umur"],
    .table-wrapper tbody tr td[data-label="Jenis Kelamin"]{
        font-size:10.3px!important;
        padding:4px 7px!important;
    }

    .table-wrapper tbody tr td[data-label="Nomor WhatsApp Aktif"],
    .table-wrapper tbody tr td[data-label="Waktu"],
    .table-wrapper tbody tr td[data-label="Nomor WhatsApp Aktif"]::before,
    .table-wrapper tbody tr td[data-label="Waktu"]::before{
        font-size:9.8px!important;
    }

    .table-wrapper .delete-btn{
        padding:5px 9px!important;
        font-size:10px!important;
    }
}

#customPopup .payment-box{
    margin-top:8px!important;
    padding:8px!important;
    border-radius:12px!important;
}

#customPopup .payment-title{
    font-size:11.8px!important;
    margin-bottom:6px!important;
    gap:5px!important;
    line-height:1.15!important;
}

#customPopup .payment-title i{
    font-size:11.8px!important;
}

#customPopup .payment-choice{
    gap:6px!important;
}

#customPopup .payment-choice label{
    min-height:42px!important;
    padding:7px 27px 7px 7px!important;
    border-radius:10px!important;
    gap:7px!important;
}

#customPopup .payment-icon{
    width:24px!important;
    height:24px!important;
    min-width:24px!important;
    border-radius:8px!important;
    font-size:11.5px!important;
}

#customPopup .payment-text b{
    font-size:11.3px!important;
    line-height:1.12!important;
}

#customPopup .payment-text small{
    margin-top:1px!important;
    font-size:9px!important;
    line-height:1.15!important;
}

#customPopup .payment-choice label:has(input:checked)::after{
    right:7px!important;
    width:16px!important;
    height:16px!important;
    font-size:10px!important;
}

#customPopup .payment-error{
    margin-top:6px!important;
    padding:6px 7px!important;
    border-radius:8px!important;
    font-size:10px!important;
    line-height:1.25!important;
}

html[lang="en"] .table-wrapper tbody tr td[data-label="Waktu"]::before{
    content:"Time:"!important;
}

html[lang="en"] tr.new-saved-row::before,
html[lang="en"] .table-wrapper tbody tr.new-saved-row::before{
    content:"New"!important;
}

.action-button-stack{
    gap:14px!important;
}

.action-button-stack .left-buttons{
    width:100%!important;
    display:flex!important;
    flex-direction:column!important;
    gap:10px!important;
}

.action-button-stack .btn-add-order,
.action-button-stack .btn-clear-form{
    width:100%!important;
}

.action-button-stack .btn-clear-form{
    margin-top:0!important;
    min-height:46px!important;
    padding:11px 14px!important;
    border-radius:13px!important;
    background:linear-gradient(180deg,#f8fafc,#eef2f7)!important;
    color:#334155!important;
    border:1.5px solid #dbe3ee!important;
    box-shadow:0 4px 10px rgba(15,23,42,.05)!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:8px!important;
}

.action-button-stack .btn-clear-form .clear-form-icon{
    width:22px!important;
    height:22px!important;
    min-width:22px!important;
    border-radius:50%!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    background:#e2e8f0!important;
    color:#475569!important;
    font-size:12px!important;
    line-height:1!important;
}

.action-button-stack .btn-clear-form span{
    line-height:1!important;
}

.action-button-stack .btn-clear-form:hover{
    background:linear-gradient(180deg,#eef2f7,#e2e8f0)!important;
    border-color:#cbd5e1!important;
}

@media(max-width:390px){
    .action-button-stack{
        gap:12px!important;
    }

    .action-button-stack .left-buttons{
        gap:8px!important;
    }

    .action-button-stack .btn-clear-form{
        min-height:42px!important;
        padding:10px 12px!important;
        font-size:13px!important;
    }

    .action-button-stack .btn-clear-form .clear-form-icon{
        width:20px!important;
        height:20px!important;
        min-width:20px!important;
        font-size:11px!important;
    }
}

.action-button-stack .btn-add-order,
.action-button-stack .btn-clear-form{
    min-height:58px!important;
    padding:12px 16px!important;
    border-radius:13px!important;
    font-size:16px!important;
    font-weight:900!important;
    line-height:1.15!important;
    gap:10px!important;
}

.action-button-stack .btn-clear-form{
    width:100%!important;
    margin-top:0!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
}

.action-button-stack .btn-clear-form .clear-form-icon{
    width:28px!important;
    height:28px!important;
    min-width:28px!important;
    font-size:14px!important;
}

.action-button-stack .btn-clear-form span{
    font-size:16px!important;
    line-height:1.15!important;
}

@media(max-width:390px){
    .action-button-stack .btn-add-order,
    .action-button-stack .btn-clear-form{
        min-height:58px!important;
        padding:12px 16px!important;
        font-size:16px!important;
        border-radius:13px!important;
    }

    .action-button-stack .btn-clear-form .clear-form-icon{
        width:28px!important;
        height:28px!important;
        min-width:28px!important;
        font-size:14px!important;
    }

    .action-button-stack .btn-clear-form span{
        font-size:16px!important;
    }
}

.button-group.action-button-stack .left-buttons{
    gap:7px!important;
}

.button-group.action-button-stack .btn-clear-form{
    width:100%!important;
    min-height:38px!important;
    height:38px!important;
    padding:6px 10px!important;
    border-radius:8px!important;
    font-size:11.5px!important;
    font-weight:800!important;
    line-height:1!important;
    gap:6px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    box-shadow:none!important;
    animation:none!important;
    transform:none!important;
}

.button-group.action-button-stack .btn-clear-form .clear-form-icon{
    width:18px!important;
    height:18px!important;
    min-width:18px!important;
    border-radius:50%!important;
    font-size:9px!important;
    line-height:1!important;
    margin:0!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
}

.button-group.action-button-stack .btn-clear-form span{
    font-size:11.5px!important;
    line-height:1!important;
    margin:0!important;
    padding:0!important;
}

@media(max-width:768px){
    .button-group.action-button-stack .left-buttons{
        gap:7px!important;
    }

    .button-group.action-button-stack .btn-clear-form{
        min-height:37px!important;
        height:37px!important;
        padding:6px 9px!important;
        font-size:11px!important;
        border-radius:8px!important;
        gap:5px!important;
    }

    .button-group.action-button-stack .btn-clear-form .clear-form-icon{
        width:17px!important;
        height:17px!important;
        min-width:17px!important;
        font-size:8.8px!important;
    }

    .button-group.action-button-stack .btn-clear-form span{
        font-size:11px!important;
    }
}

@media(max-width:390px){
    .button-group.action-button-stack .left-buttons{
        gap:6px!important;
    }

    .button-group.action-button-stack .btn-clear-form{
        min-height:35px!important;
        height:35px!important;
        padding:5px 8px!important;
        font-size:10.2px!important;
        border-radius:8px!important;
        gap:5px!important;
    }

    .button-group.action-button-stack .btn-clear-form .clear-form-icon{
        width:16px!important;
        height:16px!important;
        min-width:16px!important;
        font-size:8px!important;
    }

    .button-group.action-button-stack .btn-clear-form span{
        font-size:10.2px!important;
    }
}

.button-group.action-button-stack .btn-clear-form{
    background:linear-gradient(180deg,#f8fafc,#f1f5f9)!important;
    color:#1e293b!important;
    border:1.5px solid #dbeafe!important;
    box-shadow:0 3px 8px rgba(15,23,42,.045)!important;
}

.button-group.action-button-stack .btn-clear-form .clear-form-icon{
    background:#e0f2fe!important;
    color:#1976D2!important;
}

.button-group.action-button-stack .btn-clear-form:hover{
    background:linear-gradient(180deg,#eef6ff,#eaf4ff)!important;
    border-color:#bfdbfe!important;
    color:#0f172a!important;
    box-shadow:0 4px 10px rgba(25,118,210,.08)!important;
    transform:translateY(-1px)!important;
}

.button-group.action-button-stack .btn-clear-form:active{
    background:#e8f2ff!important;
    transform:translateY(0)!important;
}

.button-group.action-button-stack .btn-clear-form:focus-visible{
    outline:3px solid rgba(25,118,210,.18)!important;
    outline-offset:2px!important;
}

.button-group.action-button-stack .left-buttons{
    display:flex!important;
    flex-direction:column!important;
    gap:8px!important;
}

.button-group.action-button-stack .btn-add-order,
.button-group.action-button-stack .btn-clear-form{
    min-height:37px!important;
    height:auto!important;
    padding:9px 12px!important;
    border-radius:9px!important;
    font-size:13px!important;
    line-height:1.15!important;
}

.button-group.action-button-stack .btn-clear-form{
    background:linear-gradient(180deg,#f8fafc,#f1f5f9)!important;
    color:#1e293b!important;
    border:1.5px solid #dbeafe!important;
    box-shadow:0 3px 8px rgba(15,23,42,.045)!important;
}

.button-group.action-button-stack .btn-clear-form .clear-form-icon{
    width:20px!important;
    height:20px!important;
    min-width:20px!important;
    border-radius:50%!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    background:#e0f2fe!important;
    color:#1976D2!important;
    font-size:10px!important;
}

.button-group.action-button-stack .btn-clear-form:hover{
    background:linear-gradient(180deg,#eef6ff,#eaf4ff)!important;
    border-color:#bfdbfe!important;
    color:#0f172a!important;
}

@media(max-width:390px){
    .button-group.action-button-stack .btn-add-order,
    .button-group.action-button-stack .btn-clear-form{
        min-height:36px!important;
        padding:8px 11px!important;
        font-size:12.5px!important;
    }
}

@media(max-width:768px){
    .table-wrapper tbody tr td[data-label="Nomor WhatsApp Aktif"]{
        order:3!important;
        flex:0 1 auto!important;
        margin-top:2px!important;
    }

    .table-wrapper tbody tr td[data-label="Waktu"]{
        order:4!important;
        flex:0 1 calc(100% - 90px)!important;
        width:auto!important;
        max-width:calc(100% - 90px)!important;
        margin-top:4px!important;
        white-space:nowrap!important;
    }

    .table-wrapper tbody tr td[data-label="Aksi"]{
        order:4!important;
        margin-left:auto!important;
        margin-top:0!important;
        align-self:center!important;
    }
}

@media(max-width:390px){
    .table-wrapper tbody tr td[data-label="Waktu"]{
        flex-basis:calc(100% - 82px)!important;
        max-width:calc(100% - 82px)!important;
    }
}

@media(max-width:768px){
    .table-wrapper tbody tr{
        align-items:flex-start!important;
    }

    .table-wrapper tbody tr td[data-label="Nomor WhatsApp Aktif"]{
        order:3!important;
        flex:1 1 100%!important;
        width:100%!important;
        max-width:100%!important;
        display:flex!important;
        margin-top:3px!important;
        white-space:nowrap!important;
    }

    .table-wrapper tbody tr td[data-label="Waktu"]{
        order:4!important;
        flex:1 1 100%!important;
        width:100%!important;
        max-width:100%!important;
        display:flex!important;
        margin-top:4px!important;
        padding-right:96px!important;
        white-space:nowrap!important;
        clear:both!important;
    }

    .table-wrapper tbody tr td[data-label="Aksi"]{
        position:absolute!important;
        right:18px!important;
        bottom:16px!important;
        order:99!important;
        flex:0 0 auto!important;
        width:auto!important;
        margin:0!important;
        align-self:auto!important;
    }
}

@media(max-width:390px){
    .table-wrapper tbody tr td[data-label="Waktu"]{
        padding-right:88px!important;
    }

    .table-wrapper tbody tr td[data-label="Aksi"]{
        right:16px!important;
        bottom:14px!important;
    }
}