/* ===== Design tokens ===== */
:root {
    --color-primary: #FF6B35;
    --color-primary-dark: #E5501C;
    --color-primary-light: #FFE8DD;
    --color-accent: #00A896;
    --color-accent-dark: #00857A;
    --color-dark: #2D3142;
    --color-heading: var(--color-dark);
    --color-text: #2D3142;
    --color-text-muted: #6B7280;
    --color-bg: #FAF9F6;
    --color-surface: #FFFFFF;
    --color-border: #E8E6E1;
    --color-success-bg: #D4EDDA;
    --color-success-text: #155724;
    --color-error-bg: #F8D7DA;
    --color-error-text: #721C24;
    --font-heading: 'Poppins', system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    --radius: 12px;
    --radius-sm: 8px;
    --shadow: 0 2px 10px rgba(45, 49, 66, 0.08);
    --shadow-hover: 0 8px 24px rgba(45, 49, 66, 0.14);
    color-scheme: light;
}

/* ===== Dark mode =====
   Ket ut vezet ide: (1) automatikusan, ha a bongeszo/OS sotet temat ker
   (prefers-color-scheme), (2) kezi kapcsolóval (.theme-toggle), ami a
   valasztast localStorage-ban tarolja es a <html data-theme="..."> attributumot
   allitja - ez felulirja az OS-preferenciat barmelyik iranyba. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-primary-light: rgba(255, 107, 53, 0.18);
        --color-heading: #F5F5F7;
        --color-text: #E3E3E8;
        --color-text-muted: #9CA0B5;
        --color-bg: #16171F;
        --color-surface: #1E202C;
        --color-border: #33354A;
        --color-success-bg: #163524;
        --color-success-text: #6FCF97;
        --color-error-bg: #3A1E1E;
        --color-error-text: #F2A29B;
        --shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
        --shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.5);
        color-scheme: dark;
    }
}

:root[data-theme="dark"] {
    --color-primary-light: rgba(255, 107, 53, 0.18);
    --color-heading: #F5F5F7;
    --color-text: #E3E3E8;
    --color-text-muted: #9CA0B5;
    --color-bg: #16171F;
    --color-surface: #1E202C;
    --color-border: #33354A;
    --color-success-bg: #163524;
    --color-success-text: #6FCF97;
    --color-error-bg: #3A1E1E;
    --color-error-text: #F2A29B;
    --shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    --shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
}

* {
    box-sizing: border-box;
}

body {
    transition: background-color 0.2s ease, color 0.2s ease;
}

body {
    font-family: var(--font-body);
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.6;
}

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--color-heading);
}

a {
    color: var(--color-accent-dark);
}

/* ===== Globalis form-mezo alap (konzisztens megjelenes/fokusz mindenhol,
   fuggetlenul attol, hogy melyik oldal-specifikus osztaly ala kerul) ===== */
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="url"], input[type="tel"], input[type="date"], input[type="datetime-local"],
input[type="time"], input[type="search"], select, textarea {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0.6rem 0.8rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus,
input[type="number"]:focus, input[type="url"]:focus, input[type="tel"]:focus,
input[type="date"]:focus, input[type="datetime-local"]:focus, input[type="time"]:focus,
input[type="search"]:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236B7280'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    background-size: 16px;
    padding-right: 2.2rem;
}

button, .btn {
    transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.btn:active {
    transform: translateY(1px);
}

/* ===== Header ===== */
header.site-header {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 50;
}

.header-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0.9rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    white-space: nowrap;
}

.logo img {
    display: block;
    height: 36px;
    width: auto;
}

/* ===== Nevnap-csik =====
   Vekony sav a fejlec alatt - egyetlen sorban kell maradnia mobilon is,
   ezert a szoveg soha nem torhet ket sorba (nowrap + ellipsis biztonsagi
   halokent), a "koszontsd fel..." resz pedig hosszu nevsor eseten mobilon
   szerver oldalon (bootstrap.php: todaysNameday.isLong) mar el sem keszul
   lathatova - lasd .nameday-strip-cta-hide-mobile lejjebb. */
.nameday-strip {
    background: var(--color-primary-light);
    border-bottom: 1px solid var(--color-border);
}

.nameday-strip-text {
    display: block;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0.4rem 1.5rem;
    font-size: 0.85rem;
    color: var(--color-primary-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

.nameday-strip-cta {
    color: var(--color-text-muted);
    font-weight: 400;
}

@media (max-width: 600px) {
    .nameday-strip-text {
        padding: 0.35rem 1rem;
        font-size: 0.78rem;
    }

    /* Alapertelmezetten rejtve mobilon - a nameday-strip.js meri meg
       futasidoben, hogy kifer-e egy sorban, es csak akkor teszi vissza
       (.js-fits), igy JS nelkul sem torik soha 2 sorba, csak eltunik. */
    .nameday-strip-cta {
        display: none;
    }

    .nameday-strip-cta.js-fits {
        display: inline;
    }
}

.nav-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--color-heading);
}

/* ===== Header: modern desktop nav (dropdown-based, scales to any number
   of modules without overflowing) ===== */
.main-nav-desktop {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    margin-right: auto;
}

.nav-link-featured {
    color: var(--color-text);
    text-decoration: none;
    font-weight: 600;
    padding: 0.4rem 0;
    border-bottom: 2px solid transparent;
}

.nav-link-featured:hover {
    border-bottom-color: var(--color-primary);
}

.nav-dropdown {
    position: relative;
}

.nav-dropdown-toggle {
    background: none;
    border: none;
    font: inherit;
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
    padding: 0.4rem 0;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.nav-dropdown-caret {
    font-size: 0.7rem;
    transition: transform 0.15s ease;
}

.nav-dropdown-caret.is-open {
    transform: rotate(180deg);
}

.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 0.6rem);
    left: 0;
    min-width: 220px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 0.6rem;
    display: flex;
    flex-direction: column;
    z-index: 60;
}

.nav-dropdown-menu-right {
    left: auto;
    right: 0;
}

.nav-dropdown-menu a {
    color: var(--color-text);
    text-decoration: none;
    font-weight: 500;
    padding: 0.45rem 0.6rem;
    border-radius: var(--radius-sm);
}

.nav-dropdown-menu a:hover {
    background: var(--color-bg);
}

.nav-dropdown-submenu {
    display: flex;
    flex-direction: column;
    margin: 0.1rem 0 0.3rem 0.7rem;
    padding-left: 0.6rem;
    border-left: 2px solid var(--color-border);
}

.nav-dropdown-submenu a {
    font-size: 0.88rem;
    color: var(--color-text-muted);
    padding: 0.28rem 0.6rem;
}

.header-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.nav-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    cursor: pointer;
    font-size: 1rem;
    padding: 0;
    color: var(--color-text);
}

.nav-icon-btn:hover {
    border-color: var(--color-primary);
}

.nav-search {
    position: relative;
}

.nav-search-form {
    position: absolute;
    top: calc(100% + 0.6rem);
    right: 0;
    display: flex;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 0.4rem;
    gap: 0.3rem;
    z-index: 60;
}

.nav-search-form input {
    width: 220px;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    color: var(--color-text);
}

.nav-search-form button {
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    padding: 0 0.7rem;
    cursor: pointer;
}

.nav-link-account, .nav-link-account-btn {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-sm);
    padding: 0.45rem 0.9rem;
    transition: background 0.15s ease, color 0.15s ease;
}

.nav-link-account:hover, .nav-link-account-btn:hover {
    background: var(--color-primary);
    color: #fff;
}

.nav-account-dropdown .nav-dropdown-toggle {
    white-space: nowrap;
}

.mobile-nav-search {
    display: none;
}

/* ===== Header: mobile drawer nav (hamburger-toggled) ===== */
nav.main-nav {
    display: none;
}

.nav-account {
    display: none;
}

.nav-account-links {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.nav-account a {
    color: var(--color-text);
    text-decoration: none;
    font-weight: 500;
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    cursor: pointer;
    font-size: 1rem;
    padding: 0;
    line-height: 1;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.theme-toggle:hover {
    border-color: var(--color-primary);
    transform: scale(1.05);
}

.theme-toggle:active {
    transform: scale(0.95);
}

.theme-toggle-icon-dark {
    display: none;
}

.theme-toggle-label {
    display: none;
}

.mobile-categories {
    display: none;
}

:root[data-theme="dark"] .theme-toggle-icon-light {
    display: none;
}

:root[data-theme="dark"] .theme-toggle-icon-dark {
    display: inline;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-toggle-icon-light {
        display: none;
    }
    :root:not([data-theme="light"]) .theme-toggle-icon-dark {
        display: inline;
    }
}

.nav-account .btn {
    margin: 0;
}

.inline-form {
    display: inline;
}

.link-button {
    background: none;
    border: none;
    color: var(--color-text-muted);
    text-decoration: underline;
    cursor: pointer;
    font-size: 0.95rem;
    padding: 0;
    font-family: var(--font-body);
}

/* ===== Layout ===== */
main {
    padding: 1.5rem;
    max-width: 1100px;
    margin: 0 auto;
    min-height: 60vh;
}

@media (max-width: 720px) {
    main {
        padding-top: 0.6rem;
    }
}

footer.site-footer {
    background: var(--color-dark);
    color: #D8D9E0;
    margin-top: 3rem;
    padding: 2.5rem 1.5rem 1.5rem;
}

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

.footer-inner h4 {
    color: #fff;
    font-size: 1rem;
    margin-top: 0;
}

.footer-inner a {
    color: #C7C9D6;
    text-decoration: none;
    display: block;
    margin-bottom: 0.4rem;
}

.footer-inner a:hover {
    color: #fff;
}

.weather-widget-row {
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
}

.weather-widget {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--color-primary);
    color: #fff;
    text-decoration: none;
    padding: 0.6rem 1.3rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.9rem;
    box-shadow: var(--shadow);
    transition: background 0.15s;
}

.weather-widget:hover {
    background: var(--color-primary-dark);
}

.weather-widget-icon {
    font-size: 1.3rem;
}

.weather-widget-label {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 400;
}

.weather-widget-more {
    font-size: 0.8rem;
    opacity: 0.85;
}

@media (max-width: 560px) {
    .weather-widget-label {
        display: none;
    }
}

.footer-bottom {
    text-align: center;
    color: #8A8CA0;
    font-size: 0.85rem;
    margin-top: 2rem;
    border-top: 1px solid #3F4256;
    padding-top: 1.2rem;
}

.footer-bottom a {
    color: #8A8CA0;
    text-decoration: underline;
}

.footer-newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 240px;
}

.footer-newsletter-form input[type="email"] {
    padding: 0.5rem 0.7rem;
    border-radius: var(--radius-sm);
    border: 1px solid #3F4256;
    background: #262838;
    color: #fff;
    font-size: 0.9rem;
}

.footer-newsletter-form .btn {
    font-size: 0.9rem;
    padding: 0.5rem 0.9rem;
}

/* ===== Hero ===== */
.hero {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
    border-radius: var(--radius);
    padding: 2.2rem 2rem 2.8rem;
    color: #fff;
    margin-bottom: 2.5rem;
    text-align: center;
    animation: hero-fade-in 0.5s ease-out;
}

@keyframes hero-fade-in {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .hero {
        animation: none;
    }
}

.hero-title {
    color: #fff;
    font-size: 2.5rem;
    margin: 0 0 0.5rem;
    letter-spacing: -0.02em;
    overflow-wrap: break-word;
    word-break: break-word;
}

.hero-subtitle {
    font-size: 1.1rem;
    opacity: 0.95;
    margin: 0 0 1.3rem;
}

.hero-browse-hint {
    font-size: 0.85rem;
    opacity: 0.85;
    margin: 1.1rem 0 0.5rem;
}

@media (max-width: 480px) {
    .hero {
        padding: 1.5rem 1.2rem 2rem;
    }

    .hero-title {
        font-size: 1.7rem;
        margin-bottom: 0.4rem;
    }

    .hero-subtitle {
        font-size: 0.95rem;
        margin-bottom: 1rem;
    }
}

.home-section {
    margin-bottom: 2.5rem;
}

.home-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-bottom: 1rem;
}

.home-section-header h2 {
    margin: 0;
}

.home-section-footer {
    display: flex;
    justify-content: center;
    margin-top: 1.3rem;
}

.home-section-link {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
}

.home-section-link:hover {
    text-decoration: underline;
}

/* ===== Fooldal: "Friss hirek" sav =====
   Szandekosan kompakt, vizszintes csempek (kis negyzetes elonezet + cim),
   nem a /hirek oldal nagy kartyai - igy 6 hir is csak ket sornyi helyet
   foglal a foldalon, es nem nyomja le az ajanlott vallalkozasokat.
   Desktopon 3x2, tableten 2x3, mobilon csak az elso 3 latszik. */
.home-news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.8rem;
}

.home-news-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.6rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--color-text);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
    min-width: 0;
}

.home-news-item:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}

.home-news-thumb {
    flex-shrink: 0;
    width: 76px;
    height: 76px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--color-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
}

.home-news-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.home-news-body {
    min-width: 0;
}

.home-news-meta {
    display: block;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-bottom: 0.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-news-category {
    color: var(--color-accent-dark);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.home-news-item h3 {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 960px) {
    .home-news-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 720px) {
    .home-news-grid {
        grid-template-columns: 1fr;
        gap: 0.6rem;
    }

    .home-news-item:nth-child(n + 4) {
        display: none;
    }

    .home-news-thumb {
        width: 64px;
        height: 64px;
    }
}

/* ===== Bento grid (foldali "Ajanlott vallalkozasok") =====
   Egy nagy csempe (az elso elem) + tobb kisebb, egyenletes csempe - suru,
   "egy pillantasra minden" elrendezes a korabbi, egyforma hosszu,
   egymas alatti szekciok helyett. */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.bento-tile {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    text-decoration: none;
    color: inherit;
    position: relative;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.bento-tile:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-3px);
}

.bento-tile--featured {
    grid-column: span 2;
    grid-row: span 2;
}

.bento-tile-image {
    overflow: hidden;
    background: #fff;
}

.bento-tile-image img {
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 10;
    object-fit: contain;
    display: block;
    transition: transform 0.25s ease;
}

.bento-tile--featured .bento-tile-image img {
    aspect-ratio: 16 / 9;
}

.bento-tile:hover .bento-tile-image img {
    transform: scale(1.04);
}

/* Ha nincs valodi (galeria-)fotonk, csak egy logonk, azt nem nyujtjuk ki a
   teljes csempere (elmosodott/pixeles lenne) - inkabb egy kisebb, kozepre
   igazitott "logo-jelvenykent" jelenitjuk meg, sajat terrel korulotte. */
.bento-tile-image--logo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    aspect-ratio: 16 / 10;
}

.bento-tile--featured .bento-tile-image--logo {
    aspect-ratio: 16 / 9;
}

.bento-tile-image--logo img {
    width: auto;
    height: auto;
    max-width: 65%;
    max-height: 90px;
    aspect-ratio: auto;
    object-fit: contain;
}

.bento-tile--featured .bento-tile-image--logo img {
    max-width: 55%;
    max-height: 140px;
}

.bento-tile:hover .bento-tile-image--logo img {
    transform: none;
}

.bento-tile-body {
    padding: 0.9rem 1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.bento-tile-body h3 {
    margin: 0 0 0.2rem;
    font-size: 1rem;
}

.bento-tile--featured .bento-tile-body h3 {
    font-size: 1.35rem;
}

.bento-tile-body .category {
    color: var(--color-accent-dark);
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.03em;
    margin: 0 0 0.3rem;
}

.bento-tile-body .excerpt {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin: 0.2rem 0 0;
}

/* Asztali/tablet nezetben csak a kiemelt (elso, nagyobb) csempen jelenik meg
   a cim+leiras - a tobbi csempe kompakt marad. Mobilon (lasd lejjebb) minden
   csempe egyforma szelessegu egy oszlopban all, ott mindegyiknel megjelenik. */
.bento-tile-extra {
    display: none;
}

.bento-tile--featured .bento-tile-extra {
    display: block;
}

@media (max-width: 860px) {
    .bento-grid {
        grid-template-columns: repeat(2, 1fr);
        /* Tabletnel (2 oszlop) is a sajat tartalmahoz igazodo magassagu
           legyen minden csempe - kulonben az orokolt "grid-auto-rows: 1fr"
           a legmagasabb csempe (pl. a kiemelt) magassagara nyujtja a tobbit
           is, ures hellyel a rovidebb leiras nelkuli csempek aljan. */
        grid-auto-rows: auto;
    }

    .bento-tile--featured {
        grid-column: span 2;
        grid-row: span 1;
    }

    /* Ugyanezert a tartalomhoz-igazodas miatt itt is meg kell jelennie a
       roviditett leirasnak minden csempen, nem csak a kiemeltnel - kulonben
       pont az uresen hagyott hely maradna, amit a leiras tolthetne ki. */
    .bento-tile-extra {
        display: block;
    }
}

@media (max-width: 520px) {
    .bento-grid {
        grid-template-columns: 1fr;
        /* Mobilon minden csempe sajat tartalmahoz igazodo magassagu legyen -
           az orokolt "grid-auto-rows: 1fr" egy oszlopos elrendezesben minden
           sort a legmagasabb csempe magassagara nyujtott volna, ures helyet
           hagyva a rovidebb csempek aljan. */
        grid-auto-rows: auto;
    }

    .bento-tile-extra {
        display: block;
    }

    .bento-tile--featured {
        grid-column: span 1;
    }

    .bento-tile--featured .bento-tile-image img {
        aspect-ratio: 16 / 10;
    }

    .bento-tile--featured .bento-tile-body h3 {
        font-size: 1.1rem;
    }
}

/* ===== Bento row (foldali "Programok" + "Latnivalok" kompakt sav) ===== */
.bento-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

@media (max-width: 720px) {
    .bento-row {
        grid-template-columns: 1fr;
    }
}

.bento-list-tile {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.2rem 1.4rem;
    /* A .bento-row grid-elemeikent alapertelmezetten min-width:auto-t
       kapnanak, ami a bennuk levo white-space:nowrap tartalom (bento-mini-meta)
       miatt megakadalyozza az osszezsugorodast a racs-oszlop szelessege ala -
       ez okozta a mobil vizszintes tulcsordulast a korabbi javitas utan is. */
    min-width: 0;
}

.bento-list-tile h3 {
    margin: 0 0 0.6rem;
    font-size: 1.05rem;
}

.bento-mini-list {
    list-style: none;
    margin: 0 0 0.9rem;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.bento-mini-list li {
    border-bottom: 1px solid var(--color-border);
}

.bento-mini-list li:last-child {
    border-bottom: none;
}

.bento-mini-list a {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.55rem 0.1rem;
    text-decoration: none;
    color: var(--color-text);
    border-radius: var(--radius-sm);
    transition: color 0.15s ease, padding-left 0.15s ease;
}

.bento-mini-list a:hover {
    color: var(--color-primary-dark);
    padding-left: 0.4rem;
}

.bento-mini-list .bento-mini-title {
    font-weight: 600;
    font-size: 0.94rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.bento-mini-list .bento-mini-meta {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.pharmacy-duty-banner {
    display: block;
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius);
    padding: 0.9rem 1.2rem;
    margin-bottom: 2rem;
    text-decoration: none;
    font-weight: 600;
    text-align: center;
}

.pharmacy-duty-banner:hover {
    background: var(--color-primary);
    color: #fff;
}

.hero-search {
    display: flex;
    align-items: center;
    max-width: 560px;
    margin: 0 auto;
    background: #fff;
    border-radius: 999px;
    padding: 0.4rem;
    box-shadow: var(--shadow-hover);
}

.hero-search input {
    flex: 1;
    border: 1.5px solid transparent;
    padding: 0.7rem 1.1rem;
    font-size: 1rem;
    border-radius: 999px;
    outline: none;
    font-family: var(--font-body);
    color: var(--color-dark);
    background: #F0EFEB;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.hero-search input::placeholder {
    color: #8A8778;
}

.hero-search input:focus {
    border-color: var(--color-primary);
    background: #fff;
}

.hero-search button {
    background: var(--color-primary);
    color: #fff;
    border: none;
    padding: 0.7rem 1.5rem;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 600;
    font-family: var(--font-body);
}

.hero-search button:hover {
    background: var(--color-primary-dark);
}

.quick-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    justify-content: center;
    margin-top: 1.5rem;
}

.quick-categories a {
    display: inline-flex;
    align-items: center;
    background: rgba(255,255,255,0.2);
    color: #fff;
    text-decoration: none;
    padding: 0.5rem 1.1rem;
    border-radius: 999px;
    font-weight: 500;
    font-size: 0.9rem;
    white-space: nowrap;
    transition: background-color 0.15s ease, transform 0.1s ease;
}

.quick-categories a:hover {
    background: rgba(255,255,255,0.32);
    transform: translateY(-1px);
}

@media (max-width: 480px) {
    .quick-categories {
        gap: 0.5rem;
    }

    .quick-categories a {
        font-size: 0.78rem;
        padding: 0.4rem 0.8rem;
    }
}

/* ===== Buttons ===== */
.btn {
    display: inline-block;
    padding: 0.6rem 1.3rem;
    border-radius: var(--radius-sm);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: none;
    font-family: var(--font-body);
    font-size: 1rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(0) scale(0.97);
}

.btn-primary {
    background: var(--color-primary);
    color: #fff;
    box-shadow: 0 1px 3px rgba(229, 80, 28, 0.25);
}

.btn-primary:hover {
    background: var(--color-primary-dark);
    box-shadow: 0 4px 12px rgba(229, 80, 28, 0.3);
}

.btn-danger {
    background: #C0392B;
    color: #fff;
}

.btn-danger:hover {
    background: #A5281B;
}

.btn-outline {
    display: inline-block;
    background: transparent;
    color: var(--color-primary-dark);
    border: 1.5px solid var(--color-primary);
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
}

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

.category-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 1.2rem;
}

.category-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--color-bg);
    border: 1.5px solid var(--color-border);
    border-radius: 999px;
    padding: 0.5rem 1rem;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--color-text);
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.category-pill:hover {
    border-color: var(--color-primary);
    transform: translateY(-1px);
}

.category-pill.is-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

/* ===== Kereso/szuro sav (search-toolbar) - modern, lebego dropdown ===== */
.search-toolbar {
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 10;
}

.search-toolbar-row {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    align-items: center;
}

.search-toolbar-row input[type="text"],
.search-toolbar-row select {
    padding: 0.7rem 1rem;
    font-size: 0.95rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-family: var(--font-body);
    background: var(--color-surface);
    box-shadow: 0 1px 2px rgba(45, 49, 66, 0.04);
}

.search-toolbar-row input[type="text"] {
    flex: 1;
    min-width: 220px;
}

.search-toolbar-row .btn {
    border-radius: 999px;
}

.filter-dropdown-wrap {
    position: relative;
}

.filter-toggle-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 0.7rem 1.2rem;
    font-size: 0.95rem;
    font-family: var(--font-body);
    font-weight: 600;
    cursor: pointer;
    color: var(--color-text);
    box-shadow: 0 1px 2px rgba(45, 49, 66, 0.04);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.filter-toggle-btn:hover {
    border-color: var(--color-primary);
    box-shadow: 0 2px 8px rgba(255, 107, 53, 0.15);
}

.filter-count-badge {
    background: var(--color-primary);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    line-height: 1.4;
}

.filter-toggle-arrow {
    font-size: 0.7rem;
    transition: transform 0.2s ease;
    display: inline-block;
    color: var(--color-text-muted);
}

.filter-toggle-arrow.is-open {
    transform: rotate(180deg);
}

.filter-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 360px;
    max-width: 90vw;
    max-height: 70vh;
    overflow-y: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(45, 49, 66, 0.22), 0 2px 8px rgba(45, 49, 66, 0.08);
    padding: 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    z-index: 50;
}

.filter-panel-heading {
    margin: 0;
    font-size: 1rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--color-border);
}

.filter-panel-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.88rem;
    color: var(--color-text-muted);
    font-weight: 600;
}

.filter-panel-field input {
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
}

.filter-panel-amenities {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.filter-panel-amenities .amenity-chip {
    padding: 0.4rem 0.85rem;
    font-size: 0.85rem;
}

.filter-panel .btn {
    align-self: stretch;
    text-align: center;
    border-radius: var(--radius-sm);
}

.filter-clear-link {
    font-size: 0.88rem;
    color: var(--color-text-muted);
    text-decoration: underline;
    white-space: nowrap;
}

.filter-clear-link:hover {
    color: var(--color-primary-dark);
}

.filter-panel-backdrop {
    display: none;
}

@media (max-width: 600px) {
    .filter-panel {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-width: none;
        max-height: 80vh;
        border-radius: 16px 16px 0 0;
    }

    .filter-panel-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 49;
    }
}

/* ===== Cards ===== */
.business-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.2rem;
}

.similar-classifieds-section {
    margin-top: 2rem;
}

.similar-classifieds-section h3 {
    margin-bottom: 1rem;
}

.business-card {
    display: block;
    background: var(--color-surface);
    border-radius: var(--radius);
    padding: 1.2rem;
    text-decoration: none;
    color: var(--color-text);
    box-shadow: var(--shadow);
    position: relative;
    border: 1px solid var(--color-border);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.business-card:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}

.business-card h3 {
    margin: 0.3rem 0;
    font-size: 1.1rem;
}

.card-logo {
    width: 100%;
    aspect-ratio: 480 / 270;
    object-fit: contain;
    background: #fff;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    margin-bottom: 0.6rem;
}

.business-card .category {
    color: var(--color-accent-dark);
    font-size: 0.78rem;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.business-card .excerpt {
    font-size: 0.92rem;
    color: var(--color-text-muted);
}

/* ===== Hírek (news feed) ===== */
.news-rss-link {
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: 0.88rem;
}

.news-category-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.news-category-pill {
    display: inline-block;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    color: var(--color-text);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 500;
    background: var(--color-surface);
}

.news-category-pill:hover {
    border-color: var(--color-primary);
}

.news-category-pill.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

/* Magazin-elrendezes: az elso (legfrissebb/kiemelt) cikk teljes szelessegben,
   nagy "hero" kartyakent jelenik meg (lasd .news-card-hero lejjebb), a tobbi
   cikk alatta reszponziv racsban - igy tobb cikk lathato egyszerre, mint a
   korabbi egyoszlopos listaban, de az uj rovat (Napi erdekesseg) is jobban
   kiemelheto egy-egy honapon belul. */
.news-feed {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    max-width: 1100px;
    margin: 0 auto;
}

@media (max-width: 1024px) {
    .news-feed {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .news-feed {
        grid-template-columns: 1fr;
    }
}

.news-card {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    text-decoration: none;
    color: var(--color-text);
    overflow: hidden;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.news-card:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}

.news-card-pinned {
    border-color: var(--color-primary);
}

.news-card-cover {
    width: 100%;
    max-height: 360px;
    object-fit: cover;
}

/* Kiemelt "hero" kartya - a lista/kategoria-oldal legfrissebb cikke, teljes
   racs-szelessegben (grid-column: 1/-1), deszkopon kep+szoveg egymas mellett,
   mobilon egymas alatt (mint egy sima kartya). */
.news-card-hero {
    grid-column: 1 / -1;
    flex-direction: row;
}

.news-card-hero .news-card-cover {
    width: 45%;
    max-height: none;
    flex-shrink: 0;
}

.news-card-hero .news-card-body {
    padding: 1.8rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.news-card-hero h3 {
    font-size: 1.7rem;
    line-height: 1.25;
}

.news-card-hero .news-card-excerpt {
    font-size: 1.02rem;
}

@media (max-width: 768px) {
    .news-card-hero {
        flex-direction: column;
    }

    .news-card-hero .news-card-cover {
        width: 100%;
        max-height: 260px;
    }

    .news-card-hero h3 {
        font-size: 1.3rem;
    }
}

.news-card-body {
    padding: 1.1rem 1.3rem;
}

.news-card-pin {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-right: 0.6rem;
}

.news-card-category {
    display: inline-block;
    color: var(--color-accent-dark);
    font-size: 0.78rem;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.03em;
    margin-bottom: 0.3rem;
}

.news-card h3 {
    margin: 0.2rem 0 0.4rem;
    font-size: 1.2rem;
}

.news-card-excerpt {
    color: var(--color-text-muted);
    font-size: 0.95rem;
    margin: 0 0 0.6rem;
}

.news-card-meta {
    font-size: 0.82rem;
    color: var(--color-text-muted);
}

/* ===== /hirek: hirportal-szeru elrendezes =====
   Desktop: bal oszlopban cimlap (fo hir + 2 mellekhir), alatta nap szerint
   csoportositott tomor lista; jobb oszlopban ragados oldalsav
   (Legolvasottabb + Napi erdekesseg). Mobilon egy oszlop: cimlap,
   oldalsav-dobozok, majd a lista. */
.news-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.5rem 1rem 4rem;
}

.news-page-header {
    margin-bottom: 0.8rem;
}

.news-page-header h1 {
    margin: 0;
    font-size: 1.9rem;
}

.news-tabs {
    position: sticky;
    top: var(--site-header-height, 68px);
    z-index: 20;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 1.5rem;
}

.news-tabs-scroll {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.news-tabs-scroll::-webkit-scrollbar {
    display: none;
}

.news-tab {
    flex-shrink: 0;
    padding: 0.75rem 0.95rem 0.65rem;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-text-muted);
    text-decoration: none;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
}

.news-tab:hover {
    color: var(--color-heading);
}

.news-tab.is-active {
    color: var(--color-heading);
    border-bottom-color: var(--color-primary);
}

.news-empty {
    color: var(--color-text-muted);
}

.news-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    column-gap: 2.5rem;
}

.news-main {
    min-width: 0;
}

/* Jobb oszlop: a ket oldalsav-blokk kozvetlenul egymas alatt (nincs res
   a cimlap melletti resz es a lista melletti resz kozott). */
.news-side {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.news-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

/* A masodik oldalsav-blokk kitolti a jobb oszlop maradek magassagat
   (flex: 1), es csak az UTOLSO doboza ragad a kepernyon gorgeteskor - igy
   a sav sosem lesz magasabb a kepernyonel, megsem marad ures a jobb oldal. */
.news-sidebar--extra {
    flex: 1;
}

.news-sidebar--extra > :last-child {
    position: sticky;
    top: calc(var(--site-header-height, 68px) + 64px);
}

.news-side-box {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 1rem 1.1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text);
    text-decoration: none;
}

.news-side-box--link:hover {
    box-shadow: var(--shadow-hover);
}

.news-side-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-accent-dark);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.news-side-title {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--color-heading);
    line-height: 1.3;
}

.news-side-text {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    line-height: 1.4;
}

.news-side-more {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
}

.news-weather-now {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.news-weather-icon {
    font-size: 2rem;
    line-height: 1;
}

.news-weather-temp {
    font-family: var(--font-heading);
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--color-heading);
}

.news-featured-biz {
    border-color: var(--color-primary);
}

.news-featured-biz-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius-sm);
    margin: 0.3rem 0;
}

.news-side-list {
    list-style: none;
    margin: 0.2rem 0 0.3rem;
    padding: 0;
}

.news-side-list li {
    display: flex;
    flex-direction: column;
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--color-border);
}

.news-side-list li:last-child {
    border-bottom: none;
}

.news-side-list a {
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--color-heading);
    text-decoration: none;
}

.news-side-list a:hover {
    color: var(--color-primary-dark);
}

/* Kep-doboz: a kep teljes egeszeben latszik (contain), a maradek helyet a
   kep elmosott, kinagyitott valtozata tolti ki - nincs kivagas, es nincs
   csunya feher/fekete savozas sem. */
.news-media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--color-primary-light);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}

.news-media-bg {
    position: absolute;
    inset: -10%;
    width: 120%;
    height: 120%;
    object-fit: cover;
    filter: blur(18px) brightness(0.85);
    transform: scale(1.05);
}

.news-media-img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.news-media-empty {
    font-size: 2rem;
    opacity: 0.6;
}

.news-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.55rem;
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

.news-meta-cat {
    color: var(--color-accent-dark);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.news-badge {
    font-weight: 700;
    font-size: 0.7rem;
    line-height: 1;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.news-badge--new {
    background: var(--color-primary);
    color: #fff;
}

.news-badge--pin {
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
    text-transform: none;
}

.news-hero,
.news-tile,
.news-row {
    color: var(--color-text);
    text-decoration: none;
    display: block;
}

.news-hero h2,
.news-tile h3,
.news-row h3 {
    color: var(--color-heading);
    transition: color 0.15s ease;
}

.news-hero:hover h2,
.news-tile:hover h3,
.news-row:hover h3 {
    color: var(--color-primary-dark);
}

.news-hero-media {
    border-radius: var(--radius);
}

.news-hero-body {
    padding-top: 0.9rem;
}

.news-hero h2 {
    font-size: 1.85rem;
    line-height: 1.2;
    margin: 0.35rem 0 0.5rem;
}

.news-hero-excerpt {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 1.02rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-secondary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.3rem;
    margin-top: 1.6rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--color-border);
}

.news-tile-body {
    padding-top: 0.6rem;
}

.news-tile h3 {
    font-size: 1.08rem;
    line-height: 1.3;
    margin: 0.3rem 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-most-read h2 {
    font-size: 1rem;
    margin: 0 0 0.4rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--color-heading);
}

.news-most-read ol {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: most-read;
}

.news-most-read li {
    counter-increment: most-read;
    display: flex;
    gap: 0.75rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--color-border);
}

.news-most-read li::before {
    content: counter(most-read);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--color-primary);
    min-width: 1.1rem;
}

.news-most-read a {
    color: var(--color-heading);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.92rem;
    line-height: 1.35;
}

.news-most-read a:hover {
    color: var(--color-primary-dark);
}

.news-curiosity {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 1rem 1.1rem;
    background: var(--color-primary-light);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--color-text);
}

.news-curiosity-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-primary-dark);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.news-curiosity-title {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--color-heading);
    line-height: 1.3;
}

.news-curiosity-more {
    font-size: 0.82rem;
    color: var(--color-text-muted);
}

.news-stream {
    margin-top: 1rem;
}

.news-day-heading {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    margin: 1.8rem 0 0;
    padding-bottom: 0.45rem;
    border-bottom: 2px solid var(--color-heading);
}

.news-row {
    display: flex;
    gap: 1.1rem;
    align-items: flex-start;
    padding: 1rem 0;
    border-bottom: 1px solid var(--color-border);
}

.news-row-body {
    flex: 1;
    min-width: 0;
}

.news-row h3 {
    font-size: 1.12rem;
    line-height: 1.3;
    margin: 0.3rem 0 0.3rem;
}

.news-row-excerpt {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.92rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-row-media {
    flex-shrink: 0;
    width: 180px;
}

.news-row-media .news-media-empty {
    font-size: 1.5rem;
}

@media (max-width: 900px) {
    /* Mobilon egy oszlop, sorrend: cimlap, Legolvasottabb + erdekesseg,
       hirlista, tovabbi dobozok. A ket oszlop-csomagolo display: contents,
       hogy a gyermekeik egymas kozott atrendezhetok legyenek. */
    .news-layout {
        display: flex;
        flex-direction: column;
    }

    .news-main,
    .news-side {
        display: contents;
    }

    .news-lead { order: 1; }
    .news-stream { order: 3; }

    .news-sidebar {
        order: 2;
        margin-top: 1.8rem;
    }

    .news-sidebar--extra {
        order: 4;
        margin-top: 2.5rem;
    }

    .news-sidebar--extra > :last-child {
        position: static;
    }
}

@media (max-width: 640px) {
    .news-page {
        padding-top: 0.8rem;
    }

    .news-page-header h1 {
        font-size: 1.45rem;
    }

    .news-tabs {
        margin: 0 -1rem 1rem;
        padding: 0 0.4rem;
    }

    .news-tab {
        padding: 0.65rem 0.7rem 0.55rem;
        font-size: 0.9rem;
    }

    .news-hero-media {
        margin: 0 -1rem;
        border-radius: 0;
    }

    .news-hero h2 {
        font-size: 1.35rem;
    }

    .news-hero-excerpt {
        -webkit-line-clamp: 2;
        font-size: 0.95rem;
    }

    /* Mobilon a mellekhirek is listaelemkent, kis kepppel jobbra jelennek meg. */
    .news-secondary {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        margin-top: 1rem;
        padding-top: 0;
    }

    .news-tile {
        display: flex;
        flex-direction: row-reverse;
        gap: 0.9rem;
        padding: 0.9rem 0;
        border-bottom: 1px solid var(--color-border);
    }

    .news-tile-media,
    .news-row-media {
        width: 96px;
        aspect-ratio: 1 / 1;
        flex-shrink: 0;
    }

    .news-tile-body {
        flex: 1;
        min-width: 0;
        padding-top: 0;
    }

    .news-tile h3,
    .news-row h3 {
        font-size: 1rem;
    }

    .news-row {
        gap: 0.9rem;
        padding: 0.9rem 0;
    }

    .news-row-excerpt {
        display: none;
    }

    .news-tile-media.news-media--empty {
        display: none;
    }

    .news-most-read li:nth-child(n + 4) {
        display: none;
    }

    .news-day-heading {
        margin-top: 1.4rem;
    }
}

.news-load-sentinel {
    height: 1px;
}

.news-load-more {
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
}

.news-rss-footer {
    text-align: center;
    margin-top: 2rem;
}

.news-article {
    max-width: 720px;
    margin: 0 auto;
}

.news-breadcrumb {
    margin-bottom: 0.8rem;
}

.news-article h1 {
    margin: 0.3rem 0 0.5rem;
}

.news-article-meta {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.news-article-cover {
    width: 100%;
    border-radius: var(--radius);
    margin-bottom: 1.2rem;
}

.news-source {
    margin-top: 1.5rem;
    font-size: 0.92rem;
    color: var(--color-text-muted);
}

.news-previous-year {
    margin-top: 0.6rem;
    font-size: 0.92rem;
    color: var(--color-text-muted);
}

.news-internal-links {
    margin-top: 1.8rem;
    padding: 1rem 1.2rem;
    background: var(--color-surface-alt, rgba(0, 0, 0, 0.03));
    border-radius: var(--radius);
}

.news-internal-links h2 {
    font-size: 1.05rem;
    margin: 0 0 0.6rem;
}

.news-internal-links ul {
    margin: 0;
    padding-left: 1.2rem;
}

.news-internal-links li {
    margin-bottom: 0.3rem;
    font-size: 0.92rem;
}

.news-share-row {
    margin-top: 1rem;
}

.news-related {
    margin-top: 3rem;
    border-top: 1px solid var(--color-border);
    padding-top: 1.5rem;
}

.news-related-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.news-card-compact {
    display: flex;
    flex-direction: column;
}

.news-card-compact .news-card-cover {
    max-height: 110px;
}

.news-card-compact .news-card-body {
    padding: 0.7rem 0.8rem;
}

.news-card-compact h3 {
    font-size: 0.92rem;
    margin: 0.15rem 0 0.3rem;
    line-height: 1.3;
}

.news-card-readmore {
    display: inline-block;
    margin-top: 0.6rem;
    font-weight: 600;
    color: var(--color-primary);
    font-size: 0.9rem;
}

.fb-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #1877F2;
    color: #fff;
    text-decoration: none;
    padding: 0.6rem 1.1rem;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.92rem;
    transition: background 0.15s ease;
}

.fb-share-btn:hover {
    background: #145dc4;
}

/* A hir-szoveg (Quill-editorral szerkesztett, esetenkent beillesztett
   kepeket is tartalmazo) tartalmaban a kepek korul mindig legyen fuggoleges
   ter, kulonben a kep es a koruleveo bekezdesek egybefolynak. */
.detail-description img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1.2rem auto;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
}

.news-reactions {
    margin: 2rem 0;
    padding: 1.2rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.news-reactions-label {
    margin: 0 0 0.7rem;
    font-weight: 600;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.news-reactions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.news-reaction-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 0.4rem 0.9rem;
    cursor: pointer;
    font-size: 1rem;
    transition: border-color 0.15s ease, transform 0.1s ease;
}

.news-reaction-btn:hover {
    border-color: var(--color-primary);
    transform: translateY(-1px);
}

.news-reaction-btn.is-active {
    background: var(--color-primary-light);
    border-color: var(--color-primary);
}

.news-reaction-count {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-muted);
    min-width: 0.8rem;
    text-align: left;
}

@media (max-width: 720px) {
    .news-related-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 720px) {
    .news-card-cover {
        max-height: 220px;
    }
}

/* ===== Fooldal: reszponziv csempeszam - desktopon 9 ajanlott
   vallalkozas / 4 aprohirdetes latszik, mobilon csak 5, illetve 2 -
   a tobbit CSS-sel (nem kulon lekerdezessel) rejtjuk el, hogy ugyanaz
   a veletlenszeru sorrend maradjon mindket nezetben. ===== */
@media (max-width: 720px) {
    .bento-grid > .bento-tile:nth-child(n + 6) {
        display: none;
    }

    .home-classifieds-grid > .business-card:nth-child(n + 3) {
        display: none;
    }
}

.business-card-manage:hover {
    box-shadow: var(--shadow);
    transform: none;
}

.business-card-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.8rem;
}

.business-card-actions .btn {
    width: 100%;
    text-align: center;
}

.business-card-actions form .btn {
    width: 100%;
}

.featured-status-box {
    margin-top: 0.9rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--color-border);
}

.featured-status-active {
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-primary-dark);
}

.featured-status-inactive {
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.featured-renew-row {
    display: flex;
    gap: 0.5rem;
}

.featured-renew-row form {
    flex: 1;
}

.featured-renew-row .btn {
    width: 100%;
}

.badge {
    position: absolute;
    top: 0.7rem;
    right: 0.7rem;
    background: var(--color-primary);
    color: #fff;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
}

/* ===== Rács / lista nezet-valto (adok-veszek) ===== */
.view-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.view-toggle {
    display: inline-flex;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 0.25rem;
    box-shadow: 0 1px 2px rgba(45, 49, 66, 0.04);
    flex-shrink: 0;
}

.view-toggle button {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.view-toggle button.active {
    background: var(--color-primary);
    color: #fff;
}

.view-toggle button:not(.active):hover {
    background: var(--color-bg);
    color: var(--color-text);
}

.listing-type-toggle {
    display: inline-flex;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 0.25rem;
    flex-shrink: 0;
}

.listing-type-option {
    display: flex;
    align-items: center;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.listing-type-option.is-active {
    background: var(--color-primary);
    color: #fff;
}

.listing-type-option:not(.is-active):hover {
    background: var(--color-bg);
    color: var(--color-text);
}

/* Lista nezet: kompakt, egysoros kartyak, hatarozott elvalasztassal es
   finom hover-emelessel - modernebb hatas, mint egy egyszeru sortabla. */
.classified-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.classified-list-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0.65rem 1rem;
    text-decoration: none;
    color: var(--color-text);
    box-shadow: 0 1px 2px rgba(45, 49, 66, 0.04);
    transition: box-shadow 0.15s ease, transform 0.15s ease, background 0.15s ease;
}

.classified-list-row:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-1px);
    background: var(--color-bg);
}

.classified-list-thumb {
    width: 4rem;
    height: 4rem;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: #fff;
}

.search-results-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.search-result-row {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.15rem 0.75rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0.75rem 1rem;
    text-decoration: none;
    color: var(--color-text);
    box-shadow: 0 1px 2px rgba(45, 49, 66, 0.04);
    transition: box-shadow 0.15s ease, transform 0.15s ease, background 0.15s ease;
}

.search-result-row:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-1px);
    background: var(--color-bg);
}

.search-result-type {
    grid-column: 1 / -1;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.search-result-title {
    grid-column: 1 / -1;
    font-size: 1.05rem;
    font-weight: 600;
}

.search-result-meta {
    grid-column: 1 / -1;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.search-result-excerpt {
    grid-column: 1 / -1;
    font-size: 0.88rem;
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.classified-list-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    flex: 1;
}

.classified-list-title {
    font-weight: 700;
    font-size: 0.98rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.classified-list-title .badge-inline {
    display: inline-block;
    background: var(--color-primary);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    margin-right: 0.4rem;
    vertical-align: middle;
}

.classified-list-category {
    color: var(--color-accent-dark);
    font-size: 0.76rem;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.classified-list-price {
    flex-shrink: 0;
    font-weight: 700;
    font-size: 0.95rem;
    white-space: nowrap;
    margin-left: auto;
    text-align: right;
}

.classified-list-cta {
    flex-shrink: 0;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .classified-list-category {
        display: none;
    }

    .classified-list-price {
        font-size: 0.85rem;
    }

    .classified-list-cta {
        display: none;
    }
}

.classified-card-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 0.7rem;
    font-size: 0.82rem;
    color: var(--color-text-muted);
    margin-top: 0.3rem;
}

.classified-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.6rem;
}

.classified-badge {
    background: var(--color-accent-light, #fdece3);
    color: var(--color-accent-dark);
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
}

.hours-table td {
    padding: 0.3rem 1rem 0.3rem 0;
}

.hours-main {
    display: block;
}

.hours-lunch {
    display: block;
    font-size: 0.82rem;
    color: var(--color-text-muted);
    margin-top: 0.1rem;
}

.review {
    border-top: 1px solid var(--color-border);
    padding: 0.8rem 0;
}

.owner-reply {
    background: var(--color-primary-light);
    padding: 0.6rem 0.8rem;
    border-radius: var(--radius-sm);
    margin-top: 0.4rem;
}

/* ===== Flash messages ===== */
.flash {
    padding: 0.8rem 1.1rem;
    border-radius: var(--radius-sm);
    margin-bottom: 1.2rem;
    font-weight: 500;
}

.flash-success {
    background: var(--color-success-bg);
    color: var(--color-success-text);
}

.flash-error {
    background: var(--color-error-bg);
    color: var(--color-error-text);
}

/* ===== Forms (auth, etc.) ===== */
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    max-width: 380px;
    background: var(--color-surface);
    padding: 1.5rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--color-border);
}

.g-recaptcha {
    overflow-x: auto;
    overflow-y: hidden;
}

@media (max-width: 420px) {
    .g-recaptcha {
        transform: scale(0.85);
        transform-origin: 0 0;
        /* a transform nem valtoztatja a foglalt teret, ezert a wrappernek
           kezzel kell "visszaadni" a helyet, kulonben ures resz maradna
           a skalazott widget alatt/mellett */
        margin-bottom: -14px;
    }
}

.oauth-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    max-width: 380px;
    margin-bottom: 1rem;
}

.oauth-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.7rem 1rem;
    border-radius: var(--radius-sm);
    font-weight: 600;
    text-decoration: none;
    font-size: 0.92rem;
    border: 1px solid var(--color-border);
}

.oauth-btn-google {
    background: #fff;
    color: var(--color-dark);
}

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

.oauth-btn-facebook {
    background: #1877F2;
    color: #fff;
    border-color: #1877F2;
}

.oauth-btn-facebook:hover {
    background: #145dbf;
}

.oauth-divider {
    display: flex;
    align-items: center;
    max-width: 380px;
    margin: 1rem 0;
    color: var(--color-text-muted);
    font-size: 0.82rem;
}

.oauth-divider::before,
.oauth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--color-border);
}

.oauth-divider span {
    padding: 0 0.8rem;
}

.auth-form label {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.9rem;
    color: var(--color-text-muted);
    font-weight: 500;
}

.auth-form input {
    padding: 0.65rem 0.8rem;
    font-size: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
}

.auth-form input:focus, .auth-form textarea:focus, .auth-form select:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
}

.auth-form textarea, .auth-form select {
    padding: 0.65rem 0.8rem;
    font-size: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    resize: vertical;
}

.business-form {
    max-width: 520px;
}

.checkbox-label {
    flex-direction: row !important;
    align-items: center;
    gap: 0.5rem !important;
}

.checkbox-label input {
    width: auto;
}

.business-form small {
    color: var(--color-text-muted);
    font-size: 0.8rem;
}

.logo-preview {
    max-width: 180px;
    max-height: 100px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    display: block;
    margin-bottom: 0.4rem;
    background: repeating-conic-gradient(#eee 0% 25%, #fff 0% 50%) 50% / 16px 16px;
}

.menu-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.8rem;
    margin-bottom: 1rem;
}

.menu-photo-item {
    position: relative;
}

.admin-editing-banner {
    background: var(--color-surface-alt);
    border-left: 4px solid var(--color-primary);
    padding: 0.7rem 1rem;
    border-radius: var(--radius-sm);
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.photo-drag-handle {
    position: absolute;
    top: 0.3rem;
    left: 0.3rem;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    border-radius: var(--radius-sm);
    padding: 0.1rem 0.4rem;
    font-size: 0.9rem;
    line-height: 1.4;
    cursor: grab;
    z-index: 1;
    user-select: none;
}

.menu-photo-item.is-dragging {
    opacity: 0.4;
}

.menu-photo-item.is-first::after {
    content: "★ Első kép";
    position: absolute;
    top: 0.3rem;
    right: 0.3rem;
    background: var(--color-primary);
    color: #fff;
    border-radius: var(--radius-sm);
    padding: 0.1rem 0.5rem;
    font-size: 0.75rem;
    z-index: 1;
}

.menu-photo-view {
    display: block;
}

.menu-photo-view img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    display: block;
}

.menu-photo-item img {
    width: 100%;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    margin-bottom: 0.3rem;
}

.photo-uploading {
    width: 100%;
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.5rem;
    font-size: 0.82rem;
    color: var(--color-text-muted);
    background: var(--color-surface-alt, #f3f3f3);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-sm);
}

.upload-status {
    font-size: 0.82rem;
    color: var(--color-text-muted);
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.product-card {
    background: var(--color-surface);
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.product-card img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.product-card .product-body {
    padding: 0.9rem;
}

.product-card h4 {
    margin: 0 0 0.3rem;
    font-family: var(--font-heading);
}

.product-price {
    font-weight: 700;
    color: var(--color-primary-dark);
}

.product-tags {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
    margin-top: 0.4rem;
}

.product-tag {
    font-size: 0.72rem;
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
}

.product-category-group {
    margin-bottom: 2rem;
}

.business-logo {
    max-width: 240px;
    max-height: 135px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    margin-bottom: 1rem;
}

.hours-form {
    max-width: 720px;
    overflow-x: auto;
}

.hours-edit-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-surface);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 1rem;
}

.hours-edit-table th, .hours-edit-table td {
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    font-size: 0.9rem;
}

.time-picker-input {
    width: 5.2rem;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-family: var(--font-body);
    background: var(--color-surface);
    text-align: center;
}

/* flatpickr (datum-/ido-valaszto) - a projekt sajat szinpalettajahoz
   igazitva, hogy ne "idegen" widgetkent hasson a portalon. */
.flatpickr-calendar {
    font-family: var(--font-body);
    box-shadow: var(--shadow-hover);
    border-radius: var(--radius-sm);
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.flatpickr-day.today {
    border-color: var(--color-primary);
}

.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
span.flatpickr-weekday {
    color: var(--color-text);
}

.flatpickr-time input:hover,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:focus {
    background: var(--color-bg);
}

.social-links {
    display: flex;
    gap: 0.8rem;
    margin: 0.8rem 0;
}

.social-links a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--color-accent-dark);
    font-weight: 500;
    text-decoration: none;
}

.social-links a:hover {
    text-decoration: underline;
}

.social-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

#map-preview, .map-view {
    margin: 0.6rem 0;
}

.auth-form button {
    padding: 0.75rem;
    font-size: 1rem;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 600;
    font-family: var(--font-body);
}

.auth-form button:hover {
    background: var(--color-primary-dark);
}

.auth-form button.danger {
    background: #C0392B;
}

.auth-form button.danger:hover {
    background: #A5281B;
}

.profile-table {
    width: 100%;
    border-collapse: collapse;
}

.profile-table th {
    text-align: left;
    padding: 0.6rem 1.2rem 0.6rem 0;
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    font-weight: 700;
    border-bottom: 2px solid var(--color-border);
}

.profile-table td {
    padding: 0.7rem 1.2rem 0.7rem 0;
    border-bottom: 1px solid var(--color-border);
}

.profile-table tbody tr:hover {
    background: var(--color-bg);
}

/* ===== Responsive ===== */
@media (min-width: 721px) {
    .mobile-nav-search {
        display: none !important;
    }
}

@media (max-width: 720px) {
    .main-nav-desktop {
        display: none;
    }

    .nav-search, .nav-link-account, .header-actions > .btn-primary, .nav-account-dropdown {
        display: none;
    }

    .header-actions {
        margin-left: auto;
        gap: 0.6rem;
    }

    .nav-toggle {
        display: block;
    }

    nav.main-nav, .nav-account {
        width: 100%;
        flex-direction: column;
        gap: 0.05rem;
        margin-left: 0;
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-left: 1px solid var(--color-border);
        border-right: 1px solid var(--color-border);
        padding: 0.35rem;
        box-shadow: var(--shadow);
        font-size: 0.94rem;
    }

    nav.main-nav {
        margin-top: 0.6rem;
        border-bottom: none;
        border-radius: var(--radius) var(--radius) 0 0;
        padding-bottom: 0.2rem;
    }

    .nav-account {
        /* A .header-inner flex-wrap "gap"-je minden sortoresnel 1.5rem
           reset szur be - ezt semlegesitjuk, hogy a ket doboz (main-nav es
           nav-account) egybefuggo panelnek lassek, ne ket kulon, resekkel
           elvalasztott kartyanak. */
        margin-top: -1.5rem;
        border-top: none;
        border-radius: 0 0 var(--radius) var(--radius);
        padding-top: 0.4rem;
    }

    nav.main-nav.is-open, .nav-account.is-open {
        display: flex;
    }

    .mobile-nav-search {
        display: flex;
        gap: 0.4rem;
        padding: 0.3rem;
        margin-bottom: 0.4rem;
    }

    .mobile-nav-search input {
        flex: 1;
        padding: 0.5rem 0.7rem;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-sm);
        background: var(--color-bg);
        color: var(--color-text);
    }

    .mobile-nav-search button {
        background: var(--color-primary);
        color: #fff;
        border: none;
        border-radius: var(--radius-sm);
        padding: 0 0.9rem;
        cursor: pointer;
    }

    nav.main-nav a, .nav-account-links a {
        padding: 0.32rem 0.7rem;
        border-radius: var(--radius-sm);
        border-bottom: none;
        line-height: 1.3;
    }

    .nav-link-main {
        font-weight: 700;
    }

    nav.main-nav a:hover, .nav-account-links a:hover {
        background: var(--color-bg);
    }

    .mobile-categories {
        display: flex;
        flex-direction: column;
        gap: 0;
        margin: 0 0 0.05rem 0.7rem;
        padding-left: 0.6rem;
        border-left: 2px solid var(--color-border);
    }

    .mobile-categories a {
        font-size: 0.85rem;
        color: var(--color-text-muted);
        padding: 0.2rem 0.6rem;
    }

    .nav-account {
        margin-left: 0;
    }

    .nav-account-links {
        flex-direction: column;
        align-items: stretch;
        gap: 0.35rem;
    }

    .nav-account-cta-row {
        display: flex;
        gap: 0.5rem;
    }

    .nav-account-cta-row a {
        flex: 1;
    }

    .nav-account-links a, .nav-account-links .link-button {
        display: block;
        text-align: center;
        padding: 0.55rem 0.7rem;
        border-radius: var(--radius-sm);
        font-weight: 600;
    }

    .nav-account-links a.nav-link-account-btn {
        border: 1px solid var(--color-primary);
        color: var(--color-primary) !important;
    }

    .nav-account .btn {
        margin: 0;
        text-align: center;
    }

    .nav-logout-link {
        padding: 0.55rem 0.7rem;
        width: 100%;
        text-align: center;
        display: block;
        color: var(--color-text-muted);
    }

    .nav-account .theme-toggle {
        width: 100%;
        height: auto;
        border-radius: var(--radius-sm);
        justify-content: flex-start;
        padding: 0.6rem 0.7rem;
        font-size: 0.95rem;
        margin-top: 0.4rem;
        border: none;
        border-top: 1px solid var(--color-border);
        background: none;
    }

    .nav-account .theme-toggle:hover {
        background: var(--color-bg);
        transform: none;
    }

    .theme-toggle-label {
        display: inline;
        margin-left: 0.35rem;
    }

    .header-inner {
        flex-wrap: wrap;
    }

    .logo {
        flex-shrink: 1;
        min-width: 0;
    }

    .logo img {
        height: 26px;
        max-width: 100%;
    }

    .header-actions {
        flex-shrink: 0;
    }

    .hero {
        padding: 2rem 1.2rem;
    }

    .hero-search {
        flex-direction: column;
        border-radius: var(--radius);
        gap: 0.5rem;
        padding: 0.6rem;
    }

    .hero-search button {
        border-radius: var(--radius-sm);
    }
}

/* ===== Admin: sidebar shell ===== */
.admin-shell {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
}

.admin-mobile-toggle {
    display: none;
}

.admin-sidebar {
    width: 250px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.2rem;
    position: sticky;
    top: 90px;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
}

.admin-sidebar-section h4 {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    margin: 0 0 0.5rem;
    font-weight: 700;
}

.admin-sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.7rem;
    border-radius: var(--radius-sm);
    color: var(--color-text);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.92rem;
    margin-bottom: 0.15rem;
}

.admin-sidebar-link:hover {
    background: var(--color-bg);
}

.admin-sidebar-link.active {
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
    font-weight: 700;
}

.admin-main {
    flex: 1;
    min-width: 0;
}

@media (max-width: 860px) {
    .admin-shell {
        flex-direction: column;
        gap: 1rem;
    }

    .admin-mobile-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-sm);
        padding: 0.7rem 1rem;
        font-weight: 700;
        font-size: 0.95rem;
        cursor: pointer;
        color: var(--color-text);
    }

    .admin-sidebar {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 82%;
        max-width: 300px;
        max-height: none;
        border-radius: 0;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        z-index: 60;
    }

    .admin-sidebar.is-open {
        transform: translateX(0);
    }

    .admin-sidebar-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 55;
    }
}

@media (min-width: 861px) {
    .admin-sidebar-backdrop {
        display: none;
    }
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.2rem;
    text-align: center;
    box-shadow: var(--shadow);
}

.stat-number {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-primary-dark);
}

.stat-label {
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

.analytics-trend {
    font-size: 0.78rem;
    font-weight: 600;
    margin-top: 0.4rem;
}

.analytics-trend.is-up {
    color: var(--color-accent-dark);
}

.analytics-trend.is-down {
    color: #C0392B;
}

.analytics-chart {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 140px;
    padding: 0.5rem 0;
}

.analytics-bar-wrap {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: flex-end;
}

.analytics-bar {
    width: 100%;
    min-height: 2px;
    background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-accent) 100%);
    border-radius: 3px 3px 0 0;
    transition: opacity 0.15s ease;
}

.analytics-bar-wrap:hover .analytics-bar {
    opacity: 0.75;
}

.analytics-chart-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

.admin-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.9rem 1.1rem;
    margin-bottom: 1.2rem;
}

.admin-filter-bar label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

.admin-filter-bar select {
    padding: 0.4rem 0.6rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    color: var(--color-text);
    font-weight: 400;
}

.admin-filter-count {
    margin-left: auto;
    font-size: 0.88rem;
    color: var(--color-text-muted);
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-surface);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 2rem;
}

.admin-table th, .admin-table td {
    padding: 0.6rem 0.8rem;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    font-size: 0.92rem;
}

.admin-table-scroll {
    overflow-x: auto;
    margin-bottom: 1.2rem;
}

.admin-table-compact {
    margin-bottom: 0;
}

.admin-table-compact th, .admin-table-compact td {
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
    white-space: nowrap;
}

.admin-table-compact input[type="text"] {
    width: 110px;
    padding: 0.3rem 0.4rem;
    font-size: 0.85rem;
}

.seo-audit-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.2rem;
    margin: 0 0 1rem;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.seo-audit-table th {
    text-align: center;
    font-size: 1rem;
}

.seo-audit-table th:first-child {
    text-align: left;
}

.seo-audit-icon {
    text-align: center;
    font-size: 1.05rem;
}

.admin-table-subtext {
    color: var(--color-text-muted);
    font-weight: 400;
    white-space: normal;
}

.admin-table select {
    padding: 0.3rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
}

/* A hosszu (vesszovel elvalasztott) opciolistak ne toljak jobbra a
   tablazatot - inkabb tordeljenek, es 8 elem felett roviditve
   jelenjenek meg (a teljes lista a szerkesztes-formban latszik). */
.admin-table-options {
    max-width: 340px;
    white-space: normal;
    overflow-wrap: anywhere;
}

.admin-table-options-more {
    color: var(--color-text-muted);
    white-space: nowrap;
}

/* Kapcsolo (toggle switch) egy kattintasos be/ki allitasokhoz az admin
   tablazatokban (pl. szurheto / kartyan lathato / kotelezo) - a form
   sajat submit-gombja, csak kapcsolokent kiszinezve, hogy a bekapcsolt
   allapot azonnal, szin alapjan is felismerheto legyen. */
.toggle-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 2.4rem;
    height: 1.3rem;
    padding: 0.15rem;
    border: none;
    border-radius: 999px;
    background: var(--color-border);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s ease;
}

.toggle-switch:hover {
    filter: brightness(0.94);
}

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

.toggle-switch .toggle-knob {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: var(--color-surface);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    transform: translateX(0);
    transition: transform 0.15s ease;
}

.toggle-switch.is-on {
    background: var(--color-accent);
}

.toggle-switch.is-on .toggle-knob {
    transform: translateX(1.1rem);
}

.toggle-switch-cell {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Egy tulajdonsag szerkesztese/kapcsolgatasa utan a szerver a sor
   horgonyara iranyit vissza (#attribute-row-ID), hogy az oldal ne
   ugorjon a tetejere - a rogzitett fejlec alol kilogna, ezert margot
   kap, es rovid felvillanassal is jelezzuk, melyik sort erintette
   a mentett valtoztatas. */
tr[id^="attribute-row-"] {
    scroll-margin-top: 5rem;
}

tr[id^="attribute-row-"]:target {
    animation: attribute-row-flash 2s ease-out;
}

@keyframes attribute-row-flash {
    from {
        background: var(--color-primary-light);
    }
    to {
        background: transparent;
    }
}

/* ===== Account (Fiokom) sidebar layout ===== */
.account-layout {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}

.account-nav-toggle {
    display: none;
}

.account-sidebar {
    width: 230px;
    flex-shrink: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1rem;
    position: sticky;
    top: 90px;
}

.account-sidebar nav {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.account-sidebar nav a {
    padding: 0.65rem 0.9rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--color-text);
    font-weight: 500;
    font-size: 0.95rem;
}

.account-sidebar nav a:hover {
    background: var(--color-primary-light);
}

.account-sidebar nav a.active {
    background: var(--color-primary);
    color: #fff;
}

.account-sidebar nav a.account-nav-danger {
    color: #C0392B;
    margin-top: 0.6rem;
    border-top: 1px solid var(--color-border);
    padding-top: 0.9rem;
    border-radius: 0;
}

.account-sidebar nav a.account-nav-danger.active {
    background: #C0392B;
    color: #fff;
    border-radius: var(--radius-sm);
}

.account-content {
    flex: 1;
    min-width: 0;
}

.account-quick-links {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.account-quick-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.2rem;
    text-decoration: none;
    color: var(--color-text);
    box-shadow: var(--shadow);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.account-quick-card:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}

.account-quick-card h3 {
    margin: 0 0 0.4rem;
    font-size: 1.05rem;
}

.account-quick-card p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.danger-zone {
    background: #FDEDEC;
    border: 1px solid #F5C6C0;
    border-radius: var(--radius);
    padding: 1.2rem;
    max-width: 520px;
}

@media (max-width: 720px) {
    .account-layout {
        flex-direction: column;
    }

    .account-nav-toggle {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-sm);
        padding: 0.8rem 1rem;
        font-weight: 600;
        cursor: pointer;
        font-family: var(--font-body);
        font-size: 1rem;
        color: var(--color-text);
    }

    .account-sidebar {
        display: none;
        width: 100%;
        position: static;
    }

    .account-sidebar.is-open {
        display: block;
    }
}

/* ===== Modern vallalkozas-szerkeszto (biz-form) ===== */
[x-cloak] {
    display: none !important;
}

.biz-form-page {
    max-width: 780px;
    margin: 0 auto;
}

.biz-form-header h2 {
    margin-bottom: 0.2rem;
}

.biz-form-sub {
    color: var(--color-text-muted);
    margin-top: 0;
}

.biz-form {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.biz-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-top: 4px solid var(--color-primary);
    border-radius: var(--radius);
    padding: 1.4rem 1.5rem;
    box-shadow: var(--shadow);
}

.biz-menu-items-card {
    background: var(--color-primary-light);
    border-color: var(--color-primary);
}

.biz-card-title {
    margin: 0 0 1rem;
    font-size: 1.05rem;
}

.biz-card-hint {
    color: var(--color-text-muted);
    font-size: 0.88rem;
    margin-top: -0.5rem;
    margin-bottom: 1rem;
}

.coords-override-details {
    margin: 0.6rem 0 1rem;
}

.coords-override-details summary {
    cursor: pointer;
    color: var(--color-primary);
    font-size: 0.9rem;
    font-weight: 600;
}

.coords-override-details summary:hover {
    text-decoration: underline;
}

.menu-context-banner {
    display: inline-block;
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-sm);
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    margin-bottom: 1.2rem;
}

.biz-field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.biz-field-grid label, .biz-card > label {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.9rem;
    color: var(--color-text-muted);
    font-weight: 500;
}

.biz-field-grid input, .biz-field-grid select,
.biz-card textarea, .biz-card > label input, .biz-card > label select {
    padding: 0.6rem 0.8rem;
    font-size: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
}

.biz-card textarea {
    width: 100%;
    resize: vertical;
    box-sizing: border-box;
}

.faq-editor-pair {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.9rem 0;
    border-top: 1px solid var(--color-border);
}

.faq-editor-pair:first-of-type {
    border-top: none;
    padding-top: 0;
}

.faq-editor-pair label {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.9rem;
    color: var(--color-text-muted);
    font-weight: 500;
}

.faq-editor-pair label input,
.faq-editor-pair label textarea {
    padding: 0.6rem 0.8rem;
    font-size: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    resize: vertical;
    box-sizing: border-box;
}

.biz-field-with-toggle {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.biz-field-with-toggle .checkbox-label {
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--color-text-muted);
}

/* ============================================================
   Osszecsukhato "feature-group" kartyak - kozos vizualis nyelv a
   felszereltseg-csoportokhoz a hirdetesfelado urlapon, az admin
   tulajdonsag-listaban es a nyilvanos hirdetes-oldalon.

   Minden csoport ONALLO, lathatoan megemelt kartya (mindig latszo
   arnyekkal, nem csak nyitva/hoverre), es sajat kategoria-szinnel
   (bal szeli savval + kor alaku ikon-jelvennyel) - igy csukott
   allapotban is azonnal elkulonulnek egymastol, nem egy egybefolyo
   listakent hatnak. A szin a Twig-oldali feature-group-icon-macro.twig
   accent()-jebol jon (--fg-accent egyedi tulajdonsagkent, inline style-lal).
   ============================================================ */
.feature-group {
    --fg-accent: var(--color-text-muted);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 5px solid var(--fg-accent);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.feature-group summary {
    border-top-right-radius: calc(var(--radius-sm) - 1px);
}

.feature-group[open] summary {
    border-bottom: none;
}

.feature-group + .feature-group {
    margin-top: 1.1rem;
}

.feature-group:hover {
    box-shadow: var(--shadow-hover);
}

.feature-group[open] {
    box-shadow: var(--shadow-hover);
}

.feature-group summary {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    list-style: none;
    cursor: pointer;
    padding: 1rem 1.15rem;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.98rem;
    color: var(--color-heading);
    user-select: none;
    transition: background 0.12s ease;
}

.feature-group summary:hover {
    background: color-mix(in srgb, var(--fg-accent) 6%, var(--color-surface));
}

.feature-group summary::-webkit-details-marker {
    display: none;
}

.feature-group summary::marker {
    content: "";
}

.fg-chevron {
    flex-shrink: 0;
    width: 0.65rem;
    height: 0.65rem;
    border-right: 2.5px solid var(--fg-accent);
    border-bottom: 2.5px solid var(--fg-accent);
    transform: rotate(-45deg);
    transition: transform 0.2s ease;
}

.feature-group[open] .fg-chevron {
    transform: rotate(45deg);
}

.fg-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 50%;
    font-size: 1.1rem;
    line-height: 1;
    background: color-mix(in srgb, var(--fg-accent) 16%, var(--color-surface));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg-accent) 30%, transparent);
}

.fg-name {
    flex: 1;
    min-width: 0;
}

.fg-count {
    flex-shrink: 0;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-text-muted);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 0.25rem 0.7rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.fg-count.has-selected {
    background: color-mix(in srgb, var(--fg-accent) 16%, var(--color-surface));
    border-color: var(--fg-accent);
    color: var(--fg-accent);
}

.feature-group-body {
    padding: 0.2rem 1.15rem 1.15rem;
    border-top: 1px solid var(--color-border);
    background: color-mix(in srgb, var(--fg-accent) 3%, var(--color-surface));
    border-bottom-left-radius: calc(var(--radius-sm) - 1px);
    border-bottom-right-radius: calc(var(--radius-sm) - 1px);
    /* A tablazatos valtozatnal (admin) a tartalom szelesebb lehet a
       kartyanal - inkabb gorgessen vizszintesen, mint hogy overflow:hidden
       levagja a jobb szeli oszlopokat (szerkesztes/torles gombok). */
    overflow-x: auto;
}

.feature-group-body .biz-field-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    margin-top: 0.9rem;
    margin-bottom: 0;
    gap: 0.35rem 1rem;
}

.feature-group-body .checkbox-label {
    padding: 0.32rem 0.5rem;
    margin: 0 -0.5rem;
    border-radius: 6px;
    transition: background 0.12s ease;
}

.feature-group-body .checkbox-label:hover {
    background: color-mix(in srgb, var(--fg-accent) 10%, var(--color-surface));
}

/* Admin valtozat: a body tablazatot tartalmaz, nem checkbox-racsot */
.feature-group.admin-attribute-group .feature-group-body {
    padding: 0.9rem 1.1rem 1.1rem;
}

.feature-group.admin-attribute-group table.admin-table {
    margin: 0;
}

/* Nyilvanos hirdetes-oldal: mar kivalasztott jelvenyek csoportositva */
.feature-group.detail-badge-group .feature-group-body {
    padding-top: 0.9rem;
}

/* A csoportok elott/utan is legyen lathato leheletnyi tavolsag a tobbi
   kartyatol, hogy ne "ragadjanak" a szomszedos biz-card-hoz. */
.biz-card > .feature-group:first-of-type {
    margin-top: 1.1rem;
}

.biz-logo-row {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    flex-wrap: wrap;
}

.biz-file-label {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.9rem;
    color: var(--color-text-muted);
    font-weight: 500;
}

.biz-dropzone {
    flex: 1;
    min-width: 220px;
    border: 2px dashed var(--color-border);
    border-radius: var(--radius);
    padding: 0.9rem 1rem;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.biz-dropzone.is-dragging {
    border-color: var(--color-primary);
    background-color: var(--color-primary-light);
}

.amenity-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.amenity-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0.6rem 0.8rem;
    font-size: 0.9rem;
    cursor: pointer;
}

.amenity-checkbox input {
    width: auto;
}

.amenity-counter {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--color-text-muted);
}

.amenity-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--color-bg);
    border: 1.5px solid var(--color-border);
    border-radius: 999px;
    padding: 0.5rem 1rem;
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
    user-select: none;
}

.amenity-chip:hover {
    border-color: var(--color-primary);
}

.amenity-chip:active {
    transform: scale(0.97);
}

.amenity-chip.is-selected {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.filter-panel-amenities .amenity-chip:has(input:checked) {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.amenity-chip input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.amenity-chip:has(input:focus-visible) {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.hours-table-wrap {
    overflow-x: auto;
}

.biz-save-bar {
    position: sticky;
    bottom: 0;
    background: rgba(250, 249, 246, 0.95);
    backdrop-filter: blur(4px);
    border-top: 1px solid var(--color-border);
    padding: 1rem 1.2rem;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    box-shadow: 0 -4px 16px rgba(45, 49, 66, 0.08);
    z-index: 20;
}

.biz-save-bar-hint {
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.btn-lg {
    padding: 0.85rem 1.8rem;
    font-size: 1.05rem;
}

.biz-extra-actions {
    margin-top: 1.5rem;
}

.danger-zone-card {
    border-top-color: #C0392B;
    background: #FDF2F1;
    margin-top: 1.5rem;
}

@media (max-width: 600px) {
    .biz-save-bar {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
}

/* ===== Publikus adatlap: hero slider, szolgaltatasok, szallashely-info ===== */
.hero-slider {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    aspect-ratio: 16 / 9;
    margin-bottom: 1.5rem;
    background: #000;
    box-shadow: var(--shadow-hover);
}

.slider-track {
    display: flex;
    height: 100%;
    transition: transform 0.4s ease;
}

.slider-slide {
    width: 100%;
    height: 100%;
    object-fit: cover;
    flex-shrink: 0;
}

.slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.85);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1.4rem;
    cursor: pointer;
    color: var(--color-dark);
    line-height: 1;
}

.slider-prev {
    left: 12px;
}

.slider-next {
    right: 12px;
}

.slider-dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.4rem;
}

.slider-dots button {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    padding: 0;
}

.slider-dots button.active {
    background: #fff;
}

.hero-single-photo {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius);
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow);
}

.accommodation-info {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1rem 1.4rem;
    margin: 1rem 0;
}

.accommodation-info div {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 80px;
}

.accommodation-info strong {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    color: var(--color-primary-dark);
}

.accommodation-info span {
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

.amenity-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0;
}

.amenity-tag {
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 500;
}

.status-pill {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
}

.status-pill.active {
    background: var(--color-success-bg);
    color: var(--color-success-text);
}

.status-pill.inactive {
    background: #EEE;
    color: var(--color-text-muted);
}

/* --- Programok (esemenyek) --- */

.events-page {
    max-width: 1000px;
    margin: 0 auto;
    padding: 2rem 1rem 4rem;
}

.events-page-header {
    margin-bottom: 2rem;
}

@media (max-width: 720px) {
    .events-page {
        padding-top: 0.5rem;
    }
}

.events-page-sub {
    color: var(--color-text-muted);
    max-width: 620px;
}

.event-calendar {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.5rem;
    margin-bottom: 2.5rem;
}

.event-calendar-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 1.25rem;
}

.event-calendar-nav h3 {
    font-family: 'Poppins', sans-serif;
    min-width: 200px;
    text-align: center;
}

.event-calendar-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-bg);
    color: var(--color-heading);
    text-decoration: none;
    font-weight: 700;
}

.event-calendar-arrow:hover {
    background: var(--color-primary);
    color: #fff;
}

.event-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}

.event-calendar-headcell {
    text-align: center;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text-muted);
    padding-bottom: 0.4rem;
}

.event-calendar-cell {
    min-height: 92px;
    min-width: 0;
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    padding: 0.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    overflow: hidden;
}

.event-calendar-cell.is-outside {
    opacity: 0.4;
}

.event-calendar-cell.is-today {
    box-shadow: inset 0 0 0 2px var(--color-primary);
}

.event-calendar-cell.has-events {
    background: var(--color-primary-light);
}

.event-calendar-daynum {
    font-size: 0.82rem;
    font-weight: 600;
}

.event-calendar-dots {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.event-calendar-chip {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    background: var(--color-primary);
    color: #fff;
    font-size: 0.68rem;
    line-height: 1.2;
    padding: 0.15rem 0.35rem;
    border-radius: 4px;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.event-calendar-chip:hover {
    background: var(--color-accent);
}

.event-calendar-more {
    font-size: 0.65rem;
    color: var(--color-text-muted);
}

.event-feed h3 {
    font-family: 'Poppins', sans-serif;
    margin-bottom: 1rem;
}

.event-feed-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.25rem;
}

.event-card {
    display: block;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.event-card:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}

.event-card-cover-wrap {
    position: relative;
    width: 100%;
    height: 150px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.event-card-cover-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    background: inherit;
    background-size: cover;
    background-position: center;
    filter: blur(14px) brightness(0.65);
    transform: scale(1.15);
}

.event-card-cover {
    position: relative;
    z-index: 1;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

.event-card-cover-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    background: var(--color-bg);
}

.event-card-body {
    padding: 1rem;
}

.event-card-date {
    font-size: 0.78rem;
    color: var(--color-primary-dark);
    font-weight: 600;
}

.event-card-body h4 {
    margin: 0.35rem 0;
    font-family: 'Poppins', sans-serif;
    font-size: 1.05rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.event-card-category {
    display: inline-block;
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    margin-bottom: 0.4rem;
}

.event-recurring-badge {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text-muted);
    margin-top: 0.2rem;
}

.event-further-occurrences {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.event-further-occurrences li a {
    display: inline-block;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0.4rem 0.8rem;
    font-size: 0.88rem;
    color: var(--color-text);
    text-decoration: none;
}

.event-further-occurrences li a:hover {
    border-color: var(--color-primary);
}

.event-card-organizer {
    font-size: 0.82rem;
    color: var(--color-text-muted);
    margin: 0.3rem 0 0;
}

.pagination {
    display: flex;
    gap: 0.4rem;
    margin-top: 1.5rem;
}

.pagination a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--color-bg);
    text-decoration: none;
    color: var(--color-heading);
    font-weight: 600;
}

.pagination a.active {
    background: var(--color-primary);
    color: #fff;
}

.event-detail,
.detail-page {
    max-width: 760px;
    margin: 0 auto;
    padding: 1.5rem 1rem 4rem;
}

.detail-page-back {
    margin: 0 0 1rem;
}

.detail-page-back a {
    color: var(--color-text-muted);
    font-weight: 600;
    text-decoration: none;
}

.detail-page-back a:hover {
    color: var(--color-primary-dark);
}

.detail-cover-wrap {
    position: relative;
    width: 100%;
    height: 420px;
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 1.25rem;
    box-shadow: var(--shadow);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.detail-cover-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    background: inherit;
    background-size: cover;
    background-position: center;
    filter: blur(24px) brightness(0.65);
    transform: scale(1.15);
}

.detail-cover {
    position: relative;
    z-index: 1;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

@media (max-width: 640px) {
    .detail-cover-wrap {
        height: 280px;
    }
}

.detail-page-header {
    margin-bottom: 1.25rem;
}

.detail-page-header h1,
.detail-page-header h2 {
    font-family: var(--font-heading);
    font-size: 1.9rem;
    line-height: 1.2;
    margin: 0 0 0.6rem;
}

.detail-category {
    display: inline-block;
    background: var(--color-accent);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 0.28rem 0.85rem;
    border-radius: 999px;
}

.detail-info-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.4rem 1.6rem;
    margin-bottom: 1.5rem;
}

.detail-info-card h3 {
    margin: 0 0 1rem;
    font-family: var(--font-heading);
    font-size: 1.05rem;
}

.detail-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.1rem 1.5rem;
}

.detail-info-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.detail-info-icon {
    font-size: 1.35rem;
    line-height: 1.3;
    flex-shrink: 0;
}

.detail-info-label {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    font-weight: 700;
    margin-bottom: 0.2rem;
}

.detail-info-value {
    display: block;
    font-size: 0.98rem;
    color: var(--color-text);
    font-weight: 600;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.detail-info-value a {
    color: var(--color-primary-dark);
}

.detail-map-card {
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    margin-bottom: 1.5rem;
    border: 1px solid var(--color-border);
}

.detail-map-card .map-view {
    height: 280px;
}

.detail-description-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.6rem 1.8rem;
    margin-bottom: 1.5rem;
}

.detail-description-card h3 {
    margin: 0 0 1rem;
    font-family: var(--font-heading);
    font-size: 1.05rem;
}

.civic-info-freetext {
    white-space: pre-line;
    margin: 0;
    line-height: 1.7;
}

.weather-forecast-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 1rem;
}

.weather-forecast-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.3rem;
    background: var(--color-surface-alt);
    border-radius: var(--radius-sm);
    padding: 0.9rem 0.6rem;
}

.weather-forecast-date {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.weather-forecast-icon {
    font-size: 1.8rem;
}

.weather-forecast-label {
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

.weather-forecast-temps {
    font-weight: 600;
}

.event-detail-description,
.detail-description {
    line-height: 1.75;
    color: var(--color-text);
    max-width: 68ch;
    overflow-wrap: break-word;
}

.event-detail-description p,
.detail-description p {
    margin: 0 0 1rem;
}

.event-detail-description p:last-child,
.detail-description p:last-child {
    margin-bottom: 0;
}

.event-detail-description table,
.detail-description table {
    border-collapse: collapse;
    margin: 1rem 0;
    max-width: 100%;
}

.event-detail-description table td,
.event-detail-description table th,
.detail-description table td,
.detail-description table th {
    border: 1px solid var(--color-border);
    padding: 0.5rem 0.75rem;
}

/* Hir-cikk szovegebe illesztett kepek/abrak (csak sajat domainrol, lasd
   HtmlSanitizer::clean(..., true)) - mindig a hasab szelessegere igazodnak.
   Sotet modban is feher hatteru abrak, ezert keret es kis lekerekites. */
.detail-description img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1.2rem auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

/* Beagyazott sajat interaktiv elem (pl. kalkulator) - a magassagot a
   news/show.twig allitja a beagyazott oldal postMessage-uzenetebol. */
.detail-description iframe {
    display: block;
    width: 100%;
    border: 0;
    margin: 1.5rem 0;
    background: transparent;
}

@media (max-width: 640px) {
    .event-detail,
    .detail-page {
        padding: 1rem 0.7rem 3rem;
    }

    .detail-page-header h1,
    .detail-page-header h2 {
        font-size: 1.5rem;
    }

    .detail-info-card,
    .detail-description-card {
        padding: 1.1rem 1.25rem;
    }
}

.filter-tabs {
    display: flex;
    gap: 0.5rem;
    margin: 1rem 0 1.5rem;
    flex-wrap: wrap;
}

.filter-tabs a {
    padding: 0.4rem 1rem;
    border-radius: 999px;
    background: var(--color-bg);
    color: var(--color-heading);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
}

.filter-tabs a.active {
    background: var(--color-primary);
    color: #fff;
}

@media (max-width: 640px) {
    .event-calendar-cell {
        min-height: 60px;
    }

    .event-calendar-chip {
        font-size: 0;
        height: 6px;
        padding: 0;
        border-radius: 50%;
        width: 6px;
    }

    .event-calendar-more {
        display: none;
    }
}

.maintenance-admin-card.is-on {
    border-top-color: var(--color-dark);
    background: #FFF7F0;
}

/* --- Karbantartasi ("work in progress") oldal --- */

.maintenance-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
    background-size: 200% 200%;
    animation: maintenance-gradient-shift 12s ease infinite;
}

@keyframes maintenance-gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.maintenance-card {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
    padding: 3.5rem 3rem;
    max-width: 560px;
    width: 100%;
    text-align: center;
}

.maintenance-icon {
    font-size: 4.5rem;
    line-height: 1;
    margin-bottom: 1rem;
    display: inline-block;
    animation: maintenance-bounce 2.2s ease-in-out infinite;
}

@keyframes maintenance-bounce {
    0%, 100% { transform: translateY(0) rotate(-4deg); }
    50% { transform: translateY(-14px) rotate(4deg); }
}

.maintenance-card h1 {
    font-family: 'Poppins', sans-serif;
    font-size: 2rem;
    color: var(--color-dark);
    margin-bottom: 0.75rem;
}

.maintenance-sub {
    color: var(--color-text-muted);
    line-height: 1.6;
    max-width: 440px;
    margin: 0 auto 1.5rem;
}

.maintenance-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.maintenance-dots span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--color-primary);
    animation: maintenance-pulse 1.4s ease-in-out infinite;
}

.maintenance-dots span:nth-child(2) { background: var(--color-accent); animation-delay: 0.2s; }
.maintenance-dots span:nth-child(3) { background: var(--color-dark); animation-delay: 0.4s; }

@keyframes maintenance-pulse {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
    40% { transform: scale(1); opacity: 1; }
}

.maintenance-team-toggle {
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: 0.82rem;
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
}

.maintenance-login-form {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    justify-content: center;
}

.maintenance-login-form input[type="password"] {
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
}

@media (max-width: 480px) {
    .maintenance-card {
        padding: 2.5rem 1.5rem;
    }

    .maintenance-login-form {
        flex-direction: column;
    }
}

/* --- Jogi oldalak (ASZF, Adatvedelem) --- */

.legal-page {
    max-width: 820px;
    margin: 0 auto;
    padding: 1.5rem 1rem 4rem;
    line-height: 1.7;
}

.legal-page h3 {
    margin-top: 2.2rem;
    font-family: 'Poppins', sans-serif;
}

.legal-page h4 {
    margin-top: 1.5rem;
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
}

.legal-updated {
    color: var(--color-text-muted);
    font-size: 0.85rem;
    margin-top: -0.5rem;
}

.legal-disclaimer {
    background: #FFF7F0;
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius-sm);
    padding: 1rem 1.2rem;
    font-size: 0.92rem;
}

.legal-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
}

.legal-table td {
    border: 1px solid var(--color-border);
    padding: 0.6rem 0.9rem;
    vertical-align: top;
}

.legal-table td:first-child {
    font-weight: 600;
    width: 240px;
    background: var(--color-bg);
}

/* --- WYSIWYG (Quill) leiras-szerkeszto --- */

#description-editor .ql-editor {
    min-height: 240px;
    resize: vertical;
    overflow-y: auto;
}

/* --- SEO mezok (meta cim/leiras karakterszamlaloval) --- */

.seo-fields-hint {
    color: var(--color-text-muted);
    font-size: 0.88rem;
    margin-bottom: 1rem;
}

.seo-field-row {
    margin-bottom: 1rem;
}

.seo-field-row label {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.9rem;
    color: var(--color-text-muted);
    font-weight: 500;
}

.seo-field-row input,
.seo-field-row textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0.6rem 0.8rem;
    font-size: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
}

.seo-field-row textarea {
    resize: vertical;
    min-height: 4.5rem;
}

.seo-counter {
    display: inline-block;
    margin-top: 0.3rem;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
}

.seo-counter-low {
    background: #FFF3CD;
    color: #856404;
}

.seo-counter-ok {
    background: var(--color-success-bg);
    color: var(--color-success-text);
}

.seo-counter-over {
    background: var(--color-error-bg);
    color: var(--color-error-text);
}

.seo-generate-btn {
    margin-bottom: 1rem;
}

/* --- Kep alt-szoveg mezo (AI-generalassal) --- */

.alt-text-field {
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-width: 320px;
}

.alt-text-label {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.82rem;
    color: var(--color-text-muted);
    font-weight: 500;
}

.alt-text-label input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.45rem 0.6rem;
    font-size: 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
}

.alt-generate-btn {
    align-self: flex-start;
    background: none;
    border: none;
    color: var(--color-accent-dark);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.2rem 0;
}

.alt-generate-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

/* --- "Miert regisztraljak?" marketing oldal --- */

.why-page {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 1rem 3rem;
}

.why-hero {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
    border-radius: var(--radius);
    padding: 3rem 2rem;
    color: #fff;
    margin-bottom: 2.5rem;
    text-align: center;
}

.why-hero h1 {
    font-family: var(--font-heading);
    font-size: 2.1rem;
    margin: 0 0 0.8rem;
}

.why-hero p {
    font-size: 1.1rem;
    max-width: 620px;
    margin: 0 auto 1.6rem;
    opacity: 0.95;
}

.why-hero .btn {
    background: #fff;
    color: var(--color-primary-dark);
    font-weight: 700;
}

.why-hero .btn:hover {
    background: #f4f4f4;
}

.why-section {
    margin-bottom: 3rem;
}

.why-section h2 {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    text-align: center;
    margin-bottom: 0.5rem;
}

.why-section-sub {
    text-align: center;
    color: var(--color-text-muted);
    max-width: 560px;
    margin: 0 auto 2rem;
}

.benefit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.2rem;
}

.benefit-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow);
}

.benefit-card .benefit-icon {
    font-size: 2rem;
    margin-bottom: 0.6rem;
    display: block;
}

.benefit-card h3 {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
}

.benefit-card p {
    color: var(--color-text-muted);
    font-size: 0.94rem;
    margin: 0;
}

.compare-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

@media (max-width: 640px) {
    .compare-grid {
        grid-template-columns: 1fr;
    }
}

.compare-col {
    border-radius: var(--radius);
    padding: 1.5rem;
}

.compare-col.without {
    background: #FBF3F1;
    border: 1px solid var(--color-error-bg);
}

.compare-col.with {
    background: var(--color-success-bg);
    border: 1px solid #B7DEC2;
}

.compare-col h3 {
    margin-top: 0;
    font-size: 1.05rem;
}

.compare-col ul {
    margin: 0;
    padding-left: 1.2rem;
}

.compare-col li {
    margin-bottom: 0.5rem;
    font-size: 0.94rem;
}

.why-faq {
    max-width: 720px;
    margin: 0 auto;
}

.why-faq details {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 1rem 1.2rem;
    margin-bottom: 0.8rem;
}

.why-faq summary {
    font-weight: 600;
    cursor: pointer;
}

.why-faq p {
    color: var(--color-text-muted);
    margin: 0.6rem 0 0;
    font-size: 0.94rem;
}

.why-cta {
    text-align: center;
    padding: 2.5rem 1rem;
    background: var(--color-bg);
    border-radius: var(--radius);
}

.why-cta h2 {
    margin-top: 0;
}

.coupon-banner {
    display: flex;
    gap: 0.8rem;
    align-items: flex-start;
    background: #fff59d;
    border: 1px solid #e6d24a;
    border-radius: var(--radius-sm);
    padding: 0.9rem 1.1rem;
    margin: 0.8rem 0;
    color: #3a3200;
}

.coupon-banner-icon {
    font-size: 1.4rem;
}

.coupon-banner p {
    margin: 0.3rem 0 0;
    font-size: 0.92rem;
}

/* --- Kupon arazasi kartyak --- */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    align-items: stretch;
}

@media (max-width: 720px) {
    .pricing-grid {
        grid-template-columns: 1fr;
    }
}

.pricing-tile {
    position: relative;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.8rem 1.5rem;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow);
}

.pricing-tile-highlight {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-hover);
}

.pricing-tile-badge {
    position: absolute;
    top: -0.7rem;
    left: 1.5rem;
    background: var(--color-primary);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
}

.pricing-tile h3 {
    margin: 0.3rem 0 0.2rem;
}

.pricing-tile-sub {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    margin: 0 0 1rem;
}

.pricing-tile-price {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 1rem;
}

.pricing-tile-price span {
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-text-muted);
}

.pricing-tile-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    flex: 1;
}

.pricing-tile-features li {
    padding: 0.35rem 0;
    font-size: 0.95rem;
}

/* --- Velemenyek --- */

.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.btn-sm {
    padding: 0.45rem 1rem;
    font-size: 0.88rem;
}

.review-card-section {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.8rem;
    margin: 2.5rem 0;
}

.review-card-section h3 {
    margin-top: 0;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.review-count-badge {
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.15rem 0.65rem;
    border-radius: 999px;
}

.review-empty {
    color: var(--color-text-muted);
}

.review-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.review {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.1rem 1.3rem;
}

.review-head {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 0.6rem;
}

.review-avatar {
    flex-shrink: 0;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
    color: #fff;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
}

.review-stars {
    font-size: 0.95rem;
    letter-spacing: 0.05em;
}

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

.star-empty {
    color: var(--color-border);
}

.review-comment {
    margin: 0;
    color: var(--color-text);
}

.review .owner-reply {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0.6rem 0.8rem;
    margin-top: 0.8rem;
    font-size: 0.92rem;
}

.review-reply-form {
    margin-top: 0.8rem;
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
}

.review-reply-form textarea {
    flex: 1;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    resize: vertical;
}

.review-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--color-border);
}

.review-form label {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.9rem;
    color: var(--color-text-muted);
    font-weight: 500;
}

.review-form select {
    max-width: 220px;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
}

.review-form textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 8rem;
    padding: 0.8rem 1rem;
    font-size: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    resize: vertical;
}

.review-submit-btn {
    align-self: flex-start;
}

/* --- Kedvencek --- */

.detail-heading-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.detail-heading-row h1,
.detail-heading-row h2 {
    margin: 0;
}

.favorite-form {
    display: inline-block;
}

.favorite-btn {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 0.5rem 1.1rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
    white-space: nowrap;
}

.favorite-btn:hover {
    border-color: var(--color-primary);
}

.favorite-btn.is-favorited {
    background: var(--color-primary-light);
    border-color: var(--color-primary);
    color: var(--color-primary-dark);
}

/* ===== Popup banner ===== */
.popup-banner-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.popup-banner-box {
    position: relative;
    background: var(--color-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-hover);
    max-width: 480px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
}

.popup-banner-close {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.popup-banner-close:hover {
    background: rgba(0, 0, 0, 0.7);
}

.popup-banner-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.popup-banner-image {
    width: 100%;
    display: block;
    border-radius: var(--radius) var(--radius) 0 0;
}

.popup-banner-content {
    padding: 1.2rem 1.4rem;
}

.popup-banner-content h3 {
    margin: 0 0 0.5rem;
    color: var(--color-text);
}

.popup-banner-content p {
    margin: 0;
    color: var(--color-text-muted);
    white-space: pre-line;
}

.popup-banner-cta-wrap {
    padding: 0 1.4rem 1.4rem;
}

.popup-banner-cta {
    display: inline-block;
    width: 100%;
    text-align: center;
}

@media (max-width: 560px) {
    .popup-banner-box {
        max-width: calc(100% - 1.5rem);
        max-height: 85vh;
    }
}

/* ===== Cookie consent banner ===== */
.cookie-consent {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
    padding: 1rem 1.2rem;
}

.cookie-consent-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.cookie-consent-text {
    flex: 1;
    min-width: 240px;
}

.cookie-consent-text strong {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--color-text);
}

.cookie-consent-text p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

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

.cookie-consent-actions {
    display: flex;
    gap: 0.6rem;
    flex-shrink: 0;
}

@media (max-width: 560px) {
    .cookie-consent-inner {
        flex-direction: column;
        align-items: stretch;
    }

    .cookie-consent-actions {
        flex-direction: column;
    }

    .cookie-consent-actions .btn {
        width: 100%;
    }
}

/* ===== Kapcsolat oldal ===== */
.contact-page {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 1rem 3rem;
}

.contact-hero {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
    border-radius: var(--radius);
    padding: 2.6rem 2rem;
    color: #fff;
    margin-bottom: 2.2rem;
    text-align: center;
}

.contact-hero h1 {
    font-family: var(--font-heading);
    font-size: 2rem;
    margin: 0 0 0.6rem;
}

.contact-hero p {
    font-size: 1.05rem;
    max-width: 600px;
    margin: 0 auto;
    opacity: 0.95;
}

.contact-layout {
    display: grid;
    grid-template-columns: minmax(260px, 0.85fr) minmax(340px, 1.4fr);
    gap: 1.8rem;
    align-items: start;
}

.contact-info h2 {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    margin: 0 0 1.1rem;
}

.contact-reason-list {
    list-style: none;
    margin: 0 0 1.8rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.contact-reason-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0.9rem 1rem;
    box-shadow: 0 1px 2px rgba(45, 49, 66, 0.04);
}

.contact-reason-icon {
    flex-shrink: 0;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: var(--color-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}

.contact-reason-list strong {
    display: block;
    font-size: 0.95rem;
    margin-bottom: 0.2rem;
}

.contact-reason-list p {
    margin: 0;
    font-size: 0.86rem;
    color: var(--color-text-muted);
    line-height: 1.4;
}

.contact-direct {
    background: var(--color-bg);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-sm);
    padding: 1rem 1.1rem;
    text-align: center;
}

.contact-direct p {
    margin: 0 0 0.4rem;
    font-size: 0.86rem;
    color: var(--color-text-muted);
}

.contact-direct-email {
    font-weight: 700;
    font-size: 1.02rem;
    color: var(--color-primary-dark);
    text-decoration: none;
}

.contact-direct-email:hover {
    text-decoration: underline;
}

.contact-form-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.8rem 2rem;
}

.contact-form-card form {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.contact-form-card label {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

.contact-form-card input,
.contact-form-card select,
.contact-form-card textarea {
    padding: 0.7rem 0.9rem;
    font-size: 1rem;
    font-family: var(--font-body);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
}

.contact-form-card textarea {
    resize: vertical;
    min-height: 9rem;
}

.contact-form-card .biz-field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.contact-form-card button[type="submit"] {
    align-self: flex-start;
}

@media (max-width: 800px) {
    .contact-layout {
        grid-template-columns: 1fr;
    }
}

/* ===== Heti menu (etterem heti ebedmenu) ===== */
.week-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 1.2rem 0;
    padding: 0.9rem 1.1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.week-nav-label {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 700;
    font-family: var(--font-heading);
}

.weekly-menu-day {
    margin-top: 1rem;
}

.weekly-menu-day .biz-card-title small {
    font-weight: 400;
    color: var(--color-text-muted);
    margin-left: 0.4rem;
}

.weekly-menu-entry {
    border-top: 1px solid var(--color-border);
    padding: 0.8rem 0;
}

.weekly-menu-entry:first-of-type {
    border-top: none;
    padding-top: 0.4rem;
}

.weekly-menu-entry-view {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
}

.weekly-menu-entry-text {
    flex: 1;
    min-width: 200px;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.6rem;
    align-items: baseline;
}

.weekly-menu-entry-text strong {
    color: var(--color-primary-dark);
}

.weekly-menu-entry-text span {
    color: var(--color-text-muted);
}

.weekly-menu-entry-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.1rem;
    flex-shrink: 0;
}

.weekly-menu-price {
    font-weight: 700;
}

.weekly-menu-price-alt {
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

.weekly-menu-entry-actions {
    flex-shrink: 0;
    display: flex;
    gap: 0.6rem;
}

.weekly-menu-add {
    margin-top: 0.6rem;
}

/* ============================================================
   "menu-option" - kozos, ujrafelhasznalhato kartya-komponens egy-egy
   napi menu-ajanlathoz (leves + fofogas + ar), amit KET helyen
   hasznalunk: a vallalkozas-adatlap heti menu blokkjaban es a
   fooldal "Ma ajanljuk" szekciojaban. Minden opcio sajat szinjelzo
   savot kap (--opt-accent, korbejarva 4 szinen), hogy tobb menu
   egyszerre (pl. "A/B/C menu") azonnal megkulonboztetheto legyen.
   ============================================================ */
.menu-option {
    --opt-accent: var(--color-primary);
    background: var(--color-bg);
    border-left: 3px solid var(--opt-accent);
    border-radius: 6px;
    padding: 0.6rem 0.8rem;
    margin-bottom: 0.6rem;
}

.menu-option:last-child {
    margin-bottom: 0;
}

.menu-option-label {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--opt-accent);
    background: color-mix(in srgb, var(--opt-accent) 14%, var(--color-surface));
    border-radius: 999px;
    padding: 0.15rem 0.55rem;
    margin-bottom: 0.35rem;
}

.menu-option-soup {
    margin: 0 0 0.15rem;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.menu-option-soup::before {
    content: "🥣 ";
}

.menu-option-main {
    margin: 0;
    font-weight: 600;
    font-size: 0.95rem;
}

.menu-option-price {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-top: 0.35rem;
    font-weight: 700;
    color: var(--color-primary-dark);
}

.menu-option-price small {
    font-weight: 400;
    color: var(--color-text-muted);
    font-size: 0.76rem;
}

/* Vallalkozas-adatlap: heti menu nap-kartyak */
.weekly-menu-section {
    margin: 1.4rem 0;
}

.weekly-menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1rem;
    margin-top: 0.9rem;
}

.weekly-menu-daycard {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.weekly-menu-daycard-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.7rem 0.9rem;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
    color: #fff;
}

.weekly-menu-daycard-day {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1rem;
}

.weekly-menu-daycard-date {
    font-size: 0.8rem;
    opacity: 0.9;
}

.weekly-menu-daycard-body {
    padding: 0.9rem;
}

/* Fooldal: "Ma ajanljuk" szekcio */
.todays-menu-section .home-section-header h2 {
    margin-bottom: 0.2rem;
}

.todays-menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.2rem;
}

.todays-menu-card,
.todays-menu-spotlight {
    display: block;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    text-decoration: none;
    color: var(--color-text);
    overflow: hidden;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.todays-menu-card:hover,
.todays-menu-spotlight:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}

.todays-menu-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.9rem 1.1rem;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
    color: #fff;
}

.todays-menu-card-name {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.05rem;
}

.todays-menu-card-arrow {
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0.95;
}

.todays-menu-options {
    padding: 1rem 1.1rem;
}

/* Egyetlen etterem eseten szeles, kiemelt "spotlight" kartya, ket
   oszlopos elrendezessel nagyobb kepernyon - igy egy resztvevovel is
   teljes ertekunek, nem "uresen kongonak" hat a szekcio. */
.todays-menu-spotlight {
    display: grid;
    grid-template-columns: 1fr;
}

.todays-menu-spotlight .todays-menu-card-head {
    padding: 1.2rem 1.4rem;
}

.todays-menu-spotlight .todays-menu-card-name {
    font-size: 1.3rem;
}

.todays-menu-spotlight .todays-menu-options {
    padding: 1.2rem 1.4rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.8rem;
}

.todays-menu-spotlight .menu-option {
    margin-bottom: 0;
}

/* ===== Mentes-visszaigazolo popup (pl. hirdetes feladasa/mentese utan) ===== */
.save-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(20, 21, 31, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
    padding: 1rem;
}

.save-modal {
    background: var(--color-surface);
    border-radius: var(--radius);
    box-shadow: 0 20px 50px rgba(45, 49, 66, 0.3);
    padding: 2rem 2.2rem;
    max-width: 420px;
    width: 100%;
    text-align: center;
}

.save-modal-icon {
    font-size: 2.6rem;
    line-height: 1;
    margin-bottom: 0.6rem;
}

.save-modal h3 {
    font-family: var(--font-heading);
    margin: 0 0 0.5rem;
    font-size: 1.3rem;
}

.save-modal p {
    color: var(--color-text-muted);
    margin: 0 0 0.8rem;
}

.save-modal-view-link a {
    display: inline-block;
    font-weight: 600;
    color: var(--color-primary-dark);
    text-decoration: none;
    padding: 0.5rem 0.9rem;
    background: var(--color-primary-light);
    border-radius: var(--radius-sm);
}

.save-modal-view-link a:hover {
    text-decoration: underline;
}

.save-modal-actions {
    display: flex;
    gap: 0.7rem;
    justify-content: center;
    margin-top: 1.2rem;
    flex-wrap: wrap;
}

/* ==== Hir-cikk galeria + lightbox (news-photo-lightbox.js) ==== */

.news-gallery {
    margin-top: 2.2rem;
    padding-top: 1.6rem;
    border-top: 1px solid var(--color-border);
}

.news-gallery-title {
    margin: 0 0 1rem;
    font-size: 1.2rem;
}

/* Alto es fekvo kepek is vegyesen elofordulhatnak - a vallalkozas-slider
   16:9-es "cover" vagasa itt levagna az allo kepek nagy reszet, ezert a
   hir-galeriaban fix magassagu, sotet "letterbox" hatteru "contain"
   megjelenitest hasznalunk, ami a teljes kepet mutatja, formatumtol fuggetlenul. */
.news-gallery-slider {
    aspect-ratio: unset;
    height: min(60vh, 520px);
    background: #111;
}

.news-gallery-slider .slider-slide {
    object-fit: contain;
    cursor: zoom-in;
    background: #111;
}

.news-gallery .hero-single-photo {
    cursor: zoom-in;
    margin-bottom: 0;
    aspect-ratio: unset;
    height: min(60vh, 520px);
    width: 100%;
    object-fit: contain;
    background: #111;
}

@media (max-width: 640px) {
    .news-gallery-slider,
    .news-gallery .hero-single-photo {
        height: min(50vh, 380px);
    }
}

.photo-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    background: rgba(10, 10, 12, 0.94);
}

.photo-lightbox[hidden] {
    display: none !important;
}

.photo-lightbox-stage {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    touch-action: none;
    position: relative;
}

.photo-lightbox-img {
    max-width: 92vw;
    max-height: 78vh;
    object-fit: contain;
    cursor: zoom-in;
    transition: transform 0.25s ease;
    user-select: none;
    -webkit-user-drag: none;
}

.photo-lightbox-img.is-zoomed {
    cursor: grab;
    max-width: none;
    max-height: none;
}

.photo-lightbox-img.is-zoomed.is-panning {
    cursor: grabbing;
    transition: none;
}

.photo-lightbox-close,
.photo-lightbox-prev,
.photo-lightbox-next {
    position: absolute;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 2.8rem;
    height: 2.8rem;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}

.photo-lightbox-close:hover,
.photo-lightbox-prev:hover,
.photo-lightbox-next:hover {
    background: rgba(255, 255, 255, 0.28);
}

.photo-lightbox-close {
    top: 1rem;
    right: 1rem;
    z-index: 2;
}

.photo-lightbox-prev {
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
}

.photo-lightbox-next {
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
}

.photo-lightbox-footer {
    padding: 0.8rem 1rem 1.2rem;
    text-align: center;
    color: #f0f0f0;
}

.photo-lightbox-caption {
    margin: 0 0 0.25rem;
    font-size: 0.95rem;
    opacity: 0.9;
}

.photo-lightbox-counter {
    margin: 0;
    font-size: 0.8rem;
    opacity: 0.65;
}

@media (max-width: 640px) {
    .photo-lightbox-img {
        max-width: 96vw;
        max-height: 70vh;
    }

    .photo-lightbox-prev,
    .photo-lightbox-next {
        width: 2.3rem;
        height: 2.3rem;
        font-size: 1.2rem;
    }

    .photo-lightbox-close {
        width: 2.3rem;
        height: 2.3rem;
        font-size: 1.1rem;
    }

    .photo-lightbox-footer {
        padding: 0.6rem 0.8rem 1rem;
    }
}

.save-modal-actions small {
    opacity: 0.8;
    margin-left: 0.2rem;
}