/* ============================================================
   EREDETI (2026-10-04 reggeli, színváltás előtti) állapot – CSAK az
   ingatlan.html és ingatlanok.html használja, a user kérésére.
   Forrás: zsebinfo-MENTES-2026-10-04-szinek-elott.zip
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;0,900;1,400&family=Sora:wght@600;700;800&display=swap');
/* ============================================================
   Zsebinfo – Főoldal CSS  (v7 – mockup 2026-06-11)
   Vizuális irány:
     mély navy fejléc (kereső + település-választó a fejlécben)
     ikonos menüsor · krém háttér · narancs CTA · teal akcentus
     sötét "Kiemelt szolgáltatók" sáv · zöld hírlevél sáv
   Betű: Inter
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400&display=swap');

:root {
  /* ════════════════════════════════════════════════════════════
     ZSEBINFO PALETTA – Zöld téma (v12–v20 eredeti erdőzöld)
     A navy- és orange- NEVEK megmaradnak (83+ hivatkozás miatt).
     ════════════════════════════════════════════════════════════ */

  /* — Fő zöld akcent (CollaCafe · Vegital · Metz Judit paletta) — */
  --orange:      #3D7A30;   /* Közepes zöld – logó, gombok, aktív elemek */
  --orange-dark: #2D5E22;   /* Hover – sötétebb */
  --orange-soft: #E0EDD6;   /* Halvány – háttérblokk, ikonháttér */

  /* — Sötét zöld tartomány (footer, sötét szekciók) — */
  --navy-950: #1C4428;   /* Sötét erdőzöld – footer */
  --navy-900: #1B3D26;   /* Erdőzöld – sötét szekciók, hero overlay, shop */
  --navy-850: #1D3F14;   /* Mélyzöld – kontrasztelemek */
  --navy-800: #3D7A4E;   /* Közepes mélyebb panelek */

  /* — Narancs: CTA, kiemelés (Metz Judit Low Impact · CollaCafe akcentus) — */
  --gold:      #E8841A;   /* Narancs CTA – gombok, aktív keret, prémium */
  --gold-dark: #C06010;   /* Sötétebb narancs – hover */
  --gold-soft: #FEE8D0;   /* Halvány narancs – partnerkártya, promó háttér */
  --gold-ink:  #8C4400;   /* Olvasható szöveg narancs alapon */

  /* — Semlegesek — */
  --teal:     #527A38;   /* Levélzöld (Vegital) – másodlagos felületek */
  --teal-dark:#3D6B2C;
  --teal-soft:#E8F0DC;
  --page:     #F2EBD8;   /* Oldalvászon – homokszín/bézs */
  --cream:    #F8F2E8;   /* Meleg törtfehér – topbar, hover */
  --card:     #FFFFFF;   /* Tiszta fehér – kártyák, panelek */
  --line:     #E0D8C8;
  --line-light: #EDE8DC;
  --ink:      #2A2018;   /* Meleg espresso-sötét szöveg */
  --muted:    #7A7060;

  /* — Státusz-badge-ek (nem márkaszínek) — */
  --red:      #e2574c;
  --green:    #4d9e58;
  --blue:     #3b7fc4;

  --shadow:   0 2px 10px rgba(40, 70, 50, .07);
  --shadow-lg:0 10px 26px rgba(40, 70, 50, .13);
  --radius:   6px;

  /* — Kategória-színek — */
  --kultura:  #BF5D46;
  --kultura-soft: #f5e3dc;
  --kultura-dark: #9c4a37;
  --poroskek: #456B84;
}

/* ── Reset / alapok ─────────────────────────────────────── */
html, body { margin: 0; padding: 0; }   /* fehér csík eltüntetése legfelül */
.zs-wrap *,
.zs-wrap *::before,
.zs-wrap *::after { box-sizing: border-box; margin: 0; padding: 0; }

.zs-wrap {
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  /* 2026-08-15: a 4 rétegű mesh gradiens (sage/homok/honey foltok) törölve –
     foltos hatást keltett. Helyette egyenletes, kicsit mélyebb papírvászon:
     a mélységet a világosság-különbség adja, nem gradiens. */
  background: var(--page);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.55;
  /* Elementor full-width breakout */
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  overflow-x: hidden;
}

/* :where → nulla specificitás, hogy az egy-osztályos gombszínek nyerjenek */
:where(.zs-wrap) a { text-decoration: none; color: inherit; }
.zs-wrap img { max-width: 100%; display: block; }
.zs-wrap button { font-family: inherit; cursor: pointer; border: none; }
.zs-wrap ul { list-style: none; }

.zs-container {
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ============================================================
   1. TOPBAR  (világos krém, zöld szöveg)
   ============================================================ */
.zs-topbar {
  background: var(--cream);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 600;
  /* Vonal törölve: a krém→fehér háttérváltás önmagában elválaszt. */
}

.zs-topbar__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  height: 44px;
}
.zs-topbar__center {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-self: center;
}
.zs-topbar__inner > .zs-topbar__left { justify-self: start; }
.zs-topbar__inner > .zs-topbar__right { justify-self: end; }

.zs-topbar__left {
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.zs-topbar__left i { color: var(--orange); font-size: 12px; }

.zs-topbar__right {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.zs-topbar__item {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.zs-topbar__item i { color: var(--orange); font-size: 12px; }

.zs-topbar__divider {
  width: 1px;
  height: 15px;
  background: #bcc6b0;
}

/* Közösségi ikonok – sima zöld glyph-ek */
.zs-topbar__social {
  display: flex;
  align-items: center;
  gap: 13px;
}
.zs-topbar__soc {
  color: var(--ink);
  font-size: 14px;
  transition: color .15s, transform .15s;
}
.zs-topbar__soc:hover { color: var(--orange); transform: translateY(-1px); }
.zs-topbar__soc[aria-label="Facebook"]:hover { color: #1877F2; }
.zs-topbar__soc[aria-label="Instagram"]:hover {
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.zs-topbar__soc[aria-label="TikTok"]:hover { color: #010101; }
.zs-topbar__soc[aria-label="YouTube"]:hover { color: #FF0000; }

/* Zsebinfo Shop pill – lágy zöld */
.zs-topbar .zs-shop-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--orange-soft);
  border: 1px solid var(--line);
  color: var(--orange-dark);
  font-size: 12px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
  transition: background .15s, border-color .15s;
}
.zs-topbar .zs-shop-pill i { color: var(--orange); font-size: 12px; }
.zs-topbar .zs-shop-pill:hover { background: #dbe8d2; border-color: var(--orange); }

/* ============================================================
   2. FEJLÉC – logó+szlogen · településválasztó · kereső · CTA
   ============================================================ */
.zs-header {
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 0 var(--line);
}

.zs-header__inner {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 88px;
}

/* Logó (régi stílus – visszafelé kompatibilis) */
.zs-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  text-decoration: none;
}
.zs-logo__mark { display: flex; }
.zs-logo__col { display: flex; flex-direction: column; gap: 3px; }
.zs-logo__text {
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--navy-900);
  line-height: 1;
}
.zs-logo__text span { color: var(--orange); }
.zs-logo__tag {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  line-height: 1;
}


/* Település választó – világos pill */
.zs-searchbar {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.zs-locpick {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  height: 50px;
  padding: 0 18px;
  width: 185px;
}
.zs-locpick > i { color: var(--orange); font-size: 13px; flex-shrink: 0; }
.zs-locpick input {
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  outline: none;
  width: 100%;
  min-width: 0;
}
.zs-locpick input::placeholder { color: var(--muted); font-weight: 400; }

/* Fejléc kereső – teljes pill, zöld kör gombbal */
.zs-search {
  flex: 1;
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  height: 50px;
  padding: 0 6px 0 20px;
  min-width: 0;
}
.zs-search input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  height: 100%;
  outline: none;
  min-width: 0;
}
.zs-search input::placeholder { color: var(--muted); }
.zs-search button {
  flex-shrink: 0;
  background: var(--orange);
  color: #fff;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}
.zs-search button:hover { background: var(--orange-dark); }

/* Fő CTA – sötétzöld pill */
.zs-header__cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--orange);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  height: 50px;
  padding: 0 22px;
  border-radius: 7px;
  white-space: nowrap;
  transition: background .15s;
}
.zs-header__cta:hover { background: var(--orange-dark); }
.zs-header__cta-ico {
  font-size: 13px;
  opacity: .8;
  margin-left: 2px;
  padding-left: 10px;
  border-left: 1px solid rgba(255, 255, 255, .3);
}

/* Hamburger */
.zs-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  background: transparent;
}
.zs-hamburger span {
  width: 24px;
  height: 2px;
  background: var(--navy-900);
  border-radius: 2px;
  transition: transform .2s, opacity .2s;
}
.zs-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.zs-hamburger.open span:nth-child(2) { opacity: 0; }
.zs-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   3. MENÜSOR – fehér, ikonos, aktív zöld aláhúzás
   ============================================================ */
.zs-menubar {
  background: #fff;
  /* Vonal törölve: a fejléc és a menüsor is fehér, a térköz elválasztja őket.
     A fejléc alján maradó egyetlen vonal (.zs-header box-shadow) zárja a blokkot. */
}

.zs-menubar__list {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.zs-menubar__list a {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
  padding: 16px 8px;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition: color .15s, border-color .15s;
}
.zs-menubar__list a i { font-size: 13px; color: var(--muted); transition: color .15s; }
.zs-menubar__list a:hover { color: var(--orange); border-bottom-color: var(--orange); }
.zs-menubar__list a:hover i { color: var(--orange); }
.zs-menubar__list a.is-active { color: var(--orange); border-bottom-color: var(--orange); font-weight: 700; }
.zs-menubar__list a.is-active i { color: var(--orange); }

/* Mobil menü */
.zs-mobile-menu {
  display: none;
  flex-direction: column;
  background: #fff;
  padding: 12px 20px 20px;
  border-top: 1px solid var(--line);
}
.zs-mobile-menu.open { display: flex; }
@media (min-width: 951px) {
  .zs-mobile-menu { display: none !important; }
}
.zs-mobile-menu a {
  color: var(--ink);
  font-weight: 600;
  font-size: 15px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--line-light);
}
.zs-mobile-menu a i { width: 22px; color: var(--orange); font-size: 13px; }
.zs-mobile-menu .zs-header__cta { border-bottom: none; justify-content: center; }

/* ============================================================
   Közös szekció elemek
   ============================================================ */
.zs-section { padding: 40px 0 0; }

.zs-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.zs-section__title {
  font-size: 21px;
  font-weight: 800;
  color: #333333;
  letter-spacing: -.01em;
}

.zs-section__more {
  font-size: 13px;
  font-weight: 700;
  color: var(--orange);
  white-space: nowrap;
  transition: color .15s;
}
.zs-section__more:hover { color: var(--orange-dark); }

/* Kategória badge-ek */
.zs-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  padding: 3px 9px;
  border-radius: 5px;
}
.zs-badge--featured { background: var(--orange); }
.zs-badge--teal     { background: var(--teal); }
.zs-badge--red      { background: var(--red); }
.zs-badge--green    { background: var(--green); }
.zs-badge--blue     { background: var(--blue); }
.zs-badge--kultura  { background: var(--kultura); }   /* Kultúra / Programajánló – terrakotta */

/* ============================================================
   4. HERO – kiemelt hír · kis hírek · időjárás
   ============================================================ */
.zs-hero {
  display: grid;
  grid-template-columns: 1.1fr .9fr 300px;
  gap: 20px;
  align-items: stretch;
}

/* Nagy kiemelt hír – overlay */
.zs-feat {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 360px;
  display: flex;
  align-items: flex-end;
  box-shadow: var(--shadow);
  background: var(--navy-800);
}
.zs-feat__img {
  position: absolute;
  inset: 0;
}
.zs-feat__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.zs-feat::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(7, 24, 36, .88) 0%, rgba(7, 24, 36, .35) 48%, rgba(7, 24, 36, .08) 100%);
}
.zs-feat__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
}
.zs-feat__body {
  position: relative;
  z-index: 2;
  padding: 22px;
  color: #fff;
}
.zs-feat__title {
  font-size: 24px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -.01em;
}
.zs-feat__desc {
  font-size: 13.5px;
  color: rgba(255, 255, 255, .82);
  margin-top: 9px;
  max-width: 460px;
}
.zs-feat__meta {
  font-size: 12px;
  color: rgba(255, 255, 255, .65);
  margin-top: 12px;
}

/* Kis hírek oszlop */
.zs-news-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.zs-news-card {
  flex: 1;
  display: flex;
  gap: 14px;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 13px 15px;
  transition: box-shadow .15s, transform .15s;
}
.zs-news-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }

.zs-news-card__thumb {
  flex-shrink: 0;
  width: 86px;
  height: 78px;
  border-radius: 5px;
  background: var(--teal-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  overflow: hidden;
}
.zs-news-card__thumb img { width: 100%; height: 100%; object-fit: cover; }

.zs-news-card__title {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink);
  margin-top: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.zs-news-card__date {
  margin-top: 5px;
  font-size: 11.5px;
  color: var(--muted);
}

/* Jobb hasáb: időjárás + naptár egymás alatt */
.zs-hero-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Időjárás kártya – kompakt */
.zs-weather {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 13px 14px;
  display: flex;
  flex-direction: column;
}

.zs-weather__head {
  font-size: 13px;
  font-weight: 800;
  color: var(--navy-900);
}

/* fő sor: ikon + hőfok + leírás + hi/lo egy sorban */
.zs-weather__main {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 0;
}

.zs-weather__icon { font-size: 32px; line-height: 1; }

.zs-weather__temp {
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  color: var(--navy-900);
}

.zs-weather__desc {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 2px;
}

.zs-weather__hilo {
  display: flex;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  margin-left: auto;
  flex-direction: column;
  gap: 2px;
  text-align: right;
}
.zs-weather__hi { color: var(--orange); }
.zs-weather__lo { color: var(--blue); }

.zs-weather__extra {
  display: flex;
  gap: 12px;
  font-size: 11px;
  color: var(--muted);
  margin-top: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-light);
}

.zs-weather__forecast {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  padding-top: 8px;
}

.zs-weather__day {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 4px 2px;
  border-radius: 5px;
  background: var(--cream);
}

.zs-weather__day-name { font-size: 10px; font-weight: 700; color: var(--muted); }
.zs-weather__day-icon { font-size: 14px; }
.zs-weather__day-hi   { font-size: 11.5px; font-weight: 700; color: var(--ink); }
.zs-weather__day-lo   { font-size: 10px; color: var(--muted); }

.zs-weather__link {
  display: block;
  margin-top: 9px;
  background: var(--teal);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  padding: 8px;
  border-radius: 5px;
  transition: background .15s;
}
.zs-weather__link:hover { background: var(--teal-dark); }

/* Havi naptár – a hasáb alja */
.zs-cal {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 13px 14px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.zs-cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.zs-cal__title { font-size: 13px; font-weight: 800; color: var(--navy-900); }
.zs-cal__title i { color: var(--orange); margin-right: 6px; font-size: 12px; }

.zs-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  text-align: center;
  flex: 1;
  align-content: space-between;
}

.zs-cal__dow {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 2px 0 4px;
}

.zs-cal__day {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink);
  padding: 4px 0;
  border-radius: 5px;
  line-height: 1.4;
}
.zs-cal__day--out   { color: var(--line); font-weight: 500; }
.zs-cal__day--today {
  background: var(--orange);
  color: #fff;
  font-weight: 800;
}
.zs-cal__day--event {
  background: var(--orange-soft);
  color: var(--orange-dark);
  font-weight: 800;
}

/* ============================================================
   5. GYORSNAVIGÁCIÓ – kompakt, 4 oszlop
   ============================================================ */
.zs-quicknav { margin-top: 26px; }

.zs-quicknav__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.zs-quicknav__item {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 18px 20px;
  min-height: 86px;
  transition: background .15s;
}
.zs-quicknav__item:hover { background: var(--cream); }
.zs-quicknav__item + .zs-quicknav__item { border-left: 1px solid var(--line-light); }

.zs-quicknav__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}
.zs-quicknav__icon--teal   { background: var(--teal-soft);  color: var(--teal); }
.zs-quicknav__icon--orange { background: var(--orange-soft); color: var(--orange); }
.zs-quicknav__icon--blue   { background: #e2edf7; color: var(--blue); }
.zs-quicknav__icon--red    { background: #fbe7e5; color: var(--red); }

.zs-quicknav__title { font-size: 14px; font-weight: 800; color: var(--navy-900); }
.zs-quicknav__sub   { font-size: 11.5px; color: var(--muted); margin-top: 2px; }

/* ============================================================
   6/a. KATEGÓRIÁK – pasztell ikoncsempék
   ============================================================ */
.zs-cats-sec { padding-top: 40px; }

/* Uppercase, tracked szekciócím a mockup szerint */
.zs-section__title--upper {
  text-transform: uppercase;
  font-size: 17px;
  letter-spacing: .04em;
}

.zs-cats {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 10px;
}

.zs-cat-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 9px;
}

.zs-cat-tile__icon {
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 88px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  transition: transform .15s;
}
.zs-cat-tile:hover .zs-cat-tile__icon { transform: translateY(-3px); }

.zs-cat-tile__label {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}

.zs-cat-tile__icon--home   { background: #fdeede; color: #e0911a; }
.zs-cat-tile__icon--car    { background: #e6eef9; color: #4a7fc0; }
.zs-cat-tile__icon--build  { background: #e7f3ea; color: #5a9e6a; }
.zs-cat-tile__icon--beauty { background: #fce8ee; color: #d56a92; }
.zs-cat-tile__icon--health { background: #e3f1ee; color: #2e8674; }
.zs-cat-tile__icon--law    { background: #eceaf8; color: #7a6cc4; }
.zs-cat-tile__icon--edu    { background: #fdeede; color: #e0911a; }
.zs-cat-tile__icon--food   { background: #fce6e3; color: #e07a63; }
.zs-cat-tile__icon--event  { background: #e9ebf8; color: #6470c4; }
.zs-cat-tile__icon--civil  { background: #e3f1ea; color: #4d9e6a; }

/* ============================================================
   6/b. KIEMELT SZOLGÁLTATÓK – fotós kártyák
   ============================================================ */
.zs-partners__wrap { position: relative; }

.zs-partners__track {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.zs-prov {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 5px;
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .15s, box-shadow .15s;
}
.zs-prov:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

.zs-prov__photo {
  position: relative;
  height: 132px;
  background-size: cover;
  background-position: center;
}
.zs-prov__photo--1 { background: linear-gradient(135deg, #c8d6e5, #8fa9c4); }
.zs-prov__photo--2 { background: linear-gradient(135deg, #2c3e50, #4a6278); }
.zs-prov__photo--3 { background: linear-gradient(135deg, #d9c9b0, #b89e7a); }
.zs-prov__photo--4 { background: linear-gradient(135deg, #e8c8b0, #d49a78); }
.zs-prov__photo--5 { background: linear-gradient(135deg, #cfe0dd, #9dc2bb); }
.zs-prov__photo--6 { background: linear-gradient(135deg, #d6cee8, #aa9cce); }

.zs-prov__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #fff;
  padding: 4px 10px;
  border-radius: 5px;
}
.zs-prov__badge--partner { background: var(--navy-900); }
.zs-prov__badge--rec     { background: var(--orange); }

.zs-prov__logo {
  position: absolute;
  left: 50%;
  bottom: -26px;
  transform: translateX(-50%);
  width: 64px;
  height: 64px;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(14, 44, 66, .14);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: var(--navy-900);
  overflow: hidden;
}
.zs-prov__logo img { width: 100%; height: 100%; object-fit: cover; }

.zs-prov__body {
  padding: 34px 16px 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.zs-prov__name { font-size: 15px; font-weight: 800; color: var(--navy-900); }
.zs-prov__cat  { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.zs-prov__loc  { font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.zs-prov__loc i { color: var(--orange); margin-right: 3px; }

.zs-prov__rating {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px;
  margin: 9px 0 14px;
}
.zs-stars { color: #f5b301; font-size: 12px; letter-spacing: 1px; }
.zs-prov__rnum   { font-size: 12.5px; font-weight: 800; color: var(--ink); }
.zs-prov__rcount { font-size: 11.5px; color: var(--muted); }

.zs-prov__btn {
  margin-top: auto;
  display: block;
  background: var(--navy-900);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  padding: 11px;
  border-radius: 5px;
  transition: background .15s;
}
.zs-prov:hover .zs-prov__btn { background: var(--navy-800); }

/* ============================================================
   6/c. BIZALMI SÁV
   ============================================================ */
.zs-trust {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  background: var(--bg-soft, #f6f8fb);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 22px 26px;
}
.zs-trust__item { display: flex; align-items: flex-start; gap: 14px; }

.zs-trust__icon {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.zs-trust__icon--1 { background: #fdeede; color: #e0911a; }
.zs-trust__icon--2 { background: #e6eef9; color: #4a7fc0; }
.zs-trust__icon--3 { background: #e3f1ee; color: #2e8674; }
.zs-trust__icon--4 { background: #fce8ee; color: #d56a92; }

.zs-trust__title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--navy-900);
}
.zs-trust__desc { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin-top: 4px; }

/* Carousel nyilak */
.zs-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--card);
  box-shadow: var(--shadow);
  color: var(--navy-900);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  transition: background .15s, color .15s, opacity .15s;
}
.zs-arrow:hover { background: var(--orange); color: #fff; }
.zs-arrow:disabled { opacity: .35; pointer-events: none; }
.zs-arrow--prev { left: -14px; }
.zs-arrow--next { right: -14px; }
.zs-partners__band .zs-arrow--prev { left: -42px; }
.zs-partners__band .zs-arrow--next { right: -42px; }

/* ============================================================
   7. ALSÓ RÉSZ – fő oszlop + egységes jobb sáv
   ============================================================ */
.zs-lower {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
  align-items: start;
}

.zs-lower__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-self: stretch;
  justify-content: space-between;
}

.zs-lower__side {
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* a sáv a fő oszlop teljes magasságára nyúlik, a blokkok
     egyenletesen elosztva, így az alja PONTOSAN egy vonalban
     végződik a bal oszloppal (align-items: start a rácson) */
  align-self: stretch;
  justify-content: space-between;
}

/* Két panel egymás mellett a fő oszlopban */
.zs-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}

/* Önálló blokk (cím + tartalom) a fő oszlopban */
.zs-block .zs-section__head { margin-bottom: 16px; }

/* Álláshirdetések 2 oszlopban a szélesebb fő sávban */
.zs-panel__list--2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 22px;
}
.zs-panel__list--2col .zs-job-row:nth-child(2) { border-top: none; }

/* (régi 3-oszlopos rács – nem használt, megtartva kompatibilitásért) */
.zs-triple {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
}

.zs-panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.zs-panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.zs-panel__title {
  font-size: 16.5px;
  font-weight: 800;
  color: var(--navy-900);
}

.zs-panel__morelink {
  font-size: 12px;
  font-weight: 700;
  color: var(--orange);
  white-space: nowrap;
}
.zs-panel__morelink:hover { color: var(--orange-dark); }

.zs-panel__list {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Panel alsó gombok */
.zs-panel__btn {
  display: block;
  margin-top: 16px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  padding: 11px;
  border-radius: 5px;
  transition: background .15s, color .15s;
}
.zs-panel__btn--outline {
  border: 1.5px solid var(--orange);
  color: var(--orange);
}
.zs-panel__btn--outline:hover { background: var(--orange); color: #fff; }
.zs-panel__btn--orange { background: var(--orange); color: #fff; }
.zs-panel__btn--orange:hover { background: var(--orange-dark); }
.zs-panel__btn--teal { background: var(--teal); color: #fff; }
.zs-panel__btn--teal:hover { background: var(--teal-dark); }

/* Programajánló sorok */
.zs-event-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
}
.zs-event-row + .zs-event-row { border-top: 1px solid var(--line-light); }

.zs-event-row__date {
  flex-shrink: 0;
  width: 48px;
  height: 52px;
  border-radius: 5px;
  border: 1.5px solid var(--orange);
  background: var(--orange-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
}
.zs-event-row__mon { font-size: 9.5px; font-weight: 800; letter-spacing: .05em; color: var(--orange-dark); }
.zs-event-row__day { font-size: 17px; font-weight: 800; color: var(--navy-900); }

.zs-event-row__body { flex: 1; min-width: 0; }
.zs-event-row__title { font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.35; }
.zs-event-row__meta  { font-size: 11.5px; color: var(--muted); margin-top: 3px; }

.zs-event-row__tag {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 5px;
}
.zs-event-row__tag--festival { background: #fbe4e2; color: var(--red); }
.zs-event-row__tag--music    { background: #e2edf7; color: var(--blue); }
.zs-event-row__tag--family   { background: #e4f1e5; color: var(--green); }
.zs-event-row__tag--culture  { background: var(--teal-soft); color: var(--teal); }

/* Ajánlat sorok */
.zs-offer-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
}
.zs-offer-row + .zs-offer-row { border-top: 1px solid var(--line-light); }

.zs-offer-row__img {
  position: relative;
  flex-shrink: 0;
  width: 62px;
  height: 56px;
  border-radius: 5px;
  background: var(--cream);
  border: 1px solid var(--line-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  overflow: visible;
}
.zs-offer-row__disc {
  position: absolute;
  top: -7px;
  left: -7px;
  background: var(--orange);
  color: #fff;
  font-size: 9.5px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 5px;
}

.zs-offer-row__title { font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.35; }
.zs-offer-row__meta  { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.zs-offer-row__valid { font-size: 11px; color: var(--orange-dark); font-weight: 600; margin-top: 2px; }

/* Ingatlan sorok */
.zs-estate-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
}
.zs-estate-row + .zs-estate-row { border-top: 1px solid var(--line-light); }

.zs-estate-row__img {
  flex-shrink: 0;
  width: 76px;
  height: 58px;
  border-radius: 5px;
  overflow: hidden;
  background: var(--teal-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}
.zs-estate-row__img img { width: 100%; height: 100%; object-fit: cover; }

.zs-estate-row__price { font-size: 14.5px; font-weight: 800; color: var(--navy-900); }
.zs-estate-row__name  { font-size: 12px; font-weight: 600; color: var(--ink); margin-top: 1px; }
.zs-estate-row__meta  { font-size: 11.5px; color: var(--muted); margin-top: 2px; }

/* ============================================================
   8. MOST HASZNOS – alacsony sáv
   ============================================================ */
.zs-useful__row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.zs-useful__item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 10px;
  min-width: 0;
  min-height: 64px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  overflow-wrap: anywhere;
  color: var(--ink);
  transition: background .15s, color .15s;
}
.zs-useful__item i { flex-shrink: 0; }
.zs-useful__item:hover { background: var(--cream); color: var(--teal); }
.zs-useful__item + .zs-useful__item { border-left: 1px solid var(--line-light); }
.zs-useful__item i { color: var(--teal); font-size: 14px; }

/* Most hasznos sáv + Velencei-tó banner egy sorban */
.zs-useful-wrap {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 20px;
  align-items: stretch;
}

/* Velencei-tó banner */
.zs-banner {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 20px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: linear-gradient(120deg, #15607a 0%, #2e8674 55%, #4d9e6a 100%);
  color: #fff;
  transition: filter .15s;
}
.zs-banner:hover { filter: brightness(1.06); }
.zs-banner::after {
  content: '';
  position: absolute;
  right: -20px;
  bottom: -28px;
  width: 120px;
  height: 120px;
  background: rgba(255, 255, 255, .08);
  border-radius: 50%;
}
.zs-banner__body { position: relative; z-index: 1; }
.zs-banner__title { font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.zs-banner__sub { font-size: 12px; color: rgba(255, 255, 255, .88); margin-top: 2px; }

/* Oldalsávi (álló) változat */
.zs-banner--side {
  min-height: 150px;
  padding: 20px;
  align-items: flex-end;
}
.zs-banner--side .zs-banner__title { font-size: 21px; }
.zs-banner--side .zs-banner__sub { font-size: 12.5px; }
.zs-banner--side::after { width: 150px; height: 150px; right: -30px; bottom: -40px; }

/* ============================================================
   Álláshirdetések + „Hirdess nálunk” gradiens promo (2 oszlop)
   ============================================================ */
.zs-jobrow {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 20px;
  align-items: stretch;
}

/* Gradiens promo kártya – Crocoblock-stílus */
.zs-promo {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  color: #fff;
  background: linear-gradient(160deg, #131f3d 0%, #0b1426 100%);
  border: 1px solid rgba(255, 255, 255, .06);
}
/* színes fény-folt */
.zs-promo::before {
  content: '';
  position: absolute;
  right: -70px;
  top: -70px;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(139, 61, 240, .55) 0%, rgba(232, 57, 155, .35) 42%, transparent 70%);
  pointer-events: none;
}
.zs-promo > * { position: relative; z-index: 1; }

.zs-promo__badge {
  align-self: flex-start;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(90deg, #4a7dff, #8b3df0);
}

.zs-promo__title {
  font-size: 23px;
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -.01em;
  margin-top: 16px;
}
.zs-promo__title span {
  background: linear-gradient(90deg, #4a7dff 0%, #b14ef0 45%, #e6399b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.zs-promo__text {
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .68);
  margin-top: 12px;
}

.zs-promo__btn {
  align-self: flex-start;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
  padding: 12px 22px;
  border-radius: 999px;
  background: linear-gradient(90deg, #4a7dff 0%, #8b3df0 50%, #e6399b 100%);
  box-shadow: 0 8px 22px rgba(139, 61, 240, .35);
  transition: transform .15s, box-shadow .15s;
}
.zs-promo:hover .zs-promo__btn {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(139, 61, 240, .45);
}
.zs-promo__btn i { font-size: 11px; }

/* ============================================================
   8/b. KÖZÖSSÉG – adományok · állások · Zsebinfo Shop
   (hero-arányú rács: széles / közepes / keskeny)
   ============================================================ */
.zs-community {
  display: grid;
  grid-template-columns: 1.1fr .9fr 300px;
  gap: 20px;
  align-items: stretch;
}

/* Adomány sorok – haladásjelzővel */
.zs-donate-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
}
.zs-donate-row + .zs-donate-row { border-top: 1px solid var(--line-light); }

.zs-donate-row__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fbe7e5;
  color: var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}

.zs-donate-row__body { flex: 1; min-width: 0; }
.zs-donate-row__title { font-size: 13.5px; font-weight: 700; color: var(--ink); line-height: 1.35; }
.zs-donate-row__meta  { font-size: 11.5px; color: var(--muted); margin-top: 2px; }

.zs-progress {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 8px;
}
.zs-progress__bar {
  flex: 1;
  height: 7px;
  border-radius: 5px;
  background: var(--line-light);
  overflow: hidden;
}
.zs-progress__bar span {
  display: block;
  height: 100%;
  border-radius: 5px;
  background: var(--teal);
}
.zs-progress__pct { font-size: 11.5px; font-weight: 800; color: var(--teal); white-space: nowrap; }

/* Állás sorok */
.zs-job-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
}
.zs-job-row + .zs-job-row { border-top: 1px solid var(--line-light); }

.zs-job-row__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 5px;
  background: #e2edf7;
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}

.zs-job-row__body { flex: 1; min-width: 0; }
.zs-job-row__title { font-size: 13.5px; font-weight: 700; color: var(--ink); line-height: 1.35; }
.zs-job-row__meta  { font-size: 11.5px; color: var(--muted); margin-top: 2px; }

.zs-job-row__tag {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 5px;
  background: var(--teal-soft);
  color: var(--teal);
}
.zs-job-row__tag--part { background: var(--orange-soft); color: var(--orange-dark); }

/* Zsebinfo Shop ajánló kártya */
.zs-shop-card {
  background: #f4efe2;
  border: 1px solid #e8e1cf;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.zs-shop-card__bag {
  position: absolute; top: -8px; right: -6px;
  font-size: 96px; color: rgba(63,107,71,.10); transform: rotate(-8deg);
  pointer-events: none;
}

.zs-shop-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  background: var(--orange);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  margin-bottom: 14px;
}

.zs-shop-card__title { font-size: 18px; font-weight: 800; color: var(--ink); }
.zs-shop-card__title span { color: var(--teal); }

.zs-shop-card__desc {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.55;
  margin-top: 8px;
}

.zs-shop-card__list {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.zs-shop-card__list li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, .9);
}
.zs-shop-card__list li i { color: var(--orange); font-size: 11px; width: 14px; }

.zs-shop-card__btn {
  display: block;
  margin-top: 18px;
  background: var(--orange);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  padding: 11px;
  border-radius: 5px;
  transition: background .15s;
}
.zs-shop-card__btn:hover { background: var(--orange-dark); }

/* ============================================================
   9. JÁTSZÓTÉR KERESŐ – vízszintes carousel
   ============================================================ */
.zs-playgrounds__wrap { position: relative; }

.zs-playgrounds__track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 4px 2px 14px;
  scrollbar-width: none;
}
.zs-playgrounds__track::-webkit-scrollbar { display: none; }

.zs-town-card {
  flex: 0 0 196px;
  scroll-snap-align: start;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 16px;
  transition: box-shadow .15s, transform .15s;
}
.zs-town-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }

.zs-town-card__icon {
  width: 46px;
  height: 46px;
  border-radius: 5px;
  background: var(--orange-soft);
  color: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  margin-bottom: 11px;
}

.zs-town-card__name { font-size: 15px; font-weight: 800; color: var(--navy-900); }
.zs-town-card__count { font-size: 12px; color: var(--muted); margin-top: 3px; }

.zs-town-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 10px;
}
.zs-town-card__tags span {
  font-size: 10px;
  font-weight: 700;
  color: var(--teal);
  background: var(--teal-soft);
  padding: 2px 8px;
  border-radius: 5px;
}

/* ============================================================
   10. HÍRLEVÉL SÁV
   ============================================================ */
.zs-newsletter {
  background: var(--teal);
  margin-top: 46px;
  padding: 36px 0;
  color: #fff;
}

.zs-newsletter__inner {
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  gap: 26px;
  align-items: center;
}

.zs-newsletter__icon {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.zs-newsletter__title { font-size: 20px; font-weight: 800; }
.zs-newsletter__excl { color: var(--cream); }
.zs-newsletter__desc  { font-size: 13px; color: rgba(255,255,255,.82); margin-top: 7px; max-width: 460px; }

.zs-newsletter__form { display: flex; gap: 10px; }

.zs-newsletter__form input[type="email"] {
  flex: 1;
  height: 48px;
  border: none;
  border-radius: 5px;
  padding: 0 16px;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  outline: none;
  min-width: 0;
}

.zs-newsletter__btn {
  background: var(--orange);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  height: 48px;
  padding: 0 24px;
  border-radius: 5px;
  white-space: nowrap;
  transition: background .15s;
}
.zs-newsletter__btn:hover { background: var(--orange-dark); }

.zs-newsletter__consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, .75);
  cursor: pointer;
}
.zs-newsletter__consent input { margin-top: 2px; accent-color: var(--orange); }
.zs-newsletter__consent a { text-decoration: underline; color: #fff; }

/* ============================================================
   11. FOOTER
   ============================================================ */
.zs-footer {
  background: var(--navy-950);
  color: rgba(255, 255, 255, .72);
  padding: 46px 0 0;
  margin-top: 0;
}

.zs-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  gap: 30px;
  padding-bottom: 34px;
}

.zs-footer__desc {
  font-size: 12.5px;
  line-height: 1.6;
  margin-top: 13px;
  max-width: 240px;
}

.zs-footer__social {
  display: flex;
  gap: 8px;
  margin-top: 15px;
}
.zs-footer__social a {
  width: 32px;
  height: 32px;
  border-radius: 5px;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  transition: background .15s;
}
.zs-footer__social a:hover { background: var(--orange); }

.zs-footer__col-title {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 13px;
}

.zs-footer__col ul { display: flex; flex-direction: column; gap: 8px; }
.zs-footer__col a {
  font-size: 12.5px;
  color: rgba(255, 255, 255, .68);
  transition: color .15s;
}
.zs-footer__col a:hover { color: var(--orange); }

.zs-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding: 16px 0;
}

.zs-footer__bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: rgba(255, 255, 255, .5);
}

.zs-footer__bottom-inner a { color: rgba(255, 255, 255, .62); }
.zs-footer__bottom-inner a:hover { color: var(--orange); }
.zs-footer__bottom-links { display: flex; gap: 18px; }

.zs-main-end { padding-top: 18px; padding-bottom: 4px; }

/* ============================================================
   RESZPONZÍV
   ============================================================ */
@media (max-width: 1150px) {
  .zs-hero { grid-template-columns: 1fr 1fr; }
  .zs-hero-side { grid-column: 1 / -1; flex-direction: row; }
  .zs-hero-side > * { flex: 1; }

  .zs-community { grid-template-columns: 1fr 1fr; }
  .zs-shop-card { grid-column: 1 / -1; }

  .zs-partners__track { grid-template-columns: repeat(3, 1fr); }
  .zs-partners__band .zs-arrow--prev { left: -12px; }
  .zs-partners__band .zs-arrow--next { right: -12px; }

  .zs-useful__row { grid-template-columns: repeat(3, 1fr); }
  .zs-useful__item:nth-child(n+4) { border-top: 1px solid var(--line-light); }
  .zs-useful__item:nth-child(4) { border-left: none; }
}

@media (max-width: 950px) {
  .zs-menubar { display: none; }
  .zs-hamburger { display: flex; }
  .zs-locpick { display: none; }
  .zs-header__inner .zs-header__cta { display: none; }
  .zs-topbar__left { font-size: 11px; }

  .zs-quicknav__row { grid-template-columns: 1fr 1fr; }
  .zs-quicknav__item:nth-child(odd) { border-left: none; }
  .zs-quicknav__item:nth-child(n+3) { border-top: 1px solid var(--line-light); }

  .zs-triple { grid-template-columns: 1fr; }
  .zs-community { grid-template-columns: 1fr; }

  /* Jobb sáv a fő tartalom alá kerül */
  .zs-lower { grid-template-columns: 1fr; }
  .zs-lower__side { position: static; }

  .zs-newsletter__inner { grid-template-columns: 1fr; gap: 18px; }
  .zs-newsletter__icon { display: none; }
  .zs-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .zs-topbar__item--nameday, .zs-topbar__item--date, .zs-topbar__divider { display: none; }

  .zs-hero { grid-template-columns: 1fr; }
  .zs-feat { min-height: 340px; }
  .zs-feat__title { font-size: 19px; }
  .zs-hero-side { flex-direction: column; }

  .zs-section__head { flex-wrap: wrap; row-gap: 4px; }
  .zs-partners__band { padding: 22px 18px 24px; }

  /* Kereső a logó alá, teljes szélességben */
  .zs-header__inner { flex-wrap: wrap; height: auto; padding: 14px 0; row-gap: 12px; }
  .zs-logo { margin-right: auto; }
  .zs-search { order: 3; flex-basis: 100%; }
  .zs-search button { width: 46px; }

  .zs-partners__track { grid-template-columns: 1fr 1fr; }
  .zs-arrow { display: none; }

  .zs-quicknav__row { grid-template-columns: 1fr; }
  .zs-quicknav__item { border-left: none !important; min-height: 62px; padding: 12px 18px; }
  .zs-quicknav__item + .zs-quicknav__item { border-top: 1px solid var(--line-light); }

  .zs-useful-wrap { grid-template-columns: 1fr; }
  .zs-banner { min-height: 70px; padding: 14px 20px; }
  .zs-useful__row { grid-template-columns: 1fr 1fr; }
  .zs-useful__item { border-left: none !important; justify-content: flex-start; }
  .zs-useful__item + .zs-useful__item { border-top: 1px solid var(--line-light); }

  .zs-duo { grid-template-columns: 1fr; }
  .zs-jobrow { grid-template-columns: 1fr; }
  .zs-panel__list--2col { grid-template-columns: 1fr; }
  .zs-panel__list--2col .zs-job-row:nth-child(2) { border-top: 1px solid var(--line-light); }

  .zs-newsletter__form { flex-direction: column; }
  .zs-footer__grid { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 460px) {
  .zs-partners__track { grid-template-columns: 1fr; }
}

/* ============================================================
   ===  V8 – 3 OSZLOPOS PORTÁL LAYOUT  (2026-06-14)  =========
   "Mai hasznos infók" sáv · bal/közép/jobb oszlop ·
   tabok · ikonsorok · gyorslinkek · közlekedési térkép
   ============================================================ */

/* ── "Mai hasznos infók" sáv ─────────────────────────────── */
.zs-today { margin-top: 22px; }
.zs-today__head {
  display: flex; align-items: center; gap: 9px;
  font-size: 13px; font-weight: 800; letter-spacing: .03em;
  text-transform: uppercase; color: var(--ink); margin-bottom: 12px;
}
.zs-today__head i { color: var(--orange); }
.zs-today__grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px;
}
.zs-info-card {
  display: flex; align-items: flex-start; gap: 11px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 13px 14px;
  box-shadow: var(--shadow); transition: transform .15s, box-shadow .15s;
}
.zs-info-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.zs-info-card__icon {
  flex: 0 0 38px; width: 38px; height: 38px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: #fff; background: var(--orange);
}
.zs-info-card__icon--wx    { background: #e6a23c; }
.zs-info-card__icon--name  { background: var(--red); }
.zs-info-card__icon--pharm { background: var(--green); }
.zs-info-card__icon--doc   { background: var(--blue); }
.zs-info-card__icon--waste { background: var(--teal); }
.zs-info-card__icon--event { background: var(--orange); }
.zs-info-card__label {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted);
}
.zs-info-card__value { font-size: 15px; font-weight: 800; color: var(--ink); line-height: 1.25; margin: 1px 0; }
.zs-info-card__sub { font-size: 11.5px; color: var(--muted); }
.zs-info-card__sub a { color: var(--orange); font-weight: 700; }

/* ── 3 oszlopos portál grid ──────────────────────────────── */
.zs-portal {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 32px;
  align-items: start;
  margin-top: 8px;
}
.zs-portal__col { display: flex; flex-direction: column; gap: 36px; min-width: 0; }
.zs-portal__left  > .zs-weather { margin: 0; }

/* ============================================================
   Magazin-stílusú szekció-fejlécek a fő tartalomhoz (2026-07-01)
   – referencia: hírmagazin téma. Színes tömör címke-blokk +
   vízszintes vonal. Csak a középső (fő) oszlopra hat.
   ============================================================ */
.zs-portal__center .zs-bhead {
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--line);        /* vékony, elegáns vonal */
}
/* Szolíd vonal a JOBB SÁV blokk-fejlécei alatt is – egységes mindenhol */
.zs-portal__right .zs-bhead {
  padding-bottom: 10px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.zs-portal__center .zs-bhead__title {           /* egyszerű szöveges cím, mint a referencia */
  background: none;
  color: #333333;
  padding: 0;
  border-radius: 0;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.2;
}
.zs-portal__center .zs-bhead__title i { color: var(--orange); font-size: 15px; }
/* Alpontok – kategória sub-nav a szekció-fejlécben */
.zs-portal__center .zs-bhead__nav {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-right: auto;
}
.zs-portal__center .zs-bhead__nav a {
  font-size: 12px; font-weight: 600; color: var(--ink);
  background: #fff; border: 1px solid #e2e6df;
  padding: 5px 12px; border-radius: 999px; transition: .15s;
}
.zs-portal__center .zs-bhead__nav a:hover { border-color: var(--teal); color: var(--orange-dark); }
.zs-portal__center .zs-bhead__nav a.is-active { background: var(--orange); border-color: var(--orange); color: #fff; }
.zs-portal__center .zs-bhead__more {
  margin-left: auto;
  color: var(--muted);
  white-space: nowrap;
}
.zs-portal__center .zs-bhead__more:hover { color: var(--ink); }
/* Az „Összes … →" navigáció szürke mindenhol (nem csiricsáré) */
.zs-portal__right .zs-bhead__more { color: var(--muted); }
.zs-portal__right .zs-bhead__more:hover { color: var(--ink); }

/* ── Kiemelt hírek: 1 fő + 2 oldalsó ─────────────────────── */
.zs-feat3 { display: grid; grid-template-columns: minmax(0,1.7fr) minmax(0,1fr); gap: 18px; align-items: stretch; }
.zs-feat3__side { display: flex; flex-direction: column; gap: 18px; }
.zs-sidenews {
  flex: 1; display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
  transition: box-shadow .15s, transform .15s;
}
.zs-sidenews:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.zs-sidenews__img { flex: 1; min-height: 110px; background-size: cover; background-position: center; position: relative; }
.zs-sidenews__img .zs-badge { position: absolute; left: 10px; top: 10px; }
.zs-sidenews__body { padding: 11px 14px 13px; }
.zs-sidenews__title { font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.35; }
.zs-sidenews__meta { font-size: 11.5px; color: var(--muted); margin-top: 8px; display: flex; gap: 13px; }
.zs-sidenews__meta i { margin-right: 4px; }
@media (max-width: 640px) { .zs-feat3 { grid-template-columns: 1fr; } }

/* Egységes blokk-fejléc az oszlopokban */
.zs-bhead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 12px;
}
.zs-bhead__title {
  font-size: 15px; font-weight: 800; color: #333333;
  display: flex; align-items: center; gap: 8px;
}
.zs-bhead__title i { color: var(--orange); font-size: 14px; }
.zs-bhead__more { font-size: 12px; font-weight: 700; color: var(--teal); white-space: nowrap; }
.zs-bhead__more:hover { color: var(--orange); }
.zs-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow);
}

/* ── Bal: Kiemelt programok (mini sorok) ─────────────────── */
.zs-mprog { display: flex; gap: 11px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line-light); }
.zs-mprog:first-of-type { border-top: none; padding-top: 0; }
.zs-mprog__date {
  flex: 0 0 42px; width: 42px; text-align: center; border-radius: 6px;
  background: var(--orange-soft); color: var(--orange-dark); padding: 5px 0;
}
.zs-mprog__mon { display: block; font-size: 9.5px; font-weight: 800; text-transform: uppercase; }
.zs-mprog__day { display: block; font-size: 17px; font-weight: 800; line-height: 1; }
.zs-mprog__body { min-width: 0; flex: 1; }
.zs-mprog__title { font-size: 12.5px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.zs-mprog__meta { font-size: 11px; color: var(--muted); margin-top: 2px; }
.zs-mprog__thumb { flex: 0 0 48px; width: 48px; height: 42px; border-radius: 6px; background-size: cover; background-position: center; }

/* ── Bal: Gyorslinkek (ikonrács) ─────────────────────────── */
.zs-qlinks { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.zs-qlink {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 4px; border-radius: 6px; background: var(--cream);
  border: 1px solid var(--line-light); text-align: center;
  font-size: 10.5px; font-weight: 700; color: var(--ink); transition: .15s;
}
.zs-qlink i { font-size: 17px; color: var(--orange); }
.zs-qlink:hover { background: var(--orange-soft); border-color: var(--orange-soft); transform: translateY(-2px); }

/* ── Bal: Vállalkozol promo (világos/krém, mint a terven) ── */
/* Vállalkozói belépési pont – a paletta szabálya szerint üzleti elem,
   ezért pezsgőkrém háttér arany kerettel (2026-08-15). */
.zs-vall {
  background: var(--gold-soft); border: 1px solid #E6D6A8;
  color: var(--ink); border-radius: var(--radius); padding: 18px 18px 20px;
  box-shadow: var(--shadow); position: relative; overflow: hidden;
}
.zs-vall__title { font-size: 16px; font-weight: 800; line-height: 1.25; color: var(--gold-ink); }
.zs-vall__text { font-size: 12px; color: var(--muted); margin: 7px 0 12px; }
.zs-vall__list { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.zs-vall__list li { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--ink); }
.zs-vall__list i { color: var(--orange); font-size: 12px; }
.zs-vall__btn {
  display: block; text-align: center; background: var(--gold); color: #fff;
  font-size: 13px; font-weight: 700; padding: 11px; border-radius: 5px; transition: .15s;
}
.zs-vall__btn:hover { background: var(--gold-dark); }

/* ── Bal: Népszerű települések ───────────────────────────── */
.zs-towns { display: flex; flex-direction: column; }
.zs-town-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 0; border-top: 1px solid var(--line-light);
  font-size: 13px; font-weight: 700; color: var(--ink); transition: color .15s;
}
.zs-town-link:first-child { border-top: none; }
.zs-town-link:hover { color: var(--orange); }
.zs-town-link i { color: var(--teal); font-size: 11px; }
.zs-town-link span { color: var(--muted); font-size: 11.5px; font-weight: 600; }

/* ── Közép: Friss hírek (4 kártya) ───────────────────────── */
.zs-news4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.zs-ncard { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: .15s; display: flex; flex-direction: column; }
.zs-ncard:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.zs-ncard__img { height: 92px; position: relative; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; font-size: 30px; }
.zs-ncard__img .zs-badge { position: absolute; left: 8px; bottom: 8px; }
.zs-ncard__body { padding: 10px 11px 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.zs-ncard__title { font-size: 12.5px; font-weight: 700; line-height: 1.32; color: var(--ink); }
.zs-ncard__meta { font-size: 10.5px; color: var(--muted); margin-top: auto; display: flex; gap: 10px; }
.zs-ncard__meta i { margin-right: 3px; }

/* ── Közép: Kiemelt szolgáltatók (kompakt 4) ─────────────── */
.zs-svc4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.zs-scard { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); transition: .15s; text-align: center; }
.zs-scard:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.zs-scard__logo { width: 44px; height: 44px; margin: 0 auto 9px; border-radius: 9px; background: var(--orange-soft); color: var(--orange); display: flex; align-items: center; justify-content: center; font-size: 19px; }
.zs-scard__name { font-size: 13px; font-weight: 800; color: var(--ink); }
.zs-scard__cat { font-size: 11px; color: var(--muted); margin: 1px 0 7px; }
.zs-scard__rating { display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 11px; }
.zs-scard__rating .zs-stars { font-size: 10px; }
.zs-scard__rnum { font-weight: 800; color: var(--ink); }
.zs-scard__loc { font-size: 11px; color: var(--muted); margin-top: 4px; }

/* ── Tabok (Programajánló · Friss állások) ───────────────── */
.zs-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.zs-tab {
  font-size: 13.5px; font-weight: 600; color: var(--ink);
  padding: 8px 16px; border-radius: 999px; background: #fff;
  border: 1px solid #e2e6df; transition: .15s; cursor: pointer;
}
.zs-tab:hover { border-color: var(--orange); color: var(--orange); }
.zs-tab.is-active { background: var(--orange); color: #fff; border-color: var(--orange); }
/* Programajánló tabjai – terrakotta (Kultúra/Programajánló kategória-szín) */
.zs-tabs--kultura .zs-tab:hover { border-color: var(--kultura); color: var(--kultura); }
.zs-tabs--kultura .zs-tab.is-active { background: var(--kultura); color: #fff; border-color: var(--kultura); }
/* Kiemelt programok blokk (jobb sáv) – terrakotta akcentus */
.zs-progblock .zs-mprog__date { background: var(--kultura-soft); color: var(--kultura-dark); }
.zs-progblock .zs-panel__btn--orange { background: var(--kultura); }
.zs-progblock .zs-panel__btn--orange:hover { background: var(--kultura-dark); }

/* Programajánló kártyák */
.zs-prog5 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.zs-pcard { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: .15s; }
.zs-pcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.zs-pcard__img { height: 76px; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; font-size: 26px; }
.zs-pcard__body { padding: 9px 10px 11px; }
.zs-pcard__date { font-size: 10px; font-weight: 800; color: var(--orange); text-transform: uppercase; }
.zs-pcard__title { font-size: 11.5px; font-weight: 700; color: var(--ink); line-height: 1.3; margin: 2px 0 3px; }
.zs-pcard__meta { font-size: 10px; color: var(--muted); }

/* ── Ikonsor (Legkeresettebb szolg. · Helyi ügyintézés) ──── */
.zs-iconrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 12px; }
.zs-iconrow--svc { grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); }
.zs-itile {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 6px; text-align: center; box-shadow: var(--shadow); transition: .15s;
  min-width: 0;
}
.zs-itile:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--orange-soft); }
.zs-itile__icon { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 8px; background: var(--teal-soft); color: var(--teal-dark); display: flex; align-items: center; justify-content: center; font-size: 17px; }
.zs-itile__label { font-size: 10.5px; font-weight: 700; color: var(--ink); line-height: 1.2; hyphens: auto; overflow-wrap: break-word; max-width: 100%; }
.zs-itile__sub { font-size: 10px; color: var(--muted); }

/* ── Friss állások (2×2 kártyák) ─────────────────────────── */
.zs-jobs4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.zs-jcard { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 15px 14px; box-shadow: var(--shadow); transition: .15s; }
.zs-jcard:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.zs-jcard__icon { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 8px; background: var(--orange-soft); color: var(--orange); display: flex; align-items: center; justify-content: center; font-size: 16px; }
.zs-jcard__body { min-width: 0; flex: 1; }
.zs-jcard__title { font-size: 13px; font-weight: 800; color: var(--ink); }
.zs-jcard__meta { font-size: 11px; color: var(--muted); margin: 1px 0 4px; }
.zs-jcard__tag { font-size: 10px; font-weight: 700; color: var(--teal-dark); background: var(--teal-soft); padding: 2px 8px; border-radius: 10px; }

/* ── Hirdetések (5 mini kártya) ──────────────────────────── */
.zs-ads5 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.zs-adcard { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: .15s; }
.zs-adcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.zs-adcard__img { height: 66px; background: var(--cream); background-size: cover; background-position: center; }
.zs-adcard__body { padding: 8px 10px 10px; }
.zs-adcard__title { font-size: 11px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.zs-adcard__price { font-size: 12px; font-weight: 800; color: var(--orange); margin-top: 3px; }
.zs-adcard__loc { font-size: 10px; color: var(--muted); }

/* ── Jobb: Kiemelt hirdetések (sorok kis képpel) ─────────── */
.zs-sidead { display: flex; gap: 11px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line-light); }
.zs-sidead:first-of-type { border-top: none; padding-top: 0; }
.zs-sidead__img { flex: 0 0 52px; width: 52px; height: 44px; border-radius: 6px; background: var(--cream); display: flex; align-items: center; justify-content: center; font-size: 20px; }
.zs-sidead__title { font-size: 12.5px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.zs-sidead__meta { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* ── Jobb: Kiemelt szolgáltató (nagy kártya) ─────────────── */
.zs-featsvc__photo { height: 120px; border-radius: 6px; background-size: cover; background-position: center; position: relative; margin-bottom: 12px; }
.zs-featsvc__name { font-size: 16px; font-weight: 800; color: var(--ink); }
.zs-featsvc__cat { font-size: 12px; color: var(--muted); margin: 1px 0 8px; }
.zs-featsvc__row { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink); margin-bottom: 5px; }
.zs-featsvc__row i { color: var(--teal); width: 14px; }
.zs-featsvc__btn { display: block; text-align: center; background: var(--orange); color: #fff; font-size: 13px; font-weight: 700; padding: 10px; border-radius: 5px; margin-top: 12px; transition: .15s; }
.zs-featsvc__btn:hover { background: var(--orange-dark); }

/* ── Jobb: Közösség (csoport sorok) ──────────────────────── */
.zs-group { display: flex; gap: 11px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line-light); }
.zs-group:first-of-type { border-top: none; padding-top: 0; }
.zs-group__icon { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 7px; background: var(--teal-soft); color: var(--teal-dark); display: flex; align-items: center; justify-content: center; font-size: 15px; }
.zs-group__name { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.zs-group__meta { font-size: 11px; color: var(--muted); }
.zs-group__btn { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--orange); border: 1px solid var(--orange); padding: 5px 11px; border-radius: 12px; transition: .15s; }
.zs-group__btn:hover { background: var(--orange); color: #fff; }

/* ── Jobb: Közlekedési infók + térkép ────────────────────── */
.zs-trans-row { display: flex; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line-light); }
.zs-trans-row:first-of-type { border-top: none; padding-top: 0; }
.zs-trans-row__icon { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 6px; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; background: var(--blue); }
.zs-trans-row__icon--park { background: var(--green); }
.zs-trans-row__icon--alert { background: var(--red); }
.zs-trans-row__title { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.zs-trans-row__meta { font-size: 11px; color: var(--muted); }
.zs-map {
  margin-top: 13px; height: 150px; border-radius: 6px; overflow: hidden;
  position: relative; border: 1px solid var(--line);
  background: linear-gradient(135deg, #dfe9d8, #cfe0e8);
}
.zs-map iframe { width: 100%; height: 100%; border: 0; display: block; }
.zs-map__pin {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -100%);
  color: var(--orange); font-size: 26px; text-shadow: 0 2px 4px rgba(0,0,0,.25);
}

/* ── Partnereink sáv ─────────────────────────────────────── */
.zs-partners-strip { padding: 26px 0; border-top: 1px solid var(--line); }
.zs-partners-strip__title { text-align: center; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.zs-partners-strip__row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px; }
.zs-partners-strip__logo { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 800; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 8px 16px; box-shadow: var(--shadow); }
.zs-partners-strip__logo i { color: var(--orange); }

/* ── Reszponzív – portál ─────────────────────────────────── */
@media (max-width: 1150px) {
  .zs-today__grid { grid-template-columns: repeat(3, 1fr); }
  .zs-portal { grid-template-columns: minmax(0,1fr) 280px; }
  .zs-portal__left { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
  .zs-portal__left > * { flex: 1 1 220px; }
  .zs-news4, .zs-svc4 { grid-template-columns: repeat(2, 1fr); }
  .zs-prog5, .zs-ads5 { grid-template-columns: repeat(3, 1fr); }
  .zs-iconrow { grid-template-columns: repeat(4, 1fr); }
  .zs-iconrow--svc { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 950px) {
  .zs-portal { grid-template-columns: 1fr; }
  .zs-portal__right { order: 3; }
}
@media (max-width: 640px) {
  .zs-today__grid { grid-template-columns: 1fr 1fr; }
  .zs-news4, .zs-svc4, .zs-prog5, .zs-ads5, .zs-jobs4 { grid-template-columns: 1fr 1fr; }
  .zs-iconrow, .zs-iconrow--svc { grid-template-columns: repeat(3, 1fr); }
  .zs-portal__left { flex-direction: column; }
}
@media (max-width: 460px) {
  .zs-today__grid { grid-template-columns: 1fr; }
  .zs-news4, .zs-svc4, .zs-prog5, .zs-ads5, .zs-jobs4 { grid-template-columns: 1fr; }
}

/* ── V9 finomítások a látványtervhez (2026-06-14) ────────── */

/* Hero: "Tovább a cikkhez" gomb + lapozó pöttyök */
.zs-feat__btn {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  background: var(--orange); color: #fff; font-size: 13px; font-weight: 700;
  padding: 10px 18px; border-radius: 5px; transition: background .15s;
}
.zs-feat:hover .zs-feat__btn { background: var(--orange-dark); }
.zs-feat__dots {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 14px;
  display: flex; justify-content: center; gap: 7px;
}
.zs-feat__dots span {
  width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.5);
}
.zs-feat__dots span.is-active { background: #fff; width: 22px; border-radius: 4px; }

/* Időjárás kártya: Páratartalom / Szél / Csapadék statok */
.zs-weather__stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-light);
}
.zs-wstat { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
.zs-wstat i { color: var(--teal); font-size: 14px; }
.zs-wstat__v { font-size: 14px; font-weight: 800; color: var(--ink); }
.zs-wstat__l { font-size: 10.5px; color: var(--muted); }
.zs-weather__menu { background: none; color: var(--muted); font-size: 16px; margin-left: auto; }

/* Vállalkozol kártya dekoráció (kis bolt-illusztráció) */
.zs-vall__deco {
  position: absolute; right: -6px; bottom: -8px; font-size: 76px;
  color: rgba(63,107,71,.10); pointer-events: none;
}

/* ── Alsó sáv: Gyorslinkek · Vállalkozol · Népszerű települések (v10) ── */
.zs-band {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; margin-top: 8px;
  align-items: stretch;
}
.zs-band > * { height: 100%; margin: 0; }
.zs-band .zs-vall { display: flex; flex-direction: column; }
.zs-band .zs-vall__list { flex: 1; }
.zs-band__towns { position: relative; overflow: hidden; }
.zs-band__towns > *:not(.zs-band__map) { position: relative; z-index: 1; }
.zs-band__map {
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background:
    radial-gradient(circle at 78% 38%, rgba(63,107,71,.10) 0 8px, transparent 9px),
    linear-gradient(135deg, #eef3e8, #e3ece2);
}
.zs-band__map i {
  position: absolute; right: 26px; top: 30%; font-size: 30px; color: var(--orange);
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.18));
}
@media (max-width: 900px) { .zs-band { grid-template-columns: 1fr; } }

/* ── Közlekedési infók: "Rendben" státusz (v10) ── */
.zs-status { display: flex; align-items: center; gap: 11px; padding: 9px 0; border-top: 1px solid var(--line-light); }
.zs-status:first-of-type { border-top: none; padding-top: 0; }
.zs-status__icon { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 6px; background: var(--teal-soft); color: var(--teal-dark); display: flex; align-items: center; justify-content: center; font-size: 14px; }
.zs-status__body { flex: 1; min-width: 0; }
.zs-status__title { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.zs-status__meta { font-size: 11px; color: var(--muted); }
.zs-status__ok { font-size: 11px; font-weight: 800; color: #2e8b48; background: #e4f3e7; padding: 3px 10px; border-radius: 10px; white-space: nowrap; }

/* ── v10 finomítások: állás-ikon színek, hirdetés-címke ── */
.zs-jcard__icon--blue   { background:#e8f1f9; color:#3b7fc4; }
.zs-jcard__icon--red    { background:#fbeae8; color:#e2574c; }
.zs-jcard__icon--purple { background:#efe8f7; color:#8559b5; }
.zs-jcard__icon--amber  { background:#fbf2e0; color:#cf9326; }
.zs-jcard__tag--part    { color:#b9651b; background:#fbeede; }
.zs-adcard__img { position: relative; }
.zs-adcard__tag {
  position: absolute; left: 8px; bottom: 8px;
  font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: #fff; background: rgba(40,70,50,.80); padding: 3px 8px; border-radius: 5px;
}

.zs-jcard__tag { white-space: nowrap; font-size: 9.5px; }

/* ── v11: finom színes kiemelés a jobb oszlop kártyáin (óvatosan) ──
   +3 eltolás: a jobb sáv elejére bekerült Időjárás(1)/Deviza(2)/Programok(3) miatt */
.zs-portal__right > *:nth-child(5) { border-top: 1px solid #e0a04a; }  /* Kiemelt hirdetések – borostyán (Shop az élen → +1) */
.zs-portal__right > *:nth-child(6) { border-top: 1px solid #5a8fc4; }  /* Kiemelt szolgáltató – kék */
.zs-portal__right > *:nth-child(7) { border-top: 1px solid #d9695f; }  /* Adománygyűjtések – meleg piros */
.zs-portal__right > *:nth-child(8) { border-top: 1px solid #5aa06a; }  /* Közösség – zöld */
.zs-portal__right > *:nth-child(9) { border-top: 1px solid #5a8fc4; }  /* Közlekedési infók – kék */

/* ── Shop kártya – laptop grafika (v11) ── */
.zs-shop-card { min-height: 205px; }
.zs-shop-card__art {
  position: absolute; right: 2px; bottom: 4px; width: 140px;
  opacity: .96; z-index: 0; pointer-events: none;
}
.zs-shop-card__art svg { width: 100%; height: auto; display: block;
  filter: drop-shadow(0 4px 8px rgba(40,70,50,.12)); }
.zs-shop-card__title, .zs-shop-card__price,
.zs-shop-card__desc, .zs-shop-card__btn { position: relative; z-index: 1; }
.zs-shop-card__price { font-size: 13px; font-weight: 700; color: var(--ink); margin-top: 7px; }
.zs-shop-card__price strong { color: var(--orange-dark); font-weight: 800; }
.zs-shop-card__desc { max-width: 88%; margin-top: 6px; }
.zs-shop-card__btn { display: inline-block; align-self: flex-start; width: auto; padding: 9px 18px; margin-top: 14px; }

/* ── Shop kártya: sima cím + narancsos kiemelés (v11.1) ── */
.zs-shop-card__title { color: var(--ink); font-weight: 800; }
.zs-shop-card__title span { color: var(--ink); }
.zs-shop-card__price { font-size: 13.5px; }
.zs-shop-card__price strong { color: #e8862e; font-weight: 800; }

/* ── Shop kártya: Névjegyek / Szórólapok / Kiadványok ikonok (v11.2) ── */
.zs-shop-card__feats { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 11px; position: relative; z-index: 1; }
.zs-shop-feat { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; color: var(--ink); }
.zs-shop-feat i { width: 21px; height: 21px; border-radius: 50%; background: #dfeada; color: #3f6b47; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; flex: 0 0 21px; }

/* ── Shop kártya: valódi laptop-fotó (v11.3) ── */
.zs-shop-card__art { width: 170px; right: -10px; bottom: -6px; opacity: 1; }
.zs-shop-card__art img {
  width: 100%; height: auto; display: block;
  -webkit-mask-image: linear-gradient(to left, #000 50%, transparent 96%);
  mask-image: linear-gradient(to left, #000 50%, transparent 96%);
}

/* ── Shop laptop: átlátszó kivágat, maszk nélkül (v11.4) ── */
/* Kisebb, a gomb mellett feljebb; a teljes szélességű leírás alatt marad */
.zs-shop-card__art { width: 118px; right: -8px; bottom: -10px; }

/* ── Shop kártya: ajándék-sor (domain + tárhely) ── */
.zs-shop-card__gift {
  display: flex; align-items: center; gap: 7px;
  margin-top: 9px; font-size: 12.5px; font-weight: 800;
  color: #A9791F; position: relative; z-index: 1;
}
.zs-shop-card__gift i { color: #C99A32; font-size: 13px; }
.zs-shop-card__art img { -webkit-mask-image: none; mask-image: none;
  filter: drop-shadow(0 6px 10px rgba(40,70,50,.16)); }
.zs-shop-card__desc { max-width: 100%; text-wrap: pretty; }

/* ── Shop kártya: tömörebb, feljebb (v11.5) ── */
.zs-shop-card { min-height: 168px; padding-top: 16px; }
.zs-shop-card__price { margin-top: 5px; }
.zs-shop-card__feats { margin-top: 9px; }
.zs-shop-card__desc { margin-top: 8px; }
.zs-shop-card__btn { margin-top: 12px; }

/* ============================================================
   TALÁLATI OLDAL (kereses.html)
   ============================================================ */
.zs-results { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 26px; align-items: start; margin-top: 22px; }
.zs-results__head { margin-bottom: 16px; }
.zs-results__title { font-size: 24px; font-weight: 800; color: var(--ink); }
.zs-results__sub { font-size: 13px; color: var(--muted); margin-top: 3px; }
.zs-results__sub i { color: var(--orange); }
.zs-results__list { display: flex; flex-direction: column; gap: 12px; }
.zs-result { display: flex; align-items: center; gap: 14px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; box-shadow: var(--shadow); transition: transform .15s, box-shadow .15s; }
.zs-result:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.zs-result__icon { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 9px; background: var(--orange-soft); color: var(--orange); display: flex; align-items: center; justify-content: center; font-size: 17px; }
.zs-result__body { flex: 1; min-width: 0; }
.zs-result__title { font-size: 14px; font-weight: 800; color: var(--ink); }
.zs-result__meta { font-size: 12px; color: var(--muted); margin: 1px 0; }
.zs-result__loc { font-size: 11.5px; color: var(--muted); }
.zs-result__loc i { color: var(--teal); }
.zs-result__badge { flex-shrink: 0; }
.zs-noresult { text-align: center; padding: 50px 20px; color: var(--muted); }
.zs-noresult > i { font-size: 32px; color: var(--line); }
.zs-noresult__title { font-size: 16px; font-weight: 800; color: var(--ink); margin-top: 12px; }
.zs-noresult__text { font-size: 13px; margin-top: 4px; }
.zs-results__side { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 16px; }

/* Kiemelt szolgáltató sor a sidebarban */
.zs-prov-row { display: flex; align-items: center; gap: 11px; padding: 9px 0; border-top: 1px solid var(--line-light); }
.zs-prov-row:first-of-type { border-top: none; padding-top: 0; }
.zs-prov-row__logo { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 7px; background: var(--orange-soft); color: var(--orange); display: flex; align-items: center; justify-content: center; font-size: 15px; }
.zs-prov-row__body { flex: 1; min-width: 0; }
.zs-prov-row__name { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.zs-prov-row__cat { font-size: 11px; color: var(--muted); }
.zs-prov-row__rating { font-size: 12px; font-weight: 800; color: var(--ink); white-space: nowrap; }
.zs-prov-row__rating i { color: #f1bf2c; font-size: 11px; }

@media (max-width: 900px) {
  .zs-results { grid-template-columns: 1fr; }
  .zs-results__side { position: static; }
}
@media (max-width: 640px) {
  .zs-searchbar { order: 3; flex-basis: 100%; }
  .zs-locpick { display: flex !important; width: 150px; }
}

/* ── Deviza árfolyamok (bal sáv) ── */
.zs-fx__row { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border-top: 1px solid var(--line-light); }
.zs-fx__row:first-of-type { border-top: none; padding-top: 2px; }
.zs-fx__cur { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--ink); }
.zs-fx__flag { font-size: 15px; line-height: 1; }
.zs-fx__val { font-size: 14px; font-weight: 800; color: var(--ink); white-space: nowrap; }
.zs-fx__note { font-size: 10.5px; color: var(--muted); margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line-light); }

/* ── Shop kártya: reklám-stílus (v12) ── */
.zs-shop-card__label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: #C99A32; position: relative; z-index: 1;
}
.zs-shop-card__label i { font-size: 9px; color: #e0a93f; }
.zs-shop-card__heading {
  font-size: 21px; font-weight: 800; line-height: 1.2; color: var(--ink);
  margin: 9px 0 0; max-width: 60%; position: relative; z-index: 1;
}
/* Az ár ne legyen vékonyabb a cím többi részénél (strong alapból 700) */
.zs-shop-card__heading strong { font-weight: inherit; }
.zs-shop-card__desc { margin-top: 10px; }
.zs-shop-card__btn--gold {
  background: linear-gradient(135deg, #e2ab43 0%, #cd8526 100%);
  color: #fff; align-self: flex-start; text-align: left; max-width: 215px;
  line-height: 1.25; box-shadow: 0 4px 12px rgba(196,130,40,.28);
}
.zs-shop-card__btn--gold:hover { background: linear-gradient(135deg, #d79f37 0%, #bd7820 100%); }

.zs-shop-card__heading { max-width: 74%; }
.zs-shop-card__heading { font-size: 19px; max-width: 78%; }

/* ── Találati oldal: szűrő-sáv (típus + település) ── */
.zs-results__filters { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.zs-fchips { display: flex; gap: 8px; flex-wrap: wrap; }
.zs-fchip { font-size: 13.5px; font-weight: 600; color: var(--ink); background: #fff; border: 1px solid #e2e6df; padding: 8px 16px; border-radius: 999px; cursor: pointer; transition: .15s; }
.zs-fchip:hover { border-color: var(--orange); color: var(--orange); }
.zs-fchip.is-active { background: var(--orange); color: #fff; border-color: var(--orange); }
.zs-fselect {
  font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink);
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 9px 32px 9px 15px; cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%237a877c' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center;
}
.zs-fselect:focus { outline: none; border-color: var(--orange); }
@media (max-width: 560px) {
  .zs-results__filters { flex-direction: column; align-items: stretch; }
  .zs-fselect { width: 100%; }
}

/* ── Szolgáltatók böngésző (kategória-kártyák) ── */
.zs-catbrowse { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.zs-catcard { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 18px; box-shadow: var(--shadow); transition: transform .15s, box-shadow .15s, border-color .15s; display: flex; flex-direction: column; }
.zs-catcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--orange-soft); }
.zs-catcard__icon { width: 52px; height: 52px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 12px; }
.zs-catcard__name { font-size: 15px; font-weight: 800; color: var(--ink); }
.zs-catcard__count { font-size: 12px; color: var(--muted); margin-top: 2px; }
.zs-catcard__subs { font-size: 11.5px; color: var(--muted); margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--line-light); line-height: 1.5; }
@media (max-width: 980px) { .zs-catbrowse { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px) { .zs-catbrowse { grid-template-columns: 1fr 1fr; } }
@media (max-width: 440px) { .zs-catbrowse { grid-template-columns: 1fr; } }

/* ── Morzsamenü (univerzális) ── */
.zs-breadcrumb { font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 8px; padding: 16px 0 0; flex-wrap: wrap; }
.zs-breadcrumb a:hover { color: var(--orange); }
.zs-breadcrumb i { font-size: 9px; opacity: .7; }
.zs-breadcrumb span { color: var(--ink); font-weight: 600; }

/* ============================================================
   ZSEBINFO SHOP – prémium sötétzöld reklám (.zs-shopx)
   4 szolgáltatás-szegmens, arany akcentekkel
   ============================================================ */
.zs-shopx{position:relative;overflow:hidden;border-radius:14px;padding:22px 26px 24px;
  background:linear-gradient(135deg,#2c5239 0%,#214031 55%,#1a2c20 100%);
  border:1px solid rgba(243,200,60,.22);
  box-shadow:0 16px 44px rgba(26,44,32,.30)}
.zs-shopx::after{content:"";position:absolute;top:-70px;right:-60px;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,rgba(243,200,60,.20),rgba(243,200,60,0) 70%);pointer-events:none}
.zs-shopx>*{position:relative;z-index:1}
.zs-shopx__head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.zs-shopx__label{display:inline-flex;align-items:center;gap:8px;font:800 11.5px/1 'Inter',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#f3d268;
  background:rgba(243,200,60,.12);border:1px solid rgba(243,200,60,.28);padding:8px 14px;border-radius:999px}
.zs-shopx__label i{color:#f3d268}
.zs-shopx__btn{display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  background:linear-gradient(180deg,#f4cf52 0%,#e3b022 100%);color:#22321f;font:800 13px/1 'Inter',sans-serif;
  padding:13px 20px;border-radius:8px;transition:.18s;box-shadow:0 6px 18px rgba(227,176,34,.35)}
.zs-shopx__btn:hover{transform:translateY(-1px);box-shadow:0 9px 24px rgba(227,176,34,.45)}
.zs-shopx__grid{display:grid;grid-template-columns:repeat(4,1fr)}
.zs-shopx__item{padding:4px 22px;text-align:center}
.zs-shopx__item + .zs-shopx__item{border-left:1px solid rgba(255,255,255,.11)}
.zs-shopx__media{height:86px;border-radius:10px;overflow:hidden;margin:0 auto 13px;
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.09);display:flex;align-items:center;justify-content:center}
.zs-shopx__media img{width:100%;height:100%;object-fit:cover;display:block}
.zs-shopx__media--logo{background:linear-gradient(160deg,rgba(244,207,82,.18),rgba(244,207,82,.04));border-color:rgba(244,207,82,.24)}
.zs-shopx__media--logo img{object-fit:contain;padding:8px}
.zs-shopx__title{font:700 14.5px/1.32 'Inter',sans-serif;color:#fff;margin-bottom:5px}
.zs-shopx__sub{font:400 12.5px/1.5 'Inter',sans-serif;color:rgba(233,240,233,.62)}

/* Keskeny / sidebar – stacked, vízszintes finom vonalakkal */
.zs-shopx--stack{display:flex;flex-direction:column}
.zs-shopx--stack .zs-shopx__head{display:contents}
.zs-shopx--stack .zs-shopx__label{order:1;margin-bottom:16px}
.zs-shopx--stack .zs-shopx__grid{order:2;grid-template-columns:1fr}
.zs-shopx--stack .zs-shopx__btn{order:3;width:100%;justify-content:center;margin-top:18px}
.zs-shopx--stack .zs-shopx__item{text-align:left;display:flex;align-items:center;gap:14px;padding:14px 2px}
.zs-shopx--stack .zs-shopx__item + .zs-shopx__item{border-left:0;border-top:1px solid rgba(255,255,255,.11)}
.zs-shopx--stack .zs-shopx__media{margin:0;width:80px;height:58px;flex-shrink:0;border-radius:9px}
.zs-shopx--stack .zs-shopx__text{display:flex;flex-direction:column;gap:2px;min-width:0}
.zs-shopx--stack .zs-shopx__title{margin-bottom:2px}

/* Széles banner kis képernyőn → 2×2 */
@media(max-width:780px){
  .zs-shopx:not(.zs-shopx--stack) .zs-shopx__grid{grid-template-columns:1fr 1fr;gap:6px}
  .zs-shopx:not(.zs-shopx--stack) .zs-shopx__item{padding:16px 12px}
  .zs-shopx:not(.zs-shopx--stack) .zs-shopx__item:nth-child(3){border-left:0}
  .zs-shopx:not(.zs-shopx--stack) .zs-shopx__item:nth-child(n+3){border-top:1px solid rgba(255,255,255,.11)}
}

/* Csillagos értékelések eltávolítása mindenhonnan (user kérése) */
.zs-scard__rating,
.zs-prov-row__rating,
.zs-stars,
.zsp-rating,
.zsp-revsum,
.zsp-review__sub,
.zs-featsvc__row:has(.zs-stars){ display:none !important; }

/* Dekoratív csillag-ikonok elrejtése is (Shop felirat + "Kiemelt…" fejlécek előtt) */
.zs-shop-card__label i.fa-star,
.zs-bhead__title i.fa-star{ display:none; }

/* ZSEBINFO LOGO: MINDIG Sora marad — ne cseréld más betűre! */
.zs-logo__text{font-family:'Sora',sans-serif;letter-spacing:-.03em}
.zs-shop-card__label, .zs-topbar .zs-shop-pill { font-family: 'Sora', sans-serif; }

/* ============================================================
   Felesleges (dekoratív) ikonok elrejtése – ikon CSAK a menüben
   (2026-07-02, user kérése). MEGMARAD: menü (.zs-menubar),
   kereső-gomb, közösségi linkek, időjárás, szolgáltató-logók,
   ikon-csempék (.zs-itile), állás-ikonok – ezek tartalmi elemek.
   ============================================================ */
.zs-topbar__left i,
.zs-shop-pill i,
.zs-locpick i,
.zs-header__cta i,
.zs-portal .zs-bhead__title i,
.zs-ncard__meta i,
.zs-sidenews__meta i,
.zs-scard__loc i,
.zs-featsvc__row i,
.zs-town-link i,
.zs-footer__col ul li a i {
  display: none;
}

/* ============================================================
   Programajánló – 1 nagy kiemelt + jobb oldali lista
   (2026-07-02, referencia: magazin "DON'T MISS" elrendezés)
   ============================================================ */
.zs-progfeat { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); gap: 26px; align-items: stretch; }
.zs-progfeat__main {
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
  transition: box-shadow .15s, transform .15s;
}
.zs-progfeat__main:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.zs-progfeat__img { height: 232px; background-size: cover; background-position: center; position: relative; }
.zs-progfeat__img .zs-badge { position: absolute; left: 12px; bottom: 12px; }
.zs-progfeat__body { padding: 15px 17px 17px; }
.zs-progfeat__date { font-size: 12px; font-weight: 800; letter-spacing: .04em; color: var(--kultura); text-transform: uppercase; }
.zs-progfeat__title { font-size: 19px; font-weight: 800; color: var(--ink); line-height: 1.25; margin: 5px 0 6px; }
.zs-progfeat__meta { font-size: 12.5px; color: var(--muted); }
.zs-progfeat__desc { font-size: 13.5px; color: var(--muted); line-height: 1.55; margin-top: 10px; }
.zs-progfeat__list { display: flex; flex-direction: column; justify-content: space-between; gap: 12px; height: 100%; }
.zs-progrow { display: flex; gap: 13px; align-items: center; }
.zs-progrow__thumb { flex: 0 0 112px; width: 112px; height: 80px; border-radius: 6px; background-size: cover; background-position: center; position: relative; overflow: hidden; }
.zs-progrow__cat {
  position: absolute; left: 6px; bottom: 6px;
  background: var(--kultura); color: #fff;
  font-size: 9px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 4px;
}
.zs-progrow__body { min-width: 0; }
.zs-progrow__title { font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.3; transition: color .15s; }
.zs-progrow:hover .zs-progrow__title { color: var(--kultura); }
.zs-progrow__date  { font-size: 12px; color: var(--muted); margin-top: 5px; }
.zs-progrow__place { font-size: 12px; color: var(--muted); margin-top: 3px; }
@media (max-width: 640px) { .zs-progfeat { grid-template-columns: 1fr; } }

/* ============================================================
   Ingatlanok szekció (2026-07-02) – magazin elrendezés,
   Poros kék (#35647D). Referencia: "HOUSE DESIGN".
   ============================================================ */
/* A szekció-fejléc SIMA szöveges marad (letisztázott döntés) – NINCS színes háttér-blokk. */
.zs-ingsec__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.zs-ingcard { display: block; }
.zs-ingcard__img { height: 186px; background-size: cover; background-position: center; position: relative; border-radius: 4px; overflow: hidden; }
.zs-ingcard__tag { border-radius: 3px; }
.zs-ingcard__tag {
  position: absolute; left: 12px; bottom: 12px;
  background: var(--poroskek); color: #fff; font-size: 11px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; padding: 4px 10px; border-radius: 4px;
}
.zs-ingcard__title { font-size: 16px; font-weight: 700; color: var(--ink); line-height: 1.3; margin: 12px 0 6px; transition: color .15s; }
.zs-ingcard:hover .zs-ingcard__title { color: var(--poroskek); }
.zs-ingcard__meta { font-size: 13px; color: var(--muted); }
.zs-ingcard__price { color: var(--poroskek); font-weight: 800; white-space: nowrap; }
.zs-ingsec__nav { display: flex; gap: 8px; margin-top: 18px; }
.zs-ingsec__nav button {
  width: 34px; height: 34px; border: 1px solid var(--line); background: var(--card);
  border-radius: 6px; color: var(--muted); cursor: pointer; transition: border-color .15s, color .15s;
}
.zs-ingsec__nav button:hover { border-color: var(--poroskek); color: var(--poroskek); }
@media (max-width: 900px) { .zs-ingsec__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .zs-ingsec__grid { grid-template-columns: 1fr; } }

/* ============================================================
   Hirdetés-kategória rács (főoldali Hirdetések szekció, 2026-07-02)
   ============================================================ */
.zs-catgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.zs-cattile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 10px; text-align: center;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.zs-cattile:hover { border-color: var(--orange); box-shadow: var(--shadow); transform: translateY(-2px); }
.zs-cattile__icon {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--orange-soft); color: var(--orange-dark);
  display: flex; align-items: center; justify-content: center; font-size: 17px;
}
.zs-cattile__name { font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.25; }
@media (max-width: 900px) { .zs-catgrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .zs-catgrid { grid-template-columns: repeat(2, 1fr); } }
#zs-hirdetes-cats .zs-cattile__icon { background: rgba(53,100,125,.12); color: #35647D; }
#zs-hirdetes-cats .zs-cattile:hover { border-color: #35647D; }

/* Hirdetések böngésző – alkategória-chipsor (2026-07-02) */
.zsev-filters--sub { margin-top: -4px; }
.zsev-chip--sub { font-size: 12px; opacity: .92; }

/* Hirdetés-böngésző (2026-07-02):
   FŐkategória-sor – egy sorban, ne törjön (kisebb + ha kell, görgethető).
   ALkategória-sor – mehet sortöréssel (wrap, normál). */
#zsEvMain { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; padding-bottom: 3px; scrollbar-width: thin; }
#zsEvMain::-webkit-scrollbar { height: 5px; }
#zsEvMain::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
#zsEvMain .zsev-chip { flex: 0 0 auto; white-space: nowrap; padding: 6px 13px; font-size: 12.5px; }
#zsEvSub .zsev-chip { padding: 6px 13px; font-size: 12.5px; }

/* Főoldali Ingatlanok szekció – chip-sor térköz */
.zs-ingtabs { margin-bottom: 18px; }

/* ============================================================
   Ingatlan-oldal – poros kék akcentus (#35647D), a főoldali
   Ingatlanok szekcióhoz igazítva. Scope: .zs-ing-blue
   (a fejléc/menü/logó zöld marad; a hirdetesek/programok is).
   ============================================================ */
/* Accent-változók kékre az egész ingatlan-TARTALOMban (lista + adatlap).
   A fejléc/menü/logó a scope-on KÍVÜL van → zöld marad. A REAF arany kártya
   saját (nem --orange/--teal) színt használ → érintetlen. */
.zs-ing-blue {
  --orange: #2D6B38; --orange-dark: #225430; --orange-soft: #DDF0E2;
  --teal: #5a8a5f; --teal-dark: #487049; --teal-soft: #e8f1e4;
}
.zs-ing-blue .zsev-chip.is-active { background: #35647D; border-color: #35647D; color: #fff; }
.zs-ing-blue .zsev-chip:hover { border-color: #35647D; color: #35647D; }
.zs-ing-blue .zsev-chip.is-active:hover { color: #fff; }
.zs-ing-blue .zsev-card__cat { background: #35647D; }
.zs-ing-blue .zsev-card__price { color: #35647D; }
.zs-ing-blue .zsev-card__more { color: #35647D; }
.zs-ing-blue .zsev-card__more:hover { color: #274C60; }
.zs-ing-blue .zsev-card__price.is-free { color: #274C60; }
.zs-ing-blue .zs-breadcrumb a:hover { color: #35647D; }

/* ============================================================
   Kategória-színek – 2026-07-02
   ============================================================ */
/* Főoldali Ingatlanok szekció chipjei – poros kék aktív/hover */
.zs-ingtabs .zs-tab:hover { border-color: #35647D; color: #35647D; }
.zs-ingtabs .zs-tab.is-active { background: #35647D; color: #fff; border-color: #35647D; }

/* Menü: Ingatlanok = poros kék, Programok = terrakotta (aktív + hover) */

/* ============================================================
   Programok-oldal – terrakotta akcentus (#35647D), a főoldali
   Programajánló szekcióhoz igazítva. Scope: .zs-prog-terra
   (a fejléc/menü/logó zöld marad; a hirdetesek/ingatlan is).
   ============================================================ */
.zs-prog-terra {
  --orange: #2D6B38; --orange-dark: #225430; --orange-soft: #DDF0E2;
  --teal: #5a8a5f; --teal-dark: #487049; --teal-soft: #e8f1e4;
}
.zs-prog-terra .zsev-chip.is-active { background: #35647D; border-color: #35647D; color: #fff; }
.zs-prog-terra .zsev-chip:hover { border-color: #35647D; color: #35647D; }
.zs-prog-terra .zsev-chip.is-active:hover { color: #fff; }
.zs-prog-terra .zsev-card__cat { background: #35647D; }
.zs-prog-terra .zsev-card__price { color: #35647D; }
.zs-prog-terra .zsev-card__price.is-free { color: #274C60; }
.zs-prog-terra .zsev-card__more { color: #35647D; }
.zs-prog-terra .zsev-card__more:hover { color: #274C60; }
.zs-prog-terra .zsev-feat__badge { background: #35647D; }
.zs-prog-terra .zsev-feat__cat { color: #35647D; }
.zs-prog-terra .zs-breadcrumb a:hover { color: #35647D; }

/* ============================================================
   Gyermeksarok – ARANY (Világos arany #EEC896 badge/vonal +
   olvasható #b8892f szöveg-akcent). Scope: .zs-gyerek-gold
   ============================================================ */
.zs-gyerek-gold {
  --orange: #2D6B38; --orange-dark: #225430; --orange-soft: #DDF0E2;
  --teal: #5a8a5f; --teal-dark: #487049; --teal-soft: #e8f1e4;
}
.zs-gyerek-gold .zsev-card__cat,
.zs-gyerek-gold .zsev-feat__badge { background: #35647D; color: #fff; }
.zs-gyerek-gold .zsev-card__price { color: #274C60; }
.zs-gyerek-gold .zsev-card__price.is-free { color: #274C60; }
.zs-gyerek-gold .zsev-card__more { color: #35647D; }
.zs-gyerek-gold .zsev-card__more:hover { color: #274C60; }
.zs-gyerek-gold .zsev-feat__cat { color: #35647D; }
.zs-gyerek-gold .zsev-chip.is-active { background: #35647D; color: #fff; border-color: #35647D; }
.zs-gyerek-gold .zsev-chip:hover { border-color: #35647D; color: #274C60; }
.zs-gyerek-gold .zs-breadcrumb a:hover { color: #35647D; }
/* Kategória-kártya ikonok egységes bronz (a szivárvány helyett) */
.zs-gyerek-gold .zs-catcard__icon { background: #DCE9ED; color: #35647D; }

/* Menü: Gyermeksarok = bronz (aktív + hover) */

/* ============================================================
   Szolgáltatói adatlap – havi naptár + térkép (jobb sáv, 2026-07-02)
   ============================================================ */
.zs-cal__head { text-align: center; font-weight: 800; font-size: 13.5px; color: var(--ink); margin: 2px 0 10px; }
.zs-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.zs-cal__dow { text-align: center; font-size: 10.5px; font-weight: 700; color: var(--muted); padding-bottom: 5px; text-transform: uppercase; }
.zs-cal__day { text-align: center; font-size: 12px; padding: 6px 0; border-radius: 6px; color: var(--ink); }
.zs-cal__day--empty { visibility: hidden; }
.zs-cal__day--we { color: var(--muted); }
.zs-cal__day--today { background: var(--orange); color: #fff; font-weight: 800; }
.zs-map-embed { width: 100%; height: 190px; border: 0; border-radius: 8px; display: block; }
.zs-map-link { display: inline-block; margin-top: 10px; font-size: 12.5px; font-weight: 700; color: var(--teal); }
.zs-map-link:hover { color: var(--orange); }

/* ============================================================
   Szolgáltatói kategóriaoldal – blokkok vizuális elkülönítése
   (2026-07-06): felváltva színes panel / nyitott + erős fejléc.
   ============================================================ */
.zs-catblock { margin-top: 30px; }
.zs-catblock--cream, .zs-catblock--paper { padding: 20px 22px 24px; border-radius: 12px; }
/* 2026-08-15: a két eltérő krém/papír árnyalat helyett mindkét szekció FEHÉR
   kártya lett – a mélyebb papírvásznon így maguktól kiemelkednek. */
.zs-catblock--cream { background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.zs-catblock--paper { background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.zs-catblock .zs-bhead { margin: 0 0 16px; padding-bottom: 11px; border-bottom: 1px solid rgba(40,60,45,.10); }
.zs-catblock .zs-bhead__title { font-size: 16px; }

/* ============================================================
   Kiemelt szolgáltató – magas, csalogató kártya (2026-07-06)
   cover + kiemelt-partner badge + teaser + interjú-sáv (hover)
   ============================================================ */
.zs-featsvc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.zs-featsvc {
  display: flex; flex-direction: column; background: #fff; position: relative;
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  box-shadow: var(--shadow); transition: box-shadow .15s, transform .15s;
}
.zs-featsvc__main { position: absolute; inset: 0; z-index: 1; }   /* stretched link – az egész kártya kattintható */
.zs-featsvc__contact a { position: relative; z-index: 2; }        /* tel/email a stretched link fölött kattintható */
.zs-featsvc:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.zs-featsvc__cover { height: 140px; background-size: cover; background-position: center; position: relative; }
.zs-featsvc__badge {
  position: absolute; top: 8px; left: 8px; background: #C99A32; color: #fff;
  font-size: 9.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 4px;
}
.zs-featsvc__logo {
  width: 54px; height: 54px; border-radius: 14px; background: #fff;
  box-shadow: 0 2px 8px rgba(40,60,45,.16); margin: -27px auto 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: var(--orange); position: relative; z-index: 1;
}
.zs-featsvc__body { padding: 8px 14px 14px; text-align: center; flex: 1; display: flex; flex-direction: column; }
.zs-featsvc__name { font-weight: 800; font-size: 15px; color: var(--ink); margin-top: 8px; }
.zs-featsvc__cat { font-size: 12px; color: var(--muted); margin-top: 2px; }
.zs-featsvc__contact { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.zs-featsvc__contact > * { color: var(--muted); display: inline-flex; align-items: center; gap: 7px; justify-content: center; }
.zs-featsvc__contact a { transition: color .15s; }
.zs-featsvc__contact a:hover { color: var(--orange); }
.zs-featsvc__contact i { color: var(--orange); width: 13px; text-align: center; }
.zs-featsvc__interview {
  background: #F5E9C8; color: #A9791F;
  padding: 11px 14px; font-size: 12.5px; font-weight: 800;
  text-align: center; display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: background .15s, color .15s;
}
.zs-featsvc:hover .zs-featsvc__interview { background: #C99A32; color: #fff; }
@media (max-width: 900px) { .zs-featsvc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .zs-featsvc-grid { grid-template-columns: 1fr; } }

/* Űrlap szekció-fejlécek: a szivárvány-akcentus helyett egységes
   kategória-szín (kategória-szín elv) */
.zs-ing-blue .zsr-sec { --zsr-accent: #35647D; --zsr-tint: #DCE9ED; }
.zs-svc-blue .zsr-sec { --zsr-accent: #35647D; --zsr-tint: #DCE9ED; }

/* ============================================================
   Szolgáltatók = petrol kategória-szín (2026-07-06).
   Külön árnyalat az ingatlan poros kékjétől (#35647D).
   Az oldal-tartalom petrol akcentust kap; a KIEMELT partner kártyák
   viszont terrakotta „prémium" kiemelést (badge + interjú + ikonok).
   ============================================================ */
.zs-svc-blue {
  --orange: #2D6B38; --orange-dark: #225430; --orange-soft: #DDF0E2;
  --teal: #5a8a5f; --teal-dark: #487049; --teal-soft: #e8f1e4;
}
/* Kiemelt kártya – terrakotta ikonok/akcentus (a kék felett) */
.zs-featsvc__logo { color: #35647D; }
.zs-featsvc__contact i { color: #35647D; }
.zs-featsvc__contact a:hover { color: #274C60; }

/* Szolgáltató-böngésző kategória-kártyák: egységes petrol ikon
   (a gyermeksarok bronz-egységesítés mintájára) */
.zs-svc-blue .zs-catcard__icon { background: #DCE9ED; color: #35647D; }

/* Menü: Szolgáltatók = petrol (aktív + hover) */

/* ============================================================
   Menü-színek 2. kör (2026-07-06): Egészségügy = mély korall,
   Sport = moha-olíva, Települések = szilva. Hírek = zöld (alap).
   Scope-minta ugyanaz, mint a többi kategóriánál.
   ============================================================ */
/* Egészségügy = mély korall #35647D */
.zs-eu-korall {
  --orange: #2D6B38; --orange-dark: #225430; --orange-soft: #DDF0E2;
  --teal: #5a8a5f; --teal-dark: #487049; --teal-soft: #e8f1e4;
}
.zs-eu-korall .zs-catcard__icon { background: #DCE9ED; color: #35647D; }
.zs-eu-korall .zsev-card__cat { background: #35647D; }
.zs-eu-korall .zsev-card__price.is-free { color: #274C60; }

/* Sport = moha-olíva #35647D */
.zs-sport-moha {
  --orange: #2D6B38; --orange-dark: #225430; --orange-soft: #DDF0E2;
  --teal: #5a8a5f; --teal-dark: #487049; --teal-soft: #e8f1e4;
}
.zs-sport-moha .zs-catcard__icon { background: #DCE9ED; color: #35647D; }
.zs-sport-moha .zsev-card__cat { background: #35647D; }
.zs-sport-moha .zsev-card__price.is-free { color: #274C60; }

/* Települések = szilva #35647D */
.zs-tel-szilva {
  --orange: #2D6B38; --orange-dark: #225430; --orange-soft: #DDF0E2;
  --teal: #5a8a5f; --teal-dark: #487049; --teal-soft: #e8f1e4;
}
.zs-tel-szilva .zs-catcard__icon { background: #DCE9ED; color: #35647D; }
.zs-tel-szilva .zsev-card__cat { background: #35647D; }
.zs-tel-szilva .zsev-card__price.is-free { color: #274C60; }

/* ── Shop kártya: halvány palakék háttér (2026-07-06, user palettája) ── */
.zs-shop-card { background: #E4EAEF; border-color: #CBD6D2; }
.zs-shop-card__label { color: #A9791F; }
.zs-shop-card__heading { color: #2E3A30; }
.zs-shop-card__desc { color: #475148; }
.zs-shop-card__gift, .zs-shop-card__gift i { color: #A9791F; }

/* ── Shop kártya: GRAFIKUS reklám-megjelenés (2026-07-06) ── */
.zs-shop-card { background: linear-gradient(160deg, #EFF3F1, #E4EAEF 55%, #D9E2DE); }
.zs-shop-card::before {
  content: ""; position: absolute; width: 230px; height: 230px; border-radius: 50%;
  right: -85px; top: -105px;
  background: radial-gradient(circle at 40% 40%, rgba(78,107,116,.22), rgba(78,107,116,0) 72%);
}
.zs-shop-card::after {
  content: ""; position: absolute; width: 200px; height: 200px; border-radius: 50%;
  left: -75px; bottom: -75px;
  background: radial-gradient(circle at 55% 45%, rgba(179,150,77,.20), rgba(179,150,77,0) 72%);
}
.zs-shop-card__heading strong { color: #4D6A82; }
.zs-shop-card__gift {
  display: inline-flex; align-self: flex-start;
  background: #F8F3E4; border: 1px dashed #C3A55B; border-radius: 999px;
  padding: 7px 13px 7px 11px; margin-top: 11px;
}

/* ── Shop kártya: egységes formanyelv + nagy laptop (2026-07-06) ── */
.zs-shop-card__btn { border-radius: 12px; padding: 13px 28px; font-size: 14.5px; }
.zs-shop-card__gift { border-radius: 12px; }
.zs-shop-card__art { width: 190px; right: -18px; bottom: -28px; }
.zs-shop-card__art img { filter: drop-shadow(0 14px 22px rgba(40, 60, 80, .28)); }

/* ── Shop kártya: laptop alja az ajándék-sornál (2026-07-06) ── */
.zs-shop-card__art { width: 170px; right: -14px; bottom: 78px; }
.zs-shop-card__desc { max-width: 66%; }

/* ── Időjárás: páratartalom/szél/csapadék a hőfok mellett (2026-07-06) ── */
.zs-weather__mini { margin-left: auto; display: flex; flex-direction: column; gap: 5px; }
.zs-wmini { display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.zs-wmini i { color: var(--teal); font-size: 11px; width: 13px; text-align: center; }
.zs-wmini b { font-size: 11.5px; font-weight: 800; color: var(--ink); }
.zs-weather__forecast { margin-top: 12px; border-top: 1px solid var(--line-light); }

/* Hi/lo a hőfok MELLETT, oszlopban */
.zs-weather__hilo--col { flex-direction: column; gap: 3px; }

/* Lágy függőleges elválasztó a hőfok-blokk és a mini-statok között */
.zs-weather__mini { border-left: 1px solid var(--line-light); padding-left: 14px; }
.zs-weather__hilo--col span { white-space: nowrap; }

/* ── Főoldali Kiemelt szolgáltatók: futó szalag (2026-07-06) ── */
.zs-featrun { overflow: hidden; position: relative; }
.zs-featrun__track { display: flex; width: max-content; animation: zsFeatRun 40s linear infinite; }
.zs-featrun__group { display: flex; gap: 16px; padding-right: 16px; }
.zs-featrun .zs-featsvc { flex: 0 0 208px; }
.zs-featrun:hover .zs-featrun__track { animation-play-state: paused; }
@keyframes zsFeatRun { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── Deviza: egysoros (EUR · USD egymás mellett, 2026-07-06) ── */
.zs-fx__row--single { justify-content: space-between; gap: 10px; }
.zs-fx__row--single .zs-fx__cur { white-space: nowrap; }
.zs-fx__row--single .zs-fx__val { font-size: 13.5px; }

/* ── Főoldal: sávos szekció-hátterek (2026-07-07) – a kategória-oldal
   krém/papír paneljei váltakozva; a hasáb gap-je adja a térközt ── */
.zs-portal__center .zs-catblock { margin-top: 0; }

/* ── Deviza kártya: 4 deviza egy sorban + Tovább (2026-07-07) ── */
.zs-fx__row--single { border-top: none; padding: 4px 0 0; gap: 5px; }
.zs-fx__row--single .zs-fx__cur { font-size: 10px; gap: 3px; }
.zs-fx__row--single .zs-fx__val { font-size: 11px; }
.zs-fx__row--single .zs-fx__flag { font-size: 11px; }
.zs-fx__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--line-light); }
.zs-fx__foot .zs-fx__note { margin-top: 0; padding-top: 0; border-top: none; }
.zs-fx__more { font-size: 11.5px; font-weight: 700; color: var(--orange); white-space: nowrap; }
.zs-fx__more:hover { color: var(--orange-dark); }

/* ── Deviza-oldal táblázat (deviza.html, 2026-07-07) ── */
.zsfx-tablecard { margin-top: 18px; padding: 6px 20px; }
.zsfx-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.zsfx-table th { text-align: left; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 13px 8px 9px; border-bottom: 1px solid var(--line-light); }
.zsfx-table th.zsfx-num, .zsfx-table td.zsfx-num { text-align: right; }
.zsfx-table td { padding: 11px 8px; border-bottom: 1px solid var(--line-light); }
.zsfx-table tr:last-child td { border-bottom: none; }
.zsfx-code { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; color: var(--ink); white-space: nowrap; }
.zsfx-flag { font-size: 16px; line-height: 1; }
.zsfx-name { color: var(--muted); font-size: 13px; }
.zsfx-num { font-weight: 800; color: var(--ink); white-space: nowrap; }

/* Deviza-oldal: két hasáb */
.zsfx-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; align-items: start; }
@media (max-width: 760px) { .zsfx-cols { grid-template-columns: 1fr; } }

/* ── Kiemelt partner kártya: REAF arany márka-változat (2026-07-07) ── */
.zs-featsvc--reaf .zs-featsvc__badge { background: #C99A32; }
.zs-featsvc--reaf .zs-featsvc__logo { color: #A9791F; }
.zs-featsvc--reaf .zs-featsvc__contact i { color: #A9791F; }
.zs-featsvc--reaf .zs-featsvc__contact a:hover { color: #7A5A16; }

/* ── Település-címke a hírkártyákon (2026-07-07) ── */
.zs-towntag {
  position: absolute; z-index: 1;
  background: rgba(30, 40, 32, .72); color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.zs-sidenews__img .zs-towntag { right: 10px; top: 10px; }
.zs-ncard__img .zs-towntag { right: 8px; bottom: 8px; }
.zs-feat .zs-towntag { right: 14px; top: 14px; }

/* ── Gyermeksarok: bronz kiemelt-kártyák + zsúr-doboz (2026-07-07) ── */
.zs-partybox__text { font-size: 12.5px; color: var(--muted); margin: 2px 0 8px; line-height: 1.45; }
.zs-partyrow { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; padding: 7px 0; border-top: 1px solid var(--line-light); }
.zs-partyrow b { color: var(--ink); font-weight: 800; white-space: nowrap; }
.zs-partyrow span { color: var(--muted); text-align: right; }
.zs-partybox__btn { display: block; text-align: center; background: #C99A32; color: #fff; border-radius: 8px; padding: 10px; font-weight: 700; font-size: 13px; margin-top: 12px; transition: background .15s; }
.zs-partybox__btn:hover { background: #A9791F; }

/* ── Gyermeksarok: erősebb tagolás (2026-07-07, user: „egybefolyik") ── */
.zs-gyerek-gold .zs-results__main > .zs-bhead {
  border-bottom: 1px solid var(--line-light);
  padding-bottom: 10px; margin-bottom: 16px;
}
.zs-gyerek-gold .zs-agechips { margin-bottom: 30px; }
.zs-gyerek-gold .zsr-pagehead { margin-bottom: 24px !important; }

/* ── Egységes segélyhívó-sáv (gyermeksarok hasznos infók, 2026-07-07) ── */
.zs-emerg112 {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: #fbeae8; border: 1px solid #f2d3cf; border-radius: 10px;
  padding: 12px 16px; margin-top: 4px;
  font-size: 14px; font-weight: 700; color: #9c3428;
  transition: background .15s;
}
.zs-emerg112:hover { background: #f7ddda; }
.zs-emerg112 i { color: #c0392b; font-size: 15px; }
.zs-emerg112 b { font-size: 19px; font-weight: 800; color: #c0392b; letter-spacing: .04em; }

/* ── Fiók-rendszer: státusz-badge-ek, beküldés-sorok, admin (2026-07-07) ── */
.zs-status { display: inline-block; font-size: 10.5px; font-weight: 800; padding: 3px 9px; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.zs-status--live { background: #e4f3e7; color: #2e7d4f; }
.zs-status--pending { background: #F5E9C8; color: #A9791F; }
.zs-status--rejected { background: #fbeae8; color: #c0392b; }
.zs-status--draft { background: #ececec; color: #6d6d6d; }

.zs-subrow { display: flex; align-items: center; gap: 13px; padding: 13px 0; border-top: 1px solid var(--line-light); }
.zs-subrow:first-child { border-top: none; }
.zs-subrow__icon { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 9px; background: #DCE9ED; color: #35647D; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.zs-subrow__body { flex: 1; min-width: 0; }
.zs-subrow__title { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.zs-subrow__meta { font-size: 11.5px; color: var(--muted); margin-top: 2px; }

.zs-admbtns { display: flex; gap: 7px; flex-shrink: 0; }
.zs-admbtn { border: none; border-radius: 8px; padding: 8px 13px; font-size: 12px; font-weight: 700; cursor: pointer; transition: background .15s; }
.zs-admbtn--ok { background: #2e7d4f; color: #fff; }
.zs-admbtn--ok:hover { background: #256841; }
.zs-admbtn--no { background: #fbeae8; color: #c0392b; }
.zs-admbtn--no:hover { background: #f7ddda; }

.zs-authgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; max-width: 900px; }
@media (max-width: 760px) { .zs-authgrid { grid-template-columns: 1fr; } }

.zs-steprow { font-size: 12.5px; color: var(--muted); line-height: 1.5; padding: 7px 0; border-top: 1px solid var(--line-light); }
.zs-steprow:first-of-type { border-top: none; }
.zs-steprow b { color: #35647D; margin-right: 4px; }

/* ── Regisztráció: lenyíló beküldői blokkok ── */
.zs-regextra { margin: 10px 0 4px 24px; padding: 14px; background: #f2f5f7; border: 1px solid #dde6ec; border-radius: 10px; }

/* ── Cégregisztráció: Zsebinfo Shop igény-felmérő blokk (2026-07-08) ── */
.zs-svc-blue .zsr-sec--shop, .zsr-sec--shop { --zsr-accent: #F07820; --zsr-tint: #FEE8D0; }
.zs-needchips { display: flex; flex-wrap: wrap; gap: 9px; }
.zs-needchip { position: relative; }
.zs-needchip input { position: absolute; opacity: 0; pointer-events: none; }
.zs-needchip span {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px; border: 1.5px solid #f5c090; border-radius: 999px;
  background: #fff; font-size: 13px; font-weight: 700; color: #F07820;
  cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.zs-needchip span:hover { border-color: #d4661a; }
.zs-needchip input:checked + span { background: #d4661a; border-color: #d4661a; color: #fff; }
.zs-needchip input:checked + span i { color: #fff; }
.zs-needchip span i { color: #d4661a; font-size: 12px; }

/* Igény-felmérő: online/print csoport-címkék */
.zs-needgroup__label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #F07820; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.zs-needgroup__label i { font-size: 11px; color: #d4661a; }

/* ── Shop lead-blokk: SÚLYOSABB megjelenés (2026-07-08, user: „súlytalan") ── */
.zsr-sec--shop { border: 2px solid #d4661a; box-shadow: 0 12px 30px rgba(240, 120, 32, .16); }
.zsr-sec--shop .zsr-sec__head { background: linear-gradient(135deg, #f5a55a, #F07820); padding: 16px 20px; }
.zsr-sec--shop .zsr-sec__head .zsr-sec__title { color: #fff; font-size: 16.5px; }
.zsr-sec--shop .zsr-sec__icon { background: rgba(255, 255, 255, .22); color: #fff; }
.zsr-sec--shop .zsr-sec__body { background: #fff8f3; }
.zsr-sec--shop .zs-needgroup__label { font-size: 12px; color: #a03b0d; }
.zsr-sec--shop .zs-needchip span {
  border-width: 2px; border-color: #f0a870; padding: 11px 18px;
  font-size: 13.5px; color: #a03b0d;
}
.zsr-sec--shop .zs-needchip span:hover { border-color: #F07820; }
.zsr-sec--shop .zs-needchip input:checked + span {
  background: #F07820; border-color: #F07820; color: #fff;
  box-shadow: 0 5px 12px rgba(240, 120, 32, .35);
}
.zs-needgift {
  display: flex; align-items: flex-start; gap: 11px;
  background: #FEE8D0; border: 1.5px dashed #d4661a; border-radius: 10px;
  padding: 13px 15px; margin-top: 16px;
  font-size: 12.5px; color: #a03b0d; line-height: 1.5;
}
.zs-needgift i { color: #F07820; font-size: 16px; margin-top: 1px; }
.zs-needgift b { color: #a03b0d; }

/* ── Shop lead-blokk: weboldal-akció sáv (2026-07-08) ── */
.zs-needpromo {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: linear-gradient(135deg, #F07820, #a03b0d);
  color: #fff; border-radius: 10px; padding: 13px 16px; margin-bottom: 18px;
  box-shadow: 0 6px 16px rgba(208, 85, 14, .28);
}
.zs-needpromo__tag {
  background: #fff; color: #a03b0d; font-weight: 800; font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .07em; padding: 4px 10px; border-radius: 999px;
}
.zs-needpromo__text { font-size: 13.5px; font-weight: 700; }
.zs-needpromo__text s { opacity: .75; font-weight: 600; }
.zs-needpromo__text b { font-size: 17px; font-weight: 800; margin-left: 2px; }

/* ── Shop lead-blokk v3: reklám-hero bannerrel (2026-07-08) ── */
.zsr-sec--shop { overflow: hidden; }
.zs-shopbanner {
  position: relative; display: flex; align-items: center; gap: 20px;
  background: linear-gradient(140deg, #d4661a, #d4661a 72%);
  padding: 26px 28px 24px; overflow: hidden;
}
.zs-shopbanner::after {
  content: ""; position: absolute; width: 320px; height: 320px; border-radius: 50%;
  right: -60px; bottom: -140px;
  background: radial-gradient(circle, rgba(255, 255, 255, .20), rgba(232, 134, 46, 0) 70%);
}
.zs-shopbanner__copy { position: relative; z-index: 1; min-width: 0; }
.zs-shopbanner__label {
  display: flex; align-items: center; gap: 7px;
  color: #F07820; font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .08em;
}
.zs-shopbanner__label i { font-size: 10px; }
.zs-shopbanner__title { color: #fff; font-size: 24px; font-weight: 800; margin: 9px 0 5px; letter-spacing: -.01em; }
.zs-shopbanner__sub { color: rgba(255, 255, 255, .72); font-size: 13px; line-height: 1.5; max-width: 400px; margin: 0; }
.zs-shopbanner__price { margin-top: 15px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.zs-shopbanner__price s { color: rgba(255, 255, 255, .5); font-size: 15px; font-weight: 600; }
.zs-shopbanner__price b { color: #F07820; font-size: 36px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.zs-shopbanner__off {
  background: #F07820; color: #fff; font-size: 12.5px; font-weight: 800;
  padding: 4px 11px; border-radius: 999px; align-self: center;
}
.zs-shopbanner__art {
  width: 250px; max-width: 38%; margin-left: auto; position: relative; z-index: 1;
  filter: drop-shadow(0 16px 26px rgba(0, 0, 0, .45));
}
@media (max-width: 700px) {
  .zs-shopbanner { flex-direction: column; align-items: flex-start; }
  .zs-shopbanner__art { max-width: 60%; margin: 6px auto 0; }
}

/* ── Shop lead-blokk: olvashatóság (2026-07-08, user: „halvány") ── */
.zsr-sec--shop .zs-needgroup__label { color: #7a2e0e; }
.zsr-sec--shop .zs-needgroup__label i { color: #F07820; }
.zsr-sec--shop .zs-needchip span { color: #7a2e0e; border-color: #f0a070; }
.zsr-sec--shop .zsr-field label { color: #2e3a30; }

/* ── Űrlap-oldalak jobb sávja: elkülönülő panel (2026-07-08, user: „egybeolvad") ── */
.zsr-aside {
  background: #f0f4f7;
  border: 1px solid #dbe4ea;
  border-radius: 14px;
  padding: 16px;
}
.zsr-aside .zsr-card { box-shadow: none; }

/* ── Shop lead-blokk: visszafogott chipek + finom vonalak (2026-07-08) ── */
.zsr-sec--shop .zs-needgroup__label {
  border-bottom: 1px solid #FEE8D0;
  padding-bottom: 8px; margin-bottom: 12px;
}
.zsr-sec--shop .zs-needchip span {
  border: 1px solid #f5c090;
  padding: 8px 15px; font-size: 12.5px; font-weight: 600;
  color: #7a3510; background: #fff;
}
.zsr-sec--shop .zs-needchip span:hover { border-color: #d4661a; color: #5c220a; }
.zsr-sec--shop .zs-needchip span i { font-size: 11px; }
.zsr-sec--shop .zs-needchip input:checked + span {
  background: #d4661a; border-color: #d4661a; color: #fff;
  font-weight: 700; box-shadow: none;
}
.zsr-sec--shop .zsr-sec__body > .zsr-field {
  border-top: 1px solid #FEE8D0;
  padding-top: 16px; margin-top: 18px;
}

/* ── Űrlap jobb sáv v2: egy külső körvonal, belül hajszálvonalak (2026-07-08) ── */
.zsr-aside {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 2px 20px;
  gap: 0;
}
.zsr-aside .zsr-card {
  background: none; border: none; box-shadow: none; border-radius: 0;
  padding: 18px 0;
}
.zsr-aside .zsr-card + .zsr-card { border-top: 1px solid var(--line-light); }


/* ── Fejléc-CTA és Shop-pill: PETROLKÉK (2026-08-15) ──
   Szerepelosztás: a petrol viszi a felületet (nav, gombok), az arany pedig
   KIZÁRÓLAG a prémium/fizetős tartalmat jelöli (partner-badge, partnerblokk).
   Így az aranynak egyetlen jelentése van. Ráadásul petrol+fehér = 6,42:1
   kontraszt a korábbi arany+fehér 2,58:1 helyett. */
.zs-header__cta { background: var(--orange); color: #fff; }
.zs-header__cta:hover { background: var(--orange-dark); color: #fff; }
.zs-header__cta i { color: #fff; }
.zs-topbar .zs-shop-pill { background: var(--orange); color: #fff; }
.zs-topbar .zs-shop-pill:hover { background: var(--orange-dark); }
.zs-topbar .zs-shop-pill i { color: #fff; }

/* ── Kereső: „Hol?" / „Mit?" dőlt placeholderek (2026-07-08) ── */
.zs-locpick input::placeholder,
.zs-search input::placeholder { font-style: italic; }

/* ── Fejléc-finomítás (2026-07-08): sötét topbar + középre zárt kereső + pirula CTA ── */
.zs-searchbar { justify-content: center; }
.zs-locpick { flex: 0 0 auto; }
.zs-search { flex: 0 1 420px; }

.zs-header__cta { border-radius: 999px; }

/* ── Topbar: bejelentkezés-ikon a Shop-pill helyén (2026-07-08) ── */
.zs-login-btn {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--orange); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12.5px; transition: background .15s;
}
.zs-login-btn:hover { background: var(--orange-dark); color: #fff; }

/* 2026-08-15: a közösségi ikonok átkerültek a fejléc-sorból a topbarba,
   a belépés-ikon elé. A .zs-header__social szabályok törölve (nincs elemük).
   Szorosabb csoport-térköz, és egy hajszálnyi levegő a login-gomb előtt,
   hogy a négy ikon egy egységnek látsszon, ne öt egyenrangú elemnek. */
.zs-topbar__right { gap: 13px; }
.zs-topbar__right .zs-login-btn { margin-left: 14px; }

/* ── Kereső: Hol? + Mit? EGY kapszulában, hajszálvonallal (2026-07-08) ── */
.zs-searchunit {
  display: flex; align-items: center;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  height: 50px; flex: 0 1 560px; min-width: 0; overflow: hidden;
}
.zs-searchunit .zs-locpick {
  background: none; border: none; border-radius: 0; height: 100%;
  flex: 0 0 170px; border-right: 1px solid var(--line-light);
}
.zs-searchunit .zs-search {
  background: none; border: none; border-radius: 0; height: 100%;
  flex: 1;
}

/* ── Kereső: középre zárt, egyforma vékony placeholderek (2026-07-08) ── */
.zs-locpick input { font-weight: 400; text-align: center; }
.zs-search input { text-align: center; }


/* ── Kereső-kapszula v2: Mit? elöl, Hol? hátul, gomb a végén (2026-07-08) ── */
.zs-searchunit .zs-search { border-right: 1px solid var(--line-light); padding: 0 14px 0 20px; }
.zs-searchunit .zs-locpick { border-right: none; flex: 0 0 190px; }
.zs-searchunit > button {
  flex-shrink: 0; background: var(--orange); color: #fff;
  width: 38px; height: 38px; border-radius: 50%; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 6px 0 0;
  transition: background .15s;
}
.zs-searchunit > button:hover { background: var(--orange-dark); }
.zs-locpick input::placeholder, .zs-search input::placeholder { color: var(--muted); font-weight: 400; font-style: italic; }

/* Kereső: hosszabb placeholderekhez szélesebb kapszula/mezők */
.zs-searchunit { flex: 0 1 650px; }
.zs-searchunit .zs-locpick { flex: 0 0 235px; }

/* ── Zsebinfo Shop: kép-banner a CSS-kártya helyén (2026-07-08) ── */
.zs-shopimg { display: block; width: 100%; max-width: 460px; margin: 0 auto; }
.zs-shopimg img {
  display: block; width: 100%; border-radius: 12px;
  box-shadow: var(--shadow-lg);
  transition: transform .2s;
}
.zs-shopimg:hover img { transform: translateY(-2px); }

/* ── Település-lenyíló panel (2026-07-09) ── */
.zs-towndrop {
  position: absolute; display: none; z-index: 60;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow-lg); padding: 6px;
  max-height: 330px; overflow-y: auto;
}
.zs-towndrop__head {
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); padding: 8px 10px 7px;
  border-bottom: 1px solid var(--line-light); margin-bottom: 4px;
}
.zs-towndrop__item {
  display: flex; width: 100%; align-items: center; gap: 9px;
  padding: 9px 10px; border: none; background: none; cursor: pointer; text-align: left;
  font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink);
  border-radius: 8px; transition: background .12s;
}
.zs-towndrop__item:hover { background: var(--orange-soft); color: var(--orange-dark); }
.zs-towndrop__item i { color: var(--orange); font-size: 12px; }

/* ── Kereső: rövid, lebegő elválasztó a mezők közt (2026-07-09) ── */
.zs-searchunit .zs-search { border-right: none; position: relative; }
.zs-searchunit .zs-search::after {
  content: ""; position: absolute; right: 0; top: 50%;
  transform: translateY(-50%);
  width: 1px; height: 22px; background: var(--line);
}

/* ═══ AdSense hirdetés-helyek (élesben az .zs-adslot__box helyére kerül az ins.adsbygoogle) ═══ */
.zs-adslot { margin: 28px 0; text-align: center; }
.zs-adslot__label {
  display: block; font-size: 10px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 6px;
}
.zs-adslot__box {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #fbfaf5; min-height: 280px;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 12.5px; line-height: 1.5; padding: 12px;
}
.zs-adslot--side { margin: 0; }
.zs-adslot--side .zs-adslot__box { min-height: 250px; }
.zs-adslot--end .zs-adslot__box { min-height: 200px; }

/* Egységes szűrő-chipek: a globális gomb-reset (.zs-wrap button{border:none})
   elnyelte a chip-keretet – itt visszaállítjuk a hairline-t minden chip-gombra */
.zs-wrap button.zsev-chip, .zs-wrap button.zs-tab, .zs-wrap button.zs-fchip { border: 1px solid #e2e6df; }
.zs-wrap button.zsev-chip:hover, .zs-wrap button.zs-tab:hover, .zs-wrap button.zs-fchip:hover { border-color: var(--orange); }
.zs-wrap button.zsev-chip.is-active, .zs-wrap button.zs-tab.is-active, .zs-wrap button.zs-fchip.is-active { border-color: var(--orange); }
.zs-wrap .zs-tabs--kultura button.zs-tab:hover { border-color: var(--kultura); color: var(--kultura); }
.zs-wrap .zs-tabs--kultura button.zs-tab.is-active { border-color: var(--kultura); background: var(--kultura); color: #fff; }

/* ═══════ FIÓKOM DASHBOARD (.zsdash) – WHMCS-szerű letisztult ügyfélportál ═══════ */
.zsdash-head { margin:14px 0 20px; }
.zsdash-head h1 { font-size:24px; font-weight:800; letter-spacing:-.01em; color:var(--ink); }
.zsdash-head p { color:var(--muted); font-size:14px; margin-top:5px; }
.zsdash { display:grid; grid-template-columns:288px minmax(0,1fr); gap:24px; align-items:start; }
.zsdash-side { display:flex; flex-direction:column; gap:16px; }
.zsdash-card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:18px; }
.zsdash-card__head { font-size:12.5px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--ink); display:flex; align-items:center; gap:9px; padding-bottom:12px; margin-bottom:14px; border-bottom:1px solid var(--line); }
.zsdash-card__head i { color:#35647D; }
.zsdash-acct__name { font-size:16px; font-weight:800; color:var(--ink); margin-bottom:9px; }
.zsdash-acct__rows { display:flex; flex-direction:column; gap:5px; font-size:13.5px; color:var(--muted); margin-bottom:16px; }
.zsdash-acct__rows .u { color:#35647D; font-weight:600; }
.zsdash-btn { display:flex; align-items:center; justify-content:center; gap:8px; font-size:13.5px; font-weight:700; padding:10px 14px; border-radius:8px; border:1px solid var(--line); color:var(--ink); background:#fff; transition:.15s; cursor:pointer; }
.zsdash-btn:hover { border-color:#35647D; color:#35647D; }
.zsdash-btn--primary { background:#35647D; border-color:#35647D; color:#fff; }
.zsdash-btn--primary:hover { background:#274C60; color:#fff; }
.zsdash-btn--sm { padding:8px 13px; font-size:12.5px; }
.zsdash-perm { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:13.5px; color:var(--ink); padding:9px 0; border-bottom:1px solid #eef1f3; }
.zsdash-perm:first-of-type { padding-top:0; }
.zsdash-perm + .zsdash-btn { margin-top:14px; }
.zsdash-menu { display:flex; flex-direction:column; }
.zsdash-menu a { display:flex; align-items:center; gap:11px; font-size:14px; color:var(--ink); padding:10px 4px; border-bottom:1px solid #eef1f3; transition:.15s; }
.zsdash-menu a:last-child { border-bottom:none; }
.zsdash-menu a:hover { color:#35647D; }
.zsdash-menu a i { width:18px; text-align:center; color:#35647D; }
.zsdash-menu__out { color:#b04a44 !important; }
.zsdash-menu__out i { color:#b04a44 !important; }

.zsdash-main { display:flex; flex-direction:column; gap:20px; }
.zsdash-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.zsdash-stat { background:var(--card); border:1px solid var(--line); border-top:3px solid #35647D; border-radius:10px; padding:15px 18px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.zsdash-stat__num { font-size:30px; font-weight:800; color:var(--ink); line-height:1; }
.zsdash-stat__label { font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:700; margin-top:7px; }
.zsdash-stat__ico { font-size:25px; color:#d3dbdf; }

.zsdash-panel { background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.zsdash-panel__head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px; border-bottom:1px solid var(--line); }
.zsdash-panel__title { font-size:14.5px; font-weight:800; color:var(--ink); display:flex; align-items:center; gap:9px; }
.zsdash-panel__title i { color:#35647D; }
.zsdash-more { font-size:12.5px; color:var(--muted); font-weight:600; }
.zsdash-more:hover { color:#35647D; }
.zsdash-panel__body { padding:4px 18px; }
.zsdash-cols { display:grid; grid-template-columns:1fr 1fr; gap:20px; }

.zsdash-row { display:flex; align-items:center; gap:13px; padding:13px 0; border-bottom:1px solid #eef1f3; }
.zsdash-row:last-child { border-bottom:none; }
.zsdash-row__ico { width:34px; height:34px; border-radius:8px; background:#eef2f5; color:#35647D; display:flex; align-items:center; justify-content:center; font-size:14px; flex:none; }
.zsdash-row__body { flex:1; min-width:0; }
.zsdash-row__title { font-size:14px; font-weight:600; color:var(--ink); }
.zsdash-row__meta { font-size:12px; color:var(--muted); margin-top:2px; }
.zsdash-row__meta a { color:#35647D; text-decoration:underline; }
.zsdash-row__act { font-size:12.5px; color:var(--muted); white-space:nowrap; }
.zsdash-row__act a { color:#35647D; }

.zsdash-note { display:flex; align-items:flex-start; gap:11px; font-size:13.5px; color:var(--ink); padding:12px 0; border-bottom:1px solid #eef1f3; line-height:1.5; }
.zsdash-note:last-child { border-bottom:none; }
.zsdash-note > i { margin-top:2px; flex:none; }
.zsdash-note span { margin-left:auto; font-size:11px; color:var(--muted); white-space:nowrap; padding-left:8px; }
.zsdash-news { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid #eef1f3; }
.zsdash-news:last-child { border-bottom:none; }
.zsdash-news__t { font-size:13.5px; font-weight:600; color:var(--ink); }
.zsdash-news:hover .zsdash-news__t { color:#35647D; }
.zsdash-news__d { font-size:11.5px; color:var(--muted); white-space:nowrap; }

@media (max-width:980px){
  .zsdash { grid-template-columns:1fr; }
  .zsdash-stats { grid-template-columns:1fr 1fr; }
  .zsdash-cols { grid-template-columns:1fr; }
}
@media (max-width:520px){ .zsdash-stats { grid-template-columns:1fr; } }

/* Fiókom dashboard – nézet-váltás (űrlapok a profil oldalon belül) */
.zsdash-view[hidden] { display:none; }
.zsdash-formhead { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.zsdash-back { display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:#35647D; }
.zsdash-back:hover { text-decoration:underline; }
.zsdash-formhead__t { font-size:18px; font-weight:800; color:var(--ink); margin:0; }
.zsdash-menu a.zsdash-menu-item.is-active { color:#35647D; font-weight:700; }
.zsdash-menu a.zsdash-menu-item.is-active i { color:#35647D; }
#zsdashToast { display:flex; align-items:center; gap:9px; background:#eaf3ea; border:1px solid #cfe3cf; color:#2e5d38; font-size:14px; font-weight:600; padding:12px 16px; border-radius:9px; margin-bottom:18px; }
#zsdashToast i { color:#3f8f5f; }
/* A beágyazott űrlapok a dashboard fő oszlopában – teljes szélesség */
.zsdash-view .zsr-form { max-width:none; }

/* ── Kiemelt szolgáltatók: álló 3×2 rács a futó szalag helyett ──────────────
   A marquee a sáv szélein félbevágta a kártyákat (a sávszélesség sosem volt
   egész számú többszöröse a 224px-es kártyaosztásnak). Álló rácson minden
   kártya egyforma, rácsra igazított, és mind a 6 elfér hiánytalanul. */
.zs-featsvc-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .zs-featsvc-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .zs-featsvc-grid--3 { grid-template-columns: 1fr; } }

/* ════════════════════════════════════════════════════════════════════
   VILÁGOS FEJLÉC (Dodolland-ihletett)
   A sötét antracit override eltávolítva. A fejléc visszaállt az alap
   #fff háttérre (ld. .zs-header line ~191). Logó, menü, CTA mind az
   --orange tokent (lime-zöld) használja.
   ════════════════════════════════════════════════════════════════════ */

/* CTA: lime-zöld az --orange tokenből */
.zs-header .zs-header__cta { background: #F07820; color: #fff; }
.zs-header .zs-header__cta:hover { background: #d4661a; color: #fff; }

/* Footer-logó fehér marad (sötét lábon) */
.zs-footer .zs-logo__text { color: #fff; }
.zs-footer .zs-logo__text span { color: var(--orange); }

/* ── CÍM-KIEMELÉS (2026-08-15, Crocoblock-referencia) ──────────────────
   Egy telített szín a cím EGYETLEN kulcsszaván. A szabály: szekciónként
   egy akcentus, és az ugyanaz, ami a szekció gombján van – így a szín
   összeköti a címet a cselekvéssel, nem csak dekoráció.
   Kontextusonként külön érték, hogy a háttéren mindig olvasható legyen. */
.zs-hl { color: var(--orange); }                          /* világos háttéren */
.zs-newsletter .zs-hl { color: var(--gold-soft); }        /* palaszürke sávon */
.zs-vall .zs-hl { color: var(--orange); }                 /* pezsgőkrémen */

/* ════════════════════════════════════════════════════════════════════
   TIPOGRÁFIA + PIRULA-GOMBOK (2026-08-15, Crocoblock-referencia)
   Két dolgot veszünk át: (1) tömörebb, nagyobb címsorok szűkebb
   betűközzel és sorközzel, (2) minden gomb pirula alakú.
   A SZÍNEK VÁLTOZATLANOK – csak a forma és a méret változik.
   ════════════════════════════════════════════════════════════════════ */

/* — Címsorok: nagyobb, tömörebb — */
.zs-bhead__title      { font-size: 18px; letter-spacing: -.015em; line-height: 1.2; }
.zs-bhead__title i    { font-size: 16px; }
/* Ugyanez a két kontextusban, ahol specifikusabb szabály felülütné: */
.zs-portal__center .zs-bhead__title,
.zs-catblock .zs-bhead__title { font-size: 18px; letter-spacing: -.015em; line-height: 1.2; }
.zs-portal__center .zs-bhead__title i { font-size: 16px; }
.zs-section__title    { font-size: 24px; letter-spacing: -.022em; line-height: 1.15; }
.zs-newsletter__title { font-size: 24px; letter-spacing: -.02em; line-height: 1.2; }
.zs-vall__title       { font-size: 18px; letter-spacing: -.015em; line-height: 1.2; }

/* — Pirula-gombok mindenhol — */
.zs-featsvc__btn,
.zs-panel__btn,
.zs-vall__btn,
.zs-partybox__btn,
.zs-shop-card__btn,
.zs-group__btn,
.zsdash-btn,
.zs-newsletter__form button,
.zs-newsletter__form input[type="submit"] {
  border-radius: 999px;
}

/* A pirula formához valamivel több vízszintes levegő kell,
   különben a lekerekítés „levágja" a felirat szélét. */
.zs-featsvc__btn,
.zs-panel__btn,
.zs-vall__btn,
.zs-partybox__btn { padding-left: 18px; padding-right: 18px; }

/* A hírlevél beviteli mezője is pirula, hogy passzoljon a gombhoz */
.zs-newsletter__form input[type="email"] { border-radius: 999px; padding: 0 20px; }

/* ════════════════════════════════════════════════════════════════════
   KATEGÓRIA-SZÍNEK (2026-08-15) – a Crocoblock „szekciónként egy telített
   akcentus" elve, a Zsebinfóra fordítva: a portálnak eleve vannak
   kategóriái, ezek kapnak saját színt. A paletta-menetben ezeket
   petrolkékre/szürkére lapítottam, ettől lett egy hangon szóló az oldal.
   A készlet FEGYELMEZETT: minden szín azonos világosság- és telítettség-
   tartományban van, ezért harmonikus marad – nem neon, nem csiricsáré.
   ════════════════════════════════════════════════════════════════════ */
:root {
  --kat-kozelet:      #35647D;   /* petrol – a márka, ez a fő kategória */
  --kat-kornyezet:    #3F8F5F;   /* zöld */
  --kat-kozbiztonsag: #C0504A;   /* téglavörös */
  --kat-kultura:      #B5643C;   /* terrakotta */
  --kat-fejlesztes:   #3B6FA0;   /* kék */
  --kat-sport:        #C77D2E;   /* borostyán */
  --kat-egeszseg:     #2A8080;   /* türkiz */
  --kat-gyermek:      #A85A80;   /* mályva */
}

/* A badge-ek a saját kategória-színüket kapják */
.zs-badge--teal     { background: var(--kat-kozelet); }       /* Közélet – volt palaszürke */
.zs-badge--green    { background: var(--kat-kornyezet); }
.zs-badge--red      { background: var(--kat-kozbiztonsag); }
.zs-badge--kultura  { background: var(--kat-kultura); }       /* Kultúra – volt petrol */
.zs-badge--blue     { background: var(--kat-fejlesztes); }
/* A „Kiemelt hír" nem kategória, hanem rang – mély petrol, hogy elváljon */
.zs-badge--featured { background: var(--navy-900); }

/* ── Nagyobb, tömörebb címsorok (a referencia ereje) ── */
.zs-bhead__title,
.zs-portal__center .zs-bhead__title,
.zs-catblock .zs-bhead__title { font-size: 26px; letter-spacing: -.03em; line-height: 1.08; }
.zs-bhead__title i,
.zs-portal__center .zs-bhead__title i { font-size: 20px; }
.zs-section__title    { font-size: 38px; letter-spacing: -.032em; line-height: 1.05; }
.zs-newsletter__title { font-size: 34px; letter-spacing: -.03em; line-height: 1.08; }
.zs-vall__title       { font-size: 24px; letter-spacing: -.025em; line-height: 1.12; }

/* A nagyobb címekhez több levegő kell, különben szűk lesz a rács */
.zs-portal__center .zs-bhead { margin-bottom: 22px; padding-bottom: 14px; }
.zs-catblock { margin-top: 42px; }

/* A jobb sáv (266px) másodlagos: kisebb címek, különben kilóg és
   versenyezne a fő oszloppal. Hierarchia: fő 26px · sáv 17px. */
.zs-portal__right .zs-bhead__title { font-size: 17px; letter-spacing: -.02em; line-height: 1.15; }
.zs-portal__right .zs-bhead__title i { font-size: 15px; }

/* ════════════════════════════════════════════════════════════════════
   CROCOBLOCK-KIEMELÉSEK (2026-08-15)
   A referencia színei, a képekről leolvasva. Az elv: minden szekció
   kap egy telített akcentust, ami a cím kulcsszaván jelenik meg –
   forgó színrend, ahogy a Crocoblock oldalain szekciónként vált.
   ════════════════════════════════════════════════════════════════════ */
:root {
  --cb-green:   #2D6B38;   /* Kiemelt szolgáltatók – brand zöld */
  --cb-coral:   #F07820;   /* Kiemelt hírek – narancs */
  --cb-blue:    #35647D;   /* Ingatlanok – ingatlankék */
  --cb-sky:     #5B84EF;
  --cb-orchid:  #2D6B38;   /* Legkeresettebb szolgáltatások – zöld */
  --cb-magenta: #35647D;   /* Hirdetések – ingatlankék */
  --cb-violet:  #BF5D46;   /* Programajánló – téglavörös */
  --cb-yellow:  #BF5D46;   /* Helyi ügyintézés – téglavörös */
}

.zs-hl--green   { color: var(--cb-green); }
.zs-hl--coral   { color: var(--cb-coral); }
.zs-hl--blue    { color: var(--cb-blue); }
.zs-hl--sky     { color: var(--cb-sky); }
.zs-hl--orchid  { color: var(--cb-orchid); }
.zs-hl--magenta { color: var(--cb-magenta); }
.zs-hl--violet  { color: var(--cb-violet); }
.zs-hl--yellow  { color: var(--cb-yellow); }

/* KÍSÉRLET – CROCOBLOCK-FEJLÉC (2026-08-15) – TÖRÖLVE
   A blokk eltávolítva: a fehér/világos fejléc (Dodolland-stílus) felváltotta. */



/* ── Menüsor: levegő az aktív vonal alatt (2026-08-16) ──────────────────
   A linkek alsó szegélye (3px) eddig pontosan a fejléc alsó élén ült,
   mert a .zs-menubar-nak nem volt alsó térköze. 9px-nyi hely alatta:
   a vonal feljebb kerül és lélegzik. */
.zs-header .zs-menubar { padding-bottom: 9px; }

/* ── Kabala: Zsebi a mókus, jobb sáv (2026-10-03) ─────────────────────────
   Az időjárás-kártyával azonos doboz (card/line/radius/shadow), a mókus
   bal oldalt, felül kilóg a kártyából. */
.zs-mascot {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 98px;
  padding: 14px 14px 14px 134px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: var(--navy-900);
  text-decoration: none;
  transition: box-shadow .2s, transform .2s;
}
.zs-mascot img {
  position: absolute;
  left: -2px;
  bottom: -2px;
  width: 140px;
  height: auto;
  transform-origin: 50% 90%;
  transition: transform .3s;
  pointer-events: none;
}
.zs-mascot:hover { box-shadow: 0 6px 18px rgba(40, 70, 50, .12); transform: translateY(-1px); }
.zs-mascot:hover img { transform: rotate(-4deg) scale(1.04); }
.zs-mascot__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.zs-mascot__title { font-size: 15px; font-weight: 800; line-height: 1.2; }
.zs-mascot__lead { font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.zs-mascot__cta { margin-top: 3px; font-size: 12.5px; font-weight: 700; color: var(--green); }
.zs-mascot:hover .zs-mascot__cta { color: var(--gold); }
@media (prefers-reduced-motion: reduce) {
  .zs-mascot, .zs-mascot img { transition: none; }
  .zs-mascot:hover, .zs-mascot:hover img { transform: none; }
}