@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
    --primary: #4f46e5;
    --primary-light: #818cf8;
    --primary-dark: #3730a3;
    --secondary: #ec4899;
    --dark: #0f172a;
    --light: #f8fafc;
    --gray: #64748b;
    --border: #e2e8f0;
}

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: var(--light);
    color: var(--dark);
    overflow-x: hidden;
    touch-action: manipulation;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

/* Animations & Transitions */
.transition-all { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.hover-lift:hover { transform: translateY(-8px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); }

/* Buttons */
.btn { font-weight: 600; padding: 0.6rem 1.5rem; border-radius: 50rem; transition: all 0.3s ease; }
.btn-primary { background: linear-gradient(135deg, var(--primary), var(--primary-light)); border: none; box-shadow: 0 4px 15px rgba(79, 70, 229, 0.3); }
.btn-primary:hover { background: linear-gradient(135deg, var(--primary-dark), var(--primary)); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(79, 70, 229, 0.4); }

/* Navbar */
.navbar { background: rgba(255, 255, 255, 0.9) !important; backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
.navbar-brand { color: var(--primary) !important; font-weight: 800; font-size: 1.5rem; }
.nav-link { color: var(--dark) !important; font-weight: 500; }
.nav-link:hover { color: var(--primary) !important; }

/* Hero Section */
.hero-section {
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
    position: relative;
    overflow: hidden;
    padding: 100px 0 120px 0;
    color: white;
}
.hero-blob {
    position: absolute;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(79,70,229,0.3) 0%, rgba(0,0,0,0) 70%);
    top: -200px; right: -200px;
    border-radius: 50%;
    z-index: 0;
    animation: pulse 4s infinite alternate;
}
@keyframes pulse { 0% { transform: scale(1); } 100% { transform: scale(1.1); } }
.hero-content { position: relative; z-index: 1; }
.hero-title { font-size: 3.5rem; font-weight: 800; line-height: 1.2; background: linear-gradient(to right, #fff, #c7d2fe); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

/* Cards */
.card { border-radius: 20px; border: 1px solid rgba(255,255,255,0.8); box-shadow: 0 10px 30px rgba(0,0,0,0.03); overflow: hidden; background: white; }
.product-img-wrap { position: relative; overflow: hidden; height: 220px; }
.product-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.card:hover .product-img { transform: scale(1.05); }

/* Admin Dashboard Specific */
.admin-layout { display: flex; min-height: 100vh; }
.admin-sidebar { width: 280px; background: #0f172a; color: white; padding: 20px; display: flex; flex-direction: column; transition: 0.3s; }
.admin-sidebar .nav-link { color: #cbd5e1 !important; padding: 12px 20px; border-radius: 12px; margin-bottom: 5px; font-weight: 500; transition: 0.3s; display:flex; align-items:center; gap: 10px; }
.admin-sidebar .nav-link:hover, .admin-sidebar .nav-link.active { background: var(--primary); color: white !important; }
.admin-content { flex: 1; background: #f1f5f9; padding: 30px; overflow-y: auto; height: 100vh; }

.stat-card { border-radius: 20px; border:none; padding: 25px; color: white; position: relative; overflow: hidden; }
.stat-card::after { content: ''; position: absolute; top: -50%; right: -50%; width: 100%; height: 200%; background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 70%); transform: rotate(45deg); }
.stat-primary { background: linear-gradient(135deg, #4f46e5, #818cf8); }
.stat-success { background: linear-gradient(135deg, #10b981, #34d399); }
.stat-warning { background: linear-gradient(135deg, #f59e0b, #fbbf24); }
.stat-danger { background: linear-gradient(135deg, #ef4444, #f87171); }

/* Table overrides */
.table-custom { background: white; border-radius: 15px; overflow: hidden; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); }
.table-custom thead th { background: #f8fafc; border-bottom: 2px solid #e2e8f0; color: #64748b; font-weight: 600; text-transform: uppercase; font-size: 0.75rem; padding: 15px; }
.table-custom tbody td { padding: 15px; vertical-align: middle; border-bottom: 1px solid #f1f5f9; }

@media (max-width: 768px) {
    .admin-layout { flex-direction: column; }
    .admin-sidebar { width: 100%; height: auto; padding: 15px; display: none; }
    .admin-sidebar.show { display: flex; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1050; background: #0f172a; overflow-y: auto; }
    .admin-content { padding: 15px; padding-bottom: 90px; height: auto; }
    .hero-title { font-size: 2.5rem; }
    .desktop-only { display: none !important; }
}

/* App-like Cart */
.cart-item-card { border-radius: 16px; border: none; box-shadow: 0 4px 15px rgba(0,0,0,0.04); background: white; transition: 0.3s; }
.cart-item-card:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,0,0,0.08); }

/* Product Page Fancy */
.product-showcase { border-radius: 24px; overflow: hidden; }
.price-card { border-radius: 24px; border: 1px solid rgba(79,70,229,0.1); background: white; }
.feature-list li { margin-bottom: 12px; display: flex; align-items: center; gap: 10px; color: #475569; font-size: 0.95rem; }

/* Footer Fancy */
.footer-fancy { background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%); color: #e2e8f0; position: relative; overflow: hidden; }
.footer-fancy::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, #ec4899, #4f46e5, #34d399); }
.footer-link { color: #94a3b8; text-decoration: none; transition: 0.3s; }
.footer-link:hover { color: #fff; padding-left: 5px; }