/* ==========================================================================
   回世科技 HuiShiIT 官网 — Cookie 合规同意横幅样式
   优先复用 style.css 的 :root 变量,并写死回退值保证本文件独立可用
   ========================================================================== */

/* ---- 横幅容器:固定底部,滑入/滑出 ----------------------------------------- */
.cc-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2000; /* 高于 back-top 等悬浮元素 */
  background: var(--white, #ffffff);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -8px 40px rgba(11, 21, 38, 0.14);
  transform: translateY(110%);
  transition: transform 0.45s var(--ease, cubic-bezier(0.22, 0.61, 0.36, 1));
  will-change: transform;
}

.cc-banner.cc-show { transform: translateY(0); }

.cc-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 28px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

/* ---- 图标:40px 圆形浅蓝底 + 描边风格 Cookie 图形 -------------------------- */
.cc-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(10, 94, 219, 0.08); /* --primary 8% */
  color: var(--primary, #0a5edb);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cc-icon svg { width: 22px; height: 22px; }

/* ---- 文案区 --------------------------------------------------------------- */
.cc-body { flex: 1; min-width: 0; }

.cc-body h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink, #0b1526);
}

.cc-body p {
  margin-top: 4px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--muted, #5b6472);
}

.cc-body p a {
  color: var(--primary, #0a5edb);
  text-decoration: underline;
}

.cc-body p a:hover { color: var(--primary-dark, #0847ad); }

/* ---- 设置面板:默认隐藏,.cc-open 展开 -------------------------------------- */
.cc-panel {
  display: none;
  margin-top: 12px;
  padding: 6px 14px;
  border: 1px solid var(--line, #e6eaf1);
  border-radius: 12px;
  background: var(--bg, #f5f7fa);
}

.cc-panel.cc-open { display: block; }

.cc-cat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 10px 0;
}

.cc-cat + .cc-cat { border-top: 1px solid var(--line, #e6eaf1); }

.cc-cat-text strong {
  display: block;
  font-size: 14px;
  color: var(--text, #171e2b);
}

.cc-cat-text span {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--muted, #5b6472);
}

/* 必要项右侧:小灰徽标(始终开启,不可关闭) */
.cc-always {
  flex-shrink: 0;
  padding: 3px 10px;
  border: 1px solid var(--line, #e6eaf1);
  border-radius: 999px;
  background: var(--white, #ffffff);
  font-size: 11.5px;
  color: var(--muted-2, #8a93a2);
  white-space: nowrap;
}

/* ---- 开关:42×24 圆胶囊 + 18px 圆点 ----------------------------------------- */
.cc-toggle {
  position: relative;
  width: 42px;
  height: 24px;
  border: none;
  border-radius: 999px;
  background: #c9d2de;
  flex-shrink: 0;
  transition: background 0.2s;
}

.cc-toggle-dot {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(11, 21, 38, 0.25);
  transition: transform 0.2s;
}

.cc-toggle.cc-on { background: var(--primary, #0a5edb); }
.cc-toggle.cc-on .cc-toggle-dot { transform: translateX(18px); }

/* ---- 操作按钮 -------------------------------------------------------------- */
.cc-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-shrink: 0;
  padding-top: 2px;
}

.cc-btn {
  height: 38px;
  padding: 0 22px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
}

.cc-btn-primary {
  background: var(--primary, #0a5edb);
  color: #ffffff;
}

.cc-btn-primary:hover {
  background: var(--primary-dark, #0847ad);
  transform: translateY(-1px);
}

.cc-btn-ghost {
  background: #ffffff;
  border: 1.5px solid var(--line, #e6eaf1);
  color: var(--muted, #5b6472);
}

.cc-btn-ghost:hover {
  border-color: var(--primary, #0a5edb);
  color: var(--primary, #0a5edb);
}

/* ---- 键盘焦点可见性 --------------------------------------------------------- */
.cc-toggle:focus-visible,
.cc-btn:focus-visible,
.cc-body p a:focus-visible {
  outline: 2px solid var(--primary, #0a5edb);
  outline-offset: 2px;
}

/* ---- 移动端(<680px):纵向布局,按钮撑满宽 ---------------------------------- */
@media (max-width: 679px) {
  .cc-inner {
    flex-direction: column;
    gap: 14px;
    padding: 18px 20px;
  }

  .cc-icon { width: 36px; height: 36px; }
  .cc-icon svg { width: 20px; height: 20px; }

  .cc-actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .cc-btn { width: 100%; }
}

/* ---- 减弱动态效果偏好:动画时长趋近于零 -------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .cc-banner,
  .cc-toggle,
  .cc-toggle-dot,
  .cc-btn {
    transition-duration: 0.01ms;
  }

  .cc-btn-primary:hover { transform: none; }
}