/* 面包屑导航增强样式 - 确保各种主题下正常显示 */

/* 基础面包屑样式 */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  list-style: none;
  background-color: var(--breadcrumb-bg, rgba(0, 0, 0, 0.03));
  border-radius: var(--border-radius, 0.375rem);
  font-size: 0.875rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--breadcrumb-border, var(--border-color, rgba(0, 0, 0, 0.1)));
}

.breadcrumb-item {
  display: flex;
  align-items: center;
  color: var(--breadcrumb-color, var(--text-secondary-color, #6c757d));
  font-weight: 500;
}

.breadcrumb-item + .breadcrumb-item {
  padding-left: 0.5rem;
}

.breadcrumb-item + .breadcrumb-item::before {
  display: inline-block;
  padding-right: 0.5rem;
  color: var(--breadcrumb-divider-color, var(--text-secondary-color, #6c757d));
  content: "/";
  font-weight: normal;
}

.breadcrumb-item a {
  text-decoration: none;
  color: var(--breadcrumb-link-color, var(--primary-color, #007bff));
  transition: all 0.15s ease-in-out;
  display: flex;
  align-items: center;
}

.breadcrumb-item a:hover {
  color: var(--breadcrumb-link-hover-color, var(--primary-hover-color, #0056b3));
  text-decoration: underline;
}

.breadcrumb-item a i {
  margin-right: 0.25rem;
  font-size: 0.8em;
}

.breadcrumb-item.active {
  color: var(--breadcrumb-active-color, var(--text-color, #495057));
  font-weight: 600;
}

/* 默认主题适配 */
[data-theme="default"] .breadcrumb {
  background-color: var(--breadcrumb-bg-default, rgba(0, 0, 0, 0.03));
  border: 1px solid var(--breadcrumb-border-default, var(--border-color, rgba(0, 0, 0, 0.1)));
}

[data-theme="default"] .breadcrumb-item {
  color: var(--breadcrumb-color-default, var(--text-secondary-color, #6c757d));
}

[data-theme="default"] .breadcrumb-item + .breadcrumb-item::before {
  color: var(--breadcrumb-divider-color-default, var(--text-secondary-color, #6c757d));
}

[data-theme="default"] .breadcrumb-item a {
  color: var(--breadcrumb-link-color-default, var(--primary-color, #007bff));
}

[data-theme="default"] .breadcrumb-item a:hover {
  color: var(--breadcrumb-link-hover-color-default, var(--primary-hover-color, #0056b3));
}

[data-theme="default"] .breadcrumb-item.active {
  color: var(--breadcrumb-active-color-default, var(--text-color, #495057));
}

/* 浅色主题适配 */
[data-theme="light"] .breadcrumb {
  background-color: var(--breadcrumb-bg-light, rgba(0, 0, 0, 0.03));
  border: 1px solid var(--breadcrumb-border-light, var(--border-color, rgba(0, 0, 0, 0.1)));
}

[data-theme="light"] .breadcrumb-item {
  color: var(--breadcrumb-color-light, var(--text-secondary-color, #6c757d));
}

[data-theme="light"] .breadcrumb-item + .breadcrumb-item::before {
  color: var(--breadcrumb-divider-color-light, var(--text-secondary-color, #6c757d));
}

[data-theme="light"] .breadcrumb-item a {
  color: var(--breadcrumb-link-color-light, var(--primary-color, #007bff));
}

[data-theme="light"] .breadcrumb-item a:hover {
  color: var(--breadcrumb-link-hover-color-light, var(--primary-hover-color, #0056b3));
}

[data-theme="light"] .breadcrumb-item.active {
  color: var(--breadcrumb-active-color-light, var(--text-color, #495057));
}

/* 深色主题适配 */
[data-theme="dark"] .breadcrumb {
  background-color: var(--breadcrumb-bg-dark, rgba(255, 255, 255, 0.05));
  border: 1px solid var(--breadcrumb-border-dark, var(--border-color, rgba(255, 255, 255, 0.1)));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .breadcrumb-item {
  color: var(--breadcrumb-color-dark, var(--text-secondary-color-dark, #adb5bd));
}

[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
  color: var(--breadcrumb-divider-color-dark, var(--text-secondary-color-dark, #adb5bd));
}

[data-theme="dark"] .breadcrumb-item a {
  color: var(--breadcrumb-link-color-dark, var(--primary-color-dark, #64a0ff));
}

[data-theme="dark"] .breadcrumb-item a:hover {
  color: var(--breadcrumb-link-hover-color-dark, var(--primary-hover-color-dark, #99c0ff));
}

[data-theme="dark"] .breadcrumb-item.active {
  color: var(--breadcrumb-active-color-dark, var(--text-color-dark, #f8f9fa));
}

/* 动画主题适配 */
[data-theme="animation"] .breadcrumb {
  background-color: var(--breadcrumb-bg-animation, rgba(255, 255, 255, 0.1));
  backdrop-filter: blur(10px);
  border: 1px solid var(--breadcrumb-border-animation, var(--border-color-animation, rgba(255, 255, 255, 0.15)));
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

[data-theme="animation"] .breadcrumb-item {
  color: var(--breadcrumb-color-animation, var(--text-secondary-color-animation, rgba(255, 255, 255, 0.8)));
}

[data-theme="animation"] .breadcrumb-item + .breadcrumb-item::before {
  color: var(--breadcrumb-divider-color-animation, var(--text-secondary-color-animation, rgba(255, 255, 255, 0.7)));
}

[data-theme="animation"] .breadcrumb-item a {
  color: var(--breadcrumb-link-color-animation, var(--primary-color-animation, #ffffff));
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

[data-theme="animation"] .breadcrumb-item a:hover {
  color: var(--breadcrumb-link-hover-color-animation, var(--primary-hover-color-animation, #e0e0e0));
  text-decoration: underline;
}

[data-theme="animation"] .breadcrumb-item.active {
  color: var(--breadcrumb-active-color-animation, var(--text-color-animation, #ffffff));
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* 高对比度优化 */
@media (prefers-contrast: high) {
  .breadcrumb {
    border: 2px solid var(--border-color, #000);
  }
  
  .breadcrumb-item a {
    text-decoration: underline;
  }
  
  .breadcrumb-item.active {
    font-weight: bold;
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .breadcrumb {
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
  }
  
  .breadcrumb-item + .breadcrumb-item {
    padding-left: 0.25rem;
  }
  
  .breadcrumb-item + .breadcrumb-item::before {
    padding-right: 0.25rem;
  }
  
  .breadcrumb-item a i {
    display: none; /* 在小屏幕上隐藏图标以节省空间 */
  }
}

@media (max-width: 576px) {
  .breadcrumb {
    padding: 0.5rem;
    font-size: 0.75rem;
  }
  
  .breadcrumb-item {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
  }
  
  .breadcrumb-item:first-child {
    max-width: none;
  }
  
  .breadcrumb-item a {
    text-decoration: none;
  }
  
  .breadcrumb-item a:hover {
    text-decoration: underline;
  }
}

/* 特殊页面优化 */
.home-page .breadcrumb {
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(5px);
}

.product-detail-page .breadcrumb,
.checkout-page .breadcrumb {
  margin-top: 1rem;
}

/* 面包屑导航动画效果 */
.breadcrumb-item a {
  transition: all 0.2s ease;
}

.breadcrumb-item a:hover {
  transform: translateY(-1px);
}

/* 面包屑导航图标优化 */
.breadcrumb-item i.fas,
.breadcrumb-item i.far,
.breadcrumb-item i.fab {
  font-size: 0.85em;
  margin-right: 0.25rem;
  vertical-align: middle;
}

/* 确保文字可读性 */
.breadcrumb-item,
.breadcrumb-item a,
.breadcrumb-item.active {
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .breadcrumb-item,
[data-theme="dark"] .breadcrumb-item a,
[data-theme="dark"] .breadcrumb-item.active {
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

[data-theme="animation"] .breadcrumb-item,
[data-theme="animation"] .breadcrumb-item a,
[data-theme="animation"] .breadcrumb-item.active {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* 文字截断优化 */
.breadcrumb-item.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

@media (max-width: 992px) {
  .breadcrumb-item.truncate {
    max-width: 150px;
  }
}

@media (max-width: 768px) {
  .breadcrumb-item.truncate {
    max-width: 120px;
  }
}

@media (max-width: 576px) {
  .breadcrumb-item.truncate {
    max-width: 100px;
  }
}