/*
 * Unified trial lesson lead form.
 * Loaded after page CSS to make every sign-up form look and behave the same.
 */
:root {
    --lead-form-ink: #111827;
    --lead-form-muted: #58667a;
    --lead-form-line: #d6dde8;
    --lead-form-field: #fbfcff;
    --lead-form-blue: #2457c5;
    --lead-form-button: #f59e0b;
    --lead-form-button-hover: #e89105;
}

.modal-content:has(form[data-endpoint="/api/send-lead"]) {
    width: min(100%, 520px) !important;
    padding: clamp(1.5rem, 3vw, 2rem) !important;
    background: #ffffff !important;
    color: var(--lead-form-ink) !important;
    border: 1px solid rgba(20, 33, 61, 0.1) !important;
    border-radius: 18px !important;
    box-shadow: 0 24px 60px rgba(20, 33, 61, 0.18) !important;
}

.modal-content:has(form[data-endpoint="/api/send-lead"]) h2 {
    margin: 0 2.8rem 0.35rem 0 !important;
    color: var(--lead-form-ink) !important;
    font-size: clamp(1.8rem, 3.2vw, 2.35rem) !important;
    line-height: 1.05 !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
}

.modal-content:has(form[data-endpoint="/api/send-lead"]) .modal-desc {
    margin: 0 0 1.25rem !important;
    color: var(--lead-form-muted) !important;
    font-size: 0.95rem !important;
    line-height: 1.45 !important;
}

form[data-endpoint="/api/send-lead"] {
    display: grid !important;
    gap: 0.9rem !important;
    width: 100% !important;
    margin: 0 !important;
}

form[data-endpoint="/api/send-lead"] .form-group,
form[data-endpoint="/api/send-lead"] .lead-form-field {
    display: grid !important;
    gap: 0.42rem !important;
    margin: 0 !important;
}

form[data-endpoint="/api/send-lead"] label {
    color: var(--lead-form-ink) !important;
    font-size: 0.95rem !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
}

form[data-endpoint="/api/send-lead"] input,
form[data-endpoint="/api/send-lead"] select,
form[data-endpoint="/api/send-lead"] textarea {
    width: 100% !important;
    min-height: 56px !important;
    padding: 0.9rem 1rem !important;
    background: var(--lead-form-field) !important;
    color: var(--lead-form-ink) !important;
    border: 1px solid var(--lead-form-line) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    font: 600 1rem/1.3 var(--font-main, 'Manrope', sans-serif) !important;
    outline: none !important;
}

form[data-endpoint="/api/send-lead"] input::placeholder,
form[data-endpoint="/api/send-lead"] textarea::placeholder {
    color: #6b7280 !important;
    opacity: 1 !important;
}

form[data-endpoint="/api/send-lead"] input:focus,
form[data-endpoint="/api/send-lead"] select:focus,
form[data-endpoint="/api/send-lead"] textarea:focus {
    border-color: var(--lead-form-blue) !important;
    box-shadow: 0 0 0 4px rgba(36, 87, 197, 0.12) !important;
}

form[data-endpoint="/api/send-lead"] button[type="submit"] {
    width: 100% !important;
    min-height: 56px !important;
    margin: 0.25rem 0 0 !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: var(--lead-form-button) !important;
    color: #111827 !important;
    font: 900 0.98rem/1.2 var(--font-main, 'Manrope', sans-serif) !important;
    text-align: center !important;
    justify-content: center !important;
}

form[data-endpoint="/api/send-lead"] button[type="submit"]:hover {
    background: var(--lead-form-button-hover) !important;
}

form[data-endpoint="/api/send-lead"] .form-privacy {
    margin: -0.15rem 0 0 !important;
    color: var(--lead-form-muted) !important;
    font-size: 0.88rem !important;
    line-height: 1.45 !important;
    text-align: left !important;
}

form[data-endpoint="/api/send-lead"] .form-privacy a {
    color: var(--lead-form-blue) !important;
    text-decoration: underline !important;
    text-decoration-color: rgba(36, 87, 197, 0.45) !important;
    text-underline-offset: 3px !important;
}

form[data-endpoint="/api/send-lead"] .form-status {
    min-height: 1.2rem !important;
    margin: 0 !important;
    color: var(--lead-form-muted) !important;
    font-size: 0.9rem !important;
    line-height: 1.35 !important;
}

form[data-endpoint="/api/send-lead"] .form-status[data-state="error"] {
    color: #b42318 !important;
}

form[data-endpoint="/api/send-lead"] .form-status[data-state="success"] {
    color: #047857 !important;
}

@media (max-width: 560px) {
    .modal-content:has(form[data-endpoint="/api/send-lead"]) {
        padding: 1.2rem !important;
    }

    .modal-content:has(form[data-endpoint="/api/send-lead"]) h2 {
        font-size: 1.75rem !important;
    }
}