:root {
    --main-color: #5E42A6;
    --secondary-color: #B74E91;
    --accent-color: #FEC110;
}

body 
{
	font-family: "Heboo", sans-serif;
	background: url("/assets/img/coffee-beans.png") no-repeat center;
	background-size: cover;
}

main 
{
	width: 50dvw;
    height: auto;
    border: 4px solid var(--main-color);
    border-radius: 10px;
    box-shadow: 10px 10px 20px 5px rgba(183, 78, 145, 0.5);
	-webkit-box-shadow: 10px 10px 20px 5px rgba(183, 78, 145, 0.5);
	padding: 20px;
	background-color: rgba(255, 255, 255, .85);
	margin: 0 auto;
}

h1,h2,h3,h4,h5,h6{
	font-family: "Unbounded", sans-serif;
	font-weight: 600;
}

section
{
	min-height: 500px;
	
	width: 100%;
}

.container
{
	width: inherit;
	height: inherit;
}
.content
{
	width: 85%;
	margin: 0 auto;
}

.header
{
	margin-bottom: 30px;
	.header__content
	{
		.title
		{
			text-align: center;
		}
	}
}

section#calendarSection
{
	height: 60dvh;
	#calendar 
	{
		height: 100%;
	}
}

section#hoursSection
{
	.hours__content
	{
		.title
		{
			text-align: center;
			margin-bottom: 50px;
			span
			{
				color:var(--main-color);
			}
		}
		.hours__content__grid
		{
			display: grid;
		    grid-template-columns: repeat(4, 1fr);
		    grid-template-rows: repeat(3, 1fr);
		    justify-items: center;
		    gap: 18px 8px;

		    .hours__content__btn
		    {
		    	font-size: 18px;
		    	border: 3px solid var(--main-color);
		    	border-radius: 50px;
		    	padding: 5px 35px;
		    	background-color: rgba(94,66,166, .3);
		    	cursor: pointer;

		    	&:hover
		    	{
		    		border-radius: 10px;
		    		background-color: rgba(183,78,145, .3);
		    		transition: all .7s;
		    	}
		    }

	    	.disabled
	    	{
	    		cursor: not-allowed;
	    		border-radius: 10px;
	    		background-color: #ddd;

	    		&:hover
	    		{
	    			background-color: #ddd;
	    		}

	    		&:before
	    		{
	    			content: "☕";
	    		}
	    	}

		    
		}

		.footer
		{
			font-size: 20px;
			text-align: center;
			margin-top: 50px;
			span
			{
				color:var(--main-color);
				font-weight: bold;
				cursor: pointer;
			}
		}
	}
}

section#formSection
{
	.form__content
	{	
		.title
		{
			span
			{
				color:var(--main-color);
			}
		}
		.form__content__row
		{
			display: flex;
			margin-top: 15px;
			margin-bottom: 15px;
			gap: 20px;

			.form__content__element
			{
				display: flex;
				flex-direction: column;
				width: 100%;

				input
				{
					font-size: 16px;
					padding: 8px 15px;

					&:focus, &:active, &:focus-visible
					{
						outline: var(--main-color) solid 1px;
						border-radius: 5px;
						transition: all .7s;

					}
				}
			}
		}

		.form__content__btn
		{
			border: 3px solid var(--main-color);
			font-size: 20px;
			font-weight: bold;
			border-radius: 10px;
	    	padding: 5px 35px;
	    	background-color: rgba(94,66,166, .3);
	    	font-family: "Unbounded", sans-serif;
		}
	}
}

.footer
{
	.footer__content
	{
		font-size: 10px;
        color: #bbb;
        margin-top: 35px;
        text-align: justify;

        a
        {
            text-decoration: none;
            color: #aaa;
            font-weight: bolder;    
        }

        .footer__content__copy
        {
            text-align: center;
            font-size: 12px;
            font-weight: bolder;
            color: #aaa;
            margin-top: 10px;
        }
	}
}

span.required
{
	color: red;
	font-size: 18px;
	font-weight: bold;
}

label.required:after
{
	content: " *";
	color: red;
	font-size: 18px;
	font-weight: bold;
}

input[type="radio"]
{
	margin-bottom: 10px;
}

.d-none
{
	display: none;
}

@media(max-width:768px)
{
	body
	{
		height: 100dvh;
		display: flex;
		align-items: center;
	}
	main
	{
		width: 80dvw;
		height: auto;
	}

	.hours__content__grid
	{
		grid-template-columns: repeat(2, 1fr) !important;
	}
}