/* Additions for components that replaced third-party embeds. The base look comes from the site's own
   Webflow classes (form_input, form_label, button…); these rules only adapt them to the dark modals. */

.vc-lead { width: 100%; max-width: 40rem; margin: 0 auto; padding: 0 1.5rem 1.5rem; text-align: left; color: #ffffffd9; }
.vc-lead_form { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1rem; }
.vc-lead_form > * { min-width: 0; }
.vc-lead_full, .vc-lead_submit, .vc-lead_error, .vc-lead_turnstile { grid-column: 1 / -1; }
@media (max-width: 600px) { .vc-lead_form { grid-template-columns: 1fr; } }
.vc-lead .form_field-wrapper { margin-bottom: 0; }
.vc-lead .form_label { display: block; margin-bottom: .3rem; font-size: .875rem; font-weight: 500; line-height: 1.3; color: #ffffffd9; }
.vc-lead .form_input { margin-bottom: .75rem; }
.vc-lead .form_input.is-text-area { min-height: 5.5rem; }
.vc-lead_req { color: var(--orange, #ff9800); }
.vc-lead .form_input { width: 100%; color: #fff; border: 1px solid var(--dark-grey, #999); border-radius: 8px; font-size: 1rem; }
.vc-lead .form_input::placeholder { color: #ffffff73; }
.vc-lead .form_input:focus { outline: none; border-color: var(--orange, #ff9800); box-shadow: 0 0 0 2px #ff980040; }
.vc-lead select.form_input { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, #ffffffd9 50%), linear-gradient(135deg, #ffffffd9 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 2.5rem; }
.vc-lead select.form_input option { color: #000; }
.vc-lead .vc-invalid { border-color: #ff5a5a; }
.vc-lead_submit { width: 100%; margin-top: .5rem; border: 0; cursor: pointer; }
.vc-lead_hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.vc-lead_turnstile { margin: .5rem 0; }
.vc-lead_error { margin-top: .75rem; border-radius: 8px; background: #ff5a5a26; color: #fff; }
.vc-lead_success { border-radius: 12px; background: #ffffff0f; color: #fff; text-align: center; }
.vc-lead_success-title { font-size: 1.25rem; font-weight: 600; margin-bottom: .5rem; }
.vc-lead_success-text { margin-bottom: 1rem; }
[hidden] { display: none !important; }

/* Inside the Webflow multistage modal: the form fills the space under the modal header and scrolls
   there if the screen is short; the modal may grow to the viewport height (was a fixed 600px). */
.multistage-form_modal-content-wrapper:has(.vc-lead) { max-height: min(720px, calc(100vh - 2rem)); max-height: min(720px, calc(100dvh - 2rem)); }
.multistage-form_iframe-container:has(.vc-lead) { overflow: hidden; }
.multistage-form_iframe-container > .w-embed:has(.vc-lead) { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.multistage-form_iframe-container .vc-lead { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-top: .5rem; }
.multistage-form_iframe-container .multistage-form_iframe-loader { display: none; }
/* Inside the .email-popup overlay the GHL iframe sat directly on the dim background; give the form a panel. */
.contact-modal1_background-overlay > .w-embed > .vc-lead,
.email-popup .contact-modal1_background-overlay .vc-lead { position: relative; z-index: 2; max-height: 90vh; overflow-y: auto; margin: 5vh auto; padding: 2rem 1.5rem; background: #000; border: 1px solid var(--dark-grey, #999); border-radius: 16px; }
.email-popup .contact-modal1_background-overlay:has(.vc-lead) { display: flex; z-index: 1; }

/* Booking step */
.vc-booking { width: 100%; }
.vc-booking_iframe { display: block; width: 100%; height: max(860px, calc(100vh - 110px)); border: 0; border-radius: 12px; background: #fff; }
@media (max-width: 767px) { .vc-booking_iframe { height: 1150px; } }
.vc-booking_thanks { margin: 0 0 1rem; padding: .875rem 1.25rem; border-radius: 12px; background: #ff98001f; border: 1px solid #ff980066; color: #fff; text-align: center; }
.vc-booking_fallback { margin: .75rem 0 0; text-align: center; font-size: .875rem; color: #ffffffa6; }
.vc-booking_fallback a { color: var(--orange, #ff9800); text-decoration: underline; }
/* Contact hero: the "200+ partners" strip is pinned to the hero's bottom edge; reserve room for it. */
.section_home-hero-contact:has(.vc-booking) { padding-bottom: 7rem; }
@media (max-width: 991px) { .section_home-hero-contact:has(.vc-booking) { padding-bottom: 15rem; } }

/* Self-hosted policy documents (formerly Termly embeds) */
.vc-policy { color: #ffffffd9; max-width: 56rem; margin: 0 auto; }
.vc-policy h1 { font-size: 2rem; margin: 0 0 1rem; }
.vc-policy h2 { font-size: 1.375rem; margin: 2rem 0 .75rem; }
.vc-policy h3 { font-size: 1.125rem; margin: 1.5rem 0 .5rem; }
.vc-policy p, .vc-policy li { line-height: 1.6; margin-bottom: .75rem; }
.vc-policy a { color: var(--orange, #ff9800); text-decoration: underline; }
.vc-policy table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .875rem; }
.vc-policy td, .vc-policy th { border: 1px solid #ffffff33; padding: .5rem; vertical-align: top; }

/* Cookie consent banner */
.vc-consent { position: fixed; z-index: 10000; left: 1rem; right: 1rem; bottom: 1rem; max-width: 34rem; margin-left: auto; display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; background: #111; color: #ffffffd9; border: 1px solid var(--border, #272727); border-radius: 12px; box-shadow: 0 8px 30px #0009; font-size: .875rem; }
.vc-consent_text { margin: 0; flex: 1 1 16rem; }
.vc-consent_text a { color: var(--orange, #ff9800); text-decoration: underline; }
.vc-consent_actions { display: flex; gap: .5rem; }
.vc-consent .button.is-secondary { background: transparent; color: #fff; border: 1px solid #ffffff73; }

/* Apply popup (.email-popup pages) close button + scroll lock */
.vc-popup-close { position: absolute; top: .5rem; right: .75rem; width: 2.5rem; height: 2.5rem; border: 0; background: transparent; color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; }
.vc-popup-close:focus-visible { outline: 2px solid var(--orange, #ff9800); border-radius: 6px; }
html.vc-popup-open, html.vc-popup-open body { overflow: hidden; }
.email-popup .vc-lead { width: calc(100% - 2rem); }

/* Webflow template leftover: at 768–991px the hero sections showed Webflow's grey "Background Image"
   placeholder (also on the original Webflow site). Keep them black like the other breakpoints. */
@media screen and (max-width: 991px) {
  .section_home-hero-2, .section_home-hero-contact { background-image: none; }
}