Style modal i poprawa card na telefonie

src/styles/modal.css

@@ -60,7 +60,7 @@
    =========================== */
 
 .fuz-modal-phone-list.fuz-accordion {
-  @apply flex flex-col gap-3;
+  @apply flex flex-col gap-2;
 }
 
 .fuz-accordion-item {
@@ -69,18 +69,18 @@
 }
 
 .fuz-accordion-header {
-  @apply w-full flex items-center justify-between gap-4 px-4 py-3 cursor-pointer;
+  @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 {
-  @apply flex items-center gap-2;
+  @apply flex items-center gap-1;
 }
 
 .fuz-modal-phone-name {
-  @apply font-medium;
+  @apply font-medium ml-2;
 }
 
 .fuz-modal-phone-price {
@@ -187,3 +187,27 @@
 .fuz-accordion-item--no-phone .fuz-accordion-header {
   background: rgba(148, 163, 184, 0.03);
 }
+
+.fuz-accordion-header-left input[type="radio"] {
+  width: 1.05rem;
+  height: 1.05rem;
+  transform: scale(1.05);
+  accent-color: var(--fuz-accent, #2563eb);
+  cursor: pointer;
+}
+
+.fuz-addon-checkbox input[type="checkbox"] {
+  width: 1.05rem;
+  height: 1.05rem;
+  transform: scale(1.05);
+  accent-color: var(--fuz-accent, #2563eb);
+  cursor: pointer;
+}
+
+.fuz-accordion-header-left {
+  align-items: center;
+}
+
+.fuz-addon-checkbox {
+  align-items: center;
+}

src/styles/offers/offers-table.css

@@ -12,10 +12,14 @@
   padding: 0 1rem;
 }
 
-/* KARTA – POPRAWIONA, BEZ width/max-width/flex 1 1 300px */
-.f-card {
-  flex: 0 1 320px; 
+/* -----------------------------
+   KARTA – MOBILE FIRST
+------------------------------ */
 
+/* MOBILE: każda karta ~pełna szerokość */
+.f-card {
+  flex: 1 1 100%;
+  max-width: 26rem; /* możesz dać 100%, jeśli chcesz naprawdę full */
   @apply bg-[--f-bg] text-[--f-text] border border-[--f-offers-border]
          rounded-2xl shadow-md p-6 relative flex flex-col gap-4;
 }
@@ -83,64 +87,55 @@
   @apply text-red-600 opacity-60;
 }
 
-
 /* -----------------------------
-   INTELIGENTNY UKŁAD KART
+   INTELIGENTNY UKŁAD – OD MD↑
 ------------------------------ */
 
-/* DOMYŚLNE: responsywnie */
-.f-card {
+@media (min-width: 768px) {
+  /* DOMYŚLNE: responsywnie */
+  .f-card {
     flex: 1 1 300px;
     max-width: 360px;
-}
+  }
 
-/* LICZNIK KART */
-.f-offers-grid {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: 2rem;
-}
-
-/* --- UKŁAD SPECJALNY --- */
-
-/* 4 karty → 2 + 2 */
-.f-count-4 .f-card {
+  /* 4 karty → 2 + 2 */
+  .f-count-4 .f-card {
     flex: 0 1 calc(50% - 2rem);
     max-width: 420px;
-}
+  }
 
-/* 5 kart → 3 + 2 */
-.f-count-5 .f-card {
+  /* 5 kart → 3 + 2 */
+  .f-count-5 .f-card {
     flex: 0 1 calc(33% - 2rem);
-}
-.f-count-5 .f-card:nth-child(n+4) {
+  }
+  .f-count-5 .f-card:nth-child(n + 4) {
     flex: 0 1 calc(50% - 2rem);
     max-width: 420px;
-}
+  }
 
-/* 7 kart → 3 + 3 + 1 (środek) */
-.f-count-7 .f-card {
+  /* 7 kart → 3 + 3 + 1 (środek) */
+  .f-count-7 .f-card {
     flex: 0 1 calc(33% - 2rem);
-}
-.f-count-7 .f-card:last-child {
+  }
+  .f-count-7 .f-card:last-child {
     flex: 0 1 calc(33% - 2rem);
     margin-left: auto;
     margin-right: auto;
-}
+  }
 
-/* 8 kart → 3 + 3 + 2 */
-.f-count-8 .f-card {
+  /* 8 kart → 3 + 3 + 2 */
+  .f-count-8 .f-card {
     flex: 0 1 calc(33% - 2rem);
-}
-.f-count-8 .f-card:nth-child(n+7) {
+  }
+  .f-count-8 .f-card:nth-child(n + 7) {
     flex: 0 1 calc(50% - 2rem);
     max-width: 420px;
-}
+  }
 
-/* 10 kart → 3 + 3 + 3 + 1 */
-.f-count-10 .f-card:last-child {
+  /* 10 kart → 3 + 3 + 3 + 1 */
+  .f-count-10 .f-card:last-child {
     flex: 0 1 calc(33% - 2rem);
     margin-left: auto;
     margin-right: auto;
+  }
 }

src/styles/theme.css

@@ -72,10 +72,14 @@
   --btn-background-hover: var(--surface4-light);
   --btn-text-hover: var(--link-color-light);
   */
-  --btn-background: var(--surface4-light);
-  --btn-text: var(--link-color-light);
-  --btn-background-hover: var(--link-color-light);
-  --btn-text-hover: var(--surface4-light);
+  --btn-background: var(--link-color-light);
+  /* var(--surface4-light); */
+  --btn-text: var(--surface4-light);
+  /* var(--link-color-light); */
+  --btn-background-hover: var(--surface4-light);
+  /* var(--link-color-light); */
+  --btn-text-hover:  var(--link-color-light);
+  /* var(--surface4-light); */
 
   --f-background-toast: var(--surface2-dark);