/* Per-business WhatsApp button in listings. It sits beside the card link (never inside it) over reserved space. */
.sag-wa-inline,a.sag-wa-inline.sag-wa-inline{
    box-sizing:border-box;position:absolute;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;
    height:34px;margin:0;padding-block:0;padding-inline:5px 14px;border:0!important;border-radius:999px;
    background:linear-gradient(180deg,#169c52 0%,#128c4a 100%)!important;color:#fff!important;
    font-family:inherit;font-size:13.5px;font-weight:700;line-height:1;letter-spacing:.1px;white-space:nowrap;
    text-decoration:none!important;box-shadow:0 3px 10px rgba(18,140,74,.28)!important;
    transition:filter .15s ease,box-shadow .15s ease;
}
/* Themes and listing resets (e.g. `.sag-cluster a{background:none!important}`) must not strip the button. */
/* Darken the same gradient instead of swapping it for a flat colour: no flash on hover. */
a.sag-wa-inline.sag-wa-inline:hover{filter:brightness(.92);color:#fff!important;box-shadow:0 5px 14px rgba(18,140,74,.38)!important}
a.sag-wa-inline.sag-wa-inline:focus-visible{outline:3px solid #0f7a40;outline-offset:2px}
.sag-wa-inline__icon{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;background:#fff;color:#128c4a}
.sag-wa-inline__svg{display:block;width:15px;height:15px}
.sag-wa-inline__text{color:#fff}
@media(prefers-reduced-motion:reduce){.sag-wa-inline{transition:none}}

/* Businesses cluster: the button has its own full-width row, so narrow cards keep the whole footer.
   The lift follows the list item, so moving from the card to the button never drops the card. */
.sag-cluster .sag-cluster__item--wa{position:relative}
.sag-cluster .sag-cluster__item--wa>a.sag-cluster__card{padding-bottom:52px}
.sag-cluster .sag-cluster__item--wa>.sag-wa-inline{bottom:16px;inset-inline:16px;height:36px;border-radius:10px;transition:filter .15s ease,box-shadow .15s ease,transform .18s ease}
.sag-cluster .sag-cluster__item--wa:hover>a.sag-cluster__card{transform:translateY(-3px);box-shadow:0 9px 25px #008ef330!important}
.sag-cluster .sag-cluster__item--wa:hover>.sag-wa-inline{transform:translateY(-3px)}
@media(prefers-reduced-motion:reduce){.sag-cluster .sag-cluster__item--wa:hover>a.sag-cluster__card,.sag-cluster .sag-cluster__item--wa:hover>.sag-wa-inline{transform:none}}

/* Related businesses grid: full-width button at the bottom of each card. */
.sag-recommendations .sag-recommendations__item--wa{position:relative}
.sag-recommendations .sag-recommendations__item--wa:hover>.sag-recommendations__card{border-color:#96c6ff;box-shadow:0 5px 16px #176ad51a}
.sag-recommendations--related .sag-recommendations__item--wa>.sag-recommendations__card{padding-bottom:48px!important}
.sag-recommendations--related .sag-recommendations__item--wa>.sag-wa-inline{bottom:10px;inset-inline:10px;height:36px;border-radius:10px}

/* Sidebar list: pill under the business text, aligned with it. */
.sag-recommendations--sidebar .sag-recommendations__item--wa>.sag-recommendations__card{padding-bottom:44px!important}
.sag-recommendations--sidebar .sag-recommendations__item--wa>.sag-wa-inline{bottom:9px;inset-inline-start:93px}
@container(max-width:250px){.sag-recommendations--sidebar .sag-recommendations__item--wa>.sag-wa-inline{inset-inline-start:71px}}

/* Top-rated widget: pill at the end of the row, vertically centred. */
.sag-footer .sag-footer__businesses>li.sag-footer__item--wa{position:relative}
.sag-footer .sag-footer__item--wa>.sag-footer__business{padding-inline-end:122px}
.sag-footer .sag-footer__item--wa>.sag-wa-inline{top:50%;transform:translateY(-50%);inset-inline-end:0}
@container(max-width:300px){
    /* Narrow widget columns: the button moves under the details instead of squeezing them. */
    .sag-footer .sag-footer__item--wa>.sag-footer__business{padding-inline-end:0;padding-bottom:44px}
    .sag-footer .sag-footer__item--wa>.sag-wa-inline{top:auto;bottom:8px;transform:none;inset-inline-end:auto;inset-inline-start:92px}
}

/* Homepage ranking rails: icon-only circle at the end of each row (the rails are 250-320px wide). */
.sag-rank .sag-rank__li--wa{position:relative}
.sag-rank .sag-rank__li--wa>a.sag-rank__item{padding-inline-end:48px}
.sag-rank .sag-rank__li--wa>.sag-wa-inline--rail{top:50%;inset-inline-end:2px;width:34px;height:34px;padding:0;gap:0;transform:translateY(-50%)}
.sag-rank .sag-wa-inline--rail .sag-wa-inline__icon{width:34px;height:34px;background:transparent;color:#fff}
.sag-rank .sag-wa-inline--rail .sag-wa-inline__svg{width:18px;height:18px}
.sag-rank .sag-wa-inline--rail .sag-wa-inline__text{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}