/**
 * PDA WooCommerce Featured Background - Frontend CSS
 * 
 * Styles for the featured background integration
 */

/* Featured background container */
.pda-woo-featured-background {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: -1 !important;
    pointer-events: none !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* Ensure canvas containers have relative positioning when needed */
.pdapp-studio-container,
.pdapp-design-area,
.fabric-canvas-wrapper {
    position: relative;
}

/* Loading indicator for featured background */
.pda-woo-featured-background.loading {
    background-image: none !important;
    background-color: #f8f9fa !important;
}

.pda-woo-featured-background.loading:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #007cba;
    border-radius: 50%;
    animation: pda-woo-spin 1s linear infinite;
}

@keyframes pda-woo-spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Error state */
.pda-woo-featured-background.error {
    background-image: none !important;
    background-color: #ffeaea !important;
    border: 2px dashed #dc3545 !important;
}

.pda-woo-featured-background.error:before {
    content: 'Failed to load background image';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #dc3545;
    font-size: 14px;
    text-align: center;
    white-space: nowrap;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .pda-woo-featured-background.error:before {
        font-size: 12px;
        white-space: normal;
        max-width: 200px;
    }
    
    /* Mobile-specific fixes for featured background */
    .pda-woo-featured-background {
        /* Ensure proper rendering on mobile */
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        will-change: transform;
    }
    
    /* Mobile DOM background improvements */
    .pda-woo-dom-background {
        /* Better performance on mobile */
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    
    /* Ensure canvas containers are visible on mobile */
    .pdapp-studio-container,
    .pdapp-design-area,
    .pdapp-viewport,
    .pdapp-viewport-area {
        position: relative;
        /* Prevent mobile rendering issues */
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    
    /* Mobile indicator adjustments */
    .pda-woo-bg-indicator {
        font-size: 12px !important;
        padding: 8px 12px !important;
        top: 10px !important;
        right: 10px !important;
    }
}

/* Debug mode styles */
.pda-woo-debug .pda-woo-featured-background {
    border: 2px dashed #007cba !important;
    opacity: 0.8 !important;
}

.pda-woo-debug .pda-woo-featured-background:after {
    content: 'Featured Background Active';
    position: absolute;
    top: 10px;
    left: 10px;
    background: #007cba;
    color: white;
    padding: 4px 8px;
    font-size: 11px;
    font-family: Arial, sans-serif;
    border-radius: 3px;
    z-index: 1000;
    pointer-events: all;
}

/* Ensure background doesn't interfere with PDA controls */
.pdapp-controls,
.pdapp-toolbar,
.pdapp-menu,
.fabric-canvas-wrapper .canvas-container {
    position: relative;
    z-index: 10;
}

/* Smooth transition for background changes */
.pda-woo-featured-background {
    transition: opacity 0.3s ease-in-out;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .pda-woo-featured-background.error {
        background-color: #ffffff !important;
        border-color: #000000 !important;
    }
    
    .pda-woo-featured-background.error:before {
        color: #000000 !important;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .pda-woo-featured-background,
    .pda-woo-featured-background.loading:before {
        transition: none !important;
        animation: none !important;
    }
}

/* Mobile-specific viewport and canvas fixes */
@media (max-width: 768px) {
    /* Ensure PDA viewports are properly positioned on mobile */
    .pdapp-viewport .pdapp-viewport-area svg.pdapp-selecto-area {
        /* Force hardware acceleration for better mobile performance */
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        will-change: transform;
    }
    
    /* Ensure featured image layer is visible in SVG on mobile */
    svg.pdapp-selecto-area g.pdapp-target.pdapp-featured-bg,
    svg.pdapp-selecto-area g.pdapp-g-photo g.pdapp-target.pdapp-featured-bg {
        /* Ensure proper rendering */
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Fix image elements inside featured background layer on mobile */
    svg.pdapp-selecto-area g.pdapp-target.pdapp-featured-bg image.pdapp-img,
    svg.pdapp-selecto-area g.pdapp-g-photo g.pdapp-target.pdapp-featured-bg image.pdapp-img {
        display: inline !important;
        opacity: 1 !important;
        visibility: visible !important;
        /* Ensure image is not clipped */
        overflow: visible !important;
    }
    
    /* Local background for mobile design area */
    .pda-woo-local-background {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 0 !important;
        pointer-events: none !important;
        /* Better mobile rendering */
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    /* These styles apply specifically to touch devices */
    .pda-woo-featured-background,
    .pda-woo-dom-background,
    .pda-woo-local-background {
        /* Optimize for touch interactions */
        -webkit-tap-highlight-color: transparent;
        touch-action: none;
    }
    
    /* Ensure indicator is easily tappable on touch devices */
    .pda-woo-bg-indicator {
        min-width: 44px !important; /* iOS minimum touch target */
        min-height: 44px !important;
    }
}