/* =============================================================================
 * portal-public.css — A NYILVÁNOS oldalak (Market, Szakemberek) közös sötét-üveg burka.
 * Felső menü + kétnyelvű tesztüzem-sáv + footer + szakember-kártyák. A tokeneket a portal-theme.css adja.
 * (A Market szolgáltatás-rácsához a portal-market.css társul.)
 * ============================================================================= */

.wrap { max-width: 1000px; margin: 0 auto; padding: 0 20px; }
.pub a { text-decoration: none; }

/* ── TESZTÜZEM SÁV (kétnyelvű, pulzáló) ── */
.warnbar {
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px;
    padding: calc(8px + env(safe-area-inset-top, 0px)) 16px 8px; font-size: .8rem; line-height: 1.4;
    text-align: center; color: var(--glass-on);
    background: rgba(255, 160, 0, .12); border-bottom: 1px solid rgba(255, 160, 0, .35);
    animation: warnpulse 2.2s ease-in-out infinite;
}
@keyframes warnpulse {
    0%, 100% { background: rgba(255, 160, 0, .10); box-shadow: inset 0 0 0 rgba(255, 160, 0, 0); }
    50%      { background: rgba(255, 160, 0, .22); box-shadow: inset 0 0 46px rgba(255, 160, 0, .16); }
}
@media (prefers-reduced-motion: reduce) { .warnbar { animation: none; } }
.warnbar .wb-badge { background: var(--warning); color: #3a2600; font-weight: 800; font-size: .7rem;
    padding: 2px 9px; border-radius: var(--r-pill); white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
.warnbar .hu { color: var(--glass-on); }
.warnbar .en { color: var(--glass-on-muted); font-style: italic; }
.warnbar .sep { opacity: .4; }

/* ── FELSŐ MENÜ (egységes, gomb-jellegű pill-ek) ── */
.nav { position: sticky; top: 0; z-index: 20; background: rgba(7, 12, 27, .85);
    border-bottom: 1px solid var(--glass-border); box-shadow: inset 0 1px 0 var(--glass-highlight), 0 6px 24px rgba(0, 0, 0, .28);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.nav .navrow { display: flex; align-items: center; justify-content: space-between; padding: 11px 0; gap: 12px; }
.brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; font-size: 1.3rem; color: var(--glass-on); letter-spacing: -.01em; }
.brand i { color: var(--action); font-size: 1.4rem; }

.links { display: flex; align-items: center; gap: 8px; }
/* Minden menüpont EGYSÉGES pill-gomb — látszik, hogy kattintható */
.links a {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 15px; min-height: 40px; border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .05); border: 1px solid var(--glass-border);
    color: var(--glass-on); font-weight: 600; font-size: .88rem; line-height: 1; white-space: nowrap;
    transition: background .15s ease, border-color .15s ease, color .15s ease, transform .12s ease;
}
.links a:hover { background: rgba(255, 255, 255, .12); border-color: var(--glass-highlight); transform: translateY(-1px); }
.links a:active { transform: translateY(0); }
.links a.android, .links a.android i { color: #8CE0A8; }
/* Aktív menüpont — halvány márka-kitöltés */
.links a.cur { background: rgba(11, 95, 255, .24); border-color: rgba(157, 187, 255, .55); color: #fff; }
/* Belépés — elsődleges márka-CTA (a narancs filled CTA a rendelés-gomb marad, SZ2) */
.btn-login-top { background: var(--brand) !important; border-color: var(--brand) !important; color: #fff !important;
    box-shadow: 0 6px 18px rgba(11, 95, 255, .35); }
.btn-login-top:hover { background: #0A52DB !important; border-color: #0A52DB !important; }
.hamb { display: none; align-items: center; justify-content: center; width: 44px; height: 44px;
    background: rgba(255, 255, 255, .06); border: 1px solid var(--glass-border); border-radius: var(--r-md);
    color: var(--glass-on); cursor: pointer; font-size: 1.4rem; }
.hamb:hover { background: rgba(255, 255, 255, .12); }

/* ── OLDAL-FEJLÉC ── */
.pagehead { padding: 40px 0 8px; }
.pagehead h1 { font-size: clamp(1.6rem, 4.4vw, 2.3rem); font-weight: 800; letter-spacing: -.02em; margin: 0 0 8px; color: var(--glass-on); }
.pagehead p { color: var(--glass-on-muted); font-size: 1rem; margin: 0; max-width: 640px; }
.solo-note { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; font-size: .82rem;
    color: var(--brand-light); background: rgba(11, 95, 255, .12); border: 1px solid rgba(157, 187, 255, .3);
    padding: 6px 12px; border-radius: var(--r-pill); }

/* ── SZAKEMBER-KÁRTYÁK ── */
.pro-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-lg); margin-top: var(--sp-xl); }
.pro-card { background: var(--glass-fill); border: 1px solid var(--glass-border); border-radius: var(--r-xl); padding: 22px;
    box-shadow: inset 0 1px 0 var(--glass-highlight), 0 18px 44px rgba(0, 0, 0, .45);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.pro-top { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.pro-logo { position: relative; width: 60px; height: 60px; border-radius: 16px; flex-shrink: 0;
    background: rgba(11, 95, 255, .16); color: var(--brand-light); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; }
.pro-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.pro-name { font-size: 1.15rem; font-weight: 800; margin: 0; color: var(--glass-on); }
.pro-trade { color: var(--glass-on-muted); font-size: .85rem; }
.pro-tagline { color: var(--glass-on-muted); font-size: .88rem; line-height: 1.5; margin: 0 0 16px; }
.pro-tagline.muted { opacity: .7; font-style: italic; }
.pro-actions { display: flex; gap: 10px; margin-top: 6px; }
.pro-actions .btn { flex: 1; }

/* ── GOMBOK ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--r-md);
    padding: 11px 16px; font-weight: 700; font-size: .9rem; cursor: pointer; border: none; text-decoration: none; }
.btn-action { background: var(--action); color: #fff; box-shadow: 0 6px 18px rgba(232, 89, 12, .3); }
.btn-action:hover { background: var(--action-pressed); color: #fff; }
.btn-outline { background: transparent; color: var(--brand-light); border: 1.5px solid rgba(157, 187, 255, .5); }
.btn-outline:hover { background: rgba(157, 187, 255, .12); color: var(--brand-light); }

/* ── FOOTER ── */
.pub-footer { text-align: center; color: var(--glass-on-muted); padding: 32px 0 44px; margin-top: 40px; border-top: 1px solid var(--glass-border); font-size: .85rem; }
.pub-footer a { color: var(--brand-light); } .pub-footer .sep { margin: 0 6px; opacity: .5; }

/* ── MOBILBARÁT ── */
@media (max-width: 820px) {
    .hamb { display: inline-flex; }
    .nav .navrow { position: relative; padding: 10px 0; }
    .links {
        position: absolute; left: 0; right: 0; top: calc(100% + 8px);
        flex-direction: column; align-items: stretch; gap: 8px;
        background: rgba(9, 14, 30, .98); border: 1px solid var(--glass-border); border-radius: var(--r-lg);
        padding: 10px; box-shadow: 0 22px 54px rgba(0, 0, 0, .55);
        max-height: 0; overflow: hidden; opacity: 0; pointer-events: none;
        transition: max-height .28s ease, opacity .2s ease, padding .28s ease;
    }
    .links.open { max-height: 560px; opacity: 1; pointer-events: auto; }
    /* Mobilon minden pont teljes szélességű, nagy tap-cél (≥48px) */
    .links a { width: 100%; justify-content: flex-start; padding: 14px 16px; min-height: 50px; font-size: 1rem; border-radius: var(--r-md); }
    .btn-login-top { justify-content: center !important; }
}

/* Nagyon keskeny kijelző — a tesztüzem-sáv tömörebb, de kétnyelvű marad */
@media (max-width: 480px) {
    .warnbar { font-size: .72rem; gap: 4px; padding: calc(7px + env(safe-area-inset-top, 0px)) 12px 7px; }
    .warnbar .sep { display: none; }
    .brand { font-size: 1.15rem; }
}