/**
 * CART PAGE HERO - PURPLE THEME (Mobile) / MODERN CART THEME (Desktop)
 * =====================================================================
 * Mobile: Original purple theme
 * Desktop: Clean, professional cart theme with green accents
 */

/* Mobile/Default - Original Purple Theme */
.page-header {
    background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 50%, #ddd6fe 100%) !important;
    padding: 100px 20px 60px !important;
    text-align: center !important;
    position: relative !important;
    margin-top: 0px !important; /* No space - directly below navbar */
    overflow: hidden !important;
}

.page-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 20% 30%, rgba(147, 51, 234, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(168, 85, 247, 0.15) 0%, transparent 50%);
    pointer-events: none;
}

.page-header .container {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
}

.page-header h2 {
    font-size: 3rem !important;
    font-weight: 900 !important;
    background: linear-gradient(135deg, #7c3aed, #a855f7, #c084fc) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    margin-bottom: 15px !important;
    letter-spacing: -1px !important;
}

.page-header p {
    font-size: 1.2rem !important;
    color: #6b21a8 !important;
    max-width: 600px !important;
    margin: 0 auto !important;
    font-weight: 500 !important;
}

/* Decorative shapes - Mobile/Default (Purple Theme) */
.contact-hero-shapes {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

.contact-shape {
    position: absolute !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, rgba(147, 51, 234, 0.1), rgba(168, 85, 247, 0.1)) !important;
    animation: float 6s ease-in-out infinite !important;
}

.contact-shape-1 {
    width: 300px !important;
    height: 300px !important;
    top: -150px !important;
    right: -100px !important;
    animation-delay: 0s !important;
}

.contact-shape-2 {
    width: 200px !important;
    height: 200px !important;
    bottom: -100px !important;
    left: -50px !important;
    animation-delay: 2s !important;
}

.contact-shape-3 {
    width: 150px !important;
    height: 150px !important;
    top: 50% !important;
    left: 10% !important;
    animation-delay: 4s !important;
}

/* Desktop Only - Modern Cart Theme */
@media (min-width: 769px) {
    .page-header {
        background: linear-gradient(135deg, #ffffff 0%, #f9fafb 50%, #f3f4f6 100%) !important;
        border-bottom: 1px solid #e5e7eb !important;
    }

    .page-header::before {
        background:
            radial-gradient(circle at 20% 30%, rgba(16, 185, 129, 0.08) 0%, transparent 50%),
            radial-gradient(circle at 80% 70%, rgba(59, 130, 246, 0.08) 0%, transparent 50%);
    }

    .page-header h2 {
        font-size: 3rem !important;
        font-weight: 900 !important;
        background: linear-gradient(135deg, #111827, #374151, #1f2937) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        background-clip: text !important;
        margin-bottom: 15px !important;
        letter-spacing: -1px !important;
        position: relative !important;
        display: inline-block !important;
    }

    /* Shopping cart icon effect */
    .page-header h2::before {
        content: '🛒' !important;
        position: absolute !important;
        left: -50px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        font-size: 2.5rem !important;
        opacity: 0.9 !important;
    }

    .page-header p {
        font-size: 1.2rem !important;
        color: #6b7280 !important;
        max-width: 600px !important;
        margin: 0 auto !important;
        font-weight: 500 !important;
    }
}

/* Decorative shapes - Desktop Only */
@media (min-width: 769px) {
    .contact-hero-shapes {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }

    .contact-shape {
        position: absolute !important;
        border-radius: 50% !important;
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.06), rgba(59, 130, 246, 0.06)) !important;
        animation: float 6s ease-in-out infinite !important;
    }

    .contact-shape-1 {
        width: 300px !important;
        height: 300px !important;
        top: -150px !important;
        right: -100px !important;
        animation-delay: 0s !important;
    }

    .contact-shape-2 {
        width: 200px !important;
        height: 200px !important;
        bottom: -100px !important;
        left: -50px !important;
        animation-delay: 2s !important;
    }

    .contact-shape-3 {
        width: 150px !important;
        height: 150px !important;
        top: 50% !important;
        left: 10% !important;
        animation-delay: 4s !important;
    }
}

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

/* Responsive */
@media (max-width: 768px) {
    /* Completely hide hero section on mobile */
    .page-header {
        display: none !important;
    }

    .contact-shape-1,
    .contact-shape-2,
    .contact-shape-3 {
        display: none !important;
    }
}

/* Dark mode - Mobile/Default (Purple Theme) */
body.dark-mode .page-header {
    background: linear-gradient(135deg, #2d1b4e 0%, #1a1333 50%, #0f0a1f 100%) !important;
}

body.dark-mode .page-header h2 {
    background: linear-gradient(135deg, #c084fc, #e9d5ff, #f3e8ff) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

body.dark-mode .page-header p {
    color: #e9d5ff !important;
}

/* Dark mode - Desktop Only (Modern Cart Theme) */
@media (min-width: 769px) {
    body.dark-mode .page-header {
        background: linear-gradient(135deg, #1f2937 0%, #111827 50%, #0f172a 100%) !important;
        border-bottom-color: #374151 !important;
    }

    body.dark-mode .page-header h2 {
        background: linear-gradient(135deg, #f9fafb, #e5e7eb, #d1d5db) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        background-clip: text !important;
    }

    body.dark-mode .page-header p {
        color: #d1d5db !important;
    }
}