/* =============================================================================
   Details & Timeline Components
   TASK-041/042: Payment details and timeline styles
   ============================================================================= */

/* Details List */
.billing-details-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.billing-details-list__item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--border-default);
}

.billing-details-list__item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.billing-details-list__item dt {
  font-size: var(--text-size-sm);
  color: var(--text-muted);
  flex-shrink: 0;
}

.billing-details-list__item dd {
  font-size: var(--text-size-sm);
  color: var(--text-primary);
  text-align: right;
  margin: 0;
  word-break: break-all;
}

.billing-details-list__amount {
  font-weight: 600;
  font-size: var(--text-size-base) !important;
  font-variant-numeric: tabular-nums;
}

/* Code display */
.billing-code {
  font-family: var(--font-mono);
  font-size: var(--text-size-xs);
  background: var(--bg-elevated);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  user-select: all;
}

/* Timeline */
.billing-timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}

.billing-timeline::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--border-default);
}

.billing-timeline__item {
  position: relative;
  padding-left: var(--space-xl);
  padding-bottom: var(--space-lg);
}

.billing-timeline__item:last-child {
  padding-bottom: 0;
}

.billing-timeline__marker {
  position: absolute;
  left: 0;
  top: 2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 2px solid var(--border-default);
  z-index: 1;
}

.billing-timeline__item--completed .billing-timeline__marker {
  background: var(--success);
  border-color: var(--success);
}

.billing-timeline__item--completed .billing-timeline__marker::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  background: white;
  border-radius: 50%;
}

.billing-timeline__item--failed .billing-timeline__marker {
  background: var(--error);
  border-color: var(--error);
}

.billing-timeline__item--cancelled .billing-timeline__marker,
.billing-timeline__item--expired .billing-timeline__marker {
  background: var(--text-muted);
  border-color: var(--text-muted);
}

.billing-timeline__item--refunded .billing-timeline__marker {
  background: var(--info);
  border-color: var(--info);
}

.billing-timeline__item--pending .billing-timeline__marker {
  background: var(--warning);
  border-color: var(--warning);
  animation: billing-pulse 2s infinite;
}

.billing-timeline__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.billing-timeline__label {
  font-size: var(--text-size-sm);
  font-weight: 500;
  color: var(--text-primary);
}

.billing-timeline__time {
  font-size: var(--text-size-xs);
  color: var(--text-muted);
}

@keyframes billing-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--warning) 40%, transparent);
  }
  50% {
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--warning) 0%, transparent);
  }
}