/* Back to School: the auction card as an index card held up by a strip of
   washi tape, its price on a yellow sticky note. 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: visible;
}
.ed-card-auction:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.ed-card-auction::before, html.dark .ed-card-auction::before {
  top: -10px; left: 50%; right: auto; width: 76px; height: 20px; margin-left: -38px; border-radius: 0; z-index: 6;
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .35) 0 5px, transparent 5px 10px), rgba(169, 226, 200, .9);
  clip-path: polygon(3% 0, 97% 4%, 100% 30%, 97% 52%, 100% 76%, 96% 100%, 4% 96%, 0 74%, 3% 50%, 0 24%);
  transform: rotate(-2deg);
}
.ed-card-auction:nth-child(3n+2)::before { background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .35) 0 5px, transparent 5px 10px), rgba(255, 179, 199, .9); transform: rotate(2deg); }
.ed-card-auction:nth-child(3n+3)::before { background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .35) 0 5px, transparent 5px 10px), rgba(181, 211, 255, .9); }
.ed-card-auction.auction-ended-winner::before { background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .35) 0 5px, transparent 5px 10px), rgba(255, 217, 90, .95); }
.ed-card-auction .ed-folio { color: var(--theme-600); }

/* The price row: a sticky note, its gummed strip along the top and a
   curled corner */
.ed-card-auction .flex.items-end.justify-between.border-t {
  position: relative;
  margin: 0 -.25rem; padding: 1.05rem 1rem .8rem;
  background: linear-gradient(180deg, rgba(0, 0, 0, .05) 0 8px, transparent 8px), #fff1a6;
  color: #1f2a44;
  border: 0 !important;
  border-radius: 2px 2px 14px 2px / 2px 2px 8px 2px;
  box-shadow: 4px 8px 12px -10px rgba(31, 42, 68, .6);
}
[dir="rtl"] .ed-card-auction .flex.items-end.justify-between.border-t { border-radius: 2px 2px 2px 14px / 2px 2px 2px 8px; }
.ed-card-auction .flex.items-end.justify-between.border-t * { color: #3c4763 !important; }
.ed-card-auction .auction-current-bid,
.ed-card-auction .font-display.text-2xl {
  font-family: var(--font-display); font-weight: 800 !important;
  font-size: clamp(1.3rem, 5vw, 1.65rem); color: #2f5fc4 !important;
  overflow-wrap: normal; word-break: normal;
}

.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 frame at the weight the theme's home skin gave it, so it still
   wins over the plain rules above. */
html body .ed-card-auction {
  position: relative;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius, 14px);
  box-shadow: var(--shadow);
}
/* Titles come from the database with no dir; in Arabic and Urdu an
   English name keeps its own order. */
html[dir="rtl"] body .ed-card-auction :is(h2, h3, h4) { unicode-bidi: plaintext; }

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