/* =============================================================================
   PrintPont — RENDELÉS-FOLYAMAT: lépésenkénti folyamatábra a vevőnek és a nyomdásznak, „Következő teendő” doboz, vevői magyarázó.
   A pöttyök a far360 alap .f-potty osztályai (badges.css: zöld ✓ / sárga … / piros ! / szürke –); itt csak a részletes lista, az aktuális lépés
   kiemelése és a hozzá tartozó dobozok vannak. A szín sosem az egyetlen jelzés (jelkép + állapotszöveg), nyomtatásban is olvasható.
   ============================================================================= */

.pp-folyamat { list-style: none; margin: 0; padding: 0; }
.pp-folyamat__lepes {
    position: relative;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 0.75rem;
    padding-bottom: 1rem;
}
.pp-folyamat__lepes:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 11px;
    top: 26px;
    bottom: -2px;
    width: 2px;
    background: var(--f-border);
}
.pp-folyamat__lepes--zold:not(:last-child)::before { background: var(--f-badge-alairva-fg); opacity: 0.45; }
.pp-folyamat .f-potty { z-index: 1; width: 24px; height: 24px; margin-top: 1px; font-size: 0.82rem; cursor: default; }
.pp-folyamat__szoveg { min-width: 0; padding: 0.1rem 0; }
.pp-folyamat__fej { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.2rem 0.75rem; }
.pp-folyamat__fej time { font-family: var(--f-font-mono); font-size: 0.75rem; color: var(--f-grey); white-space: nowrap; }
.pp-folyamat__szoveg p { margin: 0.18rem 0 0; color: var(--f-grey); font-size: 0.9rem; }
.pp-folyamat__allapot { font-family: var(--f-font-mono); font-weight: 500; text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.04em; }
.pp-folyamat__lepes--zold .pp-folyamat__allapot { color: var(--f-badge-alairva-fg); }
.pp-folyamat__lepes--sarga .pp-folyamat__allapot { color: var(--f-badge-var-fg); }
.pp-folyamat__lepes--piros .pp-folyamat__allapot { color: var(--f-badge-lejart-fg); }
.pp-folyamat__lepes--szurke .pp-folyamat__allapot { color: var(--f-badge-generalva-fg); }

/* Az aktuális lépés kiemelve; a hátralévők halványak (a pötty és a szöveg jelzi, nem csak a halványság). */
.pp-folyamat__lepes--aktualis .pp-folyamat__szoveg {
    padding: 0.55rem 0.85rem;
    margin-top: -0.3rem;
    border-left: 3px solid var(--f-primary);
    border-radius: var(--f-radius-xs);
    background: var(--f-primary-soft);
}
.pp-folyamat__lepes--aktualis .pp-folyamat__fej strong { color: var(--f-ink); }
.pp-folyamat__lepes--hatralevo { opacity: 0.62; }
.pp-folyamat__lepes--piros.pp-folyamat__lepes--aktualis .pp-folyamat__szoveg { border-left-color: var(--f-badge-lejart-fg); background: var(--f-badge-lejart-bg); }

/* Ágazat-jelölés a lépés mellett („Javításra vár”). */
.pp-folyamat__cimke { margin-left: 0.5rem; }

/* „Most / Következő” összefoglaló a vevői folyamat felett. */
.pp-folyamat-most { display: grid; gap: 0.25rem; margin: 0 0 1.25rem; padding: 1rem 1.25rem; }
.pp-folyamat-most p { margin: 0; }
.pp-folyamat-most .pp-folyamat-most__kov { color: var(--f-grey); font-size: 0.92rem; }

/* Átvételi / futár információ a lépés alatt. */
.pp-folyamat-info { margin-top: 0.6rem; padding: 0.75rem 1rem; border-radius: var(--f-radius-sm); background: var(--f-white, #fff); border: 1px solid var(--f-border); }
.pp-folyamat-info dl { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.3rem 1rem; font-size: 0.9rem; }
.pp-folyamat-info dt { color: var(--f-grey); }
.pp-folyamat-info dd { margin: 0; overflow-wrap: anywhere; }

/* Kompakt pötty-csík a listában + felirat. */
.pp-folyamat-sor { display: grid; gap: 0.25rem; }
.pp-folyamat-sor__felirat { font-size: 0.82rem; color: var(--f-grey); }
.pp-folyamat-sor__felirat--piros { color: var(--f-badge-lejart-fg); font-weight: 600; }

/* „Következő teendő” doboz az admin rendelés-részleten. */
.pp-teendo { display: grid; gap: 0.75rem; border-left: 4px solid var(--f-primary); }
.pp-teendo--piros { border-left-color: var(--f-badge-lejart-fg); }
.pp-teendo h2 { margin: 0; }
.pp-teendo p { margin: 0; }
.pp-teendo__muveletek { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: flex-end; }
.pp-teendo__muveletek form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: flex-end; }
.pp-futar-urlap { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); padding: 0.75rem 1rem; border: 1px solid var(--f-border); border-radius: var(--f-radius-sm); }
.pp-futar-urlap > .pp-futar-urlap__gomb { grid-column: 1 / -1; }

/* Humán ellenőrzés: ellenőrzőlista a „Átnéztem, nyomtatható” gomb mellett. */
.pp-ellenorlista { margin: 0 0 0.75rem; padding: 0.75rem 1rem; border: 1px solid var(--f-border); border-radius: var(--f-radius-sm); display: grid; gap: 0.35rem; }
.pp-ellenorlista legend { font-weight: 600; padding: 0 0.35rem; }
.pp-ellenorlista label { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.92rem; }
.pp-ellenorlista input[type="checkbox"] { margin-top: 0.2rem; }
.pp-ellenor-gepi { display: flex; flex-wrap: wrap; gap: 0.4rem 0.75rem; align-items: center; margin: 0 0 0.75rem; }
.pp-ellenor-jovahagyva { margin: 0.5rem 0 0; font-size: 0.88rem; color: var(--f-badge-alairva-fg); font-weight: 600; }

/* „Így halad a rendelésed” magyarázó (statikus). */
.pp-folyamat-magyarazo { margin: 2rem 0; }
.pp-folyamat-magyarazo ol { counter-reset: lepes; list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: 0.75rem; }
.pp-folyamat-magyarazo li { counter-increment: lepes; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: 0.75rem; align-items: start; }
.pp-folyamat-magyarazo li::before {
    content: counter(lepes);
    display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%;
    background: var(--f-primary-soft); color: var(--f-primary); font-weight: 600;
}
.pp-folyamat-magyarazo li.pp-kiemelt::before { background: var(--f-primary); color: var(--f-white, #fff); }
.pp-folyamat-magyarazo li p { margin: 0.1rem 0 0; color: var(--f-grey); }
.pp-folyamat-magyarazo li.pp-kiemelt strong { color: var(--f-ink); }

@media (max-width: 600px) {
    .pp-folyamat__fej { flex-direction: column; }
    .pp-folyamat-info dl { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }
    .pp-folyamat-info dd { margin-bottom: 0.4rem; }
}

@media print {
    .pp-folyamat__lepes { break-inside: avoid; }
    .pp-folyamat__lepes--hatralevo { opacity: 1; }
    .pp-folyamat__lepes--aktualis .pp-folyamat__szoveg { background: none; border-left-color: #000; }
    .pp-folyamat .f-potty { border-color: #000; background: none; color: #000; }
}