/* =============================================================
 * Dppay Direct — payment_fields 样式
 *
 * 设计原则:
 *   - 不与主题 CSS 冲突:容器加 .dppay-payment-field-container
 *     前缀,字段加 .dppay-* 前缀
 *   - 响应式:fee / 6 / 12 / 24 字段宽度阶梯,<= 480px 自动 stack
 *   - WC 主题兼容:fieldset/row 等常见 wrapper 不被覆盖
 *   - 高对比度错误状态:WC notice 之外,字段自己红框 + aria-invalid
 *   - iOS Safari / Android Chrome 测试兼容:
 *     -inputmode="numeric" 触发数字键盘
 *     -不使用 fixed height,改用 min-height + padding
 *     -font-size: 16px 防止 iOS zoom
 * ============================================================= */

.payment_method_dppay_direct label {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
}
label[for='payment_method_dppay_direct'] img {
    padding-left: 10px !important;
}

/* ---------- 容器 ----------
 *
 * WC 结账页结构:
 *   label[for=payment_method_dppay_direct]
 *     └── .payment_box    ← payment_fields() 输出在这里
 *           └── #dppay-direct-form.dppay-payment-field-container
 *
 * 原 .payment_box 自身有 padding:我们再加 margin-top 把容器往下推,
 * 容器内 padding 也调舒服点(label + 输入框之间的距离)。
 */
.payment_method_dppay_direct .payment_box {
    padding: 16px;
}

.dppay-payment-field-container {
    margin: 8px 0 0;          /* 与上方 radio label 拉出距离 */
    padding: 18px 20px;       /* 容器内间距 */
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fafafa;
}

.dppay-payment-field-container * {
    box-sizing: border-box;
}

/* ---------- 品牌 logo 横排 ---------- */
.dppay-brand-logos {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 14px;
}

.dppay-brand-logo {
    display: inline-block;
    width: 56px;
    height: 34px;
    line-height: 0;
    padding: 0;
    border-radius: 4px;
    user-select: none;
}

.dppay-brand-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 5 个品牌始终全亮、不变暗、不缩放、不模糊 —— 无任何状态切换 */

/* ---------- 字段 ---------- */
.dppay-payment-form-group {
    margin: 0 0 12px;
    width: 100%;
}

.dppay-payment-form-group label {
    display: block;
    margin-bottom: 6px;
    color: #2c3338;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

.dppay-payment-form-group label .dppay-required {
    color: #b32d2e;
    margin-left: 3px;
}

/* 输入框:固定高度改为 min-height + padding,
   字号 16px 防 iOS zoom,不再用 inline !important */
.dppay-payment-form-control {
    display: block;
    width: 100%;
    min-height: 46px;
    padding: 10px 12px;
    font-size: 16px;          /* iOS: 16px 才不 zoom */
    font-weight: 400;
    line-height: 1.4;
    color: #2c3338;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #8c8f94;
    border-radius: 4px;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    -webkit-appearance: none;
    appearance: none;
}

.dppay-payment-form-control:hover {
    border-color: #2271b1;
}

.dppay-payment-form-control:focus {
    outline: none;
    border-color: #2271b1;
    box-shadow: 0 0 0 1px #2271b1;
}

/* 错误状态:与 WC notice 联动 */
.dppay-payment-form-control.has-error,
.dppay-payment-form-control.has-error:focus {
    border-color: #b32d2e;
    box-shadow: 0 0 0 1px #b32d2e;
    background-color: #fcf0f1;
}

.dppay-payment-form-control[aria-invalid="true"] {
    border-color: #b32d2e;
}

/* ---------- 行内布局:Exp + CVV 一行 ---------- */
.dppay-payment-inline-div {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.dppay-payment-col-6 {
    flex: 1 1 200px;
    min-width: 0;            /* 防止 input 内部 overflow 把 flex 撑爆 */
}

.dppay-payment-col-6 .dppay-payment-form-control {
    min-width: 0;
}

/* CVV 那列:相对定位放小图标 */
.dppay-cvv-wrap {
    position: relative;
}

.dppay-cvv-wrap img {
    position: absolute;
    right: 10px;
    bottom: 12px;
    width: 24px;
    height: auto;
    pointer-events: none;
    opacity: .55;
}

.dppay-cvv-wrap .dppay-cvv-hint {
    display: block;
    margin-top: 4px;
    color: #6c757d;
    font-size: 11px;
    line-height: 1.2;
}

/* ---------- 响应式 ---------- */
@media (max-width: 480px) {
    .dppay-payment-inline-div {
        flex-direction: column;
        gap: 12px;
    }
    .dppay-payment-col-6 {
        flex: 1 1 100%;
    }
    .dppay-payment-field-container {
        padding: 12px 14px;
    }
}

/* ---------- WC 兼容 ---------- */
/* WC 主题会把字段塞在 .form-row 内,我们的 form-control 必须接管宽度 */
.woocommerce-checkout-payment .form-row.dppay-row,
.woocommerce-checkout-payment .form-row.dppay-row input.dppay-payment-form-control {
    width: 100%;
    padding-left: 12px;
    padding-right: 12px;
}

/* 在 storefront / 2021 等主题下,fieldset > p 包裹我们的字段时,
   我们要自己控布局,不被主题 p 上下 margin 撑开 */
.woocommerce-checkout-payment .dppay-payment-field-container p {
    margin: 0;
}

/* =============================================================
 * Dppay Direct — 3DS iframe 弹窗 overflow 修复
 *
 * 问题：layui layer type=2 (iframe) 默认不限制内容区域宽高，
 * 导致侧边/底部溢出或可视区域过小。
 * 解决：固定弹窗内容区大小，iframe 撑满容器，去除所有溢出。
 * 关闭按钮：默认飘在弹窗外（right:-28px），会被 overflow:hidden 裁切。
 *           改用 close1 样式（弹窗内部右上角）。
 * ============================================================= */

/* 弹窗容器：禁止溢出 + 圆角裁切 */
.layui-layer {
    overflow: hidden !important;
}

/* 关闭按钮：改成弹窗内部右上角(默认 close2 在外部会被裁切) */
.layui-layer .layui-layer-setwin .layui-layer-close2 {
    right: -6px !important;
    top: -6px !important;
    width: 16px !important;
    height: 16px !important;
    background-position: 1px -40px !important;
    background-size: auto !important;
}

/* iframe 内容区：填满弹窗内部，无滚动条 */
.layui-layer-iframe .layui-layer-content,
.layui-layer-page .layui-layer-content {
    overflow: hidden !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
}

/* iframe 元素本身：撑满内容区 */
.layui-layer-iframe iframe {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    border: none;
}