/* Appointment forms: presentation only; form markup and validation stay intact. */
/* Preserve the bottom panel's original green design, spacing and height. */
html body #contact .contact-form form.lead-form .form-control {
    background-color: #fff !important;
    color: #243642 !important;
}
html body #contact .contact-form form.lead-form .form-control::placeholder {
    color: #5f6c78 !important;
    opacity: 1 !important;
}
html body .modal:has(form.lead-form) .modal-dialog {
    width: calc(100% - 32px);
    max-width: 640px;
    margin: 28px auto;
}
html body .modal:has(form.lead-form) .modal-content {
    max-height: calc(100dvh - 56px);
    overflow-y: auto;
    background: #fff;
    border: 1px solid #e2e7ec;
    border-radius: 18px;
    box-shadow: 0 24px 80px rgba(20, 36, 51, .24);
    color: #263746;
    font-family: Arial, sans-serif;
}
html body .modal:has(form.lead-form) .modal-header {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 22px 28px;
    background: #f8fafb;
    border-bottom: 1px solid #e7ebef;
}
html body .modal:has(form.lead-form) .modal-title {
    padding: 0;
    margin: 0;
    color: #243642;
    font: 700 21px/1.35 Arial, sans-serif;
    text-align: left;
    text-shadow: none;
}
html body .modal:has(form.lead-form) .modal-header .close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    margin: -4px -8px 0 12px;
    background: #edf1f4;
    border: 0;
    border-radius: 50%;
    color: #4c5b68;
    font: 400 26px/1 Arial, sans-serif;
    opacity: 1;
    text-shadow: none;
}
html body .modal:has(form.lead-form) .modal-header .close:hover {
    background: #e3e9ee;
    color: #243642;
}
html body .modal:has(form.lead-form) .modal-body { padding: 24px 28px 28px; }
html body .modal form.lead-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 16px;
    margin: 0;
    padding: 0;
    background: transparent;
    text-align: left;
}
html body .modal form.lead-form > * { grid-column: 1 / -1; min-width: 0; }
html body .modal form.lead-form > .form-group:has(input[name="first_name"]),
html body .modal form.lead-form > .form-group:has(input[name="last_name"]),
html body .modal form.lead-form > .form-group:has(input[name="email"]),
html body .modal form.lead-form > .form-group:has(input[name="phone"]) { grid-column: auto; }
html body .modal form.lead-form .form-group {
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    text-align: left;
}
/* Empty status and verification wrappers should not add blank rows. */
html body .modal form.lead-form > .form-group:has(> .g-recaptcha-widget:empty):has(> .recaptchaMessage[style*="display: none"]),
html body .modal form.lead-form > .form-group.text-center:has(> .formMessage:empty) { display: none; }
html body .modal form.lead-form .form-label {
    display: block;
    margin: 0 0 8px;
    padding: 0;
    color: #30414e;
    font: 600 14px/1.4 Arial, sans-serif;
    text-align: left;
}
html body .modal form.lead-form .form-control {
    box-sizing: border-box;
    width: 100%;
    height: 48px;
    padding: 12px 14px;
    border: 1px solid #cdd5dc !important;
    border-radius: 8px;
    background-color: #fff !important;
    color: #243642 !important;
    font: 400 15px/1.5 Arial, sans-serif;
    box-shadow: 0 1px 2px rgba(20, 36, 51, .025);
    text-align: left;
    transition: border-color .15s, box-shadow .15s;
}
html body .modal form.lead-form .form-control::placeholder {
    color: #66727e !important;
    font: 400 14px/1.5 Arial, sans-serif;
    opacity: 1 !important;
}
html body .modal form.lead-form textarea.form-control {
    height: auto;
    min-height: 96px;
    resize: vertical;
}
html body .modal form.lead-form .form-control:focus {
    outline: 0;
    border-color: #da6870 !important;
    box-shadow: 0 0 0 3px rgba(218, 104, 112, .14);
}
html body .modal form.lead-form .form-control.is-invalid,
html body .modal form.lead-form.was-validated .form-control:invalid {
    border-color: #c9464e !important;
    padding-right: 38px;
    background-color: #fffbfb !important;
}
html body .modal form.lead-form .invalid-feedback,
html body .modal form.lead-form .text-danger {
    margin-top: 7px;
    color: #b5363f !important;
    font: 400 13px/1.5 Arial, sans-serif !important;
}
html body .modal form.lead-form .privacyConsent {
    padding: 16px !important;
    background: #f6f8fa;
    border: 1px solid #e4e9ee;
    border-radius: 10px;
}
html body .modal form.lead-form .privacyConsent .form-check-label {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    margin: 0;
    padding: 0;
    min-height: 0;
    color: #52606b;
    font: 400 12px/1.65 Arial, sans-serif;
    text-align: left;
}
html body .modal form.lead-form .privacyConsent .form-check-label span {
    color: inherit;
    font: inherit;
}
html body .modal form.lead-form .privacyConsent input[type="checkbox"] {
    position: static;
    float: none;
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    accent-color: #c9464e;
    cursor: pointer;
}
html body .modal form.lead-form .privacyConsent a {
    color: #a5313c;
    text-decoration: underline;
    text-underline-offset: 2px;
}
html body .modal form.lead-form .appointment-container {
    margin: 0;
    padding: 0;
}
html body .modal form.lead-form .submit-btn,
html body .modal form.lead-form button[type="submit"] {
    box-sizing: border-box;
    width: 100%;
    min-height: 48px;
    margin: 0;
    padding: 12px 18px;
    background: #c83e4b;
    border: 1px solid #c83e4b;
    border-radius: 8px;
    color: #fff;
    font: 700 15px/1.4 Arial, sans-serif;
    text-transform: none;
    text-shadow: none;
    box-shadow: 0 3px 8px rgba(165, 49, 60, .12);
}
html body .modal form.lead-form button[type="submit"]:hover { background: #b33340; border-color: #b33340; }
html body .modal form.lead-form button[type="submit"]:disabled { opacity: .65; }
html body .modal:has(form.lead-form) button:focus-visible {
    outline: 3px solid #903541;
    outline-offset: 3px;
}
html body .modal:has(form.lead-form) .chat-booking-alternative {
    margin: 18px 0 0;
    padding: 16px;
    background: #f6f8fa;
    border-color: #e4e9ee;
    border-radius: 10px;
    color: #52606b;
}
@media (max-width: 575px) {
    html body .modal:has(form.lead-form) .modal-dialog { width: calc(100% - 20px); margin: 10px auto; }
    html body .modal:has(form.lead-form) .modal-content { max-height: calc(100dvh - 20px); border-radius: 14px; }
    html body .modal:has(form.lead-form) .modal-header { padding: 18px; }
    html body .modal:has(form.lead-form) .modal-title { font-size: 19px; }
    html body .modal:has(form.lead-form) .modal-body { padding: 20px 18px; }
    html body .modal form.lead-form { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    html body .modal form.lead-form .privacyConsent { padding: 14px !important; }
}