:root {
      --bg: #faf9f6;
      --accent: #d2b48c;
      --text: #2e2e2e;
      --section: #ffffffee;
      --border: #ece6dd;
      --shadow: 0 2px 12px 0 #ecd7be2c;
      --radius: 1.3em;
      --transition: 0.18s cubic-bezier(.4,0,.2,1);
      --flag-size: 26px;
    }

    html, body {
      margin: 0; padding: 0;
      background: var(--bg);
      color: var(--text);
      font-family: 'Segoe UI', 'Arial', sans-serif;
      min-height: 100%;
      font-size: 17px;
      scroll-behavior: smooth;
    }
    body {
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }

    .spa-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1.2em 1.1em 0.5em 1.1em;
      background: var(--section);
      border-bottom: 1px solid var(--border);
      position: sticky;
      top: 0;
      z-index: 10;
    }
.spa-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 2.05em;
  font-weight: 700;
  letter-spacing: 0.045em;
  color: #272727;
  position: relative;
  margin-bottom: 0.35em;
  line-height: 1.22;
  /* Subtle text shadow for depth */
  text-shadow: 0 1.5px 8px #edd7bd29;
}

.spa-title span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.24em;
  font-size: 2em;
  font-family: 'Segoe UI', 'Arial', sans-serif;
  letter-spacing: 0.03em;
  font-weight: 600;
  color: #3a2d1a;
  padding-bottom: 0.19em;
  position: relative;
}

/* Soft gold underline */
.spa-title span::after {
  content: "";
  display: block;
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: -0.18em;
  height: 0.23em;
  border-radius: 0.13em;
  background: linear-gradient(90deg, #f9efd9 10%, #e6cb9c 60%, #cbb177 90%);
  opacity: 0.7;
  z-index: 0;
  box-shadow: 0 2px 9px #ecd7be25;
}

    main {
      flex: 1;
      padding: 1.4em 0.7em 1.2em 0.7em;
      max-width: 520px;
      margin: 0 auto;
    }

    

.spa-intro {
  font-size: 1.25rem;
  font-weight: 550;
  line-height: 1.67;
  color: #b99b68;
  max-width: 440px;
  margin: 1.07em auto 0.7em auto;
  padding: 0.6em 1.2em;
  border-radius: 1.1em;
  background: rgba(255,250,238,0.88);
  box-shadow: 0 1.2px 9px #ecd7be18;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 8px #e5d5b548;
}

.spa-logo-emoji {
  margin-right: 0.3em;
  font-size: 1em;
}


    .menu-section {
      background: var(--section);
      border-radius: var(--radius);
      margin-bottom: 1.1em;
      box-shadow: var(--shadow);
      padding: 1.2em 1em 0.7em 1em;
      border: 1px solid var(--border);
      transition: box-shadow var(--transition), border var(--transition);
    }
    .menu-section:hover, .menu-section:focus-within {
      box-shadow: 0 6px 18px 0 #ecd7be48;
      border: 1.5px solid var(--accent);
    }
    .menu-section-title {
      font-size: 1.08em;
      letter-spacing: 0.06em;
      font-weight: 600;
      color: var(--accent);
      margin-bottom: 0.5em;
      text-transform: uppercase;
    }
    .menu-items {
      display: flex;
      flex-direction: column;
      gap: 0.45em;
    }
    .menu-item {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: baseline;
      font-size: 1em;
      border-bottom: 1px dashed #f0eadc;
      padding: 0.38em 0 0.17em 0;
      transition: background var(--transition);
    }
    .menu-item:last-child {
      border-bottom: none;
    }
    .item-title {
      font-weight: 500;
      flex: 1 1 170px;
    }
    .item-info {
      color: #b0956b;
      font-size: 0.98em;
      min-width: 75px;
      text-align: right;
    }

    /* Scattered Images */
.scattered-img {
  width: 100%;
  max-width: 380px;
  height: 150px;              /* <-- Increase this as needed */
  margin: 1.5em auto 2.1em auto;
  display: block;
  border-radius: 1.1em;
  box-shadow: var(--shadow);
  border: 1.5px solid var(--border);
  object-fit: cover;
  transition: transform var(--transition), box-shadow var(--transition);
}

    .scattered-img:active, .scattered-img:focus {
      transform: scale(1.025);
      box-shadow: 0 3px 14px #d2b48c47;
      border: 1.5px solid var(--accent);
      outline: none;
    }

    /* Footer */
    .spa-footer {
      text-align: center;
      padding: 0.7em 0;
      font-size: 0.95em;
      color: #aeaeae;
      letter-spacing: 0.02em;
      margin-top: auto;
      background: transparent;
    }

    /* Responsive Design */
    @media (max-width: 440px) {
      .spa-title { font-size: 1.12em; }
      .menu-section { padding: 1.05em 0.7em 0.5em 0.7em;}
      .menu-section-title { font-size: 1em;}
      .scattered-img { max-width: 95vw; height: 198px; }
    }
    @media (min-width: 700px) {
      main { max-width: 690px; }
      .scattered-img { max-width: 490px; height: 190px; }
      html { font-size: 18.7px;}
    }
.spa-menu-header {
  text-align: center;
  padding-top: 1.2em;
  padding-bottom: 0.4em;
  background: none;
}


.flag-container {
  display: flex;
  justify-content: center;
  gap: 17px;
  margin: 0.8em auto 0.92em auto;
  padding: 0.25em 0.5em;
  background: rgba(255,245,225,0.55);
  border-radius: 1.9em;
  box-shadow: 0 2px 14px #e2c69a18;
  width: fit-content;
  transition: box-shadow 0.15s;
}

.flag-icon img {
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid #f5e7c7;
  box-shadow: 0 2px 6px #ecd7be33;
  cursor: pointer;
  transition: transform 0.19s, box-shadow 0.19s;
  background: #fff9f2;
}

.flag-icon img:hover,
.flag-icon img:focus {
  transform: translateY(-4px) scale(1.08);
  box-shadow: 0 6px 18px #d2b48c44;
  outline: 2px solid #e5c69480;
}



.contact-section {
  background-color: #fff8f3;
  padding: 40px 20px;
  margin-top: 60px;
  border-radius: 16px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  text-align: center;
}

.contact-section h2 {
  font-size: 1.8rem;
  margin-bottom: 10px;
  color: #3b2f2f;
  font-weight: 600;
}

.contact-subtitle {
  font-size: 1rem;
  color: #7a6a58;
  margin-bottom: 25px;
}

.contact-details {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.contact-item {
  font-size: 1rem;
  color: #5a4a3d;
}

.contact-item .label {
  font-weight: 600;
  margin-right: 6px;
  color: #a88a68;
}

.contact-item a {
  color: #6b4e2f;
  text-decoration: none;
  border-bottom: 1px dotted #d3bfa8;
  transition: all 0.2s ease;
}

.contact-item a:hover {
  color: #b38b59;
  border-bottom: 1px solid #b38b59;
}
.spa-promo {
  text-align: center;
  margin-bottom: 1.25em;
}
.spa-promo-link {
  display: inline-block;
  background: #fff8ed;
  color: var(--accent);
  font-weight: 700;
  font-size: 1.09em;
  border-radius: 1.9em;
  padding: 0.44em 1.25em 0.44em 1.25em;
  text-decoration: none;
  box-shadow: 0 3px 12px 0 #ecd7be13, 0 0 0 2px #eedfca14;
  border: 1.3px solid #ecd7be6c;
  transition: box-shadow 0.17s, background 0.17s, color 0.17s, transform 0.12s;
  letter-spacing: 0.01em;
  margin: 0.7em 0 0.2em 0;
  outline: none;
  animation: promo-pulse 1.2s infinite cubic-bezier(.65,0,.4,1);

}

.spa-promo-link:focus,
.spa-promo-link:hover {
  background: linear-gradient(90deg, #ffe9c7 0%, #f3e0b5 100%);
  color: #b29055;
  box-shadow: 0 6px 19px #ecd7be40, 0 0 0 3px #e4d2b950;
  transform: translateY(-2px) scale(1.04);
  text-decoration: none;
}
.spa-promo-percent {
  font-size: 1.1em;
  color: #ad8b39;
  font-weight: 900;
  letter-spacing: 0.04em;
  animation: promo-shimmer 2.8s infinite cubic-bezier(.7,0,.3,1);

}

.spa-comments-section {
  max-width: 600px;
  margin: 2.7em auto 0 auto;
  padding: 1.3em 1.1em 1.8em 1.1em;
  background: #f8f5ef;
  border-radius: 1.2em;
  box-shadow: 0 3px 18px #ecd7be33;
}
.spa-comments-section h2 {
  text-align: center;
  color: var(--accent);
  margin-bottom: 1.1em;
  font-size: 1.13em;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.comments-list {
  display: flex;
  flex-direction: column;
  gap: 1.2em;
}
.comment-card {
  display: flex;
  align-items: flex-start;
  background: #fff;
  border-radius: 1em;
  box-shadow: 0 2px 9px #ecd7be1f;
  padding: 0.9em 1em 0.9em 0.9em;
  gap: 1.1em;
  border: 1.2px solid #ece6dd;
  transition: box-shadow 0.2s;
}
.comment-card:hover, .comment-card:focus-within {
  box-shadow: 0 6px 18px 0 #ecd7be48;
  border: 1.5px solid var(--accent);
}
.comment-avatar {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
  background: #f0e8db;
  border: 1.5px solid #ecd7be6c;
  flex-shrink: 0;
  margin-top: 0.12em;
}
.comment-content {
  flex: 1;
}
.comment-name {
  font-weight: 600;
  color: var(--accent);
  font-size: 1.04em;
  margin-bottom: 0.15em;
}
.comment-text {
  color: #5a4a3d;
  font-size: 1em;
  line-height: 1.5;
  margin-bottom: 0.19em;
}
.comment-date {
  color: #b7a074;
  font-size: 0.96em;
  font-style: italic;
}

/* Responsive for mobile */
@media (max-width: 500px) {
  .spa-comments-section { padding: 1.1em 0.3em 1.4em 0.3em; }
  .comment-card {
    flex-direction: column;
    align-items: center;
    padding: 0.8em 0.7em;
    text-align: center;
    gap: 0.5em;
  }
  .comment-avatar { margin: 0 0 0.25em 0; }
  .comment-content { width: 100%; }
}


@media (max-width: 480px) {
  .spa-title span { font-size: 1.17em; }
  .flag-container { gap: 11px; }
  .spa-intro { font-size: 1.07rem; padding: 0.4em 0.4em;}
  .spa-promo-link { font-size: 1em; padding: 0.39em 1em;}
}

/* Fade-in effect for sections/images */
.spa-fade {
  opacity: 0;
  transform: translateY(22px) scale(0.97);
  transition: opacity 0.75s cubic-bezier(.41,0,.18,1), 
              transform 0.82s cubic-bezier(.42,0,.2,1);
  will-change: opacity, transform;
}

.spa-fade.spa-fade-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Menu item hover/tap feedback */
.menu-item {
  cursor: pointer;
  background: transparent;
  transition: background 0.17s cubic-bezier(.5,0,.2,1);
}
.menu-item:hover, .menu-item:focus {
  background: linear-gradient(90deg, #fff8ed99 20%, #f6eed7cc 90%);
  box-shadow: 0 2px 8px #ecd7be25;
  outline: none;
}


@keyframes promo-pulse {
  0%, 100% {
    box-shadow: 0 3px 12px #ecd7be13, 0 0 0 2px #eedfca14;
    background: #fff8ed;
  }
  50% {
    box-shadow: 0 8px 26px #f0dab730, 0 0 0 4px #ecd7be20;
    background: #fff2d4;
  }
}
@keyframes promo-shimmer {
  0%, 100% { color: var(--accent); }
  50% { color: #bfa164; }
}