@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap');

/* reset */
html, body, div, section, article, aside, header, hgroup, footer, nav, h1, h2, h3, h4, h5, h6, p, blockquote, address, time, span, em, strong, img, ol, ul, li, figure, canvas, video {
	margin: 0;
	padding: 0;
	border: 0;
}

article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
	display:block;
}

a:hover {
	cursor: pointer;
}

a:focus,
a:focus-visible {
	outline: none;
}

html,
body {
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
	color: var(--main-text-color);
	overflow:hidden;

	background-color: var(--main-background-color);
	font-family: var(--main-font-family);
	font-size: var(--main-font-size);
	line-height: var(--main-line-height);
	text-shadow: var(--main-text-shadow);
}

.helper {
	display: block;
	color: #b1aeb6;
	font-weight: normal;
	margin-bottom: 8px;
}

.division_or {
	position: relative;

	span {
		position: absolute;
		display: block;
		line-height: 16px;
		height: 16px;
		width: fit-content;
		top: 0px;
		bottom: 0px;
		left: 0px;
		right: 0px;
		margin: auto;
		padding: 2px 4px;
		background-color: var(--main-background-color);
	}
}

.show_in_profile,
.show_in_link_auth {
	display: none;
}

html,
#register_form {

	&.is_profile {
		.show_in_profile {
			display: block;
		}

		.hide_in_profile {
			display: none;
		}
	}

	&.is_link_auth {
		.show_in_link_auth {
			display: block;
		}

		.hide_in_link_auth {
			display: none;
		}
	}

	&.is_profile,
	&.is_link_auth {
		.hide_input_in_profile {

			input,
			select {
				height: 28px;
			}

			input,
			select,
			textarea {
				padding: var(--label-padding);
				border: none;
				outline: none;
			}

			select {
				-webkit-appearance: none;
				-moz-appearance: none;
				text-indent: 1px;
				text-overflow: '';
			}
		}
	}

	a {
		color: var(--a-text-color);
		text-decoration: var(--a-text-decoration);
	}

	#wrp {
		width: 100%;
		height: 100%;
		overflow:hidden;
		overflow-y:auto;
		position: relative;

		.contwrp {
			display: block;
			width: 100%;
			max-width: var(--cont-width);
			padding: 0;
			padding-right: var(--margin-big);
			padding-left: var(--margin-big);
			margin: 0 auto;
			box-sizing: border-box;
		}

		#header {
			background-color: var(--header-background-color);
			height: 64px;
			padding: var(--margin-small) var(--margin-big);
			text-shadow: var(--header-text-shadow);

			.contwrp {
				height: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: var(--header-font-size-big);
				line-height: var(--header-line-height-big);
				font-weight: var(--header-font-weight);
				text-transform: var(--header-text-transform);

				#logo{
					display: block;
					height: 100%;
					width: 50%;
					a{
						display: block;
						height: 100%;
						img {
							display: block;
							color: var(--header-text-color);
							height: 100%;
						}
					}
				}

				#menu{
					display: none;
					width: 50%;
					text-align: right;
					a{
						color: var(--header-text-color);
						max-height: 100%;
						text-decoration: none;
						margin-left: var(--margin-small);
					}
					a:first-child{
						margin-left: 0;
					}
				}
			}
		}


		#msg, .msg {
			display: block;
			box-sizing: border-box;
			margin-bottom: 8px;

			div {
				display: block;
				box-sizing: border-box;
				width: 100%;
				max-width: var(--cont-width);
				padding: var(--msg-padding);
				border-radius: var(--msg-border-radious);
				font-family: var(--msg-font-family);
				font-size: var(--msg-font-size);
				line-height: var(--msg-line-height);
				border: var(--msg-border);
				border-color: var(--msg-if-border-color);
				color: var(--msg-if-color);
				background-color: var(--msg-if-background-color);
				box-shadow: var(--msg-shadow);
				text-shadow: var(--msg-text-shadow);
				margin: 0 auto;
			}

			div.er {
				border-color: var(--msg-er-border-color);
				color: var(--msg-er-color);
				background-color: var(--msg-er-background-color);
			}

			div.ok {
				border-color: var(--msg-ok-border-color);
				color: var(--msg-ok-color);
				background-color: var(--msg-ok-background-color);
			}
		}


		#banner {
			display: block;
			background-color: var(--banner-background-color);
			text-align: center;
			padding: 55px;
			background-size: cover;

			.contwrp {
				max-width: var(--banner-cont-width);
				img {
					display: block;
					max-width: 100%;
				}
			}

			a[href="#rsvp"] {
				display: inline-block;
				background-color: transparent;
				color: var(--title-h1-text-color);
				font-family: var(--title-h3-font-famity);
				font-size: 20px;
				line-height: 30px;
				font-weight: bold;
				text-transform: var(--btn-text-transform);
				text-decoration: var(--btn-text-decoration);
				border: solid 2px var(--title-h1-text-color);
				border-radius: var(--btn-border-radious);
				text-shadow: var(--btn-text-shadow);
				box-shadow: var(--btn-shadow);
				padding: var(--btn-padding);
				margin-top: 32px;
			}
		}
	}

	body#checkout #wrp #msg {
		display: block;
	}

	#content {
		padding: 0;
		padding-top: var(--margin-big);
	}

	section {
		padding: 0;
		padding-right: var(--margin-big);
		padding-left: var(--margin-big);
		margin-bottom: var(--margin-big);

		.contwrp {
			p {
				margin-bottom: var(--margin-big);
				clear: both;
			}

			div.center,
			p.center {
				text-align: center;
			}

			p:last-child{
				margin-bottom: 0;
			}

			.btn {
				display: flex;
				justify-content: left;
				gap: var(--margin-small);

				a {
					display: inline-block;
					background-color: var(--btn-background-color);
					color: var(--btn-text-color);
					font-family: var(--btn-font-famity);
					font-size: var(--btn-font-size);
					line-height: var(--btn-line-height);
					font-weight: var(--btn-font-weight);
					text-transform: var(--btn-text-transform);
					text-decoration: var(--btn-text-decoration);
					border: var(--btn-border);
					border-radius: var(--btn-border-radious);
					text-shadow: var(--btn-text-shadow);
					box-shadow: var(--btn-shadow);
					padding: var(--btn-padding);

					&:hover {
						cursor: pointer;
					}
				}

				&.outline,
				a.outline {
					border: var(--input-border);
					border-color: var(--btn-background-color);
					color: var(--btn-background-color);
					background-color: var(--btn-text-color);
					text-shadow: none;
				}
			}

			.btn.center	{
				justify-content: center;
			}

			.btn.right	{
				justify-content: right;
			}

		}
	}

	section.row {
		padding: var(--margin-big);
		background-color: var(--row-background-color);
		color: var(--row-text-color);
		text-shadow: var(--row-text-shadow);

		h1, h2, h3 {
			color: var(--row-title-color);
		}

		a {
			color: var(--row-a-color);
		}
	}

	section:last-child {
		margin-bottom: 0;
	}

	a {
		color: var(--a-text-color);
		text-decoration: var(--a-text-decoration);
	}

	h1 {
		font-family: var(--title-h1-font-famity);
		font-size: var(--title-h1-font-size);
		font-weight: var(--title-h1-font-weight);
		line-height: var(--title-h1-line-height);
		text-transform: var(--title-h1-text-transform);
		color: var(--title-h1-text-color);
		margin-bottom: var(--margin-small);
	}

	h2 {
		font-family: var(--title-h2-font-famity);
		font-size: var(--title-h2-font-size);
		font-weight: var(--title-h2-font-weight);
		line-height: var(--title-h2-line-height);
		text-transform: var(--title-h2-text-transform);
		color: var(--title-h2-text-color);
		margin-bottom: var(--margin-small);
	}

	h3 {
		font-family: var(--title-h3-font-famity);
		font-size: var(--title-h3-font-size);
		font-weight: var(--title-h3-font-weight);
		line-height: var(--title-h3-line-height);
		text-transform: var(--title-h3-text-transform);
		color: var(--title-h3-text-color);
		margin-bottom: var(--margin-small);
	}

	h1.center, h2.center, h3.center {
		text-align: center;
	}

	.box {
		background-color: var(--box-background-color);
		color: var(--box-text-color);
		padding: var(--margin-big);
		border-radius: var(--box-border-radious);
		margin-bottom: var(--margin-big);
		box-shadow: var(--box-shadow);
		text-shadow: var(--box-text-shadow);

		h1, h2, h3 {
			color: var(--box-title-color);
		}

		p:last-child {
			margin-bottom: 0;
		}

		a {
			color: var(--box-a-color);
		}
	}

	#loader {
		display: none;
	}

	#footer {
		padding: 0;
		padding-top: var(--margin-big);
		padding-bottom: var(--margin-big);
		text-align: center;
	}

	hr {
		border: none;
		border-bottom: var(--input-border);
		margin: 24px 0px;
	}

	#wrp.htmx-request {
		#loader {
			display: flex;
			position: fixed;
			top: 0px;
			right: 0px;
			left: 0px;
			bottom: 0px;
			color: var(--btn-background-color);
			background-color: #ffffff;
			align-items: center;
			justify-content: center;

			svg {
				animation: rotation 1s linear infinite;
			}
		}
	}

	body#checkout {
		#wrp #banner { display: none; }
	}

	section form {

		.field_plus_one {
			border: var(--input-border);
			border-radius: var(--input-border-radious);
			padding: 4px 16px 8px;
			margin-bottom: 8px;

			.btn_remove {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 48px;

				a {
					text-decoration: none;
					margin-top: 24px;
					line-height: 20px;

					.i {
						font-size: 24px;
					}

					.text {
						display: none;
					}
				}
			}
		}

		label span.label,
		fieldset legend {
			display: block;
			color: var(--label-color);
			font-size: var(--label-font-size);
			line-height: var(--label-line-height);
			font-family: var(--label-font-family);
			font-weight: var(--label-font-weight);
			padding: var(--label-padding);
			text-transform: var(--label-text-transform);

			span.tiny {
				font-size: 12px;
				font-weight: regular;
			}
		}

		fieldset {
			padding: 4px 16px 16px;
			border: var(--input-border);
			border-radius: var(--input-border-radious);
			margin-top: 16px;
			margin-bottom: 16px;

			legend {
				color: var(--btn-background-color);
				font-size: var(--label-line-legend);
			}
		}

		label {
			display: block;
			padding: 8px 0;
			white-space: nowrap;

			span.er {
				display: block;
				padding: var(--label-padding);
				color: var(--msg-er-color);
				margin: 8px 0;
			}

			&:has(span.er) {

				input, select {
					border-color: var(--input-er-border-color);
				}

			}

			input.center, select.center {
				text-align: center;
			}

		}

		input, select, .btn {
			width: 100%;
			height: var(--input-height);
			display: block;
			box-sizing: border-box;
			color: var(--input-color);
			background-color: var(--input-background-color);
			font-family: var(--input-font-family);
			font-size: var(--input-font-size);
			line-height: var(--input-line-height);
			padding: var(--input-padding);
			border: var(--input-border);
			outline: none;
			border-radius: var(--input-border-radious);
		}

		input + .helper,
		select + .helper,
		textarea + .helper {
			margin-bottom: 0px;
		}


		.btn {
			width: auto;
			display: inline-block;
			background-color: var(--btn-background-color);
			color: var(--btn-text-color);
			font-family: var(--btn-font-famity);
			font-size: var(--btn-font-size);
			line-height: var(--btn-line-height);
			font-weight: var(--btn-font-weight);
			text-transform: var(--btn-text-transform);
			text-decoration: var(--btn-text-decoration);
			border: var(--btn-border);
			border-radius: var(--btn-border-radious);
			text-shadow: var(--btn-text-shadow);
			box-shadow: var(--btn-shadow);
			padding: var(--btn-padding);

			&:hover {
				cursor: pointer;
			}
		}

		label.right {
			text-align: right;
		}

		.split {
			display: flex;
			justify-content: space-between;
			gap: 8px;

			label {
				width: 100%;
			}

			label.wauto {
				width: auto;
			}
		}
	}
}

#hotsite {

	#rsvp {
		position: relative;
		display: block;
		width: 100%;
		min-height: 100px;
		max-width: var(--cont-width);
		padding: 0;
		padding-right: var(--margin-big);
		padding-left: var(--margin-big);
		box-sizing: border-box;
		border: var(--input-border);
		border-radius: var(--input-border-radious);
		padding: 24px;
		margin: 32px auto;

		section,
		.contwrp {
			padding-left: 0px;
			padding-right: 0px;
		}
	}

	#wrp.htmx-request #rsvp {
		#loader {
			position: absolute;
		}

		#register_form {
			display: none;
		}
	}
}

@media (max-width: 768px) {
	html, body {
		#wrp {
			/* .contwrp {
				padding-right: var(--margin-small);
				padding-left: var(--margin-small);
			} */

			#header {
				height: 48px;
				/* padding-top: var(--margin-small);
				padding-bottom: var(--margin-small); */
				.contwrp {
					font-size: var(--header-font-size-small);
					line-height: var(--header-line-height-small);
				}
			}
		}

		section form {
			.split {
				display: block !important;
			}

			.field_plus_one .btn_remove {
				width: auto !important;

				a {
					margin-top: 0px !important;

					.i {
						display: none !important;
					}

					.text {
						display: block !important;
					}
				}
			}
		}
	}
}

@keyframes rotation {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}