/* Qualoo Stays map page styles. Consolidated in cascade order from the former inline layers. */
html, body { height: 100%; margin: 0; overflow: hidden; }
    .site-shell { min-height: 100vh; height: 100vh; }
    .nav-global { position: relative; z-index: 30; }
    .page-wrap.full-width {
      height: calc(100vh - 74px);
      min-height: calc(100vh - 74px);
      overflow: hidden;
    }
    .half-map-shell,
    .half-map-content,
    .half-map-inner {
      height: 100%;
      min-height: 100%;
    }
    .half-map-inner {
      display: grid;
      gap: 0;
      align-items: stretch;
    }
    .template-filters,
    .template-results,
    .template-map {
      min-height: 0;
      height: 100%;
    }
    .template-filters {
      overflow-x: hidden;
      overflow-y: auto;
      scrollbar-width: none;
    }
    .template-filters::-webkit-scrollbar {
      width: 0;
      height: 0;
      display: none;
    }
    .template-mini-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      margin: 0 0 12px;
    }
    .template-mini-grid.three {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .template-mini-field {
      display: grid;
      gap: 6px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .02em;
    }
    .template-mini-field .template-select,
    .template-mini-field .template-field {
      height: 42px;
      min-width: 0;
      margin: 0;
      padding: 0 10px;
      border-radius: 12px;
      font-size: 13px;
    }
    .template-children-ages {
      display: grid;
      gap: 8px;
      margin: 0 0 14px;
    }
    .template-children-ages:empty {
      display: none;
    }
    .template-child-age-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 88px;
      align-items: center;
      gap: 10px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
    }
    .template-results {
      display: flex;
      flex-direction: column;
      overflow: hidden;
      border-left: 1px solid rgba(255,255,255,0.08);
      border-right: 1px solid rgba(255,255,255,0.08);
      padding: 12px 10px 12px 10px;
    }
    .template-strip {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin: 0 0 14px 0;
      flex: 0 0 auto;
    }
    .template-results-head {
      flex: 0 0 auto;
      margin-bottom: 12px;
    }
    .template-results-list {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      overflow-x: hidden;
      padding-right: 8px;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
    .template-results-list::-webkit-scrollbar {
      width: 0;
      height: 0;
      display: none;
    }
    .listing-card {
      min-height: 220px;
    }
    .listing-card-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .template-map {
      position: relative;
      overflow: hidden;
      background: var(--stays-signal-soft);
    }
    .template-map-panel {
      position: sticky;
      top: 0;
      height: calc(100vh - 74px);
      min-height: calc(100vh - 74px);
      overflow: hidden;
      background: var(--stays-signal-soft);
    }
    .template-map-toolbar,
    .template-map-count {
      position: absolute;
      z-index: 5;
    }
    .template-map-toolbar {
      top: 10px;
      left: 10px;
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }
    .template-map-count {
      top: 10px;
      right: 10px;
      font-size: 12px;
    }
    .template-search-area-btn {
      position: absolute;
      z-index: 6;
      top: 62px;
      left: 50%;
      transform: translateX(-50%);
      height: 42px;
      padding: 0 18px;
      border: 1px solid rgba(37,99,235,.18);
      border-radius: 999px;
      background: rgba(255,255,255,.92);
      color: var(--stays-ink);
      font-weight: 900;
      box-shadow: 0 12px 28px rgba(15,23,42,.10);
      cursor: pointer;
      backdrop-filter: blur(14px);
    }
    .template-search-area-btn:hover {
      background: rgba(248,250,252,.98);
    }
    #map {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      min-height: calc(100vh - 74px);
      background: var(--stays-signal-soft);
    }
    .template-map,
    .template-map-panel {
      background: var(--stays-signal-soft);
    }
    .maplibregl-ctrl-group {
      background: rgba(255,255,255,0.96);
      border: 1px solid rgba(148, 163, 184, 0.24);
      box-shadow: 0 14px 32px rgba(15,23,42,0.12);
    }
    .maplibregl-ctrl-group button {
      filter: none;
    }
    .maplibregl-ctrl-attrib {
      background: rgba(255,255,255,0.86);
      color: rgba(15, 23, 42, 0.76);
    }
    .maplibregl-ctrl-attrib a {
      color: var(--stays-signal);
    }
    .qualoo-hotel-marker {
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;
      filter: none;
      /* MapLibre owns this element's transform. Never animate or override it. */
      transition: none;
      position: absolute;
    }
    .qualoo-hotel-marker:hover {
      filter: drop-shadow(0 6px 14px rgba(37,99,235,.38));
      z-index: 10;
    }
    .qualoo-hotel-marker.is-active {
      filter: drop-shadow(0 6px 16px rgba(37,99,235,.52));
      z-index: 20;
    }
    .qualoo-hotel-cluster-marker {
      display: grid;
      place-items: center;
      min-width: 42px;
      height: 42px;
      padding: 0 10px;
      border: 3px solid var(--stays-surface);
      border-radius: 999px;
      background: var(--stays-signal);
      color: var(--stays-surface);
      box-shadow: 0 5px 16px rgba(29, 78, 216, .32);
      font-family: 'DM Sans', sans-serif;
      font-size: 13px;
      font-weight: 900;
      line-height: 1;
      cursor: pointer;
    }
    .qualoo-hotel-cluster-marker:hover { background: var(--stays-signal-hover); box-shadow: 0 7px 20px rgba(29, 78, 216, .4); }
    .qualoo-hotel-cluster-marker:focus-visible { outline: 3px solid rgba(47, 128, 237, .42); outline-offset: 2px; }
    .qualoo-static-map {
      position: absolute;
      inset: 0;
      overflow: hidden;
      background:
        radial-gradient(circle at 70% 28%, rgba(59,130,246,.12), transparent 28%),
        radial-gradient(circle at 38% 62%, rgba(14,165,233,.12), transparent 32%),
        linear-gradient(135deg, var(--stays-night-text) 0%, #e8f1fb 54%, #dce8f7 100%);
    }
    .qualoo-static-map::before {
      content: "";
      position: absolute;
      inset: -20%;
      opacity: .32;
      background-image:
        linear-gradient(rgba(148,163,184,.16) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148,163,184,.16) 1px, transparent 1px);
      background-size: 72px 72px;
      transform: rotate(-8deg);
    }
    .qualoo-static-map::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(115deg, transparent 0 38%, rgba(59,130,246,.08) 39% 40%, transparent 41%),
        linear-gradient(22deg, transparent 0 62%, rgba(16,185,129,.07) 63% 64%, transparent 65%);
      pointer-events: none;
    }
    .qualoo-static-label {
      position: absolute;
      left: 16px;
      bottom: 14px;
      z-index: 3;
      color: rgba(15,23,42,.58);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .qualoo-static-marker {
      position: absolute;
      z-index: 8;
      transform: translate(-50%, -100%);
      padding: 0;
      border: 0;
      background: transparent;
      color: inherit;
    }
    .qualoo-static-marker:hover {
      transform: translate(-50%, -100%) translateY(-2px) scale(1.04);
    }
    .qualoo-static-popup {
      position: absolute;
      z-index: 30;
      transform: translate(-50%, calc(-100% - 34px));
    }
    .qualoo-hotel-marker .hm-body {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 5px 10px;
      border-radius: 20px;
      background: var(--stays-ink);
      border: 2px solid var(--stays-surface);
      color: var(--stays-surface);
      font-family: 'DM Sans', sans-serif;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: -.01em;
      white-space: nowrap;
      line-height: 1;
      box-shadow: 0 2px 10px rgba(15,23,42,.30), inset 0 1px 0 rgba(255,255,255,.10);
    }
    .qualoo-hotel-marker:hover .hm-body {
      background: #1e3a5f;
    }
    .qualoo-hotel-marker.is-active .hm-body {
      background: var(--stays-signal);
      border-color: var(--stays-surface);
      box-shadow: 0 2px 12px rgba(37,99,235,.45), inset 0 1px 0 rgba(255,255,255,.18);
    }
    .qualoo-hotel-marker .hm-tip {
      width: 0;
      height: 0;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-top: 6px solid var(--stays-ink);
      margin-top: -1px;
    }
    .qualoo-hotel-marker:hover .hm-tip {
      border-top-color: #1e3a5f;
    }
    .qualoo-hotel-marker.is-active .hm-tip {
      border-top-color: var(--stays-signal);
    }
    .maplibregl-popup {
      max-width: calc(100vw - 32px);
    }
    .maplibregl-popup-content {
      padding: 0;
      background: transparent;
      box-shadow: none;
    }
    .maplibregl-popup-tip {
      border-top-color: var(--stays-surface);
      border-bottom-color: var(--stays-surface);
    }
    .qualoo-map-popup {
      width: min(258px, calc(100vw - 52px));
      overflow: hidden;
      border-radius: 12px;
      background: var(--stays-surface);
      border: 1px solid rgba(148,163,184,.18);
      box-shadow: 0 24px 60px rgba(15,23,42,.18);
      color: var(--stays-ink);
      font-family: 'DM Sans', sans-serif;
    }
    .qualoo-map-popup img {
      width: 100%;
      height: 120px;
      display: block;
      object-fit: cover;
      background: var(--stays-canvas);
    }
    .qualoo-map-popup-body {
      padding: 12px;
    }
    .qualoo-map-popup-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 8px;
    }
    .qualoo-map-popup-price {
      color: var(--stays-ink);
      font-size: 14px;
      font-weight: 800;
      line-height: 1;
    }
    .qualoo-map-popup-price span {
      display: inline-block;
      margin-left: 4px;
      color: var(--stays-ink-muted);
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
    }
    .qualoo-map-popup-rating {
      display: flex;
      align-items: center;
      gap: 5px;
      flex-shrink: 0;
    }
    .qualoo-map-popup-rating-score {
      padding: 3px 7px;
      border-radius: 6px;
      background: var(--stays-evidence-deep);
      color: var(--stays-surface);
      font-size: 12px;
      font-weight: 900;
      line-height: 1;
    }
    .qualoo-map-popup-rating-label {
      color: var(--stays-ink-muted);
      font-size: 11px;
      font-weight: 700;
    }
    .qualoo-map-popup-name {
      color: var(--stays-ink);
      font-size: 13px;
      font-weight: 800;
      line-height: 1.32;
      margin-bottom: 5px;
    }
    .qualoo-map-popup-stars {
      display: flex;
      align-items: center;
      gap: 1px;
      margin-bottom: 6px;
    }
    .qualoo-map-popup-stars svg {
      width: 11px;
      height: 11px;
      fill: var(--stays-rating);
      flex-shrink: 0;
    }
    .qualoo-map-popup-meta {
      color: var(--stays-ink-muted);
      font-size: 11px;
      line-height: 1.4;
      margin-bottom: 10px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .qualoo-map-popup-btn {
      display: block;
      width: 100%;
      border: 0;
      border-radius: 8px;
      background: var(--stays-signal);
      color: var(--stays-surface);
      padding: 9px 12px;
      text-align: center;
      text-decoration: none;
      font-size: 12px;
      font-weight: 800;
      box-sizing: border-box;
      letter-spacing: .01em;
      cursor: pointer;
    }
    .qualoo-map-popup-btn:hover {
      background: var(--stays-signal-hover);
    }
    @media (max-width: 1200px) {
      html, body { overflow: auto; }
      .page-wrap.full-width { height: auto; min-height: 0; overflow: visible; }
      .template-map-panel, #map { position: relative; height: 70vh; min-height: 70vh; }
    }
.site-shell,
    .page-wrap.full-width,
    .half-map-shell,
    .half-map-content {
      width: 100%;
      max-width: none;
    }
    .half-map-shell {
      display: block;
      margin: 0;
      padding: 0;
    }
    .half-map-content {
      margin: 0;
      padding: 0;
    }
    .half-map-inner {
      width: 100vw;
      max-width: 100vw;
    }
    .template-filters {
      width: 300px;
      max-width: 300px;
    }
    .template-results {
      width: auto;
      max-width: none;
    }
    .template-map {
      width: auto;
      max-width: none;
    }
    .template-map-panel {
      width: 100%;
    }
    #map {
      width: 100%;
    }
    .listing-card {
      display: grid;
      grid-template-columns: minmax(190px, 38%) minmax(0, 62%);
      align-items: stretch;
      min-height: 220px;
      width: 100%;
      overflow: hidden;
    }
    .listing-card-media {
      min-width: 0;
      min-height: 220px;
      overflow: hidden;
    }
    .listing-card-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .listing-card-body {
      min-width: 0;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 14px;
      padding: 18px 18px 16px;
      overflow: hidden;
    }
    .listing-card-top {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 16px;
    }
    .listing-title,
    .listing-location,
    .listing-copy,
    .meta-pills,
    .listing-bottom,
    .tag-links {
      min-width: 0;
    }
    .meta-pills,
    .tag-links {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .listing-copy {
      line-height: 1.45;
      margin: 12px 0 0;
    }
    .provider-price {
      flex: 0 0 auto;
      text-align: right;
    }
    .details-btn {
      flex: 0 0 auto;
      white-space: nowrap;
    }

    @media (max-width: 1400px) {
      .half-map-inner {
        grid-template-columns: 280px minmax(360px, 0.95fr) minmax(520px, 1.15fr);
      }
      .listing-card {
        grid-template-columns: minmax(170px, 36%) minmax(0, 64%);
      }
    }

    @media (max-width: 1200px) {
      html, body { overflow: auto; }
      .half-map-inner {
        grid-template-columns: 1fr;
        width: 100%;
        max-width: 100%;
      }
      .template-filters,
      .template-results,
      .template-map {
        width: 100%;
        max-width: 100%;
        height: auto;
      }
      .template-results-list {
        max-height: none;
      }
      .template-map-panel,
      #map {
        position: relative;
        height: 70vh;
        min-height: 70vh;
      }
    }

    @media (max-width: 760px) {
      .listing-card {
        grid-template-columns: 1fr;
        min-height: 0;
      }
      .listing-card-media {
        min-height: 190px;
      }
      .listing-card-body {
        padding: 16px;
      }
      .listing-card-top {
        gap: 12px;
      }
      .listing-title {
        font-size: 1.9rem;
        line-height: 1.05;
      }
    }
/* Clean card content for map view */
  .template-results .listing-copy,
  .template-results .tag-links {
    display: none;
  }

  .template-results .listing-bottom {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 12px;
    min-height: auto;
  }

  /* Strong rounded card treatment */
  .template-results .listing-card {
    isolation: isolate;
  }

  .template-results .listing-card-media,
  .template-results .listing-card-body,
  .template-results .listing-card-media img {
    border-radius: 0;
  }

  /* Keep the card body compact now that extra text is removed */
  .template-results .listing-card-body {
    gap: 10px;
  }

  /* Make sure the action stays aligned cleanly */
  .template-results .details-btn {
    margin-left: auto;
  }
.template-results .listing-card{
  border-radius:16px;
  overflow:hidden;
}
.template-results .listing-card-media img{
  border-radius:0;
}
.template-results .template-results-list .listing-card{
    border-radius: 16px;
    overflow: hidden;
    background: var(--stays-surface);
    box-shadow: 0 0 0 1px rgba(0,0,0,0.04) inset;
  }
  .template-results .template-results-list .listing-card-media{
    overflow: hidden;
  }
  .template-results .template-results-list .listing-card-media img{
    display:block;
  }
/* Hotel result card redesign based on the provided half-map reference */

  .template-results-head {
    display: none;
  }

  .template-strip {
    margin: 0 0 8px 0;
    padding: 10px 12px;
    border-radius: 0;
    background: #111b38;
    border: 1px solid rgba(91, 122, 205, 0.25);
  }

  .template-results-list {
    display: flex;
    flex-direction: column;
  }

  .template-results .template-results-list .listing-card.hotel-result-card {
    position: relative;
    display: grid;
    grid-template-columns: 164px minmax(0, 1fr);
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    isolation: isolate;
    background: #11182e;
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  }

  .template-results .template-results-list .hotel-result-card:hover {
    border-color: rgba(56, 145, 255, 0.65);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(56, 145, 255, 0.28) inset;
    transform: translateY(-1px);
  }

  .template-results .template-results-list .hotel-card-media {
    min-height: 0;
    height: 100%;
    overflow: hidden;
    background: #0a1022;
  }

  .template-results .template-results-list .hotel-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0;
  }

  .template-results .template-results-list .hotel-card-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 8px;
  }

  .hotel-card-main {
    min-width: 0;
  }

  .hotel-card-rating {
    color: #ffd23f;
    letter-spacing: 2px;
    font-size: 13px;
    line-height: 1;
    font-weight: 800;
    margin: 0 0 9px 0;
    text-shadow: 0 0 14px rgba(255, 210, 63, 0.12);
  }

  .template-results .template-results-list .hotel-card-title {
    margin: 0;
    color: var(--stays-surface);
    font-size: 15px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .template-results .template-results-list .hotel-card-location {
    margin: 7px 0 0 0;
    color: var(--stays-night-muted);
    font-size: 12px;
    line-height: 1.25;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .hotel-score-badge {
    position: absolute;
    min-width: 34px;
    height: 28px;
    padding: 0 8px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #22c55e;
    color: var(--stays-surface);
    font-size: 13px;
    line-height: 1;
    font-weight: 900;
    box-shadow: none;
  }

  .hotel-card-booking {
    align-self: flex-end;
    margin-top: auto;
  }

  .hotel-card-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
    color: var(--stays-surface);
    white-space: nowrap;
  }

  .hotel-card-price strong {
    color: var(--stays-surface);
    font-size: 17px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: -0.02em;
  }

  .hotel-card-price span {
    color: #c9d1e4;
    font-size: 11px;
    font-weight: 700;
  }

  .template-results .template-results-list .hotel-availability-btn {
    min-width: 106px;
    height: 34px;
    padding: 0 12px;
    border-radius: 6px;
    border: 0;
    background: linear-gradient(180deg, #4c8fff 0%, var(--stays-signal) 100%);
    color: var(--stays-surface);
    font-size: 11px;
    line-height: 1;
    font-weight: 900;
    white-space: nowrap;
    box-shadow: 0 8px 18px rgba(46, 127, 240, 0.24);
    cursor: pointer;
  }

  .template-results .template-results-list .hotel-availability-btn:hover {
    background: linear-gradient(180deg, #5d9cff 0%, #3688ff 100%);
  }

  .template-results .listing-copy,
  .template-results .tag-links,
  .template-results .meta-pills,
  .template-results .category-pill,
  .template-results .card-pill-row,
  .template-results .provider-price,
  .template-results .listing-bottom {
    display: none;
  }

  @media (max-width: 1400px) {
    .template-results .template-results-list .listing-card.hotel-result-card {
      grid-template-columns: 154px minmax(0, 1fr);
    }

    .template-results .template-results-list .hotel-card-title {
      font-size: 14px;
    }
  }

  @media (max-width: 760px) {
  }
/* Result-card spacing and motion contract */
  *,
  *::before,
  *::after {
    animation: none;
    transition: none;
    scroll-behavior: auto;
  }

  .template-results .template-results-list .listing-card.hotel-result-card,
  .template-results .template-results-list .listing-card.hotel-result-card *,
  .template-filters,
  .template-filters *,
  .template-strip,
  .template-strip *,
  .template-map-toolbar *,
  .template-map-count {
    box-sizing: border-box;
  }

  .template-results {
    padding: 12px 14px 12px 12px;
  }

  .template-results-list {
    gap: 10px;
    padding-right: 4px;
  }

  .template-results .template-results-list .listing-card.hotel-result-card {
    transform: none;
  }

  .template-results .template-results-list .listing-card.hotel-result-card:hover,
  .template-results .template-results-list .hotel-result-card:hover {
    transform: none;
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  }

  .template-results .template-results-list .hotel-card-body {
    position: relative;
    height: 100%;
    padding: 16px 26px 18px 18px;
    overflow: hidden;
  }

  .hotel-score-badge {
    top: 14px;
    right: 22px;
  }

  .hotel-card-main {
    max-width: calc(100% - 76px);
    padding-right: 8px;
  }

  .hotel-card-booking {
    position: absolute;
    right: 24px;
    bottom: 18px;
    min-width: 132px;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 9px;
  }

  .hotel-card-price {
    justify-content: flex-end;
    padding-right: 1px;
  }

  .template-results .template-results-list .hotel-availability-btn,
  .template-results .template-results-list .hotel-availability-btn:hover,
  .template-results .template-results-list .hotel-availability-btn:focus,
  .template-results .template-results-list .hotel-availability-btn:active {
    width: auto;
    min-width: 124px;
    max-width: 124px;
    height: 36px;
    padding: 0 15px;
    margin: 0;
    border-radius: 6px;
    transform: none;
  }

  .template-search-btn,
  .template-reset-btn,
  .chip,
  .theme-toggle,
  .details-btn {
    transform: none;
  }

  @media (max-width: 1400px) {
    .template-results {
      padding: 12px 14px 12px 12px;
    }

    .template-results .template-results-list .listing-card.hotel-result-card {
      height: 158px;
      min-height: 158px;
    }

    .template-results .template-results-list .hotel-card-body {
      padding: 16px 24px 18px 18px;
    }

    .hotel-score-badge {
      right: 20px;
    }

    .hotel-card-main {
      max-width: calc(100% - 76px);
    }

    .hotel-card-booking {
      right: 22px;
      bottom: 18px;
      min-width: 128px;
    }

    .template-results .template-results-list .hotel-availability-btn,
    .template-results .template-results-list .hotel-availability-btn:hover,
    .template-results .template-results-list .hotel-availability-btn:focus,
    .template-results .template-results-list .hotel-availability-btn:active {
      min-width: 120px;
      max-width: 120px;
      height: 36px;
      padding: 0 14px;
    }
  }

  @media (max-width: 760px) {
  }
/* Fully responsive layout: desktop remains unchanged, tablet/mobile becomes single-column and touch-friendly. */
  @media (max-width: 1200px) {
    html,
    body {
      width: 100%;
      max-width: 100vw;
      height: auto;
      min-height: 100%;
      overflow-x: hidden;
      overflow-y: auto;
    }

    body {
      -webkit-text-size-adjust: 100%;
      text-size-adjust: 100%;
      background: var(--stays-ink);
    }

    .site-shell,
    .page-wrap.full-width,
    .half-map-shell,
    .half-map-content,
    .half-map-inner {
      width: 100%;
      max-width: 100%;
      height: auto;
      min-height: 0;
      overflow: visible;
    }

    .nav-global {
      position: sticky;
      top: 0;
      z-index: 50;
      width: 100%;
      background: rgba(4, 7, 16, 0.96);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .nav-global .container {
      width: 100%;
      max-width: 100%;
      padding-left: 16px;
      padding-right: 16px;
      box-sizing: border-box;
    }

    .nav-inner {
      width: 100%;
      max-width: 100%;
      min-height: 0;
      height: auto;
      padding: 10px 0;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      box-sizing: border-box;
    }

    .nav-brand {
      flex: 0 0 auto;
      min-width: 0;
    }

    .nav-brand img {
      width: 122px;
      max-width: 34vw;
      height: auto;
      display: block;
    }

    .nav-tabs {
      order: 3;
      flex: 1 0 100%;
      width: 100%;
      max-width: 100%;
      min-width: 0;
      display: flex;
      justify-content: flex-start;
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      padding: 4px;
      box-sizing: border-box;
    }

    .nav-tabs::-webkit-scrollbar {
      display: none;
    }

    .nav-tab {
      flex: 0 0 auto;
      white-space: nowrap;
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 18px;
      font-size: 13px;
    }

    .nav-actions {
      flex: 0 0 auto;
      min-width: 0;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      flex-wrap: nowrap;
    }

    .theme-toggle {
      width: 36px;
      height: 36px;
      min-width: 36px;
      min-height: 36px;
    }

    .badge-link img {
      width: 106px;
      max-width: 28vw;
      height: auto;
      display: block;
    }

    .page-wrap.full-width {
      height: auto;
      min-height: 0;
      overflow: visible;
    }

    .half-map-inner {
      display: flex;
      flex-direction: column;
      gap: 0;
      align-items: stretch;
    }

    .template-filters,
    .template-results,
    .template-map {
      width: 100%;
      max-width: 100%;
      height: auto;
      min-height: 0;
      box-sizing: border-box;
    }

    .template-filters {
      order: 1;
      overflow: visible;
      padding: 16px;
      border-right: 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      background: #101a33;
    }

    .template-filters h2 {
      margin: 0 0 14px 0;
      font-size: 24px;
      line-height: 1.1;
    }

    .template-field,
    .template-select {
      width: 100%;
      max-width: 100%;
      min-height: 46px;
      font-size: 16px;
      box-sizing: border-box;
    }

    .template-search-btn,
    .template-reset-btn {
      width: 100%;
      min-height: 48px;
      font-size: 15px;
      box-sizing: border-box;
    }

    .template-map {
      overflow: hidden;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .template-map-panel,
    #map {
      position: relative;
      inset: auto;
      width: 100%;
      height: 56vh;
      min-height: 380px;
      max-height: 560px;
      overflow: hidden;
    }

    #map {
      position: absolute;
      inset: 0;
      max-height: none;
    }

    .template-map-toolbar {
      top: 12px;
      left: 12px;
      right: 86px;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      max-width: calc(100% - 108px);
    }

    .template-map-count {
      top: 12px;
      right: 12px;
      white-space: nowrap;
    }

    .chip {
      min-height: 34px;
      padding: 0 14px;
      white-space: nowrap;
      flex: 0 0 auto;
      box-sizing: border-box;
    }

    .template-results {
      overflow: visible;
      padding: 16px;
      border-left: 0;
      border-right: 0;
      background: var(--stays-ink);
    }

    .template-strip {
      width: 100%;
      max-width: 100%;
      overflow-x: auto;
      overflow-y: hidden;
      flex-wrap: nowrap;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      margin-bottom: 12px;
    }

    .template-strip::-webkit-scrollbar {
      display: none;
    }

    .template-results-list {
      width: 100%;
      max-width: 100%;
      overflow: visible;
      padding-right: 0;
      gap: 12px;
    }

    .template-results .template-results-list .listing-card.hotel-result-card {
      width: 100%;
      max-width: 100%;
      grid-template-columns: 220px minmax(0, 1fr);
      box-sizing: border-box;
    }

    .template-results .template-results-list .hotel-card-media {
      width: 100%;
      height: 100%;
      min-height: 0;
    }

    .template-results .template-results-list .hotel-card-body {
      min-width: 0;
      height: 100%;
      min-height: 0;
      padding: 18px 26px 20px 20px;
      box-sizing: border-box;
    }

    .template-results .template-results-list .hotel-card-title {
      font-size: 17px;
      line-height: 1.18;
    }

    .template-results .template-results-list .hotel-card-location {
      font-size: 12px;
      line-height: 1.3;
    }

    .hotel-score-badge {
      top: 18px;
      right: 20px;
    }

    .hotel-card-main {
      max-width: calc(100% - 72px);
      padding-right: 8px;
    }

    .hotel-card-booking {
      right: 22px;
      bottom: 20px;
      min-width: 132px;
    }
  }

  @media (max-width: 900px) {
  }

  @media (max-width: 760px) {
    .nav-global .container {
      padding-left: 14px;
      padding-right: 14px;
    }

    .template-filters {
      padding: 14px;
    }

    .template-results {
      padding: 14px;
    }

    .template-map-panel,
    #map {
      max-height: 480px;
    }

    .template-results .template-results-list .listing-card.hotel-result-card {
      display: grid;
      border-radius: 16px;
    }

    .template-results .template-results-list .hotel-card-body {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
    }

    .hotel-card-main {
      width: 100%;
      max-width: calc(100% - 68px);
      padding-right: 8px;
    }

    .template-results .template-results-list .hotel-card-title {
      white-space: normal;
      text-overflow: clip;
    }

    .template-results .template-results-list .hotel-card-location {
      white-space: normal;
      text-overflow: clip;
    }

    .hotel-score-badge {
      top: 18px;
      right: 18px;
    }

    .hotel-card-booking {
      position: static;
      width: 100%;
      min-width: 0;
      margin-top: 18px;
      padding-top: 14px;
      align-items: stretch;
      gap: 10px;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    .hotel-card-price {
      justify-content: flex-start;
      width: 100%;
    }

    .template-results .template-results-list .hotel-availability-btn,
    .template-results .template-results-list .hotel-availability-btn:hover,
    .template-results .template-results-list .hotel-availability-btn:focus,
    .template-results .template-results-list .hotel-availability-btn:active {
      border-radius: 8px;
    }
  }

  @media (max-width: 560px) {
    .nav-inner {
      justify-content: center;
      gap: 9px;
    }

    .nav-brand {
      flex: 1 0 100%;
      display: flex;
      justify-content: center;
    }

    .nav-brand img {
      width: 116px;
      max-width: 42vw;
    }

    .nav-actions {
      width: 100%;
      justify-content: center;
      order: 2;
      gap: 8px;
    }

    .badge-link img {
      width: 104px;
      max-width: 30vw;
    }

    .nav-tabs {
      order: 3;
    }

    .nav-tab {
      min-height: 36px;
      padding: 0 16px;
      font-size: 12px;
    }

    .template-filters h2 {
      font-size: 22px;
    }

    .template-check {
      font-size: 14px;
      line-height: 1.35;
    }

    .template-map-panel,
    #map {
      height: 48vh;
      min-height: 320px;
    }

    .template-map-toolbar {
      right: 12px;
      max-width: calc(100% - 24px);
    }

    .template-map-toolbar .chip:nth-child(n+3) {
      display: none;
    }

    .template-map-count {
      top: auto;
      right: 12px;
      bottom: 12px;
    }

    .template-results .template-results-list .hotel-card-media {
      height: 198px;
      min-height: 198px;
    }

    .template-results .template-results-list .hotel-card-body {
      min-height: 178px;
      padding: 16px;
    }

    .hotel-score-badge {
      top: 16px;
      right: 16px;
      min-width: 34px;
      height: 28px;
      font-size: 12px;
    }

    .hotel-card-main {
      max-width: calc(100% - 58px);
    }

    .hotel-card-rating {
      font-size: 12px;
      letter-spacing: 1.6px;
      margin-bottom: 8px;
    }

    .template-results .template-results-list .hotel-card-title {
      font-size: 16px;
    }

    .hotel-card-price strong {
      font-size: 18px;
    }
  }

  @media (max-width: 390px) {

    .template-strip {
      padding: 8px;
    }

    .chip {
      min-height: 32px;
      padding: 0 12px;
      font-size: 11px;
    }

    .template-results .template-results-list .hotel-card-media {
      height: 180px;
      min-height: 180px;
    }

    .hotel-score-badge {
      top: 15px;
      right: 15px;
    }
  }
/* Result visibility and theme contract */
  :root,
  html[data-theme="dark"] {
    --q-page-bg: var(--stays-ink);
    --q-band-bg: var(--stays-dark-panel-raised);
    --q-panel-bg: #101a33;
    --q-results-bg: var(--stays-ink);
    --q-card-bg: #11182e;
    --q-card-body-bg: linear-gradient(180deg, #111a32 0%, #0d1428 100%);
    --q-card-border: rgba(255, 255, 255, 0.16);
    --q-card-shadow: 0 10px 24px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    --q-text: var(--stays-surface);
    --q-muted: var(--stays-night-muted);
    --q-soft-text: #c9d1e4;
    --q-field-bg: #0c1630;
    --q-field-border: rgba(255, 255, 255, 0.12);
    --q-chip-bg: #132044;
    --q-chip-border: rgba(255, 255, 255, 0.10);
    --q-chip-text: var(--stays-surface);
    --q-map-control-bg: var(--stays-surface);
    --q-map-control-text: #0d1730;
  }

  html[data-theme="light"] {
    --q-page-bg: #eef3fb;
    --q-band-bg: #e8eef8;
    --q-panel-bg: #f7f9fd;
    --q-results-bg: #eef3fb;
    --q-card-bg: var(--stays-surface);
    --q-card-body-bg: linear-gradient(180deg, var(--stays-surface) 0%, var(--stays-night-text) 100%);
    --q-card-border: rgba(16, 31, 57, 0.14);
    --q-card-shadow: 0 10px 24px rgba(16, 31, 57, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.85);
    --q-text: #0b1528;
    --q-muted: #5b6780;
    --q-soft-text: #384860;
    --q-field-bg: var(--stays-surface);
    --q-field-border: rgba(16, 31, 57, 0.16);
    --q-chip-bg: #e7eef9;
    --q-chip-border: rgba(16, 31, 57, 0.10);
    --q-chip-text: #10203d;
    --q-map-control-bg: var(--stays-surface);
    --q-map-control-text: #0d1730;
  }

  html,
  body,
  .site-shell,
  .page-wrap.full-width,
  .half-map-shell,
  .half-map-content,
  .half-map-inner {
    background: var(--q-page-bg);
  }

  /* This is the small layout change from the screenshot: hotel cards start immediately, no duplicate chips above the list. */
  .template-results > .template-strip {
    display: none;
  }

  .page-wrap.full-width {
    background: var(--q-band-bg);
  }

  .template-filters {
    background: var(--q-panel-bg);
    color: var(--q-text);
    border-color: var(--q-card-border);
  }

  .template-results {
    background: var(--q-results-bg);
    color: var(--q-text);
    padding-top: 8px;
  }

  .template-map {
    background: var(--stays-signal-soft);
  }

  .template-filters h2,
  .template-filter-label,
  .template-check,
  .template-results .template-results-list .hotel-card-title,
  .hotel-card-price strong {
    color: var(--q-text);
  }

  .template-results .template-results-list .hotel-card-location,
  .hotel-card-price span {
    color: var(--q-muted);
  }

  .template-field,
  .template-select {
    background: var(--q-field-bg);
    color: var(--q-text);
    border: 1px solid var(--q-field-border);
    box-shadow: none;
  }

  .template-field::placeholder {
    color: var(--q-muted);
    opacity: 1;
  }

  .template-results .template-results-list .listing-card.hotel-result-card,
  .template-results .template-results-list .listing-card.hotel-result-card:hover,
  .template-results .template-results-list .hotel-result-card:hover {
    background: var(--q-card-bg);
    border-color: var(--q-card-border);
    box-shadow: var(--q-card-shadow);
  }

  .template-results .template-results-list .hotel-card-body {
    background: var(--q-card-body-bg);
  }

  .chip,
  .template-map-toolbar .chip {
    background: var(--q-chip-bg);
    color: var(--q-chip-text);
    border: 1px solid var(--q-chip-border);
    box-shadow: none;
  }
  .template-map-toolbar .map-theme-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    padding-inline: 9px;
    font-size: 16px;
  }

  .template-map-count {
    background: var(--q-map-control-bg);
    color: var(--q-map-control-text);
    border: 1px solid rgba(16, 31, 57, 0.10);
    box-shadow: 0 8px 20px rgba(16, 31, 57, 0.12);
  }

  .theme-toggle {
    color: var(--stays-surface);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    cursor: pointer;
  }

  html[data-theme="light"] .template-search-btn {
    box-shadow: 0 8px 20px rgba(48, 138, 232, 0.18);
  }

  html[data-theme="light"] .template-reset-btn {
    background: var(--stays-surface);
    color: #10203d;
    border: 1px solid rgba(16, 31, 57, 0.14);
  }

  html[data-theme="light"] .hotel-card-rating {
    color: #f5b800;
    text-shadow: none;
  }

  html[data-theme="light"] .hotel-score-badge {
    box-shadow: 0 8px 18px rgba(34, 197, 94, 0.20);
  }

  html[data-theme="light"] .template-map-panel,
  html[data-theme="light"] #map {
    background: var(--stays-signal-soft);
  }

  @media (min-width: 1201px) {

    .template-results-list {
      padding-top: 0;
    }
  }

  @media (max-width: 1200px) {
    .template-results {
      padding-top: 16px;
    }

    .template-map {
      order: 2;
    }

    .template-results {
      order: 3;
    }
  }
/* Adds a fixed 50px breathing gap between the navbar and the main half-map content. */
  .page-wrap.full-width {
    padding-top: 50px;
    box-sizing: border-box;
  }

  @media (min-width: 1201px) {
  }

  @media (max-width: 1200px) {
    .page-wrap.full-width {
      padding-top: 50px;
    }
  }
/* Responsive half-map contract */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html,
  body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    overflow-x: hidden;
  }

  img,
  svg,
  video,
  canvas {
    max-width: 100%;
  }

  .site-shell,
  .page-wrap.full-width,
  .half-map-shell,
  .half-map-content,
  .half-map-inner,
  .template-filters,
  .template-results,
  .template-map,
  .template-map-panel,
  .template-results-list {
    max-width: 100%;
  }

  .nav-global,
  .nav-global .container,
  .nav-inner {
    width: 100%;
    max-width: 100%;
  }

  .nav-inner {
    box-sizing: border-box;
  }

  .badge-link,
  .badge-link img,
  .nav-brand,
  .nav-brand img {
    flex-shrink: 0;
  }

  .template-field,
  .template-select,
  .template-search-btn,
  .template-reset-btn,
  .hotel-availability-btn {
    max-width: 100%;
  }

  /* Desktop and laptop: preserve the three-column half-map experience without clipping. */
  @media (min-width: 1201px) {
    html,
    body,
    .site-shell {
      height: 100%;
      min-height: 100%;
      overflow: hidden;
    }

    .nav-global {
      height: 74px;
      min-height: 74px;
    }

    .nav-global .container {
      padding-left: clamp(24px, 3vw, 48px);
      padding-right: clamp(24px, 3vw, 48px);
    }

    .nav-inner {
      min-height: 74px;
      height: 74px;
      padding-top: 0;
      padding-bottom: 0;
    }

    .page-wrap.full-width {
      width: 100%;
      max-width: 100%;
      height: calc(100vh - 74px);
      min-height: calc(100vh - 74px);
      padding-top: 50px;
      overflow: hidden;
      box-sizing: border-box;
    }

    .half-map-shell,
    .half-map-content,
    .half-map-inner {
      height: 100%;
      min-height: 0;
      overflow: hidden;
    }

    .half-map-inner {
      width: 100%;
      max-width: 100%;
      display: grid;
      grid-template-columns: clamp(220px, 16vw, 300px) minmax(390px, 36vw) minmax(420px, 1fr);
      align-items: stretch;
      gap: 0;
    }

    .template-filters,
    .template-results,
    .template-map {
      width: auto;
      max-width: none;
      height: 100%;
      min-height: 0;
      overflow: hidden;
    }

    .template-filters {
      padding: clamp(14px, 1.2vw, 18px);
    }

    .template-results {
      padding: 8px 10px 10px 10px;
    }

    .template-results-list {
      height: 100%;
      min-height: 0;
      overflow-y: auto;
      overflow-x: hidden;
      padding-right: 4px;
      scrollbar-width: none;
    }

    .template-results-list::-webkit-scrollbar {
      width: 0;
      height: 0;
    }

    .template-map-panel,
    #map {
      width: 100%;
      height: calc(100vh - 124px);
      min-height: calc(100vh - 124px);
      max-height: none;
    }

    #map {
      position: absolute;
      inset: 0;
    }

    .template-results .template-results-list .listing-card.hotel-result-card {
      grid-template-columns: clamp(132px, 12vw, 164px) minmax(0, 1fr);
      height: clamp(132px, 11vw, 158px);
      min-height: clamp(132px, 11vw, 158px);
    }

    .template-results .template-results-list .hotel-card-body {
      padding: 14px 20px 16px 16px;
    }

    .template-results .template-results-list .hotel-card-title {
      font-size: clamp(12px, 1vw, 15px);
      line-height: 1.15;
    }

    .template-results .template-results-list .hotel-card-location {
      font-size: clamp(9px, 0.78vw, 11px);
    }

    .hotel-card-rating {
      font-size: clamp(11px, 0.9vw, 13px);
      margin-bottom: 7px;
    }

    .hotel-score-badge {
      top: 12px;
      right: 14px;
      min-width: 32px;
      height: 26px;
      font-size: 12px;
    }

    .hotel-card-main {
      max-width: calc(100% - 58px);
      padding-right: 6px;
    }

    .hotel-card-booking {
      right: 16px;
      bottom: 16px;
      min-width: 112px;
      gap: 7px;
    }

    .hotel-card-price strong {
      font-size: clamp(15px, 1.1vw, 17px);
    }

    .hotel-card-price span {
      font-size: 10px;
    }

    .template-results .template-results-list .hotel-availability-btn,
    .template-results .template-results-list .hotel-availability-btn:hover,
    .template-results .template-results-list .hotel-availability-btn:focus,
    .template-results .template-results-list .hotel-availability-btn:active {
      padding: 0 12px;
      font-size: 10px;
    }
  }

  /* Tablet landscape / small laptop: switch to a clean two-stage responsive layout. */
  @media (max-width: 1200px) and (min-width: 901px) {
    html,
    body,
    .site-shell {
      height: auto;
      min-height: 100%;
      overflow-x: hidden;
      overflow-y: auto;
    }

    .page-wrap.full-width {
      height: auto;
      min-height: 0;
      padding-top: 50px;
      overflow: visible;
      box-sizing: border-box;
    }

    .half-map-inner {
      width: 100%;
      max-width: 100%;
      display: grid;
      grid-template-columns: minmax(260px, 31vw) minmax(0, 1fr);
      grid-template-areas:
        "filters map"
        "results results";
      align-items: stretch;
    }

    .template-filters {
      grid-area: filters;
      width: auto;
      max-width: none;
      min-height: 520px;
      height: auto;
      overflow: visible;
      padding: 16px;
    }

    .template-map {
      grid-area: map;
      width: auto;
      min-height: 520px;
      overflow: hidden;
    }

    .template-map-panel,
    #map {
      height: 520px;
      min-height: 520px;
      max-height: 520px;
    }

    .template-results {
      grid-area: results;
      width: 100%;
      max-width: 100%;
      height: auto;
      overflow: visible;
      padding: 18px;
    }

    .template-results-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
      overflow: visible;
      padding-right: 0;
    }

    .template-results .template-results-list .listing-card.hotel-result-card {
      grid-template-columns: 1fr;
      height: auto;
      min-height: 0;
      border-radius: 16px;
    }

    .template-results .template-results-list .hotel-card-media {
      height: 210px;
      min-height: 210px;
    }

    .template-results .template-results-list .hotel-card-body {
      height: auto;
      min-height: 190px;
      padding: 18px;
    }

    .template-results .template-results-list .hotel-card-title {
      white-space: normal;
      overflow: visible;
      text-overflow: clip;
      font-size: 16px;
      line-height: 1.2;
    }

    .template-results .template-results-list .hotel-card-location {
      white-space: normal;
      overflow: visible;
      text-overflow: clip;
    }

    .hotel-card-main {
      max-width: calc(100% - 64px);
    }

    .hotel-score-badge {
      top: 18px;
      right: 18px;
    }

    .hotel-card-booking {
      position: static;
      width: 100%;
      min-width: 0;
      margin-top: 18px;
      padding-top: 14px;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      align-items: stretch;
    }

    .hotel-card-price {
      justify-content: flex-start;
    }

    .template-results .template-results-list .hotel-availability-btn,
    .template-results .template-results-list .hotel-availability-btn:hover,
    .template-results .template-results-list .hotel-availability-btn:focus,
    .template-results .template-results-list .hotel-availability-btn:active {
      width: 100%;
      max-width: none;
      min-width: 0;
      height: 44px;
      font-size: 12px;
    }
  }

  /* Tablet portrait and phones: single-column flow with no horizontal scroll. */
  @media (max-width: 900px) {
    html,
    body,
    .site-shell {
      height: auto;
      min-height: 100%;
      overflow-x: hidden;
      overflow-y: auto;
    }

    .page-wrap.full-width {
      height: auto;
      min-height: 0;
      padding-top: 50px;
      overflow: visible;
    }

    .half-map-inner {
      width: 100%;
      max-width: 100%;
      display: flex;
      flex-direction: column;
      align-items: stretch;
    }

    .template-filters,
    .template-results,
    .template-map {
      width: 100%;
      max-width: 100%;
      min-width: 0;
      height: auto;
      min-height: 0;
      overflow: visible;
    }

    .template-filters {
      order: 1;
      padding: 16px;
    }

    .template-map {
      order: 2;
      overflow: hidden;
    }

    .template-results {
      order: 3;
      padding: 16px;
      overflow: visible;
    }

    .template-map-panel,
    #map {
      width: 100%;
      height: min(58vh, 520px);
      min-height: 360px;
      max-height: 520px;
      overflow: hidden;
    }

    #map {
      position: absolute;
      inset: 0;
    }

    .template-results-list {
      display: grid;
      grid-template-columns: 1fr;
      gap: 14px;
      overflow: visible;
      padding-right: 0;
    }

    .template-results .template-results-list .listing-card.hotel-result-card {
      display: grid;
      grid-template-columns: minmax(180px, 34%) minmax(0, 1fr);
      width: 100%;
      max-width: 100%;
      height: 190px;
      min-height: 190px;
      border-radius: 16px;
    }

    .template-results .template-results-list .hotel-card-media {
      height: 100%;
      min-height: 0;
    }

    .template-results .template-results-list .hotel-card-body {
      height: 100%;
      min-height: 0;
      padding: 18px;
    }

    .template-results .template-results-list .hotel-card-title {
      white-space: normal;
      overflow: visible;
      text-overflow: clip;
      font-size: 16px;
      line-height: 1.2;
    }

    .template-results .template-results-list .hotel-card-location {
      white-space: normal;
      overflow: visible;
      text-overflow: clip;
      font-size: 12px;
    }

    .hotel-card-main {
      max-width: calc(100% - 64px);
    }

    .hotel-score-badge {
      top: 18px;
      right: 18px;
    }

    .hotel-card-booking {
      right: 18px;
      bottom: 18px;
      min-width: 126px;
    }
  }

  /* Phones: stacked cards, larger tap targets, app badges scaled safely. */
  @media (max-width: 640px) {
    .nav-global .container {
      padding-left: 12px;
      padding-right: 12px;
    }

    .nav-inner {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
      justify-items: center;
      padding: 12px 0;
    }

    .nav-brand {
      width: 100%;
      display: flex;
      justify-content: center;
      order: 1;
    }

    .nav-brand img {
      width: 116px;
      max-width: 46vw;
    }

    .nav-actions {
      width: 100%;
      max-width: 100%;
      display: flex;
      justify-content: center;
      order: 2;
      gap: 8px;
      overflow: hidden;
    }

    .badge-link img {
      width: clamp(86px, 27vw, 106px);
      max-width: 27vw;
    }

    .theme-toggle {
      width: 34px;
      height: 34px;
      min-width: 34px;
      min-height: 34px;
    }

    .nav-tabs {
      order: 3;
      width: 100%;
      max-width: 100%;
      overflow-x: auto;
      overflow-y: hidden;
      justify-content: flex-start;
      padding: 4px;
      scrollbar-width: none;
    }

    .nav-tabs::-webkit-scrollbar {
      display: none;
    }

    .nav-tab {
      flex: 1 0 auto;
      min-width: max-content;
      min-height: 36px;
      padding: 0 14px;
      font-size: 12px;
      white-space: nowrap;
    }

    .template-filters,
    .template-results {
      padding-left: 14px;
      padding-right: 14px;
    }

    .template-field,
    .template-select {
      min-height: 46px;
      font-size: 16px;
    }

    .template-search-btn,
    .template-reset-btn {
      min-height: 48px;
    }

    .template-map-panel,
    #map {
      height: 50vh;
      min-height: 320px;
      max-height: 460px;
    }

    .template-map-toolbar {
      left: 10px;
      right: 10px;
      max-width: calc(100% - 20px);
      gap: 6px;
    }

    .template-map-toolbar .chip {
      min-height: 30px;
      padding: 0 10px;
      font-size: 10px;
    }

    .template-map-count {
      top: auto;
      right: 10px;
      bottom: 10px;
      font-size: 11px;
    }

    .template-results .template-results-list .listing-card.hotel-result-card {
      grid-template-columns: 1fr;
      height: auto;
      min-height: 0;
      border-radius: 16px;
    }

    .template-results .template-results-list .hotel-card-media {
      height: clamp(176px, 52vw, 230px);
      min-height: clamp(176px, 52vw, 230px);
    }

    .template-results .template-results-list .hotel-card-body {
      height: auto;
      min-height: 0;
      padding: 16px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
    }

    .hotel-card-main {
      max-width: calc(100% - 58px);
      padding-right: 6px;
    }

    .hotel-score-badge {
      top: 16px;
      right: 16px;
      min-width: 34px;
      height: 28px;
    }

    .hotel-card-booking {
      position: static;
      width: 100%;
      min-width: 0;
      margin-top: 16px;
      padding-top: 14px;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      align-items: stretch;
      gap: 10px;
    }

    .hotel-card-price {
      justify-content: flex-start;
    }

    .template-results .template-results-list .hotel-availability-btn,
    .template-results .template-results-list .hotel-availability-btn:hover,
    .template-results .template-results-list .hotel-availability-btn:focus,
    .template-results .template-results-list .hotel-availability-btn:active {
      width: 100%;
      max-width: none;
      min-width: 0;
      height: 46px;
      font-size: 13px;
      border-radius: 8px;
    }
  }

  /* Very small phones: keep everything readable and avoid badge/nav overflow. */
  @media (max-width: 390px) {
    .page-wrap.full-width {
      padding-top: 44px;
    }

    .nav-global .container,
    .template-filters,
    .template-results {
      padding-left: 10px;
      padding-right: 10px;
    }

    .nav-actions {
      gap: 6px;
    }

    .badge-link img {
      width: 86px;
      max-width: 26vw;
    }

    .theme-toggle {
      width: 32px;
      height: 32px;
      min-width: 32px;
      min-height: 32px;
      font-size: 13px;
    }

    .nav-tab {
      padding: 0 12px;
      font-size: 11px;
    }

    .template-map-panel,
    #map {
      min-height: 300px;
      height: 48vh;
    }

    .template-results .template-results-list .hotel-card-body {
      padding: 14px;
    }

    .hotel-card-main {
      max-width: calc(100% - 52px);
    }

    .hotel-card-rating {
      font-size: 11px;
      letter-spacing: 1.4px;
    }

    .template-results .template-results-list .hotel-card-title {
      font-size: 15px;
    }

    .template-results .template-results-list .hotel-card-location {
      font-size: 11px;
    }

    .hotel-card-price strong {
      font-size: 17px;
    }
  }
.hotel-filter-panel {
    background: var(--stays-surface);
    color: var(--stays-ink);
    border-right: 1px solid var(--stays-border);
    padding: 18px 18px 28px;
    height: calc(100vh - 74px);
    min-height: 0;
    max-height: calc(100vh - 74px);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #b8c4d4 var(--stays-signal-soft);
  }

  .hotel-filter-panel::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    display: block;
  }

  .hotel-filter-panel::-webkit-scrollbar-thumb {
    background: #b8c4d4;
    border-radius: 999px;
  }

  .hotel-filter-panel::-webkit-scrollbar-track {
    background: var(--stays-signal-soft);
  }

  .half-map-inner {
    grid-template-rows: 44px minmax(0, 1fr);
  }

  .hotel-filter-panel {
    grid-row: 1 / span 2;
  }

  .map-label-row {
    grid-column: 2 / 4;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
    height: 44px;
    padding: 6px 12px;
    border-bottom: 1px solid #dbe3ee;
    background: var(--stays-canvas);
    color: #10213d;
    box-sizing: border-box;
    overflow: hidden;
  }

  .map-label-chips {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .map-label-chips::-webkit-scrollbar {
    display: none;
  }

  .map-label-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    border: 1px solid var(--stays-border);
    border-radius: 5px;
    background: var(--stays-surface);
    color: #263854;
    font-size: 12px;
    line-height: 1;
    font-weight: 800;
    cursor: pointer;
  }

  .map-label-chip span {
    display: inline-grid;
    place-items: center;
    width: 14px;
    height: 14px;
    color: var(--stays-ink-muted);
    font-size: 10px;
    font-weight: 900;
  }

  .map-label-chip.is-active {
    border-color: var(--stays-signal);
    background: #eef6ff;
    color: #075bd8;
  }

  .map-view-toggle {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 28px;
    padding: 2px;
    border: 1px solid #dbe3ee;
    border-radius: 6px;
    background: var(--stays-surface);
  }

  .map-view-toggle-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 22px;
    padding: 0 8px;
    border-radius: 4px;
    color: var(--stays-ink-muted);
    text-decoration: none;
    font-size: 12px;
    font-weight: 900;
  }

  .map-view-toggle-link.is-active {
    background: #e8f1ff;
    color: #075bd8;
  }

  .template-results {
    grid-column: 2;
    grid-row: 2;
    height: 100%;
    min-height: 0;
  }

  .template-map {
    grid-column: 3;
    grid-row: 2;
    height: 100%;
    min-height: 0;
  }

  .template-map-panel,
  #map {
    height: 100%;
    min-height: 0;
  }

  .template-search-state-hidden {
    display: none;
  }

  .hotel-filter-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--stays-border-soft);
  }

  .hotel-filter-head h2 {
    margin: 0;
    color: var(--stays-ink);
    font-size: 22px;
    line-height: 1.1;
  }

  .hotel-filter-clear {
    height: 34px;
    padding: 0 12px;
    border: 1px solid var(--stays-border);
    border-radius: 6px;
    background: var(--stays-surface);
    color: var(--stays-ink-muted);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
  }

  .hotel-filter-clear:disabled {
    opacity: .45;
    cursor: default;
  }

  .hotel-filter-section {
    padding: 16px 0;
    border-bottom: 1px solid #e9eff6;
  }

  .hotel-filter-section h3 {
    margin: 0 0 12px;
    color: var(--stays-ink);
    font-size: 15px;
    line-height: 1.2;
    font-weight: 800;
  }

  .hotel-filter-section h3 span {
    color: var(--stays-ink-muted);
    font-weight: 700;
  }

  .hotel-filter-text {
    width: 100%;
    height: 34px;
    border: 1px solid #b9c3d0;
    border-radius: 4px;
    background: var(--stays-surface);
    color: var(--stays-ink);
    font-size: 15px;
    padding: 0 10px;
    outline: none;
  }

  .hotel-filter-text:focus {
    border-color: var(--stays-signal);
    box-shadow: 0 0 0 2px rgba(22, 119, 255, .14);
  }

  .hotel-price-label {
    color: var(--stays-ink);
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 10px;
  }

  .hotel-price-histogram {
    height: 54px;
    display: flex;
    align-items: end;
    gap: 2px;
    padding: 0 6px;
    margin-bottom: -8px;
  }

  .hotel-price-histogram span {
    display: block;
    flex: 1;
    min-width: 3px;
    border-radius: 2px 2px 0 0;
    background: #dce8f7;
  }

  .hotel-price-range {
    width: 100%;
    accent-color: var(--stays-signal);
  }

  .hotel-filter-options {
    display: grid;
    gap: 9px;
  }

  .hotel-filter-check {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    color: #10213d;
    font-size: 14px;
    line-height: 1.25;
    cursor: pointer;
  }

  .hotel-filter-check input {
    width: 20px;
    height: 20px;
    margin: 0;
    border: 1px solid #c5cfdc;
    border-radius: 4px;
    accent-color: var(--stays-signal);
  }

  .hotel-filter-check span {
    min-width: 0;
  }

  .hotel-filter-more {
    justify-self: start;
    border: 0;
    background: transparent;
    color: #075bd8;
    font-size: 14px;
    font-weight: 700;
    padding: 2px 0;
    text-decoration: underline;
    cursor: pointer;
  }

  .hotel-filter-empty {
    color: var(--stays-ink-muted);
    font-size: 13px;
    line-height: 1.35;
  }

  html[data-theme="light"] .hotel-filter-panel {
    background: var(--stays-surface);
    color: var(--stays-ink);
  }

  html[data-theme="dark"] .hotel-filter-panel {
    background: var(--stays-dark-panel-raised);
    color: #eef4ff;
    border-color: rgba(255,255,255,0.12);
    scrollbar-color: #33415f #0a1228;
  }

  html[data-theme="dark"] .hotel-filter-panel::-webkit-scrollbar-thumb {
    background: #33415f;
  }

  html[data-theme="dark"] .hotel-filter-panel::-webkit-scrollbar-track {
    background: #0a1228;
  }

  html[data-theme="dark"] .hotel-filter-head,
  html[data-theme="dark"] .hotel-filter-section {
    border-color: rgba(255,255,255,0.12);
  }

  html[data-theme="dark"] .hotel-filter-head h2,
  html[data-theme="dark"] .hotel-filter-section h3,
  html[data-theme="dark"] .hotel-price-label,
  html[data-theme="dark"] .hotel-filter-check {
    color: var(--stays-night-text);
  }

  html[data-theme="dark"] .hotel-filter-section h3 span,
  html[data-theme="dark"] .hotel-filter-empty {
    color: var(--stays-night-muted);
  }

  html[data-theme="dark"] .hotel-filter-text,
  html[data-theme="dark"] .hotel-filter-clear {
    background: var(--stays-dark-panel-raised);
    border-color: rgba(255,255,255,0.16);
    color: var(--stays-night-text);
  }

  html[data-theme="dark"] .hotel-filter-text::placeholder {
    color: #aab6cf;
    opacity: 1;
  }

  html[data-theme="dark"] .hotel-filter-check input {
    border-color: rgba(255,255,255,0.28);
    background: var(--stays-dark-panel-raised);
  }

  html[data-theme="dark"] .hotel-price-histogram span {
    background: #263653;
  }

  html[data-theme="dark"] .map-label-row {
    background: var(--stays-dark-panel-raised);
    color: var(--stays-night-text);
    border-color: rgba(255,255,255,0.12);
  }

  html[data-theme="dark"] .map-label-chip,
  html[data-theme="dark"] .map-view-toggle,
  html[data-theme="dark"] .map-view-toggle-link {
    background: var(--stays-dark-panel-raised);
    border-color: rgba(255,255,255,0.16);
    color: var(--stays-night-text);
  }

  html[data-theme="dark"] .map-label-chip span,
  html[data-theme="dark"] .map-view-toggle-link {
    color: #b9c5dc;
  }

  html[data-theme="dark"] .map-label-chip.is-active,
  html[data-theme="dark"] .map-view-toggle-link.is-active {
    background: #173667;
    color: var(--stays-surface);
    border-color: rgba(76,143,255,0.55);
  }

  @media (max-width: 980px) {

    .map-label-row {
      grid-column: 1;
      grid-row: auto;
      height: auto;
      align-items: flex-start;
    }

    .hotel-filter-panel {
      grid-row: auto;
      border-right: 0;
      border-bottom: 1px solid var(--stays-border);
      height: auto;
      max-height: none;
      overflow: visible;
    }

    .template-results,
    .template-map {
      grid-column: 1;
      grid-row: auto;
    }
  }
.template-results .template-results-list .listing-card.hotel-result-card {
    min-height: 190px;
    height: 190px;
  }

  .template-results .template-results-list .hotel-card-booking {
    gap: 5px;
    min-width: 142px;
  }

  .template-results .template-results-list .hotel-card-stay-meta,
  .template-results .template-results-list .hotel-card-public-price {
    color: var(--q-muted, var(--stays-night-muted));
    line-height: 1.15;
    text-align: right;
    white-space: nowrap;
  }

  .template-results .template-results-list .hotel-card-stay-meta {
    font-size: 10px;
    font-weight: 700;
  }

  .template-results .template-results-list .hotel-card-public-price {
    font-size: 11px;
    font-weight: 800;
  }

  html[data-theme="light"] .template-results .template-results-list .hotel-card-stay-meta,
  html[data-theme="light"] .template-results .template-results-list .hotel-card-public-price {
    color: #52627a;
  }

  @media (min-width: 1201px) {
    .template-results .template-results-list .hotel-availability-btn,
    .template-results .template-results-list .hotel-availability-btn:hover,
    .template-results .template-results-list .hotel-availability-btn:focus,
    .template-results .template-results-list .hotel-availability-btn:active {
      min-width: 122px;
      max-width: 122px;
      height: 32px;
    }
  }

  @media (max-width: 1400px) and (min-width: 1201px) {
    .template-results .template-results-list .listing-card.hotel-result-card {
      min-height: 188px;
      height: 188px;
    }
  }

  @media (max-width: 1200px) {
    .template-results .template-results-list .listing-card.hotel-result-card {
      height: auto;
      min-height: 0;
    }

    .template-results .template-results-list .hotel-card-stay-meta,
    .template-results .template-results-list .hotel-card-public-price {
      text-align: left;
    }
  }
/* Accessibility/design polish from review: calmer palette, better contrast, easier line-height. */
  .template-results .template-results-list .hotel-card-location,
  .template-results .template-results-list .listing-location.hotel-card-location {
    line-height: 1.42;
  }

  .hotel-score-badge,
  html[data-theme="light"] .hotel-score-badge,
  html[data-theme="dark"] .hotel-score-badge {
    background: var(--stays-evidence-deep);
    color: var(--stays-surface);
    border: 1px solid rgba(255, 255, 255, .22);
    box-shadow: none;
    text-shadow: none;
  }

  .template-results .template-results-list .hotel-availability-btn,
  .template-results .template-results-list .hotel-availability-btn:hover,
  .template-results .template-results-list .hotel-availability-btn:focus,
  .template-results .template-results-list .hotel-availability-btn:active {
    background: var(--stays-signal);
    color: var(--stays-surface);
    box-shadow: none;
    border: 1px solid rgba(255, 255, 255, .18);
    text-shadow: none;
  }

  .qualoo-hotel-marker .hm-body {
    font-size: 12px;
    font-weight: 800;
    padding: 5px 10px;
    border-radius: 20px;
  }

  .qualoo-hotel-marker:hover .hm-body,
  .qualoo-hotel-marker:focus .hm-body {
    background: #1e3a5f;
  }

  .qualoo-hotel-marker.is-active .hm-body {
    background: var(--stays-signal);
    box-shadow: 0 2px 12px rgba(37,99,235,.45);
  }

  .qualoo-hotel-marker:hover .hm-tip {
    border-top-color: #1e3a5f;
  }

  .qualoo-hotel-marker.is-active .hm-tip {
    border-top-color: var(--stays-signal);
  }

  .qualoo-map-popup {
    border: 1px solid rgba(148, 163, 184, .20);
    box-shadow: 0 20px 48px rgba(15, 23, 42, .18);
  }

  .qualoo-map-popup-rating-score {
    background: var(--stays-evidence-deep);
    color: var(--stays-surface);
  }

  .qualoo-map-popup-btn {
    background: var(--stays-signal);
    color: var(--stays-surface);
  }
@media (max-width: 1024px) {
    .half-map-inner {
      display: flex;
      flex-direction: column;
      width: 100%;
      max-width: 100%;
      min-width: 0;
    }

    .map-label-row {
      order: 1;
      flex: 0 0 auto;
    }

    .template-map {
      order: 2;
      width: 100%;
      max-width: 100%;
      min-width: 0;
      overflow: hidden;
    }

    .template-results {
      order: 3;
      width: 100%;
      max-width: 100%;
      min-width: 0;
    }

    .template-filters {
      order: 4;
      width: 100%;
      max-width: 100%;
      min-width: 0;
      max-height: 460px;
      overflow-y: auto;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
      border-top: 1px solid rgba(148, 163, 184, .18);
    }

    .template-map-panel,
    #map {
      position: relative;
      width: 100%;
      height: calc(100dvh - 190px);
      min-height: 430px;
      max-height: none;
      overflow: hidden;
    }

    #map {
      position: absolute;
      inset: 0;
    }

    .template-results-list {
      overflow: visible;
      max-height: none;
    }
  }

  @media (max-width: 1200px) {
    html,
    body,
    .site-shell,
    .page-wrap.full-width,
    .half-map-shell,
    .half-map-content,
    .half-map-inner {
      max-width: 100vw;
      overflow-x: hidden;
    }

    .map-label-row {
      width: 100%;
      max-width: 100%;
      min-width: 0;
      box-sizing: border-box;
      gap: 10px;
    }

    .map-label-chips {
      min-width: 0;
      max-width: 100%;
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      scroll-snap-type: x proximity;
      padding-bottom: 2px;
    }

    .map-label-chip {
      scroll-snap-align: start;
    }

    .map-view-toggle {
      flex: 0 0 auto;
    }
  }

  @media (max-width: 760px) {
    .map-label-row {
      flex-wrap: nowrap;
      padding: 10px;
    }

    .map-label-chip {
      min-height: 38px;
      padding-left: 12px;
      padding-right: 12px;
      white-space: nowrap;
    }

    .template-map-toolbar {
      max-width: calc(100vw - 20px);
      overflow-x: auto;
      flex-wrap: nowrap;
      -webkit-overflow-scrolling: touch;
    }

    .template-map-count {
      top: 12px;
      right: 10px;
      bottom: auto;
      left: auto;
    }

    .template-search-area-btn {
      max-width: calc(100vw - 32px);
      white-space: nowrap;
    }

    .template-map-panel,
    #map {
      height: calc(100dvh - 178px);
      min-height: 390px;
    }

    .template-filters {
      max-height: 360px;
    }

    .template-results .template-results-list .listing-card.hotel-result-card {
      grid-template-columns: 1fr;
      height: auto;
      min-height: 0;
    }

    .template-results .template-results-list .hotel-card-media {
      width: 100%;
      padding: 0;
    }

    .template-results .template-results-list .hotel-card-body {
      height: auto;
      min-height: 0;
      overflow: visible;
    }

    .template-results .template-results-list .hotel-card-main {
      max-width: 100%;
    }

    .template-results .template-results-list .hotel-card-title,
    .template-results .template-results-list .hotel-card-location {
      white-space: normal;
      overflow: visible;
      text-overflow: clip;
    }

    .template-results .template-results-list .hotel-card-booking,
    .hotel-card-booking {
      position: static;
      align-self: stretch;
      align-items: stretch;
      width: 100%;
      min-width: 0;
      padding: 14px 0 0;
      border-top: 1px solid rgba(148, 163, 184, .18);
    }

    .template-results .template-results-list .hotel-card-price,
    .template-results .template-results-list .hotel-card-stay-meta,
    .template-results .template-results-list .hotel-card-public-price {
      justify-content: flex-start;
      text-align: left;
      white-space: normal;
      overflow: visible;
    }

    .template-results .template-results-list .hotel-availability-btn,
    .template-results .template-results-list .hotel-availability-btn:hover,
    .template-results .template-results-list .hotel-availability-btn:focus,
    .template-results .template-results-list .hotel-availability-btn:active {
      width: 100%;
      max-width: none;
      min-width: 0;
    }
  }
.stays-mobile-filter-toggle,
  .stays-mobile-filter-close,
  .stays-mobile-filter-backdrop {
    display: none;
  }

  @media (max-width: 1024px) {
    .stays-mobile-filter-toggle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      min-height: 38px;
      padding: 0 14px;
      border: 1px solid rgba(15, 23, 42, .14);
      border-radius: 999px;
      background: var(--stays-surface);
      color: var(--stays-ink);
      font-size: 13px;
      font-weight: 800;
      line-height: 1;
      box-shadow: 0 8px 18px rgba(15, 23, 42, .08);
    }

    html[data-theme="dark"] .stays-mobile-filter-toggle {
      background: var(--stays-dark-panel-raised);
      color: var(--stays-night-text);
      border-color: rgba(255, 255, 255, .14);
      box-shadow: none;
    }

    .stays-mobile-filter-backdrop {
      position: fixed;
      inset: 0;
      z-index: 1090;
      width: 100%;
      height: 100%;
      border: 0;
      padding: 0;
      background: rgba(2, 6, 23, .56);
      cursor: pointer;
    }

    body.stays-filter-drawer-open .stays-mobile-filter-backdrop {
      display: block;
    }

    .stays-mobile-filter-close {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      margin-left: auto;
      border: 1px solid rgba(15, 23, 42, .12);
      border-radius: 999px;
      background: var(--stays-canvas);
      color: var(--stays-ink);
      font-size: 18px;
      font-weight: 800;
      line-height: 1;
      cursor: pointer;
    }

    html[data-theme="dark"] .stays-mobile-filter-close {
      background: #18243b;
      color: var(--stays-night-text);
      border-color: rgba(255, 255, 255, .14);
    }

    .template-filters.hotel-filter-panel {
      position: fixed;
      z-index: 1100;
      left: 0;
      right: 0;
      bottom: 0;
      top: auto;
      order: 0;
      padding: 16px;
      overflow-y: auto;
      overflow-x: hidden;
      transform: translateY(105%);
      transition: transform .22s ease;
      box-shadow: 0 -18px 46px rgba(2, 6, 23, .28);
      -webkit-overflow-scrolling: touch;
    }

    .template-filters.hotel-filter-panel.is-mobile-filter-open {
      transform: translateY(0);
    }

    body.stays-filter-drawer-open {
      overflow: hidden;
    }
  }

  @media (max-width: 760px) {
    .nav-global .nav-inner {
      gap: 8px;
      padding: 9px 12px;
      min-height: 0;
    }

    .nav-global .nav-brand img {
      height: 24px;
      width: auto;
    }

    .nav-global .nav-tabs {
      gap: 4px;
      padding: 4px;
    }

    .nav-global .nav-tab {
      min-height: 30px;
      padding: 0 9px;
      font-size: 11px;
      line-height: 1;
    }

    .nav-global .nav-actions {
      gap: 6px;
    }

    .nav-global .theme-toggle,
    .nav-global .stays-prefs-trigger {
      min-height: 32px;
      height: 32px;
      padding: 0 9px;
      font-size: 11px;
    }

    .nav-global .badge-link {
      height: 30px;
      min-width: 92px;
    }

    .nav-global .badge-link img {
      height: 30px;
      width: auto;
    }

    .map-label-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto auto;
      gap: 8px;
      align-items: center;
    }

    .map-label-chips {
      min-width: 0;
    }

    .map-view-toggle {
      align-self: center;
    }

    .template-results .template-results-list .hotel-card-media {
      height: clamp(178px, 49vw, 218px);
      min-height: clamp(178px, 49vw, 218px);
    }

    .template-results .template-results-list .hotel-card-body {
      padding: 14px;
      gap: 10px;
    }

    .template-results .template-results-list .hotel-card-main {
      padding-right: 42px;
    }

    .template-results .template-results-list .hotel-card-title {
      font-size: 16px;
      line-height: 1.22;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .template-results .template-results-list .hotel-card-location {
      font-size: 12.5px;
      line-height: 1.34;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .template-results .template-results-list .hotel-card-booking,
    .hotel-card-booking {
      margin-top: 0;
      padding-top: 10px;
      gap: 7px;
    }

    .template-results .template-results-list .hotel-card-price strong {
      font-size: 22px;
      line-height: 1.08;
    }

    .template-results .template-results-list .hotel-card-stay-meta,
    .template-results .template-results-list .hotel-card-public-price {
      font-size: 12px;
      line-height: 1.3;
    }

    .template-results .template-results-list .hotel-availability-btn,
    .template-results .template-results-list .hotel-availability-btn:hover,
    .template-results .template-results-list .hotel-availability-btn:focus,
    .template-results .template-results-list .hotel-availability-btn:active {
      height: 44px;
      min-height: 44px;
      font-size: 12px;
    }
  }

  @media (max-width: 430px) {
    .nav-global .badge-link {
      display: none;
    }

    .map-label-row {
      grid-template-columns: minmax(0, 1fr) auto;
    }

    .map-view-toggle {
      grid-column: 1 / -1;
      width: 100%;
    }
  }
.half-map-inner { grid-template-columns: minmax(360px, .88fr) minmax(560px, 1.2fr); }
  .map-label-row { grid-column: 1 / -1; grid-row: 1; }
  .template-results { grid-column: 1; grid-row: 2; }
  .template-map { grid-column: 2; grid-row: 2; }
  .template-filters.hotel-filter-panel { position: fixed; z-index: 1200; top: 50%; left: 50%; right: auto; bottom: auto; width: min(440px, calc(100vw - 32px)); max-width: min(440px, calc(100vw - 32px)); height: min(82dvh, 760px); max-height: min(82dvh, 760px); padding: 20px; border: 1px solid rgba(148, 163, 184, .34); border-radius: 16px; box-shadow: 0 24px 64px rgba(2, 6, 23, .28); opacity: 0; pointer-events: none; transform: translate(-50%, -48%) scale(.98); transition: opacity 180ms ease-out, transform 180ms ease-out; }
  .template-filters.hotel-filter-panel.is-filter-modal-open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
  .stays-filter-modal-backdrop { position: fixed; z-index: 1190; inset: 0; display: none; width: 100%; height: 100%; border: 0; background: rgba(2, 6, 23, .56); cursor: pointer; }
  body.stays-filter-modal-open .stays-filter-modal-backdrop { display: block; }
  body.stays-filter-modal-open { overflow: hidden; }
  .stays-filter-modal-toggle, .map-expand-toggle { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; min-height: 30px; padding: 0 10px; border: 1px solid var(--stays-border); border-radius: 5px; background: var(--stays-surface); color: #263854; font: inherit; font-size: 12px; font-weight: 800; line-height: 1; cursor: pointer; }
  .map-label-row { justify-content: flex-start; }
  .map-label-chips { flex: 1 1 auto; }
  .map-view-toggle { margin-left: auto; }
  .stays-filter-modal-toggle:hover, .map-expand-toggle:hover { background: var(--stays-canvas); }
  .map-expand-control { position: absolute; z-index: 7; top: 104px; right: 10px; display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid rgba(148, 163, 184, .24); border-radius: 4px; background: rgba(255,255,255,.96); color: var(--stays-ink-muted); box-shadow: 0 14px 32px rgba(15,23,42,.12); cursor: pointer; }
  .map-expand-control:hover { background: var(--stays-canvas); }
  .map-expand-control:focus-visible { outline: 3px solid rgba(37, 99, 235, .38); outline-offset: 2px; }
  .map-expand-control svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  html[data-theme="dark"] .map-expand-control { border-color: rgba(255, 255, 255, .16); background: var(--stays-dark-panel-raised); color: var(--stays-night-text); box-shadow: none; }
  .stays-filter-modal-toggle:focus-visible, .map-expand-toggle:focus-visible, .stays-filter-modal-close:focus-visible { outline: 3px solid rgba(37, 99, 235, .38); outline-offset: 2px; }
  .stays-filter-modal-close { display: inline-grid; place-items: center; width: 34px; height: 34px; margin-left: auto; border: 1px solid var(--stays-border); border-radius: 50%; background: var(--stays-canvas); color: #263854; font-size: 20px; line-height: 1; cursor: pointer; }
  .half-map-inner.map-is-expanded { grid-template-columns: minmax(0, 1fr); }
  .half-map-inner.map-is-expanded .map-label-row { grid-column: 1; }
  .half-map-inner.map-is-expanded .template-results { display: none; }
  .half-map-inner.map-is-expanded .template-map { grid-column: 1; }
  html[data-theme="dark"] .stays-filter-modal-toggle, html[data-theme="dark"] .map-expand-toggle, html[data-theme="dark"] .stays-filter-modal-close { border-color: rgba(255, 255, 255, .16); background: var(--stays-dark-panel-raised); color: var(--stays-night-text); }
  @media (max-width: 1024px) { .template-filters.hotel-filter-panel { width: min(440px, calc(100vw - 24px)); max-width: min(440px, calc(100vw - 24px)); height: min(84dvh, 760px); max-height: min(84dvh, 760px); border-radius: 16px; } .half-map-inner.map-is-expanded .template-map-panel, .half-map-inner.map-is-expanded #map { height: calc(100dvh - 118px); min-height: 0; } }
  @media (max-width: 640px) { .map-label-row { grid-template-columns: minmax(0, 1fr) auto auto; } .map-view-toggle { grid-column: auto; width: auto; } .map-expand-toggle { padding: 0 9px; } }
  @media (prefers-reduced-motion: reduce) { .template-filters.hotel-filter-panel { transition: none; } }
  @media (max-width: 980px) {
    html, body { overflow: auto; }
    .site-shell,
    .page-wrap.full-width,
    .half-map-shell,
    .half-map-content,
    .half-map-inner { height: auto; min-height: 0; overflow: visible; }
    .half-map-inner { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(440px, auto) minmax(440px, auto); }
    .map-label-row { grid-column: 1; grid-row: 1; }
    .template-results { grid-column: 1; grid-row: 2; min-height: 520px; }
    .template-map { grid-column: 1; grid-row: 3; min-height: min(68dvh, 620px); }
    .template-map-panel,
    #map { height: min(68dvh, 620px); min-height: 440px; }
    .half-map-inner.map-is-expanded { height: calc(100dvh - 74px); min-height: calc(100dvh - 74px); grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }
    .half-map-inner.map-is-expanded .template-map { grid-row: 2; min-height: 0; }
    .half-map-inner.map-is-expanded .template-map-panel,
    .half-map-inner.map-is-expanded #map { height: calc(100dvh - 118px); min-height: 0; }
  }

  /* Price evidence is quiet at rest and becomes the active blue signal on interaction. */
  .qualoo-hotel-marker .hm-body {
    background: var(--stays-surface);
    border: 1px solid rgba(29, 78, 216, .38);
    color: var(--stays-signal);
    box-shadow: 0 4px 12px rgba(15, 23, 42, .16);
  }
  .qualoo-hotel-marker .hm-tip { border-top-color: var(--stays-surface); }
  .qualoo-hotel-marker:hover .hm-body,
  .qualoo-hotel-marker:focus-within .hm-body,
  .qualoo-hotel-marker.is-active .hm-body {
    background: var(--stays-signal);
    border-color: var(--stays-signal);
    color: var(--stays-surface);
    box-shadow: 0 8px 20px rgba(29, 78, 216, .28);
  }
  .qualoo-hotel-marker:hover .hm-tip,
  .qualoo-hotel-marker:focus-within .hm-tip,
  .qualoo-hotel-marker.is-active .hm-tip { border-top-color: var(--stays-signal); }

  /* The preview is a child of its marker so it follows the hotel through every pan and zoom. */
  .hotel-map-preview {
    --preview-shift-x: 0px;
    position: absolute;
    z-index: 40;
    left: 50%;
    right: auto;
    bottom: 100%;
    width: min(320px, calc(100vw - 32px));
    display: grid;
    justify-items: center;
    pointer-events: none;
    opacity: 0;
    transform: translate(calc(-50% + var(--preview-shift-x)), -10px) translateY(8px);
    transition: opacity 160ms ease-out, transform 160ms cubic-bezier(.16, 1, .3, 1);
  }
  .hotel-map-preview.is-visible { pointer-events: none; opacity: 1; transform: translate(calc(-50% + var(--preview-shift-x)), -10px) translateY(0); }
  .hotel-map-preview-card { width: 312px; height: 292px; display: grid; grid-template-rows: 142px minmax(0, 1fr); overflow: hidden; padding: 0; border: 1px solid rgba(148, 163, 184, .28); border-radius: 16px; background: var(--stays-surface); color: #10203b; box-shadow: 0 18px 48px rgba(15, 23, 42, .18); }
  .hotel-map-preview-image { position: relative; width: 100%; height: 142px; overflow: hidden; border-radius: 0; background: #edf3fb; }
  .hotel-map-preview-image img { width: 100%; height: 100%; display: block; object-fit: cover; }
  .hotel-map-preview-image-placeholder { height: 100%; display: grid; place-items: center; color: var(--stays-ink-muted); font-size: 12px; font-weight: 800; }
  .hotel-map-preview-content { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name name" "rating price" "action action"; align-content: space-between; gap: 7px 10px; padding: 11px 12px 12px; }
  .hotel-map-preview-name { grid-area: name; width: 100%; margin: 0; overflow: hidden; color: #10203b; font-size: 14px; line-height: 1.22; letter-spacing: -.01em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .hotel-map-preview-rating { grid-area: rating; display: inline-flex; align-items: center; gap: 6px; min-height: 20px; }
  .hotel-map-preview-stars { color: #e79b17; font-size: 13px; letter-spacing: 1px; }
  .hotel-map-preview-score { padding: 3px 7px; border-radius: 7px; background: #e7f7ef; color: #08734f; font-size: 12px; font-weight: 900; }
  .hotel-map-preview-price { grid-area: price; margin-left: auto; align-self: center; color: #10203b; font-size: 12px; white-space: nowrap; }
  .hotel-map-preview-price strong { font-size: 16px; }
  .hotel-map-preview-price span { color: #66758c; font-size: 11px; font-weight: 700; }
  .hotel-map-preview-action { grid-area: action; width: 100%; margin: 0; padding: 9px 11px; border-radius: 9px; background: var(--stays-signal); color: var(--stays-surface); font-size: 12px; font-weight: 800; line-height: 1; text-align: center; text-decoration: none; white-space: nowrap; }
  .hotel-map-preview-action:hover { background: var(--stays-signal-hover); }
  .hotel-map-preview-slideshow { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
  .hotel-map-preview-photo-control { width: 28px; height: 28px; margin: 0 8px; border: 0; border-radius: 50%; background: rgba(7, 8, 12, .72); color: var(--stays-surface); font-size: 22px; line-height: 1; cursor: pointer; opacity: 1; transition: background 140ms ease-out; pointer-events: auto; }
  .hotel-map-preview-photo-control:hover { background: rgba(7, 8, 12, .92); }
  .hotel-map-preview-photo-count { position: absolute; right: 9px; bottom: 8px; margin: 0; padding: 3px 6px; border-radius: 999px; background: rgba(7, 8, 12, .72); color: var(--stays-surface); font-size: 11px; font-weight: 800; pointer-events: none; }
  .hotel-maplibre-popup { pointer-events: auto; }
  .hotel-maplibre-popup .maplibregl-popup-content { padding: 0; background: transparent; box-shadow: none; }
  .hotel-maplibre-popup.maplibregl-popup-anchor-bottom .maplibregl-popup-tip { border-top-color: var(--stays-surface); }
  .hotel-maplibre-popup.maplibregl-popup-anchor-top .maplibregl-popup-tip { border-bottom-color: var(--stays-surface); }
  @media (max-width: 640px) { .hotel-map-preview { width: min(260px, calc(100vw - 24px)); } .hotel-map-preview-card { width: 260px; height: 252px; grid-template-rows: 110px minmax(0, 1fr); } .hotel-map-preview-image { height: 110px; } .hotel-map-preview-content { gap: 5px 8px; padding: 9px 10px 10px; } .hotel-map-preview-name { font-size: 13px; } .hotel-map-preview-price strong { font-size: 14px; } }
  @media (pointer: coarse) { .map-label-chip, .stays-filter-modal-toggle, .map-view-toggle-link, .map-expand-control, .stays-filter-modal-close, .maplibregl-ctrl-group button { min-width: 44px; min-height: 44px; height: 44px; } }

@media (max-width: 640px) {
  .map-label-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .stays-filter-modal-toggle { grid-column: 1; grid-row: 1; }
  .map-view-toggle { grid-column: 3; grid-row: 1; }
  .map-label-chips { grid-column: 1 / -1; grid-row: 2; }
}

/* Consolidated map cascade contract. These selectors replace legacy forced overrides. */
#stays-app #staysFilterModal,
#stays-app .template-results .template-results-list .hotel-result-card {
  border-radius: var(--stays-radius-card) !important;
}

#stays-app .template-strip .chip {
  color: #10203d !important;
  background-color: #e7eef9 !important;
}

@media (max-width: 640px) {
  #stays-app .template-strip .chip { font-size: 11px !important; }
}

@media (min-width: 641px) and (max-width: 980px) {
  #stays-app .chip { padding-inline: 14px !important; }
}