@import url("./components/solid-modal.css");
@import url("./components/timezone-modal.css");
/* Shared bid and lock-in checkout: solid content panel with a separate action rail. */
html body #auction.bid-checkout { --checkout-accent: #46e7a7; }
html body #calendar-help-dialog.solid-checkout { --checkout-accent: #75c9bb; }
:is(#auction, #calendar-help-dialog, #welcome-dialog, .solid-modal).solid-checkout .lock-timezone {
  margin: 0 0 12px;
  font-size: 10px;
  line-height: 1.3;
  color: #304e6b;
}
:is(#auction, #calendar-help-dialog, #welcome-dialog, .solid-modal).solid-checkout .checkout-items { max-height: 210px; border: 0; overflow: auto; }
html body :is(#auction, #calendar-help-dialog, #welcome-dialog, .solid-modal).solid-checkout .checkout-item {
  display: flex;
  justify-content: space-between;
  gap: 12px !important;
  padding: 3px 10px !important;
  border: 0;
}
:is(#auction, #calendar-help-dialog, #welcome-dialog, .solid-modal).solid-checkout .checkout-item strong { font-size: 13px; line-height: 1.35; color: #000; }
:is(#auction, #calendar-help-dialog, #welcome-dialog, .solid-modal).solid-checkout .checkout-item span { display: none; }
:is(#auction, #calendar-help-dialog, #welcome-dialog, .solid-modal).solid-checkout .lock-price { flex-shrink: 0; }
html body :is(#auction, #calendar-help-dialog, #welcome-dialog, .solid-modal).solid-checkout .checkout-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin: 12px 10px 0 !important;
  padding: 0 !important;
  border: 0;
  color: inherit;
  font-size: 13px;
  font-weight: 700;
}
html body :is(#auction, #calendar-help-dialog, #welcome-dialog, .solid-modal).solid-checkout .checkout-total strong { font-size: 22px !important; font-weight: 700; }
:is(#auction, #calendar-help-dialog, #welcome-dialog, .solid-modal).solid-checkout .checkout-promo { margin-top: auto; padding-top: 24px; border: 0; }
:is(#auction, #calendar-help-dialog, #welcome-dialog, .solid-modal).solid-checkout [data-apply-promo],
:is(#auction, #calendar-help-dialog, #welcome-dialog, .solid-modal).solid-checkout .checkout-cancel { display: none; }
html body :is(#auction, #calendar-help-dialog, #welcome-dialog, .solid-modal).solid-checkout input:not([type=checkbox]) {
  min-height: 32px !important;
  height: 32px;
  padding: 4px 10px !important;
  border: 0;
  border-radius: 3px;
  background: var(--lock-dark);
  color: #fff;
  font-size: 14px !important;
}
html body :is(#auction, #calendar-help-dialog, #welcome-dialog, .solid-modal).solid-checkout #checkout-promo-code {
  flex: 0 1 225px;
  width: 225px;
  max-width: 100%;
  height: 28px;
  min-height: 28px !important;
  border-radius: 20px;
  padding-inline: 16px !important;
}
:is(#auction, #calendar-help-dialog, #welcome-dialog, .solid-modal).solid-checkout #checkout-promo-code::placeholder { color: #bbb; font-size: 13px; font-style: italic; }
:is(#auction, #calendar-help-dialog, #welcome-dialog, .solid-modal).solid-checkout .checkout-fineprint,
:is(#auction, #calendar-help-dialog, #welcome-dialog, .solid-modal).solid-checkout .lock-details-warning,
:is(#auction, #calendar-help-dialog, #welcome-dialog, .solid-modal).solid-checkout [data-promo-status] {
  margin: 10px 0 0;
  color: #304e6b;
  font-size: 12px;
  line-height: 1.3;
}
:is(#auction, #calendar-help-dialog, #welcome-dialog, .solid-modal).solid-checkout [data-promo-status]:empty { display: none; }
:is(#auction, #calendar-help-dialog, #welcome-dialog, .solid-modal).solid-checkout [data-promo-status][data-error="true"] { color: #8b2020; }
:is(#auction, #calendar-help-dialog, #welcome-dialog, .solid-modal).solid-checkout .checkout-info { display: block; margin-top: 34px; width: min(100%, 288px); }
html body :is(#auction, #calendar-help-dialog, #welcome-dialog, .solid-modal).solid-checkout .checkout-info label { display: block; margin: 0 0 8px !important; font-size: 13px; font-weight: 700; }
html body :is(#auction, #calendar-help-dialog, #welcome-dialog, .solid-modal).solid-checkout .checkout-info input + label { margin-top: 28px !important; }
:is(#auction, #calendar-help-dialog, #welcome-dialog, .solid-modal).solid-checkout .lock-details-warning { margin-top: 28px; }
html body :is(#auction, #calendar-help-dialog, #welcome-dialog, .solid-modal).solid-checkout .checkout-actions {
  display: flex;
  margin: 14px 0 0 !important;
  padding: 0 !important;
  border: 0;
}
html body :is(#auction, #calendar-help-dialog, #welcome-dialog, .solid-modal).solid-checkout .checkout-actions button {
  width: 100%;
  min-height: 32px !important;
  padding: 6px 10px !important;
  border: 0;
  border-radius: 2px !important;
  background: var(--checkout-accent) !important;
  color: #000;
  font-size: 13px !important;
  font-weight: 700;
  line-height: 20px !important;
}
:is(#auction, #calendar-help-dialog, #welcome-dialog, .solid-modal).solid-checkout .checkout-actions button:hover:not(:disabled) { filter: brightness(1.08); }
:is(#auction, #calendar-help-dialog, #welcome-dialog, .solid-modal).solid-checkout .lock-rail .checkout-total { margin-inline: 0 !important; justify-content: flex-end; }
:is(#auction, #calendar-help-dialog, #welcome-dialog, .solid-modal).solid-checkout .applied-promo-note { margin: auto 0 6px; color: #eee; font-size: 12px; line-height: 1.35; text-align: right; }
:is(#auction, #calendar-help-dialog, #welcome-dialog, .solid-modal).solid-checkout .error { font-size: 12px; color: #681313; }

#calendar-help-dialog.calendar-help-layout .checkout-page { height: 418px; }
#calendar-help-dialog.calendar-help-layout .lock-content { padding-top: 10px; overflow-y: auto; }
#calendar-help-dialog.calendar-help-layout .lock-content > * { flex: 0 0 auto; }
#calendar-help-dialog.calendar-help-layout .dialog-head { position: static; padding: 0 0 12px !important; }
#calendar-help-dialog.calendar-help-layout > .checkout-close { z-index: 2; }
#calendar-help-dialog.calendar-help-layout .calendar-help-content strong { color: #000; font-weight: 700; }
#calendar-help-dialog.calendar-help-layout .lock-rail { justify-content: flex-start; }
#calendar-help-dialog.calendar-help-layout .calendar-help-content { font-size: 13px !important; line-height: 1.45 !important; color: #000; }
#calendar-help-dialog.calendar-help-layout .calendar-help-content > p:first-child { margin-top: 0; }
#calendar-help-dialog.calendar-help-layout .calendar-help-content :is(p, ol) { margin-block: 12px; }
#calendar-help-dialog.calendar-help-layout .calendar-help-content ol { padding-left: 20px; }
#calendar-help-dialog.calendar-help-layout .calendar-help-content li { margin-block: 10px; padding-left: 0; }
#calendar-help-dialog.calendar-help-layout .intro-prototype { padding-top: 0; border: 0; color: #39122b; font-size: 12px; }
#calendar-help-dialog.calendar-help-layout .calendar-legend { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; color: #bbb; font-size: 14px; line-height: 1.4; }
#calendar-help-dialog.calendar-help-layout .calendar-legend span { gap: 10px; align-items: center; }
#calendar-help-dialog.calendar-help-layout .calendar-legend i { flex: 0 0 16px; width: 16px; height: 16px; }
#calendar-help-dialog.calendar-help-layout .legend-past { border-color: var(--status-past-fg); }
#calendar-help-dialog.calendar-help-layout .legend-upcoming { border-color: var(--status-upcoming-fg); }

/* Amounts and the total share a right edge; + sits just outside it. */
html body #auction.bid-checkout .checkout-item { padding-right: 32px !important; }
html body #auction.bid-checkout [data-page=bill] .checkout-total { margin-right: 32px !important; }
#auction.bid-checkout .bid-stepper { position: relative; display: flex; flex: 0 0 auto; align-items: center; gap: 8px; }
html body #auction.bid-checkout .bid-stepper button {
  width: 24px;
  height: 26px;
  min-height: 26px !important;
  padding: 0 !important;
  border: 0;
  background: transparent;
  color: #000;
  font-size: 16px !important;
  line-height: 26px !important;
  font-weight: 600;
}
#auction.bid-checkout .bid-stepper button[data-direction="1"] { position: absolute; right: -32px; }
html body #auction.bid-checkout .bid-stepper input {
  width: calc(var(--bid-digits, 4) * 1ch);
  min-width: 3ch;
  height: 24px;
  min-height: 24px !important;
  padding: 2px 0 !important;
  border: 0;
  border-radius: 0;
  background: rgb(255 255 255 / 12%);
  color: #000;
  font-size: 13px !important;
  font-weight: 700;
  line-height: 20px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  appearance: textfield;
  cursor: pointer;
}
html body #auction.bid-checkout .bid-stepper input:hover {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: center calc(100% - 2px);
  background-size: 100% 1px;
}
#auction.bid-checkout .bid-stepper input::-webkit-inner-spin-button,
#auction.bid-checkout .bid-stepper input::-webkit-outer-spin-button { appearance: none; margin: 0; }
html body #auction.bid-checkout .checkout-checkbox,
html body #auction.bid-checkout .checkout-info .checkout-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 14px !important;
  color: #163f30;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
}
#auction.bid-checkout .checkout-checkbox input { flex: 0 0 auto; width: 16px; height: 16px; margin: 0; accent-color: #191919; }

@media (max-width: 760px) {
  :is(#auction, #calendar-help-dialog, #welcome-dialog, .solid-modal).solid-checkout .lock-rail .checkout-total { display: none; }
  html body :is(#auction, #calendar-help-dialog, #welcome-dialog, .solid-modal).solid-checkout .checkout-actions { margin: 0 !important; }
  html body :is(#auction, #calendar-help-dialog, #welcome-dialog, .solid-modal).solid-checkout .checkout-actions button { width: 30%; flex: 0 0 30%; min-width: 0; margin-left: auto; white-space: nowrap; }
  :is(#auction, #calendar-help-dialog, #welcome-dialog, .solid-modal).solid-checkout .checkout-info { margin-top: 34px; width: 100%; }
  #calendar-help-dialog.calendar-help-layout .checkout-page { height: auto; grid-template-rows: auto auto; }
  #calendar-help-dialog.calendar-help-layout .lock-content { padding-top: 10px; max-height: min(450px, 60dvh); }
  #calendar-help-dialog.calendar-help-layout .lock-rail { padding: 18px 14px; }
  #calendar-help-dialog.calendar-help-layout .calendar-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
}


@media (min-width: 761px) {
  #calendar-help-dialog.calendar-help-layout .checkout-page { height: 481px; }
}