/* Pongal instant bid: the quick picks are brass coins ringed with
   rice-flour dots, the steppers clay tiles. The kolam border over the
   panel is in skin/home.css. */
@import url("../../../components/instant_bid_modal.css");

.ibm-step { border-radius: 50% !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-ui) !important; font-weight: 700 !important; border-radius: 999px !important; }
.ibm-bid-input:focus { border-color: var(--theme-500) !important; box-shadow: 0 0 0 3px rgba(var(--theme-500-rgb), .18); }
.ibm-pill { border-radius: 999px !important; font-family: var(--font-ui); font-size: .95rem; font-weight: 700; background: radial-gradient(120% 140% at 30% 20%, #ffffff, #fff6d6 55%, #fbe3a0); color: #2e1820; border: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), inset 0 0 0 3px #e9c97a, inset 0 0 0 4px #a86a06; }
html.dark .ibm-pill { background: radial-gradient(120% 140% at 30% 20%, #fbe3a0, #a86a06 60%, #7c3317); color: #1c1408; }
.ibm-pill:hover { background: var(--btn-bg); color: var(--btn-ink); }
.ibm-pill-max { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), inset 0 0 0 3px #bfe39a, inset 0 0 0 4px #3f7f2a; }
.ibm-pill-min { background: var(--paper); border: 1.5px dashed var(--rule); color: var(--ink-2); box-shadow: none; }
.ibm-full-link:hover { color: var(--theme-600); }

/* The panel under the narrow kolam border, the lot in a kolam well on a
   banana leaf */
html body #instantBidPanel {
  position: relative;
  background: var(--kolam-thin-img) 0 0 / 16px 8px repeat-x, var(--paper-2) !important;
  border: 1px solid var(--rule) !important;
  padding-top: 1.6rem;
  overflow: hidden;
}
html body #instantBidModal :is(h2, h3).font-display { font-family: var(--font-display); font-weight: 700; }
html body #instantBidModal > .absolute.inset-0 { background: rgba(16, 23, 42, .62) !important; }
html body #ibmImage {
  border-radius: 14px !important;
  border: 0 !important;
  background: var(--pg-well) center / auto 96% no-repeat, var(--pg-leaf-bed) !important;
  box-shadow: inset 0 0 0 1px var(--rule);
  padding: 17px !important;
}