/* Map container */
    #map-container {
      position: relative;
      height: 100%;
      width: 100%;
    }
    #map-container #map-canvas {
      height: 100%;
      width: 100%;
    }

    /* Search box */
    #search-container {
      position: absolute;
      top: 10px;
      left: 50%;
      transform: translateX(-50%);
      margin: 0;
      width: 350px;
      max-width: calc(100vw - 20px);
      box-sizing: border-box;
      padding: 8px;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.05);
      background-color: rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(4px);
      border: 1px solid rgba(0, 0, 0, 0.05);

      display: flex;
      flex-direction: column;
    }
    /* input row is the positioning context for the icons */
    #search-input-wrapper {
      position: relative;
    }
    #address-search-input {
      width: 100%;
      padding: 8px;
      padding-left: 34px;
      padding-right: 36px;
      box-sizing: border-box;
      border: 1px solid #ccc;
      font-size: 13px;
      border-radius: 4px;
    }

    /* Add a responsive "focus" style to the search bar */
    #address-search-input:focus {
        border-color: #3b82f6; /* Your project's blue */
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
        outline: none;
    }

    /* Help Icon Button */
    #search-help-btn {
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      background: none;
      border: none;
      cursor: pointer;
      font-size: 16px;
      color: #9ca3af;
      padding: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    #search-help-btn:hover {
      color: #6b7280; /* gray-500 */
    }
    #search-help-btn i.fa-solid {
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        font-size: 16px; /* This ensures the icon itself has a size */
    }

    /* Magnifying glass */
    #search-icon {
      position: absolute;
      left: 10px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 14px;
      color: #9ca3af;
      pointer-events: none;
    }

    /* Ensure FA uses the solid font */
    #search-icon.fa-solid {
      font-family: "Font Awesome 6 Free";
      font-weight: 900;
    }

    /*  Help Modal Styles */
    #help-modal {
      display: none; /* Hidden by default */
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 2000; /* On top of everything */
    }

    /* Show the modal when this class is added */
    #help-modal.modal-visible {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    #help-modal-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5); /* Black overlay */
    }

    #help-modal-content {
      position: relative;
      background-color: #fff;
      border-radius: 12px;
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.2);
      width: 92%;
      max-width: 580px;
      max-height: 86vh;
      display: flex;
      flex-direction: column;
      z-index: 2001;
      overflow: hidden;
    }

    #help-modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 14px 20px;
      border-bottom: 1px solid #e2e8f0;
      background: #ffffff;
      flex-shrink: 0;
    }
    #help-modal-header h3 {
      margin: 0;
      font-weight: 700;
      font-size: 1.2rem;
      color: #0f172a; /* slate-900 */
    }

    #help-modal-close {
      background: none;
      border: none;
      font-size: 1.6rem;
      line-height: 1;
      font-weight: bold;
      cursor: pointer;
      color: #64748b; /* slate-500 */
      padding: 2px 6px;
      border-radius: 4px;
      transition: color 0.15s ease, background 0.15s ease;
    }
    #help-modal-close:hover {
      color: #0f172a;
      background: #f1f5f9;
    }

    #help-modal-body {
      padding: 16px 20px 20px;
      color: #334155; /* slate-700 */
      overflow-y: auto;
      flex: 1 1 auto;
      -webkit-overflow-scrolling: touch;
    }
    #help-modal-body p {
      margin-top: 0;
      margin-bottom: 1rem;
      line-height: 1.5;
    }
    #help-modal-body p:last-child {
      margin-bottom: 0;
    }

    /* ---------- <details> accordion ---------- */
    #help-modal-body details {
      border-bottom: 1px solid #e5e7eb; /* gray-200 */
      margin: 0;                        /* no stray vertical margins */
    }
    #help-modal-body details:last-of-type {
      border-bottom: none;
    }

    /* The clickable row (FORCE UNIFORM HEIGHT & ROBUST MOBILE WRAPPING) */
    #help-modal-body summary {
      display: flex;
      align-items: center;
      gap: 10px;
      min-height: 44px;
      padding: 4px 0;
      box-sizing: border-box;
      cursor: pointer;
      font-weight: 600;
      font-size: 1.05rem;
      color: #1f2937; /* gray-800 */
      list-style: none; /* remove default marker */
      user-select: none;
    }

    /* Hide Safari's default disclosure triangle */
    #help-modal-body summary::-webkit-details-marker { display: none; }

    #help-modal-body summary:hover {
      color: #3b82f6; /* blue-500 */
    }

    /* Fixed-size box for the leading FA icon */
    #help-modal-body summary i.fa-solid {
      font-family: "Font Awesome 6 Free";
      font-weight: 900;
      font-size: 16px;

      display: inline-block;
      width: 22px;                  /* fixed icon column */
      height: 20px;                 /* consistent glyph box */
      line-height: 20px;            /* centers glyph inside its box */
      text-align: center;
      flex: 0 0 22px;
    }

    /* Text container that truncates cleanly on narrow mobile viewports */
    #help-modal-body summary span.summary-text {
      flex: 1 1 auto;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    /* Chevron stays pinned on the right and NEVER gets clipped */
    #help-modal-body summary::after {
      content: '►';
      margin-left: auto;
      flex: 0 0 auto;
      padding-left: 8px;
      font-size: 0.8em;
      line-height: 1;
      transition: transform 0.2s ease;
    }
    #help-modal-body details[open] > summary::after {
      transform: rotate(90deg);
    }

    /* Content inside each details */
    #help-modal-body details > *:not(summary) {
      margin-top: 0; /* prevent sticky top-margins after closing */
    }
    #help-modal-body details > ul,
    #help-modal-body details > p {
      margin: 0 0 12px 0;
      padding-left: 38px; /* indent under the icon column */
    }
    #help-modal-body details > p:last-child {
      margin-bottom: 0;
    }

    /* small hint line at top of the guide */
    #help-modal-body .help-tip {
      display: block;
      font-size: 0.85rem;
      color: #334155; /* slate-700 */
      line-height: 1.45;
      margin: 0 0 14px 0;
      padding: 8px 12px;
      background: #f1f5f9; /* slate-100 */
      border-radius: 6px;
      border-left: 3px solid #3b82f6; /* blue-500 */
    }
    #help-modal-body .help-tip i {
      color: #2563eb; /* blue-600 */
      margin-right: 5px;
    }

    /* Styles for our custom autocomplete dropdown */
    #search-suggestions-container {
      display: none; /* Hidden by default */
      position: absolute;
      top: 100%; /* Place it right below the search container's padding box */
      left: 0;
      right: 0;
      /* We set left/right to 0 so it matches the parent search-container's width */
      
      background-color: white;
      border: 1px solid #e5e7eb; /* gray-200 */
      border-top: none;
      border-radius: 0 0 4px 4px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      max-height: 300px;
      overflow-y: auto;
      
      /* Needs to be higher than the map, lower than the info box (if it overlaps) */
      z-index: 1000; 
    }

    .suggestion-item {
      padding: 8px 12px;
      cursor: pointer;
      border-bottom: 1px solid #f3f4f6; /* gray-100 */
    }
    .suggestion-item:last-child {
      border-bottom: none;
    }
    .suggestion-item:hover, .suggestion-item.active {
      background-color: #f9fafb; /* gray-50 */
    }

    /* Top Line: Owner Name */
    .suggestion-item-owner {
      display: block;
      font-weight: 600;
      color: #1f2937; /* gray-800 */
      font-size: 13px;
      margin-bottom: 3px;
      
      /* Handle long names gracefully */
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* Bottom Line Container: Flex row */
    .suggestion-item-details {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 11px;
      color: #6b7280; /* gray-500 */
    }

    /* Bottom Left: Situs Address */
    .suggestion-item-situs {
      display: flex;
      align-items: center;
      gap: 5px;
      margin-right: 10px; /* Space between address and account pill */
      
      /* Truncate address if it's too long */
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* Bottom Right: Account Number Pill */
    .suggestion-item-account {
      flex-shrink: 0; /* Never shrink the account number */
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      background-color: #f3f4f6; /* gray-100 pill background */
      padding: 2px 6px;
      border-radius: 4px;
      color: #374151; /* gray-700 */
      font-weight: 500;
    }

    /* Floating info box */
    #map-info-box {
      position: absolute;
      top: 10px;
      right: 10px;
      margin: 0;
      width: 350px;
      max-height: calc(100% - 215px);
      z-index: 10;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.05);
      display: none; /* Initially hidden */
      flex-direction: column;
      transition: all 0.3s ease-in-out;
      background-color: rgba(255, 255, 255, 0.9); /* 90% opaque white */
      backdrop-filter: blur(4px);
      border: 1px solid rgba(0, 0, 0, 0.05);
      font-size: 13px;
      overflow: hidden;
    }

    /* HEADER: center the title, pin buttons to sides */
    #map-info-box-header {
      position: relative;
      display: flex;
      justify-content: center;   /* center content */
      align-items: center;
      padding: 12px 16px;
      border-bottom: 1px solid #e5e7eb; /* gray-200 */
      background-color: #eff6ff;
    }

    /* Centered title */
    #map-info-box-title {
      margin: 0;
      font-weight: 600;
      color: #1f2937; /* gray-800 */
      font-size: 0.95rem; /* slightly compact */
      text-align: center;
    }

    /* Back + Close buttons share the same base style */
    #map-info-box-back,
    #map-info-box-close {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: none;
      border: none;
      font-size: 1.25rem;
      cursor: pointer;
      color: #6b7280; /* gray-500 */
    }

    /* Left/back button */
    #map-info-box-back {
      left: 12px;
    }

    /* Right/close button */
    #map-info-box-close {
      right: 12px;
    }

    #map-info-box-content {
      /* Padding removed, handled by children */
      overflow-y: auto;
    }
    #map-info-box-content .info-item {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      padding: 6px 0;
      border-bottom: 1px solid #f3f4f6; /* gray-100 */
    }
    #map-info-box-content .info-item:last-child {
      border-bottom: none;
    }

    /* Section wrapper and title */
    .info-section + .info-section {
      margin-top: 10px;
      padding-top: 6px;
      border-top: 1px solid #e5e7eb;
    }
    .info-section-title {
      font-size: 0.7rem;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: #9ca3af; /* gray-400 */
      margin: 4px 0 6px 0;
      text-align: center;
    }
    .info-section:first-of-type .info-section-title {
      margin-top: 8px;
    }

    /* Label vs value hierarchy */
    #map-info-box-content .info-label {
      font-weight: 500;
      color: #6b7280; /* gray-500 */
      padding-right: 1rem;
      font-size: 0.8rem;
      white-space: nowrap;
    }
    #map-info-box-content .info-value {
      color: #111827; /* gray-900 */
      text-align: right;
      flex-shrink: 0;
      font-size: 0.9rem;
      font-weight: 600;
      margin-left: 0.5rem;
    }

    /* --- Favorite (My Parcel) star in header --- */
    #map-info-box-favorite {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 24px;
      right: auto;
      background: none;
      border: none;
      cursor: pointer;
      font-size: 1.1rem;
      color: #d1d5db;   /* gray-300 */
      display: none;    /* hidden until a parcel is loaded */
      padding: 0;
    }

    #map-info-box-favorite i {
      pointer-events: none; /* ensures clicks hit the button */
    }

    #map-info-box-favorite.saved {
      color: #fbbf24; /* amber-400 */
    }

        /* --- Share link button in header --- */
    #map-info-box-share {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 40px;               /* between title and close button */
      background: none;
      border: none;
      cursor: pointer;
      font-size: 0.9rem;
      color: #9ca3af;            /* gray-400 */
      display: none;             /* hidden until a parcel is loaded */
      padding: 0;
    }

    #map-info-box-share:hover {
      color: #4b5563;            /* gray-600 */
    }

    /* --- Search Toolbar & Action Buttons --- */
    .search-toolbar {
      display: flex;
      align-items: center;
      gap: 5px;
      margin-top: 6px;
      flex-wrap: nowrap; /* Strictly single-row layout; never wraps pills */
      width: 100%;
      box-sizing: border-box;
    }

    .search-tool-btn {
      flex: 1 1 0;
      min-width: 0;
      height: 28px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      font-size: 11px;
      font-weight: 600;
      color: #475569;
      background-color: #f8fafc;
      border: 1px solid #e2e8f0;
      padding: 0 4px;
      border-radius: 6px;
      cursor: pointer;
      text-decoration: none;
      white-space: nowrap;
      transition: all 0.15s ease;
      box-sizing: border-box;
      line-height: 1;
    }

    .search-tool-btn:hover {
      background-color: #f1f5f9;
      border-color: #cbd5e1;
      color: #0f172a;
    }

    .search-tool-btn.active {
      background-color: #eff6ff;
      border-color: #3b82f6;
      color: #1d4ed8;
    }

    .search-tool-btn i {
      font-size: 11px;
      flex-shrink: 0;
    }

    .search-tool-label {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .search-tool-count {
      font-size: 11px;
      font-weight: 600;
      color: #94a3b8;
      line-height: 1;
      flex-shrink: 0;
    }

    #layers-active-badge {
      color: #2563eb;
      font-weight: 700;
    }

    #btn-toggle-layers.has-active-layers {
      background-color: #eff6ff;
      border-color: #93c5fd;
      color: #1d4ed8;
    }

    #search-pro-action-slot {
      width: 100%;
    }

    /* Dropdown list for My Parcels (similar styling to suggestions) */
    #my-parcels-dropdown {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      margin-top: 4px;
      background-color: #ffffff;
      border: 1px solid #e5e7eb; /* gray-200 */
      border-radius: 4px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      max-height: 300px;
      overflow-y: auto;
      z-index: 1000;
      font-size: 13px;
    }

    .my-parcel-item {
      padding: 8px 12px;
      border-bottom: 1px solid #f3f4f6; /* gray-100 */
      cursor: pointer;
    }

    .my-parcel-item:last-child {
      border-bottom: none;
    }

    .my-parcel-item:hover {
      background-color: #f9fafb; /* gray-50 */
    }

    .my-parcel-item-owner {
      font-weight: 500;
      color: #1f2937; /* gray-800 */
    }

    .my-parcel-item-detail {
      font-size: 12px;
      color: #6b7280; /* gray-500 */
      margin-top: 2px;
    }

    .my-parcels-empty {
      padding: 10px 12px;
      font-size: 12px;
      color: #6b7280; /* gray-500 */
    }

    /* Toast for small status messages (Parcel saved / removed) */
    #toast {
      position: fixed;
      left: 50%;
      bottom: 16px;
      transform: translateX(-50%) translateY(10px);
      background-color: rgba(17, 24, 39, 0.92); /* gray-900 */
      color: #f9fafb; /* gray-50 */
      padding: 8px 14px;
      border-radius: 999px;
      font-size: 12px;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease, transform 0.2s ease;
      z-index: 3000;
    }

    #toast.visible {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    /* (optional) small tweak on mobile – toast a bit higher if you like */
    @media (max-width: 768px) {
      #toast {
        bottom: 72px;
      }
    }

    /* Street View Container */
    #sv-image-container {
      position: relative;
      width: 100%;
      height: 200px;
      background-color: #e5e7eb;
      overflow: hidden;
      border-bottom: 1px solid #e5e7eb;
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
    }

    #sv-image-container img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
      transition: transform 0.2s ease;
    }

    #sv-image-container.sv-clickable {
      cursor: pointer;
    }

    #sv-image-container.sv-clickable:hover img {
      transform: scale(1.03);
    }

    .sv-overlay-badge {
      position: absolute;
      bottom: 8px;
      right: 8px;
      background-color: rgba(15, 23, 42, 0.88);
      color: #ffffff;
      font-size: 11px;
      font-weight: 600;
      padding: 5px 9px;
      border-radius: 6px;
      border: 1px solid rgba(255, 255, 255, 0.2);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      display: inline-flex;
      align-items: center;
      gap: 6px;
      pointer-events: none;
      transition: all 0.2s ease;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
      z-index: 2;
    }

    button.sv-badge-button {
      pointer-events: auto;
      cursor: pointer;
      font-family: inherit;
    }

    button.sv-badge-button:hover,
    #sv-image-container.sv-clickable:hover .sv-overlay-badge {
      background-color: #2563eb;
      border-color: #60a5fa;
      color: #ffffff;
      box-shadow: 0 4px 12px rgba(37, 99, 235, 0.5);
      transform: translateY(-1px);
    }

    /* Info Fields Container */
    #info-items-container {
      padding: 16px;
      overflow-y: auto;
    }

    .sv-padded-container {
      padding: 16px 16px 0 16px; /* Top, Right, Bottom, Left. No bottom padding for seamless transition to info. */
    }

    /* Feedback Button Style */
    #feedback-btn {
      /* Basic Style */
      background-color: #fff;
      color: #222;
      font-family: "Inter", sans-serif;
      font-size: 13px;
      font-weight: 500;
      padding: 8px 12px;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.05);
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: 6px;
      border: none;
      cursor: pointer;
      
      position: absolute;
      z-index: 10; /* Above map, below modal */

      /* This positions it relative to the viewport.
        - 118px from the bottom to align with the bottom of Pegman.
        - 60px from the right (10px map padding + 40px zoom control + 10px gap).
        You can tweak these two pixel values to get the perfect alignment.
      */
      bottom: 24px;
      right: 60px;
    }
    #feedback-btn:hover {
      background-color: #f5f5f5; /* Lighter hover */
    }

    /* --- My Location button --- */
    #locate-btn {
      position: absolute;
      z-index: 10;
      bottom: 80px;      /* sits just above zoom/pegman; tweak if needed */
      left: 10px;
      width: 34px;
      height: 34px;
      border-radius: 999px;
      border: 1px solid #e5e7eb;  /* gray-200 */
      background-color: #ffffff;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);

      /* hidden by default; JS will enable on mobile devices only */
      display: none;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      padding: 0;
    }

    #locate-btn i {
      font-size: 14px;
      color: #4b5563;   /* gray-600 */
    }

    #locate-btn:hover {
      background-color: #f9fafb; /* gray-50 */
    }

    /* Mobile: layout tweaks */
    @media (max-width: 768px) {
      /* Hide floating directory pill on mobile (available via search drawer) */
      .map-brand-directory-pill {
        display: none !important;
      }

      /* Search bar: full-width with padding */
      #search-container {
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: calc(100vw - 32px);
        margin: 0;
        padding: 8px;
        box-sizing: border-box;
      }

      #address-search-input {
        font-size: 14px;
      }

      /* Parcel info panel: full-width card under search */
      #map-info-box {
        top: 72px;                       /* sits below the search bar */
        right: auto;
        left: 50%;
        transform: translateX(-50%);
        width: calc(100vw - 16px);
        margin: 0;
        max-height: 55vh;                /* don't cover the whole map */
        font-size: 12px;
      }

      /* Slightly shorter photo on small screens */
      #sv-image-container {
        height: 160px;
      }

      /* Feedback button – bottom-left */
      #feedback-btn {
        bottom: 24px;
        left: 10px;
        right: auto;
      }

      #locate-btn {
        bottom: 72px;  /* 24px + ~48px button height */
        left: 10px;
        right: auto;
      }
    }

    /* Search Drawer Directory Link */
    .drawer-directory-link {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 11px;
      font-weight: 600;
      color: #2563eb;
      text-decoration: none;
      padding: 3px 6px;
      border-radius: 4px;
      background-color: #eff6ff;
      border: 1px solid #dbeafe;
      transition: all 0.15s ease;
      white-space: nowrap;
    }
    .drawer-directory-link:hover {
      color: #1d4ed8;
      background-color: #dbeafe;
    }

    /* --- Unified Map Layers Panel --- */
    .map-layers-panel {
      margin-top: 8px;
      padding-top: 8px;
      border-top: 1px solid #e2e8f0;
      display: flex;
      flex-direction: column;
      animation: layersPanelSlide 0.18s ease-out;
    }

    .map-layers-panel.hidden {
      display: none !important;
    }

    @keyframes layersPanelSlide {
      from {
        opacity: 0;
        transform: translateY(-4px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .layers-panel-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 6px;
      margin-bottom: 6px;
      border-bottom: 1px solid #f1f5f9;
    }

    .layers-panel-title {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      font-weight: 700;
      color: #1e293b;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    .layers-clear-btn {
      background: none;
      border: none;
      color: #ef4444;
      font-size: 11px;
      font-weight: 600;
      cursor: pointer;
      padding: 2px 6px;
      border-radius: 4px;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: all 0.15s ease;
    }

    .layers-clear-btn:hover {
      background-color: #fee2e2;
    }

    .layers-close-btn {
      background: none;
      border: none;
      color: #94a3b8;
      font-size: 13px;
      cursor: pointer;
      padding: 2px 6px;
      border-radius: 4px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: all 0.15s ease;
    }

    .layers-close-btn:hover {
      color: #1e293b;
      background-color: #f1f5f9;
    }

    .layers-panel-scroll {
      max-height: 380px;
      overflow-y: auto;
      padding-right: 4px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .layers-panel-scroll::-webkit-scrollbar {
      width: 4px;
    }
    .layers-panel-scroll::-webkit-scrollbar-thumb {
      background-color: #cbd5e1;
      border-radius: 4px;
    }

    .layers-section {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .layers-section-heading {
      font-size: 10px;
      font-weight: 700;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      margin-bottom: 2px;
    }

    .layers-section-heading.pro-heading {
      display: flex;
      align-items: center;
      gap: 6px;
      color: #0f172a;
    }

    .layers-subgroup-title {
      font-size: 10px;
      font-weight: 600;
      color: #94a3b8;
      margin-top: 4px;
      margin-bottom: 2px;
      text-transform: uppercase;
      letter-spacing: 0.02em;
    }

    .layers-list {
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    .layer-toggle-label {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      color: #374151;
      cursor: pointer;
      user-select: none;
      padding: 2px 4px;
      border-radius: 4px;
      transition: background 0.1s ease;
    }

    .layer-toggle-label:hover {
      background-color: #f8fafc;
    }

    .layer-toggle-label input {
      cursor: pointer;
      width: 14px;
      height: 14px;
      accent-color: #2563eb;
    }

    .pro-layer-toggle {
      border-radius: 4px;
      margin-bottom: 1px;
    }

    .pro-tag {
      font-size: 9px;
      font-weight: 800;
      background: rgba(16, 185, 129, 0.15);
      color: #059669;
      border: 1px solid rgba(16, 185, 129, 0.3);
      padding: 1px 4px;
      border-radius: 4px;
      letter-spacing: 0.5px;
      line-height: 1.1;
    }

    .pro-layers-teaser-card {
      display: none !important; /* Hidden on non-pro until ready for marketing push */
      margin-top: 6px;
      padding: 10px;
      background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
      border: 1px solid #a7f3d0;
      border-radius: 6px;
    }
    /* --- End Map Layers Panel CSS --- */

    /* --- Inactive Account Overlay --- */
    .inactive-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(255, 255, 255, 0.75);
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);
      z-index: 100;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border-radius: 8px; /* Matches your modal borders */
    }

    .inactive-badge {
      background-color: #fef2f2; /* Rose 50 */
      border: 2px solid #f87171; /* Orange/Red 400 */
      color: #991b1b;            /* Red 800 */
      padding: 16px 24px;
      border-radius: 8px;
      text-align: center;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      max-width: 80%;
    }

    .inactive-badge h2 {
      margin: 0 0 8px 0;
      font-size: 1.2rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .inactive-badge p {
      margin: 0;
      font-size: 0.85rem;
      color: #7f1d1d; /* Red 900 */
      line-height: 1.4;
    }

    /* Hide the overlay when printing so they just get the raw N/A data if they force a print */
    @media print {
      .inactive-overlay { display: none !important; }
    }

    /* --- Floating Thematic Map Legend (Spectacle Pro) --- */
    .thematic-legend-card {
      position: absolute;
      bottom: 32px;
      left: 20px;
      z-index: 1000;
      background: rgba(15, 23, 42, 0.88);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 10px;
      padding: 12px 14px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 0 1px rgba(255, 255, 255, 0.2);
      color: #f8fafc;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      min-width: 190px;
      animation: thematicLegendSlideIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
      pointer-events: auto;
    }

    @keyframes thematicLegendSlideIn {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .thematic-legend-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 8px;
      padding-bottom: 6px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .thematic-legend-title {
      font-size: 0.78rem;
      font-weight: 700;
      color: #e2e8f0;
      display: flex;
      align-items: center;
      gap: 6px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .thematic-legend-close {
      background: transparent;
      border: none;
      color: #94a3b8;
      font-size: 0.8rem;
      cursor: pointer;
      padding: 2px 4px;
      border-radius: 4px;
      line-height: 1;
      transition: color 0.15s;
    }

    .thematic-legend-close:hover {
      color: #f1f5f9;
    }

    .thematic-legend-items {
      display: flex;
      flex-direction: column;
      gap: 5px;
    }

    .thematic-legend-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.74rem;
      color: #cbd5e1;
      font-weight: 500;
    }

    .thematic-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      flex-shrink: 0;
      box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
    }

    @media (max-width: 768px) {
      .thematic-legend-card {
        bottom: 24px;
        left: 10px;
        padding: 10px 12px;
        min-width: 160px;
      }
    }