.abrs-mobile-whatsapp-bar,
.abrs-mobile-whatsapp,
.abrs-desktop-whatsapp {
    display: none;
}

a[data-contact-id="nav-mobile-whatsapp"] {
    display: none !important;
}

@media (min-width: 768px) {
    .abrs-desktop-whatsapp {
        display: block !important;
        position: fixed;
        left: 20px;
        bottom: 20px;
        z-index: 40;
    }

    .abrs-desktop-whatsapp [data-whatsapp-qr-trigger] {
        display: grid;
        grid-template-columns: 24px 1fr;
        grid-template-rows: 144px 24px;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 170px;
        height: 204px;
        box-sizing: border-box;
        padding: 12px;
        border: 1px solid #20bd5a;
        border-radius: 8px;
        background: #25d366;
        color: #fff;
        text-decoration: none;
        box-shadow: 0 4px 14px rgb(0 0 0 / 12%);
    }

    .abrs-desktop-whatsapp [data-whatsapp-qr-trigger]::before {
        content: '';
        grid-column: 1;
        grid-row: 2;
        width: 24px;
        height: 24px;
        background: url('/media/whatsapp-logo.svg') center / contain no-repeat;
    }

    .abrs-desktop-whatsapp [data-whatsapp-qr-trigger] img {
        grid-column: 1 / -1;
        grid-row: 1;
        justify-self: center;
        width: 144px;
        height: 144px;
        padding: 4px;
        box-sizing: border-box;
        border-radius: 4px;
        background: #fff;
    }

    .abrs-desktop-whatsapp [data-whatsapp-qr-trigger]::after {
        content: 'WhatsApp';
        grid-column: 2;
        grid-row: 2;
        font: 700 14px/1.2 system-ui, sans-serif;
    }

    .abrs-desktop-whatsapp [data-whatsapp-qr-trigger]:hover { background: #20bd5a; }

    .abrs-desktop-whatsapp [data-whatsapp-qr-panel] {
        position: absolute;
        top: auto;
        right: auto;
        bottom: calc(100% + 12px);
        left: 0;
        margin: 0;
        width: 256px;
        box-sizing: border-box;
        padding: 16px;
        border: 1px solid #dbe4df;
        border-radius: 8px;
        background: #fff;
        color: #172436;
        text-align: center;
        box-shadow: 0 8px 28px rgb(0 0 0 / 16%);
        max-height: calc(100dvh - 200px);
        overflow-y: auto;
    }

    .abrs-desktop-whatsapp [data-whatsapp-qr-panel] p {
        margin: 6px 0 0;
        font: 400 13px/1.5 system-ui, sans-serif;
    }

    .abrs-desktop-whatsapp [data-whatsapp-qr-panel] img {
        display: block;
        width: 192px;
        height: 192px;
        margin: 12px auto 0;
    }

    .abrs-desktop-whatsapp [data-whatsapp-qr-panel] a {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        margin-top: 12px;
        border: 1px solid #146c43;
        border-radius: 8px;
        color: #146c43;
        font: 600 13px/1.4 system-ui, sans-serif;
        text-decoration: none;
    }

    .abrs-desktop-whatsapp :is(button, a):hover { background: #f0fdf4; }
    .abrs-desktop-whatsapp :is(button, a):focus-visible {
        outline: 3px solid #172436;
        outline-offset: 3px;
    }

    .abrs-desktop-whatsapp[hidden] { display: none !important; }
}

@media (max-width: 767px) {
    /* Reserve space at the document end; the chat launcher stays on the right. */
    body {
        padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    }

    /* The homepage used to reveal its menu only after the header WhatsApp shrank. */
    .site-header #menu-toggle {
        width: 44px;
        height: 44px;
        opacity: 1;
        pointer-events: auto;
        transform: none;
    }

    .abrs-mobile-whatsapp-bar {
        position: fixed;
        z-index: 40;
        inset: auto 0 0;
        display: flex;
        justify-content: flex-start;
        box-sizing: border-box;
        padding: 12px calc(84px + env(safe-area-inset-right, 0px))
            calc(12px + env(safe-area-inset-bottom, 0px))
            max(16px, env(safe-area-inset-left, 0px));
        border-top: 1px solid #e2e8f0;
        background: #fff;
        box-shadow: 0 -3px 14px rgb(0 0 0 / 8%);
    }

    .abrs-mobile-whatsapp {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: center;
        gap: 9px;
        min-width: 136px;
        min-height: 48px;
        box-sizing: border-box;
        padding: 12px 16px;
        border: 0;
        border-radius: 8px;
        background: #25d366;
        color: #fff;
        font: 600 15px/1.2 system-ui, sans-serif;
        text-decoration: none;
    }

    .abrs-mobile-whatsapp-bar[hidden],
    .abrs-mobile-whatsapp[hidden] { display: none; }
    .abrs-mobile-whatsapp img { width: 22px; height: 22px; }
    .abrs-mobile-whatsapp:hover { background: #20bd5a; color: #fff; }
    .abrs-mobile-whatsapp:focus-visible {
        outline: 3px solid #172436;
        outline-offset: 3px;
    }

}

@media print {
    .abrs-desktop-whatsapp,
    .abrs-mobile-whatsapp-bar,
    .abrs-mobile-whatsapp { display: none !important; }
}