/* 
  Scoped Dark Theme Styling for Form Builder V2
  Modified to only target elements within the form builder panel
*/

:root {
  /* Base colors - these variables are fine as they don't apply styles directly */
  --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 - scoped to panel-content */
#panel-content *, 
#panel-content *::before, 
#panel-content *::after {
  box-sizing: border-box;
}

/* Removed global body/html styles to prevent interference */

/* Container styling - scoped to panel-content */
#panel-content .container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem;
}

/* Header - scoped to panel-content */
#panel-content header {
  margin-bottom: 2rem;
  text-align: center;
}

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

#panel-content h1 {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  background-color: var(--muted);
}

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

/* Layout - already scoped to form-layout which is inside panel-content */
.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 - these are already scoped */
#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 - Scoped to panel-content */
#panel-content .tab-container {
  display: flex;
  padding: 0.75rem 1rem 0;
  background-color: var(--card);
  border-bottom: 1px solid var(--border);
  gap: 0.5rem;
}

#panel-content .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;
}

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

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

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

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

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

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

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

#panel-content #rendered-form input[type="text"],
#panel-content #rendered-form input[type="email"],
#panel-content #rendered-form input[type="password"],
#panel-content #rendered-form input[type="number"],
#panel-content #rendered-form input[type="date"],
#panel-content #rendered-form select,
#panel-content #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;
}

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

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

/* Checkboxes and Radio buttons - Scoped to panel-content */
#panel-content #rendered-form input[type="checkbox"],
#panel-content #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;
}

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

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

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

#panel-content #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;
}

#panel-content #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 - Scoped to panel-content */
#panel-content #form-json-container {
  position: relative;
  flex-grow: 1;
  margin-top: 0.5rem;
}

#panel-content #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;
}

#panel-content .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;
}

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

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

/* Submit Button - Scoped to panel-content */
#panel-content .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;
}

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

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

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

/* Notification - Scoped to panel-content */
#panel-content .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;
}

#panel-content .notification.show {
  transform: translateY(0);
  opacity: 1;
}

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

@media (max-width: 576px) {
  #panel-content .container {
    padding: 1rem;
  }
  
  #panel-content .form-layout {
    gap: 1rem;
  }
  
  #panel-content .builder-column, 
  #panel-content .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;
}

/* 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;
}

/* 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;
}

/* 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: 99999;
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.notification.show {
  transform: translateY(0);
  opacity: 1;
  z-index: 99999;

}