/* Cherry Blossom: the auction card under the blossom band, its price on a
   slip of washi outlined by the key block with the red seal stamped in its
   corner. 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, 10px);
  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: 14px; border-radius: 0; z-index: 2;
  background: var(--cb-band);
}
.ed-card-auction.auction-ended-winner::before { background: var(--cb-band); filter: hue-rotate(-20deg) saturate(1.3); }
.ed-card-auction .ed-folio { color: var(--theme-600); }

/* The price row: a slip of washi, the seal stamped in its corner */
.ed-card-auction .flex.items-end.justify-between.border-t {
  position: relative;
  margin: 0 -.25rem; padding: .95rem 2.6rem .8rem 1rem;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><path d='M3.5 4.2L20 3.2L36.4 4L36.9 20L36 36.3L20.5 37L3.8 36.1L3 20.6Z' fill='%23c8372d'/><path d='M6.6 6.8H33.4V33.2H6.6Z' fill='none' stroke='%23fbf4e8' stroke-width='1.4'/><g fill='%23fbf4e8'><circle cx='20' cy='13.5' r='4'/><circle cx='26.2' cy='18' r='4'/><circle cx='23.8' cy='25.4' r='4'/><circle cx='16.2' cy='25.4' r='4'/><circle cx='13.8' cy='18' r='4'/></g><circle cx='20' cy='20' r='2.4' fill='%23c8372d'/></svg>") no-repeat right 10px top 10px / 20px 20px, #fffaf1;
  color: #1c2848;
  border: 0 !important;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px #1f2f57, inset 0 0 0 3px #fffaf1, inset 0 0 0 4px rgba(31, 47, 87, .35), 0 6px 12px -8px rgba(28, 40, 72, .35);
}
[dir="rtl"] .ed-card-auction .flex.items-end.justify-between.border-t { padding: .95rem 1rem .8rem 2.6rem; background-position: left 10px top 10px, 0 0; }
html.dark .ed-card-auction .flex.items-end.justify-between.border-t { background-color: #fbf2ea; box-shadow: inset 0 0 0 1px #070b1c, inset 0 0 0 3px #fbf2ea, inset 0 0 0 4px rgba(7, 11, 28, .4), 0 0 22px -8px rgba(255, 179, 90, .45); }
.ed-card-auction .flex.items-end.justify-between.border-t * { color: #34416a !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: -.02em; font-size: clamp(1.35rem, 5vw, 1.6rem); color: #24407a !important; overflow-wrap: normal; white-space: nowrap; }

.ed-card-auction .info-btn { border: 1px solid var(--rule) !important; color: var(--ink) !important; border-radius: 8px !important; }
.ed-card-auction .info-btn:hover { border-color: var(--theme-500) !important; color: var(--theme-600) !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; }