/* Cookie Consent Popup Styles */

/* Main popup container enhancements */
#cookie-consent {
    box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1), 0 -2px 4px -1px rgba(0, 0, 0, 0.06);
    z-index: 9999;
}

/* Smooth animation for the popup */
#cookie-consent .transition-transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

/* Backdrop blur enhancement */
#cookie-consent .backdrop-blur-sm {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Button hover enhancements */
#cookie-accept:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
}

#cookie-decline:hover {
    transform: translateY(-1px);
}

#cookie-close:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}

/* Mobile-specific adjustments */
@media (max-width: 640px) {
    #cookie-consent .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    #cookie-consent p {
        margin-bottom: 1rem;
    }
    
    #cookie-consent .flex-col {
        gap: 1rem;
    }
}

/* Stack buttons vertically on very small screens */
@media (max-width: 480px) {
    #cookie-consent .flex.items-center.gap-3 {
        flex-direction: column;
        width: 100%;
    }
    
    #cookie-consent button {
        width: 100%;
        justify-content: center;
    }
    
    #cookie-close {
        width: auto !important;
        align-self: flex-end;
    }
}

/* Focus styles for accessibility */
#cookie-consent button:focus {
    outline: 2px solid rgba(59, 130, 246, 0.5);
    outline-offset: 2px;
}

/* Animation keyframes for subtle entrance effect */
@keyframes slideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Apply animation when popup becomes visible */
#cookie-consent.translate-y-0 {
    animation: slideUp 0.3s ease-out;
}

/* Link styling within the popup */
#cookie-consent a {
    transition: all 0.2s ease;
}

#cookie-consent a:hover {
    text-decoration-color: rgba(96, 165, 250, 0.8);
}

/* Ensure proper spacing and layout */
#cookie-consent .container {
    max-width: 1200px;
}

/* Responsive text sizing */
@media (max-width: 768px) {
    #cookie-consent p {
        font-size: 0.875rem;
        line-height: 1.25rem;
    }
}