  .f-section-acc .f-accordion-header {
    @apply flex items-center justify-between gap-3;
  }

  .f-accordion-header-right {
    @apply flex items-center gap-3;
  }

  .f-acc-chevron {
    @apply opacity-60 text-sm;
  }


  .f-floating-total {
    @apply fixed bottom-5 right-5 z-[10000];
    @apply pointer-events-auto;
    @apply select-none;
    touch-action: none;
  }

  /* kółko */
  .f-floating-total-circle {
    @apply w-24 h-24 md:w-32 md:h-32 rounded-full;
    @apply flex flex-col items-center justify-center text-center;
    @apply shadow-xl;
    @apply bg-[--f-addons-background];
    @apply backdrop-blur-md;
  }

  /* kwota */
  .f-floating-total-amount {
    @apply text-lg md:text-xl font-bold leading-none text-[--f-addons-text];
  }

  /* jednostka */
  .f-floating-total-unit {
    @apply my-1 text-xs md:text-sm opacity-70 text-[--f-addons-text];
  }


  @keyframes fuz-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
  }

  .f-floating-total:hover .f-floating-total-circle {
    animation: fuz-bounce 420ms ease-in-out;
  }

   .f-floating-total:active .f-floating-total-circle {
    transform: translateY(-4px) scale(1.02);
  }

/* 3D */
.f-floating-total-circle {
    @apply relative overflow-hidden;
    @apply shadow-xl;
    @apply bg-[--f-addons-background];
    @apply backdrop-blur-md;

    /* 3D feel */
    box-shadow:
      0 18px 35px hsla(221 47% 11% / 0.28),
      0 6px 14px hsla(221 47% 11% / 0.18),
      inset 0 1px 0 hsla(0 0% 100% / 0.22),
      inset 0 -10px 18px hsla(221 47% 11% / 0.25);

    /* subtelna “kopuła” */
    background-image:
      radial-gradient(120% 120% at 30% 20%, hsla(0 0% 100% / 0.22) 0%, transparent 55%),
      radial-gradient(140% 140% at 70% 80%, hsla(221 47% 11% / 0.22) 0%, transparent 60%);
  }

  /* połysk */
  .f-floating-total-circle::before {
    content: "";
    position: absolute;
    inset: -30% -30% auto -30%;
    height: 70%;
    border-radius: 9999px;
    background: radial-gradient(
      closest-side,
      hsla(0 0% 100% / 0.28),
      transparent 70%
    );
    transform: rotate(-12deg);
    pointer-events: none;
  }

  /* “rim”/krawędź */
  .f-floating-total-circle::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    border: 1px solid hsla(0 0% 100% / 0.16);
    box-shadow: inset 0 0 0 1px hsla(221 47% 11% / 0.18);
    pointer-events: none;
  }

  /* lekka reakcja 3D na hover */
  @media (hover: hover) and (pointer: fine) {
    .f-floating-total:hover .f-floating-total-circle {
      transform: translateY(-2px) scale(1.02);
      box-shadow:
        0 22px 44px hsla(221 47% 11% / 0.32),
        0 8px 18px hsla(221 47% 11% / 0.20),
        inset 0 1px 0 hsla(0 0% 100% / 0.24),
        inset 0 -12px 20px hsla(221 47% 11% / 0.28);
      transition: transform 180ms ease, box-shadow 180ms ease;
    }
  }





  /* ----------- Uporządkować ------ */
  /* ===========================
   TELEFON — AKORDEON
   =========================== */

  .f-modal-phone-list.f-accordion {
    @apply flex flex-col gap-2;
  }

  .f-accordion-item {
    @apply rounded-xl border overflow-hidden bg-[--f-background];
    border-color: rgba(148, 163, 184, 0.6);
  }

  .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;
  }

  .f-accordion-header-left {
    @apply flex items-center gap-1;
  }

  .f-modal-phone-name {
    @apply font-medium ml-2;
  }

  .f-modal-phone-price {
    @apply font-semibold whitespace-nowrap;
  }

  .f-accordion-body {
    @apply px-4 pt-2 pb-3;
    border-top: 1px solid rgba(148, 163, 184, 0.4);
  }

  /* wyróżnienie otwartego pakietu */
  .f-accordion-item.is-open .f-accordion-header {
    background: color-mix(in srgb, var(--fuz-accent, #2563eb) 8%, transparent);
  }

  /* ===========================
   DODATKI — KOLUMNOWA LISTA (GRID)
   checkbox:  checkbox | main | price
   quantity:  slot      | main | qty | price
   =========================== */

  .f-addon-list {
    @apply flex flex-col gap-2;
  }

  /* BAZA: checkbox | main | price */
  .f-addon-item {
    @apply grid items-start gap-3 px-3 py-2;
    border-bottom: 1px solid rgba(148, 163, 184, 0.4);
    /* rounded-xl border cursor-pointer; */
    grid-template-columns: auto 1fr auto;
    /* border-color: rgba(148, 163, 184, 0.5); */
    background: var(--f-background);
    @apply cursor-pointer;
  }

  .f-addon-item * {
    @apply cursor-pointer;
  }

  .f-addon-item:last-child {
    border-bottom: none;
  }

  .f-addon-item:hover {
    /* border-color: color-mix(
    in srgb,
    var(--fuz-accent, #2563eb) 70%,
    rgba(148, 163, 184, 0.5) 30%
  ); */
  }

  .f-addon-item input[type="checkbox"] {
    @apply cursor-pointer;
  }

  /* kolumna 1 */
  .f-addon-checkbox {
    @apply flex items-center justify-center;
    align-items: center;
    margin-top: 0.1rem;
  }

  .f-addon-checkbox input[type="checkbox"] {
    width: 1.05rem;
    height: 1.05rem;
    transform: scale(1.05);
    accent-color: var(--fuz-accent, #2563eb);
    cursor: pointer;
  }

  /* kolumna 2 */
  .f-addon-main {
    @apply flex flex-col gap-0.5;
    min-width: 0;
  }

  .f-addon-name {
    @apply font-medium;
  }

  .f-addon-desc {
    @apply text-sm opacity-85;
  }

  /* kolumna 3 (cena) */
  .f-addon-price {
    @apply font-semibold whitespace-nowrap;
    justify-self: end;
    text-align: right;
    min-width: 140px;
    /* stała kolumna cen */
  }

  /* suma pod ceną (quantity) */
  .f-addon-price-total {
    margin-top: 0.15rem;
    font-size: 0.9em;
    font-weight: 600;
    opacity: 0.85;
    white-space: nowrap;
    color: var(--fuz-accent, #2563eb);
  }

  /* WARIANT: quantity -> slot | main | qty | price */
  .f-addon-item--qty {
    grid-template-columns: auto 1fr auto auto;
    align-items: start;
  }

  /* “pusty” slot w kolumnie 1 (żeby wyrównać do checkboxa) */
  .f-addon-item--qty .f-addon-checkbox {
    visibility: hidden;
    /* zajmuje miejsce, ale nie widać */
    width: 1.05rem;
    height: 1.05rem;
    transform: scale(1.05);
  }

  /* kolumna qty (3) – bliżej prawej */
  .f-addon-item--qty .f-addon-qty {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.05rem;
  }

  /* wartość qty */
  .f-addon-qty-value {
    min-width: 2ch;
    text-align: center;
  }

  /* mobile: w razie ciasnoty przenosimy qty pod main, cena zostaje po prawej */
  @media (max-width: 640px) {
    .f-addon-item--qty {
      grid-template-columns: auto 1fr auto;
      grid-template-areas:
        "slot main price"
        "slot qty  price";
    }

    .f-addon-item--qty .f-addon-checkbox {
      grid-area: slot;
    }

    .f-addon-item--qty .f-addon-main {
      grid-area: main;
    }

    .f-addon-item--qty .f-addon-qty {
      grid-area: qty;
      justify-self: start;
    }

    .f-addon-item--qty .f-addon-price {
      grid-area: price;
    }
  }


  /* ===========================
   PODSUMOWANIE MIESIĘCZNE
   =========================== */

  .f-summary {
    @apply pt-2;
  }

  .f-summary-list {
    @apply flex flex-col gap-1 mt-2 p-4 rounded-xl;
    background: rgba(148, 163, 184, 0.07);
  }

  .f-summary-row,
  .f-summary-total {
    @apply flex items-center justify-between;
  }

  .f-summary-row span:last-child {
    @apply font-medium whitespace-nowrap;
  }

  .f-summary-total {
    @apply mt-1 pt-2;
    border-top: 1px solid rgba(148, 163, 184, 0.4);
  }

  .f-summary-total span:last-child {
    @apply font-bold;
    font-size: 1.25rem;
    color: var(--fuz-accent, #2563eb);
  }

  .f-modal-section {
    @apply mb-6;
  }

  .f-modal-section h3 {
    @apply text-xl md:text-2xl font-semibold mb-3;
  }

  /* opcja "bez telefonu" */
  .f-accordion-item--no-phone .f-accordion-header {
    background: rgba(148, 163, 184, 0.03);
  }

  .f-accordion-header-left input[type="radio"] {
    width: 1.05rem;
    height: 1.05rem;
    transform: scale(1.05);
    accent-color: var(--fuz-accent, #2563eb);
    cursor: pointer;
  }

  .f-addon-checkbox input[type="checkbox"] {
    width: 1.05rem;
    height: 1.05rem;
    transform: scale(1.05);
    accent-color: var(--fuz-accent, #2563eb);
    cursor: pointer;
  }

  .f-accordion-header-left,
  .f-addon-checkbox {
    align-items: center;
  }


  /* ===========================
   FLOATING TOTAL (dymek jak czat)
   =========================== */

  .f-floating-total {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 10000;
    /* wyżej niż overlay (9999) */
    pointer-events: auto;
  }

  .f-floating-total-inner {
    @apply flex items-center gap-3;
    @apply px-4 py-3 rounded-2xl shadow-xl border;
    border-color: rgba(148, 163, 184, 0.5);
    background: color-mix(in srgb, var(--f-background) 92%, transparent);
    backdrop-filter: blur(10px);
  }

  .f-floating-total-label {
    @apply text-sm opacity-80;
  }

  .f-floating-total-value {
    @apply font-bold whitespace-nowrap;
    font-size: 1.1rem;
    color: var(--fuz-accent, #2563eb);
  }

  /* na bardzo małych ekranach lekko mniejszy dymek */
  @media (max-width: 420px) {
    .f-floating-total-inner {
      @apply px-3 py-2;
    }

    .f-floating-total-value {
      font-size: 1rem;
    }
  }

  .f-addon-price-total {
    margin-top: 0.15rem;
    font-size: 0.9em;
    font-weight: 600;
    opacity: 0.85;
    white-space: nowrap;
    color: var(--fuz-accent, #2563eb);
  }




  /* -------------------------- */
  .f-radio-item {
    @apply grid items-start gap-3 px-3 py-2 cursor-pointer;
    grid-template-columns: auto 1fr auto;
    border-bottom: 1px solid rgba(148, 163, 184, 0.4);
    background: var(--f-background);
  }

  .f-radio-item:last-child {
    border-bottom: none;
  }

  .f-radio-check input {
    @apply mt-1;
  }

  .f-radio-name {
    @apply font-medium;
  }

  .f-radio-price {
    @apply whitespace-nowrap font-semibold;
  }

  .f-radio-item.is-selected {
    /* delikatne wyróżnienie wybranego */
    /* @apply rounded-xl; */
    /* background: rgba(148, 163, 184, 0.12); */
  }

  .f-radio-details {
    @apply pl-10 pr-3 pb-3 -mt-1 text-sm;
    /* pl-10 = przesunięcie w prawo (radio + gap) */
  }