/* 
=============================
  DATE & TIME WIDGET STYLES
=============================
*/

.datetime-widget {
    background: var(--card-bg);
    padding: var(--spacing-xs);
}

.datetime-display {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-sm);
}

.date-section, .time-section {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}
.datetime-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.datetime-value {
  font-size: .75rem;
  color: var(--text-dark);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.time-section .datetime-value {
  font-family: 'Courier New', monospace;
  font-size: 1.1rem;
}

/* Responsive */
@media (max-width: 768px) {
  .datetime-value {
    font-size: 0.9rem;
  }
  
  .time-section .datetime-value {
    font-size: 1rem;
  }
}