/*
 * Multi-select with checkboxes and macro-areas (assets/js/multiselect.js).
 * Adapted from the "pbms" styles pasted next to each Elementor form. The trigger
 * takes the field look from the form styles in style.css (section 10).
 */
.pbms {
  --pbms-accent:      #111;                 /* focus outline and search border */
  --pbms-primary:     #18517C;              /* checkboxes and "Save" button */
  --pbms-invalid:     #c02b0a;              /* Gravity Forms error border */
  --pbms-panel-bg:    #fff;
  --pbms-panel-text:  #1f2124;
  --pbms-border:      rgba(0, 0, 0, .14);
  --pbms-hover:       rgba(0, 0, 0, .05);
  --pbms-group-bg:    rgba(0, 0, 0, .035);
  --pbms-radius:      6px;
  --pbms-max-height:  320px;

  position: relative;
  width: 100%;
  flex: 1 1 100%;
}
.pbms [hidden] { display: none !important; }

/* The native select stays in the form (submitted data, validation) but is not visible. */
.pbms-host { position: relative; }
.pbms-host select.pbms-native {
  position: absolute !important; left: 0; bottom: 0;
  width: 100% !important; height: 1px !important; min-height: 0 !important;
  padding: 0 !important; margin: 0 !important; border: 0 !important;
  opacity: 0 !important; pointer-events: none !important;
}

/* Trigger */
.pbms .pbms__trigger {
  display: flex; align-items: center; gap: 10px;
  cursor: pointer; user-select: none; text-align: left;
}
.pbms .pbms__value {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.pbms .pbms__value.is-placeholder { opacity: .6; }
.pbms .pbms__caret {
  flex: 0 0 auto; width: 8px; height: 8px; margin: -4px 2px 0 0;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .2s ease; opacity: .7;
}
.pbms.is-open .pbms__caret { transform: rotate(-135deg); margin-top: 4px; }
.pbms .pbms__trigger:focus-visible { outline: 2px solid var(--pbms-accent); outline-offset: 2px; }

/* Same red border Gravity Forms gives the other fields after a failed validation. */
.gfield_error .pbms .pbms__trigger { border-color: var(--pbms-invalid); }

/* Panel */
.pbms .pbms__panel {
  position: absolute; z-index: 999; top: calc(100% + 6px); left: 0; right: 0;
  min-width: min(280px, calc(100vw - 32px));
  background: var(--pbms-panel-bg); color: var(--pbms-panel-text);
  border: 1px solid var(--pbms-border); border-radius: var(--pbms-radius);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .12);
  font-size: 15px; line-height: 1.35; overflow: hidden;
}
.pbms.pbms--align-right .pbms__panel { left: auto; }
.pbms .pbms__search { padding: 10px; border-bottom: 1px solid var(--pbms-border); }
.pbms .pbms__search input {
  width: 100%; margin: 0; padding: 8px 10px; font: inherit; color: inherit;
  background: transparent; border: 1px solid var(--pbms-border); border-radius: calc(var(--pbms-radius) - 2px);
  box-shadow: none; min-height: 0;
}
.pbms .pbms__search input:focus { outline: none; border-color: var(--pbms-accent); }
.pbms .pbms__list { max-height: var(--pbms-max-height); overflow-y: auto; overscroll-behavior: contain; padding: 6px 0; }
.pbms .pbms__group + .pbms__group, .pbms .pbms__opt + .pbms__group { margin-top: 4px; }

.pbms .pbms__opt {
  display: flex; align-items: center; gap: 10px;
  margin: 0; padding: 7px 14px; cursor: pointer;
  font-size: inherit; font-weight: 400; color: inherit; line-height: inherit;
}
.pbms .pbms__opt:hover { background: var(--pbms-hover); }
.pbms .pbms__opt input[type="checkbox"] {
  flex: 0 0 auto; width: 16px; height: 16px; margin: 0; cursor: pointer;
  accent-color: var(--pbms-primary);
}
.pbms .pbms__opt--group { font-weight: 600; background: var(--pbms-group-bg); }
.pbms .pbms__opt--group:hover { background: var(--pbms-hover); }
.pbms .pbms__children .pbms__opt { padding-left: 40px; }
.pbms .pbms__empty { padding: 12px 14px; opacity: .6; }

.pbms .pbms__footer {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 8px 10px; border-top: 1px solid var(--pbms-border);
}
.pbms .pbms__panel .pbms__btn,
.pbms .pbms__panel .pbms__btn:hover,
.pbms .pbms__panel .pbms__btn:focus {
  margin: 0; padding: 6px 10px; min-height: 0; width: auto;
  font: inherit; font-size: 14px; line-height: 1.2; font-weight: 500; text-transform: none; letter-spacing: 0;
  color: var(--pbms-panel-text); background: transparent; border: 0; border-radius: 4px; box-shadow: none;
  cursor: pointer;
}
.pbms .pbms__panel .pbms__btn:hover { background: var(--pbms-hover); }
.pbms .pbms__panel .pbms__btn--primary,
.pbms .pbms__panel .pbms__btn--primary:hover,
.pbms .pbms__panel .pbms__btn--primary:focus { color: var(--pbms-panel-bg); background: var(--pbms-primary); }
.pbms .pbms__panel .pbms__btn:focus-visible { outline: 2px solid var(--pbms-accent); outline-offset: 2px; }