.category:not(.active) {
  display: none;
}

h3 {
  font-weight: bold;
  margin: 1rem 0;
}

.raffle__tabs {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: black;
  border-radius: 2px;
}
.raffle__tabs-container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.raffle__tabs-register {
  justify-self: flex-end;
  background-color: var(--primary-color);
  align-self: stretch;
  display: flex;
}
.raffle__tabs-register a {
  color: var(--color-white);
  margin-inline: 5px;
  text-decoration: none;
  font-size: var(--font-clamp-text);
  transition: 0.5s ease-in;
  align-self: center;
}
.raffle__tabs-register a:hover,
.raffle__tabs-register a:active {
  /* color: var(--attention); */

  text-decoration: underline;
}
.raffle__tabs-container button {
  background: transparent;
  border: none;
  color: var(--color-white);
  font-size: var(--font-clamp-text);
  padding: 0.5rem 3rem;
}

.raffle__tabs-container button:hover,
.raffle__tabs-container button:focus {
  background: var(--primary-color);
}
#mechanics,
#winners,
#model,
#prizes,
#winners {
  /* text-align: justify; */
  margin-inline: 2rem;
}
#mechanics h3 {
  font-size: var(--font-h3-clamp);
  /* font-size: 2rem; */
}

#mechanics p {
  font-size: var(--font-clamp-text);
  margin-bottom: 0.5rem;
}

#mechanics li {
  /* margin-left: 1.25rem; */
  font-size: var(--font-clamp-text);
}

.reminder {
  background: var(--reminder);
}
.attention {
  background: var(--attention);
}
/* models */
.raffle__models {
  margin-inline: 0 2rem;
}
.raffle_models h3 {
  margin: 1rem 0;
  font-size: var(--font-h3-clamp);
  /* text-align: center; */
}

.raffle_models ul {
  display: flex;
  width: 100%;
  flex-direction: column;
  /* align-items: center; */
}

.raffle_models ul li {
  font-size: var(--font-clamp-text);
  font-weight: 500;
}

/* Prizes */

#prizes h3 {
  margin: 1rem 0;
  font-size: clamp(1.15rem, 3vw, 1.5rem);
  text-align: center;
}

#prizes table,
#prizes tr,
#prizes th,
#prizes td {
  border: solid black 2px;
  border-collapse: collapse;
  text-align: center;
}

#prizes table {
  width: 70%;
}

#prizes tr,
#prizes th,
#prizes td {
  padding: 0.5rem;
}

#prizes th,
#prizes h3 {
  text-transform: uppercase;
}

#prizes th {
  font-size: clamp(1rem, 3vw, 1.25rem);
}

table {
  margin: 0 auto;
}

/* winners */
#winners h3 {
  margin: 1rem 0;
  font-size: clamp(1.15rem, 3vw, 1.5rem);
  text-align: center;
}

/* raffle-registered */
table,
tr,
td,
th {
  border: 2px solid white;
  border-collapse: collapse;
}

th,
td {
  padding: 1rem;
}

/* tr:nth-child(even) {
  background-color: rgb(255, 226, 221);
}
tr:nth-child(odd) {
  background-color: rgb(230, 230, 230);
}

th {
  background: rgb(19, 18, 18);
  color: var(--color-white);
} */

/*  */
/* skip to registration */
.section__skip {
  display: inline-block;
  border: 1px rgb(204, 203, 203) solid;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 2px;
  padding: 0.5rem 1rem;
  margin-bottom: 10px;
}
.section__skip {
  text-decoration: none;
  color: var(--color-black);
}

.section__skip-scale:hover {
  color: var(--primary-color);
  scale: 1.2;
}

.category-1 {
  width: 100%;
  display: inline-block;
  justify-content: left;
  flex-direction: column;
  gap: 20px;
  margin-top: 24px;
  overflow-x: auto;
}

/* media query */

@media screen and (max-width: 820px) {
  .raffle__tabs {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .raffle__tabs button,
  .raffle__tabs a {
    font-size: 1rem;
  }

  .raffle_models h3 {
    margin: 1rem 0;
    font-size: 1.5rem;
    text-align: center;
  }

  #prizes table {
    width: 100%;
  }

  #prizes h3 {
    margin: 1rem 0;
    text-align: left;
  }
}

@media screen and (max-width: 600px) {
  .raffle__tabs-container {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }
  #prizes tr,
  #prizes th,
  #prizes td {
    font-size: 12px;
  }
}

/* navigation style */

.navigation__panel {
  width: 100%;
  margin-bottom: 2vh;
  display: flex;
  justify-content: space-between;
  background-color: #d0d0d0;
  align-items: center;
  padding: .5rem;
}
.nav_logo {
  max-width: 300px;
  height: 60px;
  width: 100%;
  display: flex;
  justify-content: end;
  padding-right: 1rem;
  color: #d0d0d0;
  background-color: #d0d0d0;
}
.nav_logo img {
  height: 100%;
  /* object-fit: contain; */
  align-content: end;
  background-color: #d0d0d0;
}

.navigation__panel ul {
  list-style-type: none;
  margin-bottom: 0;
}

.navigation__panel ul a {
  text-decoration: none;
  color: var(--color-black);
}

.navigation__panel ul {
  display: flex;
  width: 100%;
  padding-left: 0 !important;
  background-color: #d0d0d0;
  color: inherit;
}

.navigation__panel ul li {
  padding: 1rem 1.5rem;
}

.navigation__panel a.active {
  color: #fff;
  background: var(--secondary-color);
  padding: 6px 12px;
  border-radius: 4px;
}
.not-active {
  background-color: var(--color-black) !important;
  padding: 0 0 !important;
  border-radius: 0 !important;
}

/* Desktop menu */
.navigation__panel ul {
  display: flex;
  gap: 20px;
  list-style: none;
  padding: 10px 0;
}

.navigation__panel a {
  text-decoration: none;
  color: #333;
  font-weight: 500;
}

/* Hamburger icon default hidden on desktop */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
}

.hamburger span {
  width: 28px;
  height: 3px;
  background-color: #000;
}
@media (min-width: 1025px) {
  .nav-header {
    display: none;
  }
}

/* MOBILE VERSION */
@media (max-width: 1024px) {
  .nav-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    border-bottom: 1px var(--bgcolor-disabled) solid;
    margin-bottom: 2vh;
  }

  .nav-header > div {
    padding: 1rem;
  }
  /* Show hamburger icon */
  .hamburger {
    display: flex;
  }

  /* Hide navigation by default */
  .navigation__panel {
    display: none;
    background: #fff;
    width: 100%;
    border-top: 1px solid #ddd;
    padding: 10px 0;
  }
  .nav_logo {
    display: none;
  }

  /* Mobile vertical layout */
  .navigation__panel ul {
    flex-direction: column;
    gap: 10px;
    padding-left: 20px;
  }

  /* Visible when open */
  .navigation__panel.open {
    display: block;
  }
}

.nav-header_logo img {
  max-width: 182px;
  width: 100%;
  object-fit: contain;
}