/* Hanukkah: the auction card under the menorah rail, its price on a strip
   of silver foil crimped like the edge of a coin of gelt, the bid in
   lapis. 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, 14px);
  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: 2px; left: 0; right: 0; height: 12px; border-radius: 0; z-index: 2;
  background: var(--hk-rail);
}
.ed-card-auction.auction-ended-winner::before { filter: grayscale(.4) brightness(1.05); }
.ed-card-auction .ed-folio { color: var(--theme-600); }

/* The price row: polished silver foil, crimped along its top */
.ed-card-auction .flex.items-end.justify-between.border-t {
  position: relative;
  margin: 0 -.25rem; padding: 1.15rem 1rem .85rem;
  background:
    var(--hk-crimp-img) 0 0 / 6px 9px repeat-x,
    linear-gradient(180deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 50%),
    linear-gradient(100deg, #b7c3d8, #f4f7fb 30%, #d5dce8 58%, #aeb9cc);
  color: #0d1a3a;
  border: 0 !important;
  border-radius: 6px 6px 12px 12px;
  box-shadow: inset 0 0 0 1px rgba(93, 106, 130, .4), 0 6px 12px -8px rgba(13, 37, 100, .4);
}
html.dark .ed-card-auction .flex.items-end.justify-between.border-t {
  background:
    var(--hk-crimp-img) 0 0 / 6px 9px repeat-x,
    linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 50%),
    linear-gradient(100deg, #8a96ad, #dfe6f2 30%, #b7c3d8 58%, #7d8aa2);
}
.ed-card-auction .flex.items-end.justify-between.border-t * { color: #2a3a63 !important; }
.ed-card-auction .auction-current-bid,
.ed-card-auction .font-display.text-2xl { font-family: var(--font-display); font-weight: 800 !important; letter-spacing: -.01em; font-size: clamp(1.35rem, 5vw, 1.6rem); color: #123274 !important; overflow-wrap: normal; white-space: nowrap; }

.ed-card-auction .info-btn { border: 1px solid var(--rule) !important; color: var(--ink) !important; border-radius: 10px !important; }
.ed-card-auction .info-btn:hover { border-color: var(--theme-500) !important; color: var(--theme-600) !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 sheet the cards open on the homepage
   (components/home/modal-auction-info.php): white under the menorah rail */
html body #auctionInfoModal > div {
  position: relative;
  background: var(--hk-rail-img) 0 4px / 28px 12px repeat-x, var(--paper-2) !important;
  border: 1px solid var(--rule) !important;
  padding-top: 2.2rem !important;
  overflow: hidden;
}
html body #auctionInfoModal :is(h2, h3).font-display { font-family: var(--font-display); font-weight: 800; }

/* 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; }