/**
 * Phone Number Validation - Frontend Styles
 *
 * Styles for intl-tel-input v25 integration with WooCommerce checkout.
 *
 * @package Phone_Number_Validation
 * @since   1.8.0
 */

/* Base intl-tel-input Overrides */

.iti {
	width: 100%;
	display: block;
}

.iti input.iti__tel-input,
.iti input.iti__tel-input[type="tel"],
.iti input.iti__tel-input[type="text"] {
	width: 100%;
	padding-left: 52px;
}

/* When showing separate dial code, increase left padding */
.iti--separate-dial-code input.iti__tel-input,
.iti--separate-dial-code input.iti__tel-input[type="tel"],
.iti--separate-dial-code input.iti__tel-input[type="text"] {
	padding-left: 90px;
}

/* Country container positioning */
.iti__country-container {
	left: 0;
}

#billing_phone_field .iti__selected-country {
	font-size: initial;
	border: none;
	color: inherit;
	padding-left: 0;
	padding-right: 0;
	display: flex;
}

.iti__selected-country:hover {
	background-color: transparent;
	color: initial;
}

/* Classic Checkout (Shortcode) Styles */

.pnv-intl {
	overflow: visible !important;
}

.pnv-intl .iti {
	width: 100% !important;
}

/* WooCommerce Block Checkout Styles */

/* Container adjustments for block checkout */
.wc-block-components-text-input .iti {
	width: 100%;
}

/*
 * Label positioning and visibility
 *
 * The WooCommerce Blocks text input component floats the label only when the field is
 * "active" (focused or has a value). We MUST NOT force the floating styles at all times,
 * otherwise the phone label sits much higher than other fields (e.g. postcode).
 *
 * Use --pnv-iti-label-inline-start (set by JS from input padding) so the label clears the
 * flag/dial-code for both guest (empty) and logged-in (filled) checkouts.
 * Ensure the label is visible (Woo may hide it when it expects "input + label" order and we have ".iti + label").
 */
.wc-block-components-form .wc-block-components-text-input.wc-block-components-address-form__phone label {
	inline-size: none;
	visibility: visible;
	opacity: 1;
    font-size: 13px;
	transform: none;
}

/* Note: separate-dial-code width is handled by JS syncing the variable above. */

/* Input field styling */
.wc-block-components-form .wc-block-components-text-input.wc-block-components-address-form__phone input[type="tel"].iti__tel-input {
	padding-left: 52px;
}

.wc-block-components-form .wc-block-components-text-input.wc-block-components-address-form__phone .iti--separate-dial-code input[type="tel"].iti__tel-input {
	padding-left: 90px;
}

/* Selected country button styling for block checkout */
.wc-block-components-text-input .iti .iti__selected-country {
	height: 100%;
	padding-top: 1.1em;
	font-size: initial;
	border: none;
	color: initial;
	display: flex;
	padding-left: inherit;
	background-color: transparent !important;
	color: initial !important;
}

.wc-block-components-text-input .iti .iti__selected-country:hover,

.iti--allow-dropdown .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])) .iti__selected-country-primary:hover {
	background-color: transparent !important;
	color: inherit;
}

.wc-block-components-text-input .iti .iti__selected-country-primary {
	height: 100%;
	padding-left: 0.75em;
	padding-right: 6px;
	
}

/* Dial code text styling */
.wc-block-components-text-input .iti .iti__selected-dial-code {
	font-size: inherit;
	line-height: inherit;
}

/* Transparent background for separate dial code mode */
.wc-block-components-form .wc-block-components-text-input.wc-block-components-address-form__phone .iti--separate-dial-code .iti__selected-country-primary {
	background: transparent;
}

/* Phone Validation Error Styles */

.wc-block-components-text-input .phone-validation-error {
	color: #cc1818;
	font-size: 0.875em;
	max-width: 100%;
	white-space: normal;
	margin-top: 12px;
	display: flex;
	align-items: flex-start;
	gap: 4px;
}

.wc-block-components-text-input .phone-validation-error > span {
	padding-top: 12px;
}

.wc-block-components-text-input .phone-validation-error > svg.error-icon {
	fill: currentColor;
	height: 1.25em;
	width: 1.25em;
	flex-shrink: 0;
	margin-top: 1px;
}

/* Classic checkout error styling */
.pnv-intl .phone-validation-error {
	color: #cc1818;
	font-size: 0.875em;
	margin-top: 12px;
}

/* Dropdown Styling */

/* Ensure dropdown appears above other elements */
.iti__dropdown-content {
	z-index: 100;
}

.iti--container {
	z-index: 1060;
}

/* Search input in dropdown */
.iti__search-input {
	padding: 8px 10px;
	border: none;
	border-bottom: 1px solid var(--iti-border-color, #ccc);
	font-size: inherit;
}

.iti__search-input:focus {
	outline: none;
	border-bottom-color: #2271b1;
}

/* My Account Page Styles */

.woocommerce-MyAccount-content .iti {
	width: 100%;
}

.woocommerce-MyAccount-content .iti input.iti__tel-input {
	width: 100%;
}

/* Admin Styles (for order editing) */

.postbox .iti {
	width: 100%;
}

.postbox .iti input.iti__tel-input {
	width: 100%;
}

/* RTL Support */

[dir="rtl"] .iti__country-container {
	left: auto;
	right: 0;
}

[dir="rtl"] .iti input.iti__tel-input,
[dir="rtl"] .iti input.iti__tel-input[type="tel"],
[dir="rtl"] .iti input.iti__tel-input[type="text"] {
	padding-left: 6px;
	padding-right: 52px;
}

[dir="rtl"] .iti--separate-dial-code input.iti__tel-input,
[dir="rtl"] .iti--separate-dial-code input.iti__tel-input[type="tel"],
[dir="rtl"] .iti--separate-dial-code input.iti__tel-input[type="text"] {
	padding-right: 90px;
}

[dir="rtl"] .wc-block-components-form .wc-block-components-text-input.wc-block-components-address-form__phone label {
	left: auto;
	right: var(--pnv-iti-label-inline-start, 52px);
	inset-inline-start: auto;
	transform-origin: right top;
}

/* Accessibility */

.iti__selected-country:focus {
	outline: none;
	outline-offset: -2px;
}

.iti__selected-country:focus:not(:focus-visible) {
	outline: none;
}

.iti__selected-country:focus-visible {
	outline: none;
	outline-offset: -2px;
}

/* Theme fixes
-- Hello Elementor */ 
.theme-hello-elementor .wc-block-components-text-input .iti .iti__selected-country {
	padding-top: 1.5em;
}

.theme-hello-elementor #billing_phone_field .iti__selected-country .iti__tel-input {
	padding-left: 88px;
}

/* -- Storefront */
.theme-storefront .wc-block-components-text-input .iti .iti__selected-country {
	padding-top: 1em;
}

/* -- Astra */
.theme-astra .wc-block-components-form .wc-block-components-text-input.wc-block-components-address-form__phone label {
	top: 4px;
}

/* Twenty Twenty One */
.theme-hello-elementor .wc-block-components-form .wc-block-components-text-input.wc-block-components-address-form__phone label,
.theme-storefront .wc-block-components-form .wc-block-components-text-input.wc-block-components-address-form__phone label,
.theme-twentytwentyone .wc-block-components-form .wc-block-components-text-input.wc-block-components-address-form__phone label {
	top: 4px;
}