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

: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
========================================================= */

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

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

.card{

    border:none !important;

    border-radius:var(--radius);

    overflow:hidden;

    background:var(--card);

    box-shadow:var(--shadow);
}

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

.card-header{

    border:none !important;

    padding:22px 18px;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #f8fafc
        );

    text-align:center;
}

.card-header h4{

    margin:0;

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

    color:var(--kai-blue);
}

.card-header small{

    display:block;

    margin-top:5px;

    color:var(--kai-green);

    font-size:13px;
}

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

.card-body{

    padding:22px !important;

    background:#fafafa;
}

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

.alert-success{

    border:none;

    border-radius:16px;

    background:#ffffff;

    color:#166534;

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

    padding:14px 16px;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.7);
}

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

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:#ffffff !important;

    color:var(--text);

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

    padding:0 16px;

    box-shadow:none !important;

    transition:var(--transition);
}

.form-control:hover{

    border-color:#d1d5db !important;
}

.form-control:focus{

    border-color:var(--kai-orange) !important;

    box-shadow:
        0 0 0 4px rgba(255,87,34,.10) !important;
}

.form-control::placeholder{

    color:#9ca3af;
}

textarea.form-control{

    height:auto;

    min-height:60px;

    padding-top:14px;
    padding-bottom:14px;

    resize:vertical;
}

/* ===== 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) calc(50% - 3px),
        calc(100% - 12px) calc(50% - 3px);

    background-size:6px 6px;

    background-repeat:no-repeat;

    padding-right:40px;
}

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

.vm-cart-items{

    background:#ffffff;

    border-radius:18px;

    padding:12px;

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

    overflow:hidden;
}

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

.table{

    margin-bottom:0;

    border-collapse:separate;

    border-spacing:0 8px;

    width:100%;
}

/* =========================================================
   TABLE HEAD
========================================================= */

.table thead th{

    background:var(--kai-blue);

    color:#ffffff;

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

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

    letter-spacing:.3px;

    padding:8px 10px;

    text-align:center;

    white-space:nowrap;
}

.table thead th:first-child{

    border-top-left-radius:16px;
}

.table thead th:last-child{

    border-top-right-radius:16px;
}

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

.table tbody tr{

    background:#ffffff;

    transition:var(--transition);

    box-shadow:
        0 4px 12px rgba(0,0,0,.04);
}

.table tbody tr:hover{

    transform:translateY(-1px);
}

.table td{

    border:none;

    vertical-align:middle;

    font-size:12px;

    padding:8px;
}

.table tbody td:first-child{

    border-radius:12px 0 0 12px;
}

.table tbody td:last-child{

    border-radius:0 12px 12px 0;
}

/* =========================================================
   PRODUCT IMAGE
========================================================= */

.table td img{

    border-radius:10px;

    width:42px;

    height:42px;

    object-fit:cover;
}

/* =========================================================
   ACCOUNTING STYLE
========================================================= */

.money,
.price,
.subtotal,
.total{

    font-variant-numeric:tabular-nums;

    white-space:nowrap;

    text-align:right;
}

.money{

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;
}

.total{

    color:var(--kai-orange);

    font-weight:700;
}

/* =========================================================
   TOTAL
========================================================= */

#cart_total{

    color:var(--kai-orange);

    font-size:12px;

    font-weight:600;
}

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

#checkoutBtn,
#confirmBlock button[type="submit"]{

    appearance:none;

    border:none;
    outline:none;

    display:inline-flex;

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

    gap:8px;

    padding:11px 22px;

    border-radius:14px;

    background:
        linear-gradient(
            135deg,
            var(--kai-blue),
            var(--kai-blue)
        );

    color:#ffffff;

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

    cursor:pointer;

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

    transition:var(--transition);

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

#checkoutBtn:hover,
#confirmBlock button[type="submit"]:hover{

    transform:translateY(-1px);

    box-shadow:
        0 8px 18px rgba(0,0,0,.14);
}

#checkoutBtn:active,
#confirmBlock button[type="submit"]:active{

    transform:scale(.98);
}

/* =========================================================
   DELETE BUTTON
========================================================= */

.btn-delete{

    border:none;

    border-radius:10px;

    background:var(--kai-orange);

    color:#ffffff;

    font-size:12px;

    padding:5px 9px;

    transition:var(--transition);
}

.btn-delete:hover{

    background:#c62828;
}

/* ===============================
   QTY COLUMN PREMIUM MOBILE
================================= */

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

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

/* tombol qty */
.qty-box .btn{
    width:34px;
    min-width:34px;
    height:34px;
    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:48px !important;
    min-width:48px !important;
    max-width:48px !important;

    height:34px !important;

    padding:0 !important;

    text-align:center !important;

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

    border-radius:10px !important;

    flex:0 0 48px !important;
}

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

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

    .qty-input{
        width:52px !important;
        min-width:52px !important;
        max-width:52px !important;

        font-size:15px !important;
    }

    .qty-box .btn{
        width:36px;
        min-width:36px;
        height:36px;
    }

}

/* =========================================================
   FOOTER
========================================================= */

.table tfoot th{

    border:none;

    font-size:12px;

    padding:8px;
}

/* =========================================================
   MINI CART DROPDOWN
========================================================= */

.dropdown-menu{

    min-width:320px;
    max-width:380px;

    padding:14px;

    border:none;

    border-radius:18px;

    background:#ffffff;

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

    overflow:hidden;
}

/* =========================================================
   DROPDOWN PRODUCT
========================================================= */

.vm_cart_products .product_row{

    padding:10px 0;

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

.product_image .image{

    border:none;

    border-radius:14px;

    overflow:hidden;

    background:#f8fafc;
}

.product_image img{

    border-radius:14px;

    object-fit:cover;
}

.product_name a{

    color:var(--text);

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

    line-height:1.4;

    text-decoration:none;

    transition:var(--transition);
}

.product_name a:hover{

    color:var(--kai-orange);
}

.quantity{

    display:inline-flex;

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

    min-width:22px;
    height:22px;

    padding:0 6px;

    border-radius:999px;

    background:
        rgba(229,57,53,.10);

    color:var(--kai-orange);

    font-size:12px;
    font-weight:700;
}

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

@media (max-width:768px){

    .card{
        border-radius:18px;
    }

    .card-body{
        padding:16px !important;
    }

    .card-header{
        padding:18px 14px;
    }

    .card-header h4{
        font-size:18px;
    }

    .form-control{
        height:48px;
        font-size:13px;
        border-radius:14px !important;
    }

    textarea.form-control{
        min-height:54px;
    }

    label{
        font-size:12px;
    }

    .alert-success{
        font-size:12px;
        padding:12px 14px;
    }

    /* ===== PRODUCT ===== */
    .vm-cart-items .table td:first-child{
        min-width:110px;
        max-width:120px;
        overflow:hidden;
        text-overflow:ellipsis;
        font-size:12px;
    }

    /* ===== QTY ===== */
    .vm-cart-items .table th:nth-child(2),
    .vm-cart-items .table td:nth-child(2){
        width:74px;
        min-width:74px;
    }

    /* ===== HARGA ===== */
    .vm-cart-items .table th:nth-child(3),
    .vm-cart-items .table td:nth-child(3){
        width:88px;
        min-width:88px;
        font-size:12px;
        padding-left:4px;
        padding-right:4px;
        white-space:nowrap;
    }

    /* ===== TOTAL ===== */
    .vm-cart-items .table th:nth-child(4),
    .vm-cart-items .table td:nth-child(4){
        width:96px;
        min-width:96px;
        font-size:12px;
        font-weight:700;
        padding-left:4px;
        padding-right:4px;
        white-space:nowrap;
    }

    /* ===== AKSI ===== */
    .vm-cart-items .table th:nth-child(5),
    .vm-cart-items .table td:nth-child(5){
        width:62px;
        min-width:62px;
    }

    /* ===== BUTTON DELETE ===== */
    .btn-delete{
        font-size:12px;
        padding:5px 7px;
        border-radius:8px;
    }

    /* ===== TABLE SCROLL ===== */
    .vm-cart-items{
        overflow-x:auto;
    }

    .vm-cart-items table{
        min-width:520px;
    }
}