suioutkit 1.0.1 → 1.0.3

package/src/components/style.css

@@ -1,50 +1,46 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600;14..32,700&display=swap');
 
 :root {
-  /* SPDX-License-Identifier: GPL-3.0
-     Copyright (c) 2026 The3rdWebLabs (https://github.com/the3rdweblabs)
-     Author: @CYBWithFlourish (https://github.com/CYBWithFlourish)
-  */
-  --sok-font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --sok-font: 'Inter', -apple-system, system-ui, sans-serif;
   --sok-bg: #ffffff;
-  --sok-card-bg: rgba(255, 255, 255, 0.9);
-  --sok-text: #1a1b1f;
-  --sok-text-muted: #64748b;
-  --sok-accent: #6366f1;
-  --sok-accent-hover: #4f46e5;
-  --sok-accent-grad: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
-  --sok-border: rgba(0, 0, 0, 0.06);
-  --sok-shadow: 0px 8px 32px rgba(0, 0, 0, 0.12), 0px 2px 8px rgba(0, 0, 0, 0.04);
+  --sok-card-bg: #ffffff;
+  --sok-text: #09090b;
+  --sok-text-muted: #71717a;
+  --sok-accent: #4f6fff;
+  --sok-accent-hover: #3b5de7;
+  --sok-accent-grad: linear-gradient(135deg, #4f6fff, #6c5ce7);
+  --sok-border: #e4e4e7;
+  --sok-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  --sok-radius: 20px;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --sok-bg: #0d0e12;
-    --sok-card-bg: rgba(18, 20, 26, 0.95);
+    --sok-bg: #12141a;
+    --sok-card-bg: #181a22;
     --sok-text: #f3f4f6;
     --sok-text-muted: #9ca3af;
+    --sok-accent: #5b7fff;
+    --sok-accent-hover: #4f6fff;
+    --sok-accent-grad: linear-gradient(135deg, #5b7fff, #7c6df0);
     --sok-border: rgba(255, 255, 255, 0.08);
-    --sok-shadow: 0px 16px 48px rgba(0, 0, 0, 0.4), 0px 2px 12px rgba(0, 0, 0, 0.2);
+    --sok-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
   }
 }
 
 .suioutkit-overlay {
   position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.4);
-  backdrop-filter: blur(8px);
-  -webkit-backdrop-filter: blur(8px);
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 12px;
-  overflow-y: auto;
+  padding: 16px;
   z-index: 99999;
   opacity: 0;
-  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+  transition: opacity 0.25s ease;
   font-family: var(--sok-font);
 }
 
@@ -56,14 +52,16 @@
   background: var(--sok-card-bg);
   border: 1px solid var(--sok-border);
   box-shadow: var(--sok-shadow);
-  border-radius: 24px;
-  width: 100%;
-  max-width: 420px;
+  border-radius: var(--sok-radius);
+  width: 400px;
+  min-height: 440px;
   padding: 24px;
   position: relative;
-  transform: translateY(20px) scale(0.95);
-  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+  transform: translateY(12px) scale(0.98);
+  transition: transform 0.25s ease;
   box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
 }
 
 .suioutkit-overlay.active .suioutkit-card {
@@ -72,9 +70,9 @@
 
 .suioutkit-close {
   position: absolute;
-  top: 20px;
-  right: 20px;
-  background: rgba(120, 120, 120, 0.1);
+  top: 16px;
+  right: 16px;
+  background: transparent;
   border: none;
   width: 28px;
   height: 28px;
@@ -83,27 +81,26 @@
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  color: var(--sok-text);
+  color: var(--sok-text-muted);
   font-size: 16px;
-  font-weight: 500;
-  transition: background 0.2s ease, transform 0.2s ease;
+  transition: background 0.2s ease, color 0.2s ease;
 }
 
 .suioutkit-close:hover {
-  background: rgba(120, 120, 120, 0.2);
-  transform: rotate(90deg);
+  background: rgba(120, 120, 120, 0.1);
+  color: var(--sok-text);
 }
 
 .suioutkit-header {
-  margin-bottom: 24px;
   text-align: center;
+  margin-bottom: 20px;
 }
 
 .suioutkit-title {
-  font-size: 20px;
+  font-size: 18px;
   font-weight: 700;
   color: var(--sok-text);
-  margin: 0 0 6px 0;
+  margin: 0 0 4px;
   letter-spacing: -0.02em;
 }
 
@@ -113,10 +110,17 @@
   margin: 0;
 }
 
+#sok-content-panel {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
 .suioutkit-body {
+  flex: 1;
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 10px;
 }
 
 .suioutkit-content {
@@ -127,12 +131,11 @@
   display: none;
 }
 
-/* Option Buttons */
 .suioutkit-option {
   background: transparent;
-  border: 1px solid transparent;
+  border: 1px solid var(--sok-border);
   border-radius: 12px;
-  padding: 8px 16px;
+  padding: 10px 14px;
   display: block;
   width: 100%;
   cursor: pointer;
@@ -141,50 +144,37 @@
 }
 
 .suioutkit-option:hover {
-  background: rgba(0, 0, 0, 0.04);
-  transform: scale(0.98);
-}
-
-@media (prefers-color-scheme: dark) {
-  .suioutkit-option {
-    background: transparent;
-  }
-
-  .suioutkit-option:hover {
-    background: rgba(255, 255, 255, 0.05);
-  }
+  background: rgba(120, 120, 120, 0.05);
+  border-color: var(--sok-accent);
 }
 
 .suioutkit-option-content {
   display: flex;
   align-items: center;
-  gap: 16px;
+  gap: 14px;
 }
 
 .suioutkit-option-img {
-  width: 36px;
-  height: 36px;
+  width: 34px;
+  height: 34px;
   border-radius: 8px;
   object-fit: contain;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
   background: white;
-  /* Ensure white background for logos */
   padding: 2px;
 }
 
 .suioutkit-option-name {
-  font-size: 16px;
-  font-weight: 700;
+  font-size: 15px;
+  font-weight: 600;
   color: var(--sok-text);
 }
 
-/* Charge & Details Panel */
 .suioutkit-panel {
+  flex: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
-  padding: 8px 0;
   width: 100%;
 }
 
@@ -196,42 +186,40 @@
   font-size: 13px;
   font-weight: 600;
   cursor: pointer;
-  padding: 0 0 16px 0;
+  padding: 0 0 12px;
   display: flex;
   align-items: center;
   gap: 4px;
 }
 
 .suioutkit-back:hover {
-  text-decoration: underline;
+  opacity: 0.8;
 }
 
 .suioutkit-amount-box {
-  margin-bottom: 20px;
+  margin-bottom: 16px;
 }
 
 .sok-fiat-amt {
-  font-size: 32px;
+  font-size: 28px;
   font-weight: 800;
   color: var(--sok-text);
   letter-spacing: -0.03em;
 }
 
-/* Virtual Account Info Card */
 .sok-va-card {
-  background: rgba(120, 120, 120, 0.05);
+  background: rgba(120, 120, 120, 0.04);
   border: 1px solid var(--sok-border);
-  border-radius: 20px;
+  border-radius: 14px;
   width: 100%;
-  padding: 20px;
+  padding: 16px;
   box-sizing: border-box;
   text-align: left;
-  margin-bottom: 16px;
-  position: relative;
+  margin-bottom: 12px;
 }
 
 .sok-va-row {
-  margin-bottom: 12px;
+  margin-bottom: 10px;
 }
 
 .sok-va-row:last-child {
@@ -247,10 +235,10 @@
 }
 
 .sok-va-val {
-  font-size: 18px;
+  font-size: 16px;
   font-weight: 700;
   color: var(--sok-text);
-  margin-top: 4px;
+  margin-top: 3px;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -260,12 +248,12 @@
   background: var(--sok-accent);
   color: white;
   border: none;
-  border-radius: 8px;
-  padding: 4px 8px;
+  border-radius: 6px;
+  padding: 4px 10px;
   font-size: 11px;
   font-weight: 600;
   cursor: pointer;
-  transition: opacity 0.2s ease;
+  transition: opacity 0.2s;
 }
 
 .sok-copy-btn:hover {
@@ -274,8 +262,8 @@
 
 .sok-copied-alert {
   position: absolute;
-  top: 10px;
-  right: 10px;
+  top: 8px;
+  right: 8px;
   background: #10b981;
   color: white;
   font-size: 11px;
@@ -283,7 +271,7 @@
   padding: 4px 8px;
   border-radius: 6px;
   opacity: 0;
-  transform: translateY(-5px);
+  transform: translateY(-4px);
   transition: all 0.2s ease;
 }
 
@@ -292,32 +280,25 @@
   transform: translateY(0);
 }
 
-/* Spinner Loader */
 .sok-spinner {
-  width: 32px;
-  height: 32px;
+  width: 28px;
+  height: 28px;
   border: 3px solid rgba(120, 120, 120, 0.1);
   border-radius: 50%;
   border-top-color: var(--sok-accent);
   animation: sok-spin 0.8s linear infinite;
-  margin: 8px auto 12px;
-}
-
-.sok-spinner.sok-spinner-compact {
-  margin: 0 auto 8px;
+  margin: 8px auto 10px;
 }
 
 @keyframes sok-spin {
-  to {
-    transform: rotate(360deg);
-  }
+  to { transform: rotate(360deg); }
 }
 
 .sok-status-text {
   font-size: 13px;
   font-weight: 500;
   color: var(--sok-text-muted);
-  margin-top: 0;
+  margin: 0;
 }
 
 .payment-status-ui {
@@ -332,56 +313,32 @@
   text-align: center;
 }
 
-@media (max-width: 560px) {
-  .suioutkit-card {
-    max-width: none;
-    padding: 20px 16px;
-    border-radius: 20px;
-  }
-
-  .suioutkit-overlay {
-    padding: 8px;
-  }
-
-  .suioutkit-title {
-    font-size: 18px;
-  }
-
-  .suioutkit-option-content {
-    gap: 12px;
-  }
-}
-
-/* Successful Settlement View */
 .sok-success-icon {
-  font-size: 48px;
-  color: #10b981;
-  margin-bottom: 12px;
+  margin-bottom: 10px;
 }
 
 .sok-success-title {
   font-size: 20px;
   font-weight: 700;
   color: var(--sok-text);
-  margin-bottom: 6px;
+  margin-bottom: 4px;
 }
 
 .sok-success-desc {
   font-size: 13px;
   color: var(--sok-text-muted);
-  margin-bottom: 20px;
+  margin-bottom: 16px;
 }
 
 .sok-success-details {
-  background: rgba(16, 185, 129, 0.05);
-  border: 1px solid rgba(16, 185, 129, 0.2);
-  border-radius: 16px;
-  padding: 16px;
+  background: rgba(79, 111, 255, 0.04);
+  border: 1px solid rgba(79, 111, 255, 0.15);
+  border-radius: 14px;
+  padding: 14px;
   width: 100%;
   box-sizing: border-box;
   text-align: left;
   font-size: 12px;
-  color: var(--sok-text);
 }
 
 .sok-receipt-row {
@@ -401,6 +358,7 @@
 
 .sok-receipt-val {
   font-weight: 600;
+  color: var(--sok-text);
   max-width: 180px;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -416,49 +374,22 @@
   text-decoration: underline;
 }
 
-/* Form Fields for OPay / Wallet */
-.sok-form {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  margin-bottom: 16px;
-}
-
-.sok-input {
-  background: rgba(120, 120, 120, 0.05);
-  border: 1px solid var(--sok-border);
-  border-radius: 12px;
-  padding: 12px 16px;
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--sok-text);
-  outline: none;
-  box-sizing: border-box;
-  width: 100%;
-  transition: border-color 0.2s ease;
-}
-
-.sok-input:focus {
-  border-color: var(--sok-accent);
-}
-
 .sok-btn {
   background: var(--sok-accent-grad);
   color: white;
   border: none;
   border-radius: 12px;
-  padding: 14px 16px;
+  padding: 12px 16px;
   font-size: 14px;
   font-weight: 600;
   cursor: pointer;
   width: 100%;
-  box-shadow: 0px 4px 12px rgba(99, 102, 241, 0.2);
-  transition: opacity 0.2s ease;
+  box-shadow: 0 4px 14px rgba(79, 111, 255, 0.25);
+  transition: opacity 0.2s;
 }
 
 .sok-btn:hover {
-  opacity: 0.95;
+  opacity: 0.92;
 }
 
 .sok-btn:disabled {
@@ -467,60 +398,68 @@
   box-shadow: none;
 }
 
-/* outPay QR Code specifications */
+.sok-btn-green {
+  background: linear-gradient(135deg, #10b981 0%, #047857 100%);
+  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.25);
+}
+
+.sok-btn-blue {
+  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
+  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.25);
+}
+
+.sok-btn-indigo {
+  background: linear-gradient(135deg, #6366f1 0%, #4338ca 100%);
+  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.25);
+}
+
 .sok-qr-card {
   background: var(--sok-bg);
   border: 1px solid var(--sok-border);
-  border-radius: 20px;
-  padding: 20px;
+  border-radius: 14px;
+  padding: 16px;
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin-bottom: 16px;
-  box-shadow: inset 0px 2px 8px rgba(0, 0, 0, 0.05);
-  position: relative;
+  margin-bottom: 12px;
   box-sizing: border-box;
   width: 100%;
 }
 
 .sok-qr-frame {
   background: #ffffff;
-  /* Pure white background ensures perfect scanning visibility */
-  padding: 12px;
-  border-radius: 16px;
-  box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.06);
+  padding: 10px;
+  border-radius: 14px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
   position: relative;
   overflow: hidden;
-  margin-bottom: 12px;
-  width: 204px;
-  height: 204px;
+  margin-bottom: 10px;
+  width: 180px;
+  height: 180px;
   box-sizing: border-box;
 }
 
 .sok-qr-img {
-  width: 180px;
-  height: 180px;
+  width: 160px;
+  height: 160px;
   display: block;
 }
 
-/* outPay overlay logo badge centered on the QR code */
 .sok-qr-logo-badge {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  width: 36px;
-  height: 36px;
+  width: 32px;
+  height: 32px;
   background: var(--sok-accent-grad);
-  border-radius: 10px;
+  border-radius: 8px;
   border: 3px solid #ffffff;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 16px;
-  color: white;
-  font-weight: 800;
-  box-shadow: 0px 4px 12px rgba(99, 102, 241, 0.3);
+  overflow: hidden;
+  box-shadow: 0 4px 12px rgba(79, 111, 255, 0.3);
 }
 
 .sok-qr-scan-pulse {
@@ -528,78 +467,89 @@
   top: 0;
   left: 0;
   width: 100%;
-  height: 3px;
-  background: linear-gradient(90deg, rgba(99, 102, 241, 0) 0%, rgba(99, 102, 241, 1) 50%, rgba(99, 102, 241, 0) 100%);
+  height: 2px;
+  background: linear-gradient(90deg, transparent, var(--sok-accent), transparent);
   animation: sok-qr-scan 2.5s ease-in-out infinite;
 }
 
 @keyframes sok-qr-scan {
-  0% {
-    top: 0%;
-  }
-
-  50% {
-    top: 100%;
-  }
-
-  100% {
-    top: 0%;
-  }
+  0% { top: 0; }
+  50% { top: 100%; }
+  100% { top: 0; }
 }
 
-/* Wallet List Container */
 .suioutkit-wallet-list {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
   width: 100%;
-  max-height: 400px;
-  overflow-y: auto;
-  padding: 0;
 }
 
-/* Wallet Card */
 .sok-wallet-card {
-  background: rgba(120, 120, 120, 0.05);
+  background: var(--sok-card-bg);
   border: 1px solid var(--sok-border);
-  border-radius: 16px;
-  padding: 16px;
+  border-radius: 14px;
+  padding: 14px;
   display: flex;
   align-items: center;
-  gap: 16px;
+  gap: 14px;
   cursor: pointer;
-  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+  transition: all 0.2s ease;
   text-align: left;
+  width: 100%;
+  color: var(--sok-text);
 }
 
-.sok-wallet-card:hover:not([style*="pointer-events: none"]) {
-  background: rgba(120, 120, 120, 0.08);
+.sok-wallet-card:hover {
+  background: rgba(120, 120, 120, 0.06);
   border-color: var(--sok-accent);
-  transform: translateY(-2px);
-  box-shadow: 0px 4px 12px rgba(99, 102, 241, 0.1);
 }
 
 .sok-wallet-icon {
-  width: 48px;
-  height: 48px;
-  border-radius: 8px;
+  width: 44px;
+  height: 44px;
+  border-radius: 12px;
   object-fit: contain;
   flex-shrink: 0;
+  background: rgba(120, 120, 120, 0.08);
+  padding: 4px;
+}
+
+.sok-wallet-info {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  flex: 1;
+  min-width: 0;
 }
 
 .sok-wallet-name {
   font-size: 15px;
-  font-weight: 600;
+  font-weight: 700;
   color: var(--sok-text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.sok-wallet-desc {
+  font-size: 12px;
+  opacity: 0.74;
+  color: var(--sok-text-muted);
+}
+
+.sok-wallet-connect {
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--sok-accent);
 }
 
-/* Horizontal Progress Stepper */
 .stepper {
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 12px;
-  margin: 18px 0 12px;
+  gap: 10px;
+  margin: 14px 0 10px;
 }
 
 .step {
@@ -610,8 +560,8 @@
 }
 
 .circle {
-  width: 32px;
-  height: 32px;
+  width: 28px;
+  height: 28px;
   border-radius: 50%;
   background: var(--sok-bg);
   border: 2px solid var(--sok-border);
@@ -619,6 +569,7 @@
   align-items: center;
   justify-content: center;
   font-weight: 600;
+  font-size: 12px;
   color: var(--sok-text);
 }
 
@@ -629,19 +580,18 @@
 }
 
 .label {
-  margin-top: 6px;
-  font-size: 13px;
+  margin-top: 4px;
+  font-size: 12px;
   color: var(--sok-text-muted);
   text-align: center;
-  min-width: 60px;
+  min-width: 50px;
 }
 
 .line {
   position: absolute;
-  top: 16px;
-  /* align with circle center */
+  top: 14px;
   left: 100%;
-  width: 40px;
+  width: 34px;
   height: 2px;
   background: var(--sok-border);
 }
@@ -654,98 +604,112 @@
   display: none;
 }
 
-@media (max-width: 560px) {
-  .suioutkit-overlay {
-    align-items: flex-start;
-  }
+.sok-form {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  align-items: center;
+}
 
-  .suioutkit-card {
-    width: min(100%, calc(100vw - 16px));
-    padding: 18px;
-    border-radius: 20px;
-    max-height: calc(100vh - 16px);
-  }
+.sok-input {
+  background: var(--sok-bg);
+  border: 1px solid var(--sok-border);
+  border-radius: 12px;
+  padding: 12px 14px;
+  font-size: 15px;
+  font-weight: 500;
+  color: var(--sok-text);
+  width: 100%;
+  box-sizing: border-box;
+  outline: none;
+  transition: border-color 0.2s ease;
+}
 
-  .suioutkit-summary,
-  .suioutkit-method-grid {
-    grid-template-columns: 1fr;
-  }
+.sok-input:focus {
+  border-color: var(--sok-accent);
+}
 
-  .suioutkit-option {
-    padding: 12px;
-  }
+.sok-input::placeholder {
+  color: var(--sok-text-muted);
+  opacity: 0.6;
+}
 
-  .suioutkit-header {
-    margin-bottom: 18px;
-  }
+.sok-icon-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 16px;
+}
 
-  .sok-fiat-amt {
-    font-size: 28px;
-  }
+.sok-text-green {
+  color: #10b981;
+}
 
-  .sok-spinner {
-    margin-top: 4px;
-  }
+.sok-text-red {
+  color: #ef4444;
+}
 
-  .sok-va-card,
-  .sok-qr-card,
-  .sok-success-details {
-    padding: 16px;
-  }
+.sok-text-amber {
+  color: #f59e0b;
+}
 
-  .sok-va-val,
-  .sok-receipt-row {
-    flex-wrap: wrap;
-    gap: 8px;
-  }
+.sok-text-sm {
+  font-size: 12px;
+}
 
-  .sok-receipt-val {
-    max-width: 100%;
-    white-space: normal;
-    word-break: break-word;
-  }
+.sok-op-75 {
+  opacity: 0.75;
+}
 
-  .sok-qr-frame {
-    width: min(100%, 204px);
-    height: auto;
-    aspect-ratio: 1 / 1;
-  }
+.sok-mt-16 {
+  margin-top: 16px;
+}
 
-  .sok-qr-img {
-    width: 100%;
-    height: 100%;
+.sok-mt-12 {
+  margin-top: 12px;
+}
+
+.sok-mb-12 {
+  margin-bottom: 12px;
+}
+
+.sok-mb-20 {
+  margin-bottom: 20px;
+}
+
+@media (max-width: 480px) {
+  .suioutkit-overlay {
+    padding: 8px;
+    align-items: flex-start;
+    padding-top: 32px;
   }
 
-  .stepper {
-    flex-direction: column;
-    align-items: stretch;
-    gap: 10px;
-    margin: 18px 0 8px;
+  .suioutkit-card {
+    width: calc(100vw - 16px);
+    min-height: auto;
+    padding: 20px 16px;
+    border-radius: 16px;
   }
 
-  .step {
-    flex-direction: row;
-    align-items: center;
-    gap: 10px;
-    width: 100%;
+  .suioutkit-title {
+    font-size: 16px;
   }
 
-  .circle {
-    flex-shrink: 0;
+  .sok-fiat-amt {
+    font-size: 24px;
   }
 
-  .label {
-    margin-top: 0;
-    text-align: left;
-    min-width: 0;
-    flex: 1;
+  .sok-qr-frame {
+    width: 160px;
+    height: 160px;
   }
 
-  .line {
-    display: none;
+  .sok-qr-img {
+    width: 140px;
+    height: 140px;
   }
 
-  .payment-status-copy {
-    font-size: 12px;
+  .sok-success-details {
+    padding: 12px;
   }
-}
+}