/**
 * Gicleo Personalizer - Global Styles
 * 
 * Styles for smooth transitions between upload widget and Vue configurator.
 * 
 * IMPORTANT: These styles work together with JavaScript event handling:
 * - widget-upload.js: Adds/removes .gcl-widget-visible / .gcl-widget-hidden classes
 * - configurator-shell.js: Adds/removes .gcl-configurator-visible / .gcl-configurator-hidden classes
 * - Vue App.vue: Listens for 'gcl:boot' events and updates boot data reactively
 */

/* Upload widget visibility transitions */
.gcl-upload-entry {
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
  /* CRITICAL: Widget is hidden by default to prevent FOUC (Flash of Unstyled Content)
   * when returning to configurator from cart. JavaScript will show it if needed. */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.gcl-upload-entry.gcl-widget-visible {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
}

.gcl-upload-entry.gcl-widget-hidden {
  opacity: 0;
  transform: translateY(-10px);
  visibility: hidden;
  pointer-events: none;
}

/* Vue configurator root visibility transitions */
#gcl-configurator-root {
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

#gcl-configurator-root.gcl-configurator-visible {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

#gcl-configurator-root.gcl-configurator-hidden {
  opacity: 0;
  transform: translateY(-10px);
  visibility: hidden;
  pointer-events: none;
}

/* Initial state: widget visible, configurator hidden (if no boot data) */
#gcl-configurator-root:not(.gcl-configurator-visible):not(.gcl-configurator-hidden) {
  opacity: 0;
  visibility: hidden;
}

/* Smooth transitions for configurator content changes */
#gcl-configurator-root * {
  transition: opacity 0.2s ease-in-out;
}

.gcl-upload-entry.gcl-widget-visible {
    margin: 2rem auto;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 0 1rem;
}
.gcl-upload-entry.gcl-widget-visible h2 {
    font-size: 48px;
    line-height: 60px;
}
@media all and (max-width: 1024px) {
    .gcl-upload-entry.gcl-widget-visible h2 {
        font-size: 38px;
        line-height: 40px;
    }
}
.gcl-upload-entry .gcl-upload-entry__dropzone {
    border: 1px solid #77777B;
    border-radius: 8px;
    border-style: dashed;
    padding: 2rem;
    width: 42%;
    min-width: 650px;
    margin: auto;
}
@media all and (max-width: 767px) {
    .gcl-upload-entry .gcl-upload-entry__dropzone {
      min-width: 78%;
  }
}