:root {
  --brand:#339999;
  --text:#222;
  --bg:#fff;
  --muted:#f7f9fb;
}

/* ==== Reset + alap ==== */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;scroll-behavior:smooth}
body{
  font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
}

/* ==== HEADER ==== */
header{
  background:var(--brand);
  color:#fff;
  position:relative;
  z-index:100;
}
header .container{
  max-width:1000px;
  margin:0 auto;
  padding:.75rem 1rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.logo-img{height:70px;width:auto;display:block}

/* ==== DESKTOP MENÜ ==== */
.desktop-menu{
  display:flex;
  align-items:center;
  gap:1.25rem;
}
.desktop-menu a,.drop-trigger{
  color:#fff;
  text-decoration:none;
  font-weight:600;
  transition:opacity .2s;
}
.desktop-menu a:hover,.drop-trigger:hover{opacity:.9;}
.drop-trigger{cursor:url("down.cur"), default;}

/* Dropdown */
.dropdown{position:relative}
.dropdown-content{
  display:none;
  position:absolute;
  left:0;top:100%;
  background:#2e8f8f;
  border-radius:0 0 8px 8px;
  min-width:180px;
  box-shadow:0 8px 20px rgba(0,0,0,.15);
}
.dropdown-content a{
  display:block;
  color:#fff;
  padding:.6rem 1rem;
  border-left:4px solid transparent;
  transition:background .2s,border-left .2s;
}
.dropdown-content a:hover{
  border-left:3px solid #fff;
}
.dropdown:hover .dropdown-content{display:block}

/* Nyelvválasztó desktop */
.lang-selector{
  margin-left:1rem;
  border-left:1px solid #ffffff55;
  padding-left:1rem;
  display:flex;
  gap:.75rem;
}
.flag-select span{
  cursor:pointer;
  padding:.3rem .6rem;
  border-radius:4px;
  transition:background .2s;
}
.flag-select span:hover{background:#ffffff22}
.active-lang{font-weight:700;background:#ffffff33}

/* ==== MOBIL FEJLÉC ==== */
.mobile-header{
  display:none;
  align-items:center;
  justify-content:space-between;
  width:100%;
}
.mobile-lang{
  color:#fff;
  font-weight:700;
  cursor:pointer;
  font-size:1.2rem;
  letter-spacing:0.5px;
  text-transform:uppercase;
  user-select:none;
  display:flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  border:2px solid #fff2;
  border-radius:6px;
  background:rgba(255,255,255,0.1);
  transition:background .25s,border-color .25s;
}
.mobile-lang:hover{background:rgba(255,255,255,0.2);border-color:#fff5}
.mobile-logo img{height:52px}
.hamburger{
  width:34px;
  display:flex;
  flex-direction:column;
  gap:6px;
  cursor:pointer;
}
.hamburger span{
  display:block;
  height:4px;
  background:#fff;
  border-radius:2px;
}

/* ==== HERO ==== */
.hero-image{
  display:block;
  width:100%;
  max-width:1000px;
  margin:1.25rem auto 2rem;
  border-radius:10px;
  box-shadow:0 4px 12px rgba(0,0,0,.1);
}

/* ==== CONTENT ==== */
.content {
  max-width: 1000px;
  margin: 0 auto;
}

/* ==== KEZDŐLAP KÁRTYÁK ==== */
.card{
  background:var(--muted);
  border:2px solid var(--brand);
  border-radius:10px;
  padding:1.25rem;
  box-shadow:0 4px 16px rgba(0,0,0,.05);
  margin-bottom:1rem;
}
.card h3{color:var(--brand);margin-bottom:.5rem}
.card p{color:#444}
.card .tel{
  display:inline-block;
  margin-top:.4rem;
  font-size:1.15rem;
  font-weight:700;
  color:#0d3d3d;
  text-decoration:none;
}
.card .tel:hover{text-decoration:underline}

/* ==== NYITVATARTÁS ==== */
.hours-list{list-style:none;margin-top:.5rem}
.hours-list li{
  display:flex;
  justify-content:space-between;
  border-bottom:1px dashed #d8e3e6;
  padding:.35rem 0;
}
.hours-list li span:first-child{font-weight:600;color:#0d3d3d}
.hours-list li.closed-day span:last-child{
  color:#c0392b;
  font-weight:700;
  font-style:italic;
  letter-spacing:.3px;
}

/* ==== STORY ==== */
.story-section{text-align:left}
.story-section img{width:100%;border-radius:10px}
.story-section p{color:#333}
.story-section button.map-toggle{
  background:var(--brand);
  color:#fff;
  border:none;
  border-radius:6px;
  padding:.6rem 1rem;
  font-weight:600;
  cursor:pointer;
  transition:background .2s;
}
.story-section button.map-toggle:hover{background:#287777}

/* ==== FOOTER ==== */
footer{
  background:#f3f7f7;
  color:#345;
  text-align:center;
  padding:1rem 1rem 2rem;
}
.footer-content{max-width:1000px;margin:0 auto}
.footer-logo{height:120px;margin-bottom:15px}
.footer-brand span{display:block}
.footer-brand .address{white-space:nowrap}
.footer-brand .contact a{color:#245e5e;text-decoration:none}
.footer-brand .contact a:hover{text-decoration:underline}

/* Kontakt badge */
.footer-contact-buttons{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:.5rem;
  margin-top:.75rem;
}
.contact-btn{
  background:#e7f1f1;
  color:#245e5e;
  border:1px solid #cfe6e6;
  border-radius:999px;
  padding:.4rem .9rem;
  font-weight:500;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  transition:color .25s,background .25s;
}
.contact-btn:hover{background:#dff2f2;color:var(--brand)}

/* ==== Útvonalterv blokk ==== */
.route-wrapper {
  position: relative;
  border: 3px solid #339999;
  border-radius: 12px;
  padding: 2rem 1.5rem 1.5rem;
  margin: 2rem auto;
  max-width: 1000px;
  background-color: rgba(51,153,153,0.02);
  text-align: center;
}

/* ==== Cím a keretbe vágva ==== */
.route-wrapper figcaption {
  position: absolute;
  top: -0.9rem; /* a “bevágás” mélysége */
  background: #f3f7f7; /* a háttér színe, hogy “kivágja” a keretet */
  padding: 0 0.8rem;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 1.1rem;
  color: #339999;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* 🔹 Balra-fent elhelyezés */
.route-wrapper figcaption {
  left: 1.2rem;
}

/* 🔹 (Alternatíva – ha inkább középen szeretnéd:)
.route-wrapper figcaption {
  left: 50%;
  transform: translateX(-50%);
}
*/

/* ==== Útvonalterv linkek ==== */
.route-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.2rem;
}

.route-buttons a {
  color: #245e5e;
  font-weight: 600;
  text-decoration: none;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  transition: color 0.25s ease;
}

.route-buttons a i {
  font-size: 1.2rem;
  color: #245e5e;
  transition: color 0.25s ease;
}

.route-buttons a:hover {
  color: #339999;
}

.route-buttons a:hover i {
  color: #339999;
}

/* ==== Mobil nézet ==== */
@media (max-width: 768px) {
  .route-wrapper {
    max-width: 95%;
    padding: 2rem 1rem 1.2rem;
  }
  .route-wrapper figcaption {
    font-size: 1rem;
    top: -0.8rem;
    left: 1rem;
  }
}

/* Badge blokk */
.footer-badges{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-top:20px;}
.badge{background:#e7f1f1;color:#245e5e;border:1px solid #cfe6e6;border-radius:999px;padding:.35rem .7rem;font-size:.9rem}

/* ==== Bankkártya logók (footer) ==== */
.bankkartya-logok {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1.5rem auto;
  max-width: 800px;
  width: 100%;
}

.bankkartya-logok img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ==== Mobilnézet ==== */
@media (max-width: 768px) {
  .bankkartya-logok {
    max-width: 90%;
    margin: 1rem auto;
  }
}

/* Fix map footer */
.footer-map-fixed{
  position:relative;
  width:100%;
  background:#f3f7f7;
  display:flex;
  justify-content:center;
  align-items:flex-end;
  padding-top:1rem;
  margin-top:1.5rem;
}
.footer-map-fixed::before{
  content:"";
  position:absolute;
  top:0;left:5%;right:5%;
  height:1px;
  background:#d8e3e6;
  opacity:.8;
}
.footer-map-fixed .map-embed{
  width:100%;
  max-width:1000px;
  border-radius:10px 10px 0 0;
  overflow:hidden;
}
.footer-map-fixed iframe{
  width:100%;
  height:260px;
  border:none;
  filter:brightness(.9) opacity(.7);
  transition:filter .4s;
}
.footer-map-fixed iframe:hover{filter:brightness(1) opacity(.9)}

/* Social */
.footer-social{display:flex;gap:1rem;justify-content:center}
.footer-social a{color:#245e5e;font-size:1.2rem;transition:color .2s}
.footer-social a:hover{color:#339999}
.footer-social span{color:#245e5e;font-size:1.2rem;font-weight:600}

/* ==== MOBIL MENÜ ÉS NYELVVÁLASZTÓ ==== */
.mobile-menu-overlay,
.mobile-lang-overlay{
  display:none;
  opacity:0;
  pointer-events:none;
  position:fixed;
  inset:0;
  z-index:900;
}

/* Aktív állapot */
.mobile-menu-overlay.active,
.mobile-lang-overlay[style*="display: flex"]{
  display:flex !important;
  opacity:1;
  pointer-events:all;
}

/* Mobil menü */
.mobile-menu-overlay{
  background:var(--brand);
  flex-direction:column;
  justify-content:flex-start;
  align-items:center;
  padding-top:2rem;
  overflow-y:auto;
  transition:transform .3s,opacity .3s;
}
.mobile-menu-overlay .close-overlay.center{
  font-size:2.5rem;
  color:#fff;
  margin-bottom:1rem;
  cursor:pointer;
}
.mobile-menu-inner{
  width:100%;
  max-width:1000px;
  padding:1.5rem;
  display:flex;
  flex-direction:column;
  gap:1.2rem;
}

/* --- DROPDOWN JAVÍTÁS (mindig működjön) --- */
.mobile-toggle .toggle-trigger{
  font-size:1.5rem;
  color:#fff;
  font-weight:700;
  text-transform: uppercase;
  border-bottom: 3px solid darkturquoise;
  text-align:center;
  cursor:pointer;
  user-select:none;
  transition:opacity .3s;
}
.mobile-toggle .toggle-trigger:hover{opacity:.9}

/* alapból rejtett */
.mobile-toggle .toggle-content{
  display:none;
  flex-direction:column;
  gap:.5rem;
  margin-top:.4rem;
  transition:max-height .3s ease, opacity .3s ease;
  max-height:0;
  overflow:hidden;
  opacity:0;
}

/* ha active class rajta van → nyitva van */
.mobile-toggle.active .toggle-content{
  display:flex;
  max-height:500px; /* elég nagy, hogy minden link beleférjen */
  opacity:1;
}

.mobile-toggle .toggle-content a{
  color:#fff;
  font-size:1.2rem;
  text-decoration:none;
  text-align:center;
  background:#ffffff22;
  border-radius:6px;
  padding:.4rem 0;
}
.mobile-toggle .toggle-content a:hover{background:#ffffff33}

.mobile-single{
  color:#fff;
  font-size:1.4rem;
  text-align:center;
  text-decoration:none;
  font-weight:700;
  text-transform: uppercase;
}

/* ==== JAVÍTOTT MOBIL NYELVVÁLASZTÓ OVERLAY ==== */
.mobile-lang-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 950;
  background: #fff;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding-top: 4rem;
  text-align: center;
  overflow: hidden;
}

/* aktiválás (JS-ből display:flex lesz) */
.mobile-lang-overlay[style*="display: flex"] {
  display: flex !important;
  opacity: 1;
  pointer-events: all;
}

/* zöld X középen, háttér nélkül */
.mobile-lang-overlay .close-overlay.center {
  font-size: 3rem;
  color: var(--brand);
  background: none;
  border: none;
  border-radius: 0;
  width: auto;
  height: auto;
  line-height: 1;
  text-align: center;
  margin: 0 auto 1.5rem;
  cursor: pointer;
  position: relative;
  top: 0;
  right: 0;
  z-index: 1000;
}

/* nyelvi opciók */
.mobile-lang-overlay .lang-options {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: auto;
  margin-top: 1rem;
}

.mobile-lang-overlay div[data-lang] {
  font-size: 1.9rem;
  padding: .9rem 1.4rem;
  border-radius: 8px;
  margin: .6rem 0;
  cursor: pointer;
  color: var(--brand);
  transition: background .2s;
}
.mobile-lang-overlay div[data-lang]:hover {
  background: #eef6f6;
}

/* ==== RESPONSIVE ==== */
@media(max-width:900px){
  .desktop-menu{display:none}
  .mobile-header{display:flex}
  .logo{display:none}
  .hero-image{border-radius: 0;margin-top:0;}
  .content{max-width: 95%}
  .footer-brand .address{white-space:normal;font-size:12px}
  .footer-contact-buttons{flex-direction:column;align-items:center}
  .contact-btn{width:90%;justify-content:center}
  .footer-map-fixed iframe{height:220px;max-width:90%}
}

/* Desktop nézetben ezek rejtve */
@media(min-width:901px){
  .mobile-menu-overlay,
  .mobile-lang-overlay{
    display:none !important;
    opacity:0 !important;
    pointer-events:none !important;
  }
}