/**
 * com_deliveryplus — intl-tel-input integration for checkout / registration / account
 * phone fields. Pairs with media/com_deliveryplus/js/site/dp-tel.js.
 *
 * The vendored intlTelInput.min.css resolves its flag sprite from the
 * --iti-path-flags-* CSS vars; point them at our vendored copy (absolute so it
 * works regardless of the CSS file's own location).
 */
.iti {
    --iti-path-flags-1x: url('/media/com_deliveryplus/css/site/vendor/img/flags.webp');
    --iti-path-flags-2x: url('/media/com_deliveryplus/css/site/vendor/img/flags@2x.webp');
    width: 100%;                 /* fill the .form__group like a bare .form__field */
    display: block;
}

/* The floating label is a sibling of the .iti wrapper (intl-tel-input wraps only
   the input). Keep the DP floating-label look: separateDialCode pushes the input
   text right to clear the flag button, so nudge the resting label to match. */
.form__group .iti + .form__label {
    left: 52px;
}
.form__group .iti .form__field:focus ~ .form__label,
.form__group .iti .form__field:not(:placeholder-shown) ~ .form__label {
    left: 0;                     /* raised label returns to the group's left edge */
}

/* intl-tel-input's country dropdown must escape the cart's clipping rows. */
.iti__dropdown-content {
    z-index: 1000;
}

/* Inline validation hint rendered next to the field by dp-tel.js. */
.dp-tel__hint {
    display: block;
    margin-top: 6px;
    font-size: 0.8125rem;
    color: #dc2626;
}
.dp-tel__hint[hidden] {
    display: none;
}