/* === Default sizing (max-width/height) — the missing piece: these were
   previously always emitted inline per-instance; now they live here as the
   class-based default, with PHP only overriding when an instance's
   height/mobile_height/max_width actually differ from default. === */
.natureslens-map-shortcode,
.natureslens-sm-wrap { max-width: 1140px !important; }
.natureslens-map-canvas,
.natureslens-sm-canvas { height: 540px !important; }
@media (max-width: 700px) {
  .natureslens-map-canvas,
  .natureslens-sm-canvas { height: 300px !important; }
}
/* !important above is required: jsvectormap's own CDN stylesheet (jsvectormap.min.css,
   .jvm-container{height:100%}) is injected into <head> at runtime AFTER this Sitewide CSS,
   so at equal class-selector specificity it would otherwise win the cascade by source order
   and collapse the map to a tiny height. The old code avoided this by always using an
   ID-scoped selector; the shared class-based default needs !important instead. */

/* === Dest-tag base styles (natureslens_map + nl_trips_map), default colours === */
.natureslens-map-shortcode .natureslens-dest-tag,
.natureslens-trips-map-shortcode .natureslens-dest-tag { color: #5C673C; border-color: #dcded5; background: #e9eae4; }
.natureslens-map-shortcode .natureslens-dest-tag:hover,
.natureslens-trips-map-shortcode .natureslens-dest-tag:hover { background: #e2e4dd; border-color: #5C673C; }
.natureslens-map-shortcode .natureslens-dest-tag::before,
.natureslens-trips-map-shortcode .natureslens-dest-tag::before { background: #5C673C; }
.natureslens-map-shortcode .natureslens-dest-tag--sig,
.natureslens-trips-map-shortcode .natureslens-dest-tag--sig { color: #5B6B9A; border-color: #dfe2eb; background: #e8ebf1; }
.natureslens-map-shortcode .natureslens-dest-tag--sig:hover,
.natureslens-trips-map-shortcode .natureslens-dest-tag--sig:hover { background: #e5e8ef; border-color: #5B6B9A; }
.natureslens-map-shortcode .natureslens-dest-tag--sig::before,
.natureslens-trips-map-shortcode .natureslens-dest-tag--sig::before { background: #5B6B9A; }
.natureslens-map-shortcode .natureslens-tip-trips { color: #5C673C; }
.natureslens-map-shortcode .natureslens-tip-dot { background: #5C673C; }

/* === natureslens_species_map: base styles (moved verbatim from PHP) === */

    /* ── Species map: base styles (instance-agnostic) ─────────────────────── */
    /* Only written once per page load since inline styles are idempotent here */
    .natureslens-sm-wrap  { width: 100%; margin: 0 auto; padding: 0 0 3rem; font-family: inherit; }
    .natureslens-sm-empty { color: #888; font-style: italic; }

    .natureslens-sm-card   { width: 100%; background: #f2f2f2; position: relative; border-radius: 4px; overflow: hidden; }
    .natureslens-sm-reset  {
      position: absolute; bottom: 10px; right: 10px; z-index: 10;
      padding: 4px 10px; background: rgba(255,255,255,0.9); border: 1px solid #ccc;
      border-radius: 4px; font-size: 0.78rem; cursor: pointer; color: #555;
      transition: background 0.1s;
    }
    .natureslens-sm-reset:hover { background: #fff; border-color: #5C673C; color: #5C673C; }
    .natureslens-sm-canvas { width: 100%; }
    .natureslens-sm-canvas svg { touch-action: pan-x pan-y; }
    .natureslens-sm-canvas .jvm-container { background: #f2f2f2 !important; }
    .natureslens-sm-canvas .jvm-marker    { pointer-events: none !important; }
    .natureslens-sm-canvas svg            { user-select: none; -webkit-user-select: none; }
    .natureslens-sm-canvas text           { pointer-events: none; user-select: none; -webkit-user-select: none; }

    /* ── Custom marker tooltip ────────────────────────────────────────────── */
    .natureslens-sm-tip {
      position: fixed; pointer-events: none; opacity: 0;
      transition: opacity 0.15s ease; z-index: 9999;
      background: #fff; border: 1px solid #d8d8d6; border-radius: 4px;
      box-shadow: 0 4px 16px rgba(0,0,0,0.12);
      padding: 1.2rem 1.6rem; min-width: 280px; max-width: 360px;
    }
    /* Mobile: center in viewport */
    @media (max-width: 700px) {
      .natureslens-sm-tip {
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%);
        min-width: 80vw; max-width: 90vw;
        max-height: 80vh; overflow-y: auto;
      }
    }
    .natureslens-sm-tip-close-btn {
      float: right; margin: -4px -6px 6px 10px;
      background: none; border: none; cursor: pointer;
      font-size: 1.2rem; color: #aaa; line-height: 1; padding: 2px 6px;
      pointer-events: auto;
    }
    .natureslens-sm-tip-close-btn:hover { color: #333; }
    .natureslens-sm-tip-name  { font-size: 1.4rem; font-weight: 700; color: #1a1a1a; display: block; margin-bottom: 0.3rem; }
    .natureslens-sm-tip-count { font-size: 0.95rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; display: block; margin-bottom: 0.6rem; }
    .natureslens-sm-tip-list  { margin: 0; padding: 0 0 0 1.1rem; max-height: 200px; overflow-y: auto; font-size: 1rem; color: #444; line-height: 1.9; }
    .natureslens-sm-tip-nav   {
      display: block; margin-top: 12px;
      padding: 10px 16px; text-align: center;
      font-size: 0.85rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
      color: #fff; background: #5C673C; text-decoration: none; border-radius: 3px;
    }
    .natureslens-sm-tip-nav:hover { background: #4a5230; color: #fff; text-decoration: none; }

    /* ── Species panel ────────────────────────────────────────────────────── */
    .natureslens-sm-panel {
      margin-top: 16px; background: #f9f9f7;
      border: 1px solid #e4e4e0; border-radius: 6px;
      padding: 14px 18px 18px;
    }
    .natureslens-sm-panel-header { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
    .natureslens-sm-controls     { display: flex; gap: 7px; margin-left: auto; align-items: center; }
    .natureslens-sm-search {
      padding: 3px 10px; border-radius: 4px; border: 1px solid #ccc;
      font-size: 0.85rem; color: #333; width: 150px;
      outline: none; background: #fff;
    }
    .natureslens-sm-search:focus { border-color: #5C673C; }
    @media (max-width: 700px) { .natureslens-sm-search { width: 110px; } }

    /* ── A–Z tabs ─────────────────────────────────────────────────────────── */
    .natureslens-sm-az { display: flex; flex-wrap: wrap; gap: 3px; }
    .natureslens-sm-az-btn {
      padding: 2px 7px; border-radius: 3px; border: 1px solid #ccc;
      background: #fff; font-size: 0.76rem; font-weight: 700;
      cursor: pointer; color: #444; line-height: 1.5;
      transition: background 0.1s, color 0.1s, border-color 0.1s;
    }

    /* ── Controls ─────────────────────────────────────────────────────────── */
    .natureslens-sm-logic, .natureslens-sm-clear {
      padding: 3px 11px; border-radius: 4px; border: 1px solid #ccc;
      background: #fff; font-size: 0.78rem; cursor: pointer; color: #555;
      transition: background 0.1s, border-color 0.1s, color 0.1s;
    }
    .natureslens-sm-clear:hover { background: #fef0f0; border-color: #cc4444; color: #cc4444; }

    /* ── Species pill list ────────────────────────────────────────────────── */
    .natureslens-sm-list {
      display: flex; flex-wrap: wrap; gap: 5px;
      max-height: 230px; overflow-y: auto; padding-right: 4px;
    }
    .natureslens-sm-list-heading {
      width: 100%; font-size: 0.84rem; color: #555;
      display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
      margin-bottom: 4px;
    }
    .natureslens-sm-list-heading-clear {
      background: none; border: none; font-size: 0.78rem;
      cursor: pointer; padding: 0; text-decoration: underline;
    }
    .natureslens-sm-pills { display: flex; flex-wrap: wrap; gap: 5px; }

    /* ── Species pill ─────────────────────────────────────────────────────── */
    .natureslens-sm-pill {
      padding: 2px 10px; border-radius: 30px;
      border: 1px solid #ccc; background: #fff;
      font-size: 1rem; color: #333; cursor: pointer; white-space: nowrap;
      transition: background 0.1s, border-color 0.1s, transform 0.08s;
      line-height: 1.65;
    }
    .natureslens-sm-pill:hover { transform: translateY(-1px); }

    /* ── Legend ───────────────────────────────────────────────────────────── */
    .natureslens-sm-legend {
      display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: center;
      margin-top: 14px; padding-top: 12px; border-top: 1px solid #e4e4e0;
    }
    .natureslens-sm-legend-item {
      display: flex; align-items: center; gap: 6px;
      font-size: 1rem; color: #444;
      letter-spacing: 0;
    }

    /* ── Scrollbars ───────────────────────────────────────────────────────── */
    .natureslens-sm-list::-webkit-scrollbar,
    .natureslens-sm-tip-list::-webkit-scrollbar          { width: 5px; }
    .natureslens-sm-list::-webkit-scrollbar-track,
    .natureslens-sm-tip-list::-webkit-scrollbar-track    { background: #f0f0ee; border-radius: 3px; }
    .natureslens-sm-list::-webkit-scrollbar-thumb,
    .natureslens-sm-tip-list::-webkit-scrollbar-thumb    { background: #c8c8c4; border-radius: 3px; }
    

/* === natureslens_species_map: A-Z/pill default colours (moved from PHP) === */
.natureslens-sm-wrap .natureslens-sm-az-btn:hover     { background: #eff0ec; border-color: #5C673C; }
.natureslens-sm-wrap .natureslens-sm-az-btn.is-on     { background: #5C673C; border-color: #5C673C; color: #fff; }
.natureslens-sm-wrap .natureslens-sm-logic:hover      { border-color: #5B6B9A; }
.natureslens-sm-wrap .natureslens-sm-pill:hover       { background: #eff0ec; border-color: #5C673C; }
.natureslens-sm-wrap .natureslens-sm-pill.is-on       { background: #5C673C; border-color: #485328; color: #fff; }
.natureslens-sm-wrap .natureslens-sm-pill.is-on:hover { background: #525d32; }
.natureslens-sm-wrap .natureslens-sm-list-heading-clear { color: #5C673C; }

/* === Location child-nav footer (moved verbatim from PHP, was hardcoded/static) === */

      .nl-location-child-nav {
        max-width: 1100px;
        width: min(100%, 1100px);
        margin: 2rem auto 0.55rem;
        padding: 0;
      }
      .nl-location-child-nav__inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.85rem;
        padding: 0;
        border: 0;
        background: transparent;
      }
      .nl-location-child-nav__head {
        display: flex;
        align-items: baseline;
        gap: 0.7rem;
        flex-wrap: wrap;
        flex: 0 0 auto;
      }
      .nl-location-child-nav__title {
        margin: 0;
        color: #666;
        font-size: 1.08rem;
        font-weight: 700;
        line-height: 1.25;
        text-transform: uppercase;
      }
      .nl-location-child-nav__meta {
        color: #777;
        font-size: 0.9rem;
        line-height: 1.25;
        text-transform: uppercase;
      }
      .nl-location-child-nav__links {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 0.5rem;
        min-width: 0;
      }
      .nl-location-child-nav .natureslens-dest-tag {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.45rem 1rem;
        border: 1px solid #dcded5;
        background: #e9eae4;
        color: #5C673C;
        font-size: 1rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        line-height: 1.15;
        text-decoration: none;
        text-transform: uppercase;
        transition: background 0.15s, border-color 0.15s;
      }
      .nl-location-child-nav .natureslens-dest-tag:hover,
      .nl-location-child-nav .natureslens-dest-tag:focus-visible {
        border-color: #5C673C;
        background: #e2e4dd;
      }
      .nl-location-child-nav .natureslens-dest-tag::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        display: inline-block;
        flex: 0 0 auto;
        background: #5C673C;
      }
      .nl-location-child-nav .natureslens-dest-tag--sig {
        border-color: #dfe2eb;
        background: #e8ebf1;
        color: #5B6B9A;
      }
      .nl-location-child-nav .natureslens-dest-tag--sig:hover,
      .nl-location-child-nav .natureslens-dest-tag--sig:focus-visible {
        border-color: #5B6B9A;
        background: #e5e8ef;
      }
      .nl-location-child-nav .natureslens-dest-tag--sig::before {
        background: #5B6B9A;
      }
      .nl-location-child-nav__count {
        opacity: 0.85;
      }
      @media (max-width: 640px) {
        .nl-location-child-nav {
          width: calc(100% - 50px);
          margin: 1.35rem auto 1.25rem;
          padding: 0;
        }
        .nl-location-child-nav__inner {
          display: grid;
          align-items: stretch;
          justify-content: stretch;
          gap: 0.75rem;
          padding: 0;
        }
        .nl-location-child-nav__head {
          display: grid;
          justify-self: start;
          gap: 0.2rem;
        }
        .nl-location-child-nav__title {
          font-size: 1rem;
        }
        .nl-location-child-nav__meta {
          font-size: 0.78rem;
        }
        .nl-location-child-nav__links {
          display: flex;
          flex-wrap: nowrap;
          justify-content: flex-start;
          gap: 0.45rem;
          overflow-x: auto;
          width: 100%;
          padding-bottom: 0.15rem;
          -webkit-overflow-scrolling: touch;
          scrollbar-width: none;
        }
        .nl-location-child-nav__links::-webkit-scrollbar {
          display: none;
        }
        .nl-location-child-nav .natureslens-dest-tag {
          flex: 0 0 auto;
          padding: 0.44rem 0.72rem;
          font-size: 0.88rem;
          white-space: nowrap;
        }
      }