:root{

    /* ================= BRAND ================= */
    --kai-blue:#001c7d;
    --kai-dark:#000000;
    --kai-red:#e53935;
    --kai-orange:#ff5722;
    --kai-green:#2e7d32;
    --kai-purple:#4d006c;
    --kai-white:#fff;
    --kai-lblue:#4c869c;
    --kai-gold:#d0aa00;
    --kai-yellow:#fefff5;
    --kai-grey:#f1f5f9;
    --kai-lgreen:#8BC34A;
    --kai-dgrey:#b3b3b3;
    --kai-transparent:transparent;
    /* ================= 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: 70px;   /* atur tinggi logo */
  width: auto;
}



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

/* ================= ROOT ================= */


/* ================= 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;
}

/* =========================================
   SAFE BOOTSTRAP RESET
   ONLY POS AREA
========================================= */

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

.pos-app .container,
.pos-app .container-fluid{
    padding-left:10px !important;
    padding-right:10px !important;
}

/* JANGAN GLOBAL */
.pos-app .dropdown-menu{
    min-width:unset !important;
}

/* =====================================================
   CATEGORY GRID PREMIUM SAFE MOBILE
   ULTRA CLEAN • NO DOUBLE • NO OVERFLOW
===================================================== */

/* wrapper */
.category-view{
    width:100%;
    max-width:100%;
    overflow:hidden !important;
    box-sizing:border-box;
}

/* =========================================
   ROW RESET
========================================= */

.category-view .row{

    display:flex !important;
    flex-wrap:wrap !important;

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

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

    gap:12px;

    overflow:hidden;
    box-sizing:border-box;
}

/* =========================================
   KILL BOOTSTRAP COLUMN CONFLICT
========================================= */

.category-view .row > *,
.category-view .row > .col,
.category-view .row > [class*="col-"]{

    position:relative;

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

    min-width:0 !important;

    box-sizing:border-box;

    flex:0 0 calc(25% - 9px) !important;
    max-width:calc(25% - 9px) !important;

    width:calc(25% - 9px) !important;
}



/* =========================================
   CATEGORY CARD
========================================= */

.category-view .category-item,
.category-view .vm-category{

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

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

    text-align:center;

    padding:10px;

    border-radius:14px;

    box-sizing:border-box;

    overflow:hidden;
}

/* =========================================
   IMAGE SAFETY
========================================= */

.category-view img{

    max-width:100%;
    height:auto;

    display:block;

    object-fit:cover;
}

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

.category-view .cat-name,
.category-view .category-name{

    width:100%;

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

/* =====================================================
   POS LAYOUT FULLSCREEN SAFE
   MOBILE STABLE VERSION
===================================================== */

.pos-layout{

    display:grid;

    grid-template-columns:220px minmax(0,1fr) 320px;

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

    min-height:100vh;

    overflow:hidden;
}

/* CATEGORY */
.pos-category{

    background:var(--kai-yellow);

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

    min-width:0;
}

/* PRODUCTS */
.pos-products{

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

    padding:10px;

    min-width:0;
}

/* CART */
.pos-cart{

    background:#fff;

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

    min-width:0;
}

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

.pos-topbar{

    height:60px;

    background:#fff;

    display:flex;
    align-items:center;

    padding:0 12px;

    border-bottom:1px solid #eee;

    width:100%;

    box-sizing:border-box;
}






/* =====================================================
   📱 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);
    }



    /* ================= 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: 14px !important;
    font-weight: 500px;
    line-height: 1.7;
    margin: 14;
}




/* ================= 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(99px,1fr));
    gap:9px;
    padding:9px;
}

/* SKELETON */
.ichiban-cat.skeleton{
    background:var(--kai-yellow);
    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{
    width:100%;
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    box-sizing:border-box;
    background:var(--kai-dark);
    border-radius:var(--radius);
    border-top:3px solid var(--kai-red);
    border-bottom:3px solid var(--kai-red);
    padding:9px 3px;
    text-decoration:none;
    min-height:99px;
    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
========================= */

.ichiban-category-grid .cat-img{

    width:70px;
    height:70px;
    border-radius:50%;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:6px;
    position:relative;
    box-shadow:
        0 2px 8px rgba(0,0,0,.08);
    flex-shrink:0;
}

.ichiban-category-grid .cat-img img{

    width:100%;
    height:100%;

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

    display:block;

    transition:transform .25s ease;

}

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

@media (hover:hover){

    .ichiban-category-grid .cat-img:hover img{

        transform:scale(1.08);

    }

}

/* =========================
   CATEGORY NAME
========================= */

.cat-name{

    width:100%;

    font-size:14px;

    font-weight:500;

    line-height:1.2;

    color:var(--kai-gold);

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

}

/* =========================
   MOBILE EXTRA SMALL
========================= */

@media(max-width:480px){

    .ichiban-category-grid{

        gap:8px;

        padding:6px;

    }

    .ichiban-category-grid .cat-img{

        width:70px;
        height:70px;

    }

    .cat-name{

        font-size:13px;

    }

}

/* =========================
   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;
    }

}

/* =========================================================
   PRODUCT GRID 2 COLUMN
   MOBILE PREMIUM • CLEAN • RESPONSIVE
========================================================= */

/* ================= PRODUCT WRAPPER ================= */

.vm-products-vertical,
.ichiban-product-grid{

    display:grid !important;

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

    gap:10px;

    width:100%;

    align-items:start;

}

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

.ichiban-card,
.vm-product,
.vm-product-card{

    width:100%;

    min-width:0;

    border-radius:var(--radius);

    overflow:hidden;

    box-sizing:border-box;

}




/* =========================================================
   TABLET+
========================================================= */

@media(min-width:768px){

    .vm-products-vertical,
    .ichiban-product-grid{

        grid-template-columns:repeat(auto-fill,minmax(180px,1fr));

    }

}

/* =====================================================
   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)
===================================================== */
/* =========================================================
   IMAGE FIX
========================================================= */
.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:11px;
    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;
}



/* =====================================================
   PRICE
===================================================== */

/* =====================================================
   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-red);

    font-size:14px;
    font-weight:500;

    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{

    width:64px !important;
    height:64px !important;

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

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

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

    display:block !important;

    flex-shrink:0 !important;

    border-radius:14px !important;

    background:#f8fafc !important;

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

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

/* =====================================================
   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 CART + PRODUCT PREMIUM
   GOFOOD / GRAB STYLE
   CLEAN • SOFT • MODERN
===================================================== */

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

@media (max-width:768px){

    /* ================= CART IMAGE ================= */

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

        width:64px !important;
        height:64px !important;

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

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

        border-radius:14px !important;

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

        background:#fff !important;

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

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

    /* hover mobile feel */
    .pos-app .vmCartModule .cart-item:active img{
        transform:scale(.97);
    }

    /* ================= DROPDOWN WIDTH ================= */

    .vmCartModule .vmCartList,
    .vmCartModule .dropdown-menu,
    .vmCartModule .dropdown-menu.show{

        width:290px !important;
        min-width:290px !important;
        max-width:290px !important;

        padding:10px !important;

        border-radius:18px !important;

        background:#ffffff !important;

        box-shadow:
            0 12px 30px rgba(0,0,0,.12);

        max-height:72vh !important;
    }

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

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

        display:flex;
        align-items:flex-start;

        gap:12px;

        padding:10px 0 !important;

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

    /* ================= PRODUCT TEXT ================= */

    .vmCartModule .product-name,
    .vmCartModule .product_name{

        font-size:13px !important;
        font-weight:700 !important;
        line-height:1.35 !important;

        color:#222 !important;
    }

    /* ================= PRICE ================= */

    .vmCartModule .price,
    .vmCartModule .money,
    .vmCartModule .subtotal{

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

        color:var(--kai-red) !important;
    }

    /* ================= QUANTITY ================= */

    .vmCartModule .quantity{

        font-size:12px !important;

        color:#666 !important;
    }
}

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

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

    opacity:.4;

    object-fit:contain !important;

    padding:10px;

    background:#f1f5f9 !important;

    border-radius:14px !important;
}

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

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

    display:flex;

    align-items:flex-start;

    gap:12px;
}

/* =====================================================
   KILL BOOTSTRAP IMG-THUMBNAIL
   MINICART ONLY
===================================================== */

.pos-app .vmCartModule .img-thumbnail,
.pos-app .vmCartModule img.img-thumbnail{

    padding:0 !important;

    background:transparent !important;

    border:none !important;

    border-radius:16px !important;

    width:64px !important;
    height:64px !important;

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

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

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

    display:block !important;

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

    overflow:hidden !important;
}
/* =====================================================
   CART THUMBNAIL BOX FIX
   PREMIUM MOBILE VERSION
===================================================== */

.pos-app .vmCartModule .cart-item > div:first-child,
.pos-app .vmCartModule .product_row > div:first-child,
.pos-app .vmCartModule .cart-images,
.pos-app .vmCartModule .product-image{

    width:72px !important;
    min-width:72px !important;
    max-width:72px !important;

    height:72px !important;

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

    overflow:hidden;

    border-radius:16px;

    background:#fff;

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

    flex-shrink:0;
}

/* =====================================================
   PRODUCT CARD ENGINE
===================================================== */

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

    background:var(--kai-yellow);

    border-radius:var(--radius);

    padding:10px;

    min-height:140px;

    display:flex;
    flex-direction:column;

    overflow:hidden;

    border:none solid rgba(0,0,0,.04);



    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s 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(-4px);

        border-color:rgba(255,87,34,.18);


    }
}
/* =====================================================
   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;
}

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

.pos-app h4,
.ichiban-pos h4,
.vm-product h4,
.product h4{
    font-size: 13px !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:290px !important;
    min-width:290px !important;
    max-width:290px !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:600px !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:12px !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;
}


/* =====================================================
   VIRTUEMART MODAL CONTROL
   SAFE SCOPED VERSION • NO GLOBAL CONFLICT
   ONLY INSIDE POS SYSTEM
===================================================== */



/* =====================================================
   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;
}



/* ================= 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{
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    overflow-x: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;
}

.vmbasic-search input {
    border-color: var(--kai-grey);
    height: 40px;
}

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

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

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

.card{
    overflow:hidden;
    max-width:100%;
}
/* =========================================
   LOGIN PREMIUM — ALL IN ONE
========================================= */

.mod-login{
    width:100%;
}

/* wrapper utama */
.mod-login__userdata{
    display:flex;
    flex-direction:column;
    gap:14px;
    width:100%;
    padding:20px;
    background:#ffffff;
    border:1px solid #e5e7eb;
    border-radius:20px;
    box-shadow:
        0 4px 20px rgba(0,0,0,.04),
        0 1px 2px rgba(0,0,0,.03);
}

/* paksa bootstrap inline mati */
.mod-login__userdata .d-inline-flex,
.mod-login__userdata .d-inline-block{
    display:block !important;
    width:100%;
}

/* setiap block */
.mod-login__userdata .form-group{
    width:100%;
    margin:0 !important;
}

/* input container */
.mod-login__userdata .input-group{
    display:flex;
    align-items:center;
    width:100%;
    background:#fff;
    border:1px solid #dfe3ea;
    border-radius:14px;
    overflow:hidden;
    transition:all .2s ease;
}

/* focus effect */
.mod-login__userdata .input-group:focus-within{
    border-color:#4f46e5;
    box-shadow:0 0 0 4px rgba(79,70,229,.08);
}

/* input */
.mod-login__userdata .form-control{
    border:none !important;
    box-shadow:none !important;
    background:transparent !important;
    height:52px;
    padding:0 16px;
    font-size:15px;
    color:#111827;
}

/* placeholder */
.mod-login__userdata .form-control::placeholder{
    color:#9ca3af;
}

/* icon kanan */
.mod-login__userdata .input-group-text,
.mod-login__userdata .input-password-toggle{
    border:none !important;
    background:transparent !important;
    min-width:52px;
    color:#6b7280;
    box-shadow:none !important;
}

/* remember me */
.mod-login__remember{
    padding-left:4px;
    font-size:14px;
    color:#4b5563;
}

/* checkbox */
.mod-login__remember .form-check{
    margin:0;
}

/* tombol passkey */
.plg_system_webauthn_login_button{
    width:100%;
    height:50px;
    border-radius:14px !important;
    background:#f5f7fb !important;
    border:1px solid #dfe3ea !important;
    color:#111827 !important;
    font-weight:600;
    transition:.2s ease;
}

/* hover passkey */
.plg_system_webauthn_login_button:hover{
    background:#eef2ff !important;
    border-color:#c7d2fe !important;
}

/* tombol login */
.login-button{
    width:100%;
    height:52px;
    border:none !important;
    border-radius:14px !important;
    background:#111827 !important;
    color:#fff !important;
    font-size:15px;
    font-weight:600;
    transition:all .2s ease;
}

/* hover login */
.login-button:hover{
    transform:translateY(-1px);
    opacity:.96;
}

/* active */
.login-button:active{
    transform:scale(.99);
}

/* mobile */
@media(max-width:768px){

    .mod-login__userdata{
        padding:16px;
        gap:12px;
        border-radius:16px;
    }

    .mod-login__userdata .form-control{
        height:48px;
        font-size:14px;
    }

    .login-button,
    .plg_system_webauthn_login_button{
        height:48px;
    }

}
/* =========================================
   CUSTOM CHECKBOX PREMIUM
========================================= */

.mod-login__remember{
    display:flex !important;
    align-items:center;
    width:90%;
}

.mod-login__remember .form-check{
    display:flex;
    align-items:center;
    gap:10px;
    margin:0;
    padding:0;
}

/* checkbox */
.mod-login__remember .form-check-input{
    width:20px;
    height:20px;
    margin:0 !important;
    border:2px solid #cbd5e1;
    border-radius:6px;
    background-color:#fff;
    cursor:pointer;
    box-shadow:none !important;
    transition:.2s ease;
}

/* hover */
.mod-login__remember .form-check-input:hover{
    border-color:#4f46e5;
}

/* checked */
.mod-login__remember .form-check-input:checked{
    background-color:#4f46e5;
    border-color:#4f46e5;
}

/* focus */
.mod-login__remember .form-check-input:focus{
    box-shadow:0 0 0 4px rgba(79,70,229,.12) !important;
}

/* label */
.mod-login__remember .form-check-label{
    margin:0;
    font-size:14px;
    color:var(--kai-red);
    cursor:pointer;
    user-select:none;
}

/* =========================================================
   FANCYBOX PREMIUM MINI
   CLEAN • CENTER • MODERN • NO CONFLICT
========================================================= */

/* =========================================================
   OUTER
========================================================= */

#fancybox-outer{

    position:relative;

    width:min(290px,88vw) !important;

    background:rgba(255,255,255,.96) !important;

    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);

    border-radius:20px !important;

    padding:16px !important;

    overflow:hidden !important;

    border:1px solid rgba(255,255,255,.7) !important;

    box-shadow:
        0 12px 34px rgba(0,0,0,.14),
        0 2px 10px rgba(0,0,0,.05) !important;

    box-sizing:border-box;

}



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

#fancybox-content{

    width:auto !important;
    height:auto !important;

    border:none !important;

    background:transparent !important;

    overflow:hidden !important;

    box-sizing:border-box;

    display:flex !important;
    flex-direction:column !important;

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

    text-align:center !important;

}

/* =========================================================
   MESSAGE
========================================================= */

#fancybox-content h3,
#fancybox-content h4,
#fancybox-content p{

    width:100% !important;

    margin:0 0 14px !important;

    padding:0 !important;

    text-align:center !important;

    font-size:13px !important;

    line-height:1.5 !important;

    font-weight:700 !important;

    color:#222 !important;

}

/* =========================================================
   BUTTON WRAPPER
========================================================= */

#fancybox-content > div{

    width:100% !important;

    display:flex !important;

    flex-direction:column !important;

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

    gap:10px !important;

    margin:0 !important;

}

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

#fancybox-content .vm-btn{

    width:100% !important;

    height:38px !important;

    border:none !important;

    border-radius:14px !important;

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

    text-decoration:none !important;

    font-size:14px !important;

    font-weight:700 !important;

    line-height:1 !important;

    transition:
        transform .18s ease,
        opacity .18s ease,
        box-shadow .18s ease;

    box-sizing:border-box !important;

    box-shadow:
        0 2px 8px rgba(0,0,0,.05);

}

/* =========================================================
   CONTINUE SHOPPING
========================================================= */

#fancybox-content .continue_link{

    background:#eef2ff !important;

    color:var(--kai-dark) !important;

}

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

#fancybox-content .showcart{

    background:#fff4ef !important;

    color:var(--kai-red) !important;

    float:none !important;

}

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

#fancybox-content .vm-btn:hover{

    transform:translateY(-1px);

    opacity:.96;

}

/* =========================================================
   ACTIVE
========================================================= */

#fancybox-content .vm-btn:active{

    transform:scale(.98);

}

/* =========================================================
   CLOSE BUTTON
========================================================= */

#fancybox-close{

    position:absolute !important;

    top:10px !important;
    right:10px !important;

    width:24px !important;
    height:24px !important;

    border-radius:50% !important;

    background:#f3f4f6 !important;

    text-indent:-9999px;

    overflow:hidden;

    transition:
        background .18s ease,
        transform .18s ease;

}

/* close icon */
#fancybox-close::before{

    content:"✕";

    position:absolute;

    inset:0;

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

    text-indent:0;

    font-size:12px;

    font-weight:700;

    color:#111827;

}

/* hover */
#fancybox-close:hover{

    background:#e5e7eb !important;

    transform:rotate(90deg);

}

/* =========================================================
   REMOVE LEGACY FANCYBOX PARTS
========================================================= */

.fancybox-bg,
#fancybox-left,
#fancybox-right,
#fancybox-title,
#fancybox-left-ico,
#fancybox-right-ico{

    display:none !important;

}



/* =========================================================
   PREMIUM SEARCH + FANCYBOX MOBILE
   CLEAN • COMPACT • NO CONFLICT
========================================================= */
/* ================= MOBILE ================= */

@media(max-width:576px){

    /* ================= FANCYBOX ================= */

    #fancybox-outer{

        width:min(270px,92vw) !important;

        padding:10px !important;

        border-radius:var(--radius) !important;

    }

    #fancybox-content .vm-btn{

        min-width:64px !important;

        height:27px !important;

        padding:0 8px !important;

        font-size:14px !important;

        border-radius:9px !important;

    }
 #fancybox-content h3,
    #fancybox-content h4,
    #fancybox-content p{

        font-size:12px !important;

    }

    /* ================= SEARCH BAR ================= */

    .pos-search-bar{

        padding:8px 9px !important;

        margin-bottom:10px !important;

        border-radius:0 0 14px 14px;

    }

    /* ================= SEARCH INPUT ================= */

    .pos-app input{

        height:38px !important;

        padding:0 9px !important;

        font-size:12px !important;

        border-radius:var(--radius) !important;

    }

}

/* =========================================================
   STICKY SEARCH BAR PREMIUM
========================================================= */

.pos-search-bar{

    position:sticky;
    top:0;
    z-index:60;

    display:flex;
    align-items:center;

    width:100%;

    padding:10px 12px;
    margin-bottom:12px;

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);

    border-bottom:0px solid rgba(0,0,0,.05);

    box-sizing:border-box;
}

/* =========================================================
   SEARCH INPUT
========================================================= */

.pos-search-bar input{

    width:100%;

    height:40px;

    padding:0 13px;

    border:none;

    border-left:3px solid rgba(255,87,34,.75);
    border-right:3px solid rgba(255,87,34,.75);

    border-radius:var(--radius);

    background:rgba(255,255,255,.18);

    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);

    outline:none;

    font-size:13px;

    color:var(--kai-dark);

    box-shadow:
        0 2px 12px rgba(0,0,0,.05),
        inset 0 1px 0 rgba(255,255,255,.28);

    transition:
        background .18s ease,
        box-shadow .18s ease,
        border-color .18s ease,
        transform .18s ease;

    box-sizing:border-box;
}

/* ================= FOCUS ================= */

.pos-search-bar input:focus{

    background:rgba(255,255,255,.32);

    border-left-color:var(--kai-red);
    border-right-color:var(--kai-red);

    box-shadow:
        0 0 0 3px rgba(255,87,34,.10),
        0 6px 18px rgba(0,0,0,.06);
}

/* ================= PLACEHOLDER ================= */

.pos-search-bar input::placeholder{

    color:rgba(0,0,0,.42);

    font-weight:500;
}

/* ================= DISABLED ================= */

.pos-search-bar input:disabled{

    opacity:.65;

    cursor:not-allowed;

    background:#f3f4f6;
}

/* =========================================================
   SAFE SPACING
========================================================= */

.pos-products{
    padding-top:6px;
}

.vm-products-vertical,
.ichiban-product-grid{
    margin-top:6px;
}
/* =========================
   PRODUCT NAME LINK
========================= */
.ichiban-name{
    display:block;

    font-size:13px;
    font-weight:600;
    line-height:1.35;

    padding:8px 6px 4px;

    min-height:38px;

    color:inherit;
    text-decoration:none;

    text-align:center;

    overflow:hidden;

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

.ichiban-name:hover{
    color:var(--kai-red);
    text-decoration:none;
}

/* =========================================
   VM PRICE STYLE
========================================= */

.ichiban-price{
    display:flex;
    flex-direction:column;
    gap:4px;

    padding:0 8px 8px;
    margin-top:6px;

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

    color:var(--kai-red);

    text-align:center;
}

/* harga asli */
.PricebasePrice{
    font-size:13px;
    color:#999;
    text-decoration:line-through;
    line-height:1;
}

/* harga diskon */
.PricesalesPrice{
    font-size:17px;
    font-weight:700;
    color:var(--kai-red);
    line-height:1.7;
}

/* nominal diskon */
.PricediscountAmount{
    display:inline-flex;
    align-items:center;
    width:max-content;

    background:var(--kai-red);
    color:#fff;

    padding:6px 9px;
    border-radius:7px;

    font-size:12px;
    font-weight:600;
    line-height:1;
}

/* hilangkan tulisan VM aneh */
.vm-price-desc{
    display:none;
}
.preorder-price{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.preorder-price .normal-price{
    font-size:17px;
    font-weight:700;
    color:var(--kai-dgrey);
}

.preorder-note{
    font-size:12px;
    font-weight:500;
    color:var(--kai-dgrey);
    letter-spacing:.3px;
}

.stock.preorder{
    background:var(--kai-dgrey);
    color:#fff;
}

.preorder-btn{
    width:auto !important;
    display:inline-flex;
    align-items:center;
    justify-content:center;

    gap:6px;

    padding:6px 9px;
    border-radius:7px;

    font-size:12px;
    font-weight:700;
    line-height:1;

    background:var(--kai-dgrey);
    color:#fff !important;

    border:none;
    box-shadow:none;

    transition:.2s ease;
}

.preorder-btn:hover{
    background:var(--kai-green);
    transform:translateY(-1px);
    color:#fff !important;
}

.preorder-btn:active{
    transform:scale(.98);
}
.alert{

    background-color: #ffffff;
    border: var(--kai-grey);
    border-radius: var(--radius);
    position: relative;
}