/* Floating circular quick links menu styles */
.qlm-container {
    position: fixed;
    bottom: 30px;
    z-index: 999999;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Adjust top offset when admin bar is present */
body.admin-bar .qlm-container {
    /* If bottom-positioned, typically admin bar doesn't conflict unless full screen, but we ensure high z-index and spacing */
}

.qlm-bottom-right {
    right: 30px;
}

.qlm-bottom-left {
    left: 30px;
}

/* Common trigger button styling */
.qlm-trigger-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--main-bg, #3b82f6);
    color: var(--main-color, #ffffff);
    border: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    transition: transform 0.3s ease, background-color 0.3s ease;
    position: relative;
    z-index: 10;
    outline: none;
}

.qlm-trigger-btn:hover {
    transform: scale(1.05);
}

.qlm-trigger-icon {
    transition: transform 0.3s ease;
}

.qlm-container.qlm-active .qlm-trigger-icon {
    transform: rotate(135deg);
}

/* Links wrappers and buttons */
.qlm-links-wrapper {
    position: absolute;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 5;
}

.qlm-link-btn {
    position: absolute;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--link-bg, #4b5563);
    color: var(--link-color, #ffffff);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    opacity: 0;
    transform: scale(0.5);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease;
    font-size: 18px;
    pointer-events: none;
}

/* Tooltips */
.qlm-tooltip {
    position: absolute;
    background-color: #1f2937;
    color: #ffffff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.qlm-bottom-right .qlm-tooltip {
    right: 55px;
}

.qlm-bottom-left .qlm-tooltip {
    left: 55px;
}

.qlm-link-btn:hover .qlm-tooltip {
    opacity: 1;
}

/* ACTIVE STATE ANIMATIONS */
.qlm-container.qlm-active .qlm-link-btn {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.qlm-container.qlm-active .qlm-links-wrapper {
    pointer-events: auto;
}

/* 1. Vertical Expansion Stack */
.qlm-anim-vertical .qlm-links-wrapper {
    bottom: 0;
    flex-direction: column-reverse;
}

.qlm-container.qlm-active.qlm-anim-vertical .qlm-link-btn {
    /* Position each link above the trigger */
    transform: translateY(calc(-65px - (52px * var(--link-index))));
}

/* 2. Horizontal Expansion Row */
.qlm-anim-horizontal.qlm-bottom-right .qlm-links-wrapper {
    right: 0;
}
.qlm-anim-horizontal.qlm-bottom-left .qlm-links-wrapper {
    left: 0;
}

.qlm-container.qlm-active.qlm-anim-horizontal.qlm-bottom-right .qlm-link-btn {
    transform: translateX(calc(-65px - (52px * var(--link-index))));
}

.qlm-container.qlm-active.qlm-anim-horizontal.qlm-bottom-left .qlm-link-btn {
    transform: translateX(calc(65px + (52px * var(--link-index))));
}

/* 3. Radial Expansion Circular Menu */
.qlm-anim-radial.qlm-bottom-right .qlm-link-btn {
    /* Expand in the upper-left quadrant (180 to 270 degrees) */
    --angle: calc(180deg + (90deg / (var(--links-total, 3) - 1)) * var(--link-index));
}

.qlm-anim-radial.qlm-bottom-left .qlm-link-btn {
    /* Expand in the upper-right quadrant (270 to 360 degrees) */
    --angle: calc(270deg + (90deg / (var(--links-total, 3) - 1)) * var(--link-index));
}

.qlm-container.qlm-active.qlm-anim-radial .qlm-link-btn {
    /* Calculate translation using trigonometry or standard offsets dynamically set in JS or pure CSS fallback */
    transform: translate(calc(cos(var(--angle)) * 85px), calc(sin(var(--angle)) * 85px)) scale(1);
}