.tooltip-container {
    position: relative;
    display: inline-block;
}   

/* The tooltip itself */
.donate-tooltip {
    display: none;
    width: auto;          /* Let the tooltip grow as wide as needed */
    white-space: nowrap;  /* Force text onto a single line */
    /* Hidden by default */
    position: absolute;
    bottom: 100%;
    /* Position above the button */
    left: 0;
    /* Center horizontally relative to container */
    transform: none;
    /* Shift back left by half its own width */
    margin-bottom: 10px;
    /* Space between button and tooltip */

    /* Aesthetic styling: background, border, etc. */
    background-color: #9e7b79;
    color: #ffffff;
    padding: 8px 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    /* Adjust as needed */
    text-align: left;
    font-size: 12px;
    font-weight: bold;
    z-index: 9999;

    /* Optional fade-in/out transition */
    opacity: 0;
    /* Start transparent */
    transition: opacity 0.2s;
    font-family: 'Montserrat', sans-serif;
}

/* Arrow pointing downward (like a speech bubble) */
.donate-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    /* Position arrow at the bottom edge of tooltip */
    left: 20px;
    transform: none;
    border-width: 8px;
    border-style: solid;
    border-color: #9e7b79 transparent transparent transparent;
    /* ^ This draws a triangle pointing downward 
    (white top, transparent sides) */
}

/* Visible state: use a class toggle or inline style */
.donate-tooltip.show {
    display: block;
    opacity: 1;
}