/**
 * 实时时钟样式
 * 显示在页面右下角
 */

/* 为body添加背景过渡效果 */
body {
  transition: background 1.5s ease-in-out;
}

/* footer背景过渡效果 */
#footer {
  transition: background 1.5s ease-in-out !important;
}

/* 确保footer文字在各种背景下都清晰可见 */
#footer-wrap {
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(10px);
  padding: 20px 0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

/* footer文字和链接颜色过渡效果 - 提高优先级 */
#footer #footer-wrap,
#footer #footer-wrap *,
#footer #footer-wrap a,
#footer #footer-wrap .footer-separator,
#footer #footer-wrap .footer-custom-text,
#footer #footer-wrap .copyright {
  transition: color 0.5s ease !important;
  font-weight: 500 !important;
}

#footer #footer-wrap a:hover {
  text-decoration: underline !important;
}

/* 移除深色模式可能的颜色覆盖 */
[data-theme="dark"] #footer #footer-wrap,
[data-theme="dark"] #footer #footer-wrap *,
[data-theme="dark"] #footer #footer-wrap a {
  transition: color 0.5s ease !important;
}

/* 调整rightside按钮组的位置，向上移动为时钟腾出空间 */
#rightside {
  bottom: 120px !important; /* 默认为40px，现在向上移动80px */
}

/* rightside按钮样式优化 */
#rightside button,
#rightside a {
  transition: all 0.3s ease !important;
  border: none !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
}

#rightside button:hover,
#rightside a:hover {
  transform: translateX(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* 确保按钮图标颜色继承 */
#rightside button i,
#rightside a i {
  color: inherit !important;
}

.realtime-clock {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 998; /* 比rightside(999)低一层 */
  background: rgba(255, 255, 255, 0.85);
  border-radius: 12px;
  padding: 12px 16px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* 深色模式适配 */
[data-theme="dark"] .realtime-clock {
  background: rgba(30, 30, 30, 0.85);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* 鼠标悬停效果 */
.realtime-clock:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] .realtime-clock:hover {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

/* 左侧部分：时钟图标和星期 */
.realtime-clock .clock-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

/* 时钟图标 */
.realtime-clock .clock-icon {
  font-size: 24px;
  color: var(--theme-color, #49B1F5);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}

.realtime-clock .clock-icon i {
  animation: clockTick 1s ease-in-out infinite;
}

@keyframes clockTick {
  0%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(5deg);
  }
  75% {
    transform: rotate(-5deg);
  }
}

/* 星期显示（移到图标下方） */
.realtime-clock .clock-weekday {
  font-size: 12px;
  color: var(--theme-color, #49B1F5);
  font-weight: 500;
  white-space: nowrap;
}

/* 右侧内容 */
.realtime-clock .clock-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.2;
}

/* 日期显示 */
.realtime-clock .clock-date {
  font-size: 14px;
  font-weight: 600;
  color: var(--font-color, #363636);
}

[data-theme="dark"] .realtime-clock .clock-date {
  color: var(--font-color, #e0e0e0);
}

/* 时间显示 */
.realtime-clock .clock-time {
  font-size: 16px;
  font-weight: 700;
  font-family: 'Courier New', monospace;
  color: var(--font-color, #363636);
  letter-spacing: 1px;
}

[data-theme="dark"] .realtime-clock .clock-time {
  color: var(--font-color, #e0e0e0);
}

/* 主题名称显示（艺术字体） */
.realtime-clock .clock-theme {
  font-size: 14px;
  font-weight: 700;
  font-family: 'STKaiti', 'KaiTi', '楷体', 'SimKai', 'FangSong', '仿宋', cursive, serif;
  font-style: normal;
  transition: color 0.5s ease;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  letter-spacing: 1px;
}

[data-theme="dark"] .realtime-clock .clock-theme {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
  /* 移动端rightside按钮位置调整 */
  #rightside {
    bottom: 140px !important; /* 移动端需要更多空间 */
  }

  .realtime-clock {
    bottom: 70px; /* 避免与移动端底部菜单重叠 */
    right: 10px;
    padding: 8px 12px;
    gap: 8px;
  }

  .realtime-clock .clock-icon {
    font-size: 20px;
    width: 28px;
    height: 28px;
  }

  .realtime-clock .clock-date {
    font-size: 12px;
  }

  .realtime-clock .clock-weekday {
    font-size: 9px;
  }

  .realtime-clock .clock-time {
    font-size: 14px;
  }

  .realtime-clock .clock-theme {
    font-size: 10px;
  }
}

/* 超小屏幕优化 */
@media screen and (max-width: 480px) {
  #rightside {
    bottom: 130px !important;
  }

  .realtime-clock {
    padding: 6px 10px;
    bottom: 60px;
    right: 8px;
  }

  .realtime-clock .clock-icon {
    font-size: 18px;
    width: 24px;
    height: 24px;
  }

  .realtime-clock .clock-date {
    font-size: 11px;
  }

  .realtime-clock .clock-weekday {
    font-size: 8px;
  }

  .realtime-clock .clock-time {
    font-size: 13px;
  }

  .realtime-clock .clock-theme {
    font-size: 9px;
  }
}

/* 当rightside隐藏时，调整时钟位置 */
body:not(.rightside-show) .realtime-clock {
  animation: slideInRight 0.3s ease;
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 打印时隐藏 */
@media print {
  .realtime-clock {
    display: none !important;
  }
}