/**
 * notice_bar - 顶部公告条
 * 全部使用主题 CSS 变量，自动跟随浅色 / 暗色模式
 */

/* ---------- 包自带图标 ----------
   主题前台没有加载任何图标字库（bi-* / icon-* 均无对应 CSS），
   因此这里用「CSS mask + 内联 SVG」，颜色自动跟随 currentColor。 */
.ac-icon {
  display: inline-block;
  width: 15px;
  height: 15px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.ac-icon-megaphone {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11v2a1 1 0 0 0 1 1h2l4 4V6L6 10H4a1 1 0 0 0-1 1z'/%3E%3Cpath d='M15 8.5a4 4 0 0 1 0 7'/%3E%3Cpath d='M18 5.5a8 8 0 0 1 0 13'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11v2a1 1 0 0 0 1 1h2l4 4V6L6 10H4a1 1 0 0 0-1 1z'/%3E%3Cpath d='M15 8.5a4 4 0 0 1 0 7'/%3E%3Cpath d='M18 5.5a8 8 0 0 1 0 13'/%3E%3C/svg%3E");
}

.ac-icon-bell {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-2 8-2 8h16s-2-1-2-8'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-2 8-2 8h16s-2-1-2-8'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3C/svg%3E");
}

.ac-icon-zap {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2L4.5 13H12l-1 9 8.5-11H12l1-9z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2L4.5 13H12l-1 9 8.5-11H12l1-9z'/%3E%3C/svg%3E");
}

.ac-icon-info {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
}

.ac-icon-gift {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12v8a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-8'/%3E%3Cpath d='M2 7h20v5H2z'/%3E%3Cpath d='M12 22V7'/%3E%3Cpath d='M12 7H7.5a2.5 2.5 0 1 1 0-5C11 2 12 7 12 7z'/%3E%3Cpath d='M12 7h4.5a2.5 2.5 0 1 0 0-5C13 2 12 7 12 7z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12v8a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-8'/%3E%3Cpath d='M2 7h20v5H2z'/%3E%3Cpath d='M12 22V7'/%3E%3Cpath d='M12 7H7.5a2.5 2.5 0 1 1 0-5C11 2 12 7 12 7z'/%3E%3Cpath d='M12 7h4.5a2.5 2.5 0 1 0 0-5C13 2 12 7 12 7z'/%3E%3C/svg%3E");
}

.notice-bar {
  margin-bottom: 14px;
  border-radius: var(--border-radius);
  overflow: hidden;
}

.notice-bar.is-hidden {
  display: none;
}

.notice-bar__inner {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 14px;
}

.notice-bar__icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  font-size: 15px;
  line-height: 1;
}

.notice-bar__label {
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: var(--border-radius-sm);
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
}

.notice-bar__viewport {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 40px;
  overflow: hidden;
}

.notice-bar__item {
  display: block;
  height: 40px;
  line-height: 40px;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}

.notice-bar.is-rotating .notice-bar__track {
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.notice-bar__cta {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 18px;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s, background-color 0.2s;
}

.notice-bar__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  opacity: 0.65;
  transition: opacity 0.2s, background-color 0.2s;
}

.notice-bar__close:hover {
  opacity: 1;
}

/* 主题色 */
.notice-bar--theme {
  background: var(--theme-color);
  color: #fff;
}

.notice-bar--theme .notice-bar__label {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.notice-bar--theme .notice-bar__item {
  color: #fff;
}

.notice-bar--theme .notice-bar__item:hover {
  text-decoration: underline;
}

.notice-bar--theme .notice-bar__cta {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.notice-bar--theme .notice-bar__cta:hover {
  background: rgba(255, 255, 255, 0.3);
}

.notice-bar--theme .notice-bar__close {
  color: #fff;
}

.notice-bar--theme .notice-bar__close:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* 深色 */
.notice-bar--dark {
  background: var(--bg-footer);
  color: var(--text-footer-light);
}

.notice-bar--dark .notice-bar__label {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text-footer-light);
}

.notice-bar--dark .notice-bar__item {
  color: var(--text-footer-medium);
}

.notice-bar--dark .notice-bar__item:hover {
  color: #fff;
  text-decoration: underline;
}

.notice-bar--dark .notice-bar__cta {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text-footer-light);
}

.notice-bar--dark .notice-bar__cta:hover {
  background: rgba(255, 255, 255, 0.22);
}

.notice-bar--dark .notice-bar__close {
  color: var(--text-footer-medium);
}

.notice-bar--dark .notice-bar__close:hover {
  background: rgba(255, 255, 255, 0.14);
}

/* 浅色描边 */
.notice-bar--light {
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  color: var(--text-secondary);
}

.notice-bar--light .notice-bar__label {
  background: var(--bg-secondary);
  color: var(--theme-color);
}

.notice-bar--light .notice-bar__item {
  color: var(--text-content);
}

.notice-bar--light .notice-bar__item:hover {
  color: var(--color-link);
}

.notice-bar--light .notice-bar__cta {
  background: var(--bg-secondary);
  color: var(--color-link);
}

.notice-bar--light .notice-bar__cta:hover {
  background: var(--bg-hover);
}

.notice-bar--light .notice-bar__close {
  color: var(--text-tertiary);
}

.notice-bar--light .notice-bar__close:hover {
  background: var(--bg-hover);
}

@media (max-width: 768px) {
  .notice-bar__inner {
    gap: 8px;
    padding: 0 10px;
  }

  .notice-bar__item {
    font-size: 12px;
  }

  .notice-bar__label {
    display: none;
  }
}