:root{
  /* Beach palette (light sand + sea + sun) */
  --bg:#f8f1e3;           /* sand */
  --panel:rgba(255,255,255,.72);
  --panel2:rgba(255,255,255,.58);
  --text:#0f2a33;         /* deep sea ink */
  --muted:#3f5e66;
  --line:rgba(15,42,51,.14);
  --accent:#1aa7ff;       /* sea */
  --accent2:#fdbb2d;      /* sun */
  --seaDeep:#0b6bd6;      /* deep sea */
  --danger:#e95d73;
  --warn:#d79a16;
  --ok:#2aa86e;
  --shadow: 0 18px 55px rgba(15,42,51,.16);
  --radius:18px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
    background:
      radial-gradient(900px 520px at 10% -10%, rgba(253,187,45,.30), transparent 60%),
      radial-gradient(1200px 720px at 100% 0%, rgba(26,167,255,.22), transparent 60%),
      radial-gradient(1200px 720px at 0% 100%, rgba(11,107,214,.18), transparent 58%),
      radial-gradient(900px 540px at 60% 120%, rgba(26,167,255,.18), transparent 55%),
      linear-gradient(180deg, rgba(223,244,255,.85) 0%, rgba(26,167,255,.10) 32%, transparent 60%),
      var(--bg);
  color:var(--text);
  line-height:1.5;
}
a{color:inherit;text-decoration:none}
a:hover{opacity:.92}
code{background:rgba(255,255,255,.08);padding:.15rem .35rem;border-radius:.4rem}

.wrap{max-width:1100px;margin:0 auto;padding:0 18px}

.topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(248,241,227,.75);
  backdrop-filter: blur(12px);
  border-bottom:1px solid var(--line);
}
.topbar__inner{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 18px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700}
.brand__dot{width:12px;height:12px;border-radius:999px;background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 0 0 6px rgba(34,193,195,.12)}
.brand__name{letter-spacing:.2px}
.nav{display:flex;gap:14px;align-items:center}
.nav a{padding:8px 10px;border-radius:12px;color:var(--muted)}
.nav a:hover{background:rgba(255,255,255,.06);color:var(--text)}
.burger{display:none;background:transparent;color:var(--text);border:1px solid var(--line);border-radius:12px;padding:8px 10px}

.hero{padding:56px 0 30px;position:relative}
.hero__decor{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hero__decor .d{
  position:absolute;
  filter: drop-shadow(0 12px 30px rgba(15,42,51,.12));
  opacity:.92;
}
.hero__decor .d--sun{top:18px;right:-14px;width:150px;transform: rotate(8deg)}
.hero__decor .d--wave{bottom:-22px;left:-22px;width:260px;transform: rotate(-4deg)}
.hero__decor .d--shell{top:120px;left:-18px;width:120px;transform: rotate(-10deg)}
.hero__decor .d--gull{top:36px;left:42%;width:170px;transform: rotate(3deg);opacity:.55}
.hero__decor .d--palm{bottom:-34px;right:6px;width:170px;transform: rotate(2deg);opacity:.70}
.hero__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:22px;align-items:center}
.kicker{color:var(--muted);margin:0 0 6px}
h1{font-size:clamp(2rem, 3.6vw, 3rem);line-height:1.1;margin:.2rem 0 12px}
.lead{color:var(--muted);font-size:1.05rem;margin:0 0 18px}
.hero__cta{display:flex;gap:10px;flex-wrap:wrap}
.hero__media{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);background:var(--panel)}
.hero__media img{width:100%;height:360px;object-fit:cover;display:block}
.micro{font-size:.86rem;color:var(--muted)}

.section{padding:44px 0}
.section--alt{background:linear-gradient(180deg, transparent, rgba(26,167,255,.10) 30%, transparent)}
.section h2{font-size:1.6rem;margin:0 0 14px}
.muted{color:var(--muted)}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.card{background:var(--panel2);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:0 10px 30px rgba(15,42,51,.12)}
.card h3{margin:0 0 8px}

.room-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.room{display:grid;grid-template-columns:1fr;overflow:hidden;border-radius:var(--radius);border:1px solid var(--line);background:var(--panel2);box-shadow:var(--shadow)}
.room img{width:100%;height:240px;object-fit:cover;display:block}
.room__body{padding:16px}
.bullets{margin:10px 0 0;padding-left:18px;color:var(--muted)}

.price-box{border:1px solid var(--line);border-radius:var(--radius);padding:16px;background:var(--panel2)}
.price-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.price-list li{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:10px;border-radius:14px;background:rgba(15,42,51,.05);border:1px solid rgba(15,42,51,.08)}

.hours{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.hours__table{border:1px solid var(--line);border-radius:var(--radius);padding:14px;background:var(--panel2)}
.hours__row{display:flex;justify-content:space-between;gap:10px;padding:10px;border-bottom:1px dashed rgba(15,42,51,.14)}
.hours__row:last-child{border-bottom:none}
.hours__note{border:1px solid var(--line);border-radius:var(--radius);padding:14px;background:rgba(255,255,255,.55);color:var(--muted)}

.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.gallery img{width:100%;height:170px;object-fit:cover;border-radius:16px;border:1px solid var(--line)}

.booking{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.booking__left,.booking__right{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel2);box-shadow:0 10px 30px rgba(15,42,51,.12)}
.booking__left{padding:14px}
.booking__right{padding:14px}

.legend{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.pill{font-size:.82rem;padding:6px 10px;border-radius:999px;border:1px solid var(--line)}
.pill--ok{background:rgba(52,211,153,.14);border-color:rgba(52,211,153,.35)}
.pill--warn{background:rgba(251,191,36,.12);border-color:rgba(251,191,36,.35)}
.pill--full{background:rgba(251,113,133,.12);border-color:rgba(251,113,133,.35)}

.calendar{user-select:none}
.cal__head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.cal__head button{border:1px solid var(--line);background:rgba(255,255,255,.55);color:var(--text);border-radius:12px;padding:8px 10px;cursor:pointer}
.cal__head button:hover{background:rgba(255,255,255,.06)}
.cal__title{font-weight:700}
.cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.cal__dow{font-size:.78rem;color:var(--muted);text-align:center;padding:6px 0}
.cal__cell{border:1px solid rgba(15,42,51,.12);border-radius:14px;min-height:44px;padding:8px;display:flex;align-items:flex-start;justify-content:space-between;gap:8px;background:rgba(255,255,255,.45);cursor:pointer}
.cal__cell:hover{background:rgba(255,255,255,.06)}
.cal__cell--muted{opacity:.45;cursor:default}
.cal__cell--selected{outline:2px solid rgba(34,193,195,.55);background:rgba(34,193,195,.12)}
.cal__badge{font-size:.72rem;padding:3px 8px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.cal__badge--ok{border-color:rgba(52,211,153,.35)}
.cal__badge--warn{border-color:rgba(251,191,36,.35)}
.cal__badge--full{border-color:rgba(251,113,133,.35)}

.form{display:flex;flex-direction:column;gap:12px}
.form__row{display:flex;flex-direction:column;gap:6px}
label{font-size:.92rem;color:var(--muted)}
input,select,textarea{
  background:rgba(255,255,255,.75);
  color:var(--text);
  border:1px solid rgba(15,42,51,.16);
  border-radius:14px;
  padding:10px 12px;
  outline:none;
}
input:focus,select:focus,textarea:focus{border-color:rgba(34,193,195,.60);box-shadow:0 0 0 4px rgba(34,193,195,.14)}
.sep{border:none;border-top:1px solid rgba(255,255,255,.12);margin:6px 0}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:linear-gradient(135deg, rgba(34,193,195,.95), rgba(253,187,45,.95));color:#062026;border:none;border-radius:16px;padding:11px 14px;font-weight:800;cursor:pointer;box-shadow:0 12px 34px rgba(15,42,51,.18)}
.btn:hover{transform: translateY(-1px)}
.btn--ghost{background:transparent;color:var(--text);border:1px solid rgba(15,42,51,.22)}
.btn--ghost:hover{background:rgba(255,255,255,.50)}
.btn--small{padding:8px 10px;border-radius:14px;font-weight:800}

.toast{margin-top:12px;display:none;padding:12px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.55)}
.toast--ok{display:block;border-color:rgba(52,211,153,.35);background:rgba(52,211,153,.10)}
.toast--bad{display:block;border-color:rgba(251,113,133,.35);background:rgba(251,113,133,.10)}

.footer{padding:26px 0;border-top:1px solid var(--line)}
.footer__grid{display:flex;justify-content:space-between;gap:16px;align-items:center}
.footer__links{display:flex;gap:14px}
.footer__links a{color:var(--muted)}

@media (max-width: 900px){
  .hero__grid{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .room-grid{grid-template-columns:1fr}
  .hours{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr 1fr}
  .booking{grid-template-columns:1fr}
  .nav{display:none}
  .burger{display:inline-flex}
  .nav.nav--open{display:flex;flex-direction:column;position:absolute;top:58px;right:12px;background:rgba(248,241,227,.95);border:1px solid var(--line);border-radius:16px;padding:10px;box-shadow:var(--shadow)}
}


/* Beach divider: extra figures lower on the page (no animation) */
.beach-divider{
  position:relative;
  height:86px;
  margin:-14px 0 8px;
  overflow:hidden;
  pointer-events:none;
  opacity:.95;
}
.beach-divider .bd{
  position:absolute;
  filter: drop-shadow(0 10px 26px rgba(15,42,51,.12));
}
.beach-divider .bd--wave{left:-2%;right:-2%;bottom:-14px;width:104%;height:auto;opacity:.92}
.beach-divider .bd--umbrella{right:18px;bottom:-6px;width:120px;opacity:.92;transform:rotate(6deg)}
.beach-divider .bd--kids{left:14px;bottom:-10px;width:150px;opacity:.92;transform:rotate(-4deg)}
.beach-divider .bd--gull{left:44%;bottom:34px;width:150px;opacity:.35}
.beach-divider .bd--star{right:150px;bottom:-6px;width:74px;opacity:.75;transform:rotate(8deg)}
@media (max-width: 720px){
  .beach-divider{height:74px;margin:-10px 0 10px}
  .beach-divider .bd--umbrella{width:92px;right:10px;bottom:-10px}
  .beach-divider .bd--kids{width:118px;left:8px;bottom:-14px}
  .beach-divider .bd--gull{display:none}
  .beach-divider .bd--star{width:60px;right:108px;bottom:-10px}
}


.form__row--split{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media (max-width:640px){.form__row--split{grid-template-columns:1fr;}}


/* Modal (success) */
.modalOverlay{
  position:fixed; inset:0; display:none;
  align-items:center; justify-content:center;
  background:rgba(0,0,0,.45);
  padding:16px;
  z-index:9999;
}
.modalOverlay.isOpen{ display:flex; }
.modalCard{
  width:min(520px, 100%);
  background:#fff;
  border-radius:18px;
  padding:18px 18px 14px;
  box-shadow:0 18px 60px rgba(0,0,0,.25);
}
.modalCard h3{ margin:0 0 8px 0; }
.modalCard p{ margin:0 0 14px 0; line-height:1.35; }
.modalActions{ display:flex; justify-content:flex-end; gap:10px; }

/* Highlight availability status on booking section */
.status-highlight{
  font-size:16px;
  font-weight:600;
  color:#0a7f2e;
  background:#e8ffe8;
  padding:8px 12px;
  border-radius:8px;
  border:2px solid #0a7f2e;
  margin-top:8px;
  display:inline-block;
}


/* Kiemelt foglalási összegzés (Buchung – Preis összegzés) */
#priceHint{
  font-size: 1.0rem; /* egyel nagyobb, mint a micro */
  font-weight: 800;
  color: #000;
}


/* Room gallery */
.room{cursor:pointer}
.room:focus{outline:3px solid rgba(26,167,255,.45); outline-offset:4px}
.room:hover{transform:translateY(-1px); box-shadow:0 14px 30px rgba(10,30,40,.14)}
.modalCard--gallery{max-width:920px}
.galleryHeader{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.iconBtn{appearance:none;border:0;background:rgba(15,42,51,.08);color:var(--text);width:42px;height:42px;border-radius:999px;font-size:26px;line-height:42px;cursor:pointer}
.iconBtn:hover{background:rgba(15,42,51,.12)}
.galleryMainBtn{border:0;padding:0;background:transparent;cursor:zoom-in;width:100%}
#roomGalleryMain{width:100%;height:420px;object-fit:cover;border-radius:14px;border:1px solid var(--line);box-shadow:var(--shadow)}
.thumbGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px}
.thumbBtn{border:1px solid var(--line);background:rgba(255,255,255,.6);border-radius:12px;overflow:hidden;padding:0;cursor:pointer}
.thumbBtn img{display:block;width:100%;height:110px;object-fit:cover}
.thumbBtn[aria-current="true"]{outline:3px solid rgba(26,167,255,.55);outline-offset:2px}
@media (max-width:780px){
  #roomGalleryMain{height:260px}
  .thumbGrid{grid-template-columns:repeat(2,1fr)}
  .thumbBtn img{height:120px}
}

/* Lightbox */
.lightboxInner{position:relative;max-width:min(1100px,96vw);max-height:92vh;margin:4vh auto;background:rgba(0,0,0,.08);border-radius:18px;padding:14px}
.iconBtn--lightbox{position:absolute;top:10px;right:10px;background:rgba(255,255,255,.88)}
#imageLightboxImg{display:block;max-width:96vw;max-height:86vh;margin:0 auto;border-radius:14px;border:1px solid rgba(255,255,255,.2);box-shadow:0 18px 60px rgba(0,0,0,.35)}

/* Legal modals */
.modalCard--legal{width:min(860px, 100%);}
.legalHeader{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.legalBody{max-height:70vh;overflow:auto;padding-right:6px}
.legalBody h4{margin:14px 0 6px 0;font-size:1.02rem}
.legalBody p{margin:0 0 10px 0}



/* Map button in top navigation */
.nav__map{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
}
.nav__map::before{
  content:"📍";
  transform: translateY(-1px);
}