/* =========================================================
   TRAVANA · UI GLOBAL — PALETA DE COLORES
   ========================================================= */
:root {
  --travana-green: #3C6E71;   /* Azul principal */
  --travana-blue:  #A06A42;   /* Verde secundario */
  --travana-brown: #A06A42;   /* Café acento */
  --travana-white: #FFFFFF;

  --travana-text:  #2B2B2B;
  --travana-muted: #7A7A7A;
  --travana-soft:  #F6F6F6;
  --travana-border:#E2E2E2;

  --travana-shadow: 0 12px 36px rgba(0,0,0,.08);
}

/* =========================================================
   HEADER / NAVBAR
   ========================================================= */
.hp-menu__item--listing-submit.button.button--primary {
  background: var(--travana-green) !important;
  color: var(--travana-white) !important;
  border-radius: 9999px !important;
  border: none !important;
  padding-inline: 28px !important;
  box-shadow: 0 6px 20px rgba(60,110,113,.35) !important;
  font-weight: 600 !important;
}

.hp-menu__item--listing-submit.button.button--primary:hover {
  background: var(--travana-blue) !important;
  color: var(--travana-white) !important;
}

/* Icono del buscador */
.hp-search-form__button svg,
.hp-search-form__button i {
  fill: #FFFFFF !important;
  color: #FFFFFF !important;
}

/* =========================================================
   TIPOGRAFÍA GENERAL
   ========================================================= */
.hp-page__header .page-title,
.hp-page__header h1.hp-page__title,
.hp-section__title,
.wp-block-heading.content-title,
.elementor-heading-title {
  color: var(--travana-green) !important;
  text-align: left !important;
  font-weight: 700 !important;
}

.hp-page__header .hp-section__subtitle,
.wp-block-heading.content-title + p {
  color: var(--travana-muted) !important;
  text-align: left !important;
}

/* =========================================================
   BOTONES
   ========================================================= */
.button,
.wp-element-button {
  background-color: var(--travana-green) !important;
  color: #FFF !important;
  border-radius: 6px !important;
}

.button:hover {
  background-color: var(--travana-blue) !important;
}

/* =========================================================
   BADGES
   ========================================================= */
.hp-badge {
  background-color: var(--travana-brown) !important;
  color: #FFFFFF !important;
}

/* =========================================================
   LINKS
   ========================================================= */
a {
  color: var(--travana-green) !important;
}

a:hover {
  color: var(--travana-brown) !important;
}

/* =========================================================
   REMOVER SEPARADORES / ICONOS / FLECHAS
   ========================================================= */
.hp-section__title::before,
.hp-page__header .hp-section__title::before,
.elementor-heading-title::before,
.wp-block-heading.content-title::before {
  display: none !important;
  content: none !important;
}

.swiper-button-prev,
.swiper-button-next,
.hp-carousel__arrow,
.hp-slider__arrow,
.hp-carousel__indicator,
.hp-slider__indicator {
  display: none !important;
}

/* =========================================================
   TARJETAS DE LISTADO
   ========================================================= */
.hp-listings .hp-listing,
.hp-listings .hp-listing-card,
.hp-listings .listing-card {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
  border: 1px solid rgba(60,110,113,.16);
}

.hp-listings .hp-listing__image {
  aspect-ratio: 16 / 9;
  background: #EDEFF2;
}

.hp-listings .hp-listing__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hp-listings .hp-listing__content {
  padding: 14px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hp-listings .hp-listing__title {
  color: var(--travana-text);
  font-weight: 700;
  font-size: 22px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hp-listings .hp-listing__details .hp-meta {
  color: var(--travana-muted);
}



/* =============================
   CATEGORÍA SOBRE LA IMAGEN (badge)
   ============================= */

/* Para tarjetas HivePress / RentalHive */
.listing-card__image .listing-card__category a,
.hp-listing__image .listing-card__category a,
.hp-listing-card__image .listing-card__category a,
.hp-listing__categories a {
  color: #FFFFFF !important;                       
	/* Texto blanco */
  background-color: rgba(0, 0, 0, 0.45) !important; 
	/* Fondo oscuro translúcido */
  padding: 6px 14px !important;
  border-radius: 9px !important;                 
	/* Forma de píldora */
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  font-size: 10px !important;
  display: inline-block !important;
}


/* =========================================================
   AJUSTES VISUALES SOLICITADOS — IMAGEN + TÍTULO
   ========================================================= */

/* 1) Aumentar altura de la imagen en la tarjeta */
.hp-listings .hp-listing__image,
.hp-listings .hp-listing-card__image,
.hp-listings .listing-card__image {
  aspect-ratio: 4 / 3 !important;   /* Imagen más grande y visual */
}

/* 2) Reducir tamaño del título */
.hp-listings .hp-listing__title,
.hp-listings .hp-listing-card__title,
.hp-listings .listing-card__title {
  font-size: 15px !important;       /* Antes era 22px */
  line-height: 1.25 !important;
}
/* =========================================================
  


/* =========================================================
   CAMBIAR ICONO DE UBICACIÓN POR UNA VAN (fa-shuttle-van)
   ========================================================= */

.hp-form__field--location i.hp-icon::before {
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    content: "\f5b6" !important; /* shuttle-van */
}

/* Color del icono */
.hp-form__field--location .hp-icon,
.hp-form__field--location .hp-icon::before {
    color: var(--travana-green) !important;
}


/* ============================================
   Títulos de categorías destacadas en blanco
   ============================================ */

.hp-listing-category--view-block .hp-listing-category__name a,
.hp-listing-category--view-block .hp-listing-category__name,
.hp-listing-category--view-block .hp-listing-category__content h3,
.hp-listing-category--view-block .hp-listing-category__content h2,
.hp-listing-category--view-block a.hp-listing-category__name {
    color: #FFFFFF !important;
    text-shadow: 0 2px 6px rgba(0,0,0,0.45); /* mejora la lectura sobre fondos oscuros */
}

/* =========================================================
   

/* ============================================
   TÍTULOS DE TARJETA EN CAFÉ OSCURO ELEGANTE
   ============================================ */

.hp-listing__title,
.hp-listing-card__title,
.listing-card__title,
.hp-listings .hp-listing__title a,
.hp-listings .listing-card__title a,
.hp-listings .hp-listing-card__title a {
    color: #6B4A2B !important;  /* Café oscuro elegante */
}



.hp-icon.fas.fa-lock,
.hp-icon.fas.fa-shield-alt {
  color: var(--travana-green) !important;
  margin-right: 6px;
  font-size: 12px;
  vertical-align: middle;
}

/* =============================
   GARANTÍA EN UNA SOLA LÍNEA (TARJETAS)
   ============================= */

/* Contenedor del atributo garantía */
.hp-listing__details .hp-listing__attribute,
.hp-listing__details .hp-listing-attribute {
  display: flex !important;
  align-items: center;
  gap: 6px;
  white-space: nowrap !important;   /* evita salto de línea */
}

/* Texto de garantía */
.hp-listing__details .hp-listing__attribute span,
.hp-listing__details .hp-listing-attribute span {
  font-size: 14px !important;       /* un poco más chico */
  line-height: 1.2 !important;
}

/* Ícono de candado */
.hp-listing__details .hp-icon {
  font-size: 12px !important;
  flex-shrink: 0;                   /* evita que empuje el texto abajo */
}


/* =============================
   GARANTÍA EN 1 LÍNEA (solo Garantía)
   ============================= */

/* Si tu atributo se llama "garantia", esta clase suele existir */
.hp-listing__attribute--garantia,
.hp-listing__attribute--garantia * {
  white-space: nowrap !important;
}

/* Alinea icono + texto en línea */
.hp-listing__attribute--garantia {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Reduce un poco el tamaño para que quepa */
.hp-listing__attribute--garantia {
  font-size: 12px !important;
  line-height: 1.2 !important;
}


/* =========================================================
   PRECIO TRAVANA — FORZADO Y PERSISTENTE
   ========================================================= */

body .hp-listing .hp-listing__details *,
body .hp-listing .hp-listing__details strong,
body .hp-listing .hp-listing__details b,
body .hp-listing .hp-listing__details span,
body .hp-listing .hp-listing__details div {
  color: var(--travana-green) !important;
}

/* Precio específicamente */
body .hp-listing__attribute--price,
body .hp-listing__attribute--price *,
body .hp-listing__attribute--price-per-night,
body .hp-listing__attribute--price-per-night * {
  color: var(--travana-green) !important;
  font-weight: 300 !important;
}


/* =========================================================
   PRECIO TRAVANA — PRO (persistente + jerarquía visual)
   ========================================================= */

/* 1) Fuerza el color azul en el bloque donde vive el precio */
body .hp-listing__details .hp-meta--price,
body .hp-listing__details .hp-meta--price * ,
body .hp-listing__attribute--price,
body .hp-listing__attribute--price * ,
body .hp-listing__attribute--price-per-night,
body .hp-listing__attribute--price-per-night * {
  color: var(--travana-green) !important;   /* azul Travana */
  font-weight: 700 !important;
}

/* 2) El texto “/ día”, “por noche”, etc. en gris */
body .hp-listing__details .hp-meta--price,
body .hp-listing__attribute--price,
body .hp-listing__attribute--price-per-night {
  color: var(--travana-muted) !important;   /* gris */
}

/* 3) El número vuelve a azul (más específico) */
body .hp-listing__details .hp-meta--price strong,
body .hp-listing__details .hp-meta--price b,
body .hp-listing__attribute--price strong,
body .hp-listing__attribute--price b,
body .hp-listing__attribute--price-per-night strong,
body .hp-listing__attribute--price-per-night b {
  color: var(--travana-green) !important;
  font-weight: 800 !important;
}

/* 4) “USD” más chico y sutil (cuando aparece como texto) */
body .hp-listing__details .hp-meta--price,
body .hp-listing__attribute--price,
body .hp-listing__attribute--price-per-night {
  font-size: 14px !important;
}
body .hp-listing__details .hp-meta--price .currency,
body .hp-listing__attribute--price .currency,
body .hp-listing__attribute--price-per-night .currency {
  font-size: 12px !important;
  opacity: .85 !important;
}

/* 5) Fallback: si USD no viene con clase .currency, igual lo baja un poco */
body .hp-listing__details .hp-meta--price,
body .hp-listing__attribute--price,
body .hp-listing__attribute--price-per-night {
  letter-spacing: .01em !important;
}



/* =========================================================
   LOGO TRAVANA — COLOR AZUL OFICIAL
   ========================================================= */

.header-logo__name,
.header-logo__name a {
  color: var(--travana-green) !important; /* Azul Travana */
  font-weight: inherit !important;        /* Mantiene la misma letra */
}

/* Opcional: hover suave (no cambia mucho) */
.header-logo__name a:hover {
  color: var(--travana-green) !important;
  opacity: 0.9;
}


/* =========================================================
   AJUSTE POSICIÓN GARANTÍA EN TARJETAS
   ========================================================= */

/* Contenedor de atributos (personas + garantía) */
.hp-listing__attributes,
.hp-listing__details {
  display: flex !important;
  gap: 18px !important;              /* Espacio controlado entre ítems */
  justify-content: flex-start !important;
  align-items: center !important;
  flex-wrap: wrap;
}

/* Cada atributo (personas, garantía, etc.) */
.hp-listing__attribute {
  margin-right: 0 !important;
  white-space: nowrap;
}

/* Ícono de garantía un poco más cerca del texto */
.hp-listing__attribute .hp-icon {
  margin-right: 6px !important;
}


.hp-listing__attribute--guests {
  order: 1;
}
.hp-listing__attribute--guarantee {
  order: 2;
}


/* =========================================================
   HOVER UNIFICADO BOTONES — CAFÉ + TEXTO BLANCO
   ========================================================= */

/* Botones principales */
.button:hover,
.wp-element-button:hover,
.hp-menu__item--listing-submit.button.button--primary:hover {
    background-color: var(--travana-brown) !important;
    color: #FFFFFF !important;
}

/* Íconos dentro del botón (si existen) */
.button:hover i,
.wp-element-button:hover i,
.button:hover svg,
.wp-element-button:hover svg {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
}


/* Reducir títulos grandes sobre imágenes en páginas internas */
.hp-page__header h1,
.hp-page__header .page-title {
  font-size: 36px !important;
  line-height: 1.2 !important;
  max-width: 900px;
}

/* Subtítulo más discreto */
.hp-page__header .hp-page__description {
  font-size: 18px !important;
  opacity: 0.9;
}

/* Reducir tamaño y peso del depósito de seguridad en la ficha */
.hp-listing__booking-security-deposit {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #6f6f6f !important;
  margin-top: 8px;
}

/* Quitar look de "titulo grande" */
.hp-listing__booking-security-deposit strong {
  font-weight: 500 !important;
}

/* Ajustar caja si viene dentro de un card */
.hp-listing__booking-security-deposit {
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.hp-listing__booking-security-deposit {
  opacity: 0.85;
}

.hp-listing__booking-sidebar .hp-listing__attribute--security_deposit {
  font-size: 14px !important;
  font-weight: 500 !important;
}

/* Depósito en sidebar (ficha individual) */
.hp-listing__attribute.hp-listing__attribute--booking-deposit{
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #6f6f6f !important;
  line-height: 1.2 !important;
  margin-top: 8px !important;
}

/* Si viene dentro de una caja/card con padding raro */
.hp-listing__attribute--booking-deposit{
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}


/* =========================================
   OCULTAR PRECIO REAL SOLO EN TARJETAS (listados)
   ========================================= */

/* En home / archivo / categorías */
.hp-listings .hp-listing__attribute--price,
.hp-listings .hp-listing__price,
.hp-listings .hp-listing__price--primary {
  display: none !important;
}

/* En la ficha individual SIEMPRE mostrar */
.single .hp-listing__attribute--price,
.single .hp-listing__price,
.single .hp-listing__price--primary {
  display: block !important;
}




/* =========================================================
   PRECIO USD — ESTILO AIRBNB (override final)
   ========================================================= */

/* Precio USD principal */
.hp-listing__attribute--dolar {
  font-size: 15px !important;          /* tamaño Airbnb */
  font-weight: 500 !important;         /* NO bold */
  color: var(--travana-brown) !important;
  line-height: 1.2 !important;
  margin-top: 6px !important;

  /* Layout limpio */
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 4px !important;

  /* Neutraliza reglas globales */
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* Evita que reglas globales lo vuelvan bold */
.hp-listing__attribute--dolar *,
.hp-listing__attribute--dolar strong,
.hp-listing__attribute--dolar b {
  font-weight: 500 !important;
  font-size: inherit !important;
  color: inherit !important;
}

/* Si quieres que "USD / día" se vea más suave */
.hp-listing__attribute--dolar {
  opacity: 0.9;
}



.hp-booking__action--cancel {
  display: inline-flex !important;
}