:root {
  --sgpd-fe-color-primary-bg: #e8f5e9;
  --sgpd-fe-font-family: inherit;
  --sgpd-fe-border-radius: 4px;
  --sgpd-fe-padding: 15px;
  --sgpd-fe-margin-lg: 20px;
  --sgpd-fe-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Shared styles for shortcode and widget */
.sg-persian-date-display,
.sg-persian-date-widget {
  direction: rtl;
  font-family: var(--sgpd-fe-font-family);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: nowrap;
  white-space: nowrap;
}

/* Shortcode: date text vertical alignment with icon */
.sg-persian-date-display .sgpd-date {
  padding-top: 0.3rem;
}

/* Shortcode: time text */
.sg-persian-date-display .sgpd-time {
  padding-top: 0.3rem;
}

/* Shortcode: separator between date and time */
.sg-persian-date-display .sgpd-separator {
  padding-top: 0.3rem;
  white-space: pre;
}

/* Widget specific styles */
.sg-persian-date-widget {
  background-color: var(--sgpd-fe-color-primary-bg);
  border-radius: var(--sgpd-fe-border-radius);
  box-shadow: var(--sgpd-fe-box-shadow);
  margin-bottom: var(--sgpd-fe-margin-lg);
  padding: var(--sgpd-fe-padding);
}

/* Widget: date */
.sg-persian-date-widget-date {
  font-size: 1.1em;
}

/* Widget: time */
.sg-persian-date-widget-time {
  font-size: 0.95em;
  opacity: 0.85;
}

/* Semantic <time> tag styling */
.sg-persian-date-display time.sgpd-date,
.sg-persian-date-display time.sgpd-time {
  /* Inherit from parent, no extra styling needed by default */
}

/* Inline layout when no wrapper is used */
.sgpd-date + .sgpd-separator + .sgpd-time,
.sg-persian-date-icon + .sgpd-date,
.sg-persian-date-icon + time.sgpd-date {
  display: inline;
}