How to Style the WC Vendors Signup Form

/* =====================================================

   WCV Vendors Signup Form – Custom Styling

   This CSS snippet customizes the vendor registration form

   to improve layout, typography, colors, and button style

   ===================================================== */

/* Add another column */

form#wcv-registration-form {

  column-count: 2;

  column-gap: 64px;

}

/* Adjust the label font style, size, and color */

form#wcv-registration-form label {

  color: #00008B;

  font-size: 16px;

  font-family: Verdana, sans-serif;

  font-weight: 500;

}

/* Adjust the field size and background color */

form#wcv-registration-form .input-text,

form#wcv-registration-form select,

form#wcv-registration-form textarea {

  width: 100%;

  height: 48px;

  background-color: #f1f1f1;

  border: 1px solid #ccc;

  border-radius: 4px;

  padding: 10px;

  font-size: 15px;

  box-sizing: border-box;

}

/* Adjust spacing between fields */

form#wcv-registration-form .wcv-field-wrapper {

    margin-bottom: 32px;

}

/* Adjust top spacing for the country field */

div.wcv-address-field.wcv-address-country {

  margin-top: 100%;

}

/* Style the submit button */

form#wcv-registration-form p.wcv-submit input.button {

  color: #FFF8DC;

  border-color: #012b09;

  background-color: #012b09;

  padding: 12px 24px;

  font-size: 16px;

  font-weight: bold;

  border-radius: 4px;

  cursor: pointer;

  transition: all 0.3s ease;

	width: 200px;

}

/* Add a hover effect to the submit button */

form#wcv-registration-form p.wcv-submit input.button:hover {

  background-color: #024d12;

  border-color: #024d12;

}

/* Improve mobile responsiveness */

@media screen and (max-width: 768px) {

  form#wcv-registration-form {

    column-count: 1;

  }

}