/* ========== Breadcrumb Navigation Component Styles ========== */

.breadcrumb-section {
    padding: var(--spacing-md) 0;
    background: var(--light-secondary);
    border-bottom: 1px solid var(--border-color);
}

.common-breadcrumb .breadcrumb {
    margin-bottom: 0;
    background: transparent;
    padding: 0;
    font-size: 0.875rem;
}

.common-breadcrumb .breadcrumb-item {
    color: var(--text-secondary);
}

.common-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    content: ">";
    color: var(--text-muted);
    padding: 0 var(--spacing-sm);
    font-weight: normal;
}

.common-breadcrumb .breadcrumb-item a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: var(--transition);
}

.common-breadcrumb .breadcrumb-item a:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

.common-breadcrumb .breadcrumb-item span {
    color: var(--text-secondary);
}

.common-breadcrumb .breadcrumb-item.active {
    color: var(--text-primary);
    font-weight: 500;
}

.common-breadcrumb .breadcrumb-item.active span {
    color: var(--text-primary);
}

/* Responsive Design */
@media (max-width: 767.98px) {
    .breadcrumb-section {
        padding: var(--spacing-sm) 0;
    }

    .common-breadcrumb .breadcrumb {
        font-size: 0.8125rem;
    }

    .common-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
        padding: 0 var(--spacing-xs);
    }
}