/* ===========================
   CARDS INMUEBLES
=========================== */

.card {
  border-radius: 12px;
  transition: transform .2s ease, box-shadow .2s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
}

.card h5 {
  font-size: 1.05rem;
  margin-bottom: .25rem;
}

.card strong {
  color: #0d6efd;
}

/* ===========================
   FILTROS
=========================== */

.inmo-filters {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 2rem;
}

.inmo-filters .form-control,
.inmo-filters .form-select {
  border-radius: 8px;
}

/* ===========================
   GRID FIX
=========================== */

.inmo-grid .col-md-4 {
  display: flex;
}

.inmo-grid .card {
  width: 100%;
}

.thumb-photo {
  filter: grayscale(100%);
  transition: all .2s;
}

.thumb-photo.active {
  filter: grayscale(0%);
  border: 2px solid #0d6efd;
}
.thumb-photo:hover {
  filter: grayscale(0%);
  border: 2px solid #0d6efd;
}

/* 1. Eliminar las barras de color laterales por defecto */
.carousel-control-prev,
.carousel-control-next {
    width: 45px !important; 
    height: 45px !important;
    background: #65C3CA !important; 
    border-radius: 50% !important; 
    top: 50% !important;
    transform: translateY(-50%) !important; 
    opacity: 0 !important; 
    transition: all 0.3s ease !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 10px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 2. Mostrar solo al pasar el ratón sobre la tarjeta */
.card:hover .carousel-control-prev,
.card:hover .carousel-control-next {
    opacity: 1 !important;
}

/* 3. Forzar que el icono de la flecha sea blanco y pequeño */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 20px !important;
    height: 20px !important;
    filter: brightness(0) invert(1); /* Fuerza el color blanco si el tema lo cambia */
    background-size: 100% 100% !important; 
    margin: 0 !important;
}

/* 4. IMPORTANTE: Eliminar sombras o degradados oscuros de fondo */
.carousel-control-prev::before, 
.carousel-control-next::before,
.carousel-control-prev::after,
.carousel-control-next::after {
    display: none !important;
}

/* Contenedor principal */
.custom-pagination-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 5px !important; 
}

/* Estilo para cada número y flecha */
.custom-pagination-wrapper .page-numbers {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 14px !important;
    min-width: 40px !important;
    height: 40px !important;
    text-decoration: none !important;
    background-color: #ffffff !important;
    color: #65C3CA !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    transition: all 0.3s ease !important;
}

/* Número actual */
.custom-pagination-wrapper .page-numbers.current {
    background-color: #65C3CA !important;
    color: #ffffff !important;
    border-color: #65C3CA !important;
}

/* Efecto al pasar el ratón */
.custom-pagination-wrapper a.page-numbers:hover {
    background-color: #f0fbfc !important;
    border-color: #65C3CA !important;
}

/* AJUSTES PARA MÓVILES EXTREMOS */
@media (max-width: 480px) {
    .custom-pagination-wrapper {
        gap: 4px !important;
    }
    
    .custom-pagination-wrapper .page-numbers {
        padding: 6px 10px !important;
        min-width: 35px !important;
        height: 35px !important;
        font-size: 12px !important;
    }

    /* Ocultamos los puntos (...) si hay demasiadas páginas para ahorrar espacio */
    .custom-pagination-wrapper .dots {
        display: none !important;
    }
}