/* === rezideo – A lakásvásárlás menete: HORIZONTÁLIS lépés-nav ===
   - label a kör FÖLÖTT, a körök egy vízszintes csíkon
   - alaphelyzetben az e-con-inner sávban (normál folyam)
   - amint a scrolltop eléri -> fixre az oldal tetejére (.is-stuck)
   - scroll-spy: aktív/teljesített lépés szám- és label-színe vált
   class-alapú, NINCS inline style. (A base .vmh* szabályok a style.css-ben.) */

/* a .vmh blokk függőlegesen rendezze a videót és a nav-ot (base: display:flex) */
body .vmh { display: block; }

/* videó fölötti cím – a lakaslista 8976b48 blokk stílusa (heading #2C313A + barna divider).
   A .page-id-18667 h2 globális barna !important-ját itt felülírjuk a lakaslista-szerű sötétre. */
.vmh-title { text-align: center; }      /* cím középre */
.page-id-18667 .vmh-title h2.elementor-heading-title {
  font-family: "Montserrat", Sans-serif;
  font-size: 34px; font-weight: 700; text-transform: uppercase;
  color: #2C313A !important;
  margin: 0;
}
.vmh-title-divider {        /* b3881c0: 60px széles, 5px barna, középre */
  width: 60px; height: 0;
  border-top: 5px solid #BCA889;
  margin: 10px auto 24px;
}

/* videó (03e1b29 Elementor video widget): fix 980×551, aspect-ratio konténer kivéve
   (az 1:1 --video-aspect-ratio felesleges négyzetes helyet hagyott), középre */
.elementor-element-03e1b29 .elementor-wrapper {
  aspect-ratio: auto !important;
  height: auto !important;
  width: 980px; max-width: 100%;
  margin-left: auto; margin-right: auto;
}
.elementor-element-03e1b29 .elementor-video,
.elementor-element-03e1b29 .elementor-video-iframe,
.elementor-element-03e1b29 iframe {
  position: static !important;
  width: 980px !important; max-width: 100% !important;
  height: 551px !important;
}

/* alaphelyzet: az e-con-inner sávban, normál folyamban, teljes szélességben.
   Fix magasság -> a helykitöltő pontosan illeszkedik (nincs ugrás fix-váltáskor). */
body .vmh-nav {
  position: static;
  width: 100%;
  max-width: none;
  min-height: 110px;
  display: flex;
  align-items: center;
  z-index: 50;
}

/* vízszintes elrendezés: 8 egyenlő oszlop, körök alul egy vonalban */
body .vmh-nav ol {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
}

/* egy lépés: label FÖLÜL (span:last), szám-kör ALUL (span:first) -> column-reverse */
body .vmh-nav li {
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column-reverse;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 6px 4px;
}

/* label a kör fölött, középre, kisebb hogy elférjen az oszlopban */
body .vmh-nav li > span:last-child {
  font-size: 12px;
  line-height: 1.25;
}

/* a kör a vonal fölé kerül */
body .vmh-nav li > span:first-child { position: relative; z-index: 1; }

/* VÍZSZINTES összekötő csík a körök közepén át (utolsóra nincs).
   bottom = 6px padding-bottom + 16px (32px kör fele) = 22px */
body .vmh-nav li:not(:last-child)::after {
  content: ""; position: absolute;
  bottom: 22px; left: 50%; width: 100%;
  height: 2px; background: #d8d5cf;
  z-index: 0;
}

/* scroll-spy állapotok (JS által kapcsolt class-ok) */
.vmh-nav li.is-done::after { background: #BCA889; }
.vmh-nav li.is-active > span:first-child,
.vmh-nav li.is-done   > span:first-child { background: #BCA889; }
.vmh-nav li.is-active > span:last-child { color: #BCA889; }

/* scroll-on-top: amint a scrolltop eléri, fixre az oldal tetejére */
body .vmh-nav.is-stuck {
  position: fixed; top: 89px; left: 0; right: 0; width: 100%;
  z-index: 100; background: #fff;
  padding: 14px 40px;
}
/* a fix sávban a lépések a tartalom-szélességhez igazodnak */
body .vmh-nav.is-stuck ol { max-width: 1200px; margin: 0 auto; }

/* helykitöltő: a fix-állapotban kitölti a nav helyét (azonos magasság -> nincs ugrás) */
.vmh-nav-spacer { display: none; }
.vmh-nav-spacer.is-active { display: block; height: 110px; }

/* mobil/tablet: tiltva */
@media (max-width: 1024px) {
  body .vmh-nav,
  body .vmh-nav-spacer { display: none; }
}

/* === Lépés-képek: töltsék ki a (stretch-elt) kép-oszlop teljes magasságát ===
   Az <img> alapból a saját képarány-magasságát veszi fel, így a stretch-elt oszlop alján
   üres hely marad, és ez responsive-ban változik -> a felső kép alja nem ér a sor aljához,
   a sarkok elcsúsznak. Megoldás: flex-lánc + object-fit:cover, hogy a kép = oszlop magassága.
   (8 lépés-kép widget ID-ja; a nyíl és a 0 sor-rés már jó, azokhoz nem nyúlunk.) */
:is(.elementor-element-902b66e,.elementor-element-2ed9934,.elementor-element-96f9b4f,.elementor-element-9097931,.elementor-element-5136acb,.elementor-element-c707234,.elementor-element-38221fc,.elementor-element-b59bafc){
  display:flex; flex-direction:column; flex:1 1 auto; min-height:0;
}
:is(.elementor-element-902b66e,.elementor-element-2ed9934,.elementor-element-96f9b4f,.elementor-element-9097931,.elementor-element-5136acb,.elementor-element-c707234,.elementor-element-38221fc,.elementor-element-b59bafc) > .elementor-widget-container{
  display:flex; flex-direction:column; flex:1 1 auto; min-height:0; width:100%;
}
:is(.elementor-element-902b66e,.elementor-element-2ed9934,.elementor-element-96f9b4f,.elementor-element-9097931,.elementor-element-5136acb,.elementor-element-c707234,.elementor-element-38221fc,.elementor-element-b59bafc) .elementor-widget-container > a,
:is(.elementor-element-902b66e,.elementor-element-2ed9934,.elementor-element-96f9b4f,.elementor-element-9097931,.elementor-element-5136acb,.elementor-element-c707234,.elementor-element-38221fc,.elementor-element-b59bafc) .elementor-widget-container > figure{
  display:flex; flex-direction:column; flex:1 1 auto; min-height:0; width:100%; margin:0;
}
:is(.elementor-element-902b66e,.elementor-element-2ed9934,.elementor-element-96f9b4f,.elementor-element-9097931,.elementor-element-5136acb,.elementor-element-c707234,.elementor-element-38221fc,.elementor-element-b59bafc) img{
  flex:1 1 auto; min-height:0; width:100%; height:100%; object-fit:cover; display:block;
}

/* mobil (egyoszlopos összecsukás): a cikcakk-koncepció megszűnik, a kép kapja vissza a
   természetes arányát, a nyilakat elrejtjük (mint a .vmh-nav-nál) */
@media (max-width:1024px){
  :is(.elementor-element-902b66e,.elementor-element-2ed9934,.elementor-element-96f9b4f,.elementor-element-9097931,.elementor-element-5136acb,.elementor-element-c707234,.elementor-element-38221fc,.elementor-element-b59bafc) img{
    height:auto; object-fit:initial;
  }
  :is(.elementor-element-fac0212,.elementor-element-8250511,.elementor-element-680b447,.elementor-element-942cdef,.elementor-element-4e3239e,.elementor-element-2f176b4,.elementor-element-5808755){ display:none !important; }
}

/* === Lépés-nyilak: a sarok-találkozás KÖZEPÉRE (= a kép-oszlop belső-alsó sarka = a sor 50%-a,
   a sorhatáron). Az arrow-right/arrow-left classok ELTÁVOLÍTVA -> ID-alapú pozicionálás.
   A kép-oszlop (50% széles, külső szélhez tapad) a pozicionálási kontextus; belső éle = 50%. === */
:is(.elementor-element-ded89cf,.elementor-element-b7d0f84,.elementor-element-89be9ee,.elementor-element-d0c7312,.elementor-element-012660c,.elementor-element-9296b14,.elementor-element-ac1d1cc,.elementor-element-2debb5e){
  position: relative;
}
/* közös: abszolút, a sorhatárra + a találkozási pontra centrálva */
:is(.elementor-element-fac0212,.elementor-element-8250511,.elementor-element-680b447,.elementor-element-942cdef,.elementor-element-4e3239e,.elementor-element-2f176b4,.elementor-element-5808755){
  position: absolute !important;
  bottom: 0; z-index: 20; width: auto; margin: 0;
}
/* kép a JOBB oldalon (egykori .arrow-right) -> a kép-oszlop BAL éle = varrat */
:is(.elementor-element-fac0212,.elementor-element-680b447,.elementor-element-4e3239e,.elementor-element-5808755){
  left: -10px; bottom: 10px; transform: translate(-50%, 50%);
}
/* kép a BAL oldalon (egykori .arrow-left) -> a kép-oszlop JOBB éle (left:100%) = varrat */
:is(.elementor-element-8250511,.elementor-element-942cdef,.elementor-element-2f176b4){
  left: 100%; bottom: 10px; margin-left: 11px; transform: translate(-50%, 50%);
}

/* a téma alap oldal-címe (entry-title H1) elrejtve ezen az oldalon — a saját .vmh-title-t használjuk */
.page-id-18667 .entry-title { display: none; }

/* a garancia (utolsó) lépés ne ragadjon a footerhez */
body.page-id-18667 #garancia { padding-bottom: 120px !important; }

/* az 5959cb0 sorrendjét CSS-ben rögzítjük (cím -> videó -> nav), hogy egy Elementor-szerkesztő
   mentés (ami visszaállítja column-reverse-re a flex_direction-t) NE fordítsa meg a sorrendet */
.elementor-element-5959cb0,
.elementor-element-5959cb0 > .e-con-inner { flex-direction: column !important; }

/* ===================== MOBIL (≤767px) lépés-elrendezés ===================== */
@media (max-width: 767px){
  /* 1) szám + label MINDIG egy sorban (ne törjön külön sorba) */
  :is(.elementor-element-b66edbf,.elementor-element-b33cba3,.elementor-element-c555646,.elementor-element-4cd04dd,.elementor-element-636f254,.elementor-element-8b8f1fd,.elementor-element-b48adc7,.elementor-element-b0ff086){
    flex-direction: row !important; flex-wrap: nowrap !important; align-items: center;
  }

  /* 2) minden lépés: szám+label+szöveg FELÜL, a kép ALUL.
     A 8 lépés-sort column-ra kényszerítjük (az Elementor mobil column-reverse / row helyett) */
  :is(.elementor-element-6f9a481,.elementor-element-0f143c0,.elementor-element-b5a8e6c,.elementor-element-e7d5bf0,.elementor-element-895341f,.elementor-element-30b90e2,.elementor-element-da0e49c,.elementor-element-d7565cd){ --flex-direction: column !important; }
  :is(.elementor-element-6f9a481,.elementor-element-0f143c0,.elementor-element-b5a8e6c,.elementor-element-e7d5bf0,.elementor-element-895341f,.elementor-element-30b90e2,.elementor-element-da0e49c,.elementor-element-d7565cd) > .e-con-inner{ flex-direction: column !important; }
  /* a PÁROS lépéseknél a DOM-sorrend [kép, szöveg]; a képet order-rel a szöveg ALÁ tesszük */
  :is(.elementor-element-b7d0f84,.elementor-element-d0c7312,.elementor-element-9296b14,.elementor-element-2debb5e){ order: 2; }

  /* a kép töltse a teljes szélességet, természetes magassággal (a desktop flex-fill kikapcsolva) */
  :is(.elementor-element-902b66e,.elementor-element-2ed9934,.elementor-element-96f9b4f,.elementor-element-9097931,.elementor-element-5136acb,.elementor-element-c707234,.elementor-element-38221fc,.elementor-element-b59bafc){ display:block !important; }
  :is(.elementor-element-902b66e,.elementor-element-2ed9934,.elementor-element-96f9b4f,.elementor-element-9097931,.elementor-element-5136acb,.elementor-element-c707234,.elementor-element-38221fc,.elementor-element-b59bafc) > .elementor-widget-container,
  :is(.elementor-element-902b66e,.elementor-element-2ed9934,.elementor-element-96f9b4f,.elementor-element-9097931,.elementor-element-5136acb,.elementor-element-c707234,.elementor-element-38221fc,.elementor-element-b59bafc) figure,
  :is(.elementor-element-902b66e,.elementor-element-2ed9934,.elementor-element-96f9b4f,.elementor-element-9097931,.elementor-element-5136acb,.elementor-element-c707234,.elementor-element-38221fc,.elementor-element-b59bafc) .elementor-widget-container > a{ display:block !important; }
  :is(.elementor-element-902b66e,.elementor-element-2ed9934,.elementor-element-96f9b4f,.elementor-element-9097931,.elementor-element-5136acb,.elementor-element-c707234,.elementor-element-38221fc,.elementor-element-b59bafc) img{ width:100% !important; height:auto !important; object-fit:initial !important; flex:none !important; }

  /* 3) lefelé mutató nyíl a szekció alján — a 7 NEM-utolsó lépésnél (garancia=d7565cd kihagyva) */
  :is(.elementor-element-6f9a481,.elementor-element-0f143c0,.elementor-element-b5a8e6c,.elementor-element-e7d5bf0,.elementor-element-895341f,.elementor-element-30b90e2,.elementor-element-da0e49c) > .e-con-inner::after{
    content: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='36'%20height='40'%20viewBox='0%200%2036%2040'%20fill='none'%3E%3Cpath%20d='M18.0012%2040L0%2022.0743V8.29092L12.3744%2020.6133V0L23.6244%200V20.6168L36%208.29267V22.0767L18.0012%2040Z'%20fill='%23BCA889'/%3E%3C/svg%3E");
    order: 10; align-self: center; display: block; line-height: 0; margin: 60px 0 6px;
  }
}

/* mobil: a stack-elt lépés-oszlopok teljes szélességűek (desktop 50% helyett) */
@media (max-width: 767px){
  :is(.elementor-element-6f9a481,.elementor-element-0f143c0,.elementor-element-b5a8e6c,.elementor-element-e7d5bf0,.elementor-element-895341f,.elementor-element-30b90e2,.elementor-element-da0e49c,.elementor-element-d7565cd) > .e-con-inner > .e-con{
    width: 100% !important; --width: 100% !important;
  }
}

/* mobil: szám-körök 39×39, lépés-cím h2 20px */
@media (max-width: 767px){
  :is(.elementor-element-465865b,.elementor-element-5064cad,.elementor-element-2f38d51,.elementor-element-3a9df4f,.elementor-element-7c3bbc4,.elementor-element-ef42a6d,.elementor-element-4572caf,.elementor-element-142ebd6) .elementor-widget-container > div{
    flex: 0 0 39px !important; width: 39px !important; height: 39px !important;
  }
  body.page-id-18667 :is(.elementor-element-211ccde,.elementor-element-0aecc95,.elementor-element-b0e1f6a,.elementor-element-6ce7fad,.elementor-element-809e4da,.elementor-element-8b2238a,.elementor-element-1b502eb,.elementor-element-9ab1e75) h2.elementor-heading-title{
    font-size: 20px !important;
  }
}

/* desktop (≥768px): a szám-kör és a label közötti gap 45px minden lépésnél */
@media (min-width: 768px){
  :is(.elementor-element-b66edbf,.elementor-element-b33cba3,.elementor-element-c555646,.elementor-element-4cd04dd,.elementor-element-636f254,.elementor-element-8b8f1fd,.elementor-element-b48adc7,.elementor-element-b0ff086){
    gap: 35px !important; align-items: center !important;
  }
}