/**
 * MPayLink - Blocks 结账卡信息表单样式
 * 使用 !important 防御主题/插件的全局样式干扰（输入框溢出、有效期与 CVV 不平分）
 * 选择器全部限定在本组件内，不影响页面其他元素
 */

/* 统一盒模型：宽度计算包含内边距与边框，不依赖主题的全局重置 */
.wc-block-components-payment-method-mpaylink-content,
.wc-block-components-payment-method-mpaylink-content * {
	box-sizing: border-box !important;
}

/* 输入框宽度以父容器为准，禁止主题的固定宽度/最小宽度导致溢出 */
.wc-block-components-payment-method-mpaylink-content input[type="text"],
.wc-block-components-payment-method-mpaylink-content input[type="tel"],
.wc-block-components-payment-method-mpaylink-content input[type="email"] {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
}

/* 卡号输入框：在卡片行内自动填充剩余空间（右侧留出卡组织图标位置） */
.mpaylink-card-number-input {
	flex: 1 1 auto !important;
}

/* 有效期与 CVV 所在行：强制单行 flex 布局 */
.mpaylink-expiry-cvv-row {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 20px !important;
}

/* 有效期与 CVV 两列严格平分剩余宽度 */
.mpaylink-expiry-wrapper,
.mpaylink-cvv-wrapper {
	flex: 1 1 0 !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: 100% !important;
}