<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>driving games for adults Archives - Tantrumming Trailblazers</title>
	<atom:link href="https://tantrummingtrailblazers.com/tag/driving-games-for-adults/feed/" rel="self" type="application/rss+xml" />
	<link>https://tantrummingtrailblazers.com/tag/driving-games-for-adults/</link>
	<description>Where Travel and Tantrums Collide in Epic Journeys!</description>
	<lastBuildDate>Sun, 29 Mar 2026 07:50:55 +0000</lastBuildDate>
	<language>en-GB</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9</generator>

<image>
	<url>https://tantrummingtrailblazers.com/wp-content/uploads/2024/06/cropped-DALL·E-2024-06-22-12.00.14-A-minimalist-logo-featuring-three-lines-and-three-colors.-The-design-includes-one-diagonal-line-from-the-bottom-left-to-the-top-right-in-bright-orange-32x32.webp</url>
	<title>driving games for adults Archives - Tantrumming Trailblazers</title>
	<link>https://tantrummingtrailblazers.com/tag/driving-games-for-adults/</link>
	<width>32</width>
	<height>32</height>
</image> 
<site xmlns="com-wordpress:feed-additions:1">229502464</site>	<item>
		<title>🚗 Free Family Road Trip Planner &#124; Make My Drive Fun &#124; Share Routes &#124; Tantrumming Trailblazers</title>
		<link>https://tantrummingtrailblazers.com/tools/make-my-drive-fun/</link>
					<comments>https://tantrummingtrailblazers.com/tools/make-my-drive-fun/#respond</comments>
		
		<dc:creator><![CDATA[Dennis]]></dc:creator>
		<pubDate>Fri, 20 Sep 2024 15:09:48 +0000</pubDate>
				<category><![CDATA[Tools]]></category>
		<category><![CDATA[apps for long drives]]></category>
		<category><![CDATA[car karaoke app]]></category>
		<category><![CDATA[driving games for adults]]></category>
		<category><![CDATA[fun driving apps]]></category>
		<category><![CDATA[make driving fun]]></category>
		<category><![CDATA[road trip entertainment]]></category>
		<guid isPermaLink="false">https://tantrummingtrailblazers.com/?p=1968</guid>

					<description><![CDATA[<p>live major update map-first route building family + EV ready free web app Make My Drive Fun Plan</p>
<p>The post <a href="https://tantrummingtrailblazers.com/tools/make-my-drive-fun/">🚗 Free Family Road Trip Planner | Make My Drive Fun | Share Routes | Tantrumming Trailblazers</a> appeared first on <a href="https://tantrummingtrailblazers.com">Tantrumming Trailblazers</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p><a class="a2a_button_facebook" href="https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Ftantrummingtrailblazers.com%2Ftools%2Fmake-my-drive-fun%2F&amp;linkname=%F0%9F%9A%97%20Free%20Family%20Road%20Trip%20Planner%20%7C%20Make%20My%20Drive%20Fun%20%7C%20Share%20Routes%20%7C%20Tantrumming%20Trailblazers" title="Facebook" rel="nofollow noopener" target="_blank"></a><a class="a2a_button_twitter" href="https://www.addtoany.com/add_to/twitter?linkurl=https%3A%2F%2Ftantrummingtrailblazers.com%2Ftools%2Fmake-my-drive-fun%2F&amp;linkname=%F0%9F%9A%97%20Free%20Family%20Road%20Trip%20Planner%20%7C%20Make%20My%20Drive%20Fun%20%7C%20Share%20Routes%20%7C%20Tantrumming%20Trailblazers" title="Twitter" rel="nofollow noopener" target="_blank"></a><a class="a2a_button_email" href="https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Ftantrummingtrailblazers.com%2Ftools%2Fmake-my-drive-fun%2F&amp;linkname=%F0%9F%9A%97%20Free%20Family%20Road%20Trip%20Planner%20%7C%20Make%20My%20Drive%20Fun%20%7C%20Share%20Routes%20%7C%20Tantrumming%20Trailblazers" title="Email" rel="nofollow noopener" target="_blank"></a><a class="a2a_dd addtoany_share_save addtoany_share" href="https://www.addtoany.com/share#url=https%3A%2F%2Ftantrummingtrailblazers.com%2Ftools%2Fmake-my-drive-fun%2F&#038;title=%F0%9F%9A%97%20Free%20Family%20Road%20Trip%20Planner%20%7C%20Make%20My%20Drive%20Fun%20%7C%20Share%20Routes%20%7C%20Tantrumming%20Trailblazers" data-a2a-url="https://tantrummingtrailblazers.com/tools/make-my-drive-fun/" data-a2a-title="&#x1f697; Free Family Road Trip Planner | Make My Drive Fun | Share Routes | Tantrumming Trailblazers"></a></p>
<div id="mmdf-widget-v7" data-url="https://tantrummingtrailblazers.com/tools/make-my-drive-fun/">
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "WebApplication",
    "name": "Make My Drive Fun",
    "url": "https://tantrummingtrailblazers.com/tools/make-my-drive-fun/",
    "applicationCategory": "TravelApplication",
    "operatingSystem": "Web",
    "description": "Free route-building tool for families, EV drivers and road-trippers. Find useful and fun stops along your actual route, add them with a tap, and build smarter journeys without the usual route-planning friction.",
    "isAccessibleForFree": true,
    "featureList": [
      "Map-first route building",
      "Always-visible route summary",
      "Quick filters and live stats",
      "Fullscreen map planning",
      "Nearby and favourites",
      "EV-friendly route support",
      "Shareable route plans",
      "Tap-to-build multi-stop journeys"
    ]
  }
  </script>

  <style>
    #mmdf-widget-v7,
    #mmdf-widget-v7 * {
      box-sizing: border-box;
    }

    #mmdf-widget-v7 {
      --m-bg: #ffffff;
      --m-bg-soft: #f8fafc;
      --m-bg-soft-2: #f1f5f9;
      --m-bg-soft-3: #eef4fb;
      --m-card: rgba(255,255,255,0.86);
      --m-card-strong: #ffffff;
      --m-text: #10213a;
      --m-text-soft: #52627a;
      --m-muted: #7a8ca3;
      --m-border: rgba(15, 23, 42, 0.09);
      --m-border-strong: rgba(15, 23, 42, 0.14);
      --m-blue: #2563eb;
      --m-blue-2: #1d4ed8;
      --m-cyan: #0891b2;
      --m-green: #10b981;
      --m-gold: #f59e0b;
      --m-pink: #9333ea;
      --m-shadow: 0 28px 65px rgba(15, 23, 42, 0.10);
      --m-shadow-soft: 0 14px 30px rgba(15, 23, 42, 0.06);
      --m-radius: 30px;
      --m-radius-lg: 24px;
      --m-radius-md: 18px;
      --m-radius-sm: 14px;

      max-width: 1180px;
      margin: 40px auto;
      position: relative;
      overflow: hidden;
      border-radius: var(--m-radius);
      background:
        radial-gradient(circle at 0% 0%, rgba(37,99,235,0.10), transparent 28%),
        radial-gradient(circle at 100% 10%, rgba(16,185,129,0.08), transparent 26%),
        radial-gradient(circle at 50% 100%, rgba(147,51,234,0.05), transparent 34%),
        linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
      border: 1px solid rgba(15, 23, 42, 0.08);
      box-shadow: var(--m-shadow);
      color: var(--m-text);
      font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    #mmdf-widget-v7::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.55), transparent 18%),
        repeating-linear-gradient(
          90deg,
          rgba(15,23,42,0.018) 0,
          rgba(15,23,42,0.018) 1px,
          transparent 1px,
          transparent 64px
        );
      mask-image: linear-gradient(180deg, rgba(0,0,0,0.95), rgba(0,0,0,0.18));
    }

    #mmdf-widget-v7 .m-shell {
      position: relative;
      z-index: 1;
      padding: 30px;
    }

    #mmdf-widget-v7 .m-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 14px;
      flex-wrap: wrap;
      margin-bottom: 24px;
    }

    #mmdf-widget-v7 .m-pill-row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    #mmdf-widget-v7 .m-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 38px;
      padding: 0 14px;
      border-radius: 999px;
      background: rgba(255,255,255,0.82);
      border: 1px solid rgba(15,23,42,0.08);
      color: var(--m-text-soft);
      font-size: 0.85rem;
      font-weight: 800;
      letter-spacing: -0.01em;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      white-space: nowrap;
      box-shadow: 0 6px 16px rgba(15,23,42,0.04);
    }

    #mmdf-widget-v7 .m-pill.live {
      color: #065f46;
      background: linear-gradient(135deg, rgba(16,185,129,.12), rgba(37,99,235,.08));
      border-color: rgba(16,185,129,.16);
    }

    #mmdf-widget-v7 .m-live-dot {
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: var(--m-green);
      box-shadow: 0 0 0 5px rgba(16,185,129,0.14);
      flex: 0 0 auto;
    }

    #mmdf-widget-v7 .m-hero {
      display: grid;
      grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
      gap: 26px;
      align-items: stretch;
    }

    #mmdf-widget-v7 .m-copy,
    #mmdf-widget-v7 .m-preview {
      min-width: 0;
    }

    #mmdf-widget-v7 .m-kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 16px;
      padding: 9px 14px;
      border-radius: 999px;
      background: rgba(37,99,235,0.08);
      border: 1px solid rgba(37,99,235,0.12);
      color: var(--m-blue);
      font-size: 0.86rem;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    #mmdf-widget-v7 h2 {
      margin: 0 0 16px;
      font-size: clamp(2.35rem, 5vw, 4.35rem);
      line-height: 0.94;
      letter-spacing: -0.065em;
      font-weight: 950;
      max-width: 760px;
      text-wrap: balance;
    }

    #mmdf-widget-v7 .m-gradient {
      background: linear-gradient(90deg, #10213a 0%, #2563eb 38%, #0891b2 70%, #10b981 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    #mmdf-widget-v7 .m-sub {
      margin: 0 0 18px;
      max-width: 720px;
      font-size: 1.08rem;
      line-height: 1.72;
      color: var(--m-text-soft);
      font-weight: 560;
    }

    #mmdf-widget-v7 .m-sub strong {
      color: var(--m-text);
      font-weight: 850;
    }

    #mmdf-widget-v7 .m-story {
      margin: 0 0 20px;
      padding: 18px;
      border-radius: 20px;
      background: linear-gradient(135deg, rgba(255,255,255,0.86), rgba(248,250,252,0.96));
      border: 1px solid rgba(15,23,42,0.08);
      box-shadow: var(--m-shadow-soft);
    }

    #mmdf-widget-v7 .m-story strong {
      display: block;
      margin-bottom: 8px;
      font-size: 1rem;
      color: var(--m-text);
      letter-spacing: -0.02em;
    }

    #mmdf-widget-v7 .m-story p {
      margin: 0;
      font-size: 0.98rem;
      line-height: 1.66;
      color: var(--m-text-soft);
      font-weight: 560;
    }

    #mmdf-widget-v7 .m-story p span {
      color: var(--m-text);
      font-weight: 850;
    }

    #mmdf-widget-v7 .m-points {
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      padding: 0;
      margin: 0 0 22px;
    }

    #mmdf-widget-v7 .m-points li {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 42px;
      padding: 0 14px;
      border-radius: 999px;
      background: rgba(255,255,255,0.92);
      border: 1px solid rgba(15,23,42,0.08);
      color: var(--m-text);
      font-size: 0.9rem;
      font-weight: 820;
      box-shadow: 0 6px 14px rgba(15,23,42,0.04);
      white-space: nowrap;
    }

    #mmdf-widget-v7 .m-points li strong {
      color: var(--m-cyan);
      font-weight: 900;
    }

    #mmdf-widget-v7 .m-cta-row {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin: 0 0 16px;
    }

    #mmdf-widget-v7 .m-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 54px;
      padding: 0 20px;
      border-radius: 16px;
      text-decoration: none;
      border: 1px solid transparent;
      font-size: 0.98rem;
      font-weight: 850;
      letter-spacing: -0.01em;
      cursor: pointer;
      transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
      white-space: nowrap;
    }

    #mmdf-widget-v7 .m-btn:hover {
      transform: translateY(-1px);
    }

    #mmdf-widget-v7 .m-btn-primary {
      background: linear-gradient(135deg, #2563eb, #1d4ed8);
      color: #fff;
      box-shadow: 0 18px 32px rgba(37,99,235,0.24);
    }

    #mmdf-widget-v7 .m-btn-primary:hover {
      box-shadow: 0 22px 38px rgba(37,99,235,0.30);
    }

    #mmdf-widget-v7 .m-btn-secondary {
      background: rgba(255,255,255,0.92);
      color: var(--m-text);
      border-color: rgba(15,23,42,0.10);
    }

    #mmdf-widget-v7 .m-btn-secondary:hover {
      background: var(--m-bg-soft);
      border-color: rgba(15,23,42,0.14);
    }

    #mmdf-widget-v7 .m-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      color: var(--m-muted);
      font-size: 0.92rem;
      font-weight: 700;
    }

    #mmdf-widget-v7 .m-meta span {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      white-space: nowrap;
    }

    #mmdf-widget-v7 .m-preview {
      display: flex;
      flex-direction: column;
      gap: 14px;
      min-height: 100%;
      padding: 16px;
      border-radius: 28px;
      background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(248,251,255,0.96));
      border: 1px solid rgba(15,23,42,0.08);
      box-shadow: var(--m-shadow-soft);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      position: relative;
      overflow: hidden;
    }

    #mmdf-widget-v7 .m-preview::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        radial-gradient(circle at 80% 0%, rgba(37,99,235,0.08), transparent 22%),
        radial-gradient(circle at 0% 100%, rgba(16,185,129,0.08), transparent 22%);
    }

    #mmdf-widget-v7 .m-preview > * {
      position: relative;
      z-index: 1;
    }

    #mmdf-widget-v7 .m-preview-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }

    #mmdf-widget-v7 .m-app-badge {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-size: 0.86rem;
      font-weight: 840;
      color: var(--m-text-soft);
    }

    #mmdf-widget-v7 .m-app-badge-icon {
      width: 34px;
      height: 34px;
      border-radius: 12px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, rgba(37,99,235,0.10), rgba(8,145,178,0.08));
      border: 1px solid rgba(37,99,235,0.10);
      color: var(--m-blue);
    }

    #mmdf-widget-v7 .m-full {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 34px;
      padding: 0 12px;
      border-radius: 999px;
      background: rgba(16,185,129,0.10);
      border: 1px solid rgba(16,185,129,0.14);
      color: #047857;
      font-size: 0.82rem;
      font-weight: 840;
      white-space: nowrap;
    }

    #mmdf-widget-v7 .m-route-summary,
    #mmdf-widget-v7 .m-tool-card {
      background: rgba(255,255,255,0.96);
      border: 1px solid rgba(15,23,42,0.08);
      border-radius: 20px;
      box-shadow: 0 8px 20px rgba(15,23,42,0.04);
    }

    #mmdf-widget-v7 .m-route-summary {
      padding: 16px;
    }

    #mmdf-widget-v7 .m-route-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      margin-bottom: 12px;
      flex-wrap: wrap;
    }

    #mmdf-widget-v7 .m-route-title strong {
      font-size: 1rem;
      letter-spacing: -0.02em;
      color: var(--m-text);
    }

    #mmdf-widget-v7 .m-status {
      padding: 6px 10px;
      border-radius: 999px;
      background: rgba(37,99,235,0.08);
      border: 1px solid rgba(37,99,235,0.10);
      color: var(--m-blue);
      font-size: 0.78rem;
      font-weight: 820;
      white-space: nowrap;
    }

    #mmdf-widget-v7 .m-route-row {
      display: grid;
      grid-template-columns: 18px 1fr;
      gap: 10px;
      align-items: start;
    }

    #mmdf-widget-v7 .m-route-row + .m-route-row {
      margin-top: 10px;
    }

    #mmdf-widget-v7 .m-dot {
      width: 12px;
      height: 12px;
      margin-top: 4px;
      border-radius: 999px;
      background: var(--m-blue);
      box-shadow: 0 0 0 5px rgba(37,99,235,0.12);
    }

    #mmdf-widget-v7 .m-dot.mid {
      background: var(--m-gold);
      box-shadow: 0 0 0 5px rgba(245,158,11,0.12);
    }

    #mmdf-widget-v7 .m-dot.end {
      background: var(--m-green);
      box-shadow: 0 0 0 5px rgba(16,185,129,0.12);
    }

    #mmdf-widget-v7 .m-label {
      margin-bottom: 2px;
      font-size: 0.74rem;
      text-transform: uppercase;
      letter-spacing: 0.10em;
      color: var(--m-muted);
      font-weight: 820;
    }

    #mmdf-widget-v7 .m-value {
      font-size: 0.96rem;
      font-weight: 840;
      color: var(--m-text);
    }

    #mmdf-widget-v7 .m-filter-strip {
      border: 1px solid rgba(16,185,129,0.16);
      background: linear-gradient(135deg, rgba(16,185,129,0.10), rgba(37,99,235,0.05));
      border-radius: 20px;
      padding: 14px;
      overflow: hidden;
      position: relative;
    }

    #mmdf-widget-v7 .m-filter-strip::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 20px;
      pointer-events: none;
      box-shadow: inset 0 0 0 1px rgba(16,185,129,0.05);
    }

    #mmdf-widget-v7 .m-filter-title {
      margin-bottom: 10px;
      font-size: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 0.10em;
      color: #059669;
      font-weight: 900;
    }

    #mmdf-widget-v7 .m-filter-chips,
    #mmdf-widget-v7 .m-map-stats,
    #mmdf-widget-v7 .m-mini-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    #mmdf-widget-v7 .m-chip,
    #mmdf-widget-v7 .m-stat,
    #mmdf-widget-v7 .m-mini {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 36px;
      padding: 0 12px;
      border-radius: 999px;
      white-space: nowrap;
      font-size: 0.83rem;
      font-weight: 820;
    }

    #mmdf-widget-v7 .m-chip {
      background: rgba(255,255,255,0.94);
      border: 1px solid rgba(15,23,42,0.08);
      color: var(--m-text);
    }

    #mmdf-widget-v7 .m-chip.active {
      background: linear-gradient(135deg, #2563eb, #1d4ed8);
      border-color: transparent;
      color: #fff;
      box-shadow: 0 14px 26px rgba(37,99,235,0.18);
    }

    #mmdf-widget-v7 .m-stat {
      background: rgba(255,255,255,0.94);
      border: 1px solid rgba(15,23,42,0.08);
      color: var(--m-text);
    }

    #mmdf-widget-v7 .m-stat.ev {
      background: rgba(16,185,129,0.08);
      border-color: rgba(16,185,129,0.12);
      color: #047857;
    }

    #mmdf-widget-v7 .m-tool-card {
      padding: 16px;
    }

    #mmdf-widget-v7 .m-tool-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 10px;
    }

    #mmdf-widget-v7 .m-tool-head strong {
      display: block;
      margin-bottom: 6px;
      font-size: 1rem;
      letter-spacing: -0.02em;
      color: var(--m-text);
    }

    #mmdf-widget-v7 .m-tool-head p {
      margin: 0;
      font-size: 0.85rem;
      line-height: 1.55;
      color: var(--m-text-soft);
      font-weight: 560;
    }

    #mmdf-widget-v7 .m-rank {
      flex: 0 0 auto;
      min-width: 34px;
      height: 34px;
      border-radius: 12px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(245,158,11,0.10);
      border: 1px solid rgba(245,158,11,0.14);
      color: #b45309;
      font-size: 0.9rem;
      font-weight: 900;
    }

    #mmdf-widget-v7 .m-mini {
      background: rgba(255,255,255,0.94);
      border: 1px solid rgba(15,23,42,0.08);
      color: var(--m-text);
      text-decoration: none;
      transition: background .16s ease, transform .16s ease, border-color .16s ease;
    }

    #mmdf-widget-v7 .m-mini:hover {
      transform: translateY(-1px);
      background: var(--m-bg-soft);
      border-color: rgba(15,23,42,0.12);
    }

    #mmdf-widget-v7 .m-mini.primary {
      background: rgba(37,99,235,0.08);
      border-color: rgba(37,99,235,0.12);
      color: var(--m-blue);
    }

    #mmdf-widget-v7 .m-mini.gold {
      background: rgba(245,158,11,0.08);
      border-color: rgba(245,158,11,0.12);
      color: #b45309;
    }

    #mmdf-widget-v7 .m-mini.green {
      background: rgba(16,185,129,0.08);
      border-color: rgba(16,185,129,0.12);
      color: #047857;
    }

    #mmdf-widget-v7 .m-lower {
      margin-top: 24px;
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
      gap: 18px;
    }

    #mmdf-widget-v7 .m-panel {
      padding: 18px;
      border-radius: 24px;
      background: rgba(255,255,255,0.82);
      border: 1px solid rgba(15,23,42,0.08);
      box-shadow: var(--m-shadow-soft);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    #mmdf-widget-v7 .m-panel-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      margin-bottom: 14px;
      flex-wrap: wrap;
    }

    #mmdf-widget-v7 .m-panel-head strong {
      font-size: 1rem;
      letter-spacing: -0.02em;
      color: var(--m-text);
    }

    #mmdf-widget-v7 .m-tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 32px;
      padding: 0 12px;
      border-radius: 999px;
      background: rgba(37,99,235,0.08);
      border: 1px solid rgba(37,99,235,0.10);
      color: var(--m-blue);
      font-size: 0.8rem;
      font-weight: 820;
      white-space: nowrap;
    }

    #mmdf-widget-v7 .m-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    #mmdf-widget-v7 .m-note {
      padding: 14px;
      border-radius: 18px;
      background: rgba(255,255,255,0.96);
      border: 1px solid rgba(15,23,42,0.08);
    }

    #mmdf-widget-v7 .m-note strong {
      display: block;
      margin-bottom: 6px;
      font-size: 0.92rem;
      letter-spacing: -0.01em;
    }

    #mmdf-widget-v7 .m-note p {
      margin: 0;
      font-size: 0.84rem;
      line-height: 1.55;
      color: var(--m-text-soft);
      font-weight: 550;
    }

    #mmdf-widget-v7 .m-note.blue strong { color: var(--m-blue); }
    #mmdf-widget-v7 .m-note.green strong { color: var(--m-green); }
    #mmdf-widget-v7 .m-note.gold strong { color: var(--m-gold); }
    #mmdf-widget-v7 .m-note.pink strong { color: var(--m-pink); }

    #mmdf-widget-v7 .m-bottom-copy {
      margin-bottom: 14px;
      font-size: 0.95rem;
      line-height: 1.65;
      color: var(--m-text-soft);
      font-weight: 560;
    }

    #mmdf-widget-v7 .m-bottom-copy strong {
      color: var(--m-text);
      font-weight: 840;
    }

    #mmdf-widget-v7 .m-share-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 14px;
    }

    #mmdf-widget-v7 .m-share {
      appearance: none;
      border: 1px solid rgba(15,23,42,0.08);
      background: rgba(255,255,255,0.96);
      color: var(--m-text);
      border-radius: 14px;
      padding: 10px 14px;
      font: inherit;
      font-size: 0.9rem;
      font-weight: 820;
      cursor: pointer;
      transition: background .16s ease, border-color .16s ease, transform .16s ease;
      white-space: nowrap;
    }

    #mmdf-widget-v7 .m-share:hover {
      background: var(--m-bg-soft);
      border-color: rgba(15,23,42,0.12);
      transform: translateY(-1px);
    }

    #mmdf-widget-v7 .m-support {
      padding: 16px;
      border-radius: 18px;
      background: linear-gradient(135deg, rgba(245,158,11,0.08), rgba(255,255,255,0.95));
      border: 1px solid rgba(245,158,11,0.12);
    }

    #mmdf-widget-v7 .m-support strong {
      display: block;
      margin-bottom: 6px;
      font-size: 0.95rem;
      color: var(--m-text);
      letter-spacing: -0.02em;
    }

    #mmdf-widget-v7 .m-support p {
      margin: 0 0 12px;
      font-size: 0.88rem;
      line-height: 1.6;
      color: var(--m-text-soft);
      font-weight: 560;
    }

    #mmdf-widget-v7 .m-support a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 42px;
      padding: 0 14px;
      border-radius: 14px;
      background: rgba(255,255,255,0.96);
      border: 1px solid rgba(15,23,42,0.10);
      color: var(--m-text);
      text-decoration: none;
      font-size: 0.88rem;
      font-weight: 850;
      transition: background .16s ease, border-color .16s ease, transform .16s ease;
    }

    #mmdf-widget-v7 .m-support a:hover {
      transform: translateY(-1px);
      background: var(--m-bg-soft);
      border-color: rgba(15,23,42,0.14);
    }

    #mmdf-widget-v7 .m-toast {
      position: fixed;
      left: 50%;
      bottom: 24px;
      transform: translateX(-50%) translateY(20px);
      background: #10213a;
      color: #fff;
      border: 1px solid rgba(255,255,255,0.12);
      padding: 12px 16px;
      border-radius: 14px;
      font-size: 0.92rem;
      font-weight: 820;
      box-shadow: 0 16px 34px rgba(15,23,42,0.20);
      opacity: 0;
      visibility: hidden;
      transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
      z-index: 9999;
      white-space: nowrap;
    }

    #mmdf-widget-v7 .m-toast.show {
      opacity: 1;
      visibility: visible;
      transform: translateX(-50%) translateY(0);
    }

    @media (max-width: 1020px) {
      #mmdf-widget-v7 .m-hero,
      #mmdf-widget-v7 .m-lower {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 760px) {
      #mmdf-widget-v7 {
        margin: 22px auto;
        border-radius: 24px;
      }

      #mmdf-widget-v7 .m-shell {
        padding: 18px;
      }

      #mmdf-widget-v7 h2 {
        font-size: clamp(2rem, 10vw, 3rem);
      }

      #mmdf-widget-v7 .m-cta-row {
        flex-direction: column;
      }

      #mmdf-widget-v7 .m-btn {
        width: 100%;
      }

      #mmdf-widget-v7 .m-grid {
        grid-template-columns: 1fr;
      }

      #mmdf-widget-v7 .m-share {
        flex: 1 1 calc(50% - 8px);
        text-align: center;
      }
    }
  </style>

  <div class="m-shell">
    <div class="m-top">
      <div class="m-pill-row">
        <span class="m-pill live"><span class="m-live-dot"></span> live major update</span>
        <span class="m-pill">map-first route building</span>
        <span class="m-pill">family + EV ready</span>
      </div>

      <div class="m-pill-row">
        <span class="m-pill">free web app</span>
      </div>
    </div>

    <div class="m-hero">
      <div class="m-copy">
        <div class="m-kicker">Make My Drive Fun</div>

        <h2>
          Plan the drive,
          <span class="m-gradient">not just the destination.</span>
        </h2>

        <p class="m-sub">
          Set your <strong>start and end</strong>, then tap food, parks, toilets, EV stops and useful places
          directly on the map. They drop straight into your route so you can build a proper journey without breaking your flow.
        </p>

        <div class="m-story">
          <strong>The best bit is how it feels</strong>
          <p>
            This is not just another route search box. <span>Tap something on the route, it becomes stop 3, 4, 5 and beyond.</span>
            Then hit go and the whole journey comes together.
          </p>
        </div>

        <ul class="m-points">
          <li><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f9ed.png" alt="🧭" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>tap-to-build</strong> planning</li>
          <li><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f4cd.png" alt="📍" class="wp-smiley" style="height: 1em; max-height: 1em;" /> multi-stop journeys</li>
          <li><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/26a1.png" alt="⚡" class="wp-smiley" style="height: 1em; max-height: 1em;" /> EV-friendly routing</li>
          <li><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f4be.png" alt="💾" class="wp-smiley" style="height: 1em; max-height: 1em;" /> save, nearby, share</li>
        </ul>

        <div class="m-cta-row">
          <a class="m-btn m-btn-primary" href="#mmdf-tool-jump-after-v7">Jump to tool ↓</a>
          <a class="m-btn m-btn-secondary" href="#mmdf-widget-v7-whatsnew">What’s new</a>
        </div>

        <div class="m-meta">
          <span><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/2714.png" alt="✔" class="wp-smiley" style="height: 1em; max-height: 1em;" /> real route building</span>
          <span><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/2714.png" alt="✔" class="wp-smiley" style="height: 1em; max-height: 1em;" /> cleaner mobile experience</span>
          <span><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/2714.png" alt="✔" class="wp-smiley" style="height: 1em; max-height: 1em;" /> better map flow</span>
        </div>
      </div>

      <div class="m-preview">
        <div class="m-preview-top">
          <div class="m-app-badge">
            <span class="m-app-badge-icon"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f5fa.png" alt="🗺" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span>
            Live planning preview
          </div>
          <div class="m-full"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/26a1.png" alt="⚡" class="wp-smiley" style="height: 1em; max-height: 1em;" /> EV mode</div>
        </div>

        <div class="m-route-summary">
          <div class="m-route-title">
            <strong>Route summary</strong>
            <span class="m-status">always visible</span>
          </div>

          <div class="m-route-row">
            <div class="m-dot"></div>
            <div>
              <div class="m-label">Start</div>
              <div class="m-value">Current location</div>
            </div>
          </div>

          <div class="m-route-row">
            <div class="m-dot mid"></div>
            <div>
              <div class="m-label">Stop 3</div>
              <div class="m-value">Food + play stop</div>
            </div>
          </div>

          <div class="m-route-row">
            <div class="m-dot end"></div>
            <div>
              <div class="m-label">Finish</div>
              <div class="m-value">Final destination</div>
            </div>
          </div>
        </div>

        <div class="m-filter-strip">
          <div class="m-filter-title">Quick filters</div>
          <div class="m-filter-chips">
            <span class="m-chip active">Food</span>
            <span class="m-chip">Toilets</span>
            <span class="m-chip">Parks</span>
            <span class="m-chip">EV</span>
          </div>
        </div>

        <div class="m-map-stats">
          <span class="m-stat"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f4cf.png" alt="📏" class="wp-smiley" style="height: 1em; max-height: 1em;" /> 218 km</span>
          <span class="m-stat"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/23f1.png" alt="⏱" class="wp-smiley" style="height: 1em; max-height: 1em;" /> 3h 14m</span>
          <span class="m-stat"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f4cd.png" alt="📍" class="wp-smiley" style="height: 1em; max-height: 1em;" /> 26 places</span>
          <span class="m-stat ev"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/26a1.png" alt="⚡" class="wp-smiley" style="height: 1em; max-height: 1em;" /> charger-aware</span>
        </div>

        <div class="m-tool-card">
          <div class="m-tool-head">
            <div>
              <strong>Every stop is actionable</strong>
              <p>Add it to the route, save it, check nearby, or hand it off to Google Maps or Waze when you are ready.</p>
            </div>
            <div class="m-rank">4</div>
          </div>

          <div class="m-mini-actions">
            <span class="m-mini primary">Add stop</span>
            <span class="m-mini gold">Save</span>
            <span class="m-mini green">Nearby</span>
            <span class="m-mini">Google Maps</span>
            <span class="m-mini">Waze</span>
          </div>
        </div>
      </div>
    </div>

    <div class="m-lower">
      <div class="m-panel" id="mmdf-widget-v7-whatsnew">
        <div class="m-panel-head">
          <strong>What’s new in this update</strong>
          <span class="m-tag">cleaner, smarter, faster</span>
        </div>

        <div class="m-grid">
          <div class="m-note blue">
            <strong>Cleaner visual system</strong>
            <p>A more premium, light modern layout with better spacing, hierarchy and scanability.</p>
          </div>

          <div class="m-note green">
            <strong>Always-on route context</strong>
            <p>Filters, route summary and key stats stay visible so users can plan without losing their place.</p>
          </div>

          <div class="m-note gold">
            <strong>Better stop flow</strong>
            <p>The route, favourite and nearby interactions feel more natural and better matched to how people actually plan journeys.</p>
          </div>

          <div class="m-note pink">
            <strong>Stronger mobile feel</strong>
            <p>The whole block now feels closer to a polished app surface while staying fast and web-friendly.</p>
          </div>
        </div>
      </div>

      <div class="m-panel">
        <div class="m-panel-head">
          <strong>Share it or support it</strong>
          <span class="m-tag">built to be useful</span>
        </div>

        <div class="m-bottom-copy">
          Build a route, save the good stops, and share the exact journey. If this tool genuinely helped, you can also support ongoing updates and server costs.
        </div>

        <div class="m-share-row">
          <button class="m-share" type="button" data-share="native">Share</button>
          <button class="m-share" type="button" data-share="whatsapp">WhatsApp</button>
          <button class="m-share" type="button" data-share="x">X</button>
          <button class="m-share" type="button" data-share="copy">Copy Link</button>
        </div>

        <div class="m-support">
          <strong>Found it useful?</strong>
          <p>If this tool helped, a coffee helps cover server costs and future improvements.</p>
     <center>  <a href="https://www.buymeacoffee.com/makemydrivefun"><img decoding="async" src="https://img.buymeacoffee.com/button-api/?text=Buy me a coffee&#038;emoji=&#x2615;&#038;slug=makemydrivefun&#038;button_colour=FFDD00&#038;font_colour=000000&#038;font_family=Cookie&#038;outline_colour=000000&#038;coffee_colour=ffffff" /></center></a>
        </div>
      </div>
    </div>
  </div>

  <div class="m-toast" aria-live="polite"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/2705.png" alt="✅" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Link copied</div>

  <script>
    (function () {
      const root = document.getElementById('mmdf-widget-v7');
      if (!root) return;

      const url = root.getAttribute('data-url') || window.location.href;
      const shareTitle = 'Make My Drive Fun';
      const shareText = 'Plan the drive, not just the destination. Build smarter routes with useful and fun stops directly on the map.';
      const toast = root.querySelector('.m-toast');

      function showToast(message) {
        if (!toast) return;
        toast.textContent = message;
        toast.classList.add('show');
        window.clearTimeout(showToast._timer);
        showToast._timer = window.setTimeout(function () {
          toast.classList.remove('show');
        }, 1800);
      }

      async function copyLink() {
        try {
          if (navigator.clipboard && navigator.clipboard.writeText) {
            await navigator.clipboard.writeText(url);
            showToast('&#x2705; Link copied');
            return;
          }

          const input = document.createElement('input');
          input.value = url;
          document.body.appendChild(input);
          input.select();
          document.execCommand('copy');
          document.body.removeChild(input);
          showToast('&#x2705; Link copied');
        } catch (err) {
          showToast('Could not copy link');
        }
      }

      async function nativeShare() {
        if (navigator.share) {
          try {
            await navigator.share({
              title: shareTitle,
              text: shareText,
              url: url
            });
          } catch (err) {}
          return;
        }
        copyLink();
      }

      function popup(link) {
        window.open(link, '_blank', 'noopener,noreferrer');
      }

      root.querySelectorAll('[data-share]').forEach(function (btn) {
        btn.addEventListener('click', function () {
          const type = btn.getAttribute('data-share');
          const encodedUrl = encodeURIComponent(url);
          const encodedText = encodeURIComponent(shareText + ' ' + url);

          if (type === 'native') {
            nativeShare();
            return;
          }

          if (type === 'copy') {
            copyLink();
            return;
          }

          if (type === 'whatsapp') {
            popup('https://wa.me/?text=' + encodedText);
            return;
          }

          if (type === 'x') {
            popup('https://twitter.com/intent/tweet?url=' + encodedUrl + '&text=' + encodeURIComponent(shareText));
          }
        });
      });

      root.querySelectorAll('a[href^="#"]').forEach(function (anchor) {
        anchor.addEventListener('click', function (event) {
          const targetId = anchor.getAttribute('href');
          if (!targetId || targetId === '#') return;

          const target = document.querySelector(targetId);
          if (!target) return;

          event.preventDefault();
          target.scrollIntoView({
            behavior: 'smooth',
            block: 'start'
          });
        });
      });
    })();
  </script>
</div>

<div id="mmdf-tool-jump-after-v7" style="height:1px; scroll-margin-top:24px;" aria-hidden="true"></div>



<p class="has-black-color has-text-color has-link-color wp-elements-b1cf9304db7209732c538f321697eddf"><br><div class="ttb-map-inline" style="width:100%;"><!DOCTYPE html>
<html lang="en">
<head><base href="https://tantrummingtrailblazers.com/wp-content/plugins/make%20drive%20fun2//">
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
  <title>Fun Route Planner – Tantrumming Trailblazers</title>

  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.css" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet.markercluster@1.5.3/dist/MarkerCluster.css" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet.markercluster@1.5.3/dist/MarkerCluster.Default.css" />
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />

  <style>
    :root {
      color-scheme: light;
      --color-primary: #2563eb;
      --color-primary-dark: #1d4ed8;
      --color-accent-emerald: #059669;
      --color-accent-violet: #7c3aed;
      --color-bg-dark: #f1f5f9;
      --color-bg-darker: #e8edf3;
      --color-bg-card: #ffffff;
      --color-bg-card-hover: #f8fafc;
      --color-text-primary: #1e293b;
      --color-text-secondary: #475569;
      --color-text-muted: #94a3b8;
      --color-border: rgba(30,41,59,.12);
      --color-border-light: rgba(30,41,59,.06);
      --shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
      --shadow-md: 0 4px 12px rgba(0,0,0,.07);
      --shadow-lg: 0 12px 40px rgba(0,0,0,.08);
      --shadow-xl: 0 20px 60px rgba(0,0,0,.1);
      --blur-sm: 12px;
      --blur-md: 24px;
    }

    [v-cloak] { display: none; }

    html, body {
      min-height: 100%;
      margin: 0;
      padding: 0;
      background:
        radial-gradient(circle at 10% 0%, rgba(37,99,235,.04), transparent 35%),
        radial-gradient(circle at 90% 100%, rgba(124,58,237,.03), transparent 35%),
        linear-gradient(180deg, #f1f5f9 0%, #e8edf3 50%, #e2e8f0 100%);
      background-attachment: fixed;
    }

    body {
      color: var(--color-text-primary);
      overflow-x: hidden;
    }

    #app-wrapper {
      font-family: 'Inter', sans-serif;
      background: transparent;
      color: var(--color-text-primary);
      /* Reset body text colour for dark panels */
      min-height: 100vh;
      width: 100%;
      position: relative;
      touch-action: manipulation;
      padding: 18px 0 24px;
    }

    .app-shell {
      position: relative;
      border: 1px solid rgba(30,41,59,.08);
      border-radius: 32px;
      padding: 16px;
      box-shadow:
        0 4px 24px rgba(0,0,0,.06),
        0 12px 48px rgba(0,0,0,.04);
      background: rgba(255,255,255,.5);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      overflow: hidden;
    }

    @media (max-width: 1024px) {
      .app-shell {
        position: relative;
        z-index: 50;
        border-radius: 0;
        padding: 0;
        border: none;
        box-shadow: none;
        background: transparent;
        backdrop-filter: none;
      }
    }

    .app-shell.is-full {
      position: fixed;
      inset: 0;
      z-index: 9999;
      background: #f1f5f9;
      padding: 1rem;
      overflow: auto;
      border: none;
      border-radius: 0;
      box-shadow: none;
    }

    .app-shell.is-full .container {
      max-width: none !important;
      width: 100% !important;
      margin: 0 !important;
    }

    .app-shell.is-full #map {
      height: calc(100vh - 3rem);
    }

    /* Bottom Sheet Pattern for Mobile */
    .left-menu {
      max-width: 560px;
      background: linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(241,245,249,.92) 100%);
      border: 1px solid var(--color-border);
      border-top: 1px solid rgba(30,41,59,.06);
      border-radius: 28px;
      box-shadow:
        0 30px 80px rgba(0,0,0,.08),
        inset 0 1px 0 rgba(255,255,255,.6);
      padding: 26px;
      backdrop-filter: blur(var(--blur-md));
      -webkit-backdrop-filter: blur(var(--blur-md));
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      max-height: calc(100vh - 4rem);
      overflow-y: auto;
      scrollbar-width: thin;
      scrollbar-color: rgba(59,130,246,.2) transparent;
    }
    .left-menu::-webkit-scrollbar { width: 5px; }
    .left-menu::-webkit-scrollbar-thumb { background: rgba(59,130,246,.2); border-radius: 4px; }
    .left-menu::-webkit-scrollbar-track { background: transparent; }

    /* Hide bottom sheet handle on desktop */
    .bottom-sheet-handle {
      display: none;
    }

    @media (max-width: 1024px) {
      .left-menu {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        max-width: none;
        max-height: 70vh;
        border-radius: 32px 32px 0 0;
        padding: 0;
        z-index: 1000;
        transform: translateY(0);
        overflow: hidden;
        transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
      }

      .left-menu.bottom-sheet-collapsed {
        max-height: 72px;
        box-shadow: 0 -4px 24px rgba(0,0,0,.18);
        overflow: visible;
        pointer-events: auto;
        border-radius: 20px 20px 0 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
      }
      .left-menu.bottom-sheet-collapsed .bottom-sheet-handle {
        background: linear-gradient(135deg, #3b82f6, #2563eb);
        height: 64px;
        border-radius: 20px 20px 0 0;
        padding-bottom: env(safe-area-inset-bottom, 8px);
      }
      .left-menu.bottom-sheet-collapsed .bottom-sheet-handle-bar {
        background: rgba(255,255,255,.5);
        width: 40px;
      }
      .left-menu.bottom-sheet-collapsed .bottom-sheet-label {
        color: #fff;
        font-size: 14px;
        letter-spacing: 0.5px;
        font-weight: 700;
      }

      .bottom-sheet-handle {
        height: 48px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        cursor: pointer;
        padding: 0 16px;
        border-bottom: 1px solid var(--color-border);
        background: linear-gradient(180deg, rgba(248,250,252,.98) 0%, rgba(255,255,255,.95) 100%);
        border-radius: 32px 32px 0 0;
        position: relative;
        z-index: 10;
        -webkit-tap-highlight-color: rgba(59,130,246,.15);
        touch-action: manipulation;
        user-select: none;
        -webkit-user-select: none;
      }

      .bottom-sheet-handle:active {
        cursor: grabbing;
      }

      .bottom-sheet-handle-bar {
        width: 36px;
        height: 4px;
        background: rgba(96,165,250,.45);
        border-radius: 999px;
      }

      .bottom-sheet-label {
        font-size: 11px;
        font-weight: 700;
        color: rgba(96,165,250,.7);
        text-transform: uppercase;
        letter-spacing: 1.5px;
      }

      .bottom-sheet-content {
        overflow-y: auto;
        max-height: calc(70vh - 88px);
        padding: 26px;
      }
    }


    #map {
      height: calc(100vh - 4rem);
      min-height: 560px;
      background: var(--color-bg-darker);
      border-radius: 28px;
      border: 1px solid var(--color-border);
      box-shadow: var(--shadow-lg);
      touch-action: none;
      overflow: hidden;
      position: relative;
    }

    @media (max-width: 1024px) {
      #map {
        height: calc(100vh - 88px);
        min-height: auto;
        border-radius: 0;
      }
    }

    @media (max-width: 640px) {
      #map {
        height: calc(100vh - 88px);
        min-height: auto;
      }
    }

    /* Map Empty State Overlay */
    .map-overlay-instruction {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0,0,0,.25);
      backdrop-filter: blur(4px);
      z-index: 10;
      border-radius: 28px;
      pointer-events: none;
    }

    .map-overlay-instruction.hidden {
      display: none;
    }

    .map-overlay-text {
      text-align: center;
      color: rgba(255,255,255,.85);
      font-size: 16px;
      text-shadow: 0 1px 4px rgba(0,0,0,.3);
      letter-spacing: 0.5px;
    }

    /* Map tool button (top-right overlay) */
    /* Map toolbar row — top-right overlay */
    .map-toolbar-row {
      position: absolute;
      top: 12px;
      right: 12px;
      z-index: 999;
      display: flex;
      gap: 6px;
    }
    .map-tool-btn {
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 8px 12px;
      background: rgba(241,245,249,.92);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(148,163,184,.18);
      border-radius: 10px;
      color: var(--color-text-secondary);
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: all .2s;
      box-shadow: 0 4px 16px rgba(0,0,0,.08);
      white-space: nowrap;
    }
    .map-tool-btn:hover {
      border-color: rgba(96,165,250,.4);
      background: rgba(241,245,249,.95);
      color: #2563eb;
    }
    .map-tool-btn-active {
      background: rgba(59,130,246,.2);
      border-color: rgba(96,165,250,.5);
      color: #2563eb;
      box-shadow: 0 0 20px rgba(59,130,246,.12), 0 4px 16px rgba(0,0,0,.06);
    }
    .map-tool-label {
      font-size: 11px;
      letter-spacing: 0.3px;
    }
    @media (max-width: 640px) {
      .map-toolbar-row {
        top: 8px;
        right: 8px;
        gap: 4px;
      }
      .map-tool-btn {
        padding: 7px 10px;
        font-size: 11px;
        border-radius: 8px;
      }
      .map-tool-label {
        font-size: 10px;
      }
    }

    /* Map hint banner */
    .map-hint-banner {
      position: absolute;
      top: 60px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 999;
      padding: 10px 20px;
      background: linear-gradient(135deg, rgba(16,185,129,.92) 0%, rgba(52,211,153,.88) 100%);
      color: #022c22;
      font-size: 13px;
      font-weight: 700;
      border-radius: 12px;
      box-shadow: 0 8px 32px rgba(16,185,129,.35), 0 2px 8px rgba(0,0,0,.2);
      cursor: pointer;
      white-space: nowrap;
      max-width: 90%;
      text-align: center;
      animation: hintBounce .5s ease;
    }
    @keyframes hintBounce {
      0% { opacity: 0; transform: translateX(-50%) translateY(-12px); }
      60% { transform: translateX(-50%) translateY(3px); }
      100% { opacity: 1; transform: translateX(-50%) translateY(0); }
    }
    .hint-fade-enter-active { animation: hintBounce .5s ease; }
    .hint-fade-leave-active { transition: opacity .3s ease, transform .3s ease; }
    .hint-fade-leave-to { opacity: 0; transform: translateX(-50%) translateY(-10px); }
    @media (max-width: 640px) {
      .map-hint-banner {
        font-size: 12px;
        padding: 8px 14px;
        top: 52px;
      }
    }

    /* Map overlay stats strip — pinned to bottom of map */
    .map-stats-strip {
      position: absolute;
      bottom: 12px;
      left: 12px;
      right: 12px;
      z-index: 999;
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      padding: 0;
    }
    .map-stat-chip {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 7px 14px;
      background: rgba(241,245,249,.92);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(148,163,184,.15);
      border-radius: 999px;
      font-size: 12px;
      font-weight: 600;
      color: var(--color-text-secondary);
      box-shadow: 0 4px 16px rgba(0,0,0,.08);
    }
    .map-stat-chip strong {
      color: var(--color-text-primary);
      font-weight: 700;
    }

    /* POI searching indicator */
    .poi-searching-bar {
      height: 3px;
      border-radius: 3px;
      background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
      animation: shimmerSlide 1.2s infinite;
      margin-bottom: 8px;
    }
    /* Quick filter strip */
    .quick-filter-strip {
      padding: 12px 14px;
      background: linear-gradient(135deg, rgba(52,211,153,.12) 0%, rgba(16,185,129,.08) 100%);
      border: 1px solid rgba(52,211,153,.35);
      border-radius: 14px;
      box-shadow:
        0 0 20px rgba(52,211,153,.1),
        inset 0 1px 0 rgba(255,255,255,.05);
      animation: filterStripPulse 3s ease-in-out infinite;
    }
    @keyframes filterStripPulse {
      0%, 100% { border-color: rgba(52,211,153,.35); box-shadow: 0 0 20px rgba(52,211,153,.1), inset 0 1px 0 rgba(255,255,255,.05); }
      50% { border-color: rgba(52,211,153,.55); box-shadow: 0 0 30px rgba(52,211,153,.18), inset 0 1px 0 rgba(255,255,255,.07); }
    }

    @keyframes shimmerSlide {
      0% { transform: translateX(-100%); }
      100% { transform: translateX(100%); }
    }

    /* POI card action buttons */
    .poi-action-btn {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 5px 10px;
      border: 1px solid rgba(148,163,184,.18);
      border-radius: 8px;
      background: rgba(241,245,249,.7);
      color: var(--color-text-secondary);
      font-size: 11px;
      font-weight: 600;
      cursor: pointer;
      transition: all .2s;
      line-height: 1;
    }
    .poi-action-btn:hover {
      border-color: rgba(96,165,250,.35);
      color: #93c5fd;
      background: rgba(241,245,249,.95);
    }
    .poi-action-route {
      border-color: rgba(52,211,153,.25);
      color: #34d399;
    }
    .poi-action-route:hover {
      border-color: rgba(52,211,153,.5);
      background: rgba(16,185,129,.12);
      color: #6ee7b7;
    }
    .poi-action-fav-active {
      border-color: rgba(250,204,21,.35);
      color: #fbbf24;
      background: rgba(250,204,21,.08);
    }

    /* Map cluster icon */
    .cluster-icon {
      width: 44px; height: 44px;
      border-radius: 50%;
      background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
      color: #fff;
      display: flex; align-items: center; justify-content: center;
      font-weight: 800; font-size: 14px;
      border: 3px solid rgba(255,255,255,0.3);
      box-shadow: 0 4px 12px rgba(37,99,235,.4);
    }

    /* Find Stops glow button */
    @keyframes neon-pulse {
      0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7), 0 0 20px rgba(16, 185, 129, 0.4); transform: scale(1); }
      50% { box-shadow: 0 0 0 12px rgba(16, 185, 129, 0), 0 0 40px rgba(16, 185, 129, 0.6); transform: scale(1.02); }
      100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0), 0 0 20px rgba(16, 185, 129, 0.4); transform: scale(1); }
    }
    .btn-glow-intense {
      animation: neon-pulse 2s infinite;
      background: linear-gradient(135deg, #10b981 0%, #059669 100%);
      border: 1px solid #34d399;
      min-width: 148px;
      min-height: 52px;
      border-radius: 16px;
      font-size: 15px;
      letter-spacing: .08em;
      box-shadow: 0 18px 38px rgba(16,185,129,.28);
      cursor: pointer;
    }
    .btn-glow-intense:hover {
      background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
    }

    .spinner {
      border: 3px solid rgba(255,255,255,0.1);
      width: 20px; height: 20px;
      border-radius: 50%;
      border-left-color: #fff;
      animation: spin 1s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* Floating Action Button */
    .fab {
      position: absolute;
      bottom: 24px;
      right: 24px;
      width: 56px;
      height: 56px;
      border-radius: 16px;
      background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent-violet) 100%);
      border: 1px solid rgba(255,255,255,.2);
      color: white;
      font-size: 24px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 12px 24px rgba(59,130,246,.3);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      z-index: 15;
    }

    .fab:hover {
      transform: scale(1.1);
      box-shadow: 0 16px 32px rgba(59,130,246,.4);
    }

    .fab:active {
      transform: scale(0.95);
    }

    .fab.active {
      background: linear-gradient(135deg, var(--color-accent-emerald) 0%, var(--color-primary) 100%);
    }

    @media (max-width: 1024px) {
      .fab {
        bottom: auto;
        top: 16px;
        right: 16px;
        width: 48px;
        height: 48px;
        font-size: 20px;
      }
    }

    /* Route Summary Card */
    .route-summary-card {
      background: linear-gradient(135deg, rgba(255,255,255,.98) 0%, rgba(248,250,252,.95) 100%);
      border: 1px solid rgba(96,165,250,.2);
      border-radius: 20px;
      padding: 20px;
      box-shadow: 0 0 24px rgba(59,130,246,.1);
      position: relative;
      overflow: hidden;
    }

    .route-summary-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(59,130,246,.05) 0%, transparent 100%);
      pointer-events: none;
    }

    .route-summary-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      margin-bottom: 16px;
      position: relative;
      z-index: 1;
    }

    .route-summary-title {
      font-size: 18px;
      font-weight: 700;
      color: var(--color-text-primary);
      letter-spacing: -0.3px;
    }

    .route-summary-stats {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      position: relative;
      z-index: 1;
    }

    .route-stat-badge {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      padding: 10px 16px;
      background: rgba(59,130,246,.04);
      border: 1px solid rgba(96,165,250,.15);
      border-radius: 12px;
      font-size: 12px;
      color: var(--color-text-muted);
    }

    .route-stat-badge strong {
      font-size: 16px;
      color: var(--color-text-primary);
      font-weight: 700;
    }

    .route-legs-toggle {
      position: relative;
      z-index: 1;
    }

    .route-legs-toggle button {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 600;
      color: var(--color-primary);
      background: transparent;
      border: none;
      cursor: pointer;
      padding: 6px 0;
      transition: all 0.2s;
    }

    .route-legs-toggle button:hover {
      color: #2563eb;
    }

    .route-legs-toggle svg {
      transition: transform 0.3s;
    }

    .route-legs-toggle.expanded svg {
      transform: rotate(180deg);
    }

    .route-legs-list {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease-out;
      position: relative;
      z-index: 1;
    }

    .route-legs-list.expanded {
      max-height: 500px;
    }

    .route-leg-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px;
      background: rgba(59,130,246,.02);
      border-radius: 10px;
      border-left: 3px solid var(--color-primary);
      margin-top: 8px;
      animation: slideIn 0.3s ease-out;
    }

    @keyframes slideIn {
      from {
        opacity: 0;
        transform: translateY(-8px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .route-leg-labels {
      flex: 1;
      min-width: 0;
    }

    .route-leg-label {
      font-size: 12px;
      color: var(--color-text-muted);
      line-height: 1.4;
    }

    .route-leg-label strong {
      display: block;
      color: var(--color-text-secondary);
      font-weight: 600;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .route-leg-stats {
      display: flex;
      gap: 8px;
      white-space: nowrap;
      font-size: 12px;
      font-weight: 600;
    }

    .route-leg-stat {
      background: rgba(59,130,246,.15);
      color: var(--color-primary);
      padding: 4px 10px;
      border-radius: 6px;
    }

    /* Top Menu and Stats */
    .top-menu-strip {
      display: flex;
      gap: 12px;
      margin-bottom: 20px;
      padding-bottom: 16px;
      border-bottom: 1px solid var(--color-border);
      flex-wrap: wrap;
      align-items: center;
    }

    .menu-icon-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      padding: 8px 16px;
      background: rgba(241,245,249,.8);
      border: 1px solid var(--color-border);
      border-radius: 12px;
      color: var(--color-text-secondary);
      cursor: pointer;
      font-size: 12px;
      font-weight: 600;
      transition: all 0.2s;
      position: relative;
      min-height: 44px;
      min-width: 56px;
    }

    .menu-icon-btn:hover {
      border-color: rgba(96,165,250,.4);
      background: rgba(59,130,246,.1);
      color: var(--color-text-primary);
    }

    .menu-icon-btn-active {
      background: linear-gradient(135deg, rgba(59,130,246,.25) 0%, rgba(167,139,250,.15) 100%);
      border-color: rgba(96,165,250,.5);
      color: var(--color-primary);
      box-shadow: 0 0 12px rgba(59,130,246,.1);
    }

    .menu-emoji {
      font-size: 18px;
      line-height: 1;
    }

    .tab-label {
      font-size: 11px;
      letter-spacing: 0.3px;
    }

    .menu-pill-badge {
      position: absolute;
      top: -6px;
      right: -6px;
      background: linear-gradient(135deg, var(--color-accent-emerald), var(--color-primary));
      color: white;
      font-size: 10px;
      font-weight: 700;
      padding: 3px 6px;
      border-radius: 8px;
      min-width: 20px;
      text-align: center;
    }

    .stats-row {
      display: flex;
      gap: 12px;
      margin-bottom: 20px;
      flex-wrap: wrap;
    }

    .stat-pill {
      display: flex;
      flex-direction: column;
      gap: 2px;
      padding: 10px 14px;
      background: linear-gradient(135deg, rgba(241,245,249,.9) 0%, rgba(241,245,249,.85) 100%);
      border: 1px solid var(--color-border);
      border-radius: 12px;
      font-size: 11px;
      color: var(--color-text-muted);
      font-weight: 500;
      letter-spacing: 0.3px;
    }

    .stat-pill strong {
      font-size: 14px;
      color: var(--color-primary);
      font-weight: 700;
    }

    .ev-toggle {
      transition: all .25s;
      border: 1px solid var(--color-border);
    }
    .ev-toggle:hover {
      border-color: rgba(250,204,21,.3);
    }
    .ev-toggle-active {
      background: linear-gradient(135deg, rgba(250,204,21,.15) 0%, rgba(234,179,8,.1) 100%);
      border-color: rgba(250,204,21,.4);
      box-shadow: 0 0 16px rgba(250,204,21,.12);
    }
    .ev-toggle-active strong {
      color: #facc15;
    }

    /* Section Cards */
    .section-card {
      background: linear-gradient(180deg, rgba(241,245,249,.92), rgba(241,245,249,.90));
      border: 1px solid var(--color-border);
      border-radius: 18px;
      padding: 18px;
      transition: all 0.2s;
      animation: fadeInUp 0.4s ease-out;
    }

    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(12px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .section-card:hover {
      border-color: rgba(96,165,250,.24);
      box-shadow: 0 12px 32px rgba(59,130,246,.08);
    }

    .section-heading {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      margin-bottom: 16px;
    }

    .section-heading h3,
    .section-heading h4 {
      font-size: 16px;
      font-weight: 700;
      color: var(--color-text-primary);
      letter-spacing: -0.3px;
      margin: 0;
    }

    .section-heading h4 {
      font-size: 14px;
    }

    .subtle-label {
      display: block;
      font-size: 11px;
      color: var(--color-text-muted);
      font-weight: 600;
      letter-spacing: 0.4px;
      margin-bottom: 8px;
      text-transform: uppercase;
    }

    /* Input Fields */
    .custom-input {
      background: var(--color-bg-card);
      border: 1px solid rgba(30,41,59,.15);
      color: var(--color-text-primary);
      transition: all 0.2s;
      font-size: 14px;
      font-family: 'Inter', sans-serif;
    }

    .custom-input:hover {
      border-color: rgba(96,165,250,.32);
    }

    .custom-input:focus {
      outline: none;
      border-color: var(--color-primary);
      box-shadow: 0 0 0 3px rgba(59,130,250,.12);
      background: var(--color-bg-darker);
    }

    .custom-input::placeholder {
      color: var(--color-text-muted);
    }

    /* Override browser autofill styling */
    .custom-input:-webkit-autofill,
    .custom-input:-webkit-autofill:hover,
    .custom-input:-webkit-autofill:focus {
      -webkit-text-fill-color: var(--color-text-primary) !important;
      -webkit-box-shadow: 0 0 0 1000px var(--color-bg-card) inset !important;
      box-shadow: 0 0 0 1000px var(--color-bg-card) inset !important;
      background-color: var(--color-bg-card) !important;
      color: var(--color-text-primary) !important;
      caret-color: var(--color-text-primary) !important;
    }
    input, select, textarea {
      color: var(--color-text-primary);
      background-color: var(--color-bg-card);
      color-scheme: light;
    }

    /* Bundle Cards with Enhanced Styling */
    .bundle-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 12px;
    }

    @media (max-width: 640px) {
      .bundle-grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    .bundle-card {
      position: relative;
      padding: 16px;
      background: linear-gradient(135deg, rgba(241,245,249,.94) 0%, rgba(241,245,249,.88) 100%);
      border: 1px solid rgba(96,165,250,.16);
      border-radius: 16px;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      overflow: hidden;
    }

    .bundle-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(59,130,246,.1) 0%, transparent 100%);
      opacity: 0;
      transition: opacity 0.3s;
      pointer-events: none;
    }

    .bundle-card:hover {
      border-color: rgba(96,165,250,.32);
      box-shadow: 0 12px 32px rgba(59,130,246,.12);
      transform: translateY(-4px);
    }

    .bundle-card:hover::before {
      opacity: 1;
    }

    .bundle-card input:checked + .check-mark,
    .bundle-card input:checked ~ .check-mark {
      opacity: 1;
      transform: scale(1);
    }

    .bundle-card input:checked {
      border-color: var(--color-primary);
      box-shadow: 0 0 12px rgba(59,130,246,.3);
    }

    .bundle-card-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 6px;
      position: relative;
      z-index: 1;
    }

    .bundle-emoji {
      font-size: 32px;
      line-height: 1;
      margin-bottom: 4px;
    }

    .bundle-title {
      font-weight: 700;
      font-size: 13px;
      color: var(--color-text-primary);
      letter-spacing: -0.2px;
    }

    .bundle-description {
      font-size: 11px;
      color: var(--color-text-muted);
      line-height: 1.4;
      margin-top: 4px;
    }

    .check-mark {
      position: absolute;
      top: 8px;
      right: 8px;
      opacity: 0;
      transform: scale(0.5);
      transition: all 0.2s;
      color: var(--color-primary);
      width: 20px;
      height: 20px;
    }

    /* POI Cards with Enhanced Styling */
    .result-card,
    .saved-card {
      background: linear-gradient(135deg, rgba(241,245,249,.94) 0%, rgba(241,245,249,.90) 100%);
      border: 1px solid rgba(30,41,59,.76);
      border-radius: 16px;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
    }

    .result-card::before,
    .saved-card::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 3px;
      background: linear-gradient(180deg, var(--color-accent-emerald), var(--color-primary));
      opacity: 0;
      transition: opacity 0.2s;
    }

    .result-card:hover,
    .saved-card:hover {
      transform: translateY(-2px);
      border-color: rgba(96,165,250,.38);
      box-shadow: 0 16px 32px rgba(59,130,246,.15);
      background: linear-gradient(135deg, rgba(241,245,249,.98) 0%, rgba(241,245,249,.95) 100%);
    }

    .result-card:hover::before,
    .saved-card:hover::before {
      opacity: 1;
    }

    .poi-icon {
      font-size: 20px;
      line-height: 1;
    }

    .poi-content {
      flex: 1;
      min-width: 0;
    }

    .poi-name {
      font-weight: 600;
      font-size: 13px;
      color: var(--color-text-primary);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-bottom: 2px;
    }

    .poi-category {
      font-size: 11px;
      color: var(--color-text-muted);
    }

    .poi-distance {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 4px 10px;
      background: rgba(96,165,250,.15);
      color: var(--color-primary);
      border-radius: 6px;
      font-size: 12px;
      font-weight: 600;
      white-space: nowrap;
    }

    /* Chip Styling */
    .chip {
      font-size: 0.75rem;
      padding: 0.5rem 1rem;
      border-radius: 999px;
      background: rgba(241,245,249,.9);
      border: 1px solid rgba(96,165,250,.2);
      cursor: pointer;
      color: var(--color-text-secondary);
      transition: all 0.25s;
      font-weight: 600;
      min-height: 40px;
      display: inline-flex;
      align-items: center;
      box-shadow: 0 2px 8px rgba(0,0,0,.06);
    }

    .chip:hover {
      border-color: rgba(96,165,250,.5);
      color: var(--color-text-primary);
      background: rgba(59,130,246,.12);
      box-shadow: 0 0 12px rgba(96,165,250,.12);
      transform: translateY(-1px);
    }

    .chip-active {
      background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
      border-color: #2563eb;
      color: white;
      box-shadow: 0 0 24px rgba(37,99,235,.4), 0 8px 20px rgba(37,99,235,.25);
      text-shadow: 0 1px 2px rgba(0,0,0,.15);
      transform: translateY(-1px) scale(1.04);
      font-weight: 700;
    }

    .chip-toggle {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      background: rgba(241,245,249,.9);
      border: 1px solid rgba(30,41,59,.15);
      padding: 0.5rem 0.9rem;
      border-radius: 999px;
      cursor: pointer;
      font-size: 0.8rem;
      min-height: 40px;
      font-weight: 600;
      transition: all 0.2s;
    }

    .chip-toggle:hover {
      border-color: rgba(96,165,250,.4);
      color: var(--color-text-primary);
      background: rgba(59,130,246,.08);
    }

    .chip-toggle-active {
      background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
      border-color: #2563eb;
      color: white;
      box-shadow: 0 0 24px rgba(37,99,235,.4), 0 8px 20px rgba(37,99,235,.25);
      transform: translateY(-1px) scale(1.04);
      font-weight: 700;
    }

    /* Autocomplete Dropdown */
    .poi-icon-wrap {
      width: 48px; height: 48px;
      display: flex; align-items: center; justify-content: center;
      background: linear-gradient(135deg, rgba(241,245,249,.9) 0%, rgba(241,245,249,.95) 100%);
      border-radius: 14px;
      border: 1px solid rgba(96,165,250,.2);
      font-size: 24px;
      flex-shrink: 0;
      box-shadow: 0 4px 12px rgba(0,0,0,.06);
    }
    .poi-cat-badge {
      font-size: 10px;
      padding: 3px 10px;
      border-radius: 999px;
      background: rgba(59,130,246,.12);
      border: 1px solid rgba(96,165,250,.2);
      color: #2563eb;
      font-weight: 600;
      letter-spacing: 0.2px;
    }

    .save-dropdown {
      position: absolute;
      top: 100%;
      right: 0;
      margin-top: 6px;
      width: 260px;
      background: rgba(241,245,249,.98);
      backdrop-filter: blur(16px);
      border: 1px solid rgba(96,165,250,.18);
      border-radius: 16px;
      box-shadow: 0 20px 50px rgba(0,0,0,.1);
      z-index: 60;
      animation: slideIn .2s ease;
    }

    .autocomplete-dropdown {
      position: relative;
      margin-top: 8px;
      background: rgba(241,245,249,.98);
      border: 1px solid rgba(96,165,250,.2);
      max-height: 220px;
      overflow-y: auto;
      border-radius: 14px;
      color: var(--color-text-primary);
      box-shadow: 0 24px 50px rgba(0,0,0,.1);
      z-index: 30;
      backdrop-filter: blur(var(--blur-sm));
      -webkit-backdrop-filter: blur(var(--blur-sm));
    }

    .autocomplete-item {
      padding: 12px 14px;
      cursor: pointer;
      font-size: 0.92rem;
      border-bottom: 1px solid rgba(0,0,0,.06);
      color: var(--color-text-secondary);
      transition: all 0.15s;
    }

    .autocomplete-item:hover {
      background: rgba(59,130,246,.2);
      color: var(--color-primary);
      padding-left: 18px;
    }

    /* Loading Animation - Enhanced Route Spinner */
    .spinner {
      width: 32px;
      height: 32px;
      position: relative;
      display: inline-block;
    }

    .spinner::before,
    .spinner::after {
      content: '';
      position: absolute;
      width: 8px;
      height: 8px;
      background: var(--color-primary);
      border-radius: 50%;
      animation: routeDot 2s infinite;
    }

    .spinner::before {
      left: 2px;
      animation-delay: -0.67s;
    }

    .spinner::after {
      left: 50%;
      transform: translateX(-50%);
      animation-delay: -0.33s;
    }

    .spinner-center {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 8px;
      height: 8px;
      background: var(--color-accent-violet);
      border-radius: 50%;
      animation: routeDot 2s infinite;
    }

    @keyframes routeDot {
      0%, 100% {
        box-shadow: 0 0 0 rgba(59,130,246,.5);
      }
      50% {
        box-shadow: 0 12px 20px rgba(59,130,246,.3);
      }
    }

    /* Toast Notification System */
    #toast-container {
      position: fixed;
      top: 24px;
      right: 24px;
      z-index: 9999;
      display: flex;
      flex-direction: column;
      gap: 12px;
      pointer-events: none;
    }

    .toast {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px 18px;
      background: linear-gradient(135deg, rgba(241,245,249,.98) 0%, rgba(241,245,249,.96) 100%);
      border: 1px solid var(--color-border);
      border-radius: 12px;
      color: var(--color-text-primary);
      font-size: 14px;
      font-weight: 500;
      box-shadow: 0 12px 32px rgba(0,0,0,.08);
      backdrop-filter: blur(var(--blur-sm));
      -webkit-backdrop-filter: blur(var(--blur-sm));
      animation: toastSlideIn 0.3s ease-out;
      pointer-events: all;
    }

    .toast.success {
      border-left: 3px solid var(--color-accent-emerald);
    }

    .toast.error {
      border-left: 3px solid #ef4444;
    }

    .toast.info {
      border-left: 3px solid var(--color-primary);
    }

    @keyframes toastSlideIn {
      from {
        transform: translateX(400px);
        opacity: 0;
      }
      to {
        transform: translateX(0);
        opacity: 1;
      }
    }

    @keyframes toastSlideOut {
      to {
        transform: translateX(400px);
        opacity: 0;
      }
    }

    .toast.removing {
      animation: toastSlideOut 0.3s ease-in forwards;
    }

    /* Custom Scrollbar */
    ::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }

    ::-webkit-scrollbar-track {
      background: transparent;
    }

    ::-webkit-scrollbar-thumb {
      background: rgba(96,165,250,.3);
      border-radius: 999px;
      transition: background 0.2s;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: rgba(96,165,250,.5);
    }

    /* Leaflet Popup Override */
    .leaflet-popup-content-wrapper {
      background: linear-gradient(135deg, rgba(241,245,249,.98) 0%, rgba(241,245,249,.96) 100%);
      border: 1px solid var(--color-border);
      border-radius: 12px;
      box-shadow: 0 12px 32px rgba(0,0,0,.1);
      backdrop-filter: blur(var(--blur-sm));
      -webkit-backdrop-filter: blur(var(--blur-sm));
    }

    .leaflet-popup-tip {
      background: rgba(241,245,249,.96);
      border: 1px solid var(--color-border);
    }

    .leaflet-popup-content {
      margin: 0;
      padding: 14px 16px;
      color: var(--color-text-primary);
      font-size: 13px;
      line-height: 1.45;
      min-width: 260px;
      max-width: 340px;
      max-height: 55vh;
      overflow-y: auto;
      scrollbar-width: thin;
      scrollbar-color: rgba(96,165,250,.3) transparent;
    }
    .leaflet-popup-content::-webkit-scrollbar { width: 4px; }
    .leaflet-popup-content::-webkit-scrollbar-thumb { background: rgba(96,165,250,.3); border-radius: 4px; }
    .leaflet-popup-content::-webkit-scrollbar-track { background: transparent; }
    .leaflet-popup-content strong {
      font-size: 15px;
      font-weight: 700;
      display: block;
      margin-bottom: 4px;
      color: #1e293b;
    }
    .leaflet-popup-content em {
      color: #64748b;
      font-style: normal;
      font-weight: 600;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.3px;
    }
    .leaflet-popup-content a {
      color: #2563eb;
    }
    .leaflet-popup-content a:hover {
      color: #1d4ed8;
    }

    .leaflet-control-zoom a,
    .leaflet-bar a {
      background: rgba(241,245,249,.96) !important;
      color: var(--color-text-primary) !important;
      border-bottom: 1px solid var(--color-border) !important;
      transition: all 0.2s !important;
    }

    .leaflet-control-zoom a:hover,
    .leaflet-bar a:hover {
      background: var(--color-bg-card-hover) !important;
      color: var(--color-primary) !important;
    }

    /* Glassmorphism v2 - Better depth and effects */
    .glass-card {
      background: linear-gradient(135deg, rgba(241,245,249,.98) 0%, rgba(241,245,249,.94) 100%);
      border: 1px solid rgba(96,165,250,.2);
      border-radius: 16px;
      backdrop-filter: blur(var(--blur-md));
      -webkit-backdrop-filter: blur(var(--blur-md));
      box-shadow:
        0 8px 32px rgba(0,0,0,.06),
        inset 0 1px 0 rgba(255,255,255,.5);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .glass-card:hover {
      border-color: rgba(96,165,250,.35);
      box-shadow:
        0 16px 48px rgba(59,130,246,.2),
        inset 0 1px 0 rgba(255,255,255,.15);
    }

    /* Empty State */
    .empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      padding: 40px 20px;
      text-align: center;
      color: var(--color-text-muted);
    }

    .empty-state-icon {
      width: 64px;
      height: 64px;
      margin-bottom: 8px;
      opacity: 0.5;
    }

    .empty-state-title {
      font-size: 16px;
      font-weight: 600;
      color: var(--color-text-secondary);
      margin-bottom: 4px;
    }

    .empty-state-message {
      font-size: 13px;
      line-height: 1.5;
      max-width: 280px;
    }

    /* Share Menu Slide-in */
    .share-menu-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,.2);
      backdrop-filter: blur(4px);
      z-index: 100;
      animation: fadeIn 0.2s ease-out;
    }

    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    .share-menu-panel {
      position: fixed;
      right: 0;
      top: 0;
      bottom: 0;
      width: 360px;
      background: linear-gradient(180deg, rgba(241,245,249,.98) 0%, rgba(241,245,249,.96) 100%);
      border-left: 1px solid var(--color-border);
      z-index: 101;
      padding: 24px;
      overflow-y: auto;
      animation: slideInRight 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    @keyframes slideInRight {
      from {
        transform: translateX(100%);
        opacity: 0;
      }
      to {
        transform: translateX(0);
        opacity: 1;
      }
    }

    @media (max-width: 640px) {
      .share-menu-panel {
        width: 100%;
      }
    }

    /* Timeline Container */
    .timeline-container {
      position: relative;
    }

    .timeline-line {
      position: absolute;
      left: 8px;
      top: 32px;
      bottom: 0;
      width: 2px;
      background: linear-gradient(180deg, var(--color-primary), transparent);
    }

    .input-icon {
      position: absolute;
      left: 12px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 16px;
      line-height: 1;
      z-index: 2;
    }

    .input-icon.text-emerald-500 {
      color: var(--color-accent-emerald);
    }

    .input-icon.text-rose-500 {
      color: #f43f5e;
    }

    .input-icon.text-gray-400 {
      color: var(--color-text-muted);
    }

    /* Buttons */
    button {
      min-height: 44px;
    }

    input {
      min-height: 48px;
    }

    @media (max-width: 768px) {
      button {
        min-height: 44px;
      }
      input {
        min-height: 48px;
      }
    }

    /* Route builder card */
    .route-builder-card {
      box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 18px 35px rgba(0,0,0,.06);
    }

    /* Share button */
    .btn-share {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 16px;
      background: linear-gradient(135deg, rgba(59,130,246,.2) 0%, rgba(167,139,250,.15) 100%);
      border: 1px solid rgba(96,165,250,.3);
      border-radius: 10px;
      color: var(--color-primary);
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
    }

    .btn-share:hover {
      border-color: rgba(96,165,250,.5);
      background: linear-gradient(135deg, rgba(59,130,246,.3) 0%, rgba(167,139,250,.25) 100%);
      box-shadow: 0 8px 16px rgba(59,130,246,.15);
    }

    @keyframes pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.5; }
    }

    /* Toast slide-in */
    @keyframes slideIn {
      from { transform: translateX(100%); opacity: 0; }
      to { transform: translateX(0); opacity: 1; }
    }

    /* Autocomplete loading spinner */
    .input-loading-spinner {
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      width: 18px; height: 18px;
      border: 2px solid rgba(96,165,250,.2);
      border-top-color: #2563eb;
      border-radius: 50%;
      animation: spin .6s linear infinite;
    }
    @keyframes spin { to { transform: translateY(-50%) rotate(360deg); } }

    /* Popup loading skeleton */
    @keyframes shimmer {
      0% { background-position: -200px 0; }
      100% { background-position: 200px 0; }
    }
    .popup-skeleton {
      height: 12px;
      border-radius: 6px;
      background: linear-gradient(90deg, rgba(241,245,249,.6) 25%, rgba(248,250,252,.4) 50%, rgba(241,245,249,.6) 75%);
      background-size: 400px 100%;
      animation: shimmer 1.2s ease infinite;
      margin: 6px 0;
    }

    /* Delete confirm overlay */
    .delete-confirm-wrap {
      position: absolute;
      inset: 0;
      background: rgba(241,245,249,.92);
      backdrop-filter: blur(6px);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      border-radius: inherit;
      z-index: 5;
      padding: 8px;
    }
    .delete-confirm-wrap span {
      font-size: 12px;
      font-weight: 600;
      color: #f87171;
    }
    .delete-confirm-wrap button {
      padding: 6px 14px;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 700;
      border: none;
      cursor: pointer;
      min-height: 32px;
    }

    /* Utility animations */
    .transition-all {
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .transition-opacity {
      transition: opacity 0.2s;
    }

    @media (max-width: 640px) {
      #app-wrapper {
        padding: 8px 0 0;
      }

      .left-menu {
        border-radius: 24px;
        padding: 20px;
      }

      .bundle-grid {
        grid-template-columns: repeat(3, 1fr);
      }

      #toast-container {
        top: auto;
        bottom: 24px;
        right: 12px;
        left: 12px;
      }

      .toast {
        width: 100%;
      }

      /* ── Mobile compact: icon-only tabs ── */
      .top-menu-strip {
        gap: 4px;
        margin-bottom: 6px;
        padding-bottom: 6px;
        flex-wrap: nowrap !important;
        overflow: hidden !important;
        width: 100%;
        box-sizing: border-box;
      }
      .menu-icon-btn {
        padding: 6px;
        min-height: 36px;
        min-width: 0;
        width: 36px;
        border-radius: 10px;
        flex-shrink: 1;
      }
      .menu-emoji {
        font-size: 16px;
      }
      .tab-label {
        display: none !important;
      }
      .menu-right-group {
        gap: 4px !important;
        margin-left: auto;
        flex-shrink: 0;
      }
      .menu-pill-badge {
        top: -4px;
        right: -4px;
        font-size: 9px;
        min-width: 16px;
        height: 16px;
        line-height: 16px;
        padding: 0 4px;
      }

      /* ── Stats row compact inline ── */
      .stats-row {
        gap: 6px;
        margin-bottom: 10px;
      }
      .stat-pill {
        flex-direction: row;
        gap: 5px;
        padding: 5px 10px;
        align-items: center;
        border-radius: 999px;
      }
      .stat-pill span {
        font-size: 10px;
      }
      .stat-pill strong {
        font-size: 11px;
      }

      /* ── Hide login hint on mobile ── */
      .login-hint {
        display: none;
      }

      /* ── Bottom sheet content: single vertical scroller only ── */
      .bottom-sheet-content {
        padding: 10px 12px;
        overflow-y: auto;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        max-width: 100vw;
        box-sizing: border-box;
      }
      .left-menu {
        overflow-x: hidden !important;
        max-width: 100vw;
      }

      /* ── Fix dropdowns on mobile ── */
      .save-dropdown {
        position: fixed;
        bottom: auto;
        top: auto;
        right: 16px;
        left: 16px;
        width: auto;
        max-height: 60vh;
        overflow-y: auto;
      }
    }
  </style>
</head>
<body><script>window.TTB_USER = {"loggedIn":false,"ajaxUrl":"https:\/\/tantrummingtrailblazers.com\/wp-admin\/admin-ajax.php","nonce":"ca1b528277"};</script>

<div id="app-wrapper">
<div id="app" v-cloak>

  <!-- Toast Notifications -->
  <div style="position:fixed;top:20px;right:20px;z-index:99999;display:flex;flex-direction:column;gap:10px;pointer-events:none;max-width:380px;">
    <transition-group name="list">
      <div v-for="t in toasts" :key="t.id"
        style="pointer-events:auto;padding:14px 20px;border-radius:14px;font-size:14px;font-weight:600;display:flex;align-items:center;gap:10px;box-shadow:0 8px 32px rgba(0,0,0,.1);backdrop-filter:blur(12px);cursor:pointer;animation:slideIn .3s ease;"
        :style="{
          background: t.type==='error' ? 'rgba(220,38,38,.92)' : t.type==='warning' ? 'rgba(217,119,6,.92)' : 'rgba(16,185,129,.92)',
          color: '#fff',
          border: '1px solid ' + (t.type==='error' ? 'rgba(248,113,113,.3)' : t.type==='warning' ? 'rgba(251,191,36,.3)' : 'rgba(52,211,153,.3)')
        }"
        @click="removeToast(t.id)">
        <span>{{ t.type==='error' ? '✗' : t.type==='warning' ? '<img src="https://s.w.org/images/core/emoji/17.0.2/72x72/26a0.png" alt="⚠" class="wp-smiley" style="height: 1em; max-height: 1em;" />' : '✓' }}</span>
        <span>{{ t.message }}</span>
      </div>
    </transition-group>
  </div>

  <div class="app-shell" :class="{'is-full': isAppFull}">
    <div class="container mx-auto max-w-7xl">

      <main class="flex gap-6 h-screen md:flex-row flex-col">

        <aside class="left-menu" :class="{'bottom-sheet-collapsed': isMobileSheetCollapsed}">
          <div class="bottom-sheet-handle" @click="toggleMobileSheet">
            <div class="bottom-sheet-handle-bar"></div>
            <div class="bottom-sheet-label">{{ isMobileSheetCollapsed ? '▲ Tap to plan your route' : '▼ Tap to minimise' }}</div>
          </div>

          <div class="bottom-sheet-content">
            <div class="top-menu-strip">
              <button
                class="menu-icon-btn"
                :class="{'menu-icon-btn-active': activeTab==='plan'}"
                @click="selectTab('plan')"
                title="Plan route"
                aria-label="Plan route">
                <span class="menu-emoji"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f9ed.png" alt="🧭" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span>
                <span class="tab-label">Plan</span>
              </button>

              <button
                class="menu-icon-btn relative"
                :class="{'menu-icon-btn-active': activeTab==='stops'}"
                @click="selectTab('stops')"
                title="Results list"
                aria-label="Places found">
                <span class="menu-emoji"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f4cb.png" alt="📋" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span>
                <span class="tab-label">Places</span>
                <span v-if="stopsCount" class="menu-pill-badge">{{ stopsCount }}</span>
              </button>

              <button
                class="menu-icon-btn"
                :class="{'menu-icon-btn-active': activeTab==='saved'}"
                @click="selectTab('saved')"
                title="Your saved routes"
                aria-label="Saved routes">
                <span class="menu-emoji"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f4c1.png" alt="📁" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span>
                <span class="tab-label">Saved</span>
                <span v-if="savedRoutesCount + favouritesList.length" class="menu-pill-badge">{{ savedRoutesCount + favouritesList.length }}</span>
              </button>

              <div class="relative menu-right-group" style="margin-left:auto; display:flex; gap:6px; align-items:center;">
                <a
                  href="https://buymeacoffee.com/makemydrivefun"
                  target="_blank"
                  rel="noopener noreferrer"
                  class="menu-icon-btn"
                  title="I built this on my own because I love making road trips better. If it helped you, a coffee keeps it free and improving!"
                  aria-label="Buy me a coffee"
                  style="text-decoration:none; color:inherit; background:linear-gradient(135deg,rgba(251,191,36,.15),rgba(245,158,11,.08)); border:1px solid rgba(245,158,11,.25);">
                  <span class="menu-emoji"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/2615.png" alt="☕" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span>
                  <span class="tab-label" style="color:#92400e; display:flex; flex-direction:column; align-items:center; gap:0; line-height:1;">
                    Coffee
                    <span style="font-size:7px; color:#b45309; font-weight:400; white-space:nowrap;">Help keep it free</span>
                  </span>
                </a>
                <button
                  class="menu-icon-btn"
                  @click="showSaveDropdown = !showSaveDropdown"
                  :disabled="!TTB_USER || !TTB_USER.loggedIn"
                  title="Save this route"
                  aria-label="Save route">
                  <span class="menu-emoji"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f4be.png" alt="💾" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span>
                  <span class="tab-label">Save</span>
                </button>
                <div v-if="showSaveDropdown" class="save-dropdown">
                  <div style="padding:12px 14px;display:flex;flex-direction:column;gap:8px;">
                    <input
                      type="text"
                      v-model="routeCustomName"
                      class="custom-input w-full border border-[#e2e8f0] rounded-lg px-3 py-2 text-sm bg-[#f1f5f9]"
                      placeholder="Route name (optional)"
                      @keydown.enter="saveRouteToWP(); showSaveDropdown = false">
                    <button
                      @click="saveRouteToWP(); showSaveDropdown = false"
                      style="width:100%;padding:8px 0;border-radius:10px;background:linear-gradient(135deg,#10b981,#059669);color:#fff;font-weight:700;font-size:13px;border:none;cursor:pointer;">
                      Save Route
                    </button>
                  </div>
                </div>

                <div class="relative">
                  <button
                    class="menu-icon-btn"
                    @click.stop="showShareMenu = !showShareMenu"
                    title="Share route"
                    aria-label="Share route">
                    <span class="menu-emoji"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f4e4.png" alt="📤" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span>
                    <span class="tab-label">Share</span>
                  </button>
                  <div
                    v-if="showShareMenu"
                    class="save-dropdown" style="right:0; min-width:200px;">
                    <a @click.prevent="copyShareLink" style="display:block;padding:12px 16px;color:#1e293b;text-decoration:none;font-size:13px;font-weight:500;border-bottom:1px solid rgba(30,41,59,.3);cursor:pointer;" onmouseover="this.style.background='rgba(59,130,246,.12)'" onmouseout="this.style.background='transparent'"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f4cb.png" alt="📋" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Copy link</a>
                    <a @click.prevent="shareToWhatsApp" style="display:block;padding:12px 16px;color:#1e293b;text-decoration:none;font-size:13px;font-weight:500;border-bottom:1px solid rgba(30,41,59,.3);cursor:pointer;" onmouseover="this.style.background='rgba(34,197,94,.12)'" onmouseout="this.style.background='transparent'"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f7e2.png" alt="🟢" class="wp-smiley" style="height: 1em; max-height: 1em;" /> WhatsApp</a>
                    <a @click.prevent="shareToTwitter" style="display:block;padding:12px 16px;color:#1e293b;text-decoration:none;font-size:13px;font-weight:500;border-bottom:1px solid rgba(30,41,59,.3);cursor:pointer;" onmouseover="this.style.background='rgba(59,130,246,.12)'" onmouseout="this.style.background='transparent'"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f426.png" alt="🐦" class="wp-smiley" style="height: 1em; max-height: 1em;" /> X / Twitter</a>
                    <a @click.prevent="shareToFacebook" style="display:block;padding:12px 16px;color:#1e293b;text-decoration:none;font-size:13px;font-weight:500;border-bottom:1px solid rgba(30,41,59,.3);cursor:pointer;" onmouseover="this.style.background='rgba(59,130,246,.12)'" onmouseout="this.style.background='transparent'"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f4d8.png" alt="📘" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Facebook</a>
                    <a @click.prevent="emailShareLink" style="display:block;padding:12px 16px;color:#1e293b;text-decoration:none;font-size:13px;font-weight:500;border-bottom:1px solid rgba(30,41,59,.3);cursor:pointer;" onmouseover="this.style.background='rgba(148,163,184,.12)'" onmouseout="this.style.background='transparent'"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/2709.png" alt="✉" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Email</a>
                    <a @click.prevent="shareNative" style="display:block;padding:12px 16px;color:#1e293b;text-decoration:none;font-size:13px;font-weight:500;cursor:pointer;" onmouseover="this.style.background='rgba(167,139,250,.12)'" onmouseout="this.style.background='transparent'"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f4e4.png" alt="📤" class="wp-smiley" style="height: 1em; max-height: 1em;" /> More options</a>
                  </div>
                </div>
              </div>
            </div>

            <div v-if="!TTB_USER || !TTB_USER.loggedIn" class="login-hint" style="font-size:11px;color:#64748b;text-align:center;margin-top:-4px;">
              Log in to save routes.
            </div>

            <!-- EV filters (shown when EV toggled on via map chip) -->
            <div v-if="evMode" class="ev-inline-filters" style="display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px;">
              <button type="button" class="chip" :class="{'chip-active': evFilters.dcFastOnly}" @click="setEvFastOnly(!evFilters.dcFastOnly)" style="font-size:11px; padding:5px 10px; min-height:32px;"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/26a1.png" alt="⚡" class="wp-smiley" style="height: 1em; max-height: 1em;" /> DC Fast</button>
              <button type="button" class="chip" :class="{'chip-active': evFilters.acOnly}" @click="setEvAcOnly(!evFilters.acOnly)" style="font-size:11px; padding:5px 10px; min-height:32px;"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f50c.png" alt="🔌" class="wp-smiley" style="height: 1em; max-height: 1em;" /> AC Only</button>
              <button type="button" class="chip" :class="{'chip-active': evFilters.connectors.has('type2')}" @click="setEvConnectorFilter('type2', !evFilters.connectors.has('type2'))" style="font-size:11px; padding:5px 10px; min-height:32px;">Type 2</button>
              <button type="button" class="chip" :class="{'chip-active': evFilters.connectors.has('type2_combo')}" @click="setEvConnectorFilter('type2_combo', !evFilters.connectors.has('type2_combo'))" style="font-size:11px; padding:5px 10px; min-height:32px;">CCS2</button>
              <button type="button" class="chip" :class="{'chip-active': evFilters.connectors.has('chademo')}" @click="setEvConnectorFilter('chademo', !evFilters.connectors.has('chademo'))" style="font-size:11px; padding:5px 10px; min-height:32px;">CHAdeMO</button>
              <button type="button" class="chip" :class="{'chip-active': evFilters.connectors.has('tesla_supercharger')}" @click="setEvConnectorFilter('tesla_supercharger', !evFilters.connectors.has('tesla_supercharger'))" style="font-size:11px; padding:5px 10px; min-height:32px;">Tesla</button>
            </div>

            <!-- Route Summary — always visible when route exists -->
            <div v-if="hasRoute" class="route-summary-card" style="margin-bottom:12px;">
              <div class="route-summary-header">
                <h3 class="route-summary-title">Route Summary</h3>
                <div class="route-legs-toggle" :class="{'expanded': routeLegsExpanded}">
                  <button @click="routeLegsExpanded = !routeLegsExpanded">
                    {{ routeLegsExpanded ? 'Hide legs' : 'Show legs' }}
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                      <polyline points="6 9 12 15 18 9"></polyline>
                    </svg>
                  </button>
                </div>
              </div>
              <div class="route-summary-stats">
                <div class="route-stat-badge">
                  <span>Route</span>
                  <strong>{{ routeSummaryText }}</strong>
                </div>
                <div class="route-stat-badge">
                  <span>Legs</span>
                  <strong>{{ routeLegs.length }}</strong>
                </div>
                <div class="route-stat-badge">
                  <span>Places</span>
                  <strong>{{ stopsCount }}</strong>
                </div>
              </div>
              <div class="route-legs-list" :class="{'expanded': routeLegsExpanded}">
                <div v-for="(leg, idx) in routeLegs" :key="'leg-'+idx" class="route-leg-item">
                  <div class="route-leg-labels">
                    <div class="route-leg-label">
                      <strong>{{ leg.fromLabel }}</strong>
                      →
                      <strong>{{ leg.toLabel }}</strong>
                    </div>
                  </div>
                  <div class="route-leg-stats">
                    <div class="route-leg-stat">{{ leg.distanceKm.toFixed(1) }} km</div>
                    <div class="route-leg-stat">{{ Math.round(leg.durationMin) }} min</div>
                  </div>
                </div>
              </div>

            </div>

            <!-- Quick Filters — always visible when POIs found -->
            <div v-if="showChips && availableSubtypes.length" class="quick-filter-strip" style="margin-bottom:10px;">
              <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:6px;">
                <span style="font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1.2px; color:#34d399;"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f50d.png" alt="🔍" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Filter places</span>
                <button v-if="activeSubtypes.length" style="font-size:10px; font-weight:700; color:#f87171; background:none; border:none; cursor:pointer;" @click="clearSubtypeFilters">Clear all</button>
              </div>
              <div style="display:flex; flex-wrap:wrap; gap:5px;">
                <button
                  v-for="sub in availableSubtypes"
                  :key="'chip-'+sub"
                  class="chip"
                  :class="{'chip-active': activeSubtypes.includes(sub)}"
                  @click="toggleSubtypeChip(sub)">
                  {{ sub }}
                </button>
              </div>
            </div>

            <div v-show="activeTab==='plan'" class="flex flex-col gap-5 overflow-y-auto pr-1" style="max-height: calc(100vh - 12rem);">

              <div class="section-card route-builder-card">
                <div class="section-heading">
                  <h3>Route builder</h3>
                  <span class="text-[11px] text-gray-500 font-semibold uppercase tracking-widest">Start to finish</span>
                </div>

                <div class="relative">
                  <div class="bg-[#f1f5f9]/40 p-4 rounded-2xl border border-[#e2e8f0] shadow-inner">
                    <div class="timeline-container space-y-4">
                      <div class="timeline-line"></div>

                      <div class="relative z-10">
                        <span class="input-icon text-emerald-500">⦿</span>
                        <div class="flex gap-2 items-center">
                          <input id="start"
                                 v-model="positionStart"
                                 @input="autocomplete('start')"
                                 @focus="showAutocompleteStart = true"
                                 @blur="hideAutocomplete('start')"
                                 placeholder="Where are you starting?"
                                 autocomplete="off"
                                 aria-label="Start location"
                                 class="custom-input flex-1 p-3 pl-12 rounded-xl text-sm" />
                          <div v-if="autocompleteLoadingStart" class="input-loading-spinner" style="right:80px;"></div>
                          <!-- Lock/unlock start -->
                          <button
                            @click="toggleStartLock"
                            class="p-1.5 rounded-lg transition flex-shrink-0"
                            :class="startLocked ? 'text-gray-400 hover:text-amber-500 hover:bg-amber-50' : 'text-amber-500 bg-amber-50 border border-amber-200'"
                            :title="startLocked ? 'Locked — click to unlock start' : 'Unlocked — click to lock start'"
                            style="min-height:32px;min-width:32px;">
                            <svg v-if="startLocked" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
                            <svg v-else width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 9.9-1"></path></svg>
                          </button>
                          <!-- Move start down (when unlocked and stops exist) -->
                          <button
                            v-if="!startLocked && stops.length > 0"
                            @click="demoteStart"
                            class="p-0.5 rounded hover:bg-blue-50 text-amber-500 hover:text-blue-500 transition"
                            title="Move start later"
                            style="min-height:24px;min-width:24px;">
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"></polyline></svg>
                          </button>
                          <button
                            @click="useMyLocation"
                            class="text-gray-500 hover:text-blue-400 transition p-1.5 flex-shrink-0"
                            title="Use GPS"
                            aria-label="Use my GPS location"
                            style="min-height:32px;min-width:32px;">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                              <polygon points="3 11 22 2 13 21 11 13 3 11"></polygon>
                            </svg>
                          </button>
                        </div>
                        <ul v-if="showAutocompleteStart && autocompleteResultsStart?.length" class="autocomplete-dropdown">
                          <li
                            v-for="(result, index) in autocompleteResultsStart"
                            :key="'s'+index"
                            class="autocomplete-item"
                            @mousedown.prevent="selectAutocomplete('start', result)">
                            {{ result.display_name }}
                          </li>
                        </ul>
                      </div>

                      <transition-group name="list" tag="div" class="space-y-3">
                        <div v-for="(s,i) in stops" :key="'stop-'+i" class="relative z-10">
                          <span class="input-icon text-gray-400 text-xs font-bold border-gray-700">{{ i + 1 }}</span>
                          <div class="flex gap-2">
                            <div
                              class="flex items-center text-gray-400 hover:text-gray-700 cursor-grab px-1"
                              title="Drag to reorder"
                              draggable="true"
                              @dragstart="dragStartStop(i)"
                              @dragover.prevent="dragOverStop(i)"
                              @drop.prevent="dropStop(i)">
                              <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
                                <circle cx="9" cy="12" r="1"/>
                                <circle cx="9" cy="5" r="1"/>
                                <circle cx="9" cy="19" r="1"/>
                                <circle cx="15" cy="12" r="1"/>
                                <circle cx="15" cy="5" r="1"/>
                                <circle cx="15" cy="19" r="1"/>
                              </svg>
                            </div>
                            <input
                              :id="'stop-'+i"
                              v-model="s.text"
                              @input="autocompleteStop(i)"
                              @focus="$set(showAutocompleteStops, i, true)"
                              @blur="hideAutocompleteStop(i)"
                              placeholder="Add a stop..."
                              autocomplete="off"
                              class="custom-input flex-1 p-2.5 pl-3 rounded-xl text-sm" />
                            <!-- Reorder buttons -->
                            <div class="flex flex-col gap-0.5" v-if="stops.length > 1">
                              <button
                                @click.stop="moveStopUp(i)"
                                :disabled="i === 0"
                                class="p-0.5 rounded hover:bg-blue-50 transition"
                                :class="i === 0 ? 'text-gray-300 cursor-not-allowed' : 'text-gray-400 hover:text-blue-500'"
                                title="Move earlier"
                                style="min-height:20px;min-width:20px;">
                                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="18 15 12 9 6 15"></polyline></svg>
                              </button>
                              <button
                                @click.stop="moveStopDown(i)"
                                :disabled="i >= stops.length - 1"
                                class="p-0.5 rounded hover:bg-blue-50 transition"
                                :class="i >= stops.length - 1 ? 'text-gray-300 cursor-not-allowed' : 'text-gray-400 hover:text-blue-500'"
                                title="Move later"
                                style="min-height:20px;min-width:20px;">
                                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"></polyline></svg>
                              </button>
                            </div>
                            <button
                              @click.stop="removeStop(i)"
                              class="text-gray-500 hover:text-red-400 p-2 rounded-lg hover:bg-gray-100 transition"
                              title="Remove stop">
                              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <line x1="18" y1="6" x2="6" y2="18"></line>
                                <line x1="6" y1="6" x2="18" y2="18"></line>
                              </svg>
                            </button>
                          </div>
                          <ul v-if="showAutocompleteStops[i] && autocompleteResultsStops[i]?.length" class="autocomplete-dropdown">
                            <li
                              v-for="(result, idx) in autocompleteResultsStops[i]"
                              :key="'rs-'+i+'-'+idx"
                              class="autocomplete-item"
                              @mousedown.prevent="selectAutocompleteStop(i, result)">
                              {{ result.display_name }}
                            </li>
                          </ul>
                        </div>
                      </transition-group>

                      <div class="relative z-10">
                        <span class="input-icon text-rose-500"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f4cd.png" alt="📍" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span>
                        <div class="flex gap-2 items-center">
                          <!-- Move end up (when unlocked and stops exist) -->
                          <button
                            v-if="!endLocked && stops.length > 0"
                            @click="promoteEnd"
                            class="p-0.5 rounded hover:bg-blue-50 text-amber-500 hover:text-blue-500 transition flex-shrink-0"
                            title="Move end earlier"
                            style="min-height:24px;min-width:24px;">
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="18 15 12 9 6 15"></polyline></svg>
                          </button>
                          <!-- Lock/unlock end -->
                          <button
                            @click="toggleEndLock"
                            class="p-1.5 rounded-lg transition flex-shrink-0"
                            :class="endLocked ? 'text-gray-400 hover:text-amber-500 hover:bg-amber-50' : 'text-amber-500 bg-amber-50 border border-amber-200'"
                            :title="endLocked ? 'Locked — click to unlock end' : 'Unlocked — click to lock end'"
                            style="min-height:32px;min-width:32px;">
                            <svg v-if="endLocked" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
                            <svg v-else width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 9.9-1"></path></svg>
                          </button>
                          <input id="end"
                                 v-model="positionEnd"
                                 @input="autocomplete('end')"
                                 @focus="showAutocompleteEnd = true"
                                 @blur="hideAutocomplete('end')"
                                 placeholder="Final destination"
                                 autocomplete="off"
                                 aria-label="End location"
                                 class="custom-input flex-1 p-3 pl-3 rounded-xl text-sm" />
                          <div v-if="autocompleteLoadingEnd" class="input-loading-spinner"></div>
                        </div>
                        <ul v-if="showAutocompleteEnd && autocompleteResultsEnd?.length" class="autocomplete-dropdown">
                          <li
                            v-for="(result, index) in autocompleteResultsEnd"
                            :key="'e'+index"
                            class="autocomplete-item"
                            @mousedown.prevent="selectAutocomplete('end', result)">
                            {{ result.display_name }}
                          </li>
                        </ul>
                      </div>
                    </div>

                    <div class="flex justify-between items-center mt-4 pt-3 border-t border-[#e2e8f0]">
                      <div class="flex items-center gap-2">
                        <button
                          @click="addStop"
                          class="text-xs font-semibold text-blue-400 hover:text-blue-300 flex items-center gap-1 py-1 px-2 rounded hover:bg-blue-900/20 transition">
                          <span class="text-lg leading-none">+</span> Add stop
                        </button>
                        <button
                          v-if="stops.length >= 2"
                          @click="smartOrderStops"
                          :disabled="smartOrdering"
                          class="text-xs font-semibold flex items-center gap-1 py-1.5 px-3 rounded-lg transition border"
                          :class="smartOrdering ? 'text-gray-400 bg-gray-50 border-gray-200 cursor-wait' : 'text-emerald-600 bg-emerald-50 border-emerald-200 hover:bg-emerald-100 hover:border-emerald-300'"
                          title="Rearrange stops into a better route">
                          <span v-if="smartOrdering" style="animation:spin .6s linear infinite;display:inline-block;">&#8635;</span>
                          <span v-else>&#10024;</span>
                          Smart Order
                        </button>
                      </div>

                      <div class="flex gap-1 bg-[#f8fafc] p-1 rounded-lg border border-[#e2e8f0]">
                        <button
                          @click="swapStartEnd"
                          class="text-gray-400 hover:text-blue-600 p-1.5 rounded hover:bg-blue-50"
                          title="Swap start and end">
                          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <line x1="12" y1="5" x2="12" y2="19"></line>
                            <polyline points="19 12 12 19 5 12"></polyline>
                          </svg>
                        </button>
                        <div class="w-px bg-gray-200"></div>
                        <button
                          @click="reverseRoute"
                          class="text-gray-400 hover:text-blue-600 p-1.5 rounded hover:bg-blue-50"
                          title="Reverse entire route">
                          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <polyline points="23 4 23 10 17 10"></polyline>
                            <polyline points="1 20 1 14 7 14"></polyline>
                            <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path>
                          </svg>
                        </button>
                        <div class="w-px bg-gray-200"></div>
                        <button
                          @click="useMyLocation"
                          class="text-gray-400 hover:text-blue-600 p-1.5 rounded hover:bg-blue-50"
                          title="Use GPS">
                          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <polygon points="3 11 22 2 13 21 11 13 3 11"></polygon>
                          </svg>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- Navigate route in external apps -->
              <div v-if="hasRoute" style="display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-bottom:4px;">
                <span style="font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:1.2px; color:rgba(71,85,105,.6);"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f5fa.png" alt="🗺" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Open in</span>
                <button
                  @click="openRouteInGoogle"
                  style="display:inline-flex;align-items:center;gap:5px;padding:7px 12px;border-radius:10px;font-size:11px;font-weight:700;border:1px solid rgba(66,133,244,.25);background:rgba(66,133,244,.1);color:#2563eb;cursor:pointer;white-space:nowrap;transition:all .15s;"
                  onmouseover="this.style.background='rgba(66,133,244,.2)'"
                  onmouseout="this.style.background='rgba(66,133,244,.1)'"
                  title="Open full route with all stops in Google Maps">
                  <img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f4cd.png" alt="📍" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Google Maps
                </button>
                <button
                  v-if="canUseWaze()"
                  @click="openRouteInWaze"
                  style="display:inline-flex;align-items:center;gap:5px;padding:7px 12px;border-radius:10px;font-size:11px;font-weight:700;border:1px solid rgba(51,208,255,.25);background:rgba(51,208,255,.08);color:#0891b2;cursor:pointer;white-space:nowrap;transition:all .15s;"
                  onmouseover="this.style.background='rgba(51,208,255,.18)'"
                  onmouseout="this.style.background='rgba(51,208,255,.08)'"
                  title="Open in Waze (single stop only)">
                  <img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f5fa.png" alt="🗺" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Waze
                </button>
                <a
                  :href="'http://maps.apple.com/?saddr=' + (positionStartCoords.length===2 ? positionStartCoords[1]+','+positionStartCoords[0] : '') + '&daddr=' + (positionEndCoords.length===2 ? positionEndCoords[1]+','+positionEndCoords[0] : '')"
                  target="_blank"
                  rel="noopener noreferrer"
                  style="display:inline-flex;align-items:center;gap:5px;padding:7px 12px;border-radius:10px;font-size:11px;font-weight:700;border:1px solid rgba(52,199,89,.25);background:rgba(52,199,89,.08);color:#059669;cursor:pointer;white-space:nowrap;text-decoration:none;transition:all .15s;"
                  onmouseover="this.style.background='rgba(52,199,89,.18)'"
                  onmouseout="this.style.background='rgba(52,199,89,.08)'"
                  title="Open in Apple Maps">
                  <img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f34f.png" alt="🍏" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Apple Maps
                </a>
              </div>

              <!-- Corridor width + Find Stops -->
              <div class="flex items-center gap-3">
                <div class="flex-1 flex flex-col items-center bg-[#f8fafc] rounded-2xl border border-[#e2e8f0] p-2 shadow-sm h-full justify-center">
                  <span class="text-[10px] text-gray-500 uppercase tracking-widest font-bold mb-1">Corridor width</span>
                  <div class="flex items-center w-full">
                    <button
                      class="w-9 h-8 flex items-center justify-center text-gray-400 hover:bg-blue-50 hover:text-blue-600 rounded-lg transition"
                      @click="bumpRadius(-0.1)"
                      :disabled="searchRadius<=0.1"
                      title="Reduce corridor">
                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <line x1="5" y1="12" x2="19" y2="12"></line>
                      </svg>
                    </button>
                    <div class="flex-1 text-center">
                      <div class="text-sm font-bold text-blue-400">{{ searchRadius.toFixed(1) }}</div>
                      <div class="text-[10px] font-medium text-gray-500">Miles</div>
                    </div>
                    <button
                      class="w-9 h-8 flex items-center justify-center text-gray-400 hover:bg-blue-50 hover:text-blue-600 rounded-lg transition"
                      @click="bumpRadius(0.1)"
                      :disabled="searchRadius>=5.0"
                      title="Increase corridor">
                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <line x1="12" y1="5" x2="12" y2="19"></line>
                        <line x1="5" y1="12" x2="19" y2="12"></line>
                      </svg>
                    </button>
                  </div>
                </div>

                <button
                  @click="isAppFull = true; getRoute()"
                  class="btn-glow-intense text-white px-7 py-3 rounded-xl font-extrabold shadow-lg flex items-center justify-center gap-2 transition-transform active:scale-95 z-20"
                  title="Build route and find places">
                  <div v-if="loading" class="spinner"></div>
                  <span v-else class="tracking-wide text-sm uppercase">Find Stops</span>
                </button>

              </div>

              <div v-if="loading" class="text-center text-xs text-gray-500 py-1" style="animation:pulse 1.5s infinite;">
                Searching for places along your route...
              </div>

              <div v-if="errorMessage" class="p-3 bg-red-900/20 border border-red-800/50 rounded-2xl text-red-200 text-xs flex items-center gap-2">
                <img src="https://s.w.org/images/core/emoji/17.0.2/72x72/26a0.png" alt="⚠" class="wp-smiley" style="height: 1em; max-height: 1em;" /> {{ errorMessage }}
                <button @click="errorMessage=''" class="ml-auto text-red-400 hover:text-red-200 text-[11px]">✕</button>
              </div>

              <div v-if="hasRoute || positionStart || positionEnd || stops.length" class="flex justify-end items-center gap-2">
                <div v-if="showClearConfirm" class="flex items-center gap-2 bg-red-50 border border-red-200 rounded-xl px-3 py-1.5" style="animation:fadeInUp .2s ease;">
                  <span class="text-[11px] text-red-500 font-semibold">Clear this route?</span>
                  <button @click="clearRoute" class="text-[11px] font-bold text-white bg-red-500 hover:bg-red-600 px-3 py-1 rounded-lg transition" style="min-height:28px;">Clear</button>
                  <button @click="cancelClearRoute" class="text-[11px] font-bold text-gray-500 bg-white border border-gray-200 hover:bg-gray-50 px-3 py-1 rounded-lg transition" style="min-height:28px;">Cancel</button>
                </div>
                <button v-else @click="confirmClearRoute" class="text-[11px] text-gray-500 hover:text-red-400 transition flex items-center gap-1">
                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
                  Clear route
                </button>
              </div>

              <div class="section-card">
                <div class="section-heading">
                  <h3>Categories</h3>
                  <div class="flex gap-2">
                    <button @click="selectAllCategories" class="text-[10px] text-blue-400 hover:text-blue-300 font-bold uppercase tracking-wider transition">All</button>
                    <span class="text-gray-400">|</span>
                    <button @click="deselectAllCategories" class="text-[10px] text-gray-500 hover:text-gray-700 font-bold uppercase tracking-wider transition">None</button>
                  </div>
                </div>

                <div class="bundle-grid">
                  <label class="bundle-card group">
                    <input type="checkbox" v-model="categories.foodDrink" class="absolute opacity-0 w-0 h-0">
                    <svg class="check-mark w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                    <div class="bundle-card-content">
                      <div class="bundle-emoji"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f37d.png" alt="🍽" class="wp-smiley" style="height: 1em; max-height: 1em;" /></div>
                      <div class="bundle-title">Food & Drink</div>
                      <div class="bundle-description">Restaurants, cafes, pubs, ice cream, wine bars</div>
                    </div>
                  </label>

                  <label class="bundle-card group">
                    <input type="checkbox" v-model="categories.essentials" class="absolute opacity-0 w-0 h-0">
                    <svg class="check-mark w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                    <div class="bundle-card-content">
                      <div class="bundle-emoji"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/26fd.png" alt="⛽" class="wp-smiley" style="height: 1em; max-height: 1em;" /></div>
                      <div class="bundle-title">Essentials</div>
                      <div class="bundle-description">Fuel, toilets, motorway services, baby change, chemists</div>
                    </div>
                  </label>

                  <label class="bundle-card group">
                    <input type="checkbox" v-model="categories.exploreNature" class="absolute opacity-0 w-0 h-0">
                    <svg class="check-mark w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                    <div class="bundle-card-content">
                      <div class="bundle-emoji"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f3de.png" alt="🏞" class="wp-smiley" style="height: 1em; max-height: 1em;" /></div>
                      <div class="bundle-title">Nature & Views</div>
                      <div class="bundle-description">Parks, lakes, rivers, beaches, viewpoints, picnic areas</div>
                    </div>
                  </label>

                  <label class="bundle-card group">
                    <input type="checkbox" v-model="categories.cultureFun" class="absolute opacity-0 w-0 h-0">
                    <svg class="check-mark w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                    <div class="bundle-card-content">
                      <div class="bundle-emoji"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f3f0.png" alt="🏰" class="wp-smiley" style="height: 1em; max-height: 1em;" /></div>
                      <div class="bundle-title">Fun & Culture</div>
                      <div class="bundle-description">Zoos, theme parks, soft play, aquariums, arcades, museums</div>
                    </div>
                  </label>

                  <label class="bundle-card group">
                    <input type="checkbox" v-model="categories.oddities" class="absolute opacity-0 w-0 h-0">
                    <svg class="check-mark w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                    <div class="bundle-card-content">
                      <div class="bundle-emoji"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f5ff.png" alt="🗿" class="wp-smiley" style="height: 1em; max-height: 1em;" /></div>
                      <div class="bundle-title">Oddities</div>
                      <div class="bundle-description">Weird statues, roadside art, big things, quirky discoveries</div>
                    </div>
                  </label>

                  <label class="bundle-card group">
                    <input type="checkbox" v-model="categories.stay" class="absolute opacity-0 w-0 h-0">
                    <svg class="check-mark w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                    <div class="bundle-card-content">
                      <div class="bundle-emoji"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f6cc.png" alt="🛌" class="wp-smiley" style="height: 1em; max-height: 1em;" /></div>
                      <div class="bundle-title">Stay Overnight</div>
                      <div class="bundle-description">Hotels, motels, B&amp;Bs, holiday parks, campsites</div>
                    </div>
                  </label>

                  <label class="bundle-card group">
                    <input type="checkbox" v-model="categories.transport" class="absolute opacity-0 w-0 h-0">
                    <svg class="check-mark w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                    <div class="bundle-card-content">
                      <div class="bundle-emoji"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f689.png" alt="🚉" class="wp-smiley" style="height: 1em; max-height: 1em;" /></div>
                      <div class="bundle-title">Transport</div>
                      <div class="bundle-description">Park and ride, car parks, train stations, tram stops</div>
                    </div>
                  </label>

                  <label class="bundle-card group">
                    <input type="checkbox" v-model="categories.services" class="absolute opacity-0 w-0 h-0">
                    <svg class="check-mark w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                    <div class="bundle-card-content">
                      <div class="bundle-emoji"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f6cd.png" alt="🛍" class="wp-smiley" style="height: 1em; max-height: 1em;" /></div>
                      <div class="bundle-title">Shops & Services</div>
                      <div class="bundle-description">Supermarkets, shops, hospitals, pharmacies, churches</div>
                    </div>
                  </label>
                </div>
              </div>

              <!-- Route Mode / Trip Style -->
              <div class="section-card" style="background:linear-gradient(135deg,rgba(241,245,249,.94),rgba(248,250,252,.9));">
                <div class="section-heading">
                  <h3>Trip Style</h3>
                  <span class="text-[11px] text-gray-500 font-semibold uppercase tracking-widest">What kind of drive?</span>
                </div>
                <div style="display:grid; grid-template-columns:repeat(3,1fr); gap:8px;">
                  <button
                    v-for="mode in ['family','scenic','practical','ev','quickbreak','fun']"
                    :key="'mode-'+mode"
                    @click="applyRouteMode(mode)"
                    class="flex flex-col items-center gap-1 p-3 rounded-xl border transition-all text-center"
                    :class="routeMode === mode
                      ? 'bg-blue-50 border-blue-300 shadow-md text-blue-700'
                      : 'bg-white border-gray-200 hover:border-blue-200 hover:bg-blue-50/50 text-gray-600'"
                    style="min-height:64px;">
                    <span style="font-size:22px;">{{ routeModeIcon(mode) }}</span>
                    <span class="text-[11px] font-bold uppercase tracking-wide">{{ routeModeLabel(mode) }}</span>
                  </button>
                </div>
              </div>

              <!-- Smart Suggestions -->
              <div v-if="smartSuggestions.length && showSmartSuggestions && hasRoute" class="section-card" style="background:linear-gradient(135deg,rgba(52,211,153,.06),rgba(16,185,129,.04));border-color:rgba(52,211,153,.25);">
                <div class="section-heading">
                  <h3 style="font-size:14px;">Suggestions for this drive</h3>
                  <button @click="showSmartSuggestions = false" class="text-[10px] text-gray-400 hover:text-gray-600" style="min-height:24px;">Dismiss</button>
                </div>
                <div class="space-y-2">
                  <div
                    v-for="(sg, si) in smartSuggestions"
                    :key="'sg-'+si"
                    class="flex items-center gap-3 p-3 rounded-xl bg-white border border-gray-100 hover:border-emerald-200 hover:shadow-sm cursor-pointer transition-all"
                    @click="applySuggestion(sg)">
                    <span style="font-size:20px;">{{ sg.icon }}</span>
                    <span class="flex-1 text-sm text-gray-700">{{ sg.text }}</span>
                    <span class="text-[10px] font-bold text-emerald-600 bg-emerald-50 border border-emerald-200 px-2.5 py-1 rounded-lg whitespace-nowrap" style="min-height:auto;">{{ sg.label }}</span>
                  </div>
                </div>
              </div>

              <!-- Save Route Prompt -->
              <div v-if="showSavePrompt && hasRoute && !savePromptDismissed" class="section-card" style="background:linear-gradient(135deg,rgba(59,130,246,.06),rgba(167,139,250,.04));border-color:rgba(96,165,250,.25);">
                <div class="flex items-start gap-3">
                  <span style="font-size:24px;"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f4be.png" alt="💾" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span>
                  <div class="flex-1">
                    <div class="font-bold text-sm text-gray-800 mb-1">Save this trip for later?</div>
                    <div class="text-xs text-gray-500 mb-3">Keep this journey to come back to whenever you want.</div>
                    <div class="flex gap-2 flex-wrap">
                      <input
                        type="text"
                        v-model="routeCustomName"
                        class="custom-input text-sm rounded-lg px-3 py-1.5 flex-1 border border-gray-200"
                        placeholder="Trip name (optional)"
                        style="min-height:36px; min-width:120px;"
                        @keydown.enter="saveRouteToWP(); showSavePrompt = false;">
                      <button
                        @click="saveRouteToWP(); showSavePrompt = false"
                        class="text-xs font-bold text-white px-4 py-1.5 rounded-lg transition"
                        style="background:linear-gradient(135deg,#10b981,#059669); min-height:36px;">
                        Save Route
                      </button>
                      <button
                        @click="showSavePrompt = false; savePromptDismissed = true"
                        class="text-xs text-gray-400 hover:text-gray-600 px-2 transition"
                        style="min-height:36px;">
                        Not now
                      </button>
                    </div>
                  </div>
                </div>
              </div>


            </div>

            <div v-show="activeTab==='stops'" class="flex flex-col gap-3 h-full overflow-hidden">
              <div class="section-heading shrink-0">
                <h3>Places Along Your Route</h3>
                <div class="flex items-center gap-2">
                  <button v-if="sortedPois.length" @click="copyPoiList" class="text-[10px] text-gray-500 hover:text-blue-400 font-bold uppercase tracking-wider transition" title="Copy list to clipboard"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f4cb.png" alt="📋" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Copy</button>
                  <select v-model="poiSort" class="text-xs bg-[#f8fafc] border border-[#e2e8f0] rounded-xl p-2 text-gray-700 outline-none focus:border-blue-500">
                    <option value="distance">Sort by distance</option>
                    <option value="name">Sort by name</option>
                    <option value="category">Sort by category</option>
                  </select>
                </div>
              </div>

              <div v-if="poiSearching" class="poi-searching-bar" style="overflow:hidden;"></div>
              <div class="text-xs text-gray-500 -mt-2 mb-1">
                <span v-if="poiSearching" style="color:#60a5fa;">Searching for places...</span>
                <span v-else>Found {{ stopsCount }} place<span v-if="stopsCount !== 1">s</span>.</span>
              </div>

              <div class="flex-1 overflow-y-auto space-y-2 pr-1">
                <div v-if="sortedPois.length === 0" class="empty-state">
                  <svg class="empty-state-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1">
                    <circle cx="12" cy="12" r="10"></circle>
                    <path d="M16 16s-1.5-2-4-2-4 2-4 2"></path>
                    <line x1="9" y1="9" x2="9.01" y2="9"></line>
                    <line x1="15" y1="9" x2="15.01" y2="9"></line>
                  </svg>
                  <div class="empty-state-title">No places yet</div>
                  <div class="empty-state-message">Build a route to see interesting stops along the way.</div>
                </div>

                <div
                  v-for="(p,i) in sortedPois"
                  :key="i"
                  class="result-card hover:border-blue-500 cursor-pointer group"
                  style="padding: 14px 16px;"
                  @click="panToPoi(p)">
                  <div style="display:flex; gap:14px; align-items:flex-start;">
                    <div class="poi-icon-wrap">
                      {{ p.icon || '<img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f4cd.png" alt="📍" class="wp-smiley" style="height: 1em; max-height: 1em;" />' }}
                    </div>
                    <div style="flex:1; min-width:0;">
                      <div style="font-weight:700; font-size:14px; color:var(--color-text-primary); margin-bottom:4px;" class="truncate group-hover:text-blue-400 transition">{{ p.name }}</div>
                      <div style="display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:4px;">
                        <span class="poi-cat-badge">{{ p.category }}</span>
                        <span v-if="p.distance != null" style="font-size:11px; font-weight:700; color:#34d399;">{{ p.distance.toFixed(1) }} km from route</span>
                      </div>
                      <div v-if="p.addr" style="font-size:12px; color:#64748b; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:6px;"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f4cd.png" alt="📍" class="wp-smiley" style="height: 1em; max-height: 1em;" /> {{ p.addr }}</div>
                      <div style="display:flex; gap:6px; flex-wrap:wrap;" @click.stop>
                        <button @click="addPoiAsStop(p)" class="poi-action-btn poi-action-route" title="Add as stop on route">
                          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
                          Route
                        </button>
                        <button @click="toggleFavourite(p)" class="poi-action-btn" :class="{'poi-action-fav-active': isFavourited(p)}" :title="isFavourited(p) ? 'Remove favourite' : 'Save favourite'">
                          {{ isFavourited(p) ? '<img src="https://s.w.org/images/core/emoji/17.0.2/72x72/2b50.png" alt="⭐" class="wp-smiley" style="height: 1em; max-height: 1em;" />' : '☆' }} Fav
                        </button>
                        <button @click="loadNearbyForCard(p, i)" class="poi-action-btn" :disabled="p._nearbyLoading" title="Show nearby places">
                          {{ p._nearbyLoading ? '<img src="https://s.w.org/images/core/emoji/17.0.2/72x72/23f3.png" alt="⏳" class="wp-smiley" style="height: 1em; max-height: 1em;" />' : '<img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f4cd.png" alt="📍" class="wp-smiley" style="height: 1em; max-height: 1em;" />' }} Nearby
                        </button>
                      </div>
                      <!-- Nearby places inline -->
                      <div v-if="p._nearby && p._nearby.length" style="margin-top:8px; padding:8px; border-radius:10px; border:1px solid rgba(148,163,184,.1); background:rgba(255,255,255,.5);">
                        <div style="font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:rgba(148,163,184,.5); margin-bottom:4px;"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f4cd.png" alt="📍" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Nearby</div>
                        <div v-for="nb in p._nearby" :key="nb.name" style="display:flex; align-items:center; gap:6px; padding:4px 2px; font-size:12px; cursor:pointer; border-radius:6px;" class="hover:bg-blue-50" @click.stop="panToNearby(nb)">
                          <span>{{ nb.icon }}</span>
                          <span style="flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">{{ nb.name }}<span v-if="nb.type" style="color:#64748b; font-size:10px; font-weight:500;"> · {{ nb.type }}</span></span>
                          <span v-if="nb.dist" style="color:#059669; font-weight:600; font-size:11px;">{{ nb.dist }}m</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div v-show="activeTab==='saved'" class="flex flex-col gap-4 h-full overflow-hidden">
              <div class="section-heading">
                <h3>Saved Routes</h3>
                <span class="text-[11px] text-gray-500 font-semibold uppercase tracking-widest">{{ savedRoutesCount }} total</span>
              </div>

              <div class="flex-1 overflow-y-auto space-y-3 pr-1">
                <div v-if="savedRoutesCount === 0" class="empty-state">
                  <div style="font-size: 48px; opacity: 0.6;"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f4cc.png" alt="📌" class="wp-smiley" style="height: 1em; max-height: 1em;" /></div>
                  <div class="empty-state-title">No saved routes</div>
                  <div class="empty-state-message">Create and save your routes to access them later.</div>
                </div>

                <div
                  v-for="(r,i) in savedRoutes"
                  :key="'route'+i"
                  class="saved-card p-3 flex justify-between items-start cursor-pointer group"
                  @click="loadSavedRoute(i)">
                  <div class="flex items-start gap-3 overflow-hidden flex-1">
                    <span class="text-lg pt-0.5"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f6e3.png" alt="🛣" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span>
                    <div class="overflow-hidden flex-1">
                      <div class="font-medium text-sm truncate text-gray-800">{{ r.name || 'Untitled Route' }}</div>
                      <div class="text-xs text-gray-500 truncate">{{ r.start && r.start.label ? r.start.label.split(',')[0] : '' }} <span class="text-gray-400" v-if="r.end && r.end.label">→</span> {{ r.end && r.end.label ? r.end.label.split(',')[0] : '' }}</div>
                    </div>
                  </div>
                  <button @click.stop="confirmDeleteIndex = (confirmDeleteIndex === i ? -1 : i)" class="text-gray-500 hover:text-red-400 p-1 transition flex-shrink-0" title="Delete route" aria-label="Delete route"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f5d1.png" alt="🗑" class="wp-smiley" style="height: 1em; max-height: 1em;" /></button>
                  <div v-if="confirmDeleteIndex === i" class="delete-confirm-wrap">
                    <span>Delete?</span>
                    <button @click.stop="deleteSavedRoute(i); confirmDeleteIndex = -1" style="background:#dc2626;color:#fff;">Yes</button>
                    <button @click.stop="confirmDeleteIndex = -1" style="background:rgba(241,245,249,.9);color:#475569;border:1px solid rgba(30,41,59,.15);">No</button>
                  </div>
                </div>
              </div>

              <div class="section-card">
                <div class="section-heading">
                  <h4>Saved places</h4>
                  <span class="text-[11px] text-gray-500 font-semibold uppercase tracking-widest">{{ favouritesList.length }} total</span>
                </div>

                <div v-if="favouritesList.length === 0" class="text-sm text-gray-500 italic p-2">No saved places yet.</div>

                <div class="space-y-2">
                  <div
                    v-for="(p,i) in favouritesList"
                    :key="'fav'+i"
                    class="saved-card p-3 flex justify-between items-center cursor-pointer"
                    @click="panToPoi(p)">
                    <div class="flex items-center gap-2 overflow-hidden">
                      <span class="text-lg">{{ p.icon || '<img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f4cd.png" alt="📍" class="wp-smiley" style="height: 1em; max-height: 1em;" />' }}</span>
                      <div class="font-medium text-sm truncate text-gray-800">{{ p.name }}</div>
                    </div>
                    <button @click.stop="toggleFavourite(p)" class="text-gray-500 hover:text-red-400 p-1 transition" title="Remove saved place"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f5d1.png" alt="🗑" class="wp-smiley" style="height: 1em; max-height: 1em;" /></button>
                  </div>
                </div>
              </div>

            </div>

          </div>
        </aside>

        <section class="flex-1 relative z-0">
          <div id="map" style="position:relative;">
            <div class="map-overlay-instruction" :class="{'hidden': hasRoute}">
              <div class="map-overlay-text">Enter a start and end point to begin</div>
            </div>
            <!-- Map overlay buttons -->
            <div class="map-toolbar-row">
              <button
                class="map-tool-btn"
                :class="{'map-tool-btn-active': addByClickEnabled}"
                @click="toggleAddByClick"
                :title="addByClickEnabled ? 'Click mode ON — tap map to add stop' : 'Tap to add stops by clicking map'"
                :aria-label="addByClickEnabled ? 'Disable click to add' : 'Enable click to add'">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
                  <circle cx="12" cy="10" r="3"></circle>
                </svg>
                <span class="map-tool-label">{{ addByClickEnabled ? 'Adding...' : 'Add stop' }}</span>
              </button>
              <button
                class="map-tool-btn"
                @click="toggleAppFull"
                :title="isAppFull ? 'Exit fullscreen' : 'Fullscreen'"
                :aria-label="isAppFull ? 'Exit fullscreen' : 'Enter fullscreen'">
                <svg v-if="!isAppFull" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                  <polyline points="15 3 21 3 21 9"></polyline>
                  <polyline points="9 21 3 21 3 15"></polyline>
                  <line x1="21" y1="3" x2="14" y2="10"></line>
                  <line x1="3" y1="21" x2="10" y2="14"></line>
                </svg>
                <svg v-else width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                  <polyline points="4 14 10 14 10 20"></polyline>
                  <polyline points="20 10 14 10 14 4"></polyline>
                  <line x1="14" y1="10" x2="21" y2="3"></line>
                  <line x1="3" y1="21" x2="10" y2="14"></line>
                </svg>
                <span class="map-tool-label">{{ isAppFull ? 'Minimise' : 'Fullscreen' }}</span>
              </button>
            </div>

            <!-- Map hint banner -->
            <transition name="hint-fade">
              <div v-if="mapHint" class="map-hint-banner" @click="dismissMapHint">
                {{ mapHint }}
                <span style="margin-left:8px; opacity:.6; font-size:11px;">✕</span>
              </div>
            </transition>

            <!-- Map overlay stats strip — pinned to bottom of map -->
            <div class="map-stats-strip" v-if="hasRoute">
              <div class="map-stat-chip">
                <span><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f6e3.png" alt="🛣" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span>
                <strong>{{ routeDistanceKm ? routeDistanceKm.toFixed(0) + ' km' : '—' }}</strong>
              </div>
              <div class="map-stat-chip">
                <span><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/23f1.png" alt="⏱" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span>
                <strong>{{ routeDurationMin ? Math.round(routeDurationMin) + ' min' : '—' }}</strong>
              </div>
              <div class="map-stat-chip">
                <span><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f50d.png" alt="🔍" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span>
                <strong>{{ searchRadius.toFixed(1) }} mi corridor</strong>
              </div>
              <div class="map-stat-chip">
                <span><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f4cd.png" alt="📍" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span>
                <strong>{{ pois.length }} places</strong>
              </div>
              <div class="map-stat-chip" style="cursor:pointer;" @click.stop="evMode = !evMode; getRoute()" :style="evMode ? 'background:rgba(250,204,21,.15);border-color:rgba(250,204,21,.4);color:#fbbf24;' : ''">
                <span><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/26a1.png" alt="⚡" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span>
                <strong>{{ evMode ? 'EV On' : 'EV Off' }}</strong>
              </div>
            </div>
          </div>
        </section>

      </main>
    </div>
  </div>
</div>
</div>

<!-- Toast Container -->
<div id="toast-container"></div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@turf/turf@6.5.0/turf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="https://cdn.jsdelivr.net/npm/leaflet.markercluster@1.5.3/dist/leaflet.markercluster.js"></script>
<script src="https://unpkg.com/opening_hours@3.6.0/opening_hours.js"></script>

<script src="https://tantrummingtrailblazers.com/wp-content/plugins/make%20drive%20fun2//app1_with_share1w33222aaa.js?v=1774838514"></script>
</body>
</html>
</div></p>



<div class="mmdf-callout">
  <div class="mmdf-callout__badge">NEW</div>
  <div class="mmdf-callout__content">
    <strong>AI Prompt Best Practices</strong> — I’ve launched a punchy, no-fluff prompt series in my leadership newsletter. Make sure you subscribe so you don’t miss any posts!
    <a class="mmdf-callout__link"
       href="https://www.linkedin.com/newsletters/the-leadership-playbook-7380437512806100992/?utm_source=site&#038;utm_medium=callout&#038;utm_campaign=newsletter"
       target="_blank" rel="noopener">Read it on LinkedIn →</a>
  </div>
</div>

<style>
/* Scoped styles for the MMDF Callout */
.mmdf-callout {
  /* Brand Palette Integration */
  --bg: #f8fafc;          /* Slate-50 */
  --ink: #1e293b;         /* Slate-800 */
  --border: #e2e8f0;      /* Slate-200 */
  --accent: #2563eb;      /* Brand Blue */
  --accent-ink: #ffffff;  /* White text */
  --link: #2563eb;        /* Link Blue */

  display: flex; 
  align-items: flex-start; 
  gap: 12px;
  padding: 16px 20px; 
  margin: 30px auto; /* Centered with vertical spacing */
  max-width: 800px;  /* Matches your other widgets */
  
  border-radius: 16px;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--border);
  box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.05);
  
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.95rem;
  line-height: 1.5;
}

.mmdf-callout__badge {
  flex: 0 0 auto;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 800; 
  font-size: 0.7rem;
  letter-spacing: 0.05em; 
  text-transform: uppercase;
  
  color: var(--accent-ink); 
  background: var(--accent);
  border-radius: 6px; 
  padding: 4px 8px; 
  margin-top: 2px;
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.2);
}

.mmdf-callout__content { 
  flex: 1 1 auto; 
}

.mmdf-callout__link {
  display: inline-block; 
  margin-left: 6px;
  font-weight: 700; 
  text-decoration: none; 
  color: var(--link);
  transition: opacity 0.2s;
}

.mmdf-callout__link:hover { 
  opacity: 0.8; 
  text-decoration: underline;
}

/* Dark Mode Support (Optional - based on user system) */
@media (prefers-color-scheme: dark) {
  .mmdf-callout {
    --bg: #0f172a; 
    --ink: #e2e8f0; 
    --border: #1e293b;
    --link: #60a5fa;
  }
}
</style>



<p class="has-black-color has-text-color has-link-color wp-elements-9ac00cf961d1ea846fe5a532228b76c6"></p>



<div class="wp-block-group is-layout-constrained wp-block-group-is-layout-constrained">
<div class="wp-block-group is-layout-constrained wp-block-group-is-layout-constrained">
<div id="mmdf-features-wrapper">

  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&#038;display=swap" rel="stylesheet">

  <style>
    /* SCOPED STYLES */
    #mmdf-features-wrapper {
      --m-primary: #2563eb;
      --m-dark: #0f172a;
      --m-surface: #f8fafc;
      --m-border: #e2e8f0;
      
      font-family: 'Inter', system-ui, sans-serif;
      max-width: 800px;
      margin: 40px auto;
      color: var(--m-dark);
    }

    /* HEADINGS */
    #mmdf-features-wrapper h2 {
      font-size: 1.8rem;
      font-weight: 800;
      text-align: center;
      margin-bottom: 30px;
      letter-spacing: -0.02em;
    }
    
    #mmdf-features-wrapper h3 {
      font-size: 1.2rem;
      font-weight: 700;
      margin: 0 0 8px;
    }

    /* GRID LAYOUT FOR CARDS */
    .mmdf-feature-grid {
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      gap: 20px;
      margin-bottom: 40px;
    }
    @media(min-width: 600px) {
      .mmdf-feature-grid { grid-template-columns: repeat(2, 1fr); }
    }

    /* FEATURE CARDS */
    .feature-card {
      background: #fff;
      border: 1px solid var(--m-border);
      border-radius: 16px;
      padding: 24px;
      transition: transform 0.2s, box-shadow 0.2s;
    }
    .feature-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 10px 20px rgba(0,0,0,0.05);
      border-color: #cbd5e1;
    }

    .feature-icon {
      font-size: 2rem; margin-bottom: 12px; display: block;
    }

    .feature-text {
      font-size: 0.95rem; line-height: 1.6; color: #475569;
    }

    /* CHECKLIST SECTION */
    .checklist-box {
      background: var(--m-surface);
      border-radius: 20px;
      padding: 32px;
      margin-bottom: 40px;
    }

    .checklist-grid {
      display: grid;
      gap: 24px;
    }
    @media(min-width: 600px) {
      .checklist-grid { grid-template-columns: repeat(2, 1fr); }
    }

    .check-item h4 {
      margin: 0 0 4px; font-size: 1rem; font-weight: 700;
      display: flex; align-items: center; gap: 8px;
    }
    .check-icon { color: #10b981; } /* Green Check */

    .check-desc { font-size: 0.9rem; color: #64748b; line-height: 1.5; }

    /* CALL TO ACTION BOX */
    .adventure-cta {
      background: var(--m-dark);
      color: white;
      text-align: center;
      padding: 32px 24px;
      border-radius: 20px;
      box-shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.3);
    }
    .adventure-cta h3 { font-size: 1.5rem; margin-bottom: 12px; color: white; }
    .adventure-cta p { font-size: 1.1rem; color: #cbd5e1; max-width: 60ch; margin: 0 auto; line-height: 1.6; }

  </style>

  <h2>Why Use Make My Drive Fun?</h2>
  
  <div class="mmdf-feature-grid">
    <div class="feature-card">
      <span class="feature-icon"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f5fa.png" alt="🗺" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span>
      <h3>Customized Routes</h3>
      <p class="feature-text">Map your journey instantly. Just enter start and end points to generate a route that hugs the road.</p>
    </div>

    <div class="feature-card">
      <span class="feature-icon"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f4f2.png" alt="📲" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span>
      <h3>Quick Share</h3>
      <p class="feature-text">Plan once, share everywhere. Post to Facebook, X (Twitter), WhatsApp, or copy a direct link.</p>
    </div>

    <div class="feature-card">
      <span class="feature-icon"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f48e.png" alt="💎" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span>
      <h3>Discover Hidden Gems</h3>
      <p class="feature-text">Don&#8217;t just drive past. Find historic castles, local food, parks, and beaches right on your path.</p>
    </div>

    <div class="feature-card">
      <span class="feature-icon"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/2139.png" alt="ℹ" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span>
      <h3>Smart Details</h3>
      <p class="feature-text">Get the info you need: descriptions, addresses, opening hours, and even Wikipedia summaries.</p>
    </div>

    <div class="feature-card">
      <span class="feature-icon"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f9ed.png" alt="🧭" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span>
      <h3>Seamless Navigation</h3>
      <p class="feature-text">One-tap handoff. Open any stop directly in Google Maps, Apple Maps, or Waze to start driving.</p>
    </div>

    <div class="feature-card">
      <span class="feature-icon"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/26a1.png" alt="⚡" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span>
      <h3>Interactive Map</h3>
      <p class="feature-text">Powered by OpenStreetMap and Leaflet, giving you detailed, zoomable, and reliable mapping.</p>
    </div>
  </div>

  <div class="checklist-box">
    <h2 style="margin-top:0;">Features at a Glance</h2>
    <div class="checklist-grid">
      
      <div class="check-item">
        <h4><span class="check-icon">✓</span> Historic Sites</h4>
        <p class="check-desc">Uncover rich history along your route with detailed Wikipedia summaries.</p>
      </div>

      <div class="check-item">
        <h4><span class="check-icon">✓</span> Food &#038; Dining</h4>
        <p class="check-desc">Discover the best local bakeries, pubs, cafes, and bars to satisfy cravings.</p>
      </div>

      <div class="check-item">
        <h4><span class="check-icon">✓</span> Natural Attractions</h4>
        <p class="check-desc">Find parks, lakes, beaches, and campsites for a refreshing outdoor break.</p>
      </div>

      <div class="check-item">
        <h4><span class="check-icon">✓</span> Convenience</h4>
        <p class="check-desc">Locate essentials like petrol stations, toilets, shops, and post boxes.</p>
      </div>

    </div>
  </div>

  <div class="adventure-cta">
    <h3>Make Every Journey an Adventure</h3>
    <p>Don’t just travel—explore. The Fun Route Planner transforms ordinary trips into extraordinary adventures, highlighting exciting stops tailored to your interests.</p>
  </div>

</div>
</div>
</div>



<div id="mmdf-search-wrapper">

  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&#038;display=swap" rel="stylesheet">

  <style>
    /* SCOPED STYLES */
    #mmdf-search-wrapper {
      --m-primary: #2563eb;
      --m-dark: #0f172a;
      --m-surface: #f8fafc;
      --m-border: #cbd5e1;
      
      font-family: 'Inter', system-ui, sans-serif;
      margin: 40px auto;
      max-width: 800px;
      border: 1px solid var(--m-border);
      border-radius: 12px;
      overflow: hidden;
      background: #fff;
    }

    /* The Button */
    #mmdf-search-toggle {
      width: 100%;
      background: #f1f5f9;
      border: none;
      padding: 16px 20px;
      text-align: left;
      font-weight: 700;
      font-size: 1rem;
      color: var(--m-dark);
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      transition: background 0.2s;
    }
    #mmdf-search-toggle:hover { background: #e2e8f0; }
    
    /* The Arrow Icon */
    .mmdf-chevron {
      transition: transform 0.3s ease;
      font-size: 0.8rem; opacity: 0.6;
    }
    #mmdf-search-toggle[aria-expanded="true"] .mmdf-chevron {
      transform: rotate(180deg);
    }

    /* The Content Area */
    #mmdf-search-content {
      display: none; /* JS toggles this */
      background: #fff;
    }
    #mmdf-search-content.open { display: block; animation: mmdf-fade 0.3s ease-out; }

    @keyframes mmdf-fade { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }

    /* The Table Styling */
    .mmdf-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.95rem;
    }
    
    .mmdf-table th {
      text-align: left;
      background: var(--m-primary);
      color: white;
      padding: 12px 20px;
      font-weight: 600;
      font-size: 0.85rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .mmdf-table td {
      padding: 14px 20px;
      border-bottom: 1px solid #f1f5f9;
      color: #334155;
      line-height: 1.5;
    }
    
    .mmdf-table tr:last-child td { border-bottom: none; }
    .mmdf-table tr:nth-child(even) { background: #f8fafc; }
    
    .search-term { font-family: monospace; color: var(--m-primary); font-weight: 600; background: #eff6ff; padding: 4px 8px; border-radius: 4px; }

    /* Mobile Responsive Logic */
    @media (max-width: 600px) {
      .mmdf-table thead { display: none; } /* Hide headers on mobile */
      .mmdf-table tr { display: block; border-bottom: 2px solid #e2e8f0; padding: 10px; }
      .mmdf-table td { 
        display: block; 
        padding: 6px 10px; 
        border: none;
      }
      .mmdf-table td:last-child {
        font-size: 0.9rem;
        color: #64748b;
        margin-bottom: 6px;
      }
    }
  </style>

  <button id="mmdf-search-toggle" aria-expanded="false" aria-controls="mmdf-search-content">
    <span><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f50d.png" alt="🔍" class="wp-smiley" style="height: 1em; max-height: 1em;" /> What are people searching for?</span>
    <span class="mmdf-chevron">▼</span>
  </button>

  <div id="mmdf-search-content">
    <table class="mmdf-table">
      <thead>
        <tr>
          <th style="width: 40%">Search Variant</th>
          <th>Quick Answer</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><span class="search-term">make my drive easy tool</span></td>
          <td>Our original tool to find stops, toilets, and fun along your route.</td>
        </tr>
        <tr>
          <td><span class="search-term">makemydrivefun</span></td>
          <td>All one word? You got it — this is the same free road trip planner.</td>
        </tr>
        <tr>
          <td><span class="search-term">make my drive fun australia</span></td>
          <td>Yes, it works worldwide (UK, Europe, Australia, USA).</td>
        </tr>
        <tr>
          <td><span class="search-term">make.my drive fun alternative</span></td>
          <td>With or without the dot, it works the same.</td>
        </tr>
        <tr>
          <td><span class="search-term">make me drive fun</span></td>
          <td>A common typo, but yes, we are the destination for fun drives.</td>
        </tr>
        <tr>
          <td><span class="search-term">make my drive fun europe</span></td>
          <td>Fully supported in Europe for finding toilets, parks, and EV chargers.</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

<script>
  (function(){
    const btn = document.getElementById('mmdf-search-toggle');
    const content = document.getElementById('mmdf-search-content');
    
    if(btn && content){
      btn.addEventListener('click', () => {
        const isExpanded = btn.getAttribute('aria-expanded') === 'true';
        btn.setAttribute('aria-expanded', !isExpanded);
        
        if(!isExpanded) {
          content.classList.add('open');
        } else {
          content.classList.remove('open');
        }
      });
    }
  })();
</script>



<figure class="wp-block-image size-medium is-resized"><img decoding="async" width="160" height="300" src="https://tantrummingtrailblazers.com/wp-content/uploads/2024/09/IMG_3972-160x300.jpeg" alt="make my drive fun - tantrummingtrailblazers.com" class="wp-image-3653" style="width:29px;height:auto" srcset="https://tantrummingtrailblazers.com/wp-content/uploads/2024/09/IMG_3972-160x300.jpeg 160w, https://tantrummingtrailblazers.com/wp-content/uploads/2024/09/IMG_3972-548x1024.jpeg 548w, https://tantrummingtrailblazers.com/wp-content/uploads/2024/09/IMG_3972-768x1436.jpeg 768w, https://tantrummingtrailblazers.com/wp-content/uploads/2024/09/IMG_3972-821x1536.jpeg 821w, https://tantrummingtrailblazers.com/wp-content/uploads/2024/09/IMG_3972.jpeg 1023w" sizes="(max-width: 160px) 100vw, 160px" /><figcaption class="wp-element-caption">Screenshot</figcaption></figure>



<div id="mmdf-faq-wrapper">

  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&#038;display=swap" rel="stylesheet">

  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "FAQPage",
    "mainEntity": [
      {
        "@type": "Question",
        "name": "Does it find toilets and EV chargers along my route?",
        "acceptedAnswer": { "@type": "Answer", "text": "Yes. We search a corridor that follows your actual route to show public toilets, EV chargers (DC/AC), food, and fun stops." }
      },
      {
        "@type": "Question",
        "name": "Can I add stops by clicking?",
        "acceptedAnswer": { "@type": "Answer", "text": "Yes. Tap the map to drop a waypoint, or use the + button in any place popup. Stops are numbered with leg-by-leg timing." }
      },
      {
        "@type": "Question",
        "name": "How do you calculate 'along route'?",
        "acceptedAnswer": { "@type": "Answer", "text": "We generate a route polyline and build a buffer (radius) around it. Results must fall inside that corridor, ensuring they are truly along your drive." }
      },
      {
        "@type": "Question",
        "name": "Which EV connectors are supported?",
        "acceptedAnswer": { "@type": "Answer", "text": "We support Type 2, CCS2, CCS1, CHAdeMO, and Tesla Superchargers. You can also filter by speed (DC Fast vs AC)." }
      },
      {
        "@type": "Question",
        "name": "Does it open in Apple Maps, Google Maps, or Waze?",
        "acceptedAnswer": { "@type": "Answer", "text": "Yes. Every popup includes direct navigation links for Apple Maps, Google Maps, and Waze." }
      },
      {
        "@type": "Question",
        "name": "Can I save routes?",
        "acceptedAnswer": { "@type": "Answer", "text": "Yes. You can save routes privately to your account, or share a link that anyone can open without logging in." }
      },
      {
        "@type": "Question",
        "name": "Does it work offline?",
        "acceptedAnswer": { "@type": "Answer", "text": "You need an internet connection to calculate the initial route and fetch places, but the map is lightweight for mobile data." }
      }
    ]
  }
  </script>

  <style>
    /* SCOPED STYLES */
    #mmdf-faq-wrapper {
      --m-primary: #2563eb;
      --m-dark: #0f172a;
      --m-bg: #f8fafc;
      --m-border: #cbd5e1;
      
      font-family: 'Inter', system-ui, sans-serif;
      max-width: 800px;
      margin: 40px auto;
      color: var(--m-dark);
    }

    #mmdf-faq-wrapper h2 {
      font-size: 1.8rem;
      font-weight: 800;
      margin-bottom: 24px;
      text-align: center;
      letter-spacing: -0.02em;
    }

    /* Details/Summary Styling */
    .mmdf-details {
      background: #fff;
      border: 1px solid var(--m-border);
      border-radius: 12px;
      margin-bottom: 12px;
      overflow: hidden;
      transition: all 0.2s ease;
    }
    
    .mmdf-details:hover {
      border-color: #94a3b8;
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    }

    .mmdf-details[open] {
      border-color: #93c5fd;
      box-shadow: 0 4px 15px rgba(37, 99, 235, 0.08);
    }

    .mmdf-summary {
      padding: 18px 20px;
      font-weight: 600;
      font-size: 1rem;
      cursor: pointer;
      list-style: none;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: var(--m-dark);
    }

    /* Custom +/- Icons */
    .mmdf-summary::-webkit-details-marker { display: none; }
    .mmdf-summary::after { 
      content: '+'; 
      font-size: 1.4rem; 
      color: #94a3b8; 
      font-weight: 400;
      line-height: 1;
      margin-left: 12px;
    }
    .mmdf-details[open] .mmdf-summary::after { 
      content: '−'; 
      color: var(--m-primary); 
    }
    .mmdf-details[open] .mmdf-summary {
      color: var(--m-primary);
    }

    .mmdf-answer {
      padding: 0 20px 20px;
      font-size: 0.95rem;
      line-height: 1.6;
      color: #475569;
      border-top: 1px solid #f1f5f9;
      margin-top: -6px;
      padding-top: 16px;
    }
    
    .mmdf-answer strong { color: var(--m-dark); }
  </style>

  <h2>Frequently Asked Questions</h2>

  <details class="mmdf-details" open>
    <summary class="mmdf-summary">Does it find toilets and EV chargers along my route?</summary>
    <div class="mmdf-answer">
      Yes. We search a corridor that follows your <strong>actual route</strong> (not just a straight line) to show public toilets, EV chargers (DC/AC with connector filters), food, and fun stops.
    </div>
  </details>

  <details class="mmdf-details">
    <summary class="mmdf-summary">Can I add stops by clicking?</summary>
    <div class="mmdf-answer">
      Yep—tap the map to drop a waypoint, or use the <strong><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/2795.png" alt="➕" class="wp-smiley" style="height: 1em; max-height: 1em;" /></strong> in any place popup to add it as a stop. Waypoints are numbered and you’ll see per-leg distance &#038; time.
    </div>
  </details>

  <details class="mmdf-details">
    <summary class="mmdf-summary">Which EV connectors are supported?</summary>
    <div class="mmdf-answer">
      We support <strong>Type 2</strong>, <strong>CCS2</strong>, <strong>CCS1</strong>, <strong>CHAdeMO</strong>, and <strong>Tesla</strong> (Supercharger &#038; Destination). You can also filter to show only &#8220;DC Fast&#8221; chargers.
    </div>
  </details>

  <details class="mmdf-details">
    <summary class="mmdf-summary">How do you calculate “along route”?</summary>
    <div class="mmdf-answer">
      We generate a route polyline and build a buffer (your chosen search radius) around it. POIs must fall inside that corridor to show—so you get true along-route results, not just nearby cities.
    </div>
  </details>

  <details class="mmdf-details">
    <summary class="mmdf-summary">What search radius should I use?</summary>
    <div class="mmdf-answer">
      You can set <strong>0.1–5.0 miles</strong> (default is 0.5 mi). Smaller keeps results tight to the highway; larger gives you more options. If you don’t see much in rural areas, bump the radius up.
    </div>
  </details>

  <details class="mmdf-details">
    <summary class="mmdf-summary">Does it open in Apple Maps / Google Maps / Waze?</summary>
    <div class="mmdf-answer">
      Yes—every popup includes direct links for <strong>Apple Maps</strong>, <strong>Google Maps</strong>, and <strong>Waze</strong> so you can navigate with your preferred app.
    </div>
  </details>

  <details class="mmdf-details">
    <summary class="mmdf-summary">Can I save routes? Do I need an account?</summary>
    <div class="mmdf-answer">
      Saving routes uses your WordPress login (private to you). If you’re not signed in, you can still <strong>share a link</strong>—anyone with the link can load your exact plan without needing an account.
    </div>
  </details>

  <details class="mmdf-details">
    <summary class="mmdf-summary">Where does the data come from?</summary>
    <div class="mmdf-answer">
      Places &#038; chargers come from <strong>OpenStreetMap</strong> (OSM); geocoding via Nominatim; routing via OSRM; and landmark blurbs via Wikipedia. If something is missing, adding it to OSM will make it appear here too!
    </div>
  </details>

  <details class="mmdf-details">
    <summary class="mmdf-summary">Why does a place sometimes show “Unknown”?</summary>
    <div class="mmdf-answer">
      It means the POI has no name tag in the database. We automatically infer a sensible label from its tags (e.g., <em>Playground</em>, <em>Bakery</em>) so the popup is still useful.
    </div>
  </details>

  <details class="mmdf-details">
    <summary class="mmdf-summary">Which countries are supported?</summary>
    <div class="mmdf-answer">
      Anywhere covered by OpenStreetMap (Global). Coverage varies by area—popular routes and cities have richer data, while very remote areas may have fewer POIs.
    </div>
  </details>

</div>
<p>The post <a href="https://tantrummingtrailblazers.com/tools/make-my-drive-fun/">🚗 Free Family Road Trip Planner | Make My Drive Fun | Share Routes | Tantrumming Trailblazers</a> appeared first on <a href="https://tantrummingtrailblazers.com">Tantrumming Trailblazers</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://tantrummingtrailblazers.com/tools/make-my-drive-fun/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">1968</post-id>	</item>
	</channel>
</rss>
