/* WordPress additions to the mockup styles: multi-select checkbox dropdowns (search). */

.ms { position: relative; }
.ms__btn {
  display: flex; align-items: center; width: 100%; height: 44px; padding: 0 28px 0 0;
  border: 0; border-bottom: 1px solid var(--gold); border-radius: 0; background: transparent;
  color: inherit; font: inherit; font-size: 15px; text-align: left; cursor: pointer;
}
.ms__btn:focus-visible { outline: none; border-bottom-width: 2px; }
.ms__value { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ms > i { position: absolute; right: 2px; top: 22px; transform: translateY(-50%); pointer-events: none; font-size: 15px; color: var(--gold); transition: transform .25s; }
.ms.is-open > i { transform: translateY(-50%) rotate(180deg); }
.field .ms__btn, .filters .ms__btn { border-bottom-color: var(--line-2); color: var(--text); }
.field .ms__btn:focus-visible, .filters .ms__btn:focus-visible { border-bottom-color: var(--gold); }

/* Panel: dropdown on desktop */
.ms__panel {
  position: absolute; z-index: 60; top: calc(100% + 8px); left: 0; width: max(100%, 300px); max-width: 360px;
  background: #fff; color: var(--text); border: 1px solid var(--line); box-shadow: 0 18px 40px rgba(14, 14, 15, .16);
  display: flex; flex-direction: column; max-height: 420px;
}
.ms__panel[hidden] { display: none; }
.ms__head { display: none; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.ms__title { font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.ms__x { border: 0; background: none; font-size: 20px; color: var(--text); cursor: pointer; padding: 4px; }
.ms__find { position: relative; padding: 12px 14px 8px; border-bottom: 1px solid var(--line); }
.ms__find i { position: absolute; left: 14px; top: 50%; transform: translateY(-40%); color: var(--muted); font-size: 15px; }
.ms__search { width: 100%; height: 34px; padding: 0 0 0 24px; border: 0; background: transparent; font: inherit; font-size: 14px; color: var(--text); outline: none; }
.ms__list { overflow: auto; overscroll-behavior: contain; padding: 6px 0; flex: 1; }
.ms__opt { display: flex; align-items: center; gap: 10px; padding: 8px 18px 8px calc(18px + var(--depth, 0) * 18px); font-size: 14px; line-height: 1.35; cursor: pointer; }
.ms__opt:hover { background: #f6f5f1; }
.ms__opt[hidden] { display: none; }
.ms__opt input { width: 16px; height: 16px; margin: 0; accent-color: var(--gold); flex: none; }
.ms__opt span { flex: 1; }
.ms__opt small { color: var(--muted); font-size: 12px; }
.ms__none { padding: 10px 18px; font-size: 13px; color: var(--muted); }
.ms__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--line); }
.ms__clear { border: 0; background: none; padding: 0; font: inherit; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.ms__clear:hover { color: var(--text); }

.ms--up .ms__panel { top: auto; bottom: calc(100% + 8px); box-shadow: 0 -18px 40px rgba(14, 14, 15, .16); }

/* Phones: bottom sheet (popup) with a dimmed page behind */
@media (max-width: 720px) {
  .ms__panel.is-sheet {
    position: fixed; top: auto; bottom: 0; left: 0; right: 0; width: auto; max-width: none; max-height: 78vh;
    border: 0; z-index: 1001;
    /* The dimmed backdrop is the panel's own shadow: the search sits in its own stacking context */
    box-shadow: 0 0 0 100vmax rgba(14, 14, 15, .45);
  }
  .ms__panel.is-sheet .ms__head { display: flex; }
  .ms__panel.is-sheet .ms__opt { padding-top: 11px; padding-bottom: 11px; font-size: 15px; }
  .ms__panel.is-sheet .ms__foot .btn { flex: 1; }
  html.ms-sheet { overflow: hidden; }
}

/* Listing pagination (the mockup showed every result; the real stock is paged) */
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin: 44px 0 10px; padding-top: 26px; border-top: 1px solid var(--line); }
.pager[hidden] { display: none; }
.pager__info { margin: 0; font-size: 13px; color: var(--muted); letter-spacing: .02em; }
.pager__nav { display: flex; align-items: center; gap: 6px; }
.pager__num, .pager__step {
  display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 10px;
  border: 1px solid var(--line-2); background: transparent; color: var(--text); font: inherit; font-size: 14px; cursor: pointer;
  transition: border-color .2s, background-color .2s, color .2s;
}
.pager__num:hover, .pager__step:hover:not([disabled]) { border-color: var(--gold); color: var(--gold-deep); }
.pager__num.is-current { background: var(--ink); border-color: var(--ink); color: var(--on-ink); cursor: default; }
.pager__step[disabled] { opacity: .35; cursor: default; }
.pager__step i { font-size: 16px; }
.pager__gap { padding: 0 4px; color: var(--muted); }
@media (max-width: 600px) {
  .pager { justify-content: center; }
  .pager__info { width: 100%; text-align: center; }
  .pager__num, .pager__step { min-width: 38px; height: 38px; }
}

/* WordPress admin bar (logged-in users). WordPress pushes <html> down 32px (46px up to 782px),
   but the transparent topbar (absolute) and the menu bar (fixed / sticky) are placed from the
   top of the viewport, so the bar covered them (Favourites, phone…). Move them below it. */
.admin-bar { --wpab: 32px; }
@media screen and (max-width: 782px) { .admin-bar { --wpab: 46px; } }
.admin-bar .nav { top: var(--wpab); }
.admin-bar.has-hero .topbar { top: var(--wpab); }
.admin-bar.has-hero .nav { top: calc(var(--wpab) + 38px); }
.admin-bar.has-hero .nav.is-compact { top: var(--wpab); }
.admin-bar .mnav { top: var(--wpab); }
/* Phones: the admin bar scrolls away with the page, so the stuck menu bar goes back to the top */
@media screen and (max-width: 600px) {
  .admin-bar .nav, .admin-bar.has-hero .nav.is-compact { top: 0; }
}

/* Listing: results are fetched from the server; dim them while a new page loads */
.rlayout { transition: opacity .2s; }
.rlayout.is-loading { opacity: .45; pointer-events: none; }

/* Server pager (koble/listing/ah-pagination.php): links instead of buttons */
a.pager__num, a.pager__step { text-decoration: none; }
.pager__step.is-disabled { opacity: .35; cursor: default; }

/* Location / Type as a collapsible tree: municipality › areas, type › subtypes.
   The row selects (a municipality = all its areas); the caret on the right opens the group. */
.ms__row { display: flex; align-items: stretch; }
.ms__row > .ms__opt { flex: 1; min-width: 0; }
.ms__opt.is-parent span { font-weight: 500; }
.ms__tog {
  flex: none; width: 44px; display: flex; align-items: center; justify-content: center;
  border: 0; background: none; color: var(--muted); cursor: pointer; padding: 0;
}
.ms__tog:hover, .ms__tog:focus-visible { color: var(--gold-deep, var(--gold)); background: #f6f5f1; outline: none; }
.ms__tog i { font-size: 15px; transition: transform .2s; }
.ms__item.is-open > .ms__row .ms__tog i { transform: rotate(180deg); }
.ms__kids { background: #faf9f6; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ms__kids[hidden] { display: none; }
.ms__kids .ms__opt { padding-left: 46px; }
.ms__item[hidden] { display: none; }
/* Counts in one column: rows without a caret keep its space */
.ms__panel--tree .ms__item:not(.has-kids) > .ms__row > .ms__opt { padding-right: 62px; }
.ms__opt input:indeterminate { accent-color: var(--gold); }
@media (max-width: 720px) {
  .ms__panel.is-sheet .ms__opt { min-height: 48px; }
  .ms__panel.is-sheet .ms__opt input { width: 20px; height: 20px; }
  .ms__panel.is-sheet .ms__tog { width: 56px; }
  .ms__panel.is-sheet.ms__panel--tree .ms__item:not(.has-kids) > .ms__row > .ms__opt { padding-right: 74px; }
  .ms__panel.is-sheet .ms__kids .ms__opt { padding-left: 50px; }
  .ms__panel.is-sheet .ms__search { font-size: 16px; }   /* iOS: no zoom on focus */
}

/* Location groups: Costa del Sol (west → east), then the rest of the province */
.ms__group { margin: 0; padding: 14px 18px 6px; font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.ms__list.is-searching .ms__group { display: none; }

/* Beds & baths / Price panels (wp.js) */
.filters__form.is-enhanced { grid-template-columns: repeat(4, minmax(0, 1fr)) auto; }
@media (max-width: 1100px) { .filters__form.is-enhanced { grid-template-columns: repeat(2, minmax(0, 1fr)) auto; } }
@media (max-width: 860px) { .filters__form.is-enhanced { grid-template-columns: 1fr 1fr; } }
.ms__panel.pop { width: max(100%, 340px); max-width: 380px; max-height: none; }
.pop__body { padding: 18px; display: grid; gap: 20px; overflow: auto; }
.pop__h { display: block; margin: 0 0 10px; font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.pills { display: flex; }
.pill {
  flex: 1 1 0; min-width: 0; height: 42px; padding: 0 4px; margin-left: -1px;
  border: 1px solid var(--line-2); background: #fff; color: var(--text); font: inherit; font-size: 14px; cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
.pill:first-child { margin-left: 0; }
.pill:hover { border-color: var(--gold); position: relative; z-index: 1; }
.pill[aria-checked="true"] { background: var(--ink); border-color: var(--ink); color: var(--on-ink); position: relative; z-index: 2; }
.pill:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; position: relative; z-index: 3; }
.price-in { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: end; }
.price-in label { display: block; min-width: 0; }
.price-in input {
  width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 0; background: #fff;
  font: inherit; font-size: 15px; color: var(--text); outline: none;
}
.price-in input.is-active, .price-in input:focus { border-color: var(--gold); }
.price-in__dash { padding-bottom: 12px; color: var(--muted); }
.price-hint { margin: -8px 0 0; min-height: 0; font-size: 12px; color: var(--gold-deep, var(--muted)); }
.price-hint:empty { display: none; }
.price-picks { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; max-height: 236px; overflow: auto; overscroll-behavior: contain; border-top: 1px solid var(--line); padding-top: 6px; }
.price-pick { border: 0; background: none; padding: 9px 4px; text-align: left; font: inherit; font-size: 14px; color: var(--text); cursor: pointer; border-bottom: 1px solid #f1efe9; }
.price-pick:hover { color: var(--gold-deep, var(--gold)); }
.price-pick[aria-selected="true"] { font-weight: 500; color: var(--gold-deep, var(--gold)); }
@media (max-width: 720px) {
  .ms__panel.pop.is-sheet { max-width: none; }
  .ms__panel.is-sheet .pill { height: 48px; font-size: 15px; }
  .ms__panel.is-sheet .price-in input { height: 50px; font-size: 16px; }   /* iOS: no zoom on focus */
  .ms__panel.is-sheet .price-pick { padding: 13px 4px; font-size: 15px; }
  .ms__panel.is-sheet .price-picks { max-height: 40vh; }
}

/* Property page: back to the results + previous / next of that results page (wp.js AH.ppNav) */
.pp-nav { display: flex; align-items: center; gap: 18px; margin: 24px 0 20px; }
.pp-nav .pp-crumbs { margin: 0; flex: 1; min-width: 0; }
.pp-back {
  display: inline-flex; align-items: center; gap: 10px; flex: none; height: 40px; padding: 0 16px 0 12px;
  border: 1px solid var(--line-2); color: var(--text); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; transition: border-color .2s, color .2s;
}
.pp-back i { font-size: 16px; color: var(--gold-deep, var(--gold)); transition: transform .2s; }
.pp-back:hover { border-color: var(--gold); color: var(--gold-deep, var(--text)); }
.pp-back:hover i { transform: translateX(-3px); }
.pp-step { display: flex; align-items: center; gap: 4px; flex: none; margin-left: auto; }
.pp-step__btn {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border: 1px solid var(--line-2); color: var(--text); text-decoration: none; transition: border-color .2s, color .2s;
}
.pp-step__btn:hover { border-color: var(--gold); color: var(--gold-deep, var(--text)); }
.pp-step__btn.is-off { opacity: .3; }
.pp-step__btn i { font-size: 16px; }
.pp-step__pos { min-width: 92px; text-align: center; font-size: 13px; color: var(--muted); white-space: nowrap; }
.pp-step__pos span { font-size: 12px; }
@media (max-width: 720px) {
  .pp-nav { margin: 14px 0 14px; gap: 10px; }
  .pp-nav .pp-crumbs { display: none; }          /* the back button does the job on phones */
  .pp-back { height: 44px; padding: 0 14px 0 10px; }
  .pp-step__btn { width: 44px; height: 44px; }
  .pp-step__pos { min-width: 0; padding: 0 6px; font-size: 12px; }
}
@media (max-width: 400px) { .pp-back__x { display: none; } }

/* Leaflet maps (property page, contact): Leaflet's panes use z-index 400–1000, above the sticky
   menu, the phone bar, the WhatsApp button and the search panels. Keep them inside the map. */
.map { position: relative; z-index: 0; isolation: isolate; }
.pp-step__btn.is-busy { opacity: .5; pointer-events: none; }

/* Phones: the top bar keeps the phone number whole (the "Favourites" label is hidden by the
   mockup rule at 720px; here the spacing tightens on the narrowest screens) */
@media (max-width: 420px) {
  .topbar__in { gap: 10px; }
  .topbar__contact, .topbar__tools { gap: 14px; }
  .topbar__contact a { white-space: nowrap; }
  .topbar .lang button { padding-inline: 7px; }
}