:root {
    /* Az asszisztens ikon (images/asszisztens-ikon.svg) sötétebb zöldje - az ikonhoz tartozó szövegekhez */
    --color-assistant: #4F8A32;
    --color-bg: #FAF6F0;
    --color-text: #333;
    --color-text-light: #666;
    --color-text-lighter: #ccc;
    --color-border: #ddd;
    --color-bg-hover: #f5f5f5;
    --color-white: #fff;
    --color-bg-dark: #050505d9;
    --color-shadow: rgba(0,0,0,0.1);
    --color-shadow-dark: rgba(0,0,0,0.5);
    --color-primary: #e67e22;
    --color-primary-hover: #d35400;
    --color-primary-soft: rgba(230, 126, 34, 0.2);
    --color-cta-soft: #e8f3e1;
    --color-search-border: var(--color-primary);
    --color-cta: #4a7c2f;
    --color-cta-hover: #3a6224;
    --color-gold: #ae8625;
    --color-gold-hover: #926f1e;
    --color-success: #28a745;
    --color-success-hover: #1e7e34;
    --color-danger: #dc3545;
    --color-danger-hover: #c82333;
    --color-favorite: #e74c3c;
    --color-hero-highlight: var(--color-primary);
    --color-heading: #1a1a1a;
    --color-dark-brown: #2b2320;
    --color-border-dark: #535353;
    --color-footer-bg: #958776;
    --color-footer-border: #7a6e60;
    --color-search-bg: #fff4e6;
    --color-cookie-bg: #5c4b40;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    /* A ragadós fejléc (58px + 12px távolság a tetejétől) alá ne kerüljön elem sem
       ugrásnál (pl. #recipes link), sem billentyűzetes fókuszálásnál (pl. Tab a Mentés gombra) */
    scroll-padding-top: 85px;
}

body {
    font-family: 'Instrument Sans', sans-serif;
    background-color: var(--color-bg);
    color: var(--color-text);
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ===== FEJLÉC / NAVIGÁCIÓ (minden oldalon megjelenik) ===== */
header {
    /* Áttetsző narancs "üveg": a --color-primary (#e67e22 = 230, 126, 34) 90%-ban fedő,
       a backdrop-filter pedig elmossa az alatta görgő tartalmat. Erősebb fedés kell,
       különben a krémszínű oldalháttér "kiszívja" a narancsot (fakó karamell lesz), és
       erős blur, különben a kártyák nagy, sötétbarna formái foltokként ütnek át. A saturate
       csak enyhe, hogy a barna képek ne erősödjenek fel "sárossá". */
    background: rgba(230, 126, 34, 0.9);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    backdrop-filter: blur(24px) saturate(140%);
    padding: 0.5rem 1.5rem;
    /* Lebegő "kapszula": nem ér ki a képernyő széléig, hanem egy lekerekített sziget.
       A width kell, mert a body flex oszlop, és margin: auto mellett a fejléc
       magától a tartalmához zsugorodna; a max-width a main szélességéhez igazítja. */
    width: calc(100% - 2rem);
    max-width: 1200px;
    margin: 0.75rem auto 0;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    /* Lebegő elemnek kicsit erősebb árnyék kell, hogy "elváljon" az oldaltól. Két réteg:
       a nagy, elmosott "lebegteti", a kicsi, közeli a fejléc alját rajzolja ki */
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15), 0 2px 5px rgba(0, 0, 0, 0.08);
    display: grid;
    /* Logó | kereső | avatar: a két szélső oszlop (auto) csak akkora, amekkora a tartalma,
       a középső (1fr) kitölti a maradék helyet - így a kereső a logó és az avatar között
       mindkét oldalon ugyanakkora réssel (l. .header-search margin) nyúlik ki */
    grid-template-columns: auto 1fr auto;
    align-items: center;
    position: sticky;
    top: 0.75rem; /* görgetéskor is ennyire marad a képernyő tetejétől */
    z-index: 1000;
}

.header-left {
    justify-self: start;
}

.header-right {
    justify-self: end;
}

.header-left .logo {
    /* Ugyanakkora doboz, mint a .profile-icon (40px) - a fejléc emiatt nem lesz
       vastagabb. A kuktasapka.svg viewBox-a szorosan a rajz köré van vágva
       (l. a fájlban), így ebben a dobozban a sapka kb. ugyanakkorának látszik,
       mint az avatar-kör a másik oldalon. */
    height: 40px;
    vertical-align: middle;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
}

/* A logó link flex-szel: a sapka és a "Kukta" felirat egy sorban.
   align-items: baseline - a képnek nincs saját alapvonala, ezért a böngésző az alját
   veszi annak, így a felirat alapvonala (a betűk "talpa") a kép aljához igazodik */
.header-left a {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    text-decoration: none;
    /* Fix magasság (= a sapka 40px-e): a felirat betűinek alapvonal alatti része (pl. a
       "g", "j" szára helyének) különben pár pixellel magasabbá tenné a linket, így a
       fejlécet is - és akkor a hero -70px-es felcsúsztatása (home.css) már nem érne el
       a képernyő tetejéig, bézs sáv maradna fölötte. A kilógó rész így is látszik. */
    height: 40px;
}

.logo-text {
    color: var(--color-white);
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1; /* különben az 1.6-os sormagasság miatt magasabb lenne a fejléc */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); /* ugyanaz, mint a sapka drop-shadow-ja */
    /* A kukta-sapka.svg-ben a rajz alatt van egy kis üres hely (a kép kerete lejjebb ér,
       mint a sapka alja), ezért a felirat a látható sapkánál lejjebb ülne. A relative + top
       csak vizuálisan tolja feljebb, a többi elem helyét nem befolyásolja.
       Minél negatívabb, annál feljebb kerül a felirat. */
    position: relative;
    top: -3px;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.header-right a {
    text-decoration: none;
    color: var(--color-white);
    font-weight: 500;
}

.header-right a:hover {
    opacity: 0.8;
}

/* Dropdown menü */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-trigger {
    display: flex;
    align-items: center;
    cursor: pointer;
    gap: 4px;
    user-select: none;
}

.profile-icon {
    height: 40px;
    vertical-align: middle;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
}

/* Lucide chevron-down ikon (svg) - a <i>-t a lucide cseréli svg-re, ezért az svg-t méretezzük */
.dropdown-arrow {
    width: 20px;
    height: 20px;
    color: var(--color-white);
}

.dropdown-menu {
    display: none;
    position: absolute;
    /* A menü jobb széle a fejléc jobb szélével legyen egy vonalban, ne az avatarral:
       ehhez a fejléc jobb paddingjével (1.5rem) és keretével (1px) kell kijjebb tolni */
    right: calc(-1.5rem - 1px);
    top: 100%;
    padding-top: 0.5rem;
}

.dropdown:hover .dropdown-menu {
    display: block;
}

/* Egyetlen fehér doboz az összes menüpont körül (eddig minden menüpontnak saját
   háttere és árnyéka volt) - így férnek el benne az elválasztók és a csoportcím */
.dropdown-panel {
    background-color: var(--color-white);
    border-radius: 4px;
    box-shadow: 0 2px 8px var(--color-shadow);
    padding: 0.35rem 0;
}

/* flex + gap: az ikon és a szöveg egy sorban, közöttük állandó távolsággal */
.dropdown-menu a,
.dropdown-menu form button {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    white-space: nowrap;
    background: none;
    padding: 0.6rem 1.2rem;
    text-decoration: none;
    color: var(--color-text);
    border: none;
    font-size: 0.95rem;
    text-align: left;
    width: 100%;
    cursor: pointer;
}

.dropdown-menu a svg,
.dropdown-menu form button svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--color-primary);
}

/* Csoportok közti elválasztó vonal */
.dropdown-divider {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 0.35rem 0;
}

/* Kis szürke csoportcím (pl. "Szuperadmin") */
.dropdown-label {
    display: block;
    padding: 0.4rem 1.2rem 0.2rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-light);
}

.dropdown-menu a:hover,
.dropdown-menu form button:hover {
    background-color: var(--color-bg-hover);
    color: var(--color-primary);
}

/* Hamburger ikon - alapból rejtve */
.hamburger {
    display: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--color-white);
}

/* Fő tartalom */
main {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
    flex: 1;
    min-width: 0;
}

/* Gombok */
button {
    display: inline-block;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    /* A <button> alapból nem örökli az oldal betűtípusát/sormagasságát (böngésző-
       alapértelmezett fontot használ), ezért egy <button> és egy ugyanolyan
       paddingú <a> gomb más magasságú lenne emellett nélkül */
    font-family: inherit;
    line-height: inherit;
}

/* ===== MODERN KERESŐ SÁV - komponens osztályok (fejléc + főoldal is használja) ===== */
.search-row {
    display: flex;
    align-items: center;
    background: var(--color-white);
    border-radius: 4px;
    overflow: hidden;
}

.search-input-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
    padding: 0.75rem 1rem;
}

.search-input-icon {
    flex-shrink: 0;
    width: 1.1em;
    height: 1.1em;
    color: var(--color-text-light);
}

.search-row .search-input {
    flex: 1;
    min-width: 0;
    width: auto;
    padding: 0;
    border: none;
    font-size: 1rem;
    color: var(--color-text);
    background: transparent;
}

.search-row .search-input:focus {
    outline: none;
    border: none;
    box-shadow: none;
}

.search-divider {
    flex-shrink: 0;
    width: 1px;
    height: 1.5rem;
    background: var(--color-border);
}

.btn-search,
.btn-filters,
.btn-sort {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 0.75rem 1rem;
    border: none;
    border-radius: 0;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.2s, transform 0.1s;
}

.btn-search svg,
.btn-filters svg,
.btn-sort svg {
    width: 1em;
    height: 1em;
    margin-right: 0.3em;
}

.header-search .btn-search svg,
.header-search .btn-filters svg,
.header-search .btn-sort svg {
    width: 1em;
    height: 1em;
    margin-right: 0.25em;
}

.btn-search {
    background: var(--color-cta);
    color: var(--color-white);
    transition: all 0.3s ease;
}

.btn-search:hover {
    background: var(--color-cta-hover);
}

/* Alapból is a (korábbi) hover kinézetet kapják, hogy jobban látszódjanak a receptek felett */
.btn-filters,
.btn-sort {
    background-color: var(--color-bg-hover);
    color: var(--color-text);
    font-weight: 500;
}

/* Hoverre egy árnyalattal sötétebb, hogy legyen visszajelzés */
.btn-filters:hover,
.btn-sort:hover {
    background-color: #e8e8e8;
}

.btn-filters:active,
.btn-sort:active {
    transform: scale(0.98);
}

/* Ha van bekapcsolt szűrő, a Szűrők gomb ne legyen halvány (a has-filters osztályt JS teszi rá) */
.btn-filters.has-filters {
    opacity: 1;
    color: var(--color-primary);
}

/* Számláló buborék a Szűrők gombon: "Szűrők (3)". A font-size fix, mert mobilon
   a gomb font-size: 0-t kap (hogy csak az ikon látszódjon) - így a szám akkor is látszik */
.filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.3rem;
    margin-left: 0.35rem;
    border-radius: 999px;
    background: var(--color-primary);
    color: var(--color-white);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
}

/* A hidden attribútum magától display: none-t adna, de a fenti display: inline-flex
   felülírná - ezért külön ki kell mondani */
.filter-count[hidden] {
    display: none;
}

/* A narancs fejlécen fordított színek, különben beleolvadna a háttérbe */
.header-search .btn-filters.has-filters {
    color: var(--color-white);
}

.header-search .filter-count {
    background: var(--color-white);
    color: var(--color-primary);
}

/* ===== Kereső a header-ben (görgetés után, animálva be- és kicsúszik) ===== */
.header-search {
    display: flex;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 0;
    padding: 0 0.35rem;
    box-sizing: border-box;
    opacity: 0;
    overflow: hidden;
    gap: 0.5rem;
    margin: 0;
    pointer-events: none;
    transition: max-width 0.6s ease, opacity 0.5s ease, margin 0.6s ease;
}

/* A rács középső (1fr) oszlopa nyújtja ki a keresőt, a max-width 0 -> 100% váltás pedig
   animálva "kinyitja". A margin a rés a logó és az avatar felé - mindkét oldalon ugyanannyi */
header.scrolled .header-search {
    flex: 1;
    max-width: 100%;
    opacity: 1;
    margin: 0 2rem;
    pointer-events: auto;
}

header.scrolled .header-search .search-row > * {
    animation: headerSearchItemIn 0.3s ease-out backwards;
}

/* Az elemek egymás után úsznak be, kivéve a kereső mezőt (1.) és a Keresés gombot (2.):
   ez a kettő egy egység, ezért ugyanakkor indulnak, és utánuk jön a többi */
header.scrolled .header-search .search-row > *:nth-child(1),
header.scrolled .header-search .search-row > *:nth-child(2) { animation-delay: 0s; }
header.scrolled .header-search .search-row > *:nth-child(3) { animation-delay: 0.05s; }
header.scrolled .header-search .search-row > *:nth-child(4) { animation-delay: 0.1s; }
header.scrolled .header-search .search-row > *:nth-child(5) { animation-delay: 0.15s; }

/* Nincs benne scale (kicsinyítés): azt minden elem a saját közepe körül csinálná, így a
   mobilon egymáshoz tapadó mező és gomb közt beúszás közben rés nyílna. Csak lefelé
   csúszás + előtűnés - ettől a kettő egy darabként mozog */
@keyframes headerSearchItemIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* A .search-row alapból fehér hátterű (l. fentebb) - ez itt a fejlécben
   szétválasztja: csak a kereső mező + a Keresés gomb kap fehér "dobozt",
   a Szűrők/Rendezés gomb átlátszó marad és a fejléc narancs háttere látszik át rajta */
.header-search .search-row {
    flex: 1;
    min-width: 0;
    height: 38px;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
}

.header-search .search-input-group,
.header-search .btn-search,
.header-search .btn-filters,
.header-search .btn-sort {
    height: 100%;
    padding: 0 0.75rem;
    font-size: 1rem;
    box-sizing: border-box;
}

.header-search .search-input-group {
    background: var(--color-white);
    border-radius: 8px;
}

/* A gombok belső szegélye minden irányban azonos legyen (mint a kártyák feletti keresőben).
   Itt a magasság kötött (38px, hogy a fejléc ne legyen vastagabb), ezért a függőleges
   szegély adott: a 20px-es szövegsor (1.25rem, a számláló buborék magassága) fölött/alatt
   (38 - 20) / 2 = 9px marad - az oldalsó paddinget igazítjuk ehhez */
.header-search .btn-search,
.header-search .btn-filters,
.header-search .btn-sort {
    padding: 0 0.5625rem;
}

/* A Szűrők/Rendezés gomb szövege eddig a fehér dobozra volt tervezve (szürke szín) -
   most hogy a hátterük átlátszó és a narancs fejlécen ülnek, fehér szöveg kell a
   olvashatósághoz, ugyanúgy ahogy a Keresés gomb is fordított színezésű itt */
.header-search .btn-filters,
.header-search .btn-sort {
    background-color: transparent;
    color: var(--color-white);
    opacity: 0.8;
}

.header-search .btn-filters:hover,
.header-search .btn-sort:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: var(--color-white);
    opacity: 1;
    border-radius: 8px;
}

.header-search .search-divider {
    background: rgba(255, 255, 255, 0.35);
}

/* A fejléc keresés gombja fordított színezésű (fehér alapon narancs), mivel a fejléc háttere már narancs */
.header-search .btn-search {
    background: var(--color-white);
    color: var(--color-primary);
    font-weight: 700; /* félkövérebb, mint a többi gomb (600), hogy kitűnjön */
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); /* lágy árnyék: épp csak elválik a fejléctől, a lapos stílushoz illik */
    margin-left: 0.5rem; /* térköz a keresőmező és a gomb között */
}

.header-search .btn-search:hover {
    background: var(--color-search-bg);
    transform: none;
}

/* Keskenyebb asztali/tablet nézetben (pl. kisebb laptop) a feliratok eltűnnek,
   csak az ikonok maradnak, hogy a keresősáv ne csorduljon túl a headeren */
@media (max-width: 1200px) {
    header.scrolled .header-search .search-input-group {
        flex: 2;
        min-width: 0;
    }

    header.scrolled .header-search .btn-search,
    header.scrolled .header-search .btn-filters,
    header.scrolled .header-search .btn-sort {
        flex: 0 0 auto;
        /* csak ikon (16px) van a gombban: (38 - 16) / 2 = 11px marad fent/lent,
           oldalt is ennyi kell, így a gomb négyzet alakú */
        padding: 0 0.6875rem;
        font-size: 0;
    }

    header.scrolled .header-search .btn-search svg,
    header.scrolled .header-search .btn-filters svg,
    header.scrolled .header-search .btn-sort svg {
        margin-right: 0;
        width: 1rem;
        height: 1rem;
    }
}

/* ===== RESPONSIVE - KERESŐ GOMBOK (fejléc + főoldal keresősávja is) ===== */
@media (max-width: 600px) {
    .search-input-group {
        padding: 0.75rem 0.6rem;
    }

    .btn-search,
    .btn-filters,
    .btn-sort {
        padding: 0.75rem 0.6rem;
        font-size: 0;
    }

    .btn-search svg,
    .btn-filters svg,
    .btn-sort svg {
        margin-right: 0;
        width: 1.1rem;
        height: 1.1rem;
    }
}

/* ===== RECEPTKÁRTYA + GALÉRIA (több oldalon újrahasznált komponens) ===== */
.recipe-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px 0;
    justify-content: space-between;
    max-width: 1200px;
}

.recipe-card {
    background: var(--color-white);
    border: 1px solid #ECE3D8;
    border-radius: 4px;
    padding: 20px;
    width: 350px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.recipe-card h2 {
    color: var(--color-heading);
}

.card-image-wrapper {
    position: relative;
    margin-bottom: 10px;
}

.recipe-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    /* A régi belső "keretárnyék" (inset box-shadow) és szürke keret helyett lapos, lekerekített
       kép. Az alapképek (svg) háttere átlátszó, ezért kapnak egy halvány krém hátteret - így
       a fehér kártyán is látszik a kép területe. Saját feltöltött fotónál ez nem látszik. */
    border-radius: 8px;
    background-color: var(--color-bg);
    filter: brightness(1.06); /* egy leheletnyivel világosabb: a sötétebb barna tónusok kicsit feljebb jönnek */
}

.recipe-author {
    color: var(--color-text-light);
    font-size: 0.9em;
}

.recipe-description {
    color: var(--color-text);
    margin: 10px 0;
}

/* Kártya alsó gombsor: Részletek + fakanál egymás mellett */
.card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: auto;
}

/* A kártya két gombja (Részletek + kerek asszisztens gomb) egyforma árnyékot kap, hogy
   kiemelkedjenek a kártyából és "megnyomhatónak" tűnjenek; hoverre picit erősebb lesz */
.card-actions .btn-view,
.card-actions .btn-spoon {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

.card-actions .btn-view:hover,
.card-actions .btn-spoon:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* A Részletek gomb alapból is halvány narancs, ezért hoverre egy árnyalattal erősebb narancs lesz */
.card-actions .btn-view:hover {
    background: var(--color-primary-soft);
}

.btn-view {
    display: block;
    padding: 8px 24px;
    background: var(--color-white);
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
    border: 2px solid var(--color-search-border);
    border-radius: 4px;
    text-align: center;
    margin-top: auto;
    transition: all 0.3s ease;
}

.card-actions .btn-view {
    flex: 1;
    margin-top: 0;
    /* Alapból is a hover-es halvány narancs háttér (hoverre már csak az árnyék erősödik) */
    background: var(--color-search-bg);
    /* A sor a nagyobb kerek asszisztens gomb miatt 48px magas; így a Részletek
       gomb nem nyúlik meg vele, hanem a saját magasságában középen marad */
    align-self: center;
}

.btn-spoon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    /* Kerek ikongomb: fix 48px-es négyzet + border-radius: 50% -> kör. A flex-shrink: 0 miatt keskeny kártyán sem nyomódik össze oválissá,
       az align-self: center pedig függőlegesen a sor közepére teszi (nem nyújtja meg). */
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    align-self: center;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
    background: rgba(74, 124, 47, 0.2);
    color: var(--color-cta-hover);
    /* Vékony keret az asszisztens zöldjével */
    border: 1px solid var(--color-assistant);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-spoon:hover {
    background: rgba(74, 124, 47, 0.32);
    color: var(--color-cta-hover);
}

.btn-spoon svg {
    width: 20px;
    height: 20px;
}

/* A körben több hely jut az ikonnak (28px × 1.3-as nagyítás ≈ 36px) */
.btn-spoon .icon-assistant {
    width: 28px;
    height: 28px;
}

.btn-view:hover {
    background: var(--color-search-bg);
    color: var(--color-primary);
}

.btn-view::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Ugyanaz a keretes gomb-stílus, mint a .btn-view, de a ::after kattintható-réteg
   trükkje nélkül (az csak a .recipe-card position:relative kontextusában biztonságos) */
.btn-outline {
    display: inline-block;
    padding: 8px 24px;
    background: var(--color-white);
    color: var(--color-primary);
    font-weight: 600;
    border: 2px solid var(--color-search-border);
    border-radius: 4px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-outline:hover {
    background: var(--color-search-bg);
    color: var(--color-primary);
}

/* Saját receptek kártyáin: Szerkesztés + Törlés külön, teljes szélességű sorban.
   flex-basis: 100% -> a .card-actions (flex-wrap) új sorba tördeli.
   Belül grid 1fr 1fr: két pontosan egyforma oszlop (flex:1-gyel a link saját
   padding/border-e miatt a Szerkesztés szélesebb lett volna, mint a formban ülő Törlés) */
.card-owner-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    flex-basis: 100%;
}

/* keretes gombok, mint a Részletek (.btn-view), csak visszafogottabbak.
   position + z-index: a .btn-view::after rétege az egész kártyát lefedi
   (kattintásra a részletekre visz) - e nélkül ezekre a gombokra nem lehetne kattintani */
.btn-card-edit,
.btn-card-delete {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 6px 8px;
    background: var(--color-white);
    border: 2px solid var(--color-border);
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-card-edit svg,
.btn-card-delete svg {
    width: 16px;
    height: 16px;
}

.btn-card-edit {
    color: var(--color-text-light);
}

.btn-card-edit:hover {
    border-color: var(--color-primary);
    background: var(--color-search-bg);
    color: var(--color-primary);
}

.btn-card-delete {
    color: var(--color-danger);
}

.btn-card-delete:hover {
    border-color: var(--color-danger);
    background: #fdecee;
}

.btn-edit {
    display: inline-block;
    padding: 8px 16px;
    background-color: var(--color-success);
    color: var(--color-white);
    text-decoration: none;
    border-radius: 4px;
    margin-left: 5px;
}

.btn-edit:hover {
    background-color: var(--color-success-hover);
}

.btn-delete {
    display: inline-block;
    padding: 8px 16px;
    background-color: var(--color-danger);
    color: var(--color-white);
    text-decoration: none;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-left: 5px;
}

.btn-delete:hover {
    background-color: var(--color-danger-hover);
}

/* Elkészítem / Vissza a recepthez gomb (recept részletező + asszisztens oldal is használja) */
.btn-cook {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.9rem 2rem;
    background: var(--color-cta);
    color: #fff;
    border: 2px solid transparent;
    font-size: 1.05rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 8px;
    transition: background 0.25s ease, transform 0.25s ease;
}

.btn-cook:hover {
    background: var(--color-cta-hover);
    transform: translateY(-2px);
    color: #fff;
}

.btn-cook svg,
.btn-cook .icon-assistant {
    width: 1.2em;
    height: 1.2em;
}

/* Kukta asszisztens ikon (images/asszisztens-ikon.svg).
   Az ikon saját színeivel jelenik meg, háttérképként (a span csak a helyét és méretét adja).
   A ?v=2: ha lecseréled a fájlt ugyanezen a néven, növeld meg, hogy a böngésző ne a régit mutassa a cache-ből.
   transform: scale -> az ikon nagyobbnak látszik, de a helye (és így a gomb mérete) nem nő,
   mert a transform nem hat az elrendezésre, csak a kirajzolásra. */
.icon-assistant {
    display: inline-block;
    flex-shrink: 0;
    width: 1.2em;
    height: 1.2em;
    transform: scale(1.3);
    /* A drop-shadow az ikon alakját követi (nem a span négyzetét, mint a box-shadow),
       így a fehér sapka körvonala halvány háttéren is kirajzolódik */
    filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.25));
    background: url('../images/asszisztens-ikon.svg?v=2') center / contain no-repeat;
}

/* .btn-cook, ha egy sima <form> (nem flex konténer, pl. login/register kártya)
   egyetlen/utolsó eleme - enélkül a form blokk-szélességű elemként a bal
   szélhez tapadna, a szövege pedig balra igazítva jelenne meg benne */
.btn-cook-centered {
    display: flex;
    justify-content: center;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

/* .btn-cook méretű/alakú gomb, de narancssárga (mint a főoldal kereső gombja,
   .recipes-section .search-bar .btn-search, home.css) - pl. Profil Mentés, Bejelentkezés,
   Regisztráció, asszisztens "Vissza a recepthez" gombja; a többi .btn-cook zöld marad */
/* Ugyanaz az árnyék, mint a kártyák és a kereső gombjain (.card-actions, home.css): így
   "megnyomható" gombnak hat, hoverre picit erősebb. A transition-be a box-shadow is
   bekerül, hogy az árnyék is fokozatosan váltson */
.btn-cook-primary {
    background: var(--color-primary);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.btn-cook-primary:hover {
    background: var(--color-primary-hover);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* .btn-cook méretű/alakú gomb veszélyes művelethez - csak a színe tér el */
.btn-cook-danger {
    background: var(--color-danger);
}

.btn-cook-danger:hover {
    background: var(--color-danger-hover);
    color: #fff;
}

/* Kedvenc gomb (jelenleg nincs élő .btn-favorite osztályú elem, csak a -card és -banner variánsok vannak használva lejjebb) */
.btn-favorite {
    background: none;
    border: 2px solid var(--color-favorite);
    color: var(--color-favorite);
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    margin-top: 20px;
}

.btn-favorite.favorited {
    background: var(--color-favorite);
    color: var(--color-white);
}

.btn-favorite:hover {
    opacity: 0.8;
}

/* Kedvenc gomb a kártyán */
.card-favorite-form {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: #fff;
    padding: 0.5rem 0.9rem;
    border-radius: 24px;
}

.btn-favorite-card {
    background: #fff;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: transform 0.2s;
    color: var(--color-favorite);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-favorite-card:hover {
    transform: scale(1.2);
}

.btn-favorite-card.favorited {
    background: #fff;
    color: var(--color-favorite);
}

.card-favorite-count {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    font-size: 0.85rem;
    color: var(--color-b);
    font-weight: 600;
    background: #fff;
    padding: 0.25rem 0.6rem;
    border-radius: 20px;
}

.favorite-badge {
    font-size: 0.85rem;
    color: var(--color-text);
    font-weight: 600;
}

/* Kedvenc szív kitöltése (kártyán) */
.btn-favorite-card:not(.favorited) .lucide path {
    fill: none;
}

.btn-favorite-card.favorited .lucide path {
    fill: currentColor;
}

/* Csillagos értékelés a kártyán */
.star-rating {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 8px 0;
}

.star-rating .stars {
    font-size: 1.1rem;
    letter-spacing: 1px;
}

.star-rating .stars span {
    color: #DBD3C8;
}

.star-rating .stars span.filled {
    color: var(--color-primary);
}

.star-rating .rating-number {
    font-weight: 600;
    font-size: 0.85rem;
    color: #555;
}

.star-rating .review-count {
    font-size: 0.8rem;
    color: #999;
}

.recipe-card .star-rating {
    margin: 6px 0 4px 0;
}

/* ===== HOVER TOOLTIP A KÁRTYÁKON ===== */
.card-tooltip {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    color: #fff;
    padding: 20px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 10;
}

.recipe-card:hover {
    z-index: 5;
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.recipe-description:hover ~ .card-tooltip,
.card-tooltip:hover {
    opacity: 1;
    visibility: visible;
}

.tooltip-description {
    font-size: 0.9rem;
    line-height: 1.6;
    text-align: center;
}

.no-results {
    text-align: center;
    color: var(--color-text-light);
    padding: 40px 0;
    width: 100%;
}

/* Régi szűrő űrlap stílusok - jelenleg nincs .filter-form/.filter-search/.filter-select/.btn-filter
   osztályú elem a nézetekben (a szűrés ma a modal ablakon keresztül működik), de a szabályok
   megtartva, hátha később visszakerül ez az űrlap-alapú megoldás */
.filter-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    background-color: var(--color-white);
    padding: 15px;
    border-radius: 4px;
    box-shadow: 0 2px 4px var(--color-shadow);
    margin-bottom: 20px;
}

.filter-search {
    flex: 1 1 200px;
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font-size: 1rem;
}

.filter-search:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-primary-soft);
}

.filter-select {
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font-size: 1rem;
    background-color: var(--color-white);
    cursor: pointer;
}

.filter-select:focus {
    outline: none;
    border-color: var(--color-primary);
}

.btn-filter {
    background-color: var(--color-primary);
    color: var(--color-white);
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
}

.btn-filter:hover {
    background-color: var(--color-primary-hover);
}

/* ===== KÁRTYÁK (recept részletező + asszisztens oldal is használja) ===== */
.content-card {
    background: var(--color-white);
    border: 1px solid #ECE3D8;
    border-radius: 4px;
    padding: 20px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.1);
}

.content-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.4rem;
    margin-bottom: 1.5rem;
    color: var(--color-text);
    border-bottom: 2px solid var(--color-primary-soft);
    padding-bottom: 0.75rem;
}

.title-icon {
    display: inline-flex;
    color: var(--color-primary);
}

.title-icon svg {
    width: 1.5rem;
    height: 1.5rem;
}

/* Hozzávaló- és lépés-sor (recept részletező oldal listája ÉS az űrlap sorai is ezt használják) */
.ingredient-item {
    display: flex;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--color-border);
}

.ingredient-item:last-child {
    border-bottom: none;
}

.step-item {
    display: flex;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--color-border);
}

.step-item:last-child {
    border-bottom: none;
}

/* Mobilon egy sorba nem fért ki minden mező, ezért a szövegmezők pár pixelesre
   szűkültek. Rács (grid) elrendezéssel a szövegmező kap egy saját, teljes sort,
   alatta a lenyíló(k) és a × gomb. A "1 / -1" = az első oszlopvonaltól az
   utolsóig, azaz teljes szélesség. */
@media (max-width: 768px) {
    #steps-container .step-item,
    #ingredients .ingredient-item {
        display: grid;
        gap: 0.5rem;
        align-items: center;
    }

    /* lépés: [kategória lenyíló] [×] */
    #steps-container .step-item {
        grid-template-columns: 1fr auto;
    }

    /* alapanyag: [mennyiség] [mértékegység] [×] */
    #ingredients .ingredient-item {
        grid-template-columns: 1fr 1fr auto;
    }

    #steps-container .step-item label,
    #steps-container .step-item input[type="text"],
    #ingredients .ingredient-item input[type="text"] {
        grid-column: 1 / -1;
        min-width: 0;
    }

    #ingredients .ingredient-item input,
    #ingredients .ingredient-item select,
    #steps-container .step-item select {
        width: 100%;
        min-width: 0;
    }

    /* A hibaüzenet teljes szélességű, és az order: 1 a sor végére teszi
       (a lépéseknél a HTML-ben a × gomb előtt van) */
    #steps-container .form-error,
    #ingredients .form-error {
        grid-column: 1 / -1;
        order: 1;
    }

    /* A rejtett (átlátszó) karakterszámláló is elfoglalná a helyét a rácsban,
       ezért csak akkor kap helyet, amikor tényleg látszik */
    #steps-container .char-counter:not(.char-counter--visible),
    #ingredients .char-counter:not(.char-counter--visible) {
        display: none;
    }

    #steps-container .char-counter,
    #ingredients .char-counter {
        grid-column: 1 / -1;
        text-align: right;
    }
}

/* ===== SAJÁT KÉP FELTÖLTŐ DOBOZ (recept űrlap) ===== */
.upload-box {
    position: relative;
    display: block;
    /* Ugyanakkora, mint a kép a recept kártyán (.recipe-image), így az előnézet
       pontosan azt mutatja, ami a kártyán látszani fog */
    width: 308px;
    max-width: 100%;
    height: 200px;
    border: 2px dashed var(--color-border);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    background: var(--color-white);
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.upload-box:hover {
    border-color: var(--color-primary);
    background: var(--color-search-bg);
}

.upload-input {
    display: none;
}

.upload-placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0; /* csak kiválasztott kép után látszik (a JS állítja 1-re) */
}

/* ===== ELŐRE DEFINIÁLT KÉPEK VÁLASZTÓJA (recept űrlap) ===== */
.image-section-title {
    margin-bottom: 0.5rem;
}

.image-section {
    margin-top: 1rem;
}

/* auto-fill + minmax: annyi oszlop, amennyi min. 155px-es szélességgel kifér,
   így mobilon magától kevesebb oszlopra tördel */
.image-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
    gap: 12px;
}

.image-option {
    cursor: pointer;
}

/* A rádiógomb láthatatlan, de a helyén marad (nem display:none), így
   billentyűzettel (Tab + nyilak) is választható és az űrlap elküldi */
.image-option-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.image-option-card {
    position: relative;
    display: block;
    border: 2px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--color-white);
    transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

/* ugyanaz az arány (1.55:1), mint a receptkártya képén (.recipe-image: kb. 310x200),
   így azt mutatja, ami a kártyán lesz */
.image-option-card img {
    display: block;
    width: 100%;
    aspect-ratio: 1.55;
    object-fit: cover;
}

.image-option-label {
    display: block;
    padding: 6px;
    text-align: center;
    font-size: 0.9rem;
    color: var(--color-text-light);
}

/* Mobilon a kártya belseje csak ~310px széles, ahová két 155px-es oszlop már nem fér
   ki, így minden kép egyesével, óriásira nyújtva jelent meg. Kisebb minimummal
   3 oszlop fér el, és a képválasztó nem lesz több képernyőnyi hosszú. */
@media (max-width: 768px) {
    .image-picker {
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
        gap: 8px;
    }

    .image-option-label {
        padding: 4px 2px;
        font-size: 0.75rem;
    }
}

.image-option:hover .image-option-card {
    border-color: var(--color-primary);
    transform: translateY(-2px);
}

/* "+" = szomszéd-kombinátor: a bejelölt rádiógomb UTÁN közvetlenül következő kártya.
   Így JS nélkül, tisztán CSS-ből jelöljük a kiválasztott képet. */
.image-option-input:checked + .image-option-card {
    border-color: var(--color-primary);
    background: var(--color-search-bg);
}

.image-option-input:checked + .image-option-card .image-option-label {
    color: var(--color-primary);
    font-weight: 700;
}

/* pipa jelvény a kiválasztott kép jobb felső sarkában */
.image-option-input:checked + .image-option-card::after {
    content: '✓';
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-white);
    font-weight: 700;
}

/* billentyűzetes navigációnál látszódjon, melyik képen áll a fókusz */
.image-option-input:focus-visible + .image-option-card {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.upload-hint {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-lighter);
    font-size: 10rem;
    font-weight: 200;
    line-height: 1;
    transition: color 0.2s ease, transform 0.2s ease;
}

.upload-box:hover .upload-hint {
    color: var(--color-primary);
    transform: scale(1.1);
}

/* Karakterhossz-számláló - csak akkor látszik, ha a mező közelít a limithez
   (JS: updateCounter, layouts/app.blade.php), addig opacity:0 (nem display:none,
   hogy megjelenéskor ne ugorjon a layout) */
.char-counter {
    margin-left: 4px;
    color: #999;
    font-size: 0.85em;
    min-width: 4em;
    display: inline-block;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.char-counter--visible {
    opacity: 1;
}

/* ===== FORM ŰRLAP KOMPONENSEK (login, register, profil, recept form is használja) ===== */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select {
    width: 100%;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font-size: 1rem;
    font-family: inherit;
    color: var(--color-text);
    background-color: var(--color-white);
    transition: border-color 0.15s ease;
}

textarea {
    resize: vertical;
}

input[type="text"]:hover:not(:focus):not(:disabled),
input[type="email"]:hover:not(:focus):not(:disabled),
input[type="password"]:hover:not(:focus):not(:disabled),
input[type="number"]:hover:not(:focus):not(:disabled),
textarea:hover:not(:focus):not(:disabled),
select:hover:not(:focus):not(:disabled) {
    border-color: #bbb;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-primary-soft);
}

input:disabled,
textarea:disabled,
select:disabled {
    background-color: var(--color-bg-hover);
    color: var(--color-text-light);
    cursor: not-allowed;
}

/* Hibás mező (validációs hiba mellé, a @error blade direktívával együtt) */
input.is-invalid,
textarea.is-invalid,
select.is-invalid {
    border-color: var(--color-danger);
}

input.is-invalid:focus,
textarea.is-invalid:focus,
select.is-invalid:focus {
    border-color: var(--color-danger);
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.2);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 24px;
}

.form-group label {
    font-weight: 600;
    color: var(--color-text);
}

.form-error {
    color: var(--color-danger);
    font-size: 0.85rem;
}

/* Figyelmeztetés (nem hiba, csak teendő) - pl. hibás beküldés után újra ki kell választani a képet */
.form-warning {
    margin-bottom: 0.75rem;
    padding: 0.6rem 0.8rem;
    border-left: 4px solid var(--color-primary);
    border-radius: 4px;
    background: var(--color-search-bg);
    color: var(--color-text);
    font-size: 0.9rem;
}

.form-success {
    color: var(--color-success);
    margin-bottom: 1rem;
}

/* Középre igazított, keskeny kártya - bejelentkezés/regisztráció form köré.
   A padding-top 24px (nem 32px), mert a cím a Profil oldal mintája szerint
   a kártyán kívül van (back-link + sima H1). */
.form-card {
    background: var(--color-white);
    border: 1px solid #ECE3D8;
    border-radius: 4px;
    padding: 24px 32px 32px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.1);
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
}

/* Szélesebb változat olyan formhoz, ahol több/hosszabb mező van */
.form-card--wide {
    max-width: 760px;
}

.form-card p {
    margin-top: 1rem;
    text-align: center;
}

/* Linkek a form-kártyán (pl. "Jelentkezz be!", szabályzatok) - a böngésző alap kékje
   helyett az oldal narancs kiemelő színe */
.form-card a {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
}

.form-card a:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
}

/* Új lapon nyíló link jelzése: kis "kifelé mutató nyíl" ikon a szöveg után */
.external-link svg {
    width: 0.85em;
    height: 0.85em;
    margin-left: 0.2em;
    vertical-align: -0.05em;
}

/* Csak képernyőolvasónak szóló szöveg: a képernyőn nem látszik, de a felolvasó
   program felolvassa (display:none-nal a felolvasó sem "látná"). Szabványos minta. */
.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;
}

/* Jelölőnégyzet + hosszabb szöveg egy sorban (pl. ÁSZF elfogadása).
   A .form-group label félkövér stílusát itt visszaállítjuk normálra, mert ez
   egy egész mondat, nem egy rövid mezőcímke. */
.form-group label.checkbox-inline {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-weight: 400;
    font-size: 0.9rem;
    line-height: 1.4;
    cursor: pointer;
}

.checkbox-inline input[type="checkbox"] {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    accent-color: var(--color-primary); /* a pipa/doboz színe narancs a böngésző alap kékje helyett */
    cursor: pointer;
}

/* Egymás alatti kártyák (pl. külön cím-kártya + tartalom-kártya) egységes függőleges
   térköze és a header/footer-től való távolsága - minden aloldalon ezt használjuk */
.card-stack {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin: 3rem auto;
}

/* Keskeny változat (bejelentkezés, regisztráció): az egész oszlop olyan széles, mint
   a .form-card (440px), így a vissza link és a cím a kártya bal széléhez igazodik,
   nem a képernyő bal széléhez. A margin: auto (fent) középre teszi az oszlopot. */
.card-stack--narrow {
    max-width: 440px;
    /* Tömörebb (csak bejelentkezés + regisztráció): kevesebb üres hely a cím alatt, hogy
       a rövid űrlap egy átlagos laptop képernyőjén is görgetés nélkül kiférjen */
    gap: 1rem;
    /* Az űrlap kitölti a képernyőt a fejléc alatt (70px = a lebegő fejléc 58px + 12px
       távolsága a tetejétől), és függőlegesen középen van - így a lábléc a képernyő alja
       alá kerül, csak görgetéssel látszik. A border-box miatt a padding beleszámít a magasságba. */
    min-height: calc(100vh - 70px);
    margin-top: 0;
    margin-bottom: 0;
    padding: 1.5rem 0;
    box-sizing: border-box;
    justify-content: center;
}

.card-stack--narrow h1 {
    font-size: 1.75rem;
    line-height: 1.2;
}

/* A mezők mérete nem változik, csak a köztük lévő levegő */
.card-stack--narrow .form-card {
    padding: 20px 28px 24px;
}

.card-stack--narrow .form-group {
    gap: 6px;
    margin-bottom: 16px;
}

.card-stack--narrow .form-card p {
    margin-top: 0.75rem;
    margin-bottom: 0;
}

/* Recept form kártyáinak (content-card szekciók) függőleges térköze */
.form-sections {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* A form-sections alján álló submit gomb ne nyúljon a kártyák teljes szélességére */
.form-sections > button[type="submit"] {
    align-self: center;
    justify-content: center;
    width: 100%;
    max-width: 320px;
}

/* Veszélyes/visszavonhatatlan művelet (pl. fiók törlése) vizuális leválasztása */
.danger-zone {
    background: var(--color-white);
    border: 1px solid var(--color-danger);
    border-radius: 4px;
    padding: 1.5rem;
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
}

/* Középre igazított, max 800px széles szövegblokk (pl. adatkezelési tájékoztató, ászf) */
.page-section {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.page-section h1 {
    color: var(--color-heading);
}

/* Kategória-jelölőnégyzetek chip-szerű elrendezése (recept form) */
.checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.checkbox-group label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    background: var(--color-white);
    cursor: pointer;
    font-size: 0.9rem;
}

.checkbox-group label:hover {
    border-color: var(--color-primary);
}

/* Kategória ikon (pl. mentességek) a szűrő kapszulákban és a recept feltöltésnél.
   flex-shrink: 0 - szűk helyen se nyomódjon össze az ikon a szöveg miatt */
.category-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* Profilkép körkép előnézet (profil oldal) */
.profile-avatar-preview {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #ccc;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.35);
}

/* ===== MODAL (megosztott keret - a Szűrők/Rendezés modal tartalma home.css-ben
   van, de a JS (openModal/closeModal, layouts/app.blade.php) globális, ezért a
   keret-stílus is itt van, hogy a Profil oldal fiók-törlés megerősítése is
   használhassa saját CSS-fájl behúzása nélkül) ===== */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-shadow-dark);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.modal.active {
    display: flex;
}

.modal-content {
    background: var(--color-white);
    border-radius: 4px;
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.modal-small {
    max-width: 350px;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--color-border);
}

.modal-header h3 {
    margin: 0;
    font-size: 1.25rem;
}

.close-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--color-text-light);
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.close-btn:hover {
    background-color: var(--color-bg-hover);
}

.modal-body {
    padding: 1.5rem;
}

.modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--color-border);
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

/* ===== PROFIL OLDAL - 3 önálló panel (Alapadatok / Jelszó módosítása / Fiók törlése) ===== */
.profile-page {
    max-width: 950px;
    margin: 3rem auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Két egyenlő oszlop egymás mellett (Profil: Alapadatok + Jelszó módosítása;
   recept form: Alapadatok + Kép) - a grid alapból azonos magasságúra
   nyújtja mindkét panelt */
.grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--color-text-light);
    text-decoration: none;
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
}

.back-link:hover {
    color: var(--color-primary);
}

.back-link svg {
    width: 1em;
    height: 1em;
}

/* Asztali nézetben a vissza link csak ott látszik, ahol a böngésző Vissza gombja nem
   segít: a jogi oldalakon (a regisztrációból új lapon nyílnak, ott nincs "vissza") és a
   recept oldalán (megosztott linkről érkezve a Vissza kivezetne az oldalról). Ezeken a
   .back-link--always osztály van. Máshol elég a böngésző Vissza gombja és a fejléc logója. */
@media (min-width: 769px) {
    .back-link:not(.back-link--always) {
        display: none;
    }
}

/* Mobilon a vissza link gombnak néz ki: fehér, lekerekített "kapszula" kerettel és
   árnyékkal (mint a mobil kereső gombjai), és legalább 40px magas, hogy ujjal is
   könnyen el lehessen találni (asztalon marad a visszafogott szöveges link) */
@media (max-width: 768px) {
    .back-link {
        min-height: 40px;
        padding: 0 1rem;
        background: var(--color-white);
        border: 1px solid #ECE3D8;
        border-radius: 999px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
        color: var(--color-text);
        font-weight: 600;
        /* A link több oldalon egy oszlop irányú flex dobozban (.card-stack) van, ami alapból
           a teljes szélességre nyújtaná - így csak akkora, amekkora a tartalma */
        align-self: flex-start;
    }

    .back-link svg {
        color: var(--color-primary);
    }
}

.profile-panel {
    padding: 24px 32px 32px;
}

/* Mező + karakterszámláló közös wrapper-e - a számláló a mező alá van
   pozicionálva (nem a normál dokumentumfolyamban), különben a helye akkor
   is foglalt maradna, amikor még nem látszik (opacity:0), és emiatt
   egyenetlen lenne a térköz a maxlength-es és a sima mezők között. Bármely
   oldal használhatja (profil, recept form stb.), ahol egy input/textarea
   mellé karakterszámláló tartozik. */
.field-control {
    position: relative;
}

.field-control .char-counter {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 2px;
}

.profile-panel .panel-footer {
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: flex-end;
}

/* A rács egyenlő magasságúra nyújtja az Alapadatok és Jelszó módosítása
   panelt - a gombsávnak a panel ALJÁRA kell tapadnia (nem a mezők alá
   közvetlenül), hogy a két gomb mindig egy vonalban legyen, validációs
   hibaüzenettel együtt is. Ehhez a panel és a form is flex-column, a
   form nyúlik ki (flex:1), a footer pedig margin-top:auto-val ül az aljára. */
.grid-2col .profile-panel {
    display: flex;
    flex-direction: column;
}

.grid-2col .profile-panel form {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.grid-2col .panel-footer {
    margin-top: auto;
}

/* A piros "él" box-shadow-dal van rajzolva (nem border-left-lel), hogy ne
   vegyen el helyet a paddingból - így a 3 panel tartalma egy vonalban marad */
.profile-panel--danger {
    box-shadow: inset 4px 0 0 var(--color-danger), 0 3px 8px rgba(0,0,0,0.1);
}

.profile-panel--danger .content-title {
    border-bottom-color: rgba(220, 53, 69, 0.25);
}

/* Fiók törlése: egy sorban - balra a szöveg+mező, jobbra a gomb, a mező
   aljához igazítva (nem külön alsó gombsáv, mint a másik két panelben) */
.danger-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.danger-row-text {
    flex: 1;
    min-width: 0;
}

.danger-row-text .field-hint {
    margin-bottom: 12px;
}

.danger-row-text .form-group {
    max-width: 400px;
    margin-bottom: 0;
}

.danger-row .btn-cook-danger {
    flex-shrink: 0;
}

/* Profilkép sor: kép balra, gomb + segédszöveg + eltávolítás-link jobbra mellette */
.avatar-row {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    margin-bottom: 24px;
}

.avatar-row .profile-avatar-preview {
    width: 96px;
    height: 96px;
    flex-shrink: 0;
}

.avatar-row-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
}

.field-hint {
    font-size: 0.85rem;
    color: var(--color-text-light);
}

/* Rövid segédszöveg a mező felirata mellett, zárójelben - pl. "Jelszó (8–50 karakter)".
   Nem félkövér és halványabb, mint maga a felirat, így látszik, hogy csak kiegészítés */
.label-hint {
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--color-text-light);
}

/* ===== KÉPVÁGÓ ABLAK (partials/image-cropper.blade.php - Profil és recept űrlap) ===== */
/* A vágó ablakban ne legyen görgetősáv: a közös .modal-content 80vh-nál magasabb
   tartalomnál görgetne (overflow-y: auto), itt ezt kikapcsoljuk, és inkább a
   vágóterület megy össze alacsony képernyőn (lásd .crop-stage max-width). */
.modal-crop {
    max-height: none;
    overflow: visible;
}

/* A két gomb pontosan egyforma: grid 1fr 1fr = két egyenlő széles oszlop, a közös
   padding/betűméret pedig a magasságot egyenlíti ki (a .btn-outline és a .btn-cook
   alapból más méretű, és a .btn-cook-nak felső margója is van). */
.modal-crop .modal-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.modal-crop .modal-footer button {
    margin: 0;
    padding: 8px 16px;
    font: inherit;
    font-weight: 600;
    border-radius: 4px;
    justify-content: center;
}

/* Az "ablak", amin át a képet látjuk: ami kilóg belőle, azt az overflow: hidden
   levágja. touch-action: none = érintőképernyőn a húzás a képet mozgassa, ne az
   oldalt görgesse. Az alakját (aspect-ratio) a JS állítja a kész kép arányára.
   min(100%, 50vh): kitölti az ablak szélességét, de alacsony képernyőn a magasság
   felénél nem szélesebb - így az egész ablak kifér görgetés nélkül. */
.crop-stage {
    position: relative;
    width: 100%;
    max-width: min(100%, 50vh);
    aspect-ratio: 1;
    margin: 0 auto 1rem;
    overflow: hidden;
    background: var(--color-bg-hover);
    cursor: grab;
    touch-action: none;
}

.crop-stage:active {
    cursor: grabbing;
}

/* A kép méretét és helyét a JS állítja (width + transform). max-width: none, hogy
   nagyításkor túlnőhessen a kereten; pointer-events: none, hogy a húzást a keret
   kapja meg, és a böngésző ne kezdje el "kihúzni" a képet az oldalból. */
.crop-stage img {
    position: absolute;
    top: 0;
    left: 0;
    max-width: none;
    pointer-events: none;
    user-select: none;
}

/* Kör alakú maszk, csak a profilképnél (a JS teszi rá a --round osztályt): egy
   átlátszó kör, aminek óriási (9999px) árnyéka van. Az árnyék a körön KÍVÜL
   sötétít, a keret overflow: hidden-je pedig levágja a fölösleget - így látszik,
   mi esik majd a kerek profilképbe. */
.crop-stage--round {
    max-width: min(260px, 40vh);
}

.crop-stage--round::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 9999px var(--color-shadow-dark);
    pointer-events: none;
}

.crop-zoom-label {
    display: block;
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
}

.crop-zoom {
    width: 100%;
    margin-bottom: 0.75rem;
    accent-color: var(--color-primary);
}

.btn-link-danger {
    background: none;
    border: none;
    padding: 0;
    color: var(--color-text-light);
    text-decoration: underline;
    font-size: 0.85rem;
    cursor: pointer;
}

.btn-link-danger:hover {
    color: var(--color-danger);
}

/* A 2 oszlopos rács (Profil: Alapadatok + Jelszó módosítása; recept form:
   Alapadatok + Kép) egymás alá kerül, ha a két ~460px-es oszlopnak már nem
   lenne elég hely - a Profil oldal Fiók törlése panelje mindig is a rács
   ALATT, teljes szélességben van, ezért azt itt nem kell külön kezelni */
@media (max-width: 900px) {
    .grid-2col {
        grid-template-columns: 1fr;
    }

    .danger-row {
        flex-direction: column;
        align-items: stretch;
    }

    .danger-row-text .form-group {
        max-width: 100%;
    }

    .danger-row .btn-cook-danger {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 640px) {
    .profile-panel {
        padding: 20px;
    }

    .profile-panel .form-group {
        max-width: 100%;
    }

    .profile-panel .panel-footer {
        justify-content: stretch;
    }

    .profile-panel .panel-footer .btn-cook {
        width: 100%;
        justify-content: center;
    }

    .avatar-row {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ===== FOOTER ===== */
/* Két oszlop: az oszlopok csak a tartalmuk szélességét kapják (nincs flex: 1), a
   space-between pedig az elsőt a bal, a másodikat a jobb szélre tolja - így nem marad
   céltalan üres tér középen. flex-wrap: ha nem férnek el egymás mellett (mobil), az
   "Információk" oszlop automatikusan az "Elérhetőség" alá törik. */
.site-footer {
    background-color: var(--color-footer-bg);
    color: #fff;
    padding: 2rem 2rem 0.75rem;
    margin-top: 2rem;
    box-shadow: 0 -4px 12px rgba(70,50,35,0.18);
}

.footer-container {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1.5rem 3rem;
}

.footer-section h4 {
    color: var(--color-white);
    margin: 0 0 1rem;
    font-size: 1.1rem;
    border-bottom: 2px solid var(--color-primary);
    padding-bottom: 0.5rem;
    display: inline-block;
}

.footer-section p {
    margin: 0;
}

.footer-section ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-section li {
    padding: 0.25rem 0;
}

.site-footer a {
    color: #fff;
    text-decoration: none;
    transition: color 0.2s;
}

.site-footer a:hover {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: underline;
}

.footer-icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
}

.footer-bottom {
    max-width: 1100px;
    margin: 1.5rem auto 0;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-footer-border);
    text-align: center;
    font-size: 0.9rem;
}

.footer-bottom p {
    margin: 0;
}

/* ===== SCROLL TO TOP GOMB ===== */
.scroll-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 50px;
    height: 50px;
    background-color: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background-color 0.2s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
}

.scroll-to-top.visible {
    opacity: 1;
    visibility: visible;
}

.scroll-to-top:hover {
    background-color: var(--color-primary-hover);
    transform: translateY(-3px);
}

/* ===== MOBIL-SPECIFIKUS ELEMEK - DESKTOPON REJTVE ===== */
@media (min-width: 769px) {
    .mobile-menu-btn,
    .mobile-menu-overlay {
        display: none;
    }
}

/* ===== MOBIL NÉZET (fejléc/navigáció rész - az oldal saját tartalmának mobil nézete a saját css fájljában van) ===== */
/* Vízszintes csúszka tiltása minden képernyőméreten (html-re is kell, nem elég csak a body-ra).
   Ok: a főoldali hero width: 100vw-vel lóg ki a main-ből teljes szélességre, de a 100vw a
   függőleges görgetősáv szélességét is tartalmazza, így asztali gépen ~15px-szel túlnyúlt.
   overflow-x: hidden helyett clip kell, mert a hidden a böngészőben
   automatikusan overflow-y: auto-t is beállít, ami eltöri a fejléc
   position: sticky-jét (a clip erre nincs hatással). */
html,
body {
    overflow-x: clip;
    width: 100%;
}

@media (max-width: 768px) {
    /* Hamburger elrejtése mobilon (az avatar veszi át a szerepét) */
    .mobile-menu-btn {
        display: none !important;
    }

    /* Hover-legördülő menü és nyíl rejtése mobilon (az overlay navigál) */
    .dropdown-menu,
    .dropdown-arrow {
        display: none !important;
    }

    /* Header-right megjelenítése mobilon (a mobile-menu-btn miatt) */
    header .header-right {
        display: flex !important;
        position: static;
        flex-direction: row;
        padding: 0;
        box-shadow: none;
        gap: 0.5rem;
    }

    .mobile-menu-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        padding: 0.5rem;
        cursor: pointer;
        color: var(--color-white);
    }

    .mobile-menu-btn svg {
        width: 28px;
        height: 28px;
        stroke: currentColor;
    }

    /* Mobilon a fejléc keresője visszafelé görgetéskor azonnal tűnjön el. Itt a nyitott
       szélesség "max-width: none", és none-ról 0-ra a böngésző nem tud animálni - ezért
       a szélesség egyből 0 lett, de az opacity még fél másodpercig halványult, és a
       megmaradt oldalsó paddingben (0.35rem) kilátszott a kereső széle.
       Beúszáskor ez nem gond: az elemek saját beúszó animációja (headerSearchItemIn) megmarad. */
    .header-search {
        padding: 0;
        transition: none;
    }

    /* Header kereső sáv mobilon (görgetéskor épül be/ki, ugyanúgy mint desktopon) */
    header.scrolled .header-search {
        padding: 0 0.35rem; /* nyitva visszakapja az alap paddingjét (l. fent, csukva 0) */
        flex: 1;
        max-width: none;
        margin: 0 0.5rem;
        gap: 0.3rem;
    }

    /* Fejléc kereső mobilon: [ fehér mező | keresés ikon ] [szűrők] [rendezés]
       A keresés gomb ugyanolyan fehér, mint a mező, és csak a jobb sarkai kerekek,
       így a mező részének látszik (nincs árnyék és "varrat" a kettő között).
       A szűrők/rendezés áttetsző fehér négyzetet kap, hogy a narancs háttéren gombnak látszódjon. */
    header .header-search .search-row {
        gap: 0.3rem;
    }

    header .header-search .search-input-group {
        flex: 1;
        min-width: 0;
        height: 36px;
        padding: 0 0.7rem;
        border-radius: 8px 0 0 8px;
    }

    header .header-search .search-input {
        font-size: 0.9rem;
    }

    header .header-search .btn-search,
    header .header-search .btn-filters,
    header .header-search .btn-sort {
        flex: 0 0 auto;
        width: 36px;
        height: 36px;
        padding: 0;
        font-size: 0;
        justify-content: center;
        margin-left: 0 !important;
        border-radius: 8px;
    }

    header .header-search .btn-search {
        margin-left: -0.3rem !important; /* a sor gap-jét visszavesszük: a gomb a mezőhöz tapad */
        border-radius: 0 8px 8px 0;
        box-shadow: none;
    }

    header .header-search .btn-filters,
    header .header-search .btn-sort {
        background-color: rgba(255, 255, 255, 0.18);
        opacity: 1;
    }

    header .header-search .btn-search svg,
    header .header-search .btn-filters svg,
    header .header-search .btn-sort svg {
        margin-right: 0;
        width: 1rem;
        height: 1rem;
    }

    /* Header - sticky viselkedés mobilon: kisebb távolság és lekerekítés, hogy keskeny
       képernyőn ne vegyen el sok helyet */
    header {
        padding: 0.35rem 0.75rem;
        width: calc(100% - 1rem);
        margin: 0.5rem auto 0;
        border-radius: 12px;
        position: sticky;
        top: 0.5rem;
        z-index: 1000;
    }

    /* Mobilon nincs "Kukta" felirat, csak a sapka - keskeny képernyőn felesleges helyet foglalna */
    .logo-text {
        display: none;
    }

    /* Mobil oldalsó menü panel - ugyanúgy lebeg, mint a fejléc kapszula: 0.5rem-re a
       képernyő szélétől, lekerekítve. Az overflow-y: auto a lekerekített sarkoknál le is
       vágja a tartalmat (pl. a narancs panel-fejléc sarkait), így nem kell külön kerekíteni. */
    .mobile-menu-overlay {
        display: block;
        position: fixed;
        top: 0.5rem;
        right: -300px;
        width: 240px;
        height: calc(100% - 1rem);
        background-color: var(--color-white);
        border-radius: 12px;
        box-shadow: -4px 0 16px rgba(0,0,0,0.15);
        z-index: 1100;
        transition: right 0.3s ease;
        overflow-y: auto;
    }

    /* A második árnyék egy óriási (100vmax), elmosás nélküli "keret" a panel körül:
       ez sötétíti el az oldal többi részét, külön háttér-elem nélkül */
    .mobile-menu-overlay.open {
        right: 0.5rem !important;
        box-shadow: -4px 0 16px rgba(0,0,0,0.15), 0 0 0 100vmax rgba(0,0,0,0.35);
    }

    /* Panel fejléce: "Menü" cím balra, × gomb jobbra (space-between a két szélére tolja).
       Narancs alap, mint az oldal fejléce, így egyből látszik, hogy ez egy menü. */
    .mobile-menu-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.35rem 0.5rem 0.35rem 2rem;
        min-height: 53px; /* ugyanolyan magas, mint az oldal fejléce */
        /* ugyanaz az áttetsző narancs, mint az oldal fejlécén (l. header) */
        background-color: rgba(230, 126, 34, 0.9);
        color: var(--color-white);
    }

    .mobile-menu-title {
        font-weight: 700;
        font-size: 1.1rem;
    }

    .mobile-menu-close {
        display: flex;
        background: none;
        border: none;
        padding: 0.5rem;
        color: var(--color-white);
        cursor: pointer;
    }

    .mobile-menu-close svg {
        width: 24px;
        height: 24px;
    }

    .mobile-menu {
        display: flex;
        flex-direction: column;
        padding: 0.5rem 1rem 1rem;
    }

    /* Csoportok közti elválasztó vonal */
    .mobile-menu-divider {
        border: none;
        border-top: 1px solid var(--color-border);
        margin: 0.5rem 0;
    }

    /* Kis szürke csoportcím (pl. "Szuperadmin") */
    .mobile-menu-label {
        padding: 0.5rem 1rem 0.25rem;
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--color-text-light);
    }

    /* flex + gap: az ikon és a szöveg egy sorban, közöttük állandó távolsággal */
    .mobile-menu a,
    .mobile-menu form button {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.8rem 1rem;
        text-decoration: none;
        color: var(--color-text);
        font-size: 1rem;
        border: none;
        background: none;
        text-align: left;
        width: 100%;
        cursor: pointer;
        border-radius: 4px;
    }

    .mobile-menu a:hover,
    .mobile-menu form button:hover {
        background-color: var(--color-bg-hover);
        color: var(--color-primary);
    }

    .mobile-menu a svg,
    .mobile-menu form button svg {
        flex-shrink: 0;
        width: 20px;
        height: 20px;
        color: var(--color-primary);
    }

    /* Mindkét mobil keresőben: a mező eleji nagyító ikon fölösleges (a keresés gombon
       is az van), és az elválasztó vonalak helyett a gombok közti rés tagol */
    .search-row .search-input-icon,
    .search-row .search-divider {
        display: none;
    }

    /* A szűrő-számláló a kis négyzetes gombban kiszorította az ikont, ezért mobilon
       a gomb jobb felső sarkára kerül buborékként. position: absolute a legközelebbi
       position: relative szülőhöz (itt a gombhoz) igazodik. */
    .search-row .btn-filters {
        position: relative;
    }

    /* Az alap .search-row overflow: hidden-je levágná a sorból kilógó buborékot.
       Mobilon nincs rá szükség, mert a gombok maguk kerekítik a sarkaikat. */
    .search-row {
        overflow: visible;
    }

    .search-row .filter-count {
        position: absolute;
        top: -6px;
        right: -6px;
        margin-left: 0;
        min-width: 1.1rem;
        height: 1.1rem;
        font-size: 0.7rem;
    }

    /* A fejléc keresője overflow: hidden (a be-/kicsúszó animáció miatt), ott a kilógó
       buborék levágódna - ezért ott a gombon belül, a jobb felső sarokban van */
    header .search-row .filter-count {
        top: 1px;
        right: 1px;
        min-width: 0.95rem;
        height: 0.95rem;
        padding: 0 0.2rem;
        font-size: 0.6rem;
    }

    /* Receptkártyák két oszlopban (minden olyan oldalon, ahol a galéria komponens megjelenik).
       Grid, nem flex: a repeat(2, minmax(0, 1fr)) két pontosan egyforma oszlopot ad - a
       minmax(0, ...) azért kell, hogy egy hosszú szó (pl. recept cím) se tolja szét az oszlopot */
    .recipe-gallery {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        padding-top: 0; /* a felső 20px helyett: a szekció saját felső paddingje (20px, home.css) elég */
    }

    /* A keskeny kártyához minden kisebb: belső tér, kép, cím, csillagok, gombok */
    .recipe-card {
        width: auto;
        padding: 8px;
    }

    .recipe-image {
        height: 120px;
    }

    /* A kép sarkában lévő kedvenc (szív + szám) jelvény is kisebb, hogy ne takarja ki a képet */
    .card-favorite-form {
        top: 0.35rem;
        right: 0.35rem;
        gap: 0.25rem;
        padding: 0.25rem 0.5rem;
    }

    .btn-favorite-card svg {
        width: 16px;
        height: 16px;
    }

    .favorite-badge {
        font-size: 0.75rem;
    }

    .recipe-card h2 {
        font-size: 1rem;
        line-height: 1.3;
    }

    .recipe-card .star-rating {
        gap: 4px;
    }

    .recipe-card .star-rating .stars {
        font-size: 0.8rem;
        letter-spacing: 0;
    }

    .recipe-card .star-rating .rating-number,
    .recipe-card .star-rating .review-count {
        font-size: 0.7rem;
    }

    /* A leírás mobilon nem fér el értelmesen a keskeny kártyán (6-7 sor lenne), és a teljes
       leírást mutató tooltip is csak egérrel (hoverrel) működik - a recept oldalán úgyis ott van */
    .recipe-card .recipe-description {
        display: none;
    }

    /* A cím/csillagok és a gombok közé kell egy kis rés, mert a leírás eddig ezt adta */
    .card-actions {
        gap: 6px;
        margin-top: auto;
        padding-top: 8px;
    }

    .card-actions .btn-view {
        padding: 6px;
        font-size: 0.8rem;
    }

    .btn-spoon {
        width: 34px;
        height: 34px;
    }

    .btn-spoon .icon-assistant {
        width: 20px;
        height: 20px;
    }

    /* Saját receptek: a Szerkesztés/Törlés feliratok nem férnek ki a fél kártyányi gombon,
       ezért csak az ikon marad (font-size: 0 - a szöveg a képernyőolvasónak megmarad) */
    .card-owner-actions {
        gap: 6px;
    }

    .btn-card-edit,
    .btn-card-delete {
        font-size: 0;
        padding: 6px;
    }
}

/* ===== Süti tájékoztató sáv (partials/cookie-notice) =====
   position: fixed -> görgetéskor is az ablak alján marad.
   z-index 900: a többi elem fölött, de a modalok (1000) alatt. */
.cookie-notice {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 900;
    display: flex;
    align-items: center;
    /* center: a szöveg és a gomb együtt, középen áll (space-between a két szélre tolta szét őket) */
    justify-content: center;
    gap: 1.25rem;
    max-width: 900px;
    margin: 0 auto;
    padding: 1rem 1.25rem;
    /* Középbarna sáv krémszínű szöveggel: világosabb, mint a --color-dark-brown, de még elég
       sötét ahhoz, hogy a krém szöveg jól olvasható legyen. Sötét háttéren keret nem kell. */
    background: var(--color-cookie-bg);
    color: var(--color-bg);
    /* vékony, világosabb barna keret (a lábléc színe): finoman kirajzolja a doboz szélét */
    border: 1px solid var(--color-footer-bg);
    border-radius: 12px;
    /* Két árnyék egymáson: a nagy, elmosott "lebegtet", a kicsi, éles a doboz alját rajzolja ki,
       így az egész jobban kiemelkedik az oldal síkjából */
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25), 0 3px 8px rgba(0, 0, 0, 0.15);
}

/* A display: flex felülírná a HTML hidden attribútumát, ezért külön ki kell mondani */
.cookie-notice[hidden] {
    display: none;
}

.cookie-notice p {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.5;
}

.cookie-notice a {
    /* fehér link: a sötét háttéren jól olvasható, az aláhúzás (böngésző alapértelmezés)
       jelzi, hogy kattintható */
    color: var(--color-white);
}

.btn-cookie-ok {
    /* Teli krémszínű gomb barna szöveggel: a barna sávon ez a legvilágosabb folt */
    flex-shrink: 0;
    padding: 10px 28px;
    background: var(--color-bg);
    color: var(--color-dark-brown);
    border: none;
    /* kis lekerekítés: a klasszikus "gomb" forma, nem kapszula */
    border-radius: 6px;
    font-weight: 700;
    letter-spacing: 0.03em;
    cursor: pointer;
    /* Két árnyék: a sötét, éles alsó csík (3px, elmosás nélkül) olyan, mint a gomb "talpa",
       ettől tűnik háromdimenziósnak, megnyomhatónak; a puha árnyék kiemeli a sávból */
    box-shadow: 0 3px 0 var(--color-footer-bg), 0 4px 10px rgba(0, 0, 0, 0.3);
    transition: all 0.15s ease;
}

/* Hoverre kicsit megemelkedik (translateY: felfelé tolja) és kivilágosodik */
.btn-cookie-ok:hover {
    background: var(--color-white);
    transform: translateY(-1px);
    box-shadow: 0 4px 0 var(--color-footer-bg), 0 6px 14px rgba(0, 0, 0, 0.35);
}

/* :active = amíg az egérgomb le van nyomva. A gomb lejjebb "süllyed", a talpa eltűnik,
   mintha tényleg benyomnánk */
.btn-cookie-ok:active {
    transform: translateY(3px);
    box-shadow: 0 0 0 var(--color-footer-bg), 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Mobilon a gomb a szöveg alá kerül, teljes szélességben */
@media (max-width: 600px) {
    .cookie-notice {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ===== Jogi szövegek (adatkezelési tájékoztató, süti tájékoztató, ÁSZF) =====
   Hosszú, folyó szöveg: nagyobb sortáv és a címsorok előtt több hely, hogy tagolt legyen.
   A "> * + *" (lobotomizált bagoly) minden elemnek ad felső margót, ami előtt van testvér. */
.legal-text {
    line-height: 1.65;
}

.legal-text > * + * {
    margin-top: 0.9rem;
}

.legal-text h2 {
    margin-top: 2rem;
    font-size: 1.2rem;
    color: var(--color-heading);
}

/* Ha a kártya címsorral kezdődik (pl. impresszum), ne legyen fölötte üres sáv */
.legal-text > :first-child {
    margin-top: 0;
}

.legal-text h3 {
    margin-top: 1.4rem;
    font-size: 1.05rem;
}

.legal-text ul {
    padding-left: 1.4rem;
}

.legal-text a {
    color: var(--color-primary);
}

.legal-text .legal-meta {
    color: var(--color-text-light);
    font-size: 0.9rem;
}

.legal-text table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.legal-text th,
.legal-text td {
    padding: 0.6rem;
    border: 1px solid var(--color-border);
    text-align: left;
    vertical-align: top;
    /* A hosszú, szóköz nélküli szavak (pl. cookie_notice_seen) mobilon is eltörhetnek,
       így a táblázat mindig kifér, nem kell hozzá vízszintes csúszka */
    overflow-wrap: anywhere;
}

.legal-text th {
    background: var(--color-bg);
}