/* =============================================================================
   far360 — ŰRLAPOK: címke, beviteli mező, választó, jelölőmező, hibajelzés.

   A mezők SZÁNDÉKOSAN nem üvegek: a beírt adat olvashatósága mindennél előbbre
   való, és egy áttetsző beviteli mező alatt átüt a lap. Az üveg a KEZELŐSZERVEKÉ
   (gomb, lépésjelző, süti-sáv) — a mező átlátszatlan fehér, pirula helyett a
   kártya-sugár halványabb, 14 px-es változatával.
   ============================================================================= */
.f-form-group {
    margin-bottom: 1.25rem;
}

.f-label {
    display: block;
    margin-bottom: 0.4rem;
    color: var(--f-ink);
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: -0.008em;
}
.f-label .f-kotelezo { color: var(--f-primary); margin-left: 2px; }
/* Egy sorban futo cimke (szurosavban, .f-table-filters-en belul): nincs also terkoz. */
.f-label--soros { margin: 0; }
/* Szazalek-mezo — harom karakter + lepteto. Korabban inline style="max-width:9rem". */
.f-input--szazalek { max-width: 9rem; }

.f-hint {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.82rem;
    color: var(--f-grey);
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="date"],
input[type="number"],
input[type="password"],
input[type="search"],
select,
textarea {
    width: 100%;
    padding: 0.65em 0.85em;
    font-family: inherit;
    font-size: 0.98rem;
    color: var(--f-ink);
    background: var(--f-white);
    border: 1px solid var(--f-border);
    border-radius: var(--f-radius-sm);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input::placeholder,
textarea::placeholder { color: var(--f-grey-light); opacity: 1; }

/* FÓKUSZGYŰRŰ a mezőkön — WCAG 2.1 1.4.11: a gyűrűnek MAGÁNAK kell 3:1-et adnia a
   szomszédos felületekhez (fehér mező, --f-ground lap). A .65-es átlátszóságnál a
   kikeveredő szín (#7A71E3 körül) 3,77:1 a fehér mezőn és 3,55:1 a lapháttéren.
   NE vigyük .60 alá: .35-nél a gyűrű már csak 1,91:1-et adott. */
input:focus,
select:focus,
textarea:focus {
    border-color: var(--f-primary);
    box-shadow: 0 0 0 3px rgba(58, 43, 214, .65);
    outline: none;
}

input.input-validation-error,
select.input-validation-error,
textarea.input-validation-error {
    border-color: var(--f-danger);
    background-color: rgba(138, 36, 24, .06);
}

.field-validation-error {
    display: block;
    margin-top: 0.3rem;
    color: var(--f-danger);
    font-size: 0.82rem;
    font-weight: 600;
}

/* Hibátlan (üres) validation-summary ne jelenjen meg üres sávként. */
.validation-summary-valid { display: none; }

.f-radio-group,
.f-checkbox-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.f-radio-group label,
.f-checkbox-group label {
    font-weight: 500;
    cursor: pointer;
}
.f-radio-group input,
.f-checkbox-group input {
    width: auto;
    accent-color: var(--f-primary);
}

/* Jelölőmező + felirat egy sorban, 44 px-es kattintható területtel (WCAG 2.5.5). */
.f-checkbox-sor {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    cursor: pointer;
}
.f-checkbox-sor input[type="checkbox"] { width: 20px; height: 20px; margin: 0; }

fieldset {
    margin: 0 0 1.5rem;
    padding: 1.25rem;
    border: 1px solid var(--f-border);
    border-radius: var(--f-radius-md);
}
fieldset legend {
    padding: 0 0.5rem;
    color: var(--f-ink);
    font-weight: 600;
}

/* Kombó csomag turnus-választó — rádiógombos kártyácskák. */
.f-kombo-valaszto {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--f-border);
    border-radius: var(--f-radius-sm);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.f-kombo-valaszto:hover,
.f-kombo-valaszto:has(input:checked) {
    border-color: var(--f-primary);
    background: var(--f-primary-soft);
}
.f-kombo-valaszto input[type="radio"] {
    width: 20px; height: 20px; margin: 2px 0 0;
    accent-color: var(--f-primary);
    flex: none;
}
.f-kombo-valaszto__alkalmak {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.85rem;
    color: var(--f-grey-2);
}
.f-kombo-valaszto__alkalmak span { display: block; line-height: 1.3; }

/* -----------------------------------------------------------------------------
   Mobil érintési célok (WCAG 2.5.5)
   ----------------------------------------------------------------------------- */
@media (max-width: 820px) {
    input[type="text"],
    input[type="email"],
    input[type="url"],
    input[type="tel"],
    input[type="date"],
    input[type="number"],
    input[type="password"],
    input[type="search"],
    input[type="file"],
    select,
    textarea {
        min-height: 44px;
        /* 0,98 rem = 15,68 px -> 16 px. AZ EGYSZERŰ, DE LEGFONTOSABB MOBIL JAVÍTÁS:
           az iOS Safari 16 px ALATTI beviteli betűméret esetén fókuszra RÁKÖZELÍT az
           egész lapra, és a közelítést nem vonja vissza — a használó a 2. mezőnél már
           egy elcsúszott, nagyított űrlapon áll. A .f-input-alap 0,98 rem-je ezt
           0,32 px-szel bukta. Mérve (2026-09-26): a varázsló 1. lépésén 14 mező, a
           jelenlét-rögzítőn 10, a jelentkezés-listán 6 volt 15,68 px-es. */
        font-size: 1rem;
    }

    /* A file-valaszto sajat, betukeszlet-fuggo belso szelessege (merve 303 px) 320 px-es
       kepernyon OLDALSZINTU vizszintes gorgetest adott — a jelenlet-turnus lapon 47 px-t. */
    input[type="file"] { width: 100%; }

    .f-radio-group input,
    .f-checkbox-group input {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
    }
    .f-radio-group label,
    .f-checkbox-group label {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        min-height: 44px;
    }
}