@import "@Themes/constants.scss";

.root {
	width: 372px;

	@media (max-width: $screen-s) {
		width: 100%;
	}
	.container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 32px;
		box-shadow: 0px 8px 10px 0px #00000012;
		padding: 22px 40px;
		border-radius: 16px;

		@media (max-width: $screen-s) {
			box-shadow: none;
			padding: 0px;
		}

		.forfeit-type {
			text-align: center;
		}

		.container-frequency {
			display: flex;
			justify-content: space-between;
		}

		.separator {
			width: 100%;
			height: 1px;
			background-color: gray;
		}

		.container-line {
			display: flex;
			flex-direction: column;
			gap: 24px;
			.line {
				display: flex;
				justify-content: space-between;

				.line-sub-container {
					display: flex;
					flex-direction: column;
				}
			}
		}

		.container-tight {
			gap: 8px;
		}

		.payment-button {
			@media (max-width: $screen-s) {
				display: none;
			}
		}
	}
}