From 32d77ac5ad2e1bb656dbd4702cfec1b3513d95f3 Mon Sep 17 00:00:00 2001
From: dm <dm@dariuszm.eu>
Date: Sat, 13 Dec 2025 11:25:11 +0100
Subject: [PATCH] Zmiany w modalach

---
 src/islands/Internet/InternetAddonsModal.jsx | 136 ++--
 src/islands/jambox/JamboxAddonsModal.jsx     | 696 +++++++++----------
 src/islands/jambox/JamboxChannelsModal.jsx   | 269 +++----
 src/islands/jambox/JamboxChannelsSearch.jsx  |  92 +--
 src/styles/channels-search.css               |  93 ++-
 src/styles/modal.css                         | 108 ++-
 src/styles/offers/offers-table.css           |  13 -
 7 files changed, 704 insertions(+), 703 deletions(-)

diff --git a/src/islands/Internet/InternetAddonsModal.jsx b/src/islands/Internet/InternetAddonsModal.jsx
index 5f5cfc7..fd9fafc 100644
--- a/src/islands/Internet/InternetAddonsModal.jsx
+++ b/src/islands/Internet/InternetAddonsModal.jsx
@@ -124,14 +124,12 @@ export default function InternetAddonsModal({ isOpen, onClose, plan }) {
     });
   };
 
-  const togglePhoneOpen = (id) => {
-    setOpenPhoneId((prev) => (prev === id ? null : id));
-  };
-
   return (
-    <div class="fuz-modal-overlay" onClick={onClose}>
+    <div class="f-modal-overlay" onClick={onClose}>
       <button
-        class="fuz-modal-close"
+        class="f-modal-close"
+        type="button"
+        aria-label="Zamknij"
         onClick={(e) => {
           e.stopPropagation();
           onClose();
@@ -141,33 +139,35 @@ export default function InternetAddonsModal({ isOpen, onClose, plan }) {
       </button>
 
       <div
-        class="fuz-modal-panel fuz-modal-panel--compact"
+        class="f-modal-panel f-modal-panel--compact"
         onClick={(e) => e.stopPropagation()}
       >
-        <div class="fuz-modal-inner">
-          <h2 class="fuz-modal-title">Konfiguracja usług dodatkowych</h2>
+        <div class="f-modal-inner">
+          <h2 class="f-modal-title">Konfiguracja usług dodatkowych</h2>
 
           {/* INTERNET (fiber) jako akordeon */}
-          <div class="fuz-modal-section">
-            <div class={`fuz-accordion-item ${baseOpen ? "is-open" : ""}`}>
+          <div class="f-modal-section">
+            <div class={`f-accordion-item ${baseOpen ? "is-open" : ""}`}>
               <button
                 type="button"
-                class="fuz-accordion-header"
+                class="f-accordion-header"
                 onClick={() => setBaseOpen((prev) => !prev)}
               >
-                <span class="fuz-modal-phone-name">{plan.name}</span>
-                <span class="fuz-modal-phone-price">
+                <span class="f-modal-phone-name">{plan.name}</span>
+                <span class="f-modal-phone-price">
                   {basePrice.toFixed(2)} zł/mies.
                 </span>
               </button>
 
               {baseOpen && plan.features && plan.features.length > 0 && (
-                <div class="fuz-accordion-body">
+                <div class="f-accordion-body">
                   <ul class="f-card-features">
                     {plan.features.map((f, idx) => (
                       <li class="f-card-row" key={idx}>
                         <span class="f-card-label">{f.label}</span>
-                        <span class="f-card-value">{formatFeatureValue(f.value)}</span>
+                        <span class="f-card-value">
+                          {formatFeatureValue(f.value)}
+                        </span>
                       </li>
                     ))}
                   </ul>
@@ -181,21 +181,22 @@ export default function InternetAddonsModal({ isOpen, onClose, plan }) {
 
           {!loading && !error && (
             <>
-              {/* Sekcja: wybór telefonu (akordeon + opcja bez telefonu) */}
-              <div class="fuz-modal-section">
+              {/* Telefon */}
+              <div class="f-modal-section">
                 <h3>Usługa telefoniczna</h3>
+
                 {phonePlans.length === 0 ? (
                   <p>Brak dostępnych pakietów telefonicznych.</p>
                 ) : (
-                  <div class="fuz-modal-phone-list fuz-accordion">
-                    {/* OPCJA: brak telefonu */}
-                    <div class="fuz-accordion-item fuz-accordion-item--no-phone">
+                  <div class="f-modal-phone-list f-accordion">
+                    {/* brak telefonu */}
+                    <div class="f-accordion-item f-accordion-item--no-phone">
                       <button
                         type="button"
-                        class="fuz-accordion-header"
+                        class="f-accordion-header"
                         onClick={() => handlePhoneSelect(null)}
                       >
-                        <span class="fuz-accordion-header-left">
+                        <span class="f-accordion-header-left">
                           <input
                             type="radio"
                             name="phone-plan"
@@ -206,32 +207,30 @@ export default function InternetAddonsModal({ isOpen, onClose, plan }) {
                             }}
                             onClick={(e) => e.stopPropagation()}
                           />
-                          <span class="fuz-modal-phone-name">
+                          <span class="f-modal-phone-name">
                             Nie potrzebuję telefonu
                           </span>
                         </span>
-                        <span class="fuz-modal-phone-price">0,00 zł/mies.</span>
+                        <span class="f-modal-phone-price">0,00 zł/mies.</span>
                       </button>
                     </div>
 
-
-                    {/* LISTA PAKIETÓW TELEFONICZNYCH */}
+                    {/* lista pakietów telefonu */}
                     {phonePlans.map((p) => {
                       const isSelected = selectedPhoneId === p.id;
                       const isOpen = openPhoneId === p.id;
 
                       return (
                         <div
-                          class={`fuz-accordion-item ${isOpen ? "is-open" : ""
-                            }`}
+                          class={`f-accordion-item ${isOpen ? "is-open" : ""}`}
                           key={p.id}
                         >
                           <button
                             type="button"
-                            class="fuz-accordion-header"
+                            class="f-accordion-header"
                             onClick={() => handlePhoneSelect(p.id)}
                           >
-                            <span class="fuz-accordion-header-left">
+                            <span class="f-accordion-header-left">
                               <input
                                 type="radio"
                                 name="phone-plan"
@@ -242,36 +241,29 @@ export default function InternetAddonsModal({ isOpen, onClose, plan }) {
                                 }}
                                 onClick={(e) => e.stopPropagation()}
                               />
-                              <span class="fuz-modal-phone-name">
-                                {p.name}
-                              </span>
+                              <span class="f-modal-phone-name">{p.name}</span>
                             </span>
-                            <span class="fuz-modal-phone-price">
+
+                            <span class="f-modal-phone-price">
                               {p.price_monthly.toFixed(2)} zł/mies.
                             </span>
                           </button>
 
                           {isOpen && (
-                            <div class="fuz-accordion-body">
+                            <div class="f-accordion-body">
                               {p.features && p.features.length > 0 && (
                                 <ul class="f-card-features">
                                   {p.features
                                     .filter(
                                       (f) =>
-                                        !String(
-                                          f.label || ""
-                                        )
+                                        !String(f.label || "")
                                           .toLowerCase()
                                           .includes("aktyw")
                                     )
                                     .map((f, idx) => (
                                       <li class="f-card-row" key={idx}>
-                                        <span class="f-card-label">
-                                          {f.label}
-                                        </span>
-                                        <span class="f-card-value">
-                                          {f.value}
-                                        </span>
+                                        <span class="f-card-label">{f.label}</span>
+                                        <span class="f-card-value">{f.value}</span>
                                       </li>
                                     ))}
                                 </ul>
@@ -285,47 +277,39 @@ export default function InternetAddonsModal({ isOpen, onClose, plan }) {
                 )}
               </div>
 
-              {/* Sekcja: dodatki internetowe */}
-              <div class="fuz-modal-section">
+              {/* Dodatki internetowe */}
+              <div class="f-modal-section">
                 <h3>Dodatkowe usługi</h3>
+
                 {addons.length === 0 ? (
                   <p>Brak dodatkowych usług.</p>
                 ) : (
-                  <div class="fuz-addon-list">
+                  <div class="f-addon-list">
                     {addons.map((addon) =>
                       addon.options.map((opt) => {
                         const checked = selectedAddons.some(
-                          (x) =>
-                            x.addonId === addon.id &&
-                            x.optionId === opt.id
+                          (x) => x.addonId === addon.id && x.optionId === opt.id
                         );
 
                         return (
-                          <label
-                            class="fuz-addon-item"
-                            key={`${addon.id}-${opt.id}`}
-                          >
-                            <div class="fuz-addon-checkbox">
+                          <label class="f-addon-item" key={`${addon.id}-${opt.id}`}>
+                            <div class="f-addon-checkbox">
                               <input
                                 type="checkbox"
                                 checked={checked}
-                                onChange={() =>
-                                  handleAddonToggle(addon.id, opt.id)
-                                }
+                                onChange={() => handleAddonToggle(addon.id, opt.id)}
                               />
                             </div>
 
-                            <div class="fuz-addon-main">
-                              <div class="fuz-addon-name">{addon.name}</div>
+                            <div class="f-addon-main">
+                              <div class="f-addon-name">{addon.name}</div>
                               {addon.description && (
-                                <div class="fuz-addon-desc">
-                                  {addon.description}
-                                </div>
+                                <div class="f-addon-desc">{addon.description}</div>
                               )}
                             </div>
 
-                            <div class="fuz-addon-price">
-                              {opt.price.toFixed(2)} zł/mies.
+                            <div class="f-addon-price">
+                              {opt.price.toFixed(2)} {opt.currency}
                             </div>
                           </label>
                         );
@@ -336,34 +320,30 @@ export default function InternetAddonsModal({ isOpen, onClose, plan }) {
               </div>
 
               {/* Podsumowanie */}
-              <div class="fuz-modal-section fuz-summary">
+              <div class="f-modal-section f-summary">
                 <h3>Podsumowanie miesięczne</h3>
 
-                <div class="fuz-summary-list">
-                  <div class="fuz-summary-row">
+                <div class="f-summary-list">
+                  <div class="f-summary-row">
                     <span>Internet</span>
                     <span>{basePrice.toFixed(2)} zł/mies.</span>
                   </div>
 
-                  <div class="fuz-summary-row">
+                  <div class="f-summary-row">
                     <span>Telefon</span>
                     <span>
-                      {phonePrice
-                        ? `${phonePrice.toFixed(2)} zł/mies.`
-                        : "—"}
+                      {phonePrice ? `${phonePrice.toFixed(2)} zł/mies.` : "—"}
                     </span>
                   </div>
 
-                  <div class="fuz-summary-row">
+                  <div class="f-summary-row">
                     <span>Dodatki</span>
                     <span>
-                      {addonsPrice
-                        ? `${addonsPrice.toFixed(2)} zł/mies.`
-                        : "—"}
+                      {addonsPrice ? `${addonsPrice.toFixed(2)} zł/mies.` : "—"}
                     </span>
                   </div>
 
-                  <div class="fuz-summary-total">
+                  <div class="f-summary-total">
                     <span>Łącznie</span>
                     <span>{totalMonthly.toFixed(2)} zł/mies.</span>
                   </div>
diff --git a/src/islands/jambox/JamboxAddonsModal.jsx b/src/islands/jambox/JamboxAddonsModal.jsx
index 0043a93..ef3a1b7 100644
--- a/src/islands/jambox/JamboxAddonsModal.jsx
+++ b/src/islands/jambox/JamboxAddonsModal.jsx
@@ -3,408 +3,386 @@ import "../../styles/modal.css";
 import "../../styles/offers/offers-table.css";
 
 export default function JamboxAddonsModal({ isOpen, onClose, pkg }) {
-    const [phonePlans, setPhonePlans] = useState([]);
-    const [addons, setAddons] = useState([]);
+  const [phonePlans, setPhonePlans] = useState([]);
+  const [addons, setAddons] = useState([]);
 
-    const [tvAddons, setTvAddons] = useState([]);
-    const [selectedTvAddonTids, setSelectedTvAddonTids] = useState([]);
+  const [tvAddons, setTvAddons] = useState([]);
+  const [selectedTvAddonTids, setSelectedTvAddonTids] = useState([]);
 
-    const [loading, setLoading] = useState(false);
-    const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
 
-    const [selectedPhoneId, setSelectedPhoneId] = useState(null);
-    const [selectedAddonIds, setSelectedAddonIds] = useState([]);
+  const [selectedPhoneId, setSelectedPhoneId] = useState(null);
+  const [selectedAddonIds, setSelectedAddonIds] = useState([]);
 
-    // akordeony
-    const [openPhoneId, setOpenPhoneId] = useState(null);
-    const [baseOpen, setBaseOpen] = useState(true);
+  // akordeony
+  const [openPhoneId, setOpenPhoneId] = useState(null);
+  const [baseOpen, setBaseOpen] = useState(true);
 
-    const formatFeatureValue = (val) => {
-        if (val === true || val === "true") return "✓";
-        if (val === false || val === "false" || val == null) return "✕";
-        return val;
-    };
+  const formatFeatureValue = (val) => {
+    if (val === true || val === "true") return "✓";
+    if (val === false || val === "false" || val == null) return "✕";
+    return val;
+  };
 
-    const handlePhoneSelect = (id) => {
-        if (id === null) {
-            setSelectedPhoneId(null);
-            setOpenPhoneId(null);
-            return;
+  const handlePhoneSelect = (id) => {
+    if (id === null) {
+      setSelectedPhoneId(null);
+      setOpenPhoneId(null);
+      return;
+    }
+    setSelectedPhoneId(id);
+    setOpenPhoneId((prev) => (prev === id ? null : id));
+  };
+
+  const toggleAddon = (addonId) => {
+    setSelectedAddonIds((prev) =>
+      prev.includes(addonId) ? prev.filter((x) => x !== addonId) : [...prev, addonId]
+    );
+  };
+
+  // reset po otwarciu / zmianie pakietu
+  useEffect(() => {
+    if (!isOpen) return;
+    setSelectedPhoneId(null);
+    setSelectedAddonIds([]);
+    setOpenPhoneId(null);
+    setBaseOpen(true);
+    setError("");
+    setSelectedTvAddonTids([]);
+  }, [isOpen, pkg?.id]);
+
+  // load danych
+  useEffect(() => {
+    if (!isOpen || !pkg?.id) return;
+
+    let cancelled = false;
+
+    async function loadData() {
+      setLoading(true);
+      setError("");
+
+      try {
+        // telefon
+        const phoneRes = await fetch("/api/phone/plans");
+        if (!phoneRes.ok) throw new Error(`HTTP ${phoneRes.status} (phone)`);
+        const phoneJson = await phoneRes.json();
+        const phoneData = Array.isArray(phoneJson.data) ? phoneJson.data : [];
+
+        // dodatki JAMBOX (dla pakietu)
+        const addonsRes = await fetch(`/api/jambox/addons?packageId=${pkg.id}`);
+        if (!addonsRes.ok) throw new Error(`HTTP ${addonsRes.status} (addons)`);
+        const addonsJson = await addonsRes.json();
+        const addonsData = Array.isArray(addonsJson.data) ? addonsJson.data : [];
+
+        // pakiety TV
+        const tvRes = await fetch(`/api/jambox/tv-addons?packageId=${pkg.id}`);
+        if (!tvRes.ok) throw new Error(`HTTP ${tvRes.status} (tv-addons)`);
+        const tvJson = await tvRes.json();
+        const tvData = Array.isArray(tvJson.data) ? tvJson.data : [];
+
+        if (!cancelled) {
+          setPhonePlans(phoneData);
+          setAddons(addonsData);
+          setTvAddons(tvData);
         }
-        setSelectedPhoneId(id);
-        setOpenPhoneId((prev) => (prev === id ? null : id));
+      } catch (err) {
+        console.error("❌ Błąd ładowania danych do JamboxAddonsModal:", err);
+        if (!cancelled) setError("Nie udało się załadować danych dodatkowych usług.");
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    }
+
+    loadData();
+    return () => {
+      cancelled = true;
     };
+  }, [isOpen, pkg?.id]);
 
-    const toggleAddon = (addonId) => {
-        setSelectedAddonIds((prev) =>
-            prev.includes(addonId)
-                ? prev.filter((x) => x !== addonId)
-                : [...prev, addonId]
-        );
-    };
+  if (!isOpen || !pkg) return null;
 
-    // reset po otwarciu / zmianie pakietu
-    useEffect(() => {
-        if (!isOpen) return;
-        setSelectedPhoneId(null);
-        setSelectedAddonIds([]);
-        setOpenPhoneId(null);
-        setBaseOpen(true);
-        setError("");
-        setSelectedTvAddonTids([]);
-    }, [isOpen, pkg?.id]);
+  const basePrice = Number(pkg.price_monthly || 0);
 
-    // load danych
-    useEffect(() => {
-        if (!isOpen || !pkg?.id) return;
+  const phonePrice = useMemo(() => {
+    if (!selectedPhoneId) return 0;
+    const p = phonePlans.find((x) => x.id === selectedPhoneId);
+    return Number(p?.price_monthly || 0);
+  }, [selectedPhoneId, phonePlans]);
 
-        let cancelled = false;
+  // backend może zwrócić { id, price } albo { addon_id, price }
+  const addonsPrice = useMemo(() => {
+    return selectedAddonIds.reduce((sum, addonId) => {
+      const a = addons.find((x) => (x.id ?? x.addon_id) === addonId);
+      return sum + Number(a?.price || 0);
+    }, 0);
+  }, [selectedAddonIds, addons]);
 
-        async function loadData() {
-            setLoading(true);
-            setError("");
+  const tvAddonsPrice = useMemo(() => {
+    return selectedTvAddonTids.reduce((sum, tid) => {
+      const a = tvAddons.find((x) => Number(x.tid) === Number(tid));
+      return sum + Number(a?.price || 0);
+    }, 0);
+  }, [selectedTvAddonTids, tvAddons]);
 
-            try {
-                // telefon
-                const phoneRes = await fetch("/api/phone/plans");
-                if (!phoneRes.ok) throw new Error(`HTTP ${phoneRes.status} (phone)`);
-                const phoneJson = await phoneRes.json();
-                const phoneData = Array.isArray(phoneJson.data) ? phoneJson.data : [];
+  const totalMonthly = basePrice + phonePrice + addonsPrice + tvAddonsPrice;
 
-                // dodatki JAMBOX (dla pakietu)
-                const addonsRes = await fetch(`/api/jambox/addons?packageId=${pkg.id}`);
-                if (!addonsRes.ok) throw new Error(`HTTP ${addonsRes.status} (addons)`);
-                const addonsJson = await addonsRes.json();
-                const addonsData = Array.isArray(addonsJson.data) ? addonsJson.data : [];
+  const toggleTvAddon = (tid) => {
+    const t = Number(tid);
+    setSelectedTvAddonTids((prev) =>
+      prev.includes(t) ? prev.filter((x) => x !== t) : [...prev, t]
+    );
+  };
 
-                const tvRes = await fetch(`/api/jambox/tv-addons?packageId=${pkg.id}`);
-                if (!tvRes.ok) throw new Error(`HTTP ${tvRes.status} (tv-addons)`);
+  return (
+    <div class="f-modal-overlay" onClick={onClose}>
+      <button
+        class="f-modal-close"
+        type="button"
+        aria-label="Zamknij"
+        onClick={(e) => {
+          e.stopPropagation();
+          onClose();
+        }}
+      >
+        ✕
+      </button>
 
-                const tvJson = await tvRes.json();
-                const tvData = Array.isArray(tvJson.data) ? tvJson.data : [];
+      <div class="f-modal-panel f-modal-panel--compact" onClick={(e) => e.stopPropagation()}>
+        <div class="f-modal-inner">
+          <h2 class="f-modal-title">Konfiguracja usług dodatkowych</h2>
 
-                if (!cancelled) {
-                    setPhonePlans(phoneData);
-                    setAddons(addonsData);
-                    setTvAddons(tvData);
-                }
-            } catch (err) {
-                console.error("❌ Błąd ładowania danych do JamboxAddonsModal:", err);
-                if (!cancelled) setError("Nie udało się załadować danych dodatkowych usług.");
-            } finally {
-                if (!cancelled) setLoading(false);
-            }
-        }
+          {/* PAKIET JAMBOX jako akordeon */}
+          <div class="f-modal-section">
+            <div class={`f-accordion-item ${baseOpen ? "is-open" : ""}`}>
+              <button
+                type="button"
+                class="f-accordion-header"
+                onClick={() => setBaseOpen((prev) => !prev)}
+              >
+                <span class="f-modal-phone-name">{pkg.name}</span>
+                <span class="f-modal-phone-price">
+                  {basePrice ? `${basePrice.toFixed(2)} zł/mies.` : "—"}
+                </span>
+              </button>
 
-        loadData();
-        return () => {
-            cancelled = true;
-        };
-    }, [isOpen, pkg?.id]);
+              {baseOpen && pkg.features && pkg.features.length > 0 && (
+                <div class="f-accordion-body">
+                  <ul class="f-card-features">
+                    {pkg.features.map((f, idx) => (
+                      <li class="f-card-row" key={idx}>
+                        <span class="f-card-label">{f.label}</span>
+                        <span class="f-card-value">{formatFeatureValue(f.value)}</span>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              )}
+            </div>
+          </div>
 
-    if (!isOpen || !pkg) return null;
+          {loading && <p>Ładowanie danych...</p>}
+          {error && <p class="text-red-600">{error}</p>}
 
-    const basePrice = Number(pkg.price_monthly || 0);
+          {!loading && !error && (
+            <>
+              {/* TV ADDONS */}
+              <div class="f-modal-section">
+                <h3>Pakiety dodatkowe TV</h3>
 
-    const phonePrice = useMemo(() => {
-        if (!selectedPhoneId) return 0;
-        const p = phonePlans.find((x) => x.id === selectedPhoneId);
-        return Number(p?.price_monthly || 0);
-    }, [selectedPhoneId, phonePlans]);
+                {tvAddons.length === 0 ? (
+                  <p>Brak pakietów dodatkowych TV dla tego pakietu.</p>
+                ) : (
+                  <div class="f-addon-list">
+                    {tvAddons.map((a) => {
+                      const tid = Number(a.tid);
+                      const checked = selectedTvAddonTids.includes(tid);
+                      const priceNum = Number(a.price || 0);
 
-    // UWAGA: backend może zwrócić { id, price } albo { addon_id, price }
-    const addonsPrice = useMemo(() => {
-        return selectedAddonIds.reduce((sum, addonId) => {
-            const a = addons.find((x) => (x.id ?? x.addon_id) === addonId);
-            return sum + Number(a?.price || 0);
-        }, 0);
-    }, [selectedAddonIds, addons]);
+                      return (
+                        <label class="f-addon-item" key={`tv-${tid}`}>
+                          <div class="f-addon-checkbox">
+                            <input
+                              type="checkbox"
+                              checked={checked}
+                              onChange={() => toggleTvAddon(tid)}
+                            />
+                          </div>
 
+                          <div class="f-addon-main">
+                            <div class="f-addon-name">{a.name}</div>
+                            <div class="f-addon-desc">{a.description}</div>
+                          </div>
 
+                          <div class="f-addon-price">
+                            {Number.isFinite(priceNum) ? `${priceNum.toFixed(2)} zł/mies.` : "—"}
+                          </div>
+                        </label>
+                      );
+                    })}
+                  </div>
+                )}
+              </div>
 
-    const tvAddonsPrice = useMemo(() => {
-        return selectedTvAddonTids.reduce((sum, tid) => {
-            const a = tvAddons.find((x) => Number(x.tid) === Number(tid));
-            return sum + Number(a?.price || 0);
-        }, 0);
-    }, [selectedTvAddonTids, tvAddons]);
+              {/* TELEFON */}
+              <div class="f-modal-section">
+                <h3>Usługa telefoniczna</h3>
 
-    const totalMonthly = basePrice + phonePrice + addonsPrice + tvAddonsPrice;
-
-    const toggleTvAddon = (tid) => {
-        const t = Number(tid);
-        setSelectedTvAddonTids((prev) =>
-            prev.includes(t) ? prev.filter((x) => x !== t) : [...prev, t]
-        );
-    };
-
-    return (
-        <div class="fuz-modal-overlay" onClick={onClose}>
-            <button
-                class="fuz-modal-close"
-                onClick={(e) => {
-                    e.stopPropagation();
-                    onClose();
-                }}
-            >
-                ✕
-            </button>
-
-            <div
-                class="fuz-modal-panel fuz-modal-panel--compact"
-                onClick={(e) => e.stopPropagation()}
-            >
-                <div class="fuz-modal-inner">
-                    <h2 class="fuz-modal-title">Konfiguracja usług dodatkowych</h2>
-
-                    {/* PAKIET JAMBOX jako akordeon (jak internet w Twoim modalu) */}
-                    <div class="fuz-modal-section">
-                        <div class={`fuz-accordion-item ${baseOpen ? "is-open" : ""}`}>
-                            <button
-                                type="button"
-                                class="fuz-accordion-header"
-                                onClick={() => setBaseOpen((prev) => !prev)}
-                            >
-                                <span class="fuz-modal-phone-name">{pkg.name}</span>
-                                <span class="fuz-modal-phone-price">
-                                    {basePrice ? `${basePrice.toFixed(2)} zł/mies.` : "—"}
-                                </span>
-                            </button>
-
-                            {baseOpen && pkg.features && pkg.features.length > 0 && (
-                                <div class="fuz-accordion-body">
-                                    <ul class="f-card-features">
-                                        {pkg.features.map((f, idx) => (
-                                            <li class="f-card-row" key={idx}>
-                                                <span class="f-card-label">{f.label}</span>
-                                                <span class="f-card-value">
-                                                    {formatFeatureValue(f.value)}
-                                                </span>
-                                            </li>
-                                        ))}
-                                    </ul>
-                                </div>
-                            )}
-                        </div>
+                {phonePlans.length === 0 ? (
+                  <p>Brak dostępnych pakietów telefonicznych.</p>
+                ) : (
+                  <div class="f-modal-phone-list f-accordion">
+                    {/* brak telefonu */}
+                    <div class="f-accordion-item f-accordion-item--no-phone">
+                      <button
+                        type="button"
+                        class="f-accordion-header"
+                        onClick={() => handlePhoneSelect(null)}
+                      >
+                        <span class="f-accordion-header-left">
+                          <input
+                            type="radio"
+                            name="phone-plan"
+                            checked={selectedPhoneId === null}
+                            onChange={(e) => {
+                              e.stopPropagation();
+                              handlePhoneSelect(null);
+                            }}
+                            onClick={(e) => e.stopPropagation()}
+                          />
+                          <span class="f-modal-phone-name">Nie potrzebuję telefonu</span>
+                        </span>
+                        <span class="f-modal-phone-price">0,00 zł/mies.</span>
+                      </button>
                     </div>
 
-                    {loading && <p>Ładowanie danych...</p>}
-                    {error && <p class="text-red-600">{error}</p>}
+                    {/* pakiety telefonu */}
+                    {phonePlans.map((p) => {
+                      const isSelected = selectedPhoneId === p.id;
+                      const isOpen = openPhoneId === p.id;
 
-                    {!loading && !error && (
-                        <>
+                      return (
+                        <div class={`f-accordion-item ${isOpen ? "is-open" : ""}`} key={p.id}>
+                          <button
+                            type="button"
+                            class="f-accordion-header"
+                            onClick={() => handlePhoneSelect(p.id)}
+                          >
+                            <span class="f-accordion-header-left">
+                              <input
+                                type="radio"
+                                name="phone-plan"
+                                checked={isSelected}
+                                onChange={(e) => {
+                                  e.stopPropagation();
+                                  handlePhoneSelect(p.id);
+                                }}
+                                onClick={(e) => e.stopPropagation()}
+                              />
+                              <span class="f-modal-phone-name">{p.name}</span>
+                            </span>
+                            <span class="f-modal-phone-price">
+                              {Number(p.price_monthly || 0).toFixed(2)} zł/mies.
+                            </span>
+                          </button>
 
-                            <div class="fuz-modal-section">
-                                <h3>Pakiety dodatkowe TV</h3>
-
-                                {tvAddons.length === 0 ? (
-                                    <p>Brak pakietów dodatkowych TV dla tego pakietu.</p>
-                                ) : (
-                                    <div class="fuz-addon-list">
-                                        {tvAddons.map((a) => {
-                                            const tid = Number(a.tid);
-                                            const checked = selectedTvAddonTids.includes(tid);
-                                            const priceNum = Number(a.price || 0);
-
-                                            return (
-                                                <label class="fuz-addon-item" key={`tv-${tid}`}>
-                                                    <div class="fuz-addon-checkbox">
-                                                        <input
-                                                            type="checkbox"
-                                                            checked={checked}
-                                                            onChange={() => toggleTvAddon(tid)}
-                                                        />
-                                                    </div>
-
-                                                    <div class="fuz-addon-main">
-                                                        <div class="fuz-addon-name">{a.name}</div>
-                                                        {/* jeśli chcesz pokazać typ/kind */}
-                                                        <div class="fuz-addon-desc">{a.description}</div>
-                                                    </div>
-
-                                                    <div class="fuz-addon-price">
-                                                        {Number.isFinite(priceNum) ? `${priceNum.toFixed(2)} zł/mies.` : "—"}
-                                                    </div>
-                                                </label>
-                                            );
-                                        })}
-                                    </div>
-                                )}
+                          {isOpen && (
+                            <div class="f-accordion-body">
+                              {p.features && p.features.length > 0 && (
+                                <ul class="f-card-features">
+                                  {p.features
+                                    .filter(
+                                      (f) =>
+                                        !String(f.label || "").toLowerCase().includes("aktyw")
+                                    )
+                                    .map((f, idx) => (
+                                      <li class="f-card-row" key={idx}>
+                                        <span class="f-card-label">{f.label}</span>
+                                        <span class="f-card-value">{f.value}</span>
+                                      </li>
+                                    ))}
+                                </ul>
+                              )}
                             </div>
+                          )}
+                        </div>
+                      );
+                    })}
+                  </div>
+                )}
+              </div>
 
-                            {/* TELEFON (identycznie jak w InternetAddonsModal) */}
-                            <div class="fuz-modal-section">
-                                <h3>Usługa telefoniczna</h3>
+              {/* DODATKI JAMBOX */}
+              <div class="f-modal-section">
+                <h3>Dodatkowe usługi</h3>
 
-                                {phonePlans.length === 0 ? (
-                                    <p>Brak dostępnych pakietów telefonicznych.</p>
-                                ) : (
-                                    <div class="fuz-modal-phone-list fuz-accordion">
-                                        {/* OPCJA: brak telefonu */}
-                                        <div class="fuz-accordion-item fuz-accordion-item--no-phone">
-                                            <button
-                                                type="button"
-                                                class="fuz-accordion-header"
-                                                onClick={() => handlePhoneSelect(null)}
-                                            >
-                                                <span class="fuz-accordion-header-left">
-                                                    <input
-                                                        type="radio"
-                                                        name="phone-plan"
-                                                        checked={selectedPhoneId === null}
-                                                        onChange={(e) => {
-                                                            e.stopPropagation();
-                                                            handlePhoneSelect(null);
-                                                        }}
-                                                        onClick={(e) => e.stopPropagation()}
-                                                    />
-                                                    <span class="fuz-modal-phone-name">
-                                                        Nie potrzebuję telefonu
-                                                    </span>
-                                                </span>
-                                                <span class="fuz-modal-phone-price">0,00 zł/mies.</span>
-                                            </button>
-                                        </div>
+                {addons.length === 0 ? (
+                  <p>Brak usług dodatkowych dla tego pakietu.</p>
+                ) : (
+                  <div class="f-addon-list">
+                    {addons.map((a) => {
+                      const addonId = a.id ?? a.addon_id;
+                      const checked = selectedAddonIds.includes(addonId);
+                      const priceNum = Number(a.price || 0);
 
-                                        {/* PAKIETY TELEFONU */}
-                                        {phonePlans.map((p) => {
-                                            const isSelected = selectedPhoneId === p.id;
-                                            const isOpen = openPhoneId === p.id;
+                      return (
+                        <label class="f-addon-item" key={addonId}>
+                          <div class="f-addon-checkbox">
+                            <input
+                              type="checkbox"
+                              checked={checked}
+                              onChange={() => toggleAddon(addonId)}
+                            />
+                          </div>
 
-                                            return (
-                                                <div
-                                                    class={`fuz-accordion-item ${isOpen ? "is-open" : ""}`}
-                                                    key={p.id}
-                                                >
-                                                    <button
-                                                        type="button"
-                                                        class="fuz-accordion-header"
-                                                        onClick={() => handlePhoneSelect(p.id)}
-                                                    >
-                                                        <span class="fuz-accordion-header-left">
-                                                            <input
-                                                                type="radio"
-                                                                name="phone-plan"
-                                                                checked={isSelected}
-                                                                onChange={(e) => {
-                                                                    e.stopPropagation();
-                                                                    handlePhoneSelect(p.id);
-                                                                }}
-                                                                onClick={(e) => e.stopPropagation()}
-                                                            />
-                                                            <span class="fuz-modal-phone-name">{p.name}</span>
-                                                        </span>
-                                                        <span class="fuz-modal-phone-price">
-                                                            {Number(p.price_monthly || 0).toFixed(2)} zł/mies.
-                                                        </span>
-                                                    </button>
+                          <div class="f-addon-main">
+                            <div class="f-addon-name">{a.name}</div>
+                            {a.description && <div class="f-addon-desc">{a.description}</div>}
+                          </div>
 
-                                                    {isOpen && (
-                                                        <div class="fuz-accordion-body">
-                                                            {p.features && p.features.length > 0 && (
-                                                                <ul class="f-card-features">
-                                                                    {p.features
-                                                                        .filter(
-                                                                            (f) =>
-                                                                                !String(f.label || "")
-                                                                                    .toLowerCase()
-                                                                                    .includes("aktyw")
-                                                                        )
-                                                                        .map((f, idx) => (
-                                                                            <li class="f-card-row" key={idx}>
-                                                                                <span class="f-card-label">{f.label}</span>
-                                                                                <span class="f-card-value">{f.value}</span>
-                                                                            </li>
-                                                                        ))}
-                                                                </ul>
-                                                            )}
-                                                        </div>
-                                                    )}
-                                                </div>
-                                            );
-                                        })}
-                                    </div>
-                                )}
-                            </div>
+                          <div class="f-addon-price">{priceNum.toFixed(2)} zł/mies.</div>
+                        </label>
+                      );
+                    })}
+                  </div>
+                )}
+              </div>
 
-                            {/* DODATKI JAMBOX (checkbox, cena z jambox_package_addon_options.price) */}
-                            <div class="fuz-modal-section">
-                                <h3>Dodatkowe usługi</h3>
+              {/* PODSUMOWANIE */}
+              <div class="f-modal-section f-summary">
+                <h3>Podsumowanie miesięczne</h3>
 
-                                {addons.length === 0 ? (
-                                    <p>Brak usług dodatkowych dla tego pakietu.</p>
-                                ) : (
-                                    <div class="fuz-addon-list">
-                                        {addons.map((a) => {
-                                            const addonId = a.id ?? a.addon_id; // defensywnie
-                                            const checked = selectedAddonIds.includes(addonId);
+                <div class="f-summary-list">
+                  <div class="f-summary-row">
+                    <span>Pakiet</span>
+                    <span>{basePrice ? `${basePrice.toFixed(2)} zł/mies.` : "—"}</span>
+                  </div>
 
-                                            return (
-                                                <label class="fuz-addon-item" key={addonId}>
-                                                    <div class="fuz-addon-checkbox">
-                                                        <input
-                                                            type="checkbox"
-                                                            checked={checked}
-                                                            onChange={() => toggleAddon(addonId)}
-                                                        />
-                                                    </div>
+                  <div class="f-summary-row">
+                    <span>Pakiety TV</span>
+                    <span>{tvAddonsPrice ? `${tvAddonsPrice.toFixed(2)} zł/mies.` : "—"}</span>
+                  </div>
 
-                                                    <div class="fuz-addon-main">
-                                                        <div class="fuz-addon-name">{a.name}</div>
-                                                        {a.description && (
-                                                            <div class="fuz-addon-desc">{a.description}</div>
-                                                        )}
-                                                    </div>
+                  <div class="f-summary-row">
+                    <span>Telefon</span>
+                    <span>{phonePrice ? `${phonePrice.toFixed(2)} zł/mies.` : "—"}</span>
+                  </div>
 
-                                                    <div class="fuz-addon-price">
-                                                        {Number(a.price || 0).toFixed(2)} zł/mies.
-                                                    </div>
-                                                </label>
-                                            );
-                                        })}
-                                    </div>
-                                )}
-                            </div>
+                  <div class="f-summary-row">
+                    <span>Dodatki</span>
+                    <span>{addonsPrice ? `${addonsPrice.toFixed(2)} zł/mies.` : "—"}</span>
+                  </div>
 
-                            {/* PODSUMOWANIE */}
-                            <div class="fuz-modal-section fuz-summary">
-                                <h3>Podsumowanie miesięczne</h3>
-
-                                <div class="fuz-summary-list">
-                                    <div class="fuz-summary-row">
-                                        <span>Pakiet</span>
-                                        <span>
-                                            {basePrice ? `${basePrice.toFixed(2)} zł/mies.` : "—"}
-                                        </span>
-                                    </div>
-
-                                    <div class="fuz-summary-row">
-                                        <span>Pakiety TV</span>
-                                        <span>
-                                            {tvAddonsPrice ? `${tvAddonsPrice.toFixed(2)} zł/mies.` : "—"}
-                                        </span>
-                                    </div>
-                                    
-                                    <div class="fuz-summary-row">
-                                        <span>Telefon</span>
-                                        <span>{phonePrice ? `${phonePrice.toFixed(2)} zł/mies.` : "—"}</span>
-                                    </div>
-
-                                    <div class="fuz-summary-row">
-                                        <span>Dodatki</span>
-                                        <span>{addonsPrice ? `${addonsPrice.toFixed(2)} zł/mies.` : "—"}</span>
-                                    </div>
-
-                                    <div class="fuz-summary-total">
-                                        <span>Łącznie</span>
-                                        <span>{totalMonthly.toFixed(2)} zł/mies.</span>
-                                    </div>
-                                </div>
-                            </div>
-                        </>
-                    )}
+                  <div class="f-summary-total">
+                    <span>Łącznie</span>
+                    <span>{totalMonthly.toFixed(2)} zł/mies.</span>
+                  </div>
                 </div>
-            </div>
+              </div>
+            </>
+          )}
         </div>
-    );
+      </div>
+    </div>
+  );
 }
diff --git a/src/islands/jambox/JamboxChannelsModal.jsx b/src/islands/jambox/JamboxChannelsModal.jsx
index fc87a90..5749d61 100644
--- a/src/islands/jambox/JamboxChannelsModal.jsx
+++ b/src/islands/jambox/JamboxChannelsModal.jsx
@@ -1,146 +1,167 @@
-// src/islands/JamboxChannelsModal.jsx
-import { useEffect, useState } from "preact/hooks";
+import { useEffect, useMemo, useState } from "preact/hooks";
 import "../../styles/modal.css";
 import "../../styles/offers/offers-table.css";
+import "../../styles/channels-search.css"; // żeby input miał identyczny styl
 
 export default function JamboxChannelsModal({ isOpen, onClose, pkg }) {
-    const [channels, setChannels] = useState([]);
-    const [loading, setLoading] = useState(false);
-    const [error, setError] = useState("");
+  const [channels, setChannels] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+  const [query, setQuery] = useState("");
 
-    const [query, setQuery] = useState("");
+  const q = query.trim().toLowerCase();
 
-    const q = query.trim().toLowerCase();
+  const filtered = !q
+    ? channels
+    : channels.filter((ch) => (ch.name || "").toLowerCase().includes(q));
 
-    const filtered = !q
-        ? channels
-        : channels.filter((ch) =>
-            (ch.name || "").toLowerCase().includes(q)
-        );
+  const meta = useMemo(() => {
+    if (loading) return "Ładowanie…";
+    if (error) return error;
+    if (!query.trim()) return `Wyniki: ${filtered.length} / ${channels.length}`;
+    return `Wyniki: ${filtered.length} / ${channels.length}`;
+  }, [loading, error, query, filtered.length, channels.length]);
 
+  useEffect(() => {
+    if (!isOpen || !pkg?.id) return;
 
-    useEffect(() => {
-        if (!isOpen || !pkg?.id) return;
+    let cancelled = false;
 
-        let cancelled = false;
+    async function loadChannels() {
+      setLoading(true);
+      setError("");
+      setChannels([]);
+      setQuery("");
 
-        async function loadChannels() {
-            setLoading(true);
-            setError("");
-            setChannels([]);
-            setQuery("");
+      try {
+        const params = new URLSearchParams({ packageId: String(pkg.id) });
+        const res = await fetch(`/api/jambox/channels?${params.toString()}`);
 
-            try {
-                const params = new URLSearchParams({ packageId: String(pkg.id) });
-                const res = await fetch(`/api/jambox/channels?${params.toString()}`);
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
 
-                if (!res.ok) {
-                    throw new Error(`HTTP ${res.status}`);
-                }
+        const json = await res.json();
+        if (!cancelled) setChannels(Array.isArray(json.data) ? json.data : []);
+      } catch (err) {
+        console.error("❌ Błąd pobierania listy kanałów:", err);
+        if (!cancelled) setError("Nie udało się załadować listy kanałów.");
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    }
 
-                const json = await res.json();
-                if (!cancelled) {
-                    setChannels(Array.isArray(json.data) ? json.data : []);
-                }
-            } catch (err) {
-                console.error("❌ Błąd pobierania listy kanałów:", err);
-                if (!cancelled) {
-                    setError("Nie udało się załadować listy kanałów.");
-                }
-            } finally {
-                if (!cancelled) setLoading(false);
-            }
-        }
+    loadChannels();
+    return () => {
+      cancelled = true;
+    };
+  }, [isOpen, pkg?.id]);
 
-        loadChannels();
-        return () => {
-            cancelled = true;
-        };
-    }, [isOpen, pkg?.id]);
+  if (!isOpen || !pkg) return null;
 
-    if (!isOpen || !pkg) return null;
+  return (
+    <div class="f-modal-overlay" onClick={onClose}>
+      <button
+        class="f-modal-close"
+        onClick={(e) => {
+          e.stopPropagation();
+          onClose();
+        }}
+        aria-label="Zamknij"
+        type="button"
+      >
+        ✕
+      </button>
 
-    return (
-        <div class="fuz-modal-overlay" onClick={onClose}>
-            <button
-                class="fuz-modal-close"
-                onClick={(e) => {
-                    e.stopPropagation();
-                    onClose();
-                }}
-            >
-                ✕
-            </button>
+      <div
+        class="f-modal-panel f-modal-panel--channels"
+        onClick={(e) => e.stopPropagation()}
+        role="dialog"
+        aria-modal="true"
+        aria-label={`Kanały w pakiecie ${pkg.name}`}
+      >
+        <div class="max-w-8xl mx-auto px-3 md:px-6">
+          <h2 class="f-modal-title">Kanały w pakiecie {pkg.name}</h2>
 
-            <div
-                class="fuz-modal-panel fuz-modal-panel--channels"
-                onClick={(e) => e.stopPropagation()}
-            >
-                <div class="max-w-8xl mx-auto px-3 md:px-6">
-                    <h2 class="fuz-modal-title">Kanały w pakiecie {pkg.name}</h2>
+          {/* INPUT jak w wyszukiwarce (z własnym X) */}
+          <div class="f-chsearch__top">
+            <div class="f-chsearch__inputwrap">
+              <input
+                class="f-chsearch__input"
+                type="search"
+                value={query}
+                onInput={(e) => setQuery(e.currentTarget.value)}
+                placeholder="Szukaj kanału po nazwie…"
+                aria-label="Szukaj kanału po nazwie"
+              />
 
-                    <div class="fuz-chsearch__top">
-                        <input
-                            class="fuz-chsearch__input"
-                            type="search"
-                            value={query}
-                            onInput={(e) => setQuery(e.currentTarget.value)}
-                            placeholder="Szukaj kanału po nazwie…"
-                            aria-label="Szukaj kanału po nazwie"
-                        />
-                    </div>
-
-                    {!loading && !error && (
-                        <div class="jmb-search-meta">
-                            Wyniki: <strong>{filtered.length}</strong> / {channels.length}
-                        </div>
-                    )}
-
-                    {loading && <p>Ładowanie kanałów...</p>}
-                    {error && <p class="text-red-600">{error}</p>}
-
-                    {!loading && !error && (
-                        <>
-                            {filtered.length === 0 ? (
-                                <p>Brak kanałów spełniających kryteria.</p>
-                            ) : (
-                                <div class="">
-                                    <div class="f-section-channel">
-                                        {filtered.map((ch) => (
-                                            <div
-                                                class="jmb-channel-card"
-                                                key={ch.number}
-                                                onClick={(e) => {
-                                                    if (e.target.closest("a, button")) return;
-                                                    e.currentTarget.classList.toggle("is-flipped");
-                                                }}
-                                            >
-                                                <div class="jmb-channel-inner">
-                                                    <div class="jmb-channel-face jmb-channel-front">
-                                                        {ch.logo_url && (
-                                                            <img src={ch.logo_url} alt={ch.name} class="jmb-channel-logo" loading="lazy" />
-                                                        )}
-                                                        <div class="jmb-channel-name">{ch.name}</div>
-                                                        <div class="jmb-channel-number">kanał {ch.number}</div>
-                                                    </div>
-
-                                                    <div class="jmb-channel-face jmb-channel-back">
-                                                        <div class="jmb-channel-back-title">{ch.name}</div>
-                                                        <div
-                                                            class="jmb-channel-desc"
-                                                            dangerouslySetInnerHTML={{ __html: ch.description || "<em>Brak opisu kanału.</em>" }}
-                                                        />
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        ))}
-                                    </div>
-                                </div>
-                            )}
-                        </>
-                    )}
-                </div>
+              {query && (
+                <button
+                  type="button"
+                  class="f-chsearch__clear"
+                  aria-label="Wyczyść wyszukiwanie"
+                  onClick={() => setQuery("")}
+                  onMouseDown={(e) => e.preventDefault()} // nie zabieraj focusa inputowi
+                >
+                  ✕
+                </button>
+              )}
             </div>
+
+            <div class="f-chsearch__meta">{meta}</div>
+          </div>
+
+          {loading && <p>Ładowanie kanałów...</p>}
+          {error && !loading && <p class="text-red-600">{error}</p>}
+
+          {!loading && !error && (
+            <>
+              {filtered.length === 0 ? (
+                <p>Brak kanałów spełniających kryteria.</p>
+              ) : (
+                <div class="f-section-channel">
+                  {filtered.map((ch) => (
+                    <div
+                      class="jmb-channel-card"
+                      key={ch.number}
+                      onClick={(e) => {
+                        // żeby klik w link w opisie nie flipował
+                        if (e.target.closest("a, button")) return;
+                        e.currentTarget.classList.toggle("is-flipped");
+                      }}
+                    >
+                      <div class="jmb-channel-inner">
+                        {/* FRONT */}
+                        <div class="jmb-channel-face jmb-channel-front">
+                          {ch.logo_url && (
+                            <img
+                              src={ch.logo_url}
+                              alt={ch.name}
+                              class="jmb-channel-logo"
+                              loading="lazy"
+                            />
+                          )}
+                          <div class="jmb-channel-name">{ch.name}</div>
+                          <div class="jmb-channel-number">kanał {ch.number}</div>
+                        </div>
+
+                        {/* BACK */}
+                        <div class="jmb-channel-face jmb-channel-back">
+                          <div class="jmb-channel-back-title">{ch.name}</div>
+                          <div
+                            class="jmb-channel-desc"
+                            dangerouslySetInnerHTML={{
+                              __html: ch.description || "<em>Brak opisu kanału.</em>",
+                            }}
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </>
+          )}
         </div>
-    );
+      </div>
+    </div>
+  );
 }
diff --git a/src/islands/jambox/JamboxChannelsSearch.jsx b/src/islands/jambox/JamboxChannelsSearch.jsx
index d88f07d..f649cae 100644
--- a/src/islands/jambox/JamboxChannelsSearch.jsx
+++ b/src/islands/jambox/JamboxChannelsSearch.jsx
@@ -31,10 +31,13 @@ export default function JamboxChannelsSearch() {
         params.set("q", qq);
         params.set("limit", "80");
 
-        const res = await fetch(`/api/jambox/channels-search?${params.toString()}`, {
-          signal: ac.signal,
-          headers: { Accept: "application/json" },
-        });
+        const res = await fetch(
+          `/api/jambox/channels-search?${params.toString()}`,
+          {
+            signal: ac.signal,
+            headers: { Accept: "application/json" },
+          }
+        );
 
         const json = await res.json();
         if (!res.ok || !json.ok) throw new Error(json?.error || "API_ERROR");
@@ -68,76 +71,81 @@ export default function JamboxChannelsSearch() {
     el.scrollIntoView({ behavior: "smooth", block: "start" });
 
     el.classList.add("is-target");
-    setTimeout(() => el.classList.remove("is-target"), 1200);
+    window.setTimeout(() => el.classList.remove("is-target"), 1200);
   }
 
-
   return (
-    <div class="fuz-chsearch">
+    <div class="f-chsearch">
       <h1 class="f-section-title">Wyszukiwanie kanałów w pakietach telewizji</h1>
-      <div class="fuz-chsearch__top">
-        <input
-          class="fuz-chsearch__input"
-          type="search"
-          value={q}
-          onInput={(e) => setQ(e.currentTarget.value)}
-          placeholder="Szukaj kanału po nazwie…"
-          aria-label="Szukaj kanału po nazwie"
-        />
 
-        <div class="fuz-chsearch__meta">
-          {meta}
+      <div class="f-chsearch__top">
+        <div class="f-chsearch__inputwrap">
+          <input
+            class="f-chsearch__input"
+            type="search"
+            value={q}
+            onInput={(e) => setQ(e.currentTarget.value)}
+            placeholder="Szukaj kanału po nazwie…"
+            aria-label="Szukaj kanału po nazwie"
+          />
+
+          {q && (
+            <button
+              type="button"
+              class="f-chsearch__clear"
+              aria-label="Wyczyść wyszukiwanie"
+              onClick={() => setQ("")}
+            >
+              ✕
+            </button>
+          )}
         </div>
+
+        <div class="f-chsearch__meta">{meta}</div>
       </div>
 
-      <div class="fuz-chsearch__list" role="list">
+      <div class="f-chsearch__list" role="list">
         {items.map((c) => (
-          <div class="fuz-chsearch__row" role="listitem" key={`${c.name}-${c.logo_url || ""}`}>
+          <div
+            class="f-chsearch__row"
+            role="listitem"
+            key={`${c.name}-${c.logo_url || ""}`}
+          >
             {/* kolumna 1 */}
-            <div class="fuz-chsearch__left">
+            <div class="f-chsearch__left">
               {c.logo_url && (
                 <img
                   src={c.logo_url}
                   alt={c.name}
-                  class="fuz-chsearch__logo"
+                  class="f-chsearch__logo"
                   loading="lazy"
                 />
               )}
 
-              <div class="fuz-chsearch__channel-name">
-                {c.name}
-              </div>
-
-              {/* <div class="fuz-chsearch__channel-number">
-                kanał {c.min_number || "—"}
-              </div> */}
+              <div class="f-chsearch__channel-name">{c.name}</div>
             </div>
 
-
             {/* kolumna 2 */}
-            <div class="fuz-chsearch__right">
+            <div class="f-chsearch__right">
               <div
-                class="fuz-chsearch__desc fuz-chsearch__desc--html"
-                dangerouslySetInnerHTML={{ __html: c.description || "<em>—</em>" }}
+                class="f-chsearch__desc f-chsearch__desc--html"
+                dangerouslySetInnerHTML={{
+                  __html: c.description || "<em>—</em>",
+                }}
               />
 
               {Array.isArray(c.packages) && c.packages.length > 0 && (
-                <div class="fuz-chsearch__packages">
+                <div class="f-chsearch__packages">
                   Dostępny w:&nbsp;
                   {c.packages.map((p, i) => (
-                    // <span class="fuz-chsearch__pkg" key={p.id}>
-                    //   {p.name}{" "}
-                    //   <span class="fuz-chsearch__pkgnum">(kanał {p.number})</span>
-                    //   {i < c.packages.length - 1 ? ", " : ""}
-                    // </span>
                     <button
                       type="button"
-                      class="fuz-chsearch__pkg"
+                      class="f-chsearch__pkg"
                       key={p.id}
                       onClick={() => scrollToPackage(p.id)}
                     >
                       {p.name}{" "}
-                      <span class="fuz-chsearch__pkgnum">(kanał {p.number})</span>
+                      <span class="f-chsearch__pkgnum">(kanał {p.number})</span>
                       {i < c.packages.length - 1 ? ", " : ""}
                     </button>
                   ))}
@@ -148,7 +156,7 @@ export default function JamboxChannelsSearch() {
         ))}
 
         {q.trim().length >= 2 && !loading && items.length === 0 && (
-          <div class="fuz-chsearch__empty">
+          <div class="f-chsearch__empty">
             Brak wyników dla: <strong>{q}</strong>
           </div>
         )}
diff --git a/src/styles/channels-search.css b/src/styles/channels-search.css
index 85978d7..88beb2c 100644
--- a/src/styles/channels-search.css
+++ b/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;
-  }
\ No newline at end of file
+  }
+
+  .f-chsearch__input::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+}
+
+.f-chsearch__input::-ms-clear {
+  display: none;
+}
+
+.f-chsearch__input[type="search"] {
+  appearance: none;
+}
\ No newline at end of file
diff --git a/src/styles/modal.css b/src/styles/modal.css
index 2b9ff7c..9e85666 100644
--- a/src/styles/modal.css
+++ b/src/styles/modal.css
@@ -2,98 +2,93 @@
    MODAL — FULLSCREEN OVERLAY
    =========================== */
 
-.fuz-modal-overlay {
+.f-modal-overlay {
   @apply fixed inset-0 z-[9999] flex flex-col;
   background: rgba(0, 0, 0, 0.65);
   backdrop-filter: blur(6px);
   animation: fadeIn 0.25s ease-out forwards;
 }
 
-.fuz-modal-close {
+.f-modal-close {
   @apply absolute top-4 right-6 text-3xl font-bold cursor-pointer transition-opacity;
   @apply text-[--f-text] opacity-70;
 }
 
-.fuz-modal-close:hover {
+.f-modal-close:hover {
   @apply opacity-100;
 }
 
 /* panel – pełny ekran, ale treść centrowana max-w */
-.fuz-modal-panel {
+.f-modal-panel {
   @apply w-full h-full overflow-y-auto bg-[--f-background] text-[--f-text];
   @apply px-6 py-8 md:px-12 md:py-12;
 }
 
 /* wersja "kompaktowa" z mniejszym max-width (używana w dodatkach) */
-.fuz-modal-panel.fuz-modal-panel--compact {
+.f-modal-panel.f-modal-panel--compact {
   @apply flex justify-center items-start;
 }
 
-.fuz-modal-inner {
+.f-modal-inner {
   @apply w-full max-w-4xl mx-auto;
 }
 
-.fuz-modal-title {
+.f-modal-title {
   @apply text-3xl md:text-4xl font-bold mb-8 text-center text-[--f-text];
 }
 
-.fuz-modal-content p {
+.f-modal-content p {
   @apply leading-relaxed text-2xl text-center;
 }
 
-.fuz-modal-content p img {
+.f-modal-content p img {
   @apply mt-2;
 }
 
 @keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
+  from { opacity: 0; }
+  to { opacity: 1; }
 }
 
 /* ===========================
    TELEFON — AKORDEON
    =========================== */
 
-.fuz-modal-phone-list.fuz-accordion {
+.f-modal-phone-list.f-accordion {
   @apply flex flex-col gap-2;
 }
 
-.fuz-accordion-item {
+.f-accordion-item {
   @apply rounded-xl border overflow-hidden bg-[--f-background];
-  border-color: rgba(148, 163, 184, 0.6); /* neutralna szarość — ok w obu motywach */
+  border-color: rgba(148, 163, 184, 0.6);
 }
 
-.fuz-accordion-header {
+.f-accordion-header {
   @apply w-full flex items-center justify-between gap-4 px-4 py-2 cursor-pointer;
   background: rgba(148, 163, 184, 0.06);
   border: none;
   outline: none;
 }
 
-.fuz-accordion-header-left {
+.f-accordion-header-left {
   @apply flex items-center gap-1;
 }
 
-.fuz-modal-phone-name {
+.f-modal-phone-name {
   @apply font-medium ml-2;
 }
 
-.fuz-modal-phone-price {
+.f-modal-phone-price {
   @apply font-semibold whitespace-nowrap;
 }
 
-.fuz-accordion-body {
+.f-accordion-body {
   @apply px-4 pt-2 pb-3;
   border-top: 1px solid rgba(148, 163, 184, 0.4);
 }
 
-/* wyróżnienie otwartego pakietu – lekki „accent wash” na tle */
-.fuz-accordion-item.is-open .fuz-accordion-header {
+/* wyróżnienie otwartego pakietu */
+.f-accordion-item.is-open .f-accordion-header {
   background: color-mix(in srgb, var(--fuz-accent, #2563eb) 8%, transparent);
 }
 
@@ -101,94 +96,96 @@
    DODATKI — KOLUMNOWA LISTA
    =========================== */
 
-.fuz-addon-list {
+.f-addon-list {
   @apply flex flex-col gap-2;
 }
 
-.fuz-addon-item {
+.f-addon-item {
   @apply grid items-center gap-3 px-3 py-2 rounded-xl border cursor-pointer;
-  grid-template-columns: auto 1fr auto; /* [checkbox] [opis] [cena] */
+  grid-template-columns: auto 1fr auto;
   border-color: rgba(148, 163, 184, 0.5);
   background: var(--f-background);
 }
 
-/* kliknięcie w środek też zaznacza checkboxa */
-.fuz-addon-item input[type="checkbox"] {
+.f-addon-item input[type="checkbox"] {
   @apply cursor-pointer;
 }
 
-.fuz-addon-checkbox {
+.f-addon-checkbox {
   @apply flex items-center justify-center;
 }
 
-.fuz-addon-main {
+.f-addon-main {
   @apply flex flex-col gap-0.5;
 }
 
-.fuz-addon-name {
+.f-addon-name {
   @apply font-medium;
 }
 
-.fuz-addon-desc {
+.f-addon-desc {
   @apply text-sm opacity-85;
 }
 
-.fuz-addon-price {
+.f-addon-price {
   @apply font-semibold whitespace-nowrap;
 }
 
-/* lekkie podświetlenie przy hover */
-.fuz-addon-item:hover {
-  border-color: color-mix(in srgb, var(--fuz-accent, #2563eb) 70%, rgba(148, 163, 184, 0.5) 30%);
+.f-addon-item:hover {
+  border-color: color-mix(
+    in srgb,
+    var(--fuz-accent, #2563eb) 70%,
+    rgba(148, 163, 184, 0.5) 30%
+  );
 }
 
 /* ===========================
    PODSUMOWANIE MIESIĘCZNE
    =========================== */
 
-.fuz-summary {
+.f-summary {
   @apply pt-2;
 }
 
-.fuz-summary-list {
+.f-summary-list {
   @apply flex flex-col gap-1 mt-2 p-4 rounded-xl;
   background: rgba(148, 163, 184, 0.07);
 }
 
-.fuz-summary-row,
-.fuz-summary-total {
+.f-summary-row,
+.f-summary-total {
   @apply flex items-center justify-between;
 }
 
-.fuz-summary-row span:last-child {
+.f-summary-row span:last-child {
   @apply font-medium whitespace-nowrap;
 }
 
-.fuz-summary-total {
+.f-summary-total {
   @apply mt-1 pt-2;
   border-top: 1px solid rgba(148, 163, 184, 0.4);
 }
 
-.fuz-summary-total span:last-child {
+.f-summary-total span:last-child {
   @apply font-bold;
   font-size: 1.25rem;
   color: var(--fuz-accent, #2563eb);
 }
 
-.fuz-modal-section {
+.f-modal-section {
   @apply mb-6;
 }
 
-.fuz-modal-section h3 {
+.f-modal-section h3 {
   @apply text-xl md:text-2xl font-semibold mb-3;
 }
 
-/* opcja "bez telefonu" — trochę lżejsze tło */
-.fuz-accordion-item--no-phone .fuz-accordion-header {
+/* opcja "bez telefonu" */
+.f-accordion-item--no-phone .f-accordion-header {
   background: rgba(148, 163, 184, 0.03);
 }
 
-.fuz-accordion-header-left input[type="radio"] {
+.f-accordion-header-left input[type="radio"] {
   width: 1.05rem;
   height: 1.05rem;
   transform: scale(1.05);
@@ -196,7 +193,7 @@
   cursor: pointer;
 }
 
-.fuz-addon-checkbox input[type="checkbox"] {
+.f-addon-checkbox input[type="checkbox"] {
   width: 1.05rem;
   height: 1.05rem;
   transform: scale(1.05);
@@ -204,10 +201,7 @@
   cursor: pointer;
 }
 
-.fuz-accordion-header-left {
+.f-accordion-header-left,
+.f-addon-checkbox {
   align-items: center;
 }
-
-.fuz-addon-checkbox {
-  align-items: center;
-}
\ No newline at end of file
diff --git a/src/styles/offers/offers-table.css b/src/styles/offers/offers-table.css
index dc66699..2338cee 100644
--- a/src/styles/offers/offers-table.css
+++ b/src/styles/offers/offers-table.css
@@ -331,16 +331,3 @@ obszar ze scrollem wewnątrz modala
   outline-offset: 4px;
 }
 
-.fuz-chsearch__pkg {
-  background: transparent;
-  border: 0;
-  padding: 0;
-  cursor: pointer;
-  font: inherit;
-  color: var(--f-link, var(--f-link));
-  text-decoration: underline;
-}
-
-.fuz-chsearch__pkg:hover {
-  text-decoration-thickness: 2px;
-}
\ No newline at end of file