/* Scoped styles for BO Popup */
#bo-popup-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 12px;
    padding: 16px;
    width: 300px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    z-index: 999999;
    color: #333;
    
    /* Default Desktop Animation */
    animation: boFadeIn 0.3s ease-out;
}

/* Positions (Desktop) */
#bo-popup-container.bo-pos-bottom-right { bottom: 20px; right: 20px;box-shadow: 0 0 19px 0 rgb(194, 194, 194); }
#bo-popup-container.bo-pos-bottom-center { left: 50%; right: auto; transform: translateX(-50%); bottom: 20px; }
#bo-popup-container.bo-pos-center { left: 50%; top: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%); }

/* Mobile Responsiveness & Fixes */
@media (max-width: 768px) {
    #bo-popup-container { 
        /* Force positioning for mobile */
        left: 50% !important; 
        right: auto !important; 
        top: auto !important;
        bottom: 10px !important; 
        width: 92% !important; 

        /* * FIX: Using translate(-50%, 0) ensures horizontal centering 
         * persists even during animation 
         */
        transform: translate(-50%, 0) !important; 
        
        /* Override desktop animation with mobile-specific one */
        animation: boFadeInMobile 0.3s ease-out !important;
    }
}

/* Inner Content Styling */
.bo-popup-inner { text-align: left; }
#bo-popup-container h4 { margin: 0 0 8px 0; font-size: 16px; font-weight: 700; }
#bo-popup-container p, #bo-popup-message { margin: 0 0 12px 0; font-size: 14px; line-height: 1.5; }

/* Code Input & Copy Section */
.bo-code-row { display: flex; gap: 8px; margin-bottom: 12px; }
#bo-popup-code-input {
    flex: 1;
    border: 1px solid #ccc;
    padding: 6px 10px;
    border-radius: 6px;
    background: #f9f9f9;
    font-weight: bold;
    font-size: 14px;
    width: 100%;
}

#bo-popup-copy-btn, #bo-popup-close-btn {
    cursor: pointer;
    border-radius: 6px;
    font-size: 13px;
    padding: 8px 12px;
    border: none;
    transition: opacity 0.2s;
}

#bo-popup-copy-btn { background: #41573a; color: #fff; }
#bo-popup-close-btn { width: 100%; background: #000000; color: #fff; }

#bo-popup-copy-btn:hover, #bo-popup-close-btn:hover { opacity: 0.85; }

/* --- Animations --- */

/* 1. Default Desktop Animation (Bottom Right/Left) */
@keyframes boFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 2. Center Position Animation Fix (Desktop) */
#bo-popup-container.bo-pos-center { animation: boFadeInCenter 0.3s ease-out; }
@keyframes boFadeInCenter {
    from { opacity: 0; transform: translate(-50%, -40%); }
    to { opacity: 1; transform: translate(-50%, -50%); }
}

/* 3. Mobile Animation Fix (Prevents Jumping) */
@keyframes boFadeInMobile {
    from { 
        opacity: 0; 
        /* Start slightly lower, keep horizontal center */
        transform: translate(-50%, 10px); 
    }
    to { 
        opacity: 1; 
        /* End at natural position, keep horizontal center */
        transform: translate(-50%, 0); 
    }
}