/* ==========================================================================
   PSZICHOLÓGUS KERESŐ – kereső sáv (címlap hero + /pszichologus-kereso kék sáv)
   --------------------------------------------------------------------------
   A feliratok, a legördülők szövege és az "Online konzultáció" jelölőnégyzet
   SZERVEROLDALON készülnek (pszichologus_kereso_form modul). Itt csak az
   elrendezés van. Helyes scope: .block-listing-search-filters .form-search-listing
   ========================================================================== */

/* A belső "Search a listing" angol felirat elrejtése. */
.block-listing-search-filters .form-search-listing .block-title {
  display: none !important;
}

/* DESKTOP: a témából jövő vízszintes flex sort megtartjuk, csak függőlegesen
   középre igazítjuk; az "Online konzultáció" normál sorelem (nincs abszolút
   pozicionálás / átfedés). */
.block-listing-search-filters .form-search-listing {
  align-items: center !important;
}

.block-listing-search-filters .form-search-listing .online-konzultacio-wrap {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
}

.block-listing-search-filters .form-search-listing .online-konzultacio-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  white-space: nowrap !important;
  color: #ffffff !important;
  font-weight: 400 !important;
  cursor: pointer !important;
}

.block-listing-search-filters .form-search-listing .online-konzultacio-checkbox {
  margin: 0 !important;
  width: auto !important;
  flex: 0 0 auto !important;
  cursor: pointer !important;
}

/* MOBIL: a jelölőnégyzet külön sorban, középen, a többi mező FÖLÉ; minden mező
   teljes szélességű. A kék sáv (kereső oldal) is pontosan így. */
@media (max-width: 991.98px) {
  .block-listing-search-filters .form-search-listing {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    row-gap: 10px !important;
  }

  .block-listing-search-filters .form-search-listing .online-konzultacio-wrap {
    order: -1 !important;
    width: 100% !important;
    justify-content: center !important;
  }

  .block-listing-search-filters .form-search-listing > .form-item,
  .block-listing-search-filters .form-search-listing > .js-form-item,
  .block-listing-search-filters .form-search-listing > .form-actions {
    width: 100% !important;
    margin: 0 !important;
  }

  .block-listing-search-filters .form-search-listing .chosen-container {
    width: 100% !important;
  }
  .block-listing-search-filters .form-search-listing .form-control,
  .block-listing-search-filters .form-search-listing .form-select,
  .block-listing-search-filters .form-search-listing .form-submit {
    width: 100% !important;
  }
}

/* BAL OLDALI FINOMÍTÓ SÁV: az "Online konzultáció" tétel elrejtése (átkerült a
   kereső sávba, ne legyen kétszer). */
.block-facet-blockhighlights li.facet-item:has(a[data-drupal-facet-item-id="highlights-5"]) {
  display: none !important;
}


/* ==========================================================================
   CÍMLAPI HERO HÁTTÉRKÉP (csak a keresőt tartalmazó bg-image szekcióra!)
   --------------------------------------------------------------------------
   A scope ":has(.block-listing-search-filters)" miatt CSAK a címlapi kereső
   szekcióját érinti, más bg-image hero szekciókat nem.

   Alapállapot (= MOBIL): a kép a kereső TELJES háttere.
   Desktop (>=992px): a sáv magassága a szélességhez igazodik (százalékos
   padding), a kép cover-rel tölti ki.
   ========================================================================== */

.bg-image:has(.block-listing-search-filters) {
  position: relative !important;
}

/* A háttérkép-tartó kitölti a teljes szekciót. */
.bg-image:has(.block-listing-search-filters) .background-image-holder {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  z-index: 0 !important;
  background: none !important;
}

/* A valodi <img> tolti ki a tartot, vagassal igazitva (cover). */
.bg-image:has(.block-listing-search-filters) .background-image-holder img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  max-width: none !important;
}

/* A kereso form a kep fole kerul. */
.bg-image:has(.block-listing-search-filters) > .container {
  position: relative !important;
  z-index: 1 !important;
}

/* Olvashatosag a foto folott: a feher checkbox-felirat kapjon arnyekot. */
.bg-image:has(.block-listing-search-filters) .online-konzultacio-label {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important;
}

/* DESKTOP: a fix 15rem padding helyett szelessegaranyos padding -> a sav
   merete/aranya koveti az oldalszelesseget. A 14% szabadon hangolhato
   (kisebb % = laposabb sav, nagyobb % = magasabb sav). */
@media (min-width: 992px) {
  section.bg-image:has(.block-listing-search-filters) {
    padding-top: 14% !important;
    padding-bottom: 14% !important;
    min-height: 0 !important;
  }
}

/* === Főoldal szekciók közötti távolság === */
.path-frontpage .paragraph--type--custom-html {
  padding-top: 30px !important;
  padding-bottom: 0 !important;
}

.path-frontpage .paragraph--type--custom-html:last-child {
  padding-bottom: 30px !important;
}

/* === Pszichológus válaszol (psychologist_answer) node megjelenítés === */

.psy-answer__author::before {
  font-family: "Font Awesome 5 Free";
  content: "\f007";
  font-weight: 900;
  margin-right: 4px;
  color: #6c757d;
}

.psy-answer__meta {
  font-size: 0.9em;
  color: #555;
  margin-bottom: 1.5em;
}

.psy-answer__fields {
  margin-bottom: 1.5em;
}

.psy-answer__field-row {
  margin-bottom: 0.4em;
  display: flex;
  gap: 0.4em;
}

.psy-answer__field-label {
  white-space: nowrap;
}

.psy-answer__field-value {
  font-weight: bold;
}

.psy-answer__question-label {
  font-weight: bold;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}

.psy-answer__body {
  margin-bottom: 1.5em;
}

/* === Ajánlatkérés (offer_request) node megjelenítés === */

.offer-req__author::before {
  font-family: "Font Awesome 5 Free";
  content: "\f007";
  font-weight: 900;
  margin-right: 4px;
  color: #6c757d;
}

.offer-req__meta {
  font-size: 0.9em;
  color: #555;
  margin-bottom: 1.5em;
}

.offer-req__fields {
  margin-bottom: 1.5em;
}

.offer-req__field-row {
  margin-bottom: 0.4em;
  display: flex;
  gap: 0.4em;
}

.offer-req__field-label {
  white-space: nowrap;
}

.offer-req__field-value {
  font-weight: bold;
}

.offer-req__question-label {
  font-weight: bold;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}

.offer-req__body {
  margin-bottom: 1.5em;
}


/* ==========================================================================
   PROFIL OLDAL (node--listing--full) – tartalom újrarendezés
   --------------------------------------------------------------------------
   Scope: .node--type-listing.full
   ========================================================================== */

/* ── Szekció keret – minden tartalmi blokk egységes kerete ── */
.node--type-listing.full .profil-szekció {
  background: #fff;
  border: 1px solid #e8edf2;
  border-radius: 8px;
  padding: 24px 28px;
  margin-bottom: 20px;
  display: block;
  width: 100%;
  clear: both;
  box-sizing: border-box;
}

.node--type-listing.full .profil-szekció-cím {
  font-size: 1.15rem;
  font-weight: 700;
  color: #2c3e50;
  margin: 0 0 16px 0;
  padding-bottom: 12px;
  border-bottom: 2px solid #f0f3f6;
  display: flex;
  align-items: center;
  gap: 8px;
}

.node--type-listing.full .profil-szekció-cím i {
  color: #5b9dc6;
  font-size: 0.95rem;
  width: 18px;
  text-align: center;
}

.node--type-listing.full .profil-szekció-tartalom {
  color: #444;
  line-height: 1.7;
}

/* Drupal field label-ek elrejtése – főtartalom és sidebar.
   A téma .field--label osztályt használ (nem .field__label).
   A mi h3/h4 fejléceink adják a feliratot, a Drupal-féle duplikált. */
.node--type-listing.full .profil-szekció .field--label,
.node--type-listing.full .profil-szekció .field--label-above > .field--label,
.node--type-listing.full .profil-szekció .field--label-inline > .field--label,
.node--type-listing.full .profil-szekció .field__label {
  display: none !important;
}

/* ── Bemutatkozás – a téma field label-jét elrejtjük ── */
.node--type-listing.full .profil-bemutatkozas .field--label,
.node--type-listing.full .profil-bemutatkozas .field__label,
.node--type-listing.full .profil-bemutatkozas h3:not(.profil-szekció-cím) {
  display: none !important;
}

/* ── Szolgáltatások (field_highlights – lista + pipák) ── */
.node--type-listing.full .profil-szolgaltatasok .field--name-field-highlights .field__items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.node--type-listing.full .profil-szolgaltatasok .field--name-field-highlights .field__item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.92rem;
  color: #333;
}

.node--type-listing.full .profil-szolgaltatasok .field--name-field-highlights .field__item::before {
  content: "✓";
  color: #2f7d39;
  font-weight: 700;
  font-size: 1rem;
}

/* ── Rendelői képek (field_photos – max 4 kép) ── */
.node--type-listing.full .profil-galeria-kepek .field--name-field-photos .field__items {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.node--type-listing.full .profil-galeria-kepek .field--name-field-photos .field__item {
  flex: 0 0 auto;
}

.node--type-listing.full .profil-galeria-kepek img {
  width: 140px;
  height: 105px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #dee2e6;
  display: block;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.node--type-listing.full .profil-galeria-kepek img:hover {
  transform: scale(1.04);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

/* ── Óradíjak / Árak (Paragraph entitások) ── */
.node--type-listing.full .profil-arak-lista {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Egy Paragraph = egy ár-kártya */
.node--type-listing.full .profil-arak-lista .paragraph {
  background: #f8f9fb;
  border: 1px solid #e8edf2;
  border-radius: 6px;
  padding: 14px 18px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 16px;
  align-items: start;
}

/* Óradíjak kártyán minden Drupal field label elrejtve –
   a mező értékei (Online konzultáció, 30 perc, 15000 Ft) önmagukért beszélnek */
.node--type-listing.full .profil-arak-lista .paragraph .field--label,
.node--type-listing.full .profil-arak-lista .paragraph .field__label {
  display: none !important;
}

/* Szolgáltatás mező – teljes szélesség, 2 oszlopot foglal */
.node--type-listing.full .profil-arak-lista .paragraph .field--name-field-szolgaltatas {
  grid-column: 1 / -1;
  font-weight: 700;
  font-size: 0.97rem;
  color: #2c3e50;
  padding-bottom: 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid #e8edf2;
}

/* Időegység mező */
.node--type-listing.full .profil-arak-lista .paragraph .field--name-field-idoegyseg {
  color: #555;
  font-size: 0.9rem;
}

/* Díj mező – jobb oldalon kiemelve */
.node--type-listing.full .profil-arak-lista .paragraph .field--name-field-dij {
  text-align: right;
}

/* ::after fallback ha a template nem fut */
.node--type-listing.full .profil-arak-lista .paragraph .field--name-field-dij .field__item::after {
  content: " Ft";
  font-size: 0.8rem;
  color: #888;
}

.node--type-listing.full .profil-arak-lista .paragraph .field--name-field-dij .field__item {
  font-size: 1.15rem;
  font-weight: 700;
  color: #5b9dc6;
}

/* Egyedi paragraph template osztályok (paragraph--oradijak-arak.html.twig) */
.node--type-listing.full .oradij-szolgaltatas {
  grid-column: 1 / -1;
  font-weight: 700;
  font-size: 0.97rem;
  color: #2c3e50;
  padding-bottom: 8px;
  margin-bottom: 6px;
  border-bottom: 1px solid #e8edf2;
}

.node--type-listing.full .oradij-reszletek {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

.node--type-listing.full .oradij-idoegyseg {
  font-size: 0.88rem;
  color: #555;
  flex: 1 1 auto;
}

.node--type-listing.full .oradij-dij {
  font-size: 0.88rem;
  font-weight: 700;
  color: #5b9dc6;
  white-space: nowrap;
  flex: 0 0 auto;
}

/* ── Blog kártyák grid (3/2/1 oszlop) ── */
.node--type-listing.full .profil-blogbejegyzesek {
  background: #f8f9fb;
  border-color: #e2e8f0;
  clear: both;
}

.node--type-listing.full .profil-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media (max-width: 991.98px) {
  .node--type-listing.full .profil-blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575.98px) {
  .node--type-listing.full .profil-blog-grid {
    grid-template-columns: 1fr;
  }
}

.node--type-listing.full .profil-blog-kartya {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.node--type-listing.full .profil-blog-kartya:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.node--type-listing.full .profil-blog-kartya-kep {
  width: 100%;
  height: 155px;
  overflow: hidden;
  background: #e8edf2;
}

.node--type-listing.full .profil-blog-kartya-kep img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.node--type-listing.full .profil-blog-kartya:hover .profil-blog-kartya-kep img {
  transform: scale(1.05);
}

.node--type-listing.full .profil-blog-kartya-tartalom {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.node--type-listing.full .profil-blog-kartya-datum {
  font-size: 0.78rem;
  color: #888;
  margin-bottom: 6px;
}

.node--type-listing.full .profil-blog-kartya-cim {
  font-size: 0.93rem;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 8px 0;
}

.node--type-listing.full .profil-blog-kartya-cim a {
  color: #2c3e50;
  text-decoration: none;
}

.node--type-listing.full .profil-blog-kartya-cim a:hover {
  color: #5b9dc6;
}

.node--type-listing.full .profil-blog-kartya-osszefoglalas {
  font-size: 0.83rem;
  color: #666;
  line-height: 1.55;
  margin: 0 0 12px 0;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.node--type-listing.full .profil-blog-kartya-tovabb {
  font-size: 0.82rem;
  font-weight: 600;
  color: #5b9dc6;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: auto;
}

.node--type-listing.full .profil-blog-kartya-tovabb:hover {
  color: #5b9dc6;
  text-decoration: underline;
}

/* ── Értékelések szekció (field_comment) ── */
.node--type-listing.full .profil-reviews {
  background: #fffbf0;
  border-color: #fde68a;
}

.node--type-listing.full .profil-reviews .profil-szekció-cím i {
  color: #f59e0b;
}

/* A téma "REVIEWS" h2 fejlécét elrejtjük – a mi h3-unk adja */
html body .node--type-listing.full .profil-reviews-tartalom h2,
html body .node--type-listing.full .profil-reviews-tartalom .field--label,
html body .node--type-listing.full .profil-reviews-tartalom .field__label {
  display: none !important;
}

/* div#reviews > h3.block-title "Reviews" elrejtése – téma rendereli */
html body .node--type-listing.full .profil-reviews-tartalom .reviews .block-title,
html body .node--type-listing.full .profil-reviews-tartalom #reviews .block-title {
  display: none !important;
}

/* Értékelés írása form blokk elválasztása a listától */
.node--type-listing.full .profil-reviews-tartalom #comment-form {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 2px solid #fde68a;
}

/* Értékelés írása alcím (ha a téma kirendereli) */
.node--type-listing.full .profil-reviews-tartalom #comment-form > h2,
.node--type-listing.full .profil-reviews-tartalom #comment-form > h3 {
  font-size: 1rem;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 16px;
}

/* ── Jobb oldalsáv blokkok ── */
.node--type-listing.full #sidebar-second .profil-sidebar-blokk {
  background: #fff;
  border: 1px solid #e8edf2;
  border-radius: 8px;
  padding: 18px 20px;
  margin-bottom: 16px;
}

.node--type-listing.full #sidebar-second .profil-sidebar-cim {
  font-size: 1rem;
  font-weight: 700;
  text-transform: none !important;
  letter-spacing: normal;
  color: #2c3e50;
  margin: 0 0 12px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f3f6;
  display: flex;
  align-items: center;
  gap: 6px;
}

.node--type-listing.full #sidebar-second .profil-sidebar-cim i {
  color: #5b9dc6;
  font-size: 0.85rem;
  width: 16px;
  text-align: center;
}

/* Sidebar field label-ek elrejtése (mi adjuk a h4-et) */
.node--type-listing.full #sidebar-second .profil-sidebar-blokk .field--label,
.node--type-listing.full #sidebar-second .profil-sidebar-blokk .field__label,
.node--type-listing.full #sidebar-second .profil-sidebar-blokk h3,
.node--type-listing.full #sidebar-second .profil-sidebar-blokk h4:not(.profil-sidebar-cim),
.node--type-listing.full #sidebar-second .profil-sidebar-blokk .block-title {
  display: none !important;
}

/* Taxonomy tag-ek – egymás alatt (flex column) */
.node--type-listing.full .profil-sidebar-tagek .field__items {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.node--type-listing.full .profil-sidebar-tagek .field__item {
  display: block;
}

.node--type-listing.full .profil-sidebar-tagek .field__item a,
.node--type-listing.full .profil-sidebar-tagek .field__item span {
  display: inline-block;
  background: #f0f4ff;
  color: #5b9dc6;
  border: 1px solid #d5e6f3;
  border-radius: 20px;
  padding: 3px 12px;
  font-size: 0.82rem;
  font-weight: 500;
  text-decoration: none;
  line-height: 1.6;
  transition: background 0.15s ease, color 0.15s ease;
}

.node--type-listing.full .profil-sidebar-tagek .field__item a:hover {
  background: #5b9dc6;
  color: #fff;
  border-color: #5b9dc6;
}

/* Rendelési idő táblázat */
.node--type-listing.full .profil-sidebar-blokk .field--name-field-opening-hours table {
  width: 100%;
  font-size: 0.87rem;
  border: none;
}

.node--type-listing.full .profil-sidebar-blokk .field--name-field-opening-hours td {
  padding: 5px 0;
  border: none;
  vertical-align: middle;
}

.node--type-listing.full .profil-sidebar-blokk .field--name-field-opening-hours td:first-child {
  font-weight: 600;
  color: #555;
  width: 76px;
}

.node--type-listing.full .profil-sidebar-blokk .field--name-field-opening-hours td:last-child {
  color: #333;
}

.node--type-listing.full .profil-sidebar-blokk .field--name-field-opening-hours tr:not(:last-child) td {
  border-bottom: 1px solid #f5f5f5;
}

/* ==========================================================================
   PROFIL OLDAL – téma field--label felülírás (magas specificitás)
   --------------------------------------------------------------------------
   A theme.css-ben: .node--type-listing aside .field .field--label {
     text-transform: uppercase; font-size: 20px; font-weight: 600; }
   Ezt győzi le az alábbi, ami az összes sidebar és főtartalom szekció
   .field--label elemét elrejti. A mi h3/h4 fejléceink adják a feliratot.
   ========================================================================== */

html body .node--type-listing.full #sidebar-second .field--label,
html body .node--type-listing.full #sidebar-second .field__label {
  display: none !important;
}

html body .node--type-listing.full .business-detail-main .profil-szekció .field--label,
html body .node--type-listing.full .business-detail-main .profil-szekció .field__label {
  display: none !important;
}

/* ==========================================================================
   PROFIL FEJLÉC – mobilnézet javítások
   --------------------------------------------------------------------------
   Mobilon (< 768px) a térkép a Bootstrap col-md-4-ből kiesik és
   a profilinfo alá kerül, ne fedje a gombokat / szöveget.
   ========================================================================== */

@media (max-width: 767.98px) {
  /* A fejléc sor: függőleges stack mobilon */
  .business-detail-header .row {
    display: flex !important;
    flex-direction: column !important;
  }

  /* Profilinfo előre (fent) */
  .business-detail-header .col-md-8 {
    order: 1;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Térkép utána (lent), teljes szélesség */
  .business-detail-header .field-map {
    order: 2;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 16px;
    height: 220px;
  }

  /* A Leaflet térkép töltse ki a konténert */
  .business-detail-header .field-map .leaflet-container {
    height: 220px !important;
    width: 100% !important;
  }

  /* Az értékelés sáv gombjai törjenek mobilon */
  .listing-action-buttons {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .listing-action-buttons .listing-action-btn {
    flex: 1 1 auto !important;
    text-align: center !important;
    min-width: 120px !important;
  }
}

/* ==========================================================================
   USER CONTACT FORM (/user/{uid}/contact)
   ========================================================================== */

/* "Előnézet" gomb elrejtése – valódi form ID: contact_message_personal_form */
#contact-message-personal-form #edit-preview,
#contact-message-personal-form input[data-drupal-selector="edit-preview"],
.path-user #edit-preview[name="op"][value="Előnézet"] {
  display: none !important;
}

/* "REVIEWS BY USER" blokk elrejtése a contact oldalon
   DevTools: div.block-views-blocklatest-reviews-block-2 */
.path-user #block-views-block-latest-reviews-block-2,
.path-user .block-views-blocklatest-reviews-block-2 {
  display: none !important;
}

/* Problémakör(ök) – vízszintesen egymás után (pill-ek) */
.node--type-listing.full .profil-sidebar-tagek .field--name-field-category .field__items {
  flex-direction: row !important;
  flex-wrap: wrap !important;
}

/* ==========================================================================
   PROFILKÉP LIGHTBOX
   ========================================================================== */

.profil-kep-lightbox-trigger {
  cursor: zoom-in;
}

.profil-kep-lightbox-trigger img {
  transition: opacity 0.2s ease;
}

.profil-kep-lightbox-trigger:hover img {
  opacity: 0.85;
}

/* Lightbox overlay */
#profil-lightbox-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}

#profil-lightbox-overlay.aktiv {
  display: flex;
}

#profil-lightbox-overlay img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}

#profil-lightbox-overlay .lightbox-zaro {
  position: absolute;
  top: 16px;
  right: 20px;
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
  line-height: 1;
  opacity: 0.8;
}

#profil-lightbox-overlay .lightbox-zaro:hover {
  opacity: 1;
}

/* Rendelő szekció */
.node--type-listing.full .profil-rendelo-kepek {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.node--type-listing.full .profil-rendelo-kepek img {
  width: 140px;
  height: 105px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #dee2e6;
  display: block;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: zoom-in;
}

.node--type-listing.full .profil-rendelo-kepek img:hover {
  transform: scale(1.04);
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
}

.node--type-listing.full .profil-rendelo-idok {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #f0f3f6;
}

.node--type-listing.full .profil-rendelo-idok strong {
  display: block;
  margin-bottom: 8px;
  font-size: 0.9rem;
  color: #555;
}

/* Rendelő(k) – összefogó blokk */
.node--type-listing.full .profil-rendelo-elem {
  padding-bottom: 20px;
  margin-bottom: 20px;
}

.node--type-listing.full .profil-rendelo-elem--hatarvonal {
  border-bottom: 2px dashed #e8edf2;
}

.node--type-listing.full .profil-rendelo-cim {
  font-size: 1rem;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 12px;
}

.node--type-listing.full .profil-rendelo-cim i {
  color: #e74c3c;
  margin-right: 4px;
}

/* Office Hours "Closed" szöveg cseréje — jelre */
.node--type-listing.full .profil-rendelo-idok .oh-display-closed,
.node--type-listing.full .profil-rendelo-idok .office-hours__status--closed,
#sidebar-second .profil-sidebar-blokk .oh-display-closed,
#sidebar-second .profil-sidebar-blokk .office-hours__status--closed {
  visibility: hidden;
  position: relative;
}

.node--type-listing.full .profil-rendelo-idok .oh-display-closed::after,
.node--type-listing.full .profil-rendelo-idok .office-hours__status--closed::after,
#sidebar-second .profil-sidebar-blokk .oh-display-closed::after,
#sidebar-second .profil-sidebar-blokk .office-hours__status--closed::after {
  content: "—";
  visibility: visible;
  position: absolute;
  left: 0;
}

/* ==========================================================================
   LEAFLET MAP POPUP – pszichológus profil kártya
   ========================================================================== */

/* Popup konténer méretezése */
.leaflet-popup-content-wrapper {
  border-radius: 8px !important;
  padding: 0 !important;
  overflow: hidden;
  min-width: 140px;
  max-width: 160px;
}

.leaflet-popup-content {
  margin: 0 !important;
  width: auto !important;
}

/* Node wrapper a popupban */
.leaflet-popup-content .node--type-listing {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 12px;
  text-align: center;
}

/* Profilkép */
.leaflet-popup-content .field--name-field-image-thumbnail img {
  width: 80px !important;
  height: 80px !important;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  margin: 0 auto 8px;
  border: 2px solid #e8edf2;
}

/* Profilkép link – keret eltávolítása */
.leaflet-popup-content .field--name-field-image-thumbnail a {
  display: block;
  line-height: 0;
}

/* Cím */
.leaflet-popup-content .node__title,
.leaflet-popup-content h2.node-title {
  font-size: 0.85rem !important;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 !important;
  padding: 0 !important;
  color: #2c3e50;
}

.leaflet-popup-content .node__title a,
.leaflet-popup-content h2.node-title a {
  color: #2c3e50;
  text-decoration: none;
}

.leaflet-popup-content .node__title a:hover {
  color: #5b9dc6;
}

/* Popup bezáró gomb */
.leaflet-popup-close-button {
  color: #888 !important;
  font-size: 18px !important;
  top: 4px !important;
  right: 6px !important;
}

/* Leaflet popup – téma override-ok */
.leaflet-popup-content .node--type-listing.map-popup .field--label,
.leaflet-popup-content .node--type-listing .field--label {
  display: none !important;
}

.leaflet-popup-content .node--type-listing .content .field {
  padding: 0 !important;
  border-bottom: none !important;
  position: static !important;
  clear: none !important;
  float: none !important;
  margin: 0 !important;
}

.leaflet-popup-content .node--type-listing .content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px !important;
  text-align: center;
}

.leaflet-popup-content h2 {
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  margin: 6px 0 0 0 !important;
  padding: 0 !important;
  line-height: 1.3 !important;
  border: none !important;
}

.leaflet-popup-content h2 a {
  color: #2c3e50 !important;
  text-decoration: none !important;
}

.leaflet-popup-content h2 a:hover {
  color: #5b9dc6 !important;
}

.leaflet-popup-content .field--name-field-image-thumbnail {
  float: none !important;
  margin: 0 auto !important;
}

.leaflet-popup-content .field--name-field-image-thumbnail img {
  width: 72px !important;
  height: 72px !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  display: block !important;
  margin: 0 auto !important;
  border: 2px solid #e8edf2 !important;
}

/* Leaflet popup – erősebb override */
html body .leaflet-popup-content .field--label,
html body .leaflet-popup-content .field--label-above {
  display: none !important;
}

html body .leaflet-popup-content .field--name-field-image-thumbnail img,
html body .leaflet-popup-content .field--type-image img {
  width: 72px !important;
  height: 72px !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  display: block !important;
  margin: 0 auto 8px !important;
  border: 2px solid #e8edf2 !important;
  float: none !important;
}

html body .leaflet-popup-content .node .content {
  text-align: center !important;
  padding: 10px !important;
}

/* Leaflet popup – végső layout fix */
html body .leaflet-popup-content-wrapper {
  border-radius: 10px !important;
  padding: 0 !important;
  overflow: hidden !important;
}

html body .leaflet-popup-content {
  margin: 0 !important;
  width: 150px !important;
}

html body .leaflet-popup-content article.node {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 14px 10px 10px !important;
  text-align: center !important;
}

html body .leaflet-popup-content article.node > * {
  float: none !important;
  clear: both !important;
}

/* Profilkép – kerek, középen */
html body .leaflet-popup-content .field--name-field-image-thumbnail {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
  float: none !important;
  margin: 0 0 8px 0 !important;
  padding: 0 !important;
  border: none !important;
}

html body .leaflet-popup-content .field--name-field-image-thumbnail .field__item {
  display: block !important;
}

html body .leaflet-popup-content .field--name-field-image-thumbnail a {
  display: block !important;
  line-height: 0 !important;
}

html body .leaflet-popup-content .field--name-field-image-thumbnail img {
  width: 72px !important;
  height: 72px !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  display: block !important;
  border: 2px solid #e8edf2 !important;
  margin: 0 auto !important;
  float: none !important;
}

/* Cím – középen, alul */
html body .leaflet-popup-content h2 {
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  text-align: center !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.3 !important;
  color: #2c3e50 !important;
  border: none !important;
  width: 100% !important;
}

html body .leaflet-popup-content h2 a {
  color: #2c3e50 !important;
  text-decoration: none !important;
}

html body .leaflet-popup-content h2 a:hover {
  color: #5b9dc6 !important;
}

/* Leaflet popup – pontos struktúra alapján */
html body .leaflet-popup-content article.node--type-listing {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 14px 10px 10px !important;
  text-align: center !important;
  width: 140px !important;
}

html body .leaflet-popup-content .field--name-field-image-thumbnail.field--label-hidden {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
  margin: 0 0 8px 0 !important;
  order: 1 !important;
}

html body .leaflet-popup-content .field--name-field-image-thumbnail.field--label-hidden .field__item a img {
  width: 72px !important;
  height: 72px !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  display: block !important;
  border: 2px solid #e8edf2 !important;
  margin: 0 auto !important;
  float: none !important;
}

html body .leaflet-popup-content article.node--type-listing h2 {
  order: 2 !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  text-align: center !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  border: none !important;
  color: #2c3e50 !important;
}

/* ==========================================================================
   LEAFLET MAP POPUP – JAVÍTÁS: a cím/település mezőt (pl. field_position)
   korábban semmi nem korlátozta szélességben -> hosszabb cím esetén a
   szöveg kilógott a fehér doboz keretén túl a térképre. Ez a blokk:
   1) kicsit szélesebbre veszi a popupot, hogy a cím kényelmesen elférjen,
   2) a profilkép és a cím (h2) kivételével minden további mezőt a doboz
      szélességéhez igazít, középre rendez és normálisan tördel, így semmi
      nem lóghat ki a kereten túl.
   ========================================================================== */

html body .leaflet-popup-content-wrapper {
  max-width: 210px !important;
}

html body .leaflet-popup-content {
  width: 190px !important;
  box-sizing: border-box !important;
}

html body .leaflet-popup-content article.node--type-listing {
  width: 100% !important;
  box-sizing: border-box !important;
}

html body .leaflet-popup-content article.node--type-listing > * {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

html body .leaflet-popup-content article.node--type-listing .field:not(.field--name-field-image-thumbnail) {
  width: 100% !important;
  margin: 4px 0 0 !important;
  padding: 0 !important;
  font-size: 0.75rem !important;
  line-height: 1.35 !important;
  color: #6b7280 !important;
  text-align: center !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

/* ==========================================================================
   KERESŐSÁV – mezők fix elrendezése, eredeti arányok megtartásával
   --------------------------------------------------------------------------
   Desktop (>=992px): nowrap, minden form-item egyenlő arányban osztja el a
   helyet (flex: 1 1 0), de soha nem töri új sorba. A Chosen konténer kitölti
   a szülőjét, a kiválasztott szöveg ellipsissel csonkítva jelenik meg.
   ========================================================================== */

@media (min-width: 992px) {

  /* Sor: soha nem törik */
  .block-listing-search-filters .form-search-listing {
    flex-wrap: nowrap !important;
    align-items: center !important;
  }

  /* Online konzultáció: fix méretű, nem nyúlik */
  .block-listing-search-filters .form-search-listing .online-konzultacio-wrap {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  /* Keresés gomb: fix méretű, nem nyúlik */
  .block-listing-search-filters .form-search-listing .form-actions {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  /* Szöveges kereső + legördülők: egyenlő arányban osztják el a maradék helyet,
     de zsugorodhatnak – min-width: 0 engedélyezi a valódi zsugorodást */
  .block-listing-search-filters .form-search-listing .js-form-item-title,
  .block-listing-search-filters .form-search-listing .js-form-item-field-category,
  .block-listing-search-filters .form-search-listing .js-form-item-field-locations {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: 0 !important; /* flex-bázis felülírja, de a böngésző ne vegyen be natív szélesség-számítást */
  }

  /* Chosen konténer kitölti a szülő form-item teljes szélességét */
  .block-listing-search-filters .form-search-listing .chosen-container {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Kiválasztott érték szövege ellipsissel csonkítva – nem feszíti szét a mezőt */
  .block-listing-search-filters .form-search-listing .chosen-single {
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
  }

  .block-listing-search-filters .form-search-listing .chosen-single span {
    display: block !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }

  /* A natív select (Chosen előtt/fallback) is igazodik */
  .block-listing-search-filters .form-search-listing .form-select {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* A szöveges input is igazodik */
  .block-listing-search-filters .form-search-listing .form-text {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* === Ajánlott pszichológusok carousel – blog-card stílushoz igazítás === */

/* Fotó-link: 16:9 arányú felső sáv, mint a blog-card__image-link */
.psy-card__photo-link {
  display: flex !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
  background: #f1f1f1 !important;
  margin-top: 0 !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Avatar a sávban középre, fix méret */
.psy-card__avatar {
  width: 96px !important;
  height: 96px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 3px solid #fff !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.10) !important;
}

/* Body padding igazítás a blog-card__body-hoz */
.psy-card__body {
  padding: 1.1rem 1.25rem 1.25rem !important;
}

/* ==========================================================================
   PROFIL FEJLÉC – profilkép méretezés
   A theme.css alapján a business-detail-header-text-inner position:absolute bottom:30px.
   A profilkép fehér kerete és tartalma arányosan nagyobb, egyenlő felső-alsó margóval.
   ========================================================================== */

.node--type-listing .profile-picture {
  background: #fff;
  border-radius: 6px;
  padding: 8px !important;
  margin: 26px 20px 26px 0 !important;
  display: block !important;
  width: 204px !important;
  height: 273px !important;
  flex: 0 0 204px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.node--type-listing .profile-picture img {
  width: 188px !important;
  height: 257px !important;
  object-fit: contain !important;
  border-radius: 4px !important;
  display: block !important;
}

/* ==== Ajanlott szakember jelzes a psz. keresoben (append) ==== */
.listing-search-results-item.ajanlott-kartya {
  border: 2px solid #7cc576 !important;
  border-radius: 6px;
}

.listing-search-results-item .ajanlott-cimke {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #7cc576;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  padding: 3px 12px;
  border-radius: 4px;
  margin: 4px 0 6px;
}

.listing-search-results-item .ajanlott-cimke::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4 4L19 7' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* ==========================================================================
   Ajánlott pszichológusok avatar – méret egyeztetés a Friss értékelések
   blokkal (110px). A fenti 96px-es !important szabályt kétosztályos,
   erősebb szelektorral írjuk felül.
   ========================================================================== */
.bizreview-carousel .psy-card__avatar {
  width: 110px !important;
  height: 110px !important;
}

.form-item-field-comment-rate-0-rating .chosen-container {
  display: none !important;
}
/* ==========================================================================
   PROFIL OLDAL – mobilnezet javitasok (append, 2026-07)
   --------------------------------------------------------------------------
   1) Fejlec: a theme.css-ben a .business-detail-header-text-inner
      position:absolute bottom:30px – mobilon a stackelt terkep miatt a
      tartalom kilog a fejlecbol es ratakar a Bemutatkozas blokkra.
      Megoldas: mobilon a fejlec magassaga automatikus, az inner a normal
      dokumentumfolyamban helyezkedik el.
   2) Blokk-sorrend mobilon (display: contents technika):
      a bal oszlop es a sidebar gyerekei kozvetlen flex elemek lesznek,
      igy oszlopok kozott is atrendezheto a sorrend:
      Bemutatkozas -> Vegzettseg -> Beszelt nyelvek -> Problemakor(ok)
      -> tobbi tartalom -> Ertekelesek & Ertekeles irasa (utolso).
   ========================================================================== */

/* --- 1) Fejlec/terkep atfedes javitas --- */
@media (max-width: 767.98px) {
  .node--type-listing .business-detail-header {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  /* A banner konteneren a theme.css fix magassaga mobilon osszeomlik:
     ures banner eseten 0 magassag, kep eseten a kep termeszetes aranya. */
  .node--type-listing .business-detail-header .field-photo {
    position: static !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
  }

  .node--type-listing .business-detail-header .field-photo img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: 220px !important;
    object-fit: cover !important;
  }

  .node--type-listing .business-detail-header .business-detail-header-text {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding-top: 0 !important;
  }

  .node--type-listing .business-detail-header .business-detail-header-text-inner {
    position: static !important;
    bottom: auto !important;
    padding: 12px 0 16px !important;
  }

  /* A Bemutatkozas ne csusszon a fejlec ala */
  .node--type-listing .business-detail-main {
    margin-top: 0 !important;
    padding-top: 16px !important;
  }
}

/* --- 2) Blokk-sorrend mobilon / tablet allo nezetben (oszlopok stackelve) --- */
@media (max-width: 991.98px) {
  .node--type-listing .business-detail-main .row {
    display: flex !important;
    flex-direction: column !important;
  }

  /* Az oszlop wrapperek "eltunnek", gyerekeik kozvetlen flex elemek */
  .node--type-listing .business-detail-main .main-content.col-lg-8,
  .node--type-listing .business-detail-main #sidebar-second {
    display: contents !important;
  }

  /* A col padding potlasa a blokkokon */
  .node--type-listing .business-detail-main .main-content > .profil-szekció,
  .node--type-listing .business-detail-main #sidebar-second > .profil-sidebar-blokk {
    width: 100% !important;
    padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5);
    padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5);
  }

  /* Sorrend */
  .node--type-listing .business-detail-main .profil-bemutatkozas      { order: 1; }
  .node--type-listing .business-detail-main .profil-sidebar-vegzettseg { order: 2; }
  .node--type-listing .business-detail-main .profil-sidebar-nyelvek    { order: 3; }
  .node--type-listing .business-detail-main .profil-sidebar-problemakor { order: 4; }
  .node--type-listing .business-detail-main .profil-szolgaltatasok     { order: 5; }
  .node--type-listing .business-detail-main .profil-sidebar-facebook   { order: 6; }
  .node--type-listing .business-detail-main .profil-rendelok,
  .node--type-listing .business-detail-main .profil-galeria            { order: 7; }
  .node--type-listing .business-detail-main .profil-arak               { order: 8; }
  .node--type-listing .business-detail-main .profil-blogbejegyzesek    { order: 9; }
  .node--type-listing .business-detail-main .profil-sidebar-megosztas  { order: 10; }
  .node--type-listing .business-detail-main .profil-reviews            { order: 11; }
}

/* ==========================================================================
   PROFIL OLDAL – ertekeles sav rendezese mobilon (append, 2026-07)
   Csillagok kozepre, alattuk a harom gomb teljes szelessegben, egymas alatt.
   ========================================================================== */
@media (max-width: 767.98px) {
  .node--type-listing .business-detail-review {
    height: auto !important;
    padding: 14px 0 !important;
  }

  .node--type-listing .business-detail-review .container {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  .node--type-listing .business-detail-review .field-rating {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
  }

  .node--type-listing .business-detail-review .field-write-comment.listing-action-buttons {
    float: none !important;
    position: static !important;
    width: 100% !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
  }

  .node--type-listing .business-detail-review .listing-action-btn {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 10px 12px !important;
    white-space: nowrap !important;
    text-align: center !important;
  }
}

/* ==========================================================================
   PROFIL OLDAL – weboldal link es Facebook blokk lathatosaga mobilon
   (append, 2026-07)
   ========================================================================== */

/* Fejlec: telefon gomb + weboldal link torhessen uj sorba, ne logjon ki */
@media (max-width: 767.98px) {
  .node--type-listing .field-phone-website-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px 16px !important;
    align-items: center !important;
    max-width: 100% !important;
  }

  .node--type-listing .field-phone-website-row .field-website {
    display: inline-flex !important;
    align-items: center !important;
    max-width: 100% !important;
    overflow-wrap: anywhere;
    visibility: visible !important;
  }
}

/* Sidebar blokkok (Vegzettseg, Nyelvek, Problemakor, Facebook, Megosztas)
   mindig lathatoak a stackelt nezetben – a theme.css esetleges
   .hidden-sm / display:none szabalyait feluliro biztositek */
@media (max-width: 991.98px) {
  .node--type-listing .business-detail-main #sidebar-second > .profil-sidebar-blokk {
    display: block !important;
    visibility: visible !important;
  }
}

/* ==========================================================================
   PROFIL FEJLEC – mobilon kozepre rendezett elrendezes (append, 2026-07)
   Profilkep kozepen, alatta a nev teljes szelessegben (nem tordeli
   szavankent), cim, telefon gomb es weboldal link kozepre igazitva.
   ========================================================================== */
@media (max-width: 767.98px) {
  .node--type-listing .header-profile-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
  }

  .node--type-listing .profile-picture {
    margin: 16px auto 12px !important;
  }

  .node--type-listing .header-profile-info {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
  }

  .node--type-listing .header-profile-info .field-title {
    width: 100% !important;
    white-space: normal !important;
    word-break: normal !important;
    text-align: center !important;
  }

  .node--type-listing .header-profile-info .field-address {
    justify-content: center !important;
    text-align: center !important;
  }

  .node--type-listing .field-phone-website-row {
    justify-content: center !important;
  }
}

/* ==========================================================================
   PROFIL FEJLEC – terkep soha ne fedjen tartalmat stackelt nezetben
   (append, 2026-07) – biztositek barmely abszolut pozicionalo szabaly ellen
   ========================================================================== */
@media (max-width: 991.98px) {
  .node--type-listing .business-detail-header .field-map {
    position: static !important;
    float: none !important;
    bottom: auto !important;
    right: auto !important;
    z-index: auto !important;
  }
}

/* ==========================================================================
   PROFIL FEJLEC – fix magassagok feloldasa stackelt nezetben (append, 2026-07)
   A rendelo_geocode/listing-header konyvtar CSS-e fix magassagot ad a
   .header-profile-row (360px) es .header-profile-info (204px) elemeknek a
   desktop (kep melletti) elrendezeshez. Mobil oszlopos elrendezesben a
   tartalom ennel magasabb, ezert a gombsor (weboldal link) kilogott es a
   terkep moge csuszott. Itt a magassag automatikus.
   ========================================================================== */
@media (max-width: 991.98px) {
  .node--type-listing .header-profile-row,
  .node--type-listing .business-detail-header .row > .col-md-8 {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  .node--type-listing .header-profile-info {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

/* ==========================================================================
   PROFIL FEJLEC – finomhangolas mobilon (append, 2026-07)
   Telefon gomb es weboldal link kozepre rendezve, egymas alatt;
   kompaktabb terkozok a nev es a cim korul.
   ========================================================================== */
@media (max-width: 767.98px) {
  .node--type-listing .field-phone-website-row {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    margin-top: 4px !important;
  }

  .node--type-listing .field-phone-website-row .field-phone {
    margin: 0 !important;
    text-align: center !important;
  }

  .node--type-listing .field-phone-website-row .field-website {
    margin: 0 !important;
    padding-left: 0 !important;
    justify-content: center !important;
  }

  .node--type-listing .header-profile-info .field-title {
    font-size: 1.75rem !important;
    margin-top: 8px !important;
    margin-bottom: 10px !important;
    padding-bottom: 6px !important;
    border-bottom: 0 !important;
  }

  .node--type-listing .header-profile-info .field-address {
    padding-bottom: 4px !important;
    margin-bottom: 6px !important;
  }

  .node--type-listing .business-detail-header .field-map {
    margin-top: 20px !important;
  }
}

/* ==========================================================================
   SZOLGALTATASOK BLOKK – elemek egymas alatt mobilon (append, 2026-07)
   Desktopon marad a tobb oszlopos (flex-wrap) elrendezes.
   ========================================================================== */
@media (max-width: 767.98px) {
  .node--type-listing.full .profil-szolgaltatasok .field--name-field-highlights .field__items {
    display: block !important;
  }

  .node--type-listing.full .profil-szolgaltatasok .field--name-field-highlights .field__item {
    display: flex !important;
    width: 100% !important;
    margin: 0 0 8px !important;
  }

  .node--type-listing.full .profil-szolgaltatasok .field--name-field-highlights .field__item:last-child {
    margin-bottom: 0 !important;
  }
}

/* ==========================================================================
   BLOGPOSZT – meta sor profilkeppel es "Cimkek:" chipek (append, 2026-07)
   --------------------------------------------------------------------------
   A profilkep a szerzo listing node-janak field_image_thumbnail kepe;
   a zold pipa + "Ellenorzott szakember" tooltip az ellenorzott_szakember
   modulbol jon (img.blog-card__author-image szelektor).
   ========================================================================== */

.node--type-article .blog-post__author--rich {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-top: .5rem;
}

.node--type-article .blog-post__avatar-link {
  flex: 0 0 auto;
  display: block;
  line-height: 0;
}

.node--type-article img.blog-post__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.node--type-article .blog-post__author-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .15rem;
  min-width: 0;
}

.node--type-article .blog-post__author-name {
  color: #6b7280;
  text-decoration: none;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.2;
}

.node--type-article .blog-post__author-name:hover {
  text-decoration: underline;
}

.node--type-article .blog-post__meta-line {
  color: #6b7280;
  font-size: .82rem;
  line-height: 1.3;
}

/* "Cimkek:" sor a cikk alatt – a Q&A node cimkeivel megegyezo kinezet. */
.node--type-article .blog-post__tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: 1.5rem;
}

.node--type-article .blog-post__tags-label {
  font-weight: 600;
  margin-right: .2rem;
}

.node--type-article a.blog-post__tag {
  display: inline-block;
  padding: .15rem .6rem;
  border-radius: 999px;
  background: #e7f0f8;
  color: #33607f;
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  text-decoration: none;
}

.node--type-article a.blog-post__tag:hover {
  background: #d5e6f3;
  text-decoration: none;
}

/* ==========================================================================
   BLOG METRO CSEMPEK (/blog, list_news view) – datum ikon el, szerzo
   profilkep a nev elott (append, 2026-07)
   --------------------------------------------------------------------------
   A zold pipa + "Ellenorzott szakember" tooltip az ellenorzott_szakember
   modulbol jon (img.blog-card__author-image szelektor).
   ========================================================================== */

/* Datum elotti ikon eltuntetese (markup ikon es ::before egyarant). */
html body .view-list-news .views-field-created i,
html body .view-list-news .views-field-created .fa,
html body .view-list-news .views-field-created svg {
  display: none !important;
}

html body .view-list-news .views-field-created::before,
html body .view-list-news .views-field-created .field-content::before {
  content: none !important;
}

/* Szerzo sor: profilkep + nev egy sorban. */
html body .view-list-news .views-field-name .field-content {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}

html body .view-list-news .blog-tile-author {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}

html body .view-list-news img.blog-tile-author__avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  flex: 0 0 auto;
}

/* A hover-animacio max-height ertekeben legyen hely az avatarnak. */
html body .view-list-news .views-row-inner:hover .views-field-name {
  max-height: 5.2em !important;
}

@media (max-width: 767px) {
  html body .view-list-news .views-field-name {
    max-height: 5.2em !important;
  }
}

/* ==========================================================================
   BLOGPOSZT – "Komment irasa" sor elvalasztasa a cimkektol (append, 2026-07)
   ========================================================================== */

html body .node--type-article .blog-post__tags {
  clear: both;
}

html body .node--type-article .article-content .blog-post__actions {
  clear: both;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid #ececec;
  text-align: right;
}

html body .node--type-article .article-content .blog-post__actions ul.links {
  float: none !important;
  display: inline-block;
  margin: 0;
  padding: 0;
}

/* ==========================================================================
   FRISS BLOGBEJEGYZESEK oldalsav blokk (news view, block_1) – blokk cim ne
   legyen csupa nagybetu, datum ikon el, szerzo meta sor (append, 2026-07)
   ========================================================================== */

/* Blokk cim: nagybetusites feloldasa. */
html body :is(div, section, aside):has(.block-latest-news) > h2,
html body :is(div, section, aside):has(.block-latest-news) > .block-title {
  text-transform: none !important;
}

/* Datum elotti ikon eltuntetese (barhonnan is jon). */
html body .block-latest-news .views-field-created i,
html body .block-latest-news .views-field-created .fa,
html body .block-latest-news .views-field-created svg {
  display: none !important;
}

html body .block-latest-news .views-field-created::before,
html body .block-latest-news .views-field-created .field-content::before {
  content: none !important;
}

/* Szerzo meta sor. */
html body .block-latest-news .latest-news-meta {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: .35rem;
  font-style: normal;
}

html body .block-latest-news .latest-news-meta__photo {
  flex: 0 0 auto;
  display: block;
  line-height: 0;
}

html body .block-latest-news img.latest-news-meta__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* A nagyobb (48px) avatarhoz a zold pipa (ellenorzott_szakember modul,
   alapertelmezetten 20px) mar aranyosan illeszkedik - ugyanaz a meret, amit
   a tobbi ~48-60px-es szerzo-avatarnal (blog, program csempek) is hasznal a
   modul, csak itt kicsit kijjebb toljuk, hogy a nagyobb keppel egyutt
   szepen a sarokba illeszkedjen. */
html body .block-latest-news .latest-news-meta__photo .ellenorzott-badge {
  right: 0;
  bottom: 0;
}

html body .block-latest-news .latest-news-meta__text {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  min-width: 0;
}

html body .block-latest-news .latest-news-meta__name {
  color: inherit;
  text-decoration: none;
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.2;
  font-style: normal;
}

html body .block-latest-news .latest-news-meta__name:hover {
  text-decoration: underline;
}

html body .block-latest-news .latest-news-meta__date {
  color: #6b7280;
  font-size: .75rem;
  line-height: 1.2;
  font-style: normal;
}

/* Blog metro csempe: a felhasznaloi ikon eltuntetese a szerzonev elol
   (append, 2026-07). */
html body .view-list-news .views-field-name i,
html body .view-list-news .views-field-name .fa,
html body .view-list-news .views-field-name svg {
  display: none !important;
}

html body .view-list-news .views-field-name::before,
html body .view-list-news .views-field-name .field-content::before,
html body .view-list-news .views-field-name a::before {
  content: none !important;
}

/* ==========================================================================
   PSZICHOLOGUS VALASZOL – cimke chipek hovere a blog chipekkel megegyezo
   (append, 2026-07)
   --------------------------------------------------------------------------
   A blog a.blog-post__tag hover parjaval azonos viselkedes: sotetebb kek
   hatter, alahuzas nelkul. A html body prefix a smink altalanos link-hover
   szabalyainak felulirasahoz kell.
   ========================================================================== */

html body a.pszv-tag:hover,
html body a.pszv-tag:focus {
  background: #d5e6f3;
  color: #33607f;
  text-decoration: none;
}
/* ==========================================================================
   KERESO SAV: a Chosen (Telepules/Problemakor) legordulo ne vagodjon le
   --------------------------------------------------------------------------
   A hero szekcio / a kereso konteneri overflow-ja levagta a kilogo Chosen
   listat. A hattterkep a sajat .background-image-holder tartojaban marad
   (annak overflow:hidden + inset:0 van), ezert a szekcio overflow-jat
   nyugodtan feloldhatjuk: a kep nem csuszik el tole.
   ========================================================================== */
section.bg-image:has(.block-listing-search-filters),
.bg-image:has(.block-listing-search-filters) > .container,
.block-listing-search-filters,
.block-listing-search-filters .views-exposed-form,
.block-listing-search-filters .form-search-listing,
.block-listing-search-filters .form-search-listing > .form-item,
.block-listing-search-filters .form-search-listing > .js-form-item,
.block-listing-search-filters .form-search-listing .chosen-container {
  overflow: visible !important;
}

/* A nyitott legordulo a kereso tobbi eleme es a kovetkezo szekcio fole kerul.
   (A hero > .container z-index:1 miatt a teljes tartalom a kovetkezo szekcio
   fole rajzolodik, ez csak a Chosen retegsorrendjet biztositja a savon belul.) */
.block-listing-search-filters .chosen-container .chosen-drop {
  z-index: 1002 !important;
}
.block-listing-search-filters .chosen-container.chosen-with-drop {
  z-index: 1002 !important;
}


/* === Ajanlatkeres (offer_request) node - kartyas megjelenes (v2) === */

.oreq-card {
  max-width: 720px;
  margin: 0 auto 2rem;
  background: #ffffff;
  border: 1px solid #e7ebf0;
  border-radius: 14px;
  box-shadow: 0 4px 18px rgba(20, 40, 80, 0.06);
  padding: 1.75rem 2rem 2rem;
}

.oreq-card__top {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1.4rem;
}

.oreq-badge {
  background: #e8f5e6;
  color: #2f7d39;
  font-weight: 600;
  font-size: 0.78rem;
  padding: 0.3em 0.75em;
  border-radius: 999px;
  letter-spacing: 0.02em;
}

.oreq-date {
  color: #7a828c;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
}

.oreq-date::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f133";
  margin-right: 0.45em;
  color: #9aa2ab;
}

.oreq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.75rem;
  margin-bottom: 1.5rem;
}

@media (max-width: 600px) {
  .oreq-grid {
    grid-template-columns: 1fr;
  }
  .oreq-card {
    padding: 1.25rem 1.25rem 1.5rem;
  }
}

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

.oreq-item__icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #f2f5f9;
  color: #5b6b82;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.oreq-item__icon::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 0.95rem;
}

.oreq-item--name .oreq-item__icon::before    { content: "\f007"; }
.oreq-item--phone .oreq-item__icon::before   { content: "\f095"; }
.oreq-item--email .oreq-item__icon::before   { content: "\f0e0"; }
.oreq-item--county .oreq-item__icon::before  { content: "\f3c5"; }
.oreq-item--problem .oreq-item__icon::before { content: "\f02b"; }
.oreq-item--online .oreq-item__icon::before  { content: "\f03d"; }

.oreq-item__body {
  min-width: 0;
}

.oreq-item__label {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #8a929c;
  margin-bottom: 0.12rem;
}

.oreq-item__value {
  font-weight: 600;
  color: #28313c;
  word-break: break-word;
}

.oreq-item__value a {
  color: #33607f;
  text-decoration: none;
}

.oreq-item__value a:hover {
  text-decoration: underline;
}

.oreq-yes,
.oreq-no {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.14em 0.6em;
  border-radius: 6px;
}

.oreq-yes { background: #e8f5e6; color: #2f7d39; }
.oreq-no  { background: #f1f3f5; color: #6c757d; }

.oreq-desc {
  margin-top: 0.5rem;
  border-top: 1px solid #eef1f5;
  padding-top: 1.4rem;
}

.oreq-desc__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #28313c;
  margin: 0 0 0.65rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.oreq-desc__title::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f075";
  color: #9aa2ab;
  font-size: 0.95rem;
}

.oreq-desc__body {
  color: #3d4650;
  line-height: 1.7;
  background: #f7f9fb;
  border-left: 3px solid #cdd8e4;
  border-radius: 0 8px 8px 0;
  padding: 1rem 1.2rem;
}

.oreq-desc__body p:last-child {
  margin-bottom: 0;
}


/* === Ajanlatkeres (offer_request) node - kartyas megjelenes (v2) === */

.oreq-card {
  max-width: 720px;
  margin: 0 auto 2rem;
  background: #ffffff;
  border: 1px solid #e7ebf0;
  border-radius: 14px;
  box-shadow: 0 4px 18px rgba(20, 40, 80, 0.06);
  padding: 1.75rem 2rem 2rem;
}

.oreq-card__top {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1.4rem;
}

.oreq-badge {
  background: #e8f5e6;
  color: #2f7d39;
  font-weight: 600;
  font-size: 0.78rem;
  padding: 0.3em 0.75em;
  border-radius: 999px;
  letter-spacing: 0.02em;
}

.oreq-date {
  color: #7a828c;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
}

.oreq-date::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f133";
  margin-right: 0.45em;
  color: #9aa2ab;
}

.oreq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.75rem;
  margin-bottom: 1.5rem;
}

@media (max-width: 600px) {
  .oreq-grid {
    grid-template-columns: 1fr;
  }
  .oreq-card {
    padding: 1.25rem 1.25rem 1.5rem;
  }
}

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

.oreq-item__icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #f2f5f9;
  color: #5b6b82;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.oreq-item__icon::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 0.95rem;
}

.oreq-item--name .oreq-item__icon::before    { content: "\f007"; }
.oreq-item--phone .oreq-item__icon::before   { content: "\f095"; }
.oreq-item--email .oreq-item__icon::before   { content: "\f0e0"; }
.oreq-item--county .oreq-item__icon::before  { content: "\f3c5"; }
.oreq-item--problem .oreq-item__icon::before { content: "\f02b"; }
.oreq-item--online .oreq-item__icon::before  { content: "\f03d"; }

.oreq-item__body {
  min-width: 0;
}

.oreq-item__label {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #8a929c;
  margin-bottom: 0.12rem;
}

.oreq-item__value {
  font-weight: 600;
  color: #28313c;
  word-break: break-word;
}

.oreq-item__value a {
  color: #33607f;
  text-decoration: none;
}

.oreq-item__value a:hover {
  text-decoration: underline;
}

.oreq-yes,
.oreq-no {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.14em 0.6em;
  border-radius: 6px;
}

.oreq-yes { background: #e8f5e6; color: #2f7d39; }
.oreq-no  { background: #f1f3f5; color: #6c757d; }

.oreq-desc {
  margin-top: 0.5rem;
  border-top: 1px solid #eef1f5;
  padding-top: 1.4rem;
}

.oreq-desc__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #28313c;
  margin: 0 0 0.65rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.oreq-desc__title::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f075";
  color: #9aa2ab;
  font-size: 0.95rem;
}

.oreq-desc__body {
  color: #3d4650;
  line-height: 1.7;
  background: #f7f9fb;
  border-left: 3px solid #cdd8e4;
  border-radius: 0 8px 8px 0;
  padding: 1rem 1.2rem;
}

.oreq-desc__body p:last-child {
  margin-bottom: 0;
}

.oreq-actions {
  margin-top: 1.4rem;
  padding-top: 1.25rem;
  border-top: 1px solid #eef1f5;
}

/* A modul .ajanlatkeres-lezarva jelzese a kartyan belul is jol olvashato legyen. */
.oreq-actions .ajanlatkeres-lezarva {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: #fdecec;
  color: #b02a2a;
  font-weight: 600;
  padding: 0.5em 0.9em;
  border-radius: 8px;
}

.oreq-actions .ajanlatkeres-lezarva::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f023";
}

/* === /ajanlatkeresek lista: Statusz oszlop jelvenyei === */

.ajk-statusz {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.18em 0.6em;
  border-radius: 6px;
  white-space: nowrap;
}

.ajk-statusz--nyitva  { background: #e8f5e6; color: #2f7d39; }
.ajk-statusz--lezarva { background: #fdecec; color: #b02a2a; }



/* ============================================================
   Oradijak / Arak - negy oszlopos sor
   Tipus | Megjegyzes | Idotartam | Ar
   A paragraph--oradijak-arak.html.twig sablon markupjahoz.
   A korabbi ket oszlopos kartya-szabalyokat felulirja, azok
   valtozatlanul a helyukon maradnak.
   ============================================================ */

.node--type-listing.full .profil-arak-lista .paragraph.oradij-paragraph {
  display: block;
  padding: 12px 18px;
}

.node--type-listing.full .profil-arak-lista .oradij-paragraph .oradij-sor {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.7fr) minmax(0, 0.9fr) minmax(0, 0.8fr);
  align-items: center;
  gap: 4px 18px;
}

/* Explicit oszlopok: a DOM sorrendtol fuggetlenul mindig ide kerulnek. */
.node--type-listing.full .profil-arak-lista .oradij-paragraph .oradij-tipus      { grid-column: 1; }
.node--type-listing.full .profil-arak-lista .oradij-paragraph .oradij-megjegyzes { grid-column: 2; }
.node--type-listing.full .profil-arak-lista .oradij-paragraph .oradij-idotartam  { grid-column: 3; }
.node--type-listing.full .profil-arak-lista .oradij-paragraph .oradij-ar         { grid-column: 4; }

/* A regi kartya-szabalyok semlegesitese az uj markupon. */
.node--type-listing.full .profil-arak-lista .oradij-paragraph .field--name-field-szolgaltatas,
.node--type-listing.full .profil-arak-lista .oradij-paragraph .field--name-field-idoegyseg,
.node--type-listing.full .profil-arak-lista .oradij-paragraph .field--name-field-dij,
.node--type-listing.full .profil-arak-lista .oradij-paragraph .field--name-field-szolgaltatas2 {
  grid-column: auto;
  padding: 0;
  margin: 0;
  border: 0;
  text-align: inherit;
  font-weight: inherit;
  font-size: inherit;
  color: inherit;
}

/* Cellak. */
.node--type-listing.full .profil-arak-lista .oradij-paragraph .oradij-cella {
  min-width: 0;
  overflow-wrap: anywhere;
}

.node--type-listing.full .profil-arak-lista .oradij-paragraph .oradij-tipus {
  font-weight: 700;
  font-size: 0.95rem;
  color: #2c3e50;
}

.node--type-listing.full .profil-arak-lista .oradij-paragraph .oradij-megjegyzes {
  font-size: 0.88rem;
  color: #6b7785;
  line-height: 1.35;
}

.node--type-listing.full .profil-arak-lista .oradij-paragraph .oradij-idotartam {
  font-size: 0.88rem;
  color: #555;
  white-space: nowrap;
}

.node--type-listing.full .profil-arak-lista .oradij-paragraph .oradij-ar,
.node--type-listing.full .profil-arak-lista .oradij-paragraph .oradij-ar .field__item {
  font-size: 1rem;
  font-weight: 700;
  color: #5b9dc6;
  text-align: right;
  white-space: nowrap;
}

/* Mobil: a negy oszlop egymas ala kerul, minden ertek elott a sajat
   cimkeje (a cella data-cimke attributumabol). Ures megjegyzes eltunik. */
@media (max-width: 767.98px) {
  .node--type-listing.full .profil-arak-lista .oradij-paragraph .oradij-sor {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .node--type-listing.full .profil-arak-lista .oradij-paragraph .oradij-tipus,
  .node--type-listing.full .profil-arak-lista .oradij-paragraph .oradij-megjegyzes,
  .node--type-listing.full .profil-arak-lista .oradij-paragraph .oradij-idotartam,
  .node--type-listing.full .profil-arak-lista .oradij-paragraph .oradij-ar {
    grid-column: 1;
  }

  .node--type-listing.full .profil-arak-lista .oradij-paragraph .oradij-cella::before {
    content: attr(data-cimke);
    display: block;
    margin-bottom: 2px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #9aa5b1;
  }

  .node--type-listing.full .profil-arak-lista .oradij-paragraph .oradij-ures {
    display: none;
  }

  .node--type-listing.full .profil-arak-lista .oradij-paragraph .oradij-ar,
  .node--type-listing.full .profil-arak-lista .oradij-paragraph .oradij-ar .field__item {
    text-align: left;
  }

  .node--type-listing.full .profil-arak-lista .oradij-paragraph .oradij-tipus {
    padding-bottom: 8px;
    border-bottom: 1px solid #e8edf2;
  }
}

/* Mobil: a Tipus es a Megjegyzes cella folott ne jelenjen meg cimke.
   Ezek ertekei onmagukert beszelnek; az Idotartam es az Ar cimkeje marad. */
@media (max-width: 767.98px) {
  .node--type-listing.full .profil-arak-lista .oradij-paragraph .oradij-tipus::before,
  .node--type-listing.full .profil-arak-lista .oradij-paragraph .oradij-megjegyzes::before {
    content: none;
    display: none;
  }
}

/* ============================================================
   Profiloldal: "Pszichologus valaszol" blokk.
   A keret es a kartyak a Blogbejegyzesek osztalyait hasznaljak
   (.profil-blogbejegyzesek / .profil-blog-grid / .profil-blog-kartya),
   itt csak a kep nelkuli kartya elteresei allnak.
   ============================================================ */

/* A blogblokk clear: both szabalya a valaszblokkra is jo, de a ket
   szekcio kozott kell egy kis levego. */
.node--type-listing.full .profil-pszv-valaszok {
  margin-top: 24px;
}

/* Kep nelkuli kartya: a tartalom kapja a felso terkozt, es egy vekony
   szines savot, hogy ne tunjon csupasznak a kartya teteje. */
.node--type-listing.full .profil-pszv-kartya {
  border-top: 3px solid #5b9dc6;
}

.node--type-listing.full .profil-pszv-kartya .profil-blog-kartya-tartalom {
  padding-top: 16px;
}

/* Egyforma magassag: a "Valasz megtekintese" link mindig a kartya aljan. */
.node--type-listing.full .profil-pszv-kartya .profil-blog-kartya-tovabb {
  margin-top: auto;
}

/* Mobil sorrend: kozvetlenul a Blogbejegyzesek utan (az order: 9 ertek
   megegyezik, a holtversenyt a DOM sorrend donti el, es a sablonban a
   valaszblokk a blog utan all). */
@media (max-width: 991.98px) {
  .node--type-listing .business-detail-main .profil-pszv-valaszok {
    order: 9;
  }
}

/* ===== Tudastar tema-blokk (lexikon leiras oldal also blokkja) ===== */
.tudastar-tema-blokk {
  margin: 2.5rem 0 1rem;
  padding: 1.5rem;
  background: #f7f9fc;
  border: 1px solid #e3e8ef;
  border-radius: 12px;
}
.tudastar-tema-blokk h3 {
  margin: 0 0 1rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: #2a2f45;
}
.tudastar-tema-linkek {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.tudastar-tema-link {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1rem 1.25rem;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  color: #fff;
  transition: transform .15s ease, box-shadow .15s ease;
}
.tudastar-tema-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  color: #fff;
  text-decoration: none;
}
.tudastar-tema-blog   { background: #5b9dc6; }
.tudastar-tema-kerdes { background: #7cc576; }
.tudastar-tema-link i { font-size: 1.4rem; line-height: 1; }
.tudastar-tema-cimke  { font-size: 1rem; }
@media (max-width: 767px) {
  .tudastar-tema-linkek { grid-template-columns: 1fr; }
}
/* ==========================================================================
   PROFIL OLDAL - gombszinek egysegesitese (append, 2026-07)
   A tema Bootstrap 5 alapu, ezert a --bs-btn-* valtozokat is beallitjuk (igy a
   hover/active allapotokat a Bootstrap sajat logikaja is helyesen szinezi), es
   direkt szabalyokkal is rogzitjuk oket.
   ========================================================================== */

/* --- Telefonszam mutatasa: alap #5b9dc6, KATTINTASRA #7cc576, szoveg feher --- */
.node--type-listing.full .show-phone-btn {
  --bs-btn-bg: #5b9dc6;
  --bs-btn-border-color: #5b9dc6;
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: #5b9dc6;
  --bs-btn-hover-border-color: #5b9dc6;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #7cc576;
  --bs-btn-active-border-color: #7cc576;
  --bs-btn-active-color: #fff;
}

.node--type-listing.full .show-phone-btn,
.node--type-listing.full .show-phone-btn:hover,
.node--type-listing.full .show-phone-btn:focus,
.node--type-listing.full .show-phone-btn:focus-visible {
  background-color: #5b9dc6;
  border-color: #5b9dc6;
  color: #fff;
}

.node--type-listing.full .show-phone-btn:active,
.node--type-listing.full .show-phone-btn:focus:active,
.node--type-listing.full .show-phone-btn.active {
  background-color: #7cc576;
  border-color: #7cc576;
  color: #fff;
}

/* --- Ertekeles irasa / Uzenet irasa / Pszichologus valaszol gombok:
       alap #5b9dc6, hover #497e9e, szoveg feher --- */
.node--type-listing.full .listing-action-btn {
  --bs-btn-bg: #5b9dc6;
  --bs-btn-border-color: #5b9dc6;
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: #497e9e;
  --bs-btn-hover-border-color: #497e9e;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #497e9e;
  --bs-btn-active-border-color: #497e9e;
  --bs-btn-active-color: #fff;
}

.node--type-listing.full .listing-action-btn,
.node--type-listing.full .listing-action-btn:link,
.node--type-listing.full .listing-action-btn:visited {
  background-color: #5b9dc6;
  border-color: #5b9dc6;
  color: #fff;
}

.node--type-listing.full .listing-action-btn:hover,
.node--type-listing.full .listing-action-btn:focus,
.node--type-listing.full .listing-action-btn:focus-visible,
.node--type-listing.full .listing-action-btn:active,
.node--type-listing.full .listing-action-btn.active {
  background-color: #497e9e;
  border-color: #497e9e;
  color: #fff;
}

/* --- Telefonszam (a gomb helyen megjeleno szam): zold chip, feher szoveg ---
   A show-phone.js inline-block-ra allitja a display-t, ezert a fuggoleges
   padding is ervenyesul. A meretek a btn-sm-mel egyeznek. */
.node--type-listing.full .phone-number {
  background-color: #7cc576;
  padding: .25rem .5rem;
  border-radius: .25rem;
  font-size: .875rem;
  line-height: 1.5;
}

.node--type-listing.full .phone-number,
.node--type-listing.full .phone-number i,
.node--type-listing.full .phone-number a,
.node--type-listing.full .phone-number a:link,
.node--type-listing.full .phone-number a:visited,
.node--type-listing.full .phone-number a:hover,
.node--type-listing.full .phone-number a:focus {
  color: #fff;
}

.node--type-listing.full .phone-number a:hover,
.node--type-listing.full .phone-number a:focus {
  text-decoration: underline;
}

/* --- Rendelo(k): a cim ikonja is kek (mint a tobbi profil-ikon) --- */
.node--type-listing.full .profil-rendelo-cim i {
  color: #5b9dc6;
}

/* ==========================================================================
   FOMENU ES KERESO SAV: #497e9e (append, 2026-07)
   --------------------------------------------------------------------------
   A theme.css a --main-color (#5b9dc6) valtozot hasznalja mindket helyen.
   A valtozot NEM irjuk at, mert az egesz sminkben hasznalatban van (gombok,
   ikonok, keretek); csak ezt a ket helyet szinezzuk at.

   Eredeti theme.css szabalyok:
     #main-navigation .menu > li.active > a  -> background: var(--main-color)
     body:not(.page-node-type-listing) .region-fullwidth -> background: var(--main-color)

   A "body" prefix a specificitas emelesere kell, hogy a betoltesi sorrendtol
   fuggetlenul nyerjen -- igy nem kell !important.
   ========================================================================== */

/* --- 1. Fomenu: aktiv es hover menupont #497e9e ------------------------- */
body #main-navigation .menu > li.active > a,
body #main-navigation .menu > li:hover > a,
body #main-navigation .menu > li.active > span,
body #main-navigation .menu > li:hover > span,
body #main-navigation .menu > li > a.is-active,
body #main-navigation .menu > li.menu-item--active-trail > a {
  background: #497e9e;
  color: #fff;
}

/* Legordulo almenu hattere */
body #main-navigation .menu > li ul {
  background: #497e9e;
}

/* Almenupont hover/aktiv szovegszine (feher hatteren) */
body #main-navigation .menu > li > ul a:hover,
body #main-navigation .menu > li > ul a.active,
body #main-navigation .menu > li > ul a.is-active {
  color: #497e9e;
}

/* --- 2. Kereso sav (a kereso urlapot tartalmazo teljes szelessegu sav) --- */
body:not(.page-node-type-listing) .region-fullwidth:has(.block-listing-search-filters) {
  background: #497e9e;
}

/* ==========================================================================
   FEJLEC SAV (logo + fomenu): #5b9dc6 (append, 2026-07)
   --------------------------------------------------------------------------
   Eredeti theme.css szabaly:
     #header -> background-color: #fff; border-bottom: 1px solid var(--main-color);

   A border-bottom (#5b9dc6) egy 1 px-es vilagoskek vonal a fejlec aljan. A
   fejlec tobbi reszen nem tunik fel (azonos a hatterrel), de az aktiv menupont
   (#497e9e) alatt vilagos vonalkent elvalasztja a fulet a kereso savtol.

   A border-bottom-color: transparent NEM megoldas: a background-clip alapertek
   border-box, ezert a #5b9dc6 hatter atut a border alatt. A szelesseget kell
   nullazni. Ez 1 px-es elrendezesi valtozas: a fejlec 1 px-szel alacsonyabb
   lesz, az alatta levo tartalom 1 px-szel feljebb csuszik.
   ========================================================================== */

body #header {
  background-color: #5b9dc6;
  border-bottom-width: 0;
}

/* ==========================================================================
   BELEPES | REGISZTRACIO SAV (append, 2026-07)
   --------------------------------------------------------------------------
   Markup:
     <div id="header-top"> ... <p class="list-social-icons">
       <a href="/user/login">Belepes</a> | <a href="/regisztracio">Regisztracio</a>
     </p>

   Eredeti theme.css szabalyok, amiket semlegesiteni kell:
     #header-top          -> background-color: #fff; border-bottom: 1px solid #EBEBEB;
     .list-social-icons   -> border-top: 1px solid #ebebeb;
     a (globalis)         -> color: var(--main-color)   [#5b9dc6 kek hatteren olvashatatlan]

   Dizajn: a sav osszeolvad az alatta levo #5b9dc6 fejleccel; a linkek feherek,
   a "|" elvalaszto attetszo feher. Hoverre feher pirula sotetkek betuvel --
   ugyanaz a minta, mint a smink sajat legordulo almenujenel
   (#main-navigation .menu > li > ul a:hover -> color: var(--main-color);
   background-color: white).

   A linkek inline elemek maradnak, ezert a fuggoleges padding NEM noveli a sav
   magassagat -- a sav merete valtozatlan.
   ========================================================================== */

body #header-top {
  background-color: #5b9dc6;
  border-bottom-color: #5b9dc6;
}

/* A <p> szurke felso vonala eltunik, a "|" elvalaszto attetszo feher lesz. */
body #header-top .list-social-icons {
  border-top-color: #5b9dc6;
  color: rgba(255, 255, 255, 0.5);
}

/* Belepes / Regisztracio: feher, pirula alaku hover-felulettel. */
body #header-top .list-social-icons a,
body #header-top .list-social-icons a:link,
body #header-top .list-social-icons a:visited {
  color: #fff;
  font-weight: 500;
  padding: 2px 12px;
  border-radius: 999px;
}

body #header-top .list-social-icons a:hover,
body #header-top .list-social-icons a:focus {
  color: #497e9e;
  background-color: #fff;
}

/* ==========================================================================
   ALAPERTELMEZETT BETUTIPUS: Poppins (append, 2026-07)
   --------------------------------------------------------------------------
   A theme.css igy epul fel:
     :root { --main-font-family: 'Inter'; }
     body  { font-family: var(--main-font-family), sans-serif; }

   Ezert eleg a valtozot atirni -- a lezaro sans-serif-et a theme.css sajat
   szabalya teszi hozza, igy az eredmeny pontosan:
     Poppins, Arial, "Helvetica Neue", sans-serif

   A "html" prefix a specificitas emelesere kell (:root = 0,1,0 -> html:root =
   0,1,1), hogy a betoltesi sorrendtol fuggetlenul nyerjen.

   A fontot a bizreview.libraries.yml tolti be (Google Fonts, external CSS),
   a 300/400/500/600/700 vagatokkal. @import-ot azert nem hasznalunk, mert az
   csak a fajl legelejen ervenyes, es a Drupal CSS-aggregacio elmozdithatja.
   ========================================================================== */

html:root {
  --main-font-family: 'Poppins', Arial, 'Helvetica Neue';
}

/* ==========================================================================
   POPPINS MINDENHOL (append, 2026-07)
   --------------------------------------------------------------------------
   A theme.css-ben 5 helyen van fixen bedrotozott szovegfont, amit a
   --main-font-family valtozo nem er el. Ezeket irjuk at.

   FONTOS: az ikonfontokat (Font Awesome 5 Free / fontawesome) NEM szabad
   atirni -- a theme.css-ben 14, a custom.css-ben 9 ilyen ::before / ::after
   szabaly van, ezek nelkul az ikonok helyen negyzetek vagy betuk jelennenek
   meg. Ezert nincs globalis "* { font-family: ... }" szabaly.

   A var(--main-font-family)-t hasznalo szabalyok (body, .field-title) mar
   automatikusan Poppins-t kapnak, azokkal nincs teendo.
   ========================================================================== */

/* A Bootstrap sajat valtozoja is Poppins-ra all, ha a smink hasznalja. */
html:root {
  --bs-body-font-family: 'Poppins', Arial, 'Helvetica Neue', sans-serif;
}

/* 1. blockquote (eredetileg Georgia, "Times New Roman", Times, serif) */
body p.blockquote {
  font-family: 'Poppins', Arial, 'Helvetica Neue', sans-serif;
}

/* 2. Ar-osszehasonlito tabla fejlec (eredetileg Roboto, sans-serif) */
body .price-comparison table thead {
  font-family: 'Poppins', Arial, 'Helvetica Neue', sans-serif;
}

/* 3. Accordion torzs (eredetileg "Open Sans", sans-serif) */
body .accordion .card-body {
  font-family: 'Poppins', Arial, 'Helvetica Neue', sans-serif;
}

/* 4-5. Esemeny-cimek (eredetileg "Raleway", sans-serif) */
body .node--type-listing .content .field-collection-container .field.field-name-field-event-title,
body .block-events.view-events .views-field-field-event-title {
  font-family: 'Poppins', Arial, 'Helvetica Neue', sans-serif;
}

/* Az urlapelemek a bongeszo alapertelmezese szerint NEM oroklik a
   font-family-t, ezert expliciten oroklesre allitjuk oket. */
body input,
body select,
body textarea,
body button,
body optgroup {
  font-family: inherit;
}

/* ==========================================================================
   OLDAL HATTERE: #fdfdfd (append, 2026-07)
   --------------------------------------------------------------------------
   A theme.css a body-nak NEM ad hattert -- a feher a bongeszo (illetve a
   Bootstrap --bs-body-bg) alapertelmezese. Ezert a body-t expliciten
   beallitjuk, es vele a Bootstrap sajat valtozojat is.

   Emellett harom teljes szelessegu, oldalhatter-szerepu elemnek van sajat
   feher hattere a theme.css-ben; ezek kitakarnak a body-t, ezert oket is at
   kell allitani. Barmelyik sor kihagyhato, ha valamelyik terulet megis feher
   maradna:
     #preface              -> background: #fff
     #top-content          -> background-color: #ffffff
     .main-content-inner   -> background: #fff  (csak forum/user/node/
                              latest-reviews/my-reviews utvonalakon)

   A kartyak, panelek es a jobb oldali blokkok sajat feher hatteret NEM
   valtoztatjuk -- azok igy finom kontrasztot kapnak az #fdfdfd oldalhatteren.
   ========================================================================== */

html:root {
  --bs-body-bg: #fdfdfd;
}

body {
  background-color: #fdfdfd;
}

body #preface {
  background: #fdfdfd;
}

body #top-content {
  background-color: #fdfdfd;
}

body.path-forum .main-content-inner,
body.path-user .main-content-inner,
body.path-node .main-content-inner,
body.path-latest-reviews .main-content-inner,
body.path-my-reviews .main-content-inner {
  background: #fdfdfd;
}

/* ==========================================================================
   FOMENU: alapertelmezett fontszin #FFFFFF (append, 2026-07)
   --------------------------------------------------------------------------
   Eredeti theme.css szabaly:
     #main-navigation .menu > li > a,
     #main-navigation .menu > li > span { color: var(--main-heading-color); }
   Ez #25272C (sotet), ami a #5b9dc6 fejlecsavon rossz kontrasztot ad.
   Az aktiv/hover allapot mar korabban is #fff -- ez a szabaly az alaphelyzetet
   hozza vele osszhangba.
   ========================================================================== */

body #main-navigation .menu > li > a,
body #main-navigation .menu > li > span {
  color: #fff;
}

/* ==========================================================================
   HIBA/OTLET URLAP: fajlfeltoltes leiro szovegek elrejtese (append, 2026-07)
   --------------------------------------------------------------------------
   Elrejtett szovegek (a Drupal core file_upload_help generalja a fajlmezo
   widget #description-jebe):
     "Csak egy fajl."
     "100 MB korlat."
     "Engedelyezett tipusok: png gif jpg jpeg webp."

   Scope: a hiba_otlet node urlapja. Attributum-szelektort hasznalunk (id^=),
   mert a Drupal szamozott utotagot (pl. --2) tehet a form ID vegere, ha tobb
   urlap van az oldalon.

   Mindket osztalynev szerepel: a Barrio ".description"-t, a Gin (amit a
   profil_admin_theme hoz ra) ".form-item__description"-t hasznal.

   Ezen az urlapon ez az egyetlen leiro szoveg -- a Link es a Leiras mezonek
   nincs #description-je --, ezert az urlapra szukitett szabaly biztonsagos.
   ========================================================================== */

body form[id^="node-hiba-otlet-form"] .description,
body form[id^="node-hiba-otlet-form"] .form-item__description {
  display: none;
}

/* ==========================================================================
   TOOLBAR USER-FUL: link a fooldalra, alahuzas nelkul (append, 2026-07)
   --------------------------------------------------------------------------
   A feliratot es a href="/"-et a listing_profile_toolbar_alter() adja
   szerver oldalon.

   FONTOS: itt NINCS "color" deklaracio. Korabban color: inherit volt, ami
   elrontotta a szint: a core a szint kozvetlenul a .toolbar-item elemre teszi,
   ezert az inherit a szurke szulotol orokolt. A color elhagyasaval a core sajat
   szabalya ervenyesul -- pontosan az a szin, ami eredetileg is volt.

   Csak az alahuzast vesszuk le, mert a href megjelenesevel az <a> mar valodi
   linknek szamit.
   ========================================================================== */

#toolbar-administration #toolbar-item-user,
#toolbar-administration #toolbar-item-user:link,
#toolbar-administration #toolbar-item-user:visited,
#toolbar-administration #toolbar-item-user:hover,
#toolbar-administration #toolbar-item-user:focus,
#toolbar-administration #toolbar-item-user:active,
#toolbar-administration #toolbar-item-user .listing-profile-user-name,
#toolbar-administration #toolbar-item-user .listing-profile-package {
  text-decoration: none;
}


/* ==========================================================================
   OLDAL HATTERE: #f8f9fb (append, 2026-07)
   --------------------------------------------------------------------------
   Feluliraja a fentebbi #fdfdfd blokkot. Ugyanazok a szelektorok, azonos
   specificitassal -- a kesobbi deklaracio nyer, ezert a korabbi blokkot NEM
   kell szerkeszteni.

   Erintett teruletek: a hero kep alatti teljes tartalmi sav (Ajanlott
   pszichologusok, Kiemelt pszichologusok, Friss blogbejegyzesek, Pszichologus
   valaszol, Friss ertekelesek, Programok) egeszen a sotet footerig.

   A hero (sajat hatterkep) es a footer (sajat sotet hatter) nem valtozik.
   A kartyak/panelek feher hattere valtozatlan -- azok igy kapnak kontrasztot.
   ========================================================================== */

html:root {
  --bs-body-bg: #f8f9fb;
}

body {
  background-color: #f8f9fb;
}

body #preface {
  background: #f8f9fb;
}

body #top-content {
  background-color: #f8f9fb;
}

body.path-forum .main-content-inner,
body.path-user .main-content-inner,
body.path-node .main-content-inner,
body.path-latest-reviews .main-content-inner,
body.path-my-reviews .main-content-inner {
  background: #f8f9fb;
}

/* ==========================================================================
   FOOLDALI SZEKCIO-PANELEK HATTERE: #f8f9fb (append, 2026-07)
   --------------------------------------------------------------------------
   Eredeti theme.css szabaly (14. Various Views & Blocks):
     .region-content-bottom .block { margin-top: 30px; background: #fff; }

   Ez adja a fooldali szekciok (Ajanlott pszichologusok, Kiemelt
   pszichologusok, Friss blogbejegyzesek, Pszichologus valaszol, Friss
   ertekelesek, Programok) feher panel-hatteret. A body ala igazitjuk.

   A "body" prefix csak a specificitas miatt kell (0,0,1,2 vs. az eredeti
   0,0,1,1) -- igy nem szamit a fajlok betoltesi sorrendje.

   A paneleken BELULI kartyak sajat feher hattere valtozatlan marad, azok
   igy kapjak a kontrasztot.
   ========================================================================== */

body .region-content-bottom .block {
  background-color: #f8f9fb;
}

/* ==========================================================================
   CAROUSEL PANEL HATTERE: #f8f9fb (append, 2026-07)
   --------------------------------------------------------------------------
   A fooldali szekciok feher panelje NEM a .region-content-bottom .block, hanem
   maga a carousel-konteener:
     <div class="bizreview-carousel is-ready" data-bizreview-carousel>
   (a szekcio cime a panelen KIVUL, a szurke oldalhatteren ul).

   A meglevo szabaly:
     .bizreview-carousel { background: #fff !important; background-image: none
                           !important; border: 0 !important; }
   Ez shorthand + !important, ezert csak !important es magasabb specificitas
   uti at. A "body" prefix adja a plusz specificitast (0,0,1,1 vs. 0,0,1,0),
   igy a fajlok betoltesi sorrendje (custom.css vs. local.css vs. modul-CSS)
   nem szamit.

   Csak a background-color-t irjuk felul -- a background-image: none es a
   border: 0 az eredeti szabalybol tovabb ervenyesul.

   A kartyak (.blog-card / .psy-card) sajat feher hattere valtozatlan, azok
   igy kapjak a kontrasztot a panelen.
   ========================================================================== */

body .bizreview-carousel {
  background-color: #f8f9fb !important;
}

/* ==========================================================================
   CAROUSEL PANEL HATTERE -- JAVITAS (append, 2026-07)
   --------------------------------------------------------------------------
   A fenti "body .bizreview-carousel" blokk keves volt. A DevTools alapjan az
   eredeti szabaly (blog-carousel.css:221) HAROM elemre vonatkozik:

     .bizreview-carousel,
     .bizreview-carousel .bizreview-carousel__viewport,
     .bizreview-carousel .bizreview-carousel__track {
       background: #fff !important;
       background-image: none !important;
       border: 0 !important;
     }

   A __viewport es a __track teljesen kitolti a panelt, ezert azok feher
   hattere takarta a kulso div atszinezeset.

   Specificitas: az eredeti leszarmazott szelektorok 0,0,2,0-sak, ezert a
   "body" prefix (0,0,2,1) kell mindharom sorhoz, plusz az !important.

   Csak a background-color-t irjuk felul -- a background-image: none es a
   border: 0 az eredeti szabalybol tovabb ervenyesul.
   ========================================================================== */

body .bizreview-carousel,
body .bizreview-carousel .bizreview-carousel__viewport,
body .bizreview-carousel .bizreview-carousel__track {
  background-color: #f8f9fb !important;
}

/* ==========================================================================
   OLDAL HATTERE: a FAQ oldal PONTOS gradiense a sav-elemen (append, 2026-07)
   --------------------------------------------------------------------------
   A pszichologuskereso_gyik.html hero gradiensenek pontos ertekei, de a
   valodi sav-wrapperre (#top-content, #preface) teve, fixed NELKUL -> igy a
   fooldalon ES az aloldalakon egyarant latszik. A tint fent (a hero alatt)
   erosebb, lefele halvanyul -- pont mint a FAQ heroban.

   A panel/carousel feluleteket es a .main-content-inner-t atlatszova tesszuk,
   hogy a sav gradiense atusson. A feher kartyak valtozatlanok. Csak festesi
   tulajdonsagok. Kesobbi deklaracio nyer.
   ========================================================================== */

:root {
  --bs-body-bg: #fdfdfd;
}

body {
  background-color: #fdfdfd;
}

body #top-content,
body #preface {
  background-color: #fdfdfd;
  background-image:
    radial-gradient(120% 140% at 88% -10%, rgba(124, 197, 118, 0.18), transparent 46%),
    radial-gradient(120% 130% at 6% 4%, rgba(91, 157, 198, 0.20), transparent 52%),
    linear-gradient(180deg, #f6fafc 0%, #fdfdfd 100%);
  background-repeat: no-repeat;
}

body .main-content-inner,
body .region-content-bottom .block,
body .region-content-bottom .block .block-inner {
  background: transparent !important;
}

body .bizreview-carousel,
body .bizreview-carousel .bizreview-carousel__viewport,
body .bizreview-carousel .bizreview-carousel__track {
  background-color: transparent !important;
}

/* ==========================================================================
   OLDAL HATTERE: VEGLEGES -- a valodi szurke elemre, lathato gradienssel (append)
   --------------------------------------------------------------------------
   DevTools alapjan a szurke panel a szekcio-BLOKK (.block / .block-inner,
   pl. #block-bizreview-ajanlottpszichologusokbizreview), ami NINCS a
   .region-content-bottom-ban, ezert a korabbi atlatszo szabaly nem fogta meg.
   Itt a valodi szerkezetre celzunk: minden .block, amiben carousel van
   (.block:has(.bizreview-carousel)), plusz annak .block-inner-je es a carousel
   feluletek -> atlatszo. Igy a sav-gradiens atusson.

   A FAQ pontos ertekei (#f6fafc->#fdfdfd) majdnem feherek, a hosszu fooldalon
   nem latszanak -> itt lathato, de lagy kek->zold washt hasznalunk (a FAQ
   karakterevel), background-attachment: fixed mellett, hogy a sav-elemeken
   varrat nelkul folytonos legyen.

   html body + !important -> a local.css/theme.css utan is nyer. Csak festesi
   tulajdonsagok.
   ========================================================================== */

html body,
html body #top-content,
html body #preface,
html body .block:has(.bizreview-carousel) {
  background-color: #eef4fa !important;
  background-image:
    radial-gradient(70% 60% at 4% 6%, rgba(91, 157, 198, 0.28), transparent 55%),
    radial-gradient(70% 60% at 96% 94%, rgba(124, 197, 118, 0.22), transparent 55%),
    linear-gradient(160deg, #e4edf6 0%, #eff4f2 52%, #e6f2df 100%) !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

html body .block:has(.bizreview-carousel) .block-inner,
html body .main-content-inner,
html body .region-content-bottom .block,
html body .region-content-bottom .block .block-inner,
html body .bizreview-carousel,
html body .bizreview-carousel .bizreview-carousel__viewport,
html body .bizreview-carousel .bizreview-carousel__track {
  background-color: transparent !important;
  background-image: none !important;
}

/* ==========================================================================
   VEGLEGES: gradiens a TELJES SZELESSEGU #main-container-en (append)
   --------------------------------------------------------------------------
   A .main-content-inner a .container-en belul (col-lg-12) van, a .container-nek
   max-szelessege van -> a gradiens eddig csak a tartalmi oszlopban latszott, a
   teljes szelessegu hatter (a tartalom melletti savok) szurke maradt. A
   fooldal full-width node, ezert ott nincs margo -> jo volt.
   Megoldas: a gradiens a #main-container-en (teljes szelesseg, minden oldalon),
   a belso elemek atlatszok. Igy a hatter is vegig gradiens. Feher kartyak,
   accent-dobozok, hero-kep valtozatlanok.
   ========================================================================== */

body #main-container {
  background-color: #fdfdfd !important;
  background-image:
    radial-gradient(120% 140% at 88% -10%, rgba(124, 197, 118, 0.18), transparent 46%),
    radial-gradient(120% 130% at 6% 4%, rgba(91, 157, 198, 0.20), transparent 52%),
    linear-gradient(180deg, #f6fafc 0%, #fdfdfd 100%) !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

body #main-container .main-content-inner,
body #top-content,
body #preface,
body .node--type-full-width .content,
body .node--type-program .content,
body .node--type-program .article-content,
body .node--type-program .article-comments,
body .node--type-program .programok-tovabbi,
body .bizreview-carousel,
body .bizreview-carousel .bizreview-carousel__viewport,
body .bizreview-carousel .bizreview-carousel__track,
body .block:has(.bizreview-carousel),
body .block:has(.bizreview-carousel) .block-inner,
body .region-content-bottom .block,
body .region-content-bottom .block .block-inner,
body .node--type-full-width .content .paragraph--type--custom-html:not(.bg-image) {
  background-color: transparent !important;
  background-image: none !important;
}

/* ==========================================================================
   PROGRAM: a belso elemek atlatszova, hogy CSAK a #main-container full-width
   gradiense latsszon (append) -- csak page-node-type-program scope, mashol
   semmi nem valtozik. Magas specificitas (html body...#id), hogy a korabbi
   .block:has(.bizreview-carousel) !important gradienst is felulirja.
   Az accent-dobozok (program-meta, szerzo, cimkek) NEM szerepelnek -> maradnak.
   ========================================================================== */

html body.page-node-type-program #block-bizreview-content,
html body.page-node-type-program #block-bizreview-content .block-inner,
html body.page-node-type-program .main-content-inner,
html body.page-node-type-program article.node--type-program,
html body.page-node-type-program .article-header,
html body.page-node-type-program .article-content,
html body.page-node-type-program .article-comments,
html body.page-node-type-program .programok-tovabbi,
html body.page-node-type-program .node--type-program .content {
  background-color: transparent !important;
  background-image: none !important;
}

/* ==========================================================================
   PROGRAM: a "Komment irasa" blokk (cim + "A programot X toltotte fel" doboz
   + urlap) ugyanolyan szeles legyen, mint a blogposzt alatti valtozat.
   A program-oldal fullwidth layoutot hasznal (nincs sidebar, a tartalom a
   teljes szelesseget kitolti), a blogposzt viszont a normal page.html.twig
   tartalmi oszlopaban jelenik meg -- ezert volt eddig sokkal
   szelesebb/nyujtottabb a program oldalon a komment doboz. Csak az
   .article-comments blokkot korlatozzuk, a tobbi (program-meta, terkep,
   Tovabbi programok karusszel) valtozatlanul fullwidth marad.
   ELSO PROBA 760px volt, de a visszajelzes szerint az meg mindig keskenyebb
   lett, mint a blogposzt oszlopa -- 880px-re novelve, kalibralva a
   kepernyokepen mert blogposzt-szelesseghez. Ha meg mindig nem pontosan
   egyezik, finomhangolando.
   ========================================================================== */

html body.page-node-type-program .article-comments {
  max-width: 880px;
}

/* ==========================================================================
   PROGRAM: a "KOMMENT IRASA" (h6) cim ugyanugy nezzen ki, mint a blogposztnal.
   A theme.css-ben a .node--type-article .article-comments h6 szabaly adja a
   cimnek a 20px meretet + szinet + also margot/paddingot - ez CSAK az
   article tipusra vonatkozott. A program tipusnal ez hianyzott, ezert a cim
   csak az alap (16px, sima) h6 stilust kapta: azonos (bold) betuvastagsag
   mellett kisebb meretben jelent meg, ami vizualisan "tomorebbnek/
   vastagabbnak" tunt a blogposzt nagyobb, levegosebb cimehez kepest.
   Ugyanaz az ertek, csak program-scope-ra is kiterjesztve.
   ========================================================================== */

html body.page-node-type-program .article-comments h6 {
  margin-bottom: 20px;
  padding-bottom: 10px;
  color: #2B2B2B;
  font-size: 20px;
  text-transform: uppercase;
}

/* ==========================================================================
   #main-container: fixed -> scroll (append)
   A background-attachment: fixed a teljes oldalas screenshotban vizszintes
   savokban renderelodik (mukertek). Scroll-ra allitva a gradiens az elem
   teljes magassagara feszul, savok nelkul, kepen es eloben egyarant.
   ========================================================================== */

body #main-container {
  background-attachment: scroll !important;
}

/* Sidebar blocks - rounded corners */
.block-bizreview-addtoanysharebuttons,
.block-views-blocknews-block-1 {
  border-radius: 8px;
}
/* AddToAny megoszto blokk - lekerekites */
#block-bizreview-addtoanysharebuttons {
  border-radius: 8px;
}
/* Jobb oldalsav igazitasa a blog kep tetejehez */
#sidebar-second {
  margin-top: 20px;
}

/* Felhasznaloi urlapok elsodleges gombjai - arculati kek. */
#user-login-form #edit-submit,
#user-register-form #edit-submit,
#user-pass #edit-submit {
  background-color: #5b9dc6;
  border-color: #5b9dc6;
  color: #ffffff;
}

#user-login-form #edit-submit:hover,
#user-login-form #edit-submit:focus,
#user-login-form #edit-submit:active,
#user-register-form #edit-submit:hover,
#user-register-form #edit-submit:focus,
#user-register-form #edit-submit:active,
#user-pass #edit-submit:hover,
#user-pass #edit-submit:focus,
#user-pass #edit-submit:active {
  background-color: #497e9e;
  border-color: #497e9e;
  color: #ffffff;
}

/* ================================================================== */
/* Listing profile: review bar transparent background                  */
/* Lets the page gradient show through under the rating/action row     */
/* ================================================================== */
.node--type-listing .business-detail-review,
.business-detail-review {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
}

.node--type-listing .business-detail-review > .container,
.business-detail-review > .container {
  background: transparent !important;
  background-color: transparent !important;
}
/* ===== Profil oldal - Elerhetosegek (szocialis linkek) ===== */
/* A custom.css VEGERE fuzendo. Meglevo blokkokat nem modositunk. */
.profil-social-linkek .profil-social-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  color: #33607f;
  text-decoration: none;
}
.profil-social-linkek .profil-social-link:hover {
  color: #497e9e;
  text-decoration: underline;
}
.profil-social-linkek .profil-social-link i {
  width: 20px;
  text-align: center;
  font-size: 1.05rem;
  color: #5b9dc6;
}
/* Fejlec: ha a Facebook kerul a weboldal helyere, az ikon ugyanolyan kek. */
.field-website-fb a i {
  color: #5b9dc6;
}
/* X (Twitter) beagyazott SVG-logo, a tobbi ikonnal egyezo 20px oszlopban. */
.profil-social-linkek .profil-social-link .pk-social-svg {
  width: 20px;
  height: 18px;
  fill: #5b9dc6;
  flex: 0 0 auto;
}

/* ================================================================== */
/* Listing profile: align sidebar column top with main column top      */
/* ================================================================== */
.node--type-listing .business-detail-main .row > [class*="col-"] {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.node--type-listing .business-detail-main .row > [class*="col-"] > *:first-child {
  margin-top: 0 !important;
}

/* ================================================================== */
/* Listing edit form: Rendelo(k) tab - map visibility notice           */
/* Rendered via listing_profile_form_node_form_alter() #prefix         */
/* ================================================================== */
.pk-rendelo-info {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 20px 0;
  padding: 12px 16px;
  background-color: #eef6fb;
  border: 1px solid #cbe2f0;
  border-left: 4px solid #5b9dc6;
  border-radius: 8px;
  color: #33607f;
  font-size: 0.95rem;
  line-height: 1.5;
}

.pk-rendelo-info__icon {
  flex: 0 0 auto;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  background-color: #5b9dc6;
  color: #ffffff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px;
  font-style: italic;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}

.pk-rendelo-info__icon::before {
  content: "i";
}

.pk-rendelo-info__text {
  flex: 1 1 auto;
}

.pk-rendelo-info__text strong {
  color: #497e9e;
  font-weight: 600;
}

/* ==========================================================================
   PROFIL OLDAL - terkep a sidebarban (append, 2026-08)
   --------------------------------------------------------------------------
   A rendelok Leaflet terkepe a fejlecbol a jobb sidebar tetejere kerult,
   a Vegzettseg blokk fole (sablon: node--listing--full.html.twig). A terkep a
   tobbi sidebar blokk kartya-stilusat veszi fel (.profil-sidebar-blokk), de a
   feher belso kerete (padding) legfeljebb annyi, mint a profilkepe (8px), igy
   nem tunik vastagabb keretnek. A fejleces valtozat vastag kerete/arnyeka nelkul.
   ========================================================================== */

.node--type-listing.full #sidebar-second .profil-sidebar-terkep {
  padding: 8px;
}

.node--type-listing.full #sidebar-second .profil-sidebar-terkep .field {
  margin: 0;
}

.node--type-listing.full #sidebar-second .profil-sidebar-terkep .leaflet-container {
  height: 240px !important;
  width: 100%;
  border: 0;
  border-radius: 4px;
  box-shadow: none;
}

/* ==========================================================================
   PROFIL FEJLEC - weboldal / Facebook link EGYSEGES a telefon gombbal
   (append, 2026-08)
   --------------------------------------------------------------------------
   Normal nezetben (>=992px) a "Telefonszam mutatasa" gomb (.show-phone-btn)
   tomor #5b9dc6 hatteru, feher szovegu, btn-sm meretu. A weboldal-/Facebook-
   link pontosan ugyanigy nezzen ki, hogy a ket elem egyseges legyen es vilagos
   boritokepen is jol olvashato maradjon. Mobilon (sotet szoveg, nem a kep
   folott) valtozatlan.
   ========================================================================== */

@media (min-width: 992px) {
  .node--type-listing .business-detail-header-text .field-phone-website-row .field-website a {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    border-radius: 0.25rem;
    background: #5b9dc6;
    border: 1px solid #5b9dc6;
    color: #fff !important;
    text-decoration: none;
    text-shadow: none;
    box-shadow: none;
    transition: background 0.15s ease, border-color 0.15s ease;
  }

  .node--type-listing .business-detail-header-text .field-phone-website-row .field-website a:hover,
  .node--type-listing .business-detail-header-text .field-phone-website-row .field-website a:focus {
    background: #5b9dc6;
    border-color: #5b9dc6;
    color: #fff !important;
    text-decoration: none;
  }

  /* Az ikon (fa-facebook / fa-link) is feher legyen a tomor kek gombon.
     Feluliras: .field-website-fb a i { color: #5b9dc6 } lathatatlan lenne itt. */
  .node--type-listing .business-detail-header-text .field-phone-website-row .field-website a i,
  .node--type-listing .business-detail-header-text .field-phone-website-row .field-website a .pk-social-svg {
    color: #fff !important;
    fill: #fff !important;
  }
}

/* ==========================================================================
   PROFIL OLDAL - blokk-sorrend mobilon / tablet allo nezetben
   (append, 2026-08)
   --------------------------------------------------------------------------
   Uj mobil sorrend (<=991.98px):
     1 terkep, 2 bemutatkozas, 3 vegzettseg, 4 nyelvek, 5 problemakor,
     6 szolgaltatasok, 7 rendelok, 8 aradijak/arak, 9 elerhetosegek,
     10 programok, 11 pszichologus valaszol, 12 blogbejegyzesek, 13 ertekeles.
   Megosztas a lista vegere (14). FONTOS: a Programok es a Pszichologus valaszol
   blokk a .profil-blogbejegyzesek osztalyt is viseli, ezert a kozos osztaly
   szabalyat ELOBB soroljuk fel; a specifikus .profil-programok /
   .profil-pszv-valaszok azonos specificitasnal a kesobbi forras-sorrend miatt
   nyer.
   ========================================================================== */

@media (max-width: 991.98px) {
  .node--type-listing .business-detail-main .profil-sidebar-terkep        { order: 1; }
  .node--type-listing .business-detail-main .profil-bemutatkozas          { order: 2; }
  .node--type-listing .business-detail-main .profil-sidebar-vegzettseg    { order: 3; }
  .node--type-listing .business-detail-main .profil-sidebar-nyelvek       { order: 4; }
  .node--type-listing .business-detail-main .profil-sidebar-problemakor   { order: 5; }
  .node--type-listing .business-detail-main .profil-szolgaltatasok        { order: 6; }
  .node--type-listing .business-detail-main .profil-rendelok,
  .node--type-listing .business-detail-main .profil-galeria               { order: 7; }
  .node--type-listing .business-detail-main .profil-arak                  { order: 8; }
  .node--type-listing .business-detail-main .profil-sidebar-elerhetosegek { order: 9; }

  .node--type-listing .business-detail-main .profil-blogbejegyzesek       { order: 12; }
  .node--type-listing .business-detail-main .profil-programok             { order: 10; }
  .node--type-listing .business-detail-main .profil-pszv-valaszok         { order: 11; }

  .node--type-listing .business-detail-main .profil-reviews               { order: 13; }
  .node--type-listing .business-detail-main .profil-sidebar-megosztas     { order: 14; }
}

/* ==========================================================================
   PROFIL FEJLEC - profilkep megtartja az allo teglalap aranyt mobilon
   (append, 2026-08)
   --------------------------------------------------------------------------
   Mobilon (<=767.98px) a .header-profile-row flex-direction: column, ezert a
   .profile-picture "flex: 0 0 204px" beallitasa a 204px-t a FO tengelyen
   (magassag) ervenyesiti, felulirva a height: 273px-t, igy a doboz 204x204
   negyzette valik. A flex-basis auto-ra allitasaval ismet a width/height
   ervenyes: 204x273 allo teglalap, mint asztali nezetben.
   ========================================================================== */

@media (max-width: 767.98px) {
  .node--type-listing .profile-picture {
    flex: 0 0 auto !important;
  }
}

/* ==========================================================================
   THREADED KOMMENT behuzas - a megszunt classy/drupal.comment.threaded
   potlasa (append, 2026-08)
   --------------------------------------------------------------------------
   A classy tema a D10-ben kikerult a corebol, ezert a komment-sablonokbol
   eltavolitottuk az attach_library('classy/drupal.comment.threaded') hivast
   (ez okozta a "theme missing: classy" figyelmeztetest). A valaszkommentek
   behuzasat itt potoljuk - a classy comment.threaded.css egyetlen szabalya.
   ========================================================================== */

.indented {
  margin-left: 25px;
}

/* ==========================================================================
   AJANLATKERES (offer_request) node-urlap - felso feher terkoz csokkentese
   (append, 2026-08)
   --------------------------------------------------------------------------
   A .node-form { padding: 80px 0 } (theme.css) MINDEN node-urlapra 80px
   felso/also belso terkozt ad. Az /ajanlatkeres a offer_request node
   hozzaadasi urlapja, ezert megkapja a 80px felso terkozt is - innen a sok
   feher resz felul. A Pszichologus valaszol urlap egyedi (FormBase) urlap,
   nincs .node-form osztalya, ezert nincs rajta ez a terkoz. Az egyezes
   erdekeben az offer_request node-urlap felso terkozet nullazzuk, igy a kozos
   kartya sajat belso terkoze marad, mint a valaszol urlapnal. (Az also 80px
   terkozt nem bantjuk, hogy az Elkuldom gomb ne tapadjon a kartya aljahoz.)
   ========================================================================== */

.node-offer-request-form.node-form,
.node-offer-request-edit-form.node-form {
  padding-top: 0;
}

/* ==========================================================================
   PROFIL / BLOG / PROGRAM / HIBA-OTLET node-urlapok - ugyanaz a hiba, mint
   fentebb az Ajanlatkeresnel, csak itt MINDKET iranyban (append, 2026-09)
   --------------------------------------------------------------------------
   A .node-form { padding: 80px 0; } (theme.css) MINDEN node-urlapra 80px
   fuggoleges ES 0 vizszintes belso terkozt ad (a "padding: 80px 0"
   rovidites also/felso: 80px, bal/jobb: 0). Ez a profil_admin_theme modul
   altal Gin-kartyava alakitott 4 urlapot (Profil szerkesztese = "listing",
   Blog = "article", Program = "program", Hiba/Otlet = "hiba_otlet" bundle)
   is eleri, es felulirja a gin-bridge.css sajat "padding: 1.75rem 2rem"
   kartya-terkozet - emiatt volt a Profil szerkesztese oldalon az athelyezett
   cim (es az egesz urlap-tartalom) szel-szeli, behuzas nelkul, a
   Dokumentum(ok) oldal 28px/32px-es behuzasahoz kepest.

   [data-drupal-admin-styles] hatarolo szukseges: ezen a negy bundle-on az
   admin user NEM kapja meg a Gin-stilust (lasd profil_admin_theme.module
   _profil_admin_theme_is_admin() kizaras), tehat a szel-nelkuli 80px/0
   alapertelmezes admin nezetben marad valtozatlan - csak ott irjuk felul,
   ahol a Gin-kartya ("data-drupal-admin-styles") tenylegesen aktiv.
   ========================================================================== */

[data-drupal-admin-styles].node-listing-form.node-form,
[data-drupal-admin-styles].node-listing-edit-form.node-form,
[data-drupal-admin-styles].node-article-form.node-form,
[data-drupal-admin-styles].node-article-edit-form.node-form,
[data-drupal-admin-styles].node-program-form.node-form,
[data-drupal-admin-styles].node-program-edit-form.node-form,
[data-drupal-admin-styles].node-hiba-otlet-form.node-form,
[data-drupal-admin-styles].node-hiba-otlet-edit-form.node-form {
  padding: 1.75rem 2rem;
}

/* ==========================================================================
   KOMMENT- ES ERTEKELES-URLAPOK - radiuszos kartya + arculati kek gomb
   (append, 2026-08)
   --------------------------------------------------------------------------
   A komment- es ertekelesurlapok (Drupal .comment-form; az ertekeles ennek a
   field_comment fivestar-os valtozata) a tobbi weboldali urlaphoz hasonlo
   feher, lekerekitett kartyat kapnak. A kartya a webhely sajat tokenjeit
   hasznalja: feher hatter, halvany #e8edf2 keret (mint a sidebar blokkok),
   12px radius es lagy arnyek (mint az offer_request kartyak). A kuldes gomb
   az arculati kek (#5b9dc6 / hover #497e9e), mint a tobbi elsodleges
   urlapgombnal (pl. #user-login-form #edit-submit).
   ========================================================================== */

.comment-form {
  background: #fff;
  border: 1px solid #e8edf2;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 18px rgba(20, 40, 80, 0.06);
}

/* A profiloldali ertekelesurlapon eddig sarga elvalaszto vonal tagolt; most a
   kartya adja a tagolast, ezert a vonalat levesszuk. A felso terkoz marad. */
.node--type-listing.full .profil-reviews-tartalom #comment-form {
  border-top: 0;
}

/* Kuldes (es barmely primer) gomb - arculati kek. */
.comment-form .form-submit,
.comment-form input[type="submit"],
.comment-form button[type="submit"],
.comment-form .button--primary {
  background-color: #5b9dc6;
  border-color: #5b9dc6;
  color: #ffffff;
}

.comment-form .form-submit:hover,
.comment-form .form-submit:focus,
.comment-form .form-submit:active,
.comment-form input[type="submit"]:hover,
.comment-form input[type="submit"]:focus,
.comment-form input[type="submit"]:active,
.comment-form button[type="submit"]:hover,
.comment-form button[type="submit"]:focus,
.comment-form button[type="submit"]:active,
.comment-form .button--primary:hover,
.comment-form .button--primary:focus,
.comment-form .button--primary:active {
  background-color: #497e9e;
  border-color: #497e9e;
  color: #ffffff;
}

/* ==========================================================================
   KOMMENT- ES ERTEKELES-URLAPOK - mezok es gombok lekerekitese
   (append, 2026-08)
   --------------------------------------------------------------------------
   A theme.css a form-mezokre 0px radiuszt kenyszerit
   (input.form-text / textarea.form-textarea / select / .form-control).
   A komment- es ertekelesurlapon (.comment-form) ezt feluljuk, hogy a mezok
   es a gombok is lekerekitettek legyenek (8px), illeszkedve a kartya
   megjelenesehez. Csak a .comment-form-ra hat, mas urlapot nem erint.
   ========================================================================== */

.comment-form input.form-text,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form input[type="tel"],
.comment-form input[type="number"],
.comment-form input[type="password"],
.comment-form input[type="search"],
.comment-form input[type="date"],
.comment-form textarea,
.comment-form textarea.form-textarea,
.comment-form select,
.comment-form .form-control,
.comment-form .form-select {
  border-radius: 8px;
}

/* A csillagos ertekelo mezo Chosen-legordulojenek doboza is legyen lekerekitve. */
.comment-form .chosen-container-single .chosen-single {
  border-radius: 8px;
}

/* Gombok lekerekitese (a kek szint korabbi append allitja be). */
.comment-form .form-submit,
.comment-form input[type="submit"],
.comment-form button[type="submit"],
.comment-form .button--primary,
.comment-form .btn {
  border-radius: 8px;
}

/* ==========================================================================
   BLOG METRO CSEMPE - kep nelkuli fallback (append, 2026-08)
   --------------------------------------------------------------------------
   A blog metro-csempe (.view-list-news .views-row-inner) a kepet abszolut
   hatterretegkent hasznalja (.views-field-field-image, inset:0), a cim ra van
   pozicionalva, a .views-row-inner::after gradiens adja az olvashatosagot.
   KEP NELKUL nincs hatterreteg -> a csempe osszecsuszik. Ez a blokk a kep
   nelkuli csempenek ad markaszin-gradiens hatteret es stabil magassagot, hogy
   a feher cim olvashato maradjon. A KEPES csempeket nem erinti (azoknak van
   .views-field-field-image img-je). ASCII-only, CRLF.
   ========================================================================== */

/* Kep nelkuli csempe: markaszin-gradiens a .views-row-inner-re, hogy ne
 * essen szet es a feher cim olvashato legyen. A :has() a kitoltott kepet
 * nezi; ahol nincs, oda kerul a gradiens. */
html body .view-list-news .views-row-inner:not(:has(.views-field-field-image img)) {
  min-height: 220px;
  border-radius: 10px;
  overflow: hidden;
  background-image: linear-gradient(160deg, #497e9e 0%, #2c3e50 70%);
}

/* Kep nelkul a sotet gradiens-overlay (::after) folosleges - a sajat
 * markaszin-gradiens mar biztositja a kontrasztot -, ezert elrejtjuk, hogy
 * ne sotetitse tovabb a csempet. A kepes csempek ::after-jet nem erinti. */
html body .view-list-news .views-row-inner:not(:has(.views-field-field-image img))::after {
  display: none;
}

/* Kep nelkuli csempen a cim kapjon egy kis also teret, hogy ne tapadjon a
 * csempe aljara (kepes csempenel a gradiens miatt ez mar megvan). */
html body .view-list-news .views-row-inner:not(:has(.views-field-field-image img)) .views-field-title {
  padding-bottom: 1.1rem;
}

/* ==========================================================================
   BLOG METRO RACS - a Bootstrap .row flex legyozese (append, 2026-08)
   --------------------------------------------------------------------------
   A News nezet kontenere: <div class="view-content row"> - egyszerre .view-content
   ES .row. A metro-blog.css a .view-list-news .view-content-re grid-et tesz, de a
   Bootstrap .row (_grid.scss) es a theme.css .block .view .view-content.row
   display:flex-et eroltet, ami felulirja a gridet -> a csempek egymas alatt.
   Ez a szabaly a .row osztalyt is belefoglalja + html body prefixszel eleg eros,
   hogy a grid nyerjen. ASCII-only, CRLF.
   ========================================================================== */
html body .view-list-news .view-content.row {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  grid-auto-rows: 290px !important;
  grid-auto-flow: dense !important;
  gap: 8px !important;
}

/* Reszponziv: tablet 2 oszlop, mobil 1 oszlop (a metro-blog.css media-query-jeit
 * itt is megerositjuk a .row ellen). */
@media (min-width: 768px) and (max-width: 991px) {
  html body .view-list-news .view-content.row {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 767px) {
  html body .view-list-news .view-content.row {
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important;
  }
}

/* ==========================================================================
   BLOG METRO RACS - Infinite Scroll wrapper athidalasa (append, 2026-08)
   --------------------------------------------------------------------------
   A "Tovabbiak betoltese" (views_infinite_scroll) egy extra wrappert tesz a
   .view-content (grid) es a .views-row csempek koze:
     .view-content.row (grid) > .views-infinite-scroll-content-wrapper > .views-row
   Emiatt a grid csak a wrappert latja egyetlen gyerekkent -> a csempek egy
   oszlopban. A display:contents "atlatszova" teszi a wrappert, igy a .views-row
   csempek kozvetlenul a grid gyerekei lesznek, es a metro-racs mukodik.
   A .views-row col-md-6 (Bootstrap) szelesseget is semlegesitjuk, hogy a grid
   szabja meg a meretet. ASCII-only, CRLF.
   ========================================================================== */
html body .view-list-news .views-infinite-scroll-content-wrapper {
  display: contents !important;
}

/* A csempeken col-md-6 (Bootstrap fel-szelesseg) van - a grid-ben ez zavar.
 * Semlegesitjuk, hogy a grid-cell (nth-child span) szabja a meretet. */
html body .view-list-news .view-content.row > .views-infinite-scroll-content-wrapper > .views-row,
html body .view-list-news .view-content.row .views-row {
  width: auto !important;
  max-width: none !important;
  flex: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ==========================================================================
   BLOG "Tovabbiak betoltese" gomb - arculathelyes (append, 2026-08)
   --------------------------------------------------------------------------
   Az Infinite Scroll pager gombja: ul.js-pager__items.pager > li.pager__item >
   a.button. A theme.css alapbol feher hattert + szurke bordert ad (ul.pager li a).
   Ezt markaszinure (#5b9dc6 -> hover #497e9e) irjuk at, teljes szelessegu,
   lekerekitett gombka. ASCII-only, CRLF.
   ========================================================================== */
html body .pager.js-pager__items {
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: center;
}

html body .pager.js-pager__items .pager__item {
  margin: 0;
  width: 100%;
  max-width: 420px;
  list-style: none;
}

/* A lista-elem pottyenek (::marker) elrejtese a gomb elol. */
html body .pager.js-pager__items .pager__item::marker {
  content: "";
  font-size: 0;
}

html body .pager.js-pager__items .pager__item a.button,
html body ul.pager li.pager__item a {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 0.85rem 1.5rem;
  background: #5b9dc6;
  border: 0;
  border-radius: 10px;
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.05s ease;
  box-shadow: 0 2px 6px rgba(51, 96, 127, 0.25);
}

html body .pager.js-pager__items .pager__item a.button:hover,
html body .pager.js-pager__items .pager__item a.button:focus,
html body ul.pager li.pager__item a:hover,
html body ul.pager li.pager__item a:focus {
  background: #497e9e;
  color: #fff;
  text-decoration: none;
}

html body .pager.js-pager__items .pager__item a.button:active {
  transform: translateY(1px);
}

/* ==========================================================================
   TELEPULES exposed filter (field_helyszin)
   A wrapper tenyleges osztalya: form-item-field-helyszin (a select id-je
   edit-field-helyszin, a Chosen konteneri id edit_field_helyszin_chosen).
   Az uj helyszin-szuro ugyanazt a pin-ikont + doboz-keretet + flex-aranyt
   kapja, mint regen a field_locations. A pill-kinezet (kerekitett doboz,
   Chosen legordulo, select behuzas) az altalanos osztaly-alapu szabalyokbol
   mar automatikusan rajon; csak ez a harom mezonev-specifikus resz hianyzott.
   Beilleszteni: custom.css VEGERE.
   ========================================================================== */

/* 1) pin ikon (Font Awesome map-marker-alt = \f3c5) */
.block-listing-search-filters .form-item-field-helyszin:before,
.block-listing-search-filters .form-item-field-helyszin-target-id:before,
#block-exposedformlisting-searchpage-1 .form-item-field-helyszin:before,
#block-exposedformlisting-searchpage-1 .form-item-field-helyszin-target-id:before {
  font-family: 'Font Awesome 5 Free';
  color: #666;
  position: absolute;
  top: 9px;
  left: 14px;
  font-weight: 900;
  display: inline-block;
  z-index: 3;
  content: "\f3c5";
}

/* 2) doboz-keret + relativ pozicio (kell a :before abszolut pozicionalasahoz) */
.block-listing-search-filters .form-item-field-helyszin,
.block-listing-search-filters .form-item-field-helyszin-target-id,
#block-exposedformlisting-searchpage-1 .form-item-field-helyszin,
#block-exposedformlisting-searchpage-1 .form-item-field-helyszin-target-id {
  position: relative;
  background: #fff;
  border: 1px solid #ccc;
}

/* 3) desktop flex-arany, mint a tobbi mezonel */
@media (min-width: 992px) {
  .block-listing-search-filters .form-search-listing .js-form-item-field-helyszin {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: 0 !important;
  }
}

/* ==========================================================================
   BLOGPOSZT: a Kiemelt szakemberek carousel a #block-bizreview-content blokkba
   kerult, ezert a "html body .block:has(.bizreview-carousel)" szabaly ra is
   raterjesztette az eros gradienst. A blogposzt (article) oldalon ezt
   visszavonjuk: a tartalmi blokk atlatszo, igy CSAK az alap oldal-gradiens
   (html body) latszik alatta. Magas specificitas, hogy a !important gradienst
   is felulirja.
   ========================================================================== */
html body.page-node-type-article #block-bizreview-content,
html body.page-node-type-article #block-bizreview-content .block-inner {
  background-color: transparent !important;
  background-image: none !important;
}

/* ==========================================================================
   PROGRAM node egyoszlopos fejlec (2026-09-03)
   --------------------------------------------------------------------------
   A program-oldal (node--type-program) a blog (node--article) sablonjat koveti:
   article > .article-image > .article-header > .article-content. A programnal
   viszont szeles nezetben a kep es a fejlec egymas melle csuszott. Itt magas
   specificitassal (body.page-node-type-program) kenyszeritjuk, hogy a kep FELUL
   (teljes szelesseg), alatta a cim + szerzo, majd a tartalom keruljon - minden
   kepernyoszelessegen, mint a blognal. Minden erintett elem blokk-szintu,
   teljes szelessegu, float nelkul; a kep konteinere flow-root, hogy oleljen.
   ========================================================================== */
body.page-node-type-program article.node--type-program {
  display: block !important;
}
body.page-node-type-program .node--type-program .article-image,
body.page-node-type-program .node--type-program .article-header,
body.page-node-type-program .node--type-program .article-content,
body.page-node-type-program .node--type-program .article-comments {
  display: block !important;
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  clear: both !important;
}
body.page-node-type-program .node--type-program .article-image {
  display: flow-root !important;
  margin-bottom: 1rem;
}
body.page-node-type-program .node--type-program .article-image .field,
body.page-node-type-program .node--type-program .article-image .field__item {
  display: block !important;
  float: none !important;
  width: 100% !important;
}
body.page-node-type-program .node--type-program .article-image img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
}

/* ==========================================================================
   BLOG node egyoszlopos fejlec (2026-09-03)
   --------------------------------------------------------------------------
   Ugyanaz a jelenseg, mint a programnal: a .article-image osszeomlott, a cim
   a kep melle csuszott (sot ket reszre tort: fele jobbra, fele a kep ala).
   A program-megoldas tukre a blogra (node--type-article): kep FELUL (teljes
   szelesseg), alatta cim + szerzo, majd tartalom. Magas specificitas
   (body.page-node-type-article), block + flow-root + clear.
   ========================================================================== */
body.page-node-type-article article.node--type-article {
  display: block !important;
}
body.page-node-type-article .node--type-article .article-image,
body.page-node-type-article .node--type-article .article-header,
body.page-node-type-article .node--type-article .article-content,
body.page-node-type-article .node--type-article .article-comments {
  display: block !important;
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  clear: both !important;
}
body.page-node-type-article .node--type-article .article-image {
  display: flow-root !important;
  margin-bottom: 1rem;
}
body.page-node-type-article .node--type-article .article-image .field,
body.page-node-type-article .node--type-article .article-image .field__item {
  display: block !important;
  float: none !important;
  width: 100% !important;
}
body.page-node-type-article .node--type-article .article-image img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
}
/* ==========================================================================
   Profil ertekeles (Fivestar) - PK egyediesites (2026-09-04, 2. kor)

   Kiderult, hogy a korabbi (1. koros) szines-szam megoldas azert nem
   latszott, mert a fivestar-summary.html.twig altal hasznalt
   <span class="stars"> osztaly UTKOZIK a tema sajat, regi, altalanos
   csillag-sprite widgetjevel (theme.css "07. Rating" blokk,
   "span.stars { background:url(stars.png) ... }"), ami egy fix meretu,
   az ertekelestol fuggetlen szurke sprite-kepet rajzolt a szam helyere -
   emiatt "nem latszott a valtozas" es a csillagok "nem aranyosak" voltak.

   A valodi javitas: a Fivestar sajat grafikus csillag-widgetje
   (.fivestar-widget-static) MAR EDDIG IS helyesen, aranyosan es
   csillag-sargan jelent meg (ld. az admin felulet Ertekelesek fulen,
   az egyedi review-kommenteknel) - csak a tema.css korabban
   display:none-nal elrejtette a profil ertekeles-savban es a kereso
   talalati listajaban. Most ugyanezt a mar mukodo grafikat mutatjuk meg
   itt is, a duplikalt/utkozo szoveges szam helyett csak az "Ertekelt
   szakember" szoveg marad lathato mellette (ld. fivestar-summary.html.twig).
   ========================================================================== */
.business-detail-review .fivestar-basic .fivestar-widget-static,
.listing-search-results-item .field-rating .fivestar-widget-static {
  display: block !important;
  margin-bottom: 6px;
}
#listing-search-results .field-rating .fivestar-widget-static {
  display: block !important;
  margin-bottom: 6px;
}

/* A Fivestar widget az elso csillagba egy szoveges szamot (numeric_rating)
   is beleir, amit sajat CSS-e (modules/fivestar/css/fivestar.css) egy
   text-indent:-999em trukkel kepkent kepzelt el rejteni. Biztonsagi
   halokent itt is nullazzuk a betumeretet ugyanabban a csillag-elemben,
   hogy semmikepp se latszodjon szam a csillagsor alatt/mellett, akkor sem,
   ha a text-indent valamiert nem ervenyesulne ezen az oldalon. */
.business-detail-review .fivestar-basic .fivestar-widget-static .star,
.listing-search-results-item .field-rating .fivestar-widget-static .star,
#listing-search-results .field-rating .fivestar-widget-static .star {
  font-size: 0 !important;
  line-height: 0 !important;
}
/* Profilkep-helyettesito: amikor a szakembernek nincs feltoltott fotoja.
   A .profile-picture alapmerete/pozicioja megegyezik a valodi kepes
   valtozatevel (ugyanaz az osztaly), csak a tartalma mas - igy nem kell
   kulon meretezest irni, csak a hatterszint/tartalmat.
   Add hozza a custom.css vegehez. */

.profile-picture--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #5b9dc6 0%, #33607f 100%);
  color: #ffffff;
  cursor: default;
}

.profile-picture--placeholder i {
  font-size: 48px;
  opacity: 0.9;
}

/* A pontos meret a valodi .profile-picture doboz meretetol fugg (amit a
   theme.css/custom.css mar meghataroz masutt) - ha az ikon aranytalanul
   nagy/kicsi lenne elesben, itt allitsd a font-size-t. */
   
   /* ================================================================== */
/* FOMENU EGY SORBAN 1200-1399 px KOZOTT (2026-09-22)                 */
/*                                                                    */
/* MERT ERTEKEK 1366 px-es nezetben:                                  */
/*   .container szelessege .............. 1140 px                     */
/*   logo (.nav-module) ................. 186 px                      */
/*   a menunek marad .................... 930 px                      */
/*   6 menupont 25 px paddinggel ........ 997 px  -> 2 sor            */
/*   ugyanaz 18 px paddinggel ........... 913 px  -> 1 sor            */
/*   tartalek ........................... 17 px                       */
/*                                                                    */
/* A hatarertek 19 px (925 px), az mar nem fert be - ezert 18 px.     */
/*                                                                    */
/* A theme.css @media (min-width: 1199px) blokkja ad 20px 25px 25px   */
/* paddingot. Itt CSAK a vizszintes erteket irjuk felul; a fuggoleges */
/* (20 px felul, 25 px alul) valtozatlan marad, mert az adja a menu   */
/* magassagat es az aktiv menupont alahuzasanak helyet.               */
/*                                                                    */
/* A szelektor betu szerint azonos a theme.css-eevel (1 azonosito +   */
/* 1 osztaly + 1 elem), es a custom.css kesobb tolt be - a forras-    */
/* sorrend dont, !important nem kell.                                 */
/*                                                                    */
/* 1400 px-tol a .container 1320 px szeles, ott 25 px paddinggel is   */
/* egy sorban van a menu (997 px), ezert a felso hatar 1399.98 px.    */
/*                                                                    */
/* 992-1199 px kozott a .container 960 px, a menunek 750 px marad,    */
/* a hat menupont szoveg-szelessege onmagaban 697 px - ott meg 8 px   */
/* paddinggel sem fer ki egy sorba. Az a savot ez a szabaly nem       */
/* erinti, ott marad a ket sor.                                       */
/* ================================================================== */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  #main-navigation .menu > li > a,
  #main-navigation .menu > li > span {
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* ------------------------------------------------------------------
   PK-PROFIL-FEJLEC-TABLET (2026-09-29)
   768–991 px között (tablet, keskeny ablak) a profilfejléc szövegdoboza
   a listing-header.css miatt fix 360 px magas (--cover-h), a tartalma
   viszont ~396 px, így a honlap-link az „Értékelés írása / Üzenet írása /
   Pszichológus válaszol” gombok alá csúszott. 768 px alatt a custom.css
   már eddig is auto magasságot adott; ez a sáv maradt ki.
   ------------------------------------------------------------------ */
@media (max-width: 991.98px) {
  .node--type-listing .business-detail-header .business-detail-header-text {
    height: auto !important;
    min-height: var(--cover-h);
  }
}

/* A profil fülsora (Áttekintés, Értékelések, Blog, …) keskeny ablakban
   szélesebb a képernyőnél. A szülő .col-lg-8 display:contents, ezért a
   .profil-fulek flex-elemként a tartalma szélességére nőtt, és az egész
   oldal vízszintesen görgethető lett. Így a fülsor a saját sávjában
   görget (overflow-x: auto már eddig is rajta volt). */
.node--type-listing .profil-fulek {
  min-width: 0;
  max-width: 100%;
}

/* ------------------------------------------------------------------
   PK-PROFIL-GOMBOK (2026-09-29)
   A profilfejléc alatti csillagsor és a három gomb (Értékelés írása,
   Üzenet írása, Pszichológus válaszol) 992 px alatt.

   Eddig: 768–991 px között a csillagok balra, a gombok mellettük
   tördelődtek (2 + 1, egyenetlen szélességgel); 768 px alatt három
   teljes szélességű gomb egymás alatt, a csillagok kissé balra tolva.

   Most:
   - a csillagsor és az „Értékelt szakember” felirat középen,
   - 576–991 px: a három gomb EGY sorban, egyforma szélességgel,
   - 576 px alatt: két gomb egymás mellett, a harmadik alattuk teljes
     szélességben,
   - minden gomb azonos magasságú, a felirat középre igazítva.
   992 px fölött (asztali nézet) semmi nem változik.

   A szelektor szándékosan ugyanolyan erős, mint a custom.css meglévő,
   768 px alatti szabálya — mivel ez a fájl VÉGÉN áll, ez nyer.
   ------------------------------------------------------------------ */
@media (max-width: 991.98px) {
  .node--type-listing .business-detail-review .container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 14px !important;
  }
  .node--type-listing .business-detail-review .field-rating {
    margin: 0 auto !important;
    text-align: center;
  }
  .node--type-listing .business-detail-review .field-rating .fivestar-widget-static {
    display: flex !important;
    justify-content: center !important;
    float: none !important;
  }
  .node--type-listing .business-detail-review .field-rating .form-item,
  .node--type-listing .business-detail-review .field-rating .mb-3 {
    margin-bottom: 0 !important;
  }
  .node--type-listing .business-detail-review .field-rating .description {
    display: block;
    text-align: center;
  }
  .node--type-listing .business-detail-review .field-write-comment.listing-action-buttons {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px !important;
    width: 100% !important;
    max-width: 720px;
    margin: 0 auto !important;
    padding: 0 !important;
  }
  .node--type-listing .business-detail-review .field-write-comment.listing-action-buttons .listing-action-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: auto !important;
    min-height: 46px;
    margin: 0 !important;
    padding: 10px 12px !important;
    text-align: center;
    white-space: normal;
    line-height: 1.25;
  }
}
@media (max-width: 575.98px) {
  .node--type-listing .business-detail-review .field-write-comment.listing-action-buttons {
    grid-template-columns: 1fr 1fr;
  }
  .node--type-listing .business-detail-review .field-write-comment.listing-action-buttons .listing-action-btn:last-child {
    grid-column: 1 / -1;
  }
}
/* ------------------------------------------------------------------
   PK-PROFIL-FULEK-TORDELES (2026-09-30)
   A profil fülsora asztali és tablet szélességen EGY sorban volt, rejtett
   görgetősávval — ha öt fül van (Áttekintés, Értékelések, Pszichológus
   blog, Pszichológus válaszol, Programok), a „Programok” levágódott és
   nem látszott, hogy van még fül. Most minden szélességen tördelődik:
   ami nem fér ki, a következő sorba kerül. A fülek kinézete nem változik.
   ------------------------------------------------------------------ */
.node--type-listing .profil-fulek-nav {
  flex-wrap: wrap;
  overflow-x: visible;
  row-gap: 0.2rem;
}

/* ==========================================================================
   MEZO-MEGJEGYZESEK ZOLD BLOKKBAN (append, 2026-10-11)
   --------------------------------------------------------------------------
   Peter kerese: "ha a mezoknel van megjegyzes, azok keruljenek bele az
   arculat szerinti zold blokkba - minden megjegyzes igy jelenjen meg."
   Minden urlap mezo-leirasa (Barrio: .description, Gin: .form-item__description)
   halvanyzold dobozban, az arculat zoldjevel (#7cc576) a bal szelen.
   A hiba/otlet urlap kimarad: ott a leirasok szandekosan rejtettek (lasd
   fent, "HIBA/OTLET URLAP"). Az ures leiras nem kap dobozt.
   A szin !important, mert a Bootstrap .text-muted !important-tal szurkit.
   ========================================================================== */
form:not([id^="node-hiba-otlet-form"]) .description:not(:empty),
form:not([id^="node-hiba-otlet-form"]) .form-item__description:not(:empty) {
  display: block;
  margin: .45rem 0 0;
  padding: .5rem .75rem;
  background: #eef8ed;
  border-left: 4px solid #7cc576;
  border-radius: 8px;
  color: #2f5d2c !important;
  font-size: .875rem;
  line-height: 1.45;
}

/* ==========================================================================
   KERESOMEZOK EGYFORMA SZOVEGSZINNEL (append, 2026-10-11)
   --------------------------------------------------------------------------
   Peter: a "Kereses..." es a "Telepules" mezo felirata vilagosabb volt, mint
   a "Problemakor"-e. A szovegmezo helyorzoje (placeholder) a Bootstrap
   szurke (#6c757d) szinet kapta, a legordulok a sotet szovegszint (#212529).
   Most mind a harom mezo felirata ugyanaz a sotet szin, teljes fedessel.
   ========================================================================== */
.block-listing-search-filters input::placeholder,
form[id^="views-exposed-form-listing-search"] input::placeholder {
  color: #212529 !important;
  opacity: 1 !important;
}
.block-listing-search-filters select,
.block-listing-search-filters input.form-control,
form[id^="views-exposed-form-listing-search"] select,
form[id^="views-exposed-form-listing-search"] input.form-control {
  color: #212529 !important;
}