/* ========================================
   REGISTRATION TEMPLATE 2 - DARK THEME
   Theme-specific styles only
   Requires: reg-template-base.css
   ======================================== */

/* ========================================
   CSS VARIABLES - DARK THEME
   ======================================== */
:root {
    /* Primary Colors */
    --wpuf-primary-color: #0088BB;
    --wpuf-primary-blue: #3B82F6;
    --wpuf-success-color: #B4F2A9;
    --wpuf-success-bg: #274A21;
    --wpuf-error-color: #ef4444;

    /* Background Colors */
    --wpuf-bg-light: #222C3C;
    --wpuf-bg-hover: #4B5563;
    --wpuf-bg-white: #FFFFFF;
    --wpuf-bg-gray-50: #F9FAFB;
    --wpuf-bg-gray-100: #F3F4F6;
    --wpuf-bg-gray-200: #E5E7EB;

    /* Border Colors */
    --wpuf-border-color: #D1D5DB;
    --wpuf-border-hover: #9CA3AF;
    --wpuf-border-dark: #4A5971;
    --wpuf-border-gray: #E5E7EB;
    --wpuf-border-gray-light: #e5e7eb;
    --wpuf-border-gray-dark: #4B5563;
    --wpuf-border-primary: #0088BB;

    /* Text Colors */
    --wpuf-text-primary: #374151;
    --wpuf-text-secondary: #6B7280;
    --wpuf-text-muted: #9CA3AF;
    --wpuf-text-label: #9CABC3;
    --wpuf-text-gray: #4B5563;
    --wpuf-text-gray-light: #6b7280;

    /* Layout */
    --wpuf-radius: 8px;
    --wpuf-radius-sm: 5px;
    --wpuf-radius-lg: 85px;
    --wpuf-transition: all 0.2s ease;
}

/* ========================================
   FORM CONTAINER - DARK THEME
   ======================================== */
form.wpuf-form-layout2 {
    border-radius: 20px !important;
    background: #1B2431;
    padding: 40px !important;
}

/* ========================================
   LABELS - DARK THEME
   ======================================== */
form.wpuf-form-layout2 .wpuf-label,
form.wpuf-form-layout2 .wpuf-form-sub-label,
form.wpuf-form-layout2 .wpuf-fields.wpuf-repeat-container p {
    font-weight: 500 !important;
    font-size: 18px !important;
    color: var(--wpuf-text-label) !important;
}

/* ========================================
   FORM INPUTS - DARK THEME
   ======================================== */
form.wpuf-form-layout2 .wpuf-fields input,
form.wpuf-form-layout2 .wpuf-fields textarea,
form.wpuf-form-layout2 .wpuf-fields select {
    border-radius: var(--wpuf-radius-sm) !important;
    border: 1px solid var(--wpuf-border-dark) !important;
    padding: 10px 16px !important;
    background: var(--wpuf-bg-light) !important;
    color: var(--wpuf-text-label) !important;
}

form.wpuf-form-layout2 .wpuf-fields .iti__country-list {
    overflow-y: scroll !important;
}

form.wpuf-form-layout2 li.wpuf-el .wpuf-section-wrap {
    border-color: var(--wpuf-border-primary) !important;
}

form.wpuf-form-layout2 .wpuf-fields h2.wpuf-section-title,
form.wpuf-form-layout2 li.wpuf-el [class*="wpuf_shortcode"] {
    color: var(--wpuf-text-label);
}

form.wpuf-form-layout2 .wpuf-fields .wpuf-section-details {
    color: var(--wpuf-text-muted);
}

form.wpuf-form-layout2 .wpuf-fields .wpuf-math-captcha .captcha {
    background: var(--wpuf-bg-light) !important;
    color: var(--wpuf-text-label) !important;
    display: flex !important;
    justify-content: flex-start !important;
    border: 1px solid var(--wpuf-border-dark) !important;
}

form.wpuf-form-layout2 .wpuf-fields input::placeholder {
    color: var(--wpuf-text-muted) !important;
    font-weight: 400 !important;
}

/* ========================================
   DROPDOWN ARROW - DARK THEME
   ======================================== */
/* Regular dropdown arrow - exclude multi-select fields and error states */
form.wpuf-form-layout2 .wpuf-fields:has(select:not(.wpuf-multiselect-field)):not(.has-error)::after {
    content: "";
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 8px;
    background-image: url("data:image/svg+xml,%3Csvg width='14' height='8' viewBox='0 0 14 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.25 0.750001L7 7L0.75 0.750001' stroke='%234B5563' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    z-index: 1;
}

/* ========================================
   MULTI-SELECT - DARK THEME
   ======================================== */
form.wpuf-form-layout2 .multiselect-input {
    border: 1px solid var(--wpuf-border-dark) !important;
    border-radius: 6px !important;
    padding: 8px 16px !important;
    background: var(--wpuf-bg-light) !important;
}

form.wpuf-form-layout2 .multiselect-input:hover {
    border-color: var(--wpuf-border-hover) !important;
}

form.wpuf-form-layout2 .selected-item {
    background: var(--wpuf-primary-blue);
    border: 1px solid var(--wpuf-primary-blue) !important;
    border-radius: 4px !important;
    padding: 2px 8px !important;
    color: #fff;
}

form.wpuf-form-layout2 .remove-item {
    color: var(--wpuf-text-gray-light);
}

form.wpuf-form-layout2 .remove-item:hover {
    color: var(--wpuf-error-color);
}

form.wpuf-form-layout2 .multiselect-placeholder {
    color: var(--wpuf-text-secondary);
}

form.wpuf-form-layout2 .dropdown-arrow {
    color: var(--wpuf-text-gray);
}

form.wpuf-form-layout2 .multiselect-dropdown {
    background: var(--wpuf-bg-light);
    border: 1px solid var(--wpuf-border-gray) !important;
    border-radius: var(--wpuf-radius) !important;
}

form.wpuf-form-layout2 .multiselect-option {
    border-bottom: 1px solid var(--wpuf-bg-gray-100) !important;
}

form.wpuf-form-layout2 .multiselect-option:hover {
    background-color: var(--wpuf-bg-hover);
}

form.wpuf-form-layout2 .multiselect-option label {
    color: var(--wpuf-text-gray);
}

form.wpuf-form-layout2 .multiselect-option label::before {
    border: 1px solid var(--wpuf-border-gray) !important;
    background: var(--wpuf-bg-white);
}

form.wpuf-form-layout2 .multiselect-option input[type="checkbox"]:checked + label::before {
    background: var(--wpuf-primary-blue);
    border-color: var(--wpuf-primary-blue) !important;
}

/* ========================================
   RADIO BUTTONS - DARK THEME
   ======================================== */
.wpuf-form-add.wpuf-form-layout2 ul.wpuf-form li .wpuf-fields input[type="radio"]::before {
    display: none !important;
}

form.wpuf-form-layout2 .wpuf-fields input[type="radio"] {
    border: 1px solid var(--wpuf-border-dark) !important;
    background-color: transparent !important;
}

form.wpuf-form-layout2 .wpuf-fields input[type="radio"]:hover {
    border-color: var(--wpuf-border-primary) !important;
}

form.wpuf-form-layout2 .wpuf-fields input[type="radio"]:checked {
    border-color: var(--wpuf-border-primary) !important;
}

form.wpuf-form-layout2 .wpuf-fields input[type="radio"]:checked::after {
    background-color: var(--wpuf-primary-blue) !important;
}

form.wpuf-form-layout2 .wpuf-fields .wpuf-radio-field label {
    color: var(--wpuf-text-label);
}

/* ========================================
   CHECKBOX - DARK THEME
   ======================================== */
form.wpuf-form-layout2 .wpuf-fields .wpuf-checkbox-block::before {
    border: 1px solid var(--wpuf-border-dark) !important;
    background: transparent;
}

form.wpuf-form-layout2 .wpuf-fields .wpuf-checkbox-block:hover::before {
    border-color: var(--wpuf-border-hover) !important;
}

form.wpuf-form-layout2 .wpuf-fields .wpuf-checkbox-block input[type="checkbox"]:checked + label::before,
form.wpuf-form-layout2 .wpuf-fields .wpuf-checkbox-block:has(input[type="checkbox"]:checked)::before {
    background: var(--wpuf-primary-blue);
    border-color: var(--wpuf-primary-blue) !important;
}

form.wpuf-form-layout2 .wpuf-fields label {
    color: var(--wpuf-text-label) !important;
}

form.wpuf-form-layout2 .wpuf-fields label .wpuf-price-label {
    color: var(--wpuf-text-label) !important;
}

form.wpuf-form-layout2 .wpuf-fields .wpuf-checkbox-block:focus-within::before {
    outline: 2px solid var(--wpuf-primary-blue) !important;
    outline-offset: 2px !important;
}

/* Error state for invalid checkboxes */
form.wpuf-form-layout2 .wpuf-fields .wpuf-checkbox-block:has(input[type="checkbox"]:invalid)::before {
    border-color: var(--wpuf-error-color) !important;
}

form.wpuf-form-layout2 .wpuf-fields .wpuf-checkbox-block:has(input[type="checkbox"]:invalid) {
    color: var(--wpuf-error-color);
}

/* ========================================
   FILE UPLOAD - DARK THEME
   ======================================== */
form.wpuf-form-layout2 .wpuf-fields .wpuf-attachment-upload-filelist a:hover {
    background: rgba(0, 0, 0, 0.05) !important;
}

form.wpuf-form-layout2 .wpuf-fields .wpuf-attachment-upload-filelist label {
    display: initial !important;
}

form.wpuf-form-layout2 .wpuf-fields .file-selector {
    padding: 10px 16px !important;
    background: var(--wpuf-bg-light) !important;
    border: 1px solid var(--wpuf-border-dark) !important;
    border-radius: var(--wpuf-radius) !important;
    color: var(--wpuf-text-secondary) !important;
}

.wpuf-form-add.wpuf-form-layout2 ul.wpuf-form li .wpuf-fields a.file-selector:before {
    position: initial !important;
}

form.wpuf-form-layout2 .wpuf-fields a.file-selector {
    text-transform: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 10px 16px !important;
    background: var(--wpuf-bg-light) !important;
    border: 1px solid var(--wpuf-border-dark) !important;
    border-radius: var(--wpuf-radius) !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: var(--wpuf-transition) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--wpuf-text-secondary) !important;
    gap: 8px !important;
}

form.wpuf-form-layout2 .wpuf-fields .file-selector::before {
    content: '' !important;
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='19' viewBox='0 0 20 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.75 14.75C2.98858 14.75 0.75 12.5114 0.75 9.75C0.75 7.30154 2.50992 5.26413 4.83376 4.83376C5.26412 2.50992 7.30154 0.75 9.75 0.75C12.1985 0.75 14.2359 2.50992 14.6662 4.83376C16.9901 5.26413 18.75 7.30154 18.75 9.75C18.75 12.5114 16.5114 14.75 13.75 14.75M6.75 9.75L9.75 6.75M9.75 6.75L12.75 9.75M9.75 6.75V18.75' stroke='%2394A3B8' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    flex-shrink: 0 !important;
    top: auto !important;
    left: auto !important;
}

form.wpuf-form-layout2 .wpuf-fields .file-selector:hover::before {
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='19' viewBox='0 0 20 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.75 14.75C2.98858 14.75 0.75 12.5114 0.75 9.75C0.75 7.30154 2.50992 5.26413 4.83376 4.83376C5.26412 2.50992 7.30154 0.75 9.75 0.75C12.1985 0.75 14.2359 2.50992 14.6662 4.83376C16.9901 5.26413 18.75 7.30154 18.75 9.75C18.75 12.5114 16.5114 14.75 13.75 14.75M6.75 9.75L9.75 6.75M9.75 6.75L12.75 9.75M9.75 6.75V18.75' stroke='%23374151' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E");
}

form.wpuf-form-layout2 .wpuf-fields .wpuf-attachment-list li {
    background: var(--wpuf-bg-gray-50);
    border: 1px solid var(--wpuf-border-gray) !important;
    border-radius: 6px !important;
}

form.wpuf-form-layout2 .wpuf-fields .upload-item {
    background: var(--wpuf-bg-gray-50);
    border: 1px solid var(--wpuf-border-gray) !important;
    border-radius: 6px !important;
}

form.wpuf-form-layout2 .wpuf-fields .progress {
    background: var(--wpuf-bg-gray-200);
}

form.wpuf-form-layout2 .wpuf-fields .progress .bar {
    background: var(--wpuf-primary-blue);
}

/* ========================================
   FILE UPLOAD ZONE - DARK THEME
   ======================================== */
form.wpuf-form-layout2 .wpuf-fields .wpuf-file-upload-zone {
    border: 2px dashed var(--wpuf-border-dark) !important;
    border-radius: var(--wpuf-radius) !important;
    background: var(--wpuf-bg-light);
}

form.wpuf-form-layout2 .wpuf-fields .wpuf-file-upload-zone:hover {
    border-color: var(--wpuf-border-hover) !important;
    background: var(--wpuf-bg-hover);
}

form.wpuf-form-layout2 .wpuf-fields .wpuf-file-upload-zone:focus-within {
    border-color: var(--wpuf-primary-blue) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

form.wpuf-form-layout2 .wpuf-fields .wpuf-upload-title {
    color: var(--wpuf-text-label);
}

form.wpuf-form-layout2 .wpuf-fields .wpuf-upload-instructions {
    color: var(--wpuf-text-muted);
}

form.wpuf-form-layout2 .wpuf-fields .wpuf-attachment-list li {
    background: var(--wpuf-bg-gray-50);
    border: 1px solid var(--wpuf-border-gray) !important;
    border-radius: var(--wpuf-radius) !important;
}

form.wpuf-form-layout2 .wpuf-fields .upload-item {
    background: var(--wpuf-bg-gray-50);
    border: 1px solid var(--wpuf-border-gray) !important;
    border-radius: var(--wpuf-radius) !important;
}

form.wpuf-form-layout2 .wpuf-fields .progress {
    background: var(--wpuf-bg-gray-200);
}

form.wpuf-form-layout2 .wpuf-fields .progress .bar {
    background: var(--wpuf-primary-blue);
}

/* ========================================
   SUBMIT BUTTON - DARK THEME
   ======================================== */
form.wpuf-form-layout2 li.wpuf-submit input.wpuf-submit-button {
    border: none !important;
    padding: 10px 32px !important;
    border-radius: var(--wpuf-radius-lg) !important;
    background: var(--wpuf-primary-blue) !important;
}

/* ========================================
   REPEAT CONTAINER - DARK THEME
   ======================================== */
form.wpuf-form-layout2 .wpuf-fields.wpuf-repeat-container hr {
    border: 1px solid var(--wpuf-border-primary) !important;
}

form.wpuf-form-layout2 .wpuf-fields.wpuf-repeat-container .wpuf-repeat-controls button {
    border: none !important;
    background: var(--wpuf-primary-blue) !important;
}

/* ========================================
   CART SUMMARY - DARK THEME
   ======================================== */
form.wpuf-form-layout2 .wpuf-fields wpuf-cart-items {
    color: var(--wpuf-text-label);
}

form.wpuf-form-layout2 .wpuf-fields .wpuf-cart-summary {
    background: var(--wpuf-bg-light) !important;
    border: 1px solid var(--wpuf-border-dark) !important;
}

form.wpuf-form-layout2 .wpuf-fields .wpuf-cart-table,
form.wpuf-form-layout2 .wpuf-fields .wpuf-cart-table thead,
form.wpuf-form-layout2 .wpuf-fields .wpuf-cart-table th {
    background: var(--wpuf-bg-light) !important;
    color: var(--wpuf-bg-gray-100) !important;
}

form.wpuf-form-layout2 .wpuf-fields .wpuf-cart-table thead tr,
form.wpuf-form-layout2 .wpuf-fields .wpuf-cart-table tfoot tr {
    border-color: var(--wpuf-border-primary) !important;
}
/* The dark form draws its own card — suppress the outer wrapper card. */
.wpuf-reg-form-card-layout2 {
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

/* Multistep step-label colours come from the form's progressbar colour
   settings (ms_bgcolor / ms_ac_txt_color) via the inline style — not hardcoded. */

/* Login prompt readable on the dark card. */
form.wpuf-form-layout2 li.wpuf-submit {
    color: #D1D5DB;
}
form.wpuf-form-layout2 li.wpuf-submit a {
    color: #60A5FA;
}

/* ==== Figma deep-sync (5556:98669) — dark navy registration ====
   Own palette: #1B2431 / #222C3C / #344156 / #9CABC3 / #4A5971 / #3B82F6. */
form.wpuf-form-layout2.wpuf-form-layout2 .wpuf-label {
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 24px !important;
}
form.wpuf-form-layout2.wpuf-form-layout2 .wpuf-fields input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="file"]),
form.wpuf-form-layout2.wpuf-form-layout2 .wpuf-fields textarea,
form.wpuf-form-layout2.wpuf-form-layout2 .wpuf-fields select {
    border-color: #344156 !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
}
form.wpuf-form-layout2.wpuf-form-layout2 .wpuf-fields input::placeholder,
form.wpuf-form-layout2.wpuf-form-layout2 .wpuf-fields textarea::placeholder {
    color: #4A5971 !important;
}
form.wpuf-form-layout2.wpuf-form-layout2 .wpuf-fields select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%239CABC3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 20px 20px !important;
}
form.wpuf-form-layout2.wpuf-form-layout2 .wpuf-fields input[type="radio"]:checked {
    border-color: #3B82F6 !important;
}
/* Multiselect */
form.wpuf-form-layout2.wpuf-form-layout2 .multiselect-input {
    border-color: #344156 !important;
    border-radius: 10px !important;
}
form.wpuf-form-layout2.wpuf-form-layout2 .selected-item {
    border-radius: 6px !important;
    padding: 4px 10px !important;
}
form.wpuf-form-layout2.wpuf-form-layout2 .multiselect-dropdown {
    border-color: #344156 !important;
    border-radius: 10px !important;
}
/* Password strength — explicit dark values (do not rely on template-5 file) */
form.wpuf-form-layout2.wpuf-form-layout2 ul.wpuf-form .pass-strength-result.strong,
form.wpuf-form-layout2.wpuf-form-layout2 .pass-strength-result.pass-strength-result.strong {
    background: #274A21 !important;
    color: #B4F2A9 !important;
}
/* File selector: solid accent bar */
form.wpuf-form-layout2.wpuf-form-layout2 .wpuf-fields .file-selector {
    background: #3B82F6 !important;
    border: none !important;
    border-radius: 10px !important;
    color: #FFFFFF !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    padding: 12px 16px !important;
}
form.wpuf-form-layout2.wpuf-form-layout2 .wpuf-fields .wpuf-file-upload-zone {
    border: 1px dashed #344156 !important;
}
form.wpuf-form-layout2.wpuf-form-layout2 .wpuf-fields .wpuf-help {
    color: #4A5971 !important;
    font-style: italic;
    font-size: 16px !important;
    line-height: 24px !important;
}

/* ---- TOC label: sentence flows naturally; links use template accent ---- */
form.wpuf-form-layout2.wpuf-form-layout2 .wpuf-fields label.wpuf-checkbox-block:has(a) {
    display: block !important;
    line-height: 24px;
}
form.wpuf-form-layout2.wpuf-form-layout2 .wpuf-fields label.wpuf-checkbox-block:has(a) input[type="checkbox"] {
    margin-right: 12px !important;
    vertical-align: middle;
}
form.wpuf-form-layout2.wpuf-form-layout2 .wpuf-fields a:not(.file-selector):not(.wpuf-upload-trigger) {
    color: #3B82F6 !important;
}

/* ---- Strength indicator: palette states (default box was WP-core white) ---- */
form.wpuf-form-layout2.wpuf-form-layout2 .pass-strength-result {
    background: #222C3C !important;
    border: 1px solid #344156 !important;
    color: #9CABC3 !important;
    border-radius: 6px !important;
    padding: 10px 32px !important;
}
form.wpuf-form-layout2.wpuf-form-layout2 .pass-strength-result.short {
    background: #4A2323 !important;
    border-color: #4A2323 !important;
    color: #FCA5A5 !important;
}
form.wpuf-form-layout2.wpuf-form-layout2 .pass-strength-result.bad {
    background: #4A3623 !important;
    border-color: #4A3623 !important;
    color: #FDBA74 !important;
}
form.wpuf-form-layout2.wpuf-form-layout2 .pass-strength-result.good {
    background: #4A4423 !important;
    border-color: #4A4423 !important;
    color: #FDE047 !important;
}
form.wpuf-form-layout2.wpuf-form-layout2 .pass-strength-result.strong {
    background: #274A21 !important;
    border-color: #274A21 !important;
    color: #B4F2A9 !important;
}

/* ---- Math captcha: palette colors ---- */
form.wpuf-form-layout2.wpuf-form-layout2 .wpuf-math-captcha .captcha-number,
form.wpuf-form-layout2.wpuf-form-layout2 .wpuf-math-captcha .captcha-equal {
    color: #FFFFFF !important;
}
form.wpuf-form-layout2.wpuf-form-layout2 .wpuf-math-captcha #captchaRefresher {
    fill: #FFFFFF;
}
form.wpuf-form-layout2.wpuf-form-layout2 .wpuf-math-captcha .wpuf-captcha-error {
    color: #F20000;
}

/* ---- Multistep Prev/Next: same treatment as the template submit ---- */
form.wpuf-form-layout2.wpuf-form-layout2 .wpuf-multistep-nav-btn {
    background: #3B82F6 !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 85px !important;
    padding: 10px 32px !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 24px !important;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    text-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* ---- Uploaded file rows (Figma): 48px bordered thumb, 24px delete/drag
   icons, borderless row ---- */
form.wpuf-form-layout2.wpuf-form-layout2 .wpuf-attachment-list li.wpuf-image-wrap {
    background: transparent;
    border: none !important;
    box-shadow: none !important;
    float: none;
    width: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    list-style: none;
    padding: 8px 0 !important;
    margin: 0 0 8px !important;
}
form.wpuf-form-layout2.wpuf-form-layout2 .wpuf-attachment-list li.wpuf-image-wrap .attachment-name img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border: 1px solid #344156 !important;
    border-radius: 10px !important;
}
form.wpuf-form-layout2.wpuf-form-layout2 .wpuf-attachment-list li.wpuf-image-wrap .caption {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
}
form.wpuf-form-layout2.wpuf-form-layout2 .wpuf-attachment-list li.wpuf-image-wrap a.attachment-delete img,
form.wpuf-form-layout2.wpuf-form-layout2 .wpuf-attachment-list li.wpuf-image-wrap .wpuf-drag-file img {
    width: 24px;
    height: 24px;
    border: none !important;
    border-radius: 0 !important;
}

/* ---- Attachment rows per Figma: clean row, palette trash icon, no dark
   overlay chip; whole row stays sortable so the drag sprite is hidden ---- */
form.wpuf-form-layout2.wpuf-form-layout2 .wpuf-attachment-list li.wpuf-image-wrap .caption {
    background: transparent !important;
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    margin-left: auto !important;
    padding: 0 !important;
    width: auto !important;
}
form.wpuf-form-layout2.wpuf-form-layout2 .wpuf-attachment-list li.wpuf-image-wrap .caption a.attachment-delete img {
    display: none;
}
form.wpuf-form-layout2.wpuf-form-layout2 .wpuf-attachment-list li.wpuf-image-wrap .caption a.attachment-delete {
    display: inline-flex;
    width: 24px;
    height: 24px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%239CABC3'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0'/%3E%3C/svg%3E") center / 20px 20px no-repeat !important;
    border: none !important;
    box-shadow: none !important;
}
form.wpuf-form-layout2.wpuf-form-layout2 .wpuf-attachment-list li.wpuf-image-wrap .caption .wpuf-drag-file {
    display: none;
}
form.wpuf-form-layout2.wpuf-form-layout2 .wpuf-attachment-list li.wpuf-image-wrap .wpuf-attach-title {
    flex: 1;
    font-size: 16px;
    line-height: 24px;
    color: #FFFFFF;
    overflow-wrap: anywhere;
}
/* Legacy file-selector matches the field geometry of its template */
form.wpuf-form-layout2.wpuf-form-layout2 .wpuf-fields a.file-selector {
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
}

/* ---- Consistency pass: captcha strip palette, legacy selector icon off ---- */
form.wpuf-form-layout2.wpuf-form-layout2 .wpuf-fields a.file-selector:before,
form.wpuf-form-layout2.wpuf-form-layout2 .wpuf-fields .file-selector:before {
    display: none !important;
}
form.wpuf-form-layout2.wpuf-form-layout2 .wpuf-fields .wpuf-math-captcha .captcha {
    background: #222C3C !important;
    border-color: #344156 !important;
}
form.wpuf-form-layout2.wpuf-form-layout2 .wpuf-fields .wpuf-math-captcha .captcha-number,
form.wpuf-form-layout2.wpuf-form-layout2 .wpuf-fields .wpuf-math-captcha .captcha-equal {
    color: #FFFFFF !important;
}

/* Legacy 150px thumbnail box: row layout needs natural height */
form.wpuf-form-layout2.wpuf-form-layout2 .wpuf-fields .wpuf-attachment-list li.wpuf-image-wrap {
    height: auto !important;
    min-height: 0 !important;
}

/* Phone field (intl-tel-input): keep the flag gutter — the forced
   16px padding overlapped the dial-code/flag */
form.wpuf-form-layout2.wpuf-form-layout2 .wpuf-fields .iti input,
form.wpuf-form-layout2.wpuf-form-layout2 .wpuf-fields .iti input[type="tel"],
form.wpuf-form-layout2.wpuf-form-layout2 .wpuf-fields .intl-tel-input input,
form.wpuf-form-layout2.wpuf-form-layout2 .wpuf-fields .intl-tel-input input[type="tel"] {
    padding-left: 52px !important;
}

/* Figma sync: Select/Feature Image bar — exact 48px bar, no underline */
form.wpuf-form-layout2.wpuf-form-layout2 .wpuf-fields a.file-selector,
form.wpuf-form-layout2.wpuf-form-layout2 .wpuf-fields .file-selector {
    padding: 12px 16px !important;
    min-height: 48px !important;
    height: 48px !important;
    line-height: 24px !important;
    text-decoration: none !important;
    font-weight: 400 !important;
    box-sizing: border-box !important;
}

/* ---- Image selectors (Figma "Select Image" bar): compact left-aligned
   icon + text bar in the template tokens ---- */
form.wpuf-form-layout2.wpuf-form-layout2 .wpuf-fields a.file-selector,
form.wpuf-form-layout2.wpuf-form-layout2 .wpuf-fields .file-selector {
    background: #222C3C !important;
    border: 1px solid #344156 !important;
    border-radius: 10px !important;
    color: #9CABC3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 12px 16px !important;
    font-size: 16px !important;
    line-height: 24px !important;
    font-weight: 400 !important;
    text-decoration: none !important;
    text-transform: none !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
}
form.wpuf-form-layout2.wpuf-form-layout2 .wpuf-fields a.file-selector:before,
form.wpuf-form-layout2.wpuf-form-layout2 .wpuf-fields .file-selector:before {
    content: '' !important;
    display: inline-block !important;
    position: static !important;
    width: 20px !important;
    height: 20px !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%239CABC3'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 16.5V9.75m0 0l3 3m-3-3l-3 3M6.75 19.5a4.5 4.5 0 01-1.41-8.775 5.25 5.25 0 0110.233-2.33 3 3 0 013.758 3.848A3.752 3.752 0 0118 19.5H6.75z'/%3E%3C/svg%3E") center / contain no-repeat !important;
    font-family: inherit !important;
    line-height: normal !important;
    flex: none;
}

/* ---- Phone country dropdown (intl-tel-input): palette panel; our forced
   li spacing must not leak into its rows ---- */
form.wpuf-form-layout2.wpuf-form-layout2 .wpuf-fields .iti__country-list {
    background: #222C3C !important;
    border: 1px solid #344156 !important;
    color: #FFFFFF !important;
    border-radius: 6px;
    max-height: 220px;
    overflow-y: auto;
}
form.wpuf-form-layout2.wpuf-form-layout2 .wpuf-fields .iti__country-list li,
form.wpuf-form-layout2.wpuf-form-layout2 .wpuf-fields .iti__country-list li.iti__country {
    margin: 0 !important;
    padding: 8px 12px !important;
    list-style: none !important;
    background-image: none !important;
}
form.wpuf-form-layout2.wpuf-form-layout2 .wpuf-fields .iti__country-name {
    color: #FFFFFF !important;
}
form.wpuf-form-layout2.wpuf-form-layout2 .wpuf-fields .iti__dial-code {
    color: #9CABC3 !important;
}
form.wpuf-form-layout2.wpuf-form-layout2 .wpuf-fields .iti__country-list li.iti__country:hover,
form.wpuf-form-layout2.wpuf-form-layout2 .wpuf-fields .iti__country-list li.iti__country.iti__highlight {
    background: rgba(128, 128, 128, 0.15) !important;
}
form.wpuf-form-layout2.wpuf-form-layout2 .wpuf-fields .iti__divider {
    border-bottom: 1px solid #344156 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Selector focus/hover: single accent border, no outline ring */
form.wpuf-form-layout2.wpuf-form-layout2 .wpuf-fields a.file-selector:hover,
form.wpuf-form-layout2.wpuf-form-layout2 .wpuf-fields a.file-selector:focus,
form.wpuf-form-layout2.wpuf-form-layout2 .wpuf-fields a.file-selector:focus-visible,
form.wpuf-form-layout2.wpuf-form-layout2 .wpuf-fields .file-selector:hover,
form.wpuf-form-layout2.wpuf-form-layout2 .wpuf-fields .file-selector:focus,
form.wpuf-form-layout2.wpuf-form-layout2 .wpuf-fields .file-selector:focus-visible {
    outline: none !important;
    border-color: #3B82F6 !important;
    box-shadow: none !important;
}

/* Phone gutter: outrank the :not()-chain input padding rules */
form.wpuf-form-layout2.wpuf-form-layout2 .wpuf-fields .iti input:not([type="file"]):not([type="radio"]):not([type="checkbox"]):not([type="submit"]),
form.wpuf-form-layout2.wpuf-form-layout2 .wpuf-fields .intl-tel-input input:not([type="file"]):not([type="radio"]):not([type="checkbox"]):not([type="submit"]) {
    padding-left: 52px !important;
}

/* ---- Field icons follow the template palette (inline SVGs) ---- */
form.wpuf-form-layout2 .wpuf-fields .wpuf-upload-icon svg path,
form.wpuf-form-layout2 .wpuf-fields .dropdown-arrow svg path {
    stroke: #9CABC3 !important;
}
form.wpuf-form-layout2 .wpuf-fields .wpuf-math-captcha .refresh svg,
form.wpuf-form-layout2 .wpuf-fields .wpuf-math-captcha .refresh svg path {
    fill: #9CABC3 !important;
}

/* Field icon (Font Awesome, Show Icon = Yes) follows the template palette */
form.wpuf-form-layout2 .wpuf-label .wpuf-field-icon,
form.wpuf-form-layout2 .wpuf-field-icon {
    color: #9CABC3 !important;
}

/* Field Size: native selects must fill the sized .wpuf-fields (doubled class beats the base select rule). */
form.wpuf-form-layout2.wpuf-form-layout2 .wpuf-fields select {
    width: 100% !important;
}

/* Native select: hide the OS arrow, use the same chevron as the multiselect widget */
form.wpuf-form-layout2.wpuf-form-layout2 .wpuf-fields select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg width='14' height='8' viewBox='0 0 14 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.25 0.75L7 7L0.75 0.75' stroke='%239CABC3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    background-size: 14px 8px !important;
    padding-right: 40px !important;
}

/* Dark template: form title + description readable on the dark card */
form.wpuf-form-layout2 .wpuf-form-title { color: #F3F4F6 !important; }
form.wpuf-form-layout2 .wpuf-form-description { color: #9CABC3 !important; }

/* Spacing: separate form title/description from the first field */
form.wpuf-form-layout2 .wpuf-form-title { margin: 0 0 8px !important; }
form.wpuf-form-layout2 .wpuf-form-description { margin: 0 0 32px !important; }

/* Form list must not clip dropdowns / popups (multiselect panel, etc.) */
.wpuf-form-add.wpuf-form-layout2 ul.wpuf-form {
    overflow: initial !important;
}

/* Help text readable per palette */
form.wpuf-form-layout2 .wpuf-fields .wpuf-help {
    color: #9CABC3 !important;
}

/* ========================================
   MULTISTEP WIZARD - DARK READABILITY (B2/B3/B4)
   Active/completed accents come from the shared wizard CSS; these only
   correct the inactive/header colors that read as light-on-dark here.
   ======================================== */
.wpuf-form-layout2 .wpuf-step-item:not(.active-step):not(.completed-step) .wpuf-step-circle {
    background: transparent !important;
    border-color: #9CA3AF !important;
    color: #9CA3AF !important;
}
.wpuf-form-layout2 .wpuf-step-line:not(.wpuf-step-line-active) {
    background-color: #4B5563 !important;
}
.wpuf-form-layout2 .wpuf-step-item.active-step .wpuf-step-label,
.wpuf-form-layout2 .wpuf-step-item.completed-step .wpuf-step-label {
    color: #ffffff !important;
}
.wpuf-form-layout2 .wpuf-progressbar-header {
    color: #ffffff !important;
}