/* ==========================================================================
   Contact Page Specific Styles
   ========================================================================== */

   body.contact-page {
    background-color: var(--color-white); /* Often contact pages have white bg */
}

/* Contact Form Styles */
.contact-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 600px; /* Limit form width */
  margin: 0 auto; /* Center form */
}

.contact-block { width: 100%; }

#email-form { /* Target the form specifically */
    /* Add specific form layout styles if needed */
}

.form-field-wrapper {
  display: flex;
  margin-bottom: 24px;
  justify-content: space-between;
  gap: 24px; /* Add gap between inputs */
}

.input { /* Contact specific input styling */
  width: 100%;
  height: 60px;
  /* max-width: 48%; -> Let flexbox handle width in .form-field-wrapper */
  margin-bottom: 0px; /* Remove bottom margin here */
  padding: 0 20px;
  border: 1px solid var(--color-border-dark);
  background-color: var(--color-white);
  font-family: var(--font-primary);
  color: var(--color-text-dark);
  border-radius: 0; /* Ensure no radius */
  transition: border-color 0.3s ease;
}
.input:focus { border-color: var(--color-accent); }

.input.textarea { /* Contact specific textarea */
  height: 200px;
  max-width: 100%;
  margin-bottom: 30px; /* Add margin below textarea */
  padding-top: 20px;
}

/* Override common button style if needed */
.button.contact-form-button {
  width: 100%;
  padding: 19px 24px; /* Re-apply padding */
  background-color: var(--color-accent); /* Match general button */
  color: var(--color-white);
  border: 1px solid transparent;
}
.button.contact-form-button:hover {
    background-color: var(--color-text-dark);
}

/* Hide the built-in success/error messages if using toasts */
.success-message.my-form-done,
.error-message.my-form-fail {
    display: none !important;
}

/* Media Queries for Contact Specifics */
@media screen and (max-width: 991px) {
    .contact-wrapper {
        /* No changes needed yet */
    }
}

@media screen and (max-width: 767px) {
    .contact-wrapper {
        /* No changes needed yet */
    }
}

@media screen and (max-width: 479px) {
    .contact-wrapper {
        max-width: 92%; /* More width on small screens */
    }

    .form-field-wrapper {
        flex-direction: column; /* Stack elements */
        gap: 0; /* Remove gap when stacked */
        margin-bottom: 0; /* Remove margin from the wrapper itself */
    }

    .input {
        max-width: 100%;
        margin-bottom: 20px; /* *** CONSISTENT spacing below EACH input *** */
        height: 52px; /* Further refine height */
        padding: 0 16px; /* Adjust padding */
        font-size: 15px; /* Slightly larger for readability */
    }

    /* The textarea already has margin-bottom: 30px, which is good spacing before the button */
    .input.textarea {
        height: 150px; /* Adjust textarea height */
        margin-bottom: 30px; /* Ensure adequate space before button */
        padding-top: 14px;
        padding-bottom: 14px;
    }

    /* No need to remove margin from last input, we want consistency */
    /* REMOVED: .input:last-child { margin-bottom: 0; } */

    .button.contact-form-button {
        padding: 15px 20px;
        font-size: 16px;
        font-weight: 700;
    }
}