/* SAROMM — country-code selector.
 * The picker and the number share one outline, as drawn: picker left, number right,
 * a single 1px divider between them. The picker is a <button>, and the theme paints
 * every button's hover and focus state, so each state is pinned here. */
.saromm-phone {
	position: relative;
	display: flex;
	align-items: stretch;
	gap: 0;
	width: 100%;
}

.elementor-form .saromm-phone button.saromm-phone__picker,
.elementor-form .saromm-phone button.saromm-phone__picker:hover,
.elementor-form .saromm-phone button.saromm-phone__picker:focus,
.elementor-form .saromm-phone button.saromm-phone__picker:active {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex: 0 0 auto;
	min-width: 91px;
	margin: 0;
	padding: 0 16px;
	background: #fff;
	border: 1px solid var( --e-global-color-border, #d9d9d9 );
	border-radius: 4px 0 0 4px;
	box-shadow: none;
	outline: none;
	cursor: pointer;
	transition: none;
	font-family: inherit;
	font-size: 16px;
	font-weight: 300;
	line-height: 20px;
	letter-spacing: 0;
	text-transform: none;
	color: var( --e-global-color-text, #01223a );
}

.elementor-form .saromm-phone button.saromm-phone__picker:focus-visible {
	outline: 2px solid var( --e-global-color-accent, #e85619 );
	outline-offset: 2px;
}

.saromm-phone__chevron {
	display: block;
	width: 12px;
	height: 12px;
	flex: 0 0 12px;
	color: var( --e-global-color-text, #01223a );
}

.elementor-form .saromm-phone .saromm-phone__input {
	flex: 1 1 auto;
	min-width: 0;
	margin-left: -1px;
	border-radius: 0 4px 4px 0;
}

.saromm-phone__list {
	position: absolute;
	z-index: 20;
	top: calc( 100% + 4px );
	left: 0;
	margin: 0;
	padding: 4px 0;
	list-style: none;
	min-width: 240px;
	max-height: 260px;
	overflow-y: auto;
	background: #fff;
	border: 1px solid var( --e-global-color-border, #d9d9d9 );
	border-radius: 4px;
	box-shadow: 0 8px 24px rgba( 1, 34, 58, 0.12 );
}

.saromm-phone__option {
	padding: 10px 16px;
	cursor: pointer;
	font-size: 16px;
	line-height: 20px;
	color: var( --e-global-color-text, #01223a );
	white-space: nowrap;
}

.saromm-phone__option:hover,
.saromm-phone__option:focus,
.saromm-phone__option[aria-selected="true"] {
	background: var( --e-global-color-surfalt, #f7f7f7 );
}

/* ---- Form validation, as drawn ----
 * Required mark: an orange asterisk before the label, not a red one after it.
 * Error: the field outline turns orange, "This field is required" sits under it. */
.saromm-validate.elementor-form .elementor-mark-required .elementor-field-label::after { content: none; }
.saromm-validate.elementor-form .elementor-mark-required .elementor-field-label::before {
	content: "*";
	margin-right: 6px;
	color: var( --e-global-color-accent, #e85619 );
}

.saromm-validate .saromm-invalid,
.saromm-validate .saromm-phone.saromm-invalid .saromm-phone__picker,
.saromm-validate .saromm-phone.saromm-invalid .saromm-phone__input {
	border-color: var( --e-global-color-accent, #e85619 ) !important;
}

.saromm-validate .saromm-error,
.saromm-validate .elementor-field-group .elementor-message.elementor-message-danger {
	display: block;
	width: 100%;
	margin-top: 4px;
	font-size: 12px;
	line-height: 18px;
	font-weight: 300;
	color: var( --e-global-color-accent, #e85619 );
}
.saromm-validate .elementor-field-group .elementor-message.elementor-message-danger::before { content: none; }