/* ------------------------------------------------------------------
 * intl-tel-input — visual overrides
 *
 * The library wraps each phone input in a .iti container with a
 * country-flag dropdown trigger glued to the left. These rules make
 * the wrapper play nice with our checkout / My Account input styling
 * (rounded inputs, accent focus ring, full-width).
 * ------------------------------------------------------------------ */

/* The wrapper takes the full width of the form-row. */
.iti {
	display: block;
	width: 100%;
}

/* The flag-dropdown button: rounded left edge, transparent bg so it
 * inherits the input's background color, vertical separator on the
 * right matching our line color. */
.iti--separate-dial-code .iti__selected-flag {
	background-color: transparent;
	border-radius: 12px 0 0 12px;
	padding: 0 8px 0 12px;
}
.iti--separate-dial-code .iti__selected-flag::after {
	content: "";
	position: absolute;
	right: 0;
	top: 8px;
	bottom: 8px;
	width: 1px;
	background: rgba(15, 15, 30, .14);
}
.iti__selected-dial-code {
	color: var(--ppk-ink, #1a1a24);
	font-weight: 500;
	margin-left: 6px;
}

/* Input gets extra left padding so its text doesn't hide under the
 * flag dropdown. Library handles this for the "withCountryCode" class
 * but separate-dial-code mode also benefits from the rule. */
.iti--separate-dial-code .iti__tel-input {
	padding-left: 90px !important;
}

/* Country list dropdown panel — soft rounded with our shadow.
 * `overflow-y: auto` is critical: the library defaults to a scrollable
 * panel via `overflow-y: scroll`, and an earlier `overflow: hidden`
 * here was killing it. We keep the rounded corners; the scrollbar
 * sits inside them, which modern browsers render fine. */
.iti__country-list {
	border-radius: 12px;
	border: 1px solid rgba(15, 15, 30, .14);
	overflow-y: auto;
	overflow-x: hidden;
	box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .25);
	margin-top: 4px;
	max-height: 280px;
	-webkit-overflow-scrolling: touch;
}
.iti__country.iti__highlight {
	background-color: rgba(210, 58, 58, .08);
}
.iti__divider {
	border-bottom-color: rgba(15, 15, 30, .08);
}

/* Search box (when search is enabled) */
.iti__search-input {
	border: 0;
	border-bottom: 1px solid rgba(15, 15, 30, .12);
	padding: 10px 14px !important;
	border-radius: 0 !important;
	min-height: auto !important;
}

/* When the input is invalid (set by our init script on blur), surface
 * the same accent-red ring as native field validation. */
.iti-invalid,
.iti input.iti-invalid {
	border-color: var(--ppk-accent, #d23a3a) !important;
	box-shadow: 0 0 0 4px rgba(210, 58, 58, .12) !important;
}

/* The library inserts a hidden <span> for accessibility; make sure it
 * doesn't reserve layout space in our flex form-rows. */
.iti__a11y-text {
	position: absolute;
	left: -9999px;
}

/* In WC's form-row-first/last paired layout, the .iti wrapper would
 * otherwise stretch full-width inside a half-width parent — that's
 * fine because parent already constrains width. Just defensive: */
.form-row .iti {
	max-width: 100%;
}

button.iti__selected-country {
    border-radius: unset !important;
    background-image: none !important;
    border: none;
    border-right: 1.5px solid rgb(15 15 30 / 6%);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}