/* The /contactus route's own stylesheet, lifted verbatim from the live site.
   Next.js splits CSS per route, so none of this was in the files captured from
   the homepage and product pages.

   Only edit: the background image URL, repointed from /images/signup/ to the
   copy already in the theme. Loaded only on /contactus, by inc/contact-page.php. */

.contactUs_main__LyUpT {
    background-image: linear-gradient(90deg, rgba(0,0,0,.9) 40%, rgba(0,0,0,.65) 65%, rgba(0,0,0,.4) 77%),
                      url("img/signup/signup_bg.jpg");
    background-repeat: no-repeat; background-position: 100% 0; background-size: cover;
    padding: 3rem 2rem 4rem; margin: 0 auto;
}
.contactUs_main__LyUpT > h1 { margin-bottom: 2rem; color: var(--white); text-align: center; font-size: 3rem; }
.contactUs_main__LyUpT section {
    display: flex; align-items: flex-start; justify-content: center;
    max-width: 1400px; margin: 0 auto; gap: 2rem;
}

.contactUs_contact_methods_container__rUJEG {
    flex-grow: 1; height: auto; background-color: var(--white);
    padding: 2rem; border-radius: 6px; cursor: default;
}
.contactUs_contact_methods_container__rUJEG h2 { text-align: center; margin-bottom: 1.5rem; }
.contactUs_contact_method__EPaIf {
    display: flex; gap: 1rem; text-transform: none;
    padding: 10px 0; border-bottom: 1px solid var(--tone-black);
}
.contactUs_contact_method__EPaIf img { width: 40px; height: auto; object-fit: contain; flex-shrink: 0; }
.contactUs_logo_img__8DnRo { background-color: var(--charcoal); }
.contactUs_contact_method__EPaIf p { line-break: anywhere; }
.contactUs_contact_method__EPaIf a,
.contactUs_contact_method__EPaIf p:last-of-type { color: var(--charcoal); font-weight: 700; }
.contactUs_contact_method__EPaIf p:first-of-type { color: var(--tone-black); font-weight: 400; }

.contactUsForm_contactus_form_container__sZz_X {
    width: min(70%, 800px); background-color: white; border-radius: 8px;
}
.contactUsForm_contactus_form_container__sZz_X form {
    display: flex; flex-direction: column; width: 100%; padding: 0 2rem 2rem;
}
.contactUsForm_popup_heading__lHMWF { position: relative; padding: 2rem; }
.contactUsForm_popup_heading__lHMWF h2 { font-weight: 600; }
.contactUsForm_popup_heading__lHMWF p { margin-top: 1rem; font-style: italic; color: var(--tone-black); }
.contactUsForm_form_control_row__cecRq { display: flex; gap: 2rem; }
.contactUsForm_form_control__0uNcE { display: flex; flex-direction: column; width: 100%; margin: 1rem 0; }
.contactUsForm_form_control__0uNcE label {
    font-weight: 500; font-size: 1rem; text-transform: capitalize; color: var(--tone-black);
}
.contactUsForm_form_control__0uNcE input,
.contactUsForm_form_control__0uNcE select,
.contactUsForm_form_control__0uNcE textarea {
    margin: 10px 0; padding: 12px; border-radius: 4px; border: 2px solid gray;
    outline: none; width: 100%; background-color: transparent;
}
.contactUsForm_form_control__0uNcE textarea { resize: none; height: 150px; }
.contactUsForm_error_msg__r_NSq { color: red; }
.contactUsForm_input_invalid__itjBr { border: 2px solid red !important; }
.contactUsForm_input_valid__sBDcS { border: 2px solid green !important; }
.contactUsForm_contactus_actions__O5wKA { display: flex; gap: 1rem; }
.contactUsForm_contactus_actions__O5wKA button {
    width: 100px; padding: .5rem 1rem; border-radius: 4px; cursor: pointer;
}
.contactUsForm_contactus_actions__O5wKA button:first-of-type {
    background-color: var(--charcoal); color: var(--white); border: 2px solid var(--charcoal);
}
.contactUsForm_contactus_actions__O5wKA button:last-of-type {
    background-color: transparent; color: var(--charcoal); border: 2px solid var(--charcoal);
}

@media screen and (max-width: 1000px) { .contactUs_contact_methods_container__rUJEG { width: 300px; } }
@media screen and (max-width: 900px) {
    .contactUs_main__LyUpT section { flex-direction: column-reverse; align-items: center; }
    .contactUs_contact_methods_container__rUJEG { width: 70%; }
}
@media screen and (max-width: 700px) {
    .contactUs_contact_methods_container__rUJEG { width: 100%; }
    .contactUsForm_contactus_form_container__sZz_X { width: 100%; background-color: white; border-radius: 8px; }
}
@media screen and (max-width: 500px) {
    .contactUsForm_form_control_row__cecRq { flex-direction: column; gap: 0; }
    .contactUsForm_contactus_actions__O5wKA button { width: 100%; }
}

/* Added here, not on the live site: it posts to an API and shows a toast, while
   this posts and redirects, so the outcome needs somewhere to appear. */
.tbds-form-notice {
    margin: 0 2rem 1.5rem; padding: 1rem 1.25rem; border-radius: 6px;
    font-size: .95rem; line-height: 1.5;
}
.tbds-form-notice--ok { background: #e8f5ec; border: 1px solid #7fbf95; color: #1d5c33; }
.tbds-form-notice--bad { background: #fdecec; border: 1px solid #e0a1a1; color: #8a2020; }
.tbds-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }