/* ============================================================
Publikus űrlap (iframe) – stíluslap.
------------------------------------------------------------
A változók (light és dark) a `design-tokens.css`-ben vannak.
A sötét módot a html[data-theme="dark"|"auto"] kapcsolja
(a route a $theme paraméterből állítja be).
Itt csak a publikus űrlap-specifikus szabályok vannak.
============================================================ */
/* ─── Base ──────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Anti-FOUC: a háttérszínt a -re is rátesszük, hogy a CSS
betöltődésével azonnal érvényes legyen (a render után jön).
Plusz amíg a JS nem inicializál (.pf-loading), elrejtjük a body-t,
hogy a content render-step se villanjon. */
html {
background: var(--surface-page);
}
html.pf-loading body {
visibility: hidden;
}
/* Anti-flash a transition-ök ellen: amíg betölt + a JS le nem veszi
a .pf-loading osztályt, minden transition-t kikapcsolunk. Ezzel
elkerüljük, hogy első/refresh betöltésnél a témaváltó tile-ok,
gombok stb. animáltan váltsanak sötétről világosra. */
html.pf-loading *,
html.pf-loading *::before,
html.pf-loading *::after {
transition: none !important;
animation: none !important;
}
body.public-form-body {
background: var(--surface-page);
color: var(--text-body);
font-family: var(--font-body);
font-size: var(--font-size);
line-height: var(--line-height);
}
.public-form-container {
margin: 0 auto;
padding: var(--space-2xl) var(--space-lg);
}
.public-form-desc {
color: var(--text-muted);
margin: 0 0 var(--space-lg) 0;
}
/* ─── Honeypot — láthatatlan, csak botoknak ─────────────────── */
.pf-honeypot {
position: absolute;
left: -9999px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
/* ─── Form mezők ────────────────────────────────────────────── */
.pf-form {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: var(--form-gap);
align-items: flex-start;
}
.pf-field {
display: flex;
flex-direction: column;
gap: var(--form-gap);
flex: 0 0 100%;
min-width: 0;
}
/* Feltételes megjelenés: JS toggle-olja ezt az osztályt */
.pf-field--hidden {
display: none !important;
}
/* ─── Mező szélesség modifikátorok (asztali) ───────────────────
A szülő flex container `gap`-jét levonjuk a flex-basis-ből,
hogy a sorba illeszkedés pontos legyen. */
.pf-field--w-full { flex-basis: 100%; }
.pf-field--w-half { flex-basis: calc(50% - var(--form-gap) / 2); }
.pf-field--w-third { flex-basis: calc(33.333% - var(--form-gap) * 2 / 3); }
.pf-field--w-twoThirds{ flex-basis: calc(66.667% - var(--form-gap) / 3); }
/* Mobil (≤ 640px): csak ha a mező EXPLICIT mobil-szélességet kapott
(wm-default = a desktop osztály érvényes marad). */
@media (max-width: 640px) {
.pf-field--wm-full { flex-basis: 100% !important; }
.pf-field--wm-half { flex-basis: calc(50% - var(--form-gap) / 2) !important; }
.pf-field--wm-third { flex-basis: calc(33.333% - var(--form-gap) * 2 / 3) !important; }
.pf-field--wm-twoThirds { flex-basis: calc(66.667% - var(--form-gap) / 3) !important; }
/* JS által osztályozott, soronként egységes label magasságok
(csak többoszlopos mobil soroknál kerül fel). */
.form-label.pf-label-row-2 { min-height: calc(2 * var(--line-height) * 1em); }
.form-label.pf-label-row-3 { min-height: calc(3 * var(--line-height) * 1em); }
.form-label.pf-label-row-4 { min-height: calc(4 * var(--line-height) * 1em); }
}
.pf-required {
color: var(--danger-text);
white-space: nowrap;
}
.pf-hint-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--icon-size-sm);
height: var(--icon-size-sm);
border-radius: var(--radius-pill);
background: var(--border);
color: var(--text-body);
font-size: var(--font-size-label);
font-weight: var(--font-weight-bold);
cursor: help;
margin-left: var(--space-xs);
}
.pf-input {
width: 100%;
padding: var(--space-xs) var(--space-sm);
border: var(--border-width-double) var(--border-style) var(--border);
border-radius: var(--radius-md);
font-family: inherit;
font-size: inherit;
color: inherit;
background: var(--surface-input);
height: var(--input-height);
box-sizing: border-box;
}
.pf-input:focus,
.pf-input:focus-visible {
outline: var(--border-width) var(--border-style) var(--brand);
}
.pf-textarea {
min-height: 80px;
resize: vertical;
}
.pf-textarea:focus,
.pf-textarea:focus-visible {
border: var(--border-width) var(--border-style) var(--brand);
outline: none;
}
.pf-select {
padding-right: var(--space-3xl);
}
.pf-choices {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.pf-choice {
display: flex;
align-items: flex-start;
gap: var(--space-sm);
cursor: pointer;
}
.pf-choice input {
margin-top: 3px;
flex-shrink: 0;
}
/* Kártyás (tile) választó: keret, padding, hover, selected állapot. */
.pf-choices-tile {
gap: var(--space-xs);
}
.pf-choice-tile {
align-items: center;
padding: var(--space-sm) var(--space-md);
border: var(--border-width) var(--border-style) var(--border);
border-radius: var(--radius-md);
background: var(--surface-input);
transition: all var(--transition-smooth);
}
.pf-choice-tile:hover {
background: var(--surface-hover);
}
.pf-choice-tile input {
margin-top: 0;
}
.pf-choice-tile:has(input:checked) {
border-color: var(--brand);
background: var(--surface-hover);
}
/* Tile outline csak billentyűzet fókusznál (egérkattintás nem váltja ki).
A box-szintű outline-t a tile-on belül elnyomjuk, hogy a tile körüli
kemenyen brand-color line legyen az egyetlen fókusz indikátor. */
.pf-choice-tile:has(:focus-visible) {
outline: var(--border-width) var(--border-style) var(--brand);
outline-offset: 2px;
}
.pf-choice-tile .pretty-check-input:focus-visible ~ .pretty-check-box,
.pf-choice-tile .pretty-radio-input:focus-visible ~ .pretty-radio-box {
outline: none;
}
.pf-choice-label {
flex: 1;
}
/* ─── Hibák ─────────────────────────────────────────────────── */
.pf-global-error {
width: 100%;
margin-top: var(--space-2xl);
}
.pf-error {
color: var(--danger-text);
font-size: var(--font-size-label);
margin: 0;
}
.pf-field-error .pf-input,
.pf-field-error .pf-select,
.pf-field-error .ps-trigger {
border-color: var(--danger);
}
/* GDPR / sima checkbox-radio hibajelzés: a pretty-check/radio dobozt
keretezzük pirosra (a natív input most rejtett, a vizuál a box-on van). */
.pf-field-error .pf-choice .pretty-check-box,
.pf-field-error .pf-choice .pretty-radio-box {
border-color: var(--danger);
box-shadow: 0 0 0 2px var(--danger-bg);
}
/* Tile (kártyás) választó hibajelzés: a meglévő border színét állítjuk át. */
.pf-field-error .pf-choice-tile {
border-color: var(--danger);
}
/* Fájl drop-zone hibajelzés (a szaggatott keret pirosra vált). */
.pf-field-error .pf-file-drop {
border-color: var(--danger);
border-style: var(--border-style);
}
/* ─── Submit gomb (--btn-primary-bg gradient) ───────────────── */
.pf-actions {
margin-top: var(--space-sm);
width: 100%;
text-align: center;
}
/*.pf-submit {
border-radius: var(--radius-pill);
padding: var(--space-sm) var(--space-2xl);
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
user-select: none;
line-height: var(--line-height);
font-size: var(--font-size-btn);
font-weight: var(--font-weight-bold);
cursor: pointer;
transition: all var(--transition-smooth);
border: var(--border-width-double) var(--border-style) var(--brand);
background: var(--btn-primary-bg);
color: var(--btn-primary-color);
box-shadow: var(--shadow-btn);
}
.pf-submit:hover,
.pf-submit:focus {
transform: translateY(-2px);
transition: all var(--transition-smooth);
box-shadow: var(--shadow-btn-hover);
}
.pf-submit:focus-visible {
outline: var(--border-width) var(--border-style) var(--brand);
}*/
/* ─── Egyéb mezőtípusok ─────────────────────────────────────── */
.pf-heading {
font-family: var(--font-display);
color: var(--text-primary);
margin: var(--space-md) 0 var(--space-xs) 0;
text-align: center;
}
h1 {
font-size:32px;
}
h2 {
font-size:24px;
}
h3 {
font-size:20px;
}
h4 {
font-size:18px;
}
h5 {
font-size:16px;
}
h6 {
font-size:14px;
}
@media (max-width:991.98px) {
h1 {
font-size:28px;
}
h2 {
font-size:20px;
}
h3 {
font-size:18px;
}
h4 {
font-size:16px;
}
h5 {
font-size:16px;
}
h6 {
font-size:14px;
}
}
@media (max-width:767.98px) {
h1 {
font-size:24px;
}
h2 {
font-size:18px;
}
h3 {
font-size:18px;
}
h4 {
font-size:16px;
}
h5 {
font-size:16px;
}
h6 {
font-size:16px;
}
}
.pf-static {
color: var(--text-body);
}
.pf-gdpr-text {
font-size: var(--font-size-label);
color: var(--text-muted);
}
.pf-gdpr-text a {
color: var(--brand-color);
text-decoration: none;
}
.pf-gdpr-text a:hover {
text-decoration: underline;
}
/* ─── Sikeres beküldés ──────────────────────────────────────── */
.pf-success {
border: var(--border-width) var(--border-style) var(--border);
border-radius: var(--radius-md);
padding: var(--space-2xl);
text-align: center;
background: var(--surface-section);
}
.pf-success-message {
margin: var(--space-sm) 0 0 0;
color: var(--text-body);
}
/* ── Phone field ───────────────────────────────────────────── */
.pf-phone-wrap {
position: relative;
}
.pf-phone-inner {
display: flex;
align-items: stretch;
gap: var(--space-xs);
}
.pf-phone-prefix {
border: var(--border-width-double) var(--border-style) var(--border);
border-radius: var(--radius-md) 0 0 var(--radius-md);
background: var(--surface-input);
color: inherit;
padding: 0 var(--space-sm);
height: var(--input-height);
line-height: var(--input-height);
box-sizing: border-box;
flex: 0 0 auto;
font-variant-numeric: tabular-nums;
display: inline-flex;
align-items: center;
gap: 6px;
user-select: none;
}
.pf-phone-flag {
font-size: 1.15em;
line-height: 1;
}
.pf-phone-local {
border-radius: 0 var(--radius-md) var(--radius-md) 0;
flex: 1 1 auto;
min-width: 0;
}
.pf-phone-local:focus,
.pf-phone-local:focus-visible {
position: relative;
z-index: 1;
}
/* Pretty-select country picker inside the phone field — compact chip style.
Hide ISO code + name in the trigger (flag + dial is enough next to the
local input), and make the wrap auto-width with left-rounded corners so
it joins flush with the local input. */
.pf-phone-wrap .ps-wrap {
flex: 0 0 auto;
width: auto;
}
.pf-phone-wrap .ps-trigger {
border-radius: var(--radius-md) 0 0 var(--radius-md);
padding: 0 var(--space-sm);
gap: 6px;
width: auto;
}
.pf-phone-wrap .ps-trigger-code,
.pf-phone-wrap .ps-trigger-name {
display: none;
}
.pf-phone-wrap .ps-trigger-dial {
color: inherit;
}
/* Phone field: the .ps-wrap is auto-width (chip-sized) inside the phone
field. The portal-mounted popup is positioned by JS based on the
.pf-phone-wrap rect (both desktop and mobile), so no width/position
override is needed here — see positionPopup() in pretty-select.js. */
/* ── File upload field ─────────────────────────────────────── */
.pf-file-wrap {
position: relative;
}
.pf-file-input {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
opacity: 0;
}
/* A pf-file-input rejtett, sr-only stratagy. A DOM sorrend:
,
ezért adjacent sibling (+) nem működik — :has()-szal nézzük a wrap-en. */
.pf-file-wrap:has(.pf-file-input:focus-visible) .pf-file-drop {
border-color: var(--brand);
outline: var(--border-width) var(--border-style) var(--brand);
outline-offset: 2px;
}
.pf-file-drop {
display: flex;
align-items: center;
gap: var(--space-lg);
padding: var(--space-md) var(--space-lg);
border: var(--border-width-double) var(--border-dashed) var(--border);
border-radius: var(--radius-md);
background: var(--surface-input);
color: inherit;
cursor: pointer;
transition: all var(--transition-smooth);
}
.pf-file-drop:hover,
.pf-file-drop.is-dragover {
border-color: var(--brand);
}
.pf-file-drop.has-files {
border-style: var(--border-style);
}
.pf-file-drop-icon {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
flex-shrink: 0;
transition: all var(--transition-smooth);
}
.pf-file-drop:hover .pf-file-drop-icon,
.pf-file-drop.is-dragover .pf-file-drop-icon {
color: var(--brand);
}
.pf-file-drop-text {
display: flex;
flex-direction: column;
gap: var(--space-xs);
min-width: 0;
}
.pf-file-drop-title {
font-weight: var(--font-weight-bold);
font-size: var(--font-size-subtitle);
}
.pf-file-drop-meta {
font-size: var(--font-size-label);
color: var(--text-muted);
}
.pf-file-list {
list-style: none;
padding: 0;
margin: var(--space-sm) 0 0 0;
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.pf-file-item {
display: flex;
align-items: center;
gap: var(--space-xs);
padding: var(--space-xs) var(--space-sm);
background: var(--surface-card);
border-radius: var(--radius-sm);
font-size: var(--font-size-label);
}
.pf-file-item.is-error {
background: var(--brand-light-bg);
color: var(--danger-text);
border: var(--border-width) var(--border-style) var(--danger);
}
.pf-file-item-name {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pf-file-item-size {
color: var(--text-muted);
font-variant-numeric: tabular-nums;
font-size: var(--font-size-label);
}
.pf-file-item-warn {
font-size: var(--font-size-label);
font-weight: var(--font-weight-bold);
text-transform: uppercase;
color: var(--danger-text);
}
.pf-file-item-remove {
width: 22px;
height: 22px;
border: none;
border-radius: var(--radius-sm);
background: transparent;
color: var(--text-muted);
font-size: var(--font-size-title);
line-height: 1;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.pf-file-item-remove:hover {
color: var(--danger-text);
}