.hstp-mount {
  --hstp-c-background: var(--hstp-background, #ffffff);
  --hstp-c-backdrop: var(--hstp-backdrop, rgba(36, 36, 36, 0.6));
  --hstp-c-text: var(--hstp-text, #242424);
  --hstp-c-muted: var(--hstp-muted, #5b5b5b);
  --hstp-c-accent: var(--hstp-accent, #1980cc);
  --hstp-c-selected-background: var(--hstp-selected-background, #242424);
  --hstp-c-selected-text: var(--hstp-selected-text, #ffffff);
  --hstp-c-divider: var(--hstp-divider, #e9e9e9);
  --hstp-c-title: var(--hstp-title, var(--hstp-c-text));
  --hstp-c-close: var(--hstp-close, var(--hstp-c-text));
  --hstp-c-campus-background: var(--hstp-campus-background, var(--hstp-c-background));
  --hstp-c-campus-text: var(--hstp-campus-text, var(--hstp-c-text));
  --hstp-c-campus-border: var(--hstp-campus-border, #929292);
  --hstp-c-message: var(--hstp-message, var(--hstp-c-muted));
  --hstp-c-filter-label: var(--hstp-filter-label, var(--hstp-c-muted));
  --hstp-c-chip-text: var(--hstp-chip-text, var(--hstp-c-text));
  --hstp-c-chip-border: var(--hstp-chip-border, var(--hstp-c-accent));
  --hstp-c-chip-selected-background: var(--hstp-chip-selected-background, var(--hstp-c-selected-background));
  --hstp-c-chip-selected-text: var(--hstp-chip-selected-text, var(--hstp-c-selected-text));
  --hstp-c-category-heading: var(--hstp-category-heading, var(--hstp-c-accent));
  --hstp-c-day-heading: var(--hstp-day-heading, var(--hstp-c-text));
  --hstp-c-time-text: var(--hstp-time-text, var(--hstp-c-muted));
  --hstp-c-time-border: var(--hstp-time-border, var(--hstp-c-accent));
  --hstp-c-time-selected-background: var(--hstp-time-selected-background, var(--hstp-c-selected-background));
  --hstp-c-time-selected-text: var(--hstp-time-selected-text, var(--hstp-c-selected-text));
  --hstp-c-details-background: var(--hstp-details-background, #e8f2fa);
  --hstp-c-prompt: var(--hstp-prompt, var(--hstp-c-text));
  --hstp-c-details-time: var(--hstp-details-time, var(--hstp-c-text));
  --hstp-c-details-date: var(--hstp-details-date, var(--hstp-c-text));
  --hstp-c-details-label: var(--hstp-details-label, var(--hstp-c-muted));
  --hstp-c-amenities: var(--hstp-amenities, var(--hstp-c-text));
  --hstp-c-venue-background: var(--hstp-venue-background, #ffffff);
  --hstp-c-venue-title: var(--hstp-venue-title, var(--hstp-c-text));
  --hstp-c-venue-address: var(--hstp-venue-address, var(--hstp-c-accent));
  --hstp-c-venue-icon: var(--hstp-venue-icon, var(--hstp-c-text));
  --hstp-c-pastor-name: var(--hstp-pastor-name, var(--hstp-c-text));
  --hstp-c-pastor-initials: var(--hstp-pastor-initials, var(--hstp-c-pastor-name));
  --hstp-c-pastor-title: var(--hstp-pastor-title, var(--hstp-c-muted));
  --hstp-c-footer-address: var(--hstp-footer-address, var(--hstp-c-accent));
  --hstp-c-footer-icon: var(--hstp-footer-icon, var(--hstp-c-text));
  --hstp-c-footer-divider: var(--hstp-footer-divider, var(--hstp-c-accent));
  --hstp-c-invite-background: var(--hstp-invite-background, var(--hstp-c-accent));
  --hstp-c-invite-text: var(--hstp-invite-text, #ffffff);
  --hstp-c-invite-border: var(--hstp-invite-border, var(--hstp-c-invite-background));
  --hstp-c-invite-hover-background: var(--hstp-invite-hover-background, #a4c0f8);
  --hstp-c-invite-hover-text: var(--hstp-invite-hover-text, var(--hstp-c-invite-text));
  --hstp-c-invite-hover-border: var(--hstp-invite-hover-border, var(--hstp-c-invite-hover-background));
  --hstp-c-calendar-background: var(--hstp-calendar-background, #ffffff);
  --hstp-c-calendar-text: var(--hstp-calendar-text, var(--hstp-c-accent));
  --hstp-c-calendar-border: var(--hstp-calendar-border, var(--hstp-c-calendar-text));
  --hstp-c-calendar-hover-background: var(--hstp-calendar-hover-background, #e8f2fa);
  --hstp-c-calendar-hover-text: var(--hstp-calendar-hover-text, var(--hstp-c-calendar-text));
  --hstp-c-calendar-hover-border: var(--hstp-calendar-hover-border, var(--hstp-c-calendar-border));
  --hstp-c-view-campus-background: var(--hstp-view-campus-background, #ffffff);
  --hstp-c-view-campus-text: var(--hstp-view-campus-text, var(--hstp-c-accent));
  --hstp-c-view-campus-border: var(--hstp-view-campus-border, var(--hstp-c-view-campus-text));
  --hstp-c-view-campus-hover-background: var(--hstp-view-campus-hover-background, #e8f2fa);
  --hstp-c-view-campus-hover-text: var(--hstp-view-campus-hover-text, var(--hstp-c-view-campus-text));
  --hstp-c-view-campus-hover-border: var(--hstp-view-campus-hover-border, var(--hstp-c-view-campus-border));
  --hstp-label-font: "Archivo Expanded", "Archivo", sans-serif;
}

.hstp-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 16px;
  overflow-y: auto;
  background: var(--hstp-c-backdrop);
}
@media (min-width: 744px) {
  .hstp-overlay {
    align-items: center;
    padding: 32px;
  }
}
.hstp-overlay * {
  font-family: var(--hstp-body-font, "Archivo", sans-serif);
  box-sizing: border-box;
}

.hstp-dialog {
  position: relative;
  width: 100%;
  max-width: 921px;
  margin: auto 0;
  padding: 24px;
  border-radius: 24px;
  background: var(--hstp-c-background);
  color: var(--hstp-c-text);
}
@media (min-width: 744px) {
  .hstp-dialog {
    padding: 32px;
  }
}
.hstp-dialog p,
.hstp-dialog ul,
.hstp-dialog h2,
.hstp-dialog h3,
.hstp-dialog h4 {
  margin: 0;
}

.hstp-close {
  position: absolute;
  top: 24px;
  right: 24px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--hstp-c-close);
  cursor: pointer;
}
@media (min-width: 744px) {
  .hstp-close {
    top: 32px;
    right: 32px;
  }
}

.hstp-overlay .hstp-title {
  margin: 48px 0 24px;
  font-family: var(--hstp-heading-font, "Archivo", sans-serif);
  font-size: calc(var(--hstp-title-size, 32px) * 0.75);
  font-weight: 700;
  line-height: 1.1;
  color: var(--hstp-c-title);
}
@media (min-width: 744px) {
  .hstp-overlay .hstp-title {
    margin: 35px 56px 24px 0;
    font-size: var(--hstp-title-size, 32px);
  }
}

.hstp-icon {
  display: inline-block;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: var(--hstp-icon) center/contain no-repeat;
  mask: var(--hstp-icon) center/contain no-repeat;
}

.hstp-select {
  position: relative;
  margin-bottom: 24px;
}
.hstp-select select {
  width: 100%;
  padding: 12px 52px 12px 16px;
  border: 1px solid var(--hstp-c-campus-border);
  border-radius: 16px;
  background: var(--hstp-c-campus-background);
  color: var(--hstp-c-campus-text);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.2px;
  appearance: none;
  cursor: pointer;
}
@media (min-width: 744px) {
  .hstp-select select {
    font-size: 20px;
  }
}
.hstp-select .hstp-select-arrow {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--hstp-c-campus-text);
}

.hstp-empty,
.hstp-none {
  padding: 24px 0;
  color: var(--hstp-c-message);
  font-size: 16px;
}

.hstp-body {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media (min-width: 744px) {
  .hstp-body {
    flex-direction: row;
    align-items: stretch;
  }
}

.hstp-times {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.hstp-rule {
  width: 100%;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--hstp-c-divider);
}

.hstp-overlay .hstp-filter-label {
  margin-bottom: -8px;
  color: var(--hstp-c-filter-label);
  font-size: 10px;
  font-weight: 700;
  line-height: 10px;
  letter-spacing: 0.3px;
}

.hstp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hstp-chip {
  --hstp-c-border: var(--hstp-c-chip-border);
  --hstp-c-on-background: var(--hstp-c-chip-selected-background);
  --hstp-c-on-text: var(--hstp-c-chip-selected-text);
}

.hstp-time {
  --hstp-c-border: var(--hstp-c-time-border);
  --hstp-c-on-background: var(--hstp-c-time-selected-background);
  --hstp-c-on-text: var(--hstp-c-time-selected-text);
}

.hstp-chip,
.hstp-time {
  border: 1px solid var(--hstp-c-border);
  background: var(--hstp-c-background);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.hstp-chip:hover,
.hstp-time:hover {
  background: color-mix(in srgb, var(--hstp-c-border) 10%, var(--hstp-c-background));
}
.hstp-chip.is-on,
.hstp-time.is-on {
  border-color: var(--hstp-c-on-background);
  background: var(--hstp-c-on-background);
  color: var(--hstp-c-on-text);
}
.hstp-chip:focus-visible,
.hstp-time:focus-visible {
  outline: 2px solid var(--hstp-c-border);
  outline-offset: 2px;
}

.hstp-overlay .hstp-chip {
  padding: 0 8px;
  border-radius: 16px;
  color: var(--hstp-c-chip-text);
  font-size: 12px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 0.36px;
}
.hstp-overlay .hstp-chip.is-on {
  color: var(--hstp-c-on-text);
}

.hstp-category {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.hstp-category + .hstp-category {
  margin-top: 10px;
}

.hstp-overlay .hstp-category-title {
  font-family: var(--hstp-heading-font, "Archivo", sans-serif);
  font-size: var(--hstp-category-size, 20px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.6px;
  color: var(--hstp-c-category-heading);
}

.hstp-date {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.hstp-date + .hstp-date {
  margin-top: 10px;
}

.hstp-overlay .hstp-date-label {
  font-family: var(--hstp-label-font);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--hstp-c-day-heading);
}

.hstp-time-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.hstp-overlay .hstp-time {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 105px;
  height: 32px;
  padding: 0 8px;
  border-radius: 24px;
  color: var(--hstp-c-time-text);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.42px;
  text-align: center;
}
.hstp-overlay .hstp-time.is-on {
  color: var(--hstp-c-on-text);
}

.hstp-details {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  min-height: 180px;
  padding: 24px;
  overflow: hidden;
  scroll-margin-top: 16px;
  border-radius: 16px;
  background: var(--hstp-c-details-background);
  color: var(--hstp-c-text);
}
.hstp-details.is-selected {
  overflow: visible;
}
@media (min-width: 744px) {
  .hstp-details {
    width: 298px;
    min-height: 400px;
  }
}

.hstp-details-blur {
  filter: blur(8px);
  opacity: 0.3;
  pointer-events: none;
  user-select: none;
}

.hstp-prompt {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  color: var(--hstp-c-prompt);
  text-align: center;
}
.hstp-prompt p {
  max-width: 240px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}
@media (min-width: 744px) {
  .hstp-prompt {
    justify-content: flex-start;
    padding-top: 87px;
  }
  .hstp-prompt p {
    font-size: 20px;
    line-height: 1.3;
  }
}

.hstp-overlay .hstp-details-time {
  font-family: var(--hstp-heading-font, "Archivo", sans-serif);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--hstp-c-details-time);
}

.hstp-overlay .hstp-details-date {
  margin: 4px 0 24px;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: 0.2px;
  color: var(--hstp-c-details-date);
}

.hstp-overlay .hstp-details-label {
  margin-bottom: 16px;
  color: var(--hstp-c-details-label);
  font-family: var(--hstp-label-font);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
}

.hstp-details-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 24px !important;
  padding-left: 21px;
  list-style: disc;
  color: var(--hstp-c-amenities);
}
.hstp-details-list li {
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 0.28px;
}

.hstp-venue {
  display: flex;
  gap: 12px;
  padding: 16px 8px;
  border-radius: 8px;
  background: var(--hstp-c-venue-background);
}

.hstp-venue-icon {
  color: var(--hstp-c-venue-icon);
}

.hstp-overlay .hstp-venue-title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--hstp-c-venue-title);
}

.hstp-line {
  display: block;
}

.hstp-overlay .hstp-link,
.hstp-overlay .hstp-venue-lines {
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.28px;
}

.hstp-overlay .hstp-link {
  color: var(--hstp-c-accent);
  text-decoration: none;
}
.hstp-overlay .hstp-link:hover {
  text-decoration: underline;
}

.hstp-overlay .hstp-venue .hstp-link,
.hstp-overlay .hstp-venue-lines {
  color: var(--hstp-c-venue-address);
}

.hstp-overlay .hstp-address .hstp-link {
  color: var(--hstp-c-footer-address);
}

.hstp-actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px;
}
.hstp-actions .btn {
  width: 100%;
  min-width: 0;
  gap: 8px;
}

.hstp-overlay .hstp-invite-status {
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.hstp-btn-invite {
  --hstp-b-background: var(--hstp-c-invite-background);
  --hstp-b-text: var(--hstp-c-invite-text);
  --hstp-b-border: var(--hstp-c-invite-border);
  --hstp-b-hover-background: var(--hstp-c-invite-hover-background);
  --hstp-b-hover-text: var(--hstp-c-invite-hover-text);
  --hstp-b-hover-border: var(--hstp-c-invite-hover-border);
}

.hstp-btn-view-campus {
  --hstp-b-background: var(--hstp-c-view-campus-background);
  --hstp-b-text: var(--hstp-c-view-campus-text);
  --hstp-b-border: var(--hstp-c-view-campus-border);
  --hstp-b-hover-background: var(--hstp-c-view-campus-hover-background);
  --hstp-b-hover-text: var(--hstp-c-view-campus-hover-text);
  --hstp-b-hover-border: var(--hstp-c-view-campus-hover-border);
}

.hstp-overlay .btn.hstp-btn-invite {
  letter-spacing: 0.48px;
}

.hstp-overlay .btn.hstp-btn {
  border: 2px solid var(--hstp-b-border);
  background: var(--hstp-b-background);
  color: var(--hstp-b-text);
  opacity: 1;
}
.hstp-overlay .btn.hstp-btn:hover, .hstp-overlay .btn.hstp-btn:focus-visible {
  border-color: var(--hstp-b-hover-border);
  background: var(--hstp-b-hover-background);
  color: var(--hstp-b-hover-text);
  opacity: 1;
}

.hstp-calendar add-to-calendar-button {
  display: block;
  width: 100%;
}

.hstp-calendar add-to-calendar-button::part(atcb-button-wrapper) {
  width: 100%;
}

.hstp-calendar add-to-calendar-button::part(atcb-button) {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: none;
  height: 48px;
  margin: 0;
  padding: 0 24px;
  border-width: 2px;
  border-radius: 24px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.48px;
  transition: all 0.2s ease-out;
}

.hstp-footer {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 32px;
  padding-top: 0;
  border: 0;
  border-image: none;
}
@media (min-width: 744px) {
  .hstp-footer {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 32px;
    margin-top: 48px;
    padding-bottom: 16px;
  }
}
.hstp-footer > .btn {
  width: 100%;
}
@media (min-width: 744px) {
  .hstp-footer > .btn {
    width: 200px;
  }
}

.hstp-divider {
  display: none;
}
@media (min-width: 744px) {
  .hstp-divider {
    display: block;
    width: 2px;
    height: 48px;
    background: var(--hstp-c-footer-divider);
  }
}

.hstp-pastor {
  display: flex;
  align-items: center;
  gap: 16px;
}

.hstp-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
}

.hstp-overlay .hstp-initials {
  display: grid;
  place-items: center;
  background: var(--hstp-c-details-background);
  color: var(--hstp-c-pastor-initials);
  font-weight: 700;
}

.hstp-overlay .hstp-pastor-name {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 0.48px;
  color: var(--hstp-c-pastor-name);
}

.hstp-overlay .hstp-pastor-title {
  font-size: 16px;
  line-height: 1.5;
  color: var(--hstp-c-pastor-title);
}

.hstp-address {
  display: flex;
  gap: 8px;
  color: var(--hstp-c-footer-icon);
}