.wpuf-social-field-wrapper { position: relative; display: inline-block; width: 100%; } .wpuf-social-field-wrapper input[type="url"], .wpuf-social-field-wrapper input[type="text"] { padding-right: 35px; width: 100%; box-sizing: border-box; } .wpuf-input-wrapper { position: relative; display: flex; align-items: center; width: 100%; } .wpuf-at-prefix { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 14px; color: #666; pointer-events: none; z-index: 2; font-weight: 500; line-height: 1; } .wpuf-twitter-with-prefix { padding-left: 24px !important;  width: 100% !important; } .wpuf-input-wrapper input:focus + .wpuf-at-prefix, .wpuf-input-wrapper input:focus ~ .wpuf-at-prefix { color: #1da1f2; } @media (prefers-color-scheme: dark) { .wpuf-at-prefix { color: #999; } .wpuf-input-wrapper input:focus + .wpuf-at-prefix, .wpuf-input-wrapper input:focus ~ .wpuf-at-prefix { color: #1da1f2; } } .wpuf-twitter-icon, .wpuf-twitter-svg { display: inline-block; vertical-align: middle; width: 20px; height: 20px; transition: all 0.2s ease; } @media (prefers-color-scheme: dark) { .wpuf-twitter-icon path, .wpuf-twitter-svg path { stroke: #ffffff;  } } .wpuf-twitter-icon[stroke="currentColor"] path, .wpuf-twitter-svg[stroke="currentColor"] path { stroke: currentColor; } .wpuf-social-field-wrapper.wpuf-has-error input { border-color: #d32f2f; } .wpuf-label-with-icon { display: inline-flex; align-items: center; margin-bottom: 5px; gap: 3px; max-width: 100%; } .wpuf-label-with-icon label { display: inline-block; margin-bottom: 0; margin-right: 0; flex-shrink: 0; } .wpuf-social-label-icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; vertical-align: middle !important; position: relative; z-index: 1; flex-shrink: 0; width: auto !important; height: auto !important; } .wpuf-social-label-icon .wpuf-twitter-svg { width: 14px !important; height: 14px !important; display: inline-block !important; margin: 0 !important; vertical-align: middle !important; transition: color 0.2s ease; } .wpuf-social-label-icon svg { width: 14px !important; height: 14px !important; display: inline-block !important; margin: 0 !important; vertical-align: middle !important; } .wpuf-social-input-wrapper input[type="url"]:focus, .wpuf-social-input-wrapper input[type="text"]:focus { outline: none; border-color: #11496c; box-shadow: 0 0 0 1px rgba(29, 161, 242, 0.2); } .wpuf-social-input-wrapper input[type="url"]:hover, .wpuf-social-input-wrapper input[type="text"]:hover { border-color: #bbb; } .wpuf-social-input-wrapper input[type="url"][readonly], .wpuf-social-input-wrapper input[type="text"][readonly] { background-color: #f9f9f9; color: #666; cursor: not-allowed; } .wpuf-social-input-wrapper input[type="url"][readonly]:hover, .wpuf-social-input-wrapper input[type="text"][readonly]:hover { border-color: #ddd; } @media (prefers-color-scheme: dark) { .wpuf-social-input-wrapper input[type="url"], .wpuf-social-input-wrapper input[type="text"] { background-color: #2d2d2d; border-color: #555; color: #fff; } .wpuf-social-input-wrapper input[type="url"]:focus, .wpuf-social-input-wrapper input[type="text"]:focus { border-color: #1da1f2; box-shadow: 0 0 0 1px rgba(29, 161, 242, 0.3); } .wpuf-social-input-wrapper input[type="url"][readonly], .wpuf-social-input-wrapper input[type="text"][readonly] { background-color: #1a1a1a; color: #999; } } @media (prefers-contrast: high) { .wpuf-social-input-wrapper input[type="url"], .wpuf-social-input-wrapper input[type="text"] { border-width: 2px; border-color: #000; } .wpuf-social-input-wrapper input[type="url"]:focus, .wpuf-social-input-wrapper input[type="text"]:focus { border-color: #00cc81; box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.5); } .wpuf-social-label-icon .wpuf-twitter-svg path { stroke: #000 !important; } } @media (max-width: 768px) { .wpuf-social-input-wrapper.wpuf-small, .wpuf-social-input-wrapper.wpuf-medium { max-width: 100%; } .wpuf-social-input-wrapper input[type="url"], .wpuf-social-input-wrapper input[type="text"] { font-size: 16px;  } } .wpuf-social-field-wrapper { position: relative; display: inline-block; width: 100%; box-sizing: border-box; } .wpuf-social-field-wrapper input[type="url"], .wpuf-social-field-wrapper input[type="text"] { width: 100%; padding: 8px 40px 8px 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; line-height: 1.4; background-color: #fff; box-sizing: border-box; position: relative; z-index: 1; } .wpuf-label-with-icon { display: inline-flex; align-items: center; margin-bottom: 5px; gap: 3px; } .wpuf-label-with-icon label { margin-bottom: 0; margin-right: 0; } .wpuf-social-input-wrapper { position: relative; display: inline-block; width: 100%; box-sizing: border-box; } .wpuf-social-input-wrapper.wpuf-small { max-width: 200px; } .wpuf-social-input-wrapper.wpuf-medium { max-width: 300px; } .wpuf-social-input-wrapper.wpuf-large { max-width: 100%; } .wpuf-social-input-wrapper input[type="url"], .wpuf-social-input-wrapper input[type="text"] { width: 100%; padding: 8px 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; line-height: 1.4; background-color: #fff; box-sizing: border-box; transition: border-color 0.3s ease, box-shadow 0.3s ease; } .wpuf-fields input[data-validation="strict"] { border: 1px solid #ddd; transition: border-color 0.3s ease; } .wpuf-fields input[data-validation="strict"]:focus { border-color: #1da1f2; box-shadow: 0 0 0 1px rgba(29, 161, 242, 0.2); } .wpuf-fields input[data-validation="strict"].wpuf-error { border-color: #d32f2f; background-color: #ffeaea; } .wpuf-fields input[data-validation="strict"].wpuf-valid { border-color: #4caf50; } .wpuf-twitter-error, .wpuf-facebook-error, .wpuf-linkedin-error, .wpuf-instagram-error, .wpuf-error-msg { color: #a94442; background-color: #f2dede; border: 1px solid #ebccd1; padding: 8px 12px; border-radius: 4px; font-size: 13px; margin-top: 5px; display: block; line-height: 1.4; } .wpuf-meta-key-readonly input[readonly], .wpuf-meta-key-readonly input[disabled] { background-color: #f9f9f9 !important; color: #666 !important; cursor: not-allowed !important; border-color: #ddd !important; } .wpuf-meta-key-readonly { position: relative; } .wpuf-meta-key-readonly::after { content: "🔒"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: #999; pointer-events: none; font-size: 12px; z-index: 10; } .wpuf-social-field-wrapper .wpuf-social-icon { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; z-index: 2; } .wpuf-social-field-wrapper input[type="text"]:focus, .wpuf-social-field-wrapper input[type="url"]:focus { outline: 2px solid transparent; outline-offset: 2px; } .wpuf-fields .wpuf-social-label-icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; vertical-align: middle !important; flex-shrink: 0 !important; } .wpuf-fields .wpuf-label-with-icon { display: inline-flex !important; align-items: center !important; gap: 3px !important; margin-bottom: 5px !important; max-width: 100% !important; } .wpuf-fields .wpuf-label-with-icon label { flex-shrink: 0 !important; margin-bottom: 0 !important; margin-right: 0 !important; } .wpuf-fields .wpuf-social-label-icon svg { position: static !important; float: none !important; clear: none !important; width: 24px !important; height: 24px !important; display: inline-block !important; vertical-align: middle !important; } @media (max-width: 768px) { .wpuf-social-label-icon { width: auto !important; height: auto !important; } .wpuf-social-label-icon .wpuf-twitter-svg, .wpuf-social-label-icon svg { width: 24px !important; height: 24px !important; } } .wpuf-label-with-icon .wpuf-social-label-icon { line-height: 1 !important; vertical-align: baseline !important; display: inline !important; } .wpuf-label-with-icon .wpuf-social-label-icon svg { vertical-align: text-bottom !important; display: inline !important; } li .wpuf-label-with-icon { display: inline-flex !important; align-items: center !important; } li .wpuf-label-with-icon .wpuf-social-label-icon { display: inline !important; vertical-align: middle !important; margin-bottom: 10px !important; } li .wpuf-label-with-icon .wpuf-social-label-icon svg { display: inline !important; vertical-align: text-bottom !important; width: 26px !important; height: 26px !important; } .wpuf-form-builder .wpuf-social-label-icon { display: inline-flex !important; align-items: center !important; vertical-align: middle !important; margin-left: 4px !important; } #form-preview-stage .wpuf-social-label-icon { display: inline-flex !important; align-items: center !important; vertical-align: middle !important; margin-left: 4px !important; } #form-preview-stage .wpuf-social-label-icon .wpuf-twitter-svg { width: 16px !important; height: 16px !important; display: inline-block !important; vertical-align: middle !important; } #form-preview-stage label .wpuf-social-label-icon { display: inline-flex !important; align-items: center !important; vertical-align: middle !important; margin-left: 4px !important; } #form-preview-stage label { display: inline-flex !important; align-items: center !important; } .wpuf-form .wpuf-social-label-icon { display: inline-flex !important; align-items: center !important; vertical-align: middle !important; margin-left: 4px !important; }