:root {
  --ibati-blue: #014aff; /* Azul Royal */
  --ibati-blue-90: rgba(1, 73, 255, 0.9); /* Azul Royal */
  --ibati-blue-40: rgba(1, 73, 255, 0.4); /* Azul Royal */
  --ibati-blue-30: rgba(1, 73, 255, 0.2); /* Azul Royal */
  --ibati-light-blue: #08b9ff; /* Azul Céu Brilhante */
  --ibati-weak-light-blue: #C2EEFF; /*Azul fraco*/
  --ibati-soft-blue: #eaf6fe; /* Azul Bebê Suave */
  --ibati-deep-blue: #001e52; /* Azul Profundo */
  --ibati-dark-blue: #2c3849; /* Azul Chumbo */
  --ibati-black-blue: #101223; /* Azul Marinho Escuro */
  --ibati-green: #00d3aa; /* Verde Água Neon */
  --ibati-orange: #ff4a02; /* Laranja Chama */
  --ibati-gray: #707070; /* Cinza Médio */
  --ibati-light-gray: #d2d4da; /* Cinza Neve */
  --ibati-mid-gray: #b5b5b5; /* Cinza Claro */
  --ibati-white: #f3f4f8; /* Branco Azulado */
  --ibati-white-variation: #f5fbff; /* Branco Gelo */
  --ibati-black: #000000; /* Preto */
  --ibati-light-green: #f5fbff; /* Verde Água Neon claro*/
}

.btn-primary {
  background: var(--ibati-blue);
  color: white;
}

.btn-primary:hover {
  background: #FF4A02; /* cor sólida no hover */
}

.form-input {
    background: #fff;
    border-radius: 10px;
    padding: 14px 18px;
    font-family: 'Figtree', sans-serif;
}
.form-input::placeholder {
    font-weight: 500;
    font-family: 'Figtree', sans-serif;
}
.pill {
    background: var(--ibati-blue-100);
    color: var(--ibati-dark-blue);
    padding: 6px 12px;
    border-radius: 999px;
    font-weight:600;
    font-size:12px;
    display:inline-block;
}
.check-icon { width:20px; height:20px; }

.select-wrapper .arrow-icon {
  transition: transform .2s ease-in-out;
  transform: translateY(-50%) rotate(0deg); /* posição inicial */
}

.select-wrapper.open .arrow-icon {
  transform: translateY(-50%) rotate(90deg); /* quando aberto */
}
.form-input {
  border: 1px solid transparent; /* borda inicial neutra */
}

.is-invalid {
  border: 1px solid #f56565 !important; /* borda inicial neutra */

}

.egg-border {
  display: block;
  width: 20rem;
  height: 24rem;
  /* border: 1px solid red; */
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}