/* =========================================
   DEXACUBE CORE STYLES
   Extracted from custom.css for isolation.
   ========================================= */

/* -----------------------------------------
   1. 3D Engine & Scene
   ----------------------------------------- */
.dexacube-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  /* Let height be determined by container or content, but center it */
  position: relative;
  z-index: 1;
  /* FIX: Add padding to prevent 3D corners from overlapping header/footer */
  /* Added more bottom padding for the interaction prompt (120px) */
  padding: 60px 0 120px 0 !important;
}

.scene {
  perspective: 1200px;
  touch-action: none;
  user-select: none;
  position: relative;
  /* Center scene in wrapper */
  margin: 0 auto;

  width: var(--cube-size, 200px);
  height: var(--cube-size, 200px);
}

/* Initial state: tilted + shadow */
.cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(-20deg) rotateY(30deg);
  transition: transform 0.2s ease-out;
  cursor: grab;
  user-select: none;
}

/* Active dragging state */
.scene.is-dragging .cube {
  cursor: grabbing;
}

/* Face base styles */
.face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  background-color: #151515;
  display: flex;
  /* REMOVED !important to allow inline display:none to work */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 !important;
  /* CRITICAL: No padding */
  margin: 0 !important;
  color: #fff;
  text-align: center;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  line-height: 1.4;
  overflow: hidden;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* 
   CRITICAL FIX: Ensure image fills the face completely 
   to eliminate "corners" (quinas not vivas).
*/
.face img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  /* Visual Effects */
  filter: brightness(var(--dexa-brightness, 100%))
    contrast(var(--dexa-contrast, 100%)) saturate(var(--dexa-saturate, 100%));
}

@media (max-width: 768px) {
  .face {
    background-color: #2a2a2a !important;
  }
}

/* -----------------------------------------
   2. Face Positioning (Coordinate System)
   ----------------------------------------- */
/* 
   Dynamic sizing via CSS Variables.
   Defaults: 200px size -> 100px half-size.
   These variables are set inline by the Widget PHP based on user settings.
*/

/* 
   Dynamic sizing via CSS Variables.
   Defaults: 200px size. Half-size is calculated via CSS calc().
   Variables are injected by Elementor Responsive Controls.
*/

.front {
  transform: rotateY(0deg) translateZ(calc(var(--cube-size, 200px) / 2));
}

.back {
  transform: rotateY(180deg) translateZ(calc(var(--cube-size, 200px) / 2));
}

.right {
  transform: rotateY(90deg) translateZ(calc(var(--cube-size, 200px) / 2));
}

.left {
  transform: rotateY(-90deg) translateZ(calc(var(--cube-size, 200px) / 2));
}

.top {
  transform: rotateX(90deg) translateZ(calc(var(--cube-size, 200px) / 2));
}

.bottom {
  transform: rotateX(-90deg) translateZ(calc(var(--cube-size, 200px) / 2));
}

/* -----------------------------------------
   3. Interaction Prompts
   ----------------------------------------- */
/* Cursor */
.cursor-volante-active,
.cursor-volante-active * {
  cursor: url('data:image/svg+xml,<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><g stroke="black" stroke-width="3" fill="none" stroke-linecap="round"><circle cx="16" cy="16" r="12"/><line x1="16" y1="16" x2="16" y2="28"/><line x1="16" y1="16" x2="6.2" y2="10"/><line x1="16" y1="16" x2="25.8" y2="10"/><circle cx="16" cy="16" r="3"/></g><g stroke="white" stroke-width="1.5" fill="none" stroke-linecap="round"><circle cx="16" cy="16" r="12"/><line x1="16" y1="16" x2="16" y2="28"/><line x1="16" y1="16" x2="6.2" y2="10"/><line x1="16" y1="16" x2="25.8" y2="10"/><circle cx="16" cy="16" r="3"/></g></svg>')
      16 16,
    auto !important;
}

/* Visibility */
.scene.show-prompt #interaction-prompt,
.scene.show-align-prompt #align-prompt,
.scene.show-zoom-prompt #zoom-prompt {
  opacity: 1;
}

/* Positioning */
.scene #interaction-prompt,
.scene #align-prompt,
.scene #zoom-prompt {
  position: absolute;
  /* Move below the cube */
  top: auto;
  bottom: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  pointer-events: none !important;
  /* CRITICAL: Must not block clicks */
  z-index: 100;
  white-space: nowrap;
  transition: opacity 0.5s;
  display: flex !important;
  justify-content: center;
  align-items: center;
  opacity: 0;
  /* Default hidden */
}

/* Styling */
#interaction-prompt p,
#align-prompt p,
#zoom-prompt p {
  background-color: rgba(0, 109, 255, 0.75) !important;
  color: white !important;
  font-weight: bold !important;
  text-transform: uppercase !important;
  padding: 8px 16px !important;
  border-radius: 6px !important;
  text-align: center !important;
  margin: 0 !important;
  box-shadow: 0 4px 15px rgba(0, 109, 255, 0.4) !important;
  border: none !important;
  font-size: 12px !important;
}

@media (max-width: 768px) {
  .dexacube-wrapper {
    /* Slightly tighter vertical padding on mobile */
    padding: 40px 0 120px 0 !important;
  }

  .scene #interaction-prompt,
  .scene #align-prompt,
  .scene #zoom-prompt {
    /* Bring the prompt a bit closer on mobile */
    bottom: -80px !important;
    transform: translateX(-50%) scale(0.9);
  }

  #interaction-prompt p,
  #align-prompt p,
  #zoom-prompt p {
    padding: 7px 14px !important;
    font-size: 11px !important;
  }
}

/* -----------------------------------------
   4. Backgrounds & Overlays
   ----------------------------------------- */
#starry-background {
  background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99998;
  /* Below Splide, above page */
  pointer-events: none;
  /* Allow clickthrough when opacity 0? Handled by JS engine */
  opacity: 0;
  transition: opacity 1000ms;
}

/* -----------------------------------------
   5. Slideshow (Splide) Integration
   ----------------------------------------- */
#splide-container {
  display: none;
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  background: rgba(0, 0, 0, 0.9);
}

/* Make sure container is visibly fullscreen */
#splide-container.active {
  display: block;
}

#splide-container .splide__arrow {
  background: rgba(0, 109, 255, 0.3) !important;
  backdrop-filter: blur(4px);
  border-radius: 9999px;
  width: 3em;
  height: 3em;
  z-index: 30;
  transition: background-color 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

#splide-container .splide__arrow:hover {
  background: rgba(0, 109, 255, 0.9) !important;
}

#splide-container .splide__arrow--prev {
  left: 6rem;
}

#splide-container .splide__arrow--next {
  right: 6rem;
}

#splide-container .splide__arrow svg {
  fill: white !important;
  width: 1.5em;
  height: 1.5em;
}

#splide-container .splide__pagination {
  z-index: 30;
  bottom: 1em;
  position: absolute;
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

#splide-container .splide__pagination__page {
  background: rgba(255, 255, 255, 0.5);
  width: 12px;
  height: 12px;
  margin: 5px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
}

#splide-container .splide__pagination__page.is-active {
  background: #006dff;
  transform: scale(1.4);
}

/* Slide Content */
.splide__slide .face-content {
  max-width: 90vw;
  max-height: 75vh;
  /* Reduced further to ensure gap */
  width: auto;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  border: none;
  margin: 0 auto;
  margin-top: 60px !important;
  /* Explicit top gap requested by user */
}

/* FIX: Prevent image stretching in Slideshow */
.splide__slide .face-content img {
  width: auto !important;
  /* Let aspect ratio decide */
  height: auto !important;
  /* Let aspect ratio decide */
  max-width: 100% !important;
  /* Contain within slide */
  max-height: 75vh !important;
  /* Contain vertically */
  object-fit: contain !important;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  display: block;
}

/* Close Message */
#close-splide-message {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 12px 24px;
  border-radius: 8px;
  background-color: rgba(0, 109, 255, 0.85);
  color: white;
  font-weight: bold;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  z-index: 30;
}

#close-splide-message.visible {
  opacity: 1;
}

#close-splide-message.hidden {
  display: none;
}

/* -----------------------------------------
   6. Utilities
   ----------------------------------------- */
.fade-out {
  opacity: 0;
  transition: opacity 0.3s;
}