/* =============================================================================
   App specific CSS file.
   ========================================================================== */

/* universal */

:root {
  --color-bg: #f5d6af;
  --color-container: #caa77bb1;
  --color-primary: #009285;
  --color-primary-light: #00e1cf;
}

html {
  overflow-y: scroll;
}

body {
  /* padding-top: 60px; */
  background-size: cover 100%;
  background-color: var(--color-bg);
  margin-bottom: 64px;
  font-family: 'Signika', sans-serif;
  font-size: 105%;
}
h1, h2, h3, h4, h5, .greeting {
  font-family: 'Josefin Sans', sans-serif;
  font-weight: bold;
}



main {
    /*border: 4px solid #411e02;*/
    max-width: 1100px;
    margin: auto;
    /*background: #886c47;*/
    min-height: 300px;
    /*border-radius: 64px;*/
    /*padding: 32px;*/
}

main  {
    padding-left: 32px; padding-right: 48px;
    min-height: 250px;
    color: rgb(0, 0, 0);
    background: var(--color-container);
    backdrop-filter: blur(2px);
    padding-top: 64px;
    padding-bottom: 16px;
    border-radius: 32px;
    background-size: 100% auto;
    text-shadow: 1px 1px 0px var(--color-bg), -1px -1px 0px var(--color-bg), 1px -1px 0px var(--color-bg), -1px 1px 0px var(--color-bg), 0px 0px var(--color-bg);
    /* text-shadow: 1px 1px 0px #000000, -1px -1px 0px #000000, 1px -1px 0px #000000, -1px 1px 0px #555555, 1px 1px 3px #000000; */
}
main .alert {text-shadow: none;}

nav, .footernav {
  background: var(--color-container);
  backdrop-filter: blur(2px);
  padding-top: 16px;
  padding-bottom: 16px;
}

nav {
  max-width: 600px;
  border-radius: 32px;
}

header {
  /* margin-top: 32px; */
}

.index header {
  /* temporarily removed for sake of the scoreboard */
  /*margin-bottom: calc(100vh - 440px);*/
}

header a {
  text-decoration: none !important;
}

h1 {
  text-align: center;
  color: white;
  text-decoration: none;
}

hr {
  border-top: 1px solid rgba(255, 255, 255, 0.5);
}

blockquote {
  margin-left: 8px;
  border-left: 2px solid rgba(50, 50, 50, 0.3);
  padding-left: 8px;
}

.logo {display: block; height: 200px; margin: auto;}
@media all and (max-width: 1050px) {}
@media all and (max-width: 950px) {}
@media all and (max-width: 850px) {}
@media all and (max-width: 720px) {}
@media all and (max-width: 650px) {
}
@media all and (max-width: 420px) {
  main {
    padding-left: 8px;
    padding-right: 8px;
  }
}

.center {text-align: center; padding-bottom: 32px;}
.g-recaptcha {margin: auto; display: inline-block;}

.banner {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
    
    display: block;
    width: 100%;
    aspect-ratio: 1800 / 1016;
    background-image: url('/static/img/2025/beach-9_1800px.jpg');
    background-size: contain;
}

.bannerblur {
  user-select: none;
  width: 100%;
  aspect-ratio: 1800 / 32;
  background-image: url('/static/img/2025/beachblur.png');
  background-size: contain;
}


nav {
    margin: auto;
    margin-top: 32px;
    text-align: center;
    font-size: 20px;
    margin-bottom: 12px;
    /* text-shadow: 1px 1px 0px #000000, -1px -1px 0px #000000, 1px -1px 0px #000000, -1px 1px 0px #000, 0px 0px 4px #000 ; */
    text-shadow: 1px 1px 0px var(--color-bg), -1px -1px 0px var(--color-bg), 1px -1px 0px var(--color-bg), -1px 1px 0px var(--color-bg), 0px 0px var(--color-bg);
    color: black;
}

.sign-in-link {
  text-shadow: 1px 1px 0px yellow, -1px -1px 0px var(--color-bg), 1px -1px 0px var(--color-bg), -1px 1px 0px var(--color-bg), 0px 0px var(--color-bg);
}

a:not(.btn), a:not(.btn):hover, a:not(.btn):active {
    color: var(--color-primary); 
    font-weight: bold;
}

/*nav a {
  color: #055c8f;
  text-shadow: 1px 1px 0px #fff, -1px -1px 0px #fff, 1px -1px 0px #fff, -1px 1px 0px #fff, 0px 0px 4px #fff ;
}*/

h1, h2, h3 {margin-top: 16px;}
small {color: #222;}

/*input.form-control {background-color: rgba(255, 255, 255, 0.7);}*/

a.btn {
  color: black; text-shadow: none;
}
.btn {margin: 4px;}
.btn-primary
    {background-color: var(--color-primary-light); color: black; border-color: black;}
.btn-primary:hover
    {
      background-color: hsl(from var(--color-primary-light) h s calc(l + 5)); color: rgb(34, 34, 34); border-color: rgb(74, 74, 74);
      box-shadow: 0 0 0 0.2rem rgba(96, 170, 255, 0.5);
      position: relative;
      top: -1px;
    }
.btn-primary:active, .btn-primary:focus
    {
      background-color: hsl(from var(--color-primary-light) h s calc(l + 5)); color: rgb(34, 34, 34); border-color: rgb(74, 74, 74);
      box-shadow: 0 0 0 0.2rem rgba(96, 170, 255, 0.5);
      position: relative;
      top: 0px;
    }
.btn-primary:not(:disabled):not(.disabled):active
    {background-color: var(--color-primary-light);
     box-shadow: 0 0 0 0.2rem rgba(96, 170, 255, 0.5);}
.btn-primary:not(:disabled):not(.disabled):focus
    {color: black; box-shadow: 0 0 0 0.2rem rgba(96, 170, 255, 0.5);}
.btn-primary.disabled { background-color: #aaa; }

.btn-tall {
  height: 100px;
  min-width: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.legend {text-align: center; margin-top: 6px;}
.legend-circle {width: 24px; height: 24px; border-radius: 100%; vertical-align: middle; display: inline-block; margin-left: 12px;}
.legend-circle-green {background-color: #8f8;}
.legend-circle-red {background-color: #f88;}
.legend-circle-white {background-color: #bbb;}
.legend-circle-blue {background-color: #88f;}

.bedspots-container {position: relative; text-align: center;}
.bedspots-scroll {
  max-width:100%;
  overflow-x: scroll;
}
.bedspots {width: 760px; padding-right: 32px; padding-bottom: 12px; background: #996600;
    margin: auto; display: inline-block;  transition: 0.1s;
  border-radius: 24px; padding: 8px 16px 16px 16px; margin-top: 4px;
  user-select: none;
}
.bedspots-loading { filter: blur(2px); }
.bedspots-initial { filter: blur(4px); opacity: 0.7;}
.bedspots-loading, .bedspots-loading * {cursor: normal;}
.bedspots-spinner {display: inline-block; position: absolute; left: 45%; top: 45%; z-index: 500;}
#accomodation-choice .bedspots-spinner {
  position: absolute; left: 50%; top: 65%; z-index: 500;
}
.tenting-area, .barge {display: inline-block;}
.barge, .tenting-area { border: 1px solid black; padding: 8px;
     margin-top: 16px; vertical-align: middle; margin-right: 34px;}
.barge h3 {
  margin: 0; font-variant: small-caps; font-size: 24px;
}
.tenting-area {width: 160px; height: 164px; overflow: hidden;
    border: 1px solid transparent; box-shadow: inset 0px 0px 15px 3px rgba(0,0,0,0.5);
    text-align: center; padding-top: 28px;}
.barge {box-shadow: inset 0px 0px 15px 3px rgba(0,0,0,0.5);
    background: rgba(50, 50, 50, 0.3);}
.barge-row {
  display: flex;
  justify-content: space-between;
  white-space-collapse: discard; min-height: 26px;}
.spot-empty, .spot-wall, .spot-bed {
    display: inline-block; width: 32px; height: 50px;
    border: 1px solid black;
    border-radius: 3px;
    padding: 1px; margin: 2px;
    box-shadow: inset 0px 0px 15px 3px rgba(0,0,0,0.3);
    position: relative;
}
.spot-empty {
  width: 64px;
}
.spot-bed-number, .spot-bed-text {
    position: absolute; top: -6px; left: -5px; color: black;
    text-shadow: -1px -1px 0 #fff, -1px 0px 0 #fff, 0px -1px 0 #fff, 0px 1px 0 #fff, 1px 0px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
    font-family: monospace;
    font-size: 12px;
    font-weight: bold;
    cursor: default;
}
.spot-bed-text {
  top: 2px; left: 4px;
  font-family: sans-serif;
}
.spot-bed-pillow {
    border: 1px solid #888; background: rgba(255, 255, 255, 0.8);
    width: 28px; height: 14px;
    border-radius: 5px;
    margin-top: 2px;
}
.spot-bed-pillow-bottom {margin-top: 30px;}

.spot-bed {background-color: #eee;}
.spot-bed-free {background-color: #8f8;  transition: 0.5s;}
.bedspots-beds-enabled .spot-bed-free {cursor:pointer;}
.bedspots-loaded.bedspots-beds-enabled .spot-bed-free:hover {filter: brightness(1.4); box-shadow: 0 0 8px white;}
.spot-bed-taken {background-color: #f88;}
.spot-bed-selected {background-color: #88f; box-shadow: inset 0px 0px 15px 3px rgba(0,0,0,0.3), 0 0 4px #11f, 0 0 5px #11f; border-color: #77e;}
.spot-empty {background-color: #222;}
.spot-wall {width: 0; padding: 0; margin: 0 4px 0 4px;}

.bedspots-loaded .tenting-area-unselected {cursor: pointer; transition: 0.5s;}
.bedspots-loaded .tenting-area-unselected:hover {box-shadow: inset 0px 0px 15px 3px rgba(0,0,0,0.5), 0 0 8px 3px white;}

.tenting-area-selected {cursor: normal; background-color: #88f; box-shadow: inset 0px 0px 15px 3px rgba(25,25,255,0.5), 0 0 4px #88f, 0 0 5px #88f; border-color: #77e;
}

.status {margin-bottom: 12px;}
/* .status-success {color: #afa;}
.status-failure {color: #faa;} */

.status-success {color: rgb(0, 86, 0);}
.status-failure {color: rgb(78, 0, 0);}

.errors {color: rgb(143, 0, 0);}

.alert a {color: blue;}

.card {background: rgba(255, 255, 255, 0.2);}

.form-check-input:disabled ~ .form-check-label { color: #222; }
#input-sponsor-amount {
  display: inline-block; width: 100px;
}

nav a:hover {
    color: var(--color-primary);
}


.greeting {
    font-size: 32px;
    text-align: center;
    margin-bottom: 2em;
    font-style: italic;
}

.tribe-marker {
  width: 100px;
  height: 100px;
  margin: 8px;
}

.scoreboard-number {
  font-size: 32px;
  font-weight: bold;
}

.scoreboard {
  background: var(--color-container);
  backdrop-filter: blur(2px);
  padding-top: 16px;
  padding-bottom: 16px;
  width: 300px;
  max-width: 100%;
  
  margin: auto;
  text-align: center;
  font-size: 20px;
  margin-bottom: 12px;
  text-shadow: 1px 1px 0px #000000, -1px -1px 0px #000000, 1px -1px 0px #000000, -1px 1px 0px #000, 0px 0px 4px #000 ;
  color: white;
  border-radius: 32px;

  display: flex;
  justify-content: space-evenly;
}
.scoreboard > div {
  height: 400px;
  display: flex;
  flex-direction: column;
}
.scoreboard-bar-container {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content:end;
}
.scoreboard-bar {
  width: 32px;
  height: 200px;
  background-color: blue;
  margin: 0 auto;
  border: 3px solid black;
}
.scoreboard-bar-fire {
  background-color: #f07800;
}
.scoreboard-bar-water {
  background-color: #01a7c7;
}

section {
  overflow: auto;
}

textarea {
  resize: vertical;
}

.container-narrow{
  margin: 0 auto;
  max-width: 700px;
}

/* Forms */

.navbar-form input[type="text"],
.navbar-form input[type="password"] {
  width: 180px;
}


.form-register .form-control {
  position: relative;
  font-size: 16px;
  height: auto;
  padding: 10px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

/* footer */

footer {
  margin-top: 45px;
  padding-top: 5px;
  border-top: 1px solid #eaeaea;
  color: #999999;
}

footer a {
  color: #999999;
}

footer p {
  float: right;
  margin-right: 25px;
}

footer ul {
  list-style: none;
}

footer ul li {
  float: left;
  margin-left: 10px;
}

footer .company {
  float: left;
  margin-left: 25px;
}

footer .footer-nav {
  float: right;
  margin-right: 25px;
  list-style: none;
}

.photos {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.photos div {
  width: 600px;
  max-width: 100%;
  text-align: center;
}

.photos img {
  max-width: 100%;
  border: 2px solid black;
}

.question {
  font-weight: bold;
  margin-bottom: 2px;
}

.answer {
  margin-top: 0;
  margin-left: 16px;
}

a.wavy {
  color: var(--color-primary);
  padding-bottom: 5px;
  background: url("/static/img/wave.svg");
  background-repeat: repeat;
  background-position-x: 0%;
  background-position-y: 0%;
  background-size: auto auto;
  background-repeat: repeat-x;
  background-size: 15px 5px; 
  background-position: 2px 19px;
  animation: move 15s linear infinite;
  -webkit-animation: move 15s linear infinite;
  animation-play-state: paused;
  text-decoration: none;
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
  animation-play-state: running;
}

.interest-row {
  display: flex;
  align-items: baseline;
}
.interest-row input {
  margin-left: 8px;
  margin-right: 8px;
}
.interest-row label {
  margin-bottom: 0;
  width: 100%;
}

.saved {
  /* short green flash */
  animation: flash 0.5s linear;
  -webkit-animation: flash 0.5s linear;
  border-radius: 8px;
}
.prefilled {
  animation: blue-flash 2s linear;
  -webkit-animation: blue-flash 2s linear;
}

@keyframes flash {
  0% { background-color: rgba(43, 255, 0, 0.222); }
  100% { background-color inherit; }
}


@keyframes blue-flash {
  0% { background-color: rgb(255, 230, 107); }
  100% { background-color: rgb(255, 249, 219); }
}

@media (max-width: 600px) {
  .collapse-under-600px {
    flex-direction: column;
  }
}


@-webkit-keyframes move {
from {
    background-position: 2px 19px;
  }
  to {
    background-position: 500px 19px;
  }
}

@keyframe move {
from {
    background-position: 2px 19px;
  }
  to {
    background-position: 500px 19px;
  }
}