/* =========================================================
   ROOT VARIABLES (CLEAN + NO DUPLICATE TOKENS)
========================================================= */

: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:#ffffff;
    --kai-lblue:#4c869c;

    /* ===== UI ===== */
    --bg:#f5f7fb;
    --card:#ffffff;
    --border:#e5e7eb;
    --text:#111827;
    --muted:#6b7280;

    /* ===== TOKENS ===== */
    --radius:18px;
    --radius-sm:12px;

    --shadow:0 10px 30px rgba(0,0,0,.06);
    --transition:.2s ease;
}

/* =========================================================
   GLOBAL RESET (SAFE MODE)
========================================================= */

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

body{
    background:var(--bg);
}

/* =========================================================
   ANTI OVERLAY / LEGACY POPUP CLEANER
   (FANCYBOX + VM + BOOTSTRAP CONFLICT FIX)
========================================================= */

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

/* stop scroll lock bug */
body.fancybox-lock,
html.fancybox-lock{
    overflow:auto !important;
    height:auto !important;
}

/* =========================================================
   CARD SYSTEM
========================================================= */

.card{
    border:none !important;
    border-radius:var(--radius);
    overflow:hidden;
    background:var(--card);
    box-shadow:var(--shadow);
}

.card-header{
    border:none !important;
    padding:22px 18px;
    background:linear-gradient(135deg,#fff,#f8fafc);
    text-align:center;
}

.card-header h4{
    margin:0;
    font-size:22px;
    font-weight:700;
    color:var(--kai-dark);
}

.card-header small{
    display:block;
    margin-top:5px;
    color:var(--kai-green);
    font-size:13px;
}

.card-body{
    padding:22px !important;
    background:#fafafa;
}

/* =========================================================
   ALERT
========================================================= */

.alert-success{
    border:none;
    border-radius:16px;
    background:#fff;
    color:#166534;
    font-size:13px;
    font-weight:500;
    padding:14px 16px;
}

/* =========================================================
   FORM CLEAN
========================================================= */

label{
    display:block;
    margin-bottom:7px;
    font-size:13px;
    font-weight:700;
    color:var(--text);
}

.form-control{
    width:100%;
    height:52px;
    border-radius:16px !important;
    border:1px solid var(--border) !important;
    background:#fff !important;
    color:var(--text);
    font-size:14px;
    font-weight:500;
    padding:0 16px;
    box-shadow:none !important;
    transition:var(--transition);
}

.form-control:focus{
    border-color:var(--kai-red) !important;
    box-shadow:0 0 0 4px rgba(255,87,34,.10) !important;
}

textarea.form-control{
    min-height:60px;
    padding:14px;
}

/* SELECT */
select.form-control{
    appearance:none;
    background-image:
        linear-gradient(45deg,transparent 50%,#6b7280 50%),
        linear-gradient(135deg,#6b7280 50%,transparent 50%);
    background-position:calc(100% - 18px) center;
    background-size:6px 6px;
    background-repeat:no-repeat;
    padding-right:40px;
}

/* =========================================================
   TABLE WRAPPER
========================================================= */

.vm-cart-items{
    background:#fff;
    border-radius:18px;
    padding:12px;
    box-shadow:0 8px 25px rgba(0,0,0,.05);
    overflow:hidden;
}

/* TABLE */
.table{
    margin:0;
    border-collapse:separate;
    border-spacing:0 8px;
    width:100%;
}

/* HEADER */
.table thead th{
    background:var(--kai-dark);
    color:#fff;
    border-top:3px solid var(--kai-red);
    font-size:12px;
    font-weight:700;
    padding:8px 10px;
    text-align:center;
    white-space:nowrap;
}

.table thead th:first-child{border-radius:16px 0 0 0;}
.table thead th:last-child{border-radius:0 16px 0 0;}

/* BODY */
.table tbody tr{
    background:#fff;
    box-shadow:0 4px 12px rgba(0,0,0,.04);
}

.table tbody tr:hover{
    transform:translateY(-1px);
}

.table td{
    border:none;
    font-size:12px;
    padding:8px;
    vertical-align:middle;
}

.table td img{
    width:42px;
    height:42px;
    object-fit:cover;
    border-radius:10px;
}

/* =========================================================
   MONEY STYLE
========================================================= */

.money,.price,.subtotal,.total{
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
    text-align:right;
}

.total{
    color:var(--kai-red);
    font-weight:700;
}

/* =========================================================
   BUTTON SYSTEM
========================================================= */

#checkoutBtn,
#confirmBlock button[type="submit"]{
    border:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:11px 22px;
    border-radius:14px;
    background:var(--kai-dark);
    color:#fff;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    border-left:3px solid var(--kai-red);
    border-right:3px solid var(--kai-red);
    transition:var(--transition);
}

#checkoutBtn:hover,
#confirmBlock button:hover{
    transform:translateY(-1px);
}

/* DELETE */
.btn-delete{
    border:none;
    border-radius:10px;
    background:var(--kai-red);
    color:#fff;
    font-size:12px;
    padding:5px 9px;
}

/* ===============================
   QTY COLUMN (LEBIH LEBAR & STABIL)
================================= */

.table th:nth-child(2),
.table td:nth-child(2){
    width:160px !important;
    min-width:160px !important;
    text-align:center;
}

/* wrapper qty */
.qty-box{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    width:100%;
}

/* tombol qty */
.qty-box .btn{
    width:38px;
    min-width:38px;
    height:38px;
    padding:0;
    border-radius:10px !important;
    font-size:16px;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* input qty */
.qty-input{
    width:70px !important;
    min-width:70px !important;
    max-width:70px !important;

    height:38px !important;

    padding:0 !important;

    text-align:center !important;

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

    border-radius:10px !important;

    flex:0 0 70px !important;
}

/* =========================================================
   DROPDOWN CLEAN
========================================================= */

.dropdown-menu{
    min-width:320px;
    max-width:380px;
    padding:14px;
    border-radius:18px;
    background:#fff;
    box-shadow:0 12px 30px rgba(0,0,0,.10);
}

/* =========================================================
   MOBILE CLEAN
========================================================= */

@media (max-width:768px){

    .card-body{padding:16px !important;}
    .card-header h4{font-size:18px;}

    .form-control{height:48px;}

    .qty-input{width:52px;}

    .table td:first-child{
        max-width:120px;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    .vm-cart-items{
        overflow-x:auto;
    }
}