/**
 * 基督教主题祷告按钮样式 - 无语法错误版本
 * Christian Theme Prayer Button Styles - Clean Version
 */

/* 主要祷告按钮样式 */
.bab-verse-bg .bab-prayer-button {
    background: linear-gradient(135deg, rgba(75, 85, 160, 0.92) 0%, rgba(106, 90, 205, 0.88) 50%, rgba(72, 61, 139, 0.92) 100%) !important;
    color: #ffffff !important;
    border: 2px solid rgba(255, 215, 0, 0.3) !important;
    border-radius: 28px !important;
    padding: 10px 20px !important;
    font-size: 1.0em !important;
    font-weight: 600 !important;
    font-family: 'EB Garamond', serif !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    margin: 1.5em auto 0 auto !important;
    max-width: none !important;
    min-width: 100px !important;
    box-shadow: 0 4px 15px rgba(75, 85, 160, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(8px) !important;
    position: relative !important;
    z-index: 1 !important;
}

/* 悬停状态 */
.bab-verse-bg .bab-prayer-button:hover {
    background: linear-gradient(135deg, rgba(85, 95, 180, 0.95) 0%, rgba(126, 110, 225, 0.92) 50%, rgba(92, 81, 159, 0.95) 100%) !important;
    border-color: rgba(255, 215, 0, 0.6) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(75, 85, 160, 0.5), 0 3px 12px rgba(0, 0, 0, 0.3), 0 0 20px rgba(255, 215, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

/* 点击状态 */
.bab-verse-bg .bab-prayer-button:active {
    background: linear-gradient(135deg, rgba(65, 75, 150, 0.98) 0%, rgba(96, 80, 195, 0.95) 50%, rgba(62, 51, 129, 0.98) 100%) !important;
    border-color: rgba(255, 215, 0, 0.8) !important;
    transform: translateY(1px) !important;
    box-shadow: 0 2px 8px rgba(75, 85, 160, 0.6), 0 1px 4px rgba(0, 0, 0, 0.4), inset 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

/* 祷告状态 */
.bab-verse-bg .bab-prayer-button.praying {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.95) 0%, rgba(255, 193, 7, 0.92) 50%, rgba(218, 165, 32, 0.95) 100%) !important;
    color: rgba(75, 85, 160, 1) !important;
    border-color: rgba(255, 255, 255, 0.8) !important;
    animation: christianPrayerGlow 1.5s ease-in-out infinite !important;
}

/* 基督教主题祷告光辉动画 */
@keyframes christianPrayerGlow {
    0%, 100% { 
        box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2), 0 0 20px rgba(255, 215, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
        transform: scale(1) !important;
    }
    50% { 
        box-shadow: 0 8px 30px rgba(255, 215, 0, 0.6), 0 4px 15px rgba(255, 193, 7, 0.5), 0 0 40px rgba(255, 215, 0, 0.5), 0 0 60px rgba(255, 255, 255, 0.2), inset 0 2px 4px rgba(255, 255, 255, 0.4) !important;
        transform: scale(1.02) !important;
    }
}

/* 祷告按钮图标样式 */
.bab-verse-bg .bab-prayer-button .prayer-icon {
    font-size: 1.2em !important;
    line-height: 1 !important;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)) !important;
    position: relative !important;
}

/* 祷告状态下的图标变化 */
.bab-verse-bg .bab-prayer-button.praying .prayer-icon {
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.8)) !important;
    animation: iconGlow 1.5s ease-in-out infinite !important;
}

@keyframes iconGlow {
    0%, 100% { 
        filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.6)) !important;
    }
    50% { 
        filter: drop-shadow(0 0 12px rgba(255, 215, 0, 1)) !important;
    }
}

/* 震动波纹效果 */
.bab-verse-bg .bab-prayer-button .vibration-waves {
    display: inline-block !important;
    position: relative !important;
    width: 12px !important;
    height: 12px !important;
    margin-left: 3px !important;
}

.bab-verse-bg .bab-prayer-button .vibration-waves::before,
.bab-verse-bg .bab-prayer-button .vibration-waves::after {
    content: '' !important;
    position: absolute !important;
    border: 1px solid currentColor !important;
    border-radius: 50% !important;
    opacity: 0.6 !important;
}

.bab-verse-bg .bab-prayer-button.praying .vibration-waves::before,
.bab-verse-bg .bab-prayer-button.praying .vibration-waves::after {
    border-color: rgba(255, 215, 0, 0.8) !important;
    animation: christianWaveExpand 1.5s infinite ease-out !important;
}

.bab-verse-bg .bab-prayer-button .vibration-waves::before {
    width: 8px !important;
    height: 8px !important;
    top: 2px !important;
    left: 2px !important;
}

.bab-verse-bg .bab-prayer-button .vibration-waves::after {
    width: 12px !important;
    height: 12px !important;
    top: 0 !important;
    left: 0 !important;
    animation-delay: 0.3s !important;
}

@keyframes christianWaveExpand {
    0% {
        transform: scale(0.5) !important;
        opacity: 0.8 !important;
        border-color: rgba(255, 215, 0, 0.8) !important;
    }
    50% {
        border-color: rgba(255, 255, 255, 0.6) !important;
    }
    100% {
        transform: scale(1.8) !important;
        opacity: 0 !important;
        border-color: rgba(255, 215, 0, 0) !important;
    }
}

/* 移动端调整 */
@media (max-width: 600px) {
    .bab-verse-bg .bab-prayer-button {
        font-size: 1.4em !important;
        padding: 12px 24px !important;
        margin-top: 5.0em !important;
        min-width: 120px !important;
        gap: 8px !important;
        border-radius: 30px !important;
    }
    
    .bab-verse-bg .bab-prayer-button .vibration-waves {
        width: 10px !important;
        height: 10px !important;
        margin-left: 2px !important;
    }
}

/* 平板端调整 */
@media (min-width: 601px) and (max-width: 900px) {
    .bab-verse-bg .bab-prayer-button {
        font-size: 1.0em !important;
        padding: 9px 22px !important;
        margin-top: 1.4em !important;
        min-width: 95px !important;
        border-radius: 26px !important;
    }
}

/* Tooltip样式 */
.bab-verse-bg .bab-prayer-button::after {
    content: '🙏 Vibrates "AMEN" in Morse Code' !important;
    position: absolute !important;
    bottom: -40px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: linear-gradient(135deg, rgba(75, 85, 160, 0.95) 0%, rgba(72, 61, 139, 0.95) 100%) !important;
    color: white !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    font-size: 0.7em !important;
    white-space: nowrap !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease !important;
    z-index: 1001 !important;
    border: 1px solid rgba(255, 215, 0, 0.3) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.bab-verse-bg .bab-prayer-button:hover::after {
    opacity: 1 !important;
}

/* 祷告文本样式 */
.bab-verse-bg .bab-prayer-button .prayer-text {
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
}

.bab-verse-bg .bab-prayer-button.praying .prayer-text {
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.8) !important;
}

/* 震动模拟动画 - 用于设备不支持真实震动时的替代方案 */
@keyframes prayer-vibrate {
    0%, 100% { 
        transform: translateX(0) !important; 
    }
    10% { 
        transform: translateX(-1px) !important; 
    }
    20% { 
        transform: translateX(1px) !important; 
    }
    30% { 
        transform: translateX(-1px) !important; 
    }
    40% { 
        transform: translateX(1px) !important; 
    }
    50% { 
        transform: translateX(-1px) !important; 
    }
    60% { 
        transform: translateX(1px) !important; 
    }
    70% { 
        transform: translateX(-1px) !important; 
    }
    80% { 
        transform: translateX(1px) !important; 
    }
    90% { 
        transform: translateX(-1px) !important; 
    }
}

/* 震动模拟状态下的按钮特殊样式 */
.bab-verse-bg .bab-prayer-button.vibrating {
    animation: prayer-vibrate 150ms ease-in-out infinite !important;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.6), 0 0 30px rgba(255, 215, 0, 0.4) !important;
}

/* 增强的视觉反馈动画 - 用于不支持震动的设备 */
@keyframes prayer-feedback-flash {
    0%, 100% { 
        box-shadow: 0 4px 15px rgba(75, 85, 160, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2) !important;
        border-color: rgba(255, 215, 0, 0.3) !important;
    }
    25% { 
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.8), 0 0 40px rgba(255, 215, 0, 0.6), 0 0 60px rgba(255, 215, 0, 0.4) !important;
        border-color: rgba(255, 215, 0, 0.9) !important;
    }
    50% { 
        box-shadow: 0 0 30px rgba(255, 255, 255, 0.8), 0 0 50px rgba(255, 255, 255, 0.6), 0 0 80px rgba(255, 215, 0, 0.5) !important;
        border-color: rgba(255, 255, 255, 0.8) !important;
    }
    75% { 
        box-shadow: 0 0 25px rgba(255, 215, 0, 0.9), 0 0 45px rgba(255, 215, 0, 0.7), 0 0 70px rgba(255, 215, 0, 0.5) !important;
        border-color: rgba(255, 215, 0, 1) !important;
    }
}

.bab-verse-bg .bab-prayer-button.feedback-flash {
    animation: prayer-feedback-flash 200ms ease-in-out !important;
}

/* 桌面设备提示样式 - 极简紧凑一行，浮在按钮下方 */
.bab-verse-bg .bab-prayer-button.desktop-device::after {
    display: none !important;
    content: none !important;
}

/* 成功状态指示器 */
.bab-verse-bg .bab-prayer-button.vibration-success {
    border-color: rgba(76, 175, 80, 0.8) !important;
    box-shadow: 0 0 15px rgba(76, 175, 80, 0.4) !important;
}

.bab-verse-bg .bab-prayer-button.vibration-success::before {
    content: '✅' !important;
    position: absolute !important;
    top: -8px !important;
    right: -8px !important;
    background: rgba(76, 175, 80, 1) !important;
    color: white !important;
    border-radius: 50% !important;
    width: 20px !important;
    height: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    z-index: 1002 !important;
}

/* 失败状态指示器 */
.bab-verse-bg .bab-prayer-button.vibration-failed {
    border-color: rgba(244, 67, 54, 0.6) !important;
    box-shadow: 0 0 15px rgba(244, 67, 54, 0.3) !important;
}

.bab-verse-bg .bab-prayer-button.vibration-failed::before {
    content: '❌' !important;
    position: absolute !important;
    top: -8px !important;
    right: -8px !important;
    background: rgba(244, 67, 54, 1) !important;
    color: white !important;
    border-radius: 50% !important;
    width: 20px !important;
    height: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    z-index: 1002 !important;
}

/* 移除安卓/iOS提示内容伪元素样式 */
.bab-verse-bg .bab-prayer-button.ios-device::after,
.bab-verse-bg .bab-prayer-button.android-device::after {
    display: none !important;
    content: none !important;
}