/* Ampliar el contenedor del formulario */
@import url("https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i");
@import url("https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i");
@import url("https://fonts.googleapis.com/css?family=Great+Vibes");
@import url("https://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i");

body {
  color: #666666;
  font-size: 15px;
  font-family: "Poppins", sans-serif;
  line-height: 1.80857;
}

.form-popup {
  display: block;
  position: fixed;
  bottom: 20px; /* Ajusta la distancia desde el fondo, reduce el valor para que esté más abajo */
  right: 15px;
  border: 2px solid #f1f1f1;
  z-index: 9;
  background-color: white;
  padding: 15px;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
  max-width: 400px;
  width: 100%;
  border-radius: 6px;
  z-index: 999;
}

/* Botón flotante */
.floating-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #f2184f;
  color: white;
  border: none;
  border-radius: 50%;
  width: 70px; /* Reducir tamaño del botón */
  height: 70px;
  font-size: 20px; /* Reducir tamaño del texto */
  cursor: pointer;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.3s ease;
  z-index: 999;
  margin-right: 50px;
  margin-bottom: -10px;
}

.floating-button.hidden {
  opacity: 0;
  pointer-events: none;
}

/* Reducir el tamaño de los campos del formulario */
.input-style,
.select-style {
  width: 100%;
  padding: 4px 6px; /* Reducir el padding de los campos */
  margin: 5px 0 8px 0; /* Ajustar márgenes */
  border: 1px solid #ccc;
  border-radius: 6px; /* Reducir el radio de los bordes */
}

/* Botón de cerrar (X) */
.close-btn {
  position: absolute;
  top: 8px; /* Ajustar la posición */
  right: 8px;
  cursor: pointer;
  background-color: transparent;
  border: none;
  padding: 0;
}

.close-btn svg {
  width: 20px; /* Reducir tamaño del icono */
  height: 20px;
  color: #000;
}

.close-btn:hover svg {
  color: #f2184f;
}

.button-container {
  display: flex;
  justify-content: space-between;
  margin-top: 10px; /* Ajustar margen */
}

.button-container .btn {
  background-color: #f2184f;
  color: white;
  border: none;
  padding: 8px 10px; /* Reducir padding del botón */
  font-size: 14px; /* Reducir tamaño de fuente */
  cursor: pointer;
  border-radius: 8px;
  transition: background-color 0.3s ease;
}

.button-container .btn:hover {
  background-color: #000000;
}