:root {
  --exd-primary: #7a0000;
  --exd-primary-light: #b30000;
  --exd-primary-lighter: #ffe2e2;
  --exd-primary-dark: #4d0000;

  /* Secondary Colors */
  --exd-secondary: #333333;
  --exd-secondary-light: #666666;
  --exd-secondary-dark: #1a1a1a;

  /* Background & Text */
  --exd-background: #f5f5f5;
  
  /* Grays */
  --exd-gray-lighter: #f8f8f8;
  --exd-gray-light: #e0e0e0;
  --exd-gray: #ccc;
  --exd-gray-dark: #999999;

  --exd-errors:#96000b;
  --exd-field-background: #ffffff;
  --exd-field-border-color: #ccc;
  --exd-field-padding: 10px 14px; 
  --exd-field-height: 40px; 
  --exd-field-border-radius: 0;
  --exd-btn-padding: 12px 24px;
}
/*  Global Button padding for Beaver Builder */
.fl-builder-content a.fl-button, .fl-builder-content a.fl-button:visited,
.form-group button {
  transition: background 0.2s ease-in-out;
}

/* 📌 Labels */
.form-group label {
  font-weight: bold;
} 

/* 📌 Base Input & Select Styles */
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="number"],
.form-group input[type="tel"],
.form-group input[type="file"], /* Added file input */
.form-group textarea,
.form-group select,
canvas {
  width: 100%;
  padding: var(--exd-field-padding);
  font-size: 14px;
  border: 1px solid var(--exd-field-border-color);
  background-color: var(--exd-field-background);
  border-radius: var(--exd-field-border-radius);
  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  outline: none;
  cursor: pointer;
  height: var(--exd-field-height); /* Ensures all fields are the same height */
}
canvas {
  height: 150px;
}

/* 📌 Textarea Specific Styling */
.form-group textarea {
  min-height: 120px;
  resize: vertical;
  height: auto; /* Prevents forced height for textareas */
}

.form-group {
  margin-bottom: 5px;;
}

/* 📌 File Input Styling */
.form-group input[type="file"] {
  position: relative;
  padding: 5px 10px;
  line-height: normal;
  cursor: pointer;
  height: var(--exd-field-height);
}

/* 📌 File Input: Custom Button */
.form-group input[type="file"]::file-selector-button {
  background-color: var(--exd-gray-light);
  padding: 6px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s ease-in-out;
}

.form-group input[type="file"]::file-selector-button:hover {
  background-color: #ccc;
}

/* 📌 Dropdown Select */
.form-group select {
  appearance: none;
  background-color: var(--exd-field-background);
  cursor: pointer;
}

/* 📌 Input Fields on Focus */
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--exd-primary);
  box-shadow: 0 0 4px rgba(0, 123, 255, 0.2);
}

/* 📌 Disabled Inputs */
.form-group input:disabled,
.form-group textarea:disabled,
.form-group select:disabled {
  background-color: #f8f8f8;
  border-color: var(--exd-field-border-color);
  cursor: not-allowed;
  opacity: 0.6;
}

/* 📌 Placeholder Styling */
::placeholder {
  color: #aaa;
  font-size: 14px;
}

.form-group button:disabled {
  background-color: var(--exd-field-border-color);
  cursor: not-allowed;
}

.form-group button {
  padding: var(--exd-btn-padding);
}

/* 📌 Checkbox & Radio Group */
.input-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px; /* Adjusts spacing between items */
}

/* 📌 Optional Layouts */
.input-group--inline {
  flex-direction: row; /* Makes checkboxes/radios inline */
}

.input-group--column {
  flex-direction: column; /* Stacks checkboxes/radios */
}

.input-group label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-weight: normal;
}

/* 📌 Checkboxes & Radio Buttons */
.input-group input[type="checkbox"],
.input-group input[type="radio"] {
  appearance: none;
  width: 17px;
  height: 17px;
  border: 1px solid var(--exd-field-border-color);
  border-radius: 4px;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  outline: none;
}

/* 📌 Radio Buttons should be Circular */
.input-group input[type="radio"] {
  border-radius: 50%;
}

/* 📌 Checked State for Checkboxes & Radio Buttons */
.input-group input[type="checkbox"]:checked,
.input-group input[type="radio"]:checked {
  background-color: var(--exd-primary);
  border-color: var(--exd-primary);
  position: relative;
}

/* 📌 Checkmark for Checkboxes */
.input-group input[type="checkbox"]:checked::after {
  content: "✔";
  color: white;
  font-size: 13px;
  font-weight: bold;
  display: block;
  text-align: center;
  line-height: 17px;
}

/* 📌 Inner Circle for Checked Radio Buttons */
.input-group input[type="radio"]:checked::after {
  content: "";
  width: 9px;
  height: 9px;
  background-color: white;
  border-radius: 50%;
  display: block;
}

/* 📌 Select Styling */
.form-group select {
  appearance: none;
  background-color: var(--exd-field-background, #fff);
  border: 1px solid var(--exd-field-border-color, #ccc);
  padding: var(--exd-field-padding, 10px 14px);
  font-size: 14px;
  border-radius: 4px;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}
/* 📌 Custom Select Wrapper */
.form-group .custom-select {
  position: relative;
  width: 100%;
  max-width: 100%;
  cursor: pointer;
  user-select: none;
}

/* 📌 Select Field (Mimicking Default Select) */
.form-group .custom-select .select-selected {
  background-color: var(--exd-field-background, #fff);
  border: 1px solid var(--exd-field-border-color, #ccc);
  padding: var(--exd-field-padding, 10px 14px);
  font-size: 14px;
  border-radius: var(--exd-form-border-radius, 4px);
  transition: all 0.2s ease-in-out;
}

/* 📌 Focus Effect */
.form-group .custom-select .select-selected:focus,
.form-group .custom-select .select-selected:hover {
  border-color: var(--exd-primary);
  box-shadow: 0 0 4px rgba(0, 123, 255, 0.2);
}

/* 📌 Dropdown Items Wrapper */
.form-group .custom-select .select-items {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: var(--exd-field-background, #fff);
  border: 1px solid var(--exd-field-border-color, #ccc);
  border-radius: var(--exd-form-border-radius, 4px);
  display: none;
  z-index: 1000;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
}

/* 📌 Dropdown Items */
.form-group .custom-select .select-items div {
  padding: var(--exd-field-padding, 10px 14px);
  font-size: 14px;
  transition: background-color 0.2s ease-in-out;
  cursor: pointer;
}

/* 📌 Hover Effect for Dropdown Items */
.form-group .custom-select .select-items div:hover {
  background-color: var(--exd-primary-lighter);
  color: var(--exd-select-hover-text);
}

/* 📌 Show Dropdown */
.form-group .custom-select.open .select-items {
  display: block;
}

/* Reduce Bootstrap 3 gutter spacing */
.row.exd-gutters-1 {
  margin-right: -5px;
  margin-left: -5px;
}
/* Add spacing at bottom of columns for mobiles*/
.row .form-group > [class^="col-"]{
  margin-bottom: 5px;
}

.row.exd-gutters-1 > [class^="col-"] {
  padding-right: 5px;
  padding-left: 5px;
}

/* 📌 Hiden Fields HONEY POT */
#hpHearAboutUs,
#email,
#captcha {
  display: none;
}
/* ✅ Corrected: Consistent Variable Naming */
span.exd-has-error,
div.exd-has-error {
  color: var(--exd-errors); /* Previously --exd-global-errors */
}

select.exd-has-error,
input.exd-has-error,
textarea.exd-has-error {
  border: 1px solid var(--exd-errors) !important; /* Previously --exd-global-errors */
  background: var(--exd-field-background) !important;
}

.btn-loading {
  margin-right: 8px;
}

.text-notification {
  color: var(--exd-form-notification);
}
.signature-clear {
  cursor: pointer;
}
/* Button Styles */
button[type='submit'] {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  font-size: 16px;
  background-color: #007bff;
  color: white;
  border: none;
  cursor: pointer;
  transition: opacity 0.3s;
}

/* Disabled button when loading */
.exd-loading {
  pointer-events: none;
  opacity: 0.7;
}

/* Spinner Styles */
 .exd-spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid white;
  border-top-color: transparent;
  border-radius: 50%;
  animation: exd-spin 0.6s linear infinite;
  margin-right: 8px; /* Added margin-right */
}

/* Show spinner when loading */
.exd-loading .exd-spinner {
  display: inline-block;
}

/* Keyframes for the spinner animation */
@keyframes exd-spin {
  to {
      transform: rotate(360deg);
  }
}

.dev-mode {
  background-color: #fff5d4; /* Light red background */
  color: #ac8402;
  border: 1px solid #fff5d4;
  padding: 10px 20px;
  margin-top: 10px;
  border-radius: 5px;
  width: 100%;
}

.dev-mode::before {
  content: "DEVELOPMENT MODE: This form is currently in testing.";
}

.form-message-success {
  font-size: 14px;
}

.form-message-error {
  background-color: #fff2f3; /* Light red background */
  color: var(--exd-errors);
  border: 1px solid #fff2f3;
  padding: 10px 20px;
  margin-top: 10px;
  border-radius: 5px;
}

.form-message-warning {
  background-color: #fffcf2; /* Light red background */
  color: #ac8402;
  border: 1px solid #fffcf2;
  padding: 10px 20px;
  margin-top: 10px;
  border-radius: 5px;
}