/* Advent Market instant bid: quick picks are cream gift tags, the steppers
   small calendar doors. The panel's awning is in skin/home.css. */
@import url("../../../components/instant_bid_modal.css");

.ibm-step { border-radius: 6px !important; }
.ibm-step:hover { background: var(--btn-bg) !important; color: var(--btn-ink) !important; border-color: transparent !important; }
.ibm-bid-input { font-family: var(--font-display) !important; font-weight: 700 !important; border-radius: 10px !important; }
.ibm-bid-input:focus { border-color: var(--a2) !important; box-shadow: 0 0 0 4px var(--a3-soft); }
.ibm-pill { border-radius: 0 6px 6px 0 !important; padding-inline-start: 1rem !important; clip-path: polygon(.4rem 0, 100% 0, 100% 100%, .4rem 100%, 0 50%); font-family: var(--font-display); font-size: .8rem; font-weight: 700; background: radial-gradient(circle at .5rem 50%, var(--paper-2) 0 2px, #c9973f 2.5px 3.3px, transparent 3.7px), #fdf3dc; color: #1d2a22; border: 0; }
[dir="rtl"] .ibm-pill { border-radius: 6px 0 0 6px !important; padding-inline-start: .7rem !important; padding-inline-end: 1rem !important; clip-path: polygon(0 0, calc(100% - .4rem) 0, 100% 50%, calc(100% - .4rem) 100%, 0 100%); background: radial-gradient(circle at calc(100% - .5rem) 50%, var(--paper-2) 0 2px, #c9973f 2.5px 3.3px, transparent 3.7px), #fdf3dc; }
.ibm-pill:hover { background-color: var(--btn-bg); color: var(--btn-ink); }
.ibm-pill-max { background-color: #c8283a; color: #fdf3dc; }
.ibm-pill-min { background-color: var(--a3-soft); color: var(--ink-2); }
.ibm-full-link:hover { color: var(--theme-600); }
html.dark .ibm-pill { color: #1d2a22; }
html.dark .ibm-pill-max { color: #fdf3dc; }
html.dark .ibm-pill-min { color: var(--ink-2); }

/* The prize name comes from the database: it takes its own direction (an
   English name stays readable in Arabic) and wraps instead of clamping. */
html body #ibmTitle { unicode-bidi: plaintext; display: block; -webkit-line-clamp: unset; line-clamp: none; overflow: visible; }

/* The prize picture on a framed calendar door. */
html body #ibmImage {
  border-radius: 8px !important;
  border: 0 !important;
  padding: 6px;
  background: #fffdf8 !important;
  box-shadow: inset 0 0 0 3px #c8283a, inset 0 0 0 4.5px #e0a43a, 0 8px 12px -6px rgba(15, 26, 46, .5);
}
/* the top bid keeps its red and cream under the pointer, in both modes */
.ibm-pill-max:is(:hover, :focus-visible) { background-color: #c8283a; color: #fdf3dc; }