/**
 * Web Stories Close Button Overlay Styles
 */

.ws-custom-close-button {
    position: absolute; /* Position relative to the container */
    top: 15px;          /* Space from the top */
    right: 15px;         /* Space from the right */
    z-index: 99999;     /* Ensure it's on top */
    background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent black background */
    color: white;       /* White 'X' */
    border: none;
    border-radius: 50%; /* Make it circular */
    width: 40px;        /* Fixed width */
    height: 40px;       /* Fixed height */
    font-size: 24px;    /* Size of the 'X' */
    line-height: 38px;  /* Center the 'X' vertically */
    text-align: center; /* Center the 'X' horizontally */
    cursor: pointer;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3); /* Subtle shadow */
    transition: background-color 0.2s ease; /* Smooth hover effect */
    padding: 0; /* Remove default padding */
    font-family: Arial, sans-serif; /* Use a common font */
}

.ws-custom-close-button:hover {
    background-color: rgba(0, 0, 0, 0.8); /* Darken on hover */
}

.ws-custom-close-button:active {
    background-color: rgba(0, 0, 0, 0.9); /* Darken further on click */
    transform: scale(0.95); /* Slight shrink effect on click */
}

/* Ensure the parent container can hold the absolutely positioned button */
/* You might need to adjust the selector based on your actual player container */
.web-stories-player, amp-story-player {
    position: relative !important; /* Important might be needed to override other styles */
}