/* Pricing concept: example appointment waits, not confirmed availability. */
.pricing--wait-times {
  scroll-margin-top: 2rem;
}

.pricing--wait-times .price-list--single {
  grid-template-columns: minmax(0, 1fr);
}

.pricing--wait-times .price-list--single::before {
  content: none;
}

.pricing--wait-times .pricing-heading {
  margin-bottom: 2.75rem;
}

.pricing--wait-times .pricing-marker {
  margin-left: 0;
}

.pricing-preview-label {
  margin: 0 0 1.5rem;
  color: var(--ink);
  font: 700 0.875rem/1.5 var(--sans);
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

.pricing--wait-times .price-row summary {
  grid-template-columns: 1.625rem minmax(0, 1fr) auto auto 1.5rem;
  grid-template-rows: auto;
  grid-template-areas: "index title wait value toggle";
  gap: 0.625rem;
  align-items: center;
  min-height: 6.25rem;
  padding: 1.125rem 0.375rem;
}

.pricing--wait-times .price-row summary::after {
  content: none;
}

.pricing--wait-times .price-row summary:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -3px;
}

.pricing--wait-times .price-index {
  grid-area: index;
  justify-self: start;
  align-self: center;
  margin-top: 0;
  font: 700 1.5rem/1 var(--display);
}

.pricing--wait-times .price-row summary > strong {
  grid-area: title;
  min-width: 0;
  max-width: none;
  color: var(--ink);
  font: 700 clamp(1.4375rem, 1.7vw, 1.8125rem)/1.12 var(--display);
  letter-spacing: -0.015em;
  overflow-wrap: break-word;
}

.pricing--wait-times .price-value {
  grid-area: value;
  justify-self: end;
  max-width: 10rem;
  white-space: normal;
  overflow-wrap: anywhere;
  margin-top: 0;
  color: var(--ink);
  font: 700 clamp(1.4375rem, 1.7vw, 1.8125rem)/1.12 var(--display);
  letter-spacing: -0.02em;
}

.pricing--wait-times .price-toggle {
  grid-area: toggle;
  align-self: center;
  margin-top: 0;
}

.pricing--wait-times .price-wait {
  --sticker-angle: -2deg;
  grid-area: wait;
  justify-self: start;
  display: inline-grid;
  gap: 0.125rem;
  position: relative;
  isolation: isolate;
  width: max-content;
  max-width: 7.25rem;
  min-width: 5.75rem;
  padding: 0.4375rem 0.5rem;
  color: #142d30;
  background-color: #4ac9cb;
  background-image:
    radial-gradient(#ffffff26 0.5px, transparent 0.8px),
    linear-gradient(105deg, #ffffff20, transparent 45%, #168e9420);
  background-size: 3px 3px, 100% 100%;
  border-radius: 0.5px 1px 0.5px 1px;
  box-shadow: 0 3px 4px #183c3e23, 0 7px 10px -6px #183c3e65;
  transform: rotate(var(--sticker-angle));
  transform-origin: 35% 45%;
  text-align: center;
  overflow-wrap: anywhere;
}

.pricing--wait-times .price-row:nth-child(even) .price-wait {
  --sticker-angle: 1.25deg;
}

.pricing--wait-times .price-column:nth-child(2) .price-row:nth-child(odd) .price-wait {
  --sticker-angle: -1deg;
}

.pricing--wait-times .price-row:nth-child(3n) .price-wait::after {
  content: "";
  position: absolute;
  width: 0.5rem;
  height: 0.5rem;
  right: 0;
  bottom: 0;
  background: #a1e0df;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.price-wait-label {
  font: 700 0.75rem/1.2 var(--sans);
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.price-wait-value {
  font: 700 1.375rem/1.05 var(--display);
}

.pricing-wait-note {
  margin: 1.75rem 0 0;
  color: var(--ink);
  font: 400 1rem/1.5 var(--sans);
}

@media (max-width: 1280px) {
  .pricing--wait-times .price-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
  }

  .pricing--wait-times .price-list::before {
    content: none;
  }

  .pricing--wait-times .price-row summary > strong,
  .pricing--wait-times .price-value {
    font-size: 1.625rem;
  }
}

@media (max-width: 700px) {
  .pricing--wait-times .pricing-heading {
    margin-bottom: 2rem;
  }

  .pricing--wait-times .price-row summary {
    grid-template-columns: 1.5rem minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    grid-template-areas:
      "index title title"
      ". wait value";
    gap: 0.625rem 0.5rem;
    min-height: 0;
    padding: 1rem 0.25rem;
  }

  .pricing--wait-times .price-index {
    align-self: start;
    margin-top: 0.125rem;
    font-size: 1.375rem;
  }

  .pricing--wait-times .price-row summary > strong {
    padding-right: 2rem;
    font-size: 1.5rem;
  }

  .pricing--wait-times .price-value {
    justify-self: end;
    white-space: normal;
    font-size: 1.5rem;
  }

  .pricing--wait-times .price-toggle {
    grid-area: auto;
    position: absolute;
    top: 1rem;
    right: 0.25rem;
  }

  .pricing--wait-times .price-detail {
    margin-left: 2.5rem;
  }
}

@media (max-width: 380px) {
  .pricing--wait-times .price-row summary {
    grid-template-areas:
      "index title title"
      "wait wait value";
  }
}