:root{
    --color-dark: rgb(0, 0, 0);
    --color-white: #ffffff;
    --color-creme: #D9B68B;
    --color-sujo: #F2D0A7;
    --color-marronclaro: #BF9673;
    --color-preto: #232323;
    --primary-color: #BF9673;
    --secondary-color: #F2D0A7;
    --background-color: #f6f8ff;
    --text-color: #232323;
    --dark-background-color: #232323;
    --dark-text-color: #f6f8ff;
    --stroke: #D1D6EE;
    --white: #ffffff;
    --black: #000000;
    --shadow: rgba(0, 9, 61, 0.25);
}

body{
    font-family: 'Lato';
    font-size: 22px;
    background-color: var(--color-sujo);
    color: var(--color-preto);
    /*display: flex;
    flex-direction: column;
    justify-content: space-between; /* Isso empurra o rodapé para o fim da tela 
    min-height: 100vh;*/ 
    align-items: center;
    margin: 0;
}

main {
    padding: 2rem 0; /* espaço no topo */
    width: 100%;
    display: flex;
    justify-content: center;
  }
  

h1{
    text-align: center;
    font-size: 4rem;
    font-family: 'Playwrite';
}

header, nav {
    width: 100%;
  }

.subtitulo {
    font-size: 1rem;
    font-family: 'Lato-Thin';
    background-color: none;
    color: var(--color-preto);
    display: flex;
    flex-direction: column;
    gap: 4rem;
    align-items: center;
}

/* Menu centralizado */
.menu {
    font-family: 'Lato';
    list-style: none;
    border: none;
    display: flex;
    justify-content: center;  /* centraliza horizontalmente os <li> */
    align-items: center;
    padding: 0;
    margin: 0;                 /* remove auto, não é mais necessário */
    width: 100%;               /* ocupa 100% do container */
  }
  
  /* Opcional: espaçamento entre os itens */
  .menu li + li {
    margin-left: 1.5rem;
  }

.menu li{
    position: relative;
    border-right: none;
}

.menu li a{ color: var(--color-preto); text-decoration: none; padding: 1rem 2rem; display: block;}

.menu li a:hover{
    background: var(--color-marronclaro);
    color: var(--color-preto);
    box-shadow: 0 2rem 4rem 0 #ccc;
    -webkit-box-shadow: 0 0rem 4rem var(--color-creme);
    border-radius: 1rem;
}

.content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 80%;
    max-width: 1200px;
    gap: 4rem;
    align-items: flex-start; /* GARANTE que o conteúdo fique no topo */
  }
      
/* Coluna da direita (tarefas) */
.content--left {
    width: 60%;
  }
  .content--right {
    width: 40%;
  }

#input-new-task,
#btn-new-task{
    border: none;
    font-size: 1rem;
    outline: none;
    padding: 1rem;
}

#input-new-task{
    width: 20rem;
    border-radius: 1rem;
}

#btn-new-task{
    background-color: var(--color-marronclaro);
    color: var(--color-white);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    cursor: pointer;
    transition: .4s;
}

#btn-new-task:hover{
    background-color: var(--color-sujo);
}

#to-do-list{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0;
    font-family: 'Lato';
}

#to-do-list li{
    list-style-type: none;
    font-size: 1.4rem;
    text-transform: capitalize;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#to-do-list li:hover{
    background-color: var(--color-dark);
    color: var(--color-sujo);
    opacity: .8;
    transition: .4s;
    border-radius: 1rem;
    padding-left: 1rem;
    font-family: 'Lato';
}

#btn-ok{
    border: none;
    background-color: var(--color-green);
    color: var(--color-white);
    padding: .4rem .8rem;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: .4s;
}

#btn-ok:hover{
    background-color: var(--color-sujo);
    color: var(--color-preto);
}

  .content--left {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.checked {
  text-decoration: line-through;
  color: gray;
}

#recipe-select,
#recipe-quantity,
#calculate-btn {
    padding: 0.8rem;
    font-size: 1rem;
    border-radius: 0.5rem;
    border: 1px solid var(--color-preto);
}

#calculate-btn {
    background-color: var(--color-marronclaro);
    color: var(--color-white);
    cursor: pointer;
    font-family: 'Lato';
    transition: 0.3s;
}

#calculate-btn:hover {
    background-color: var(--color-sujo);
}

#calculation-result {
    font-size: 1.2rem;
    font-family: 'Lato';
    background-color: var(--color-creme);
    padding: 1rem;
    border-radius: 0.8rem;
}

.ingredients-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
}

.ingredient-item {
    background-color: var(--color-creme);
    border: 1px solid var(--color-marronclaro);
    border-radius: 0.5rem;
    padding: 0.6rem 1rem;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Lato', sans-serif;
}

  /* Estilos do botão de coração */
  .heart-switch svg {
    display: block;
  }
  
  .heart-switch svg path {
    transition: stroke var(--duration), fill var(--duration);
  }

.heart-switch {
    --duration: .45s;
    --stroke: #70727a;
    --stroke-active: #BF9673;
    --fill: var(--dark-background-color);
    --fill-active: #F2D0A7;
    --shadow: rgba(0, 9, 61, 0.25);
    cursor: pointer;
    position: fixed;
    transform: scale(var(--s, 1)) translateZ(0);
    transition: transform .2s;
    -webkit-tap-highlight-color: transparent;
  }
  
  .heart-switch:active {
    --s: .95;
  }

  .heart-switch.top-right {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000; /* Garante que fica por cima */
  }
  
  .heart-switch input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    position: absolute;
    outline: none;
    border: none;
    pointer-events: none;
    z-index: 1;
    margin: 0;
    padding: 0;
    left: 1px;
    top: 1px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px 0 var(--shadow);
  }
  
  .heart-switch input + svg {
    width: 36px;
    height: 25px;
    fill: var(--fill);
    stroke: var(--stroke);
    stroke-width: 1px;
    stroke-linejoin: round;
    display: block;
    transition: stroke var(--duration), fill var(--duration);
  }
  
  .heart-switch input:not(:checked) {
    animation: uncheck var(--duration) linear forwards;
  }
  
  .heart-switch input:checked {
    animation: check var(--duration) linear forwards;
  }
  
  .heart-switch input:checked + svg {
    fill: var(--fill-active);
    stroke: var(--stroke-active);
  }
  
  .heart-switch {
    margin: 12px 0;
  }

  @keyframes uncheck {
    0% {
      transform: rotate(-30deg) translateX(13.5px) translateY(8px);
    }
    50% {
      transform: rotate(30deg) translateX(9px);
    }
    75% {
      transform: rotate(30deg) translateX(4.5px) scaleX(1.1);
    }
    100% {
      transform: rotate(30deg);
    }
  }
  
  @keyframes check {
    0% {
      transform: rotate(30deg);
    }
    25% {
      transform: rotate(30deg) translateX(4.5px) scaleX(1.1);
    }
    50% {
      transform: rotate(30deg) translateX(9px);
    }
    100% {
      transform: rotate(-30deg) translateX(13.5px) translateY(8px);
    }
  }

  html {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
  }
  
  *, *::before, *::after {
    box-sizing: inherit;
  }
  
  footer.footer-text {
    text-align: center;
    padding: 1rem 0;
    background-color: transparent;
    font-size: 1rem;
    font-family: 'Lato';
    position: flex;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    transition: color 0.3s, background-color 0.3s;
    }

    footer.footer-text a {
    color: var(--color-preto);
    text-decoration: none;
    }


  /* Tema claro (padrão) */
  body {
    background-color: var(--color-sujo);
    color: var(--color-preto);
  }
  
  /* Tema escuro */
  body.dark {
    background-color: var(--color-preto);
    color: var(--color-sujo);
  }
  
  /* Transição suave de cor */
.subtitulo,
.menu li a {
  transition: color 0.3s ease;
}

/* Modo claro (padrão) */
.subtitulo {
  color: var(--color-preto);
}
.menu li a {
  color: var(--color-preto);
}

/* Modo escuro */
body.dark .subtitulo {
    color: var(--color-sujo);
  }
  body.dark .menu li a {
    color: var(--color-sujo);
  }
  
  /* Se quiser ajustar também o hover do menu no escuro */
  .menu li a:hover {
    background: var(--color-marronclaro);
  }
  body.dark .menu li a:hover {
    background: var(--color-creme);
  }

  /* Transição suave de cor para textos específicos */
#calculation-result,
#calculation-result strong,
.ingredients-list,
.ingredient-item {
  transition: color 0.3s ease;
}

/* Modo claro (padrão) */
#calculation-result {
  color: var(--color-preto);
}
#calculation-result strong {
  color: var(--color-preto);
}

.ingredients-list,
.ingredient-item {
  color: var(--color-preto);
}

/* Modo escuro */
body.dark #calculation-result {
  color: var(--color-preto);
}

body.dark #calculation-result strong {
  color: var(--color-preto);
}

body.dark .ingredients-list,
body.dark .ingredient-item {
  color: var(--color-preto);
}

/* Ajuste no hover ou interação com ingredientes */
body.dark .ingredient-item:hover {
  background-color: var(--color-sujo);
  color: var(--color-sujo);
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  margin-top: 2rem;
}

.form-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.form-row {
  display: flex;
  justify-content: center;
  gap: 2rem;
  width: 100%;
}

#itens-container {
  width: 80%;
  text-align: center;
}

#tabelaPedidos {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}

#tabelaPedidos th,
#tabelaPedidos td {
  border: 1px solid #ccc;
  padding: 0.5rem;
  text-align: center;
}

#obs {
  width: 80%;
  height: 100px;
  resize: none;
}

#enviar {
  padding: 0.8rem 2rem;
  font-size: 1.2rem;
  background-color: var(--primary-color);
  color: var(--color-preto);
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background-color 0.3s;
}

#enviar:hover {
  background-color: var(--secondary-color);
}

/* Estilo para o contêiner da tabela */
.tabela-container {
  background-color: var(--color-creme); /* Cor de fundo semelhante ao cálculo da receita */
  padding: 1rem;
  border-radius: 0.8rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Adiciona uma leve sombra */
  margin-top: 1rem;
}

/* Estilo para a tabela */
#tabelaPedidos {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
  background-color: #F2D0A7; /* Cor fixa para o fundo da tabela */
  border-radius: 0.5rem;
  overflow: hidden; /* Garante que o border-radius funcione */
}

/* Estilo para as células da tabela */
#tabelaPedidos th,
#tabelaPedidos td {
  border: 1px solid #BF9673; /* Cor fixa para as bordas */
  padding: 0.5rem;
  text-align: center;
  color: #232323; /* Cor fixa para o texto */
}

/* Estilo para o cabeçalho da tabela */
#tabelaPedidos th {
  background-color: #BF9673; /* Cor fixa para o fundo do cabeçalho */
  color: var(--color-preto); /* Cor fixa para o texto do cabeçalho */
  font-weight: bold;
}

/* Estilo para as linhas alternadas */
#tabelaPedidos tr:nth-child(even) {
  background-color: #D9B68B; /* Cor fixa para as linhas alternadas */
}

/* Contêiner para alinhar Nome e Pombo na mesma linha */
.form-row {
  display: flex;
  justify-content: space-between;
  gap: 2rem; /* Espaçamento entre os campos */
  width: 100%;
  max-width: 800px; /* Limita a largura total */
  margin-bottom: 1rem;
}

.form-container {
  flex: 1; /* Faz os campos ocuparem o mesmo espaço */
}

.form-container label {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--color-preto);
}

.form-container input {
  width: 100%;
  padding: 0.8rem;
  font-size: 1rem;
  border: 1px solid var(--color-marronclaro);
  border-radius: 0.5rem;
  background-color: var(--color-white);
  color: var(--color-preto);
}

.form-container input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 4px var(--primary-color);
}

.container-estabelecimento {
  font-size: 1.5rem; /* Aumenta o tamanho da fonte */
  font-weight: bold; /* Deixa o texto em negrito */
  color: var(--color-preto); /* Mantém a cor consistente com o tema */
  margin-bottom: 0.5rem; /* Adiciona um pequeno espaçamento abaixo */
}

#estabelecimento {
  font-size: 1rem; /* Ajuste o tamanho da fonte */
  padding: 0.8rem;
  border-radius: 0.5rem;
  border: 1px solid var(--color-marronclaro);
  background-color: var(--color-white);
  color: var(--color-preto);
  width: 10%; /* Garante que o select ocupe toda a largura do contêiner */
}

#estabelecimento option {
  font-size: 1rem; /* Ajuste o tamanho da fonte dos itens */
}

/* Estilo para a caixa de entrada de quantidade */
.quantidade {
  font-size: 1rem; /* Ajusta o tamanho da fonte para ser igual ao nome dos itens */
  padding: 0.8rem;
  border-radius: 0.5rem; /* Arredonda as bordas */
  border: 1px solid var(--color-marronclaro);
  background-color: var(--color-white);
  color: var(--color-preto);
  width: 30%; /* Ajusta a largura para ocupar o espaço necessário */
}

.quantidade:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 4px var(--primary-color);
}

#obs {
  width: 80%;
  height: 100px;
  resize: none;
  font-size: 1rem; /* Ajusta o tamanho da fonte para ser igual ao campo Nome */
  padding: 0.8rem;
  border: 1px solid var(--color-marronclaro);
  border-radius: 0.5rem;
  background-color: var(--color-white);
  color: var(--color-preto);
}

#obs:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 4px var(--primary-color);
}

/* Modo escuro: Ajusta a cor dos rótulos */
body.dark label {
  color: var(--color-sujo);
}

/* Garante que os textos mantenham a mesma cor no modo escuro */
body.dark h2,
body.dark #total-geral,
body.dark #tabelaPedidos th {
  color: var(--color-preto); /* Cor fixa para o texto */
}

/* Garante que o fundo da tabela também não mude 
body.dark #tabelaPedidos {
  background-color: none;
} */

body.dark #tabelaPedidos th,
body.dark #tabelaPedidos td {
  color: var(--color-preto); /* Texto preto fixo */
}