From 51ab1e8b2f54ef6f4aa85a4502876bc49b532968 Mon Sep 17 00:00:00 2001
From: dm <dm@dariuszm.eu>
Date: Thu, 11 Dec 2025 18:34:57 +0100
Subject: [PATCH] Style modal i poprawa card na telefonie

---
 src/styles/modal.css               |  32 +++++++--
 src/styles/offers/offers-table.css | 107 ++++++++++++++---------------
 src/styles/theme.css               |  12 ++--
 3 files changed, 87 insertions(+), 64 deletions(-)

diff --git a/src/styles/modal.css b/src/styles/modal.css
index 166765d..2b9ff7c 100644
--- a/src/styles/modal.css
+++ b/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 {
@@ -186,4 +186,28 @@
 /* opcja "bez telefonu" — trochę lżejsze tło */
 .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;
 }
\ No newline at end of file
diff --git a/src/styles/offers/offers-table.css b/src/styles/offers/offers-table.css
index 463d3c7..6d17801 100644
--- a/src/styles/offers/offers-table.css
+++ b/src/styles/offers/offers-table.css
@@ -12,10 +12,14 @@
   padding: 0 1rem;
 }
 
-/* KARTA – POPRAWIONA, BEZ width/max-width/flex 1 1 300px */
+/* -----------------------------
+   KARTA – MOBILE FIRST
+------------------------------ */
+
+/* MOBILE: każda karta ~pełna szerokość */
 .f-card {
-  flex: 0 1 320px; 
-  
+  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;
 }
@@ -56,7 +60,7 @@
 
 .f-card-row {
   display: grid;
-  grid-template-columns: 2fr 1fr; 
+  grid-template-columns: 2fr 1fr;
   gap: 0.75rem;
   padding: 0.5rem 0;
   border-bottom: 1px solid var(--f-offers-border);
@@ -83,64 +87,55 @@
   @apply text-red-600 opacity-60;
 }
 
-
 /* -----------------------------
-   INTELIGENTNY UKŁAD KART
+   INTELIGENTNY UKŁAD – OD MD↑
 ------------------------------ */
 
-/* DOMYŚLNE: responsywnie */
-.f-card {
-  flex: 1 1 300px;
-  max-width: 360px;
-}
+@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;
-}
+  /* 4 karty → 2 + 2 */
+  .f-count-4 .f-card {
+    flex: 0 1 calc(50% - 2rem);
+    max-width: 420px;
+  }
 
-/* --- UKŁAD SPECJALNY --- */
+  /* 5 kart → 3 + 2 */
+  .f-count-5 .f-card {
+    flex: 0 1 calc(33% - 2rem);
+  }
+  .f-count-5 .f-card:nth-child(n + 4) {
+    flex: 0 1 calc(50% - 2rem);
+    max-width: 420px;
+  }
 
-/* 4 karty → 2 + 2 */
-.f-count-4 .f-card {
-  flex: 0 1 calc(50% - 2rem);
-  max-width: 420px;
-}
+  /* 7 kart → 3 + 3 + 1 (środek) */
+  .f-count-7 .f-card {
+    flex: 0 1 calc(33% - 2rem);
+  }
+  .f-count-7 .f-card:last-child {
+    flex: 0 1 calc(33% - 2rem);
+    margin-left: auto;
+    margin-right: auto;
+  }
 
-/* 5 kart → 3 + 2 */
-.f-count-5 .f-card {
-  flex: 0 1 calc(33% - 2rem);
-}
-.f-count-5 .f-card:nth-child(n+4) {
-  flex: 0 1 calc(50% - 2rem);
-  max-width: 420px;
-}
+  /* 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) {
+    flex: 0 1 calc(50% - 2rem);
+    max-width: 420px;
+  }
 
-/* 7 kart → 3 + 3 + 1 (środek) */
-.f-count-7 .f-card {
-  flex: 0 1 calc(33% - 2rem);
-}
-.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 {
-  flex: 0 1 calc(33% - 2rem);
-}
-.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 {
-  flex: 0 1 calc(33% - 2rem);
-  margin-left: auto;
-  margin-right: auto;
+  /* 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;
+  }
 }
diff --git a/src/styles/theme.css b/src/styles/theme.css
index 74ffc2f..d28667f 100644
--- a/src/styles/theme.css
+++ b/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);