.f-chsearch {
    @apply mt-6;
  }

  .f-chsearch__top {
    @apply flex flex-col gap-1 mb-4;
  }

  /* wrapper dla X w środku inputa */
  .f-chsearch__inputwrap {
    @apply relative;
  }

  .f-chsearch__input {
    @apply w-full md:flex-1 px-4 py-3 rounded-xl border border-[--f-input-border] bg-[--f-background] text-[--f-text] outline-none focus:ring-2 focus:ring-[--btn-background];
    padding-right: 2.75rem;
    /* miejsce na X */
  }

  .f-chsearch__clear {
    @apply absolute right-2 top-1/2 -translate-y-1/2 grid place-items-center rounded-full border-0 bg-transparent text-[--f-text] opacity-70;
    width: 2rem;
    height: 2rem;
    cursor: pointer;
  }

  .f-chsearch__clear:hover {
    @apply opacity-100;
  }

  .f-chsearch-meta {
    @apply text-sm opacity-70 pl-1 ml-2;
  }

  /* =========================
     List + Row layout
  ========================== */
  .f-chsearch__list {
    @apply flex flex-col gap-2;
  }

  .f-chsearch__row {
    @apply grid grid-cols-1 md:grid-cols-[220px_1fr] gap-6 rounded-2xl border border-[--f-input-border] bg-[--f-background] p-4;
  }

  /* =========================
     Column 1: Channel card
  ========================== */
  .f-chsearch__left {
    @apply flex flex-col items-center text-center gap-1 px-2;
  }

  .f-chsearch__logo {
    @apply w-14 h-14 object-contain bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-xl p-1 mb-1;
  }

  .f-chsearch__channel-name {
    @apply font-semibold text-[--fuz-header] leading-tight;
  }

  /* =========================
     Column 2: Description + Packages
  ========================== */
  .f-chsearch__right {
    @apply flex flex-col gap-2;
  }

  .f-chsearch__desc {
    @apply text-sm md:text-base opacity-90;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .f-chsearch__desc--html :global(p) {
    @apply mb-2;
  }

  .f-chsearch__desc--html :global(ol),
  .f-chsearch__desc--html :global(ul) {
    @apply pl-6 mb-2;
  }

  .f-chsearch__desc--html :global(li) {
    @apply mb-1;
  }

  .f-chsearch__packages {
    @apply text-sm opacity-80;
  }

  /* klikalny pakiet jak link */
  .f-chsearch-pkg {
    @apply inline-flex items-center justify-center gap-2 font-semibold rounded-lg px-2 py-0 ml-2
    text-base transition-all duration-200 cursor-pointer select-none 
    focus:outline-none focus-visible:ring-2 focus-visible:ring-[--f-header] focus-visible:ring-offset-2 focus-visible:ring-offset-[--f-background];
    @apply border border-transparent bg-[--btn-background] text-[--btn-text];
    /* @apply inline 
    text-xl;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;

    color: var(--f-link, var(--btn-background));
    text-decoration: underline; */
  }

  .f-chsearch-pkg:hover {
      @apply bg-[--btn-background-hover] text-[--btn-text-hover];
    /* text-decoration-thickness: 2px; */
  }

  .f-chsearch-pkgnum {
    @apply opacity-70;
  }

  /* =========================
     Empty state
  ========================== */
  .f-chsearch-empty {
    @apply mt-2 p-4 text-lg;
  }

  .f-chsearch__input::-webkit-search-cancel-button {
    -webkit-appearance: none;
  }

  .f-chsearch__input::-ms-clear {
    display: none;
  }

  .f-chsearch__input[type="search"] {
    appearance: none;
  }