@akropolys/kiku 1.2.0 → 1.2.4

package/dist/styles.css

@@ -2478,59 +2478,46 @@
       --hsk-border: #202124;
     }
   }
-  .hsk-cb-payment-prompt {
-    margin: 12px 0;
-    padding: 18px 16px;
-    border-radius: 14px;
-    background: color-mix(in srgb, var(--hsk-primary, #6366f1) 8%, transparent);
-    border: 1px solid color-mix(in srgb, var(--hsk-primary, #6366f1) 25%, transparent);
-    text-align: center;
+  .hsk-cb-phone-form {
     display: flex;
     flex-direction: column;
-    align-items: center;
-    gap: 10px;
-    animation: hsk-fade-in 0.3s ease;
-  }
-  .hsk-cb-payment-icon {
-    font-size: 1.5rem;
+    gap: 8px;
+    margin-top: 8px;
   }
-  .hsk-cb-payment-label {
-    margin: 0;
+  .hsk-cb-phone-label {
     font-size: 0.875rem;
-    color: var(--hsk-text, #1f1f1f);
-    font-weight: 500;
+    color: var(--hsk-text, inherit);
+    margin: 0;
   }
   .hsk-cb-phone-input {
     width: 100%;
-    max-width: 240px;
-    padding: 10px 14px;
-    border: 1px solid color-mix(in srgb, var(--hsk-primary, #6366f1) 35%, transparent);
-    border-radius: 10px;
+    box-sizing: border-box;
+    padding: 8px 12px;
+    border: 1px solid var(--hsk-border, #e4e4e7);
+    border-radius: var(--hsk-radius, 8px);
     background: var(--hsk-bg, #fff);
-    color: var(--hsk-text, #1f1f1f);
+    color: var(--hsk-text, inherit);
     font-size: 0.9rem;
-    text-align: center;
     outline: none;
-    transition: border-color 0.2s;
+    transition: border-color 0.15s;
   }
   .hsk-cb-phone-input:focus {
     border-color: var(--hsk-primary, #6366f1);
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--hsk-primary, #6366f1) 15%, transparent);
   }
-  .hsk-cb-pay-submit {
-    padding: 10px 22px;
-    border-radius: 10px;
-    border: none;
-    background: var(--hsk-primary, #6366f1);
-    color: #fff;
+  .hsk-cb-phone-submit {
+    align-self: flex-start;
+    padding: 8px 16px;
+    border: 1px solid var(--hsk-border, #e4e4e7);
+    border-radius: var(--hsk-radius, 8px);
+    background: var(--hsk-bg, #fff);
+    color: var(--hsk-text, inherit);
     font-size: 0.875rem;
-    font-weight: 600;
+    font-weight: 500;
     cursor: pointer;
-    transition: opacity 0.2s, transform 0.15s;
+    transition: background 0.15s, border-color 0.15s;
   }
-  .hsk-cb-pay-submit:hover {
-    opacity: 0.9;
-    transform: translateY(-1px);
+  .hsk-cb-phone-submit:hover {
+    border-color: var(--hsk-primary, #6366f1);
   }
   .hsk-checkout-backdrop-full {
     position: fixed;
@@ -3630,6 +3617,40 @@
     font-size: 13px;
     line-height: 1;
   }
+  .hsk-cb-payment-prompt {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    padding: 24px;
+    margin: 12px 0;
+    border-radius: 12px;
+    border: 1px solid var(--hsk-chat-divide, rgba(0,0,0,.1));
+    background: var(--hsk-pill-bg, #ffffff);
+    gap: 12px;
+  }
+  .hsk-cb-payment-label {
+    margin: 0;
+    font-size: 1.05rem;
+    font-weight: 600;
+    color: var(--hsk-chat-text, #1f1f1f);
+  }
+  .hsk-cb-pay-submit {
+    padding: 8px 18px;
+    border-radius: 8px;
+    border: none;
+    background: var(--hsk-primary, #ff6a33);
+    color: #ffffff;
+    font-size: 0.85rem;
+    font-weight: 500;
+    cursor: pointer;
+    font-family: inherit;
+    transition: all .15s;
+  }
+  .hsk-cb-pay-submit:hover {
+    background: color-mix(in srgb, var(--hsk-primary, #ff6a33) 85%, #000000);
+  }
   .hsk-cb-payment-prompt--awaiting {
     position: relative;
     overflow: hidden;