/* WP Floating Button - 前端样式 */

/* 按钮组容器 */
.wpfb-buttons-group {
    position: fixed;
    z-index: 99999;
    display: flex;
    gap: 0; /* 间隔由 JavaScript 动态设置 */
}

/* 垂直排列 */
.wpfb-buttons-group.wpfb-layout-vertical {
    flex-direction: column;
}

/* 水平排列 */
.wpfb-buttons-group.wpfb-layout-horizontal {
    flex-direction: row;
}

/* 组中的按钮 */
.wpfb-buttons-group .wpfb-button {
    position: relative;
    margin: 0;
}

/* 按钮容器（无组按钮） */
.wpfb-buttons-container {
    position: fixed;
    z-index: 99999;
}

/* 基础按钮样式 */
.wpfb-button {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    z-index: 99999;
    overflow: hidden;
}

.wpfb-button:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    text-decoration: none;
    transform: translateY(-2px);
}

.wpfb-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* 按钮图标 */
.wpfb-button-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.wpfb-button-icon i {
    display: block;
    line-height: 1;
}

.wpfb-button-icon img {
    display: block;
    object-fit: contain;
}

/* SVG 图标 */
.wpfb-svg-container {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

.wpfb-svg-icon {
    width: 100%;
    height: 100%;
    display: block;
}

.wpfb-svg-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* SVG 继承按钮颜色 - 主要规则 */
.wpfb-button .wpfb-svg-container svg {
    fill: currentColor;
}

/* SVG 内部元素也继承颜色 */
.wpfb-button .wpfb-svg-container svg path,
.wpfb-button .wpfb-svg-container svg circle,
.wpfb-button .wpfb-svg-container svg rect,
.wpfb-button .wpfb-svg-container svg polygon,
.wpfb-button .wpfb-svg-container svg polyline,
.wpfb-button .wpfb-svg-container svg line,
.wpfb-button .wpfb-svg-container svg ellipse,
.wpfb-button .wpfb-svg-container svg g {
    fill: currentColor;
}

/* 对于有 stroke 的 SVG 元素 */
.wpfb-button .wpfb-svg-container svg[stroke]:not([stroke="none"]),
.wpfb-button .wpfb-svg-container svg path[stroke]:not([stroke="none"]),
.wpfb-button .wpfb-svg-container svg circle[stroke]:not([stroke="none"]),
.wpfb-button .wpfb-svg-container svg line[stroke]:not([stroke="none"]) {
    stroke: currentColor;
}

.wpfb-emoji {
    display: block;
    line-height: 1;
}

/* 按钮形状 */
.wpfb-shape-circle {
    border-radius: 50%;
}

.wpfb-shape-square {
    border-radius: 0;
}

.wpfb-shape-rounded {
    border-radius: 12px;
}

/* 工具提示 */
.wpfb-tooltip {
    position: absolute;
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 14px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    pointer-events: none;
    z-index: 100000;
}

.wpfb-tooltip::after {
    content: '';
    position: absolute;
    border: 6px solid transparent;
}

.wpfb-tooltip-left {
    right: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
}

.wpfb-tooltip-left::after {
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    border-left-color: rgba(0, 0, 0, 0.85);
}

.wpfb-tooltip-right {
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
}

.wpfb-tooltip-right::after {
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    border-right-color: rgba(0, 0, 0, 0.85);
}

.wpfb-tooltip-top {
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
}

.wpfb-tooltip-top::after {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-top-color: rgba(0, 0, 0, 0.85);
}

.wpfb-tooltip-bottom {
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
}

.wpfb-tooltip-bottom::after {
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-bottom-color: rgba(0, 0, 0, 0.85);
}

.wpfb-button:hover .wpfb-tooltip {
    opacity: 1;
    visibility: visible;
}

/* 入场动画 */
.wpfb-animation-fade-in {
    animation: wpfb-fadeIn 0.5s ease;
}

@keyframes wpfb-fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.wpfb-animation-slide-in {
    animation: wpfb-slideIn 0.5s ease;
}

@keyframes wpfb-slideIn {
    from {
        transform: translateX(100px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.wpfb-animation-bounce-in {
    animation: wpfb-bounceIn 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes wpfb-bounceIn {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.wpfb-animation-zoom-in {
    animation: wpfb-zoomIn 0.5s ease;
}

@keyframes wpfb-zoomIn {
    from {
        transform: scale(0);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* 悬停动画 */
.wpfb-hover-pulse:hover .wpfb-button-icon {
    animation: wpfb-pulse 0.5s ease;
}

@keyframes wpfb-pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

.wpfb-hover-shake:hover .wpfb-button-icon {
    animation: wpfb-shake 0.5s ease;
}

@keyframes wpfb-shake {
    0%, 100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-5px);
    }
    75% {
        transform: translateX(5px);
    }
}

.wpfb-hover-rotate:hover .wpfb-button-icon {
    animation: wpfb-rotate 0.5s ease;
}

@keyframes wpfb-rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.wpfb-hover-grow:hover {
    transform: scale(1.1);
}

/* 滚动触发 - 初始隐藏 */
.wpfb-scroll-trigger {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.wpfb-scroll-trigger.wpfb-visible {
    opacity: 1;
    visibility: visible;
}

/* 返回顶部按钮 - 到顶隐藏功能 */
.wpfb-button[data-hide-at-top="true"] {
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease;
}

.wpfb-button[data-hide-at-top="true"].wpfb-visible-scroll {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* 响应式设计 */
@media screen and (max-width: 768px) {
    .wpfb-button {
        width: 50px !important;
        height: 50px !important;
    }
    
    .wpfb-button-icon {
        font-size: 20px;
    }
    
    .wpfb-tooltip {
        display: none; /* 移动端隐藏工具提示 */
    }
}

@media screen and (max-width: 480px) {
    .wpfb-button {
        width: 45px !important;
        height: 45px !important;
    }
    
    .wpfb-button-icon {
        font-size: 18px;
    }
}

/* 可访问性 */
.wpfb-button:focus {
    outline: 2px solid #0073aa;
    outline-offset: 2px;
}

/* 触发器模态窗口样式 */
.wpfb-modal-active {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
}

.wpfb-modal-active > * {
    position: relative;
    max-width: 90%;
    max-height: 90%;
    overflow: auto;
}

/* 打印时隐藏 */
@media print {
    .wpfb-buttons-container,
    .wpfb-button {
        display: none !important;
    }
}