/* ============================================================
   ads.css — 广告位容器样式
   编码：UTF-8，换行：LF
   ============================================================ */

/* ── 通用广告容器 ────────────────────────────────────────── */

.ad-slot {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 0;
  box-sizing: border-box;
  min-height: 0;
  overflow: hidden;
  transition: min-height 180ms ease, padding 180ms ease;
}

/* 空容器不占空间（GPT collapseEmptyDivs 折叠后触发） */
.ad-slot:empty {
  padding: 0;
}

/* 默认只有广告真正开始加载/已填充时才撑开高度；tran_ls_tab 可通过 reserveSpace 提前占位。 */
.ad-slot[data-ad-state="loading"],
.ad-slot[data-ad-state="filled"] {
  padding: 5px 0;
}

.ad-slot[data-ad-state="closed"] {
  display: none;
  min-height: 0;
  padding: 0;
}

.ad-slot[data-ad-closeable="true"] {
  overflow: visible;
}

.ad-slot[data-ad-closeable="true"][data-ad-state="filled"] {
  padding-top: 34px;
}

.ad-slot[data-ad-format="mpu"][data-ad-state="loading"],
.ad-slot[data-ad-format="mpu"][data-ad-state="filled"] {
  min-height: 260px;
}

.ad-slot[data-ad-reserve-space="true"][data-ad-state="idle"],
.ad-slot[data-ad-reserve-space="true"][data-ad-state="loading"] {
  padding: 5px 0;
}

.ad-slot[data-ad-reserve-space="true"][data-ad-closeable="true"][data-ad-state="idle"],
.ad-slot[data-ad-reserve-space="true"][data-ad-closeable="true"][data-ad-state="loading"] {
  padding-top: 34px;
}

.ad-slot[data-ad-reserve-space="true"][data-ad-format="mpu"][data-ad-state="idle"],
.ad-slot[data-ad-reserve-space="true"][data-ad-format="mpu"][data-ad-state="loading"] {
  min-height: 289px;
}

.ad-slot__box {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background: transparent;
  min-height: 0;
}

/* 300×250 MPU（内容广告默认尺寸） */
/* min-height 不在此处设置，由外层 wrapper 的 loading/filled 状态控制，
   避免广告未加载时（idle 状态）在页面中产生空白占位。 */
.ad-slot__box--mpu {
  width: min(320px, 100%);
  min-height: 0;
}

/* 顶部首屏广告（home/horoscope）：320×100 / 320×150 多尺寸 */
[data-ad-slot="home-mpu-1"] .ad-slot__box--mpu,
[data-ad-slot="horoscope-top"] .ad-slot__box--mpu,
[data-ad-slot="article-top"] .ad-slot__box--mpu,
[data-ad-slot="user-reading-top"] .ad-slot__box--mpu,
[data-ad-slot="horoscope-detail-top"] .ad-slot__box--mpu,
[data-ad-slot="article-detail-top"] .ad-slot__box--mpu,
[data-ad-slot="moon-center-top"] .ad-slot__box--mpu {
  width: 320px;
  min-height: 0;
}

/* 顶部横幅：仅在真正加载/填充时才撑开内层 box 高度 */
.ad-slot[data-ad-slot="home-mpu-1"][data-ad-state="loading"] .ad-slot__box--mpu,
.ad-slot[data-ad-slot="horoscope-top"][data-ad-state="loading"] .ad-slot__box--mpu,
.ad-slot[data-ad-slot="article-top"][data-ad-state="loading"] .ad-slot__box--mpu,
.ad-slot[data-ad-slot="user-reading-top"][data-ad-state="loading"] .ad-slot__box--mpu,
.ad-slot[data-ad-slot="horoscope-detail-top"][data-ad-state="loading"] .ad-slot__box--mpu,
.ad-slot[data-ad-slot="article-detail-top"][data-ad-state="loading"] .ad-slot__box--mpu,
.ad-slot[data-ad-slot="moon-center-top"][data-ad-state="loading"] .ad-slot__box--mpu,
.ad-slot[data-ad-slot="home-mpu-1"][data-ad-state="filled"] .ad-slot__box--mpu,
.ad-slot[data-ad-slot="horoscope-top"][data-ad-state="filled"] .ad-slot__box--mpu,
.ad-slot[data-ad-slot="article-top"][data-ad-state="filled"] .ad-slot__box--mpu,
.ad-slot[data-ad-slot="user-reading-top"][data-ad-state="filled"] .ad-slot__box--mpu,
.ad-slot[data-ad-slot="horoscope-detail-top"][data-ad-state="filled"] .ad-slot__box--mpu,
.ad-slot[data-ad-slot="article-detail-top"][data-ad-state="filled"] .ad-slot__box--mpu,
.ad-slot[data-ad-slot="moon-center-top"][data-ad-state="filled"] .ad-slot__box--mpu {
  min-height: 100px;
}

/* 覆盖通用 mpu 的 266px 占位，需与通用规则同级（.ad-slot + 2 属性选择器）确保生效 */
.ad-slot[data-ad-slot="home-mpu-1"][data-ad-state="loading"],
.ad-slot[data-ad-slot="home-mpu-1"][data-ad-state="filled"],
.ad-slot[data-ad-slot="horoscope-top"][data-ad-state="loading"],
.ad-slot[data-ad-slot="horoscope-top"][data-ad-state="filled"],
.ad-slot[data-ad-slot="article-top"][data-ad-state="loading"],
.ad-slot[data-ad-slot="article-top"][data-ad-state="filled"],
.ad-slot[data-ad-slot="user-reading-top"][data-ad-state="loading"],
.ad-slot[data-ad-slot="user-reading-top"][data-ad-state="filled"],
.ad-slot[data-ad-slot="horoscope-detail-top"][data-ad-state="loading"],
.ad-slot[data-ad-slot="horoscope-detail-top"][data-ad-state="filled"],
.ad-slot[data-ad-slot="article-detail-top"][data-ad-state="loading"],
.ad-slot[data-ad-slot="article-detail-top"][data-ad-state="filled"],
.ad-slot[data-ad-slot="moon-center-top"][data-ad-state="loading"],
.ad-slot[data-ad-slot="moon-center-top"][data-ad-state="filled"] {
  min-height: 110px; /* 100px + 5px padding × 2 */
}

.ad-slot[data-ad-reserve-space="true"][data-ad-state="idle"] .ad-slot__box--mpu,
.ad-slot[data-ad-reserve-space="true"][data-ad-state="loading"] .ad-slot__box--mpu {
  min-height: 250px;
}

/* 320×50 底部横幅 */
.ad-slot__box--floor {
  width: 320px;
  min-height: 50px;
}

/* 频道插屏广告：由广告服务动态创建，只有请求中/已填充时覆盖页面。 */
.ad-interstitial-wrap {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 24px 16px;
  background: rgba(16, 17, 22, 0.72);
}

.ad-interstitial-wrap[data-ad-state="loading"],
.ad-interstitial-wrap[data-ad-state="filled"] {
  display: flex;
}

.ad-interstitial-wrap[data-ad-state="empty"],
.ad-interstitial-wrap[data-ad-dismissed="true"] {
  display: none;
}

.ad-slot__box--interstitial {
  width: min(336px, 100%);
  min-height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #ffffff;
  border-radius: 8px;
}

.ad-interstitial-close {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  right: 12px;
  z-index: 1;
  border: 0;
  border-radius: 8px;
  padding: 8px 10px;
  color: #15161a;
  background: rgba(255, 255, 255, 0.92);
  font: inherit;
  line-height: 1;
}

/* tran_ls_tab 普通广告关闭条：filled 后才显示，并跟随实际 Google 创意宽度。 */
.ad-slot-close-shell {
  position: absolute;
  top: 5px;
  left: var(--ad-close-left, 50%);
  z-index: 2147483000;
  width: var(--ad-close-width, 300px);
  height: 29px;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transform: translateX(-50%);
  overflow: hidden;
  transition:
    opacity 180ms cubic-bezier(0.23, 1, 0.32, 1),
    visibility 0s linear 180ms;
}

.ad-slot[data-ad-closeable="true"][data-ad-state="filled"] > .ad-slot-close-shell {
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
  transition:
    opacity 180ms cubic-bezier(0.23, 1, 0.32, 1),
    visibility 0s linear 0s;
}

/* 侧边栏打开时会锁定页面并覆盖主内容；此时隐藏广告关闭条，避免高层级按钮压到抽屉内容上。 */
html.sidebar-open .ad-slot[data-ad-closeable="true"][data-ad-state="filled"] > .ad-slot-close-shell,
body.sidebar-open .ad-slot[data-ad-closeable="true"][data-ad-state="filled"] > .ad-slot-close-shell {
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition:
    opacity 120ms ease,
    visibility 0s linear 120ms;
}

.ad-slot-close-button {
  position: absolute;
  left: 0;
  bottom: 5px;
  z-index: 2;
  display: grid;
  width: 36px;
  height: 24px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 8px 8px 0 0;
  background:
    url("../assets/images/ads/ad-float-close.webp") center / 12px 12px no-repeat,
    #ffffff;
  box-shadow: 0 -1px 6px rgba(15, 23, 42, 0.1);
  cursor: pointer;
}

.ad-slot-close-rail {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  width: 100%;
  height: 5px;
  background: #ffffff;
  border-radius: 0 8px 0 0;
}

/* 首页前两个广告位按登录态切换挂载点。
 * home-mpu-1 在 DOM 中有两个 wrapper：
 * - guest-only：页面顶部
 * - auth-only：hero 与 fortune 之间
 * ad-service 会优先挂载到当前可见的那个 wrapper。
 */
.ad-slot--guest-only,
.ad-slot--auth-only {
  display: none;
}

html.zodiachub-guest-user .ad-slot--guest-only,
.state-empty-user .ad-slot--guest-only,
html.zodiachub-authenticated-user .ad-slot--auth-only,
.home-page:not(.state-empty-user) .ad-slot--auth-only {
  display: flex;
}

/* ── 底部悬浮广告 ─────────────────────────────────────────── */

/*
 * 目标结构：
 * 1. 广告脱离文档流，固定在屏幕最底部
 * 2. 底部导航整体被“顶”到广告上方
 * 3. 内容区域额外补底部留白，避免最后一屏被广告 + tab 挡住
 */
:root {
  --floor-ad-height: 50px;
  --floor-ad-gap: 4px;
  --tran-bottom-anchor-height: 0px;
  --tran-bottom-anchor-gap: 4px;
}

.ad-floor-wrap {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 890;
  display: none;
  justify-content: center;
  pointer-events: none; /* 容器不拦截点击，广告内容自行处理 */
  background: #15161a;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.ad-floor-wrap[data-ad-state="loading"],
.ad-floor-wrap[data-ad-state="filled"] {
  display: flex;
}

.ad-floor-wrap > div {
  pointer-events: auto;
}

/* 底部广告内容承载层跟随页面深色背景，避免底部出现突兀白块。 */
.ad-floor-wrap .ad-slot__box--floor {
  background: #15161a;
  width: 100%;
  border-radius: 0;
  box-shadow: none;
}

/* 白底页面单独覆盖底部悬浮广告背景，避免与页面底色割裂。 */
html[data-page-key="horoscope-detail"] .ad-floor-wrap,
html[data-page-key="user-reading"] .ad-floor-wrap,
html[data-page-key="horoscope-detail"] .ad-floor-wrap .ad-slot__box--floor,
html[data-page-key="user-reading"] .ad-floor-wrap .ad-slot__box--floor {
  background: #ffffff;
}

/* 当底部广告出现时，把底部导航整体顶到广告上方。 */
html.has-floor-ad .bottom-nav,
body.has-floor-ad .bottom-nav {
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--floor-ad-height) + var(--floor-ad-gap));
}

/* 页面内容额外补出“广告高度 + 间距”，避免最后一屏内容被固定元素遮住。 */
html.has-floor-ad .app-page,
body.has-floor-ad .app-page {
  padding-bottom: calc(var(--page-bottom-with-nav) + var(--floor-ad-height) + var(--floor-ad-gap));
}

/* tran_ls_tab 使用 GPT 托管 BOTTOM_ANCHOR；检测到真实 anchor 高度后，仅顶起该渠道的底部导航。 */
html.has-tran-bottom-anchor .bottom-nav,
body.has-tran-bottom-anchor .bottom-nav {
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--tran-bottom-anchor-height) + var(--tran-bottom-anchor-gap));
}

html.has-tran-bottom-anchor .app-page,
body.has-tran-bottom-anchor .app-page {
  padding-bottom: calc(var(--page-bottom-with-nav) + var(--tran-bottom-anchor-height) + var(--tran-bottom-anchor-gap));
}