/* B27 新增样式 */
.b27_antom_payments_ckp_container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
  background: var(--Background-Secondary, #f9fafb);
  padding: 22px;
}
.b27_antom_payments_ckp_description {
  color: var(---colorText, rgba(4, 15, 36, 0.85));

  /* fontSize/regular */
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px; /* 157.143% */
}
.b27_antom_payments_ckp_text {
  align-self: stretch;
  color: var(---colorTextTertiary, rgba(4, 15, 36, 0.45));

  /* fontSize/regular */
  font-family: Lato;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px; /* 157.143% */
}
.b27_antom_payments_ckp_list {
  display: flex;
  align-items: flex-start;
  align-content: flex-start;
  gap: 16px var(---padding, 16px);
  align-self: stretch;
  flex-wrap: wrap;
  justify-content: start;
}
.b27_antom_payments_ckp_icon {
  display: flex;
  width: 64px;
  height: 64px;
  padding: 7px;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1/1;

  border-radius: var(---Component, 8px);
  border: 0.5px solid var(--Border-Disable, #f5f5f5);
  background: var(--Background-Triary, #fcfcfc);
  box-sizing: border-box;
}
.b27_antom_payments_ckp_title {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: var(---colorText, rgba(4, 15, 36, 0.85));
  font-family: Poppins;
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  line-height: 23px; /* 153.333% */
}
.b27_antom_payments_label_text {
  /* color: var(---colorText, rgba(4, 15, 36, 0.85));
  font-family: Poppins;
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  line-height: 23px; 153.333% */
  width: 100%;
}
.wc-block-components-radio-control-accordion-content:has(
    .b27_antom_payments_ckp_container
  ) {
  padding: 2px;
}
/* CustomLabel 样式*/
.b27_antom_payments_label_wrap {
  display: flex;
  // padding: 8px 0;
  justify-content: space-between;
  align-items: center;
  flex: 1 0 0;
  align-self: stretch;

  ._label_brands {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
    // width: 248px;
  }
}
.b27_antom_payments_label_over {
  display: flex;
  height: 32px;
  width: 32px;
  padding: var(---paddingXXS, 4px) var(---paddingXS, 8px);
  align-items: center;
  justify-content: center;
  gap: var(---marginXXS, 4px);

  border-radius: var(---borderRadiusSM, 6px);
  background: var(---colorFillSecondary, #f0f2f6);
  padding: 4px;
  box-sizing: border-box;

  span {
    color: #000;

    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 133.333% */
  }
}
label:has(div.b27-antom-payments-icon-container) {
  line-height: 2;
}
// 控制显示与隐藏
.b27-antom-payments-icon-container {
  display: inline;
}
/* 当支付方式被选中时显示 */
#payment_method_antom_payments:checked
  ~ label
  .b27-antom-payments-icon-container {
  display: none;
}
// Antom Card
.b27_antom_payments_card_container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;

  .b27_antom_card_form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    align-self: stretch;

    .card_number_input {
      position: relative;
      .card_icon_cover {
        position: absolute;
        right: 12px;
        top: 6px;

        img {
          height: 40px;
        }
      }
    }

    .holder_name,
    .card_number {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
      align-self: stretch;
    }

    .holder_name_label,
    .card_number_label {
      color: var(---colorTextSecondary, rgba(4, 15, 36, 0.65));
      text-align: center;
      font-family: Roboto;
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: 22px; /* 157.143% */
    }
    .holder_name_input,
    .card_number_input {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      align-self: stretch;

      .first_name,
      .last_name,
      .card_number {
        display: flex;
        height: var(--Height-base-52, 52px);
        align-items: center;
        gap: 4px;
        align-self: stretch;
        flex: 1;
        padding: 0 16px;

        border-radius: var(---Component, 8px);
        border: 1px solid var(--Border-Primary, #cfd8e5);
        background: var(--Background-Primary, #fff);
        font-size: 16px;

        &::placeholder {
          color: var(---colorTextQuaternary, rgba(4, 15, 36, 0.25));

          /* body1.regular */
          font-family: Poppins;
          font-size: 16px;
          font-style: normal;
          font-weight: 400;
          line-height: 23px; /* 153.333% */
        }
      }
    }

    .other_code {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      align-self: stretch;

      .expiration_date,
      .security_code {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        flex: 1 0 0;

        .expiration_date_label,
        .security_code_label {
          color: var(---colorTextSecondary, rgba(4, 15, 36, 0.65));
          text-align: center;
          font-family: Roboto;
          font-size: 14px;
          font-style: normal;
          font-weight: 400;
          line-height: 22px; /* 157.143% */
        }

        .expiration_date_input,
        .security_code_input {
          display: flex;
          align-items: flex-start;
          gap: 10px;
          align-self: stretch;

          position: relative;
          .card_icon_cover {
            position: absolute;
            right: 12px;
            top: 8px;

            img {
              width: 40px;
              padding: 7px 0;
            }
          }

          .expire_date,
          .cvc {
            display: flex;
            height: var(--Height-base-52, 52px);
            align-items: center;
            gap: 4px;
            align-self: stretch;
            flex: 1;
            padding: 0 16px;

            border-radius: var(---Component, 8px);
            border: 1px solid var(--Border-Primary, #cfd8e5);
            background: var(--Background-Primary, #fff);
            font-size: 16px;

            &::placeholder {
              color: var(---colorTextQuaternary, rgba(4, 15, 36, 0.25));

              /* body1.regular */
              font-family: Poppins;
              font-size: 16px;
              font-style: normal;
              font-weight: 400;
              line-height: 23px; /* 153.333% */
            }
          }
        }
      }
    }
  }

  .b27_antom_card_tiptxt {
    color: var(---colorTextTertiary, rgba(4, 15, 36, 0.45));

    /* fontSizeSM/regular */
    font-family: Lato;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 133.333% */
    align-self: stretch;
  }
  .b27_antom_card_save_options {
    display: flex;
    align-items: center;
    gap: 4px;
    align-self: stretch;
    .tip_text {
      color: var(---colorTextTertiary, rgba(4, 15, 36, 0.45));

      /* fontSizeSM/regular */
      font-family: Lato;
      font-size: 12px;
      font-style: normal;
      font-weight: 400;
      line-height: 16px; /* 133.333% */
    }

    .b27_antom_card_save_checkbox {
      accent-color: black;
      transform: scale(1.2);
    }
  }
}
/* 旋转加载图标:模仿 WordPress 样式 */
.antom-spinner {
  animation: antom-spin 1.4s linear infinite;
  border: 2.5px solid #ddd;
  border-top-color: #007cba; /* WordPress 蓝色 */
  border-radius: 50%;
  width: 34px;
  height: 34px;
}
@keyframes antom-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.antom-loading-overlay {
  /* 关键：设置过渡动画 */
  opacity: 0;
  visibility: hidden;
  pointer-events: none; /* 防止遮挡点击 */
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}

.antom-loading-overlay.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.antom-loading-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999; /* 确保在最上层 */
}

// Elelement 未加载时默认占位展示的样式
.element-init-error {
  display: flex;
  padding: 24px;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  align-self: stretch;

  background: var(--Background-Secondary, #f9fafb);

  & > .antom-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;

    .antom-empty-action {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: var(--antom-spacing-lg, 24px);

      div {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: var(--antom-spacing-xs, 8px);

        color: var(--antom-color-text-secondary, rgba(4, 15, 36, 0.55));

        /* fontSize/regular */
        font-family: Lato;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 22px; /* 157.143% */
      }

      div.button {
        display: flex;
        padding: 0 var(--antom-spacing-base, 16px);
        justify-content: center;
        align-items: center;

        border-radius: var(--antom-border-radius-sm, 6px);
        border: 1px solid var(--antom-color-border-primary, #cfd8e5);
        background: var(--antom-color-bg-container, #ffffff);
        cursor: pointer;
        user-select: none;

        &:active {
          border-color: #0958d9;
          box-shadow: none;
        }

        & > div {
          display: flex;
          height: 38px;
          justify-content: center;
          align-items: center;

          color: var(--antom-color-text-primary, rgba(4, 15, 36, 0.85));
          text-align: center;

          /* fontSizeLG/Semibold */
          font-family: Lato;
          font-size: 16px;
          font-style: normal;
          font-weight: 600;
          line-height: 24px; /* 150% */
        }
      }
    }
  }
}

.card-info-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
  border-radius: 8px;
  padding: 16px;

  strong {
    display: inline-block;
    color: #1a1a1a;
  }
}

.antom-test-mode-info {
  margin: 0;
}