/* ============================================================
   PETOKS FULL-BLEED VISUAL PANEL & LIVING CANVAS SYSTEM
   ============================================================ */

.visual-side.living-canvas {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-right: none !important;
  box-shadow: none !important;
  box-sizing: border-box;
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  color: #0f172a;
  display: block;
}

/* NO MEDIA STATE: PURE WHITE BACKGROUND (#FFFFFF) */
.visual-side.living-canvas.no-media,
.visual-side.no-media {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border: none !important;
  border-right: none !important;
  box-shadow: none !important;
}

.visual-side.living-canvas.no-media .living-canvas-ambient,
.visual-side.living-canvas.no-media .living-canvas-particles,
.visual-side.living-canvas.no-media .doodle-fallback,
.visual-side.living-canvas.no-media .doodle-anchor-badge,
.visual-side.living-canvas.no-media #petoks-doodle-stage {
  display: none !important;
}

/* Ambient glow: hidden to maintain pure white background #FFFFFF */
.living-canvas-ambient {
  display: none !important;
}

/* Full-bleed stage: covers 100% width and 100% height */
.living-canvas-stage {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  min-height: 100vh;
  margin: 0 !important;
  padding: 0 !important;
  display: block;
  z-index: 2;
  overflow: hidden;
}

/* Full-bleed display box: NO max-width 320px, NO height 210px */
.doodle-display-box {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 100% !important;
  min-height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block;
  overflow: hidden;
  box-shadow: none !important;
  border: 0 !important;
  background: transparent !important;
}

/* Dynamic Doodle Slot: 100% width and 100% height */
#petoks-doodle-slot {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
  overflow: hidden;
}

/* Full-bleed element wrapper */
.doodle-element-wrap {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  opacity: 0;
  transform: none !important;
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  overflow: hidden;
}

.doodle-element-wrap.visible {
  opacity: 1;
  pointer-events: auto;
}

/* Images (SVG, PNG, WEBP): FULL BLEED COVER */
.doodle-element-wrap img,
.living-canvas-stage img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* HTML Embed: FULL BLEED IFRAME */
.doodle-element-wrap iframe,
.living-canvas-stage iframe {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  border: 0 !important;
  display: block !important;
  background: transparent;
  pointer-events: auto;
  margin: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Video (MP4): FULL BLEED COVER */
.doodle-element-wrap video,
.living-canvas-stage video {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #ffffff;
}

html.theme-night .doodle-element-wrap video,
html.theme-night .living-canvas-stage video,
html[data-theme="night"] .doodle-element-wrap video,
html[data-theme="night"] .living-canvas-stage video {
  background: #000000;
}

/* Fallback element (hidden by default) */
.doodle-fallback {
  display: none !important;
}

.doodle-anchor-badge {
  display: none !important;
}

/* Responsive adjustments */
@media (max-width: 968px) {
  .visual-side.living-canvas {
    width: 100%;
    min-height: 48vh;
    height: 48vh;
    padding: 0 !important;
    border: none !important;
    border-right: none !important;
    border-bottom: none !important;
  }
  .visual-side.living-canvas.no-media {
    min-height: 0 !important;
    height: 0 !important;
    display: none !important;
  }
  .living-canvas-stage,
  .doodle-display-box,
  #petoks-doodle-slot {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    padding: 0 !important;
  }
}

@media (max-width: 640px) {
  .visual-side.living-canvas {
    min-height: 40vh;
    height: 40vh;
    padding: 0 !important;
    border: none !important;
    border-right: none !important;
    border-bottom: none !important;
  }
  .visual-side.living-canvas.no-media {
    display: none !important;
  }
}

/* Night theme support when user explicitly toggles theme */
html.theme-night .visual-side.living-canvas,
html[data-theme="night"] .visual-side.living-canvas {
  background: #000000 !important;
  background-color: #000000 !important;
  border: none !important;
  border-right: none !important;
}