/* Universal Breadcrumbs Design */
:root {
  --breadcrumb-scale: 0.8;
  --breadcrumb-orange: #ff7e5f;
  --breadcrumb-orange-hover: #ff6347;
  --breadcrumb-text: #333333;
  --breadcrumb-text-muted: #666666;
  --breadcrumb-separator: #999999;
}

/* Breadcrumb Container */
.universal-breadcrumbs {
  padding: calc(10px * var(--breadcrumb-scale)) 0;
  position: sticky;
  top: var(--header-height, 60px);
  z-index: 99;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  margin-top: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.universal-breadcrumbs .container {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 calc(32px * var(--breadcrumb-scale));
}

/* Breadcrumb Navigation */
.universal-breadcrumbs .breadcrumbs {
  display: flex;
  align-items: center;
  gap: calc(8px * var(--breadcrumb-scale));
  font-size: calc(14px * var(--breadcrumb-scale));
  color: var(--breadcrumb-text-muted);
}

.universal-breadcrumbs .breadcrumbs a {
  color: var(--breadcrumb-text);
  text-decoration: none;
  transition: color 0.3s ease, opacity 0.3s ease;
  font-weight: 500;
  padding: calc(4px * var(--breadcrumb-scale)) 0;
}

.universal-breadcrumbs .breadcrumbs a:hover {
  color: var(--breadcrumb-orange);
  opacity: 1;
}

/* Current page (active) - Orange */
.universal-breadcrumbs .breadcrumbs span {
  color: var(--breadcrumb-orange);
  font-weight: 600;
  padding: calc(4px * var(--breadcrumb-scale)) 0;
}

/* Separator */
.universal-breadcrumbs .breadcrumbs i {
  font-size: calc(10px * var(--breadcrumb-scale));
  color: var(--breadcrumb-separator);
  opacity: 0.6;
}

/* Responsive */
@media (max-width: 768px) {
  .universal-breadcrumbs {
    padding: calc(12px * var(--breadcrumb-scale)) 0;
  }
  
  .universal-breadcrumbs .container {
    padding: 0 calc(16px * var(--breadcrumb-scale));
  }
  
  .universal-breadcrumbs .breadcrumbs {
    font-size: calc(12px * var(--breadcrumb-scale));
    gap: calc(6px * var(--breadcrumb-scale));
  }
  
  .universal-breadcrumbs .breadcrumbs i {
    font-size: calc(8px * var(--breadcrumb-scale));
  }
}