/**
 * 卡尼奶主题 — 付费内容样式（付费盒 / 已购盒 / 购买弹窗 / 下载按钮）
 * pay-box 体系样式自包含，局部 CSS 变量兜底，不依赖全局样式
 */

/* ==================== 0. 局部变量 ==================== */
#posts-pay,
.knn-post-pay-dialog,
.article-content .hidden-box {
    --main-bg-color: #fff;
    --main-shadow: rgba(0, 0, 0, 0.05);
    --main-radius: 8px;
    --mini-radius: 6px;
    --main-color: #333;
    --main-border-color: #e8e8e8;
    --muted-border-color: #f2f3f7;
    --muted-color: #74787d;
    --muted-2-color: #8c8c8c;
    --body-bg-color: #f7f8f9;
    --focus-color: #ff7f6a;
    --focus-color-opacity05: rgba(255, 127, 106, 0.05);
    --focus-color-opacity1: rgba(255, 127, 106, 0.1);
    --cover-height-scale: 70%;
}

/* ==================== 1. 局部工具类 ==================== */
/* 防正文排版规则（.content-style a/p）污染付费盒内元素 */
#posts-pay a { font-size: inherit; color: inherit; }
#posts-pay p { margin: 0 0 10px; }
.article-content .hidden-box a { font-size: inherit; }

/* SVG 兜底尺寸（对齐子比全局 svg 规则，防无 icon 类时按默认 300×150 巨大渲染） */
#posts-pay svg,
.knn-post-pay-dialog svg {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}

#posts-pay .flex,
.knn-post-pay-dialog .flex { display: flex; }
#posts-pay .xx,
.knn-post-pay-dialog .xx { flex-direction: column; }
#posts-pay .ac,
.knn-post-pay-dialog .ac { align-items: center; }
#posts-pay .ab,
.knn-post-pay-dialog .ab { align-items: baseline; }
#posts-pay .jc,
.knn-post-pay-dialog .jc { justify-content: center; align-items: center; }
#posts-pay .jsb,
.knn-post-pay-dialog .jsb { justify-content: space-between; }
#posts-pay .flex.hh,
.knn-post-pay-dialog .flex.hh { flex-wrap: wrap; }
#posts-pay .flex0,
.knn-post-pay-dialog .flex0 { flex-shrink: 0; }
#posts-pay .flex1 { flex: 1; min-width: 0; }
#posts-pay .flex-auto,
.knn-post-pay-dialog .flex-auto { flex: auto; }
#posts-pay .flex .flex-auto-h { flex: auto; overflow: hidden; }
#posts-pay .relative,
.knn-post-pay-dialog .relative { position: relative; }
#posts-pay .text-right { text-align: right; }
#posts-pay .text-left { text-align: left; }
#posts-pay .text-center,
.knn-post-pay-dialog .text-center { text-align: center; }
#posts-pay .text-ellipsis,
.knn-post-pay-dialog .text-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#posts-pay .pointer,
.knn-post-pay-dialog .pointer { cursor: pointer; }
#posts-pay .inline-block,
.knn-post-pay-dialog .inline-block { display: inline-block; }
#posts-pay .font-bold,
.knn-post-pay-dialog .font-bold { font-weight: bold; }
#posts-pay .mr3, .knn-post-pay-dialog .mr3 { margin-right: 3px; }
#posts-pay .mr6, .knn-post-pay-dialog .mr6 { margin-right: 6px; }
#posts-pay .mr10, .knn-post-pay-dialog .mr10 { margin-right: 10px; }
#posts-pay .mr20 { margin-right: 20px; }
#posts-pay .ml3, .knn-post-pay-dialog .ml3 { margin-left: 3px; }
#posts-pay .ml6, .knn-post-pay-dialog .ml6 { margin-left: 6px; }
#posts-pay .ml10, .knn-post-pay-dialog .ml10 { margin-left: 10px; }
#posts-pay .mt6, .knn-post-pay-dialog .mt6 { margin-top: 6px; }
#posts-pay .mt10, .knn-post-pay-dialog .mt10 { margin-top: 10px; }
#posts-pay .mb6, .knn-post-pay-dialog .mb6 { margin-bottom: 6px; }
#posts-pay .mb10, .knn-post-pay-dialog .mb10 { margin-bottom: 10px; }
#posts-pay .em09, .knn-post-pay-dialog .em09 { font-size: 0.9em; }
#posts-pay .em12, .knn-post-pay-dialog .em12 { font-size: 1.2em; }
#posts-pay .em14, .knn-post-pay-dialog .em14 { font-size: 1.4em; }
#posts-pay .em2x, .knn-post-pay-dialog .em2x { font-size: 2em; }
#posts-pay .em3x, .knn-post-pay-dialog .em3x { font-size: 3em; }
#posts-pay .px12, .knn-post-pay-dialog .px12 { font-size: 12px; }
#posts-pay .line-16, .knn-post-pay-dialog .line-16 { line-height: 1.6; }
#posts-pay .padding-6, .knn-post-pay-dialog .padding-6 { padding: 6px; }
#posts-pay .padding-10, .knn-post-pay-dialog .padding-10 { padding: 10px; }
#posts-pay .padding-h6, .knn-post-pay-dialog .padding-h6 { padding-top: 6px; padding-bottom: 6px; }
#posts-pay .padding-h10, .knn-post-pay-dialog .padding-h10 { padding-top: 10px; padding-bottom: 10px; }
#posts-pay .padding-w10, .knn-post-pay-dialog .padding-w10 { padding-left: 10px; padding-right: 10px; }
#posts-pay .padding-lg,
#posts-pay .but.padding-lg,
.knn-post-pay-dialog .but.padding-lg { padding: 0.5em 2em; }
#posts-pay .c-red, .knn-post-pay-dialog .c-red {
    --this-color: #ff5473;
    --this-bg: rgba(255, 84, 115, 0.1);
    color: var(--this-color);
}
#posts-pay .c-blue, .knn-post-pay-dialog .c-blue { color: #2196f3; }
#posts-pay .c-blue-2, .knn-post-pay-dialog .c-blue-2 { color: #4869f0; }
#posts-pay .c-green, .knn-post-pay-dialog .c-green { color: #1aad19; }
#posts-pay .c-yellow, .knn-post-pay-dialog .c-yellow { color: #e6a23c; }
#posts-pay .muted-2-color, .knn-post-pay-dialog .muted-2-color { color: var(--muted-2-color); }
#posts-pay .muted-box,
.knn-post-pay-dialog .muted-box {
    background-color: var(--this-bg, var(--muted-border-color));
    border-radius: var(--main-radius);
    padding: 15px;
}
#posts-pay .btn-block,
.knn-post-pay-dialog .btn-block { display: block; width: 100%; text-align: center; }
#posts-pay .visible-xs-block { display: none; }

/* 绝对定位工具类 */
#posts-pay .abs-left,
#posts-pay .abs-right,
#posts-pay .abs-center,
.knn-post-pay-dialog .abs-right {
    position: absolute;
    top: 50%;
    right: 0.7em;
    transform: translateY(-50%);
    z-index: 1;
}
#posts-pay .abs-center { left: 0; width: 100%; }
#posts-pay .abs-center.left-bottom {
    top: auto;
    transform: unset;
    bottom: 0;
}

/* ==================== 2. 按钮与徽章 ==================== */
#posts-pay .but,
#posts-pay .badg,
.knn-post-pay-dialog .but,
.knn-post-pay-dialog .badg {
    border-radius: 4px;
    display: inline-block;
    transition: 0.15s;
    border: 1px solid var(--this-border);
    vertical-align: middle;
    padding: 0.3em 0.6em;
    text-align: center;
    font-weight: normal;
    background: var(--this-bg);
    color: var(--this-color);
    --this-bg: rgba(136, 136, 136, 0.1);
    --this-border: transparent;
    --this-color: #888;
    line-height: 1.44;
    text-decoration: none;
    cursor: pointer;
}
#posts-pay .but:hover,
.knn-post-pay-dialog .but:hover { opacity: 0.8; }
#posts-pay .but.radius,
.knn-post-pay-dialog .but.radius { border-radius: 50px; padding: 0.3em 1em; }
#posts-pay .but.badg-sm,
#posts-pay .badg.badg-sm,
.knn-post-pay-dialog .badg.badg-sm { font-size: 0.8em; padding: 0 0.2em; vertical-align: 0.1em; }
#posts-pay .badg.hollow { background: transparent; border-color: currentColor; }
#posts-pay .badg.c-red.hollow { color: #ff5473; }
#posts-pay .badg.c-yellow,
.knn-post-pay-dialog .badg.c-yellow { --this-color: #e6a23c; --this-bg: rgba(230, 162, 60, 0.1); }
.knn-post-pay-dialog .but.c-blue { --this-color: #2196f3; --this-bg: rgba(33, 150, 243, 0.1); }

/* 按钮内图标间距 */
#posts-pay .but .icon,
#posts-pay .but > .fa:not(.fa-angle-right),
.knn-post-pay-dialog .but .icon,
.knn-post-pay-dialog .but > .fa:not(.fa-angle-right) { margin-right: 0.25em; }

/* badge 元素（促销标签等） */
#posts-pay badge,
.knn-post-pay-dialog badge {
    font-size: 0.8em;
    line-height: 1.2;
    padding: 0.1em 0.4em;
    min-width: 0.8em;
    min-height: 0.8em;
    display: inline-block;
    vertical-align: 0.1em;
    border-radius: 50px;
    background: var(--this-bg);
    color: var(--this-color);
    top: 5px;
    --this-color: #fff;
    text-align: center;
    --this-bg: #fe3459;
    z-index: 1;
}
#posts-pay badge:not(.point):empty,
.knn-post-pay-dialog badge:not(.point):empty { display: none; }
#posts-pay badge.px12,
.knn-post-pay-dialog badge.px12 { font-size: 12px; }

/* 渐变配色（对齐 jb-* 体系） */
#posts-pay .jb-red, .knn-post-pay-dialog .jb-red,
#posts-pay .order-type-9 .pay-tag, .knn-post-pay-dialog .order-type-9 .pay-tag,
#posts-pay.order-type-9 .pay-tag {
    --this-bg: linear-gradient(135deg, #fd7a64 10%, #fb2d2d 100%);
    --this-color: #fff;
}
#posts-pay .jb-pink, .knn-post-pay-dialog .order-type-2 .pay-tag,
#posts-pay.order-type-2 .pay-tag {
    --this-bg: linear-gradient(135deg, #ff5e7f 30%, #ff967e 100%);
    --this-color: #fff;
}
#posts-pay .jb-yellow, .knn-post-pay-dialog .jb-yellow {
    --this-bg: linear-gradient(135deg, #f59f54 10%, #ff6922 100%);
    --this-color: #fff;
}
#posts-pay .jb-blue, .knn-post-pay-dialog .jb-blue {
    --this-bg: linear-gradient(135deg, #59c3fb 10%, #268df7 100%);
    --this-color: #fff;
}
#posts-pay .jb-green, .knn-post-pay-dialog .jb-green {
    --this-bg: linear-gradient(135deg, #60e464 10%, #5cb85b 100%);
    --this-color: #fff;
}
#posts-pay .jb-purple, .knn-post-pay-dialog .jb-purple {
    --this-bg: linear-gradient(135deg, #f98dfb 10%, #ea00f9 100%);
    --this-color: #fff;
}
#posts-pay .jb-vip1, .knn-post-pay-dialog .jb-vip1 {
    --this-bg: linear-gradient(25deg, #eabe7b 10%, #f5e3c7 70%, #edc788 100%);
    --this-color: #866127;
}
#posts-pay .jb-vip2, .knn-post-pay-dialog .jb-vip2 {
    --this-bg: linear-gradient(317deg, #4d4c4c 30%, #7b7b7b 70%, #5f5c5c 100%);
    --this-color: #ddd;
}
#posts-pay .jb-red, #posts-pay .jb-pink, #posts-pay .jb-yellow, #posts-pay .jb-blue,
#posts-pay .jb-green, #posts-pay .jb-purple, #posts-pay .jb-vip1, #posts-pay .jb-vip2,
.knn-post-pay-dialog .jb-red, .knn-post-pay-dialog .jb-yellow, .knn-post-pay-dialog .jb-blue,
.knn-post-pay-dialog .jb-green, .knn-post-pay-dialog .jb-vip1, .knn-post-pay-dialog .jb-vip2 {
    background: var(--this-bg);
    color: var(--this-color);
}

/* 按钮组均分 */
#posts-pay .but-average {
    display: flex;
    border-radius: 4px;
    overflow: hidden;
}
#posts-pay .but-average.inline { display: inline-flex; }
#posts-pay .but-average > .but { margin: 0 !important; border-radius: 0; flex: auto; }

/* ==================== 3. 付费盒主体 ==================== */
#posts-pay.zib-widget {
    clear: both;
    background-color: var(--main-bg-color);
    padding: 15px;
    box-shadow: 0 0 10px var(--main-shadow);
    border-radius: var(--main-radius);
    margin-bottom: 20px;
}
#posts-pay.pay-box {
    font-size: 14px;
    position: relative;
    overflow: hidden;
    line-height: 1.4;
    margin-top: 20px;
}
#posts-pay .pay-title {
    font-weight: 700;
    line-height: 1.42857143;
    margin: 0;
}

/* 类型角标（左上角） */
#posts-pay .pay-tag {
    --this-color: #fff;
    --this-bg: linear-gradient(135deg, #ff74cd 10%, #ec7d0b 100%);
    background: var(--this-bg);
    color: var(--this-color);
}
#posts-pay.pay-box .pay-tag {
    font-size: 13px;
    padding: 3px 10px;
    right: auto;
    width: auto;
    top: 10px;
    border-radius: var(--main-radius) 0 var(--main-radius) 0;
    line-height: 1.4;
    z-index: 1;
}

/* 已售角标（右上角） */
#posts-pay .img-badge {
    position: absolute;
    top: 0.6em;
    right: 0;
    border-radius: 50px 0 0 50px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
    z-index: 1;
    padding: 0.25em 0.6em;
    background: var(--this-bg);
    color: var(--this-color);
}

/* 左侧图片 */
#posts-pay .pay-thumb { width: 40%; }
#posts-pay .graphic {
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    --main-color: #fff;
    color: #fff;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 10px var(--main-shadow);
    padding: 0;
    padding-bottom: var(--cover-height-scale, 70%);
    border-radius: var(--main-radius);
}
#posts-pay .graphic > .fit-cover,
#posts-pay .graphic > img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 价格模块 */
#posts-pay .pay-mark { font-size: 12px; margin-right: 3px; }
#posts-pay .original-price,
.knn-post-pay-dialog .original-price {
    padding-left: 1px;
    padding-right: 2px;
    position: relative;
    font-size: 14px;
    display: inline-flex;
    align-items: baseline;
    color: var(--muted-2-color);
}
#posts-pay .original-price::before,
.knn-post-pay-dialog .original-price::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    background: var(--this-color, rgba(255, 52, 59, 0.8));
    top: 50%;
    left: 0;
    transform: rotate(8deg);
}
#posts-pay .price-box b { font-weight: 700; }

/* 会员价按钮 */
#posts-pay .vip-price {
    border: none;
    font-size: 12px;
    padding: 4px 12px;
    flex: content;
}
#posts-pay .vip-price:hover { color: inherit; background: rgba(0, 0, 0, 0.05); }
#posts-pay .vip-price-text { display: inline-block; }
#posts-pay .but.jb-vip1 { background: var(--this-bg); color: var(--this-color); }
#posts-pay .but.jb-vip2 { background: var(--this-bg); color: var(--this-color); }

/* 立即购买按钮 */
#posts-pay .cashier-link { padding: 0.5em 3em; }

/* 商品属性 / 更多介绍 / 购后内容 */
#posts-pay .pay-attr,
#posts-pay .pay-extra-hide,
#posts-pay .pay-details {
    font-size: 13px;
    background: var(--muted-border-color);
    display: block;
    padding: 6px 10px;
    line-height: 1.4;
    color: var(--muted-color);
    border-radius: 4px;
}
#posts-pay .pay-details { margin-top: 10px; padding: 10px; }
#posts-pay .pay-attr { margin-top: 10px; }
#posts-pay .pay-attr .attr-value { font-weight: 500; }

/* ==================== 4. 已购盒 ==================== */
#posts-pay.paid-box { padding: 0 !important; border-radius: var(--main-radius); }
#posts-pay .box-body { padding: 15px; }
#posts-pay .paid-info {
    border-left: 1px dashed rgba(255, 255, 255, 0.51);
    padding-left: 20px;
}
#posts-pay .paid-info a { color: inherit; }
#posts-pay .jb-green.flex.ac { border-radius: var(--main-radius) var(--main-radius) 0 0; }

/* 会员免费条 */
#posts-pay .payvip-icon {
    background: linear-gradient(300deg, #4c4d51, #2a2a31 15%, #85858a 40%, #393a3c 60%, #393838 80%, #5e5f62);
    color: #ddd;
}
#posts-pay .vipbg-v1 {
    background: linear-gradient(60deg, #f0bf81 0, #fdefd6 30%, #f2deb9 40%, #fdc277 80%, #f9e1b7 100%);
    color: #8c5728;
}
#posts-pay .vipbg-v1 .c-red { color: #8c5728; }

/* 隐藏内容盒（payshow / 下载区共用） */
.article-content .hidden-box,
#posts-pay .hidden-box {
    padding: 10px;
    margin: 20px 0;
    border: 1px dashed var(--focus-color);
    border-radius: var(--main-radius);
    position: relative;
}
.article-content .hidden-box .hidden-text,
#posts-pay .hidden-box .hidden-text {
    color: var(--focus-color);
    padding: 10px;
    text-align: center;
    display: block;
}
.article-content .hidden-box.show,
#posts-pay .hidden-box.show { padding-top: 35px; }
.article-content .hidden-box.show .hidden-text,
#posts-pay .hidden-box.show .hidden-text {
    padding: 3px 10px;
    font-size: 13px;
    top: 0;
    border-radius: 0 0 8px 0;
    line-height: 1.4;
    z-index: 1;
    left: 0;
    position: absolute;
    border-bottom: 1px dashed var(--focus-color);
    border-right: 1px dashed var(--focus-color);
}
.article-content .hidden-box .hidden-text a { text-decoration: none; color: #2196f3; }

/* 下载按钮组 */
#posts-pay .but-download .but { padding: 8px 20px; }
#posts-pay .knn-copy-key { cursor: pointer; text-decoration: none; }

/* ==================== 5. 购买弹窗 ==================== */
.knn-post-pay-dialog {
    position: fixed;
    inset: 0;
    z-index: 9999;
    font-size: 14px;
    line-height: 1.4;
}
.knn-post-pay-dialog .knn-post-pay-mask {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}
.knn-post-pay-modal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    max-width: calc(100vw - 30px);
    max-height: calc(100vh - 60px);
    overflow-y: auto;
    background: #fff;
    border-radius: var(--main-radius);
    padding: 0;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18);
    animation: knnPostPayIn 0.24s ease;
}
@keyframes knnPostPayIn {
    from { opacity: 0; transform: translate(-50%, -46%); }
    to { opacity: 1; transform: translate(-50%, -50%); }
}

/* 彩色弹窗头部（colorful-bg 体系） */
.knn-post-pay-modal .modal-colorful-header {
    border-radius: var(--main-radius) var(--main-radius) 0 0;
    background-size: 120%;
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--this-color);
    background: var(--this-bg);
}
.knn-post-pay-modal .colorful-bg > .colorful-make::after,
.knn-post-pay-modal .colorful-bg > .colorful-make::before,
.knn-post-pay-modal .colorful-bg > .colorful-make {
    position: absolute;
    color: var(--this-color);
    background: var(--this-bg);
    border-radius: 100%;
    content: ' ';
}
.knn-post-pay-modal .colorful-bg > .colorful-make {
    bottom: 0;
    height: 290px;
    width: 323px;
    top: 60%;
    animation: knnRandom1 120s linear infinite;
}
.knn-post-pay-modal .colorful-bg > .colorful-make::before {
    right: -558px;
    bottom: 0;
    height: 300px;
    width: 677px;
    top: -325px;
    transform: rotate(341deg);
}
.knn-post-pay-modal .colorful-bg > .colorful-make::after {
    left: -262px;
    bottom: 0;
    height: 214px;
    width: 402px;
    top: -170px;
    transform: rotate(326deg);
}
.knn-post-pay-modal .colorful-bg > .colorful-make + * { position: relative; }
@keyframes knnRandom1 {
    from { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
    20% { transform: translate3d(-30px, -20px, 50px) rotate(87deg) scale(0.9); }
    65% { transform: translate3d(-80px, -40px, 0px) rotate(156deg) scale(0.6); }
    to { transform: translate3d(0, 0, 0) rotate(360deg) scale(1); }
}
.knn-post-pay-modal .modal-colorful-header > .close {
    position: absolute;
    right: 10px;
    top: 10px;
    color: var(--this-color);
    opacity: 0.6;
    font-size: 18px;
    z-index: 9;
    border: 0;
    background: transparent;
    cursor: pointer;
    line-height: 1;
    padding: 4px;
}
.knn-post-pay-modal .modal-colorful-header > .close:hover { opacity: 1; }

/* 弹窗主体（头部之下） */
.knn-post-pay-modal .knn-post-pay-body {
    margin-top: 120px;
    padding: 15px;
}

/* 支付方式 radio（hollow-radio 体系） */
.knn-post-pay-dialog .hollow-radio {
    padding: 10px;
    border: 1px solid var(--main-border-color);
    border-radius: var(--mini-radius);
    text-align: center;
    transition: border-color 0.2s, background 0.2s;
}
.knn-post-pay-dialog .hollow-radio.active {
    border-color: var(--focus-color);
    background: var(--focus-color-opacity05);
}
.knn-post-pay-dialog .payment-method-radio { padding: 5px; }
.knn-post-pay-dialog .payment-method-radio > * { margin: 3px; }
.knn-post-pay-dialog .payment-method-radio img { height: 35px; }
.knn-post-pay-dialog .payment-method-radio + .payment-method-radio { margin-left: 10px; }

/* 优惠码输入盒 */
.knn-post-pay-dialog .form-control.coupon-input {
    width: 100%;
    height: 38px;
    padding: 6px 112px 6px 12px;
    border: 1px solid transparent;
    border-radius: var(--mini-radius);
    background: var(--body-bg-color);
    color: var(--main-color);
    font-size: 13px;
    box-sizing: border-box;
    outline: none;
    box-shadow: none;
    transition: border-color ease-in-out 0.15s, background ease-in-out 0.15s;
}
.knn-post-pay-dialog .form-control.coupon-input:focus { border-color: #2196f3; background: #fff; }
.knn-post-pay-dialog .coupon-input + .abs-right,
.knn-post-pay-dialog .coupon-input-box .abs-right { right: 2px; }
.knn-post-pay-dialog .coupon-submit { white-space: nowrap; }
.knn-post-pay-dialog .coupon-submit:disabled { opacity: 0.6; cursor: not-allowed; }
.knn-post-pay-dialog .coupon-data-box { font-size: 12px; }
.knn-post-pay-dialog .coupon-data-box .coupon-msg { margin-top: 6px; }
.knn-post-pay-dialog .coupon-data-box .coupon-msg.success { color: #1aad19; }
.knn-post-pay-dialog .coupon-data-box .coupon-msg.error { color: #ff3434; }

/* 立即支付按钮 */
.knn-post-pay-dialog .but.initiate-pay { padding: 0.6em 1em; border: 0; }
.knn-post-pay-dialog .actual-price-number { font-weight: 700; }

/* ==================== 6. 移动端 ==================== */
@media (max-width: 767px) {
    #posts-pay .visible-xs-block { display: block; }
}
@media (max-width: 640px) {
    #posts-pay .hide-sm { display: none !important; }
    #posts-pay.pay-box { padding: 10px; }
    #posts-pay .pay-title { margin-top: 18px; }
    #posts-pay.pay-box .price-box {
        text-align: center;
        align-items: center;
        justify-content: center;
        margin: 6px;
    }
    #posts-pay .pay-flexbox { flex-wrap: wrap; }
    #posts-pay .but-group > .but { width: 50%; }
    #posts-pay .vip-price-buts,
    #posts-pay .signin-loader { width: 100%; }
    #posts-pay .cashier-link,
    .knn-post-pay-dialog .initiate-pay { width: 100%; }
    .knn-post-pay-modal { width: calc(100vw - 20px); max-width: none; }
}