.iti
 {
     display: block;
 }
 .iti__selected-country-primary{
     display: none;
 }
  .iti__flag {
    display: none;
}
.iti__selected-dial-code{
    border-left: none !important;
    border-right: 1px solid #6A9BAF !important;
    padding: 5px 10px;
}
html[dir="rtl"] .iti__selected-dial-code{
    border-left: 1px solid #6A9BAF !important;
    border-right: none !important;
}
 /* Custom vertical separator line to the right of the flag selector (dropdown). */
.iti__flag-container {
    position: relative;
}
.iti__search-input{
    font-size: 1rem;
}
.iti__flag-container::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 24px; /* Adjust to match the dropdown height (default ITI input height ~40px, arrow ~24px). Tweak if needed. */
    width: 1px;
    background-color: #ccc; /* Line color: light gray; change to #000 for black, etc. */
    pointer-events: none; /* Allows interaction with elements behind if any. */
    z-index: 10; /* Ensures it's on top. */
}
/* Optional: Extra spacing/padding for the phone input after the selector and line. */
.iti__selected-dial-code {
    margin-right: 10px; /* Space after the dial code if separateDialCode is true. */
}
.iti__tel-input {
    padding-left: 10px; /* Additional left padding for the number input. */
}
/* If you want the whole thing inline or adjusted in form: */
#billing_phone {
    width: 100%; /* Matches WooCommerce's form-row-wide. */
}
/* Mobile fix: Stack if screen small. */
@media (max-width: 768px) {
    .iti {
        width: 100%;
    }
    .iti__flag-container::after {
        height: 20px; /* Slightly shorter on mobile. */
    }
}