/*
 * Loyalty Club — arkusz panelu klienta
 *
 * Plik powstal z blokow <style>, ktore wczesniej siedzialy w szablonach.
 * Wczytywany w naglowku strony, wiec wyglad jest gotowy od pierwszej
 * klatki — inline w tresci strony trafialby do stopki i dawal mignięcie.
 * Kolejnosc regul zachowana wzgledem zrodel.
 */

/* ── public/templates/my-account/club.php : 486 ── */
.zpc { max-width: var(--zpp-szer-panel, 1440px); margin: 0 auto; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }

/* Hero */
.zpc-hero {
    text-align: center;
    padding: 48px 32px;
    background: var(--zpp-surface);
    border-radius: var(--zpp-r-lg);
    border: 1px solid var(--zpp-line);
    box-shadow: var(--zpp-sh);
    margin-bottom: 32px;
}
.zpc-hero-icon { font-size: 56px; margin-bottom: 16px; }
.zpc-hero h1 { font-size: 32px; font-weight: 700; margin: 0 0 12px; color: #111; }
.zpc-hero-desc { font-size: 16px; color: #666; max-width: 500px; margin: 0 auto; line-height: 1.6; }

/* Section */
.zpc-section { margin-bottom: 40px; }
.zpc-section h2 { font-size: 22px; font-weight: 600; margin: 0 0 20px; color: #111; }

/* How it works */
.zpc-steps { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; justify-content: center; }
.zpc-step {
    flex: 1;
    min-width: 200px;
    max-width: 250px;
    background: var(--zpp-surface);
    border-radius: var(--zpp-r-lg);
    padding: 28px 20px;
    text-align: center;
    box-shadow: var(--zpp-sh);
    position: relative;
}
.zpc-step-num {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 28px;
    background: #6366f1;
    color: var(--zpp-on-accent);
    border-radius: 50%;
    font-size: 14px;
    font-weight: 700;
    line-height: 28px;
}
.zpc-step-icon { font-size: 40px; margin-bottom: 12px; }
.zpc-step h3 { font-size: 16px; font-weight: 600; margin: 0 0 8px; color: #111; }
.zpc-step p { font-size: 13px; color: #666; line-height: 1.5; margin: 0; }
.zpc-step-arrow { font-size: 24px; color: #ddd; padding-top: 60px; }

/* Benefits grid */
.zpc-benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;
}
.zpc-benefit {
    background: var(--zpp-surface);
    border-radius: var(--zpp-r);
    padding: 24px;
    box-shadow: var(--zpp-sh-sm);
    border: 1px solid #f0f0f0;
    transition: all 0.3s;
}
.zpc-benefit:hover { transform: translateY(-4px); box-shadow: var(--zpp-sh); }
.zpc-benefit-icon { font-size: 32px; margin-bottom: 12px; }
.zpc-benefit h4 { font-size: 15px; font-weight: 600; margin: 0 0 8px; color: #111; }
.zpc-benefit p { font-size: 13px; color: #666; line-height: 1.5; margin: 0; }

/* Current tier */
.zpc-current-card {
    background: var(--zpp-surface);
    border-radius: var(--zpp-r-lg);
    padding: 32px;
    box-shadow: var(--zpp-sh);
    border-left: 6px solid var(--tier-color);
}
.zpc-current-badge { display: flex; align-items: center; gap: 20px; margin-bottom: 24px; }
.zpc-current-icon {
    font-size: 48px;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    border-radius: var(--zpp-r-lg);
}
.zpc-current-label { font-size: 13px; color: #888; display: block; margin-bottom: 4px; }
.zpc-current-info h3 { font-size: 28px; font-weight: 700; color: #111; margin: 0; }
.zpc-current-perks { display: flex; gap: 32px; margin-bottom: 24px; }
.zpc-current-perk { text-align: center; }
.zpc-perk-value { display: block; font-size: 32px; font-weight: 700; color: #6366f1; }
.zpc-perk-label { font-size: 12px; color: #888; text-transform: uppercase; letter-spacing: 0.5px; }
.zpc-current-benefits h4 { font-size: 14px; font-weight: 600; margin: 0 0 12px; color: var(--zpp-ink); }
.zpc-current-benefits ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.zpc-current-benefits li { font-size: 13px; color: #555; display: flex; align-items: center; gap: 8px; }
.zpc-check { color: var(--zpp-ok); font-weight: bold; }

/* Tiers grid */
.zpc-tiers-intro { color: #666; margin-bottom: 24px; }
.zpc-tiers-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; }
.zpc-tier-card {
    background: var(--zpp-surface);
    border-radius: var(--zpp-r);
    overflow: hidden;
    box-shadow: var(--zpp-sh-sm);
    border: 1px solid var(--zpp-line);
    position: relative;
    transition: all 0.3s;
}
.zpc-tier-card:hover { transform: translateY(-4px); box-shadow: var(--zpp-sh); }
.zpc-tier-current { border: 2px solid #6366f1; }
.zpc-tier-premium { background: #faf5ff; }
.zpc-tier-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: #6366f1;
    color: var(--zpp-on-accent);
    font-size: 9px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: var(--zpp-r-xs);
    z-index: 2;
}
.zpc-tier-header {
    padding: 24px 20px;
    text-align: center;
    background: var(--zpp-sunk);
    border-bottom: 1px solid var(--zpp-line);
}
.zpc-tier-icon { font-size: 32px; display: block; margin-bottom: 8px; }
.zpc-tier-header h3 { font-size: 18px; font-weight: 600; margin: 0; color: #111; }
.zpc-tier-body { padding: 20px; }
.zpc-tier-req { text-align: center; margin-bottom: 16px; }
.zpc-tier-price, .zpc-tier-points { font-size: 28px; font-weight: 700; color: #111; }
.zpc-tier-period, .zpc-tier-points-label { font-size: 13px; color: #888; }
.zpc-tier-stats { display: flex; justify-content: center; gap: 24px; margin-bottom: 16px; }
.zpc-tier-stat { text-align: center; }
.zpc-tier-stat strong { display: block; font-size: 20px; color: #6366f1; }
.zpc-tier-stat span { font-size: 11px; color: #888; text-transform: uppercase; }
.zpc-tier-benefits { list-style: none; padding: 0; margin: 0 0 16px; }
.zpc-tier-benefits li { font-size: 12px; color: #555; padding: 4px 0; border-bottom: 1px solid #f0f0f0; }
.zpc-tier-benefits li:last-child { border: none; }
.zpc-tier-btn {
    display: block;
    background: var(--zpp-surface);
    color: #6366f1 !important;
    text-align: center;
    padding: 12px;
    border-radius: var(--zpp-r-sm);
    border: 2px solid #6366f1;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s;
}
.zpc-tier-btn:hover { background: #6366f1; color: var(--zpp-on-accent) !important; }

/* Stats */
.zpc-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.zpc-stat-card {
    background: linear-gradient(135deg, var(--zpp-sunk), #f1f5f9);
    border-radius: var(--zpp-r);
    padding: 24px;
    text-align: center;
}
.zpc-stat-icon { font-size: 28px; display: block; margin-bottom: 8px; }
.zpc-stat-value { display: block; font-size: 36px; font-weight: 700; color: #111; }
.zpc-stat-label { font-size: 13px; color: #666; }

/* Member Card Section */
.zpc-card-section { }
.zpc-card-intro { color: #666; margin-bottom: 24px; }
.zpc-card-wrapper { display: flex; flex-direction: column; align-items: center; gap: 24px; }

/* Member Card */
.zpc-member-card {
    width: 450px;
    max-width: 100%;
    /* Proporcje karty płatniczej (85,6 × 54 mm), nie sztywna wysokość.
       min-height: 280px trzymało wysokość nawet wtedy, gdy karta zwężała
       się na telefonie — i wyglądała jak kwadrat. Ta sama reguła sięgała
       też karty na pulpicie, która ma inną szerokość.

       Proporcja obowiązuje tam, gdzie treść się w niej mieści — czyli od
       tabletu w górę. Na telefonie zdejmujemy ją w zapytaniu medialnym,
       bo aspect-ratio wylicza wysokość z szerokości i już jej nie oddaje:
       karta zostawała przy 200 px, a nazwisko i stopka ginęły pod
       overflow:hidden. */
    aspect-ratio: 1.6 / 1;
    border-radius: 24px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--zpp-sh-lg);
    background: linear-gradient(135deg, var(--card-color, #6366f1) 0%, #1e1b4b 100%);
    color: var(--zpp-on-accent);
}
.zpc-card-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
.zpc-card-circle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
}
.zpc-card-circle-1 {
    width: 250px;
    height: 250px;
    top: -80px;
    right: -80px;
}
.zpc-card-circle-2 {
    width: 180px;
    height: 180px;
    bottom: -60px;
    left: -60px;
    background: rgba(255,255,255,0.05);
}
.zpc-card-content {
    position: relative;
    z-index: 1;
    padding: 24px;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}
.zpc-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}
.zpc-card-logo img {
    height: 36px;
    filter: brightness(0) invert(1);
}
.zpc-card-logo-icon {
    font-size: 32px;
}
.zpc-card-club-name {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.zpc-card-main {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.zpc-card-name {
    font-size: 22px;
    font-weight: 600;
}
.zpc-card-number {
    font-size: 12px;
    opacity: 0.7;
    margin-top: 4px;
    font-family: monospace;
}
.zpc-card-tier-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 24px;
    font-size: 14px;
    font-weight: 600;
    box-shadow: var(--zpp-sh-sm);
}
.zpc-card-tier-icon {
    font-size: 20px;
}
.zpc-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: auto;
}
.zpc-card-stats {
    display: flex;
    gap: 24px;
}
.zpc-card-stat {
    text-align: center;
}
.zpc-card-stat-value {
    display: block;
    font-size: 20px;
    font-weight: 700;
}
.zpc-card-stat-label {
    font-size: 10px;
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Panel z kodem pod kartą — własne miejsce, żeby kod mógł być duży. */
.zpc-karta-kod {
    width: 450px;
    max-width: 100%;
    background: var(--zpp-surface, #fff);
    border: 1px solid var(--zpp-line, #e5e7eb);
    border-radius: 16px;
    padding: 18px;
    text-align: center;
    box-shadow: var(--zpp-sh);
}
.zpc-karta-kod .zpc-card-barcode {
    display: inline-block;
    box-shadow: none;
    padding: 0;
}
.zpc-karta-kod .zpc-card-barcode svg {
    max-width: 100%;
    height: auto;
}
.zpc-kod-podpis {
    margin: 12px 0 0;
    font-size: 13px;
    color: var(--zpp-ink-3, #6b7280);
}

/* Barcode - powiększony dla skanerów POS (scale 3, height 75, szeroki quiet zone) */
.zpc-card-barcode {
    background: #fff;
    padding: 14px 22px 10px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    text-align: center;
    /* Karta staje się wyższa jeśli footer musi zawinąć - to OK, min-height na karcie */
}
.zpc-card-barcode img {
    display: block;
    height: 75px;
    width: auto;
    min-width: 240px;
    /* Usunięto max-width: 180 - ograniczało kod i utrudniało skanowanie.
       Natywna szerokość SVG dla 10-cyfrowego kodu przy scale=3 to ~330px */
    max-width: 100%;
    image-rendering: pixelated; /* ostre krawędzie pasków - lepiej dla skanerów */
    image-rendering: crisp-edges;
}
.zpc-barcode-number {
    display: block;
    font-size: 12px;
    color: #111;
    font-family: 'SF Mono', Monaco, 'Courier New', monospace;
    letter-spacing: 2px;
    margin-top: 6px;
    font-weight: 600;
}

/* Card Animals */
.zpc-card-animals {
    display: flex;
    gap: 8px;
    margin: 12px 0;
    align-items: center;
}
.zpc-card-animal {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    overflow: hidden;
    border: 2px solid rgba(255,255,255,0.3);
}
.zpc-card-animal img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.zpc-card-animal-more {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
}

/* Minimal Card Style */
.zpc-card-minimal {
    background: var(--zpp-surface) !important;
    color: var(--zpp-ink) !important;
}
.zpc-card-minimal .zpc-card-logo img {
    filter: none;
}
.zpc-card-minimal .zpc-card-animal {
    background: var(--zpp-sunk-2);
    border-color: var(--zpp-line);
}
.zpc-card-minimal .zpc-card-animal-more {
    background: #e5e7eb;
    color: var(--zpp-ink-3);
}

/* Card Actions */
.zpc-card-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}
.zpc-btn {
    padding: 12px 24px;
    border-radius: var(--zpp-r-sm);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.3s;
}
.zpc-btn-primary {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: var(--zpp-on-accent);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}
.zpc-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.5);
}
.zpc-btn-secondary {
    background: var(--zpp-surface);
    color: #6366f1;
    border: 2px solid #6366f1;
}
.zpc-btn-secondary:hover {
    background: #f5f3ff;
}

/* Card Info */
.zpc-card-info {
    background: var(--zpp-sunk);
    border-radius: var(--zpp-r);
    padding: 24px;
    margin-top: 24px;
    border: 1px solid var(--zpp-line);
}
.zpc-card-info h4 {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 16px;
    color: #111;
}
.zpc-card-info ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.zpc-card-info li {
    padding: 10px 0;
    border-bottom: 1px solid var(--zpp-line);
    font-size: 14px;
    color: #555;
    line-height: 1.5;
}
.zpc-card-info li:last-child {
    border-bottom: none;
}
.zpc-card-info li strong {
    color: #111;
}

/* FAQ */
.zpc-faq-list { display: flex; flex-direction: column; gap: 12px; }
.zpc-faq-item {
    background: var(--zpp-surface);
    border-radius: var(--zpp-r-sm);
    border: 1px solid var(--zpp-line);
    overflow: hidden;
}
.zpc-faq-item summary {
    padding: 16px 20px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.zpc-faq-item summary::-webkit-details-marker { display: none; }
.zpc-faq-item summary::after { content: '+'; font-size: 20px; color: #888; }
.zpc-faq-item[open] summary::after { content: '−'; }
.zpc-faq-item p { padding: 0 20px 16px; margin: 0; font-size: 13px; color: #666; line-height: 1.6; }

/* Responsive */
@media (max-width: 768px) {
    .zpc-hero { padding: 32px 20px; }
    .zpc-hero h1 { font-size: 24px; }
    .zpc-steps { flex-direction: column; align-items: center; }
    .zpc-step-arrow { display: none; }
    .zpc-current-badge { flex-direction: column; text-align: center; }
    .zpc-current-perks { justify-content: center; }
    .zpc-current-benefits ul { grid-template-columns: 1fr; }
    .zpc-tier-stats { gap: 16px; }
    
    /* Card responsive. Na telefonie karta ma tyle wysokości, ile trzeba na
       treść — nic nie jest przycięte. Sztywne min-height:260px zniknęło,
       bo to ono robiło z niej kwadrat także wtedy, gdy treści było mniej. */
    .zpc-member-card {
        width: 100%;
        aspect-ratio: auto;
    }
    .zpc-card-content { padding: 20px; }
    .zpc-card-main { flex-direction: column; align-items: flex-start; gap: 16px; }
    .zpc-card-tier-badge { align-self: flex-start; }
    .zpc-card-footer { flex-direction: column; align-items: stretch; gap: 16px; }
    .zpc-card-barcode { align-self: center; }
    .zpc-card-stats { gap: 16px; justify-content: center; }
    .zpc-card-stat-value { font-size: 16px; }
    .zpc-card-actions { flex-direction: column; width: 100%; }
    .zpc-btn { width: 100%; text-align: center; }
}

/* ── public/templates/my-account/club.php : 1012 ── */
' +
        '* { margin: 0; padding: 0; box-sizing: border-box; }' +
        'body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; padding: 40px; background: var(--zpp-sunk-2); display: flex; justify-content: center; align-items: center; min-height: 100vh; }' +
        '.card { width: 450px; height: 280px; border-radius: var(--zpp-r-lg); position: relative; overflow: hidden; color: var(--zpp-on-accent); box-shadow: var(--zpp-sh-lg); }' +
        '.card-bg { position: absolute; inset: 0; background: linear-gradient(135deg, ' + data.primaryColor + ' 0%, #1e1b4b 100%); }' +
        '.circle { position: absolute; border-radius: 50%; background: rgba(255,255,255,0.1); }' +
        '.circle-1 { width: 200px; height: 200px; top: -50px; right: -50px; }' +
        '.circle-2 { width: 150px; height: 150px; bottom: -30px; left: -30px; }' +
        '.content { position: relative; z-index: 1; padding: 24px; height: 100%; display: flex; flex-direction: column; }' +
        '.header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }' +
        '.club-name { font-size: 18px; font-weight: 700; }' +
        '.main { flex: 1; display: flex; justify-content: space-between; align-items: center; }' +
        '.user-name { font-size: 24px; font-weight: 600; }' +
        '.card-num { font-size: 12px; opacity: 0.8; margin-top: 4px; }' +
        '.tier { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--zpp-r-lg); font-size: 14px; font-weight: 600; background: ' + data.tierColor + '; }' +
        '.footer { display: flex; justify-content: space-between; align-items: flex-end; }' +
        '.stats { display: flex; gap: 28px; }' +
        '.stat { text-align: center; }' +
        '.stat-value { display: block; font-size: 20px; font-weight: 700; }' +
        '.stat-label { font-size: 10px; opacity: 0.8; text-transform: uppercase; letter-spacing: 0.5px; }' +
        '.barcode { background: #fff; padding: 14px 18px 10px; border-radius: 12px; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }' +
        '.barcode img { height: 55px; width: auto; min-width: 150px; display: block; margin-bottom: 6px; }' +
        '.barcode-num { font-size: 11px; color: #333; font-family: monospace; letter-spacing: 2px; font-weight: 500; }' +
        '@media print { body { padding: 20px; background: #fff; } .card { box-shadow: none; border: 1px solid #ddd; } }' +
        '

/* ── public/templates/my-account/coupons.php : 176 ── */
.zoopet-coupons-page {
    max-width: 1000px;
}

.zoopet-page-desc {
    color: #64748b;
    margin-top: 5px;
}

.zoopet-coupons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.zoopet-coupon-card {
    background: var(--zpp-surface);
    border-radius: var(--zpp-r-sm);
    box-shadow: var(--zpp-sh-sm);
    overflow: hidden;
    border: 1px solid #e2e8f0;
    transition: box-shadow 0.3s, transform 0.3s;
}

.zoopet-coupon-card:hover {
    box-shadow: var(--zpp-sh);
    transform: translateY(-2px);
}

.zoopet-coupon-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background: var(--zpp-sunk);
    border-bottom: 1px dashed #e2e8f0;
}

.zoopet-coupon-category {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--zpp-r-lg);
    color: var(--zpp-on-accent);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.zoopet-coupon-value {
    font-size: 20px;
    color: var(--zpp-ok);
}

.zoopet-coupon-body {
    padding: 15px;
}

.zoopet-coupon-code {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.zoopet-coupon-code code {
    flex: 1;
    background: #f1f5f9;
    padding: 12px 15px;
    border-radius: var(--zpp-r-xs);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #1e293b;
    border: 2px dashed #cbd5e1;
}

.zoopet-copy-btn {
    background: var(--zoopet-primary, #6366f1);
    border: none;
    width: 44px;
    height: 44px;
    border-radius: var(--zpp-r-xs);
    cursor: pointer;
    font-size: 18px;
    transition: background 0.3s, transform 0.2s;
}

.zoopet-copy-btn:hover {
    transform: scale(1.05);
}

.zoopet-copy-btn.copied {
    background: #10b981;
}

.zoopet-coupon-desc {
    color: #64748b;
    font-size: 13px;
    margin: 10px 0 0 0;
}

.zoopet-coupon-conditions {
    margin-top: 10px;
}

.zoopet-condition {
    display: inline-block;
    background: var(--zpp-warn-bg);
    color: var(--zpp-warn-ink);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
}

.zoopet-coupon-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background: var(--zpp-sunk);
    border-top: 1px solid #e2e8f0;
}

.zoopet-coupon-expiry {
    font-size: 12px;
    color: #64748b;
}

.zoopet-expiry-soon {
    color: #f59e0b;
    font-weight: 600;
}

.zoopet-expiry-unlimited {
    color: var(--zpp-ok);
}

.zoopet-use-coupon-btn {
    background: var(--zoopet-primary, #6366f1);
    color: var(--zpp-on-accent);
    padding: 8px 16px;
    border-radius: var(--zpp-r-xs);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: background 0.3s;
}

.zoopet-use-coupon-btn:hover {
    color: var(--zpp-on-accent);
    opacity: 0.9;
}

.zoopet-coupons-help {
    margin-top: 40px;
    padding: 20px;
    background: var(--zpp-info-bg);
    border-radius: var(--zpp-r-sm);
    border-left: 4px solid #0ea5e9;
}

.zoopet-coupons-help h4 {
    margin: 0 0 15px 0;
    color: var(--zpp-info);
}

.zoopet-coupons-help ol {
    margin: 0;
    padding-left: 20px;
    color: var(--zpp-info);
}

.zoopet-coupons-help li {
    margin: 8px 0;
}

@media (max-width: 600px) {
    .zoopet-coupons-grid {
        grid-template-columns: 1fr;
    }
}

/* ── public/templates/my-account/full-screen.php : 30 ── */
/* Szkielet pełnego ekranu. Nie zależy od żadnej klasy motywu,
           bo motyw nie renderuje tej strony. */
        html, body.zoopet-fs {
            margin: 0; padding: 0; height: 100%;
            background: var(--zpp-sunk, #f4f6f9);
            font-family: var(--zpp-font, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
        }
        body.zoopet-fs.admin-bar { padding-top: 32px; }
        @media screen and (max-width: 782px) {
            body.zoopet-fs.admin-bar { padding-top: 46px; }
        }

        /* Wysokosc okna, nie minimalna: dzieki temu .zfs-nav i
           .zfs-main przewijaja sie same, a menu boczne zostaje na
           ekranie. Przy min-height rosl caly szkielet i przewijac
           musiala sie strona, ktora w tym ukladzie ma zablokowane
           przewijanie. */
        .zfs { display: flex; height: 100vh; align-items: stretch; }
        body.zoopet-fs.admin-bar .zfs { height: calc(100vh - 32px); }

        .zfs-side {
            flex: 0 0 260px; width: 260px;
            background: var(--zpp-surface, #fff);
            border-right: 1px solid var(--zpp-line, #e5e7eb);
            display: flex; flex-direction: column;
        }
        /* Nagłówek menu na białym, nie w kolorze marki.
           Wcześniej brał tło z żetonu karty — ciemnego gradientu albo
           koloru akcentu. Przy jaskrawym akcencie nazwa klubu ginęła, a
           logo sklepu (zwykle z białym tłem albo ciemnym rysunkiem)
           kłóciło się z tym kolorem. Biel jest neutralna dla każdego
           logo i każdego motywu panelu. */
        .zfs-brand {
            padding: 20px 18px;
            background: var(--zpp-surface, #fff);
            color: var(--zpp-ink, #111827);
            border-bottom: 1px solid var(--zpp-line, #e5e7eb);
        }
        .zfs-brand * { color: inherit !important; }
        .zfs-brand b {
            display: block; font-family: var(--zpp-font-display, inherit);
            font-weight: var(--zpp-weight-display, 700);
            letter-spacing: var(--zpp-tracking, -.02em);
            font-size: 17px;
        }
        .zfs-brand img { max-width: 130px; height: auto; display: block; margin-bottom: 10px; }

        /* Menu ma sie przewijac, a nie obcinac.
           Lista dostawala z innego arkusza overflow:hidden i sztywna
           wysokosc rowna wysokosci ramki, wiec przy dluzszym menu ostatnie
           pozycje — z „Wyloguj sie" wlacznie — po prostu znikaly. Paska
           przewijania nie bylo, bo obcinala LISTA, a nie ramka.
           min-height:0 jest tu konieczne: bez niego element siatki flex
           nie zejdzie ponizej wysokosci swojej zawartosci i nie przewinie. */
        .zfs-nav { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; min-height: 0; }
        .zfs .woocommerce-MyAccount-navigation,
        .zfs .woocommerce-MyAccount-navigation ul {
            height: auto !important;
            max-height: none !important;
            overflow: visible !important;
        }
        .zfs-main { flex: 1 1 auto; min-width: 0; overflow-y: auto; padding: 28px 32px; }

        .zfs-back {
            display: flex; align-items: center; gap: 8px;
            padding: 14px 18px;
            font-size: 14px; font-weight: 600; text-decoration: none;
            color: var(--zpp-ink-2, #374151);
            border-bottom: 1px solid var(--zpp-line-2, #f3f4f6);
        }
        .zfs-back:hover { color: var(--zoopet-accent, #6366f1); }

        /* Menu WooCommerce w naszym szkielecie */
        .zfs .woocommerce-MyAccount-navigation { width: auto; float: none; margin: 0; }
        .zfs .woocommerce-MyAccount-navigation ul { margin: 0; padding: 0; list-style: none; border: 0; }
        .zfs .woocommerce-MyAccount-navigation li { margin: 0; border-bottom: 1px solid var(--zpp-line-2, #f3f4f6); }
        .zfs .woocommerce-MyAccount-navigation li a {
            display: block; padding: 13px 18px;
            color: var(--zpp-ink-2, #374151); text-decoration: none; font-size: 14px;
        }
        .zfs .woocommerce-MyAccount-navigation li.is-active { background: var(--zpp-nav-active, rgba(0,0,0,.04)); }
        .zfs .woocommerce-MyAccount-navigation li.is-active a { color: var(--zpp-nav-active-ink, inherit); font-weight: 650; }
        .zfs .woocommerce-MyAccount-content { width: auto; float: none; margin: 0; }

        @media (max-width: 782px) {
            /* Na telefonie menu jest nad trescia, wiec przewija sie
               cala strona — stala wysokosc obcinalaby panel. Selektor
               z .admin-bar musi tu byc, inaczej regula 100vh dla
               zalogowanych wygrywa i tresc wylewa sie pod stopke. */
            .zfs, body.zoopet-fs.admin-bar .zfs { display: block; height: auto; }
            .zfs-side { width: auto; flex: none; border-right: 0; border-bottom: 1px solid var(--zpp-line, #e5e7eb); }
            .zfs-main { padding: 18px 14px; }
        }

/* ── public/templates/my-account/partner.php : 170 ── */
.zp-partner .zp-lead { color:#555; margin-bottom:1.4em; }
.zp-partner .zp-share { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; margin-bottom:16px; }
.zp-partner .zp-share-box { border:1.5px solid #ddd; border-radius: var(--zpp-r-sm); padding:16px; }
.zp-partner .zp-share-box.zp-primary { border-color:#2d7a4e; background:#f2f8f4; }
.zp-partner .zp-share-label { display:block; font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:#2d7a4e; font-weight:700; margin-bottom:6px; }
.zp-partner .zp-share-value { display:block; font-family:monospace; font-size:20px; font-weight:700; word-break:break-all; margin-bottom:8px; }
.zp-partner .zp-share-value.zp-small { font-size:14px; }
.zp-partner .zp-share-desc { font-size:13px; color:#666; margin:0 0 10px; line-height:1.5; }
.zp-partner .zp-qr-box { display:flex; gap:18px; align-items:flex-start; flex-wrap:wrap; border:1px solid #e5e5e5; border-radius: var(--zpp-r-sm); padding:16px; margin-bottom:14px; }
.zp-partner .zp-qr { width:150px; height:150px; background:var(--zpp-surface); border:1px solid #eee; border-radius: var(--zpp-r-xs); padding:8px; flex-shrink:0; }
.zp-partner .zp-qr svg, .zp-partner .zp-qr canvas { display:block; width:100%; height:100%; }
.zp-partner .zp-qr-info { flex:1; min-width:220px; }
.zp-partner .zp-qr-info p { font-size:13px; color:#666; line-height:1.55; margin:6px 0 10px; }
.zp-partner .zp-valid { font-size:13px; color:#666; margin-bottom:14px; }
.zp-partner .zp-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:1px; background:#eee; border:1px solid #eee; border-radius: var(--zpp-r-sm); overflow:hidden; margin-bottom:16px; }
.zp-partner .zp-stats > div { background:var(--zpp-surface); padding:14px 16px; }
.zp-partner .zp-n { display:block; font-size:20px; font-weight:700; line-height:1.2; }
.zp-partner .zp-l { display:block; font-size:12px; color:#777; }
.zp-partner .zp-payout { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; border:2px solid #2d7a4e; border-radius: var(--zpp-r-sm); padding:18px; }
.zp-partner .zp-payout-n { display:block; font-size:28px; font-weight:700; color:#2d7a4e; line-height:1.1; }
.zp-partner .zp-payout-l { display:block; font-size:13px; color:#555; }
.zp-partner .zp-hint { font-size:12px; color:#777; margin-top:10px; }
.zp-partner .zp-table { width:100%; margin-top:10px; }
.zp-partner .zp-table td { padding:8px 10px; border-bottom:1px solid #eee; font-size:14px; }
.zp-partner .zp-status { font-size:12px; padding:2px 9px; border-radius: var(--zpp-r-lg); background:#f0f0f0; color:#666; }
.zp-partner .zp-status-paid { background:#e4efe8; color:#1e5d3a; }
.zp-partner .zp-status-requested { background:#fbf1e0; color:#8a5a12; }

/* ── public/templates/my-account/points.php : 553 ── */
.zpp { max-width: var(--zpp-szer-panel, 1440px); margin: 0 auto; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }

/* Hero */
.zpp-hero {
    background: var(--zpp-surface);
    border-radius: var(--zpp-r-lg);
    padding: 48px 32px;
    text-align: center;
    border: 1px solid var(--zpp-line);
    box-shadow: var(--zpp-sh);
    margin-bottom: 32px;
    position: relative;
    overflow: hidden;
}
.zpp-hero-bg { display: none; }
.zpp-hero-content { position: relative; z-index: 1; }
.zpp-hero-icon { font-size: 56px; margin-bottom: 12px; }
.zpp-hero h1 { font-size: 32px; font-weight: 700; margin: 0 0 8px; color: #111; }
.zpp-hero p { font-size: 16px; color: #666; margin: 0; }

/* Balance */
.zpp-balance-section { display: grid; grid-template-columns: 1fr auto; gap: 24px; margin-bottom: 40px; align-items: start; }
.zpp-balance-card {
    background: var(--zpp-surface);
    border-radius: var(--zpp-r-lg);
    padding: 32px;
    box-shadow: var(--zpp-sh);
    text-align: center;
}
.zpp-balance-label { font-size: 14px; color: #888; display: block; margin-bottom: 8px; }
.zpp-balance-value { font-size: 56px; font-weight: 700; color: #f59e0b; display: block; line-height: 1; }
.zpp-balance-unit { font-size: 16px; color: #666; display: block; margin-bottom: 20px; }
.zpp-balance-warning {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--zpp-warn-bg);
    color: var(--zpp-warn-ink);
    padding: 10px 16px;
    border-radius: var(--zpp-r-sm);
    font-size: 13px;
    margin-bottom: 20px;
}
.zpp-balance-btn {
    display: inline-block;
    background: var(--zpp-surface);
    color: #f59e0b !important;
    padding: 14px 32px;
    border-radius: var(--zpp-r-sm);
    border: 2px solid #f59e0b;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s;
}
.zpp-balance-btn:hover { background: #f59e0b; color: var(--zpp-on-accent) !important; }

.zpp-balance-stats { display: flex; flex-direction: column; gap: 16px; }
.zpp-mini-stat {
    background: #f8f9fa;
    border-radius: var(--zpp-r);
    padding: 20px;
    text-align: center;
    min-width: 140px;
}
.zpp-mini-value { display: block; font-size: 24px; font-weight: 700; color: #111; }
.zpp-mini-label { font-size: 12px; color: #888; }

/* Section */
.zpp-section { margin-bottom: 48px; }
.zpp-section h2 { font-size: 22px; font-weight: 600; margin: 0 0 16px; color: #111; }
.zpp-section-intro { color: #666; margin-bottom: 24px; }

/* Explain */
.zpp-explain { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; justify-content: center; }
.zpp-explain-item {
    flex: 1;
    min-width: 220px;
    max-width: 280px;
    background: var(--zpp-surface);
    border-radius: var(--zpp-r);
    padding: 24px;
    box-shadow: var(--zpp-sh-sm);
    border: 1px solid #f0f0f0;
}
.zpp-explain-icon { font-size: 36px; margin-bottom: 12px; }
.zpp-explain-text h4 { font-size: 16px; font-weight: 600; margin: 0 0 8px; color: #111; }
.zpp-explain-text p { font-size: 13px; color: #666; line-height: 1.5; margin: 0; }
.zpp-explain-arrow { font-size: 24px; color: #ddd; padding-top: 40px; }

/* Earn grid */
.zpp-earn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.zpp-earn-card {
    background: var(--zpp-surface);
    border-radius: var(--zpp-r);
    padding: 20px;
    box-shadow: var(--zpp-sh-sm);
    border: 1px solid #f0f0f0;
    transition: all 0.3s;
}
.zpp-earn-card:hover { transform: translateY(-4px); box-shadow: var(--zpp-sh); }
.zpp-earn-main { grid-column: span 2; }
.zpp-earn-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.zpp-earn-emoji { font-size: 28px; }
.zpp-earn-header h3 { font-size: 16px; font-weight: 600; margin: 0; color: #111; }
.zpp-earn-amount {
    display: inline-block;
    background: #ecfdf5;
    color: var(--zpp-ok);
    padding: 6px 14px;
    border-radius: var(--zpp-r-lg);
    border: 1px solid #a7f3d0;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
}
.zpp-earn-details p { font-size: 13px; color: #666; line-height: 1.4; margin: 0; }
.zpp-earn-example {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
    font-size: 12px;
    color: #888;
}

/* Redeem */
.zpp-redeem-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; }
.zpp-redeem-card {
    background: var(--zpp-surface);
    border-radius: var(--zpp-r);
    padding: 24px;
    text-align: center;
    box-shadow: var(--zpp-sh-sm);
    border: 1px solid #f0f0f0;
}
.zpp-redeem-icon { font-size: 36px; margin-bottom: 12px; }
.zpp-redeem-card h4 { font-size: 15px; font-weight: 600; margin: 0 0 8px; color: #111; }
.zpp-redeem-card p { font-size: 12px; color: #666; line-height: 1.4; margin: 0 0 12px; }
.zpp-redeem-rate { font-size: 12px; color: #f59e0b; font-weight: 600; }
.zpp-redeem-cta { text-align: center; }

/* Buttons */
.zpp-btn {
    display: inline-block;
    background: var(--zpp-surface);
    color: #6366f1 !important;
    padding: 14px 32px;
    border-radius: var(--zpp-r-sm);
    border: 2px solid #6366f1;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s;
}
.zpp-btn:hover { background: #6366f1; color: var(--zpp-on-accent) !important; }
.zpp-btn-outline {
    display: inline-block;
    border: 2px solid var(--zpp-line);
    color: #666 !important;
    padding: 12px 24px;
    border-radius: var(--zpp-r-sm);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s;
}
.zpp-btn-outline:hover { border-color: #6366f1; color: #6366f1 !important; }

/* Levels */
.zpp-levels-track { display: flex; gap: 16px; overflow-x: auto; padding: 12px 0; }
.zpp-level {
    flex: 0 0 140px;
    background: var(--zpp-surface);
    border-radius: var(--zpp-r);
    padding: 20px 16px;
    text-align: center;
    box-shadow: var(--zpp-sh-sm);
    border: 2px solid #f0f0f0;
    transition: all 0.3s;
}
.zpp-level-current { border-color: #6366f1; }
.zpp-level-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin: 0 auto 12px;
}
.zpp-level-name { display: block; font-size: 14px; font-weight: 600; color: #111; margin-bottom: 4px; }
.zpp-level-mult { display: block; font-size: 18px; font-weight: 700; color: #6366f1; margin-bottom: 4px; }
.zpp-level-req { font-size: 11px; color: #888; }
.zpp-next-level {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
    padding: 16px;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border-radius: var(--zpp-r-sm);
    font-size: 14px;
    color: #1e40af;
}
.zpp-next-icon { font-size: 20px; }

/* History */
.zpp-history-list { display: flex; flex-direction: column; gap: 8px; }
.zpp-history-item {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--zpp-surface);
    border-radius: var(--zpp-r-sm);
    padding: 16px 20px;
    box-shadow: var(--zpp-sh-sm);
}
.zpp-history-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
}
.zpp-history-icon.zpp-plus { background: #d1fae5; color: var(--zpp-ok); }
.zpp-history-icon.zpp-minus { background: var(--zpp-risk-bg); color: var(--zpp-risk); }
.zpp-history-info { flex: 1; }
.zpp-history-desc { display: block; font-size: 14px; font-weight: 500; color: #111; }
.zpp-history-date { font-size: 12px; color: #888; }
.zpp-history-points { font-size: 16px; font-weight: 700; }
.zpp-history-points.zpp-plus { color: var(--zpp-ok); }
.zpp-history-points.zpp-minus { color: var(--zpp-risk); }

/* Strony historii — lista bywa długa, więc idzie po kawałku. */
.zpp-history-ile {
    margin-left: 8px; font-size: 13px; font-weight: 500; color: #888;
    white-space: nowrap;
}
.zpp-strony {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 6px; margin: 20px 0 0;
}
.zpp-strony-numery { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.zpp-strona {
    display: inline-flex; align-items: center; gap: 5px;
    min-width: 38px; height: 38px; padding: 0 12px; box-sizing: border-box;
    justify-content: center;
    border: 1px solid var(--zpp-line, #e5e7eb);
    border-radius: var(--zpp-r-sm, 10px);
    background: var(--zpp-surface, #fff);
    font-size: 14px; font-weight: 600; color: #111; text-decoration: none;
    transition: border-color .15s, background .15s, transform .15s;
}
.zpp-strona:hover { border-color: var(--zpp-accent, #6366f1); transform: translateY(-1px); }
.zpp-strona.is-on {
    background: var(--zpp-accent, #6366f1);
    border-color: var(--zpp-accent, #6366f1);
    color: var(--zpp-on-accent, #fff); cursor: default; transform: none;
}
.zpp-strona.is-off { opacity: .4; cursor: default; transform: none; }
.zpp-strona.is-off:hover { border-color: var(--zpp-line, #e5e7eb); transform: none; }
.zpp-przerwa { padding: 0 2px; color: #999; }
.zpp-strony-opis { margin: 10px 0 0; text-align: center; font-size: 13px; color: #888; }

@media (max-width: 560px) {
    .zpp-strzalka { padding: 0 10px; font-size: 13px; }
    .zpp-strony { gap: 5px; }
}

/* Empty */
.zpp-empty { text-align: center; padding: 48px; background: #f8f9fa; border-radius: var(--zpp-r); }
.zpp-empty-icon { font-size: 48px; display: block; margin-bottom: 16px; opacity: 0.5; }
.zpp-empty p { color: #666; margin: 0 0 20px; }

/* FAQ */
.zpp-faq-list { display: flex; flex-direction: column; gap: 12px; }
.zpp-faq-item {
    background: var(--zpp-surface);
    border-radius: var(--zpp-r-sm);
    border: 1px solid var(--zpp-line);
    overflow: hidden;
}
.zpp-faq-item summary {
    padding: 16px 20px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    list-style: none;
}
.zpp-faq-item summary::-webkit-details-marker { display: none; }
.zpp-faq-item summary::after { content: '+'; float: right; font-size: 20px; color: #888; }
.zpp-faq-item[open] summary::after { content: '−'; }
.zpp-faq-item p { padding: 0 20px 16px; margin: 0; font-size: 13px; color: #666; line-height: 1.6; }

/* Review CTA */
.zpp-review-cta {
    background: linear-gradient(135deg, var(--zpp-warn-bg) 0%, var(--zpp-warn-bg-2) 100%);
    border-radius: var(--zpp-r-lg);
    padding: 28px;
    border: 1px solid #f59e0b;
}
.zpp-review-cta-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 12px;
}
.zpp-review-cta h2 { margin: 0; color: var(--zpp-warn-ink); font-size: 20px; }
.zpp-review-badge {
    background: #f59e0b;
    color: var(--zpp-on-accent);
    padding: 6px 14px;
    border-radius: var(--zpp-r-lg);
    font-size: 13px;
    font-weight: 600;
}
.zpp-review-cta .zpp-section-intro { color: #a16207; margin-bottom: 20px; }
.zpp-review-products {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.zpp-review-product {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--zpp-surface);
    padding: 14px;
    border-radius: var(--zpp-r-sm);
    box-shadow: var(--zpp-sh-sm);
}
.zpp-review-img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: var(--zpp-r-sm);
    border: 1px solid var(--zpp-line);
}
.zpp-review-product-info { flex: 1; }
.zpp-review-product-info h4 {
    margin: 0 0 4px;
    font-size: 14px;
    color: #111;
}
.zpp-review-date {
    font-size: 12px;
    color: var(--zpp-ink-4);
}
.zpp-review-btn {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: var(--zpp-on-accent) !important;
    padding: 10px 18px;
    border-radius: var(--zpp-r-sm);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
    white-space: nowrap;
}
.zpp-review-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}

/* Centrum Gier */
.zpp-games {
    background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
    border-radius: var(--zpp-r-lg);
    padding: 28px;
    border: 1px solid #c4b5fd;
}
.zpp-games h2 { color: #5b21b6; margin-bottom: 8px; }
.zpp-games .zpp-section-intro { color: #7c3aed; margin-bottom: 24px; }
.zpp-game-card {
    position: relative;
    transition: all 0.3s;
}
.zpp-game-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--zpp-sh);
}
.zpp-game-status {
    margin-top: 12px;
    padding: 8px 12px;
    background: var(--zpp-sunk-2);
    border-radius: var(--zpp-r-xs);
    font-size: 12px;
    color: var(--zpp-ink-3);
    display: flex;
    align-items: center;
    gap: 6px;
}
.zpp-game-status.available {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    color: #047857;
    font-weight: 600;
}
.zpp-game-status-icon { font-size: 14px; }
.zpp-games-cta {
    margin-top: 24px;
    text-align: center;
    padding: 16px;
    background: rgba(255,255,255,0.5);
    border-radius: var(--zpp-r-sm);
}
.zpp-games-cta p { margin: 0; color: #5b21b6; font-size: 14px; }

/* Responsive */
@media (max-width: 768px) {
    .zpp-balance-section { grid-template-columns: 1fr; }
    .zpp-balance-stats { flex-direction: row; }
    .zpp-explain { flex-direction: column; align-items: center; }
    .zpp-explain-arrow { display: none; }
    .zpp-earn-main { grid-column: span 1; }
    .zpp-levels-track { flex-wrap: nowrap; }
    .zpp-review-cta-header { flex-direction: column; align-items: flex-start; }
    .zpp-review-product { flex-wrap: wrap; }
    .zpp-review-btn { width: 100%; text-align: center; margin-top: 8px; }
}

/* Inline Review Form */
.zpp-review-product {
    flex-wrap: wrap;
}
.zpp-review-toggle {
    border: none;
    cursor: pointer;
}
.zpp-review-form-wrapper {
    width: 100%;
    margin-top: 16px;
    animation: zpp-slide-down 0.3s ease;
}
@keyframes zpp-slide-down {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
.zpp-review-form {
    background: linear-gradient(135deg, var(--zpp-warn-bg) 0%, var(--zpp-warn-bg) 100%);
    border-radius: var(--zpp-r-sm);
    padding: 20px;
    border: 1px solid #fcd34d;
}
.zpp-review-rating {
    margin-bottom: 16px;
}
.zpp-review-rating label {
    display: block;
    font-weight: 600;
    color: var(--zpp-warn-ink);
    margin-bottom: 8px;
    font-size: 14px;
}
.zpp-stars {
    display: flex;
    gap: 4px;
}
.zpp-star {
    font-size: 28px;
    color: #d1d5db;
    cursor: pointer;
    transition: all 0.2s;
}
.zpp-star:hover,
.zpp-star.active {
    color: #f59e0b;
    transform: scale(1.1);
}
.zpp-review-content label {
    display: block;
    font-weight: 600;
    color: var(--zpp-warn-ink);
    margin-bottom: 8px;
    font-size: 14px;
}
.zpp-review-textarea {
    width: 100%;
    padding: 14px;
    border: 2px solid #fcd34d;
    border-radius: var(--zpp-r-sm);
    font-size: 14px;
    resize: vertical;
    min-height: 100px;
    font-family: inherit;
    transition: border-color 0.2s;
    box-sizing: border-box;
}
.zpp-review-textarea:focus {
    outline: none;
    border-color: #f59e0b;
}
.zpp-char-count {
    display: block;
    text-align: right;
    font-size: 12px;
    color: var(--zpp-ink-4);
    margin-top: 6px;
}
.zpp-char-count.valid {
    color: var(--zpp-ok);
}
.zpp-review-actions {
    display: flex;
    gap: 12px;
    margin-top: 16px;
    justify-content: flex-end;
}
.zpp-review-cancel {
    background: var(--zpp-surface);
    border: 2px solid var(--zpp-line);
    color: var(--zpp-ink-3);
    padding: 10px 20px;
    border-radius: var(--zpp-r-xs);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.zpp-review-cancel:hover {
    background: var(--zpp-sunk-2);
    border-color: var(--zpp-line);
}
.zpp-review-submit {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border: none;
    color: var(--zpp-on-accent);
    padding: 10px 24px;
    border-radius: var(--zpp-r-xs);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.zpp-review-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.zpp-review-submit:not(:disabled):hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}
.zpp-review-success {
    text-align: center;
    padding: 24px;
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border-radius: var(--zpp-r-sm);
    border: 1px solid #34d399;
}
.zpp-review-success-icon {
    font-size: 48px;
    margin-bottom: 12px;
}
.zpp-review-success h4 {
    color: #047857;
    margin: 0 0 8px;
    font-size: 18px;
}
.zpp-review-success p {
    color: var(--zpp-ok);
    margin: 0;
    font-size: 14px;
}

/* ── public/templates/my-account/referrals.php : 147 ── */
.zoopet-referrals {
    max-width: 900px;
}

/* Header */
.zpr-header {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 30px;
    background: linear-gradient(135deg, #ec4899 0%, #be185d 100%);
    border-radius: var(--zpp-r-lg);
    color: var(--zpp-on-accent);
    margin-bottom: 30px;
}
.zpr-header-icon {
    font-size: 48px;
}
.zpr-header h2 {
    margin: 0 0 8px;
    font-size: 28px;
}
.zpr-header p {
    margin: 0;
    opacity: 0.9;
    font-size: 15px;
}

/* How it works */
.zpr-how-it-works {
    background: var(--zpp-surface);
    border-radius: var(--zpp-r);
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: var(--zpp-sh-sm);
}
.zpr-how-it-works h3 {
    margin: 0 0 20px;
    font-size: 18px;
}
.zpr-steps {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}
.zpr-step {
    flex: 1;
    text-align: center;
    padding: 16px;
    background: var(--zpp-sunk);
    border-radius: var(--zpp-r-sm);
}
.zpr-step-num {
    width: 28px;
    height: 28px;
    background: #ec4899;
    color: var(--zpp-on-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    margin: 0 auto 12px;
}
.zpr-step-icon {
    font-size: 32px;
    margin-bottom: 8px;
}
.zpr-step h4 {
    margin: 0 0 6px;
    font-size: 14px;
    color: #111;
}
.zpr-step p {
    margin: 0;
    font-size: 12px;
    color: var(--zpp-ink-3);
    line-height: 1.4;
}
.zpr-step-arrow {
    color: #d1d5db;
    font-size: 24px;
    margin-top: 40px;
}

/* Link box */
.zpr-link-box {
    background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 100%);
    border: 2px solid #f9a8d4;
    border-radius: var(--zpp-r);
    padding: 24px;
    margin-bottom: 24px;
}
.zpr-link-box h3 {
    margin: 0 0 16px;
    font-size: 18px;
    color: #be185d;
}
.zpr-link-wrapper {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}
.zpr-link-wrapper input {
    flex: 1;
    padding: 14px 18px;
    border: 2px solid #f9a8d4;
    border-radius: var(--zpp-r-sm);
    font-size: 14px;
    background: var(--zpp-surface);
}
.zpr-copy-btn {
    padding: 14px 24px;
    background: linear-gradient(135deg, #ec4899, #be185d);
    color: var(--zpp-on-accent);
    border: none;
    border-radius: var(--zpp-r-sm);
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s;
}
.zpr-copy-btn:hover {
    transform: scale(1.05);
}
.zpr-code {
    font-size: 14px;
    color: var(--zpp-ink-3);
    margin-bottom: 16px;
}
.zpr-code strong {
    color: #be185d;
    font-family: monospace;
    font-size: 16px;
}
.zpr-share-buttons {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.zpr-share-buttons span {
    font-size: 14px;
    color: var(--zpp-ink-3);
}
.zpr-share-btn {
    padding: 8px 16px;
    border-radius: var(--zpp-r-xs);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    color: var(--zpp-on-accent);
}
.zpr-share-facebook { background: #1877f2; }
.zpr-share-whatsapp { background: #25d366; }
.zpr-share-email { background: #6b7280; }

/* Stats */
.zpr-stats-section {
    background: var(--zpp-surface);
    border-radius: var(--zpp-r);
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: var(--zpp-sh-sm);
}
.zpr-stats-section h3 {
    margin: 0 0 20px;
    font-size: 18px;
}
.zpr-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.zpr-stat-card {
    text-align: center;
    padding: 20px;
    background: var(--zpp-sunk);
    border-radius: var(--zpp-r-sm);
}
.zpr-stat-highlight {
    background: linear-gradient(135deg, #fdf2f8, #fce7f3);
    border: 2px solid #f9a8d4;
}
.zpr-stat-icon {
    display: block;
    font-size: 28px;
    margin-bottom: 8px;
}
.zpr-stat-value {
    display: block;
    font-size: 28px;
    font-weight: 700;
    color: #111;
}
.zpr-stat-label {
    display: block;
    font-size: 12px;
    color: var(--zpp-ink-3);
    margin-top: 4px;
}

/* Referred list */
.zpr-referred-section {
    background: var(--zpp-surface);
    border-radius: var(--zpp-r);
    padding: 24px;
    box-shadow: var(--zpp-sh-sm);
}
.zpr-referred-section h3 {
    margin: 0 0 20px;
    font-size: 18px;
}
.zpr-referred-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.zpr-referred-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--zpp-sunk);
    border-radius: var(--zpp-r-sm);
}
.zpr-referred-avatar img {
    border-radius: 50%;
}
.zpr-referred-info {
    flex: 1;
}
.zpr-referred-info strong {
    display: block;
    font-size: 14px;
    margin-bottom: 2px;
}
.zpr-referred-info span {
    font-size: 12px;
    color: var(--zpp-ink-3);
}
.zpr-status-badge {
    padding: 6px 12px;
    border-radius: var(--zpp-r-lg);
    font-size: 12px;
    font-weight: 600;
}
.zpr-status-completed {
    background: var(--zpp-ok-bg);
    color: #166534;
}
.zpr-status-pending {
    background: var(--zpp-warn-bg);
    color: var(--zpp-warn-ink);
}

/* Responsive */
@media (max-width: 768px) {
    .zpr-header {
        flex-direction: column;
        text-align: center;
    }
    .zpr-steps {
        flex-direction: column;
    }
    .zpr-step-arrow {
        display: none;
    }
    .zpr-link-wrapper {
        flex-direction: column;
    }
    .zpr-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .zpr-referred-item {
        flex-wrap: wrap;
    }
    .zpr-referred-status {
        width: 100%;
        margin-top: 8px;
    }
}

/* ── public/templates/my-account/subscriptions.php : 512 ── */
/* SUBSCRIPTION PAGE STYLES */
.zoopet-subscriptions-page{max-width:900px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif}

/* Hero */
.zps-hero{background:var(--zpp-surface);border-radius: var(--zpp-r-lg);padding:48px 32px;text-align:center;border:1px solid var(--zpp-line);box-shadow: var(--zpp-sh);margin-bottom:32px}
.zps-hero-icon{font-size:56px;margin-bottom:12px}
.zps-hero h1{font-size:32px;font-weight:700;margin:0 0 12px;color:#111}
.zps-hero p{font-size:16px;color:#666;max-width:500px;margin:0 auto 16px;line-height:1.5}
.zps-hero-badge{display:inline-block;background:#ecfdf5;color:var(--zpp-ok);padding:10px 20px;border-radius:30px;font-size:14px;font-weight:600;border:1px solid #a7f3d0}

/* How section */
.zps-how-section{margin-bottom:40px}
.zps-how-section h2{font-size:22px;font-weight:600;margin:0 0 20px;color:#111}
.zps-steps{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-bottom:40px}
.zps-step{flex:1;min-width:200px;max-width:260px;background:var(--zpp-surface);border-radius: var(--zpp-r-lg);padding:28px 20px;text-align:center;box-shadow: var(--zpp-sh);position:relative}
.zps-step-num{position:absolute;top:-12px;left:50%;transform:translateX(-50%);width:28px;height:28px;background:#6366f1;color:var(--zpp-on-accent);border-radius:50%;font-size:14px;font-weight:700;line-height:28px}
.zps-step-icon{font-size:40px;margin-bottom:12px}
.zps-step h3{font-size:16px;font-weight:600;margin:0 0 8px;color:#111}
.zps-step p{font-size:13px;color:#666;line-height:1.5;margin:0}
.zps-step-arrow{font-size:24px;color:#ddd;padding-top:60px}

/* Benefits */
.zps-benefits{background:var(--zpp-surface);border-radius: var(--zpp-r-lg);padding:32px;margin-bottom:32px;border:1px solid var(--zpp-line);box-shadow: var(--zpp-sh-sm)}
.zps-benefits h3{font-size:18px;font-weight:600;margin:0 0 20px;color:#111}
.zps-benefits-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.zps-benefit{display:flex;align-items:flex-start;gap:14px;background:var(--zpp-sunk);border-radius: var(--zpp-r-sm);padding:16px;border:1px solid var(--zpp-line)}
.zps-benefit-icon{font-size:28px;flex-shrink:0}
.zps-benefit strong{display:block;font-size:14px;color:#111;margin-bottom:2px}
.zps-benefit span{font-size:12px;color:#666}

/* Start section */
.zps-start{background:var(--zpp-surface);border:2px dashed var(--zpp-line);border-radius: var(--zpp-r-lg);padding:32px;text-align:center}
.zps-start h3{font-size:18px;font-weight:600;margin:0 0 24px;color:#111}
.zps-start-options{display:flex;gap:24px;justify-content:center;flex-wrap:wrap}
.zps-start-option{flex:1;min-width:200px;max-width:280px;text-align:center}
.zps-option-icon{font-size:40px;margin-bottom:12px}
.zps-start-option h4{font-size:15px;font-weight:600;margin:0 0 8px;color:#111}
.zps-start-option p{font-size:13px;color:#666;line-height:1.4;margin:0}

/* Compact info for users with subscriptions */
.zps-info-compact{display:flex;gap:24px;flex-wrap:wrap;padding:20px 24px;background:var(--zpp-surface);border:1px solid var(--zpp-line);box-shadow: var(--zpp-sh-sm);border-radius: var(--zpp-r);margin-bottom:32px}
.zps-info-item{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--zpp-ink)}
.zps-info-icon{font-size:20px}

/* Existing styles */
.zoopet-subscription-info{background:linear-gradient(135deg,#e0e7ff,#c7d2fe);padding:20px;border-radius: var(--zpp-r-sm);margin-bottom:30px}
.zoopet-subscription-info .zoopet-min-note{margin-top:10px;margin-bottom:0;padding:10px 15px;background:rgba(255,255,255,.7);border-radius: var(--zpp-r-xs);font-size:14px}
.zoopet-subscription-card{background:var(--zpp-surface);border:1px solid var(--zpp-line);border-radius: var(--zpp-r-sm);padding:20px;margin-bottom:20px}
.zoopet-subscription-card.paused{opacity:.7}.zoopet-subscription-card.cancelled{opacity:.5}
.zoopet-subscription-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:15px;flex-wrap:wrap;gap:10px}
.zoopet-subscription-title{display:flex;align-items:center;gap:10px}.zoopet-subscription-title h4{margin:0}
.zoopet-subscription-meta{display:flex;gap:20px;color:var(--zpp-ink-3);font-size:14px}
.zoopet-subscription-products{display:flex;align-items:center;gap:10px;padding:15px 0;border-top:1px solid var(--zpp-line-2);border-bottom:1px solid var(--zpp-line-2);flex-wrap:wrap}
.zoopet-mini-product{position:relative;width:50px;height:50px}
.zoopet-mini-product img{width:100%;height:100%;object-fit:cover;border-radius: var(--zpp-r-xs)}
.zoopet-mini-qty{position:absolute;bottom:-5px;right:-5px;background:var(--zoopet-primary,#6366f1);color:var(--zpp-on-accent);font-size:10px;padding:2px 5px;border-radius: var(--zpp-r-sm)}
.zoopet-subscription-total{margin-left:auto;text-align:right}
.zoopet-original-price{text-decoration:line-through;color:var(--zpp-ink-4);font-size:14px}
.zoopet-final-price{font-size:20px;font-weight:700;color:var(--zoopet-primary,#6366f1)}
.zoopet-subscription-actions{display:flex;gap:10px;margin-top:15px;flex-wrap:wrap}
.zoopet-subscription-minimum{padding:15px;border-radius: var(--zpp-r-xs);margin:15px 0}
.zoopet-subscription-minimum.below-min{background:var(--zpp-warn-bg);border:1px solid #fcd34d}
.zoopet-subscription-minimum.above-min{background:var(--zpp-ok-bg);border:1px solid #86efac}
.zoopet-min-progress{height:8px;background:#e5e7eb;border-radius:4px;overflow:hidden;margin-bottom:10px}
.zoopet-min-bar{height:100%;background:linear-gradient(90deg,#f59e0b,#10b981);border-radius:4px;transition:width .3s}
.zoopet-min-warning{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
.zoopet-min-warning span{color:var(--zpp-warn-ink)}
.zoopet-min-success span{color:#166534;font-weight:500}
.zoopet-btn-accent{background:var(--zoopet-accent,#f59e0b)!important;color:var(--zpp-on-accent)!important;border:none!important}
.zoopet-btn-accent:hover{background:#d97706!important}
.zoopet-edit-value-info{padding:15px;border-radius: var(--zpp-r-xs);margin-bottom:20px}
.zoopet-edit-value-info.below{background:var(--zpp-warn-bg);border:1px solid #fcd34d}
.zoopet-edit-value-info.ok{background:var(--zpp-ok-bg);border:1px solid #86efac}
.zoopet-value-row{display:flex;justify-content:space-between;margin-bottom:10px;font-size:16px}
.zoopet-value-warning{color:var(--zpp-warn-ink);font-size:14px}
.zoopet-value-ok{color:#166534;font-size:14px}
.zoopet-orders-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.zoopet-order-card{background:var(--zpp-surface);border:2px solid var(--zpp-line);border-radius: var(--zpp-r-sm);padding:15px;transition:.2s}
.zoopet-order-card:hover{border-color:var(--zoopet-primary,#6366f1)}
.zoopet-order-header{display:flex;justify-content:space-between;margin-bottom:10px;flex-wrap:wrap;gap:5px}
.zoopet-order-number{font-weight:600}.zoopet-order-total{font-weight:600;color:var(--zoopet-primary,#6366f1)}
.zoopet-order-products{display:flex;gap:5px;margin-bottom:15px;flex-wrap:wrap}
.zoopet-create-from-order{width:100%}
.zoopet-subscription-item{display:flex;align-items:center;gap:15px;padding:15px;background:var(--zpp-sunk);border-radius: var(--zpp-r-xs);margin-bottom:10px}
.zoopet-item-image{width:60px;height:60px}.zoopet-item-image img{width:100%;height:100%;object-fit:cover;border-radius: var(--zpp-r-xs)}
.zoopet-item-details{flex:1}.zoopet-item-quantity{display:flex;align-items:center;gap:5px}
.zoopet-qty-btn{width:30px;height:30px;border:1px solid var(--zpp-line);background:var(--zpp-surface);border-radius: var(--zpp-r-xs);cursor:pointer}
.zoopet-qty-input{width:50px;text-align:center;border:1px solid var(--zpp-line);border-radius: var(--zpp-r-xs);padding:5px}
.zoopet-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:9999;padding:20px;box-sizing:border-box}
.zoopet-modal-content{background:var(--zpp-surface);border-radius: var(--zpp-r);padding:30px;max-width:500px;width:90%;max-height:90vh;overflow-y:auto}
.zoopet-modal-large{max-width:900px;width:95%}
.zoopet-modal-header{display:flex;justify-content:space-between;margin-bottom:20px}.zoopet-modal-header h3{margin:0}
.zoopet-modal-close{background:none;border:none;font-size:24px;cursor:pointer}
.zoopet-modal-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:30px}
.zoopet-modal-left{border-right:1px solid var(--zpp-line);padding-right:30px}
.zoopet-modal-right h4{margin-top:0;margin-bottom:15px}
.zoopet-modal-summary{background:var(--zpp-sunk);padding:15px;border-radius: var(--zpp-r-xs);margin-bottom:15px}
.zoopet-summary-row{display:flex;justify-content:space-between;font-size:16px;margin-bottom:10px}
.zoopet-summary-progress{height:8px;background:#e5e7eb;border-radius:4px;overflow:hidden;margin-bottom:10px}
.zoopet-summary-status{font-size:13px;padding:8px 12px;border-radius: var(--zpp-r-xs)}
.zoopet-summary-status.below{background:var(--zpp-warn-bg);color:var(--zpp-warn-ink)}
.zoopet-summary-status.ok{background:var(--zpp-ok-bg);color:#166534}
.zoopet-summary-shipping{font-size:13px;padding:8px 12px;border-radius: var(--zpp-r-xs);margin-top:8px;background:#dbeafe;color:#1e40af}
.zoopet-summary-shipping.free{background:var(--zpp-ok-bg);color:#166534}
.zoopet-modal-products{max-height:250px;overflow-y:auto;margin-bottom:15px}
.zoopet-modal-product{display:flex;align-items:center;gap:10px;padding:10px;background:var(--zpp-surface);border:1px solid var(--zpp-line);border-radius: var(--zpp-r-xs);margin-bottom:8px}
.zoopet-modal-product img{width:45px;height:45px;object-fit:cover;border-radius: var(--zpp-r-xs)}
.zoopet-modal-product-info{flex:1;min-width:0}
.zoopet-modal-product-name{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.zoopet-modal-product-price{font-size:12px;color:var(--zpp-ink-3)}
.zoopet-modal-product-qty{display:flex;align-items:center;gap:3px}
.zoopet-modal-product-qty button{width:24px;height:24px;border:1px solid var(--zpp-line);background:var(--zpp-surface);border-radius:4px;cursor:pointer;font-size:14px}
.zoopet-modal-product-qty input{width:40px;text-align:center;border:1px solid var(--zpp-line);border-radius:4px;padding:3px;font-size:13px}
.zoopet-modal-product-remove{background:none;border:none;color:#ef4444;cursor:pointer;font-size:16px;padding:5px}
.zoopet-add-product-section{border-top:1px solid var(--zpp-line);padding-top:15px}
.zoopet-add-product-section h5{margin:0 0 10px 0;font-size:14px}
.zoopet-product-filters{display:flex;gap:10px;margin-bottom:10px}
.zoopet-select-sm,.zoopet-input-sm{padding:8px 12px;border:1px solid var(--zpp-line);border-radius: var(--zpp-r-xs);font-size:13px}
.zoopet-select-sm{flex:0 0 180px}
.zoopet-input-sm{flex:1}
.zoopet-search-results-modal{max-height:200px;overflow-y:auto;border:1px solid var(--zpp-line);border-radius: var(--zpp-r-xs);display:none}
.zoopet-search-results-modal.show{display:block}
.zoopet-search-result-item{display:flex;align-items:center;gap:10px;padding:10px;cursor:pointer;border-bottom:1px solid var(--zpp-line-2)}
.zoopet-search-result-item:hover{background:var(--zpp-sunk)}
.zoopet-search-result-item:last-child{border-bottom:none}
.zoopet-search-result-item img{width:40px;height:40px;object-fit:cover;border-radius: var(--zpp-r-xs)}
.zoopet-search-result-item .info{flex:1}
.zoopet-search-result-item .name{font-size:13px;font-weight:500}
.zoopet-search-result-item .price{font-size:12px;color:var(--zpp-ink-3)}
.zoopet-search-result-item .add-btn{background:var(--zoopet-primary,#6366f1);color:var(--zpp-on-accent);border:none;padding:5px 10px;border-radius:4px;cursor:pointer;font-size:12px}
.zoopet-modal-footer{display:flex;justify-content:flex-end;gap:10px;margin-top:20px;padding-top:20px;border-top:1px solid var(--zpp-line)}
.zoopet-loading{text-align:center;padding:20px;color:var(--zpp-ink-3)}
.zoopet-empty-products{text-align:center;padding:30px;color:var(--zpp-ink-3);background:var(--zpp-sunk);border-radius: var(--zpp-r-xs)}
@media(max-width:768px){
.zoopet-modal-grid{grid-template-columns:1fr}
.zoopet-modal-left{border-right:none;padding-right:0;border-bottom:1px solid var(--zpp-line);padding-bottom:20px;margin-bottom:20px}
}
.zoopet-inline-fields{display:flex;align-items:center;gap:10px}
.zoopet-discount-info{background:var(--zpp-ok-bg);color:#166534;padding:15px;border-radius: var(--zpp-r-xs);margin:20px 0}
.zoopet-min-info{background:#e0e7ff;color:#4338ca;padding:15px;border-radius: var(--zpp-r-xs);margin-bottom:20px;font-size:14px;line-height:1.6}
.zoopet-modal-actions{display:flex;gap:10px;margin-top:20px}
.zoopet-form-row{margin-bottom:15px}.zoopet-form-row label{display:block;font-weight:500;margin-bottom:5px}
.zoopet-badge-success{background:var(--zpp-ok-bg);color:#166534}.zoopet-badge-warning{background:var(--zpp-warn-bg);color:var(--zpp-warn-ink)}
.zoopet-badge-danger{background:var(--zpp-risk-bg);color:#991b1b}.zoopet-badge-accent{background:var(--zoopet-accent,#f59e0b);color:var(--zpp-on-accent)}
.zoopet-add-product{position:relative;margin:20px 0}
.zoopet-search-results{position:absolute;top:100%;left:0;right:0;background:var(--zpp-surface);border:1px solid var(--zpp-line);border-radius: var(--zpp-r-xs);max-height:200px;overflow-y:auto;z-index:100;display:none}
.zoopet-search-result{display:flex;align-items:center;gap:10px;padding:10px;cursor:pointer}
.zoopet-search-result:hover{background:var(--zpp-sunk-2)}
.zoopet-search-result img{width:40px;height:40px;object-fit:cover;border-radius:4px}

/* Responsive */
@media(max-width:768px){
    .zps-hero{padding:32px 20px}
    .zps-hero h1{font-size:24px}
    .zps-steps{flex-direction:column;align-items:center}
    .zps-step-arrow{display:none}
    .zps-benefits-grid{grid-template-columns:1fr}
    .zps-start-options{flex-direction:column;align-items:center}
    .zps-info-compact{flex-direction:column;gap:12px}
}


/* ============================================
   PANEL FIRMY B2B — Moje konto › Moja firma
   Wszystko na tokenach panelu, wiec kazdy preset
   i tryb ciemny dziala tu bez osobnych regul.
   ============================================ */
.zb2b { display: flex; flex-direction: column; gap: 18px; }

.zb2b-szyld { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.zb2b-szyld h2 { margin: 0 0 8px; font-family: var(--zpp-font-display); color: var(--zpp-ink); }
.zb2b-znaczki { display: flex; flex-wrap: wrap; gap: 6px; }
.zb2b-znaczek { font-size: 12px; font-weight: 600; color: var(--zpp-ink-3);
    background: var(--zpp-sunk); border: 1px solid var(--zpp-line); border-radius: var(--zpp-r-xs); padding: 3px 9px; }
.zb2b-znaczek.zb2b-mocny { background: var(--zpp-info-bg); border-color: var(--zpp-info-bg); color: var(--zpp-info); }

.zb2b-uwaga { background: var(--zpp-warn-bg); color: var(--zpp-warn-ink);
    border-radius: var(--zpp-r-sm); padding: 12px 16px; font-size: 14px; }

.zb2b-kafle { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.zb2b-kafel { background: var(--zpp-surface); border: 1px solid var(--zpp-line);
    border-radius: var(--zpp-r); box-shadow: var(--zpp-sh-sm); padding: 16px 18px;
    display: flex; flex-direction: column; gap: 6px; }
.zb2b-etykieta { font-size: 11px; font-weight: 700; letter-spacing: var(--zpp-tracking, .06em);
    text-transform: uppercase; color: var(--zpp-ink-4); }
.zb2b-kwota { font-family: var(--zpp-font-display); font-size: 24px; line-height: 1.15; color: var(--zpp-ink); }
.zb2b-kwota.zb2b-cisza { color: var(--zpp-ink-3); font-size: 19px; }
.zb2b-kwota.zb2b-uwaga-kwota { color: var(--zpp-risk); }
.zb2b-drobne { font-size: 12px; color: var(--zpp-ink-4); line-height: 1.45; }
.zb2b-pasek { height: 6px; border-radius: 999px; background: var(--zpp-sunk-2); overflow: hidden; }
.zb2b-pasek > span { display: block; height: 100%; border-radius: 999px; background: var(--zoopet-accent, var(--zpp-info)); }

.zb2b-sekcja { background: var(--zpp-surface); border: 1px solid var(--zpp-line);
    border-radius: var(--zpp-r-lg); box-shadow: var(--zpp-sh-sm); padding: 18px 20px; }
.zb2b-sekcja h3 { margin: 0 0 12px; font-size: 16px; font-family: var(--zpp-font-display); color: var(--zpp-ink); }
.zb2b-sekcja h4 { margin: 16px 0 8px; font-size: 13px; color: var(--zpp-ink-2); }
.zb2b-wstep { margin: -6px 0 10px; }
.zb2b-pusto { margin: 0; color: var(--zpp-ink-3); font-size: 14px; }

.zb2b-tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.zb2b-tabela th { text-align: left; font-size: 11px; text-transform: uppercase;
    letter-spacing: .05em; color: var(--zpp-ink-4); font-weight: 700;
    padding: 0 10px 8px 0; border-bottom: 1px solid var(--zpp-line); }
.zb2b-tabela td { padding: 11px 10px 11px 0; border-bottom: 1px solid var(--zpp-line-2); color: var(--zpp-ink-2); vertical-align: middle; }
.zb2b-tabela td strong { display: block; color: var(--zpp-ink); }
.zb2b-tabela tr:last-child td { border-bottom: 0; }
/* Komorka akcji: przyciskow bywa kilka (Szczegoly, Zapisz jako liste,
   Do koszyka, Usun), a kazdy przychodzi z innego miejsca — link, formularz
   albo dwa przyciski w jednym formularzu. Bez wspolnego flexa skleja sie
   to w jedna plame. */
.zb2b-tabela .zb2b-akcja { text-align: right; padding-right: 0; }
.zb2b-akcja { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; }
.zb2b-akcja .button { margin: 0; white-space: nowrap; }

/* Druga akcja w wierszu jest pomocnicza — dwa pelne przyciski obok siebie
   walcza o uwage i wiersz przestaje sie czytac. */
.zb2b .zb2b-akcja .button.zb2b-drugi,
.zb2b .zb2b-akcja .zb2b-drugi {
    background: transparent; color: var(--zpp-ink-3); border: 1px solid var(--zpp-line);
    box-shadow: none; text-decoration: none; font-weight: 500; font-size: 13px; padding: 6px 12px;
}
.zb2b .zb2b-akcja .button.zb2b-drugi:hover,
.zb2b .zb2b-akcja .zb2b-drugi:hover {
    background: transparent; color: var(--zoopet-accent, var(--zpp-info)); border-color: currentColor;
}
.zb2b-status { background: var(--zpp-sunk); border-radius: var(--zpp-r-xs); padding: 3px 9px; font-size: 12px; white-space: nowrap; }

.zb2b-dwie { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; align-items: start; }

.zb2b-dane { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: 14px; }
.zb2b-dane dt { color: var(--zpp-ink-4); font-size: 12px; align-self: center; }
.zb2b-dane dd { margin: 0; color: var(--zpp-ink-2); }

.zb2b-konta { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.zb2b-konta li { display: flex; align-items: center; gap: 10px; }
.zb2b-konto-kto { display: flex; flex-direction: column; line-height: 1.3; }
.zb2b-konto-kto strong { color: var(--zpp-ink); font-size: 14px; }
.zb2b-inicjaly { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 999px;
    background: var(--zpp-sunk-2); color: var(--zpp-ink-3);
    display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.zb2b-inicjaly.zb2b-duze { width: 46px; height: 46px; flex-basis: 46px; font-size: 15px;
    background: var(--zoopet-accent, var(--zpp-info)); color: var(--zpp-on-accent); }

.zb2b-wizytowka { display: flex; align-items: center; gap: 12px; }
.zb2b-wizytowka strong { display: block; color: var(--zpp-ink); }
.zb2b-kontakt { font-size: 13px; color: var(--zpp-ink-3); text-decoration: none; }
.zb2b-kontakt:hover { text-decoration: underline; }

@media (max-width: 600px) {
    .zb2b-tabela thead { display: none; }
    .zb2b-tabela tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px;
        padding: 12px 0; border-bottom: 1px solid var(--zpp-line-2); }
    .zb2b-tabela td { border: 0; padding: 0; }
    .zb2b-tabela .zb2b-akcja { grid-column: 2; grid-row: 1 / span 4; align-self: center;
        flex-direction: column; align-items: stretch; }
    /* Wiersz rozwiniecia ma jedna komorke na calą szerokosc — w siatce
       musi ja przejac, inaczej wpada do kolumny akcji. */
    .zb2b-tabela tr.zb2b-szczegoly { display: block; padding-top: 0; }
    .zb2b-tabela tr.zb2b-szczegoly td { display: block; }
}

/* Listy zakupowe i rozmowa firmy ze sklepem */
.zb2b-zapisz-liste { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.zb2b-zapisz-liste input[type=text] { flex: 1; min-width: 200px; }
.zb2b-rozmowa { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.zb2b-rozmowa li { background: var(--zpp-sunk); border-radius: var(--zpp-r-sm); padding: 9px 12px; font-size: 14px; }
.zb2b-rozmowa li.od-sklepu { background: var(--zpp-info-bg); }
.zb2b-rozmowa li .zb2b-drobne { display: block; margin-bottom: 2px; }
.zb2b-napisz { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.zb2b-napisz input[type=text], .zb2b-napisz textarea { width: 100%; box-sizing: border-box; }
.zb2b-napisz > .button { align-self: flex-start; }

/* Zgloszenia: lista spraw i widok jednej sprawy. */
.zb2b-wroc { margin: 0 0 8px; font-size: 13px; }
.zb2b-wroc a { color: var(--zpp-ink-3); text-decoration: none; }
.zb2b-wroc a:hover { color: var(--zoopet-accent, var(--zpp-info)); text-decoration: underline; }
.zb2b-stan-zgloszenia { margin: 10px 0 0; }

/* Dostep do konta: dopisywanie kolegow i zawieszone konta. */
.zb2b-dodaj-konto { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 6px; }
.zb2b-dodaj-konto input[type=email] { flex: 2 1 220px; }
.zb2b-dodaj-konto input[type=text] { flex: 2 1 180px; }
.zb2b-dodaj-konto select { flex: 1 1 140px; }
.zb2b-dodaj-konto .button { margin: 0; }
.zb2b-konta li.zb2b-zawieszone { opacity: .62; }
.zb2b-konta li.zb2b-zawieszone .zb2b-inicjaly { filter: grayscale(1); }
.zb2b-konto-kto .zb2b-status { display: inline-block; margin-top: 3px; }
.zb2b-zgl-glowa { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 0 0 12px; }
.zb2b-zgl-glowa h3 { margin: 0; }
.zb2b-status.zb2b-otwarte { background: var(--zpp-info-bg); color: var(--zpp-info); }
.zb2b-status.zb2b-zamkniete { background: var(--zpp-sunk-2); color: var(--zpp-ink-3); }
.zb2b-napisz textarea { width: 100%; font: inherit; font-size: 14px; }
/* Motyw nie narzuca border-box polom formularzy, wiec szerokosc 100%
   powiekszala sie o padding i pole wychodzilo poza kafel sekcji. */
.zb2b input, .zb2b textarea, .zb2b select { box-sizing: border-box; max-width: 100%; }
/* Dwa przyciski obok siebie w akapicie nachodzily na siebie przy zawijaniu:
   motyw daje im wlasna wysokosc linii, a <p> jej nie respektuje. */
.zb2b-przyciski { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; align-items: center; }
.zb2b-przyciski .button { margin: 0; }

/* Rozwijane szczegoly: co jest na liscie, co w wycenie. Wiersz szczegolow
   siedzi pod swoim wierszem tabeli, wiec dostaje wcieciu i tlo — inaczej
   czyta sie jak kolejna pozycja listy, a nie jak jej rozwiniecie. */
.zb2b-tabela tr.zb2b-szczegoly td { border-bottom: 1px solid var(--zpp-line-2); padding-top: 0; }
.zb2b-pozycje { margin: 2px 0 0; }
.zb2b-pozycje > summary { cursor: pointer; font-size: 12px; font-weight: 600;
    color: var(--zoopet-accent, var(--zpp-info)); list-style: none; display: inline-flex;
    align-items: center; gap: 5px; padding: 3px 0; }
.zb2b-pozycje > summary::-webkit-details-marker { display: none; }
.zb2b-pozycje > summary::before { content: "▸"; font-size: 10px; transition: transform .12s ease; }
.zb2b-pozycje[open] > summary::before { transform: rotate(90deg); }
.zb2b-pozycje ul { margin: 6px 0 4px; padding: 10px 12px; list-style: none;
    background: var(--zpp-sunk); border-radius: var(--zpp-r-xs); font-size: 13px; }
.zb2b-pozycje li { margin: 0; padding: 4px 0; border-bottom: 1px solid var(--zpp-line-2); }
.zb2b-pozycje li:last-child { border-bottom: 0; }
.zb2b-odpowiedz { margin: 0 0 10px; padding: 10px 12px; background: var(--zpp-sunk);
    border-left: 3px solid var(--zoopet-accent, var(--zpp-info)); border-radius: var(--zpp-r-xs); }
.zb2b-odpowiedz .zb2b-drobne { display: block; margin-bottom: 2px; }

/* Progi bonusowe — jeden pod drugim, kazdy z wlasnym paskiem. */
.zb2b-prog { padding: 10px 0; border-bottom: 1px solid var(--zpp-line); }
.zb2b-prog:last-of-type { border-bottom: 0; }
.zb2b-prog-glowa { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin: 0 0 6px; }
.zb2b-prog-glowa .zb2b-drobne { margin-left: auto; }
.zb2b-prog p { margin: 6px 0 0; }
.zb2b-akcja form { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.zb2b-subkonto { margin: 0 0 0 auto; }
.zb2b-subkonto select { font-size: 12px; padding: 2px 4px; }


/* ============================================
   PULPIT FIRMY B2B — trzy wyglądy (B2B › Wygląd)
   Karta partnera, sprawy do załatwienia, biurko zakupowca.
   Powierzchnie i tekst na tokenach panelu (presety i tryb ciemny
   działają same); kolor akcentu z panelu albo z ustawienia wyglądu.
   ============================================ */
.zbp { --zbp-a: var(--zoopet-accent, var(--zpp-accent, #6366f1));
    --zbp-a-ink: color-mix(in oklab, var(--zbp-a) 78%, #000);
    --zbp-a-soft: color-mix(in oklab, var(--zbp-a) 10%, var(--zpp-surface, #fff));
    --zbp-a-line: color-mix(in oklab, var(--zbp-a) 28%, var(--zpp-surface, #fff));
    --zbp-ease: cubic-bezier(.16, 1, .3, 1);
    display: flex; flex-direction: column; gap: 20px; font-variant-numeric: tabular-nums; }
.zbp h3 { margin: 0; font-size: 16px; font-family: var(--zpp-font-display); color: var(--zpp-ink); letter-spacing: -.01em; }
.zbp-i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.zbp-i.bad { color: var(--zpp-risk); }
.zbp-op { color: var(--zpp-ink-3); font-size: 13.5px; margin: 0; }
.zbp-blok { background: var(--zpp-surface); border: 1px solid var(--zpp-line); border-radius: var(--zpp-r-lg);
    box-shadow: var(--zpp-sh-sm); min-width: 0; }
.zbp-blok-h { display: flex; align-items: baseline; gap: 12px; padding: 18px 20px 0; }
.zbp-blok-h a { margin-left: auto; font-size: 13.5px; font-weight: 600; text-decoration: none; color: var(--zbp-a-ink); }

.zbp.zbp .zbp-btn { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--zpp-line); background: var(--zpp-surface);
    color: var(--zpp-ink); border-radius: 10px; padding: 8px 14px; font: inherit; font-weight: 600; font-size: 14px; line-height: 1.2;
    text-decoration: none; cursor: pointer; white-space: nowrap; box-shadow: none; margin: 0;
    transition: border-color .2s, background-color .2s, transform .2s var(--zbp-ease); }
.zbp.zbp .zbp-btn:hover { border-color: var(--zbp-a-line); background: var(--zbp-a-soft); color: var(--zpp-ink); }
.zbp.zbp .zbp-btn:active { transform: scale(.98); }
.zbp.zbp .zbp-btn:focus-visible, .zbp a:focus-visible, .zbp textarea:focus-visible { outline: 2px solid var(--zbp-a); outline-offset: 2px; }
.zbp.zbp .zbp-btn.zbp-gl { background: var(--zbp-a); border-color: var(--zbp-a); color: var(--zpp-on-accent, #fff); }
.zbp.zbp .zbp-btn.zbp-gl:hover { background: var(--zbp-a-ink); border-color: var(--zbp-a-ink); color: var(--zpp-on-accent, #fff); }
.zbp.zbp .zbp-btn[disabled] { opacity: .45; pointer-events: none; }
.zbp.zbp .zbp-btn.zbp-duzy { padding: 12px 18px; font-size: 15px; border-radius: 12px; }
.zbp.zbp .zbp-btn.zbp-btn-ik { padding: 8px 10px; }
.zbp.zbp .zbp-btn.zbp-btn-cichy { font-weight: 500; font-size: 13px; color: var(--zpp-ink-3); }
.zbp form { margin: 0; display: inline-flex; }
/* Motyw i panel podkreślają linki i kolorują każdy przycisk wysyłki —
   w pulpicie przyciski i kafle mają własny wygląd. */
.zbp.zbp a.zbp-akcja, .zbp.zbp a.zbp-akcja *, .zbp.zbp .zbp-btn, .zbp.zbp .zbp-wiecej, .zbp.zbp .zbp-blok-h a, .zbp.zbp .zbp-chipy a, .zbp.zbp .zbp-ik-btn { text-decoration: none; }
.zbp.zbp .zbp-btn:hover { filter: none; }

.zbp-pig { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 650; border-radius: 99px;
    padding: 2px 10px; background: var(--zpp-sunk-2); color: var(--zpp-ink-2); white-space: nowrap; }
.zbp-pig::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.zbp-pig.ok { background: var(--zpp-ok-bg); color: var(--zpp-ok); }
.zbp-pig.warn { background: var(--zpp-warn-bg); color: var(--zpp-warn-ink); }
.zbp-pig.bad { background: var(--zpp-risk-bg); color: var(--zpp-risk); }
.zbp-pig.a { background: var(--zbp-a-soft); color: var(--zbp-a-ink); }
.zbp-av { width: 32px; height: 32px; border-radius: 50%; display: inline-grid; place-items: center; flex: none;
    font-weight: 700; font-size: 11.5px; background: var(--zbp-a-soft); color: var(--zbp-a-ink); }
.zbp-av.zbp-av-sklep { background: var(--zpp-ink); color: var(--zpp-surface); }
.zbp-av.zbp-av-duzy { width: 52px; height: 52px; font-size: 17px; background: var(--zpp-ink); color: var(--zpp-surface); }

/* ── Karta partnera ── */
.zbp-a-top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px; align-items: stretch; }
.zbp-karta-scena { perspective: 1400px; min-width: 0; }
.zbp-karta { position: relative; aspect-ratio: 1.586; border-radius: 22px; color: #fff; overflow: hidden; padding: 26px 28px;
    display: flex; flex-direction: column; background-color: var(--zbp-a);
    background-image: radial-gradient(120% 90% at var(--mx, 70%) var(--my, 0%), rgba(255, 255, 255, .2), transparent 55%),
        linear-gradient(140deg, color-mix(in oklab, var(--zbp-a) 82%, #0b1220) 0%, color-mix(in oklab, var(--zbp-a) 62%, #06101f) 58%, color-mix(in oklab, var(--zbp-a) 28%, #040912) 100%);
    box-shadow: 0 2px 4px rgba(6, 16, 31, .12), 0 30px 60px -30px rgba(6, 16, 31, .55);
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--zbp-ease); }
.zbp-karta.zbp-tknieta { transition: transform .08s linear; }
.zbp-karta > * { position: relative; }
.zbp-karta .zbp-gil { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .16; pointer-events: none; }
.zbp-k-gora { display: flex; align-items: flex-start; gap: 14px; }
.zbp-k-sklep { font-weight: 750; font-size: 15px; display: flex; align-items: center; gap: 9px; min-width: 0; }
.zbp-k-sklep img { width: 24px; height: 24px; border-radius: 7px; background: #fff; }
.zbp-k-grupa { margin-left: auto; text-align: right; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: rgba(255, 255, 255, .86); }
.zbp-k-grupa b { display: block; font-size: 20px; letter-spacing: .06em; color: #fff; margin-top: 2px; }
.zbp-k-chip { width: 46px; height: 34px; margin-top: 16px; }
.zbp-k-limit { margin-top: auto; }
.zbp-k-l { font-size: 13px; color: rgba(255, 255, 255, .8); }
.zbp-k-v { font-size: clamp(30px, 4.2vw, 48px); font-weight: 760; letter-spacing: -.035em; line-height: 1.05; margin-top: 2px; font-family: var(--zpp-font-display); color: #fff; }
.zbp-k-v .woocommerce-Price-currencySymbol { font-size: .42em; font-weight: 650; letter-spacing: 0; margin-left: 4px; opacity: .85; }
.zbp-k-v.zbp-k-v-maly { font-size: 26px; }
.zbp-k-pas { height: 6px; border-radius: 9px; background: rgba(255, 255, 255, .22); margin: 14px 0 8px; overflow: hidden; }
.zbp-k-pas i { display: block; height: 100%; width: var(--p); border-radius: 9px; background: #fff; transform-origin: left; }
.zbp-k-pod { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: rgba(255, 255, 255, .82); }
.zbp-k-dol { display: flex; gap: 26px; margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .2); font-size: 12.5px; color: rgba(255, 255, 255, .74); }
.zbp-k-dol b { display: block; color: #fff; font-size: 14px; font-weight: 650; margin-top: 1px; }
.zbp-k-dol div:first-child { flex: 1; min-width: 0; }
.zbp-k-dol div:first-child b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.zbp-a-bok { display: grid; grid-template-rows: auto 1fr; gap: 20px; min-width: 0; }
.zbp-dozap { padding: 20px; }
.zbp-dozap-gl { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.zbp-dozap-gl strong { font-size: 30px; letter-spacing: -.03em; font-weight: 760; color: var(--zpp-ink); font-family: var(--zpp-font-display); }
.zbp-fv { list-style: none; margin: 14px 0 0; padding: 0; }
.zbp-fv li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--zpp-line-2); font-size: 14px; color: var(--zpp-ink-2); margin: 0; }
.zbp-fv-t { flex: 1; min-width: 0; color: var(--zpp-ink); }
.zbp-fv-t small { display: block; color: var(--zpp-ink-3); font-size: 12.5px; }
.zbp-fv-t small.bad { color: var(--zpp-risk); font-weight: 600; }
.zbp-fv-t small.warn { color: var(--zpp-warn-ink); font-weight: 600; }
.zbp-fv-k { font-weight: 650; color: var(--zpp-ink); white-space: nowrap; }
.zbp-wiecej { display: inline-block; margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--zbp-a-ink); text-decoration: none; }

.zbp-opk { display: flex; gap: 14px; align-items: center; padding: 18px 20px; }
.zbp-opk-t { flex: 1; min-width: 0; }
.zbp-opk-t b { display: block; font-size: 15.5px; color: var(--zpp-ink); }
.zbp-opk-t span { color: var(--zpp-ink-3); font-size: 13px; }
.zbp-opk-ak { display: flex; gap: 6px; }
.zbp-ik-btn { width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--zpp-line); display: grid; place-items: center;
    color: var(--zpp-ink-2); background: var(--zpp-surface); transition: border-color .2s, background-color .2s, color .2s; }
.zbp-ik-btn:hover { border-color: var(--zbp-a-line); color: var(--zbp-a-ink); background: var(--zbp-a-soft); }
.zbp-opk-maly { flex-wrap: wrap; }
.zbp-opk-maly .zbp-av-duzy { width: 44px; height: 44px; font-size: 15px; }

.zbp-tor { padding: 20px 22px 24px; }
.zbp-tor-h { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.zbp-tor-brak { margin-left: auto; font-size: 14px; color: var(--zpp-ink-2); }
.zbp-tor-brak b { color: var(--zpp-ink); }
.zbp-tor-linia { position: relative; height: 92px; margin: 14px 8px 0; }
.zbp-szyna, .zbp-jazda { position: absolute; left: 0; top: 16px; height: 10px; border-radius: 99px; }
.zbp-szyna { right: 0; background: var(--zpp-sunk-2); }
.zbp-jazda { width: var(--p); background: linear-gradient(90deg, color-mix(in oklab, var(--zbp-a) 50%, var(--zpp-surface, #fff)), var(--zbp-a)); transform-origin: left; }
.zbp-prog { position: absolute; top: 0; transform: translateX(-50%); text-align: center; font-size: 12px; color: var(--zpp-ink-3); width: 150px; z-index: 1; line-height: 1.35; }
.zbp-prog.ostatni { transform: translateX(-100%); text-align: right; }
.zbp-prog i { display: block; width: 16px; height: 16px; border-radius: 50%; margin: 13px auto 8px; background: var(--zpp-surface); border: 3px solid var(--zpp-line); }
.zbp-prog.ostatni i { margin-right: -8px; }
.zbp-prog.zdobyty i { border-color: var(--zbp-a-ink); }
.zbp-prog b { display: block; color: var(--zpp-ink); font-size: 12.5px; }
.zbp-ty { position: absolute; z-index: 2; top: 4px; left: var(--p); transform: translateX(-50%); width: 34px; height: 34px; border-radius: 50%;
    background: var(--zpp-surface); border: 3px solid var(--zbp-a); display: grid; place-items: center; color: var(--zbp-a-ink);
    box-shadow: 0 6px 14px -6px rgba(6, 16, 31, .35); }
.zbp-ty .zbp-i { width: 15px; height: 15px; }

.zbp-a-czeka { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
.zbp-a-czeka .zbp-rz { background: var(--zpp-surface); border: 1px solid var(--zpp-line); border-radius: var(--zpp-r-lg); box-shadow: var(--zpp-sh-sm); }
.zbp-wiecej-spraw { margin: -8px 0 0; font-size: 13.5px; color: var(--zpp-ink-3); }

.zbp-akcje { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.zbp-akcja { padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: inherit;
    transition: border-color .2s, transform .3s var(--zbp-ease), box-shadow .3s; }
a.zbp-akcja:hover { border-color: var(--zbp-a-line); transform: translateY(-2px); box-shadow: 0 1px 2px rgba(15, 27, 45, .05), 0 18px 34px -18px rgba(15, 27, 45, .26); }
.zbp-akcja-gl { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15.5px; color: var(--zpp-ink); }
.zbp-akcja-gl .zbp-i { color: var(--zbp-a-ink); }
.zbp-akcja-gl .zbp-str { margin-left: auto; color: var(--zpp-ink-4); transition: transform .3s var(--zbp-ease); }
a.zbp-akcja:hover .zbp-str { transform: translateX(3px); color: var(--zbp-a-ink); }
.zbp-pre { white-space: pre; font: 12.5px/1.65 ui-monospace, "Cascadia Mono", Consolas, monospace; color: var(--zpp-ink-2);
    background: var(--zpp-sunk); border-radius: 9px; padding: 9px 12px; border: 1px dashed var(--zpp-line); }
.zbp-chipy { display: flex; flex-wrap: wrap; gap: 6px; }
.zbp-chipy > * { border: 1px solid var(--zpp-line); border-radius: 99px; padding: 3px 10px; font-size: 13px; color: var(--zpp-ink-2); text-decoration: none; }
.zbp-chipy a:hover { border-color: var(--zbp-a-line); color: var(--zbp-a-ink); }
.zbp-chipy b { color: var(--zpp-ink); font-weight: 650; }

/* ── Sprawy (wiersze kolejki) ── */
.zbp-rz { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "ik t kw" "ik ak ak"; gap: 10px 16px; padding: 18px 20px; align-items: start; }
.zbp-rz-ik { grid-area: ik; }
.zbp-rz-t { grid-area: t; }
.zbp-rz-p { display: contents; }
.zbp-rz-p > .zbp-rz-kw, .zbp-rz-p > .zbp-pig { grid-area: kw; justify-self: end; }
.zbp-kolejka .zbp-rz { border-top: 1px solid var(--zpp-line-2); }
.zbp-rz-ik { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--zbp-a-soft); color: var(--zbp-a-ink); }
.zbp-rz-ik.bad { background: var(--zpp-risk-bg); color: var(--zpp-risk); }
.zbp-rz-ik.warn { background: var(--zpp-warn-bg); color: var(--zpp-warn-ink); }
.zbp-rz-t b { font-size: 15px; display: block; color: var(--zpp-ink); line-height: 1.35; }
.zbp-rz-t p { margin: 3px 0 0; color: var(--zpp-ink-3); font-size: 13.5px; }
.zbp-rz-kw { font-weight: 750; font-size: 16px; color: var(--zpp-ink); white-space: nowrap; }
.zbp-rz-ak { grid-area: ak; display: flex; gap: 8px; flex-wrap: wrap; }

/* ── Wyciąg (pas liczb) ── */
.zbp-wyciag { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); background: var(--zpp-surface);
    border: 1px solid var(--zpp-line); border-radius: var(--zpp-r-lg); box-shadow: var(--zpp-sh-sm); overflow: hidden; }
.zbp-wyciag > div { padding: 18px 22px; border-left: 1px solid var(--zpp-line-2); display: flex; flex-direction: column; min-width: 0; }
.zbp-wyciag > div:first-child { border-left: 0; background: linear-gradient(180deg, var(--zbp-a-soft), var(--zpp-surface)); }
.zbp-w-l { font-size: 13px; color: var(--zpp-ink-3); }
.zbp-w-v { font-size: 25px; font-weight: 760; letter-spacing: -.03em; margin-top: 2px; color: var(--zpp-ink); font-family: var(--zpp-font-display); }
.zbp-w-d { font-size: 12.5px; color: var(--zpp-ink-3); margin-top: 2px; }
.zbp-w-d.bad { color: var(--zpp-risk); font-weight: 600; }
.zbp-w-mini { display: block; height: 5px; border-radius: 9px; background: color-mix(in oklab, var(--zbp-a) 16%, var(--zpp-surface, #fff)); margin-top: 10px; overflow: hidden; }
.zbp-w-mini i { display: block; height: 100%; width: var(--p); background: var(--zbp-a); border-radius: 9px; transform-origin: left; }

.zbp-b-siatka { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
.zbp-b-bok { display: grid; gap: 20px; min-width: 0; }
.zbp-kolejka-h { display: flex; align-items: baseline; gap: 12px; padding: 20px 22px 8px; flex-wrap: wrap; }
.zbp-kolejka-h h3 { font-size: 19px; letter-spacing: -.02em; }
.zbp-pusto { padding: 36px 22px 40px; text-align: center; border-top: 1px solid var(--zpp-line-2); }
.zbp-pusto-ik { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 14px; background: var(--zpp-ok-bg); color: var(--zpp-ok); display: grid; place-items: center; }
.zbp-pusto-ik .zbp-i { width: 30px; height: 30px; }
.zbp-pusto h4 { margin: 0; font-size: 18px; color: var(--zpp-ink); }
.zbp-pusto p { margin: 6px auto 18px; color: var(--zpp-ink-3); max-width: 44ch; }
.zbp-bonus-pas { display: flex; align-items: flex-start; gap: 14px; padding: 16px 22px; border-top: 1px solid var(--zpp-line-2);
    background: linear-gradient(90deg, var(--zbp-a-soft), var(--zpp-surface) 70%); border-radius: 0 0 var(--zpp-r-lg) var(--zpp-r-lg); font-size: 14px; color: var(--zpp-ink-2); }
.zbp-bonus-pas > div { flex: 1; }
.zbp-bonus-pas b { color: var(--zpp-ink); }
.zbp-bonus-pas > .zbp-i { color: var(--zbp-a-ink); width: 22px; height: 22px; }

.zbp-os { padding: 18px 20px 6px; }
.zbp-os h3 { margin-bottom: 12px; }
.zbp-os ol { list-style: none; margin: 0; padding: 0; position: relative; }
.zbp-os ol::before { content: ""; position: absolute; left: 15px; top: 8px; bottom: 18px; width: 2px; background: var(--zpp-line-2); }
.zbp-os li { display: grid; grid-template-columns: 32px 1fr; gap: 12px; padding: 0 0 16px; position: relative; font-size: 14px; color: var(--zpp-ink-2); margin: 0; }
.zbp-os li .zbp-av { box-shadow: 0 0 0 3px var(--zpp-surface); }
.zbp-os li b { color: var(--zpp-ink); font-weight: 650; }
.zbp-os li small { display: block; color: var(--zpp-ink-3); font-size: 12.5px; }

/* ── Biurko ── */
.zbp-c-siatka { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.zbp-c-bok { display: grid; gap: 20px; min-width: 0; }
.zbp-biurko { padding: 22px; }
.zbp-biurko h3 { font-size: 21px; letter-spacing: -.02em; }
.zbp-biurko > .zbp-op { margin-top: 4px; }
.zbp-wklej { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px; margin-top: 16px; }
.zbp-wklej label .zbp-op, .zbp-wklej [data-zbp-traf-op] { display: block; margin: 0 0 6px; }
.zbp-wklej textarea { width: 100%; box-sizing: border-box; min-height: 280px; resize: vertical; border: 1.5px solid var(--zpp-line); border-radius: 12px;
    padding: 14px 16px; font: 14px/1.75 ui-monospace, "Cascadia Mono", Consolas, monospace; color: var(--zpp-ink); background: var(--zpp-sunk);
    caret-color: var(--zbp-a); transition: border-color .2s, background-color .2s, box-shadow .2s; }
.zbp-wklej textarea:focus { outline: 0; border-color: var(--zbp-a); background: var(--zpp-surface); box-shadow: 0 0 0 4px color-mix(in oklab, var(--zbp-a) 14%, transparent); }
.zbp-traf { border: 1px solid var(--zpp-line); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; background: var(--zpp-surface); }
.zbp-traf ul { list-style: none; margin: 0; padding: 0; max-height: 280px; overflow: auto; flex: 1; }
.zbp-traf li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 12px;
    border-bottom: 1px solid var(--zpp-line-2); font-size: 13.5px; color: var(--zpp-ink-2); margin: 0; }
.zbp-traf li.zbp-traf-pusto { display: block; padding: 38px 20px; text-align: center; color: var(--zpp-ink-3); border: 0; }
.zbp-mn { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-size: 11px; font-weight: 750;
    color: var(--zbp-a-ink); background: var(--zbp-a-soft); overflow: hidden; }
.zbp-mn img { width: 100%; height: 100%; object-fit: cover; }
.zbp-traf-n { min-width: 0; }
.zbp-traf-n b { display: block; font-weight: 600; color: var(--zpp-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zbp-traf-n small { color: var(--zpp-ink-3); font-size: 12px; }
.zbp-traf-n small.warn { color: var(--zpp-warn-ink); font-weight: 600; }
.zbp-traf-s { text-align: right; font-weight: 650; color: var(--zpp-ink); white-space: nowrap; }
.zbp-traf-s small { display: block; font-weight: 400; color: var(--zpp-ink-3); font-size: 12px; }
.zbp-traf li.zle { background: var(--zpp-risk-bg); }
.zbp-traf li.zle .zbp-mn { background: var(--zpp-risk); color: #fff; }
.zbp-traf li.zle .zbp-traf-n small { color: var(--zpp-risk); font-weight: 600; }
.zbp-traf-st { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--zpp-sunk); border-top: 1px solid var(--zpp-line); flex-wrap: wrap; }
.zbp-traf-suma { font-size: 13px; color: var(--zpp-ink-3); }
.zbp-traf-suma b { display: block; font-size: 18px; color: var(--zpp-ink); letter-spacing: -.02em; }
.zbp-traf-st .zbp-btn { margin-left: auto; }
.zbp-pod-limit { margin-top: 10px; font-size: 13px; color: var(--zpp-ink-3); min-height: 1em; }
.zbp-pod-limit b { color: var(--zpp-ok); }
.zbp-pod-limit a { color: var(--zbp-a-ink); font-weight: 600; }

.zbp-limit-b { padding: 20px; display: flex; flex-direction: column; }
.zbp-limit-pas { display: flex; height: 10px; border-radius: 99px; background: var(--zpp-sunk-2); margin: 12px 0 4px; overflow: hidden; }
.zbp-limit-pas i { display: block; height: 100%; background: var(--zpp-ink); }
.zbp-limit-b dl { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; margin: 12px 0 0; font-size: 14px; }
.zbp-limit-b dt { color: var(--zpp-ink-3); }
.zbp-limit-b dd { margin: 0; text-align: right; font-weight: 650; color: var(--zpp-ink); }
.zbp-limit-b dd.bad { color: var(--zpp-risk); }

.zbp-listy { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.zbp-lista { padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 12px; }
.zbp-lista-gl { display: flex; align-items: baseline; gap: 8px; }
.zbp-lista-gl b { font-size: 15.5px; color: var(--zpp-ink); }
.zbp-lista-gl span { margin-left: auto; color: var(--zpp-ink-3); font-size: 12.5px; white-space: nowrap; }
.zbp-stos { display: flex; }
.zbp-stos span { width: 42px; height: 42px; border-radius: 11px; border: 3px solid var(--zpp-surface); margin-left: -10px; display: grid; place-items: center;
    font-size: 11px; font-weight: 750; background: var(--zbp-a-soft); color: var(--zbp-a-ink); overflow: hidden; }
.zbp-stos span:first-child { margin-left: 0; }
.zbp-stos img { width: 100%; height: 100%; object-fit: cover; }
.zbp-stos .zbp-stos-wiecej { background: var(--zpp-sunk-2); color: var(--zpp-ink-2); }
.zbp-lista-ak { display: flex; gap: 8px; margin-top: auto; }
.zbp-lista-ak > * { flex: 1; }
.zbp-lista-ak .zbp-btn { width: 100%; justify-content: center; }

/* ── Tabela zamówień ── */
.zbp-tab { width: 100%; border-collapse: collapse; font-size: 14px; margin: 0; }
.zbp-tab th { text-align: left; font-weight: 600; color: var(--zpp-ink-3); font-size: 12.5px; padding: 14px 20px 8px; border-bottom: 1px solid var(--zpp-line); text-transform: none; letter-spacing: 0; }
.zbp-tab td { padding: 12px 20px; border-bottom: 1px solid var(--zpp-line-2); vertical-align: middle; color: var(--zpp-ink-2); }
.zbp-tab tr:last-child td { border-bottom: 0; }
.zbp-tab .r { text-align: right; }
.zbp-nr { font-weight: 650; color: var(--zpp-ink); white-space: nowrap; }
.zbp-nr small { display: block; font-weight: 400; color: var(--zpp-ink-3); font-size: 12.5px; }
.zbp-kto { display: flex; align-items: center; gap: 10px; }
.zbp-kto .zbp-av { width: 28px; height: 28px; font-size: 11px; }
.zbp-kw { font-weight: 650; color: var(--zpp-ink); white-space: nowrap; }
.zbp-akc { white-space: nowrap; }
.zbp-akc > * + * { margin-left: 6px; }

/* ── Wejście: jeden moment, nie efekt na wszystkim ── */
@keyframes zbp-wypelnij { from { transform: scaleX(0); } }
@keyframes zbp-wejscie { from { opacity: 0; transform: translateY(16px) rotateX(8deg); } }
@keyframes zbp-pojaw { from { opacity: 0; transform: translateX(-50%) scale(.6); } }
.zbp-ruch .zbp-karta { animation: zbp-wejscie .9s var(--zbp-ease) both; }
.zbp-ruch .zbp-karta.zbp-tknieta { animation: none; }
.zbp-ruch .zbp-k-pas i, .zbp-ruch .zbp-jazda, .zbp-ruch .zbp-w-mini i { animation: zbp-wypelnij 1.4s .25s var(--zbp-ease) both; }
.zbp-ruch .zbp-ty { animation: zbp-pojaw .6s 1.3s var(--zbp-ease) both; }
@media (prefers-reduced-motion: reduce) {
    .zbp *, .zbp *::before { animation: none !important; transition: none !important; }
}

@media (max-width: 1000px) {
    .zbp-a-top, .zbp-b-siatka, .zbp-c-siatka { grid-template-columns: minmax(0, 1fr); }
    .zbp-wklej { grid-template-columns: minmax(0, 1fr); }
    .zbp-wklej textarea { min-height: 170px; }
}
@media (max-width: 640px) {
    .zbp-karta { aspect-ratio: auto; min-height: 250px; padding: 18px 20px; border-radius: 18px; }
    .zbp-k-chip, .zbp-k-od { display: none; }
    .zbp-k-grupa b { font-size: 16px; }
    .zbp-k-dol { gap: 16px; }
    .zbp-a-czeka { grid-template-columns: minmax(0, 1fr); }
    .zbp-fv li { flex-wrap: wrap; }
    .zbp-fv-t { flex-basis: calc(100% - 40px); }
    .zbp-fv-k { margin-left: 30px; margin-right: auto; }
    .zbp-tor-brak { margin-left: 0; width: 100%; }
    .zbp-prog { width: 96px; font-size: 11px; }
    .zbp-prog:not(.ostatni):not(.zdobyty) { display: none; }
    .zbp-rz { grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "ik t" "ik kw" "ak ak"; padding: 16px; }
    .zbp-rz-p > .zbp-rz-kw, .zbp-rz-p > .zbp-pig { justify-self: start; }
    .zbp-tab thead { display: none; }
    .zbp-tab tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 16px; border-bottom: 1px solid var(--zpp-line-2); }
    .zbp-tab td { padding: 0; border: 0; }
    .zbp-tab .zbp-akc { grid-column: 1 / -1; text-align: left; }
    .zbp-traf-st .zbp-btn { margin-left: 0; width: 100%; justify-content: center; }
    .zbp-wyciag > div { padding: 14px 16px; }
}

/* ════════ Menu „Mojego konta” dla firmy (body.vs-b2b-konto) ════════
   Ten sam język co pulpit firmy: rysowane ikony liniowe zamiast emoji,
   wizytówka firmy zamiast karty klubu, grupy pozycji rozdzielone kreską,
   aktywna pozycja w kolorze z B2B › Wygląd. Presety panelu klubowego
   stylują menu przez body.zoopet-style-* (0,2,3), a układ standardowy
   wymusza padding i kolor przez !important — stąd podwójna klasa body
   i !important w obrębie tego bloku. */
body.vs-b2b-konto { --vsb-n-a: var(--zoopet-accent, var(--zpp-accent, #6366f1)); }
body.vs-b2b-konto .zoopet-menu-header { display: none !important; }
/* Woodmart: kafelki z pozycjami menu pod pulpitem (opcja „Dashboard icons menu”).
   Filtr woodmart_option gasi je w PHP; to zabezpieczenie na inne drogi motywu. */
.woocommerce-account .woocommerce-MyAccount-content .wd-my-account-links { display: none !important; }

.vsb-nav-firma { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; padding: 14px;
    background: var(--zpp-surface, #fff); border: 1px solid var(--zpp-line, #e5e7eb); border-radius: var(--zpp-r-lg, 16px);
    color: var(--zpp-ink, #111827) !important; text-decoration: none !important; min-width: 0;
    transition: border-color .15s; }
.vsb-nav-firma:hover { border-color: color-mix(in oklab, var(--vsb-n-a) 30%, var(--zpp-line, #e5e7eb)); }
.vsb-nav-firma:focus-visible { outline: 2px solid var(--vsb-n-a); outline-offset: 2px; }
.vsb-nav-firma > span:last-child { min-width: 0; }
.vsb-nav-mono { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px;
    font-weight: 750; font-size: 15px; letter-spacing: .02em; line-height: 1;
    background: color-mix(in oklab, var(--vsb-n-a) 12%, var(--zpp-surface, #fff));
    color: color-mix(in oklab, var(--vsb-n-a) 78%, #000) !important; }
.vsb-nav-firma b { display: block; font-family: var(--zpp-font-display, inherit); font-size: 15px; font-weight: 700;
    line-height: 1.25; letter-spacing: -.01em; overflow-wrap: anywhere; color: var(--zpp-ink, #111827) !important; }
.vsb-nav-firma small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.35; color: var(--zpp-ink-3, #6b7280) !important; }
.vsb-nav-firma small.vsb-nav-czeka { color: var(--zpp-warn-ink, #8a5a00) !important; }
.zfs-brand.zfs-brand-firma { padding: 14px 12px; }
.zfs-brand.zfs-brand-firma .vsb-nav-firma { margin: 0; border: 0; padding: 4px; background: none; }
body.vs-b2b-konto.vs-b2b-konto.vs-b2b-konto .woocommerce-MyAccount-navigation { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
body.vs-b2b-konto.vs-b2b-konto.vs-b2b-konto .woocommerce-MyAccount-navigation ul { list-style: none; display: block; margin: 0 !important; padding: 6px !important;
    background: var(--zpp-surface, #fff) !important; border: 1px solid var(--zpp-line, #e5e7eb) !important;
    border-radius: var(--zpp-r-lg, 16px) !important; box-shadow: none !important; }
body.vs-b2b-konto.vs-b2b-konto.vs-b2b-konto .zfs-nav .woocommerce-MyAccount-navigation ul { border: 0 !important; background: none !important; }
body.vs-b2b-konto.vs-b2b-konto.vs-b2b-konto .woocommerce-MyAccount-navigation ul li { margin: 0 !important; padding: 0 !important; float: none; width: auto; border: 0 !important;
    border-radius: 10px; background: none !important; overflow: visible; }
body.vs-b2b-konto.vs-b2b-konto.vs-b2b-konto .woocommerce-MyAccount-navigation ul li.vsb-nav-od { margin-top: 7px !important; padding-top: 7px !important; border-radius: 0;
    border-top: 1px solid var(--zpp-line-2, #eef1f5) !important; }
body.vs-b2b-konto.vs-b2b-konto.vs-b2b-konto .woocommerce-MyAccount-navigation ul li a { display: flex !important; align-items: center; gap: 11px; padding: 9px 12px !important; border: 0 !important;
    border-radius: 10px; background: none !important; box-shadow: none !important;
    font-size: 14.5px !important; font-weight: 550 !important; line-height: 1.3; letter-spacing: 0;
    color: var(--zpp-ink-2, #374151) !important; text-decoration: none !important;
    transition: background-color .15s ease-out, color .15s ease-out; }
body.vs-b2b-konto.vs-b2b-konto.vs-b2b-konto .woocommerce-MyAccount-navigation ul li a::before { content: ""; flex: none; width: 18px; height: 18px; display: block;
    background: currentColor; opacity: .62; transition: opacity .15s ease-out;
    -webkit-mask: var(--vsb-ik, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E")) center / contain no-repeat;
    mask: var(--vsb-ik, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E")) center / contain no-repeat; }
body.vs-b2b-konto.vs-b2b-konto.vs-b2b-konto .woocommerce-MyAccount-navigation ul li a::after { content: none !important; display: none !important; }
body.vs-b2b-konto.vs-b2b-konto.vs-b2b-konto .woocommerce-MyAccount-navigation ul li a:hover { background: var(--zpp-sunk, #f3f5f8) !important; color: var(--zpp-ink, #111827) !important; }
body.vs-b2b-konto.vs-b2b-konto.vs-b2b-konto .woocommerce-MyAccount-navigation ul li a:hover::before { opacity: .9; }
body.vs-b2b-konto.vs-b2b-konto.vs-b2b-konto .woocommerce-MyAccount-navigation ul li a:focus-visible { outline: 2px solid var(--vsb-n-a); outline-offset: 1px; }
body.vs-b2b-konto.vs-b2b-konto.vs-b2b-konto .woocommerce-MyAccount-navigation ul li.is-active a { background: color-mix(in oklab, var(--vsb-n-a) 10%, var(--zpp-surface, #fff)) !important;
    color: color-mix(in oklab, var(--vsb-n-a) 80%, #000) !important; font-weight: 650 !important; }
body.vs-b2b-konto.vs-b2b-konto.vs-b2b-konto .woocommerce-MyAccount-navigation ul li.is-active a::before { opacity: 1; }
body.vs-b2b-konto.vs-b2b-konto.vs-b2b-konto .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--zpp-ink-3, #6b7280) !important; }
body.vs-b2b-konto.vs-b2b-konto.vs-b2b-konto .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--zoopet-dashboard { --vsb-ik: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V5a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1v16M15 9h4a1 1 0 0 1 1 1v11M3 21h18M8 8h3M8 12h3M8 16h3'/%3E%3C/svg%3E"); }
body.vs-b2b-konto.vs-b2b-konto.vs-b2b-konto .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--orders { --vsb-ik: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 7.5 12 3l8.5 4.5v9L12 21l-8.5-4.5z'/%3E%3Cpath d='M3.5 7.5 12 12l8.5-4.5M12 12v9'/%3E%3C/svg%3E"); }
body.vs-b2b-konto.vs-b2b-konto.vs-b2b-konto .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--zoopet-firma--zamawianie { --vsb-ik: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 3 5 13.5h6L10 21l9-11h-6z'/%3E%3C/svg%3E"); }
body.vs-b2b-konto.vs-b2b-konto.vs-b2b-konto .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--zoopet-ponow { --vsb-ik: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12a8 8 0 0 1 13.7-5.6L20 8.5M20 4v4.5h-4.5M20 12a8 8 0 0 1-13.7 5.6L4 15.5M4 20v-4.5h4.5'/%3E%3C/svg%3E"); }
body.vs-b2b-konto.vs-b2b-konto.vs-b2b-konto .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--zoopet-firma--wyceny { --vsb-ik: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12V4h8l9.5 9.5-8 8z'/%3E%3Ccircle cx='7.5' cy='8.5' r='1.3'/%3E%3C/svg%3E"); }
body.vs-b2b-konto.vs-b2b-konto.vs-b2b-konto .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--zoopet-firma--listy { --vsb-ik: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6h11M9 12h11M9 18h11'/%3E%3Cpath d='m3.5 6 1.2 1.2L7 5M3.5 12l1.2 1.2L7 11M3.5 18l1.2 1.2L7 17'/%3E%3C/svg%3E"); }
body.vs-b2b-konto.vs-b2b-konto.vs-b2b-konto .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--wishlist { --vsb-ik: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7.5-4.6-7.5-10A4.5 4.5 0 0 1 12 7.3 4.5 4.5 0 0 1 19.5 10c0 5.4-7.5 10-7.5 10z'/%3E%3C/svg%3E"); }
body.vs-b2b-konto.vs-b2b-konto.vs-b2b-konto .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--zoopet-firma--bonusy { --vsb-ik: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='9' rx='1'/%3E%3Cpath d='M3 7.5h18V11H3zM12 7.5V20M12 7.5c-1.2-2.7-3-3.8-4.3-3.2-1.3.7-.3 3.2 4.3 3.2zm0 0c1.2-2.7 3-3.8 4.3-3.2 1.3.7.3 3.2-4.3 3.2z'/%3E%3C/svg%3E"); }
body.vs-b2b-konto.vs-b2b-konto.vs-b2b-konto .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--zoopet-firma--wiadomosci { --vsb-ik: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 15a2 2 0 0 1-2 2H8l-4 4V6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); }
body.vs-b2b-konto.vs-b2b-konto.vs-b2b-konto .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--zoopet-firma--dostepy { --vsb-ik: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20c.6-3.4 3.2-5.5 6.5-5.5s5.9 2.1 6.5 5.5M16 4.6a3.5 3.5 0 0 1 0 6.8M18.5 14.8c1.7.8 2.7 2.5 3 5.2'/%3E%3C/svg%3E"); }
body.vs-b2b-konto.vs-b2b-konto.vs-b2b-konto .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--zoopet-firma--dane { --vsb-ik: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h4'/%3E%3C/svg%3E"); }
body.vs-b2b-konto.vs-b2b-konto.vs-b2b-konto .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--edit-address { --vsb-ik: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5A7 7 0 0 1 19 9.5C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E"); }
body.vs-b2b-konto.vs-b2b-konto.vs-b2b-konto .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--edit-account { --vsb-ik: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M4.8 20c.9-3.7 3.7-5.6 7.2-5.6s6.3 1.9 7.2 5.6'/%3E%3C/svg%3E"); }
body.vs-b2b-konto.vs-b2b-konto.vs-b2b-konto .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout { --vsb-ik: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 4h3a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-3M10 16l-4-4 4-4M6 12h10'/%3E%3C/svg%3E"); }
body.vs-b2b-konto.vs-b2b-konto.vs-b2b-konto .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--zoopet-firma { --vsb-ik: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V5a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1v16M15 9h4a1 1 0 0 1 1 1v11M3 21h18M8 8h3M8 12h3M8 16h3'/%3E%3C/svg%3E"); }

/* Telefon: menu jako przewijany pasek zakładek nad treścią — jak w makiecie
   panelu firmy, zamiast długiej listy przed pulpitem. */
@media (max-width: 768px) {
    body.vs-b2b-konto.vs-b2b-konto.vs-b2b-konto .woocommerce-MyAccount-navigation ul { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 4px; overflow-x: auto; scroll-snap-type: x proximity;
        scrollbar-width: none; padding: 5px !important; }
    body.vs-b2b-konto.vs-b2b-konto.vs-b2b-konto .woocommerce-MyAccount-navigation ul::-webkit-scrollbar { display: none; }
    body.vs-b2b-konto.vs-b2b-konto.vs-b2b-konto .woocommerce-MyAccount-navigation ul li { flex: none; scroll-snap-align: start; }
    body.vs-b2b-konto.vs-b2b-konto.vs-b2b-konto .woocommerce-MyAccount-navigation ul li.vsb-nav-od { margin: 0 0 0 4px !important; padding: 0 0 0 4px !important;
        border-top: 0 !important; border-left: 1px solid var(--zpp-line-2, #eef1f5) !important; }
    body.vs-b2b-konto.vs-b2b-konto.vs-b2b-konto .woocommerce-MyAccount-navigation ul li a { white-space: nowrap; padding: 8px 12px !important; font-size: 14px !important; gap: 8px; }
    .vsb-nav-firma { padding: 10px 12px; margin-bottom: 8px; }
    .vsb-nav-mono { width: 36px; height: 36px; border-radius: 10px; font-size: 14px; }
}
/* Siatka konta (account.css, min-width 993px) układa dzieci po kolei w dwie
   kolumny — wizytówka firmy stawała w lewej, menu w prawej, treść pod nimi.
   Dla firmy: wizytówka i menu w lewej kolumnie, treść w prawej na całą wysokość. */
@media (min-width: 993px) {
    body.vs-b2b-konto :is(div, section, main, article):has(> .woocommerce-MyAccount-content):has(.woocommerce-MyAccount-navigation) {
        grid-template-rows: auto 1fr !important; row-gap: 0 !important; }
    body.vs-b2b-konto :is(div, section, main, article):has(> .woocommerce-MyAccount-content):has(.woocommerce-MyAccount-navigation) > :not(.woocommerce-MyAccount-content) {
        grid-column: 1 !important; }
    body.vs-b2b-konto :is(div, section, main, article):has(> .woocommerce-MyAccount-content):has(.woocommerce-MyAccount-navigation) > .woocommerce-MyAccount-content {
        grid-column: 2 !important; grid-row: 1 / span 2 !important; }
}
@media (prefers-reduced-motion: reduce) {
    body.vs-b2b-konto.vs-b2b-konto.vs-b2b-konto .woocommerce-MyAccount-navigation ul li a, body.vs-b2b-konto.vs-b2b-konto.vs-b2b-konto .woocommerce-MyAccount-navigation ul li a::before { transition: none; }
}