/* Typography & Base Styles */
body { font-family: 'Inter', sans-serif; }
h1, h2, h3, h4 { font-family: 'Playfair Display', serif; }

/* Gradients */
.gradient-text {
    background: linear-gradient(135deg, #b45309 0%, #f59e0b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.gold-gradient { 
    background: linear-gradient(135deg, #b45309 0%, #f59e0b 100%); 
}
.hero-bg {
    background-color: #0f172a;
    background-image: radial-gradient(#1e293b 1px, transparent 1px);
    background-size: 20px 20px;
}

/* Time Slot Modern Styling */
.time-slot-btn {
    transition: all 0.2s ease;
}
.time-slot-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.time-slot-btn.selected {
    background: linear-gradient(135deg, #b45309 0%, #f59e0b 100%);
    color: white;
    border-color: transparent;
    font-weight: bold;
}

/* Floating Buttons - Desktop Only */
.whatsapp-float {
    position: fixed; width: 60px; height: 60px; bottom: 30px; right: 30px; z-index: 100;
    display: none; 
    align-items: center; justify-content: center;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));
    transition: all 0.5s ease-in-out;
    transform: translateY(100px); opacity: 0;
}

.appointment-float {
    position: fixed; width: 60px; height: 60px; bottom: 30px; left: 30px; z-index: 100;
    background: linear-gradient(135deg, #b45309 0%, #f59e0b 100%);
    color: #FFF; border-radius: 50px; text-align: center;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.3);
    display: none; 
    align-items: center; justify-content: center;
    transition: all 0.5s ease-in-out;
    transform: translateY(100px); opacity: 0;
}

@media (min-width: 768px) {
    .whatsapp-float, .appointment-float { display: flex; }
}

.float-visible { transform: translateY(0) !important; opacity: 1 !important; }
.appointment-float:hover, .whatsapp-float:hover { transform: scale(1.1) translateY(0); }

/* Scroll Reveal Animations */
.reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s ease-out; }
.reveal.active { opacity: 1; transform: translateY(0); }

/* Custom Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* FAQ Sweep Animation */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details[open] summary ~ * { animation: sweep .5s ease-in-out; }
@keyframes sweep { 
    0% {opacity: 0; transform: translateY(-10px)} 
    100% {opacity: 1; transform: translateY(0)} 
}

/* Hide scrollbar for sliders */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* =========================================
   NEW FIX: MOBILE MENU BODY LOCK & SCROLL 
========================================= */
body.menu-open {
    overflow: hidden !important; /* Prevents background scrolling */
}

#mobile-menu {
    max-height: calc(100vh - 80px); /* 80px is your navbar height. Allows scrolling inside the menu */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* Smooth scroll on iPhones */
}