/* Xinalani interactive property map — v2 (21 Oct 2026)
   Theme path: /assets/css/property-map.css. Uses the Rooms 2026 tokens when present, with fallbacks.
   v2: "See on map" link in the Rooms page cards (.xr-room-maplink); list headings are h3. */
.xpm{
  --xpm-sand:var(--xr-sand,#ece9e4);
  --xpm-sand-light:var(--xr-sand-light,#FAF6F0);
  --xpm-clay:var(--xr-clay,#A4441E);
  --xpm-forest:var(--xr-forest,#757437);
  --xpm-ink:var(--xr-ink,#201e1d);
  --xpm-text:var(--xr-text,#565759);
  --xpm-line:var(--xr-line,#BBB3A4);
  --xpm-body:var(--xr-body,'Karla',system-ui,sans-serif);
  --xpm-title:var(--xr-prata,'Prata',Georgia,serif);
  font-family:var(--xpm-body);color:var(--xpm-text);
}
.xpm *,.xpm *::before,.xpm *::after{box-sizing:border-box}

/* Filter chips */
.xpm-filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px;padding:0;list-style:none}
.xpm-chip{font:600 .8rem/1 var(--xpm-body);letter-spacing:.06em;text-transform:uppercase;color:var(--xpm-ink);
  background:#fff;border:1px solid var(--xpm-line);border-radius:999px;padding:10px 16px;min-height:40px;cursor:pointer;
  transition:background .2s,border-color .2s,color .2s}
.xpm-chip[aria-pressed="true"]{background:var(--xpm-ink);border-color:var(--xpm-ink);color:#fff}
.xpm-chip:focus-visible,.xpm-pin:focus-visible,.xpm-close:focus-visible,.xpm-card a:focus-visible,.xpm-list button:focus-visible{outline:2px solid var(--xpm-clay);outline-offset:2px}
@media (hover:hover){.xpm-chip:not([aria-pressed="true"]):hover{border-color:var(--xpm-ink)}}

/* Map frame: scrolls sideways on phones, fits the width on desktop */
.xpm-wrap{position:relative}
.xpm-frame{position:relative;overflow-x:auto;overflow-y:hidden;border-radius:6px;background:#eceae6;
  -webkit-overflow-scrolling:touch;scrollbar-width:thin;overscroll-behavior-x:contain}
.xpm-stage{position:relative;width:max(100%,860px);aspect-ratio:2048/1340}
.xpm-stage>img{position:absolute;inset:0;width:100%;height:100%;max-width:none;display:block;user-select:none;-webkit-user-drag:none}
.xpm-pins{position:absolute;inset:0}
.xpm-rings{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.xpm-rings circle{fill:rgba(164,68,30,.14);stroke:var(--xpm-clay);stroke-width:5;opacity:0;transition:opacity .25s}
.xpm-rings g.is-soft circle{opacity:.45;stroke-dasharray:10 8}
.xpm-rings g.is-on circle{opacity:1;stroke-dasharray:none}

/* Pins */
.xpm-pin{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;padding:0;border:0;background:none;cursor:pointer;
  display:grid;place-items:center;transition:opacity .2s;-webkit-tap-highlight-color:transparent}
.xpm-dot{width:18px;height:18px;border-radius:50%;border:3px solid #fff;background:var(--xpm-forest);
  box-shadow:0 1px 4px rgba(32,30,29,.35);transition:transform .2s,background .2s}
.xpm-pin--room .xpm-dot{background:var(--xpm-clay);width:22px;height:22px}
.xpm-pin[aria-pressed="true"] .xpm-dot{transform:scale(1.2);background:var(--xpm-ink)}
@media (hover:hover){.xpm-pin:hover .xpm-dot{transform:scale(1.18)}}
.xpm-pin.is-off{opacity:0;pointer-events:none;visibility:hidden}
.xpm.is-ready .xpm-pin{animation:xpm-in .5s ease-out both}
@keyframes xpm-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

.xpm-intro{max-width:62ch;margin:0 0 20px;font-size:1.05rem;line-height:1.6}
.xpm-hint{margin:10px 0 0;font-size:.9rem;color:var(--xpm-text)}
@media (min-width:900px){.xpm-hint{display:none}}

/* Card: bottom sheet on phones, panel over the map on desktop */
.xpm-card{position:fixed;left:0;right:0;bottom:0;z-index:60;background:#fff;color:var(--xpm-text);
  border-radius:16px 16px 0 0;box-shadow:0 -8px 30px rgba(32,30,29,.18);max-height:62vh;overflow:auto;
  padding:0 max(16px,env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.xpm-card-head{position:absolute;top:24px;right:max(24px,calc(env(safe-area-inset-right,0px) + 8px));z-index:1}
.xpm-close{width:40px;height:40px;border:0;border-radius:50%;background:#fff;color:var(--xpm-ink);cursor:pointer;display:grid;place-items:center;box-shadow:0 1px 4px rgba(32,30,29,.25)}
.xpm-thumb{height:96px;border-radius:8px;background-color:var(--xpm-sand);background-repeat:no-repeat;margin:16px 0 14px}
.xpm-thumb img{width:100%;height:100%;object-fit:cover;border-radius:8px;display:block}
.xpm-eyebrow{font:600 .75rem/1.3 var(--xpm-body);letter-spacing:.12em;text-transform:uppercase;color:var(--xpm-clay);margin:0 0 6px}
.xpm-title{font:400 1.45rem/1.25 var(--xpm-title);color:var(--xpm-ink);margin:0 0 8px;text-wrap:balance}
.xpm-title:focus{outline:none}
.xpm-text{font-size:1rem;line-height:1.55;margin:0 0 12px}
.xpm-facts{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:6px;font-size:.95rem}
.xpm-facts li{display:flex;gap:8px;align-items:baseline}
.xpm-facts li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--xpm-forest);transform:translateY(-2px)}
.xpm-numbers{font-size:.85rem;margin:0 0 14px;color:var(--xpm-text)}
.xpm-numbers b{color:var(--xpm-ink);font-weight:600}
.xpm-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.xpm-btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:12px 24px;border-radius:999px;
  background:var(--xpm-clay);border:1px solid var(--xpm-clay);color:#fff!important;font:600 .8rem/1 var(--xpm-body);
  letter-spacing:.06em;text-transform:uppercase;text-decoration:none}
.xpm-link{font:600 .8rem/1 var(--xpm-body);letter-spacing:.06em;text-transform:uppercase;color:var(--xpm-ink)!important;
  text-decoration:underline;text-underline-offset:4px;padding:12px 4px}
@media (hover:hover){.xpm-btn:hover{background:#8c3a19;border-color:#8c3a19}}

@media (min-width:900px){
  .xpm-thumb{height:120px}
  .xpm-card{position:absolute;left:auto;right:16px;top:16px;bottom:auto;width:360px;max-height:calc(100% - 32px);
    border-radius:10px;box-shadow:0 10px 30px rgba(32,30,29,.2);padding:0 20px 20px}
}

/* List of all places (also the no-JavaScript version) */
.xpm-list{margin:18px 0 0;border-top:1px solid var(--xpm-line);padding-top:12px}
.xpm-list summary{cursor:pointer;font:600 .8rem/1.4 var(--xpm-body);letter-spacing:.06em;text-transform:uppercase;color:var(--xpm-ink);padding:8px 0}
.xpm-list-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px;margin-top:12px}
.xpm-list h3{font:600 .75rem/1.3 var(--xpm-body);letter-spacing:.12em;text-transform:uppercase;color:var(--xpm-clay);margin:0 0 6px}
.xpm-list ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.xpm-list button{font:inherit;font-size:.95rem;color:var(--xpm-ink);background:none;border:0;padding:6px 0;cursor:pointer;text-align:left;text-decoration:underline;text-decoration-color:var(--xpm-line);text-underline-offset:4px}

/* "See on map" link inside the Rooms page cards — a quiet text link next to "Explore …" */
html body #xr-page .xr-rcard .xr-rcard-actions{display:flex;flex-wrap:wrap;align-items:center;column-gap:32px;row-gap:4px}
html body #xr-page .xr-room-maplink{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:10px 0;
  font:600 13px/1.5 var(--xr-body,'Karla',system-ui,sans-serif);letter-spacing:.12em;text-transform:uppercase;
  color:var(--xr-text,#565759);text-decoration:none}
html body #xr-page .xr-room-maplink span{text-decoration:underline;text-decoration-color:var(--xr-line,#BBB3A4);text-underline-offset:5px;text-decoration-thickness:1px}
html body #xr-page .xr-room-maplink svg{flex:none;color:var(--xr-clay,#A4441E)}
@media (hover:hover) and (pointer:fine){html body #xr-page .xr-room-maplink:hover{color:var(--xr-ink,#201e1d)}html body #xr-page .xr-room-maplink:hover span{text-decoration-color:currentColor}}
html body #xr-page .xr-room-maplink:focus-visible{outline:2px solid var(--xr-clay,#A4441E);outline-offset:3px;border-radius:2px}
html body #xr-page .xr-room-maplink[hidden]{display:none}
/* Phones + tablets: the two card links stack, centred like the "Explore …" link */
@media (max-width:960px){
  html body #xr-page .xr-rcard .xr-rcard-actions{flex-direction:column;justify-content:center;align-items:center;row-gap:0}
}
/* Phones: the bottom card sits above the WhatsApp button (z-index 99999), so its links are never covered */
@media (max-width:899px){
  html body .xpm-card{z-index:2147483600}
}

@media (prefers-reduced-motion:reduce){
  .xpm *{transition:none!important;animation:none!important}
}