/* Universal phone input (TK-2026-01160).
   Styles the wrapper the base/includes/_phone_input.html include renders; the
   <input> itself is decorated by the intl-tel-input library. Colors are CBAT
   theme vars only (no hardcoded values) so it themes + dark-modes correctly. */
.cbat-phone-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cbat-phone-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--cbat-text);
}
/* iti wraps the input in .iti (position:relative, display:block); let it fill
   the field width so the flag dropdown + input line up with sibling fields. */
.cbat-phone-field .iti {
    width: 100%;
}
/* Keep the iti flag widget correct even inside forms whose own CSS restyles
   <button> and <input> broadly. The cb marketing forms gave every <button> a
   red background + padding (which leaked into iti's flag button, reddening and
   widening it) and set a small input padding-left (so the flag overlapped the
   number). Re-assert iti's own layout — these match iti's defaults, so they're
   a no-op on forms that don't fight iti. */
/* !important is needed to beat host forms that style inputs/buttons with
   ID-level selectors and !important (the cb marketing form uses
   `#cb_contact_form_v5 input { padding: 2% }` and a red <button> background).
   These values equal iti's own defaults, so they're a no-op where nothing
   fights iti — they only rescue the widget where a host would break it. */
.cbat-phone-field .iti__selected-country,
.cbat-phone-field .iti__selected-country:hover,
.cbat-phone-field .iti__selected-country:focus {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 1rem !important;
    width: auto !important;
}
.cbat-phone-field .iti input,
.cbat-phone-field .iti input.cbat-phone-input {
    padding-left: 52px !important;
}
.cbat-phone-input.error {
    border-color: var(--error);
}
.cbat-phone-error {
    font-size: 0.8125rem;
    color: var(--error);
}