/* Custom Styling and Animations for City Pulse Clinic (Charcoal Grey & White Theme) */

/* 1. Reset & General Adjustments */
body {
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

/* Custom Selection Color - Green/Gold Tint */
::selection {
    background-color: #C7A25C; /* gold */
    color: #0C1613; /* deep forest green */
}

/* 2. Scroll Animation System */
.fade-in-section {
    opacity: 0;
    transform: translateY(20px);
    visibility: hidden;
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.fade-in-section.is-visible {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

/* 3. Custom Hover Transitions for Services Cards */
.service-card {
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgb(255 255 255 / 0.03), 0 8px 10px -6px rgb(255 255 255 / 0.03);
    border-color: rgba(255, 255, 255, 0.2);
}

.service-card .service-icon-box {
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.service-card:hover .service-icon-box {
    background-color: #C7A25C; /* primary gold */
    color: #0C1613; /* dark green */
    box-shadow: 0 10px 15px -3px rgba(199, 162, 92, 0.25);
    transform: scale(1.05) rotate(-3deg);
    border-color: #C7A25C;
}

.service-card:hover button {
    background-color: #C7A25C;
    color: #0C1613;
    border-color: #C7A25C;
}

/* 4. Pulse Glowing Effect for Emergency Section (Gold Pulse) */
@keyframes border-pulse {
    0%, 100% {
        border-color: rgba(199, 162, 92, 0.3);
        box-shadow: 0 20px 25px -5px rgba(12, 22, 19, 0.5), 0 0 0 0px rgba(199, 162, 92, 0.15);
    }
    50% {
        border-color: rgba(199, 162, 92, 0.8);
        box-shadow: 0 20px 25px -5px rgba(199, 162, 92, 0.1), 0 0 0 6px rgba(199, 162, 92, 0.3);
    }
}

.service-card[data-specialty="طوارئ طب عام (24 ساعة)"] {
    animation: border-pulse 3s infinite ease-in-out;
}

/* 5. Floating Badges Animation in Hero Section */
@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes float-delayed {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(10px);
    }
}

.animate-float {
    animation: float 5s ease-in-out infinite;
}

.animate-float-delayed {
    animation: float-delayed 5s ease-in-out infinite;
}

/* 6. Decorative Blob Animation */
@keyframes blob-bounce {
    0%, 100% {
        transform: translate(0px, 0px) scale(1);
    }
    33% {
        transform: translate(30px, -50px) scale(1.1);
    }
    66% {
        transform: translate(-20px, 20px) scale(0.95);
    }
}

.animate-blob {
    animation: blob-bounce 10s infinite alternate ease-in-out;
}

.animation-delay-2000 {
    animation-delay: 2s;
}

/* 7. Header Scroll Class (via JS) */
.header-scrolled {
    height: 4.5rem !important; /* py-4 equivalent height */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5) !important;
    background-color: rgba(12, 22, 19, 0.95) !important;
    border-color: rgba(199, 162, 92, 0.2) !important;
}

.header-scrolled .flex.items-center.justify-between.h-20 {
    height: 4.5rem !important;
}

/* 8. Input fields outline overrides */
input:focus, select:focus, textarea:focus {
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.15);
}

/* Form Styles and Animations */
#booking-modal, #success-modal {
    transition: opacity 0.3s ease-out;
}

/* Custom Scrollbar - Green/Gold Style */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #0C1613;
}

::-webkit-scrollbar-thumb {
    background: #C7A25C;
    border-radius: 9999px;
    border: 2px solid #0C1613;
}

::-webkit-scrollbar-thumb:hover {
    background: #D4B270;
}