/* ==========================================================================
   Solo Baja · UI del listado Flexmls IDX
   Barra de resultados, paginador y legend.

   Los selectores están adaptados al markup real de flexmls-idx v3.18.2
   (views/v2/fmcSearchResults.php). Ojo: el paginador NO usa .flexmls-pagination
   sino .flexmls_connect__sr_pagination, y el disclaimer es
   .flexmls_connect__idx_disclosure_text. Todo va acotado bajo el wrapper del
   widget para no tocar otros widgets IDX que haya en la página.
   ========================================================================== */

:root{
	--sb-yellow:#FFD000;
	--sb-yellow-soft:#FFE86A;
	--sb-gold:#F2C604;
	--sb-ink:#3F3F3E;
	--sb-mute:#8A8A86;
	--sb-line:#E6E6E1;
}

/* --------------------------------------------------------------------------
   Barra: contador + filtros
   -------------------------------------------------------------------------- */
.flexmls_connect__search_results_v2 .flexmls-count-and-filters-wrapper{
	display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
	gap:24px; margin:0 0 28px; padding:20px 26px;
	background:#fff; border:1px solid var(--sb-line); border-top:3px solid var(--sb-yellow);
}
/* El plugin maqueta esta barra con floats + clearfix:
     .flexmls-count-wrapper{float:left}  .flexmls-filters-wrapper{float:right}
     .flexmls-count-and-filters-wrapper:before/:after{content:"";display:table}
   Al pasar el contenedor a flex, esos dos pseudo-elementos se convierten en
   items flex y space-between los reparte, empujando el contenido real hacia
   el centro. Se anulan junto con los floats. */
.flexmls_connect__search_results_v2 .flexmls-count-and-filters-wrapper::before,
.flexmls_connect__search_results_v2 .flexmls-count-and-filters-wrapper::after{
	display:none;
}
.flexmls_connect__search_results_v2 .flexmls-count-wrapper,
.flexmls_connect__search_results_v2 .flexmls-filters-wrapper{ float:none; }
/* El margen del plugin duplicaría el gap del flex. */
.flexmls_connect__search_results_v2 .flexmls-filters-wrapper > div{ margin-right:0; }

.flexmls_connect__search_results_v2 .flexmls-matches-count{
	font-size:14px; color:var(--sb-mute); letter-spacing:.01em;
}
/* El <strong> lo inyecta el filtro PHP del plugin (sbmls_reescribir_listado). */
.flexmls_connect__search_results_v2 .flexmls-matches-count strong{
	font-size:30px; font-weight:600; color:#000; line-height:1; margin-right:6px;
}
.flexmls_connect__search_results_v2 .flexmls-filters-wrapper{
	display:flex; flex-wrap:wrap; align-items:center; gap:12px;
}
.flexmls_connect__search_results_v2 .listings-per-page-wrapper,
.flexmls_connect__search_results_v2 .sort-by-wrapper{
	display:flex; align-items:center; gap:10px;
	background:#FAFAF8; border:1px solid var(--sb-line); padding:7px 8px 7px 14px;
}
.flexmls_connect__search_results_v2 .listings-per-page-wrapper label,
.flexmls_connect__search_results_v2 .sort-by-wrapper label{
	margin:0; font-size:12px; font-weight:500; letter-spacing:.04em;
	text-transform:uppercase; color:var(--sb-mute); white-space:nowrap;
}
.flexmls_connect__search_results_v2 .flexmls-filters-wrapper select{
	appearance:none; -webkit-appearance:none; border:0; border-radius:0;
	box-shadow:inset 0 0 0 1px #DEDED8;
	background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' fill='none' stroke='%233F3F3E' stroke-width='1.4'/></svg>") no-repeat right 12px center;
	padding:9px 34px 9px 14px; height:auto; min-height:0;
	font:500 14px/1.2 inherit; color:var(--sb-ink); cursor:pointer;
}
.flexmls_connect__search_results_v2 .flexmls-filters-wrapper select:hover{
	box-shadow:inset 0 0 0 1px var(--sb-ink);
}
.flexmls_connect__search_results_v2 .flexmls-filters-wrapper select:focus{
	box-shadow:inset 0 0 0 2px var(--sb-yellow); outline:none;
}
.flexmls_connect__search_results_v2 .sort-by-wrapper select{ min-width:210px; }

@media (max-width:640px){
	.flexmls_connect__search_results_v2 .flexmls-count-and-filters-wrapper{
		flex-direction:column; align-items:stretch;
	}
	.flexmls_connect__search_results_v2 .flexmls-filters-wrapper{
		flex-direction:column; align-items:stretch;
	}
	.flexmls_connect__search_results_v2 .listings-per-page-wrapper,
	.flexmls_connect__search_results_v2 .sort-by-wrapper{ justify-content:space-between; }
	.flexmls_connect__search_results_v2 .flexmls-filters-wrapper select{ flex:1; }
}

/* --------------------------------------------------------------------------
   Paginador
   El plugin emite un solo <div> con los enlaces sueltos. El filtro PHP lo
   envuelve en .sb-pager y añade el resumen "Mostrando X–Y de N".
   -------------------------------------------------------------------------- */
.flexmls_connect__search_results_v2 .sb-pager{
	display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
	gap:16px; margin:44px 0 0; padding:26px 0 0; border-top:1px solid var(--sb-line);
}
.flexmls_connect__search_results_v2 .sb-pager__resumen{
	font-size:14px; color:var(--sb-mute);
}
.flexmls_connect__search_results_v2 .flexmls_connect__sr_pagination{
	display:flex; align-items:center; gap:8px; margin-left:auto;
}
.flexmls_connect__search_results_v2 .flexmls_connect__sr_pagination a,
.flexmls_connect__search_results_v2 .flexmls_connect__sr_pagination span{
	display:flex; align-items:center; justify-content:center;
	min-width:40px; height:40px; padding:0 14px;
	font-size:14px; font-weight:500; color:var(--sb-ink);
	border:1px solid var(--sb-line); background:#fff; text-decoration:none;
	transition:background .15s ease, border-color .15s ease;
}
.flexmls_connect__search_results_v2 .flexmls_connect__sr_pagination a:hover{
	border-color:var(--sb-ink); color:#000;
}
.flexmls_connect__search_results_v2 .flexmls_connect__sr_pagination .current{
	background:var(--sb-yellow); border-color:var(--sb-yellow); color:#000; font-weight:600;
}
.flexmls_connect__search_results_v2 .flexmls_connect__sr_pagination a.next,
.flexmls_connect__search_results_v2 .flexmls_connect__sr_pagination a.prev{
	font-weight:600; color:#000; border-color:var(--sb-ink);
}
.flexmls_connect__search_results_v2 .flexmls_connect__sr_pagination a.next:hover,
.flexmls_connect__search_results_v2 .flexmls_connect__sr_pagination a.prev:hover{
	background:var(--sb-yellow); border-color:var(--sb-yellow);
}
.flexmls_connect__search_results_v2 .flexmls_connect__sr_pagination .disabled{
	color:#C3C3BE; border-color:#ECECE7; cursor:default;
}
/* Los "..." de salto entre páginas van sueltos, sin caja. */
.flexmls_connect__search_results_v2 .flexmls_connect__sr_pagination .sb-pager__salto{
	border:0; background:none; min-width:0; padding:0 4px; color:var(--sb-mute);
}

@media (max-width:640px){
	.flexmls_connect__search_results_v2 .sb-pager{ flex-direction:column; align-items:stretch; }
	.flexmls_connect__search_results_v2 .flexmls_connect__sr_pagination{
		margin-left:0; justify-content:center;
	}
}

/* --------------------------------------------------------------------------
   Legend / disclaimer
   -------------------------------------------------------------------------- */
.flexmls_connect__search_results_v2 hr{ display:none; }

.flexmls_connect__search_results_v2 .flexmls_connect__idx_disclosure_text{
	margin:40px 0 0; padding:34px 20px 14px;
	border-top:1px solid var(--sb-line);
	display:flex; flex-direction:column; align-items:center; gap:14px;
	text-align:center;
	max-width:820px; margin-inline:auto;
	font-size:12.5px; line-height:1.75; color:var(--sb-mute); text-wrap:pretty;
}
.flexmls_connect__search_results_v2 .flexmls_connect__idx_disclosure_text::before{
	content:""; width:56px; height:2px; background:var(--sb-yellow); flex:none;
}
.flexmls_connect__search_results_v2 .fbs-branding{
	padding:0 20px 30px; font-size:12.5px; color:var(--sb-mute);
}
.flexmls_connect__search_results_v2 .fbs-branding a{
	font-weight:600; color:var(--sb-ink); text-decoration:none;
	border-bottom:2px solid var(--sb-yellow); padding-bottom:1px;
}
.flexmls_connect__search_results_v2 .fbs-branding a:hover{ color:#000; }

/* --------------------------------------------------------------------------
   Badge de estado en las tarjetas

   Va con la cadena completa hasta .flexmls-quick-details (0-4-0) y no con
   `.flexmls_connect__search_results_v2 .flexmls-status` (0-2-0) porque el tema
   pisa el color: themes/shina/style.css:1088 impone `color:#F2C604` sobre
   .flexmls-status-active a 0-3-0, y flexmls-idx hace lo propio con el resto de
   estados (active-under-contract, coming-soon, expired, hold, withdrawn…).
   Con 0-4-0 gana sin depender del orden de carga de las hojas y sin !important.
   -------------------------------------------------------------------------- */
.flexmls_connect__search_results_v2 .flexmls-listing .flexmls-quick-details .flexmls-status{
	display:inline-block; padding:2px 8px; background:var(--sb-gold);
	color:#fff; font-size:11px; font-weight:600; letter-spacing:.06em;
	text-transform:uppercase;
}
