#program-request-thank,
#ai-token-popup,
.order-list {
	display:flex;
	flex-wrap:wrap;
	gap:var(--MainGap);

	&+h2.title {
		margin-top:var(--45);
	}

	.types,
	.order {
		flex:0 0 var(--385);

		&:has([name^="type"][value^="KASPI"]:checked) {
			.submit {
				.btn.pay {
					display:none;
				}
			}
		}

		&:not(:has([name^="type"][value^="KASPI"]:checked)) {
			.submit {
				.btn.kaspi {
					display:none;
				}
			}
		}

		&:not(:has(input[name*="type"][value="P"]:checked)) .promo {
			display:none;
		}

		.title {
			margin-bottom:var(--7);

			a,
			span {
				display:inline-block;
				font-size:var(--20);
				font-weight: 600;
			}
		}

		.description {
			color: #7A8188;
			font-size:var(--18);
			font-weight: 300;
			line-height:var(--28);
			margin-bottom:var(--7);
		}

		.dates {
			font-size:var(--19);
			font-weight:300;
		}

		.status {
			margin-top:var(--20);
			font-weight:500;
			font-size:var(--18);
		}

		&,
		.types {
			display:flex;
			flex-direction:column;
			gap:var(--16);
			margin-top:var(--45);

			&:has(.type):has(input[name*="type"][value="I"]:not(:checked)) {
				.type.bin {
					display:none;
				}
			}

			.type {
				position:relative;

				&.hidden {
					display:none;
				}
			}
		}

		.promo {
			margin-top:var(--15);

			.text {
				height: var(--40);
				border: 2px solid var(--Black);
				text-align: center;
				font-size: var(--20);
				font-weight: 600;
				padding: var(--3) var(--5) 0;
				width:100%;
			}
		}

		.submit {
			margin-top:var(--45);
			display:flex;
			gap:var(--20);
			align-items:center;
		}

		.amount {
			display:flex;
			margin-top:var(--10);

			.btn {
				flex:0 0 var(--40);
				padding:0;
				position:relative;

				&.p:after,
				&:before {
					content:"";
					display:block;
					width:var(--16);
					height:var(--2);
					background:var(--White);
					transition:all .3s linear;
					position:absolute;
					left:50%;
					top:50%;
					transform:translate(-50%,-50%);
				}

				&.p:after {
					height:var(--16);
					width:var(--2);
				}

				&:hover:before,
				&.p:hover:after {
					background:var(--Black);
				}

				&.m {
					margin-left:var(--3);
				}
			}

			.total {
				flex:1;
				display:flex;
				align-items:center;
				white-space:nowrap;
				margin-left:var(--30);
				gap:var(--5);

				span.label {
					display:inline-block;
					color: #7A8188;
					font-size:var(--20);
					font-weight: 300;
				}
				span.value {
					display:inline-block;
					font-size:var(--20);
					font-weight: 600;
				}
			}
		}

		.text {
			flex:0 0 var(--40);
			height:var(--40);
			border:2px solid var(--Black);
			text-align:center;
			font-size:var(--20);
			font-weight: 600;
			padding:var(--3) var(--5) 0;
			width:0;
		}

		.bin {
			.text {
				width:100%;
				text-align:left;
			}
		}
	}

	.kaspi-info {
		margin-top: var(--25);
		display: flex;
		flex-direction: column;
		gap: var(--15);
		align-items: center;
		justify-content: center;
		background: rgba(var(--Kaspi), 0.05); /* мягкий оттенок */
		border-radius: var(--12);
		border: 1px solid var(--Kaspi);
		padding: var(--20) var(--15);
		box-shadow: 0 2px 6px rgba(0,0,0,0.08);

		.title {
			font-size: var(--22);
			font-weight: 700;
			text-align: center;
			color: var(--Black);
		}

		img {
			max-width:var(--160);
			background: #fff;
			padding: var(--10);
			border-radius: var(--10);
			box-shadow: 0 1px 4px rgba(0,0,0,0.1);
		}
	}
}

.promo-code-list {
	display:flex;
	flex-direction:column;

	.r {
		display:flex;
		border-bottom:2px solid #D1D9E0;
		gap:var(--MainGap);

		&.h {
			font-weight: 500;
			color:var(--Black);
		}

		.c {
			flex:1;
			font-weight: 300;
			font-size: var(--18);
			line-height: var(--24);
			color: #7A8188;
			padding:var(--16) 0;

			&.h {
				font-weight: 500;
				color:var(--Black);
			}

			&.date {
				flex:0 0 var(--190);
			}

			&.code {
				flex:0 0 100px;
			}

			&.product {
				flex:0 0 var(--300);
			}

			&.url {
				cursor:pointer;
				text-decoration:underline;
				text-decoration-style:dotted;
			}
		}
	}
}

#ai-token-popup {
	&:not(:has(#typeKASPI:checked)) {
		.kaspi-info {
			display:none;
		}
	}

	.types {
		flex:none;
		margin:var(--20) 0 0;
	}
}

#program-request-thank,
#ai-token-popup,
.order-list {
	.types,
	.order {
		flex:none;

		&,
		.types {
			margin:0;
		}
	}
}