.shelf {
    flex: 1 1 auto;
    width: 100%;
    margin-bottom: 10px;
    display: flex;
    flex-direction: row;
    color: #fff;
}

.shelf:last-child {
    margin-bottom: 0;
}

.labelbox {
    flex: 0 0 35%;
}

.valuebox {
    flex: 0 0 65%;
}

.d-none {
    display: none !important;
}

.gap-x-4 {
    -moz-column-gap: 1rem;
    column-gap: 1rem;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-grow {
    flex: 1 1;
}

.button-3d {  
    background: linear-gradient(145deg, var(--warna_3),var(--warna_1));
    border-radius: 1rem;
    color: #f2efef;
    font-weight: bold;
    margin: 0 5px;
    padding: 5px 20px;
    cursor: pointer;
}

.button-3d:active {   
    transform: translateY(4px);
}

.scroll-container {
    display: flex;
    overflow-x: auto;
    padding: 1rem 0;
    white-space: nowrap;
    scrollbar-width: thin;
}

.scroll-container::-webkit-scrollbar {
    height: 7px;
}

.scroll-container::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

.scroll-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

/* Additional styles from index.php */
.product-list,.rounded-xl{border-radius:.75rem}
.swal2-popup{box-sizing:border-box;grid-template-columns:minmax(0,100%);font-family:inherit}
.bg-murky-300,.bg-murky-600,.bg-orange-700,.bg-primary-5400{--tw-bg-opacity:1}
.product-list:active,.ring-offset-murky-800{--tw-ring-offset-color:#34373b}
.product-list:active,.ring-offset-2{--tw-ring-offset-width:2px}
.product-list:active,.ring-primary-500{--tw-ring-opacity:1;--tw-ring-color:var(--warna_3)}
.decoration-destructive{text-decoration-color:#dc2626}

@media (max-width:767px){
    .hide-mobile{display:none!important}
}

@media (min-width:768px){
    .show-desktop{display:block!important}
}

.bg-orange-700{background-color:rgb(132 130 129)}
.bg-background,.bg-murky-600,.bg-secondary{background-color:var(--warna_1)}
.text-foreground{color:#ebeaef}
.bg-murky-300{background-color:#ebeaef80}
.product-list{min-height:10px;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06)}
.product-list:active,.ring-2{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--warna_1);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}
.product-list.active{background:#fff!important;box-shadow:0 0 10px rgba(255,255,255,.5),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);transition:box-shadow .2s}
.product-list.active .btn-order{box-shadow:0 0 20px rgba(220,220,220,.4)}
.bg-product{background:#c3c9cc}
.product-list img{display:flex;float:right;margin-top:0}
.productlogo{width:32px;right:5%}
.rounded-b-md{border-bottom-left-radius:13px;border-bottom-right-radius:13px}
.border-murky-500{--tw-border-opacity:1;border-color:rgb(255 255 255)}
.border-dashed{border-style:dashed}
.border-t{border-top-width:1px}
.divider{border-top:3px solid #fff;margin:10px 0;width:5%}
.swal2-popup{background:#333333eb}
.hover\:bg-orange-400:hover,.hover\:bg-primary-400:hover{--tw-bg-opacity:1;background-color:#ebeaef29}
.load{background:rgba(31,33,46,.5);position:fixed;top:0;bottom:0;left:0;right:0;z-index:10000;background-repeat:no-repeat;background-size:40px;background-position:center;display:none}
.load.show{display:block;background-image:url('../images/icon/loading-order.gif')}

@keyframes slideIn{
    0%{transform:translateY(-100%);opacity:0}
    100%{transform:translateY(0);opacity:1}
}

#react-notif{position:fixed;z-index:9999;top:16px;right:16px;pointer-events:none;max-width:300px}
.toast{padding:16px;color:#fff;background-color:rgba(244,63,94,.8);position:relative;margin-bottom:16px;border-radius:8px;display:flex;justify-content:space-between;align-items:center;animation:.3s forwards slideIn;opacity:0}
.toast:last-child{transform:translateY(0)}
.toast-icon{padding:8px;border-radius:50%;background-color:#fff;margin-right:8px}
.bar,.progress{border-radius:5px}
.toast-message{flex:1}
.toast-close{cursor:pointer}
.toast.success{background-color:rgba(34,197,94,.8)}
.text-warning{color:#eab308}
.text-info{color:#0ea5e9}
.text-success{color:#22c55e}
.bg-primary-5400{background-color:var(--warna_3)}
.to-primary-600{--tw-gradient-to:#022c56 var(--tw-gradient-to-position)}
.from-primary-400{--tw-gradient-from: var(--warna_3) var(--tw-gradient-from-position);--tw-gradient-to:var(--warna_3) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.text-sm\/6{font-size:.875rem;line-height:1.5rem}
.text-besar{font-size:50px;font-weight:700}
.rating-list{list-style:none;padding:0;margin:0}
.rating,.rating-item{display:flex;align-items:center}
.stars{display:flex;align-items:center;gap:5px;font-weight:700;color:#333}
.star{color:#ffc107;width:20px}
.bar{height:20px;width:350px;background-color:#ddd;margin:1 1px}
.progress{height:100%;background-color:#ffc107}
.count{min-width:50px;text-align:right}

@keyframes float-ketupat {
    0%, 100% {
        transform: translate(0, 0) rotate(var(--rotation));
    }
    25% {
        transform: translate(20px, -20px) rotate(calc(var(--rotation) + 5deg));
    }
    50% {
        transform: translate(-10px, -40px) rotate(calc(var(--rotation) - 5deg));
    }
    75% {
        transform: translate(-20px, -20px) rotate(calc(var(--rotation) + 3deg));
    }
}

@keyframes glow-crescent {
    0%, 100% {
        filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.3));
    }
    50% {
        filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.5));
    }
}

.ketupat {
    position: absolute;
    width: var(--size);
    height: var(--size);
    animation: float-ketupat var(--duration) var(--delay) infinite ease-in-out;
    pointer-events: none;
}

.ketupat-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform: rotate(45deg);
    background: rgba(255, 255, 255, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(2px);
    border-radius: 4px;
}

.ketupat-line-1,
.ketupat-line-2 {
    position: absolute;
    width: 100%;
    height: 2px;
    background: rgba(255, 255, 255, 0.3);
}

.ketupat-line-1 {
    top: 50%;
    transform: translateY(-50%);
}

.ketupat-line-2 {
    left: 50%;
    width: 2px;
    height: 100%;
    transform: translateX(-50%);
}

.crescent {
    position: absolute;
    top: 20px;
    right: 40px;
    width: 60px;
    height: 60px;
    animation: glow-crescent 4s infinite ease-in-out;
}

.crescent-inner {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: transparent;
    box-shadow: 15px 15px 0 0 rgba(255, 255, 255, 0.4);
    transform: rotate(-45deg);
}