/*
 * Speedbump modal.
 *
 * Restyle from a theme by overriding these custom properties, e.g.
 *   .pc-speedbump { --pc-speedbump-accent: #e2502b; }
 */
.pc-speedbump {
  --pc-speedbump-backdrop: rgba(0, 0, 0, 0.5);
  --pc-speedbump-bg: #ffffff;
  --pc-speedbump-text: #000000;
  --pc-speedbump-accent: #222222;
  --pc-speedbump-accent-hover: #555555;
  --pc-speedbump-heading-font: inherit;
  --pc-speedbump-radius: 1.5rem;
  --pc-speedbump-max-width: 560px;
  --pc-speedbump-z: 9999;

  /* Close (×) button */
  --pc-speedbump-close-color: var(--pc-speedbump-text);
  --pc-speedbump-close-hover-color: var(--pc-speedbump-accent);

  /* Continue button */
  --pc-speedbump-accept-bg: var(--pc-speedbump-accent);
  --pc-speedbump-accept-color: #ffffff;
  --pc-speedbump-accept-hover-bg: var(--pc-speedbump-accept-bg);
  --pc-speedbump-accept-hover-color: #ffffff;

  /* Cancel button */
  --pc-speedbump-reject-bg: var(--pc-speedbump-bg);
  --pc-speedbump-reject-color: var(--pc-speedbump-accent);
  --pc-speedbump-reject-hover-bg: var(--pc-speedbump-reject-bg);
  --pc-speedbump-reject-hover-color: var(--pc-speedbump-accent-hover);

  --pc-speedbump-button-radius: 2.5rem;
  --pc-speedbump-button-padding: 1.438rem 3.125rem;

  position: fixed !important;
  inset: 0;
  z-index: var(--pc-speedbump-z);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pc-speedbump-backdrop);
}

.pc-speedbump[hidden] {
  display: none;
}

.pc-speedbump__inner {
  position: relative;
  box-sizing: border-box;
  width: calc(100% - 2rem);
  max-width: var(--pc-speedbump-max-width);
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  padding: 3rem 1rem;
  border-radius: var(--pc-speedbump-radius);
  background: var(--pc-speedbump-bg);
  color: var(--pc-speedbump-text);
}

.pc-speedbump h1,
.pc-speedbump h2,
.pc-speedbump h3 {
  margin: 0;
  padding-bottom: 1.5rem;
  font-family: var(--pc-speedbump-heading-font);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1;
  color: var(--pc-speedbump-accent);
}

.pc-speedbump p {
  color: var(--pc-speedbump-text);
  font-size: 1.125rem;
}

.pc-speedbump__content > :last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}

.pc-speedbump__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding: 0;
  border: none;
  background: none;
  color: var(--pc-speedbump-close-color);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.pc-speedbump__close:hover {
  color: var(--pc-speedbump-close-hover-color);
}

.pc-speedbump__buttons {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.5rem;
}

.pc-speedbump__accept,
.pc-speedbump__reject {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 0;
  padding: var(--pc-speedbump-button-padding);
  border: none;
  border-radius: var(--pc-speedbump-button-radius);
  font-size: 1.125rem;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  cursor: pointer;
}

.pc-speedbump__accept {
  background: var(--pc-speedbump-accept-bg);
  color: var(--pc-speedbump-accept-color);
}

.pc-speedbump__accept:hover {
  background: var(--pc-speedbump-accept-hover-bg);
  color: var(--pc-speedbump-accept-hover-color);
}

.pc-speedbump__reject {
  background: var(--pc-speedbump-reject-bg);
  color: var(--pc-speedbump-reject-color);
}

.pc-speedbump__reject:hover {
  background: var(--pc-speedbump-reject-hover-bg);
  color: var(--pc-speedbump-reject-hover-color);
}

@media (min-width: 768px) {
  .pc-speedbump__inner {
    padding: 3rem 2rem;
  }

  .pc-speedbump__buttons {
    flex-direction: row;
  }
}

.pc-speedbump-lock {
  overflow: hidden;
}