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

:root {
	--storm: rgb(41,51,73);
	--electric: rgb(235,102,0);
	--action: rgb(0,200,10);
	--cloud: rgb(220,220,230);
	--close: rgb(255,20,30);
	--funuityLogo: url('https://static.bandfinder.uk/images/title/funuity.png');
}

body {
	margin:0;
	font-family: Helvetica, Arial, sans-serif;
	/*font-size: clamp(0.8rem, 2svh, 40rem);*/
	font-size: clamp(10px, 1.8svw, 20px);
}

li { list-style-type: none; }

/* Global Link Styles */
a:link, a:visited {
	color: var(--storm);
	font-weight:700;
	text-decoration: none;
}

a:hover {
	color: var(--action);
}

input[type=checkbox] {
	zoom: 2;
	margin: 2px 5px 2px;
}

/********************************************** MAIN HEADER STYLES ********<<<<<<<<<<<<<<<<<<<<*/
.mainHeader {
	width:100%;
	max-height:9svh;
	height:16vw;
	background-color: var(--cloud);
	padding: 1svh 10px 0svh;
	margin:0;
	display:block;
}

.homeLogo {
	max-height: 100%;    /* Force anchor to be 10svh */
	height:15vw;
	object-fit:contain;
	align-items: center;
	float:left;
	overflow: hidden; /* Safety net */
	content: var(--funuityLogo);
}

.menu {
	position:relative;
}

.menuToggle {
	float:right;
	border: 0;
	background-color: transparent;
	max-width:7svh;
	max-height:7svh;
	width: 9vw;
	height: 9vw;
	margin:0.5svh 1.5svh 1svh;
	line-height:0.4;
	text-indent: 10svh;
	white-space: nowrap;
	overflow: hidden;
	position:relative;
	background-size: auto min(8vw,6svh);
	background-color:transparent;
	background-repeat:no-repeat;
	background-position: center center;
	border-bottom: 3px solid transparent;
}

.mainHeader img {
	display:block;
	width: auto;
	max-width:100%;
	max-height:100%;
	object-fit: contain;
	border-bottom:3px solid transparent;
}


.menuToggle.isOpen {
	background-color: var(--action);
}

.menuBlackout {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width:100%;
	height: 100svh;
	background-color: rgba(0,0,0,0.8);
	z-index:900;
	animation-name: darken;
	animation-duration: 0.5s;
	animation-delay: 0s;
}

.menuBlackout img {
	position:absolute;
	bottom:20px;
	left:20px;
	height:8svh;
}

.menuBlackout:hover img {
	background-color:var(--close);
}

.menuDropDown {
	display:none;
	position:absolute;
	top: 5%;
	left:50svw;
	width:80svw;
	max-width:600px;
	border:2px solid var(--electric);
	border-radius:4svw;
	background-color: white;
	text-align:center;
	max-height:90svh;
	overflow:auto;
	z-index: 901;
}

.menuDropDown.isOpen, .menuBlackout.isOpen {
	display: block;
	animation-name: zoomOut;
	animation-duration: 0.5s;
	animation-delay: 0s;
}

.menuDropDown.isOpen {
	animation-name: zoomOut;
	transform: translateX(-50%);
}

.menuBlackout.isOpen {
	animation-name: darken;
}	

.menuDropDown h3 {
	width: fit-content;
	font-size: 1.8em;
	padding: 0.5em 0.5em 0.5em 1.8em;
	background-position: 0.2em center;
	background-repeat: no-repeat;
	background-size: 1.4em;
	margin:0.4em auto;
}

.menuDropDown h5 {
	font-size: 1.2em;
	padding: 0;
	margin:0.2em auto;
	width: fit-content;
}

.menuDropDown a, .menuDropDown .clickable {
	font-size:1.3em;
	padding: 0.7em 0.5em 0.7em 1.8em;
	background-position: 0.4em center;
	background-repeat: no-repeat;
	background-size: 1.6em;
	margin:0.4em auto;
	border-radius:0.4em;
	border: 1px solid transparent;
	background-color:var(--cloud);
	width: clamp(300px, 90%, 700px);
	height:2.6em;
	text-align:center;
	display:block;
}

.menuDropDown a:hover, #mainMenuDropDown a:hover, .menuToggle:hover, .mainHeader img:hover, .menuDropDown .clickable:hover {
	border-color:var(--electric);
	background-color:var(--action);
	color:white;
	transition-property: color, border-color, background-color;
	transition-duration: 1.5s;
	transition-delay: 0s;
}

.scroller {
	font-size:1.2em;
	max-height:58svh;
	overflow-y:scroll;
	overflow-x:hidden;
	width:96%;
	border: 1px solid var(--storm);
	border-right:none;
	margin: 5px auto;
	display:grid;
	grid-template-columns: 1fr 1fr 2fr 4fr 2fr;
	row-gap: 0.5em;
	column-gap:0;
	color: var(--storm);
	border-radius:0.3em;
}

.scroller div {
	padding: 0.1em;
	background-color: var(--cloud);
	display:flex;
	align-items:center;
	flex-direction:column;
	gap:0.5em;
	justify-content: center;
}

.scroller .img img, .scroller .typeImg img {
	max-width:95%;
}

.scroller .profileName span {
	display:block;
	font-size:0.8em;
}

.scroller .buttons {
	padding: 0.5em 0.1em;
	justify-content: space-around;
}

.scroller button {
	background-color: var(--storm);
	color: var(--electric);
	font-size:0.7em;
	padding:0.2em;
	border-radius:0.2em;
}

.scroller .defaultProfile.selected {
	background-color: var(--electric);
	color: var(--storm);
}

.scroller .selectProfile.selected {
	visibility:hidden;
}

.scroller button:hover {
	background-color: var(--action);
}

.profileBox.selected {
	background-image: url('https://static.bandfinder.uk/images/bullets/tick.png');
	background-repeat:no-repeat;
	background-position:center center;
	background-size:5svh;
}

.remainingPage { /* Used for where the content will definitley fit on a single page only */
	clear:both;
	height:91svh;
	display:flex;
	justify-content: center;
	flex-direction: column;
	gap:1em;
	width:100%;
}
	
/* FORMS */

form {
	margin:0;
	padding:0;
}

input {
	padding:0.3em;
	border-radius:0.2em;
	font-size:1.2em;
	color: var(--storm);
	background-color: var(--cloud);
	margin: 0.8em;
}

@media (orientation: landscape) and (min-width: 800px) {
	  /* CSS rules to apply when the screen is in landscape mode */
	
		.menuToggle.main { display:none; }
		.menuDropDown h3.main { display: none; }
		
		#mainMenuDropDown { 
			display:block; 
			background-color:transparent;
			position:static;
			border:none;
			width:auto;
			max-width: none;
			padding:0;
			float:left;
			margin: 0.1em 0 0.1em 1em;
			border-radius:0;
		}
		
		#mainMenuDropDown a {
			font-size:clamp(14px, 1.2em, 2svw);
			border:none;
			border-bottom: 3px solid transparent;
			border-radius: 0;
			display:inline-block;
			width:auto;
			margin: 0 1.7svw 0 0;
			padding-left:2.1em;
			max-height:9svh;
		}
		
		#toggleUserMenu {
			margin: 0 1.7svw 0 0;
		}
		
		.mobileOnly {
			display:none;
		}
}

/* Top Message display */
#topMessage {
	background-color:var(--electric);
	color:var(--storm);
	position:fixed;
	top:110vh;
	left:0;
	width:100%;
	border:2px solid red;
	z-index:999;
	overflow:hidden;
	text-align:center;
	font-size:1.4em;
	padding:3px;
	animation-name: messageScroll;
	animation-duration: 7s;
	animation-delay: 0s;
}

#topMessage .internal {
	margin-bottom:50px;
}

#topMessage .button {
	background-color: var(storm);
	color: white;
}
/* ------------------------------ Icons ------------------------------------------------ */
.main {	background-image: url(https://static.bandfinder.uk/images/siteIcon/menu.png); }

.user {	background-image: url(https://static.bandfinder.uk/images/siteIcon/user.png); }

.venue { background-image: url(https://static.bandfinder.uk/images/siteIcon/venue.png); }
	
.act { background-image: url(https://static.bandfinder.uk/images/siteIcon/act.png); }

.event { background-image: url(https://static.bandfinder.uk/images/siteIcon/event.png); }

.festival { background-image: url(https://static.bandfinder.uk/images/siteIcon/festival.png); }

.promoter { background-image: url(https://static.bandfinder.uk/images/siteIcon/promoter.png); }

.fan { background-image: url(https://static.bandfinder.uk/images/siteIcon/fan.png); }

.forum { background-image: url(https://static.bandfinder.uk/images/siteIcon/forum.png); }	

.signIn { background-image: url(https://static.bandfinder.uk/images/siteIcon/signIn.png); }

.register { background-image: url(https://static.bandfinder.uk/images/siteIcon/register.png); }

.settings { background-image: url(https://static.bandfinder.uk/images/siteIcon/settings.png); }

.place { background-image: url(https://static.bandfinder.uk/images/siteIcon/place.png); }

.setLocation { background-image: url(https://static.bandfinder.uk/images/siteIcon/setLocation.png); }

/* ----------------------------- Animations -------------------------------------------- */
@keyframes darken {
	from { background-color:rgba(50,50,50,0);}
	to {background-color:rgba(0,0,0,0.8);}
}

@keyframes zoomOut  {
    from {transform: scale(0); transform: translateX(0);} 
    to {transform: scale(1); transform: translateX(-50%);}
}

@keyframes zoomIn  {
    from {transform: scale(1)} 
    to {transform: scale(0)}
}

@keyframes growHeight {
    from {max-height:0px;} 
    to {max-height:500px;}
}

@keyframes messageScroll {
	0% {top:100vh;}
	20% {top:0}
	80% {top:0}
	100% {top:-40vh}
}

@-webkit-keyframes messageScroll {
	0% {top:100vh;}
	20% {top:0}
	80% {top:0}
	100% {top:-40vh}
}

.link {
	position:relative;
}

.link::before {
	position: absolute;
	right: 100%;       /* Position it to the left of the box's start */
	margin-right: 10px; /* Space between icon and box */
	bottom: 0;
	content: "\261E"; /* Unicode for ☞ */
	vertical-align: top;
	display: inline-block;
	color: var(--storm); /* Match your link color */
	font-size: max(1.3em, 30px);
	transition: transform 0.2s ease;
}

/* Subtle animation on tap/hover */
.link:active, .link:hover::before {
  transform: translateX(4px);
  color: var(--action);
}

.link:hover {
	color: var(--electric);
	border-color:var(--electric);
}
.spanSmaller span, .linkLine { font-size:0.7em; }

.flex-wrap-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Or left, depending on your design */
    gap: 0 10px;
	flex-direction: column;
}

.flex-wrap-container .separator {
	display: none;
}

.lookupList {
	margin:3px auto;
	width:90%;
	max-width:500px;
	overflow-x:hidden;
	overflow-y:auto;
	border:1px solid rgb(231,120,23);
	max-height:200px;
	display:none;
	color:var(--storm);
}

.lookupList div {
	display:flex;
	justify-content: space-between;
	align-content:center;
	width:100%;
	max-height:2.5em;
	margin-bottom:0.5em;
	padding:3px;
	border:1px solid rgb(231,120,23);
	border-left:none;
	border-right:none;
	background-color:var(--cloud);
}

.lookupList div:hover {
	background-color: var(--action);
	color: var(--electric);
}

.lookupList div img {
	flex:1;
	object-fit:contain;
}

.lookupList div p {
	font-size:1em;
	flex:6;
	display:flex;
	flex-direction: column;
	justify-content:center;
	font-weight:700;
}

.lookupList div p span{
	font-weight:300;
	font-size:0.8em;
}

button {
	background-color: var(--electric);
	color: var(--storm);
}

button:hover {
	background-color: var(--action);
	color: var(--electric);
	transition-property: color, border-color, background-color;
	transition-duration: 0.5s;
	transition-delay: 0s;
}

button.canc {
	background-color: var(--close);
	color: var(--storm);
}

button.canc:hover {
	color:white;
	border-color: var(--electric);
}

button:active {
	background-color: transparent;
	color: var(--action);
}

@media (orientation: landscape) and (min-width: 800px) {
	  /* CSS rules to apply when the screen is in landscape mode */
	.flex-wrap-container {
        flex-direction: row;
    }
	.flex-wrap-container .separator {
    display: inline;
	}
}