/* Cookie Consent Footer Banner - Premium Design */
.cookie-consent-footer {
    display: none; /* Hidden by default, JS will control this */
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #000000; /* A deep, slightly desaturated blue-grey */
    color: #e2e8f0; /* A light, soft grey for text */
    padding: 20px 30px; /* Slightly more padding */
    box-shadow: 0 -3px 20px rgba(0,0,0,0.1); /* Softer, more diffused shadow */
    z-index: 1050; /* Ensure it's above most other content */
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px; /* Increased gap */
    font-size: 15px; /* Slightly larger base font size */
    border-top: 1px solid #4a5568; /* Subtle top border */
    transform: translateY(100%); /* Initial position for slide-up */
    opacity: 0; /* Initial opacity for fade-in part of animation */
    /* Smooth transition for showing/hiding */
    transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.cookie-consent-footer.visible {
display: flex; /* Make it visible and a flex container */
transform: translateY(0); /* Slide into view */
opacity: 1; /* Fade into view */
/* If you prefer a keyframe animation for appearance, you can add it here: */
 animation: slideUpSmooth 0.6s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}


@keyframes slideUpSmooth {
from {
transform: translateY(100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}


.cookie-consent-text {
flex-grow: 1;
margin: 0;
line-height: 1.7; /* Increased line height for readability */
}

.cookie-consent-link {
color: #63b3ed; /* A clear, accessible blue for links */
text-decoration: none;
border-bottom: 1px solid transparent; /* Prepare for hover effect */
transition: color 0.2s ease, border-bottom-color 0.2s ease;
margin-left: 8px;
}

.cookie-consent-link:hover,
.cookie-consent-link:focus {
color: #90cdf4; /* Lighter blue on hover */
border-bottom-color: #90cdf4;
outline: none; /* Consistent focus styling */
}

.cookie-consent-buttons {
display: flex;
gap: 12px; /* Adjusted gap */
flex-shrink: 0;
}

.cookie-btn {
border: 1px solid transparent; /* Base border */
padding: 10px 22px; /* Adjusted padding */
border-radius: 6px; /* Slightly more rounded */
cursor: pointer;
font-size: 15px;
font-weight: 600; /* Bolder text */
letter-spacing: 0.5px; /* Slight letter spacing */
transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.15s ease;
white-space: nowrap;
line-height: 1.5; /* Ensure consistent button height */
}

.cookie-btn:hover {
transform: translateY(-1px); /* Subtle lift on hover */
}
.cookie-btn:active {
transform: translateY(0px); /* Press down effect */
}
.cookie-btn:focus {
outline: 2px solid #63b3ed; /* Example focus outline, adjust color as needed */
outline-offset: 2px;
}

/* Primary Button (Accept) */
.cookie-btn-accept {
background-color: #38a169; /* A more modern, slightly muted green */
color: white;
border-color: #38a169;
}

.cookie-btn-accept:hover,
.cookie-btn-accept:focus-visible { /* Use focus-visible for keyboard users */
background-color: #2f855a; /* Darker green on hover/focus */
border-color: #2f855a;
}
.cookie-btn-accept:focus { /* Fallback for browsers not supporting focus-visible */
background-color: #2f855a;
border-color: #2f855a;
}

/* Secondary Button (Reject - Ghost style) */
.cookie-btn-reject {
background-color: transparent;
color: #e2e8f0; /* Matches banner text color */
border-color: #4a5568; /* Matches border-top color or slightly lighter */
}

.cookie-btn-reject:hover,
.cookie-btn-reject:focus-visible { /* Use focus-visible for keyboard users */
background-color: rgba(226, 232, 240, 0.1); /* Very subtle background on hover/focus */
color: #fff;
border-color: #718096; /* Slightly more prominent border on hover/focus */
}
.cookie-btn-reject:focus { /* Fallback for browsers not supporting focus-visible */
background-color: rgba(226, 232, 240, 0.1);
color: #fff;
border-color: #718096;
}

/* Responsive adjustments */
@media (max-width: 768px) {
.cookie-consent-footer {
flex-direction: column;
text-align: center;
padding: 25px 20px; /* Adjust padding for mobile */
}
.cookie-consent-footer.visible { /* Ensure flex direction is maintained when visible on mobile */
flex-direction: column;
}
.cookie-consent-text {
margin-bottom: 20px;
}
.cookie-consent-buttons {
justify-content: center;
width: 100%;
gap: 15px;
}
.cookie-btn {
flex-grow: 1; /* Make buttons take equal width */
padding: 12px 15px; /* Adjust padding for full-width buttons */
}
}