/**
 * Shared OCTOPS phone country-code control.
 */

.octops-phone-control {
	display: grid;
	grid-template-columns: minmax(112px, auto) minmax(0, 1fr);
	min-width: 0;
	height: 64px;
	border: 1px solid var(--octops-phone-border, var(--octops-border, #e4e4e7));
	border-radius: 8px;
	background: var(--octops-phone-background, var(--octops-panel, #fff));
	font: inherit;
	transition: border-color 180ms ease, box-shadow 180ms ease;
}

.octops-phone-control:focus-within {
	border-color: var(--octops-phone-focus, var(--octops-primary, #3371f4));
	box-shadow: var(
		--octops-phone-focus-shadow,
		0 0 0 3px color-mix(in srgb, var(--octops-primary, #3371f4) 18%, transparent)
	);
}

.octops-contact-field.is-invalid .octops-phone-control,
.octops-partner-reseller-form__field.is-invalid .octops-phone-control,
.octops-article-download-field.is-invalid .octops-phone-control {
	border-color: var(--octops-phone-error, #dc2626);
	box-shadow: var(--octops-phone-error-shadow, 0 0 0 1px #dc2626);
}

.octops-phone-control__country {
	position: relative;
	min-width: 0;
	border-right: 1px solid var(--octops-phone-border, var(--octops-border, #e4e4e7));
}

.octops-phone-country-native,
.octops-phone-country-trigger,
.octops-phone-control__input {
	width: 100%;
	height: 100%;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--octops-text, #27272a);
	font: inherit;
}

.octops-phone-country-native {
	max-width: 150px;
	padding: 0 10px;
}

.octops-phone-country-trigger {
	display: none;
	grid-template-columns: 24px auto 12px;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 0 11px;
	cursor: pointer;
}

.octops-phone-country-trigger [data-octops-phone-flag] {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
}

.octops-phone-country-trigger [data-octops-phone-flag][hidden] {
	display: none;
}

.octops-phone-country-flag {
	display: block;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	background-image: url("../images/phone-flags/twemoji-country-flags-17.0.3.png");
	background-repeat: no-repeat;
	background-position: var(--octops-phone-flag-x, 0) var(--octops-phone-flag-y, 0);
	background-size: 320px 320px;
	overflow: visible;
	filter: drop-shadow(0 0 0.45px rgba(24, 24, 27, 0.55));
}

.octops-phone-country-option__flag {
	justify-self: center;
}

.octops-phone-control.is-enhanced .octops-phone-country-native {
	display: none;
}

.octops-phone-control.is-enhanced .octops-phone-country-trigger {
	display: grid;
}

.octops-phone-country-trigger__chevron {
	width: 7px;
	height: 7px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 180ms ease;
}

.octops-phone-control.is-open .octops-phone-country-trigger__chevron {
	transform: translateY(2px) rotate(225deg);
}

.octops-phone-control__input {
	min-width: 0;
	padding: 0 var(--octops-phone-input-padding, 12px);
	outline: none;
}

.octops-phone-control__input::placeholder {
	color: var(--octops-phone-placeholder, var(--octops-text-soft, #a1a1aa));
	opacity: 1;
}

.octops-phone-country-listbox {
	position: fixed;
	z-index: 100000;
	box-sizing: border-box;
	width: min(360px, calc(100vw - 32px));
	max-height: 320px;
	padding: 6px;
	overflow-y: auto;
	overscroll-behavior: contain;
	border: 1px solid var(--octops-phone-border, var(--octops-border, #e4e4e7));
	border-radius: 10px;
	background: var(--octops-phone-menu-background, var(--octops-panel, #fff));
	box-shadow: 0 18px 50px rgba(9, 23, 49, 0.18);
}

.octops-phone-country-listbox[hidden] {
	display: none;
}

.octops-phone-country-option {
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr) auto;
	align-items: center;
	gap: 9px;
	width: 100%;
	min-height: 40px;
	padding: 7px 10px;
	border: 0;
	border-radius: 7px;
	background: transparent;
	color: var(--octops-text, #27272a);
	font: inherit;
	font-size: 14px;
	line-height: 20px;
	text-align: left;
	cursor: pointer;
}

.octops-phone-country-option > span:nth-child(2) {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.octops-phone-country-option__code {
	color: var(--octops-text-muted, #52525b);
}

.octops-phone-country-option:is(:hover, :focus-visible, .is-active),
.octops-phone-country-option[aria-selected="true"] {
	outline: none;
	background: var(
		--octops-phone-option-active-background,
		color-mix(in srgb, var(--octops-primary, #3371f4) 12%, transparent)
	);
	color: var(--octops-phone-option-active-color, inherit);
}

[data-theme="dark"] .octops-phone-country-listbox {
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.38);
}

.octops-contact-field .octops-phone-control,
.octops-partner-reseller-form__field .octops-phone-control {
	--octops-phone-background: #ffffff;
	--octops-phone-border: #e4e4e7;
	--octops-phone-error-shadow: none;
	--octops-phone-focus: #3371f4;
	--octops-phone-focus-shadow: 0 0 0 1px rgba(51, 113, 244, 0.14);
	--octops-phone-input-padding: 20px;
	--octops-phone-menu-background: #ffffff;
	--octops-phone-option-active-background: #eff6ff;
	--octops-phone-option-active-color: #173da6;
	--octops-phone-placeholder: #a1a1aa;
	font-family: var(--octops-font-body);
	font-size: 18px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 28px;
}

.octops-contact-field .octops-phone-control {
	--octops-phone-error: #ef4444;
}

.octops-partner-reseller-form__field .octops-phone-control {
	--octops-phone-error: #991919;
}

.octops-contact-field .octops-phone-control:hover,
.octops-partner-reseller-form__field .octops-phone-control:hover {
	border-color: #a1a1aa;
}

.octops-contact-field .octops-phone-control:focus-within,
.octops-partner-reseller-form__field .octops-phone-control:focus-within {
	border-color: var(--octops-phone-focus);
}

.octops-contact-field .octops-phone-country-listbox,
.octops-partner-reseller-form__field .octops-phone-country-listbox {
	border-radius: 4px;
	box-shadow:
		0 0 1px rgba(24, 24, 27, 0.3),
		0 8px 16px rgba(24, 24, 27, 0.1);
	padding: 4px;
}

.octops-contact-field .octops-phone-country-option,
.octops-partner-reseller-form__field .octops-phone-country-option {
	min-height: 32px;
	padding: 6px 8px;
	border-radius: 2px;
	font-size: 14px;
	line-height: 20px;
}

.octops-contact-field.is-invalid .octops-phone-control:focus-within {
	border-color: var(--octops-phone-error);
	box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
}

.octops-partner-reseller-form__field.is-invalid .octops-phone-control:focus-within {
	border-color: var(--octops-phone-error);
	box-shadow: 0 0 0 2px rgba(153, 25, 25, 0.2);
}

.octops-contact-field.is-invalid .octops-phone-control:hover,
.octops-partner-reseller-form__field.is-invalid .octops-phone-control:hover {
	border-color: var(--octops-phone-error);
}

html[data-theme="dark"] .octops-contact-field .octops-phone-control,
html[data-theme="dark"] .octops-partner-reseller-form__field .octops-phone-control {
	--octops-phone-background: #0a111c;
	--octops-phone-border: #27272a;
	--octops-phone-error: #fca5a5;
	--octops-phone-focus: #76a0f8;
	--octops-phone-focus-shadow: 0 0 0 1px rgba(118, 160, 248, 0.18);
	--octops-phone-menu-background: #0a111c;
	--octops-phone-option-active-background: rgba(46, 103, 222, 0.22);
	--octops-phone-option-active-color: #a3cfff;
	--octops-phone-placeholder: #71717a;
}

html[data-theme="dark"] .octops-contact-field .octops-phone-control:hover,
html[data-theme="dark"] .octops-partner-reseller-form__field .octops-phone-control:hover {
	border-color: #52525b;
}

html[data-theme="dark"] .octops-contact-field .octops-phone-control:focus-within,
html[data-theme="dark"] .octops-partner-reseller-form__field .octops-phone-control:focus-within {
	border-color: var(--octops-phone-focus);
}

html[data-theme="dark"] .octops-contact-field .octops-phone-country-listbox,
html[data-theme="dark"] .octops-partner-reseller-form__field .octops-phone-country-listbox {
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.36);
}

html[data-theme="dark"] .octops-contact-field.is-invalid .octops-phone-control:focus-within,
html[data-theme="dark"] .octops-partner-reseller-form__field.is-invalid .octops-phone-control:focus-within {
	border-color: var(--octops-phone-error);
	box-shadow: 0 0 0 2px rgba(252, 165, 165, 0.2);
}

html[data-theme="dark"] .octops-contact-field.is-invalid .octops-phone-control:hover,
html[data-theme="dark"] .octops-partner-reseller-form__field.is-invalid .octops-phone-control:hover {
	border-color: var(--octops-phone-error);
}

@media (max-width: 480px) {
	.octops-phone-control {
		grid-template-columns: 112px minmax(0, 1fr);
	}
}

@media (forced-colors: active) {
	.octops-phone-country-flag {
		forced-color-adjust: none;
		filter: none;
	}

	.octops-phone-control:focus-within,
	.octops-phone-country-option:is(:hover, :focus-visible, .is-active),
	.octops-phone-country-option[aria-selected="true"] {
		outline: 2px solid Highlight;
	}
}

@media (prefers-reduced-motion: reduce) {
	.octops-phone-control,
	.octops-phone-country-trigger__chevron {
		transition: none;
	}
}