/* css/admin/wpforms-builder.css */

/* Memberstack Field Styles */
.wpforms-field-memberstack {
  position: relative;
}

.wpforms-field-memberstack::before {
  content: "MS";
  position: absolute;
  top: 0;
  right: 0;
  background: #2271b1;
  color: white;
  padding: 2px 6px;
  font-size: 10px;
  border-radius: 3px;
  opacity: 0.7;
}

/* Password Strength Meter */
.password-strength-meter {
  margin-top: 8px;
  padding: 4px 8px;
  border-radius: 3px;
  font-size: 12px;
  transition: all 0.3s ease;
}

.password-strength-meter[data-strength="0"] {
  background: #f44336;
  color: white;
}

.password-strength-meter[data-strength="1"] {
  background: #ff9800;
  color: white;
}

.password-strength-meter[data-strength="2"] {
  background: #ffc107;
  color: black;
}

.password-strength-meter[data-strength="3"] {
  background: #4caf50;
  color: white;
}

.password-strength-meter[data-strength="4"] {
  background: #2e7d32;
  color: white;
}

/* Custom Field Styles */
.wpforms-field-option-memberstack-custom .memberstack-field-id {
  font-family: monospace;
  padding: 8px;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
}

/* Form Type Dependent Styling */
.wpforms-builder .wpforms-field.hidden {
  display: none;
}

/* Memberstack Settings Panel */
.wpforms-builder .wpforms-panel-content-section-memberstack {
  padding: 0 30px;
}

.wpforms-builder .memberstack-settings-group {
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid #e6e9ec;
}

.wpforms-builder .memberstack-settings-group:last-child {
  border-bottom: none;
}

/* Field Icons */
.wpforms-field-option-group-memberstack .wpforms-add-fields-button::before {
  font-family: "Font Awesome 5 Free";
  margin-right: 8px;
}

.wpforms-add-fields-button.wpforms-field-memberstack-email::before {
  content: "\f0e0";
}

.wpforms-add-fields-button.wpforms-field-memberstack-password::before {
  content: "\f023";
}

.wpforms-add-fields-button.wpforms-field-memberstack-custom::before {
  content: "\f1b2";
}

/* Validation States */
.wpforms-field-memberstack.has-error .memberstack-field-id {
  border-color: #dc3545;
}

.wpforms-field-memberstack.has-success .memberstack-field-id {
  border-color: #28a745;
}

/* Tooltips */
.wpforms-field-option-memberstack .wpforms-help-tooltip {
  color: #666;
  margin-left: 8px;
}

/* Responsive Styles */
@media screen and (max-width: 782px) {
  .wpforms-builder .wpforms-panel-content-section-memberstack {
    padding: 0 15px;
  }

  .wpforms-field-option-memberstack .wpforms-help-tooltip {
    display: block;
    margin: 5px 0 0;
  }
}