.griffinforms-logic-summary-code {
  font-family: var(--bs-font-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace);
}


.griffinforms-logic-editor-container {
  display: flex;
  gap: 0;
}

.griffinforms-logic-edit-highlight {
  animation: griffinforms-edit-pulse 1.4s ease-in-out infinite;
}

@keyframes griffinforms-edit-pulse {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-1px);
  }
  100% {
    transform: translateY(0);
  }
}

.griffinforms-logic-list-wrapper {
  max-height: 600px;
  overflow-y: auto;
  padding-right: 15px;
}

.griffinforms-logic-editor-wrapper {
  width: 100%;
  transition: width 0.3s ease;
  padding-right: 1rem;
}

.griffinforms-condition-group-condition,
.griffinforms-logic-editor-actions-wrapper {
  max-height: 400px;
  overflow-y: auto;
  padding-right: 0.75rem;
}

.griffinforms-editor-shrink {
  width: 60% !important;
}

.griffinforms-logic-subeditor-wrapper {
  width: 40%;
  display: block;
}

.griffinforms-logic-subeditor-block-condition.is-empty .griffinforms-logic-subeditor-connector,
.griffinforms-logic-subeditor-block-action.is-empty .griffinforms-logic-subeditor-connector {
  display: none;
}

.griffinforms-logic-list-wrapper.is-loading .griffinforms-logic-rule-item,
.griffinforms-logic-list-wrapper.is-loading .griffinforms-logic-rules-empty-wrapper {
  display: none;
}

.griffinforms-logic-rule-placeholder {
  min-height: 60px;
}

.griffinforms-logic-entry-placeholder {
  min-height: 52px;
}

.griffinforms-logic-subeditor-overlay {
  min-width: 18rem;
  max-width: 20rem;
  z-index: 30;
}

.griffinforms-logic-subeditor-overlay pre {
  white-space: pre-wrap;
  word-break: break-word;
}

.griffinforms-logic-subeditor-wrapper.d-none {
  display: none !important;
}

.griffinforms-add-rule-slab,
.griffinforms-add-condition-slab,
.griffinforms-add-action-slab {
  cursor: pointer;
  border-style: dashed;
  transition: background-color 0.2s ease;
}

.griffinforms-add-rule-slab:hover,
.griffinforms-add-condition-slab:hover,
.griffinforms-add-action-slab:hover {
  background-color: #f6f6f6;
}


.griffinforms-logic-subeditor-control-wrapper {
  margin: 0.75rem 0;
}

.griffinforms-logic-subeditor-label {
  font-size: 11px;
  font-weight: 500;
  margin-bottom: 6px;
}

.griffinforms-logic-subeditor-control {
  width: 260px;
  max-width: 100%;
  margin: 0 auto;
  display: block;
  min-width: 260px !important;
  border: 1.5px solid #eee !important;
  font-size: 12px !important;
}

textarea.griffinforms-logic-subeditor-control,
textarea.griffinforms-condition-input,
textarea.griffinforms-action-input {
  min-height: 140px;
  resize: vertical;
  line-height: 1.4;
  padding: 0.75rem;
  border-color: #eee;
}

.griffinforms-logic-subeditor-overlay-body .griffinforms-logic-subeditor-control {
  width: 100%;
}

.griffinforms-logic-subeditor-connector {
  position: relative;
  display: block;
  text-align: center;
  margin: 6px auto;
  color: var(--gf-color-primary-light);
  width: 18px;
  height: 32px;
  overflow: hidden;
}

.griffinforms-logic-subeditor-connector-shaft {
  width: 18px;
  height: 32px;
  display: block;
}

.griffinforms-logic-subeditor-connector-tip {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 32px;
  animation: griffinforms-connector-flow var(--connector-duration, 2.4s) linear 1;
  animation-delay: var(--connector-delay, 0s);
  animation-play-state: paused;
}

.griffinforms-logic-subeditor-connector-fallback {
  font-size: 24px;
  line-height: 32px;
}

.griffinforms-logic-subeditor-connector-tip.is-active {
  animation-play-state: running;
}

@keyframes griffinforms-connector-flow {
  0% {
    top: -110%;
  }
  50% {
    top: 0;
  }
  100% {
    top: 115%;
  }
}

.griffinforms-logic-placeholder-line {
  height: 12px;
  display: block;
}

.griffinforms-logic-subeditor-actions .gf-btn {
  margin: 0 6px;
  min-width: 100px;
}

.griffinforms-option-groups-control {
  max-width: 60%;
  margin-left: 20%;
  max-height: 12rem;
  overflow-y: auto;
  padding-right: 0.75rem;
}

.griffinforms-option-groups-control .options-group-item {
  margin: 0 0 0.25rem;
}

/* ========== Back Button (Conditional Logic) ========== */

.griffinforms-logic-back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: transparent;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    font-size: 0.9rem;
    color: #3a3f45;
    cursor: pointer;
    transition: all 0.2s ease;
}

.griffinforms-logic-back:hover {
    background-color: rgba(138, 43, 226, 0.08);
    border-color: blueviolet;
    color: blueviolet;
}

.griffinforms-logic-back-icon {
    display: inline-block;
    font-size: 1rem;
    line-height: 1;
}

.griffinforms-logic-back-text {
    font-weight: 500;
}