/* Professional Color Scheme Updates */

/* Update CSS Variables */
:root {
    /* Professional Blue & Green Color Palette */
    --primary-blue: #1565C0 !important;        /* Deep Professional Blue */
    --primary-blue-light: #42A5F5 !important;  /* Light Blue for accents */
    --primary-blue-dark: #0D47A1 !important;   /* Dark Blue for depth */
    
    --secondary-green: #2E7D32 !important;     /* Professional Green */
    --secondary-green-light: #66BB6A !important; /* Light Green for accents */
    --secondary-green-dark: #1B5E20 !important; /* Dark Green for depth */
    
    --neutral-gray: #F5F7FA !important;        /* Light background */
    --neutral-gray-dark: #37474F !important;   /* Dark text */
    --neutral-white: #FFFFFF !important;       /* Pure white */
    
    --accent-orange: #FF8F00 !important;       /* Warning/accent color */
    --success-green: #4CAF50 !important;       /* Success states */
    --error-red: #D32F2F !important;          /* Error states */
}

/* Logo Color */
.logo {
    color: var(--primary-blue) !important;
}

/* Search Button */
.search-bar button {
    background: var(--secondary-green) !important;
}

.search-bar button:hover {
    background: var(--secondary-green-dark) !important;
}

/* Header Action Buttons */
.icon-btn {
    background: var(--primary-blue) !important;
}

.icon-btn:hover {
    background: var(--primary-blue-dark) !important;
}

.icon-btn .badge {
    background: var(--secondary-green) !important;
}

.sign-in-btn:hover {
    color: var(--primary-blue) !important;
}

/* Navigation */
.nav {
    background: var(--primary-blue) !important;
}

.nav-menu a:hover {
    color: var(--secondary-green-light) !important;
}

/* Hero Slider */
.hero-slider {
    background: var(--primary-blue) !important;
}

.hero-slide {
    background: linear-gradient(135deg, var(--primary-blue), var(--secondary-green)) !important;
}

/* CTA Button */
.cta-btn {
    background: var(--secondary-green) !important;
}

.cta-btn:hover {
    background: var(--secondary-green-dark) !important;
    box-shadow: 0 5px 15px rgba(46, 125, 50, 0.3) !important;
}

/* Service Cards */
.service-card.telehealth {
    background: linear-gradient(135deg, rgba(21,101,192,0.85), rgba(66,165,245,0.85)), url('https://images.unsplash.com/photo-1622253692010-333f2da6031d?w=600&q=80') !important;
}

.service-card.loyalty {
    background: linear-gradient(135deg, rgba(156,39,176,0.85), rgba(103,58,183,0.85)), url('https://images.unsplash.com/photo-1584308666744-a24ffba8ca31?w=600&q=80') !important;
    background-size: cover;
    background-position: center;
}

.service-card.lab-test {
    background: linear-gradient(135deg, rgba(46,125,50,0.85), rgba(76,175,80,0.85)), url('https://images.unsplash.com/photo-1576091160550-2173dba999ef?w=600&q=80') !important;
    background-size: cover;
    background-position: center;
}

.service-card.vaccination {
    background: linear-gradient(135deg, rgba(255,152,0,0.85), rgba(255,193,7,0.85)), url('https://images.unsplash.com/photo-1584118627021-8b5b1dbce2c1?w=600&q=80') !important;
    background-size: cover;
    background-position: center;
}

/* Products Section */
.products {
    background: var(--neutral-gray) !important;
}

.product-category {
    color: var(--secondary-green) !important;
}

.product-price {
    color: var(--secondary-green) !important;
}

.add-to-cart {
    background: var(--primary-blue) !important;
}

.add-to-cart:hover {
    background: var(--primary-blue-dark) !important;
}

/* Wishlist Button */
.wishlist-btn {
    color: var(--primary-blue) !important;
}

.wishlist-btn.active {
    color: var(--error-red) !important;
}

/* Quick View Button */
.quick-view-btn {
    background: var(--secondary-green) !important;
}

.quick-view-btn:hover {
    background: var(--secondary-green-dark) !important;
}

/* Promo Section */
.promo-card.featured {
    background: linear-gradient(135deg, var(--primary-blue), var(--secondary-green)) !important;
}

/* Partners Section */
.partners-section {
    background: var(--neutral-gray) !important;
}

/* Testimonials */
.testimonial-card {
    background: var(--neutral-white) !important;
    border-left: 4px solid var(--primary-blue) !important;
}

/* News Section */
.news-section {
    background: var(--neutral-gray) !important;
}

/* Store Locations */
.stores-section {
    background: var(--neutral-white) !important;
}

.store-card {
    border-left: 4px solid var(--secondary-green) !important;
}

/* Footer - HealthPlus Style (Light Grey Background, Black Text) */
.footer {
    background: #F5F5F5 !important; /* Light grey like HealthPlus */
    color: #333333 !important; /* Dark text */
}

.footer h3 {
    color: #1565C0 !important; /* Blue headings */
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    margin-bottom: 20px !important;
}

.footer p,
.footer li,
.footer-col {
    color: #666666 !important; /* Grey text */
    font-size: 14px !important;
}

.footer a {
    color: #666666 !important; /* Grey links */
    text-decoration: none !important;
}

.footer a:hover {
    color: #1565C0 !important; /* Blue on hover */
}

.footer-bottom {
    background: #E8E8E8 !important; /* Slightly darker grey */
    border-top: 1px solid #DDDDDD !important;
}

.footer-bottom p,
.footer-bottom a {
    color: #666666 !important;
}

/* Hide wishlist button */
.wishlist-btn {
    display: none !important;
}

/* Newsletter */
.newsletter h3 {
    color: #1565C0 !important;
}

.newsletter-form input {
    background: white !important;
    border: 1px solid #DDDDDD !important;
    color: #333333 !important;
}

.newsletter-form button {
    background: #1565C0 !important;
}

/* Newsletter - Modern Design */
.newsletter {
    background: transparent !important;
    padding: 0 !important;
}

.newsletter h3 {
    color: var(--secondary-green-light) !important;
    font-size: 20px !important;
    margin-bottom: 15px !important;
}

.newsletter-form {
    display: flex !important;
    gap: 10px !important;
    margin-bottom: 20px !important;
}

.newsletter-form input {
    flex: 1 !important;
    padding: 12px 16px !important;
    border: 1px solid #D1D5DB !important;
    background: white !important;
    color: #333 !important;
    border-radius: 8px !important;
    font-size: 14px !important;
}

.newsletter-form input::placeholder {
    color: #6B7280 !important;
}

.newsletter-form input:focus {
    outline: none !important;
    border-color: var(--secondary-green) !important;
    background: rgba(255,255,255,0.15) !important;
}

.newsletter-form button {
    padding: 12px 24px !important;
    background: #D1D5DB !important;
    color: #333 !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.newsletter-form button:hover {
    background: #9CA3AF !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(156,163,175,0.3) !important;
}

.qr-code {
    text-align: center !important;
    margin-top: 20px !important;
}

.qr-placeholder {
    width: 120px !important;
    height: 120px !important;
    background: white !important;
    margin: 0 auto 10px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
}

.qr-code p {
    color: rgba(255,255,255,0.8) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    margin-top: 8px !important;
}

/* App Download */
.app-download {
    background: var(--primary-blue) !important;
}

/* WhatsApp Button */
.whatsapp-btn {
    background: var(--secondary-green) !important;
}

.whatsapp-btn:hover {
    background: var(--secondary-green-dark) !important;
}

/* Modal */
.modal-content {
    border-top: 4px solid var(--primary-blue) !important;
}

.login-btn {
    background: var(--accent-orange) !important;
}

.login-btn:hover {
    background: #E65100 !important;
}

/* Social Login Buttons */
.social-btn.facebook {
    background: var(--primary-blue) !important;
}

.social-btn.google {
    background: var(--error-red) !important;
}

.social-btn.twitter {
    background: var(--primary-blue-light) !important;
}