/* ==========================================================================
   PawCare Veterinary Theme - HubSpot Form Overrides
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Form Container
   --------------------------------------------------------------------------- */
.hs-form {
  max-width: 100%;
}

.hs-form fieldset {
  max-width: 100% !important;
}

.hs-form fieldset.form-columns-2 .hs-form-field {
  width: 48% !important;
}

.hs-form fieldset.form-columns-3 .hs-form-field {
  width: 31% !important;
}

@media (max-width: 767px) {
  .hs-form fieldset.form-columns-2 .hs-form-field,
  .hs-form fieldset.form-columns-3 .hs-form-field {
    width: 100% !important;
  }
}

/* ---------------------------------------------------------------------------
   Labels
   --------------------------------------------------------------------------- */
.hs-form label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--label-font-size);
  font-weight: var(--label-font-weight);
  color: var(--label-color);
  margin-bottom: var(--label-margin-bottom);
}

.hs-form label .hs-form-required {
  color: var(--color-error);
  margin-left: 2px;
}

/* ---------------------------------------------------------------------------
   Inputs, Textareas, Selects
   --------------------------------------------------------------------------- */
.hs-form input[type="text"],
.hs-form input[type="email"],
.hs-form input[type="tel"],
.hs-form input[type="number"],
.hs-form input[type="url"],
.hs-form input[type="password"],
.hs-form input[type="date"],
.hs-form textarea,
.hs-form select {
  width: 100%;
  padding: var(--input-padding);
  font-family: var(--font-body);
  font-size: var(--input-font-size);
  color: var(--input-color);
  background-color: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--input-radius);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  appearance: none;
  -webkit-appearance: none;
}

.hs-form input[type="text"]:focus,
.hs-form input[type="email"]:focus,
.hs-form input[type="tel"]:focus,
.hs-form input[type="number"]:focus,
.hs-form input[type="url"]:focus,
.hs-form input[type="password"]:focus,
.hs-form input[type="date"]:focus,
.hs-form textarea:focus,
.hs-form select:focus {
  outline: none;
  border-color: var(--input-border-focus);
  box-shadow: var(--input-shadow-focus);
}

.hs-form input::placeholder,
.hs-form textarea::placeholder {
  color: var(--input-placeholder);
}

.hs-form textarea {
  min-height: 120px;
  resize: vertical;
}

.hs-form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23636E72' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}

/* ---------------------------------------------------------------------------
   Checkboxes and Radio Buttons
   --------------------------------------------------------------------------- */
.hs-form .hs-form-booleancheckbox label,
.hs-form .hs-form-radio label {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  font-weight: var(--font-weight-regular);
  cursor: pointer;
}

.hs-form .hs-form-booleancheckbox input,
.hs-form .hs-form-radio input {
  margin-top: 3px;
  accent-color: var(--color-accent);
}

.hs-form .inputs-list {
  padding: 0;
}

.hs-form .inputs-list li {
  margin-bottom: var(--spacing-xs);
}

/* ---------------------------------------------------------------------------
   Form Field Spacing
   --------------------------------------------------------------------------- */
.hs-form .hs-form-field {
  margin-bottom: var(--spacing-lg);
}

/* ---------------------------------------------------------------------------
   Submit Button
   --------------------------------------------------------------------------- */
.hs-form .hs-button,
.hs-form input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--btn-padding);
  font-family: var(--btn-font-family);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  letter-spacing: var(--btn-letter-spacing);
  color: var(--btn-primary-color);
  background-color: var(--btn-primary-bg);
  border: 2px solid var(--btn-primary-border);
  border-radius: var(--btn-radius);
  cursor: pointer;
  transition: var(--btn-transition);
  width: auto;
}

.hs-form .hs-button:hover,
.hs-form input[type="submit"]:hover {
  background-color: var(--btn-primary-bg-hover);
  border-color: var(--btn-primary-border-hover);
  color: var(--btn-primary-color-hover);
}

/* ---------------------------------------------------------------------------
   Error Messages
   --------------------------------------------------------------------------- */
.hs-form .hs-error-msgs {
  padding: 0;
  margin-top: var(--spacing-xs);
}

.hs-form .hs-error-msgs li {
  list-style: none;
}

.hs-form .hs-error-msgs label,
.hs-form .hs-error-msg {
  font-size: 13px;
  font-weight: var(--font-weight-regular);
  color: var(--color-error) !important;
}

.hs-form .hs-main-font-element .hs-error-msg {
  margin-top: var(--spacing-xs);
}

/* ---------------------------------------------------------------------------
   Success Message
   --------------------------------------------------------------------------- */
.submitted-message {
  font-family: var(--font-body);
  font-size: var(--body-font-size);
  color: var(--color-success);
  padding: var(--spacing-lg);
  background-color: rgba(0, 184, 148, 0.08);
  border-radius: var(--radius-md);
  text-align: center;
}

/* ---------------------------------------------------------------------------
   GDPR / Legal Consent
   --------------------------------------------------------------------------- */
.hs-form .legal-consent-container {
  margin-bottom: var(--spacing-lg);
}

.hs-form .legal-consent-container p {
  font-size: var(--body-small-font-size);
  color: var(--color-text-muted);
  line-height: 1.5;
}