.navBar {position: static;}
.navBar--fixed {position: fixed;}
.menu--navbar li:last-child a {background-color: #28a744; color: white;}
.ticket{margin-top: 15px; margin-bottom: 5px; gap: 30px;}
.ticket__category{display: flex; gap: 10px; flex-wrap: wrap;}
.category{
  flex-basis: calc(25% - 15px);
  flex-grow: 1;
  aspect-ratio: 5/4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  border: 2px solid black;
  border-radius: 3px;
  color: black;
  font-size: 1.3rem;
  font-weight: 600;
  cursor: pointer;
  padding: 5px;
  text-align: center;
  transition: background .3s;
}
.hard {font-size: 1.7rem; font-weight: bold;}
.soft {font-size: 1.1rem; color: grey;}
.category--student {border-color: #047dff;}
.category--student:hover {background-color: #047dff50;}
.category--student.selected {background-color: #047dff50;}
.category--trainee {border-color: #55c7aa;}
.category--trainee:hover {background-color: #55c7aa50;}
.category--trainee.selected {background-color: #55c7aa50;}
.category--junior{border-color: #f2ca55;}
.category--junior:hover{background-color: #f2ca5550;}
.category--junior.selected{background-color: #f2ca5550;}
.category--senior {border-color: #fa6124;}
.category--senior:hover {background-color: #fa612450;}
.category--senior.selected {background-color: #fa612450;}

.form--ticket {margin-bottom: 20px;}
.form--ticket p {margin-top: 0;}
.ticket__total{
  background-color: var(--totalIndicator);
  display: flex;
  align-items: center;
  padding-left: 20px;
  height: 40px;
  color: #1f6db2;
  font-size: 1.4rem;
  font-weight: bold;
  margin-bottom: 15px;
  border-radius: 5px;
}
.ticket__total span {font-size: 1.8rem;}
.ticket__buttons {display: flex; gap: 10px;}
.ticket__buttons button {height: 35px;font-size: 1.5rem;}


/* :::::::: Media queries ::::::::*/

@media screen and (max-width:992px) and (orientation: portrait){
  .ticket{gap: 50px;}
  .ticket__category {max-width: 90%; margin: 0 auto;}
  .category{
    flex-wrap: wrap;
    aspect-ratio: 6/3;
    flex-basis: calc(50% - 5px);
    font-size: 1.2rem;
    padding: 10px;
  }
  .form--ticket input, .form--ticket select {height: 40px;}
  .form--ticket .ticket__buttons button {height: 40px;}
}

@media screen and (max-width:767px){
  .ticket__category {max-width: 100%; margin: 0;}
  .category {gap: 5px; line-height: 1.1;}
}

@media screen and (max-width:576px) {
  .ticket__title {line-height: 1.1; margin-bottom: 10px;}
  .ticket__title--small{line-height: 1.5;}
  .ticket__category {gap: 5px;}
  .category{
    flex-wrap: wrap;
    aspect-ratio: unset;
    flex-basis: calc(50% - 5px);
    font-size: 1.2rem;
    padding: 10px;
  }
  .hard {font-size: 1.4rem;}
  .soft {font-size: 1rem;}
}