/* NIS — Shared soft background & pill components */

body.nis-meetmap-bg {
  position: relative;
  background:
    radial-gradient(circle at 12% 12%, rgba(77, 139, 111, 0.16) 0%, rgba(77, 139, 111, 0) 34%),
    radial-gradient(circle at 88% 8%, rgba(122, 181, 208, 0.14) 0%, rgba(122, 181, 208, 0) 32%),
    linear-gradient(160deg, #faf7f2 0%, #eef6ef 52%, #f6f2ea 100%);
  background-attachment: fixed;
}

body.nis-meetmap-bg.dark-theme {
  background:
    radial-gradient(circle at 14% 12%, rgba(72, 211, 144, 0.12) 0%, rgba(72, 211, 144, 0) 34%),
    radial-gradient(circle at 88% 8%, rgba(77, 139, 111, 0.1) 0%, rgba(77, 139, 111, 0) 32%),
    linear-gradient(160deg, #0d110f 0%, #121714 54%, #0b0d0c 100%);
  background-attachment: fixed;
}

body.nis-meetmap-bg::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 20% 80%, rgba(201, 151, 63, 0.11) 0%, transparent 46%),
    radial-gradient(ellipse at 80% 72%, rgba(77, 139, 111, 0.1) 0%, transparent 44%);
  opacity: 1;
}

body.nis-meetmap-bg.dark-theme::before {
  background:
    radial-gradient(ellipse at 20% 80%, rgba(72, 211, 144, 0.08) 0%, transparent 46%),
    radial-gradient(ellipse at 80% 72%, rgba(127, 196, 160, 0.06) 0%, transparent 44%);
}

body.nis-meetmap-bg.theme-forest-dark {
  background:
    radial-gradient(circle at 12% 12%, rgba(97, 135, 100, 0.12) 0%, rgba(97, 135, 100, 0) 34%),
    radial-gradient(circle at 88% 8%, rgba(156, 176, 128, 0.1) 0%, rgba(156, 176, 128, 0) 32%),
    linear-gradient(160deg, #f2f5ef 0%, #e2e9da 52%, #f7faf5 100%);
}

body.nis-meetmap-bg.dark-theme.theme-forest-dark {
  background:
    radial-gradient(circle at 14% 12%, rgba(156, 176, 128, 0.12) 0%, rgba(156, 176, 128, 0) 34%),
    radial-gradient(circle at 88% 8%, rgba(97, 135, 100, 0.12) 0%, rgba(97, 135, 100, 0) 32%),
    linear-gradient(160deg, #1f272b 0%, #273338 54%, #141b1e 100%);
}

body.nis-meetmap-bg.theme-cozy-paper {
  background:
    radial-gradient(circle at 12% 12%, rgba(107, 142, 35, 0.12) 0%, rgba(107, 142, 35, 0) 34%),
    radial-gradient(circle at 88% 8%, rgba(243, 237, 224, 0.12) 0%, rgba(243, 237, 224, 0) 32%),
    linear-gradient(160deg, #fbf7ed 0%, #f3ede0 52%, #faf5ea 100%);
}

body.nis-meetmap-bg.dark-theme.theme-cozy-paper {
  background:
    radial-gradient(circle at 14% 12%, rgba(158, 191, 92, 0.12) 0%, rgba(158, 191, 92, 0) 34%),
    radial-gradient(circle at 88% 8%, rgba(107, 142, 35, 0.1) 0%, rgba(107, 142, 35, 0) 32%),
    linear-gradient(160deg, #151311 0%, #1c1a17 54%, #11100e 100%);
}

/* "Cozy ปกติ" shares the warm cream/olive palette of Cozy Paper — give it the
   same warm ambient background instead of falling back to the default
   cool green/blue glow, which clashed with its cards and looked muddy. */
body.nis-meetmap-bg.theme-cozy-paper-normal {
  background:
    radial-gradient(circle at 12% 12%, rgba(107, 142, 35, 0.12) 0%, rgba(107, 142, 35, 0) 34%),
    radial-gradient(circle at 88% 8%, rgba(243, 237, 224, 0.12) 0%, rgba(243, 237, 224, 0) 32%),
    linear-gradient(160deg, #fbf7ed 0%, #f3ede0 52%, #faf5ea 100%);
}

body.nis-meetmap-bg.dark-theme.theme-cozy-paper-normal {
  background:
    radial-gradient(circle at 14% 12%, rgba(158, 191, 92, 0.12) 0%, rgba(158, 191, 92, 0) 34%),
    radial-gradient(circle at 88% 8%, rgba(107, 142, 35, 0.1) 0%, rgba(107, 142, 35, 0) 32%),
    linear-gradient(160deg, #151311 0%, #1c1a17 54%, #11100e 100%);
}

/* Meetmap-style feature pills — 4-column grid, 2×2 on mobile */
.nis-meetmap-pills {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  justify-content: center;
  align-items: stretch;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  max-width: 680px;
}

.nis-meetmap-pills > li {
  min-width: 0;
  margin: 0;
  padding: 0;
}

.nis-meetmap-pill,
a.nis-meetmap-pill,
.nis-meetmap-pills > li > .nis-meetmap-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
  padding: 10px 10px;
  border-radius: 999px;
  border: 1px solid rgba(44, 62, 45, 0.1);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 2px 8px rgba(44, 62, 45, 0.06);
  font-family: var(--font-thai, 'Sarabun', sans-serif);
  font-size: clamp(0.72rem, 2.1vw, 0.86rem);
  font-weight: 600;
  color: #2c3e2d;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

@media (max-width: 640px) {
  .nis-meetmap-pills {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 360px;
    gap: 8px;
  }

  .nis-meetmap-pill,
  a.nis-meetmap-pill,
  .nis-meetmap-pills > li > .nis-meetmap-pill {
    font-size: 0.78rem;
    padding: 9px 8px;
  }
}

.nis-meetmap-pill:hover {
  transform: translateY(-2px);
  border-color: rgba(77, 139, 111, 0.35);
  box-shadow: 0 8px 20px rgba(44, 62, 45, 0.1);
}

.nis-meetmap-pill-emoji {
  font-size: 1.05rem;
  line-height: 1;
}

body.nis-meetmap-bg.dark-theme .nis-meetmap-pill {
  background: rgba(34, 40, 32, 0.75);
  border-color: rgba(255, 255, 255, 0.1);
  color: #eef1ea;
}

/* Shared meetmap footer */
.nis-meetmap-footer {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding: 24px 16px 32px;
  text-align: center;
  font-family: var(--font-thai, 'Sarabun', sans-serif);
}

.nis-meetmap-footer-brand {
  margin: 0 0 6px;
  font-size: 0.82rem;
  color: #6b7c6e;
}

.nis-meetmap-footer-brand strong {
  color: #2c3e2d;
  font-weight: 700;
}

.nis-meetmap-footer-credit {
  margin: 0;
  font-size: 0.76rem;
  color: #9aa89c;
}

body.nis-meetmap-bg.dark-theme .nis-meetmap-footer-brand {
  color: #a7b1a3;
}

body.nis-meetmap-bg.dark-theme .nis-meetmap-footer-brand strong {
  color: #eef1ea;
}

body.nis-meetmap-bg.dark-theme .nis-meetmap-footer-credit {
  color: #6b7468;
}