.input-wrapper, .amount-input-wrapper, .currency-input-wrapper { position: relative; display: block; width: 100%; } .input-wrapper input, .amount-input-wrapper input, .currency-input-wrapper input { position: relative; z-index: 1; width: 100%; } .currency-sign, .input-prefix, .input-suffix { position: absolute; top: 50%; transform: translateY(-50%); pointer-events: none !important; user-select: none !important; -webkit-user-select: none !important; -moz-user-select: none !important; -ms-user-select: none !important; touch-action: none !important; z-index: 2 !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .currency-sign, .input-prefix { left: 1.5rem; } .input-suffix { right: 1.5rem; } input:has(~ .currency-sign), input:has(~ .input-prefix) { padding-left: 4rem !important; } input:has(~ .input-suffix) { padding-right: 4rem !important; } .input-wrapper:focus-within .currency-sign, .amount-input-wrapper:focus-within .currency-sign, .currency-input-wrapper:focus-within .currency-sign, .input-wrapper:focus-within .input-prefix, .input-wrapper:focus-within .input-suffix { color: var(--neon-cyan, #00f3ff); text-shadow: 0 0 10px rgba(0, 243, 255, 0.4); } input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="url"], input[type="search"] { -webkit-appearance: none; -moz-appearance: textfield; appearance: none; } input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type="number"], input[type="text"], input[type="email"], input[type="password"] { position: relative; z-index: 1 !important; cursor: text; } .amount-input { position: relative !important; z-index: 1 !important; cursor: text !important; padding-left: 4rem !important; } .amount-input:focus { z-index: 1 !important; outline: none; } .amount-input ~ .currency-sign { position: absolute !important; left: 1.5rem !important; top: 50% !important; transform: translateY(-50%) !important; pointer-events: none !important; user-select: none !important; z-index: 2 !important; cursor: default !important; touch-action: none !important; } @media (max-width: 768px) { .currency-sign, .input-prefix { left: 1.2rem; } .input-suffix { right: 1.2rem; } input:has(~ .currency-sign), input:has(~ .input-prefix) { padding-left: 3.5rem !important; } } @media (max-width: 480px) { .currency-sign, .input-prefix { left: 1rem; font-size: clamp(1.2rem, 4vw, 1.5rem); } .input-suffix { right: 1rem; } input:has(~ .currency-sign), input:has(~ .input-prefix) { padding-left: 3rem !important; } .amount-input { padding-left: 3rem !important; } .amount-input ~ .currency-sign { left: 1rem !important; } } .currency-sign, .input-prefix, .input-suffix { aria-hidden: true; } input:focus-visible { outline: 2px solid var(--neon-cyan, #00f3ff) !important; outline-offset: 2px; } @keyframes input-glow { 0%, 100% { box-shadow: 0 0 20px rgba(0, 243, 255, 0.2); } 50% { box-shadow: 0 0 30px rgba(0, 243, 255, 0.4); } } input:focus { animation: input-glow 2s ease-in-out infinite; } @media print { .currency-sign, .input-prefix, .input-suffix { display: none !important; } input { padding-left: 1rem !important; padding-right: 1rem !important; } } @media (prefers-color-scheme: dark) { input { color-scheme: dark; } } @media (prefers-contrast: high) { .currency-sign, .input-prefix, .input-suffix { opacity: 1 !important; font-weight: 700; } input:focus { outline-width: 3px !important; } } input:valid:not(:placeholder-shown) { border-color: var(--neon-green, #00ff9d); } input:valid:not(:placeholder-shown) ~ .currency-sign, input:valid:not(:placeholder-shown) ~ .input-prefix { color: var(--neon-green, #00ff9d); } input:invalid:not(:placeholder-shown):not(:focus) { border-color: var(--neon-red, #ff0055); } input:invalid:not(:placeholder-shown):not(:focus) ~ .currency-sign, input:invalid:not(:placeholder-shown):not(:focus) ~ .input-prefix { color: var(--neon-red, #ff0055); } input:required ~ .currency-sign::after, input:required ~ .input-prefix::after { content: '*'; position: absolute; top: -8px; right: -8px; color: var(--neon-red, #ff0055); font-size: 0.8em; } input:disabled { opacity: 0.5; cursor: not-allowed; } input:disabled ~ .currency-sign, input:disabled ~ .input-prefix, input:disabled ~ .input-suffix { opacity: 0.3; } @media (hover: none) and (pointer: coarse) { input { min-height: 48px; font-size: 16px; } .currency-sign, .input-prefix, .input-suffix { pointer-events: none !important; touch-action: none !important; } } @-moz-document url-prefix() { input[type="number"] { -moz-appearance: textfield; } } @supports (-webkit-touch-callout: none) { input { -webkit-appearance: none; } .currency-sign, .input-prefix, .input-suffix { -webkit-user-select: none; -webkit-touch-callout: none; } } @supports (-ms-ime-align: auto) { input::-ms-clear, input::-ms-reveal { display: none; } }