/* =================================================================
   JongDee — LINE-integrated reservation system.
   Built ON TOP of the shared kinetic system (webdesign.css / body.wd-dark):
   inherits the dark tokens, header/footer theming, wd-* sections and reveals.
   Only the JongDee-specific pieces live here, all jd- prefixed.
   Accent = the site brand; JongDee green appears only inside the demo mocks.
   ================================================================= */
.jd {
  /* Page chrome uses the SITE BRAND, so JongDee still reads as a System Sense
     service. JongDee green is reserved for the product mocks (phone, chat,
     staff alert, ledger) — that is the only place the product's own colour
     appears, which is also what makes those mocks read as screenshots. */
  --jd: var(--brand);
  --jd-rgb: var(--brand-rgb);
  --jd-demo: #2ea05a;              /* JongDee green — demo mocks ONLY */
  --jd-demo-rgb: 46, 160, 90;
  --jd-demo-deep: #1c7a42;
}
/* JongDee runs a narrower shell than the rest of the kinetic pages (1280/1160):
   at full width the hero left far too much slack around the phone shot. This one
   value drives the header, the hero and every section on the page.
   It is declared on BODY, not on .jd — the header sits outside <main>, so a token
   scoped to .jd would not resolve there and max-width would silently drop out. */
body.jd-page { --jd-shell: 1120px; }
/* the header is outside <main>, so it is scoped by the body class. This has to
   land after webdesign.css's body.wd-dark rule — it does, because ss-jongdee is
   enqueued with ss-kinetic as a dependency. */
body.jd-page .header-inner { max-width: var(--jd-shell); }
/* sections: overrides .wd-wrap's 1160px so the whole page shares one edge */
.jd .wd-wrap { max-width: var(--jd-shell); }
/* buttons deliberately use the plain wd-btn--solid brand style, no override */

/* =================================================================
   HERO — copy left, LINE booking card right
   ================================================================= */
.jd-hero { padding: 130px 40px 90px; min-height: auto; overflow: hidden; }
.jd-hero-inner {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--jd-shell); margin: 0 auto;
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(36px, 5vw, 80px); align-items: center;
}
.jd-hero-copy { text-align: left; }

/* pre-launch badge */
/* launch line — lives in the pricing card (the hero stays uncluttered) */
.jd-price-launch {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 16px;
  padding: 8px 16px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--jd); background: rgba(var(--jd-rgb), .12);
  border: 1px solid rgba(var(--jd-rgb), .42);
}
.jd-badge-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--jd);
  box-shadow: 0 0 0 0 rgba(var(--jd-rgb), .7); animation: jd-pulse 2.2s ease-out infinite;
}
@keyframes jd-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(var(--jd-rgb), .7); }
  70%  { box-shadow: 0 0 0 10px rgba(var(--jd-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--jd-rgb), 0); }
}

/* NOT a flex container: the word-reveal replaces this element's children with
   its own word spans, and flex would then stack every word on its own line. */
.jd-hero-title { margin: 0; display: block; }
.jd-wordmark {
  display: block; margin-bottom: 10px;
  font-size: clamp(2.8rem, 5.2vw, 4.4rem); font-weight: 800; letter-spacing: -.03em;
  line-height: 1; color: var(--fg);
}
/* the brand-coloured full stop, same lockup as the Aroi hero */
.jd-wordmark em { color: var(--jd); font-style: normal; }
/* the supporting line stays clearly smaller than the wordmark, and takes its
   width from the hero column rather than a ch cap (which broke every word onto
   its own line at large sizes) */
.jd-hero-tag {
  display: block;
  font-size: clamp(1.35rem, 2.1vw, 1.95rem); font-weight: 700; line-height: 1.3;
  letter-spacing: -.02em; color: #fff;
}
.jd-hero-sub {
  margin: 24px 0 0; max-width: 52ch; color: var(--muted);
  font-size: clamp(1rem, 1.3vw, 1.12rem); line-height: 1.75;
}
.jd-hero-cta { justify-content: flex-start; margin-top: 34px; }
.jd-hero-note {
  margin: 20px 0 0; max-width: 46ch; font-size: .92rem; line-height: 1.7;
  color: var(--muted); padding-left: 14px; border-left: 2px solid rgba(var(--jd-rgb), .5);
}

/* ---- hero product shot ---- */
.jd-hero-media { display: flex; justify-content: center; }
.jd-hero-img {
  display: block; width: 100%; max-width: 380px; height: auto;
  /* the source is a phone render on a transparent ground — a soft drop-shadow
     seats it on the dark hero without a visible box */
  filter: drop-shadow(0 40px 60px rgba(0, 0, 0, .55));
  animation: jd-float 7s ease-in-out infinite;
}
@keyframes jd-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

/* =================================================================
   FOR GUESTS
   ================================================================= */
/* The heading lives INSIDE the left column, so the screenshot runs alongside the
   whole block (label → heading → lead → list). Keeping the heading full-width
   above left a tall empty gap beside it and made the section much longer. */
.jd-guest-layout {
  display: grid; grid-template-columns: 1fr minmax(0, 400px);
  gap: clamp(32px, 5vw, 64px); align-items: center;
}
.jd-guest-copy .wd-h2 { max-width: 14ch; }
.jd-guest-copy .wd-lead { margin-bottom: clamp(28px, 4vw, 44px); }
.jd-guest-shot { display: flex; justify-content: center; }
.jd-guest-shot img {
  display: block; width: 100%; max-width: 400px; height: auto;
  /* lighter than the dark sections — a heavy shadow reads as dirt on white */
  filter: drop-shadow(0 20px 34px rgba(0, 0, 0, .13));
}
.jd-guest-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr; gap: 14px;
}
.jd-guest {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 20px 22px; border-radius: 16px;
  background: var(--card); border: 1px solid var(--line);
  color: var(--fg); font-size: 1.02rem; line-height: 1.6;
  transition: transform .4s var(--ease), border-color .4s, background-color .4s;
}
.jd-guest:hover { transform: translateY(-4px); border-color: rgba(var(--jd-rgb), .45); }
.jd-guest-check {
  position: relative; flex-shrink: 0; width: 24px; height: 24px; margin-top: 2px;
  border-radius: 50%; background: rgba(var(--jd-rgb), .14);
  border: 1px solid rgba(var(--jd-rgb), .45);
}
.jd-guest-check::after {
  content: ""; position: absolute; left: 8px; top: 5px; width: 5px; height: 9px;
  border: solid var(--jd); border-width: 0 2px 2px 0; transform: rotate(45deg);
}

.jd-lang-note {
  margin: 28px 0 0; display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  color: var(--muted); font-size: .95rem; line-height: 1.7;
}
.jd-lang-pills { display: inline-flex; gap: 6px; }
.jd-lang-pills i {
  font-style: normal; font-size: 11px; font-weight: 700;
  padding: 5px 10px; border-radius: 999px;
  color: var(--jd); background: rgba(var(--jd-rgb), .1);
  border: 1px solid rgba(var(--jd-rgb), .3);
}

/* =================================================================
   BOOKING SCREEN
   ================================================================= */
.jd-book-grid {
  margin-top: clamp(40px, 5vw, 68px);
  display: grid; grid-template-columns: minmax(0, 410px) 1fr;
  gap: clamp(32px, 5vw, 68px); align-items: center;
}
.jd-book-shot { display: flex; justify-content: center; }
.jd-book-shot img {
  display: block; width: 100%; max-width: 410px; height: auto;
  filter: drop-shadow(0 40px 60px rgba(0, 0, 0, .6));
}
.jd-book-points { display: flex; flex-direction: column; gap: 22px; }
.jd-point {
  position: relative; padding: 24px 26px 24px 30px; border-radius: 18px;
  background: var(--card); border: 1px solid var(--line);
  transition: transform .45s var(--ease), border-color .4s;
}
.jd-point:hover { transform: translateY(-4px); border-color: rgba(var(--jd-rgb), .45); }
.jd-point-n {
  display: block; font-size: .9rem; font-weight: 800; color: var(--jd);
  letter-spacing: .1em; margin-bottom: 10px;
}
.jd-point h3 { margin: 0 0 8px; font-size: 1.18rem; font-weight: 700; color: var(--fg); }
.jd-point p { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.7; }

/* =================================================================
   INSTANT LINE CONFIRMATION
   ================================================================= */
.jd-msg-grid {
  display: grid; grid-template-columns: 1fr minmax(0, 380px);
  gap: clamp(36px, 5vw, 72px); align-items: center;
}
.jd-stat {
  display: flex; align-items: baseline; gap: 16px; margin-top: 34px;
  padding: 22px 24px; border-radius: 18px;
  background: rgba(var(--jd-rgb), .08); border: 1px solid rgba(var(--jd-rgb), .3);
}
.jd-stat--solo { margin-top: 20px; }
.jd-stat-n {
  font-size: clamp(2.4rem, 4vw, 3.4rem); font-weight: 800; line-height: 1;
  color: var(--jd); letter-spacing: -.02em;
}
.jd-stat-l { color: var(--fg); font-size: 1rem; line-height: 1.55; font-weight: 600; }
.jd-stat-note { margin: 14px 0 0; color: var(--muted); font-size: .9rem; line-height: 1.7; }

.jd-chat {
  background: #8ba7c7; border-radius: 20px; padding: 16px;
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8);
}
.jd-chat-bubble { background: #fff; border-radius: 14px; padding: 14px; color: #1b1d22; }
.jd-chat-h { margin: 0 0 12px; font-size: .95rem; font-weight: 800; }
.jd-chat-rows { margin: 0; display: flex; flex-direction: column; gap: 7px; }
.jd-chat-rows > div { display: flex; gap: 12px; font-size: .8rem; }
.jd-chat-rows dt { margin: 0; color: #8b929e; flex: 0 0 92px; }
.jd-chat-rows dd { margin: 0; font-weight: 600; }
.jd-chat-cta {
  display: block; margin-top: 14px; text-align: center; padding: 10px;
  border-radius: 8px; background: var(--jd-demo); color: #fff;
  font-size: .82rem; font-weight: 700;
}
.jd-chat-time { display: block; margin-top: 6px; font-size: .68rem; color: rgba(255, 255, 255, .8); }

/* =================================================================
   STAFF NOTIFICATIONS
   ================================================================= */
/* This heading is the longest on the page; the shared 18ch cap broke it onto
   three lines and stranded "automatically." on its own. 22ch gives two. */
.jd-staff .wd-h2 { max-width: 22ch; }

.jd-staff-grid {
  margin-top: clamp(40px, 5vw, 68px);
  display: grid; grid-template-columns: 1fr minmax(0, 360px);
  gap: clamp(32px, 5vw, 68px); align-items: start;
}
.jd-staff-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.jd-staff-list li {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 20px 22px; border-radius: 16px;
  background: var(--card); border: 1px solid var(--line);
  color: var(--fg); font-size: 1.02rem; line-height: 1.6;
}
.jd-staff-side { display: flex; flex-direction: column; }
.jd-alert {
  background: #8ba7c7; border-radius: 18px; padding: 14px;
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8);
}
.jd-alert-h, .jd-alert-sub { margin: 0; }
.jd-alert {
  color: #1b1d22;
}
.jd-alert > * { background: transparent; }
.jd-alert-h {
  background: #fff; border-radius: 12px 12px 0 0; padding: 12px 14px 4px;
  font-size: .8rem; font-weight: 800; color: #4b5261;
}
.jd-alert-sub { background: #fff; padding: 0 14px 10px; font-size: .88rem; font-weight: 700; }
.jd-alert .jd-chat-rows { background: #fff; padding: 0 14px 12px; }
.jd-alert .jd-chat-cta { margin: 0 14px 14px; }
.jd-alert .jd-chat-rows dt { flex: 0 0 84px; }

/* =================================================================
   STORE-SIDE MANAGEMENT — admin ledger mock
   ================================================================= */
.jd-ledger {
  margin-top: clamp(40px, 5vw, 64px);
  border-radius: 18px; overflow: hidden; background: #fff;
  border: 1px solid rgba(27, 29, 34, .1);
  box-shadow: 0 40px 90px -50px rgba(0, 0, 0, .55);
  color: #1b1d22;
}
.jd-ledger-top {
  display: flex; align-items: center; gap: 16px; padding: 12px 16px;
  border-bottom: 1px solid rgba(27, 29, 34, .08); background: #fbfcfd;
}
.jd-ledger-logo {
  width: 28px; height: 28px; border-radius: 50%; flex: 0 0 28px;
  background: var(--jd-demo); color: #fff; font-size: .7rem; font-weight: 800;
  display: grid; place-items: center;
}
.jd-ledger-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.jd-ledger-tabs::-webkit-scrollbar { display: none; }
.jd-ledger-tabs span {
  flex: 0 0 auto; padding: 6px 12px; border-radius: 8px;
  font-size: .82rem; font-weight: 600; color: #6b7280; white-space: nowrap;
}
.jd-ledger-tabs span.is-on { background: rgba(var(--jd-demo-rgb), .12); color: var(--jd-demo-deep); font-weight: 700; }
.jd-ledger-user { margin-left: auto; font-size: .78rem; color: #8b929e; white-space: nowrap; }

.jd-ledger-body { padding: 4px 0 8px; }
.jd-ledger-head, .jd-ledger-row {
  display: grid; grid-template-columns: 74px 68px 68px 1fr 104px;
  gap: 12px; align-items: center; padding: 11px 16px;
}
.jd-ledger-head { font-size: .72rem; font-weight: 700; color: #8b929e; text-transform: uppercase; letter-spacing: .06em; }
.jd-ledger-row { font-size: .88rem; border-top: 1px solid rgba(27, 29, 34, .07); }
.jd-pill {
  justify-self: start; padding: 4px 11px; border-radius: 999px;
  font-size: .72rem; font-weight: 700;
  background: rgba(var(--jd-demo-rgb), .12); color: var(--jd-demo-deep);
}
.jd-pill--walk { background: rgba(27, 29, 34, .08); color: #4b5261; }

.jd-manage-cards { margin-top: clamp(28px, 4vw, 44px); grid-template-columns: repeat(3, 1fr); }

/* =================================================================
   PRICING
   ================================================================= */
.jd-price-grid {
  margin-top: clamp(40px, 5vw, 68px);
  display: grid; grid-template-columns: minmax(0, 380px) 1fr;
  gap: clamp(28px, 4vw, 56px); align-items: start;
}
.jd-price-main {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 34px 32px; border-radius: 22px;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(var(--jd-rgb), .18), transparent 60%),
    var(--card);
  border: 1px solid rgba(var(--jd-rgb), .35);
}
.jd-price-amount {
  font-size: clamp(2.8rem, 5vw, 4rem); font-weight: 800; line-height: 1;
  color: var(--jd); letter-spacing: -.03em;
}
.jd-price-unit { color: var(--fg); font-weight: 700; font-size: 1.05rem; }
.jd-price-note { color: var(--muted); font-size: .88rem; line-height: 1.6; margin-top: 6px; }
.jd-price-main .wd-btn { margin-top: 22px; }

.jd-price-feats { display: flex; flex-direction: column; gap: 16px; }
.jd-price-feat {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 22px 24px; border-radius: 16px;
  background: var(--card); border: 1px solid var(--line);
}
.jd-price-feat h3 { margin: 0 0 6px; font-size: 1.1rem; font-weight: 700; color: var(--fg); }
.jd-price-feat p { margin: 0; color: var(--muted); font-size: .98rem; line-height: 1.65; }

/* =================================================================
   Responsive
   ================================================================= */
@media (max-width: 1040px) {
  .jd-hero-inner { grid-template-columns: 1fr; gap: 54px; }
  .jd-hero-copy { text-align: center; }
  .jd-hero-title { align-items: center; }
  .jd-hero-sub { margin-left: auto; margin-right: auto; }
  .jd-hero-cta { justify-content: center; }
  .jd-hero-note { margin-inline: auto; text-align: left; }
  .jd-hero-tag { max-width: none; margin-inline: auto; }
  .jd-book-grid, .jd-msg-grid, .jd-staff-grid, .jd-price-grid { grid-template-columns: 1fr; }
  .jd-chat, .jd-alert { max-width: 420px; margin-inline: auto; }
  /* stacked: copy first so the heading still introduces the section — the
     screenshot must NOT jump above it now that the heading lives in this column */
  .jd-guest-layout { grid-template-columns: 1fr; }
  .jd-guest-copy .wd-h2 { max-width: 18ch; }
  .jd-manage-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  /* keep the hero's 40px side padding at every width — it matches #site-header
     (style.css), so the hero never drifts wider or narrower than the nav above it */
  .jd-guest-grid { grid-template-columns: 1fr; }
  .jd-manage-cards { grid-template-columns: 1fr; }
  /* the ledger is wider than a phone — let it scroll rather than squash */
  .jd-ledger-body { overflow-x: auto; }
  .jd-ledger-head, .jd-ledger-row { min-width: 520px; }
}
@media (max-width: 480px) {
  .jd-stat { flex-direction: column; align-items: flex-start; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .jd-badge-dot, .jd-hero-img { animation: none; }
  .jd-guest:hover, .jd-point:hover { transform: none; }
}