
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
  /*
   * Reserve space for the vertical scrollbar at all times so the layout width
   * remains constant when navigating between pages with different heights.
   */
  overflow-y: scroll;
}

body {
  margin-bottom: 60px;
}
.landing-page {
  background-color: #f8f9fb;
}

.landing-hero {
  background: linear-gradient(135deg, rgba(85, 112, 241, 0.08), rgba(30, 214, 181, 0.12));
}

.bg-gradient-primary {
  background: linear-gradient(120deg, rgba(85, 112, 241, 0.45), rgba(30, 214, 181, 0.4));
}

.hero-preview {
  border-radius: 1.5rem;
}

.hero-preview .card-body {
  background: #ffffff;
  border-radius: 1.5rem;
}

.progress-stack .progress {
  border-radius: 999px;
}

.workflow-image {
  min-height: 360px;
  background: linear-gradient(135deg, #4f46e5, #22d3ee);
  position: relative;
}

.workflow-image::after {
  content: "";
  position: absolute;
  inset: 15%;
  border-radius: 1.5rem;
  background: rgba(255, 255, 255, 0.12);
  border: 1px dashed rgba(255, 255, 255, 0.6);
}

.endpoints-filter-badge {
  font-size: 0.95rem;
  line-height: 1.1;
}

.endpoints-filter-label {
  font-size: 0.95rem;
}

.endpoints-filter-button {
    font-size: 0.95rem;
    height: 2rem !important;
}

.progress.progress-endpoint {
  min-width: 260px;
  height: 0.75rem;
  border-radius: 999px;
}

.rating i {
  margin-right: 0.25rem;
}

@media (max-width: 991.98px) {
  .landing-hero {
    padding: 2.5rem;
  }

  .workflow-image {
    min-height: 260px;
  }
}

#endpoints_filters_wrapper {
    position: relative;
}

.filters-popover {
    position: absolute;
    top: 100%;
    inset-inline-start: 0;
    min-width: 320px;
    max-width: min(360px, calc(100vw - 3rem));
    margin-top: 0.5rem;
    display: none;
    z-index: 1080;
}

    .filters-popover[data-show="true"] {
        display: block;
    }

@media (max-width: 767.98px) {
    .filters-popover {
        position: fixed;
        inset-inline: 1rem;
        top: 5rem;
        max-width: none;
        width: auto;
        z-index: 1080;
    }
}