/* ============================================================
   common.css — 所有模板共享组件
   供 store / user / agent_site 等面向用户的页面使用
   支持 OSS CDN 加速，发布后上传本文件到 CDN 即可
   ============================================================ */

/* ===== 全局滚动条 ===== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ===== 悬浮客服组件 (cs-float) ===== */
#cs-float {
    position: fixed; right: 16px; bottom: 90px; z-index: 990;
    display: flex; flex-direction: column; align-items: stretch;
    width: 64px;
    background: #fff; border-radius: 14px;
    box-shadow: 0 4px 20px rgba(0,0,0,.13), 0 1px 4px rgba(0,0,0,.07);
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
}
#cs-float:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(0,0,0,.16), 0 2px 8px rgba(0,0,0,.09);
}
.cs-btn {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 10px 6px; width: 100%; text-decoration: none;
    font-size: 11px; font-weight: 500; color: #475569;
    transition: background .15s, color .15s;
    border-bottom: 1px solid #f1f5f9;
    box-sizing: border-box;
}
.cs-btn:last-child { border-bottom: none; }
.cs-btn i { font-size: 21px; line-height: 1; }
.cs-btn span { font-size: 10px; line-height: 1.2; text-align: center; }
.cs-btn:hover { background: #f0f6ff; }
.cs-btn.cs-qq i      { color: #1296db; }
.cs-btn.cs-livechat i{ color: #6366f1; }
.cs-btn.cs-whatsapp i{ color: #25d366; }
.cs-btn.cs-telegram i{ color: #3aa6ee; }

/* ===== 回到顶部按钮 ===== */
#cs-back-top {
    position: fixed; right: 16px; bottom: 28px; z-index: 990;
    width: 48px; height: 48px; border-radius: 50%;
    background: #fff; border: none;
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
    font-size: 18px; color: #64748b; cursor: pointer;
    display: none; align-items: center; justify-content: center;
    transition: color .2s, transform .2s;
}
#cs-back-top:hover { color: #2563eb; transform: translateY(-2px); }
#cs-back-top.show { display: flex; }

/* ===== Flash 消息通用 ===== */
.flash-wrap { max-width: 1200px; margin: 12px auto; padding: 0 20px; }
.flash {
    padding: 12px 16px; border-radius: 10px;
    font-size: 13.5px; margin-bottom: 10px;
    display: flex; align-items: flex-start; gap: 10px;
    animation: fadeInDown .3s ease;
}
.flash-success { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.flash-danger  { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.flash-warning { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.flash-info    { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }

/* ===== 动画 ===== */
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ===== 公告栏 ===== */
.announce-bar {
    background: linear-gradient(90deg, #1e293b 0%, #334155 100%);
    color: rgba(255,255,255,.92);
    text-align: center; padding: 9px 20px;
    font-size: 13px; letter-spacing: .3px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
.announce-bar i { color: #fbbf24; }

/* ===== 通用 Trust Bar ===== */
.trust-bar {
    background: #fff;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    padding: 22px 0;
}
.trust-bar .inner {
    max-width: 1200px; margin: 0 auto; padding: 0 20px;
    display: grid; grid-template-columns: repeat(4, 1fr);
}
.trust-item {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 10px 24px 10px 0;
    border-right: 1px solid #e2e8f0;
}
.trust-item:last-child { border-right: none; padding-right: 0; }
.trust-item:first-child { padding-left: 0; }
.trust-icon {
    width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.trust-icon.blue   { background: #eff6ff; color: #3b82f6; }
.trust-icon.green  { background: #f0fdf4; color: #22c55e; }
.trust-icon.amber  { background: #fffbeb; color: #f59e0b; }
.trust-icon.violet { background: #f5f3ff; color: #8b5cf6; }
.trust-title { font-size: .88rem; font-weight: 700; color: #0f172a; margin: 0 0 3px; }
.trust-desc  { font-size: .78rem; color: #64748b; margin: 0; line-height: 1.4; }

@media (max-width: 900px) {
    .trust-bar .inner { grid-template-columns: repeat(2, 1fr); }
    .trust-item { border-right: none; border-bottom: 1px solid #e2e8f0; padding: 12px 0; }
    .trust-item:nth-child(3), .trust-item:last-child { border-bottom: none; }
}
@media (max-width: 500px) {
    .trust-bar .inner { grid-template-columns: 1fr; }
    .trust-item:nth-child(3) { border-bottom: 1px solid #e2e8f0; }
}