/*
 * Поле телефона с кодом страны (Piknikovich\Phone\Field + pk-phone.js) -
 * одно на все формы сайта с 2026-09-11. Вид взят у модалки заявки
 * (эталон components/forms/RequestModal.jsx): рамка поля, слева кнопка
 * страны за разделителем, справа номер без кода.
 *
 * Все правила начинаются с :root. Глобальные правила base.css и зон
 * («.pk-front input[type="tel"]», «.pk-c-field input[type="tel"]»,
 * «.pk-front .pk-claim-modal__field input:focus») весят до (0,3,1) и молча
 * перебивали бы одноклассовые селекторы поля. :root поднимает вес без
 * !important и не зависит от того, какой файл подключится позже.
 */
:root .pk-phone {
	position: relative; display: flex; align-items: stretch;
	width: 100%; min-width: 0; box-sizing: border-box;
	min-height: var(--control-h, 46px);
	background: #fff; border: 1px solid var(--pk-border, #e2e5df); border-radius: var(--pk-radius-md, 12px);
	transition: border-color var(--dur-base, .15s), box-shadow var(--dur-base, .15s);
}
:root .pk-phone:focus-within { border-color: var(--pk-green, #2e7d46); box-shadow: var(--focus-ring, 0 0 0 3px rgba(46, 125, 70, .14)); }
:root .is-error .pk-phone,
:root .pk-phone.is-error { border-color: var(--pk-danger, #d64545); }

/* кнопка страны */
:root .pk-phone button.pk-phone__country {
	display: inline-flex; align-items: center; gap: 6px; flex: none;
	width: auto; height: auto; min-height: 0; margin: 0; padding: 0 10px 0 12px;
	border: 0; border-right: 1px solid var(--pk-border, #e2e5df);
	border-radius: var(--pk-radius-md, 12px) 0 0 var(--pk-radius-md, 12px);
	background: none; box-shadow: none; cursor: pointer;
	font-family: inherit; font-size: var(--fs-body, 14px); font-weight: var(--fw-bold, 700); line-height: 1;
	color: var(--pk-text, #1d2420); white-space: nowrap;
}
:root .pk-phone button.pk-phone__country:hover { background: var(--pk-bg-soft, #f5f6f3); }
:root .pk-phone button.pk-phone__country:focus { outline: none; }
:root .pk-phone button.pk-phone__country:focus-visible { outline: 2px solid var(--pk-green, #2e7d46); outline-offset: -3px; }
:root .pk-phone .pk-phone__chev { flex: none; color: var(--pk-muted, #6b7368); transition: transform var(--dur-mid, .2s); }
:root .pk-phone button.pk-phone__country[aria-expanded="true"] .pk-phone__chev { transform: rotate(180deg); }
:root .pk-phone .pk-phone__iso {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 26px; height: 20px; padding: 0 5px; box-sizing: border-box; border-radius: 4px;
	background: var(--pk-bg-soft, #f5f6f3); border: 1px solid var(--pk-border, #e2e5df); color: var(--pk-muted, #6b7368);
	font-size: 10px; font-weight: var(--fw-bold, 700); letter-spacing: .04em; line-height: 1;
}

/* номер */
:root .pk-phone input.pk-phone__input {
	flex: 1; min-width: 0; width: 100%; height: auto; min-height: 0;
	margin: 0; padding: 0 14px; box-sizing: border-box;
	border: 0; border-radius: 0 var(--pk-radius-md, 12px) var(--pk-radius-md, 12px) 0;
	outline: 0; background: transparent; box-shadow: none;
	font-family: inherit; font-size: var(--fs-body, 14px); font-weight: var(--fw-semibold, 600); line-height: normal;
	color: var(--pk-text, #1d2420); -webkit-appearance: none; appearance: none;
}
:root .pk-phone input.pk-phone__input:focus { border: 0; outline: 0; box-shadow: none; }
:root .pk-phone input.pk-phone__input::placeholder { color: var(--pk-disabled, #a8ada6); font-weight: var(--fw-regular, 400); opacity: 1; }

/* список стран */
:root .pk-phone .pk-phone__pop {
	position: absolute; left: -1px; top: calc(100% + 6px); z-index: 60;
	width: calc(100% + 2px); min-width: 260px; max-width: calc(100vw - 24px); box-sizing: border-box;
	padding: 6px; text-align: left;
	background: #fff; border: 1px solid var(--pk-border, #e2e5df); border-radius: var(--pk-radius-md, 12px);
	box-shadow: var(--e4, 0 16px 40px rgba(20, 30, 20, .16));
}
:root .pk-phone .pk-phone__pop[hidden] { display: none; }
:root .pk-phone .pk-phone__pop.is-up { top: auto; bottom: calc(100% + 6px); }
:root .pk-phone .pk-phone__find { position: relative; margin: 0 0 6px; }
:root .pk-phone .pk-phone__find svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--pk-muted, #6b7368); pointer-events: none; }
:root .pk-phone input.pk-phone__search {
	width: 100%; height: 40px; min-height: 0; margin: 0; padding: 0 12px 0 34px; box-sizing: border-box;
	border: 1px solid var(--pk-border, #e2e5df); border-radius: var(--pk-radius-sm, 8px);
	background: var(--pk-bg-soft, #f5f6f3); box-shadow: none; outline: 0;
	font-family: inherit; font-size: var(--fs-body, 14px); font-weight: var(--fw-regular, 400); color: var(--pk-text, #1d2420);
	-webkit-appearance: none; appearance: none;
}
:root .pk-phone input.pk-phone__search:focus { border-color: var(--pk-green, #2e7d46); background: #fff; box-shadow: none; }
:root .pk-phone ul.pk-phone__list {
	position: relative; list-style: none; margin: 0; padding: 0;
	max-height: 264px; overflow-y: auto; overscroll-behavior: contain;
}
:root .pk-phone li.pk-phone__group {
	margin: 0; padding: 8px 10px 4px; list-style: none;
	font-size: var(--fs-meta, 11px); font-weight: var(--fw-semibold, 600); text-transform: uppercase;
	letter-spacing: var(--ls-caps, .06em); color: var(--pk-muted, #6b7368);
}
:root .pk-phone li.pk-phone__opt {
	display: flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box;
	margin: 0; padding: 8px 10px; list-style: none; border-radius: var(--pk-radius-sm, 8px); cursor: pointer;
	font-size: var(--fs-body, 14px); font-weight: var(--fw-medium, 500); line-height: 1.3; color: var(--pk-text, #1d2420);
}
:root .pk-phone li.pk-phone__opt[hidden],
:root .pk-phone li.pk-phone__group[hidden] { display: none; }
:root .pk-phone li.pk-phone__opt:hover,
:root .pk-phone li.pk-phone__opt.is-active { background: var(--pk-bg-soft, #f5f6f3); }
:root .pk-phone li.pk-phone__opt[aria-selected="true"] { background: var(--pk-green-soft, #e8f3ea); color: var(--pk-green-dark, #1f5a33); font-weight: var(--fw-bold, 700); }
:root .pk-phone li.pk-phone__opt[aria-selected="true"] .pk-phone__iso { background: var(--pk-green-dark, #1f5a33); border-color: var(--pk-green-dark, #1f5a33); color: #fff; }
:root .pk-phone .pk-phone__opt-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root .pk-phone .pk-phone__opt-dial { flex: none; color: var(--pk-muted, #6b7368); font-variant-numeric: tabular-nums; }
:root .pk-phone .pk-phone__status { margin: 0; padding: 12px 10px; font-size: var(--fs-ui-sm, 13px); line-height: 1.45; color: var(--pk-muted, #6b7368); }
:root .pk-phone .pk-phone__status[hidden] { display: none; }

@media (pointer: coarse) {
	:root .pk-phone li.pk-phone__opt { min-height: 44px; }
	:root .pk-phone input.pk-phone__search { height: 44px; }
}