/* ========================================================= Tree Pros — WPForms skin. Shipped as a SEPARATE stylesheet so it can be dropped without touching theme.css. These rules win on SPECIFICITY, not on load order. WPForms styles its own fields at (0,3,2) — e.g. `div.wpforms-container-full .wpforms-form input[type=text]` — and it enqueues its stylesheet when the shortcode renders, which can be after this file has already printed in . So every rule here carries .tp-formwrap + .wpforms-container + .wpforms-form to reach (0,4,x) and win regardless of which sheet comes last. The late enqueue priority is belt-and-braces only. Raising specificity is safe HERE precisely because these are plugin-owned form fields, not Elementor widget content: there is no Elementor style control for this markup to trample. Never do this to widget styling. ========================================================= */ .tp-formwrap .wpforms-container, .tp-formwrap div.wpforms-container-full{margin:0;padding:0} .tp-formwrap .wpforms-container .wpforms-form{margin:0} /* labels */ .tp-formwrap .wpforms-container .wpforms-form .wpforms-field-label{ font-family:var(--tp-head);font-weight:600;font-size:14px; letter-spacing:.08em;text-transform:uppercase; color:var(--tp-ink);margin:0 0 7px;display:block; } .tp-formwrap .wpforms-container .wpforms-form .wpforms-field-sublabel, .tp-formwrap .wpforms-container .wpforms-form .wpforms-field-description{ font-family:var(--tp-body);font-size:13px;color:var(--tp-ink-soft); text-transform:none;letter-spacing:0;font-weight:400; } .tp-formwrap .wpforms-container .wpforms-form .wpforms-required-label{color:var(--tp-accent);border:0} /* fields */ .tp-formwrap .wpforms-container .wpforms-form input[type="text"], .tp-formwrap .wpforms-container .wpforms-form input[type="email"], .tp-formwrap .wpforms-container .wpforms-form input[type="tel"], .tp-formwrap .wpforms-container .wpforms-form input[type="url"], .tp-formwrap .wpforms-container .wpforms-form input[type="number"], .tp-formwrap .wpforms-container .wpforms-form input[type="date"], .tp-formwrap .wpforms-container .wpforms-form select, .tp-formwrap .wpforms-container .wpforms-form textarea{ width:100%;max-width:100%;box-sizing:border-box; font-family:var(--tp-body);font-size:16px;line-height:1.5; color:var(--tp-ink);background:var(--tp-bg); border:2px solid var(--tp-grey);border-radius:0; padding:13px 14px;height:auto; transition:border-color .15s,background .15s; } .tp-formwrap .wpforms-container .wpforms-form textarea{min-height:140px;resize:vertical} .tp-formwrap .wpforms-container .wpforms-form input:focus, .tp-formwrap .wpforms-container .wpforms-form select:focus, .tp-formwrap .wpforms-container .wpforms-form textarea:focus{ border-color:var(--tp-accent);background:var(--tp-paper); outline:2px solid rgba(30,111,71,.18);outline-offset:1px; } .tp-formwrap .wpforms-container .wpforms-form .wpforms-field{padding:0 0 20px} /* file upload (résumés on the careers form) */ .tp-formwrap .wpforms-container .wpforms-form .wpforms-uploader{ border:2px dashed var(--tp-grey);background:var(--tp-bg);border-radius:0; } .tp-formwrap .wpforms-container .wpforms-form .wpforms-uploader:hover{border-color:var(--tp-accent)} /* checkboxes / radios */ .tp-formwrap .wpforms-container .wpforms-form ul li label{ font-family:var(--tp-body);font-size:15.5px;text-transform:none; letter-spacing:0;font-weight:400;color:var(--tp-ink-soft); } .tp-formwrap .wpforms-container .wpforms-form input[type="checkbox"], .tp-formwrap .wpforms-container .wpforms-form input[type="radio"]{ width:auto;accent-color:var(--tp-accent);margin-right:8px; } /* submit — matches .tp-btn exactly */ .tp-formwrap .wpforms-container .wpforms-form button[type="submit"], .tp-formwrap .wpforms-container .wpforms-form .wpforms-submit{ display:inline-block; background:var(--tp-accent);color:#F5F5F5; font-family:var(--tp-head);font-weight:600;font-size:17px;line-height:1; letter-spacing:.06em;text-transform:uppercase; padding:17px 30px;border:2px solid var(--tp-accent);border-radius:0; cursor:pointer;transition:background .15s,border-color .15s; width:auto;height:auto; } .tp-formwrap .wpforms-container .wpforms-form button[type="submit"]:hover, .tp-formwrap .wpforms-container .wpforms-form .wpforms-submit:hover{ background:var(--tp-green);border-color:var(--tp-green);color:#fff; } .tp-formwrap .wpforms-container .wpforms-form .wpforms-submit-container{padding:6px 0 0} /* validation + confirmation. Errors stay red: that is a status colour, not a brand colour, and green-on-green would read as success. */ .tp-formwrap .wpforms-container .wpforms-form label.wpforms-error, .tp-formwrap .wpforms-container .wpforms-form em.wpforms-error{ color:#B3261E;font-family:var(--tp-body);font-size:13.5px; text-transform:none;letter-spacing:0;font-weight:500;margin-top:6px; } .tp-formwrap .wpforms-container .wpforms-form input.wpforms-error, .tp-formwrap .wpforms-container .wpforms-form textarea.wpforms-error, .tp-formwrap .wpforms-container .wpforms-form select.wpforms-error{border-color:#B3261E} /* WPForms swaps the confirmation into the same container, so scope it the same way — unscoped it would sit at (0,1,0) and lose to the plugin's own div.wpforms-confirmation-container-full. */ .tp-formwrap .wpforms-container div.wpforms-confirmation-container-full, .tp-formwrap div[submit-success] > div.wpforms-confirmation-container-full{ background:#EAF3ED;border:0;border-left:5px solid var(--tp-accent); color:var(--tp-ink);padding:20px 22px;margin:0;border-radius:0; } /* Elementor editor: the form is a shortcode, so the editor shows a placeholder — keep it from collapsing to zero height. */ body.elementor-editor-active .tp-formwrap{min-height:80px}