/* ══════════════════════════════════════════════════════════════════════════
   Clickable contact details — shared styling.

   Phone, WhatsApp and email links appear inside tables, cards and footers
   that already have their own colour schemes, so these inherit the
   surrounding text colour instead of forcing link-blue. The only strong
   colour is WhatsApp's own green on its icon, which is what makes the
   action recognisable at a glance.
   ══════════════════════════════════════════════════════════════════════════ */

.ba-contact-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted currentColor;
    white-space: nowrap;
}

.ba-contact-link:hover,
.ba-contact-link:focus-visible {
    border-bottom-style: solid;
    text-decoration: none;
}

.ba-contact-link i { opacity: .55; margin-right: 3px; font-size: .9em; }
.ba-contact-link:hover i { opacity: 1; }

.ba-contact-pair { display: inline-flex; align-items: center; gap: 6px; }

.ba-contact-wa-icon,
.ba-contact-wa i {
    color: #25d366;
    text-decoration: none;
}

.ba-contact-wa-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.55em;
    height: 1.55em;
    border-radius: 50%;
    background: rgba(37, 211, 102, .12);
    flex: none;
}

.ba-contact-wa-icon:hover,
.ba-contact-wa-icon:focus-visible { background: rgba(37, 211, 102, .25); }
.ba-contact-wa-icon i { margin: 0; opacity: 1; }

.ba-contact-actions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ba-contact-sep { opacity: .35; }

/* Touch targets: on a phone these are the whole point of the feature, so
   give them room to be hit accurately. */
@media (hover: none) {
    .ba-contact-link { padding: 2px 0; }
    .ba-contact-wa-icon { width: 1.9em; height: 1.9em; }
}

@media print {
    .ba-contact-wa-icon { display: none; }
    .ba-contact-link { border-bottom: none; }
    .ba-contact-link i { display: none; }
}