/**
 * 提交收录 / 友链申请：高级感表单卡片。
 *
 * 外层 .wpnav-formpage 负责整体居中 + 上下留白，卡片本身用主题已有的
 * 玻璃拟态 token（--wpnav-glass-*，跟按钮、悬浮条这些组件是同一套语言），
 * 不是另起一套新配色——保持跟站点整体视觉统一，只是把"表单"这个原本
 * 很朴素的容器，提升到跟其它玻璃卡片一个质感。
 */

/* 页面标题（StaticPage.jsx 输出的 h1，内容是 WordPress 页面标题）和正文
   容器默认是靠左的、且正文容器有 720px 宽度上限。表单型页面希望整体居中，
   这里靠 PHP 打在 body 上的 wpnav-body-formpage 标记来限定范围
   （见 inc/submit-site.php 的 wpnav_add_formpage_body_class()），
   不会影响站内其它普通页面/文章的排版。 */
.wpnav-body-formpage .wpnav-static-page h1 { text-align: center; }
.wpnav-body-formpage .wpnav-single-content {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.wpnav-formpage {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 0 32px;
}
.wpnav-formpage-card {
    width: 100%;
    max-width: 560px;
    background: var(--wpnav-glass-bg, rgba(255,255,255,.06));
    border: 1px solid var(--wpnav-glass-border, rgba(255,255,255,.14));
    border-radius: var(--wpnav-radius-lg, 24px);
    backdrop-filter: var(--wpnav-glass-blur, blur(16px) saturate(180%));
    -webkit-backdrop-filter: var(--wpnav-glass-blur, blur(16px) saturate(180%));
    box-shadow: var(--wpnav-glass-highlight, inset 0 1px 0 rgba(255,255,255,.18)), 0 24px 48px -24px rgba(0,0,0,.4);
    padding: 32px 36px;
}
.wpnav-formpage-header {
    text-align: center;
    margin-bottom: 24px;
}
.wpnav-formpage-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--wpnav-surface, rgba(255,255,255,.06));
    border: 1px solid var(--wpnav-border, rgba(255,255,255,.1));
    color: var(--wpnav-accent-a, #7c5cff);
    margin-bottom: 12px;
}
.wpnav-formpage-tagline {
    font-size: 13px;
    color: var(--wpnav-text-dim, #9e9e9e);
    margin: 0;
    line-height: 1.6;
}
.wpnav-formpage-card form { margin: 0; }
.wpnav-formpage-card .wpnav-field:last-of-type { margin-bottom: 0; }

/* 昵称+邮箱两个较短的字段并排放一行，视觉上不再是单调地一路往下堆同样
   宽度的输入框——不宽屏时自动收回单列，不会挤得太窄。 */
.wpnav-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 14px;
}
@media (max-width: 480px) {
    .wpnav-field-row { grid-template-columns: 1fr; }
}

/**
 * "提交收录"页面表单下方的提交列表。
 */
.wpnav-submit-list {
    width: 100%;
    max-width: 560px;
    margin: 20px auto 0;
}
.wpnav-submit-list-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--wpnav-text-dim, #9e9e9e);
    margin: 0 0 14px;
    padding: 0 4px;
}
.wpnav-submit-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: var(--wpnav-surface, rgba(255,255,255,.04));
    border: 1px solid var(--wpnav-border, rgba(255,255,255,.08));
    border-radius: var(--wpnav-radius-md, 16px);
    margin-bottom: 10px;
}
.wpnav-submit-item-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: var(--wpnav-radius-sm, 10px);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--wpnav-bg-elevated, #12141f);
}
.wpnav-submit-item-icon img { width: 100%; height: 100%; object-fit: contain; }
.wpnav-submit-item-icon-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--wpnav-text-dim, #9e9e9e);
    background: var(--wpnav-surface-hover, rgba(255,255,255,.08));
}
.wpnav-submit-item-body { flex: 1; min-width: 0; }
.wpnav-submit-item-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* 这几行选择器特意都带上 .wpnav-submit-list / .wpnav-friend-wall 这层
   外层class（而不是只写 .wpnav-submit-item-title / .wpnav-resource-card-link）：
   这些短代码的HTML是塞进 App.css 里 .wpnav-single-content 这个"文章正文"
   容器渲染的，那边有一条全局规则 .wpnav-single-content a{text-decoration:
   underline; color:...}专门给正文里的普通链接加下划线，选择器优先级是
   0-1-1；如果这里只用单个 class（0-1-0）会因为优先级更低而被那条规则
   盖掉，标题/卡片链接就会意外带上下划线、颜色也会被换成正文链接色。
   带上外层 class 之后优先级变成 0-2-0，能稳定盖过它。 */
.wpnav-submit-list a.wpnav-submit-item-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--wpnav-text, #ebebeb);
    text-decoration: none;
}
.wpnav-submit-list a.wpnav-submit-item-title:hover { color: var(--wpnav-accent-a, #7c5cff); text-decoration: none; }
.wpnav-submit-item-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--wpnav-text, #ebebeb);
}
.wpnav-submit-item-cat {
    font-size: 11.5px;
    padding: 2px 9px;
    border-radius: var(--wpnav-radius-pill, 999px);
    background: var(--wpnav-surface-hover, rgba(255,255,255,.08));
    color: var(--wpnav-text-faint, #6e6e6e);
}
.wpnav-submit-item-desc {
    display: block;
    font-size: 12.5px;
    color: var(--wpnav-text-dim, #9e9e9e);
    margin-top: 4px;
}

/* 友链墙（[wpnav_friend_links_wall]）：卡片本身直接复用全局的
   wpnav-section-grid / wpnav-resource-card 样式，这里只需要处理跟上面
   同样的 .wpnav-single-content a 优先级覆盖问题（见上面那段说明）。 */
.wpnav-friend-wall { padding: 8px 0 24px; }
.wpnav-friend-wall .wpnav-resource-card-link,
.wpnav-friend-wall .wpnav-resource-card-link:hover {
    text-decoration: none;
}
.wpnav-friend-wall .wpnav-resource-title { text-decoration: none; }
.wpnav-friend-wall .wpnav-resource-desc { text-decoration: none; }

/* ========================================================================
 * 右下角toast提示（提交成功/失败）。
 * ======================================================================== */
.wpnav-toast {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: min(360px, calc(100vw - 40px));
    padding: 14px 16px;
    border-radius: var(--wpnav-radius-md, 16px);
    background: var(--wpnav-bg-elevated, #12141f);
    border: 1px solid var(--wpnav-border, rgba(255,255,255,.1));
    box-shadow: 0 20px 40px -12px rgba(0,0,0,.45);
    color: var(--wpnav-text, #ebebeb);
    font-size: 13.5px;
    line-height: 1.5;
    opacity: 0;
    transform: translateY(14px) scale(.98);
    transition: opacity .28s ease, transform .28s ease;
    pointer-events: none;
}
.wpnav-toast.is-visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.wpnav-toast.is-leaving { opacity: 0; transform: translateY(8px) scale(.98); }
.wpnav-toast-icon {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wpnav-toast--success .wpnav-toast-icon { background: rgba(34,197,94,.16); color: #4ade80; }
.wpnav-toast--success { border-color: rgba(34,197,94,.3); }
.wpnav-toast--error .wpnav-toast-icon { background: rgba(239,68,68,.16); color: #f87171; }
.wpnav-toast--error { border-color: rgba(239,68,68,.3); }
.wpnav-toast-text { flex: 1; min-width: 0; }
.wpnav-toast-close {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--wpnav-text-faint, #6e6e6e);
    cursor: pointer;
    transition: background var(--wpnav-dur-fast, .16s) ease, color var(--wpnav-dur-fast, .16s) ease;
}
.wpnav-toast-close:hover { background: var(--wpnav-surface-hover, rgba(255,255,255,.08)); color: var(--wpnav-text, #ebebeb); }
@media (max-width: 480px) {
    .wpnav-toast { left: 16px; right: 16px; max-width: none; }
}