:root{

    /* ================= BRAND ================= */
    --kai-blue:#001c7d;
    --kai-dark:#000000;
    --kai-red:#e53935;
    --kai-orange:#ff5722;
    --kai-green:#2e7d32;
    --kai-purple:#4d006c;
    --kai-yellow:#fefff5;
    --kai-white:#fff;
    --kai-lblue: #4c869c;
    --kai-gold: #d0aa00;
    /* ================= SEMANTIC ================= */
    --primary: var(--kai-blue);
    --secondary: var(--kai-red);
    --success:#2e7d32;
    --danger:#c62828;
    --warning:#ff6f00;

    /* ================= UI ================= */
    --dark:#0b1f3a;
    --muted:#6b7280;
    --bg:#f4f4f4;
    --card:#ffffff;
    --border:#e5e7eb;

    /* ================= DESIGN TOKENS ================= */
    --radius:17px;
    --shadow:0 4px 14px rgba(0,0,0,0.10);
    --transition:.2s ease;
}

/* =====================================================
   POS ENGINE + CATEGORY + PRODUCT
   ICHIBAN SUSHI FULL KIOSK SYSTEM
   CLEAN • ISOLATED • NO BOOTSTRAP CONFLICT
===================================================== */



/* LOGO HEADER */
.header .logo img{
  max-height: 60px;   /* atur tinggi logo */
  width: auto;
}


/* =====================================================
   PRODUCT GRID ENGINE
===================================================== */

.vm-products-vertical{
    display:grid !important;
    grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
    gap:14px;

    padding:14px;
    width:100%;
    background:#fafafa;
}



/* =====================================================
   POS PRO MAX PERFORMANCE (FULL BLEED FIX)
   NO BOOTSTRAP CONFLICT • FULL WIDTH STABLE GRID
===================================================== */

/* ================= ROOT ================= */
html, body{
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    overflow-x:hidden;
}

/* ================= POS APP FULL SCREEN ================= */
.pos-app{
    font-family:Arial,sans-serif;
    background:#f5f5f5;

    width:100%;
    max-width:100%;

    margin:0;
    padding:0;

    overflow-x:hidden;
}

/* =====================================================
   🔥 ROW RESET (STOP FLEX BOOTSTRAP)
===================================================== */
.pos-app .row{
    margin:0 !important;
    width:100% !important;
}

/* CHILD FIX (INI YANG BIKIN RAPAT & MISALIGN) */
.pos-app .row > *{
    width:100% !important;
    max-width:100% !important;

    padding:0 !important;
    margin:0 !important;

    flex:none !important;
}

/* =====================================================
   CATEGORY GRID (SAFE PRO FIX - NO LAYOUT BREAK)
===================================================== */

.category-view .row{
    display:flex !important;
    flex-wrap:wrap;
    gap:12px;
    margin:0 !important;
}

/* setiap item tetap behave normal bootstrap tapi dipaksa rapi */
.category-view .row > *{
    flex:0 0 calc(25% - 12px);
    max-width:calc(25% - 12px);
    box-sizing:border-box;
}

/* tablet */
@media (max-width: 992px){
    .category-view .row > *{
        flex:0 0 calc(33.333% - 12px);
        max-width:calc(33.333% - 12px);
    }
}

/* mobile */
@media (max-width: 576px){
    .category-view .row > *{
        flex:0 0 calc(50% - 12px);
        max-width:calc(50% - 12px);
    }
}

.category-view .category-item,
.category-view .vm-category{
    text-align:center;
    padding:10px;
}


/* =====================================================
   POS LAYOUT FULL SCREEN ENGINE
===================================================== */
.pos-layout{
    display:grid;

    grid-template-columns:220px 1fr 320px;

    width:100%;
    height:100vh;
}

/* CATEGORY */
.pos-category{
    background:#fff;
    overflow-y:auto;
}

/* PRODUCTS */
.pos-products{
    overflow-y:auto;
    padding:10px;
}

/* CART */
.pos-cart{
    background:#fff;
    overflow-y:auto;
}

/* =====================================================
   TOP BAR
===================================================== */

.pos-topbar{
    height:60px;
    background:#fff;

    display:flex;
    align-items:center;

    padding:0 12px;
    border-bottom:1px solid #eee;
}

#posSearch{
    width:100%;
    height:40px;

    border:1px solid #ddd;
    border-radius:10px;

    padding:0 12px;
    font-size:13px;
}


/* =====================================================
   📱 PREMIUM MOBILE MODE (ULTRA CLEAN & STABLE)
   NO CONFLICT • SMOOTH UI • PROPORTIONAL IMAGE
===================================================== */

@media (max-width: 768px){

    /* ================= LAYOUT ================= */
    .pos-layout{
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr auto;
        height: 100vh;
    }

    /* ================= CATEGORY ================= */
    .pos-category{
        display: none;
    }

    /* ================= PRODUCTS ================= */
    .pos-products{
        padding: 10px;
        padding-bottom: 48%; /* ruang cart */
        overflow-y: auto;
    }

    /* ================= CART ================= */
    .pos-cart{
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;

        height: 42%;

        background: #ffffff;
        border-top: 1px solid #e5e7eb;

        z-index: 999;

        overflow-y: auto;

        /* smooth feel */
        box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
        border-top-left-radius: var(--radius);
        border-top-right-radius: var(--radius);
    }

    /* ================= PRODUCT GRID ================= */
    .vm-products-vertical,
    .ichiban-product-grid{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }

    /* ================= CARD ================= */
    .ichiban-card{
        border-radius: 14px;
        overflow: hidden;
    }




    /* ================= TEXT ================= */
    .ichiban-name{
        font-size: 13px;
        line-height: 1.3;
        padding: 3px;
    }

    .ichiban-price{
        font-size: 13px;
        padding-bottom: 3px;
    }

    /* ================= BUTTON ================= */
    .addtocart-button{
        height: 30px;
        font-size: 12px;
        border-radius: 8px;
    }

    /* ================= CATEGORY GRID ================= */
    .category-view{
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
        padding: 10px;
    }

    /* ================= CATEGORY IMAGE ================= */
    .category-view img{
        width: 60px;
        height: 60px;
        object-fit: cover;
        border-radius: 50%;
        margin: auto;
    }
}
/* =====================================================
   POS FORM CONTROL LAYER (KIOSK MODE)
   Override Bootstrap + browser default form style
===================================================== */

.pos-app input,
.pos-app button,
.pos-app select,
.pos-app textarea{
    font-family: Arial, sans-serif !important;
    font-size: 13px !important;
    line-height: 1.2;
    margin: 0;
}

/* ================= INPUT STYLE ================= */
.pos-app input{
    height:40px;
    border:1px solid var(--kai-grey);
    border-radius:9px;
    padding:0 12px;

    border-radius:var(--radius);
    border-right:3px solid var(--kai-orange);
    border-left:3px solid var(--kai-orange);

    background:var(--kai-yellow);
    outline:none;
}

.pos-app input:focus{
    border-color:var(--kai-green);
    box-shadow:0 0 0 2px rgba(196,0,0,0.1);
}


/* ================= BUTTON STYLE ================= */
.pos-app button{
    border:none;
    cursor:pointer;
}

/* ================= SELECT STYLE ================= */
.pos-app select{
    height:40px;
    border:1px solid var(--kai-green);
    border-radius:var(--radius);
    background:#fff;
    padding:0 10px;
}

/* ================= TEXTAREA ================= */
.pos-app textarea{
    border:1px solid var(--kai-green);
    border-radius:var(--radius);
    padding:10px;
}
/* =====================================================
   BOOTSTRAP CONTAINER FULL KILL (POS MODE ONLY)
===================================================== */

/* MATIKAN SEMUA CONTAINER LIMIT */
.pos-app .container,
.pos-app .container-fluid,
.pos-app .container-sm,
.pos-app .container-md,
.pos-app .container-lg,
.pos-app .container-xl,
.pos-app .container-xxl{
    width:100% !important;
    max-width:100% !important;

    margin:0 !important;
    padding:0 !important;
}
.ichiban-pos{
    padding:12px;
    background:#f5f5f5;
}

/* =====================================================
   HEADER
===================================================== */
.ichiban-title{
    font-size:18px;
    font-weight:700;
    margin-bottom:10px;
}

/* GRID */
.ichiban-category-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(110px,1fr));
    gap:12px;
    padding:10px;
}

/* SKELETON */
.ichiban-cat.skeleton{
    background:#eee;
    position:relative;
    overflow:hidden;
}

.ichiban-cat.skeleton::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
    animation:shimmer 1.2s infinite;
}


/* FILTER */
.hidden{
    display:none !important;
}

/* CATEGORY ITEM */
.ichiban-cat{
    background:var(--kai-blue);

    border-radius:var(--radius);
    border-top:3px solid var(--kai-orange);
    border-bottom:3px solid var(--kai-orange);

    padding:6px 3px;

    text-align:center;
    text-decoration:none;

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

    min-height:130px;

    box-shadow:0 2px 6px rgba(0,0,0,.06);

    transition:
        transform .15s ease,
        box-shadow .15s ease;
}
.ichiban-cat:hover{
    transform:translateY(-2px);
    box-shadow:0 4px 12px rgba(0,0,0,0.10);
}

/* =========================
   CATEGORY IMAGE (SAFE SCOPED)
========================= */
.ichiban-category-grid .cat-img{
    width:99px;
    height:99px;
    border-radius:50%;
    overflow:hidden;

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

    background:var(--kai-gold);
    margin-bottom:0px;

    position:relative;
    box-shadow:0 2px 6px rgba(0,0,0,0.08);
}

.ichiban-category-grid .cat-img img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;

    display:block;
    transition:transform 0.25s ease;
}

/* hover only device that supports hover */
@media (hover: hover){
    .ichiban-category-grid .cat-img:hover img{
        transform:scale(1.08);
    }
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 480px){
    .ichiban-category-grid .cat-img{
        width:70px;
        height:70px;
    }
}

/* LOADING STATE */
.ichiban-category-grid .cat-img.loading{
    background:linear-gradient(90deg,#eee 25%,#f5f5f5 37%,#eee 63%);
    background-size:400% 100%;
    animation:shimmer 1.2s ease infinite;
}

@keyframes shimmer{
    0%{ background-position:100% 0; }
    100%{ background-position:0 0; }
}

/* CATEGORY NAME */
.cat-name{
    font-size:13px;
    font-weight:600;
    color:var(--kai-gold);

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;

    width:100%;
}

/* =====================================================
   PRODUCT GRID
===================================================== */
.ichiban-product-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
    gap:12px;
}

/* =====================================================
   PRODUCT CARD
===================================================== */
.ichiban-card{
    background:var(--kai-dark);
    border-radius:14px;
    overflow:hidden;

    box-shadow:0 2px 10px rgba(0,0,0,0.06);

    display:flex;
    flex-direction:column;

    position:relative; /* 🔥 penting kalau mau efek tambahan nanti */
}

/* =====================================================
   IMAGE ENGINE (ULTRA SAFE)
===================================================== */

.ichiban-img{
    width:100%;
    aspect-ratio:1 / 1;

    overflow:hidden;

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

    background:var(--kai-yellow);

    position:relative;
}

.ichiban-img img{
    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center;

    display:block;
}

/* =====================================================
   🔥 STOCK BADGE
===================================================== */
.stock-badge{
    position:absolute;
    top:6px;
    right:6px;
    z-index:10;
}

.stock{
    font-size:12px;
    padding:4px 7px;
    border-radius:6px;
    color:#fff;
    font-weight:700;
    display:inline-block;

    box-shadow:0 2px 6px rgba(0,0,0,0.25);
}

.stock.ready{
    background:#4caf50;
}

.stock.low{
    background:#ff9800;
}

.stock.out{
    background:#f44336;
}

/* =====================================================
   NAME
===================================================== */
.ichiban-name{
    font-size:13px;
    font-weight:600;

    padding:8px;
    text-align:center;
}

/* =====================================================
   PRICE
===================================================== */
.ichiban-price{
    padding:0 8px 6px;

    font-weight:700;
    color:var(--kai-orange);

    text-align:center;
}

/* =====================================================
   CART
===================================================== */
.ichiban-cart{
    margin-top:auto;

    display:flex;
    justify-content:center;
}

.ichiban-cart button,
.addtocart-button{
    width:100%;
    height:38px;

    border:none;
    border-radius:10px;

    background:linear-gradient(180deg,var(--kai-yellow),var(--kai-yellow));
    color:var(--kai-orange);

    font-size:13px;
    font-weight:700;

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

    transition:.2s ease;
}

.addtocart-button:hover{
    opacity:0.92;
    transform:scale(1.01);
}

/* =====================================================
   CART DROPDOWN
===================================================== */
.dropdown-menu,
.vmCartModule .dropdown-menu,
.minicart .dropdown-menu{
    width:220px !important;
    max-height:320px !important;
    overflow-y:auto !important;

    padding:8px !important;
    border-radius:12px;

    box-shadow:0 6px 18px rgba(0,0,0,0.12);
}

/* CART ITEM */
.dropdown-menu .cart-item,
.vmCartModule .cart-item{
    display:flex;
    gap:8px;

    padding:6px 0;
    border-bottom:1px solid #eee;
}

/* =====================================================
   🖼️ ICHIBAN CART IMAGE ENGINE
   CLEAN • SCOPED • NO BOOTSTRAP CONFLICT
   VIRTUEMART SAFE VERSION
===================================================== */

/* =====================================================
   CART WRAPPER SAFETY
===================================================== */

.pos-app .vmCartModule{
    position:relative;
    overflow:visible;
}

/* box sizing stability */
.pos-app .vmCartModule *,
.pos-app .vmCartModule *::before,
.pos-app .vmCartModule *::after{
    box-sizing:border-box;
}

/* =====================================================
   PREMIUM CART IMAGE ENGINE
===================================================== */

.pos-app .vmCartModule .dropdown-menu img,
.pos-app .vmCartModule .vmCartList img,
.pos-app .vmCartModule .cart-item img,
.pos-app .vmCartModule .product_row img{

    /* ================= SIZE LOCK ================= */
    width:42px !important;
    height:42px !important;

    min-width:42px !important;
    min-height:42px !important;

    max-width:42px !important;
    max-height:42px !important;

    /* ================= IMAGE FIT ================= */
    object-fit:cover !important;
    object-position:center !important;

    display:block !important;

    /* ================= FLEX SAFE ================= */
    flex-shrink:0 !important;

    /* ================= VISUAL ================= */
    border-radius:10px !important;

    background:#f8fafc !important;


    /* ================= RENDER PERFORMANCE ================= */
    transform:translateZ(0);
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;

    /* ================= ANIMATION ================= */
    transition:
        transform .22s ease,
        box-shadow .22s ease,
        opacity .2s ease;

    /* ================= SHADOW ================= */
    box-shadow:
        0 1px 2px rgba(0,0,0,.05),
        0 4px 10px rgba(0,0,0,.06);
}

/* =====================================================
   HOVER EFFECT
===================================================== */

@media (hover:hover){

    .pos-app .vmCartModule .cart-item:hover img,
    .pos-app .vmCartModule .product_row:hover img{

        transform:scale(1.05);

        box-shadow:
            0 4px 12px rgba(0,0,0,.10),
            0 10px 20px rgba(0,0,0,.08);
    }
}

/* =====================================================
   MOBILE OPTIMIZATION
===================================================== */

@media (max-width:768px){

    .pos-app .vmCartModule .dropdown-menu img,
    .pos-app .vmCartModule .vmCartList img,
    .pos-app .vmCartModule .cart-item img,
    .pos-app .vmCartModule .product_row img{

        width:38px !important;
        height:38px !important;

        min-width:38px !important;
        min-height:38px !important;

        max-width:38px !important;
        max-height:38px !important;

        border-radius:8px !important;
    }
}

/* =====================================================
   FALLBACK IMAGE
===================================================== */

.pos-app .vmCartModule img[src=""],
.pos-app .vmCartModule img:not([src]){

    opacity:.35;

    object-fit:contain !important;

    padding:6px;

    background:#f1f5f9 !important;
}

/* =====================================================
   CART ITEM ALIGNMENT
===================================================== */

.pos-app .vmCartModule .cart-item,
.pos-app .vmCartModule .product_row{

    display:flex;
    align-items:center;
    gap:8px;
}

/* =====================================================
   PRODUCT CARD ENGINE
   SAFE SCOPED VERSION
===================================================== */

.pos-app .vm-product-card,
.pos-app .vm-product,
.pos-app .ichiban-product-grid .product{

    background:var(--kai-yellow);

    border-radius:12px;

    padding:8px;

    min-height:140px;

    display:flex;
    flex-direction:column;

    box-shadow:0 1px 4px rgba(0,0,0,.06);

    transition:
        transform .15s ease,
        box-shadow .15s ease;
}

/* =====================================================
   PRODUCT CARD HOVER
===================================================== */

@media (hover:hover){

    .pos-app .vm-product-card:hover,
    .pos-app .vm-product:hover,
    .pos-app .ichiban-product-grid .product:hover{

        transform:translateY(-3px);

        box-shadow:
            0 10px 22px rgba(0,0,0,.10);
    }
}

/* =====================================================
   HIDE UNUSED VM ELEMENTS
===================================================== */

.pos-app .vm-product .product-details,
.pos-app .vm-product .vm-details-button,
.pos-app .vm-product .product-fields{

    display:none !important;
}

/* =====================================================
   PREVENT IMAGE DISTORTION INSIDE PRODUCT
===================================================== */

.pos-app .vm-product img,
.pos-app .vm-product-card img{

    width:100%;
    height:auto;

    display:block;

    object-fit:cover;
}

/* =====================================================
   TEXT OVERFLOW FIX
===================================================== */

.pos-app .vm-product h4,
.pos-app .vm-product-card h4{

    overflow:hidden;
    text-overflow:ellipsis;

    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
}

/* =====================================================
   SAFETY RESET
   PREVENT BOOTSTRAP STRETCH
===================================================== */

.pos-app .vmCartModule .dropdown-menu{

    min-width:unset !important;
    overflow-x:hidden !important;
}





/* =====================================================
   POS TYPOGRAPHY LOCK (ANTI BOOTSTRAP CONFLICT)
===================================================== */

.pos-app h4,
.ichiban-pos h4,
.vm-product h4,
.product h4{
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;

    margin: 4px 0 !important;
    color: #333 !important;
}

/* =====================================================
   CART DROPDOWN / MINICART LAYER FIX (KIOSK CLEAN VERSION)
===================================================== */

.vmCartModule{
    position:relative !important;
    z-index:9999 !important;
    overflow:visible !important;
}

/* box sizing safety */
.vmCartModule *{
    box-sizing:border-box;
}

/* =====================================================
   DROPDOWN CORE (HARD STABLE FIX)
===================================================== */

.vmCartModule .vmCartList,
.vmCartModule .dropdown-menu,
.vmCartModule .dropdown-menu.show,
.vmCartModule .cart-popup,
.vmCartModule .vm-minicart{

    position:absolute !important;
    top:100% !important;
    right:0 !important;
    left:auto !important;

    z-index:999999 !important;

    /* 🔥 FIX UTAMA: jangan lebar */
    width:240px !important;
    min-width:240px !important;
    max-width:240px !important;

    /* safety mobile */
    max-width:calc(100vw - 12px) !important;

    margin-top:8px !important;

    padding:8px !important;

    border-radius:12px !important;

    background:#fff !important;

    box-shadow:0 10px 22px rgba(0,0,0,0.12) !important;

    transform:none !important;

    overflow-y:auto !important;
    overflow-x:hidden !important;

    max-height:300px !important;
}

/* =====================================================
   COMPACT ITEM STYLE (BIAR TIDAK TERASA BESAR)
===================================================== */

.vmCartModule .cart-item,
.vmCartModule .product_row{

    display:flex;
    gap:6px;

    padding:5px 0 !important;
    border-bottom:1px solid #f1f5f9 !important;
}



/* =====================================================
   TEXT UNIFORM (ANTI BEDA FONT)
===================================================== */

.vmCartModule,
.vmCartModule *{

    font-size:12px !important;
    line-height:1.25 !important;
}

/* product name */
.vmCartModule .product-name,
.vmCartModule .product_name{
    font-size:12px !important;
    font-weight:600 !important;
}

/* price & subtotal */
.vmCartModule .price,
.vmCartModule .subtotal,
.vmCartModule .subtotal_with_tax,
.vmCartModule .money{

    font-size:12px !important;
    font-weight:700 !important;
    white-space:nowrap;
    color:#c40000;
}

/* qty badge */
.vmCartModule .quantity{
    font-size:10px !important;
    padding:2px 6px;
}

/* =====================================================
   KILL BOOTSTRAP DROPDOWN DEFAULT WIDTH
===================================================== */

.dropdown-menu{
    min-width:unset !important;
}


/* =====================================================
   OPTIONAL: LIMIT VM POPUP (ONLY CART)
===================================================== */

/* target popup VirtueMart add to cart saja */
body.com_virtuemart .facebox,
body.com_virtuemart .fancybox-wrap{
    max-width:420px !important;
    margin:auto !important;
}




/* =====================================================
   SAFETY LAYER (PREVENT FULLSCREEN POPUP BUG)
===================================================== */

.pos-popup{
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 99999;
    opacity: 0;
    transform: translateY(-10px);
    transition: .2s ease;
}

.pos-popup.show{
    opacity: 1;
    transform: translateY(0);
}

.pos-popup-box{
    background: #111;
    color: #fff;
    padding: 10px 14px;
    border-radius: 10px;
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 13px;
    box-shadow: 0 10px 25px rgba(0,0,0,.2);
}

.pos-popup-icon{
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #2ecc71;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size: 12px;
}
.pos-app a{
    color:inherit;
    text-decoration:none;
}
.pos-filter-bar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: #f5f5f5;
    padding: 10px;
    border-bottom: 1px solid #eee;
}
/* FORCE TRUE MODAL (ANTI JATUH KE BAWAH) */
#cartModal{
    position:fixed !important;
    inset:0 !important;

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

    padding:15px;

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

    z-index:999999 !important;

    opacity:0;
    visibility:hidden;
}

#cartModal.show{
    opacity:1;
    visibility:visible;
}
/* =====================================================
   VIRTUEMART MODAL CONTROL
   SAFE SCOPED VERSION • NO GLOBAL CONFLICT
   ONLY INSIDE POS SYSTEM
===================================================== */

/* =====================================================
   DISABLE VM DEFAULT POPUPS (POS ONLY)
===================================================== */

.pos-app .vmCartNotification,
.pos-app .vm-notification,
.pos-app .vm-popup,
.pos-app .vm-dialog,
.pos-app #facebox,
.pos-app .fancybox-container,
.pos-app .fancybox-wrap,
.pos-app .fancybox-overlay{

    display:none !important;

    opacity:0 !important;
    visibility:hidden !important;

    pointer-events:none !important;

    z-index:-1 !important;
}

/* =====================================================
   PREVENT VM INJECTED POPUP INSIDE POS
===================================================== */

.pos-app > .vmCartNotification,
.pos-app > .vm-notification,
.pos-app > .vm-popup,
.pos-app > #facebox,
.pos-app > .fancybox-container{

    display:none !important;
}

/* =====================================================
   KEEP CUSTOM CART MODAL ACTIVE
===================================================== */

.pos-app #cartModal{
    display:flex;
    z-index:999999 !important;
}

/* =====================================================
   🔥 FORCE ONLY ONE MODAL SYSTEM (YOUR CUSTOM MODAL)
===================================================== */

#cartModal {
    z-index: 999999 !important;
    position: fixed !important;
}

/* pastikan tidak ketimpa modal lain */
.modal-open .vmCartNotification,
.modal-open .bootstrap-dialog,
.modal-open .fancybox-container {
    display: none !important;
}

.vmCartNotification,
.fancybox-container,
.fancybox-wrap,
.fancybox-overlay,
#facebox,
.bootstrap-dialog,
.vm-popup,
.vm-dialog {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* ================= CART SLIDE ================= */

.pos-cart-sheet{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;

    height: 60%;
    max-height: 480px;

    background: #fff;

    border-top-left-radius: 18px;
    border-top-right-radius: 18px;

    box-shadow: 0 -10px 30px rgba(0,0,0,0.2);

    transform: translateY(85%);
    transition: .3s ease;

    z-index: 999999;

    display: flex;
    flex-direction: column;
}

.pos-cart-sheet.show{
    transform: translateY(0);
}

/* HANDLE */
.pos-cart-handle{
    width: 40px;
    height: 5px;
    background: #ddd;
    border-radius: 10px;
    margin: 8px auto;
}

/* HEADER */
.pos-cart-header{
    display: flex;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid #eee;
}

/* BODY */
.pos-cart-body{
    padding: 12px;
    flex: 1;
}

/* ACTION */
.pos-cart-actions{
    margin-top: 15px;
    display: flex;
    gap: 10px;
}

.btn-continue,
.btn-cart{
    flex: 1;
    height: 40px;
    border-radius: 10px;
    border: none;
}

.btn-continue{
    background: #eee;
}

.btn-cart{
    background: #e53935;
    color: #fff;
}

/* =========================================================
   FORCE UNIFORM FONT SYSTEM (CART + DROPDOWN)
========================================================= */

.vm-cart-items,
.dropdown-menu{

    font-size:12px !important;
    line-height:1.3;
}

/* semua cell table ikut standar ini */
.vm-cart-items td,
.vm-cart-items th{

    font-size:12px !important;
}

/* harga harus selalu konsisten */
.money,
.price,
.subtotal,
.total,
.subtotal_with_tax{

    font-size:12px !important;
    font-weight:600;

    white-space:nowrap;
}

/* dropdown price fix */
.dropdown-menu .price,
.dropdown-menu .money,
.dropdown-menu .subtotal{

    font-size:12px !important;
    font-weight:600;
}

/* product name jangan beda-beda */
.product_name a{

    font-size:12px !important;
}

/* quantity badge konsisten */
.quantity{

    font-size:12px !important;
}
/* =========================================
   MOBILE OVERFLOW FIX
========================================= */

html,
body{
    overflow-x:hidden !important;
    max-width:100%;
}

/* =========================================
   BOOTSTRAP ROW FIX
========================================= */

.row{
    margin-left:0 !important;
    margin-right:0 !important;
}

/* =========================================
   CONTAINER FIX
========================================= */

.container,
.container-fluid{
    padding-left:10px !important;
    padding-right:10px !important;
    overflow:hidden;
    max-width:100%;
}

/* =========================================
   INPUT GROUP FIX
========================================= */

.input-group{
    width:100%;
    flex-wrap:nowrap;
}

.input-group > .form-control,
.input-group > .form-select{
    width:100% !important;
    min-width:0 !important;
    flex:1 1 auto !important;
}

/* =========================================
   SEARCH FIX
========================================= */

.vmbasic-search,
.vmbasic-search form{
    width:100%;
    max-width:100%;
    overflow:hidden;
}

.vmbasic-search input{
    width:100% !important;
    max-width:100%;
    box-sizing:border-box;
    padding-right:50px;
    border-radius:var(--radius) !important;
}

/* =========================================
   SEARCH ICON FIX
========================================= */

.vmbasic-search button,
.vmbasic-search .btn{
    flex:0 0 auto;
    width:44px;
    min-width:44px;
}

/* =========================================
   CARD FIX
========================================= */

.card{
    overflow:hidden;
    max-width:100%;
}