/**
 * Location dialog: Doorstep Drip corner ribbon + clarification note.
 * Plain CSS (no webpack rebuild required), enqueued from functions.php.
 */

.dialog--calendar-location li {
  position: relative;
}

.dialog--calendar-location li.has-location-ribbon {
  overflow: hidden;
  border-radius: 0.375rem;
}

/* Corner ribbon: informational only, never intercepts the button click. */
.dialog--calendar-location .location-ribbon {
  position: absolute;
  top: 0;
  right: 0;
  width: 5rem;
  height: 5rem;
  background: #fdf0e4;
  pointer-events: none;
  z-index: 2;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.dialog--calendar-location .location-ribbon__text {
  position: absolute;
  top: 33%;
  left: 67%;
  display: block;
  width: 5.5rem;
  transform: translate(-50%, -50%) rotate(45deg);
  color: #383b69;
  font-family: "Roboto", sans-serif;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.3;
  text-align: center;
  text-transform: uppercase;
}

.dialog--calendar-location .location-ribbon__line {
  display: block;
}

.dialog--calendar-location .dialog__note {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0.2rem;
  max-width: 22rem;
  margin: 1.25rem auto 0;
  color: #363b69;
  font-size: 0.875rem;
  line-height: 1.45;
  text-align: left;
}

.dialog--calendar-location .dialog__note span {
  text-align: left;
  color: #363b69;
  font-weight: 500;
  letter-spacing: -0.5px;
}

.dialog--calendar-location .dialog__note-icon {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  margin-top: -0.0625rem;
  color: #fa8698;
}

/* Two-column grid: buttons are narrower, so keep the corner tighter. */
@media (min-width: 48rem) {
  .dialog--calendar-location .location-ribbon {
    width: 4.5rem;
    height: 4.5rem;
  }

  .dialog--calendar-location .location-ribbon__text {
    font-size: 0.5rem;
  }
}