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


@font-face {
    font-family: 'Geizer';
    src: url('/assets/fonts/GeizerRegular.woff2') format('woff2'),
        url('/assets/fonts/GeizerRegular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'Bungee';
    src: url('/dist/fonts/Bungee-Regular.woff2') format('woff2'),
        url('/dist/fonts/Bungee-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  font-family: "Poppins", sans-serif;
  color: #353333;
  -webkit-font-smoothing: antialiased;
}

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
  margin-block-end: 0;
  margin-block-start: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
  margin: 0;
  padding: 0;
}

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
  text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input, button,
textarea, select {
  font-family: inherit;
  font-size: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}

h1 {
	color: #f2581d;
	font-size: 48px;
	margin-bottom: 20px;
}

h2 {
	color: #f2581d;
	font-size: 28px;
	margin-bottom: 20px;
}

h3 {
	color: #f2581d;
	margin-bottom: 20px;
}

img {
	display: block;
	width: 100%;
	height: auto;
}

.loginPage {
	background: url(../images/background.jpg) center center no-repeat;
	background-size: cover;
	width: 100%;
	height: 100vh;
	position: relative;
	.loginForm {
		box-shadow: 0 0 30px rgba(0,0,0,0.5);
		border-radius:20px;
		max-width: 400px;
		width: 80%;
		background: white;
		padding: 20px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateX(-50%) translateY(-50%);
		@media only screen and (min-width: 600px) {
			padding: 20px 40px 40px 40px;
		}
		.logo {
			width: 140px;
			margin: 0 auto 30px auto;
		}
	}
}

.field {
	display: block;
	margin: 0 0 14px 0;
	label {
		span.label {
			display: block;
			margin-bottom: 4px;
			font-weight: 700;
			font-size: 16px;
		}
		input[type="text"],
		input[type="email"],
		input[type="password"],
		input[type="search"],
		input[type="date"],
		textarea {
			color: #555;
			width: 100%;
			display: block;
			padding: 0 auto;
			border-radius: 5px;
			border: 1px solid #EEE;
			padding: 15px 20px;
		}
	}
	input:where([type="checkbox"][role="switch"]) {
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		position: relative;
		font-size: inherit;
		width: 6em;
		height: 3em;
		box-sizing: content-box;
		border: 1px solid #EEE;
		border-radius: 5px;
		vertical-align: text-bottom;
		margin: auto;
		color: inherit;
		background: #333;
		transition: all ease 0.3s;
	}
	input:where([type="checkbox"][role="switch"]):hover {
		cursor: pointer;
	}

	input:where([type="checkbox"][role="switch"])::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 0;
		transform: translate(0, -50%);
		box-sizing: border-box;
		width: 2.80em;
		height: 2.60em;
		margin: 0 0.2em;
		border: 0px solid;
		border-radius: 4px;
		background: white;
		transition: all ease 0.3s;
	}

	input:where([type="checkbox"][role="switch"]):checked {
		background: #22f383;
	}

	input:where([type="checkbox"][role="switch"]):checked::before {
		left: 2.8em;
		
	}

	&.checkbox {
		margin: 20px 0;
		label {
			display: flex;
			gap: 4px;
			span.label {
				font-weight: normal;
				margin-bottom: 0px;
			}
		}
	}
}



.actions {
	margin-top: 10px;
	margin-bottom: 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	.primaryActions {
		display: flex;
		align-items: center;
		gap: 10px;
	}
	p {
		margin: 0;
	}
	p.note {
		font-size: 13px;
		color: #999;
	}
}

.errors {
	color: red;
}

input[type="submit"],
a.button,
button {
	line-height: 1.4;
	font-size: 16px;
	text-align: center;
	border: 0px;
	background: #f15a23;
	padding: 10px 15px !important;
	color: white; 
	display: block;
	border-radius: 5px;
	font-weight: 600;
	text-decoration: none;
	&:hover, &:focus {
		background: #c74a1b;
		cursor: pointer;
	}
	&.positive {
		color: #353333;
		background: #24f282;
		&:hover, &:focus {
			background: #4b735d;
			cursor: pointer;
			color: white;
		}
	}
	&.secondary {
		background: #00abbd;
		&:hover, &:focus {
			background: #0d8692;
			cursor: pointer;
			color: white;
		}
	}
	&.tertiary {
		background: #a36bb4;
		&:hover, &:focus {
			background: #884c9c;
			cursor: pointer;
			color: white;
		}
	}
	&.negative {
		background: red;
		&:hover, &:focus {
			background: black;
			cursor: pointer;
			color: white;
		}
	}
	&.optional {
		background: #909090;
		&:hover, &:focus {
			background: #696969;
			cursor: pointer;
			color: white;
		}
	}
}


.deleteWrapper {
	display: flex;
	gap: 20px;
	
}

dialog {
p {
		margin-top: 14px !important;
	}
}

.container {
	max-width: 1280px;
	width: 80%;
	margin: 0 auto;
}

html {
	background: url(../images/bg-cream.jpg) top center;
	background-size: 1200px;
	width: 100%;
	min-height: 100vh;
	position: relative;
	.generalPage {
		background: rgba(255,255,255,0.7);
		width: 100%;
		min-height: 100vh;
	}
}

header {
	background:#f15a23;
	background: url(../images/bg-orange.jpg) top center;
	background-size: 1200px;
	margin:0;
	
	color: white;
	position: sticky;
	top: 0px;
	left: 0px;
	z-index: 100;
	ul {
		margin: 0;
		padding: 0;
		list-style: none;
		display: flex;
		
		font-weight: 700;
	}
	a {
		text-decoration: none;
		padding: 10px 15px;
		display: block;
		background: transparent;
		&:hover, &:focus {
			background: #353333;
		}
	}
}

.genericContentArea {
	padding: 50px 0;
	.container {
		
	}
}

details {
	
	
	&:not(:last-of-type) {
		border-bottom: 1px solid #EEE;
	}
	&[open] {
		background: rgba(255,255,255,1);
		
	}
	summary {
		a.viewOrder {
			display: block;
			width: 24px;
			height: 24px;
			svg {
				path {
					fill: #DDD;
				}
			}
			&:hover, &:focus {
				svg {
					path {
						fill: #333;
					}
				}
			}
		}
		background: rgba(255,255,255,0.4);
		padding: 10px 0;
		display: flex;
		justify-content: space-between;
		gap: 30px;
		align-items: center;
		.keyInfo {
			display: flex;
			justify-content: space-between;
			flex-grow: 1;
		}
		.orderIcons {
			display: flex;
			gap: 6px;
			span.icon {
				width: 28px;
				height: 28px;
				background-color: #DDD;
				display: block;
				border-radius: 50%;
				position: relative;
				&.green {
					background-color: #a8ce54;
				}
				&.red {
					background-color: red;
				}
				.tip {
					width:100px;
					border-radius: 3px;
					position: absolute;
					top: 100%;
					left: 50%;
					background: #f25a24;
					transform: translateX(-50%) translateY(5px);
					padding: 8px 10px;
					text-align: center;
					z-index: 1;
					display: none;
					color: white;
					font-size: 14px;
					&:before {
						content:"";
						width: 10px;
						height: 10px;
						display: block;
						position: absolute;
						top: -5px;
						left: 50%;
						transform: translateX(-50%) rotate(45deg);
						background: #f25a24;
					}
				}
				&:hover, &:focus {
					.tip {
						display: block;
					}
				}
				.symbol {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%,-50%);
					max-width:100%;
					max-height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					svg {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
		&:hover, &:focus {
			background: rgba(255,255,255,1);
			cursor: pointer;
		}
		
	}
	
	.content {
		
		background: rgba(255,255,255,1);
		padding: 20px 0;
		.actions {
			margin-bottom: 0px;
		}
		
	}
}

table.orderTable {
			width: 100%;
			border-collapse: collapse;
			th, td {
				padding: 5px;
			}
			th {
				text-align: left
			}
			tbody {
				tr {
					td {
						border-top: 1px solid #EEE;
						
						.icon {
							margin: 0 auto;
							width: 22px;
							height: 22px;
							display: inline-block;
							svg {
								width:100%;
								height: 100%;
								path {
									fill: #f15a23;
								}
							}
						}
					}
					td:first-of-type {
						width: calc(100% - 15% - 98px);
					}
					td:nth-of-type(2) {
						width: 15%;
					}
					td:nth-of-type(3) {
						width: 98px;
						display: flex;
						align-items: center;
						justify-content: center;
					}
					td {
						.field {
							margin-bottom: 0px;
						}
					}
				}
			}
		}

.order-items {
	margin-bottom: 20px;
	width: 100%;
	th {
		text-align: left
	}
	tr {
		td:first-of-type {
			width: calc(100% - 15% - 98px - 50px - 100px);
		}
		td:nth-of-type(2) {
			width: 15%;
		}
		td:nth-of-type(3) {
			width: 98px;
		}
		td:nth-of-type(4) {
			width: 50px;
		}
		td:nth-of-type(5) {
			width: 100px;
		}
		td {
			.field {
				margin-bottom: 0px;
			}
		}
	}
	.removeRow {
		width: 50px;
		height: 50px;
		
	}
}


.customerSummary {
	background: white;
	padding: 30px;
	border-radius: 5px;
	margin-bottom: 10px;
	ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}
}

.orderNote {
	background: white;
	padding: 30px;
	border-radius: 5px;
	margin-bottom: 10px;
}

.orderItems {
	background: white;
	padding: 30px;
	border-radius: 5px;
	margin-bottom: 10px;
}

.orderValue {
	margin-top: 30px;
}

.orderStatus {
	background: white;
	padding: 30px;
	border-radius: 5px;
	margin-bottom: 10px;
	ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}
}

.orderActions {
	background: white;
	padding: 30px;
	border-radius: 5px;
	margin-bottom: 10px;
	ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}
}



.paymentValue {
	background: white;
	margin-top: 30px;
}




.orderBlock {
	background: white;
	padding: 30px;
	border-radius: 5px;
	margin-bottom: 10px;
	&:has(details[open]) {
		details {
			opacity: 0.3;
		}
		details[open] {
			opacity: 1;
			.viewOrder {
				svg {
					path {
						fill: black;
					}
				}
			}
		}
	}
}

ul.quickLinks {
	position: fixed;
	top: 0px;
	right: 10px;
	margin: 0;
	list-style: none;
	display: flex;
	gap: 10px;
	z-index: 100;
	.button {
		height: 44px;
		border-radius: 0px;
	}
}

.tvScreen {
	main {
		position: relative;
		.controls {
			display: flex;
			gap: 4px;
			z-index: 100;
			position: fixed;
			bottom: 0px;
			right: 0px;
			line-height: 24px;
		}
	}
}

.screenMain {
	
	.feature {
		background: rgba(255,255,255,0.6);
		overflow: hidden;
		.videoFile {
			height: 100vh;
			width: 100vw;
			video {
				object-fit: cover;
				width: 100%;
				height: 100%;
			}
		}
		.video {
			height: 100vh;
			width: 100vw;
			iframe {
				object-fit: cover;
				width: 100%;
				height: 100%;
			}
		}
		.featuredImage {
			height: 100vh;
			width: 100vw;
			img {
				object-fit: cover;
				width: 100%;
				height: 100%;
			}
		}

		.calendar {
			height: 100vh;
			width: 100vw;
		}
		
		
	}

	.calendar {
		display: flex;
			align-items: center;
			justify-content: center;
		.inner {
			max-width: 880px;
			margin: 0 auto;
			.cta {
				margin-top: 60px;
				font-size: 2.2rem;
				text-align: center;
			}
			.titleArea {
				h2 {
					font-family: "Leckerli One";
					font-size: 3rem;
					line-height: 3rem;
					margin-bottom: 0px;
					font-weight: normal;
					text-align: center;
				}
				h3{
					font-family: Geizer;
					font-size: 8rem;
					line-height: 7rem;
					letter-spacing: 1px;
					font-weight: normal;
					text-align: center;
					margin-bottom: 60px;
					color: #333;
				}
			}
			.eventList {
				.event {
					margin-bottom: 20px;
					background: white;
					display: flex;
					border-radius: 10px;
					.date {
						width: 200px;
						height: 200px;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						.day {
							font-family: Geizer;
							color: #f2581d;
							font-size: 6rem;
							line-height: 5.2rem;
						}
						.month {
							font-size: 3rem;
							line-height: 3rem;
							font-family: Geizer;
							color: #353333;
							font-weight: normal;
							letter-spacing: 1px;
						}
					}
					.text {
						width: calc(100% - 200px);
						padding: 0 40px 0 0px;
						display: flex;
						flex-direction: column;						
						justify-content: center;
						h3 {
							font-size: 2.3rem;
							margin-bottom: 0px;
						}
						.meta {
							font-size: 1.6rem;
							.howToBook {
								display: block;
								font-weight: bold;
							}
						}
					}
				}
			}
		}
	}
	.promotion {
		margin: 0 auto;
		text-align: center;
		height: 100vh;
		width: 100vw;
		
		&.centered {
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.topMessage {
			h3 {
				font-family: "Leckerli One";
				font-size: 3rem;
				line-height: 3rem;
				margin-bottom: 0px;
				font-weight: normal;
			}
			h4 {
				font-family: Geizer;
				font-size: 7.6rem;
				line-height: 7rem;
				letter-spacing: 1px;
				font-weight: normal;
				
			}
			margin-bottom: 40px;
		}
		.inner {
			max-width: 880px;
					
			
			.image {
				max-width: 720px;
				margin: 0 auto;
				box-shadow: 0 0 20px rgba(0,0,0,0.7);
				position: relative;
				margin-bottom: 40px;
				.customMessage {
					position: absolute;
					width: 220px;
					height: 220px;
					top: -20px;
					left: -20px;
					background: #f2571e;
					padding: 30px;
					aspect-ratio: 1;
					text-align: center;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 50%;
					color: white;
					font-weight: bold;
					font-size: 2.5rem;
					line-height: 2.5rem;
					transform: rotate(-10deg);
				}
				.preOrderDate {
					position: absolute;
					width: 220px;
					height: 220px;
					top: -20px;
					right: -20px;
					background: #b6d435;
					padding: 20px;
					aspect-ratio: 1;
					text-align: center;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					border-radius: 50%;
					color: white;
					font-weight: bold;
					font-size: 2.5rem;
					line-height: 2.4rem;
					transform: rotate(10deg);
					span {
						font-size: 1.4rem;
					}
				}
			}
			.text {
				h2 {
					font-size: 3.6rem;
				}
				h3 {
					font-size: 2.4rem;
					font-weight: normal;
					color: #343333;
					span {
						font-weight: bold;
					}
				}
				.price {
					font-size: 2.2rem;
				}
				.additionalText {
					font-size: 2.2rem;
					
				}
			}
		}
	}
}