/** Shopify CDN: Minification failed

Line 13:0 Unexpected "<"
Line 191:2 Unexpected "<"
Line 208:6 Comments in CSS use "/* ... */" instead of "//"
Line 211:6 Comments in CSS use "/* ... */" instead of "//"
Line 214:10 Comments in CSS use "/* ... */" instead of "//"
Line 214:62 Unterminated string token
Line 218:12 Comments in CSS use "/* ... */" instead of "//"
Line 221:12 Comments in CSS use "/* ... */" instead of "//"

**/
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contact Form</title>
  <style>
    /* Apply Harmonia Sans to all input, select, text areas, buttons, and text blocks */
    body, input, select, textarea, button, p, h1, h2, h3, h4, h5, h6, .contact-text-block, .contact-info-section, .form-status-list {
      font-family: "Harmonia Sans", sans-serif !important;
    }

    /* Add 200px margin-top to the contact form */
    .contact-form-section {
      margin-top: 100px;
    }

    /* Add 100px margin-top to the contact info section */
    .contact-info-section {
      margin-top: 100px;
      text-align: center;
    }

    /* Contact text block styling */
    .contact-text-block {
      font-family: "Harmonia Sans", sans-serif !important;
      font-size: 16px;
      line-height: 130.372%;
      letter-spacing: 0.98px;
      color: #000;
      text-align: center;
      padding: 0 20px;
      margin: 20px auto 50px;
      width: 100%;
      max-width: 750px;
      box-sizing: border-box;
    }

    /* Align and center the contact-info-image */
    .contact-info-image {
      width: 125px;
      max-width: 100%;
      display: block;
      margin: 0 auto;
      margin-bottom: 30px;
      text-align: center;
    }

    /* Remove all ::before and ::after pseudo-elements for input fields */
    .field:before, .customer .field:before, .field:after, .customer .field:after {
      display: none !important;
    }

    /* Consistent styling for input fields with orange border */
    .customer .field input, .customer select, .field__input, .select__select {
      font-size: 16px !important;
      padding: 12px !important;
      box-sizing: border-box;
      box-shadow: 0 0 0 !important;
      border: 1px solid #F47922 !important;
      width: 100%;
      margin-bottom: 20px !important;
      transition: border-color 0.3s ease;
      outline: none !important;
    }


/* Ensure no outline or glow on focus, click, or hover */
input:focus, select:focus, textarea:focus,
input:active, select:active, textarea:active,
input:hover, select:hover, textarea:hover {
  border-color: #F47922 !important;
  outline: none !important;
  box-shadow: none !important;
  margin-bottom: 0 !important; /* Remove the margin on focus */
}

    /* Button class adjustments */
    .button {
      font-family: "Harmonia Sans", sans-serif !important;
      background-color: #F47922;
      color: white;
      font-size: 13px;
      text-transform: uppercase;
      padding: 0 20px;
      height: 50px;
      line-height: 36px;
      border: none;
      cursor: pointer;
      text-align: center;
      display: block;
      margin: 0 auto;
      width: auto;
      box-shadow: none;
      outline: none;
      min-width: auto !important;
      min-height: auto !important;
    }

    /* More specific styles for .contact__button to override .button */
    .contact__button {
      font-family: "Harmonia Sans", sans-serif !important;
      background-color: #F47922 !important;
      color: white !important;
      font-size: 14px !important;
      padding: 0 25px !important;
      height: 50px !important;
      line-height: 40px !important;
      min-width: auto !important;
      min-height: auto !important;
      border: none !important;
      cursor: pointer !important;
      text-align: center !important;
      display: block !important;
      margin: 0 auto !important;
      width: auto !important;
    }

    /* Specific styles for #toggle-contact-form */
    #toggle-contact-form {
      font-family: "Harmonia Sans", sans-serif !important;
      background-color: #F47922;
      color: white;
      font-size: 13px;
      padding: 0 20px;
      height: 36px;
      line-height: 36px;
      min-width: auto !important;
      min-height: auto !important;
      border: none;
      cursor: pointer;
      text-align: center;
      display: block;
      margin: 0 auto;
      width: auto;
      box-shadow: none;
      outline: none;
    }

    /* Make all text inside the form-status-list uppercase */
    .form-status-list {
      font-family: "Harmonia Sans", sans-serif !important;
      text-transform: uppercase;
      text-align: left;
    }

    /* Hide the form message */
    .form__message {
      font-family: "Harmonia Sans", sans-serif !important;
      font-size: 8px !important;
    }

    /* Adjust the position of the error message */
    .contact__field-error {
      position: absolute;
      right: 10px;
      top: 5px;
      color: red;
      font-family: "Harmonia Sans", sans-serif !important;
      font-size: 12px;
      display: flex;
      align-items: center;
    }

    /* Mobile adjustments */
    @media screen and (max-width: 768px) {
      .contact-text-block {
        width: 90%;
        max-width: 320px;
        padding: 0 10px;
        box-sizing: border-box;
      }
    }

    /* Hide label class */
    .hide-label {
      display: none;
    }
  </style>
</head>
<body>

  <form>
    <label for="name">Name</label>
    <input type="text" id="name" class="field__input" />

    <label for="email">Email</label>
    <input type="email" id="email" class="field__input" />

    <label for="message">Message</label>
    <textarea id="message" class="field__input"></textarea>
  </form>

  <script>
    document.addEventListener("DOMContentLoaded", function() {
      // Select all input fields within the form
      const inputFields = document.querySelectorAll('.field__input');

      // Loop through each input field and add an event listener
      inputFields.forEach(input => {
        input.addEventListener('input', function() {
          // Find the associated label by using the input's ID
          const label = document.querySelector(`label[for="${this.id}"]`);

          if (this.value !== '') {
            // Hide the label if input has text
            label.classList.add('hide-label');
          } else {
            // Show the label if input is empty
            label.classList.remove('hide-label');
          }
        });
      });
    });
  </script>
  
</body>
</html>
