/* =========================================================================
   TeraMed Custom CSS  — Mobile-First Responsive Design System
   ========================================================================= */

/* ─── 0. GLOBAL TYPOGRAPHY — Font Family Only ─────────────────────────────
   Font  : Inter (loaded via inter.css in ALL layouts)
   Rule  : Only font-family is enforced here.
           All font-size / font-weight / line-height are intentionally left
           to Tailwind utility classes (text-xs, text-sm, font-bold, etc.)
           so every table, card, and panel keeps its original design intact.
   ───────────────────────────────────────────────────────────────────────── */

/* Force Inter on every element across all layouts (admin / vendor / agent / frontend / auth) */
*, *::before, *::after {
    font-family: 'Inter', sans-serif;
}

/* Explicit targets to prevent any browser fallback to serif/monospace */
body, button, input, textarea, select, label, th, td, li, a {
    font-family: 'Inter', sans-serif;
}

/* font-display utility used in blade files — keep Inter */
.font-display {
    font-family: 'Inter', sans-serif !important;
}


/* ─── 1. Base / Typography Utilities ─────────────────────────────────────── */
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

img { max-width: 100%; height: auto; }

/* ── Table thumbnail images: override height:auto so they fill the fixed cell container ── */
.tm-table-container td img[style*="position:absolute"],
.tm-table-container td img.absolute,
td .relative img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
}

/* ─── 1b. UNIFIED TABLE DESIGN — tm-table-container ──────────────────────────
   Single source of truth for ALL tables across admin / vendor / agent panels.
   Usage in blade:  <div class="tm-table-container"> ... <table class="tm-table"> ... </table> </div>
   All old per-page container classes are aliased here so existing blades need no HTML change.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Container wrapper ── */
.tm-table-container,
.product-catalog-container,
.order-catalog-container,
.user-catalog-container,
.prescription-catalog-container,
.prescription-container,
.composition-catalog-container,
.brand-catalog-container,
.category-catalog-container,
.banner-catalog-container,
.delivery-catalog-container,
.logistics-catalog-container,
.message-catalog-container,
.notification-catalog-container,
.notification-container,
.vendor-catalog-container,
.cms-catalog-container,
.pharmacy-container,
.journal-catalog-container {
    background: #fff;
    border: 1px solid #f1f5f9;
    border-radius: 0;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.04), 0 2px 4px -1px rgba(0,0,0,0.02);
    overflow: hidden;
}

/* ── Table element ── */
.tm-table,
.tm-table-container table,
.product-catalog-container table,
.order-catalog-container table,
.user-catalog-container table,
.prescription-catalog-container table,
.composition-catalog-container table,
.brand-catalog-container table,
.category-catalog-container table,
.banner-catalog-container table,
.delivery-catalog-container table,
.logistics-catalog-container table,
.message-catalog-container table,
.notification-catalog-container table,
.vendor-catalog-container table,
.cms-catalog-container table,
.pharmacy-container table,
.journal-catalog-container table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}

/* ── Table head row ── */
.tm-table-container thead tr,
.product-catalog-container thead tr,
.order-catalog-container thead tr,
.user-catalog-container thead tr,
.prescription-catalog-container thead tr,
.composition-catalog-container thead tr,
.brand-catalog-container thead tr,
.category-catalog-container thead tr,
.banner-catalog-container thead tr,
.delivery-catalog-container thead tr,
.logistics-catalog-container thead tr,
.message-catalog-container thead tr,
.notification-catalog-container thead tr,
.vendor-catalog-container thead tr,
.cms-catalog-container thead tr,
.pharmacy-container thead tr,
.journal-catalog-container thead tr {
    background: rgba(248, 250, 252, 0.5);     /* slate-50/50 */
    border-bottom: 1px solid #f1f5f9;          /* slate-100   */
}

/* ── Column header cells ── */
.tm-table-container thead th,
.product-catalog-container thead th,
.order-catalog-container thead th,
.user-catalog-container thead th,
.prescription-catalog-container thead th,
.composition-catalog-container thead th,
.brand-catalog-container thead th,
.category-catalog-container thead th,
.banner-catalog-container thead th,
.delivery-catalog-container thead th,
.logistics-catalog-container thead th,
.message-catalog-container thead th,
.notification-catalog-container thead th,
.vendor-catalog-container thead th,
.cms-catalog-container thead th,
.pharmacy-container thead th,
.journal-catalog-container thead th {
    padding: 0.875rem 1rem;                    /* py-3.5 px-4  */
    text-align: left;
    font-size: 0.625rem;                       /* 10px          */
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #94a3b8;                            /* slate-400     */
    white-space: nowrap;
}

/* ── Body rows — divider + hover ── */
.tm-table-container tbody,
.product-catalog-container tbody,
.order-catalog-container tbody,
.user-catalog-container tbody,
.prescription-catalog-container tbody,
.composition-catalog-container tbody,
.brand-catalog-container tbody,
.category-catalog-container tbody,
.banner-catalog-container tbody,
.delivery-catalog-container tbody,
.logistics-catalog-container tbody,
.message-catalog-container tbody,
.notification-catalog-container tbody,
.vendor-catalog-container tbody,
.cms-catalog-container tbody,
.pharmacy-container tbody,
.journal-catalog-container tbody {
    /* rows separated by very faint line */
}

.tm-table-container tbody tr,
.product-catalog-container tbody tr,
.order-catalog-container tbody tr,
.user-catalog-container tbody tr,
.prescription-catalog-container tbody tr,
.composition-catalog-container tbody tr,
.brand-catalog-container tbody tr,
.category-catalog-container tbody tr,
.banner-catalog-container tbody tr,
.delivery-catalog-container tbody tr,
.logistics-catalog-container tbody tr,
.message-catalog-container tbody tr,
.notification-catalog-container tbody tr,
.vendor-catalog-container tbody tr,
.cms-catalog-container tbody tr,
.pharmacy-container tbody tr,
.journal-catalog-container tbody tr {
    border-bottom: 1px solid #f8fafc;          /* ultra-light divider */
    transition: background-color 0.15s ease;
}

.tm-table-container tbody tr:last-child,
.product-catalog-container tbody tr:last-child,
.order-catalog-container tbody tr:last-child,
.user-catalog-container tbody tr:last-child,
.prescription-catalog-container tbody tr:last-child,
.composition-catalog-container tbody tr:last-child,
.brand-catalog-container tbody tr:last-child,
.category-catalog-container tbody tr:last-child,
.banner-catalog-container tbody tr:last-child,
.delivery-catalog-container tbody tr:last-child,
.logistics-catalog-container tbody tr:last-child,
.message-catalog-container tbody tr:last-child,
.notification-catalog-container tbody tr:last-child,
.vendor-catalog-container tbody tr:last-child,
.cms-catalog-container tbody tr:last-child,
.pharmacy-container tbody tr:last-child,
.journal-catalog-container tbody tr:last-child {
    border-bottom: none;
}

.tm-table-container tbody tr:hover,
.product-catalog-container tbody tr:hover,
.order-catalog-container tbody tr:hover,
.user-catalog-container tbody tr:hover,
.prescription-catalog-container tbody tr:hover,
.composition-catalog-container tbody tr:hover,
.brand-catalog-container tbody tr:hover,
.category-catalog-container tbody tr:hover,
.banner-catalog-container tbody tr:hover,
.delivery-catalog-container tbody tr:hover,
.logistics-catalog-container tbody tr:hover,
.message-catalog-container tbody tr:hover,
.notification-catalog-container tbody tr:hover,
.vendor-catalog-container tbody tr:hover,
.cms-catalog-container tbody tr:hover,
.pharmacy-container tbody tr:hover,
.journal-catalog-container tbody tr:hover {
    background-color: rgba(248, 250, 252, 0.5);  /* slate-50/50 */
}

/* ── Body cells ── */
.tm-table-container tbody td,
.product-catalog-container tbody td,
.order-catalog-container tbody td,
.user-catalog-container tbody td,
.prescription-catalog-container tbody td,
.composition-catalog-container tbody td,
.brand-catalog-container tbody td,
.category-catalog-container tbody td,
.banner-catalog-container tbody td,
.delivery-catalog-container tbody td,
.logistics-catalog-container tbody td,
.message-catalog-container tbody td,
.notification-catalog-container tbody td,
.vendor-catalog-container tbody td,
.cms-catalog-container tbody td,
.pharmacy-container tbody td,
.journal-catalog-container tbody td {
    padding: 0.875rem 1rem;                    /* py-3.5 px-4   */
    vertical-align: middle;
}

/* ── Pagination footer ── */
.tm-table-container .tm-table-footer,
.tm-table-pagination {
    padding: 1rem 1.5rem;
    border-top: 1px solid #f8fafc;
    background: rgba(248, 250, 252, 0.3);
}

/* ── Horizontal scrollbar inside table wrapper ── */
.tm-table-container .overflow-x-auto::-webkit-scrollbar,
.product-catalog-container .overflow-x-auto::-webkit-scrollbar,
.order-catalog-container .overflow-x-auto::-webkit-scrollbar,
.vendor-catalog-container .overflow-x-auto::-webkit-scrollbar {
    height: 5px;
}
.tm-table-container .overflow-x-auto::-webkit-scrollbar-track,
.product-catalog-container .overflow-x-auto::-webkit-scrollbar-track,
.order-catalog-container .overflow-x-auto::-webkit-scrollbar-track,
.vendor-catalog-container .overflow-x-auto::-webkit-scrollbar-track {
    background: #f8fafc;
}
.tm-table-container .overflow-x-auto::-webkit-scrollbar-thumb,
.product-catalog-container .overflow-x-auto::-webkit-scrollbar-thumb,
.order-catalog-container .overflow-x-auto::-webkit-scrollbar-thumb,
.vendor-catalog-container .overflow-x-auto::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 10px;
}
.tm-table-container .overflow-x-auto::-webkit-scrollbar-thumb:hover,
.product-catalog-container .overflow-x-auto::-webkit-scrollbar-thumb:hover,
.order-catalog-container .overflow-x-auto::-webkit-scrollbar-thumb:hover,
.vendor-catalog-container .overflow-x-auto::-webkit-scrollbar-thumb:hover {
    background: #cbd5e1;
}

/* ─── 2. Universal Card / Container Utilities ─────────────────────────────── */
/* NOTE: All catalog/table containers are now defined in section 1b above.    */
/* The .tm-table-container aliases every old class name (product-, order-, etc) */


/* ─── 3. Gradient Button ──────────────────────────────────────────────────── */
.gradient-btn {
    background: linear-gradient(135deg, #6222CC, #F74780);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.gradient-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px rgba(98,34,204,0.4);
}

/* ─── 4. Status Badges ────────────────────────────────────────────────────── */
.status-badge-pending  { background: #fef3c7; color: #d97706; }
.status-badge-approved { background: #dcfce7; color: #15803d; }
.status-badge-rejected { background: #ffe4e6; color: #e11d48; }

/* ─── 5. Scrollbar (custom thin) ─────────────────────────────────────────── */
.custom-scrollbar::-webkit-scrollbar { width: 4px; height: 4px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: 10px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.2); }


/* ═══════════════════════════════════════════════════════════════════════════
   FRONTEND MOBILE RESPONSIVE OVERRIDES
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 6. NAVBAR ──────────────────────────────────────────────────────────── */

/* Hide right-side login/signup buttons on mobile to save space */
@media (max-width: 767px) {
    #tm-nav .btn-tm-ghost,
    #tm-nav .btn-tm-primary {
        display: none !important;
    }
    /* Ensure burger button is always visible */
    #tm-nav [x-text] { display: flex !important; }

    /* The sub-nav row is hidden on mobile; categories are in the burger menu */
    #tm-subnav-row {
        display: none !important;
    }

    /* Reduce header height on mobile */
    :root { --header-h: 64px !important; }
}

/* ─── 7. HERO SECTION ────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    /* Reduce hero padding on small screens */
    section[style*="linear-gradient(120deg,#12003a"] {
        padding: 2rem 0 1.5rem !important;
    }
    /* Hide oversized emoji decorations on mobile */
    section[style*="linear-gradient(120deg,#12003a"] > div:nth-child(3),
    section[style*="linear-gradient(120deg,#12003a"] > div:nth-child(4) {
        display: none !important;
    }
}

/* ─── 8. SERVICE SHORTCUT CARDS ──────────────────────────────────────────── */
.tm-service-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .85rem;
}
@media (max-width: 991px) {
    .tm-service-cards-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: .5rem;
    }
}
@media (max-width: 640px) {
    .tm-service-cards-grid {
        grid-template-columns: 1fr 1fr;
        gap: .65rem;
    }
    .tm-svc-title { font-size: .82rem !important; }
    .tm-svc-sub   { font-size: .6rem !important; }
    .tm-svc-icon  { width: 2.4rem !important; height: 2.4rem !important; }
    .tm-svc-card  { padding: .7rem .75rem !important; gap: .6rem !important; }
}

/* ─── 9. PRODUCT GRID ────────────────────────────────────────────────────── */
.tm-product-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    align-items: stretch;
}
@media (max-width: 1199px) { .tm-product-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 991px)  { .tm-product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .tm-product-grid { grid-template-columns: repeat(2, 1fr); gap: .65rem; } }
@media (max-width: 359px)  { .tm-product-grid { grid-template-columns: 1fr; } }

/* Product card on very small screens */
@media (max-width: 640px) {
    .tm-gp-card    { padding: .7rem; }
    .tm-pg-card    { padding: .7rem; }
    .tm-gp-name    { font-size: .78rem; }
    .tm-gp-price   { font-size: .9rem; }
    .tm-pg-name    { font-size: .78rem; }
    .tm-pg-price   { font-size: .9rem; }
}

/* ─── 10. CATEGORY SECTION ───────────────────────────────────────────────── */
.tm-home-cat-container {
    display: flex;
    gap: 0;
    background: #fff;
    border-radius: 1.5rem;
    overflow: hidden;
    border: 1px solid var(--border-light, #f1f5f9);
    box-shadow: 0 8px 32px rgba(98,34,204,.08);
    height: 430px;
}
.tm-home-cat-sidebar {
    width: 180px;
    flex-shrink: 0;
    background: #f9f8ff;
    border-right: 1px solid var(--border-light, #f1f5f9);
    overflow-y: auto;
    padding: .5rem 0;
}
.tm-home-cat-main { flex: 1; padding: 1.5rem; overflow-y: auto; background: #fff; }

@media (max-width: 767px) {
    .tm-home-cat-container {
        flex-direction: column;
        height: auto;
        border-radius: 1rem;
    }
    .tm-home-cat-sidebar {
        width: 100%;
        height: auto;
        display: flex;
        border-right: none;
        border-bottom: 1px solid var(--border-light, #f1f5f9);
        overflow-x: auto;
        overflow-y: hidden;
        padding: .25rem;
    }
    .tm-home-cat-sidebar::-webkit-scrollbar { height: 3px; }
    .tm-home-cat-sidebar button {
        width: auto !important;
        padding: .55rem .75rem !important;
        white-space: nowrap;
        border-left: none !important;
        border-bottom: 3px solid transparent;
        flex-shrink: 0;
    }
    .tm-home-cat-sidebar button.tm-sidebar-active {
        border-bottom-color: var(--primary, #6222CC) !important;
        background: var(--primary-xlight, #f3eeff) !important;
    }
    .tm-home-cat-main {
        padding: .85rem;
        height: 360px;
    }
}

/* ─── 11. TRUST CARDS / ORDER METHOD CARDS ───────────────────────────────── */
@media (max-width: 767px) {
    .tm-trust-card  { padding: 1.25rem; }
    .tm-trust-card h4 { font-size: 1rem; }
    .tm-order-method-card { padding: 1.25rem 1rem; }
}

/* ─── 12. SECTION TITLES ─────────────────────────────────────────────────── */
.tm-section-title { font-size: 1.5rem; }
@media (max-width: 767px) { .tm-section-title { font-size: 1.2rem; } }
@media (max-width: 480px) { .tm-section-title { font-size: 1.1rem; } }

/* ─── 13. PHARMACY CARDS ─────────────────────────────────────────────────── */
@media (max-width: 640px) {
    /* Make the directions button full width on mobile */
    .col-12 > div[style*="min-height:170px"] a {
        font-size: .72rem;
    }
}

/* ─── 14. BRAND SCROLLER ─────────────────────────────────────────────────── */
@media (max-width: 767px) {
    /* Smaller brand items on mobile */
    .hide-scrollbar a[style*="min-width:140px"] {
        min-width: 110px !important;
    }
    .hide-scrollbar div[style*="width:140px"] {
        width: 110px !important;
        height: 72px !important;
    }
}

/* ─── 15. TOAST NOTIFICATION ─────────────────────────────────────────────── */
@media (max-width: 767px) {
    .tm-toast {
        right: .75rem !important;
        left: .75rem !important;
        font-size: .78rem !important;
        top: calc(var(--header-h, 64px) + .5rem) !important;
    }
}

/* ─── 16. ARTICLE CARDS ──────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .tm-article-card h3 { font-size: .9rem; }
}

/* ─── 17. PROMO BANNER ───────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .tm-promo-overlay { padding: 1.25rem !important; }
    .tm-promo-overlay h2 { font-size: 1.2rem !important; }
}

/* ─── 18. FORMS (Vendor & Admin) ─────────────────────────────────────────── */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.col-full   { grid-column: 1 / -1; }
.form-label { display: block; font-size: .78rem; font-weight: 800; color: #475569; margin-bottom: .5rem; }
.form-input {
    width: 100%;
    padding: .75rem 1rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 0;
    font-size: .88rem;
    outline: none;
    transition: all .2s;
    font-family: inherit;
    background: #fff;
}
.form-input:focus {
    border-color: #6222CC;
    box-shadow: 0 0 0 4px rgba(98,34,204,.06);
}
@media (max-width: 768px) {
    .form-grid { grid-template-columns: 1fr; }
    .col-full  { grid-column: 1; }
}

/* ─── 19. ADMIN/VENDOR TABLE CONTAINERS ──────────────────────────────────── */
@media (max-width: 767px) {
    .user-catalog-container,
    .catalog-container,
    .product-catalog-container,
    .order-catalog-container,
    .prescription-catalog-container,
    .vendor-catalog-container {
        border-radius: 0 !important;
    }
    /* Make tables scroll horizontally on mobile */
    .overflow-x-auto { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ─── 20. ADMIN DASHBOARD STAT CARDS ─────────────────────────────────────── */
@media (max-width: 640px) {
    .stat-card { border-radius: 0 !important; padding: 1.25rem !important; }
}

/* ─── 21. CHECKOUT / CART PAGES ──────────────────────────────────────────── */
@media (max-width: 767px) {
    /* Stack order summary below items on mobile */
    .checkout-grid { flex-direction: column; }
}

/* ─── 22. PROFILE PAGE ───────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .profile-header-card { border-radius: 1rem !important; }
}

/* ─── 23. PAGINATION ─────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .pagination { flex-wrap: wrap; gap: .25rem; }
    .pagination .page-link { padding: .3rem .55rem; font-size: .78rem; }
}

/* ─── 24. FOOTER ─────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    footer .row.g-5 > div { margin-bottom: 1.5rem; }
}

/* ─── 25. HEALTH JOURNAL / ARTICLE LAYOUT ───────────────────────────────── */
@media (max-width: 767px) {
    .hja-body { padding: 1.5rem 1rem !important; }
    .hja-body h2 { font-size: 1.15rem; }
}

/* ─── 26. VENDOR DASHBOARD FORM SECTIONS ────────────────────────────────── */
.form-section {
    background: #fff;
    border: 1px solid #f1f5f9;
    border-radius: 0;
    padding: 2.25rem;
    margin-bottom: 2.5rem;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,.02);
    position: relative;
    overflow: hidden;
}
.form-section::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(to bottom, #6222CC, #F74780);
    opacity: 0.8;
}
@media (max-width: 640px) {
    .form-section { padding: 1.25rem 1rem; border-radius: 0; }
}

/* ─── 27. VENDOR STAT & SECTION COMPONENTS ──────────────────────────────── */
.stat-card {
    background: #fff;
    border: 1px solid #f1f5f9;
    border-radius: 0;
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02);
}
.stat-accent {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    opacity: 0.8;
}
.dashboard-section {
    background: #fff;
    border: 1px solid #f1f5f9;
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,.04);
}
@media (max-width: 640px) {
    .dashboard-section { border-radius: 0; }
}

/* ─── 28. MISC UTILITIES ─────────────────────────────────────────────────── */
.sidebar-link-active {
    background: linear-gradient(to right, rgba(98,34,204,.1), transparent);
    border-left: 4px solid #6222CC;
    color: #6222CC;
    font-weight: 900;
}
.glass-panel {
    background: rgba(255,255,255,.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.4);
}

/* ─── 29. SHOP / MEDICINE DIRECTORY FILTER ───────────────────────────────── */
@media (max-width: 767px) {
    /* Filter sidebar stacks above results on mobile */
    .shop-filter-sidebar { width: 100% !important; }
}

/* ─── 30. AUTH PAGES (Login / Register) ──────────────────────────────────── */
@media (max-width: 640px) {
    .auth-card { border-radius: 1.25rem !important; padding: 1.5rem !important; }
}

/* ─── 31. PRODUCT DETAIL PAGE ────────────────────────────────────────────── */
@media (max-width: 767px) {
    .product-detail-image { max-height: 280px !important; }
    .product-detail-grid  { flex-direction: column !important; }
}

/* ══════════════════════════════════════════
   32. BREADCRUMB - MINIMALIST PROFESSIONAL
   ══════════════════════════════════════════ */
.tm-breadcrumb-nav {
  display: flex;
  margin-bottom: 2rem;
}
.tm-breadcrumb-list {
  display: inline-flex;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.tm-breadcrumb-item {
  display: flex;
  align-items: center;
}
.tm-breadcrumb-link {
  color: #64748b !important; /* Slate-500 grey */
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  display: flex !important;
  align-items: center !important;
  line-height: 1 !important;
}
.tm-breadcrumb-link:hover {
  color: var(--primary) !important;
}
.tm-bc-icon {
  width: 15px !important;
  height: 15px !important;
  flex-shrink: 0 !important;
  display: block !important;
  color: #64748b !important;
}
.tm-breadcrumb-separator {
  width: 14px !important;
  height: 14px !important;
  color: #94a3b8 !important; /* Slate-400 lighter grey */
  margin: 0 0.5rem !important;
  flex-shrink: 0 !important;
  display: block !important;
}
.tm-breadcrumb-current {
  color: #475569 !important; /* Slate-600 darker grey */
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* Light variant for dark backgrounds */
.tm-breadcrumb-nav.breadcrumb-light .tm-breadcrumb-link,
.tm-breadcrumb-nav.breadcrumb-light .tm-bc-icon {
  color: rgba(255, 255, 255, 0.7) !important;
}
.tm-breadcrumb-nav.breadcrumb-light .tm-breadcrumb-link:hover {
  color: #fff !important;
}
.tm-breadcrumb-nav.breadcrumb-light .tm-breadcrumb-separator {
  color: rgba(255, 255, 255, 0.4) !important;
}
.tm-breadcrumb-nav.breadcrumb-light .tm-breadcrumb-current {
  color: #fff !important;
  background: transparent !important;
  padding: 0 !important;
}