/* =============================================
   Vitacare Pharmaceuticals - Main Stylesheet
   ============================================= */

:root {
    --vc-green:    #1B5E20;
    --vc-green-md: #2E7D32;
    --vc-green-lt: #43A047;
    --vc-accent:   #00BFA5;
    --vc-dark:     #1a1a2e;
    --vc-gray:     #f8f9fa;
    --vc-text:     #333;
    --vc-muted:    #6c757d;
}

* { box-sizing: border-box; }
body { font-family: 'Poppins', sans-serif; color: var(--vc-text); background: #fff; }

/* ---- TOP BAR ---- */
.top-bar {
    background: #1a1a2e;
    color: #ccc;
    padding: 6px 0;
    font-size: 0.8rem;
}

/* ---- LOGO ---- */
.vc-logo {
    width: 42px; height: 42px; border-radius: 10px;
    background: linear-gradient(135deg, var(--vc-green-md), var(--vc-accent));
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.vc-logo span { color: #fff; font-weight: 800; font-size: 1rem; letter-spacing: -1px; }
.vc-logo-lg { width: 60px; height: 60px; border-radius: 14px; }
.vc-logo-lg span { font-size: 1.4rem; }
.vc-logo-white { background: rgba(255,255,255,0.15); }

.brand-name { font-weight: 700; font-size: 1rem; color: var(--vc-green-md); line-height: 1.1; }
.brand-sub { font-size: 0.55rem; letter-spacing: 2px; color: var(--vc-muted); text-transform: uppercase; }

/* ---- NAVBAR ---- */
.navbar { border-bottom: 3px solid var(--vc-green-lt); }
.nav-link { font-weight: 500; color: #444 !important; font-size: 0.88rem; }
.nav-link:hover { color: var(--vc-green-md) !important; }
.nav-icon-btn { color: var(--vc-dark); font-size: 1.1rem; text-decoration: none; font-weight: 500; font-size: 0.88rem; }
.nav-icon-btn:hover { color: var(--vc-green-md); }
.cart-btn { position: relative; }
.cart-badge { position: absolute; top: -8px; right: -8px; background: var(--vc-green-md); color: #fff; font-size: 0.65rem; border-radius: 50%; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; font-weight: 700; }

/* ---- HERO ---- */
.hero-section {
    min-height: 520px;
    background: linear-gradient(135deg, #0d2137 0%, #1B5E20 50%, #004d40 100%);
    position: relative;
    display: flex;
    align-items: center;
}
.hero-section::before {
    content: '';
    position: absolute; inset: 0;
    background: url('/assets/images/hero-bg.jpg') center/cover no-repeat;
    opacity: 0.1;
}
.hero-overlay { width: 100%; height: 100%; position: relative; z-index: 1; padding: 80px 0; }
.hero-badge { background: rgba(255,255,255,0.15); color: #fff; font-size: 0.8rem; border-radius: 50px; padding: 4px 16px; border: 1px solid rgba(255,255,255,0.3); }
.hero-title { font-size: 3rem; font-weight: 800; color: #fff; margin-top: 16px; line-height: 1.15; }
.text-accent { color: #80cbc4; }
.hero-desc { color: rgba(255,255,255,0.8); font-size: 1rem; margin: 16px 0 28px; max-width: 520px; }

/* ---- STATS BAR ---- */
.stats-bar { background: var(--vc-green-md); padding: 24px 0; }
.stat-item { padding: 8px; }
.stat-icon { font-size: 1.5rem; color: rgba(255,255,255,0.7); margin-bottom: 4px; }
.stat-number { font-size: 1.6rem; font-weight: 800; color: #fff; }
.stat-label { font-size: 0.78rem; color: rgba(255,255,255,0.8); }

/* ---- SECTION STYLES ---- */
.section-tag { background: #e8f5e9; color: var(--vc-green-md); font-size: 0.78rem; font-weight: 600; padding: 4px 14px; border-radius: 50px; border: 1px solid #c8e6c9; display: inline-block; margin-bottom: 8px; }
.section-title { font-size: 2rem; font-weight: 700; color: #1a1a2e; }
.section-desc { color: var(--vc-muted); line-height: 1.7; }

/* ---- ABOUT ---- */
.about-image-grid { position: relative; height: 360px; }
.about-img { border-radius: 12px; position: absolute; object-fit: cover; box-shadow: 0 8px 24px rgba(0,0,0,0.15); }
.about-img-1 { width: 65%; height: 220px; top: 0; left: 0; }
.about-img-2 { width: 50%; height: 180px; top: 40%; right: 0; }
.about-img-3 { width: 45%; height: 140px; bottom: 0; left: 5%; }
.about-features { list-style: none; padding: 0; }
.about-features li { padding: 6px 0; font-size: 0.9rem; }
.about-features li i { margin-right: 8px; }

/* ---- CATEGORIES ---- */
.category-card { display: flex; flex-direction: column; align-items: center; padding: 20px 10px; background: #fff; border-radius: 12px; transition: all 0.25s; border: 2px solid transparent; }
.category-card:hover { transform: translateY(-4px); border-color: var(--vc-green-lt); box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
.cat-icon { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 8px; transition: transform 0.2s; }
.cat-name { font-size: 0.85rem; font-weight: 600; color: #333; }

/* ---- HOW TO ORDER ---- */
.step-card { background: #fff; border-radius: 12px; padding: 30px 20px; position: relative; border: 1px solid #e9ecef; transition: box-shadow 0.2s; }
.step-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
.step-num { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--vc-green-md); color: #fff; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; }
.step-icon { font-size: 2rem; color: var(--vc-green-md); margin-bottom: 12px; }

/* ---- CTA ---- */
.cta-box { background: linear-gradient(135deg, var(--vc-green-md), var(--vc-accent)); color: #fff; border-radius: 20px; padding: 50px 30px; }
.cta-box h2 { font-weight: 800; }

/* ---- PRODUCTS PAGE ---- */
.products-page-header { background: #f8f9fa; border-radius: 10px; padding: 16px 20px; margin-bottom: 4px; border: 1px solid #e9ecef; }
.page-title { font-weight: 600; }
.search-filter-bar { background: #fff; padding: 12px 0; }

/* Products Table */
.products-table { font-size: 0.85rem; }
.products-table th { background: #1a1a2e; color: #fff; font-weight: 600; font-size: 0.8rem; padding: 12px 8px; position: sticky; top: 0; z-index: 10; }
.products-table td { vertical-align: middle; padding: 8px 8px; border-bottom: 1px solid #f0f0f0; }
.products-table tr:hover td { background: #f0faf0; }
.drug-name { font-weight: 500; color: #1a1a2e; line-height: 1.4; }
.out-of-stock-row td { opacity: 0.6; }
.cat-badge { background: #e8f5e9; color: var(--vc-green-md); font-weight: 500; font-size: 0.65rem; }

/* Quantity Control */
.qty-control { display: flex; align-items: center; gap: 4px; }
.qty-btn { width: 28px; height: 28px; border: 2px solid #dee2e6; background: #fff; border-radius: 6px; font-size: 1rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s; padding: 0; line-height: 1; }
.qty-btn:hover { background: var(--vc-green-md); color: #fff; border-color: var(--vc-green-md); }
.qty-input { width: 54px; height: 28px; text-align: center; border: 2px solid #dee2e6; border-radius: 6px; font-size: 0.85rem; font-weight: 600; }
.qty-input:focus { outline: none; border-color: var(--vc-green-md); }
.qty-control-mini { display: flex; align-items: center; gap: 3px; }
.qty-control-mini .qty-input { width: 50px; height: 26px; font-size: 0.8rem; }
.qty-control-mini .qty-btn { width: 24px; height: 26px; font-size: 0.85rem; }

/* Wishlist button */
.wishlist-btn { background: none; border: none; cursor: pointer; color: #ccc; font-size: 1.1rem; transition: all 0.2s; padding: 4px; }
.wishlist-btn:hover, .wishlist-btn.active { color: #f59e0b; }

/* Cart Summary Float */
.cart-summary-float {
    position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
    background: var(--vc-green-md); color: #fff; border-radius: 50px; padding: 12px 24px;
    font-size: 0.9rem; font-weight: 500; box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    z-index: 1000; min-width: 300px;
}

/* ---- AUTH ---- */
.auth-card { border: none; border-radius: 16px; overflow: hidden; }
.auth-tabs { display: flex; background: #f8f9fa; }
.auth-tab { flex: 1; padding: 14px; text-align: center; text-decoration: none; color: #666; font-weight: 500; font-size: 0.9rem; border-bottom: 3px solid transparent; transition: all 0.2s; }
.auth-tab.active { background: #fff; color: var(--vc-green-md); border-bottom-color: var(--vc-green-md); font-weight: 600; }

/* ---- FOOTER ---- */
.site-footer { background: #1a1a2e; color: #ccc; padding: 50px 0 20px; }
.footer-brand-name { font-weight: 700; font-size: 1rem; color: #fff; }
.footer-brand-sub { font-size: 0.55rem; letter-spacing: 2px; color: #aaa; text-transform: uppercase; }
.footer-desc { color: #999; font-size: 0.85rem; line-height: 1.7; }
.footer-heading { color: #fff; font-weight: 600; font-size: 0.95rem; margin-bottom: 12px; }
.footer-links { list-style: none; padding: 0; }
.footer-links li a { color: #999; text-decoration: none; font-size: 0.85rem; display: block; padding: 3px 0; transition: color 0.2s; }
.footer-links li a:hover { color: #80cbc4; }
.footer-contact { list-style: none; padding: 0; }
.footer-contact li { color: #999; font-size: 0.85rem; padding: 4px 0; display: flex; gap: 10px; }
.footer-contact li i { color: var(--vc-accent); margin-top: 2px; flex-shrink: 0; }
.footer-divider { border-color: rgba(255,255,255,0.1); }
.footer-copy { color: #777; font-size: 0.8rem; }
.social-links { display: flex; gap: 10px; }
.social-btn { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; color: #ccc; text-decoration: none; font-size: 0.9rem; transition: all 0.2s; }
.social-btn:hover { background: var(--vc-accent); color: #fff; }
.whatsapp-social { background: #25d366 !important; }
.whatsapp-footer-btn { background: #25d366; border-color: #25d366; }

/* ---- FLOATING WHATSAPP ---- */
.whatsapp-float {
    position: fixed; bottom: 24px; right: 24px;
    background: #25d366; color: #fff; border-radius: 50px;
    display: flex; align-items: center; gap: 8px;
    padding: 12px 18px; text-decoration: none;
    box-shadow: 0 4px 20px rgba(37,211,102,0.4);
    font-weight: 500; font-size: 0.9rem;
    z-index: 999; transition: all 0.25s;
}
.whatsapp-float:hover { background: #1ebe5d; color: #fff; transform: translateY(-2px); box-shadow: 0 6px 24px rgba(37,211,102,0.5); }
.whatsapp-float i { font-size: 1.4rem; }
.whatsapp-label { font-size: 0.8rem; white-space: nowrap; }

/* ---- INVOICE ---- */
.invoice-box { background: #fff; border-radius: 12px; }
.invoice-section-title { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; color: var(--vc-muted); margin-bottom: 4px; font-weight: 600; }
.invoice-table { font-size: 0.85rem; }

/* ---- MISC ---- */
.badge { font-weight: 500; }
.btn-primary { background: var(--vc-green-md); border-color: var(--vc-green-md); }
.btn-primary:hover { background: var(--vc-green); border-color: var(--vc-green); }
.text-primary { color: var(--vc-green-md) !important; }
.bg-primary { background-color: var(--vc-green-md) !important; }

/* Pagination */
.page-item.active .page-link { background: var(--vc-green-md); border-color: var(--vc-green-md); }
.page-link { color: var(--vc-green-md); }

/* Empty states */
.empty-cart { padding: 60px 0; }

/* Responsive */
@media (max-width: 768px) {
    .hero-title { font-size: 2rem; }
    .about-image-grid { height: 250px; }
    .about-img-3 { display: none; }
    .whatsapp-label { display: none; }
    .whatsapp-float { padding: 12px; border-radius: 50%; }
    .cart-summary-float { width: 90%; min-width: unset; }
}