/* ============================================================
   breadcrumb.css - مسیر راهنمای مدرن
   کاملاً هماهنگ با پالت رنگی و متغیرهای متمرکز
   ============================================================ */

.breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--gap-sm) var(--gap-base);
    padding: var(--padding-lg) var(--padding-lg);
    margin: 0 0 var(--margin-xl) 0;
    background: linear-gradient(135deg, var(--color-bg-light) 0%, var(--color-bg-hover) 100%);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-light);
    list-style: none;
    font-family: var(--font-family-primary);
    width: 100%;
    box-sizing: border-box;
    box-shadow: var(--shadow-xs);
    transition: all var(--transition-base);
    min-height: var(--height-xl);
}

.breadcrumb:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--color-border-medium);
}

.breadcrumb li {
    display: inline-flex;
    align-items: center;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    position: relative;
}

.breadcrumb li:not(:last-child):not(:first-child)::after {
    content: '\f104';
    font-family: var(--font-family-icons, FontAwesome);
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
    margin: 0 var(--margin-sm);
    transition: color var(--transition-base);
}

.breadcrumb li:not(:last-child):not(:first-child):hover::after {
    color: var(--color-primary);
}

.breadcrumb li:first-child::after,
.breadcrumb li:last-child::after {
    display: none !important;
}

.breadcrumb li a {
    color: var(--color-text-secondary);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    transition: all var(--transition-base);
    font-size: var(--font-size-sm);
    padding: var(--padding-xs) var(--padding-base);
    border-radius: var(--radius-md);
    position: relative;
}

.breadcrumb li a:hover {
    color: var(--color-primary);
    background: var(--color-hover-bg);
    transform: translateX(-2px);
}

.breadcrumb li:last-child {
    color: var(--color-text-dark);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    padding: var(--padding-xs) var(--padding-base);
    border-radius: var(--radius-md);
    position: relative;
}

.breadcrumb li:last-child::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--color-hover-bg);
    border-radius: var(--radius-md);
    z-index: -1;
}

.breadcrumb li:last-child a {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: var(--font-weight-bold);
    cursor: default;
    pointer-events: none;
    padding: var(--padding-xs) var(--padding-base);
}

.breadcrumb li:first-child a {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
    padding: var(--padding-xs) var(--padding-base);
    background: var(--color-hover-bg);
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
}

.breadcrumb li:first-child a .fa {
    font-size: var(--font-size-base);
    transition: transform var(--transition-base);
}

.breadcrumb li:first-child a:hover {
    background: var(--gradient-primary);
    color: var(--color-text-white);
    transform: translateX(-3px);
    box-shadow: var(--shadow-button);
}

.breadcrumb li:first-child a:hover .fa {
    transform: scale(1.1);
}

@media (max-width: var(--breakpoint-md)) {
    .breadcrumb {
        padding: var(--padding-base) var(--padding-xl);
        margin-bottom: var(--margin-lg);
        gap: var(--gap-xs) var(--gap-md);
        border-radius: var(--radius-base);
        min-height: var(--height-lg);
    }
    .breadcrumb li {
        font-size: var(--font-size-sm);
    }
    .breadcrumb li a {
        font-size: var(--font-size-sm);
        padding: var(--padding-xs) var(--padding-md);
    }
    .breadcrumb li:last-child {
        font-size: var(--font-size-sm);
        padding: var(--padding-xs) var(--padding-md);
    }
    .breadcrumb li:last-child a {
        padding: var(--padding-xs) var(--padding-md);
    }
    .breadcrumb li:not(:last-child):not(:first-child)::after {
        font-size: var(--font-size-xs);
        margin: 0 var(--margin-xs);
    }
    .breadcrumb li:first-child a {
        padding: var(--padding-xs) var(--padding-md);
    }
    .breadcrumb li:first-child a .fa {
        font-size: var(--font-size-sm);
    }
}

@media (max-width: var(--breakpoint-sm)) {
    .breadcrumb {
        padding: var(--padding-md) var(--padding-lg);
        margin-bottom: var(--margin-md);
        gap: var(--gap-xs) var(--gap-sm);
        border-radius: var(--radius-md);
        border: none;
        background: var(--color-bg-light);
        box-shadow: none;
        min-height: var(--height-md);
    }
    .breadcrumb li {
        font-size: var(--font-size-xs);
    }
    .breadcrumb li a {
        font-size: var(--font-size-xs);
        padding: var(--padding-xs) var(--padding-sm);
        border-radius: var(--radius-sm);
    }
    .breadcrumb li:last-child {
        font-size: var(--font-size-xs);
        padding: var(--padding-xs) var(--padding-sm);
    }
    .breadcrumb li:last-child a {
        padding: var(--padding-xs) var(--padding-sm);
        font-size: var(--font-size-xs);
    }
    .breadcrumb li:not(:last-child):not(:first-child)::after {
        font-size: var(--font-size-xs);
        margin: 0 var(--margin-xs);
    }
    .breadcrumb li:first-child a {
        padding: var(--padding-xs) var(--padding-sm);
        border-radius: var(--radius-sm);
    }
    .breadcrumb li:first-child a .fa {
        font-size: var(--font-size-xs);
    }
    .breadcrumb li:first-child a:hover {
        transform: translateX(-2px);
    }
}

@media (max-width: var(--breakpoint-xs)) {
    .breadcrumb {
        padding: var(--padding-sm) var(--padding-base);
        margin-bottom: var(--margin-lg);
        gap: var(--gap-xs) var(--gap-xs);
        border-radius: var(--radius-sm);
        min-height: var(--height-md);
    }
    .breadcrumb li {
        font-size: var(--font-size-xs);
    }
    .breadcrumb li a {
        font-size: var(--font-size-xs);
        padding: var(--padding-xs) var(--padding-xs);
    }
    .breadcrumb li:last-child {
        font-size: var(--font-size-xs);
        padding: var(--padding-xs) var(--padding-xs);
    }
    .breadcrumb li:last-child a {
        padding: var(--padding-xs) var(--padding-xs);
        font-size: var(--font-size-xs);
    }
    .breadcrumb li:not(:last-child):not(:first-child)::after {
        font-size: var(--font-size-xs);
        margin: 0 var(--margin-xs);
    }
    .breadcrumb li:first-child a {
        padding: var(--padding-xs) var(--padding-xs);
    }
    .breadcrumb li:first-child a .fa {
        font-size: var(--font-size-xs);
    }
}