/*! JDServer X timeline module v1.1.0 */
.x-timeline[hidden],
.x-timeline.jd-module-disabled {
  display: none !important;
}

.x-timeline {
  --x-primary: var(--site-primary, var(--primary, #3478f6));
  --x-secondary: var(--site-secondary, var(--secondary, #1eb8aa));
  --x-accent: var(--site-accent, var(--accent, #8b5cf6));
}

.x-timeline > h3 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.x-timeline > h3::before {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--x-primary) 26%, transparent);
  border-radius: 10px;
  color: var(--x-primary);
  content: "X";
  font-size: .78rem;
  font-weight: 900;
  line-height: 1;
}

.x-timeline-shell {
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--x-primary) 18%, rgba(105, 120, 145, .22));
  border-radius: 22px;
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--x-accent) 10%, transparent), transparent 42%),
    var(--card-bg, var(--surface, #fff));
  box-shadow: 0 16px 44px rgba(29, 48, 78, .08);
}

.x-timeline-shell.is-loading {
  min-height: var(--x-timeline-height, 520px);
}

.x-timeline-consent,
.x-timeline-fallback,
.x-timeline-loading {
  display: grid;
  justify-items: start;
  gap: 13px;
  min-height: 220px;
  align-content: center;
  padding: clamp(22px, 5vw, 38px);
}

.x-timeline-consent strong,
.x-timeline-fallback strong,
.x-timeline-loading strong {
  font-size: clamp(1.05rem, 4vw, 1.35rem);
  letter-spacing: -.025em;
}

.x-timeline-consent p,
.x-timeline-fallback p,
.x-timeline-loading p {
  max-width: 720px;
  margin: 0;
  color: var(--muted, #667085);
  line-height: 1.55;
}

.x-timeline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.x-timeline-button,
.x-timeline-profile {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

.x-timeline-button {
  color: #fff;
  background: linear-gradient(135deg, var(--x-primary), var(--x-secondary));
  box-shadow: 0 9px 22px color-mix(in srgb, var(--x-primary) 20%, transparent);
}

.x-timeline-profile {
  border-color: color-mix(in srgb, var(--x-primary) 22%, rgba(110, 125, 150, .25));
  color: var(--x-primary);
  background: color-mix(in srgb, var(--x-primary) 7%, transparent);
}

.x-timeline-button:focus-visible,
.x-timeline-profile:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--x-accent) 38%, transparent);
  outline-offset: 3px;
}

.x-timeline-loading::before {
  width: 34px;
  height: 34px;
  border: 4px solid color-mix(in srgb, var(--x-primary) 16%, transparent);
  border-top-color: var(--x-primary);
  border-radius: 50%;
  content: "";
  animation: jd-x-timeline-spin .8s linear infinite;
}

.x-timeline-shell.is-loading .x-timeline-loading {
  position: absolute;
  z-index: 2;
  inset: 0;
  min-height: var(--x-timeline-height, 520px);
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--x-accent) 10%, transparent), transparent 42%),
    var(--card-bg, var(--surface, #fff));
}

.x-timeline-shell.is-loading .x-timeline-embed {
  opacity: 0;
  pointer-events: none;
}

.x-timeline-embed {
  min-height: var(--x-timeline-height, 520px);
  padding: 10px;
}

.x-timeline-embed iframe {
  max-width: 100% !important;
}

@keyframes jd-x-timeline-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .x-timeline-loading::before {
    animation: none;
  }
}

@media (max-width: 560px) {
  .x-timeline-shell {
    border-radius: 18px;
  }

  .x-timeline-actions,
  .x-timeline-button,
  .x-timeline-profile {
    width: 100%;
  }
}