/* Ensure the intlTelInput wrapper matches WooCommerce field styling */
.iti {
    display: block !important;
    width: 100% !important;
}

/* Style the phone input to match WooCommerce checkout fields */
.iti__tel-input,
#billing_phone {
    width: 100% !important;
    padding: 10px 12px !important;
    padding-left: 52px !important; /* Space for the flag */
    height: auto !important;
    line-height: 1.5 !important;
    font-size: 16px !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    background-color: #fff !important;
    color: #333 !important;
    box-sizing: border-box !important;
    transition: border-color 0.3s ease !important;
    direction: ltr !important;
    text-align: left !important;
}

/* Focus state to match WooCommerce */
.iti__tel-input:focus,
#billing_phone:focus {
    border-color: #96588a !important;
    outline: none !important;
    box-shadow: 0 0 0 1px rgba(150, 88, 138, 0.3) !important;
}

/* Style the flag dropdown button - always on the left */
.iti__flag-container {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: auto !important;
    padding: 0 !important;
}

.iti__selected-flag {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 52px !important;
    height: 100% !important;
    padding: 0 8px !important;
    background-color: transparent !important;
    border: none !important;
    border-right: 1px solid #ddd !important;
    cursor: pointer !important;
}

.iti__selected-flag:hover,
.iti__selected-flag:focus {
    background-color: #f8f8f8 !important;
}

/* Match WooCommerce field wrapper structure */
.woocommerce-billing-fields__field-wrapper .form-row .iti {
    margin-bottom: 0 !important;
}

/* Ensure proper styling within WooCommerce form-row */
.woocommerce form .form-row .iti {
    display: block !important;
    width: 100% !important;
}

/* Style the dropdown country list */
.iti__country-list {
    width: 100% !important;
    max-width: 100% !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    z-index: 9999 !important;
}

.iti__country {
    padding: 8px 12px !important;
}

.iti__country:hover,
.iti__country.iti__highlight {
    background-color: #f8f8f8 !important;
}

.iti__country.iti__active {
    background-color: #96588a !important;
    color: #fff !important;
}

/* Arrow icon styling */
.iti__arrow {
    border-left: 4px solid transparent !important;
    border-right: 4px solid transparent !important;
    border-top: 4px solid #555 !important;
}

.iti__selected-flag:hover .iti__arrow {
    border-top-color: #333 !important;
}

/* Error state styling */
.iti--allow-dropdown input.iti__tel-input.error,
.iti--allow-dropdown input.iti__tel-input[aria-invalid="true"] {
    border-color: #e2401c !important;
}

/* Disabled state */
.iti__tel-input:disabled,
#billing_phone:disabled {
    background-color: #f5f5f5 !important;
    cursor: not-allowed !important;
}

/* RTL Support - Phone input stays LTR even on RTL pages */
/* Only the input field and intlTelInput container are LTR */
/* The label stays RTL and appears on the right side */

/* Force the intlTelInput container to be LTR - Override intlTelInput's RTL class */
body.rtl .iti,
body[dir="rtl"] .iti,
html[dir="rtl"] .iti,
.rtl .iti,
[dir="rtl"] .iti,
body.rtl .iti--rtl,
body[dir="rtl"] .iti--rtl,
html[dir="rtl"] .iti--rtl,
.rtl .iti--rtl,
[dir="rtl"] .iti--rtl,
.iti.iti--rtl,
.pvfwc-iti-container {
    direction: ltr !important;
}

.pvfwc-iti-container .iti__flag-container {
    left: 0 !important;
    right: auto !important;
}

.pvfwc-iti-container .iti__country-container,
.pvfwc-iti-container .iti__selected-country {
    left: 0 !important;
    right: auto !important;
}

.pvfwc-iti-container .iti__country-container,
.pvfwc-iti-container .iti__selected-country,
.pvfwc-iti-container .iti__selected-flag,
.pvfwc-iti-container .iti__selected-country-primary {
    width: 60px !important;
    min-width: 60px !important;
    max-width: 60px !important;
    padding: 0 !important;
    justify-content: center !important;
}

.pvfwc-iti-container .iti__country-container {
    top: 0 !important;
    bottom: 0 !important;
    border: 1px solid #ddd !important;
    border-right: none !important;
    border-radius: 4px 0 0 4px !important;
    background-color: #fff !important;
    margin: 0 !important;
}

.pvfwc-iti-container:focus-within .iti__country-container {
    border-color: #96588a !important;
    box-shadow: 0 0 0 1px rgba(150, 88, 138, 0.3) !important;
}

.pvfwc-iti-container .iti__arrow {
    margin-left: 4px !important;
}

.pvfwc-iti-container .iti__tel-input {
    padding-left: 68px !important;
    padding-right: 12px !important;
    text-align: left !important;
}

.pvfwc-iti-container .iti__selected-flag {
    border-right: 1px solid #ddd !important;
}

/* Force phone input to be LTR with flag on the left - Override .iti--rtl */
body.rtl .iti__tel-input,
body[dir="rtl"] .iti__tel-input,
html[dir="rtl"] .iti__tel-input,
.rtl .iti__tel-input,
[dir="rtl"] .iti__tel-input,
body.rtl #billing_phone,
body[dir="rtl"] #billing_phone,
html[dir="rtl"] #billing_phone,
.rtl #billing_phone,
[dir="rtl"] #billing_phone,
body.rtl .iti--rtl .iti__tel-input,
body[dir="rtl"] .iti--rtl .iti__tel-input,
html[dir="rtl"] .iti--rtl .iti__tel-input,
.rtl .iti--rtl .iti__tel-input,
[dir="rtl"] .iti--rtl .iti__tel-input,
.iti.iti--rtl .iti__tel-input,
body.rtl .iti--rtl #billing_phone,
body[dir="rtl"] .iti--rtl #billing_phone,
html[dir="rtl"] .iti--rtl #billing_phone,
.rtl .iti--rtl #billing_phone,
[dir="rtl"] .iti--rtl #billing_phone,
.iti.iti--rtl #billing_phone {
    direction: ltr !important;
    text-align: left !important;
    padding-left: 52px !important;
    padding-right: 12px !important;
}

/* Keep flag container on the left even in RTL - Override .iti--rtl */
body.rtl .iti__flag-container,
body[dir="rtl"] .iti__flag-container,
html[dir="rtl"] .iti__flag-container,
.rtl .iti__flag-container,
[dir="rtl"] .iti__flag-container,
body.rtl .iti--rtl .iti__flag-container,
body[dir="rtl"] .iti--rtl .iti__flag-container,
html[dir="rtl"] .iti--rtl .iti__flag-container,
.rtl .iti--rtl .iti__flag-container,
[dir="rtl"] .iti--rtl .iti__flag-container,
.iti.iti--rtl .iti__flag-container {
    left: 0 !important;
    right: auto !important;
}

/* Keep flag border on the right side - Override .iti--rtl */
body.rtl .iti__selected-flag,
body[dir="rtl"] .iti__selected-flag,
html[dir="rtl"] .iti__selected-flag,
.rtl .iti__selected-flag,
[dir="rtl"] .iti__selected-flag,
body.rtl .iti--rtl .iti__selected-flag,
body[dir="rtl"] .iti--rtl .iti__selected-flag,
html[dir="rtl"] .iti--rtl .iti__selected-flag,
.rtl .iti--rtl .iti__selected-flag,
[dir="rtl"] .iti--rtl .iti__selected-flag,
.iti.iti--rtl .iti__selected-flag {
    border-right: 1px solid #ddd !important;
    border-left: none !important;
}

/* Keep dropdown items readable for RTL users */
body.rtl .iti__country,
body[dir="rtl"] .iti__country,
html[dir="rtl"] .iti__country {
    text-align: right !important;
    direction: rtl !important;
}

body.rtl .iti__dial-code,
body[dir="rtl"] .iti__dial-code,
html[dir="rtl"] .iti__dial-code {
    direction: ltr !important;
}

/* Search input in dropdown for RTL */
body.rtl .iti__search-input,
body[dir="rtl"] .iti__search-input,
html[dir="rtl"] .iti__search-input {
    text-align: right !important;
    padding-right: 12px !important;
    padding-left: 12px !important;
}

/* Responsive adjustments for mobile */
@media screen and (max-width: 768px) {
    .iti__tel-input,
    #billing_phone {
        font-size: 16px !important; /* Prevents zoom on iOS */
    }
    
    .iti__country-list {
        width: 100% !important;
        max-height: 200px !important;
        overflow-y: auto !important;
    }
}

/* Remove any default wrapper styling */
#pvfwc-phone-wrapper {
    display: none !important;
}