/* Custom Styles for Manju Lifeline Medical Store */

body {
    font-family: 'Inter', sans-serif;
}

.bg-primary {
    background-color: #004D99;
}

/* Deep Trust Blue */
.text-primary {
    color: #004D99;
}

.bg-secondary {
    background-color: #00A36C;
}

/* Lifeline Green */
.text-secondary {
    color: #00A36C;
}

.text-accent {
    color: #CC0000;
}

/* Urgency Red */
.border-primary {
    border-color: #004D99;
}

.btn-primary {
    background-color: #004D99;
    transition: all 0.2s;
}

.btn-primary:hover {
    background-color: #0066CC;
    box-shadow: 0 4px 10px rgba(0, 77, 153, 0.4);
}

.btn-secondary {
    background-color: #00A36C;
    transition: all 0.2s;
}

.btn-secondary:hover {
    background-color: #00C285;
    box-shadow: 0 4px 10px rgba(0, 163, 108, 0.4);
}

/* Mobile optimizations */
@media (max-width: 640px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Mobile Bookings FAB */
#mobile-bookings-fab {
    box-shadow: 0 8px 20px rgba(0, 163, 108, 0.4);
}

#mobile-bookings-fab:active {
    transform: scale(0.95);
}

#mobile-bookings-menu {
    animation: slideUpFade 0.3s ease-out;
}

@keyframes slideUpFade {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Improve modal on mobile */
@media (max-width: 640px) {
    #appointment-modal > div {
        margin: 1rem;
        max-height: calc(100vh - 2rem);
        overflow-y: auto;
    }
}

/* Horizontal scrolling for doctors */
#doctor-list {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

#doctor-list::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

/* Navigation buttons for horizontal scroll */
#scroll-left-btn,
#scroll-right-btn {
    transition: opacity 0.3s, transform 0.2s;
}

#scroll-left-btn:hover,
#scroll-right-btn:hover {
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

#scroll-left-btn:active,
#scroll-right-btn:active {
    transform: translateY(-50%) scale(0.95);
}

/* Show buttons on mobile too */
@media (max-width: 640px) {
    #scroll-left-btn,
    #scroll-right-btn {
        padding: 0.5rem;
    }
    
    #scroll-left-btn svg,
    #scroll-right-btn svg {
        height: 1.25rem;
        width: 1.25rem;
    }
}

/* Doctor card styling for horizontal scroll */
.doctor-card {
    flex: 0 0 auto;
    min-width: 280px;
    max-width: 320px;
    width: 100%;
}

@media (min-width: 640px) {
    .doctor-card {
        min-width: 300px;
        max-width: 350px;
    }
}

@media (min-width: 1024px) {
    .doctor-card {
        min-width: 320px;
        max-width: 380px;
    }
}

/* Smooth scroll behavior */
.scroll-smooth {
    scroll-behavior: smooth;
}

/* Hide scrollbar but keep functionality */
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* Bookings dropdown menu */
#bookings-menu {
    animation: fadeInDown 0.2s ease-out;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Ensure dropdown is above other content */
#bookings-dropdown {
    z-index: 100;
}