/* START: UrbanThreadz Virtual Try-On CSS (Prefixed to avoid conflicts) */
/*
   This CSS uses Tailwind CSS classes (like grid, lg:grid-cols-2, gap-8, bg-white, etc.).
   Ensure your theme or another plugin is loading Tailwind CSS for these classes to work.
   The custom classes start with 'ut-'.
*/
.ut-tryon-section {
    padding-top: 5rem; /* Adjust if you have a fixed header */
    /* max-width classes are handled by the parent div in HTML */
    /* mx-auto and px-4 are also handled by the parent div */
}

.ut-virtual-try-on-area {
    position: relative;
    width: 100%; /* Use full width of parent column */
    padding-bottom: 133.33%; /* Maintain 3:4 aspect ratio (assuming 400/300 original mockup) */
    height: 0; /* Required for padding-bottom trick */
    margin: 0 auto; /* Center within its column */
    border: 2px dashed #ccc;
    background: #f9f9f9;
    overflow: hidden; /* Hide overflowing content */
    /* Remove flex/center alignment here, handled by inner placeholder/image */
}

/* Specific style for the upload area to give it a fixed visual height */
/* Note: The inner content (placeholder/image/button) is positioned absolutely inside this relative container */
#ut-photo-upload-area {
    height: 400px; /* Set a fixed height */
    padding-bottom: 0; /* Override padding-bottom trick for this specific div */
    /* flex/center alignment not needed here, use absolute positioning for inner elements */
}

/* Style for the uploaded photo preview element */
#ut-uploaded-photo-preview {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     object-fit: cover; /* Cover the container */
     z-index: 5; /* Above placeholder, below button/input */
}

/* Style for the design overlay */
.ut-virtual-try-on-area .ut-tshirt-overlay {
    position: absolute;
    /* Initial position/size set by JS based on sliders */
    background: rgba(255,255,255,0.5); /* Semi-transparent background for visibility */
    border: 2px dashed #333; /* Border helps visualize area */
    cursor: move; /* Indicates draggable area */
    z-index: 10; /* Overlay is above photo and placeholder */
    display: flex; /* Use flex to center content inside overlay */
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Hide design parts outside the overlay */
    box-sizing: border-box; /* Include padding/border in element's total width and height */
    padding: 5px; /* Add some padding inside the design area */
}

.ut-tshirt-overlay .ut-try-on-design-element {
    position: absolute; /* Position relative to the overlay */
    top: 0;
    left: 0;
    width: 100%; /* Design fills the overlay */
    height: 100%;
    object-fit: contain; /* Contain image within the overlay */
    text-align: center; /* Center text */
    user-select: none; /* Prevent text selection */
    max-width: 100%; /* Ensure content doesn't exceed overlay */
    max-height: 100%; /* Ensure content doesn't exceed overlay */
    box-sizing: border-box; /* Include padding/border in element's total width and height */
    padding: 5px; /* Add some padding inside the design area */
}

.ut-tshirt-overlay .ut-try-on-design-element img {
     display: block; /* Prevent extra space below image */
     max-width: 100%;
     max-height: 100%;
     object-fit: contain;
     margin: auto; /* Center image */
}

/* Style for primary action button */
.ut-btn-primary {
    background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.3s;
    font-weight: 500; /* Poppins medium */
}

.ut-btn-primary:hover {
    transform: translateY(-2px);
}

/* Style for the Delete button as per image */
.ut-delete-button {
     /* Based on image: light border, gray text */
    background-color: #fff; /* White background */
    color: #4a5568; /* Tailwind gray-700 for text */
    border: 1px solid #e2e8f0; /* Tailwind gray-300 for border */
    padding: 12px 24px;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.3s, color 0.3s, background-color 0.3s;
     font-weight: 500; /* Poppins medium */
}

.ut-delete-button:hover {
    border-color: #a0aec0; /* Tailwind gray-500 on hover */
    color: #2d3748; /* Tailwind gray-900 on hover */
    background-color: #edf2f7; /* Tailwind gray-200 on hover */
}


/* Placeholder for when no photo is uploaded */
#ut-try-on-result #ut-try-on-placeholder {
    z-index: 1; /* Below overlay, above base background */
}

/* Hide placeholder when photo is loaded in Try-On Result */
#ut-try-on-result.has-photo #ut-try-on-placeholder {
    display: none;
}

/* Style for the placeholder text in the upload area */
#ut-upload-photo-area #ut-upload-placeholder {
    z-index: 5; /* Above base background, below button */
    background-color: #f9f9f9; /* Match background */
}


/* Optional: Style for dragging feedback */
.ut-is-dragging-area {
    /* Example: Change border color or add a subtle shadow while dragging */
    border-color: #8b5cf6; /* Purple */
    box-shadow: 0 0 8px rgba(139, 92, 246, 0.5);
}

/* Responsive adjustments if needed - Tailwind's grid handles basic stacking */
@media (max-width: 768px) {
    .ut-tryon-section {
        padding-top: 2rem; /* Less padding on smaller screens */
    }
    /* Adjust font sizes, padding, etc. for mobile if needed */
}


/* END: UrbanThreadz Virtual Try-On CSS */