body {
  font-family: 'Rubik Variable';
  color: var(--color-text);
  padding-bottom: 7em;
  margin: 0;
}

.home-bar {
  box-shadow: 0 0 9px rgba(0, 0, 0, .25);
  height: 6vh;
  padding-top: .5em;
  /* 100% voorkomt extra witruimte aan de rechterkant */
  width: 100%;

  img {
    padding: .5em;
    padding-left: 1em;
  }
}

.nav-bar{
  background-color: var(--color-white);
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  height: 4em;
  place-items: center;

    ul {
      display: grid;
      grid-template-columns: auto auto auto auto auto;
      gap: 1em;

      li {
        list-style: none;

        a {
          display: flex;
          place-items: center;
          flex-direction: column;
          text-decoration: none;
          gap: .1em;

          .nav-label {
            color: var(--color-text);
            font-size: .7em;
          }
        }
      }
    }
}

h1 {
  font-size: 1.8em;
  font-weight: 700;
  padding: 1em;
}

.role-navigation {
  display: flex;
  /* Items gaan naar de volgende regel als het niet meer past naast elkaar */
  flex-wrap: wrap;
  justify-content: center;
  border-bottom: 2px solid var(--color-grey-light);
  margin-bottom: 1em;

  .role-label {
    text-align: center;
    margin-bottom: 0.5em;
    font-size: 0.95em;
    color: var(--color-text);
  }

   button {
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    padding-top: 0.75em;
    padding-bottom: 0.75em;
    padding-left: 1em;
    padding-right: 1em;
    font-size: 1em;
    color: var(--color-text);
    cursor: pointer;

    &:hover {
      color: var(--color-primary);
    }
  }

  .active {
    border-color: var(--color-secondary);
    font-weight: 600;
    color: var(--color-secondary);
  }
}

/* Voor de sticky section navigatie */
main {
  display: grid;
  grid-template-columns: max-content 1fr auto;

  @media (min-width: 1100px) {
    grid-template-columns: 200px 1fr;
    gap: 2em;
  }
}

.sticky-section-navigation {
  position: sticky;
  top: 6vh;
  background-color: var(--color-white);
  display: flex;
  flex-direction: row;
  gap: 1em;
  z-index: 20;
  writing-mode: sideways-lr;
  align-self: start;
  
  @media (min-width: 700px) {
    writing-mode: horizontal-tb;
    flex-direction: column;
    padding-left: 1em;
  }

  @media (min-width: 1100px) {
    padding-top: 0.3em;
    place-items: center;
    font-size: 1.5em ;
    gap: 0.5em;
  }

  a {
    color: var(--color-text);
    text-decoration: none;
    font-size: 0.8em;
    font-weight: 400;
    background: none;
    border: none;
    border-right: 3px solid transparent;
    padding: 0.7em;
    cursor: pointer;
    font-family: 'Rubik Variable';
  
    &:hover {
      color: var(--color-primary);
      text-decoration: underline;

      @media (min-width: 1100px) {
        background-color: #0DB08A1F;
        color: var(--color-secondary);
        border-left: 3px solid var(--color-primary);
        text-decoration: none;
      }
    }

    &.active {
      border-color: var(--color-secondary);
      font-weight: 600;
      color: var(--color-secondary);
      text-decoration: none;
    }

    @media (min-width: 700px) {
      border-right: unset;
      border-left: 3px solid transparent;
    } 
  }
}

.hidden {
  display: none;
}

form {
  display: flex;
  flex-direction: column;
  place-items: center;

  .reservations-section,
  .cancelations-section,
  .reminders-section{
    background-color: var(--color-white);
  }
}

fieldset {
  border: 1px solid var(--color-grey-medium);
  padding-top: .8em;
  margin: 1em;
  margin-bottom: 1.5rem;
  background-color: var(--color-white-off);

  legend {  
    text-align: center;
    font-weight: 600;
    padding: .6em;
    padding-bottom: 0;
    font-size: 1.3em;
    color: var(--color-text);
  }

  .notification-details {
    text-align: center;
    margin-top: 0;
    margin-bottom: 2.5em;
    color: #666;
    font-size: 0.9em;
    color: var(--color-secondary);

    &:hover {
      color: var(--color-primary);
    }
    
    p {
      font-size: 0.8em;
      color: var(--color-text);
    }
  }

  label {
    padding: .5em;
  }
}

.required,
.notification-option-is-required,
.notification-option,
.notification-option-is-disabled {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  /* white-space: nowrap; */

    .required {
      color: var(--color-red);
      font-size: .9em;
    }
}

.checkbox-slider,
.required {
  grid-column: 1/-1;
  justify-self: end;

      &:disabled {
        background-color: var(--color-grey-medium);
          cursor: not-allowed;

         &::after {
            background-color:var(--color-white-off);
         }
    }

    &:checked&:disabled {
      background-color: var(--color-grey-medium);
    }
}

.description {
  grid-column: 1/-1;
  justify-self: end;
  font-size: 0.85em;
  font-style: italic;
  color: var(--color-grey-medium);
}

p {
  font-size: 1em;

  .required {
      color: var(--color-red);
      font-size: 0.9em;
  }
}

.notification-option-is-disabled {
  cursor: not-allowed;
  opacity: 0.85;
}

.save-button {
  position: relative;
  background-color: transparent;

  &::after {
    content: "";
    position: absolute;
    width: 0;
    height: 100%;
    top: 0;
    left:0;
    background-color: var(--color-secondary);
    transition: 0.4s ease;
    z-index: -1;
  }
  
  &:hover::after {
    width: 14.8em;
  }

  &:hover {
    color: white;
  }
}