feat(front-enc):

frontend/src/app/features/payment/payment.component.html

@@ -28,7 +28,7 @@
           </div>
         </div>
 
-        <div class="payment-details fade-in" *ngIf="selectedPaymentMethod === 'twint'">
+        <div class="payment-details fade-in text-center" *ngIf="selectedPaymentMethod === 'twint'">
           <div class="details-header">
             <h4>{{ 'PAYMENT.TWINT_TITLE' | translate }}</h4>
           </div>
@@ -42,7 +42,7 @@
             <p>{{ 'PAYMENT.TWINT_DESC' | translate }}</p>
             <p class="billing-hint">{{ 'PAYMENT.BILLING_INFO_HINT' | translate }}</p>
             <div class="twint-mobile-action">
-              <app-button (click)="openTwintPayment()" [fullWidth]="true">
+              <app-button variant="outline" (click)="openTwintPayment()" [fullWidth]="true">
                 {{ 'PAYMENT.TWINT_OPEN' | translate }}
               </app-button>
             </div>

frontend/src/app/features/payment/payment.component.scss

@@ -95,6 +95,28 @@
   margin-bottom: var(--space-6);
   border: 1px solid var(--color-border);
 
+  &.text-center {
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+
+    .details-header {
+      width: 100%;
+      text-align: center;
+    }
+    
+    .qr-placeholder {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+    }
+  }
+
   .details-header {
     margin-bottom: var(--space-4);
     h4 {

frontend/src/app/features/payment/payment.component.ts

@@ -90,7 +90,7 @@ export class PaymentComponent implements OnInit {
   openTwintPayment(): void {
     const openUrl = this.twintOpenUrl();
     if (typeof window !== 'undefined' && openUrl) {
-      window.location.href = openUrl;
+      window.open(openUrl, '_blank');
     }
   }
 

frontend/src/app/shared/components/app-button/app-button.component.scss

@@ -32,12 +32,14 @@
 
 .btn-outline {
   background-color: transparent;
-  border-color: var(--color-border);
-  color: var(--color-text);
+  border-color: var(--color-brand);
+  border-width: 2px;
+  padding: calc(0.5rem - 1px) calc(1rem - 1px);
+  color: var(--color-neutral-900);
+  font-weight: 600;
   &:hover:not(:disabled) { 
-    border-color: var(--color-brand); 
+    background-color: var(--color-brand); 
     color: var(--color-neutral-900);
-    background-color: rgba(250, 207, 10, 0.1); /* Low opacity brand color */
   }
 }