.gratorder-badge {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 1rem max(0.875rem, env(safe-area-inset-bottom));
    background: #17191f;
    color: #f6f3ec;
    font: 500 0.8125rem/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    text-decoration: none;
}

.gratorder-badge strong {
    font-weight: 750;
}

.gratorder-badge__mark {
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    background: url(gratorder.svg) center / contain no-repeat;
}

.gratorder-badge:hover strong,
.gratorder-badge:focus-visible strong {
    color: #ff6a2b;
}

@media (min-width: 64rem) {
    .gratorder-badge {
        position: fixed;
        z-index: 40;
        right: 1rem;
        bottom: 1rem;
        padding: 0.5rem 0.875rem 0.5rem 0.625rem;
        border-radius: 999px;
        box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 0.25);
        opacity: 0.92;
        transition: opacity 0.2s, translate 0.2s;
    }

    .gratorder-badge:hover,
    .gratorder-badge:focus-visible {
        opacity: 1;
        translate: 0 -2px;
    }
}

@media print {
    .gratorder-badge {
        display: none;
    }
}