/*
  GolfPrice AI — "Show Us The Receipts" page styles
  ----------------------------------------------------
  Uses the same CSS variables defined in css/style.css (--ink, --green,
  --green-dark, --green-pale, --border, --muted, --radius, --shadow), so
  this always matches the rest of the site automatically, even if the
  palette changes later. Loaded after style.css on receipts.html, so the
  variables are already in scope. The intro card itself reuses the
  shared .theme-banner class from style.css rather than a custom style.
*/

.receipts-status {
  text-align: center;
  color: var(--muted);
  padding: 40px 20px;
  font-size: 1rem;
  line-height: 1.6;
}

.receipts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}

.receipt-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  transition: transform 0.15s ease;
}

.receipt-card:hover {
  transform: translateY(-3px);
}

.receipt-card-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #f1f2ef;
  padding: 12px;
  box-sizing: border-box;
}

.receipt-card-body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.receipt-drop-badge {
  align-self: flex-start;
  background: var(--green-pale);
  color: var(--green-dark);
  border: 1px solid var(--green);
  font-weight: bold;
  font-size: 0.8rem;
  padding: 3px 10px;
  border-radius: 999px;
}

.receipt-card-name {
  font-size: 0.95rem;
  color: var(--ink);
  font-weight: bold;
  line-height: 1.35;
  margin: 0;
}

.receipt-card-brand {
  font-size: 0.8rem;
  color: var(--muted);
  margin: 0;
}

.receipt-price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 4px;
}

.receipt-price-now {
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--ink);
}

.receipt-price-was {
  font-size: 0.9rem;
  color: var(--muted);
  text-decoration: line-through;
}

.receipt-proof-line {
  font-size: 0.75rem;
  color: var(--green-dark);
  font-weight: bold;
  margin: 0;
}

.receipt-buy-link {
  margin-top: auto;
  display: block;
  text-align: center;
  background: var(--ink);
  color: #ffffff;
  font-weight: bold;
  text-decoration: none;
  padding: 10px 0;
  border-radius: 6px;
  font-size: 0.9rem;
}

.receipt-buy-link:hover {
  background: var(--green);
}

.receipts-footnote {
  max-width: 700px;
  margin: 20px auto 60px;
  padding: 0 20px;
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.6;
  text-align: center;
}