/**
 * Mloun Slide - Elementor Widget Styles
 * 幻灯片轮播组件样式
 */

/* =================== 容器布局 =================== */

.mloun-slide-container {
    display: flex;
    width: 100%;
    position: relative;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    /* flex-direction 由 JS 根据断点动态设置 */
}

/* =================== 左侧区域 =================== */

.mloun-slide-left {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: width 0.3s ease, height 0.3s ease;
    /* width/height 由 JS 动态注入 */
    box-sizing: border-box;
}

/* 左侧背景图 - 铺满整个左侧区域 */
.mloun-slide-left-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    transition: background-image 0.5s ease;
}

.mloun-slide-left-inner {
    position: relative;
    display: flex;
    flex-direction: row;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
    z-index: 1;
}

.mloun-slide-left-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    pointer-events: none;
}

.mloun-slide-left-item.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* 左侧内容区 - 支持并排布局 */
.mloun-slide-left-content {
    position: relative;
    z-index: 2;
    flex: 1;
    padding: 30px;
    gap: 20px;
    display: flex;
    align-items: flex-start;
    height: 100%;
    box-sizing: border-box;
}

/* 左1左2并排显示时的样式 */
.mloun-slide-left-content-row {
    flex-direction: row;
}

.mloun-slide-left-content-row > .mloun-slide-left1,
.mloun-slide-left-content-row > .mloun-slide-left2 {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* 左1左2上下堆叠时的样式 */
.mloun-slide-left-content-column {
    flex-direction: column;
}

.mloun-slide-left-content-column > .mloun-slide-left1,
.mloun-slide-left-content-column > .mloun-slide-left2 {
    width: 100% !important;
}

/* =================== 左侧1：标题区 =================== */

.mloun-slide-left1 {
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding-right: 20px;
}

.mloun-slide-left1-title {
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 20px 0;
    line-height: 1.3;
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* 下拉链接菜单 */
.mloun-slide-left1-links {
    margin-top: 15px;
}

.mloun-slide-left1-link-select {
    width: 100%;
    max-width: 300px;
    padding: 10px 15px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    /* 深色背景确保白色字体可见 */
    background-color: rgba(0, 0, 0, 0.5);
    color: #ffffff;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 35px;
    /* 字体样式由 Elementor 控件控制，使用 !important 确保用户设置优先 */
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: normal !important;
    line-height: normal !important;
    letter-spacing: normal !important;
}

.mloun-slide-left1-link-select:hover {
    border-color: rgba(255, 255, 255, 0.6);
    background-color: rgba(0, 0, 0, 0.6);
}

/* 深色背景的下拉选项 */
.mloun-slide-left1-link-select option {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
    padding: 10px;
    /* 确保在深色背景上可见 */
    text-shadow: none;
}

/* 占位符选项样式 */
.mloun-slide-left1-link-select option[value=""] {
    color: rgba(255, 255, 255, 0.7) !important;
    /* 字体样式由 Elementor 控件控制 */
}

.mloun-slide-left1-link {
    display: inline-block;
    padding: 8px 16px;
    margin: 5px 5px 5px 0;
    background-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    text-decoration: none;
    border-radius: 4px;
    font-size: 14px;
    transition: all 0.3s ease;
}

.mloun-slide-left1-link:hover {
    background-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
    transform: translateY(-2px);
}

/* =================== 左侧2：自定义图片 =================== */

.mloun-slide-left2 {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding-left: 20px;
}

.mloun-slide-left2-image {
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
}

.mloun-slide-left2-image:hover {
    transform: scale(1.05);
}

/* =================== 左侧导航按钮 =================== */

.mloun-slide-left-nav {
    position: absolute;
    z-index: 10;
    display: flex;
    gap: 10px;
    /* 位置由 JS applyNavArrows() 动态设置 */
}

.mloun-slide-nav-hidden {
    display: none !important;
}

.mloun-slide-prev,
.mloun-slide-next {
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    /* JS applyArrowStyles() 动态控制尺寸、背景色、圆角等 */
    display: flex;
    align-items: center;
    justify-content: center;
}

.mloun-slide-prev:hover,
.mloun-slide-next:hover {
    transition: all 0.3s ease;
}

.mloun-slide-prev:active,
.mloun-slide-next:active {
    transform: scale(0.95);
}

/* =================== 右侧区域 =================== */

.mloun-slide-right {
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    transition: width 0.3s ease, height 0.3s ease;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
    box-sizing: border-box;
    /* width/height 由 JS 动态注入 */
}

.mloun-slide-right::-webkit-scrollbar {
    width: 6px;
}

.mloun-slide-right::-webkit-scrollbar-track {
    background: transparent;
}

.mloun-slide-right::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.mloun-slide-right::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.4);
}

/* =================== 右侧标题项目 =================== */

.mloun-slide-right-item {
    padding: 25px 30px;
    cursor: pointer;
    transition: all 0.3s ease;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    position: relative;
}

.mloun-slide-right-item:last-child {
    border-bottom: none;
}

.mloun-slide-right-item:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.mloun-slide-right-item.active {
    background-color: rgba(0, 0, 0, 0.08);
}

/* 指示条样式 - 由 JS applyIndicatorStyles() 动态控制 */
/* 必须设置 display:block 和 position:absolute 才能显示 */
.mloun-slide-right-item.active::before {
    display: block !important;
    content: "";
    position: absolute;
    z-index: 0;
}

/* 标题前缀（图标/文字） */
.mloun-slide-right-prefix {
    display: inline-block;
    margin-right: 10px;
    font-size: 18px;
    opacity: 0.7;
}

/* 右侧标题 - 颜色由控件和 JS 动态控制 */
/* 悬停颜色: settings.title_hover_color */
/* 激活颜色: settings.title_active_color */

.mloun-slide-right-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    line-height: 1.4;
    color: #333333;
    transition: color 0.3s ease;
}

/* =================== 响应式设计 =================== */

/*
 * 注意：左右区域的宽度/高度比例 和 flex-direction 均由 JS (applyMainLayout) 动态注入，
 * 这里只保留基础过渡和字体缩放等辅助规则。
 */

/* 当容器为 column（上下）布局时，右侧改为横向滚动 */
.mloun-slide-container[data-main-layout-desktop="column"] .mloun-slide-right,
.mloun-slide-container[data-main-layout-tablet="column"] .mloun-slide-right,
.mloun-slide-container[data-main-layout-mobile="column"] .mloun-slide-right {
    /* JS 会在 column 模式下设置 flex-direction:row + overflow-x:auto */
}

/* 平板设备 - 字体微调 */
@media (max-width: 1024px) {
    .mloun-slide-left1-title {
        font-size: 24px;
    }
    
    .mloun-slide-right-title {
        font-size: 16px;
    }
    
    /* 上下布局时右侧项目横向排列 */
    .mloun-slide-right-item {
        min-width: 180px;
    }
}

/* 手机设备 */
@media (max-width: 768px) {
    .mloun-slide-left-content {
        padding: 20px;
    }
    
    .mloun-slide-left1-title {
        font-size: 20px;
        margin-bottom: 15px;
    }
    
    .mloun-slide-left2-image {
        max-height: 200px;
    }
    
    .mloun-slide-right-item {
        padding: 15px 20px;
        min-width: 140px;
    }
    
    .mloun-slide-right-title {
        font-size: 14px;
    }
    
    .mloun-slide-prev,
    .mloun-slide-next {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
}

/* 小屏手机 */
@media (max-width: 480px) {
    .mloun-slide-right-item {
        min-width: 120px;
    }
    
    .mloun-slide-left1-title {
        font-size: 18px;
    }
    
    .mloun-slide-right-title {
        font-size: 13px;
    }
}

/* =================== 动画效果 =================== */

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mloun-slide-left-item.active .mloun-slide-left1 {
    animation: fadeIn 0.5s ease forwards;
}

.mloun-slide-left-item.active .mloun-slide-left2 {
    animation: fadeIn 0.5s ease 0.1s forwards;
    opacity: 0;
    animation-fill-mode: forwards;
}

/* =================== 工具类 =================== */

.mloun-slide-no-transition {
    transition: none !important;
}

/* 加载状态 */
.mloun-slide-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999999;
    font-size: 14px;
}

/* 无障碍访问 - 焦点轮廓颜色由指示条颜色控制 */
.mloun-slide-right-item:focus {
    outline: 2px solid currentColor;
    outline-offset: -2px;
}

.mloun-slide-prev:focus,
.mloun-slide-next:focus {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}