/* ---------------- RESET ---------------- */
    *,*::before,*::after{box-sizing:border-box}
    html,body{height:100%}
    :root{
      /* Alapszínek és tokenek */
      --sea:#0ea5e9;        /* primary */
      --sea-600:#0284c7;
      --sand:#fff7e6;       /* háttér váltásokhoz */
      --green:#22c55e;      /* ikon körök */
      --text:#0f172a;
      --muted:#5b667f;
      --bg:#ffffff;
      --border:#ffe8c9;
      --cta:#ff8a00;        /* narancs gomb */
      --cta-600:#e67600;
      --shadow:0 12px 30px rgba(2,132,199,.12);
      --radius:16px;
      --container:1400px;
      /* Rétegek (z-index) */
      --z-header:900;      /* fejlécre */
      --z-drawer:9999;     /* hamburger overlay */
      --z-modal:1800;      /* vélemény modal */
      --z-slider-content:2;/* keresődoboz a képek előtt */
      --z-slider-bg:0;     /* háttérképek legalul */
    }
    body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial;color:var(--text);background:var(--bg);scroll-behavior:smooth}
    img{max-width:100%;display:block}
    a{text-decoration:none;color:inherit}
    .container{max-width:var(--container);margin-inline:auto;padding-inline:16px}
    .btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;border:1px solid var(--border);background:#fff;cursor:pointer;transition:transform .06s ease,background .2s;
	box-shadow: 10px 10px 12px 1px rgba(0,0,0,0.75);-webkit-box-shadow: 10px 10px 12px 1px rgba(0,0,0,0.75);-moz-box-shadow: 10px 10px 12px 1px rgba(0,0,0,0.75);}
    .btn:active{transform:translateY(1px)}
    .btn.cta{background:var(--cta);color:#fff;border-color:var(--cta)}
    .btn.cta:hover{background:var(--cta-600)}
    .btn.ghost{background:#fff;border-color:var(--border)}

    /* ---------------- TOP STICKY HEADER + HAMBURGER ---------------- */
 
	.header {  position: fixed;  top: 0;  left: 0;  width: 100%;  z-index: var(--z-header, 9999);  background: #fff;	border-bottom: 1px solid var(--border);box-shadow: 2px 14px 18px -1px rgba(0,0,0,0.45);-webkit-box-shadow: 2px 14px 18px -1px rgba(0,0,0,0.45);-moz-box-shadow: 2px 14px 18px -1px rgba(0,0,0,0.45);}    .nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0}
    .brand{display:flex;align-items:center;gap:10px;font-weight:800}
    .logo{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--sea),#7dd3fc);display:grid;place-items:center;color:#fff;box-shadow:var(--shadow)}
    .hamburger{border:none;background:transparent;font-size:24px;padding:8px;border-radius:10px;cursor:pointer}
    .menu-inline{display:flex}

    .drawer{position:fixed;inset:0;display:none;align-items:stretch;justify-content:flex-end;background:rgba(15,23,42,.55); z-index: 9999; }
	
	
    .drawer.open{display:flex}
    .drawer-panel{position:relative;height:100%;width:min(88%,380px);background:#fff;padding:18px 16px;overflow:auto;z-index:calc(var(--z-drawer) + 1);box-shadow:-12px 0 30px rgba(0,0,0,.18)}
    .drawer h3{margin:6px 0 12px}
    .drawer a{display:block;padding:10px 12px;border-radius:12px}
    .drawer a:hover{background:#f1f5f9}
    .menu-group{margin-bottom:12px;border:1px solid var(--border);border-radius:14px;overflow:hidden}
    .menu-group summary{cursor:pointer;padding:12px 14px;background:#f8fafc;font-weight:700}
    .menu-group ul{list-style:none;padding:0;margin:0}
    .menu-group li+li a{border-top:1px solid var(--border)}

    /* ---------------- SLIDER + KERESŐ ---------------- */
    .slider{min-height:56vh;display:grid;place-items:center;overflow:hidden;z-index:0}
    .slide-bg{position:absolute;inset:0;transition:opacity .8s ease;opacity:0;z-index:var(--z-slider-bg);pointer-events:none;background-size:cover;background-position:center}
    .slide-bg.active{opacity:1}
    .bg-1{background:linear-gradient(180deg,#e6f7ff,#fff)}
    .bg-2{background:linear-gradient(180deg,var(--sand),#fff)}
    .bg-3{background:linear-gradient(180deg,#e8ffee,#fff)}

    .search-wrap{position:relative;z-index:var(--z-slider-content);width:min(920px,92%);background:#fff;padding:16px;border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--border)}
    .search-grid{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:10px}
    .field{display:flex;flex-direction:column;gap:6px}
    label{font-size:12px;color:var(--muted)}
    select,.input{border:1px solid var(--border);border-radius:10px;padding:10px 12px;font:inherit}

    /* vízszintes kártyasáv (szállások, tippek) */
    .h-scroll{display:flex;gap:12px;overflow:auto;padding-bottom:8px;scroll-snap-type:x mandatory}
    .h-scroll::-webkit-scrollbar{height:8px}
    .h-scroll::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:10px}
    .card{min-width:280px;max-width:320px;scroll-snap-align:center;border:1px solid var(--border);border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 6px 20px rgba(0,0,0,.06)}
    .card .media{aspect-ratio:16/10;background:#eef2f7}
    .card .body{padding:12px}
    .price{font-weight:800}

    .section{padding:28px 0; background-color: #fff9f1;}
    .title-row{display:grid;align-items:center;justify-content:space-between;margin-bottom:12px}
    .h2{font-size:22px;font-weight:900}
    .muted{color:var(--muted);font-size:18px}

    /* ---------------- INFO KÁRTYÁK (ikon kör + fehér piktogram) ---------------- */
    .info-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
    .info{grid-column:span 6;display:flex;gap:12px;align-items:flex-start;border:1px solid var(--border);border-radius:16px;padding:12px;background:#fff}
    .i-round{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;color:#fff}
    .i-sea{background:#a7e3ff}
    .i-green{background:#b9f7cb}
    .i-sand{background:#ffe4b5}

    /* ---------------- VÉLEMÉNYEK (auto scroll, pause on hover) ---------------- */
    .reviews{position:relative}
    .reviews .h-scroll{scroll-behavior:smooth}
    .review-card{min-width:320px}
    .review-card .body{display:flex;gap:10px}
    .avatar{width:48px;height:48px;border-radius:50%;flex:0 0 auto}

    /* ---------------- FOOTER ---------------- */
    footer{background:#f8fafc;border-top:1px solid var(--border)}
    .foot-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;padding:22px}
    .foot-col{grid-column:span 3}
    .foot-col h4{margin:0 0 8px}
    .foot-col ul{list-style:none;padding:0;margin:0}
    .foot-col li+li{margin-top:6px}
    .copy{color:#64748b;border-top:1px solid var(--border);padding:22px}

    /* ---------------- UTIL ---------------- */
    #toTop{position:fixed;right:14px;bottom:14px;z-index:20;display:none}
    #toTop.show{display:inline-flex}

    /* belépő animációk */
    .reveal{transform:translateX(30px);transition:opacity .6s ease, transform .6s ease}
    .reveal.left{transform:translateX(-30px)}
    .reveal.show{opacity:1;transform:translateX(0)}

    /* ---------------- RESPONSIVE ---------------- */
    @media (max-width: 900px){
      .menu-inline{display:none}
      .search-grid{grid-template-columns:1fr 1fr;}
      .info{grid-column:span 12}
      .foot-col{grid-column:span 6}
    }
    @media (max-width: 600px){
      .search-grid{grid-template-columns:1fr}
      .foot-col{grid-column:span 12}
    }
    /* Polaroid és villanás */

   .polaroid{position:relative;background:#fff;padding:6px;border:1px solid #e5e7eb;box-shadow:0 8px 18px rgba(0,0,0,.12);place-items:center;margin-right:10px;animation:flashIn .7s ease}
   
   
	// .polaroid{position:relative;background:#fff;padding:6px;border:1px solid #e5e7eb;box-shadow:0 8px 18px rgba(0,0,0,.12);width:96px;height:96px;display:grid;place-items:center;margin-right:10px;animation:flashIn .7s ease}
    .polaroid img{width:100%;height:100%;object-fit:cover}
    .polaroid.tilt{transform:rotate(-3deg)}
    @keyframes flashIn{0%{filter:brightness(2)}60%{filter:brightness(1)}100%{filter:brightness(1)}}

    /* Modal spin-in */
    .modal.show .modal-card{opacity:1;transform:scale(1) rotate(0deg)}
	
	
	
/* --- Newsletter --- */
    .newsletter{display:grid;grid-template-columns: 1.2fr 1fr;gap:1rem;align-items:center;
	background-color: #ffe8c9;
	
	border:1px solid var(--border);border-radius:calc(var(--radius) + 6px);padding:1.25rem}
    .newsletter form{display:flex;gap:.5rem}
    .newsletter input{flex:1;padding:.7rem .9rem;border-radius:12px;border:1px solid var(--border);background:var(--bg)}
	
	

#debug {
 position: fixed;
  bottom: 10px;
  left: 10px;
  background: rgba(0, 0, 0, 0.5);
  color: #0f0;
  font-family: monospace;
  font-size: 0.6rem;
  padding: 0.2rem 0.75rem;
  border-radius: 0.5rem;
  line-height: 1.4;
  z-index: 9999;
  backdrop-filter: blur(4px);
  width: 100px;
  // max-height: 4.5em;
  overflow: hidden;
}
#debug div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shdw{
box-shadow: 10px 10px 24px -2px rgba(0,0,0,0.43);
-webkit-box-shadow: 10px 10px 24px -2px rgba(0,0,0,0.43);
-moz-box-shadow: 10px 10px 24px -2px rgba(0,0,0,0.43);
}


.content-section.split {  display: flex;  align-items: flex-start;  justify-content: space-between;  gap: 2rem;  padding: 2rem 1rem;  background: #f8fafc;  flex-wrap: wrap; }
.content-card {  flex: 0 0 66.66%;  background: #fff;  border-radius: 1rem;  box-shadow: 0 6px 18px rgba(0,0,0,0.08);  padding: 2rem;  transition: transform 0.3s ease, box-shadow 0.3s ease;}
.content-card:hover {  transform: translateY(0px);  box-shadow: 0 10px 24px rgba(0,0,0,0.12);}
.content-side {  flex: 0 0 31%;  background: transparent;  padding: 1rem;  color: #333;  font-size: 1rem;  line-height: 1.6;}
.content-title {  font-size: 1.8rem;  margin-bottom: 0.5rem;  color: #003366;}
.content-subtitle {  font-size: 1.1rem;  color: #556677;  margin-bottom: 1.5rem;}

@media (max-width: 800px) {
  .content-card,
  .content-side {
    flex: 1 1 100%;
  }
  .content-card {
    margin-bottom: 1.5rem;
  }
}