/* Reset + global base — mobile first */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--fd-font-sans);
    font-size: var(--fd-text-base);
    line-height: var(--fd-leading-normal);
    color: var(--fd-color-text);
    background-color: var(--fd-color-cream-50);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img,
picture,
svg {
    max-width: 100%;
    display: block;
}

a {
    color: var(--fd-color-primary-strong);
    text-decoration: none;
    transition: color var(--fd-transition-fast);
}

a:hover,
a:focus-visible {
    color: var(--fd-color-accent-strong);
    text-decoration: underline;
}

h1, h2, h3, h4 {
    margin: 0 0 var(--fd-space-3);
    font-family: var(--fd-font-display);
    font-weight: var(--fd-weight-bold);
    line-height: var(--fd-leading-tight);
    letter-spacing: -0.02em;
    color: var(--fd-color-text);
}

h1 { font-size: var(--fd-text-3xl); }
h2 { font-size: var(--fd-text-2xl); }
h3 { font-size: var(--fd-text-xl); }
h4 { font-size: var(--fd-text-lg); }

@media (min-width: 768px) {
    h1 { font-size: var(--fd-text-4xl); }
    h2 { font-size: var(--fd-text-3xl); }
}

p {
    margin: 0 0 var(--fd-space-4);
}

:focus-visible {
    outline: 3px solid var(--fd-color-accent);
    outline-offset: 3px;
    border-radius: var(--fd-radius-sm);
}

h1:focus,
h1:focus-visible {
    outline: none;
}

/* Container helper */
.fd-container {
    width: 100%;
    max-width: var(--fd-container-max);
    margin-inline: auto;
    padding-inline: var(--fd-container-padding);
}

/* Skip link for accessibility */
.fd-skip-link {
    position: absolute;
    inset-inline-start: var(--fd-space-3);
    inset-block-start: var(--fd-space-3);
    background: var(--fd-color-primary-strong);
    color: #fff;
    padding: var(--fd-space-2) var(--fd-space-4);
    border-radius: var(--fd-radius-sm);
    transform: translateY(-150%);
    z-index: 1000;
    transition: transform var(--fd-transition-fast);
}

.fd-skip-link:focus,
.fd-skip-link:focus-visible {
    transform: translateY(0);
    color: #fff;
    text-decoration: none;
}

/* Validation + error UI (kept from default Blazor template) */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--fd-color-green-500);
}

.invalid {
    outline: 1px solid var(--fd-color-accent-strong);
}

.validation-message {
    color: var(--fd-color-accent-strong);
}

.blazor-error-boundary {
    background: #b32121;
    color: white;
    padding: var(--fd-space-4);
    border-radius: var(--fd-radius-md);
}

.blazor-error-boundary::after {
    content: "Hiba történt az oldal megjelenítésekor.";
}

main {
    min-height: calc(100vh - var(--fd-header-height));
}

/* Mobile-only: ne fedje el a fix alsó nav a tartalom alsó részét. */
@media (max-width: 767px) {
    main {
        padding-block-end: calc(var(--fd-bottom-nav-height, 64px) + env(safe-area-inset-bottom, 0px));
    }
}

.fd-grid {
    display: grid;
    gap: var(--fd-space-4);
}

.fd-grid--two,
.fd-grid--three {
    grid-template-columns: 1fr;
}

/* Receptek oldal vertikális ritmusa. A page-tartalom (breadcrumb, hero, szűrő-sáv,
   találati rács, "több betöltése") a Section komponens .fd-section__body-jában él, amit
   a Section.razor renderel — így egy Recipes-scoped .razor.css szabály nem érné el.
   Ezért itt, globálisan, de az oldal ős-osztályára szűkítve adjuk a blokk-közöket. */
.fd-recipes-page .fd-section__body {
    display: flex;
    flex-direction: column;
    gap: var(--fd-space-6);
}

/* Recept-részletoldal vertikális ritmusa — UGYANAZ a minta, mint fent. A szekciók (hero, tápérték/teaser,
   hozzávalók|elkészítés rács, Tipp/Tárolás/Helyettesítés, kapcsolódó receptek) a Section .fd-section__body-jában
   élnek, a .fd-recipe-detail-page pedig a Section ExtraClass elemére kerül (nincs scope-attribútuma), ezért a
   RecipeDetail.razor.css `.fd-recipe-detail-page { display:grid; gap }` szabálya SOSEM illeszkedett → a szekciók
   függőleges köz nélkül összeértek (teaser teteje/alja, hozzávalók-box ↔ Tipp-box). Globálisan javítva. */
.fd-recipe-detail-page .fd-section__body {
    display: flex;
    flex-direction: column;
    gap: var(--fd-space-6);
}

.fd-inline-cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fd-space-3);
}

.fd-meta-list {
    margin: 0;
    padding-left: 1.1rem;
    color: var(--fd-color-ink-700);
}

.fd-meta-list li + li {
    margin-top: var(--fd-space-2);
}

/* Vizuálisan rejtett, de képernyőolvasónak elérhető szöveg. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (min-width: 768px) {
    .fd-grid--two {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fd-grid--three {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Form input palette override (login_minta-aligned, runtime-safe global selectors).
   Az .fd-auth-form IS ide tartozik: e nélkül a --pub-input-* változók feloldatlanok
   maradnak az auth-inputokon, így a `border: 1px solid var(--pub-input-border)` egésze
   érvénytelen → látszólag KERET NÉLKÜL renderel (a keret csak fókuszban jött elő, mert az
   a --fd-color-primary tokent használja). A blokkba felvéve az auth-input a contact/booking
   mezőkkel azonos krém kitöltést + látható keretet kap. */
.fd-contact-form,
.fd-lead-magnet,
.fd-booking-draft,
.fd-auth-form,
.fd-profile-form {
    --pub-input-bg: #f4f2ee;
    --pub-input-border: #ccc8bc;
    --pub-input-border-hover: #a8a296;
    --pub-input-radius: 8px;
    --pub-input-ph-color: #9a9488;
    --pub-input-focus-shadow: 0 0 0 3px rgba(61, 122, 42, 0.18);
}

.fd-contact-form__input,
.fd-lead-magnet__input,
.fd-booking-draft__input,
.fd-auth-form__input {
    width: 100%;
    display: block;
    min-height: 44px;
    padding: 0 1rem;
    border-radius: var(--pub-input-radius);
    border: 1px solid var(--pub-input-border);
    background-color: var(--pub-input-bg);
    font-family: var(--fd-font-sans);
    font-size: var(--fd-text-base);
    line-height: 1;
    color: var(--fd-color-text);
    transition: border-color var(--fd-transition-fast), box-shadow var(--fd-transition-fast);
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
}

.fd-contact-form__input::placeholder,
.fd-lead-magnet__input::placeholder,
.fd-booking-draft__input::placeholder,
.fd-auth-form__input::placeholder {
    color: var(--pub-input-ph-color);
}

.fd-contact-form__input:hover,
.fd-lead-magnet__input:hover,
.fd-booking-draft__input:hover,
.fd-auth-form__input:hover {
    border-color: var(--pub-input-border-hover);
}

.fd-contact-form__input:focus,
.fd-contact-form__input:focus-visible,
.fd-lead-magnet__input:focus,
.fd-lead-magnet__input:focus-visible,
.fd-booking-draft__input:focus,
.fd-booking-draft__input:focus-visible,
.fd-auth-form__input:focus,
.fd-auth-form__input:focus-visible {
    outline: none;
    border-color: var(--fd-color-primary);
    box-shadow: var(--pub-input-focus-shadow);
}

/* ── Egységes select-chevron (publikus űrlapok) ────────────────────────────────
   Rendszer-szintű, konzisztens legördülő-nyíl MINDEN publikus select-en
   (contact / lead-magnet / booking / auth / profil). A natív böngésző-nyilat
   appearance:none tünteti el; helyette egy custom, a mező jobb szélétől
   kényelmesen BEJJEBB (1rem / --fd-space-4) húzott SVG chevron ül — ugyanaz a
   caret-forma, mint a FAQ-nál (polyline 6 9 12 15 18 9), tompított tinta-színnel
   (--fd-color-ink-700, a data-URI-ba kódolva). A padding-right (2.75rem) elég, hogy
   a kiválasztott érték soha ne fusson a nyíl alá. A .fd-contact/lead/booking/auth
   alap-szabály már ad appearance:none-t; a profil select natív nyilát ez húzza be.
   A fókusz-gyűrű / hover-keret / error-state / min-height a családi alap-
   szabályokból öröklődik (a chevron háttérkép, nem ütközik a box-shadow-val). */
select.fd-contact-form__input,
select.fd-lead-magnet__input,
select.fd-booking-draft__input,
select.fd-auth-form__input,
select.fd-profile-form__input {
    appearance: none;
    -webkit-appearance: none;
    /* selects need a little vertical padding since line-height:1 clips descenders in some browsers */
    padding-block: 0.5rem;
    padding-right: 2.75rem;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233d4a44' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--fd-space-4) center;
    background-size: 1rem;
}

/* ── Publikus auth-űrlapok (belépés / regisztráció / jelszó-flow) ─────────────
   Az AuthShell adja a kártya-keretet (scoped CSS); a form-mezők a page markup-jában
   élnek, ezért ezek a szabályok GLOBÁLISAK itt (a scoped ::deep helyett), a
   contact-form input-családdal konzisztens megjelenéssel. */
.fd-auth-form {
    display: flex;
    flex-direction: column;
    gap: var(--fd-space-4);
}

.fd-auth-form__field {
    display: flex;
    flex-direction: column;
    gap: var(--fd-space-2);
}

/* Az auth-mezők kicsit magasabbak a megosztott alapnál — komfortos tap-target + több jelenlét. */
.fd-auth-form__input {
    min-height: 48px;
}

.fd-auth-form__label {
    font-weight: var(--fd-weight-semibold);
    font-size: var(--fd-text-sm);
    letter-spacing: 0.01em;
    color: var(--fd-color-text);
}

/* Jelszómező + megjelenítés/elrejtés kapcsoló. A gomb a mezőn belül, jobbra igazítva ül; az input
   jobb oldali paddingja tart neki helyet, hogy a beírt szöveg ne fusson a gomb alá. */
.fd-auth-form__password {
    position: relative;
    display: flex;
}

.fd-auth-form__password .fd-auth-form__input {
    padding-inline-end: 3rem;
}

.fd-auth-form__password-toggle {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    width: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--fd-color-text-muted);
    cursor: pointer;
    border-radius: var(--fd-radius-sm);
    transition: color var(--fd-transition-fast), box-shadow var(--fd-transition-fast);
}

.fd-auth-form__password-toggle:hover {
    color: var(--fd-color-text);
}

.fd-auth-form__password-toggle:focus-visible {
    outline: none;
    color: var(--fd-color-primary);
    box-shadow: var(--fd-input-focus-shadow);
}

.fd-auth-form__hint {
    font-size: var(--fd-text-xs);
    color: var(--fd-color-text-muted);
}

.fd-auth-form__error {
    color: #b3261e;
    font-size: var(--fd-text-sm);
}

/* A .fd-cta primary stílus a CtaButton SCOPED stíluslapjában él, így egy nyers <button>-re nem
   érvényesül — az auth-submit (a lead-magnet inline űrlap és a foglalási űrlap submitje) ezért itt,
   globálisan kapja meg az explicit primary megjelenést (az accent tokenekkel, a CtaButton primary variánsával összhangban). */
.fd-auth-form__submit,
.fd-lead-magnet__submit,
.fd-booking-draft__submit {
    width: 100%;
    min-height: 46px;
    margin-block-start: var(--fd-space-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--fd-space-3) var(--fd-space-5);
    border: none;
    border-radius: var(--fd-radius-pill);
    font-family: inherit;
    font-size: var(--fd-text-base);
    font-weight: var(--fd-weight-semibold);
    line-height: 1;
    cursor: pointer;
    background-color: var(--fd-color-accent);
    color: #fff;
    transition: background-color var(--fd-transition-fast);
}

.fd-auth-form__submit:hover:not(:disabled),
.fd-auth-form__submit:focus-visible:not(:disabled),
.fd-lead-magnet__submit:hover:not(:disabled),
.fd-lead-magnet__submit:focus-visible:not(:disabled),
.fd-booking-draft__submit:hover:not(:disabled),
.fd-booking-draft__submit:focus-visible:not(:disabled) {
    background-color: var(--fd-color-accent-strong);
}

.fd-auth-form__submit:disabled,
.fd-lead-magnet__submit:disabled,
.fd-booking-draft__submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.fd-auth-form__alert {
    padding: var(--fd-space-3) var(--fd-space-4);
    border-radius: var(--fd-radius-md);
    background-color: #fdecea;
    border: 1px solid #f5c6c2;
    color: #8f1d15;
    font-size: var(--fd-text-sm);
}

.fd-auth-form__alert ul {
    margin: var(--fd-space-2) 0 0;
    padding-inline-start: 1.2rem;
}

.fd-auth-notice {
    padding: var(--fd-space-4);
    border-radius: var(--fd-radius-md);
    background-color: var(--fd-color-green-100);
    border: 1px solid var(--fd-color-primary);
    color: var(--fd-color-green-700);
    font-size: var(--fd-text-base);
    line-height: 1.5;
    text-align: center;
}

.fd-auth-notice--info {
    background-color: var(--fd-color-cream-100);
    border-color: var(--fd-color-border);
    color: var(--fd-color-text);
}

.fd-auth-notice__link {
    display: inline-block;
    margin-block-start: var(--fd-space-3);
    font-weight: var(--fd-weight-medium);
    color: var(--fd-color-primary-strong);
}

.fd-auth-link {
    color: var(--fd-color-primary-strong);
    font-weight: var(--fd-weight-medium);
}

/* ── Auth elválasztó + külső (social) beléptetők ──────────────────────────────
   A SocialLoginOptions komponens markupja a page-ben él, ezért ezek is GLOBÁLIS
   szabályok (a scoped ::deep helyett), a --fd-* tokenekkel. A social gombok
   szándékosan neutrális/outline stílusúak (fehér háttér + finom keret + brand-logó),
   NEM a terracotta primary — a primary az e-mailes belépés submitje marad. */
.fd-auth-divider {
    display: flex;
    align-items: center;
    gap: var(--fd-space-3);
    margin-block: var(--fd-space-2);
    color: var(--fd-color-text-muted);
    font-size: var(--fd-text-sm);
}

.fd-auth-divider::before,
.fd-auth-divider::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background-color: var(--fd-color-border);
}

.fd-auth-divider__text {
    flex: 0 0 auto;
}

.fd-social-login {
    display: flex;
    flex-direction: column;
    gap: var(--fd-space-3);
}

.fd-social-login__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--fd-space-3);
    width: 100%;
    min-height: 48px;
    padding: var(--fd-space-3) var(--fd-space-5);
    border: 1px solid var(--fd-color-border);
    border-radius: var(--fd-radius-pill);
    background-color: var(--fd-color-surface);
    color: var(--fd-color-text);
    font-family: inherit;
    font-size: var(--fd-text-base);
    font-weight: var(--fd-weight-medium);
    line-height: 1;
    text-decoration: none;
    transition: border-color var(--fd-transition-fast), box-shadow var(--fd-transition-fast);
}

.fd-social-login__button:hover {
    border-color: var(--fd-color-ink-400);
    box-shadow: var(--fd-shadow-sm);
}

.fd-social-login__button:focus-visible {
    outline: none;
    border-color: var(--fd-color-primary);
    box-shadow: var(--fd-input-focus-shadow);
}

.fd-social-login__logo {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

.fd-contact-form__textarea,
.fd-booking-draft__textarea {
    padding: 0.8rem 1rem;
    min-height: 7rem;
}

/* ─────────────────────────────────────────────────────────────────────────
   FAQ akkordion — egységes, oldalfüggetlen komponens (Faq.razor / FaqItem.razor).
   Globális szabályok, mert a válasz @ChildContent az OLDAL scope-jában szerzőzik,
   így a FaqItem-scope-olt szabály (pl. .fd-faq__answer p) nem érné el — lásd az
   .fd-auth-form* mintát fentebb. Natív <details>/<summary>: ingyen billentyűzet
   + toggle. Indikátor: finom, körkörös gomb chevronnal, ami nyitáskor 180°-ot fordul.
   ───────────────────────────────────────────────────────────────────────── */
.fd-faq {
    display: grid;
    gap: var(--fd-space-3);
}

.fd-faq__item {
    background-color: var(--fd-color-surface);
    border: 1px solid var(--fd-color-border);
    border-radius: var(--fd-radius-lg);
    box-shadow: var(--fd-shadow-sm);
    overflow: hidden;
    transition: border-color var(--fd-transition-fast),
                box-shadow var(--fd-transition-fast);
}

.fd-faq__item[open] {
    border-color: var(--fd-color-primary);
    box-shadow: var(--fd-shadow-md);
}

.fd-faq__question {
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--fd-space-4);
    padding: var(--fd-space-4) var(--fd-space-5);
    font-size: var(--fd-text-lg);
    font-weight: var(--fd-weight-semibold);
    color: var(--fd-color-ink-900);
}

.fd-faq__question::-webkit-details-marker {
    display: none;
}

.fd-faq__question:focus-visible {
    outline: 2px solid var(--fd-color-primary);
    outline-offset: -2px;
}

.fd-faq__question-text {
    min-width: 0;
}

/* Chevron indikátor: körkörös gomb, semleges alapon.
   Hover → mélyebb sage háttér; nyitva → primary háttér + fehér chevron 180°-ban. */
.fd-faq__indicator {
    flex: none;
    width: 2rem;
    height: 2rem;
    border-radius: var(--fd-radius-pill);
    background-color: var(--fd-color-green-100);
    color: var(--fd-color-primary-strong);
    display: grid;
    place-items: center;
    transition: background-color var(--fd-transition-fast),
                color var(--fd-transition-fast),
                transform var(--fd-transition-base);
}

.fd-faq__indicator svg {
    display: block;
    transition: transform var(--fd-transition-base);
}

.fd-faq__question:hover .fd-faq__indicator {
    background-color: var(--fd-color-sage-100);
}

.fd-faq__item[open] .fd-faq__indicator {
    background-color: var(--fd-color-primary);
    color: var(--fd-color-surface);
}

.fd-faq__item[open] .fd-faq__indicator svg {
    transform: rotate(180deg);
}

.fd-faq__answer {
    padding: 0 var(--fd-space-5) var(--fd-space-5);
    color: var(--fd-color-ink-700);
    line-height: var(--fd-leading-normal);
}

.fd-faq__answer p {
    margin: 0;
}

@media (prefers-reduced-motion: reduce) {
    .fd-faq__item,
    .fd-faq__indicator,
    .fd-faq__indicator svg {
        transition: none;
    }
}

/* Profil oldal (/profil) ──────────────────────────────────────────────────────
   Ezek a szabályok GLOBÁLISAN élnek (nem scoped Profile.razor.css-ben), mert az
   oldal teljes törzse child-komponensek belsejében renderel: a <Section
   ExtraClass="fd-profile-page"> és az <EditForm class="fd-profile-form"> gyökér-
   elemei nem hordozzák (és nincs is ilyen ősük) a Profile.razor scope-attribútumát.
   Emiatt a korábbi `::deep .fd-profile-form` / `__group` / `__actions` / `__hero`
   stb. szabályok NÉMÁN nem illeszkedtek (a `[b-hash] .X` ős-feltétel nem teljesült)
   → a fieldsetek default <fieldset>-ként, gap nélkül renderelődtek, a mentés gomb a
   fölötte lévő kerethez ért. Globális class-szelektorral scope-tól függetlenül
   illeszkednek. A design VÁLTOZATLAN — csak a szelektorok javultak. Ugyanaz a minta,
   mint az .fd-auth-form* és .fd-faq* családoknál. A --pub-input-* paletta a fenti
   közös blokkban már tartalmazza a .fd-profile-form-ot. */
.fd-profile-page__hero {
    display: flex;
    flex-direction: column;
    gap: var(--fd-space-2);
    margin-bottom: var(--fd-space-6);
}

.fd-profile-page__eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: var(--fd-text-xs);
    font-weight: var(--fd-weight-semibold);
    color: var(--fd-color-primary-strong);
}

.fd-profile-page__title {
    margin: 0;
    font-size: var(--fd-text-3xl);
    color: var(--fd-color-ink-900);
}

.fd-profile-page__lead {
    margin: 0;
    max-width: 52ch;
    color: var(--fd-color-ink-700);
    line-height: var(--fd-leading-snug);
}

.fd-profile-page__status {
    padding: var(--fd-space-4);
    color: var(--fd-color-text-muted);
}

.fd-profile-page__status--error {
    color: var(--fd-color-accent-strong);
}

/* ── Form ─────────────────────────────────────────────────────────────────── */
.fd-profile-form {
    display: flex;
    flex-direction: column;
    gap: var(--fd-space-5);
    max-width: 44rem;
}

.fd-profile-form__group {
    display: flex;
    flex-direction: column;
    gap: var(--fd-space-4);
    margin: 0;
    padding: var(--fd-space-5);
    border: 1px solid var(--fd-color-border);
    border-radius: var(--fd-radius-lg);
    background-color: var(--fd-color-surface);
    box-shadow: var(--fd-shadow-sm);
}

.fd-profile-form__legend {
    padding: 0 var(--fd-space-2);
    font-weight: var(--fd-weight-bold);
    font-size: var(--fd-text-base);
    color: var(--fd-color-ink-900);
}

.fd-profile-form__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: var(--fd-space-4);
}

.fd-profile-form__field {
    display: flex;
    flex-direction: column;
    gap: var(--fd-space-2);
}

.fd-profile-form__field label {
    font-weight: var(--fd-weight-semibold);
    color: var(--fd-color-ink-900);
    font-size: var(--fd-text-sm);
}

.fd-profile-form__input {
    width: 100%;
    display: block;
    min-height: 44px;
    padding: 0 1rem;
    border-radius: var(--pub-input-radius);
    border: 1px solid var(--pub-input-border);
    background-color: var(--pub-input-bg);
    font-family: var(--fd-font-sans);
    font-size: var(--fd-text-base);
    line-height: 1;
    color: var(--fd-color-text);
    transition: border-color var(--fd-transition-fast), box-shadow var(--fd-transition-fast);
    box-sizing: border-box;
}

/* A profil select-ek megjelenését a fentebbi egységes `select.fd-*-form__input`
   szabály adja (appearance:none + bejjebb húzott custom chevron), a rendszer többi
   publikus select-jével azonos módon. */

.fd-profile-form__input::placeholder {
    color: var(--pub-input-ph-color);
}

.fd-profile-form__input:hover {
    border-color: var(--pub-input-border-hover);
}

.fd-profile-form__input:focus,
.fd-profile-form__input:focus-visible {
    outline: none;
    border-color: var(--fd-color-primary);
    box-shadow: var(--pub-input-focus-shadow);
}

.fd-profile-form__input--error {
    border-color: var(--fd-color-accent-strong);
}

.fd-profile-form__input--error:focus {
    box-shadow: var(--fd-input-focus-shadow-error, 0 0 0 3px rgba(159, 51, 15, 0.18));
}

.fd-profile-form__field-error {
    color: var(--fd-color-accent-strong);
    font-size: var(--fd-text-sm);
}

/* ── Suggested / effective readouts ───────────────────────────────────────── */
.fd-profile-form__suggested,
.fd-profile-form__effective {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--fd-space-2);
    padding: var(--fd-space-3) var(--fd-space-4);
    border-radius: var(--fd-radius-md);
    background: linear-gradient(135deg, rgba(107, 166, 41, 0.12), rgba(230, 243, 218, 0.85));
    border: 1px solid rgba(61, 122, 42, 0.18);
}

.fd-profile-form__suggested-label,
.fd-profile-form__effective-label {
    font-weight: var(--fd-weight-semibold);
    color: var(--fd-color-ink-700);
}

.fd-profile-form__suggested-value,
.fd-profile-form__effective-value {
    font-size: var(--fd-text-xl);
    color: var(--fd-color-primary-strong);
}

.fd-profile-form__effective-source {
    font-size: var(--fd-text-sm);
    color: var(--fd-color-text-muted);
}

.fd-profile-form__suggested-hint,
.fd-profile-form__effective-hint {
    color: var(--fd-color-text-muted);
    font-size: var(--fd-text-sm);
}

/* ── Dietary chips ────────────────────────────────────────────────────────── */
.fd-profile-form__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fd-space-2);
}

/* ── Feedback + actions ───────────────────────────────────────────────────── */
.fd-profile-form__toast {
    margin: 0;
    padding: var(--fd-space-3) var(--fd-space-4);
    border-radius: var(--fd-radius-md);
    background: linear-gradient(135deg, rgba(107, 166, 41, 0.14), rgba(230, 243, 218, 0.9));
    border: 1px solid rgba(61, 122, 42, 0.2);
    color: var(--fd-color-primary-strong);
    font-weight: var(--fd-weight-semibold);
}

.fd-profile-form__error-banner {
    margin: 0;
    padding: var(--fd-space-3) var(--fd-space-4);
    background-color: var(--fd-color-error-bg);
    border: 1px solid rgba(159, 51, 15, 0.2);
    border-radius: var(--fd-radius-md);
    color: var(--fd-color-accent-strong);
    font-size: var(--fd-text-sm);
}

.fd-profile-form__actions {
    display: flex;
}

/* Explicit primary look for the raw submit <button> (CtaButton's scoped .fd-cta rule doesn't reach
   here) — mirrors the auth-form submit in site.css: pill, primary/accent fill, disabled dimming. */
.fd-profile-form__submit {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--fd-space-3) var(--fd-space-6);
    border: none;
    border-radius: var(--fd-radius-pill);
    font-family: inherit;
    font-size: var(--fd-text-base);
    font-weight: var(--fd-weight-semibold);
    line-height: 1;
    cursor: pointer;
    background-color: var(--fd-color-primary);
    color: #fff;
    transition: background-color var(--fd-transition-fast);
}

.fd-profile-form__submit:hover:not(:disabled),
.fd-profile-form__submit:focus-visible:not(:disabled) {
    background-color: var(--fd-color-primary-strong);
}

.fd-profile-form__submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ── CultureSelector (HU/EN nyelvváltó) ─────────────────────────────────────
   Globálisan (nem scoped .razor.css-ben), mert a komponens több felületen
   (SiteHeader / AuthShell / AdminSideNav) jelenik meg, ahol a scope-attribútum
   öröklődés a projekt ismert csapdája. --fd-* tokenekkel, kompakt szegmens-kapcsoló. */
.fd-culture-selector {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--fd-color-border);
    border-radius: var(--fd-radius-pill);
    background-color: var(--fd-color-surface);
    line-height: 1;
}

.fd-culture-selector__option {
    appearance: none;
    border: 0;
    margin: 0;
    padding: 4px 10px;
    border-radius: var(--fd-radius-pill);
    background: transparent;
    color: var(--fd-color-text-muted);
    font-family: var(--fd-font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.fd-culture-selector__option:hover:not(.fd-culture-selector__option--active),
.fd-culture-selector__option:focus-visible:not(.fd-culture-selector__option--active) {
    color: var(--fd-color-text);
    background-color: var(--fd-color-green-100);
}

.fd-culture-selector__option:focus-visible {
    outline: 2px solid var(--fd-color-primary);
    outline-offset: 1px;
}

.fd-culture-selector__option--active {
    color: #fff;
    background-color: var(--fd-color-primary);
    cursor: default;
}

/* Lábléc-változat: SÖTÉTZÖLD (green-700) háttéren. A base cream felület ott világító
   foltként ütne el, ezért itt áttetsző, halvány keretes pirula + világos feliratok.
   Az aktív nyelv fehér pirulán, sötétzöld szöveggel — erős kontraszttal kiemelkedik. */
.fd-culture-selector--footer {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.28);
}

.fd-culture-selector--footer .fd-culture-selector__option {
    color: rgba(255, 255, 255, 0.78);
    padding: 5px 12px;
}

.fd-culture-selector--footer .fd-culture-selector__option:hover:not(.fd-culture-selector__option--active),
.fd-culture-selector--footer .fd-culture-selector__option:focus-visible:not(.fd-culture-selector__option--active) {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.16);
}

.fd-culture-selector--footer .fd-culture-selector__option--active {
    color: var(--fd-color-green-700);
    background-color: #fff;
}

.fd-culture-selector--footer .fd-culture-selector__option:focus-visible {
    outline-color: #fff;
    outline-offset: 2px;
}

/* Auth-kártya változat: jobbra igazított toolbar-sor a kártya tetején. */
.fd-auth__toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--fd-space-3);
}