/* Price icon for all prices */
.hp-price-icon {
    display: inline-block;
    vertical-align: baseline;
    margin-right: 4px;
    margin-top: 0;
    margin-bottom: -2px;
    color: #ff74a0;
    width: 19px !important;
    height: 19px !important;
}

/* Price text bold - keep price and /night on same line */
.hp-listing__attribute--price {
    font-weight: 700;
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    white-space: nowrap;
}

/* Price icon in block view - perfect alignment with price text */
.hp-listing--view-block .hp-listing__attribute--price .hp-price-icon {
    align-self: center;
    margin-top: 1px;
    margin-bottom: 0;
}

/* Discount text after price */
.hp-price-discount {
    grid-column: 1 !important;
    grid-row: 2 !important;
    font-size: 12px;
    font-weight: 400;
    color: #28a745;
    font-style: italic;
    margin-top: 2px;
}

/* Discount text on single listing page - inside price container */
.hp-price-discount--page {
    display: block;
    font-size: 13px;
    margin-top: -12px;
    font-weight: 400;
    width: 100%;
    text-align: left;
}

/* Remove separator line from price container when discount is present */
.hp-page__sidebar .hp-listing__attributes--primary {
    border-bottom: none !important;
}

/* Remove any separator lines inside the price container */
.hp-page__sidebar .hp-listing__attributes--primary .hp-listing__attribute,
.hp-page__sidebar .hp-listing__attributes--primary .hp-listing__attribute--price {
    border: none !important;
    border-bottom: none !important;
    border-top: none !important;
}

/* Fix price layout on single listing page */
.hp-listing--view-page .hp-listing__attribute--price {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
}

/* Price icon alignment on single listing page */
.hp-listing--view-page .hp-listing__attribute--price .hp-price-icon {
    align-self: center;
    margin-top: 0 !important;
}

/* Price container in sidebar - proper spacing */
.hp-listing--view-page .hp-listing__attributes--primary {
    padding: 15px 20px !important;
    margin-bottom: 15px !important;
}

/* Footer layout - price row with favorites aligned to top right */
.hp-listing--view-block .hp-listing__footer {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto auto auto !important;
    align-items: center !important;
}

/* Price stays in first column */
.hp-listing--view-block .hp-listing__footer .hp-listing__attributes--primary {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: flex !important;
    align-items: flex-start !important;
}

/* Favorites icon in second column, first row - aligned with price */
.hp-listing--view-block .hp-listing__footer .hp-listing__actions--primary {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: flex-start !important;
    margin-top: 2px !important;
    padding-top: 0 !important;
}

/* Info box spans full width on third row */
.hp-listing--view-block .hp-listing__footer .hp-price-info-box {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    margin-top: 8px !important;
}

/* Address/location - show full text in multiple lines */
.hp-listing--view-block .hp-listing__details--primary,
.hp-listing--view-block .hp-listing__details--primary * {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    -webkit-line-clamp: unset !important;
    max-width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

/* Force the location/address container to wrap */
.hp-listing--view-block .hp-listing__details--primary > div:first-child {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
}

/* Icon alignment for location - align with first line */
.hp-listing--view-block .hp-listing__details--primary > div:first-child i,
.hp-listing--view-block .hp-listing__details--primary > div:first-child svg {
    flex-shrink: 0 !important;
    margin-top: 4px !important;
    margin-right: 5px !important;
}

/* Text next to icon should wrap */
.hp-listing--view-block .hp-listing__details--primary > div:first-child span,
.hp-listing--view-block .hp-listing__details--primary > div:first-child a {
    flex: 1 !important;
    min-width: 0 !important;
}

/* No defined price - Block view (listing cards) - same style as regular price */
.hp-no-price {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font-weight: 700;
    grid-column: 1 !important;
    grid-row: 1 !important;
}

.hp-no-price .hp-price-icon {
    color: #ff74a0;
}

.hp-no-price__text {
    font-size: inherit;
}

/* EN LA FICHA YA NO ES UN PRECIO, ES UNA FRASE.
   Este bloque heredaba el tamaño de un importe —24px y negrita—, que servia
   cuando decia dos palabras. Con «Inicia una propuesta para ver el mejor precio
   garantizado» el texto se salia por la derecha de la caja en cuanto la pantalla
   se estrechaba un poco. */
.hp-no-price--page {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    flex-wrap: wrap;
    /* `white-space: normal` ES LA CLAVE, y sin ella todo lo demas no sirve de
       nada: este bloque lleva tambien la clase del precio, y esa regla trae
       `white-space: nowrap` porque un importe nunca debe partirse. Heredado
       aqui, la frase entera se quedaba en UNA linea y se salia de la barra
       lateral. Mismo tropiezo que con la fila del precio en las tarjetas. */
    white-space: normal;
    padding: 15px 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    margin-bottom: 15px !important;
    display: flex;
    align-items: center;
}

.hp-no-price--page .hp-price-icon {
    width: 24px !important;
    height: 24px !important;
    margin-right: 8px;
    flex-shrink: 0;
    margin-top: 0 !important;
    align-self: center;
}

.hp-no-price--page .hp-no-price__text {
    line-height: 1.35 !important;
    /* `min-width:0` NO es un adorno: este bloque es una caja flexible y, por
       defecto, sus piezas no encogen por debajo de su contenido. La frase
       entera se quedaba en una sola linea y se salia por la derecha de la
       barra lateral —se veia cortada a media palabra—. Con esto puede encoger
       y el texto parte donde toca. Es la misma trampa que ya nos costo una
       ronda con la fila del precio en las tarjetas. */
    min-width: 0;
    flex: 1 1 auto;
    overflow-wrap: break-word;
}

/* Hide empty widget containers in sidebar when no price */
.hp-listing--view-page .hp-widget:empty,
.hp-listing--view-page .widget:empty {
    display: none !important;
}

/* Price Info Box - Elegant box below price */
.hp-price-info-box {
    background: #ffffff;
    border: 1px solid #dee2e6;
    border-left: 3px solid #6c757d;
    border-radius: 6px;
    padding: 10px 12px;
    margin-top: 10px;
    font-size: 12px;
    line-height: 1.4;
    color: #6c757d;
    font-style: italic;
    max-width: 100%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    clear: both;
    display: block;
    width: 100%;
    box-sizing: border-box;
    order: 100;
}

/* Price Info Box in listing cards (block view) - force below price */
.hp-listing--view-block .hp-price-info-box {
    margin-top: 8px;
    padding: 8px 10px;
    font-size: 11px;
    flex-basis: 100%;
    width: 100%;
}

/* Price Info Box in single listing page (sidebar) */
.hp-page__sidebar .hp-price-info-box {
    margin-bottom: 15px;
    padding: 12px 14px;
    font-size: 13px;
    background: #ffffff;
    border-color: #d0d9e4;
    border-left-color: #7c8ea0;
}

/* Related Listings - ensure same layout as other listing blocks */
.hp-related-listings .hp-listing--view-block .hp-listing__attribute--price,
.hp-listings--related .hp-listing--view-block .hp-listing__attribute--price {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
}

/* Related Listings footer - same grid layout */
.hp-related-listings .hp-listing--view-block .hp-listing__footer,
.hp-listings--related .hp-listing--view-block .hp-listing__footer {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto auto auto !important;
    align-items: center !important;
}

/* El «solicite su mejor precio» es pulsable: tiene que parecerlo.
   Hereda el color del bloque para no chocar con el icono que lleva al lado. */
.hp-no-price__cta {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.hp-no-price__cta:hover,
.hp-no-price__cta:focus {
    text-decoration: none;
    opacity: .85;
}


/* EL BOTON DE «ENVIAR PROPUESTA DE PRECIO» EN LAS TARJETAS.
   Antes era un enlace de texto y se perdia al lado de las tarjetas que si
   enseñan importe. Lleva las clases del tema, asi que el color y la forma los
   pone el; aqui solo se ajusta lo que depende de vivir dentro de la tarjeta. */
.hp-no-price .hp-no-price__boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* SIN margen arriba: ese `2px` dejaba el boton dos pixeles por debajo del
       corazon de favoritos, que es lo que se veia descentrado. Medido: centro
       del boton en 1853 y el del corazon en 1851. */
    margin: 0;
    /* Relleno lateral justo: con 14px de letra y 1.15em a los lados, el texto
       en español ya no cabia en una linea y el boton pasaba de 29 a 53px de
       alto, descuadrado respecto al corazon de favoritos. */
    padding: .55em .8em;
    /* Que nunca se coma el hueco del corazon aunque el texto sea largo: en
       español —«Enviar propuesta de precio»— el boton crece bastante mas que en
       ingles, y en tarjeta estrecha llegaba a rozarlo. */
    max-width: 100%;
    /* 13.5px: un punto por encima de los 13 de antes. Con 14 el texto en
       español no cabia en los 222px de hueco y el boton se partia en dos
       lineas, pasando de 29 a 52px de alto y descuadrandose otra vez con el
       corazon de favoritos. */
    font-size: 13.5px;
    line-height: 1.3;
    /* Un pixel mas de redondeo que el del tema (3px). */
    border-radius: 4px;
    text-align: center;
}

/* Sin subrayado en NINGUN estado. Con `!important` porque el subrayado lo pone
   la regla de enlaces del tema, que gana por especificidad a la del boton. */
.hp-no-price .hp-no-price__boton,
.hp-no-price .hp-no-price__boton:hover,
.hp-no-price .hp-no-price__boton:focus,
.hp-no-price .hp-no-price__boton:active {
    text-decoration: none !important;
}

/* Y el COLOR DEL TEXTO tambien se queda como en los demas botones.
   Esto es un `<a>`, no un `<button>`, asi que al pasar el raton le entraba el
   color de enlace del tema y el texto se volvia azul claro —medido:
   rgb(29,177,252)— mientras que el boton «Buscar», que es un `<button>`, seguia
   en blanco. Se le devuelve el blanco para que los dos se comporten igual.
   El icono va con `currentColor`, asi que lo sigue solo. */
.hp-no-price .hp-no-price__boton:hover,
.hp-no-price .hp-no-price__boton:focus,
.hp-no-price .hp-no-price__boton:active {
    color: #fff !important;
}


/* La caja deja de ser una fila: el boton manda y va solo. */
.hp-no-price:has(.hp-no-price__boton) {
    display: block;
    /* Reserva para el corazon de favoritos, que vive en la celda de al lado y
       empieza justo donde acaba esta caja. */
    padding-right: 34px;
    box-sizing: border-box;
}

/* AL PASAR EL RATON NO SE TOCA NADA: el efecto lo pone el tema, el mismo que
   en los demas botones del sitio. Aqui llego a haber un fondo negro a medida y
   se quito a proposito — un boton que se comporta distinto al resto obliga a
   aprenderselo aparte. Lo unico que se corrige es el subrayado (mas abajo),
   que es cosa de la regla de enlaces, no del boton. */

/* EN TARJETA ESTRECHA, EL BOTON A TODO EL ANCHO.
   Compacto esta bien mientras hay sitio, pero en las rejillas de varias
   columnas por debajo de ~1200 px la tarjeta se queda en unos 110 px y el boton
   se partia en tres lineas con el texto rozando el borde —«Enviar / propuesta /
   de precio»—. A todo el ancho de su hueco se lee de una vez y el corazon de
   favoritos sigue teniendo su reserva de 34 px. */
@media only screen and (max-width: 1199px) {
    .hp-no-price .hp-no-price__boton {
        display: flex;
        width: 100%;
    }
}


/* La moneda ya no se pinta junto a la frase (ver el PHP), pero si sigue
   apareciendo con la invitacion a identificarse, que si es corta. */