Zmiany w modalach

src/styles/channels-search.css

@@ -1,94 +1,127 @@
-  .fuz-chsearch {
+  .f-chsearch {
     @apply mt-6;
   }
 
-  .fuz-chsearch__top {
+  .f-chsearch__top {
     @apply flex flex-col gap-1 mb-4;
   }
 
-  .fuz-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];
+  /* wrapper dla X w środku inputa */
+  .f-chsearch__inputwrap {
+    @apply relative;
   }
 
-  .fuz-chsearch__meta {
+  .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;
   }
 
   /* =========================
      List + Row layout
   ========================== */
-  .fuz-chsearch__list {
+  .f-chsearch__list {
     @apply flex flex-col gap-2;
   }
 
-  /* ✅ węższa pierwsza kolumna */
-  .fuz-chsearch__row {
+  .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
   ========================== */
-  .fuz-chsearch__left {
+  .f-chsearch__left {
     @apply flex flex-col items-center text-center gap-1 px-2;
   }
 
-  .fuz-chsearch__logo {
+  .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;
   }
 
-  .fuz-chsearch__channel-name {
+  .f-chsearch__channel-name {
     @apply font-semibold text-[--fuz-header] leading-tight;
   }
 
-  .fuz-chsearch__channel-number {
-    @apply text-sm opacity-70;
-  }
-
   /* =========================
      Column 2: Description + Packages
   ========================== */
-  .fuz-chsearch__right {
+  .f-chsearch__right {
     @apply flex flex-col gap-2;
   }
 
-  /* opis NIE ucinany */
-  .fuz-chsearch__desc {
+  .f-chsearch__desc {
     @apply text-sm md:text-base opacity-90;
     overflow-wrap: anywhere;
     word-break: break-word;
   }
 
-  /* HTML jak w modalu */
-  .fuz-chsearch__desc--html :global(p) {
+  .f-chsearch__desc--html :global(p) {
     @apply mb-2;
   }
 
-  .fuz-chsearch__desc--html :global(ol),
-  .fuz-chsearch__desc--html :global(ul) {
+  .f-chsearch__desc--html :global(ol),
+  .f-chsearch__desc--html :global(ul) {
     @apply pl-6 mb-2;
   }
 
-  .fuz-chsearch__desc--html :global(li) {
+  .f-chsearch__desc--html :global(li) {
     @apply mb-1;
   }
 
-  /* pakiety (bez gwarantowanych) */
-  .fuz-chsearch__packages {
+  .f-chsearch__packages {
     @apply text-sm opacity-80;
   }
 
-  .fuz-chsearch__pkg {
-    @apply inline text-[--btn-background];
+  /* klikalny pakiet jak link */
+  .f-chsearch__pkg {
+    @apply inline;
+    background: transparent;
+    border: 0;
+    padding: 0;
+    cursor: pointer;
+    font: inherit;
+    color: var(--f-link, var(--btn-background));
+    text-decoration: underline;
   }
 
-  .fuz-chsearch__pkgnum {
+  .f-chsearch__pkg:hover {
+    text-decoration-thickness: 2px;
+  }
+
+  .f-chsearch__pkgnum {
     @apply opacity-70;
   }
 
   /* =========================
      Empty state
   ========================== */
-  .fuz-chsearch__empty {
+  .f-chsearch__empty {
     @apply mt-2 p-4 rounded-2xl border border-slate-200 dark:border-slate-700 opacity-80;
-  }
+  }
+
+  .f-chsearch__input::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+}
+
+.f-chsearch__input::-ms-clear {
+  display: none;
+}
+
+.f-chsearch__input[type="search"] {
+  appearance: none;
+}