@font-face {
  font-family: "Roboto Condensed";
  src: url("../fonts/googlefonts/RobotoCondensed-Bold.ttf");
  font-weight: bold;
  font-style: normal;
}

.acessibilidade {
  display: flex;
  justify-content: space-between;
  padding: 0px 50px;

  & nav {
    display: flex;

    & menu {
      display: flex;
      align-items: center;
      gap: 15px;

      & a {
        color: white !important;

        &:hover,
        &:focus {
          color: var(--cor-secundaria-hover) !important;
        }
      }
    }
  }

  & .botoes {
    display: flex;
    gap: 15px;

    & button {
      all: unset;
      padding: 7px 20px;
      color: white !important;
      background-color: var(--cor-principal-clara);
      cursor: pointer;
      transition: 0.2s ease-in-out;
      border: none;

      &:hover,
      &:focus {
        /* background-color: var(--cor-principal-hover) !important; */
        color: var(--cor-secundaria-hover) !important;
      }

      &::before,
      &::after {
        display: none !important;
      }
    }
  }
}

#header {
  background-color: var(--cor-principal);
  border-bottom: 3px solid var(--cor-secundaria);
}

#header .header-conteudo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80px;
  padding: 0 50px;
}

#header .header-conteudo .conteudo-left {
}

#header .header-conteudo .conteudo-right {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;

  & .campo-pesquisa {
    border: none;
    width: 300px;
    height: 45px;
    border-radius: 25px;
    padding-left: 20px;
    padding-right: 0; /* Precisa ser do tamanho do botão que ficará dentro */
  }

  & .texto-login {
    color: white !important;
  }

  & .botao-sair {
    color: white !important;
    font-size: 1.2rem;

    &:hover,
    &:focus {
      color: var(--cor-secundaria-hover) !important;
    }
  }
}

#header .logo-cliente {
  flex: 0;
  display: block;
  height: 50px !important;

  & > img {
    width: auto !important;
    height: 100% !important;
    object-fit: contain;
  }
}

#header .botoes-menu {
  display: none;
}

#header .navegacao-principal {
  display: flex;
  background-color: var(--cor-principal-clara);
  justify-content: center;
}

#header menu {
  display: flex;
  margin: 0 !important;
}

#header menu button {
  padding: 15px;
  min-height: 100%;
  cursor: pointer;
  background: none;
  border: none;
  color: white;
  position: relative;

  &::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0px;
    background-color: var(--cor-secundaria);
    transition: 0.2s ease-in-out;
  }

  &:is(:hover, :focus)::before {
    height: 3px;
  }
}

#header menu li:has(menu:is(:hover, :focus)) button {
  &::before {
    height: 3px !important;
  }
}

#header menu button.active::before {
  height: 3px;
}

.navegacao-principal > menu > li {
  position: relative;
}

.navegacao-principal > menu > li > menu {
  position: absolute;
  background-color: var(--cor-principal-clara);
  top: 100%;
  padding: 0 10px;
  left: 0;
  width: fit-content;
  min-width: 100%;
  height: 0;
  overflow-y: hidden;
  transition: 0.2s ease-in-out;
  border-radius: 10px;
  z-index: 999;
}

.navegacao-principal > menu *:is(li, a):is(:hover, :focus) menu,
.navegacao-principal > menu menu:has(*:focus) {
  height: fit-content;
  min-height: max-content;
  padding: 10px;
  border: 1px solid var(--cor-principal-hover);
}

.navegacao-principal > menu > li > menu > div {
  display: flex;
  flex-direction: column;
  list-style: none;
  height: fit-content;
  width: fit-content;
  min-width: 100%;
}

.navegacao-principal > menu > li > menu a {
  width: fit-content;
  min-width: 100%;
}

.navegacao-principal > menu > li > menu button {
  padding: 10px;
  border-radius: 10px;
  width: max-content;
  min-width: 100%;
  text-align: left;
  display: flex;
  gap: 10px;
  align-items: center;
}

.navegacao-principal > menu > li > menu button .icone {
  font-size: large;
}

.navegacao-principal > menu > li > menu button:is(:hover, :focus) {
  background-color: var(--cor-principal-hover) !important;
}

.navegacao-principal > menu > li > menu button::before {
  display: none;
}

.radar button {
  font-family: "Roboto Condensed";
  font-size: 1.3rem;
  transition: 0.2s ease-in-out;

  &::after,
  &::before {
    display: none !important;
  }

  &:is(:hover, :focus) {
    color: var(--cor-secundaria-hover) !important;
  }
}

main {
  display: flex;
}

main > aside {
  flex: 1;
  min-width: 300px;
  border-right: 1px solid rgb(224, 224, 224);
  padding: 15px;
}

main > aside > .menu-aside {
  width: 100%;
  border-radius: 15px;
  background-color: #fff;
  padding: 20px;

  & button {
    background-color: transparent;
    border: none;
    padding: 15px;
    width: 100%;
    text-align: left;
    border-radius: 7px;
    cursor: pointer;

    &:is(:hover, :focus) {
      background-color: #efefef;
    }
  }
}

main .conteudo {
  width: 100%;
}

#cookieModal {
  position: fixed;
  bottom: 30px;
  left: 30px;
  z-index: 50;
  min-width: 200px;
  width: calc(100% - 60px);
  max-width: 400px;
  min-height: 200px;
  height: fit-content;
  border-radius: 15px;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow);
  background-color: #fff;

  & .cookie-icon {
    height: 50px;
    width: 50px;
    font-size: 2rem;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 15px;
    transition: 0.2s ease-in-out;

    background-color: var(--cor-cinza-claro);
    color: var(--cor-principal);
  }

  & *:not(.cookie-icon) {
    padding-left: 10px;
    padding-right: 10px;
  }

  & .titulo {
    padding-top: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--cor-cinza);
    display: flex;
    align-items: center;
    gap: 5px;

    & h4 {
      font-size: 1.4rem;
    }
  }

  & .conteudo {
    border-bottom: 1px solid var(--cor-cinza);
    flex: 1;
    padding-top: 30px;
    padding-bottom: 30px;

    & a {
      padding: 0;
      margin: 0;
    }
  }

  & .acoes {
    display: flex;
    justify-content: right;
    gap: 5px;
    padding-top: 10px;
    padding-bottom: 20px;

    & button {
      border: none;
      background-color: var(--cor-cinza);
      color: var(--color);
      padding: 13px 25px;
      border-radius: 8px;
      cursor: pointer;

      &.btn-aceitar {
        background-color: var(--cor-principal);
        color: white;

        &:hover {
          background-color: var(--cor-principal-hover);
        }
      }
    }
  }

  & button.cookie-icon {
    display: none;
  }

  &:not(.active) {
    min-width: 0;
    width: 0;
    max-width: 0;

    height: 0;
    min-height: 0;

    & > *:not(button.cookie-icon, button.cookie-icon > *) {
      display: none;
    }

    & button.cookie-icon {
      display: flex;
      position: fixed;
      bottom: 30px;
      left: 30px;
      z-index: 51;
      cursor: pointer;

      background-color: #fff;
      color: var(--cor-principal);
      border: 2px solid var(--cor-principal);

      &:hover {
        background-color: var(--cor-principal);
        color: white;
      }
    }
  }
}

#footer {
  background-color: var(--cor-principal);
}

#footer .info {
  /* background-color: var(--cor-principal-clara); */
  padding: 30px 7vw;
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;

  & .top {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--cor-principal-clara);

    & .logo {
      width: 100%;
      min-width: 300px;
      max-width: min(100%, 700px);
      height: 90px;

      & img {
        height: 100%;
        width: 100%;
        object-fit: contain;
      }
    }

    & p {
      color: white !important;
      text-align: center;
      margin: 0;
    }
  }

  & .blocos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;

    & .bloco {
      border: 1px solid var(--cor-principal-clara);
      border-radius: 10px;
      padding: 15px 30px;
      display: flex;
      flex-direction: column;
      gap: 10px;

      & h3 {
        /* border: none; */
        border-bottom: 1px solid var(--cor-principal-clara);
        color: white !important;
        padding-left: 0;
        font-size: 2rem;
        text-align: center;
      }

      & p {
        text-align: center;
        color: white !important;
        margin: 0;
      }

      & a {
        color: white !important;

        &:is(:hover, :focus) {
          cursor: pointer;
          text-decoration: underline;
        }
      }
    }
  }

  & .endereco {
    & p {
      color: white !important;
      text-align: center;
    }
  }

  & .bottom {
    border-top: 2px solid var(--cor-secundaria);
    text-align: center;
    padding: 10px 0;

    & p {
      margin: 0;

      & a {
        color: white;
        text-decoration: none;
        margin: 0 10px;
        cursor: pointer;

        &:is(:hover, :focus) {
          text-decoration: underline;
        }
      }
    }
  }
}

#footer .copyright {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 5px;
  padding: 5px 7vw;
  /* background-color: #fff; */
  /* border-radius: 20px 20px 0 0; */
  background-color: var(--cor-principal-clara);

  & img {
    width: 100px;
    height: auto;
  }

  & span {
    /* color: #3d405c; */
    color: white !important;
  }

  & .logo {
    display: block;
    height: 40px;

    & img {
      display: block;
      height: 100%;
      width: auto;
      object-fit: contain;
    }
  }
}

@media only screen and (max-width: 1024px) {
  main > aside {
    display: none;
  }

  .menu-aside .titulo {
    display: none;
  }

  #header {
    background-color: var(--cor-principal);
    min-height: auto;
    border-bottom: none;
  }

  #header .header-conteudo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    padding: 0;
  }

  #header .header-conteudo .conteudo-left {
    padding: 15px;
  }

  #header .header-conteudo .conteudo-right {
    display: none;
  }

  #header .logo-cliente {
    flex: 0;
    display: block;
    height: 35px !important;

    & > img {
      width: auto !important;
      height: 100% !important;
    }
  }

  #header .header-conteudo .botoes-menu {
    display: flex;
    justify-content: center;
    height: 100%;
  }

  #header .header-conteudo .botoes-menu button {
    background-color: var(--cor-principal-clara);
    display: block;
    color: white !important;
    border: none;
    height: 100%;
    padding: 0 20px;
    font-size: 1.3rem;
    cursor: pointer;

    &:is(:hover, :focus) {
      background-color: var(--cor-principal-hover);
    }
  }

  #header .header-conteudo .botoes-menu button.menu-acessibilidade {
    background-color: var(--cor-principal);
    font-size: 1.6rem;

    &:is(:hover, :focus) {
      background-color: var(--cor-principal-hover);
    }
  }

  #header nav {
    display: flex;
    background-color: var(--cor-principal-clara);
    justify-content: space-between;
  }

  #header menu {
    display: flex;
    gap: 10px;
    margin: 0 !important;
  }

  #header menu button {
    padding: 15px;
    min-height: 100%;
    cursor: pointer;
    background: none;
    border: none;
    color: white;
    position: relative;

    &::before {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 0px;
      background-color: var(--cor-secundaria);
      transition: 0.2s ease-in-out;
    }

    &:is(:hover, :focus)::before {
      height: 3px;
    }
  }

  .navegacao-principal > menu > li > menu {
    position: static;
    height: fit-content;
  }

  .navegacao-principal > menu > li > menu li {
    padding-left: 30px;
  }

  .navegacao-principal > menu > li > menu .icone {
    display: none;
  }
}

@media only screen and (max-width: 768px) {
}

@media only screen and (max-width: 480px) {
}