/**
 * 创享幻灯片全宽样式修复 - 重构版 v5.0.0
 *
 * 专门修复MFonts风格幻灯片小工具在zibll主题中的全宽样式失效问题
 * 减少全局样式污染，提高性能和兼容性
 *
 * 问题根因：
 * 1. 父主题.zib-widget容器有15px padding限制
 * 2. CSS选择器类名不匹配
 * 3. 全宽计算基准错误，未考虑容器嵌套
 *
 * 修复策略：
 * 1. 使用更精确的选择器，减少全局影响
 * 2. 智能重置父主题容器限制
 * 3. 安全的全宽定位方案
 *
 * @package cxzzt-clean
 * @since 1.1.0
 */

/* === 精确的页面级溢出控制 === */
/* 仅在包含全宽幻灯片的容器中应用 */
.container:has(.cxz-mfonts-slider.fullwidth),
.wrapper:has(.cxz-mfonts-slider.fullwidth),
.content-wrapper:has(.cxz-mfonts-slider.fullwidth) {
  overflow-x: hidden;
}

/* 全局溢出控制 - 仅在必要时应用 */
html:has(.cxz-mfonts-slider.fullwidth) {
  overflow-x: hidden;
}

/* === 为不支持:has()的浏览器提供备选方案 === */
@supports not selector(:has(*)) {
  /* 使用body类标记方式 */
  body.cxzzt-slider-fullwidth-active {
    overflow-x: hidden;
  }

  body.cxzzt-slider-fullwidth-active .container,
  body.cxzzt-slider-fullwidth-active .wrapper,
  body.cxzzt-slider-fullwidth-active .content-wrapper {
    overflow-x: hidden;
  }
}

/* === 精确的容器重写 - 减少!important使用 === */
.container:has(.cxz-mfonts-slider.fullwidth),
.wrapper:has(.cxz-mfonts-slider.fullwidth),
.content-wrapper:has(.cxz-mfonts-slider.fullwidth),
.content-area:has(.cxz-mfonts-slider.fullwidth),
.main-content:has(.cxz-mfonts-slider.fullwidth),
.site-content:has(.cxz-mfonts-slider.fullwidth) {
  max-width: none;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}

/* 仅在必要时使用!important - 针对父主题的强制样式 */
.zib-widget:has(.cxz-mfonts-slider.fullwidth) {
  padding: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* === 全宽幻灯片样式 - 布局稳定性优化 === */
.cxz-mfonts-slider.fullwidth {
  width: 100vw;
  max-width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 20px;
  overflow-x: hidden;
  box-sizing: border-box;

  /* 防止布局偏移 */
  contain: layout;
  will-change: transform;

  /* 确保在所有浏览器中的一致性 */
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}

/* === 全宽内部元素调整 === */
.cxz-mfonts-slider.fullwidth .splide__slide {
  padding-left: 8px;
  padding-right: 8px;
}

.cxz-mfonts-slider.fullwidth .left-mask {
  left: 0;
  margin-left: 0;
}

.cxz-mfonts-slider.fullwidth .right-mask {
  right: 0;
  margin-right: 0;
}


/* === 为不支持:has()的浏览器提供备选方案 === */
@supports not selector(:has(*)) {
  body.cxzzt-slider-fullwidth-active .container,
  body.cxzzt-slider-fullwidth-active .wrapper,
  body.cxzzt-slider-fullwidth-active .content-wrapper,
  body.cxzzt-slider-fullwidth-active .content-area,
  body.cxzzt-slider-fullwidth-active .main-content,
  body.cxzzt-slider-fullwidth-active .site-content {
    max-width: none;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  body.cxzzt-slider-fullwidth-active .zib-widget {
    padding: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* === 侧边栏环境特殊处理 === */
.sidebar .cxz-mfonts-slider.fullwidth,
.sidebar-widget .cxz-mfonts-slider.fullwidth,
#sidebar .cxz-mfonts-slider.fullwidth,
.widget-area .cxz-mfonts-slider.fullwidth,
aside .cxz-mfonts-slider.fullwidth {
  /* 侧边栏中取消全宽效果 */
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  max-width: 100%;
  left: auto;
  transform: none;
  position: static;
}

/* === 移动端全宽优化 === */
@media (max-width: 768px) {
  .cxz-mfonts-slider.fullwidth {
    width: 100vw;
    max-width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-left: 0;
    margin-right: 0;
    /* 移动端圆角由内联CSS控制，不强制设置为0 */
    overflow-x: hidden;
  }

  .cxz-mfonts-slider.fullwidth .splide__slide {
    padding-left: 0;
    padding-right: 0;
    /* border-radius 由内联CSS控制 */
  }

  .cxz-mfonts-slider.fullwidth .splide__slide img {
    /* border-radius 由内联CSS控制 */
  }
}

/* === 确保交互元素正常工作 === */
.cxz-mfonts-slider .cxz-slider-arrows {
  pointer-events: none;
  z-index: 10;
}

.cxz-mfonts-slider .cxz-slider-arrow {
  pointer-events: auto;
}

.cxz-mfonts-slider .cxz-slider-pagination {
  z-index: 10;
  pointer-events: auto;
}

/* === 第三方页面构建器兼容 === */
.elementor-widget-container .cxz-mfonts-slider.fullwidth,
.et_pb_widget_area .cxz-mfonts-slider.fullwidth,
.fl-module-content .cxz-mfonts-slider.fullwidth {
  width: 100vw;
  max-width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin-left: 0;
  margin-right: 0;
  overflow-x: hidden;
}

/* === 性能优化 === */
.cxz-mfonts-slider.fullwidth {
  will-change: transform; /* 启用硬件加速 */
}

/* === 调试模式（仅在开发时启用） === */
.cxzzt-debug .cxz-mfonts-slider.fullwidth {
  outline: 2px solid red;
}