/*
 Theme Name:   Benaa Child Theme
 Theme URI:    http://themes.g5plus.net/benaa/
 Description:  Benaa Child Theme
 Author:       G5Theme
 Author URI:   http://g5plus.net
 Template:     benaa
 Version:      1.1
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags: 				two-columns, three-columns, left-sidebar, right-sidebar, custom-background, custom-header, custom-menu, editor-style, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready, accessibility-ready
 Text Domain: 		benaa
*/
/************************************************************************************
Put your custom CSS below this block :)
*************************************************************************************/

/* Personalizaciones Benaa */

.grecaptcha-badge { 
    visibility: hidden;
}
.single-property-area .property-tab .nav-tabs li a.active, .single-property-area .property-tab .nav-tabs li a:hover {
    background-color: #808080 !important;
	}
.top-bar-wrapper {
  background-color: #324552;
  color: #ffffff;
}

/* ================================================================= */
/* == CSS UNIFICADO PARA ENCABEZADO Y ESPECIFICACIONES (FINAL) == */
/* ================================================================= */

/* —— Estilos del listado (respetando paleta del tema) —— */
:root{
  --habihub-primary: var(--g5-color-accent, #0ea5a0);
  --habihub-muted: #6b7280;
  --habihub-border: rgba(0,0,0,.08);
  --habihub-card-bg: #fff;
}
.habi-wrap{max-width:1200px;margin:0 auto;padding:clamp(12px,2vw,24px);}

/* =================================================================== */
/* == CSS FINAL PARA FILTROS (MAQUETACIÓN GRID DE 2 FILAS) == */
/* =================================================================== */

/* 1. EL CONTENEDOR PRINCIPAL DEL FORMULARIO */
.habi-filtros {
    display: grid;
    /* Creamos 4 columnas de igual tamaño, lo que forzará 2 filas (4+4) */
    grid-template-columns: repeat(4, 1fr);    
    /* Aumentamos el espacio inferior con las propiedades */
    margin-bottom: 40px; 
	gap: 16px;
}

/* 2. ESTILO BASE CONSISTENTE PARA TODOS LOS ELEMENTOS */
/* Al ser más específicos, evitamos que el tema anule nuestros estilos. */
.habi-filtros input,
.habi-filtros select,
.habi-filtros button {
    /* Forma y borde */
    border: 1px solid #d1d5db;
    border-radius: 5px !important; /* Forzamos el radio de 5px */
    
    /* Tamaño y espaciado */
    width: 100%; /* Ocupa todo el espacio de su columna de la parrilla */
    height: 48px;
    padding: 10px 15px;
    box-sizing: border-box;
    
    /* Fondo y color */
    background-color: #f3f4f6 !important; /* Forzamos el fondo gris */
    color: #111827 !important;           /* Forzamos el texto oscuro */
	 

    /* Tipografía */
    font-size: 16px;
	line-height:1.05em;
    font-family: inherit;
    margin: 0;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* 3. ESTILOS AL HACER FOCO (CLICK) */
.habi-filtros input:focus,
.habi-filtros select:focus {
    outline: none;
    border-color: #eab308;
    box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.2);
}

/* 4. MEJORAS PARA LOS MENÚS DESPLEGABLES (SELECT) */
.habi-filtros select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 15px center;
    background-repeat: no-repeat;
    background-size: 1em;
    padding-right: 40px;
}

/* 5. ESTILOS ESPECÍFICOS PARA EL BOTÓN */
.habi-filtros button {
    background-color: #eab308 !important;
    color: #111827 !important;
    font-weight: 700;
    cursor: pointer;
    border-color: #eab308 !important;
}

.habi-filtros button:hover {
    background-color: #f59e0b !important;
    border-color: #f59e0b !important;
}

/* 6. DISEÑO RESPONSIVO PARA TABLETS Y MÓVILES */
@media (max-width: 900px) {
    .habi-filtros {
        /* En pantallas más pequeñas, pasamos a 2 columnas */
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 500px) {
    .habi-filtros {
        /* En móviles, pasamos a 1 sola columna */
        grid-template-columns: 1fr;
    }
}

/* 1. Damos más espacio a la derecha en los menús desplegables
      para que el texto no choque con la flecha. */
.habi-filtros select {
    padding-right: 45px !important; /* Aumentamos de 40px a 45px */
}

/* 2. Centramos perfectamente el texto del botón "Filtrar"
      usando Flexbox. */
.habi-filtros button {
    display: flex;
    align-items: center;    /* Centrado vertical */
    justify-content: center; /* Centrado horizontal */
}

/* Listado de Propiedades */

.habi-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:18px;
}
@media (max-width:800px){
  .habi-grid{grid-template-columns:1fr;}
}
.habi-card{
  background:var(--habihub-card-bg);border:1px solid var(--habihub-border);
  border-radius:16px;overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 6px 18px rgba(0,0,0,.06);transition:transform .18s ease, box-shadow .18s ease;
}
.habi-card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.10);}
.habi-thumb{aspect-ratio:16/10;background:#f5f5f5;position:relative;overflow:hidden;}
.habi-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.habi-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px;}
.habi-title{margin:0;font-size:1.05rem;line-height:1.35;}
.habi-meta{display:flex;gap:10px;flex-wrap:wrap;color:var(--habihub-muted);font-size:.92rem;}
.habi-meta span{display:inline-flex;align-items:center;gap:6px;}
.habi-badges{display:flex;gap:8px;flex-wrap:wrap;font-size:.85rem;color:var(--habihub-muted);}
.habi-price{margin-top:auto;font-weight:700;font-size:1.1rem;color:var(--habihub-primary);}
.habi-card a{text-decoration:none;color:inherit;display:flex;flex-direction:column;height:100%;}
.habi-pager{display:flex;justify-content:center;gap:8px;margin-top:22px;flex-wrap:wrap;}
.habi-pager a, .habi-pager span{
  border:1px solid var(--habihub-border);padding:8px 12px;border-radius:10px;text-decoration:none;color:inherit;
}
.habi-pager .is-active{background:var(--habihub-primary);color:#fff;border-color:var(--habihub-primary);}
	:root{
  --accent: #dba800; /* dorado */
  --text-900: #222;
  --text-600: #6b7280;
  --panel: #fff;
  --stripe: #111;
}
.card-prop{
  background:var(--panel);
  border:1px solid rgba(0,0,0,.08);
  border-radius:5px;
  overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}
.card-link{color:inherit;text-decoration:none;display:flex;flex-direction:column;height:100%;}
.card-media{position:relative;aspect-ratio:16/9;background:#eee;overflow:hidden;}
.card-media img{width:100%;height:100%;object-fit:cover;display:block;}
.card-media-top{
  position:absolute;left:0;right:0;top:10px;
  display:flex;justify-content:space-between;gap:8px;padding:0 14px;font-weight:600;
  color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35);
}
.card-body{padding:18px 20px 10px;}
.card-category{color:var(--accent);font-weight:800;letter-spacing:.02em;margin-bottom:6px;text-transform:uppercase;}
.card-title{margin:0 0 6px;font-size:1.75rem;line-height:1.2;color:var(--text-900);}
.card-subtitle{color:var(--text-600);margin-bottom:14px;font-size:1.05rem;}
.card-specs{display:grid;grid-template-columns:repeat(4,auto);gap:14px 22px;align-items:center;}
@media (max-width:900px){.card-specs{grid-template-columns:repeat(2,auto);}}
.spec{display:inline-flex;align-items:center;gap:8px;color:var(--text-600);font-weight:600;}
.spec .ico{width:22px;height:22px;fill:var(--accent);}
.card-footer{
  margin-top:14px;display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(85deg,var(--accent) 0 62%, var(--stripe) 62% 100%);
  color:#fff;padding:14px 20px;font-weight:800;letter-spacing:.01em;
}
.badge-status{background:transparent;}
.price{font-size:1.6rem;}

/* —— Estilos de propiedad individual (respetando paleta del tema) —— */

/* 1. CONTENEDOR PRINCIPAL */
.property-header-wrapper {
    max-width: 100%;
    margin-bottom: 30px;
}

/* 2. CONTENEDOR FLEX INTERNO */
.property-header-flex {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e5e7eb;
}

/* Estructura de Filas */
.header-flex-row { width: 100%; }
.top-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 8px;
}
.property-main-title {
    font-size: clamp(2rem, 5vw, 2.8rem);
    font-weight: 800;
    color: #111827;
    margin: 0;
    line-height: 1.1;
    width: 100%;
}
.bottom-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
}

/* 3. SECCIÓN DE ESPECIFICACIONES (REGLA ÚNICA Y CORRECTA) */
.property-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 30px 40px;
    margin-top: 25px;
    flex-grow: 1; /* ¡LA REGLA CLAVE, AHORA SIN CONFLICTOS! */
}

/* Un solo ítem de especificación */
.spec-item-new {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* El círculo del icono */
.spec-icon-wrapper {
    flex-shrink: 0;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: 1px solid #eab308;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* El icono de Font Awesome (<i>) dentro del círculo */
.spec-icon-wrapper .fa {
    font-size: 28px; /* Controlamos el tamaño del icono con font-size */
    color: #eab308;   /* Controlamos el color con la propiedad color */
}

/* El texto de la especificación */
.spec-text-wrapper {
    display: flex;
    flex-direction: column;
}
.spec-value {
    font-size: 1.2rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.3;
}
.spec-label {
    font-size: 0.7rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* 4. SECCIÓN DEL PRECIO Y ACCIONES */
.property-header-aside {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    flex-shrink: 0;
}

#habihub-property-price {
    font-size: clamp(2.2rem, 5vw, 2.8rem) !important;
    font-weight: 700 !important;
    color: #111827 !important;
}

.property-actions {
    display: flex;
    gap: 12px;
}
.property-actions a {
    color: #9ca3af;
}

/* 5. AJUSTES RESPONSIVOS */
@media (max-width: 850px) {
    .property-header-wrapper {
        max-width: 100%;
    }
    .bottom-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 25px;
    }
    .property-header-aside {
        align-items: flex-start;
        text-align: left;
    }
}

/* --- ESTILOS PARA LA NUEVA GALERÍA DE IMÁGENES --- */

.property-gallery-container {
    width: 100%;
    margin-bottom: 40px;
}

/* Estilos para la galería principal */
.gallery-top {
    width: 100%;
    height: 500px; /* Puedes ajustar esta altura */
    margin-bottom: 10px;
    border-radius: 8px;
    overflow: hidden;
}

.gallery-top .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Estilos para las flechas de navegación */
.gallery-top .swiper-button-next,
.gallery-top .swiper-button-prev {
    background-color: rgba(255, 255, 255, 0.9);
    width: 44px;
    height: 44px;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    transition: background-color 0.2s ease;
}
/* Estilo del icono de la flecha */
.gallery-top .swiper-button-next::after,
.gallery-top .swiper-button-prev::after {
    font-size: 18px;
    font-weight: 800;
    color: #333;
}
.gallery-top .swiper-button-next:hover,
.gallery-top .swiper-button-prev:hover {
    background-color: rgba(255, 255, 255, 1);
}
.gallery-top .swiper-button-prev {
    left: 20px;
}
.gallery-top .swiper-button-next {
    right: 20px;
}

/* Estilos para la galería de miniaturas */
.gallery-thumbs {
    height: 100px; /* Altura de las miniaturas */
    box-sizing: border-box;
    padding: 0;
}

.gallery-thumbs .swiper-slide {
    width: 25%;
    height: 100%;
    opacity: 0.5; /* Las miniaturas no seleccionadas están semi-transparentes */
    transition: opacity 0.3s ease;
    cursor: pointer;
    border-radius: 6px;
    overflow: hidden;
}

.gallery-thumbs .swiper-slide:hover {
    opacity: 1;
}

/* La miniatura activa tiene opacidad completa */
.gallery-thumbs .swiper-slide-thumb-active {
    opacity: 1;
}

.gallery-thumbs .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* --- ESTILOS PARA EL CONTENIDO PRINCIPAL DE LA PROPIEDAD --- */

.section-title {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 20px;
    border-bottom: 2px solid #f3f4f6; /* Línea sutil debajo del título */
    padding-bottom: 10px;
}

.property-main-content-area {
    display: grid;
    grid-template-columns: 2fr 1fr; /* Columna de descripción 2/3, sidebar 1/3 */
    gap: 50px; /* Espacio entre columnas */
    margin-top: 40px;
}

.property-description {
    line-height: 1.7;
    color: #374151; /* Gris oscuro para el texto */
}

.sidebar-widget {
    background-color: #f9fafb; /* Fondo ligeramente gris para el sidebar */
    padding: 30px;
    border-radius: 8px;
}

.property-features-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.property-features-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #4b5563;
}

.property-features-list svg {
    flex-shrink: 0;
    stroke: #10b981; /* Verde para el icono de check */
}


/* --- Diseño Responsivo para Móviles --- */
@media (max-width: 800px) {
    .property-main-content-area {
        grid-template-columns: 1fr; /* Una sola columna en pantallas pequeñas */
        gap: 40px;
    }
}
/* --- ESTILOS PARA LA SECCIÓN DE DIRECCIÓN --- */

.property-address-section {
    margin-top: 30px;
    border: 1px solid #e5e7eb; /* Borde sutil alrededor de toda la sección */
    border-radius: 8px;
    overflow: hidden; /* Para que el radio del borde afecte a la cabecera */
}

.address-section-header {
    display: flex;
    justify-content: space-between; /* Título a la izq, enlace a la dcha */
    align-items: center;
    background-color: #2d3748; /* Fondo oscuro */
    color: #ffffff;
    padding: 15px 30px;
}

.section-title-dark {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    color: #ffffff;
}

.google-maps-link {
    color: #eab308; /* Color dorado/amarillo */
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color 0.2s ease;
}
.google-maps-link:hover {
    color: #ffffff;
}
.google-maps-link svg {
    stroke: #eab308;
    transition: stroke 0.2s ease;
}
.google-maps-link:hover svg {
    stroke: #ffffff;
}

/* Contenedor de los detalles (con Grid) */
.address-section-details {
    display: grid;
    /* Dos columnas de igual tamaño */
    grid-template-columns: repeat(2, 1fr);
    gap: 25px 30px; /* Espacio vertical y horizontal */
    background-color: #ffffff;
    padding: 30px;
}

.detail-item {
    display: flex;
    flex-direction: column; /* Etiqueta arriba, valor abajo */
    gap: 5px;
}

.detail-item strong {
    font-weight: 700;
    color: #4b5563; /* Gris oscuro */
    font-size: 0.9rem;
}

.detail-item span {
    color: #6b7280; /* Gris más claro */
    font-size: 1rem;
}

/* --- Diseño Responsivo para Móviles --- */
@media (max-width: 600px) {
    .address-section-details {
        grid-template-columns: 1fr; /* Una sola columna en pantallas pequeñas */
    }
    .address-section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
}


/* --- ESTILOS PARA LA SECCIÓN DE CONTACTO --- */

.property-contact-section {
    margin-top: 30px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}

.contact-section-header {
    background-color: #2d3748;
    padding: 15px 30px;
}

/* Reutilizamos la clase .section-title-dark que ya creamos */
.contact-section-header .section-title-dark {
    padding-bottom: 0;
    border-bottom: none;
}


/* --- ESTILOS PARA LA SECCIÓN DE CONTACTO (VERSIÓN FLEXBOX) --- */

.contact-section-content {
    display: flex; /* Usamos Flexbox para las columnas */
    gap: 40px;     /* Espacio entre las columnas */
	flex-wrap: wrap;
    background-color: #ffffff;
    padding: 30px;
}

/* Columna Izquierda: Info del Agente */
.agent-contact-info {
    flex: 1 1 320px; /* Base de 320px, puede crecer y encogerse */
    max-width: 400px;
}

/* Columna Derecha: Formulario de Contacto */
.contact-form-wrapper {
    flex: 1 1 60%; /* Ocupa el espacio restante */
}

/* --- Ajuste responsivo para Flexbox --- */
@media (max-width: 850px) {
    .contact-section-content {
        flex-direction: column; /* Apila las columnas verticalmente en móviles */
    }
}

.agent-photo {
    max-width: 150px;
    height: auto;
    border-radius: 50%;
    margin: 0 auto 20px auto;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.agent-name {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 5px 0;
}

.agent-title {
    font-size: 0.9rem;
    color: #6b7280;
    margin: 0 0 25px 0;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 25px;
}

.agent-details-list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 30px;
}
.agent-details-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #4b5563;
    font-size: 0.9rem;
}
.agent-details-list li svg {
    flex-shrink: 0;
    stroke: #eab308; /* Color dorado */
}

.btn-agent-properties {
    display: block;
    width: 100%;
    background-color: #eab308;
    color: #111827;
    text-decoration: none;
    padding: 12px 20px;
    border-radius: 6px;
    font-weight: 700;
    text-align: center;
    transition: background-color 0.2s ease;
}
.btn-agent-properties:hover {
    background-color: #f59e0b; /* Dorado más intenso */
    color: #111827;
}

/* Columna Derecha: Formulario */
.contact-form-wrapper .wpcf7-form input[type="text"],
.contact-form-wrapper .wpcf7-form input[type="email"],
.contact-form-wrapper .wpcf7-form input[type="tel"],
.contact-form-wrapper .wpcf7-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    margin-bottom: 15px;
}
.contact-form-wrapper .wpcf7-form input[type="submit"] {
    width: 100%;
    padding: 12px 20px;
    border: none;
    border-radius: 6px;
    background-color: #eab308;
    color: #111827;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.contact-form-wrapper .wpcf7-form input[type="submit"]:hover {
    background-color: #f59e0b;
}

/* --- Diseño Responsivo --- */
@media (max-width: 850px) {
    .contact-section-content {
        grid-template-columns: 1fr; /* Una sola columna */
    }
}