/* Define a custom font called 'MyFont' */
@font-face {
    font-family: 'MyFont';
    /* Give the font a name we can use later */
    src: url('../font/Franklin Gothic.ttf') format('truetype');
    /* Path to the font file */
    font-weight: normal;
    /* Regular thickness (not bold) */
    font-style: normal;
    /* Normal style (not italic) */
    font-display: swap;
    /* Show text immediately with fallback font while loading */
}

/* Define another custom font called 'MyFont2' for Arabic text */
@font-face {
    font-family: 'MyFont2';
    /* Name for the Arabic font */
    src: url('../font/KSAHeading.ttf') format('truetype');
    /* Path to Arabic font file */
    font-weight: normal;
    /* Regular thickness */
    font-style: normal;
    /* Normal style */
    font-display: swap;
    /* Show text immediately while font loads */
}

/* Style for the entire webpage body */
body {
    font-family: 'Inter', sans-serif;
    /* Default font for English text */
    --primary-color: #CF0820;
    /* Define a red color variable */
    --background-color: #FFFFFF;
    /* Define white background variable */
}

/* Special body styles when text direction is right-to-left (for Arabic) */
[dir="rtl"] body {
    font-family: 'Cairo', sans-serif;
    /* Arabic font stack */
}

/* Style for message cards */
.message-card {
    transition: all 0.3s ease;
    /* Smooth animation for hover effects */
}

/* Hover effect for message cards */
.message-card:hover {
    transform: translateY(-2px);
    /* Move card up slightly */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    /* Add shadow for floating effect */
}

/* Style for birthday badges */
.birthday-badge {
    background-color: var(--primary-color);
    /* Use the red color */
    color: white;
    /* White text */
}

/* Style for loading spinner */
.loader {
    border-top-color: var(--primary-color);
    /* Red color for spinner */
    animation: spinner 0.8s linear infinite;
    /* Continuous spinning animation */
}

/* Define the spinning animation */
@keyframes spinner {
    0% {
        transform: rotate(0deg);
        /* Start at 0 degrees */
    }

    100% {
        transform: rotate(360deg);
        /* End at full circle */
    }
}

/* Style for the "Join Now" button */
#joinNowBtn {
    position: fixed;
    /* Stays in place when scrolling */
    left: 50%;
    /* Center horizontally */
    transform: translateX(-50%);
    /* Precise centering */
    bottom: 2rem;
    /* Position from bottom */
    z-index: 18;
    /* Ensure it's above other elements */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
    /* Shadow effect */
    padding: 0.75rem 1.5rem;
    /* Button padding */
    font-weight: 600;
    /* Bold text */
    min-width: 120px;
    /* Minimum width */
    text-align: center;
    /* Center text */
    animation: pulse 2s infinite;
    /* Continuous pulsing animation */
}

/* Navigation link styling */
.nav-link {
    position: relative;
    /* For pseudo-element */
    transition: all 0.3s ease;
    /* Smooth hover effects */
}

/* Nav link hover color */
.nav-link:hover {
    color: var(--primary-color);
    /* Red on hover */
}

/* Nav link underline animation */
.nav-link::after {
    content: '';
    /* Empty content */
    position: absolute;
    /* Position relative to link */
    width: 0;
    /* Start invisible */
    height: 2px;
    /* Thin line */
    bottom: 0;
    /* At bottom */
    left: 0;
    /* From left */
    background-color: var(--primary-color);
    /* Red line */
    transition: width 0.3s ease;
    /* Smooth expansion */
}

/* Animate underline on hover */
.nav-link:hover::after {
    width: 100%;
    /* Full width */
}

/* Like button animation */
button:hover svg {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

.text-red-500 {
    color: var(--primary-color);
    /* Use your red color */
}

/* Define the pulsing animation */
@keyframes pulse {
    0% {
        transform: translateX(-50%) scale(1);
        /* Normal size */
        box-shadow: 0 0 0 0 rgba(207, 8, 32, 0.7);
        /* Starting shadow */
    }

    70% {
        transform: translateX(-50%) scale(1.05);
        /* Slightly larger */
        box-shadow: 0 0 0 10px rgba(207, 8, 32, 0);
        /* Expanding shadow */
    }

    100% {
        transform: translateX(-50%) scale(1);
        /* Back to normal */
        box-shadow: 0 0 0 0 rgba(207, 8, 32, 0);
        /* Shadow disappears */
    }
}

/* Style for language badges */
.language-badge {
    background-color: #4F46E5;
    /* Purple background */
    color: white;
    /* White text */
}

/* Style for Arabic messages */
.arabic-message {
    direction: rtl;
    /* Right-to-left text direction */
    text-align: right;
    /* Align text to the right */
}

/* Style for the logo text */
.logo {
    font-family: 'MyFont', 'Comic Neue', cursive;
    /* Custom font with fallbacks */
    background: linear-gradient(45deg, #FFD700, #CF0820);
    /* Gold to red gradient */
    -webkit-background-clip: text;
    /* Clip background to text (for WebKit browsers) */
    background-clip: text;
    /* Clip background to text */
    -webkit-text-fill-color: transparent;
    /* Make text transparent to show gradient */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
    /* Subtle shadow */
}

/* Arabic version of the logo */
[dir="rtl"] .logo {
    font-family: 'MyFont2', 'Cairo', sans-serif;
    /* Arabic font with fallbacks */
}

/* Footer styles */
.footer {
    background: linear-gradient(to right, #CF0820, #9d0618);
    /* Red gradient */
    z-index: 20;
    /* Make sure footer stays above other elements */
}

/* Dark mode overrides for footer */
.darkmode--activated .footer {
    background: linear-gradient(to right, #1a1a1a, #2d2d2d) !important;
    /* Dark gradient */
}

/* Ensure dark mode elements stay properly layered */
.darkmode-layer,
.darkmode-toggle {
    z-index: 19;
    /* Proper layering for dark mode toggle */
}

/* Style for language toggle button */
#toggleLangBtn {
    position: fixed;
    /* Stays in place when scrolling */
    bottom: 20px;
    /* Position from bottom */
    left: 20px;
    /* Position from left */
    z-index: 19;
    /* Above most elements */
    background-color: #ffffff;
    /* White background */
    color: #CF0820;
    /* Red text */
    border: none;
    /* No border */
    border-radius: 50%;
    /* Circular shape */
    width: 49px;
    /* Fixed width */
    height: 49px;
    /* Fixed height */
    display: flex;
    /* Flexbox for centering */
    align-items: center;
    /* Center vertically */
    justify-content: center;
    /* Center horizontally */
    cursor: pointer;
    /* Pointer cursor on hover */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
    /* Shadow */
    transition: all 0.3s ease;
    /* Smooth hover animation */
    font-weight: bold;
    /* Bold text */
    font-size: 16px;
    /* Text size */
}

/* Hover effect for language toggle */
#toggleLangBtn:hover {
    transform: translateY(-2px);
    /* Move up slightly */
    box-shadow: 0 7px 14px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
    /* Bigger shadow */
    background-color: #CF0820;
    /* Red background */
    color: white;
    /* White text */
}

#searchBar:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px #cf082033;
}

#myBtn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 19;
    background-color: #ffffff;
    color: #CF0820;
    border: none;
    border-radius: 50%;
    width: 49px;
    height: 49px;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
    font-weight: bold;
    font-size: 16px;
    opacity: 0;
    transform: translateY(10px);
}

#myBtn:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15), 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: #CF0820;
    color: white;
}

#myBtn:active {
    transform: translateY(-2px) scale(1.02);
    transition: all 0.1s ease;
}

/* Add smooth scroll behavior */
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}