/* ============================================
   组件：广告投放下单页 /ad-pay
   依赖：themes/*.css 提供的变量
   ============================================ */

/* ---------- 页头 ---------- */
.pay-head {
    margin-bottom: 1.5rem;
    text-align: center;
}

.pay-head__title {
    font-size: var(--app-page-title-size);   /* 全站页头统一尺寸 */
    font-weight: 800;
    letter-spacing: -.01em;
    margin: 0 0 .25rem;
    color: var(--app-text);
}

/* 标题下方装饰条（纯色，无渐变） */
.pay-head__title::after {
    content: "";
    display: block;
    width: 52px;
    height: 4px;
    margin: .7rem auto 0;
    border-radius: 999px;
    background: var(--app-accent);
}

.pay-head__desc {
    font-size: .88rem;
    color: var(--app-text-muted);
    max-width: 640px;
    margin: 0 auto;
}

/* ---------- 布局 ---------- */
/* 内容宽度与「提交友链 / 申请收录」页保持一致：880px 居中 */
.pay-head,
.pay-layout,
.pay-result {
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
}

.pay-layout {
    display: grid;
    gap: 1rem;
}

.pay-main {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

/* ---------- 卡片 ---------- */
.pay-card {
    padding: 1.1rem 1.1rem 1.25rem;
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: 16px;
    box-shadow: var(--app-shadow);
}

.pay-card__title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 1rem;
    color: var(--app-text);
}

.pay-card__no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 8px;
    background: var(--app-accent);
    color: var(--app-accent-contrast, #fff);
    font-size: .78rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* 广告位简要信息 */
.slot-brief {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1rem;
    margin-top: .75rem;
    padding: .7rem .85rem;
    border-radius: 10px;
    background: var(--app-surface-alt);
    font-size: .8rem;
    color: var(--app-text-muted);
}

.slot-brief strong {
    color: var(--app-text);
}

/* ---------- 投放时长 ---------- */
.plan-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .6rem;
}

.plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    padding: .85rem .4rem;
    border: 1.5px solid var(--app-border);
    border-radius: 12px;
    background: var(--app-surface);
    cursor: pointer;
    transition: border-color .18s ease, background-color .18s ease;
}

.plan-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.plan-card__name {
    font-size: .8rem;
    font-weight: 600;
    color: var(--app-text);
}

.plan-card__price {
    display: inline-flex;
    align-items: baseline;
    gap: .1rem;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--app-accent);
    white-space: nowrap;
}

.plan-card__unit {
    font-size: .7rem;
    font-weight: 600;
    color: var(--app-text-muted);
    white-space: nowrap;
}

.plan-card.is-active {
    border-color: var(--app-accent);
    background: var(--app-accent-soft);
}

/* ---------- 表单 ---------- */
.form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: .85rem;
}

.form-field {
    min-width: 0;
}

.form-field label {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    color: var(--app-text);
    margin-bottom: .3rem;
}

.form-field label em {
    color: #e5484d;
    font-style: normal;
}

.form-hint {
    margin-top: .3rem;
    font-size: .72rem;
    color: var(--app-text-muted);
}

/* 网站描述：加高输入框 */
#site-desc {
    height: 3.2rem;
}

/* ---------- 表单控件：统一 form-control / form-select 样式 ----------
   说明：项目使用 Bootstrap 5.1.3，不支持 data-bs-theme 深色主题，
        这里统一走 --app-* 变量，保证明暗两种主题下外观一致
   ------------------------------------------------------------------- */
.pay-card .form-control,
.pay-card .form-select {
    border-radius: 9px;
    border-color: var(--app-border);
    background-color: var(--app-surface);
    color: var(--app-text);
    font-size: .9rem;
    padding: .5rem .7rem;
}

.pay-card .form-control:focus,
.pay-card .form-select:focus {
    border-color: var(--app-accent);
    box-shadow: 0 0 0 3px var(--app-accent-soft);
    background-color: var(--app-surface);
    color: var(--app-text);
}

.pay-card .form-control::placeholder {
    color: var(--app-text-muted);
    opacity: .85;
}

/* 深色主题下替换下拉箭头为浅色，避免看不清 */
[data-bs-theme="dark"] .pay-card .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239aa0a6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

/* ---------- 自动获取网站信息按钮 ----------
   外观与输入框一致，颜色全部走主题变量（明暗 / 多主题自适应）
   -------------------------------------------- */
.btn-fetch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    padding: .5rem .8rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--app-text);
    background-color: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: 9px;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.btn-fetch:hover {
    color: var(--app-accent);
    background-color: var(--app-surface-alt);
    border-color: var(--app-accent);
}

.btn-fetch:focus,
.btn-fetch:focus-visible {
    outline: none;
    color: var(--app-text);
    background-color: var(--app-surface);
    border-color: var(--app-accent);
    box-shadow: 0 0 0 3px var(--app-accent-soft);
}

.btn-fetch:disabled {
    opacity: .72;
    cursor: default;
}

/* 网址输入框 + 自动获取按钮：输入框样式与其它输入框完全一致，按钮并排显示 */
.url-field {
    display: flex;
    align-items: stretch;
    gap: .5rem;
}

.url-field .form-control {
    flex: 1;
    min-width: 0;
}

/* 浏览器自动填充（autofill）会强制覆盖为固定白色背景，
   这里用内阴影还原为主题底色，保证与其它输入框一致 */
.pay-card .form-control:-webkit-autofill,
.pay-card .form-control:-webkit-autofill:hover,
.pay-card .form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--app-text);
    caret-color: var(--app-text);
    -webkit-box-shadow: 0 0 0 1000px var(--app-surface) inset;
    box-shadow: 0 0 0 1000px var(--app-surface) inset;
    transition: background-color 600000s 0s;
}

.pay-card .input-group > .btn-fetch {
    margin-left: -1px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* ---------- 支付方式 ---------- */
/* 两个按钮等宽 + 整体居中，与提交友链 / 申请收录页保持一致 */
.pay-methods {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
    max-width: 360px;
    margin: 0 auto;
}

.pay-method {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .8rem;
    border: 1.5px solid var(--app-border);
    border-radius: 12px;
    cursor: pointer;
    font-size: .88rem;
    font-weight: 600;
    color: var(--app-text);
    transition: border-color .18s ease, background-color .18s ease;
}

.pay-method input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.pay-method i {
    font-size: 1.1rem;
}

.pay-method.is-active {
    border-color: var(--app-accent);
    background: var(--app-accent-soft);
}

/* ---------- 订单摘要 ---------- */
.pay-summary {
    padding: 1.1rem;
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: 16px;
    box-shadow: var(--app-shadow);
}

.pay-summary__title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 .85rem;
    color: var(--app-text);
}

.pay-summary__list {
    margin: 0 0 .85rem;
    padding: 0;
}

.pay-summary__row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .45rem 0;
    font-size: .84rem;
    border-bottom: 1px dashed var(--app-border);
}

.pay-summary__row dt {
    color: var(--app-text-muted);
    font-weight: 400;
    margin: 0;
}

.pay-summary__row dd {
    margin: 0;
    color: var(--app-text);
    font-weight: 600;
    text-align: right;
}

.pay-summary__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: .35rem 0 1rem;
    font-size: .88rem;
    color: var(--app-text-muted);
}

.pay-summary__total strong {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--app-accent);
}

.pay-summary__tip {
    margin: .7rem 0 0;
    font-size: .72rem;
    color: var(--app-text-muted);
    line-height: 1.5;
    text-align: center;
}

/* ---------- 提交结果 ---------- */
.pay-result {
    margin-top: 1rem;
}

.pay-success {
    max-width: 560px;
    margin: 1rem auto 2rem;
    padding: 2rem 1.5rem;
    text-align: center;
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: 18px;
    box-shadow: var(--app-shadow);
}

.pay-success > .bi {
    font-size: 3rem;
    color: #16a34a;
}

.pay-success h2 {
    font-size: 1.25rem;
    font-weight: 800;
    margin: .75rem 0 .35rem;
    color: var(--app-text);
}

.pay-success__order {
    font-size: .85rem;
    color: var(--app-text-muted);
    margin: 0 0 1rem;
}

.pay-success__order strong {
    color: var(--app-text);
    letter-spacing: .02em;
}

.pay-success__list {
    text-align: left;
    margin: 0 auto 1.25rem;
    max-width: 380px;
}

.pay-success__actions {
    display: flex;
    justify-content: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.pay-success__tip {
    margin: 1rem 0 0;
    font-size: .76rem;
    color: var(--app-text-muted);
    line-height: 1.6;
}

/* ---------- 响应式 ---------- */
@media (min-width: 576px) {
    .form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .form-field--full {
        grid-column: 1 / -1;
    }
}

@media (min-width: 992px) {
    .pay-card {
        padding: 1.25rem 1.35rem 1.4rem;
    }
}

/* ============================================
   按钮美化与细节优化
   说明：统一为「圆角 + 主题色光泽 + 悬浮上浮」，
        颜色全部走变量，兼容明暗 / 多套主题
   ============================================ */

/* 按钮统一 */
.pay-card .btn,
.pay-summary .btn,
.pay-success .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    border-radius: 12px;
    font-weight: 600;
    border-width: 1px;
    transition: transform .18s ease, box-shadow .18s ease,
                background-color .18s ease, border-color .18s ease,
                color .18s ease, filter .18s ease;
}

/* 主按钮：主题色 + 顶部高光 + 彩色投影 */
.pay-card .btn-primary,
.pay-summary .btn-primary,
.pay-success .btn-primary {
    background-color: var(--app-accent);
    background-image: linear-gradient(135deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, 0) 55%);
    border-color: var(--app-accent);
    color: var(--app-accent-contrast, #fff);
    box-shadow: 0 8px 18px -8px var(--app-accent);
}

.pay-card .btn-primary:hover,
.pay-summary .btn-primary:hover,
.pay-success .btn-primary:hover {
    color: var(--app-accent-contrast, #fff);
    border-color: var(--app-accent);
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -8px var(--app-accent);
    filter: brightness(1.05);
}

.pay-card .btn-primary:active,
.pay-summary .btn-primary:active,
.pay-success .btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 6px 14px -8px var(--app-accent);
    filter: none;
}

/* 次级按钮 */
.pay-success .btn-outline-secondary {
    background: var(--app-surface);
    border-color: var(--app-border);
    color: var(--app-text);
}

.pay-success .btn-outline-secondary:hover {
    background: var(--app-accent-soft);
    border-color: var(--app-accent);
    color: var(--app-accent);
    transform: translateY(-2px);
}

/* 提交按钮尺寸与图标动效 */
.pay-summary .btn {
    padding: .72rem 1.2rem;
    font-size: .95rem;
}

.pay-summary .btn i,
.pay-success .btn i {
    transition: transform .18s ease;
}

.pay-summary .btn:hover i,
.pay-success .btn:hover i {
    transform: translateX(1px) scale(1.06);
}

/* 序号徽章投影 */
.pay-card__no {
    box-shadow: 0 4px 10px -6px var(--app-accent);
}

/* 广告位简介：描边更清晰 */
.slot-brief {
    border: 1px dashed var(--app-border);
}

/* 投放时长卡片交互 */
.plan-card:hover {
    border-color: var(--app-accent);
}

.plan-card.is-active {
    box-shadow: 0 6px 16px -10px var(--app-accent);
}

/* 支付方式交互 */
.pay-method:hover {
    border-color: var(--app-accent);
}

.pay-method.is-active {
    box-shadow: 0 6px 16px -10px var(--app-accent);
}

/* 订单摘要：作为结算卡片突出显示 */
.pay-summary {
    border-color: var(--app-accent);
    background-image: linear-gradient(180deg, var(--app-accent-soft), transparent 46%);
}

.pay-summary__list {
    margin-bottom: 1rem;
}