/* Imports */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/* RESET */
/*
  Josh's Custom CSS Reset
  https://www.joshwcomeau.com/css/custom-css-reset/
*/

*,
*::before,
*::after {
	box-sizing: border-box;
}

* {
	margin: 0;
}

@media (prefers-reduced-motion: no-preference) {
	html {
		interpolate-size: allow-keywords;
	}
}

body {
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
}

input,
button,
textarea,
select {
	font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: break-word;
}

p {
	text-wrap: pretty;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	text-wrap: balance;
}

#root,
#__next {
	isolation: isolate;
}

button {
	border: none;
	margin: 0;
	padding: 0;
	width: auto;
	overflow: visible;
	background: transparent;
	color: inherit;
	font: inherit;
	line-height: normal;
	-webkit-font-smoothing: inherit;
	-moz-osx-font-smoothing: inherit;
}

&::-moz-focus-inner {
	border: 0;
	padding: 0;
}

/* CUSTOM STYLES */
body {
	background: linear-gradient(to bottom, #020D20 0%, #001434 50%, #000E27 100%);
	height: 100vh;
}

div#scrollable-container {
	width: 100%;
	height: 100%;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: absolute;
}

nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 10%;
	position: fixed;
	width: 100%;
	z-index: 2;
	pointer-events: none;

	#logo {
		width: 60px;
	}

	#logo img {
		width: 100%;
		cursor: pointer;
		pointer-events: auto;
		height: auto;
	}

	#profile {
		width: 67px;
		cursor: pointer;
		pointer-events: auto;
		transition: transform 0.3s ease;
	}

	#profile:hover {
		transform: scale(1.05);
	}

	#profile img {
		width: 100%;
		height: auto;
	}
}

header {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 100px;

	h1 {
		color: #3C71FF;
		font-size: 100px;
		font-weight: 500;
		font-family: 'Inter', sans-serif;
		text-align: center;
		line-height: 120px;
	}

	h2 {
		color: #99A2B6;
		font-size: 25px;
		font-weight: 600;
		font-family: 'Inter', sans-serif;
		text-align: center;
	}

	button {
		margin: 50px 0;
	}
}

@media (max-width: 550px) {
	header {
		h1 {
			font-size: 50px;
			line-height: 60px;
			margin-top: 200px;
		}

		h2 {
			font-size: 20px;
		}

		button {
			width: 200px !important;
			height: 50px !important;
			font-size: 20px !important;
			border-radius: 10px !important;
		}
	}
}

div#stats {
	margin-top: 400px;
	display: flex;
	flex-wrap: wrap;
	border-radius: 40px;
	border: 3px solid #193673;
	width: 70%;
	min-height: 350px;

	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.8s ease-out, transform 0.8s ease-out;

	div.stat {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 50%;
		color: #FFF;
		font-family: 'Inter', sans-serif;
		text-align: center;

		h3 {
			font-size: 50px;
			font-weight: 900;
		}

		p {
			color: #F8F2FC;
			font-size: 6x;
			font-weight: 400;
		}
	}
}

@media (max-width: 768px) {
	div#stats {
		width: 90%;
		min-height: 600px;

		div.stat {
			width: 100%;
		}
	}
}

div#stats.visible {
	opacity: 1;
	transform: translateY(0);
}

div.section {
	width: 70%;
	display: flex;
	flex-direction: column;
	align-items: center;

	opacity: 0;
	transform: translateY(0);
	transition: opacity 0.8s ease-out, transform 0.8s ease-out;

	h3 {
		color: #3C71FF;
		text-align: center;
		font-family: 'Inter', sans-serif;
		font-size: 57.5px;
		font-weight: 500;
	}

	p.description {
		color: #C0C3D0;
		;
		text-align: center;
		font-family: 'Inter', sans-serif;
		font-size: 20px;
		font-weight: 500;
		padding-top: 25px;
	}

	button {
		margin: 50px 0;
	}
}

@media (max-width: 768px) {
	div.section {
		width: 90%;

		h3{
			font-size: 40px;
		}
		p.description {
			font-size: 18px;
		}
		p.footnote {
			font-size: 12px;
		}
	}
}

div.section.visible {
	opacity: 1;
	transform: translateY(-200px);
}

footer {
	width: 80%;
	display: flex;
	flex-direction: column;
	border-top: 1px solid white;
	align-items: center;

	img {
		width: 200px;
	}

	ul {
		display: flex;
		justify-content: center;
		align-items: center;
		list-style: none;
		padding: 0;
		margin: 20px 0;

		@media (max-width: 550px) {
			flex-direction: row;
			flex-wrap: wrap;
		}

		li {
			color: #99A2B6;
			text-align: center;
			font-family: 'Inter', sans-serif;
			font-size: 18px;
			font-style: normal;
			font-weight: 400;
			line-height: normal;
			margin: 0 10px;

			@media (max-width: 550px) {
				margin: 6px 0;
				font-size: 20px;
				width: 50%;
			}

			a {
				color: inherit;
				text-decoration: none;
			}
		}
	}
}

p.footnote {
	color: #99A2B6;
	text-align: center;
	font-family: 'Inter', sans-serif;
	font-size: 13.8px;
	font-weight: 400;
}

span.note {
	font-size: 30px;
	vertical-align: super;
}

.btn-primary {
	width: 300px;
	height: 63px;
	border-radius: 14px;
	background: #3163F5;
	color: #FCFFFF;
	text-align: center;
	font-family: 'Inter', sans-serif;
	font-size: 25px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
	cursor: pointer;
	transition: background 0.5s ease, color 0.5s ease;
}

.btn-primary:hover {
	background: #0f2d5c00;
	border: 2px solid #3163F5;
}

.btn-secondary {
	width: 300px;
	height: 63px;
	border-radius: 14px;
	border: 2px solid #0F2C5C;
	color: #FCFFFF;
	background: #001531;
	text-align: center;
	font-family: 'Inter', sans-serif;
	font-size: 25px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
	cursor: pointer;
	transition: background 0.5s ease, color 0.5s ease;
}

.btn-secondary:hover {
	background: #0F2C5C;
}

.overlay {
	position: fixed;
	z-index: 3;
	inset: 0;
	background: rgba(0, 14, 39, 0.85);
	backdrop-filter: blur(10px);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 1;
	transition: opacity 0.6s ease;
}

.overlay.fade-out {
	opacity: 0;
	pointer-events: none;
}

.dev-modal {
	background: #001b3d;
	border: 2px solid #3163F5;
	border-radius: 20px;
	padding: 40px 30px;
	text-align: center;
	max-width: 600px;
	width: 90%;
	color: #FCFFFF;
	font-family: 'Inter', sans-serif;
	box-shadow: 0 0 40px rgba(49, 99, 245, 0.4);
	animation: popUp 0.5s ease-out forwards;
	transform: scale(0.95);
	opacity: 0;
}
.dev-modal.wide {
	width: 90%;
	max-width: 1000px;
}

.dev-modal img {
	display: block;
	margin: 0 auto 20px auto;
	width: 60px;
	filter: drop-shadow(0 0 10px rgba(255, 211, 72, 0.5));
	filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(76deg) brightness(105%) contrast(102%);
}

.dev-modal h2 {
	font-size: 36px;
	margin-bottom: 20px;
	color: #3C71FF;
	font-weight: 600;
}

.dev-modal p {
	font-size: 18px;
	color: #C0C3D0;
	margin-bottom: 40px;
	line-height: 1.6;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes popUp {
	to {
		opacity: 1;
		transform: scale(1);
	}
}

@media (max-width: 500px) {
	.dev-modal h2 {
		font-size: 28px;
	}

	.dev-modal p {
		font-size: 16px;
	}

	.dev-modal img {
		width: 45px;
	}
}

#lets-build{
	margin-top: 100px;
	color: #3C71FF;
	font-size: 38px;
	font-weight: 600;
	font-family: 'Inter', sans-serif;
	text-align: center;
}

div.fill-section {
	width: 50%;
	margin: 50px 0 20px 0;
	border-radius: 30px;
	border: 3px solid #02216D;
	background: rgba(0, 27, 67, 0.50);
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20px 0;

	h3{
		color: #FFF;
		text-align: center;
		font-family: 'Inter', sans-serif;
		font-size: 36px;
		font-style: normal;
		font-weight: 600;
		line-height: normal;

		.note{
			color: #6E84FF;
		}
	}

	input, textarea{
		border-radius: 16px;
		border: 3px solid #132956;
		background: #051540;
		width: 80%;
		height: 50px;
		color: #ffffff;
		font-family: 'Inter', sans-serif;
		font-size: 20px;
		font-style: normal;
		font-weight: 500;
		text-align: center;
		padding: 20px 0;
		margin: 20px 0;
		outline: none;
		cursor: text;
	}

	textarea {
		height: 150px;
		resize: none;
		text-align: left;
		padding: 12px 16px;
		scrollbar-color: #132956 transparent;
	}

	textarea::-webkit-scrollbar {
      width: 12px;
    }

	textarea::-webkit-scrollbar-thumb {
		background-color: #132956;
		border-radius: 6px;
	}

	textarea::-webkit-scrollbar-track {
		background-color: transparent;
	}

	p{
		color: #6E84FF;
		font-size: 18px;
		font-family: 'Inter', sans-serif;
		font-weight: 500;
		text-align: center;
		padding: 0 20px;
	}

	button{
		border-radius: 16px;
		border: 3px solid #132956;
		background: #051540;
		width: 80%;
		height: 50px;
		color: #6E84FF;
		font-family: 'Inter', sans-serif;
		font-size: 20px;
		font-style: normal;
		font-weight: 900;
		text-align: center;
		margin: 20px 0;
		outline: none;
	}

	div.subsections{
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		input{
			border-radius: 16px;
			border: 3px solid #132956;
			background: #051540;
			width: 80%;
			height: 50px;
			color: #ffffff;
			font-family: 'Inter', sans-serif;
			font-size: 20px;
			font-style: normal;
			font-weight: 500;
			text-align: center;
			padding: 20px 0;
			margin: 10px 0;
			outline: none;
		}
	}
}

button#next-build-button {
	border-radius: 12px;
	border: 3px solid #132956;
	background: #051540;
	width: 40%;
	height: 90px;
	color: #6E84FF;
	padding: 10px;
	transition: transform 0.3s ease, background 0.3s ease;
}
button#next-build-button:hover{
	background: #132956;
	transform: scale(1.05);
}

p#sensitive-data-build {
	width: 50%;
	padding: 100px;
}
/*=============== TOGGLE SWITCH ===============*/
:root {
	--line-color: hsl(234, 12%, 35%);
	--active-color: hsl(234, 100%, 98%);
	--inactive-color: hsl(234, 20%, 68%);
	--body-color: hsl(234, 12%, 8%);
}

* {
	box-sizing: border-box;
}

.switch {
	.toggle__content {
		display: grid;
		row-gap: 1.5rem;
	}

	.toggle__label {
		cursor: pointer;
		padding-block: 0.5rem;
	}

	.toggle__check {
		display: none;
	}

	.toggle__rail {
		display: inline-block;
		position: relative;
		width: 52px;
		height: 4px;
		background-color: var(--line-color);
		border-radius: 2rem;
	}

	.toggle__circle {
		display: block;
		width: 24px;
		height: 24px;
		background-color: var(--body-color);
		box-shadow: inset 0 0 0 4px var(--inactive-color);
		border-radius: 50%;
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		margin: auto 0;
		transition: transform 0.4s, box-shadow 0.4s;
		z-index: 2;
	}

	.toggle__border {
		position: absolute;
		width: 32px;
		height: 32px;
		background-color: var(--body-color);
		border-radius: 50%;
		left: -4px;
		top: 0;
		bottom: 0;
		margin: auto 0;
		transition: transform 0.4s;
	}

	/* Toggle animation effects */
	.toggle__check:checked~.toggle__rail .toggle__circle {
		transform: translateX(28px);
		box-shadow: inset 0 0 0 12px var(--active-color);
	}

	.toggle__check:checked~.toggle__rail .toggle__border {
		transform: translateX(28px);
	}
}
/*=============== END TOGGLE SWITCH ===============*/
#next-overlay-1, #next-overlay-2 {
	input{
		border-radius: 16px;
		border: 3px solid #132956;
		background: #051540;
		width: 80%;
		height: 50px;
		color: #ffffff;
		font-family: 'Inter', sans-serif;
		font-size: 20px;
		font-style: normal;
		font-weight: 500;
		text-align: center;
		padding: 20px 0;
		margin: 20px 0;
		outline: none;
		cursor: text;
	}

	#color-1-options, #color-2-options {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 10px;
		margin-bottom: 20px;
		flex-wrap: wrap;
		max-height: 200px;
		overflow-y: scroll;
		scrollbar-color: #132956 transparent;

		input[type="checkbox"] {
			appearance: none;
			-webkit-appearance: none;
			border-radius: 100%;
			border: 1px solid #132956;
			width: 50px;
			height: 50px;
			cursor: pointer;
			transition: transform 0.3s ease, border 0.3s ease;
			background-color: transparent;
		}
	
		input[type="checkbox"]:hover {
			transform: scale(1.1);
		}
	
		input[type="checkbox"]:checked {
			border: 2px solid #3163F5;
		}
	}
	#color-1-options::-webkit-scrollbar, #color-2-options::-webkit-scrollbar {
      width: 12px;
    }

	#color-1-options::-webkit-scrollbar-thumb, #color-2-options::-webkit-scrollbar-thumb {
		background-color: #132956;
		border-radius: 6px;
	}

	#color-1-options::-webkit-scrollbar-track, #color-2-options::-webkit-scrollbar-track {
		background-color: transparent;
	}
}
#next-overlay-3 {
	.dev-modal{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
}
#chosen-template {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 200px;
	height: 200px;
	border-radius: 20px;
	background-color: #051540;
	border: 3px solid #132956;
	margin-bottom: 20px;
	cursor: pointer;

	img {
		width: 40%;
		padding: 0;
		margin: 0;
		filter: invert(66%) sepia(9%) saturate(519%) hue-rotate(183deg) brightness(96%) contrast(95%);
		pointer-events: none;
	}
}
#template-pick-overlay {
	.dev-modal {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		max-height: 90%;

		#template-options {
			display: flex;
			flex-wrap: wrap;
			gap: 20px;
			margin-top: 20px;
			overflow-y: scroll;
			scrollbar-width: none;
			-ms-overflow-style: none;

			&::-webkit-scrollbar {
				display: none;
			}
			width: 90%;

			div.template-option {
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 200px;
				min-height: 200px;
				border-radius: 20px;
				background-color: #051540;
				border: 3px solid #132956;
				margin-bottom: 20px;
				cursor: pointer;

				img{
					width: 100%;
					height: auto;
					padding: 8px;
					border-radius: 20px;
					margin: 0;
					filter: none;
					pointer-events: none;
				}

				p.name {
					font-size: 18px;
					font-weight: bold;
					color: #FFF;
					margin: 0;
					padding: 0;
					pointer-events: none;
					user-select: none;
					-webkit-user-select: none;
				}

				.bottom {
					display: flex;
					align-items: baseline;
					width: 100%;
                    padding: 0;
                    margin: 0;
                    height: 40px;
					justify-content: space-evenly;
					pointer-events: none;
					user-select: none;
					-webkit-user-select: none;
					

					p.price {
						font-size: 16px;
						color: #ffffff;
						margin: 0;
						padding: 0;
					}

					div.ratings{
						display: flex;
						align-items: center;
						justify-content: flex-end;
						padding: 0 10px;
						flex-direction: row;

						p.positive {
							color: #ffffff;
							font-size: 16px;
							margin: 0;
						}
						img {
							width: 24px;
							padding: 0;
							margin: 0 0 5px 0;
							filter: invert(63%) sepia(63%) saturate(4716%) hue-rotate(209deg) brightness(99%) contrast(108%);
						}
					}
				}
			}
		}
	}
}
#view-template {
	overflow-y: scroll;
	scrollbar-width: none;
	-ms-overflow-style: none;
	width: 100%;

	&::-webkit-scrollbar {
		display: none;
	}

	.template-viewer {
		color: #FFF;
		font-family: 'Inter', sans-serif;
		width: 90%;
		max-width: 800px;
		margin: 0 auto 150px auto;
	}

	.carousel {
		position: relative;
		height: 400px;
		width: 100%;
		overflow: hidden;
		border-radius: 20px;
		border: 3px solid #132956;
		background: #051540;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.carousel-images {
		flex: 1;
		text-align: center;
	}

	.carousel-images img {
		max-height: 100%;
		width: 100%;
		filter: none;
	}

	.carousel-arrow {
		background: none;
		color: #FFF;
		font-size: 40px;
		cursor: pointer;
		z-index: 1;
		padding: 0 20px;
	}

	.template-name {
		font-size: 36px;
		text-align: center;
		margin-top: 20px;
	}

	.price {
		text-align: center;
		font-size: 24px;
		margin-top: 10px;
	}

	.price .original-price {
		text-decoration: line-through;
		color: #888;
		margin-right: 10px;
	}

	.ratings {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 10px;
		margin: 20px 0;

		.positive, .negative{
			display: flex;
			align-items: flex-start;
			gap: 5px;
			color: #FFF;
		}
	}

	.ratings img {
		width: 24px;
		filter: invert(63%) sepia(63%) saturate(4716%) hue-rotate(209deg) brightness(99%) contrast(108%);
	}

	.description {
		font-size: 18px;
		text-align: center;
		color: #C0C3D0;
		padding: 0 20px;
	}

	.sticky-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background: #001434;
		border-bottom-left-radius: 20px;
		border-bottom-right-radius: 20px;
		border-top: 2px solid #3163F5;
		display: flex;
		justify-content: center;
		gap: 20px;
		padding: 10px;
		z-index: 99;
		align-items: center;
	}

	.preview-btn,
	.report-btn {
		width: 200px;
		height: 50px;
		font-size: 20px;
		border-radius: 12px;
	}

	.report-btn{
		background-color: #ff5252;
		border: none;
	}

	.report-btn:hover {
		background-color: transparent;
		border: 2px solid #ff5252;
	}
}