/**
 * PackageBackgrounds Module - Automatic Background Rendering
 * This CSS works with any WEMX theme without template modifications
 */

/* Base background container styles */
.package-background-container {
    position: relative;
    overflow: hidden;
}

.package-background-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
}

.package-background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 2;
}

.package-background-content {
    position: relative;
    z-index: 10;
}

/* Store page package tiles */
[data-package-background] {
    position: relative;
    overflow: hidden;
}

[data-package-background]:not([data-background-enabled="true"]) {
    /* Default styling when no background */
}

/* Gradient backgrounds */
[data-package-background][data-background-type="gradient"] .package-background-layer {
    background: linear-gradient(var(--bg-direction, to right), var(--bg-from, #3B82F6), var(--bg-to, #8B5CF6));
    background-blend-mode: multiply;
    opacity: var(--bg-opacity, 0.1);
}

/* Solid color backgrounds */
[data-package-background][data-background-type="solid"] .package-background-layer {
    background-color: var(--bg-color, #3B82F6);
    opacity: var(--bg-opacity, 0.1);
}

/* Image backgrounds */
[data-package-background][data-background-type="image"] .package-background-layer {
    background-image: var(--bg-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: var(--bg-blur, none);
}

/* Text readability overlay for all background types */
[data-package-background][data-background-enabled="true"] .package-background-overlay {
    background: rgba(255, 255, 255, 0.85);
}

/* Dark theme overlay */
[data-package-background][data-background-enabled="true"] .package-background-overlay {
    background: rgba(255, 255, 255, 0.85);
}

@media (prefers-color-scheme: dark) {
    [data-package-background][data-background-enabled="true"] .package-background-overlay {
        background: rgba(31, 41, 55, 0.85);
    }
}

/* Image overlay colors */
[data-package-background][data-background-type="image"][data-overlay-enabled="true"] .package-background-overlay {
    background-color: var(--overlay-color, rgba(0, 0, 0, 0.3)) !important;
}

/* Dashboard subtle backgrounds */
.dashboard-service-card[data-package-background] .package-background-layer {
    opacity: calc(var(--bg-opacity, 0.1) * 0.5); /* Even more subtle for dashboard */
}

/* Store page specific styling */
.store-package-tile[data-package-background] {
    border-radius: 1rem; /* Tailwind rounded-2xl equivalent */
}

.store-package-tile[data-package-background] .package-background-layer {
    border-radius: 1rem;
}

.store-package-tile[data-package-background] .package-background-overlay {
    border-radius: 1rem;
}

/* Portal theme specific styling */
[data-package-background][class*="rounded-3xl"] {
    border-radius: 1.5rem; /* Tailwind rounded-3xl equivalent */
}

[data-package-background][class*="rounded-3xl"] .package-background-layer {
    border-radius: 1.5rem;
}

[data-package-background][class*="rounded-3xl"] .package-background-overlay {
    border-radius: 1.5rem;
}

/* Portal theme enhanced transitions */
[data-package-background][class*="transition-all duration-500"] .package-background-layer {
    transition: opacity 0.5s ease, background 0.5s ease, transform 0.5s ease;
}

/* Portal theme hover effects */
@media (hover: hover) {
    [data-package-background][class*="hover:-translate-y-3"]:hover .package-background-layer {
        opacity: calc(var(--bg-opacity, 0.1) * 1.3);
        transform: translateY(-3px);
    }
    
    [data-package-background][class*="hover:scale-105"]:hover .package-background-layer {
        transform: scale(1.05);
    }
}

/* Portal theme backdrop blur support */
[data-package-background][class*="backdrop-blur"] .package-background-overlay {
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* Portal theme glass effect compatibility */
[data-package-background][class*="bg-white/80"] .package-background-overlay,
[data-package-background][class*="bg-gray-800/80"] .package-background-overlay {
    background: rgba(255, 255, 255, 0.9);
}

@media (prefers-color-scheme: dark) {
    [data-package-background][class*="bg-white/80"] .package-background-overlay,
    [data-package-background][class*="bg-gray-800/80"] .package-background-overlay {
        background: rgba(31, 41, 55, 0.9);
    }
}

/* Portal theme shadow enhancements */
[data-package-background][class*="shadow-xl"] {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

[data-package-background][class*="hover:shadow-2xl"]:hover {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    [data-package-background] .package-background-layer {
        opacity: calc(var(--bg-opacity, 0.1) * 0.8); /* Slightly reduce on mobile */
    }
}

/* Animation for smooth background changes */
.package-background-layer,
.package-background-overlay {
    transition: opacity 0.3s ease, background 0.3s ease;
}

/* Focus and hover states - only on devices with true hover capability */
@media (hover: hover) {
    [data-package-background]:hover .package-background-layer {
        opacity: calc(var(--bg-opacity, 0.1) * 1.2);
    }
}



/* Accessibility - high contrast mode */
@media (prefers-contrast: high) {
    [data-package-background] .package-background-overlay {
        background: rgba(255, 255, 255, 0.95) !important;
    }
    
    @media (prefers-color-scheme: dark) {
        [data-package-background] .package-background-overlay {
            background: rgba(0, 0, 0, 0.95) !important;
        }
    }
}

/* Print styles */
@media print {
    .package-background-layer,
    .package-background-overlay {
        display: none;
    }
}