.input-group{--input-accent-color:var(--color-sky);--input-label-focused-text:#fff;--input-focus-highlight-bg:#ffffff4d;--dark-input-focus-highlight-bg:#021c2a4d;margin-bottom:1.75rem;transition:all .4s;position:relative}.input-group[data-color=sky]{--input-accent-color:var(--color-sky)}.input-group[data-color=red]{--input-accent-color:var(--color-red)}.input-group[data-color=green]{--input-accent-color:var(--color-green)}.input-group[data-color=yellow]{--input-accent-color:var(--color-yellow)}.input-group[data-error=true]{--input-accent-color:var(--color-red)}.input-group[data-is-valid=true]:not([data-focused=true]){--input-accent-color:var(--color-green)}.input-container{position:relative}.modern-input{background:0 0;border:none;border-bottom:1px solid #e5e7eb;outline:none;width:100%;height:3.5rem;font-size:1rem;transition:all .4s}.input-group.rtl .modern-input{text-align:right;direction:rtl;padding:0 3rem 0 1rem}.input-group.rtl .floating-label{text-align:right;left:auto;right:3rem}.input-group.rtl .input-icon{left:auto;right:1rem}.input-group.rtl .modern-input:not(:-moz-placeholder-shown)~.floating-label{left:auto;right:3rem}.input-group.rtl .modern-input.is-focused~.floating-label,.input-group.rtl .modern-input:not(:placeholder-shown)~.floating-label,.input-group.rtl .modern-input.is-filled~.floating-label{left:auto;right:3rem}.input-group.rtl .focus-highlight,.input-group.rtl .highlight-bar{transform-origin:100%}.input-group.rtl .modern-input.is-focused~.focus-highlight,.input-group.rtl .modern-input.is-focused~.highlight-bar{animation:.3s ease-in-out forwards scaleInFromRight}.input-group.rtl .modern-input:not(.is-focused)~.focus-highlight,.input-group.rtl .modern-input:not(.is-focused)~.highlight-bar{animation:.3s ease-in-out forwards scaleOutToLeft}.input-group.ltr .modern-input{text-align:left;direction:ltr;padding:0 1rem 0 3rem}.input-group.ltr .floating-label{text-align:left;left:3rem;right:auto}.input-group.ltr .input-icon{left:1rem;right:auto}.input-group.ltr .modern-input:not(:-moz-placeholder-shown)~.floating-label{left:3rem;right:auto}.input-group.ltr .modern-input.is-focused~.floating-label,.input-group.ltr .modern-input:not(:placeholder-shown)~.floating-label,.input-group.ltr .modern-input.is-filled~.floating-label{left:3rem;right:auto}.input-group.ltr .focus-highlight,.input-group.ltr .highlight-bar{transform-origin:0}.input-group.ltr .modern-input.is-focused~.focus-highlight,.input-group.ltr .modern-input.is-focused~.highlight-bar{animation:.3s ease-in-out forwards scaleInFromLeft}.input-group.ltr .modern-input:not(.is-focused)~.focus-highlight,.input-group.ltr .modern-input:not(.is-focused)~.highlight-bar{animation:.3s ease-in-out forwards scaleOutToRight}.floating-label{pointer-events:none;color:#9ca3af;white-space:nowrap;padding:0 .25rem;font-size:.95rem;transition:all .4s;position:absolute;top:50%;transform:translateY(-50%)}.input-icon{color:#9ca3af;z-index:2;transition:all .4s;position:absolute;top:50%;transform:translateY(-50%)}.modern-input:not(:-moz-placeholder-shown)~.floating-label{color:var(--input-label-focused-text);z-index:50;background-color:var(--input-accent-color);border-radius:555px;padding:.15rem .5rem;font-size:.85rem;font-weight:500;top:0;transform:translateY(-50%)}.modern-input.is-focused~.floating-label,.modern-input:not(:placeholder-shown)~.floating-label{color:var(--input-label-focused-text);z-index:50;background-color:var(--input-accent-color);border-radius:555px;padding:.15rem .5rem;font-size:.85rem;font-weight:500;top:0;transform:translateY(-50%)}.modern-input:not(:-moz-placeholder-shown)~.input-icon{color:var(--input-accent-color)}.modern-input.is-focused~.input-icon,.modern-input:not(:placeholder-shown)~.input-icon{color:var(--input-accent-color)}.modern-input:not(:-moz-placeholder-shown):not(.is-focused)~.floating-label{color:var(--input-accent-color);background-color:#0000}.modern-input:not(:placeholder-shown):not(.is-focused)~.floating-label{color:var(--input-accent-color);background-color:#0000}.modern-input.is-filled~.floating-label{color:var(--input-accent-color);z-index:50;background-color:#0000;border-radius:555px;padding:.15rem .5rem;font-size:.85rem;font-weight:500;top:0;transform:translateY(-50%)}.dark .modern-input{color:#fff}.focus-highlight{border:solid 2px var(--input-accent-color);pointer-events:none;border-radius:2px;width:100%;height:100%;position:absolute;top:0;left:0;transform:scaleX(0)}.highlight-bar{background:var(--input-accent-color);border-radius:5px;width:100%;height:2px;position:absolute;bottom:0;left:0;transform:scaleX(0)}@keyframes scaleInFromRight{0%{transform-origin:100%;transform:scaleX(0)}to{transform-origin:100%;transform:scaleX(1)}}@keyframes scaleInFromLeft{0%{transform-origin:0;transform:scaleX(0)}to{transform-origin:0;transform:scaleX(1)}}@keyframes scaleOutToRight{0%{transform-origin:100%;transform:scaleX(1)}to{transform-origin:100%;transform:scaleX(0)}}@keyframes scaleOutToLeft{0%{transform-origin:0;transform:scaleX(1)}to{transform-origin:0;transform:scaleX(0)}}.input-error{border-bottom-color:var(--color-red)!important}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}.error-message{color:var(--color-red);opacity:0;align-items:center;gap:.5rem;margin-top:.5rem;font-size:.875rem;transition:all .3s;display:flex;transform:translateY(-10px)}.error-message.visible{opacity:1;transform:translateY(0)}.error-icon{flex-shrink:0}.input-group.rtl .error-message{text-align:right;flex-direction:row-reverse}.input-group.ltr .error-message{text-align:left}.error-message{color:#ef4444;align-items:center;gap:.5rem;margin-top:.5rem;font-size:.875rem;display:flex}.error-icon{color:#ef4444}.error-message{color:#c32323;opacity:0;border-radius:5px;justify-content:flex-start;align-items:center;max-height:0;margin-top:.25rem;padding:.5rem 0;font-size:.85rem;transition:all .3s;display:flex;overflow:hidden}.error-message.visible{opacity:1;max-height:100px;margin-top:.25rem;padding:.5rem 0}.error-icon{color:#c32323;margin-left:.25rem;margin-right:.5rem}.input-error{border-color:#ef4444!important}.modern-input.input-error~.input-icon,.modern-input.input-error~.floating-label{color:#ef4444}.modern-input.input-error:focus~.floating-label{color:#fff}.modern-input.input-error~.highlight-bar{background:#ef4444}.modern-input.input-error~.focus-highlight{border-color:#ef4444}@keyframes shakeError{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}.input-error-shake{animation:.4s shakeError}