/* =====================================================
   Habitania-like styles.css (revised)
   - Smaller logo
   - Centered text with stable margins
   Based strictly on the provided HTML structure.
   ===================================================== */

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400&family=Roboto+Condensed:wght@600&display=swap');

/* Root variables (mirroring Astra inline variables) */
:root{
  --ast-global-color-0:#414141;
  --ast-global-color-1:#717171;
  --ast-global-color-2:#817f7f;
  --ast-global-color-3:#d1cdcd;
  --ast-global-color-4:#F5F5F5;
  --ast-global-color-5:#FFFFFF;
  --ast-global-color-6:#F2F5F7;
  --ast-global-color-7:#424242;
  --ast-global-color-8:#000000;

  --ast-border-color:#dddddd;

  --ast-container-default-xlg-padding:3em;
  --ast-container-default-xs-padding:2.4em;

  --ast-normal-container-width:1200px;
  --ast-narrow-container-width:750px;
}

/* Base */
html{font-size:93.75%;}
@media (max-width:921px){ html{font-size:85.5%;} }
@media (max-width:544px){ html{font-size:85.5%;} }

*{box-sizing:border-box;}
body{
  margin:0;
  font-family:'Roboto',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  line-height:1.65;
  color:var(--ast-global-color-7);
  background:var(--ast-global-color-5);

  /* Sticky footer:
     - Con poco contenido, empuja el footer al límite inferior del viewport.
     - Con mucho contenido, el footer queda tras el contenido (scroll normal).
  */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
img{max-width:100%;height:auto;display:block;}
a{color:#0170b9;text-decoration:none;}
a:hover,a:focus{color:var(--ast-global-color-8);}
::selection{background-color:var(--ast-global-color-0);color:#fff;}

/* Sticky footer: empuja el footer al final del body flex */
.site-footer{
  margin-top: auto;
}

/* Footer language switch: idioma activo sin enlace */
.site-footer .lang-active{
  color: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: default;
}

/* ================= Habitania Home (dropdowns + mapa) ================= */
.home-controls{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 18px 0 8px;
  border-bottom: 1px solid var(--border);
}

.home-control{
  display:flex;
  flex-direction: column;
  gap: 6px;
}

.home-control label{
  color: var(--muted);
  font-size: 13px;
}

.home-control select{
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  background: #fff;
  font-size: 14px;
}

.home-control select:disabled{
  opacity: .55;
  cursor: not-allowed;
}

.home-map{
  padding: 16px 0 24px;
}

.home-map__header{
  display:flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}

.home-map__title{
  margin: 0;
  font-size: 18px;
}

.home-map__hint{
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.home-map__wrap{
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

#homeMap{
  width: 100%;
  height: auto;
  display:block;
}

.home-region{
  fill: #f3f4f6;
  stroke: #6b7280;
  stroke-width: 0.7;
  cursor: default;
  transition: fill .12s ease, stroke .12s ease;
}

/* Clicables (cualquier país): cursor + hover */
.home-region--clickable{
  cursor: pointer;
}

/* Hover por defecto (España/Italia/Portugal y cualquier zona clicable que no esté pre-resaltada) */
.home-region--clickable:hover{
  fill: #f59e0b;
  stroke: #92400e;
  stroke-width: 1.1;
}

/* Pre-resaltado en rojo (solo Francia whitelist + Andorra) */
.home-region--highlight{
  fill: var(--tabs-accent);
  stroke: #9f1d16;
  stroke-width: 1.0;
}

/* Hover específico para las zonas pre-resaltadas */
.home-region--highlight.home-region--clickable:hover{
  fill: #b91c1c;
  stroke: #7f1d1d;
  stroke-width: 1.2;
}

.home-tooltip{
  position: fixed;
  pointer-events: none;
  background: rgba(17,24,39,.92);
  color: #fff;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 12px;
  transform: translate(10px, 10px);
  opacity: 0;
  transition: opacity .08s linear;
  white-space: nowrap;
  z-index: 999;
}

@media (max-width: 960px){
  .home-controls{ grid-template-columns: 1fr; }
}

/* Typography */
h1,h2,h3,h4,h5,h6,
.site-title,.site-title a{
  font-family:'Roboto Condensed',sans-serif;
  font-weight:600;
  color:var(--ast-global-color-8);
  margin:0 0 .5em;
  line-height:1.3;
}
h1{font-size:40px;line-height:1.4;}
h2{font-size:32px;}
h3{font-size:26px;}
h4{font-size:24px;}
h5{font-size:20px;}
h6{font-size:16px;}
@media (max-width:921px){
  h1{font-size:30px;}
  h2{font-size:25px;}
  h3{font-size:20px;}
}

/* Containers */
.ast-container{max-width:1240px;margin:0 auto;padding:0 var(--ast-container-default-xs-padding);}
.site-content .ast-container{display:flex;gap:0;}
@media (max-width:921px){ .site-content .ast-container{flex-direction:column;} }

/* =========================
   HEADER (from provided HTML)
   ========================= */
header, .elementor-location-header{background:var(--ast-global-color-5);}

/* Country menu aligned to the right (as in HTML inline styles) */
.menu-container{display:flex;justify-content:flex-end;align-items:center;padding:10px 0;}
.menu{list-style:none;display:flex;gap:20px;margin:0;padding:0;}
.menu .menu-item a{
  text-decoration:none;color:#000;font-weight:bold;
  padding:6px 2px;border-bottom:2px solid transparent;
}
.menu .menu-item a:hover{border-color:#0170b9;}

/* Logo: centered and smaller than before */
.elementor-location-header .elementor-widget-image{display:flex;justify-content:center;padding:8px 0;}
.elementor-location-header .elementor-widget-image img{
  width:auto;
  height:auto;
  max-height:48px;   /* smaller logo */
  object-fit:contain;
}

/* =========================
   CONTENT (from provided HTML)
   Center text blocks and keep margins stable regardless of width
   ========================= */

/* Limit the width of text widgets and center them */
.entry-content .elementor-widget-heading,
.entry-content .elementor-widget-text-editor{
  max-width: 900px;           /* stable readable line-length */
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;         /* side padding so it doesn’t hit the edges on mobile */
  padding-right: 1rem;
  text-align: center;         /* center text like the screenshot/HTML intent */
}

/* Center the H1 title specifically */
.entry-content .elementor-widget-heading .elementor-heading-title{
  margin: 0 auto .6em;
  text-align: center;
}

/* Ensure paragraph rhythm is consistent */
.entry-content .elementor-widget-text-editor p{
  margin: 0 auto 1.4em;
  line-height: 1.8;
}

/* Lists used under the main links section */
.entry-content ul{padding-left:1.1em;display:inline-block;text-align:left;margin:0 auto;}
.entry-content li{margin:.4em 0;}

/* Buttons (rounded) */
.button,
.wp-block-button .wp-block-button__link,
.ast-button,
.ast-custom-button,
input[type="button"],
input[type="submit"]{
  border:0;background:var(--ast-global-color-0);color:#fff;
  border-radius:30px;line-height:1;padding:10px 20px;cursor:pointer;
}
.button:hover,
.wp-block-button .wp-block-button__link:hover,
.ast-button:hover,
.ast-custom-button:hover,
input[type="button"]:hover,
input[type="submit"]:hover{
  background:var(--ast-global-color-1);
}

/* Top destinations grid: keep full width inside content but centered */
.top-destination-countries-list{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:16px;
  margin:24px auto;
  max-width: var(--ast-normal-container-width);
  padding: 0 1rem;
}
@media (max-width:1200px){ .top-destination-countries-list{grid-template-columns:repeat(4,1fr);} }
@media (max-width:921px){ .top-destination-countries-list{grid-template-columns:repeat(3,1fr);} }
@media (max-width:544px){ .top-destination-countries-list{grid-template-columns:repeat(2,1fr);} }

.top-destination-country{
  position:relative;display:block;overflow:hidden;border-radius:14px;background:#eee;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
  transition:transform .2s ease, box-shadow .2s ease;
}
.top-destination-country:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.12);}
.top-destination-country .country-img{width:100%;height:220px;object-fit:cover;display:block;}
.top-destination-country .country-name{
  position:absolute;left:12px;bottom:12px;padding:6px 10px;border-radius:10px;
  background:rgba(0,0,0,.6);color:#fff;font-weight:600;letter-spacing:.2px;
}

/* Section spacing to resemble Elementor defaults */
.elementor-section{padding: var(--ast-container-default-xlg-padding) 0;}
.elementor-section.elementor-section-boxed > .elementor-container{
  max-width: var(--ast-normal-container-width);
  margin: 0 auto;
  padding: 0 var(--ast-container-default-xs-padding);
}

/* Footer */
.elementor-location-footer .elementor-top-section{padding:20px 0;}
.elementor-location-footer .elementor-top-section:nth-of-type(2){background:var(--ast-global-color-0);}
.footer__link{color:#fff;text-decoration:none;border-bottom:1px solid transparent;}
.footer__link:hover{border-bottom-color:#fff;}
.ast-footer-copyright{text-align:center;color:var(--ast-global-color-3);}

/* Accessibility: skip link */
.skip-link{
  position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;
}
.skip-link:focus{
  position:static;width:auto;height:auto;padding:8px 12px;background:#000;color:#fff;
}

/* Utilities */
.aligncenter{display:block;margin-left:auto;margin-right:auto;}
.alignleft{float:left;margin-right:20px;}
.alignright{float:right;margin-left:20px;}
.clearfix::after{content:"";display:block;clear:both;}

/* Emoji inline */
img.wp-smiley, img.emoji {
  display:inline !important;border:none !important;box-shadow:none !important;
  height:1em !important;width:1em !important;margin:0 .07em !important;
  vertical-align:-0.1em !important;background:none !important;padding:0 !important;
}

/* Intrinsic size hint like the inline tag */
img:is([sizes="auto" i],[sizes^="auto," i]){contain-intrinsic-size:3000px 1500px;}


/* === Compact header for the provided HTML =====================
   HTML:
   <header class="site-header">
     <nav><ul class="menu">...</ul></nav>
     <a class="logo"><img ...></a>
   </header>
   ============================================================= */

/* Reset default list/padding and make the header compact */
.site-header{
  position:relative;
  padding:12px 16px 8px;      /* compact vertical padding */
  border-bottom:1px solid var(--ast-border-color);
  background: var(--ast-global-color-5);
}

/* Place the menu at top-right, single line, small gap */
.site-header .menu{
  list-style:none;
  display:flex;
  gap:20px;
  margin:0;
  padding:0;
  position:absolute;
  top:8px;
  right:16px;
}
.site-header .menu a{
  text-decoration:none;
  color:#000;
  font-weight:700;
  font-size:14px;
  line-height:1;
  padding:4px 2px;
  border-bottom:2px solid transparent;
}
.site-header .menu a:hover{ border-color:#0170b9; }

/* Center the logo under the menu; keep it small */
.site-header .logo{
  display:block;
  width:fit-content;
  margin: 8px auto 10px;  /* small margins to avoid a tall header */
}
.site-header .logo img{
  display:block;
  height:auto;
  max-height:40px;        /* adjust if still big: try 36px/32px */
  width:auto;
  object-fit:contain;
}

/* Mobile: stack nicely with the menu below the logo */
@media (max-width:544px){
  .site-header{ padding:10px 12px 6px; }
  .site-header .menu{
    position:static;
    justify-content:center;
    gap:16px;
    margin-top:4px;
  }
  .site-header .menu a{ font-size:13px; }
  .site-header .logo{ margin: 4px auto 6px; }
  .site-header .logo img{ max-height:36px; }
}


/* === Precise logo sizing and visibility ===================== */
.site-header .logo{
  display:block;
  width:fit-content;
  margin: 6px auto 8px;
  position:relative;
  z-index: 1; /* ensure it's not hidden behind the menu */
}
.site-header .logo img{
  display:block;
  width:200px;     /* target rendered width */
  height:55px;     /* target rendered height */
  object-fit:contain;
  max-height:none; /* override previous rules */
  max-width:none;
}


/* === Center text blocks at max 1120px ======================= */

/* Limitar y centrar el contenedor de contenido */
#content,
.site-content .ast-container,
.entry-content,
.elementor-section.elementor-section-boxed > .elementor-container {
  max-width:1120px;
  margin-left:auto;
  margin-right:auto;
  padding-left:1rem;
  padding-right:1rem;
}

/* Centrar títulos y texto como en la página original */
.entry-content,
.entry-content .elementor-widget-heading,
.entry-content .elementor-widget-text-editor {
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}

/* Listas centradas visualmente pero con bullets alineados a la izquierda */
.entry-content ul{
  display:inline-block;
  text-align:left;
  margin:0 auto 1.2em;
  padding-left:1.1em;
}
.cta-container {
  text-align: center;
  margin: 3rem 0; /* más espacio alrededor */
}

.cta-button {
  display: inline-block;
  background-color: #ff3366;
  color: #fff;
  font-weight: bold;
  font-size: 1.4rem; /* tamaño de texto mayor */
  padding: 1.5rem 3rem; /* más grande en ambas direcciones */
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 6px 16px rgba(255, 51, 102, 0.4); /* efecto de profundidad */
}

.cta-button:hover {
  background-color: #e62e5c;
  transform: scale(1.05); /* sutil crecimiento al pasar el ratón */
}

/* 1) Fuerza el ancho máximo de la imagen marcada con .entry-image */
.entry-content img.entry-image,
.entry-content .wp-block-image img.entry-image,
.entry-content .elementor-widget-image img.entry-image {
  display: block;
  width: 100%;
  max-width: 100px !important;  /* igual que tus textos */
  height: auto;
  margin: 1.5rem auto;
}

/* 2) (Opcional) Limita también el contenedor de la imagen por si el widget la estira */
.entry-content figure.wp-block-image,
.entry-content .elementor-widget-image,
.entry-content .elementor-widget-image .elementor-widget-container {
  max-width: 100px;
  margin-left: auto;
  margin-right: auto;
}

/* 3) (Opcional) Si el padre es grid/flex y la ‘empuja’, céntralo igualmente */
.entry-content .elementor-widget-image {
  justify-self: center;
  align-self: center;
}

.image-wrapper {
  aspect-ratio: 10 / 2;
  overflow: hidden;
}

.image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* recorta sin deformar */
}

/* ================= Listings ================= */

:root {
  --bg: #ffffff;
  --paper: #fafafa;
  --ink: #222;
  --muted: #6b7280;
  --brand: #1f2937;
  --accent: #0ea5e9;
  /* Personalización listados */
  --tabs-accent: #e6332a;   /* resalto pestaña (Mapa / Listado) */
  --map-marker:  #e6332a;   /* chincheta/marker del mapa */
  --accent-2: #10b981;
  --danger: #ef4444;
  --border: #e5e7eb;
  --chip: #f1f5f9;
}

/* Layout general del listado */
header.page {
  /* El wrapper interno `.container` ya tiene padding horizontal.
     Evitamos “doble padding” en cabeceras (header + container). */
  padding: 24px 0;
  border-bottom: 1px solid var(--border);
  background: var(--paper);
}
header.page h1 {
  margin: 0 0 6px 0;
  font-size: clamp(20px, 3vw, 28px);
  letter-spacing: .2px;
}
header.page p.sub {
  margin: 0;
  color: var(--muted);
}
.container {
  /* Listados: el layout (grid + mapa + filtros) necesita más ancho útil.
     Subimos el ancho máximo global a 1440px para reducir márgenes en desktop. */
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 16px;
}

/* ================= Listing: container width/padding hardening =================
   Problema:
   - `.container` es un nombre muy común (Bootstrap/Astra/WordPress) y puede quedar
     sobreescrito en producción, haciendo que el listado se vea “estrecho”.

   Solución:
   - Scopeamos el layout del listado a `body.page-listing` (solo listing_template.html)
     para ganar especificidad y asegurar un padding lateral razonable.
   - Usamos `clamp(16px, 10vw, 140px)` para que:
       * Móvil: mínimo 16px
       * Desktop: aprox. 10% del viewport
       * Máximo: 140px
   ============================================================================ */
body.page-listing .container{
  width: 100%;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(16px, 10vw, 140px);
  padding-right: clamp(16px, 10vw, 140px);
}

/* Breadcrumbs */
.breadcrumbs{
  margin: 0 0 10px 0;
  font-size: 13px;
  color: var(--muted);
}
.breadcrumbs ol{
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  padding: 0;
  margin: 0;
}
.breadcrumbs li{
  display: flex;
  align-items: center;
  color: var(--muted);
}
.breadcrumbs li + li::before{
  content: "/";
  padding: 0 8px;
  color: var(--muted);
}
.breadcrumbs a{
  color: var(--muted);
  text-decoration: none;
}
.breadcrumbs a:hover{
  color: var(--accent);
  text-decoration: underline;
}

/* Breadcrumbs: dropdown de "más zonas" (details/summary + links) */
.breadcrumbs-more{
  position: relative;
}
.breadcrumbs-more__details{
  position: relative;
}
.breadcrumbs-more__summary{
  cursor: pointer;
  color: var(--muted);
  list-style: none;
}
/* Oculta el marcador por defecto en algunos navegadores */
.breadcrumbs-more__summary::-webkit-details-marker{
  display: none;
}
.breadcrumbs-more__summary:hover{
  color: var(--accent);
  text-decoration: underline;
}
.breadcrumbs-more__menu{
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 220px;
  max-height: 320px;
  overflow: auto;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  z-index: 50;
}
.breadcrumbs-more__menu li{
  display: block; /* override breadcrumbs li flex */
}
.breadcrumbs-more__menu li + li::before{
  content: ""; /* no slash dentro del menú */
  padding: 0;
}
.breadcrumbs-more__menu a{
  display: block;
  padding: 8px 12px;
  color: var(--ink);
  text-decoration: none;
}
.breadcrumbs-more__menu a:hover{
  background: #f1f5f9;
  color: var(--accent);
}

/* Toolbar superior */
.toolbar {
  display:flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  padding: 14px 0;
  border-bottom:1px solid var(--border);
}
.pill {
  border: 1px solid var(--border);
  background:#fff;
  border-radius: 8px;
  padding: 6px 10px;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.toolbar label {
  color: var(--muted);
  font-size: 13px;
}
.toolbar select,
.toolbar input[type="number"] {
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  padding: 4px;
}

/* Quick filters */
.quick-filters {
  display:flex;
  gap:8px;
  padding: 10px 0;
  border-bottom:1px solid var(--border);
  position: sticky;
  top: 0;
  background:#fff;
  z-index: 5;

  /* Mobile UX: fila horizontal desplazable */
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
}
.quick-filters::-webkit-scrollbar{ display:none; }
.qchip {
  user-select:none;
  cursor:pointer;
  border:1px solid var(--border);
  background:var(--chip);
  padding:8px 10px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size: 13px;

  /* Evita que los chips se estiren o partan línea */
  flex: 0 0 auto;
  white-space: nowrap;

  /* Reset button styling (porque ahora son <button>) */
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--border);
  color: inherit;
  font: inherit;
}
.qchip:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.qchip.active {
  border-color: var(--accent);
  background:#e0f2fe;
}

@media (max-width: 544px) {
  .quick-filters{ padding: 8px 0; gap: 6px; }
  .qchip{ padding: 6px 10px; font-size: 12px; }
}

/* Layout de filtros + resultados */
.layout {
  display:grid;
  grid-template-columns: 280px 1fr;
  gap: 18px;
  padding-top: 16px;
}
aside.filters {
  border-right: 1px solid var(--border);
  padding-right: 12px;
  position: sticky;
  top: 64px;
  height: calc(100dvh - 64px);
  overflow:auto;
}
aside .fgroup {
  margin-bottom: 18px;
}
aside .fgroup h4 {
  margin: 0 0 8px;
  font-size: 14px;
}
aside .check {
  display:flex;
  align-items:center;
  gap:8px;
  padding:4px 2px;
}

/* Precio: slider + histograma + inputs */
.price-slider{
  margin-bottom: 10px;
}

.price-hist{
  height: 44px;
  display:flex;
  align-items:flex-end;
  gap:2px;
  padding: 6px 2px 2px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
}
.price-hist .bar{
  flex: 1 1 0;
  min-width: 2px;
  height: calc(var(--h, 0) * 100%);
  background: #e5e7eb;
  border-radius: 3px 3px 0 0;
}
.price-hist .bar.active{
  background: var(--accent);
}

.price-range{
  position: relative;
  height: 34px;
  margin-top: 10px;
}

.price-range-track{
  position:absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 6px;
  background: #e5e7eb;
  border-radius: 999px;
}

.price-range-fill{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 6px;
  background: var(--accent);
  border-radius: 999px;
  left: 0;
  width: 100%;
}

.price-range input[type="range"]{
  -webkit-appearance: none;
  appearance: none;
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height: 34px;
  margin: 0;
  background: transparent;
  pointer-events: none; /* lo activamos solo en el thumb */
}

.price-range input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #fff;
  border: 2px solid var(--accent);
  box-shadow: 0 2px 10px rgba(0,0,0,.14);
  pointer-events: auto;
  cursor: pointer;
}

.price-range input[type="range"]::-moz-range-thumb{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #fff;
  border: 2px solid var(--accent);
  box-shadow: 0 2px 10px rgba(0,0,0,.14);
  pointer-events: auto;
  cursor: pointer;
}

.price-range input[type="range"]::-webkit-slider-runnable-track{
  height: 6px;
  background: transparent;
}

.price-range input[type="range"]::-moz-range-track{
  height: 6px;
  background: transparent;
}

/* Inputs de precio (mantenemos layout existente) */
.price-inputs{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
.price-inputs .field{ display:flex; flex-direction:column; gap:6px; }
.price-inputs .combo{ position:relative; display:flex; align-items:center; gap:6px; }
.price-inputs input[type="number"]{
  width:100%;
  flex:1;
  border:1px solid var(--border);
  border-radius:8px;
  padding:8px 10px;
  background:#fff;
  font-size:14px;
}
.price-inputs .pdd-toggle{
  border:1px solid var(--border);
  background:#fff;
  border-radius:8px;
  padding:8px 10px;
  cursor:pointer;
  line-height:1;
}
.price-inputs .pdd{
  position:absolute;
  top:calc(100% + 6px);
  left:0; right:0;
  background:#fff;
  border:1px solid var(--border);
  border-radius:10px;
  box-shadow:0 8px 20px rgba(0,0,0,.08);
  max-height:260px;
  overflow:auto;
  z-index: 20;
}
.price-inputs .pdd[hidden]{ display:none; }
.price-inputs .pdd .sec{
  position:sticky; top:0;
  background:#f8fafc;
  color:#334155;
  font-weight:600;
  font-size:12px;
  padding:6px 10px;
  border-bottom:1px solid var(--border);
}
.price-inputs .pdd .opt{
  padding:8px 10px;
  cursor:pointer;
  font-size:14px;
}
.price-inputs .pdd .opt:hover{ background:#f1f5f9; }

/* Selector (Habitaciones / Baños) reutiliza mismo dropdown */
.selector-input .combo{ position:relative; display:flex; align-items:center; gap:6px; }
.selector-input input[type="number"]{
  width:100%;
  border:1px solid var(--border);
  border-radius:8px;
  padding:8px 10px;
  background:#fff;
  font-size:14px;
}
.selector-input .pdd-toggle{
  border:1px solid var(--border);
  background:#fff;
  border-radius:8px;
  padding:8px 10px;
  cursor:pointer;
  line-height:1;
}
.selector-input .pdd{
  position:absolute; top:calc(100% + 6px); left:0; right:0;
  background:#fff; border:1px solid var(--border); border-radius:10px;
  box-shadow:0 8px 20px rgba(0,0,0,.08);
  max-height:220px; overflow:auto; z-index:20;
}
.selector-input .pdd[hidden]{ display:none; }
.selector-input .pdd .opt{
  padding:8px 10px; cursor:pointer; font-size:14px;
}
.selector-input .pdd .opt:hover{ background:#f1f5f9; }
.selector-input .pdd .opt.active{ background:#e0f2fe; border-left:3px solid var(--accent); }

@media (max-width: 960px){
  .price-inputs{ grid-template-columns: 1fr; }
}
aside.filters select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  background: #fff;
  font-size: 14px;
}

/* Resultados */
main.results { min-height: 280px; }

/* ================= Province (tabla + mapa) ================= */
.province-layout{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  gap: 18px;
  align-items: start;
}

.province-list{
  min-width: 0; /* permite overflow-x en la tabla sin romper grid */
}

.province-map{
  /* color local para la chincheta de provincia */
  --map-marker: #e62e5c;
}

.province-map__canvas{
  width: 100%;
  height: 520px;
  min-height: 420px;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.province-map__hint{
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.province-popup .pp-title{
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 4px;
}

.province-popup .pp-title a{
  color: inherit;
  text-decoration: none;
}

.province-popup .pp-title a:hover{
  text-decoration: underline;
  color: var(--accent);
}

.province-popup .pp-meta{
  color: var(--muted);
  font-size: 12px;
}

/* Marker provincia con precio medio (divIcon) */
.province-price-marker{
  background: transparent;
  border: 0;
}

.province-price-marker .ppm-wrap{
  width: 160px;
  height: 44px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.province-price-marker .ppm-bubble{
  position: relative;
  display: inline-block;
  max-width: 160px;
  padding: 7px 12px;
  background: var(--map-marker);
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  line-height: 1;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  white-space: nowrap;
}

.province-price-marker .ppm-bubble::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: -9px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 9px solid var(--map-marker);
}

/* ================= Province: layout width fix (scoped) =================
   En `province_template.html` el layout usa `.container` y además `header.page`
   aplica padding horizontal. Eso provoca:
   - Desktop: mucho margen lateral (max-width 1200px)
   - Móvil: padding duplicado (header.page + container)

   Para no afectar a otros templates (home/listing), lo scopeamos a
   <body class="page-province">.
   ==================================================================== */

/* Evita el doble padding en el header: dejamos que lo gestione `.container` */
body.page-province header.page{
  padding-left: 0;
  padding-right: 0;
}

/* Más ancho útil en desktop + menos padding percibido en móvil */
body.page-province .container{
  max-width: 1440px;
  padding-left: 12px;
  padding-right: 12px;
}

@media (max-width: 544px){
  body.page-province .container{
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* Nota: ya no necesitamos un fix específico de header.page para el listado,
   porque el padding horizontal se gestiona de forma consistente con `.container`. */
.grid {
  display:grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.list {
  display:flex;
  flex-direction: column;
  gap: 12px;
}

/* Tarjetas */
.card {
  border:1px solid var(--border);
  border-radius: 12px;
  overflow:hidden;
  background:#fff;
  display:flex;
  flex-direction:column;
  transition: box-shadow .15s ease;
}
.card:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,.06);
}

/* Carrusel */
.carousel {
  position: relative;
  aspect-ratio: 4/3;
  background:#f3f4f6;
  overflow:hidden;
}
.carousel .slides {
  position: relative;
  width: 100%;
  height: 100%;
}
.carousel .slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .25s ease;
}
.carousel .slide.active {
  opacity: 1;
}
.carousel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}
.badge {
  position:absolute;
  left:10px;
  top:10px;
  background:var(--accent);
  color:#fff;
  font-size:12px;
  padding:4px 8px;
  border-radius:6px;
  z-index:3;
}
.badge.discount { background: var(--danger); }

.carousel .nav {
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  border:none;
  background: rgba(0,0,0,.45);
  color:#fff;
  width:34px;
  height:34px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  cursor:pointer;
  z-index:3;
}
.carousel .nav.prev { left:10px; }
.carousel .nav.next { right:10px; }
.carousel .nav:focus {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.carousel .dots {
  position:absolute;
  left:0;
  right:0;
  bottom:8px;
  display:flex;
  gap:6px;
  justify-content:center;
  z-index:3;
}
.carousel .dot {
  width:8px;
  height:8px;
  border-radius:999px;
  background: rgba(255,255,255,.7);
}
.carousel .dot.active {
  background: #fff;
}

/* Contenido de la card */
.card .body {
  padding: 12px;
  display:flex;
  flex-direction:column;
  gap: 8px;
}
.price-row {
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.price {
  font-weight: 700;
  font-size: 18px;
}
.old-price {
  color: var(--muted);
  text-decoration: line-through;
  font-size: 13px;
}
.subtitle {
  color: var(--muted);
  font-size: 13px;
}
.metrics {
  display:flex;
  gap:10px;
  color:#374151;
  font-size:13px;
}
.metrics .chip {
  background: var(--chip);
  padding:4px 8px;
  border-radius:6px;
}
.actions {
  display:flex;
  justify-content: space-between;
  align-items:center;
  margin-top: 6px;
}
.btn,
.btn:link,
.btn:visited,
.btn:hover,
.btn:active {
  background: var(--tabs-accent);
  color: #fff;
  text-decoration: none;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
}
.muted {
  color: var(--muted);
  font-size: 12px;
}
.result-count {
  padding: 10px 0;
  color: var(--muted);
}

/* Result header: contador + tabs */
.result-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.view-tabs{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:999px;
  padding:4px;
}
.view-tab{
  appearance:none;
  border:0;
  background:transparent;
  color:var(--ink);
  font-size:13px;
  padding:8px 12px;
  border-radius:999px;
  cursor:pointer;
}
.view-tab.active{
  background:var(--tabs-accent);
  color:#fff;
}

/* Map view */
#mapView{ margin-top: 10px; }
#map{
  width:100%;
  height: calc(100dvh - 260px);
  min-height: 520px;
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
}

/* Cluster marker (Leaflet.markercluster) */
.hab-cluster{
  background: transparent;
  border: 0;
}
.hab-cluster .hc-bubble{
  width: 92px;
  min-height: 44px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 2px;
  background: var(--map-marker);
  color:#fff;
  border-radius: 999px;
  box-shadow: 0 8px 22px rgba(0,0,0,.22);
  border: 2px solid rgba(255,255,255,.9);
  text-align:center;
  padding: 6px 10px;
}
.hab-cluster .hc-count{
  font-weight: 800;
  font-size: 13px;
  line-height: 1;
}
.hab-cluster .hc-from{
  font-weight: 700;
  font-size: 11px;
  line-height: 1.05;
  opacity: .95;
  white-space: nowrap;
}

/* Marker con precio (Leaflet divIcon) */
.price-marker{
  background: transparent;
  border: 0;
}
.price-marker .pm-wrap{
  width: 90px;
  height: 40px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none; /* el click lo gestiona el contenedor del marker */
}
.price-marker .pm-bubble{
  position: relative;
  display: inline-block;
  max-width: 90px;
  padding: 6px 10px;
  background: var(--map-marker);
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  white-space: nowrap;
}
.price-marker .pm-bubble::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 8px solid var(--map-marker);
}

/* Leaflet popup styling: look like a compact card */
.leaflet-popup-content{ margin: 10px 12px; }
.map-popup{ width: 280px; }
.map-popup .mp-thumb{
  width:100%;
  aspect-ratio: 4/3;
  border-radius:10px;
  overflow:hidden;
  background:#f3f4f6;
}
.map-popup .mp-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.map-popup .mp-body{ padding-top: 8px; display:flex; flex-direction:column; gap:6px; }
.map-popup .mp-price{ font-weight:700; font-size:16px; }
.map-popup .mp-subtitle{ color: var(--muted); font-size: 13px; }
.map-popup .mp-metrics{ display:flex; gap:8px; flex-wrap:wrap; }
.map-popup .mp-metrics .chip{ background: var(--chip); padding:4px 8px; border-radius:6px; font-size:12px; }
.map-popup .mp-actions{ margin-top: 6px; display:flex; justify-content:flex-start; }
.map-popup .mp-actions .btn{ font-size: 13px; }

.pagination {
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  padding: 14px 0;
}
.pagination .pbtn {
  border:1px solid var(--border);
  background:#fff;
  border-radius:8px;
  padding:8px 10px;
  text-decoration:none;
  color:inherit;
}
.pagination .pbtn.active {
  background: var(--accent);
  color:#fff;
  border-color: var(--accent);
}

@media (max-width: 960px) {
  .layout { grid-template-columns: 1fr; }
  aside.filters {
    position: static;
    height:auto;
    border-right: 0;
    padding-right:0;
  }

  .province-layout{
    grid-template-columns: 1fr;
  }

  .province-map{
    position: static;
  }

  .province-map__canvas{
    height: 420px;
    min-height: 420px;
  }
}