/* /public/styles.css */

body {
    background: #111827; /* bg-gray-900 */
    color: #ffffff;
}

/* --- NEW Glassmorphism Top Bar Style --- */
.topbar-glass {
    background: rgba(31, 41, 55, 0.5); /* Semi-transparent background */
    backdrop-filter: blur(12px); /* The "frosted glass" effect */
    -webkit-backdrop-filter: blur(12px); /* Support for Safari */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Subtle edge */
}

/* --- Main Content --- */
.main-content-area {
    padding-top: 4rem; /* Use padding instead of margin */
    padding-bottom: 4rem;
    /* ... other padding like px-4 or px-8 can be done with tailwind on the element itself ... */
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: calc(100vh - 80px); /* Adjust for header height */
}

/* --- Image Upload Thumbnail --- */
#image-upload-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Ensures the image aspect ratio is maintained */
  border-radius: 0.5rem; /* rounded-lg */
}

/* --- Custom Select Dropdown --- */
.custom-select {
  background-color: #374151; /* bg-gray-700 */
  color: white;
  border: 1px solid #4b5563; /* border-gray-600 */
  border-radius: 0.5rem; /* rounded-lg */
  padding: 0.75rem 2.5rem 0.75rem 1rem; /* py-3 pr-10 pl-4 */
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%239CA3AF' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
  background-position: right 0.75rem center;
  background-repeat: no-repeat;
  background-size: 1.25em;
  cursor: pointer;
  transition: border-color 0.2s;
}


.custom-select:hover {
    border-color: #10B981; /* hover:border-green-500 */
}

/* --- Spinner for Loading State --- */
.spinner {
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top: 4px solid #ffffff;
    width: 80px;
    height: 80px;
    animation: spin 1s linear infinite;
    margin: 40px auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/* --- Mockup Overlay Styles --- */
.mockup-overlay-cylinder {
    /* 1. Add perspective to create 3D depth for just this element. */
    /* A smaller value means a more intense "in-your-face" 3D effect. */
    transform: perspective(200px) rotateY(-15deg);

    /* 2. Use border-radius to create the curved vertical edges. */
    border-radius: 40% / 15%; 
    
    /* 3. Hide the parts of the image that fall outside the curved shape. */
    overflow: hidden;
}

/* Ensure the image inside fills the curved container */
.mockup-overlay-cylinder img {
    /* Use 'cover' to ensure the image content fills the new distorted shape */
    object-fit: cover; 
    /* We can even apply a counter-rotation to the image to make it look less skewed */
    transform: rotateY(15deg) scale(1.2);
}

/* --- Mockup Overlay for a Perspective Mug --- */
/* --- Mockup Overlay for a Perspective Mug --- */
.mockup-overlay-mug-perspective {
    clip-path: url(#mug-clip-shape);
    transform: translateY(9%);
}



/* --- NEW: Circular Mask for Products --- */
.mockup-mask-circle {
    border-radius: 50%;
    overflow: hidden;
    /* Improves anti-aliasing on some browsers */
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    transform: translateZ(0); /* Promotes to its own layer for smoother edges */
}


/* --- NEW: Tab Interface Styles --- */
.tab-button.active {
    background-color: #374151; /* bg-gray-700 */
    border-bottom-color: #10B981; /* border-green-500 */
    color: #ffffff;
}

/* --- NEW: Prompt Text Area Style --- */
#prompt-textarea {
    background-color: #1f2937; /* bg-gray-800 */
    color: #e5e7eb; /* text-gray-200 */
    border: 1px solid #4b5563; /* border-gray-600 */
    border-radius: 0.5rem;
    padding: 0.75rem;
    width: 100%;
    height: 100%;
    resize: none;
    font-family: inherit;
    font-size: 0.9rem;
    line-height: 1.5;
}
#prompt-textarea:focus {
    outline: none;
    border-color: #10B981; /* border-green-500 */
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.5);
}

/* --- NEW: Clear Image Button --- */
#clear-image-button {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background-color: rgba(17, 24, 39, 0.7); /* bg-gray-900 with opacity */
    color: #d1d5db; /* text-gray-400 */
    width: 2rem;
    height: 2rem;
    border-radius: 9999px; /* rounded-full */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

#clear-image-button:hover {
    background-color: #dc2626; /* bg-red-600 */
    color: #ffffff;
    transform: scale(1.1);
}

/* --- MODIFIED: Share Page Image Comparison Slider --- */
img-comparison-slider {
    max-width: 900px; /* Or 100% if you prefer it to fill the container */
    margin: 0 auto;
    --divider-width: 3px;
    --divider-color: #10B981; /* green-500 */
    --default-handle-opacity: 0.9;
    --handle-background-color: #1f2937; /* bg-gray-800 */
    --handle-color: #10B981; /* green-500 */
    --handle-opacity: 1;
    --handle-outline-color: rgba(255, 255, 255, 0.2);
    cursor: col-resize;
    
    /* NEW: Make the slider a grid container to stack the images */
    display: grid;
    /* REMOVED: The problematic aspect-ratio property is gone */
}



.image-comparison-container {
    border: 1px solid #374151; /* border-gray-700 */
}

.prompt-display {
    border: 1px solid #4b5563; /* border-gray-600 */
}

/* Custom handle icon styling */
img-comparison-slider .icon {
    color: #ffffff; /* Make the chevrons white */
    width: 2.5rem;
    height: 2.5rem;
}

/* ======================= THE NEW & IMPROVED FIX IS HERE ======================= */
/* This targets the direct <img> children of the slider component. */
img-comparison-slider > img {
    width: 100%;
    height: 100%;

    /* This places BOTH images into the very first grid cell, stacking them. */
    grid-area: 1 / 1;

    /* THIS IS THE KEY: 'contain' fits the entire image inside the container
       without cropping, preserving its aspect ratio. It may add letterboxing
       if aspect ratios differ, but it will never cut off parts of the image. */
    object-fit: contain;

    /* This ensures the image is centered within its frame. */
    object-position: center;
}


#clear-image-button:hover {
    background-color: #dc2626; /* bg-red-600 */
    color: #ffffff;
    transform: scale(1.1);
}

/* --- NEW: Style for the Clear Prompt Button --- */
/* This makes the new 'start over' button identical to the 'clear image' button */
#clear-prompt-button {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background-color: rgba(17, 24, 39, 0.7); /* bg-gray-900 with opacity */
    color: #d1d5db; /* text-gray-400 */
    width: 2rem;
    height: 2rem;
    border-radius: 9999px; /* rounded-full */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

#clear-prompt-button:hover {
    background-color: #dc2626; /* bg-red-600 */
    color: #ffffff;
    transform: scale(1.1);
}


/* --- NEW: Public Gallery Masonry Layout --- */
#gallery-grid {
  /* Define the number of columns for different screen sizes */
  column-count: 2;
  column-gap: 1rem; /* Corresponds to gap-4 in Tailwind */
}

@media (min-width: 640px) { /* sm */
  #gallery-grid {
    column-count: 3;
  }
}

@media (min-width: 1024px) { /* lg */
  #gallery-grid {
    column-count: 4;
  }
}

@media (min-width: 1280px) { /* xl */
  #gallery-grid {
    column-count: 5;
  }
}

.gallery-item {
  /* This is crucial to prevent items from breaking across columns */
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
}