/** Shopify CDN: Minification failed

Line 160:29 Unexpected "/"

**/
/* Container styles */
form#supportForm,
form#serviceForm,
form#referralForm {
  display: flex;
  flex-direction: column;
  font-size: 14px; /* Default for text-sm */
  max-width: 800px;
  padding: 0 2rem;
  margin-top: 2rem;
  margin-bottom: 1rem;
  margin-left: auto;
  margin-right: auto;
}

/* Label styles */
form#supportForm label,
form#referralForm label,
form#serviceForm label {
  text-transform: uppercase;
  font-size: 12px; /* Equivalent to text-xs */
}

/* Input, textarea, and select field styles */
form#supportForm input,
form#supportForm textarea,
form#supportForm select,
form#serviceForm input,
form#serviceForm textarea,
form#serviceForm select,
form#referralForm input,
form#referralForm textarea,
form#referralForm select {
  width: 100%;
  background-color: #fffefb; /* Background color */
  padding: 1.75rem; /* Equivalent to p-4 */
  border: 1px solid #858173; /* Border color (a11y: 3.9:1, was 1.6:1) */
  border-radius: 0.25rem; /* Rounded corners */
  margin-bottom: 0.5rem; /* Margin for separation */
  outline-color: #fbbf24; /* Custom focus outline color (brand) */
  color: #5d5e5e;
  font-size: 1.5rem;
}

form#supportForm textarea::placeholder,
form#serviceForm textarea::placeholder,
form#referralForm textarea::placeholder {
  opacity: 0.5; /* Placeholder opacity */
}

/* Flex containers for responsive form groups */
form#supportForm .flex,
form#serviceForm .flex,
form#referralForm .flex {
  display: flex;
}

form#supportForm .flex > *,
form#serviceForm .flex > *,
form#referralForm .flex > * {
  flex: 1;
  margin-right: 0.5rem; /* Margin between flex items */
}

form#supportForm .flex > *:last-child,
form#serviceForm .flex > *:last-child,
form#referralForm .flex > *:last-child {
  margin-right: 0; /* Remove margin for the last item */
}

/* Button styles */
form#supportForm button,
form#serviceForm button,
form#referralForm button {
  background-color: #000; /* Button background */
  color: #fff; /* Button text color */
  padding: 1rem 2rem; /* Padding for button */
  text-transform: uppercase;
  font-weight: bold;
  font-size: 14px; /* Font size for text-sm */
  border-radius: 0.25rem; /* Rounded corners */
  cursor: pointer;
  transition: all 0.3s ease;
}

form#supportForm button:hover,
form#serviceForm button:hover,
form#referralForm button:hover {
  color: #64B735;
}

/* Spinner styles for support form */
#support-spinner {
  width: 60px;
  height: 60px;
  text-align: center;
}

#support-successMessage,
#support-errorMessage {
    display: none;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    margin-top: 20px;

}

.support-loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid black;
  border-right: 16px solid #80cf25;
  border-bottom: 16px solid black;
  border-left: 16px solid #80cf25;
  width: 50px;
  height: 50px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Success message styles */
#support-successMessage {
  text-align: center;
  font-size: 2rem;
  background-color: white;
  color: #4dbf0b;
  padding: 15px;
}

/* Media queries for larger screens */
@media (min-width: 768px) {
  form#supportForm,
  form#serviceForm,
  form#referralForm {
    font-size: 16px; /* Equivalent to md:text-base */
  }

  /* Flex container adjustments for larger screens */
  form#supportForm .flex > *,
  form#serviceForm .flex > *,
  form#referralForm .flex > * {
    margin-right: 0.5rem;
  }

  form#supportForm .flex .w-1/3,
  form#serviceForm .flex .w-1/3,
  form#referralForm .flex .w-1/3 {
    width: 32%;
  }
}