/* ============================================================ Breadcrumb — Frontend Theme (Bootstrap 5, LTR + RTL) Brand color: #F01543 ============================================================ */ /* Container nav — light tinted strip that frames the trail */ nav[aria-label="breadcrumb"] { display: inline-flex; background: #fff8f9; border-radius: 6px; padding: 0.4rem 0.75rem; } /* Reset Bootstrap 5 list styles */ .breadcrumb { margin-bottom: 0; padding: 0; background: transparent; flex-wrap: wrap; } /* Chevron separator — direct content override beats Bootstrap 5's Sass-compiled var(--bs-breadcrumb-divider, quote("/")) */ .breadcrumb-item + .breadcrumb-item::before { content: "›"; color: #F01543; font-size: 1.05rem; font-weight: 700; padding-right: 0.45rem; } /* Ancestor links — muted, brand color on hover */ .breadcrumb-item a { color: #6c757d; text-decoration: none; transition: color 0.2s ease; } .breadcrumb-item a:hover, .breadcrumb-item a:focus { color: #F01543; text-decoration: underline; } /* Active (current page) — distinct brand color */ .breadcrumb-item.active { color: #F01543; font-weight: 600; } /* ============================================================ RTL override — flip chevron direction for Arabic layout The attribute is already set by the layout. ============================================================ */ [dir="rtl"] .breadcrumb-item + .breadcrumb-item::before { content: "‹"; }