body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100svh;
  margin: 0;

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

header,
footer {
  padding: 1rem 0;

  &:is(header) {
    padding-bottom: 0;
  }
}

.container {
  max-width: 80vw;
  margin: auto;
  padding: 0 1rem;

  @media (max-width: 480px) {
    max-width: 100vw;
    padding: 0 0.5rem;
  }
}

h2 {
  margin-top: 2rem;
  font-size: 1.25rem;
  text-decoration: underline;
}

p {
  line-height: 1.8;
  white-space: pre-line;
}

img {
  max-width: 100%;
}

ul {
  padding: 0;
  list-style-position: inside;
  line-height: 1.8;
}

button,
[type="submit"] {
  cursor: pointer;
}

input,
select {
  display: inline-flex;
  height: 30px;
  padding: 4px;
  border: 1px solid;
  border-radius: 5px;
  font-size: 16px;
  max-width: 320px;

  &:is(select) {
    font-size: 14px;
  }

  &:not(select) {
    padding: 4px 8px;
  }

  &.small {
    width: 80px;
  }
 
  &.small-medium {
    width: 120px;
  }

  &.medium {
    width: 160px;
  }
  
  &.large {
    flex-grow: 1;
    min-width: 240px;
  }

  &.extra-large {
    flex-grow: 1;
    min-width: 320px;
  }

  &[pattern] {
    padding-right: 25px;
    background-size: 1em;
    background-repeat: no-repeat;
    background-position: right 5px center;
    background-image: url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7');
    transition: 250ms ease;

    &:focus {
      outline: 1px solid black;
    }

    &:valid:not(:placeholder-shown):not(.empty):not(:focus),
    &.strict-regex:valid:not(:placeholder-shown) {
      outline: 1px solid green;
      border-color: green;
      color: green;
      background-image: url('../img/valid.svg');
    }

    &:invalid:not(:placeholder-shown):not(:focus),
    &.invalid:invalid {
      outline: 1px solid red;
      border-color: red;
      color: red;
      background-image: url('../img/invalid.svg');
    }
  }
}

fieldset {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  padding: 1rem;
  gap: 1rem;

  @media (max-width: 480px) {
    padding: 1rem 0.5rem;
  }

  &.big-gap {
    gap: 2rem;
  }

  &.no-border {
    border: none;
  }

  > legend {
    font-weight: bold;
  }

  > div {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 8px;

    &.break {
      flex-basis: 100%;
      height: 0;
    }

    &.center {
      align-items: center;
    }
  }

  > table {
    border-spacing: 1rem;
    border-collapse: separate;
  }

  .separator {
    @media (max-width: 480px) {
      width: 100%;
      visibility: hidden;
      height: 0;
    }
  }
}

button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  max-height: 42px;
  align-self: end;
  font-size: 14px;
  font-weight: bold;
  background-color: blue;
  border: 1px solid darkblue;
  color: white;
  border-radius: 4px;
  transition: 500ms;

  &:not(.mapboxgl-ctrl button):not(#google-pay-container button) {
    padding: 16px 50px;
  }

  &.disabled {
    cursor: not-allowed;
    background-color: silver;
    border-color: darkgray;
  }

  &:not(.disabled):hover {
    box-shadow: 2px 2px rgb(0 0 0 / 25%);
    opacity: 0.8;
  }

  &.secondary {
    padding: 8px;
    font-size: 0.8rem;
    font-weight: lighter;
    background-color: #6296bc;
    border-color: #4d6796;
  }
}

dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  &.success {
    color: green;
  }

  &.info {
    color: lightskyblue;
  }

  &.warning {
    color: orange;
  }

  &.error {
    color: red;
  }

  & form[method="dialog"] {
    position: absolute;
    top: 0;
    right: 0;

    & button {
      background: none;
      border: none;
      padding: 0.3rem;
      display: flex;
      justify-content: center;
      align-items: center;
      line-height: 1;
      font-size: 22px;
      font-weight: bold;
      color: black;
    }
  }

  &::backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
  }
}

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

.fit-content {
  width: fit-content;
}

.hidden {
  display: none !important;
}

.show {
  visibility: visible;
  opacity: 1;
}

.hide {
  visibility: hidden;
  opacity: 0;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.loader {
  width: 20px;
  height: 20px;
  border: 2px solid white;
  border-bottom-color: transparent;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}

.on {
  position: relative;
  opacity: 1;
  transition: 250ms;

  &.off {
    opacity: 0.25;
  
    &:not(.no-loader):after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      margin: -20px 0 0 -20px;
      width: 40px;
      height: 40px;
      border: 4px solid black;
      border-bottom-color: transparent;
      border-radius: 50%;
      display: inline-block;
      box-sizing: border-box;
      animation: rotation 1s linear infinite;
    }
  }
}

.tab {
  background: #eeeeee;
  padding: 1rem;
  margin-top: 1rem;
  border-radius: 5px;
  border: 1px solid gray;
  box-shadow: 0 0 0px rgb(0 0 0 / 0%);

  @media (max-width: 480px) {
    padding: 1rem 0.5rem;
  }

  &.active {
    box-shadow: 0 0 3px rgb(0 0 0 / 50%);
    transition: box-shadow 500ms;
  }

  > label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 20px;
    font-weight: bold;

    & img {
      width: 32px;
      height: auto;
      min-height: 20px;
      border: 1px solid black;
      background-color: white;
      border-radius: 4px;
    }
  }
}

.toggle {
  flex-direction: row;
  flex-wrap: wrap;

  > [type="checkbox"] {
    align-self: self-end;
  }
  
  > .content {
    flex-basis: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    > div {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      max-width: 640px;
    }
  }  
}

.tab > .content,
.toggle > [type="checkbox"] + label + .content {
  position: absolute;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: none;
}

.tab > [name="accordion"]:checked ~ .content,
.tab > [type="checkbox"]:checked ~ .content,
.toggle > [type="checkbox"]:checked + label + .content {
  position: initial;
  overflow: visible;
  margin-top: 1rem;
  max-height: 100rem;
  opacity: 1;
  transition: max-height 1s ease, opacity 250ms;
}

.card,
.banner {
  display: flex;
  width: fit-content;
  padding: 1rem;
  gap: 1rem;
  background: #eee;
  border-radius: 4px;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);

  &:is(.banner) {      
    &:before {
      display: inline-flex;
      align-self: center;
      font-size: 28px;
    }

    @media (max-width: 480px) {
      &:before {
        display: none;
      }
    }

    &:is(.banner.info) {
      background-color: rgba(0, 0, 255, 0.1);

      &:before {
        content: 'ℹ️';
      }
    }

    &:is(.banner.warning) {
      background-color: rgba(255, 255, 0, 0.1);

      &:before {
        content: '⚠️';
      }
    }

    &:is(.banner.success) {
      background-color: rgba(0, 128, 0, 0.1);

      &:before {
        content: '✔️';
      }
    }

    &:is(.banner.error) {
      background-color: rgba(255, 0, 0, 0.1);

      &:before {
        content: '❌';
      }
    }
  }
}

@keyframes rotate {
  0%{
     transform: rotate(0deg);
    }
 10%{
     transform: rotate(180deg);
    }
 50%{
     transform: rotate(180deg);
    }
 60%{
     transform: rotate(360deg);
    }
 100%{
     transform: rotate(360deg);
    }
 }

 .hourglass {
  display: inline-block;
  animation: rotate 12s ease infinite;
  animation-delay: 2s;
}