/*!
 * Cookie 提示条（内核组件 · 1.24.0）
 *
 * 三条设计约束，都不是随手写的：
 *
 * ① **不引用主题的设计变量**。这是内核部件，要同时装在结构完全不同的多套主题上
 *    （默认主题的 tokens.css 与客户主题的变量名毫无关系）。引用 `var(--navy)`
 *    这类变量等于「主题换一个名字就整条消失」—— 颜色没了但布局还在，
 *    肉眼看到的只是「一块莫名其妙的白条」，最难排查的那种。
 *    所以这里的颜色全部自带，前缀 --cb- 避免与主题变量撞名。
 *
 * ② **颜色只有一处定义**（下面的 :root 之外的 .cookie-bar 上），
 *    主题若想换色，在主题的 assets/common/cookie.css 里覆盖同名变量即可 ——
 *    Tpl::assetUrl() 优先取主题目录下的同名文件（见 core/Tpl.php::assetUrl）。
 *
 * ③ **方向无关**。布局全靠 flex（justify-content 与 dir 自动配合），
 *    内边距用逻辑属性，文字方向继承 <html dir>。阿拉伯语站直接可用，
 *    不需要任何 rtl.css。
 */

.cookie-bar {
    /* 自带的配色（深底 + 高对比），不依赖主题 */
    --cb-bg: #16202c;
    --cb-fg: #eaf1f8;
    --cb-link: #8dc4ff;
    --cb-accent: #3b82d6;
    --cb-accent-hover: #4a91e4;

    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* 1100：在页头(60)之上、询价车抽屉(1200)之下 ——
       用户主动打开的弹层应该盖住这条提示，而不是被它压住。 */
    z-index: 1100;

    background: var(--cb-bg);
    color: var(--cb-fg);
    font: 400 14px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
          "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    -webkit-text-size-adjust: 100%;

    padding-block: 14px;
    padding-inline: 20px;
    /* 全面屏底部横条（iOS Home Indicator）—— 不避让的话按钮会压在手势区上，点不准 */
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));

    box-shadow: 0 -6px 24px rgba(8, 16, 26, .28);

    /* 初始在视口外，JS 判定「未同意」后加 .in 滑上来 */
    transform: translateY(100%);
    transition: transform .28s cubic-bezier(.2, .7, .3, 1);
}

/* 🔴 这一行是必须的，不是保险：
   本文件下面给 .cookie-bar 设了 display，而 [hidden] 的隐藏效果来自浏览器默认样式表
   （优先级最低）。少了这行，`hidden` 属性会被本文件的 display 覆盖 ——
   结果是「一进页面就糊在底部」，无 JS 环境下按钮点不动、也关不掉。
   加 !important 是为了压过任何主题里更具体的选择器。 */
.cookie-bar[hidden] { display: none !important; }

/* JS 确认「未同意」后加上，滑入到位 */
.cookie-bar.in { transform: translateY(0); }

.cookie-bar-in {
    max-width: 1200px;
    margin-inline: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
}

.cookie-bar-txt {
    margin: 0;
    flex: 1 1 340px;   /* 正文占满剩余宽度；窄屏换行时按钮自然落到下一行 */
}

.cookie-bar-more {
    color: var(--cb-link);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.cookie-bar-more:hover { color: #b9dbff; }

.cookie-bar-ok {
    flex: 0 0 auto;
    min-height: 44px;          /* 触摸目标下限：低于这个值手机上点不准 */
    padding-block: 10px;
    padding-inline: 26px;
    border: 0;
    border-radius: 999px;
    background: var(--cb-accent);
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .18s ease;
}
.cookie-bar-ok:hover { background: var(--cb-accent-hover); }

/* 焦点指示：键盘用户必须看得见焦点在哪。
   :focus-visible 只在键盘导航时出现，鼠标点击不会留下难看的描边。 */
.cookie-bar-more:focus-visible,
.cookie-bar-ok:focus-visible {
    outline: 2px solid var(--cb-link);
    outline-offset: 2px;
}

/* 系统深色模式：面板再压暗一档并补一条上边线，
   否则在深色页面上这条会「融进背景」，看不出是个可操作的浮层。 */
@media (prefers-color-scheme: dark) {
    .cookie-bar {
        --cb-bg: #0e1620;
        border-top: 1px solid rgba(255, 255, 255, .10);
    }
}

/* 降低动效（前庭功能敏感 / 系统省电模式）：不要滑入动画 */
@media (prefers-reduced-motion: reduce) {
    .cookie-bar { transition: none; }
}

/* 窄屏：按钮独占一行并撑满，避免与正文挤成两列后变得很小 */
@media (max-width: 560px) {
    .cookie-bar { padding-inline: 16px; }
    .cookie-bar-in { gap: 10px; }
    .cookie-bar-ok { width: 100%; }
}

/* 打印时不要出现 */
@media print {
    .cookie-bar { display: none !important; }
}