/* Carnival: the auction card under a harlequin band, its price on the
   side of a parade float — a gold rail of bulbs over sequins shading
   from magenta to violet, the bid in gold. 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, 18px);
  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: 12px; border-radius: 0; z-index: 2;
  background: var(--harlequin); background-size: 69px 12px;
}
.ed-card-auction .ed-folio { color: var(--theme-600); }

.ed-card-auction .flex.items-end.justify-between.border-t {
  position: relative;
  margin: 0 -.25rem; padding: 1.15rem 1rem .8rem;
  background: var(--deck, linear-gradient(100deg, #c4106a, #4b1fa8));
  color: #fff4df;
  border: 0 !important;
  border-radius: 14px;
  box-shadow: inset 0 -4px 0 #ffbe1a;
}
.ed-card-auction .flex.items-end.justify-between.border-t * { color: rgba(255, 244, 223, .86) !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: clamp(1.35rem, 4.5vw, 1.7rem); color: #ffd45c !important;
  overflow-wrap: normal; word-break: normal; white-space: nowrap;
}

.ed-card-auction .info-btn { border: 1px solid var(--rule) !important; color: var(--ink) !important; border-radius: 999px !important; }
.ed-card-auction .info-btn:hover { border-color: var(--theme-500) !important; color: var(--theme-600) !important; }

/* Pointed at or focused, the card's button keeps the base button colours:
   the lighter hover colour drops its label under 4.5:1. */
html body .ed-card-auction .ed-btn-primary:is(:hover, :focus-visible),
html.dark body .ed-card-auction .ed-btn-primary:is(:hover, :focus-visible) { background: var(--btn-bg); color: var(--btn-ink); }

/* The info button's hover colours its icon in the accent on the card
   itself; the plugin's own hover would put a solid ink fill behind it. */
.ed-card-auction .info-btn:is(:hover, :focus-visible) { background: transparent; }