/* ============================================================
 * 全站统一提示条 .fn-notice
 * ------------------------------------------------------------
 * 由 app/common.php 的 form_notice_html($type, $msg) 输出；
 * 提示文案统一在 app/common.php 的 notice_texts() 里修改。
 * 前台 JS 直接调用 window.FNNotice（/static/js/notice.js）。
 * 位置约定：表单底部（提交按钮之后）；成功态最显眼。
 * 引入位置：layout/base.html（前台全局）、admin/layout/base.html、
 *           admin/login/index.html（后台登录页）
 * ============================================================ */

/* ------------------------------------------------------------
 * 变量桥接层
 * 前台用 --color-* 色板（theme.css / variables.css），
 * 后台用另一套命名（admin.css：--text-1/--text-2/--bg-card-muted…）。
 * 这里统一取到 --fn-* 别名，保证同一个 .fn-notice 在两边都跟随主题，
 * 不写死任何具体颜色（末端字面量仅在前台后台都无变量时兜底）。
 * ------------------------------------------------------------ */
.fn-notice {
    --fn-surface:  var(--color-bg-card, var(--bg-card, #ffffff));
    --fn-soft:     var(--color-bg-page-soft, var(--bg-card-muted, #f4f6f9));
    --fn-border:   var(--color-border, var(--bs-border-color, #e6e9ef));
    --fn-text:     var(--color-text-secondary, var(--text-2, #5b6675));
    --fn-title:    var(--color-text-title, var(--text-1, #1f2937));
    --fn-danger:   var(--color-danger, #e0464f);
    --fn-success:  var(--color-success, #1f9d6b);
    --fn-accent:   var(--color-accent, #638cff);
}

.fn-notice {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 16px 0 0;
    padding: 11px 14px;
    border: 1px solid var(--fn-border);
    border-radius: 10px;
    background: var(--fn-soft);
    color: var(--fn-text);
    font-size: 13px;
    line-height: 1.6;
}
.fn-notice-icon { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 2px; }
.fn-notice-text { flex: 1; min-width: 0; word-break: break-word; }

/* 多条并排时收紧间距 */
.fn-notice + .fn-notice { margin-top: 8px; }

/* 提示条里的链接（如「返回套餐列表」） */
.fn-notice a {
    color: inherit;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ---------- error：校验 / 业务失败 ---------- */
.fn-notice--error {
    border-color: color-mix(in srgb, var(--fn-danger) 45%, transparent);
    background: color-mix(in srgb, var(--fn-danger) 10%, transparent);
    /* 文字往主题标题色混合，保证浅色/深色主题下都有足够对比度 */
    color: color-mix(in srgb, var(--fn-danger) 45%, var(--fn-title));
}

/* ---------- success：操作成功（最显眼） ---------- */
/* 字号更大 + 加粗 + 强调底纹 + 左侧色条 + 轻微投影 + 入场动画 */
.fn-notice--success {
    position: relative;
    padding: 13px 16px 13px 20px;
    font-size: 14px;
    font-weight: 500;
    border-color: color-mix(in srgb, var(--fn-success) 55%, transparent);
    background: color-mix(in srgb, var(--fn-success) 16%, transparent);
    /* 文字往主题标题色混合，保证浅色/深色主题下都有足够对比度 */
    color: color-mix(in srgb, var(--fn-success) 45%, var(--fn-title));
    box-shadow: 0 2px 10px color-mix(in srgb, var(--fn-success) 18%, transparent);
}
.fn-notice--success::before {
    content: "";
    position: absolute;
    left: 0; top: 8px; bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--fn-success);
}
.fn-notice--success .fn-notice-icon { width: 19px; height: 19px; }

/* ---------- info：中性说明 / 只读提示 ---------- */
.fn-notice--info {
    border-color: color-mix(in srgb, var(--fn-accent) 40%, transparent);
    background: color-mix(in srgb, var(--fn-accent) 10%, transparent);
    color: color-mix(in srgb, var(--fn-accent) 35%, var(--fn-title));
}

@keyframes fnNoticeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}
.fn-notice { animation: fnNoticeIn .24s ease-out both; }
@media (prefers-reduced-motion: reduce) {
    .fn-notice { animation: none; }
}

/* ============================================================
 * 悬浮提示（toast）—— 用于按钮触发的操作结果
 * 由 window.FNNotice.toast($type, $msg) 调用（/static/js/notice.js）
 * 替代原生 alert()：收藏 / 签到 / 清空消息 等一次性动作反馈
 * ============================================================ */
.fn-toast-wrap {
    position: fixed;
    top: 18px;
    left: 50%;
    z-index: 2147483000;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: max-content;
    max-width: min(92vw, 460px);
    pointer-events: none;
}
.fn-toast-wrap .fn-notice {
    margin: 0;
    width: auto;
    max-width: 100%;
    padding: 11px 16px;
    border-radius: 999px;
    background: var(--fn-surface);
    box-shadow: 0 8px 26px color-mix(in srgb, var(--fn-title) 22%, transparent);
    pointer-events: auto;
    cursor: pointer;
    animation: fnToastIn .26s cubic-bezier(.22, .8, .3, 1) both;
}
/* toast 是实底浮层，用主题色淡混自己的表面色，不透明可读 */
.fn-toast-wrap .fn-notice--error {
    background: color-mix(in srgb, var(--fn-danger) 14%, var(--fn-surface));
}
.fn-toast-wrap .fn-notice--success {
    padding: 11px 16px;
    font-size: 13.5px;
    background: color-mix(in srgb, var(--fn-success) 18%, var(--fn-surface));
    box-shadow: 0 8px 26px color-mix(in srgb, var(--fn-success) 26%, transparent);
}
.fn-toast-wrap .fn-notice--success::before { display: none; }
.fn-toast-wrap .fn-notice--info {
    background: color-mix(in srgb, var(--fn-accent) 14%, var(--fn-surface));
}
.fn-toast--out { animation: fnToastOut .2s ease-in both; }

@keyframes fnToastIn {
    from { opacity: 0; transform: translateY(-10px) scale(.97); }
    to   { opacity: 1; transform: none; }
}
@keyframes fnToastOut {
    from { opacity: 1; transform: none; }
    to   { opacity: 0; transform: translateY(-8px) scale(.98); }
}
@media (prefers-reduced-motion: reduce) {
    .fn-toast-wrap .fn-notice { animation: none; }
    .fn-toast--out { animation: none; opacity: 0; }
}