.toolbar {
    position: fixed;
    right: 10px;
    bottom: 5%;
    transform: translateY(50%);
    z-index: 999;
    /* Background and shadow are now on individual items */
}

.toolbar dd {
    position: relative;
    width: 70px; /* Increased width to accommodate icon and text */
    min-height: 70px; /* Increased height */
    background-color: #007bff; /* Theme blue - REPLACE if you have a specific hex */
    color: #fff;
    border-radius: 8px;
    margin: 0 0 10px 0; /* Added margin between items */
    cursor: pointer;
    transition: background-color 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}

.toolbar dd:last-child {
    margin-bottom: 0; /* No margin for the last item */
}

.toolbar dd i {
    display: block;
    width: 28px; /* Icon size */
    height: 28px; /* Icon size */
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain; /* Or specific size like 28px */
    filter: brightness(0) invert(1); /* Makes black/dark icons white */
    margin-bottom: 5px; /* Space between icon and text */
}

.toolbar dd span {
    display: block; /* Show the text */
    font-size: 12px;
    line-height: 1.2;
    text-align: center;
}

.toolbar dd:hover {
    background-color: #0056b3; /* Darker blue on hover - REPLACE if needed */
}

/* Ensure links within toolbar items also get the white color and no underline */
.toolbar dd a {
    color: inherit; /* Inherit color from parent dd (which is white) */
    text-decoration: none;
    display: flex; /* To allow flex properties for alignment if needed */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.toolbar dd .box {
    position: absolute;
    right: calc(100% + 10px); /* Position box to the left of the toolbar item */
    top: 50%;
    transform: translateY(-50%);
    padding: 15px;
    background: #fff;
    color: #333; /* Text color for content inside the box */
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    display: none;
    white-space: nowrap;
    z-index: 1000; /* Ensure box is above other toolbar items */
}

.toolbar dd:hover .box {
    display: block;
}

.toolbar .qq i {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E");
}

.toolbar .tel i {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 15.5c-1.2 0-2.4-.2-3.6-.6-.3-.1-.7 0-1 .2l-2.2 2.2c-2.8-1.4-5.1-3.8-6.6-6.6l2.2-2.2c.3-.3.4-.7.2-1-.3-1.1-.5-2.3-.5-3.5 0-.6-.4-1-1-1H4c-.6 0-1 .4-1 1 0 9.4 7.6 17 17 17 .6 0 1-.4 1-1v-3.5c0-.6-.4-1-1-1zM19 12h2c0-4.9-4.1-9-9-9v2c3.9 0 7 3.1 7 7z'/%3E%3C/svg%3E");
}

.toolbar .code i {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.05 4.94C17.19 3.08 14.69 2 12 2 6.48 2 2 6.48 2 12c0 1.77.46 3.45 1.26 4.96L2 22l5.04-1.26c1.51.8 3.19 1.26 4.96 1.26h.01c5.52 0 10-4.48 10-10 0-2.69-1.08-5.19-2.95-7.06zm-7.06 14.07c-1.53 0-3-.4-4.33-1.15l-.3-.18-3.22.8.82-3.14-.2-.32c-.74-1.32-1.14-2.82-1.14-4.38 0-4.41 3.59-8 8-8s8 3.59 8 8-3.59 8-8 8zm4.49-5.53c-.28-.14-1.64-.81-1.9-.9-.25-.09-.43-.14-.62.14-.19.28-.72.9-.88 1.08-.16.19-.32.21-.59.07s-1.13-.42-2.15-1.33c-.8-.71-1.33-1.59-1.49-1.86-.16-.28-.02-.43.12-.57.13-.13.28-.32.42-.48.14-.16.19-.28.28-.46.09-.19.05-.37-.02-.51s-.62-1.49-.85-2.04c-.22-.55-.45-.48-.62-.48-.16 0-.34-.02-.52-.02s-.47.07-.72.35c-.25.28-.97.95-.97 2.32 0 1.37.99 2.69 1.13 2.87.14.19 1.97 3.01 4.78 4.23.68.29 1.22.47 1.64.6.54.17.97.14 1.32.09.39-.06 1.64-.67 1.87-1.3.23-.63.23-1.17.16-1.3-.07-.13-.25-.21-.52-.35z'/%3E%3C/svg%3E");
}

.toolbar .top i {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z'/%3E%3C/svg%3E");
}

.toolbar .tel .box {
    text-align: center;
}

.toolbar .tel .box p {
    margin: 0 0 5px;
    color: #666;
    font-size: 12px;
}

.toolbar .tel .box h3 {
    margin: 0;
    color: #333;
    font-size: 16px;
}

.toolbar .code .box img {
    max-width: 120px;
    height: auto;
}