/*!
* D'Light — WPUF Skin v1.1
* Re-skins WP User Frontend (Free + Pro) frontend forms: login, registration
* (including custom Form-Builder registration forms), post submission, and
* the My Account dashboard — to match the D'Light Design Award brand.
*
* Selectors are intentionally verbose and prefixed with `body` to match or
* exceed WPUF's own CSS specificity, and most rules carry !important —
* WPUF's own per-layout stylesheets (layout1..5) do the same, so this is
* the only reliable way to sit on top of them regardless of which layout
* a given form uses.
*/
/* ==========================================================================
1. DESIGN TOKENS
========================================================================== */
:root{
--dl-blue:#0075f2; --dl-blue-soft:#e8f2ff;
--dl-magenta:#f52aff; --dl-magenta-soft:#fdeaff;
--dl-gold:#ffb700; --dl-gold-soft:#fff5df;
--dl-teal:#00c7c4; --dl-teal-soft:#e3fbfa;
--dl-ink:#111827; --dl-ink-soft:#667085; --dl-ink-faint:#98a2b3;
--dl-bg:#f5f6fa; --dl-card:#ffffff; --dl-border:#e8eaf1;
--dl-radius-lg:16px; --dl-radius-md:12px; --dl-radius-sm:9px;
--dl-shadow:0 1px 2px rgba(16,24,40,.05), 0 2px 8px rgba(16,24,40,.05);
--dl-font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
--dl-font-head:'Plus Jakarta Sans','Inter',sans-serif;
}
body .wpuf-form-add, body .wpuf-account-container, body #wpuf-login-form, body #wpuf-registration-form,
body .wpuf-dashboard-container, body .wpuf-checkout-wrap, body .wpuf-modern-social-container{
font-family:var(--dl-font-body) !important;
}
.dlight-msi{
font-family:'Material Symbols Outlined' !important;
font-weight:normal;font-style:normal;font-size:20px;line-height:1;
letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;
word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;vertical-align:middle;
}
/* ==========================================================================
2. CARD WRAPPER — every form gets the same white rounded card
(covers post-submission forms AND custom-field registration forms, which
both render through the same `.wpuf-form-add` / `ul.wpuf-form` markup)
========================================================================== */
body .wpuf-form-add{
background:var(--dl-card) !important;
border:1px solid var(--dl-border) !important;
border-radius:var(--dl-radius-lg) !important;
box-shadow:var(--dl-shadow) !important;
padding:30px 32px 32px !important;
width:100% !important;
max-width:100% !important;
margin:0 !important;
box-sizing:border-box !important;
}
body #wpuf-login-form, body #wpuf-registration-form{ max-width:480px !important;margin:0 auto !important; }
body #wpuf-login-form .wpuf-login-form,
body #wpuf-registration-form .wpuf-registration-form{
background:var(--dl-card) !important;
border:1px solid var(--dl-border) !important;
border-radius:var(--dl-radius-lg) !important;
box-shadow:var(--dl-shadow) !important;
padding:32px 32px 28px !important;
box-sizing:border-box !important;
}
body .wpuf-form-title{
font-family:var(--dl-font-head) !important;font-weight:800 !important;font-size:20px !important;
color:var(--dl-ink) !important;margin:0 0 6px !important;
}
body .wpuf-form-description{
font-size:13px !important;color:var(--dl-ink-soft) !important;line-height:1.6 !important;margin:0 0 22px !important;
}
/* ==========================================================================
3. FIELD LAYOUT — li.wpuf-el, .wpuf-label, .wpuf-fields
========================================================================== */
body ul.wpuf-form{ list-style:none !important;margin:0 !important;padding:0 !important; }
body ul.wpuf-form > li,
body ul.wpuf-form li.wpuf-el{
list-style:none !important;float:none !important;width:auto !important;
margin:0 0 18px !important;padding:0 !important;border:none !important;background:none !important;
box-sizing:border-box !important;
}
body .wpuf-label{
display:block !important;font-size:12.5px !important;font-weight:700 !important;
color:var(--dl-ink) !important;margin:0 0 7px !important;float:none !important;width:auto !important;
font-family:var(--dl-font-body) !important;
}
body .wpuf-label label{ font-size:inherit !important;font-weight:inherit !important;color:inherit !important; }
body .wpuf-label .required{ color:var(--dl-magenta) !important;margin-left:2px !important; }
body .wpuf-form-sub-label{
font-size:10.5px !important;color:var(--dl-ink-faint) !important;font-weight:600 !important;
margin-top:4px !important;text-transform:uppercase !important;letter-spacing:.3px !important;
}
body .wpuf-instruction{ font-size:11.5px !important;color:var(--dl-ink-faint) !important;margin-top:6px !important; }
body .wpuf-fields{ float:none !important;width:100% !important;box-sizing:border-box !important; }
/* ==========================================================================
4. INPUTS — text, email, password, number, url, tel, select, textarea
========================================================================== */
body .wpuf-fields input[type="text"],
body .wpuf-fields input[type="email"],
body .wpuf-fields input[type="password"],
body .wpuf-fields input[type="number"],
body .wpuf-fields input[type="url"],
body .wpuf-fields input[type="tel"],
body .wpuf-fields input[type="date"],
body .wpuf-fields input[type="search"],
body .wpuf-fields select,
body #wpuf-login-form input.input,
body #wpuf-registration-form input.input,
body .wpuf-fields input.input{
width:100% !important;max-width:560px !important;height:44px !important;padding:0 14px !important;
border:1.5px solid var(--dl-border) !important;border-radius:var(--dl-radius-sm) !important;
font-size:13.5px !important;font-family:var(--dl-font-body) !important;color:var(--dl-ink) !important;
background:#fff !important;box-shadow:none !important;box-sizing:border-box !important;
float:none !important;-webkit-appearance:none !important;appearance:none !important;
transition:border-color .15s, box-shadow .15s;
}
body .wpuf-fields textarea{
width:100% !important;max-width:100% !important;height:auto !important;min-height:110px !important;
padding:12px 14px !important;resize:vertical !important;box-sizing:border-box !important;
border:1.5px solid var(--dl-border) !important;border-radius:var(--dl-radius-sm) !important;
font-size:13.5px !important;font-family:var(--dl-font-body) !important;color:var(--dl-ink) !important;
background:#fff !important;box-shadow:none !important;float:none !important;
}
body .wpuf-fields select{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
background-repeat:no-repeat !important;background-position:right 14px center !important;
padding-right:36px !important;cursor:pointer !important;
}
body .wpuf-fields input:focus,
body .wpuf-fields select:focus,
body .wpuf-fields textarea:focus,
body #wpuf-login-form input.input:focus,
body #wpuf-registration-form input.input:focus{
outline:none !important;border-color:var(--dl-blue) !important;box-shadow:0 0 0 3px var(--dl-blue-soft) !important;
}
body .wpuf-fields input::placeholder,
body .wpuf-fields textarea::placeholder{ color:var(--dl-ink-faint) !important;opacity:1 !important; }
/* Kill the browser's yellow autofill background (Chrome/Firefox) */
body .wpuf-fields input:-webkit-autofill,
body #wpuf-login-form input:-webkit-autofill,
body #wpuf-registration-form input:-webkit-autofill{
-webkit-text-fill-color:var(--dl-ink) !important;
-webkit-box-shadow:0 0 0 1000px #fff inset !important;
box-shadow:0 0 0 1000px #fff inset !important;
border:1.5px solid var(--dl-border) !important;
transition:background-color 9999s ease-in-out 0s;
}
/* Name field (first / last split) */
body .wpuf-name-field-wrap.format-first-last{ display:flex !important;gap:12px !important;max-width:560px !important; }
body .wpuf-name-field-first-name,body .wpuf-name-field-last-name,body .wpuf-name-field-middle-name{ flex:1 !important;float:none !important;width:auto !important; }
/* Password + eye icon, and any other field WPUF decorates with a leading
or trailing symbol (e.g. the "@" it shows on social/handle fields) —
both share this same inline-decoration wrapper class. */
body .wpuf-fields-inline{ position:relative !important;width:100% !important; }
body .wpuf-fields-inline input.input{ padding-left:38px !important;padding-right:42px !important; }
body img.wpuf-eye{
position:absolute !important;top:50% !important;right:14px !important;left:auto !important;
transform:translateY(-50%) !important;width:18px !important;height:18px !important;
opacity:.55 !important;cursor:pointer !important;transition:opacity .15s;
}
body img.wpuf-eye:hover{ opacity:.9 !important; }
/* Leading field icon (person / mail / lock / badge) added by dlight-wpuf-skin.js.
The script only ever adds this SPAN as a plain sibling of the real —
it never re-parents the input into a new wrapper — so it can't disturb the
input's original position in the form. The matching input padding is set
by the SAME script as an inline `!important` style rather than a CSS
class: a class here would need to out-specificity `body .wpuf-fields
input[type="email"]` and lost that fight, which is exactly why the icon
used to sit on top of the field's text instead of beside it. An inline
`!important` declaration always wins the cascade regardless of any
selector's specificity, so this can't regress the same way again. */
body .dlight-field-icon{
position:absolute !important;top:50% !important;left:14px !important;right:auto !important;
transform:translateY(-50%) !important;color:var(--dl-ink-faint) !important;
font-size:18px !important;pointer-events:none !important;z-index:1 !important;
}
/* A password field has BOTH our icon (left) and WPUF's own eye (right) —
the two never overlap since they sit on opposite sides of the field. */
/* ==========================================================================
5. CUSTOM RADIO / CHECKBOX
(native `appearance:none` + drawn indicator — reliable across themes,
doesn't depend on accent-color support or a theme's own reset)
========================================================================== */
body .wpuf-fields input[type="radio"],
body .wpuf-fields input[type="checkbox"],
body .wpuf-remember-me input,
body .wpuf-toc-checkbox input{
-webkit-appearance:none !important;appearance:none !important;
width:18px !important;height:18px !important;
border:2px solid #d0d5dd !important;background:#fff !important;
margin:0 8px 0 0 !important;flex-shrink:0 !important;
cursor:pointer !important;position:relative !important;top:-1px !important;
vertical-align:middle !important;box-shadow:none !important;
}
body .wpuf-fields input[type="radio"],
body .wpuf-remember-me input[type="radio"],
body .wpuf-toc-checkbox input[type="radio"]{ border-radius:50% !important; }
body .wpuf-fields input[type="checkbox"],
body .wpuf-remember-me input[type="checkbox"],
body .wpuf-toc-checkbox input[type="checkbox"]{ border-radius:5px !important; }
/* NOTE: this :checked rule previously only listed `.wpuf-fields input[...]`,
which never matches the login "Remember me" checkbox or a form's "I agree
to the Terms" checkbox — those two live OUTSIDE `.wpuf-fields`. Because the
base rule above still gave them `appearance:none` (a blank box, no native
tick), clicking them silently toggled the real checked state with ZERO
visual change — indistinguishable from "the click did nothing". Both
classes are added here so every checkbox/radio this skin touches shows
its checked state, not just the ones inside a WPUF Form-Builder field. */
body .wpuf-fields input[type="radio"]:checked,
body .wpuf-remember-me input[type="radio"]:checked,
body .wpuf-toc-checkbox input[type="radio"]:checked,
body .wpuf-fields input[type="checkbox"]:checked,
body .wpuf-remember-me input[type="checkbox"]:checked,
body .wpuf-toc-checkbox input[type="checkbox"]:checked{
border-color:var(--dl-blue) !important;background:var(--dl-blue) !important;
}
body .wpuf-fields input[type="radio"]:checked::after,
body .wpuf-remember-me input[type="radio"]:checked::after,
body .wpuf-toc-checkbox input[type="radio"]:checked::after{
content:'' !important;position:absolute !important;top:50% !important;left:50% !important;
width:7px !important;height:7px !important;border-radius:50% !important;background:#fff !important;
transform:translate(-50%,-50%) !important;
}
body .wpuf-fields input[type="checkbox"]:checked::after,
body .wpuf-remember-me input[type="checkbox"]:checked::after,
body .wpuf-toc-checkbox input[type="checkbox"]:checked::after{
content:'' !important;position:absolute !important;top:2px !important;left:5px !important;
width:5px !important;height:9px !important;border:solid #fff !important;border-width:0 2px 2px 0 !important;
transform:rotate(45deg) !important;
}
body .wpuf-fields input[type="radio"],
body .wpuf-fields input[type="checkbox"],
body .wpuf-remember-me input,
body .wpuf-toc-checkbox input{ transition:background-color .12s ease,border-color .12s ease !important; }
body .wpuf-fields input[type="radio"]:active,
body .wpuf-fields input[type="checkbox"]:active,
body .wpuf-remember-me input:active,
body .wpuf-toc-checkbox input:active{ transform:scale(.92) !important; }
body .wpuf-fields input[type="radio"]:focus-visible,
body .wpuf-fields input[type="checkbox"]:focus-visible,
body .wpuf-remember-me input:focus-visible,
body .wpuf-toc-checkbox input:focus-visible{
outline:none !important;box-shadow:0 0 0 3px var(--dl-blue-soft) !important;
}
body .wpuf-checkbox-block label,body .wpuf-radio-block label,
body .wpuf-checkbox-inline label,body .wpuf-radio-inline label,
body .wpuf-remember-me label{
font-size:13px !important;color:var(--dl-ink) !important;
display:inline-flex !important;align-items:center !important;
margin-right:18px !important;margin-bottom:6px !important;cursor:pointer !important;font-weight:500 !important;
}
body .wpuf-radio-block,body .wpuf-checkbox-block{ display:flex !important;flex-wrap:wrap !important;gap:2px 4px !important; }
/* ==========================================================================
6. FILE UPLOAD — dropzone, "select image" link, uploaded file rows
(matches the exact classes WPUF's own layout CSS uses)
The icon + title + hint text below are built entirely by
dlight-wpuf-skin.js as ONE piece of markup INSIDE the real
`a.file-selector` trigger (see enhanceUploadZones()), so there is
only ever one icon and clicking anywhere on it still opens the file
picker. This CSS lays that markup out left-icon / right-text, matching
the rest of the D'Light form style.
========================================================================== */
body .wpuf-fields .wpuf-file-upload-zone,
body .wpuf-fields a.file-selector{
display:flex !important;flex-direction:row !important;align-items:center !important;justify-content:flex-start !important;
gap:14px !important;text-align:left !important;
background:var(--dl-bg) !important;
border:1.5px dashed var(--dl-border) !important;border-radius:var(--dl-radius-md) !important;
padding:16px 18px !important;width:100% !important;max-width:560px !important;box-sizing:border-box !important;
color:var(--dl-ink-soft) !important;font-size:13px !important;font-weight:600 !important;
text-decoration:none !important;text-transform:none !important;box-shadow:none !important;
transition:border-color .15s, background .15s;
}
body .wpuf-fields .wpuf-file-upload-zone:hover,
body .wpuf-fields a.file-selector:hover{
border-color:var(--dl-blue) !important;background:var(--dl-blue-soft) !important;color:var(--dl-blue) !important;
}
body .dlight-upload-icon-box{
display:flex !important;align-items:center !important;justify-content:center !important;flex-shrink:0 !important;
width:40px !important;height:40px !important;border-radius:10px !important;background:var(--dl-blue-soft) !important;
}
body .dlight-upload-icon-box .dlight-msi{ color:var(--dl-blue) !important;font-size:20px !important; }
body .dlight-upload-copy{ display:flex !important;flex-direction:column !important;gap:2px !important;text-align:left !important; }
body .dlight-upload-copy strong{ color:var(--dl-ink) !important;font-size:13.5px !important;font-weight:700 !important;line-height:1.3 !important; }
body .dlight-upload-copy small{ color:var(--dl-ink-faint) !important;font-size:11px !important;font-weight:500 !important;line-height:1.4 !important; }
body .wpuf-fields .wpuf-upload-title,
body .wpuf-fields .wpuf-upload-title .wpuf-label label{
color:var(--dl-ink) !important;font-size:13.5px !important;font-weight:700 !important;line-height:1.4 !important;
}
body .wpuf-fields .wpuf-upload-instructions{
color:var(--dl-ink-faint) !important;font-size:11px !important;line-height:1.5 !important;
}
body .wpuf-fields #wpuf-insert-image-container a.wpuf-insert-image,
body .wpuf-fields a.wpuf-insert-image{
display:inline-flex !important;align-items:center !important;gap:7px !important;
background:#fff !important;border:1.5px solid var(--dl-border) !important;border-radius:999px !important;
padding:9px 18px !important;color:var(--dl-ink) !important;font-size:12.5px !important;font-weight:700 !important;
box-shadow:none !important;text-decoration:none !important;
}
body .wpuf-fields #wpuf-insert-image-container a.wpuf-insert-image:hover,
body .wpuf-fields a.wpuf-insert-image:hover{ border-color:var(--dl-blue) !important;color:var(--dl-blue) !important; }
/* Uploaded file rows */
body .wpuf-attachment-list{ list-style:none !important;margin:14px 0 0 !important;padding:0 !important; }
body .wpuf-attachment-list li.wpuf-image-wrap{
display:flex !important;align-items:center !important;gap:12px !important;
background:var(--dl-card) !important;border:1px solid var(--dl-border) !important;
border-radius:var(--dl-radius-sm) !important;padding:8px 12px !important;margin:0 0 8px !important;
float:none !important;width:auto !important;box-shadow:none !important;
}
body .wpuf-attachment-list li.wpuf-image-wrap .attachment-name img{
width:44px !important;height:44px !important;object-fit:cover !important;
border:1px solid var(--dl-border) !important;border-radius:8px !important;
}
body .wpuf-attachment-list li.wpuf-image-wrap .caption{ display:flex !important;align-items:center !important;gap:8px !important;font-size:12px !important;color:var(--dl-ink-soft) !important;margin:0 !important; }
body .wpuf-attachment-list li.wpuf-image-wrap a.attachment-delete{ margin-left:auto !important;color:#c2273a !important; }
body .wpuf-attachment-list li.wpuf-image-wrap a.attachment-delete img{ width:18px !important;height:18px !important;border:none !important; }
/* ==========================================================================
7. BUTTONS — submit, multistep prev/next, generic wpuf buttons
========================================================================== */
body .wpuf-submit input[type="submit"],
body input[type="submit"].wpuf-submit-button,
body #wpuf-login-form input#wp-submit,
body #wpuf-registration-form input#wp-submit,
body .wpuf-btn,body .wpuf-button,
body .wpuf-checkout-btn,
body .wpuf-multistep-nav-btn{
display:inline-flex !important;align-items:center !important;justify-content:center !important;gap:8px !important;
height:46px !important;padding:0 26px !important;
border-radius:999px !important;border:none !important;
background:linear-gradient(120deg,var(--dl-blue),#3a8dff) !important;
color:#fff !important;font-family:var(--dl-font-body) !important;
font-size:13.5px !important;font-weight:700 !important;line-height:1 !important;
text-shadow:none !important;text-transform:none !important;letter-spacing:normal !important;
cursor:pointer !important;box-shadow:0 8px 18px rgba(0,117,242,.26) !important;
transition:transform .15s, box-shadow .15s !important;
}
body .wpuf-submit input[type="submit"]:hover,
body input[type="submit"].wpuf-submit-button:hover,
body #wpuf-login-form input#wp-submit:hover,
body #wpuf-registration-form input#wp-submit:hover,
body .wpuf-multistep-nav-btn:hover{
transform:translateY(-1px) !important;box-shadow:0 10px 22px rgba(0,117,242,.32) !important;
}
body li.wpuf-submit{ margin-top:10px !important; }
/* Multistep footer row: Previous · Save Draft · Next */
body .wpuf-multistep-nav-btn.wpuf-multistep-prev-btn,
body .wpuf-btn-cancel,body .wpuf-btn-secondary{
background:#fff !important;color:var(--dl-ink) !important;
border:1.5px solid var(--dl-border) !important;box-shadow:none !important;
}
body .wpuf-multistep-nav-btn.wpuf-multistep-prev-btn:hover{ border-color:var(--dl-blue) !important;color:var(--dl-blue) !important; }
body a.wpuf-draft-saved,
body button.wpuf-draft-saved,
body [class*="save-draft"],body [class*="save_draft"]{
background:none !important;box-shadow:none !important;border:none !important;
color:var(--dl-ink-soft) !important;font-weight:700 !important;font-size:12.5px !important;
text-decoration:underline !important;padding:0 !important;height:auto !important;
}
/* ==========================================================================
8. ALERTS
========================================================================== */
body .wpuf-error,body .wpuf-errors,body .wpuf-success,body .wpuf-message,body .wpuf-info{
border-radius:var(--dl-radius-sm) !important;padding:12px 15px !important;
font-size:12.5px !important;font-weight:600 !important;margin:0 0 18px !important;
border:1px solid transparent !important;list-style:none !important;box-shadow:none !important;background-image:none !important;
}
body .wpuf-error,body .wpuf-errors{ background:#fdeeee !important;color:#c2273a !important;border-color:#f6d0d5 !important; }
body .wpuf-success{ background:var(--dl-teal-soft) !important;color:#00918f !important;border-color:#c7f3f2 !important; }
body .wpuf-message,body .wpuf-info{ background:var(--dl-blue-soft) !important;color:var(--dl-blue) !important;border-color:#cfe6ff !important; }
body .wpuf-error ul,body .wpuf-errors ul{ margin:0 !important;padding-left:18px !important; }
/* ==========================================================================
9. LOGIN FORM specifics
========================================================================== */
body .wpuf-remember-forgot-wrapper{ display:flex !important;align-items:center !important;justify-content:space-between !important;margin:2px 0 22px !important; }
body .wpuf-remember-me label{ font-size:12.5px !important;color:var(--dl-ink-soft) !important; }
body .wpuf-lost-password a,body .wpuf-action-links a{
font-size:12.5px !important;font-weight:700 !important;color:var(--dl-blue) !important;text-decoration:none !important;
}
body .wpuf-lost-password a:hover,body .wpuf-action-links a:hover{ text-decoration:underline !important; }
body .wpuf-action-links{ text-align:center !important;margin-top:18px !important;font-size:12.5px !important;color:var(--dl-ink-soft) !important; }
body .wpuf-modern-social-container{ margin-top:18px !important; }
body .wpuf-social-separator{
display:flex !important;align-items:center !important;gap:12px !important;color:var(--dl-ink-faint) !important;
font-size:11px !important;font-weight:600 !important;text-transform:uppercase !important;letter-spacing:.4px !important;margin:20px 0 !important;
}
body .wpuf-social-separator::before,body .wpuf-social-separator::after{ content:'' !important;flex:1 !important;height:1px !important;background:var(--dl-border) !important; }
body .wpuf-social-signin-buttons,body .wpuf-social-platforms-grid{ display:flex !important;flex-direction:column !important;gap:10px !important; }
body .wpuf-social-signin-btn,body .wpuf-social-platform-btn{
height:44px !important;border-radius:var(--dl-radius-sm) !important;border:1.5px solid var(--dl-border) !important;background:#fff !important;
color:var(--dl-ink) !important;font-size:13px !important;font-weight:700 !important;
display:flex !important;align-items:center !important;justify-content:center !important;gap:9px !important;
box-shadow:none !important;cursor:pointer !important;transition:border-color .15s,background .15s;
}
body .wpuf-social-signin-btn:hover,body .wpuf-social-platform-btn:hover{ border-color:var(--dl-blue) !important;background:var(--dl-blue-soft) !important; }
/* ==========================================================================
10. MULTISTEP PROGRESS BAR (exact structure: header, track, fill, steps)
========================================================================== */
body .wpuf-multistep-progressbar{ overflow:visible !important;background:none !important; }
body .wpuf-form .wpuf-multistep-progressbar .wpuf-step-wizard{ display:flex !important;align-items:flex-start !important;justify-content:center !important;margin:4px 0 30px !important;padding:0 !important; }
body .wpuf-form .wpuf-multistep-progressbar .wpuf-step-item{ display:flex !important;flex-direction:column !important;align-items:center !important;flex-shrink:0 !important; }
body .wpuf-form .wpuf-multistep-progressbar .wpuf-step-circle{
width:32px !important;height:32px !important;border-radius:50% !important;
border:2px solid var(--dl-border) !important;background:#fff !important;color:var(--dl-ink-faint) !important;
display:flex !important;align-items:center !important;justify-content:center !important;
font-size:12.5px !important;font-weight:800 !important;transition:all .25s ease;
}
body .wpuf-form .wpuf-multistep-progressbar .wpuf-step-label{
margin-top:8px !important;font-size:11.5px !important;color:var(--dl-ink-faint) !important;font-weight:600 !important;white-space:nowrap !important;
}
body .wpuf-form .wpuf-multistep-progressbar .wpuf-step-line{ flex:1 !important;height:2px !important;background:var(--dl-border) !important;margin-top:16px !important;min-width:32px !important; }
body .wpuf-form .wpuf-multistep-progressbar .wpuf-step-line-active{ background:var(--dl-blue) !important; }
body .wpuf-form .wpuf-multistep-progressbar .wpuf-step-item.active-step .wpuf-step-circle,
body .wpuf-form .wpuf-multistep-progressbar .wpuf-step-item.completed-step .wpuf-step-circle{
background:var(--dl-blue) !important;border-color:var(--dl-blue) !important;color:#fff !important;
}
body .wpuf-form .wpuf-multistep-progressbar .wpuf-step-item.active-step .wpuf-step-label,
body .wpuf-form .wpuf-multistep-progressbar .wpuf-step-item.completed-step .wpuf-step-label{ color:var(--dl-ink) !important;font-weight:700 !important; }
body .wpuf-form .wpuf-multistep-progressbar .wpuf-progressbar-header,
body .wpuf-progressbar-header{
display:flex !important;justify-content:space-between !important;align-items:center !important;
margin:0 0 8px !important;font-size:11.5px !important;font-weight:700 !important;
color:var(--dl-ink-soft) !important;background:none !important;position:static !important;
}
body .wpuf-form .wpuf-multistep-progressbar .wpuf-progressbar-track,
body .wpuf-progressbar-track,
body progress.wpuf-progressbar-track{
width:100% !important;height:8px !important;background:var(--dl-border) !important;
border-radius:99px !important;overflow:hidden !important;margin:0 0 26px !important;
-webkit-appearance:none !important;appearance:none !important;border:none !important;
}
body .wpuf-form .wpuf-multistep-progressbar .wpuf-progressbar-fill,
body .wpuf-progressbar-fill{
display:block !important;height:100% !important;border-radius:99px !important;
background:linear-gradient(90deg,var(--dl-blue),var(--dl-teal)) !important;transition:width .3s ease !important;
}
/* Defensive catch-all: any leftover "progress"-named element inside a WPUF
form gets a sane light track instead of an unstyled/black default */
body .wpuf-form-add [class*="progress" i]:not(.wpuf-progressbar-fill):not(.wpuf-progressbar-header){
background:var(--dl-border) !important;color:var(--dl-ink-soft) !important;
}
/* Native