/* Auto-generated by bin/build_css.php — do not edit directly.
 * Edit the source files under src/View/Css/ instead, then re-run the script. */

/*
 * Ügyfélportál stílus.
 *
 * Saját, önálló réteg — nem a belső app.css-t linkeljük be. Két okból:
 * a portál külön docrootból szolgálódik (a web/assets nem érhető el onnan),
 * és a felület is más: nincs sidebar, nincs sűrű táblázat, nincs jog-mátrix.
 * Az ügyfél havonta egyszer nyitja meg, tehát nagyobb betű, kevesebb elem.
 *
 * A színek megegyeznek a belső rendszerrel (base/variables.css), hogy a két
 * felület egy rendszernek látszódjon. A paletta változásakor ezt a néhány
 * értéket kézzel kell utána vinni — a duplikáció ára az önálló docroot.
 */
:root {
    --px-primary: #7745db;
    --px-primary-dark: #642bd6;
    --px-primary-soft: #f4f1fc;
    --px-primary-border: #e4dbf5;

    /*
     * A lap háttere semleges szürke, NEM lilás.
     *
     * A lila ebben a felületben jelentést hordoz — a válaszra váró teendőt, a
     * fő gombot, az aktív menüpontot jelöli. Ha a háttér, a kártya-fejlécek és
     * a táblázat-fejlécek is mind kapnak egy kis lila derítést, akkor a
     * hangsúlynak nincs mihez képest kiemelkednie: az egész felület egy fakó
     * lila mosás lesz. Egyszer már megcsináltuk így, és csúnya volt.
     */
    --px-bg: #f5f6fa;
    --px-surface: #ffffff;
    --px-text: #1c2333;

    /*
     * A halvány szöveg SZÁNDÉKOSAN sötétebb, mint a belső rendszerben (#7c8494).
     * Az az érték a világos háttéren csak 3.45:1 kontrasztot ad, ami a WCAG AA
     * 4.5:1 szöveg-küszöbe alatt van. Ez itt 4.9:1 a lapháttéren és 5.4:1 a
     * fehér kártyán. Ügyfél-felületen ez nem stílus-, hanem olvashatóság
     * kérdése: az ügyfél nem a mi monitorunkon nézi.
     */
    --px-text-muted: #636b7a;
    --px-border: #e6e7f1;

    /*
     * Státusz-színek. SZÁNDÉKOSAN sötétebbek, mint a belső rendszerben
     * (#2f8f68 / #b0761f / #c9556a): azok a saját derített hátterükön csak
     * 3,5:1 kontrasztot adnak, a WCAG AA szöveg-küszöbe 4,5:1. Egy "Lejárt"
     * jelvényt épp az ügyfélnek kell elolvasnia — ez nem stílus-kérdés.
     *
     * Ezek a saját derítésükön 5,0-5,3:1-et adnak, fehéren 5,9-6,0:1-et.
     */
    --px-success: #257051;
    --px-warning: #8c5a12;
    --px-danger: #ad3d52;

    --px-radius: 12px;
    --px-gap: 24px;
    --px-shadow: 0 1px 2px rgba(44, 38, 74, 0.06), 0 8px 24px rgba(44, 38, 74, 0.06);
}

body {
    background: var(--px-bg);
    color: var(--px-text);
    font-size: 0.975rem;
}

a {
    color: var(--px-primary-dark);
}

/* --- Keret -------------------------------------------------------------- */

/*
 * A fejléc tetején egy tömör lila vonal. Ez a felület egyetlen állandó
 * márka-jelzése — gradiens nélkül, mert az itt csak zajt adott.
 */
.px-topbar {
    background: var(--px-surface);
    border-bottom: 1px solid var(--px-border);
    border-top: 3px solid var(--px-primary);
}

.px-topbar__inner {
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: 64px;
}

.px-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;

    color: var(--px-text);
    text-decoration: none;
    white-space: nowrap;
}

/* Lila csak hoverre: alaphelyzetben a fejléc ne vonja el a figyelmet a
   tartalomról. */
.px-brand:hover {
    color: var(--px-primary-dark);
}

.px-brand img {
    width: 28px;
    height: 28px;
}

/*
 * A második sor (Ügyfél: <cégnév>) hosszabb lehet, mint a portál neve, és a
 * .px-brand nowrap — egy hosszú cégnév ezért kiszorítaná a menüt. A korlát
 * és a levágás megelőzi: a demó adatban a leghosszabb név 29 karakter, de
 * élesben ennél hosszabb is előfordulhat.
 */
.px-brand small {
    display: block;
    font-weight: 400;
    font-size: 0.72rem;
    color: var(--px-text-muted);
    /*
     * A sormagasság NEM lehet 1. A vágás a padding-box szélén történik, a
     * betűkép viszont a sortávnál magasabb: ezen a méreten 15 pixel kell
     * (12 fölé, 3 alá), a sortáv meg 11.52 volt — pont az Ü két pontja és a
     * g szára esett le róla. A belső margó azért is kell, mert a system-ui
     * gépenként más betűtípus, tehát a metrikájára nem lehet ráméretezni.
     */
    line-height: 1.35;
    padding-block: 2px;

    max-width: 34ch;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* A menü vízszintes és szűk kijelzőn oldalra csúszik. Nincs hamburger:
   négy menüpontnál az több kattintás lenne, nem kevesebb. */
.px-nav {
    display: flex;
    gap: 4px;
    margin-left: auto;
    overflow-x: auto;
    scrollbar-width: none;
}

.px-nav::-webkit-scrollbar {
    display: none;
}

.px-nav__link {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 13px;
    border-radius: 8px;
    color: var(--px-text-muted);
    text-decoration: none;
    font-size: 0.9rem;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.px-nav__link:hover {
    background: var(--px-primary-soft);
    color: var(--px-primary-dark);
}

/*
 * Az aktív menüpont alávonással jelöl, nem kitöltött háttérrel. A lila így
 * egy vonal, nem egy folt — és a szöveg alapszínű marad, ami olvashatóbb.
 */
.px-nav__link.is-active {
    color: var(--px-text);
    font-weight: 500;
    box-shadow: inset 0 -2px 0 var(--px-primary);
    border-radius: 0;
}

.px-nav__link.is-active:hover {
    background: transparent;
    color: var(--px-text);
}

.px-main {
    padding: var(--px-gap) 0 56px;
}

.px-page-head {
    margin-bottom: var(--px-gap);
}

.px-page-head h1 {
    font-size: 1.45rem;
    font-weight: 600;
    margin: 0;
}

.px-page-head p {
    color: var(--px-text-muted);
    margin: 4px 0 0;
}

.px-footer {
    border-top: 1px solid var(--px-border);
    padding: 18px 0;
    color: var(--px-text-muted);
    font-size: 0.82rem;
}

/* --- Kártya ------------------------------------------------------------- */

.px-card {
    background: var(--px-surface);
    border: 1px solid var(--px-border);
    border-radius: var(--px-radius);
    box-shadow: var(--px-shadow);
    margin-bottom: var(--px-gap);
    overflow: hidden;
}

.px-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--px-border);
}

/* A fejléc ikonja halvány, nem lila: díszítő elem, nem jelzés. */
.px-card__header h2 .bi {
    color: var(--px-text-muted);
}

.px-card__header h2 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.px-card__body {
    padding: 20px;
}

.px-card__body--flush {
    padding: 0;
}

/* --- Számkártyák -------------------------------------------------------- */

/*
 * A számkártya-sor alatt ugyanannyi hely legyen, mint a kártyák között.
 * Bootstrap `mb-2` volt itt, azaz 8 pixel a 24 helyett: a „Válaszra váró
 * ajánlatok" kártya FELETT szűkebb volt a hézag, mint alatta. A Bootstrap
 * `.row` felső margója a gutter miatt negatív, tehát a ritmust az alsó
 * margónak kell adnia — utility osztályból ezt nem lehet eltalálni.
 */
.px-stats {
    margin-bottom: var(--px-gap);
}

.px-stat {
    display: block;
    background: var(--px-surface);
    border: 1px solid var(--px-border);
    border-radius: var(--px-radius);
    box-shadow: var(--px-shadow);
    padding: 16px 18px;
    height: 100%;
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s ease;
}

a.px-stat:hover {
    border-color: var(--px-primary-border);
    color: inherit;
}

.px-stat__label {
    font-size: 0.8rem;
    color: var(--px-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.px-stat__value {
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.2;
    margin-top: 2px;
}

/*
 * A TEENDŐ száma lila, a többi alapszínű.
 *
 * Ez az egész felület lila-logikája egy sorban: a szín azt jelöli, amiben az
 * ügyfélnek lépnie kell. Ha minden szám lila lenne, ez a jelentés elveszne.
 */
.px-stat__value--action {
    color: var(--px-primary-dark);
}

.px-stat__hint {
    font-size: 0.82rem;
    color: var(--px-text-muted);
    margin-top: 2px;
}

.px-stat__hint--danger {
    color: var(--px-danger);
}

/* --- Táblázat ----------------------------------------------------------- */

.px-table {
    width: 100%;
    margin: 0;
    font-size: 0.9rem;
}

.px-table th {
    font-weight: 500;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--px-text-muted);
    background: #fafbfd;
    border-bottom: 1px solid var(--px-border);
    padding: 11px 20px;
    white-space: nowrap;
}

.px-table td {
    padding: 13px 20px;
    border-bottom: 1px solid var(--px-border);
    vertical-align: middle;
}

.px-table tbody tr:last-child td {
    border-bottom: 0;
}

.px-table tbody tr:hover {
    background: #fbfbfe;
}

/* --- Állapot-jelvény ---------------------------------------------------- */

.px-pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 500;
    white-space: nowrap;
    background: #eef0f7;
    color: #55607a;
}

.px-pill--success {
    background: #e6f4ee;
    color: var(--px-success);
}

.px-pill--warning {
    background: #fdf3e2;
    color: var(--px-warning);
}

.px-pill--danger {
    background: #fbe9ec;
    color: var(--px-danger);
}

.px-pill--primary {
    background: var(--px-primary-soft);
    color: var(--px-primary-dark);
}

/* --- Üres állapot ------------------------------------------------------- */

.px-empty {
    text-align: center;
    padding: 44px 20px;
    color: var(--px-text-muted);
}

.px-empty i {
    font-size: 1.7rem;
    display: block;
    margin-bottom: 10px;
    color: var(--px-text-muted);
}

/* --- Ajánlat-válasz gombok ---------------------------------------------- */

/*
 * A három gomb egyenrangú méretben, de nem egyforma súllyal: az elfogadás
 * kitöltött, a másik kettő körvonalas. Az ügyfél így nem nyom véletlenül
 * elutasítást, de nem is érzi, hogy a felület nyomás alá helyezi.
 */
.px-choices {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.px-choice {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 18px 12px;
    border-radius: var(--px-radius);
    border: 1px solid var(--px-border);
    background: var(--px-surface);
    color: var(--px-text);
    font-weight: 500;
    font-size: 0.95rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.05s ease;
}

.px-choice i {
    font-size: 1.3rem;
}

.px-choice:hover {
    border-color: var(--px-primary-border);
    background: var(--px-primary-soft);
}

.px-choice:active {
    transform: translateY(1px);
}

.px-choice--accept {
    background: var(--px-primary);
    border-color: var(--px-primary);
    color: #fff;
}

.px-choice--accept:hover {
    background: var(--px-primary-dark);
    border-color: var(--px-primary-dark);
    color: #fff;
}

.px-choice--decline:hover {
    border-color: #f0c4cd;
    background: #fdf5f6;
}

@media (max-width: 575.98px) {
    .px-choices {
        grid-template-columns: 1fr;
    }
}

/* --- Adatpárok (ajánlat és profil részletek) ---------------------------- */

.px-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 18px;
}

.px-facts__label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--px-text-muted);
}

.px-facts__value {
    font-size: 1.02rem;
    font-weight: 500;
    margin-top: 2px;
}

/*
 * Átlépő sáv — a belső felhasználó látja, amikor egy ügyfél portál
 * nézetében jár.
 *
 * Ugyanaz a rozsdabarna, mint a belső rendszer impersonálás-sávjáé
 * (`layout/impersonation.css`): a színnek ott is, itt is ugyanaz a jelentése —
 * „nem a saját nevedben vagy". Két külön CSS fájl, mert a két docroot külön
 * stíluslapot tölt be; ha a szín változik, mindkettőt át kell írni.
 *
 * A kontraszt itt is számít: #ffe9df a #7d2a12-n 8,9:1 — bőven a WCAG AA
 * fölött. A sáv rövid ideig van a képernyőn, de fontosat mond.
 */
.px-impersonation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 8px 20px;
    background: #7d2a12;
    color: #ffe9df;
    font-size: 0.86rem;
    /* 600, nem 500: az átlépés teljes jogú, tehát ez figyelmeztetés, nem
       információ. A sáv az EGYETLEN dolog, ami ezt a lapot
       megkülönbözteti attól, amit az ügyfél lát. */
    font-weight: 600;
    border-bottom: 3px solid #f0a58a;
    position: sticky;
    top: 0;
    z-index: 30;
}

.px-impersonation i {
    font-size: 1rem;
}

/* Gomb, nem link: a kilépés állapotot változtat, tehát POST. */
.px-impersonation__stop {
    background: none;
    border: 1px solid #ffe9df;
    border-radius: 6px;
    color: #fff;
    font: inherit;
    font-weight: 600;
    padding: 2px 10px;
    cursor: pointer;
}

.px-impersonation__stop:hover,
.px-impersonation__stop:focus-visible {
    background: #ffe9df;
    color: #7d2a12;
}

/*
 * Az ajánlat szövege.
 *
 * Ezt olvassa el az ügyfél végig, nem átfutja — ezért kap nagyobb sorközt és
 * korlátozott sorhosszt. 70 karakter körül van a kényelmes olvasási határ; egy
 * teljes szélességben futó bekezdésnél a szem elveszti a sor elejét.
 *
 * A szöveg `nl2br`-rel jön, tehát a bekezdéshatárok <br>-ek: a `white-space`
 * nem elég hozzá, viszont a felesleges behúzásokat nem is akarjuk megtartani.
 */
/* A feltöltött ajánlat (PDF) a lapba ágyazva. Mobilon a böngésző sokszor
   nem rajzolja ki — ott a „Megnyitás új lapon” gomb a járható út. */
.px-pdf {
    display: block;
    width: 100%;
    height: 80vh;
    min-height: 420px;
    border: 0;
    border-radius: 0 0 var(--px-radius, 12px) var(--px-radius, 12px);
}

.px-offer-content {
    max-width: 68ch;
    line-height: 1.75;
    color: var(--px-text);
}

/* --- Belépő oldalak ---------------------------------------------------- */

.px-auth {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 16px;
}

/* A belépő kártya fölött ugyanaz a lila vonal, mint a fejlécben: ez köti
   össze a két nézetet. */
.px-auth__box > .px-card {
    border-top: 3px solid var(--px-primary);
}

.px-auth__box {
    width: 100%;
    max-width: 420px;
}

.px-auth__brand {
    text-align: center;
    margin-bottom: 22px;
}

.px-auth__brand img {
    width: 44px;
    height: 44px;
}

.px-auth__brand div {
    font-weight: 600;
    margin-top: 10px;
    font-size: 1.05rem;
}

.px-auth__brand small {
    color: var(--px-text-muted);
}

.px-auth__note {
    text-align: center;
    margin-top: 16px;
    font-size: 0.85rem;
}

.px-auth__legal {
    text-align: center;
    margin-top: 20px;
    font-size: 0.74rem;
    color: var(--px-text-muted);
}

/* Hosszú szöveg ne tolja szét a táblázatot. */
.px-truncate {
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Üzenetek ----------------------------------------------------------- */

/*
 * Beszélgetés-nézet. A két fél elkülönítése nem csak színnel megy: a buborék
 * OLDALA is más (a kolléga balra, az ügyfél jobbra). Színlátási zavarral a
 * szín önmagában nem információ — és itt pont az a kérdés, ki mondta.
 *
 * Belső jegyzet ITT NEM LÉTEZIK: a portál lekérdezése ki sem adja. Ezért erre
 * a felületre nincs is olyan stílus — ha egyszer megjelenne egy ilyen sor, ne
 * legyen hova illeszkednie.
 */
.px-thread {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.px-thread__msg {
    max-width: 76%;
    border-radius: var(--px-radius);
    padding: 14px 16px;
    border: 1px solid var(--px-border);
    background: var(--px-surface);
}

/* A mi válaszunk: balra, semleges. */
.px-thread__msg--ours {
    align-self: flex-start;
    background: var(--px-bg);
}

/* Az ügyfél saját üzenete: jobbra, a márkaszínnel. Az „én írtam" oldal a
   megszokott jobb oldal — a levelező- és chat-alkalmazások mindegyikében. */
.px-thread__msg--mine {
    align-self: flex-end;
    background: var(--px-primary-soft);
    border-color: var(--px-primary-border);
}

.px-thread__head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 6px;
    font-size: 0.84rem;
    color: var(--px-text-muted);
}

.px-thread__author {
    font-weight: 600;
    color: var(--px-text);
}

/* A törzs felhasználó által írt szöveg: a sortörés maradjon meg, a beillesztett
   hosszú URL viszont ne feszítse szét a buborékot. */
.px-thread__body {
    margin: 0;
    white-space: pre-line;
    overflow-wrap: anywhere;
    line-height: 1.6;
}

@media (max-width: 640px) {
    .px-thread__msg {
        max-width: 92%;
    }
}

/* Csatolmány-lista egy üzenetben. Ugyanaz a minta, mint belül, portál-méretben:
   nagyobb betű és bővebb belső tér, mert az ügyfél ritkábban jár itt. */
.px-attach {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.px-attach__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--px-border);
    border-radius: var(--px-radius);
    background: var(--px-surface);
    color: var(--px-text);
    text-decoration: none;
    font-size: 0.92rem;
}

.px-attach__item:hover {
    border-color: var(--px-primary-border);
    background: var(--px-primary-soft);
    color: var(--px-primary-dark);
}

.px-attach__item i {
    color: var(--px-primary);
    flex-shrink: 0;
}

.px-attach__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.px-attach__size {
    flex-shrink: 0;
    color: var(--px-text-muted);
    font-size: 0.82rem;
}

/* --- Projektek ---------------------------------------------------------- */

/*
 * Haladás-sáv. A szám MINDIG ki van írva mellé: a sáv hossza önmagában nem
 * mondja meg, hogy 2/8 vagy 4/16 — és a képernyőolvasó a szélességet nem látja.
 */
.px-progress {
    height: 10px;
    border-radius: 999px;
    background: var(--px-bg);
    border: 1px solid var(--px-border);
    overflow: hidden;
}

/* `block` KELL: a fill egy div, de ha egyszer span lenne (egy <a> gyerekeként),
   az inline elemre a szélesség nem hat, és a sáv nulla pixel maradna — némán,
   hibajelzés nélkül. Ez a belső felületen egyszer már megtörtént. */
.px-progress__fill {
    display: block;
    height: 100%;
    background: var(--px-primary);
    border-radius: 999px;
}

/* Lépéslista: bal oldali jelölő + szöveg. A számozást a jelölő adja, ezért a
   lista saját számait elhagyjuk. */
.px-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.px-steps__item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.px-steps__marker {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.86rem;
    font-weight: 600;
    background: var(--px-bg);
    border: 1px solid var(--px-border);
    color: var(--px-text-muted);
}

.px-steps__item--done .px-steps__marker {
    background: #e6f7ef;
    border-color: #bfe6d3;
    color: var(--px-success);
}

.px-steps__item--open .px-steps__marker,
.px-steps__item--in_progress .px-steps__marker {
    background: var(--px-primary-soft);
    border-color: var(--px-primary-border);
    color: var(--px-primary-dark);
}

.px-steps__name {
    font-weight: 600;
}

/* A már kész és a kimaradt lépés halványabb: a szem a SORON LÉVŐ lépésre
   ugorjon, ne a listán végig. */
.px-steps__item--done .px-steps__name,
.px-steps__item--skipped .px-steps__name {
    font-weight: 500;
    color: var(--px-text-muted);
}

.px-steps__meta {
    font-size: 0.84rem;
    color: var(--px-text-muted);
    margin-top: 2px;
}

/*
 * Frissen, LAPFRISSÍTÉS NÉLKÜL érkezett üzenet.
 *
 * Rövid felvillanás, aztán vissza a normál kinézetre: aki épp a lapot
 * nézi, észreveszi az új sort, aki később görget oda, annak már nem
 * villog semmi. Az animáció `forwards`, tehát nem ugrik vissza a
 * kiindulóra a végén.
 */
.px-thread__msg.is-new {
    animation: cx-msg-arrive 1.6s ease-out forwards;
}

@keyframes cx-msg-arrive {
    from { background: var(--px-primary-soft, #efe9fb); }
    to   { background: transparent; }
}

/* Aki kikapcsolta az animációkat, annak nem villogunk. */
@media (prefers-reduced-motion: reduce) {
    .px-thread__msg.is-new { animation: none; }
}

/* ---------------------------------------------------------------------------
   PUBLIKUS ŰRLAP — SZŰK HASÁB
   ---------------------------------------------------------------------------
   Az űrlap fő helye egy IFRAME egy idegen oldal hasábjában, de a saját
   linkjén (`/f/<slug>`) is meg kell állnia. A `container` a publikus
   ajánlat-lapnak van méretezve — ott tételes táblázat áll, annak kell a
   szélesség; egy űrlapnak viszont árt: széles lapon a beviteli mezők átérnek
   a fél képernyőn, és egy hosszú sor végén a szem nem találja vissza a
   következő sor elejét.

   A 34rem (≈544 px) nem esztétikai szám: ennyi fér el egy tipikus oldalsáv-
   szélességű beágyazásban is, tehát a két megjelenés nem csúszik szét.

   A mezők egymás alatt állnak (a sablonban minden `col-12`), ezért itt nincs
   hasáb-kezelés — ha egyszer mégis kéthasábos kellene, azt a sablonban kell
   visszatenni, nem itt felülírni.
--------------------------------------------------------------------------- */
.px-form-narrow {
    max-width: 34rem;
    margin-inline: auto;
}

/* Az előfelméréses köszönő lap: a kérdéssor két hasábjának kell a hely. */
.px-form-wide {
    max-width: 45rem;
    margin-inline: auto;
}

/* A kilépés POST-os űrlap a menüben: úgy kell kinéznie, mint a többi linknek. */
.px-nav__form {
    display: contents;
}

.px-nav__link--button {
    background: none;
    border: 0;
    font: inherit;
    cursor: pointer;
}

/* Az Üzenetek menüpont jelzése: hány témában vár válaszra az ügyfél (PORT-10). */
.px-nav__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: var(--px-primary);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1;
}

/*
 * SZŰK KIJELZŐN a menü oldalra csúszik, de ezt eddig semmi nem jelezte: a
 * nyolc pontból a Kilépés a képen kívül esett, és úgy tűnt, nincs is (PORT-10).
 * A jobb szél elhalványul, amíg van még mit görgetni.
 */
@media (max-width: 991.98px) {
    .px-nav {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
        padding-right: 20px;
    }
}

/*
 * Az előfelmérés kerete (`lead-form-assessment.twig`). A magasságát a
 * keretben futó híd jelzi, a lap szkriptje állítja — ez csak a kezdő méret,
 * amíg az első jelzés meg nem jön.
 */
.px-assessment-frame {
    display: block;
    width: 100%;
    min-height: 480px;
    border: 0;
    background: transparent;
}