.payment_method_twpay_direct label{
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
}

/* 图标组已由 flex + gap 控制间距,这里不再额外加左内边距 */
label[for='payment_method_twpay_direct'] img {
    padding-left: 0 !important;
}

.twpay-payment-field-container{
    padding: 15px 0;
}

/* 卡表单底部的安全支付提示(锁图标 + 一行说明)
   参考 Shopify / Stripe 结账页:纯文字 + 小锁图标,灰色,不加背景框 */
.twpay-direct-secure {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 8px 1px 0 1px;
    font-size: 13px;
    line-height: 1.5;
    color: #6b7280;
}
.twpay-direct-secure > svg {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    /* 锁体描边用绿色,表达"安全"语义 */
    color: #16a34a;
}


.twpay-payment-form-control {
    display: block;
    width: 100%;
    height: 46px !important;
    padding: 5px 10px !important;
    font-size: 16px !important;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 4px;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.twpay-payment-form-group label {
    display: inline-block;
    margin-bottom: 7px;
    color: #56595d;
}

.twpay-payment-form-group {
    margin: 0 1px 10px 1px;
    height: 76px !important;
}
.twpay-payment-inline-div {
    display: flex;
}

.twpay-payment-col-6 {
    width: 50%;
}

.twpay-payment-form-group img {
    position: absolute !important;
    bottom: 12px !important;
    right: 7px !important;
    /* 矢量图标没有固有像素尺寸,必须限制高度,否则会撑满整个表单 */
    height: 22px !important;
    width: auto !important;
}


.twpay-payment-form-group button {
    width: 100%;
    height: 57px;
    border-radius: 5px;
    font-weight: bold;
    background: #393939;
    color: white;
    font-size: medium;
}

/* ===== Blocks 结账页 ===== */
/* 布局:文案在左,支付图标靠右 */
.twpay-direct-label {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    box-sizing: border-box;
    width: 100%;
    /* 下方表单字段自带 margin:0 1px + 1px 边框,再加表单容器的内缩,
       比 label 内容区多缩进 7px,这里补回来,
       让图标右边缘与 Card Number 输入框右边缘对齐 */
    padding-right: 7px;
    gap: 8px;
}

.twpay-direct-label__text {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
}

/* 图标组排到文案之后并推到最右 */
.twpay-direct-icons {
    order: 2;
    flex: 0 0 auto;
    margin: 0 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /* 勾选的卡组织较多时自动换行,始终右对齐,避免压住左侧文字 */
    flex-wrap: wrap;
    max-width: 65%;
    gap: 4px;
}

/* 官方规则 .wc-block-checkout__payment-method ... .radio-control__label img
   特异性为 (0,3,1),这里用同等特异性且靠后加载 */
.twpay-direct-label .twpay-direct-icons > img.twpay-direct-payment-icon {
    flex: 0 0 auto;
    /* 16px:裸 logo 没有卡框留白,和同页其他网关的卡框图标等视觉重量;
       22px 会明显压过它们(见文件末尾经典页同一条的说明) */
    height: 16px;
    max-height: 16px;
    width: auto;
    /* discover(5.75:1) 这类超宽 logo 兜底,避免撑爆布局 */
    max-width: 88px;
    /* 官方是 object-position:left,多图标横向排列时改为居中 */
    object-fit: contain;
    object-position: center;
    vertical-align: middle;
}

/* WooCommerce 官方默认在移动端隐藏 label 内的支付图标,
   但经典结账页是始终显示的,这里保持两端行为一致 */
.is-mobile .twpay-direct-label .twpay-direct-icons > img.twpay-direct-payment-icon,
.is-small .twpay-direct-label .twpay-direct-icons > img.twpay-direct-payment-icon {
    display: inline-block;
}

/* ===== 经典结账页 (checkout shortcode / classic-shortcode block) =====
   WC 的 payment-method.php 模板结构是:
     <li class="wc_payment_method payment_method_twpay_direct">
       <input type="radio" class="input-radio">
       <label for="payment_method_twpay_direct">标题<img…></label>
       <div class="payment_box">…表单…</div>
     </li>

   radio 与 label 是兄弟节点,原本靠主题的 float/inline 排成一行。
   这里把 <li> 本身改成 flex 行容器,让 radio / label / 图标组 稳定同行,
   .payment_box 用 flex:0 0 100% 换行到下一行(表单仍占满整行宽度)。
   选择器限定 payment_method_twpay_direct,不影响其他支付方式。

   ⚠️ 改动原因:此前只把 <label> 改成 display:flex + width:100%,
   而 li 仍是 block 流 —— flex 的 label 是块级盒,会从 radio 所在行
   另起一行,导致 "Credit Card" 标题换行跑到 radio 下方(线上现象)。
   必须让 li 当行容器才能把三者拉回同一行。 */
.wc_payment_method.payment_method_twpay_direct {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

/* 主题 `#payment .input-radio { margin: 3px 10px 16px 5px }` 的下边距 16px
   是为「label 独占一行」的旧排版留的;现在三者同行,再去掉否则 radio 会偏下。
   这里用 #payment 提特异性压过主题。 */
#payment .wc_payment_method.payment_method_twpay_direct > input.input-radio {
    flex: 0 0 auto;
    margin: 0 10px 0 5px !important;
}

/* label 承担「剩余空间」,图标组靠 margin-left:auto 推到行尾。
   min-width:0 允许 flex 子项收缩到内容宽度以下,窄屏下标题不会被挤断。
   display/align-items 保留 !important:文件顶部 `.payment_method_twpay_direct label`
   那条是 !important,不加同等权重压不住。 */
#payment .wc_payment_method.payment_method_twpay_direct > label {
    display: flex !important;
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    align-items: center !important;
    /* 若不禁止换行,flex 会压缩匿名文本节点,把 "Credit Card" 折成两行 */
    white-space: nowrap;
}

/* 表单区另起一行且占满整行,保持原视觉宽度 */
.wc_payment_method.payment_method_twpay_direct > .payment_box {
    flex: 0 0 100%;
}

.twpay-direct-classic-icons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /* 强制一行:经典页侧栏窄,一旦换行最后一个图标会孤零零落到第二行。
       4 个 22px 图标实际需约 217px,靠 max-width 百分比卡临界值很容易差 1px 就折行,
       所以直接 nowrap。勾选过多时图标组会占满整行、文字被挤出,需限制勾选数量 */
    flex-wrap: nowrap;
    gap: 4px;
    /* 关键:把图标组推到行尾 */
    margin-left: auto;
    flex: 0 0 auto;
}

.twpay-direct-classic-icons > img {
    flex: 0 0 auto;
    height: 22px;
    max-height: 22px;
    width: auto;
    max-width: 88px;
    object-fit: contain;
    object-position: center;
    vertical-align: middle;
}

/* 上面这条 height 会被主题 CSS 的 `.page:not(.search-page) img { height: auto }`
   (特异性 0,2,1 > 0,1,1) 压掉,裸 logo 于是按 SVG 的 viewBox 缩成 14×4.7px,
   看起来比同页其他网关 32×20 的图标小一大截。用更高的特异性 + !important 锁死尺寸。
   16px:裸 logo 没有卡框留白,按 20px 渲染会比同页其他网关的卡框图标视觉上更大,
   16px 才是同等视觉重量(visa ≈48×16,mastercard ≈26×16)。 */
#payment .wc_payment_method.payment_method_twpay_direct .twpay-direct-classic-icons > img {
    height: 16px !important;
    max-height: 16px !important;
    width: auto !important;
    max-width: 88px !important;
    /* 图标组已由 flex + gap 控制间距;这条同时压掉上面那条 padding-left:10px
       (本 CSS 在 head 和 body 各加载一次,两份版本不一致时同特异性会互相覆盖) */
    padding-left: 0 !important;
}

/* ===== CVV 输入框里的"卡片背面"示意图 =====
   图标必须相对输入框垂直居中。之前用 bottom 硬编码,依赖 .twpay-payment-form-group
   的高度(76px)和 label 行高 —— 经典结账页和 Blocks 结账页的 label 行高不同,
   同一个 bottom 值只能对齐一个页面(经典页 21px 刚好 / Blocks 页偏上 10px)。
   现在 HTML 里给 CVV 包了一层 .twpay-cvv-field,让图标相对这个盒子居中,两个页面通用。 */
.twpay-cvv-field {
    position: relative;
    /* flex:盒子高度严格等于输入框高度,避免 input 作为 inline-block 时的 baseline 间隙 */
    display: flex;
}

.twpay-cvv-field > input {
    flex: 1 1 auto;
    min-width: 0;
    /* 主题可能给 input 加上下 margin,那会让盒子高度大于输入框高度,
       图标就会偏离输入框中心。group 本身高 76px 固定,清掉 margin 不影响整体间距 */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.twpay-payment-form-group .twpay-cvv-field img {
    position: absolute !important;
    top: 50% !important;
    bottom: auto !important;
    right: 7px !important;
    transform: translateY(-50%);
    height: 22px !important;
    width: auto !important;
}

/* 旧结构兜底:如果只更新了 CSS、HTML 还是老版本(图标是 group 的直接子元素),
   按经典结账页的几何值对齐,至少不会完全错位 */
.twpay-payment-form-group > input[name="card_cvv"] + img {
    bottom: 21px !important;
}

/* ===== 卡号 Luhn 校验失败提示(经典结账页 / Blocks 结账页通用) =====
   前端提交拦截不通过时,卡号输入框下方显示英文提示 + 输入框描红。
   注意:这条 p 是 .twpay-payment-form-group 的兄弟节点(不是子节点)——
   那个容器 CSS 固定 76px 高度,插进去会盖住下面的 Expiration。
   -4px 抵消 group 自带的 10px 下边距,避免间距过大。 */
.twpay-direct-card-error,
.twpay-direct-field-error {
    margin: -4px 1px 10px 1px;
    font-size: 13px;
    line-height: 1.4;
    color: #d63638;
}

.twpay-payment-form-control.twpay-direct-card-invalid {
    border-color: #d63638 !important;
    box-shadow: 0 0 0 1px #d63638 !important;
}