/* =================================================================== */
/* ==== DEV CONVERTER - DIAMOND EDITION CSS ==== */
/* =================================================================== */
/*
 * Versão: 5.0 (Diamond)
 * Descrição: A versão final e mais refinada. Inclui tipografia
 *            fluida (clamp), feedback de estado aprimorado, e
 *            micro-interações de luxo para uma experiência de
 *            usuário impecável.
 */
/* =================================================================== */


/* =================================================================== */
/* ==== 1. VARIÁVEIS GLOBAIS E TEMA ==== */
/* =================================================================== */

:root {
  /* Paleta de Cores */
  --cor-fundo: #121212;
  --cor-fundo-secundario: #0d1016;
  --cor-card: #1E1E1E;
  --cor-borda: #333333;
  --cor-destaque: #007AFF;
  --cor-destaque-hover: #0056b3;
  --cor-sucesso: #28a745;
  --cor-erro: #dc3545;
  --cor-texto-principal: #F5F5F7;
  --cor-texto-secundario: #8A8A8E;
  --cor-sombra: rgba(0, 0, 0, 0.3);
  --cor-brilho-destaque: rgba(0, 122, 255, 0.2);

  /* Métricas e Animações */
  --raio-borda: 12px;
  --transicao-suave: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  --transicao-rapida: all 0.2s ease;
}


/* =================================================================== */
/* ==== 2. RESET GLOBAL E ESTILOS DE BASE ==== */
/* =================================================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Montserrat', sans-serif;
  color: var(--cor-texto-principal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 20px;
  min-height: 100vh;
  overflow-x: hidden;

  /* Fundo com gradiente animado sutil */
  background: linear-gradient(135deg, var(--cor-fundo), var(--cor-fundo-secundario));
  background-size: 400% 400%;
  animation: gradient-background 25s ease infinite;
}

@keyframes gradient-background {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}


/* =================================================================== */
/* ==== 3. ANIMAÇÕES DE ENTRADA E CONTAINER ==== */
/* =================================================================== */

.container {
  width: 100%;
  max-width: 650px;
  animation: fadeIn 0.8s 0.1s ease-out forwards;
  opacity: 0;
}

@keyframes fadeIn {
  to { opacity: 1; }
}

header, main section, footer {
  opacity: 0;
  transform: translateY(20px);
  animation: slideUpFadeIn 0.6s ease-out forwards;
}

header { animation-delay: 0.2s; }
main section:nth-of-type(1) { animation-delay: 0.4s; }
main section:nth-of-type(2) { animation-delay: 0.6s; }
footer { animation-delay: 0.8s; }

@keyframes slideUpFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* =================================================================== */
/* ==== 4. CABEÇALHO (HEADER) ==== */
/* =================================================================== */

header {
  text-align: center;
  margin-bottom: 50px;
}

header h1 {
  font-family: 'Coming Soon', cursive;
  /* MELHORIA: Tipografia Fluida com clamp() */
  font-size: clamp(2.5rem, 6vw, 3.2rem);
  font-weight: 700;
  color: var(--cor-texto-principal);
  letter-spacing: 1.5px;
  transition: var(--transicao-suave);
  animation: glow-title 5s infinite alternate;
}

header h1:hover {
  text-shadow: 0 0 20px var(--cor-brilho-destaque), 0 0 35px rgba(0,0,0,0.5);
}

@keyframes glow-title {
  from { text-shadow: 0 0 5px var(--cor-brilho-destaque), 0 0 10px rgba(0,0,0,0.5); }
  to { text-shadow: 0 0 15px var(--cor-brilho-destaque), 0 0 25px rgba(0,0,0,0.5); }
}


/* =================================================================== */
/* ==== 5. SEÇÕES PRINCIPAIS E CARDS ==== */
/* =================================================================== */

main section {
  background-color: var(--cor-card);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-borda);
  padding: 35px;
  margin-bottom: 30px;
  transition: var(--transicao-suave);
  box-shadow: 0 5px 15px var(--cor-sombra);
  position: relative;
  z-index: 1;
}

main section::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: var(--raio-borda);
  border: 2px solid transparent;
  background: linear-gradient(135deg, var(--cor-destaque), var(--cor-destaque-hover)) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  z-index: -1;
  opacity: 0;
  transition: var(--transicao-suave);
}

main section:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 15px 35px var(--cor-sombra);
  border-color: transparent;
}

main section:hover::before {
  opacity: 1;
}

h2 {
  font-size: 1.5rem;
  color: var(--cor-texto-principal);
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--cor-borda);
}

p {
  color: var(--cor-texto-secundario);
  line-height: 1.8;
  font-size: 1rem;
}


/* =================================================================== */
/* ==== 6. FORMULÁRIO E CAMPOS INTERATIVOS ==== */
/* =================================================================== */

#converter-form {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.form-group {
  position: relative;
}

.form-group label {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--cor-texto-secundario);
  position: absolute;
  top: 14px;
  left: 16px;
  pointer-events: none;
  transition: all 0.2s ease-out;
}

.form-group input,
.form-group select {
  width: 100%;
  padding: 14px 15px;
  padding-top: 22px;
  background-color: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
  color: var(--cor-texto-principal);
  font-size: 1rem;
  font-family: 'Montserrat', sans-serif;
  transition: var(--transicao-rapida);
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.form-group input:focus + label,
.form-group input:not(:placeholder-shown) + label,
.form-group select:focus + label,
.form-group select:valid + label {
  top: 6px;
  font-size: 0.75rem;
  color: var(--cor-destaque);
}

input[type="number"]::placeholder {
  color: transparent;
}

.valor-wrapper input {
  padding-left: 45px;
}

.valor-wrapper label {
  left: 45px;
}

.valor-wrapper::before {
  content: 'R$';
  position: absolute;
  top: 50%;
  left: 15px;
  transform: translateY(-50%);
  color: var(--cor-texto-secundario);
  font-weight: 600;
  pointer-events: none;
  z-index: 2;
}

.select-wrapper::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 15px;
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238A8A8E'%3E%3Cpath d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z'/%3E%3C/svg%3E" );
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transform: translateY(-50%);
  transition: transform 0.2s ease-out;
  pointer-events: none;
}

.select-wrapper:has(select:focus)::after {
  transform: translateY(-50%) rotate(180deg);
}

button[type="submit"] {
  padding: 16px 14px;
  background-color: var(--cor-destaque);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: var(--transicao-suave);
  margin-top: 10px;
  position: relative;
  overflow: hidden;
}

button[type="submit"]:hover {
  background-color: var(--cor-destaque-hover);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 122, 255, 0.25);
}

button[type="submit"]:active {
  transform: translateY(-1px);
}


/* =================================================================== */
/* ==== 7. DIV DE RESULTADO E ESTADOS DE FEEDBACK ==== */
/* =================================================================== */

#resultado {
  margin-top: 25px;
  padding: 18px;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--cor-texto-principal);
  background-color: var(--cor-fundo);
  border: 1px dashed var(--cor-borda);
  border-radius: 8px;
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transicao-suave);
}

/* MELHORIA: Classes de estado para feedback visual (ativar via JS) */
#resultado.success {
  border-color: var(--cor-sucesso);
  border-style: solid;
  box-shadow: 0 0 15px rgba(40, 167, 69, 0.3);
}

#resultado.error {
  border-color: var(--cor-erro);
  border-style: solid;
  color: var(--cor-erro);
  box-shadow: 0 0 15px rgba(220, 53, 69, 0.3);
  animation: shake 0.5s ease-in-out;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-5px); }
  40%, 80% { transform: translateX(5px); }
}


/* =================================================================== */
/* ==== 8. RODAPÉ (FOOTER) ==== */
/* =================================================================== */

footer {
  text-align: center;
  padding: 40px 20px;
  margin-top: 20px;
  border-top: 1px solid var(--cor-borda);
  color: var(--cor-texto-secundario);
}

footer .footer { display: none; }

footer h3, footer h4 {
  font-size: 1.1rem;
  color: var(--cor-texto-principal);
  margin: 25px 0 15px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

footer ul {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 25px;
  flex-wrap: wrap;
}

footer a {
  color: var(--cor-texto-secundario);
  text-decoration: none;
  transition: var(--transicao-rapida);
  position: relative;
  padding-bottom: 4px;
}

footer a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--cor-destaque);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

footer a:hover {
  color: var(--cor-destaque);
}

footer a:hover::after {
  transform: scaleX(1);
}

footer p {
  margin-bottom: 10px;
  font-size: 0.9rem;
}


/* =================================================================== */
/* ==== 9. ACESSIBILIDADE E MÍDIA ==== */
/* =================================================================== */

:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--cor-fundo), 0 0 0 5px var(--cor-destaque);
  border-radius: 4px;
  transition: box-shadow 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* =================================================================== */
/* ==== 10. RESPONSIVIDADE ==== */
/* =================================================================== */

@media (max-width: 768px) {
  body {
    padding: 20px 15px;
  }

  main section {
    padding: 25px;
  }
}
@media (max-width: 576px) {
  body {
    padding: 15px;
  }

  main section {
    padding: 20px;
  }
}
@media (max-width: 425px) {
  body {
    padding: 10px;
  }

  main section {
    padding: 15px;
  }
}
/* =================================================================== */
/* ==== 11. FOOTER ==== */
/* =================================================================== */

footer {
  background-color :#0a0a0a;
}

footer p {
  color: #0e0e1f;
  color: var(--cor-secundaria);
  text-align: center;
  padding: 20px;
  font-size: 14px;
}

footer a {
  color: var(--cor-secundaria);
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}