/* ================================================================
   Macondo cards — MetricCard, OfferCard, AlertBanner (Message)
   Cards use 1px borders + 12px radius, never drop shadows.
   ================================================================ */

/* ---------- Metric ---------- */
.sp-metric {
  display: flex;
  flex-direction: column;
  gap: var(--space-300);
  padding: var(--space-400);
  border: 1px solid var(--border-primary);
  border-radius: var(--border-radius-card-sm);
  background: var(--background);
  min-width: var(--space-5600);
  box-sizing: border-box;
}
.sp-metric__subtext { font-size: var(--caption-font-size); line-height: var(--caption-line-height); font-weight: var(--font-weight-medium); color: var(--typography-secondary); }
.sp-metric__row { display: flex; align-items: center; gap: var(--space-200); }
.sp-metric__figure { font-size: var(--h3-font-size); line-height: var(--h3-line-height); font-weight: var(--font-weight-medium); color: var(--typography-primary); }

/* ---------- Offer ---------- */
.sp-offer {
  display: flex;
  flex-direction: column;
  gap: var(--space-400);
  width: var(--space-9000);
  padding: var(--space-400);
  border: 1px solid var(--border-primary);
  border-radius: var(--border-radius-card-sm);
  background: var(--surface-primary);
  box-sizing: border-box;
}
.sp-offer__text { display: flex; flex-direction: column; gap: var(--space-200); }
.sp-offer__header { font-size: var(--body-font-size); line-height: var(--body-line-height); color: var(--typography-primary); }
.sp-offer__subtext { font-size: var(--callout-font-size); line-height: var(--callout-line-height); color: var(--typography-secondary); }
.sp-offer__badges { display: flex; gap: var(--space-300); flex-wrap: wrap; }
.sp-offer__footer { display: flex; flex-direction: column; gap: var(--space-300); color: var(--typography-secondary); font-size: var(--callout-font-size); line-height: var(--callout-line-height); }
.sp-offer__footer hr { width: 100%; border: none; border-top: 1px solid var(--border-primary); margin: 0; }

/* ---------- Alert banner (Message) ---------- */
.sp-alert {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: var(--space-400);
  padding: var(--space-400);
  border: none;
  border-radius: var(--border-radius-lg);
  font-size: var(--body-font-size);
  line-height: var(--body-line-height);
  color: var(--typography-primary);
  text-align: left;
  box-sizing: border-box;
}
.sp-alert--info { background: var(--info-surface); }
.sp-alert--success { background: var(--success-surface); }
.sp-alert--warning { background: var(--warning-surface); }
.sp-alert--critical { background: var(--critical-surface); }

.sp-alert__head { display: flex; gap: var(--space-200); align-items: flex-start; }
.sp-alert__title { font-weight: var(--font-weight-medium); align-self: center; }
.sp-alert__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--space-600);
  height: var(--space-600);
  flex-shrink: 0;
  padding: var(--space-100);
  box-sizing: border-box;
  border-radius: var(--border-radius-icon-circle);
  color: var(--surface-primary);
}
.sp-alert__icon i { font-size: 16px; }
.sp-alert--info .sp-alert__icon { background: var(--info-fill); }
.sp-alert--success .sp-alert__icon { background: var(--success-fill); }
.sp-alert--warning .sp-alert__icon { background: var(--warning-fill); }
.sp-alert--critical .sp-alert__icon { background: var(--critical-fill); }
.sp-alert__body { display: flex; flex-direction: column; gap: var(--space-400); min-width: 0; }
.sp-alert__dismiss { position: absolute; top: var(--space-400); right: var(--space-400); }