/*
 * my-modal-web-component.css
 *
 * This file can be used for global styles that affect the Web Component
 * or for overriding default styles if needed.
 */

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .modal-content {
        width: 90%;
        max-width: 90%;
        margin: 0 5%; /* Center with some side padding */
    }
}

/* Responsive adjustments for larger screens */
@media (min-width: 769px) {
    .modal-content {
        width: auto; /* Allow content to dictate width */
        min-width: 300px; /* Minimum width for desktop */
        max-width: 600px; /* Maximum width for desktop */
    }
}

/* Fixed position for the modal trigger button */
.my-modal-fixed-trigger {
    position: fixed;
    bottom: 20px; /* Adjust as needed */
    left: 20px; /* Adjust as needed */
    z-index: 999; /* Ensure it's above other content */
    width: 50px; /* Make it square for a perfect circle */
    height: 50px; /* Make it square for a perfect circle */
    padding: 0; /* Remove padding for circular shape */
    background-color: #0073aa; /* WordPress blue */
    color: white;
    border: none;
    border-radius: 50%; /* Make it circular */
    cursor: pointer;
    display: flex; /* For centering the '?' */
    justify-content: center; /* For centering the '?' */
    align-items: center; /* For centering the '?' */
    font-size: 1.5em; /* Larger '?' */
    box-shadow: 0 0 5px rgba(0,0,0,0.2); /* Initial shadow */
    animation: sparkle 2s infinite alternate; /* Sparkling animation */
}

.my-modal-fixed-trigger:hover {
    background-color: #005177;
}

@keyframes sparkle {
    0% {
        box-shadow: 0 0 5px rgba(0,0,0,0.2), 0 0 0 0 rgba(0,115,170,0.4);
    }
    50% {
        box-shadow: 0 0 15px rgba(0,0,0,0.4), 0 0 0 10px rgba(0,115,170,0.2);
    }
    100% {
        box-shadow: 0 0 5px rgba(0,0,0,0.2), 0 0 0 0 rgba(0,115,170,0.4);
    }
}