/* ============================================
   WP Go Maps — Atlas Major
   Comprehensive Visual Rework
   Scoped under .wpgmza-atlas-major
   ============================================ */

/* Font imports */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ============================================
   CSS CUSTOM PROPERTIES
   ============================================ */
.wpgmza-atlas-major {
  --am-bg: #f5f5f4;
  --am-surface: #ffffff;
  --am-elevated: #ffffff;
  --am-border: #e5e5e4;
  --am-border-subtle: #f0efee;
  --am-text-1: #1a1a19;
  --am-text-2: #5c5c5a;
  --am-text-3: #9c9c99;
  --am-text-inv: #ffffff;
  --am-accent: #e8473f;
  --am-accent-hover: #d43b34;
  --am-accent-soft: #fef2f1;
  --am-accent-border: #fecaca;
  --am-pro: #7c3aed;
  --am-pro-hover: #6d28d9;
  --am-pro-soft: #f5f3ff;
  --am-pro-border: #ddd6fe;
  --am-pro-text: #6d28d9;
  --am-radius: 8px;
  --am-radius-sm: 5px;
  --am-radius-lg: 12px;
  --am-ease: cubic-bezier(0.4, 0, 0.2, 1);

  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: var(--am-text-1);
  -webkit-font-smoothing: antialiased;
}

/* ============================================
   COMPONENT STYLES
   (Previously wrapped in @layer components { } for Tailwind's
   cascade-layer support — that wrapper was removed when Atlas Major
   dropped the Tailwind build step. The rules below are plain CSS now;
   they used no @apply or other Tailwind features in the first place.)
   ============================================ */

  /* ============================================
     SVG ICON SYSTEM
     ============================================ */
  .wpgmza-atlas-major .am-ico {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
  }
  .wpgmza-atlas-major .am-ico-sm { width: 14px; height: 14px; }
  .wpgmza-atlas-major .am-ico-lg { width: 18px; height: 18px; }
  .wpgmza-atlas-major .am-ico-xl { width: 20px; height: 20px; }
  .wpgmza-atlas-major .am-ico-fill { fill: currentColor; stroke: none; }

  /* ============================================
     EDITOR SHELL (am- components)
     ============================================ */
  .wpgmza-atlas-major .am-shell {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 32px);
  }

  /* ============================================
     TOOLBAR (am- components)
     ============================================ */
  .wpgmza-atlas-major .am-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--am-surface);
    border-bottom: 1px solid var(--am-border);
    padding: 0 16px;
    height: 50px;
    flex-shrink: 0;
  }

  .wpgmza-atlas-major .am-toolbar-left,
  .wpgmza-atlas-major .am-toolbar-right {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .wpgmza-atlas-major .am-toolbar-left { gap: 12px; }

  .wpgmza-atlas-major .am-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-right: 14px;
    border-right: 1px solid var(--am-border);
  }
  .wpgmza-atlas-major .am-brand-logo {
    height: auto;
    width: 100px;
    display: block;
  }

  .wpgmza-atlas-major .am-map-name {
    border: 1px solid transparent;
    padding: 5px 10px;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    border-radius: var(--am-radius-sm);
    background: transparent;
    color: var(--am-text-1);
    width: 200px;
    transition: all 0.15s var(--am-ease);
    letter-spacing: -0.01em;
  }
  .wpgmza-atlas-major .am-map-name:hover { background: var(--am-bg); }
  .wpgmza-atlas-major .am-map-name:focus { outline: none; border-color: var(--am-accent); background: white; }

  .wpgmza-atlas-major .am-sc-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--am-bg);
    border: 1px solid var(--am-border);
    padding: 4px 10px;
    border-radius: var(--am-radius-sm);
    cursor: pointer;
    transition: all 0.15s var(--am-ease);
  }
  .wpgmza-atlas-major .am-sc-pill:hover { border-color: var(--am-text-3); }
  .wpgmza-atlas-major .am-sc-pill code,
  .wpgmza-atlas-major .am-sc-pill .am-shortcode-display {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: var(--am-text-2);
  }

  /* Auto-save pill — sits right of the shortcode pill.
     States: idle (hidden), saving (red dot + "Saving…"),
     saved (green dot + "Saved"), error (red bg + message).
     "Saved" persists once shown (Google Docs-style) — JS never
     reverts to idle after a successful save. */
  .wpgmza-atlas-major .am-save-pill {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--am-radius-sm);
    font-size: 11px;
    font-weight: 500;
    border: 1px solid transparent;
    transition: all 0.15s var(--am-ease);
  }
  .wpgmza-atlas-major .am-save-pill[data-state="saving"],
  .wpgmza-atlas-major .am-save-pill[data-state="saved"],
  .wpgmza-atlas-major .am-save-pill[data-state="unsaved"],
  .wpgmza-atlas-major .am-save-pill[data-state="error"] {
    display: inline-flex;
  }
  .wpgmza-atlas-major .am-save-pill-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
  }
  /* Saving — red dot pulsing, lifted text colour */
  .wpgmza-atlas-major .am-save-pill[data-state="saving"] {
    background: var(--am-accent-soft);
    border-color: var(--am-accent-border);
    color: var(--am-accent);
  }
  .wpgmza-atlas-major .am-save-pill[data-state="saving"] .am-save-pill-dot {
    background: var(--am-accent);
    animation: amSavePillPulse 1.2s ease-in-out infinite;
  }
  /* Saved — subtle green, persists */
  .wpgmza-atlas-major .am-save-pill[data-state="saved"] {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #047857;
  }
  .wpgmza-atlas-major .am-save-pill[data-state="saved"] .am-save-pill-dot {
    background: #10b981;
  }
  /* Unsaved — amber. The user has made changes (form input,
     pan/zoom, etc.) that aren't yet persisted. Persists until
     flush() succeeds (which flips the pill to `saved`) or the
     user reverts via the native form. Distinct from `saving`
     (red, in-flight) and `error` (strong red, save failed). */
  .wpgmza-atlas-major .am-save-pill[data-state="unsaved"] {
    background: #fffbeb;
    border-color: #fcd34d;
    color: #92400e;
  }
  .wpgmza-atlas-major .am-save-pill[data-state="unsaved"] .am-save-pill-dot {
    background: #f59e0b;
    animation: amSavePillPulse 1.4s ease-in-out infinite;
  }
  /* Error — strong red, indicates the 3s fallback countdown */
  .wpgmza-atlas-major .am-save-pill[data-state="error"] {
    background: var(--am-accent);
    border-color: var(--am-accent);
    color: #ffffff;
  }
  .wpgmza-atlas-major .am-save-pill[data-state="error"] .am-save-pill-dot {
    background: #ffffff;
  }
  @keyframes amSavePillPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
  }

  /* Autosave pause toggle — sits right of the save pill in the top
     bar. When idle (autosave active) the button is a subtle ghost
     style. When pressed (autosave paused) it switches to an amber
     filled style so it's obvious that automatic saving is OFF —
     manual Save Map still works in either state. */
  .wpgmza-atlas-major .am-autosave-pause-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: var(--am-radius-sm);
    font-size: 11px;
    font-weight: 500;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    border: 1px solid var(--am-border);
    background: var(--am-bg);
    color: var(--am-text-2);
    cursor: pointer;
    line-height: 1.4;
    transition: background 0.15s var(--am-ease), color 0.15s var(--am-ease), border-color 0.15s var(--am-ease);
  }
  .wpgmza-atlas-major .am-autosave-pause-toggle:hover {
    border-color: var(--am-text-3);
    color: var(--am-text-1);
  }
  .wpgmza-atlas-major .am-autosave-pause-toggle:focus-visible {
    outline: 2px solid var(--am-accent);
    outline-offset: 1px;
  }
  /* Icon swap: pause icon shows when autosave is on (click to pause);
     resume icon shows when paused (click to resume). */
  .wpgmza-atlas-major .am-autosave-pause-toggle .am-autosave-resume-ico {
    display: none;
  }
  .wpgmza-atlas-major .am-autosave-pause-toggle.is-paused .am-autosave-pause-ico {
    display: none;
  }
  .wpgmza-atlas-major .am-autosave-pause-toggle.is-paused .am-autosave-resume-ico {
    display: inline-block;
  }
  /* Paused state — amber fill so it's hard to miss that autosave is OFF */
  .wpgmza-atlas-major .am-autosave-pause-toggle.is-paused {
    background: #fef3c7;
    border-color: #fcd34d;
    color: #92400e;
  }
  .wpgmza-atlas-major .am-autosave-pause-toggle.is-paused:hover {
    background: #fde68a;
    border-color: #f59e0b;
    color: #78350f;
  }

  /* ============================================
     BUTTONS (am- components)
     ============================================ */
  .wpgmza-atlas-major .am-btn {
    padding: 6px 14px;
    border-radius: var(--am-radius-sm);
    font-size: 12px;
    font-weight: 600;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.12s var(--am-ease);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    letter-spacing: 0.01em;
    line-height: 1.5;
    text-decoration: none;
  }
  .wpgmza-atlas-major .am-btn:hover,
  .wpgmza-atlas-major .am-btn:focus,
  .wpgmza-atlas-major .am-btn:active {
    text-decoration: none;
  }
  .wpgmza-atlas-major .am-btn-sec {
    background: var(--am-surface);
    color: var(--am-text-2);
    border-color: var(--am-border);
  }
  .wpgmza-atlas-major .am-btn-sec:hover { border-color: var(--am-text-3); color: var(--am-text-1); }
  .wpgmza-atlas-major .am-btn-accent {
    background: var(--am-accent);
    color: white;
    padding: 6px 20px;
  }
  .wpgmza-atlas-major .am-btn-accent:hover { background: var(--am-accent-hover); }
  .wpgmza-atlas-major .am-btn.is-disabled {
    opacity: 0.65;
    cursor: not-allowed;
    pointer-events: none;
  }
  /* Save Map button while a save (autosave OR user-triggered) is in
     flight. We keep the button at its original width (no padding
     change, no min-width reservation) so the action bar layout never
     reflows or wraps. Visual indicators applied:
       - Background flips to dark red (clearly distinct from idle red
         brand colour)
       - Pulsing red glow box-shadow OUTSIDE the button (visible cue
         without affecting layout)
       - Small spinner badge absolutely positioned in the top-right
         corner (does not push content)
     The wpgmza-saving class is added by
     AtlasMajorAutoSave.setSaveButtonState('saving') and removed in
     setSaveButtonState('idle'). Selector covers both save button
     variants (.am-btn top-bar + .wpgmza-button action-bar). */
  .wpgmza-atlas-major .am-btn.wpgmza-saving,
  .wpgmza-atlas-major .wpgmza-button.wpgmza-saving,
  .wpgmza-atlas-major label.wpgmza-saving[for="wpgmza_savemap"] {
    background: #8a2620 !important;
    color: #fff !important;
    cursor: wait !important;
    pointer-events: none;
    opacity: 1;
    position: relative;
    overflow: visible;
    box-shadow: 0 0 0 0 rgba(232, 71, 63, 0.6);
    animation: am-save-pulse 1.4s ease-in-out infinite;
  }
  /* Spinner badge — sits OUTSIDE the button (top-right) so it doesn't
     affect button width. Small, white-on-red, with rotating border. */
  .wpgmza-atlas-major .am-btn.wpgmza-saving::after,
  .wpgmza-atlas-major .wpgmza-button.wpgmza-saving::after,
  .wpgmza-atlas-major label.wpgmza-saving[for="wpgmza_savemap"]::after {
    content: "";
    position: absolute;
    top: -6px;
    right: -6px;
    width: 14px;
    height: 14px;
    background: #8a2620;
    border: 2px solid #fff;
    border-top-color: rgba(255,255,255,0.3);
    border-radius: 50%;
    animation: am-save-spin 0.7s linear infinite;
    box-sizing: border-box;
  }
  @keyframes am-save-spin {
    to { transform: rotate(360deg); }
  }
  @keyframes am-save-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(232, 71, 63, 0.55); }
    70%  { box-shadow: 0 0 0 8px rgba(232, 71, 63, 0);    }
    100% { box-shadow: 0 0 0 0   rgba(232, 71, 63, 0);    }
  }
  .wpgmza-atlas-major .am-btn-dark {
    background: var(--am-text-1);
    color: white;
  }
  .wpgmza-atlas-major .am-btn-dark:hover { background: #333; }
  .wpgmza-atlas-major .am-btn-pro {
    background: var(--am-pro);
    color: white;
    border: none;
    padding: 7px 14px;
    border-radius: var(--am-radius-sm);
    font-size: 12px;
    font-weight: 600;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    cursor: pointer;
    transition: all 0.12s var(--am-ease);
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  .wpgmza-atlas-major .am-btn-pro:hover { background: var(--am-pro-hover); transform: translateY(-1px); }
  .wpgmza-atlas-major .am-btn-ghost {
    background: transparent;
    color: var(--am-text-2);
    border: 1px solid var(--am-border);
    padding: 6px 14px;
    border-radius: var(--am-radius-sm);
    font-size: 12px;
    font-weight: 500;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    cursor: pointer;
    transition: all 0.12s var(--am-ease);
  }
  .wpgmza-atlas-major .am-btn-ghost:hover { border-color: var(--am-text-1); color: var(--am-text-1); }
  .wpgmza-atlas-major .am-btn-white {
    background: white;
    color: var(--am-pro);
    border: none;
    padding: 10px 28px;
    border-radius: var(--am-radius);
    font-size: 14px;
    font-weight: 700;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    cursor: pointer;
    transition: all 0.12s var(--am-ease);
  }
  .wpgmza-atlas-major .am-btn-white:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }

  /* ============================================
     TAB BAR (am- components)
     ============================================ */
  .wpgmza-atlas-major .am-tabs {
    display: flex;
    align-items: stretch;
    background: var(--am-surface);
    border-bottom: 1px solid var(--am-border);
    padding: 0 16px;
    flex-shrink: 0;
  }

  .wpgmza-atlas-major .am-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 16px;
    height: 42px;
    font-size: 13px;
    font-weight: 500;
    color: var(--am-text-3);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: all 0.12s var(--am-ease);
    letter-spacing: 0.01em;
    white-space: nowrap;
  }
  .wpgmza-atlas-major .am-tab:hover { color: var(--am-text-2); }
  .wpgmza-atlas-major .am-tab.on {
    color: var(--am-text-1);
    border-bottom-color: var(--am-accent);
    font-weight: 600;
  }

  .wpgmza-atlas-major .am-tab-count {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    font-weight: 500;
    background: var(--am-bg);
    color: var(--am-text-2);
    padding: 1px 6px;
    border-radius: 3px;
    line-height: 1.4;
  }
  .wpgmza-atlas-major .am-tab.on .am-tab-count { background: var(--am-accent-soft); color: var(--am-accent); }

  .wpgmza-atlas-major .am-tab-pro {
    font-size: 9px;
    font-weight: 700;
    color: var(--am-pro-text);
    background: var(--am-pro-soft);
    border: 1px solid var(--am-pro-border);
    padding: 0 5px;
    border-radius: 3px;
    letter-spacing: 0.04em;
    line-height: 16px;
  }

  .wpgmza-atlas-major .am-tab-fill { flex: 1; }

  .wpgmza-atlas-major .am-tab.am-tab-upgrade {
    color: var(--am-pro-text);
    font-weight: 600;
  }
  .wpgmza-atlas-major .am-tab.am-tab-upgrade:hover { color: var(--am-pro-hover); }

  /* ============================================
     MAIN AREA (am- components)
     ============================================ */
  .wpgmza-atlas-major .am-main {
    display: flex;
    flex: 1;
    overflow: hidden;
  }

  /* ============================================
     PANEL (am- components)
     ============================================ */
  .wpgmza-atlas-major .am-panel {
    width: 380px;
    min-width: 380px;
    background: var(--am-surface);
    border-right: 1px solid var(--am-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .wpgmza-atlas-major .am-panel-scroll {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 30px;
  }
  .wpgmza-atlas-major .am-panel-scroll::-webkit-scrollbar { width: 5px; }
  .wpgmza-atlas-major .am-panel-scroll::-webkit-scrollbar-track { background: transparent; }
  .wpgmza-atlas-major .am-panel-scroll::-webkit-scrollbar-thumb { background: #ddd; border-radius: 3px; }
  .wpgmza-atlas-major .am-panel-scroll::-webkit-scrollbar-thumb:hover { background: #ccc; }

  .wpgmza-atlas-major .am-ph {
    padding: 16px 20px 12px;
    flex-shrink: 0;
  }
  .wpgmza-atlas-major .am-ph-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--am-text-3);
  }

  /* ============================================
     SEARCH INPUT (am- components)
     ============================================ */
  .wpgmza-atlas-major .am-search-wrap {
    padding: 0 20px 14px;
    flex-shrink: 0;
  }
  .wpgmza-atlas-major .am-search-field {
    position: relative;
  }
  .wpgmza-atlas-major .am-search-field input {
    width: 100%;
    padding: 8px 12px 8px 34px;
    border: 1px solid var(--am-border);
    border-radius: var(--am-radius);
    font-size: 13px;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    background: var(--am-bg);
    color: var(--am-text-1);
    transition: all 0.12s var(--am-ease);
  }
  .wpgmza-atlas-major .am-search-field input:focus { outline: none; border-color: var(--am-text-1); background: white; }
  .wpgmza-atlas-major .am-search-field input::placeholder { color: var(--am-text-3); }
  .wpgmza-atlas-major .am-search-field .am-ico {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--am-text-3);
    pointer-events: none;
  }

  /* ============================================
     ACCORDION (am- components)
     ============================================ */
  .wpgmza-atlas-major .am-acc { border-bottom: 1px solid var(--am-border-subtle); }
  .wpgmza-atlas-major .am-acc:last-child { border-bottom: none; }

  .wpgmza-atlas-major .am-acc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    cursor: pointer;
    transition: background 0.1s;
    user-select: none;
  }
  .wpgmza-atlas-major .am-acc-head:hover { background: var(--am-bg); }

  .wpgmza-atlas-major .am-acc-left {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .wpgmza-atlas-major .am-acc-left .am-ico { color: var(--am-text-3); }

  .wpgmza-atlas-major .am-acc-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--am-text-1);
  }

  .wpgmza-atlas-major .am-acc-arrow {
    color: var(--am-text-3);
    transition: transform 0.2s var(--am-ease);
  }
  .wpgmza-atlas-major .am-acc.open .am-acc-arrow { transform: rotate(90deg); }

  .wpgmza-atlas-major .am-acc-body {
    padding: 0 20px 16px;
    display: none;
  }
  .wpgmza-atlas-major .am-acc.open .am-acc-body { display: block; }

  /* ============================================
     FORM ELEMENTS (am- components)
     ============================================ */
  .wpgmza-atlas-major .am-fg { margin-bottom: 14px; }
  .wpgmza-atlas-major .am-fg:last-child { margin-bottom: 0; }

  .wpgmza-atlas-major .am-fl {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    color: var(--am-text-2);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  .wpgmza-atlas-major .am-fi,
  .wpgmza-atlas-major .am-fs {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--am-border);
    border-radius: var(--am-radius-sm);
    font-size: 13px;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    color: var(--am-text-1);
    background: white;
    transition: border-color 0.12s var(--am-ease);
    -webkit-appearance: none;
  }
  .wpgmza-atlas-major .am-fi:focus,
  .wpgmza-atlas-major .am-fs:focus { outline: none; border-color: var(--am-text-1); }

  .wpgmza-atlas-major .am-fr { display: flex; gap: 8px; }
  .wpgmza-atlas-major .am-fr > * { flex: 1; }

  .wpgmza-atlas-major .am-fhint {
    font-size: 11px;
    color: var(--am-text-3);
    margin-top: 3px;
  }

  /* Switch row */
  .wpgmza-atlas-major .am-sw {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 0;
    border-bottom: 1px solid var(--am-border-subtle);
  }
  .wpgmza-atlas-major .am-sw:last-child { border-bottom: none; }
  .wpgmza-atlas-major .am-sw-text { font-size: 13px; color: var(--am-text-1); }

  .wpgmza-atlas-major .am-sw-toggle {
    width: 34px;
    height: 18px;
    background: var(--am-border);
    border-radius: 9px;
    position: relative;
    cursor: pointer;
    transition: background 0.15s var(--am-ease);
    flex-shrink: 0;
  }
  .wpgmza-atlas-major .am-sw-toggle.on { background: var(--am-text-1); }
  .wpgmza-atlas-major .am-sw-toggle::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    background: white;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: transform 0.15s var(--am-ease);
    box-shadow: 0 1px 2px rgba(0,0,0,0.12);
  }
  .wpgmza-atlas-major .am-sw-toggle.on::after { transform: translateX(16px); }

  /* Chip selector */
  .wpgmza-atlas-major .am-chips { display: flex; gap: 3px; }
  .wpgmza-atlas-major .am-chip {
    flex: 1;
    padding: 7px 4px;
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    color: var(--am-text-2);
    border: 1px solid var(--am-border);
    border-radius: var(--am-radius-sm);
    cursor: pointer;
    transition: all 0.12s var(--am-ease);
    background: white;
  }
  .wpgmza-atlas-major .am-chip:hover { border-color: var(--am-text-3); }
  .wpgmza-atlas-major .am-chip.on { border-color: var(--am-text-1); background: var(--am-text-1); color: white; }

  /* Range */
  .wpgmza-atlas-major .am-rng {
    width: 100%;
    -webkit-appearance: none;
    height: 3px;
    border-radius: 2px;
    background: var(--am-border);
    outline: none;
    margin: 6px 0 2px;
  }
  .wpgmza-atlas-major .am-rng::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--am-text-1);
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 0 0 1px var(--am-border), 0 1px 3px rgba(0,0,0,0.1);
  }
  .wpgmza-atlas-major .am-rng-val {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: var(--am-text-3);
    text-align: right;
  }

  /* ============================================
     PRO LOCK / UPSELL (am- components)
     ============================================ */
  .wpgmza-atlas-major .am-locked .am-fi,
  .wpgmza-atlas-major .am-locked .am-fs,
  .wpgmza-atlas-major .am-locked textarea {
    opacity: 0.35;
    pointer-events: none;
    background: var(--am-bg);
  }
  .wpgmza-atlas-major .am-pro-pill {
    font-size: 9px;
    font-weight: 700;
    color: var(--am-pro-text);
    background: var(--am-pro-soft);
    border: 1px solid var(--am-pro-border);
    padding: 0 5px;
    border-radius: 3px;
    letter-spacing: 0.04em;
    line-height: 16px;
    text-transform: uppercase;
  }

  .wpgmza-atlas-major .am-upsell {
    background: var(--am-pro-soft);
    border: 1px solid var(--am-pro-border);
    border-radius: var(--am-radius);
    padding: 14px 16px;
    margin: 14px 0 2px;
  }
  .wpgmza-atlas-major .am-upsell-h {
    font-size: 13px;
    font-weight: 700;
    color: var(--am-pro-text);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .wpgmza-atlas-major .am-upsell-p {
    font-size: 12px;
    color: #7c3aed;
    opacity: 0.75;
    line-height: 1.55;
    margin-bottom: 10px;
  }

  /* Dark upsell strip */
  .wpgmza-atlas-major .am-upsell-strip {
    background: var(--am-text-1);
    padding: 12px 14px;
    border-radius: var(--am-radius);
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 0;
  }
  .wpgmza-atlas-major .am-upsell-strip-body {
    flex: 1;
    font-size: 12px;
    color: rgba(255,255,255,0.65);
    line-height: 1.5;
  }
  .wpgmza-atlas-major .am-upsell-strip-body strong { color: white; }

  /* ============================================
     MAP CANVAS (am- components)
     ============================================ */
  .wpgmza-atlas-major .am-canvas {
    flex: 1;
    position: relative;
    overflow: hidden;
  }

  /* ============================================
     MARKER LIST (am- components)
     ============================================ */
  .wpgmza-atlas-major .am-ml-bar {
    padding: 14px 20px 12px;
    flex-shrink: 0;
    position: relative;
  }
  .wpgmza-atlas-major .am-ml-row {
    display: flex;
    gap: 6px;
  }
  .wpgmza-atlas-major .am-ml-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--am-border);
    border-radius: var(--am-radius);
    font-size: 13px;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    background: white;
    transition: border-color 0.12s var(--am-ease);
  }
  .wpgmza-atlas-major .am-ml-input:focus { outline: none; border-color: var(--am-text-1); }
  .wpgmza-atlas-major .am-ml-input::placeholder { color: var(--am-text-3); }

  .wpgmza-atlas-major .am-ml-stats {
    display: flex;
    padding: 0;
    border-bottom: 1px solid var(--am-border);
    background: var(--am-bg);
    flex-shrink: 0;
  }
  .wpgmza-atlas-major .am-ml-stat {
    flex: 1;
    padding: 8px 12px;
    text-align: center;
    border-right: 1px solid var(--am-border);
  }
  .wpgmza-atlas-major .am-ml-stat:last-child { border-right: none; }
  .wpgmza-atlas-major .am-ml-stat-val {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 15px;
    font-weight: 700;
    color: var(--am-text-1);
  }
  .wpgmza-atlas-major .am-ml-stat-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--am-text-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  /* Marker list items */
  .wpgmza-atlas-major .am-mi {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 10px 20px;
    cursor: pointer;
    transition: all 0.1s;
    border-left: 2px solid transparent;
    border-bottom: 1px solid var(--am-border-subtle);
  }
  .wpgmza-atlas-major .am-mi:last-child { border-bottom: none; }
  .wpgmza-atlas-major .am-mi:hover { background: var(--am-bg); }

  .wpgmza-atlas-major .am-mi-body { flex: 1; min-width: 0; }
  .wpgmza-atlas-major .am-mi-name {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.01em;
  }
  .wpgmza-atlas-major .am-mi-addr {
    font-size: 11px;
    color: var(--am-text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* .am-mi-ops sizing/positioning — the kebab inside controls its
     own opacity (was previously on the container, which compounded
     with child opacity and broke the always-visible attention-dot
     kebab on needs-approval rows). The fuller styles are in
     section 2199 of this file. */
  .wpgmza-atlas-major .am-mi-ops {
    display: flex;
    gap: 2px;
  }

  .wpgmza-atlas-major .am-mi-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--am-text-3);
    transition: all 0.1s;
  }
  .wpgmza-atlas-major .am-mi-btn:hover { background: var(--am-border); color: var(--am-text-1); }

  /* ============================================
     TAB PANEL SWITCHING (am- components)
     ============================================ */
  .wpgmza-atlas-major .am-tp { display: none; flex-direction: column; height: 100%; }
  .wpgmza-atlas-major .am-tp.on { display: flex; }

  /* Sub navigation pills */
  .wpgmza-atlas-major .am-subnav {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--am-border);
    padding: 0 20px;
    flex-shrink: 0;
  }
  .wpgmza-atlas-major .am-subnav-item {
    padding: 9px 14px;
    font-size: 12px;
    font-weight: 500;
    color: var(--am-text-3);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: all 0.12s var(--am-ease);
  }
  .wpgmza-atlas-major .am-subnav-item:hover { color: var(--am-text-2); }
  .wpgmza-atlas-major .am-subnav-item.on { color: var(--am-text-1); border-bottom-color: var(--am-text-1); font-weight: 600; }

  /* ============================================
     EMPTY STATES (am- components)
     ============================================ */
  .wpgmza-atlas-major .am-empty {
    padding: 20px 0;
    text-align: center;
  }
  .wpgmza-atlas-major .am-empty-text {
    font-size: 12px;
    color: var(--am-text-3);
    margin-bottom: 10px;
  }

  /* Pro-gated empty state */
  .wpgmza-atlas-major .am-dir-empty {
    padding: 40px 24px;
    text-align: center;
  }
  .wpgmza-atlas-major .am-dir-icon-wrap {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--am-pro-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    color: var(--am-pro);
  }
  .wpgmza-atlas-major .am-dir-empty h3 { font-size: 15px; font-weight: 700; margin-bottom: 6px; letter-spacing: -0.01em; }
  .wpgmza-atlas-major .am-dir-empty p { font-size: 13px; color: var(--am-text-3); margin-bottom: 16px; line-height: 1.6; }

  /* ============================================
     UPGRADE PANEL (am- components)
     ============================================ */
  .wpgmza-atlas-major .am-up-hero {
    background: linear-gradient(135deg, var(--am-pro) 0%, #9333ea 100%);
    margin: 16px 20px;
    padding: 28px 24px;
    border-radius: var(--am-radius-lg);
    text-align: center;
    color: white;
  }
  .wpgmza-atlas-major .am-up-hero h2 { font-size: 20px; font-weight: 800; margin-bottom: 6px; letter-spacing: -0.02em; color: white; }
  .wpgmza-atlas-major .am-up-hero p { font-size: 13px; opacity: 0.8; margin-bottom: 16px; }

  .wpgmza-atlas-major .am-up-list { padding: 8px 20px 20px; }
  .wpgmza-atlas-major .am-up-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--am-border-subtle);
  }
  .wpgmza-atlas-major .am-up-item:last-child { border-bottom: none; }
  .wpgmza-atlas-major .am-up-ico {
    width: 32px;
    height: 32px;
    border-radius: var(--am-radius-sm);
    background: var(--am-pro-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--am-pro);
    flex-shrink: 0;
  }
  .wpgmza-atlas-major .am-up-name { font-size: 13px; font-weight: 600; letter-spacing: -0.01em; }
  .wpgmza-atlas-major .am-up-desc { font-size: 12px; color: var(--am-text-3); }

  /* Upgrade footer links */
  .wpgmza-atlas-major .am-up-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px 20px 40px;
    font-size: 12px;
  }
  .wpgmza-atlas-major .am-up-footer a {
    color: var(--am-text-2);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.12s var(--am-ease);
  }
  .wpgmza-atlas-major .am-up-footer a:hover {
    color: var(--am-text-1);
  }
  .wpgmza-atlas-major .am-up-footer-sep {
    width: 1px;
    height: 14px;
    background: var(--am-border);
  }

  /* [Showcase card styles are outside @layer — see bottom of file] */

  /* White button on purple hero */
  .wpgmza-atlas-major .am-btn-white {
    background: white;
    color: var(--am-pro);
    border: none;
    padding: 10px 28px;
    border-radius: var(--am-radius);
    font-size: 14px;
    font-weight: 700;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    cursor: pointer;
    transition: all 0.12s var(--am-ease);
    text-decoration: none;
    display: inline-block;
  }
  .wpgmza-atlas-major .am-btn-white:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  }

  /* ============================================
     THEME GRID (am- components)
     ============================================ */
  .wpgmza-atlas-major .am-tg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .wpgmza-atlas-major .am-tc {
    border: 2px solid var(--am-border);
    border-radius: var(--am-radius-sm);
    overflow: hidden;
    cursor: pointer;
    transition: all 0.12s var(--am-ease);
  }
  .wpgmza-atlas-major .am-tc:hover { border-color: var(--am-text-3); }
  .wpgmza-atlas-major .am-tc.on { border-color: var(--am-text-1); }
  .wpgmza-atlas-major .am-tc-swatch { height: 36px; }
  .wpgmza-atlas-major .am-tc-name {
    padding: 4px;
    font-size: 10px;
    font-weight: 600;
    text-align: center;
    color: var(--am-text-2);
    letter-spacing: 0.02em;
  }

  /* ============================================
     VIEW TRANSITIONS (am- components)
     ============================================ */
  .wpgmza-atlas-major .am-mk-view { display: none; flex-direction: column; height: 100%; }
  .wpgmza-atlas-major .am-mk-view.on { display: flex; }

  @keyframes amSlideRight {
    from { opacity: 0; transform: translateX(-10px); }
    to { opacity: 1; transform: translateX(0); }
  }
  @keyframes amSlideLeft {
    from { opacity: 0; transform: translateX(10px); }
    to { opacity: 1; transform: translateX(0); }
  }
  @keyframes amPanelIn {
    from { opacity: 0; transform: translateX(-6px); }
    to { opacity: 1; transform: translateX(0); }
  }

  .wpgmza-atlas-major .am-mk-view.on.anim-forward { animation: amSlideLeft 0.18s var(--am-ease); }
  .wpgmza-atlas-major .am-mk-view.on.anim-back { animation: amSlideRight 0.18s var(--am-ease); }
  .wpgmza-atlas-major .am-tp.on .am-panel { animation: amPanelIn 0.18s var(--am-ease); }

  /* Editor back nav */
  .wpgmza-atlas-major .am-ed-back {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--am-border);
    cursor: pointer;
    transition: background 0.1s;
    flex-shrink: 0;
    user-select: none;
  }
  .wpgmza-atlas-major .am-ed-back:hover { background: var(--am-bg); }
  .wpgmza-atlas-major .am-ed-back .am-ico { color: var(--am-text-3); }
  .wpgmza-atlas-major .am-ed-back-text {
    font-size: 12px;
    font-weight: 500;
    color: var(--am-text-2);
  }

  .wpgmza-atlas-major .am-ed-header {
    padding: 16px 20px 0;
    flex-shrink: 0;
  }
  .wpgmza-atlas-major .am-ed-marker-name {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--am-text-1);
    margin-bottom: 2px;
  }
  .wpgmza-atlas-major .am-ed-marker-addr {
    font-size: 12px;
    color: var(--am-text-3);
    margin-bottom: 16px;
  }

  .wpgmza-atlas-major .am-ed-form {
    padding: 0 20px 20px;
  }


  /* ============================================================
     ============================================================
     ATLAS NOVUS OVERRIDE LAYER
     All rules below restyle existing Atlas Novus components
     when inside .wpgmza-atlas-major
     ============================================================
     ============================================================ */

  /* ==========================================================
     1. EDITOR SHELL & LAYOUT
     ========================================================== */

  /* Full-bleed: remove WP admin margins */
  .wpgmza-atlas-major.wpgmza-wrap.fullscreen {
    margin: 0;
    margin-left: -20px;
    margin-bottom: -65px;
    overflow: hidden;
    position: initial;
    background: var(--am-bg);
  }

  /* Editor flex container — column (toolbar + tabs + main) instead of row */
  .wpgmza-atlas-major .wpgmza-editor {
    width: 100%;
    height: calc(100vh - 32px);
    display: flex;
    flex-direction: column;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    background: var(--am-bg);
  }

  .wpgmza-atlas-major .wpgmza-editor .sidebar,
  .wpgmza-atlas-major .wpgmza-editor .content {
    height: 100%;
    position: relative;
  }


  /* ==========================================================
     2. SIDEBAR / PANEL
     ========================================================== */
  .wpgmza-atlas-major .wpgmza-editor .sidebar {
    flex: none;
    width: 380px;
    max-width: 380px;
    min-width: 380px;
    background: var(--am-surface);
    border-right: 1px solid var(--am-border);
    z-index: 2;
    box-shadow: none;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .wpgmza-atlas-major .wpgmza-editor .sidebar.expanded {
    flex: none;
    width: 380px;
    max-width: 380px;
    min-width: 380px;
  }

  .wpgmza-atlas-major .wpgmza-editor .sidebar form {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
  }

  /* Remove the Atlas Novus grey spacer bar */
  .wpgmza-atlas-major .wpgmza-editor .sidebar .spacer {
    display: none;
  }

  /* Grouping — hidden by default, shown with .open */
  .wpgmza-atlas-major .wpgmza-editor .sidebar .grouping {
    display: none;
    overflow: hidden;
    height: 100%;
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .grouping.open {
    display: flex;
    flex-direction: column;
    padding-bottom:50px;
  }

  .wpgmza-atlas-major .wpgmza-editor .sidebar .block {
    padding: 16px 20px;
  }

  /* Navigation list */
  .wpgmza-atlas-major .wpgmza-editor .sidebar .navigation {
    max-height: calc(100% - 120px);
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .navigation::-webkit-scrollbar { width: 5px; }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .navigation::-webkit-scrollbar-track { background: transparent; }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .navigation::-webkit-scrollbar-thumb { background: #ddd; border-radius: 3px; }

  .wpgmza-atlas-major .wpgmza-editor .sidebar .navigation .item {
    padding: 11px 20px;
    border-bottom: 1px solid var(--am-border-subtle);
    transition: background 0.12s var(--am-ease);
    font-size: 13px;
    font-weight: 500;
    color: var(--am-text-1);
    cursor: pointer;
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .navigation .item:hover {
    background: var(--am-bg);
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .navigation .item .dashicons {
    margin-right: 6px;
    opacity: 0.4;
    color: var(--am-text-2);
    font-size: 16px;
    position: relative;
    top: 2px;
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .navigation .item .nav-item-icon {
    margin-right: 6px;
    width: 18px;
    height: 18px;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    position: relative;
    top: -1px;
    opacity: 0.45;
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .navigation .item .nav-item-icon img {
    max-width: 16px;
    max-height: 16px;
  }

  /* Active / focus nav item */
  .wpgmza-atlas-major .wpgmza-editor .sidebar .item.item-focus {
    background: var(--am-accent-soft);
    font-weight: 600;
    color: var(--am-accent);
    border-color: var(--am-accent-border);
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .item.item-focus .dashicons {
    color: var(--am-accent);
    opacity: 0.8;
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .item.item-focus:hover {
    background: var(--am-accent-border);
  }

  /* Pro upsell nav items — purple gradient */
  .wpgmza-atlas-major .wpgmza-editor .sidebar .navigation .item.pro {
    background: linear-gradient(135deg, var(--am-pro) 0%, #9333ea 100%);
    color: var(--am-text-inv);
    font-weight: 600;
    border-radius: var(--am-radius-sm);
    margin: 4px 12px;
    border-bottom: none;
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .navigation .item.pro:hover {
    background: linear-gradient(135deg, var(--am-pro-hover) 0%, #7e22ce 100%);
  }
  /* Pro nav item dashicon — force white + full opacity so the unlock icon
     reads cleanly on the purple gradient. Overrides the generic
     `.item .dashicons` grey/0.4-opacity rule above. */
  .wpgmza-atlas-major .wpgmza-editor .sidebar .navigation .item.pro .dashicons {
    color: #ffffff;
    opacity: 1;
  }

  /* Heading bar */
  .wpgmza-atlas-major .wpgmza-editor .sidebar .heading {
    font-weight: 600;
    font-size: 13px;
    max-height: 54px;
    border-bottom: 1px solid var(--am-border);
    background: var(--am-surface);
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }

  .wpgmza-atlas-major .wpgmza-editor .sidebar .heading.has-back {
    position: relative;
    padding-left: 54px;
  }

  .wpgmza-atlas-major .wpgmza-editor .sidebar .heading.has-back .item.caret-left {
    position: absolute;
    width: 44px;
    top: 0;
    bottom: 0;
    left: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.12s var(--am-ease);
    border-right: 1px solid var(--am-border-subtle);
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .heading.has-back .item.caret-left:hover {
    background: var(--am-bg);
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .heading.has-back .item.caret-left:after {
    left: 18px;
    border-color: var(--am-text-3);
    border-width: 1.5px;
    width: 7px;
    height: 7px;
  }

  /* Slide-in animation override */
  .wpgmza-atlas-major .wpgmza-editor .sidebar .grouping .navigation .item,
  .wpgmza-atlas-major .wpgmza-editor .sidebar .grouping .settings,
  .wpgmza-atlas-major .wpgmza-editor .sidebar .grouping .feature-list,
  .wpgmza-atlas-major .wpgmza-editor .sidebar .grouping .upsell-block {
    animation: amSlideLeft 0.2s var(--am-ease) forwards;
  }


  /* ==========================================================
     3. FORM ELEMENTS (inside .sidebar .settings)
     ========================================================== */

  /* Settings container */
  .wpgmza-atlas-major .wpgmza-editor .sidebar .settings {
    padding: 0 20px;
    position: relative;
    /*max-height: calc(100% - 78px);*/
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 20px;
    scrollbar-width: thin;
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .settings::-webkit-scrollbar { width: 5px; }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .settings::-webkit-scrollbar-track { background: transparent; }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .settings::-webkit-scrollbar-thumb { background: #ddd; border-radius: 3px; }

  /* Fieldset */
  .wpgmza-atlas-major .wpgmza-editor .sidebar .settings fieldset {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-top: 16px;
    border: none;
    padding: 0;
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .settings fieldset.wpgmza-joined-fieldset {
    margin-top: 0;
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .settings fieldset:last-child {
    margin-bottom: 16px;
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .settings fieldset > * {
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .settings fieldset > .wpgmza-row {
    display: flex !important;
  }

  /* Shortcode sub-tab fieldsets render with this structure at
     runtime (a `<div class="wpgmza-flex">` wrapper gets inserted
     between the fieldset and its column children):
       <fieldset class="wpgmza-row align-center">
         <div class="wpgmza-flex">
           <div class="wpgmza-col-3">Label</div>
           <div class="wpgmza-col wpgmza-text-align-right">
             <button class="wpgmza-shortcode-button">[shortcode]</button>
           </div>
         </div>
       </fieldset>
     `.wpgmza-flex` has no CSS rule of its own (despite the name)
     so it renders as a regular block div and the two columns stack
     vertically. Force it to be a flex row inside the shortcode
     grouping so the label sits on the left and the shortcode button
     on the right. */
  .wpgmza-atlas-major .wpgmza-editor .sidebar .grouping[data-group="map-settings-shortcodes"] .settings fieldset > .wpgmza-flex {
    /* `!important` defeats the broad
       `.sidebar .settings fieldset > * { display: block }` rule
       at line ~1383 — without it, the catch-all rule wins on
       some browsers/cache states even though our selector is
       more specific. */
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    width: 100%;
    gap: 8px;
  }

  .wpgmza-atlas-major .wpgmza-row-stretch {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
  }

  /* Legend — uppercase, small, semibold, muted */
  .wpgmza-atlas-major .wpgmza-editor .sidebar .settings fieldset legend {
    font-size: 11px;
    font-weight: 600;
    color: var(--am-text-2);
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  }

  /* Text, number inputs, selects, textareas */
  .wpgmza-atlas-major .wpgmza-editor .sidebar .settings input[type="text"],
  .wpgmza-atlas-major .wpgmza-editor .sidebar .settings input[type="number"],
  .wpgmza-atlas-major .wpgmza-editor .sidebar .settings input[type="url"],
  .wpgmza-atlas-major .wpgmza-editor .sidebar .settings input[type="email"],
  .wpgmza-atlas-major .wpgmza-editor .sidebar .settings select,
  .wpgmza-atlas-major .wpgmza-editor .sidebar .settings textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--am-border);
    border-radius: var(--am-radius-sm);
    font-size: 13px;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    color: var(--am-text-1);
    background: white;
    transition: border-color 0.12s var(--am-ease);
    -webkit-appearance: none;
    line-height: 1.5;
    box-sizing: border-box;
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .settings input[type="text"]:focus,
  .wpgmza-atlas-major .wpgmza-editor .sidebar .settings input[type="number"]:focus,
  .wpgmza-atlas-major .wpgmza-editor .sidebar .settings input[type="url"]:focus,
  .wpgmza-atlas-major .wpgmza-editor .sidebar .settings input[type="email"]:focus,
  .wpgmza-atlas-major .wpgmza-editor .sidebar .settings select:focus,
  .wpgmza-atlas-major .wpgmza-editor .sidebar .settings textarea:focus {
    outline: none;
    border-color: var(--am-text-1);
    box-shadow: none;
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .settings input::placeholder,
  .wpgmza-atlas-major .wpgmza-editor .sidebar .settings textarea::placeholder {
    color: var(--am-text-3);
  }

  /* Select dropdown arrow */
  .wpgmza-atlas-major .wpgmza-editor .sidebar .settings select {
    padding-right: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239c9c99' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
  }

  /* Atlas Major <select> chevron restoration — applies to every
     `<select>` under .wpgmza-atlas-major as a baseline.
     Why: WordPress admin's forms.css already strips the native
     OS dropdown arrow via `appearance: none` and supplies its
     own chevron via a `background-image` longhand. Several
     Atlas Major surfaces (notably `.wpgmza-tabs-container select`
     in the global settings page, `.wpgmza-generic-modal > select`,
     theme editor selects, import/export tool selects, tileserver
     preview select, etc.) override the look using the
     `background:` shorthand to set a white fill. CSS shorthand
     resets every background-* longhand, so the WP chevron image
     gets wiped out alongside the colour change, leaving the
     control looking like a plain button — non-obvious it's a
     dropdown.
     This rule restores a consistent Atlas Major chevron for
     every select. `!important` on the image-related longhands
     ensures any later `background:` shorthand can't wipe them
     again — `padding-right` is left non-important so narrow
     custom selects (e.g. inline dt-input variants with their
     own tight padding) can still override. The SVG matches the
     editor-sidebar chevron above for visual consistency. */
  .wpgmza-atlas-major select {
    /* NB: padding-right is `!important` because the more specific
       `.wpgmza-atlas-major.wpgmza-tabs-container select` rule at
       ~L6075 sets `padding: 8px 12px` shorthand (specificity 0,2,1
       beats this baseline's 0,1,1), squashing the text right up
       against the chevron on long options like "Atlas Major
       (Beta)" / "Add address provider…". The image-related
       longhands are already `!important` to survive the same rule
       chain — padding-right matches that pattern.
       `appearance: none` + vendor prefixes are required so the
       browser's NATIVE dropdown arrow doesn't render alongside
       this custom chevron — without it both render and you get a
       visible "two carets" stacking, most obvious on the Store
       Locator radius dropdown but technically affecting every
       select in Atlas Major. */
    padding-right: 36px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239c9c99' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
  }

  /* Textarea */
  .wpgmza-atlas-major .wpgmza-editor .sidebar .settings textarea {
    min-height: 80px;
    resize: vertical;
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar textarea[name="wpgmza_theme_data"] {
    min-height: 20vh;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
  }

  /* Color input */
  .wpgmza-atlas-major .wpgmza-editor .sidebar .settings input[type="color"] {
    min-height: 32px;
    width: 38px;
    padding: 2px;
    border: 1px solid var(--am-border);
    border-radius: var(--am-radius-sm);
    cursor: pointer;
    background: white;
  }

  /* Radio buttons */
  .wpgmza-atlas-major .wpgmza-editor .sidebar .settings input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: var(--am-text-1);
    margin-right: 6px;
  }

  /* Checkbox styling (non-toggle) */
  .wpgmza-atlas-major .wpgmza-editor .sidebar .settings input[type="checkbox"]:not(.cmn-toggle-yes-no):not(.cmn-toggle-round-flat) {
    width: 16px;
    height: 16px;
    accent-color: var(--am-text-1);
    margin-right: 6px;
    border-radius: 3px;
  }

  /* Multi-field inline row (e.g. width + unit selector) */
  .wpgmza-atlas-major .wpgmza-editor .sidebar .settings fieldset .multi-field {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .settings fieldset .multi-field > input {
    flex: 1;
    min-width: 0;
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .settings fieldset .multi-field > select {
    flex: 0 0 auto;
    width: auto;
    min-width: 60px;
  }

  /* Inline dropdown (e.g. select + "km" text) */
  .wpgmza-atlas-major .wpgmza-editor .sidebar .settings .wpgmza-inline-dropdown {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .settings .wpgmza-inline-dropdown select,
  .wpgmza-atlas-major .wpgmza-editor .sidebar .settings .wpgmza-inline-dropdown input {
    flex: 1;
    min-width: 0;
  }

  /* Inline field (e.g. input + button side by side) */
  .wpgmza-atlas-major .wpgmza-editor .sidebar .settings .wpgmza-inline-field {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .settings .wpgmza-inline-field > input,
  .wpgmza-atlas-major .wpgmza-editor .sidebar .settings .wpgmza-inline-field > select {
    flex: 1;
    min-width: 0;
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .settings .wpgmza-inline-field > .wpgmza-button,
  .wpgmza-atlas-major .wpgmza-editor .sidebar .settings .wpgmza-inline-field > button {
    flex-shrink: 0;
  }

  /* Hint text */
  .wpgmza-atlas-major .wpgmza-editor .sidebar .settings .hint {
    font-size: 11px;
    margin-top: 4px;
    color: var(--am-text-3);
    line-height: 1.45;
  }

  /* Fieldset list items */
  .wpgmza-atlas-major .wpgmza-editor .sidebar .settings fieldset ul li {
    padding-left: 0;
    margin-bottom: 6px;
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .settings fieldset ul li label {
    font-size: 13px;
    color: var(--am-text-1);
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .settings fieldset ul li .hint {
    padding-left: 0;
    margin-left: 22px;
  }

  /* UI Slider (jQuery UI range slider) */
  .wpgmza-atlas-major .wpgmza-editor .sidebar .settings .ui-slider {
    position: relative;
    height: 3px;
    background: var(--am-border);
    border-radius: 2px;
    margin-top: 8px;
    margin-bottom: 10px;
    border: none;
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .settings .ui-slider-range.ui-slider-range-max {
    background: var(--am-border);
    right: 0;
    top: 0;
    height: 100%;
    position: absolute;
    z-index: 1;
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .settings .ui-slider .ui-slider-handle {
    position: absolute;
    background: var(--am-text-1);
    border: 2px solid white;
    height: 14px;
    width: 14px;
    z-index: 2;
    top: -6px;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 0 1px var(--am-border), 0 1px 3px rgba(0,0,0,0.1);
    transition: box-shadow 0.12s var(--am-ease);
    outline: none;
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .settings .ui-slider .ui-slider-handle.ui-state-focus {
    outline: none;
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .settings .ui-slider .ui-slider-handle:hover {
    cursor: pointer;
    box-shadow: 0 0 0 1px var(--am-text-3), 0 2px 6px rgba(0,0,0,0.15);
  }


  /* ==========================================================
     4. BUTTONS (Atlas Novus overrides)
     ========================================================== */
  .wpgmza-atlas-major .wpgmza-button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    line-height: 1.5;
    min-height: auto;
    margin: 0;
    padding: 7px 14px;
    cursor: pointer;
    border-width: 1px;
    border-style: solid;
    -webkit-appearance: none;
    border-radius: var(--am-radius-sm);
    white-space: nowrap;
    box-sizing: border-box;
    background: var(--am-surface);
    border-color: var(--am-border);
    color: var(--am-text-2);
    transition: all 0.12s var(--am-ease);
    letter-spacing: 0.01em;
    box-shadow: none;
  }
  .wpgmza-atlas-major .wpgmza-button:hover {
    cursor: pointer;
    background: var(--am-bg);
    border-color: var(--am-text-3);
    color: var(--am-text-1);
  }

  .wpgmza-atlas-major .wpgmza-button-primary {
    background: var(--am-text-1);
    border-color: var(--am-text-1);
    color: var(--am-text-inv);
  }
  .wpgmza-atlas-major .wpgmza-button-primary:hover {
    background: #333;
    border-color: #333;
    color: var(--am-text-inv);
  }

  .wpgmza-atlas-major .wpgmza-button-accent {
    background: var(--am-accent);
    border-color: var(--am-accent);
    color: var(--am-text-inv);
  }
  .wpgmza-atlas-major .wpgmza-button-accent:hover {
    background: var(--am-accent-hover);
    border-color: var(--am-accent-hover);
    color: var(--am-text-inv);
  }

  .wpgmza-atlas-major .wpgmza-button-call-to-action {
    background: var(--am-accent);
    border: none;
    color: var(--am-text-inv) !important;
    font-weight: 700;
    box-shadow: none;
    padding: 8px 20px;
  }
  .wpgmza-atlas-major .wpgmza-button-call-to-action:hover {
    background: var(--am-accent-hover);
  }

  .wpgmza-atlas-major a.wpgmza-button {
    color: var(--am-text-2);
  }
  .wpgmza-atlas-major a.wpgmza-button-primary,
  .wpgmza-atlas-major a.wpgmza-button-accent,
  .wpgmza-atlas-major a.wpgmza-button-call-to-action {
    color: var(--am-text-inv);
  }

  /* Save feature button */
  .wpgmza-atlas-major .wpgmza-save-feature {
    background: var(--am-accent);
    border-color: var(--am-accent);
    color: var(--am-text-inv);
    font-weight: 600;
    padding: 8px 20px;
    border-radius: var(--am-radius-sm);
  }
  .wpgmza-atlas-major .wpgmza-save-feature:hover {
    background: var(--am-accent-hover);
    border-color: var(--am-accent-hover);
  }


  /* ==========================================================
     5. FEATURE PANELS & DATATABLES
     ========================================================== */

  /* Feature panel */
  .wpgmza-atlas-major .wpgmza-editor .sidebar .wpgmza-feature-panel {
    position: relative;
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .wpgmza-feature-panel.wpgmza-loading:after {
    background: var(--am-surface);
  }

  /* Feature accordion */
  .wpgmza-atlas-major .wpgmza-feature-accordion {
    border-bottom: 1px solid var(--am-border-subtle);
  }
  .wpgmza-atlas-major .wpgmza-feature-accordion .settings {
    padding: 0 20px 16px;
  }

  /* Feature list / datatable container */
  .wpgmza-atlas-major .wpgmza-editor .sidebar .feature-list {
    padding-top: 0;
    position: relative;
    max-height: calc(100% - 120px);
    min-height: calc(100% - 120px);
    overflow-y: auto;
    padding-bottom: 0;
    scrollbar-width: thin;
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .feature-list::-webkit-scrollbar { width: 5px; }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .feature-list::-webkit-scrollbar-track { background: transparent; }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .feature-list::-webkit-scrollbar-thumb { background: #ddd; border-radius: 3px; }

  /* DataTable base */
  .wpgmza-atlas-major .wpgmza-editor .sidebar .dataTable,
  .wpgmza-atlas-major .wpgmza-datatable-container .dataTable {
    width: 100% !important;
    padding-top: 10px;
    padding-bottom: 10px;
    border-collapse: collapse;
  }

  /* Table header */
  .wpgmza-atlas-major .wpgmza-editor .sidebar .feature-list table.dataTable thead th,
  .wpgmza-atlas-major .wpgmza-editor .sidebar .feature-list table.dataTable thead td,
  .wpgmza-atlas-major .wpgmza-datatable-container table.dataTable thead th,
  .wpgmza-atlas-major .wpgmza-datatable-container table.dataTable thead td {
    border-bottom: 1px solid var(--am-border);
    border-top: 1px solid var(--am-border);
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--am-text-3);
    padding: 8px 10px;
    background: var(--am-bg);
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  }

  /* Table rows */
  .wpgmza-atlas-major .wpgmza-editor .sidebar .feature-list table.dataTable.display tbody tr,
  .wpgmza-atlas-major .wpgmza-datatable-container table.dataTable.display tbody tr {
    background: none !important;
    transition: background 0.1s var(--am-ease);
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .feature-list table.dataTable.display tbody tr:hover,
  .wpgmza-atlas-major .wpgmza-datatable-container table.dataTable.display tbody tr:hover {
    background: var(--am-bg) !important;
  }

  /* Table cells */
  .wpgmza-atlas-major .wpgmza-editor .sidebar .feature-list table.dataTable.display tbody tr td,
  .wpgmza-atlas-major .wpgmza-datatable-container table.dataTable.display tbody tr td {
    border-bottom: 1px solid var(--am-border-subtle);
    border-top: none;
    box-shadow: none;
    text-align: center;
    font-size: 13px;
    color: var(--am-text-1);
    padding: 8px 10px;
  }

  /* Last cell padding — first-child padding-left:20px removed per design;
     leading column (checkbox / ID) now sits flush with the table edge. */
  .wpgmza-atlas-major .wpgmza-editor .sidebar .feature-list table.dataTable.display tbody tr td:last-child,
  .wpgmza-atlas-major .wpgmza-editor .sidebar .feature-list table.dataTable.display thead tr th:last-child,
  .wpgmza-atlas-major .wpgmza-datatable-container table.dataTable.display tbody tr td:last-child,
  .wpgmza-atlas-major .wpgmza-datatable-container table.dataTable.display thead tr th:last-child {
    padding-right: 20px;
  }

  /* No footer border */
  .wpgmza-atlas-major .wpgmza-editor .sidebar .feature-list table.dataTable.no-footer,
  .wpgmza-atlas-major .wpgmza-datatable-container table.dataTable.no-footer {
    border: none;
  }

  /* Remove ordering column highlight */
  .wpgmza-atlas-major .wpgmza-editor .sidebar .feature-list table.dataTable.display tbody tr > .dt-ordering-1,
  .wpgmza-atlas-major .wpgmza-datatable-container table.dataTable.display tbody tr > .dt-ordering-1 {
    background: none;
  }

  /* Search input */
  .wpgmza-atlas-major .wpgmza-editor .sidebar .feature-list .dt-search,
  .wpgmza-atlas-major .wpgmza-datatable-container .dt-search {
    padding: 10px 20px;
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .dt-input,
  .wpgmza-atlas-major .wpgmza-datatable-container .dt-input {
    font-size: 12px;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    padding: 6px 10px;
    border: 1px solid var(--am-border);
    border-radius: var(--am-radius-sm);
    background: white;
    color: var(--am-text-1);
    transition: border-color 0.12s var(--am-ease);
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .dt-input:focus,
  .wpgmza-atlas-major .wpgmza-datatable-container .dt-input:focus {
    outline: none;
    border-color: var(--am-text-1);
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar select.dt-input,
  .wpgmza-atlas-major .wpgmza-datatable-container select.dt-input {
    padding-right: 24px;
  }

  /* Pagination */
  .wpgmza-atlas-major .wpgmza-editor .sidebar .feature-list .dt-paging,
  .wpgmza-atlas-major .wpgmza-datatable-container .dt-paging {
    padding: 10px 20px;
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .feature-list .dt-paging .dt-paging-button:hover,
  .wpgmza-atlas-major .wpgmza-datatable-container .dt-paging .dt-paging-button:hover {
    background: var(--am-bg);
    border: 1px solid var(--am-border);
    color: var(--am-text-1) !important;
    border-radius: var(--am-radius-sm);
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .feature-list .dt-paging .dt-paging-button.current,
  .wpgmza-atlas-major .wpgmza-datatable-container .dt-paging .dt-paging-button.current {
    background: var(--am-text-1);
    border: 1px solid var(--am-text-1);
    border-radius: var(--am-radius-sm);
    color: var(--am-text-inv) !important;
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .feature-list .dt-paging .dt-paging-button.current:hover,
  .wpgmza-atlas-major .wpgmza-datatable-container .dt-paging .dt-paging-button.current:hover {
    background: #333;
    border-color: #333;
    color: var(--am-text-inv) !important;
  }

  /* Info and length labels */
  .wpgmza-atlas-major .wpgmza-editor .sidebar .feature-list .dt-length,
  .wpgmza-atlas-major .wpgmza-editor .sidebar .feature-list .dt-info,
  .wpgmza-atlas-major .wpgmza-datatable-container .dt-length,
  .wpgmza-atlas-major .wpgmza-datatable-container .dt-info {
    padding-left: 20px;
    font-size: 11px;
    color: var(--am-text-3);
  }

  /* Layout rows */
  .wpgmza-atlas-major .wpgmza-editor .sidebar .feature-list .dt-container div.dt-layout-row,
  .wpgmza-atlas-major .wpgmza-datatable-container div.dt-container div.dt-layout-row {
    margin: 0;
  }

  /* Processing overlay */
  .wpgmza-atlas-major .wpgmza-editor .sidebar .feature-list .dt-processing,
  .wpgmza-atlas-major .wpgmza-datatable-container .dt-processing {
    background: var(--am-surface);
    color: var(--am-text-2) !important;
    font-size: 12px !important;
    border-radius: var(--am-radius);
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  }

  /* Table images */
  .wpgmza-atlas-major .wpgmza-editor .sidebar .feature-list .dataTable tbody img {
    max-width: 100%;
    border-radius: 3px;
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar:not(.as-fullscreen) .feature-list #wpgmza-table-container-Marker .dataTable tbody tr td img {
    max-width: 20px;
  }


  /* ==========================================================
     5b. MARKERS TAB — Concept C Overrides
     ========================================================== */

  /* --- Auto-expand groupings (markers): hide heading bar, tabs handle nav --- */
  .wpgmza-atlas-major .wpgmza-editor .sidebar .grouping.auto-expand > .heading:not(.am-ed-back),
  .wpgmza-atlas-major .wpgmza-editor .sidebar .grouping[data-group="map-markers"] > .heading {
    display: none;
  }

  /* --- Spacer between nav and feature-list: remove --- */
  .wpgmza-atlas-major .wpgmza-editor .sidebar .spacer {
    display: none;
  }

  /* --- "Add Marker" navigation item: style as a bar with accent button look --- */
  .wpgmza-atlas-major .wpgmza-editor .sidebar .grouping.auto-expand > .navigation,
  .wpgmza-atlas-major .wpgmza-editor .sidebar .grouping[data-feature-discard] > .navigation {
    padding: 14px 20px 12px;
    max-height: none;
    overflow: visible;
    border-bottom: 1px solid var(--am-border);
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .grouping.auto-expand > .navigation::before,
  .wpgmza-atlas-major .wpgmza-editor .sidebar .grouping[data-feature-discard] > .navigation::before {
    content: "Add";
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--am-text-3);
    margin-bottom: 10px;
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .grouping[data-group="map-markers"] > .navigation::before {
    content: "Add Marker";
  }

  /* Nav items inside auto-expand: style as clean buttons */
  .wpgmza-atlas-major .wpgmza-editor .sidebar .grouping.auto-expand > .navigation .item,
  .wpgmza-atlas-major .wpgmza-editor .sidebar .grouping[data-feature-discard] > .navigation .item {
    border: none;
    border-bottom: none;
    padding: 8px 14px;
    border-radius: var(--am-radius-sm);
    font-size: 13px;
    font-weight: 500;
    transition: all 0.12s var(--am-ease);
    margin-bottom: 4px;
    background: var(--am-bg);
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .grouping.auto-expand > .navigation .item:hover,
  .wpgmza-atlas-major .wpgmza-editor .sidebar .grouping[data-feature-discard] > .navigation .item:hover {
    background: var(--am-border);
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .grouping.auto-expand > .navigation .item.item-focus {
    background: var(--am-text-1);
    color: white;
    font-weight: 600;
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .grouping.auto-expand > .navigation .item.item-focus:hover {
    background: #333;
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .grouping.auto-expand > .navigation .item.item-focus .dashicons {
    color: white;
    opacity: 1;
  }

  /* --- Feature list: expand to fill remaining space --- */
  .wpgmza-atlas-major .wpgmza-editor .sidebar .grouping.auto-expand .feature-list {
    max-height: none;
    min-height: 0;
    flex: 1;
    overflow-y: auto;
    border-top: none;
  }

  /* --- Feature list header: "Marker List" label --- */
  .wpgmza-atlas-major .wpgmza-editor .sidebar .feature-list::before {
    content: "List";
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--am-text-3);
    padding: 14px 20px 8px;
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .grouping[data-group="map-markers"] .feature-list::before {
    content: "Marker List";
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .grouping[data-group="map-polygons"] .feature-list::before {
    content: "Polygon List";
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .grouping[data-group="map-polylines"] .feature-list::before {
    content: "Polyline List";
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .grouping[data-group="map-circles"] .feature-list::before {
    content: "Circle List";
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .grouping[data-group="map-rectangles"] .feature-list::before {
    content: "Rectangle List";
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .grouping[data-group="map-heatmaps"] .feature-list::before {
    content: "Heatmap List";
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .grouping[data-group="map-point-labels"] .feature-list::before {
    content: "Point Label List";
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .grouping[data-group="map-image-overlays"] .feature-list::before {
    content: "Image Overlay List";
  }

  /* ==========================================================
     5c. ATLAS MAJOR CUSTOM MARKER LIST — Concept C exact match
     ========================================================== */

  /* Hide DataTable in sidebar view, show custom list instead */
  .wpgmza-atlas-major .wpgmza-editor .sidebar:not(.as-fullscreen) .am-dt-fullscreen-only {
    display: none;
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar.as-fullscreen .am-marker-list-container,
  .wpgmza-atlas-major .wpgmza-editor .sidebar.as-fullscreen .am-ml-stats {
    display: none;
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar.as-fullscreen .am-dt-fullscreen-only {
    display: block;
  }
  .wpgmza-atlas-major .am-dt-hidden-in-list {
    /* Fallback hide via JS class */
  }

  /* Busy / loading state for the marker list.
     atlas-major-marker-list.js adds `.am-marker-list-busy` to the
     `.am-marker-list-container` element around AJAX actions
     (duplicate / delete / approve / move-map) and during the
     initial load while the map is still placing its first marker
     batch. The class dims the list, freezes pointer-events so the
     user can't fire another action mid-flight, and overlays a
     small spinner centred on the container.
     `.am-marker-list-container` needs `position: relative` to
     anchor the absolute spinner; the rule is scoped here rather
     than on a bare `.am-marker-list-container` selector because
     this is the only style that needs the container to be
     positioned. */
  .wpgmza-atlas-major .am-marker-list-container {
    position: relative;
  }
  .wpgmza-atlas-major .am-marker-list-container.am-marker-list-busy {
    opacity: 0.55;
    pointer-events: none;
    transition: opacity 0.15s ease;
  }
  .wpgmza-atlas-major .am-marker-list-container.am-marker-list-busy::after {
    content: '';
    position: absolute;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 32px;
    border: 3px solid var(--am-border);
    border-top-color: var(--am-accent);
    border-radius: 50%;
    animation: am-marker-list-spin 0.7s linear infinite;
    /* Opacity above dims the spinner too; counter-act so the
       indicator stays clearly visible against the dimmed list. */
    opacity: calc(1 / 0.55);
    pointer-events: none;
    z-index: 2;
  }
  @keyframes am-marker-list-spin {
    to { transform: translateX(-50%) rotate(360deg); }
  }

  /* Stats bar */
  .wpgmza-atlas-major .am-ml-stats {
    display: flex;
    padding: 0;
    border-bottom: 1px solid var(--am-border);
    background: var(--am-bg);
    flex-shrink: 0;
  }
  .wpgmza-atlas-major .am-ml-stat {
    flex: 1;
    padding: 8px 12px;
    text-align: center;
    border-right: 1px solid var(--am-border);
  }
  .wpgmza-atlas-major .am-ml-stat:last-child { border-right: none; }
  .wpgmza-atlas-major .am-ml-stat-val {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 15px;
    font-weight: 700;
    color: var(--am-text-1);
  }
  .wpgmza-atlas-major .am-ml-stat-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--am-text-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  /* Marker list */
  .wpgmza-atlas-major .am-ml {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  /* Marker list item */
  .wpgmza-atlas-major .am-mi {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 10px 20px;
    cursor: pointer;
    transition: all 0.1s;
    border-left: 2px solid transparent;
    border-bottom: 1px solid var(--am-border-subtle);
  }
  .wpgmza-atlas-major .am-mi:last-child { border-bottom: none; }
  .wpgmza-atlas-major .am-mi:hover {
    background: var(--am-bg);
    border-left-color: var(--am-accent);
  }

  /* Marker icon thumbnail */
  .wpgmza-atlas-major .am-mi-pin {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    background: transparent;
  }
  .wpgmza-atlas-major .am-mi-pin img {
    max-width: 24px;
    max-height: 24px;
    object-fit: contain;
  }

  /* Body (name + address) */
  .wpgmza-atlas-major .am-mi-body {
    flex: 1;
    min-width: 0;
  }
  .wpgmza-atlas-major .am-mi-name {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.01em;
    color: var(--am-text-1);
  }
  .wpgmza-atlas-major .am-mi-addr {
    font-size: 11px;
    color: var(--am-text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Bulk selection checkbox — hidden until hover or selected */
  .wpgmza-atlas-major .am-mi-check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0;
    overflow: hidden;
    opacity: 0;
    transition: width 0.12s var(--am-ease), opacity 0.12s var(--am-ease);
    flex-shrink: 0;
    cursor: pointer;
  }
  .wpgmza-atlas-major .am-mi:hover .am-mi-check,
  .wpgmza-atlas-major .am-mi.am-mi-selected .am-mi-check {
    width: 22px;
    opacity: 1;
  }
  .wpgmza-atlas-major .am-mi-check input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
    accent-color: var(--am-accent);
  }
  .wpgmza-atlas-major .am-mi.am-mi-selected {
    background: var(--am-bg);
  }

  /* Bulk action bar */
  .wpgmza-atlas-major .am-bulk-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 0;
    flex-wrap: wrap;
  }
  .wpgmza-atlas-major .am-bulk-info {
    font-size: 11px;
    font-weight: 600;
    color: var(--am-text-2);
    margin-right: 4px;
  }
  .wpgmza-atlas-major .am-bulk-btn {
    font-size: 11px;
    font-weight: 500;
    font-family: var(--am-sans);
    padding: 3px 10px;
    border: 1px solid var(--am-border);
    border-radius: var(--am-radius-sm);
    background: var(--am-surface);
    color: var(--am-text-2);
    cursor: pointer;
    transition: all 0.12s var(--am-ease);
    line-height: 1.4;
  }
  .wpgmza-atlas-major .am-bulk-btn:hover {
    border-color: var(--am-text-3);
    color: var(--am-text-1);
  }
  .wpgmza-atlas-major .am-bulk-btn-danger {
    color: #dc2626;
    border-color: #fecaca;
  }
  .wpgmza-atlas-major .am-bulk-btn-danger:hover {
    background: #fef2f2;
    border-color: #dc2626;
  }

  .wpgmza-atlas-major .am-mi-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
  }
  .wpgmza-atlas-major .am-mi-cat {
    display: inline-block;
    font-size: 10px;
    font-weight: 500;
    color: var(--am-text-2);
    background: var(--am-bg);
    border: 1px solid var(--am-border);
    border-radius: 3px;
    padding: 1px 6px;
    line-height: 1.5;
  }

  /* Action area (kebab + dropdown menu) — Novus-parity layout.
     The whole row used to carry an inline icon strip; that was
     replaced with a single "..." kebab that opens a dropdown
     containing all 7 actions (Edit / Adjust / Center / Duplicate
     / Move Map / Approve / Delete). Mirrors what Atlas Novus did,
     just under Atlas Major's design tokens. */
  .wpgmza-atlas-major .am-mi-ops {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }

  /* Kebab trigger — three vertical dots, hidden until row :hover
     OR when an attention dot is present (needs-approval rows show
     the kebab always so the red dot is immediately visible). */
  .wpgmza-atlas-major .am-mi-kebab {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--am-text-3);
    transition: opacity 0.12s, background 0.1s, color 0.1s;
    padding: 0;
    opacity: 0;
  }
  .wpgmza-atlas-major .am-mi:hover .am-mi-kebab,
  .wpgmza-atlas-major .am-mi.am-mi-menu-open .am-mi-kebab,
  .wpgmza-atlas-major .am-mi.am-mi-needs-approval .am-mi-kebab {
    opacity: 1;
  }
  .wpgmza-atlas-major .am-mi-kebab:hover {
    background: var(--am-border);
    color: var(--am-text-1);
  }
  .wpgmza-atlas-major .am-mi.am-mi-menu-open .am-mi-kebab {
    background: var(--am-border);
    color: var(--am-text-1);
  }

  /* Red attention dot on the kebab — only when the row's marker
     needs approval. Mirrors exactly where Atlas Novus places it
     (on the "..." menu trigger). */
  .wpgmza-atlas-major .am-mi.am-mi-needs-approval .am-mi-kebab {
    position: relative;
  }
  .wpgmza-atlas-major .am-mi.am-mi-needs-approval .am-mi-kebab::after {
    content: '';
    position: absolute;
    top: 3px;
    right: 3px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ef4444;
    border: 2px solid var(--am-surface);
    box-sizing: content-box;
  }

  /* Dropdown menu — absolutely positioned beneath the kebab,
     anchored to its right edge so it doesn't overflow into the
     row content. Hidden by default; .am-mi.am-mi-menu-open on the
     parent <li> reveals it. */
  .wpgmza-atlas-major .am-mi-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 20;
    min-width: 180px;
    padding: 4px;
    background: var(--am-surface);
    border: 1px solid var(--am-border);
    border-radius: var(--am-radius-sm);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10), 0 2px 6px rgba(0, 0, 0, 0.06);
    flex-direction: column;
  }
  .wpgmza-atlas-major .am-mi.am-mi-menu-open .am-mi-menu {
    display: flex;
  }

  /* Menu items — icon + label, full-width clickable rows. */
  .wpgmza-atlas-major .am-mi-mi {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border: none;
    background: transparent;
    color: var(--am-text-1);
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    border-radius: 4px;
    width: 100%;
    transition: background 0.1s;
    white-space: nowrap;
  }
  .wpgmza-atlas-major .am-mi-mi:hover {
    background: var(--am-bg);
  }
  .wpgmza-atlas-major .am-mi-mi-icon {
    color: var(--am-text-3);
    flex-shrink: 0;
  }
  .wpgmza-atlas-major .am-mi-mi:hover .am-mi-mi-icon {
    color: var(--am-text-1);
  }
  .wpgmza-atlas-major .am-mi-mi-label {
    flex: 1;
  }

  /* Approve menu item — green checkmark to signal the affirmative
     action, plus its own red dot indicator so it's spottable when
     the menu is open (without having to read every label). */
  .wpgmza-atlas-major .am-mi-mi-approve .am-mi-mi-icon {
    color: #10b981;
  }
  .wpgmza-atlas-major .am-mi-mi-approve:hover {
    background: rgba(16, 185, 129, 0.08);
  }
  .wpgmza-atlas-major .am-mi-mi-approve:hover .am-mi-mi-icon {
    color: #059669;
  }
  .wpgmza-atlas-major .am-mi-mi-attention {
    position: relative;
  }
  .wpgmza-atlas-major .am-mi-mi-attention::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ef4444;
  }

  /* Delete menu item — red text + icon on hover to telegraph the
     destructive nature, matching the previous .am-mi-btn-danger. */
  .wpgmza-atlas-major .am-mi-mi-danger:hover {
    background: var(--am-accent-soft);
    color: var(--am-accent);
  }
  .wpgmza-atlas-major .am-mi-mi-danger:hover .am-mi-mi-icon {
    color: var(--am-accent);
  }

  /* Count badge next to "Markers" heading */
  .wpgmza-atlas-major .am-ml-count {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    font-weight: 500;
    background: var(--am-bg);
    color: var(--am-text-2);
    padding: 1px 6px;
    border-radius: 3px;
    line-height: 1.4;
    margin-left: 4px;
  }
  .wpgmza-atlas-major .am-ml-count:empty { display: none; }

  /* Quick-add autocomplete results — overlay just below the input row.
     Absolute so it doesn't push the marker list / other panels down
     when results appear. Anchored to parent .am-ml-bar (position:
     relative) and stretched across the bar's horizontal padding. */
  .wpgmza-atlas-major #am-quick-add-autocomplete-results {
    position: absolute;
    left: 20px;
    right: 20px;
    background: var(--am-surface);
    border: 1px solid var(--am-border);
    border-radius: var(--am-radius);
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    max-height: 260px;
    overflow-y: auto;
    z-index: 999999;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    margin-top: 6px;
  }
  .wpgmza-atlas-major #am-quick-add-autocomplete-results .wpgmza_ac_result {
    
    cursor: pointer;
    transition: background 0.1s;
    border-bottom: 1px solid var(--am-border-subtle);
    font-size: 13px;
    color: var(--am-text-1);
  }
  .wpgmza-atlas-major #am-quick-add-autocomplete-results .wpgmza_ac_result:hover {
    background: var(--am-bg);
  }
  .wpgmza-atlas-major #am-quick-add-autocomplete-results .wpgmza_ac_result:last-child {
    border-bottom: none;
  }
  .wpgmza-atlas-major #am-quick-add-autocomplete-results .wpgmza-pad-5 {
    padding: 14px;
    text-align: center;
    font-size: 12px;
    color: var(--am-text-3);
  }

  .wpgmza_ac_result  {
    display:flex;
    flex-direction: row;
    width:100%;
  }
  .wpgmza_ac_container {
    display:flex;
    padding:10px 4px;
  }
  .wpgmza_ac_item {
    display:flex;
    flex-direction:column;
  }
  .wpgmza_ac_result {
    width:100% !important;
  }
  .wpgmza_ac_icon {
    margin-right: 15px;
  }
  .wpgmza_ac_result .wpgmza_ac_icon img {
    width: 24px;
    margin-top: 4px;
}

  /* Quick-add autocomplete disabled warning */
  .wpgmza-atlas-major #am-quick-add-autoc-disabled {
    font-size: 12px;
    color: var(--am-accent);
    padding: 8px 0 0;
    line-height: 1.5;
  }
  .wpgmza-atlas-major #am-quick-add-autoc-disabled a {
    color: var(--am-accent);
    font-weight: 600;
  }

  /* Quick-add address input */
  .wpgmza-atlas-major #am-quick-add-address {
    flex: 1;
    min-width: 0;
    width: auto;
    padding: 8px 12px;
    border: 1px solid var(--am-border);
    border-radius: var(--am-radius);
    font-size: 13px;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    background: white;
    color: var(--am-text-1);
    transition: border-color 0.12s var(--am-ease);
    box-sizing: border-box;
  }
  .wpgmza-atlas-major #am-quick-add-address:focus {
    outline: none;
    border-color: var(--am-text-1);
  }

  /* Search field inside marker list bar */
  .wpgmza-atlas-major .am-ml-bar .am-search-field {
    position: relative;
  }
  .wpgmza-atlas-major .am-ml-bar .am-search-field .am-ico {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--am-text-3);
    pointer-events: none;
  }
  .wpgmza-atlas-major .am-ml-search {
    width: 100%;
    padding: 8px 12px 8px 34px;
    border: 1px solid var(--am-border);
    border-radius: var(--am-radius);
    font-size: 13px;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    background: var(--am-bg);
    color: var(--am-text-1);
    transition: all 0.12s var(--am-ease);
  }
  .wpgmza-atlas-major .am-ml-search:focus {
    outline: none;
    border-color: var(--am-text-1);
    background: white;
  }
  .wpgmza-atlas-major .am-ml-search::placeholder {
    color: var(--am-text-3);
  }

  /* Empty state */
  .wpgmza-atlas-major .am-ml-empty {
    padding: 40px 20px;
    text-align: center;
  }
  .wpgmza-atlas-major .am-ml-empty .am-empty-text {
    font-size: 13px;
    color: var(--am-text-3);
  }

  /* Pagination */
  .wpgmza-atlas-major .am-ml-pagination {
    padding: 8px 20px;
    flex-shrink: 0;
  }
  .wpgmza-atlas-major .am-pag {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
  }
  .wpgmza-atlas-major .am-pag-btn {
    width: 30px;
    height: 30px;
    border: 1px solid var(--am-border);
    background: white;
    border-radius: var(--am-radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--am-text-2);
    font-size: 12px;
    font-weight: 500;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    transition: all 0.12s var(--am-ease);
    padding: 0;
  }
  .wpgmza-atlas-major .am-pag-btn:hover:not(.disabled) {
    border-color: var(--am-text-3);
    color: var(--am-text-1);
  }
  .wpgmza-atlas-major .am-pag-btn.on {
    background: var(--am-text-1);
    border-color: var(--am-text-1);
    color: white;
  }
  .wpgmza-atlas-major .am-pag-btn.disabled {
    opacity: 0.3;
    cursor: default;
  }
  .wpgmza-atlas-major .am-pag-info {
    font-size: 11px;
    color: var(--am-text-3);
    margin-left: 8px;
    font-family: 'IBM Plex Mono', monospace;
  }


  /* ==========================================================
     5d. MARKER DATATABLE — fallback & fullscreen view
     In the sidebar (non-fullscreen) view, aggressively hide
     columns and restyle to match the clean mi-list from mockup
     ========================================================== */

  /* --- Hide table header entirely in sidebar — mockup has no header --- */
  .wpgmza-atlas-major .wpgmza-editor .sidebar:not(.as-fullscreen) .feature-list #wpgmza-table-container-Marker table.dataTable thead {
    display: none;
  }

  /* --- Hide columns: Mark(0), ID(1), Category(4), Description(6), Image(7), Link(8), Sticky(9) --- */
  .wpgmza-atlas-major .wpgmza-editor .sidebar:not(.as-fullscreen) .feature-list #wpgmza-table-container-Marker .dataTable tr th:nth-child(1),
  .wpgmza-atlas-major .wpgmza-editor .sidebar:not(.as-fullscreen) .feature-list #wpgmza-table-container-Marker .dataTable tr td:nth-child(1),
  .wpgmza-atlas-major .wpgmza-editor .sidebar:not(.as-fullscreen) .feature-list #wpgmza-table-container-Marker .dataTable tr th:nth-child(2),
  .wpgmza-atlas-major .wpgmza-editor .sidebar:not(.as-fullscreen) .feature-list #wpgmza-table-container-Marker .dataTable tr td:nth-child(2),
  .wpgmza-atlas-major .wpgmza-editor .sidebar:not(.as-fullscreen) .feature-list #wpgmza-table-container-Marker .dataTable tr th:nth-child(5),
  .wpgmza-atlas-major .wpgmza-editor .sidebar:not(.as-fullscreen) .feature-list #wpgmza-table-container-Marker .dataTable tr td:nth-child(5),
  .wpgmza-atlas-major .wpgmza-editor .sidebar:not(.as-fullscreen) .feature-list #wpgmza-table-container-Marker .dataTable tr th:nth-child(7),
  .wpgmza-atlas-major .wpgmza-editor .sidebar:not(.as-fullscreen) .feature-list #wpgmza-table-container-Marker .dataTable tr td:nth-child(7),
  .wpgmza-atlas-major .wpgmza-editor .sidebar:not(.as-fullscreen) .feature-list #wpgmza-table-container-Marker .dataTable tr th:nth-child(8),
  .wpgmza-atlas-major .wpgmza-editor .sidebar:not(.as-fullscreen) .feature-list #wpgmza-table-container-Marker .dataTable tr td:nth-child(8),
  .wpgmza-atlas-major .wpgmza-editor .sidebar:not(.as-fullscreen) .feature-list #wpgmza-table-container-Marker .dataTable tr th:nth-child(9),
  .wpgmza-atlas-major .wpgmza-editor .sidebar:not(.as-fullscreen) .feature-list #wpgmza-table-container-Marker .dataTable tr td:nth-child(9),
  .wpgmza-atlas-major .wpgmza-editor .sidebar:not(.as-fullscreen) .feature-list #wpgmza-table-container-Marker .dataTable tr th:nth-child(10),
  .wpgmza-atlas-major .wpgmza-editor .sidebar:not(.as-fullscreen) .feature-list #wpgmza-table-container-Marker .dataTable tr td:nth-child(10) {
    display: none;
  }

  /* --- Visible columns: Icon(3), Title(4→now 3rd visible), Address(6→4th), Action(11→last) --- */

  /* Table rows: mockup mi-style — left accent border, subtle bottom border, pointer */
  .wpgmza-atlas-major .wpgmza-editor .sidebar:not(.as-fullscreen) .feature-list #wpgmza-table-container-Marker .dataTable tbody tr {
    border-left: 2px solid transparent;
    border-bottom: 1px solid var(--am-border-subtle);
    cursor: pointer;
    transition: all 0.1s var(--am-ease);
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar:not(.as-fullscreen) .feature-list #wpgmza-table-container-Marker .dataTable tbody tr:hover {
    background: var(--am-bg) !important;
    border-left-color: var(--am-accent);
  }

  /* Table cells: compact padding */
  .wpgmza-atlas-major .wpgmza-editor .sidebar:not(.as-fullscreen) .feature-list #wpgmza-table-container-Marker .dataTable tbody tr td {
    padding: 10px 6px;
    vertical-align: middle;
    border: none;
    font-size: 13px;
    color: var(--am-text-1);
  }

  /* Icon column (3rd): small pin-like icon */
  .wpgmza-atlas-major .wpgmza-editor .sidebar:not(.as-fullscreen) .feature-list #wpgmza-table-container-Marker .dataTable tbody tr td:nth-child(3) {
    width: 30px;
    padding-left: 14px;
    padding-right: 4px;
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar:not(.as-fullscreen) .feature-list #wpgmza-table-container-Marker .dataTable tbody tr td:nth-child(3) img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    border-radius: 50%;
  }

  /* Title column (4th): bold, name-like */
  .wpgmza-atlas-major .wpgmza-editor .sidebar:not(.as-fullscreen) .feature-list #wpgmza-table-container-Marker .dataTable tbody tr td:nth-child(4) {
    font-weight: 600;
    font-size: 13px;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
  }

  /* Address column (6th): muted, smaller */
  .wpgmza-atlas-major .wpgmza-editor .sidebar:not(.as-fullscreen) .feature-list #wpgmza-table-container-Marker .dataTable tbody tr td:nth-child(6) {
    font-size: 11px;
    color: var(--am-text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
  }

  /* Action column (11th/last): show on hover only — mockup mi-ops pattern */
  .wpgmza-atlas-major .wpgmza-editor .sidebar:not(.as-fullscreen) .feature-list #wpgmza-table-container-Marker .dataTable tbody tr td:last-child {
    opacity: 0;
    transition: opacity 0.12s var(--am-ease);
    width: 60px;
    text-align: right;
    padding-right: 14px;
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar:not(.as-fullscreen) .feature-list #wpgmza-table-container-Marker .dataTable tbody tr:hover td:last-child {
    opacity: 1;
  }

  /* Action buttons: small icon buttons matching mockup mi-btn */
  .wpgmza-atlas-major .wpgmza-editor .sidebar .feature-list .wpgmza-action-buttons {
    display: flex;
    gap: 2px;
    justify-content: flex-end;
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .feature-list .wpgmza-action-buttons .wpgmza-button,
  .wpgmza-atlas-major .wpgmza-editor .sidebar .feature-list .wpgmza-action-buttons a {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--am-text-3);
    transition: all 0.1s var(--am-ease);
    padding: 0;
    font-size: 13px;
    text-decoration: none;
    box-shadow: none;
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .feature-list .wpgmza-action-buttons .wpgmza-button:hover,
  .wpgmza-atlas-major .wpgmza-editor .sidebar .feature-list .wpgmza-action-buttons a:hover {
    background: var(--am-border);
    color: var(--am-text-1);
  }
  /* Hide text labels in action dropdown items — icon only in sidebar view */
  .wpgmza-atlas-major .wpgmza-editor .sidebar:not(.as-fullscreen) .feature-list .wpgmza-toolbar-list a {
    font-size: 0;
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar:not(.as-fullscreen) .feature-list .wpgmza-toolbar-list a i {
    font-size: 13px;
  }

  /* --- General DataTable row styling (non-marker tables) --- */
  .wpgmza-atlas-major .wpgmza-editor .sidebar .feature-list table.dataTable.display tbody tr {
    border-left: 2px solid transparent;
    border-bottom: 1px solid var(--am-border-subtle);
    cursor: pointer;
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .feature-list table.dataTable.display tbody tr:hover {
    border-left-color: var(--am-accent);
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .feature-list table.dataTable.display tbody tr td {
    font-size: 13px;
    padding: 10px 8px;
    vertical-align: middle;
    border: none;
    color: var(--am-text-1);
  }

  /* --- Editor back-nav bar — Concept C .ed-back style --- */
  .wpgmza-atlas-major .wpgmza-editor .sidebar .am-ed-back {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--am-border);
    cursor: pointer;
    transition: background 0.1s var(--am-ease);
    flex-shrink: 0;
    user-select: none;
    font-size: 1em;
    max-height: none;
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .am-ed-back:hover {
    background: var(--am-bg);
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .am-ed-back .am-ico {
    color: var(--am-text-3);
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .am-ed-back .am-ed-back-text {
    font-size: 12px;
    font-weight: 500;
    color: var(--am-text-2);
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .am-ed-back .item.caret-left {
    position: static;
    width: auto;
    padding: 0;
    display: flex;
    align-items: center;
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .am-ed-back .item.caret-left:after {
    display: none;
  }

  /* --- Feature editor grouping heading (non-marker, e.g. polygons): compact back bar --- */
  .wpgmza-atlas-major .wpgmza-editor .sidebar .grouping[data-feature] > .heading:not(.am-ed-back) {
    display: flex;
    align-items: center;
    padding: 0 20px;
    padding-left: 44px;
    height: 42px;
    font-size: 12px;
    font-weight: 500;
    color: var(--am-text-2);
    border-bottom: 1px solid var(--am-border);
    cursor: pointer;
    transition: background 0.1s var(--am-ease);
    user-select: none;
    max-height: 42px;
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .grouping[data-feature] > .heading:not(.am-ed-back):hover {
    background: var(--am-bg);
  }

  /* --- Feature panel container: cleaner padding --- */
  .wpgmza-atlas-major .wpgmza-editor .sidebar .wpgmza-feature-panel {
    padding: 0;
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .wpgmza-feature-panel fieldset {
    margin-top: 14px;
    border: none;
    padding: 0;
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .wpgmza-feature-panel fieldset legend {
    font-size: 11px;
    font-weight: 600;
    color: var(--am-text-2);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 5px;
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .wpgmza-feature-panel fieldset.wpgmza-always-on legend {
    color: var(--am-text-2);
  }

  /* --- Generic modals (map select, bulk editor etc.) --- */
  .wpgmza-atlas-major .wpgmza-generic-modal {
    display: none;
    position: fixed;
    background: rgba(0,0,0,0.4);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
  }
  .wpgmza-atlas-major .wpgmza-generic-modal.pending {
    display: block;
  }
  .wpgmza-atlas-major .wpgmza-generic-modal .wpgmza-generic-modal-inner {
    background: var(--am-surface);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 480px;
    padding: 24px;
    border-radius: var(--am-radius-lg);
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
    max-height: 60vh;
    overflow-y: auto;
    text-align: center;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  }
  .wpgmza-atlas-major .wpgmza-generic-modal .wpgmza-generic-modal-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--am-text-1);
    margin-bottom: 12px;
  }
  .wpgmza-atlas-major .wpgmza-generic-modal .wpgmza-generic-modal-content {
    padding-bottom: 12px;
    font-size: 13px;
    color: var(--am-text-2);
  }
  .wpgmza-atlas-major .wpgmza-generic-modal .wpgmza-generic-modal-content > input,
  .wpgmza-atlas-major .wpgmza-generic-modal .wpgmza-generic-modal-content > select {
    margin-top: 8px;
    font-size: 13px;
    padding: 8px 12px;
    min-width: 200px;
    max-width: 100%;
    border: 1px solid var(--am-border);
    border-radius: var(--am-radius-sm);
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  }
  .wpgmza-atlas-major .wpgmza-generic-modal .wpgmza-generic-modal-actions .wpgmza-button {
    margin-top: 12px;
    padding: 7px 20px;
    border-radius: var(--am-radius-sm);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  .wpgmza-atlas-major .wpgmza-generic-modal .wpgmza-generic-modal-actions .wpgmza-button[data-action="complete"] {
    background: var(--am-accent);
    color: white;
    border: none;
  }
  .wpgmza-atlas-major .wpgmza-generic-modal .wpgmza-generic-modal-actions .wpgmza-button[data-action="cancel"] {
    background: var(--am-surface);
    color: var(--am-text-2);
    border: 1px solid var(--am-border);
    margin-right: 6px;
  }

  /* --- Bulk Marker Editor modal — label/field row alignment ---
     Each row is [label col][field col], both `.wpgmza-col` (flex: 1,
     so 50/50). Two problems that this block fixes:
       1. The Map <select>'s options are map titles, which can be
          arbitrarily long. As a flex item the field column defaults
          to min-width:auto, so the select grew to its intrinsic
          content width and overflowed the 480px modal. Pinning the
          field column to min-width:0 + the controls to width:100%
          keeps everything inside the modal.
       2. Labels were right-aligned (`wpgmza-text-align-right` in the
          template), so field columns started at varying x. Fixed-
          width, left-aligned labels make every field column begin at
          the same point so the inputs line up vertically.
     Scoped to the bulk editor modal so other generic modals are
     unaffected. */
  .wpgmza-atlas-major .wpgmza-bulk-marker-editor-modal .wpgmza-generic-modal-content .wpgmza-row {
    align-items: center;
    flex-wrap: nowrap;
  }
  .wpgmza-atlas-major .wpgmza-bulk-marker-editor-modal .wpgmza-generic-modal-content .wpgmza-row .wpgmza-col:first-child {
    flex: 0 0 160px;
    max-width: 160px;
    text-align: left;
  }
  .wpgmza-atlas-major .wpgmza-bulk-marker-editor-modal .wpgmza-generic-modal-content .wpgmza-row .wpgmza-col:first-child label {
    font-weight: 500;
    color: var(--am-text-2);
  }
  .wpgmza-atlas-major .wpgmza-bulk-marker-editor-modal .wpgmza-generic-modal-content .wpgmza-row .wpgmza-col:last-child {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
  }
  /* Constrain the flexible controls to the field column. Checkboxes
     (the "Sticky" toggle) are intentionally excluded so they keep
     their natural box size. */
  .wpgmza-atlas-major .wpgmza-bulk-marker-editor-modal .wpgmza-generic-modal-content .wpgmza-row .wpgmza-col:last-child select,
  .wpgmza-atlas-major .wpgmza-bulk-marker-editor-modal .wpgmza-generic-modal-content .wpgmza-row .wpgmza-col:last-child input[type="number"],
  .wpgmza-atlas-major .wpgmza-bulk-marker-editor-modal .wpgmza-generic-modal-content .wpgmza-row .wpgmza-col:last-child .bulk-category-selector {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* --- Editor upsell — sits below the marker form, matches form padding --- */
  .wpgmza-atlas-major .am-editor-upsell {
    padding: 0 0 20px;
  }
  .wpgmza-atlas-major .am-editor-upsell .wpgmza-upsell {
    margin-top: 0;
  }

  /* --- Quick-add marker button in markers tab --- */
  .wpgmza-atlas-major .am-marker-quick-add {
    padding: 8px 16px;
    border-radius: var(--am-radius-sm);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .wpgmza-atlas-major .am-marker-quick-add:after {
    display: none;
  }

  /* --- Save feature button: accent style matching mockup --- */
  .wpgmza-atlas-major .wpgmza-editor .sidebar .wpgmza-save-feature-container {
    margin-top: 16px;
    display: flex;
    gap: 6px;
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .wpgmza-save-feature {
    flex: 1;
    justify-content: center;
    background: var(--am-accent);
    color: white;
    border: none;
    padding: 8px 20px;
    border-radius: var(--am-radius-sm);
    font-size: 13px;
    font-weight: 600;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    cursor: pointer;
    transition: all 0.12s var(--am-ease);
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .wpgmza-save-feature:hover {
    background: var(--am-accent-hover);
  }

  /* --- Marker address input: cleaner --- */
  .wpgmza-atlas-major .wpgmza-editor .sidebar .wpgmza-feature-panel .wpgmza-address {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--am-border);
    border-radius: var(--am-radius-sm);
    font-size: 13px;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    color: var(--am-text-1);
    background: white;
    transition: border-color 0.12s var(--am-ease);
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .wpgmza-feature-panel .wpgmza-address:focus {
    outline: none;
    border-color: var(--am-text-1);
  }

  /* --- Pro-feature fields in marker editor: dimmed with PRO pill on legend --- */
  .wpgmza-atlas-major .wpgmza-editor .sidebar .wpgmza-feature-panel fieldset.wpgmza-pro-feature input,
  .wpgmza-atlas-major .wpgmza-editor .sidebar .wpgmza-feature-panel fieldset.wpgmza-pro-feature select,
  .wpgmza-atlas-major .wpgmza-editor .sidebar .wpgmza-feature-panel fieldset.wpgmza-pro-feature textarea {
    opacity: 0.35;
    pointer-events: none;
    background: var(--am-bg);
  }

  /* --- Instruction cards in feature editors: subtle --- */
  .wpgmza-atlas-major .wpgmza-editor .sidebar .wpgmza-feature-panel .wpgmza-instruction-card {
    margin-top: 0;
    margin-bottom: 12px;
    background: var(--am-bg);
    border: 1px solid var(--am-border-subtle);
    border-radius: var(--am-radius-sm);
    padding: 12px 14px;
    font-size: 12px;
    color: var(--am-text-2);
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .wpgmza-feature-panel .wpgmza-instruction-card strong {
    color: var(--am-text-1);
    font-size: 12px;
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .wpgmza-feature-panel .wpgmza-instruction-card ul {
    margin: 6px 0 0;
    padding-left: 16px;
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .wpgmza-feature-panel .wpgmza-instruction-card ul li {
    font-size: 11px;
    line-height: 1.5;
    padding-left: 0;
    margin-bottom: 2px;
  }

  /* ==========================================================
     6. INSTRUCTION CARDS
     ========================================================== */
  .wpgmza-atlas-major .wpgmza-instruction-card {
    margin-top: 16px;
    position: relative;
    background: var(--am-bg);
    border: 1px solid var(--am-border);
    border-radius: var(--am-radius);
    padding: 14px 16px;
    font-size: 12px;
    color: var(--am-text-2);
    line-height: 1.55;
  }
  .wpgmza-atlas-major .wpgmza-instruction-card > strong {
    position: relative;
    padding-left: 0;
    font-size: 13px;
    color: var(--am-text-1);
    display: block;
    margin-bottom: 6px;
  }
  .wpgmza-atlas-major .wpgmza-instruction-card > strong:before {
    display: none;
  }
  .wpgmza-atlas-major .wpgmza-instruction-card ul {
    padding-left: 16px;
    list-style: disc;
    font-size: 12px;
    margin-top: 4px;
    color: var(--am-text-2);
  }
  .wpgmza-atlas-major .wpgmza-instruction-card ul li {
    margin-bottom: 2px;
  }

  /* Drawing / editing instruction wrappers */
  .wpgmza-atlas-major .wpgmza-feature-drawing-instructions,
  .wpgmza-atlas-major .wpgmza-feature-editing-instructions {
    margin-bottom: 8px;
  }
  /* Section title — above the card */
  .wpgmza-atlas-major .wpgmza-feature-drawing-instructions > .am-ph-title,
  .wpgmza-atlas-major .wpgmza-feature-editing-instructions > .am-ph-title {
    font-size: 15px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: -0.01em;
    color: var(--am-text-1);
    margin-top: 20px;
    margin-bottom: 10px;
  }
  /* Instruction card — inside the wrapper */
  .wpgmza-atlas-major .wpgmza-feature-drawing-instructions .wpgmza-instruction-card,
  .wpgmza-atlas-major .wpgmza-feature-editing-instructions .wpgmza-instruction-card {
    background: var(--am-accent-soft);
    border: 1px solid var(--am-accent-border);
    border-radius: var(--am-radius);
    padding: 12px 16px;
    font-size: 12px;
    color: var(--am-text-2);
  }


  /* ==========================================================
     7. PRO FEATURE LOCKING
     ========================================================== */
  .wpgmza-atlas-major .wpgmza-pro-feature {
    opacity: 0.55;
    position: relative;
  }
  .wpgmza-atlas-major .wpgmza-pro-feature fieldset {
    pointer-events: none;
  }
  .wpgmza-atlas-major .wpgmza-pro-feature input,
  .wpgmza-atlas-major .wpgmza-pro-feature select,
  .wpgmza-atlas-major .wpgmza-pro-feature textarea {
    opacity: 0.5;
    pointer-events: none;
    background: var(--am-bg);
  }

  /* Pro legend badge */
  .wpgmza-atlas-major .wpgmza-editor .sidebar fieldset.wpgmza-pro-feature legend:not(:empty)::after {
    content: "PRO";
    background: var(--am-pro-soft);
    color: var(--am-pro-text);
    text-transform: uppercase;
    font-size: 9px;
    font-weight: 700;
    padding: 0 5px;
    border-radius: 3px;
    line-height: 16px;
    margin-left: 6px;
    border: 1px solid var(--am-pro-border);
    letter-spacing: 0.04em;
  }

  /* Pro-locked toggle switches now render as normal (disabled +
   * dimmed) toggles — matches Atlas Novus's approach. The earlier
   * pill-replacement treatment (whole `.switch` restyled into a
   * purple "Pro" capsule with the input + label hidden) was
   * removed; it confused users who couldn't tell the row was a
   * disabled toggle, and broke down on rows that carried label
   * text as bare text-node siblings of the checkbox (e.g.
   * settings-page Link target sub-options). Novus only does
   * `.wpgmza-pro-feature { opacity: 0.6 }` + a small `Pro` badge
   * next to the row title — we now match that. The `input[disabled]`
   * attribute is set by Pro's class.pro-settings-page.php when
   * Pro isn't active, so the toggle is functionally locked too. */

  .wpgmza-atlas-major .wpgmza-pro-feature .wpgmza-shortcode-button,
  .wpgmza-atlas-major .wpgmza-pro-feature .wpgmza-check-card-selector,
  .wpgmza-atlas-major .wpgmza-pro-feature .wpgmza-infowindow-style-picker,
  .wpgmza-atlas-major .wpgmza-pro-feature .wpgmza-css-state-block {
    pointer-events: none;
  }
  .wpgmza-atlas-major .wpgmza-pro-feature .wpgmza-css-state-block .wpgmza-css-state-block-content {
    display: none;
  }

  /* `.wpgmza-pro-feature-hide` is left UN-styled here.
     The class name suggests "hide pro features when appropriate"
     but nothing in PHP or JS ever toggles it — Pro's
     class.pro-settings-page.php:18 only removes
     `.wpgmza-pro-feature` (the version without `-hide`). The
     class is just an inert marker in Novus, so elements that
     carry it (e.g. OpenRouteService Key field at
     settings-page.html.php:2051-2052) stay visible.
     A previous Atlas Major rule unconditionally set
     `display: none` here, which hid those fields whether or not
     Pro was active — breaking the OpenRouteService key entry
     for users on engines that need it (open-layers, leaflet,
     leaflet-zerocost, etc.). The `data-required-maps-engine`
     attribute on the row already gates engine-specific visibility
     via settings-page.js:327, no extra CSS hiding is needed. */


  /* ==========================================================
     8. UPSELL BLOCKS
     ========================================================== */

  /* Block container */
  .wpgmza-atlas-major .upsell-block {
    position: relative;
    padding: 16px 20px;
  }

  /* -------------------------------------------------------
     UPSELL CARDS (.upsell-block-card) — Concept C style
     Compact purple card: no image, icon + heading + description + CTA
     ------------------------------------------------------- */
  .wpgmza-atlas-major .wpgmza-editor .sidebar .upsell-block-card {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--am-pro-border);
    padding: 14px 16px;
    border-radius: var(--am-radius);
    background-color: var(--am-pro-soft);
    margin-bottom: 10px;
  }

  /* Hide images in upsell cards — Concept C uses icon-driven cards */
  .wpgmza-atlas-major .wpgmza-editor .sidebar .upsell-block-card .upsell-block-card-image {
    display: none;
  }

  .wpgmza-atlas-major .wpgmza-editor .sidebar .upsell-block-card .upsell-block-card-content {
    max-width: 100%;
    padding-left: 0;
    font-weight: 400;
    display: flex;
    flex-direction: column;
    font-size: 12px;
    color: var(--am-pro-text);
    opacity: 0.75;
    line-height: 1.55;
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .upsell-block-card .upsell-block-card-content .upsell-block-card-header .upsell-block-card-header-title {
    font-weight: 700;
    font-size: 13px;
    color: var(--am-pro-text);
    opacity: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
  }
  /* Lightning bolt icon before upsell heading — matches mockup SVG icon */
  .wpgmza-atlas-major .wpgmza-editor .sidebar .upsell-block-card .upsell-block-card-content .upsell-block-card-header:before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    background: var(--am-pro);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='13 2 3 14 12 14 11 22 21 10 12 10'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='13 2 3 14 12 14 11 22 21 10 12 10'/%3E%3C/svg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
    padding: 0;
    border-radius: 0;
    letter-spacing: normal;
    line-height: 1;
    text-transform: none;
    margin-right: 4px;
    vertical-align: middle;
  }

  .wpgmza-atlas-major .wpgmza-editor .sidebar .upsell-block-card .upsell-block-card-content .upsell-block-card-list ul {
    margin: 0 0 6px 0;
    padding: 0;
    list-style: none;
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .upsell-block-card .upsell-block-card-content .upsell-block-card-list ul li {
    padding-left: 0;
    position: relative;
    margin-bottom: 0;
    font-size: 12px;
    color: var(--am-pro-text);
    opacity: 0.75;
    line-height: 1.55;
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .upsell-block-card .upsell-block-card-content .upsell-block-card-list ul li:before {
    display: none;
  }

  .wpgmza-atlas-major .wpgmza-editor .sidebar .upsell-block-card .upsell-block-card-content .upsell-block-card-actions {
    margin-top: 10px;
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .upsell-block-card .upsell-block-card-content .wpgmza-button {
    background: var(--am-pro);
    color: white;
    font-weight: 600;
    font-size: 12px;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    border: none;
    padding: 7px 14px;
    border-radius: var(--am-radius-sm);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: all 0.12s var(--am-ease);
    text-decoration: none;
    box-shadow: none;
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .upsell-block-card .upsell-block-card-content .wpgmza-button:hover {
    background: var(--am-pro-hover);
    transform: translateY(-1px);
  }

  /* -------------------------------------------------------
     INLINE UPSELL NOTICES (.wpgmza-upsell) — Concept C style
     Simple: purple soft bg, border, lightning icon, text + link
     ------------------------------------------------------- */
  .wpgmza-atlas-major .wpgmza-editor .sidebar .wpgmza-upsell,
  .wpgmza-atlas-major .wpgmza-tabs-container .wpgmza-upsell {
    background: var(--am-pro-soft);
    border: 1px solid var(--am-pro-border);
    padding: 14px 16px;
    font-size: 12px;
    margin-top: 14px;
    margin-bottom: 2px;
    border-radius: var(--am-radius);
    color: #7c3aed;
    opacity: 0.75;
    line-height: 1.55;
    box-shadow: none;
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .wpgmza-upsell::before,
  .wpgmza-atlas-major .wpgmza-tabs-container .wpgmza-upsell::before {
    display: none;
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .wpgmza-upsell a,
  .wpgmza-atlas-major .wpgmza-tabs-container .wpgmza-upsell a {
    color: var(--am-pro-text);
    font-weight: 600;
    text-decoration: none;
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .wpgmza-upsell a:hover,
  .wpgmza-atlas-major .wpgmza-tabs-container .wpgmza-upsell a:hover {
    text-decoration: underline;
  }

  /* -------------------------------------------------------
     FEATURED UPSELL (.wpgmza-upsell-featured)
     Structured: icon + heading, description, purple CTA button
     Matches mockup .upsell exactly
     ------------------------------------------------------- */
  .wpgmza-atlas-major .wpgmza-editor .sidebar .wpgmza-upsell.wpgmza-upsell-featured {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 14px 16px;
    opacity: 1;
    background: var(--am-pro-soft);
    border: 1px solid var(--am-pro-border);
    color: #7c3aed;
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .wpgmza-upsell.wpgmza-upsell-featured::before {
    display: none;
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .wpgmza-upsell.wpgmza-upsell-featured .wpgmza-upsell-heading {
    font-size: 13px;
    font-weight: 700;
    color: var(--am-pro-text);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  /* Lightning bolt SVG icon before featured heading */
  .wpgmza-atlas-major .wpgmza-editor .sidebar .wpgmza-upsell.wpgmza-upsell-featured .wpgmza-upsell-heading::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    background: var(--am-pro);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='13 2 3 14 12 14 11 22 21 10 12 10'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='13 2 3 14 12 14 11 22 21 10 12 10'/%3E%3C/svg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .wpgmza-upsell.wpgmza-upsell-featured .wpgmza-upsell-content {
    font-size: 12px;
    color: #7c3aed;
    opacity: 0.75;
    line-height: 1.55;
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .wpgmza-upsell.wpgmza-upsell-featured .wpgmza-upsell-content a {
    color: #7c3aed;
    font-weight: 500;
  }
  /* CTA button — matches mockup .btn-pro exactly */
  .wpgmza-atlas-major .wpgmza-editor .sidebar .wpgmza-upsell.wpgmza-upsell-featured a.wpgmza-upsell-button,
  .wpgmza-atlas-major .wpgmza-tabs-container .wpgmza-upsell a.wpgmza-upsell-button {
    background: var(--am-pro);
    color: white;
    border: none;
    padding: 7px 14px;
    border-radius: var(--am-radius-sm);
    font-size: 12px;
    font-weight: 600;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    cursor: pointer;
    transition: all 0.12s var(--am-ease);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    box-shadow: none;
    margin-top: 10px;
    margin-left: 0;
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .wpgmza-upsell.wpgmza-upsell-featured a.wpgmza-upsell-button:hover,
  .wpgmza-atlas-major .wpgmza-tabs-container .wpgmza-upsell a.wpgmza-upsell-button:hover {
    background: var(--am-pro-hover);
    transform: translateY(-1px);
    text-decoration: none;
  }

  /* Pro upsell pill in sidebar nav */
  .wpgmza-atlas-major .wpgmza-editor .wpgmza-upsell-pro-pill {
    background: var(--am-pro-soft);
    border: 1px solid var(--am-pro-border);
    color: var(--am-pro-text);
    text-transform: uppercase;
    font-size: 9px;
    font-weight: 700;
    padding: 0 5px;
    border-radius: 3px;
    line-height: 16px;
    letter-spacing: 0.04em;
    position: absolute;
    right: 20px;
    top: 14px;
  }


  /* ==========================================================
     9. ACTION BAR
     ========================================================== */
  .wpgmza-atlas-major .wpgmza-editor .sidebar .action-bar {
    border-top: 1px solid var(--am-border);
    padding: 12px 16px;
    max-height: auto;
    overflow: visible;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--am-surface);
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 5;
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .action-bar .dynamic-action,
  .wpgmza-atlas-major .wpgmza-editor .sidebar .action-bar .static-action {
    animation: amSlideLeft 0.12s var(--am-ease) forwards;
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .action-bar .wpgmza-button {
    font-size: 12px;
    padding: 7px 16px;
  }

  /* Keep the action bar's right-side buttons (Preview + Save Map +
     optional dynamic-action) inline on one row regardless of sidebar
     width. The default `.wpgmza-row .wpgmza-col { flex: 1 }` gives the
     right column ~50% of the sidebar, which on narrower sidebars isn't
     wide enough for Preview + Save Map side-by-side — Save Map wraps
     below. Override to flex with nowrap so they stay on one line; if
     space runs out they'll visually overflow rather than wrap. */
  .wpgmza-atlas-major .wpgmza-editor .sidebar .action-bar .wpgmza-row .wpgmza-col.wpgmza-text-align-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px;
    white-space: nowrap;
  }


  /* ==========================================================
     9b. STYLING PAGE (Component Style Editor)
     ========================================================== */

  /* Styling editor uses row layout (no toolbar row above) */
  .wpgmza-atlas-major .wpgmza-styling-editor {
    flex-direction: row !important;
  }

  /* --- Sidebar overrides for styling page --- */
  .wpgmza-atlas-major .wpgmza-styling-editor .sidebar .settings {
    min-height: calc(100% - 140px);
  }
  .wpgmza-atlas-major .wpgmza-styling-editor .sidebar .settings fieldset legend {
    font-size: 12px;
    font-weight: 500;
    color: var(--am-text-2);
    white-space: nowrap;
    text-transform: none;
  }
  .wpgmza-atlas-major .wpgmza-styling-editor .sidebar .settings fieldset .wpgmza-col {
    max-width: none;
  }
  .wpgmza-atlas-major .wpgmza-styling-editor .sidebar .heading .wpgmza-row {
    font-size: 14px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: -0.01em;
  }

  /* --- Preview area (right side) --- */
  .wpgmza-atlas-major .wpgmza-styling-editor .wpgmza-styling-preview-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
  }

  /* Browser mockup frame */
  .wpgmza-atlas-major .wpgmza-styling-editor .preview-demo-browser-view {
    width: 1200px;
    max-width: 80%;
    border: 3px solid #fff;
    border-radius: var(--am-radius-lg);
    box-shadow: 0 4px 24px rgba(0,0,0,0.08);
    overflow: hidden;
  }
  .wpgmza-atlas-major .wpgmza-styling-editor .preview-demo-browser-view .browser-bar {
    display: flex;
    background: #fff;
    height: 30px;
    align-items: center;
    padding: 5px 15px;
  }
  .wpgmza-atlas-major .wpgmza-styling-editor .preview-demo-browser-view .browser-bar .controls-left {
    display: flex;
    gap: 5px;
  }
  .wpgmza-atlas-major .wpgmza-styling-editor .preview-demo-browser-view .browser-bar .browser-btn {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fbbf24;
  }
  .wpgmza-atlas-major .wpgmza-styling-editor .preview-demo-browser-view .browser-bar .browser-btn:first-child {
    background: #ef4444;
  }
  .wpgmza-atlas-major .wpgmza-styling-editor .preview-demo-browser-view .browser-bar .browser-btn:last-child {
    background: #22c55e;
  }
  .wpgmza-atlas-major .wpgmza-styling-editor .preview-demo-browser-view .browser-bar .controls-center {
    display: flex;
    flex-grow: 1;
    height: 100%;
    align-items: center;
  }
  .wpgmza-atlas-major .wpgmza-styling-editor .preview-demo-browser-view .browser-bar .controls-center .browser-url {
    background: var(--am-bg);
    height: 80%;
    width: 100%;
    margin: 0 10px;
    border-radius: 6px;
  }
  .wpgmza-atlas-major .wpgmza-styling-editor .preview-demo-browser-view .browser-bar .controls-right .browser-menu {
    display: flex;
    flex-direction: column;
    width: 30px;
    height: 30px;
    padding: 6px 5px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
  }
  .wpgmza-atlas-major .wpgmza-styling-editor .preview-demo-browser-view .browser-bar .controls-right .browser-menu .browser-menu-bar {
    background: var(--am-border);
    width: 100%;
    height: 2px;
    border-radius: 10px;
  }
  .wpgmza-atlas-major .wpgmza-styling-editor .preview-demo-browser-view .browser-bar .controls-right .browser-menu .browser-menu-bar:first-child {
    margin-bottom: auto;
  }
  .wpgmza-atlas-major .wpgmza-styling-editor .preview-demo-browser-view .browser-bar .controls-right .browser-menu .browser-menu-bar:last-child {
    margin-top: auto;
  }
  .wpgmza-atlas-major .wpgmza-styling-editor .preview-demo-browser-view .browser-content {
    height: 600px;
    max-height: 80%;
    position: relative;
    background: var(--am-bg);
  }

  /* Map preview inside browser */
  .wpgmza-atlas-major .wpgmza-styling-preview-wrap .wpgmza_map {
    width: 100% !important;
    height: 100% !important;
    --wpgmza--viewport-panels-max-width: 40%;
    --wpgmza--viewport-overlays-max-width: 40%;
  }
  .wpgmza-atlas-major .wpgmza-styling-preview-wrap .wpgmza-styling-map-preview {
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0;
    left: 0;
    background: #e5e3df url('https://maps.googleapis.com/maps/api/staticmap?center=39.5,-98.35&zoom=4&size=1200x600&key=') no-repeat center / cover;
  }

  /* Store locator in preview */
  .wpgmza-atlas-major .wpgmza-styling-editor .wpgmza-styling-preview-wrap .wpgmza-store-locator select {
    display: none;
  }

  /* Force inner stacks visible in styling preview (no .wpgmza-initialized) */
  .wpgmza-atlas-major .wpgmza-styling-preview-wrap .wpgmza_map .wpgmza-inner-stack {
    display: flex;
    pointer-events: none;
  }
  .wpgmza-atlas-major .wpgmza-styling-preview-wrap .wpgmza_map .wpgmza-inner-stack > * {
    pointer-events: all;
  }

  /* Style guide steps */
  .wpgmza-atlas-major .wpgmza-styling-editor .wpgmza-style-guide-step {
    display: none;
  }
  .wpgmza-atlas-major .wpgmza-styling-editor .wpgmza-style-guide-step.active {
    display: block;
    position: relative;
  }
  .wpgmza-atlas-major .wpgmza-styling-editor .wpgmza-style-guide-nav {
    display: flex;
    margin-top: 10px;
  }
  .wpgmza-atlas-major .wpgmza-styling-editor .wpgmza-style-guide-nav button {
    font-size: 12px;
    padding: 6px 14px;
    border: 1px solid var(--am-border);
    border-radius: var(--am-radius-sm);
    background: var(--am-surface);
    color: var(--am-text-2);
    cursor: pointer;
    font-family: var(--am-sans);
  }
  .wpgmza-atlas-major .wpgmza-styling-editor .wpgmza-style-guide-nav button:hover {
    border-color: var(--am-text-3);
    color: var(--am-text-1);
  }
  .wpgmza-atlas-major .wpgmza-styling-editor .wpgmza-style-guide-nav button:last-child {
    margin-left: auto;
  }

  /* Theme editor note inside preview */
  .wpgmza-atlas-major .wpgmza-styling-editor .theme-editor-note img {
    border-radius: var(--am-radius-sm);
    max-width: calc(100% - 10px);
  }
  .wpgmza-atlas-major .wpgmza-styling-editor .theme-editor-note p {
    margin-bottom: 0;
    font-size: 13px;
    color: inherit;
  }

  /* --- Unit input wrapper (Border Radius, Font Size, filter values)
     Grouped-input layout: [steppers] | [value input] [unit suffix].
     align-items: stretch keeps the stepper column and the value
     field full-height; the suffix toggle centres its own text via
     its own flex (see below) so the unit label sits vertically
     centred rather than top-aligned. --- */
  .wpgmza-atlas-major .wpgmza-styling-unit-input-wrapper .unit-input-inner-wrap {
    display: inline-flex;
    flex-direction: row;
    align-items: stretch;
    border: 1px solid var(--am-border);
    border-radius: var(--am-radius-sm);
    min-height: 34px;
    box-sizing: border-box;
    overflow: hidden;
  }
  .wpgmza-atlas-major .wpgmza-styling-unit-input-wrapper .unit-input-inner-wrap .unit-stepper-wrapper {
    width: 24px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
  }
  /* Stepper buttons: the inter-button divider is `border-bottom`
     only. The separator between the stepper column and the value
     field is drawn by the value field's `border-left` (see below)
     so there's a single 1px line, not a doubled one. */
  .wpgmza-atlas-major .wpgmza-styling-unit-input-wrapper .unit-input-inner-wrap .unit-stepper-wrapper .unit-stepper-button {
    width: 100%;
    height: 50%;
    border-bottom: 1px solid var(--am-border);
    opacity: 0.7;
    position: relative;
    transition: opacity 0.3s ease;
    cursor: pointer;
    background: none;
    padding: 0;
    box-shadow: none;
  }
  .wpgmza-atlas-major .wpgmza-styling-unit-input-wrapper .unit-input-inner-wrap .unit-stepper-wrapper .unit-stepper-button:last-child {
    border-bottom: none;
  }
  .wpgmza-atlas-major .wpgmza-styling-unit-input-wrapper .unit-input-inner-wrap .unit-stepper-wrapper .unit-stepper-button:hover {
    opacity: 1;
  }
  .wpgmza-atlas-major .wpgmza-styling-unit-input-wrapper .unit-input-inner-wrap .unit-stepper-wrapper .unit-stepper-button:before {
    content: "";
    display: block;
    width: 5px;
    height: 5px;
    border: 2px solid var(--am-text-1);
    border-left: none;
    border-bottom: none;
    position: absolute;
    left: 50%;
    top: 64%;
    transform: translate(-50%, -50%) rotate(-45deg);
    opacity: 0.4;
  }
  .wpgmza-atlas-major .wpgmza-styling-unit-input-wrapper .unit-input-inner-wrap .unit-stepper-wrapper .unit-stepper-button:last-child:before {
    left: 50%;
    top: 43%;
    transform: translate(-50%, -50%) rotate(135deg);
  }
  /* Value field — grouped-segment look: no border-radius, and a
     single `border-left` that acts as the divider between the
     stepper column and the value field (the steppers no longer
     carry a border-right). `!important` on the border bits defeats
     the base `.sidebar .settings input` styling (full 1px rounded
     border) that otherwise makes the field look like a standalone
     control rather than part of the group. */
  .wpgmza-atlas-major .wpgmza-styling-unit-input-wrapper .unit-input-inner-wrap .unit-value-input {
    /* `!important` throughout defeats the base settings-input rule
       `.wpgmza-editor .sidebar .settings input[type="text"]`
       (specificity 0,5,1, atlas-major.css ~L1444) which the
       styling editor inherits (its wrapper is
       `.wpgmza-editor .wpgmza-styling-editor`). Without these the
       base rule forces width: 100%, padding: 8px 12px, and a white
       fill onto the value field, ballooning it and breaking the
       grouped-input layout. */
    padding: 0 2px !important;
    border: none !important;
    border-left: 1px solid var(--am-border) !important;
    border-radius: 0 !important;
    width: 60px !important;
    margin-right: 2px;
    min-width: unset;
    text-align: right;
    background: transparent !important;
    max-height: 100%;
    min-height: unset;
    line-height: normal !important;
    font-size: 13px;
    font-family: var(--am-sans);
    box-shadow: none;
  }
  /* Unit suffix ("px" / "%" etc.) — centre vertically via its own
     flex instead of the old `padding-top: 4px` nudge, which left it
     top-aligned when the control grew taller. */
  .wpgmza-atlas-major .wpgmza-styling-unit-input-wrapper .unit-input-inner-wrap .unit-suffix-toggle {
    display: flex;
    align-items: center;
    opacity: 0.5;
    padding-left: 2px;
    padding-right: 6px;
    transition: opacity 0.2s ease;
    font-size: 12px;
    color: var(--am-text-3);
    cursor: pointer;
    user-select: none;
  }
  .wpgmza-atlas-major .wpgmza-styling-unit-input-wrapper .unit-input-inner-wrap .unit-suffix-toggle:hover {
    opacity: 0.8;
  }

  /* --- Reset buttons on color/unit inputs --- */
  .wpgmza-atlas-major .wpgmza-styling-editor .wpgmza-styling-unit-input-wrapper .wpgmza-styling-editor-reset-btn,
  .wpgmza-atlas-major .wpgmza-styling-editor .wpgmza-color-input-wrapper .wpgmza-styling-editor-reset-btn {
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    opacity: 0;
    transition: opacity 0.3s ease;
    cursor: pointer;
  }
  .wpgmza-atlas-major .wpgmza-styling-editor .wpgmza-color-input-wrapper .wpgmza-styling-editor-reset-btn {
    right: 65px;
  }
  /* Unit-input reset: sits to the LEFT and OUTSIDE the control,
     vertically centred. Previously `left: 5px` placed it on top of
     the up/down steppers (which start at the control's left edge).
     The inner-wrap is given a left margin (rule below) so the reset
     has its own gutter to live in. */
  .wpgmza-atlas-major .wpgmza-styling-editor .wpgmza-styling-unit-input-wrapper .wpgmza-styling-editor-reset-btn {
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }
  /* Reserve a left gutter for the reset button so the control no
     longer sits underneath it. Scoped to the reset-bearing
     wrapper so plain unit inputs (no reset) aren't indented. */
  .wpgmza-atlas-major .wpgmza-styling-editor .wpgmza-styling-unit-input-wrapper.wpgmza-styling-editor-contains-reset .unit-input-inner-wrap {
    margin-left: 30px;
  }
  .wpgmza-atlas-major .wpgmza-styling-editor .wpgmza-styling-editor-contains-reset {
    position: relative;
  }
  .wpgmza-atlas-major .wpgmza-styling-editor .wpgmza-styling-editor-contains-reset:hover .wpgmza-styling-editor-reset-btn {
    opacity: 0.4;
  }
  .wpgmza-atlas-major .wpgmza-styling-editor .wpgmza-styling-unit-input-wrapper .wpgmza-styling-editor-reset-btn:hover,
  .wpgmza-atlas-major .wpgmza-styling-editor .wpgmza-color-input-wrapper .wpgmza-styling-editor-reset-btn:hover {
    opacity: 1;
  }
  .wpgmza-atlas-major .wpgmza-styling-editor .wpgmza-styling-unit-input-wrapper .wpgmza-styling-editor-reset-btn:before,
  .wpgmza-atlas-major .wpgmza-styling-editor .wpgmza-color-input-wrapper .wpgmza-styling-editor-reset-btn:before {
    content: "";
    display: block;
    width: 40%;
    height: 40%;
    border: 2px solid var(--am-text-3);
    border-radius: 25px;
    border-left-color: transparent;
  }
  .wpgmza-atlas-major .wpgmza-styling-editor .wpgmza-styling-unit-input-wrapper .wpgmza-styling-editor-reset-btn:after,
  .wpgmza-atlas-major .wpgmza-styling-editor .wpgmza-color-input-wrapper .wpgmza-styling-editor-reset-btn:after {
    position: absolute;
    content: "";
    display: block;
    width: 0;
    height: 0;
    border: 3px solid var(--am-text-3);
    border-top-color: transparent;
    border-right-color: transparent;
    top: 6px;
    left: 5px;
  }
  .wpgmza-atlas-major .wpgmza-styling-editor .wpgmza-color-input-wrapper .wpgmza-color-preview {
    margin-right: 0 !important;
  }

  /* Color picker positioning for styling editor — REMOVED override.
     The prior override forced `wrapper: position: static` +
     `picker: position: fixed; right: auto` to "escape overflow
     clipping", but `position: fixed` strips the swatch-anchored
     behaviour entirely: the picker pops to the viewport instead
     of growing leftward from the swatch.
     The base color-picker rules further down (line ~8840+) mirror
     Novus exactly (wrapper `position: relative`, picker
     `position: absolute; right: 0; width: 200px`) and produce the
     correct anchored layout. Atlas Novus uses the same
     overflow:hidden constraints on .grouping / .settings and the
     picker works there, so no escape hack is required here. */

  /* Editor sidebar color preview — rectangular swatch */
  .wpgmza-atlas-major .wpgmza-editor .grouping .settings .wpgmza-color-input-wrapper .wpgmza-color-preview,
  .wpgmza-atlas-major .wpgmza-feature-panel .wpgmza-color-input-wrapper .wpgmza-color-preview {
    border-radius: 4px;
    width: 45px;
    height: 28px;
    margin-right: 30px;
  }
  .wpgmza-atlas-major .wpgmza-editor .grouping .settings .wpgmza-color-input-wrapper .wpgmza-color-preview:hover,
  .wpgmza-atlas-major .wpgmza-feature-panel .wpgmza-color-input-wrapper .wpgmza-color-preview:hover {
    transform: scale(1.01);
  }

  /* --- Backdrop filter section --- */
  .wpgmza-atlas-major .wpgmza-styling-editor .styling-backdrop-filter-row {
    flex-direction: column !important;
  }

  /* Backdrop / CSS filter wrappers */
  .wpgmza-atlas-major .wpgmza-styling-backdrop-filter-input-wrapper,
  .wpgmza-atlas-major .wpgmza-styling-backdrop-filter-input-wrapper .backdrop-filter-item-wrap,
  .wpgmza-atlas-major .wpgmza-css-filter-input-wrapper .css-filter-item-wrap {
    display: flex;
    flex-direction: column;
  }

  /* Filter item cards (blur, brightness, contrast) */
  .wpgmza-atlas-major .wpgmza-styling-backdrop-filter-input-wrapper .backdrop-filter-item-wrap,
  .wpgmza-atlas-major .wpgmza-css-filter-input-wrapper .css-filter-item-wrap {
    padding: 5px 10px;
    background: var(--am-bg);
    border-radius: var(--am-radius-sm);
    border: 1px solid var(--am-border);
    margin-bottom: 10px;
  }

  /* Toggle label row */
  .wpgmza-atlas-major .wpgmza-styling-backdrop-filter-input-wrapper .backdrop-filter-item-wrap .backdrop-filter-toggle-wrap,
  .wpgmza-atlas-major .wpgmza-css-filter-input-wrapper .css-filter-item-wrap .css-filter-toggle-wrap {
    width: 100%;
    text-align: left;
    padding: 5px;
    box-sizing: border-box;
  }
  .wpgmza-atlas-major .wpgmza-styling-backdrop-filter-input-wrapper .backdrop-filter-item-wrap .backdrop-filter-toggle-wrap label,
  .wpgmza-atlas-major .wpgmza-css-filter-input-wrapper .css-filter-item-wrap .css-filter-toggle-wrap label {
    text-transform: capitalize;
    display: block;
    font-size: 13px;
    font-family: var(--am-sans);
    color: var(--am-text-1);
    cursor: pointer;
  }

  /* Hidden native checkbox in filter items */
  .wpgmza-atlas-major .wpgmza-styling-backdrop-filter-input-wrapper .backdrop-filter-item-wrap input,
  .wpgmza-atlas-major .wpgmza-css-filter-input-wrapper .css-filter-item-wrap input {
    display: none;
  }

  /* Control area hidden when not enabled */
  .wpgmza-atlas-major .wpgmza-styling-backdrop-filter-input-wrapper .backdrop-filter-item-wrap:not(.enabled) .backdrop-filter-control-wrap,
  .wpgmza-atlas-major .wpgmza-css-filter-input-wrapper .css-filter-item-wrap:not(.enabled) .css-filter-control-wrap {
    display: none;
  }

  /* Control wrap (slider + value) */
  .wpgmza-atlas-major .wpgmza-styling-backdrop-filter-input-wrapper .backdrop-filter-control-wrap,
  .wpgmza-atlas-major .wpgmza-css-filter-input-wrapper .css-filter-control-wrap {
    box-sizing: border-box;
    max-width: 100%;
    position: relative;
    padding-top: 5px;
  }
  .wpgmza-atlas-major .wpgmza-styling-backdrop-filter-input-wrapper .backdrop-filter-control-wrap small,
  .wpgmza-atlas-major .wpgmza-css-filter-input-wrapper .css-filter-control-wrap small {
    position: absolute;
    top: -22px;
    right: 0;
    font-weight: 500;
    font-size: 11px;
    color: var(--am-text-3);
  }

  /* Slider handle override */
  .wpgmza-atlas-major .wpgmza-styling-backdrop-filter-input-wrapper .backdrop-filter-control-wrap .ui-slider .ui-slider-handle,
  .wpgmza-atlas-major .wpgmza-css-filter-input-wrapper .css-filter-control-wrap .ui-slider .ui-slider-handle {
    transform: translateX(-50%) !important;
  }

  /* Disabled state */
  .wpgmza-atlas-major .wpgmza-styling-backdrop-filter-input-wrapper .backdrop-filter-item-wrap:not(.enabled),
  .wpgmza-atlas-major .wpgmza-css-filter-input-wrapper .css-filter-item-wrap:not(.enabled) {
    opacity: 0.6;
    transition: opacity 0.3s ease;
  }
  .wpgmza-atlas-major .wpgmza-styling-backdrop-filter-input-wrapper .backdrop-filter-item-wrap:not(.enabled):hover,
  .wpgmza-atlas-major .wpgmza-css-filter-input-wrapper .css-filter-item-wrap:not(.enabled):hover {
    opacity: 0.8;
  }
  .wpgmza-atlas-major .wpgmza-styling-backdrop-filter-input-wrapper .backdrop-filter-item-wrap.enabled,
  .wpgmza-atlas-major .wpgmza-css-filter-input-wrapper .css-filter-item-wrap.enabled {
    opacity: 1;
  }

  /* "(Inactive)" label on disabled items */
  .wpgmza-atlas-major .wpgmza-styling-backdrop-filter-input-wrapper .backdrop-filter-item-wrap:not(.enabled) .backdrop-filter-toggle-wrap label,
  .wpgmza-atlas-major .wpgmza-css-filter-input-wrapper .css-filter-item-wrap:not(.enabled) .css-filter-toggle-wrap label {
    position: relative;
  }
  .wpgmza-atlas-major .wpgmza-styling-backdrop-filter-input-wrapper .backdrop-filter-item-wrap:not(.enabled) .backdrop-filter-toggle-wrap label:after,
  .wpgmza-atlas-major .wpgmza-css-filter-input-wrapper .css-filter-item-wrap:not(.enabled) .css-filter-toggle-wrap label:after {
    content: "(Inactive)";
    margin-left: 5px;
    font-size: 0.8em;
    position: absolute;
    right: 0;
    top: 0;
    color: var(--am-text-3);
  }

  /* --- Styling action bar (preset select + save) --- */
  .wpgmza-atlas-major .wpgmza-styling-editor .action-bar .wpgmza-styling-preset-select {
    padding: 6px 10px;
    border: 1px solid var(--am-border);
    border-radius: var(--am-radius-sm);
    font-size: 12px;
    font-family: var(--am-sans);
    background: var(--am-surface);
    color: var(--am-text-1);
  }
  .wpgmza-atlas-major .wpgmza-styling-editor .action-bar .wpgmza-col {
    max-width: none;
  }

  /* ==========================================================
     9c. INSIGHTS PAGE
     ==========================================================
     Two problems being solved in this block:

     1. LAYOUT — the insights template puts .sidebar + .content
        as direct children of .wpgmza-editor with no row wrapper,
        just like the styling editor does. Without flex-direction:
        row, the parent's column layout (set for the map editor's
        toolbar/tabs/main stack) causes sidebar + content to
        stack vertically and content collapses to zero height.
        Mirror the styling-editor override.

     2. STATE-DRIVEN VISIBILITY — InsightsPage controller in
        insights-pages.js toggles `.empty`, `.busy` on
        .insight-content, and `.selected` on .insight-navigation
        items. Atlas Novus has full CSS for those states (the
        insights-empty placeholder is display:none by default
        and only shown when `.empty` is set; busy state shows a
        pulsing skeleton; selected nav highlights with the brand
        colour). None of those rules existed in Atlas Major, so
        the placeholder rendered ON TOP of the data cards
        permanently and the JS appeared to do nothing. Ported
        from atlas-novus/wp-google-maps-admin.css ~L6013-6066,
        rewritten to use --am-* tokens. */

  .wpgmza-atlas-major .wpgmza-insight-viewer {
    flex-direction: row !important;
  }

  /* Extra `.content` in the selector makes specificity 0,0,4,0
     so this wins over the later-in-file
     `.wpgmza-atlas-major .wpgmza-editor .content { overflow:
     hidden }` map-canvas rule (specificity 0,0,3,0) that
     would otherwise prevent the insight content from
     scrolling and hide everything below the chart. */
  .wpgmza-atlas-major .wpgmza-insight-viewer .content.insight-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: 100%;
    overflow-y: auto;
    box-sizing: border-box;
    background: var(--am-bg);
  }

  /* Chart canvas — Chart.js's default `maintainAspectRatio:
     true` would size this to half the grid width (= ~850px
     tall on a wide screen), monopolising the viewport and
     pushing the Report section past the scroll bottom. The
     companion JS change in insights-pages.js disables the
     aspect-ratio lock under Atlas Major and lets the canvas
     fill the bounded height set here. */
  .wpgmza-atlas-major .wpgmza-insight-viewer canvas[data-chart] {
    max-height: 280px;
    height: 280px;
    width: 100% !important;
  }

  /* Empty placeholder — hidden by default, visible only when
     the controller has marked the view as empty (no rows
     returned for the selected insight type). */
  .wpgmza-atlas-major .wpgmza-insight-viewer .insight-content .insights-empty {
    display: none;
  }

  .wpgmza-atlas-major .wpgmza-insight-viewer .insight-content.empty > *:not(.insights-empty) {
    display: none;
  }

  .wpgmza-atlas-major .wpgmza-insight-viewer .insight-content.empty .insights-empty {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    justify-content: center;
    background: var(--am-surface);
    padding: 24px;
    border-radius: var(--am-radius);
    color: var(--am-text-2);
  }

  .wpgmza-atlas-major .wpgmza-insight-viewer .insight-content.empty .insights-empty > div:first-child {
    font-weight: 600;
    font-size: 14px;
    color: var(--am-text-1);
  }

  /* Busy state — pulsing skeleton over the data slots while
     the AJAX response is in flight. The keyframes are inlined
     because Atlas Major doesn't share the wpgmzaPulse animation
     defined for Atlas Novus. */
  @keyframes amInsightPulse {
    0%   { opacity: 1; }
    50%  { opacity: 0.4; }
    100% { opacity: 1; }
  }

  .wpgmza-atlas-major .wpgmza-insight-viewer .insight-content.busy [data-metric],
  .wpgmza-atlas-major .wpgmza-insight-viewer .insight-content.busy [data-metric-source],
  .wpgmza-atlas-major .wpgmza-insight-viewer .insight-content.busy [data-list],
  .wpgmza-atlas-major .wpgmza-insight-viewer .insight-content.busy [data-chart] {
    background: var(--am-border);
    color: var(--am-border);
    border-radius: var(--am-radius-sm);
    pointer-events: none;
    animation: amInsightPulse 1.2s ease-in-out infinite;
  }

  /* Selected nav item highlight */
  .wpgmza-atlas-major .wpgmza-insight-viewer .grouping .navigation .item.insight-navigation.selected,
  .wpgmza-atlas-major .wpgmza-insight-viewer .grouping .navigation .item.insight-navigation.selected:hover {
    background: var(--am-accent);
    color: #ffffff;
    font-weight: 600;
  }

  /* Typography inside the metric cards */
  .wpgmza-atlas-major .wpgmza-insight-viewer .insight-metric-heading {
    font-weight: 500;
    font-size: 13px;
    color: var(--am-text-2);
    margin-bottom: 10px;
  }

  .wpgmza-atlas-major .wpgmza-insight-viewer [data-metric] {
    font-size: 20px;
    font-weight: 600;
    color: var(--am-text-1);
    padding-bottom: 8px;
  }

  .wpgmza-atlas-major .wpgmza-insight-viewer [data-metric].insight-metric-numeric {
    font-size: 36px;
    font-weight: 700;
    padding-top: 4px;
    line-height: 1.1;
  }

  .wpgmza-atlas-major .wpgmza-insight-viewer [data-metric-source] {
    font-size: 11px;
    color: var(--am-text-3);
  }

  /* Report list (data rows) */
  .wpgmza-atlas-major .wpgmza-insight-viewer .insight-list {
    border: 1px solid var(--am-border);
    border-radius: var(--am-radius-sm);
    overflow: hidden;
  }

  .wpgmza-atlas-major .wpgmza-insight-viewer .insight-list > * > * {
    padding: 8px 12px;
  }

  .wpgmza-atlas-major .wpgmza-insight-viewer .insight-list [data-list-template] {
    font-weight: 600;
    font-size: 12px;
    color: var(--am-text-2);
    background: var(--am-surface);
  }

  .wpgmza-atlas-major .wpgmza-insight-viewer .insight-list [data-list-item]:not(:last-child) {
    border-bottom: 1px solid var(--am-border);
  }

  /* ==========================================================
     10. MAP CANVAS / CONTENT AREA
     ========================================================== */
  .wpgmza-atlas-major .wpgmza-editor .content {
    flex: 1;
    max-width: none;
    z-index: 1;
    background: var(--am-bg);
    position: relative;
    overflow: hidden;
  }

  .wpgmza-atlas-major .wpgmza-editor .map-container-wrap {
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
  }

  /* Overlay notices on the map area (e.g. "Please enter a Google Maps
     API key" warning). Centered both horizontally and vertically inside
     the map-container-wrap, presented as a card with shadow — sits
     above the live preview frame chrome so it's clearly the active
     thing the user needs to address. Previously this rule used
     `width:50%; margin:10px 25%` which left it pinned to the top of
     the container, floating disjointedly above the browser-mockup
     frame.

     IMPORTANT: explicitly sets `display: block` to override the
     `.wpgmza-card.notice { display: flex }` rule above (line ~4120).
     The flex rule treats each child node as a flex item, which works
     for notices whose text is wrapped in a single inner element — but
     the .wpgmza-missing-key-notice <p> has bare text nodes + inline
     <a> tags as children, and flex chopped them into ugly side-by-side
     columns ("Please ensure you" / "enter a..." / "to continue..."
     each as its own column). Block restores normal text flow. The
     warning icon (::before) is absolutely positioned inside the notice
     so it doesn't break the flow. */
  .wpgmza-atlas-major .wpgmza-editor .map-container-wrap .notice {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;
    display: block;
    width: auto;
    max-width: 520px;
    margin: 0;
    padding: 18px 22px 18px 52px;   /* extra left padding for icon */
    background: var(--am-surface);
    border-radius: var(--am-radius);
    box-shadow: 0 12px 32px rgba(0,0,0,0.18);
  }
  .wpgmza-atlas-major .wpgmza-editor .map-container-wrap .notice::before {
    position: absolute;
    top: 18px;
    left: 22px;
    margin-top: 0;  /* override the 1px top offset from the flex variant */
  }

  /* ==========================================================
     10b. LIVE PREVIEW — browser mockup + component preview
     ========================================================== */

  /* Browser mockup frame */
  .wpgmza-atlas-major .am-preview-frame {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-left: 1px solid var(--am-border);
    background: var(--am-bg);
  }

  /* Browser top bar */
  .wpgmza-atlas-major .am-preview-browser-bar {
    display: flex;
    align-items: center;
    height: 28px;
    padding: 0 12px;
    background: #fff;
    border-bottom: 1px solid var(--am-border);
    flex-shrink: 0;
    gap: 8px;
  }
  .wpgmza-atlas-major .am-preview-dots {
    display: flex;
    gap: 5px;
  }
  .wpgmza-atlas-major .am-preview-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e5e5e4;
  }
  .wpgmza-atlas-major .am-preview-dots span:first-child { background: #ef4444; }
  .wpgmza-atlas-major .am-preview-dots span:nth-child(2) { background: #fbbf24; }
  .wpgmza-atlas-major .am-preview-dots span:last-child { background: #22c55e; }

  .wpgmza-atlas-major .am-preview-url-bar {
    flex: 1;
    height: 16px;
    background: var(--am-bg);
    border-radius: 4px;
  }

  .wpgmza-atlas-major .am-preview-toggle-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
  }
  .wpgmza-atlas-major .am-preview-toggle-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--am-text-3);
    font-family: var(--am-sans);
    white-space: nowrap;
  }
  .wpgmza-atlas-major .am-preview-toggle-switch {
    transform: scale(0.7);
    transform-origin: right center;
  }

  /* Preview OFF — map fills the entire browser frame, mockup site hidden */
  .wpgmza-atlas-major .am-preview-frame.am-preview-off .am-preview-page {
    background: none;
    padding: 0;
    overflow: hidden;
  }
  .wpgmza-atlas-major .am-preview-frame.am-preview-off .am-preview-page-inner {
    max-width: none;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    height: 100%;
  }
  .wpgmza-atlas-major .am-preview-frame.am-preview-off .am-mock-header,
  .wpgmza-atlas-major .am-preview-frame.am-preview-off .am-mock-footer,
  .wpgmza-atlas-major .am-preview-frame.am-preview-off .am-mock-page-title,
  .wpgmza-atlas-major .am-preview-frame.am-preview-off .am-preview-slot {
    display: none !important;
  }
  .wpgmza-atlas-major .am-preview-frame.am-preview-off .am-mock-content {
    max-width: none;
    padding: 0;
    height: 100%;
    /* Establish a positioning context for the floated title row below. */
    position: relative;
  }
  .wpgmza-atlas-major .am-preview-frame.am-preview-off .map_wrapper {
    min-height: unset;
    height: 100%;
  }
  /* Float the title row over the map top-center when preview is off,
     so it doesn't add layout space above the map. The h1 inside is
     hidden by the rule above; the row's remaining visible child is
     the "Remember to save your map!" pill, which centers naturally. */
  .wpgmza-atlas-major .am-preview-frame.am-preview-off .am-mock-title-row {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    margin: 0;
    pointer-events: none; /* don't block map drag — pill stays visible */
  }
  /* Pill inside re-enables pointer events so the user can still interact. */
  .wpgmza-atlas-major .am-preview-frame.am-preview-off .am-mock-title-row #wpgmaps_save_reminder,
  .wpgmza-atlas-major .am-preview-frame.am-preview-off .am-mock-title-row .am-frontend-only-notice {
    pointer-events: auto;
    margin: 0;
  }
  /* Quick-actions ("+" floater) needs to move below Leaflet's zoom
     controls when the preview header isn't pushing the map down.
     Leaflet zoom occupies roughly top:10–85px on default placement,
     so 130px clears it with breathing room. OL's V10 control stack
     is taller (rotation reset + zoom = ~120px), so push it further. */
  .wpgmza-atlas-major .am-preview-frame.am-preview-off .quick-actions {
    top: 130px;
  }
  .wpgmza-atlas-major[data-map-engine="open-layers-latest"] .am-preview-frame.am-preview-off .quick-actions,
  .wpgmza-atlas-major [data-map-engine="open-layers-latest"] .am-preview-frame.am-preview-off .quick-actions {
    top: 165px;
  }

  /* Mockup page inside the browser frame — scrollable viewport */
  .wpgmza-atlas-major .am-preview-page {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    background: #e8e8e8;
    scrollbar-width: thin;
  }
  .wpgmza-atlas-major .am-preview-page::-webkit-scrollbar { width: 6px; }
  .wpgmza-atlas-major .am-preview-page::-webkit-scrollbar-track { background: transparent; }
  .wpgmza-atlas-major .am-preview-page::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }

  .wpgmza-atlas-major .am-preview-page-inner {
    width: 100%;
    max-width: 1000px;
    margin: 30px auto;
    margin-left: max(70px, calc((100% - 1000px) / 2));
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    min-height: min-content;
  }

  /* Mockup site header */
  .wpgmza-atlas-major .am-mock-header {
    border-bottom: 1px solid #e5e5e5;
    background: #fff;
  }
  .wpgmza-atlas-major .am-mock-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    max-width: 960px;
    margin: 0 auto;
  }
  .wpgmza-atlas-major .am-mock-logo {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .wpgmza-atlas-major .am-mock-logo-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: #f1f1f1;
  }
  .wpgmza-atlas-major .am-mock-site-name {
    width: 80px;
    height: 10px;
    border-radius: 3px;
    background: #f1f1f1;
  }
  .wpgmza-atlas-major .am-mock-tagline {
    width: 110px;
    height: 6px;
    border-radius: 3px;
    background: #f1f1f1;
    margin-top: 5px;
  }
  .wpgmza-atlas-major .am-mock-nav {
    display: flex;
    gap: 16px;
  }
  .wpgmza-atlas-major .am-mock-nav span {
    width: 40px;
    height: 8px;
    border-radius: 3px;
    background: #f1f1f1;
  }

  /* Mockup page content area */
  .wpgmza-atlas-major .am-mock-content {
    max-width: 960px;
    margin: 0 auto;
    padding: 24px 24px 32px;
    width: 100%;
    box-sizing: border-box;
  }
  .wpgmza-atlas-major .am-mock-page-title {
    font-family: var(--am-sans) !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #333 !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    border: none !important;
    letter-spacing: -0.02em;
  }

  /* Mockup site footer */
  .wpgmza-atlas-major .am-mock-footer {
    border-top: 1px solid #e5e5e5;
    background: #fafafa;
    padding: 20px 24px 14px;
    margin-top: auto;
  }
  .wpgmza-atlas-major .am-mock-footer-inner {
    display: flex;
    gap: 24px;
    max-width: 960px;
    margin: 0 auto 14px;
  }
  .wpgmza-atlas-major .am-mock-footer-block {
    flex: 1;
    height: 40px;
    background: #eaeaea;
    border-radius: 4px;
  }
  .wpgmza-atlas-major .am-mock-footer-copy {
    max-width: 960px;
    margin: 0 auto;
    height: 6px;
    width: 140px;
    background: #ddd;
    border-radius: 3px;
  }

  /* The map wrapper fills available space inside the inner page */
  .wpgmza-atlas-major .am-preview-page-inner .map_wrapper {
    flex: 1;
    min-height: 400px;
    position: relative;
  }
  .wpgmza-atlas-major .am-preview-page-inner .map_wrapper #wpgmza-map-container {
    width: 100%;
    height: 100%;
  }
  .wpgmza-atlas-major .am-preview-page-inner .map_wrapper .wpgmza_map {
    width: 100% !important;
    border:2px solid #eee;
  }

  /* Side panels (.wpgmza-inner-stack.left/.right) must sit ABOVE
     the map's native zoom controls (+/-) so the panel covers them
     when expanded — matches the frontend behaviour. The frontend
     leaflet.css does this with `z-index: 10001` but is engine-
     gated (`data-maps-engine^="leaflet"`). In live preview the
     map can be any engine, and the rule sometimes doesn't catch
     the inner-stack created on-the-fly by the LP JS, so the
     zoom controls render IN FRONT of the panel. This unscoped
     rule (any engine inside the LP frame) restores the
     frontend stacking order. Top/bottom/center stacks are
     unaffected — only LEFT/RIGHT side panels overlap the
     vertical-edge zoom controls. */
  .wpgmza-atlas-major .am-preview-frame .wpgmza_map .wpgmza-inner-stack.left,
  .wpgmza-atlas-major .am-preview-frame .wpgmza_map .wpgmza-inner-stack.right {
    z-index: 10001;
  }

  /* Clip the panel's off-screen slide-in position in Live Preview.
     The panel uses `transform: translateX(-100%)` (left) /
     `translateX(100%)` (right) so it's parked off-screen, then
     `translateX(0)` slides it into view. On the frontend the map
     usually fills its column so the parked panel lands behind
     surrounding content. In Live Preview the map sits inside the
     browser-mockup chrome with white space on its left/right —
     the parked panel becomes visible in that white space (you
     see the grouping-handle and panel edge to the left of the
     map). Clipping overflow on the map element keeps the parked
     panel hidden until it's actually slid in.
     Frontend OpenLayers already clips via Pro components.css
     line 36-39 (`.wpgmza_map[data-maps-engine="open-layers..."]`).
     This rule extends the same behaviour to ALL engines, but
     only inside the Live Preview frame so frontend rendering is
     untouched. */
  .wpgmza-atlas-major .am-preview-frame .wpgmza_map {
    overflow: hidden;
  }

  /* OpenLayers and Leaflet-family engines — drop the LEFT-side
     grouping-handle one `--wpgmza-component-native-control-height`
     step lower so it clears the +/- zoom controls that these
     engines park at top-left.
     The frontend Pro components.css (lines 64-73) does this via
     `.wpgmza_map[data-maps-engine="..."]` covering open-layers,
     open-layers-latest, leaflet, leaflet-azure, leaflet-stadia,
     leaflet-maptiler, leaflet-zerocost, leaflet-locationiq.
     In Atlas Major live preview the `.wpgmza_map` element doesn't
     reliably carry `data-maps-engine` at the time the rule needs
     to match (engine attribute is set by class.shortcodes.php
     which isn't on the edit-page render path). The
     `data-map-engine` attribute on `.wpgmza-editor` (set by
     class.map-edit-page.php line 87) is reliable, so we use that
     ancestor selector here. Same engine list as the frontend rule
     to match parity — Google Maps is the only major engine that
     places its +/- elsewhere and doesn't need this lift. */
  .wpgmza-atlas-major [data-map-engine="open-layers"] .am-preview-frame .wpgmza_map .wpgmza-inner-stack.left .grouping ~ .grouping-handle,
  .wpgmza-atlas-major [data-map-engine="open-layers-latest"] .am-preview-frame .wpgmza_map .wpgmza-inner-stack.left .grouping ~ .grouping-handle,
  .wpgmza-atlas-major [data-map-engine="leaflet"] .am-preview-frame .wpgmza_map .wpgmza-inner-stack.left .grouping ~ .grouping-handle,
  .wpgmza-atlas-major [data-map-engine="leaflet-azure"] .am-preview-frame .wpgmza_map .wpgmza-inner-stack.left .grouping ~ .grouping-handle,
  .wpgmza-atlas-major [data-map-engine="leaflet-stadia"] .am-preview-frame .wpgmza_map .wpgmza-inner-stack.left .grouping ~ .grouping-handle,
  .wpgmza-atlas-major [data-map-engine="leaflet-maptiler"] .am-preview-frame .wpgmza_map .wpgmza-inner-stack.left .grouping ~ .grouping-handle,
  .wpgmza-atlas-major [data-map-engine="leaflet-zerocost"] .am-preview-frame .wpgmza_map .wpgmza-inner-stack.left .grouping ~ .grouping-handle,
  .wpgmza-atlas-major [data-map-engine="leaflet-locationiq"] .am-preview-frame .wpgmza_map .wpgmza-inner-stack.left .grouping ~ .grouping-handle {
    top: calc(var(--wpgmza-component-native-control-height) * 3);
  }

  /* Above/Below component slots — hidden when empty, shown by JS */
  .wpgmza-atlas-major .am-preview-slot {
    display: none;
  }
  .wpgmza-atlas-major .am-preview-slot:not(:empty) {
    display: block;
  }

  /* Viewport variable fallbacks (InternalViewport skipped in admin) */
  .wpgmza-atlas-major .wpgmza-editor .wpgmza_map {
    --wpgmza--viewport-overlays-max-width: 50%;
    --wpgmza--viewport-panels-max-width: 35%;
  }

  /* Preview inner stacks inside the map */
  .wpgmza-atlas-major .wpgmza-editor .wpgmza-live-preview-stack {
    pointer-events: none;
    z-index: 1;
  }

  /* Preview components — fully interactive, styled by components.css
     since they live inside .wpgmza_map .wpgmza-inner-stack or
     .wpgmza-standalone-component. No overrides needed. */
  .wpgmza-atlas-major .wpgmza-live-preview-component {
    pointer-events: all;
  }

  /* Quick actions floating buttons */
  .wpgmza-atlas-major .quick-actions {
    position: absolute;
    top: 60px;
    left: 10px;
    z-index: 10;
  }
  .wpgmza-atlas-major [data-map-engine="leaflet"] .quick-actions,
  .wpgmza-atlas-major [data-map-engine="leaflet-azure"] .quick-actions,
  .wpgmza-atlas-major [data-map-engine="leaflet-stadia"] .quick-actions,
  .wpgmza-atlas-major [data-map-engine="leaflet-maptiler"] .quick-actions,
  .wpgmza-atlas-major [data-map-engine="leaflet-locationiq"] .quick-actions,
  .wpgmza-atlas-major [data-map-engine="leaflet-zerocost"] .quick-actions,
  .wpgmza-atlas-major [data-map-engine="open-layers-latest"] .quick-actions {
    top: 110px;
    left: 10px;
  }

  /* Hide the checkbox */
  .wpgmza-atlas-major .quick-actions input {
    display: none;
  }

  /* Toggle button (the + / x icon) */
  .wpgmza-atlas-major .quick-actions .icon {
    width: 40px;
    height: 40px;
    display: block;
    background: var(--am-surface);
    border-radius: 50%;
    font-size: 22px;
    line-height: 38px;
    text-align: center;
    position: relative;
    border: 1px solid var(--am-border);
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    transition: all 0.12s var(--am-ease);
    color: var(--am-text-2);
  }
  .wpgmza-atlas-major .quick-actions .icon:hover {
    cursor: pointer;
    background: var(--am-bg);
    border-color: var(--am-text-3);
  }

  /* Toggle button rotation */
  .wpgmza-atlas-major .quick-actions input + .icon {
    z-index: 2;
    transform: rotate(135deg);
    transition: transform 0.2s var(--am-ease);
  }
  .wpgmza-atlas-major .quick-actions input:checked + .icon {
    transform: rotate(0deg);
  }

  /* Actions container — holds the dataset icons */
  .wpgmza-atlas-major .quick-actions .actions {
    min-height: 410px;
    position: absolute;
    top: 0;
    left: 0;
    overflow-y: hidden;
    overflow-x: visible;
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
  }

  /* Individual action icons — hidden by default, animated in */
  .wpgmza-atlas-major .quick-actions .actions .icon {
    width: 40px;
    height: 40px;
    padding: 10px;
    box-sizing: border-box;
    transform: translateY(-200px);
    opacity: 0;
    transition: transform 0.5s ease, opacity 0.6s ease;
  }

  /* Sub-icon — the actual image inside each action button */
  .wpgmza-atlas-major .quick-actions .actions .icon .sub-icon {
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  /* Show action icons when checkbox is checked */
  .wpgmza-atlas-major .quick-actions input:checked ~ .actions .icon {
    transform: translateY(50px);
    opacity: 1;
    margin-bottom: 5px;
  }


  /* ==========================================================
     11. NOTICES & CARDS
     ========================================================== */

  /* Base card */
  .wpgmza-atlas-major .wpgmza-card {
    background: var(--am-surface);
    padding: 12px 16px;
    border: 1px solid var(--am-border);
    border-radius: var(--am-radius);
  }

  /* Zero-horizontal-padding utility for card-wrapped surfaces that
     need their inner content (typically a DataTable) to stretch
     edge-to-edge. Scoped under `.wpgmza-atlas-major` so the
     selector specificity matches `.wpgmza-atlas-major .wpgmza-card`
     above (both 0,2,0); placed immediately AFTER that rule so
     source-order wins the cascade for elements carrying both
     classes. Vertical card padding is preserved.
     Mirrors the spirit of the existing `.wpgmza-pad-x-10` /
     `.wpgmza-pad-x-20` utilities in common.css — we just need the
     0-variant scoped tight enough to defeat the card padding. */
  .wpgmza-atlas-major .wpgmza-pad-x-0 {
    padding-left: 0;
    padding-right: 0;
  }

  /* Empty-state breathing room for datatable containers that
     collapsed to a single `<p>No <items> found...</p>` (e.g.
     the categories list when the user has no categories yet —
     see html/category-table-empty.html.php in the Pro plugin,
     which loadPHPFile wraps in a `<p>` when injected). Without
     this, the text sits flush against the card's left edge
     because `.wpgmza-pad-x-0` removed the card's 16px
     horizontal padding. Scoped to direct `<p>` children of
     `.wpgmza-pad-x-0` so the actual DataTable rendering is
     unaffected (its content lives inside `.dt-container` and
     isn't a direct `<p>` child). */
  .wpgmza-atlas-major .wpgmza-pad-x-0 > p {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Shadows */
  .wpgmza-atlas-major .wpgmza-shadow {
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  }
  .wpgmza-atlas-major .wpgmza-shadow-high {
    box-shadow: 0 4px 12px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
  }

  /* Nag notices */
  .wpgmza-atlas-major .wpgmza-nag {
    background: var(--am-accent-soft);
    border: 1px solid var(--am-accent-border);
    border-radius: var(--am-radius);
    padding: 10px 14px;
    font-size: 12px;
    color: var(--am-text-2);
  }

  /* Notice banners — rendered as inline <span> in some templates
     (e.g. html/atlas-major/settings-page.html.php). Use flex so the
     ::before icon is a real flex sibling — text can't overlap it the
     way it did when ::before was absolutely positioned and padding-left
     was the only thing clearing the icon. */
  .wpgmza-atlas-major .wpgmza-card.notice,
  .wpgmza-atlas-major .wpgmza-card.wpgmza-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    box-sizing: border-box;
    padding: 12px 14px;
    margin: 8px 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--am-text-2);
    /* Override WP admin's .notice-error 4px red left bar — we paint
       our own icon inline */
    border-left-width: 1px;
  }
  .wpgmza-atlas-major .wpgmza-card.notice > strong:first-child,
  .wpgmza-atlas-major .wpgmza-card.wpgmza-notice > strong:first-child {
    margin-right: 4px;
    color: var(--am-text-1);
  }
  .wpgmza-atlas-major .wpgmza-card.notice::before,
  .wpgmza-atlas-major .wpgmza-card.wpgmza-notice::before {
    content: "?";
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--am-text-3);
    border-radius: 50%;
    text-align: center;
    font-weight: 700;
    font-size: 11px;
    line-height: 1;
    color: var(--am-text-3);
    margin-top: 1px; /* align cap-height with the first text line */
  }

  /* Warning */
  .wpgmza-atlas-major .wpgmza-card.notice.notice-error:before,
  .wpgmza-atlas-major .wpgmza-card.wpgmza-notice.error::before,
  .wpgmza-atlas-major .wpgmza-card.wpgmza-notice.warning::before {
    border-color: var(--am-accent);
    color: var(--am-accent);
    content: "!";
  }
  .wpgmza-atlas-major .wpgmza-notice.warning {
    background: var(--am-accent-soft);
    border-color: var(--am-accent-border);
  }

  /* "No custom fields to filter on" notice on the Marker Fields tab.
     The shared .wpgmza-notice is a row-flex (icon · text · button)
     so the 3 children try to fit on a single line, which cramps the
     paragraph into a narrow column and beaches the "Manage Custom
     Fields" button beside it. The template adds inline
     `style="display:inline-block; margin-top:10px"` on the button —
     clearly expecting it to stack BELOW the text — but the flex
     parent ignores that. Override to block layout for this notice:
     absolute-position the icon top-left, indent content, let <p>
     and <a> stack naturally. */
  .wpgmza-atlas-major #wpgmza-marker-filtering-tab-no-custom-fields-warning {
    display: block;
    position: relative;
    padding-left: 38px;
  }
  .wpgmza-atlas-major #wpgmza-marker-filtering-tab-no-custom-fields-warning::before {
    position: absolute;
    left: 14px;
    top: 14px;
  }
  .wpgmza-atlas-major #wpgmza-marker-filtering-tab-no-custom-fields-warning > p {
    margin: 0;
  }

  /* Info */
  .wpgmza-atlas-major .wpgmza-card.notice.notice-info:before,
  .wpgmza-atlas-major .wpgmza-card.wpgmza-notice.info::before {
    border-color: var(--am-pro);
    color: var(--am-pro);
    content: "i";
  }
  .wpgmza-atlas-major .wpgmza-notice.info {
    background: var(--am-pro-soft);
    border-color: var(--am-pro-border);
  }

  /* Upgrade nag */
  .wpgmza-atlas-major .wpgmza-upgrade-nag-notice {
    background: var(--am-pro-soft);
    color: var(--am-text-2);
    border: 1px solid var(--am-pro-border);
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: var(--am-radius-sm);
    font-size: 12px;
  }
  .wpgmza-atlas-major .wpgmza-upgrade-nag-notice a:not(.wpgmza-button) {
    color: var(--am-pro-text);
  }


  /* ==========================================================
     12. TOGGLE SWITCHES (cmn-toggle system)
     ========================================================== */

  /* ==========================================================
     12. TOGGLE SWITCHES — clean pill switch for all cmn-toggle types
     ========================================================== */

  /* Hide the actual checkbox */
  .wpgmza-atlas-major .cmn-toggle {
    position: absolute !important;
    visibility: hidden;
    width: 0;
    height: 0;
    overflow: hidden;
  }

  /* Base label — the track */
  .wpgmza-atlas-major .cmn-toggle + label {
    display: inline-block;
    position: relative;
    cursor: pointer;
    outline: none;
    user-select: none;
    width: 38px !important;
    height: 20px;
    padding: 0;
    background: var(--am-border);
    border-radius: 10px;
    transition: background 0.2s var(--am-ease);
    vertical-align: middle;
    font-size: 0;
    text-indent: -9999px;
    overflow: hidden;
    border: none;
    box-shadow: none;
    margin: 0;
  }

  /* Hide the :before (text labels like Yes/No) */
  .wpgmza-atlas-major .cmn-toggle + label:before {
    display: none !important;
  }

  /* The knob */
  .wpgmza-atlas-major .cmn-toggle + label:after {
    content: "";
    display: block;
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    transition: transform 0.2s var(--am-ease);
    transform: translateX(0);
  }

  /* Checked state — dark track, knob slides right */
  .wpgmza-atlas-major .cmn-toggle:checked + label {
    background: var(--am-text-1);
  }
  .wpgmza-atlas-major .cmn-toggle:checked + label:after {
    transform: translateX(18px);
  }

  /* Labeled toggle — show text (e.g. Kilometers/Miles) */
  .wpgmza-atlas-major .cmn-toggle-yes-no + label[for="store_locator_distance"] {
    width: 90px !important;
    height: 26px;
    border-radius: 13px;
    font-size: 0;
    text-indent: 0;
    overflow: hidden;
  }
  .wpgmza-atlas-major .cmn-toggle-yes-no + label[for="store_locator_distance"]:before,
  .wpgmza-atlas-major .cmn-toggle-yes-no + label[for="store_locator_distance"]:after {
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    text-indent: 0;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 13px;
    color: white;
  }
  .wpgmza-atlas-major .cmn-toggle-yes-no + label[for="store_locator_distance"]:before {
    content: attr(data-off);
    background: var(--am-text-1);
  }
  .wpgmza-atlas-major .cmn-toggle-yes-no + label[for="store_locator_distance"]:after {
    content: attr(data-on);
    background: var(--am-accent);
  }
  .wpgmza-atlas-major .cmn-toggle-yes-no + label[for="store_locator_distance"]:after {
    transform: translateX(100%);
    transition: transform 0.2s var(--am-ease);
  }
  .wpgmza-atlas-major .cmn-toggle-yes-no:checked + label[for="store_locator_distance"]:before {
    transform: translateX(-100%);
  }
  .wpgmza-atlas-major .cmn-toggle-yes-no:checked + label[for="store_locator_distance"]:after {
    transform: translateX(0);
  }
  /* Unchecked: show :before (off label), hide :after */
  .wpgmza-atlas-major .cmn-toggle-yes-no:not(:checked) + label[for="store_locator_distance"]:before {
    transform: translateX(0);
  }
  .wpgmza-atlas-major .cmn-toggle-yes-no:not(:checked) + label[for="store_locator_distance"]:after {
    transform: translateX(100%);
  }

  /* Large toggle overrides */
  .wpgmza-atlas-major .cmn-override-big {
    width: 42px;
    height: 22px;
  }
  .wpgmza-atlas-major .cmn-override-big-wide {
    width: 60px !important;
    height: 22px !important;
  }


  /* ==========================================================
     13. CSS STATE BLOCKS (marker icon picker tabs)
     ========================================================== */
  .wpgmza-atlas-major .wpgmza-css-state-block {
    margin-top: 14px;
  }
  .wpgmza-atlas-major .wpgmza-css-state-block .wpgmza-css-state-block-tabs {
    display: flex;
    flex-direction: row;
    border: 1px solid var(--am-border);
    border-radius: var(--am-radius-sm);
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    overflow: hidden;
  }
  .wpgmza-atlas-major .wpgmza-css-state-block .wpgmza-css-state-block-tabs .wpgmza-css-state-block-item {
    flex: 1;
    text-align: center;
    padding: 6px 4px;
    cursor: pointer;
    transition: all 0.12s var(--am-ease);
    border-right: 1px solid var(--am-border);
    font-size: 12px;
    font-weight: 500;
    color: var(--am-text-2);
    background: var(--am-bg);
  }
  .wpgmza-atlas-major .wpgmza-css-state-block .wpgmza-css-state-block-tabs .wpgmza-css-state-block-item:last-child {
    border-right: none;
  }
  .wpgmza-atlas-major .wpgmza-css-state-block .wpgmza-css-state-block-tabs .wpgmza-css-state-block-item:hover {
    background: var(--am-border);
  }
  .wpgmza-atlas-major .wpgmza-css-state-block .wpgmza-css-state-block-tabs .wpgmza-css-state-block-item.active {
    background: var(--am-text-1);
    color: white;
    font-weight: 600;
    border-right-color: var(--am-text-1);
  }
  .wpgmza-atlas-major .wpgmza-css-state-block .wpgmza-css-state-block-content {
    display: none;
    border: 1px solid var(--am-border);
    border-radius: var(--am-radius-sm);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top: 0;
    padding: 12px;
  }
  .wpgmza-atlas-major .wpgmza-css-state-block .wpgmza-css-state-block-content.active {
    display: block;
  }
  .wpgmza-atlas-major .wpgmza-css-state-block .wpgmza-css-state-block-content .wpgmza-row {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
  }


  /* ==========================================================
     14. CARET OVERRIDES
     ========================================================== */
  .wpgmza-atlas-major .sidebar .navigation .item.caret-right:after,
  .wpgmza-atlas-major .sidebar .heading .item.caret-right:after {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    border: 1.5px solid var(--am-text-3);
    border-left: none;
    border-bottom: none;
    position: absolute;
    right: 14px;
    top: 50%;
    transform: rotate(45deg) translateY(-50%);
    opacity: 0.6;
  }
  /* No caret on the quick-add button */
  .wpgmza-atlas-major .am-marker-quick-add:after {
    display: none !important;
  }
  .wpgmza-atlas-major .caret-left:after {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    border: 1.5px solid var(--am-text-3);
    border-right: none;
    border-top: none;
    position: absolute;
    left: 14px;
    top: 50%;
    transform: rotate(45deg) translateY(-50%);
    opacity: 0.6;
  }


  /* ==========================================================
     15. CONTEXT MENU
     ========================================================== */
  .wpgmza-atlas-major .wpgmza-editor .wpgmza-context-menu {
    background: var(--am-text-1);
    position: fixed;
    z-index: 100;
    display: flex;
    flex-direction: column;
    border-radius: var(--am-radius);
    font-size: 12px;
    overflow: hidden;
    min-width: 160px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    animation: amSlideLeft 0.1s var(--am-ease) forwards;
    color: white;
  }
  .wpgmza-atlas-major .wpgmza-editor .wpgmza-context-menu > * {
    padding: 7px 12px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.85);
  }
  .wpgmza-atlas-major .wpgmza-editor .wpgmza-context-menu > *:last-child {
    border-bottom: none;
  }
  .wpgmza-atlas-major .wpgmza-editor .wpgmza-context-menu > * .nav-item-icon {
    width: 16px;
    height: 16px;
    opacity: 0.6;
    text-align: center;
  }
  .wpgmza-atlas-major .wpgmza-editor .wpgmza-context-menu > * .nav-item-icon img {
    max-width: 14px;
    max-height: 14px;
    /* The quick-create icons ship as solid black PNGs/SVGs against
       a transparent background. The previous `brightness(10)` had
       no effect on pure black pixels (0 × 10 = 0), so they vanished
       into the dark menu. `invert(1)` flips dark to light;
       softening is already provided by the parent
       `.nav-item-icon { opacity: 0.6 }` so we don't double up. */
    filter: invert(1);
  }
  .wpgmza-atlas-major .wpgmza-editor .wpgmza-context-menu .wpgmza-context-menu-heading {
    font-weight: 600;
    color: white;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.5;
  }
  .wpgmza-atlas-major .wpgmza-editor .wpgmza-context-menu .wpgmza-context-menu-item {
    cursor: pointer;
    transition: background 0.12s var(--am-ease);
  }
  .wpgmza-atlas-major .wpgmza-editor .wpgmza-context-menu .wpgmza-context-menu-item:hover {
    background: rgba(255,255,255,0.12);
  }


  /* ==========================================================
     16. ENGINE SWITCH TOOLBAR
     ========================================================== */
  .wpgmza-atlas-major .wpgmza-editor .map-container-wrap .wpgmza-engine-switch-toolbar {
    position: absolute;
    top: 210px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    background: var(--am-surface);
    border: 1px solid var(--am-border);
    border-radius: var(--am-radius);
    padding: 10px 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    font-size: 12px;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  }
  .wpgmza-atlas-major .wpgmza-editor .map-container-wrap .wpgmza-engine-switch-toolbar > div:first-child {
    font-weight: 600;
    color: var(--am-text-1);
    margin-bottom: 6px;
  }
  .wpgmza-atlas-major .wpgmza-editor .map-container-wrap .wpgmza-engine-switch-toolbar .wpgmza-engine-switch-toolbar-inner {
    display: flex;
    align-items: center;
    gap: 6px;
  }


  /* ==========================================================
     17. ONE-TIME HINT TOOLTIPS
     ========================================================== */
  .wpgmza-atlas-major .wpgmza-one-time-hint {
    display: none;
  }
  .wpgmza-atlas-major .wpgmza-one-time-hint.show-hint {
    position: absolute;
    display: block;
    background: var(--am-text-1);
    color: white;
    padding: 10px 14px;
    border: none;
    border-radius: var(--am-radius);
    font-weight: 500;
    font-size: 12px;
    line-height: 1.55;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    z-index: 99;
    margin-left: 30px;
    max-width: 230px;
    animation: amSlideLeft 0.2s var(--am-ease) forwards;
  }
  .wpgmza-atlas-major .wpgmza-one-time-hint.show-hint:before {
    content: "";
    position: absolute;
    left: -8px;
    top: calc(50% - 4px);
    width: 0;
    height: 0;
    border-right: 8px solid var(--am-text-1);
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    background: none;
    box-shadow: none;
  }
  .wpgmza-atlas-major .wpgmza-one-time-hint.show-hint:after {
    display: none;
  }


  /* ==========================================================
     18. FIELDSET TOGGLES
     ========================================================== */
  .wpgmza-atlas-major .fieldset-toggle {
    font-size: 12px;
    margin-top: 16px;
    position: relative;
    padding-left: 18px;
    cursor: pointer;
    color: var(--am-text-2);
    font-weight: 500;
    transition: color 0.12s var(--am-ease);
  }
  .wpgmza-atlas-major .fieldset-toggle:hover {
    color: var(--am-text-1);
  }
  .wpgmza-atlas-major .fieldset-toggle::before {
    position: absolute;
    top: 5px;
    left: 2px;
    width: 5px;
    height: 5px;
    content: "";
    display: block;
    border: 1.5px solid var(--am-text-3);
    border-top: none;
    border-right: none;
    transition: transform 0.2s var(--am-ease), top 0.2s var(--am-ease);
    transform: rotate(-45deg);
  }
  .wpgmza-atlas-major .fieldset-toggle.toggled::before {
    top: 7px;
    transform: rotate(-225deg);
  }
  .wpgmza-atlas-major .fieldset-toggle + fieldset {
    display: none !important;
  }
  .wpgmza-atlas-major .fieldset-toggle.toggled + fieldset {
    display: inherit !important;
  }


  /* ==========================================================
     19. COLOR INPUT WRAPPER (layer-level overrides only)
     ========================================================== */
  /* Intentionally minimal — full color picker styles are outside @layer for specificity */


  /* ==========================================================
     20. ANCHOR CONTROL
     ========================================================== */
  .wpgmza-atlas-major .wpgmza-anchor-control {
    display: inline-grid;
    grid-template-columns: repeat(3, 24px);
    grid-template-rows: repeat(3, 24px);
    gap: 2px;
    border: 1px solid var(--am-border);
    border-radius: var(--am-radius-sm);
    padding: 3px;
    background: white;
  }
  .wpgmza-atlas-major .wpgmza-anchor-control > * {
    width: 24px;
    height: 24px;
    border-radius: 3px;
    border: 1px solid var(--am-border);
    background: var(--am-bg);
    cursor: pointer;
    transition: all 0.12s var(--am-ease);
  }
  .wpgmza-atlas-major .wpgmza-anchor-control > *:hover {
    border-color: var(--am-text-3);
  }
  .wpgmza-atlas-major .wpgmza-anchor-control > *.active,
  .wpgmza-atlas-major .wpgmza-anchor-control > *:checked {
    background: var(--am-text-1);
    border-color: var(--am-text-1);
  }


  /* ==========================================================
     21. LAYOUT HELPERS (FLEX ROW / COL)
     ========================================================== */
  .wpgmza-atlas-major .wpgmza-row {
    display: flex;
    flex-direction: row !important;
    flex-grow: 1;
    gap: 8px;
  }
  .wpgmza-atlas-major .wpgmza-row .wpgmza-col {
    flex: 1;
  }
  .wpgmza-atlas-major .wpgmza-row .wpgmza-col-1 {
    flex: 1;
    max-width: 8.3333%;
  }
  .wpgmza-atlas-major .wpgmza-row .wpgmza-col-2 {
    flex: 2;
    max-width: 16.6666%;
  }
  .wpgmza-atlas-major .wpgmza-row .wpgmza-col-3 {
    flex: 3;
    max-width: 25%;
  }
  .wpgmza-atlas-major .wpgmza-row .wpgmza-col-4 {
    flex: 4;
    max-width: 33.3333%;
  }
  .wpgmza-atlas-major .wpgmza-row .wpgmza-col-5 {
    flex: 5;
    max-width: 41.6666%;
  }
  .wpgmza-atlas-major .wpgmza-row .wpgmza-col-6 {
    flex: 6;
    max-width: 50%;
  }
  .wpgmza-atlas-major .wpgmza-row .wpgmza-col-7 {
    flex: 7;
    max-width: 58.3333%;
  }
  .wpgmza-atlas-major .wpgmza-row .wpgmza-col-8 {
    flex: 8;
    max-width: 66.6666%;
  }
  .wpgmza-atlas-major .wpgmza-row .wpgmza-col-9 {
    flex: 9;
    max-width: 75%;
  }
  .wpgmza-atlas-major .wpgmza-row .wpgmza-col-10 {
    flex: 10;
    max-width: 83.3333%;
  }
  .wpgmza-atlas-major .wpgmza-row .wpgmza-col-11 {
    flex: 11;
    max-width: 91.6666%;
  }
  .wpgmza-atlas-major .wpgmza-row .wpgmza-col-12 {
    flex: 12;
    max-width: 100%;
  }
  .wpgmza-atlas-major .wpgmza-row .wpgmza-col-fit {
    width: fit-content !important;
    flex: none;
  }
  .wpgmza-atlas-major .wpgmza-row.align-center {
    align-items: center;
  }
  .wpgmza-atlas-major .wpgmza-row.justify-center {
    justify-content: center;
  }

  /* Inline color input override */
  .wpgmza-atlas-major .wpgmza-inline-field input[type="color"] {
    min-height: 32px;
    width: 38px;
    margin-right: 8px;
    vertical-align: top;
    border: 1px solid var(--am-border);
    border-radius: var(--am-radius-sm);
  }

  .wpgmza-form-wrap .wpgmza-row {
    margin-bottom: 20px;
    line-height: 30px;
  }

  /* ==========================================================
     22. CHECK CARD SELECTORS
     ========================================================== */
  .wpgmza-atlas-major .wpgmza-check-card-selector input[type="checkbox"],
  .wpgmza-atlas-major .wpgmza-check-card-selector input[type="radio"] {
    display: none;
  }
  .wpgmza-atlas-major .wpgmza-check-card-selector input[type="checkbox"]:checked + .wpgmza-card,
  .wpgmza-atlas-major .wpgmza-check-card-selector input[type="radio"]:checked + .wpgmza-card {
    border: 2px solid var(--am-text-1);
  }
  /* Authoritative .wpgmza-card / :hover / span definitions live in
     the consolidated block further down (line ~7234). The duplicates
     that used to be here were removed because they declared a
     conflicting `transition` that caused border-stutter on the
     category-filter cards — Novus has no transition on these. */


  /* ==========================================================
     23. THEME SYSTEM (tileset / theme panels)
     ========================================================== */
  .wpgmza-atlas-major .tileset-selection-panel,
  .wpgmza-atlas-major .theme-selection-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    max-width: 100%;
  }
  .wpgmza-atlas-major .tileset-option,
  .wpgmza-atlas-major .theme-option {
    max-width: 100%;
    position: relative;
    box-sizing: border-box;
    border-radius: var(--am-radius-sm);
    overflow: hidden;
    line-height: 0;
    border: 2px solid var(--am-border);
    aspect-ratio: 1 / 1;
    box-shadow: none;
    transition: border-color 0.12s var(--am-ease);
  }
  .wpgmza-atlas-major .tileset-option:focus-within,
  .wpgmza-atlas-major .tileset-option:hover,
  .wpgmza-atlas-major .tileset-option.selected,
  .wpgmza-atlas-major .theme-option:focus-within,
  .wpgmza-atlas-major .theme-option:hover {
    cursor: pointer;
    border-color: var(--am-text-1);
    outline: none;
  }
  .wpgmza-atlas-major .tileset-option span,
  .wpgmza-atlas-major .theme-option span {
    font-size: 10px;
    font-weight: 600;
    color: var(--am-text-2);
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  }


  /* ==========================================================
     24. PRELOADER
     ========================================================== */
  .wpgmza-atlas-major .wpgmza-editor .sidebar .wpgmza-preloader,
  .wpgmza-atlas-major .wpgmza-preloader {
    height: 35px;
    width: 35px;
    position: absolute;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .wpgmza-preloader div:first-child,
  .wpgmza-atlas-major .wpgmza-preloader div:first-child {
    height: 100%;
    width: 100%;
    border: 3px solid var(--am-border);
    border-radius: 50%;
    border-bottom-color: var(--am-accent);
    box-sizing: border-box;
    animation: wpgmzaLoadCircle 0.8s linear infinite;
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .wpgmza-preloader div:last-child,
  .wpgmza-atlas-major .wpgmza-preloader div:last-child {
    display: none;
  }


  /* ==========================================================
     25. GENERAL INFO PANEL
     ========================================================== */
  .wpgmza-atlas-major .wpgmza-editor .sidebar .general-info {
    padding-top: 16px;
    padding-bottom: 16px;
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .general-info .info-heading {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--am-text-1);
    letter-spacing: -0.01em;
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .general-info ul {
    font-size: 12px;
    margin-left: 16px;
    list-style: disc;
    color: var(--am-text-2);
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .general-info ul li {
    margin-bottom: 3px;
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .general-info > img {
    max-width: 80%;
    margin-bottom: 16px;
    border-radius: var(--am-radius-sm);
  }


  /* ==========================================================
     26. TINYMCE / WRITERSBLOCK OVERRIDES
     ========================================================== */
  .wpgmza-atlas-major .wpgmza-editor .sidebar .wp-media-buttons .button,
  .wpgmza-atlas-major .wpgmza-editor .sidebar .quicktags-toolbar .button {
    border: 1px solid var(--am-border);
    color: var(--am-text-2);
    background: var(--am-surface);
    border-radius: var(--am-radius-sm);
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 12px;
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .wp-editor-tabs button {
    border-top-right-radius: var(--am-radius-sm);
    border-top-left-radius: var(--am-radius-sm);
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .mce-container > iframe {
    min-height: 180px;
  }

  /* Writersblock */
  .wpgmza-atlas-major .writersblock-wrapper {
    overflow: hidden;
  }
  .wpgmza-atlas-major .writersblock-wrapper .writersblock-editor {
    padding: 10px;
    border: 1px solid var(--am-border);
    border-bottom-left-radius: var(--am-radius);
    border-bottom-right-radius: var(--am-radius);
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 13px;
    color: var(--am-text-1);
  }
  .wpgmza-atlas-major .writersblock-wrapper .writersblock-toolbar {
    background: var(--am-bg);
    border-top-right-radius: var(--am-radius);
    border-top-left-radius: var(--am-radius);
    border: 1px solid var(--am-border);
    border-bottom: none;
    flex-wrap: wrap;
  }
  .wpgmza-atlas-major .writersblock-wrapper .writersblock-popup-tools.active {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }
  .wpgmza-atlas-major .writersblock-wrapper .writersblock-toolbar .tool-group {
    margin-right: 0;
    padding-right: 0;
  }
  .wpgmza-atlas-major .writersblock-wrapper .writersblock-editor img,
  .wpgmza-atlas-major .writersblock-wrapper .writersblock-editor video,
  .wpgmza-atlas-major .writersblock-wrapper .writersblock-editor audio {
    max-width: 100%;
  }
  .wpgmza-atlas-major .writersblock-modal {
    max-width: 90%;
    width: 90%;
  }
  .wpgmza-atlas-major .writersblock-wrapper .wpgmza-writersblock-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }
  .wpgmza-atlas-major .writersblock-wrapper .wpgmza-writersblock-hold-state {
    color: var(--am-accent) !important;
  }
  .wpgmza-atlas-major .writersblock-wrapper .writersblock-wpgmza-code-editor {
    padding: 10px;
    border: 1px solid var(--am-border);
    border-bottom-left-radius: var(--am-radius);
    border-bottom-right-radius: var(--am-radius);
    width: 100%;
    min-height: 200px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    box-sizing: border-box;
    resize: vertical;
  }
  .wpgmza-atlas-major .writersblock-wrapper.wpgmza-code-syntax-invalid:after {
    content: "⚠ Invalid HTML detected!";
    color: #dc2626;
    font-size: 0.9em;
  }
  .wpgmza-atlas-major .writersblock-wrapper .wpgmza-embedded-media.selected {
    border: 2px dashed var(--am-border);
  }
  .wpgmza-atlas-major .writersblock-wrapper .wpgmza-embedded-media-handle {
    width: 7px;
    height: 7px;
    background: #fff;
    border: 1px solid #999;
  }
  .wpgmza-atlas-major .writersblock-wrapper .wpgmza-embedded-media-handle:hover {
    border-color: var(--am-text-1);
    cursor: se-resize;
  }


  /* ==========================================================
     27. MARKER GALLERY INPUTS
     ========================================================== */
  .wpgmza-atlas-major .wpgmza-editor .sidebar .wpgmza-gallery-input li {
    position: relative;
    width: 90px;
    height: 90px;
    margin: 3px;
    display: inline-block;
    vertical-align: top;
    background-size: cover;
    box-sizing: border-box;
    padding-left: 0 !important;
    border-radius: var(--am-radius-sm);
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .wpgmza-gallery-input li.wpgmza-add-new-picture {
    cursor: pointer;
    border: 2px dashed var(--am-border);
    border-radius: var(--am-radius-sm);
    color: var(--am-text-3);
    transition: border-color 0.12s var(--am-ease), color 0.12s var(--am-ease);
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .wpgmza-gallery-input li.wpgmza-add-new-picture:hover {
    border-color: var(--am-text-3);
    color: var(--am-text-2);
  }
  /* Centre the camera icon inside the empty "Add Picture" tile.
     Novus uses absolute-centring (atlas-novus/wp-google-maps-admin.css
     ~L805-811) and the Atlas Major port never carried this rule
     over, so the `<i class="fa-camera">` clung to the top-left
     of the dashed square and the affordance read as broken.
     Same centring technique as Novus — font-size lowered from
     32px to 28px so it sits proportionate to Atlas Major's
     smaller 90px tile (Novus tiles are 110px). */
  .wpgmza-atlas-major .wpgmza-editor .sidebar .wpgmza-gallery-input li.wpgmza-add-new-picture > i {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 28px;
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .wpgmza-gallery-input li .wpgmza-delete-gallery-item {
    background: var(--am-surface);
    border: none;
    float: right;
    margin: 4px;
    width: 18px;
    height: 18px;
    padding: 0;
    font-size: 10px;
    line-height: 18px;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  }


  /* ==========================================================
     28. IMAGE SINGLE INPUTS
     ========================================================== */
  .wpgmza-atlas-major .wpgmza-editor .sidebar .wpgmza-image-single-input-wrapper {
    position: relative;
    cursor: pointer;
    border: 2px dashed var(--am-border);
    border-radius: var(--am-radius-sm);
    color: var(--am-text-3);
    transition: border-color 0.12s var(--am-ease), color 0.12s var(--am-ease);
    width: 100%;
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .wpgmza-image-single-input-wrapper:hover {
    border-color: var(--am-text-3);
    color: var(--am-text-2);
  }
  /* Preview wrapper + empty-state placeholder.
     The Novus rule set in atlas-novus/wp-google-maps-admin.css
     (~L4092-4109) covers both the editor sidebar context
     (`.wpgmza-editor .sidebar`) and the settings tabs context
     (`.wpgmza-tabs-container .ui-tabs-panel`) with one combined
     selector. The Atlas Major port had only ever added these
     rules to the tabs-container context (see ~line 7304 below),
     so the editor-sidebar surfaces (image overlay creator,
     custom map image system, etc.) were left with no flex
     centering and no minimum-height on the placeholder `<div>`,
     making the camera icon hug the top-left and the empty slot
     look broken. Mirroring the tabs-container styles here so
     both contexts behave identically. */
  .wpgmza-atlas-major .wpgmza-editor .sidebar .wpgmza-image-single-input-wrapper .wpgmza-image-single-input-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5px;
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .wpgmza-image-single-input-wrapper .wpgmza-image-single-input-preview > div {
    min-height: 125px;
    font-size: 2.5em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .wpgmza-image-single-input-wrapper .wpgmza-image-single-input-preview img {
    max-width: 100%;
    border-radius: var(--am-radius-sm);
    transition: opacity 0.3s ease;
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .wpgmza-image-single-input-wrapper:hover img {
    opacity: 0.7;
  }


  /* ==========================================================
     29. REVIEW NAG / SUPPORT NOTICE
     ========================================================== */
  .wpgmza-atlas-major .wpgmza-review-nag {
    position: relative;
    margin-top: 16px;
    margin-bottom: 16px;
    width: fit-content;
    padding: 12px 16px !important;
    border-radius: var(--am-radius);
  }
  .wpgmza-atlas-major .wpgmza-review-nag:before {
    display: none !important;
  }


  /* ==========================================================
     30. SHORTCODE COPY
     ========================================================== */
  .wpgmza-atlas-major .wpgmza_copy_shortcode {
    border-color: transparent !important;
    width: 100%;
    text-align: center;
    cursor: pointer;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    color: var(--am-text-2);
    padding: 6px 10px;
    background: var(--am-bg);
    border-radius: var(--am-radius-sm);
    border: 1px solid var(--am-border) !important;
    transition: border-color 0.12s var(--am-ease);
  }
  .wpgmza-atlas-major .wpgmza_copy_shortcode:hover {
    border-color: var(--am-text-3) !important;
  }


  /* ==========================================================
     31. TOOLBAR DROPDOWN SYSTEM
     ========================================================== */
  .wpgmza-atlas-major .wpgmza-toolbar .wpgmza-toolbar-list {
    position: absolute;
    right: 0;
    text-align: left;
    background: var(--am-surface);
    border-radius: var(--am-radius);
    z-index: 100;
    min-width: 160px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    border: 1px solid var(--am-border);
    overflow: hidden;
    animation: amSlideLeft 0.12s var(--am-ease) forwards;
  }
  .wpgmza-atlas-major .wpgmza-toolbar .wpgmza-toolbar-list > * {
    display: block;
    border-bottom: 1px solid var(--am-border-subtle);
    padding: 8px 14px;
    font-size: 12px;
    text-decoration: none;
    color: var(--am-text-1);
    transition: background 0.1s var(--am-ease);
  }
  .wpgmza-atlas-major .wpgmza-toolbar .wpgmza-toolbar-list > *:last-child {
    border: none;
  }
  .wpgmza-atlas-major .wpgmza-toolbar .wpgmza-toolbar-list > *:hover {
    background: var(--am-bg);
    cursor: pointer;
  }


  /* ==========================================================
     32. PRO UPSELL CARDS (standalone)
     ========================================================== */
  .wpgmza-atlas-major .wpgmza-pro-upsell-card {
    margin-bottom: 16px;
    margin-top: 16px;
    background: var(--am-pro-soft);
    border: 1px solid var(--am-pro-border);
    border-radius: var(--am-radius);
    padding: 14px 16px;
  }
  .wpgmza-atlas-major .wpgmza-pro-upsell-card.wpgmza-pro-upsell-card-highlight {
    background: var(--am-pro-soft);
    border-color: var(--am-pro-border);
  }
  .wpgmza-atlas-major .wpgmza-pro-upsell-card .wpgmza-pro-upsell-highlight-pill {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--am-pro);
    color: white;
    font-weight: 700;
    font-size: 9px;
    border-radius: 3px;
    padding: 1px 6px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: none;
  }


  /* ==========================================================
     33. HIDDEN UTILITY
     ========================================================== */
  .wpgmza-atlas-major .wpgmza-hidden {
    display: none !important;
  }


  /* ==========================================================
     34. MAP NOTICE ANCHORS — canvas-hint pill style (mockup)
     ========================================================== */
  .wpgmza-atlas-major .wpgmza-editor .map-container-wrap .wpgmza-notice.bottom-anchor,
  .wpgmza-atlas-major .wpgmza-editor .map-container-wrap .wpgmza-notice.bottom-left-anchor,
  .wpgmza-atlas-major .wpgmza-editor .map-container-wrap .wpgmza-notice.top-anchor {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    border: 1px solid var(--am-border);
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 12px;
    color: var(--am-text-2);
    z-index: 10;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    max-width: calc(100% - 40px);
  }
  .wpgmza-atlas-major .wpgmza-editor .map-container-wrap .wpgmza-notice.top-anchor {
    bottom: unset;
    top: 14px;
  }
  .wpgmza-atlas-major .wpgmza-editor .map-container-wrap .wpgmza-notice.bottom-left-anchor {
    left: 14px;
    transform: none;
    display:flex;
    flex-direction: row;
  }

  /* Quick tip — specific pill treatment */
  .wpgmza-atlas-major .wpgmza-editor .map-container-wrap .wpgmza-quick-tip-container {
    background: white;
    border: 1px solid var(--am-border);
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 12px;
    color: var(--am-text-2);
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  }
  .wpgmza-atlas-major .wpgmza-editor .map-container-wrap .wpgmza-quick-tip-container::before {
    display: none;
  }
  .wpgmza-atlas-major .wpgmza-editor .map-container-wrap .wpgmza-quick-tip-container strong {
    color: var(--am-text-1);
    font-weight: 600;
  }
  .wpgmza-atlas-major .wpgmza-editor .map-container-wrap .wpgmza-quick-tip-container span {
    color: var(--am-text-2);
  }
  .wpgmza-atlas-major .wpgmza-editor .map-container-wrap .wpgmza-quick-tip-container .wpgmza-button {
    background: var(--am-text-1);
    color: white;
    border: none;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    cursor: pointer;
    transition: background 0.12s var(--am-ease);
    margin-left: 2px;
  }
  .wpgmza-atlas-major .wpgmza-editor .map-container-wrap .wpgmza-quick-tip-container .wpgmza-button:hover {
    background: #333;
  }

  /* Save reminder — move to bottom of map */
  .wpgmza-atlas-major .wpgmza-editor .map-container-wrap #wpgmaps_save_reminder {
    position: absolute;
    bottom: 14px;
    top: auto;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
  }
  .wpgmza-atlas-major .wpgmza-editor .map-container-wrap #wpgmaps_save_reminder .wpgmza-notice {
    margin: 0;
  }

  /* Save reminder — pill style */
  .wpgmza-atlas-major .wpgmza-editor .map-container-wrap .wpgmza-notice.warning.top-anchor {
    background: var(--am-accent-soft);
    border-color: var(--am-accent-border);
    color: var(--am-accent);
  }
  .wpgmza-atlas-major .wpgmza-editor .map-container-wrap .wpgmza-notice.warning.top-anchor::before {
    display: none;
  }
  .wpgmza-atlas-major .wpgmza-editor .map-container-wrap .wpgmza-notice.warning.top-anchor strong {
    color: var(--am-accent);
  }


  /* ==========================================================
     35. ZOOM SLIDER PREVIEW
     Hover-preview overlay drawn by MapEditPage.bindZoomSliderPreview
     for any input[data-zoom-slider-preview]. JS appends the frame to
     #wpgmza-map-container on hover and removes it on mouseleave; the
     base layout (full-map absolute overlay + centered title badge)
     needs to live here because Atlas Major doesn't load
     wp-google-maps-admin.css. Affects the Mobile Zoom Level slider,
     User Location Zoom slider, Marker Click Zoom slider, and Listing
     Click Zoom slider — all four go through this single class.
     ========================================================== */
  .wpgmza-atlas-major .zoom-slider-preview-frame {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    pointer-events: none;
    border: 4px solid var(--am-accent);
    box-sizing: border-box;
    z-index: 5;
  }
  .wpgmza-atlas-major .zoom-slider-preview-frame > span {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background: var(--am-accent);
    color: white;
    padding: 4px 10px;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 600;
    font-size: 11px;
    border-bottom-right-radius: var(--am-radius-sm);
    border-bottom-left-radius: var(--am-radius-sm);
    white-space: nowrap;
  }


  /* ==========================================================
     36. ACTION GROUP (datatable actions)
     ========================================================== */
  .wpgmza-atlas-major .wpgmza-datatable-container .wpgmza-action-group {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px;
  }
  .wpgmza-atlas-major .wpgmza-datatable-container .wpgmza-action-group > * {
    margin-right: 0;
  }

  /* Feature list marker listing actions */
  .wpgmza-atlas-major .wpgmza-editor .sidebar .feature-list .wpgmza-marker-listing__actions,
  .wpgmza-atlas-major .wpgmza-datatable-container .wpgmza-marker-listing__actions {
    padding-left: 20px;
  }
  .wpgmza-atlas-major .wpgmza-editor .sidebar .feature-list .wpgmza-marker-listing__actions span {
    display: none;
  }


  /* ==========================================================
     37. SCROLLBAR STYLING (global within atlas-major)
     ========================================================== */
  .wpgmza-atlas-major ::-webkit-scrollbar {
    width: 5px;
    height: 5px;
  }
  .wpgmza-atlas-major ::-webkit-scrollbar-track {
    background: transparent;
  }
  .wpgmza-atlas-major ::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 3px;
  }
  .wpgmza-atlas-major ::-webkit-scrollbar-thumb:hover {
    background: #ccc;
  }

  /* ==========================================================
     42. INFO WINDOWS (map editor popups)
     ========================================================== */

  /* Edit/delete buttons inside info windows */
  /* ==========================================================
     42. HELP BUTTON (toolbar)
     ========================================================== */
  /* Go Pro pill — persistent toolbar CTA */
  .wpgmza-atlas-major .am-btn-go-pro {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 14px;
    background: var(--am-pro);
    color: white;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    text-decoration: none;
    letter-spacing: 0.02em;
    transition: all 0.15s var(--am-ease);
    flex-shrink: 0;
  }
  .wpgmza-atlas-major .am-btn-go-pro:hover {
    background: var(--am-pro-hover);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(124,58,237,0.3);
  }
  .wpgmza-atlas-major .am-btn-go-pro svg {
    stroke: white;
  }

  .wpgmza-atlas-major .am-btn-help {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--am-border);
    background: var(--am-surface);
    color: var(--am-text-3);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.12s var(--am-ease);
    padding: 0;
    flex-shrink: 0;
  }
  .wpgmza-atlas-major .am-btn-help:hover {
    border-color: var(--am-text-3);
    color: var(--am-text-1);
    background: var(--am-bg);
  }
  /* Remove caret from help button */
  .wpgmza-atlas-major .am-btn-help:after {
    display: none !important;
  }

  /* ==========================================================
     43. INFO WINDOWS (map editor popups)
     ========================================================== */
  .wpgmza-atlas-major .wpgmza_edit_btn,
  .wpgmza-atlas-major .wpgmza_del_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.1s;
    text-decoration: none;
    color: var(--am-text-3);
    margin-right: 4px;
  }
  .wpgmza-atlas-major .wpgmza_edit_btn:hover {
    background: var(--am-bg);
    color: var(--am-text-1);
  }
  .wpgmza-atlas-major .wpgmza_del_btn:hover {
    background: var(--am-accent-soft);
    color: var(--am-accent);
  }
  .wpgmza-atlas-major .wpgmza_edit_btn i,
  .wpgmza-atlas-major .wpgmza_del_btn i {
    font-size: 14px;
  }

  /* ==========================================================
     41. POPUP NOTIFICATIONS
     ========================================================== */
  .wpgmza-atlas-major .wpgmza-popup-notification {
    position: fixed;
    background: var(--am-text-1);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    z-index: 999999;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    opacity: 1;
    transition: opacity 0.3s var(--am-ease);
    width: fit-content;
    pointer-events: none;
  }
  .wpgmza-atlas-major .wpgmza-popup-notification:before {
    display: none;
  }
  .wpgmza-atlas-major .wpgmza-popup-notification.animate-end {
    opacity: 0;
  }
  /* Anchor positions */
  .wpgmza-atlas-major .wpgmza-popup-notification.top-right,
  .wpgmza-atlas-major .wpgmza-popup-notification.top-left,
  .wpgmza-atlas-major .wpgmza-popup-notification.bottom-right,
  .wpgmza-atlas-major .wpgmza-popup-notification.bottom-left,
  .wpgmza-atlas-major .wpgmza-popup-notification.bottom,
  .wpgmza-atlas-major .wpgmza-popup-notification.top,
  .wpgmza-atlas-major .wpgmza-popup-notification.left,
  .wpgmza-atlas-major .wpgmza-popup-notification.right {
    position: absolute;
  }
  /* Positive top offset so the notification sits INSIDE the
   * container near its top edge. Previously -36px positioned it
   * ABOVE the container, which worked for panels with breathing
   * room above but for sidebar groupings pushed the notification
   * into the tab bar area — its stacking context prevented the
   * huge z-index from escaping, so the toolbar covered it. */
  .wpgmza-atlas-major .wpgmza-popup-notification.top-right,
  .wpgmza-atlas-major .wpgmza-popup-notification.top-left,
  .wpgmza-atlas-major .wpgmza-popup-notification.top { top: 8px; }
  .wpgmza-atlas-major .wpgmza-popup-notification.bottom-right,
  .wpgmza-atlas-major .wpgmza-popup-notification.bottom-left,
  .wpgmza-atlas-major .wpgmza-popup-notification.bottom { bottom: 7px; }
  .wpgmza-atlas-major .wpgmza-popup-notification.top-right,
  .wpgmza-atlas-major .wpgmza-popup-notification.bottom-right,
  .wpgmza-atlas-major .wpgmza-popup-notification.right { right: 7px; }
  .wpgmza-atlas-major .wpgmza-popup-notification.top-left,
  .wpgmza-atlas-major .wpgmza-popup-notification.bottom-left,
  .wpgmza-atlas-major .wpgmza-popup-notification.left { left: 7px; }
  .wpgmza-atlas-major .wpgmza-popup-notification.top,
  .wpgmza-atlas-major .wpgmza-popup-notification.bottom {
    left: 50%;
    transform: translateX(-50%);
  }


  /* ==========================================================
     40. SETTINGS PAGE (wpgmza-tabs-container)
     ========================================================== */

  /* Container */
  .wpgmza-atlas-major.wpgmza-tabs-container {
    box-sizing: border-box;
    padding: 20px;
    padding-left: 0;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 13px;
    color: var(--am-text-1);
  }

  /* Tab nav — left sidebar */
  .wpgmza-atlas-major.wpgmza-tabs-container .ui-tabs-nav {
    width: 18%;
    float: left;
    box-sizing: border-box;
    padding-right: 20px;
    list-style: none;
    margin: 0;
    padding-top: 0;
  }
  .wpgmza-atlas-major.wpgmza-tabs-container .ui-tabs-nav .ui-tab {
    background: transparent;
    border-radius: 50px;
    transition: background 0.2s var(--am-ease);
    margin-bottom: 2px;
  }
  .wpgmza-atlas-major.wpgmza-tabs-container .ui-tabs-nav .ui-tab.ui-tabs-active {
    background: var(--am-text-1);
  }
  .wpgmza-atlas-major.wpgmza-tabs-container .ui-tabs-nav .ui-tab.ui-tabs-active a {
    color: white;
  }
  .wpgmza-atlas-major.wpgmza-tabs-container .ui-tabs-nav .ui-tab:hover {
    background: var(--am-bg);
  }
  .wpgmza-atlas-major.wpgmza-tabs-container .ui-tabs-nav .ui-tab.ui-tabs-active:hover {
    background: #333;
  }
  .wpgmza-atlas-major.wpgmza-tabs-container .ui-tabs-nav .ui-tab a {
    text-decoration: none;
    color: var(--am-text-2);
    padding: 6px 14px;
    font-weight: 600;
    font-size: 13px;
    display: block;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  }
  .wpgmza-atlas-major.wpgmza-tabs-container .ui-tabs-nav .ui-tab a:focus {
    outline: none;
    box-shadow: none;
  }

  /* Legacy import options on the Tools page (advanced-page.html.php) —
     four <li class="wpgmza-legacy-import-option"> items for Map Data,
     Marker Data, Polygon Data, Polyline Data. Atlas Novus hides these
     via wp-google-maps-admin.css:4370 but Atlas Major doesn't load
     that stylesheet, so the rule was missing. Mirrored here. */
  .wpgmza-atlas-major.wpgmza-tabs-container .wpgmza-legacy-import-option,
  .wpgmza-atlas-major .wpgmza-tabs-container .wpgmza-legacy-import-option {
    display: none;
  }

  /* Tab panels — right content area */
  .wpgmza-atlas-major.wpgmza-tabs-container .ui-tabs-panel {
    width: 82%;
    float: left;
    box-sizing: border-box;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    background: var(--am-surface);
    border-radius: var(--am-radius-lg);
    border: 1px solid var(--am-border);
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  }
  .wpgmza-atlas-major.wpgmza-tabs-container .ui-tabs-panel > *,
  .wpgmza-atlas-major.wpgmza-tabs-container .ui-tabs-panel > form > * {
    padding-left: 20px;
    padding-right: 20px;
    margin-bottom: 20px;
  }

  /* Section headings */
  .wpgmza-atlas-major.wpgmza-tabs-container .ui-tabs-panel .heading {
    padding-top: 20px;
    padding-bottom: 20px;
    font-size: 14px;
    font-weight: 700;
    border-bottom: 1px solid var(--am-border);
    color: var(--am-text-1);
  }
  .wpgmza-atlas-major.wpgmza-tabs-container .ui-tabs-panel .heading.has-section {
    margin-bottom: 0;
  }

  /* Tab rows — settings key/value pairs.
     The previous baseline was zero margin, with `.has-hint` adding
     only 5px. That worked when every row's inherent content height
     came from a toggle or select (visually self-spacing), but rows
     containing a bare text input (e.g. the GDPR Compliance Company
     Name / Retention Purpose / Button Label trio) collapsed onto
     each other with little or no gap. Setting a real 10px baseline
     gives every row consistent breathing room regardless of what
     it contains, and the now-redundant `.has-hint` override is
     dropped — `.has-hint` is still used in templates for semantic
     grouping but no longer needs its own spacing rule. */
  .wpgmza-atlas-major.wpgmza-tabs-container .ui-tabs-panel .tab-row {
    display: flex;
    font-size: 13px;
    margin-bottom: 10px;
  }
  .wpgmza-atlas-major.wpgmza-tabs-container .ui-tabs-panel .tab-row.as-heading {
    padding-bottom: 10px;
    padding-top: 10px;
    background: var(--am-bg);
    border-bottom: 1px solid var(--am-border);
    border-top: 1px solid var(--am-border);
    font-weight: 600;
  }
  .wpgmza-atlas-major.wpgmza-tabs-container .ui-tabs-panel .heading + .tab-row.as-heading {
    border-top: none;
  }
  .wpgmza-atlas-major.wpgmza-tabs-container .ui-tabs-panel .tab-row .title {
    flex-basis: 25%;
    line-height: 30px;
    font-weight: 500;
    color: var(--am-text-2);
  }
  .wpgmza-atlas-major.wpgmza-tabs-container .ui-tabs-panel .tab-row .tab-stretch-right {
    flex-basis: 75%;
  }
  .wpgmza-atlas-major.wpgmza-tabs-container .ui-tabs-panel .tab-row > ul,
  .wpgmza-atlas-major.wpgmza-tabs-container .ui-tabs-panel .tab-row > small:nth-child(2) {
    flex-basis: 75%;
  }
  .wpgmza-atlas-major.wpgmza-tabs-container .ui-tabs-panel .tab-row [role="group"] {
    margin-top: 10px;
  }
  .wpgmza-atlas-major.wpgmza-tabs-container .ui-tabs-panel .tab-row [role="group"] label > div {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    line-height: 1.4;
  }
  .wpgmza-atlas-major.wpgmza-tabs-container .ui-tabs-panel .tab-row [role="group"] label > div .switch {
    flex-shrink: 0;
    width: 38px;
    margin-right: 0;
  }
  .wpgmza-atlas-major.wpgmza-tabs-container .ui-tabs-panel .tab-row .inline-hint {
    font-size: 12px;
    line-height: 30px;
    margin-left: 10px;
    color: var(--am-text-3);
    /* Center against the flex row — Atlas Major's settings selects/
       inputs are ~34px tall (padding 8px + 13px font + borders), while
       the hint's line-box is 30px. Default flex stretch leaves the hint
       text at the top of its stretched box, reading as misaligned. */
    align-self: center;
  }
  .wpgmza-atlas-major.wpgmza-tabs-container .ui-tabs-panel .tab-row ul {
    margin: 0;
  }

  /* Form elements in settings */
  .wpgmza-atlas-major.wpgmza-tabs-container input[type="text"],
  .wpgmza-atlas-major.wpgmza-tabs-container input[type="number"],
  .wpgmza-atlas-major.wpgmza-tabs-container input[type="url"],
  .wpgmza-atlas-major.wpgmza-tabs-container input[type="password"],
  .wpgmza-atlas-major.wpgmza-tabs-container select,
  .wpgmza-atlas-major.wpgmza-tabs-container textarea {
    padding: 8px 12px;
    border: 1px solid var(--am-border);
    border-radius: var(--am-radius-sm);
    font-size: 13px;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    color: var(--am-text-1);
    background: white;
    transition: border-color 0.12s var(--am-ease);
  }
  .wpgmza-atlas-major.wpgmza-tabs-container input:focus,
  .wpgmza-atlas-major.wpgmza-tabs-container select:focus,
  .wpgmza-atlas-major.wpgmza-tabs-container textarea:focus {
    outline: none;
    border-color: var(--am-text-1);
  }

  /* Hints */
  .wpgmza-atlas-major.wpgmza-tabs-container .hint,
  .wpgmza-atlas-major.wpgmza-tabs-container small.hint {
    font-size: 11px;
    color: var(--am-text-3);
    margin-top: 4px;
  }
  .wpgmza-atlas-major.wpgmza-tabs-container .hint a {
    color: var(--am-text-2);
  }

  /* Panel intro paragraphs (Support page tabs: Documentation /
     Troubleshooting / System Info / Support). The `.hint` class
     above is for tiny footnotes under inputs; .am-panel-hint
     marks block-level body copy under a panel heading, so it
     needs body-text treatment, not 11px disabled-grey. */
  .wpgmza-atlas-major.wpgmza-tabs-container .hint.am-panel-hint,
  .wpgmza-atlas-major .am-panel-hint {
    font-size: 13px;
    line-height: 1.55;
    color: var(--am-text-2);
    margin: 8px 0 20px;
    max-width: 720px;
  }
  .wpgmza-atlas-major .am-panel-hint a {
    color: var(--am-accent);
    text-decoration: none;
    font-weight: 500;
  }
  .wpgmza-atlas-major .am-panel-hint a:hover {
    text-decoration: underline;
  }

  /* Buttons in settings */
  .wpgmza-atlas-major.wpgmza-tabs-container .wpgmza-button {
    padding: 7px 16px;
    border-radius: var(--am-radius-sm);
    font-size: 13px;
    font-weight: 600;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    cursor: pointer;
    border: 1px solid var(--am-border);
    background: var(--am-surface);
    color: var(--am-text-2);
    transition: all 0.12s var(--am-ease);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
  }
  .wpgmza-atlas-major.wpgmza-tabs-container .wpgmza-button:hover {
    border-color: var(--am-text-3);
    color: var(--am-text-1);
  }
  .wpgmza-atlas-major.wpgmza-tabs-container .wpgmza-button-primary,
  .wpgmza-atlas-major.wpgmza-tabs-container button[type="submit"].wpgmza-button {
    background: var(--am-accent);
    color: white;
    border-color: var(--am-accent);
  }
  .wpgmza-atlas-major.wpgmza-tabs-container .wpgmza-button-primary:hover,
  .wpgmza-atlas-major.wpgmza-tabs-container button[type="submit"].wpgmza-button:hover {
    background: var(--am-accent-hover);
    border-color: var(--am-accent-hover);
  }

  /* Upsells in settings panels */
  .wpgmza-atlas-major.wpgmza-tabs-container .ui-tabs-panel > .wpgmza-upsell {
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
    margin-top: 0;
  }
  .wpgmza-atlas-major.wpgmza-tabs-container .ui-tabs-panel .heading.has-section + .wpgmza-upsell {
    margin-top: 20px;
  }

  /* Pro feature locking in settings */
  .wpgmza-atlas-major.wpgmza-tabs-container .tab-row.wpgmza-pro-feature .title:not(:empty)::after {
    content: "Pro";
    background: var(--am-pro-soft);
    color: var(--am-pro-text);
    border: 1px solid var(--am-pro-border);
    text-transform: uppercase;
    font-size: 9px;
    font-weight: 700;
    padding: 0 5px;
    border-radius: 3px;
    line-height: 16px;
    margin-left: 5px;
    letter-spacing: 0.04em;
  }
  .wpgmza-atlas-major.wpgmza-tabs-container .tab-row.wpgmza-pro-feature .wpgmza-check-card-selector,
  .wpgmza-atlas-major.wpgmza-tabs-container .tab-row.wpgmza-pro-feature .wpgmza-infowindow-style-picker,
  .wpgmza-atlas-major.wpgmza-tabs-container .tab-row.wpgmza-pro-feature .wpgmza-preset-input-controller,
  .wpgmza-atlas-major.wpgmza-tabs-container .tab-row.wpgmza-pro-feature .wpgmza-css-state-block {
    pointer-events: none;
  }
  .wpgmza-atlas-major.wpgmza-tabs-container .tab-row.wpgmza-pro-feature .wpgmza-css-state-block .wpgmza-css-state-block-content {
    display: none;
  }

  /* Cards in settings */
  .wpgmza-atlas-major.wpgmza-tabs-container .ui-tabs-panel .wpgmza-card {
    position: relative;
    padding: 12px 16px;
    border-radius: var(--am-radius);
    border: 1px solid var(--am-border);
    background: var(--am-surface);
  }
  .wpgmza-atlas-major.wpgmza-tabs-container .ui-tabs-panel .wpgmza-card.wpgmza-upsell {
    padding: 14px 16px;
    background: var(--am-pro-soft);
    border-color: var(--am-pro-border);
    width: auto;
    margin-left: 0;
  }

  /* Code editor */
  .wpgmza-atlas-major.wpgmza-tabs-container .script-tag {
    min-height: 300px;
    background: var(--am-text-1);
    border: none;
    color: white;
    padding: 15px;
    border-radius: var(--am-radius-sm);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
  }
  .wpgmza-atlas-major.wpgmza-tabs-container .script-tag + .CodeMirror {
    flex-basis: 75%;
    border-radius: var(--am-radius-sm);
  }

  /* System info */
  .wpgmza-atlas-major.wpgmza-tabs-container .ui-tabs-panel .system-info {
    width: 100%;
    background: var(--am-bg);
    padding: 10px;
    margin: 0;
    border-radius: var(--am-radius-sm);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
  }

  /* File inputs */
  .wpgmza-atlas-major.wpgmza-tabs-container .ui-tabs-panel input[type="file"] {
    padding: 15px 20px;
    border: 2px dashed var(--am-border);
    border-radius: var(--am-radius-sm);
  }

  /* Danger zone buttons */
  .wpgmza-atlas-major.wpgmza-tabs-container button.wpgmza_destroy_data {
    min-width: 130px;
  }

  /* Toggle switches in settings */
  .wpgmza-atlas-major.wpgmza-tabs-container .tab-row > .switch {
    margin-top: 5px;
    max-width: none;
    flex-basis: 75%;
  }

  /* GDPR section */
  .wpgmza-atlas-major.wpgmza-tabs-container .ui-tabs-panel .gdpr-usage-notice p,
  .wpgmza-atlas-major.wpgmza-tabs-container .ui-tabs-panel .general-heading-notice p {
    font-size: 12px;
    margin-top: 0;
    font-style: italic;
    color: var(--am-text-3);
  }

  /* WP Go Maps Cloud — Pro-only complementary upsell card.
     Shown in two locations to Pro users:
       1. Bottom of Settings → General tab.
       2. Bottom of map editor → General Settings sidebar group.
     Visual treatment deliberately different from the Pro-purchase
     upsells (`.wpgmza-upsell.wpgmza-card`, which use Pro purple
     accents) — a soft cyan / sky-blue palette signals "different
     product, same family" rather than "upgrade tier". Framed in
     the markup as "Also from WP Go Maps" so the messaging reads
     complementary (a standalone cloud service for non-WordPress
     platforms) rather than as an upgrade away from the Pro
     plugin. Block layout (no flex wrapper) because the cloud
     icon now sits inline with the eyebrow text, freeing the
     full card width for the headline / body / platform pills /
     CTA. */
  .wpgmza-atlas-major .am-cloud-upsell {
    padding: 18px 20px;
    margin: 24px 0px;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: var(--am-radius);
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    color: #0c4a6e;
    box-sizing: border-box;
  }
  .wpgmza-atlas-major .am-cloud-upsell-eyebrow {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #0284c7;
    margin-bottom: 8px;
  }
  .wpgmza-atlas-major .am-cloud-upsell-eyebrow svg {
    flex-shrink: 0;
  }
  .wpgmza-atlas-major .am-cloud-upsell-title {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    color: #0c4a6e;
  }
  .wpgmza-atlas-major .am-cloud-upsell-text {
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.55;
    color: #075985;
  }
  /* Platform pills — small chips that act as scannable proof
     points for "embed anywhere". Decorative (`aria-hidden`) since
     the same platforms are named in the body copy above. White
     fill against the cyan card background gives them a "tag"
     feel without competing with the CTA. */
  .wpgmza-atlas-major .am-cloud-upsell-platforms {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 16px;
  }
  .wpgmza-atlas-major .am-cloud-upsell-platform {
    display: inline-flex;
    padding: 3px 9px;
    background: #ffffff;
    border: 1px solid #bae6fd;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 600;
    color: #0c4a6e;
    line-height: 1.5;
  }
  .wpgmza-atlas-major .am-cloud-upsell-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #0284c7;
    color: #ffffff !important;
    border: 1px solid #0284c7;
    border-radius: var(--am-radius-sm);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.12s var(--am-ease), border-color 0.12s var(--am-ease);
  }
  .wpgmza-atlas-major .am-cloud-upsell-cta:hover,
  .wpgmza-atlas-major .am-cloud-upsell-cta:focus {
    background: #0369a1;
    border-color: #0369a1;
    color: #ffffff !important;
    text-decoration: none;
  }

  /* Auto-image (background image containers) */
  .wpgmza-atlas-major .wpgmza-auto-image {
    position: relative;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
  .wpgmza-atlas-major .wpgmza-auto-image img {
    display: block;
    position: relative;
    max-width: 90%;
    margin: auto;
    max-height: 100%;
    flex-shrink: 1;
  }

  /* Info-window style picker — "Global" card was previously
     compressed to 45px tall with a 25x30 icon, matching Atlas
     Novus's compact-pill treatment. Reverted to render at the same
     size as the other style cards (matches the rest of the picker
     grid visually); the inherit checkmark icon just sits centered
     in a regular-sized card. */

  /* Marker info-window Edit / Delete buttons (admin map editor only).
     Base plugin emits these in info-window.js:121-132 as
     `<a class="wpgmza_edit_btn|wpgmza_del_btn" style="width:15px"><i class="fa fa-edit|fa-trash"></i></a>`
     — bare icon links with an inline 15px width. The icon-only look
     reads as decoration rather than an interactive button. Restyle
     them as compact secondary pills with short "Edit" / "Delete"
     labels; the original "Edit this marker" / "Delete this marker"
     title attribute is preserved as the hover tooltip. Labels are
     CSS-hardcoded English (the source title is hardcoded English in
     info-window.js too, so no i18n regression — both can be revisited
     together if needed). Override inline `width:15px` with
     !important. Scoped to the marker editor — frontend / Novus
     editor info windows are unaffected. Also covers
     `.wpgmza-panel-info-window` so the same styling applies once
     Panel / Card info windows get edit/delete injected (Pro JS
     change handles that — see ATLAS-MAJOR-CORE-CHANGES.md). */
  .wpgmza-atlas-major .wpgmza_map .wpgmza_edit_btn,
  .wpgmza-atlas-major .wpgmza_map .wpgmza_del_btn,
  .wpgmza-atlas-major .wpgmza-panel-info-window .wpgmza_edit_btn,
  .wpgmza-atlas-major .wpgmza-panel-info-window .wpgmza_del_btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: auto !important;
    padding: 1px 8px;
    margin: 4px 2px 0;
    background: var(--am-surface);
    color: var(--am-text-2);
    border: 1px solid var(--am-border);
    border-radius: var(--am-radius-sm);
    font-family: var(--am-sans);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    letter-spacing: 0.01em;
    transition: all 0.12s var(--am-ease);
  }
  .wpgmza-atlas-major .wpgmza_map .wpgmza_edit_btn:hover,
  .wpgmza-atlas-major .wpgmza-panel-info-window .wpgmza_edit_btn:hover {
    border-color: var(--am-text-3);
    color: var(--am-text-1);
    background: var(--am-bg);
  }
  .wpgmza-atlas-major .wpgmza_map .wpgmza_del_btn:hover,
  .wpgmza-atlas-major .wpgmza-panel-info-window .wpgmza_del_btn:hover {
    border-color: var(--am-accent);
    color: var(--am-accent);
    background: var(--am-accent-soft);
  }
  .wpgmza-atlas-major .wpgmza_map .wpgmza_edit_btn::after,
  .wpgmza-atlas-major .wpgmza-panel-info-window .wpgmza_edit_btn::after {
    content: "Edit";
  }
  .wpgmza-atlas-major .wpgmza_map .wpgmza_del_btn::after,
  .wpgmza-atlas-major .wpgmza-panel-info-window .wpgmza_del_btn::after {
    content: "Delete";
  }
  .wpgmza-atlas-major .wpgmza_map .wpgmza_edit_btn .fa,
  .wpgmza-atlas-major .wpgmza_map .wpgmza_del_btn .fa,
  .wpgmza-atlas-major .wpgmza-panel-info-window .wpgmza_edit_btn .fa,
  .wpgmza-atlas-major .wpgmza-panel-info-window .wpgmza_del_btn .fa {
    font-size: 11px;
  }
  /* Card panel info-window has tighter content density than the
     full Panel style, so the edit/delete pills get scaled down a
     notch to match the card's smaller text/spacing. */
  .wpgmza-atlas-major .wpgmza-panel-info-window-style-card .wpgmza_edit_btn,
  .wpgmza-atlas-major .wpgmza-panel-info-window-style-card .wpgmza_del_btn {
    padding: 0 6px;
    gap: 3px;
    font-size: 10px;
    margin-top: 2px;
  }
  .wpgmza-atlas-major .wpgmza-panel-info-window-style-card .wpgmza_edit_btn .fa,
  .wpgmza-atlas-major .wpgmza-panel-info-window-style-card .wpgmza_del_btn .fa {
    font-size: 10px;
  }

  /* Thin info window — restructure right column so Edit/Delete sit
     side-by-side at the end (like Panel/Card), and lift the
     max-height so the popup doesn't scroll. Pro's base CSS
     (wp-google-maps-pro/css/atlas-major/components.css:2556-2563)
     sets the column to flex-direction:column with max-height:90px,
     which forces the buttons to stretch to full width via
     align-items:stretch and stacks them vertically — and 90px
     isn't tall enough for title + address + Find Nearby/Share
     wrapper + two buttons, so the whole popup scrolls. Override
     to flex-flow:row wrap, force text/links wrappers onto their
     own rows via flex-basis:100%, and let the buttons stay
     auto-sized so they wrap together on a final row.

     Specificity: Pro's selector uses `.wpgmza_map` (3 classes).
     We include both `.wpgmza-atlas-major` AND `.wpgmza_map` to
     reach 4 classes so we win regardless of stylesheet load
     order — Pro's CSS loads after Atlas Major's in the
     enqueue chain, so equal-specificity rules from Pro would
     otherwise win the cascade. justify-content:flex-start
     + align-content:flex-start force items to pack left/top
     instead of distributing across the cross-axis when the
     wrapped row has free space.
     justify-content/align-content protect against any future
     Pro CSS that might add distribution.
     `flex-direction: row !important` belt-and-braces: even if
     Pro adds another `flex-direction: column` later,
     row-wrap layout stays. */
  .wpgmza-atlas-major .wpgmza_map .wpgmza-infowindow-style-thin-inner-row .wpgmza-infowindow-style-thin-column-right {
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    justify-content: flex-start;
    max-height: 180px;
  }
  .wpgmza-atlas-major .wpgmza_map .wpgmza-infowindow-style-thin-inner-row .wpgmza-infowindow-style-thin-column-right > p,
  .wpgmza-atlas-major .wpgmza_map .wpgmza-infowindow-style-thin-inner-row .wpgmza-infowindow-style-thin-column-right > div {
    flex: 0 0 100%;
    width: 100%;
  }
  .wpgmza-atlas-major .wpgmza_map .wpgmza-infowindow-style-thin-inner-row .wpgmza-infowindow-style-thin-column-right > .wpgmza_edit_btn,
  .wpgmza-atlas-major .wpgmza_map .wpgmza-infowindow-style-thin-inner-row .wpgmza-infowindow-style-thin-column-right > .wpgmza_del_btn {
    flex: 0 0 auto;
    width: auto !important;
  }

  /* Restore default cursor over inner-stack panels (directions
     box, panel/card info window). Leaflet's `.leaflet-grab` class
     sets `cursor: grab` on the map container; it inherits down
     into child elements including our overlay panels, leaving the
     "open hand" cursor visible while hovering text/buttons inside
     them. Force `cursor: default` on the panel containers and
     `cursor: pointer` on actual interactive elements (buttons,
     close icons) so the panel feels like a regular UI surface
     rather than something you'd drag the map by. Scoped to
     Atlas Major. Map surface itself keeps its grab cursor. */
  .wpgmza-atlas-major .wpgmza_map .wpgmza-inner-stack,
  .wpgmza-atlas-major .wpgmza_map .wpgmza-inner-stack *,
  .wpgmza-atlas-major .wpgmza_map .wpgmza-panel-info-window,
  .wpgmza-atlas-major .wpgmza_map .wpgmza-panel-info-window *,
  .wpgmza-atlas-major .wpgmza_map .wpgmza-directions-box,
  .wpgmza-atlas-major .wpgmza_map .wpgmza-directions-box * {
    cursor: default;
  }
  .wpgmza-atlas-major .wpgmza_map .wpgmza-inner-stack a,
  .wpgmza-atlas-major .wpgmza_map .wpgmza-inner-stack button,
  .wpgmza-atlas-major .wpgmza_map .wpgmza-inner-stack input[type="button"],
  .wpgmza-atlas-major .wpgmza_map .wpgmza-inner-stack input[type="submit"],
  .wpgmza-atlas-major .wpgmza_map .wpgmza-inner-stack [role="button"],
  .wpgmza-atlas-major .wpgmza_map .wpgmza-inner-stack .wpgmza-close,
  .wpgmza-atlas-major .wpgmza_map .wpgmza-inner-stack .wpgmza-clear,
  .wpgmza-atlas-major .wpgmza_map .wpgmza-inner-stack .grouping-handle,
  .wpgmza-atlas-major .wpgmza_map .wpgmza-inner-stack select,
  .wpgmza-atlas-major .wpgmza_map .wpgmza-inner-stack label {
    cursor: pointer;
  }
  .wpgmza-atlas-major .wpgmza_map .wpgmza-inner-stack input[type="text"],
  .wpgmza-atlas-major .wpgmza_map .wpgmza-inner-stack input[type="search"],
  .wpgmza-atlas-major .wpgmza_map .wpgmza-inner-stack input[type="number"],
  .wpgmza-atlas-major .wpgmza_map .wpgmza-inner-stack textarea,
  .wpgmza-atlas-major .wpgmza_map .wpgmza-directions-box input[type="text"],
  .wpgmza-atlas-major .wpgmza_map .wpgmza-directions-box input[type="search"] {
    cursor: text;
  }

  /* Panel + Card info-window: edit/delete actions overlay the
     image / placeholder at bottom-left. populatePanel() injects
     them inside .wpgmza-iw-image-wrap (which is position:relative).
     White-translucent background + subtle shadow so they stay
     legible whether they're sitting over the gradient placeholder
     or over a real marker image. */
  .wpgmza-atlas-major .wpgmza-panel-info-window .wpgmza-iw-image-wrap .wpgmza-panel-info-window-admin-actions {
    position: absolute;
    bottom: 8px;
    left: 8px;
    z-index: 2;
    display: flex;
    gap: 4px;
  }
  .wpgmza-atlas-major .wpgmza-panel-info-window .wpgmza-iw-image-wrap .wpgmza-panel-info-window-admin-actions .wpgmza_edit_btn,
  .wpgmza-atlas-major .wpgmza-panel-info-window .wpgmza-iw-image-wrap .wpgmza-panel-info-window-admin-actions .wpgmza_del_btn {
    margin: 0;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  }
  .wpgmza-atlas-major .wpgmza-panel-info-window .wpgmza-iw-image-wrap .wpgmza-panel-info-window-admin-actions .wpgmza_edit_btn:hover,
  .wpgmza-atlas-major .wpgmza-panel-info-window .wpgmza-iw-image-wrap .wpgmza-panel-info-window-admin-actions .wpgmza_del_btn:hover {
    background: rgba(255, 255, 255, 1);
  }

  /* Theme/Tileset panel containers */
  .wpgmza-atlas-major .wpgmza-tileset-panel,
  .wpgmza-atlas-major .wpgmza-theme-panel {
    overflow-y: auto;
    max-height: calc(100% - 200px);
    padding: 0 20px 20px;
  }
  .wpgmza-atlas-major #wpgmza-tileset-panel,
  .wpgmza-atlas-major #wpgmza-theme-panel,
  .wpgmza-atlas-major #wpgmza-ol-theme-panel,
  .wpgmza-atlas-major #wpgmza-leaflet-theme-panel {
    margin-bottom: 20px;
    margin-top: 10px;
  }

  /* Tileset/Theme selection grid — 2 column square cards */
  .wpgmza-atlas-major .tileset-selection-panel,
  .wpgmza-atlas-major .theme-selection-panel,
  .wpgmza-atlas-major .ol-theme-selection-panel,
  .wpgmza-atlas-major .leaflet-theme-selection-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    max-width: 100%;
  }

  /* Individual tileset/theme option cards */
  .wpgmza-atlas-major .tileset-option,
  .wpgmza-atlas-major .theme-option {
    max-width: 100%;
    position: relative;
    box-sizing: border-box;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    border-radius: var(--am-radius);
    overflow: hidden;
    line-height: 0;
    border: 3px solid var(--am-surface);
    aspect-ratio: 1 / 1;
    cursor: pointer;
    transition: outline 0.12s var(--am-ease);
  }
  .wpgmza-atlas-major .tileset-selection-panel label.tileset-option,
  .wpgmza-atlas-major .ol-theme-selection-panel label.theme-option,
  .wpgmza-atlas-major .leaflet-theme-selection-panel label.theme-option {
    max-height: 200px;
  }

  /* Hover/selected state */
  .wpgmza-atlas-major .tileset-option:focus-within,
  .wpgmza-atlas-major .tileset-option:hover,
  .wpgmza-atlas-major .tileset-option.selected,
  .wpgmza-atlas-major .theme-option:focus-within,
  .wpgmza-atlas-major .theme-option:hover {
    outline: 3px solid var(--am-accent);
  }

  /* Hide radio inputs */
  .wpgmza-atlas-major .tileset-option input[type="radio"],
  .wpgmza-atlas-major .theme-option input[type="radio"] {
    display: none;
  }

  /* Preview image — cover the card */
  .wpgmza-atlas-major .tileset-option img,
  .wpgmza-atlas-major .theme-option img {
    height: 100%;
    width: auto;
    max-width: unset;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  /* Button — hidden below card, slides up on hover */
  .wpgmza-atlas-major .tileset-option button,
  .wpgmza-atlas-major .theme-option button {
    position: absolute;
    bottom: -40px;
    left: 0;
    right: 0;
    background: var(--am-surface);
    border: none;
    border-radius: 0;
    font-weight: 600;
    font-size: 11px;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    z-index: 2;
    padding: 8px;
    cursor: pointer;
    transition: bottom 0.2s var(--am-ease);
  }
  .wpgmza-atlas-major .tileset-option:hover button,
  .wpgmza-atlas-major .theme-option:hover button {
    bottom: 0;
  }

  /* Label — hidden above card, slides down on hover */
  .wpgmza-atlas-major .tileset-option span,
  .wpgmza-atlas-major .theme-option span {
    position: absolute;
    top: -30px;
    left: 0;
    right: 0;
    background: var(--am-surface);
    font-size: 10px;
    font-weight: 600;
    height: 20px;
    line-height: 10px;
    text-align: center;
    box-sizing: border-box;
    padding: 5px;
    z-index: 2;
    transition: top 0.2s var(--am-ease);
  }
  .wpgmza-atlas-major .tileset-option:hover span,
  .wpgmza-atlas-major .theme-option:hover span,
  .wpgmza-atlas-major .tileset-option.selected span {
    top: 0;
  }

  /* Default/vector tileset (no image preview) */
  .wpgmza-atlas-major .tileset-option.tileset-default,
  .wpgmza-atlas-major .tileset-option.as-vector {
    background: var(--am-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  .wpgmza-atlas-major .tileset-option.tileset-default span,
  .wpgmza-atlas-major .tileset-option.as-vector span {
    position: relative;
    top: 0;
    background: none;
    font-size: 14px;
    font-weight: 600;
    height: auto;
    line-height: 1.4;
  }
  .wpgmza-atlas-major .tileset-option.tileset-default small {
    font-size: 11px;
    color: var(--am-text-3);
    line-height: 1.4;
  }

  /* Error state */
  .wpgmza-atlas-major .tileset-option.tileset-panel-error img,
  .wpgmza-atlas-major .theme-option.theme-panel-error img {
    display: none;
  }
  .wpgmza-atlas-major .tileset-option.tileset-panel-error:before,
  .wpgmza-atlas-major .theme-option.theme-panel-error:before {
    content: "Could not fetch preview";
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--am-bg);
    color: var(--am-text-3);
  }

  /* Vector fallback */
  .wpgmza-atlas-major .tileset-option.as-vector:after {
    content: "Could not fetch preview (Vector)";
    font-size: 11px;
    color: var(--am-text-3);
  }

  /* ==========================================================
     CSS FILTER THEME EDITOR (Leaflet/OL theme editor)
     ========================================================== */

  /* Filter item cards */
  .wpgmza-atlas-major .wpgmza-css-filter-input-wrapper .css-filter-item-wrap {
    display: flex;
    flex-direction: column;
    padding: 10px 14px;
    background: var(--am-bg);
    border-radius: var(--am-radius-sm);
    border: 1px solid var(--am-border-subtle);
    margin-bottom: 8px;
    transition: opacity 0.2s var(--am-ease);
  }

  /* Toggle row */
  .wpgmza-atlas-major .wpgmza-css-filter-input-wrapper .css-filter-item-wrap .css-filter-toggle-wrap {
    width: 100%;
    text-align: left;
    padding: 0;
    box-sizing: border-box;
  }
  .wpgmza-atlas-major .wpgmza-css-filter-input-wrapper .css-filter-item-wrap .css-filter-toggle-wrap label {
    text-transform: capitalize;
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--am-text-1);
    cursor: pointer;
  }

  /* Hide raw checkbox input */
  .wpgmza-atlas-major .wpgmza-css-filter-input-wrapper .css-filter-item-wrap input {
    display: none;
  }

  /* Controls hidden when not enabled */
  .wpgmza-atlas-major .wpgmza-css-filter-input-wrapper .css-filter-item-wrap:not(.enabled) .css-filter-control-wrap {
    display: none;
  }

  /* Control area (slider + value) */
  .wpgmza-atlas-major .wpgmza-css-filter-input-wrapper .css-filter-control-wrap {
    box-sizing: border-box;
    max-width: 100%;
    position: relative;
    margin-top: 8px;
  }
  .wpgmza-atlas-major .wpgmza-css-filter-input-wrapper .css-filter-control-wrap small {
    position: absolute;
    top: -20px;
    right: 0;
    font-weight: 600;
    font-size: 12px;
    color: var(--am-text-2);
    font-family: 'IBM Plex Mono', monospace;
  }
  .wpgmza-atlas-major .wpgmza-css-filter-input-wrapper .css-filter-control-wrap .ui-slider .ui-slider-handle {
    transform: translateX(-50%) !important;
  }

  /* Inactive state */
  .wpgmza-atlas-major .wpgmza-css-filter-input-wrapper .css-filter-item-wrap:not(.enabled) {
    opacity: 0.6;
  }
  .wpgmza-atlas-major .wpgmza-css-filter-input-wrapper .css-filter-item-wrap:not(.enabled):hover {
    opacity: 0.85;
  }

  /* Active state */
  .wpgmza-atlas-major .wpgmza-css-filter-input-wrapper .css-filter-item-wrap.enabled {
    opacity: 1;
    background: var(--am-surface);
    border-color: var(--am-border);
  }

  /* Inactive label — show "(Inactive)" */
  .wpgmza-atlas-major .wpgmza-css-filter-input-wrapper .css-filter-item-wrap:not(.enabled) .css-filter-toggle-wrap label {
    position: relative;
  }
  .wpgmza-atlas-major .wpgmza-css-filter-input-wrapper .css-filter-item-wrap:not(.enabled) .css-filter-toggle-wrap label:after {
    content: "(Inactive)";
    margin-left: 5px;
    font-size: 11px;
    font-weight: 400;
    color: var(--am-text-3);
    position: absolute;
    right: 0;
    top: 2px;
  }

  /* Theme editor note */
  .wpgmza-atlas-major #wpgmza-leaflet-theme-editor .hint,
  .wpgmza-atlas-major #wpgmza-ol-theme-editor .hint {
    font-size: 11px;
    color: var(--am-text-3);
    margin-top: 12px;
    font-style: italic;
  }

  /* Google Maps theme editor */
  .wpgmza-atlas-major #wpgmza-theme-editor {
    padding: 10px 0;
  }
  .wpgmza-atlas-major #wpgmza-theme-editor fieldset {
    margin-top: 10px;
    border: none;
    padding: 0;
  }
  .wpgmza-atlas-major #wpgmza-theme-editor fieldset legend {
    font-size: 11px;
    font-weight: 600;
    color: var(--am-text-2);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 5px;
  }
  .wpgmza-atlas-major #wpgmza-theme-editor select,
  .wpgmza-atlas-major #wpgmza-theme-editor input {
    padding: 8px 12px;
    border: 1px solid var(--am-border);
    border-radius: var(--am-radius-sm);
    font-size: 13px;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    width: 100%;
    box-sizing: border-box;
  }
  .wpgmza-atlas-major #wpgmza-theme-editor__edit {
    margin-top: 10px;
  }

  /* Theme data textarea */
  .wpgmza-atlas-major .wpgmza_theme_data_container textarea {
    width: 100%;
    min-height: 200px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    padding: 12px;
    border: 1px solid var(--am-border);
    border-radius: var(--am-radius-sm);
    background: var(--am-text-1);
    color: white;
    resize: vertical;
  }

  /* Multi-layer preview */
  .wpgmza-atlas-major .tileset-option .as-multi-layer {
    position: absolute;
    bottom: 0;
    width: 50%;
    overflow: hidden;
    height: 100%;
    right: 0;
    z-index: 1;
  }
  .wpgmza-atlas-major .tileset-option .as-multi-layer img.as-layer {
    left: 0;
  }

  /* Check-card selector (radio card grids — marker listings, info windows, etc.) */
  /* Wrapper layout — Atlas Major enhancement over Novus to lay out
     the cards in a wrap-flex row. Card/hover/checked/span rules
     are intentionally NOT defined here; the authoritative block is
     further down (line ~7234) and mirrors Novus exactly, with no
     transition declaration. */
  .wpgmza-atlas-major .wpgmza-check-card-selector {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  /* Inline field patterns in settings page */
  .wpgmza-atlas-major.wpgmza-tabs-container .wpgmza-inline-dropdown {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .wpgmza-atlas-major.wpgmza-tabs-container .wpgmza-inline-field {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .wpgmza-atlas-major.wpgmza-tabs-container .multi-field {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  /* Engine selector cards */
  .wpgmza-atlas-major .wpgmza-map-engine-selector {
    max-width: 100%;
    flex-basis: 75%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .wpgmza-atlas-major .wpgmza-map-engine-selector .wpgmza-map-engine-selector-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }
  .wpgmza-atlas-major .wpgmza-map-engine-selector .wpgmza-map-engine-selector-grid .wpgmza-map-engine-item {
    width: 130px;
    box-sizing: border-box;
    cursor: pointer;
    height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
    position: relative;
    flex-shrink: 0;
  }
  .wpgmza-atlas-major .wpgmza-map-engine-selector .wpgmza-map-engine-item img {
    max-width: 100%;
    max-height: 32px;
    filter: grayscale(100%);
    opacity: 0.4;
    transition: all 0.2s var(--am-ease);
  }
  .wpgmza-atlas-major .wpgmza-map-engine-selector .wpgmza-map-engine-item span {
    position: absolute;
    font-weight: 600;
    color: var(--am-text-1);
    font-size: 11px;
    opacity: 0.4;
    left: 50%;
    transform: translateX(-50%);
    bottom: 12px;
    white-space: nowrap;
    transition: opacity 0.2s var(--am-ease);
  }
  .wpgmza-atlas-major .wpgmza-map-engine-selector .wpgmza-map-engine-item span + img {
    position: relative;
    top: -6px;
  }
  .wpgmza-atlas-major .wpgmza-map-engine-selector .wpgmza-map-engine-item > * {
    position: relative;
    z-index: 2;
  }
  .wpgmza-atlas-major .wpgmza-map-engine-selector .wpgmza-map-engine-item input {
    display: none;
  }
  /* Hover & checked states */
  .wpgmza-atlas-major .wpgmza-map-engine-selector .wpgmza-map-engine-item:hover img,
  .wpgmza-atlas-major .wpgmza-map-engine-selector .wpgmza-map-engine-item:hover span,
  .wpgmza-atlas-major .wpgmza-map-engine-selector .wpgmza-map-engine-item input:checked ~ img,
  .wpgmza-atlas-major .wpgmza-map-engine-selector .wpgmza-map-engine-item input:checked ~ span,
  .wpgmza-atlas-major .wpgmza-map-engine-selector .wpgmza-map-engine-item:hover .wpgmza-map-engine-item-backdrop,
  .wpgmza-atlas-major .wpgmza-map-engine-selector .wpgmza-map-engine-item input:checked ~ .wpgmza-map-engine-item-backdrop {
    filter: none;
    opacity: 1;
  }
  /* Backdrop */
  .wpgmza-atlas-major .wpgmza-map-engine-selector .wpgmza-map-engine-item .wpgmza-map-engine-item-backdrop {
    display: block;
    background: var(--am-bg);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    opacity: 0;
    border-radius: var(--am-radius-sm);
    border: 1px solid var(--am-border);
    transition: all 0.2s var(--am-ease);
  }
  .wpgmza-atlas-major .wpgmza-map-engine-selector .wpgmza-map-engine-item input:checked ~ .wpgmza-map-engine-item-backdrop {
    background: var(--am-bg);
    border-color: var(--am-text-1);
    opacity: 1;
  }
  /* Installer shortcut card — last item in the engine grid, same size
     as engine items but with text instead of logo. Matches Novus. */
  .wpgmza-atlas-major .wpgmza-map-engine-selector .wpgmza-map-engine-selector-grid .wpgmza-map-engine-item-installer {
    width: 130px;
    height: 80px;
    box-sizing: border-box;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px;
    background: var(--am-bg);
    border: 1px solid var(--am-border);
    border-radius: var(--am-radius-sm);
    color: var(--am-text-2);
    font-size: 11px;
    line-height: 1.35;
    text-decoration: none;
    opacity: 0.75;
    transition: all 0.2s var(--am-ease);
  }
  .wpgmza-atlas-major .wpgmza-map-engine-selector .wpgmza-map-engine-selector-grid .wpgmza-map-engine-item-installer:hover {
    opacity: 1;
    border-color: var(--am-text-3);
    color: var(--am-text-1);
    box-shadow: var(--wpgmza-shadow-common);
  }
  .wpgmza-atlas-major .wpgmza-map-engine-selector .wpgmza-map-engine-selector-grid .wpgmza-map-engine-item-installer strong {
    font-size: 11px;
    font-weight: 700;
    color: var(--am-text-1);
    margin-bottom: 2px;
    display: block;
  }
  .wpgmza-atlas-major .wpgmza-map-engine-selector .wpgmza-map-engine-selector-grid .wpgmza-map-engine-item-installer span {
    display: block;
  }

  /* Powered-by badge */
  .wpgmza-atlas-major .wpgmza-map-engine-powered-by {
    background: var(--am-bg);
    border: 1px solid var(--am-border);
    width: fit-content;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 11px;
    color: var(--am-text-3);
  }

  /* Addition tabs (plugin add-on tabs).
     `.addition-tabs` is a wrapper sibling of the main .ui-tabs-panel
     children, so we float it at 82% to sit beside the 18% .ui-tabs-nav.
     Its inner .ui-tabs-panel then fills that wrapper at 100%. Without
     the wrapper float, the panel stacks below the nav. */
  .wpgmza-atlas-major.wpgmza-tabs-container .addition-tabs {
    width: 82%;
    float: left;
    box-sizing: border-box;
  }
  .wpgmza-atlas-major.wpgmza-tabs-container .addition-tabs .ui-tabs-panel {
    width: 100%;
    float: none;
  }

  /* Writeup containers (welcome, credits, support pages) */
  .wpgmza-atlas-major .wpgmza-writeup-tabs {
    width: 1100px;
    max-width: calc(100% - 20px);
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    margin-top: 60px;
    box-sizing: border-box;
  }
  .wpgmza-atlas-major .wpgmza-writeup-tabs .tab {
    padding: 5px 20px;
    font-size: 14px;
    border-radius: 100px;
    text-decoration: none;
    color: var(--am-text-2);
    font-weight: 500;
    margin-right: 8px;
    transition: background 0.2s var(--am-ease);
  }
  .wpgmza-atlas-major .wpgmza-writeup-tabs .tab:hover {
    background: var(--am-bg);
  }
  .wpgmza-atlas-major .wpgmza-writeup-tabs .tab.tab-active {
    background: var(--am-text-1);
    color: white;
  }
  /* Writeup block — placeholder, full styles outside @layer */
  .wpgmza-atlas-major.wpgmza-writeup-block { /* see outside-layer block */ }

  /* ==========================================================
     SETTINGS-PAGE WIDGETS — ports of Novus admin CSS
     Atlas Major skips enqueuing css/atlas-novus/wp-google-maps-admin.css
     (per includes/class.script-loader.php), so the JS-rendered admin
     widgets on the Settings page (and anywhere else they appear)
     inherit nothing. The following blocks port the visual rules from
     Novus's wp-google-maps-admin.css into the Atlas Major layer,
     scoped under `.wpgmza-atlas-major`, and retuned to the AM token
     palette (--am-border / --am-bg / --am-text-*).
     ========================================================== */

  /* ----- Settings-page upsells — unified with map-list banner style
     DOM: <div class="wpgmza-upsell wpgmza-card wpgmza-shadow">
            <a>link</a> text <a class="wpgmza-upsell-button">CTA</a>
          </div>
     We give this the same horizontal banner treatment as the map-list
     page's `.am-upsell-banner` (purple icon square on left, body text
     in middle, solid-purple CTA button pushed right with auto margin).
     Overrides the existing .wpgmza-tabs-container .wpgmza-upsell rule
     and the .wpgmza-tabs-container .wpgmza-card.wpgmza-upsell padding
     rule via higher specificity. */
  .wpgmza-atlas-major.wpgmza-tabs-container .ui-tabs-panel .wpgmza-upsell.wpgmza-card {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 18px;
    background: var(--am-pro-soft);
    border: 1px solid var(--am-pro-border);
    border-radius: var(--am-radius-lg);
    box-shadow: none;
    font-size: 13px;
    line-height: 1.5;
    color: var(--am-pro-text);
    opacity: 1; /* Override the compact .wpgmza-upsell opacity:0.75 */
    margin-left:20px;
  }
  /* Purple square with white lightning icon on the left, matching
     .am-upsell-banner .am-upsell-icon on the map listing page. */
  .wpgmza-atlas-major.wpgmza-tabs-container .ui-tabs-panel .wpgmza-upsell.wpgmza-card::before {
    content: "";
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background-color: var(--am-pro);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='13 2 3 14 12 14 11 22 21 10 12 10'/%3E%3C/svg%3E");
    background-size: 16px;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: var(--am-radius-sm);
    /* Kill any inherited display:none from other .wpgmza-upsell::before rules */
    display: block;
  }
  /* Body links (inline "Change Info Window Styles" etc) */
  .wpgmza-atlas-major.wpgmza-tabs-container .ui-tabs-panel .wpgmza-upsell.wpgmza-card a:not(.wpgmza-upsell-button) {
    color: var(--am-pro-text);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .wpgmza-atlas-major.wpgmza-tabs-container .ui-tabs-panel .wpgmza-upsell.wpgmza-card a:not(.wpgmza-upsell-button):hover {
    color: var(--am-pro);
  }
  /* Solid-purple CTA pushed to the right edge, matching .am-btn-pro
     on the map listing banner. */
  .wpgmza-atlas-major.wpgmza-tabs-container .ui-tabs-panel .wpgmza-upsell.wpgmza-card a.wpgmza-upsell-button {
    margin-left: auto;
    margin-top: 0;
    flex-shrink: 0;
    background: var(--am-pro);
    color: #ffffff;
    border: 1px solid var(--am-pro);
    padding: 7px 14px;
    border-radius: var(--am-radius-sm);
    font-size: 12px;
    font-weight: 600;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    text-decoration: none;
    letter-spacing: 0.01em;
    line-height: 1;
    cursor: pointer;
    transition: all 0.12s var(--am-ease);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    box-shadow: none;
  }
  .wpgmza-atlas-major.wpgmza-tabs-container .ui-tabs-panel .wpgmza-upsell.wpgmza-card a.wpgmza-upsell-button:hover {
    background: #6d28d9; /* --am-pro-hover */
    border-color: #6d28d9;
    color: #ffffff;
    transform: translateY(-1px);
    text-decoration: none;
  }

  /* ----- Tile Server Preview (Advanced → Map Style dropdown image) */
  .wpgmza-atlas-major .wpgmza-tile-server-preview-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 200px;
    height: 140px;
    box-shadow: var(--wpgmza-shadow-common);
    border: 3px solid #fff;
    background: var(--am-bg);
    box-sizing: border-box;
    border-radius: var(--am-radius-sm);
    position: relative;
    overflow: hidden;
  }
  .wpgmza-atlas-major .wpgmza-tile-server-preview-container::after {
    /* Loading spinner */
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    top: calc(60% - 10px);
    left: calc(50% - 10px);
    border: 4px solid #fff;
    border-top-color: transparent;
    border-left-color: transparent;
    border-radius: 40px;
    filter: drop-shadow(0 0 4px rgba(0,0,0,0.3));
    animation: wpgmzaLoadCircle 0.7s linear infinite;
    z-index: 2;
  }
  .wpgmza-atlas-major .wpgmza-tile-server-preview-container select {
    z-index: 2;
    border-radius: 0;
    width: 100%;
    border: none;
    box-shadow: var(--wpgmza-shadow-common);
  }
  .wpgmza-atlas-major .wpgmza-tile-server-preview-container .wpgmza-tile-server-preview-image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    display: none;
  }
  .wpgmza-atlas-major .wpgmza-tile-server-preview-container.preview-ready .wpgmza-tile-server-preview-image {
    display: block;
  }
  .wpgmza-atlas-major .wpgmza-tile-server-preview-wrapper-multi .wpgmza-tile-server-preview-image {
    left: 0;
  }
  .wpgmza-atlas-major .wpgmza-tile-server-preview-container.preview-ready::after,
  .wpgmza-atlas-major .wpgmza-tile-server-preview-container.preview-failed::after {
    display: none;
  }
  .wpgmza-atlas-major .wpgmza-tile-server-preview-container.preview-failed::before {
    content: "Could not fetch preview";
    position: absolute;
    bottom: 45px;
    font-size: 10px;
    opacity: 0.8;
  }
  .wpgmza-atlas-major .wpgmza-tile-server-preview-container .wpgmza-tile-server-preview-wrapper-multi {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 50%;
    height: 100%;
    overflow: hidden;
  }
  /* Vector fallback previews — when a vector tile provider can't be
     rendered as an XYZ image (OpenFreeMap Liberty/Bright/Positron etc),
     tile-server-preview.js stamps `data-failed-fallback` onto the
     container. These rules replace the "Could not fetch preview"
     label with a locally-hosted PNG of the style. Image paths are
     relative from `css/atlas-major/atlas-major.css` up to
     `images/<slug>.png`. */
  .wpgmza-atlas-major .wpgmza-tile-server-preview-container.preview-failed[data-failed-fallback]::before {
    content: "";
    opacity: 1;
    bottom: unset;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    width: 256px;
    height: 256px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  .wpgmza-atlas-major .wpgmza-tile-server-preview-container.preview-failed[data-failed-fallback="openfreemap-liberty"]::before {
    background-image: url('../../images/openfreemap-liberty.png');
  }
  .wpgmza-atlas-major .wpgmza-tile-server-preview-container.preview-failed[data-failed-fallback="openfreemap-bright"]::before {
    background-image: url('../../images/openfreemap-bright.png');
  }
  .wpgmza-atlas-major .wpgmza-tile-server-preview-container.preview-failed[data-failed-fallback="openfreemap-positron"]::before {
    background-image: url('../../images/openfreemap-positron.png');
  }

  /* ----- Boundary Input (Advanced → restrict map bounds) */
  .wpgmza-atlas-major .wpgmza-boundary-input {
    font-size: 0.9em;
  }
  .wpgmza-atlas-major .wpgmza-boundary-input .wpgmza-boundary-input-title {
    margin-bottom: 5px;
  }
  .wpgmza-atlas-major .wpgmza-boundary-input .wpgmza-boundary-input-controls {
    border: 1px solid var(--am-border);
    border-radius: var(--am-radius-sm);
  }
  .wpgmza-atlas-major .wpgmza-boundary-input .wpgmza-boundary-input-corner-title {
    background: var(--am-bg);
    padding: 5px;
    font-size: 0.9em;
  }
  .wpgmza-atlas-major .wpgmza-boundary-input .wpgmza-boundary-input-coorindate {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 10px;
  }
  .wpgmza-atlas-major .wpgmza-boundary-input .wpgmza-boundary-input-coorindate .wpgmza-boundary-component {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-grow: 1;
    font-size: 0.9em;
  }
  .wpgmza-atlas-major .wpgmza-boundary-input .wpgmza-boundary-input-coorindate .wpgmza-boundary-component input {
    width: 100%;
    font-size: 0.9em;
  }
  .wpgmza-atlas-major .wpgmza-boundary-input-quick-tools {
    display: flex;
    flex-direction: row;
    justify-content: end;
    margin-bottom: 5px;
    font-size: 0.9em;
  }
  .wpgmza-atlas-major .wpgmza-boundary-input-quick-tools .wpgmza-button.restrict-map-bounds-use-view {
    font-size: 0.9em;
    height: fit-content;
    min-height: unset;
    font-weight: 500;
  }

  /* ----- Backup item rows (Backup tab) */
  .wpgmza-atlas-major .wpgmza-backup-item {
    padding: 10px;
    margin-top: 10px;
    border: 1px solid var(--am-border);
    border-radius: var(--am-radius-sm);
  }
  .wpgmza-atlas-major .wpgmza-backup-item:first-child {
    margin-top: 0;
  }
  .wpgmza-atlas-major .wpgmza-backup-item > div {
    margin-bottom: 5px;
  }
  .wpgmza-atlas-major .wpgmza-backup-item > div.actions {
    margin-bottom: 0;
  }
  .wpgmza-atlas-major .wpgmza-backup-item div[data-name="title"] {
    font-weight: 600;
    color: var(--am-text-1);
  }

  /* ----- Persistent notice cards (top of admin pages)
     Note: the generic .wpgmza-card.notice rules above already style
     the base case. Here we neutralise the ! pseudo-icon and set the
     special-offer variant's colour treatment. */
  .wpgmza-atlas-major .wpgmza-card.wpgmza-persistent-notice {
    margin-left: 0;
    margin-right: 0;
    padding-left: 15px;
  }
  .wpgmza-atlas-major .wpgmza-card.wpgmza-persistent-notice h2 {
    margin-top: 5px;
    margin-bottom: 10px;
    font-size: 18px;
  }
  .wpgmza-atlas-major .wpgmza-card.wpgmza-persistent-notice::before {
    display: none; /* no ::before icon for persistent notices */
  }
  .wpgmza-atlas-major .wpgmza-card.wpgmza-persistent-notice.special-offer {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
    padding: 10px 14px;
    margin-top: 0;
    border: 1px solid var(--am-pro-border);
    border-radius: var(--am-radius);
    background: var(--am-pro-soft);
    color: var(--am-text-1);
  }
  .wpgmza-atlas-major .wpgmza-card.wpgmza-persistent-notice.special-offer .wpgmza-button {
    background: var(--am-pro);
    border: none;
    color: #fff;
    font-weight: 600;
    box-shadow: var(--wpgmza-shadow-common);
    width: fit-content;
    margin-top: 10px;
  }

  /* ----- Image single input — settings page variant
     The map-editor sidebar variant is already covered in the
     section at line ~4808. Settings page uses
     .wpgmza-tabs-container .ui-tabs-panel as the ancestor — we
     mirror the same rules for that context. */
  .wpgmza-atlas-major.wpgmza-tabs-container .ui-tabs-panel .wpgmza-image-single-input-wrapper {
    position: relative;
    cursor: pointer;
    border: 2px dashed var(--am-border);
    border-radius: var(--am-radius-sm);
    color: var(--am-text-3);
    transition: border-color 0.12s var(--am-ease), color 0.12s var(--am-ease);
    width: 135px;
  }
  .wpgmza-atlas-major.wpgmza-tabs-container .ui-tabs-panel .wpgmza-image-single-input-wrapper:hover {
    border-color: var(--am-text-3);
    color: var(--am-text-2);
  }
  .wpgmza-atlas-major.wpgmza-tabs-container .ui-tabs-panel .wpgmza-image-single-input-wrapper .wpgmza-image-single-input-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5px;
  }
  .wpgmza-atlas-major.wpgmza-tabs-container .ui-tabs-panel .wpgmza-image-single-input-wrapper .wpgmza-image-single-input-preview > div {
    min-height: 125px;
    font-size: 2.5em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .wpgmza-atlas-major.wpgmza-tabs-container .ui-tabs-panel .wpgmza-image-single-input-wrapper .wpgmza-image-single-input-preview img {
    max-width: 100%;
    border-radius: var(--am-radius-sm);
    transition: opacity 0.3s ease;
  }
  .wpgmza-atlas-major.wpgmza-tabs-container .ui-tabs-panel .wpgmza-image-single-input-wrapper:hover img {
    opacity: 0.7;
  }
  /* Reset button (X on top-right of uploaded image) — applies everywhere */
  .wpgmza-atlas-major .wpgmza-image-single-input-wrapper .wpgmza-image-single-input-reset {
    position: absolute;
    top: 3px;
    right: 3px;
    z-index: 9;
    background: var(--am-text-1);
    color: #fff;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 30px;
    font-size: 12px;
    padding: 1px;
    opacity: 0.4;
    cursor: pointer;
  }
  .wpgmza-atlas-major .wpgmza-image-single-input-wrapper .wpgmza-image-single-input-reset:hover {
    opacity: 1;
  }
  .wpgmza-atlas-major .wpgmza-image-single-input-wrapper .wpgmza-image-single-input-reset i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  /* ----- Info window style picker (Info tab — style preview grid) */
  .wpgmza-atlas-major .wpgmza-infowindow-style-picker-grouping .wpgmza-infowindow-style-picker-grid {
    gap: 5px;
    padding: 5px;
    border: 1px solid var(--am-border);
  }
  .wpgmza-atlas-major .wpgmza-infowindow-style-picker-grouping .wpgmza-infowindow-style-picker-grouping-title {
    background: var(--am-bg);
    padding: 5px;
    font-size: 0.9em;
    font-weight: 500;
  }
  .wpgmza-atlas-major .wpgmza-infowindow-style-picker-grouping:first-child .wpgmza-infowindow-style-picker-grouping-title {
    border-top-left-radius: var(--am-radius-sm);
    border-top-right-radius: var(--am-radius-sm);
  }
  .wpgmza-atlas-major .wpgmza-infowindow-style-picker-grouping:last-child .wpgmza-infowindow-style-picker-grid {
    border-bottom-left-radius: var(--am-radius-sm);
    border-bottom-right-radius: var(--am-radius-sm);
  }
  .wpgmza-atlas-major .wpgmza-infowindow-style-picker-grouping .wpgmza-check-card-selector .wpgmza-card {
    margin: 0;
    border: 2px solid var(--am-border);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px;
    gap: 5px;
  }
  .wpgmza-atlas-major .wpgmza-infowindow-style-picker-grouping .wpgmza-check-card-selector:hover .wpgmza-card {
    border: 2px dashed var(--am-text-1);
  }
  .wpgmza-atlas-major .wpgmza-infowindow-style-picker-grouping .wpgmza-check-card-selector .wpgmza-card .wpgmza-auto-image {
    width: 100%;
  }
  .wpgmza-atlas-major .wpgmza-infowindow-style-picker-grouping .wpgmza-check-card-selector .wpgmza-card span {
    margin-top: auto;
    font-size: 0.9em;
  }
  /* "Global" card (value="-1") — match the other style cards in
     height even though its background image is just a small
     checkmark. Without this the card collapses to icon size since
     the auto-image div has no inherent height; an explicit 120px
     mirrors the natural rendered height of the sibling cards
     (Default / Thin / Focus / Panel / Card) so the row stays
     visually consistent. */
  .wpgmza-atlas-major .wpgmza-infowindow-style-picker-grouping .wpgmza-check-card-selector input[type="radio"][value="-1"] + .wpgmza-card {
    height: 120px;
  }
  .wpgmza-atlas-major .wpgmza-infowindow-style-picker-grouping .wpgmza-check-card-selector input[type="radio"][value="-1"] + .wpgmza-card .wpgmza-auto-image {
    flex: 1;
  }

  /* ----- Preset input controller (dropdowns with quick-select chips) */
  .wpgmza-atlas-major .wpgmza-preset-input-controller {
    display: flex;
    align-items: center;
  }
  .wpgmza-atlas-major .wpgmza-preset-input-controller input {
    margin: 0 5px 0 0;
  }
  .wpgmza-atlas-major .wpgmza-preset-input-controller input[type="number"] {
    width: 75px;
    padding-right: 0;
  }
  .wpgmza-atlas-major .wpgmza-preset-input-controller .wprmgza-preset-input-controller-presets {
    display: flex;
    box-sizing: border-box;
    align-items: center;
    gap: 5px;
    height: 30px;
  }
  .wpgmza-atlas-major .wpgmza-preset-input-controller .wprmgza-preset-input-controller-presets .wpgmza-preset-input-controller-option {
    border-radius: var(--am-radius-sm);
    overflow: hidden;
    /* WP 7 bumped the default <input>/<select> height. The preset
       chips here render alongside a number input on the
       Marker Listings → "Show X items by Default" control. The
       old 4px 8px / 22px line-height combo sat below the taller
       input baseline. Padding `20px 11px` matches the new input
       height (padding wins over line-height for box height), and
       `line-height: 1px` collapses the inner box so the padding
       alone determines the vertical centring of the chip text. */
    line-height: 1px;
    font-size: 0.9em;
    font-weight: 500;
    padding: 20px 11px;
    box-sizing: border-box;
    background: var(--am-bg);
    height: 100%;
    cursor: pointer;
  }
  .wpgmza-atlas-major .wpgmza-preset-input-controller .wprmgza-preset-input-controller-presets .wpgmza-preset-input-controller-option:last-child {
    border: none;
  }
  .wpgmza-atlas-major .wpgmza-preset-input-controller .wprmgza-preset-input-controller-presets .wpgmza-preset-input-controller-option:hover {
    background: var(--am-border);
  }
  .wpgmza-atlas-major .wpgmza-preset-input-controller .wprmgza-preset-input-controller-presets .wpgmza-preset-input-controller-option.selected {
    background: var(--am-text-1);
    color: #fff;
  }

  /* ----- Check-card selector + auto-image — settings page variants
     The map-editor sidebar variants are already styled elsewhere.
     These are the rules that apply in `.wpgmza-tabs-container
     .ui-tabs-panel` context on the settings page. */
  .wpgmza-atlas-major .wpgmza-check-card-selector input[type="checkbox"],
  .wpgmza-atlas-major .wpgmza-check-card-selector input[type="radio"] {
    display: none;
  }
  .wpgmza-atlas-major .wpgmza-check-card-selector input[type="checkbox"]:checked + .wpgmza-card,
  .wpgmza-atlas-major .wpgmza-check-card-selector input[type="radio"]:checked + .wpgmza-card {
    border: 2px solid var(--am-text-1);
  }
  .wpgmza-atlas-major .wpgmza-check-card-selector img {
    max-width: 100%;
  }
  .wpgmza-atlas-major .wpgmza-check-card-selector .wpgmza-card {
    margin-right: 10px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-height: 100px;
    border: 2px solid transparent;
    /* Authoritative .wpgmza-card definition — exact mirror of Novus.
       NO transition declared anywhere in the cascade for this
       selector (duplicates at lines ~4860 and ~6506 have been
       stripped). Border swap on :hover happens instantly, matching
       Novus's stutter-free behaviour. */
  }
  .wpgmza-atlas-major .wpgmza-check-card-selector:hover .wpgmza-card {
    border: 2px dashed var(--am-text-1);
    cursor: pointer;
  }
  .wpgmza-atlas-major .wpgmza-check-card-selector .wpgmza-card .wpgmza-auto-image {
    flex: 1;
  }
  .wpgmza-atlas-major .wpgmza-check-card-selector .wpgmza-card span {
    font-size: 1em;
    display: block;
    text-align: center;
  }
  /* Category Filter Selector — Novus parity (line 6285 in Novus admin
     CSS). Was missing from Atlas Major. Sets a sensible min-width on
     each card in the global-settings → categories → "Filter by
     category displayed as" row. */
  .wpgmza-atlas-major .wpgmza-category-filter-type-selector .wpgmza-check-card-selector {
    min-width: 180px;
    cursor: pointer;
  }
  .wpgmza-atlas-major.wpgmza-tabs-container .ui-tabs-panel .wpgmza-check-card-selector .wpgmza-card {
    padding: 10px;
    width: initial;
    margin-left: 10px;
    cursor: pointer;
    /* Match the hover border width so the layout doesn't shift on
       hover. The lower-specificity rule at
       `.wpgmza-atlas-major .wpgmza-check-card-selector .wpgmza-card`
       (~L7550) already sets a 2px transparent border for the same
       reason, but the tabs-container's generic `.wpgmza-card` rule
       at ~L6241 (specificity 0,4,0) was beating that lower-specificity
       (0,3,0) baseline and forcing a 1px solid border under the
       settings tabs. That made the hover swap to 2px dashed grow
       each card by 1px and shift everything around it. Bumping this
       tabs-container-scoped rule (now 0,5,0) to specify the
       transparent border explicitly puts the check-card-selector
       default ahead of the generic card border, and the paired
       hover rule below (0,6,0) beats this for the actual hover
       state. */
    border: 2px solid transparent;
  }
  .wpgmza-atlas-major.wpgmza-tabs-container .ui-tabs-panel .wpgmza-check-card-selector:hover .wpgmza-card {
    border: 2px dashed var(--am-text-1);
  }
  .wpgmza-atlas-major.wpgmza-tabs-container .ui-tabs-panel .wpgmza-check-card-selector input[type="checkbox"]:checked + .wpgmza-card,
  .wpgmza-atlas-major.wpgmza-tabs-container .ui-tabs-panel .wpgmza-check-card-selector input[type="radio"]:checked + .wpgmza-card {
    border: 2px solid var(--am-text-1);
  }
  .wpgmza-atlas-major.wpgmza-tabs-container .ui-tabs-panel .wpgmza-check-card-selector .wpgmza-card span {
    margin-top: 10px;
  }

  /* ----- Auto image (generic image preview with contain/center bg) */
  .wpgmza-atlas-major .wpgmza-auto-image {
    position: relative;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
  .wpgmza-atlas-major .wpgmza-auto-image img {
    display: block;
    position: relative;
    max-width: 90%;
    max-height: 100%;
    margin: auto;
    flex-shrink: 1;
  }

/* (End of former @layer components { } block — see note at top of
   "COMPONENT STYLES" section above.) */

/* ==========================================================
   ADMIN TOUR — hidden by default, positioned fixed when active
   ========================================================== */
.wpgmza-atlas-major .wpgmza-tour {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20;
}
.wpgmza-atlas-major .wpgmza-tour > * {
  display: none;
}

/* ==========================================================
   Dual-handle Zoom Range Slider
   Two overlapping range inputs with a shared visual track and fill
   ========================================================== */
.wpgmza-atlas-major .wpgmza-dual-zoom-slider {
  width: 100%;
  padding: 8px 0 4px;
}
.wpgmza-atlas-major .wpgmza-dual-zoom-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--am-text-2);
  margin-bottom: 10px;
}
.wpgmza-atlas-major .wpgmza-dual-zoom-labels strong {
  color: var(--am-text-1);
  font-weight: 600;
}
.wpgmza-atlas-major .wpgmza-dual-zoom-track-wrap {
  position: relative;
  height: 24px;
}
.wpgmza-atlas-major .wpgmza-dual-zoom-track {
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--am-border);
  border-radius: 2px;
}
.wpgmza-atlas-major .wpgmza-dual-zoom-fill {
  position: absolute;
  top: 10px;
  height: 4px;
  background: var(--am-accent);
  border-radius: 2px;
}
.wpgmza-atlas-major .wpgmza-dual-zoom-slider input[type="range"] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 24px;
  background: transparent;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  padding: 0;
}
.wpgmza-atlas-major .wpgmza-dual-zoom-slider input[type="range"]::-webkit-slider-runnable-track {
  background: transparent;
  height: 24px;
  border: none;
}
.wpgmza-atlas-major .wpgmza-dual-zoom-slider input[type="range"]::-moz-range-track {
  background: transparent;
  height: 24px;
  border: none;
}
.wpgmza-atlas-major .wpgmza-dual-zoom-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--am-accent);
  cursor: pointer;
  margin-top: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  position: relative;
  z-index: 2;
}
.wpgmza-atlas-major .wpgmza-dual-zoom-slider input[type="range"]::-moz-range-thumb {
  pointer-events: auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--am-accent);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.wpgmza-atlas-major .wpgmza-dual-zoom-slider input[type="range"]:focus {
  outline: none;
}
.wpgmza-atlas-major .wpgmza-dual-zoom-slider input[type="range"]:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px rgba(232, 71, 63, 0.2);
}

/* (Note: an earlier no-op `display: none !important` on .am-save-reminder
   was removed when the "Remember to save your map!" nag was restored to
   the Live Preview heading row — see the .am-save-reminder.wpgmza-card
   rules below the .am-mock-title-row block.) */

/* Frontend-only notice pill — uses a blue/informational tone rather than
   red, since this is informational not a call-to-action */
.wpgmza-atlas-major .am-frontend-only-notice {
  display: none;
  font-size: 11px;
  font-weight: 600;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  color: #1e40af;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  padding: 4px 12px;
  border-radius: 100px;
  white-space: nowrap;
  animation: amSaveReminderIn 0.3s ease forwards;
  margin-left: 8px;
  margin-bottom:18px;
}
@keyframes amSaveReminderIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Next to Live Preview heading */
.wpgmza-atlas-major .am-mock-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* "Remember to save your map!" — legacy nag, restored next to the
   Live Preview heading. JS calls $("#wpgmaps_save_reminder").show()
   on bounds change; CSS scopes visibility to "autosave is OFF" so
   users who have autosave on aren't nagged unnecessarily. */
/* Specificity matters here — the legacy "absolute, bottom of
   .map-container-wrap" rule (around line 5290) targets
   `.wpgmza-atlas-major .wpgmza-editor .map-container-wrap #wpgmaps_save_reminder`
   (1 id + 3 classes). To override it without resorting to !important
   we need at least 1 id + 4 classes — the inclusion of
   `.wpgmza-editor` and `.map-container-wrap` in the selector below
   bumps specificity past the legacy rule so our inline placement
   wins. */
.wpgmza-atlas-major .wpgmza-editor .map-container-wrap .am-mock-title-row #wpgmaps_save_reminder {
  position: static;
  transform: none;
  left: auto;
  bottom: auto;
  top: auto;
  /* Match the h1's `margin: 0 0 18px` so flex `align-items: center`
     sees symmetric margin boxes and the pill's text aligns with the
     "Live Preview" text vertical center. Without this the h1 is 18px
     "taller" in margin-box terms and the pill sits visibly low. */
  margin: 0 0 18px;
  /* Don't wrap onto a new row — the pill should always sit to the
     right of the heading. The wrapper itself gets flex-shrink so the
     long pill text doesn't crowd the title on narrow widths. */
  flex-shrink: 0;
}
.wpgmza-atlas-major .am-save-nag.wpgmza-card.wpgmza-notice {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  margin: 0;
  font-size: 12px;
  border-radius: 100px;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  color: #92400e;
  box-shadow: none;
  line-height: 1.4;
}
.wpgmza-atlas-major .am-save-nag.wpgmza-card.wpgmza-notice > strong:first-child {
  font-weight: 600;
  color: inherit;
  margin: 0;
}
/* The base .wpgmza-card.wpgmza-notice rule adds an emoji/icon via
   ::before — suppress it in this compact inline variant. */
.wpgmza-atlas-major .am-save-nag.wpgmza-card.wpgmza-notice::before {
  display: none;
}

/* When autosave is on, never show the legacy nag — autosave already
   persists every change. Trumps any inline display jQuery .show()
   might have set. */
body.wpgmza-autosave-on .wpgmza-atlas-major #wpgmaps_save_reminder,
.wpgmza-atlas-major body.wpgmza-autosave-on #wpgmaps_save_reminder {
  display: none !important;
}
/* Quick tip close button */
.wpgmza-atlas-major .am-quick-tip-close {
  
  top: 8px;
  right: 8px;
  cursor: pointer;
  color: var(--am-text-3);
  transition: color 0.15s ease;
}
.wpgmza-atlas-major .am-quick-tip-close:hover {
  color: var(--am-text-1);
}
.wpgmza-atlas-major .wpgmza-quick-tip-container {
  position: relative;
}

/* One-time hint — offset for Atlas Major taller toolbar */
.wpgmza-atlas-major .wpgmza-one-time-hint[data-hint-tag='quickCreateMarkers'] {
  top: 120px;
}


/* ==========================================================
   POPUP NOTIFICATION — Outside @layer, appended to body (not inside .wpgmza-atlas-major)
   ========================================================== */
.wpgmza-popup-notification {
  position: fixed;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999999;
  background: #1a1a19;
  color: #fff;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 20px;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  animation: amNotifIn 0.2s ease forwards;
  pointer-events: none;
}
.wpgmza-popup-notification.animate-end {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.wpgmza-popup-notification.top-right,
.wpgmza-popup-notification.top-left,
.wpgmza-popup-notification.bottom-right,
.wpgmza-popup-notification.bottom-left,
.wpgmza-popup-notification.bottom,
.wpgmza-popup-notification.top,
.wpgmza-popup-notification.left,
.wpgmza-popup-notification.right {
  position: absolute;
}
.wpgmza-popup-notification.top-right,
.wpgmza-popup-notification.top-left,
.wpgmza-popup-notification.top { top: -36px; }
.wpgmza-popup-notification.bottom-right,
.wpgmza-popup-notification.bottom-left,
.wpgmza-popup-notification.bottom { bottom: 7px; }
.wpgmza-popup-notification.top-right,
.wpgmza-popup-notification.bottom-right,
.wpgmza-popup-notification.right { right: 7px; left: auto; transform: none; }
.wpgmza-popup-notification.top-left,
.wpgmza-popup-notification.bottom-left,
.wpgmza-popup-notification.left { left: 7px; transform: none; }
@keyframes amNotifIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ==========================================================
   LEGACY ANIMATIONS — wpgmzaLoadCircle / wpgmzaPulseFade
   Used by the DataTable processing indicator (the rotating
   circle + pulsing icon shown while the map list is loading)
   and by other wp-google-maps-admin.css call sites already
   referenced from atlas-major.css. The keyframes lived in
   wp-google-maps-admin.css under Atlas Novus, but Atlas Major
   skips that stylesheet (class.script-loader.php:530 — Atlas
   Major is self-contained), so the animations had nothing to
   resolve to and the indicator stopped animating. Mirrored
   here so the existing animation: declarations work.
   ========================================================== */
@-webkit-keyframes wpgmzaLoadCircle {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes wpgmzaLoadCircle {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@-webkit-keyframes wpgmzaPulseFade {
  0%   { opacity: 0.3; }
  50%  { opacity: 1; transform: scale(1.1); }
  100% { opacity: 0.3; }
}
@keyframes wpgmzaPulseFade {
  0%   { opacity: 0.3; }
  50%  { opacity: 1; transform: scale(1.1); }
  100% { opacity: 0.3; }
}


/* ==========================================================
   GENERIC MODAL — Outside @layer for full specificity
   ========================================================== */
.wpgmza-atlas-major .wpgmza-generic-modal {
  display: none !important;
  position: fixed;
  background: rgba(0,0,0,0.4);
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 99999;
}
.wpgmza-atlas-major .wpgmza-generic-modal.pending {
  display: block !important;
}
.wpgmza-atlas-major .wpgmza-generic-modal .wpgmza-generic-modal-inner {
  background: #fff;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 500px;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
  max-height: 60vh;
  overflow-y: auto;
  text-align: center;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}
.wpgmza-atlas-major .wpgmza-generic-modal .wpgmza-generic-modal-title {
  font-size: 16px;
  font-weight: 700;
  color: #1a1a19;
  margin-bottom: 12px;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}
.wpgmza-atlas-major .wpgmza-generic-modal .wpgmza-generic-modal-content {
  padding-bottom: 12px;
  font-size: 13px;
  color: #5c5c5a;
}
.wpgmza-atlas-major .wpgmza-generic-modal .wpgmza-generic-modal-content > input,
.wpgmza-atlas-major .wpgmza-generic-modal .wpgmza-generic-modal-content > select {
  margin-top: 8px;
  font-size: 13px;
  padding: 8px 12px;
  min-width: 200px;
  max-width: 100%;
  border: 1px solid #e5e5e4;
  border-radius: 5px;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}
.wpgmza-atlas-major .wpgmza-generic-modal .wpgmza-generic-modal-content .wpgmza-row label {
  width: 120px;
  display: inline-block;
  text-align: left;
  font-size: 13px;
}
.wpgmza-atlas-major .wpgmza-generic-modal .wpgmza-generic-modal-actions .wpgmza-button {
  margin-top: 12px;
  padding: 7px 20px;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}
.wpgmza-atlas-major .wpgmza-generic-modal .wpgmza-generic-modal-actions .wpgmza-button[data-action="complete"] {
  background: #e8473f;
  color: #fff;
  border: none;
}
.wpgmza-atlas-major .wpgmza-generic-modal .wpgmza-generic-modal-actions .wpgmza-button[data-action="complete"]:hover {
  background: #d43b34;
}
.wpgmza-atlas-major .wpgmza-generic-modal .wpgmza-generic-modal-actions .wpgmza-button[data-action="cancel"] {
  background: #fff;
  color: #5c5c5a;
  border: 1px solid #e5e5e4;
  margin-right: 6px;
}
.wpgmza-atlas-major .wpgmza-generic-modal .wpgmza-generic-modal-actions .wpgmza-button[data-action="cancel"]:hover {
  border-color: #9c9c99;
  color: #1a1a19;
}


/* ==========================================================
   ACTION BAR BUTTONS — Outside @layer for full specificity
   ========================================================== */
.wpgmza-atlas-major .wpgmza-editor .sidebar .action-bar .wpgmza-button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 16px;
  font-size: 12px;
  font-weight: 600;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  border-radius: 5px;
  border: 1px solid #e5e5e4;
  background: #ffffff;
  color: #5c5c5a;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.4;
  height: auto;
  box-shadow: none;
}
.wpgmza-atlas-major .wpgmza-editor .sidebar .action-bar .wpgmza-button:hover {
  border-color: #9c9c99;
  color: #1a1a19;
}
.wpgmza-atlas-major .wpgmza-editor .sidebar .action-bar .wpgmza-button-primary,
.wpgmza-atlas-major .wpgmza-editor .sidebar .action-bar label.wpgmza-button-primary {
  background: #1a1a19;
  border-color: #1a1a19;
  color: #fff;
}
.wpgmza-atlas-major .wpgmza-editor .sidebar .action-bar .wpgmza-button-primary:hover,
.wpgmza-atlas-major .wpgmza-editor .sidebar .action-bar label.wpgmza-button-primary:hover {
  background: #333;
  border-color: #333;
  color: #fff;
}
.wpgmza-atlas-major .wpgmza-editor .sidebar .action-bar .wpgmza-button-accent,
.wpgmza-atlas-major .wpgmza-editor .sidebar .action-bar label.wpgmza-button-accent {
  background: #e8473f;
  border-color: #e8473f;
  color: #fff;
}
.wpgmza-atlas-major .wpgmza-editor .sidebar .action-bar .wpgmza-button-accent:hover,
.wpgmza-atlas-major .wpgmza-editor .sidebar .action-bar label.wpgmza-button-accent:hover {
  background: #d43b34;
  border-color: #d43b34;
  color: #fff;
}


/* ==========================================================
   WRITEUP BLOCK & WIZARD PAGE — Outside @layer for full specificity
   .wpgmza-atlas-major is on the SAME element as .wpgmza-writeup-block
   ========================================================== */

/* Card container */
.wpgmza-atlas-major.wpgmza-writeup-block {
  width: 1100px !important;
  max-width: calc(100% - 20px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 50px 30px !important;
  background: #ffffff !important;
  border-radius: 12px !important;
  border: 1px solid #e5e5e4 !important;
  box-sizing: border-box !important;
  text-align: center !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  color: #1a1a19 !important;
  box-shadow: none !important;
}

/* Hide support notice below wizard */
.wpgmza-atlas-major.wpgmza-writeup-block ~ .wpgmza-support-notice-container,
.wpgmza-atlas-major.fullscreen ~ .wpgmza-support-notice-container {
  display: none !important;
}

/* Headings */
.wpgmza-atlas-major.wpgmza-writeup-block h1,
.wpgmza-atlas-major.wpgmza-writeup-block h2,
.wpgmza-atlas-major.wpgmza-writeup-block h3,
.wpgmza-atlas-major.wpgmza-writeup-block h4 {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  font-weight: 100 !important;
  display: block !important;
  box-sizing: border-box;
  margin: 0 0 20px !important;
  padding: 0 !important;
  line-height: initial !important;
  border: none !important;
  text-align: center !important;
}
.wpgmza-atlas-major.wpgmza-writeup-block h1 {
  font-size: 3em !important;
  color: #1a1a19 !important;
}
.wpgmza-atlas-major.wpgmza-writeup-block h2 {
  font-size: 2em !important;
  color: #5c5c5a !important;
}
.wpgmza-atlas-major.wpgmza-writeup-block h3 {
  font-size: 1.4em !important;
  color: #1a1a19 !important;
}
.wpgmza-atlas-major.wpgmza-writeup-block h4 {
  font-size: 1.4em !important;
  color: #1a1a19 !important;
}

/* Horizontal rule */
.wpgmza-atlas-major.wpgmza-writeup-block hr {
  border: none !important;
  border-bottom: 1px solid #e5e5e4 !important;
  margin: 40px 0 !important;
  display: block !important;
}

/* Buttons (pill shaped) */
.wpgmza-atlas-major.wpgmza-writeup-block .wpgmza-button {
  font-size: 1.1em !important;
  padding: 9px 30px !important;
  margin-top: 20px;
  border-radius: 100px !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #e5e5e4 !important;
  background: #ffffff !important;
  color: #1a1a19 !important;
  transition: all 0.15s ease;
  text-decoration: none !important;
  box-shadow: none !important;
  height: auto !important;
  line-height: 1.4 !important;
}
.wpgmza-atlas-major.wpgmza-writeup-block .wpgmza-button:hover {
  border-color: #9c9c99 !important;
}
.wpgmza-atlas-major.wpgmza-writeup-block .wpgmza-button i {
  margin-left: 10px;
  font-size: 0.9em;
}

/* Images */
.wpgmza-atlas-major.wpgmza-writeup-block img {
  max-width: 100%;
}

/* ==========================================================
   INSTALLER PAGE
   Used by: admin.php?page=wp-google-maps-menu&action=installer
   Template: html/atlas-major/installer-page.html.php (mirrors Novus)
   JS: js/v8/installer.js
   The installer page wrapper carries `.wpgmza-writeup-block`
   (above) which provides the container, heading, button, and input
   base styling, plus `.wpgmza-installer` for installer-scoped
   overrides. This section handles installer-specific FUNCTIONAL
   CSS (step pagination, engine-step visibility, [data-engine]
   conditionals) and Atlas Major design pass on installer chrome.
   Ported from atlas-novus admin CSS lines 2949-3081 / 5498-5641 /
   5724-5740 / 6569 with Atlas Major tokens.
   ========================================================== */

/* ----- Pop-in keyframes for active step (Novus parity) */
@keyframes wpgmzaPopin {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ----- Inputs and selects inside installer steps
   Override .wpgmza-writeup-block's heading-scale default so the
   installer's center-aligned inputs have sensible widths and the
   font scales appropriately to the wizard layout. */
.wpgmza-atlas-major .wpgmza-installer-steps input[type="text"],
.wpgmza-atlas-major .wpgmza-installer-steps input[type="email"],
.wpgmza-atlas-major .wpgmza-installer-steps select {
  font-size: 1.2em !important;
  padding: 10px 16px !important;
  max-width: 100% !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  border: 1px solid var(--am-border) !important;
  border-radius: var(--am-radius-sm) !important;
  background: #ffffff !important;
  color: var(--am-text-1) !important;
  box-shadow: none !important;
  height: auto !important;
  line-height: normal !important;
}
.wpgmza-atlas-major .wpgmza-installer-steps input[type="text"] {
  width: 400px;
}
.wpgmza-atlas-major .wpgmza-installer-steps select {
  width: 200px;
}
.wpgmza-atlas-major .wpgmza-installer-steps input:focus,
.wpgmza-atlas-major .wpgmza-installer-steps select:focus {
  outline: none !important;
  border-color: var(--am-text-1) !important;
}

/* "Find a style" step — tile server preview select.
   The OL / Leaflet / Zero Cost engines end on a tile-style step that
   injects a TileServerSelect; its JS wraps the <select> in a
   `.wpgmza-tile-server-preview-container` (the same preview-image-
   over-dropdown widget used in Settings > Advanced). The generic
   installer-select rule above (~L8218) applies `!important`
   border / border-radius / box-shadow plus width: 200px, which
   overrode the preview-container's intended square, full-width,
   borderless dropdown — leaving a small rounded select that looked
   nothing like the settings version and sat left-aligned.
   Restore the settings preview look and adopt Atlas Novus's
   installer sizing (256x256, horizontally centred — see
   atlas-novus/wp-google-maps-admin.css:5724-5733). `!important`
   is needed on the select props to defeat the generic installer
   rule's `!important`; the container centres via `margin: auto`
   as a flex child of the `.wpgmza-row align-center` wrapper. */
.wpgmza-atlas-major .wpgmza-installer-steps .wpgmza-tile-server-preview-container {
  width: 256px;
  height: 256px;
  margin-left: auto;
  margin-right: auto;
}
.wpgmza-atlas-major .wpgmza-installer-steps .wpgmza-tile-server-preview-container select {
  width: 100% !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: var(--wpgmza-shadow-common) !important;
}
.wpgmza-atlas-major .wpgmza-installer-steps .wpgmza-text-align-center {
  text-align: center !important;
}

/* ----- Hide "use my location" inside installer */
.wpgmza-atlas-major .wpgmza-installer-steps .wpgmza-use-my-location {
  display: none !important;
}

/* ----- Step pagination (CRITICAL — Novus parity, lines 2973-2984)
   Without these the JS-driven step navigation does nothing visually;
   all steps render stacked. Active step gets a soft pop-in animation. */
.wpgmza-atlas-major .wpgmza-installer-steps .step {
  display: none;
  margin-bottom: 20px;
}
.wpgmza-atlas-major .wpgmza-installer-steps .step.active {
  display: block;
  animation: wpgmzaPopin 0.2s forwards;
}
.wpgmza-atlas-major .wpgmza-installer-steps .step p {
  color: var(--am-text-2);
  font-size: 14px;
  margin-top: 10px;
}

/* ----- Engine-step visibility (CRITICAL — Novus lines 3013-3030)
   The .engine-step blocks (Google features, Azure features, etc.)
   are toggled purely via CSS based on the wrapper's data-engine
   attribute. installer.js:setEngine() just sets the attribute;
   the show/hide is OUR responsibility here. Without this every
   engine's panel renders simultaneously. */
.wpgmza-atlas-major .wpgmza-installer-steps .step .engine-step {
  display: none;
}
.wpgmza-atlas-major .wpgmza-installer-steps[data-engine="google-maps"] .step .engine-step[data-engine="google-maps"],
.wpgmza-atlas-major .wpgmza-installer-steps[data-engine="leaflet"] .step .engine-step[data-engine="leaflet"],
.wpgmza-atlas-major .wpgmza-installer-steps[data-engine="leaflet-azure"] .step .engine-step[data-engine="leaflet-azure"],
.wpgmza-atlas-major .wpgmza-installer-steps[data-engine="leaflet-stadia"] .step .engine-step[data-engine="leaflet-stadia"],
.wpgmza-atlas-major .wpgmza-installer-steps[data-engine="leaflet-maptiler"] .step .engine-step[data-engine="leaflet-maptiler"],
.wpgmza-atlas-major .wpgmza-installer-steps[data-engine="leaflet-locationiq"] .step .engine-step[data-engine="leaflet-locationiq"],
.wpgmza-atlas-major .wpgmza-installer-steps[data-engine="leaflet-zerocost"] .step .engine-step[data-engine="leaflet-zerocost"],
.wpgmza-atlas-major .wpgmza-installer-steps[data-engine="open-layers-latest"] .step .engine-step[data-engine="open-layers-latest"],
.wpgmza-atlas-major .wpgmza-installer-steps[data-engine="open-layers"] .step .engine-step[data-engine="open-layers"],
.wpgmza-atlas-major .wpgmza-installer-steps[data-engine="open-layers"] .step .engine-step[data-engine="open-layers|open-layers-latest|leaflet"],
.wpgmza-atlas-major .wpgmza-installer-steps[data-engine="open-layers-latest"] .step .engine-step[data-engine="open-layers|open-layers-latest|leaflet"],
.wpgmza-atlas-major .wpgmza-installer-steps[data-engine="leaflet"] .step .engine-step[data-engine="open-layers|open-layers-latest|leaflet"] {
  display: block;
}

/* ----- "Powered by" highlights — only show the highlight that
   matches the currently selected engine. The `.wpgmza-map-engine-
   powered-by` wrapper itself is also conditionally shown via
   `data-required-maps-engine`. Both selectors live on the same
   pattern, so a single rule handles both. */
.wpgmza-atlas-major .wpgmza-installer-steps [data-required-maps-engine] {
  display: none;
}
.wpgmza-atlas-major .wpgmza-installer-steps[data-engine="leaflet-azure"] [data-required-maps-engine~="leaflet-azure"],
.wpgmza-atlas-major .wpgmza-installer-steps[data-engine="leaflet-stadia"] [data-required-maps-engine~="leaflet-stadia"],
.wpgmza-atlas-major .wpgmza-installer-steps[data-engine="leaflet-maptiler"] [data-required-maps-engine~="leaflet-maptiler"],
.wpgmza-atlas-major .wpgmza-installer-steps[data-engine="leaflet-locationiq"] [data-required-maps-engine~="leaflet-locationiq"],
.wpgmza-atlas-major .wpgmza-installer-steps[data-engine="leaflet-zerocost"] [data-required-maps-engine~="leaflet-zerocost"] {
  display: inline;
}
/* `data-required-maps-engine` on the WRAPPER uses pipe-separated
   list (e.g. "leaflet-azure|leaflet-stadia|..."); CSS attribute
   `*=` matches the engine substring within the value. */
.wpgmza-atlas-major .wpgmza-installer-steps[data-engine="leaflet-azure"] .wpgmza-map-engine-powered-by[data-required-maps-engine*="leaflet-azure"],
.wpgmza-atlas-major .wpgmza-installer-steps[data-engine="leaflet-stadia"] .wpgmza-map-engine-powered-by[data-required-maps-engine*="leaflet-stadia"],
.wpgmza-atlas-major .wpgmza-installer-steps[data-engine="leaflet-maptiler"] .wpgmza-map-engine-powered-by[data-required-maps-engine*="leaflet-maptiler"],
.wpgmza-atlas-major .wpgmza-installer-steps[data-engine="leaflet-locationiq"] .wpgmza-map-engine-powered-by[data-required-maps-engine*="leaflet-locationiq"],
.wpgmza-atlas-major .wpgmza-installer-steps[data-engine="leaflet-zerocost"] .wpgmza-map-engine-powered-by[data-required-maps-engine*="leaflet-zerocost"] {
  display: block;
}

/* ----- Layout utilities used by the installer template
   Scoped to .wpgmza-installer-steps so they don't pollute the
   global namespace. */
.wpgmza-atlas-major .wpgmza-installer-steps .wpgmza-flex-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.wpgmza-atlas-major .wpgmza-installer-steps .wpgmza-flex-grid.center {
  justify-content: center;
}
.wpgmza-atlas-major .wpgmza-installer-steps .wpgmza-margin-t-20 {
  margin-top: 20px;
}
.wpgmza-atlas-major .wpgmza-installer-steps .wpgmza-margin-b-20 {
  margin-bottom: 20px;
}
.wpgmza-atlas-major .wpgmza-installer-steps .wpgmza-margin-20 {
  margin: 20px;
}
.wpgmza-atlas-major .wpgmza-installer-steps .gap-4 {
  gap: 16px;
}
.wpgmza-atlas-major .wpgmza-installer-steps .wpgmza-pos-relative {
  position: relative;
}
.wpgmza-atlas-major .wpgmza-installer-steps hr {
  margin: 28px 0 !important;
}

/* ----- Engine selector grid — installer-scoped override
   Novus uses a 3-column layout for the installer (32% × 3) vs
   the 170px × 5 grid the settings page uses. We bump items to
   a taller height and use the AM surface/border tokens. */
.wpgmza-atlas-major .wpgmza-installer .wpgmza-map-engine-selector {
  max-width: 100%;
}
.wpgmza-atlas-major .wpgmza-installer .wpgmza-map-engine-selector .wpgmza-map-engine-selector-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.wpgmza-atlas-major .wpgmza-installer .wpgmza-map-engine-selector .wpgmza-map-engine-selector-grid .wpgmza-map-engine-item {
  height: 120px;
  padding: 16px;
  border: 1px solid var(--am-border);
  border-radius: var(--am-radius);
  background: var(--am-surface);
  transition: border-color 0.15s var(--am-ease), background 0.15s var(--am-ease);
}
.wpgmza-atlas-major .wpgmza-installer .wpgmza-map-engine-selector .wpgmza-map-engine-selector-grid .wpgmza-map-engine-item:hover {
  border-color: var(--am-text-3);
}
.wpgmza-atlas-major .wpgmza-installer .wpgmza-map-engine-selector .wpgmza-map-engine-selector-grid .wpgmza-map-engine-item img {
  max-width: 70%;
}
.wpgmza-atlas-major .wpgmza-installer .wpgmza-map-engine-selector .wpgmza-map-engine-selector-grid .wpgmza-map-engine-item input:checked ~ .wpgmza-map-engine-item-backdrop {
  background: var(--am-accent-soft);
  opacity: 1;
}
.wpgmza-atlas-major .wpgmza-installer .wpgmza-map-engine-selector .wpgmza-map-engine-selector-grid .wpgmza-map-engine-item input:checked ~ img,
.wpgmza-atlas-major .wpgmza-installer .wpgmza-map-engine-selector .wpgmza-map-engine-selector-grid .wpgmza-map-engine-item input:checked ~ span {
  filter: none;
  opacity: 1;
}

/* ----- "Powered by" attribution row, installer-scoped */
.wpgmza-atlas-major .wpgmza-installer .wpgmza-map-engine-powered-by {
  margin: 20px auto 0;
  background: var(--am-bg);
  border: 1px solid var(--am-border);
  width: fit-content;
  padding: 4px 14px;
  border-radius: 100px;
  font-size: 13px;
  color: var(--am-text-2);
}
.wpgmza-atlas-major .wpgmza-installer .wpgmza-map-engine-powered-by .wpgmza-map-engine-powered-by-highlight {
  font-weight: 600;
  color: var(--am-text-1);
}

/* ----- Feature item bullets (icon + label cards)
   Used inside every `.engine-step` to summarize selected engine
   capabilities. Novus uses 180×160 cards with grey-50 bg; we
   match the dimensions and use AM surface tokens. */
.wpgmza-atlas-major .wpgmza-installer-steps .wpgmza-installer-feature-item {
  width: 160px;
  height: 140px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-radius: var(--am-radius);
  padding: 12px;
  background: var(--am-bg);
  border: 1px solid var(--am-border);
}
.wpgmza-atlas-major .wpgmza-installer-steps .wpgmza-installer-feature-item i {
  font-size: 32px;
  padding-bottom: 12px;
  color: var(--am-text-3);
}
.wpgmza-atlas-major .wpgmza-installer-steps .wpgmza-installer-feature-item span {
  font-size: 13px;
  color: var(--am-text-2);
  line-height: 1.3;
}

/* ----- Launcher trigger button ("Get an API Key" with platform icon) */
.wpgmza-atlas-major.wpgmza-installer .wpgmza-button.launcher-trigger,
.wpgmza-atlas-major .wpgmza-installer-steps .wpgmza-button.launcher-trigger {
  position: relative;
  padding-left: 60px !important;
  margin-bottom: 40px;
}
.wpgmza-atlas-major.wpgmza-installer .wpgmza-button.launcher-trigger img,
.wpgmza-atlas-major .wpgmza-installer-steps .wpgmza-button.launcher-trigger img {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  max-width: 26px;
  box-sizing: border-box;
}

/* ----- Step loader (shown during AJAX submission) */
.wpgmza-atlas-major .wpgmza-installer-steps .step-loader {
  min-height: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.wpgmza-atlas-major .wpgmza-installer-steps .step-loader h3 {
  color: var(--am-text-2);
  font-size: 14px;
  font-weight: 500;
}

/* ----- Step controller (prev/next button row at the bottom) */
.wpgmza-atlas-major .wpgmza-installer-steps .step-controller {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  margin-top: 24px;
}
.wpgmza-atlas-major .wpgmza-installer-steps .step-controller .wpgmza-col-6 {
  flex: 1;
  max-width: 50% !important;
}
.wpgmza-atlas-major .wpgmza-installer-steps .wpgmza-text-align-left { text-align: left; }
.wpgmza-atlas-major .wpgmza-installer-steps .wpgmza-text-align-right { text-align: right; }

/* ----- Skip link at the page footer */
.wpgmza-atlas-major.wpgmza-installer .wpgmza-installer-skip:not(.wpgmza-button) {
  display: inline-block;
  margin-top: 20px;
  color: var(--am-text-3);
  font-size: 13px;
  text-decoration: none;
}
.wpgmza-atlas-major.wpgmza-installer .wpgmza-installer-skip:not(.wpgmza-button):hover {
  color: var(--am-text-1);
  text-decoration: underline;
}

/* ----- Assisted-skip overlay (Quick-start opt-in flow shown when
   the user clicks "Skip for now" on first visit). This sits on top
   of the regular wizard content as a card. */
.wpgmza-atlas-major .wpgmza-installer-steps .step-assisted-skip {
  padding: 32px;
  text-align: center;
  background: var(--am-surface);
  border: 1px solid var(--am-border);
  border-radius: var(--am-radius);
}
.wpgmza-atlas-major .wpgmza-installer-steps .step-assisted-skip h1 {
  margin-bottom: 8px !important;
}
.wpgmza-atlas-major .wpgmza-installer-steps .step-assisted-skip h2 {
  margin-bottom: 20px !important;
  color: var(--am-text-2) !important;
}
.wpgmza-atlas-major .wpgmza-installer-steps .step-assisted-skip .wpgmza-row {
  margin-top: 24px;
}
.wpgmza-atlas-major .wpgmza-installer-steps .step-assisted-skip .assisted-setup-button {
  cursor: pointer;
}
.wpgmza-atlas-major .wpgmza-installer-steps .step-assisted-skip a.assisted-setup-button {
  display: inline-block;
  margin-top: 16px;
  color: var(--am-text-3);
  font-size: 13px;
  text-decoration: none;
}
.wpgmza-atlas-major .wpgmza-installer-steps .step-assisted-skip a.assisted-setup-button:hover {
  color: var(--am-text-1);
  text-decoration: underline;
}

/* ----- Tile server preview, installer-scoped
   Novus enlarges this to 256×256 inside the installer (vs 200×140
   in settings). We match and center it. */
.wpgmza-atlas-major .wpgmza-installer .wpgmza-tile-server-preview-container {
  width: 256px;
  height: 256px;
  margin-left: auto;
  margin-right: auto;
  border-radius: var(--am-radius);
  overflow: hidden;
}
.wpgmza-atlas-major .wpgmza-installer .wpgmza-tile-server-preview-container select {
  width: 100%;
}
.wpgmza-atlas-major .wpgmza-installer .wpgmza-tile-server-preview-container.preview-failed:before {
  bottom: 84px;
}

/* ----- Auto-key form (currently hidden by HTML comments in template;
   styling preserved for when/if managed-key flow is re-enabled) */
.wpgmza-atlas-major .wpgmza-installer-steps .google-maps-auto-key-form-wrapper {
  font-size: 0.95em;
}
.wpgmza-atlas-major .wpgmza-installer-steps .google-maps-auto-key-form-wrapper input {
  font-size: 1.2em;
  padding: 8px 12px;
}
.wpgmza-atlas-major .wpgmza-installer-steps .auto-key-error .notice {
  display: block;
  padding: 10px 14px;
  border-radius: var(--am-radius-sm);
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}

/* ----- Headings inside installer steps — slightly tighter than
   the writeup-block defaults so each step doesn't take up the
   whole viewport vertically. */
.wpgmza-atlas-major .wpgmza-installer-steps h1 {
  margin-bottom: 8px !important;
}
.wpgmza-atlas-major .wpgmza-installer-steps h2 {
  margin-bottom: 16px !important;
  color: var(--am-text-2) !important;
  font-weight: 500 !important;
}
.wpgmza-atlas-major .wpgmza-installer-steps h3 {
  margin-top: 24px !important;
  margin-bottom: 12px !important;
}

/* ----- Engine-step body wrapper inside Step 1 — center contents
   for the per-engine API key entry screens. */
.wpgmza-atlas-major .wpgmza-installer-steps .step[data-step="1"] .engine-step {
  text-align: center;
}
.wpgmza-atlas-major .wpgmza-installer-steps .step[data-step="1"] .engine-step input {
  display: block;
  margin: 0 auto;
}


/* ==========================================================
   SHOWCASE PURCHASE CARDS — Outside @layer for full specificity
   These appear on the map list page which has WordPress admin styles
   ========================================================== */
.wpgmza-atlas-major.wpgmza-demo-showcase-grid {
  --am-surface: #ffffff;
  --am-bg: #f5f5f4;
  --am-border: #e5e5e4;
  --am-border-subtle: #f0efee;
  --am-text-1: #1a1a19;
  --am-text-3: #9c9c99;
  --am-radius-lg: 12px;
  --am-pro: #7c3aed;
  --am-pro-hover: #6d28d9;
  --am-ease: cubic-bezier(0.4, 0, 0.2, 1);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}
.wpgmza-atlas-major .am-showcase-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--am-text-1);
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}
.wpgmza-atlas-major .am-showcase-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.wpgmza-atlas-major .am-showcase-card {
  background: var(--am-surface);
  border: 1px solid var(--am-border);
  border-radius: var(--am-radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s var(--am-ease), transform 0.2s var(--am-ease);
  width: 300px;
}
.wpgmza-atlas-major .am-showcase-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}
.wpgmza-atlas-major .am-showcase-card-image {
  height: 198px;
  overflow: hidden;
  background: var(--am-bg);
}
.wpgmza-atlas-major .am-showcase-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wpgmza-atlas-major .am-showcase-card-body {
  padding: 12px 14px 8px;
  flex: 1;
}
.wpgmza-atlas-major .am-showcase-card-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--am-text-1);
  margin-bottom: 3px;
}
.wpgmza-atlas-major .am-showcase-card-desc {
  font-size: 11px;
  color: var(--am-text-3);
  line-height: 1.5;
}
.wpgmza-atlas-major .am-showcase-card-actions {
  padding: 8px 14px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.wpgmza-atlas-major .am-showcase-card-actions .am-btn-pro {
  background: var(--am-pro);
  color: white;
  border: none;
  padding: 5px 12px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  cursor: pointer;
  transition: all 0.12s var(--am-ease);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
}
.wpgmza-atlas-major .am-showcase-card-actions .am-btn-pro:hover {
  background: var(--am-pro-hover);
  transform: translateY(-1px);
}
.wpgmza-atlas-major .am-showcase-demo-link {
  font-size: 11px;
  color: var(--am-text-3);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.12s var(--am-ease);
}
.wpgmza-atlas-major .am-showcase-demo-link:hover {
  color: var(--am-text-1);
}

/* ==========================================================
   MARKER ICON EDITOR MODAL
   Hidden by default, shown with .open class
   ========================================================== */
.wpgmza-atlas-major .wpgmza-marker-icon-editor {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  background: #ffffff;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
  border-radius: 12px;
  border: 1px solid #e5e5e4;
  z-index: 5;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 13px;
  color: #1a1a19;
  width: 520px;
  max-width: 90vw;
}
.wpgmza-atlas-major .wpgmza-marker-icon-editor.open {
  display: flex;
  flex-direction: column;
}

/* Preview heading — flex row so "Preview" and style blocks are side by side */
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-marker-icon-editor-preview-heading {
  display: flex;
  align-items: center;
}

/* Preview style control — 4 small color blocks next to "Preview" */
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-marker-icon-editor-preview-style-control {
  display: flex;
  border: 1px solid #e5e5e4;
  border-radius: 3px;
  margin-left: auto;
  height: 16px;
  overflow: hidden;
}
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-marker-icon-editor-preview-style-control .wpgmza-marker-icon-editor-preview-style {
  width: 16px;
  height: 16px;
  border-right: 1px solid #e5e5e4;
  opacity: 0.8;
  cursor: pointer;
  transition: opacity 0.15s;
}
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-marker-icon-editor-preview-style-control .wpgmza-marker-icon-editor-preview-style:hover {
  opacity: 1;
}
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-marker-icon-editor-preview-style-control .wpgmza-marker-icon-editor-preview-style:last-child {
  border-right: none;
}
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-marker-icon-editor-preview-style-control .wpgmza-marker-icon-editor-preview-style[data-style="dark"] {
  background: #1a1a19;
}
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-marker-icon-editor-preview-style-control .wpgmza-marker-icon-editor-preview-style[data-style="light"] {
  background: #f0efee;
}
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-marker-icon-editor-preview-style-control .wpgmza-marker-icon-editor-preview-style[data-style="transparent"] {
  background: repeating-conic-gradient(#ddd 0% 25%, #fff 0% 50%) 50% / 10px 10px;
}
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-marker-icon-editor-preview-style-control .wpgmza-marker-icon-editor-preview-style[data-style="map"] {
  background: url("https://a.tile.openstreetmap.org/7/20/49.png");
  background-size: 50px 50px;
}

/* Templates / base-icon grid — 5 columns */
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-marker-icon-editor-templates,
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-marker-icon-editor-list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box;
}
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-marker-icon-editor-templates .shape-template,
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-marker-icon-editor-list .base-icon {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.8;
  transition: opacity 0.3s;
  cursor: pointer;
}
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-marker-icon-editor-templates .shape-template:hover,
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-marker-icon-editor-list .base-icon:hover {
  opacity: 1;
}
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-marker-icon-editor-templates .shape-template img,
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-marker-icon-editor-list .base-icon img {
  box-sizing: border-box;
  max-width: 40px;
  max-height: 40px;
  padding: 3px;
}

/* Buttons inside the icon editor — light/secondary style */
.wpgmza-atlas-major .wpgmza-marker-icon-editor button,
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-button {
  background: #ffffff;
  color: #5c5c5a;
  border: 1px solid #e5e5e4;
  border-radius: 5px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  cursor: pointer;
  transition: all 0.12s;
}
.wpgmza-atlas-major .wpgmza-marker-icon-editor button:hover,
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-button:hover {
  border-color: #9c9c99;
  color: #1a1a19;
}

/* History-based template visibility */
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-marker-icon-editor-templates [data-type="storage"],
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-marker-icon-editor-templates[data-history] [data-type="system"],
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-marker-icon-editor-list [data-type="storage"],
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-marker-icon-editor-list[data-history] [data-type="system"] {
  display: none;
}
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-marker-icon-editor-templates[data-history] [data-type="storage"],
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-marker-icon-editor-list[data-history] [data-type="storage"] {
  display: flex;
}

/* Close button */
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-button.wpgmza-marker-icon-editor-close {
  position: absolute;
  right: -12px;
  top: -12px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f5f5f4;
  border: 1px solid #e5e5e4;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  padding: 0;
  font-size: 0;
  transition: background 0.12s;
}
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-button.wpgmza-marker-icon-editor-close:hover {
  background: #ffffff;
}
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-button.wpgmza-marker-icon-editor-close::before,
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-button.wpgmza-marker-icon-editor-close::after {
  content: "";
  display: block;
  height: 14px;
  width: 2px;
  background: #5c5c5a;
  border-radius: 2px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-button.wpgmza-marker-icon-editor-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* Split view — left (preview) + right (configurator) */
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-marker-icon-editor-split-view {
  display: flex;
  max-width: 100%;
}
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-marker-icon-editor-split-view-column {
  flex: auto;
  border-right: 1px solid #e5e5e4;
  display: flex;
  flex-direction: column;
}
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-marker-icon-editor-split-view-column.fill {
  width: 250px;
}
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-marker-icon-editor-split-view-column:last-child {
  border-right: none;
}

/* Configurator scrollable panel */
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-marker-icon-configurator {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  max-height: 300px;
}
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-marker-icon-configurator .wpgmza-marker-icon-editor-panel {
  display: flex;
  flex-direction: column;
  padding: 0;
}
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-marker-icon-configurator .wpgmza-marker-icon-editor-panel > div {
  padding: 5px 8px;
}

/* Panel heading rows (Templates, Fill, Shadow, etc.) */
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-marker-icon-editor-panel-heading-row {
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid #e5e5e4;
  border-top: 1px solid #e5e5e4;
  background: #f5f5f4;
  font-size: 12px;
  font-weight: 600;
  color: #5c5c5a;
}
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-marker-icon-editor-panel-heading-row > * {
  flex: 1;
}
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-marker-icon-configurator .wpgmza-marker-icon-editor-panel:first-child .wpgmza-marker-icon-editor-panel-heading-row {
  border-top: none;
}

/* History toggle */
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-marker-icon-editor-history-toggle {
  text-align: right;
  font-size: 11px;
  padding-right: 10px;
  opacity: 0.8;
  cursor: pointer;
  display: none;
}
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-marker-icon-editor-history-toggle:hover { opacity: 1; }
.wpgmza-atlas-major .wpgmza-marker-icon-editor.has-history .wpgmza-marker-icon-editor-history-toggle { display: block; }

/* Action wrapper (Use Icon button) */
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-marker-icon-editor-split-view-action-wrapper {
  margin-top: auto;
}
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-marker-icon-editor-actions .wpgmza-button[data-action="use"] {
  text-align: center;
  width: 100%;
  justify-content: center;
  margin: 8px;
}

/* Editor panel (non-configurator) */
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-marker-icon-editor-panel {
  display: inline-flex;
  flex-direction: row;
  padding: 8px 12px;
}
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-marker-icon-editor-actions {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Slider stacks */
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-icon-shape-slider-stack {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 0.25rem;
}
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-icon-shape-slider-stack input[type="range"] {
  width: 100%;
}
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-icon-shape-slider-stack input[data-linked] {
  font-size: 10px;
  padding: 1px;
  width: 28px;
  height: 22px;
  min-height: unset;
  text-align: center;
  border: 1px solid #e5e5e4;
  border-radius: 3px;
}
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-icon-shape-slider-stack span[data-suffix]:empty { display: none; }
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-icon-shape-slider-stack span[data-suffix] {
  font-size: 10px;
  opacity: 0.7;
}

/* Preview area */
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-marker-icon-editor-preview {
  min-width: 130px;
  min-height: 130px;
  border-radius: 8px;
  margin-top: 5px;
  position: relative;
  box-shadow: inset 0 0 0 1px #e5e5e4;
  background: repeating-conic-gradient(#ddd 0% 25%, #fff 0% 50%) 50% / 20px 20px;
}
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-marker-icon-editor-preview[data-style="dark"] {
  background: #1a1a19;
}
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-marker-icon-editor-preview[data-style="light"] {
  background: #f5f5f4;
}
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-marker-icon-editor-preview[data-style="map"] {
  background: url("https://a.tile.openstreetmap.org/7/20/49.png");
  background-position: -86px -20px;
}
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-marker-icon-editor-preview canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Tabs */
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-marker-icon-editor-tabs {
  display: flex;
  margin-top: 10px;
}
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-marker-icon-editor-tabs .inner-tab {
  font-size: 12px;
  padding: 6px 12px;
  border: 1px solid #e5e5e4;
  flex: 1;
  text-align: center;
  cursor: pointer;
  background: transparent;
  transition: background 0.12s;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 500;
  color: #5c5c5a;
}
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-marker-icon-editor-tabs .inner-tab:first-child {
  border-top-left-radius: 5px;
  border-right: 0;
}
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-marker-icon-editor-tabs .inner-tab:last-child {
  border-top-right-radius: 5px;
}
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-marker-icon-editor-tabs .inner-tab:hover,
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-marker-icon-editor-tabs .inner-tab.active {
  background: #f5f5f4;
  color: #1a1a19;
  font-weight: 600;
}

/* Tab content */
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-marker-icon-editor-tab {
  display: none;
}
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-marker-icon-editor-tab.active {
  display: block;
  padding: 12px;
  border: 1px solid #e5e5e4;
  border-top: 0;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  margin-bottom: 12px;
}

/* Controls */
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-marker-icon-editor-controls .wpgmza-icon-effect-mode-sliders {
  max-width: 100%;
  display: flex;
  flex-direction: column;
}
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-icon-effect-mode-wrapper,
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-icon-layer-mode-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-icon-layer-mode-wrapper select {
  margin-left: auto;
}
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-icon-shape-control-wrapper,
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-icon-effect-mode-slider-group {
  display: flex;
  flex-direction: column;
  align-items: start;
}

/* Labels */
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-icon-effect-mode-wrapper span,
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-icon-layer-mode-wrapper span,
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-icon-shape-control-wrapper span,
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-icon-effect-mode-slider-group span,
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-icon-output-resolution span {
  font-size: 12px;
  margin-right: 5px;
  color: #5c5c5a;
}

/* Selects */
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-icon-effect-mode-wrapper select,
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-icon-layer-mode-wrapper select,
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-icon-shape-control-wrapper select,
.wpgmza-atlas-major .wpgmza-marker-icon-editor select[data-history-control],
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-icon-output-resolution select {
  font-size: 12px;
  padding: 4px 24px 4px 10px;
  border: 1px solid #e5e5e4;
  border-radius: 5px;
  background: #f5f5f4;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}

/* Range sliders */
.wpgmza-atlas-major .wpgmza-marker-icon-editor input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: #e5e5e4;
  outline: none;
  border-radius: 4px;
  margin: 12px 0;
  opacity: 0.7;
  transition: opacity 0.2s;
}
.wpgmza-atlas-major .wpgmza-marker-icon-editor input[type="range"]:hover { opacity: 1; }
.wpgmza-atlas-major .wpgmza-marker-icon-editor input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  background: #ffffff;
  border: 2px solid #1a1a19;
  height: 14px;
  width: 14px;
  border-radius: 50%;
  transition: background 0.2s, border-color 0.2s;
}
.wpgmza-atlas-major .wpgmza-marker-icon-editor input[type="range"]::-webkit-slider-thumb:hover {
  background: #1a1a19;
}

/* Hue rotate gradient */
.wpgmza-atlas-major .wpgmza-marker-icon-editor input[type="range"][data-control="hue-rotate"] {
  background: linear-gradient(to right, #ff0000, #ff0, #00ff00, #00ffff, #0000ff, #f0f, #ff0000);
}
.wpgmza-atlas-major .wpgmza-marker-icon-editor input[type="range"][data-control="brightness"] {
  background: linear-gradient(to right, #000 0%, #fff 100%);
}

/* Layer inputs */
.wpgmza-atlas-major .wpgmza-marker-icon-editor .layer-input-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 5px;
  font-size: 12px;
  position: relative;
}
.wpgmza-atlas-major .wpgmza-marker-icon-editor .layer-input-wrapper > input,
.wpgmza-atlas-major .wpgmza-marker-icon-editor .layer-input-wrapper > div {
  margin-left: auto;
  max-width: 130px;
}
.wpgmza-atlas-major .wpgmza-marker-icon-editor .layer-input-wrapper input {
  width: 100%;
  font-size: 12px;
  box-sizing: border-box;
  padding: 4px 10px;
  border: 1px solid #e5e5e4;
  border-radius: 5px;
}

/* Grouped input stacks */
.wpgmza-atlas-major .wpgmza-marker-icon-editor .layer-input-wrapper .grouped-input-stack {
  display: flex;
  align-items: center;
}
.wpgmza-atlas-major .wpgmza-marker-icon-editor .layer-input-wrapper .grouped-input-stack > * {
  border-radius: 0;
  border: 1px solid #e5e5e4;
  display: block;
  height: 30px;
  box-sizing: border-box;
  margin: 0;
  max-width: 100%;
  border-right: 0;
}
.wpgmza-atlas-major .wpgmza-marker-icon-editor .layer-input-wrapper .grouped-input-stack > *:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.wpgmza-atlas-major .wpgmza-marker-icon-editor .layer-input-wrapper .grouped-input-stack > *:last-child {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border-right: 1px solid #e5e5e4;
}
.wpgmza-atlas-major .wpgmza-marker-icon-editor .layer-input-wrapper .grouped-input-stack > span {
  padding: 4px;
  flex: 1;
  text-align: center;
  font-size: 12px;
  background: #f5f5f4;
}
.wpgmza-atlas-major .wpgmza-marker-icon-editor .layer-input-wrapper .grouped-input-stack > input {
  flex: 2;
}

/* Layer controls */
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-marker-icon-editor-layer .wpgmza-icon-layer-control[data-mode] { display: none; }
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-marker-icon-editor-layer .wpgmza-icon-layer-control[data-mode].active { display: block; }

/* Edit options */
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-marker-icon-editor-panel .edit-options { width: 100%; }

/* Shape controls */
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-icon-shape-split-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.25rem;
}
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-icon-shape-split-row .wpgmza-icon-shape-split-column-fill { margin-right: auto; }
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-icon-shape-control-wrapper input[type="range"][data-style="micro"] { max-width: 100px; }

/* Saving overlay */
.wpgmza-atlas-major .wpgmza-marker-icon-editor.open.saving:before {
  content: "";
  background: #ffffff;
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  z-index: 9;
  opacity: 0.5;
  border-radius: 12px;
}

/* Color picker */
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-color-picker {
  max-width: 150px;
  top: 10px;
  right: 75px !important;
}
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-color-input-wrapper .wpgmza-color-preview {
  width: 45px;
  border-radius: 5px;
}

/* Autocomplete dropdown */
.wpgmza-atlas-major .wpgmza-marker-icon-editor .layer-input-wrapper .icon-picker-autocomplete {
  top: 30px;
  right: 0;
  z-index: 6;
  width: 100%;
}

/* Scrollbar */
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-marker-icon-configurator::-webkit-scrollbar { width: 5px; }
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-marker-icon-configurator::-webkit-scrollbar-track { background: transparent; }
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-marker-icon-configurator::-webkit-scrollbar-thumb { background: #ddd; border-radius: 3px; }
.wpgmza-atlas-major .wpgmza-marker-icon-editor .wpgmza-marker-icon-configurator::-webkit-scrollbar-thumb:hover { background: #ccc; }

/* ==========================================================
   COLOR INPUT WRAPPER & COLOR PICKER — full port from Novus
   ========================================================== */

/* Wrapper */
.wpgmza-atlas-major .wpgmza-color-input-wrapper,
.wpgmza-color-input-host {
  position: relative;
}

/* Preview swatch (default circle) */
.wpgmza-atlas-major .wpgmza-color-input-wrapper .wpgmza-color-preview,
.wpgmza-color-input-host .wpgmza-color-preview {
  position: relative;
  width: 25px;
  height: 25px;
  border-radius: 50px;
  overflow: hidden;
  margin-bottom: 5px;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.wpgmza-atlas-major .wpgmza-color-input-wrapper .wpgmza-color-preview:hover,
.wpgmza-color-input-host .wpgmza-color-preview:hover {
  transform: scale(1.1);
}
.wpgmza-atlas-major .wpgmza-color-input-wrapper .wpgmza-color-preview.anchor-right {
  margin-left: auto;
}

/* Checkerboard pattern behind swatch (transparency indicator) */
.wpgmza-atlas-major .wpgmza-color-input-wrapper .wpgmza-color-preview:before,
.wpgmza-atlas-major .wpgmza-color-input-wrapper .wpgmza-color-preview:after {
  content: "";
  display: block;
  position: absolute;
  width: 50%;
  height: 50%;
  top: 0;
  left: 0;
  background: #b4b4b4;
}
.wpgmza-atlas-major .wpgmza-color-input-wrapper .wpgmza-color-preview:after {
  left: unset;
  top: unset;
  bottom: 0;
  right: 0;
}

/* Color swatch overlay */
.wpgmza-atlas-major .wpgmza-color-input-wrapper .wpgmza-color-preview .swatch,
.wpgmza-color-input-host .wpgmza-color-preview .swatch {
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  z-index: 2;
}

/* Picker popup */
.wpgmza-atlas-major .wpgmza-color-input-wrapper .wpgmza-color-picker,
.wpgmza-color-input-host .wpgmza-color-picker {
  display: none;
  position: absolute;
  z-index: 5;
  width: 200px;
}
.wpgmza-atlas-major .wpgmza-color-input-wrapper .wpgmza-color-picker.anchor-right,
.wpgmza-color-input-host .wpgmza-color-picker.anchor-right {
  right: 0;
}
.wpgmza-atlas-major .wpgmza-color-input-wrapper .wpgmza-color-picker.active,
.wpgmza-color-input-host .wpgmza-color-picker.active {
  display: block;
}

/* Color wheel canvas */
.wpgmza-atlas-major .wpgmza-color-input-wrapper .wpgmza-color-picker .color-wheel,
.wpgmza-color-input-host .wpgmza-color-picker .color-wheel {
  max-width: 100%;
}
.wpgmza-atlas-major .wpgmza-color-input-wrapper .wpgmza-color-picker .canvas-wrapper,
.wpgmza-color-input-host .wpgmza-color-picker .canvas-wrapper {
  position: relative;
}

/* Canvas handle (color selector dot) */
.wpgmza-atlas-major .wpgmza-color-input-wrapper .wpgmza-color-picker .canvas-handle,
.wpgmza-color-input-host .wpgmza-color-picker .canvas-handle {
  width: 10px;
  height: 10px;
  border: 3px solid #fff;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Canvas slider (lightness ring slider) */
.wpgmza-atlas-major .wpgmza-color-input-wrapper .wpgmza-color-picker .canvas-slider,
.wpgmza-color-input-host .wpgmza-color-picker .canvas-slider {
  width: 8px;
  height: 8px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Field wrapper */
.wpgmza-atlas-major .wpgmza-color-input-wrapper .wpgmza-color-field-wrapper,
.wpgmza-color-input-host .wpgmza-color-field-wrapper {
  margin-top: 10px;
}

/* Expand/collapse toggle chevrons */
.wpgmza-atlas-major .wpgmza-color-input-wrapper .color-field-toggle,
.wpgmza-color-input-host .color-field-toggle {
  display: flex;
  justify-content: center;
  padding: 5px;
  cursor: pointer;
  margin-bottom: 10px;
}
.wpgmza-atlas-major .wpgmza-color-input-wrapper .color-field-toggle:before,
.wpgmza-atlas-major .wpgmza-color-input-wrapper .color-field-toggle:after,
.wpgmza-color-input-host .color-field-toggle:before,
.wpgmza-color-input-host .color-field-toggle:after {
  content: "";
  display: block;
  width: 5px;
  height: 5px;
  border: 2px solid #9c9c99;
  border-right: 0;
  border-bottom: 0;
  transform: rotate(-45deg);
  transition: border 0.2s ease;
}
.wpgmza-atlas-major .wpgmza-color-input-wrapper .color-field-toggle:after,
.wpgmza-color-input-host .color-field-toggle:after {
  border: 2px solid #9c9c99;
  border-left: 0;
  border-top: 0;
}
.wpgmza-atlas-major .wpgmza-color-input-wrapper .color-field-toggle:hover:before,
.wpgmza-atlas-major .wpgmza-color-input-wrapper .color-field-toggle:hover:after,
.wpgmza-color-input-host .color-field-toggle:hover:before,
.wpgmza-color-input-host .color-field-toggle:hover:after {
  border-color: #5c5c5a;
}

/* RGBA field block — labels and controls as horizontal rows */
.wpgmza-atlas-major .wpgmza-color-input-wrapper .wpgmza-color-field-wrapper .field-block .labels,
.wpgmza-atlas-major .wpgmza-color-input-wrapper .wpgmza-color-field-wrapper .field-block .controls,
.wpgmza-color-input-host .wpgmza-color-field-wrapper .field-block .labels,
.wpgmza-color-input-host .wpgmza-color-field-wrapper .field-block .controls {
  display: flex;
  margin-bottom: 5px;
}
.wpgmza-atlas-major .wpgmza-color-input-wrapper .wpgmza-color-field-wrapper .field-block .labels .inner-label,
.wpgmza-color-input-host .wpgmza-color-field-wrapper .field-block .labels .inner-label {
  flex: 1;
  text-align: center;
  font-size: 14px;
  text-transform: uppercase;
  color: #9c9c99;
}
.wpgmza-atlas-major .wpgmza-color-input-wrapper .wpgmza-color-field-wrapper .field-block .controls input,
.wpgmza-color-input-host .wpgmza-color-field-wrapper .field-block .controls input {
  flex: 1;
  min-width: unset;
  width: 100%;
  border: 1px solid #e5e5e4;
  margin: 0;
  padding: 2px;
  font-size: 14px;
  text-align: center;
  border-right: none;
  border-radius: 0;
  background: #fff;
  color: #1a1a19;
  box-shadow: none;
  height: auto;
  line-height: normal;
}
.wpgmza-atlas-major .wpgmza-color-input-wrapper .wpgmza-color-field-wrapper .field-block .controls input:focus,
.wpgmza-color-input-host .wpgmza-color-field-wrapper .field-block .controls input:focus {
  outline: none;
  border-color: #e5e5e4;
  box-shadow: none;
}
.wpgmza-atlas-major .wpgmza-color-input-wrapper .wpgmza-color-field-wrapper .field-block .controls input:first-child,
.wpgmza-color-input-host .wpgmza-color-field-wrapper .field-block .controls input:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.wpgmza-atlas-major .wpgmza-color-input-wrapper .wpgmza-color-field-wrapper .field-block .controls input:last-child,
.wpgmza-atlas-major .wpgmza-color-input-wrapper .wpgmza-color-field-wrapper .field-block.alpha-disabled .controls input:nth-child(3),
.wpgmza-color-input-host .wpgmza-color-field-wrapper .field-block .controls input:last-child,
.wpgmza-color-input-host .wpgmza-color-field-wrapper .field-block.alpha-disabled .controls input:nth-child(3) {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border-right: 1px solid #e5e5e4;
}
.wpgmza-atlas-major .wpgmza-color-input-wrapper .wpgmza-color-field-wrapper .field-block.alpha-disabled .labels .inner-label:last-child,
.wpgmza-atlas-major .wpgmza-color-input-wrapper .wpgmza-color-field-wrapper .field-block.alpha-disabled .controls input:last-child,
.wpgmza-color-input-host .wpgmza-color-field-wrapper .field-block.alpha-disabled .labels .inner-label:last-child,
.wpgmza-color-input-host .wpgmza-color-field-wrapper .field-block.alpha-disabled .controls input:last-child {
  display: none;
}

/* Color palette swatches */
.wpgmza-atlas-major .wpgmza-color-input-wrapper .wpgmza-color-palette-wrap,
.wpgmza-color-input-host .wpgmza-color-palette-wrap {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #f0efee;
}
.wpgmza-atlas-major .wpgmza-color-input-wrapper .wpgmza-color-palette-wrap .palette-swatch,
.wpgmza-color-input-host .wpgmza-color-palette-wrap .palette-swatch {
  width: 23px;
  height: 23px;
  margin-right: 2px;
  margin-bottom: 3px;
  border-radius: 3px;
  position: relative;
  transition: transform 0.2s ease;
  cursor: pointer;
}
.wpgmza-atlas-major .wpgmza-color-input-wrapper .wpgmza-color-palette-wrap .palette-swatch:hover,
.wpgmza-color-input-host .wpgmza-color-palette-wrap .palette-swatch:hover {
  transform: scale(1.1);
}

/* Editor sidebar — rectangular swatch + in-map picker placement */
.wpgmza-atlas-major .wpgmza-editor .grouping .settings .wpgmza-color-input-wrapper .wpgmza-color-preview,
.wpgmza-atlas-major .wpgmza-feature-panel .wpgmza-color-input-wrapper .wpgmza-color-preview {
  border-radius: 4px;
  width: 45px;
  height: 28px;
  margin-right: 30px;
}
.wpgmza-atlas-major .wpgmza-editor .grouping .settings .wpgmza-color-input-wrapper .wpgmza-color-preview:hover,
.wpgmza-atlas-major .wpgmza-feature-panel .wpgmza-color-input-wrapper .wpgmza-color-preview:hover {
  transform: scale(1.01);
}

/* In-map color picker (map editor canvas overlay) */
.wpgmza-atlas-major .wpgmza-editor .map_wrapper .wpgmza-color-picker.wpgmza-card.wpgmza-shadow.active,
.wpgmza-atlas-major .wpgmza-editor .map_wrapper .wpgmza-color-picker.wpgmza-card.wpgmza-shadow.anchor-right.active {
  right: unset;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
}

/* Live-Preview-mode placement is handled in JS at the bottom of
   js/v8/atlas-major-live-preview.js (search "COLOR PICKER REPARENT").
   That module moves the picker into a body-level host on open
   (LP mode only) so it escapes the map engine's transforms and
   the `.content` / `.am-preview-page` overflow clips, then
   positions it via getBoundingClientRect near the trigger swatch.
   On LP-off, the picker is restored to its original parent so
   the `left: 10px inside .map_wrapper` rule above still applies
   and the picker overlays the map directly. */

/* Pro disabled color picker */
.wpgmza-atlas-major .wpgmza-pro-feature .wpgmza-color-input-wrapper .wpgmza-color-preview {
  pointer-events: none;
}

/* Footer notice — align with map list page content */
.wpgmza-support-notice-container {
  max-width: calc(100% - 8px);
  margin: 0 24px 16px;
  padding: 0 !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}
.wpgmza-support-notice-container .wpgmza-support-notice {
  background: #ffffff;
  border: 1px solid #e5e5e4;
  border-radius: 12px;
  padding: 14px 18px;
  box-shadow: none;
  font-size: 13px;
  color: #5c5c5a;
  line-height: 1.6;
}
.wpgmza-support-notice-container .wpgmza-support-notice strong {
  color: #1a1a19;
}
.wpgmza-support-notice-container .wpgmza-support-notice a {
  color: #6d28d9;
  font-weight: 500;
}

/* Showcase — align with map list page content */
.wpgmza-atlas-major.wpgmza-demo-showcase-grid {
  margin: 0 24px 24px !important;
  padding: 0 !important;
}

/* ============================================
   WRITE-UP PAGES (Welcome / Credits)
   Atlas Novus equivalent styles its writeup pages
   via .wpgmza-writeup-block / .wpgmza-writeup-tabs
   in wp-google-maps-admin.css, but Atlas Major
   deliberately skips that stylesheet (it's
   self-contained), so we restyle the same pages
   here under the .am- class system used in the
   Atlas Major template ports.

   Every rule below is scoped to require BOTH
   .wpgmza-atlas-major AND .wpgmza-writeup-block on
   the page wrap. The Support page also uses .am-page
   but does NOT have .wpgmza-writeup-block, so it
   stays untouched by these rules — its own
   .ui-tabs-* card layout remains in charge.
   ============================================ */

/* Tabs nav
   NB: The `.am-writeup-tabs` container is rendered as a SIBLING of
   `.wpgmza-atlas-major.wpgmza-writeup-block` (see html/atlas-major/
   welcome.html.php + credits.html.php — the tabs div sits OUTSIDE
   the writeup-block wrapper, not inside it). That's why these rules
   can't be scoped under `.wpgmza-atlas-major` or `.wpgmza-writeup-block`
   the way the rest of this section is — neither is an ancestor.
   Using the standalone `.am-writeup-tabs` selector is safe because
   the `am-` prefix is Atlas-Major-exclusive; Atlas Novus's template
   uses `.wpgmza-writeup-tabs` only and has its own rules in
   atlas-novus/wp-google-maps-admin.css. */
.am-writeup-tabs {
  width: 1100px;
  max-width: calc(100% - 20px);
  margin: 30px auto 0 auto;
  text-align: left;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  box-sizing: border-box;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}
.am-writeup-tabs .am-tab-link {
  padding: 8px 22px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 100px;
  text-decoration: none;
  color: var(--am-text-2, #5c5c5a);
  background: transparent;
  border: 1px solid transparent;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.am-writeup-tabs .am-tab-link:hover {
  background: var(--am-bg, #f5f5f4);
  color: var(--am-text-1, #1a1a19);
}
.am-writeup-tabs .am-tab-link-active {
  background: var(--am-accent-soft, #fef2f1);
  color: var(--am-accent, #e8473f);
  border-color: var(--am-accent-border, #fecaca);
}

/* Page wrap — Atlas Major writeup block */
.wpgmza-atlas-major.wpgmza-writeup-block.am-page,
.wpgmza-atlas-major.wpgmza-writeup-block .am-page {
  width: 1100px;
  max-width: calc(100% - 20px);
  margin: 24px auto 40px auto;
  padding: 60px;
  background: var(--am-surface, #ffffff);
  border: 1px solid var(--am-border, #e5e5e4);
  border-radius: var(--am-radius-lg, 12px);
  text-align: center;
  box-sizing: border-box;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  color: var(--am-text-1, #1a1a19);
}

/* Hero */
.wpgmza-atlas-major.wpgmza-writeup-block .am-page-hero {
  margin-bottom: 20px;
}
.wpgmza-atlas-major.wpgmza-writeup-block .am-hero-text {
  margin-bottom: 16px;
}
.wpgmza-atlas-major.wpgmza-writeup-block .am-hero-banner {
  margin: 20px auto;
}
.wpgmza-atlas-major.wpgmza-writeup-block .am-hero-banner img {
  max-width: 100%;
  height: auto;
}

/* Headings — restore the hierarchy Atlas Novus gave the writeup block */
.wpgmza-atlas-major.wpgmza-writeup-block .am-page-title {
  font-size: 2.4em;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 20px 0;
  color: var(--am-text-1, #1a1a19);
  letter-spacing: -0.02em;
}
.wpgmza-atlas-major.wpgmza-writeup-block .am-section-title {
  font-size: 1.9em;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 16px 0;
  color: var(--am-text-1, #1a1a19);
  letter-spacing: -0.015em;
}
.wpgmza-atlas-major.wpgmza-writeup-block .am-section-subtitle {
  font-size: 1.1em;
  font-weight: 400;
  line-height: 1.6;
  margin: 0 0 12px 0;
  color: var(--am-text-2, #5c5c5a);
}
.wpgmza-atlas-major.wpgmza-writeup-block .am-feature-title {
  font-size: 1.7em;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 14px 0;
  color: var(--am-text-1, #1a1a19);
  letter-spacing: -0.015em;
}
.wpgmza-atlas-major.wpgmza-writeup-block .am-feature-subtitle {
  font-size: 1.05em;
  font-weight: 400;
  line-height: 1.6;
  margin: 0 0 10px 0;
  color: var(--am-text-2, #5c5c5a);
}
.wpgmza-atlas-major.wpgmza-writeup-block .am-card-title {
  font-size: 1.2em;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 10px 0;
  color: var(--am-text-1, #1a1a19);
}

/* Sections + dividers */
.wpgmza-atlas-major.wpgmza-writeup-block .am-section {
  margin: 30px 0;
}
.wpgmza-atlas-major.wpgmza-writeup-block .am-divider {
  border: none;
  border-bottom: 1px solid var(--am-border, #e5e5e4);
  margin: 50px 0;
  display: block;
}
.wpgmza-atlas-major.wpgmza-writeup-block .am-separator {
  display: block;
  height: 60px;
}

/* Community / call-out card grid */
.wpgmza-atlas-major.wpgmza-writeup-block .am-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 24px;
  text-align: center;
}
.wpgmza-atlas-major.wpgmza-writeup-block .am-card {
  background: var(--am-surface, #ffffff);
  border: 1px solid var(--am-border, #e5e5e4);
  border-radius: var(--am-radius-lg, 12px);
  padding: 24px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.wpgmza-atlas-major.wpgmza-writeup-block .am-card:hover {
  border-color: var(--am-text-3, #9c9c99);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}
.wpgmza-atlas-major.wpgmza-writeup-block .am-card-body {
  font-size: 0.95em;
  line-height: 1.6;
  color: var(--am-text-2, #5c5c5a);
  margin-bottom: 18px;
  flex: 1 1 auto;
}
.wpgmza-atlas-major.wpgmza-writeup-block .am-card .am-btn,
.wpgmza-atlas-major.wpgmza-writeup-block .am-card .wpgmza-button {
  align-self: center;
}

/* Feature rows — alternating image/text */
.wpgmza-atlas-major.wpgmza-writeup-block .am-feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  margin: 30px 0;
  text-align: left;
}
.wpgmza-atlas-major.wpgmza-writeup-block .am-feature-row .am-feature-text {
  text-align: center;
}
.wpgmza-atlas-major.wpgmza-writeup-block .am-feature-row .am-feature-image {
  text-align: center;
}
.wpgmza-atlas-major.wpgmza-writeup-block .am-feature-row .am-feature-image img {
  max-width: 100%;
  height: auto;
  border-radius: var(--am-radius, 8px);
}
.wpgmza-atlas-major.wpgmza-writeup-block .am-feature-row[data-image="right"] .am-feature-text {
  order: 1;
}
.wpgmza-atlas-major.wpgmza-writeup-block .am-feature-row[data-image="right"] .am-feature-image {
  order: 2;
}
.wpgmza-atlas-major.wpgmza-writeup-block .am-feature-img {
  max-width: 100%;
  height: auto;
  margin: 24px auto 0 auto;
  display: block;
  border-radius: var(--am-radius, 8px);
}

/* Info sections (New to WP Go Maps, Help me, Feedback) */
.wpgmza-atlas-major.wpgmza-writeup-block .am-info-section {
  text-align: center;
  margin: 24px 0;
}
.wpgmza-atlas-major.wpgmza-writeup-block .am-info-section a {
  color: var(--am-accent, #e8473f);
  text-decoration: none;
  font-weight: 600;
}
.wpgmza-atlas-major.wpgmza-writeup-block .am-info-section a:hover {
  text-decoration: underline;
}

/* CTA footer */
.wpgmza-atlas-major.wpgmza-writeup-block .am-cta-footer {
  text-align: center;
  margin-top: 30px;
}
.wpgmza-atlas-major.wpgmza-writeup-block .am-cta-footer .am-section-title {
  margin-bottom: 20px;
}

/* ============================================
   CREDITS PAGE — additions on top of write-up base
   ============================================ */

/* Credits hero — big version number */
.wpgmza-atlas-major.wpgmza-writeup-block .am-credits-hero {
  text-align: center;
  margin-bottom: 10px;
}
.wpgmza-atlas-major.wpgmza-writeup-block .am-credits-version {
  font-size: 3.2em;
  font-weight: 800;
  line-height: 1.1;
  margin: 0;
  color: var(--am-accent, #e8473f);
  letter-spacing: -0.025em;
}

/* Member card grid */
.wpgmza-atlas-major.wpgmza-writeup-block .am-credit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 24px;
  text-align: left;
}
.wpgmza-atlas-major.wpgmza-writeup-block .am-credit-grid .am-member-card {
  background: var(--am-surface, #ffffff);
  border: 1px solid var(--am-border, #e5e5e4);
  border-radius: var(--am-radius-lg, 12px);
  padding: 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--am-text-1, #1a1a19);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}
.wpgmza-atlas-major.wpgmza-writeup-block .am-credit-grid .am-member-card:hover {
  border-color: var(--am-text-3, #9c9c99);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
  color: var(--am-accent, #e8473f);
}
.wpgmza-atlas-major.wpgmza-writeup-block .am-credit-grid .am-avatar-wrap {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--am-bg, #f5f5f4);
}
.wpgmza-atlas-major.wpgmza-writeup-block .am-credit-grid .am-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(1);
  transition: filter 0.2s ease;
}
.wpgmza-atlas-major.wpgmza-writeup-block .am-credit-grid .am-member-card:hover .am-avatar {
  filter: grayscale(0);
}
.wpgmza-atlas-major.wpgmza-writeup-block .am-credit-grid .am-member-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.wpgmza-atlas-major.wpgmza-writeup-block .am-credit-grid .am-member-name {
  font-weight: 600;
  font-size: 1.05em;
  line-height: 1.3;
}
.wpgmza-atlas-major.wpgmza-writeup-block .am-credit-grid .am-member-title {
  display: block;
  font-size: 0.9em;
  color: var(--am-text-2, #5c5c5a);
  line-height: 1.3;
}

/* Chain lists — comma-separated inline names */
.wpgmza-atlas-major.wpgmza-writeup-block .am-card .am-chain-list,
.wpgmza-atlas-major.wpgmza-writeup-block .am-chain-list {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
  font-size: 1em;
  line-height: 2;
  color: var(--am-text-2, #5c5c5a);
}
.wpgmza-atlas-major.wpgmza-writeup-block .am-chain-list li {
  display: inline;
}
.wpgmza-atlas-major.wpgmza-writeup-block .am-chain-list li:after {
  content: ", ";
}
.wpgmza-atlas-major.wpgmza-writeup-block .am-chain-list li:last-child:after {
  content: "";
}
.wpgmza-atlas-major.wpgmza-writeup-block .am-chain-list li code {
  background: var(--am-bg, #f5f5f4);
  color: var(--am-text-3, #9c9c99);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.8em;
  padding: 1px 6px;
  border-radius: var(--am-radius-sm, 5px);
  margin-left: 4px;
}

/* Credit chain blocks (Security, Core Contributions, Translators)
   render as plain text on the page background — no card chrome.
   Atlas Novus styled these the same way (just a list of names with
   breathing room) and an earlier Atlas Major pass wrapped them in
   `.am-card` for visual grouping, but the soft-gray card panel
   washed out the `<code>` version pills (which share the same gray
   tone) and made the section feel heavier than it should. Reverted
   to the unwrapped layout — the chain list does the work. */
.wpgmza-atlas-major.wpgmza-writeup-block .am-section .credit-container.am-chain-block {
  margin-top: 16px;
}

/* Italic note under chain-list cards */
.wpgmza-atlas-major.wpgmza-writeup-block .am-credits-note {
  font-size: 0.95em;
  color: var(--am-text-3, #9c9c99);
  margin-top: 14px;
  margin-bottom: 0;
}

/* GitHub link in the last call-out */
.wpgmza-atlas-major.wpgmza-writeup-block .am-github-link {
  color: var(--am-accent, #e8473f);
  font-weight: 600;
  text-decoration: none;
}
.wpgmza-atlas-major.wpgmza-writeup-block .am-github-link:hover {
  text-decoration: underline;
}

/* ============================================
   WRITE-UP RESPONSIVE
   ============================================ */
@media (max-width: 900px) {
  .wpgmza-atlas-major.wpgmza-writeup-block.am-page,
  .wpgmza-atlas-major.wpgmza-writeup-block .am-page {
    padding: 40px 24px;
  }
  .wpgmza-atlas-major.wpgmza-writeup-block .am-page-title { font-size: 2em; }
  .wpgmza-atlas-major.wpgmza-writeup-block .am-section-title { font-size: 1.6em; }
  .wpgmza-atlas-major.wpgmza-writeup-block .am-feature-title { font-size: 1.4em; }
  .wpgmza-atlas-major.wpgmza-writeup-block .am-credits-version { font-size: 2.4em; }

  .wpgmza-atlas-major.wpgmza-writeup-block .am-feature-row {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .wpgmza-atlas-major.wpgmza-writeup-block .am-feature-row[data-image="right"] .am-feature-text,
  .wpgmza-atlas-major.wpgmza-writeup-block .am-feature-row[data-image="right"] .am-feature-image {
    order: initial;
  }

  .wpgmza-atlas-major.wpgmza-writeup-block .am-divider { margin: 30px 0; }
  .wpgmza-atlas-major.wpgmza-writeup-block .am-separator { height: 30px; }
}

/* ============================================
   SHAPE LIBRARY (Pro — boundary/admin-region picker)
   Mirrors the Atlas Novus styling at
   wp-google-maps/css/atlas-novus/wp-google-maps-admin.css:5793-5887
   but uses Atlas Major design tokens (--am-border, --am-radius, font
   family) instead of the Novus variables. JS that builds this UI lives
   in wp-google-maps-pro/js/v8/map-edit-page/shape-library-panel.js —
   it renders directly into .wpgmza-shape-library-container .shape-
   library-inner, so no template change is needed; this is a CSS-only
   port. Scoped under .wpgmza-atlas-major to keep it inert under
   Novus / Legacy. ============================================ */

.wpgmza-atlas-major .wpgmza-shape-library-container .shape-library-inner > * {
  margin-bottom: 10px;
}

.wpgmza-atlas-major .wpgmza-shape-library-container .shape-library-inner .shape-library-busy {
  position: relative;
  height: 30px;
}

.wpgmza-atlas-major .wpgmza-shape-library-container .shape-library-inner .shape-library-busy:after {
  content: "";
  width: 20px;
  height: 20px;
  position: absolute;
  top: calc(50% - 10px);
  left: calc(50% - 10px);
  border: 4px solid var(--am-text-3);
  border-top-color: transparent;
  border-left-color: transparent;
  border-radius: 40px;
  animation: wpgmzaLoadCircle 0.7s linear infinite;
  z-index: 2;
}

.wpgmza-atlas-major .wpgmza-shape-library-container .shape-library-inner .shape-library-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wpgmza-atlas-major .wpgmza-shape-library-container .shape-library-inner .shape-library-list .wpgmza-shape-library-item {
  border: 1px solid var(--am-border);
  border-radius: var(--am-radius);
  display: flex;
  gap: 10px;
  padding: 12px;
  box-sizing: border-box;
  background: var(--am-surface);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  transition: border-color 0.12s var(--am-ease);
}

.wpgmza-atlas-major .wpgmza-shape-library-container .shape-library-inner .shape-library-list .wpgmza-shape-library-item:hover {
  border-color: var(--am-text-3);
}

.wpgmza-atlas-major .wpgmza-shape-library-container .shape-library-inner .shape-library-list .wpgmza-shape-library-item .wpgmza-shape-library-item-details {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 13px;
  color: var(--am-text-1);
}

.wpgmza-atlas-major .wpgmza-shape-library-container .shape-library-inner .shape-library-list .wpgmza-shape-library-item .wpgmza-shape-library-item-details .meta-pills {
  display: flex;
  gap: 5px;
  flex-direction: column;
}

.wpgmza-atlas-major .wpgmza-shape-library-container .shape-library-inner .shape-library-list .wpgmza-shape-library-item .wpgmza-shape-library-item-details .meta-pills > * {
  font-size: 11px;
  color: var(--am-text-3);
}

.wpgmza-atlas-major .wpgmza-shape-library-container .shape-library-inner .shape-library-list .wpgmza-shape-library-item .wpgmza-shape-library-item-actions {
  min-width: 120px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
  margin-left: auto;
}

.wpgmza-atlas-major .wpgmza-shape-library-container .shape-library-inner .shape-library-list .wpgmza-shape-library-item .wpgmza-shape-library-item-actions .wpgmza-shape-library-action {
  width: 120px;
  text-align: center;
  font-weight: 500;
}

.wpgmza-atlas-major .wpgmza-shape-library-container .shape-library-inner .shape-library-no-results {
  border: 1px dashed var(--am-border);
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  border-radius: var(--am-radius);
  font-size: 12px;
  color: var(--am-text-2);
  background: var(--am-bg);
}

.wpgmza-atlas-major .wpgmza-shape-library-container .shape-library-inner .wpgmza-shape-library-item.shape-library-lookup-busy {
  -webkit-animation: wpgmzaPulse 1s forwards;
  animation: wpgmzaPulse 1s forwards;
  animation-iteration-count: infinite;
}

.wpgmza-atlas-major .wpgmza-shape-library-container .shape-library-inner .wpgmza-shape-library-item.shape-library-lookup-busy .wpgmza-button {
  opacity: 0.6;
  pointer-events: none;
}

/* wpgmzaPulse keyframes — used by the shape-library item lookup-busy
   state. Defined in Atlas Novus's wp-google-maps-admin.css; mirrored
   here because Atlas Major doesn't load that stylesheet (same reason
   wpgmzaLoadCircle / wpgmzaPulseFade had to be re-declared above). */
@-webkit-keyframes wpgmzaPulse {
  0%   { opacity: 0.3; }
  50%  { opacity: 1; }
  100% { opacity: 0.3; }
}
@keyframes wpgmzaPulse {
  0%   { opacity: 0.3; }
  50%  { opacity: 1; }
  100% { opacity: 0.3; }
}

/* ============================================
   JSTREE CATEGORY PICKER (Pro — marker / shape category tree)
   The default jstree theme loads via class.category-picker.php
   (lib/themes/default/style.min.css), which provides baseline
   anchor / icon / row visuals. Atlas Novus then adds custom
   overrides in wp-google-maps-admin.css:4156-4226 (the +/- ocl
   toggle, themeicon hidden, checkbox alignment, etc.). Atlas
   Major doesn't load that admin stylesheet, so those overrides
   were missing — the picker fell back to plain default-theme
   appearance with mismatched hover/clicked blues that clashed
   with the AM palette.

   Ported below: Novus's structural rules + Atlas Major-flavoured
   hover / clicked / checked colours, font family, and tighter
   spacing on .jstree-anchor (the clickable label row).
   Selectors broadened from Novus's `.wpgmza-editor .sidebar` and
   `.wpgmza-generic-modal` scopes to a single `.wpgmza-atlas-major`
   scope so the picker styles correctly in any AM context (sidebar,
   modal, settings panels). ============================================ */

/* Anchor (the clickable label row containing checkbox + text) */
.wpgmza-atlas-major .wpgmza-category-picker.jstree .jstree-anchor {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 13px;
  color: var(--am-text-1);
  padding: 2px 6px;
  border-radius: var(--am-radius-sm);
  transition: background 0.12s var(--am-ease), color 0.12s var(--am-ease);
}

/* Hover — override the default theme's pale-blue with AM bg */
.wpgmza-atlas-major .wpgmza-category-picker.jstree .jstree-anchor.jstree-hovered,
.wpgmza-atlas-major .wpgmza-category-picker.jstree .jstree-hovered {
  background: var(--am-bg) !important;
  color: var(--am-text-1);
  box-shadow: none !important;
}

/* Clicked / selected — accent-soft tint */
.wpgmza-atlas-major .wpgmza-category-picker.jstree .jstree-anchor.jstree-clicked,
.wpgmza-atlas-major .wpgmza-category-picker.jstree .jstree-clicked {
  background: var(--am-accent-soft) !important;
  color: var(--am-accent) !important;
  box-shadow: none !important;
}
.wpgmza-atlas-major .wpgmza-category-picker.jstree .jstree-anchor.jstree-clicked.jstree-hovered,
.wpgmza-atlas-major .wpgmza-category-picker.jstree .jstree-clicked.jstree-hovered {
  background: var(--am-accent-soft) !important;
}

/* Wholerow theme — same colour treatment for the wholerow plugin */
.wpgmza-atlas-major .wpgmza-category-picker.jstree .jstree-wholerow-hovered {
  background: var(--am-bg) !important;
  box-shadow: none !important;
}
.wpgmza-atlas-major .wpgmza-category-picker.jstree .jstree-wholerow-clicked {
  background: var(--am-accent-soft) !important;
  box-shadow: none !important;
}

/* Mirror of Novus tweaks — port verbatim with AM-scoped selector. */
.wpgmza-atlas-major .wpgmza-category-picker.jstree ul li {
  padding-left: 0;
}

.wpgmza-atlas-major .wpgmza-category-picker.jstree ul li .jstree-themeicon {
  display: none;
}

.wpgmza-atlas-major .wpgmza-category-picker.jstree ul li .jstree-checkbox {
  margin-right: 4px;
}

/* OCL (open/close toggle) — custom +/- bar built from pseudo elements */
.wpgmza-atlas-major .wpgmza-category-picker.jstree ul li .jstree-ocl {
  --wpgmza-jstree-state-color: var(--am-border);
  position: relative;
  background-image: none;
}

.wpgmza-atlas-major .wpgmza-category-picker.jstree ul li .jstree-node {
  background-image: none;
}

.wpgmza-atlas-major .wpgmza-category-picker.jstree ul li .jstree-ocl:hover {
  --wpgmza-jstree-state-color: var(--am-text-3);
}

.wpgmza-atlas-major .wpgmza-category-picker.jstree ul li .jstree-ocl:before {
  content: "";
  display: block;
  background: var(--wpgmza-jstree-state-color);
  height: 3px;
  width: 12px;
  margin-right: auto;
  margin-left: auto;
  border-radius: 5px;
  margin-top: 10px;
  transition: background 0.2s ease;
}

/* When closed, draw the vertical bar to form a "+" */
.wpgmza-atlas-major .wpgmza-category-picker.jstree ul li.jstree-closed .jstree-ocl:after {
  content: "";
  display: block;
  position: absolute;
  background: var(--wpgmza-jstree-state-color);
  height: 12px;
  width: 3px;
  top: 6px;
  left: 50%;
  border-radius: 5px;
  transform: translateX(-50%);
  transition: background 0.2s ease;
}

/* Leaf nodes — hide the toggle since they can't expand */
.wpgmza-atlas-major .wpgmza-category-picker.jstree ul li .jstree-leaf > .jstree-ocl:before,
.wpgmza-atlas-major .wpgmza-category-picker.jstree ul li .jstree-leaf > .jstree-ocl:after {
  display: none;
}