/**
 * Mavera Phone Validator – Frontend Styles
 *
 * IMPORTANT: In the WC Blocks (React) checkout, inline styles are applied
 * via JavaScript (src/index.js) because React re-renders wipe CSS-applied
 * padding. This stylesheet handles ONLY:
 *   - Base container sizing
 *   - Validation visual feedback
 *   - Country dropdown styling
 *   - Classic checkout layout
 *
 * @package MaveraPhoneValidator
 */

/* ==========================================================================
   1. BASE – .iti container must be block-level and full width
   ========================================================================== */

.iti {
	display: block !important;
	width: 100% !important;
	position: relative !important;
}

/* Inputs inside .iti – always full width */
.iti input[type="tel"],
.iti input.iti__tel-input {
	width: 100% !important;
	box-sizing: border-box !important;
}

/* ==========================================================================
   2. VALIDATION FEEDBACK
   ========================================================================== */

.mpv-error-msg {
	display: block;
	color: #d63638;
	font-size: 0.82em;
	font-weight: 500;
	margin-top: 6px;
	line-height: 1.4;
	padding-left: 2px;
	letter-spacing: 0.01em;
}

input.mpv-invalid,
input.mpv-invalid:focus,
.iti input.mpv-invalid,
.iti input.mpv-invalid:focus {
	border-color: #d63638 !important;
	box-shadow: 0 0 0 1px rgba(214, 54, 56, 0.3) !important;
}

input.mpv-valid,
input.mpv-valid:focus,
.iti input.mpv-valid,
.iti input.mpv-valid:focus {
	border-color: #00a32a !important;
	box-shadow: 0 0 0 1px rgba(0, 163, 42, 0.2) !important;
}

/* ==========================================================================
   3. COUNTRY DROPDOWN
   ========================================================================== */

.iti__dropdown-content {
	z-index: 9999 !important;
}

.iti--inline-dropdown .iti__dropdown-content {
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
	border: 1px solid #e0e0e0;
	overflow: hidden;
}

.iti__search-input {
	padding: 10px 12px !important;
	font-size: 0.9em;
	border-bottom: 1px solid #eee !important;
}

.iti__country-list {
	max-height: 200px;
}

.iti__country {
	padding: 9px 14px;
	font-size: 0.9em;
	gap: 8px;
}

.iti__country.iti__highlight {
	background-color: #f0f6ff;
}

/* ==========================================================================
   4. WC BLOCKS CHECKOUT – z-index & label safety
   ========================================================================== */

/* Country container must sit above the WC Blocks label (z-index: 1) */
.wc-block-components-text-input .iti .iti__country-container,
.wc-block-components-address-form .iti .iti__country-container {
	z-index: 4 !important;
}

/* Prevent label from overlapping the country selector on click */
.wc-block-components-text-input:has(.iti) > label {
	pointer-events: none;
}

/* ==========================================================================
   5. CLASSIC CHECKOUT
   ========================================================================== */

.woocommerce-checkout .iti,
.woocommerce-address-fields .iti {
	display: block !important;
	width: 100% !important;
}

.woocommerce-checkout .iti input[type="tel"],
.woocommerce-address-fields .iti input[type="tel"],
.woocommerce-checkout .iti input.input-text,
.woocommerce-address-fields .iti input.input-text {
	width: 100% !important;
}

/* ==========================================================================
   6. MY ACCOUNT
   ========================================================================== */

.woocommerce-EditAccountForm .iti,
.woocommerce-address-fields .iti {
	display: block !important;
	width: 100% !important;
}

/* ==========================================================================
   7. MOBILE
   ========================================================================== */

@media (max-width: 768px) {
	.iti--inline-dropdown .iti__dropdown-content {
		width: calc(100vw - 32px) !important;
		max-width: none;
		left: 0 !important;
	}

	.iti .iti__selected-country {
		padding: 0 4px 0 8px !important;
	}

	.iti .iti__selected-dial-code {
		font-size: 0.85em;
	}
}