/* pendingPaymentRecovery.css — the "you have a pending payment" banner
   (static/js/pendingPaymentRecovery.js), on /comanda, /cistella, /mercat,
   /parada. Full variant reuses the same white-card language as
   .tracking-payment-pending (static/css/comanda_tracking.css); the
   discreet variant is a single-line link, no card. */

.pending-recovery-banner--full {
  /* Red overlay LAYERED on top of the white box (not a flat mixed
     color) — the user's own distinction — so it's always a red wash
     over white, never a color mix against whatever sits behind it. */
  background: linear-gradient(rgba(220, 53, 69, 0.1), rgba(220, 53, 69, 0.1)), #fff;
  border: 1px solid #dc3545;
  border-radius: 16px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  padding: 14px;
  margin: 12px 0 16px;
  text-align: center;
}

.pending-recovery-text {
  margin: 0 0 12px;
  font-size: 0.9rem;
  font-weight: 700;
  color: #dc3545;
}

.pending-recovery-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* .btn-outline-pine's own background is transparent by design — here it
   sits over the card's red overlay, so it needs an explicit opaque white
   background of its own, not just the border/text styling. */
.pending-recovery-dismiss {
  background-color: #fff;
}
.pending-recovery-dismiss:hover,
.pending-recovery-dismiss:focus {
  background-color: #fff;
}

/* Wrapping strip so the area AROUND the button is continuous with the
   dark header background above/below it (mercat.html/parada.html's own
   `bg-forest` token), not a color break — the user's own request. */
.pending-recovery-banner-wrap {
  padding: 12px 16px;
}

/* Same shape/format as the site's own .btn-pill.btn-solid CTAs (e.g.
   "Explora tots els productes del mercat") — the user's own request —
   in the alert/danger color instead of the brand pine green, since this
   is a warning, not a regular call to action. .btn-pill (styles.css)
   already supplies height/padding/radius/font — only the color lives
   here (placement/spacing comes from the wrap above). */
.pending-recovery-banner--discreet {
  background: #dc3545;
  border-color: #dc3545;
  color: #fff;
  width: fit-content;
  max-width: 100%;
  white-space: normal;
  text-align: center;
}
.pending-recovery-banner--discreet:hover,
.pending-recovery-banner--discreet:focus {
  background: #b02a37;
  border-color: #b02a37;
  color: #fff;
}