@import "compass/css3";

/* Reset default margins */
body, html {
  scroll-behavior: smooth;
  margin: 0;
  padding: 0;
  background-color: #F6EDE4;
  font-family: Arial, sans-serif;
}

/* Loader */
#loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #EABDAC;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999;
  transition: opacity 0.5s ease;
}

#loader.fade-out {
  opacity: 0;
  pointer-events: none;
}

#loader img {
  width: 300px;
  height: auto;
}

/* Top band / header */
.top-band {
  width: 100%;
  height: 60px;
  background-color: #EABDAC;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

/* Logo in center */
.logo { height: 60px; }

/* Language switch button */
.lang-btn {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  padding: 10px 15px;
  background-color: rgba(0,0,0,0.1);
  color: #000;
  border: none;
  cursor: pointer;
  font-size: 18px;
  border-radius: 20px;
  transition: background 0.3s;
}
.lang-btn:hover { background-color: rgba(0,0,0,0.2); }

/* Image container */
.image-container {
  position: relative;
  width: 100%;
  margin: 20px auto 0 auto;
  background-color: #F6EDE4;
}
.image-container img {
  width: 100%;
  height: auto;
  display: block;
}

/* Notfound container */
.notfound-container {
  border-radius: 20px;
}

/* Gooey menu */
.menu { filter:url('#shadowed-goo'); }

/* Fixed menu bottom-right */
:root{
  --menu-margin: 20px;
  --main-btn-size: 65px;
  --item-size: 80px;
  --scale-closed: calc(var(--main-btn-size) / var(--item-size));
  --btn-bg: #EABDAC;
  --banner-radius: 28px;
}
.menu{
  position:fixed;
  right:var(--menu-margin);
  bottom:var(--menu-margin);
  width:160px; height:160px;
  z-index:9999;
}
.menu-item,.menu-open-button{
  position:absolute; right:0; bottom:0;
  border-radius:50%;
  background:var(--btn-bg);
  color:#fff; text-align:center;
  width:var(--item-size); height:var(--item-size);
  line-height:var(--item-size);
  transform:translate3d(0,0,0);
  transition:transform 220ms ease, opacity 180ms ease;
}
.menu-open-button{
  width:var(--main-btn-size);
  height:var(--main-btn-size);
  line-height:var(--main-btn-size);
  cursor:pointer;
  transition:transform 200ms ease;
}
.menu-open-button:hover{ transform:scale(1.05); }
.menu-open:checked + .menu-open-button{ transform:scale(0.9) translate3d(0,0,0) !important; }
.menu-open{ display:none; }

/* Hamburger icon */
.hamburger{
  position:absolute; left:50%; top:50%;
  width:28px; height:3px;
  background:#fff; border-radius:2px;
  transform-origin:50% 50%;
  transition:transform 200ms ease, opacity 200ms ease;
}
.hamburger-1{ transform:translate(-50%, calc(-50% - 8px)); }
.hamburger-2{ transform:translate(-50%, -50%); }
.hamburger-3{ transform:translate(-50%, calc(-50% + 8px)); }
.menu-open:checked + .menu-open-button .hamburger-1{ transform:translate(-50%, -50%) rotate(45deg); }
.menu-open:checked + .menu-open-button .hamburger-2{ opacity:0; }
.menu-open:checked + .menu-open-button .hamburger-3{ transform:translate(-50%, -50%) rotate(-45deg); }

/* Icons inside submenu items */
.menu-item i{
  font-size:36px; position:absolute; top:50%; left:50%;
  transform:translate(-50%, -50%); line-height:1; color:inherit;
}

/* Closed: submenu stacked behind main, same visual size */
.menu-item{
  transform:translate3d(0,0,0) scale(var(--scale-closed));
  opacity:0; pointer-events:none;
  transform-origin:bottom right;
}
/* Open: fan out to upper-left arc, full size */
.menu-open:checked ~ .menu-item{ opacity:1; pointer-events:auto; }
.menu-open:checked ~ .menu-item:nth-child(3){ transform:translate3d(-114.43px, -11.48px, 0) scale(1); }
.menu-open:checked ~ .menu-item:nth-child(4){ transform:translate3d(-77.19px, -85.25px, 0) scale(1); }
.menu-open:checked ~ .menu-item:nth-child(5){ transform:translate3d(-0.09px, -115px, 0) scale(1); }
.menu-item:hover{ background:#fff; color:var(--btn-bg); }

/* Google Maps */
.google-maps {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
  border-radius: 12px;
}
.google-maps iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Carousel container */
.carousel-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 1000px;
  margin: auto;
}
.carousel-wrapper ul {
  display: flex;
  transition: transform 0.5s ease-in-out;
  padding: 0;
  margin: 0;
  list-style: none;
}

.carousel-wrapper li { min-width: 100%; }


.carousel-wrapper img { width: 100%; display: block; }

/* Hide radios */
.carousel-wrapper input[type=radio] { display: none; }

/* Arrows */
.carousel-wrapper .left-arrow,
.carousel-wrapper .right-arrow {
  position: absolute;       /* keep on sides */
  top: 50%;
  transform: translateY(-50%);
  background: none;         /* remove circular background */
  color: #B68B7B;           /* arrow color */
  font-size: 2rem;
  padding: 0;
  cursor: pointer;
  user-select: none;
  z-index: 2;
}
.carousel-wrapper .left-arrow { left: 10px; }
.carousel-wrapper .right-arrow { right: 10px; }

/* Navigation dots */
.nav-dots {
  position: absolute;
  bottom: 10px;  /* adjust if needed */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 2;
}

.nav-dot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: #B68B7B; /* same as arrows */
  opacity: 0.3;
  transition: opacity 0.3s;
  cursor: pointer;
}
/* Active dot: handled via JS */
.nav-dot.active {
  opacity: 1;
  background-color: #B68B7B;
}