/* FV-CMS-VENDORED v0.4.0 — DO NOT EDIT IN PLACE. Source: github.com/avidtech6/freshvibe-cms. To update, run: fvcms-update */
/* Oscar Panel Manager v2 — docks + panels */

/* ---------- root container ---------- */
.fvcms-dock-root {
  position: fixed;
  inset: 0;
  pointer-events: none;  /* most things inside re-enable */
  z-index: 2147483646;
}

/* ---------- dock strip (transparent — pills are the only visible part) ---------- */
.fvcms-dock {
  position: fixed;
  background: transparent;
  display: flex;
  /* Pills start below the panel header (which is ~46px tall) so they
     don't overlap the panel's green header bar. */
  align-items: flex-start;
  justify-content: flex-start;
  gap: 6px;
  padding: 56px 4px 6px 4px;
  pointer-events: auto;
  box-shadow: none;
  border: none;
}
/* Pills sit flush against the dock edge — no inner padding
   between pill and viewport boundary. */
.fvcms-dock-left {
  padding-left: 0 !important;
}
.fvcms-dock-right {
  padding-right: 0 !important;
}
.fvcms-dock-top {
  padding-top: 0 !important;
}
.fvcms-dock-bottom {
  padding-bottom: 0 !important;
}
/* On mobile: hide the dock background, only pills show */
@media (max-width: 600px) {
  .fvcms-dock {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    /* Allow taps to pass through the empty space between pills */
    pointer-events: none;
  }
  .fvcms-dock-pill {
    pointer-events: auto;
  }
  /* On mobile: don't hide the pill label — keep it visible
     (label opacity stays at 1 instead of being hidden by the
     default parked state). Pills stay slim vertical tabs as
     on desktop. */
  .fvcms-dock-left .fvcms-dock-pill .fvcms-dock-pill-label,
  .fvcms-dock-right .fvcms-dock-pill .fvcms-dock-pill-label {
    opacity: 1 !important;
  }
  /* Mobile: pills have no border-radius (they sit flush against
     the viewport edge — there's no screen to "round into"). */
  .fvcms-dock-left .fvcms-dock-pill,
  .fvcms-dock-right .fvcms-dock-pill,
  .fvcms-dock-top .fvcms-dock-pill,
  .fvcms-dock-bottom .fvcms-dock-pill,
  .fvcms-dock-left .fvcms-dock-pill.focused,
  .fvcms-dock-left .fvcms-dock-pill.in-play,
  .fvcms-dock-right .fvcms-dock-pill.focused,
  .fvcms-dock-right .fvcms-dock-pill.in-play,
  .fvcms-dock-top .fvcms-dock-pill.focused,
  .fvcms-dock-top .fvcms-dock-pill.in-play,
  .fvcms-dock-bottom .fvcms-dock-pill.focused,
  .fvcms-dock-bottom .fvcms-dock-pill.in-play {
    border-radius: 0 !important;
  }
}
.fvcms-dock-left {
  left: 0;
  top: 0;
  bottom: 0;
  width: 16px;  /* matches unslimmed pill width */
  flex-direction: column;
}
.fvcms-dock-right {
  right: 0;
  top: 0;
  bottom: 0;
  width: 16px;  /* matches unslimmed pill width */
  flex-direction: column;
}
.fvcms-dock-top {
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
}
.fvcms-dock-bottom {
  bottom: 0;
  left: 0;
  right: 0;
  height: 44px;
}
@media (max-width: 600px) {
  /* Mobile: dock has no visible body, pills sit flush against the
     viewport edge (no inset) */
  .fvcms-dock-left { left: 0; width: auto; border-right: none; }
  .fvcms-dock-right { right: 0; width: auto; border-left: none; }
  .fvcms-dock-top { top: 0; height: auto; border-bottom: none; }
  .fvcms-dock-bottom { bottom: 0; height: auto; border-top: none; }
  /* Bigger touch target for the resize handle on mobile (18px is
     too small for a finger). */
  .fvcms-pm-panel[data-state="floating"] .fvcms-pm-resize {
    width: 32px !important;
    height: 32px !important;
  }
  /* Pills get a subtle drop shadow since they float now */
  .fvcms-dock-pill {
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.6);
  }
}

/* ---------- pills (parked off-screen by default, slide into view on hover) ---------- */
.fvcms-dock-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: rgba(60, 60, 68, 0.95);
  color: #fff;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.3px;
  padding: 8px 4px;
  border-radius: 6px;
  cursor: grab;
  user-select: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  transition: transform 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.12s ease,
              background 0.18s ease,
              filter 0.12s ease;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
  will-change: transform;
}

/* Panel-type-specific default colours so operators can tell at a
   glance which dock slot belongs to which kind of panel. */
.fvcms-dock-pill[data-pm-panel-id="fvcms-cms-panel"] {
  background: rgba(46, 60, 50, 0.95);     /* CMS — deep forest */
  border: 1px solid rgba(140, 180, 140, 0.5);
}
.fvcms-dock-pill[data-pm-panel-id^="fvcms-region-"] {
  background: rgba(118, 96, 158, 0.95);   /* Region — soft purple */
  border: 1px solid rgba(180, 160, 220, 0.55);
}
.fvcms-dock-pill[data-pm-panel-id^="fvcms-edit-"] {
  background: rgba(170, 132, 60, 0.95);   /* Editor — muted amber */
  border: 1px solid rgba(220, 180, 110, 0.55);
}

.fvcms-dock-pill:hover,
.fvcms-dock-pill:focus-visible,
.fvcms-dock-pill:active {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
  filter: brightness(1.18);
}
.fvcms-dock-pill.focused {
  background: rgba(255, 220, 100, 1) !important;
  color: #1a1a1a;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
  /* Subtle inner ring only. No outer drop shadow — that was making
     the pill's visual extent much wider than its 45px layout
     width, making it look ~77px wide and confusing the operator. */
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
}
/* In-play but not focused: softer amber. The panel is still shown
   full, but it's a sibling — the operator's typing focus is
   elsewhere. */
.fvcms-dock-pill.in-play {
  background: rgba(200, 150, 70, 0.9) !important;
  color: #fff8e8;
  font-weight: 600;
  border: 1px solid rgba(220, 180, 110, 0.55) !important;
  /* No outer drop shadow — keeps the pill's visual extent close
     to its 45px layout width. */
  box-shadow: none;
}
/* When a pill is in-play, it sits flush against the viewport edge.
   Remove the border-radius on the side that meets the edge so the
   pill looks like it grows out of the page boundary, not stuck on
   top of it. (Same applies for both .focused and .in-play.) */
.fvcms-dock-left .fvcms-dock-pill.focused,
.fvcms-dock-left .fvcms-dock-pill.in-play {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: none;
  padding-left: 5px;
}
.fvcms-dock-right .fvcms-dock-pill.focused,
.fvcms-dock-right .fvcms-dock-pill.in-play {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: none;
  padding-right: 5px;
}
.fvcms-dock-top .fvcms-dock-pill.focused,
.fvcms-dock-top .fvcms-dock-pill.in-play {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-top: none;
  padding-top: 5px;
}
.fvcms-dock-bottom .fvcms-dock-pill.focused,
.fvcms-dock-bottom .fvcms-dock-pill.in-play {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: none;
  padding-bottom: 5px;
}

/* Vertical pills on left/right docks — full size, but parked
   off-screen by default. On hover, focus, or active state, the
   pill slides back into the dock so the operator can see what
   it is. The dock itself stays 44px wide so neighbouring pills
   don't shift around. */
.fvcms-dock-left .fvcms-dock-pill,
.fvcms-dock-right .fvcms-dock-pill {
  /* Slimmed (default / parked) state: 12px wide. The label
     is hidden via opacity (see below). The pill expands to
     16px when the panel is in-play or focused. */
  width: 12px;
  height: auto;
  min-height: 80px;
  max-height: 200px;
  writing-mode: vertical-rl;  /* rotated text */
  text-orientation: mixed;
  padding: 12px 1px;
  transition: width 0.18s ease, padding 0.18s ease;
}
/* Unslimmed: in-play or focused panels get a wider pill so the
   label is comfortably visible. */
.fvcms-dock-left .fvcms-dock-pill.focused,
.fvcms-dock-left .fvcms-dock-pill.in-play,
.fvcms-dock-right .fvcms-dock-pill.focused,
.fvcms-dock-right .fvcms-dock-pill.in-play {
  width: 16px;
  padding: 12px 2px;
}
.fvcms-dock-left .fvcms-dock-pill {
  transform: translateX(0);  /* Always visible — minimised panels still
                                 keep their pill in the dock so the
                                 operator knows they're "in the system" */
}
.fvcms-dock-right .fvcms-dock-pill {
  transform: translateX(0);  /* Same: always visible */
}
.fvcms-dock-left .fvcms-dock-pill:hover,
.fvcms-dock-right .fvcms-dock-pill:hover,
.fvcms-dock-left .fvcms-dock-pill:focus-visible,
.fvcms-dock-right .fvcms-dock-pill:focus-visible,
.fvcms-dock-left .fvcms-dock-pill.active,
.fvcms-dock-right .fvcms-dock-pill.active,
.fvcms-dock-left .fvcms-dock-pill.focused,
.fvcms-dock-right .fvcms-dock-pill.focused,
.fvcms-dock-left .fvcms-dock-pill.in-play,
.fvcms-dock-right .fvcms-dock-pill.in-play {
  transform: translateX(0);      /* slide into view */
}
.fvcms-dock-left .fvcms-dock-pill .fvcms-dock-pill-label,
.fvcms-dock-right .fvcms-dock-pill .fvcms-dock-pill-label {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  display: inline-block;
  max-height: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;                 /* hidden when pill is parked off-screen */
  transition: opacity 0.18s ease;
}
.fvcms-dock-left .fvcms-dock-pill:hover .fvcms-dock-pill-label,
.fvcms-dock-right .fvcms-dock-pill:hover .fvcms-dock-pill-label,
.fvcms-dock-left .fvcms-dock-pill:focus-visible .fvcms-dock-pill-label,
.fvcms-dock-right .fvcms-dock-pill:focus-visible .fvcms-dock-pill-label,
.fvcms-dock-left .fvcms-dock-pill.focused .fvcms-dock-pill-label,
.fvcms-dock-right .fvcms-dock-pill.focused .fvcms-dock-pill-label,
.fvcms-dock-left .fvcms-dock-pill.in-play .fvcms-dock-pill-label,
.fvcms-dock-right .fvcms-dock-pill.in-play .fvcms-dock-pill-label {
  opacity: 1;
}
.fvcms-dock-left .fvcms-dock-pill .fvcms-dock-pill-grip,
.fvcms-dock-right .fvcms-dock-pill .fvcms-dock-pill-grip {
  /* Grip shown horizontally at the top of vertical pill */
  writing-mode: horizontal-tb;
  font-size: 11px;
  opacity: 0.85;
  margin-bottom: 4px;
  /* Tighten the gap between the two ⋮ columns so they read as
     one cohesive grip icon, not two columns of dots miles apart. */
  letter-spacing: -3px;
  text-indent: -1px;
  display: inline-block;
  transform: scaleX(0.85);
  transform-origin: center;
}

/* Horizontal pills on top/bottom docks — full size, parked
   off-screen by default. On hover, focus, or active, the pill
   slides into the dock. */
.fvcms-dock-top .fvcms-dock-pill,
.fvcms-dock-bottom .fvcms-dock-pill {
  height: 30px;
  padding: 4px 10px;
}
.fvcms-dock-top .fvcms-dock-pill {
  transform: translateY(-22px);   /* park upward, ~8px visible */
}
.fvcms-dock-bottom .fvcms-dock-pill {
  transform: translateY(22px);    /* park downward, ~8px visible */
}
.fvcms-dock-top .fvcms-dock-pill:hover,
.fvcms-dock-bottom .fvcms-dock-pill:hover,
.fvcms-dock-top .fvcms-dock-pill:focus-visible,
.fvcms-dock-bottom .fvcms-dock-pill:focus-visible,
.fvcms-dock-top .fvcms-dock-pill.active,
.fvcms-dock-bottom .fvcms-dock-pill.active,
.fvcms-dock-top .fvcms-dock-pill.focused,
.fvcms-dock-bottom .fvcms-dock-pill.focused,
.fvcms-dock-top .fvcms-dock-pill.in-play,
.fvcms-dock-bottom .fvcms-dock-pill.in-play {
  transform: translate(0, 0);
}
.fvcms-dock-top .fvcms-dock-pill .fvcms-dock-pill-label,
.fvcms-dock-bottom .fvcms-dock-pill .fvcms-dock-pill-label {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.fvcms-dock-top .fvcms-dock-pill:hover .fvcms-dock-pill-label,
.fvcms-dock-bottom .fvcms-dock-pill:hover .fvcms-dock-pill-label,
.fvcms-dock-top .fvcms-dock-pill:focus-visible .fvcms-dock-pill-label,
.fvcms-dock-bottom .fvcms-dock-pill:focus-visible .fvcms-dock-pill-label,
.fvcms-dock-top .fvcms-dock-pill.active .fvcms-dock-pill-label,
.fvcms-dock-bottom .fvcms-dock-pill.active .fvcms-dock-pill-label,
.fvcms-dock-top .fvcms-dock-pill.focused .fvcms-dock-pill-label,
.fvcms-dock-bottom .fvcms-dock-pill.focused .fvcms-dock-pill-label,
.fvcms-dock-top .fvcms-dock-pill.in-play .fvcms-dock-pill-label,
.fvcms-dock-bottom .fvcms-dock-pill.in-play .fvcms-dock-pill-label {
  opacity: 1;
}

/* ---------- panel DOM ---------- */
.fvcms-pm-panel {
  position: fixed;
  background: rgba(20, 28, 20, 0.97);
  color: #e8e8e0;
  font: 12px ui-monospace, Menlo, monospace;
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(120, 160, 120, 0.3);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* Above region tags and the dev button, below the dock itself. */
  z-index: 2147483647;
  pointer-events: auto;
}

/* Docked panels: full height, no border radius (snaps cleanly to viewport edge) */
.fvcms-pm-panel[data-state="docked-active"] {
  border-radius: 0;
  height: 100vh !important;
  max-height: 100vh !important;
}
.fvcms-pm-panel[data-state="docked-active"] .fvcms-pm-header {
  border-radius: 0;
}
.fvcms-pm-header {
  padding: 10px 12px;
  background: rgba(45, 79, 45, 0.92);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  letter-spacing: 0.5px;
  user-select: none;
  cursor: grab;
  flex-shrink: 0;
  gap: 8px;
}
.fvcms-pm-title {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fvcms-pm-controls {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.fvcms-pm-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 5px;
  font-size: 14px;
  min-width: 26px;
  min-height: 26px;
  line-height: 1;
}
.fvcms-pm-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* 6-dot grip icon (2 columns × 3 rows) used for the detach button */
.fvcms-pm-grip {
  display: inline-block;
  width: 7px;
  height: 11px;
  background-image:
    radial-gradient(circle, currentColor 1.1px, transparent 1.4px),
    radial-gradient(circle, currentColor 1.1px, transparent 1.4px);
  background-size: 3.5px 3.66px;
  background-position: 0 0, 3.5px 0;
  background-repeat: repeat;
  vertical-align: middle;
}
.fvcms-pm-close:hover {
  background: rgba(220, 60, 60, 0.9);
  border-color: rgba(255, 80, 80, 1);
}
.fvcms-pm-body {
  flex: 1 1 auto;
  overflow: auto;
  padding: 12px;
  min-height: 0;
  /* Kill ugly native scrollbars — scroll still works, just no chrome */
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* IE/old Edge */
  -webkit-overflow-scrolling: touch;
}
.fvcms-pm-body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;                  /* WebKit / Blink */
}

/* Apply same scrollbar hiding to all descendants of a panel
   (checkboxes, list views, anything inside that might scroll) */
.fvcms-pm-panel * {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.fvcms-pm-panel *::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* ---------- snap hint (when dragging panel near edge) ---------- */
.fvcms-snap-hint {
  position: fixed;
  background: rgba(180, 140, 80, 0.85);
  pointer-events: none;
  z-index: 2147483644;
  display: none;
  box-shadow: 0 0 20px rgba(180, 140, 80, 0.6);
}
.fvcms-snap-hint-left {
  left: 0; top: 0; bottom: 0; width: 50px;
  border-right: 2px solid rgba(255, 220, 100, 1);
}
.fvcms-snap-hint-right {
  right: 0; top: 0; bottom: 0; width: 50px;
  border-left: 2px solid rgba(255, 220, 100, 1);
}
.fvcms-snap-hint-top {
  top: 0; left: 0; right: 0; height: 50px;
  border-bottom: 2px solid rgba(255, 220, 100, 1);
}
.fvcms-snap-hint-bottom {
  bottom: 0; left: 0; right: 0; height: 50px;
  border-top: 2px solid rgba(255, 220, 100, 1);
}
/* ---------- squeeze body padding when docked panel is in squeeze mode ---------- */
/* data-overlay-mode="1" means SQUEEZE mode is active (panel pushes page). */
/* Default (no attribute) = overlay mode (panel sits on top of page, no padding). */
body:has(.fvcms-pm-panel[data-state="docked-active"][data-dock-edge="left"][data-overlay-mode="1"]) {
  padding-left: var(--fvcms-pm-pinned-w, 0px) !important;
  transition: padding-left 0.2s ease;
}
body:has(.fvcms-pm-panel[data-state="docked-active"][data-dock-edge="right"][data-overlay-mode="1"]) {
  padding-right: var(--fvcms-pm-pinned-w, 0px) !important;
  transition: padding-right 0.2s ease;
}
body:has(.fvcms-pm-panel[data-state="docked-active"][data-dock-edge="top"][data-overlay-mode="1"]) {
  padding-top: var(--fvcms-pm-pinned-h, 0px) !important;
  transition: padding-top 0.2s ease;
}
body:has(.fvcms-pm-panel[data-state="docked-active"][data-dock-edge="bottom"][data-overlay-mode="1"]) {
  padding-bottom: var(--fvcms-pm-pinned-h, 0px) !important;
  transition: padding-bottom 0.2s ease;
}

/* Squeeze button visual feedback: highlighted when in squeeze mode */
.fvcms-pm-squeeze[data-active="1"] {
  background: rgba(180, 140, 80, 0.6) !important;
  color: #fff !important;
}

/* On floating panels, only the close button + collapse button make sense.
   Squeeze and detach are dock-only operations.
   Collapse IS shown on floating — clicking it docks to the nearest edge. */
.fvcms-pm-panel.fvcms-pm-floating .fvcms-pm-squeeze,
.fvcms-pm-panel.fvcms-pm-floating .fvcms-pm-detach {
  display: none;
}

/* ---------- resize handle (on inner edge of docked panel) ---------- */
.fvcms-pm-resize {
  position: absolute;
  z-index: 2;
  /* Default hidden; positioned by dock edge */
  display: none;
  background: transparent;
  transition: background 0.15s ease;
}
/* Show only when panel is docked-active OR floating */
.fvcms-pm-panel[data-state="docked-active"] .fvcms-pm-resize,
.fvcms-pm-panel[data-state="floating"] .fvcms-pm-resize {
  display: block;
}
/* Floating: handle is bottom-right corner (free 2-axis resize) */
.fvcms-pm-panel[data-state="floating"] .fvcms-pm-resize {
  right: 0;
  bottom: 0;
  width: 18px;
  height: 18px;
  cursor: nwse-resize;
  background-image:
    linear-gradient(135deg, transparent 0%, transparent 50%,
      rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 60%,
      transparent 60%, transparent 70%,
      rgba(255, 255, 255, 0.4) 70%, rgba(255, 255, 255, 0.4) 80%,
      transparent 80%);
}
/* Left dock: handle on RIGHT (inner) edge of panel */
.fvcms-pm-panel[data-state="docked-active"][data-dock-edge="left"] .fvcms-pm-resize {
  right: -6px;
  top: 0;
  bottom: 0;
  width: 12px;
  cursor: ew-resize;
}
/* Right dock: handle on LEFT (inner) edge */
.fvcms-pm-panel[data-state="docked-active"][data-dock-edge="right"] .fvcms-pm-resize {
  left: -6px;
  top: 0;
  bottom: 0;
  width: 12px;
  cursor: ew-resize;
}
/* Top dock: handle on BOTTOM (inner) edge */
.fvcms-pm-panel[data-state="docked-active"][data-dock-edge="top"] .fvcms-pm-resize {
  left: 0;
  right: 0;
  bottom: -6px;
  height: 12px;
  cursor: ns-resize;
}
/* Bottom dock: handle on TOP (inner) edge */
.fvcms-pm-panel[data-state="docked-active"][data-dock-edge="bottom"] .fvcms-pm-resize {
  left: 0;
  right: 0;
  top: -6px;
  height: 12px;
  cursor: ns-resize;
}
/* Gold tint on hover */
.fvcms-pm-panel[data-state="docked-active"] .fvcms-pm-resize:hover,
.fvcms-pm-panel[data-state="floating"] .fvcms-pm-resize:hover {
  background-color: rgba(180, 140, 80, 0.7);
  box-shadow: 0 0 8px rgba(180, 140, 80, 0.5);
}

/* Prevent horizontal page scroll when dock has docked panel that pushes
   page (squeeze) — elementor swiper duplicates overflow otherwise. */
html:has(.fvcms-pm-panel[data-state="docked-active"]),
body:has(.fvcms-pm-panel[data-state="docked-active"]) {
  overflow-x: hidden !important;
}

/* When multiple docks exist on perpendicular edges, offset them so
   pills on different edges don't visually overlap. */
body:has(.fvcms-dock-left) .fvcms-dock-top,
body:has(.fvcms-dock-left) .fvcms-dock-bottom {
  left: 50px;  /* clear the left dock area */
}
body:has(.fvcms-dock-right) .fvcms-dock-top,
body:has(.fvcms-dock-right) .fvcms-dock-bottom {
  right: 50px;
}
body:has(.fvcms-dock-top) .fvcms-dock-left,
body:has(.fvcms-dock-top) .fvcms-dock-right {
  top: 50px;
}
body:has(.fvcms-dock-bottom) .fvcms-dock-left,
body:has(.fvcms-dock-bottom) .fvcms-dock-right {
  bottom: 50px;
}


/* On mobile, docked panel is narrower so the operator can still
   see the webpage behind. The dock takes 44px on the panel edge;
   we want the panel to occupy about 78% of the viewport width
   (e.g. ~300px on a 390px phone), leaving a slice of the page
   visible on the opposite side. */
@media (max-width: 600px) {
  /* Mobile: panels are always floating (state=floating, not
     docked-active). The default opening size is 50vw × 50vh so
     the operator can always see the page behind — but the
     operator can resize freely via the bottom-right handle.
     Inline style set by JS during resize overrides these
     defaults (no !important). */
  .fvcms-pm-panel[data-state="floating"] {
    width: 50vw;
    min-width: 240px;
    border-radius: 10px;
  }
  /* Fade in animation only on the FIRST time a panel becomes
     floating on mobile. We use a JS-added class so the animation
     only runs once per panel per session, not every drag. */
  .fvcms-pm-panel.fvcms-mobile-fadein-once {
    animation: fvcms-mobile-fadein 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  }
  @keyframes fvcms-mobile-fadein {
    from { opacity: 0; transform: translateY(32px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  /* Mobile: only the currently-focused panel shows its body.
     Pills stay visible (the operator needs them to switch panels)
     but the panel bodies are stacked in a single visible slot. */
  .fvcms-pm-panel[data-state="docked-active"]:not([data-focused="1"]),
  .fvcms-pm-panel[data-state="floating"]:not([data-focused="1"]) {
    display: none !important;
  }
  /* Background preset swatch row: wrap on narrow panels. */
  .fvcms-region-field > div[style*="display: flex"] {
    flex-wrap: wrap !important;
  }
  .fvcms-region-field button.fvcms-bg-preset {
    flex: 0 0 auto !important;
    min-width: 50px !important;
    font-size: 8px !important;
    padding: 3px 5px !important;
  }
}

/* Region editor UI (inside region panels) */
.fvcms-region-editor {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fvcms-region-editor-section {
  border-left: 2px solid rgba(180, 140, 80, 0.5);
  padding-left: 8px;
  padding-top: 4px;
  padding-bottom: 4px;
}
.fvcms-region-editor-head {
  font-size: 11px;
  color: #c0e0c0;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 4px;
}
.fvcms-region-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 10px;
  color: #b0c0b0;
}
.fvcms-region-field label {
  font-weight: 600;
  font-size: 10px;
}

/* Editor panel body — Fields / Variants / Raw JSON tabs */
.fvcms-editor-body {
  display: flex;
  flex-direction: column;
  gap: 0;
  font: 12px ui-monospace, monospace;
  color: #e8e8e0;
}
.fvcms-editor-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #b0c0b0;
  margin-bottom: 10px;
}
.fvcms-editor-tab-content {
  display: block;
}
.fvcms-tab-active {
  color: #c0e0c0 !important;
  border-bottom-color: rgba(120, 180, 120, 0.7) !important;
}