/* ==========================================================================
STYLES
========================================================================== */

.biky-price-calculator {
	.list-months {
		display: grid;
		gap: calc(var(--wp--custom--main-size) * .25);
		grid-template-columns: repeat(1, minmax(0, 1fr));
		.item {
			border: 1px solid rgba(0, 0, 0, .1);
			border-radius: .5rem;
			overflow: hidden;
			padding: calc(var(--wp--custom--main-size) * .5);
			background-color: #FFF;
			>* {
				&:not(:first-child) {
					margin-block-start: calc(var(--wp--custom--main-size) * .1);
				}
			}
			p {
				font-weight: 700;
				small {
					text-transform: capitalize;
					font-size: 0.75rem;
				}
			}
			select {
				font-size: 14px;
				border-color: transparent;
				padding: 0;
				background-position: right 0 center;
				background-color: transparent;
			}
		}
	}
	&:not(.active) {
		.list-months {
			pointer-events: none;
			opacity: .5;
		}
	}
	.wrap-total {
		border: 1px solid rgba(0, 0, 0, .1);
		border-radius: .5rem;
		overflow: hidden;
		padding: var(--wp--custom--main-size);
		background-color: rgba(0, 0, 0, .03);
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.buttons-plan {
		display: flex;
		border: 1px solid rgba(0, 0, 0, .2);
		background-color: rgba(0, 0, 0, .03);
		border-radius: .5rem;
		overflow: hidden;
		font-weight: 500;
		/* background-color: #FFF; */
		.form-check {
			width: 33.333%;
			text-transform: uppercase;
			margin: 0;
			padding: 0;
			&:not(:last-child) {
				border-right: 1px solid rgba(0, 0, 0, .2);
			}
			input {
				display: none;
				&:checked+label {
					background-color: var(--wp--custom--color-tertiary-hover);
					color: var(--wp--preset--color--primary);
				}
			}
			label {
				padding-block: var(--wp--custom--button-padding-y);
				padding-inline: 1rem;
				font-size: 14px;
				text-align: center;
			}
		}
	}
	@media (min-width: 768px) {
		.list-months {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
		.top-wrap {
			display: flex;
			align-items: center;
			/* justify-content: center; */
			gap: var(--wp--custom--main-size);
		}
		.buttons-plan {
			width: 450px;
		}
	}
	@media (min-width: 1200px) {
		.list-months {
			grid-template-columns: repeat(3, minmax(0, 1fr));
			gap: calc(var(--wp--custom--main-size) * .5);
		}
	}
}