payment beginning (stripe)

2026-09-09 19:16:20 +03:00
parent 46b3f29674
commit 2cac70c53a
12 changed files with 806 additions and 12 deletions
@@ -661,3 +661,140 @@ .bbk-checkout-summary-heading {
 /* Already on the checkout page — the drawer's own "go to checkout" CTA has
   nowhere further to send you from here. */
 .bbk-checkout-summary .bbk-cart-checkout { display: none; }
+
+/* ── Payment ───────────────────────────────────────────────────────── */
+
+.bbk-checkout-payment-options {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+
+.bbk-checkout-payment-option {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.875rem 1rem;
+    border: 1px solid var(--bbk-color-border);
+    border-radius: var(--bbk-radius-sm);
+    cursor: pointer;
+    transition: border-color 0.15s ease;
+}
+
+.bbk-checkout-payment-option:has(input:checked) { border-color: var(--bbk-color-accent); }
+
+.bbk-checkout-payment-option-name { font-weight: 600; }
+
+.bbk-payment-element { margin: 0.25rem 0; }
+
+.bbk-checkout-withdrawal {
+    margin: 0;
+    font-size: 0.8125rem;
+    color: var(--bbk-color-muted);
+}
+
+.bbk-checkout-withdrawal a { color: inherit; }
+
+.bbk-checkout-error {
+    margin: 0;
+    font-size: 0.875rem;
+    color: var(--bbk-color-danger);
+}
+
+/* Processing overlay — fixed, covers the page while a payment confirms. */
+.bbk-checkout-processing {
+    position: fixed;
+    inset: 0;
+    z-index: 1100;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem;
+    background: color-mix(in srgb, var(--bbk-color-bg) 92%, transparent);
+    text-align: center;
+    padding: 1.5rem;
+}
+
+.bbk-spinner {
+    width: 2rem;
+    height: 2rem;
+    border: 3px solid var(--bbk-color-border);
+    border-top-color: var(--bbk-color-accent);
+    border-radius: 50%;
+    animation: bbk-spin 0.8s linear infinite;
+}
+
+@keyframes bbk-spin {
+    to { transform: rotate(360deg); }
+}
+
+/* ── Confirmation page ─────────────────────────────────────────────── */
+
+.bbk-confirmation {
+    max-width: 720px;
+    margin: 0 auto;
+    padding: 3rem 1.5rem 5rem;
+    font-family: var(--bbk-font);
+    color: var(--bbk-color-text);
+}
+
+.bbk-confirmation-heading {
+    margin: 0 0 1rem;
+    font-size: 1.75rem;
+    font-weight: 700;
+}
+
+.bbk-confirmation-ref { margin: 0 0 0.25rem; }
+
+.bbk-confirmation-body {
+    margin: 2rem 0;
+    display: grid;
+    gap: 2.5rem;
+}
+
+@media (min-width: 640px) {
+    .bbk-confirmation-body { grid-template-columns: 1fr 1fr; }
+}
+
+.bbk-confirmation-lines {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+
+.bbk-confirmation-line {
+    display: flex;
+    justify-content: space-between;
+    gap: 1rem;
+}
+
+.bbk-confirmation-line-qty { color: var(--bbk-color-muted); }
+
+.bbk-confirmation-lines .bbk-cart-summary { margin-top: 0.75rem; }
+
+.bbk-confirmation-addresses {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+}
+
+.bbk-confirmation-address-heading {
+    margin: 0 0 0.5rem;
+    font-size: 0.9375rem;
+    font-weight: 700;
+}
+
+.bbk-address-lines {
+    font-style: normal;
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+    font-size: 0.875rem;
+    color: var(--bbk-color-muted);
+}
+
+.bbk-confirmation-continue {
+    max-width: 280px;
+    text-decoration: none;
+}