/* ===== CCSD Phone Validation (intl-tel-input overrides) ===== */

/* Ensure the dropdown sits above other form elements */
.iti {
    width: 100%;
    display: block;
}

/* Hide the original placeholder that overlaps the dial code */
.iti input.iti__tel-input::placeholder {
    color: transparent !important;
}

/* Match ARMember form field styling */
.iti input.iti__tel-input {
    width: 100% !important;
    height: 44px;
    font-family: Poppins, Arial, sans-serif;
    font-size: 15px;
    color: #2F3F5C;
    border: 1px solid #D3DEF0;
    box-sizing: border-box;
    padding-left: 90px !important; /* Space for flag + dial code */
}

.iti input.iti__tel-input:focus {
    border-color: #637799;
    outline: none;
}

/* Hide ALL label/placeholder elements that overlap the intl-tel-input country selector.
   ARMember uses various floating label patterns — cover them all. */
.iti ~ label,
.iti + label,
.iti label,
.iti .arm-df__label,
.iti ~ .arm-df__label {
    display: none !important;
}

/* Labels inside the field wrapper that contains the .iti element */
.arm-df__field-group:has(.iti) > label,
.arm-df__field-group:has(.iti) > .arm-df__label,
[class*="arm_form_field"]:has(.iti) > label,
[class*="arm_form_field"]:has(.iti) > .arm-df__label {
    display: none !important;
}

/* Fallback for any absolutely-positioned label overlapping the input */
.iti .iti__tel-input + label,
.iti .iti__tel-input ~ label {
    display: none !important;
}

/* Invalid state */
input.ccsd-phone-invalid,
input.ccsd-phone-invalid:focus {
    border-color: #FF3B3B !important;
}

/* Error message */
.ccsd-phone-error {
    font-family: Poppins, Arial, sans-serif;
    font-size: 13px;
    color: #FF3B3B;
    margin-top: 4px;
    display: block;
}

/* Dial code styling */
.iti__selected-dial-code {
    font-family: Poppins, Arial, sans-serif;
    font-size: 14px;
    color: #2F3F5C;
}

/* Dropdown styling */
.iti__dropdown-content {
    font-family: Poppins, Arial, sans-serif;
    font-size: 14px;
    border: 1px solid #D3DEF0;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.iti__search-input {
    font-family: Poppins, Arial, sans-serif;
    font-size: 14px;
}