<div class="kb-card kb-auth-card">
	<div class="description">Введіть номер телефону для перевірки статусу замовлення</div>

	<div class="kb-input-form">
		<label for="kb-phone" class="kb-input-label">Номер телефону</label>
		<div class="kb-input-container">
			<div class="prefix">
				<svg class="kb-icon" width="16" height="16">
					<use href="#kb-ua-flag"></use>
				</svg>
				<span>+380</span>
				<div class="sep"></div>
			</div>
			<input type="phone" id="kb-phone" maxlength="9" placeholder="000000000" class="kb-input">
		</div>
	</div>

	<button class="kb-btn large disabled kb-auth-btn">Відправити</button>
</div>

<script>
	const kbAuthBtn = document.querySelector(".kb-auth-btn");
	document.querySelector("#kb-phone").addEventListener("input", e => {
		e.currentTarget.value = e.currentTarget.value.replace(/\D/g, '');
		let val = e.currentTarget.value;

		if(val.length < 9) {
			kbAuthBtn.classList.add("disabled");
		} else {
			kbAuthBtn.classList.remove("disabled");
		}
	}); 
</script>