/* --- Typography Setup --- */

/* English (Default) */
body { font-family: 'Inter', sans-serif; }
h1, h2, h3, h4, .serif { font-family: 'Playfair Display', serif; }

/* Arabic (RTL) Overrides */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] .serif { 
    font-family: 'Cairo', sans-serif; 
    line-height: 1.5; 
}
[dir="rtl"] body { 
    font-family: 'Amiri', serif; 
    font-size: 1.125rem; /* Slight increase for serif readability */
}

/* Hide scrollbar for clean UI in widgets */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Smooth scroll behavior - padding for sticky navbar offset */
html { 
    scroll-padding-top: 5rem; /* Offset for sticky navbar (h-20 = 80px) */
}

/* Coaching Website Design Enhancements */
body { 
    background: linear-gradient(to bottom, #fafafa 0%, #ffffff 100%);
}

/* Add subtle animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

/* Enhanced focus states for accessibility */
button:focus, a:focus, input:focus, textarea:focus, select:focus {
    outline: 2px solid #f59e0b;
    outline-offset: 2px;
}

/* Position Calendly badge above Message Me button */
.calendly-badge-widget {
    bottom: 100px !important; /* Message Me button is at 24px, so 100px places Calendly comfortably above */
    z-index: 45 !important; /* Below Message Me button (z-50) but still visible */
}


.hidden {
    display: none !important;
}


.calendly-popup{
    background-color: #ffffff !important;
}

/* Loading Spinner Animation */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loader-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid #f1f5f9;
    border-top: 4px solid #0f172a;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto;
}

#page-loader {
    transition: opacity 0.3s ease-out;
}

#page-loader.fade-out {
    opacity: 0;
    pointer-events: none;
}