/**
 * BytePress Payment Gateway Styles
 */

/* CSS变量定义 */
:root {
  --bytepress-primary-color: #0570de;
  --bytepress-primary-hover: #0b81fa;
  --bytepress-primary-active: #228cfa;
  --bytepress-background: #fff;
  --bytepress-text-color: #30313d;
  --bytepress-text-secondary: #6d6e78;
  --bytepress-text-placeholder: #757680;
  --bytepress-border-color: #e6e6e6;
  --bytepress-border-focus: rgba(5, 115, 225, 0.5);
  --bytepress-error-color: #df1b41;
  --bytepress-success-color: #30b130;
  --bytepress-warning-color: #f6e6b9;
  --bytepress-shadow: 0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(0, 0, 0, 0.02);
  --bytepress-shadow-focus: 0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(0, 0, 0, 0.02), 0 0 0 3px rgba(5, 115, 225, 0.25);
  --bytepress-border-radius: 5px;
  --bytepress-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  --bytepress-font-size: 16px;
  --bytepress-font-size-sm: 14px;
  --bytepress-font-size-xs: 13px;
  --bytepress-spacing-xs: 4px;
  --bytepress-spacing-sm: 8px;
  --bytepress-spacing: 12px;
  --bytepress-spacing-lg: 16px;
  --bytepress-spacing-xl: 24px;
}

/* 基础重置和字体设置 */
.bytepress-payment-form,
.bytepress-payment-form *,
.bytepress-payment-block,
.bytepress-payment-block * {
  box-sizing: border-box;
  font-family: var(--bytepress-font-family);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 主容器 */
.bytepress-payment-form,
.bytepress-payment-block {
  background: var(--bytepress-background);
  border-radius: var(--bytepress-border-radius);
  padding: var(--bytepress-spacing-lg);
  margin: var(--bytepress-spacing) 0;
}

.bytepress-payment-form-block {
  background: transparent;
  border: none;
  padding: 0;
  box-shadow: none;
  margin: 0;
}

/* 块标题 */
.bytepress-block-title {
  margin: 0 0 var(--bytepress-spacing-lg) 0;
  padding: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--bytepress-text-color);
  line-height: 1.3;
}

/* 表单网格布局 */
.bytepress-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bytepress-spacing-lg);
}

/* 卡号字段总是占满一行 */
.bytepress-field-full {
  grid-column: 1 / -1;
}

/* 桌面端：日期和CVV等宽显示在同一行 */
@media (min-width: 768px) {
  .bytepress-form-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--bytepress-spacing-lg);
  }
  
  .bytepress-field-half {
    grid-column: span 1;
  }
}

/* 强制经典模式下 Expiry 与 CVC 同行各占一半（防主题覆盖） */
@media (min-width: 768px) {
  body .woocommerce .payment_method_bytepress .bytepress-form-grid,
  body .wc_payment_methods .payment_method_bytepress .bytepress-form-grid,
  body form.checkout .payment_method_bytepress .bytepress-form-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: var(--bytepress-spacing-lg) !important;
  }

  body .woocommerce .payment_method_bytepress .bytepress-field-half,
  body .wc_payment_methods .payment_method_bytepress .bytepress-field-half,
  body form.checkout .payment_method_bytepress .bytepress-field-half {
    grid-column: span 1 !important;
    width: 100% !important;
  }
}

/* 移动端：所有字段堆叠显示 */
@media (max-width: 767px) {
  .bytepress-form-grid {
    grid-template-columns: 1fr;
  }
  
  .bytepress-field-full,
  .bytepress-field-half {
    grid-column: 1 / -1;
  }
}

/* 字段容器 - 超高特异性 */
body .woocommerce .bytepress-payment-form .bytepress-field,
body .wc_payment_methods .bytepress-payment-form .bytepress-field,
.checkout .bytepress-payment-form .bytepress-field,
.bytepress-payment-form .bytepress-field {
  position: relative !important;
  margin-bottom: 16px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  display: block !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
}

.bytepress-field:last-child {
  margin-bottom: 0;
}

/* 标签样式 */
.bytepress-label {
  display: block;
  margin-bottom: var(--bytepress-spacing-xs);
  font-size: var(--bytepress-font-size-sm);
  font-weight: 500;
  color: var(--bytepress-text-color);
  line-height: 1.3;
}

.bytepress-label .required {
  color: var(--bytepress-error-color);
  margin-left: 2px;
}

/* RTL 布局支持 - 必填星号间距 */
[dir="rtl"] .bytepress-label .required,
html[dir="rtl"] .bytepress-label .required,
body[dir="rtl"] .bytepress-label .required,
.rtl .bytepress-label .required {
  margin-left: 0 !important;
  margin-right: 2px !important;
}

/* 输入框包装器 - 超高特异性 */
body .woocommerce .bytepress-payment-form .bytepress-input-wrapper,
body .wc_payment_methods .bytepress-payment-form .bytepress-input-wrapper,
.checkout .bytepress-payment-form .bytepress-input-wrapper,
.bytepress-payment-form .bytepress-input-wrapper {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  flex-wrap: nowrap !important;
}

/* 输入框基础样式 - 超高特异性防止主题覆盖 */
body .woocommerce .bytepress-payment-form .bytepress-field .bytepress-input,
body .woocommerce .bytepress-payment-form input.bytepress-input,
body .woocommerce input#bytepress-card-number,
body .woocommerce input#bytepress-card-expiry,
body .woocommerce input#bytepress-card-cvc,
body .wc_payment_methods .bytepress-payment-form .bytepress-field .bytepress-input,
body .wc_payment_methods .bytepress-payment-form input.bytepress-input,
body .wc_payment_methods input#bytepress-card-number,
body .wc_payment_methods input#bytepress-card-expiry,
body .wc_payment_methods input#bytepress-card-cvc,
.checkout .bytepress-payment-form .bytepress-field .bytepress-input,
.checkout .bytepress-payment-form input.bytepress-input,
.checkout input#bytepress-card-number,
.checkout input#bytepress-card-expiry,
.checkout input#bytepress-card-cvc {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 12px !important;
  font-size: 16px !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif !important;
  color: #30313d !important;
  background: #fff !important;
  border: 1px solid #e6e6e6 !important;
  border-radius: 5px !important;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(0, 0, 0, 0.02) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
  outline: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  height: auto !important;
  line-height: normal !important;
  flex: 1 !important;
  display: block !important;
  position: relative !important;
}

/* Placeholder 样式 - 防止主题覆盖 */
.bytepress-payment-form input.bytepress-input::placeholder,
input#bytepress-card-number::placeholder,
input#bytepress-card-expiry::placeholder,
input#bytepress-card-cvc::placeholder {
  color: var(--bytepress-text-placeholder) !important;
  opacity: 1 !important;
}

/* Focus状态样式 - 恢复原有设计，防止主题覆盖 */
.bytepress-payment-form .bytepress-field .bytepress-input:focus,
.bytepress-payment-form input.bytepress-input:focus,
input#bytepress-card-number:focus,
input#bytepress-card-expiry:focus,
input#bytepress-card-cvc:focus {
  border-color: rgba(5, 115, 225, 0.5) !important;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(0, 0, 0, 0.02), 0 0 0 3px rgba(5, 115, 225, 0.25) !important;
}

/* 额外的 focus-within 高亮，防止主题覆盖 input:focus */
body .woocommerce .bytepress-payment-form .bytepress-input-wrapper:focus-within .bytepress-input,
body .wc_payment_methods .bytepress-payment-form .bytepress-input-wrapper:focus-within .bytepress-input,
.checkout .bytepress-payment-form .bytepress-input-wrapper:focus-within .bytepress-input,
.bytepress-payment-form .bytepress-input-wrapper:focus-within .bytepress-input,
body .woocommerce .bytepress-payment-form .bytepress-field:focus-within .bytepress-input,
body .wc_payment_methods .bytepress-payment-form .bytepress-field:focus-within .bytepress-input,
.checkout .bytepress-payment-form .bytepress-field:focus-within .bytepress-input,
.bytepress-payment-form .bytepress-field:focus-within .bytepress-input,
body .cfw .bytepress-payment-form .bytepress-field:focus-within .bytepress-input,
body .cfw-payment-method .bytepress-field:focus-within .bytepress-input,
/* 直接针对输入框的焦点样式 */
input#bytepress-card-number:focus,
input#bytepress-card-expiry:focus,
input#bytepress-card-cvc:focus,
body input#bytepress-card-number:focus,
body input#bytepress-card-expiry:focus,
body input#bytepress-card-cvc:focus {
  border-color: rgba(5, 115, 225, 0.5) !important;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(0, 0, 0, 0.02), 0 0 0 3px rgba(5, 115, 225, 0.25) !important;
  outline: none !important;
}

.bytepress-input:disabled {
  background: #f2f2f2;
  color: var(--bytepress-text-placeholder);
  cursor: not-allowed;
}

.bytepress-input.error {
  border-color: var(--bytepress-error-color);
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(0, 0, 0, 0.02), 0 0 0 1px var(--bytepress-error-color);
}

/* 卡号输入框特殊样式 - 为卡片图标预留空间 */
body .woocommerce .bytepress-field-full .bytepress-input,
body .wc_payment_methods .bytepress-field-full .bytepress-input,
.checkout .bytepress-field-full .bytepress-input,
.bytepress-field-full .bytepress-input,
body .woocommerce input#bytepress-card-number,
body .wc_payment_methods input#bytepress-card-number,
.checkout input#bytepress-card-number,
input#bytepress-card-number {
  padding-right: 120px !important; /* 为卡片图标预留空间 */
}

/* RTL 布局支持 - 卡号字段左侧预留图标空间 */
[dir="rtl"] body .woocommerce .bytepress-field-full .bytepress-input,
[dir="rtl"] body .wc_payment_methods .bytepress-field-full .bytepress-input,
[dir="rtl"] .checkout .bytepress-field-full .bytepress-input,
[dir="rtl"] .bytepress-field-full .bytepress-input,
[dir="rtl"] body .woocommerce input#bytepress-card-number,
[dir="rtl"] body .wc_payment_methods input#bytepress-card-number,
[dir="rtl"] .checkout input#bytepress-card-number,
[dir="rtl"] input#bytepress-card-number,
html[dir="rtl"] body .woocommerce .bytepress-field-full .bytepress-input,
html[dir="rtl"] body .wc_payment_methods .bytepress-field-full .bytepress-input,
html[dir="rtl"] .checkout .bytepress-field-full .bytepress-input,
html[dir="rtl"] .bytepress-field-full .bytepress-input,
html[dir="rtl"] body .woocommerce input#bytepress-card-number,
html[dir="rtl"] body .wc_payment_methods input#bytepress-card-number,
html[dir="rtl"] .checkout input#bytepress-card-number,
html[dir="rtl"] input#bytepress-card-number,
body[dir="rtl"] .woocommerce .bytepress-field-full .bytepress-input,
body[dir="rtl"] .wc_payment_methods .bytepress-field-full .bytepress-input,
body[dir="rtl"] .checkout .bytepress-field-full .bytepress-input,
body[dir="rtl"] .bytepress-field-full .bytepress-input,
body[dir="rtl"] .woocommerce input#bytepress-card-number,
body[dir="rtl"] .wc_payment_methods input#bytepress-card-number,
body[dir="rtl"] .checkout input#bytepress-card-number,
body[dir="rtl"] input#bytepress-card-number,
.rtl .bytepress-field-full .bytepress-input,
.rtl input#bytepress-card-number {
  padding-right: 12px !important;
  padding-left: 120px !important;
}

/* Stripe风格卡片图标容器 - 超高特异性 */
body .woocommerce .bytepress-payment-form .FormFieldInput-Icons,
body .wc_payment_methods .bytepress-payment-form .FormFieldInput-Icons,
.checkout .bytepress-payment-form .FormFieldInput-Icons,
.bytepress-payment-form .FormFieldInput-Icons {
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  pointer-events: none !important;
  height: 20px !important;
  min-height: 20px !important;
  max-height: 20px !important;
  width: auto !important;
  z-index: 2 !important;
}

/* RTL 布局支持 - 卡片图标显示在左边 */
[dir="rtl"] body .woocommerce .bytepress-payment-form .FormFieldInput-Icons,
[dir="rtl"] body .wc_payment_methods .bytepress-payment-form .FormFieldInput-Icons,
[dir="rtl"] .checkout .bytepress-payment-form .FormFieldInput-Icons,
[dir="rtl"] .bytepress-payment-form .FormFieldInput-Icons,
html[dir="rtl"] body .woocommerce .bytepress-payment-form .FormFieldInput-Icons,
html[dir="rtl"] body .wc_payment_methods .bytepress-payment-form .FormFieldInput-Icons,
html[dir="rtl"] .checkout .bytepress-payment-form .FormFieldInput-Icons,
html[dir="rtl"] .bytepress-payment-form .FormFieldInput-Icons,
body[dir="rtl"] .woocommerce .bytepress-payment-form .FormFieldInput-Icons,
body[dir="rtl"] .wc_payment_methods .bytepress-payment-form .FormFieldInput-Icons,
body[dir="rtl"] .checkout .bytepress-payment-form .FormFieldInput-Icons,
body[dir="rtl"] .bytepress-payment-form .FormFieldInput-Icons,
.rtl .bytepress-payment-form .FormFieldInput-Icons {
  right: auto !important;
  left: 12px !important;
}

/* 强制隐藏类，避免被主题或本文件的 !important 影响 */
.FormFieldInput-IconsIcon.bytepress-hidden,
.CardFormFieldGroupIconOverflow.bytepress-hidden,
.FormFieldInput-ErrorIcon.bytepress-hidden,
body .woocommerce .bytepress-payment-form .FormFieldInput-IconsIcon.bytepress-hidden,
body .wc_payment_methods .bytepress-payment-form .FormFieldInput-IconsIcon.bytepress-hidden,
.checkout .bytepress-payment-form .FormFieldInput-IconsIcon.bytepress-hidden,
.bytepress-payment-form .FormFieldInput-IconsIcon.bytepress-hidden,
body .woocommerce .bytepress-payment-form .CardFormFieldGroupIconOverflow.bytepress-hidden,
body .wc_payment_methods .bytepress-payment-form .CardFormFieldGroupIconOverflow.bytepress-hidden,
.checkout .bytepress-payment-form .CardFormFieldGroupIconOverflow.bytepress-hidden,
.bytepress-payment-form .CardFormFieldGroupIconOverflow.bytepress-hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Stripe风格图标样式 - 超高特异性 */
body .woocommerce .bytepress-payment-form .FormFieldInput-IconsIcon,
body .wc_payment_methods .bytepress-payment-form .FormFieldInput-IconsIcon,
.checkout .bytepress-payment-form .FormFieldInput-IconsIcon,
.bytepress-payment-form .FormFieldInput-IconsIcon {
  display: flex !important;
  align-items: center !important;
  opacity: 1 !important;
  transition: opacity 0.2s ease !important;
  height: 20px !important;
  width: auto !important;
  max-width: 32px !important;
  min-width: 20px !important;
}

body .woocommerce .bytepress-payment-form .FormFieldInput-IconsIcon.is-visible,
body .wc_payment_methods .bytepress-payment-form .FormFieldInput-IconsIcon.is-visible,
.checkout .bytepress-payment-form .FormFieldInput-IconsIcon.is-visible,
.bytepress-payment-form .FormFieldInput-IconsIcon.is-visible {
  opacity: 1 !important;
}

body .woocommerce .bytepress-payment-form .BrandIcon,
body .wc_payment_methods .bytepress-payment-form .BrandIcon,
.checkout .bytepress-payment-form .BrandIcon,
.bytepress-payment-form .BrandIcon,
.FormFieldInput-Icons .BrandIcon,
.CardFormFieldGroupIconOverflow .BrandIcon {
  height: 20px !important;
  width: auto !important;
  max-width: 32px !important;
  min-width: 20px !important;
  object-fit: contain !important;
  display: block !important;
  border: none !important;
  box-shadow: none !important;
  background: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 轮换图标容器 - 超高特异性 */
body .woocommerce .bytepress-payment-form .CardFormFieldGroupIconOverflow,
body .wc_payment_methods .bytepress-payment-form .CardFormFieldGroupIconOverflow,
.checkout .bytepress-payment-form .CardFormFieldGroupIconOverflow,
.bytepress-payment-form .CardFormFieldGroupIconOverflow {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 20px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  min-height: 20px !important;
  max-height: 20px !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
  border: none !important;
  background: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.CardFormFieldGroupIconOverflow-Item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.CardFormFieldGroupIconOverflow-Item--invisible {
  opacity: 0;
  transform: translateY(2px);
  z-index: 0;
}

.CardFormFieldGroupIconOverflow-Item--visible {
  opacity: 1;
  transform: translateY(0);
  z-index: 1;
}

/* 确保轮换图标内的元素样式一致 */
.CardFormFieldGroupIconOverflow .FormFieldInput-IconsIcon {
  opacity: 1;
}

.CardFormFieldGroupIconOverflow .BrandIcon {
  height: 20px !important;
  width: auto !important;
  max-width: 32px !important;
  min-width: 20px !important;
  object-fit: contain !important;
}

/* Error icon in card icons area */
.FormFieldInput-ErrorIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 16px;
}

.FormFieldInput-ErrorIcon svg {
  width: 12px;
  height: 12px;
}

/* Error state for inputs - only when not focused */
.bytepress-payment-form .bytepress-field .bytepress-input.error:not(:focus),
.bytepress-payment-form input.bytepress-input.error:not(:focus),
input#bytepress-card-number.error:not(:focus),
input#bytepress-card-expiry.error:not(:focus),
input#bytepress-card-cvc.error:not(:focus),
.bytepress-field-error .bytepress-input:not(:focus) {
  border-color: #dc2727 !important;
  box-shadow: 0 0 0 0.1px #dc2727 !important;
  color: #dc2727 !important;
}

/* Error message styles */
.bytepress-error-message {
  display: block;
  margin-top: 8px;
  font-size: var(--bytepress-font-size-sm);
  color: #dc2727;
  line-height: 1.4;
}

/* CVC icon - 与卡号图标保持一致的居中方式 */
body .woocommerce .bytepress-cvc-icon,
body .wc_payment_methods .bytepress-cvc-icon,
.checkout .bytepress-cvc-icon,
.bytepress-cvc-icon {
  position: absolute !important;
  right: var(--bytepress-spacing) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 30px !important;
  height: 20px !important;
  opacity: 0.6 !important;
  pointer-events: none !important;
  --colorIconCardCvc: #6c7581;
}

.bytepress-cvc-icon .p-CardCvcIcons-svg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  vertical-align: middle !important;
}

/* RTL 布局支持 - CVC 图标显示在左边 */
[dir="rtl"] body .woocommerce .bytepress-cvc-icon,
[dir="rtl"] body .wc_payment_methods .bytepress-cvc-icon,
[dir="rtl"] .checkout .bytepress-cvc-icon,
[dir="rtl"] .bytepress-cvc-icon,
html[dir="rtl"] body .woocommerce .bytepress-cvc-icon,
html[dir="rtl"] body .wc_payment_methods .bytepress-cvc-icon,
html[dir="rtl"] .checkout .bytepress-cvc-icon,
html[dir="rtl"] .bytepress-cvc-icon,
body[dir="rtl"] .woocommerce .bytepress-cvc-icon,
body[dir="rtl"] .wc_payment_methods .bytepress-cvc-icon,
body[dir="rtl"] .checkout .bytepress-cvc-icon,
body[dir="rtl"] .bytepress-cvc-icon,
.rtl .bytepress-cvc-icon {
  right: auto !important;
  left: var(--bytepress-spacing) !important;
}

/* Both input fields should have identical styling - no extra padding */

/* 错误消息 - 隐藏顶部和支付方式内的错误提示 */
.bytepress-errors,
#bytepress-card-errors,
.bytepress-error {
  display: none !important;
}

/* 保留输入框下面的错误提示 */
.bytepress-error-message {
  display: block !important;
  margin-top: 8px;
  font-size: var(--bytepress-font-size-sm);
  color: #dc2727;
  line-height: 1.4;
}



/* 加载状态 */
.bytepress-loading {
  position: relative;
  pointer-events: none;
}

.bytepress-loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  border-radius: var(--bytepress-border-radius);
  display: flex;
  align-items: center;
  justify-content: center;
}

.bytepress-loading::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  border: 2px solid var(--bytepress-border-color);
  border-top-color: var(--bytepress-primary-color);
  border-radius: 50%;
  animation: bytepress-spin 1s linear infinite;
  z-index: 1;
}

@keyframes bytepress-spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* 响应式设计 */
@media (max-width: 480px) {
  .bytepress-payment-form,
  .bytepress-payment-block {
    padding: var(--bytepress-spacing);
    margin: var(--bytepress-spacing-sm) 0;
  }
  
  .bytepress-form-grid {
    gap: var(--bytepress-spacing);
  }
  
  .bytepress-input {
    font-size: 16px; /* 防止iOS缩放 */
  }
}

/* 深色模式支持 - 强制保持白色背景 */
@media (prefers-color-scheme: dark) {
  /* 强制信用卡表单保持白色背景和黑色文字 */
  .bytepress-payment-form,
  .bytepress-payment-block {
    background: #fff !important;
    color: #30313d !important;
  }
  
  /* 强制输入框保持白色背景 */
  .bytepress-payment-form .bytepress-field .bytepress-input,
  .bytepress-payment-form input.bytepress-input,
  .checkout input#bytepress-card-number,
  .checkout input#bytepress-card-expiry,
  .checkout input#bytepress-card-cvc {
    background: #fff !important;
    color: #30313d !important;
    border: 1px solid #e6e6e6 !important;
  }
  
  /* 强制标签保持深色文字 */
  .bytepress-payment-form .bytepress-label,
  .bytepress-label {
    color: #30313d !important;
  }
  
  /* 强制placeholder保持原色 */
  .bytepress-payment-form input.bytepress-input::placeholder,
  input#bytepress-card-number::placeholder,
  input#bytepress-card-expiry::placeholder,
  input#bytepress-card-cvc::placeholder {
    color: #757680 !important;
  }
  
  /* 保持图标原有颜色，不进行暗化处理 */
  .bytepress-card-icon svg,
  .bytepress-cvc-icon svg {
    filter: none !important;
  }
}

/* 动画效果 */
.bytepress-field {
  animation: bytepress-fade-in 0.3s ease-out;
}

@keyframes bytepress-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 可访问性改进 */
.bytepress-input:focus-visible {
  outline: 2px solid var(--bytepress-primary-color);
  outline-offset: 2px;
}

/* 高对比度模式支持 */
@media (prefers-contrast: high) {
  .bytepress-input {
    border-width: 2px;
  }
  
  .bytepress-input:focus {
    border-width: 3px;
  }
}

/* Payment method title with card icon and Stripe logo */
.wc_payment_method.payment_method_bytepress label[for="payment_method_bytepress"] {
  position: relative;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 30px !important;
  padding-right: 70px !important;
  box-sizing: border-box !important;
}

/* RTL 布局支持 - 支付方式标签内边距 */
[dir="rtl"] .wc_payment_method.payment_method_bytepress label[for="payment_method_bytepress"],
html[dir="rtl"] .wc_payment_method.payment_method_bytepress label[for="payment_method_bytepress"],
body[dir="rtl"] .wc_payment_method.payment_method_bytepress label[for="payment_method_bytepress"],
.rtl .wc_payment_method.payment_method_bytepress label[for="payment_method_bytepress"] {
  padding-right: 0 !important;
  padding-left: 70px !important;
}

/* Add card icon before the payment method title */
.wc_payment_method.payment_method_bytepress label[for="payment_method_bytepress"]:before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="%23666" fill-rule="evenodd" d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2H0zm0 2v6a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6H0zm3 5a1 1 0 0 1 1-1h1a1 1 0 1 1 0 2H4a1 1 0 0 1-1-1z" clip-rule="evenodd"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  flex-shrink: 0;
}

/* RTL 布局支持 - 卡片图标间距 */
[dir="rtl"] .wc_payment_method.payment_method_bytepress label[for="payment_method_bytepress"]:before,
html[dir="rtl"] .wc_payment_method.payment_method_bytepress label[for="payment_method_bytepress"]:before,
body[dir="rtl"] .wc_payment_method.payment_method_bytepress label[for="payment_method_bytepress"]:before,
.rtl .wc_payment_method.payment_method_bytepress label[for="payment_method_bytepress"]:before {
  margin-right: 0 !important;
  margin-left: 8px !important;
}

.wc_payment_method.payment_method_bytepress label[for="payment_method_bytepress"]:after {
  content: var(--bytepress-stripe-logo-content);
  position: absolute;
  right: 2%;
  top: 50%;
  transform: translateY(-50%);
  width: var(--bytepress-stripe-logo-width, 60px);
  height: var(--bytepress-stripe-logo-height, 25px);
  max-width: 15%;
  background-image: var(--bytepress-stripe-logo-bg, url('data:image/svg+xml;utf8,<svg viewBox="0 0 60 25" xmlns="http://www.w3.org/2000/svg"><path fill="%23666" d="M59.64 14.28h-8.06c.19 1.93 1.6 2.55 3.2 2.55 1.64 0 2.96-.37 4.05-.95v3.32a8.33 8.33 0 0 1-4.56 1.1c-4.01 0-6.83-2.5-6.83-7.48 0-4.19 2.39-7.52 6.3-7.52 3.92 0 5.96 3.28 5.96 7.5 0 .4-.04 1.26-.06 1.48zm-5.92-5.62c-1.03 0-2.17.73-2.17 2.58h4.25c0-1.85-1.07-2.58-2.08-2.58zM40.95 20.3c-1.44 0-2.32-.6-2.9-1.04l-.02 4.63-4.12.87V5.57h3.76l.08 1.02a4.7 4.7 0 0 1 3.23-1.29c2.9 0 5.62 2.6 5.62 7.4 0 5.23-2.7 7.6-5.65 7.6zM40 8.95c-.95 0-1.54.34-1.97.81l.02 6.12c.4.44.98.78 1.95.78 1.52 0 2.54-1.65 2.54-3.87 0-2.15-1.04-3.84-2.54-3.84zM28.24 5.57h4.13v14.44h-4.13V5.57zm0-4.7L32.37 0v3.36l-4.13.88V.88zm-4.32 9.35v9.79H19.8V5.57h3.7l.12 1.22c1-1.77 3.07-1.41 3.62-1.22v3.79c-.52-.17-2.29-.43-3.32.86zm-8.55 4.72c0 2.43 2.6 1.68 3.12 1.46v3.36c-.55.3-1.54.54-2.89.54a4.15 4.15 0 0 1-4.27-4.24l.01-13.17 4.02-.86v3.54h3.14V9.1h-3.13v5.85zm-4.91.7c0 2.97-2.31 4.66-5.73 4.66a11.2 11.2 0 0 1-4.46-.93v-3.93c1.38.75 3.1 1.31 4.46 1.31.92 0 1.53-.24 1.53-1C6.26 13.77 0 14.51 0 9.95 0 7.04 2.28 5.3 5.62 5.3c1.36 0 2.72.2 4.09.75v3.88a9.23 9.23 0 0 0-4.1-1.06c-.86 0-1.44.25-1.44.9 0 1.85 6.29.97 6.29 5.88z" fill-rule="evenodd"/></svg>'));
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: var(--bytepress-stripe-logo-opacity, 0);
  transition: opacity 0.2s ease;
  z-index: 1;
  display: var(--bytepress-stripe-logo-display, none);
}

.wc_payment_method.payment_method_bytepress label[for="payment_method_bytepress"]:hover:after {
  opacity: 0.8;
}

/* RTL 布局支持 - Stripe LOGO 显示在左边 */
[dir="rtl"] .wc_payment_method.payment_method_bytepress label[for="payment_method_bytepress"]:after,
html[dir="rtl"] .wc_payment_method.payment_method_bytepress label[for="payment_method_bytepress"]:after,
body[dir="rtl"] .wc_payment_method.payment_method_bytepress label[for="payment_method_bytepress"]:after,
.rtl .wc_payment_method.payment_method_bytepress label[for="payment_method_bytepress"]:after {
  right: auto !important;
  left: 2% !important;
}

/* Legacy hide class support (kept for backward compatibility) */
.wc_payment_method.payment_method_bytepress.bytepress-hide-logo label[for="payment_method_bytepress"]:after {
  display: none !important;
}

/* Responsive adjustments for different screen sizes */
/* @media (max-width: 600px) {
  .wc_payment_method.payment_method_bytepress label[for="payment_method_bytepress"] {
    padding-right: 50px !important;
  }
  
  .wc_payment_method.payment_method_bytepress label[for="payment_method_bytepress"]:after {
    width: 45px;
    height: 18px;
    right: 3%;
    max-width: 20%;
  }
}

@media (max-width: 400px) {
  .wc_payment_method.payment_method_bytepress label[for="payment_method_bytepress"] {
    padding-right: 40px !important;
  }
  
  .wc_payment_method.payment_method_bytepress label[for="payment_method_bytepress"]:after {
    width: 35px;
    height: 14px;
    right: 2%;
    max-width: 25%;
  }
} */

/* Description styles for classic checkout */
.wc_payment_method.payment_method_bytepress .payment_box p {
  margin: 0 0 20px 0;
  padding: 0;
  font-size: 14px;
  color: #666666;
  line-height: 1.5;
}

/* 主题兼容性修复 - 防止常见主题覆盖 */
.bytepress-payment-form *,
.bytepress-payment-form *:before,
.bytepress-payment-form *:after {
  box-sizing: border-box !important;
}

/* 防止主题对输入框容器的干扰 */
.bytepress-payment-form .bytepress-field,
.bytepress-payment-form .bytepress-input-wrapper {
  display: block !important;
  width: 100% !important;
}

.bytepress-payment-form .bytepress-input-wrapper {
  display: flex !important;
}

/* 防止主题对图标的干扰 */
.FormFieldInput-Icons img,
.CardFormFieldGroupIconOverflow img,
.bytepress-cvc-icon svg {
  vertical-align: middle !important;
  border: none !important;
  box-shadow: none !important;
  background: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 确保表单网格在所有主题中正常工作 */
.bytepress-form-grid .bytepress-field-full,
.bytepress-form-grid .bytepress-field-half {
  margin: 0 !important;
  margin-bottom: var(--bytepress-spacing-lg) !important;
}

/* 额外的主题兼容性修复 - 最高优先级 */
body.woocommerce .woocommerce .bytepress-payment-form,
body.woocommerce-page .woocommerce .bytepress-payment-form,
body .woocommerce-checkout .bytepress-payment-form,
body .checkout .bytepress-payment-form {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 16px !important;
  box-sizing: border-box !important;
}

/* 修复某些主题对输入框的全局样式覆盖 */
body .woocommerce input#bytepress-card-number,
body .woocommerce input#bytepress-card-expiry,
body .woocommerce input#bytepress-card-cvc,
body input#bytepress-card-number,
body input#bytepress-card-expiry,
body input#bytepress-card-cvc {
  font-weight: normal !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  text-decoration: none !important;
  text-align: left !important;
  direction: ltr !important;
}

/* RTL 布局支持 - 输入框文本对齐（数字字段保持 LTR 方向但右对齐） */
[dir="rtl"] body .woocommerce input#bytepress-card-number,
[dir="rtl"] body .woocommerce input#bytepress-card-expiry,
[dir="rtl"] body .woocommerce input#bytepress-card-cvc,
[dir="rtl"] body input#bytepress-card-number,
[dir="rtl"] body input#bytepress-card-expiry,
[dir="rtl"] body input#bytepress-card-cvc,
html[dir="rtl"] body .woocommerce input#bytepress-card-number,
html[dir="rtl"] body .woocommerce input#bytepress-card-expiry,
html[dir="rtl"] body .woocommerce input#bytepress-card-cvc,
html[dir="rtl"] body input#bytepress-card-number,
html[dir="rtl"] body input#bytepress-card-expiry,
html[dir="rtl"] body input#bytepress-card-cvc,
body[dir="rtl"] .woocommerce input#bytepress-card-number,
body[dir="rtl"] .woocommerce input#bytepress-card-expiry,
body[dir="rtl"] .woocommerce input#bytepress-card-cvc,
body[dir="rtl"] input#bytepress-card-number,
body[dir="rtl"] input#bytepress-card-expiry,
body[dir="rtl"] input#bytepress-card-cvc,
.rtl input#bytepress-card-number,
.rtl input#bytepress-card-expiry,
.rtl input#bytepress-card-cvc {
  text-align: right !important;
  direction: ltr !important;
}

/* 修复某些主题的flex布局问题 */
body .woocommerce .bytepress-form-grid,
body .bytepress-form-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 16px !important;
  width: 100% !important;
}

@media (min-width: 768px) {
  body .woocommerce .bytepress-form-grid,
  body .bytepress-form-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  
  body .woocommerce .bytepress-field-full,
  body .bytepress-field-full {
    grid-column: 1 / -1 !important;
  }
}

/* 确保错误状态样式不被覆盖 */
body .woocommerce input#bytepress-card-number.error,
body .woocommerce input#bytepress-card-expiry.error,
body .woocommerce input#bytepress-card-cvc.error,
body input#bytepress-card-number.error,
body input#bytepress-card-expiry.error,
body input#bytepress-card-cvc.error {
  border-color: #dc2727 !important;
  box-shadow: 0 0 0 1px #dc2727 !important;
}

/* 最强力的输入框尺寸修复 - 针对困难主题 */
html body .woocommerce .woocommerce-checkout .bytepress-payment-form input,
html body .woocommerce .wc_payment_methods .bytepress-payment-form input,
html body .woocommerce form.checkout input#bytepress-card-number,
html body .woocommerce form.checkout input#bytepress-card-expiry,
html body .woocommerce form.checkout input#bytepress-card-cvc,
html body form.checkout input#bytepress-card-number,
html body form.checkout input#bytepress-card-expiry,
html body form.checkout input#bytepress-card-cvc,
html body input[name="bytepress_card_number"],
html body input[name="bytepress_card_expiry"],
html body input[name="bytepress_card_cvc"] {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 12px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  display: block !important;
  position: static !important;
  float: none !important;
  clear: none !important;
  overflow: visible !important;
  flex: 1 1 auto !important;
  flex-basis: auto !important;
  flex-grow: 1 !important;
  flex-shrink: 1 !important;
  border: 1px solid #e6e6e6 !important;
  border-radius: 5px !important;
  font-size: 16px !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif !important;
  background: #fff !important;
  color: #30313d !important;
}

/* 针对容器的最强覆盖 */
html body .woocommerce .bytepress-payment-form .bytepress-field,
html body .wc_payment_methods .bytepress-payment-form .bytepress-field,
html body form.checkout .bytepress-payment-form .bytepress-field,
html body .bytepress-payment-form .bytepress-field {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex: 1 !important;
  display: block !important;
  float: none !important;
  position: static !important;
  clear: both !important;
  margin: 0 0 16px 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  transform: none !important;
}

/* 针对包装器的最强覆盖 */
html body .woocommerce .bytepress-payment-form .bytepress-input-wrapper,
html body .wc_payment_methods .bytepress-payment-form .bytepress-input-wrapper,
html body form.checkout .bytepress-payment-form .bytepress-input-wrapper,
html body .bytepress-payment-form .bytepress-input-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  display: flex !important;
  position: relative !important;
  float: none !important;
  clear: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  transform: none !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

/* 特殊处理卡号输入框的图标空间 */
html body .woocommerce input#bytepress-card-number,
html body form.checkout input#bytepress-card-number,
html body input[name="bytepress_card_number"] {
  padding-right: 120px !important;
}

/* RTL 布局支持 - 特殊处理卡号输入框的图标空间 */
[dir="rtl"] html body .woocommerce input#bytepress-card-number,
[dir="rtl"] html body form.checkout input#bytepress-card-number,
[dir="rtl"] html body input[name="bytepress_card_number"],
html[dir="rtl"] body .woocommerce input#bytepress-card-number,
html[dir="rtl"] body form.checkout input#bytepress-card-number,
html[dir="rtl"] body input[name="bytepress_card_number"],
body[dir="rtl"] .woocommerce input#bytepress-card-number,
body[dir="rtl"] form.checkout input#bytepress-card-number,
body[dir="rtl"] input[name="bytepress_card_number"],
.rtl input#bytepress-card-number,
.rtl input[name="bytepress_card_number"] {
  padding-right: 12px !important;
  padding-left: 120px !important;
}

@media (min-width: 768px) {
  body .woocommerce .payment_method_bytepress .bytepress-form-grid,
  body .wc_payment_methods .payment_method_bytepress .bytepress-form-grid,
  body form.checkout .payment_method_bytepress .bytepress-form-grid,
  body .cfw .payment_method_bytepress .bytepress-form-grid,
  body .cfw-payment-method .bytepress-form-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: var(--bytepress-spacing-lg) !important;
  }

  body .woocommerce .payment_method_bytepress .bytepress-field-half,
  body .wc_payment_methods .payment_method_bytepress .bytepress-field-half,
  body form.checkout .payment_method_bytepress .bytepress-field-half,
  body .cfw .payment_method_bytepress .bytepress-field-half,
  body .cfw-payment-method .bytepress-field-half {
    grid-column: span 1 !important;
    width: 100% !important;
  }
}

@media (max-width: 767px) {
  body .woocommerce .payment_method_bytepress .bytepress-form-grid,
  body .wc_payment_methods .payment_method_bytepress .bytepress-form-grid,
  body form.checkout .payment_method_bytepress .bytepress-form-grid,
  body .cfw .payment_method_bytepress .bytepress-form-grid,
  body .cfw-payment-method .bytepress-form-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: var(--bytepress-spacing) !important;
  }

  body .woocommerce .payment_method_bytepress .bytepress-field-full,
  body .wc_payment_methods .payment_method_bytepress .bytepress-field-full,
  body form.checkout .payment_method_bytepress .bytepress-field-full,
  body .cfw .payment_method_bytepress .bytepress-field-full,
  body .cfw-payment-method .bytepress-field-full {
    grid-column: 1 / -1 !important;
  }

  body .woocommerce .payment_method_bytepress .bytepress-field-half,
  body .wc_payment_methods .payment_method_bytepress .bytepress-field-half,
  body form.checkout .payment_method_bytepress .bytepress-field-half,
  body .cfw .payment_method_bytepress .bytepress-field-half,
  body .cfw-payment-method .bytepress-field-half {
    grid-column: span 1 !important;
  }
}

/* 经典模式标题与输入框间距 */
body .woocommerce .payment_method_bytepress .bytepress-payment-form,
body .wc_payment_methods .payment_method_bytepress .bytepress-payment-form,
body form.checkout .payment_method_bytepress .bytepress-payment-form,
body .cfw .payment_method_bytepress .bytepress-payment-form,
body .cfw-payment-method .bytepress-payment-form {
  margin-top: 16px !important;
}

/* 经典模式字段标签与输入框间距 */
body .woocommerce .payment_method_bytepress .bytepress-field .bytepress-label,
body .wc_payment_methods .payment_method_bytepress .bytepress-field .bytepress-label,
body form.checkout .payment_method_bytepress .bytepress-field .bytepress-label,
body .cfw .payment_method_bytepress .bytepress-field .bytepress-label,
body .cfw-payment-method .bytepress-field .bytepress-label {
  margin-bottom: 8px !important;
}

/* CheckoutWC 兼容性 - 移除 accordion radio reveal content 的灰色背景 */
.cfw-accordion .cfw-radio-reveal-content {
  background-color: transparent !important;
  background: transparent !important;
  padding: 0 !important;
}

/* 额外的特异性确保覆盖 CheckoutWC 主题样式 */
body .cfw .cfw-accordion .cfw-radio-reveal-content,
body.checkoutwc .cfw-accordion .cfw-radio-reveal-content {
  background-color: transparent !important;
  background: transparent !important;
  padding: 0 !important;
}

/* 覆盖上面的规则，移除 payment_box 的默认padding */
#payment .payment_methods li .payment_box {
  padding: 5px !important;
}