/* Custom styles for SmmVaani */

:root {
    --primary: #ee2a7b;
    --secondary: #6228d7;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Dark Mode Styles */
body.dark {
    background-color: #121212;
    color: white;
}

body.dark #navbar,
body.dark #sidebar,
body.dark #paymentModalContent {
    background-color: #1a1a1a;
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark .bg-white {
    background-color: #1a1a1a !important;
}

body.dark .text-[#1a1a1a] {
    color: white !important;
}

body.dark .border-black\/5 {
    border-color: rgba(255, 255, 255, 0.05) !important;
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
    animation: fadeIn 0.3s ease-out forwards;
}

@keyframes slideIn {
    from { transform: translateX(20px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.animate-slide-in {
    animation: slideIn 0.3s ease-out forwards;
}

/* Banner Carousel Styles */
.banner-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    transform: translateX(50px);
}

.banner-slide.active {
    opacity: 1;
    transform: translateX(0);
}

.banner-slide.exit {
    opacity: 0;
    transform: translateX(-50px);
}

/* Custom UI Tweak */
#darkModeToggle {
    cursor: pointer;
}

#darkModeToggle.active {
    background-color: var(--secondary);
}

#darkModeToggle.active #darkModeDot {
    transform: translateX(24px);
}

/* Service Detail Header Splashes */
.splash-1 {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 9999px;
    background-color: var(--primary);
    filter: blur(20px);
}

.splash-2 {
    position: absolute;
    top: 4rem;
    right: 4rem;
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    background-color: var(--secondary);
    filter: blur(30px);
}

.splash-3 {
    position: absolute;
    bottom: 1rem;
    right: 5rem;
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    background-color: #f9ce34;
    filter: blur(20px);
}