/* payment.css */

#payment-integration-checkout-page {
	display: flex;
	flex-direction: column;

	margin: -2.5rem -1rem;

	background: #f5f5f5;
	color: rgb(10 19 18);

	font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", "Noto Sans CJK SC", sans-serif;

	svg { display: none; }

	* {
		font-size: 16px;
		font-weight: 400;
		color: rgb(10 19 18);

	}


	&.mx-auto.max-w-5xl.space-y-6 {
		max-width: none;
	}



	input[type=radio] {
		appearance: none;
		-webkit-appearance: none;

		width: 20px;
		height: 20px;
		border: 2px solid #13A07B;
		border-radius: 50%;
		background-color: #fff;
		cursor: pointer;

		display: inline-grid;
		place-content: center;
		vertical-align: middle;
	}
	input[type="radio"]::before {
		content: "";
		width: 10px;
		height: 10px;
		border-radius: 50%;
		transform: scale(0);
		transition: transform 0.15s ease-in-out;
		background-color: #13A07B;
	}

	input[type="radio"]:checked {
		border-color: #13A07B;
	}

	input[type="radio"]:checked::before {
		transform: scale(1);
	}

	input[type="radio"]:focus-visible {
		outline: 3px solid rgba(59, 130, 246, 0.35);
		outline-offset: 2px;
	}

	input[type="checkbox"] {
		appearance: none;
		-webkit-appearance: none;

		width: 18px;
		height: 18px;
		border: 2px solid #9ca3af;
		border-radius: 2px;
		background-color: #fff;
		cursor: pointer;

		display: inline-grid;
		place-content: center;
		vertical-align: middle;
	}

	input[type="checkbox"]::before {
		content: "";
		width: 8px;
		height: 4px;
		border-left: 3px solid white;
		border-bottom: 3px solid white;
		transform: rotate(-45deg) scale(0);
		transition: transform 0.15s ease-in-out;
	}

	input[type="checkbox"]:checked {
		background-color: #13A07B;
		border-color: #13A07B;
	}

	input[type="checkbox"]:disabled:checked {
		background-color: #d1d1d1;
		border-color: #d1d1d1;
	}

	input[type="checkbox"]:checked::before {
		transform: rotate(-45deg) scale(1) translateX(1px);
	}

	input[type="checkbox"]:focus-visible {
		outline: 6px solid rgba(37, 99, 235, 0.35);
		outline-offset: 2px;
	}


	/* header */
	> .flex.items-start.justify-between.gap-4 {
		order: 2;

		margin: 1rem 1rem 0;
		background: #d9ebe7;
		padding: 12px 16px;
		color: #232323;

		border-radius: 10px 10px 0 0;



		a {
			display: none;
		}
	}


	/* error message */
	.flex.items-start.gap-3.rounded-md.border.px-4.py-3.text-sm.border-red-200.bg-red-50.text-red-800 {
		order: 1;


		margin: 1rem;
		margin-bottom: 0;

		border: none;
		border-radius: 0;

		svg { display: none; }

		background: #F33B40;
		border-radius: 10px;
		color: #fff;

		* { color: #fff;}
	}

	/* success message */
	.flex.items-start.gap-3.rounded-md.border.px-4.py-3.text-sm.border-green-200.bg-green-50.text-green-800 {
		order: 1;

		margin: 1rem;
		margin-bottom: 0;
		border: none;
		border-radius: 0;

		background: #13A07B;
		border-radius: 10px;
		color: #fff;

		* { color: #fff;}
	}

	/* body */
	> .grid.gap-6.lg\:grid-cols-\[1fr_360px\] {
		order: 3;
		margin: 0;
		grid-template-columns: 1fr;

		> section {
			margin: 0 1rem;
		}

		.text-gray-500 {
			color: #6c6c6c;
			line-height: 24px;
		}


		.rounded-lg:first-child {

			.p-6.pt-0.space-y-3 {
				.flex.flex-wrap.items-center.gap-2 {
					> div {
						background: none;
						padding: 0;
					}
				}

				h2 {
					padding: 0;
				}
			}
		}

		.rounded-lg {
			border-radius: 0;
			margin: 0;

			&.border {
				border: none;
				border-bottom: 1px solid #D1D1D6;
			}

			&.shadow-sm {
				box-shadow: none;
			}

			label.rounded-md {
				border-radius: 0;
				border: none;

				background: transparent;

			}

			&:last-child {
				border: none;
				border-radius: 0 0 10px 10px;
			}
		}
	}

	/* footer */
	aside {
		position: sticky;
		bottom: 0;

		margin-top: 10px;
		padding: 0px;
		box-shadow: 0px -5px 10px 0 rgba(0, 0, 0, 0.12);


		#payment-integration-payment-summary {
			border-radius: 0;
			padding-bottom: calc(16px + env(safe-area-inset-bottom));

		
			&.border {
				border: none;
			}


			> div:last-child {
				display: grid;

				button {
					background-color: #13a07b;
					color: #fff;
					border: none;
					border-radius: 9999px;
					height: 52px;
					width: 83%;
					font-size: 18px;
					font-weight: 400;
					display: flex;
					align-items: center;
					justify-content: center;
					justify-self: center;
					cursor: pointer;
					transition: opacity 0.2s;
					text-decoration: none
				}
			}
		}
	}
}