/**
 * 创享幻灯片全宽样式修复 - 重构版 v6.0.0
 *
 * 专门修复MFonts风格幻灯片小工具在zibll主题中的全宽样式失效问题
 * 减少全局样式污染，提高性能和兼容性
 *
 * 问题根因：
 * 1. 父主题.zib-widget容器有15px padding限制
 * 2. CSS选择器类名不匹配
 * 3. 全宽计算基准错误，未考虑容器嵌套
 * 4. 【v5.1.0新增】全宽模式下背景色透明问题
 *
 * 修复策略：
 * 1. 使用更精确的选择器，减少全局影响
 * 2. 智能重置父主题容器限制
 * 3. 安全的全宽定位方案
 * 4. 【v5.1.0新增】CSS层叠顺序和选择器优先级修复
 *
 * @package cxzzt-clean
 * @since 1.1.0
 * @version 6.0.0 - 标准化小工具输出结构，彻底解决分层间隔问题
 */

/* === 页面级溢出控制 - 仿站酷：裁切由 .cxz-slider-viewport 负责 === */
/* container/wrapper 必须 overflow:visible，否则两侧 slide 被裁切 */

/* 全局溢出控制 - 仅在必要时应用 */
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: visible !important;
  }
}

/* === 精确的容器重写 - 减少!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;
}

/* === 全宽模式标准容器处理 === */
/* 基于WordPress标准.zib-widget容器实现全宽效果 */
.zib-widget:has(.cxz-mfonts-slider.fullwidth) {
  /* 移除父主题的默认样式，为全宽做准备 */
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;

  /* 全宽容器定位 */
  width: 100vw !important;
  max-width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  overflow: visible !important;

  /* 确保容器稳定性 */
  box-sizing: border-box !important;
}

/* 父级 container 也需要允许溢出 */
.container:has(.cxz-slider-viewport),
.container.fluid-widget:has(.cxz-slider-viewport) {
  overflow: visible !important;
}

/* === 全宽模式 - B1重构：viewport 不再自己做 100vw 平移，由 .zib-widget 统一处理 === */
.cxz-slider-viewport.fullwidth {
  width: 100% !important;
  overflow: hidden !important;
  background-color: transparent !important;
  box-sizing: border-box !important;
}

.cxz-mfonts-slider.fullwidth {
  /* 内层保持 69% 宽度居中（仿站酷），不覆盖 preload 中的宽度 */
  position: relative;
  overflow: visible !important;
  box-sizing: border-box;
  background-color: transparent !important;
}

/* === 全宽内部元素 - B1重构：slide 无 padding，复刻站酷无缝隐布局 === */

/* 遮罩已移除 - 仿站酷架构，两侧由主容器 overflow:hidden 自然裁切 */


/* === 为不支持: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;
  }

  /* 全宽模式标准容器 - 不支持:has()的备选方案 */
  body.cxzzt-slider-fullwidth-active .zib-widget {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 20px !important;

    /* 全宽容器定位 */
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    overflow-x: hidden !important;
    box-sizing: border-box !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) {
  /* 移动端全宽容器 */
  .zib-widget:has(.cxz-mfonts-slider.fullwidth) {
    margin-bottom: 15px !important; /* 移动端稍微减少间距 */
  }

  .cxz-slider-viewport.fullwidth {
    left: 0 !important;
    transform: none !important;
  }

  .cxz-mfonts-slider.fullwidth {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    background-color: transparent !important;
  }

  .theme-dark .cxz-slider-viewport {
    background-color: transparent !important;
  }

  .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;

  background-color: transparent !important;
}

/* 第三方构建器深色模式支持 */
.theme-dark .elementor-widget-container .cxz-mfonts-slider.fullwidth,
.theme-dark .et_pb_widget_area .cxz-mfonts-slider.fullwidth,
.theme-dark .fl-module-content .cxz-mfonts-slider.fullwidth {
  background-color: transparent !important;
}

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

/* viewport 背景色统一在 slider-preload.css 定义，这里不再重复 */

/* === 深色模式全宽背景色修复 === */
.theme-dark .cxz-mfonts-slider.fullwidth {
  background-color: transparent !important;
}