/*
 * homming-be.css — Capa CSS de adaptación del plugin homming al tema hijo
 *
 * Principios:
 *  - Solo CSS. No se toca wp-plugin/.
 *  - Todos los valores usan var(--acc), var(--fh), var(--fu), var(--card-radius), etc.
 *  - Cada sección lleva el selector del plugin que sobreescribe.
 *
 * Referencia de selectores auditados:
 *   homming.css  → fuente, colores, layout de cards, botones, checkout, modal
 *   publications-list-template.php → .list-page, .list-header, .card, .image, .content
 *   publication-template.php → .details-container, .details-card, .details-card--booking
 *   checkout-step-*.php → .checkout-container, inputs, selects
 */


/* ══════════════════════════════════════════════════════════════
   1. BRIDGE DE VARIABLES
   Conecta --primary-900 / --primary-500 del plugin con --acc del tema.
   El plugin usa estos tokens en: .details-card--booking, .content__button--green,
   .details-characteristics__item-icon, .pagination, interacciones.
   ══════════════════════════════════════════════════════════════ */

:root {
  --primary-900: var(--acc);
  --primary-500: color-mix(in srgb, var(--acc) 35%, white);
}


/* ══════════════════════════════════════════════════════════════
   2. RESET TIPOGRÁFICO
   El plugin aplica "Roboto" con este selector de alta especificidad:
     h1,h2,h3,h4,h5,h6,a,p,span,input,textarea { font-family:"Roboto" }
     label,ol,li { font-family:"Roboto" }
   Lo revertimos al sistema del tema.
   ══════════════════════════════════════════════════════════════ */

/* Todos los elementos del plugin → fuente de interfaz */
.list-page *,
.details-container *,
.checkout-container *,
.checkout-confirmation-page *,
.filtering-search-bar * {
  font-family: var(--fu);
}

/* Headings → fuente de títulos del look/cliente */
.list-page h1, .list-page h2, .list-page h3, .list-page h4,
.details-container h1, .details-container h2, .details-container h3,
.checkout-container h1, .checkout-container h2, .checkout-container h3,
.checkout-confirmation-page h1, .checkout-confirmation-page h2,
.checkout-confirmation-page h3 {
  font-family: var(--fh);
}


/* ══════════════════════════════════════════════════════════════
   3. FONDO GENERAL
   El plugin hardcodea: body:has(.list-page) { background: var(--neutral-50) }
   ══════════════════════════════════════════════════════════════ */

body:has(.list-page) {
  background-color: var(--body-bg);
}


/* ══════════════════════════════════════════════════════════════
   4. BARRA DE FILTROS — patrón del prototipo
   Barra plana fondo beige · label FILTRAR · chips con borde
   propio · labels ocultos (el select ya describe el campo)
   · botón oscuro APLICAR al extremo derecho.
   ══════════════════════════════════════════════════════════════ */

/* Barra: plana, fondo beige, bordes sup/inf, sin elevación */
#publication-filter-form {
  background: var(--body-bg2) !important;
  border-top: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border) !important;
  border-left: none !important;
  border-right: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin-bottom: 40px !important;
  box-shadow: none !important;
}

/* Fila flex: centrada verticalmente, gap entre chips, padding lateral */
.list-header {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  min-height: 56px !important;
  padding: 0 20px !important;
}

/* Etiqueta FILTRAR a la izquierda */
.list-header::before {
  content: 'FILTRAR' !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  color: var(--text-mid) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  font-family: var(--fu) !important;
  margin-right: 4px !important;
}

/* Cada chip: inline, no crece, sin divisor — borde propio del control */
.list-header__input {
  display: flex !important;
  align-items: center !important;
  flex-direction: row !important;
  flex: 0 0 auto !important;
  padding: 0 !important;
  border-right: none !important;
  gap: 0 !important;
  background: transparent !important;
}

/* Label: oculto visualmente — el primer option/placeholder es suficiente */
.list-header__input label,
.list-header__input .dropdown-label {
  display: none !important;
}

/* Select: chip rectangular con borde, bg blanco, flecha nativa */
.list-header__input select {
  border: 1px solid var(--border) !important;
  background: var(--body-bg) !important;
  border-radius: 2px !important;
  padding: 7px 32px 7px 12px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--text) !important;
  font-family: var(--fu) !important;
  box-shadow: none !important;
  outline: none !important;
  cursor: pointer !important;
  height: auto !important;
  appearance: auto !important;
  -webkit-appearance: auto !important;
  width: auto !important;
  min-width: 130px !important;
}
.list-header__input select:hover,
.list-header__input select:focus {
  border-color: var(--text-mid) !important;
  outline: none !important;
}

/* Input de texto (¿Dónde?): mismo chip que el select */
.list-header__input input[type="text"] {
  border: 1px solid var(--border) !important;
  background: var(--body-bg) !important;
  border-radius: 2px !important;
  padding: 7px 12px !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: var(--text) !important;
  font-family: var(--fu) !important;
  box-shadow: none !important;
  outline: none !important;
  width: 160px !important;
  height: auto !important;
}
.list-header__input input[type="text"]::placeholder {
  color: var(--text-mid) !important;
}
.list-header__input input[type="text"]:focus {
  border-color: var(--text-mid) !important;
  outline: none !important;
}

/* Spacer: empuja el botón a la derecha */
.list-header .button-container.list-filter {
  margin-left: auto !important;
}

/* Contenedor del botón submit */
.list-header .button-container:not(.list-filter) {
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  background: transparent !important;
}

/* Botón APLICAR: oscuro, igual que en el prototipo */
.list-header .button-container .content__button,
.list-header .button-container .content__button--green {
  background: var(--text) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 2px !important;
  padding: 8px 20px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  white-space: nowrap !important;
  height: auto !important;
  line-height: 1 !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: opacity .15s !important;
}
.list-header .button-container .content__button:hover,
.list-header .button-container .content__button--green:hover {
  opacity: .8 !important;
}

/* Formulario de búsqueda standalone [search_form] */
.filtering-search-bar {
  background: var(--body-bg2);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  box-shadow: 0 4px 18px rgba(0,0,0,.07);
}


/* ══════════════════════════════════════════════════════════════
   5. MODAL DE FILTROS AVANZADOS — #list-filter
   ══════════════════════════════════════════════════════════════ */

.modal__header {
  background: var(--body-bg);
  border-bottom-color: var(--border);
}

/* El h3 del modal usa la tipografía del look */
.modal__header h3 {
  font-family: var(--fh);
  font-weight: 400;
  font-size: 1.2rem;
  color: var(--text);
}

.modal__footer {
  background: var(--body-bg);
  border-top-color: var(--border);
}

.modal .filter {
  border-bottom-color: var(--border);
}

/* Etiquetas de grupo de filtros */
.modal .filter__title {
  font-family: var(--fu);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--text);
}

/* Radio-pills en grupos de filtro */
.form-control-set label {
  border-color: var(--border);
  border-radius: var(--btn-radius);
  color: var(--text);
}

.form-control-set label:has(input:checked) {
  background: var(--acc);
  border-color: var(--acc);
  color: #ffffff;
  font-weight: 600;
}

/* Multiselect de extras */
.modal .custom-multiselect__option input[type="checkbox"] {
  accent-color: var(--acc);
}

.modal .custom-multiselect__option input[type="checkbox"]:checked + span {
  color: var(--acc);
}

.modal .custom-multiselect__selected {
  border-color: var(--border);
  border-radius: var(--btn-radius);
  background: var(--body-bg);
}

.modal .custom-multiselect__dropdown {
  border-color: var(--border);
  border-radius: var(--card-radius);
  box-shadow: 0 8px 24px rgba(0,0,0,.10);
}

.modal .custom-multiselect__option:hover {
  background: var(--body-bg2);
}

.modal .custom-multiselect__tag {
  border-color: var(--border);
  background: var(--body-bg2);
  border-radius: var(--btn-radius);
  color: var(--text);
}


/* ══════════════════════════════════════════════════════════════
   6. GRID DEL LISTADO
   El plugin usa flex-direction:column (1 tarjeta por fila).
   Lo convertimos al grid de 3 columnas del prototipo.
   ══════════════════════════════════════════════════════════════ */

/* El layout del grid se controla via inline styles en publications-list.php
   (display:flex!important con gap). Aquí definimos el ancho de cada tarjeta. */

.list-container {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 20px !important;
  width: 100% !important;
  padding: 0 !important;
  max-width: none !important;
  box-sizing: border-box !important;
  align-items: stretch !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
}

/* Cada tarjeta: exactamente 1/3 del contenedor menos los gaps */
.list-container > .card {
  flex: 0 0 calc(33.333% - 14px) !important;
  max-width: calc(33.333% - 14px) !important;
  min-width: 0 !important;
  overflow: hidden !important;
  flex-direction: column !important;
}

/* Tablet (≤ 768px): 2 columnas */
@media (max-width: 768px) {
  .list-container > .card {
    flex: 0 0 calc(50% - 10px) !important;
    max-width: calc(50% - 10px) !important;
  }
}

/* Móvil (≤ 480px): 1 columna */
@media (max-width: 480px) {
  .list-container > .card {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   7. TARJETAS DEL LISTADO
   Transformación del layout horizontal del plugin →
   layout vertical del prototipo (.card-img / .card-body).
   Se mantienen los data-id y clases JS (.image, .publication-images__*).
   ══════════════════════════════════════════════════════════════ */

/* Layout: de row a column
   !important necesario: el plugin + global-styles-inline-css de TwentyTwentyFive
   tienen .card { flex-direction: row } que gana en cascada por ser inline. */
.list-container .card {
  flex-direction: column !important;
  border-radius: var(--card-radius);
  border: 1px solid var(--border);
  background: var(--body-bg);
  box-shadow: none;
  transition: border-color .2s, box-shadow .2s, transform .2s;
  overflow: hidden;
}

.list-container .card:hover {
  border-color: var(--acc);
  box-shadow: 0 6px 28px rgba(0,0,0,.10);
  transform: translateY(-2px);
}

/* Imagen — ancho completo, altura fija (.card-img del prototipo) */
.list-container .card .image {
  width: 100% !important;
  height: 240px !important;
  background: var(--body-bg2);
  flex-shrink: 0;
  overflow: hidden;
}

.list-container .card .image img.publication-images__placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .45s;
}

/* GIF de carga en las cards del listado (feedback Ana, punto 9) —
   sin esto queda sin tamaño ni posición, "mal" dentro de la card
   cuando la propiedad no tiene foto o mientras carga.
   Mismo patrón que .details-images__image img.publication-images__loading. */
.list-container .card .image img.publication-images__loading {
  width: 32px !important;
  height: 32px !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  object-fit: initial !important;
  max-width: none !important;
}

.list-container .card:hover .image img.publication-images__placeholder {
  transform: scale(1.05);
}

/* Contenido — (.card-body del prototipo) */
.list-container .card .content {
  width: 100% !important;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Título → .card-title (el plugin usa un div, no h2) */
.list-container .card .content .card-title,
.list-container .card .content h2 {
  font-family: var(--fu);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  margin: 0 0 4px;
}

/* Localización → .card-loc */
.list-container .card .content .card-loc {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-mid);
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Precio → .card-price */
.list-container .card .price {
  font-family: var(--fh);
  font-size: 24px;
  font-weight: 600;
  color: var(--acc);
  line-height: 1;
  margin-bottom: 4px;
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.list-container .card .price .amount {
  font-family: var(--fh);
  font-size: 24px;
  font-weight: 600;
  color: var(--acc);
}

.list-container .card .price .currency {
  font-family: var(--fu);
  font-size: 12px;
  font-weight: 400;
  color: var(--text-mid);
}

/* Features → .card-feats */
.list-container .card .features {
  display: flex;
  gap: 12px;
  font-size: 11px;
  color: var(--text-mid);
  padding-top: 10px;
  border-top: 1px solid var(--border);
  margin-top: 8px;
  flex-wrap: wrap;
  font-family: var(--fu);
}

/* Chips de feature: sin fondo, plain text */
.list-container .card .features .feature {
  background: transparent;
  border-radius: 0;
  padding: 0;
  color: var(--text-mid);
  font-size: 11px;
}

/* Descripción: discreta, truncada */
.list-container .card .description {
  font-size: 12px;
  color: var(--text-mid);
  margin: 6px 0;
}

/* Separador antes del CTA */
.list-container .card .content__separator {
  background: var(--border);
  height: 1px;
  border: none;
  width: calc(100% + 4rem);
  margin-left: -2rem;
  margin-bottom: 11px;
}

/* CTA → .card-cta (estilo del prototipo) */
.list-container .card .content__button {
  display: block;
  width: 100%;
  text-align: center;
  padding: 9px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .6px;
  font-family: var(--fu);
  cursor: pointer;
  transition: all .15s;
  border-radius: var(--btn-radius);
}

/* Tarjetas similares (vertical, en detalle) */
.similar-publication.card {
  flex-direction: column;
  border-radius: var(--card-radius);
  border: 1px solid var(--border);
  box-shadow: none;
  background: var(--body-bg);
}

.similar-publication .image {
  width: 100%;
  height: 160px;
}

.similar-publication .content {
  width: 100%;
}

/* Estado vacío del listado */
.list-container--empty h2 {
  font-family: var(--fh);
  color: var(--text);
  font-weight: 400;
}

.list-container--empty p {
  color: var(--text-mid);
}


/* ══════════════════════════════════════════════════════════════
   8. BOTONES GLOBALES
   Plugin: .content__button--green usa --primary-900 (#8aeabf) con
   texto oscuro (--neutral-900). Cambiamos a color blanco + var(--acc).
   ══════════════════════════════════════════════════════════════ */

.content__button--green,
input[type="submit"].content__button--green,
a.content__button--green {
  background: var(--acc);
  color: #ffffff;
  border: none;
  border-radius: var(--btn-radius);
  font-family: var(--fu);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .6px;
  transition: opacity .15s;
  cursor: pointer;
}

.content__button--green:hover,
input[type="submit"].content__button--green:hover,
a.content__button--green:hover {
  background: var(--acc);
  color: #ffffff;
  opacity: .85;
}

/* Botón deshabilitado (checkout, antes de rellenar campos) */
.checkout-container__footer input[type="submit"]:disabled {
  background: var(--acc) !important;
  color: #ffffff !important;
  cursor: not-allowed;
  opacity: 0.5;
}

/* Botón secundario/blanco */
.content__button--white,
a.content__button--white {
  border: 1px solid var(--border);
  border-radius: var(--btn-radius);
  background: var(--body-bg);
  color: var(--text);
  font-family: var(--fu);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .6px;
  transition: all .15s;
}

.content__button--white:hover,
a.content__button--white:hover {
  background: var(--body-bg2);
  border-color: var(--acc);
  color: var(--acc);
}


/* ══════════════════════════════════════════════════════════════
   9. INPUTS GLOBALES
   El plugin fija: border-radius:5px, border: 1px solid var(--neutral-500)
   ══════════════════════════════════════════════════════════════ */

.list-page input[type="date"],
.list-page input[type="text"],
.list-page select,
.list-page textarea,
.details-container input[type="date"],
.details-container input[type="text"],
.details-container select,
.details-container textarea,
.checkout-container input[type="date"],
.checkout-container input[type="text"],
.checkout-container input[type="email"],
.checkout-container select,
.checkout-container textarea {
  border: 1px solid var(--border);
  border-radius: var(--btn-radius);
  color: var(--text);
  background: var(--body-bg);
  font-family: var(--fu);
}

.list-page input[type="text"]:focus,
.list-page select:focus,
.details-container input:focus,
.details-container select:focus,
.checkout-container input:focus,
.checkout-container select:focus,
.checkout-container textarea:focus {
  border-color: var(--acc);
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--acc) 15%, transparent);
}

/* Estados de error */
input[type="text"].error,
input[type="email"].error,
select.error,
textarea.error {
  border-color: #ac3b3b !important;
  background: #f4dbdb !important;
}

.form-errors {
  background: #f4dbdb;
  border-left: 3px solid #ac3b3b;
  border-radius: var(--btn-radius);
}

p.error {
  color: #ac3b3b;
  font-size: 12px;
  font-family: var(--fu);
}

/* Label flotante sobre inputs */
div:has(> input[type="date"], > input[type="text"], > select) label,
.dropdown-label {
  color: var(--text-mid);
  background: var(--body-bg);
}


/* ══════════════════════════════════════════════════════════════
   10. PÁGINA DE DETALLE
   ══════════════════════════════════════════════════════════════ */

/* Tarjeta genérica de detalle */
.details-card {
  border-radius: var(--card-radius);
  border: 1px solid var(--border);
  background: var(--body-bg);
  box-shadow: none;
}

/* Booking card: borde superior con color de acento */
.details-card--booking {
  border-top: 3px solid var(--acc);
}

/* Título de publicación */
.details-description__title {
  font-family: var(--fh);
  font-size: 1.8rem;
  font-weight: 400;
  color: var(--text);
}

/* Section titles */
.section-title,
.section-title--padding {
  font-family: var(--fh);
  font-weight: 400;
  color: var(--text);
}

/* Precio del detalle */
.details-main .price .amount {
  font-family: var(--fh);
  font-size: 2rem;
  color: var(--acc);
}

.details-main .price .currency {
  font-family: var(--fu);
  color: var(--text-mid);
  font-size: 14px;
}

/* Feature chips del detalle */
.details-main .features .feature {
  background: var(--body-bg2);
  border-radius: calc(var(--card-radius) + 2px);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 3px 8px;
}

/* Icono de características — usa el acento */
.details-characteristics__item-icon {
  color: var(--acc);
}

.details-characteristics__item {
  color: var(--text);
}

/* Imágenes del detalle */
.details-images {
  background: var(--body-bg2);
  border-radius: var(--card-radius);
  padding: 1rem;
  gap: 1rem;
}

.details-images__image img.rounded {
  border-radius: var(--card-radius);
}

/* Dirección en el mapa */
#map-location-container p {
  color: var(--text-mid);
  font-family: var(--fu);
}


/* ══════════════════════════════════════════════════════════════
   11. CHECKOUT — 4 pasos
   checkout.css del plugin está VACÍO — todos los estilos
   vienen de homming.css, que cubre las clases aquí listadas.
   ══════════════════════════════════════════════════════════════ */

/* Columna izquierda del checkout */
.checkout-container__left {
  border-radius: var(--card-radius);
  border: 1px solid var(--border);
  background: var(--body-bg);
  box-shadow: none;
}

/* Divisores */
.checkout-container__divider {
  background: var(--border);
  color: var(--border);
}

/* Sección personal data */
.checkout-personal-data__title {
  font-family: var(--fh);
  font-weight: 400;
  font-size: 1.1rem;
  color: var(--text);
}

.checkout-personal-data__description {
  color: var(--text-mid);
}

/* Tarjeta de servicio extra */
.extra-service-card {
  border-color: var(--border);
  border-radius: var(--card-radius);
  background: var(--body-bg);
}

.extra-service-card__title {
  color: var(--text);
}

.extra-service-card__desc {
  color: var(--text-mid);
}

.extra-service-card__price {
  color: var(--acc);
  font-family: var(--fh);
}

/* Toggle switch del servicio extra → acento cuando activo */
.extra-service-card__switch input:checked + .extra-service-card__slider {
  background: var(--acc);
}

/* T&C */
.checkbox-conditions__text-box {
  border-color: var(--border);
  border-radius: var(--card-radius);
}

.checkbox-conditions__text-box h3,
.checkbox-conditions__text-box ol > li {
  color: var(--text);
}

.checkbox-conditions__text-box ul > li {
  color: var(--text-mid);
}

/* Observaciones */
.checkbox-observations label {
  color: var(--text);
  font-family: var(--fh);
  font-weight: 400;
}


/* ══════════════════════════════════════════════════════════════
   12. CONFIRMACIÓN DE RESERVA
   ══════════════════════════════════════════════════════════════ */

.checkout-confirmation-page_head .confirmation-head_title {
  font-family: var(--fh);
  font-weight: 400;
  font-size: 2rem;
  color: var(--text);
}

.checkout-confirmation-page_head .confirmation-head_text {
  color: var(--text-mid);
}

.confirmation-details_title {
  font-family: var(--fh);
  font-weight: 400;
  color: var(--text);
}

.confirmation-details_linear-item--left {
  color: var(--text);
  font-weight: 600;
}

.confirmation-details_linear-item--right {
  color: var(--text-mid);
}

/* Tabla de conceptos de pago */
.checkout-confirmation-page_details table,
.checkout-confirmation-page_details td,
.checkout-confirmation-page_details th {
  border-color: var(--border);
  color: var(--text);
}

.checkout-confirmation-page_details thead {
  background: var(--body-bg2);
}

.confirmation-details_details-payment--table-amount {
  color: var(--acc);
  font-family: var(--fh);
  font-size: 1.1rem;
}

/* Tarjeta de info */
.information-card {
  border-color: var(--border);
  border-radius: var(--card-radius);
}

.information-card__header {
  border-bottom-color: var(--border);
  background: var(--body-bg2);
}

.information-card__header h6 {
  font-family: var(--fh);
  color: var(--text);
  font-weight: 400;
}

.information-card__content {
  color: var(--text-mid);
}


/* ══════════════════════════════════════════════════════════════
   13. PAGINACIÓN
   ══════════════════════════════════════════════════════════════ */

.pagination .page-numbers:not(.next, .prev) {
  background: var(--body-bg);
  border: 1px solid var(--border);
  border-radius: var(--btn-radius);
  color: var(--text-mid);
}

/* Página activa */
.pagination span.page-numbers:not(.next, .prev) {
  background: var(--acc);
  border-color: var(--acc);
  color: #ffffff;
}

.pagination .page-numbers.next,
.pagination .page-numbers.prev {
  color: var(--acc);
}

.pagination .page-numbers:not(.next, .prev):hover {
  border-color: var(--acc);
  color: var(--acc);
}


/* ══════════════════════════════════════════════════════════════
   14. TÍTULOS DE PÁGINA EN PÁGINAS DEL PLUGIN
   La plantilla FSE muestra el wp-block-post-title de la página WP
   ("Alquiler de Inmuebles") además del encabezado propio del plugin,
   lo que produce doble barra. Se oculta cuando el plugin está activo.
   ══════════════════════════════════════════════════════════════ */

/* Ocultar el título de página WP cuando el plugin renderiza su propio header */
body:has(.list-page) .wp-block-post-title,
body:has(.list-page) .entry-title,
body:has(.details-container) .wp-block-post-title,
body:has(.details-container) .entry-title,
body:has(.checkout-container) .wp-block-post-title,
body:has(.checkout-container) .entry-title {
  display: none;
}


/* ══════════════════════════════════════════════════════════════
   15. ADAPTACIONES POR LOOK
   Refinamientos que el look no cubre porque son específicos
   de la interacción entre sus tokens y el HTML del plugin.
   ══════════════════════════════════════════════════════════════ */

/* ── Minimal: sin hover elevation, borde superior acento ── */
.look-minimal .list-container .card:hover {
  transform: none;
  box-shadow: none;
  background: var(--body-bg2);
  border-color: var(--border);
}

/* Borde superior de la card como en el prototipo Minimal */
.look-minimal .list-container .card .content {
  border-top: 2px solid var(--acc);
}

/* Precio más compacto en Minimal */
.look-minimal .list-container .card .price .amount {
  font-size: 20px;
  font-weight: 700;
}

/* Título uppercase en Minimal */
.look-minimal .details-description__title {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -1px;
}

/* ── Prestige: tabla de confirmación con dorado ── */
.look-prestige .checkout-confirmation-page_details thead {
  background: rgba(201,168,76,.08);
}

/* ── Cálido: inputs con radio pill ── */
.look-calido .checkout-container input,
.look-calido .checkout-container select,
.look-calido .checkout-container textarea {
  border-radius: var(--btn-radius);
}

.look-calido .extra-service-card {
  border-radius: var(--card-radius);
}

/* ══ HOMEPAGE: ocultar paginación del shortcode ══════════════════
   En portada (body.home) el shortcode [homming_list_publications per_page="3"]
   muestra solo 3 fichas sin necesidad de navegar páginas.
   ════════════════════════════════════════════════════════════════ */
body.home .pagination {
  display: none;
}

/* ══ DOBLE BARRA DE BÚSQUEDA — ocultar modal de filtro ══════════
   El plugin muestra dos formas: el modal (#list-filter) y el
   formulario inline (#publication-filter-form). Se oculta el modal.
   ════════════════════════════════════════════════════════════════ */
#list-filter.modal {
  display: none !important;
}
/* También ocultar el botón/enlace que abre el modal */
a[href="#list-filter"],
.button-container.list-filter,
button[data-a11y-dialog-show="list-filter"],
[data-modal="list-filter"],
.filter-toggle,
.open-filter-modal {
  display: none !important;
}


/* ══ LISTADO-DE-PROPIEDADES — layout cabecera/filtro/cards ═════
   Aplica a /listado-de-propiedades/ (renderizado FSE con editor).
   Las páginas /alquiler/ y /venta/ usan PHP templates propios
   (page-alquiler.php, page-venta.php) con page-hero independiente,
   por lo que estas reglas no les afectan.
   En el DOM FSE: h1 → p → .list-page(form+cards).
   ════════════════════════════════════════════════════════════════ */
body:has(.list-page) .wp-block-post-content {
  display: flex !important;
  flex-direction: column !important;
}
/* Título arriba */
body:has(.list-page) .wp-block-post-content > h1,
body:has(.list-page) .wp-block-post-content > .wp-block-heading {
  order: 1 !important;
  font-size: 24px !important;
  margin-bottom: 4px !important;
}
/* Subtítulo después del título */
body:has(.list-page) .wp-block-post-content > p,
body:has(.list-page) .wp-block-post-content > .wp-block-paragraph {
  order: 2 !important;
  font-size: 13px !important;
  color: var(--text-mid) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
/* Filtro + cards al final */
body:has(.list-page) .wp-block-post-content > .list-page {
  order: 3 !important;
}



/* ══ P8: IMAGEN DE DETALLE — carrusel de 3 fotos visibles ═══════
   El plugin usa transparent.png (1×1px) como placeholder con
   width:auto, lo que hace que la imagen ocupe solo ~0px de ancho.
   La foto real nace con class="details-images__placeholder rounded",
   pero el JS (homming-details.js) le saca la clase
   "details-images__placeholder" casi de inmediato (antes de que
   termine de cargar), así que el selector estable durante todo el
   ciclo de vida es "rounded" (nunca se toca por JS).
   El GIF de carga usa la clase "details-images__login" (typo del
   propio plugin) — se apunta directo para no estirarlo.
   Cada foto mide un tercio responsivo del ancho de .details-images
   (calc(), sin acotar el wrapper), así el carrusel siempre ocupa el
   100% disponible y se ven exactamente 3 fotos completas por vez; de
   la 4ta en adelante quedan fuera de vista hasta hacer click en la
   flecha (scroll-snap para que cada click aterrice prolijo). En
   móvil (≤560px, mismo corte donde se ocultan las flechas) cada foto
   pasa a ocupar ~82vw, una por pantalla, igual criterio que
   .testimonial-card.
   ════════════════════════════════════════════════════════════════ */
.details-images {
  scroll-snap-type: x mandatory !important;
}
.details-images__image {
  flex: 0 0 calc((100% - 48px) / 3) !important;
  min-width: calc((100% - 48px) / 3) !important;
  min-height: 280px !important;
  position: relative !important;
  scroll-snap-align: start;
}
@media (max-width: 560px) {
  .details-images__image {
    flex: 0 0 82vw !important;
    min-width: 82vw !important;
    max-width: 82vw !important;
  }
}
.details-images__image img.rounded {
  width: 100% !important;
  height: 280px !important;
  object-fit: cover !important;
  max-width: none !important;
  display: block !important;
}
/* El GIF de carga permanece como spinner centrado, no se estira */
.details-images__image img.details-images__login {
  width: 48px !important;
  height: 48px !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  object-fit: initial !important;
  max-width: none !important;
}

/* Flechas de scroll sobre la galería (inyectadas por
   assets/js/gallery-arrows.js) — mismos tokens que .testimonials-nav
   de la portada para consistencia visual. */
.gallery-wrap { position: relative; }
.gallery-nav {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  background: var(--body-bg);
  color: var(--text);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--card-radius);
  transition: background .15s, color .15s;
}
.gallery-nav:hover { background: var(--acc); color: #fff; border-color: var(--acc); }
.gallery-wrap.has-extra-photos .gallery-nav {
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery-nav--prev { left: 12px; }
.gallery-nav--next { right: 12px; }
@media (max-width: 560px) { .gallery-nav { display: none !important; } }