/* ----------------------------------------------
   Cookie Popup Container
---------------------------------------------- */

/**
 * Styles for the main cookie popup container.
 * Positioned fixed at the bottom of the screen, spanning full width.
 */
 .cookie-popup {
    position: fixed; /* Fixed position at the bottom of the viewport */
    bottom: 0; /* Align to the bottom */
    left: 0; /* Align to the left edge */
    right: 0; /* Align to the right edge */
    background-color: #ffffff; /* Dark background for contrast */
    border-top: 1px solid #ccc; /* Subtle border at the top */
    padding: 20px; /* Comfortable spacing */
    display: none; /* Hidden by default */
    z-index: 1000; /* High z-index to ensure visibility over other elements */
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); /* Add a shadow for depth */
}

/* ----------------------------------------------
   Cookie Popup Content
---------------------------------------------- */

/**
 * Center-align the content inside the cookie popup.
 */
.cookie-popup-content {
    text-align: center; /* Center the text and elements inside */
}

/* ----------------------------------------------
   Cookie Popup Buttons
---------------------------------------------- */

/**
 * Base styles for the buttons in the cookie popup.
 * Styled to appear prominent with a red background and white text.
 */
.cookie-popup button {
    margin: 5px; /* Add spacing between buttons */
    padding: 10px 20px; /* Comfortable button size */
    border: none; /* Remove default borders */
    background-color: #bb3430; /* Red background for emphasis */
    color: white; /* White text for contrast */
    cursor: pointer; /* Pointer cursor to indicate interactivity */
}

/**
 * Hover effect for buttons.
 * Changes the background color to a lighter gray for feedback.
 */
.cookie-popup button:hover {
    background-color: #999999; /* Light gray background on hover */
}