/* Modern Purple Theme Override */
/* Tambahkan file ini setelah style.css */

/* Force Override Colors */
:root {
    --primary: #6C63FF !important;
    --primary-dark: #5548E8 !important;
    --secondary: #4834DF !important;
    --accent: #FF6B6B !important;
    --accent-2: #4ECDC4 !important;
    --dark: #2D3436 !important;
    --light: #DFE6E9 !important;
    --danger: #FF6B6B !important;
    --warning: #FFA502 !important;
    --info: #3742FA !important;
    --success: #1DD1A1 !important;
}

/* Navbar - Purple Gradient */
.navbar {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4) !important;
}

/* Hero Overlay - Purple */
.hero::after {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.9), rgba(118, 75, 162, 0.85)) !important;
}

/* Hero Title - Gradient Text */
.hero h1 {
    background: linear-gradient(to right, #fff, #f0f0f0) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* Section Title - Purple Gradient */
.section-title {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.section-title::after {
    background: linear-gradient(90deg, #667eea, #764ba2) !important;
}

.section-title::before {
    background: #667eea !important;
}

/* Buttons - Modern Gradients */
.btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4) !important;
}

.btn-primary:hover {
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.6) !important;
}

.btn-secondary {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important;
    box-shadow: 0 4px 15px rgba(240, 147, 251, 0.4) !important;
}

.btn-info {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%) !important;
    box-shadow: 0 4px 15px rgba(79, 172, 254, 0.4) !important;
}

.btn-success {
    background: linear-gradient(135deg, #1dd1a1, #10ac84) !important;
}

.btn-danger {
    background: linear-gradient(135deg, #FF6B6B, #FF8E53) !important;
}

.btn-warning {
    background: linear-gradient(135deg, #ffa502, #ff6348) !important;
}

/* Product Card - Purple Theme */
.product-card {
    box-shadow: 0 8px 30px rgba(102, 126, 234, 0.1) !important;
    border: 1px solid rgba(102, 126, 234, 0.1) !important;
}

.product-card:hover {
    box-shadow: 0 20px 40px rgba(102, 126, 234, 0.3) !important;
    border-color: #667eea !important;
}

.product-image {
    background: linear-gradient(135deg, #667eea15 0%, #764ba215 100%) !important;
}

.product-info .price {
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.product-info .stock i {
    color: #667eea !important;
}

.product-info h3:hover {
    color: #667eea !important;
}

/* Quantity Buttons - Purple Gradient */
.quantity-control button {
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4) !important;
}

.quantity-control button:hover {
    box-shadow: 0 6px 25px rgba(102, 126, 234, 0.6) !important;
}

.quantity-control input {
    border: 2px solid #667eea !important;
}

/* Badge Sold - Coral Gradient */
.badge-sold {
    background: linear-gradient(135deg, #FF6B6B, #FF8E53) !important;
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.5) !important;
}

/* Testimonial - Purple Theme */
.testimonials {
    background: linear-gradient(135deg, #667eea10 0%, #764ba210 100%) !important;
}

.testimonial-card {
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.1) !important;
    border: 1px solid rgba(102, 126, 234, 0.1) !important;
}

.testimonial-card:hover {
    box-shadow: 0 15px 35px rgba(102, 126, 234, 0.25) !important;
    border-color: #667eea !important;
}

.testimonial-card::before {
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.testimonial-header img {
    border: 3px solid #667eea !important;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3) !important;
}

.rating i {
    background: linear-gradient(135deg, #ffa502, #ff6348) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* Blog Card - Ocean Blue */
.blog-card {
    box-shadow: 0 8px 25px rgba(79, 172, 254, 0.1) !important;
    border: 1px solid rgba(79, 172, 254, 0.1) !important;
}

.blog-card:hover {
    box-shadow: 0 20px 40px rgba(79, 172, 254, 0.3) !important;
    border-color: #4facfe !important;
}

.blog-image {
    background: linear-gradient(135deg, #4facfe15, #00f2fe15) !important;
}

.blog-card:hover .blog-info h3 {
    color: #4facfe !important;
}

.blog-meta i {
    background: linear-gradient(135deg, #4facfe, #00f2fe) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* User Dropdown */
.user-dropdown-menu {
    box-shadow: 0 5px 20px rgba(102, 126, 234, 0.3) !important;
}

.user-dropdown-menu a.logout-link {
    color: #FF6B6B !important;
}

/* Button Block */
.btn-block {
    width: 100%;
}

.btn-lg {
    padding: 15px 35px;
    font-size: 1.1rem;
}

.btn-sm {
    padding: 8px 16px;
    font-size: 0.9rem;
}

/* Smooth transitions */
.btn,
.product-card,
.blog-card,
.testimonial-card {
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* Border radius modern */
.btn,
.product-card,
.blog-card,
.testimonial-card,
.auth-box {
    border-radius: 20px !important;
}

.quantity-control button {
    border-radius: 50% !important;
}