/* Custom CSS for EVENBOTS website */

body {
    font-family: 'Inter', sans-serif;
    background-color: #f8fafc; /* Light blue-gray for background */
    color: #334155; /* Slate-700 for default text */
}

/* Custom scrollbar for better aesthetics */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #cbd5e1; /* Gray-300 */
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: #60a5fa; /* Blue-400 */
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #3b82f6; /* Blue-500 */
}
/* style.css */

/* Custom CSS for Carousel */
.carousel-item {
    flex: 0 0 100%; /* Each item takes full width of carousel-inner by default */
    box-sizing: border-box; /* Include padding/border in element's total width */
}
.carousel-inner {
    display: flex;
    transition: transform 0.5s ease-in-out;
    will-change: transform;
}
.carousel-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 0.75rem 1rem;
    border-radius: 9999px; /* Full rounded */
    cursor: pointer;
    z-index: 30; /* Above carousel items */
    font-size: 1.5rem;
    line-height: 1;
    transition: background-color 0.3s;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.carousel-button:hover {
    background-color: rgba(0, 0, 0, 0.7);
}
.carousel-button-prev {
    left: 1rem;
}
.carousel-button-next {
    right: 1rem;
}
.carousel-indicators {
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
    gap: 0.75rem;
}
.carousel-indicator-dot {
    width: 0.75rem;
    height: 0.75rem;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 9999px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
}
.carousel-indicator-dot.active {
    background-color: #002D62; /* OTSI Deep Navy */
    transform: scale(1.2);
}

/* Responsive adjustments for carousel item width */
@media (min-width: 768px) { /* md breakpoint */
    .carousel-item {
        flex: 0 0 50%; /* Show 2 items on medium screens */
    }
}
@media (min-width: 1024px) { /* lg breakpoint */
    .carousel-item {
        flex: 0 0 33.3333%; /* Show 3 items on large screens */
    }
}

/* Chatbot Icon and Container Styles - Updated to match user's example and Evenbots theme */
  

       /* Floating Chat Icon and Message Container */
        .chat-icon-container {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 1000; /* Ensure it's above other content */
            display: flex; /* Use flex to align icon and message */
            align-items: center;
            gap: 10px; /* Space between message and icon */
        }

        .chat-icon {
            background-color: #5b08c7; /* Blue-600 */
            color: white;
            border-radius: 9999px; /* Full rounded for a circle */
            width: 60px;
            height: 60px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Subtle shadow */
            transition: transform 0.2s ease-in-out;
        }

        .chat-icon:hover {
            transform: scale(1.05);
        }

        .chat-message-tag {
            background-color: #5b08c7; /* Blue-700 */
            color: rgb(255, 252, 252);
            padding: 8px 12px;
            border-radius: 9999px; /* Pill shape */
            font-size: 0.875rem; /* text-sm */
            font-weight: 600; /* font-semibold */
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            opacity: 1;
            transform: translateX(0);
            transition: opacity 0.3s ease-out, transform 0.3s ease-out;
        }

        .chat-message-tag.hidden {
            opacity: 0;
            transform: translateX(20px); /* Move it out of view when hidden */
            pointer-events: none; /* Disable interaction when hidden */
        }


        /* Chatbot Container for animation */
        .chatbot-window {
            position: fixed;
            bottom: 90px; /* Position above the icon */
            right: 20px;
            z-index: 999;
            width: min(90vw, 384px); /* max-w-md is 384px, so min(90vw, 384px) */
            height: 80vh;
            max-height: 600px; /* Limit max height */
            background-color: white;
            border-radius: 0.75rem; /* rounded-xl */
            box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05); /* shadow-lg */
            display: flex;
            flex-direction: column;
            /* Initial state: hidden and scaled down */
            opacity: 0;
            transform: scale(0.8);
            pointer-events: none; /* Disable interaction when hidden */
            transition: opacity 0.3s ease-out, transform 0.3s ease-out;
        }

        .chatbot-window.open {
            opacity: 1;
            transform: scale(1);
            pointer-events: auto; /* Enable interaction when open */
        }

        @media (max-width: 640px) {
            .chatbot-window {
                width: 95vw; /* Wider on small screens */
                right: 2.5vw;
                bottom: 80px; /* Adjust for smaller icon */
            }
            .chat-icon-container {
                bottom: 15px;
                right: 15px;
                /* Adjust gap and alignment for smaller screens if needed */
                gap: 8px;
            }
            .chat-icon {
                width: 50px;
                height: 50px;
            }
            .chat-message-tag {
                padding: 6px 10px;
                font-size: 0.8rem;
            }
        }