/* LSPF Stripe — front-end styles. Override in theme: lspf-stripe/lspf-stripe.css */

.lspf-orders {
  padding: 2rem 1rem;
}
.lspf-orders__container {
  max-width: 1100px;
  margin: 0 auto;
}
.lspf-orders__title {
  font-size: 2rem;
  margin: 0 0 2rem;
}

.lspf-orders__empty {
  color: #666;
  font-style: italic;
}

.lspf-orders__list,
.lspf-orders ul.lspf-orders__list {
  list-style: none !important;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.25rem;
}

.lspf-orders__list > .lspf-orders__item {
  display: flex;
  justify-content: space-between;
  list-style: none !important;
  border: 1px solid #e3e3e3;
  border-radius: 6px;
  padding: 1rem 1.25rem;
  background: #fff;
}

.lspf-orders__list > .lspf-orders__item::marker {
  content: "";
}

.lspf-orders__item--paid {
  border-left: 4px solid #2a9d2a;
}
.lspf-orders__item--pending {
  border-left: 4px solid #d4a017;
}
.lspf-orders__item--failed,
.lspf-orders__item--expired {
  border-left: 4px solid #b91c1c;
}

.lspf-orders__item-status {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  font-size: 1rem;
  padding: 0.5rem 1.25rem;
  border-radius: 8px;
  border: 1px solid transparent;
}

.lspf-orders__item--paid .lspf-orders__item-status {
  background: #d6f4d6;
  border-color: #8fd18f;
  color: #1d6b1d;
}
.lspf-orders__item--pending .lspf-orders__item-status {
  background: #fff4ce;
  border-color: #e6c547;
  color: #6b5200;
}
.lspf-orders__item--expired .lspf-orders__item-status {
  background: #e5e5e5;
  border-color: #b5b5b5;
  color: #555;
}
.lspf-orders__item--failed .lspf-orders__item-status {
  background: #f9d6d6;
  border-color: #d18f8f;
  color: #6b1d1d;
}

.lspf-orders__item-name {
  font-size: 1.1rem;
  margin: 0 0 0.25rem;
}
.lspf-orders__item-amount {
  font-weight: 600;
  margin: 0 0 0.25rem;
}
.lspf-orders__item-date {
  color: #888;
  font-size: 0.85rem;
  margin: 0;
}

.lspf-stripe-payment-button {
  display: inline-block;
  width: 100%;
  background: #c1202f;
  color: #fff;
  border-radius: 8px;
  padding: 0.75rem 1.25rem;
  text-align: center;
  text-decoration: none;
  border: none;
  box-sizing: border-box;
}

.lspf-stripe-payment-button:hover,
.lspf-stripe-payment-button:focus {
  background: #a81b28;
  color: #fff;
}