@layer components {
  .sl-search-results {
    @apply space-y-6;
  }

  .sl-search-results__hero {
    @apply rounded-[22px] border border-[var(--sl-border-soft)] px-6 py-6 md:px-8;
    background:
      radial-gradient(circle at top right, rgba(213, 162, 60, 0.15), transparent 24%),
      linear-gradient(135deg, rgba(31, 95, 170, 0.12) 0%, rgba(22, 152, 176, 0.10) 48%, #f8fcff 100%);
  }

  .sl-search-results__eyebrow {
    @apply inline-flex rounded-full bg-white px-3 py-1 text-[11px] font-extrabold uppercase tracking-[0.08em] text-[var(--sl-primary)];
    box-shadow: 0 8px 18px rgba(26, 63, 120, 0.08);
  }

  .sl-search-results__hero h1 {
    @apply mt-3 text-[24px] font-extrabold leading-tight text-[var(--sl-text-strong)] md:text-[32px];
  }

  .sl-search-results__hero p {
    @apply mt-3 max-w-3xl text-[14px] leading-6 text-[var(--sl-text)];
  }

  .sl-search-results__tabs {
    @apply flex flex-wrap gap-3;
  }

  .sl-search-results__tab {
    @apply inline-flex items-center gap-3 rounded-full border border-[var(--sl-border-soft)] bg-white px-4 py-2 text-[13px] font-semibold text-[var(--sl-text)] transition hover:border-[var(--sl-primary-soft)] hover:text-[var(--sl-primary)];
  }

  .sl-search-results__tab strong {
    @apply rounded-full bg-[var(--sl-primary-soft)] px-2.5 py-1 text-[12px] font-extrabold text-[var(--sl-primary)];
  }

  .sl-search-results__tab.is-active {
    @apply border-[var(--sl-primary)] text-white;
    background: var(--sl-primary);
  }

  .sl-search-results__tab.is-active strong {
    @apply bg-white text-[var(--sl-primary)];
  }

  .sl-search-results__groups,
  .sl-search-results__panel-wrap {
    @apply space-y-5;
  }

  .sl-search-results__panel {
    @apply border border-[var(--sl-border-soft)] bg-white;
  }

  .sl-search-results__list {
    @apply space-y-4;
  }

  .sl-search-result-card {
    @apply flex flex-col gap-4 rounded-[18px] border border-[var(--sl-border-soft)] bg-[#fbfcff] p-4 md:flex-row md:items-start md:justify-between;
    box-shadow: 0 10px 22px rgba(26, 63, 120, 0.04);
  }

  .sl-search-result-card__copy {
    @apply min-w-0 flex-1;
  }

  .sl-search-result-card__badge {
    @apply inline-flex rounded-full bg-[var(--sl-primary-soft)] px-2.5 py-1 text-[11px] font-extrabold uppercase tracking-[0.06em] text-[var(--sl-primary)];
  }

  .sl-search-result-card__copy h3 {
    @apply mt-3 text-[17px] font-extrabold leading-snug text-[var(--sl-text-strong)];
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  .sl-search-result-card__copy p {
    @apply mt-2 text-[14px] leading-6 text-[var(--sl-text)];
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  .sl-search-result-card__copy small {
    @apply mt-3 block text-[12px] font-semibold text-[#7a869d];
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  .sl-inline-action--search {
    @apply self-start whitespace-nowrap;
  }

  .sl-search-results__empty {
    @apply rounded-[18px] border border-dashed border-[var(--sl-border)] bg-[#fbfcff] px-6 py-10 text-center;
    background: linear-gradient(180deg, #fbfdff 0%, #f4f9ff 100%);
  }

  .sl-search-results__empty.is-compact {
    @apply px-4 py-6 text-left;
  }

  .sl-search-results__empty h2 {
    @apply text-[20px] font-extrabold text-[var(--sl-text-strong)];
  }

  .sl-search-results__empty p {
    @apply mt-2 text-[14px] leading-6 text-[var(--sl-text)];
  }

  @media (max-width: 1023px) {
    .sl-search-results__tab {
      @apply min-w-[calc(50%-0.375rem)] justify-between;
      flex: 1 1 calc(50% - 0.375rem);
    }
  }

  @media (max-width: 767px) {
    .sl-search-results__hero {
      @apply px-5 py-5;
    }

    .sl-search-results__hero h1 {
      @apply text-[21px];
    }

    .sl-search-results__tabs {
      @apply gap-2;
    }

    .sl-search-results__tab {
      @apply px-3 py-2 text-[12px];
    }

    .sl-search-result-card {
      @apply rounded-[16px];
    }

    .sl-inline-action--search {
      @apply w-full justify-center;
    }
  }

  @media (max-width: 479px) {
    .sl-search-results__hero {
      @apply px-4 py-4;
    }

    .sl-search-results__hero h1 {
      @apply text-[19px];
    }

    .sl-search-results__tab {
      flex: 1 1 100%;
      min-width: 0;
    }

    .sl-search-result-card {
      @apply p-3.5;
    }

    .sl-search-result-card__copy h3 {
      @apply text-[16px];
    }

    .sl-search-result-card__copy p {
      @apply text-[13px] leading-5;
    }
  }
}