/* === SCPV Base Styles === */
.iti:not([data-scpv-wrapper]) {
   display: flex !important;
}

.iti__country-container.iti__dropdown-content[style*="width"] {
    width: auto !important;
    min-width: 220px !important;
    /*position: absolute !important;*/
    z-index: 99999 !important;
    background-color: white;
     /*Ensure background is visible above others */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Fix: Ensure selected country container is flex and inline */
.iti__selected-country {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    height: 100% !important;
    padding: 0 6px !important;
    box-sizing: border-box !important;
    position: relative !important;
    border-right: 1px solid black !important;
    background-color: white !important;
}

 /*Fix: Ensure dial code aligns properly next to flag */
.iti__selected-dial-code {
    color: black !important;
    display: inline-block !important;
    font-size: 14px !important;
    margin-left: 6px !important;
    vertical-align: middle !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}



/* === Validation Error Styling === */
.scpv-error-message {
    color: red;
    font-size: 13px;
    margin-top: 4px;
    display: block;
    position: absolute !important;
    top: 100%;
    left: 0;
    white-space: nowrap;
    /* z-index: 2; */
}

.scpv-error {
    border-color: red !important;
    outline: 1px solid red !important;
}



/* === WooCommerce Support === */
/* Phone label ("Phone (optional)") is hidden ONLY when the WooCommerce
   option is ticked in the plugin settings (body.scpv-woo-enabled). */
body.scpv-woo-enabled label[for="billing-phone"],
body.scpv-woo-enabled label[for="shipping-phone"],
body.scpv-woo-enabled label[for="billing_phone"],
body.scpv-woo-enabled label[for="shipping_phone"],
body.scpv-woo-enabled .wc-block-components-address-form__phone label {
    display: none !important;
}

/* With the floating label gone, re-centre the text inside the Blocks input */
body.scpv-woo-enabled .wc-block-components-address-form__phone .iti {
    display: block !important;
    width: 100% !important;
}
body.scpv-woo-enabled .wc-block-components-address-form__phone .iti input.iti__tel-input {
    height: 3.125em !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-right: 0.75em !important;
    line-height: 1.4 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
body.scpv-woo-enabled .wc-block-components-address-form__phone .iti .iti__selected-country {
    height: 100% !important;
}
.scpv-woo-error-message {
    color: #f00;
    font-size: 12px;
    margin-top: 10px;
    display: block;
}

.iti input#billing-phone,
.iti input#billing_phone,
.iti input[name="billing_phone"] {
    padding-left: 100px !important;
    height: 50px !important;
    line-height: 1.4 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 4px !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
} 

 /*=== Inline Fields Support === */
.scpv-inline-fields .iti {
    width: auto !important;
    flex: 1 1 48%;
    min-width: 200px;
}

@media (max-width: 768px) {
    .scpv-inline-fields {
        flex-direction: column;
    }

    .scpv-inline-fields .iti {
        width: 100% !important;
    }
}



@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
    /*.wpforms-container-full .iti__flag {*/
    /*    background-image: url("../img/flags@2x.png") !important;*/
    /*}*/
}
.scpv-error {
    color: red;
    font-size: 0.85em;
    margin-top: 4px;
}

.scpv-invalid {
    border-color: red !important;
    outline: none;
}
/* === CRITICAL: Force WooCommerce placeholder visibility === */
.wc-block-components-address-form__phone input[type="tel"]::placeholder,
.woocommerce-input-wrapper input[name="billing_phone"]::placeholder,
.woocommerce-input-wrapper input[name="shipping_phone"]::placeholder {
    color: #999 !important;
    opacity: 1 !important;
}

/* Override WooCommerce default placeholder styling */
.wc-block-components-address-form__phone input::-webkit-input-placeholder,
.woocommerce-input-wrapper input::-webkit-input-placeholder {
    color: #999 !important;
}

.wc-block-components-address-form__phone input:-moz-placeholder,
.woocommerce-input-wrapper input:-moz-placeholder {
    color: #999 !important;
}

.wc-block-components-address-form__phone input::-moz-placeholder,
.woocommerce-input-wrapper input::-moz-placeholder {
    color: #999 !important;
}

.wc-block-components-address-form__phone input:-ms-input-placeholder,
.woocommerce-input-wrapper input:-ms-input-placeholder {
    color: #999 !important;
}

.wpcf7-form-control-wrap:has(.iti[data-scpv-wrapper]) .wpcf7-not-valid-tip,
.wpforms-field:has(.iti[data-scpv-wrapper]) label.wpforms-error,
.wpforms-field:has(.iti[data-scpv-wrapper]) em.wpforms-error,
.forminator-field:has(.iti[data-scpv-wrapper]) .forminator-error-message,
.forminator-col:has(.iti[data-scpv-wrapper]) .forminator-error-message,
.ff-el-group:has(.iti[data-scpv-wrapper]) .error,
.ff-el-group:has(.iti[data-scpv-wrapper]) .text-danger,
.elementor-field-group:has(.iti[data-scpv-wrapper]) .elementor-message,
.gfield:has(.iti[data-scpv-wrapper]) .validation_message,
.frm_form_field:has(.iti[data-scpv-wrapper]) .frm_error,
.nf-field-container:has(.iti[data-scpv-wrapper]) .nf-error-wrap {
    display: none !important;
}

.iti[data-scpv-wrapper] input.wpforms-error,
.iti[data-scpv-wrapper] input.wpcf7-not-valid,
.iti[data-scpv-wrapper] input.ff-el-is-error,
.iti[data-scpv-wrapper] input.error {
    box-shadow: none;
}

div.wpforms-container .iti[data-scpv-wrapper] {
    position: relative !important;
    display: block !important;
}

div.wpforms-container .iti[data-scpv-wrapper] input.iti__tel-input {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

div.wpforms-container .iti[data-scpv-wrapper] .iti__country-container {
    position: absolute;
    top: 0;
    bottom: 0;
    padding: var(--iti-border-width);
}

div.wpforms-container .iti[data-scpv-wrapper] .iti__selected-country {
    z-index: 1;
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    background: 0 0;
    border: 0;
    margin: 0;
    padding: 0;
    border-radius: 0;
}

div.wpforms-container .iti[data-scpv-wrapper] .iti__selected-country-primary {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 var(--iti-arrow-padding) 0 var(--iti-spacer-horizontal);
}

div.wpforms-container .iti[data-scpv-wrapper] .iti__arrow {
    margin-left: var(--iti-arrow-padding);
    width: 0;
    height: 0;
    border-left: var(--iti-triangle-border) solid transparent;
    border-right: var(--iti-triangle-border) solid transparent;
    border-top: var(--iti-arrow-height) solid var(--iti-arrow-color);
}

div.wpforms-container .iti[data-scpv-wrapper] .iti__arrow--up {
    border-top: none;
    border-bottom: var(--iti-arrow-height) solid var(--iti-arrow-color);
}

div.wpforms-container .iti[data-scpv-wrapper] .iti__a11y-text {
    width: 1px;
    height: 1px;
    clip: rect(1px, 1px, 1px, 1px);
    overflow: hidden;
    position: absolute;
}

div.wpforms-container .iti[data-scpv-wrapper] .iti__v-hide {
    visibility: hidden;
}

div.wpforms-container .iti[data-scpv-wrapper] .iti__flag:not(.iti__globe) {
    height: var(--iti-flag-height);
    width: var(--iti-flag-width);
    border-radius: 1px;
    box-shadow: 0 0 1px 0 #888;
    background-image: var(--scpv-flags-1x, var(--iti-path-flags-1x));
    background-repeat: no-repeat;
    background-position: var(--iti-flag-offset) 0;
    background-size: var(--iti-flag-sprite-width) var(--iti-flag-sprite-height);
}

div.wpforms-container .iti[data-scpv-wrapper] .iti__globe {
    background-image: var(--iti-path-globe-1x);
    background-size: contain;
    background-position: right;
    box-shadow: none;
    height: 19px;
}

@media (min-resolution: 2x) {
    div.wpforms-container .iti[data-scpv-wrapper] .iti__flag:not(.iti__globe) {
        background-image: var(--scpv-flags-2x, var(--iti-path-flags-2x));
    }

    div.wpforms-container .iti[data-scpv-wrapper] .iti__globe {
        background-image: var(--iti-path-globe-2x);
    }
}

div.wpforms-container .iti[data-scpv-wrapper] .iti__dropdown-content {
    border-radius: 3px;
    background-color: var(--iti-dropdown-bg);
}

div.wpforms-container .iti--inline-dropdown[data-scpv-wrapper] .iti__dropdown-content {
    position: absolute;
    z-index: 99999;
    margin-top: 3px;
    margin-left: calc(var(--iti-border-width) * -1);
    border: var(--iti-border-width) solid var(--iti-border-color);
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
}

div.wpforms-container .iti[data-scpv-wrapper] input.iti__search-input {
    width: 100%;
    border-width: 0;
    border-radius: 3px;
    box-shadow: none;
}

div.wpforms-container .iti[data-scpv-wrapper] .iti__country-list {
    list-style: none;
    padding: 0;
    margin: 0;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}

div.wpforms-container .iti--inline-dropdown[data-scpv-wrapper] .iti__country-list {
    max-height: 185px;
}

div.wpforms-container .iti[data-scpv-wrapper] .iti__country {
    display: flex;
    align-items: center;
    padding: 8px var(--iti-spacer-horizontal);
    margin: 0;
    outline: 0;
}

div.wpforms-container .iti[data-scpv-wrapper] .iti__country-name {
    margin-right: var(--iti-spacer-horizontal);
}

div.wpforms-container .iti[data-scpv-wrapper] .iti__country-list .iti__flag {
    margin-right: var(--iti-spacer-horizontal);
}

div.wpforms-container .iti[data-scpv-wrapper] .iti__selected-dial-code {
    margin-left: 4px;
}