/* style.css - Custom Sticky Bottom Bar v8.1 */

/* --- STICKY BAR --- */
.sticky-bottom-bar {
    position: fixed; bottom: 0; left: 0; width: 100%; z-index: 9999;
    display: flex; box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
}
.sticky-item {
    flex: 1; padding: 8px 0; text-decoration: none; font-size: 11px; font-weight: 700;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    cursor: pointer; transition: background-color 0.2s;
}
.sticky-item:hover { filter: brightness(110%); }
.sticky-item .icon { font-size: 20px; line-height: 1; margin-bottom: 3px; }

/* WARNA DINAMIS */
.sticky-item.btn-1 { background-color: var(--csb-bg-1, #ff7a00) !important; color: var(--csb-txt-1, #ffffff) !important; }
.sticky-item.btn-2 { background-color: var(--csb-bg-2, #00b020) !important; color: var(--csb-txt-2, #ffffff) !important; }
.sticky-item.btn-3 { background-color: var(--csb-bg-3, #005bbf) !important; color: var(--csb-txt-3, #ffffff) !important; }

/* --- SALES FLOAT IMAGE --- */
.sales-float {
    position: fixed; bottom: 50px; z-index: 10000;
    pointer-events: none; width: 100%; height: 0; overflow: visible;
}
.sales-float a {
    pointer-events: auto; position: absolute; bottom: 0;
    width: var(--csb-d-w, 20%); height: var(--csb-d-h, 200px);
}
.sales-float img {
    pointer-events: auto; filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.3));
    width: 100%; height: 100%; object-fit: contain;
}
.sales-float > img {
    position: absolute; bottom: 0;
    width: var(--csb-d-w, 20%); height: var(--csb-d-h, 200px);
}

/* ALIGNMENT DESKTOP */
.sales-float.desktop-right a, .sales-float.desktop-right > img { right: 20px; left: auto; }
.sales-float.desktop-left a,  .sales-float.desktop-left > img  { left: 20px; right: auto; }
.sales-float.desktop-center a, .sales-float.desktop-center > img { left: 50%; right: auto; transform: translateX(-50%); }

/* --- ANIMATIONS (KEYFRAMES) --- */
@keyframes csbFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes csbFadeInDown { from { opacity: 0; transform: translate3d(0, -100%, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes csbFadeInUp { from { opacity: 0; transform: translate3d(0, 100%, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes csbFadeInLeft { from { opacity: 0; transform: translate3d(-50%, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes csbFadeInRight { from { opacity: 0; transform: translate3d(50%, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }

/* Center Alignment Special Animation */
@keyframes csbFadeInUpCenter { from { opacity: 0; transform: translate3d(-50%, 100%, 0); } to { opacity: 1; transform: translate3d(-50%, 0, 0); } }

/* APLIKASI ANIMASI */
.sales-float[class*="csb-anim-"] a, 
.sales-float[class*="csb-anim-"] > img {
    animation-duration: 1s;
    animation-fill-mode: both;
}
.csb-anim-fade-in a, .csb-anim-fade-in > img { animation-name: csbFadeIn; }
.csb-anim-fade-in-down a, .csb-anim-fade-in-down > img { animation-name: csbFadeInDown; }
.csb-anim-fade-in-up a, .csb-anim-fade-in-up > img { animation-name: csbFadeInUp; }
.csb-anim-fade-in-left a, .csb-anim-fade-in-left > img { animation-name: csbFadeInLeft; }
.csb-anim-fade-in-right a, .csb-anim-fade-in-right > img { animation-name: csbFadeInRight; }

/* Fix Animation for Center Alignment */
.sales-float.desktop-center.csb-anim-fade-in-up a,
.sales-float.desktop-center.csb-anim-fade-in-up > img {
    animation-name: csbFadeInUpCenter;
}

/* --- RESPONSIVE MOBILE --- */
@media screen and (max-width: 768px) {
    .sales-float a, .sales-float > img { width: var(--csb-m-w, 40%); height: var(--csb-m-h, 160px); }
    .sales-float.mobile-right a, .sales-float.mobile-right > img { right: 8px !important; left: auto !important; transform: none !important; }
    .sales-float.mobile-left a,  .sales-float.mobile-left > img  { left: 8px !important; right: auto !important; transform: none !important; }
    
    .sales-float.mobile-center a, .sales-float.mobile-center > img { left: 50% !important; right: auto !important; transform: translateX(-50%) !important; }
    
    .sales-float.mobile-center.csb-anim-fade-in-up a,
    .sales-float.mobile-center.csb-anim-fade-in-up > img {
        animation-name: csbFadeInUpCenter !important;
    }
}

/* MOBILE ONLY */
body .sticky-bottom-bar.csb-mobile-only, body .sales-float.csb-mobile-only { display: none; }
@media screen and (max-width: 768px) {
    body .sticky-bottom-bar.csb-mobile-only { display: flex; }
    body .sales-float.csb-mobile-only { display: block; }
}