/* Overlay for the modal, covers the whole screen */
.cookie-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent dark background */
    display: flex; /* Use flexbox to center the content */
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Ensure it's on top of other content */
}

/* Cookie consent box styling */
.cookie-consent-box {
    background-color: #ffffff; /* White background */
    padding: 24px;
    border-radius: 12px; /* Rounded corners */
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    max-width: 500px; /* Max width for larger screens */
    width: 95%; /* Responsive width */
    text-align: center;
    position: relative; /* Needed for positioning close button if added */
    overflow-y: auto; /* Enable scrolling for content if it overflows */
    max-height: 90vh; /* Limit height to prevent overflow on very small screens */
}

/* Heading style */
.cookie-consent-box h2 {
    font-size: 1.75rem; /* Larger font size for heading */
    font-weight: 700; /* Bold font */
    color: #1f2937; /* Dark gray text */
    margin-bottom: 16px;
}

/* Paragraph text style */
.cookie-consent-box p {
    font-size: 1.2rem;
    color: #4b5563; /* Medium gray text */
    line-height: 1.6;
    margin-bottom: 24px;
}

/* Link style */
.cookie-consent-box a {
    color: #2563eb; /* Blue link color */
    text-decoration: underline;
}

/* Button container for alignment */
.button-container {
    display: flex;
    flex-direction: column; /* Stack buttons on small screens */
    gap: 12px; /* Space between buttons */
    margin-top: 24px;
}

/* Button styles */
.button-container button {
    padding: 12px 24px;
    border-radius: 8px; /* Slightly rounded buttons */
    font-size: 1.2rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s, box-shadow 0.2s;
}

/* Accept button specific style */
.button-container .accept-btn {
    background-color: #22c55e; /* Green background */
    color: #ffffff; /* White text */
    border: none;
}

.button-container .accept-btn:hover {
    background-color: #16a34a; /* Darker green on hover */
    box-shadow: 0 4px 6px rgba(34, 197, 94, 0.2); /* Green shadow on hover */
}

/* Decline button specific style */
.button-container .decline-btn {
    background-color: #ef4444; /* Red background */
    color: #ffffff; /* White text */
    border: none;
}

.button-container .decline-btn:hover {
    background-color: #dc2626; /* Darker red on hover */
    box-shadow: 0 4px 6px rgba(239, 68, 68, 0.2); /* Red shadow on hover */
}

/* Media query for larger screens to place buttons side-by-side */
@media (min-width: 640px) {
    .button-container {
        flex-direction: row; /* Buttons side-by-side on larger screens */
        justify-content: center; /* Center buttons */
    }
}