/* ── Single profile: contact buttons ──────────────────────────────────────────
   Loaded only on single escort pages. Follows the design kit's profile buttons
   (js/components/profile.js): 48px pills, solid WhatsApp green and an outlined
   purple phone button. Plain component CSS on the design tokens, for the same
   reason as profile-gallery.css — it lives inside Bootstrap's grid on a legacy
   template.
   ──────────────────────────────────────────────────────────────────────────── */

/* style.css sets `*:not(i){font-family:'Roboto'}` on every element, inner
   <span>s included, so the brand font has to be set on them directly. */
.evas-contact,
.evas-contact * {
    font-family: 'BDO Grotesk', sans-serif;
}

.evas-contact {
    margin-top: 8px;
    /* style.css removes the next row's top padding on mobile
       (`.name-phone{padding:0 10px !important}`), so the gap below the
       buttons has to come from here. */
    margin-bottom: 20px;
}

.evas-contact__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.evas-contact__btn {
    /* Two across while each can be at least 160px wide; in a narrower column
       (Bootstrap's md breakpoint) they stack instead of squeezing the number. */
    flex: 1 1 160px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    padding: 0 20px;
    border-radius: 9999px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease,
                background .2s ease, border-color .2s ease;
}

.evas-contact__btn svg {
    flex-shrink: 0;
}

/* Bootstrap's a:hover would turn these blue and underline them. */
.evas-contact__btn:hover,
.evas-contact__btn:focus {
    text-decoration: none;
}

.evas-contact__btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--brand-purpleL);
}

.evas-contact__btn--whatsapp,
.evas-contact__btn--whatsapp:hover,
.evas-contact__btn--whatsapp:focus {
    background: var(--brand-whatsapp);
    color: #fff;
}

.evas-contact__btn--whatsapp:hover {
    filter: brightness(1.06);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgb(var(--brand-whatsapp-rgb) / .35);
}

.evas-contact__btn--phone,
.evas-contact__btn--phone:hover,
.evas-contact__btn--phone:focus {
    border: 1px solid rgb(var(--brand-purple-rgb) / .5);
    background: transparent;
    color: var(--brand-purpleL);
}

a.evas-contact__btn--phone:hover {
    border-color: rgb(var(--brand-purpleL-rgb) / .7);
    background: rgb(var(--brand-purple-rgb) / .12);
    transform: translateY(-2px);
}

/* Shown when the escort doesn't take calls: the number, but not a link. */
.evas-contact__btn.is-static {
    cursor: default;
}

.evas-contact__note {
    margin: 10px 0 0;
    font-size: 12px;
    color: var(--brand-muted);
    text-align: center;
}

@media (prefers-reduced-motion: reduce) {
    .evas-contact__btn {
        transition: none;
    }

    .evas-contact__btn:hover {
        transform: none;
    }
}