.fare-estimate-card {
  margin: 18px 0;
  padding: 18px;
  border-radius: 24px;
  background: linear-gradient(180deg, #071d33, #0b3158);
  color: #ffffff;
  box-shadow: 0 18px 45px rgba(7, 29, 51, .18);
}

.fare-estimate-card.is-empty {
  background: #f8fafc;
  color: #64748b;
  border: 1px solid #e2e8f0;
  box-shadow: none;
}

.fare-estimate-card.is-loading {
  background: linear-gradient(180deg, #0b3158, #0068a9);
}

.fare-estimate-card.is-unavailable {
  background: #fff7ed;
  color: #9a3412;
  border: 1px solid #fed7aa;
  box-shadow: none;
}

.fare-estimate-label {
  margin: 0 0 8px;
  color: #f5c400;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.fare-estimate-card.is-empty .fare-estimate-label,
.fare-estimate-card.is-unavailable .fare-estimate-label {
  color: #0068a9;
}

.fare-estimate-main {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
}

.fare-estimate-price small {
  display: block;
  margin-bottom: 4px;
  color: rgba(255,255,255,.72);
  font-weight: 800;
}

.fare-estimate-card.is-empty .fare-estimate-price small,
.fare-estimate-card.is-unavailable .fare-estimate-price small {
  color: inherit;
}

.fare-estimate-price strong {
  display: block;
  color: #f5c400;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: -.06em;
}

.fare-estimate-card.is-empty .fare-estimate-price strong,
.fare-estimate-card.is-unavailable .fare-estimate-price strong {
  color: inherit;
  font-size: 1rem;
  letter-spacing: 0;
}

.fare-estimate-meta {
  display: grid;
  gap: 6px;
  text-align: right;
  font-size: .85rem;
  font-weight: 800;
  color: rgba(255,255,255,.78);
}

.fare-estimate-card.is-empty .fare-estimate-meta,
.fare-estimate-card.is-unavailable .fare-estimate-meta {
  color: inherit;
}

.fare-estimate-footnote {
  margin: 14px 0 0;
  font-size: .82rem;
  line-height: 1.45;
  color: rgba(255,255,255,.7);
  font-weight: 700;
}

.fare-estimate-card.is-empty .fare-estimate-footnote,
.fare-estimate-card.is-unavailable .fare-estimate-footnote {
  color: inherit;
}

@media (max-width: 720px) {
  .fare-estimate-main {
    display: grid;
    gap: 12px;
  }

  .fare-estimate-meta {
    text-align: left;
  }
}