/*
	This CSS file matches the color scheme from MudBlazor to Bootstrap when utilized for authentication.
	The file remains available at all times for demonstration purposes,
	but it is exclusively employed in the 'App.razor' component when authentication is enabled.
*/
html, body {
    height: 100%
}

.btn-primary {
    text-transform: uppercase;
    --bs-btn-bg: var(--mud-palette-primary) !important;
    --bs-btn-hover-bg: var(--mud-palette-primary-darken) !important;
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--mud-palette-primary) !important;
}

.nav {
    --bs-nav-link-color: var(--mud-palette-primary) !important;
    --bs-nav-link-hover-color: var(--mud-palette-primary-darken) !important;
}

/*
    Hover elevate

*/
.hover-elevate {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    cursor: pointer;
}

.hover-elevate:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}


/*
    Cookie banner
*/

.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(10px);
    padding: 1rem;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
    transition: opacity 0.3s ease;
}

.cookie-banner-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.cookie-banner-text {
    flex: 1;
    color: white;
    min-width: 250px;
}

.cookie-banner-text strong {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

.cookie-banner-text p {
    margin: 0;
    font-size: 0.9rem;
    opacity: 0.9;
}

.cookie-banner-button {
    background: #FF5722;
    color: white;
    border: none;
    padding: 0.75rem 2rem;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}

    .cookie-banner-button:hover {
        background: #FFAB91;
    }

@media (max-width: 600px) {
    .cookie-banner-content {
        flex-direction: column;
        align-items: stretch;
    }

    .cookie-banner-button {
        width: 100%;
    }
}