/* NIS — Shared meetmap.space layout (index + login) */

:root {
  --font-ui: 'Nunito', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Nunito', 'Outfit', sans-serif;
  --font-thai: 'Sarabun', sans-serif;
  --brand: #4d8b6f;
  --brand-dark: #3a6f57;
  --brand-grad: linear-gradient(135deg, #4d8b6f 0%, #3a6f57 100%);
  --cta-grad: linear-gradient(135deg, #4d8b6f 0%, #3d7a62 50%, #2f6650 100%);
  --text: #2c3e2d;
  --text-muted: #6b7c6e;
  --text-faint: #9aab9f;
  --text-hint: #b8c4ba;
  --surface: rgba(250, 247, 242, 0.92);
  --border: rgba(228, 221, 208, 0.85);
  --divider: rgba(228, 221, 208, 0.7);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --transition: 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.dark-theme {
  --text: #eef1ea;
  --text-muted: #a7b1a3;
  --text-faint: #7a877c;
  --text-hint: #5f6b62;
  --surface: #222820;
  --border: rgba(255, 255, 255, 0.1);
  --divider: rgba(255, 255, 255, 0.12);
}

/* Gradient + soft ambient glow */
body.meetmap-page.nis-meetmap-bg {
  background:
    radial-gradient(circle at 14% 12%, rgba(77, 139, 111, 0.18) 0%, rgba(77, 139, 111, 0) 34%),
    radial-gradient(circle at 88% 10%, rgba(122, 181, 208, 0.14) 0%, rgba(122, 181, 208, 0) 32%),
    linear-gradient(160deg, #f5efe3 0%, #eaf4ec 55%, #eef3f8 100%);
}

body.meetmap-page.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% 10%, rgba(77, 139, 111, 0.1) 0%, rgba(77, 139, 111, 0) 32%),
    linear-gradient(160deg, #0d110f 0%, #121714 55%, #0b0d0c 100%);
}

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

body.meetmap-page.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% 10%, rgba(97, 135, 100, 0.12) 0%, rgba(97, 135, 100, 0) 32%),
    linear-gradient(160deg, #1f272b 0%, #273338 55%, #141b1e 100%);
}

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

body.meetmap-page.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% 10%, rgba(107, 142, 35, 0.1) 0%, rgba(107, 142, 35, 0) 32%),
    linear-gradient(160deg, #151311 0%, #1c1a17 55%, #11100e 100%);
}

body.meetmap-page.nis-meetmap-bg::before {
  background:
    radial-gradient(ellipse at 18% 82%, rgba(201, 151, 63, 0.11) 0%, transparent 46%),
    radial-gradient(ellipse at 78% 74%, rgba(77, 139, 111, 0.1) 0%, transparent 44%);
  opacity: 1;
}

body.meetmap-page.nis-meetmap-bg::after {
  content: '';
  position: fixed;
  z-index: 0;
  pointer-events: none;
  width: min(520px, 90vw);
  height: min(520px, 90vw);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 9999px;
  background: radial-gradient(ellipse at center, rgba(77, 139, 111, 0.16) 0%, rgba(122, 181, 208, 0.08) 58%, transparent 76%);
}
body.meetmap-page.nis-meetmap-bg.dark-theme::after {
  background: radial-gradient(ellipse at center, rgba(72, 211, 144, 0.12) 0%, rgba(77, 139, 111, 0.05) 58%, transparent 76%);
}

body.meetmap-page.nis-meetmap-bg.theme-forest-dark::after {
  background: radial-gradient(ellipse at center, rgba(97, 135, 100, 0.1) 0%, rgba(156, 176, 128, 0.05) 58%, transparent 76%);
}

body.meetmap-page.nis-meetmap-bg.theme-cozy-paper::after {
  background: radial-gradient(ellipse at center, rgba(107, 142, 35, 0.12) 0%, rgba(243, 237, 224, 0.06) 58%, transparent 76%);
}

body.meetmap-page.nis-meetmap-bg.dark-theme.theme-cozy-paper::after {
  background: radial-gradient(ellipse at center, rgba(158, 191, 92, 0.12) 0%, rgba(28, 26, 23, 0.05) 58%, transparent 76%);
}

/* Page shell */
.meetmap-page-shell {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Two-column main */
.meetmap-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 72px 20px 24px;
}

.meetmap-hero-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 28px;
  width: 100%;
  max-width: 22rem;
}

.meetmap-brand-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.meetmap-brand {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 10vw, 3.5rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
}

.meetmap-brand-a {
  color: var(--text-primary, var(--text));
}

.meetmap-brand-b {
  color: var(--accent, var(--brand));
}

.meetmap-tagline {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}

.meetmap-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

.meetmap-pill,
span.meetmap-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(250, 247, 242, 0.95);
  box-shadow: 0 2px 8px rgba(44, 62, 45, 0.08);
  font-family: var(--font-thai);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--transition), box-shadow var(--transition);
}

.dark-theme .meetmap-pill {
  background: rgba(34, 40, 32, 0.85);
}

a.meetmap-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(44, 62, 45, 0.12);
  color: var(--text);
}

.meetmap-cta {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 18rem;
  padding: 16px 32px;
  border: none;
  border-radius: 999px;
  background: var(--accent-gradient);
  color: #fff;
  font-family: var(--font-thai);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  box-shadow:
    0 8px 28px rgba(var(--accent-rgb), 0.35),
    0 2px 6px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: transform var(--transition), box-shadow var(--transition);
}

.meetmap-cta i,
.meetmap-cta svg {
  width: 16px;
  height: 16px;
  opacity: 0.85;
  justify-self: start;
}

.meetmap-cta > span:not(.meetmap-cta-arrow) {
  justify-self: center;
}

.meetmap-cta-arrow {
  opacity: 0.65;
  justify-self: end;
  transition: opacity var(--transition), transform var(--transition);
}

.meetmap-cta:hover {
  transform: translateY(-2px);
  box-shadow:
    0 12px 36px rgba(var(--accent-rgb), 0.45),
    0 4px 10px rgba(0, 0, 0, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.meetmap-cta:hover .meetmap-cta-arrow {
  opacity: 0.95;
  transform: translateX(2px);
}

.meetmap-cta:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
}

.meetmap-hint {
  font-family: var(--font-thai);
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--text-hint);
  line-height: 1.5;
  max-width: 18rem;
}

.meetmap-divider {
  display: none;
}

.meetmap-side-col {
  width: 100%;
  max-width: 22rem;
  padding-bottom: 16px;
}

.meetmap-how-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.meetmap-how-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--divider), transparent);
}

.meetmap-how-line--reverse {
  background: linear-gradient(to left, var(--divider), transparent);
}

.meetmap-how-heading h2 {
  font-family: var(--font-thai);
  font-size: 0.6875rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
}

.meetmap-page-shell .nis-meetmap-footer {
  padding: 16px 20px 24px;
}

@media (min-width: 640px) {
  .meetmap-page-shell--desktop-fit {
    height: 100vh;
    overflow: hidden;
  }

  .meetmap-main {
    flex: 1;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 32px 32px 16px;
    overflow: hidden;
  }

  .meetmap-hero-col {
    flex-shrink: 0;
    padding-top: 0;
  }

  .meetmap-divider {
    display: block;
    flex-shrink: 0;
    width: 1px;
    align-self: stretch;
    margin: 0 2rem 0 3.5rem;
    background: linear-gradient(transparent, var(--divider) 20%, var(--divider) 80%, transparent);
  }

  .meetmap-side-col {
    flex-shrink: 0;
    padding-bottom: 0;
  }

  .meetmap-page-shell--desktop-fit .nis-meetmap-footer {
    flex-shrink: 0;
    padding: 10px 20px 16px;
  }
}

@media (max-width: 639px) {
  .meetmap-main {
    gap: 40px;
  }

  .meetmap-side-col {
    padding-top: 8px;
  }
}

@media (max-width: 380px) {
  .meetmap-pills {
    gap: 6px;
  }

  .meetmap-pill {
    font-size: 0.7rem;
    padding: 5px 8px;
  }
}