/**
 * Phone Input Styles
 * 
 * Дополнительные стили для интеграции intl-tel-input с формами сайта.
 */

/* Обертка для поля телефона */
.contact-form__phone-wrapper {
	position: relative;
	display: flex;
	width: 100%;
}

.contact-form__phone-wrapper.phone-input-initialized {
	/* Стили для инициализированного поля */
}

/* Стилизация intl-tel-input */
.iti {
	width: 100%;
	display: flex;
}

.iti__flag-container {
	position: relative;
	flex-shrink: 0;
}

.iti__selected-flag {
	padding: 0 8px 0 12px;
	background-color: var(--gray-1, #ffffff);
	border: 0.0625rem solid var(--primary-7, #e0e0e0);
	border-right: none;
	border-radius: 0.5rem 0 0 0.5rem;
	transition: border-color 0.3s ease;
	height: 100%;
	display: flex;
	align-items: center;
}

.contact-form__input:focus + .iti__flag-container .iti__selected-flag,
.contact-form__phone-wrapper:focus-within .iti__selected-flag {
	border-color: var(--primary-4, #007bff);
}

.iti__selected-flag:hover {
	background-color: var(--primary-1, #f8f9fa);
}

.iti__arrow {
	border-top: 4px solid var(--primary-8, #666666);
	margin-left: 6px;
}

.iti__arrow--up {
	border-bottom: 4px solid var(--primary-8, #666666);
	border-top: none;
}

/* Выпадающий список стран */
.iti__country-list {
	background-color: var(--gray-1, #ffffff);
	border: 0.0625rem solid var(--primary-7, #e0e0e0);
	border-radius: 0.5rem;
	box-shadow: 0 0.625rem 0.9375rem -0.1875rem rgba(0, 0, 0, 0.1),
				0 0.25rem 0.375rem -0.125rem rgba(0, 0, 0, 0.05);
	max-height: 17.5rem;
	overflow-y: auto;
	z-index: 100;
}

.iti__country {
	padding: 0.75rem 1rem;
	color: var(--primary-16, #000000);
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.iti__country:hover,
.iti__country.iti__highlight {
	background-color: var(--primary-1, #f8f9fa);
}

.iti__country.iti__preferred {
	background-color: var(--primary-2, #e7f3ff);
}

/* Убеждаемся, что border слева у флага виден */
.contact-form__phone-wrapper .iti__country-container {
	border-left: 0.0625rem solid var(--primary-7, #e0e0e0) !important;
	border-top: 0.0625rem solid var(--primary-7, #e0e0e0) !important;
	border-bottom: 0.0625rem solid var(--primary-7, #e0e0e0) !important;
	border-right: none !important;
	border-radius: 0.5rem 0 0 0.5rem;
	padding: 0 !important;
}

.contact-form__phone-wrapper .iti__selected-flag {
	border: none !important;
	border-radius: 0;
}

/* Поле ввода с кодом страны */
.contact-form__phone-wrapper .contact-form__input {
	padding-left: 0.5rem;
	border-left: 0.0625rem solid var(--primary-7, #e0e0e0);
	border-top: 0.0625rem solid var(--primary-7, #e0e0e0);
	border-bottom: 0.0625rem solid var(--primary-7, #e0e0e0);
	border-right: 0.0625rem solid var(--primary-7, #e0e0e0);
	border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
	flex: 1;
}

.contact-form__phone-wrapper:focus-within .iti__country-container {
	border-color: var(--primary-4, #007bff) !important;
}

.contact-form__phone-wrapper:focus-within .contact-form__input {
	border-color: var(--primary-4, #007bff);
}

/* Сообщения об ошибках */
.iti__error-msg {
	display: none;
}

.contact-form__field.error .iti__error-msg {
	display: block;
	color: var(--error-4, #ef4444);
	font-size: 0.75rem;
	margin-top: 0.25rem;
}

/* Адаптивность */
@media (max-width: 47.99875rem) {
	.iti__selected-flag {
		padding: 0 6px 0 8px;
	}
	
	.iti__country-list {
		max-height: 12.5rem;
	}
}