/*
Available vars (Elementor)

--e-global-color-primary: #FFCC00; primary: yellow
--e-global-color-secondary: #1D1D1B; secondary: black
--e-global-color-text: #FFFFFF; text
--e-global-color-accent: #D53192; accent color
--e-global-color-631cf17: #222222; background light (page bg)
--e-global-color-4f220a9: #1D1D1B; background dark
--e-global-color-d9fa3d1: #2A2A2A; border

*/

.tarifrechner-homepage-widget {
	background-color: white;
	border-radius: 2rem;
	overflow: hidden;
	box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.7);

	.tarifrechner-homepage-widget-tabs {
		display: flex;
		justify-content: space-evenly;
		flex-direction: column;

		@media (min-width: 450px) {
			flex-direction: row;
		}

		.tarifrechner-homepage-widget-tab {
			width: 100%;
			background-color: #d9d9d9;
			color: #1d1d1b;
			border-radius: 0;
			border: none;
			padding: .75rem;
			font-weight: bold;

			&:not(:last-child){
				border-right: 1px solid #aaa9a9;
			}

			&.is-active {
				background-color: white;
				color: var(--e-global-color-secondary, #1d1d1b);
			}
		}
	}
	.tarifrechner-homepage-title {
		margin: 2rem 2rem 0
	}
	form {
		display: flex;
		justify-content: space-evenly;
		gap: 1rem;
		padding: 2rem;
		flex-direction: column;

		@media (min-width: 900px) {
			flex-direction: row;
		}

		&>div{
			flex: 1;
		}

		/* Beschreibungen */
		.tarifrechner-homepage-desc {
			min-height: 2rem;
			padding-bottom: 1rem;
		}

		/* Formular-Elemente */
		select, input, button {
			height: 2.5rem;
			line-height: 2.5rem;
			border-radius: 8px;
			border: 1px solid #cecece;
		}
		select, input {
			background-color: white;
		}
		button[type="submit"] {
			padding: 0 1rem;
			width: 100%;
			border-radius: 30px;
			border: none;
		}

		/* Personen-Buttons */
		.tarifrechner-homepage-people-buttons {
			display: flex;
			gap: 0.5rem;
		}
		.tarifrechner-homepage-people-button {
			max-width: 2.5rem;
			background: none;
			border: none;
			border-radius: 0;
			color: #cecece;
			padding: 0;

			&.active {
				color: var(--e-global-color-accent);
			}

			svg {
				width: 100%;
			}
		}
	}
}