@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&family=Roboto:wght@300;400&display=swap');


/* FORMATTING ELEMENTS */

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

:root{
	--font-heading: 'Montserrat', sans-serif;
	--font-body: 'Roboto', sans-serif;

	--color-main: #E14C56;
	--color-secondary: #F8A256;
	--color-accent: #FED4AE;

	--color-neutral-dark: #444;
	--color-neutral-medium: #888;
	--color-neutral-light: #ddd;

	--color-black: #000;
	--color-white: #fff;

	--header-height: 3rem;
}

body{
	margin: 0;
	font-size: 100%;
	font-family: var(--font-body);
	color: var(--color-neutral-dark);
}

h1,
h2,
h3,
h4,
h5,
h6{
	font-family:var(--font-heading);
	margin: 0.25em 0;
}

h1{
	font-size:2em;
	margin-top: 0;
}

h1, h2{
	color: var(--color-main);
}

h2~p,
h3~p{
	margin-top: 0;
}

a{
	color: inherit;
	text-decoration: none;
	font-weight: bold;
}

a:hover, 
a:visited {
	text-decoration: none;
}


img {
	max-width: 100%;
}

ul{
	list-style-type: none;
	padding: 0;
	margin: 0;
}

ul li{
	padding: 0;
}


figure{
	margin: 0;
	width: max-content;
}

figcaption{
	text-align: center;
	font-family: var(--font-heading);
}



/* LAYOUT CLASSES */

.hidden{ display: none; }

.display-flex{ display: flex; }
.display-block{ display: block; }
.display-inline-flex{ display:inline-flex; }
.display-inline-block{ display:inline-block; }

.flex-stretch{ flex: 1 1 auto; }
.flex-none{ flex: none; }

.flex-align-center { align-items: center; } /* Align across the */
.flex-justify-center { justify-content: center; }

.flex-column { flex-direction:column; }

.position-relative{ position:relative; }
.position-absolute{ position:absolute; }

hr{
	border: none;
	height: 2px;
	background-color: transparent;
}

hr.spacer {
	margin: 1em 0;
	border-width: 0;
}
	.spacer.large {
		margin: 1.5em 0;
		border-width: 0;
	}
	.spacer.small{
		margin: 0.5em 0;
		border-width: 0;
	}
	.spacer.xs{
		margin: 0.35em 0;
		border-width: 0;
	}


hr.vertical-spacer {
	margin: 0 1em;
}
	.vertical-spacer.large {
		margin: 0 1.5em;
	}
	.vertical-spacer.small{
		margin: 0 0.5em;
	}
	.vertical-spacer.xs{
		margin: 0 0.3em;
	}

.overscroll{
	height: 100%;
	width: 100%;
	overflow: auto;
}

.text-centered{ text-align: center; }
.text-right{ text-align: right; }
.text-left{ text-align: left; }




/* FORMS */

.form-control {
    margin: 1em 0;
}
.form-label {
    font-size: 0.8em;
    color: var(--color-neutral-medium);
    margin: 0.5rem 0;
}
.ui-mobile label {
   margin:0.5rem 0;
}
.form-input {
    display: inline-block;
    width: 100%;
    border-width: 0;
    background-color: var(--color-white);
    font: inherit;
    padding: 0.5em 1em;
    margin: 0;
    outline: 0;
    border: 1px solid var(--color-secondary);
    color:var(--color-neutral-medium);
    transition-duration: 0.6s;
    border-radius: 10px;
}

.hotdog {
   width:100%;
   background-color:var(--color-white);
   padding:0.5em 1em;
   border-radius:2em;
   line-height:1;
   display:inline-flex;
}
.hotdog input {
   background-color:transparent;
   border-width:0;
   font:inherit;
   color:var(--color-neutral-medium);
   border-radius:0;
   padding:0;
   margin:0;
   width:100%;
   flex:1;
   outline:0;
   transition-duration: 0.6s;
}

.form-select select {
	display: inline-block;
	border-width: 0;
	background-color: var(--color-white);
	font: inherit;
	color: var(--color-neutral-medium);
	border: 1px solid var(--color-secondary);
	padding: 0.5em 1em;
    margin: 0;
	width: 100%;
	-webkit-appearance: none;
	outline: 0;
	transition-duration: 0.6s;
	border-radius: 10px;
	text-align: center;
}

.form-input:focus::placeholder{
	color: transparent;
}

.form-select select:focus,
.form-input:focus,
.hotdog input:focus {
	color: var(--color-neutral-dark);
}

.form-select{
	position: relative;
}
	.form-select::after{
		position: absolute;
		top: 50%;
		right: 0.25em;
		transform: translateY(-50%);
		color: var(--color-neutral-medium);
		font-size: 1em;
		content:'\25bc';
		pointer-events: none;
		transition: all 0.6s;
	}

select option{
	font-weight: 400;
	color: var(--color-neutral-medium);
}

.form-button {
    display: inline-block;
    width: 100%;
    border-width: 0;
    background-color: var(--color-secondary);
    font: inherit;
    padding: 0.5em 1em;
    margin: 0;
    outline: 0;
    text-align: center;
    font-weight: bold;
    border-radius: 50px;
}
	.form-button.half{
		width: 50%;
		margin: 0 auto;
	}
	.form-button.secondary{
		background-color: var(--color-neutral-dark);
		color: var(--color-white);
	}
	.form-button ~ a{
		color: var(--color-main);
		display: block;
	}


.button-circle{
	border-radius: 50%;
	background-color: var(--color-secondary);
	height: 3.5em;
	width: 3.5em;
	line-height: 4em;
	display: inline-block;
	text-align: center;
	box-shadow: 0 0 5px rgba(0,0,0,0.15);
	color: var(--color-white);
}

textarea {
	height: 6em;
}


/* PAGE LAYOUTS */

.ui-mobile .ui-page-active {
   display:flex;
   flex-direction:column;
   position:fixed;
   top:0;
   left:0;
   width:100%;
   height:100%;
   overflow:hidden;
}
[data-role='main'] {
   flex: 1 1 100%;
   overflow:hidden;
   position:relative;
}
.ui-header,
.ui-footer {
   flex:none;
   /* height:var(--header-height);
   line-height:var(--header-height); */
   border-width:0;
   box-shadow:0 0 5px rgba(0,0,0,0.15);
   overflow:hidden;
   position:relative;
}

.ui-footer{
	color: var(--color-neutral-medium);
	padding: 0.5em 0;
}

.ui-header{
	padding: 0.7em 1em;
	background: linear-gradient(90deg, rgba(225,76,86,1) 0%, rgba(248,162,86,1) 100%);
	color: var(--color-white);
}

.ui-header.secondary{
	background:var(--color-white);
	border-bottom: 1px solid var(--color-neutral-light);
}

.ui-header .ui-title {
   margin:0;
   padding:0;
   position:absolute;
   top:0;
   left:0;
   width:100%;
   text-align:center;
}

.ui-header ul,
.ui-footer ul {
   position:relative;
   display:flex;
   list-style-type:none;
   margin:0;
   padding:0;
}
.ui-footer li {
   flex: 1 1 auto;
   text-align:center;
}
.ui-header a,
.ui-footer a {
   display:block;
   padding:0 1em;
}

a.nav-link{
	padding: 0;
	vertical-align: middle;
	display: inline-flex;
}

.page-side-padding{
	padding-left: 1.5em;
	padding-right: 1.5em;
}

.page-top-padding{
	padding-top: 1.5em;
	padding-bottom: 1.5em;
}



/* FLOATER */
.floater { position:absolute; }
.floater.right { right:1.5em; }
.floater.left { left:1.5em; }
.floater.top { top:1.5em; }
.floater.bottom { bottom:1.5em; }

.floater.right.zero { right:0em; }
.floater.left.zero { left:0em; }
.floater.top.zero { top:0em; }
.floater.bottom.zero { bottom:0em; }


/* TAB GROUP */

.tabgroup{
	width: 100%;
	padding:0 2em;
}

.tabgroup .tabs {
    display: flex;
}

.tabgroup .tab {
    padding: 1em 1em;
    position:relative;
    width: 100%;
    text-align: center;
    color: var(--color-white);
}
	.tabgroup .tab:hover {
	    cursor:pointer;
	}
	.tabgroup .tab::after {
	   content:'';
	   position:absolute;
	   bottom:0;
	   left:0;
	   width:100%;
	   height:0;
	   transition:all 0.3s;
	   background-color:var(--color-white);
	   color: white;
	}
	.tabgroup .tab.active::after {
	   height:3px;
	}

.tabgroup .contents {
   height: 60vh;
   position:relative;
}

.tabgroup .content {
   position:absolute;
   top:0;
   left:0;
   width:100%;
   height:100%;
   overflow:visible;
   pointer-events:none;
   opacity:0;
   transition:all 0.3s;
}
	.tabgroup .content.active {
	   opacity:1;
	   pointer-events:initial;
	}



/* MODALS */
.modal {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    transition: all 0.3s;
    opacity: 0;
    pointer-events: none;
}
.modal.active {
   opacity:1;
}
.modal-back {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color:rgba(0,0,0,0.7);
}


/* MODAL POPUP*/
.modal-popup {
   position:absolute;
   top:50%;
   left:50%;
   transform:translate(-50%,calc(-50% + 3em));
   transition: all 0.3s;
   width:80vw;
   text-align: center;
}
.modal-body {
    background-color: var(--color-white);
    padding: 1.2em;
    border-radius: 10px;
}
.modal-head, .modal-foot {
    background-color: var(--color-main);
    padding: 0.5em 1em;
}

.modal-list {
	background-color: var(--color-white);
    border-radius: 10px;
    text-align: center;
    overflow: hidden;
}
	.modal-list li{
		padding: 1em;
		border-bottom: 1px solid var(--color-neutral-light);
	}
	.modal-list li:last-child {
		border-bottom: 0;
		background-color: var(--color-main);
		color: var(--color-white);
	}
	.modal-list a{
		font-weight: 400;
	}

.modal.active .modal-back,
.modal.active .modal-popup {
    pointer-events: initial;
}
.modal.active .modal-popup {
   transform:translate(-50%,-50%);
}


/* MODAL DRAWER */
.modal-drawer {
    position: absolute;
    display: flex;
    flex-direction: column;
    transition:all 0.3s;
    box-shadow:0 0 5px rgba(0,0,0,0.3);
    border-radius: 10px;
}

.modal-drawer.left,
.modal-drawer.right {
   height:100%;
   width:70vw;
}
.modal-drawer.left { left:0; transform:translateX(-100%); }
.modal-drawer.right { right:0; transform:translateX(100%); }

.modal-drawer.top,
.modal-drawer.bottom {
   height:max-content;
   width:90%;
   left: 5%;
}
.modal-drawer.top { top:1em; transform:translateY(-100%); }
.modal-drawer.bottom { bottom:1em; transform:translateY(100%); }

.modal.active .modal-drawer {
   transform:translate(0);
   pointer-events:initial;
}


.modal-drawer .modal-body {
   flex: 1 1 100%;
}

.modal-foot input {
   display:block;
   width:100%;
   text-align:right;
   border-width:0;
   font-weight:bold;
   background-color:transparent;
   outline:0;
}

/* MODAL TOAST */
.modal-toast {
   position: absolute;
   width: 100%;
   box-shadow: 1px 1px 5px rgba(0,0,0,0.15);
   border-radius: 10px;
   padding: 1em;
   text-align: center;
   left: 50%;
   transition: all 0.3s;
   background-color: var(--color-white);
	text-align: center;
}
	.modal-toast.top {
	   top:1em;
	   transform: translate(-50%,-1em);
	}
	.modal-toast.bottom {
	   bottom:1em;
	   transform: translate(-50%,1em);
	}
	.modal.active .modal-toast {
	   transform: translate(-50%,0);
	   pointer-events: initial;
	}


/* CAROUSEL */

.carousel-container {
  max-width: 100%;
  position: relative;
  margin: 0;
}

.slide{
	display: none;
}

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 5px;
  background-color: var(--color-neutral-light);
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
	.dot.active {
	  background-color: var(--color-secondary);
	}

.fade {
  animation: fade 1.5s;
}
	@keyframes fade {
	  from {opacity: .4}
	  to {opacity: 1}
	}


/* NAV */

section#recent-page a#recent-nav,
section#list-page a#list-nav,
section#user-profile-page a#profile-nav {
   color: var(--color-main);
}

#recent-nav div {
	background-image: url("../images/icons/map_icon.svg");
	background-repeat: no-repeat;
	background-size:contain;
   background-position: center;
}
#list-nav div {
	background-image: url("../images/icons/list_icon.svg");
	background-repeat: no-repeat;
	background-size:contain;
   background-position: center;
}
#profile-nav div {
	background-image: url("../images/icons/profile_icon.svg");
	background-repeat: no-repeat;
	background-size:contain;
   background-position: center;
}

section#recent-page a#recent-nav div {
	background-image: url("../images/icons/map_icon_active.svg");
}
section#list-page a#list-nav div{
	background-image: url("../images/icons/list_icon_active.svg");
}
section#user-profile-page a#profile-nav div{
   background-image: url("../images/icons/profile_icon_active.svg");
}

.footer-nav p{
	margin: 0;
	font-size: 0.8em;
}



/* ICONS & IMAGES */

.logo {
	width: 7em;
}

.icon img{
	height: 100%;
	object-fit: contain;
	object-position: center;
}

.icon{
	height: 1.3em;
}
	.icon.XS{
		height: 0.6em;
	}
	.icon.small{
		height: 1em;
	}
	.icon.medium{
		height: 1.75em;
	}
	.icon.XM{
		height: 2em;
	}
	.icon.large{
		height: 3em;
	}
	.icon.XL{
		height: 5em;
	}

.close-button{
	color: var(--color-neutral-medium);
	top: 0.5em;
	right: 0.5em;
}

.image-border{
	border: 5px solid var(--color-white);
	box-shadow:0 0 5px rgba(0,0,0,0.3);
	background-color: var(--color-white);
	display: inline-flex;
}

.overlay{
	height: 100%;
    background-color: var(--color-neutral-dark);
    opacity: 0.4;
    width: 100%;
    position: absolute;
}

.image-circle img {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	object-fit: cover;
	object-position: center;
	border-radius: 50%;
	/* vertical-align: text-bottom;
	box-shadow: 0px 0px 10px var(--color-neutral); */
}
	.image-circle.image-border{
		border-radius: 50%;
	}
	.image-circle .overlay{
		border-radius: 50%;
	}


.illustration{
	width: 70%;
}
	.illustration~h3{
		color:var(--color-main);
	}



/* IMAGE UPLOAD */

#user-upload-page,
#type-upload-page,
#location-upload-page{
	background-color: var(--color-neutral-dark);
}
#user-upload-page header,
#user-upload-page footer,
#type-upload-page header,
#type-upload-page footer,
#location-upload-page header,
#location-upload-page footer{
	background: transparent;
	box-shadow: none;
	color: var(--color-white);
}

.image-uploader.full {
   position:absolute;
   top:5%;
   left:5%;
   width:90%;
   height:90%;

   background-size:contain;
   background-position: center;
   background-repeat:no-repeat;
}
.ui-mobile label.image-uploader {
   margin:0;
}
.image-uploader input {
   display:none;
}

.edit-image{
	height: 5em;
	width: 5em;
	position: relative;
}

.edit-image-icon{
	width: 1.5em;
	height: 1.5em;
	border-radius: 50%;
	background-color: var(--color-secondary);
	line-height: 0.8em;
	display: inline-block;
	text-align: center;
	border: 3px solid var(--color-white);
	color: var(--color-white);
	position: absolute;
	bottom: 0;
	right: 0;
}
	.edit-image-icon img{
		width: 70%;
		object-fit: contain;
	}


/* FILTER */

.filter-list {
    display: flex;
    overflow: auto;
    width: max-content;
}
.filter {
    padding: 0.25em 1em;
    border: 1px solid var(--color-neutral-light);
    transition-duration: 0.3s;
    border-radius: 50px;
    color: var(--color-neutral-dark);
}
	.filter:not(:last-child){
		margin-right: 0.5em;
	}
.filter.active{
	background-color: var(--color-neutral-light);
	color: var(--color-neutral-dark);
	font-weight: bold;
}


/* PAGES */

#onboarding-page{
	padding: 0 2em;
	text-align: center;
}
#location-warning-modal,
#type-warning-modal{
	width:90%;
	left: 5%;
}


/* SIGNIN PAGE */

#signin-page {
	background-image: url(../images/signin-background.png);
	background-position:bottom;
	background-size:cover;
}
#signin-page .form-label {
	color:var(--color-white);
}

#signin-page .logo,
#signin-page .tabgroup {
	animation: signin 1s ease;
}

#signin-page .tabgroup {
	animation-delay: 0.2s;
	animation-fill-mode: backwards;
}

@keyframes signin {
	from { transform: translateY(10em); opacity: 0; }
	to { transform: translateX(0); opacity: 1; }
}

.signin-alt {
    text-align: center;
    font-size: 0.9em;
    color: var(--color-white);
}


/* RECENT PAGE */

.recent-list{
	overflow: auto;
	padding: 1em 1.5em;
	width: 100%;
	position: absolute;
	z-index: 4;
}
	.recent-list li {
		padding-right: 1em;
	}

.recent-list-image{
	width: max-content;
}
	.recent-list-image img{
		height: 4em;
		width: 4em;
	}

#recent-search-form{
	margin-top: 1em;
	position: absolute;
	width: 90%;
	left: 5%;
	z-index: 4;
	box-shadow:0 0 5px rgba(0,0,0,0.3);
}

#recent-page .modal-toast{
	width: 90%;
}

.view-all{
	display: flex;
	justify-content: center;
	flex-direction: column;
	text-align: center;
	line-height: 1.1em;
	font-size: 0.8em;
	text-shadow:
	-1px -1px 0 var(--color-white),
    1px -1px 0 var(--color-white),
    -1px 1px 0 var(--color-white),
    1px 1px 0 var(--color-white);
}



/* USER PAGE */

#user-profile-page .profile-top{
	height: 8em;
    overflow: visible;
    padding: 4em 0;
	flex: 1;
	position: relative;
    background: linear-gradient(90deg, rgba(225,76,86,1) 0%, rgba(248,162,86,1) 100%); 
}
#user-profile-page .profile-bottom{
	flex: none;
	overflow: auto;
	height: 80%;
    padding-top: 4.5em;
    padding-bottom: 8em;
}




/* TYPE & LIST PAGE */

.type-list li{
	padding: 1em 1.5em;
	border-bottom: 1px solid var(--color-neutral-light);
}

.type-list h3 {
	margin-top: 0;
}

.listing-image img{
	height: 3em;
	width: 3em;
	margin-right: 1em;
}

#type-profile-page .profile-top{
	height: 67%;
	flex: none;
	overflow: auto;
}
#type-profile-page .profile-bottom{
	position: relative;
	flex: 1;
}



/* LOCATION PAGE */

#location-page .profile-top{
	flex: 1;
	position: relative;
}
#location-page .profile-bottom{
	height: 60%;
	flex: none;
	overflow: auto;
	padding-bottom: 4em;
}
.location-image img{
	object-fit: cover;
	object-position: center;
	height: 40vh;
	width: 100%;
}


/* MAP ELEMENTS */


.map{
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

#type-profile-page .customMarker,
#map-add-page .customMarker{
	height: 50px;
	width: 50px;
	border: none;
	box-shadow: none;
	background-color: transparent;
	margin-top: -50px;
	margin-left: -25px;
}
	#type-profile-page .customMarker:after,
	#map-add-page .customMarker:after{
		opacity: 0;
		bottom: 0;
	}

.customMarker{
	height: 70px;
	width: 70px;
	position: absolute;
	border: 5px solid var(--color-main);
	box-shadow:0 0 5px rgba(0,0,0,0.3);
	background-color: var(--color-main);
	border-radius: 50%;
	display: inline-flex;
	margin-top: -90px;
	margin-left: -35px;
}
	.customMarker:after {
	  content: "";
	  position: absolute;
	  bottom: -20px;
	  left: 35%;
	  border-width: 20px 10px 0;
	  border-style: solid;
	  border-color: var(--color-main) transparent;
	  display: block;
	  width: 0;
	}
.customMarker img{
	border-radius: 50%;
	max-width: 100%;
}

.location-icon{
	position: absolute;
	top: calc(100% - 45%);
	left: calc(100% - 85%);
	width: 15%;
	height: auto;
}

.location-icon.add{
	top: calc(100% - 65%);
	left: calc(100% - 25%);
	transform: scaleY(0); 
}
	.location-icon.add.active{
		animation: location 0.3s ease;
		animation-fill-mode: forwards;
	}

@keyframes location {
	0% { transform: scaleY(0); opacity: 0;}
	50% { transform: scaleY(1.5); opacity: 1; }
	100% { transform: scaleY(1); opacity: 1; }
}

.location-icon.added{
	top: calc(100% - 65%);
	left: calc(100% - 25%);
	width: 0;
}
	.location-icon.added.active{
		width: 15%;
	}



/* PROFILE ELEMENTS */

.profile{
	position: relative;
	height: 100%;
}
.profile-image img{
	height: 8em;
	width: 8em;
}
.info {
	width: 100%;
	border-radius: 10px;
	border: 1.5px solid var(--color-secondary);
	padding: 1em;
}
	.info li:not(:first-child) {
		padding-top: 1em;
	}
	.info li:not(:last-child) {
		padding-bottom: 1em;
		border-bottom: 1px solid var(--color-neutral-light);
	}
.info.card{
	height: max-content;
	width: 100%;
	border-radius: 10px;
	background-color: var(--color-accent);
	border: none;
}
.info.card p {
	margin:0;
	font-size: 3em;
	font-weight: 300;
	color: var(--color-main);
	text-align: right;
	line-height: 0.9em;
}
.info.card.half{
	width: 50%;
}

.rating{
	height: 1.75em;
}
	.rating img{
		height:100%;
		width: auto;
	}
.rating.small{
	height:1em;
}