/* ==================================================
	Component: Input
	Floating label, tooltip, password toggle

	Example Usage:
		<div class="custom-input-form-group">
			<div class="custom-input-wrapper">
				<div class="custom-input-icon-left"><i class="fa fa-lock"></i></div>
				<input class="custom-input" type="password" required placeholder=" ">
				<label class="custom-input-label">Password</label>
				<div class="custom-input-icon-right"><i class="fas toggle-password fa-eye-slash"></i></div>

				<div class="custom-input-tooltip-top">Hasło może zawierać litery i cyfry.</div>
			</div>
		</div>
================================================== */
.custom-input-form {width: 360px;}
.custom-input-form-group {position: relative;margin: 10px 0;width: 100%;}
.custom-input-wrapper {position: relative;display: flex;align-items: stretch;background: var(--bg-2);border: 1px solid var(--border-1);border-radius: 10px;height: 60px;transition: border-color 0.2s, background 0.2s;}
.custom-input-wrapper:focus-within {border-color: var(--border-2);}
.custom-input-icon-left {display: flex;align-items: center;justify-content: center;width: 60px;background: var(--bg-3);color: var(--text-3);border-right: 1px solid var(--border-1);font-size: 18px;border-top-left-radius: 10px;border-bottom-left-radius: 10px;}
.custom-input {flex: 1;padding: 22px 14px 0px 14px;background: transparent;border: none;color: var(--text-1);font-size: 16px;outline: none;}
.custom-input-label {position: absolute;left: 70px;top: 50%;transform: translateY(-50%);color: var(--text-3);font-size: 15px;pointer-events: none;transition: all 0.2s ease-out;}
.custom-input:focus + .custom-input-label, .custom-input:not(:placeholder-shown) + .custom-input-label {top: 8px;font-size: 12px;color: var(--text-2);transform: none;}
.custom-input-tooltip-top {position: absolute;left: 31%;bottom: 100%;transform: translateX(-50%) translateY(-6px);background: var(--bg-card-1);color: var(--text-1);border-radius: 6px;padding: 4px 8px;font-size: 12px;opacity: 0;visibility: hidden;transition: opacity 0.2s ease, transform 0.2s ease;max-width: 280px;pointer-events: none;z-index: 10;border: 1px solid var(--border-1);}
.custom-input-tooltip-top::after {content: "";position: absolute;left: 10px;top: 100%;border-width: 6px;border-style: solid;border-color: var(--bg-card-1) transparent transparent transparent;}
.custom-input-wrapper:hover .custom-input-tooltip-top, .custom-input-wrapper:focus-within .custom-input-tooltip-top {opacity: 1;visibility: visible;transform: translateX(-50%) translateY(-12px);pointer-events: auto;}
.custom-input-icon-right {display: flex;align-items: center;justify-content: center;width: 60px;color: var(--text-3);font-size: 18px;border-top-right-radius: 10px;border-bottom-right-radius: 10px;cursor: pointer;transition: 0.2s;}
.custom-input-icon-right:hover {color: var(--text-1);}