Przebudowa strony

src/styles/modal.css

@@ -1,47 +1,189 @@
-/* MODAL — FULLSCREEN OVERLAY */
+/* ===========================
+   MODAL — FULLSCREEN OVERLAY
+   =========================== */
 
 .fuz-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;
+  @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;
 }
 
-/* CLOSE BUTTON */
 .fuz-modal-close {
-    @apply absolute top-4 right-6 text-3xl font-bold cursor-pointer transition-opacity text-[--f-text] opacity-[0.7];
+  @apply absolute top-4 right-6 text-3xl font-bold cursor-pointer transition-opacity;
+  @apply text-[--f-text] opacity-70;
 }
 
 .fuz-modal-close:hover {
-    @apply opacity-100;
+  @apply opacity-100;
 }
 
+/* panel – pełny ekran, ale treść centrowana max-w */
 .fuz-modal-panel {
-    @apply w-full h-full overflow-y-auto px-6 py-8 md:px-12 md:py-12 bg-[--f-background] text-[--f-text];
+  @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 {
+  @apply flex justify-center items-start;
 }
 
 .fuz-modal-inner {
-    @apply max-w-4xl mx-auto;
+  @apply w-full max-w-4xl mx-auto;
 }
 
 .fuz-modal-title {
-    @apply text-4xl font-bold mb-8 text-center text-[--f-text];
+  @apply text-3xl md:text-4xl font-bold mb-8 text-center text-[--f-text];
 }
 
 .fuz-modal-content p {
-    @apply leading-relaxed text-2xl text-center;
+  @apply leading-relaxed text-2xl text-center;
 }
 
 .fuz-modal-content p img {
-    @apply mt-2 leading-relaxed;
+  @apply mt-2;
 }
 
 @keyframes fadeIn {
-    from {
-        opacity: 0;
-    }
+  from {
+    opacity: 0;
+  }
 
-    to {
-        opacity: 2;
-    }
+  to {
+    opacity: 1;
+  }
+}
+
+/* ===========================
+   TELEFON — AKORDEON
+   =========================== */
+
+.fuz-modal-phone-list.fuz-accordion {
+  @apply flex flex-col gap-3;
+}
+
+.fuz-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 */
+}
+
+.fuz-accordion-header {
+  @apply w-full flex items-center justify-between gap-4 px-4 py-3 cursor-pointer;
+  background: rgba(148, 163, 184, 0.06);
+  border: none;
+  outline: none;
+}
+
+.fuz-accordion-header-left {
+  @apply flex items-center gap-2;
+}
+
+.fuz-modal-phone-name {
+  @apply font-medium;
+}
+
+.fuz-modal-phone-price {
+  @apply font-semibold whitespace-nowrap;
+}
+
+.fuz-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 {
+  background: color-mix(in srgb, var(--fuz-accent, #2563eb) 8%, transparent);
+}
+
+/* ===========================
+   DODATKI — KOLUMNOWA LISTA
+   =========================== */
+
+.fuz-addon-list {
+  @apply flex flex-col gap-2;
+}
+
+.fuz-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] */
+  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"] {
+  @apply cursor-pointer;
+}
+
+.fuz-addon-checkbox {
+  @apply flex items-center justify-center;
+}
+
+.fuz-addon-main {
+  @apply flex flex-col gap-0.5;
+}
+
+.fuz-addon-name {
+  @apply font-medium;
+}
+
+.fuz-addon-desc {
+  @apply text-sm opacity-85;
+}
+
+.fuz-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%);
+}
+
+/* ===========================
+   PODSUMOWANIE MIESIĘCZNE
+   =========================== */
+
+.fuz-summary {
+  @apply pt-2;
+}
+
+.fuz-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 {
+  @apply flex items-center justify-between;
+}
+
+.fuz-summary-row span:last-child {
+  @apply font-medium whitespace-nowrap;
+}
+
+.fuz-summary-total {
+  @apply mt-1 pt-2;
+  border-top: 1px solid rgba(148, 163, 184, 0.4);
+}
+
+.fuz-summary-total span:last-child {
+  @apply font-bold;
+  font-size: 1.25rem;
+  color: var(--fuz-accent, #2563eb);
+}
+
+.fuz-modal-section {
+  @apply mb-6;
+}
+
+.fuz-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 {
+  background: rgba(148, 163, 184, 0.03);
 }