/* Lucky Stars: the auction card is a catalogue plate under the
   neatline, the lot on a patch of chart washed in one of the atlas's
   inks, the price a reading in a cartouche. 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: 0;
  border-radius: 2px;
  box-shadow: var(--plate-drop);
  transition: transform .25s ease, box-shadow .25s ease;
}
.ed-card-auction:hover, .ed-card-auction:focus-within { transform: translateY(-3px); box-shadow: var(--plate-lift); }
@media (prefers-reduced-motion: reduce) { .ed-card-auction, .ed-card-auction:hover { transition: none; transform: none; } }
.ed-card-auction::before, html.dark .ed-card-auction::before {
  top: 0; left: 0; right: 0; height: 7px; border-radius: 0; z-index: 2;
  background: var(--neatline);
}
.ed-card-auction.auction-ended-winner::before { filter: saturate(.4); }
.ed-card-auction .ed-folio { color: var(--brass-ink); font-family: var(--font-ui); }
.ed-card-auction .aspect-\[4\/3\] {
  background: radial-gradient(70% 60% at 50% 50%, rgba(168, 121, 43, .12), transparent 70%), var(--graticule), var(--paper) !important;
}
html.dark .ed-card-auction .aspect-\[4\/3\] {
  background: radial-gradient(70% 60% at 50% 50%, rgba(98, 230, 201, .12), transparent 70%), var(--graticule), #0a0d29 !important;
}
.ed-card-auction .aspect-\[4\/3\] img { filter: drop-shadow(0 10px 12px rgba(19, 32, 74, .22)); }
html.dark .ed-card-auction .aspect-\[4\/3\] img { filter: drop-shadow(0 0 16px rgba(160, 170, 255, .25)); }

/* The price row: a reading in a cartouche */
.ed-card-auction .flex.items-end.justify-between.border-t {
  position: relative;
  margin: 0 .1rem; padding: .85rem 1rem .75rem;
  background: var(--paper);
  border: 1px solid var(--ink) !important;
  border-radius: 2px;
  box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 4px rgba(var(--theme-500-rgb), .5);
  -webkit-mask: var(--cartouche); mask: var(--cartouche);
}
.ed-card-auction .flex.items-end.justify-between.border-t * { color: var(--ink-soft) !important; }
.ed-card-auction .auction-current-bid,
.ed-card-auction .font-display.text-2xl { font-family: var(--font-ui); font-weight: 700 !important; letter-spacing: 0; font-size: clamp(1.3rem, 5vw, 1.55rem); color: var(--ink) !important; font-variant-numeric: tabular-nums; overflow-wrap: normal; white-space: nowrap; }

.ed-card-auction .info-btn { border: 0 !important; box-shadow: var(--plate); color: var(--ink) !important; border-radius: 50% !important; background: var(--paper-2); }
.ed-card-auction .info-btn:hover { box-shadow: 0 0 0 1px var(--brass); color: var(--brass-ink) !important; }
/* The skin's ink for filled icon tiles also catches this round button, which has no fill; the icon follows the button. :is(#_) only lifts specificity past the tile rule. */
html body #px-spa-content .ed-card-auction .info-btn:is(.info-btn, #_) > svg { color: inherit !important; transform: none !important; filter: none !important; }

/* The info button fills with ink on hover; its icon takes the paper colour
   with it instead of keeping the ink it has at rest. */
.ed-card-auction .info-btn:hover,
.ed-card-auction .info-btn:hover :is(svg, i) { color: var(--paper) !important; }