body {
    font-family: 'Inter', sans-serif;
    overflow-x: hidden; /* Prevent horizontal scrollbars from animations */
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.page {
    display: none;
}

.page.active {
    display: block;
}

/* --- Doctor Icon Placeholder --- */
.doctor-icon-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fce7f3; /* pink-100 */
    color: #be185d; /* pink-700 */
}

/* --- Shimmer Animation for Placeholders (FIXED) --- */
@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

.shimmer {
    background: linear-gradient(to right, #f0f0f0 8%, #e0e0e0 18%, #f0f0f0 33%);
    background-size: 2000px 100%;
    animation: shimmer 2s infinite linear;
}


/* --- Scroll Animation Styles --- */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideInUp {
    from { transform: translateY(40px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes slideInLeft {
    from { transform: translateX(-50px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes slideInRight {
    from { transform: translateX(50px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes scaleUp {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Base class for elements to be animated on scroll */
.animate-on-scroll {
    opacity: 0;
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Set initial state for animations */
.anim-slide-up { transform: translateY(40px); }
.anim-slide-left { transform: translateX(-50px); }
.anim-slide-right { transform: translateX(50px); }
.anim-scale-up { transform: scale(0.9); }

/* Add 'is-visible' class when element is in view */
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: none; /* Reset transform to final state */
}
