continue: made a payments method list

src/app/styles/global-styles.scss

@@ -151,6 +151,10 @@
 	display: inline-flex;
 	align-items: center;
 	justify-content: center;
+
+	&:disabled {
+		opacity: 0.5;
+	}
 }
 
 .btn-primary {
@@ -190,6 +194,14 @@
 	}
 }
 
+.btn-warning {
+	background: v.$color-warning;
+
+	&:hover {
+		background: v.$color-warning-hover;
+	}
+}
+
 .divider {
 	text-align: center;
 	margin: 20px 0;

src/app/styles/pages-styles.scss

@@ -5250,8 +5250,128 @@
 }
 
 .payment-user-cards {
-	.card-wrapper {
+	h3 {
+		color: #1e293b;
+		align-items: center;
+		gap: 8px;
+		margin-bottom: 16px;
+		font-size: 1.1rem;
+		display: flex;
+	}
+
+	.cards-wrapper {
+		background: #f8fafc;
+		border: 1.5px dashed #d1d5db;
+		border-radius: 14px;
+		padding: 20px;
+		text-align: center;
+	}
+
+	.card-item {
 		display: flex;
 		gap: 10px;
+		margin-bottom: 10px;
+		justify-content: space-between;
+		border-radius: 14px;
+
+		&-info {
+			display: flex;
+			width: 100%;
+			max-width: 400px;
+			color: v.$text-s;
+			align-items: center;
+			position: relative;
+		}
+
+		&-type {
+			font-size: 10px;
+			color: v.$text-s;
+			margin-left: 5px;
+			position: absolute;
+			right: 10px;
+			/* top: 3px; */
+
+			@media (max-width: 490px) {
+				font-size: 8px;
+			}
+		}
+
+		&-expired {
+			font-size: 10px;
+			color: v.$text-s;
+			margin-left: 5px;
+			position: absolute;
+			right: 10px;
+			bottom: 3px;
+
+			@media (max-width: 490px) {
+				font-size: 8px;
+			}
+		}
+
+		&-confirm-window {
+			h4 {
+				text-align: center;
+				margin-bottom: 15px;
+			}
+		}
+
+		&-confirm-action {
+			display: flex;
+			gap: 10px;
+			justify-content: center;
+
+			.btn {
+				max-width: 140px;
+				width: 100%;
+
+				position: relative;
+			}
+		}
+
+		&:last-child {
+			margin-bottom: 0;
+		}
+
+		&:hover {
+			background: #e2e4e6;
+		}
+
+		input {
+			background: v.$white;
+			padding: 5px 10px;
+
+			@media (max-width: 490px) {
+				font-size: 14px;
+			}
+		}
+
+		.btn {
+			padding: 5px 10px;
+		}
+	}
+
+	&-empty {
+		.empty-card-title {
+			font-size: 14px;
+			color: #64748b;
+			font-weight: 500;
+		}
+
+		.empty-card-text {
+			font-size: 12px;
+			color: #9ca3af;
+			margin-top: 4px;
+		}
+	}
+
+	&-notification {
+		margin-top: 14px;
+		padding: 12px 16px;
+		background: #fafafa;
+		border-radius: 10px;
+		font-size: 11px;
+		color: #9ca3af;
+		line-height: 1.6;
 	}
 }

src/app/styles/variable.scss

@@ -17,6 +17,8 @@ $p-color-disabled: #6365f18e;
 $s-color-disabled: #8a5cf663;
 $border-color-1: #e2e8f0;
 $border-color-1-hover: #b1b7be;
+$color-warning: #fab005;
+$color-warning-hover: #fa9805;
 
 $color-image: #f08c00;
 $color-video: #2f9e44;