.kham-phone-auth {
	margin: 0 0 28px;
	padding: 22px;
	border: 1px solid #dce2e6;
	border-radius: 8px;
	background: #fff;
}

.kham-phone-auth__header {
	margin-bottom: 16px;
}

.kham-phone-auth__header h2,
.kham-phone-auth__form h3 {
	margin: 0 0 8px;
	color: #111417;
}

.kham-phone-auth__header p,
.kham-phone-auth__hint {
	margin: 0;
	color: #5f6870;
}

.kham-phone-auth__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.kham-phone-auth__grid--single {
	grid-template-columns: minmax(0, 1fr);
	max-width: 760px;
	margin-inline: auto;
}

.kham-phone-auth__form {
	display: grid;
	gap: 10px;
	align-content: start;
}

.kham-phone-auth__form--single {
	gap: 12px;
}

.kham-phone-auth label[for="kham_phone_verify"] {
	display: none;
}

.kham-phone-auth__form input {
	width: 100%;
	min-height: 42px;
	padding: 8px 12px;
	border: 1px solid #c7d0d7;
	border-radius: 7px;
	background: #fbfcfd;
}

.kham-phone-auth__form input[type="tel"],
.kham-phone-auth__form input[inputmode="numeric"] {
	direction: ltr;
	text-align: left;
	unicode-bidi: plaintext;
	font-family: Arial, Helvetica, sans-serif;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0;
}

.kham-phone-auth #kham_otp_code {
	width: min(180px, 100%);
	justify-self: start;
	text-align: center;
}

.kham-phone-auth__button {
	min-height: 42px;
	border-radius: 7px;
}

.kham-phone-auth--request-mode .kham-phone-auth__form--verify .kham-phone-auth__button,
.kham-phone-auth--verify-mode .kham-phone-auth__form--request .kham-phone-auth__button {
	display: none;
}

.kham-phone-auth__actions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.kham-phone-auth__button--primary {
	border-color: #c94f24;
	background: #c94f24;
	color: #fff;
}

.kham-phone-auth__notice {
	margin: 0 0 14px;
	padding: 10px 12px;
	border-radius: 7px;
	border: 1px solid #dce2e6;
	background: #f8fafb;
}

.kham-phone-auth__notice--success {
	border-color: #badbcc;
	background: #f0fff7;
	color: #0f5132;
}

.kham-phone-auth__notice--warning,
.kham-phone-auth__notice--error {
	border-color: #f0d4c5;
	background: #fff7f2;
	color: #8e3c1c;
}

@media (max-width: 720px) {
	.kham-phone-auth {
		margin-bottom: 18px;
		padding: 14px;
	}

	.kham-phone-auth__header {
		margin-bottom: 10px;
	}

	.kham-phone-auth__header h2 {
		font-size: 20px;
		line-height: 1.35;
	}

	.kham-phone-auth__header p,
	.kham-phone-auth__hint {
		font-size: 14px;
		line-height: 1.5;
	}

	.kham-phone-auth__grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.kham-phone-auth__actions {
		grid-template-columns: 1fr;
	}

	.kham-phone-auth__form input,
	.kham-phone-auth__button {
		min-height: 40px;
	}
}