/* =====================================================
   广西消防协会官网 - 主样式文件
   ===================================================== */

/* ===== CSS变量 ===== */
:root {
    --primary: #003366;
    --flame: #1e5799;
    --red: #d32f2f;
    --gray: #f5f7fa;
}

/* ===== 基础样式 ===== */
* { scroll-behavior: smooth; }
body {
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
    background: #f8fafc;
    color: #222;
}

/* ===== 主题色 ===== */
.bg-primary { background-color: #003366; }
.text-primary { color: #003366; }
.border-primary { border-color: #003366; }
.bg-flame { background: linear-gradient(135deg, #003366 0%, #1e5799 50%, #d32f2f 100%); }
.hover\:bg-blue-50:hover{ color: #1e5799;}

/* ===== 交互效果 ===== */
.hover-lift { transition: all .3s; }
.hover-lift:hover { transform: translateY(-4px); box-shadow: 0 10px 25px rgba(0, 51, 102, .15); }
.fade-in { animation: fadeIn .4s ease; }
@keyframes fadeIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
.modal-enter { animation: modalIn .3s ease; }
@keyframes modalIn { from{opacity:0;transform:scale(.9)} to{opacity:1;transform:scale(1)} }

/* ===== 导航样式 ===== */
.nav-link { position: relative; }
.nav-link::after {
    content:''; position:absolute; left:50%; bottom:-4px; width:0; height:2px;
    background:#d32f2f; transition:all .3s; transform:translateX(-50%);
}
.nav-link:hover::after, .nav-link.active::after { width:80%; }
/* 下拉菜单 - 使用独立类名避免与Tailwind冲突 */
.nav-submenu { display: none !important; }
.dropdown:hover .nav-submenu { display: block !important; }
#userMenuArea:hover #userDropdown { display: block !important; }
.nav-link.nav-active { color:#d32f2f; font-weight:700; }
.nav-link.nav-active::after { width:80%; background:#d32f2f; }

/* ===== Banner轮播 ===== */
.banner-img { background-size:cover; background-position:center; }
.banner-1 { background:linear-gradient(rgba(0,51,102,.75),rgba(0,51,102,.5)),url('https://picsum.photos/seed/fire1/1600/600'); }
.banner-2 { background:linear-gradient(rgba(0,51,102,.7),rgba(211,47,47,.4)),url('https://picsum.photos/seed/fire2/1600/600'); }
.banner-3 { background:linear-gradient(rgba(30,87,153,.75),rgba(0,51,102,.5)),url('https://picsum.photos/seed/fire3/1600/600'); }

/* ===== Tab按钮 ===== */
.tab-btn.active { background:#003366; color:white; }

/* ===== 滚动条隐藏 ===== */
.scroll-hide::-webkit-scrollbar { display:none; }

/* ===== Toast通知 ===== */
.toast-enter { animation:toastIn .3s ease; }
@keyframes toastIn { from{opacity:0;transform:translateX(100%)} to{opacity:1;transform:translateX(0)} }

/* ===== 图表动画 ===== */
.bar-chart div { transition:height 1s ease; }

/* ===== 会员Logo墙滚动 ===== */
@keyframes scrollPartners { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
#memberPartnerScroll:hover { animation-play-state:paused; }

/* ===== 脉冲红点 ===== */
.pulse-red { animation:pulseRed 2s infinite; }
@keyframes pulseRed {
    0%,100%{box-shadow:0 0 0 0 rgba(211,47,47,.5)}
    50%{box-shadow:0 0 0 10px rgba(211,47,47,0)}
}

/* ===== SPA视图切换 ===== */
.view-container { display:none; min-height:calc(100vh - 64px); }
.view-container.view-active { display:block; animation:fadeIn .35s ease; }

/* ===== 专家介绍轮播墙 ===== */
.expert-wall { position: relative; width: 100%; height: 420px; display: flex; align-items: center; justify-content: center; overflow: visible; }
.expert-track { position: relative; width: 280px; height: 360px; }
.expert-card {
    position: absolute; width: 280px; height: 380px; left: 0; top: 0;
    border-radius: 16px; overflow: hidden; cursor: pointer;
    background: #fff;
    transition: transform .45s cubic-bezier(.25,.46,.45,.94), opacity .45s ease, box-shadow .45s ease, z-index 0s .25s;
    -webkit-box-reflect: below 3px linear-gradient(to bottom, transparent 85%, rgba(255,255,255,.35) 80%, rgba(255,255,255,.7) 95%);
}
.expert-card-photo {
    width: 100%; height: 56%; display: flex; align-items: center; justify-content: center;
    font-size: 72px; color: rgba(255,255,255,.85); position: relative;
}
.expert-card-info { padding: 14px 16px 12px; text-align: center; }
.expert-card-info .ec-name { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.expert-card-info .ec-title { font-size: 12px; color: #555; line-height: 1.4; margin-bottom: 3px; }
.expert-card-info .ec-desc { font-size: 11px; color: #888; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* 导航按钮 */
.expert-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 42px; height: 42px; border-radius: 50%;
    background: #fff; border: 1.5px solid #d1d5db;
    color: #003366; cursor: pointer; z-index: 25;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; transition: all .25s;
    box-shadow: 0 3px 10px rgba(0,0,0,.12);
}
.expert-arrow:hover { background: #003366; color: #fff; border-color: #003366; box-shadow: 0 4px 14px rgba(0,51,102,.3); }
.expert-arrow-prev { left: 8px; }
.expert-arrow-next { right: 8px; }
.expert-dot.on { background: #003366; width: 28px; border-radius: 5px; }

/* ===== 首页信息资讯模块 ===== */
.info-news-item { transition: background-color 0.2s ease; }
.info-news-item:hover { background-color: #f9fafb; }
.info-thumb img { transition: opacity 0.2s ease; }
.info-news-item:hover .info-thumb img { opacity: 0.85; }
.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ===== 会员Logo墙 ===== */
.logo-wall { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px 24px; align-items: center; }
.logo-item { display: flex; align-items: center; justify-content: center; cursor: pointer; transition: opacity .25s ease; }
.logo-item:hover { opacity: .5; }
.logo-item img { width: auto !important; height: auto !important; max-width: 100% !important; max-height: 56px !important; object-fit: contain !important; border: none !important; background: transparent !important; }
.logo-placeholder { width: 180px; height: 64px; background: #9e9e9e; border-radius: 4px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 16px; font-weight: 500; letter-spacing: 2px; }

/* ===== 继续教育模块 ===== */
.edu-tab-btn { padding: 4px 14px; border-radius: 20px; font-size: 12px; font-weight: 600; border: 1.5px solid #e5e7eb; background: #fff; color: #6b7280; cursor: pointer; transition: all .2s; white-space: nowrap; }
.edu-tab-btn.active { background: #dc2626; color: #fff; border-color: #dc2626; }
.edu-tab-btn:hover:not(.active) { border-color: #dc2626; color: #dc2626; }
.edu-course-card { background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.08); cursor: pointer; transition: transform .25s, box-shadow .25s; }
.edu-course-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.edu-card-img { height: 140px; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; }
.edu-card-tag { position: absolute; bottom: 8px; right: 8px; padding: 2px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; color: #fff; }
.edu-card-body { padding: 12px 14px; }
.edu-card-title { font-size: 14px; font-weight: 700; color: #1f2937; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 8px; }
.edu-card-meta { font-size: 11px; color: #9ca3af; display: flex; align-items: center; gap: 12px; }

/* ===== 课程详情页 ===== */
.edu-detail-tab { color: #6b7280; cursor: pointer; transition: color .2s; border: none; background: none; }
.edu-detail-tab:hover { color: #dc2626; }
.edu-detail-tab.active { color: #dc2626; font-weight: 700; }
.edu-detail-tab.active::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:#dc2626; border-radius:1px; }
.edu-lesson-item { display:flex; align-items:center; gap:14px; padding:16px 20px; transition:background .15s; cursor:pointer; }
.edu-lesson-item:hover { background:#fafafa; }
.edu-lesson-thumb { width:120px;height:68px;border-radius:6px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:white;font-size:11px;font-weight:600;overflow:hidden;position:relative; }
.edu-lesson-tag { position:absolute;top:4px;left:4px;padding:1px 7px;border-radius:3px;font-size:10px;background:#22c55e;color:white;font-weight:600; }
.edu-lesson-info { flex:1;min-width:0; }
.edu-lesson-title { font-size:13px;font-weight:600;color:#1f2937;line-height:1.5;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.edu-lesson-row { display:flex;align-items:center;gap:16px;font-size:11px;color:#9ca3af; }
.edu-lesson-done { width:28px;height:28px;border-radius:50%;background:#22c55e;display:flex;align-items:center;justify-content:center;color:white;flex-shrink:0; }
.edu-lesson-progress { width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0; }
.edu-progress-text { position:absolute;font-size:9px;font-weight:700;line-height:1; }
.border-l-3 { border-left-width: 3px; }

/* ===== 专题班大卡片 ===== */
.edu-topic-card { background:transparent; border-radius:10px; overflow:hidden; cursor:pointer; transition:transform .2s,box-shadow .2s; box-shadow:0 1px 8px rgba(0,0,0,.08); }
.edu-topic-card:hover { transform:translateY(-3px); box-shadow:0 6px 20px rgba(0,0,0,.12); }

/* ===== 继续教育主Tab页签 ===== */
.edu-main-tab { color:#6b7280; cursor:pointer; transition:color .2s; border:none; background:none; }
.edu-main-tab:hover { color:#dc2626; }
.edu-main-tab.active { color:#dc2626; font-weight:700; }
.edu-main-tab.active::after { content:''; position:absolute; bottom:-1px; left:0; right:0; height:2px; background:#dc2626; }

/* ===== 课程中心筛选区 ===== */
.edu-center-filter-row { display:flex; align-items:baseline; gap:2px; flex-wrap:wrap; }
.edu-center-filter-label { width:64px; font-size:12px; color:#6b7280; font-weight:600; flex-shrink:0; padding-top:4px; }
.edu-center-filter-opts { display:flex; flex-wrap:wrap; gap:6px; flex:1; }
.edu-center-filter-opt { font-size:12px; padding:3px 10px; border-radius:999px; border:1px solid #e5e7eb; color:#6b7280; cursor:pointer;transition:all .15s; white-space:nowrap; background:#fff; }
.edu-center-filter-opt:hover { border-color:#dc2626; color:#dc2626; }
.edu-center-filter-opt.active { background:#dc2626; color:#fff; border-color:#dc2626; }

/* 课程中心卡片 */
.edu-center-card { background:#fff; border-radius:8px; overflow:hidden; box-shadow:0 1px 4px rgba(0,0,0,.06); cursor:pointer; transition:transform .2s,box-shadow .2s; }
.edu-center-card:hover { transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,.1); }
.edu-center-card-img { height:110px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.edu-center-card-img-text { color:rgba(255,255,255,.85); font-size:13px; font-weight:600; text-align:center; line-height:1.4; padding:0 10px; }
.edu-center-card-body { padding:10px 12px; }
.edu-center-card-title { font-size:13px; font-weight:600; color:#1f2937; line-height:1.4; margin-bottom:5px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.edu-center-card-meta { display:flex; align-items:center; justify-content:between; gap:6px; font-size:11px; color:#9ca3af; }

/* 排序按钮组 */
.edu-sort-btn { font-size:13px; padding:6px 12px; border-radius:4px; cursor:pointer; transition:all .15s; border:none; background:transparent; color:#6b7280; display:inline-flex; align-items:center; gap:4px; }
.edu-sort-btn:hover { color:#374151; }
.edu-sort-btn.active { color:#dc2626; font-weight:600; }

/* ===== 互动交流侧边栏 ===== */
.community-sidebar-btn { color: #6b7280; background: transparent; border: none; }
.community-sidebar-btn:hover { background: #f0f4ff; color: #003366; }
.community-sidebar-btn.active { background: #e8edff; color: #003366; font-weight: 700; }
.community-sidebar-btn.active i { color: #d32f2f !important; }

/* ===== 右下角悬浮联系栏 ===== */
.float-bar {
    position: fixed; right: 20px; bottom: 92px; z-index: 9999;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.fb-main {
    width: 54px; height: 54px; border-radius: 50%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff; font-size: 12px; font-weight: 700; cursor: pointer;
    box-shadow: 0 4px 16px rgba(245,158,11,.35);
    transition: transform .3s ease, box-shadow .3s ease, border-radius .3s ease;
    line-height: 1.25;
}
.fb-main:hover { transform: scale(1.08); box-shadow: 0 6px 24px rgba(245,158,11,.45); }
.float-bar:hover .fb-main { transform: rotate(180deg); border-radius: 50%; }
.fb-sub-list { display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.float-bar:hover .fb-sub-list { pointer-events: auto; }
.fb-item {
    position: relative; width: 48px; height: 48px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 20px; cursor: pointer;
    box-shadow: 0 3px 12px rgba(0,0,0,.15);
    opacity: 0; transform: translateY(20px) scale(.6);
    transition: opacity .28s ease, transform .28s ease, box-shadow .25s ease;
}
.float-bar:hover .fb-item { opacity: 1; transform: translateY(0) scale(1); }
.float-bar:hover .fb-item:nth-child(1) { transition-delay: 0s; }
.float-bar:hover .fb-item:nth-child(2) { transition-delay: .05s; }
.float-bar:hover .fb-item:nth-child(3) { transition-delay: .10s; }
.float-bar:hover .fb-item:nth-child(4) { transition-delay: .15s; }
.fb-item:hover { transform: scale(1.1) !important; box-shadow: 0 5px 20px rgba(0,0,0,.2); }
.fb-item.gzh { background: linear-gradient(135deg, #003366, #0055a5); }
.fb-item.phone { background: linear-gradient(135deg, #e74c3c, #c0392b); }
.fb-item.wechat { background: linear-gradient(135deg, #07c160, #06ae56); }
.fb-item.qq { background: linear-gradient(135deg, #1296db, #0d7abb); }

/* 悬浮弹出面板 */
.fb-pop {
    position: absolute; right: 62px; top: 50%; transform: translateY(-50%);
    background: #fff; border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.14);
    padding: 16px; min-width: 180px;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .25s ease, visibility .25s ease, transform .25s ease;
}
.fb-item:hover .fb-pop { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(-50%) translateX(0); }
.fb-pop-title { font-size: 13px; font-weight: 700; color: #333; margin-bottom: 8px; text-align: center; }
.fb-pop-qr {
    width: 140px; height: 140px; border-radius: 6px;
    background: linear-gradient(135deg, #f0f0f0, #e8e8e8);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; color: #999; text-align: center; line-height: 1.5;
}
.fb-pop-phone-num { font-size: 22px; font-weight: 700; color: #e74c3c; text-align: center; letter-spacing: 1px; }
.fb-pop-hint { font-size: 11px; color: #999; text-align: center; margin-top: 6px; }
.fb-pop-qq-btn {
    display: block; width: 100%; padding: 9px 0; border-radius: 6px;
    background: linear-gradient(135deg, #1296db, #0d7abb); color: #fff;
    font-size: 13px; font-weight: 600; text-align: center; text-decoration: none;
    transition: opacity .2s;
}
.fb-pop-qq-btn:hover { opacity: .85; }