// Base styles for the Contact Form 7 form
.wp-block-contact-form-7-contact-form-selector {
  --wp--preset--input--bg-color: #f9f9f9;
  --wp--preset--input--text-color: #333;
  --wp--preset--input--border-color: #ccc;
  --wp--preset--input--hover-border-color: #0073aa;
  --wp--preset--button--bg-color: #0073aa;
  --wp--preset--button--text-color: #fff;
  --wp--preset--button--hover-bg-color: #005885;

  // Style the form wrapper
  .wpcf7-form {
    width: fit-content;
    background-color: var(--wp--preset--input--bg-color);
    padding: 20px;
    border: 1px solid var(--wp--preset--input--border-color);
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

    // Label styles
    label {
      display: block;
      font-weight: bold;
      margin-bottom: 8px;
      color: var(--wp--preset--input--text-color);
      font-size: 14px;
    }

    // Input fields and textarea
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    textarea {
      padding: 10px;
      margin-bottom: 20px; // Added margin between fields
      border: 1px solid var(--wp--preset--input--border-color);
      background-color: var(--wp--preset--input--bg-color);
      color: var(--wp--preset--input--text-color);
      border-radius: 4px;
      font-size: 16px;
      transition: border-color 0.3s ease, background-color 0.3s ease;

      &:focus {
        border-color: var(--wp--preset--input--hover-border-color);
        outline: none;
      }
      @media screen and (max-width: 768px) {
        width:90%;
      }
    }

    // Submit button
    input[type="submit"] {
      background-color: var(--wp--preset--button--bg-color);
      color: var(--wp--preset--button--text-color);
      padding: 10px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 16px;
      transition: background-color 0.3s ease, color 0.3s ease;

      &:hover {
        background-color: var(--wp--preset--button--hover-bg-color);
        color: #fff;
      }

    }

    // Spinner
    .wpcf7-spinner {
      margin-left: 10px;
      vertical-align: middle;
    }

    // Error messages
    .wpcf7-response-output {
      margin-top: 15px;
      padding: 10px;
      border: 1px solid var(--wp--preset--input--hover-border-color);
      background-color: #f8d7da;
      color: #721c24;
      border-radius: 4px;
    }
  }
}