/* ── Good Mood Lipe Tour — page styles ─────────────────────────────────
   Layout rules lifted from the Claude Design mockup
   (project/Good Mood Lipe Tour.dc.html). Component-level styling lives in
   css/components/components.css; dark-mode overrides in css/theme.css.
   Colours here go through tokens only, so the theme can swap them. */

:root {
  --surface-header: rgba(255, 255, 255, .9);
  --surface-contact: var(--sea-900);
  --surface-footer: #08223A;
  --surface-menu: var(--paper);
  --hero-scrim: linear-gradient(to top, rgba(11, 42, 69, .86) 0%, rgba(11, 42, 69, .6) 22%, rgba(11, 42, 69, .28) 44%, rgba(11, 42, 69, .08) 70%, rgba(11, 42, 69, 0) 100%);
  --hero-fallback: linear-gradient(160deg, var(--sea-400), var(--sea-800));
  --logo-h: clamp(30px, 3.4vw, 40px);
  --logo-h-footer: clamp(42px, 4.6vw, 54px);
}

/* Chinese needs a CJK face; Mitr/Anuphan carry no Han glyphs.
   Noto Sans SC is fetched on demand by app.js when 中文 is chosen. */
[lang="zh"] {
  --font-display: "Mitr", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-body: "Anuphan", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
}

html { scroll-behavior: smooth }
body { margin: 0; background: var(--surface-page); color: var(--text-body) }

.page {
  font-family: var(--font-body);
  color: var(--text-body);
  background: var(--surface-page);
  min-height: 100vh;
  overflow-x: hidden;
}

a { color: var(--text-link); text-decoration: none }
a:hover { color: var(--text-link-hover); text-decoration: underline }
/* Buttons and cards that happen to be links stay underline-free */
a.gm-btn:hover, a.gm-iconbtn:hover, .site-logo:hover, .mobile-nav__cta:hover { text-decoration: none }
a.gm-btn--primary:hover { color: var(--text-on-brand) }
a.gm-btn--sand:hover { color: var(--text-on-sand) }

.icon-sprite { display: none }
.icon { display: inline-flex; flex: none; vertical-align: middle }
[hidden] { display: none !important }

/* ── Shared section furniture ─────────────────────────────────────── */
.container { max-width: var(--measure-max); margin: 0 auto; padding-inline: clamp(20px, 4vw, 40px) }
.container--narrow { max-width: 860px }
.section { padding-top: clamp(44px, 7vw, 80px) }

.eyebrow {
  font-size: var(--eyebrow-size); font-weight: var(--eyebrow-weight);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--sand-600);
}
.eyebrow--sand { color: var(--sand-300) }

.section-title {
  font-family: var(--font-display); font-weight: var(--weight-medium);
  font-size: clamp(26px, 4.4vw, 34px); color: var(--text-heading); margin: 8px 0 6px;
}
.section-title--spaced { margin-bottom: 24px }
.section-lead { margin: 0; font-size: var(--text-base); line-height: var(--text-base-lh); color: var(--text-muted); max-width: 36em }
.section-lead--spaced { margin-bottom: 28px }

.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: 16px; margin-bottom: 28px;
}
.section-head--tight { margin-bottom: 24px }

/* ── Header ───────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: clamp(10px, 2vw, 20px); flex-wrap: nowrap;
  padding: 10px clamp(14px, 4vw, 40px);
  background: var(--surface-header); backdrop-filter: blur(14px);
  border-bottom: var(--border-w) solid var(--border-soft);
}

/* Logo — scales with the viewport, never distorts, no layout shift */
.site-logo { display: flex; align-items: center; flex: none; line-height: 0 }
.site-logo__img {
  height: var(--logo-h); width: auto; display: block;
  aspect-ratio: 415 / 216; object-fit: contain;
}
.logo-on-dark { display: none }
.site-footer__logo {
  height: var(--logo-h-footer); width: auto; display: block;
  aspect-ratio: 415 / 216; object-fit: contain; margin: 0 0 14px -6px;
}

.site-nav {
  display: flex; flex-wrap: nowrap; gap: clamp(14px, 2vw, 24px);
  font-size: 15px; margin-inline-start: auto; align-items: center;
  overflow-x: auto; white-space: nowrap; scrollbar-width: none;
  -webkit-overflow-scrolling: touch; min-width: 0; flex: 1 1 auto; padding-block: 8px;
}
.site-nav::-webkit-scrollbar { display: none }
/* เมนูตอนเอาเมาส์ชี้ — ตัวอักษรยกขึ้นเบา ๆ พร้อมจุดเล็กโผล่ใต้คำ
   จุดวางไว้ในพื้นที่ padding ของแถบเมนู เพราะแถบนี้เลื่อนแนวนอนได้
   ถ้าวางเลยขอบออกไปจะโดนตัดหาย */
.site-nav a {
  color: var(--text-body); position: relative;
  transition: color .18s var(--ease-out, ease),
              transform .22s cubic-bezier(.22, 1, .36, 1);
}
.site-nav a::after {
  content: ""; position: absolute; left: 50%; bottom: -4px;
  width: 4px; height: 4px; margin-left: -2px; border-radius: 50%;
  background: var(--brand-strong); opacity: 0; transform: scale(.4);
  transition: opacity .2s var(--ease-out, ease), transform .2s var(--ease-out, ease);
}
.site-nav a:hover, .site-nav a:focus-visible { color: var(--text-link); text-decoration: none; transform: translateY(-2px) }
.site-nav a:hover::after, .site-nav a:focus-visible::after { opacity: 1; transform: scale(1) }
.site-nav a.is-current { color: var(--text-link); font-weight: var(--weight-semibold) }

@media (prefers-reduced-motion: reduce) {
  .site-nav a, .site-nav a::after { transition: none }
  .site-nav a:hover, .site-nav a:focus-visible { transform: none }
}

.site-header__actions { flex: none; margin-inline-start: auto; display: flex; align-items: center; gap: 8px }

/* Compact pill controls: theme toggle + language menu */
.chip-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 40px; min-width: 40px; padding: 0 10px;
  border: var(--border-w) solid var(--border-soft); border-radius: var(--radius-pill);
  background: var(--paper); color: var(--text-heading);
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-semibold);
  cursor: pointer; transition: var(--transition-control);
}
.chip-btn:hover { background: var(--brand-tint); border-color: var(--border-strong); color: var(--brand-strong) }
.chip-btn:active { transform: var(--press-scale) }
.chip-btn--wide { padding: 0 12px }

.theme-icon-dark { display: none }
[data-theme="dark"] .theme-icon-light { display: none }
[data-theme="dark"] .theme-icon-dark { display: inline-flex }

.lang { position: relative }
.lang__menu {
  position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 50;
  display: flex; flex-direction: column; min-width: 148px; padding: 6px;
  background: var(--surface-menu); border: var(--border-w) solid var(--border-soft);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lift);
}
.lang__menu button {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border: 0; border-radius: var(--radius-sm); background: none;
  color: var(--text-body); font-family: var(--font-body); font-size: 15px;
  text-align: start; cursor: pointer; transition: var(--transition-control);
}
.lang__menu button:hover { background: var(--brand-tint); color: var(--brand-strong) }
.lang__menu button[aria-checked="true"] { color: var(--brand-strong); font-weight: var(--weight-semibold) }
.lang__menu button[aria-checked="true"]::after { content: "✓"; font-size: 13px }

.burger {
  display: none; place-items: center; width: 40px; height: 40px; padding: 0;
  border: var(--border-w) solid var(--sand-300); border-radius: var(--radius-pill);
  background: var(--paper); color: var(--text-heading); cursor: pointer;
  transition: var(--transition-control);
}
.burger:hover { background: var(--surface-sunk) }

.mobile-nav {
  position: absolute; top: 100%; left: 0; right: 0;
  display: flex; flex-direction: column; background: var(--surface-menu);
  border-bottom: var(--border-w) solid var(--border-soft);
  box-shadow: 0 14px 30px rgba(11, 42, 69, .14); padding: 6px 0 14px;
}
.mobile-nav a { padding: 13px clamp(14px, 4vw, 40px); color: var(--text-body); font-size: 16px }
.mobile-nav a:hover { text-decoration: none }

/* จุดเล็กท้ายข้อความ — ขึ้นตอนแตะและตอนที่เป็นหน้าปัจจุบัน
   เหมือนลูกเล่นของเมนูบนจอคอม · จองที่ไว้ตลอดเวลา เมนูจะได้ไม่ขยับตอนจุดโผล่ */
.mobile-nav a:not(.mobile-nav__cta) {
  display: flex; align-items: center; gap: 9px;
  transition: color var(--dur-fast, .15s) var(--ease-out, ease);
}
.mobile-nav a:not(.mobile-nav__cta)::after {
  content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%;
  background: var(--brand-strong); opacity: 0; transform: scale(.4);
  transition: opacity .2s var(--ease-out, ease), transform .2s var(--ease-out, ease);
}
.mobile-nav a:not(.mobile-nav__cta):active,
.mobile-nav a:not(.mobile-nav__cta):focus-visible { color: var(--text-link) }
.mobile-nav a:not(.mobile-nav__cta):active::after,
.mobile-nav a:not(.mobile-nav__cta):focus-visible::after,
.mobile-nav a.is-current::after { opacity: 1; transform: scale(1) }

.mobile-nav a.is-current { color: var(--text-link); font-weight: var(--weight-semibold) }

@media (prefers-reduced-motion: reduce) {
  .mobile-nav a:not(.mobile-nav__cta),
  .mobile-nav a:not(.mobile-nav__cta)::after { transition: none }
}
.mobile-nav__cta { margin: 8px clamp(14px, 4vw, 40px) 0; color: var(--text-on-brand) }
.mobile-nav__cta:hover { color: var(--text-on-brand); text-decoration: none }

@media (max-width: 820px) {
  .site-nav { display: none }
  .burger { display: grid }
}
@media (max-width: 560px) {
  .header-cta { display: none }
}

/* ── Hero ─────────────────────────────────────────────────────────── */
.hero {
  position: relative; min-height: clamp(560px, 100svh, 900px);
  display: flex; align-items: flex-end; overflow: hidden; scroll-margin-top: 64px;
  background: var(--hero-fallback);
}
.hero__media { position: absolute; inset: 0 }
.hero__media picture { position: absolute; inset: 0; display: block }
.hero__media img { width: 100%; height: 100%; object-fit: cover; display: block }

.hero__scrim { position: absolute; inset: 0; pointer-events: none; background: var(--hero-scrim) }
.hero__inner {
  position: relative; width: 100%; max-width: var(--measure-max); margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px) clamp(36px, 6vw, 64px);
}
.hero__title {
  font-family: var(--font-display); font-weight: var(--weight-medium);
  font-size: clamp(32px, 6.4vw, 56px); line-height: 1.14; color: #fff;
  margin: 14px 0 14px; max-width: 16em; text-wrap: pretty;
  text-shadow: 0 2px 14px rgba(4, 15, 26, .5);
}
/* แผ่นสีทับบางลงเพื่อให้เห็นสีทะเล เงาใต้ตัวอักษรช่วยให้ยังอ่านชัด */
.hero__inner .eyebrow, .hero__text { text-shadow: 0 1px 10px rgba(4, 15, 26, .55) }
.hero__text {
  font-size: clamp(16px, 2.4vw, 19px); line-height: 1.7;
  color: rgba(255, 255, 255, .9); max-width: 30em; margin: 0 0 28px;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 15px }
.hero__badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px }

/* ── Stat strip ───────────────────────────────────────────────────── */
.stats {
  max-width: var(--measure-max); margin: 0 auto;
  padding: clamp(28px, 5vw, 44px) clamp(20px, 4vw, 40px) 0;
  display: grid; gap: 12px;
  /* 4 ใบ — จอเล็กเรียงลงมาทีละใบ จอกลาง 2×2 จอใหญ่เรียงเดียว 4 ใบ
     ไม่ใช้ auto-fit เพราะจะได้ 3+1 ใบโดด ๆ ในบางความกว้าง */
  grid-template-columns: 1fr;
}
@media (min-width: 560px) { .stats { grid-template-columns: repeat(2, 1fr) } }
@media (min-width: 1040px) { .stats { grid-template-columns: repeat(4, 1fr) } }
/* การ์ดในแถวเดียวกันสูงเท่ากัน ถึงจะมีบรรทัดรายละเอียดไม่เท่ากัน */
.stats .gm-stat { align-items: flex-start }
.stats .gm-stat__icon { margin-top: 1px }

/* ── Packages ─────────────────────────────────────────────────────── */
#packages { scroll-margin-top: 90px }
/* แพ็กเกจแนะนำ — 2 การ์ดต่อแถว (จอเล็กเรียงลงมาทีละใบ) */
.package-grid { display: grid; grid-template-columns: 1fr; gap: clamp(16px, 2.5vw, 24px) }
@media (min-width: 560px) { .package-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
.gm-tour { cursor: pointer }
.gm-tour__media .gm-photo { height: 100% }

/* ── Photo placeholders ───────────────────────────────────────────── */
.gm-photo--43 { aspect-ratio: 4 / 3 }
.gm-photo--169 { aspect-ratio: 16 / 9 }

/* Real photography replaces the placeholder gradient inside the same frame */
.gm-photo__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block }
.gm-photo.has-photo { background: var(--sea-900) }
.gm-photo.has-photo::after { display: none }

/* ── Trip customizer ──────────────────────────────────────────────── */
.planner {
  background: var(--surface-sunk); margin-top: clamp(44px, 7vw, 80px);
  padding: clamp(36px, 6vw, 72px) 0; scroll-margin-top: 74px;
}
.planner__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(20px, 3vw, 32px); align-items: start;
}
.planner__col { display: flex; flex-direction: column; gap: 16px; min-width: 0 }
.planner .gm-tab { height: var(--control-h) }

.step-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px }
.step-num {
  display: grid; place-items: center; width: 26px; height: 26px;
  border-radius: var(--radius-pill); background: var(--brand); color: var(--text-on-brand);
  font-family: var(--font-mono); font-size: 13px;
}
.step-title { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: 19px; color: var(--text-heading); margin: 0 }

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px }
.step-note { margin: 14px 0 0; font-size: var(--text-sm); line-height: 1.7; color: var(--text-muted) }

.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; align-items: start }
.field-row--divided {
  margin-top: 16px; padding-top: 16px;
  border-top: var(--border-w) solid var(--border-soft);
}
.field-row--divided + .field-note { margin-top: 10px }

.field-label { display: block; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-heading); margin-bottom: 8px }
.stepper { display: flex; align-items: center; gap: 12px }
.stepper__value {
  font-family: var(--font-body); font-weight: var(--weight-semibold); font-size: 20px;
  color: var(--text-heading); min-width: 3.2em; text-align: center;
}
.field-note { margin: 8px 0 0; font-size: var(--text-xs); color: var(--text-muted) }

/* ── ช่องเลือกช่วงวันเดินทาง + ปฏิทิน 2 เดือน ─────────────────────── */
.gm-card.is-cal-open { position: relative; z-index: 40; overflow: visible }
.daterange { position: relative; display: block }
.daterange__control { position: relative; display: flex; align-items: center; margin-top: 8px }
.daterange__trigger {
  flex: 1; display: flex; align-items: center; gap: 10px;
  padding: 12px 44px 12px 14px; min-height: 46px;
  font: inherit; text-align: start; color: var(--text-heading);
  background: var(--surface-card); border: var(--border-w) solid var(--border-soft);
  border-radius: var(--radius-sm); cursor: pointer; transition: var(--transition-control);
}
.daterange__trigger:hover { border-color: var(--border-strong) }
.daterange__trigger[aria-expanded="true"] { border-color: var(--border-focus); box-shadow: var(--ring-focus) }
.daterange__trigger .icon { color: var(--text-muted); flex: none }
.daterange__trigger.is-empty { color: var(--text-muted) }
.daterange__clear {
  position: absolute; inset-inline-end: 8px; display: grid; place-items: center;
  width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--radius-pill);
  background: transparent; color: var(--text-muted); cursor: pointer;
}
.daterange__clear:hover { background: var(--surface-sunk); color: var(--text-heading) }

.daterange__pop {
  position: absolute; z-index: 30; inset-inline-start: 0; top: calc(100% + 8px);
  width: min(620px, calc(100vw - 40px));
  padding: 16px; background: var(--surface-card);
  border: var(--border-w) solid var(--border-soft); border-radius: var(--radius-card);
  box-shadow: var(--shadow-lift);
}
.daterange__inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px }

.cal { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 8px }
.cal__nav {
  display: grid; place-items: center; width: 34px; height: 34px; margin-top: 2px;
  border: 0; border-radius: var(--radius-pill); background: transparent;
  color: var(--text-heading); cursor: pointer;
}
.cal__nav:hover { background: var(--surface-sunk) }
.cal__months { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px }
.cal__title { margin: 0 0 10px; text-align: center; font-weight: var(--weight-semibold); color: var(--text-heading) }
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px }
.cal__dow { display: grid; place-items: center; height: 28px; font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--text-muted) }
.cal__day {
  display: grid; place-items: center; height: 36px; padding: 0;
  font: inherit; font-size: var(--text-sm); color: var(--text-body);
  background: transparent; border: 0; border-radius: var(--radius-xs); cursor: pointer;
}
.cal__day:hover:not(:disabled) { background: var(--surface-sunk) }
.cal__day.is-off { color: var(--text-muted); opacity: .4; cursor: default }
.cal__day.is-off.is-start { opacity: 1; color: var(--text-on-brand); cursor: default }
.cal__day.is-in { background: var(--surface-brand-soft); border-radius: 0 }
.cal__day.is-start, .cal__day.is-end { background: var(--surface-brand); color: var(--text-on-brand, #fff); font-weight: var(--weight-semibold) }
.cal__day.is-start { border-start-end-radius: 0; border-end-end-radius: 0 }
.cal__day.is-end { border-start-start-radius: 0; border-end-start-radius: 0 }
.cal__hint { margin: 14px 0 0; font-size: var(--text-xs); color: var(--text-muted); text-align: center }

@media (max-width: 620px) {
  .daterange__pop { position: static; width: auto; box-shadow: none; padding: 14px 0 0; border: 0 }
  .daterange__inputs { grid-template-columns: 1fr }
  /* จอแคบแสดงทีละเดือน กดลูกศรเลื่อนดูเดือนถัดไปได้ */
  .cal__months > .cal__month + .cal__month { display: none }
}

.field-note--warn { color: var(--text-strong, var(--text)); font-weight: 500 }
.monsoon { margin-top: 16px }

.addon-list { display: flex; flex-direction: column; gap: 14px }
.addon { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px }
.addon--divided { padding-bottom: 14px; border-bottom: var(--border-w) solid var(--border-soft) }
.addon__name { display: block; font-weight: var(--weight-semibold); color: var(--text-heading) }
.addon__desc { display: block; font-size: 13px; color: var(--text-muted) }
.addon__price { font-family: var(--font-mono); font-size: 15px; color: var(--text-heading); white-space: nowrap }
.addon__unit { display: block; font-family: var(--font-body); font-size: var(--text-xs); color: var(--text-muted); text-align: right }

/* Two ways to plan: everything arranged, or extras on top of your own room */
.mode-switch {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px; margin-bottom: clamp(20px, 3vw, 28px);
}
.mode-card {
  display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px;
  border: var(--border-w-strong) solid var(--border-soft); border-radius: var(--radius-card);
  background: var(--surface-card); cursor: pointer; text-align: start;
  font-family: var(--font-body); transition: var(--transition-control);
}
.mode-card:hover { border-color: var(--border-strong) }
.mode-card.is-selected { border-color: var(--brand); box-shadow: var(--shadow-card) }
.mode-card__icon {
  display: grid; place-items: center; width: 40px; height: 40px; flex: none;
  border-radius: var(--radius-pill); background: var(--brand-tint); color: var(--brand-strong);
}
.mode-card.is-selected .mode-card__icon { background: var(--brand); color: var(--text-on-brand) }
.mode-card__text { display: flex; flex-direction: column; gap: 3px; min-width: 0 }
.mode-card__title { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: 17px; color: var(--text-heading) }
.mode-card__desc { font-size: 13.5px; line-height: 1.55; color: var(--text-muted) }

.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(136px, 1fr)); gap: 8px }
/* แบบย่อ: ปุ่มเตี้ย บรรทัดเดียว เรียงต่อกันได้ */
.choice-grid--compact { display: flex; flex-wrap: wrap; gap: 8px }
.choice-grid--compact .choice { padding: 9px 16px; border-radius: var(--radius-pill); flex: 0 1 auto }
.choice-grid--compact .choice__label { font-size: 14px }
.choice {
  display: flex; flex-direction: column; gap: 2px; padding: 10px 14px;
  border: var(--border-w) solid var(--border-hairline); border-radius: var(--radius-md);
  background: var(--surface-card); cursor: pointer; text-align: start;
  font-family: var(--font-body); transition: var(--transition-control);
}
.choice:hover { border-color: var(--border-strong); background: var(--brand-tint) }
.choice.is-selected { border-color: var(--brand); background: var(--brand-tint) }
/* ปุ่มและช่องกรอกไม่สืบทอดฟอนต์เอง ถ้าไม่กำหนด เบราว์เซอร์จะใช้ฟอนต์ระบบ (Arial/Thonburi)
   ทำให้ตัวอักษรบางจุดดูคนละฟอนต์กับที่อื่น */
button, input, select, textarea { font-family: inherit }
.gm-tag { font-family: var(--font-body) }
/* ชิปเลือกจำนวนวันในหน้ารายละเอียด — ฟอนต์เดียวกับปุ่มอื่น (Anuphan) */
#length-chips .gm-tag { font-family: var(--font-body); font-weight: var(--weight-semibold) }

/* ปุ่มเลือกจำนวนวัน — ฟอนต์เดียวกับปุ่มอื่นในเว็บ (Anuphan) */
.choice__label { font-size: 14.5px; font-weight: var(--weight-semibold); color: var(--text-heading) }
.choice.is-selected .choice__label { color: var(--brand-strong) }
.choice__sub { font-size: 12.5px; color: var(--text-muted) }

.include-list {
  list-style: none; margin: 14px 0 0; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 8px;
  background: var(--surface-sunk); border-radius: var(--radius-md);
  font-size: 13.5px; line-height: 1.5; color: var(--text-body);
}
.include-list li { display: flex; align-items: flex-start; gap: 10px }
.include-list .icon { color: var(--brand-strong); margin-top: 2px }

/* รายการ "รวมแล้ว" แบบบรรทัดเดียว คั่นด้วยจุด */
.inc-inline {
  list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  margin: 14px 0 0; padding: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-muted);
}
.inc-inline li + li::before { content: "·"; margin-inline-end: 10px; color: var(--text-faint) }
.inc-inline__head {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--palm-500); font-weight: var(--weight-semibold);
}
[data-theme="dark"] .inc-inline__head { color: #9BD374 }
.inc-inline__head + li::before { content: none }

/* รายละเอียดโปรแกรมแบบพับได้ */
.note-toggle { margin-top: 12px }
.note-toggle > summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-link);
}
.note-toggle > summary::-webkit-details-marker { display: none }
.note-toggle > summary::after { content: "＋"; font-family: var(--font-mono); font-size: 13px }
.note-toggle[open] > summary::after { content: "−" }
.note-toggle > summary:hover { color: var(--text-link-hover) }
.note-toggle .step-note { margin-top: 8px }

.field--spaced { margin-top: 18px }

/* Travellers: adults / children / infants */
.pax-group { display: flex; flex-direction: column; gap: 12px }
.pax-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap }
.pax-row__label { font-size: var(--text-sm); color: var(--text-body); display: flex; flex-direction: column; gap: 2px }
.pax-row__note { font-size: var(--text-xs); color: var(--text-muted) }
.pax-row .stepper { gap: 8px }
.pax-row .stepper__value { min-width: 2em; font-size: 18px }

/* Confirmation toast (LINE hand-off) */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60;
  max-width: min(420px, calc(100vw - 32px)); margin: 0;
  padding: 14px 18px; border-radius: var(--radius-md);
  background: var(--surface-deep); color: #fff; box-shadow: var(--shadow-lift);
  font-size: var(--text-sm); line-height: 1.5; text-align: center;
}

/* ── Live summary ─────────────────────────────────────────────────── */
.summary { position: sticky; top: 90px; min-width: 0; scroll-margin-top: 90px }
.summary__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px }
.summary__title { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: 20px; color: var(--text-heading); margin: 0 }
.summary__date { margin: 0 0 18px; font-size: 13px; color: var(--text-muted) }
.summary__lines { display: flex; flex-direction: column; gap: 12px; padding-bottom: 16px; border-bottom: var(--border-w) solid var(--border-soft) }
.summary__line { display: flex; align-items: baseline; justify-content: space-between; gap: 14px }
.summary__line-label { font-size: 14.5px; line-height: 1.6; color: var(--text-body) }
.summary__line-amount { font-family: var(--font-mono); font-size: 14.5px; color: var(--text-heading); white-space: nowrap }
.summary__total { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 16px 0 4px }
.summary__total-label { display: block; font-size: 13px; color: var(--text-muted) }
.summary__total-value { font-family: var(--font-display); font-size: clamp(28px, 4vw, 34px); color: var(--text-heading); line-height: 1.2 }
.summary__per { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-muted); text-align: right }
.summary__per span { display: block; font-family: var(--font-body); font-size: var(--text-xs) }
.summary__callout { margin: 16px 0 }
.summary__actions { display: flex; flex-direction: column; gap: 12px }

/* ปุ่มเต็มความกว้าง — ข้อความยาวให้ขึ้นบรรทัดใหม่ได้ ไม่อัดจนชิดขอบปุ่ม
   (components.css ตั้ง white-space: nowrap + ความสูงตายตัวไว้ ซึ่งทำให้ล้น) */
.gm-btn.is-block {
  white-space: normal;
  height: auto;
  min-height: var(--control-h);
  padding-block: 13px;
  line-height: 1.35;
  text-align: center;
  text-wrap: balance;
}
.gm-btn.is-block.gm-btn--lg {
  min-height: var(--control-h-lg);
  font-size: 16px;
  padding-inline: 22px;
}
.gm-btn.is-block > .icon { flex: none }
.summary__note { font-size: var(--text-xs); line-height: 1.6; color: var(--text-muted); margin: 0 0 4px }

/* ── Package detail page ──────────────────────────────────────────── */
.pkg__hero {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(20px, 4vw, 40px); align-items: center;
  max-width: var(--measure-max); margin: 0 auto;
  padding: clamp(24px, 4vw, 48px) clamp(20px, 4vw, 40px) 0;
}
.pkg__hero .gm-photo { aspect-ratio: 4 / 3; border-radius: var(--radius-photo) }
.pkg__intro { min-width: 0 }
.pkg__title {
  font-family: var(--font-display); font-weight: var(--weight-medium);
  font-size: clamp(24px, 3.6vw, 34px); line-height: 1.25; color: var(--text-heading); margin: 8px 0 10px;
}
.pkg__note { font-size: var(--text-base); line-height: var(--text-base-lh); color: var(--text-muted); margin: 0 0 14px }
.pkg__price { display: flex; align-items: baseline; gap: 10px; margin: 18px 0 20px }
.pkg__price-label { font-size: var(--text-sm); color: var(--text-muted) }
.pkg__price-value { font-family: var(--font-display); font-size: clamp(26px, 4vw, 34px); color: var(--text-heading) }
.pkg__actions { display: flex; flex-wrap: wrap; gap: 12px }
.pkg__section { padding-top: clamp(32px, 5vw, 56px) }
/* ส่วนสุดท้ายก่อนถึงฟุตเตอร์ — เว้นระยะให้หายใจ ไม่ให้รูปชนแถบสีเข้ม */
.pkg > .pkg__section:last-child { padding-bottom: clamp(48px, 7vw, 88px) }
.pkg__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(16px, 2.5vw, 24px); align-items: start }
.pkg__h2 { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: 19px; color: var(--text-heading); margin: 0 0 12px }
.pkg__h2--spaced { margin-top: 22px }
.include-list--plain { background: transparent; padding: 0 }
.pkg__addons { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px }
.pkg__addons li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  font-size: 14.5px; color: var(--text-body);
  padding-bottom: 10px; border-bottom: var(--border-w) solid var(--border-soft);
}
.pkg__addons li:last-child { border-bottom: 0; padding-bottom: 0 }
.pkg__addon-price { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-heading); white-space: nowrap }
.pkg__hint { font-size: var(--text-xs); line-height: 1.6; color: var(--text-muted); margin: 12px 0 0 }
.deals__head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap }
.deals__count { font-size: var(--text-sm); color: var(--text-muted) }
.picks { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 10px }
.picks li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--text-body) }
.picks .icon { color: var(--brand-strong); flex: none }

.plan-banner {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin: 16px 0 0; padding: 12px 16px; border-radius: var(--radius-md);
  background: var(--brand-tint); color: var(--text-body); font-size: var(--text-sm);
}
.plan-banner .icon { color: var(--brand-strong) }
.plan-banner a { margin-inline-start: auto; font-weight: var(--weight-semibold) }

/* แถบเลือกวันเข้าพัก + เรียงลำดับ — จัดเป็นกล่องเดียว ให้ช่องอยู่ระดับเดียวกัน */
.deals__filter {
  margin: 18px 0 20px; padding: 14px 16px;
  background: var(--surface-sunk); border: var(--border-w) solid var(--border-soft);
  border-radius: var(--radius-card);
}
.deals__filter-row { display: flex; align-items: flex-end; gap: 12px 16px; flex-wrap: wrap }
.deals__filter .gm-field { gap: 6px; margin: 0 }
.deals__date { flex: 1 1 240px; max-width: 300px }
.deals__sort { flex: 0 1 220px; max-width: 240px }
.deals__clear { flex: 0 0 auto; height: var(--control-h) }
.deals__filter-hint { margin: 12px 0 0; font-size: var(--text-xs); color: var(--text-muted); line-height: 1.55 }

@media (max-width: 560px) {
  .deals__date, .deals__sort { flex: 1 1 100%; max-width: none }
  .deals__clear { align-self: flex-start }
}
.deal__season { margin-inline-start: 4px }
.deal__from { font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-muted); margin-inline-end: 6px }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px }

.deals { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px }
.deal {
  display: grid; grid-template-columns: 120px 1fr; gap: 16px; align-items: center;
  background: var(--surface-card); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card); padding: 14px;
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.deal:hover { box-shadow: var(--shadow-lift); transform: var(--lift-hover) }
.deal__media { position: relative; aspect-ratio: 1 / 1; border-radius: var(--radius-md); overflow: hidden }
.deal__badge { position: absolute; top: 8px; inset-inline-start: 8px; z-index: 2 }
.deal__body { display: flex; flex-direction: column; gap: 4px; min-width: 0 }
.deal__meta { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--text-xs); color: var(--text-muted) }
.deal__title { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: 18px; color: var(--text-heading); margin: 0 }
.deal__room { margin: 0; font-size: var(--text-sm); color: var(--text-muted) }
.deal__price-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 6px }
.deal__price { font-family: var(--font-display); font-size: 22px; color: var(--text-heading); line-height: 1.2 }
.deal__price s { font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-faint); margin-inline-end: 8px }
.deal__price--ask { font-family: var(--font-body); font-size: var(--text-base); color: var(--text-muted) }
.deal__unit { display: block; font-family: var(--font-body); font-size: var(--text-xs); color: var(--text-muted) }
.deals__empty-btn { margin-inline-start: 8px }
.deals__empty {
  padding: 24px; border-radius: var(--radius-card); background: var(--surface-sunk);
  color: var(--text-muted); font-size: var(--text-sm); text-align: center;
}
@media (max-width: 520px) {
  .deal { grid-template-columns: 88px 1fr; gap: 12px }
  .deal__title { font-size: 16px }
  .deal__price { font-size: 20px }
}

.pkg__missing { padding: clamp(40px, 8vw, 80px) clamp(20px, 4vw, 40px); text-align: center; color: var(--text-muted) }

/* แพ็กเกจที่ยังไม่ได้ใส่รายละเอียด — เว้นพื้นที่ว่างไว้ให้เติมทีหลัง */
.pkg__note--family { color: var(--brand-strong); font-weight: var(--weight-medium) }
.pkg-empty { padding-block: clamp(32px, 6vw, 64px) clamp(56px, 9vw, 96px) }
.pkg-empty__title { margin: 8px 0 24px; font-size: var(--text-3xl, 2rem); line-height: 1.2 }
.pkg-empty__box {
  display: grid; place-content: center; gap: 6px; text-align: center;
  min-height: clamp(200px, 32vh, 320px); padding: clamp(24px, 5vw, 48px);
  border: var(--border-w-strong) dashed var(--border-soft); border-radius: var(--radius-card);
  background: var(--surface-sunk);
}
.pkg-empty__lead { margin: 0; font-weight: 600; color: var(--text-heading) }
.pkg-empty__note { margin: 0; color: var(--text-muted); font-size: var(--text-sm) }
.pkg-empty .pkg__actions { margin-top: 24px }

/* ── Gallery ──────────────────────────────────────────────────────── */
.admin__photo { position: relative }
.admin__photo-del { position: absolute; top: 10px; inset-inline-end: 10px; z-index: 2 }

.admin__picker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 8px }
.admin__picker .gm-field__hint { flex: 1 1 220px }
.admin__itin { margin-bottom: 20px }
.admin__textarea {
  height: auto; min-height: 220px; padding: 12px 14px; line-height: 1.7;
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 13.5px; resize: vertical;
}

.deal.is-soon { opacity: .82 }
.deal__soon { margin-inline-start: 4px; vertical-align: middle }

/* ── ทริปส่วนตัว (ดำน้ำเหมาลำ / ตกปลา) ──────────────────────────── */
.svc { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; margin-top: 22px }
.svc__card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface-card); border: var(--border-w) solid var(--border-soft);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.svc__card:hover { box-shadow: var(--shadow-lift); transform: var(--lift-hover) }
.svc__media { aspect-ratio: 16 / 9 }
.svc__body { display: flex; flex-direction: column; gap: 10px; padding: 20px }
.svc__title { margin: 0; font-size: var(--text-xl); color: var(--text-heading) }
.svc__text { margin: 0; color: var(--text-body); line-height: 1.7 }
.svc__points { margin: 4px 0 0 }
.svc__rates { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column }
.svc__rate {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-bottom: var(--border-w) dashed var(--border-soft);
}
.svc__rate:last-child { border-bottom: 0 }
.svc__rate-name { color: var(--text-body) }
.svc__rate-name small { display: block; font-size: var(--text-xs); line-height: 1.5; color: var(--text-muted); margin-top: 2px }
.svc__rate-price { font-family: var(--font-display); color: var(--text-heading); white-space: nowrap }
.svc__rate-price--ask { font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-muted) }

.svc__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-top: auto; padding-top: 14px; border-top: var(--border-w) solid var(--border-soft);
}
.svc__price { font-family: var(--font-display); font-size: var(--text-lg); color: var(--text-heading) }

/* ── หน้ารายละเอียดทริป (trip.html) ─────────────────────────────── */
.trip { padding-block: clamp(24px, 4vw, 40px) clamp(56px, 8vw, 96px) }
.trip__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 36px); align-items: start }
.trip__photo { aspect-ratio: 4 / 3; border-radius: var(--radius-photo) }
.trip__intro { display: flex; flex-direction: column; gap: 10px }
.trip__text { margin: 0; color: var(--text-body); line-height: 1.75 }
.trip__intro .gm-btn { align-self: flex-start; margin-top: 6px }
.trip__section { margin-top: clamp(32px, 5vw, 56px) }
.trip__rates { max-width: 760px }
.trip__rates .svc__rate { padding: 14px 0 }
.trip__rates .svc__rate-price { font-size: var(--text-lg) }

@media (max-width: 780px) { .trip__head { grid-template-columns: 1fr } }

.charter__people { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 6px }
.charter__label { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-heading) }
.charter__people .chips { margin-bottom: 0 }
.charter__people .gm-tag { min-width: 44px; justify-content: center }
.charter__extras {
  margin-top: 18px; padding: 14px 18px; max-width: 760px;
  background: var(--surface-sunk); border: var(--border-w) solid var(--border-soft); border-radius: var(--radius-card);
}
.charter__extras-title { margin: 0 0 4px; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-heading) }

/* ── หน้ารูปห้องพัก (room.html) ──────────────────────────────────── */
.room { padding-block: clamp(24px, 4vw, 40px) clamp(56px, 8vw, 96px) }
.room__back {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 18px;
  font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--brand-strong);
}
.room__head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
  gap: 24px; align-items: start; margin-bottom: 22px;
}
.room__intro .gm-badge { margin-bottom: 10px }
.room__title { margin: 0; font-size: clamp(1.6rem, 3.4vw, 2.4rem); line-height: 1.18; color: var(--text-heading) }
.room__type { margin: 6px 0 12px; font-size: var(--text-lg); color: var(--text-muted) }

.room__pricebox {
  display: flex; flex-direction: column; gap: 4px;
  padding: 18px; border-radius: var(--radius-card);
  background: var(--surface-sunk); border: var(--border-w) solid var(--border-soft);
}
.room__price-label { font-size: var(--text-xs); color: var(--text-muted) }
.room__price { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2rem); color: var(--text-heading); line-height: 1.2 }
.room__price-note { font-size: var(--text-xs); color: var(--text-muted); line-height: 1.55; margin-bottom: 10px }
.room__pricebox .gm-btn { width: 100% }

.room__gallery { margin-bottom: clamp(28px, 4vw, 44px) }
.room__stage {
  position: relative; margin: 0; border-radius: var(--radius-photo); overflow: hidden;
  background: var(--surface-deep); aspect-ratio: 3 / 2; box-shadow: var(--shadow-card);
}
.room__stage img { width: 100%; height: 100%; object-fit: cover; display: block }

/* ห้องที่ยังไม่มีรูป — ลายทางเฉียงจาง ๆ พร้อมคำบอก ไม่ใช่กล่องดำเปล่า */
.room__gallery--empty .room__stage {
  aspect-ratio: 5 / 2; background: var(--surface-sunk);
  background-image: repeating-linear-gradient(135deg,
    transparent 0 14px, color-mix(in oklch, var(--border-soft) 55%, transparent) 14px 16px);
  box-shadow: none; border: 1px dashed var(--border-soft);
  display: grid; place-items: center;
}
.room__gallery--empty .room__stage::after {
  content: attr(data-label); font-size: 13px; color: var(--text-muted);
  background: var(--surface-card); padding: 5px 12px; border-radius: 999px;
}
.room__gallery--empty .room__stage img { display: none }
.room__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 42px; height: 42px; padding: 0;
  border: 0; border-radius: var(--radius-pill); cursor: pointer;
  background: rgba(255,255,255,.9); color: var(--text-heading); box-shadow: var(--shadow-sm);
  transition: var(--transition-control);
}
.room__nav:hover { background: #fff; transform: translateY(-50%) scale(1.05) }
.room__nav--prev { inset-inline-start: 12px }
.room__nav--next { inset-inline-end: 12px }
.room__count {
  position: absolute; inset-block-end: 12px; inset-inline-end: 14px;
  padding: 4px 12px; border-radius: var(--radius-pill);
  background: rgba(11,42,69,.62); color: #fff; font-size: var(--text-xs);
}
.room__thumbs { display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin }
.room__thumb {
  flex: 0 0 96px; height: 72px; padding: 0; overflow: hidden; cursor: pointer;
  border: 2px solid transparent; border-radius: var(--radius-md); background: none;
  transition: var(--transition-control);
}
.room__thumb img { width: 100%; height: 100%; object-fit: cover; display: block }
.room__thumb:hover { border-color: var(--border-strong) }
.room__thumb.is-current { border-color: var(--surface-brand) }
.room__single { margin: 12px 0 0; font-size: var(--text-xs); color: var(--text-muted) }

.room__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px }
.room__lens { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px }
.room__len a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border-radius: var(--radius-sm);
  border: var(--border-w) solid var(--border-soft); color: var(--text-body);
  transition: var(--transition-control);
}
.room__len a:hover { border-color: var(--border-strong); background: var(--brand-tint) }
.room__len.is-current a { border-color: var(--surface-brand); background: var(--brand-tint); color: var(--brand-strong) }
.room__len-price { font-family: var(--font-display); color: var(--text-heading) }
.room__len.is-current .room__len-price { color: var(--brand-strong) }

@media (max-width: 780px) {
  .room__head { grid-template-columns: 1fr }
  .room__stage { aspect-ratio: 4 / 3 }
  .room__nav { width: 36px; height: 36px }
}

/* ── โปรแกรมการเดินทางรายวัน ─────────────────────────────────────── */
.itin__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px }
.itin__head .section-lead { margin: 6px 0 0; max-width: 60ch }
.itin { display: flex; flex-direction: column; gap: 14px }

.itin__day {
  background: var(--surface-card); border: var(--border-w) solid var(--border-soft);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card); overflow: hidden;
}
.itin__summary {
  display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none;
  padding: 16px 18px; font-family: var(--font-display); color: var(--text-heading);
}
.itin__summary::-webkit-details-marker { display: none }
.itin__summary .icon { margin-inline-start: auto; color: var(--text-muted); transition: transform var(--dur-fast) var(--ease-out) }
.itin__day[open] .itin__summary .icon { transform: rotate(180deg) }
.itin__num {
  display: grid; place-items: center; flex: none; width: 30px; height: 30px;
  border-radius: var(--radius-pill); background: var(--surface-brand); color: var(--text-on-brand);
  font-size: var(--text-sm); font-weight: var(--weight-semibold);
}
.itin__heads { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-width: 0 }
.itin__day-name { font-size: var(--text-lg); font-weight: var(--weight-medium) }
.itin__day-title { font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-muted) }

.itin__steps { list-style: none; margin: 0; padding: 4px 18px 20px 22px; display: flex; flex-direction: column; gap: 0 }
.itin__step {
  display: grid; grid-template-columns: 108px 1fr; gap: 4px 18px;
  position: relative; padding: 0 0 18px 22px;
}
.itin__step::before {   /* เส้นไทม์ไลน์ */
  content: ""; position: absolute; inset-block: 6px -6px; inset-inline-start: 4px;
  width: 2px; background: var(--border-soft);
}
.itin__step:last-child::before { inset-block-end: auto; height: 0 }
.itin__step::after {    /* จุดกลม */
  content: ""; position: absolute; inset-inline-start: 0; top: 6px;
  width: 10px; height: 10px; border-radius: var(--radius-pill);
  background: var(--surface-card); border: 2px solid var(--surface-brand);
}
.itin__time { font-weight: var(--weight-semibold); color: var(--brand-strong); font-size: var(--text-sm); padding-top: 1px }
.itin__text { color: var(--text-body); line-height: 1.65 }

.itin__note {
  display: flex; align-items: flex-start; gap: 8px; margin: 0 18px 18px;
  padding: 10px 14px; border-radius: var(--radius-sm);
  background: var(--surface-sunk); color: var(--text-muted); font-size: var(--text-sm); line-height: 1.6;
}
.itin__note .icon { flex: none; margin-top: 2px; color: var(--brand-strong) }

@media (max-width: 640px) {
  .itin__steps { padding-inline: 14px 16px }
  .itin__step { grid-template-columns: 1fr; gap: 2px; padding-inline-start: 20px }
}

/* ── พิมพ์ / บันทึกเป็น PDF — เก็บเฉพาะเนื้อหาที่ลูกค้าต้องใช้ ───────── */
@media print {
  .site-header, .site-footer, .mobile-nav, .no-print,
  .deals__filter, .chips, .deals, .pkg__actions, .plan-banner,
  .deals__head, .pkg__section .gallery { display: none !important }
  .pkg__hero { break-inside: avoid }
  .itin__day { break-inside: avoid; box-shadow: none; border-color: #d9d9d9 }
  .itin__day[open] .itin__summary .icon { display: none }
  body { background: #fff }
  a[href]::after { content: "" }
}

.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(14px, 1.6vw, 20px) }

/* ── Reviews ──────────────────────────────────────────────────────── */
#reviews { scroll-margin-top: 90px }
.reviews__nav { display: flex; align-items: center; flex-wrap: wrap; gap: 10px }
.reviews__rail {
  display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; padding: 4px 4px 20px; margin: -4px -4px 0;
}
.reviews__item { flex: 0 0 min(360px, 84vw); scroll-snap-align: start }
.review__text { font-size: 15.5px; line-height: 1.72; color: var(--text-body); margin: 14px 0 18px }
.review__who { display: flex; align-items: center; gap: 10px }
.review__avatar {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-pill);
  background: var(--brand-tint); color: var(--sea-700); font-weight: var(--weight-semibold); flex: none;
}
.review__name { font-size: var(--text-sm); color: var(--text-heading); font-weight: var(--weight-semibold) }
.review__trip { display: block; font-weight: var(--weight-regular); font-size: var(--text-xs); color: var(--text-muted) }

/* ── FAQ ──────────────────────────────────────────────────────────── */
.faq { display: flex; flex-direction: column; gap: 10px }
.faq__item { background: var(--surface-card); border-radius: var(--radius-md); box-shadow: var(--shadow-card); overflow: hidden }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; padding: 18px 20px; background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: var(--text-base); font-weight: var(--weight-semibold);
  color: var(--text-heading); text-align: start;
}
.faq__q:hover { background: var(--surface-sunk) }
.faq__sign { font-family: var(--font-mono); color: var(--brand); font-size: 18px }
.faq__a { margin: 0; padding: 0 20px 20px; font-size: 15.5px; line-height: 1.72; color: var(--text-muted) }

/* ── Contact ──────────────────────────────────────────────────────── */
.contact {
  background: var(--surface-contact); margin-top: clamp(44px, 7vw, 80px);
  padding: clamp(36px, 6vw, 72px) 0; scroll-margin-top: 74px;
}
.contact__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(24px, 4vw, 48px); align-items: start;
}
.contact__title { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: clamp(26px, 4.4vw, 34px); color: #fff; margin: 8px 0 14px }
.contact__text { font-size: var(--text-base); line-height: var(--text-base-lh); color: rgba(255, 255, 255, .78); margin: 0 0 24px; max-width: 32em }
.contact__list { display: flex; flex-direction: column; gap: 14px }
.contact__row { display: flex; align-items: center; gap: 12px; color: #fff; font-size: 15px }
.contact__row-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .12); flex: none }
.contact__row-sub { display: block; font-size: var(--text-xs); color: rgba(255, 255, 255, .6) }
.plan-card__title { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: 20px; color: var(--text-heading); margin: 0 0 6px }
.plan-card__text { font-size: var(--text-sm); line-height: 1.7; color: var(--text-muted); margin: 0 0 16px }
.plan-card__summary {
  background: var(--surface-sunk); border-radius: var(--radius-md); padding: 14px 16px;
  font-size: 14.5px; line-height: 1.75; color: var(--text-body); margin-bottom: 16px;
}
.plan-card__actions { display: flex; flex-direction: column; gap: 10px }
.plan-card__fineprint { font-size: var(--text-xs); line-height: 1.6; color: var(--text-muted); text-align: center; margin: 14px 0 0 }

/* Footer map — the embed sits in the same frame the placeholder used */
.map { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-photo); overflow: hidden; background: var(--sea-900) }
.map > .gm-photo { position: absolute; inset: 0; aspect-ratio: auto }
.map__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; filter: saturate(.95) }
.map__link {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
  font-size: var(--text-sm); color: rgba(255, 255, 255, .72);
}
.map__link:hover { color: #fff }

/* ── Footer ───────────────────────────────────────────────────────── */
.site-footer { background: var(--surface-footer); padding: clamp(32px, 5vw, 56px) 0 28px }
.site-footer__grid {
  max-width: var(--measure-max); margin: 0 auto; padding: 0 clamp(20px, 4vw, 40px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px;
}
.site-footer__about { font-size: var(--text-sm); line-height: var(--text-base-lh); color: rgba(255, 255, 255, .66); margin: 0 }
.site-footer h2 { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: 16px; color: #fff; margin: 0 0 12px }
.site-footer__links, .site-footer__contact { display: flex; flex-direction: column; gap: 8px; font-size: var(--text-sm) }
.site-footer__contact { color: rgba(255, 255, 255, .72) }
.site-footer__links a { color: rgba(255, 255, 255, .72) }
.site-footer__links a:hover { color: #fff }
.site-footer__social { display: flex; gap: 10px; margin-top: 14px }
/* ── เงื่อนไขของที่พัก เช่น ต้องนั่งเรือของที่พักเอง ───────────────
   เป็นเงื่อนไขของราคา ไม่ใช่ค่าใช้จ่ายเพิ่ม จึงใช้พื้นฟ้าอ่อนแบบบอกข้อมูล */
.deal__rule {
  display: flex; align-items: flex-start; gap: 6px; margin: 8px 0 0;
  padding: 8px 10px; border-radius: var(--radius-sm, 8px);
  background: var(--state-info-soft); color: var(--text-body);
  font-size: 11.5px; line-height: 1.6;
}
.deal__rule .icon { flex: none; margin-top: 2px; color: var(--brand-strong) }

.room__rule {
  margin: 10px 0 0; padding: 11px 13px; border-radius: var(--radius-md, 12px);
  background: var(--state-info-soft);
  font-size: var(--text-xs); line-height: 1.7; color: var(--text-body);
}

/* ── ราคาสำหรับคนที่มาคนเดียว ────────────────────────────────────
   ไม่ใช่คำเตือน เป็นราคาอีกแบบ จึงใช้โทนเดียวกับข้อความรอง */
.deal__solo {
  display: flex; align-items: center; gap: 6px; margin: 8px 0 0;
  font-size: 11.5px; line-height: 1.6; color: var(--text-muted);
}
.deal__solo .icon { flex: none; color: var(--text-muted) }
.room__solo { margin: 8px 0 0; font-size: var(--text-xs); line-height: 1.7; color: var(--text-muted) }

/* ── ค่าบังคับที่ไม่รวมในราคา (กาล่าดินเนอร์ปีใหม่ ฯลฯ) ─────────
   ใช้สีส้มเตือน เพราะลูกค้าต้องรู้ก่อนเทียบราคา ไม่ใช่รู้ตอนจะจ่าย */
.deal__surcharge {
  display: flex; align-items: flex-start; gap: 6px; margin: 8px 0 0;
  padding: 8px 10px; border-radius: var(--radius-sm, 8px);
  background: var(--state-warning-soft); color: var(--text-body);
  font-size: 11.5px; line-height: 1.6;
}
.deal__surcharge .icon { flex: none; margin-top: 2px; color: var(--coral-500) }

/* กรณีแค่บอกว่าไม่เปิดขาย ไม่ใช่ค่าใช้จ่ายที่ต้องระวัง จึงใช้สีกลาง */
.deal__surcharge--plain { background: var(--surface-sunk) }
.deal__surcharge--plain .icon { color: var(--text-muted) }

.room__surcharge {
  margin: 10px 0 0; padding: 11px 13px; border-radius: var(--radius-md, 12px);
  background: var(--state-warning-soft);
  font-size: var(--text-xs); line-height: 1.7; color: var(--text-body);
}

/* ── หน้านโยบายและเงื่อนไข ───────────────────────────────────────
   ข้อความกฎหมายอ่านยากอยู่แล้ว จึงคุมความกว้างบรรทัดและเว้นบรรทัดให้โปร่ง */
.policy__updated { margin: 10px 0 0; font-size: var(--text-xs); color: var(--text-muted) }
.policy__tabs { margin-bottom: 22px }

.policy { max-width: 62ch }
.policy__section { margin-bottom: 30px }
.policy__section:last-child { margin-bottom: 0 }
.policy__h {
  margin: 0 0 10px; font-family: var(--font-display);
  font-size: 17px; font-weight: var(--weight-medium); color: var(--text-heading); line-height: 1.45;
}
.policy__p { margin: 0 0 10px; font-size: var(--text-sm); line-height: 1.85; color: var(--text-body) }
.policy__p:last-child { margin-bottom: 0 }
.policy__list { margin: 0; padding-left: 20px; display: grid; gap: 7px }
.policy__list li { font-size: var(--text-sm); line-height: 1.8; color: var(--text-body) }

/* ลิงก์นโยบายท้ายเว็บ — เห็นได้แต่ไม่แย่งความสนใจจากปุ่มติดต่อ */
.site-footer__policy {
  max-width: var(--measure-max); margin: 22px auto 0; padding: 0 clamp(20px, 4vw, 40px);
  display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--text-xs);
}
.site-footer__policy a { color: rgba(255, 255, 255, .6) }
.site-footer__policy a:hover { color: #fff }
.site-footer__policy + .site-footer__safety { margin-top: 14px }

/* เตือนเรื่องเพจปลอม — เห็นทุกหน้า เพราะคนโดนโกงตอนกำลังจะโอน */
.site-footer__safety {
  max-width: var(--measure-max); margin: 28px auto 0;
  padding: 13px clamp(16px, 3vw, 20px);
  border: var(--border-w) solid rgba(242, 112, 79, .45);
  border-radius: var(--radius-md, 12px);
  background: rgba(242, 112, 79, .12);
  font-size: var(--text-xs); line-height: 1.7; color: rgba(255, 255, 255, .88);
}
.site-footer__safety + .site-footer__legal { margin-top: 18px }

.site-footer__legal {
  max-width: var(--measure-max); margin: 28px auto 0; padding: 20px clamp(20px, 4vw, 40px) 0;
  border-top: var(--border-w) solid rgba(255, 255, 255, .12);
  font-size: var(--text-xs); color: rgba(255, 255, 255, .5);
}

/* ── จอมือถือ: ย่อขนาดตัวอักษรและระยะห่างให้อ่านง่าย เลื่อนน้อยลง ─────
   (แตะปุ่มยังได้ขนาดเดิม — ย่อเฉพาะตัวอักษรกับช่องไฟ) */
@media (max-width: 560px) {
  :root {
    --text-lead: 16px;
    --text-base: 15px; --text-base-lh: 1.62;
    --text-sm: 13.5px;
    --text-xs: 12px;
    --gutter: 16px;
  }
  .container { padding-inline: 16px }
  .section { padding-top: 32px }
  .section-title { font-size: 21px; margin: 6px 0 4px }
  .section-title--spaced { margin-bottom: 16px }
  .section-lead { font-size: 14px }
  .section-lead--spaced { margin-bottom: 18px }
  .section-head, .section-head--tight { margin-bottom: 18px; gap: 10px }

  /* ฮีโร่ — เต็มหน้าจอ ให้รูปทะเลเด่นเต็มที่ */
  .hero { min-height: 100svh }
  .hero__inner { padding-bottom: 32px }
  .hero__title { font-size: 27px; margin: 10px 0 10px }
  .hero__text { font-size: 15px; margin-bottom: 20px }
  .hero__badges { margin-top: 18px; gap: 8px }
  .hero__actions { gap: 8px }

  .stats { padding-top: 24px; gap: 8px }
  .gm-stat { padding: 12px 14px }

  /* การ์ดแพ็กเกจ — มือถือเรียงลงมาทีละใบ (อ่านง่ายกว่าบีบ 2 คอลัมน์) */
  .package-grid { gap: 12px }
  .gm-tour__body { padding: 16px }
  .gm-tour__title { font-size: 17px; line-height: 1.35 }
  .gm-tour__price { font-size: 19px }
  .gm-tour__meta { gap: 6px 12px; font-size: 12.5px }

  /* ทริปส่วนตัว */
  .svc { gap: 14px; margin-top: 16px }
  .svc__body { padding: 16px; gap: 8px }
  .svc__title { font-size: 17px }
  .svc__media { aspect-ratio: 3 / 2 }

  /* ตัวจัดทริป */
  .planner { margin-top: 32px; padding: 32px 0 }
  .planner__col { gap: 12px }
  .gm-card__body { padding: 16px }
  .step-head { margin-bottom: 12px }
  .step-title { font-size: 17px }
  .summary__total { font-size: 26px }
  .gm-btn.is-block.gm-btn--lg { font-size: 15px; padding-inline: 16px }
  .gm-btn.is-block { padding-inline: 16px }

  /* รายการที่พัก + โปรแกรมเดินทาง */
  .deal { grid-template-columns: 92px 1fr; gap: 12px; padding: 12px }
  .itin__summary { padding: 14px }
  .itin__day-name { font-size: 16px }
  .itin__steps { padding: 4px 14px 16px 16px }
  .itin__step { padding-bottom: 14px }

  /* หน้ารูปห้อง */
  .room { padding-block: 18px 40px }
  .room__title { font-size: 22px }
  .room__type { font-size: 15px; margin: 4px 0 10px }
  .room__pricebox { padding: 14px }
  .room__price { font-size: 24px }
  .room__thumb { flex: 0 0 76px; height: 58px }

  /* แกลเลอรีและรีวิว */
  .gallery { gap: 10px }
  .gm-photo--43 { aspect-ratio: 4 / 3 }
}

/* ── หน้าการเดินทาง (travel.html) ─────────────────────────────────── */
.travel { padding-block: clamp(20px, 3vw, 32px) clamp(48px, 7vw, 80px) }
.travel__head { max-width: 46em; margin-bottom: clamp(32px, 5vw, 48px) }
.travel__title {
  font-family: var(--font-display); font-weight: var(--weight-medium);
  font-size: clamp(28px, 5vw, 44px); line-height: 1.16; color: var(--text-heading);
  margin: 10px 0 14px;
}
.travel__lead { font-size: clamp(15px, 2vw, 17px); line-height: 1.75; color: var(--text-body); margin: 0 }
.travel__section { margin-bottom: clamp(40px, 6vw, 64px) }

/* เส้นทาง 3 แบบ */
.route-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.route__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 18px }
.route__title {
  font-family: var(--font-display); font-weight: var(--weight-medium);
  font-size: 19px; color: var(--text-heading); margin: 0;
}
.route__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column }
.route__step { position: relative; display: flex; gap: 12px; padding-bottom: 18px }
/* เส้นต่อระหว่างขั้น */
.route__step:not(.route__step--end)::before {
  content: ""; position: absolute; left: 15px; top: 32px; bottom: 4px;
  width: 2px; border-radius: 2px; background: var(--border-soft);
}
.route__step:last-child { padding-bottom: 0 }
.route__icon {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface-brand-soft); color: var(--brand-strong);
}
.route__step--end .route__icon { background: var(--surface-sand); color: var(--text-on-sand) }
.route__body { display: flex; flex-direction: column; gap: 2px; padding-top: 5px }
.route__leg { font-size: 14.5px; line-height: 1.5; color: var(--text-heading) }
.route__time { font-size: 12.5px; color: var(--text-muted) }
.route__tip {
  display: flex; gap: 8px; align-items: flex-start;
  margin: 18px 0 0; padding-top: 14px; border-top: var(--border-w) solid var(--border-soft);
  font-size: 13px; line-height: 1.65; color: var(--text-muted);
}
.route__tip .icon { flex: none; margin-top: 2px }

/* ตารางเรือ */
.ferry-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) }
.ferry__title {
  display: flex; align-items: center; gap: 8px; margin: 0 0 14px;
  font-family: var(--font-display); font-weight: var(--weight-medium);
  font-size: 17px; color: var(--text-heading);
}
.ferry__list { list-style: none; margin: 0; padding: 0 }
.ferry__row {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 11px 0; border-bottom: var(--border-w) dashed var(--border-soft);
}
.ferry__row:last-child { border-bottom: 0 }
.ferry__depart { font-family: var(--font-mono); font-size: 16px; color: var(--text-heading); min-width: 5.5em }
.ferry__arrow { color: var(--text-muted); flex: none }
.ferry__arrive { font-size: 13.5px; color: var(--text-muted) }
.ferry__note { margin: 14px 0 0; font-size: 13px; line-height: 1.6; color: var(--text-muted) }
.ferry__empty { padding: 12px 0; font-size: 13.5px; color: var(--text-muted) }
.travel__callout { margin-top: 20px }

/* ท่าเรือ */
.pier__body { display: flex; gap: 16px; align-items: flex-start }
.pier__icon {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface-brand-soft); color: var(--brand-strong);
}
.pier__name {
  font-family: var(--font-display); font-weight: var(--weight-medium);
  font-size: 18px; color: var(--text-heading); margin: 4px 0 8px;
}
.pier__text { margin: 0 0 8px; font-size: 14.5px; line-height: 1.7; color: var(--text-body) }
.pier__text:last-child { margin-bottom: 0 }
.pier__text--warn { color: var(--text-muted) }

/* ชวนให้เราจัดการให้ */
.travel__cta {
  background: var(--surface-brand-soft); border-radius: var(--radius-card);
  padding: clamp(24px, 4vw, 40px); text-align: center;
}
.travel__cta-title {
  font-family: var(--font-display); font-weight: var(--weight-medium);
  font-size: clamp(21px, 3vw, 28px); color: var(--text-heading); margin: 0 0 12px;
}
.travel__cta-text {
  max-width: 44em; margin: 0 auto 22px;
  font-size: 15px; line-height: 1.75; color: var(--text-body);
}
.travel__cta-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center }

@media (max-width: 560px) {
  .route__head { flex-direction: column; align-items: flex-start; gap: 6px }
  .ferry__depart { min-width: 4.6em; font-size: 15px }
  .travel__cta-actions .gm-btn { width: 100% }
}

/* หัวข้อย่อยในหน้าหลังบ้าน */
.admin__subhead {
  font-family: var(--font-display); font-weight: var(--weight-medium);
  font-size: 15px; color: var(--text-heading); margin: 22px 0 10px;
}
.admin__subhead:first-of-type { margin-top: 14px }

/* รอบเรือที่เปิดเฉพาะบางฤดู */
.ferry__row--seasonal { flex-wrap: wrap }
/* ป้ายลงบรรทัดใหม่ ไม่ยืดเต็มแถว */
.ferry__flag { flex-basis: 100%; margin-top: 7px; align-self: flex-start; width: fit-content }

/* ตารางรถตู้ 3 ใบต่อแถวบนจอกว้าง */
.ferry-grid--three { grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)) }

/* ── ขั้นตอนการเดินทาง ────────────────────────────────────────────── */
.plan-tabs { margin-bottom: 16px }
.plans { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px }


.plan__steps { list-style: none; margin: 0; padding: 0 }
.plan__step { position: relative; display: flex; gap: 14px; padding-bottom: 16px }
.plan__step:last-child { padding-bottom: 0 }
/* เส้นต่อระหว่างขั้น */
.plan__step:not(.plan__step--end)::before {
  content: ""; position: absolute; left: 13px; top: 30px; bottom: 2px;
  width: 2px; border-radius: 2px; background: var(--border-soft);
}
.plan__num {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface-brand-soft); color: var(--brand-strong);
  font-family: var(--font-mono); font-size: 13px;
}
.plan__step--end .plan__num { background: var(--surface-sand); color: var(--text-on-sand) }
.plan__text { display: flex; flex-direction: column; gap: 3px; padding-top: 3px; min-width: 0 }
.plan__line { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap }
.plan__time { font-family: var(--font-mono); font-size: 16px; color: var(--text-heading) }
.plan__label { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text-body) }
.plan__label .icon { color: var(--text-muted); flex: none }
.plan__wait { font-size: 12.5px; color: var(--text-muted) }
.plan__flag { margin-top: 4px; width: fit-content }
.plan__note { margin: 6px 0 0 42px; font-size: 12.5px; line-height: 1.6; color: var(--text-muted) }

/* กล่องพับ "ดูตารางทั้งหมด" */
.timetable-toggle { margin-top: 22px }
.timetable-body { padding-top: 6px }
.travel__block + .travel__block { margin-top: 32px }

@media (max-width: 560px) {
  .plan__line { gap: 8px }
  .plan__time { font-size: 15px }
  .plan__label { font-size: 13.5px }
}

/* ตารางรถตู้ 3 ใบต่อแถวบนจอกว้าง */
.ferry-grid--three { grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)) }

/* ── แผนเดินทางแนะนำ ──────────────────────────────────────────────── */
.plans__head {
  display: flex; align-items: center; gap: 8px; margin: 26px 0 12px;
  font-family: var(--font-display); font-weight: var(--weight-medium);
  font-size: 16px; color: var(--text-heading);
}
.plans__head:first-of-type { margin-top: 0 }
.plans { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px }
.plan__body { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap }
.plan__head { flex: 0 0 100% }
.plan__legs { display: flex; flex-wrap: wrap; gap: 10px 28px; flex: 1 1 auto }
.plan__leg { position: relative; display: flex; gap: 10px; align-items: flex-start }
/* ลูกศรคั่นระหว่างขั้น */
.plan__leg:not(.plan__leg--end)::after {
  content: "→"; position: absolute; right: -20px; top: 6px;
  color: var(--text-muted); font-size: 13px;
}
.plan__icon {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface-brand-soft); color: var(--brand-strong);
}
.plan__leg--end .plan__icon { background: var(--surface-sand); color: var(--text-on-sand) }
.plan__text { display: flex; flex-direction: column; gap: 1px }
.plan__time { font-family: var(--font-mono); font-size: 15px; color: var(--text-heading); line-height: 1.35 }
.plan__label { font-size: 12.5px; color: var(--text-muted) }
.plan__wait { font-size: 11.5px; color: var(--text-muted); opacity: .85 }
.plan__flag { margin-top: 5px; width: fit-content }
.plan__total {
  flex: none; white-space: nowrap;
  background: var(--surface-sunk); color: var(--text-heading);
  border: var(--border-w) solid var(--border-soft);
}
.plan__note { flex: 1 1 100%; margin: 4px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--text-muted) }

@media (max-width: 700px) {
  .plan__legs { flex-direction: column; gap: 12px }
  .plan__leg:not(.plan__leg--end)::after { content: none }
  /* เส้นต่อแนวตั้งแทนลูกศรบนจอเล็ก */
  .plan__leg:not(.plan__leg--end)::before {
    content: ""; position: absolute; left: 13px; top: 30px; height: 14px;
    width: 2px; border-radius: 2px; background: var(--border-soft);
  }
  .plan__total { align-self: flex-start }
}

/* ช่องตั้งค่าตัวเลขเดี่ยวในหน้าหลังบ้าน */
.admin__offset { max-width: 320px; margin-top: 16px }

/* ── แผนที่เกาะ ───────────────────────────────────────────────────── */
.island { display: grid; gap: 20px; grid-template-columns: minmax(0, 1.35fr) minmax(240px, 1fr); align-items: start }
.island__map {
  position: relative; aspect-ratio: 100 / 72;
  border-radius: var(--radius-card); overflow: hidden;
}
.island__art { position: absolute; inset: 0; width: 100%; height: 100% }

/* สีของแผนที่ — โทนเดียวกับภาพประกอบของแบรนด์ */
:root {
  --map-w1: #FBF1DE; --map-w2: #CFE7E1; --map-w3: #43AEB7;
  --map-land: #16636A; --map-sand: #F3DFBE; --map-beach: #FCF3E2;
  --map-wave: rgba(255, 255, 255, .6); --map-halo: rgba(255, 255, 255, .85);
  --map-palm: #16636A;
}
[data-theme="dark"] {
  --map-w1: #0E2739; --map-w2: #123A48; --map-w3: #1A6B76;
  --map-land: #0C3238; --map-sand: #C9AE83; --map-beach: #EBD6B2;
  --map-wave: rgba(255, 255, 255, .16); --map-halo: rgba(255, 255, 255, .16);
  --map-palm: #2C7F80;
}

.island__w1 { stop-color: var(--map-w1) }
.island__w2 { stop-color: var(--map-w2) }
.island__w3 { stop-color: var(--map-w3) }
.island__wave { fill: none; stroke: var(--map-wave); stroke-width: .55; stroke-linecap: round }
.island__halo { fill: none; stroke: var(--map-halo); stroke-width: 3.4 }
.island__sand { fill: var(--map-sand); stroke: var(--map-sand); stroke-width: 2.6 }
.island__land { fill: var(--map-land); stroke: none }
.island__beach { fill: none; stroke: var(--map-beach); stroke-width: 2.4; stroke-linecap: round }
.island__street { fill: none; stroke: var(--map-beach); stroke-width: 1; stroke-dasharray: 2 1.8; stroke-linecap: round; opacity: .8 }
.island__palm-trunk { fill: none; stroke: var(--map-palm); stroke-width: .9; stroke-linecap: round }
.island__palm-leaf { fill: var(--map-palm) }

.island__label, .island__tag {
  position: absolute; transform: translate(-50%, -50%);
  font-size: 11.5px; letter-spacing: .02em; white-space: nowrap; pointer-events: none;
}
.island__label { color: var(--text-heading); font-weight: var(--weight-semibold); text-shadow: 0 1px 3px var(--map-w1) }
.island__label--pattaya { left: 57%; top: 46% }
.island__label--sunrise { left: 90%; top: 40% }
.island__label--sunset { left: 57%; top: 25% }
.island__tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: var(--radius-pill);
  background: var(--surface-card); color: var(--text-body);
  border: var(--border-w) solid var(--border-soft); font-size: 11px;
}
.island__tag--street { left: 79%; top: 45% }
.island__tag--pier { left: 63%; top: 61% }

.island__pins { position: absolute; inset: 0 }
.island__pin {
  position: absolute; transform: translate(-50%, -50%);
  width: 26px; height: 26px; padding: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 12px;
  background: var(--brand); color: var(--text-on-brand);
  border: 2px solid var(--surface-card); box-shadow: var(--shadow-sm);
  transition: var(--transition-control);
}
.island__pin--sunrise { background: var(--accent-palm, var(--sea-600)) }
.island__pin:hover, .island__pin.is-on { transform: translate(-50%, -50%) scale(1.25); z-index: 3 }

.island__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px }
.island__row {
  display: flex; gap: 11px; align-items: flex-start; cursor: pointer;
  padding: 9px 10px; border-radius: var(--radius-input); transition: var(--transition-control);
}
.island__row:hover, .island__row.is-on { background: var(--surface-sunk) }
.island__num {
  flex: none; width: 23px; height: 23px; border-radius: 50%;
  display: grid; place-items: center; margin-top: 1px;
  font-family: var(--font-mono); font-size: 11.5px;
  background: var(--brand); color: var(--text-on-brand);
}
.island__num--sunrise { background: var(--accent-palm, var(--sea-600)) }
.island__text { display: flex; flex-direction: column; gap: 1px; min-width: 0 }
.island__name { font-size: 14px; color: var(--text-heading); line-height: 1.4 }
.island__meta { font-size: 12px; color: var(--text-muted); line-height: 1.5 }
.island__credit { margin: 12px 0 0; font-size: 11.5px; color: var(--text-muted); opacity: .8 }
.island__note { margin: 4px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--text-muted) }

@media (max-width: 780px) {
  .island { grid-template-columns: 1fr }
  .island__pin { width: 22px; height: 22px; font-size: 10.5px }
  .island__label, .island__tag { font-size: 10.5px }
  /* จอเล็กพื้นที่น้อย ขยับป้ายไม่ให้ทับหมุด */
  .island__label--sunrise { left: 84%; top: 82% }
  .island__tag--street { left: 72%; top: 31% }
  .island__tag--pier { display: none }
}

/* ที่พักที่ไม่ติดหาด — หมุดใช้เส้นประรอบนอกให้ต่างจากที่ติดหาด */
.island__pin--inland { border-style: dashed }

/* ทำเลที่พัก — การ์ดห้องพักและหน้าดูรูปห้อง */
.deal__where {
  display: flex; align-items: center; gap: 6px; margin: 4px 0 0;
  font-size: 12.5px; line-height: 1.5; color: var(--text-muted);
}
.deal__where .icon { flex: none; color: var(--accent-sand-ink, var(--text-muted)) }
.room__where {
  display: flex; align-items: center; gap: 7px; margin: 6px 0 0;
  font-size: 13.5px; line-height: 1.6; color: var(--text-body);
}
.room__where .icon { flex: none; color: var(--text-muted) }

/* ลิงก์ไปแผนที่ในหน้าการเดินทาง */
.travel__link { margin: 0 0 clamp(40px, 6vw, 64px) }
.travel__link a {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14.5px; line-height: 1.6;
}
.travel__link .icon { flex: none }

/* ช่องกรอกคำตอบยาว ๆ ในหน้าหลังบ้าน */
.admin__grid--wide { grid-template-columns: 1fr }
.gm-textarea { min-height: 76px; padding: 10px 14px; line-height: 1.6; resize: vertical }

/* ── หน้าคำถามที่พบบ่อย ───────────────────────────────────────────── */
.faq__tabs { margin-bottom: clamp(24px, 4vw, 34px) }
.faq__group { margin-bottom: clamp(32px, 5vw, 48px); scroll-margin-top: 84px }
.faq__group-title {
  font-family: var(--font-display); font-weight: var(--weight-medium);
  font-size: clamp(18px, 2.4vw, 22px); color: var(--text-heading); margin: 0 0 14px;
}
.faq__more { margin: 18px 0 0 }
.faq__more a { display: inline-flex; align-items: center; gap: 7px; font-size: 14.5px }
.faq__more .icon { flex: none }

/* ลิงก์เพิ่มเติมท้ายเว็บ */
.site-footer__link { margin: 12px 0 0; font-size: 14px }

/* ราคาเบาะเสริมในหน้าดูรูปห้อง — เด่นกว่าเงื่อนไขการจองนิดหนึ่ง เพราะเป็นเงินที่ต้องจ่ายเพิ่ม */
.room__extrabed {
  margin: 10px 0 0; padding: 8px 10px; border-radius: var(--radius-sm, 10px);
  background: var(--surface-brand-soft); color: var(--text-heading);
  font-size: 12.5px; line-height: 1.6; text-align: center;
}
.room__extrabed--none { background: var(--surface-sunk); color: var(--text-muted) }

/* เงื่อนไขการจองในหน้าดูรูปห้อง */
.room__terms {
  margin: 10px 0 0; font-size: 12.5px; line-height: 1.6;
  color: var(--text-muted); text-align: center;
}

/* สภาพทะเลจริง — โทนสีตามระดับคลื่น */
.gm-stat__note { display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.5; color: var(--text-muted) }
.gm-stat--warn .gm-stat__icon { background: var(--surface-sand); color: var(--text-on-sand) }
.gm-stat--rough .gm-stat__icon { background: var(--state-danger); color: #fff }

/* รายการที่รวมในราคาเหมาลำ */
.charter__includes { margin-top: 22px }
.charter__note { margin: 12px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--text-muted) }
.charter__policy { margin-top: 22px }
.charter__policy-list { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 6px;
  font-size: 13px; line-height: 1.65; color: var(--text-muted) }
.charter__policy-list li::marker { color: var(--brand-500, currentColor) }

/* ── การ์ดสถิติที่กดได้ (แถบ "เดินทางจาก") ─────────────────────────
   ให้รู้ว่ากดได้ด้วยลูกศรกับการยกตัวเบา ๆ ไม่ต้องใส่คำว่า "คลิกที่นี่" */
.gm-stat--link { text-decoration: none; color: inherit; gap: var(--space-3);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease }
.gm-stat__body { flex: 1; min-width: 0 }
.gm-stat__go { flex: none; align-self: center; color: var(--text-faint); transition: color .2s ease, transform .2s ease }
.gm-stat--link:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm, 0 2px 8px rgba(11,42,69,.08)); transform: translateY(-1px) }
.gm-stat--link:hover .gm-stat__go { color: var(--brand-strong); transform: translateX(2px) }
.gm-stat--link:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px }
@media (prefers-reduced-motion: reduce) {
  .gm-stat--link, .gm-stat__go { transition: none }
  .gm-stat--link:hover { transform: none }
  .gm-stat--link:hover .gm-stat__go { transform: none }
}

/* ── แถบพยากรณ์คลื่น 7 วัน ─────────────────────────────────────────
   แท่งสูง = คลื่นแรง · สีตามระดับ (โทเคน --sea-calm/moderate/rough) */
.wavecast { margin-top: 22px; padding: 16px 16px 14px; border-radius: var(--radius-lg, 16px);
  background: var(--surface-sunk); border: 1px solid var(--border-hairline) }
.wavecast__title { margin: 0 0 12px; font-size: 13px; font-weight: 600; color: var(--text-heading) }
.wavecast__row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; align-items: end }
.wavecast__day { display: grid; justify-items: center; gap: 4px; --wave: var(--sea-calm) }
.wavecast__day--moderate { --wave: var(--brand) }
.wavecast__day--choppy { --wave: var(--sea-moderate) }
.wavecast__day--rough { --wave: var(--sea-rough) }
.wavecast__dow { font-size: 11px; color: var(--text-muted); white-space: nowrap }
.wavecast__date { font-size: 12.5px; font-weight: 600; color: var(--text-body) }
.wavecast__track { width: 100%; max-width: 30px; height: 56px; display: flex; align-items: flex-end;
  border-radius: 6px; background: var(--surface-card); overflow: hidden }
.wavecast__bar { width: 100%; border-radius: 6px; background: var(--wave);
  transition: height var(--dur-slow, .4s) var(--ease-out, ease) }
.wavecast__m { font-size: 11px; font-weight: 600; color: var(--text-body); white-space: nowrap }
.wavecast__keys { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 14px }
.wavecast__key { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-muted) }
.wavecast__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sea-calm) }
.wavecast__key--moderate .wavecast__dot { background: var(--brand) }
.wavecast__key--choppy .wavecast__dot { background: var(--sea-moderate) }
.wavecast__key--rough .wavecast__dot { background: var(--sea-rough) }
.wavecast__note { margin: 10px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--text-muted) }
@media (max-width: 380px) {
  .wavecast { padding: 14px 12px 12px }
  .wavecast__row { gap: 3px }
  .wavecast__dow, .wavecast__m { font-size: 10px }
}
@media (prefers-reduced-motion: reduce) { .wavecast__bar { transition: none } }

/* ช่วงเวลาที่ตารางนี้ใช้ได้ — อยู่บนสุดของกล่องตาราง */
.timetable-valid {
  margin: 0 0 18px; padding: 9px 12px; border-radius: var(--radius-sm, 10px);
  background: var(--surface-brand-soft); color: var(--text-heading);
  font-size: 12px; line-height: 1.6;
}

/* หมายเหตุใต้รอบเรือ — เช่น รอบที่แวะเกาะระหว่างทาง */
.ferry__note {
  flex: 0 0 100%; margin-top: 2px;
  font-size: 11.5px; line-height: 1.55; color: var(--text-muted);
}

/* แผนที่ต่อรถไม่ได้ — ทำให้ดูจางลงและติดป้ายไว้ จะได้ไม่เข้าใจผิดว่าเลือกได้ */
.plan--nofit { border-style: dashed; background: var(--surface-sunk) }
.plan--nofit .plan__steps { opacity: .7 }

/* แถบหัวการ์ดแผนเดินทาง — บอกว่าเป็นรอบที่เท่าไหร่ และใช้เวลารวมเท่าไหร่ */
.plan__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin: 0 0 4px;
  padding-bottom: 12px; border-bottom: 1px solid var(--border-hairline);
}
.plan__round {
  font-family: var(--font-display); font-size: 15px;
  color: var(--text-heading);
}
.plan--nofit .plan__round { color: var(--text-muted) }

/* ── การ์ดตั๋วเดินทาง (หน้า tickets.html) ───────────────────────── */
.ticket-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)) }
.ticket__body { display: grid; gap: 14px; align-content: start }
.ticket__head { display: flex; align-items: flex-start; gap: 12px }
.ticket__icon {
  flex: none; width: 42px; height: 42px; border-radius: var(--radius-pill);
  display: grid; place-items: center;
  background: var(--brand-tint); color: var(--brand-strong);
}
.ticket__name {
  margin: 0; font-family: var(--font-display); font-size: 17px;
  color: var(--text-heading); line-height: 1.35;
}
.ticket__desc { margin: 4px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--text-muted) }

/* เลือกเที่ยวเดียวหรือไป-กลับด้วยปุ่มสลับ แล้วค่อยขึ้นราคาที่เลือกทีละอัน
   แบบนี้ลูกค้าเห็นราคาเดียว ไม่ต้องเทียบเองว่าอันไหนคืออันที่จะจ่าย */
.ticket__pick { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap }

.ticket__seg {
  display: inline-flex; padding: 3px; gap: 3px;
  border-radius: var(--radius-pill); background: var(--surface-sunk);
}
.ticket__seg-btn {
  position: relative; padding: 7px 15px; cursor: pointer; user-select: none;
  border-radius: var(--radius-pill); font-size: 13px; color: var(--text-muted);
  transition: var(--transition-control);
}
.ticket__seg-btn:hover { color: var(--text-heading) }
.ticket__seg-btn:active { transform: var(--press-scale) }
.ticket__seg-btn.is-picked {
  background: var(--surface-card); color: var(--text-heading);
  font-weight: var(--weight-medium); box-shadow: var(--shadow-sm);
}
.ticket__seg-btn:has(.ticket__seg-input:focus-visible) { outline: 2px solid var(--border-focus); outline-offset: 2px }
/* ปุ่มวิทยุตัวจริงซ่อนไว้ แต่ยังกด Tab กดลูกศรเลือกได้ */
.ticket__seg-input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; pointer-events: none }

.ticket__price { margin: 0; display: flex; align-items: baseline; gap: 5px }
.ticket__price-num {
  font-family: var(--font-display); font-size: 22px;
  font-weight: var(--weight-regular); color: var(--text-heading); line-height: 1.2;
}
.ticket__price-unit { font-size: 12px; color: var(--text-muted) }

.ticket__cta { width: 100%; justify-content: center }
.ticket__note { margin-top: 16px; align-items: flex-start }
.ticket__note p { margin: 0 0 6px; font-size: 12.5px; line-height: 1.6 }
.ticket__note p:last-child { margin-bottom: 0 }
.ticket__operator { color: var(--text-muted) }
/* บรรทัดเตือนคนที่จองแพ็กเกจมาแล้ว — เน้นกว่าหมายเหตุอื่นนิดหนึ่ง */
.ticket__pkgnote { font-weight: var(--weight-medium); color: var(--text-heading) }

/* ลิงก์ข้ามไปหน้าตั๋ว — เด่นกว่าลิงก์ธรรมดานิดหนึ่ง เพราะเป็นทางไปหน้าขาย */
.travel__link--ticket a { font-weight: var(--weight-semibold) }

/* จอแคบมากค่อยแยกบรรทัด ปุ่มสลับยืดเต็มความกว้างให้กดง่าย */
@media (max-width: 340px) {
  .ticket__pick { flex-direction: column; align-items: stretch; gap: 10px }
  .ticket__seg { justify-content: center }
  .ticket__seg-btn { flex: 1; text-align: center }
}

/* ── เส้นทางเรือข้ามเกาะ ────────────────────────────────────────── */
.boatpick { max-width: 340px; margin-bottom: 18px }
.boatpick__select { width: 100% }

.boatroute { overflow: hidden }
.boatroute__body { display: grid; gap: 0; padding: 0 !important }

.boatroute__head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px; background: var(--surface-brand-soft);
}
.boatroute__pin {
  flex: none; width: 38px; height: 38px; border-radius: var(--radius-pill);
  display: grid; place-items: center;
  background: var(--surface-card); color: var(--brand-strong);
}
.boatroute__titles { min-width: 0 }
.boatroute__name {
  margin: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-family: var(--font-display); font-size: 18px; color: var(--text-heading);
}
.boatroute__to { color: var(--brand-strong) }
.boatroute__dest { color: var(--text-body) }
.boatroute__meta { margin: 3px 0 0; font-size: 12px; color: var(--text-muted); line-height: 1.5 }

.boatroute__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 }
.boatroute__leg { padding: 16px 20px }
.boatroute__leg + .boatroute__leg { border-left: 1px dashed var(--border-soft) }
.boatroute__leg-title {
  display: block; margin-bottom: 8px;
  font-size: 11.5px; font-weight: 600; color: var(--text-muted);
}
.boatroute__runs { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px }
.boatroute__run { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px }
.boatroute__time {
  font-family: var(--font-mono, monospace); font-size: 14px;
  font-weight: 600; color: var(--text-heading);
}
.boatroute__time--to { color: var(--text-body); font-weight: 400 }
.boatroute__arrow { color: var(--text-faint); font-size: 12px }
.boatroute__season { flex: 0 0 100%; font-size: 10.5px; color: var(--text-muted); line-height: 1.4 }

.boatroute__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding: 14px 20px; border-top: 1px solid var(--border-hairline);
  background: var(--surface-sunk);
}
.boatroute__price { display: flex; align-items: baseline; gap: 18px }
.boatroute__fare { display: flex; align-items: baseline; gap: 5px }
.boatroute__fare strong { font-family: var(--font-display); font-size: 19px; color: var(--text-heading) }
.boatroute__fare small { font-size: 12px; color: var(--text-muted) }
.boatroute__cta { flex: none }

.boatroute__notes { margin-top: 16px; align-items: flex-start }
.boatroute__notes p { margin: 0 0 6px; font-size: 12.5px; line-height: 1.6 }
.boatroute__notes p:last-child { margin-bottom: 0 }
.boatroute__operator { color: var(--text-muted) }

@media (max-width: 560px) {
  .boatpick { max-width: none }
  .boatroute__grid { grid-template-columns: 1fr }
  .boatroute__leg + .boatroute__leg { border-left: 0; border-top: 1px dashed var(--border-soft) }
  .boatroute__foot { flex-direction: column; align-items: stretch }
  .boatroute__cta { justify-content: center }
}

/* ── ตารางฤดูกาลรายเดือน ────────────────────────────────────────────
   แถบยาว = คลื่นแรง · สีชุดเดียวกับแถบพยากรณ์ 7 วัน จะได้อ่านต่อกันได้ */
.season { display: grid; gap: 2px; border-radius: var(--radius-lg, 16px); overflow: hidden;
  border: 1px solid var(--border-hairline); background: var(--border-hairline) }
.season__row {
  display: grid; align-items: center; gap: 10px;
  grid-template-columns: 58px minmax(70px, 1fr) 54px 118px 96px;
  padding: 9px 14px; background: var(--surface-card); --wave: var(--sea-calm);
}
.season__row--moderate { --wave: var(--brand) }
.season__row--choppy { --wave: var(--sea-moderate) }
.season__row--rough { --wave: var(--sea-rough) }
.season__row.is-now { background: var(--surface-brand-soft) }
.season__row.is-closed { opacity: .62 }
.season__month { font-size: 13px; font-weight: 600; color: var(--text-heading) }
.season__month small { display: block; font-size: 10px; font-weight: 400; color: var(--text-muted) }
.season__track { height: 8px; border-radius: 999px; background: var(--surface-sunk); overflow: hidden }
.season__bar { display: block; height: 100%; border-radius: 999px; background: var(--wave) }
.season__wave { font-size: 12px; font-weight: 600; color: var(--text-body); text-align: right }
.season__calm { font-size: 11.5px; color: var(--text-muted) }
.season__tag {
  justify-self: end; font-size: 11px; font-weight: 600; white-space: nowrap;
  padding: 3px 10px; border-radius: 999px;
  background: var(--surface-brand-soft); color: var(--text-link);
}
.season__tag--closed { background: var(--surface-sunk); color: var(--text-muted) }
.season__note { margin: 12px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--text-muted) }

@media (max-width: 700px) {
  .season__row { grid-template-columns: 46px 1fr 48px; gap: 8px; padding: 9px 11px; row-gap: 2px }
  .season__calm { grid-column: 2 / 3; font-size: 11px }
  .season__tag { grid-column: 3 / 4; justify-self: end; font-size: 10px; padding: 2px 8px }
  .season__month { font-size: 12.5px }
}