.pricing{padding:10px 0 40px;background:#fff}
.p-card{border:1px solid var(--border);border-radius:20px;padding:32px 28px;background:#fff;height:100%;transition:all .3s;position:relative}
.p-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.p-card.featured{border:2px solid var(--accent)}
.p-card.dark{background:linear-gradient(135deg,var(--dark-bg),var(--dark-secondary));border:1px solid rgba(255,255,255,.1);color:var(--txt-light)}
.p-card.dark h4{color:var(--txt-light)}
.p-card.dark .pf{color:var(--txt-muted)}
.p-card.dark .pf i{color:var(--accent)}
.p-card.dark .p-specs{border-color:rgba(255,255,255,.08)}
.p-card.dark .p-spec-row{border-color:rgba(255,255,255,.06);color:var(--txt-muted)}
.p-card.dark .p-spec-row strong{color:var(--txt-light)}
.p-card.dark .p-spec-icon{background:rgba(255,255,255,.06);color:var(--txt-muted)}
.p-card-sub{font-size:.88rem;color:var(--txt-muted);margin-bottom:16px}
.p-card h4{font-size:1.25rem;font-weight:700;margin-bottom:4px}
.p-price{margin-bottom:4px}
.pr{font-family:'Poppins',sans-serif;font-size:2.8rem;font-weight:700;color:var(--txt-dark);line-height:1}
.pr-dec{font-size:1.4rem;vertical-align:top}
.pr-per{font-size:.85rem;color:var(--txt-body);margin-left:4px;font-weight:400}
.pr-note{font-size:.78rem;color:var(--txt-muted);margin-top:2px;margin-bottom:20px}
.pr-note strong{color:var(--txt-body)}
.p-specs{border-top:1px solid var(--border);margin-top:20px;padding-top:16px}
.p-spec-icons{display:flex;gap:10px;margin-bottom:16px}
.p-spec-icon{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:var(--bg-alt);padding:10px 6px;border-radius:8px;font-size:.78rem;font-weight:500;color:var(--txt-body);flex:1;min-width:0;text-align:center;white-space:nowrap}
.p-spec-icon i{color:var(--txt-muted);font-size:.95rem}
.p-spec-icon span{line-height:1.2}
.p-spec-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--border);font-size:.85rem;color:var(--txt-body)}
.p-spec-row:last-child{border-bottom:none}
.p-spec-row strong{font-weight:600;color:var(--txt-dark)}
.pf-list{list-style:none;padding:0;margin:16px 0 0}
.pf{display:flex;align-items:flex-start;gap:10px;padding:5px 0;font-size:.85rem;color:var(--txt-body)}
.pf i{color:var(--accent);font-size:.7rem;flex-shrink:0;margin-top:4px}
.p-trial{font-size:.78rem;color:var(--txt-muted);text-align:center;margin-top:20px;padding-top:16px;border-top:1px solid var(--border);margin-bottom:0}
.p-card.dark .p-trial{border-color:rgba(255,255,255,.08)}
.btn-pr{width:100%;padding:12px;border-radius:10px;font-weight:700;font-size:.9rem;transition:all .3s;text-decoration:none;display:block;text-align:center;background:var(--yellow);color:var(--dark-bg);border:none}
.btn-pr:hover{background:var(--yellow-dark);color:var(--dark-bg);transform:translateY(-2px);box-shadow:0 8px 24px rgba(255,215,60,.3)}
/* Warianty zachowane (ale wszystkie żółte) */
.btn-pr-fill,.btn-pr-out,.btn-pr-dark{background:var(--yellow);color:var(--dark-bg);border:none}
.btn-pr-fill:hover,.btn-pr-out:hover,.btn-pr-dark:hover{background:var(--yellow-dark);color:var(--dark-bg);transform:translateY(-2px)}
.pop-badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;font-size:.7rem;font-weight:700;text-transform:uppercase;padding:5px 18px;border-radius:6px;letter-spacing:.5px;white-space:nowrap}
.premium-badge{font-size:.7rem;font-weight:700;text-transform:uppercase;color:var(--txt-muted);margin-bottom:8px;letter-spacing:.5px}
.premium-badge i{color:#f59e0b}
.cmp-link{text-align:center;margin-top:32px;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.cmp-link a{color:var(--accent);font-weight:600;font-size:.95rem;text-decoration:none;transition:color .2s}
.cmp-link a:hover{color:var(--accent-dark)}
.cmp-link-sep{color:var(--txt-muted);font-size:.95rem}

/* ── STORAGE SUB-ROW ─────────────────────────────────────────── */
.p-spec-row--has-sub{flex-wrap:wrap;align-items:baseline}
.p-spec-sub{width:100%;font-size:.73rem;color:var(--txt-muted);padding:2px 0 4px;margin-top:0}
.p-spec-sub--dark{color:rgba(255,255,255,.35)}
.storage-info{position:relative;display:inline-flex;align-items:center;cursor:pointer;color:var(--accent);vertical-align:middle}
.storage-info i{font-size:.65rem;color:var(--accent);transition:color .2s}
.storage-info:hover i,.storage-info:focus i{color:var(--accent)}
.storage-tooltip{display:none;position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);width:200px;background:var(--dark-bg);color:var(--txt-light);font-size:.76rem;font-weight:400;line-height:1.6;padding:11px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.1);z-index:200;pointer-events:none;text-align:left;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.storage-tooltip::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--dark-bg)}
.storage-info:hover .storage-tooltip,.storage-info:focus .storage-tooltip{display:block}

/* ── VISITS INFO TOOLTIP ──────────────────────────────────────── */
.visits-info{position:relative;display:inline-flex;align-items:center;cursor:pointer;color:var(--accent);vertical-align:middle}
.visits-info i{font-size:.65rem;color:var(--accent);transition:color .2s}
.visits-info:hover i,.visits-info:focus i{color:var(--accent)}
.visits-tooltip{display:none;position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);width:260px;background:var(--dark-bg);color:var(--txt-light);font-size:.76rem;font-weight:400;line-height:1.55;padding:11px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.1);z-index:200;pointer-events:none;text-align:left;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.visits-tooltip strong{color:#fff;font-weight:700}
.visits-tooltip::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--dark-bg)}
.visits-info:hover .visits-tooltip,.visits-info:focus .visits-tooltip{display:block}

@media(max-width:768px){.pr{font-size:2.2rem}}

/* Workers PHP tooltip (pozycjonowany nad ikoną info w liście features) */
.workers-info{position:relative;display:inline;cursor:pointer;color:var(--accent);margin-left:3px}
.workers-info i{font-size:.72rem;color:var(--accent);vertical-align:1px;transition:color .2s}
.workers-info:hover i,.workers-info:focus i{color:var(--accent)}
.workers-tooltip{display:none;position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);width:280px;background:var(--dark-bg);color:var(--txt-light);font-size:.76rem;font-weight:400;line-height:1.55;padding:11px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.1);z-index:200;pointer-events:none;text-align:left;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.workers-tooltip::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--dark-bg)}
.workers-tooltip strong{color:#fff;font-weight:700}
.workers-info:hover .workers-tooltip,.workers-info:focus .workers-tooltip{display:block}
/* Tooltip w dark cards — użyj jasnego tła */
.p-card.dark .workers-info i{color:rgba(255,255,255,.45)}
.p-card.dark .workers-info:hover i{color:var(--yellow)}

/* Fix: przy hoverze na tooltip — karta wybija się ponad inne (żeby tooltip nie był przycięty) */
.p-card:has(.workers-info:hover),
.p-card:has(.workers-info:focus-within),
.p-card:has(.visits-info:hover),
.p-card:has(.visits-info:focus-within),
.p-card:has(.storage-info:hover),
.p-card:has(.storage-info:focus-within){
  z-index:100;
}
.workers-tooltip,.visits-tooltip,.storage-tooltip{z-index:1000}

/* Mobile + tablet (≤991px): horyzontalny scroll kart, 1.5 karty widoczne */
@media (max-width: 991px){
  .pricing .row.g-4{
    display:flex;
    flex-wrap:nowrap;
    gap:16px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-padding-left:16px;
    --bs-gutter-x:0;
    --bs-gutter-y:0;
    /* Pełna szerokość viewportu, żeby pierwsza karta dotykała lewej krawędzi */
    width:100vw;
    margin-left:calc(50% - 50vw);
    padding:24px 16px 20px;
    -webkit-overflow-scrolling:touch;
  }
  .pricing .row.g-4 > [class*="col-"]{
    flex:0 0 62%;
    min-width:240px;
    max-width:300px;
    padding:0;
    scroll-snap-align:start;
  }
  /* Estetyczny scrollbar */
  .pricing .row.g-4::-webkit-scrollbar{height:4px}
  .pricing .row.g-4::-webkit-scrollbar-track{background:transparent}
  .pricing .row.g-4::-webkit-scrollbar-thumb{background:rgba(15,23,42,.12);border-radius:2px}
}