.dock {
    width: fit-content;
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    background: rgb(84 82 82 / 44%);
    padding: 10px 20px;
    backdrop-filter: blur(10px);
    transition: height 0.25s ease, padding 0.25s ease;
    height: 3.5rem;
    border-radius: 15px;
    -webkit-border-radius:;
    -moz-border-radius:;
    -ms-border-radius:;
    -o-border-radius:;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    /*    box-shadow: 2px 1px 6px 3px #7c7c7cc7;*/
}
    .dock.show {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
    }

/* Laptop & desktop only */
@media (max-width: 768px) {
    /* Force display to override any previous hiding rules */
    .dock {
        display: flex !important;
        width: 95%; /* Use slightly more width on small screens */
        bottom: 10px; /* Stick close to bottom */
        height: auto; /* Let height adjust naturally */
        padding: 10px 5px; /* Reduce side padding */
        gap: 5px; /* Reduce gap between icons */
    }

        /* DISABLE the hover animations on mobile */
        .dock:hover {
            height: auto; /* Stop it from jumping sizes */
            padding: 10px 5px;
        }

    /* Make text ALWAYS visible on mobile */
    .dock-icon span {
        opacity: 1 !important;
        height: auto !important;
        overflow: visible !important;
        font-size: 9px; /* Make text slightly smaller to fit */
        margin-top: 3px;
        display: block; /* Ensure it sits below icon */
    }

    /* Fix icon sizing for mobile */
    .dock-icon img {
        width: 28px; /* Slightly smaller icons */
    }

    /* Ensure the container for the icon text handles wrapping */
    .dock-icon {
        width: 100%;
        flex: 1; /* Distribute space evenly */
    }
}

.dock:hover {
    height: 4.5rem;
    padding: 20px 25px;
}

.dock-icon img {
    width: 35px;
    opacity: 1;
    transition: width 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

.dock:hover .dock-icon img {
    width: 2rem;
    object-fit: contain;
}

.dock-icon:hover img {
    transform: scale(1.25);
    opacity: 1;
}

.dock-icon {
    word-wrap: break-word;
    white-space: normal;
    width: 80px;
    font-weight: bold;
    font-size: 10px;
    gap: 4px;
    display: flex;
    flex-direction: column;
    color: var(--theme-dark-blue);
    align-items: center;
}

    .dock-icon span {
        opacity: 0;
        height: 0;
        overflow: hidden;
        transition: opacity 0.3s ease, height 0.3s ease;
    }

/* When the whole dock is hovered */
.dock:hover .dock-icon span {
    opacity: 1;
    height: auto;
}