.elementor-313 .elementor-element.elementor-element-32cce3a{--display:flex;--margin-top:50px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-313 .elementor-element.elementor-element-17daf5a{text-align:center;}.elementor-313 .elementor-element.elementor-element-17daf5a .elementor-heading-title{color:#3D5870;}/* Start custom CSS for shortcode, class: .elementor-element-1df0d95 */.wpuf-form-add,
.wpuf-form-add * {
    box-sizing: border-box;
}

/* ---- Outer form container — give it a card look ---- */
.wpuf-form,
.wpuf-form-add {
    max-width: 720px;
    margin: 0 auto 60px;
    background: #ffffff;
  
    border-radius: 18px;
    padding: 36px 40px;
   
    font-family: inherit;
    color: #1f2937;
}

/* ---- Kill the bullet points on every field row ---- */
.wpuf-form ul,
.wpuf-form-add ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.wpuf-form ul li,
.wpuf-form-add ul li,
.wpuf-form .wpuf-el,
.wpuf-form-add .wpuf-el {
    list-style: none !important;
    margin: 0 0 26px !important;
    padding: 0 !important;
}

/* ---- Field labels ---- */
.wpuf-form label,
.wpuf-form-add label,
.wpuf-form .wpuf-label label,
.wpuf-form-add .wpuf-label label {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #3d5870;
    margin-bottom: 8px;
}

.wpuf-form label .required,
.wpuf-form-add label .required {
    color: #e0584f;
    margin-left: 2px;
}

/* ---- Helper / description text under a field ---- */
.wpuf-form .help-block,
.wpuf-form-add .help-block,
.wpuf-form .wpuf-help,
.wpuf-form-add .wpuf-help {
    font-size: 13px;
    color: #6b7280;
    margin-top: 6px;
}

/* ---- Text inputs, textareas, native selects ---- */
.wpuf-form input[type="text"],
.wpuf-form input[type="email"],
.wpuf-form input[type="number"],
.wpuf-form input[type="url"],
.wpuf-form input[type="tel"],
.wpuf-form textarea,
.wpuf-form select,
.wpuf-form-add input[type="text"],
.wpuf-form-add input[type="email"],
.wpuf-form-add input[type="number"],
.wpuf-form-add input[type="url"],
.wpuf-form-add input[type="tel"],
.wpuf-form-add textarea,
.wpuf-form-add select {
    width: 100%;
    font-size: 15px;
    font-family: inherit;
    color: #1f2937;
    background: #f9fafb;
    border: 1.5px solid #d8e1e8;
    border-radius: 10px;
    padding: 12px 14px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    appearance: none;
    -webkit-appearance: none;
}

.wpuf-form input[type="text"]::placeholder,
.wpuf-form textarea::placeholder,
.wpuf-form-add input[type="text"]::placeholder,
.wpuf-form-add textarea::placeholder {
    color: #9ca3af;
}

.wpuf-form input[type="text"]:focus,
.wpuf-form input[type="email"]:focus,
.wpuf-form textarea:focus,
.wpuf-form select:focus,
.wpuf-form-add input[type="text"]:focus,
.wpuf-form-add input[type="email"]:focus,
.wpuf-form-add textarea:focus,
.wpuf-form-add select:focus {
    outline: none;
    background: #ffffff;
    border-color: #3d5870;
    box-shadow: 0 0 0 3px rgba(61, 88, 112, 0.14);
}

/* ---- Multi-select category box specifically ---- */
.wpuf-form select[multiple],
.wpuf-form-add select[multiple] {
    min-height: 130px;
    background-image: none;
    padding: 6px;
}

.wpuf-form select[multiple] option,
.wpuf-form-add select[multiple] option {
    padding: 8px 10px;
    border-radius: 6px;
    margin-bottom: 2px;
}

.wpuf-form select[multiple] option:checked,
.wpuf-form-add select[multiple] option:checked {
    background: #3d5870 linear-gradient(0deg, #3d5870 0%, #3d5870 100%);
    color: #ffffff;
}

/* ---- Single-line select (non-multiple) gets a custom arrow ---- */
.wpuf-form select:not([multiple]),
.wpuf-form-add select:not([multiple]) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%233d5870' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 38px;
    cursor: pointer;
}

/* ---- "Insert Photo" link / button above the editor ---- */
.wpuf-form .wpuf-insert-photo,
.wpuf-form-add .wpuf-insert-photo,
.wpuf-form a.wpuf-insert-photo,
.wpuf-form-add a.wpuf-insert-photo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 700;
    color: #3d5870;
    text-decoration: none;
    margin-bottom: 10px;
}

.wpuf-form .wpuf-insert-photo:hover,
.wpuf-form-add .wpuf-insert-photo:hover {
    text-decoration: underline;
}

/* ---- Rich text editor (classic WordPress WYSIWYG / TinyMCE) ----
   IMPORTANT: TinyMCE renders its OWN toolbar in regular HTML (the part
   below CAN be styled), but the actual typing area is an <iframe> with
   its own internal stylesheet. Page CSS cannot reach inside that iframe.
   If the text you TYPE still looks unstyled, that's expected — it's
   controlled by TinyMCE's "editor-style.css", added via the
   add_editor_style() WordPress function, not by this file. Everything
   else (toolbar, dropdown, borders, icons) below WILL work. */

.wpuf-form .wp-editor-wrap,
.wpuf-form-add .wp-editor-wrap {
    border: 1.5px solid #d8e1e8 !important;
    border-radius: 10px;
    overflow: hidden;
    background: #ffffff;
}

/* Toolbar row(s) — classic editor has up to 2 rows (mce-toolbar-grp wraps both) */
.wpuf-form .mce-toolbar-grp,
.wpuf-form-add .mce-toolbar-grp,
.wpuf-form .mce-container-body,
.wpuf-form-add .mce-container-body {
    background: #f3f6f7 !important;
    border-bottom: 1px solid #e3e8ea !important;
}

.wpuf-form .mce-toolbar,
.wpuf-form-add .mce-toolbar {
    padding: 6px 8px !important;
}

/* The "Paragraph" format dropdown specifically */
.wpuf-form .mce-listbox,
.wpuf-form-add .mce-listbox,
.wpuf-form .mce-listbox button,
.wpuf-form-add .mce-listbox button {
    background: #ffffff !important;
    border: 1px solid #d8e1e8 !important;
    border-radius: 6px !important;
    color: #3d5870 !important;
    font-weight: 600 !important;
}

/* Icon buttons (bold, italic, lists, etc.) */
.wpuf-form .mce-btn button,
.wpuf-form-add .mce-btn button {
    border-radius: 6px !important;
}

.wpuf-form .mce-btn:hover,
.wpuf-form-add .mce-btn:hover,
.wpuf-form .mce-btn.mce-active,
.wpuf-form-add .mce-btn.mce-active {
    background: #e3e8ea !important;
    border-radius: 6px !important;
}

/* Divider lines between icon groups */
.wpuf-form .mce-btn-group:not(:first-child),
.wpuf-form-add .mce-btn-group:not(:first-child) {
    border-left: 1px solid #d8e1e8 !important;
    padding-left: 6px !important;
    margin-left: 4px !important;
}

/* The bottom resize/status bar ("Path: p" + word count) */
.wpuf-form .mce-statusbar,
.wpuf-form-add .mce-statusbar {
    background: #ffffff !important;
    border-top: 1px solid #e3e8ea !important;
    padding: 4px 10px !important;
}

/* The iframe element itself — this controls OUTER sizing/border only,
   not the text styling inside it (see note above) */
.wpuf-form .mce-edit-area,
.wpuf-form-add .mce-edit-area,
.wpuf-form .mce-edit-area iframe,
.wpuf-form-add .mce-edit-area iframe,
.wpuf-form textarea.wp-editor-area,
.wpuf-form-add textarea.wp-editor-area {
    min-height: 240px !important;
    background: #ffffff !important;
}

/* If your theme/page also loads Quill instead of TinyMCE on some forms,
   these keep working too — harmless if unused */
.wpuf-form .ql-container,
.wpuf-form-add .ql-container {
    border: 1.5px solid #d8e1e8 !important;
    border-radius: 10px;
    overflow: hidden;
    background: #ffffff;
}

.wpuf-form .ql-toolbar,
.wpuf-form-add .ql-toolbar {
    background: #f3f6f7 !important;
    border-bottom: 1px solid #e3e8ea !important;
    padding: 8px 10px !important;
}

/* ---- Submit button ---- */
.wpuf-form input[type="submit"],
.wpuf-form button[type="submit"],
.wpuf-form .wpuf-submit input,
.wpuf-form-add input[type="submit"],
.wpuf-form-add button[type="submit"],
.wpuf-form-add .wpuf-submit input {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #46657f 0%, #3d5870 100%);
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    border: none;
    border-radius: 10px;
    padding: 13px 28px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 8px 18px rgba(61, 88, 112, 0.18);
}

.wpuf-form input[type="submit"]:hover,
.wpuf-form button[type="submit"]:hover,
.wpuf-form-add input[type="submit"]:hover,
.wpuf-form-add button[type="submit"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(61, 88, 112, 0.24);
}

/* ---- Validation error messages ---- */
.wpuf-form .wpuf-error,
.wpuf-form-add .wpuf-error,
.wpuf-form label.wpuf_error,
.wpuf-form-add label.wpuf_error {
    color: #e0584f;
    font-size: 13px;
    margin-top: 6px;
    display: block;
}

/* ---- Mobile tweak ---- */
@media (max-width: 640px) {
    .wpuf-form,
    .wpuf-form-add {
        padding: 26px 22px;
        border-radius: 14px;
    }
}/* End custom CSS */