/*
    Josh Comeau's CSS Reset
    https://www.joshwcomeau.com/css/custom-css-reset/
*/

*, *::before, *::after {box-sizing: border-box;}
* {margin: 0;}
body {font-size:16px; line-height: 1.5;-webkit-font-smoothing: antialiased; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;}
img, picture, video, canvas, svg {display: block;max-width: 100%;}
input, button, textarea, select {font: inherit; -webkit-appearance:none; -moz-appearance:none; appearance:none;}
p, h1, h2, h3, h4, h5, h6 {overflow-wrap: break-word;}
#root, #__next {isolation: isolate;}



/*
    Glance Styles
*/

#glance-background-image {position:fixed; top:0; left:0; width:100vw; height:100vh; overflow:hidden; z-index:1;}
#glance-background-image img {position:fixed; top:-20px; left:-20px; width:auto; min-width:calc(100vw + 40px); height:calc(100vh + 40px); filter:blur(20px); z-index:1;}

header {position:relative; width:100vw; height:6.25rem; background:#000; z-index:100; transition:background-color 0.2s ease-in-out;}
header h1 {position:relative; width:100vw; font-family: "Varela Round", sans-serif; font-size:1.5rem; letter-spacing:-1px; line-height:6.25rem; text-align:center; color:#fff;}

#root {position:relative; width:100vw; min-height:100vh; background:rgba(222,222,222,0.9); z-index:10; overflow:hidden; transition:background 0.2s ease-in-out;}

#glance-app {position:relative; padding:0;}
#glance-app form {position:fixed; top:calc(7.25rem + 30px); left:10px; padding:5px; width:calc(100vw - 20px); text-align:center; background:linear-gradient(to left,#F4F4F9,#D3E0EA); border:1px solid #ccc; border-radius:30vw; box-shadow:0 10px 15px rgba(0,0,0,0.125); transition:top 0.3s ease-in-out, opacity 0.3s ease-in-out;}
#glance-app form.done {top:0; opacity:0;}
#glance-app form label {position:absolute; top:0; left:0; display:block; padding:0; width:100%; height:100%; border-radius:30vw; font-weight:bold; text-transform:uppercase; background:linear-gradient(to left,#A8DADC,#F0EFEB); color:#000; text-indent:-10000em; transition:opacity 1s ease-in-out; animation: fade 3s infinite; z-index:1;}
#glance-app input[type="text"] {position:relative; padding:.25rem 1rem; width:100%; height:3rem; font-size:16px; text-align:center; border:0; outline:none; border:1px solid #ccc; border-radius:2rem; z-index:100;}
#glance-app button {position:relative; display:inline-block; margin:1rem 0 0; padding:0.5rem 0; width:30vw; border-radius:30vw; border:2px solid #000; font-weight:bold; text-transform:uppercase;  color:#000;}

#glance-search-results {position:fixed; top:240px; left:10px; margin:0; padding:0; list-style:none; width:calc(100vw - 20px); background:linear-gradient(to bottom,#fafafa,#eaeaea); border-radius:20px; box-shadow:0 10px 15px rgba(0,0,0,0); opacity:0; transition:all 0.25s ease-in-out;}
#glance-search-results.show {top:220px; box-shadow:0 10px 15px rgba(0,0,0,0.125); opacity:1;}
#glance-search-results.done {top:0; opacity:0;}
#glance-search-results li {margin:0; padding:0.7rem 1rem; font-family: "Varela Round", sans-serif; font-size:0.9rem; line-height:1rem; border-top:1px solid #ccc; text-transform:uppercase;}
#glance-search-results li:first-child {padding-top:1rem; border:0;}
#glance-search-results li:last-child {padding-bottom:1rem;}
#glance-search-results li span {display:inline-block; padding-left:0.5rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size:0.75rem; line-height:1rem; color:#666; text-transform:none;}
#glance-search-results li span + span {padding-left:0;}

#glance-waiting {position:fixed; top:0; left:0; width:100%; height:100%; background:linear-gradient(to left,#F4F4F9,#D3E0EA);}
#glance-waiting span {position:fixed; top:0; left:0; display:block; width:100%; height:100%; background:linear-gradient(to left,#A8DADC,#F0EFEB); transition:opacity 1s ease-in-out; animation: fade 3s infinite;}

#glance-app div.itinerary {position:relative; margin:30px 10px 0; padding:15px 20px; border-radius:20px; line-height:1.4; background:linear-gradient(to bottom,#fafafa 50%,#dadada 100%); box-shadow:0 10px 15px rgba(0,0,0,0); opacity:0; transition:all .25s ease-in-out;}
#glance-app div.itinerary.show {margin-top:10px; box-shadow:0 10px 15px rgba(0,0,0,0.125); opacity:1;}

#glance-app div.photo {position:relative; margin:30px 10px 0; padding:0; max-height:calc(100vw - 20px); border-radius:20px; box-shadow:0 10px 15px rgba(0,0,0,0); overflow:hidden; opacity:0; transition:all .25s ease-in-out;}
#glance-app div.photo.show {margin-top:10px; box-shadow:0 10px 15px rgba(0,0,0,0.25); opacity:1;}
#glance-app div.photo img {width:100%; height:auto;}

#autocomplete {position: relative;
    top: -36px;
    left: 17px;
    overflow: hidden;
    width: calc(100vw - 70px);
    display: block;
    white-space: nowrap;
    text-align: left;
}

@keyframes fade {
    0%, 100% {
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
}