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