/* PROFESSIONAL MORTGAGE QUOTE FORM STYLES */
/* Company colors: #00567a (primary blue), #3d8c6e (accent green), #c0c0c0 (gray), white */
:root {
–q-primary: #00567a;
–q-primary-dark: #004a6b;
–q-accent: #3d8c6e;
–q-accent-dark: #357a5f;
–q-gray: #c0c0c0;
–q-gray-light: #e5e5e5;
–q-white: #ffffff;
–q-text: #1f2937;
–q-text-light: #6b7280;
}
/* Scope to your specific page / form to avoid affecting other parts of the site */
.quote-page,
.elementor-15210 .elementor-element-f990788,
.wpcf7#wpcf7-f15209-o1 {
font-family: ‘Inter’, system-ui, -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Arial, sans-serif;
}
/* Hide the old plain intro text and old shortcode container when using the new HTML widget (optional – comment out if keeping Elementor widgets) */
.elementor-element-47aa134 .elementor-widget-text-editor,
.elementor-element-f990788 {
/* display: none; */ /* Uncomment if you fully replace with the HTML widget version */
}
/* === Modern Form Card & Layout === */
.quote-form {
max-width: 820px;
margin: 0 auto;
}
.quote-form .wpcf7-form {
margin: 0 !important;
}
.quote-form .form-section {
margin-bottom: 26px;
}
.quote-form .section-title {
font-size: 1rem;
font-weight: 600;
color: var(–q-primary);
margin: 0 0 12px 0;
padding-bottom: 6px;
border-bottom: 2px solid var(–q-gray-light);
display: flex;
align-items: center;
gap: 8px;
}
.quote-form .form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
margin-bottom: 16px;
}
@media (max-width: 640px) {
.quote-form .form-row {
grid-template-columns: 1fr;
}
}
.quote-form .form-group label {
display: block;
font-size: 0.875rem;
font-weight: 600;
color: var(–q-text);
margin-bottom: 5px;
}
.quote-form .form-group label .required {
color: #ef4444;
}
/* Clean modern inputs using your brand colors */
.quote-form .quote-input,
.quote-form .quote-select,
.quote-form .quote-textarea,
.wpcf7-form .wpcf7-text,
.wpcf7-form .wpcf7-email,
.wpcf7-form .wpcf7-select,
.wpcf7-form .wpcf7-textarea {
width: 100%;
padding: 11px 15px;
border: 1.5px solid var(–q-gray);
border-radius: 9px;
font-size: 1rem;
line-height: 1.4;
transition: border-color 0.2s, box-shadow 0.2s;
background: #fff;
color: var(–q-text);
font-family: inherit;
}
.quote-form .quote-input:focus,
.quote-form .quote-select:focus,
.quote-form .quote-textarea:focus,
.wpcf7-form .wpcf7-text:focus,
.wpcf7-form .wpcf7-email:focus,
.wpcf7-form .wpcf7-select:focus,
.wpcf7-form .wpcf7-textarea:focus {
border-color: var(–q-primary);
box-shadow: 0 0 0 3px rgba(0, 86, 122, 0.12);
outline: none;
}
.quote-form .quote-select,
.wpcf7-form .wpcf7-select {
background-image: url(“data:image/svg+xml,%3Csvg xmlns=’http://www.w3.org/2000/svg’ width=’18’ height=’18’ viewBox=’0 0 24 24′ fill=’none’ stroke=’%236b7280′ stroke-width=’2.25′ stroke-linecap=’round’ stroke-linejoin=’round’%3E%3Cpolyline points=’6 9 12 15 18 9’%3E%3C/polyline%3E%3C/svg%3E”);
background-repeat: no-repeat;
background-position: right 13px center;
background-size: 16px;
padding-right: 38px;
appearance: none;
}
/* Currency fields visual */
.quote-form .form-group[data-currency] input,
.quote-form input[name=”loan_amount”],
.quote-form input[name=”home_value”] {
padding-left: 26px;
}
/* Submit button – prominent with accent green */
.quote-form .wpcf7-submit,
.quote-form .quote-submit {
background: linear-gradient(135deg, var(–q-accent), var(–q-accent-dark)) !important;
color: white !important;
border: none !important;
padding: 14px 42px !important;
font-size: 1.02rem !important;
font-weight: 700 !important;
border-radius: 9999px !important;
cursor: pointer !important;
transition: all 0.25s ease !important;
box-shadow: 0 4px 12px rgba(61, 140, 110, 0.35) !important;
letter-spacing: 0.4px;
width: 100%;
max-width: 320px;
display: inline-block;
margin: 8px auto 0;
}
.quote-form .wpcf7-submit:hover,
.quote-form .quote-submit:hover {
transform: translateY(-1px);
box-shadow: 0 7px 16px rgba(61, 140, 110, 0.45);
background: linear-gradient(135deg, var(–q-accent-dark), #2f6b54) !important;
}
/* Response messages */
.quote-form .wpcf7-response-output {
margin-top: 18px !important;
padding: 12px 18px !important;
border-radius: 8px !important;
font-size: 0.95rem;
}
.quote-form .wpcf7-response-output.wpcf7-mail-sent-ok {
background: #ecfdf5;
border: 1px solid #10b981;
color: #065f46;
}
/* Old label overrides (the white Arial ones) */
.quote-form label[style*=”color: white”],
.wpcf7-form label[style*=”color: white”] {
color: var(–q-text) !important;
font-size: 0.9rem !important;
font-family: inherit !important;
}
/* The old
wrappers in CF7 – clean them up */
.quote-form .wpcf7-form > p {
margin-bottom: 0 !important;
}
/* Make the overall Elementor container on this page nicer if still visible */
.elementor-element-47aa134 .e-con-inner {
background: transparent !important;
padding: 10px !important;
}
/* Optional: nice focus ring using primary blue for all form controls on the page */
.wpcf7-form-control:focus {
border-color: var(–q-primary) !important;
}
/* Small polish for the entire quote area */
@media (max-width: 768px) {
.quote-form .form-row {
gap: 14px;
}
}
