/* ----------------------------------------------
   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: #262627; /* 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 */
    color: white; /* Make text color white for readability */
}

/* ----------------------------------------------
   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 Links
---------------------------------------------- */

/**
 * Styles for links inside the cookie popup.
 * Styled with dark green for better visibility and a button-like appearance.
 */
.cookie-popup a {
    color: #3c6e47; /* Dark green for link text */
    text-decoration: none; /* Remove underline for cleaner appearance */
    font-weight: bold; /* Make links more prominent */
}

/**
 * Hover effect for links inside the cookie popup.
 * Adds an underline for feedback.
 */
.cookie-popup a:hover {
    text-decoration: underline; /* Underline on hover for emphasis */
}

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

/**
 * Base styles for the buttons in the cookie popup.
 * Styled to appear prominent with dark gray text to match the site theme.
 */
.cookie-popup button {
    margin: 5px; /* Add spacing between buttons */
    padding: 10px 20px; /* Comfortable button size */
    border: none; /* Remove default borders */
    background-color: #D5E6B7; /* Light green background to complement the theme */
    color: #262627; /* Dark gray text to match the background */
    cursor: pointer; /* Pointer cursor to indicate interactivity */
    font-weight: bold; /* Emphasize button text */
}

/**
 * Hover effect for buttons.
 * Changes the background color to a darker green for feedback.
 */
.cookie-popup button:hover {
    background-color: #3c6e47; /* Dark green for hover effect */
    color: white; /* White text for better contrast on hover */
}