/* ===========================================================================
   PLANY (etap A, makieta v78 „Pro Plany”): porównanie Pro i Pro+ — część
   `firma/czesci/plany.blade.php`. Używają jej trzy ekrany: zakładka Firma („Plan”),
   pierwszy krok kreatora i publiczne „Konto firmowe” (`/dla-firm`, makieta v82).
   Wydzielone z `s-firma.css` 11.10, żeby strona publiczna nie ciągnęła arkusza panelu firmy.
   Wartości 1:1 z makiety.
   =========================================================================== */
/* Zakładka Firma: pełna szerokość treści jak inne zakładki (11.10); 1040 px z makiety tylko w kreatorze. */
.fplany { display: flex; flex-direction: column; gap: 24px; width: 100%; } /* makieta */
.fplany--srodek { margin: 0 auto; max-width: 1040px; } /* makieta */
.fplany__glowa { display: flex; flex-direction: column; gap: 8px; }
.fplany__h1 { margin: 0; font: 600 34px/1.1 var(--v-font-display); letter-spacing: -.025em; color: var(--v-primary); } /* makieta */
.fplany__lead { margin: 0; max-width: 640px; font-size: 15px; line-height: 1.55; color: var(--v-n-700); text-wrap: pretty; } /* makieta */

.fplany__stan { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 14px 18px; border-radius: 14px; background: var(--v-success-soft); color: var(--v-success-text); } /* makieta */
.fplany__pigulka { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 7px; background: var(--v-primary); color: var(--v-n-0); font-size: 11.5px; font-weight: 700; } /* makieta */
.fplany__stan-tekst { font-size: 14px; font-weight: 600; line-height: 1.45; }
.fplany__gotowe { display: flex; gap: 10px; padding: 14px 18px; border-radius: 14px; background: var(--v-success-soft); color: var(--v-success-text); font-size: 14px; font-weight: 600; line-height: 1.5; } /* makieta */
.fplany__gotowe-znak { font-weight: 800; }

.fplany__plany { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; } /* makieta */
.fplany__plan { display: flex; flex-direction: column; gap: 16px; padding: 28px; border-radius: 20px; border: 1px solid var(--v-n-100); background: var(--v-n-0); } /* makieta */
.fplany__plan--twoj { border: 2px solid var(--v-primary); }
.fplany__plan-glowa { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.fplany__plan-nazwa { display: flex; align-items: center; gap: 10px; }
.fplany__nazwa { font: 600 28px var(--v-font-display); letter-spacing: -.02em; color: var(--v-primary); } /* makieta */
.fplany__firma { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 7px; background: var(--v-n-100); color: var(--v-primary); font-size: 11.5px; font-weight: 700; } /* makieta */
.fplany__twoj { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 7px; background: var(--v-success-soft); color: var(--v-success-text); font-size: 12px; font-weight: 800; } /* makieta */
.fplany__kto { font-size: 14px; line-height: 1.5; color: var(--v-n-700); text-wrap: pretty; }
.fplany__cena { display: flex; flex-direction: column; gap: 4px; }
.fplany__cena-rzad { display: flex; align-items: baseline; gap: 4px; }
.fplany__kwota { font: 600 40px/1 var(--v-font-display); letter-spacing: -.03em; color: var(--v-primary); } /* makieta */
.fplany__okres { font-size: 15px; color: var(--v-n-600); }
.fplany__cena-nota { font-size: 13px; font-weight: 700; color: var(--v-success-text); }
.fplany__roznice { display: flex; flex-direction: column; border-top: 1px solid #F0F3F7; } /* makieta, TODO token */
.fplany__roznica { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 11px 0; border-bottom: 1px solid #F0F3F7; } /* makieta, TODO token */
.fplany__roznica-nazwa { font-size: 14px; color: var(--v-n-700); }
.fplany__roznica-wartosc { font-size: 14.5px; font-weight: 700; color: var(--v-primary); text-align: right; white-space: nowrap; }
.fplany__roznica-wartosc--brak { color: var(--v-n-500); }
/* Interlinia jak w makiecie (v78, v82: wiersz 42 px, nota pod ceną bez dziedziczonych 24 px). */
.fplany__roznica, .fplany__cena-rzad, .fplany__cena-nota { line-height: normal; }
.fplany__akcje { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.fplany__form { display: flex; flex-direction: column; gap: 10px; } /* ptaszek regulaminu nad przyciskiem (regulamin 1.1) */
.v-btn.fplany__przycisk { height: 52px; border-radius: 12px; font-size: 15px; font-weight: 700; } /* makieta */
.v-btn--secondary.fplany__przycisk { border: 1.5px solid var(--v-primary); }
.fplany__nota { font-size: 12.5px; line-height: 1.5; color: var(--v-n-600); text-wrap: pretty; }

.fplany__wspolne { display: flex; flex-direction: column; gap: 16px; padding: 28px; border-radius: 20px; border: 1px solid var(--v-n-100); background: var(--v-n-0); } /* makieta */
.fplany__h2 { margin: 0; font: 600 21px var(--v-font-display); letter-spacing: -.02em; color: var(--v-primary); } /* makieta */
.fplany__siatka { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 24px; } /* makieta */
.fplany__cecha { display: flex; align-items: flex-start; gap: 10px; }
.fplany__ptaszek { flex-shrink: 0; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--v-success-soft); color: var(--v-success-text); font-size: 12px; font-weight: 800; } /* makieta */
.fplany__cecha-tekst { display: flex; flex-direction: column; gap: 2px; }
.fplany__cecha-tytul { font-size: 14.5px; font-weight: 700; color: var(--v-primary); }
.fplany__cecha-opis { font-size: 13px; line-height: 1.45; color: var(--v-n-600); text-wrap: pretty; }
.fplany__notka { padding: 14px 16px; border-radius: 14px; border: 1px solid var(--v-n-100); background: var(--v-n-0); font-size: 14px; line-height: 1.5; color: var(--v-n-700); } /* makieta */

@media (max-width: 759px) {
  .fplany { gap: 16px; }
  .fplany__h1 { font-size: 26px; } /* makieta */
  .fplany__plany, .fplany__siatka { grid-template-columns: minmax(0, 1fr); }
  .fplany__plan, .fplany__wspolne { padding: 20px; } /* makieta */
}