/* 
  Dark Theme Styling for Form Builder V2
  Enhanced with all default elements and styles preserved
*/

:root {
  /* Base colors */
  --background: #09090B;
  --foreground: #FFFFFF;
  
  /* UI colors */
  --card: #111113;
  --card-foreground: #FFFFFF;
  --popover: #111113;
  --popover-foreground: #FFFFFF;
  
  /* Element colors */
  --primary: #6D28D9; /* Purple accent */
  --primary-foreground: #FFFFFF;
  --secondary: #27272A;
  --secondary-foreground: #FFFFFF;
  --muted: #1E1E20;
  --muted-foreground: #A1A1AA;
  
  /* Interactive states */
  --accent: #4C1D95; 
  --accent-foreground: #FFFFFF;
  --destructive: #EF4444;
  --destructive-foreground: #FFFFFF;
  
  /* Borders and shadows */
  --border: #27272A;
  --input: #27272A;
  --ring: #6D28D9;
  
  /* Other properties */
  --radius: 0.5rem;
  --shadow-color: rgba(0, 0, 0, 0.3);
  --shadow: 0 4px 12px var(--shadow-color);
}

/* Base styles */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
/* 
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  background-color: var(--background);
  color: var(--foreground);
  line-height: 1.5;
  font-size: 14px;
  font-weight: 400;
  padding: 0;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
} */

.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem;
}

/* Header */
header {
  margin-bottom: 2rem;
  text-align: center;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--foreground);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 1rem 0;
}

h1 {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.025em;
}

h2 {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}

/* Layout */
.form-layout {
  display: flex;
  gap: 1.5rem;
  margin-top: 1rem;
  height: calc(100vh - 150px);
  min-height: 600px;
}

.builder-column, 
.preview-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0; /* Prevents flex items from overflowing */
}

.section-header {
  background-color: var(--card);
  padding: 1rem;
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
  border: 1px solid var(--border);
  border-bottom: none;
}

.section-header h2 {
  margin: 0;
  font-size: 1.25rem;
}

.content-container {
  background-color: var(--card);
  border: 1px solid var(--border);
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
  box-shadow: var(--shadow);
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Form Builder Styles */
#form-builder {
  flex-grow: 1;
  padding: 1.5rem;
  overflow-y: auto;
}

/* Right-align form control elements */
.form-wrap.form-builder .frmb-control {
  float: right !important;
  text-align: right !important;
  padding-right: 0 !important;
  padding-left: 20px !important;
  margin-right: 0 !important;
  margin-left: 15px !important;
  border-right: none !important;
  border-left: 1px solid var(--border) !important;
}

.form-wrap.form-builder .frmb-control ul {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
}

.form-wrap.form-builder .stage-wrap {
  margin-right: 25px !important;
  margin-left: 0 !important;
  padding-right: 25px !important;
  padding-left: 0 !important;
}

/* Reset all borders first - extremely aggressive override for form builder elements */
.form-wrap.form-builder .frmb-control li,
.form-wrap.form-builder .frmb-control li *,
.form-wrap.form-builder .frmb > li,
.form-wrap.form-builder .frmb > li *,
.form-wrap.form-builder .frmb-control *,
.form-wrap.form-builder ul.frmb,
.form-wrap.form-builder .cb-wrap,
.form-wrap.form-builder .stage-wrap,
.form-wrap.form-builder .stage-wrap * {
  border: none !important; /* Remove all existing borders first */
  outline: none !important; /* Remove outlines that may look like borders */
  box-shadow: none !important; /* Remove box shadows that may look like borders */
}

/* Apply pill styles to control items */
.form-wrap.form-builder .frmb-control li {
  margin-bottom: 8px !important; /* Space between control items */
  padding: 10px 16px !important; /* More horizontal padding for pill shape */
  border-radius: 24px !important; /* Pill-shaped border radius */
  border: 1px solid #27272A !important; /* Grey border matching the form aesthetic - hardcoded color */
  overflow: hidden !important; /* Ensure content respects the border-radius */
  display: inline-block !important; /* Allow element to fit natural content width */
  width: auto !important; /* Let width be determined by content */
  min-width: 0 !important; /* Remove any min-width constraints */
  max-width: none !important; /* Remove any max-width constraints */
}

/* Make the elements in the drag area also have the same style - flexible width */
.form-wrap.form-builder .frmb > li {
  border-radius: 20px !important; /* Pill-shaped border radius for form fields */
  border: 1px solid #27272A !important; /* Grey border instead of white - hardcoded value */
  overflow: hidden !important;
  margin-bottom: 10px !important;
  background-color: var(--muted) !important;
}

/* Force all inner borders to be the right color */
.form-wrap.form-builder .frmb-control li::before,
.form-wrap.form-builder .frmb-control li::after,
.form-wrap.form-builder .frmb > li::before,
.form-wrap.form-builder .frmb > li::after,
.form-wrap.form-builder .frmb-control::before,
.form-wrap.form-builder .frmb-control::after {
  border-color: #27272A !important; 
}

/* Style all form controls to have consistent grey borders */
.form-wrap.form-builder .frmb-control {
  border-color: #27272A !important;
}

/* Style the control buttons to have consistent styling */
.frmb .field-actions .btn {
  border-radius: 12px !important;
  border-color: #27272A !important;
}

/* Enforce border color on all elements - with very high specificity */
.form-wrap.form-builder *,
.form-wrap.form-builder *::before, 
.form-wrap.form-builder *::after,
.form-wrap.form-builder div,
.form-wrap.form-builder li,
.form-wrap.form-builder ul,
.form-wrap.form-builder input,
.form-wrap.form-builder select,
.form-wrap.form-builder button {
  border-color: #27272A !important;
}

/* Additional style to handle special case elements that might need explicit borders */
.form-wrap.form-builder .formbuilder-icon-text,
.form-wrap.form-builder .formbuilder-icon-textarea,
.form-wrap.form-builder .formbuilder-icon-number,
.form-wrap.form-builder .formbuilder-icon-select,
.form-wrap.form-builder .formbuilder-icon-radio-group,
.form-wrap.form-builder .formbuilder-icon-checkbox-group,
.form-wrap.form-builder .formbuilder-icon-date,
.form-wrap.form-builder .formbuilder-icon-header,
.form-wrap.form-builder .formbuilder-icon-paragraph,
.form-wrap.form-builder .formbuilder-icon-autocomplete,
.form-wrap.form-builder .formbuilder-icon-file {
  border: 1px solid #27272A !important;
  border-radius: 24px !important;
}

/* Override jQuery Form Builder styles */
.form-wrap.form-builder {
  background-color: var(--card) !important;
}

.form-wrap.form-builder .frmb {
  background-color: var(--card) !important;
  border-color: var(--border) !important;
  color: var(--foreground) !important;
}

.form-wrap.form-builder .frmb li {
  background-color: var(--muted) !important;
  border-color: var(--border) !important;
  transition: all 0.2s ease;
}

.form-wrap.form-builder .frmb li:hover {
  box-shadow: 0 0 0 1px var(--primary) !important;
}

.form-wrap.form-builder .frmb .field-label {
  color: var(--foreground) !important;
}

.form-wrap.form-builder .frmb .prev-holder {
  color: var(--foreground) !important;
}

.form-wrap.form-builder .frmb .frm-holder {
  border-color: var(--border) !important;
}

.form-wrap.form-builder .frmb-control li {
  background-color: var(--muted) !important;
  border-color: var(--border) !important;
  color: var(--foreground) !important;
  transition: all 0.2s ease;
}

.form-wrap.form-builder .frmb-control li:hover {
  background-color: var(--card) !important;
}

.form-wrap.form-builder .frmb-control li span {
  color: var(--foreground) !important;
}

.form-wrap.form-builder .frmb-control li::before {
  background-color: var(--primary) !important;
  color: var(--primary-foreground) !important;
}

.form-wrap.form-builder .frmb .form-elements {
  background-color: var(--muted) !important;
  border-color: var(--border) !important;
}

.form-wrap.form-builder .frmb .form-elements .input-wrap,
.form-wrap.form-builder .frmb .form-elements .false-label, 
.form-wrap.form-builder .frmb .form-elements label {
  color: var(--foreground) !important;
}

.form-wrap.form-builder .frmb .form-elements input,
.form-wrap.form-builder .frmb .form-elements select,
.form-wrap.form-builder .frmb .form-elements textarea {
  background-color: var(--card) !important;
  border: 1px solid var(--border) !important;
  color: var(--foreground) !important;
  transition: border-color 0.2s ease;
}

.form-wrap.form-builder .frmb .form-elements input:focus,
.form-wrap.form-builder .frmb .form-elements select:focus,
.form-wrap.form-builder .frmb .form-elements textarea:focus {
  border-color: var(--primary) !important;
  outline: none;
  box-shadow: 0 0 0 2px rgba(109, 40, 217, 0.2) !important;
}

.form-wrap.form-builder .frmb .field-actions .btn,
.form-wrap.form-builder .frmb-control .formbuilder-mobile,
.form-wrap.form-builder .frmb-control .formbuilder-desktop {
  background-color: var(--secondary) !important;
  color: var(--secondary-foreground) !important;
  border: none !important;
  border-radius: var(--radius) !important;
  transition: all 0.2s ease;
}

.form-wrap.form-builder .frmb .field-actions .btn:hover,
.form-wrap.form-builder .frmb-control .formbuilder-mobile:hover,
.form-wrap.form-builder .frmb-control .formbuilder-desktop:hover {
  background-color: var(--primary) !important;
}

/* Tabs */
.tab-container {
  display: flex;
  padding: 0.75rem 1rem 0;
  background-color: var(--card);
  border-bottom: 1px solid var(--border);
  gap: 0.5rem;
}

.tab {
  background-color: transparent;
  color: var(--muted-foreground);
  border: 1px solid transparent;
  padding: 0.5rem 1rem;
  cursor: pointer;
  font-weight: 500;
  font-size: 0.875rem;
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
  transition: all 0.2s ease;
  outline: none;
  margin-bottom: -1px;
}

.tab:hover {
  color: var(--foreground);
  background-color: rgba(255, 255, 255, 0.03);
}

.tab.active {
  color: var(--foreground);
  background-color: var(--card);
  border-color: var(--border);
  border-bottom-color: var(--card);
}

/* Tab Content */
.tab-content {
  display: none;
  flex: 1;
  padding: 1rem;
  overflow-y: auto;
}

.tab-content.active {
  display: flex;
  flex-direction: column;
}

/* Form Preview */
#rendered-form {
  flex-grow: 1;
  padding: 1rem;
  color: var(--foreground);
}

#rendered-form form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

#rendered-form label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
  color: var(--foreground);
}

#rendered-form input[type="text"],
#rendered-form input[type="email"],
#rendered-form input[type="password"],
#rendered-form input[type="number"],
#rendered-form input[type="date"],
#rendered-form select,
#rendered-form textarea {
  width: 100%;
  padding: 0.5rem 0.75rem;
  background-color: var(--muted);
  color: var(--foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.875rem;
  line-height: 1.5;
  transition: all 0.15s ease;
  font-family: inherit;
}

#rendered-form input:focus,
#rendered-form select:focus,
#rendered-form textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(109, 40, 217, 0.2);
}

#rendered-form input::placeholder {
  color: var(--muted-foreground);
}

/* Checkboxes and Radio buttons */
#rendered-form input[type="checkbox"],
#rendered-form input[type="radio"] {
  appearance: none;
  width: 1rem;
  height: 1rem;
  border: 1px solid var(--border);
  background-color: var(--muted);
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.5rem;
  position: relative;
  transition: all 0.15s ease;
}

#rendered-form input[type="checkbox"] {
  border-radius: 0.25rem;
}

#rendered-form input[type="radio"] {
  border-radius: 50%;
}

#rendered-form input[type="checkbox"]:checked,
#rendered-form input[type="radio"]:checked {
  background-color: var(--primary);
  border-color: var(--primary);
}

#rendered-form input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0.5rem;
  height: 0.5rem;
  background-color: white;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  mask-size: cover;
  -webkit-mask-size: cover;
}

#rendered-form input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: white;
}

/* JSON Display */
#form-json-container {
  position: relative;
  flex-grow: 1;
  margin-top: 0.5rem;
}

#form-json {
  width: 100%;
  height: 100%;
  overflow: auto;
  border-radius: var(--radius);
  background-color: var(--muted);
  padding: 1rem;
  margin: 0;
  font-family: "JetBrains Mono", "Fira Code", "Menlo", monospace;
  font-size: 0.875rem;
  line-height: 1.5;
}

.copy-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  padding: 0.25rem 0.75rem;
  background-color: var(--secondary);
  color: var(--secondary-foreground);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: background-color 0.2s ease;
  z-index: 10;
}

.copy-btn:hover {
  background-color: var(--primary);
}

.copy-btn svg {
  width: 1rem;
  height: 1rem;
}

/* Submit Button */
.submit-btn {
  background-color: var(--primary);
  color: var(--primary-foreground);
  border: none;
  border-radius: var(--radius);
  padding: 0.5rem 1rem;
  cursor: pointer;
  font-weight: 500;
  font-size: 0.875rem;
  transition: all 0.2s ease;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.5rem;
  min-width: 8rem;
}

.submit-btn:hover {
  background-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.submit-btn:active {
  transform: translateY(0);
}

.submit-container {
  margin-top: 1.5rem;
  display: flex;
  justify-content: center;
}

/* Notification */
.notification {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  background-color: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  box-shadow: var(--shadow);
  padding: 1rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
  z-index: 1000;
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.notification.show {
  transform: translateY(0);
  opacity: 1;
}

/* Responsive Layout */
@media (max-width: 992px) {
  .form-layout {
    flex-direction: column;
    height: auto;
  }
  
  .builder-column, 
  .preview-column {
    min-height: 500px;
  }
}

@media (max-width: 576px) {
  .container {
    padding: 1rem;
  }
  
  .form-layout {
    gap: 1rem;
  }
  
  .builder-column, 
  .preview-column {
    min-height: 400px;
  }
}

/* Style the action buttons (clear, data, save) */
.form-builder-clear,
.form-builder-data,
.form-builder-save,
button.form-builder-clear,
button.form-builder-data,
button.form-builder-save {
  /* Base styling */
  display: inline-block !important;
  padding: 10px 25px !important;
  margin: 10px !important;
  border-radius: 12px !important; /* High border radius for pill shape */
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  text-transform: capitalize !important;
  
  /* Colors */
  background: linear-gradient(45deg, #36383F, #4a4c53) !important;
  color: white !important;
  border: none !important;
  
  /* Effects */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  overflow: hidden !important;
  
  /* Center the button */
  text-align: center !important;
  align-self: center !important;
  width: auto !important;
  min-width: 120px !important;
}

/* Hover effect */
.form-builder-clear:hover,
.form-builder-data:hover,
.form-builder-save:hover {
  background: linear-gradient(45deg, #4a4c53, #5d5f68) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4) !important;
  transform: translateY(-2px) !important;
}

/* Active/press effect */
.form-builder-clear:active,
.form-builder-data:active,
.form-builder-save:active {
  background: linear-gradient(45deg, #313238, #404249) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
  transform: translateY(1px) !important;
}

/* Container styling to ensure proper centering */
.form-actions {
  display: flex !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  padding: 10px 0 !important;
  width: 100% !important;
}

/* Fix for white text on white background in input fields */
.form-wrap.form-builder .frmb .form-elements .input-wrap input,
.form-wrap.form-builder .frmb .form-elements .input-wrap textarea,
.form-wrap.form-builder .frmb .form-elements .input-wrap select,
.form-wrap.form-builder .form-field input,
.form-wrap.form-builder .form-field select,
.form-wrap.form-builder .form-field textarea,
.form-wrap.form-builder .frmb .form-field input[type="text"],
.form-wrap.form-builder .frmb .form-field-label input,
.form-wrap.form-builder input.form-field-label,
.form-wrap.form-builder .field-label input,
.form-wrap.form-builder .text-input,
.form-wrap.form-builder .text-area {
  background-color: var(--muted) !important;
  color: var(--foreground) !important;
  border: 1px solid var(--border) !important;
  padding: 8px 12px !important;
}

/* Very aggressive targeting for label fields with !important to override any inline styles */
.form-wrap.form-builder [name="label"],
.form-wrap.form-builder input[name="label"],
.form-wrap.form-builder .field-label,
.form-wrap.form-builder .field-label input,
.form-wrap.form-builder .form-group input[type="text"],
.form-wrap.form-builder .form-elements [placeholder*="Label"],
.form-wrap.form-builder .input-wrap input[data-label],
.form-wrap.form-builder .input-label,
.form-wrap.form-builder .input-label input {
  background-color: var(--muted) !important;
  color: var(--foreground) !important;
  border: 1px solid var(--border) !important;
}

/* Fix for option buttons that have white text on white background */
.field-options button.add-opt,
.field-options .add,
.field-options-wrap .add-opt,
.field-options-wrap .add {
  background-color: var(--primary) !important;
  color: var(--primary-foreground) !important;
  border-color: var(--primary) !important;
  border-radius: 6px !important;
  padding: 5px 10px !important;
}

/* Fix for any other buttons in the form editor */
.form-wrap.form-builder button,
.form-wrap.form-builder .btn,
.form-wrap.form-builder input[type="button"] {
  background-color: var(--secondary) !important;
  color: var(--secondary-foreground) !important;
  border-color: transparent !important;
}

/* Fix table borders for checkbox/radio group options - ultra-aggressive targeting */
.form-wrap.form-builder .frmb .field-options-wrap table,
.form-wrap.form-builder .frmb .field-options table,
.form-wrap.form-builder .frmb .options-table,
.form-wrap.form-builder table.field-options,
.form-wrap.form-builder table.options-wrapper,
.form-wrap.form-builder table.option-wrapper,
.form-wrap.form-builder table.option-table,
.form-wrap.form-builder table,
.form-wrap.form-builder .form-elements table,
.form-wrap.form-builder .cb-wrap table,
table[class*='option'],
div[class*='option'] table {
  border: 1px solid var(--border) !important;
  border-collapse: collapse !important;
  background-color: var(--muted) !important;
}

/* Apply to all table cells and any possible container */
.form-wrap.form-builder .frmb .field-options-wrap table td,
.form-wrap.form-builder .frmb .field-options table td,
.form-wrap.form-builder .frmb .options-table td,
.form-wrap.form-builder table.field-options td,
.form-wrap.form-builder table.options-wrapper td,
.form-wrap.form-builder table.option-wrapper td,
.form-wrap.form-builder table.option-table td,
.form-wrap.form-builder .frmb .field-options-wrap table th,
.form-wrap.form-builder .frmb .field-options table th,
.form-wrap.form-builder .frmb .options-table th,
.form-wrap.form-builder table.field-options th,
.form-wrap.form-builder table.options-wrapper th,
.form-wrap.form-builder table.option-wrapper th,
.form-wrap.form-builder table.option-table th,
.form-wrap.form-builder table td,
.form-wrap.form-builder table th,
.form-wrap.form-builder tr,
.form-wrap.form-builder th,
.form-wrap.form-builder td,
table[class*='option'] td,
table[class*='option'] th,
div[class*='option'] table td,
div[class*='option'] table th,
.form-elements table td,
.form-elements table th,
table[id*='option'] td,
table[id*='option'] th {
  border: 1px solid var(--border) !important;
  padding: 8px !important;
  background-color: var(--muted) !important;
  color: var(--foreground) !important;
}

/* Force all table elements to have proper background EXCEPT buttons */
.form-wrap.form-builder div[class*='field-options'] *:not(button):not(.add):not(.add-opt),
.form-wrap.form-builder div[class*='options'] *:not(button):not(.add):not(.add-opt) {
  background-color: var(--muted) !important;
  color: var(--foreground) !important;
  border-color: var(--border) !important;
}

/* Special styling for option inputs */
input.option,
input[class*='option'],
.option input,
.option-value,
.option-label {
  border-color: var(--border) !important;
  background-color: var(--muted) !important;
  color: var(--foreground) !important;
}

/* Enhanced Save Button Styling */
.form-builder-save,
button.form-builder-save,
button.fb-button.form-builder-save,
.save-template,
.btn.btn-primary.save-template,
button.btn.btn-primary.save-template {
  /* Increased size */
  display: block !important;
  padding: 15px 38px !important;
  margin: 20px auto !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  min-width: 180px !important;
  
  /* More attractive styling */
  background: linear-gradient(45deg, var(--primary), var(--accent)) !important;
  border-radius: 30px !important; /* More rounded corners */
  box-shadow: 0 4px 20px rgba(109, 40, 217, 0.3) !important;
  
  /* Better positioning */
  letter-spacing: 0.5px !important;
  text-transform: capitalize !important;
  color: white !important;
  border: none !important;
  text-align: center !important;
  align-self: center !important;
  width: auto !important;
  position: relative !important;
  z-index: 1 !important;
  
  /* Enhanced transitions */
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  overflow: hidden !important;
}

/* Improved hover effects */
.form-builder-save:hover,
button.form-builder-save:hover,
button.fb-button.form-builder-save:hover,
.save-template:hover,
.btn.btn-primary.save-template:hover,
button.btn.btn-primary.save-template:hover {
  transform: translateY(-3px) scale(1.05) !important;
  box-shadow: 0 8px 25px rgba(109, 40, 217, 0.5) !important;
  background: linear-gradient(45deg, #8047e1, var(--primary)) !important;
}

/* Glow effect on hover */
.form-builder-save:hover::after,
button.form-builder-save:hover::after,
button.fb-button.form-builder-save:hover::after,
.save-template:hover::after,
.btn.btn-primary.save-template:hover::after,
button.btn.btn-primary.save-template:hover::after {
  content: '' !important;
  position: absolute !important;
  top: -2px !important;
  left: -2px !important;
  right: -2px !important;
  bottom: -2px !important;
  background: linear-gradient(45deg, var(--primary), var(--accent)) !important;
  z-index: -1 !important;
  filter: blur(15px) !important;
  opacity: 0.6 !important;
  border-radius: 32px !important;
}

/* Enhanced active state */
.form-builder-save:active,
button.form-builder-save:active,
button.fb-button.form-builder-save:active,
.save-template:active,
.btn.btn-primary.save-template:active,
button.btn.btn-primary.save-template:active {
  transform: translateY(1px) scale(0.98) !important;
  box-shadow: 0 3px 10px rgba(109, 40, 217, 0.4) !important;
  background: linear-gradient(45deg, #6824d0, #4C1D95) !important;
}