html { scroll-behavior: smooth; }
body {
  font-family: 'IBM Plex Sans Thai','Inter',ui-sans-serif,system-ui;
  color: #4D4D4D;
}

/* Brand gradients */
.grad-brand   { background-image: linear-gradient(135deg,#00AEEF 0%,#004B87 45%,#76C143 100%); }
.grad-cool    { background-image: linear-gradient(135deg,#00AEEF 0%,#004B87 100%); }
.grad-earth   { background-image: linear-gradient(135deg,#004B87 0%,#00AEEF 100%); }
.grad-growth  { background-image: linear-gradient(135deg,#76C143 0%,#004B87 100%); }
.grad-warm    { background-image: linear-gradient(135deg,#76C143 0%,#00AEEF 100%); }
.grad-text    { background-image: linear-gradient(90deg,#00AEEF,#76C143); -webkit-background-clip: text; background-clip: text; color: transparent; }
.grad-text-blue { background-image: linear-gradient(90deg,#00AEEF 0%,#0369A1 45%,#004B87 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.grad-border  { background: linear-gradient(135deg,#00AEEF,#76C143); }

/* Decorative mesh background */
.mesh { position: relative; }
.mesh::before {
  content: ""; position: absolute; inset: -20%; z-index: 0;
  background:
    radial-gradient(40% 30% at 15% 20%, rgba(0,174,239,.35), transparent 60%),
    radial-gradient(35% 30% at 85% 10%, rgba(118,193,67,.28), transparent 60%),
    radial-gradient(45% 35% at 70% 80%, rgba(0,75,135,.45), transparent 60%);
  filter: blur(30px);
}

/* Map/grid decoration */
.map-grid {
  background-image:
    linear-gradient(rgba(0,174,239,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,174,239,.12) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* Cards */
.card-hover { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -20px rgba(0,75,135,.35); }

/* Language toggle */
[data-en] { display: none; }
html[data-lang="en"] [data-th] { display: none; }
html[data-lang="en"] [data-en] { display: inline; }
html[data-lang="en"] [data-en-block] { display: block; }

/* PRO badge */
.badge-pro {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: 10px; font-weight: 800; letter-spacing: .08em;
  padding: 2px 7px; border-radius: 9999px;
  background: linear-gradient(135deg,#00AEEF,#76C143); color: #fff;
  text-transform: uppercase;
}
.badge-lock {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: 9999px;
  background: #F1F5F9; color: #475569;
}

/* Modal */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(15,23,42,.55);
  backdrop-filter: blur(4px); z-index: 100;
  display: none; align-items: center; justify-content: center;
  padding: 1rem;
}
.modal-backdrop.open { display: flex; }

/* Sidebar workflow step */
.wf-step {
  display: flex; align-items: center; gap: .75rem;
  padding: .625rem .75rem; border-radius: .75rem;
  font-size: .875rem; color: #4D4D4D; cursor: pointer;
  transition: background .15s ease;
}
.wf-step:hover { background: #F1F5F9; }
.wf-step.active {
  background: linear-gradient(135deg,rgba(0,174,239,.12),rgba(0,75,135,.1));
  color: #004B87; font-weight: 600;
}
.wf-step .wf-num {
  width: 1.5rem; height: 1.5rem; border-radius: 9999px;
  background: #E2E8F0; color: #64748B;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.wf-step.active .wf-num { background: #00AEEF; color: #fff; }
.wf-step.done .wf-num { background: #76C143; color: #fff; }

/* Research card */
.res-anchor { scroll-margin-top: 5rem; }

/* iframe loading skeleton */
.iframe-wrap {
  position: relative; border-radius: 1rem; overflow: hidden;
  background: #F8FAFC; border: 1px solid #E2E8F0;
}
.iframe-wrap iframe { display: block; width: 100%; border: 0; }

/* /analysis — bubble row auto-hides when a DAPH dialog is open.
 * The dialog lives inside the iframe and, without this, the parent's
 * logo/flags/login bubbles would float over the top of the new modal.
 * We fade the bubble row so the dialog reads as if it sits above them. */
.daph-bubble-row {
  transition:
    opacity 180ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 220ms cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0s linear 0s;
}
.daph-bubble-row.daph-dialog-open {
  opacity: 0;
  transform: translateY(-8px);
  visibility: hidden;
  transition:
    opacity 180ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 220ms cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0s linear 200ms;
}

/* ── Flag-based language toggle ─────────────────────────────────────── */
.lang-flag {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .3rem .55rem;
  border-radius: 9999px;
  background: #fff;
  border: 1px solid #E2E8F0;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
  line-height: 1;
}
.lang-flag + .lang-flag { margin-left: .25rem; }
.lang-flag:hover { border-color: #00AEEF; }
.lang-flag .flag {
  width: 20px; height: 14px;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0,0,0,.04);
  display: inline-block;
  flex-shrink: 0;
}
.lang-flag .flag svg { display: block; width: 100%; height: 100%; }
.lang-flag .code {
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  color: #4D4D4D;
}

/* Active state driven by [data-active="th|en"] on the group */
[data-lang-toggle][data-active="th"] .lang-flag[data-lang-set="th"],
[data-lang-toggle][data-active="en"] .lang-flag[data-lang-set="en"] {
  background: linear-gradient(135deg, rgba(0,174,239,.12), rgba(118,193,67,.12));
  border-color: #00AEEF;
  box-shadow: 0 0 0 2px rgba(0,174,239,.15);
}
[data-lang-toggle][data-active="th"] .lang-flag[data-lang-set="th"] .code,
[data-lang-toggle][data-active="en"] .lang-flag[data-lang-set="en"] .code {
  color: #004B87;
}
/* Dim the inactive flag slightly */
[data-lang-toggle][data-active="th"] .lang-flag[data-lang-set="en"] .flag,
[data-lang-toggle][data-active="en"] .lang-flag[data-lang-set="th"] .flag {
  opacity: .55;
  filter: saturate(.8);
}

/* Wrapper for the two-button group */
[data-lang-toggle] {
  display: inline-flex;
  align-items: center;
  padding: 2px;
  background: #F8FAFC;
  border-radius: 9999px;
  border: 1px solid #E2E8F0;
}
[data-lang-toggle] .lang-flag {
  border: 0;
  background: transparent;
  box-shadow: none;
}
[data-lang-toggle][data-active="th"] .lang-flag[data-lang-set="th"],
[data-lang-toggle][data-active="en"] .lang-flag[data-lang-set="en"] {
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,75,135,.15);
}