/* ============================================================================
   FORMBUILDER - Category/Subcategory/Field Editor
   Used in Admin Panel > Forms Tab
   
   Z-INDEX NOTE: All z-index values must respect base.css layer system.
   Menus use var(--layer-menu) = 85, never exceed 100.
   ============================================================================ */

/* Container */
.admin-formbuilder-container {
  width: 100%;
}

/* Scroll gap spacer (used to keep clicked headers stationary when content above collapses) */
.formbuilder-scroll-gap {
  width: 100%;
  height: 0;
  pointer-events: none;
}

/* Dynamic bottom slack spacer (only grows when needed to prevent bottom clamp/yank) */
.formbuilder-scroll-gap-bottom {
  width: 100%;
  height: 0;
  pointer-events: none;
}

/* Category Accordion */
.formbuilder-accordion {
  width: 100%;
  margin-bottom: 3px;
  overflow: visible;
}

/* Surface (background/border/radius/text) comes from accordion-class-3
   (base.css) — LAYOUT ONLY here. The border variable is overridden to
   transparent to preserve this header's border-on-hover behavior. */
.formbuilder-accordion.accordion-class-3 {
  --accordion-header-border: transparent;
}

.formbuilder-accordion-header {
  height: 36px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  cursor: pointer;
  font-weight: normal;
}

/* State rules carry .accordion-header too so they outrank the class-3
   surface rule in base.css (same bump pattern as fieldsets.css uses). */
.formbuilder-accordion-header.accordion-header:hover {
  border-color: var(--blue-500);
}

.accordion-header.formbuilder-accordion-header--open,
.accordion-header.formbuilder-accordion-header--editing {
  border-radius: 8px 8px 0 0;
}

/* While editing, the header carries the panel's border so the outline
   continues around the top; the bottom edge stays open to fuse with the
   panel (same transparent-bottom join as accordion-class-1, base.css). */
.accordion-header.formbuilder-accordion-header--editing {
  border-color: rgba(255, 255, 255, 0.1);
  border-bottom-color: transparent;
}

/* The edit panel is an EXTENSION of its header (operator 2026-07-07):
   hovering ANY part of the editing unit — header or panel — traces the
   header's blue hover border around the ENTIRE unit. The backward reach
   (panel hover lighting the header above it) uses :has(), the same
   mechanism as base.css's drawer rules. */
.formbuilder-accordion-header.accordion-header:hover + .formbuilder-accordion-editpanel--editing,
.formbuilder-accordion-editpanel--editing:hover {
  border-color: var(--blue-500);
}

.accordion-header.formbuilder-accordion-header--editing:hover,
.formbuilder-accordion:has(> .formbuilder-accordion-editpanel--editing:hover) > .formbuilder-accordion-header.accordion-header {
  border-color: var(--blue-500);
  border-bottom-color: transparent;
}

.formbuilder-accordion-header-image {
  width: 24px;
  height: 24px;
  object-fit: contain;
  border-radius: 8px;
}

.formbuilder-icon--empty {
  visibility: hidden;
}

.formbuilder-accordion-header-text {
  flex: 1;
  padding-left: 10px;
  font-weight: bold;
}

.formbuilder-accordion-header-arrow {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.formbuilder-accordion-header-arrow::before {
  content: '';
  display: block;
  width: 14px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask-image: var(--ui-icon-arrow-down);
  mask-image: var(--ui-icon-arrow-down);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  transition: transform 0.2s;
  transform-origin: center;
}

.formbuilder-accordion-header-arrow--open::before {
  transform: rotate(180deg);
}

.formbuilder-accordion-header-drag {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.formbuilder-accordion-header-drag-icon {
  width: 16px;
  height: 16px;
  background-color: #fff;
  -webkit-mask-image: var(--ui-icon-drag-handle);
  mask-image: var(--ui-icon-drag-handle);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.formbuilder-accordion-header-drag:hover .formbuilder-accordion-header-drag-icon {
  background-color: #fff;
}


.formbuilder-accordion.dragging {
  opacity: 0.5;
}

.formbuilder-accordion-header-editarea {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
}

.formbuilder-accordion-header-edit {
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask-image: var(--ui-icon-edit);
  mask-image: var(--ui-icon-edit);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* Hover/editing: the pencil stays white on the blue header and swaps to the
   bold weight (operator 2026-07-07). */
.formbuilder-accordion-header-editarea:hover .formbuilder-accordion-header-edit,
.formbuilder-accordion-header-editarea--editing .formbuilder-accordion-header-edit {
  -webkit-mask-image: var(--ui-icon-edit-bold);
  mask-image: var(--ui-icon-edit-bold);
}


/* Edit Panel — joined under the header, surface values copied from the
   Image Files accordion body (accordion-class-1, base.css) per operator
   2026-07-07. */
.formbuilder-accordion-editpanel {
  display: none;
  padding: 10px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-top: none;
  border-radius: 0 0 8px 8px;
}

.formbuilder-accordion-editpanel--editing {
  display: block;
}


.formbuilder-accordion-editpanel-row {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

/* Input surface comes from input-class-1 (the Welcome Title style, carried
   in the markup) — LAYOUT ONLY here (operator 2026-07-07). */
.formbuilder-accordion-editpanel-input {
  flex: 1;
  height: 36px;
  padding: 0 10px;
  font-size: 13px;
  cursor: text;
}

/* Form Builder hover is blue everywhere — the class bump outranks
   input-class-1's #555 hover in base.css (focus is already blue there). */
.formbuilder-accordion-editpanel-input.input-class-1:hover {
  border-color: var(--blue-500);
}

/* Icon picker triggers in the edit panels: same blue hover. Selector shape
   copied from base.css's menu-class-1 hover rule with the editpanel scope
   added so it outranks it. */
@media (hover: hover) {
  .formbuilder-accordion-editpanel .menu-class-1:not(:focus-within) .menu-button:not(.menu-button--open):not(:active):hover,
  .formbuilder-accordion-option-editpanel .menu-class-1:not(:focus-within) .menu-button:not(.menu-button--open):not(:active):hover {
    border-color: var(--blue-500);
  }
}

/* 3-dot menu: component-safetymenu (components.css/components.js) */

/* Accordion Body */
.formbuilder-accordion-body {
  display: none;
  padding: 3px 0 0 0;
}

.formbuilder-accordion-body--open {
  display: block;
}

/* Subcategory Option */
.formbuilder-accordion-option {
  margin-bottom: 3px;
  border-radius: 8px;
  overflow: visible;
}

/* Surface (background/border/radius/text) comes from accordion-class-4
   (base.css) — LAYOUT ONLY here. State rules below carry .accordion-header
   so they outrank the class-4 surface rule (same bump as the category
   accordion above). */
.formbuilder-accordion-option-header {
  height: 36px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  cursor: pointer;
}

.formbuilder-accordion-option-header.accordion-header:hover {
  border-color: var(--blue-500);
}

.accordion-header.formbuilder-accordion-option-header--editing {
  border-color: var(--blue-500);
  border-radius: 8px 8px 0 0;
  border-bottom: none;
}

.formbuilder-accordion-option-image {
  width: 20px;
  height: 20px;
  object-fit: contain;
  border-radius: 8px;
}

.formbuilder-accordion-option-text {
  flex: 1;
  padding-left: 10px;
}

.formbuilder-accordion-option-arrow {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.formbuilder-accordion-option-arrow::before {
  content: '';
  display: block;
  width: 14px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask-image: var(--ui-icon-arrow-down);
  mask-image: var(--ui-icon-arrow-down);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  transition: transform 0.2s;
  transform-origin: center;
}

.formbuilder-accordion-option-arrow--open::before {
  transform: rotate(180deg);
}

.accordion-header.formbuilder-accordion-option-header--open {
  border-color: var(--blue-500);
  border-radius: 8px 8px 0 0;
  border-bottom: none;
}

.formbuilder-accordion-option-drag {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.formbuilder-accordion-option-drag-icon {
  width: 16px;
  height: 16px;
  background-color: #888;
  -webkit-mask-image: var(--ui-icon-drag-handle);
  mask-image: var(--ui-icon-drag-handle);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.formbuilder-accordion-option-drag:hover .formbuilder-accordion-option-drag-icon {
  background-color: #fff;
}


.formbuilder-accordion-option.dragging {
  opacity: 0.5;
}

.formbuilder-accordion-option-editarea {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #888;
}

.formbuilder-accordion-option-edit {
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask-image: var(--ui-icon-edit);
  mask-image: var(--ui-icon-edit);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.formbuilder-accordion-option-editarea:hover,
.formbuilder-accordion-option-editarea--editing {
  color: var(--blue-500);
}

.formbuilder-accordion-option-editarea:hover .formbuilder-accordion-option-edit,
.formbuilder-accordion-option-editarea--editing .formbuilder-accordion-option-edit {
  -webkit-mask-image: var(--ui-icon-edit-bold);
  mask-image: var(--ui-icon-edit-bold);
}

.formbuilder-accordion-option-editpanel {
  display: none;
  padding: 10px;
  border: 1px solid var(--blue-500);
  border-top: none;
  border-radius: 0 0 8px 8px;
  background: #000;
}

.formbuilder-accordion-option-editpanel--editing {
  display: block;
}

/* Body skin (background/border/radius) comes from accordion-class-4.
   Top padding (not a child margin) makes the header-to-content gap, so the
   wash meets the header with no seam — a first-child margin collapses out
   of the borderless body top and pushes the whole wash down (the light-theme
   gap bug, operator 2026-07-08). */
.formbuilder-accordion-option-body {
  display: none;
  padding: 10px 10px 10px 10px;
}

.formbuilder-accordion-option-body--open {
  display: block;
}

/* When both editing and open */
.formbuilder-accordion-option-editpanel--editing-open {
  border-radius: 0;
  border-bottom: none;
}

.formbuilder-accordion-option-body--editing-open {
  border-top: none;
  /* The open edit panel above already provides this spacing. */
  padding-top: 0;
}

/* Subcategory edit panel overrides */
.formbuilder-accordion-editpanel-input--subcategory {
  background: #111111;
}

.formbuilder-accordion-option-editpanel .component-safetymenu-button {
  background: #111111;
}

.formbuilder-menu-button--subcategory {
  background: #111111;
}

.formbuilder-menu-options--subcategory {
  background: #111111;
}

/* Icon Picker Menu */
.formbuilder-menu {
  width: 100%;
  height: 36px;
  position: relative;
}

.formbuilder-menu-button {
  width: 100%;
  height: 36px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  box-sizing: border-box;
  background: #062038;
  border: 1px solid #222222;
  border-radius: 8px;
  cursor: pointer;
}

.formbuilder-menu-button:hover {
  border-color: var(--blue-500);
}

.formbuilder-menu-button--open {
  border-color: var(--blue-500);
  border-radius: 8px 8px 0 0;
  border-bottom: none;
}

.formbuilder-menu-button-image {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex-shrink: 0;
}

.formbuilder-menu-button-text {
  flex: 1;
  text-align: left;
  padding-left: 10px;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.formbuilder-menu-button-arrow {
  width: 36px;
  height: 36px;
  margin-left: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.formbuilder-menu-button-arrow::before {
  content: '';
  display: block;
  width: 14px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask-image: var(--ui-icon-arrow-down);
  mask-image: var(--ui-icon-arrow-down);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  transition: transform 0.2s;
  transform-origin: center;
}

.formbuilder-menu-button-arrow--open::before {
  transform: rotate(180deg);
}

.formbuilder-menu-options {
  display: none;
  position: absolute;
  top: 36px;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  background: #062038;
  border: 1px solid var(--blue-500);
  border-top: none;
  border-radius: 0 0 8px 8px;
  max-height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: var(--layer-menu, 85);
}

.formbuilder-menu-options--open {
  display: block;
}

.formbuilder-menu-option {
  width: 100%;
  height: 36px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  box-sizing: border-box;
  cursor: pointer;
  color: #fff;
  font-size: 13px;
}

.formbuilder-menu-option:hover {
  background: var(--blue-500);
}

.formbuilder-menu-option-image {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex-shrink: 0;
}

.formbuilder-menu-option-text {
  flex: 1;
  text-align: left;
  padding-left: 10px;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Add Buttons */
.formbuilder-add-category,
.formbuilder-add-subcategory,
.formbuilder-form-preview {
  width: 100%;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #222;
  border: 1px solid #222222;
  border-radius: 8px;
  color: #888;
  font-size: 13px;
  cursor: pointer;
  margin-top: 3px;
}

/* Idle border matches the label color (#888); form preview keeps its own
   filled look (operator 2026-07-07). Hover still turns blue below. */
.formbuilder-add-category,
.formbuilder-add-subcategory {
  border: none;
  background: #000;
  margin-top: 3px;
  margin-bottom: 3px;
}

.formbuilder-add-category:hover,
.formbuilder-add-subcategory:hover,
.formbuilder-form-preview:hover {
  border-color: var(--blue-500);
  color: #fff;
}

.formbuilder-add-category {
  width: 100%;
  margin-top: 3px;
}

.formbuilder-form-preview {
  margin-top: 3px;
  /* Two-blues redesign (operator 2026-08-13): blue-950 dark like the
     container-class-2 headers; light override (blue-600) in themes.css. */
  background: var(--blue-950);
  color: #fff;
}

.formbuilder-form-preview:hover {
  background: var(--blue-950);
}

/* Fieldset Menu */
.formbuilder-fieldset-menu {
  width: 100%;
  position: relative;
}

.formbuilder-fieldset-menu-button {
  width: 100%;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #222;
  border: 1px solid #222222;
  border-radius: 8px;
  color: #888;
  font-size: 13px;
  cursor: pointer;
}

.formbuilder-fieldset-menu-button:hover {
  border-color: var(--blue-500);
  color: #fff;
}

.formbuilder-fieldset-menu-button--open {
  border-color: var(--blue-500);
  border-radius: 8px 8px 0 0;
  border-bottom: none;
  color: #fff;
}

.formbuilder-fieldset-menu-options {
  display: none;
  position: absolute;
  top: 36px;
  left: 0;
  width: 100%;
  background: #111;
  border: 1px solid var(--blue-500);
  border-top: none;
  border-radius: 0 0 8px 8px;
  max-height: 400px;
  overflow-y: auto;
  z-index: var(--layer-menu, 85);
}

.formbuilder-fieldset-menu-options--open {
  display: block;
}

.formbuilder-fieldset-menu-option {
  width: 100%;
  height: 36px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  cursor: pointer;
  color: #fff;
  font-size: 13px;
}

.formbuilder-fieldset-menu-option:hover,
.formbuilder-fieldset-menu-option.menu-option--highlighted {
  background: var(--blue-500);
}

.formbuilder-fieldset-menu-option--disabled,
.formbuilder-fieldset-menu-option--disabled-location-type,
.formbuilder-fieldset-menu-option--disabled-general,
.formbuilder-fieldset-menu-option--disabled-requires {
  color: #555;
  cursor: not-allowed;
}

.formbuilder-fieldset-menu-option--disabled:hover,
.formbuilder-fieldset-menu-option--disabled-location-type:hover,
.formbuilder-fieldset-menu-option--disabled-general:hover,
.formbuilder-fieldset-menu-option--disabled-requires:hover {
  background: transparent;
}

/* Fields Container */
.formbuilder-fields-container {
  width: 100%;
}

/* Field Rows */
.formbuilder-field {
  width: 100%;
  height: 36px;
  display: flex;
  align-items: center;
  padding: 0 0 0 10px;
  margin-bottom: 3px;
  background: #222;
  border: 1px solid #222222;
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
}

.formbuilder-field:hover {
  border-color: var(--blue-500);
}

.formbuilder-field-text {
  flex: 1;
  display: flex;
  align-items: center;
}

.formbuilder-field-required {
  display: none;
  color: #f87171;
  font-size: 8px;
  margin-left: 4px;
  flex-shrink: 0;
  vertical-align: middle;
}

.formbuilder-field-required--required {
  display: inline;
}

.formbuilder-field-drag {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.formbuilder-field-drag-icon {
  width: 16px;
  height: 16px;
  background-color: #888;
  -webkit-mask-image: var(--ui-icon-drag-handle);
  mask-image: var(--ui-icon-drag-handle);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.formbuilder-field-drag:hover .formbuilder-field-drag-icon {
  background-color: #fff;
}


.formbuilder-field-edit {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #888;
}

/* currentColor pattern (same as the category pencil above) so the parent's
   hover/editing color actually reaches the masked glyph. */
.formbuilder-field-edit-icon {
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask-image: var(--ui-icon-edit);
  mask-image: var(--ui-icon-edit);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.formbuilder-field-edit:hover {
  color: var(--blue-500);
}

.formbuilder-field-edit:hover .formbuilder-field-edit-icon,
.formbuilder-field-edit--editing .formbuilder-field-edit-icon {
  -webkit-mask-image: var(--ui-icon-edit-bold);
  mask-image: var(--ui-icon-edit-bold);
}


.formbuilder-field.dragging,
.formbuilder-field-wrapper.dragging {
  opacity: 0.5;
}

.formbuilder-field-wrapper {
  margin-bottom: 3px;
}

/* Location divider line - appears above location fieldset when location type is selected */
/* Fieldset group sublabels (PRIMARY / LOCATION SPECIFIC FIELDSETS) — same
   recipe as .formbuilder-iconpicker-sublabel, in capitals; 10px above (gap
   between elements), 6px below (label to its element). The location one ALSO
   carries .formbuilder-location-divider: that class is the container-lock
   marker the drag/insert logic queries, so the label element IS the divider
   now (operator 2026-07-08 — the 3px line is retired). */
.formbuilder-fieldsets-sublabel {
  display: block;
  font-size: 13px;
  color: #fff;
  text-transform: uppercase;
  margin-top: 10px;
  margin-bottom: 10px;
}

/* The body's own top padding (or the open edit panel) provides the spacing
   above the first group — the label adds none. Location label unaffected. */
.formbuilder-fields-container > .formbuilder-fieldsets-sublabel:first-child {
  margin-top: 0;
}

.formbuilder-field--editing {
  border-color: var(--blue-500);
  border-radius: 8px 8px 0 0;
  border-bottom: none;
  margin-bottom: 0;
}

.formbuilder-field-edit--editing {
  color: var(--blue-500);
}

/* Field Edit Panel */
.formbuilder-field-editpanel {
  display: none;
  padding: 10px;
  background: #111;
  border: 1px solid var(--blue-500);
  border-top: none;
  border-radius: 0 0 8px 8px;
}

.formbuilder-field-editpanel--editing {
  display: block;
}

.formbuilder-field-editpanel-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.formbuilder-field-editpanel-row:last-child {
  margin-bottom: 0;
}

.formbuilder-field-adminnote {
  margin-bottom: 10px;
  color: #bbb;
  font-size: 13px;
  line-height: 1.4;
}


.formbuilder-field-required-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 13px;
  cursor: pointer;
}

.formbuilder-field-required-checkbox {
  width: 18px;
  height: 18px;
  accent-color: var(--blue-500);
  cursor: pointer;
}

/* Field 3-dot menu: component-safetymenu (components.css/components.js) —
   layout only here: it hugs the right edge of the field edit row. */
.formbuilder-field-editpanel-row .component-safetymenu {
  margin-left: auto;
}

/* Field Inputs */
.formbuilder-field-input {
  width: 100%;
  height: 36px;
  padding: 0 10px;
  background: #222;
  border: 1px solid #222222;
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
  margin-bottom: 0;
  cursor: text;
  caret-color: #fff;
}

.formbuilder-field-input:hover,
.formbuilder-field-input:focus {
  outline: none;
  border-color: var(--blue-500);
}

.formbuilder-field-input::placeholder {
  color: #666;
}

.formbuilder-field-textarea {
  width: 100%;
  min-height: 60px;
  padding: 8px 10px;
  background: #222;
  color: #fff;
  font-size: 13px;
  resize: none;
  line-height: 1.4;
  margin-bottom: 0;
  cursor: text;
  caret-color: #fff;
  outline: none;
}

/* Border is drawn by the wrapper. Override the default wrapper colour to
   match the formbuilder palette (#222 instead of #333). Hover / focus
   states inherit from components.css. */
.component-textarearesize:has(.formbuilder-field-textarea) {
  border-color: #222222;
}

.formbuilder-field-textarea::placeholder {
  color: #666;
}

.formbuilder-field-label {
  display: block;
  color: #888;
  font-size: 11px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.formbuilder-field-label:first-child {
  margin-top: 0;
}

/* Field Options */
.formbuilder-field-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px;
  background: #0f0f0f;
  border: 1px solid #222222;
  border-radius: 8px;
  margin-bottom: 0;
}

.formbuilder-field-option-row {
  display: flex;
  gap: 6px;
  align-items: center;
}

.formbuilder-field-option-input {
  flex: 1;
  height: 36px;
  padding: 0 10px;
  background: #222;
  border: 1px solid #222222;
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
  cursor: text;
  caret-color: #fff;
}

.formbuilder-field-option-input:hover,
.formbuilder-field-option-input:focus {
  outline: none;
  border-color: var(--blue-500);
}

.formbuilder-field-option-input::placeholder {
  color: #666;
}

.formbuilder-field-option-remove,
.formbuilder-field-option-add {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #222;
  border: 1px solid #222222;
  border-radius: 8px;
  cursor: pointer;
}

.formbuilder-field-option-add-icon {
  width: 16px;
  height: 16px;
  background-color: #888;
  -webkit-mask-image: var(--ui-icon-plus);
  mask-image: var(--ui-icon-plus);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.formbuilder-field-option-remove-icon {
  width: 16px;
  height: 16px;
  background-color: #888;
  -webkit-mask-image: var(--ui-icon-minus);
  mask-image: var(--ui-icon-minus);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.formbuilder-field-option-remove:hover .formbuilder-field-option-remove-icon,
.formbuilder-field-option-add:hover .formbuilder-field-option-add-icon {
  background-color: #fff;
}

.formbuilder-field-option-remove:hover,
.formbuilder-field-option-add:hover {
  border-color: var(--blue-500);
}

/* Field Switches */
.formbuilder-field-switch-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.formbuilder-field-switch-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 13px;
  cursor: pointer;
  flex: 1;
}

.formbuilder-field-switch-label.disabled {
  color: #555;
  cursor: not-allowed;
}

/* Field toggle: uses component-switch with --on-default state */

/* Modify Section */
.formbuilder-field-modify-container {
  margin-top: 10px;
  padding-top: 10px;
}

.formbuilder-field-modify-button {
  width: 100%;
  height: 36px;
  margin-top: 10px;
  margin-bottom: 0;
  background: #222;
  border: 1px solid #222222;
  border-radius: 8px;
  color: #888;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.formbuilder-field-modify-button:hover {
  border-color: var(--blue-500);
  color: #fff;
}

.formbuilder-field-modify-button--open {
  border-color: var(--blue-500);
  color: #fff;
  background: rgba(59, 130, 246, 0.1);
}

.formbuilder-field-modify-button--modified {
  border-color: #FF8C00;
  color: #FF8C00;
  background: rgba(255, 140, 0, 0.1);
}

.formbuilder-field-modify-button--modified:hover {
  border-color: #FF8C00;
  color: #FF8C00;
  background: rgba(255, 140, 0, 0.2);
}

/* Modified label on fieldset - appears after indicators */
.formbuilder-field-modified-label {
  display: none;
  color: #FF8C00;
  font-size: 11px;
  font-weight: normal;
  margin-left: 6px;
}

.formbuilder-field-modified-label--modified {
  display: inline;
}

/* Ensure proper spacing and order */
.formbuilder-field-text {
  display: flex;
  align-items: center;
  gap: 3px;
}

.formbuilder-field-name {
  flex-shrink: 0;
}

.formbuilder-field-group-dot {
  display: inline;
  color: #3b82f6;
  font-size: 8px;
  margin-left: 4px;
  flex-shrink: 0;
  vertical-align: middle;
}

.formbuilder-field-required {
  flex-shrink: 0;
  margin-left: 0;
}

.formbuilder-field-indicators {
  flex-shrink: 0;
  margin-left: 10px;
}

.formbuilder-field-modified-label {
  margin-left: 10px;
}

/* Default text color for inputs */
.formbuilder-field-input {
  color: #fff;
}

/* Field Indicators */
.formbuilder-field-indicators {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 10px;
}

.formbuilder-field-indicator {
  font-size: 16px;
  color: var(--blue-500);
  display: none;
  line-height: 1;
}

/* Indicator classes removed - divider line now serves as visual indicator */

/* Fee Row */
.formbuilder-fee-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.formbuilder-fee-row-label {
  min-width: 120px;
  font-size: 13px;
  color: #fff;
}

.formbuilder-fee-percent {
  font-weight: 600;
  font-size: 13px;
  color: #888;
}

.formbuilder-fee-input {
  width: 100px;
  height: 36px;
  padding: 0 10px;
  background: #111111;
  border: 1px solid #222222;
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
  appearance: textfield;
  -moz-appearance: textfield;
  cursor: text;
  caret-color: #fff;
}

.formbuilder-fee-input::-webkit-inner-spin-button,
.formbuilder-fee-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.formbuilder-fee-input:hover,
.formbuilder-fee-input:focus {
  outline: none;
  border-color: var(--blue-500);
}

.formbuilder-fee-input::placeholder {
  color: #666;
}

.formbuilder-calculator-btn {
  height: 36px;
  padding: 0 12px;
  background: #ff6b35;
  border: 1px solid #ff6b35;
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  margin-left: 8px;
}

.formbuilder-calculator-btn:hover {
  background: #ff8555;
  border-color: #ff8555;
}

.formbuilder-calculator-btn:active {
  background: #e55a2a;
  border-color: #e55a2a;
}

.formbuilder-calculator-surcharge {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #333;
}

/* Type Row */
.formbuilder-type-row {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  margin-top: 10px;
}

.formbuilder-type-row-label {
  min-width: 120px;
  font-size: 13px;
  color: #fff;
}

.formbuilder-type-value {
  font-size: 13px;
  color: var(--blue-500);
}

.formbuilder-subcategory-colorhex-row {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  margin-top: 10px;
}

.formbuilder-subcategory-colorhex-swatch {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

.formbuilder-subcategory-colorhex-input {
  flex: 1;
  height: 36px;
  padding: 0 10px;
  background: #111111;
  border: 1px solid #222222;
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
  cursor: text;
  caret-color: #fff;
}

.formbuilder-subcategory-colorhex-input:hover,
.formbuilder-subcategory-colorhex-input:focus {
  outline: none;
  border-color: var(--blue-500);
}

.formbuilder-subcategory-colorhex-input::placeholder {
  color: #666;
}

.formbuilder-add-subcategory-buttons {
  display: flex;
  flex-direction: column;
}

.formbuilder-type-option {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.formbuilder-type-option-input {
  cursor: pointer;
  accent-color: var(--blue-500);
}

.formbuilder-type-option-text {
  font-size: 13px;
  color: #fff;
  cursor: pointer;
}

/* Checkout Options Editor */
.formbuilder-checkout-editor {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.formbuilder-checkout-label {
  font-size: 13px;
  color: #fff;
}

.formbuilder-checkout-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.formbuilder-checkout-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid #222222;
  border-radius: 8px;
  background: #111111;
}

.formbuilder-checkout-title {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}

.formbuilder-checkout-prices {
  display: flex;
  gap: 16px;
}

.formbuilder-checkout-price-item {
  font-size: 13px;
  color: #888;
}

.formbuilder-checkout-price-value {
  color: #fff;
  font-weight: 600;
}

.formbuilder-checkout-calculator {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #888;
}

.formbuilder-checkout-calc-input {
  width: 80px;
  height: 36px;
  padding: 0 10px;
  background: #222;
  border: 1px solid #222222;
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
  appearance: textfield;
  -moz-appearance: textfield;
  cursor: text;
  caret-color: #fff;
}

.formbuilder-checkout-calc-input::-webkit-inner-spin-button,
.formbuilder-checkout-calc-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.formbuilder-checkout-calc-input:hover,
.formbuilder-checkout-calc-input:focus {
  outline: none;
  border-color: var(--blue-500);
}

.formbuilder-checkout-calc-total {
  color: #fff;
  font-weight: 600;
}

.formbuilder-checkout-empty {
  color: #888;
  padding: 12px;
  text-align: center;
}

/* ============================================================================
   FORM PREVIEW MODAL
   Shows form as it appears to members
   ============================================================================ */

.formbuilder-formpreview-modal {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: var(--layer-modal, 90);
  display: flex;
  align-items: center;
  justify-content: center;
}

.formbuilder-formpreview-modal-container {
  width: 100%;
  height: 80%;
  background: #111;
  border: 1px solid var(--blue-500);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.formbuilder-formpreview-modal-header {
  height: 36px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  background: var(--blue-500);
  border-bottom: 1px solid var(--blue-500);
  flex-shrink: 0;
  position: sticky;
  top: 0;
}

.formbuilder-formpreview-modal-title {
  flex: 1;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}

.formbuilder-formpreview-modal-close {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #888;
  cursor: pointer;
}

.formbuilder-formpreview-modal-close:hover {
  border-color: var(--blue-500);
  color: #fff;
}

.formbuilder-formpreview-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
}

.fieldset--formbuilder-preview {
  margin-bottom: 10px;
}

.fieldset--formbuilder-preview:last-child {
  margin-bottom: 0;
}

/* ============================================================================
   FORM LOCATION MANAGER
   Centralized location container infrastructure for form building.
   This is the single source of truth for location-related UI components,
   used by both admin form preview and member-facing forms.
   ============================================================================ */

/* Form Primary Container - 30px to the branching line beneath it
   (operator 2026-09-11: the Posting Options line's own gap). */
.form-primary-container {
  margin-bottom: 30px;
}

/* When container is active/focused - blue border */
.member-checkout-container[data-active="true"] {
  border-color: var(--blue-500);
}

/* Location container. In the main form every location ends with the
   branching line (operator 2026-09-11: "not enough visual separation"):
   30px of air then the edge-to-edge rule, drawn by ::after with side
   bleed only (no top margins), 12px below to the next location. The
   Locations Modal keeps its 10px card rhythm (override below). */
.member-location-container {
  margin-bottom: 12px;
}
.member-location-container::after {
  content: '';
  display: block;
  height: 30px;
  border-bottom: 1px solid var(--border);
  margin: 0 -10px 0;
}
.postmanager-locations-modal-form .member-location-container {
  margin-bottom: 10px;
}
.postmanager-locations-modal-form .member-location-container::after {
  display: none;
}

/* Location header - 36px, horizontal flex, appearance from container-class-2 */
.member-postform-location-header {
  width: 100%;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 0 10px;
  cursor: pointer;
  font-size: 14px;
  user-select: none;
  box-sizing: border-box;
}

/* When container is active/focused - blue border */
.member-location-container[data-active="true"] > .member-postform-location-header {
  border-color: var(--blue-500);
}

.member-location-container[data-active="true"] > .member-postform-location-content {
  border-color: var(--blue-500);
}

/* Member form: do NOT expand the location content into a square wallpaper showcase
   when a container is clicked — keep it at natural content height. The shared
   `--active` rule (min-height: var(--locationwallpaper-minh)) still showcases the
   wallpaper in the post / recent / post-manager panels; this only switches it off
   in the form. Higher specificity (2 classes) overrides the generic single-class rule. */
.member-postform-location-content.component-locationwallpaper-content--active {
  min-height: 0;
}

/* Header text */
.member-postform-location-header-text {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 36px;
}

/* Right-side venue header controls */
.member-postform-location-header-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* The header's one control: the bare X (.clear-button, components.css
   ~59) in the header's own white (operator 2026-09-11). */
.member-postform-location-header-remove.clear-button {
  color: #fff;
}

/* "+ Add Location" - the Links "+ Add Link" button (fieldsets.css
   .fieldset-links-add); light twin in themes.css. */
/* Appearance from button-class-14 (base.css); layout only here. */
.member-postform-location-add {
  width: 100%;
  margin-bottom: 10px;
}

/* Location content — appearance from container-class-2. Always visible:
   the location container is no longer an accordion (the drop-down was
   removed once the heavy fieldsets — sessions / ticket-pricing /
   amenities — moved out into their own modals and the form became
   compact enough to read at a glance). */
.member-postform-location-content {
  display: block;
  padding: 10px 12px 10px 12px;
}

/* (LOCATION QUANTITY PICKER + placeholder-override mode CSS removed
   2026-09-08 — nothing built either since the +/− container buttons
   replaced the picker; the locations interface is final.) */

.formbuilder-formpreview-empty {
  color: #888;
  text-align: center;
  padding: 10px;
}

/* Category edit-panel: label that appears above each icon picker
   ("Category Icon" / "Expired Icon"). 6px between label and its target
   matches the platform spacing rule. */
.formbuilder-iconpicker-sublabel {
  display: block;
  font-size: 13px;
  color: #fff;
  margin-top: 10px;
  margin-bottom: 10px;
}

/* Hidden image holder for the category expired icon. The picker writes its
   src here and captureFormbuilderState reads it back at save time. The
   visible icon in the accordion header stays the regular Category Icon. */
.formbuilder-accordion-header-image-expired--hidden {
  display: none;
}