/* Professional CSS for HIC MARKET */

:root {
    /* Original Bootstrap Colors - Restored */
    --primary-color: #007bff;
    --primary-dark: #0056b3;
    --primary-light: #66b3ff;
    --secondary-color: #6c757d;
    --success-color: #28a745;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #17a2b8;
    --light-color: #f8f9fa;
    --dark-color: #343a40;
    
    /* Dashboard Gradients - Original */
    --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-success: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    --gradient-danger: linear-gradient(135deg, #ee0979 0%, #ff6a00 100%);
    --gradient-warning: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --gradient-info: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    --gradient-dark: linear-gradient(135deg, #232526 0%, #414345 100%);
    --gradient-ocean: linear-gradient(135deg, #2E3192 0%, #1BFFFF 100%);
    --gradient-sunset: linear-gradient(135deg, #FF512F 0%, #F09819 100%);
    
    /* Professional Typography */
    --font-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-family-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    
    /* Professional Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    
    /* Professional Shadows */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    
    /* Professional Border Radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    
    /* Dashboard Gradients */
    --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-success: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    --gradient-danger: linear-gradient(135deg, #ee0979 0%, #ff6a00 100%);
    --gradient-warning: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --gradient-info: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    --gradient-dark: linear-gradient(135deg, #232526 0%, #414345 100%);
    --gradient-ocean: linear-gradient(135deg, #2E3192 0%, #1BFFFF 100%);
    --gradient-sunset: linear-gradient(135deg, #FF512F 0%, #F09819 100%);

    /* Custom Discount Badge */
    --badge-bg: rgba(186, 104, 200, 0.9); /* Pinkish Purple */
    --badge-color: #fff;
    --price-discount-color: #e91e63; /* Pink/Red for discounted price */
}

/* Professional Base Styles */
* {
    box-sizing: border-box;
}

body {
    font-family: var(--font-family-primary);
    line-height: 1.6;
    color: var(--dark-color);
    background-color: #ffffff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Professional Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-heading);
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: var(--spacing-md);
    color: var(--dark-color);
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1.125rem; }

p {
    margin-bottom: var(--spacing-md);
    color: var(--secondary-color);
}

/* Professional Links */
a {
    color: var(--primary-color);
    text-decoration: none;
    transition: all 0.2s ease;
}

a:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

/* Hero Section - Purple & Gold Elegant Background */
.hero-section {
    background: linear-gradient(135deg, #6a4c93 0%, #8e44ad 25%, #9b59b6 50%, #f39c12 75%, #f1c40f 100%);
    min-height: 70vh;
    position: relative;
    overflow: hidden;
    animation: heroFadeIn 2s ease-in;
}

.hero-section .container {
    position: relative;
    z-index: 5;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 80%, rgba(241, 196, 15, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(155, 89, 182, 0.3) 0%, transparent 50%),
        linear-gradient(135deg, rgba(106, 76, 147, 0.8) 0%, rgba(243, 156, 18, 0.6) 100%);
    pointer-events: none;
}

.hero-section::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: 
        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23f1c40f' fill-opacity='0.1'%3E%3Cpath d='M30 30c0-11.046-8.954-20-20-20s-20 8.954-20 20 8.954 20 20 20 8.954 20-20zm0 0c0 11.046 8.954 20 20 20s20-8.954 20-20-8.954-20-20-20-20 8.954-20 20z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    animation: float 20s ease-in-out infinite;
    opacity: 0.3;
    pointer-events: none;
}

@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(180deg); }
}

/* Decorative Golden Elements */
.hero-section .decorative-corner {
    position: absolute;
    width: 200px;
    height: 200px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M20 20 Q50 10 80 20 Q110 30 140 20 Q170 10 200 20 L200 50 Q190 80 200 110 Q210 140 200 170 L170 200 Q140 190 110 200 Q80 210 50 200 Q20 190 20 170 Q10 140 20 110 Q30 80 20 50 Z' fill='%23f1c40f' fill-opacity='0.2'/%3E%3Cpath d='M40 40 Q60 35 80 40 Q100 45 120 40 Q140 35 160 40 Q155 60 160 80 Q165 100 160 120 Q155 140 160 160 Q140 155 120 160 Q100 165 80 160 Q60 155 40 160 Q45 140 40 120 Q35 100 40 80 Q45 60 40 40 Z' fill='%23f39c12' fill-opacity='0.3'/%3E%3C/svg%3E") no-repeat;
    background-size: contain;
    opacity: 0.6;
    pointer-events: none;
}

.hero-section .decorative-corner.top-left {
    top: -50px;
    left: -50px;
    animation: pulse 4s ease-in-out infinite;
}

.hero-section .decorative-corner.bottom-right {
    bottom: -50px;
    right: -50px;
    transform: rotate(180deg);
    animation: pulse 4s ease-in-out infinite reverse;
}

@keyframes pulse {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.05); }
}

    @keyframes heroFadeIn {
        0% {
            opacity: 0;
            transform: scale(1.05) translateY(30px);
        }
        60% {
            opacity: 0.8;
            transform: scale(1.02) translateY(10px);
        }
        100% {
            opacity: 1;
            transform: scale(1) translateY(0);
        }
    }

    .hero-section .display-4 {
        animation: textPop 1.2s cubic-bezier(.68,-0.55,.27,1.55);
    }

    @keyframes textPop {
        0% {
            opacity: 0;
            transform: scale(0.8) translateY(40px);
        }
        80% {
            opacity: 1;
            transform: scale(1) translateY(0);
        }
    }

    .btn-light {
        background: white;
        color: #6a4c93;
        border: none;
        transition: all 0.3s ease;
    }

    .btn-light:hover {
        background: #f8f9fa;
        transform: translateY(-3px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.15);
    }

    .btn-outline-light:hover {
        background: rgba(255,255,255,0.1);
        transform: translateY(-3px);
    }

/* Custom Discount Badge */
.custom-discount-badge {
    position: absolute;
    top: 10px;
    left: 0;
    background-color: var(--badge-bg);
    color: var(--badge-color);
    padding: 5px 12px;
    border-radius: 0 4px 4px 0;
    font-weight: 600;
    font-size: 0.85rem;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 5px;
}

.custom-discount-badge i {
    font-size: 0.8rem;
}

/* Price Display Styling */
.price-display-area {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 5px;
}

.current-price {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--price-discount-color);
}

.original-price {
    font-size: 1rem;
    color: #adb5bd;
    text-decoration: line-through;
    font-weight: 400;
}

/* Product Card Enhancements */
.product-card {
    border: none;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 12px;
    overflow: hidden;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.product-image {
    height: 250px;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.product-card:hover .product-image {
    transform: scale(1.05);
}

.btn-add-cart-purple {
    background: linear-gradient(135deg, #6a4c93 0%, #8e44ad 100%);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    font-weight: 500;
    width: 100%;
    transition: all 0.3s ease;
}

.btn-add-cart-purple:hover {
    background: linear-gradient(135deg, #5e3c85 0%, #7d3c9b 100%);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(106, 76, 147, 0.3);
}

.btn-add-cart-purple:active {
    transform: translateY(0);
}