/* Fixed Background Group Styles */

/* Frontend Styles */
.aibui-fixed-bg-group.fixed-bg-section,
.aibui-group-block.fixed-bg-section {
  position: relative !important;
  min-height: 100px !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
  overflow: hidden !important;
}

/* Overlay styles - géré par CSS ::before pseudo-element */
.aibui-fixed-bg-group.fixed-bg-section::before,
.aibui-group-block.fixed-bg-section::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-color: var(--fixed-bg-overlay-color, rgba(63, 23, 99, 0.8)) !important;
  z-index: 0 !important;
  box-shadow: 
    inset 0 80px 80px -60px rgba(0, 0, 0, 0.7),   /* haut */
    inset 0 -80px 80px -60px rgba(0, 0, 0, 0.7);  /* bas */
  pointer-events: none !important;
}

.aibui-fixed-bg-group.fixed-bg-section > *,
.aibui-group-block.fixed-bg-section > * {
  position: relative !important;
  z-index: 1 !important; /* le contenu reste au-dessus du voile */
}

/* Editor Styles - Solution pour background-attachment: fixed */
.editor-styles-wrapper .aibui-fixed-bg-group.fixed-bg-section,
.editor-styles-wrapper .aibui-group-block.fixed-bg-section {
  background-attachment: scroll !important; /* Fallback pour l'éditeur */
  position: relative !important;
  min-height: 100px !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  overflow: hidden !important;
}

/* Overlay styles pour l'éditeur - géré par CSS ::before pseudo-element */
.editor-styles-wrapper .aibui-fixed-bg-group.fixed-bg-section::before,
.editor-styles-wrapper .aibui-group-block.fixed-bg-section::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-color: var(--fixed-bg-overlay-color, rgba(63, 23, 99, 0.8)) !important;
  z-index: 0 !important;
  box-shadow: 
    inset 0 80px 80px -60px rgba(0, 0, 0, 0.7),   /* haut */
    inset 0 -80px 80px -60px rgba(0, 0, 0, 0.7);  /* bas */
  pointer-events: none !important;
}

.editor-styles-wrapper .aibui-fixed-bg-group.fixed-bg-section > *,
.editor-styles-wrapper .aibui-group-block.fixed-bg-section > * {
  position: relative !important;
  z-index: 1 !important;
}

/* Indicateur visuel dans l'éditeur */
.editor-styles-wrapper .aibui-group-block.fixed-bg-section::after {
  content: "Fixed Background Group";
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  z-index: 2;
  pointer-events: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .aibui-group-block.fixed-bg-section,
  .editor-styles-wrapper .aibui-group-block.fixed-bg-section {
    background-attachment: scroll; /* Mobile fallback */
    min-height: 300px;
  }
}

/* Default background image when no image is selected */
.aibui-group-block.fixed-bg-section.default-bg {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800"><defs><linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:%236366f1;stop-opacity:1" /><stop offset="100%" style="stop-color:%239f7aea;stop-opacity:1" /></linearGradient></defs><rect width="100%" height="100%" fill="url(%23grad)"/></svg>');
}

/* Overlay color customization */
.aibui-group-block.fixed-bg-section .fixed-bg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.aibui-group-block.fixed-bg-section .fixed-bg-overlay + * {
  position: relative;
  z-index: 1;
}