/* ===========================================================
 *  狗凯广告位 v3.7 · 单一规则重写版
 *  - 仅文字广告 · 3 位置 · 弹窗投放 · 到期自动下架
 *  - 文章内 + 首页/分类顶部
 * =========================================================== */

/* =========================
 *  1. 网格容器（PC 6 列 / 平板 3 列 / 手机 2 列）
 * ========================= */
.gk-ad-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (max-width: 960px) {
    .gk-ad-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
    .gk-ad-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}

/* =========================
 *  2. 通用卡片基础（纯文字链接）
 * ========================= */
.gk-ad-cell {
    box-sizing: border-box;
    border-radius: 6px;
    padding: 0 10px;
    margin: 0;
    text-decoration: none;
    overflow: hidden;
    display: flex;
    align-items: center;
    height: 30px;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 13px;
    line-height: 1;
    transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease, background-color .24s ease, color .24s ease;
    cursor: pointer;
    user-select: none;
}

/* =========================
 *  3. 已投放格子（白底浅灰边商务风）
 * ========================= */
.gk-ad-cell-filled {
    color: #555;
    background: #ffffff;
    border: 1px solid #e2e5eb;
    text-overflow: ellipsis;
}
.gk-ad-cell-filled .gk-ad-arrow {
    flex-shrink: 0;
    margin-right: 4px;
    color: #c8ccd4;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    transition: color .24s ease;
}
.gk-ad-cell-filled:hover {
    transform: translateY(-2px);
    border-color: #d2d6df;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.06);
    color: #e3493d;
}
.gk-ad-cell-filled:hover .gk-ad-arrow { color: #6a707a; }

/* =========================
 *  4. 空格子（虚线迷你框）
 * ========================= */
.gk-ad-cell-empty {
    justify-content: center;
    text-align: center;
    color: #868c96;
    background: #f6f7f9;
    border: 1px dashed #d8dbe2;
    font-size: 12px;
}
.gk-ad-cell-empty .gk-ad-plus {
    flex-shrink: 0;
    color: #c8ccd4;
    font-size: 13px;
    font-weight: 400;
    margin-right: 3px;
    line-height: 1;
    transition: color .24s ease;
}
.gk-ad-cell-empty:hover {
    border-color: #b0b4bc;
    background: #f9fafb;
    color: inherit;
}
.gk-ad-cell-empty:hover .gk-ad-plus { color: #6a707a; }

/* =========================
 *  4.5 每个格子独立上色（8 色循环 8n+1 ~ 8n+8）
 *  风格：清新的柔色系（粉/橙/黄/绿/青/蓝/紫/玫红）
 *  同一行的格子颜色各不相同，hover 时切换实色渐变
 *  - 已投放格子：白底 + 浅色边 + 浅色渐变 + 主题色文字
 *  - 空格子：虚线 + 浅色底 + 主题色文字
 *  - hover：实色渐变 + 白字 + 主题色阴影
 * ========================= */

/* 第 1 格 - 珊瑚红 */
.gk-ad-cell:nth-child(8n+1) {
    --accent: #ff6b6b; --accent-soft: #fff0ef; --accent-strong: #ee5253;
    --accent-shadow: rgba(255, 107, 107, 0.25);
}
.gk-ad-cell:nth-child(8n+2) {
    --accent: #ff922b; --accent-soft: #fff4e6; --accent-strong: #f76707;
    --accent-shadow: rgba(255, 146, 43, 0.25);
}
.gk-ad-cell:nth-child(8n+3) {
    --accent: #fcc419; --accent-soft: #fffbeb; --accent-strong: #f59f00;
    --accent-shadow: rgba(252, 196, 25, 0.25);
}
.gk-ad-cell:nth-child(8n+4) {
    --accent: #51cf66; --accent-soft: #f1fbf3; --accent-strong: #37b24d;
    --accent-shadow: rgba(81, 207, 102, 0.25);
}
.gk-ad-cell:nth-child(8n+5) {
    --accent: #22b8cf; --accent-soft: #eafafd; --accent-strong: #1098ad;
    --accent-shadow: rgba(34, 184, 207, 0.25);
}
.gk-ad-cell:nth-child(8n+6) {
    --accent: #4dabf7; --accent-soft: #eef6fd; --accent-strong: #228be6;
    --accent-shadow: rgba(77, 171, 247, 0.25);
}
.gk-ad-cell:nth-child(8n+7) {
    --accent: #9775fa; --accent-soft: #f4f0fe; --accent-strong: #7950f2;
    --accent-shadow: rgba(151, 117, 250, 0.25);
}
.gk-ad-cell:nth-child(8n+8) {
    --accent: #f06595; --accent-soft: #fdeef4; --accent-strong: #d6336c;
    --accent-shadow: rgba(240, 101, 149, 0.25);
}

/* 已投放格子：第 n 格的颜色 */
.gk-ad-cell:nth-child(8n+1).gk-ad-cell-filled { border-color: var(--accent-soft); background: linear-gradient(180deg, #fff 0%, var(--accent-soft) 100%); color: var(--accent-strong); }
.gk-ad-cell:nth-child(8n+2).gk-ad-cell-filled { border-color: var(--accent-soft); background: linear-gradient(180deg, #fff 0%, var(--accent-soft) 100%); color: var(--accent-strong); }
.gk-ad-cell:nth-child(8n+3).gk-ad-cell-filled { border-color: var(--accent-soft); background: linear-gradient(180deg, #fff 0%, var(--accent-soft) 100%); color: var(--accent-strong); }
.gk-ad-cell:nth-child(8n+4).gk-ad-cell-filled { border-color: var(--accent-soft); background: linear-gradient(180deg, #fff 0%, var(--accent-soft) 100%); color: var(--accent-strong); }
.gk-ad-cell:nth-child(8n+5).gk-ad-cell-filled { border-color: var(--accent-soft); background: linear-gradient(180deg, #fff 0%, var(--accent-soft) 100%); color: var(--accent-strong); }
.gk-ad-cell:nth-child(8n+6).gk-ad-cell-filled { border-color: var(--accent-soft); background: linear-gradient(180deg, #fff 0%, var(--accent-soft) 100%); color: var(--accent-strong); }
.gk-ad-cell:nth-child(8n+7).gk-ad-cell-filled { border-color: var(--accent-soft); background: linear-gradient(180deg, #fff 0%, var(--accent-soft) 100%); color: var(--accent-strong); }
.gk-ad-cell:nth-child(8n+8).gk-ad-cell-filled { border-color: var(--accent-soft); background: linear-gradient(180deg, #fff 0%, var(--accent-soft) 100%); color: var(--accent-strong); }

/* 已投放箭头：与文字同色 */
.gk-ad-cell:nth-child(8n+1).gk-ad-cell-filled .gk-ad-arrow { color: var(--accent); }
.gk-ad-cell:nth-child(8n+2).gk-ad-cell-filled .gk-ad-arrow { color: var(--accent); }
.gk-ad-cell:nth-child(8n+3).gk-ad-cell-filled .gk-ad-arrow { color: var(--accent); }
.gk-ad-cell:nth-child(8n+4).gk-ad-cell-filled .gk-ad-arrow { color: var(--accent); }
.gk-ad-cell:nth-child(8n+5).gk-ad-cell-filled .gk-ad-arrow { color: var(--accent); }
.gk-ad-cell:nth-child(8n+6).gk-ad-cell-filled .gk-ad-arrow { color: var(--accent); }
.gk-ad-cell:nth-child(8n+7).gk-ad-cell-filled .gk-ad-arrow { color: var(--accent); }
.gk-ad-cell:nth-child(8n+8).gk-ad-cell-filled .gk-ad-arrow { color: var(--accent); }

/* 已投放 hover：实色渐变 + 白字 + 主题色阴影 */
.gk-ad-cell:nth-child(8n+1).gk-ad-cell-filled:hover,
.gk-ad-cell:nth-child(8n+2).gk-ad-cell-filled:hover,
.gk-ad-cell:nth-child(8n+3).gk-ad-cell-filled:hover,
.gk-ad-cell:nth-child(8n+4).gk-ad-cell-filled:hover,
.gk-ad-cell:nth-child(8n+5).gk-ad-cell-filled:hover,
.gk-ad-cell:nth-child(8n+6).gk-ad-cell-filled:hover,
.gk-ad-cell:nth-child(8n+7).gk-ad-cell-filled:hover,
.gk-ad-cell:nth-child(8n+8).gk-ad-cell-filled:hover {
    border-color: var(--accent);
    color: #fff;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
    box-shadow: 0 6px 16px var(--accent-shadow);
}
.gk-ad-cell:nth-child(8n+1).gk-ad-cell-filled:hover .gk-ad-arrow,
.gk-ad-cell:nth-child(8n+2).gk-ad-cell-filled:hover .gk-ad-arrow,
.gk-ad-cell:nth-child(8n+3).gk-ad-cell-filled:hover .gk-ad-arrow,
.gk-ad-cell:nth-child(8n+4).gk-ad-cell-filled:hover .gk-ad-arrow,
.gk-ad-cell:nth-child(8n+5).gk-ad-cell-filled:hover .gk-ad-arrow,
.gk-ad-cell:nth-child(8n+6).gk-ad-cell-filled:hover .gk-ad-arrow,
.gk-ad-cell:nth-child(8n+7).gk-ad-cell-filled:hover .gk-ad-arrow,
.gk-ad-cell:nth-child(8n+8).gk-ad-cell-filled:hover .gk-ad-arrow {
    color: #fff;
}

/* 空格子：第 n 格的颜色（虚线 + 浅底 + 主题色文字 + 加号） */
.gk-ad-cell:nth-child(8n+1).gk-ad-cell-empty { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.gk-ad-cell:nth-child(8n+2).gk-ad-cell-empty { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.gk-ad-cell:nth-child(8n+3).gk-ad-cell-empty { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.gk-ad-cell:nth-child(8n+4).gk-ad-cell-empty { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.gk-ad-cell:nth-child(8n+5).gk-ad-cell-empty { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.gk-ad-cell:nth-child(8n+6).gk-ad-cell-empty { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.gk-ad-cell:nth-child(8n+7).gk-ad-cell-empty { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.gk-ad-cell:nth-child(8n+8).gk-ad-cell-empty { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.gk-ad-cell:nth-child(8n+1).gk-ad-cell-empty .gk-ad-plus,
.gk-ad-cell:nth-child(8n+2).gk-ad-cell-empty .gk-ad-plus,
.gk-ad-cell:nth-child(8n+3).gk-ad-cell-empty .gk-ad-plus,
.gk-ad-cell:nth-child(8n+4).gk-ad-cell-empty .gk-ad-plus,
.gk-ad-cell:nth-child(8n+5).gk-ad-cell-empty .gk-ad-plus,
.gk-ad-cell:nth-child(8n+6).gk-ad-cell-empty .gk-ad-plus,
.gk-ad-cell:nth-child(8n+7).gk-ad-cell-empty .gk-ad-plus,
.gk-ad-cell:nth-child(8n+8).gk-ad-cell-empty .gk-ad-plus { color: var(--accent); }

/* 空格子 hover：实色渐变 + 白字 */
.gk-ad-cell:nth-child(8n+1).gk-ad-cell-empty:hover,
.gk-ad-cell:nth-child(8n+2).gk-ad-cell-empty:hover,
.gk-ad-cell:nth-child(8n+3).gk-ad-cell-empty:hover,
.gk-ad-cell:nth-child(8n+4).gk-ad-cell-empty:hover,
.gk-ad-cell:nth-child(8n+5).gk-ad-cell-empty:hover,
.gk-ad-cell:nth-child(8n+6).gk-ad-cell-empty:hover,
.gk-ad-cell:nth-child(8n+7).gk-ad-cell-empty:hover,
.gk-ad-cell:nth-child(8n+8).gk-ad-cell-empty:hover {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
    border-color: var(--accent-strong);
    color: #fff;
}
.gk-ad-cell:nth-child(8n+1).gk-ad-cell-empty:hover .gk-ad-plus,
.gk-ad-cell:nth-child(8n+2).gk-ad-cell-empty:hover .gk-ad-plus,
.gk-ad-cell:nth-child(8n+3).gk-ad-cell-empty:hover .gk-ad-plus,
.gk-ad-cell:nth-child(8n+4).gk-ad-cell-empty:hover .gk-ad-plus,
.gk-ad-cell:nth-child(8n+5).gk-ad-cell-empty:hover .gk-ad-plus,
.gk-ad-cell:nth-child(8n+6).gk-ad-cell-empty:hover .gk-ad-plus,
.gk-ad-cell:nth-child(8n+7).gk-ad-cell-empty:hover .gk-ad-plus,
.gk-ad-cell:nth-child(8n+8).gk-ad-cell-empty:hover .gk-ad-plus { color: #fff; }

/* =========================
 *  5. 文章内的广告容器（顶部插入，整齐 6 列）
 * ========================= */
.gk-ad-inline {
    margin: 14px 0 22px;
    padding: 12px 14px;
    border-left: 3px solid #e3493d;
    border-radius: 0 8px 8px 0;
    background: #fafafa;
}
.gk-ad-inline .gk-ad-grid { gap: 6px; }
.gk-ad-inline .gk-ad-cell { font-size: 13px; height: 30px; padding: 0 10px; border-radius: 6px; }
.gk-ad-inline .gk-ad-cell-empty { font-size: 12px; }
@media (max-width: 480px) {
    .gk-ad-inline { padding: 10px 12px; }
    .gk-ad-inline .gk-ad-cell { font-size: 12px; height: 28px; }
}

/* =========================
 *  6. 暗黑模式适配
 * ========================= */
@media (prefers-color-scheme: dark) {
    .gk-ad-cell-filled {
        background: #2a2d33;
        border-color: #3a3d44;
        color: #c8ccd4;
    }
    .gk-ad-cell-filled:hover {
        border-color: #4a4d54;
        box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
        color: #ff8e85;
    }
    .gk-ad-cell-filled .gk-ad-arrow { color: #6a6e74; }
    .gk-ad-cell-filled:hover .gk-ad-arrow { color: #a8acb4; }
    .gk-ad-cell-empty {
        background: #2c2f35;
        border-color: #4a4d54;
        color: #a8acb4;
    }
    .gk-ad-cell-empty:hover {
        background-color: #34373d;
        border-color: #5a5d64;
    }
    .gk-ad-cell-empty .gk-ad-plus { color: #6a6e74; }
    .gk-ad-cell-empty:hover .gk-ad-plus { color: #a8acb4; }
    .gk-ad-inline {
        background: #232529;
        border-left-color: #ff5849;
    }
}

/* =========================
 *  7. 我的广告页 + 表单
 * ========================= */
.gk-ad-notice {
    padding: 14px 16px;
    border: 1px solid #f0d8d5;
    border-left: 3px solid #e3493d;
    border-radius: 6px;
    background: #fff8f7;
    color: #666;
    font-size: 14px;
}
.gk-ad-notice a { color: #e3493d; text-decoration: none; }
.gk-ad-notice a:hover { text-decoration: underline; }

.gk-ad-h3 {
    margin: 18px 0 12px;
    padding-left: 10px;
    border-left: 3px solid #e3493d;
    font-size: 16px;
    font-weight: 600;
    color: #333;
}
.gk-slot-desc {
    margin: -8px 0 14px;
    color: #999;
    font-size: 13px;
}
.gk-field {
    margin-bottom: 14px;
}
.gk-field label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    color: #555;
}
.gk-field input,
.gk-field textarea,
.gk-field select {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #dcdfe6;
    border-radius: 6px;
    background: #fff;
    font-size: 14px;
    line-height: 1.5;
    box-sizing: border-box;
    transition: border-color .2s ease;
}
.gk-field input:focus,
.gk-field textarea:focus,
.gk-field select:focus {
    border-color: #e3493d;
    outline: none;
}
.gk-unit-tip {
    margin-left: 8px;
    color: #aaa;
    font-size: 12px;
}
.gk-total {
    margin: 14px 0;
    padding: 10px 14px;
    background: #fafafa;
    border-radius: 6px;
    font-size: 14px;
    color: #666;
}
.gk-total b {
    color: #e3493d;
    font-size: 18px;
    font-weight: 600;
}

/* 支付方式选择器：使用子比主题的 .hollow-radio + .payment-method-radio 样式 */
/* 弹窗内的 hollow-radio 微调 */
.gk-ad-modal .payment-method-radio img {
    height: 30px;
}
.gk-ad-modal .payment-method-radio + .payment-method-radio {
    margin-left: 8px;
}

.gk-slot-card {
    display: flex;
    align-items: center;
    padding: 12px 14px;
    border: 1.5px solid #e8e8e8;
    border-radius: 8px;
    cursor: pointer;
    background: #fff;
    transition: all .2s ease;
}
.gk-slot-card:hover {
    border-color: #e3493d;
    background: #fff8f7;
}
.gk-slot-card input {
    margin-right: 10px;
}

/* 保留旧按钮样式用于后台等 */
.gk-btn-primary {
    display: inline-block;
    padding: 10px 24px;
    border: 0;
    border-radius: 6px;
    background: #e3493d;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s ease;
}
.gk-btn-primary:hover { background: #d23d31; }
.gk-btn-primary:disabled { background: #ccc; cursor: not-allowed; }

/* 弹窗内按钮使用子比主题的 .but 样式，这里做兼容微调 */
.gk-ad-modal .but.initiate-pay {
    font-size: 15px;
    padding: 10px 20px;
}
.gk-ad-modal .but.initiate-pay.loading {
    pointer-events: none;
    opacity: 0.7;
}

.gk-msg {
    position: fixed;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 24px;
    background: rgba(0, 0, 0, .82);
    color: #fff;
    border-radius: 6px;
    font-size: 14px;
    z-index: 999999;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .15);
    animation: gk-msg-in .3s ease;
}
@keyframes gk-msg-in {
    from { opacity: 0; transform: translate(-50%, -10px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

/* =========================
 *  7.5 投放弹窗（点空格子后弹出填表）— JS 通过 #gkAdModal 操作
 * ========================= */
.gk-ad-modal-mask {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, .55);
    z-index: 999990;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
}
.gk-ad-modal-mask.is-open {
    display: flex !important;
}
.gk-ad-modal {
    position: relative;
    max-width: 520px;
    width: 100%;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 24px 28px 20px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
}
.gk-ad-modal-close {
    position: absolute;
    top: 6px; right: 12px;
    background: transparent;
    border: 0;
    font-size: 28px;
    color: #aaa;
    cursor: pointer;
    line-height: 1;
    padding: 4px 10px;
    transition: color .2s ease;
    z-index: 2;
}
.gk-ad-modal-close:hover { color: #e3493d; }
.gk-ad-modal-body { font-size: 14px; color: #555; }
.gk-ad-loading {
    padding: 40px 0;
    text-align: center;
    color: #888;
    font-size: 14px;
}
.gk-ad-loading::before {
    content: '';
    display: inline-block;
    width: 18px; height: 18px;
    margin-right: 8px;
    border: 2px solid #e3493d;
    border-top-color: transparent;
    border-radius: 50%;
    vertical-align: middle;
    animation: gk-spin .8s linear infinite;
}
@keyframes gk-spin {
    to { transform: rotate(360deg); }
}

/* =========================
 *  8. 支付弹窗（QR 版，自建）
 * ========================= */
.gk-pay-mask {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, .55);
    z-index: 999990;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.gk-pay-modal {
    position: relative;
    max-width: 420px;
    width: 100%;
    padding: 24px 26px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
    text-align: center;
}
.gk-pay-close {
    position: absolute;
    top: 8px; right: 12px;
    background: transparent;
    border: 0;
    font-size: 26px;
    color: #aaa;
    cursor: pointer;
    line-height: 1;
    padding: 4px 8px;
    transition: color .2s ease;
}
.gk-pay-close:hover { color: #e3493d; }
.gk-pay-title {
    margin: 0 0 16px;
    font-size: 16px;
    font-weight: 600;
    color: #333;
}
.gk-pay-qr {
    padding: 12px;
    background: #fafafa;
    border-radius: 8px;
    margin-bottom: 12px;
}
.gk-pay-qr img {
    display: block;
    width: 100%;
    max-width: 220px;
    height: auto;
    margin: 0 auto;
}
.gk-pay-tip {
    color: #888;
    font-size: 12px;
}
.gk-pay-status {
    margin-top: 8px;
    color: #e3493d;
    font-size: 13px;
}