/*
    =======================================================================================================

    Name          : Header

    =======================================================================================================
*/


.header {
    margin-top:20px;
    margin-bottom: 20px;
}

.header-blackLine { /* top black line*/
    border-top: 3px solid black;
}


@media (max-width: 767px) {  
    .logo {
        display: block; margin-left: auto; margin-right: auto; 
    }
    
    .header-barWrapper .span9 {
        max-width: 45%;
    }
        
    .header-search {
        top:-45px;
    }
}


@media (max-width: 490px) {  
    .header-search {
        top:-60px !important;
    } 
}

@media (max-width: 360px) {  
    .header-search {
        display: none;
    }  
    
    .header-barWrapper .span9 {
        max-width: 100%;
        
    }
}


/*  ----------------------------------------------------------------------------
    Top line from all the pages except index
*/

.header-barWrapper {
    background-color: #ededed;
    padding: 30px 0px 30px 0px;
    position: relative;
    background: url('../images/header/bg_header.png') repeat #FCFCFC;
    border-top:1px solid #ececec;
    border-bottom:1px solid #ececec; 
}

/*
    =======================================================================================================

    Name          : Header menu

    =======================================================================================================
*/

 
@media (max-width: 767px) { 
    .js-jquery-dropdown {
        float: none !important;
        position: relative;
        left: -50%;
    }
    
    
    .js-jquery-dropdown-wrapper {
        position: relative;
        float: left;
        left: 50%;
    }

}


@media (max-width: 480px) {
    ul.js-jquery-dropdown{
        width:100% !important;
        display: block !important;
        float:none;
    }
    ul.js-jquery-dropdown li { /* the main menu */
        float: none !important; 
        zoom: 1; 
        width:100% !important;
    }
    
    ul.js-jquery-dropdown li a {
        width:100% !important;
        font-size: 10px !important;
        color: #999 !important;
        text-transform: uppercase;
    } 
    
    .js-jquery-dropdown-wrapper {
        width: 100%;
    }
    
    
    ul.js-jquery-dropdown ul {
        width:100% !important;
         border-radius: 0px 0px 4px 4px !important; 
        -moz-border-radius: 0px 0px 4px 4px !important; 
        -webkit-border-radius: 0px 0px 4px 4px !important;
        border: 1px solid rgba(0,0,0,0.08) !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.12) !important;
        background: rgba(255, 255, 255, 0.96) !important;
        backdrop-filter: blur(8px); /* 现代毛玻璃效果 */
        padding: 8px 0 !important;
        top: 55px !important; /* 稍微拉开一点距离 */
    }
}

.js-jquery-dropdown { /* all the menu */
    float:right;
    /*
    font-family: 'Dosis', sans-serif;
    font-size: 15px;
    */
    font-family: 'Open Sans', arial, sans-serif;
    font-size: 14px;
    margin-top:10px !important;
    
}


ul.js-jquery-dropdown, .js-jquery-dropdown ul { /* set up the list style for our menu and submenu */
    position: relative; 
    list-style: none;
    margin: 0 10px 0 0;
    padding: 0px;
}

ul.js-jquery-dropdown li { /* the main menu */
    float: left; 
    zoom: 1; 
    margin: 0px 0px 0px 0px;
    border: 1px solid transparent; /* 关键：平时就占好位，但是透明的 */
    transition: all 0.3s ease;
}


ul.js-jquery-dropdown li a { /* main manu links */
    display: block; 
    padding:6px 15px 5px 15px;
    color:#525252;
    text-decoration: none;
            -o-transition: all 0s  !important;
    -webkit-transition: all 0s  !important;
    -moz-transition: all 0s !important;
    font-size: 10px !important;
    color: #999 !important;
    text-transform: uppercase;
    transition: all 0.3s ease !important; /* 覆盖掉之前的 0s 转换 */
    height: 40px; /* 建议给一个固定高度，彻底锁死 */
}

ul.js-jquery-dropdown li strong { 
    color:deeppink;
}

.js-jquery-dropdown > .menu-selected { /* main manu selected li element */
    
    border:1px solid white;
    color:#df2020 !important;
  
    
    position: relative;


}

.menu-selected > a { /* main menu selected link */
    padding:5px 14px 5px 14px !important;
    color:#df2020 !important;
}

ul.js-jquery-dropdown a:hover {  /* hover color for all the links */
    color:#df2020;
}


.sub_menu_arrow { /* small arrow for menus with submenus */
    position: relative;
    display: inline-block;
    vertical-align:bottom;
    top:2px;
    left:25px;
    width: 0; 
    height: 0; 
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #999;
}


.menu-selected .sub_menu_arrow {
    
}

/* 缩小下拉菜单容器的宽度并居中定位 */
ul.js-jquery-dropdown li ul {
    width: 95px !important;   /* 【核心：设置你想要的宽度】 */
    left: 50% !important;      /* 配合 transform 实现相对于父级居中 */
    transform: translateX(-50%) !important; 
    min-width: 0 !important;   /* 清除可能的最小宽度限制 */
    padding: 5px 0 !important; /* 缩小上下内边距，让整体更精致 */
}

/* --- 二级菜单（下拉列表）文字单独设置 --- */
ul.js-jquery-dropdown li ul li a {
    width: 100% !important;    /* 宽度撑满上面设置的 110px */
    padding: 8px 0 !important; /* 左右 padding 设为 0，靠 text-align 居中 */
    text-align: center !important; 
    display: block !important;
    line-height: 1.4 !important;    /* 控制行间距 */
    display: block !important;
    text-align: center;
    height: 50px !important;
}

/* 二级菜单中的中文 (b 标签) */
ul.js-jquery-dropdown li ul li a b {
    font-size: 13px !important;    /* 二级菜单文字通常比一级菜单小一点 */
    margin-bottom: 0 !important;   /* 移除之前设置的负 margin，防止重叠 */
    display: block !important; /* 变成块状，确保英文在它下方居中 */
    margin-top: 15px !important;
    line-height: 0.5 !important;
}

/* 二级菜单中的英文 (br 后面的文字或直接在 a 里的文字) */
ul.js-jquery-dropdown li ul li a {
    font-size: 11px !important;    /* 设置二级菜单英文大小 */
    color: #777 !important;        /* 英文颜色稍淡 */
    text-transform: none !important; /* 如果不想全大写可以改这里 */
}

/* 二级菜单悬停效果 */
ul.js-jquery-dropdown li ul li a:hover {
    background-color: #f8f8f8 !important; /* 增加一个浅色背景感 */
}

ul.js-jquery-dropdown a:hover .sub_menu_arrow{  /* hover color for all the links */
    border-top-color: #ff4b2b;
    color: #ff4b2b !important;
}

ul.js-jquery-dropdown li.hover, ul.js-jquery-dropdown li:hover { /* hover submenu for .hover class - the .hover class is added by javascript */
    position: relative; 
    border: 1px solid #eee !important; /* 或者你喜欢的颜色 */
    border-bottom: 1px solid transparent !important;
    background-color: white;
    /* 移除多余的阴影或者统一阴影，防止位移 */
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}


ul.js-jquery-dropdown li.hover {  /* hover on menu (top menu) li */
    color:#df2020 !important;
    border: 1px solid white;
    border-bottom: 1px solid transparent;
    
    -moz-box-shadow:1px 1px 2px 1px rgba(177, 177, 177, 0.27);
    -webkit-box-shadow:1px 1px 2px 1px rgba(177, 177, 177, 0.27);
    box-shadow:1px 1px 2px 1px rgba(177, 177, 177, 0.27);
    
    background-color: white;
    z-index: 9999;

}

/* 导航文字美化：中文大、英文小 */
ul.js-jquery-dropdown li a b {
    font-size: 14px !important;
    display: block;
    margin-bottom: -16px;
    color: #333;
    transition: all 0.3s ease; /* 这里的 transition 要包含所有属性 */
    letter-spacing: 0.5px !important; /* 字母间距微调 */
    -webkit-font-smoothing: antialiased;
}

ul.js-jquery-dropdown li.hover > a { /* hover on menu (top menu) link */
    padding: 6px 15px 5px 15px !important; /* 必须与上面完全一致 */
    color: #ff4b2b !important;
}

ul.js-jquery-dropdown li a:hover b,
ul.js-jquery-dropdown li.hover > a b {
    color: #ff4b2b !important;
    text-shadow: 0 0 1px rgba(255, 75, 43, 0.2);
    transition: all 0.3s ease !important; /* 覆盖掉之前的 0s 转换 */
}

ul.js-jquery-dropdown ul { /* hover on menu (the dropdown menu) */
    top: 100% !important; /* 使用百分比对齐父元素底部 */
    padding-top:5px;
    padding-bottom: 3px;
    width: 150px; 
    margin-top: -1px; /* 补回 1px 边框的距离 */
    display:none;
    
    position: absolute; 
    left:-1px;
    border: 1px solid white;
    border-top: none;
    -moz-box-shadow:1px 2px 2px 1px rgba(177, 177, 177, 0.27) !important;
    -webkit-box-shadow:1px 2px 2px 1px rgba(177, 177, 177, 0.27);
    box-shadow:1px 2px 2px 1px rgba(177, 177, 177, 0.27);

   

    font-size:14px;
    background-color: white;
    overflow-x: hidden;
    
    z-index: 9999;
    
}

ul.js-jquery-dropdown ul a {
    padding-left: 12px !important;
}

@-moz-document url-prefix() { /* fix for firefox shadow to big*/
    ul.js-jquery-dropdown ul {
        box-shadow:1px 3px 2px 1px rgba(177, 177, 177, 0.27) !important;
    }
}

@keyframes lf-pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.15); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
}


.dropdown-menu-moved { /* this class is added to the menu when there is not enought space on the right to show it*/
    left:-50px !important; /* move the menu */
}

.dropdown-separator { /* separator in the menu */
    border-bottom: 1px solid #eeeded;
    height:0px;
    margin:3px 3px 0px 3px;
    
}

ul.js-jquery-dropdown ul li {
    float: none; 
    padding-top:2px;
}
                                  

ul.js-jquery-dropdown ul li a { /* IE 6 & 7 Needs Inline Block */
    border-right: none; 
    width: 120px; 
    display: inline-block;
    padding: 8px 15px !important;
    width: 140px !important; /* 适当加宽 */
    font-size: 13px !important;
    color: #555 !important;
}
/*
    =======================================================================================================

    Name          : user

    =======================================================================================================
*/
.js-jquery-dropdown-wrapper .js-jquery-dropdown .login {
    color: #fff;
    margin-left: 10px;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
}

.js-jquery-dropdown-wrapper .js-jquery-dropdown .logined {
    margin-left: -10px;
    font-size: 12px;
}
/* 登录按钮：高质感黑金风格（防抖重制版） */
.login.btn-black-2 {
    /* 1. 基础背景与形状 */
    background: linear-gradient(135deg, #2c2c2e 0%, #000 100%) !important;
    border-radius: 8px !important;
    margin-left: 10px;
    
    /* 2. 关键：锁死边框和内边距，防止颤动 */
    border: 0 solid transparent !important; /* 强制无边框 */
    box-sizing: border-box !important;      /* 强制盒模型一致 */
    
    /* 3. 视觉效果 */
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    display: inline-block !important;       /* 确保作为块状对齐 */
    vertical-align: middle;                 /* 垂直对齐修正 */
    
    /* 4. 过渡动画 */
    transition: background 0.3s ease, box-shadow 0.3s ease, color 0.3s ease !important;
}

.login.btn-black-2:hover {
    /* 悬停只改变颜色和阴影亮度，绝不改变任何尺寸或位置属性 */
    background: linear-gradient(135deg, #3a3a3c 0%, #1a1a1a 100%) !important;
    box-shadow: 0 6px 15px rgba(255, 75, 43, 0.4) !important;
    
    /* 再次强制确保不产生边框和位移 */
    border: 0 solid transparent !important;
    transform: none !important; 
}

/* 按钮内文字微调（可选，用于增强质感） */
.login.btn-black-2 b {
    color: #fff !important;
    transition: color 0.3s ease;
}

.login.btn-black-2:hover b {
    color: #ff4b2b !important; /* 悬停时文字变红，增加反馈感 */
}

/* 未读消息：增加呼吸灯动画 */
/* 1. 基础本体：保持静止，确保文字清晰 */
.unread-badge {
    background: #ff3b30 !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: bold !important;
    height: 25px;
    min-width: 15px;
    padding: 0 5px;
    border-radius: 55px;
    
    /* 定位：相对于个人中心按钮右上角 */
    position: absolute;
    top: -9px;
    right: -10px;
    
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    z-index: 10;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* 给本体一个扎实的阴影 */
}

/* 2. 呼吸光圈：利用伪元素在背后闪烁 */
.unread-badge::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ff3b30;
    border-radius: 10px;
    z-index: -1; /* 确保在文字下方 */
    opacity: 0.6;
    /* 核心：只让这个背景层呼吸 */
    animation: lf-ghost-pulse 2s infinite;
}

/* 3. 专门针对背景光影的动画：只有缩放和透明度变化 */
@keyframes lf-ghost-pulse {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }
    70% {
        transform: scale(1.6); /* 向外扩散 1.6 倍 */
        opacity: 0;           /* 扩散到最后完全透明 */
    }
    100% {
        transform: scale(1);
        opacity: 0;
    }
}

/* Logo 微动效 */
.logo:hover {
    transform: scale(1.03);
    transition: transform 0.3s ease;
}

/* =======================================================================================================
    Search Box - 胶囊质感统一风格
    =======================================================================================================
*/

.header-search {
    position: relative;
    /* 增加一个微弱的层级感 */
    z-index: 10;
}

.header-search .input-append {
    position: absolute;
    right: 0px;
    top: 8px;
    margin-right: 0px;
    display: flex;
    align-items: center;
}

/* 1. 输入框美化 */
.header-search input[type="text"], 
.header-search .search-query {
    border: 1px solid #eeeeee !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border-radius: 20px 0 0 20px !important; /* 左侧圆角形成胶囊状 */
    padding: 6px 15px !important;
    height: 34px !important;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.02) !important;
    transition: all 0.3s ease !important;
    font-size: 13px;
    width: 160px; /* 根据需要调整宽度 */
}

/* 2. 输入框聚焦/悬停：增加卡片红微光 */
.header-search input[type="text"]:focus,
.header-search .search-query:hover {
    border-color: #ff4b2b !important;
    background: #ffffff !important;
    box-shadow: 0 0 8px rgba(255, 75, 43, 0.1) !important;
    outline: none !important;
}

/* 3. 搜索按钮：沿用登录按钮的黑金渐变 */
.header-search .btn {
    /* 1. 颜色：冷灰色调，模拟金属质感，避开暖色系 */
    background: linear-gradient(180deg, #f5f5f7 0%, #e0e0e2 100%) !important;
    color: #444 !important; /* 初始文字用深灰色，不刺眼 */
    
    /* 2. 形状与边框：完美的胶囊封口 */
    border: 1px solid #d1d1d6 !important; /* 给按钮一个浅色边框，增强立体感 */
    border-left: none !important; /* 与输入框连接处不要边框 */
    border-radius: 0 20px 20px 0 !important; 
    padding: 0 18px !important;
    height: 34px !important;
    line-height: 32px !important; /* 扣除边框厚度 */
    margin-left: -1px !important; 
    
    /* 3. 字体与质感 */
    font-weight: 500;
    font-size: 13px;
    cursor: pointer;
    box-shadow: none !important; /* 平时保持扁平化 */
    transition: all 0.2s ease-in-out !important;
}

/* 4. 搜索按钮悬停：光亮增强 */
.header-search .btn:hover {
    background: #ff4b2b !important; /* 悬停时变红，与全站主题统一 */
    border-color: #ff4b2b !important;
    color: #ffffff !important; /* 文字变白 */
    box-shadow: 0 4px 10px rgba(255, 75, 43, 0.3) !important;
}

/* 5. 搜索按钮点击态 */
.header-search .btn:active {
    transform: scale(0.98); /* 极轻微的点击下沉感，不产生颤动 */
}

/* 5. 页面标题与描述（增强可读性） */
.header-bar h3 {
    font-family: 'PingFang SC', sans-serif;
    color: #222;
    font-weight: 700;
    letter-spacing: 1px;
    margin: 0;
}

.header-page-description {
    font-size: 12px;
    color: #999;
    margin-top: 5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    /* 1. 顶部搜索引导区：让搜索框和搜索关键词融为一体 */
    .search-hero-section {
        background: #fff;
        padding-bottom: 20px;
        margin: 20px 0;
        border: 1px solid #eee;
        border-radius: 4px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.02);
        text-align: center;
    }

    .search-hero-section h2 {
        font-size: 20px;
        color: #888;
        font-weight: normal;
    }

    .search-hero-section h2 span {
        color: #DF2020; /* 标志性红 */
        font-weight: bold;
        border-bottom: 2px solid #DF2020;
        padding: 0 5px;
    }

    /* 2. 搜索框：精致的主题原生感 */
    .search-integration-form {
        max-width: 600px;
        margin: 0 auto;
        display: flex;
        border: 1px solid #ccc;
        border-radius: 30px; /* 圆角矩形更显精致 */
        overflow: hidden;
        background: #fff;
        transition: all 0.3s ease;
        box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
    }

    .search-integration-form:hover, 
    .search-integration-form:focus-within {
        border-color: #DF2020;
        box-shadow: 0 0 0 3px rgba(223, 32, 32, 0.1);
    }

    .search-integration-form input#s {
        flex: 1;
        border: none !important;
        padding: 20px 20px 10px 25px !important;
        font-size: 16px !important;
        outline: none !important;
        background: transparent !important;
        color: #333;
    }

    .search-integration-form button#searchsubmit {
        background: #333;
        color: #fff;
        border: none;
        padding: 0 30px;
        font-weight: bold;
        cursor: pointer;
        transition: background 0.2s;
    }

    .search-integration-form button#searchsubmit:hover {
        background: #DF2020;
    }

    /* 3. 结果列表容器：半透明呼应隐私页 */
    .search-list-wrapper {
        background: rgba(255, 255, 255, 0.96);
        padding: 20px 20px 10px 100px;
        margin-bottom: 20px;
        border-radius: 4px;
        border: 1px solid #eee;
    }

    /* 4. 分页美化 */
    .pagination-footer {
        text-align: center;
    }

    /* 无结果状态美化 */
    .empty-search-state {
        padding: 120px 0;
        color: #999;
        font-size: 18px;
        font-weight: bold;
    }