/* === Estructura principal del formulario === */
.property-search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  background: #fff;
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  align-items: center;
  font-family: 'Helvetica', sans-serif;
}

/* === Pestañas Venta / Alquiler === */
.tabs {
  display: flex;
  gap: 6px;
}

.tabs .tab {
  background: #eee;
  border: none;
  padding: 8px 16px;
  border-radius: 20px;
  cursor: pointer;
  transition: 0.2s;
}

.tabs .tab.active {
  background: #0066ff;
  color: white;
}

/* === Dropdowns personalizados (aislados del Bootstrap) === */
.property-dropdown {
  position: relative;
  flex: 1;
  min-width: 150px;
}

.property-dropdown-toggle {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 10px 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: border 0.2s;
}

.property-dropdown-toggle:hover {
  border-color: #888;
}

/* === Menú desplegable flotante === */
.property-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 270px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(8px);
  border-radius: 10px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
  padding: 16px;
  z-index: 20;
  animation: fadeIn 0.3s ease;
}

.property-dropdown.open .property-dropdown-menu {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* === Título dentro del desplegable === */
.dropdown-title {
  font-size: 15px;
  font-weight: 600;
  color: #515355;
  margin-bottom: 10px;
}

/* === Inputs dentro de los desplegables === */
.property-dropdown-menu input[type=text],
.property-dropdown-menu input[type=number] {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 6px;
  margin-bottom: 10px;
}

/* === Campos de rango (precio y superficie) === */
.price-inputs {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.form-field {
  position: relative;
  flex: 1;
}

.currency {
  position: absolute;
  right: 8px;
  top: 7px;
  color: #777;
}

/* === Tipos de propiedad y dormitorios === */
.property-types label,
.bedroom-options label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border-radius: 6px;
  cursor: pointer;
  transition: 0.2s;
}

.property-types label:hover,
.bedroom-options label:hover {
  background: #f3f3f3;
}

.bedroom-options {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.bedroom-options span {
  display: inline-block;
  background: #f3f3f3;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  line-height: 38px;
  text-align: center;
  font-weight: 600;
}

/* === Botón dentro del dropdown === */
.btn-apply {
  background: #7D8892;
  color: white;
  border: none;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.2s;
}

.btn-apply:hover {
  background: #7D8892;
}

/* === Botón principal de búsqueda === */
.search-btn {
  background: #7D8892;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 10px 16px;
  cursor: pointer;
  transition: 0.2s;
}

.search-btn:hover {
  background: #7D8892;
}

/* === Responsive === */
@media (max-width: 900px) {
  .property-search-form {
    flex-direction: column;
  }
}
/* === Corrección visual para dormitorios === */
.bedroom-options {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.bedroom-options label {
  cursor: pointer;
  position: relative;
}

.bedroom-options input[type="checkbox"] {
  display: none; /* Ocultamos el cuadrado del checkbox */
}

.bedroom-options span {
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 50%;
  background: #f3f3f3;
  font-weight: 600;
  color: #555;
  transition: all 0.2s ease;
}

/* Efecto hover */
.bedroom-options span:hover {
  background: #e0e0e0;
}

/* Estado seleccionado */
.bedroom-options input[type="checkbox"]:checked + span {
  background: #7D8892;
  color: #fff;
  box-shadow: 0 0 6px rgba(0,102,255,0.4);
}
.property-dropdown-menu {
  width: auto;              /* ✅ se adapta al contenido */
  min-width: 270px;         /* mantiene tamaño mínimo */
  max-width: 350px;         /* evita que se haga demasiado ancho */
  right: 0;                 /* asegura que el dropdown no se salga por la derecha */
}


/* === Fondo general del buscador === */
.property-search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  background: #f5f5f5;           /* 💡 Gris claro de fondo */
  padding: 15px 20px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08); /* sombra suave */
  align-items: center;
  font-family: 'Helvetica', sans-serif;
}

/* === Inputs y dropdowns === */
.property-dropdown-toggle,
.property-search-form input[type="text"] {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 10px 14px;
  width: 100%;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.property-dropdown-toggle:hover,
.property-search-form input[type="text"]:focus {
  border-color: #999;
  box-shadow: 0 0 4px rgba(0,0,0,0.1);
}

/* === Botón Buscar === */
.search-btn {
  background: #7D8892;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  cursor: pointer;
  transition: background 0.2s;
}

.search-btn:hover {
  background: #7D8892;
}

/* === Estilo responsive === */
@media (max-width: 900px) {
  .property-search-form {
    flex-direction: column;
  }
}
/* === Contenedor general del buscador === */
.property-search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  background: #f5f5f5;        /* Fondo gris claro SOLO en la barra */
  padding: 15px 20px;
  border-radius: 0 0 12px 12px; /* Bordes redondeados SOLO abajo */
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  align-items: center;
  font-family: 'Helvetica', sans-serif;
  border-top: none;           /* Eliminamos unión con pestañas */
}

/* === Pestañas (Venta / Alquiler) === */
.tabs {
  display: flex;
  gap: 0;
  margin-bottom: 0;           /* Evita separación rara */
}

.tabs .tab {
  background: #e0e0e0;        /* Fondo gris claro */
  border: none;
  padding: 10px 18px;
  cursor: pointer;
  font-weight: 600;
  color: #333;
  transition: all 0.2s;
  border-radius: 8px 8px 0 0; /* Bordes redondeados arriba */
}

/* Activo: azul como ahora */
.tabs .tab.active {
  background: #7D8892;
  color: #fff;
}

/* Hover para el efecto suave */
.tabs .tab:hover {
  background: #d6d6d6;
}

/* === Inputs y dropdowns === */
.property-dropdown-toggle,
.property-search-form input[type="text"] {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 10px 14px;
  width: 100%;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.property-dropdown-toggle:hover,
.property-search-form input[type="text"]:focus {
  border-color: #999;
  box-shadow: 0 0 4px rgba(0,0,0,0.1);
}

/* === Botón Buscar === */
.search-btn {
  background: #7D8892;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  cursor: pointer;
  transition: background 0.2s;
}

.search-btn:hover {
  background: #7D8892;
}


/* === Contenedor general === */
.property-search-wrapper {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  font-family: 'Helvetica', sans-serif;
}

/* === Pestañas arriba (sin fondo gris) === */
.tabs {
  display: flex;
  background: transparent;
  gap: 0;
  margin-bottom: 0;
}

.tabs .tab {
  background: #e0e0e0;
  border: none;
  padding: 10px 18px;
  font-weight: 600;
  color: #333;
  cursor: pointer;
  transition: all 0.2s;
  border-radius: 2px 2px 0 0;
}

.tabs .tab.active {
  background: #7D8892;
  color: #fff;
}

.tabs .tab:hover {
  background: #d6d6d6;
}

/* === Bloque inferior con fondo gris === */
.property-search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  background: #EDEDED; /* 💡 gris solo aquí */
  padding: 15px 20px;
  border-radius: 0 0 5px 5px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.11);
  align-items: center;
  margin-top: -2px; /* 💡 une visualmente con las pestañas */
}

/* === Inputs y dropdowns === */
.property-dropdown-toggle {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 10px 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.property-dropdown-toggle:hover {
  border-color: #999;
}

/* === Botón buscar === */
.search-btn {
  background: #7D8892;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  cursor: pointer;
  transition: background 0.2s;
}

.search-btn:hover {
  background: #7D8892
}
.property-types {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 columnas */
  gap: 10px 20px; /* separación entre filas y columnas */
  margin-bottom: 15px;
  padding: 5px;
}

.property-types label {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f8f8f8;
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.property-types label:hover {
  background: #e9ecef;
}

.property-types input[type="checkbox"] {
  accent-color: #0066ff;
  transform: scale(1.1);
}

.property-types i {
  color: #444;
  font-size: 16px;
  min-width: 20px;
}

.property-types label span,
.property-types label i {
  pointer-events: none; /* evita que interfiera al hacer clic */
}


/* ==== LIMITAR ANCHO Y CENTRAR EL BUSCADOR ==== */
.property-search-wrapper {
  position: absolute;
  bottom: -9px;              /* ajusta altura sobre el banner */
  left: 50%;
  transform: translateX(-50%);
  padding: 25px 30px;
  border-radius: 10px;
  width: 85%;                /* 🔸 controla el ancho total (ajústalo a gusto) */
  max-width: 1100px;         /* 🔸 evita que crezca más allá de 1100px */
  margin: 0 auto;            /* centra horizontalmente */
  z-index: 10;
}

/* Opcional: si quieres que tenga un poco más de aire alrededor en pantallas pequeñas */
@media (max-width: 768px) {
  .property-search-wrapper {
    width: 95%;
    bottom: -20px;
    padding: 20px;
  }
}

/* --- Distribución más equilibrada de los dropdowns --- */
.property-search-form {
  display: flex;
  flex-wrap: nowrap;      /* Evita que salten de línea */
  gap: 7px;              /* Espaciado entre campos */
  align-items: center;
}

/* Tamaños específicos por campo */
#location-dropdown { flex: 1.2; }  /* Ubicación más ancho */
#property-type-dropdown { flex: 0.9; }  /* Tipo más estrecho */
#price-dropdown { flex: 1; }
#area-dropdown { flex: 1; }
#bedrooms-dropdown { flex: 1; }
#ref-dropdown { flex: 0.7; }  /* Ref pequeño */

/* Botón de búsqueda fijo */
.search-btn {
  flex: 0 0 50px;          /* ancho fijo */
  height: 50px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Ajuste visual para pantallas más pequeñas */
@media (max-width: 1200px) {
  .property-search-form {
    flex-wrap: wrap;       /* Permite que se acomoden si no caben */
  }
}


/* --- Mantener ancho mínimo de los menús desplegables --- */
.property-dropdown-menu {
  min-width: 260px; /* 🔸 Ajusta este valor a gusto (250–280px funciona bien) */
  width: auto;      /* Deja que crezca si el contenido lo necesita */
}

/* --- Para los más anchos, como "Tipo" --- */
#property-type-dropdown .property-dropdown-menu {
  min-width: 300px;
}

/* --- Centrar y alinear el contenido interno del dropdown --- */
.property-dropdown-menu p.dropdown-title {
  font-weight: 600;
  margin-bottom: 10px;
}

.property-dropdown-menu .btn-apply {
  margin-top: 10px;
}

/* --- Opcional: mejora visual --- */
.property-dropdown-menu {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  padding: 15px 20px;
}
/* --- Forzar ancho mínimo del menú de dormitorios --- */
#bedrooms-dropdown .property-dropdown-menu {
  min-width: 260px !important;  /* 🔸 Ajusta si quieres más ancho */
  width: auto !important;
  left: 0 !important;           /* Alineado al borde izquierdo del botón */
  right: auto !important;       /* Evita que se "pegue" al borde derecho */
}