// Form style 
.simple-form-container {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  background-color: #f9f9f9;
  border-radius: 5px;
  position: relative;

  .text-fields {
    display: flex;
    flex-direction: column;
    z-index: 5;
  }
}

.simple_form_container {
  position: relative;
}

/* Style for labels */
label {
  display: block;
  margin-bottom: 5px;
  font-weight: unset;
}

/* Style for text, number, email, and hidden inputs */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="hidden"],
textarea,
input[type="range"] {
  width: auto;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
}

form input[type=number] {
  max-width: auto;
}

/* Style for select inputs */
select {
  width: 98%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
  background-color: #fff;
}

/* Style for file inputs */
input[type="file"] {
  width: 100%;
  margin-bottom: 10px;
}

/* Style for checkboxes and radio buttons */
input[type="checkbox"],
input[type="radio"] {
  margin-right: 5px;
}

/* Style for submit button */
.submit-button {
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 7px 20px;
  cursor: pointer;
  font-size: 16px;
  height: 38px;
  align-items: center;
  transition: all 0.3s ease-in-out;
}

.text-fields-insider {
  display: flex;
  align-items: center;
}

.submit-button:hover {
  background-color: #0056b3;
}

.submit-button.theme-2 {
  background-color: #f8f9fa;
  color: #212529;
  border: 1px solid #b2c0cd;

  &:hover {
    background-color: #cfe2f5;
    color: #191e24;
    border: 1px solid #b2c0cd;
  }
}

.submit-button.theme-3 {
  background-color: #2c3e50;
  color: #ecf0f1;

  &:hover {
    background-color: #e74c3c;
    color: #ffffff;
  }

}

.submit-button.theme-4 {
  background-color: #f5f6fa;
  color: #2c3e50;
  border: 1px solid #3498db;

  &:hover {
    background-color: #3498db;
    color: #ffffff;
    border: 1px solid #3498db;
  }

}

.submit-button.theme-5 {
  background-color: #1e1e2f;
  color: #ecf0f1;

  &:hover {
    background-color: #a177f8;
    color: #ffffff;

  }

}

.submit-button.theme-6 {
  background-color: #e6eef9;
  color: #2d3436;
  border: 1px solid transparent;

  &:hover {
    background-color: #e6eef9;
    color: #3498db;
    border: 1px solid #3498db;
  }
}

.submit-button.theme-7 {
  background-color: #121212;
  color: #ffffff;

  &:hover {
    background-color: #028191;
    color: #ffffff;
  }
}

/* Style for error messages (customize as needed) */
.error-message {
  color: red;
  font-size: 14px;
  margin-top: 5px;
}



// Toogle button 
.simple-form-checkbox-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
}

.switch-label {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.switch-input {
  position: absolute;
  opacity: 0;
  height: 0;
  width: 0;
}

.slider {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
  background-color: #ccc;
  border-radius: 20px;
  transition: background-color 0.4s;
}

.slider.round {
  border-radius: 20px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.4s;
}

.switch-input:checked+.slider {
  background-color: #2196F3;
}

.switch-input:checked+.slider:before {
  transform: translateX(20px);
}

// END 

.simple_form_content .text-fields {
  display: flex;
  flex-direction: column;
  margin-top: 5px;
  overflow: hidden;
  z-index: 5;

  audio {
    width: auto;
  }
}

.text-fields {
  margin-top: 5px;
}


// Turnstile 
.sf-turnstile-container {
  margin-top: 5px;
  margin-bottom: 5px;
}

// Float form style 
// Its not here- inline with the form style in shortcode 
// Float form style end


// Theme 1 - Modern Purple
$theme-1-primary: #a177f8;
$theme-1-primary-dark: #8a5df5;
$theme-1-text: #333333;
$theme-1-bg: #ffffff;
$theme-1-border: #d1d1d1;
$theme-1-shadow: rgba(0, 0, 0, 0.1);
$theme-1-focus-shadow: rgba(161, 119, 248, 0.2);

.simple_form_content.theme-1 {
  background-color: $theme-1-bg;
  color: $theme-1-text;

  // Button styles
  .form-btn {
    background-color: $theme-1-primary;
    color: white;
    transition: background-color 0.3s ease;

    &:hover {
      background-color: $theme-1-primary-dark;
    }
  }

  // Form fields
  .text-fields {

    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
      border: 1px solid $theme-1-border;
      transition: border-color 0.3s ease;

      &:focus {
        border-color: $theme-1-primary;
        outline: none;
        box-shadow: 0 0 0 2px $theme-1-focus-shadow;
      }
    }

    label {
      color: $theme-1-text;
    }
  }

  // Signature panel
  .signature-panel {
    border: 1px solid $theme-1-border;
    border-radius: 4px;
  }

  // Toggle switch
  .simple-form-checkbox-toggle {
    .slider {
      background-color: #ccc;

      &:before {
        background-color: white;
      }
    }

    input:checked+.slider {
      background-color: $theme-1-primary;
    }
  }

  // Navigation buttons
  .navigation-buttons {
    margin-top: 20px;
    padding: 10px 0;
  }
}


//-----------------------------------//

// Theme 2 - Fresh Green
$theme-2-primary: #4CAF50;
$theme-2-primary-dark: #3d8b40;
$theme-2-text: #212529;
$theme-2-label: #495057;
$theme-2-bg: #f8f9fa;
$theme-2-border: #ced4da;
$theme-2-border-light: #e9ecef;
$theme-2-shadow: rgba(0, 0, 0, 0.08);
$theme-2-focus-shadow: rgba(76, 175, 80, 0.25);

.simple_form_content.theme-2 {
  background-color: $theme-2-bg;
  color: $theme-2-text;
  padding: 25px;
  border-radius: 12px;
  // box-shadow: 0 4px 15px $theme-2-shadow;
  // border: 1px solid $theme-2-border-light;

  // Button styles
  .form-btn {
    background-color: $theme-2-primary;
    color: white;
    font-weight: 500;
    border-radius: 6px;
    transition: all 0.2s ease;

    &:hover {
      background-color: $theme-2-primary-dark;
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
  }

  // Form fields
  .text-fields {
    label {
      color: $theme-2-label;
      font-weight: 600;
    }

    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
      border: 2px solid $theme-2-border;
      border-radius: 6px;
      padding: 5px 14px;
      transition: all 0.3s ease;

      &:focus {
        border-color: $theme-2-primary;
        box-shadow: 0 0 0 3px $theme-2-focus-shadow;
      }
    }
  }

  // Signature panel
  .signature-panel {
    border: 2px solid #dee2e6;
    border-radius: 6px;
    padding: 8px;
  }

  // Checkbox and radio
  .text-fields-insider {
    margin: 8px 0;

    label {
      font-weight: normal;
      margin-left: 5px;
      display: flex;
      align-items: center;
      text-align: center;
      margin-top: 3px;
    }
  }

  // Navigation buttons
  .navigation-buttons {
    padding: 15px 0;
  }
}

//---------------------------------//
// Theme 3 - Dark Contrast
// Theme 3 - Dark 
$theme-3-primary: #e74c3c;
$theme-3-primary-dark: #c0392b;
$theme-3-text: #ecf0f1;
$theme-3-bg: #2c3e50;
$theme-3-input-bg: #34495e;
$theme-3-border: #7f8c8d;
$theme-3-label-secondary: #bdc3c7;
$theme-3-focus-shadow: 0 0 0 3px rgba(231, 76, 60, 0.3);

.simple_form_content.theme-3 {
  background-color: $theme-3-bg;
  color: $theme-3-text;
  padding: 30px;
  border-radius: 8px;
  // box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);

  // Button styles
  .form-btn {
    background-color: $theme-3-primary;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 12px 24px;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    cursor: pointer;

    &:hover {
      background-color: $theme-3-primary-dark;
      transform: translateY(-2px);
    }

    &:active {
      transform: translateY(0);
    }
  }

  // Form fields
  .text-fields {
    margin-bottom: 20px;

    label {
      color: $theme-3-primary;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 1px;
      font-size: 0.9em;
      margin-bottom: 8px;
      display: block;
    }

    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    select,
    textarea {
      width: 100%;
      background-color: $theme-3-input-bg;
      border: none;
      border-bottom: 2px solid $theme-3-border;
      border-radius: 4px;
      color: $theme-3-text;
      padding: 5px 14px;
      font-size: 1em;
      transition: all 0.3s ease;

      &:focus {
        border-bottom: 2px solid $theme-3-primary;
        box-shadow: $theme-3-focus-shadow;
        outline: none;
      }

      &::placeholder {
        color: rgba(236, 240, 241, 0.5);
      }
    }

    // File input
    input[type="file"] {
      background-color: $theme-3-input-bg;
      border: 2px dashed $theme-3-border;
      padding: 20px;
      color: $theme-3-text;
      border-radius: 4px;
      cursor: pointer;

      &:focus {
        border-color: $theme-3-primary;
        box-shadow: $theme-3-focus-shadow;
      }
    }

    // Checkbox and radio buttons
    input[type="checkbox"],
    input[type="radio"] {
      accent-color: $theme-3-primary;
      margin-right: 8px;
      cursor: pointer;
    }

    // Custom checkbox and radio labels
    .checkbox-label,
    .radio-label {
      color: $theme-3-label-secondary;
      font-weight: normal;
      cursor: pointer;
      display: flex;
      align-items: center;
    }
  }

  // Signature panel
  .signature-panel {
    border: 2px solid $theme-3-border;
    background-color: $theme-3-input-bg;
    padding: 20px;
    border-radius: 4px;

    .reset-signature {
      margin-top: 10px;
      background-color: $theme-3-primary;
      color: white;
      border: none;
      padding: 8px 16px;
      text-transform: uppercase;
      font-size: 0.8em;
      letter-spacing: 1px;
      cursor: pointer;
      transition: all 0.3s ease;

      &:hover {
        background-color: $theme-3-primary-dark;
      }
    }
  }

  // Navigation buttons
  .navigation-buttons {
    margin-top: 25px;
    display: flex;
    gap: 15px;

    .form-btn {
      margin-right: 0;
    }
  }

  // Custom toggle switch
  .simple-form-checkbox-toggle {
    display: flex;
    align-items: center;
    gap: 10px;

    .switch-label {
      color: $theme-3-text;
      font-weight: 600;
    }

    .slider {
      position: relative;
      display: inline-block;
      width: 50px;
      height: 24px;
      background-color: $theme-3-border;
      border-radius: 24px;
      transition: all 0.3s ease;

      &:before {
        content: "";
        position: absolute;
        height: 20px;
        width: 20px;
        left: 2px;
        bottom: 2px;
        background-color: $theme-3-text;
        border-radius: 50%;
        transition: all 0.3s ease;
      }
    }

    input:checked+.slider {
      background-color: $theme-3-primary;

      &:before {
        transform: translateX(26px);
      }
    }
  }

  // Select dropdown
  select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg fill='white' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px top 50%;
  }

  // Date and time inputs
  input[type="date"],
  input[type="time"] {
    &::-webkit-calendar-picker-indicator {
      filter: invert(1);
    }
  }

  // Range input
  input[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    height: 8px;
    background-color: $theme-3-border;
    border-radius: 4px;
    outline: none;

    &::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 20px;
      height: 20px;
      background-color: $theme-3-primary;
      border-radius: 50%;
      cursor: pointer;
      transition: all 0.3s ease;

      &:hover {
        background-color: $theme-3-primary-dark;
      }
    }

    &::-moz-range-thumb {
      width: 20px;
      height: 20px;
      background-color: $theme-3-primary;
      border-radius: 50%;
      cursor: pointer;
      transition: all 0.3s ease;

      &:hover {
        background-color: $theme-3-primary-dark;
      }
    }
  }
}


// Theme 4 - Modern Minimalist (Light Theme)
// Theme 4 - Modern Minimalist
$theme-4-primary: #3498db;
$theme-4-primary-dark: #2980b9;
$theme-4-text: #2c3e50;
$theme-4-bg: #f5f6fa;
$theme-4-input-bg: #ffffff;
$theme-4-border: #dcdde1;
$theme-4-label-secondary: #7f8c8d;
$theme-4-focus-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);

.simple_form_content.theme-4 {
  background-color: $theme-4-bg;
  color: $theme-4-text;
  padding: 30px;
  border-radius: 12px;
  // box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);

  // Button styles
  .form-btn {
    background-color: $theme-4-primary;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 12px 24px;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    cursor: pointer;

    &:hover {
      background-color: $theme-4-primary-dark;
      transform: translateY(-2px);
    }

    &:active {
      transform: translateY(0);
    }
  }

  // Form fields
  .text-fields {
    margin-bottom: 20px;

    label {
      color: $theme-4-primary;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 1px;
      font-size: 0.9em;
      margin-bottom: 8px;
      display: block;
    }

    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    select,
    textarea {
      width: 100%;
      background-color: $theme-4-input-bg;
      border: 1px solid $theme-4-border;
      border-radius: 6px;
      color: $theme-4-text;
      padding: 5px 14px;
      font-size: 1em;
      transition: all 0.3s ease;

      &:focus {
        border-color: $theme-4-primary;
        box-shadow: $theme-4-focus-shadow;
        outline: none;
      }

      &::placeholder {
        color: rgba(44, 62, 80, 0.5);
      }
    }

    // File input
    input[type="file"] {
      background-color: $theme-4-input-bg;
      border: 2px dashed $theme-4-border;
      padding: 20px;
      color: $theme-4-text;
      border-radius: 6px;
      cursor: pointer;

      &:focus {
        border-color: $theme-4-primary;
        box-shadow: $theme-4-focus-shadow;
      }
    }

    // Checkbox and radio buttons
    input[type="checkbox"],
    input[type="radio"] {
      accent-color: $theme-4-primary;
      margin-right: 8px;
      cursor: pointer;
    }

    // Custom checkbox and radio labels
    .checkbox-label,
    .radio-label {
      color: $theme-4-label-secondary;
      font-weight: normal;
      cursor: pointer;
      display: flex;
      align-items: center;
    }
  }

  // Signature panel
  .signature-panel {
    border: 2px solid $theme-4-border;
    background-color: $theme-4-input-bg;
    padding: 20px;
    border-radius: 6px;

    .reset-signature {
      margin-top: 10px;
      background-color: $theme-4-primary;
      color: white;
      border: none;
      padding: 8px 16px;
      text-transform: uppercase;
      font-size: 0.8em;
      letter-spacing: 1px;
      cursor: pointer;
      transition: all 0.3s ease;

      &:hover {
        background-color: $theme-4-primary-dark;
      }
    }
  }

  // Navigation buttons
  .navigation-buttons {
    margin-top: 25px;
    display: flex;
    gap: 15px;

    .form-btn {
      margin-right: 0;
    }
  }

  // Custom toggle switch
  .simple-form-checkbox-toggle {
    display: flex;
    align-items: center;
    gap: 10px;

    .switch-label {
      color: $theme-4-text;
      font-weight: 600;
    }

    .slider {
      position: relative;
      display: inline-block;
      width: 50px;
      height: 24px;
      background-color: $theme-4-border;
      border-radius: 24px;
      transition: all 0.3s ease;

      &:before {
        content: "";
        position: absolute;
        height: 20px;
        width: 20px;
        left: 2px;
        bottom: 2px;
        background-color: white;
        border-radius: 50%;
        transition: all 0.3s ease;
      }
    }

    input:checked+.slider {
      background-color: $theme-4-primary;

      &:before {
        transform: translateX(26px);
      }
    }
  }

  // Select dropdown
  select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg fill='%232c3e50' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px top 50%;
  }
}


// Theme 5 - Futuristic Neon (Dark Theme)

// Theme 5 - Futuristic Neon
$theme-5-primary: #9b59b6;
$theme-5-primary-dark: #8e44ad;
$theme-5-text: #ecf0f1;
$theme-5-bg: #1e1e2f;
$theme-5-input-bg: #2d2d44;
$theme-5-border: #3d3d5c;
$theme-5-label-secondary: #bdc3c7;
$theme-5-focus-shadow: 0 0 0 3px rgba(155, 89, 182, 0.3);

.simple_form_content.theme-5 {
  background-color: $theme-5-bg;
  color: $theme-5-text;
  padding: 30px;
  border-radius: 12px;
  // box-shadow: 0 5px 25px rgba(0, 0, 0, 0.3);

  // Button styles
  .form-btn {
    background-color: $theme-5-primary;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 12px 24px;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    cursor: pointer;

    &:hover {
      background-color: $theme-5-primary-dark;
      transform: translateY(-2px);
    }

    &:active {
      transform: translateY(0);
    }
  }

  // Form fields
  .text-fields {
    margin-bottom: 20px;

    label {
      color: $theme-5-primary;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 1px;
      font-size: 0.9em;
      margin-bottom: 8px;
      display: block;
    }

    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    select,
    textarea {
      width: 100%;
      background-color: $theme-5-input-bg;
      border: 1px solid $theme-5-border;
      border-radius: 6px;
      color: $theme-5-text;
      padding: 5px 14px;
      font-size: 1em;
      transition: all 0.3s ease;

      &:focus {
        border-color: $theme-5-primary;
        box-shadow: $theme-5-focus-shadow;
        outline: none;
      }

      &::placeholder {
        color: rgba(236, 240, 241, 0.5);
      }
    }

    // File input
    input[type="file"] {
      background-color: $theme-5-input-bg;
      border: 2px dashed $theme-5-border;
      padding: 20px;
      color: $theme-5-text;
      border-radius: 6px;
      cursor: pointer;

      &:focus {
        border-color: $theme-5-primary;
        box-shadow: $theme-5-focus-shadow;
      }
    }

    // Checkbox and radio buttons
    input[type="checkbox"],
    input[type="radio"] {
      accent-color: $theme-5-primary;
      margin-right: 8px;
      cursor: pointer;
    }

    // Custom checkbox and radio labels
    .checkbox-label,
    .radio-label {
      color: $theme-5-label-secondary;
      font-weight: normal;
      cursor: pointer;
      display: flex;
      align-items: center;
    }
  }

  // Signature panel
  .signature-panel {
    border: 2px solid $theme-5-border;
    background-color: $theme-5-input-bg;
    padding: 20px;
    border-radius: 6px;

    .reset-signature {
      margin-top: 10px;
      background-color: $theme-5-primary;
      color: white;
      border: none;
      padding: 8px 16px;
      text-transform: uppercase;
      font-size: 0.8em;
      letter-spacing: 1px;
      cursor: pointer;
      transition: all 0.3s ease;

      &:hover {
        background-color: $theme-5-primary-dark;
      }
    }
  }

  // Navigation buttons
  .navigation-buttons {
    margin-top: 25px;
    display: flex;
    gap: 15px;

    .form-btn {
      margin-right: 0;
    }
  }

  // Custom toggle switch
  .simple-form-checkbox-toggle {
    display: flex;
    align-items: center;
    gap: 10px;

    .switch-label {
      color: $theme-5-text;
      font-weight: 600;
    }

    .slider {
      position: relative;
      display: inline-block;
      width: 50px;
      height: 24px;
      background-color: $theme-5-border;
      border-radius: 24px;
      transition: all 0.3s ease;

      &:before {
        content: "";
        position: absolute;
        height: 20px;
        width: 20px;
        left: 2px;
        bottom: 2px;
        background-color: white;
        border-radius: 50%;
        transition: all 0.3s ease;
      }
    }

    input:checked+.slider {
      background-color: $theme-5-primary;

      &:before {
        transform: translateX(26px);
      }
    }
  }

  // Select dropdown
  select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg fill='white' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px top 50%;
  }
}



// Theme 6 - Neomorphic Light
$theme-6-primary: #6c5ce7;
$theme-6-primary-dark: #5341d6;
$theme-6-text: #2d3436;
$theme-6-bg: #e6eef9;
$theme-6-input-bg: #f5f7fa;
$theme-6-border: #d1d8e0;
$theme-6-label-secondary: #636e72;

.simple_form_content.theme-6 {
  background-color: $theme-6-bg;
  color: $theme-6-text;
  padding: 30px;
  border-radius: 20px;
  // box-shadow: 10px 10px 20px rgba(166, 180, 200, 0.2),
  //   -10px -10px 20px rgba(255, 255, 255, 0.7);

  // Button styles
  .form-btn {
    background-color: $theme-6-primary;
    color: #ffffff;
    border-radius: 12px;
    font-weight: 600;
    border: none;
    padding: 12px 24px;
    box-shadow: 5px 5px 10px rgba(166, 180, 200, 0.3),
      -5px -5px 10px rgba(255, 255, 255, 0.8);
    transition: all 0.3s ease;

    &:hover {
      background-color: $theme-6-primary-dark;
      transform: translateY(-2px);
    }

    &:active {
      box-shadow: inset 3px 3px 5px rgba(166, 180, 200, 0.4),
        inset -3px -3px 5px rgba(255, 255, 255, 0.8);
      transform: translateY(0);
    }
  }

  // Form fields
  .text-fields {
    label {
      color: $theme-6-text;
      font-weight: 500;
      font-size: 0.95em;
      margin-bottom: 12px;
      display: block;
      position: relative;
      padding-left: 12px;

      &:before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        height: 0.8em;
        width: 3px;
        background-color: $theme-6-primary;
        border-radius: 2px;
      }
    }

    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
      background-color: $theme-6-input-bg;
      border: 1px solid $theme-6-border;
      border-radius: 12px;
      color: $theme-6-text;
      padding: 15px;
      width: 100%;
      // box-shadow: inset 2px 2px 5px rgba(166, 180, 200, 0.2),
      //   inset -2px -2px 5px rgba(255, 255, 255, 0.7);
      transition: all 0.3s ease;

      &:focus {
        border-color: $theme-6-primary;
        box-shadow: inset 2px 2px 5px rgba(166, 180, 200, 0.2),
          inset -2px -2px 5px rgba(255, 255, 255, 0.7),
          0 0 0 3px rgba(108, 92, 231, 0.1);
        outline: none;
      }

      &::placeholder {
        color: lighten($theme-6-label-secondary, 15%);
      }
    }
  }

  // Signature panel
  .signature-panel {
    border: 1px solid $theme-6-border;
    background-color: $theme-6-input-bg;
    border-radius: 12px;
    padding: 5px;
    box-shadow: inset 2px 2px 5px rgba(166, 180, 200, 0.2),
      inset -2px -2px 5px rgba(255, 255, 255, 0.7);

    .reset-signature {
      margin-top: 10px;
      background-color: transparent;
      color: $theme-6-primary;
      border: 1px solid $theme-6-primary;
      border-radius: 8px;
      padding: 5px 12px;
      font-size: 0.85em;
      transition: all 0.2s ease;

      &:hover {
        background-color: $theme-6-primary;
        color: white;
      }
    }
  }

  // Checkbox and radio containers
  .text-fields-insider {
    margin-left: 12px;

    label {
      color: $theme-6-label-secondary;
      font-weight: normal;
      display: flex;
      align-items: center;
      margin-bottom: 8px;

      &:before {
        display: none;
      }
    }

    input[type="checkbox"],
    input[type="radio"] {
      accent-color: $theme-6-primary;
      margin-right: 8px;
      height: 18px;
      width: 18px;

      &:checked {
        background-color: $theme-6-primary;
      }
    }
  }

  // Navigation buttons
  .navigation-buttons {
    margin-top: 25px;
    display: flex;

    .form-btn {
      margin-right: 15px;
    }
  }

  // Custom toggle switch
  .simple-form-checkbox-toggle {
    margin: 12px 0;

    .switch-label {
      color: $theme-6-text;
      font-weight: 500;
    }

    .slider {
      background-color: $theme-6-border;
      border-radius: 20px;

      &:before {
        background-color: white;
        border-radius: 50%;
        box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.15);
      }
    }

    input:checked+.slider {
      background-color: $theme-6-primary;
    }
  }

  // Select dropdown
  select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg fill='%236c5ce7' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 15px top 50%;
    padding-right: 45px !important;
  }
}

// Theme 7 - Glassmorphism Dark
$theme-7-primary: #00bcd4;
$theme-7-primary-dark: #0097a7;
$theme-7-primary-light: rgba(0, 188, 212, 0.2);
$theme-7-text: #ffffff;
$theme-7-bg: #121212;
$theme-7-input-bg: rgba(255, 255, 255, 0.05);
$theme-7-border: rgba(255, 255, 255, 0.1);
$theme-7-label-secondary: rgba(255, 255, 255, 0.7);

.simple_form_content.theme-7 {
  background-color: $theme-7-bg;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(0, 188, 212, 0.15), transparent 20%),
    radial-gradient(circle at 80% 70%, rgba(233, 30, 99, 0.15), transparent 20%);
  color: $theme-7-text;
  padding: 30px;
  border-radius: 16px;
  backdrop-filter: blur(10px);
  // box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  // border: 1px solid rgba(255, 255, 255, 0.05);

  // Button styles
  .form-btn {
    background-color: $theme-7-primary;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 500;
    letter-spacing: 0.5px;
    padding: 12px 24px;
    backdrop-filter: blur(5px);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;

    &:before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: linear-gradient(to bottom right,
          rgba(255, 255, 255, 0.1),
          rgba(255, 255, 255, 0.05),
          rgba(255, 255, 255, 0));
      transform: rotate(45deg);
      z-index: 0;
    }

    &:hover {
      background-color: $theme-7-primary-dark;
      box-shadow: 0 6px 15px rgba(0, 188, 212, 0.3);
      transform: translateY(-2px);
    }
  }

  // Form fields
  .text-fields {
    label {
      color: $theme-7-primary;
      font-weight: 500;
      font-size: 0.9em;
      margin-bottom: 8px;
      display: block;
      letter-spacing: 0.5px;
    }

    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
      background-color: $theme-7-input-bg;
      border: 1px solid $theme-7-border;
      border-radius: 8px;
      color: $theme-7-text;
      padding: 5px 14px;
      width: 100%;
      backdrop-filter: blur(5px);
      transition: all 0.3s ease;

      &:focus {
        border-color: $theme-7-primary;
        box-shadow: 0 0 0 3px $theme-7-primary-light;
        outline: none;
        background-color: rgba(255, 255, 255, 0.08);
      }

      &::placeholder {
        color: rgba(255, 255, 255, 0.3);
      }
    }
  }

  // Signature panel
  .signature-panel {
    border: 1px solid $theme-7-border;
    background-color: $theme-7-input-bg;
    border-radius: 8px;
    padding: 5px;
    backdrop-filter: blur(5px);

    .reset-signature {
      margin-top: 10px;
      background-color: transparent;
      color: $theme-7-primary;
      border: 1px solid $theme-7-primary;
      border-radius: 6px;
      padding: 6px 14px;
      font-size: 0.85em;
      letter-spacing: 0.5px;
      transition: all 0.2s ease;

      &:hover {
        background-color: $theme-7-primary-light;
      }
    }
  }

  // Checkbox and radio containers
  .text-fields-insider {
    margin: 8px 0 15px;

    label {
      color: $theme-7-label-secondary;
      font-weight: normal;
      font-size: 0.95em;
      display: flex;
      align-items: center;
      margin-bottom: 10px;
    }

    input[type="checkbox"],
    input[type="radio"] {
      accent-color: $theme-7-primary;
      margin-right: 8px;
      height: 18px;
      width: 18px;
      position: relative;

      &:checked {
        background-color: $theme-7-primary;
        border-color: $theme-7-primary;
      }

      &:focus {
        box-shadow: 0 0 0 3px $theme-7-primary-light;
      }
    }
  }

  // Navigation buttons
  .navigation-buttons {
    margin-top: 30px;
    display: flex;
    gap: 15px;
  }

  // Custom toggle switch
  .simple-form-checkbox-toggle {
    margin: 15px 0;

    .switch-label {
      color: $theme-7-label-secondary;
    }

    .slider {
      background-color: rgba(255, 255, 255, 0.1);
      border-radius: 20px;
      backdrop-filter: blur(5px);

      &:before {
        background-color: white;
        border-radius: 50%;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
      }
    }

    input:checked+.slider {
      background-color: $theme-7-primary;
    }
  }

  // Select dropdown
  select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg fill='%2300bcd4' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px top 50%;
    padding-right: 40px !important;
  }
}

// Form button color 
.button.theme-1 {
  background-color: #ffffff;
  color: #333333;
}

.button.theme-2 {
  background-color: #f8f9fa;
  color: #212529;
}

.submit-button.theme-2 {
  border: 1px solid #212529;
}

.button.theme-3 {
  background-color: #2c3e50;
  color: #ecf0f1;
}

.submit-button.theme-3 {
  border: 1px solid #ecf0f1;
}

.button.theme-4 {
  background-color: #f5f6fa;
  color: #2c3e50;
}

.submit-button.theme-4 {
  border: 1px solid #2c3e50;
  ;
}

.button.theme-5 {
  background-color: #1e1e2f;
  color: #ecf0f1;
}

.submit-button.theme-5 {
  border: 1px solid #ecf0f1;
}

.button.theme-6 {
  background-color: #e6eef9;
  color: #2d3436;
}

.submit-button.theme-6 {
  border: 1px solid #2d3436;
}

.button.theme-7 {
  background-color: #121212;
  color: #ffffff;
}

.submit-button.theme-7 {
  border: 1px solid #ffffff;
}

// Submit btn postioned 
/* button.submit-button.sf-form-submit {
  position: relative;
  top: -78px;
  left: 122px;
} */



// Modal submit form 
/* Custom Modal Styles */
.custom-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.custom-modal-overlay.visible {
  opacity: 1;
  visibility: visible;
}

.custom-modal {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  width: 90%;
  max-width: 400px;
  padding: 0;
  transform: translateY(20px);
  transition: transform 0.3s ease;
  overflow: hidden;
}

.custom-modal-overlay.visible .custom-modal {
  transform: translateY(0);
}

.custom-modal-header {
  padding: 16px 20px;
  background-color: #f8f9fa;
  border-bottom: 1px solid #eaeaea;
}

.custom-modal-header h3 {
  margin: 0;
  color: #333;
  font-size: 18px;
  font-weight: 600;
}

.custom-modal-body {
  padding: 20px;
  text-align: center;
  color: #555;
  line-height: 1.5;
}

.custom-modal-progress {
  width: 100%;
  height: 4px;
  background-color: #eaeaea;
  position: relative;
  overflow: hidden;
}

.custom-modal-progress-indicator {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  background: linear-gradient(to right, #4caf50, #8bc34a);
}

/* Optional: Add some animation effect */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.custom-modal {
  animation: fadeIn 0.3s ease;
}

// Authentication Forms Styles
@import 'auth-forms';