/* Onam auction card: the lot set out on a banana leaf. A cream card under
   the kasavu border; the product rests on a strip of leaf with the chalk
   circles of a pookalam drawn on the floor behind it, the time left on a
   cream tile with a gold rim, the live mark a lamp flame, the price in
   Kurale. 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, 12px);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform .3s cubic-bezier(.3, 1.3, .5, 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-md); border-color: rgba(201, 162, 39, .55); }
@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 {
  top: 0; bottom: auto; left: 0; right: 0; height: 10px; border-radius: 0; z-index: 2;
  background: var(--onm-kasavu-top);
}
.ed-card-auction.auction-ended-winner::before { opacity: .55; }
.ed-card-auction .ed-folio { color: #fffaee; font-family: var(--font-num); padding: .15rem .5rem; background: rgba(13, 26, 18, .78); border-radius: 999px; }
.ed-card-auction h3 { font-family: var(--font-display); font-weight: 400; unicode-bidi: plaintext; }

/* The photo well: chalk circles on the floor behind, a strip of banana
   leaf in front for the lot to rest on */
.ed-card-auction > [class*="aspect-"] {
  border-bottom: 0 !important;
  background:
    linear-gradient(180deg, transparent 0 calc(86% - 1px), rgba(214, 236, 176, .7) calc(86% - 1px) calc(86% + 1px), transparent calc(86% + 1px)),
    linear-gradient(180deg, transparent 0 74%, #2e7d32 74%, #1f6a25),
    repeating-radial-gradient(circle at 50% 62%, transparent 0 18px, rgba(168, 146, 90, .2) 18px 19px),
    radial-gradient(80% 70% at 50% 55%, #fffcf2, #f3e8c8) !important;
}
html.dark .ed-card-auction > [class*="aspect-"] {
  background:
    linear-gradient(180deg, transparent 0 calc(86% - 1px), rgba(156, 204, 101, .4) calc(86% - 1px) calc(86% + 1px), transparent calc(86% + 1px)),
    linear-gradient(180deg, transparent 0 74%, #1f5a26 74%, #163f1c),
    repeating-radial-gradient(circle at 50% 62%, transparent 0 18px, rgba(111, 138, 95, .25) 18px 19px),
    radial-gradient(80% 70% at 50% 55%, rgba(251, 191, 36, .14), #12241a) !important;
}
.ed-card-auction > [class*="aspect-"] img { transform: translateY(-5%) scale(.7); filter: drop-shadow(0 10px 8px rgba(58, 46, 18, .35)); transition: transform .4s cubic-bezier(.3, 1.3, .5, 1); }
.ed-card-auction:hover > [class*="aspect-"] img { transform: translateY(-8%) scale(.7); }
@media (prefers-reduced-motion: reduce) { .ed-card-auction:hover > [class*="aspect-"] img { transform: translateY(-5%) scale(.7); } }
/* The live mark and the time left */
.ed-card-auction > [class*="aspect-"] > .absolute.top-3.right-4 { padding: .26rem .6rem .2rem; background: #2e7d32; color: #fffaee !important; border-radius: 999px; box-shadow: inset 0 -2px 0 #c9a227, 0 2px 0 #1b5e20; font-weight: 700; letter-spacing: .08em; }
.ed-card-auction > [class*="aspect-"] > .absolute.top-3.right-4 [style*="#16a34a"] { background: #fbbf24 !important; border-radius: 50% 50% 50% 50% / 64% 64% 36% 36% !important; box-shadow: 0 0 6px rgba(251, 191, 36, .9); }
.ed-card-auction > [class*="aspect-"] > .absolute.bottom-3.left-4 {
  padding: .3rem .65rem .26rem; border-radius: 10px;
  background: #fffaee; color: #2b2312 !important;
  box-shadow: inset 0 0 0 1.5px #c9a227, inset 0 -3px 0 #c9a227, 0 4px 10px -4px rgba(58, 46, 18, .5);
}
html.dark .ed-card-auction > [class*="aspect-"] > .absolute.bottom-3.left-4 { background: #1b3122; color: #f6efd9 !important; box-shadow: inset 0 0 0 1.5px #e2bb4c, inset 0 -3px 0 #e2bb4c, 0 4px 10px -4px rgba(0, 0, 0, .6); }
.ed-card-auction > [class*="aspect-"] > .absolute.bottom-3.left-4 [data-end] { font-family: var(--font-num) !important; font-size: 14px; letter-spacing: 0; color: inherit !important; opacity: 1 !important; font-variant-numeric: tabular-nums lining-nums; }

/* The price row, over a fine gold rule */
.ed-card-auction .flex.items-end.justify-between.border-t {
  position: relative;
  margin: 0; padding: .9rem 0 .2rem;
  background: none;
  border: 0 !important;
  border-top: 1px solid var(--rule) !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; letter-spacing: .08em; }
.ed-card-auction .auction-current-bid,
.ed-card-auction .font-display.text-2xl { font-family: var(--font-num); font-weight: 400 !important; letter-spacing: 0; font-size: clamp(1.35rem, 5vw, 1.6rem); color: var(--ink) !important; overflow-wrap: normal; white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }

.ed-card-auction .info-btn { border: 1.5px solid var(--onm-gold) !important; color: var(--ink) !important; border-radius: 50% !important; background: var(--paper-2); box-shadow: 0 2px 0 var(--onm-gold-deep); transition: transform .12s ease, box-shadow .12s ease, background-color .2s ease; }
.ed-card-auction .info-btn:hover { background: var(--onm-mari-soft); }
.ed-card-auction .info-btn :is(svg, i) { color: var(--ink) !important; }
.ed-card-auction .info-btn:active { transform: translateY(2px); box-shadow: none; }
/* The status word inside the badge takes the badge's own ink */
.ed-status [style*="--ink-soft"] { color: inherit !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; }

/* Pointed at or focused, the card's button keeps the base button colours:
   the lighter hover colour drops its label under 4.5:1. */
html body .ed-card-auction .ed-btn-primary:is(:hover, :focus-visible),
html.dark body .ed-card-auction .ed-btn-primary:is(:hover, :focus-visible) { background: var(--btn-bg); color: var(--btn-ink); }

/* Pointed at or focused, the info button's icon takes the ink: the
   plugin's own hover sets it to --paper, the same tone as this fill. */
.ed-card-auction .info-btn:is(:hover, :focus-visible), .ed-card-auction .info-btn:is(:hover, :focus-visible) svg { color: var(--ink) !important; }