/* =========================================
   Custom Styles - Sahabat Agency
   ========================================= */

body { font-family: 'Inter', sans-serif; background-color: #F4F5F7; overflow-x: hidden; }

/* Scrollbar Utilities */
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
html.lock-scroll, body.lock-scroll { overflow: hidden !important; overscroll-behavior: none !important; }

.custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* Dots Loader Animation */
.dots-loader { display: flex; gap: 8px; justify-content: center; align-items: center; }
.dot { width: 12px; height: 12px; border-radius: 50%; opacity: 0.3; animation: dot-loading 1.2s infinite ease-in-out; }
.dot:nth-child(1) { animation-delay: -0.4s; width: 8px; height: 8px; background-color: var(--customYellow, #FFDF00); }
.dot:nth-child(2) { animation-delay: -0.2s; width: 10px; height: 10px; background-color: var(--customBlue, #007AFF); }
.dot:nth-child(3) { animation-delay: 0s; width: 12px; height: 12px; background-color: var(--customYellow, #FFDF00); }
@keyframes dot-loading { 0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); } 40% { opacity: 1; transform: scale(1); } }

/* PWA Pop-up Modal */
.popup-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(28, 41, 48, 0.7); z-index: 2000; display: flex; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: all 0.3s; }
.popup-overlay.active { opacity: 1; visibility: visible; }
.popup-box { background: white; padding: 16px 16px; border-radius: 12px; text-align: center; width: 90%; max-width: 360px; transform: scale(0.9); transition: transform 0.3s; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); font-family: 'Inter', sans-serif;}
.popup-overlay.active .popup-box { transform: scale(1); }

.ct-footer { background-color: #1c2930; color: #cbd5e1; padding: 50px 0 20px; font-size: 0.9rem; margin-top: auto; }