/* picker.css - 完整修复版 (暗色主题 + 丝滑动画 + 滚动吸附) */

/* =========================================
   1. 遮罩层 (Mask) - 负责背景变暗和淡入淡出
   ========================================= */
.picker-mask {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6); /* 深色半透明背景 */
  backdrop-filter: blur(2px);     /* 轻微磨砂效果 */
  display: flex;
  align-items: flex-end;          /* 让面板停靠在底部 */
  z-index: 1000;

  /* 动画初始状态：透明 */
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;           /* 透明时不阻挡点击 */

  /* 移动端触摸优化 */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* 激活状态：不透明，允许点击 */
.picker-mask.visible {
  opacity: 1;
  pointer-events: auto;
}

/* 彻底隐藏状态 (display: none) */
.picker-mask.hidden {
  display: none;
}

/* =========================================
   2. 主面板 (Panel) - 负责承载内容和上滑动画
   ========================================= */
.picker-panel {
  width: 100%;
  max-height: 85vh; /* 不占满全屏 */
  background: #2E4E3F; /* 主题深绿背景 */
  color: #fff;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;

  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 10;
  overflow: hidden;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.3);

  /* 动画初始状态：位于屏幕底部下方 */
  transform: translateY(100%);
  /* 丝滑动画曲线 (缓出) */
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
}

/* 激活状态：滑上来归位 */
.picker-mask.visible .picker-panel {
  transform: translateY(0);
}

/* =========================================
   3. 头部区域 (Header)
   ========================================= */
.picker-header {
  position: relative;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: #233D31; /* 比面板稍深，区分层次 */
  border-bottom: 1px solid rgba(255,255,255,0.05);
  flex: 0 0 auto;
}

.picker-title {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 1px;
}

/* 头部按钮 (取消/完成) */
.picker-header .picker-cancel,
.picker-header .picker-ok {
  background: transparent; /* 去掉白色背景块 */
  border: none;
  font-size: 16px;
  padding: 8px;
  cursor: pointer;
  outline: none;
  transition: opacity 0.2s;
}

.picker-header .picker-cancel {
  color: #8FB898; /* 浅绿色文字 */
}

.picker-header .picker-ok {
  color: #fff;    /* 白色高亮文字 */
  font-weight: 600;
}

.picker-header button:active {
  opacity: 0.7;
}

/* =========================================
   4. 公历/农历切换器 (Calendar Switch)
   ========================================= */
.picker-calendar-switch {
  display: flex;
  justify-content: center;
  padding: 10px 0;
  background: #233D31;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  flex: 0 0 auto;
  z-index: 5;
}

.switch-container {
  display: flex;
  background: rgba(0,0,0,0.2);
  border-radius: 999px;
  padding: 4px;
  border: 1px solid rgba(255,255,255,0.1);
}

.switch-btn {
  padding: 6px 24px;
  border: none;
  background: transparent;
  color: #8FB898;
  font-size: 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* 切换按钮激活态 */
.switch-btn.active {
  background: #4A7A5E; /* 亮绿色 */
  color: #fff;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* =========================================
   5. 列标题 (Column Labels)
   ========================================= */
.picker-col-labels {
  display: flex;
  padding: 8px 0;
  background: #2E4E3F;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  flex: 0 0 auto;
}

.picker-col-labels .lab {
  flex: 1;
  text-align: center;
  font-size: 13px;
  color: #8FB898;
  opacity: 0.8;
}

/* =========================================
   6. 滚动核心区域 (Columns)
   ========================================= */
.picker-cols {
  position: relative;
  display: flex;
  /* 高度由 JS 动态控制变量 --picker-height */
  height: var(--picker-height, 280px) !important;
  flex: 0 0 var(--picker-height, 280px) !important;
  overflow: hidden;
  z-index: 1;
  background: #2E4E3F;

  /* 触摸优化 */
  touch-action: pan-y;
}

/* 单列样式 */
.picker-cols .col {
  flex: 1;
  height: 100%;
  overflow-y: auto;

  /* === 关键：CSS Scroll Snap 强制吸附 === */
  scroll-snap-type: y mandatory;

  position: relative;
  z-index: 2;
  overscroll-behavior: contain;

  /* 隐藏滚动条 */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}
.picker-cols .col::-webkit-scrollbar { display: none; } /* Chrome/Safari */

/* 上下留白 (Padding) - 由 JS 动态计算 --pad 填充 */
.picker-cols .col ul::before,
.picker-cols .col ul::after {
  content: "";
  display: block;
  height: var(--pad, 122px);
}

.picker-cols .col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 列表项样式 */
.picker-cols li {
  height: var(--item-h, 36px);
  line-height: var(--item-h, 36px);
  text-align: center;

  /* === 关键：每一项都是吸附点 === */
  scroll-snap-align: center;

  color: #8FB898;
  font-size: 16px;
  opacity: 0.5;
  transition: all 0.2s ease;
  white-space: nowrap;
}

/* 选中项高亮样式 (JS 负责添加 active 类) */
.picker-cols li.active {
  color: #fff;
  font-size: 19px; /* 选中放大 */
  font-weight: 600;
  opacity: 1;
  transform: scale(1.05);
}

/* =========================================
   7. 中间选中装饰条 (Highlight)
   ========================================= */
.picker-highlight {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;

  /* 高度与单项高度一致 */
  height: var(--item-h, 36px);
  margin-top: calc(var(--item-h, 36px) / -2);

  /* 装饰线/背景 */
  border-top: 1px solid rgba(255,255,255,0.15);
  border-bottom: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.03); /* 淡淡的白色背景 */

  pointer-events: none; /* 穿透点击 */
  z-index: 0;
}