@seaverse/payment-sdk 0.6.1 → 0.6.2

package/dist/style.css

@@ -0,0 +1,1482 @@
+@charset "UTF-8";
+
+.payment-method-selector-modern[data-v-6820b9f4] {
+  margin-bottom: 15px;
+  font-family: Inter, sans-serif
+}
+
+.payment-method-selector-modern.is-mobile[data-v-6820b9f4] {
+  margin-bottom: 10px
+}
+
+.back-to[data-v-6820b9f4] {
+  color: #313131;
+  cursor: pointer;
+  margin-bottom: 17px;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px
+}
+
+.back-to .back-icon[data-v-6820b9f4] {
+  flex-shrink: 0
+}
+
+.back-to[data-v-6820b9f4]:hover {
+  opacity: .8
+}
+
+.payment-methods-header[data-v-6820b9f4] {
+  margin-bottom: 7px;
+  flex-shrink: 0
+}
+
+.payment-methods-title[data-v-6820b9f4] {
+  color: #3c3c4366;
+  font: 400 14px/20px Inter, sans-serif;
+  margin: 0
+}
+
+.top-adyen-buttons[data-v-6820b9f4] {
+  margin-bottom: 15px
+}
+
+.top-adyen-buttons .top-adyen-buttons-container[data-v-6820b9f4] {
+  display: flex;
+  gap: 12px;
+  width: 100%
+}
+
+.top-adyen-buttons .top-adyen-buttons-container .top-adyen-button-wrapper[data-v-6820b9f4] {
+  flex: 1;
+  min-width: 0
+}
+
+.top-adyen-buttons .top-adyen-buttons-container .top-adyen-button-wrapper[data-v-6820b9f4]:has(.adyen-top-button-container:empty) {
+  display: none
+}
+
+.top-adyen-buttons .top-adyen-buttons-container .top-adyen-button-wrapper .adyen-top-button-container[data-v-6820b9f4] {
+  min-height: 48px;
+  width: 100%
+}
+
+.top-adyen-buttons .top-adyen-buttons-container .top-adyen-button-wrapper .adyen-top-button-container[data-v-6820b9f4] .adyen-checkout__button,
+.top-adyen-buttons .top-adyen-buttons-container .top-adyen-button-wrapper .adyen-top-button-container[data-v-6820b9f4] .adyen-checkout__applepay__button,
+.top-adyen-buttons .top-adyen-buttons-container .top-adyen-button-wrapper .adyen-top-button-container[data-v-6820b9f4] .adyen-checkout__googlepay__button {
+  width: 100%;
+  min-height: 48px;
+  border-radius: 4px
+}
+
+.top-adyen-buttons .top-adyen-buttons-container .top-adyen-button-wrapper .dynamic-payment-container[data-v-6820b9f4] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  width: 100%;
+  height: 48px;
+  background-color: #00112c;
+  border: 0;
+  border-radius: 4px;
+  color: #fff;
+  cursor: pointer;
+  padding: 15px;
+  box-sizing: border-box;
+  font-size: 16px;
+  font-weight: 500;
+  transition: all .2s ease
+}
+
+.top-adyen-buttons .top-adyen-buttons-container .top-adyen-button-wrapper .dynamic-payment-container .method-icon[data-v-6820b9f4] {
+  height: 24px;
+  width: auto;
+  max-width: 120px;
+  object-fit: contain
+}
+
+.top-adyen-buttons .top-adyen-buttons-container .top-adyen-button-wrapper .dynamic-payment-container[data-v-6820b9f4]:hover {
+  background: #1c3045;
+  box-shadow: 0 0, 0 2px 4px -1px #0003, 0 4px 5px #00000024
+}
+
+.top-adyen-buttons.is-mobile .top-adyen-buttons-container[data-v-6820b9f4] {
+  flex-direction: column;
+  gap: 10px
+}
+
+.top-adyen-buttons.is-mobile .top-adyen-buttons-container .top-adyen-button-wrapper[data-v-6820b9f4] {
+  flex: none;
+  width: 100%
+}
+
+.method-icon[data-v-6820b9f4] {
+  width: 32px;
+  height: 32px;
+  object-fit: contain
+}
+
+.payment-methods-vertical-list[data-v-6820b9f4] {
+  height: auto;
+  overflow: visible
+}
+
+.payment-methods-vertical-list .payment-methods-vertical-list-wrapper[data-v-6820b9f4] {
+  height: auto;
+  width: calc(100% - 2px);
+  display: flex;
+  flex-direction: column;
+  gap: 16px
+}
+
+.payment-methods-vertical-list .loading-container-modern[data-v-6820b9f4] {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  width: calc(100% - 2px)
+}
+
+.payment-methods-vertical-list .loading-accordion[data-v-6820b9f4] {
+  border: 1px solid #e1e5e9;
+  border-radius: 12px;
+  background: #fff;
+  overflow: hidden
+}
+
+.payment-methods-vertical-list .loading-accordion .loading-accordion-header[data-v-6820b9f4] {
+  padding: 16px;
+  height: 60px;
+  display: flex;
+  align-items: center
+}
+
+.payment-methods-vertical-list .loading-accordion .loading-skeleton-modern[data-v-6820b9f4] {
+  width: 100%;
+  height: 28px;
+  background: #f3f5f7;
+  border-radius: 6px;
+  position: relative;
+  overflow: hidden
+}
+
+.payment-methods-vertical-list .loading-accordion .loading-skeleton-modern[data-v-6820b9f4]:after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent);
+  animation: skeleton-loading-modern-6820b9f4 1.5s infinite
+}
+
+@keyframes skeleton-loading-modern-6820b9f4 {
+  0% {
+    left: -100%
+  }
+
+  to {
+    left: 100%
+  }
+}
+
+.accordion-item[data-v-6820b9f4] {
+  border: 1px solid #e1e5e9;
+  border-radius: 12px;
+  background: #fff;
+  overflow: hidden;
+  transition: all .3s ease;
+  position: relative
+}
+
+.accordion-item .accordion-header[data-v-6820b9f4]:before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 16px;
+  transform: translateY(-50%);
+  width: 16px;
+  height: 16px;
+  border: 1px solid #d5d5d5;
+  border-radius: 50%;
+  background: transparent;
+  z-index: 2;
+  transition: all .2s ease;
+  box-sizing: border-box
+}
+
+.accordion-item .accordion-header[data-v-6820b9f4]:after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 20px;
+  transform: translateY(-50%);
+  width: 8px;
+  height: 8px;
+  background: #fff;
+  border-radius: 50%;
+  z-index: 3;
+  opacity: 0;
+  transition: opacity .2s ease
+}
+
+.accordion-item[data-v-6820b9f4]:hover {
+  border-color: #c0c4cc;
+  box-shadow: 0 4px 12px #0000001a
+}
+
+.accordion-item.expanded[data-v-6820b9f4] {
+  background: #f8f8fd99;
+  border-color: #3c3c434a;
+  box-shadow: 0 4px 16px #409eff33
+}
+
+.accordion-item.is-selected[data-v-6820b9f4] {
+  border-color: #3c3c434a;
+  background: #f8f8fd99
+}
+
+.accordion-item.is-selected .accordion-header[data-v-6820b9f4]:hover {
+  background: #f8f8fd33
+}
+
+.accordion-item.is-selected .accordion-header[data-v-6820b9f4]:before {
+  border-color: #0084ff;
+  background: #0084ff
+}
+
+.accordion-item.is-selected .accordion-header[data-v-6820b9f4]:after {
+  opacity: 1
+}
+
+.accordion-header[data-v-6820b9f4] {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 16px;
+  height: 60px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  box-sizing: border-box
+}
+
+.method-info[data-v-6820b9f4] {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-left: 28px
+}
+
+.method-name[data-v-6820b9f4] {
+  font-size: 15px;
+  font-weight: 500;
+  color: #1a1a1a
+}
+
+.accordion-content[data-v-6820b9f4] {
+  overflow: hidden;
+  background: transparent;
+  border-top: none
+}
+
+.content-wrapper[data-v-6820b9f4] {
+  padding: 0 16px 16px
+}
+
+.accordion-content-enter-active[data-v-6820b9f4],
+.accordion-content-leave-active[data-v-6820b9f4] {
+  transition: max-height .3s cubic-bezier(.645, .045, .355, 1), opacity .3s ease
+}
+
+.accordion-content-enter-from[data-v-6820b9f4],
+.accordion-content-leave-to[data-v-6820b9f4] {
+  opacity: 0;
+  max-height: 0
+}
+
+.accordion-content-enter-to[data-v-6820b9f4],
+.accordion-content-leave-from[data-v-6820b9f4] {
+  opacity: 1;
+  max-height: 500px
+}
+
+@media (prefers-reduced-motion: reduce) {
+
+  .accordion-content-enter-active[data-v-6820b9f4],
+  .accordion-content-leave-active[data-v-6820b9f4] {
+    transition: none
+  }
+}
+
+.payment-form-container[data-v-6820b9f4] {
+  min-height: 100px
+}
+
+.payment-form-container[data-v-6820b9f4] .adyen-checkout__threeds2__challenge.adyen-checkout__threeds2__challenge--02 {
+  width: 100%
+}
+
+.payment-form-container[data-v-6820b9f4] .adyen-checkout__threeds2__challenge.adyen-checkout__threeds2__challenge--02 .adyen-checkout__iframe--threeDSIframe {
+  width: 105%
+}
+
+.payermax-submit-wrapper[data-v-6820b9f4] {
+  margin-top: 16px
+}
+
+.payermax-submit-wrapper .payermax-submit-btn[data-v-6820b9f4] {
+  width: 100%;
+  height: 48px;
+  background: #00112c;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  font-size: 16px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all .2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px
+}
+
+.payermax-submit-wrapper .payermax-submit-btn[data-v-6820b9f4]:hover:not(:disabled) {
+  background: #1c3045
+}
+
+.payermax-submit-wrapper .payermax-submit-btn[data-v-6820b9f4]:disabled {
+  opacity: .6;
+  cursor: not-allowed
+}
+
+.payermax-submit-wrapper .payermax-submit-btn .loading-spinner[data-v-6820b9f4] {
+  width: 16px;
+  height: 16px;
+  border: 2px solid rgba(255, 255, 255, .3);
+  border-top-color: #fff;
+  border-radius: 50%;
+  animation: spin-6820b9f4 1s linear infinite
+}
+
+@keyframes spin-6820b9f4 {
+  0% {
+    transform: rotate(0)
+  }
+
+  to {
+    transform: rotate(360deg)
+  }
+}
+
+.svg-icon[data-v-d5aee097] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center
+}
+
+.svg-icon[data-v-d5aee097] svg {
+  width: 100%;
+  height: 100%;
+  fill: currentColor
+}
+
+.state-icon[data-v-2f0ea6cc] {
+  display: flex;
+  justify-content: center;
+  align-items: center
+}
+
+.state-icon .concentric-circles[data-v-2f0ea6cc] {
+  position: relative;
+  width: 120px;
+  height: 120px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: all .3s ease
+}
+
+.state-icon .concentric-circles .circle[data-v-2f0ea6cc] {
+  position: absolute;
+  border-radius: 50%
+}
+
+.state-icon .concentric-circles .circle.circle-outer[data-v-2f0ea6cc] {
+  width: 120px;
+  height: 120px;
+  top: 0;
+  left: 0
+}
+
+.state-icon .concentric-circles .circle.circle-middle[data-v-2f0ea6cc] {
+  width: 96px;
+  height: 96px;
+  top: 12px;
+  left: 12px
+}
+
+.state-icon .concentric-circles .circle.circle-inner[data-v-2f0ea6cc] {
+  width: 84px;
+  height: 84px;
+  top: 18px;
+  left: 18px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 3
+}
+
+.state-icon .concentric-circles .circle.circle-inner .svg-icon[data-v-2f0ea6cc] {
+  width: 40px;
+  height: 40px;
+  color: #fff
+}
+
+.state-icon.theme-green .circle-outer[data-v-2f0ea6cc] {
+  background-color: #3cc65c14
+}
+
+.state-icon.theme-green .circle-middle[data-v-2f0ea6cc] {
+  background-color: #3cc65c1f
+}
+
+.state-icon.theme-green .circle-inner[data-v-2f0ea6cc] {
+  background-color: #3cc65c;
+  box-shadow: 0 4px 20px #3cc65c4d
+}
+
+.state-icon.theme-green .concentric-circles[data-v-2f0ea6cc] {
+  animation: pulse-green-2f0ea6cc 2s infinite ease-in-out
+}
+
+.state-icon.theme-blue .circle-outer[data-v-2f0ea6cc] {
+  background-color: #007aff14
+}
+
+.state-icon.theme-blue .circle-middle[data-v-2f0ea6cc] {
+  background-color: #007aff1f
+}
+
+.state-icon.theme-blue .circle-inner[data-v-2f0ea6cc] {
+  background-color: #007aff;
+  box-shadow: 0 4px 20px #007aff4d
+}
+
+.state-icon.theme-blue .concentric-circles[data-v-2f0ea6cc] {
+  animation: pulse-blue-2f0ea6cc 2s infinite ease-in-out
+}
+
+.state-icon.theme-red .circle-outer[data-v-2f0ea6cc] {
+  background-color: #f55c5c14
+}
+
+.state-icon.theme-red .circle-middle[data-v-2f0ea6cc] {
+  background-color: #f55c5c1f
+}
+
+.state-icon.theme-red .circle-inner[data-v-2f0ea6cc] {
+  background-color: #f55c5c;
+  box-shadow: 0 4px 20px #f55c5c4d
+}
+
+.state-icon.theme-red .concentric-circles[data-v-2f0ea6cc] {
+  animation: shake-2f0ea6cc .5s ease-in-out
+}
+
+.state-icon.theme-gray .circle-outer[data-v-2f0ea6cc] {
+  background-color: #a0aec014
+}
+
+.state-icon.theme-gray .circle-middle[data-v-2f0ea6cc] {
+  background-color: #a0aec01f
+}
+
+.state-icon.theme-gray .circle-inner[data-v-2f0ea6cc] {
+  background-color: #a0aec0;
+  box-shadow: 0 4px 20px #a0aec04d
+}
+
+@keyframes pulse-green-2f0ea6cc {
+
+  0%,
+  to {
+    transform: scale(1)
+  }
+
+  50% {
+    transform: scale(1.05)
+  }
+}
+
+@keyframes pulse-blue-2f0ea6cc {
+
+  0%,
+  to {
+    transform: scale(1)
+  }
+
+  50% {
+    transform: scale(1.05)
+  }
+}
+
+@keyframes shake-2f0ea6cc {
+
+  0%,
+  to {
+    transform: translate(0)
+  }
+
+  25% {
+    transform: translate(-3px)
+  }
+
+  75% {
+    transform: translate(3px)
+  }
+}
+
+@media (max-width: 768px) {
+
+  .state-icon .concentric-circles[data-v-2f0ea6cc],
+  .state-icon .concentric-circles .circle.circle-outer[data-v-2f0ea6cc] {
+    width: 96px;
+    height: 96px
+  }
+
+  .state-icon .concentric-circles .circle.circle-middle[data-v-2f0ea6cc] {
+    width: 76px;
+    height: 76px;
+    top: 10px;
+    left: 10px
+  }
+
+  .state-icon .concentric-circles .circle.circle-inner[data-v-2f0ea6cc] {
+    width: 64px;
+    height: 64px;
+    top: 16px;
+    left: 16px
+  }
+
+  .state-icon .concentric-circles .circle.circle-inner .svg-icon[data-v-2f0ea6cc] {
+    width: 32px;
+    height: 32px
+  }
+}
+
+.payment-intermediate-display[data-v-223d44ca] {
+  text-align: center;
+  min-height: 300px;
+  display: flex;
+  align-items: center;
+  justify-content: center
+}
+
+.payment-intermediate-display .state-container[data-v-223d44ca] {
+  max-width: 500px;
+  width: 100%;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 24px;
+  padding: 30px;
+  background: #fff;
+  border-radius: 12px
+}
+
+.payment-intermediate-display .state-icon-section[data-v-223d44ca] {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 8px
+}
+
+.payment-intermediate-display .state-title-section[data-v-223d44ca] {
+  text-align: center;
+  margin-bottom: 16px;
+  text-wrap: balance
+}
+
+.payment-intermediate-display .state-title-section .title[data-v-223d44ca] {
+  font-size: 24px;
+  font-weight: 600;
+  color: #000000e5;
+  margin: 0 0 8px;
+  line-height: 1.3
+}
+
+.payment-intermediate-display .state-title-section .description[data-v-223d44ca] {
+  font-size: 14px;
+  color: #646464;
+  line-height: 1.5;
+  max-width: 400px;
+  margin: 0 auto
+}
+
+.payment-intermediate-display .state-actions-section[data-v-223d44ca] {
+  width: 100%;
+  max-width: 400px;
+  margin-top: 12px
+}
+
+.payment-intermediate-display .state-actions-section .button-actions[data-v-223d44ca] {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  justify-content: center;
+  width: 100%
+}
+
+.payment-intermediate-display .state-actions-section .button-actions .action-button[data-v-223d44ca] {
+  flex: 1;
+  min-height: 44px;
+  height: 44px;
+  font-weight: 500;
+  border-radius: 6px;
+  font-size: 14px;
+  border-width: 1px;
+  border-style: solid;
+  cursor: pointer;
+  transition: all .3s ease;
+  box-sizing: border-box
+}
+
+.payment-intermediate-display .state-actions-section .button-actions .action-button.left-button[data-v-223d44ca] {
+  background: transparent;
+  color: #1890ff;
+  border-color: #1890ff
+}
+
+.payment-intermediate-display .state-actions-section .button-actions .action-button.left-button[data-v-223d44ca]:hover {
+  background: #1890ff0d;
+  color: #40a9ff;
+  border-color: #40a9ff
+}
+
+.payment-intermediate-display .state-actions-section .button-actions .action-button.left-button[data-v-223d44ca]:active {
+  background: #1890ff1a;
+  color: #096dd9;
+  border-color: #096dd9
+}
+
+.payment-intermediate-display .state-actions-section .button-actions .action-button.right-button[data-v-223d44ca] {
+  background: #1890ff;
+  color: #fff;
+  border-color: #1890ff
+}
+
+.payment-intermediate-display .state-actions-section .button-actions .action-button.right-button[data-v-223d44ca]:hover {
+  background: #40a9ff;
+  border-color: #40a9ff
+}
+
+.payment-intermediate-display .state-actions-section .button-actions .action-button.right-button[data-v-223d44ca]:active {
+  background: #096dd9;
+  border-color: #096dd9
+}
+
+@media (max-width: 860px) {
+  .payment-intermediate-display[data-v-223d44ca] {
+    min-height: auto
+  }
+
+  .payment-intermediate-display .state-container[data-v-223d44ca] {
+    padding: 24px 16px;
+    gap: 20px
+  }
+
+  .payment-intermediate-display .state-title-section[data-v-223d44ca] {
+    margin-bottom: 12px
+  }
+
+  .payment-intermediate-display .state-title-section .title[data-v-223d44ca] {
+    font-size: 20px
+  }
+
+  .payment-intermediate-display .state-title-section .description[data-v-223d44ca] {
+    font-size: 13px
+  }
+
+  .payment-intermediate-display .state-actions-section .button-actions[data-v-223d44ca] {
+    flex-direction: column;
+    gap: 12px
+  }
+
+  .payment-intermediate-display .state-actions-section .button-actions .action-button[data-v-223d44ca] {
+    flex: none;
+    width: 100%;
+    min-height: 44px;
+    height: 44px;
+    font-size: 14px
+  }
+}
+
+@media (max-width: 480px) {
+  .payment-intermediate-display .state-container[data-v-223d44ca] {
+    padding: 20px 12px;
+    gap: 16px
+  }
+
+  .payment-intermediate-display .state-title-section .title[data-v-223d44ca] {
+    font-size: 18px
+  }
+
+  .payment-intermediate-display .state-title-section .description[data-v-223d44ca] {
+    font-size: 12px
+  }
+
+  .payment-intermediate-display .state-actions-section .button-actions[data-v-223d44ca] {
+    gap: 10px
+  }
+
+  .payment-intermediate-display .state-actions-section .button-actions .action-button[data-v-223d44ca] {
+    min-height: 42px;
+    height: 42px;
+    font-size: 13px
+  }
+}
+
+.toast-message[data-v-269d2ae1] {
+  position: fixed;
+  top: 10px;
+  left: 50%;
+  transform: translate(-50%);
+  min-width: 380px;
+  box-sizing: border-box;
+  border-radius: 4px;
+  padding: 15px 15px 15px 20px;
+  display: flex;
+  align-items: center;
+  z-index: 1100
+}
+
+.toast-message .toast-icon[data-v-269d2ae1] {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  margin-right: 10px
+}
+
+.toast-message .toast-text[data-v-269d2ae1] {
+  font-size: 14px;
+  line-height: 1.4
+}
+
+.toast-message.toast-info[data-v-269d2ae1] {
+  border: 1px solid #ebeef5;
+  background-color: #edf2fc
+}
+
+.toast-message.toast-info .toast-icon[data-v-269d2ae1],
+.toast-message.toast-info .toast-text[data-v-269d2ae1] {
+  color: #909399
+}
+
+.toast-message.toast-error[data-v-269d2ae1] {
+  border: 1px solid #fde2e2;
+  background-color: #fef0f0
+}
+
+.toast-message.toast-error .toast-icon[data-v-269d2ae1],
+.toast-message.toast-error .toast-text[data-v-269d2ae1] {
+  color: #f56c6c
+}
+
+.toast-enter-active[data-v-269d2ae1],
+.toast-leave-active[data-v-269d2ae1] {
+  transition: opacity .3s, transform .4s
+}
+
+.toast-enter-from[data-v-269d2ae1],
+.toast-leave-to[data-v-269d2ae1] {
+  opacity: 0;
+  transform: translate(-50%) translateY(-20px)
+}
+
+.toast-enter-to[data-v-269d2ae1],
+.toast-leave-from[data-v-269d2ae1] {
+  opacity: 1;
+  transform: translate(-50%) translateY(0)
+}
+
+@media (max-width: 768px) {
+  .toast-message[data-v-269d2ae1] {
+    min-width: auto;
+    width: calc(100% - 40px);
+    max-width: 380px
+  }
+}
+
+.wait-payment-content[data-v-47837d2d] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto;
+  padding: 30px;
+  min-height: 350px;
+  box-sizing: border-box
+}
+
+.wait-payment-content .wait-payment[data-v-47837d2d] {
+  position: relative;
+  margin: 0 auto;
+  font-weight: 700;
+  font-size: 16px;
+  color: #303133;
+  text-align: center
+}
+
+.wait-payment-content .wait-payment .loading-anime[data-v-47837d2d] {
+  position: absolute;
+  right: 50%;
+  transform: translate(50%);
+  top: -20px
+}
+
+.wait-payment-content .wait-payment .loading-anime .spinner[data-v-47837d2d] {
+  width: 80px;
+  height: 80px;
+  border: 4px solid #e0e0e0;
+  border-top-color: #3271cc;
+  border-radius: 50%;
+  animation: spin-47837d2d 1s linear infinite
+}
+
+.wait-payment-content .wait-payment .wait-icon[data-v-47837d2d] {
+  margin-bottom: 20px
+}
+
+.wait-payment-content .wait-payment .wait-icon img[data-v-47837d2d] {
+  max-width: 250px;
+  max-height: 75px
+}
+
+.wait-payment-content .wait-payment .wait-method[data-v-47837d2d] {
+  font-size: 20px;
+  font-weight: 600;
+  color: #1a1a1a;
+  margin: 30px 0 10px
+}
+
+.wait-payment-content .wait-payment .wait-title[data-v-47837d2d] {
+  font-size: 16px;
+  font-weight: 700;
+  color: #303133;
+  line-height: 28px;
+  margin-bottom: 10px
+}
+
+.wait-payment-content .wait-payment .wait-payment-txt[data-v-47837d2d] {
+  padding: 0 20px;
+  font-weight: 400;
+  font-size: 14px;
+  color: #606266;
+  line-height: 24px;
+  margin-bottom: 20px
+}
+
+.wait-payment-content .wait-payment .btns[data-v-47837d2d] {
+  margin-top: 30px;
+  display: flex;
+  justify-content: center;
+  gap: 16px
+}
+
+.wait-payment-content .wait-payment .btns .btn[data-v-47837d2d] {
+  height: 40px;
+  margin-top: 10px;
+  padding: 0 24px;
+  font-size: 14px;
+  font-weight: 500;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all .3s ease
+}
+
+.wait-payment-content .wait-payment .btns .btn[data-v-47837d2d]:disabled {
+  opacity: .6;
+  cursor: not-allowed
+}
+
+.wait-payment-content .wait-payment .btns .btn-cancel[data-v-47837d2d] {
+  background: #fff;
+  border: 1px solid #dcdfe6;
+  color: #606266
+}
+
+.wait-payment-content .wait-payment .btns .btn-cancel[data-v-47837d2d]:hover:not(:disabled) {
+  border-color: #c0c4cc;
+  color: #303133
+}
+
+.wait-payment-content .wait-payment .btns .btn-done[data-v-47837d2d] {
+  background: linear-gradient(99deg, #3271cc, #0fffff);
+  border: none;
+  color: #fff
+}
+
+.wait-payment-content .wait-payment .btns .btn-done[data-v-47837d2d]:hover:not(:disabled) {
+  opacity: .9
+}
+
+@keyframes spin-47837d2d {
+  to {
+    transform: rotate(360deg)
+  }
+}
+
+@media (max-width: 768px) {
+  .wait-payment-content[data-v-47837d2d] {
+    padding: 20px
+  }
+
+  .wait-payment-content .wait-payment .loading-anime .spinner[data-v-47837d2d] {
+    width: 60px;
+    height: 60px
+  }
+
+  .wait-payment-content .wait-payment .wait-icon img[data-v-47837d2d] {
+    max-width: 180px;
+    max-height: 60px
+  }
+
+  .wait-payment-content .wait-payment .wait-method[data-v-47837d2d] {
+    font-size: 18px
+  }
+
+  .wait-payment-content .wait-payment .wait-title[data-v-47837d2d] {
+    font-size: 14px
+  }
+
+  .wait-payment-content .wait-payment .btns[data-v-47837d2d] {
+    flex-direction: column;
+    gap: 12px
+  }
+
+  .wait-payment-content .wait-payment .btns .btn[data-v-47837d2d] {
+    width: 100%
+  }
+}
+
+.security-notice[data-v-87bd663a] {
+  --figma-user-text: #33383f;
+  --figma-security-text: #606266;
+  width: 100%;
+  margin-top: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 12px
+}
+
+.security-item[data-v-87bd663a] {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px
+}
+
+.security-icon[data-v-87bd663a] {
+  width: 14px;
+  height: 18px;
+  font-size: 14px;
+  color: var(--figma-user-text);
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center
+}
+
+.security-icon .svg-icon[data-v-87bd663a] {
+  width: 20px;
+  height: 20px
+}
+
+.security-item:first-child .security-icon[data-v-87bd663a] {
+  transform: scale(1.3)
+}
+
+.security-text[data-v-87bd663a] {
+  flex: 1;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 18px;
+  color: var(--figma-security-text)
+}
+
+.payment-right-info[data-v-311dc21f] {
+  --figma-text-primary: #33383f;
+  --figma-text-secondary: rgba(51, 56, 63, .6);
+  --figma-security-text: #606266;
+  width: 410px;
+  height: 100%;
+  box-sizing: border-box;
+  border-radius: 0 12px 12px 0;
+  padding: 60px 30px 50px 0;
+  font-family: PingFang SC, Inter, Helvetica Neue, -apple-system, BlinkMacSystemFont, sans-serif;
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+  word-break: break-word
+}
+
+.info-card[data-v-311dc21f] {
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%
+}
+
+.info-item[data-v-311dc21f] {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 10px 12px;
+  box-sizing: border-box;
+  border-bottom: 1px solid rgba(213, 213, 213, .5)
+}
+
+.info-item[data-v-311dc21f]:first-child {
+  padding: 0 12px 10px
+}
+
+.info-label[data-v-311dc21f] {
+  font-family: Inter, sans-serif;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 1.4em;
+  text-transform: uppercase;
+  color: #3c3c4366
+}
+
+.info-value[data-v-311dc21f] {
+  font-family: Inter, sans-serif;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 1.7em;
+  letter-spacing: -1%;
+  color: #6f767e
+}
+
+.one-click-dialog-overlay[data-v-0d9931da] {
+  position: fixed;
+  inset: 0;
+  background: #00000080;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000
+}
+
+.one-click-dialog[data-v-0d9931da] {
+  position: relative;
+  background: #fff;
+  border-radius: 16px;
+  padding: 32px;
+  width: 400px;
+  max-width: 90vw;
+  box-shadow: 0 20px 60px #0003
+}
+
+.dialog-title[data-v-0d9931da] {
+  margin: 0 0 24px;
+  font-size: 20px;
+  font-weight: 600;
+  color: #1a1a1a;
+  text-align: center
+}
+
+.card-info[data-v-0d9931da] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 16px;
+  background: #f8f9fa;
+  border-radius: 12px;
+  margin-bottom: 16px
+}
+
+.card-icon[data-v-0d9931da] {
+  flex-shrink: 0;
+  display: flex
+}
+
+.card-number[data-v-0d9931da] {
+  font-size: 16px;
+  font-weight: 500;
+  color: #333;
+  font-family: SF Mono, Monaco, Consolas, monospace
+}
+
+.dialog-desc[data-v-0d9931da] {
+  margin: 0 0 24px;
+  font-size: 14px;
+  color: #666;
+  text-align: center;
+  line-height: 1.5
+}
+
+.dialog-actions[data-v-0d9931da] {
+  display: flex;
+  gap: 12px
+}
+
+.dialog-actions .btn[data-v-0d9931da] {
+  flex: 1;
+  height: 44px;
+  border-radius: 8px;
+  font-size: 15px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all .2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center
+}
+
+.dialog-actions .btn[data-v-0d9931da]:disabled {
+  opacity: .6;
+  cursor: not-allowed
+}
+
+.dialog-actions .btn-secondary[data-v-0d9931da] {
+  background: #f5f5f5;
+  border: 1px solid #e0e0e0;
+  color: #666
+}
+
+.dialog-actions .btn-secondary[data-v-0d9931da]:hover:not(:disabled) {
+  background: #e8e8e8;
+  color: #333
+}
+
+.dialog-actions .btn-primary[data-v-0d9931da] {
+  background: linear-gradient(99deg, #3271cc, #0fffff);
+  border: none;
+  color: #fff
+}
+
+.dialog-actions .btn-primary[data-v-0d9931da]:hover:not(:disabled) {
+  opacity: .9
+}
+
+.loading-spinner[data-v-0d9931da] {
+  width: 18px;
+  height: 18px;
+  border: 2px solid rgba(255, 255, 255, .3);
+  border-top-color: #fff;
+  border-radius: 50%;
+  animation: spin-0d9931da .8s linear infinite
+}
+
+@keyframes spin-0d9931da {
+  to {
+    transform: rotate(360deg)
+  }
+}
+
+.dialog-fade-enter-active[data-v-0d9931da],
+.dialog-fade-leave-active[data-v-0d9931da] {
+  transition: opacity .3s ease
+}
+
+.dialog-fade-enter-active .one-click-dialog[data-v-0d9931da],
+.dialog-fade-leave-active .one-click-dialog[data-v-0d9931da] {
+  transition: transform .3s ease
+}
+
+.dialog-fade-enter-from[data-v-0d9931da],
+.dialog-fade-leave-to[data-v-0d9931da] {
+  opacity: 0
+}
+
+.dialog-fade-enter-from .one-click-dialog[data-v-0d9931da],
+.dialog-fade-leave-to .one-click-dialog[data-v-0d9931da] {
+  transform: scale(.9)
+}
+
+@media (max-width: 768px) {
+  .one-click-dialog[data-v-0d9931da] {
+    padding: 28px 24px
+  }
+
+  .dialog-actions .btn[data-v-0d9931da] {
+    height: 48px;
+    min-height: 48px
+  }
+}
+
+@media (max-width: 480px) {
+  .one-click-dialog[data-v-0d9931da] {
+    padding: 24px 20px;
+    width: calc(100vw - 32px);
+    max-width: 100%;
+    border-radius: 12px
+  }
+
+  .dialog-title[data-v-0d9931da] {
+    font-size: 18px;
+    margin-bottom: 20px
+  }
+
+  .card-info[data-v-0d9931da] {
+    padding: 14px;
+    margin-bottom: 16px
+  }
+
+  .card-number[data-v-0d9931da] {
+    font-size: 15px
+  }
+
+  .dialog-desc[data-v-0d9931da] {
+    font-size: 13px;
+    margin-bottom: 20px;
+    line-height: 1.6
+  }
+
+  .dialog-actions[data-v-0d9931da] {
+    flex-direction: column;
+    gap: 12px
+  }
+
+  .dialog-actions .btn[data-v-0d9931da] {
+    width: 100%;
+    height: 50px;
+    font-size: 16px;
+    border-radius: 10px;
+    min-height: 50px
+  }
+}
+
+.payment-fullscreen[data-v-7533fc93] {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: PingFang SC, Inter, Helvetica Neue, -apple-system, BlinkMacSystemFont, sans-serif
+}
+
+.payment-fullscreen[data-v-7533fc93]:not(.is-modal) {
+  position: relative;
+  width: 100%;
+  height: auto
+}
+
+.payment-fullscreen:not(.is-modal) .payment-overlay[data-v-7533fc93] {
+  display: none
+}
+
+.payment-fullscreen:not(.is-modal) .payment-modal[data-v-7533fc93] {
+  box-shadow: 0 2px 8px #0000001a;
+  animation: none
+}
+
+.payment-overlay[data-v-7533fc93] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #000000b3
+}
+
+.payment-modal[data-v-7533fc93] {
+  position: relative;
+  width: 970px;
+  max-width: 95vw;
+  max-height: calc(var(--vh, 1vh) * 95);
+  background: #fff;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 25px 50px -12px #00000040;
+  z-index: 1;
+  animation: modal-enter-7533fc93 .3s ease
+}
+
+.payment-modal.no-right[data-v-7533fc93] {
+  width: 530px
+}
+
+.payment-modal.is-mobile[data-v-7533fc93] {
+  width: 94vw;
+  min-width: 88vw;
+  max-width: 94vw;
+  min-height: 400px;
+  max-height: calc(var(--vh, 1vh) * 90);
+  border-radius: 12px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  -webkit-overflow-scrolling: touch;
+  overscroll-behavior: contain
+}
+
+.payment-modal.is-mobile .in-payment-content[data-v-7533fc93] {
+  flex-direction: column
+}
+
+.payment-modal.is-mobile .in-payment-content .left[data-v-7533fc93] {
+  width: 100%;
+  padding: 20px 16px;
+  overflow: visible;
+  max-height: none
+}
+
+.payment-modal.is-mobile .in-payment-content .right[data-v-7533fc93] {
+  display: none
+}
+
+@keyframes modal-enter-7533fc93 {
+  0% {
+    opacity: 0;
+    transform: scale(.95)
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1)
+  }
+}
+
+.close-icon[data-v-7533fc93] {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  width: 32px;
+  height: 32px;
+  z-index: 10;
+  color: #878787;
+  border-radius: 50%;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color .2s
+}
+
+.close-icon[data-v-7533fc93]:hover {
+  background: #0000000d;
+  color: #333
+}
+
+.close-icon svg[data-v-7533fc93] {
+  width: 22px;
+  height: 22px
+}
+
+.in-payment-content[data-v-7533fc93] {
+  display: flex;
+  width: 100%;
+  height: 100%
+}
+
+.left[data-v-7533fc93] {
+  width: 560px;
+  overflow: auto;
+  padding: 20px 30px;
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column
+}
+
+.left[data-v-7533fc93]::-webkit-scrollbar {
+  width: 2px
+}
+
+.left[data-v-7533fc93]::-webkit-scrollbar-thumb {
+  display: none
+}
+
+.left[data-v-7533fc93]::-webkit-scrollbar-track {
+  display: none
+}
+
+.left-security-notice[data-v-7533fc93] {
+  margin-top: auto;
+  padding-top: 20px;
+  padding-right: 15px
+}
+
+.right[data-v-7533fc93] {
+  height: auto;
+  min-height: 500px;
+  width: 440px;
+  box-sizing: border-box;
+  background: transparent;
+  align-content: center;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  padding: 0
+}
+
+/** {*/
+/*  margin: 0;*/
+/*  padding: 0;*/
+/*  box-sizing: border-box*/
+/*}*/
+
+/*html,*/
+/*body {*/
+/*  width: 100%;*/
+/*  height: 100%;*/
+/*  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;*/
+/*  font-size: 14px;*/
+/*  line-height: 1.5;*/
+/*  color: #1a1a1a;*/
+/*  background: transparent;*/
+/*  -webkit-font-smoothing: antialiased;*/
+/*  -moz-osx-font-smoothing: grayscale*/
+/*}*/
+
+#app {
+  width: 100%;
+  height: 100%;
+  background: transparent
+}
+
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px
+}
+
+::-webkit-scrollbar-track {
+  background: transparent
+}
+
+::-webkit-scrollbar-thumb {
+  background: #d0d0d0;
+  border-radius: 3px
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #b0b0b0
+}
+
+::selection {
+  background: #6366f1;
+  color: #fff
+}
+
+/*input:focus,*/
+/*button:focus {*/
+/*  outline: none*/
+/*}*/
+
+/*a {*/
+/*  color: #6366f1;*/
+/*  text-decoration: none*/
+/*}*/
+
+/*a:hover {*/
+/*  text-decoration: underline*/
+/*}*/