/* 全站主题色（品牌绿）：各页面文本统一引用该变量 */
:root {
  --theme-color: #188f5b;
}

body * {
  box-sizing: border-box;
  flex-shrink: 0;
}
body {
  font-family: PingFangSC-Regular, Roboto, Helvetica Neue, Helvetica, Tahoma,
    Arial, PingFang SC-Light, Microsoft YaHei;
}
input {
  background-color: transparent;
  border: 0;
}
button {
  margin: 0;
  padding: 0;
  border: 1px solid transparent;
  outline: none;
  background-color: transparent;
}

button:active {
  opacity: 0.6;
}
.flex-col {
  display: flex;
  flex-direction: column;
}
.flex-row {
  display: flex;
  flex-direction: row;
}
.justify-start {
  display: flex;
  justify-content: flex-start;
}
.justify-center {
  display: flex;
  justify-content: center;
}

.justify-end {
  display: flex;
  justify-content: flex-end;
}
.justify-evenly {
  display: flex;
  justify-content: space-evenly;
}
.justify-around {
  display: flex;
  justify-content: space-around;
}
.justify-between {
  display: flex;
  justify-content: space-between;
}
.nowrap {
  white-space: nowrap;
}
.align-start {
  display: flex;
  align-items: flex-start;
}
.align-center {
  display: flex;
  align-items: center;
}
.align-end {
  display: flex;
  align-items: flex-end;
}

/* ---------- Cookie 同意横幅（全站共用，DOM 由 js/cookie-consent.js 注入） ---------- */
/* 视觉样式对齐 hansfive.com（Bunya 母公司）的 .cookies-box：
   深灰通栏、固定贴底、白色大写标题 + 分隔线、浅灰正文 + 绿色/白色胶囊按钮。
   原站为响应式（1rem = 视口宽/120），本站是 1920 固定设计稿 + 等比缩放，
   故按 1920 设计稿换算：1rem = 1920/120 = 16px，各值已等比换算（原站值 ×1.3734）。 */
@keyframes cookie-consent-in {
  from {
    opacity: 0;
    transform: translateY(48px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes cookie-consent-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(48px);
  }
}

.cookie-consent {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 300;
  width: 100%;
  padding: 0 24px;
  box-sizing: border-box;
  /* 标题高度：同时驱动标题自身与下方通栏分隔线的位置，改一处即可对齐 */
  --cc-title-h: 76px;
  background-color: rgb(43, 46, 46);
  /* 与 hansfive.com 一致的 Roboto 字体 */
  font-family: Roboto, Poppins-Regular, Poppins, "Source Han Sans SC", sans-serif;
  /* 初始隐藏：与 keyframes 的 from 状态一致，避免首帧闪现 */
  opacity: 0;
  transform: translateY(48px);
  pointer-events: none;
}

/* 标题下方的通栏分隔线：挂在横幅自身，随横幅铺满整条（与提示栏等宽），
   位置对齐标题底部（标题高 76px）。内容块仍为 1650px 居中，不受影响。 */
.cookie-consent::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: var(--cc-title-h);
  height: 1px;
  background-color: rgb(102, 102, 102);
}

.cookie-consent.is-visible {
  pointer-events: auto;
  animation: cookie-consent-in 0.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.cookie-consent.is-leaving {
  pointer-events: none;
  animation: cookie-consent-out 0.35s cubic-bezier(0.4, 0, 0.6, 1) both;
}

/* 内容限宽并水平居中：宽度与全站内容区一致（1920 设计稿内左右各内缩 135px = 1650px） */
.cookie-consent__inner {
  width: 100%;
  max-width: 1650px;
  margin: 0 auto;
}

/* 标题：白色加粗大写。分隔线由 .cookie-consent::after 统一绘制，
   此处不再重复绘制，避免两条 1px 线在缩放后错位成 2px。 */
.cookie-consent__title {
  display: flex;
  align-items: center;
  height: var(--cc-title-h);
  margin: 0;
  color: rgb(255, 255, 255);
  font-size: 26px;
  font-weight: 700;
  line-height: 24px;
  text-transform: uppercase;
}

/* 下半区：左侧文字 + 右侧按钮 */
.cookie-consent__content {
  display: flex;
  align-items: flex-start;
  margin-top: 20px;
}

.cookie-consent__body {
  width: 1364px;
  /* 右侧按钮区预留：margin-left 73 + 主按钮 200 + 间距 20 + 次按钮 200 = 493 */
  max-width: calc(100% - 493px);
  color: rgb(217, 217, 217);
  font-size: 18px;
  font-weight: 400;
  line-height: 33px;
}

.cookie-consent__welcome,
.cookie-consent__text {
  margin: 0;
}

/* "here"：下划线链接样式（无实际跳转目标） */
.cookie-consent__link {
  text-decoration: underline;
  cursor: pointer;
}

.cookie-consent__actions {
  display: flex;
  flex-shrink: 0;
  margin-left: 73px;
  padding-top: 16px;
  padding-bottom: 16px;
}

.cookie-consent__btn {
  border: 0;
  padding: 0;
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  line-height: 48px;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
}

/* 主按钮：主题色胶囊 */
.cookie-consent__btn--accept {
  min-width: 200px;
  height: 48px;
  margin-right: 20px;
  border-radius: 50px;
  background-color: var(--theme-color);
  color: rgb(255, 255, 255);
}

/* 次按钮：白色胶囊 */
.cookie-consent__btn--reject {
  min-width: 200px;
  height: 48px;
  border-radius: 50px;
  background-color: rgb(255, 255, 255);
  color: rgb(102, 102, 102);
}