/**
 * remitalis-phone-input.css
 *
 * Styles for the Remitalis CF7 Phone Input field.
 * Overrides / complements intl-tel-input defaults.
 *
 * @package remitalis-cf7-phoneinput
 */

/* -----------------------------------------------------------------------
   Field wrapper
   ----------------------------------------------------------------------- */

.remitalis-phone-wrap {
	display: inline-block;
	width: 100%;
	position: relative;
}

/* -----------------------------------------------------------------------
   intl-tel-input container
   ----------------------------------------------------------------------- */

.remitalis-iti-wrap {
	position: relative;
	display: block;
	width: 100%;
}

/* Make iti container fill the wrapper */
.remitalis-iti-wrap .iti {
	width: 100%;
	display: block;
}

/* -----------------------------------------------------------------------
   Input field
   ----------------------------------------------------------------------- */

.remitalis-phone-field {
	width: 100%;
	box-sizing: border-box;
	padding-top: 0.55em;
	padding-bottom: 0.55em;
	font-size: 1rem;
	line-height: 1.5;
	border: 1px solid #ccc;
	border-radius: 4px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.remitalis-phone-field:focus {
	outline: none;
	border-color: #4a90d9;
	box-shadow: 0 0 0 2px rgba(74, 144, 217, 0.25);
}

/* -----------------------------------------------------------------------
   Validation state
   ----------------------------------------------------------------------- */

.remitalis-phone-wrap--invalid .remitalis-phone-field,
.remitalis-phone-wrap .wpcf7-not-valid {
	border-color: #cc0000;
	box-shadow: 0 0 0 2px rgba(204, 0, 0, 0.15);
}

/* Error tip – reuse CF7 class so themes already style it */
.remitalis-phone-wrap .wpcf7-not-valid-tip {
	display: block;
	margin-top: 4px;
	font-size: 0.85em;
	color: #cc0000;
}

/* -----------------------------------------------------------------------
   intl-tel-input flag button – accessibility & spacing tweaks
   ----------------------------------------------------------------------- */

.remitalis-iti-wrap .iti__flag-container {
	z-index: 10;
}

.remitalis-iti-wrap .iti__selected-country {
	background: transparent;
	border-right: 1px solid #ddd;
	padding: 0 8px;
}

.remitalis-iti-wrap .iti__selected-country:hover,
.remitalis-iti-wrap .iti__selected-country:focus {
	background-color: rgba(0, 0, 0, 0.05);
}

.remitalis-iti-wrap .iti__country-list {
	max-height: 220px;
	overflow-y: auto;
	border-radius: 0 0 4px 4px; /* only round the bottom; top is under the search bar */
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
	z-index: 1000;
	/* Explicit colours so the theme can't bleed white text onto white bg */
	background-color: #fff;
	color: #222;
	/* Padding at the bottom so the last item isn't clipped by border-radius */
	padding-bottom: 4px;
}

.remitalis-iti-wrap .iti__country-name,
.remitalis-iti-wrap .iti__dial-code {
	color: #222 !important;
}

.remitalis-iti-wrap .iti__selected-dial-code {
	font-family: var(--inputs-font-family, inherit);
    font-size: var(--inputs-font-size, inherit);
    font-weight: var(--inputs-font-weight, inherit);
    letter-spacing: var(--inputs-letter-spacing, inherit);
    text-transform: var(--inputs-text-transform, inherit);
    color: var(--inputs-text-color, inherit);
	margin-top: -1px;
}

.remitalis-iti-wrap .iti__search-input {
	color: #222 !important;
	background-color: #fff;
}

/* Dropdown content wrapper — constrain height and clip overflow */
.remitalis-iti-wrap .iti__dropdown-content {
	overflow: hidden;
	border-radius: 4px;
	max-height: 260px; /* search bar ~40px + list 220px */
}

/* -----------------------------------------------------------------------
   Responsive
   ----------------------------------------------------------------------- */

@media (max-width: 480px) {
	.remitalis-iti-wrap .iti__country-list {
		width: 300px;
	}
}

/* -----------------------------------------------------------------------
   Dark-mode support (prefers-color-scheme)
   ----------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
	.remitalis-phone-field {
		background-color: #1e1e1e;
		color: #f0f0f0;
		border-color: #555;
	}

	.remitalis-iti-wrap .iti__selected-country {
		border-right-color: #555;
	}

	.remitalis-iti-wrap .iti__country-list {
		background-color: #2b2b2b;
		color: #f0f0f0;
		border-color: #555;
	}

	.remitalis-iti-wrap .iti__country-name,
	.remitalis-iti-wrap .iti__dial-code {
		color: #f0f0f0;
	}

	.remitalis-iti-wrap .iti__search-input {
		color: #f0f0f0;
		background-color: #2b2b2b;
	}

	.remitalis-iti-wrap .iti__country-list .iti__country.iti__highlight {
		background-color: #3a3a3a;
	}
}