/* Cookie 授权条（Cookie Banner）+ 偏好设置弹窗（Cookie Preferences Dialog）
   视觉参数按用户提供的对照图实测（1440 视口 / 2 倍图）：
   - 底色 #212121（与 --aoyea-color-panel 一致），内容区宽度与首页主体内容一致；
   - 左 Logo 94 × 44，中间标题 16/24 加粗 + 正文 16/24，链接品牌绿并带下划线；
   - 右侧按钮列宽 227，Accept All 白底黑字、Decline 白色描边，两枚按钮高 48、间距 16；
   - 上下内边距 44，因此整条高度约 200（113 按钮列 + 44 × 2）。 */
.aoyea-component-cookie-banner {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 70;
  border-top: 1px solid rgb(255 255 255 / 11%);
  background: var(--aoyea-color-panel);
  opacity: 0;
  visibility: hidden;
  transition: opacity 280ms ease, transform 320ms cubic-bezier(0.4, 0, 0.2, 1), visibility 320ms ease;
}

/* 由脚本初始化后才显示：无 JavaScript 时不出现无法关闭的授权条。 */
html.aoyea-cookie-consent-visible .aoyea-component-cookie-banner {
  opacity: 1;
  visibility: visible;
}

/* Accept All / Decline 后关闭：淡出并下移，动画结束后由脚本移出布局。 */
.aoyea-component-cookie-banner.aoyea-component-cookie-banner--dismissed {
  opacity: 0;
  visibility: hidden;
  transform: translateY(100%);
}

.aoyea-component-cookie-banner .aoyea-cookie-banner-inner {
  display: flex;
  width: min(var(--aoyea-content-width), calc(100% - 100px));
  align-items: center;
  gap: 74px;
  margin: 0 auto;
  padding: 44px 0;
}

.aoyea-component-cookie-banner .aoyea-cookie-banner-logo {
  display: block;
  width: 94px;
  height: 44px;
}

/* 文案与右侧按钮顶部对齐（对照图中标题与 Accept All 上边缘齐平）。 */
.aoyea-component-cookie-banner .aoyea-cookie-banner-content {
  flex: 1 1 auto;
  max-width: 880px;
  align-self: flex-start;
  margin-right: auto;
}

.aoyea-component-cookie-banner .aoyea-cookie-banner-title {
  margin: 0 0 8px;
  color: #fff;
  font-family: var(--aoyea-font-ui);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

.aoyea-component-cookie-banner .aoyea-cookie-banner-text {
  margin: 0;
  color: #fff;
  font-family: var(--aoyea-font-ui);
  font-size: 16px;
  font-weight: 300;
  line-height: 24px;
}

.aoyea-component-cookie-banner .aoyea-cookie-banner-link {
  color: var(--aoyea-color-brand);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 200ms ease;
}

.aoyea-component-cookie-banner .aoyea-cookie-banner-link:hover,
.aoyea-component-cookie-banner .aoyea-cookie-banner-link:focus-visible {
  color: var(--aoyea-color-brand-strong);
}

.aoyea-component-cookie-banner .aoyea-cookie-banner-actions {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 16px;
  width: 227px;
}

/* 授权条按钮：对照图中两枚按钮均为 48 高、227 宽（列宽由 .aoyea-cookie-banner-actions 控制）。 */
.aoyea-component-cookie-banner .aoyea-cookie-banner-button {
  display: inline-flex;
  height: 48px;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #fff;
  font-family: var(--aoyea-font-ui);
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 220ms ease, border-color 220ms ease, color 220ms ease;
}

.aoyea-component-cookie-banner .aoyea-cookie-banner-button--primary {
  background: #fff;
  color: #000;
}

.aoyea-component-cookie-banner .aoyea-cookie-banner-button--primary:hover,
.aoyea-component-cookie-banner .aoyea-cookie-banner-button--primary:focus-visible {
  background: var(--aoyea-color-brand);
  color: #fff;
}

.aoyea-component-cookie-banner .aoyea-cookie-banner-button--ghost {
  border-color: #fff;
  color: #fff;
}

.aoyea-component-cookie-banner .aoyea-cookie-banner-button--ghost:hover,
.aoyea-component-cookie-banner .aoyea-cookie-banner-button--ghost:focus-visible {
  border-color: var(--aoyea-color-brand);
  color: var(--aoyea-color-brand);
}

/* ---------------------------------------------------------------- */
/* 偏好设置弹窗：Essential / Marketing / Performance / Functional  */
/* 按 Figma node 513:5135（cookie-setting-dialog-expend-2，727 × 1037）还原 */
/* ---------------------------------------------------------------- */
.aoyea-component-cookie-banner-modal {
  width: min(727px, calc(100vw - 32px));
  max-height: min(1037px, calc(100vh - 40px));
  padding: 0;
  border: 1px solid rgb(106 237 94 / 18%);
  border-radius: 20px;
  background: var(--aoyea-color-panel);
  color: #fff;
  box-shadow: 0 28px 64px rgb(0 0 0 / 55%);
  opacity: 0;
  transform: translateY(16px) scale(0.985);
  transition: opacity 240ms ease, transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.aoyea-component-cookie-banner-modal::backdrop {
  background: rgb(0 0 0 / 72%);
  opacity: 0;
  transition: opacity 240ms ease;
}

.aoyea-component-cookie-banner-modal[open] {
  display: flex;
  flex-direction: column;
}

.aoyea-component-cookie-banner-modal.aoyea-component-cookie-banner-modal--open {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.aoyea-component-cookie-banner-modal.aoyea-component-cookie-banner-modal--open::backdrop {
  opacity: 1;
}

/* 内容区滚动、底部按钮固定：Figma 中标题到最后一个条目位于滚动区，底部为 111px 操作栏。 */
.aoyea-component-cookie-banner-modal .aoyea-cookie-banner-dialog-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 45px 53px 56px;
  overflow-y: auto;
}

.aoyea-component-cookie-banner-modal .aoyea-cookie-banner-dialog-title {
  margin: 0;
  color: #e4e6ea;
  font-family: var(--aoyea-font-ui);
  font-size: 24px;
  font-weight: 600;
  line-height: normal;
  text-align: center;
}

.aoyea-component-cookie-banner-modal .aoyea-cookie-banner-dialog-close {
  position: absolute;
  top: 20px;
  right: 27px;
  display: grid;
  width: 36px;
  height: 36px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: opacity 200ms ease;
}

.aoyea-component-cookie-banner-modal .aoyea-cookie-banner-dialog-close:hover,
.aoyea-component-cookie-banner-modal .aoyea-cookie-banner-dialog-close:focus-visible {
  opacity: 0.72;
}

.aoyea-component-cookie-banner-modal .aoyea-cookie-banner-dialog-close img {
  display: block;
  width: 36px;
  height: 36px;
}

.aoyea-component-cookie-banner-modal .aoyea-cookie-banner-dialog-intro {
  margin: 24px 0 0;
  color: #9ea1a7;
  font-family: var(--aoyea-font-copy);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  /* 本机 Inter 静态字宽略宽于 Figma，轻微收紧以保持设计稿的 7 行换行。 */
  letter-spacing: -0.01em;
}

.aoyea-component-cookie-banner-modal .aoyea-cookie-banner-items {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 56px;
}

.aoyea-component-cookie-banner-modal .aoyea-cookie-banner-item + .aoyea-cookie-banner-item {
  border-top: 1px solid #737373;
  /* Figma 中分隔线上下各 24px（分隔线单独成元素），此处用 gap 24 + padding-top 24 复现。 */
  padding-top: 24px;
}

.aoyea-component-cookie-banner-modal .aoyea-cookie-banner-item-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 23px;
}

.aoyea-component-cookie-banner-modal .aoyea-cookie-banner-item-toggle {
  display: block;
  width: 23px;
  height: 23px;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: opacity 200ms ease;
}

.aoyea-component-cookie-banner-modal .aoyea-cookie-banner-item-toggle:hover,
.aoyea-component-cookie-banner-modal .aoyea-cookie-banner-item-toggle:focus-visible {
  opacity: 0.82;
}

.aoyea-component-cookie-banner-modal .aoyea-cookie-banner-item-toggle img,
.aoyea-component-cookie-banner-modal .aoyea-cookie-banner-item-lock img {
  display: block;
  width: 23px;
  height: 23px;
}

/* 勾选图标双态：勾选态为白底深色对勾，未勾选态为 1px 描边空框（Figma icon-check-on / icon-check-off）。 */
.aoyea-component-cookie-banner-modal .aoyea-cookie-banner-item-toggle .aoyea-cookie-banner-toggle-icon--on {
  display: none;
}

.aoyea-component-cookie-banner-modal .aoyea-cookie-banner-item-toggle[aria-checked="true"] .aoyea-cookie-banner-toggle-icon--on {
  display: block;
}

.aoyea-component-cookie-banner-modal .aoyea-cookie-banner-item-toggle[aria-checked="true"] .aoyea-cookie-banner-toggle-icon--off {
  display: none;
}

.aoyea-component-cookie-banner-modal .aoyea-cookie-banner-item-lock {
  display: block;
  width: 23px;
  height: 23px;
  flex: 0 0 auto;
}

.aoyea-component-cookie-banner-modal .aoyea-cookie-banner-item-accordion {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 12px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.aoyea-component-cookie-banner-modal .aoyea-cookie-banner-item-name {
  color: #fff;
  font-family: var(--aoyea-font-ui);
  font-size: 14px;
  font-weight: 600;
  line-height: normal;
}

.aoyea-component-cookie-banner-modal .aoyea-cookie-banner-item-chevron {
  display: block;
  width: 21.11px;
  height: 20px;
  flex: 0 0 auto;
  margin-right: 5px;
  margin-left: auto;
  transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms ease;
}

.aoyea-component-cookie-banner-modal .aoyea-cookie-banner-item-accordion:hover .aoyea-cookie-banner-item-chevron,
.aoyea-component-cookie-banner-modal .aoyea-cookie-banner-item-accordion:focus-visible .aoyea-cookie-banner-item-chevron {
  opacity: 0.72;
}

/* 展开：每个条目独立控制，允许多项同时展开；图标由向下翻转成向上。 */
.aoyea-component-cookie-banner-modal .aoyea-cookie-banner-item--open .aoyea-cookie-banner-item-chevron {
  transform: rotate(180deg);
}

.aoyea-component-cookie-banner-modal .aoyea-cookie-banner-item-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 320ms cubic-bezier(0.4, 0, 0.2, 1);
}

.aoyea-component-cookie-banner-modal .aoyea-cookie-banner-item--open .aoyea-cookie-banner-item-panel {
  grid-template-rows: 1fr;
}

.aoyea-component-cookie-banner-modal .aoyea-cookie-banner-item-panel-inner {
  overflow: hidden;
}

.aoyea-component-cookie-banner-modal .aoyea-cookie-banner-item-text {
  margin: 8px 0 0 35px;
  color: #fff;
  font-family: var(--aoyea-font-copy);
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}

.aoyea-component-cookie-banner-modal .aoyea-cookie-banner-item-example {
  width: fit-content;
  max-width: 559px;
  margin: 14px 0 0 35px;
  padding: 12px;
  border-radius: 8px;
  background: #424242;
}

.aoyea-component-cookie-banner-modal .aoyea-cookie-banner-item-example p {
  margin: 0;
  color: #fff;
  font-family: var(--aoyea-font-copy);
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}

.aoyea-component-cookie-banner-modal .aoyea-cookie-banner-dialog-actions {
  display: flex;
  flex: 0 0 auto;
  min-height: 111px;
  align-items: center;
  justify-content: center;
  padding: 31px 53px;
  border-top: 1px solid rgb(106 237 94 / 18%);
  box-shadow: 0 -2px 4px rgb(92 92 92 / 15%);
}

/* Figma 中弹窗底部只有一枚居中主按钮（Save Cookie Settings，460 × 50，圆角 12）。 */
.aoyea-component-cookie-banner-modal .aoyea-cookie-banner-save {
  display: inline-flex;
  width: min(460px, 100%);
  height: 50px;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  border: 0;
  border-radius: 12px;
  background: var(--aoyea-color-brand);
  color: #e9ecf2;
  font-family: var(--aoyea-font-ui);
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  cursor: pointer;
  transition: background-color 220ms ease;
}

.aoyea-component-cookie-banner-modal .aoyea-cookie-banner-save:hover,
.aoyea-component-cookie-banner-modal .aoyea-cookie-banner-save:focus-visible {
  background: var(--aoyea-color-brand-strong);
}

@media (max-width: 1100px) {
  .aoyea-component-cookie-banner .aoyea-cookie-banner-inner {
    gap: 40px;
    padding: 32px 0;
  }

  .aoyea-component-cookie-banner .aoyea-cookie-banner-actions {
    width: 190px;
  }
}

@media (max-width: 900px) {
  .aoyea-component-cookie-banner .aoyea-cookie-banner-inner {
    width: calc(100% - 40px);
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    padding: 24px 0 26px;
  }

  .aoyea-component-cookie-banner .aoyea-cookie-banner-logo {
    width: 76px;
    height: 36px;
  }

  .aoyea-component-cookie-banner .aoyea-cookie-banner-content {
    max-width: none;
  }

  .aoyea-component-cookie-banner .aoyea-cookie-banner-text,
  .aoyea-component-cookie-banner .aoyea-cookie-banner-title {
    font-size: 15px;
    line-height: 23px;
  }

  .aoyea-component-cookie-banner .aoyea-cookie-banner-actions {
    width: 100%;
  }
}

@media (max-width: 600px) {
  /* H5：压缩留白并把两枚按钮并排，避免授权条占据过多首屏高度。 */
  .aoyea-component-cookie-banner .aoyea-cookie-banner-inner {
    gap: 14px;
    padding: 20px 0 22px;
  }

  .aoyea-component-cookie-banner .aoyea-cookie-banner-logo {
    width: 64px;
    height: 30px;
  }

  .aoyea-component-cookie-banner .aoyea-cookie-banner-title {
    margin-bottom: 6px;
    font-size: 15px;
    line-height: 21px;
  }

  .aoyea-component-cookie-banner .aoyea-cookie-banner-text {
    font-size: 14px;
    line-height: 21px;
  }

  .aoyea-component-cookie-banner .aoyea-cookie-banner-actions {
    flex-direction: row;
    gap: 10px;
  }

  .aoyea-component-cookie-banner .aoyea-cookie-banner-button {
    height: 44px;
    flex: 1 1 0;
    padding: 0 12px;
    font-size: 15px;
  }

  .aoyea-component-cookie-banner-modal {
    width: calc(100vw - 24px);
    max-height: calc(100vh - 32px);
    border-radius: 16px;
  }

  .aoyea-component-cookie-banner-modal .aoyea-cookie-banner-dialog-body {
    padding: 34px 20px 32px;
  }

  .aoyea-component-cookie-banner-modal .aoyea-cookie-banner-dialog-title {
    font-size: 20px;
  }

  .aoyea-component-cookie-banner-modal .aoyea-cookie-banner-dialog-close {
    top: 12px;
    right: 12px;
    width: 30px;
    height: 30px;
  }

  .aoyea-component-cookie-banner-modal .aoyea-cookie-banner-dialog-close img {
    width: 30px;
    height: 30px;
  }

  .aoyea-component-cookie-banner-modal .aoyea-cookie-banner-items {
    margin-top: 32px;
  }

  .aoyea-component-cookie-banner-modal .aoyea-cookie-banner-item-text,
  .aoyea-component-cookie-banner-modal .aoyea-cookie-banner-item-example {
    margin-left: 0;
  }

  .aoyea-component-cookie-banner-modal .aoyea-cookie-banner-dialog-actions {
    min-height: 0;
    padding: 20px;
  }

  .aoyea-component-cookie-banner-modal .aoyea-cookie-banner-save {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aoyea-component-cookie-banner,
  .aoyea-component-cookie-banner-modal,
  .aoyea-component-cookie-banner-modal::backdrop,
  .aoyea-component-cookie-banner-modal .aoyea-cookie-banner-item-panel,
  .aoyea-component-cookie-banner-modal .aoyea-cookie-banner-item-chevron {
    transition: none;
  }
}
