/* ============================================================
   Mapfield Spots – Admin UI
   ============================================================ */

/* One @font-face per weight/subset, not a single range: `400 700` only
   works with a variable-font file; a single static file would silently
   render every weight as that one weight. */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/manrope-latin-ext-400.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/manrope-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/manrope-latin-ext-500.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/manrope-latin-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/manrope-latin-ext-600.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/manrope-latin-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/manrope-latin-ext-700.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/manrope-latin-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Other tokens live in palette.css, shared with frontend.css. --mapfield_spots-bg
   is admin-only, with no front-end equivalent. */
:root {
  --mapfield_spots-bg: #ffffff;
}

/* Dark mode is PRO — see Mapfield_Spots_Pro\Dark_Mode and its own
   dark-mode.css, loaded only when PRO is active. */

body.plugin-mapfield-spots #wpwrap { background-color: var(--mapfield_spots-light); }
/* Only on the two screens rendering .mapfield_spots-shell, which
   supplies its own left margin; other screens still need core's default
   padding or they'd sit flush against the admin sidebar. */
body.toplevel_page_mapfield-spots #wpcontent,
body.settings_page_mapfield-spots-settings #wpcontent {
  padding-left: 0;
}

/* Meta boxes on our managed post types' edit screens. */
body.plugin-mapfield-spots .postbox {
  border-radius: var(--mapfield_spots-radius);
  border-color: var(--mapfield_spots-medium);
  padding: 14px;
}
body.plugin-mapfield-spots .postbox-header {
  border-color: var(--mapfield_spots-medium);
}
/* Metabox titles, post edit screens only. Matches core's own
   #poststuff-rooted selectors to win on specificity, since #poststuff is
   an ID and outranks a class-only selector otherwise. */
body.plugin-mapfield-spots.post-php #poststuff h2,
body.plugin-mapfield-spots.post-new-php #poststuff h2,
body.plugin-mapfield-spots.post-php #poststuff h3.hndle,
body.plugin-mapfield-spots.post-new-php #poststuff h3.hndle,
body.plugin-mapfield-spots.post-php #poststuff .stuffbox > h3,
body.plugin-mapfield-spots.post-new-php #poststuff .stuffbox > h3 {
  font-size: 20px;
}
/* admin.js disables drag-to-reorder; core's move cursor would otherwise
   be a lie. */
body.plugin-mapfield-spots.post-php #poststuff .postbox .hndle,
body.plugin-mapfield-spots.post-new-php #poststuff .postbox .hndle {
  cursor: default;
}
/* Core's reorder buttons would break our fixed two-column grid below.
   display:none rather than JS-blocked, so they also leave the tab order. */
body.plugin-mapfield-spots.post-php #poststuff .handle-order-higher,
body.plugin-mapfield-spots.post-new-php #poststuff .handle-order-higher,
body.plugin-mapfield-spots.post-php #poststuff .handle-order-lower,
body.plugin-mapfield-spots.post-new-php #poststuff .handle-order-lower {
  display: none;
}
/* More room above the title than core's bare layout gives it. */
body.plugin-mapfield-spots.post-php .wrap.mapfield_spots-wrap,
body.plugin-mapfield-spots.post-new-php .wrap.mapfield_spots-wrap {
  padding: 20px 25px 25px 0;
}
/* Same, for the native list screen, otherwise flush to #wpcontent's edge. */
body.plugin-mapfield-spots.edit-php .wrap.mapfield_spots-wrap {
  padding: 20px 25px 25px 0;
}

/* Two-column grid for our 'normal'-context boxes. `order` pins the
   sequence explicitly; Hours spans the full row since a 7-day table
   doesn't fit a half column. :has(#mfs-location) scopes this to our
   own screens without affecting other post types sharing #normal-sortables. */
#normal-sortables:has(#mfs-location) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}
#normal-sortables #mfs-location    { order: 1; }
#normal-sortables #mfs-description { order: 2; }
#normal-sortables #mfs-contact     { order: 3; }
#normal-sortables #mfs-gallery     { order: 4; }
#normal-sortables #mfs-hours       { order: 5; grid-column: 1 / -1; }
/* ACF field-group metabox ids always start "acf-group_". Pinned last, full
   width, so our own fields stay ahead of any third-party field group
   regardless of ACF's own metabox priority (unordered items default to 0). */
#normal-sortables [id^="acf-group_"] { order: 6; grid-column: 1 / -1; }
/* Stack into one column once the window gets tight. */
@media (max-width: 1120px) {
  #normal-sortables:has(#mfs-location) {
    grid-template-columns: 1fr;
  }
}

/* Classic-editor markup: our post types don't declare 'editor' support. */
body.plugin-mapfield-spots #titlediv #title {
  padding: 28px 20px;
  border-color: var(--mapfield_spots-medium);
  border-radius: var(--mapfield_spots-radius);
}
/* #title-prompt-text is a separately positioned overlay span, not the real
   placeholder attribute; our padding override above never touched it, so
   the overlay text stayed pinned near the top while the caret moved down
   with the new padding. Matched here so both sit in the same place. */
body.plugin-mapfield-spots #titlediv #title-prompt-text {
  padding: 10px 20px;
  line-height: 2.3rem;
}

/* "All spots"/"All zones" + "Back to your maps" — CPT::render_nav_buttons()
   and Zones::render_nav_buttons(), moved above the native H1 by admin.js
   (see its own comment) since WordPress gives no hook there to render
   into directly. */
.mapfield_spots-edit-screen-nav {
  display: flex;
  gap: 10px;
  margin-bottom: var(--mapfield_spots-gap);
}

body.plugin-mapfield-spots .wrap.mapfield_spots-wrap {
  margin: 0;
  font-family: "Manrope", sans-serif;
  color: var(--mapfield_spots-text);
  line-height: 1.5rem;
}
body.plugin-mapfield-spots .wrap.mapfield_spots-wrap :is(p, ul, li, button, code, span, input, label) {
  font-size: 14px;
}
body.plugin-mapfield-spots .wrap.mapfield_spots-wrap h1 { font-size: 30px; color: var(--mapfield_spots-text); }

/* Small utility classes — replace one-off inline styles in PHP templates */
.mapfield_spots-full-width-select { width: 100%; }

/* Groups Button text + Button link so they read as one unit. */
.mapfield_spots-cta-group {
  border: 1px solid var(--mapfield_spots-medium);
  border-radius: 8px;
  padding: 4px 12px 12px;
  margin: 0;
}
.mapfield_spots-cta-group legend {
  padding: 0 4px;
  font-size: 14px;
}
.mapfield_spots-cta-group p:last-child { margin-bottom: 0; }

/* ── Contact & Social: shared label styling ──────────────────────────
   Sub-fields use the smaller variant to read as nested. */
.mapfield_spots-contact-label {
  display: block;
  font-weight: 700;
  color: var(--mapfield_spots-text);
  margin-bottom: 4px;
}
body.plugin-mapfield-spots .wrap.mapfield_spots-wrap .mapfield_spots-contact-sublabel {
  display: block;
  font-weight: 700;
  font-size: 12px;
  font-style: italic;
  color: var(--mapfield_spots-text);
  margin-bottom: 4px;
}

/* Circled trash icon instead of a text link; aria-label/title still carry
   "Delete" for screen readers. */
/* Scoped under .mapfield_spots-wrap so specificity reliably outranks
   core's own `a:focus`/`a:active` rules. */
.mapfield_spots-wrap .mapfield_spots-delete-link {
  /* Chromium/WebKit's tap highlight ignores border-radius regardless of
     outline/box-shadow, causing a square flash on click. */
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box; /* border stays inside the 28×28 box */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  /* Never shrink below fixed size as a flex item. */
  flex-shrink: 0;
  border-radius: var(--mapfield_spots-radius-sm);
  background: var(--mapfield_spots-light);
  border: 1px solid var(--mapfield_spots-alert);
  color: var(--mapfield_spots-alert);
  outline: none;
  box-shadow: none;
  transition: var(--mapfield_spots-transition);
}
/* Icon size lives here since markup only carries viewBox. */
.mapfield_spots-wrap .mapfield_spots-delete-link svg {
  height: 16px;
  width: auto;
}
/* Re-assert round shape and cleared outline/box-shadow on every state. */
.mapfield_spots-wrap .mapfield_spots-delete-link:is(:hover, :focus, :active, :visited) {
  border-radius: var(--mapfield_spots-radius-sm);
  outline: none;
  box-shadow: none;
}
.mapfield_spots-wrap .mapfield_spots-delete-link:hover {
  border-color: var(--mapfield_spots-medium);
  background: var(--mapfield_spots-medium);
}

/* Icon after text on every "Settings"-labelled button. */
.mapfield_spots-btn-settings {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mapfield_spots-btn-settings svg {
  height: 15px;
  width: auto;
}

/* Same look as the front-end Spots list search, own class names since
   this filters map cards by name rather than Spots by full text. */
.mapfield_spots-maps-search {
  position: relative;
  max-width: 320px;
  margin-bottom: 16px;
}
.mapfield_spots-maps-search-icon {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  width: 13px;
  height: 13px;
  color: var(--mapfield_spots-text);
  pointer-events: none;
}
.mapfield_spots-maps-search-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}
/* Scoped for specificity: core's own input[type="search"] rule would
   otherwise beat a lone class here. */
.mapfield_spots-wrap .mapfield_spots-maps-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 28px 8px 30px;
  font-size: 14px;
  font-family: inherit;
  color: var(--mapfield_spots-text);
  background: #fff;
  border: 1px solid var(--mapfield_spots-medium);
  border-radius: var(--mapfield_spots-radius-sm);
  outline: none;
  transition: border-color var(--mapfield_spots-transition);
}
.mapfield_spots-maps-search-input:focus {
  border-color: var(--mapfield_spots-link);
}
.mapfield_spots-maps-search-input::-webkit-search-cancel-button {
  display: none;
}
.mapfield_spots-maps-search-clear {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: none;
  border-radius: 50%;
  color: var(--mapfield_spots-text);
  opacity: .45;
  cursor: pointer;
}
.mapfield_spots-maps-search-clear:not([hidden]) {
  display: flex;
}
.mapfield_spots-maps-search-clear:hover,
.mapfield_spots-maps-search-clear:focus-visible {
  opacity: 1;
  background: var(--mapfield_spots-medium);
}
.mapfield_spots-maps-search-empty {
  margin: -8px 0 16px;
  font-size: 13px;
  font-style: italic;
  opacity: .7;
  color: var(--mapfield_spots-text);
}

/* "Your maps" pagination. Prev/Next reuse the shared .button-secondary
   look; page-number buttons are unique, styled here from scratch. */
.mapfield_spots-maps-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 20px;
}
.mapfield_spots-maps-pagination__pages {
  display: flex;
  gap: 2px;
}
.mapfield_spots-maps-pagination__page {
  min-width: 32px;
  height: 32px;
  padding: 0 4px;
  border: none;
  background: transparent;
  border-radius: var(--mapfield_spots-radius-sm);
  font-size: 13px;
  color: var(--mapfield_spots-text);
  cursor: pointer;
  transition: var(--mapfield_spots-transition);
}
.mapfield_spots-maps-pagination__page:hover {
  background: var(--mapfield_spots-light);
}
.mapfield_spots-maps-pagination__page.is-current {
  background: var(--mapfield_spots-alert);
  color: var(--mapfield_spots-bg);
  font-weight: 600;
}

/* "Your maps" cards. */
.mapfield_spots-map-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.mapfield_spots-map-card {
  /* 3 even columns (2 under 1400px, 1 under 900px, see media queries
     below). flex-grow: 0 so a short last row doesn't stretch to fill it. */
  flex: 0 1 calc((100% - 40px) / 3);
  box-sizing: border-box;
  min-width: 0;
  background: var(--mapfield_spots-light);
  border: 1px solid var(--mapfield_spots-link);
  border-radius: var(--mapfield_spots-radius);
  box-shadow: 2px 4px 6px rgba(0, 0, 0, .1);
  overflow: hidden;
  padding: 14px;
}
/* Raised from 1100px: a 3-column card is too tight to fit every action
   button, so switch to 2 columns earlier. */
@media (max-width: 1400px) {
  .mapfield_spots-map-card {
    flex-basis: calc((100% - 20px) / 2);
  }
}
@media (max-width: 900px) {
  .mapfield_spots-map-card {
    flex-basis: 100%;
  }
}
.mapfield_spots-map-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 0 14px;
}
.mapfield_spots-map-card__header .mapfield_spots-map-name-link {
  font-size: 18px;
}
/* flex:1 so a long name wraps instead of squeezing the delete circle;
   min-width:0 is required for a flex item to shrink below its content's
   intrinsic width at all. */
.mapfield_spots-map-card__header strong {
  flex: 1 1 auto;
  min-width: 0;
}
/* Groups "Edit map" with the delete circle as one flex item. */
.mapfield_spots-map-card__header-actions {
  display: flex;
  align-items: start;
  gap: 10px;
  flex-shrink: 0;
}
body.plugin-mapfield-spots .mapfield_spots-map-card__header-actions .button.button-secondary {
  background: var(--mapfield_spots-light);
  height: 28px;
  min-height: 28px;
  line-height: 18px;
  padding: 0 7px;
  border-width: 1px;
}
body.plugin-mapfield-spots .mapfield_spots-map-card__header-actions .button.button-secondary:hover {
  background: var(--mapfield_spots-medium);
}
/* Live MapLibre preview: reuses style-picker.js's own --no-token/--error
   placeholder classes unchanged. */
.mapfield_spots-map-card__thumb {
  position: relative;
  aspect-ratio: 5 / 3;
  background: var(--mapfield_spots-light);
  overflow: hidden;
  border: 1px solid var(--mapfield_spots-medium);
}
/* Overlaid on the thumbnail rather than their own row; MapLibre appends
   its canvas without clearing the container, so this survives as a
   sibling with a z-index above the map's layers. */
.mapfield_spots-map-card__actions {
  position: absolute;
  left: 10px;
  /* Bounds the row to the thumb's width so flex-wrap has something to
     wrap against; up to 4 buttons can otherwise overflow the right edge. */
  right: 10px;
  bottom: 10px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
/* Same overlay treatment, pinned to the top-left corner instead. */
.mapfield_spots-map-card__preview-btn {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  background: var(--mapfield_spots-link);
  border: 3px solid var(--mapfield_spots-medium);
  border-left: none;
  border-top: none;
  border-bottom-right-radius: var(--mapfield_spots-radius);
  color: var(--mapfield_spots-light);
  padding: 6px 10px 7px;
  font-weight: bolder;
  cursor: pointer;
  transition: var(--mapfield_spots-transition);
}
.mapfield_spots-map-card__preview-btn:hover {
  background: var(--mapfield_spots-medium);
  color: var(--mapfield_spots-link);
}
.mapfield_spots-map-card__marker {
  /* Same 40×40 as the real front-end marker; previews the real size. */
  position: absolute;
  width: 40px;
  height: 40px;
  transform: translate(-50%, -100%);
  pointer-events: none;
}
.mapfield_spots-map-card__marker svg {
  display: block;
  width: 100%;
  height: 100%;
}
/* PRO custom marker image — same natural-width treatment as the real
   front-end marker's own .mapfield_spots-marker__inner img (frontend.css). */
.mapfield_spots-map-card__marker img {
  display: block;
  height: 100%;
}
.mapfield_spots-map-card__stats {
  display: flex;
  gap: 10px;
  padding: 14px 0 7px;
  font-size: 1.5rem;
  border-bottom: 1px solid var(--mapfield_spots-medium);
}
.mapfield_spots-map-card__stats > div {
  flex: 1;
}
/* Needs the same body/wrap prefix as the blanket <span> rule above to
   actually outrank it on specificity. */
body.plugin-mapfield-spots .wrap.mapfield_spots-wrap .mapfield_spots-map-card__stat-label {
  display: block;
  font-size: 11px;
  color: #98a2b3;
  margin-bottom: 6px;
}
.mapfield_spots-map-card__slug {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 9px 0 7px;
  border-bottom: 1px solid var(--mapfield_spots-medium);
}
.mapfield_spots-map-card__shortcode {
  padding: 6px 0 7px;
  border-bottom: 1px solid var(--mapfield_spots-medium);
}
.mapfield_spots-map-card__share-link {
  padding: 6px 0 0;
}
/* Same specificity fix as .mapfield_spots-map-card__stat-label above. */
body.plugin-mapfield-spots .wrap.mapfield_spots-wrap .mapfield_spots-map-card__code {
  font-size: 0.8rem;
}

/* Copy-shortcode button: smaller and more subdued than the delete icon,
   since this is a convenience action, not a destructive one. */
.mapfield_spots-shortcode-cell {
  display: flex;
  align-items: center;
  gap: 6px;
}
.mapfield_spots-wrap .mapfield_spots-copy-shortcode {
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 50%;
  background: var(--mapfield_spots-light);
  border: 1px solid var(--mapfield_spots-medium);
  color: var(--mapfield_spots-text);
  cursor: pointer;
  outline: none;
  box-shadow: none;
  transition: var(--mapfield_spots-transition);
}
.mapfield_spots-wrap .mapfield_spots-copy-shortcode:is(:hover, .is-copied) {
  border-color: var(--mapfield_spots-link);
  color: var(--mapfield_spots-link);
}

/* ── Submenu icons (injected via JS, see Map_Types_Admin) ─────────────── */
#adminmenu .mapfield_spots-submenu-icon {
  font-size: 16px;
  width: 16px;
  height: 16px;
  margin-right: 6px;
  vertical-align: middle;
  opacity: .8;
}

/* ── Buttons (always these classes, never custom button styling) ──────
   Scoped high enough to beat core's .wp-core-ui overrides without
   !important. Covers <input> too, so it also reaches the native
   Publish/Update submit button; that button looked broken once caught
   here since <input>'s value text isn't a real flex child — fixed below
   via an explicit line-height matching content-box height, same
   technique as core's own buttons.css. :where() (not :is()) around the
   container list so #mfs-zone-editor's ID doesn't bump the whole
   selector's specificity where it actually matched via a plain class. */
body.plugin-mapfield-spots :where(.mapfield_spots-wrap, .mapfield_spots-location-field, #mfs-zone-editor) :is(a, button, input).button-primary,
body.plugin-mapfield-spots :where(.mapfield_spots-wrap, .mapfield_spots-location-field, #mfs-zone-editor) :is(a, button, input).button-primary:is(:hover, :focus, :active, :visited) {
  border-radius: var(--mapfield_spots-radius-sm);
  background-color: var(--mapfield_spots-alert);
  border: 1px solid var(--mapfield_spots-alert);
  color: var(--mapfield_spots-bg);
  transition: border-color var(--mapfield_spots-transition), background var(--mapfield_spots-transition);
  /* height minus 1px+1px border: centres text for <input>, which flex
     align-items alone can't do. */
  line-height: 38px;
  height: 40px;
  padding: 0 10px;
  font-weight: 500;
  box-shadow: none;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
body.plugin-mapfield-spots :where(.mapfield_spots-wrap, .mapfield_spots-location-field, #mfs-zone-editor) :is(a, button, input).button-primary:hover {
  border-color: var(--mapfield_spots-light);
}
body.plugin-mapfield-spots :where(.mapfield_spots-wrap, .mapfield_spots-location-field, #mfs-zone-editor) :is(a, button, input).button-secondary,
body.plugin-mapfield-spots :where(.mapfield_spots-wrap, .mapfield_spots-location-field, #mfs-zone-editor) :is(a, button, input).button-secondary:is(:hover, :focus, :active, :visited) {
  border-radius: var(--mapfield_spots-radius-sm);
  background-color: var(--mapfield_spots-bg);
  border: 2px solid var(--mapfield_spots-alert);
  color: var(--mapfield_spots-alert);
  font-weight: bold;
  /* Same reasoning as button-primary above, thicker border so a lower value. */
  line-height: 36px;
  height: 40px;
  padding: 0 10px;
  box-shadow: none;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: background-color var(--mapfield_spots-transition), border-color var(--mapfield_spots-transition);
}
body.plugin-mapfield-spots :where(.mapfield_spots-wrap, .mapfield_spots-location-field, #mfs-zone-editor) :is(a, button, input).button-secondary:hover {
  background-color: var(--mapfield_spots-medium);
  border-color: var(--mapfield_spots-medium);
}
input#publish.button.button-primary.button-large {
  line-height: 1;
}

/* ── Drop WP core's own table.widefat border/shadow ────────────────────
   Scoping under .mapfield_spots-wrap outranks core's rule by
   specificity, no !important needed. */
.mapfield_spots-wrap table.widefat {
  border: none;
  box-shadow: none;
}
/* Same specificity win over core's own td/th padding rule. */
.mapfield_spots-wrap table.widefat td,
.mapfield_spots-wrap table.widefat th {
  padding: 14px 10px;
  vertical-align: middle;
}
.mapfield_spots-wrap .mapfield_spots-map-name-link,
.mapfield_spots-wrap .mapfield_spots-spots-count-link {
  transition: var(--mapfield_spots-transition);
}
.mapfield_spots-wrap .mapfield_spots-map-name-link,
.mapfield_spots-wrap .mapfield_spots-map-name-link:is(:focus, :active, :visited) {
  color: var(--mapfield_spots-link);
  font-size: 20px;
  font-weight: bolder;
  text-decoration: none;
  line-height: 1.3rem;
}
.mapfield_spots-wrap .mapfield_spots-spots-count-link,
.mapfield_spots-wrap .mapfield_spots-spots-count-link:is(:focus, :active, :visited) {
  color: var(--mapfield_spots-link);
  font-weight: bold;
  text-decoration: none;
}
.mapfield_spots-wrap .mapfield_spots-map-name-link:hover,
.mapfield_spots-wrap .mapfield_spots-spots-count-link:hover {
  color: var(--mapfield_spots-alert);
}

/* Stays as long as the card is empty, unlike .mapfield_spots-next-step
   which only shows once after creation. */
.mapfield_spots-map-card__empty-hint {
  display: block;
  font-size: 11px;
  color: var(--mapfield_spots-alert);
  text-decoration: none;
  margin-top: 2px;
}
.mapfield_spots-map-card__empty-hint:hover { text-decoration: underline; }

/* ── Page shell (single unified box: header + body) ────────────────────
   Shared by Settings, Your maps, and the Map Type form for one consistent
   container. */
.mapfield_spots-shell {
  max-width: 1400px;
  margin: var(--mapfield_spots-gap);
  /* Header/footer paint white on top so the box still reads as three
     zones. --mapfield_spots-light is too close to white, so this
     derives a stronger grey from the existing tokens instead. */
  background: color-mix(in srgb, var(--mapfield_spots-text) 6%, var(--mapfield_spots-bg));
  border: 1px solid var(--mapfield_spots-medium);
  border-radius: var(--mapfield_spots-radius);
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
  overflow: hidden;
}
.mapfield_spots-shell__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  padding: 18px var(--mapfield_spots-gap);
  background: var(--mapfield_spots-bg);
  border-bottom: 1px solid var(--mapfield_spots-medium);
}
.mapfield_spots-shell__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
/* This brand block is an <h1>; core's admin CSS puts 9px/4px padding on
   every .wrap h1, adding unwanted height. Needs this exact prefix to
   outrank it, same pattern as .wp-heading-inline below. */
body.plugin-mapfield-spots .wrap.mapfield_spots-wrap h1.mapfield_spots-shell__brand {
  padding: 0;
}
.mapfield_spots-shell__header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.mapfield_spots-shell__body {
  display: flex;
  flex-direction: column;
  gap: var(--mapfield_spots-gap);
  padding: var(--mapfield_spots-gap);
}
/* gap: 0 since only .mapfield_spots-tabs and the one visible section
   are ever both flex items at once (the rest are `hidden`), and the
   tabs sit flush against that section. */
#mapfield_spots-settings-form {
  display: flex;
  flex-direction: column;
  gap: 0;
}
/* Same reasoning as #mapfield_spots-settings-form above. */
#mapfield_spots-map-type-form {
  display: flex;
  flex-direction: column;
  gap: 0;
}
/* Left-hand child is always present, even empty, so justify-content
   keeps the Save button flush right either way. */
.mapfield_spots-shell__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: var(--mapfield_spots-gap);
  background: var(--mapfield_spots-bg);
  border-top: 1px solid var(--mapfield_spots-medium);
  /* Save button's own height — keeps the footer from shrinking when JS pulls
     it out of flow to float it (position: fixed leaves the empty left-hand
     div as the only flex child otherwise). */
  min-height: 40px;
}
.mapfield_spots-reset-form {
  display: inline-block;
}
/* line-height needs to be explicit here: with none inherited, this was
   instead inheriting the h1's own tighter 1.3 ratio, shrinking the gap
   above "Settings" below it. */
.mapfield_spots-title__plugin {
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.5rem;
  color: var(--mapfield_spots-text);
  opacity: .65;
}
/* .wp-heading-inline is core's own H1 on native list/edit screens;
   cosmetic-only match, no structural change. Needs the
   .wrap.mapfield_spots-wrap ancestor to out-specify the generic
   ".wrap.mapfield_spots-wrap h1" rule below, which also matches it. */
.mapfield_spots-title__page,
body.plugin-mapfield-spots .wrap.mapfield_spots-wrap .wp-heading-inline {
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--mapfield_spots-text);
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mapfield_spots-shell__brand .mapfield_spot_icon,
.mapfield_spots-shell__brand svg { width: 50px; flex-shrink: 0; }
/* stroke: none is deliberate, not a no-op: pin-needle.svg's own unscoped
   .st0 style declares a white stroke that otherwise leaks onto every
   .st0 element on the page, painting over these thin blue paths. */
.mapfield_spot_icon .svg_longlat {
  fill: var(--mapfield_spots-link);
  stroke: none;
}
.mapfield_spot_icon .svg_rond {
  fill: var(--mapfield_spots-light);
  stroke: none;
}
.mapfield_spot_icon .svg_defonce,
.mapfield_spot_icon .svg_spot {
  fill: var(--mapfield_spots-alert);
  stroke: none;
}
.mapfield_spot_icon .svg_globe {
  fill: var(--mapfield_spots-text);
  stroke: none;
  /* This self-intersecting ring path filled solid under the default
     nonzero rule (winding-direction dependent); evenodd guarantees the
     hollow hole regardless of winding. */
  fill-rule: evenodd;
}
/* No prior art for this shape (new in the hand-edited icon) — kept invisible
   rather than guessing a colour; ask before giving it one. */
.mapfield_spot_icon .svg_mapfield {
  fill: none;
  stroke: none;
}

a.mapfield_spots-buy {
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border: solid 1px var(--mapfield_spots-link);
  border-radius: var(--mapfield_spots-radius-sm);
  background: var(--mapfield_spots-link);
  color: var(--mapfield_spots-bg);
  text-decoration: none;
  font-size: 14px;
  font-weight: bold;
  transition: var(--mapfield_spots-transition);
  height: 40px;
}
a.mapfield_spots-buy:hover {
  border-color: var(--mapfield_spots-bg);
  color: var(--mapfield_spots-medium);
}

/* ── Unsaved-changes pulse on the Save button ─────────────────────────── */
.mapfield_spots-save-btn--pulse {
  animation: mapfield_spots-save-pulse 1.3s ease-in-out infinite;
}
@keyframes mapfield_spots-save-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mapfield_spots-alert) 75%, transparent); }
  50%      { box-shadow: 0 0 0 8px color-mix(in srgb, var(--mapfield_spots-alert) 20%, transparent); }
}
/* Pinned to the viewport corner — only added by JS (admin.js) once the
   button's normal spot in .mapfield_spots-shell__footer has scrolled
   out of view while the form is dirty. `position` itself can't be
   transitioned, so the slide/fade runs on transform+opacity instead.
   Needs the #mapfield_spots-save-btn ID to out-specify the shared
   Buttons rule elsewhere in this file, which sets its own `transition:
   border-color, background` on this same element — without it that rule
   wins and transform/opacity never animate, so the button would jump
   instead of sliding. */
#mapfield_spots-save-btn.mapfield_spots-save-btn--floating {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 99999;
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
  transform: translateY(0);
  opacity: 1;
  transition: transform .35s ease, opacity .35s ease;
}
#mapfield_spots-save-btn.mapfield_spots-save-btn--floating.mapfield_spots-save-btn--floating-hidden {
  transform: translateY(24px);
  opacity: 0;
  pointer-events: none;
}

/* ── First-activation onboarding: highlight the token field ───────────────
   A handful of pulses (not infinite, unlike the Save button above) is
   enough to draw the eye right after landing here — see
   Settings::maybe_redirect_after_activation(). */
.mapfield_spots-token-field--highlight {
  animation: mapfield_spots-save-pulse 1.2s ease-in-out 3;
}

/* ── Toast notifications (Settings / Map Type saves) ───────────────────
   Small, auto-dismissing corner notice instead of WordPress' full-width
   admin notice banner. Dismissal (manual + automatic) wired in admin.js. */
.mapfield_spots-toast {
  position: fixed;
  top: 52px;
  right: 20px;
  z-index: 99999;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--mapfield_spots-radius);
  font-size: 13px;
  min-width: 240px;
  max-width: 400px;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  animation: mapfield_spots-toast-in .2s ease;
}
.mapfield_spots-toast p { margin: 0; flex: 1; }
.mapfield_spots-toast--success { background: #ecf7ed; border: 1px solid #46b450; color: #1e4620; }
.mapfield_spots-toast--warning { background: #fff8e1; border: 1px solid #f0a500; color: #7a5000; }
.mapfield_spots-toast--error   { background: #fce8e6; border: 1px solid var(--mapfield_spots-alert); color: var(--mapfield_spots-alert); }
.mapfield_spots-toast__close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  color: inherit;
  opacity: .6;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
}
.mapfield_spots-toast__close:hover { opacity: 1; }
@keyframes mapfield_spots-toast-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* "Add your first Spot" banner: inline and persistent, unlike the toast
   above, since it carries an actual next step to click. Blue accent since
   this is good news, not a warning. */
.mapfield_spots-next-step {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  box-sizing: border-box;
  max-width: 800px;
  background: var(--mapfield_spots-light);
  border: 1px solid var(--mapfield_spots-medium);
  border-left: 4px solid var(--mapfield_spots-link);
  border-radius: var(--mapfield_spots-radius);
  color: var(--mapfield_spots-text);
  padding: 14px 18px;
  /* Same margin as .mapfield_spots-shell below, so it reads as part of
     the same page. */
  margin: var(--mapfield_spots-gap) var(--mapfield_spots-gap) 0;
}
.mapfield_spots-next-step p { margin: 2px 0 0; }
.mapfield_spots-next-step__actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* "This map is inactive" banner: same persistent reasoning as
   .mapfield_spots-next-step, alert-red since this is a warning. */
.mapfield_spots-inactive-notice {
  box-sizing: border-box;
  max-width: 800px;
  background: var(--mapfield_spots-light);
  border: 1px solid var(--mapfield_spots-medium);
  border-left: 4px solid var(--mapfield_spots-alert);
  border-radius: var(--mapfield_spots-radius);
  color: var(--mapfield_spots-text);
  padding: 14px 18px;
  margin: var(--mapfield_spots-gap) var(--mapfield_spots-gap) 0 0;
}
.mapfield_spots-inactive-notice p { margin: 0; }
.mapfield_spots-acf-orphan { margin-top: 6px; }
.mapfield_spots-dismiss-link {
  display: block;
  width: fit-content;
  margin-top: 12px;
  padding: 3px 10px;
  border: 1px solid var(--mapfield_spots-medium);
  border-radius: var(--mapfield_spots-radius);
  font-size: 12px;
  text-decoration: none;
  transition: border-color var(--mapfield_spots-transition);
}
.mapfield_spots-dismiss-link:hover { border-color: var(--mapfield_spots-link); }

/* ── Map preview modal ("Your maps" cards' "Preview" button) ───────────
   One shared instance for the whole page; iframe src swapped per card by
   map-preview-modal.js. */
.mapfield_spots-preview-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--mapfield_spots-transition) ease, visibility 0s linear var(--mapfield_spots-transition);
}
.mapfield_spots-preview-modal--open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--mapfield_spots-transition) ease, visibility 0s linear;
}
.mapfield_spots-preview-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .55);
}
.mapfield_spots-preview-dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(.96);
  width: min(96vw, 1000px);
  height: min(90vh, 800px);
  background: var(--mapfield_spots-bg);
  border-radius: var(--mapfield_spots-radius);
  box-shadow: 0 12px 48px rgba(0, 0, 0, .28);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transition: transform var(--mapfield_spots-transition) ease, opacity var(--mapfield_spots-transition) ease;
}
.mapfield_spots-preview-modal--open .mapfield_spots-preview-dialog {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}
.mapfield_spots-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--mapfield_spots-medium);
  flex-shrink: 0;
}
/* Ancestor-qualified to outrank the :is(button, …) font-size reset above,
   regardless of source order (both target <button>). */
body.plugin-mapfield-spots .wrap.mapfield_spots-wrap .mapfield_spots-preview-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  color: var(--mapfield_spots-text);
  opacity: .6;
  padding: 0;
}
.mapfield_spots-preview-close:hover { opacity: 1; }
.mapfield_spots-preview-body {
  position: relative;
  flex: 1 1 auto;
}
.mapfield_spots-preview-body iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* Hidden until 'load' fires (map-preview-modal.js), or the outgoing
   document's last frame stays visible until the new one paints. */
.mapfield_spots-preview-body iframe.is-loading {
  visibility: hidden;
}

/* ── Edit map tabs: segmented-control pill bar (see tabs.js). align-self
   keeps it sized to its content instead of stretched full-width. */
.mapfield_spots-tabs {
  display: flex;
  flex-wrap: wrap;
  align-self: flex-start;
  gap: 2px;
  background: var(--mapfield_spots-light);
  border: 1px solid var(--mapfield_spots-medium);
  border-bottom: none;
  border-radius: var(--mapfield_spots-radius);
  padding: 5px;
}
.mapfield_spots-tabs__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  background: none;
  border: none;
  border-radius: var(--mapfield_spots-radius-sm);
  color: var(--mapfield_spots-text);
  font-size: 14px;
  font-weight: 600;
  /* <button> gets UA-default line-height, <a> inherits body's 24px,
     making Import/Export's <a> tabs taller than Edit map's <button>
     ones; pinned to the icon's 18px so both size identically. */
  line-height: 18px;
  white-space: nowrap;
  cursor: pointer;
  /* No-op on <button> tabs; load-bearing for Import/Export's <a> tabs. */
  text-decoration: none;
  transition: background var(--mapfield_spots-transition), box-shadow var(--mapfield_spots-transition);
}
.mapfield_spots-tabs__item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  fill: currentColor;
}
/* Same leak as .mapfield_spot_icon .st0 below: the marker SVGs' unscoped
   `.st0 { fill }` beats `fill: currentColor` above since it targets the
   path directly; re-declared here to keep following .is-active's colour. */
.mapfield_spots-tabs__item svg .st0 {
  fill: currentColor;
}
/* Divider between adjacent *inactive* tabs only; the active pill already
   reads as detached. :not(.is-row-start) since flex-wrap can drop a tab
   onto a new line, which a "previous sibling" selector can't detect on
   its own — .is-row-start is kept in sync by tabs.js. */
.mapfield_spots-tabs__item:not(.is-active) + .mapfield_spots-tabs__item:not(.is-active):not(.is-row-start)::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 22%;
  bottom: 22%;
  width: 1px;
  background: var(--mapfield_spots-medium);
}
/* color is redundant on <button> tabs but load-bearing on Import/
   Export's <a> tabs, which would otherwise fall back to the default
   link colour. */
.mapfield_spots-tabs__item:hover:not(.is-active) {
  background: color-mix(in srgb, var(--mapfield_spots-text) 6%, transparent);
  color: var(--mapfield_spots-text);
}
.mapfield_spots-tabs__item.is-active {
  background: var(--mapfield_spots-bg);
  box-shadow: 0 1px 4px rgba(0,0,0,.12);
  color: var(--mapfield_spots-link);
}

/* ── Sections: always direct content of .mapfield_spots-shell__body,
   so no margin/max-width of their own since the shell provides both. */
.mapfield_spots-section {
  background: var(--mapfield_spots-bg);
  border-radius: var(--mapfield_spots-radius);
  padding: var(--mapfield_spots-gap);
  border: 1px solid var(--mapfield_spots-medium);
}
.mapfield_spots-section h2 {
  font-size: 24px;
  line-height: 1.7rem;
  font-weight: initial;
  color: var(--mapfield_spots-text);
}
.mapfield_spots-section-title {
  border-bottom: 1px solid var(--mapfield_spots-medium);
  padding-bottom: 6px;
  margin-top: 0;
  margin-bottom: var(--mapfield_spots-gap);
}
/* Spacing only, detached from the fields above. Scoped for specificity:
   the shared .button-secondary rule's own margin shorthand would
   otherwise win over a lone class here. */
body.plugin-mapfield-spots .wrap.mapfield_spots-wrap .mapfield_spots-section-bottom-link {
  margin-top: 30px;
}
/* Replaces core's .form-table two-column layout: its fixed label column
   didn't survive the theme fields' third column. Single stacked blocks
   instead, no left column. */
.mapfield_spots-field {
  margin-bottom: 25px;
}
.mapfield_spots-field:last-child {
  margin-bottom: 0;
}
body.plugin-mapfield-spots .wrap.mapfield_spots-wrap .mapfield_spots-field__label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--mapfield_spots-text);
}
.mapfield_spots-howto-list {
  margin: 0;
  padding-left: 20px;
  line-height: 1.4rem;
}
.mapfield_spots-howto-list strong {
  font-size: 1.1rem;
  font-weight: bolder;
}
.mapfield_spots-howto-list li {
  margin-bottom: 8px;
}
.mapfield_spots-howto-list li:last-child {
  margin-bottom: 0;
}
/* Block/Shortcode/Theme template as three bordered cards instead of a
   plain bullet list; not interactive, nothing here is a choice to make. */
.mapfield_spots-howto-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 14px;
}
.mapfield_spots-howto-card {
  flex: 1 1 220px;
  /* Without this, the shortcode's long unbreakable line forces the card
     wider instead of scrolling inside its own <pre>. */
  min-width: 0;
  border: 2px solid var(--mapfield_spots-medium);
  border-radius: var(--mapfield_spots-radius);
  padding: 14px;
}
/* Direct child combinator: only the card's own title, not the param
   list's per-setting <strong>s, which would read too heavy inline. */
.mapfield_spots-howto-card > strong {
  display: block;
  font-size: 1.1rem;
  font-weight: bolder;
  margin-bottom: 6px;
  color: var(--mapfield_spots-text);
}
.mapfield_spots-howto-card p {
  margin: 0 0 8px;
  line-height: 1.4rem;
}
.mapfield_spots-howto-card p:last-child {
  margin-bottom: 0;
}
/* Static stand-in for the real Gutenberg block's Placeholder appearance,
   so a reader recognises it when they actually add the block. */
.mapfield_spots-howto-block-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: fit-content;
  margin-bottom: 10px;
  padding: 16px 10px;
  border: 1px dashed var(--mapfield_spots-text);
  border-radius: var(--mapfield_spots-radius-sm);
  text-align: center;
}
.mapfield_spots-howto-card .mapfield_spots-howto-block-preview .mapfield_spots-howto-block-icon {
  width: 32px;
  height: 32px;
  color: #000;
}
/* The pin's small circle is a cutout punched through its solid fill —
   in block.js (always rendered on the editor's own white canvas) that
   can just be a hardcoded #fff, but this preview sits inside an admin
   screen that has its own light/dark mode (PRO), and in dark mode the
   pin's fill (currentColor, driven by the rule above + PRO's own
   dark-mode.css override) turns white too — a hardcoded white circle
   would then blend invisibly into a white pin. Tracking the box's own
   actual background colour instead keeps the cutout visible in both
   modes. */
.mapfield_spots-howto-block-icon circle {
  fill: var(--mapfield_spots-bg);
}
.mapfield_spots-howto-block-preview strong {
  font-size: 13px;
}
.mapfield_spots-howto-card__params {
  margin: 0;
  padding-left: 18px;
  font-size: 12.5px;
  line-height: 1.5;
}
.mapfield_spots-howto-card__params li {
  margin-bottom: 4px;
}
.mapfield_spots-howto-card__params li:last-child {
  margin-bottom: 0;
}
/* Multi-line <pre> since the theme template example needs whitespace
   preserved; overflow-x auto so a long line scrolls in its own box
   instead of pushing the card layout around. */
.mapfield_spots-howto-card pre {
  background: var(--mapfield_spots-light);
  border-radius: var(--mapfield_spots-radius-sm);
  padding: 10px;
  margin: 8px 0 0;
  overflow-x: auto;
  font-size: 12px;
  line-height: 1.5;
}
.mapfield_spots-howto-card pre code {
  background: none;
  padding: 0;
}

/* ── Colour picker ──────────────────────────────────────────────────── */
.mapfield_spots-color-picker-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  /* Without this, a narrow row squeezes the wrap narrower than the
     swatch's own size, flattening the circle into an oval. */
  flex-shrink: 0;
}
.mapfield_spots-color-swatch {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px var(--mapfield_spots-medium);
  cursor: pointer;
  flex-shrink: 0;
  transition: box-shadow .15s;
}
.mapfield_spots-color-popover {
  display: none;
  position: absolute;
  top: 38px;
  left: 0;
  background: var(--mapfield_spots-bg);
  border: 1px solid #ddd;
  border-radius: var(--mapfield_spots-radius);
  padding: 14px;
  box-shadow: 0 6px 24px rgba(0,0,0,.18);
  z-index: 9999;
  width: 200px;
  user-select: none;
}
.mapfield_spots-color-popover.is-open { display: block; }
.mapfield_spots-color-canvas-grad {
  width: 100%;
  height: 130px;
  border-radius: var(--mapfield_spots-radius);
  cursor: crosshair;
  display: block;
}
.mapfield_spots-color-cursor {
  position: absolute;
  width: 12px;
  height: 12px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0,0,0,.4);
  pointer-events: none;
  transform: translate(-50%,-50%);
}
.mapfield_spots-color-grad-wrap { position: relative; margin-bottom: 10px; }
/* Opt-in "quick pick" row: only present when a picker was given
   data-swatches (color-picker.js). */
.mapfield_spots-color-swatches__label {
  font-size: 10px;
  text-transform: uppercase;
  opacity: .6;
  margin: 0 0 4px;
  text-align: left;
}
.mapfield_spots-color-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.mapfield_spots-color-swatches__option {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--mapfield_spots-medium);
  cursor: pointer;
  padding: 0;
  transition: box-shadow .15s;
}
.mapfield_spots-color-swatches__option:hover,
.mapfield_spots-color-swatches__option:focus {
  box-shadow: 0 0 0 2px var(--mapfield_spots-alert);
  outline: none;
}
.mapfield_spots-color-hue {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 14px;
  border-radius: var(--mapfield_spots-radius);
  outline: none;
  background: linear-gradient(to right, #f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);
  cursor: pointer;
  margin-bottom: 10px;
  display: block;
  border: 1px solid #ddd;
}
.mapfield_spots-color-hue::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #999;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.mapfield_spots-color-hue::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #999;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.mapfield_spots-color-hex-row {
  display: flex;
  align-items: center;
  gap: 6px;
  border-top: 1px solid #eee;
  padding-top: 10px;
}
.mapfield_spots-color-hex-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--mapfield_spots-text);
  font-family: monospace;
}
.mapfield_spots-color-hex-input {
  flex: 1;
  font-size: 13px;
  font-family: monospace;
  border: 1px solid #ddd;
  border-radius: var(--mapfield_spots-radius);
  padding: 5px 8px;
  text-transform: uppercase;
}
.mapfield_spots-color-hex-input:focus {
  outline: none;
  border-color: var(--mapfield_spots-alert);
}

/* ── Marker picker (Map Type form) ────────────────────────────────────── */
.mapfield_spots-marker-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 10px;
}
.mapfield_spots-marker-picker__option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 84px;
  padding: 10px 6px;
  border: 2px solid var(--mapfield_spots-medium);
  border-radius: var(--mapfield_spots-radius);
  cursor: pointer;
  text-align: center;
}
.mapfield_spots-marker-picker__option:has(input:checked) {
  border-color: var(--mapfield_spots-alert);
  background: var(--mapfield_spots-light);
}
.mapfield_spots-marker-picker__option input { margin: 0 0 2px; }
.mapfield_spots-marker-picker__preview { height: 32px; }
.mapfield_spots-marker-picker__preview svg { width: 100%; height: 100%; display: block; }
.mapfield_spots-marker-picker__preview img { height: 100%; display: block; }
.mapfield_spots-marker-picker__preview .dashicons { width: 100%; height: 100%; color: var(--mapfield_spots-medium); }
/* The glyph is drawn by dashicons.css's :before pseudo-element, which
   sets its own font-size; sizing the parent element alone doesn't reach it. */
.mapfield_spots-marker-picker__preview .dashicons::before { font-size: 30px; }
.mapfield_spots-marker-picker__label { font-size: 11px; color: var(--mapfield_spots-text); }

/* Marker size: 3-way radio choice, same highlighted-on-check language as
   the marker picker above, without the icon preview. */
.mapfield_spots-marker-size-picker {
  display: flex;
  /* Without this, a narrow screen has nowhere for "Large" to go but off
     the edge of its container. */
  flex-wrap: wrap;
  gap: 10px;
}
.mapfield_spots-marker-size-option {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  margin-right: 16px;
  font-size: 13px;
  color: var(--mapfield_spots-text);
  cursor: pointer;
}
.mapfield_spots-marker-size-option:has(input:checked) {
  border-color: var(--mapfield_spots-alert);
}
.mapfield_spots-marker-size-option input { margin: 0; }
/* ── Edit/Add map form: our own radius instead of core's default. */
.mapfield_spots-wrap .mapfield_spots-section input[type="text"],
.mapfield_spots-wrap .mapfield_spots-section input[type="number"] {
  border-radius: var(--mapfield_spots-radius);
}
/* Descriptions come before the field they describe, so they need their
   own spacing below rather than relying on the field's margin above. */
.mapfield_spots-wrap .mapfield_spots-section p.description {
  font-style: italic;
  margin-bottom: 8px;
}
.mapfield_spots-wrap .mapfield_spots-section p.mapfield_spots-acf-fields__unsupported.description {
  margin-top: 10px;
}

/* ── Enabled fields (Map Type form) ────────────────────────────────────── */
.mapfield_spots-enabled-fields-row {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin-top: 10px;
  /* Once the three columns stack at ≤1160px, the last line here had
     nothing separating it from the next field. */
  margin-bottom: 20px;
}
/* Stacks the checklist, Rating settings, and ACF fields block as one flex
   item in a single column, slightly wider (350px) than the grids
   themselves for the Rating symbol radios' variable-width content. */
.mapfield_spots-enabled-fields-col {
  max-width: 350px;
}
.mapfield_spots-enabled-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
/* Directly under its own "Rating" checkbox, so checking it reveals
   settings right where you clicked. Capped at 350px so the symbol-radio
   row doesn't stretch loose across the full 3-column layout. */
.mapfield_spots-rating-settings {
  max-width: 350px;
  margin-top: 16px;
}
/* Visually separate from the native checklist (own border/heading), so
   third-party ACF fields aren't mistaken for this plugin's built-ins. */
.mapfield_spots-acf-fields {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--mapfield_spots-medium);
}
.mapfield_spots-acf-fields__heading-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 10px;
}
.mapfield_spots-acf-fields__heading {
  margin: 0;
  font-weight: 600;
  color: var(--mapfield_spots-text);
}
/* Needs its own top spacing since it always follows something else here,
   unlike every other .description which leads. */
.mapfield_spots-acf-fields__unsupported {
  margin-top: 10px;
}
/* Kept together on their own row even once the checklist column stacks
   away at ≤1280px: room for these two side by side, not all three. */
.mapfield_spots-preview-theme-row {
  display: flex;
  align-items: flex-start;
}
/* Frame is this plugin's own; .mapfield_spots-map-list__item inside is
   styled by frontend.css so the preview matches the real front end. */
.mapfield_spots-field-preview-wrap {
  flex: 0 0 300px;
  margin-left: 50px;
}
/* Same specificity fix as .mapfield_spots-map-card__stat-label above,
   against the blanket <p> rule. */
body.plugin-mapfield-spots .wrap.mapfield_spots-wrap .mapfield_spots-field-preview-caption {
  margin: 0 0 6px;
  font-size: 12px;
  font-style: italic;
  color: var(--mapfield_spots-text);
  opacity: .7;
}
/* Checklist and preview sit side by side, spaced by justify-content so
   the gap grows/shrinks with the section's width. flex-wrap drops the
   preview below the checklist once they no longer both fit. */
.mapfield_spots-toolbar-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
}
/* Without this, a flex item with no explicit width sizes to max-content;
   a long description would force the preview onto its own row early. */
.mapfield_spots-toolbar-checklist {
  flex: 1 1 260px;
  min-width: 260px;
}
/* "Initial zoom" — checkbox matches its siblings above (.mapfield_spots-enabled-fields__item);
   the fields below it drive/read the preview map next door (toolbar-preview.js). */
.mapfield_spots-initial-view {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--mapfield_spots-medium);
}
.mapfield_spots-initial-view__fields {
  margin-top: 10px;
}
.mapfield_spots-initial-view__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  margin-top: 8px;
}
.mapfield_spots-initial-view__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--mapfield_spots-text);
}
.mapfield_spots-initial-view__field input {
  width: 120px;
}
.mapfield_spots-initial-view__field input[readonly] {
  background: var(--mapfield_spots-light);
  color: var(--mapfield_spots-text);
  opacity: .7;
}
.mapfield_spots-toolbar-preview-wrap {
  width: 400px;
  max-width: 100%;
}
/* Real MapLibre map (toolbar-preview.js), positioned like the real
   front-end canvas. .maplibregl-ctrl-top-left is reused as-is rather
   than reimplementing its stacking. */
.mapfield_spots-toolbar-preview {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--mapfield_spots-medium);
  border-radius: var(--mapfield_spots-radius);
}
/* Display-only demo: buttons stay decorative. Scoped to descendant
   buttons rather than the whole preview, so the map can still be dragged. */
.mapfield_spots-toolbar-preview .maplibregl-ctrl-top-left button,
.mapfield_spots-toolbar-preview .mapfield_spots-toolbar-preview__circuit button {
  pointer-events: none;
  cursor: default;
}
/* .mapfield_spots-map-legend's own `display: flex` (reused as-is for real-size
   parity) ties with the [hidden] UA rule on specificity and loads after it, so
   it wins the cascade — toggling "Category legend" off did nothing without this. */
.mapfield_spots-toolbar-preview__legend[hidden] {
  display: none;
}
/* Circuit (PRO) is a plain sibling of the map canvas, not a MapLibre
   IControl; positioned beside Navigation to match its real counterpart's
   position, since routing.css isn't loaded on this free-plugin screen. */
.mapfield_spots-toolbar-preview__circuit {
  position: absolute;
  top: 0;
  left: 39px;
  margin: 10px 0 0 10px;
}
/* Pill shape copied verbatim from the real button: fixed height, auto
   width. Extra ancestor needed to outrank maplibre-gl.css's own
   `.maplibregl-ctrl-group button{width:29px}`, which loads after this file. */
.mapfield_spots-toolbar-preview .mapfield_spots-toolbar-preview__circuit button {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  background: #fff;
  border: none;
  width: auto;
  height: 29px;
  padding: 0 9px;
}
.mapfield_spots-toolbar-preview__circuit button svg {
  height: 21px;
  width: auto;
}
/* Zones tab reuses .mapfield_spots-toolbar-row/-checklist and the
   Style tab's own preview box as-is; no extra rules needed here. */
.mapfield_spots-field-preview {
  /* Doubles as the "list panel" surface for the List background field;
     the 14px padding here is what shows it. */
  background: var(--mapfield_spots-list-bg);
  border: 1px solid var(--mapfield_spots-medium);
  border-radius: var(--mapfield_spots-radius);
  padding: 14px;
}
/* Same blanket-14px-on-every-span fix as above, to match the real
   front-end pill size. */
body.plugin-mapfield-spots .wrap.mapfield_spots-wrap .mapfield_spots-field-preview .mapfield_spots-map-list__category {
  font-size: 11px;
}
/* Same fix, for the Map toolbar tab's own legend preview. */
body.plugin-mapfield-spots .wrap.mapfield_spots-wrap .mapfield_spots-toolbar-preview .mapfield_spots-map-list__category {
  font-size: 11px;
}
/* Same fix, for the two ACF preview elements. */
body.plugin-mapfield-spots .wrap.mapfield_spots-wrap .mapfield_spots-field-preview .mapfield_spots-map-list__acf-field-label {
  font-size: 11px;
}
body.plugin-mapfield-spots .wrap.mapfield_spots-wrap .mapfield_spots-field-preview .mapfield_spots-map-list__acf-tag {
  font-size: 12px;
}
.mapfield_spots-field-preview .mapfield_spots-map-list__item {
  border: none;
  cursor: default;
  border: 1px solid var(--mapfield_spots-medium);
  border-radius: var(--mapfield_spots-radius);
  padding: 14px;
}
/* cursor:default on the card above inherits onto every inert link
   inside; without this they'd show a plain arrow, reading as unclickable.
   Social/Directions/CTA are <span>s here, so listed explicitly. */
.mapfield_spots-field-preview .mapfield_spots-map-list__item a,
.mapfield_spots-field-preview .mapfield_spots-map-list__social-link,
.mapfield_spots-field-preview .mapfield_spots-map-list__directions,
.mapfield_spots-field-preview .mapfield_spots-map-list__cta {
  cursor: pointer;
}
/* Inherited hover state is kept (not cancelled) since it's the only way
   to preview the Link colour theme field when nothing else reads it. */
/* Fixed neutral grey, not a theme token: a stand-in for "a real photo
   would be here", so it shouldn't shift with the Border colour field. */
.mapfield_spots-field-preview__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eee;
  color: #646970;
}
.mapfield_spots-field-preview__placeholder .dashicons { font-size: 20px; }
/* frontend.css's unconditional `display` outranks the bare [hidden]
   default regardless of load order; !important is the only reliable way
   to win against any given field's own class without hand-matching each. */
.mapfield_spots-field-preview [hidden] {
  display: none !important;
}
/* Phone/Website share one wrapper, unlike other fields; collapse it away
   rather than leave an empty padded box once both are unchecked. */
.mapfield_spots-map-list__contact:not(:has(a:not([hidden]))) {
  display: none;
}
.mapfield_spots-enabled-fields__item input {
  width: 25px;
  height: 25px;
}
.mapfield_spots-enabled-fields__item input[type="checkbox"]:checked {
  background: var(--mapfield_spots-link);
}
.mapfield_spots-enabled-fields__item input[type="checkbox"]:checked::before {
  width: 29px;
}
/* Theme fields: third column, right of the preview card. Fixed width
   rather than flex:1, since a handful of short fields have no use for
   extra space and this keeps wrapping predictable. */
.mapfield_spots-theme-fields {
  flex: 0 0 220px;
  margin-left: 30px;
}
body.plugin-mapfield-spots .wrap.mapfield_spots-wrap .mapfield_spots-theme-fields__caption {
  margin: 0 0 12px;
  font-size: 12px;
  font-style: italic;
  color: var(--mapfield_spots-text);
  opacity: .7;
}
.mapfield_spots-theme-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
body.plugin-mapfield-spots .wrap.mapfield_spots-wrap .mapfield_spots-theme-field__label {
  font-size: 13px;
  color: var(--mapfield_spots-text);
}
.mapfield_spots-theme-field__radius-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}
.mapfield_spots-theme-field__radius-wrap input[type="number"] {
  width: 60px;
}
body.plugin-mapfield-spots .wrap.mapfield_spots-wrap .mapfield_spots-theme-field__unit {
  font-size: 13px;
  color: var(--mapfield_spots-text);
  opacity: .7;
}
/* Small outline button (red border/text, turns link-blue on hover) —
   one shared class for every small text-only "pick/reset" trigger:
   "Reset to default design" (theme fields), "Choose image" (custom
   marker/rating picker), "Choose file" (PRO's Import/Export upload).
   Each element keeps its own semantic class too (JS hooks, one-off
   margin), but the look itself lives here alone.
   :is(.button, .button-link) is there for specificity, not matching —
   every real consumer already carries one of those two WP-core classes
   in its markup (a plain button vs a button-styled link), and without
   it here this drops back to class+class (0,1,0), too low to beat the
   active admin colour scheme's own .button override (0,2,0) the way
   the two originally-separate rules this replaced always did. */
.mapfield_spots-btn-outline-sm:is(.button, .button-link),
.mapfield_spots-btn-outline-sm:is(.button, .button-link):is(:focus, :active, :visited) {
  display: inline-flex;
  align-items: center;
  background: transparent;
  font-size: 12px;
  padding: 2px 5px;
  text-decoration: none;
  border: 1px solid var(--mapfield_spots-alert);
  color: var(--mapfield_spots-alert);
  border-radius: 4px;
  min-height: 30px;
  line-height: 0;
  transition: var(--mapfield_spots-transition);
  /* buttons.css's .wp-core-ui .button-link:focus sets its own blue
     box-shadow (plus a Windows-High-Contrast-only outline) at the same
     specificity as this selector — a property this rule didn't
     previously redeclare at all, so it kept winning regardless of
     source order. Cleared here, replaced by a same-colour :focus-visible
     ring below so keyboard focus stays visible. */
  box-shadow: none;
  outline: none;
}
.mapfield_spots-btn-outline-sm:is(.button, .button-link):hover {
  border-color: var(--mapfield_spots-link);
  color: var(--mapfield_spots-link);
}
.mapfield_spots-btn-outline-sm:is(.button, .button-link):focus-visible {
  box-shadow: 0 0 0 1.5px var(--mapfield_spots-alert);
}
/* .button-link (not just the plain class alone) to match buttons.css's
   own .wp-core-ui .button-link { margin: 0 } at the same class+class
   specificity — a bare single-class selector here loses that tie-break
   outright regardless of source order, so margin-top would silently
   never apply. */
.button-link.mapfield_spots-theme-fields__reset { margin-top: 8px; }
/* Below ~1280px there's no longer room for the checklist, the preview
   card, and the theme fields side by side without squeezing the
   checklist itself — its column keeps shrinking to make way for the
   other two columns' own fixed widths, to the point where labels like
   "Call-to-action button" wrap mid-word. Stack just the checklist
   instead (the preview card + theme fields stay paired side by side —
   see .mapfield_spots-preview-theme-row above — there's still room
   for those two on their own), and let the checklist flow its items
   horizontally (rather than one per row) so it doesn't need nearly as
   much vertical space once it's alone on its own line. */
@media (max-width: 1280px) {
  .mapfield_spots-enabled-fields-row {
    flex-direction: column;
  }
  .mapfield_spots-enabled-fields-col {
    max-width: none;
    width: 100%;
  }
  /* Scoped to .mapfield_spots-enabled-fields-col specifically (the
     "Spot contents" tab's own 3-column wrapper, stacked above) rather
     than the bare .mapfield_spots-enabled-fields class alone — that
     class is reused as-is by the "Map toolbar" tab's own checklist,
     which never had a 3-column squeeze to fix here and shouldn't
     re-flow into a flowing/wrapped grid crossing this same breakpoint. */
  .mapfield_spots-enabled-fields-col .mapfield_spots-enabled-fields {
    display: flex;
    flex-wrap: wrap;
    max-width: none;
  }
  /* That 50px left margin exists to space the preview card away from
     the checklist column beside it — once the checklist has stacked
     away above it instead, the pair sits alone on its own line and the
     margin just pushes it off-centre for no reason. */
  .mapfield_spots-field-preview-wrap {
    margin-left: 0;
  }
}
/* Below ~700px even the preview card + theme fields pair no longer
   fits side by side (300px + 220px + their own margins) — stack those
   two as well at this point, matching the checklist's own full-width
   treatment above. */
@media (max-width: 700px) {
  .mapfield_spots-preview-theme-row {
    flex-direction: column;
  }
  .mapfield_spots-field-preview-wrap {
    flex: 0 0 auto;
    width: 100%;
    max-width: 300px;
    margin-left: 0;
    margin-bottom: 20px;
  }
  .mapfield_spots-theme-fields {
    flex: 0 0 auto;
    width: 100%;
    max-width: 300px;
    margin-left: 0;
  }
}

/* ── Repeater: categories ─────────────────────────────────────────────── */
.mapfield_spots-cat-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
/* min-width:0 lets this actually shrink below its own 260px on a narrow
   admin viewport instead of forcing the row wider than available space —
   the swatch and remove button beside it (both flex-shrink:0) hold their
   own size regardless either way. */
.mapfield_spots-cat-row input[type="text"] { width: 260px; min-width: 0; }
.mapfield_spots-wrap .mapfield_spots-cat-row__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0; /* a tight row otherwise squeezed this circle into an oval instead of just shrinking the text input beside it */
  border-radius: 50%;
  border: none;
  background: var(--mapfield_spots-medium);
  color: var(--mapfield_spots-link);
  font-size: 16px;
  font-weight: bold;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  box-shadow: none;
  transition: background var(--mapfield_spots-transition), color var(--mapfield_spots-transition);
}
.mapfield_spots-wrap .mapfield_spots-cat-row__remove:hover,
.mapfield_spots-wrap .mapfield_spots-cat-row__remove:focus {
  background: var(--mapfield_spots-link);
  color: #fff;
  outline: none;
  box-shadow: none;
}
.mapfield_spots-cat-row input[type="color"] {
  width: 36px; height: 30px; padding: 0; border: none; background: none;
}
#mapfield_spots-add-category { margin-top: 4px; }

/* ── Gallery field (wp.media picker + sortable, see Gallery_Field) ─────── */
.mapfield_spots-gallery-field__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 15px 0 10px;
  list-style: none;
}
.mapfield_spots-gallery-field__item {
  position: relative;
  width: 80px;
  height: 80px;
  cursor: move;
}
.mapfield_spots-gallery-field__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--mapfield_spots-radius);
  display: block;
}
.mapfield_spots-gallery-field__remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  background: var(--mapfield_spots-alert);
  color: #fff;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

/* ── Opening hours field (see Hours_Field) ──────────────────────────────── */
/* Plain flex rows instead of a <table> — a table forces every row's cells
   to sync height with each other (the source of the previous version's
   near-identical, too-tall rows regardless of actual content), and its
   columns don't reflow at all on narrow widths. Each day is now its own
   independent card, sized purely by its own content, and free to wrap
   the slots underneath the day label once the metabox gets narrow. */
/* Grid rather than flex-wrap: flex-wrap lets a lone item on the last row
   grow to fill the leftover space (Sunday ending up full-width). A grid's
   columns are fixed tracks shared by every row, so a short last row just
   leaves empty cells instead of stretching its items. */
.mapfield_spots-hours-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}
.mapfield_spots-hours-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px 16px;
  padding: 8px 12px;
  border: 1px solid var(--mapfield_spots-medium);
  border-radius: var(--mapfield_spots-radius);
}
.mapfield_spots-hours-day {
  display: flex;
  gap: 12px;
  flex: 0 0 90px;
  font-weight: 700;
}
.mapfield_spots-hours-day-label { font-size: 13px; }
.mapfield_spots-hours-slots {
  flex: 1 1 220px;
  min-width: 220px;
}
.mapfield_spots-hours-closed {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 400;
  font-size: 12px;
  white-space: nowrap;
}
.mapfield_spots-hours-ranges {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 6px;
}
.mapfield_spots-hours-range {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.mapfield_spots-hours-range input[type="time"] {
  border-radius: var(--mapfield_spots-radius);
  min-height: 20px;
}
/* Closed days show nothing but the checkbox — the ranges/add-slot markup
   still exists in the DOM (disabled, so it's excluded from submission
   either way) purely so re-unchecking "Closed" has something to show
   again without needing JS to build it, but a closed day has nothing
   useful to display, so this hides it outright instead of just dimming
   it — dimmed-but-still-full-height was most of why every row (closed or
   not) ended up roughly the same, very tall, height. */
.mapfield_spots-hours-row.is-closed .mapfield_spots-hours-ranges,
.mapfield_spots-hours-row.is-closed .mapfield_spots-hours-add {
  display: none;
}
/* A plain text-style action instead of the standard .button-secondary
   (46px tall, bordered pill) — reasonable once, but this repeats up to 7
   times in the same table and the full button treatment dominated the
   whole metabox. */
.mapfield_spots-hours-add {
  padding: 0;
  border: none;
  background: none;
  font-size: 12px;
  font-weight: 700;
  color: var(--mapfield_spots-link);
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--mapfield_spots-transition);
}
.mapfield_spots-hours-add:hover { color: var(--mapfield_spots-alert); }
.mapfield_spots-wrap .mapfield_spots-hours-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: var(--mapfield_spots-medium);
  color: var(--mapfield_spots-alert);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--mapfield_spots-transition), color var(--mapfield_spots-transition);
}
.mapfield_spots-wrap .mapfield_spots-hours-remove:hover {
  background: var(--mapfield_spots-alert);
  color: #fff;
}

/* ── Social links field (see Social_Field) ──────────────────────────────── */
.mapfield_spots-social-field__rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}
.mapfield_spots-social-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* min-width:0 is what actually lets a flex:1 item shrink below its own
   intrinsic content width — without it, a url input's browser-default
   floor pushed the row's total width past a narrow admin viewport by a
   few px, clipping the round remove button off its right edge. */
.mapfield_spots-social-row input[type="url"] { flex: 1; min-width: 0; }
.mapfield_spots-wrap .mapfield_spots-social-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: var(--mapfield_spots-bg);
  color: var(--mapfield_spots-alert);
  border: solid 2px var(--mapfield_spots-alert);
  font-size: 16px;
  font-weight: bold;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: var(--mapfield_spots-transition);
}
.mapfield_spots-wrap .mapfield_spots-social-remove:hover {
  background: var(--mapfield_spots-medium);
  border-color: var(--mapfield_spots-medium);
}

/* ── Rating field (see Rating_Field) ────────────────────────────────────── */
.mapfield_spots-rating-field {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: none;
  padding: 0;
  margin: 0;
}
.mapfield_spots-rating-field__option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  cursor: pointer;
}
/* Symbol picker on the Map Type form (label + € / $ / £ / icon choice) —
   plain inline radios, same treatment as the marker picker's own labels. */
.mapfield_spots-rating-symbol-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 16px;
  margin-bottom: 12px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
/* Icon-style symbols (auto-discovered from assets/icons/rating/, see
   Rating_Field::render_repeated()) — currency symbols are plain characters
   and need no sizing of their own. Adjacent-sibling margin (not a flex gap
   on the parent, which is just running inline text otherwise) spaces
   repeated copies out without a trailing gap after the last one. */
.mapfield_spots-rating-glyph {
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: middle;
}
.mapfield_spots-rating-glyph + .mapfield_spots-rating-glyph {
  margin-left: 2px;
}
.mapfield_spots-rating-glyph svg,
.mapfield_spots-rating-glyph img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.mapfield_spots-categories-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

/* ── Palette picker: suggests a set of colours for all categories at once,
   same popover pattern as the colour picker above (position/box-shadow/
   is-open), scoped to its own classes so the two never collide. ────── */
.mapfield_spots-palette-picker { position: relative; display: inline-block; }
.mapfield_spots-palette-popover {
  display: none;
  position: absolute;
  top: 38px;
  left: 0;
  background: var(--mapfield_spots-bg);
  border: 1px solid #ddd;
  border-radius: var(--mapfield_spots-radius);
  padding: 8px;
  box-shadow: 0 6px 24px rgba(0,0,0,.18);
  z-index: 9999;
  width: 260px;
  max-height: 357px;
  overflow-x: hidden;
  overflow-y: auto;
}
.mapfield_spots-palette-popover.is-open { display: block; }
.mapfield_spots-palette-option {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 8px;
  border: none;
  background: none;
  border-radius: var(--mapfield_spots-radius);
  cursor: pointer;
  text-align: left;
  transition: background var(--mapfield_spots-transition);
}
.mapfield_spots-palette-option:hover,
.mapfield_spots-palette-option:focus {
  background: var(--mapfield_spots-medium);
  outline: none;
}
.mapfield_spots-palette-option.is-active {
  background: var(--mapfield_spots-medium);
  box-shadow: inset 3px 0 0 var(--mapfield_spots-alert);
}
.mapfield_spots-palette-swatch {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--mapfield_spots-bg);
  box-shadow: 0 0 0 1px rgba(0,0,0,.08);
  flex-shrink: 0;
}
.mapfield_spots-palette-option__label {
  font-size: 12px;
  color: var(--mapfield_spots-text);
  margin-left: 4px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Thumbnail: list-table image column ───────────────────────────────── */
/* The list table uses table-layout:fixed and splits any column without its
   own width evenly among the rest — without this the image column ends up
   several times wider than the 55px image it will only ever hold. 75px =
   the image plus its td's own 10px horizontal padding on each side. */
.wp-list-table .column-mapfield_spots_thumbnail {
  width: 75px;
}
.mapfield_spots-column-thumb {
  display: block;
  width: 55px;
  height: 55px;
  object-fit: cover;
  border-radius: var(--mapfield_spots-radius-sm);
}
.mapfield_spots-column-thumb--empty {
  background: var(--mapfield_spots-medium);
}

/* ── Badges: list-table status column ─────────────────────────────────── */
.mapfield_spots-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.mapfield_spots-badge--ok   { background: #e6f4ea; color: #1e8a3c; }
.mapfield_spots-badge--warn { background: #fce8e6; color: #b32d2e; }

/* ── Meta box: "Location" ─────────────────────────────────────────────── */
.mapfield_spots-location-field { max-width: 100%; }
.mapfield_spots-location-field p.description { margin: 14px 0 8px; }

.mapfield_spots-location-field__search { margin-bottom: 10px; position: relative; }
.mapfield_spots-location-field__search .mapfield_spots-geocoder-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: var(--mapfield_spots-radius);
  font-family: inherit;
  box-sizing: border-box;
}
.mapfield_spots-location-field__search .mapfield_spots-geocoder-results {
  position: absolute;
  z-index: 5;
  top: 100%;
  left: 0;
  right: 0;
  margin: 4px 0 0;
  padding: 4px;
  list-style: none;
  background: var(--mapfield_spots-bg);
  border: 1px solid var(--mapfield_spots-medium);
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,.1);
  max-height: 220px;
  overflow-y: auto;
}
.mapfield_spots-location-field__search .mapfield_spots-geocoder-results li {
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  transition: background var(--mapfield_spots-transition);
}
.mapfield_spots-location-field__search .mapfield_spots-geocoder-results li:hover {
  background: var(--mapfield_spots-medium);
}

.mapfield_spots-location-field__mode {
  display: flex;
  gap: 20px;
  border: none;
  padding: 0;
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--mapfield_spots-text);
}
.mapfield_spots-location-field__mode label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }

.mapfield_spots-location-field__map {
  width: 100%;
  height: 380px;
  border-radius: var(--mapfield_spots-radius);
  overflow: hidden;
  border: 1px solid #eee;
  margin-bottom: 12px;
}

/* Custom SVG pin (see MARKER_SVG in location-picker.js) */
.mapfield_spots-marker {
  width: 55px;
  height: 55px;
  cursor: grab;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.35));
}
.mapfield_spots-marker svg {
  width: 100%;
  height: 100%;
  display: block;
}
/* PRO custom marker image — same natural-width treatment as the real
   front-end marker's own .mapfield_spots-marker__inner img (frontend.css). */
.mapfield_spots-marker img {
  height: 100%;
  display: block;
}

.mapfield_spots-location-field__coords {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
}
.mapfield_spots-location-field__coords label {
  flex: 1;
  font-size: 12px;
  font-weight: 600;
  color: #777;
}
.mapfield_spots-location-field__coords input {
  display: block;
  width: 100%;
  margin-top: 4px;
}

.mapfield_spots-map-error {
  background: #fce8e6;
  color: #b32d2e;
  border-radius: var(--mapfield_spots-radius);
  padding: 10px 14px;
  font-size: 13px;
  margin-top: 10px;
}

.mapfield_spots-style-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  max-width: 720px;
}
.mapfield_spots-style-url-input {
  display: block;
  width: 100%;
  max-width: 720px;
  box-sizing: border-box;
  margin-top: 10px;
}
/* Positioned like Map_Types_Admin::render_toolbar_preview()'s own wrap
   (.mapfield_spots-toolbar-row's right-hand column) — Settings::render_style_preview(). */
.mapfield_spots-style-preview-col {
  width: min(400px, 100%);
  flex-shrink: 0;
}
/* 400×400 square (the size requested) on anything wide enough for it,
   so it reads as a distinct "here's a proper look at it" panel rather
   than just a scaled-up thumb — width: 100% (of the column above,
   itself already clamped to min(400px, 100%)) + aspect-ratio (rather
   than a flat 400px) is what lets it shrink to fit on a narrow admin
   viewport instead of overflowing past its container's own right edge,
   wp-admin's mobile width (782px) and below included. */
.mapfield_spots-style-preview {
  position: relative; /* positioning context for the centred marker overlay below, regardless of whether MapLibre's own .maplibregl-map class (which sets this too) ever actually applies — e.g. the no-token/idle placeholder states never get that far. */
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--mapfield_spots-radius);
  overflow: hidden;
  background: var(--mapfield_spots-light);
}
/* .mapfield_spots-style-thumb--no-token/--error further down already
   center a placeholder glyph via a bare class selector (no ancestor
   scoping), so it applies here too once JS adds the same class name —
   this only bumps the glyph to a size that actually reads at 400×400
   instead of the thumbs' own 10px. */
.mapfield_spots-style-preview.mapfield_spots-style-thumb--no-token,
.mapfield_spots-style-preview.mapfield_spots-style-thumb--error {
  font-size: 32px;
}
/* The chosen Spot marker icon, centred over the preview map and pinned
   there regardless of pan/zoom (style-picker.js's initMarkerPreview() —
   a plain overlay, not a real maplibregl.Marker, which would be
   geo-anchored and drift away from centre the moment the map moves).
   Anchored by its own bottom-centre point (translate -50%/-100%), same
   convention as a real marker's own anchor: 'bottom' elsewhere in this
   plugin, so the pin's tip — not its middle — is what actually marks the
   centre point. pointer-events: none keeps it from ever intercepting a
   drag/click meant for the map underneath. Width/height are set inline by
   JS (MARKER_SIZES), matching whichever "Marker size" radio is selected;
   the svg/img/dashicon sizing rules mirror .mapfield_spots-marker-picker__preview's
   own (admin.css, marker picker) so all three content types actually fill
   whatever size JS sets on this wrapper instead of the source .svg file's
   own fixed dimensions winning out. */
.mapfield_spots-style-preview-marker {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -100%);
  z-index: 1;
  pointer-events: none;
  /* Centres a PRO custom marker image (below) horizontally within this
     box despite its auto width — every SVG library icon and the dashicon
     placeholder still just fill the box edge-to-edge either way, since
     both are the box's own explicit JS-set width/height. */
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.mapfield_spots-style-preview-marker svg { width: 100%; height: 100%; display: block; }
/* Width left to auto rather than forced to 100% like the svg/dashicon
   above — a PRO custom marker image isn't guaranteed square like every
   library icon is, and stretching it to fill a square box would distort
   it. Matches how frontend.css's own .mapfield_spots-marker__inner img
   already renders the very same image on the real map (height only, no
   object-fit/crop). */
.mapfield_spots-style-preview-marker img { width: auto; height: 100%; display: block; }
.mapfield_spots-style-preview-marker .dashicons { width: 100%; height: 100%; color: var(--mapfield_spots-medium); }
/* Sized off the overlay's own font-size (set inline by JS, in step with
   its width/height) rather than a fixed px value — this glyph's box has
   no intrinsic width/height of its own to fill otherwise. */
.mapfield_spots-style-preview-marker .dashicons::before { font-size: 1em; line-height: 1; }
input#mapfield_spots-style { margin-bottom: 7px; }
.mapfield_spots-style-card {
  width: 110px;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 10px;
  padding: 4px;
  text-align: center;
}
.mapfield_spots-style-card:focus-visible {
  outline: 2px solid var(--mapfield_spots-alert);
  outline-offset: 1px;
}
.mapfield_spots-style-card.is-selected {
  border-color: var(--mapfield_spots-alert);
  background: var(--mapfield_spots-medium);
}
.mapfield_spots-style-thumb {
  width: 100%;
  height: 74px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--mapfield_spots-light);
}
.mapfield_spots-style-thumb--no-token,
.mapfield_spots-style-thumb--error {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #999;
}
.mapfield_spots-style-thumb--no-token::after { content: "\2014"; }
.mapfield_spots-style-thumb--error::after { content: "?"; }
.mapfield_spots-style-thumb--custom {
  border: 1px dashed var(--mapfield_spots-text);
  opacity: .4;
}
.mapfield_spots-style-card__label {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--mapfield_spots-text);
}