:root{
	--main-bg: #f4f6fa;
	--dark-bg: #333333;
	--box-shadow: 0 10px 20px #0f172a0f;
	--border-radius: 1rem;
	--border: 1px solid #e5eaf2;
	--inner-bg: #f8fbff;
	--inner-border: 1px solid #dbe8ff;
	--accent-blue: #1456ff;
	--accent-purple: #7c3aed;
	--weak-text-color: #555555;
	--danger-color: #ff000099;
}

*{
	font-family: sans-serif;
	font-size: 16px;
	box-sizing: border-box;
}

html, body{
	height: 100%;
	margin: 0;
	background-color: var(--main-bg);
}

a.call-button{
	background-color: var(--accent-blue);
	border-radius: 999px;
	padding: 1rem 2rem;
	color: white;
	text-decoration: none;
	font-weight: bold;
	display: inline-block;
}

.required-star{
	color: red;
}

/* Specifics */

#content{
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

#header{
	background-color: var(--dark-bg);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	padding: 0.5rem 3rem;
	color: white;
}

	#logo h1{
		font-size: 1.7rem;
		text-align: center;
	}

	#header .call-button{
		border-radius: 0.2rem;
		background-color: var(--accent-purple);
	}

@media (min-width: 768px) {

	#header{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

		#logo h1{
			text-align: left;
		}
}

#topInfoArea{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

	#topInfo{
		background-color: white;
		width: 95%;
		max-width: 1024px;
		padding: 1.8rem 1rem;
		box-shadow: var(--box-shadow);
		border-radius: var(--border-radius);
		border: var(--border);
	}

		#topInfo h2{
			font-size: 1.5rem;
		}

		#topInfo>p{
			font-size: 1rem;
		}

		#topInfoFeatures{
			margin-top: 3rem;
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
			gap: 1rem;
		}

			.top-info-feature-block{
				width: 100%;
				max-width: 700px;
				min-width: 150px;
				padding: 0 1rem;
				box-shadow: var(--box-shadow);
				border-radius: var(--border-radius);
				border: var(--inner-border);
				background-color: var(--inner-bg);
				display: flex;
				flex-direction: row;
				gap: 1rem;
				align-items: center;
			}

				.feature-block-icon svg{
					height: 2rem;
				}

				.top-info-feature-block p{
					font-weight: bold;
				}

		#topInfoCallContainer{
			margin-top: 2rem;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
		}

@media (min-width: 768px ) {
	#topInfo h2{
		font-size: 2.5rem;
	}

	#topInfo>p{
		font-size: 1.2rem;
	}

	#topInfoFeatures{
		grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	}

		.top-info-feature-block{
			min-width: 300px;
		}
}

#productArea{
	padding: 0.5rem 1rem;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
	gap: 1rem;
}

	.product-item{
		width: 100%;
		max-width: 750px;
		min-width: 0;
		justify-self: center;
		padding: 1rem 1rem;
		box-shadow: var(--box-shadow);
		border-radius: var(--border-radius);
		border: var(--border);
		background-color: white;
	}

		.product-image-area{
			position: relative;
			background-color: var(--inner-bg);
			border-radius: var(--border-radius);
			margin: -1rem -1rem 0 -1rem;
		}

			.product-image{
				width: 100%;
				max-height: 135px;
				margin: 1rem auto;
				object-fit: contain;
			}

			.product-type-indicator{
				position: absolute;
				top: 2rem;
				right: 1rem;
				border-radius: 999px;
				background-color: var(--accent-blue);
				border: var(--border);
				box-shadow: var(--box-shadow);
				color: white;
				padding: 0.5rem 1rem;
				font-weight: bold;
				font-size: 0.8rem;
			}

		.product-content-area{
			padding: 1rem 0;
		}

			.product-title-area h3{
				font-size: 0.8rem;
				margin: 0.4rem 0;
			}

			.product-price{
				color: var(--accent-blue);
				font-size: 1.1rem;
				font-weight: bold;
				margin-top: 0;
				margin-bottom: 0;
			}

			.product-reyp{
				color: var(--weak-text-color);
				font-size: 0.8rem;
			}

			.product-features-area{
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap: 0.5rem;
			}

				.single-product-feature{
					padding: 0.5rem;
					background-color: var(--inner-bg);
					border-radius: var(--border-radius);
					border: var(--border);
					box-shadow: var(--box-shadow);
				}

				.single-product-feature label{
					font-size: 0.7rem;
					font-weight: bold;
					color: var(--weak-text-color);
					margin: 0;
				}

				.single-product-feature p{
					font-size: 0.9rem;
					font-weight: bold;
					margin: 0;
				}

			.product-read-more-area{
				margin: 1rem 0;
			}

			.product-buy-buttons-area{
				display: flex;
				flex-direction: column;
				gap: 0.5rem;
				margin: 1rem 0;
			}

				.purchase-button{
					padding: 0.5rem;
					font-size: 1rem;
					font-weight: bold;
					color: white;
					border: var(--border);
					border-radius: 999px;
					box-shadow: var(--box-shadow);
					background-color: var(--accent-blue);
					cursor: pointer;
					text-align: center;
				}

				.purchase-button:hover{
					background-color: black;
				}

@media (min-width: 768px){
	.product-image{
		max-height: 335px;
	}

	.product-title-area h3{
		font-size: 1.3rem;
	}

	.product-price{
		font-size: 1.7rem;
	}

	.product-features-area{
		gap: 1rem;
	}

		.single-product-feature{
			padding: 1rem;
		}

		.single-product-feature label{
			font-size: 0.9rem;
		}

		.single-product-feature p{
			font-size: 1.1rem;
		}
	
	.product-buy-buttons-area{
		gap: 1rem;
		margin: 2rem 0;
	}

		.purchase-button{
			padding: 1rem;
			font-size: 1.2rem;
		}
}

#contactFormArea{
	padding: 1rem;
	background-color: white;
	margin-bottom: -1rem;
}

	#contactForm{
		display: flex;
		flex-direction: column;
		gap: 2rem;
		width: 90%;
		max-width: 500px;
		margin: 0 auto;
	}

		#contactForm h2{
			color: var(--accent-blue);
			text-align: center;
			font-size: 2rem;
		}

			.contact-field{
				display: flex;
				flex-direction: column;
				gap: 1rem;
			}

				.contact-field input, .contact-field textarea{
					border: var(--border);
					border-radius: 0.1rem;
					box-shadow: var(--box-shadow);
					width: 100%;
					padding: 1rem;
				}

			#sendMessageButton{
				width: 100%;
				padding: 1rem;
				text-align: center;
				background-color: var(--accent-blue);
				box-shadow: var(--box-shadow);
				color: white;
				font-size: 1.3rem;
				font-weight: bold;
				cursor: pointer;
				border-radius: 999px;
			}

			#sendMessageButton:hover{
				background-color: black;
			}

#footer{
	padding: 1rem;
	background-color: var(--dark-bg);
	color: white;
	display: flex;
	flex-direction: column;
	align-items: center;
}

	#footer h2{
		font-size: 3rem;
	}

	#footer p{
		font-size: 0.9rem;
	}

@media (min-width: 768px) {

	#footer{
		flex-direction: row;
		justify-content: space-between;
	}
}

/* DIALOG */

body.dialog-open{
	overflow: hidden;
}

#dialogWrapper{
	position: fixed;
	inset: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	background-color: #00000066;
	z-index: 9;
}

#dialog{
	background-color: white;
	border-radius: var(--border-radius);
	box-shadow: var(--box-shadow);
	border: var(--border);
	width: 90%;
	max-width: 700px;
	margin: 1rem auto;
	padding: 1rem 2rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	position: relative;
}

	#dialogCloseButton{
		position: absolute;
		top: 1rem;
		right: 1rem;
		height: 3rem;
		cursor: pointer;
	}

		#dialogCloseButton svg{
			height: 100%;
		}

	#dialogTitle{
		font-size: 1.5rem;
		font-weight: bold;
		margin-bottom: 0;
	}

	#dialogReyp{
		margin-top: 0;
	}

	#dialogForm{
		display: flex;
		flex-direction: column;
		gap: 1rem;
		margin-top: 2rem;
	}

		#purchaseFormNotificationCont, #contactFormNotificationCont{
			padding: 1rem;
			border-radius: var(--border-radius);
			color: white;
			display: none;
		}

			#purchaseFormNotificationCont.display, #contactFormNotificationCont.display{
				display: block;
			}

			#purchaseFormNotificationCont.success, #contactFormNotificationCont.success{
				background-color: var(--accent-blue);
			}

			#purchaseFormNotificationCont.error, #contactFormNotificationCont.error{
				background-color: var(--danger-color);
			}

		#dialogForm .field{
			display: flex;
			flex-direction: column;
			gap: 0.5rem;
		}

		#dialogForm .field input{
			border: var(--border);
			outline: none;
			padding: 0.5rem;
		}

	#dialogSubmitButton{
		padding: 1rem;
		font-size: 1.2rem;
		font-weight: bold;
		color: white;
		border: var(--border);
		border-radius: 999px;
		box-shadow: var(--box-shadow);
		background-color: var(--accent-blue);
		cursor: pointer;
		text-align: center;
		margin-top: 2rem;
	}

	#dialogTerms{
		color: var(--weak-text-color);
		margin: 1rem 0;
	}