/* ===== DATE PICKER COMPONENT ===== */

.glow-date-select {
  cursor: pointer;
  user-select: none;
}

.glow-date-select {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  cursor: pointer;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-size: 13px;
  transition: border-color 0.15s, color 0.15s;
  position: relative;
  z-index: 0;
  contain: layout style paint;
}

.glow-date-select .date-display {
  flex: 1;
  font-size: 14px;
  color: var(--text-primary);
  padding: 10px 0;
}

.glow-date-select svg {
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: color 0.15s;
}

.glow-date-select::before {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: -2;
  opacity: 0;
  transition: opacity .35s;
  pointer-events: none;
  border-radius: calc(var(--radius) + 1px);
  background: radial-gradient(400px circle at var(--gx, 50%) var(--gy, 50%), rgba(var(--glow-rgb), .3), transparent 40%);
}

.glow-date-select::after {
  content: '';
  position: absolute;
  inset: 1px;
  z-index: -1;
  pointer-events: none;
  border-radius: calc(var(--radius) - 1px);
  background: var(--bg-elevated);
}

.glow-date-select:hover::before,
.glow-date-select:focus-within::before {
  opacity: 1;
}

.glow-date-select:hover svg {
  color: var(--primary);
}

[data-theme="light"] .glow-date-select::before,
[data-theme="light"] .glow-date-select::after {
  display: none;
}

[data-theme="light"] .glow-date-select {
  contain: unset;
}

.glow-date-select input[type="date"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}