/*
 * Pályázatközpont – előszűrő kérdőív
 *
 * ARCULATI SZABÁLY: ez a fájl NEM vezet be új arculatot.
 * A színeket az Astra globális változóiból örökli (--ast-global-color-*),
 * a betűtípust az oldaltól. A fallback értékek megegyeznek a jelenlegi
 * paletta értékeivel, hogy változó nélküli kontextusban is azonos legyen.
 *
 * Csak azok a vizuális döntések vannak itt, amelyek a funkció
 * használhatóságához kellenek: célpontméret, egy oszlop, kontraszt, progress.
 */

.pk-screening,
.pk-quiz {
    --pk-green: var(--ast-global-color-0, #2F7D4A);
    --pk-green-dark: var(--ast-global-color-1, #174C2F);
    --pk-green-soft: var(--ast-global-color-4, #EAF5EE);
    --pk-text: var(--ast-global-color-3, #17201B);
    --pk-heading: var(--ast-global-color-2, #174C2F);
    --pk-surface: #FFFFFF;
    --pk-line: #D8E5DD;
    --pk-muted: #4A5A50;
    --pk-danger: #A32020;
    --pk-radius: 12px;

    color: var(--pk-text);
}

/* ─────────── Indítókártya ─────────── */

.pk-start {
    background: var(--pk-surface);
    border: 1px solid var(--pk-line);
    border-radius: 16px;
    padding: 28px 24px;
    text-align: left;
}
.pk-start__title { margin: 0 0 10px; font-size: 28px; line-height: 1.25; color: var(--pk-heading); }
.pk-start__lead { margin: 0 0 18px; font-size: 18px; line-height: 1.65; }
.pk-start__points { margin: 0 0 24px; padding: 0; list-style: none; }
.pk-start__points li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 10px;
    font-size: 17px;
    line-height: 1.55;
}
.pk-start__points li::before {
    content: "";
    position: absolute; left: 0; top: 7px;
    width: 18px; height: 10px;
    border-left: 3px solid var(--pk-green);
    border-bottom: 3px solid var(--pk-green);
    transform: rotate(-45deg);
}
.pk-start__note { margin: 16px 0 0; font-size: 15px; color: var(--pk-muted); }

.pk-noscript {
    margin-top: 16px; padding: 18px 20px;
    background: #FFF7E6; border: 1px solid #E8D9B0; border-radius: var(--pk-radius);
    font-size: 17px;
}

/* Folytatás-ajánlat */
.pk-resume {
    margin: 0 0 22px; padding: 16px 18px;
    background: var(--pk-green-soft); border: 1px solid var(--pk-line);
    border-radius: var(--pk-radius);
}
.pk-resume__text { margin: 0 0 12px; font-size: 17px; font-weight: 600; color: var(--pk-heading); }
.pk-resume__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ─────────── Gombok ─────────── */

.pk-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 52px; padding: 14px 26px;
    font-size: 17px; font-weight: 600; line-height: 1.2;
    font-family: inherit;
    border: 2px solid transparent; border-radius: 8px;
    cursor: pointer; text-decoration: none;
    transition: background-color .18s ease, border-color .18s ease;
}
.pk-btn--primary { background: var(--pk-green); color: #fff; }
.pk-btn--primary:hover, .pk-btn--primary:focus { background: var(--pk-green-dark); color: #fff; }
.pk-btn--ghost { background: transparent; color: var(--pk-green-dark); border-color: var(--pk-line); }
.pk-btn--ghost:hover, .pk-btn--ghost:focus { border-color: var(--pk-green); color: var(--pk-green-dark); }
.pk-btn--lg { min-height: 60px; font-size: 18px; padding: 16px 32px; }
.pk-btn--block { width: 100%; }
.pk-btn[disabled], .pk-btn.is-busy { opacity: .65; cursor: default; }
.pk-btn:focus-visible { outline: 3px solid var(--pk-green-dark); outline-offset: 3px; }

/* ─────────── Kitöltő felület ─────────── */

.pk-quiz[hidden] { display: none; }

body.pk-quiz-active { overflow: hidden; }
/* A mobil sticky CTA-sáv és a lábléc ne vonja el a figyelmet kitöltés közben. */
body.pk-quiz-active .pk-mcta,
body.pk-hide-mobile-cta .pk-mcta { display: none !important; }

.pk-quiz {
    position: fixed; inset: 0; z-index: 100000;
    display: flex; flex-direction: column;
    background: var(--pk-green-soft);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.pk-quiz__bar {
    position: sticky; top: 0; z-index: 2;
    background: var(--pk-surface);
    border-bottom: 1px solid var(--pk-line);
    padding: 12px 16px 10px;
}
.pk-quiz__bar-inner {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    max-width: 720px; margin: 0 auto 10px;
}
.pk-quiz__brand { font-size: 15px; font-weight: 600; color: var(--pk-heading); }
/* Érintési célpont: legalább 44 px magas, hogy mobilon biztosan eltalálható legyen. */
.pk-quiz__exit {
    display: inline-flex; align-items: center;
    min-height: 44px; padding: 8px 6px;
    background: none; border: none;
    font-family: inherit; font-size: 15px; color: var(--pk-muted);
    text-decoration: underline; cursor: pointer;
}
.pk-quiz__exit:focus-visible { outline: 3px solid var(--pk-green-dark); outline-offset: 2px; }

/* ─────────── Fázis-indikátor (4 logikai szakasz) ───────────
   Nem százalék és nem „X / Y”: feltételes kérdések mellett az hamis
   pontosságot sugallna. A kitöltő azt látja, MELYIK SZAKASZBAN jár. */

.pk-phases {
    display: flex; align-items: flex-start; gap: 4px;
    max-width: 720px; margin: 0 auto; padding: 0;
    list-style: none; counter-reset: none;
}
.pk-phase {
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    position: relative;
    text-align: center;
}
/* Összekötő vonal a körök között */
.pk-phase::before {
    content: ""; position: absolute; top: 15px; left: -50%; right: 50%;
    height: 3px; background: #DCE9E1;
}
.pk-phase:first-child::before { display: none; }
.pk-phase--done::before,
.pk-phase--current::before { background: var(--pk-green); }

.pk-phase__dot {
    position: relative; z-index: 1;
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; flex: 0 0 auto;
    background: #fff; color: var(--pk-muted);
    border: 3px solid #DCE9E1; border-radius: 50%;
    font-size: 14px; font-weight: 700; line-height: 1;
}
.pk-phase--done .pk-phase__dot {
    background: var(--pk-green); border-color: var(--pk-green); color: #fff;
}
.pk-phase--current .pk-phase__dot {
    background: #fff; border-color: var(--pk-green); color: var(--pk-green-dark);
    box-shadow: 0 0 0 4px rgba(47,125,74,.15);
}
.pk-phase__label {
    font-size: 13px; line-height: 1.3; color: var(--pk-muted);
    overflow-wrap: anywhere;
}
.pk-phase--current .pk-phase__label { color: var(--pk-green-dark); font-weight: 700; }
.pk-phase--done .pk-phase__label { color: var(--pk-heading); }

.pk-quiz__body { flex: 1 0 auto; padding: 26px 16px 20px; }
.pk-quiz__stage { max-width: 720px; margin: 0 auto; }

.pk-quiz__foot {
    position: sticky; bottom: 0;
    display: flex; align-items: center; gap: 12px;
    max-width: 720px; width: 100%; margin: 0 auto;
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
    background: linear-gradient(to top, var(--pk-green-soft) 70%, rgba(234,245,238,0));
}
.pk-quiz__foot .pk-btn--primary { margin-left: auto; min-width: 150px; }
.pk-quiz__foot .pk-btn[hidden] { display: none; }

/* ─────────── Kérdés ─────────── */

.pk-step__title {
    margin: 0 0 10px;
    font-size: 26px; line-height: 1.3; color: var(--pk-heading);
}
.pk-step__help { margin: 0 0 20px; font-size: 17px; color: var(--pk-muted); line-height: 1.6; }
.pk-step__legal { margin: 18px 0 0; font-size: 15px; color: var(--pk-muted); line-height: 1.6; }

/* ─────────── Válaszopciók ─────────── */

.pk-options { display: flex; flex-direction: column; gap: 12px; }

.pk-option {
    display: flex; align-items: center; gap: 14px;
    width: 100%; min-height: 64px;
    padding: 14px 18px;
    background: var(--pk-surface);
    border: 2px solid var(--pk-line); border-radius: var(--pk-radius);
    font-family: inherit; font-size: 19px; line-height: 1.35; text-align: left;
    color: var(--pk-text);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
.pk-option:hover { border-color: var(--pk-green); }
.pk-option:focus-visible { outline: 3px solid var(--pk-green-dark); outline-offset: 2px; }

.pk-option__mark {
    flex: 0 0 auto;
    width: 26px; height: 26px;
    border: 2px solid #A8BFB2; border-radius: 50%;
    background: #fff;
    position: relative;
}
.pk-option[role="checkbox"] .pk-option__mark { border-radius: 6px; }

/* A kiválasztás NEM csak színnel jelölt: pipa + vastag keret is (színvakság). */
.pk-option.is-selected { border-color: var(--pk-green); background: var(--pk-green-soft); }
.pk-option.is-selected .pk-option__mark { border-color: var(--pk-green); background: var(--pk-green); }
.pk-option.is-selected .pk-option__mark::after {
    content: "";
    position: absolute; left: 6px; top: 6px;
    width: 10px; height: 5px;
    border-left: 3px solid #fff; border-bottom: 3px solid #fff;
    transform: rotate(-45deg);
}
.pk-option__label { flex: 1 1 auto; }

/* ─────────── Mezők ─────────── */

.pk-field { margin-bottom: 20px; }
.pk-label { display: block; margin-bottom: 8px; font-size: 17px; font-weight: 600; color: var(--pk-heading); }
.pk-input {
    width: 100%; min-height: 56px;
    padding: 14px 16px;
    font-family: inherit; font-size: 18px; color: var(--pk-text);
    background: var(--pk-surface);
    border: 2px solid var(--pk-line); border-radius: var(--pk-radius);
    -webkit-appearance: none; appearance: none;
}
.pk-input:focus { border-color: var(--pk-green); outline: 3px solid rgba(47,125,74,.25); outline-offset: 0; }
.pk-input[aria-invalid="true"] { border-color: var(--pk-danger); }
.pk-field--postal_code .pk-input { max-width: 180px; letter-spacing: .06em; }

.pk-phone { display: flex; align-items: stretch; }
.pk-phone__prefix {
    display: flex; align-items: center;
    padding: 0 14px;
    font-size: 18px; font-weight: 600; color: var(--pk-heading);
    background: var(--pk-green-soft);
    border: 2px solid var(--pk-line); border-right: none;
    border-radius: var(--pk-radius) 0 0 var(--pk-radius);
}
.pk-input--phone { border-radius: 0 var(--pk-radius) var(--pk-radius) 0; }

.pk-hint { margin: 8px 0 0; font-size: 15px; color: var(--pk-muted); line-height: 1.5; }
.pk-req { color: var(--pk-danger); }
/* Az opcionális mező jelölése a címkében — a kitöltő ne érezze kötelezőnek. */
.pk-optional { font-weight: 400; font-size: 15px; color: var(--pk-muted); }

/* Mérföldkő a záró képernyő elején: a szakmai rész itt ér véget. */
.pk-milestone { margin: 0 0 14px; text-align: center; }
.pk-milestone__check {
    position: relative; display: inline-block;
    width: 56px; height: 56px;
    background: var(--pk-green); border-radius: 50%;
}
.pk-milestone__check::after {
    content: ""; position: absolute; left: 17px; top: 19px;
    width: 20px; height: 10px;
    border-left: 4px solid #fff; border-bottom: 4px solid #fff;
    transform: rotate(-45deg);
}
.pk-step--finish .pk-step__title { text-align: center; }
.pk-step--finish .pk-step__help,
.pk-step--finish .pk-step__legal { text-align: center; }

/*
 * Záró képernyő: az eredmény összeállítása.
 *
 * SZÁNDÉKOSAN NINCS százalékos folyamatjelző — az nem tudná pontosan,
 * mennyi van hátra, tehát hamis lenne. Egyszerű, folyamatos jelzés + valós
 * állapotüzenet. Csökkentett mozgásigény esetén a forgás megáll.
 */
.pk-finish { margin: 24px 0 20px; text-align: center; }
.pk-spinner {
    display: inline-block; width: 44px; height: 44px; margin-bottom: 16px;
    border: 4px solid var(--pk-green-soft);
    border-top-color: var(--pk-green);
    border-radius: 50%;
    animation: pk-spin 900ms linear infinite;
}
.pk-spinner[hidden] { display: none; }
@keyframes pk-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .pk-spinner { animation: none; border-top-color: var(--pk-green-soft); background: var(--pk-green-soft); }
}
.pk-finish__status { margin: 0 0 16px; font-size: 18px; line-height: 1.6; color: var(--pk-muted); }
.pk-finish__status--error { color: var(--pk-danger); font-weight: 600; }
.pk-finish [data-pk-retry][hidden] { display: none; }
.pk-error { margin: 8px 0 0; font-size: 16px; font-weight: 600; color: var(--pk-danger); line-height: 1.5; }
.pk-error[hidden] { display: none; }

/* ─────────── Hozzájárulás ─────────── */

.pk-consent { margin: 24px 0; padding: 18px; background: var(--pk-green-soft); border-radius: var(--pk-radius); }
.pk-check {
    display: flex; align-items: flex-start; gap: 14px;
    margin-bottom: 16px;
    font-size: 16px; line-height: 1.6; cursor: pointer;
}
.pk-check:last-child { margin-bottom: 0; }
.pk-check input[type="checkbox"] {
    flex: 0 0 auto;
    width: 26px; height: 26px; margin: 2px 0 0;
    accent-color: var(--pk-green);
    cursor: pointer;
}
.pk-check a { color: var(--pk-green-dark); text-decoration: underline; }

/* Honeypot – ember nem látja, képernyőolvasó kihagyja */
.pk-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ─────────── Hibaüzenet ─────────── */

.pk-quiz__error {
    position: fixed; left: 50%; bottom: 100px; transform: translateX(-50%);
    z-index: 100001;
    max-width: min(560px, calc(100vw - 32px));
    padding: 14px 18px;
    background: #FBEAEA; border: 2px solid var(--pk-danger); border-radius: var(--pk-radius);
    font-size: 16px; font-weight: 600; color: #6E1414;
}
.pk-quiz__error[hidden] { display: none; }
.pk-quiz__error--outside { position: static; transform: none; margin-top: 18px; max-width: 100%; }

/* ─────────── Töréspontok ─────────── */

@media (max-width: 480px) {
    .pk-start { padding: 22px 18px; }
    .pk-start__title { font-size: 24px; }
    .pk-step__title { font-size: 23px; }
    /* Mobilon szűkebb a hely: kisebb körök, de a felirat maradjon olvasható
       (45+ célcsoport — 13 px az alsó határ, tördeléssel). */
    .pk-phases { gap: 2px; }
    .pk-phase__dot { width: 28px; height: 28px; border-width: 2px; font-size: 13px; }
    .pk-phase::before { top: 13px; height: 2px; }
    .pk-phase__label { font-size: 13px; line-height: 1.2; hyphens: auto; }
    .pk-milestone__check { width: 48px; height: 48px; }
    .pk-milestone__check::after { left: 14px; top: 16px; width: 18px; height: 9px; }
    .pk-option { font-size: 18px; min-height: 60px; padding: 12px 14px; }
    .pk-quiz__body { padding: 20px 14px 12px; }
    .pk-quiz__foot { padding-left: 14px; padding-right: 14px; }
    .pk-quiz__foot .pk-btn { min-height: 54px; padding: 12px 18px; }
    .pk-quiz__foot .pk-btn--primary { min-width: 128px; }
}

@media (min-width: 768px) {
    .pk-step__title { font-size: 30px; }
    .pk-quiz__body { padding: 40px 24px 24px; }
    .pk-quiz__bar { padding: 16px 24px 12px; }
}

/* Mozgáscsökkentés tiszteletben tartása */
@media (prefers-reduced-motion: reduce) {
    .pk-progress__fill, .pk-option, .pk-btn { transition: none; }
}

/* Vízszintes túlcsordulás elleni védelem.
   FIGYELEM: a .pk-quiz__stage NEM szerepelhet itt — a 720 px-es olvasási
   oszlopot írná felül, és a kérdések teljes szélességben szétterülnének. */
.pk-screening, .pk-quiz { max-width: 100%; }
.pk-screening *, .pk-quiz * { box-sizing: border-box; }