@import '../../../../Components/GlobalStyles/colors';

.cardsContainer {
	margin-top: 46px;
	position: relative;

	&.embed {
		margin-top: 0;
	}

	h3 {
		text-align: center;
	}

	.green {
		color: var(--primary-color);
	}

	.red {
		color: $red !important;
	}

	.submitButton {
		background-color: var(--primary-color);
		padding: 0;
		border-radius: 10px;
		margin-top: 78px;
		white-space: nowrap;

		a,
		span {
			padding: 15px 69px;
			text-decoration: none;
			color: white;
			font-size: 1.125em;
			font-weight: 800;
		}

		&.submitting {
			a,
			span {
				color: gray;
			}
		}

		&:hover {
			background-color: var(--primary-color-dark) !important;
		}
	}

	.cancelButton {
		background-color: #fff;
		padding: 0;
		border-radius: 10px;
		border: 0;
		margin-top: 19px;
		margin-left: 50px;
		width: 267px;
		white-space: nowrap;

		a,
		span {
			padding: 15px 69px;
			text-decoration: none;
			color: $font-light-grey;
			font-size: 1.125em;
			font-weight: 800;
		}

		&:hover {
			background-color: $grey-button;
		}
	}

	.form {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-bottom: 20px;

		.card {
			display: flex;
			justify-content: center;

			div {
				margin: 42px 27px;
				width: 271px;
				height: 300px;
				border-radius: 10px;

				@media (max-width: 900px) {
					margin: 15px 0;
				}
			}

			@media (max-width: 1000px) {
				flex-wrap: wrap;
				column-gap: 20px;
			}

			.cardContainer {
				cursor: pointer;
				position: relative;
				padding: 22px 42px 12px 23px;
				display: flex;
				flex-direction: column;
				box-shadow: 0 3px 13px 0 $dropShadow;
				transition: all 0.3s ease-in-out;
				justify-content: space-between;
				min-height: 300px;
				height: auto !important;

				&:hover {
					transform: scale(1.05);
					border: 2px solid var(--primary-color);

					// TODO Make the cards rotate properly with perspective and put
					// TODO another white div for the background
				}

				label {
					font-size: 24px;
					height: 80px;
					width: 203px;
					font-weight: 600;
					color: var(--primary-color);
					max-width: 200px;
				}

				p {
					color: $dark;
					font-size: 0.875em;
				}

				input {
					appearance: none;
				}

				h4 {
					margin: auto 0 24px;
					font-size: 1.125em;
				}

				svg {
					transform: scale(1.3);
					position: absolute;
					top: 22px;
					right: 17px;
				}

				.active {
					path {
						fill: var(--primary-color);
					}
				}

				.nonActive {
					path {
						fill: transparentize($grey-button, 0.7);
					}
				}

				.radioButtonThird {
					path {
						fill: transparentize($grey-button, 0.7);
					}
				}
			}

			.clientsCards {
				&:hover {
					cursor: pointer;
				}

				label {
					&:hover {
						cursor: pointer;
					}
				}
			}

			.activeClients,
			.nonActiveClients {
				color: grey;
			}

			.activeClients {
				border: 1px solid var(--primary-color);
			}

			.nonActiveClients {
				border: none;
			}

			.cardContainer.radioButtonPrimary {
				border: solid 1px var(--primary-color);
			}

			.radioButtonSecondary {
				border: none;

				path {
					fill: transparentize($grey-button, 0.7);
				}
			}
		}
	}
}