@charset "utf-8";

:root {
	--background:	#FFFFFF;
	--text:			#404040;
	--accent1:		#FFABBF;	/* pink */
	--accent2:		#FFE6CA;	/* yellow */
	--accent3:		#DCFFD9;	/* green */
	--accent4:		#D4EFF8;	/* blue */
	--accent5:		#E8D0FA;	/* purple */
}


* {
	font-family: "Source Sans 3", sans-serif;
	font-size: 12px;
	font-weight: 400;
	font-optical-sizing: auto;
	box-sizing: border-box;
	color: var(--text);
	margin: 0px;
	padding: 0px;
	font-size: 18px;
	
	html {
		background: var(--background);
		min-height: 100%;
	}

	body {
		min-height: 100%;
		
		&.no-scroll {
			overflow: hidden;
		}
	}

	h1, h2, h3 {
		font-family: Neuton, serif;
		font-weight: 700;
	}

	h1 {
		font-size: 48px;
		margin-bottom: 16px;
	}

	h2 {
		font-size: 36px;
		margin-bottom: 10px;
	}

	h3 {
		font-size: 28px;
		margin-bottom: 10px;
	}

	p {
		margin-bottom: 10px;
	}
	
	strong {
		font-weight: 700;
	}
	
	table {
		width: 100%;
		margin-bottom: 10px;
		border-collapse: collapse;

		td, th {
			padding: 2px;
		}
	}

	a, a:visited {
		color: var(--text);
	}

	img {
		object-fit: cover;
	}
}


div.buttons {
	display: flex;
	gap: 16px;
	justify-content: center;
	align-items: center;
}

div#menu_buttons a, div.buttons a, button, input[type=submit], input[type=button] {
	color: var(--text);
	cursor: pointer;
	display: flex;
	transition: 0.3s;
	align-items: center;
	font-weight: bold;
	white-space: nowrap;
	padding: 8px 24px 8px 24px;
	border: 2px solid var(--accent5);
	border-radius: 24px;
	justify-content: center;
	text-decoration: none;
	font-size: 16px;
	transition: background-position 300ms ease;
	background: linear-gradient(to right, var(--accent4) 50%, var(--accent2) 50%);
	background-size: 210% 100%;
	background-position: 100%;
	
	&:hover {
		background-position: 0 100%;
	}
}


div#header {
	width: 100%;
	padding: 32px;
	display: flex;
	gap: 16px;
	
	div#header_logo {
		width: 90px;
		height: 90px;
		margin: -20px;
		align-self: center;
		
		img {
			object-fit: cover;
			width: 100%;
		}
	}
	
	nav#header_menu {
		flex: 1;
		align-self: center;
		white-space: nowrap;
		padding-left: 24px;
		
		ul {
			list-style: none;
			margin: 0px;
			padding: 0px;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			gap: 8px;
			
			li a {
				font-size: 16px;
				font-weight: bold;
				text-decoration: none;
				display: block;
				cursor: pointer;
				transition: background-position 300ms ease;
				background: linear-gradient(to right, var(--accent3) 50%, var(--accent5) 50%);
				background-size: 210% 100%;
				background-position: 100%;
				color: var(--text);
				padding: 6px 16px;
				border: 2px solid var(--accent5);
				border-radius: 24px;
			}
			
			li:hover a {
				background-position: 0 100%;
			}
		}
	}
	
	div#menu_buttons {
		display: flex;
		gap: 16px;
		justify-content: center;
	}
}

div#body {
	width: 100%;
	min-height: 250px;
	text-align: center;
	
	div.section {
		padding: 24px 32px;
		
		> p {
			max-width: 800px;
			margin: 0px auto 10px auto;
			
			&.notify {
				background-color: var(--accent1);
			}
			
			> img {
				max-width: 100%; 
				height: auto;
			}
		}
	}
}


div#footer {
	width: calc(100% - 24px);
	margin: 12px;
	
	h3#footer_social {
		text-align: center;
		padding-top: 32px;
		
		img {
			width: 28px;
			height: 28px;
			vertical-align: -30%;
		}
	}

	div#footer_container {
		display: flex;
		flex-direction: row;
		gap: 32px;
		align-self: stretch;
		align-items: flex-start;
		flex-shrink: 0;
		justify-content: space-between;
		border-top: 1px solid var(--accent5);
		
		div#footer_copyright {
			color: #404040;
			padding-top: 12px;
			
			p {
				font-size: 12px;
			}
		}
	}
	
	div#footer_links {
		display: flex;
		gap: 16px;
		align-items: flex-start;
		padding-top: 12px;
		
		a {
			display: inline-block;
			font-size: 12px;
			text-decoration: none;
			font-weight: bold;
		}
	}
}


div.image_scroll_container {
	mask-image: linear-gradient(to right, transparent, black 1%, black 99%, transparent);
	overflow: hidden;
	position:relative;
	height: 300px;
	
	div.image_scroll {
		animation: image_scroll 20s linear infinite;
		display: flex;
		gap: 16px;
		position: absolute; 
		top: 0px; 
		left: 0px; 
		overflow: hidden; 
		white-space: nowrap;
		
		&:hover {
			
		}
		
		img {
			width: 300px;
			height: 300px;
			aspect-ratio: 1/1;
			border-radius: 24px;
		}
	}
}
@keyframes image_scroll {
	0% { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}


div.image_tabs_container {
	width: 100%;
	display: grid;
	grid-gap: 32px;
	position: relative;
	grid-template-columns: 1fr 1fr;
	text-align: left;
	
	div.image_tabs_image {
		height: 100%;
		display: flex;
		position: relative;
		
		img {
			width: 100%;
			object-fit: cover;
			aspect-ratio: 16/9;
			border-radius: 24px;
		}
	}
	
	div.image_tabs {
		display: flex;
		flex-direction: column;
		justify-content: center;
		div.image_tabs_item {
			padding: 0px 0px 16px 16px;
			cursor: default;
			border-left: 4px solid transparent;
			
			&.active {
				border-left: 4px solid var(--accent1);
			}
			
			p {
				font-style: italic;
				margin: 0px !important;
			}

		}
	}
}


div.testimonial_container {
	width: 100%;
	display: grid;
	grid-gap: 16px;
	grid-template-columns: 1fr 1fr;
	
	div.testimonial {
		display: flex;
		padding: 32px;
		align-items: stretch;
		border-radius: 24px;
		flex-direction: column;
		gap: 32px;
		background-color: var(--accent4);
		
		> div {
			display: flex;
			flex-direction: row;
			gap: 32px;
			
			> img {
				width: 48px;
				height: 48px;
				object-fit: cover;
				border-radius: 24px;
			}
			
			> div {
				display: flex;
				flex-direction: column;
				
				> p {
					text-align: left;
					margin: 0px !important;
				}
				> p.name {
					font-weight: bold;
				}
				> p.description {

				}
			}
		}
		
		> p.text {
			text-align: left;
		}
	}
	div.testimonial:nth-child(2) {
		background-color: var(--accent3);
	}
	div.testimonial:nth-child(3) {
		background-color: var(--accent5);
	}
	div.testimonial:nth-child(4) {
		background-color: var(--accent1);
	}
}

div.product_section {
	background-color: #FFF4F4;
	border-radius: 16px;
	padding: 8px 0px 0px 0px;
	
	div.product_carousel_container {
		position: relative;

		button {
			position: absolute;
			top: -55px;
			width: 48px;
			height: 48px;
			padding: 0px;
			display: flex;
			justify-content: center;

			i {
				width: 50%;
				height: 50%;
				clip-path: polygon(10% 30%, 50% 30%, 50% 10%, 100% 50%, 50% 90%, 50% 70%, 10% 70%);
				background-color: var(--text);
				display: block;
				padding: 3px;
			}

			&.previous {
				left: 10px;
				i {
					transform: rotate(180deg);
					-webkit-transform: rotate(180deg);
				}
			}

			&.next {
				right: 10px;
				i {
					transform: rotate(0deg);
					-webkit-transform: rotate(0deg);
				}
			}
		}

		ul.product_carousel {
			display: flex;
			gap: 8px;
			list-style: none;
			overflow-x: scroll;
			scroll-snap-type: x mandatory;
			padding: 0px;
			scrollbar-width: none;
			-ms-overflow-style: none;

			&::before, &::after {
				content: '';  /* Insert pseudo-element */
				margin: auto; /* Make it push flex items to the center */
			}

			li {
				flex-shrink: 0;
				width: 340px;
				height: 360px;
				scroll-snap-align: center;

				> div {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					height: 100%;

					img {
						width: 300px;
						height: 300px;
						object-fit: cover;
						display: block;
						border-radius: 16px;
						transition: all .4s ease;

						&:hover {
							transform: scale(1.05);
						}
					}

					p {
						white-space: nowrap;
						font-size: 18px;
						margin-bottom: 0px;
						font-weight: bold;
						color: #606060;
					}
				}
			}
		}
	}
}


dialog.product_dialog {
	border: 2px solid var(--accent1);
	border-radius: 16px;
	padding: 20px;
	max-width: 700px;
	margin: auto;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	
	button.close {
		position: sticky;
		left: 95%;
		top: 0px;
	}
	
	img {
		max-height: 400px;
		max-width: 100%;
		object-fit: cover;
		margin-bottom: 15px;
		border-radius: 16px;
	}
	
	p.description {
		
	}
	
	p.price {
		font-weight: bold;
	}
	
	&::backdrop {
		background-color: rgba(0, 0, 0, 0.5);
		backdrop-filter: blur(10px);
	}
}


table.price_list {
	max-width: 600px;
	margin: 0px auto;
	
	th, td {
		text-align: right;
		font-size: 18px;
		padding: 0px 10px 0px 10px;
		color: #404040;
		white-space: nowrap;
	}
	th {
		font-weight: bold;
	}
	th:first-child, td:first-child {
		text-align: left;
	}
}


table.admin {
	max-width: 900px;
	margin: 0px auto;
	
	th, td {
		text-align: left;
		font-size: 18px;
		padding: 0px 10px 0px 10px;
		color: #404040;
	}
	th:first-child, td:first-child {
		text-align: left;
	}
	td div.buttons {
		justify-content: right;
		
		a {
			padding: 2px 12px;
		}
	}
}


div.form {
	display: inline-block;
	position: relative;
	padding: 0px;
	text-align: left;
	
	fieldset {
		border: 0px;
	}

	legend {
		font-weight: bold;
		font-size: 18px;
		padding: 0px 4px 0px 4px;
	}

	div.form_block {
		margin-bottom: 12px;
		overflow: hidden;
		white-space: nowrap;
	}

	span.required {
		color: #990000;
		font-size: 18px;
	}

	p.instructions {
		margin: 5px 0px 5px 0px;
		display: block;
		font-style: italic;
	}

	input, select, textarea, button, submit {
		width: 100%;
		display: block;
		font-size: 18px;
		border: 2px solid var(--accent5);
		appearance: none;
		padding: 10px 24px;
		border-radius: 25px;
		background-color: var(--background);

		&:focus {
			border: 2px solid var(--accent1);
			outline: none;
		}
	}
	select {
		background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
		background-repeat: no-repeat;
		background-position-x: calc(100% - 10px);
		background-position-y: 50%;
	}
	
	input[data-type="password"] {
		text-security: circle;
		-webkit-text-security: circle;
	}
	input[type="file"]::file-selector-button {
		font-family: "Source Sans 3";
		border: 2px solid var(--accent5);
		border-radius: 6px;
		background-color: var(--accent2);
		cursor: pointer;
	}
	
	label{
		width: 100%;
		display: block;
		font-size: 16px;
		color: #808080;
		padding-left: 8px;
	}

	p.error_text {
		color: #990000;
		font-size: 16px;
		white-space: pre-wrap;
		background-color: var(--accent2);
		padding: 2px 8px;
		border-radius: 12px;
	}
}


@media all and (max-width: 1200px) {
	div#menu_buttons {
		flex-direction: column;
	}
	div#body div.section {
		padding: 24px 16px;
	}
	nav#header_menu ul {
		flex-wrap: wrap;
	}
}

@media all and (max-width: 850px) {
	div#header {
		padding: 4px;
		flex-direction: column;
	}
	div#header_logo {
		margin: 0px !important;
		height: 120px;
		width: 120px;
	}
	nav#header_menu {
		padding-left: 0px !important;
	}
	nav#header_menu ul {
		justify-content: center !important;
	}
	div#menu_buttons {
		align-items: center;
	}
	div.image_tabs_container {
		grid-template-columns: none;
	}
	div.testimonial_container {
		grid-template-columns: none;
	}
	div.buttons {
		flex-direction: column;
	}
	dialog.product_dialog {
		max-width: calc(100% - 40px);
	}
}