/*
  文件：css/weather.css
  作用：天气模块相关样式（#weather-container、#temperature、#weather-icon 等）。
  当前阶段：此文件已开始承载天气模块样式；如需覆盖，请在 overrides.css 中处理。
  注释语言：中文
*/

/* 模块：天气 */
#weather-container {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: none;
    background: none;
    border-radius: 0;
    transform: none !important; /* 覆盖 .bottom-btn:hover 的放大效果 */
    position: relative; /* 用于悬浮提示定位 */
}
#weather-container:hover {
    transform: none !important; /* 仅保留亮色效果 */
}
#temperature {
    font-size: 14px;
    color: #fff;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0,0,0,.35);
    transition: filter .2s ease, opacity .2s ease;
}
#weather-icon {
    font-size: 22px; /* 与个人中心图标一致 */
    color: #fff;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0,0,0,.35);
    transition: filter .2s ease, opacity .2s ease;
}
#weather-container:hover #weather-icon,
#weather-container:hover #temperature { filter: brightness(1.2); }

/* 悬浮上方显示天气文本说明 */
#weather-container::after {
    content: attr(data-tip);
    position: absolute;
    left: 50%;
    bottom: 100%;
    transform: translate(-50%, -6px);
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
    color: #fff;
    font-size: 12px;
    line-height: 1.2;
    padding: 6px 8px;
    border-radius: 8px;
    background: rgba(0,0,0,0.45);
    text-shadow: 0 1px 2px rgba(0,0,0,.35);
    transition: opacity .18s ease, transform .18s ease;
}
#weather-container:hover::after { opacity: 1; transform: translate(-50%, -10px); }

/* 与天气视觉相关但非该模块专属的按钮大小，保持在 style.css（或 components.css）中：
#userCenterBtn { font-size: 20px; }
*/

/* 快捷工具中的天气卡片样式 */
.weather-icon .weather-card {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-size: cover;
  background-position: center;
}
.weather-card::before{
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.35), rgba(0,0,0,0.05));
  pointer-events: none;
  z-index: 0; /* 背景覆盖层，置底 */
}
.weather-card .weather-header{
  position: relative;
    z-index: 2;
    padding: 5px 5px 0;
    color: #ffffffba;
    font-size: 10px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
.weather-card .weather-body{
  position: relative;
  z-index: 2; /* 置于上层，覆盖下层图标 */
  display: flex;
  align-items: center;
  justify-content: center; /* 居中显示气温 */
  height: 100%; /* 下方约占 2/3 高度 */
  margin-top: auto; /* 将气温区域推至底部 */
}
.weather-card .weather-temp{
  color: #fff;
    font-size: 24px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.14);
    margin-left: 5px;
    margin-bottom: 5px;
}
.weather-card .weather-icon-img{
  width: 20px;
    height: 20px;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35));
    position: absolute;
    z-index: 1;
    opacity: 0.75;
      top: 4px;
      right: 1px;
}