/*
 Theme Name:   Astra Child
 Theme URI:    https://wpastra.com/
 Description:  Astra Child Theme for Product Project
 Author:       oallstar
 Author URI:   https://wpastra.com/about/?utm_source=theme_preview&utm_medium=author_link&utm_campaign=astra_theme
 Template:     astra
 Version:      1.0.0
 Text Domain:  astra-child
*/
/* ============================================================
   OE Horizontal Accordion – 完整版 (横排按钮 + 跳转图标 + 动态箭头)
   ============================================================ */

.oe-horizontal-accordion {
    width: 100%;
    margin: 20px 0;
}

/* --- 顶部导航容器：实现标题、跳转图标、生产者按钮在一行 --- */
.oe-nav-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap; /* 兼容移动端自动换行 */
    gap: 15px;
    margin-bottom: 15px;
}

/* 标题与跳转图标的组合 */
.oe-nav-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.oe-nav-title {
    font-weight: bold;
    font-size: 16px;
    color: #333;
}

/* 跳转按钮图标样式 (仿 AS 风格) */
.oe-link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #0056b3;
    transition: all 0.3s ease;
    text-decoration: none;
}

.oe-link-icon:hover {
    color: #e3a841; /* 鼠标悬停显示你的黄色 */
    transform: scale(1.1);
}

/* --- 生产者按钮列表 --- */
.oe-nav-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* 按钮基础样式：黄色背景 */
.oe-h-btn {
    background-color: #e3a841; /* 品牌黄色 */
    color: #000;               /* 黑色文字 */
    border: none;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 3px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    text-transform: uppercase;
}

.oe-h-btn:hover {
    filter: brightness(0.9);
}

/* --- 箭头绘制 (使用 currentColor 随文字变色) --- */
.oe-btn-arrow {
    position: relative;
    width: 10px;
    height: 10px;
}

.oe-btn-arrow::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 5px;
    height: 5px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg); /* 默认向下 */
    transition: transform 0.3s ease;
}

/* --- 激活态：按钮变深灰色，箭头向上 --- */
.oe-h-btn.active {
    background-color: #2c3e50; /* 选中时变深，凸显激活感 */
    color: #fff;
}

.oe-h-btn.active .oe-btn-arrow::after {
    transform: rotate(-135deg) translate(-1px, -1px); /* 旋转向上 */
}

/* --- 内容面板：纵向滑动效果 --- */
.oe-h-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.oe-panel-content {
    padding-top: 15px;
    border-top: 2px solid #e3a841; /* 面板展开时顶部的装饰线 */
}

/* --- 表格样式：清晰干净的列表 --- */
.oe-spec-table {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff;
}

.oe-spec-table th {
    text-align: left !important;
    padding: 12px 10px;
    background-color: #f8f9fa;
    color: #666;
    font-size: 13px;
    border-bottom: 2px solid #eee;
}

.oe-spec-table td {
    padding: 10px;
    border-bottom: 1px solid #eee;
    font-size: 14px;
    text-align: left !important;
}

/* OE号码链接 */
.oe-ref-cell a {
    color: #0056b3;
    font-weight: bold;
    text-decoration: none;
}

.oe-ref-cell a:hover {
    text-decoration: underline;
}

.oe-producer-cell {
    color: #666;
}

/* 移除 Elementor 可能带来的默认干扰 */
.oe-spec-table tr, .oe-spec-table td {
    background: transparent !important;
}

/* --- 完整列表页头部布局 --- */
.oe-full-list-header {
    display: flex;
    justify-content: space-between; /* 标题在左，按钮在右 */
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 2px solid #e3a841;
}

.oe-full-title {
    margin: 0;
    font-size: 22px;
    color: #333;
}

/* 返回按钮样式 */
.oe-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #333; /* 深色背景 */
    color: #fff !important;
    padding: 10px 20px;
    text-decoration: none !important;
    border-radius: 4px;
    font-weight: bold;
    font-size: 14px;
    transition: background 0.3s ease;
}

.oe-back-btn:hover {
    background-color: #e3a841; /* 悬停变为黄色 */
    color: #000 !important;
}

.oe-back-btn svg {
    transition: transform 0.3s ease;
}

.oe-back-btn:hover svg {
    transform: translateX(-5px); /* 悬停时箭头向左动一下 */
}

/* 移动端适配 */
@media (max-width: 600px) {
    .oe-full-list-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
}