/* ============================================
   E-Commerce Platform - Frontend Styles
   ============================================ */

/* Base */
:root {
    --primary: #4F46E5;
    --primary-dark: #4338CA;
    --secondary: #7C3AED;
    --success: #10B981;
    --danger: #EF4444;
    --warning: #F59E0B;
    --info: #3B82F6;
}

body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    color: #1f2937;
    line-height: 1.6;
}

a { transition: color 0.2s; }

/* Navbar */
.navbar-brand { font-size: 1.3rem; }
.navbar .nav-link { font-weight: 500; padding: 0.5rem 1rem !important; transition: color 0.2s; }
.navbar .nav-link:hover { color: var(--primary) !important; }
.top-bar { font-size: 0.8rem; }

/* Hero */
.hero-section { position: relative; overflow: hidden; }
.hero-section::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
}

/* Product Cards */
.product-card {
    border-radius: 12px !important;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.1) !important;
}
.product-card .card-img-top {
    height: 250px;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.product-card:hover .card-img-top {
    transform: scale(1.05);
}

/* Category Cards */
.hover-lift { transition: transform 0.3s ease; }
.hover-lift:hover { transform: translateY(-3px); }

/* Buttons */
.btn-primary {
    background: var(--primary);
    border-color: var(--primary);
}
.btn-primary:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}

/* Cart */
.cart-qty-input { text-align: center; }

/* Checkout */
.payment-method { cursor: pointer; }

/* User Panel */
.nav-link.active,
.nav-link:hover {
    color: var(--primary) !important;
}

/* Flash Messages */
.alert { border-radius: 10px; border: none; }
.alert-success { background: #d1fae5; color: #065f46; }
.alert-danger { background: #fee2e2; color: #991b1b; }
.alert-warning { background: #fef3c7; color: #92400e; }
.alert-info { background: #dbeafe; color: #1e40af; }

/* Footer */
footer a:hover { color: #fff !important; }

/* Badges */
.badge { font-weight: 500; }

/* Tables */
.table th { font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px; color: #6b7280; }

/* Search Results Dropdown */
#searchResults .search-item {
    padding: 10px 15px;
    cursor: pointer;
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.2s;
}
#searchResults .search-item:hover { background: #f3f4f6; }

/* Pagination */
.pagination .page-link {
    border-radius: 8px !important;
    margin: 0 2px;
    border: none;
    color: #6b7280;
}
.pagination .page-item.active .page-link {
    background: var(--primary);
    color: #fff;
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #999; }

/* Dark Mode Overrides */
[data-bs-theme="dark"] {
    --bs-body-bg: #111827;
    --bs-body-color: #f3f4f6;
}
[data-bs-theme="dark"] .card { background: #1f2937; border-color: #374151; }
[data-bs-theme="dark"] .bg-white { background: #1f2937 !important; }
[data-bs-theme="dark"] .bg-light { background: #374151 !important; }
[data-bs-theme="dark"] .table { --bs-table-bg: #1f2937; --bs-table-hover-bg: #374151; }
[data-bs-theme="dark"] .navbar { background: #1f2937 !important; }
[data-bs-theme="dark"] .top-bar { background: #030712 !important; }
[data-bs-theme="dark"] footer { background: #030712 !important; }
[data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select {
    background: #374151; border-color: #4b5563; color: #f3f4f6;
}
[data-bs-theme="dark"] .text-dark { color: #f3f4f6 !important; }
[data-bs-theme="dark"] .border-bottom { border-color: #374151 !important; }

/* Responsive */
@media (max-width: 768px) {
    .hero-section { padding: 50px 0 !important; }
    .hero-section h1 { font-size: 2rem; }
    .product-card .card-img-top { height: 180px; }
    #searchResults { width: calc(100vw - 30px) !important; }
}

/* Animations */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in { animation: fadeInUp 0.5s ease forwards; }

/* Print */
@media print {
    .no-print { display: none !important; }
    .navbar, footer, .sidebar { display: none !important; }
}