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

.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;
}

/* Product description rich HTML styling */
.product-description {
    line-height: 1.7;
    font-size: 0.95rem;
    color: var(--mud-palette-text-primary);
}

.product-description h1,
.product-description h2,
.product-description h3,
.product-description h4,
.product-description h5,
.product-description h6 {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.product-description p {
    margin-bottom: 0.75rem;
}

.product-description ul,
.product-description ol {
    padding-left: 1.5rem;
    margin-bottom: 0.75rem;
}

.product-description img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

.product-description table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
}

.product-description table td,
.product-description table th {
    border: 1px solid var(--mud-palette-lines-default);
    padding: 0.5rem;
}