/**
 * WVTO Public Styles
 * 
 * Main stylesheet that imports all component styles.
 * This file should be the only CSS file enqueued for the public-facing side.
 * 
 * Architecture:
 * 1. wvto-reset.css     - Scoped reset to neutralize theme styles
 * 2. wvto-variables.css - Design tokens (colors, spacing, typography)
 * 3. wvto-components.css - Complete component library
 * 4. wvto-public.css    - This file (page-specific overrides if needed)
 * 
 * @package Woo_Virtual_Try_On
 * @since 2.0.0
 */

/* ==========================================================================
   Import Component Library
   Note: These imports are handled by PHP enqueue for better caching.
   This comment documents the dependency order.
   ========================================================================== */

/*
   Dependency order (loaded by PHP):
   1. wvto-reset.css
   2. wvto-variables.css  
   3. wvto-components.css
   4. wvto-public.css (this file)
*/

/* ==========================================================================
   Page-Specific Overrides
   Add any page-specific styles below that don't fit in components.
   ========================================================================== */

/* 
 * Modal display states
 * These work with jQuery .show()/.hide() which uses inline styles
 */
.wvto-modal {
    display: none;
}

/* When jQuery sets display:block, ensure visibility */
.wvto-modal[style*="display: block"],
.wvto-modal[style*="display:block"] {
    display: flex !important;
    opacity: 1;
    visibility: visible;
}

/* 
 * Step visibility control
 * Ensure steps are properly hidden/shown
 */
.wvto-step-1,
.wvto-step-2,
.wvto-step-3,
.wvto-step-limit {
    width: 100%;
}

.wvto-step-2,
.wvto-step-3,
.wvto-step-limit {
    display: none;
}

/* 
 * Hidden by default elements
 * These are shown via jQuery when needed
 */
#wvto-image-upload {
    display: none !important;
}

#wvto-video {
    display: none !important;
}

/* CAPTURAR button - must be hidden initially, only shown when camera is active */
#wvto-snap,
.wvto-step-1 #wvto-snap,
button#wvto-snap {
    display: none !important;
}

#wvto-canvas {
    display: none !important;
}

/* When jQuery shows a step */
.wvto-step-2[style*="display: block"],
.wvto-step-2[style*="display:block"],
.wvto-step-3[style*="display: block"],
.wvto-step-3[style*="display:block"],
.wvto-step-limit[style*="display: block"],
.wvto-step-limit[style*="display:block"] {
    display: block !important;
}

/* When jQuery shows camera elements */
#wvto-video[style*="display: block"],
#wvto-video[style*="display:block"] {
    display: block !important;
}

#wvto-snap[style*="display: block"],
#wvto-snap[style*="display:block"],
#wvto-snap[style*="display: inline"],
#wvto-snap[style*="display:inline"] {
    display: inline-flex !important;
}

/* 
 * Camera button visibility
 * Hidden by default, shown when camera is active
 */
#wvto-snap {
    margin-top: var(--wvto-space-4);
}

/* 
 * Error message container
 * Hidden by default
 */
#wvto-error-message {
    display: none;
}

#wvto-error-message[style*="display: block"],
#wvto-error-message[style*="display:block"] {
    display: block !important;
}

/* ==========================================================================
   Legacy Compatibility
   Ensures old HTML structure works with new styles
   ========================================================================== */

/* Upload buttons in upload area */
.wvto-upload-area .button,
.wvto-upload-area button {
    background-color: var(--wvto-primary);
    color: var(--wvto-text-inverse);
}

.wvto-upload-area .button:hover,
.wvto-upload-area button:hover {
    background-color: var(--wvto-primary-hover);
}

/* Camera button specific style */
#wvto-camera-btn {
    background-color: var(--wvto-secondary);
}

#wvto-camera-btn:hover {
    background-color: var(--wvto-secondary-hover);
}

/* Snap button (capture photo) */
#wvto-snap {
    background-color: var(--wvto-success);
    color: var(--wvto-text-inverse);
}

#wvto-snap:hover {
    background-color: var(--wvto-success-hover);
}

/* Login/Register buttons in limit step */
.wvto-step-limit .wvto-actions .button:first-child,
.wvto-step-limit .wvto-actions a:first-child {
    background-color: var(--wvto-primary);
}

.wvto-step-limit .wvto-actions .button:last-child,
.wvto-step-limit .wvto-actions a:last-child {
    background-color: var(--wvto-secondary);
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {

    .wvto-modal,
    .wvto-button-wrapper {
        display: none !important;
    }
}