@bloonio/lokotro-pay 1.1.1 → 1.2.0

package/fesm2022/bloonio-lokotro-pay.mjs

@@ -17,8 +17,8 @@ import { HttpHeaders, HttpErrorResponse } from '@angular/common/http';
  */
 const LOKOTRO_DEV_ENV = {
     environment: 'development',
-    // apiBaseUrl: 'http://10.37.31.218:6495',
-    apiBaseUrl: 'https://dev.app.api.gtwy.lokotro.com',
+    apiBaseUrl: 'http://10.37.31.218:6495',
+    // apiBaseUrl: 'https://dev.app.api.gtwy.lokotro.com',
     paymentApiVersion: 'v1',
     debugMode: true,
     logLevel: 'debug',
@@ -949,10 +949,10 @@ class LokotroLocalizationService {
             this.translationsSubject.next(TRANSLATIONS[language]);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LokotroLocalizationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LokotroLocalizationService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LokotroLocalizationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LokotroLocalizationService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LokotroLocalizationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LokotroLocalizationService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1014,8 +1014,8 @@ class LokotroPaymentMethodSelectionComponent {
             parent.appendChild(placeholder);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LokotroPaymentMethodSelectionComponent, deps: [{ token: LokotroLocalizationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: LokotroPaymentMethodSelectionComponent, isStandalone: true, selector: "lokotro-payment-method-selection", inputs: { paymentMethods: "paymentMethods", selectedMethod: "selectedMethod" }, outputs: { methodSelected: "methodSelected" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LokotroPaymentMethodSelectionComponent, deps: [{ token: LokotroLocalizationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: LokotroPaymentMethodSelectionComponent, isStandalone: true, selector: "lokotro-payment-method-selection", inputs: { paymentMethods: "paymentMethods", selectedMethod: "selectedMethod" }, outputs: { methodSelected: "methodSelected" }, ngImport: i0, template: `
     <div class="lokotro-method-selection">
       <h3 class="lokotro-section-title">{{ localization.translate('selectPaymentMethod') }}</h3>
     
@@ -1068,7 +1068,7 @@ class LokotroPaymentMethodSelectionComponent {
     </div>
     `, isInline: true, styles: [".lokotro-method-selection{display:flex;flex-direction:column;gap:24px}.lokotro-section-title{font-size:20px;font-weight:600;margin:0;color:var(--lokotro-text-primary, #F2F0D5);text-align:center}.lokotro-methods-grid{display:flex;flex-direction:column;gap:12px}.lokotro-method-card{display:flex;align-items:center;gap:16px;padding:16px;background:var(--lokotro-card, #3A4840);border:2px solid var(--lokotro-border, #3A473F);border-radius:16px;cursor:pointer;transition:all .2s ease;text-align:left}.lokotro-method-card:hover:not(.disabled){border-color:var(--lokotro-accent, #3BFBDA);transform:translateY(-2px)}.lokotro-method-card.selected{border-color:var(--lokotro-accent, #3BFBDA);background:linear-gradient(135deg,var(--lokotro-card, #3A4840),var(--lokotro-surface, #2A3832))}.lokotro-method-card.disabled{opacity:.5;cursor:not-allowed}.lokotro-method-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:var(--lokotro-surface, #2A3832);border-radius:12px;overflow:hidden}.lokotro-method-icon img{width:100%;height:100%;object-fit:contain}.lokotro-method-icon-placeholder{font-size:24px}.lokotro-method-info{flex:1;display:flex;flex-direction:column;gap:4px}.lokotro-method-name{font-size:16px;font-weight:600;color:var(--lokotro-text-primary, #F2F0D5)}.lokotro-method-description{font-size:13px;color:var(--lokotro-text-secondary, #D5D3B8)}.lokotro-method-check{width:24px;height:24px;display:flex;align-items:center;justify-content:center;color:var(--lokotro-accent, #3BFBDA)}.lokotro-continue-btn{width:100%;padding:16px;background:linear-gradient(135deg,var(--lokotro-primary, #5A5E39),var(--lokotro-secondary, #6E7346));color:var(--lokotro-text-primary, #F2F0D5);border:none;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s ease}.lokotro-continue-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 16px #0003}.lokotro-continue-btn:disabled{opacity:.5;cursor:not-allowed}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LokotroPaymentMethodSelectionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LokotroPaymentMethodSelectionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lokotro-payment-method-selection', standalone: true, imports: [], template: `
     <div class="lokotro-method-selection">
@@ -1474,10 +1474,10 @@ class LokotroHttpClientService {
                 return LokotroPayApiResponseCode.LOK001; // General error
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LokotroHttpClientService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LokotroHttpClientService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LokotroHttpClientService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LokotroHttpClientService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LokotroHttpClientService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LokotroHttpClientService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1586,10 +1586,10 @@ class LokotroCountryService {
         this.countriesCache = undefined;
         this.countriesSubject.next([]);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LokotroCountryService, deps: [{ token: LokotroHttpClientService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LokotroCountryService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LokotroCountryService, deps: [{ token: LokotroHttpClientService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LokotroCountryService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LokotroCountryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LokotroCountryService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1751,8 +1751,8 @@ class LokotroMobileMoneyPhoneInputComponent {
         }
         return null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LokotroMobileMoneyPhoneInputComponent, deps: [{ token: LokotroCountryService }, { token: LokotroLocalizationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: LokotroMobileMoneyPhoneInputComponent, isStandalone: true, selector: "lokotro-mobile-money-phone-input", inputs: { label: "label", placeholder: "placeholder", initialCountryCode: "initialCountryCode", showPrefixHints: "showPrefixHints", disabled: "disabled" }, outputs: { countryChanged: "countryChanged", phoneChanged: "phoneChanged" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LokotroMobileMoneyPhoneInputComponent, deps: [{ token: LokotroCountryService }, { token: LokotroLocalizationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: LokotroMobileMoneyPhoneInputComponent, isStandalone: true, selector: "lokotro-mobile-money-phone-input", inputs: { label: "label", placeholder: "placeholder", initialCountryCode: "initialCountryCode", showPrefixHints: "showPrefixHints", disabled: "disabled" }, outputs: { countryChanged: "countryChanged", phoneChanged: "phoneChanged" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => LokotroMobileMoneyPhoneInputComponent),
@@ -1871,7 +1871,7 @@ class LokotroMobileMoneyPhoneInputComponent {
     </div>
     `, isInline: true, styles: [".lokotro-phone-input-container{position:relative;width:100%}.lokotro-label{display:block;margin-bottom:8px;font-size:14px;font-weight:500;color:var(--lokotro-text-secondary, #D5D3B8)}.lokotro-phone-input-row{display:flex;gap:12px;align-items:stretch}.lokotro-country-selector{display:flex;align-items:center;gap:8px;padding:12px 14px;background:var(--lokotro-card, #3A4840);border:2px solid var(--lokotro-border, #3A473F);border-radius:12px;color:var(--lokotro-text-primary, #F2F0D5);cursor:pointer;transition:border-color .2s;white-space:nowrap}.lokotro-country-selector:hover:not(:disabled){border-color:var(--lokotro-accent, #3BFBDA)}.lokotro-country-selector:disabled{opacity:.6;cursor:not-allowed}.lokotro-flag{font-size:24px;line-height:1}.lokotro-country-code{font-size:16px;font-weight:600}.lokotro-dropdown-arrow{font-size:10px;opacity:.6}.lokotro-loading-spinner{width:20px;height:20px;border:2px solid var(--lokotro-border, #3A473F);border-top-color:var(--lokotro-accent, #3BFBDA);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.lokotro-phone-input{flex:1;padding:14px 16px;background:var(--lokotro-card, #3A4840);border:2px solid var(--lokotro-border, #3A473F);border-radius:12px;color:var(--lokotro-text-primary, #F2F0D5);font-size:16px;transition:border-color .2s;min-width:0}.lokotro-phone-input:focus{outline:none;border-color:var(--lokotro-accent, #3BFBDA)}.lokotro-phone-input.error{border-color:var(--lokotro-error, #D97652)}.lokotro-phone-input::placeholder{color:var(--lokotro-text-secondary, #D5D3B8);opacity:.6}.lokotro-phone-input:disabled{opacity:.6;cursor:not-allowed}.lokotro-prefix-error{margin-top:6px;font-size:12px;color:var(--lokotro-error, #D97652)}.lokotro-prefix-hints{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px}.lokotro-hint-label{font-size:12px;color:var(--lokotro-text-secondary, #D5D3B8)}.lokotro-prefix-chip{padding:2px 8px;background:#3bfbda1a;border-radius:4px;font-size:12px;font-weight:600;color:var(--lokotro-accent, #3BFBDA)}.lokotro-more-prefixes{font-size:12px;color:var(--lokotro-text-secondary, #D5D3B8)}.lokotro-country-picker{position:absolute;top:100%;left:0;right:0;max-height:300px;background:var(--lokotro-card, #3A4840);border:2px solid var(--lokotro-border, #3A473F);border-radius:12px;margin-top:4px;z-index:1000;overflow:hidden;display:flex;flex-direction:column}.lokotro-picker-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--lokotro-border, #3A473F)}.lokotro-picker-title{font-size:16px;font-weight:600;color:var(--lokotro-text-primary, #F2F0D5)}.lokotro-picker-close{background:none;border:none;font-size:24px;color:var(--lokotro-text-secondary, #D5D3B8);cursor:pointer;padding:0;line-height:1}.lokotro-picker-list{overflow-y:auto;max-height:250px}.lokotro-country-option{display:flex;align-items:center;gap:12px;width:100%;padding:12px 16px;background:none;border:none;color:var(--lokotro-text-primary, #F2F0D5);cursor:pointer;text-align:left;transition:background-color .2s}.lokotro-country-option:hover{background:var(--lokotro-surface, #2A3832)}.lokotro-country-option.selected{background:#3bfbda1a}.lokotro-option-flag{font-size:28px}.lokotro-option-name{flex:1;font-size:14px;font-weight:500}.lokotro-option-code{font-size:12px;color:var(--lokotro-text-secondary, #D5D3B8)}.lokotro-option-check{color:var(--lokotro-accent, #3BFBDA);font-weight:700}.lokotro-picker-backdrop{position:fixed;inset:0;z-index:999}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "pipe", type: UpperCasePipe, name: "uppercase" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LokotroMobileMoneyPhoneInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LokotroMobileMoneyPhoneInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lokotro-mobile-money-phone-input', standalone: true, imports: [FormsModule, ReactiveFormsModule, UpperCasePipe], providers: [
                         {
@@ -2135,8 +2135,8 @@ class LokotroPaymentFormComponent {
     onCancel() {
         this.cancel.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LokotroPaymentFormComponent, deps: [{ token: i1$1.FormBuilder }, { token: LokotroLocalizationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: LokotroPaymentFormComponent, isStandalone: true, selector: "lokotro-payment-form", inputs: { channel: "channel", transactionId: "transactionId", showUserInfoForm: "showUserInfoForm" }, outputs: { formSubmitted: "formSubmitted", cancel: "cancel" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LokotroPaymentFormComponent, deps: [{ token: i1$1.FormBuilder }, { token: LokotroLocalizationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: LokotroPaymentFormComponent, isStandalone: true, selector: "lokotro-payment-form", inputs: { channel: "channel", transactionId: "transactionId", showUserInfoForm: "showUserInfoForm" }, outputs: { formSubmitted: "formSubmitted", cancel: "cancel" }, ngImport: i0, template: `
     <div class="lokotro-payment-form">
       <!-- E-Wallet Form -->
       @if (isEWalletForm) {
@@ -2399,9 +2399,9 @@ class LokotroPaymentFormComponent {
         </form>
       }
     </div>
-    `, isInline: true, styles: [".lokotro-payment-form{width:100%}.lokotro-form-title{font-size:20px;font-weight:600;margin:0 0 24px;color:var(--lokotro-text-primary, #F2F0D5);text-align:center}.lokotro-form-group{margin-bottom:20px}.lokotro-form-row{display:flex;gap:16px}.lokotro-form-row .lokotro-form-group{flex:1}.lokotro-label{display:block;margin-bottom:8px;font-size:14px;font-weight:500;color:var(--lokotro-text-secondary, #D5D3B8)}.lokotro-input{width:100%;padding:14px 16px;background:var(--lokotro-card, #3A4840);border:2px solid var(--lokotro-border, #3A473F);border-radius:12px;color:var(--lokotro-text-primary, #F2F0D5);font-size:16px;transition:border-color .2s;box-sizing:border-box}.lokotro-input:focus{outline:none;border-color:var(--lokotro-accent, #3BFBDA)}.lokotro-input::placeholder{color:var(--lokotro-text-secondary, #D5D3B8);opacity:.6}.lokotro-error{display:block;margin-top:6px;font-size:12px;color:var(--lokotro-error, #D97652)}.lokotro-user-info-section{margin-bottom:24px}.lokotro-section-subtitle{font-size:16px;font-weight:600;margin:0 0 16px;color:var(--lokotro-text-primary, #F2F0D5)}.lokotro-divider{border:none;border-top:1px solid var(--lokotro-border, #3A473F);margin:24px 0}.lokotro-form-actions{display:flex;gap:12px;margin-top:32px}.lokotro-btn-primary,.lokotro-btn-secondary{flex:1;padding:14px 24px;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s ease}.lokotro-btn-primary{background:linear-gradient(135deg,var(--lokotro-primary, #5A5E39),var(--lokotro-secondary, #6E7346));color:var(--lokotro-text-primary, #F2F0D5);border:none}.lokotro-btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 16px #0003}.lokotro-btn-primary:disabled{opacity:.5;cursor:not-allowed}.lokotro-btn-secondary{background:transparent;color:var(--lokotro-text-primary, #F2F0D5);border:2px solid var(--lokotro-border, #3A473F)}.lokotro-btn-secondary:hover{border-color:var(--lokotro-text-secondary, #D5D3B8)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: LokotroMobileMoneyPhoneInputComponent, selector: "lokotro-mobile-money-phone-input", inputs: ["label", "placeholder", "initialCountryCode", "showPrefixHints", "disabled"], outputs: ["countryChanged", "phoneChanged"] }] }); }
+    `, isInline: true, styles: [".lokotro-payment-form{width:100%}.lokotro-form-title{font-size:20px;font-weight:600;margin:0 0 24px;color:var(--lokotro-text-primary, #F2F0D5);text-align:center}.lokotro-form-group{margin-bottom:20px}.lokotro-form-row{display:flex;gap:16px}.lokotro-form-row .lokotro-form-group{flex:1}.lokotro-label{display:block;margin-bottom:8px;font-size:14px;font-weight:500;color:var(--lokotro-text-secondary, #D5D3B8)}.lokotro-input{width:100%;padding:14px 16px;background:var(--lokotro-card, #3A4840);border:2px solid var(--lokotro-border, #3A473F);border-radius:12px;color:var(--lokotro-text-primary, #F2F0D5);font-size:16px;transition:border-color .2s;box-sizing:border-box}.lokotro-input:focus{outline:none;border-color:var(--lokotro-accent, #3BFBDA)}.lokotro-input::placeholder{color:var(--lokotro-text-secondary, #D5D3B8);opacity:.6}.lokotro-error{display:block;margin-top:6px;font-size:12px;color:var(--lokotro-error, #D97652)}.lokotro-user-info-section{margin-bottom:24px}.lokotro-section-subtitle{font-size:16px;font-weight:600;margin:0 0 16px;color:var(--lokotro-text-primary, #F2F0D5)}.lokotro-divider{border:none;border-top:1px solid var(--lokotro-border, #3A473F);margin:24px 0}.lokotro-form-actions{display:flex;gap:12px;margin-top:32px}.lokotro-btn-primary,.lokotro-btn-secondary{flex:1;padding:14px 24px;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s ease}.lokotro-btn-primary{background:linear-gradient(135deg,var(--lokotro-primary, #5A5E39),var(--lokotro-secondary, #6E7346));color:var(--lokotro-text-primary, #F2F0D5);border:none}.lokotro-btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 16px #0003}.lokotro-btn-primary:disabled{opacity:.5;cursor:not-allowed}.lokotro-btn-secondary{background:transparent;color:var(--lokotro-text-primary, #F2F0D5);border:2px solid var(--lokotro-border, #3A473F)}.lokotro-btn-secondary:hover{border-color:var(--lokotro-text-secondary, #D5D3B8)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: LokotroMobileMoneyPhoneInputComponent, selector: "lokotro-mobile-money-phone-input", inputs: ["label", "placeholder", "initialCountryCode", "showPrefixHints", "disabled"], outputs: ["countryChanged", "phoneChanged"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LokotroPaymentFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LokotroPaymentFormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lokotro-payment-form', standalone: true, imports: [FormsModule, ReactiveFormsModule, LokotroMobileMoneyPhoneInputComponent], template: `
     <div class="lokotro-payment-form">
@@ -2767,8 +2767,8 @@ class LokotroOtpVerificationComponent {
     onCancelClick() {
         this.cancel.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LokotroOtpVerificationComponent, deps: [{ token: LokotroLocalizationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: LokotroOtpVerificationComponent, isStandalone: true, selector: "lokotro-otp-verification", inputs: { transactionId: "transactionId", otpDestination: "otpDestination", otpLength: "otpLength" }, outputs: { otpVerified: "otpVerified", resendOtp: "resendOtp", cancel: "cancel" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LokotroOtpVerificationComponent, deps: [{ token: LokotroLocalizationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: LokotroOtpVerificationComponent, isStandalone: true, selector: "lokotro-otp-verification", inputs: { transactionId: "transactionId", otpDestination: "otpDestination", otpLength: "otpLength" }, outputs: { otpVerified: "otpVerified", resendOtp: "resendOtp", cancel: "cancel" }, ngImport: i0, template: `
     <div class="lokotro-otp-verification">
       <div class="lokotro-otp-icon">
         <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
@@ -2827,7 +2827,7 @@ class LokotroOtpVerificationComponent {
     </div>
     `, isInline: true, styles: [".lokotro-otp-verification{display:flex;flex-direction:column;align-items:center;text-align:center;padding:24px 0}.lokotro-otp-icon{width:80px;height:80px;display:flex;align-items:center;justify-content:center;background:var(--lokotro-card, #3A4840);border-radius:50%;margin-bottom:24px;color:var(--lokotro-accent, #3BFBDA)}.lokotro-otp-title{font-size:24px;font-weight:600;margin:0 0 8px;color:var(--lokotro-text-primary, #F2F0D5)}.lokotro-otp-subtitle{font-size:14px;color:var(--lokotro-text-secondary, #D5D3B8);margin:0 0 32px}.lokotro-otp-inputs{display:flex;gap:12px;margin-bottom:24px}.lokotro-otp-input{width:50px;height:56px;text-align:center;font-size:24px;font-weight:600;background:var(--lokotro-card, #3A4840);border:2px solid var(--lokotro-border, #3A473F);border-radius:12px;color:var(--lokotro-text-primary, #F2F0D5);transition:border-color .2s}.lokotro-otp-input:focus{outline:none;border-color:var(--lokotro-accent, #3BFBDA)}.lokotro-otp-timer{font-size:14px;color:var(--lokotro-text-secondary, #D5D3B8);margin-bottom:24px}.lokotro-resend-btn{background:none;border:none;color:var(--lokotro-accent, #3BFBDA);font-size:14px;font-weight:600;cursor:pointer;margin-bottom:24px;text-decoration:underline}.lokotro-resend-btn:hover{opacity:.8}.lokotro-form-actions{display:flex;gap:12px;width:100%}.lokotro-btn-primary,.lokotro-btn-secondary{flex:1;padding:14px 24px;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s ease}.lokotro-btn-primary{background:linear-gradient(135deg,var(--lokotro-primary, #5A5E39),var(--lokotro-secondary, #6E7346));color:var(--lokotro-text-primary, #F2F0D5);border:none}.lokotro-btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 16px #0003}.lokotro-btn-primary:disabled{opacity:.5;cursor:not-allowed}.lokotro-btn-secondary{background:transparent;color:var(--lokotro-text-primary, #F2F0D5);border:2px solid var(--lokotro-border, #3A473F)}.lokotro-btn-secondary:hover{border-color:var(--lokotro-text-secondary, #D5D3B8)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LokotroOtpVerificationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LokotroOtpVerificationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lokotro-otp-verification', standalone: true, imports: [FormsModule], template: `
     <div class="lokotro-otp-verification">
@@ -2915,8 +2915,8 @@ class LokotroProcessingComponent {
             setTimeout(() => this.currentStep = 3, 6000);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LokotroProcessingComponent, deps: [{ token: LokotroLocalizationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: LokotroProcessingComponent, isStandalone: true, selector: "lokotro-processing", inputs: { type: "type", message: "message" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LokotroProcessingComponent, deps: [{ token: LokotroLocalizationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: LokotroProcessingComponent, isStandalone: true, selector: "lokotro-processing", inputs: { type: "type", message: "message" }, ngImport: i0, template: `
     <div class="lokotro-processing">
       <div class="lokotro-processing-spinner">
         <div class="lokotro-spinner-ring"></div>
@@ -2951,7 +2951,7 @@ class LokotroProcessingComponent {
     </div>
     `, isInline: true, styles: [".lokotro-processing{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:48px 24px;min-height:300px}.lokotro-processing-spinner{position:relative;width:80px;height:80px;margin-bottom:32px}.lokotro-spinner-ring{position:absolute;width:100%;height:100%;border:3px solid transparent;border-radius:50%;animation:lokotro-spin 1.5s linear infinite}.lokotro-spinner-ring:nth-child(1){border-top-color:var(--lokotro-accent, #3BFBDA);animation-delay:0s}.lokotro-spinner-ring:nth-child(2){border-right-color:var(--lokotro-primary, #5A5E39);animation-delay:.15s;width:70%;height:70%;top:15%;left:15%}.lokotro-spinner-ring:nth-child(3){border-bottom-color:var(--lokotro-secondary, #6E7346);animation-delay:.3s;width:50%;height:50%;top:25%;left:25%}@keyframes lokotro-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.lokotro-processing-title{font-size:20px;font-weight:600;margin:0 0 8px;color:var(--lokotro-text-primary, #F2F0D5)}.lokotro-processing-subtitle{font-size:14px;color:var(--lokotro-text-secondary, #D5D3B8);margin:0 0 32px}.lokotro-processing-steps{display:flex;flex-direction:column;gap:16px;width:100%;max-width:280px}.lokotro-step{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--lokotro-card, #3A4840);border-radius:12px;opacity:.5;transition:opacity .3s}.lokotro-step.active{opacity:1}.lokotro-step-icon{font-size:20px}.lokotro-step span{font-size:14px;color:var(--lokotro-text-primary, #F2F0D5)}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LokotroProcessingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LokotroProcessingComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lokotro-processing', standalone: true, imports: [], template: `
     <div class="lokotro-processing">
@@ -2996,6 +2996,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
 /**
  * Lokotro Pay - Result Component
  * Success, Error, Warning, Info screens
+ *
+ * Designed for financial UX: clean white surface, prominent amount focal
+ * on success, filled status badge, restrained transaction-detail panel.
  */
 class LokotroResultComponent {
     constructor(localization) {
@@ -3056,13 +3059,15 @@ class LokotroResultComponent {
             return 0;
         return (this.countdownSeconds / this.autoRedirectSeconds) * 100;
     }
+    formatNumber(amount) {
+        return new Intl.NumberFormat('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(amount);
+    }
     formatAmount(amount, currency) {
-        const formatter = new Intl.NumberFormat('en-US', {
+        return new Intl.NumberFormat('en-US', {
             style: 'currency',
             currency: currency || 'USD',
             minimumFractionDigits: 2
-        });
-        return formatter.format(amount);
+        }).format(amount);
     }
     onPrimaryClick() {
         this.cancelCountdown();
@@ -3072,230 +3077,196 @@ class LokotroResultComponent {
         this.cancelCountdown();
         this.secondaryAction.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LokotroResultComponent, deps: [{ token: LokotroLocalizationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: LokotroResultComponent, isStandalone: true, selector: "lokotro-result", inputs: { type: "type", title: "title", message: "message", amount: "amount", currency: "currency", transactionId: "transactionId", primaryActionLabel: "primaryActionLabel", secondaryActionLabel: "secondaryActionLabel", autoRedirectSeconds: "autoRedirectSeconds" }, outputs: { primaryAction: "primaryAction", secondaryAction: "secondaryAction", autoRedirect: "autoRedirect" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LokotroResultComponent, deps: [{ token: LokotroLocalizationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: LokotroResultComponent, isStandalone: true, selector: "lokotro-result", inputs: { type: "type", title: "title", message: "message", amount: "amount", currency: "currency", transactionId: "transactionId", primaryActionLabel: "primaryActionLabel", secondaryActionLabel: "secondaryActionLabel", autoRedirectSeconds: "autoRedirectSeconds" }, outputs: { primaryAction: "primaryAction", secondaryAction: "secondaryAction", autoRedirect: "autoRedirect" }, ngImport: i0, template: `
     <div class="lokotro-result" [class]="'lokotro-result-' + type">
-      <!-- Animated Icon -->
-      <div class="lokotro-result-icon" [class]="'lokotro-icon-' + type">
-        <!-- Success Icon -->
-        @if (type === 'success') {
-          <svg class="lokotro-checkmark" viewBox="0 0 52 52">
-            <circle class="lokotro-checkmark-circle" cx="26" cy="26" r="25" fill="none"/>
-            <path class="lokotro-checkmark-check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/>
-          </svg>
-        }
-    
-        <!-- Error Icon -->
-        @if (type === 'error') {
-          <svg class="lokotro-error-icon" viewBox="0 0 52 52">
-            <circle class="lokotro-error-circle" cx="26" cy="26" r="25" fill="none"/>
-            <path class="lokotro-error-x" fill="none" d="M16 16l20 20M36 16l-20 20"/>
-          </svg>
-        }
-    
-        <!-- Warning Icon -->
-        @if (type === 'warning') {
-          <svg class="lokotro-warning-icon" viewBox="0 0 52 52">
-            <circle class="lokotro-warning-circle" cx="26" cy="26" r="25" fill="none"/>
-            <path class="lokotro-warning-exclaim" fill="none" d="M26 15v15M26 37v1"/>
-          </svg>
+      <div class="lokotro-result-card">
+        <!-- Status Badge (filled circle with icon) -->
+        <div class="lokotro-status-badge" [class]="'lokotro-status-' + type">
+          @if (type === 'success') {
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
+              <polyline points="5 12 10 17 19 8"/>
+            </svg>
+          }
+          @if (type === 'error') {
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
+              <line x1="18" y1="6" x2="6" y2="18"/>
+              <line x1="6" y1="6" x2="18" y2="18"/>
+            </svg>
+          }
+          @if (type === 'warning') {
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
+              <line x1="12" y1="8" x2="12" y2="13"/>
+              <line x1="12" y1="17" x2="12.01" y2="17"/>
+            </svg>
+          }
+          @if (type === 'info') {
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
+              <line x1="12" y1="11" x2="12" y2="16"/>
+              <line x1="12" y1="7" x2="12.01" y2="7"/>
+            </svg>
+          }
+        </div>
+
+        <!-- Amount focal (success only, when amount provided) -->
+        @if (type === 'success' && amount !== undefined && amount !== null) {
+          <div class="lokotro-amount-focal">
+            <span class="lokotro-amount-currency">{{ (currency || '').toUpperCase() }}</span>
+            <span class="lokotro-amount-value">{{ formatNumber(amount) }}</span>
+          </div>
         }
-    
-        <!-- Info Icon -->
-        @if (type === 'info') {
-          <svg class="lokotro-info-icon" viewBox="0 0 52 52">
-            <circle class="lokotro-info-circle" cx="26" cy="26" r="25" fill="none"/>
-            <path class="lokotro-info-i" fill="none" d="M26 22v15M26 15v1"/>
-          </svg>
+
+        <!-- Title -->
+        <h2 class="lokotro-result-title">{{ title }}</h2>
+
+        <!-- Message -->
+        @if (message) {
+          <p class="lokotro-result-message">{{ message }}</p>
         }
-      </div>
-    
-      <!-- Title -->
-      <h2 class="lokotro-result-title">{{ title }}</h2>
-    
-      <!-- Message -->
-      @if (message) {
-        <p class="lokotro-result-message">{{ message }}</p>
-      }
-    
-      <!-- Countdown Indicator -->
-      @if (autoRedirectSeconds > 0 && countdownSeconds > 0 && !isCountdownCancelled) {
-        <div class="lokotro-countdown-indicator"
-          (click)="cancelCountdown()">
-          <div class="lokotro-countdown-progress">
+
+        <!-- Countdown Indicator -->
+        @if (autoRedirectSeconds > 0 && countdownSeconds > 0 && !isCountdownCancelled) {
+          <button type="button" class="lokotro-countdown-indicator" (click)="cancelCountdown()">
             <svg viewBox="0 0 36 36" class="lokotro-countdown-circle">
               <path class="lokotro-countdown-bg"
-              d="M18 2.0845
-                a 15.9155 15.9155 0 0 1 0 31.831
-                a 15.9155 15.9155 0 0 1 0 -31.831"
-                />
+                d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"/>
               <path class="lokotro-countdown-fill" [class]="'lokotro-countdown-' + type"
                 [attr.stroke-dasharray]="getCountdownProgress() + ', 100'"
-              d="M18 2.0845
-                a 15.9155 15.9155 0 0 1 0 31.831
-                a 15.9155 15.9155 0 0 1 0 -31.831"
-                />
+                d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"/>
             </svg>
-          </div>
-          <span class="lokotro-countdown-text" [class]="'lokotro-text-' + type">
-            {{ localization.translate('redirectingIn', { seconds: countdownSeconds }) }}
-          </span>
-          <svg class="lokotro-countdown-cancel" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <path d="M18 6L6 18M6 6l12 12"/>
-          </svg>
-        </div>
-      }
-    
-      <!-- Transaction Details -->
-      @if (type === 'success' && (amount || transactionId)) {
-        <div class="lokotro-result-details">
-          @if (amount) {
-            <div class="lokotro-detail-row">
-              <span class="lokotro-detail-label">{{ localization.translate('amount') }}</span>
-              <span class="lokotro-detail-value">{{ formatAmount(amount, currency) }}</span>
-            </div>
-          }
-          @if (transactionId) {
+            <span class="lokotro-countdown-text">
+              {{ localization.translate('redirectingIn', { seconds: countdownSeconds }) }}
+            </span>
+            <svg class="lokotro-countdown-cancel" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M18 6L6 18M6 6l12 12"/>
+            </svg>
+          </button>
+        }
+
+        <!-- Transaction Details -->
+        @if (type === 'success' && transactionId) {
+          <div class="lokotro-result-details">
             <div class="lokotro-detail-row">
               <span class="lokotro-detail-label">Transaction ID</span>
               <span class="lokotro-detail-value lokotro-mono">{{ transactionId }}</span>
             </div>
+          </div>
+        }
+      </div>
+
+      <!-- Actions -->
+      @if (primaryActionLabel || secondaryActionLabel) {
+        <div class="lokotro-result-actions">
+          @if (primaryActionLabel) {
+            <button type="button" class="lokotro-btn-primary" (click)="onPrimaryClick()">
+              {{ primaryActionLabel }}
+            </button>
+          }
+          @if (secondaryActionLabel) {
+            <button type="button" class="lokotro-btn-secondary" (click)="onSecondaryClick()">
+              {{ secondaryActionLabel }}
+            </button>
           }
         </div>
       }
-    
-      <!-- Actions -->
-      <div class="lokotro-result-actions">
-        @if (primaryActionLabel) {
-          <button
-            class="lokotro-btn-primary"
-            (click)="onPrimaryClick()">
-            {{ primaryActionLabel }}
-          </button>
-        }
-        @if (secondaryActionLabel) {
-          <button
-            class="lokotro-btn-secondary"
-            (click)="onSecondaryClick()">
-            {{ secondaryActionLabel }}
-          </button>
-        }
-      </div>
     </div>
-    `, isInline: true, styles: [".lokotro-result{display:flex;flex-direction:column;align-items:center;text-align:center;padding:48px 24px}.lokotro-result-icon{width:80px;height:80px;margin-bottom:24px}.lokotro-checkmark{width:100%;height:100%;stroke-width:3}.lokotro-checkmark-circle{stroke:var(--lokotro-success, #3BFBDA);stroke-dasharray:166;stroke-dashoffset:166;animation:lokotro-stroke .6s cubic-bezier(.65,0,.45,1) forwards}.lokotro-checkmark-check{stroke:var(--lokotro-success, #3BFBDA);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:48;stroke-dashoffset:48;animation:lokotro-stroke .3s cubic-bezier(.65,0,.45,1) .6s forwards}.lokotro-error-icon{width:100%;height:100%;stroke-width:3}.lokotro-error-circle{stroke:var(--lokotro-error, #D97652);stroke-dasharray:166;stroke-dashoffset:166;animation:lokotro-stroke .6s cubic-bezier(.65,0,.45,1) forwards}.lokotro-error-x{stroke:var(--lokotro-error, #D97652);stroke-width:3;stroke-linecap:round;stroke-dasharray:28;stroke-dashoffset:28;animation:lokotro-stroke .3s cubic-bezier(.65,0,.45,1) .6s forwards}.lokotro-warning-icon{width:100%;height:100%;stroke-width:3}.lokotro-warning-circle{stroke:var(--lokotro-warning, #D97652);stroke-dasharray:166;stroke-dashoffset:166;animation:lokotro-stroke .6s cubic-bezier(.65,0,.45,1) forwards}.lokotro-warning-exclaim{stroke:var(--lokotro-warning, #D97652);stroke-width:3;stroke-linecap:round;stroke-dasharray:20;stroke-dashoffset:20;animation:lokotro-stroke .3s cubic-bezier(.65,0,.45,1) .6s forwards}.lokotro-info-icon{width:100%;height:100%;stroke-width:3}.lokotro-info-circle{stroke:var(--lokotro-info, #3B82F6);stroke-dasharray:166;stroke-dashoffset:166;animation:lokotro-stroke .6s cubic-bezier(.65,0,.45,1) forwards}.lokotro-info-i{stroke:var(--lokotro-info, #3B82F6);stroke-width:3;stroke-linecap:round;stroke-dasharray:20;stroke-dashoffset:20;animation:lokotro-stroke .3s cubic-bezier(.65,0,.45,1) .6s forwards}@keyframes lokotro-stroke{to{stroke-dashoffset:0}}.lokotro-result-title{font-size:24px;font-weight:700;margin:0 0 12px;color:var(--lokotro-text-primary, #F2F0D5)}.lokotro-result-success .lokotro-result-title{color:var(--lokotro-success, #3BFBDA)}.lokotro-result-error .lokotro-result-title{color:var(--lokotro-error, #D97652)}.lokotro-result-message{font-size:14px;color:var(--lokotro-text-secondary, #D5D3B8);margin:0 0 24px;line-height:1.5}.lokotro-result-details{width:100%;max-width:320px;background:var(--lokotro-card, #3A4840);border-radius:16px;padding:16px;margin-bottom:32px}.lokotro-detail-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0}.lokotro-detail-row:not(:last-child){border-bottom:1px solid var(--lokotro-border, #3A473F)}.lokotro-detail-label{font-size:14px;color:var(--lokotro-text-secondary, #D5D3B8)}.lokotro-detail-value{font-size:14px;font-weight:600;color:var(--lokotro-text-primary, #F2F0D5)}.lokotro-mono{font-family:Courier New,monospace;font-size:12px}.lokotro-result-actions{display:flex;flex-direction:column;gap:12px;width:100%;max-width:320px}.lokotro-btn-primary,.lokotro-btn-secondary{width:100%;padding:14px 24px;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s ease}.lokotro-btn-primary{background:linear-gradient(135deg,var(--lokotro-primary, #5A5E39),var(--lokotro-secondary, #6E7346));color:var(--lokotro-text-primary, #F2F0D5);border:none}.lokotro-result-success .lokotro-btn-primary{background:linear-gradient(135deg,var(--lokotro-success, #3BFBDA),var(--lokotro-success-dark, #27D4B6));color:var(--lokotro-background-dark, #1C2621)}.lokotro-btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 16px #0003}.lokotro-btn-secondary{background:transparent;color:var(--lokotro-text-primary, #F2F0D5);border:2px solid var(--lokotro-border, #3A473F)}.lokotro-btn-secondary:hover{border-color:var(--lokotro-text-secondary, #D5D3B8)}.lokotro-countdown-indicator{display:flex;align-items:center;gap:8px;padding:8px 16px;background:var(--lokotro-primary-light, rgba(90, 94, 57, .1));border:1px solid var(--lokotro-primary-border, rgba(90, 94, 57, .3));border-radius:20px;cursor:pointer;margin-bottom:16px;transition:all .2s ease}.lokotro-countdown-indicator:hover{background:var(--lokotro-primary-light, rgba(90, 94, 57, .2))}.lokotro-result-error .lokotro-countdown-indicator{background:var(--lokotro-error-light, rgba(217, 118, 82, .1));border-color:var(--lokotro-error-border, rgba(217, 118, 82, .3))}.lokotro-countdown-progress{width:16px;height:16px}.lokotro-countdown-circle{width:100%;height:100%;transform:rotate(-90deg)}.lokotro-countdown-bg{fill:none;stroke:var(--lokotro-border, #3A473F);stroke-width:3}.lokotro-countdown-fill{fill:none;stroke-width:3;stroke-linecap:round;transition:stroke-dasharray .3s ease}.lokotro-countdown-success{stroke:var(--lokotro-success, #3BFBDA)}.lokotro-countdown-error{stroke:var(--lokotro-error, #D97652)}.lokotro-countdown-warning{stroke:var(--lokotro-warning, #D97652)}.lokotro-countdown-info{stroke:var(--lokotro-info, #3B82F6)}.lokotro-countdown-text{font-size:12px;font-weight:500}.lokotro-text-success{color:var(--lokotro-success, #3BFBDA)}.lokotro-text-error{color:var(--lokotro-error, #D97652)}.lokotro-text-warning{color:var(--lokotro-warning, #D97652)}.lokotro-text-info{color:var(--lokotro-info, #3B82F6)}.lokotro-countdown-cancel{color:var(--lokotro-text-secondary, #D5D3B8)}\n"] }); }
+  `, isInline: true, styles: [".lokotro-result{display:flex;flex-direction:column;align-items:stretch;max-width:420px;margin:0 auto;padding:24px 16px;gap:20px}.lokotro-result-card{display:flex;flex-direction:column;align-items:center;text-align:center;padding:32px 24px;background:var(--lokotro-card, #FFFFFF);border:1px solid var(--lokotro-border, #E2E8F0);border-radius:20px;box-shadow:0 1px 3px var(--lokotro-shadow-light, rgba(15, 23, 42, .04)),0 8px 24px var(--lokotro-shadow-light, rgba(15, 23, 42, .04))}.lokotro-status-badge{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:24px;animation:lokotro-pop .5s cubic-bezier(.34,1.56,.64,1)}.lokotro-status-badge svg{width:36px;height:36px;color:#fff}.lokotro-status-success{background:var(--lokotro-success, #16A34A);box-shadow:0 0 0 8px #16a34a1f,0 8px 20px #16a34a40}.lokotro-status-error{background:var(--lokotro-error, #DC2626);box-shadow:0 0 0 8px #dc26261f,0 8px 20px #dc262640}.lokotro-status-warning{background:var(--lokotro-warning, #D97706);box-shadow:0 0 0 8px #d977061f,0 8px 20px #d9770640}.lokotro-status-info{background:var(--lokotro-info, #2563EB);box-shadow:0 0 0 8px #2563eb1f,0 8px 20px #2563eb40}@keyframes lokotro-pop{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}.lokotro-amount-focal{display:flex;flex-direction:column;align-items:center;gap:4px;margin-bottom:16px}.lokotro-amount-currency{font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--lokotro-text-secondary, #64748B)}.lokotro-amount-value{font-size:40px;font-weight:700;line-height:1;color:var(--lokotro-text-primary, #0F172A);font-variant-numeric:tabular-nums}.lokotro-result-title{font-size:20px;font-weight:600;margin:0 0 6px;color:var(--lokotro-text-primary, #0F172A)}.lokotro-result-message{font-size:14px;color:var(--lokotro-text-secondary, #64748B);margin:0;line-height:1.5;max-width:320px}.lokotro-result-details{width:100%;background:var(--lokotro-surface, #F7F8FA);border:1px solid var(--lokotro-border, #E2E8F0);border-radius:12px;padding:12px 16px;margin-top:24px}.lokotro-detail-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:6px 0}.lokotro-detail-row:not(:last-child){border-bottom:1px solid var(--lokotro-divider, #F1F5F9)}.lokotro-detail-label{font-size:13px;color:var(--lokotro-text-secondary, #64748B)}.lokotro-detail-value{font-size:13px;font-weight:600;color:var(--lokotro-text-primary, #0F172A);text-align:right;overflow:hidden;text-overflow:ellipsis;max-width:200px;white-space:nowrap}.lokotro-mono{font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Monaco,monospace;font-size:12px}.lokotro-result-actions{display:flex;flex-direction:column;gap:10px;width:100%}.lokotro-btn-primary,.lokotro-btn-secondary{width:100%;padding:14px 24px;border-radius:12px;font-size:15px;font-weight:600;cursor:pointer;transition:all .18s ease;font-family:inherit}.lokotro-btn-primary{background:var(--lokotro-primary, #0F172A);color:#fff;border:none}.lokotro-btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 16px var(--lokotro-shadow-medium, rgba(15, 23, 42, .12))}.lokotro-btn-primary:active{transform:translateY(0)}.lokotro-btn-secondary{background:transparent;color:var(--lokotro-text-primary, #0F172A);border:1.5px solid var(--lokotro-border, #E2E8F0)}.lokotro-btn-secondary:hover{border-color:var(--lokotro-text-secondary, #64748B);background:var(--lokotro-surface, #F7F8FA)}.lokotro-countdown-indicator{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;background:var(--lokotro-surface, #F7F8FA);border:1px solid var(--lokotro-border, #E2E8F0);border-radius:999px;cursor:pointer;margin-top:20px;transition:all .18s ease;color:var(--lokotro-text-secondary, #64748B);font-family:inherit}.lokotro-countdown-indicator:hover{background:var(--lokotro-card, #FFFFFF);border-color:var(--lokotro-text-tertiary, #64748B)}.lokotro-countdown-circle{width:14px;height:14px;transform:rotate(-90deg)}.lokotro-countdown-bg{fill:none;stroke:var(--lokotro-border, #E2E8F0);stroke-width:4}.lokotro-countdown-fill{fill:none;stroke-width:4;stroke-linecap:round;transition:stroke-dasharray .3s ease}.lokotro-countdown-success{stroke:var(--lokotro-success, #16A34A)}.lokotro-countdown-error{stroke:var(--lokotro-error, #DC2626)}.lokotro-countdown-warning{stroke:var(--lokotro-warning, #D97706)}.lokotro-countdown-info{stroke:var(--lokotro-info, #2563EB)}.lokotro-countdown-text{font-size:12px;font-weight:500}.lokotro-countdown-cancel{color:inherit;opacity:.7}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LokotroResultComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LokotroResultComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lokotro-result', standalone: true, imports: [], template: `
     <div class="lokotro-result" [class]="'lokotro-result-' + type">
-      <!-- Animated Icon -->
-      <div class="lokotro-result-icon" [class]="'lokotro-icon-' + type">
-        <!-- Success Icon -->
-        @if (type === 'success') {
-          <svg class="lokotro-checkmark" viewBox="0 0 52 52">
-            <circle class="lokotro-checkmark-circle" cx="26" cy="26" r="25" fill="none"/>
-            <path class="lokotro-checkmark-check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/>
-          </svg>
-        }
-    
-        <!-- Error Icon -->
-        @if (type === 'error') {
-          <svg class="lokotro-error-icon" viewBox="0 0 52 52">
-            <circle class="lokotro-error-circle" cx="26" cy="26" r="25" fill="none"/>
-            <path class="lokotro-error-x" fill="none" d="M16 16l20 20M36 16l-20 20"/>
-          </svg>
-        }
-    
-        <!-- Warning Icon -->
-        @if (type === 'warning') {
-          <svg class="lokotro-warning-icon" viewBox="0 0 52 52">
-            <circle class="lokotro-warning-circle" cx="26" cy="26" r="25" fill="none"/>
-            <path class="lokotro-warning-exclaim" fill="none" d="M26 15v15M26 37v1"/>
-          </svg>
+      <div class="lokotro-result-card">
+        <!-- Status Badge (filled circle with icon) -->
+        <div class="lokotro-status-badge" [class]="'lokotro-status-' + type">
+          @if (type === 'success') {
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
+              <polyline points="5 12 10 17 19 8"/>
+            </svg>
+          }
+          @if (type === 'error') {
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
+              <line x1="18" y1="6" x2="6" y2="18"/>
+              <line x1="6" y1="6" x2="18" y2="18"/>
+            </svg>
+          }
+          @if (type === 'warning') {
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
+              <line x1="12" y1="8" x2="12" y2="13"/>
+              <line x1="12" y1="17" x2="12.01" y2="17"/>
+            </svg>
+          }
+          @if (type === 'info') {
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
+              <line x1="12" y1="11" x2="12" y2="16"/>
+              <line x1="12" y1="7" x2="12.01" y2="7"/>
+            </svg>
+          }
+        </div>
+
+        <!-- Amount focal (success only, when amount provided) -->
+        @if (type === 'success' && amount !== undefined && amount !== null) {
+          <div class="lokotro-amount-focal">
+            <span class="lokotro-amount-currency">{{ (currency || '').toUpperCase() }}</span>
+            <span class="lokotro-amount-value">{{ formatNumber(amount) }}</span>
+          </div>
         }
-    
-        <!-- Info Icon -->
-        @if (type === 'info') {
-          <svg class="lokotro-info-icon" viewBox="0 0 52 52">
-            <circle class="lokotro-info-circle" cx="26" cy="26" r="25" fill="none"/>
-            <path class="lokotro-info-i" fill="none" d="M26 22v15M26 15v1"/>
-          </svg>
+
+        <!-- Title -->
+        <h2 class="lokotro-result-title">{{ title }}</h2>
+
+        <!-- Message -->
+        @if (message) {
+          <p class="lokotro-result-message">{{ message }}</p>
         }
-      </div>
-    
-      <!-- Title -->
-      <h2 class="lokotro-result-title">{{ title }}</h2>
-    
-      <!-- Message -->
-      @if (message) {
-        <p class="lokotro-result-message">{{ message }}</p>
-      }
-    
-      <!-- Countdown Indicator -->
-      @if (autoRedirectSeconds > 0 && countdownSeconds > 0 && !isCountdownCancelled) {
-        <div class="lokotro-countdown-indicator"
-          (click)="cancelCountdown()">
-          <div class="lokotro-countdown-progress">
+
+        <!-- Countdown Indicator -->
+        @if (autoRedirectSeconds > 0 && countdownSeconds > 0 && !isCountdownCancelled) {
+          <button type="button" class="lokotro-countdown-indicator" (click)="cancelCountdown()">
             <svg viewBox="0 0 36 36" class="lokotro-countdown-circle">
               <path class="lokotro-countdown-bg"
-              d="M18 2.0845
-                a 15.9155 15.9155 0 0 1 0 31.831
-                a 15.9155 15.9155 0 0 1 0 -31.831"
-                />
+                d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"/>
               <path class="lokotro-countdown-fill" [class]="'lokotro-countdown-' + type"
                 [attr.stroke-dasharray]="getCountdownProgress() + ', 100'"
-              d="M18 2.0845
-                a 15.9155 15.9155 0 0 1 0 31.831
-                a 15.9155 15.9155 0 0 1 0 -31.831"
-                />
+                d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"/>
             </svg>
-          </div>
-          <span class="lokotro-countdown-text" [class]="'lokotro-text-' + type">
-            {{ localization.translate('redirectingIn', { seconds: countdownSeconds }) }}
-          </span>
-          <svg class="lokotro-countdown-cancel" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <path d="M18 6L6 18M6 6l12 12"/>
-          </svg>
-        </div>
-      }
-    
-      <!-- Transaction Details -->
-      @if (type === 'success' && (amount || transactionId)) {
-        <div class="lokotro-result-details">
-          @if (amount) {
-            <div class="lokotro-detail-row">
-              <span class="lokotro-detail-label">{{ localization.translate('amount') }}</span>
-              <span class="lokotro-detail-value">{{ formatAmount(amount, currency) }}</span>
-            </div>
-          }
-          @if (transactionId) {
+            <span class="lokotro-countdown-text">
+              {{ localization.translate('redirectingIn', { seconds: countdownSeconds }) }}
+            </span>
+            <svg class="lokotro-countdown-cancel" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M18 6L6 18M6 6l12 12"/>
+            </svg>
+          </button>
+        }
+
+        <!-- Transaction Details -->
+        @if (type === 'success' && transactionId) {
+          <div class="lokotro-result-details">
             <div class="lokotro-detail-row">
               <span class="lokotro-detail-label">Transaction ID</span>
               <span class="lokotro-detail-value lokotro-mono">{{ transactionId }}</span>
             </div>
+          </div>
+        }
+      </div>
+
+      <!-- Actions -->
+      @if (primaryActionLabel || secondaryActionLabel) {
+        <div class="lokotro-result-actions">
+          @if (primaryActionLabel) {
+            <button type="button" class="lokotro-btn-primary" (click)="onPrimaryClick()">
+              {{ primaryActionLabel }}
+            </button>
+          }
+          @if (secondaryActionLabel) {
+            <button type="button" class="lokotro-btn-secondary" (click)="onSecondaryClick()">
+              {{ secondaryActionLabel }}
+            </button>
           }
         </div>
       }
-    
-      <!-- Actions -->
-      <div class="lokotro-result-actions">
-        @if (primaryActionLabel) {
-          <button
-            class="lokotro-btn-primary"
-            (click)="onPrimaryClick()">
-            {{ primaryActionLabel }}
-          </button>
-        }
-        @if (secondaryActionLabel) {
-          <button
-            class="lokotro-btn-secondary"
-            (click)="onSecondaryClick()">
-            {{ secondaryActionLabel }}
-          </button>
-        }
-      </div>
     </div>
-    `, styles: [".lokotro-result{display:flex;flex-direction:column;align-items:center;text-align:center;padding:48px 24px}.lokotro-result-icon{width:80px;height:80px;margin-bottom:24px}.lokotro-checkmark{width:100%;height:100%;stroke-width:3}.lokotro-checkmark-circle{stroke:var(--lokotro-success, #3BFBDA);stroke-dasharray:166;stroke-dashoffset:166;animation:lokotro-stroke .6s cubic-bezier(.65,0,.45,1) forwards}.lokotro-checkmark-check{stroke:var(--lokotro-success, #3BFBDA);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:48;stroke-dashoffset:48;animation:lokotro-stroke .3s cubic-bezier(.65,0,.45,1) .6s forwards}.lokotro-error-icon{width:100%;height:100%;stroke-width:3}.lokotro-error-circle{stroke:var(--lokotro-error, #D97652);stroke-dasharray:166;stroke-dashoffset:166;animation:lokotro-stroke .6s cubic-bezier(.65,0,.45,1) forwards}.lokotro-error-x{stroke:var(--lokotro-error, #D97652);stroke-width:3;stroke-linecap:round;stroke-dasharray:28;stroke-dashoffset:28;animation:lokotro-stroke .3s cubic-bezier(.65,0,.45,1) .6s forwards}.lokotro-warning-icon{width:100%;height:100%;stroke-width:3}.lokotro-warning-circle{stroke:var(--lokotro-warning, #D97652);stroke-dasharray:166;stroke-dashoffset:166;animation:lokotro-stroke .6s cubic-bezier(.65,0,.45,1) forwards}.lokotro-warning-exclaim{stroke:var(--lokotro-warning, #D97652);stroke-width:3;stroke-linecap:round;stroke-dasharray:20;stroke-dashoffset:20;animation:lokotro-stroke .3s cubic-bezier(.65,0,.45,1) .6s forwards}.lokotro-info-icon{width:100%;height:100%;stroke-width:3}.lokotro-info-circle{stroke:var(--lokotro-info, #3B82F6);stroke-dasharray:166;stroke-dashoffset:166;animation:lokotro-stroke .6s cubic-bezier(.65,0,.45,1) forwards}.lokotro-info-i{stroke:var(--lokotro-info, #3B82F6);stroke-width:3;stroke-linecap:round;stroke-dasharray:20;stroke-dashoffset:20;animation:lokotro-stroke .3s cubic-bezier(.65,0,.45,1) .6s forwards}@keyframes lokotro-stroke{to{stroke-dashoffset:0}}.lokotro-result-title{font-size:24px;font-weight:700;margin:0 0 12px;color:var(--lokotro-text-primary, #F2F0D5)}.lokotro-result-success .lokotro-result-title{color:var(--lokotro-success, #3BFBDA)}.lokotro-result-error .lokotro-result-title{color:var(--lokotro-error, #D97652)}.lokotro-result-message{font-size:14px;color:var(--lokotro-text-secondary, #D5D3B8);margin:0 0 24px;line-height:1.5}.lokotro-result-details{width:100%;max-width:320px;background:var(--lokotro-card, #3A4840);border-radius:16px;padding:16px;margin-bottom:32px}.lokotro-detail-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0}.lokotro-detail-row:not(:last-child){border-bottom:1px solid var(--lokotro-border, #3A473F)}.lokotro-detail-label{font-size:14px;color:var(--lokotro-text-secondary, #D5D3B8)}.lokotro-detail-value{font-size:14px;font-weight:600;color:var(--lokotro-text-primary, #F2F0D5)}.lokotro-mono{font-family:Courier New,monospace;font-size:12px}.lokotro-result-actions{display:flex;flex-direction:column;gap:12px;width:100%;max-width:320px}.lokotro-btn-primary,.lokotro-btn-secondary{width:100%;padding:14px 24px;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s ease}.lokotro-btn-primary{background:linear-gradient(135deg,var(--lokotro-primary, #5A5E39),var(--lokotro-secondary, #6E7346));color:var(--lokotro-text-primary, #F2F0D5);border:none}.lokotro-result-success .lokotro-btn-primary{background:linear-gradient(135deg,var(--lokotro-success, #3BFBDA),var(--lokotro-success-dark, #27D4B6));color:var(--lokotro-background-dark, #1C2621)}.lokotro-btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 16px #0003}.lokotro-btn-secondary{background:transparent;color:var(--lokotro-text-primary, #F2F0D5);border:2px solid var(--lokotro-border, #3A473F)}.lokotro-btn-secondary:hover{border-color:var(--lokotro-text-secondary, #D5D3B8)}.lokotro-countdown-indicator{display:flex;align-items:center;gap:8px;padding:8px 16px;background:var(--lokotro-primary-light, rgba(90, 94, 57, .1));border:1px solid var(--lokotro-primary-border, rgba(90, 94, 57, .3));border-radius:20px;cursor:pointer;margin-bottom:16px;transition:all .2s ease}.lokotro-countdown-indicator:hover{background:var(--lokotro-primary-light, rgba(90, 94, 57, .2))}.lokotro-result-error .lokotro-countdown-indicator{background:var(--lokotro-error-light, rgba(217, 118, 82, .1));border-color:var(--lokotro-error-border, rgba(217, 118, 82, .3))}.lokotro-countdown-progress{width:16px;height:16px}.lokotro-countdown-circle{width:100%;height:100%;transform:rotate(-90deg)}.lokotro-countdown-bg{fill:none;stroke:var(--lokotro-border, #3A473F);stroke-width:3}.lokotro-countdown-fill{fill:none;stroke-width:3;stroke-linecap:round;transition:stroke-dasharray .3s ease}.lokotro-countdown-success{stroke:var(--lokotro-success, #3BFBDA)}.lokotro-countdown-error{stroke:var(--lokotro-error, #D97652)}.lokotro-countdown-warning{stroke:var(--lokotro-warning, #D97652)}.lokotro-countdown-info{stroke:var(--lokotro-info, #3B82F6)}.lokotro-countdown-text{font-size:12px;font-weight:500}.lokotro-text-success{color:var(--lokotro-success, #3BFBDA)}.lokotro-text-error{color:var(--lokotro-error, #D97652)}.lokotro-text-warning{color:var(--lokotro-warning, #D97652)}.lokotro-text-info{color:var(--lokotro-info, #3B82F6)}.lokotro-countdown-cancel{color:var(--lokotro-text-secondary, #D5D3B8)}\n"] }]
+  `, styles: [".lokotro-result{display:flex;flex-direction:column;align-items:stretch;max-width:420px;margin:0 auto;padding:24px 16px;gap:20px}.lokotro-result-card{display:flex;flex-direction:column;align-items:center;text-align:center;padding:32px 24px;background:var(--lokotro-card, #FFFFFF);border:1px solid var(--lokotro-border, #E2E8F0);border-radius:20px;box-shadow:0 1px 3px var(--lokotro-shadow-light, rgba(15, 23, 42, .04)),0 8px 24px var(--lokotro-shadow-light, rgba(15, 23, 42, .04))}.lokotro-status-badge{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:24px;animation:lokotro-pop .5s cubic-bezier(.34,1.56,.64,1)}.lokotro-status-badge svg{width:36px;height:36px;color:#fff}.lokotro-status-success{background:var(--lokotro-success, #16A34A);box-shadow:0 0 0 8px #16a34a1f,0 8px 20px #16a34a40}.lokotro-status-error{background:var(--lokotro-error, #DC2626);box-shadow:0 0 0 8px #dc26261f,0 8px 20px #dc262640}.lokotro-status-warning{background:var(--lokotro-warning, #D97706);box-shadow:0 0 0 8px #d977061f,0 8px 20px #d9770640}.lokotro-status-info{background:var(--lokotro-info, #2563EB);box-shadow:0 0 0 8px #2563eb1f,0 8px 20px #2563eb40}@keyframes lokotro-pop{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}.lokotro-amount-focal{display:flex;flex-direction:column;align-items:center;gap:4px;margin-bottom:16px}.lokotro-amount-currency{font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--lokotro-text-secondary, #64748B)}.lokotro-amount-value{font-size:40px;font-weight:700;line-height:1;color:var(--lokotro-text-primary, #0F172A);font-variant-numeric:tabular-nums}.lokotro-result-title{font-size:20px;font-weight:600;margin:0 0 6px;color:var(--lokotro-text-primary, #0F172A)}.lokotro-result-message{font-size:14px;color:var(--lokotro-text-secondary, #64748B);margin:0;line-height:1.5;max-width:320px}.lokotro-result-details{width:100%;background:var(--lokotro-surface, #F7F8FA);border:1px solid var(--lokotro-border, #E2E8F0);border-radius:12px;padding:12px 16px;margin-top:24px}.lokotro-detail-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:6px 0}.lokotro-detail-row:not(:last-child){border-bottom:1px solid var(--lokotro-divider, #F1F5F9)}.lokotro-detail-label{font-size:13px;color:var(--lokotro-text-secondary, #64748B)}.lokotro-detail-value{font-size:13px;font-weight:600;color:var(--lokotro-text-primary, #0F172A);text-align:right;overflow:hidden;text-overflow:ellipsis;max-width:200px;white-space:nowrap}.lokotro-mono{font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Monaco,monospace;font-size:12px}.lokotro-result-actions{display:flex;flex-direction:column;gap:10px;width:100%}.lokotro-btn-primary,.lokotro-btn-secondary{width:100%;padding:14px 24px;border-radius:12px;font-size:15px;font-weight:600;cursor:pointer;transition:all .18s ease;font-family:inherit}.lokotro-btn-primary{background:var(--lokotro-primary, #0F172A);color:#fff;border:none}.lokotro-btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 16px var(--lokotro-shadow-medium, rgba(15, 23, 42, .12))}.lokotro-btn-primary:active{transform:translateY(0)}.lokotro-btn-secondary{background:transparent;color:var(--lokotro-text-primary, #0F172A);border:1.5px solid var(--lokotro-border, #E2E8F0)}.lokotro-btn-secondary:hover{border-color:var(--lokotro-text-secondary, #64748B);background:var(--lokotro-surface, #F7F8FA)}.lokotro-countdown-indicator{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;background:var(--lokotro-surface, #F7F8FA);border:1px solid var(--lokotro-border, #E2E8F0);border-radius:999px;cursor:pointer;margin-top:20px;transition:all .18s ease;color:var(--lokotro-text-secondary, #64748B);font-family:inherit}.lokotro-countdown-indicator:hover{background:var(--lokotro-card, #FFFFFF);border-color:var(--lokotro-text-tertiary, #64748B)}.lokotro-countdown-circle{width:14px;height:14px;transform:rotate(-90deg)}.lokotro-countdown-bg{fill:none;stroke:var(--lokotro-border, #E2E8F0);stroke-width:4}.lokotro-countdown-fill{fill:none;stroke-width:4;stroke-linecap:round;transition:stroke-dasharray .3s ease}.lokotro-countdown-success{stroke:var(--lokotro-success, #16A34A)}.lokotro-countdown-error{stroke:var(--lokotro-error, #DC2626)}.lokotro-countdown-warning{stroke:var(--lokotro-warning, #D97706)}.lokotro-countdown-info{stroke:var(--lokotro-info, #2563EB)}.lokotro-countdown-text{font-size:12px;font-weight:500}.lokotro-countdown-cancel{color:inherit;opacity:.7}\n"] }]
         }], ctorParameters: () => [{ type: LokotroLocalizationService }], propDecorators: { type: [{
                 type: Input
             }], title: [{
@@ -3326,8 +3297,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
  * Lokotro Pay - Loading Component
  */
 class LokotroLoadingComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LokotroLoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: LokotroLoadingComponent, isStandalone: true, selector: "lokotro-loading", inputs: { message: "message" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LokotroLoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: LokotroLoadingComponent, isStandalone: true, selector: "lokotro-loading", inputs: { message: "message" }, ngImport: i0, template: `
     <div class="lokotro-loading">
       <div class="lokotro-loading-spinner">
         <div class="lokotro-pulse-ring"></div>
@@ -3340,7 +3311,7 @@ class LokotroLoadingComponent {
     </div>
     `, isInline: true, styles: [".lokotro-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:300px;padding:24px}.lokotro-loading-spinner{position:relative;width:60px;height:60px;margin-bottom:24px}.lokotro-pulse-ring{position:absolute;width:100%;height:100%;border:3px solid var(--lokotro-accent, #3BFBDA);border-radius:50%;opacity:0;animation:lokotro-pulse 2s cubic-bezier(.215,.61,.355,1) infinite}.lokotro-pulse-ring:nth-child(2){animation-delay:.5s}.lokotro-pulse-dot{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:16px;height:16px;background:var(--lokotro-accent, #3BFBDA);border-radius:50%;animation:lokotro-dot-pulse 2s ease-in-out infinite}@keyframes lokotro-pulse{0%{transform:scale(.5);opacity:.8}to{transform:scale(1.5);opacity:0}}@keyframes lokotro-dot-pulse{0%,to{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.2)}}.lokotro-loading-message{font-size:16px;color:var(--lokotro-text-secondary, #D5D3B8);margin:0}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LokotroLoadingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LokotroLoadingComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lokotro-loading', standalone: true, imports: [], template: `
     <div class="lokotro-loading">
@@ -4129,10 +4100,10 @@ class LokotroPaymentService {
             .map(item => this.asRecord(item))
             .filter((item) => Boolean(item));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LokotroPaymentService, deps: [{ token: LokotroHttpClientService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LokotroPaymentService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LokotroPaymentService, deps: [{ token: LokotroHttpClientService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LokotroPaymentService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LokotroPaymentService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LokotroPaymentService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -4146,14 +4117,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
 class LokotroPayCheckoutComponent {
     // Retry attempts tracking
     static { this.MAX_RETRY_ATTEMPTS = 3; }
-    constructor(paymentService, localization) {
+    constructor(paymentService, localization, elementRef) {
         this.paymentService = paymentService;
         this.localization = localization;
+        this.elementRef = elementRef;
         this.enableHapticFeedback = true;
         this.response = new EventEmitter();
         this.error = new EventEmitter();
         this.closed = new EventEmitter();
-        this.isDarkTheme = true;
+        /** Default to light theme — payment widgets should look like clean white cards. */
+        this.isDarkTheme = false;
         this.retryAttempts = 0;
     }
     /** Check if user has retries left */
@@ -4161,15 +4134,55 @@ class LokotroPayCheckoutComponent {
         return this.retryAttempts < LokotroPayCheckoutComponent.MAX_RETRY_ATTEMPTS;
     }
     ngOnInit() {
+        this.applyThemeConfig();
         this.initializeEnvironment();
         this.initializeLocalization();
         this.subscribeToState();
         this.initializePayment();
     }
+    ngOnChanges(changes) {
+        if (changes['themeConfig']) {
+            this.applyThemeConfig();
+        }
+    }
     ngOnDestroy() {
         this.stateSubscription?.unsubscribe();
         this.paymentService.resetState();
     }
+    /**
+     * Apply the merchant-provided theme as CSS custom properties on the
+     * checkout host element. Only sets variables for fields the merchant
+     * provided — undefined fields fall back to the package defaults defined
+     * in lokotro-pay.scss.
+     */
+    applyThemeConfig() {
+        const host = this.elementRef.nativeElement;
+        if (!this.themeConfig)
+            return;
+        const t = this.themeConfig;
+        const tertiary = t.tertiaryColor ?? t.accentColor;
+        const map = [
+            ['--lokotro-primary', t.primaryColor],
+            ['--lokotro-secondary', t.secondaryColor],
+            ['--lokotro-tertiary', tertiary],
+            ['--lokotro-accent', tertiary],
+            ['--lokotro-background', t.backgroundColor],
+            ['--lokotro-surface', t.surfaceColor],
+            ['--lokotro-card', t.surfaceColor],
+            ['--lokotro-text-primary', t.textColor],
+            ['--lokotro-text-secondary', t.secondaryTextColor],
+            ['--lokotro-border', t.borderColor],
+            ['--lokotro-error', t.errorColor],
+            ['--lokotro-success', t.successColor],
+            ['--lokotro-warning', t.warningColor],
+            ['--lokotro-font-family', t.fontFamily],
+            ['--lokotro-radius-md', t.borderRadius]
+        ];
+        for (const [prop, value] of map) {
+            if (value)
+                host.style.setProperty(prop, value);
+        }
+    }
     initializeEnvironment() {
         console.log('[Lokotro Checkout] initializeEnvironment - configs:', {
             token: this.configs.token?.substring(0, 20) + '...',
@@ -4396,9 +4409,10 @@ class LokotroPayCheckoutComponent {
         }
         this.closed.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LokotroPayCheckoutComponent, deps: [{ token: LokotroPaymentService }, { token: LokotroLocalizationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: LokotroPayCheckoutComponent, isStandalone: true, selector: "lokotro-pay-checkout", inputs: { title: "title", titleStyle: "titleStyle", titleBackgroundColor: "titleBackgroundColor", configs: "configs", paymentBody: "paymentBody", enableHapticFeedback: "enableHapticFeedback", backgroundColor: "backgroundColor", padding: "padding", themeConfig: "themeConfig", language: "language" }, outputs: { response: "response", error: "error", closed: "closed" }, ngImport: i0, template: `
-    <div class="lokotro-checkout" [class.lokotro-dark]="isDarkTheme" [style]="containerStyle">
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LokotroPayCheckoutComponent, deps: [{ token: LokotroPaymentService }, { token: LokotroLocalizationService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: LokotroPayCheckoutComponent, isStandalone: true, selector: "lokotro-pay-checkout", inputs: { title: "title", titleStyle: "titleStyle", titleBackgroundColor: "titleBackgroundColor", configs: "configs", paymentBody: "paymentBody", enableHapticFeedback: "enableHapticFeedback", backgroundColor: "backgroundColor", padding: "padding", themeConfig: "themeConfig", language: "language" }, outputs: { response: "response", error: "error", closed: "closed" }, usesOnChanges: true, ngImport: i0, template: `
+    <div class="lokotro-checkout" [class.lokotro-dark]="isDarkTheme" [style]="containerStyle"
+         role="dialog" aria-modal="true">
       <!-- Header -->
       @if (title) {
         <div class="lokotro-checkout-header" [style.background-color]="titleBackgroundColor">
@@ -4519,9 +4533,9 @@ class LokotroPayCheckoutComponent {
         }
       </div>
     </div>
-    `, isInline: true, styles: [".lokotro-checkout{display:flex;flex-direction:column;min-height:100%;background:var(--lokotro-background, #1C2621);color:var(--lokotro-text-primary, #F2F0D5);font-family:var(--lokotro-font-family, \"Comfortaa\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif)}.lokotro-checkout-header{display:flex;align-items:center;justify-content:space-between;padding:16px;background:var(--lokotro-surface, #2A3832);border-bottom:1px solid var(--lokotro-border, #3A473F)}.lokotro-title{flex:1;text-align:center;font-size:18px;font-weight:600;margin:0;color:var(--lokotro-text-primary, #F2F0D5)}.lokotro-back-btn,.lokotro-close-btn{background:none;border:none;padding:8px;cursor:pointer;color:var(--lokotro-text-primary, #F2F0D5);border-radius:8px;transition:background-color .2s}.lokotro-back-btn:hover,.lokotro-close-btn:hover{background:var(--lokotro-glass-light, rgba(255, 255, 255, .1))}.lokotro-checkout-content{flex:1;padding:16px;overflow-y:auto}.lokotro-dark{--lokotro-background: #1C2621;--lokotro-surface: #2A3832;--lokotro-text-primary: #F2F0D5;--lokotro-text-secondary: #D5D3B8}\n"], dependencies: [{ kind: "component", type: LokotroPaymentMethodSelectionComponent, selector: "lokotro-payment-method-selection", inputs: ["paymentMethods", "selectedMethod"], outputs: ["methodSelected"] }, { kind: "component", type: LokotroPaymentFormComponent, selector: "lokotro-payment-form", inputs: ["channel", "transactionId", "showUserInfoForm"], outputs: ["formSubmitted", "cancel"] }, { kind: "component", type: LokotroOtpVerificationComponent, selector: "lokotro-otp-verification", inputs: ["transactionId", "otpDestination", "otpLength"], outputs: ["otpVerified", "resendOtp", "cancel"] }, { kind: "component", type: LokotroProcessingComponent, selector: "lokotro-processing", inputs: ["type", "message"] }, { kind: "component", type: LokotroResultComponent, selector: "lokotro-result", inputs: ["type", "title", "message", "amount", "currency", "transactionId", "primaryActionLabel", "secondaryActionLabel", "autoRedirectSeconds"], outputs: ["primaryAction", "secondaryAction", "autoRedirect"] }, { kind: "component", type: LokotroLoadingComponent, selector: "lokotro-loading", inputs: ["message"] }] }); }
+    `, isInline: true, styles: [".lokotro-checkout{display:flex;flex-direction:column;min-height:100%;background:var(--lokotro-background, #FFFFFF);color:var(--lokotro-text-primary, #0F172A);font-family:var(--lokotro-font-family, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif)}.lokotro-checkout-header{display:flex;align-items:center;justify-content:space-between;padding:16px;background:var(--lokotro-background, #FFFFFF);border-bottom:1px solid var(--lokotro-border, #E2E8F0)}.lokotro-title{flex:1;text-align:center;font-size:18px;font-weight:600;margin:0;color:var(--lokotro-text-primary, #0F172A)}.lokotro-back-btn,.lokotro-close-btn{background:none;border:none;padding:8px;cursor:pointer;color:var(--lokotro-text-secondary, #475569);border-radius:8px;transition:background-color .2s,color .2s}.lokotro-back-btn:hover,.lokotro-close-btn:hover{background:var(--lokotro-surface, #F7F8FA);color:var(--lokotro-text-primary, #0F172A)}.lokotro-checkout-content{flex:1;padding:16px;overflow-y:auto}.lokotro-dark{--lokotro-background: #0F172A;--lokotro-surface: #1E293B;--lokotro-card: #1E293B;--lokotro-text-primary: #F8FAFC;--lokotro-text-secondary: #CBD5E1;--lokotro-border: #334155}\n"], dependencies: [{ kind: "component", type: LokotroPaymentMethodSelectionComponent, selector: "lokotro-payment-method-selection", inputs: ["paymentMethods", "selectedMethod"], outputs: ["methodSelected"] }, { kind: "component", type: LokotroPaymentFormComponent, selector: "lokotro-payment-form", inputs: ["channel", "transactionId", "showUserInfoForm"], outputs: ["formSubmitted", "cancel"] }, { kind: "component", type: LokotroOtpVerificationComponent, selector: "lokotro-otp-verification", inputs: ["transactionId", "otpDestination", "otpLength"], outputs: ["otpVerified", "resendOtp", "cancel"] }, { kind: "component", type: LokotroProcessingComponent, selector: "lokotro-processing", inputs: ["type", "message"] }, { kind: "component", type: LokotroResultComponent, selector: "lokotro-result", inputs: ["type", "title", "message", "amount", "currency", "transactionId", "primaryActionLabel", "secondaryActionLabel", "autoRedirectSeconds"], outputs: ["primaryAction", "secondaryAction", "autoRedirect"] }, { kind: "component", type: LokotroLoadingComponent, selector: "lokotro-loading", inputs: ["message"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LokotroPayCheckoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LokotroPayCheckoutComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lokotro-pay-checkout', standalone: true, imports: [
                         LokotroPaymentMethodSelectionComponent,
@@ -4531,7 +4545,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         LokotroResultComponent,
                         LokotroLoadingComponent
                     ], template: `
-    <div class="lokotro-checkout" [class.lokotro-dark]="isDarkTheme" [style]="containerStyle">
+    <div class="lokotro-checkout" [class.lokotro-dark]="isDarkTheme" [style]="containerStyle"
+         role="dialog" aria-modal="true">
       <!-- Header -->
       @if (title) {
         <div class="lokotro-checkout-header" [style.background-color]="titleBackgroundColor">
@@ -4652,8 +4667,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
         }
       </div>
     </div>
-    `, styles: [".lokotro-checkout{display:flex;flex-direction:column;min-height:100%;background:var(--lokotro-background, #1C2621);color:var(--lokotro-text-primary, #F2F0D5);font-family:var(--lokotro-font-family, \"Comfortaa\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif)}.lokotro-checkout-header{display:flex;align-items:center;justify-content:space-between;padding:16px;background:var(--lokotro-surface, #2A3832);border-bottom:1px solid var(--lokotro-border, #3A473F)}.lokotro-title{flex:1;text-align:center;font-size:18px;font-weight:600;margin:0;color:var(--lokotro-text-primary, #F2F0D5)}.lokotro-back-btn,.lokotro-close-btn{background:none;border:none;padding:8px;cursor:pointer;color:var(--lokotro-text-primary, #F2F0D5);border-radius:8px;transition:background-color .2s}.lokotro-back-btn:hover,.lokotro-close-btn:hover{background:var(--lokotro-glass-light, rgba(255, 255, 255, .1))}.lokotro-checkout-content{flex:1;padding:16px;overflow-y:auto}.lokotro-dark{--lokotro-background: #1C2621;--lokotro-surface: #2A3832;--lokotro-text-primary: #F2F0D5;--lokotro-text-secondary: #D5D3B8}\n"] }]
-        }], ctorParameters: () => [{ type: LokotroPaymentService }, { type: LokotroLocalizationService }], propDecorators: { title: [{
+    `, styles: [".lokotro-checkout{display:flex;flex-direction:column;min-height:100%;background:var(--lokotro-background, #FFFFFF);color:var(--lokotro-text-primary, #0F172A);font-family:var(--lokotro-font-family, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif)}.lokotro-checkout-header{display:flex;align-items:center;justify-content:space-between;padding:16px;background:var(--lokotro-background, #FFFFFF);border-bottom:1px solid var(--lokotro-border, #E2E8F0)}.lokotro-title{flex:1;text-align:center;font-size:18px;font-weight:600;margin:0;color:var(--lokotro-text-primary, #0F172A)}.lokotro-back-btn,.lokotro-close-btn{background:none;border:none;padding:8px;cursor:pointer;color:var(--lokotro-text-secondary, #475569);border-radius:8px;transition:background-color .2s,color .2s}.lokotro-back-btn:hover,.lokotro-close-btn:hover{background:var(--lokotro-surface, #F7F8FA);color:var(--lokotro-text-primary, #0F172A)}.lokotro-checkout-content{flex:1;padding:16px;overflow-y:auto}.lokotro-dark{--lokotro-background: #0F172A;--lokotro-surface: #1E293B;--lokotro-card: #1E293B;--lokotro-text-primary: #F8FAFC;--lokotro-text-secondary: #CBD5E1;--lokotro-border: #334155}\n"] }]
+        }], ctorParameters: () => [{ type: LokotroPaymentService }, { type: LokotroLocalizationService }, { type: i0.ElementRef }], propDecorators: { title: [{
                 type: Input
             }], titleStyle: [{
                 type: Input
@@ -4741,8 +4756,8 @@ class LokotroPayModule {
             ],
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LokotroPayModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.18", ngImport: i0, type: LokotroPayModule, imports: [ReactiveFormsModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LokotroPayModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: LokotroPayModule, imports: [ReactiveFormsModule,
             FormsModule,
             // Standalone components
             LokotroPayCheckoutComponent,
@@ -4758,14 +4773,14 @@ class LokotroPayModule {
             LokotroProcessingComponent,
             LokotroResultComponent,
             LokotroLoadingComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LokotroPayModule, imports: [ReactiveFormsModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LokotroPayModule, imports: [ReactiveFormsModule,
             FormsModule,
             // Standalone components
             LokotroPayCheckoutComponent,
             LokotroPaymentFormComponent,
             LokotroOtpVerificationComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LokotroPayModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LokotroPayModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -4794,110 +4809,96 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
 
 /**
  * Lokotro Pay - Color Constants
- * Angular version of the Flutter Lokotro Pay plugin colors
- */
-/**
- * Color scheme for Lokotro Pay - matching Lokotroo App design
+ *
+ * Neutral white-background palette intended for payment surfaces.
+ * Brand colors (primary/secondary/tertiary) default to slate so the
+ * widget renders correctly with no themeConfig provided. Merchants
+ * override at runtime via `<lokotro-pay-checkout [themeConfig]>`.
  */
 const LokotroPayColors = {
-    // Primary Brand Colors - Dark Green Theme
-    primary: '#5A5E39',
-    primaryDark: '#151E1A',
-    primaryLight: '#2A3832',
-    primaryVariant: '#121917',
-    // Secondary Colors - Olive Green
-    secondary: '#6E7346',
-    secondaryDark: '#5A5E39',
-    secondaryLight: '#868B57',
-    secondaryVariant: '#4D5131',
-    // Accent Colors - Turquoise for contrast
-    accent: '#3BFBDA',
-    accentDark: '#27D4B6',
-    accentLight: '#65FCE3',
-    // Success Colors - Enhanced Turquoise
-    success: '#3BFBDA',
-    successDark: '#27D4B6',
-    successLight: '#65FCE3',
-    // Error Colors - Terracotta
-    error: '#D97652',
-    errorDark: '#B15F41',
-    errorLight: '#E48F6F',
-    // Warning Colors - Terracotta
-    warning: '#D97652',
-    warningDark: '#B15F41',
-    warningLight: '#E48F6F',
-    // Info Colors
-    info: '#3B82F6',
-    infoDark: '#2563EB',
-    infoLight: '#60A5FA',
-    // Neutral Colors
+    // Brand - neutral defaults (override via themeConfig)
+    primary: '#0F172A',
+    primaryDark: '#020617',
+    primaryLight: '#1E293B',
+    primaryVariant: '#0F172A',
+    secondary: '#475569',
+    secondaryDark: '#334155',
+    secondaryLight: '#64748B',
+    secondaryVariant: '#1E293B',
+    // Tertiary (highlight / accent stop)
+    tertiary: '#2563EB',
+    tertiaryDark: '#1D4ED8',
+    tertiaryLight: '#3B82F6',
+    // Backwards-compat aliases
+    accent: '#2563EB',
+    accentDark: '#1D4ED8',
+    accentLight: '#3B82F6',
+    // Semantic - status colors (do not override)
+    success: '#16A34A',
+    successDark: '#15803D',
+    successLight: '#22C55E',
+    error: '#DC2626',
+    errorDark: '#B91C1C',
+    errorLight: '#EF4444',
+    warning: '#D97706',
+    warningDark: '#B45309',
+    warningLight: '#F59E0B',
+    info: '#2563EB',
+    infoDark: '#1D4ED8',
+    infoLight: '#3B82F6',
+    // Neutral
     white: '#FFFFFF',
     black: '#000000',
-    grey: '#9E9E9E',
-    greyLight: '#E0E0E0',
-    greyDark: '#424242',
-    // Text Colors - Light Theme (Cream tints)
-    textPrimaryLight: '#1C2621',
-    textSecondaryLight: '#6E7346',
-    textTertiaryLight: '#8F9367',
-    textDisabledLight: '#BDBDBD',
-    // Text Colors - Dark Theme (Green tints)
-    textPrimaryDark: '#F2F0D5',
-    textSecondaryDark: '#D5D3B8',
-    textTertiaryDark: '#B1AF97',
-    textDisabledDark: '#666666',
-    // Background Colors - Light Theme (Cream)
-    backgroundLight: '#F2F0D5',
-    surfaceLight: '#F8F7E8',
-    cardLight: '#FFFFFA',
-    // Background Colors - Dark Theme (Green tints)
-    backgroundDark: '#1C2621',
-    surfaceDark: '#2A3832',
-    cardDark: '#3A4840',
-    // Glassmorphism Colors
-    glassLight: 'rgba(255, 255, 255, 0.1)',
-    glassDark: 'rgba(0, 0, 0, 0.1)',
-    glassBlur: 'rgba(0, 0, 0, 0.5)',
-    // Border Colors
-    borderLight: '#E5E2C0',
-    borderDark: '#3A473F',
-    // Divider Colors
-    dividerLight: '#ECEAD7',
-    dividerDark: '#2E3933',
-    // Shadow Colors
-    shadowLight: 'rgba(0, 0, 0, 0.1)',
-    shadowMedium: 'rgba(0, 0, 0, 0.2)',
-    shadowDark: 'rgba(0, 0, 0, 0.3)',
-    // Overlay Colors
-    overlayLight: 'rgba(255, 255, 255, 0.5)',
-    overlayDark: 'rgba(0, 0, 0, 0.5)',
-    // Transaction Type Colors
-    transactionSent: '#D97652',
-    transactionReceived: '#3BFBDA',
-    transactionPending: '#6E7346',
-    transactionFailed: '#3A4840'
+    grey: '#94A3B8',
+    greyLight: '#E2E8F0',
+    greyDark: '#475569',
+    // Light theme (default)
+    textPrimaryLight: '#0F172A',
+    textSecondaryLight: '#475569',
+    textTertiaryLight: '#64748B',
+    textDisabledLight: '#94A3B8',
+    // Dark theme (opt-in)
+    textPrimaryDark: '#F8FAFC',
+    textSecondaryDark: '#CBD5E1',
+    textTertiaryDark: '#94A3B8',
+    textDisabledDark: '#64748B',
+    backgroundLight: '#FFFFFF',
+    surfaceLight: '#F7F8FA',
+    cardLight: '#FFFFFF',
+    backgroundDark: '#0F172A',
+    surfaceDark: '#1E293B',
+    cardDark: '#1E293B',
+    // Glass overlays
+    glassLight: 'rgba(255, 255, 255, 0.7)',
+    glassDark: 'rgba(15, 23, 42, 0.04)',
+    glassBlur: 'rgba(15, 23, 42, 0.5)',
+    borderLight: '#E2E8F0',
+    borderDark: '#334155',
+    dividerLight: '#F1F5F9',
+    dividerDark: '#1E293B',
+    shadowLight: 'rgba(15, 23, 42, 0.04)',
+    shadowMedium: 'rgba(15, 23, 42, 0.08)',
+    shadowDark: 'rgba(15, 23, 42, 0.12)',
+    overlayLight: 'rgba(255, 255, 255, 0.7)',
+    overlayDark: 'rgba(15, 23, 42, 0.5)',
+    // Transaction (semantic)
+    transactionSent: '#DC2626',
+    transactionReceived: '#16A34A',
+    transactionPending: '#D97706',
+    transactionFailed: '#475569'
 };
 /**
- * CSS Gradient definitions
- */
-const LokotroPayGradients = {
-    primary: `linear-gradient(135deg, ${LokotroPayColors.primary}, ${LokotroPayColors.secondary})`,
-    secondary: `linear-gradient(135deg, ${LokotroPayColors.secondary}, ${LokotroPayColors.secondaryLight})`,
-    accent: `linear-gradient(135deg, ${LokotroPayColors.accent}, ${LokotroPayColors.accentLight})`,
-    success: `linear-gradient(135deg, ${LokotroPayColors.success}, ${LokotroPayColors.successDark})`,
-    error: `linear-gradient(135deg, ${LokotroPayColors.error}, ${LokotroPayColors.errorDark})`,
-    warning: `linear-gradient(135deg, ${LokotroPayColors.warning}, ${LokotroPayColors.warningDark})`,
-    info: `linear-gradient(135deg, ${LokotroPayColors.info}, ${LokotroPayColors.infoLight})`,
-    card: `linear-gradient(135deg, ${LokotroPayColors.backgroundDark}, ${LokotroPayColors.secondary})`
-};
-/**
- * Default theme configuration
+ * Default theme — clean white payment surface.
+ *
+ * The checkout component sets these as CSS custom properties on its
+ * host element, so any merchant override scopes only to the widget.
  */
 const LokotroPayDefaultTheme = {
     light: {
         '--lokotro-primary': LokotroPayColors.primary,
         '--lokotro-secondary': LokotroPayColors.secondary,
-        '--lokotro-accent': LokotroPayColors.accent,
+        '--lokotro-tertiary': LokotroPayColors.tertiary,
+        '--lokotro-accent': LokotroPayColors.tertiary,
         '--lokotro-background': LokotroPayColors.backgroundLight,
         '--lokotro-surface': LokotroPayColors.surfaceLight,
         '--lokotro-card': LokotroPayColors.cardLight,
@@ -4913,7 +4914,8 @@ const LokotroPayDefaultTheme = {
     dark: {
         '--lokotro-primary': LokotroPayColors.primary,
         '--lokotro-secondary': LokotroPayColors.secondary,
-        '--lokotro-accent': LokotroPayColors.accent,
+        '--lokotro-tertiary': LokotroPayColors.tertiary,
+        '--lokotro-accent': LokotroPayColors.tertiary,
         '--lokotro-background': LokotroPayColors.backgroundDark,
         '--lokotro-surface': LokotroPayColors.surfaceDark,
         '--lokotro-card': LokotroPayColors.cardDark,
@@ -5226,8 +5228,8 @@ class LokotroPaymentStatusComponent {
         }
         this.onClose.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LokotroPaymentStatusComponent, deps: [{ token: LokotroPaymentService }, { token: LokotroLocalizationService }, { token: LokotroHttpClientService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: LokotroPaymentStatusComponent, isStandalone: true, selector: "lokotro-payment-status", inputs: { statusConfig: "statusConfig", showHeader: "showHeader", showCloseButton: "showCloseButton" }, outputs: { statusChange: "statusChange", paymentComplete: "paymentComplete", paymentFailed: "paymentFailed", onClose: "onClose", onDoneEvent: "onDoneEvent" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LokotroPaymentStatusComponent, deps: [{ token: LokotroPaymentService }, { token: LokotroLocalizationService }, { token: LokotroHttpClientService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: LokotroPaymentStatusComponent, isStandalone: true, selector: "lokotro-payment-status", inputs: { statusConfig: "statusConfig", showHeader: "showHeader", showCloseButton: "showCloseButton" }, outputs: { statusChange: "statusChange", paymentComplete: "paymentComplete", paymentFailed: "paymentFailed", onClose: "onClose", onDoneEvent: "onDoneEvent" }, ngImport: i0, template: `
     <div class="lokotro-payment-status-container">
       <!-- Header -->
       @if (showHeader) {
@@ -5344,7 +5346,7 @@ class LokotroPaymentStatusComponent {
     </div>
     `, isInline: true, styles: [".lokotro-payment-status-container{min-height:300px;display:flex;flex-direction:column;background:var(--lokotro-background, #1C2621);border-radius:16px;border:1px solid var(--lokotro-border, rgba(59, 251, 218, .1));overflow:hidden;font-family:var(--lokotro-font-family, \"Comfortaa\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif)}.lokotro-status-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:var(--lokotro-surface, #2A3832);border-bottom:1px solid var(--lokotro-border, rgba(59, 251, 218, .1))}.lokotro-status-title{font-size:18px;font-weight:600;color:var(--lokotro-text-primary, #F2F0D5);margin:0}.lokotro-close-btn{background:none;border:none;padding:8px;cursor:pointer;color:var(--lokotro-text-primary, #F2F0D5);border-radius:8px;transition:background-color .2s}.lokotro-close-btn:hover{background:#ffffff1a}.lokotro-status-content{flex:1;padding:24px;display:flex;flex-direction:column;align-items:center;justify-content:center}.status-section{text-align:center;width:100%;max-width:400px}.status-icon{width:80px;height:80px;margin:0 auto 24px;display:flex;align-items:center;justify-content:center;border-radius:50%}.pending-icon{background:#fbbf241a;color:#fbbf24}.status-title{font-size:22px;font-weight:600;color:var(--lokotro-text-primary, #F2F0D5);margin:0 0 12px}.status-message{font-size:14px;color:var(--lokotro-text-secondary, rgba(242, 240, 213, .7));margin:0 0 24px;line-height:1.5}.payment-info{background:#5a5e3933;border-radius:12px;padding:16px;margin-bottom:24px}.info-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid rgba(242,240,213,.1)}.info-row:last-child{border-bottom:none}.info-label{color:var(--lokotro-text-secondary, rgba(242, 240, 213, .6));font-size:14px}.info-value{color:var(--lokotro-text-primary, #F2F0D5);font-size:14px;font-weight:500}.polling-indicator{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;color:var(--lokotro-text-secondary, rgba(242, 240, 213, .5))}.pulse{width:8px;height:8px;background:var(--lokotro-primary, #3BFBDA);border-radius:50%;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.2)}}\n"], dependencies: [{ kind: "component", type: LokotroLoadingComponent, selector: "lokotro-loading", inputs: ["message"] }, { kind: "component", type: LokotroResultComponent, selector: "lokotro-result", inputs: ["type", "title", "message", "amount", "currency", "transactionId", "primaryActionLabel", "secondaryActionLabel", "autoRedirectSeconds"], outputs: ["primaryAction", "secondaryAction", "autoRedirect"] }, { kind: "component", type: LokotroProcessingComponent, selector: "lokotro-processing", inputs: ["type", "message"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LokotroPaymentStatusComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LokotroPaymentStatusComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lokotro-payment-status', standalone: true, imports: [LokotroLoadingComponent, LokotroResultComponent, LokotroProcessingComponent], template: `
     <div class="lokotro-payment-status-container">