@charset 'utf-8';

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {box-sizing:border-box;font-smooth:always;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;font-variant-ligatures:none;-webkit-font-variant-ligatures:none;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-smoothing:antialiased;-webkit-font-smoothing:antialiased;text-shadow:rgba(0, 0, 0, .01) 0 0 1px;}
html {font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Arial,sans-serif;line-height:1.25;font-size:16px;}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {margin:0;padding:0;}
select, input[type=text], input[type=button], input[type=submit], input[type=radio], textarea, button {-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;background:transparent;border-radius:0;border:0;box-shadow:none;margin:0;outline:0;resize:none;font-size:16px;}
input[type=date] {font-size:16px;border-radius:0;border:0;box-shadow:none;margin:0;outline:0;resize:none;}
input[type=button] {cursor:pointer;}
a {text-decoration:none;color:inherit;}
table {border-collapse:collapse;border-spacing:0;}

body {
	font-family: "Poppins", sans-serif;
	color: #666666;
	font-size: 16px;
	line-height: 1.5;
	font-weight: 400;
}

.container {
	position: relative;
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
}

.block {
	display: block;
}

.flex {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;

	&.col-2 {
		width: 100%;
		gap: 16px;

		> * {
			width: 50%;
		}
	}

	&.col-3 {
		width: 100%;
		gap: 16px;

		> * {
			width: 33.33%;
		}
	}
}

.flex-col {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
}

.button {
	border-radius: 10px!important;
	padding: 8px 16px;
	font-weight: 800;
	text-transform: uppercase;
	font-family: "Poppins", sans-serif;
	font-size: 16px;
	cursor: pointer;

	&.purple {
		background: #7c2897;
		color: #FFFFFF;

		&.close {
			position: absolute;
			right: 12px;
			top: 12px;
			border-radius: 21px;
			font-size: 28px;
			font-weight: 400;
			padding: 0px 12px;

			span {
				position: relative;
				top: 2px;
			}
		}
	}
}

[role=button] {
	cursor: pointer;
}

h2 {
	font-size:28px;
	color: #ff9015;
	margin-bottom: 12px;
}

h3 {
	font-size:20px;
	color: #cf3339;
	margin-bottom: 12px;
}

p {
	margin-bottom: 16px;

	&:only-child, &:last-child {
		margin-bottom: 0;
	}

	.button {
		display: inline-block;
	}
}

b {
	font-weight: 600;

	span {
		font-weight: 800;
	}
}

.orange {
	background: #ff9015;
}

.red {
	background: #cf3339;
}

.yellow {
	background: #ffbf3c;
}

.t-orange {
	color: #ff9015;
}

.t-purple {
	color: #5b3085;
}

.t-green {
	color: #39b54a;
}

.t-center {
	text-align:center;
}

.p-20 {
	padding: 20px;
}

.g-12 {
	gap: 12px;
}

header {
	background: #7d2c96;

	.container::after {
		content: "";
		position: absolute;
		inset: 0;
		box-shadow:inset 0px 20px 20px #7d2c96, inset 0px 40px 40px #7d2c96db;
	}

	img {
		width:100%;
		max-width: 100%;
		height: auto;
	}
}

footer {
	background: #7c2897;
	color: #FFFFFF;
}

.border {
	overflow: hidden;

	.container {
		div {
			width:33.33%;
			height: 15px;
		}
	}

	.container::before {
		content: "";
		position: absolute;
		height: 100%;
		width: 100%;
		right: 100%;
		top: 0;
		background: #ff9015;
	}

	.container::after {
		content: "";
		position: absolute;
		height: 100%;
		width: 100%;
		left: 100%;
		top: 0;
		background: #ffbf3c;
	}
}

main {
	background: linear-gradient(180deg, #FFFFFF -5%, #ddb298 20%, #944589 110%);
}

.window {
	background: #FFF;
	padding: 20px 24px 28px;
	border-radius: 16px;
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
}

.box {
	padding: 16px 20px;
	border-radius: 16px;

	&.orange {
		color: #FFFFFF;
	}

	&.purple {
		background: #5b3085;
		color: #FFFFFF;
	}

	&.inline {
		display:inline-block;
		padding: 12px 20px 16px;
	}
}

.bullet {
	justify-content: flex-start;
	gap: 16px;

	div:nth-of-type(1) {
		flex: 0 0 auto;
	}

	div:nth-of-type(2) {
		flex: 1 1 auto;
	}
}

.foot-note {
	font-size: 12px;
	color: #FFFFFF;
	padding: 20px 24px;
}

.logo {
	width: 180px;
	height: auto;
}

.modal {
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	display: none;
	flex-direction: row;
	justify-content: center;
	align-items: center;

	&.active {
		display: flex;
	}

	.overlay {
		background: rgba(30, 30, 30, 0.7);
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
	}

	.window {
		position: relative;
		width: 100%;
		max-width: 800px;
		z-index: 100;
		padding: 16px 20px 28px;
		margin: 0 16px;

		 h2 {
		 	padding: 0 32px;
		 }
	}
}

.brands {
	width: 90%;
	max-width: 480px;
	height: auto;
}

.form-box h3 {
	margin-bottom: 0;
}

.input-box {
	width: 100%;
	gap: 2px;

	> * {
		width: 100%;
	}

	.label {
		justify-content: flex-start;
		align-items: baseline;

		p {
			margin-bottom: 0;
		}

		span {
			font-size: 10px;
			font-weight: 600;
		}
	}

	.input {
		select, input {
			width: 100%;
			height: 36px;
			font-size: 16px;
			font-family: "Poppins", sans-serif;
			border: 2px solid #cccccc;
			background: #FFFFFF;
			padding: 4px 6px;
		}

		&.select {
			position: relative;

			&::after {
				content:"";
				width: 0; 
				height: 0; 
				border-left: 6px solid transparent;
				border-right: 6px solid transparent;
				border-top: 6px solid #666666;
				position: absolute;
				right: 12px;
				top: 16px;
				pointer-events: none;
			}
		}
	}

	.radio, .checkbox {
		padding: 4px 0;
		flex-wrap: wrap;

		[type="radio"]:checked,
		[type="radio"]:not(:checked),
		[type="checkbox"]:checked,
		[type="checkbox"]:not(:checked) {
		    position: absolute;
		    left: -9999px;
		}
		[type="radio"]:checked + label,
		[type="radio"]:not(:checked) + label,
		[type="checkbox"]:checked + label,
		[type="checkbox"]:not(:checked) + label
		{
		    position: relative;
		    padding-left: 28px;
		    cursor: pointer;
		    line-height: 20px;
		    display: inline-block;
		    color: #666;
		}
		[type="radio"]:checked + label:before,
		[type="radio"]:not(:checked) + label:before,
		[type="checkbox"]:checked + label:before,
		[type="checkbox"]:not(:checked) + label:before {
		    content: '';
		    position: absolute;
		    left: 0;
		    top: 0;
		    width: 16px;
		    height: 16px;
		    border: 2px solid #cccccc;
		    background: #fff;
		}

		[type="radio"] + label:before { border-radius: 100%; }
		[type="checkbox"] + label:before { border-radius: 4px; }

		[type="radio"]:checked + label:after,
		[type="radio"]:not(:checked) + label:after,
		[type="checkbox"]:checked + label:after,
		[type="checkbox"]:not(:checked) + label:after {
		    content: '';
		    width: 10px;
		    height: 10px;
		    background: #ff9015;
		    position: absolute;
		    top: 5px;
		    left: 5px;
		    -webkit-transition: all 0.2s ease;
		    transition: all 0.2s ease;
		}

		[type="radio"] + label:after { border-radius: 100%; }
		[type="checkbox"] + label:after { border-radius: 2px; }

		[type="radio"]:not(:checked) + label:after,
		[type="checkbox"]:not(:checked) + label:after {
		    opacity: 0;
		    -webkit-transform: scale(0);
		    transform: scale(0);
		}
		[type="radio"]:checked + label:after,
		[type="checkbox"]:checked + label:after {
		    opacity: 1;
		    -webkit-transform: scale(1);
		    transform: scale(1);
		}
	}

	.tip {
		font-size: 11px;
	}
}

@media screen and (max-width:1280px) {
	header .container::after {
		box-shadow:none;
	}
}

@media screen and (max-width:640px) {
	.flex {
		&.col-2 {
			flex-direction:column;
			gap: 12px;

			> * {
				width: 100%;
			}
		}

		&.col-3 {
			width: 100%;
			gap: 16px;

			> * {
				width: 33.33%;
			}
		}
	}
}



.cam-search-results { position: absolute; top: 100%; left: 0; right: 0; z-index: 1000; background: white; border: 1px solid #ddd; border-top: none; max-height: 200px; overflow-y: auto; box-shadow: 0 4px 6px rgba(0,0,0,0.1); } .cam-search-item { padding: 10px; cursor: pointer; border-bottom: 1px solid #eee; } .cam-search-item:hover { background-color: #f8f9fa; } .cam-search-item:last-child { border-bottom: none; }