body {
  --sb-track-color: #ffffff;
  --sb-thumb-color: #006fb8;
  --sb-size: 5px;
}

body::-webkit-scrollbar {
  width: var(--sb-size)
}

body::-webkit-scrollbar-track {
  background: var(--sb-track-color);
  border-radius: 3px;
}

body::-webkit-scrollbar-thumb {
  background: var(--sb-thumb-color);
  border-radius: 3px;
  
}

@supports not selector(::-webkit-scrollbar) {
  body {
    scrollbar-color: var(--sb-thumb-color)
                     var(--sb-track-color);
  }
}



/* ALAPBEÁLLÍTÁSOK: a body már nem kap háttérképet */
body {
  background-color: #f6f7f9; /* Világosszürke háttér, mint a kereső oldalakon */
  min-height: 100vh;
  margin: 0;
  position: relative;
}

/* Sticky footer layout - módosítva: nem kényszerítjük a teljes magasságot */
.wrapper {
  background-color: transparent; /* Átlátszó háttér, hogy látszódjon a body színe */
  min-height: auto; /* Megszüntetjük a kényszerített magasságot */
  display: flex;
  flex-direction: column;
}
.main-content {
  flex: 1 0 auto;
}
footer {
  margin-top: auto;
}

.header-bg {
    width: 100%;
    padding-bottom: 100px;
}

/* Fő tartalom stílusai */
.main-container {
  text-align: center;
  margin-top: 50px;
}

h1 {
  color: white;
  font-family: "Spartan", sans-serif;
  font-size: 3em;
  margin: 0;
}

h1.maintext {
  padding-bottom: 20px;
  color: white;
  font-family: "Spartan", sans-serif;
  font-size: 3em;
  margin: 0;
}

h1.maintext span {
  color: #6AC6E3; /* Initial color */
  animation: colorTransition 5s ease-in-out infinite; /* Animation applied */
}


@keyframes colorTransition {
  0% {
    color: #ffffff;
  }
  50% {
    color: #008ab8;
  }
  100% {
    color: #ffffff;
  }
}

@keyframes fadeEraseMobile {
  0% { opacity: 0; }
  40% { opacity: 1; }
  60% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes fadeErase {
  0% { opacity: 0; }
  40% { opacity: 0.25; }
  60% { opacity: 0.25; }
  100% { opacity: 0; }
}

/* Ensure the animation works smoothly on all screen sizes */
@media (max-width: 768px) {
  h1.maintext {
    font-size: 2em;
  }
  h1.maintext span {
    animation: colorTransition 10s ease-in-out infinite; /* Keep animation consistent */
  }
}

@media (max-width: 480px) {
  h1.maintext span {
    animation: colorTransition 10s ease-in-out infinite; /* Keep animation consistent */
  }
}

/* Keresőmező */
.container-input {
  padding-bottom: 20px;
  text-align: center;
  margin-top: 20px;
}

.input {
  width: 80%;
  max-width: 450px;
  padding: 10px;
  border-radius: 9999px;
  border: 1px solid #ffffff;
  transition: width 0.2s ease-in-out;
  outline: none;
  opacity: 0.8;
  box-sizing: border-box;
}


.buttons-container {
  position: relative;
  z-index: 10;
  margin: 0 auto;
  margin-top: -90px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
  padding: 20px 20px 10px 20px;
  margin-bottom: 10px;
}

/* Kör alakú gombok stílusa */
.circle-button {
  margin: 0px;
  width: 140px;
  height: 140px;
  background-color: #ffffff;
  border: 3px solid #d6d6d6;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 10px;
  cursor: pointer;
  transition: transform 0.2s;
}

.circle-button:hover {
  transform: scale(1.05);
}

/* Az ikonok (SVG) méretezése */
.circle-button svg {
/*Méretet ne adj meg mert mindennek custom*/
  margin-bottom: 10px;
}

.circle-button .text-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}



/* Gomb szövegek */
.circle-button .cim {
  font-weight: bold;
  font-size: 1em;
  color: #000;
}

.circle-button .info {
  font-size: 0.85em;
  color: #A1A3AC;
}

/* MÉDIA QUERY-K */
@media (max-width: 768px) {
  .wrapper {
    background-color: transparent;
  }
  body {
    background-image: url(../img/mobileindex.svg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    min-height: 100vh;
  }
  .header-bg { 
    background: transparent !important;
    background-image: none !important;
    height: auto;
  }
  h1.main-title span {
    color: #ffffff !important;
    opacity: 0;
    animation: fadeEraseMobile 6s ease-in-out infinite;
  }
  h1.maintext span {
    color: #ffffff !important;
    opacity: 0;
    animation: fadeEraseMobile 6s ease-in-out infinite;
  }
  h1 {
    font-size: 2em;
  }
  .container-input {
  }
  .input {
    width: 100%;
    max-width: 330px;
    margin: 0 auto;
    display: block;
  }
  .circle-button {
    width: 400px;
    height: 90px;
    background-color: #ffffff;
    border: 3px solid #d6d6d6;
    border-radius: 100px;
    display: flex;
    flex-direction: row;  /* Vízszintes elrendezés: SVG és szöveg konténer egymás mellett */
    align-items: center;
    justify-content: flex-start;
    padding: 10px 20px;
    gap: 20px; /* Távolság az SVG és a szöveg konténer között */
    cursor: pointer;
    transition: transform 0.2s;
  }
  .circle-button:hover {
    transform: scale(1.05);
  }
  .circle-button svg {
    margin: 0; /* vagy tetszőleges margin */
    width: 30px;
    height: 30px;
  }
  /* A text-content tartalma oszlopban rendeződik */
  .circle-button .text-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  /* Esetleg módosítsd a cím és info betűméretét, ha kell */
  .circle-button .cim {
    font-family: 'Spartan';
    font-size: 1em;
    /* További margók, ha kell, például margin-bottom: 4px; */
  }
  .circle-button .info {
    font-size: 0.85em;
    color: #A1A3AC;
  }

  .buttons-container {
    position: static;
    width: 330px;
    margin: 0 auto;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    padding: 0px 0px 60px 0px;
  }
  .morecontent { background: transparent; }
}

@media (max-width: 480px) {
  .input {
    width: 100%;
    max-width: 330px;
    height: 60px;
    margin: 0 auto;
    display: block;
  }
  .circle-button {
    width: 330px;
    height: 60px;
    border-radius: 44px;
    border: 2px solid #E4E7EC;
  }
  .circle-button .cim {
    font-size: 1em;
  }
  .circle-button .info {
    font-size: 0.8em;
  }
  .morecontent { background: transparent; }
}


/* A wrapper tartalmazza az összes tartalmat és a footert */
.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* A fő tartalom kitolja a rendelkezésre álló helyet */
.main-content {
  flex: 1;
}

/* Az alatta lévő tartalom – itt nem jelenik meg a háttérkép */
.morecontent {
  background-color: rgb(255, 255, 255);
  padding: 20px;
  text-align: center;
}

.morecontent h1 {
  color: #000;
}

/* Popuphoz kapcsolódó stílusok törölve az index.css-ből.
   A popup és overlay megjelenést a ../css/popup.css kezeli
   (ll-popup-scope, ll-popup-overlay), így az oldal általános
   elrendezését nem befolyásolja. */