.smap-widget {
  font-family: 'Noto Sans Thai UI', 'Noto Sans Thai', 'IBM Plex Sans Thai', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: #14261f;
  background: #ffffff;
  border: 1px solid #e4ded1;
  border-radius: 22px;
  overflow: hidden;
  margin: 28px 0;
  box-shadow: 0 1px 2px rgba(20, 38, 31, 0.04);
}
.smap-widget * { box-sizing: border-box; }

.smap-header { padding: 20px 24px 16px; background: #faf8f3; border-bottom: 1px solid #e4ded1; }
.smap-eyebrow {
  font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase;
  color: #047857; font-weight: 700; margin: 0 0 6px;
}
.smap-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 0 0 10px; }
.smap-title { font-size: 20px; margin: 0; font-weight: 800; letter-spacing: -0.01em; text-wrap: balance; }

/* Solid stat badge (stop count, computed from real data) vs. outline theme pills below —
   same visual contrast the reference mockup uses between its "2D1N · 12 Stops" badge and
   plain tags. Never fabricate a number here; it must come from route.stops.length. */
.smap-count-pill {
  flex: 0 0 auto; font-size: 12px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #34d399, #047857);
  padding: 5px 12px; border-radius: 999px; white-space: nowrap;
}

.smap-desc {
  font-size: 13.5px; line-height: 1.55; color: #5a5648; margin: 0 0 10px;
}

.smap-themes { display: flex; gap: 6px; flex-wrap: wrap; }
.smap-theme-pill {
  font-size: 11.5px; padding: 4px 10px; border-radius: 999px;
  background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; font-weight: 600;
}

/* Stacked layout — map on top, list below (founder direction 2026-08-13, replacing an
   earlier side-by-side layout: "แผนที่นอนอยู่บน แล้วลิสต์ลงมา"). One column always;
   the map is a fixed-ish band, the list flows underneath and grows with the page
   instead of being a clipped, internally-scrolling panel. */
.smap-map-wrap {
  position: relative;
  height: min(300px, 46vh);
  margin: 14px 16px 4px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #e4ded1;
}
.smap-map { position: absolute; inset: 0; }

/* Day tabs — only rendered by JS when a route's stops actually span > 1 day
   (route.stops.some day differs). "ทั้งหมด" (All) plus one pill per day found in the
   data; never a fixed Day-1..Day-7 range — the tab set always matches real stops. */
/* 2026-08-16 founder: "ออกดีไซจ์แทปให้สวยให้เป็นเหมือนแอประดับโลก ทั้งสำหรับมือถือและ
   pc" -- world-class app tab-bar pattern (Instagram/Twitter-style): a single-row,
   horizontally-scrollable strip on narrow screens (no wrap -> no awkward multi-row
   pill grid), hidden scrollbar, momentum scroll on iOS. Now needs to comfortably fit
   up to 6 pills (Day 1, Day 2, Muslim Info, Trip Fit, What to Expect, Prayer Times),
   so scroll instead of wrap is the only layout that stays clean at every width. Also
   fixes the founder's separate screenshot feedback: the tabs were flush against the
   header box above with no breathing room ("day 1 2 ควรมีระยะห่างไม่ใช่ติดกับกล่อง
   ด้านบน") -- 16px top padding gives real separation from smap-header's border-bottom. */
.smap-day-tabs {
  display: flex; gap: 8px; flex-wrap: nowrap;
  padding: 16px 16px 12px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* 2026-08-16 founder: "จำลองความง่ายในการใช้งานในมือถือ ถ้ากดแล้วข้อมูลไม่ห่างจากจุดที่กดมาก"
     -- sticky so the tab row (and whatever it controls) stays reachable while a visitor
     scrolls through a long route page, matching widget.js's scrollTabsIntoView() on every
     tab tap. scroll-margin-top keeps that scroll landing just below the sticky row itself. */
  position: sticky;
  top: 0;
  z-index: 6;
  background: #ffffff;
  scroll-margin-top: 8px;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.smap-day-tabs::-webkit-scrollbar { display: none; }
@media (min-width: 700px) {
  .smap-day-tabs { flex-wrap: wrap; overflow-x: visible; }
}

/* 2026-08-16: Route Info, moved here (under the day tabs) from its old standalone
   card on the route page -- see salamxp-map.php's docblock at this insertion point
   for the "why". Its own bordered section, not stacked flush against the tabs. */
/* 2026-08-16 founder correction: moved to sit directly under smap-header (which
   already has its own border-bottom -- no border-top needed here, would double
   the line) instead of under the tabs -- see salamxp-map.php's docblock at the
   insertion point for the "why" (Route Info is trip-wide, tab-independent). */
.smap-route-info {
  padding: 18px 24px 20px;
  border-bottom: 1px solid #e4ded1;
  background: #fdfcf9;
}
.smap-route-info-title {
  font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em;
  color: #4b6157; margin: 0 0 14px;
}
.smap-route-info-rows { display: flex; flex-direction: column; }
.smap-route-info-row {
  display: flex; align-items: flex-start; gap: 18px;
  padding: 11px 0;
  border-bottom: 1px solid #eee9dd;
}
.smap-route-info-row:first-child { padding-top: 0; }
.smap-route-info-row:last-child { border-bottom: none; padding-bottom: 0; }
.smap-route-info-label {
  flex: 0 0 138px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
  color: #7c8a80; text-transform: uppercase; padding-top: 1px;
}
.smap-route-info-value { flex: 1; font-size: 13.5px; line-height: 1.6; color: #14261f; }
@media (max-width: 480px) {
  .smap-route-info-row { flex-direction: column; gap: 4px; }
  .smap-route-info-label { flex: none; }
}
.smap-day-tab {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  flex: 0 0 auto;
  min-height: 40px; padding: 0 16px;
  font-size: 12.5px; font-weight: 700; white-space: nowrap;
  border: 1px solid #e4ded1; border-radius: 999px;
  background: #ffffff; color: #4b6157;
  cursor: pointer; scroll-snap-align: start;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.smap-day-tab:hover { border-color: #a7f3d0; }
.smap-day-tab:active { transform: scale(0.97); }
.smap-day-tab.active {
  background: linear-gradient(135deg, #34d399, #047857);
  color: #fff; border-color: transparent;
  box-shadow: 0 3px 10px rgba(4, 120, 87, 0.28);
}
/* "Muslim Info" / "Trip Fit" / "What to Expect" / "Prayer Times" -- same pill shape as
   the day tabs, distinguished only by their emoji icon, so the whole row reads as one
   coherent tab set rather than two visually different systems bolted together. */
.smap-view-tab { }

/* 2026-08-16 founder screenshot feedback: day pills replaced by a single dropdown so the
   tab row doesn't grow unbounded once more days exist ("ต่อไปจะมี Day 3 4 5 6 7") -- a
   native <select>, not a hand-rolled dropdown, so mobile gets the OS's own picker UI for
   free (no custom positioning/outside-click code to get wrong). Styled to sit in the same
   pill row as the other tabs, same height/shape, only the chevron marks it as a picker. */
.smap-day-select {
  flex: 0 0 auto;
  appearance: none;
  -webkit-appearance: none;
  min-height: 40px; padding: 0 34px 0 16px;
  font-size: 12.5px; font-weight: 700; font-family: inherit;
  border: 1px solid #e4ded1; border-radius: 999px;
  background: #ffffff
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234b6157' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")
    no-repeat right 14px center;
  color: #4b6157;
  cursor: pointer;
  scroll-snap-align: start;
}
.smap-day-select:hover { border-color: #a7f3d0; }
.smap-day-select:focus-visible { outline: 2px solid #34d399; outline-offset: 1px; }
.smap-day-tab-icon { font-size: 13px; line-height: 1; }

/* Server-rendered tab panels (Trip Fit / Managing Expectations / Prayer Times) --
   the existing salamxp-fields/salamxp-prayer-times card markup (Tailwind classes,
   already compiled sitewide) is reused as-is; this just gives it breathing room
   and a matching top border inside the widget's own card shell instead of looking
   like a second nested white box glued to the tab strip. */
.smap-tab-panel {
  padding: 16px;
  border-top: 1px solid #e4ded1;
  background: #fdfcf9;
}
.smap-tab-panel-inner > *:first-child { margin-top: 0; }

.smap-story { display: flex; flex-direction: column; padding: 4px 16px 8px; }

/* Flat list rows (icon-ish number · title+note · chevron), not individual boxed cards —
   matches the reference mockup's route-list style. */
.smap-stop-row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 4px;
  border-bottom: 1px solid #eee9dd;
  cursor: pointer;
  min-height: 44px;
  opacity: 0; transform: translateY(6px); animation: smap-rise 0.4s ease forwards;
  transition: background-color 0.15s ease;
}
.smap-stop-row:last-child { border-bottom: none; }
.smap-stop-row:hover { background: #fafdfb; }
.smap-stop-row.active { background: #ecfdf5; }

/* Real photo thumbnail per stop (founder request 2026-08-14, matching the theme's own
   "Route Journey" card reference: photo + "Stop N · Category" eyebrow + title + a two-line
   description snippet). Falls back to a tinted category-icon tile when a stop carries no
   `img` (not every future route dataset will have one) — never a broken-image icon. */
.smap-stop-thumb {
  flex: 0 0 auto; width: 60px; height: 60px; border-radius: 12px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.smap-stop-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.smap-stop-thumb-fallback { font-size: 22px; }

/* Category badge (Muslim Info panel rows only — the main story rows use the photo thumbnail
   above instead). Color/icon come from the stop's real `category` field via
   categoryMetaOf(); a light tint of the same color as the map pin. */
.smap-stop-cat-icon {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.smap-stop-body { flex: 1 1 auto; min-width: 0; }
.smap-stop-eyebrow {
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em;
  margin: 0 0 3px;
}
.smap-stop-title { font-size: 14.5px; font-weight: 800; margin: 0 0 3px; color: #14261f; }
.smap-stop-cat, .smap-stop-note {
  font-size: 12px; line-height: 1.4; color: #4b6157; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.smap-stop-desc {
  font-size: 12.5px; line-height: 1.4; color: #5b6b62; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Links to the stop's own origin Culture/Support Card page on this site, not
   Google Maps (founder correction 2026-08-14). `stopPropagation` in widget.js
   keeps a tap on this link from also triggering the row's own flyTo activation
   underneath it. */
.smap-stop-cardlink {
  display: inline-block; margin-top: 4px; font-size: 11.5px; font-weight: 700;
  color: #065f46; text-decoration: none;
}
.smap-stop-cardlink:hover { text-decoration: underline; }
.smap-stop-chevron {
  flex: 0 0 auto; width: 20px; height: 20px; color: #9ca69f;
}

/* Muslim Info/tab views — this widget is embedded inline in a page (not a
   full-screen app), so these stay in normal flow inside the card rather than
   `position: fixed` (which the standalone demo uses instead). The old bottom-nav
   (Map/Day/Muslim Info tabs, duplicating the top tab row) was removed 2026-08-16
   -- see widget.js/salamxp-map.php docblocks at the removal point. The "Plan this
   route" CTA + its toast (.smap-plan-cta/.smap-toast) were removed 2026-08-17,
   founder instruction -- premature until a real membership/save system exists. */

.smap-muslim-info { padding: 4px 16px 12px; }
.smap-minfo-summary { display: flex; gap: 8px; margin-bottom: 14px; }
.smap-minfo-stat {
  flex: 1 1 0; background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 12px;
  padding: 10px; text-align: center;
}
.smap-minfo-stat strong { display: block; font-size: 19px; color: #065f46; }
.smap-minfo-stat span { font-size: 11px; color: #4b6157; }
.smap-minfo-heading { font-size: 12px; font-weight: 800; margin: 14px 0 6px; color: #14261f; }
.smap-minfo-row { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-bottom: 1px solid #e4ded1; }
.smap-minfo-link { font-size: 11.5px; font-weight: 700; color: #065f46; white-space: nowrap; }
.smap-minfo-empty { font-size: 12.5px; color: #4b6157; padding: 4px 2px; }

/* 2026-08-16: condensed Facility Summary/Expectations, merged into the same Muslim Info tab
   (see salamxp-map.php's docblock at the insertion point) -- sits right below the Muslim Info
   stats above, same tab, own light divider so it still reads as a distinct sub-section. */
.smap-facility {
  padding: 14px 16px 4px;
  border-top: 1px solid #e4ded1;
  margin: 4px 16px 0;
}
.smap-facility-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.smap-facility-chip {
  font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
  background: #dcfce7; color: #15803d;
}
.smap-facility-chip--muted { background: #f3f1ea; color: #8b978f; }
.smap-facility-rows { display: flex; flex-direction: column; }
.smap-facility-row {
  display: flex; align-items: center; gap: 8px; padding: 7px 0;
  border-bottom: 1px solid #eee9dd;
}
.smap-facility-row:last-child { border-bottom: none; }
.smap-facility-row-icon {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
}
.smap-facility-row-title {
  flex: 1 1 auto; min-width: 0; font-size: 12px; font-weight: 700; color: #14261f;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.smap-facility-row-status { flex: 0 0 auto; font-size: 10.5px; font-weight: 700; text-align: right; }

/* Kept for the Leaflet popup only now (the story-list row no longer shows this link
   inline — tap the row to open the map popup, which carries the same link). */
.smap-stop-link {
  display: inline-flex; align-items: center; min-height: 44px; margin: -11px -6px -11px;
  padding: 11px 6px; font-size: 12.5px; font-weight: 700; color: #065f46; text-decoration: none;
}
.smap-stop-link:hover { text-decoration: underline; }

/* Leaflet's default zoom buttons are 26px — below the 44px touch-target floor. */
.smap-widget .leaflet-control-zoom a {
  width: 44px; height: 44px; line-height: 44px; font-size: 20px; border-radius: 12px;
}
.smap-widget .leaflet-control-zoom { border-radius: 12px; overflow: hidden; }

.smap-footer { padding: 10px 16px 16px; font-size: 10.5px; color: #4b6157; margin: 0; }

@keyframes smap-rise { to { opacity: 1; transform: translateY(0); } }

/* No marker popup anymore (founder request 2026-08-14: tapping a marker jumps
   straight to its card in the story list — see `gotoStopCard()` in widget.js — no
   intermediate popup/"View details" tap). Leaflet's own popup CSS is unused now;
   removed rather than left as dead style rules. */

/* Flat circular pins on the map itself (not a teardrop shape) — founder-requested pin
   style, matched from the reference mockup's numbered route markers. */
.smap-pin-circle {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(180deg, #34d399, #047857);
  border: 2.5px solid #ffffff;
  box-shadow: 0 2px 6px rgba(6, 95, 70, 0.35);
  color: #fff; font-size: 12.5px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  font-family: system-ui, -apple-system, sans-serif;
}

/* Break the widget out of the theme's generic content-section card shell — founder
   request 2026-08-14: "box route map ให้แยกจาก box อื่น ไม่ใช่อยู่ใน box ร่วม มีกล่องของ
   ตัวเองชัดเจน" (the Route Map box must be separate, not sharing a box with other
   content — it needs its own clear box). The theme's `salamxp-content-sections.php`
   mu-plugin wraps every heading-delimited chunk of post content in a generic
   `.rounded-2xl.border.border-slate-200.bg-white.shadow-soft.p-6` card with the source
   heading rendered inside it — so without this rule, `.smap-widget` (which already has
   its own distinct border/shadow/rounded corners) ends up nested inside a SECOND,
   redundant card shell: a box inside a box. `:has()` targets only the specific
   content-section card that contains this widget (the same utility classes are shared
   by many other unrelated cards on the page, e.g. the Overview card and every other
   content section — this selector does not touch those) and strips its chrome so only
   the widget's own box remains visible; the section's heading (redundant with the
   widget's own "salamxp-map · demo route" eyebrow + title) is hidden rather than shown
   twice. Degrades gracefully in a browser without `:has()` support: the widget still
   renders correctly, just nested one visual layer deeper. */
.rounded-2xl.border.border-slate-200.bg-white.shadow-soft:has(> .prose > .smap-widget) {
  border: none;
  box-shadow: none;
  background: transparent;
  padding: 0;
}
.rounded-2xl.border.border-slate-200.bg-white.shadow-soft:has(> .prose > .smap-widget) > h2 {
  display: none;
}
.rounded-2xl.border.border-slate-200.bg-white.shadow-soft:has(> .prose > .smap-widget) > .prose {
  margin: 0;
}

/* 2026-08-17 founder correction: "เอาแบบสีดำออกให้เป็นสีขาวแบบเดียวกันทั้งก่อนและตอนกด
   ไม่เอาแบบสีดำแนวตั้ง" -- the hover preview must look IDENTICAL to the click popup (white,
   horizontal row), not a separate dark vertical eyebrow/title box. widget.js now feeds this
   the exact same `popupInner` markup as the popup (.smap-marker-popup-thumb/-num/-title,
   styled elsewhere in this file, apply the same regardless of which container they're in) --
   this block only needs to make the tooltip's own OUTER chrome (background/shape/shadow)
   match `.smap-marker-popup-wrap .leaflet-popup-content-wrapper`'s white card look, laid out
   as the same flex row `.smap-marker-popup` itself uses. */
.smap-marker-tooltip.leaflet-tooltip {
  background: #ffffff;
  border: none;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(20, 38, 31, 0.22);
  max-width: 220px;
  white-space: normal;
  opacity: 1;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px 8px 8px;
}
.smap-marker-tooltip.leaflet-tooltip::before {
  border-top-color: #ffffff;
}

/* 2026-08-16 founder: "คลิกที่หมุดแล้วเซนเตอร์มาที่หมุดเลย และขึ้นกล่อง ที่มีรูปและ
   ข้อความที่เล็ก เหมาะกับมือถือ" -- click popup, distinct from the hover tooltip above:
   small photo + a couple lines of text, sized to stay comfortable on a phone screen
   (maxWidth 220 set in JS) rather than a full card. Overrides Leaflet's plain default
   popup chrome with this widget's own tokens/radius. */
.smap-marker-popup-wrap .leaflet-popup-content-wrapper {
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(20, 38, 31, 0.22);
}
.smap-marker-popup-wrap .leaflet-popup-content {
  margin: 0;
  width: auto !important;
}
.smap-marker-popup-wrap .leaflet-popup-tip {
  box-shadow: 0 2px 6px rgba(20, 38, 31, 0.15);
}
.smap-marker-popup-wrap a.leaflet-popup-close-button {
  /* 2026-08-17: was white+shadow for the old full-width photo header; the row layout has a
     plain white background now, so that combination would be unreadable -- back to a normal
     dark-on-light close glyph. Selector includes the `a` tag (Leaflet's own default rule is
     `.leaflet-container a.leaflet-popup-close-button`, which otherwise wins on specificity and
     silently makes this rule dead code -- confirmed by audit, fixed here). */
  color: #8b978f;
  padding: 4px 6px 0 0;
}
.smap-marker-popup-wrap a.leaflet-popup-close-button:hover { color: #14261f; }
/* 2026-08-17 founder redesign: "ทำเป็นแนวนอน เหลือแค่รูป เลข และชื่อ รูปให้อยู่ในโปรไฟล์
   วงกลมเล็ก เมื่อคลิกแล้ววิ่งไปหน้าการ์ด" -- horizontal row, circular thumb + number badge +
   name only, the whole thing a real link (an <a>, not a <div>) to the stop's own card page. */
.smap-marker-popup {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px 8px 8px;
  text-decoration: none;
  cursor: pointer;
}
.smap-marker-popup-thumb {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.smap-marker-popup-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.smap-marker-popup-thumb-num { font-size: 14px; font-weight: 800; }
.smap-marker-popup-num {
  flex: 0 0 auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  color: #fff; font-size: 10.5px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.smap-marker-popup-title {
  font-size: 12.5px; font-weight: 800; line-height: 1.3; color: #14261f;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}