/**
 * 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.
 *
 * intl-tel-input positions the flag container itself, writing an inline `left:0`
 * or `right:0` depending on `showSelectedCountryOnLeft` (which is
 * `allowDropdown || separateDialCode` for LTR). We must NOT also force a side
 * here: forcing `left:0` while the library has set `right:0` (dropdown off AND
 * dial code off) pins the container to both edges, stretching it to the full
 * field width. That inflates the selected-country width the library measures,
 * so it writes a runaway input padding — overflowing the address column onto the
 * order summary and covering the input so it cannot be focused. Leave the
 * positioning to the library.
 */

#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%;
}

/*
 * When the dropdown and dial code are both disabled, intl-tel-input places the
 * flag on the right and pads the right of the input for it. Our left padding
 * (below) then only adds an empty gap, so drop it in that case. Keyed off the
 * inline `right` the library writes on the container when the flag is on the
 * right (it writes `left` instead when the flag is on the left). The selector
 * mirrors the left-padding rule below so it wins on specificity, not order.
 */
.wc-block-components-form .wc-block-components-text-input.wc-block-components-address-form__phone:has(.iti__country-container[style*="right"]) input[type="tel"].iti__tel-input {
	padding-left: 6px;
}

/*
 * Nudge the right-positioned flag slightly in from the field edge and up from
 * the bottom. `right` needs !important to beat the library's inline `right: 0`.
 */
.wc-block-components-address-form__phone .iti__country-container[style*="right"] {
	right: 2px !important;
	bottom: 5px;
}

/*
 * 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;
}

/* Inline field validation
 *
 * Shown directly under the phone input as soon as the shopper leaves it, so a
 * bad number is reported on the step it was typed on rather than waiting for
 * the notice WooCommerce prints after the order is submitted.
 */

.pnv-field-error {
	display: block;
	margin-top: 0.35em;
	font-size: 0.875em;
	line-height: 1.4;
	color: #b3423a;
}

/* Match WooCommerce's own invalid-field treatment on the phone input. */
.form-row.woocommerce-invalid .iti input.iti__tel-input {
	border-color: #b3423a;
}

/* 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;
}