/* Podgląd zamówienia — /?pjm_order=ID&t=TOKEN (tylko body.pjm-op-page) */

body.pjm-op-page {
    --pjm-green: #1B5E4B;
    --pjm-green-dark: #14352A;
    --pjm-green-soft: #eef5f1;
    --pjm-gold: #E0A33E;
    --pjm-text: #16241D;
    --pjm-muted: #6b7a72;
    --pjm-border: #e8ece9;
    --pjm-card: #ffffff;
    --pjm-bg: #f4f6f5;
    --pjm-radius: 16px;
    --pjm-radius-sm: 12px;
    --pjm-shadow: 0 10px 34px rgba(0, 0, 0, 0.05);

    margin: 0;
    font-family: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    background: var(--pjm-bg);
    color: var(--pjm-text);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

body.pjm-op-page *,
body.pjm-op-page *::before,
body.pjm-op-page *::after {
    box-sizing: border-box;
}

.pjm-op-sitebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding: 10px 14px;
    background: var(--pjm-card);
    border: 1px solid var(--pjm-border);
    border-radius: var(--pjm-radius-sm);
    box-shadow: var(--pjm-shadow);
    font-size: 13px;
}
.pjm-op-sitebar-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--pjm-green-dark, #14352A);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -0.02em;
}

.pjm-op-sitebar-logo-img {
    height: 28px;
    width: auto;
    max-width: 40px;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(24%) sepia(18%) saturate(1200%) hue-rotate(115deg) brightness(95%) contrast(92%);
}

.pjm-op-sitebar-wordmark strong {
    color: var(--pjm-green, #1B5E4B);
}

.pjm-op-sitebar-logo {
    font-weight: 700;
    color: var(--pjm-green-dark);
    text-decoration: none;
}
.pjm-op-sitebar-nav {
    display: flex;
    gap: 14px;
}
.pjm-op-sitebar-nav a {
    color: var(--pjm-green);
    text-decoration: none;
    font-weight: 600;
}
.pjm-op-sitebar-nav a:hover {
    text-decoration: underline;
}

.pjm-op-cta-actions--split {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}
.pjm-op-cta-actions--split .pjm-op-btn {
    flex: 1 1 200px;
    max-width: 280px;
    text-align: center;
}

.pjm-op-wrap {
    max-width: 720px;
    margin: 0 auto;
    padding: 32px 20px 72px;
}

.pjm-op-wrap--esti .pjm-op-logo,
.pjm-op-wrap--esti .pjm-op-dochead-logo {
    background: #2563eb;
}

.pjm-op-wrap--esti .pjm-op-btn {
    background: #2563eb;
    color: #fff;
}

.pjm-op-wrap--esti .pjm-op-btn:hover {
    background: #1e40af;
    color: #fff;
}

.pjm-op-wrap--esti .pjm-op-btn--ghost {
    background: #fff;
    color: #2563eb;
    border-color: #bfdbfe;
}

.pjm-op-wrap--esti .pjm-op-btn--ghost:hover {
    background: #eff6ff;
    color: #1e40af;
}

.pjm-op-top {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
}

.pjm-op-logo {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--pjm-green);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 17px;
    flex-shrink: 0;
}

.pjm-op-brand {
    font-weight: 800;
    font-size: 18px;
    letter-spacing: -0.02em;
}

.pjm-op-card {
    background: var(--pjm-card);
    border: 1px solid var(--pjm-border);
    border-radius: var(--pjm-radius);
    box-shadow: var(--pjm-shadow);
    padding: 24px 26px;
    margin-bottom: 16px;
}

.pjm-op-card--hero {
    padding-top: 22px;
}

/* —— Nagłówek dokumentu: logo | status + meta —— */

.pjm-op-card--dochead {
    padding: 22px 24px;
}

.pjm-op-dochead {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.pjm-op-dochead-logo {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--pjm-green);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 18px;
    flex-shrink: 0;
    letter-spacing: -0.02em;
}

.pjm-op-dochead-meta {
    flex: 1;
    min-width: 0;
}

.pjm-op-dochead-lines {
    margin-top: 10px;
}

.pjm-op-dochead-line {
    margin: 0;
    padding: 3px 0;
    font-size: 14px;
    color: var(--pjm-muted);
    line-height: 1.45;
}

.pjm-op-dochead-line--primary {
    font-size: 17px;
    color: var(--pjm-text);
    padding-top: 0;
}

.pjm-op-dochead-kind {
    font-weight: 600;
    margin-right: 6px;
}

.pjm-op-dochead-num {
    font-weight: 800;
    letter-spacing: -0.02em;
}

/* —— Zamawiający —— */

.pjm-op-block-title {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--pjm-green-dark);
    margin: 0 0 14px;
}

.pjm-op-card--parties {
    padding-top: 20px;
}

.pjm-op-parties {
    display: grid;
    gap: 14px;
}

.pjm-op-parties--split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pjm-op-party {
    background: var(--pjm-green-soft);
    border: 1px solid var(--pjm-accent-border, #d4e8de);
    border-radius: var(--pjm-radius-sm);
    padding: 16px 18px;
}

.pjm-op-party-title {
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--pjm-green);
}

.pjm-op-party-name {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 700;
    color: var(--pjm-text);
    line-height: 1.35;
}

.pjm-op-party-line {
    margin: 0;
    font-size: 13px;
    color: var(--pjm-muted);
    line-height: 1.5;
}

.pjm-op-party-line a {
    color: var(--pjm-green);
    text-decoration: none;
}

.pjm-op-party-line a:hover {
    text-decoration: underline;
}

.pjm-op-card--order {
    padding-top: 20px;
}

.pjm-op-badge {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.02em;
    color: #fff;
}

.pjm-op-badge.pjm-badge--dynamic {
    background: var(--badge-bg, #1B5E4B);
}

.pjm-op-title {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.03em;
    margin: 14px 0 6px;
    line-height: 1.25;
}

.pjm-op-sub {
    color: var(--pjm-muted);
    font-size: 14px;
    margin: 0;
}

.pjm-op-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #8a978f;
    margin: 0 0 16px;
}

/* —— Order summary (shared HTML from helper) —— */

.pjm-order-summary {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Kompaktowy wiersz pozycji (jak podgląd FV) */
.pjm-os-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px 24px;
    align-items: start;
    padding: 18px 0;
    border-bottom: 1px solid var(--pjm-border);
}

.pjm-os-line-main {
    min-width: 0;
}

.pjm-os-brief {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
}

.pjm-os-brief-item {
    font-size: 13px;
    color: var(--pjm-muted);
    line-height: 1.45;
}

.pjm-os-brief-item--lead {
    color: var(--pjm-green);
    font-weight: 600;
}

.pjm-os-brief-block {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pjm-os-brief-list {
    margin: 2px 0 0;
    padding: 0 0 0 1.1em;
    list-style: disc;
}

.pjm-os-brief-list li {
    font-size: 13px;
    color: var(--pjm-muted);
    line-height: 1.45;
    padding: 1px 0;
}

.pjm-os-staff {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed var(--pjm-border);
}

.pjm-os-staff-label {
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--pjm-green);
}

.pjm-os-staff-person {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 10px;
    padding: 10px 12px;
    background: var(--pjm-green-soft);
    border: 1px solid var(--pjm-accent-border);
    border-radius: 8px;
}

.pjm-os-staff-person:last-child {
    margin-bottom: 0;
}

.pjm-os-staff-role {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--pjm-green);
    background: #fff;
    border: 1px solid var(--pjm-accent-border);
    border-radius: 999px;
    padding: 2px 8px;
    margin-bottom: 4px;
    width: fit-content;
}

.pjm-os-staff-name {
    font-size: 14px;
    color: var(--pjm-text);
}

.pjm-os-staff-pair,
.pjm-os-staff-contact {
    font-size: 13px;
    color: var(--pjm-muted);
}

.pjm-os-staff-pending {
    font-size: 12px;
    color: #92400e;
    font-weight: 600;
}

.pjm-os-price-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 88px 40px 88px;
    gap: 8px 24px;
    align-items: end;
    padding: 0 0 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--pjm-border);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--pjm-muted);
}

.pjm-os-price-head .pjm-os-col {
    text-align: right;
    font-size: 11px;
}

.pjm-os-price-head .pjm-os-col-vat {
    text-align: center;
}

.pjm-os-addons-wrap {
    margin-top: 8px;
}

.pjm-os-addons-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--pjm-muted);
    margin-bottom: 4px;
}

.pjm-os-addons-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pjm-os-addon-item {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    padding: 3px 0;
    color: var(--pjm-text);
}

.pjm-os-addon-price {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pjm-os-item-discount {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 12px;
    color: #15803d;
    margin-top: 6px;
}

.pjm-os-line-prices {
    display: grid;
    grid-template-columns: 88px 40px 88px;
    gap: 8px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.pjm-os-col {
    font-size: 14px;
    color: var(--pjm-text);
}

.pjm-os-col-gross {
    font-weight: 700;
    color: var(--pjm-text);
}

.pjm-os-col-vat {
    font-size: 13px;
    color: var(--pjm-muted);
    text-align: center;
}

.pjm-os-sum {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 88px 40px 88px;
    gap: 8px 24px;
    align-items: center;
    padding: 16px 0 8px;
    border-top: 2px solid var(--pjm-border);
    margin-top: 4px;
}

.pjm-os-sum-label {
    font-weight: 700;
    font-size: 14px;
    color: var(--pjm-text);
}

.pjm-os-sum .pjm-os-col {
    text-align: right;
}

.pjm-os-sum .pjm-os-col-gross {
    font-weight: 800;
}

.pjm-os-discount,
.pjm-os-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: 14px;
}

.pjm-os-total-row {
    font-size: 16px;
    padding-top: 12px;
    border-top: 1px dashed var(--pjm-border);
    margin-top: 4px;
}

.pjm-os-total-row strong {
    font-weight: 800;
    color: var(--pjm-green-dark);
}

.pjm-os-payment-meta {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #eef1ef;
    font-size: 13px;
}

.pjm-os-payment-meta .pjm-os-row {
    grid-template-columns: 1fr auto;
}

@media (max-width: 520px) {
    .pjm-os-line {
        grid-template-columns: 1fr;
    }
    .pjm-os-line-prices,
    .pjm-os-sum {
        grid-template-columns: 1fr 1fr 1fr;
    }
    .pjm-os-sum-label {
        grid-column: 1 / -1;
    }
}

.pjm-os-item {
    border: 1px solid var(--pjm-border);
    border-radius: var(--pjm-radius-sm);
    overflow: hidden;
    background: #fafbfb;
}

.pjm-os-item-head {
    padding: 16px 18px 14px;
    background: #fff;
    border-bottom: 1px solid var(--pjm-border);
}

.pjm-os-type {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--pjm-green);
    background: var(--pjm-green-soft);
    padding: 3px 10px;
    border-radius: 6px;
    margin-bottom: 8px;
}

.pjm-os-title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.35;
    color: var(--pjm-text);
}

.pjm-os-body {
    padding: 4px 18px 12px;
}

.pjm-os-row {
    display: grid;
    grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
    gap: 10px 16px;
    padding: 9px 0;
    border-top: 1px solid #eef1ef;
    font-size: 14px;
    align-items: start;
}

.pjm-os-body .pjm-os-row:first-child {
    border-top: 0;
}

.pjm-os-row .k {
    color: var(--pjm-muted);
    font-size: 13px;
}

.pjm-os-row .v {
    font-weight: 600;
    text-align: right;
    word-break: break-word;
    font-variant-numeric: tabular-nums;
}

.pjm-os-row .v-strong {
    font-weight: 800;
    color: var(--pjm-green-dark);
}

.pjm-os-row--discount .v {
    color: #15803d;
}

.pjm-os-pricing {
    padding: 12px 18px 16px;
    background: #fff;
    border-top: 1px dashed var(--pjm-border);
}

.pjm-os-pricing-label {
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #8a978f;
}

.pjm-os-pricing .pjm-os-row {
    padding: 6px 0;
    border-top: 0;
    font-size: 13px;
}

.pjm-os-pricing .pjm-os-row .k {
    font-size: 13px;
}

/* Footer / podsumowanie */

.pjm-os-footer {
    margin-top: 4px;
    padding: 18px;
    background: #fff;
    border: 1px solid var(--pjm-border);
    border-radius: var(--pjm-radius-sm);
}

.pjm-os-footer-title {
    margin: 0 0 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #8a978f;
}

.pjm-os-footer-rows .pjm-os-row {
    border-top-color: #f0f2f1;
}

.pjm-os-footer-rows .pjm-os-row:first-child {
    border-top: 0;
}

.pjm-os-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin: 14px 0 16px;
    padding: 14px 16px;
    background: var(--pjm-green-soft);
    border-radius: 10px;
    border: 1px solid var(--pjm-accent-border, #d4e8de);
}

.pjm-os-total .k {
    font-size: 14px;
    font-weight: 700;
    color: var(--pjm-green-dark);
}

.pjm-os-total .v {
    font-size: 20px;
    font-weight: 800;
    color: var(--pjm-green);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.pjm-os-payment {
    padding-top: 14px;
    border-top: 1px solid var(--pjm-border);
}

.pjm-os-payment .pjm-os-row {
    padding: 7px 0;
    border-top: 0;
    font-size: 13px;
}

.pjm-os-payment .pjm-os-row .k {
    font-size: 13px;
}

.pjm-os-empty {
    margin: 0;
    font-size: 14px;
    color: var(--pjm-muted);
}

/* Realizacja, dokumenty */

.pjm-op-person {
    padding: 10px 0;
    border-top: 1px solid #f0f2f1;
}

.pjm-op-person:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.pjm-op-pill {
    background: var(--pjm-green-soft);
    color: var(--pjm-green);
    padding: 2px 9px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pjm-op-meta {
    font-size: 13px;
    color: var(--pjm-muted);
    margin-top: 4px;
}

.pjm-op-actions {
    text-align: center;
    margin-top: 8px;
}

.pjm-op-btn {
    display: inline-block;
    background: var(--pjm-green);
    color: #fff;
    text-decoration: none;
    padding: 12px 22px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 14px;
    margin: 6px 6px 0 0;
    transition: background 0.15s ease, transform 0.15s ease;
}

.pjm-op-btn:hover {
    background: var(--pjm-green-dark);
    transform: translateY(-1px);
}

.pjm-op-btn--ghost {
    background: #fff;
    color: var(--pjm-green);
    border: 1px solid var(--pjm-accent-border, #cfe0d8);
}

.pjm-op-btn--ghost:hover {
    background: var(--pjm-green-soft);
}

.pjm-op-deliverables { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.pjm-op-deliverables .pjm-op-btn { width: 100%; text-align: center; }

.pjm-op-note {
    margin: 12px 0 0;
    font-size: 13px;
    color: #5f6f67;
    line-height: 1.5;
}

.pjm-op-ack {
    margin-top: 12px;
}

.pjm-op-ack-done {
    margin: 12px 0 0;
    font-size: 13px;
    color: #15803d;
    font-weight: 600;
}

.pjm-op-foot {
    text-align: center;
    color: #9aa6a0;
    font-size: 12px;
    margin-top: 20px;
    line-height: 1.5;
}

.pjm-op-disclaimer {
    display: inline-block;
    margin-top: 8px;
    color: #6b7a72;
    font-size: 11px;
    max-width: 420px;
}

.pjm-op-issuer {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    background: var(--pjm-green-soft);
    color: var(--pjm-green-dark);
    padding: 2px 7px;
    border-radius: 4px;
    margin-left: 4px;
    vertical-align: middle;
}

@media (max-width: 480px) {
    .pjm-op-wrap {
        padding: 20px 14px 48px;
    }

    .pjm-op-card {
        padding: 18px 16px;
    }

    .pjm-op-dochead {
        gap: 12px;
    }

    .pjm-op-dochead-logo {
        width: 44px;
        height: 44px;
        font-size: 16px;
    }

    .pjm-op-parties--split {
        grid-template-columns: 1fr;
    }

    .pjm-os-row {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .pjm-os-row .v {
        text-align: left;
    }

    .pjm-os-total {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .pjm-os-total .v {
        font-size: 22px;
    }

    .pjm-journey {
        flex-direction: column;
        align-items: stretch;
    }

    .pjm-journey__step:not(:last-child)::after {
        display: none;
    }
}

/* Oś statusu klienta */
.pjm-journey {
    display: flex;
    gap: 0;
    justify-content: space-between;
    margin: 4px 0 8px;
    flex-wrap: wrap;
}
.pjm-journey__step {
    flex: 1 1 0;
    min-width: 88px;
    text-align: center;
    position: relative;
    padding: 0 4px 8px;
}
.pjm-journey__step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 9px;
    left: calc(50% + 12px);
    right: calc(-50% + 12px);
    height: 2px;
    background: #dde5e0;
}
.pjm-journey__step--done:not(:last-child)::after,
.pjm-journey__step--current:not(:last-child)::after {
    background: var(--pjm-green, #1B5E4B);
}
.pjm-journey__dot {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #c5d0cb;
    background: #fff;
    margin-bottom: 6px;
    position: relative;
    z-index: 1;
}
.pjm-journey__step--done .pjm-journey__dot {
    background: var(--pjm-green, #1B5E4B);
    border-color: var(--pjm-green, #1B5E4B);
}
.pjm-journey__step--current .pjm-journey__dot {
    border-color: var(--pjm-green, #1B5E4B);
    box-shadow: 0 0 0 3px var(--pjm-green-soft, #eef5f1);
}
.pjm-journey__step--na .pjm-journey__dot {
    background: #f3f4f6;
    border-color: #e5e7eb;
}
.pjm-journey__label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #14352A;
}
.pjm-journey__hint {
    display: block;
    font-size: 11px;
    color: #6b7280;
    margin-top: 2px;
}
.pjm-journey__step--na .pjm-journey__label,
.pjm-journey__step--na .pjm-journey__hint {
    color: #9ca3af;
}
.pjm-journey__next {
    margin: 10px 0 0;
    font-size: 13px;
    color: #374151;
}