/*
 * 付费墙与书页价格条。
 *
 * 尽量用 inherit / currentColor，跟着主题走；只在必须可辨的地方给具体色值。
 * 站点有深色模式，硬编码白底会在深底上炸出来。
 */

.cj-paywall {
    margin: 28px 0 8px;
    border: 1px solid rgba(127, 127, 127, 0.28);
    border-radius: 14px;
    background: rgba(127, 127, 127, 0.06);
    padding: 4px;
}

.cj-paywall__inner {
    padding: 22px 22px 16px;
}

.cj-paywall__title {
    margin: 0 0 6px;
    font-size: 1.25rem;
    line-height: 1.35;
}

.cj-paywall__lead {
    margin: 0 0 18px;
    opacity: 0.82;
    line-height: 1.65;
}

.cj-paywall__grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 14px;
    align-items: stretch;
}

.cj-card {
    border: 1px solid rgba(127, 127, 127, 0.26);
    border-radius: 12px;
    padding: 16px 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: rgba(127, 127, 127, 0.04);
}

.cj-card--primary {
    border-color: rgba(59, 130, 246, 0.5);
    background: rgba(59, 130, 246, 0.07);
}

.cj-card--or {
    border: 0;
    background: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
}

.cj-card__or {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.75rem;
    opacity: 0.6;
}

.cj-card__kicker {
    margin: 0;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.6;
}

.cj-card__title {
    margin: 0;
    font-size: 1.02rem;
}

.cj-card__price {
    margin: 2px 0 0;
    font-size: 1.6rem;
    font-weight: 700;
}

.cj-card__note {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.6;
    opacity: 0.78;
}

.cj-btn {
    display: inline-block;
    margin-top: auto;
    padding: 11px 16px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-size: 0.94rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: filter 0.15s ease;
}

.cj-btn:hover {
    filter: brightness(1.08);
}

/* 主按钮用酒红，跟整站的言情配色一致。之前那支 #2563eb 的蓝在奶油底上
   像另一个网站借来的按钮，和旁边酒红的引流链也打架。 */
.cj-btn--buy {
    background: #7b2d3b;
    border-color: #7b2d3b;
    color: #ffffff;
}

.cj-btn--buy:hover {
    background: #5f1f2b;
    border-color: #5f1f2b;
    filter: none;
}

.cj-btn--ghost {
    background: transparent;
    border-color: rgba(127, 127, 127, 0.45);
    color: inherit;
}

.cj-btn[disabled] {
    opacity: 0.6;
    cursor: progress;
}

.cj-paywall__foot {
    margin: 14px 0 0;
    display: flex;
    gap: 12px;
    align-items: center;
    font-size: 0.85rem;
    opacity: 0.8;
}

.cj-paywall__status,
.cj-book-panel__status {
    font-size: 0.85rem;
}

/* 书详情页价格条 */

.cj-book-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 20px;
    padding: 16px 18px 12px;
    margin: 0 0 18px;
    border: 1px solid rgba(123, 45, 59, 0.16);
    border-radius: 12px;
    background: #fffaf7;
}

.cj-book-panel__price {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.cj-book-panel__label {
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.65;
}

.cj-book-panel__price strong {
    font-size: 1.35rem;
}

.cj-book-panel__note {
    font-size: 0.76rem;
    opacity: 0.7;
}

/*
 * 「含税，即最终价」贴在价格下方。比 note 再淡一档，但它必须存在：买家在
 * 结账页看到金额没变时，这行字就是唯一能解释「为什么没多收钱」的地方。
 */
.cj-book-panel__tax {
    font-size: 0.72rem;
    letter-spacing: 0.01em;
    opacity: 0.55;
}

/* 按钮和引流链竖排：横排时一粗一细并排，视觉上像两个平级的按钮 */
.cj-book-panel__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 7px;
    margin-left: auto;
}

.cj-book-panel__actions .cj-btn {
    margin-top: 0;
}

.cj-link {
    font-size: 0.85rem;
    opacity: 0.8;
}

/* 窄屏堆叠：两栏并排会挤成两列读不了的文字 */

@media (max-width: 560px) {
    .cj-paywall__grid {
        grid-template-columns: 1fr;
    }

    .cj-card--or {
        min-height: 0;
        padding: 2px 0;
    }

    .cj-book-panel__actions {
        margin-left: 0;
        width: 100%;
        align-items: stretch;
    }

    /* 窄屏按钮铺满一行，拇指更好点 */
    .cj-book-panel__actions .cj-btn {
        width: 100%;
    }

    .cj-book-panel__actions .cj-link--upsell {
        justify-content: center;
    }
}

/* 管理员才看到的提示：书没填整本价，不是按钮坏了 */
.cj-card__note--admin {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(220, 38, 38, 0.08);
    border: 1px dashed rgba(220, 38, 38, 0.35);
    color: #b91c1c;
    font-size: 0.82rem;
    line-height: 1.6;
}

/* --------------------------------------------------------- 会员价与引流 */

/*
 * 会员看到的是折后价，原价划掉放在旁边。颜色一律用 currentColor + 透明度，
 * 站点深色模式切换时不用另写一套。
 */
.cj-card__was {
    margin-left: 6px;
    font-size: 0.78em;
    font-weight: 400;
    text-decoration: line-through;
    opacity: 0.55;
}

.cj-card__badge {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(123, 45, 59, 0.12);
    color: #7b2d3b;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    vertical-align: middle;
}

.cj-card__perks {
    margin: 10px 0 14px;
    padding: 0;
    list-style: none;
    font-size: 0.82rem;
    line-height: 1.7;
    opacity: 0.85;
}

.cj-card__perks li {
    position: relative;
    padding-left: 16px;
    margin-bottom: 3px;
}

.cj-card__perks li::before {
    content: "";
    position: absolute;
    top: 0.62em;
    left: 2px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #c9768a;
}

.cj-card__note--small {
    margin-top: 8px;
    font-size: 0.74rem;
    opacity: 0.68;
}

/* 书详情页价格条：会员折后价 */

.cj-book-panel__was {
    margin-left: 6px;
    font-size: 0.82rem;
    text-decoration: line-through;
    opacity: 0.5;
}

.cj-book-panel__price strong {
    letter-spacing: -0.01em;
}

/* 「看看会员方案」这条引流链。比普通链接重一点，但不做成按钮——主按钮
   只能有一个，两个一样重的按钮等于没有主次。
   不带下划线：它排在酒红按钮正下方，加下划线会变成第二条「可点的横线」，
   跟按钮抢注意力。悬停时才浮出细线。 */
.cj-link--upsell {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #7b2d3b;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    padding-bottom: 1px;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.cj-link--upsell::after {
    content: "\2192";
    font-size: 0.9em;
    line-height: 1;
}

.cj-link--upsell:hover {
    border-bottom-color: currentColor;
    color: #5f1f2b;
}

/* 「只能在线看，不能下载」——这句话必须贴着购买按钮出现，读者在付款前
   就得看见。灰色小字、通栏，不加边框，避免看起来像警告。 */
.cj-book-panel__terms {
    flex: 0 0 100%;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 2px 0 0;
    font-size: 0.74rem;
    line-height: 1.5;
    color: #6f6167;
}

.cj-book-panel__terms-icon {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    opacity: 0.75;
}

/*
 * 深色模式。
 *
 * 主题不是用 prefers-color-scheme 切，而是在 <html> 上加 .dark 和
 * data-theme="dark"（见主题 assets/js/main.js）。所以这里以 .dark 为准，
 * 媒体查询只留作兜底 —— 只有当站点自己没声明过主题时才可能命中。
 */
.dark .cj-book-panel,
[data-theme="dark"] .cj-book-panel {
    background: rgba(255, 255, 255, 0.045);
    border-color: rgba(224, 163, 177, 0.26);
}

.dark .cj-book-panel__terms,
[data-theme="dark"] .cj-book-panel__terms {
    color: rgba(255, 255, 255, 0.66);
}

.dark .cj-link--upsell,
[data-theme="dark"] .cj-link--upsell {
    color: #e0a3b1;
}

.dark .cj-link--upsell:hover,
[data-theme="dark"] .cj-link--upsell:hover {
    color: #f0c2cd;
}

.dark .cj-card__badge,
[data-theme="dark"] .cj-card__badge {
    background: rgba(224, 163, 177, 0.16);
    color: #e6b3bf;
}

/* ------------------------------------------------- 机会（每日签到赚的那一次） */

/* 付费墙里的报错（选书失败、机会不够、nonce 过期）。原来只有类名没有样式，
   红字和正文同色、同粗细，读者会当成正文读过去。 */
.cj-paywall__error {
    margin: 0 0 14px;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(220, 38, 38, 0.08);
    border: 1px solid rgba(220, 38, 38, 0.22);
    color: #b91c1c;
    font-size: 0.86rem;
    line-height: 1.6;
}

/* 一条通栏的动作条，不是卡片：它在卡片网格上方，权重低于主路径，但按钮
   必须够显眼——这是免费读者唯一能立刻做到的事。
   靠左的文字 + 靠右的按钮，窄屏再堆叠。 */
.cj-chance {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 14px;
    padding: 14px 16px;
    border: 1px solid rgba(123, 45, 59, 0.28);
    border-radius: 12px;
    background: rgba(123, 45, 59, 0.05);
}

.cj-chance__text {
    min-width: 0;
}

.cj-chance__title {
    margin: 0 0 3px;
    font-size: 0.98rem;
    font-weight: 700;
}

.cj-chance__note {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.6;
    opacity: 0.82;
}

/* .cj-btn 默认 margin-top:auto（为卡片里的竖排留的），横排时要归零 */
.cj-chance__btn {
    margin-top: 0;
    flex: 0 0 auto;
    white-space: nowrap;
}

/* 一次机会都没有时的替代行：不占一整条，只是一句带链接的说明 */
.cj-chance__empty {
    margin: 0 0 14px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px dashed rgba(127, 127, 127, 0.35);
    font-size: 0.85rem;
    line-height: 1.6;
    opacity: 0.85;
}

.cj-chance__empty a {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}

/* 未登录访客的机会提示（1.7.2）：通栏一条，和上面 .cj-chance 同一套配色，
   但只有一个段落、没有按钮——行动入口在下面的 Sign in 卡片里，这里只负责
   把「不办会员也能读」这件事说清楚，不跟主路径抢注意力。 */
.cj-chance__invite {
    margin: 0 0 14px;
    padding: 12px 16px;
    border: 1px solid rgba(123, 45, 59, 0.28);
    border-radius: 12px;
    background: rgba(123, 45, 59, 0.05);
    font-size: 0.9rem;
    line-height: 1.6;
}

/* 整条只有「2 chances」是彩色的，视线会先落到数字上；其余保持正文色。 */
.cj-chance__invite strong {
    font-weight: 700;
    color: #7b2d3b;
}

.dark .cj-chance__invite,
[data-theme="dark"] .cj-chance__invite {
    border-color: rgba(224, 163, 177, 0.3);
    background: rgba(224, 163, 177, 0.07);
}

.dark .cj-chance__invite strong,
[data-theme="dark"] .cj-chance__invite strong {
    color: #e0a3b1;
}

.dark .cj-chance,
[data-theme="dark"] .cj-chance {
    border-color: rgba(224, 163, 177, 0.3);
    background: rgba(224, 163, 177, 0.07);
}

.dark .cj-paywall__error,
[data-theme="dark"] .cj-paywall__error {
    background: rgba(248, 113, 113, 0.12);
    border-color: rgba(248, 113, 113, 0.3);
    color: #fca5a5;
}

@media (max-width: 560px) {
    .cj-chance {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .cj-chance__btn {
        width: 100%;
    }
}