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

/* ========================================
   CSS VARIABLES - TEAL THEME
   ======================================== */
:root {
    --wpuf-primary-color: #3CA6B4;
    --wpuf-border-color: #D1D5DB;
    --wpuf-border-hover: #9CA3AF;
    --wpuf-bg-light: #FAFAFA;
    --wpuf-bg-hover: #F9FAFB;
    --wpuf-text-primary: #3CA6B4;
    --wpuf-text-secondary: #6B7280;
    --wpuf-radius: 8px;
    --wpuf-transition: all 0.2s ease;

    /* Additional color variables */
    --wpuf-text-gray: #4B5563;
    --wpuf-text-muted: #9CA3AF;
    --wpuf-border-gray: #DCDCDC;
    --wpuf-bg-gray-100: #F3F4F6;
    --wpuf-bg-gray-50: #F9FAFB;
    --wpuf-bg-white: #FFFFFF;

    /* Spacing variables */
    --wpuf-spacing-xs: 6px;
    --wpuf-spacing-sm: 8px;
    --wpuf-spacing-md: 12px;
    --wpuf-spacing-lg: 16px;
    --wpuf-spacing-xl: 20px;

    /* Font weight variables */
    --wpuf-font-weight-normal: 400;
    --wpuf-font-weight-medium: 500;

    /* Border radius variables */
    --wpuf-radius-sm: 6px;
    --wpuf-radius-lg: 85px;
}

/* ========================================
   LABELS
   ======================================== */
form.wpuf-form-layout4 .wpuf-label {
    font-weight: var(--wpuf-font-weight-medium) !important;
    font-size: 18px !important;
    /* Label text darkened from the accent teal (2.8:1) to meet WCAG AA 4.5:1 on white.
       Kept separate from --wpuf-primary-color so button/border fills stay on-brand. */
    color: #1F7A86 !important;
}

/* ========================================
   FORM INPUTS - THEME COLORS
   ======================================== */
form.wpuf-form-layout4 .wpuf-fields input,
form.wpuf-form-layout4 .wpuf-fields textarea,
form.wpuf-form-layout4 .wpuf-fields select {
    border-radius: var(--wpuf-radius-sm) !important;
    border: 1px solid var(--wpuf-border-gray) !important;
    padding: 10px var(--wpuf-spacing-lg) !important;
    background: #FAFAFA !important;
}

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

/* ========================================
   DROPDOWN ARROW
   ======================================== */
/* Regular dropdown arrow - exclude multi-select fields and error states */
form.wpuf-form-layout4 .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 - THEME COLORS
   ======================================== */
form.wpuf-form-layout4 .multiselect-input {
    border: 1px solid #D1D5DB !important;
    border-radius: var(--wpuf-spacing-xs) !important;
    padding: var(--wpuf-spacing-sm) var(--wpuf-spacing-lg) !important;
    background: #FAFAFA !important;
}

form.wpuf-form-layout4 .multiselect-input:hover {
    border-color: #9ca3af !important;
}

form.wpuf-form-layout4 .selected-items:not(:empty) {
    gap: 4px;
}

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

form.wpuf-form-layout4 .remove-item {
    color: #6b7280;
}

form.wpuf-form-layout4 .remove-item:hover {
    color: #ef4444;
}

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

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

form.wpuf-form-layout4 .multiselect-dropdown {
    background: #FAFAFA;
    border: 1px solid #E5E7EB !important;
    border-radius: 8px !important;
}

form.wpuf-form-layout4 .multiselect-option {
    border-bottom: 1px solid #f3f4f6 !important;
}

form.wpuf-form-layout4 .multiselect-option:hover {
    background-color: #f9fafb;
}

form.wpuf-form-layout4 .multiselect-option label {
    color: var(--wpuf-primary-color);
}

form.wpuf-form-layout4 .multiselect-option label .wpuf-price-label {
    color: var(--wpuf-primary-color) !important;
}

form.wpuf-form-layout4 .multiselect-option label::before {
    background: var(--wpuf-bg-white);
}

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

/* ========================================
   RADIO BUTTONS - THEME COLORS
   ======================================== */
form.wpuf-form-layout4 .wpuf-fields input[type="radio"] {
    border: 1px solid #D1D5DB !important;
    background-color: var(--wpuf-bg-gray-100) !important;
}

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

form.wpuf-form-layout4 .wpuf-fields input[type="radio"]:checked {
    background-color: #fff !important;
}

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

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

/* ========================================
   CHECKBOX - THEME COLORS
   ======================================== */
form.wpuf-form-layout4 .wpuf-fields .wpuf-checkbox-block::before {
    border: 1px solid var(--wpuf-border-color) !important;
    background: var(--wpuf-bg-white);
}

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

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

form.wpuf-form-layout4 .wpuf-fields .wpuf-checkbox-block label {
    color: var(--wpuf-text-primary);
}

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

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

form.wpuf-form-layout4 .wpuf-fields .wpuf-checkbox-block:has(input[type="checkbox"]:invalid) {
    color: #ef4444;
}

/* ========================================
   FILE UPLOAD - THEME COLORS
   ======================================== */
form.wpuf-form-layout4 .wpuf-fields .file-selector {
    padding: 10px var(--wpuf-spacing-lg) !important;
    background: var(--wpuf-bg-light) !important;
    border: 1px solid var(--wpuf-border-color) !important;
    border-radius: var(--wpuf-radius) !important;
    color: var(--wpuf-text-secondary) !important;
}

form.wpuf-form-layout4 .wpuf-fields .file-selector:hover {
    border-color: var(--wpuf-border-color) !important;
    background: var(--wpuf-bg-hover) !important;
    color: var(--wpuf-text-primary) !important;
}

form.wpuf-form-layout4 .wpuf-fields .file-selector::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='%2394A3B8' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E");
}

form.wpuf-form-layout4 .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-layout4 .wpuf-fields .wpuf-attachment-list li {
    background: var(--wpuf-bg-gray-50);
    border: 1px solid #E5E7EB !important;
    border-radius: 6px !important;
}

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

form.wpuf-form-layout4 .wpuf-fields .progress {
    background: #E5E7EB;
}

form.wpuf-form-layout4 .wpuf-fields .progress .bar {
    background: #3B82F6;
}

/* ========================================
   FILE UPLOAD ZONE - THEME COLORS
   ======================================== */
form.wpuf-form-layout4 .wpuf-fields .wpuf-file-upload-zone {
    border: 2px dashed #D1D5DB !important;
    border-radius: 8px !important;
    background: var(--wpuf-bg-white);
}

form.wpuf-form-layout4 .wpuf-fields .wpuf-file-upload-zone:hover {
    border-color: var(--wpuf-text-muted) !important;
    background: var(--wpuf-bg-gray-50);
}

form.wpuf-form-layout4 .wpuf-fields .wpuf-file-upload-zone:focus-within {
    border-color: #3B82F6 !important;
}

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

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

/* ========================================
   SUBMIT BUTTON
   ======================================== */
form.wpuf-form-layout4 li.wpuf-submit input.wpuf-submit-button {
    border: none !important;
    padding: 10px 32px !important;
    border-radius: 85px !important;
    background: var(--wpuf-primary-color) !important;
    color: white !important;
}

/* ==== Figma deep-sync (5556:99830) — teal registration ====
   Own palette: #3CA6B4 accent, #FAFAFA / #DCDCDC, #4B5563 text,
   square (0 radius) fields. */
form.wpuf-form-layout4.wpuf-form-layout4 .wpuf-fields input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="file"]),
form.wpuf-form-layout4.wpuf-form-layout4 .wpuf-fields select {
    border-radius: 0 !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}
form.wpuf-form-layout4.wpuf-form-layout4 .wpuf-fields textarea {
    background: transparent !important;
    border: 1px solid #E3E5E8 !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
}
/* Controls: rest border #E5E7EB, #3CA6B4 accent */
form.wpuf-form-layout4.wpuf-form-layout4 .wpuf-fields input[type="radio"] {
    border-color: #E5E7EB !important;
    background: #FFFFFF !important;
}
form.wpuf-form-layout4.wpuf-form-layout4 .wpuf-fields input[type="radio"]:checked {
    border-color: #3CA6B4 !important;
}
form.wpuf-form-layout4.wpuf-form-layout4 .wpuf-fields .wpuf-checkbox-block::before {
    border-color: #E5E7EB !important;
    background: #FFFFFF !important;
}
form.wpuf-form-layout4.wpuf-form-layout4 .wpuf-fields .wpuf-radio-field label,
form.wpuf-form-layout4.wpuf-form-layout4 .wpuf-fields .wpuf-checkbox-block label,
form.wpuf-form-layout4.wpuf-form-layout4 .multiselect-option label {
    color: #4B5563 !important;
    font-size: 16px !important;
    font-weight: 400 !important;
}
/* Multiselect: #DCDCDC borders, square, flat chips */
form.wpuf-form-layout4.wpuf-form-layout4 .multiselect-input {
    border-color: #DCDCDC !important;
    border-radius: 0 !important;
}
form.wpuf-form-layout4.wpuf-form-layout4 .selected-item {
    background: #F3F3F3 !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 2px 10px !important;
    color: #4B5563 !important;
}
form.wpuf-form-layout4.wpuf-form-layout4 .multiselect-dropdown {
    border-color: #DCDCDC !important;
    border-radius: 0 !important;
}
/* Password strength — light palette */
form.wpuf-form-layout4.wpuf-form-layout4 ul.wpuf-form .pass-strength-result.strong,
form.wpuf-form-layout4.wpuf-form-layout4 .pass-strength-result.pass-strength-result.strong {
    background: #E1FFEF !important;
    color: #00A14B !important;
}
/* File selector + upload zone */
form.wpuf-form-layout4.wpuf-form-layout4 .wpuf-fields .file-selector {
    border-color: #DCDCDC !important;
    border-radius: 0 !important;
    padding: 8px 16px !important;
    color: #4B5563 !important;
    font-size: 16px !important;
    font-weight: 400 !important;
}
form.wpuf-form-layout4.wpuf-form-layout4 .wpuf-fields .wpuf-file-upload-zone {
    background: #FAFAFA !important;
    border: 1px dashed #CBD5E1 !important;
    border-radius: 0 !important;
}
form.wpuf-form-layout4.wpuf-form-layout4 .wpuf-fields .wpuf-upload-title,
form.wpuf-form-layout4.wpuf-form-layout4 .wpuf-fields .wpuf-upload-title .wpuf-label label {
    color: #4B5563 !important;
}
form.wpuf-form-layout4.wpuf-form-layout4 .wpuf-fields .wpuf-help {
    color: #9CA3AF !important;
    font-style: italic;
    font-size: 16px !important;
    line-height: 24px !important;
}

/* Control rest border: crisp neutral gray (visible on white) */
form.wpuf-form-layout4.wpuf-form-layout4 .wpuf-fields input[type="radio"] {
    border-color: #9CA3AF !important;
}
form.wpuf-form-layout4.wpuf-form-layout4 .wpuf-fields input[type="radio"]:checked {
    border-color: #3CA6B4 !important;
}
form.wpuf-form-layout4.wpuf-form-layout4 .wpuf-fields .wpuf-checkbox-block::before {
    border-color: #9CA3AF !important;
}
form.wpuf-form-layout4.wpuf-form-layout4 .wpuf-fields .wpuf-checkbox-block:has(input[type="checkbox"]:checked)::before {
    border-color: #3CA6B4 !important;
}
form.wpuf-form-layout4.wpuf-form-layout4 .multiselect-option label::before {
    border-color: #9CA3AF !important;
}

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

/* ---- Self-contained surface: readable on dark themes (no border,
   per the borderless registration spec) ---- */
form.wpuf-form-layout4.wpuf-form-layout4 {
    background: #FFFFFF !important;
    padding: 40px !important;
    border-radius: 20px !important;
    border: none !important;
}
@media (max-width: 600px) {
    form.wpuf-form-layout4.wpuf-form-layout4 {
        padding: 24px !important;
    }
}

/* ---- Strength indicator: palette states (default box was WP-core white) ---- */
form.wpuf-form-layout4.wpuf-form-layout4 .pass-strength-result {
    background: #FAFAFA !important;
    border: 1px solid #DCDCDC !important;
    color: #9CA3AF !important;
    border-radius: 6px !important;
    padding: 10px 32px !important;
}
form.wpuf-form-layout4.wpuf-form-layout4 .pass-strength-result.short {
    background: #FEE2E2 !important;
    border-color: #FEE2E2 !important;
    color: #B91C1C !important;
}
form.wpuf-form-layout4.wpuf-form-layout4 .pass-strength-result.bad {
    background: #FFEDD5 !important;
    border-color: #FFEDD5 !important;
    color: #C2410C !important;
}
form.wpuf-form-layout4.wpuf-form-layout4 .pass-strength-result.good {
    background: #FEF9C3 !important;
    border-color: #FEF9C3 !important;
    color: #A16207 !important;
}
form.wpuf-form-layout4.wpuf-form-layout4 .pass-strength-result.strong {
    background: #E1FFEF !important;
    border-color: #E1FFEF !important;
    color: #00A14B !important;
}

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

/* ---- Multistep Prev/Next: same treatment as the template submit ---- */
form.wpuf-form-layout4.wpuf-form-layout4 .wpuf-multistep-nav-btn {
    background: #3CA6B4 !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-layout4.wpuf-form-layout4 .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-layout4.wpuf-form-layout4 .wpuf-attachment-list li.wpuf-image-wrap .attachment-name img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border: 1px solid #E5E7EB !important;
    border-radius: 10px !important;
}
form.wpuf-form-layout4.wpuf-form-layout4 .wpuf-attachment-list li.wpuf-image-wrap .caption {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
}
form.wpuf-form-layout4.wpuf-form-layout4 .wpuf-attachment-list li.wpuf-image-wrap a.attachment-delete img,
form.wpuf-form-layout4.wpuf-form-layout4 .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-layout4.wpuf-form-layout4 .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-layout4.wpuf-form-layout4 .wpuf-attachment-list li.wpuf-image-wrap .caption a.attachment-delete img {
    display: none;
}
form.wpuf-form-layout4.wpuf-form-layout4 .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='%236B7280'%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-layout4.wpuf-form-layout4 .wpuf-attachment-list li.wpuf-image-wrap .caption .wpuf-drag-file {
    display: none;
}
form.wpuf-form-layout4.wpuf-form-layout4 .wpuf-attachment-list li.wpuf-image-wrap .wpuf-attach-title {
    flex: 1;
    font-size: 16px;
    line-height: 24px;
    color: #4B5563;
    overflow-wrap: anywhere;
}
/* Legacy file-selector matches the field geometry of its template */
form.wpuf-form-layout4.wpuf-form-layout4 .wpuf-fields a.file-selector {
    min-height: 200px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ---- Consistency pass: captcha strip palette, legacy selector icon off ---- */
form.wpuf-form-layout4.wpuf-form-layout4 .wpuf-fields a.file-selector:before,
form.wpuf-form-layout4.wpuf-form-layout4 .wpuf-fields .file-selector:before {
    display: none !important;
}
form.wpuf-form-layout4.wpuf-form-layout4 .wpuf-fields .wpuf-math-captcha .captcha {
    background: #FAFAFA !important;
    border-color: #DCDCDC !important;
}
form.wpuf-form-layout4.wpuf-form-layout4 .wpuf-fields .wpuf-math-captcha .captcha-number,
form.wpuf-form-layout4.wpuf-form-layout4 .wpuf-fields .wpuf-math-captcha .captcha-equal {
    color: #4B5563 !important;
}

/* Legacy 150px thumbnail box: row layout needs natural height */
form.wpuf-form-layout4.wpuf-form-layout4 .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-layout4.wpuf-form-layout4 .wpuf-fields .iti input,
form.wpuf-form-layout4.wpuf-form-layout4 .wpuf-fields .iti input[type="tel"],
form.wpuf-form-layout4.wpuf-form-layout4 .wpuf-fields .intl-tel-input input,
form.wpuf-form-layout4.wpuf-form-layout4 .wpuf-fields .intl-tel-input input[type="tel"] {
    padding-left: 52px !important;
}

/* Figma sync: upload selector zone — no underline, zone typography */
form.wpuf-form-layout4.wpuf-form-layout4 .wpuf-fields a.file-selector,
form.wpuf-form-layout4.wpuf-form-layout4 .wpuf-fields .file-selector {
    text-decoration: none !important;
    line-height: 24px !important;
    font-weight: 400 !important;
}

/* ---- Image selectors (Figma "Select Image" bar): compact left-aligned
   icon + text bar in the template tokens ---- */
form.wpuf-form-layout4.wpuf-form-layout4 .wpuf-fields a.file-selector,
form.wpuf-form-layout4.wpuf-form-layout4 .wpuf-fields .file-selector {
    background: #FAFAFA !important;
    border: 1px solid #DCDCDC !important;
    border-radius: 0 !important;
    color: #4B5563 !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-layout4.wpuf-form-layout4 .wpuf-fields a.file-selector:before,
form.wpuf-form-layout4.wpuf-form-layout4 .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='%234B5563'%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-layout4.wpuf-form-layout4 .wpuf-fields .iti__country-list {
    background: #FFFFFF !important;
    border: 1px solid #DCDCDC !important;
    color: #4B5563 !important;
    border-radius: 6px;
    max-height: 220px;
    overflow-y: auto;
}
form.wpuf-form-layout4.wpuf-form-layout4 .wpuf-fields .iti__country-list li,
form.wpuf-form-layout4.wpuf-form-layout4 .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-layout4.wpuf-form-layout4 .wpuf-fields .iti__country-name {
    color: #4B5563 !important;
}
form.wpuf-form-layout4.wpuf-form-layout4 .wpuf-fields .iti__dial-code {
    color: #9CA3AF !important;
}
form.wpuf-form-layout4.wpuf-form-layout4 .wpuf-fields .iti__country-list li.iti__country:hover,
form.wpuf-form-layout4.wpuf-form-layout4 .wpuf-fields .iti__country-list li.iti__country.iti__highlight {
    background: rgba(128, 128, 128, 0.15) !important;
}
form.wpuf-form-layout4.wpuf-form-layout4 .wpuf-fields .iti__divider {
    border-bottom: 1px solid #DCDCDC !important;
    margin: 0 !important;
    padding: 0 !important;
}

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

/* Phone gutter: outrank the :not()-chain input padding rules */
form.wpuf-form-layout4.wpuf-form-layout4 .wpuf-fields .iti input:not([type="file"]):not([type="radio"]):not([type="checkbox"]):not([type="submit"]),
form.wpuf-form-layout4.wpuf-form-layout4 .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-layout4 .wpuf-fields .wpuf-upload-icon svg path,
form.wpuf-form-layout4 .wpuf-fields .dropdown-arrow svg path {
    stroke: #4B5563 !important;
}
form.wpuf-form-layout4 .wpuf-fields .wpuf-math-captcha .refresh svg,
form.wpuf-form-layout4 .wpuf-fields .wpuf-math-captcha .refresh svg path {
    fill: #4B5563 !important;
}

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

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

/* Native select: hide the OS arrow, use the same chevron as the multiselect widget */
form.wpuf-form-layout4.wpuf-form-layout4 .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='%234B5563' 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;
}

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

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

/* Help text readable per palette */
form.wpuf-form-layout4 .wpuf-fields .wpuf-help {
    color: #6B7280 !important;
}