/* Holi: the auction card under a band of colour, its price on a white
   panel with a dab of powder behind it. Builds on the plugin's own card
   styles. */
@import url("../../../components/auction_card.css");

.ed-card-auction, html.dark .ed-card-auction {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius, 16px);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.ed-card-auction:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.ed-card-auction::before, html.dark .ed-card-auction::before {
  top: 0; left: 0; right: 0; height: 6px; border-radius: 0;
  background: linear-gradient(90deg, var(--c1) 0 20%, var(--c2) 0 40%, var(--c3) 0 60%, var(--c4) 0 80%, var(--c5) 0); z-index: 2;
}
.ed-card-auction.auction-ended-winner::before { background: var(--c4); }
.ed-card-auction .ed-folio { color: var(--theme-600); }

/* The price row: white, with a soft cloud of colour behind the figure */
.ed-card-auction .flex.items-end.justify-between.border-t {
  position: relative; overflow: hidden;
  margin: 0 -.25rem; padding: .95rem 1rem .8rem;
  background:
    radial-gradient(120px 70px at 18% 60%, rgba(226, 24, 126, .16), transparent 70%),
    radial-gradient(90px 60px at 96% 10%, rgba(247, 162, 27, .2), transparent 70%),
    #ffffff;
  color: #1f1b3a;
  border: 0 !important;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(31, 27, 58, .1);
}
.ed-card-auction .flex.items-end.justify-between.border-t * { color: #3d3760 !important; }
.ed-card-auction .auction-current-bid,
.ed-card-auction .font-display.text-2xl { font-family: var(--font-display); font-weight: 800 !important; font-size: 1.7rem; color: #c00f68 !important; }

.ed-card-auction .info-btn { border: 1px solid var(--rule) !important; border-radius: 12px !important; }
/* The plugin fills a hovered button with ink; the theme's accent instead,
   with the "i" in the ink that reads on it */
.ed-card-auction .info-btn:hover { background: var(--theme-600) !important; border-color: var(--theme-600) !important; color: var(--theme-600-ink) !important; }