/* Summer Sale: the auction card under a strip of deckchair canvas, its
   price on a patch of warm sand with the tide's edge along its top.
   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: 9px; border-radius: 0; z-index: 2;
  background: var(--deckchair);
}
.ed-card-auction.auction-ended-winner::before { background: repeating-linear-gradient(90deg, #ffc531 0 12px, #fff8ec 12px 17px); }
.ed-card-auction .ed-folio { color: var(--theme-600); }

/* The price row: sand, scalloped along its top where the last wave reached */
.ed-card-auction .flex.items-end.justify-between.border-t {
  position: relative;
  margin: .4rem -.25rem 0; padding: 1.05rem 1rem .8rem;
  background:
    radial-gradient(circle at 20% 40%, rgba(255, 255, 255, .45) 0 1px, transparent 1.5px) 0 0 / 8px 8px,
    #f8e6c2;
  color: #10324a;
  border: 0 !important;
  border-radius: 4px 4px 14px 14px;
}
.ed-card-auction .flex.items-end.justify-between.border-t::before {
  content: ''; position: absolute; left: 0; right: 0; top: -6px; height: 8px; pointer-events: none;
  background: radial-gradient(6px 6px at 6px 6px, #f8e6c2 98%, transparent) 0 0 / 12px 8px repeat-x;
}
html.dark .ed-card-auction .flex.items-end.justify-between.border-t { background: radial-gradient(circle at 20% 40%, rgba(255, 255, 255, .35) 0 1px, transparent 1.5px) 0 0 / 8px 8px, #efdcb4; }
html.dark .ed-card-auction .flex.items-end.justify-between.border-t::before { background-image: radial-gradient(6px 6px at 6px 6px, #efdcb4 98%, transparent); }
.ed-card-auction .flex.items-end.justify-between.border-t * { color: #2f4f66 !important; }
.ed-card-auction .auction-current-bid,
.ed-card-auction .flex.items-end.justify-between.border-t .font-display.text-2xl { font-family: var(--font-display); font-weight: 800 !important; font-size: clamp(1.35rem, 4.5vw, 1.6rem); overflow-wrap: normal; color: #c0392a !important; }

.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; }

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