/* Prism auction card: a white card on a soft shadow. The product sits
   in a pale well; the time left is a dark chip, the live state an accent
   chip, and the price is set in the figure face. Builds on the plugin's
   own card styles. */
@import url("../../../components/auction_card.css");

.ed-card-auction, html.dark .ed-card-auction {
  position: relative;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform .35s cubic-bezier(.2, .8, .3, 1), box-shadow .3s ease, border-color .2s ease;
}
.ed-card-auction:hover, .ed-card-auction:focus-within { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--psm-accent-line); }
@media (prefers-reduced-motion: reduce) { .ed-card-auction:hover, .ed-card-auction:focus-within { transform: none; } }
.ed-card-auction::before, html.dark .ed-card-auction::before { display: none; }
.ed-card-auction .ed-folio { color: var(--ink-soft); font-family: var(--font-num); font-weight: 500; }
.ed-card-auction h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.12rem; line-height: 1.2; letter-spacing: -.01em; unicode-bidi: plaintext; }

/* The photo well */
.ed-card-auction > [class*="aspect-"] { border-bottom: 0 !important; background: var(--paper-3) !important; margin: 8px; border-radius: calc(var(--radius) - 8px); overflow: hidden; }
.ed-card-auction > [class*="aspect-"] img { transform: scale(.82); transition: transform .45s cubic-bezier(.2, .8, .3, 1); }
.ed-card-auction:hover > [class*="aspect-"] img { transform: scale(.88); }
@media (prefers-reduced-motion: reduce) { .ed-card-auction:hover > [class*="aspect-"] img { transform: scale(.82); } }
/* The live state on an accent chip and the time left on a dark chip */
.ed-card-auction > [class*="aspect-"] > .absolute.top-3.right-4 { padding: .24rem .65rem; background: var(--psm-accent); color: var(--psm-on-accent) !important; border-radius: 999px; font-family: var(--font-ui); font-weight: 600; letter-spacing: .04em; }
.ed-card-auction > [class*="aspect-"] > .absolute.top-3.right-4 [style*="#16a34a"] { background: currentColor !important; }
.ed-card-auction > [class*="aspect-"] > .absolute.bottom-3.left-4 { padding: .3rem .7rem; border-radius: 999px; background: var(--psm-panel); color: var(--psm-on-panel) !important; }
.ed-card-auction > [class*="aspect-"] > .absolute.bottom-3.left-4 [data-end] { font-family: var(--font-num) !important; font-weight: 600; font-size: 12.5px; color: inherit !important; opacity: 1 !important; font-variant-numeric: tabular-nums; }

/* The price row */
.ed-card-auction .flex.items-end.justify-between.border-t { margin: 0; padding: .85rem 0 .2rem; background: none; border: 0 !important; border-top: 1px solid var(--rule-soft) !important; border-radius: 0; box-shadow: none; }
.ed-card-auction .flex.items-end.justify-between.border-t :is(span, p, div):not(.auction-current-bid):not(.font-display) { color: var(--ink-soft) !important; }
.ed-card-auction .auction-current-bid,
.ed-card-auction .font-display.text-2xl { font-family: var(--font-num); font-weight: 600 !important; font-size: clamp(1.2rem, 4.4vw, 1.4rem); color: var(--ink) !important; overflow-wrap: normal; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* The info button: a round white button that fills with the accent; its
   icon takes the accent's own ink with it */
.ed-card-auction .info-btn { border: 1px solid var(--rule) !important; color: var(--ink) !important; border-radius: 999px !important; background: var(--paper-2); transition: transform .15s ease, background-color .2s ease, border-color .2s ease; }
.ed-card-auction .info-btn :is(svg, i) { color: inherit !important; }
.ed-card-auction .info-btn:hover { background: var(--psm-accent); border-color: transparent !important; }
.ed-card-auction .info-btn:hover, .ed-card-auction .info-btn:hover :is(svg, i) { color: var(--psm-on-accent) !important; }
.ed-card-auction .info-btn:active { transform: scale(.94); }
.ed-card-auction .ed-btn-primary:hover, html.dark .ed-card-auction .ed-btn-primary:hover { background: var(--btn-face), var(--btn-bg); color: var(--btn-ink); border-color: transparent; }
/* The status word inside the badge takes the badge's own ink */
.ed-status [style*="--ink-soft"] { color: inherit !important; }