@import url(fonts_fw.css);

html,body{width:100%;min-height:100vh;margin:0;padding:0;}
body{display:flex;flex-direction:column;align-items:center;position:relative;}
*{box-sizing:border-box;outline:none;font-family:Arial, Helvetica, sans-serif;line-height:1.2em;}
h1,h2,h3,h4,h5,h6,p{margin:0;padding:0;font-weight:normal;}
i{font-style:normal;font-weight:normal;display:block;}

section.absolute{position:absolute;left:0;top:0;width:100%;}
canvas{z-index:1200 !important;}

/* m（︶︿︶）m НАЧАЛО МОДУЛЯ */
section.fortunas-wheel{
	position:fixed;inset:0;width:100%;height:100vh;background:rgba(0,0,0,0.8);align-items:center;justify-content:center;z-index:60;display:flex;pointer-events:none;opacity:0;transition:all 0.2s;
	&.open{
		pointer-events:all;opacity:1;
		form{transform:scale(1);}
	}
	form{
		display:flex;align-items:center;padding:0;background-image:url(../img/fortunas_wheel_bg.jpg);background-size:cover;max-width:1300px;width:100%;max-height:700px;height:100%;position:relative;transition:all 0.2s;transform:scale(0.5);overflow-y:auto;
		@media (max-width: 800px){
			&{display:block;}
		}
		.close{font-size:30px;line-height:30px;cursor:pointer;height:30px;position:absolute;top:20px;right:20px;font-family:'flight';color:#fff;z-index:10;}
		.wheel-container{
			position:relative;width:700px;flex:0 0 auto;height:100%;overflow:hidden;
			@media (max-width: 1300px){
				&{width:60%;}
			}
			@media (max-width: 800px){
				&{width:100%;aspect-ratio:1/1;height:auto;max-height:400px;}
			}
			img{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:contain;}
			img.wheel{z-index:1;}
			img.arrow{z-index:2;}
		}
		.fields{
			padding:20px;flex:1 1 auto;
			@media (max-width: 1300px){
				&{width:40%;}
			}
			@media (max-width: 800px){
				&{width:100%;}
			}
			h2{ 
				font-family:'Century Gothic';font-size:clamp(26px, 1rem + 2vw, 50px);color:#fff;margin:0 0 10px 0;text-shadow:0 0 10px rgba(0,0,0,0.2);text-align:center;
				span{font-family:'Century Gothic';font-size:clamp(26px, 1rem + 2vw, 50px);color:#000;text-shadow:0 0 10px rgba(0,0,0,0.2);}
			}
			&>p{font-size:18px;color:#fff;margin:0 0 20px 0;line-height:1.5em;text-shadow:0 0 10px rgba(0,0,0,0.5);text-align:center;}
			.field{
				position:relative;margin:0 0 15px 0;
				i{display:block;position:absolute;font-style:normal;font-family:'flight';font-size:20px;width:20px;color:#777;top:15px;left:15px;line-height:20px;text-align:center;}
				input{display:block;width:100%;height:50px;line-height:50px;padding:0 20px 0 45px;background:#fff;border:none;border-radius:5px;font-size:18px;box-shadow:0 0 10px 0 rgba(0,0,0,0.5);}
				input.error{box-shadow:0 0 10px 5px #000;background:#edd0d0;}
				select{display:block;width:100%;height:50px;line-height:50px;padding:0 20px 0 45px;background:#fff;border:none;border-radius:5px;font-size:18px;}
			}
			.agree{
				display:flex;gap:20px;align-items:center;margin:20px 0 20px 0;
				input{display:block;border:none;padding:0;margin:0;}
				label{font-size:16px;color:#fff;}
				a{font-size:16px;color:#fff;}
			}

			#fortunas-wheel-button{
				display:block;width:100%;height:50px;line-height:50px;padding:0;background:#000;border:none;border-radius:5px;font-size:20px;box-shadow:0 0 10px 0 rgba(0,0,0,0.5);font-family:'Century Gothic';color:#fff;text-align:center;cursor:pointer;transition:all 0.2s;width:300px;margin:0 auto 30px auto;
				&:hover{background:#7a110e;}
				&.hide{display:none;}
			}
			.description-form{
				display:grid;gap:0 20px;align-items:center;grid-template-columns:repeat(auto-fill, minmax(170px, 1fr));
				.item{
					display:flex;gap:10px;align-items:center;border-right:1px solid #fff;padding:10px 20px 10px 0;
					&:last-child{border:none;}
					@media (max-width: 1300px){
						&{border:none;padding:5px 0;}
					}
					i{display:block;font-style:normal;font-family:'flight';font-size:25px;color:#fff;}
					p{font-size:14px;color:#fff;}
				}
			}
		}
	}
}
/* m（︶︿︶）m КОНЕЦ МОДУЛЯ */

/* m（︶︿︶）m НАЧАЛО МОДУЛЯ */
section.fortunas-wheel-open{
	position:fixed;right:10px;z-index:100;top:calc(50% - 50px);overflow:hidden;cursor:pointer;
	img{display:block;width:100px;height:100px;animation:fortunas-wheel-open-anim 5s infinite;transform:rotate(0deg);position:relative;right:-50%;}
}
@keyframes fortunas-wheel-open-anim{
	0%{transform:rotate(0deg);}
	40%{transform:rotate(0deg);}
	100%{transform:rotate(1080deg);}
}
/* m（︶︿︶）m КОНЕЦ МОДУЛЯ */