{"id":669,"date":"2025-10-09T10:51:48","date_gmt":"2025-10-09T10:51:48","guid":{"rendered":"https:\/\/mytriplinks.com\/?page_id=669"},"modified":"2025-10-15T18:31:59","modified_gmt":"2025-10-15T18:31:59","slug":"home-2","status":"publish","type":"page","link":"https:\/\/mytriplinks.com\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"669\" class=\"elementor elementor-669\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-5edec6f1 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"5edec6f1\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-c414e2f\" data-id=\"c414e2f\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-7b06331a elementor-widget elementor-widget-heading\" data-id=\"7b06331a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Find Your Next Trip<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6db3f5e8 elementor-widget elementor-widget-text-editor\" data-id=\"6db3f5e8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p style='text-align:center;'>Pick your origin &#038; filters, then click a map line\/marker to view the full itinerary with photos.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-6ae95ef1 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"6ae95ef1\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-2fcc4332\" data-id=\"2fcc4332\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-21f4bffb elementor-widget__width-initial elementor-widget elementor-widget-text-editor\" data-id=\"21f4bffb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<!-- \ud83d\udd18 MyTripLinks \u2014 Modern Full-Width Filter Bar (no frameworks) -->\n<div class=\"tp-wrap\">\n  <style>\n    :root{\n      --bg:#0b1020;           \/* page bg if your site is light, change to #fff *\/\n      --card:#0f162e;         \/* panel bg *\/\n      --ring:#3b82f6;         \/* accent *\/\n      --muted:#8a93a8;        \/* subtle text *\/\n      --text:#e7ecf5;         \/* main text on dark *\/\n      --br:12px;              \/* base radius *\/\n      --shadow:0 10px 30px rgba(3,10,27,.18);\n    }\n    \/* If your site is light, uncomment this:\n    :root{ --bg:#fff; --card:#ffffff; --text:#0b1020; --muted:#5b6477; --shadow:0 8px 22px rgba(14,30,61,.08) }\n    *\/\n\n    \/* card container *\/\n    .ml-filters{\n      width:100%;\n      background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)) , var(--card);\n      border:1px solid rgba(255,255,255,.06);\n      border-radius:calc(var(--br) + 2px);\n      box-shadow:var(--shadow);\n      padding:14px;\n      backdrop-filter:saturate(130%) blur(6px);\n    }\n\n    \/* responsive grid *\/\n    .ml-grid{\n      display:grid;\n      grid-template-columns:repeat(12,minmax(0,1fr));\n      gap:12px;\n      align-items:center;\n    }\n    @media (max-width: 1100px){ .ml-grid{ grid-template-columns:repeat(8,1fr) } }\n    @media (max-width: 780px){ .ml-grid{ grid-template-columns:repeat(4,1fr) } }\n    @media (max-width: 520px){ .ml-grid{ grid-template-columns:repeat(2,1fr) } }\n\n    .ml-col-2{grid-column:span 2}\n    .ml-col-3{grid-column:span 3}\n    .ml-col-4{grid-column:span 4}\n    .ml-col-6{grid-column:span 6}\n    .ml-col-8{grid-column:span 8}\n    .ml-col-12{grid-column:span 12}\n\n    \/* field (chip) *\/\n    .ml-field{\n      position:relative;\n      display:flex; flex-direction:column; gap:8px;\n      background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));\n      border:1px solid rgba(255,255,255,.08);\n      border-radius:var(--br);\n      padding:10px 12px;\n      min-height:64px;\n      transition:border-color .2s, box-shadow .2s, transform .08s;\n    }\n    .ml-field:focus-within{\n      border-color:rgba(59,130,246,.5);\n      box-shadow:0 0 0 3px rgba(59,130,246,.2);\n    }\n    .ml-label{\n      font-size:12px; letter-spacing:.01em; color:var(--muted);\n      display:flex; align-items:center; gap:8px;\n    }\n    .ml-value{\n      display:flex; align-items:center; gap:10px;\n      color:var(--text); font-weight:600; font-size:14px; min-height:22px;\n      white-space:nowrap; overflow:hidden; text-overflow:ellipsis;\n    }\n\n    \/* select (native, but pretty) *\/\n    .ml-select{\n      position:absolute; inset:0; width:100%; height:100%; opacity:0;\n      appearance:none; cursor:pointer;\n    }\n    .ml-caret{\n      margin-left:auto; color:var(--muted); font-size:12px;\n      opacity:.9;\n    }\n\n    \/* buttons *\/\n    .ml-btn{\n      height:64px; border-radius:var(--br); width:100%;\n      border:1px solid rgba(255,255,255,.10);\n      background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));\n      color:var(--text); font-weight:600; letter-spacing:.01em;\n      box-shadow:var(--shadow); cursor:pointer;\n      transition:transform .06s ease, box-shadow .2s ease, background .2s ease;\n    }\n    .ml-btn:hover{ transform:translateY(-1px) }\n    .ml-btn:active{ transform:translateY(0) scale(.99) }\n    .ml-btn--primary{\n      border-color:rgba(59,130,246,.55);\n      background:linear-gradient(180deg, rgba(59,130,246,.18), rgba(59,130,246,.12));\n    }\n    .ml-btn--danger{\n      border-color:rgba(239,68,68,.45);\n      background:linear-gradient(180deg, rgba(239,68,68,.18), rgba(239,68,68,.10));\n    }\n\n    \/* small icon chips inside labels *\/\n    .ml-tag{\n      display:inline-flex; align-items:center; gap:6px;\n      height:20px; padding:0 8px; border-radius:999px;\n      font-size:11px; color:var(--muted);\n      background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08);\n    }\n  <\/style>\n\n  <div class=\"ml-filters\" role=\"toolbar\" aria-label=\"Trip Filters\">\n    <div class=\"ml-grid\">\n\n      <!-- Geolocation -->\n      <button id=\"useMyLoc\" class=\"ml-btn ml-col-3\" title=\"Use my current location\">\ud83d\udccd Use my location<\/button>\n\n      <!-- Origin Country -->\n      <div class=\"ml-field ml-col-3\">\n        <div class=\"ml-label\">Origin Country <span class=\"ml-tag\">auto-filled<\/span><\/div>\n        <div class=\"ml-value\">\n          <span id=\"oCountryLabel\">Select<\/span>\n          <span class=\"ml-caret\">\u25be<\/span>\n        <\/div>\n        <select id=\"oCountry\" class=\"ml-select\" aria-label=\"Origin Country\"><\/select>\n      <\/div>\n\n      <!-- Origin City -->\n      <div class=\"ml-field ml-col-3\">\n        <div class=\"ml-label\">Origin City<\/div>\n        <div class=\"ml-value\">\n          <span id=\"oCityLabel\">Any<\/span>\n          <span class=\"ml-caret\">\u25be<\/span>\n        <\/div>\n        <select id=\"oCity\" class=\"ml-select\" aria-label=\"Origin City\">\n          <option value=\"\">Any<\/option>\n        <\/select>\n      <\/div>\n\n      <!-- Set Origin -->\n      <button id=\"applyOrigin\" class=\"ml-btn ml-btn--primary ml-col-3\" title=\"Use selected origin\">Set Origin<\/button>\n\n      <!-- Trip Type -->\n      <div class=\"ml-field ml-col-3\">\n        <div class=\"ml-label\">Trip Type<\/div>\n        <div class=\"ml-value\">\n          <span id=\"tripTypeLabel\">All<\/span>\n          <span class=\"ml-caret\">\u25be<\/span>\n        <\/div>\n        <select id=\"tripType\" class=\"ml-select\" aria-label=\"Trip type\">\n          <option value=\"\">All<\/option>\n          <option value=\"national\">National<\/option>\n          <option value=\"international\">International<\/option>\n        <\/select>\n      <\/div>\n\n      <!-- Duration -->\n      <div class=\"ml-field ml-col-3\">\n        <div class=\"ml-label\">Duration<\/div>\n        <div class=\"ml-value\">\n          <span id=\"durLabel\">All<\/span>\n          <span class=\"ml-caret\">\u25be<\/span>\n        <\/div>\n        <select id=\"duration\" class=\"ml-select\" aria-label=\"Duration\">\n          <option value=\"\">All<\/option>\n          <option value=\"short\">1\u20132 days<\/option>\n          <option value=\"medium\">3\u20135 days<\/option>\n          <option value=\"long\">6+ days<\/option>\n        <\/select>\n      <\/div>\n\n      <!-- Actions -->\n      <button id=\"btnShow\" class=\"ml-btn ml-col-3\">Show trips<\/button>\n      <button id=\"resetBtn\" class=\"ml-btn ml-btn--danger ml-col-3\">Reset \u21ba<\/button>\n\n      <!-- Mobile \u201cDetails\u201d button (kept for compatibility; hidden by default) -->\n      <button id=\"togglePanel\" class=\"ml-btn ml-col-12\" style=\"display:none;\">\u2630 Details<\/button>\n    <\/div>\n  <\/div>\n<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-4940b1f elementor-section-full_width elementor-section-stretched elementor-section-height-default elementor-section-height-default\" data-id=\"4940b1f\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;stretch_section&quot;:&quot;section-stretched&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-custom\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-65 elementor-top-column elementor-element elementor-element-47cb448a\" data-id=\"47cb448a\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-3f25179f elementor-widget elementor-widget-html\" data-id=\"3f25179f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- \ud83c\udf0d MyTripLinks \u2014 Map (Leaflet) + Red-Select Route + Trip-ID \"jaipur-goa\" -->\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/leaflet@1.9.4\/dist\/leaflet.css\">\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/leaflet@1.9.4\/dist\/leaflet.js\"><\/script>\r\n\r\n<style>\r\n  :root{--chip-bg:#fff;--chip-br:#e5e7eb;--chip-t:#111;--muted:#6b7280;--shadow:0 1px 2px rgba(0,0,0,.06)}\r\n  .tp-wrap{font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial; width:100%; margin:0 auto; max-width:100%}\r\n  #map{width:100%; height:60vh; max-height:720px; border-radius:12px; border:1px solid #e5e7eb; box-shadow:0 4px 12px rgba(0,0,0,.08)}\r\n  @media(max-width:768px){ #map{height:420px} }\r\n\r\n  \/* Optional styles if you also render the list in the sidebar *\/\r\n  #panel{background:#fff;border:1px solid var(--chip-br);border-radius:12px;box-shadow:0 10px 24px rgba(0,0,0,.08);overflow:hidden}\r\n  .p-head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid #f1f2f4}\r\n  .p-title{font-weight:700} .p-sub{color:#6b7280;font-size:12px}\r\n  .p-body{padding:12px;max-height:calc(100vh - 300px);overflow:auto}\r\n  .badges{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 12px}\r\n  .badges span{font-size:12px;padding:2px 8px;border:1px solid var(--chip-br);border-radius:999px;background:#f3f4f6}\r\n  .list{display:flex;flex-direction:column;gap:8px;margin:8px 0}\r\n  .dest{display:flex;justify-content:space-between;gap:12px;border:1px solid #eef0f3;border-radius:10px;padding:8px 10px;cursor:pointer}\r\n  .dest:hover{background:#f9fafb}\r\n  .d1{font-weight:700} .d2{font-size:12px;color:#6b7280}\r\n  .tags{display:flex;gap:6px} .tag{font-size:11px;border:1px solid var(--chip-br);border-radius:999px;padding:2px 6px;background:#fff}\r\n  .leaflet-popup,.leaflet-popup-pane{display:none!important}\r\n\r\n  \/* Pulsing geoloc dot *\/\r\n  .pulse{background:#3b82f6;border:2px solid #fff;width:10px;height:10px;border-radius:50%;box-shadow:0 0 0 rgba(59,130,246,.4);animation:pulse 2s infinite}\r\n  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(59,130,246,.6)}70%{box-shadow:0 0 0 15px rgba(59,130,246,0)}100%{box-shadow:0 0 0 0 rgba(59,130,246,0)}}\r\n<\/style>\r\n\r\n<div class=\"tp-wrap\">\r\n  <div id=\"map\" aria-label=\"Trip Map\"><\/div>\r\n<\/div>\r\n\r\n<script>\r\n(function(){\r\n  function onReady(fn){ if(document.readyState!=='loading'){fn();} else {document.addEventListener('DOMContentLoaded',fn);} }\r\n  function waitLeaflet(cb,tries=40){ if(window.L) cb(); else if(tries>0) setTimeout(()=>waitLeaflet(cb,tries-1),120); }\r\n\r\n  onReady(()=>waitLeaflet(initTrips));\r\n\r\n  function initTrips(){\r\n    const $ = id => document.getElementById(id);\r\n    const mapEl = $('map');\r\n    if(!mapEl || mapEl.dataset.ready) return; \/\/ init once\r\n    mapEl.dataset.ready = '1';\r\n\r\n    \/* ======= DATA ======= *\/\r\n    const ORIGIN_DB = {\r\n      IN:{name:'India',centroid:[22.0,79.0],cities:[\r\n        {city:'Delhi',code:'DEL',lat:28.5562,lng:77.1000},\r\n        {city:'Mumbai',code:'BOM',lat:19.0896,lng:72.8656},\r\n        {city:'Jaipur',code:'JAI',lat:26.9124,lng:75.7873},\r\n        {city:'Bengaluru',code:'BLR',lat:13.1989,lng:77.7063},\r\n        {city:'Kochi',code:'COK',lat:10.1520,lng:76.4019}\r\n      ]},\r\n      US:{name:'United States',centroid:[39.8,-98.6],cities:[\r\n        {city:'New York',code:'JFK',lat:40.6413,lng:-73.7781},\r\n        {city:'Los Angeles',code:'LAX',lat:33.9416,lng:-118.4085},\r\n        {city:'San Francisco',code:'SFO',lat:37.6213,lng:-122.3790},\r\n        {city:'Chicago',code:'ORD',lat:41.9742,lng:-87.9073}\r\n      ]},\r\n      AE:{name:'United Arab Emirates',centroid:[24.5,54.4],cities:[{city:'Dubai',code:'DXB',lat:25.2532,lng:55.3657}]},\r\n      NP:{name:'Nepal',centroid:[28.4,84.1],cities:[{city:'Kathmandu',code:'KTM',lat:27.7172,lng:85.3240}]},\r\n      TH:{name:'Thailand',centroid:[15.87,100.99],cities:[{city:'Bangkok',code:'BKK',lat:13.7563,lng:100.5018}]},\r\n      LK:{name:'Sri Lanka',centroid:[7.87,80.77],cities:[{city:'Colombo',code:'CMB',lat:6.9271,lng:79.8612}]},\r\n      SG:{name:'Singapore',centroid:[1.29,103.85],cities:[{city:'Singapore',code:'SIN',lat:1.3521,lng:103.8198}]}\r\n    };\r\n\r\n    const DESTS = [\r\n      {city:'Jaipur',iata:'JAI',country:'India',cc:'IN',lat:26.9124,lng:75.7873,best:'Oct\u2013Mar',days_min:2,days_max:5,overview:'Pink City forts & bazaars.',\r\n       ways:{flight:'~55m',train:'~4h30m',road_km:280},plan:['City Palace & Hawa Mahal','Amber Fort & stepwells','Jaigarh\/Nahargarh\/Chokhi Dhani'],sights:['Amber Fort','Hawa Mahal','Jantar Mantar'],tags:['heritage','family']},\r\n      {city:'Agra',iata:'AGR',country:'India',cc:'IN',lat:27.1767,lng:78.0081,best:'Oct\u2013Mar',days_min:2,days_max:5,overview:'Taj Mahal + Mughal heritage.',\r\n       ways:{train:'Gatimaan ~1h40m',road_km:230},plan:['Sunrise Taj','Agra Fort & Mehtab','Fatehpur Sikri'],sights:['Taj Mahal','Agra Fort','Mehtab Bagh'],tags:['iconic','heritage']},\r\n      {city:'Rishikesh',iata:'',country:'India',cc:'IN',lat:30.0869,lng:78.2676,best:'Oct\u2013Apr',days_min:3,days_max:5,overview:'Yoga, rafting & aarti.',\r\n       ways:{train:'to Haridwar + 1h road',road_km:240},plan:['Ganga aarti','Rafting \/ yoga','Neelkanth \/ waterfalls'],sights:['Triveni','Lakshman Jhula','Beatles Ashram'],tags:['spiritual','adventure']},\r\n      {city:'Shimla',iata:'',country:'India',cc:'IN',lat:31.1048,lng:77.1734,best:'Oct\u2013Apr',days_min:3,days_max:5,overview:'Hills & toy train.',\r\n       ways:{train:'Kalka\u2013Shimla',road_km:350},plan:['Mall Road & Ridge','Kufri \/ Jakhoo','Mashobra \/ Chail'],sights:['The Ridge','Jakhoo','Kufri'],tags:['mountains']},\r\n      {city:'Udaipur',iata:'UDR',country:'India',cc:'IN',lat:24.5854,lng:73.7125,best:'Oct\u2013Mar',days_min:3,days_max:5,overview:'Lakes & palaces.',\r\n       ways:{flight:'~1h20m',road_km:660},plan:['City Palace & Pichola','Boat + Bagore','Kumbhalgarh\/Chittor'],sights:['City Palace','Pichola','Bagore'],tags:['romantic','heritage']},\r\n      {city:'Amritsar',iata:'ATQ',country:'India',cc:'IN',lat:31.6340,lng:74.8723,best:'Oct\u2013Mar',days_min:3,days_max:5,overview:'Golden Temple & food.',\r\n       ways:{flight:'~1h10m',train:'Shatabdi ~6h',road_km:450},plan:['Golden Temple','Wagah ceremony','Heritage & food'],sights:['Golden Temple','Wagah','Bazaar'],tags:['spiritual','food']},\r\n      {city:'Varanasi',iata:'VNS',country:'India',cc:'IN',lat:25.3176,lng:82.9739,best:'Oct\u2013Mar',days_min:3,days_max:5,overview:'Ghats, temples & silk.',\r\n       ways:{flight:'~1h30m',train:'overnight'},plan:['Sunrise boat + ghats','Kashi Vishwanath','Sarnath + markets'],sights:['Ghats','Kashi','Sarnath'],tags:['spiritual','culture']},\r\n      {city:'Goa (Panaji)',iata:'GOI',country:'India',cc:'IN',lat:15.4909,lng:73.8278,best:'Nov\u2013Feb',days_min:3,days_max:7,overview:'Beaches & caf\u00e9s.',\r\n       ways:{flight:'~2h30m',road_km:1850},plan:['North beaches','Old Goa','South beaches'],sights:['Baga','Basilica','Palolem'],tags:['beach','party']},\r\n      {city:'Mumbai',iata:'BOM',country:'India',cc:'IN',lat:19.0896,lng:72.8656,best:'Nov\u2013Feb',days_min:3,days_max:5,overview:'Movies & marine drive.',\r\n       ways:{flight:'~2h',train:'overnight'},plan:['Gateway & Colaba','Bandra & caf\u00e9s','Elephanta \/ markets'],sights:['Gateway','Marine Drive','Bandra'],tags:['city','food']},\r\n      {city:'Dubai',iata:'DXB',country:'UAE',cc:'AE',lat:25.2532,lng:55.3657,best:'Nov\u2013Mar',days_min:3,days_max:5,overview:'City + desert + Abu Dhabi day-trip.',\r\n       ways:{flight:'non-stop ~3h30m'},plan:['Downtown & Burj','Desert safari','Old Dubai \/ Marina'],sights:['Burj','Desert','Marina'],tags:['international','shopping','desert']},\r\n      {city:'Kathmandu',iata:'KTM',country:'Nepal',cc:'NP',lat:27.7172,lng:85.3240,best:'Oct\u2013Apr',days_min:3,days_max:5,overview:'Temples & valleys.',\r\n       ways:{flight:'non-stop ~1h30m'},plan:['Durbar Squares','Pashupatinath & Boudha','Bhaktapur\/Nagarkot'],sights:['Pashupatinath','Boudha','Bhaktapur'],tags:['international','culture']},\r\n      {city:'Bangkok',iata:'BKK',country:'Thailand',cc:'TH',lat:13.7563,lng:100.5018,best:'Nov\u2013Feb',days_min:4,days_max:5,overview:'Temples, food & markets.',\r\n       ways:{flight:'non-stop ~4h30m'},plan:['Grand Palace\/Wat Pho','Markets & boat','Ayutthaya\/Pattaya option'],sights:['Grand Palace','Wat Pho','Chatuchak'],tags:['international','food']},\r\n      {city:'Colombo',iata:'CMB',country:'Sri Lanka',cc:'LK',lat:6.9271,lng:79.8612,best:'Nov\u2013Apr',days_min:4,days_max:5,overview:'City + beach day-trips.',\r\n       ways:{flight:'non-stop ~3h30m'},plan:['City highlights','Galle day-trip','Negombo\/Beaches'],sights:['Galle Fort','Gangaramaya','Mount Lavinia'],tags:['international','beach']},\r\n      {city:'Singapore',iata:'SIN',country:'Singapore',cc:'SG',lat:1.3521,lng:103.8198,best:'Nov\u2013Mar',days_min:4,days_max:5,overview:'Clean, green & attractions.',\r\n       ways:{flight:'non-stop ~5h30m'},plan:['Marina Bay','Sentosa','Gardens\/Chinatown\/Little India'],sights:['Marina Bay','GBTB','Sentosa'],tags:['international','family']},\r\n      {city:'San Francisco',iata:'SFO',country:'United States',cc:'US',lat:37.6213,lng:-122.3790,best:'Apr\u2013Oct',days_min:3,days_max:5,overview:'Bridges & bays.',\r\n       ways:{flight:'\u2014'},plan:['Golden Gate & Piers','Alcatraz','Muir Woods \/ Napa'],sights:['GG Bridge','Pier 39','Alcatraz'],tags:['city','coast']},\r\n      {city:'Las Vegas',iata:'LAS',country:'United States',cc:'US',lat:36.0840,lng:-115.1537,best:'Oct\u2013Apr',days_min:3,days_max:5,overview:'Entertainment & desert.',\r\n       ways:{flight:'\u2014'},plan:['The Strip','Shows','Red Rock \/ Hoover'],sights:['Strip','Bellagio','Red Rock'],tags:['nightlife','desert']},\r\n      {city:'Chicago',iata:'ORD',country:'United States',cc:'US',lat:41.9742,lng:-87.9073,best:'May\u2013Sep',days_min:3,days_max:5,overview:'Architecture & lakeshore.',\r\n       ways:{flight:'\u2014'},plan:['Architecture tour','Art Institute','Navy Pier'],sights:['Millennium Park','Riverwalk','Pier'],tags:['city','architecture']}\r\n    ];\r\n\r\n    \/* ======= MAP ======= *\/\r\n    const map = L.map('map',{worldCopyJump:true}).setView([22,79],5);\r\n    L.tileLayer('https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png',{attribution:'\u00a9 OpenStreetMap'}).addTo(map);\r\n\r\n    \/\/ keep sizing correct\r\n    setTimeout(()=>map.invalidateSize(),400);\r\n    window.addEventListener('resize',()=>map.invalidateSize());\r\n    new MutationObserver(()=>map.invalidateSize()).observe(document.body,{childList:true,subtree:true});\r\n\r\n    \/* ======= HELPERS & STATE ======= *\/\r\n    let origin=null, originMarker=null, lines=[], myLocMarker=null, myLocCircle=null;\r\n\r\n    \/\/ --- Route color constants + selection\r\n    const LINE_DEFAULT = '#3b82f6'; \/\/ blue\r\n    const LINE_ACTIVE  = '#ef4444'; \/\/ red\r\n    const LINE_FADE    = 0.35;\r\n    let selectedLine = null;\r\n\r\n    const km=(a,b)=>{const R=6371,toRad=x=>x*Math.PI\/180,dLat=toRad(b[0]-a[0]),dLng=toRad(b[1]-a[1]);\r\n      const s=Math.sin(dLat\/2)**2+Math.cos(toRad(a[0]))*Math.cos(toRad(b[0]))*Math.sin(dLng\/2)**2;return 2*R*Math.asin(Math.sqrt(s));};\r\n    const iconPulse=L.divIcon({className:'pulse',iconSize:[10,10]});\r\n\r\n    \/* === Trip-ID helpers (FIX: make \"jaipur-goa\") === *\/\r\n    function mtlSlug(s){\r\n      return String(s||'').toLowerCase().trim().replace(\/\\s+\/g,'-').replace(\/[^a-z0-9\\-]\/g,'');\r\n    }\r\n    \/\/ Clean a label like \"Goa (Panaji) \/ North Goa\" -> \"Goa\"\r\n    function mtlCityCore(label){\r\n      if(!label) return '';\r\n      return String(label).split(\/[(\/\u00b7,\\\/]\/)[0].trim();\r\n    }\r\n    function mtlMakeTripId(originLabel, destCity){\r\n      const oCity = mtlCityCore(originLabel);\r\n      const dCity = mtlCityCore(destCity);\r\n      return `${mtlSlug(oCity)}-${mtlSlug(dCity)}`; \/\/ e.g., \"jaipur-goa\"\r\n    }\r\n    function mtlFireShowTrip(id){\r\n      document.dispatchEvent(new CustomEvent('mtl:showTrip', { detail:{ id } }));\r\n    }\r\n\r\n    function nearestOriginCity(lat,lng){\r\n      let best=null;\r\n      Object.entries(ORIGIN_DB).forEach(([cc,obj])=>{\r\n        obj.cities.forEach(c=>{\r\n          const d=km([lat,lng],[c.lat,c.lng]);\r\n          if(!best||d<best.d) best={cc,city:c,d};\r\n        });\r\n      });\r\n      return best;\r\n    }\r\n    function setOrigin(lat,lng,label,cc){\r\n      origin={lat,lng,label,cc};\r\n      if(originMarker) map.removeLayer(originMarker);\r\n      originMarker=L.marker([lat,lng]).addTo(map).bindTooltip(label);\r\n      map.setView([lat,lng],6);\r\n      $('p-title') && ( $('p-title').textContent=`Trips from: ${label}` );\r\n      $('p-sub') && ( $('p-sub').textContent='Choose a filter or click a destination line' );\r\n    }\r\n    function durationMatch(d,b){ if(!b) return true; if(b==='short') return d.days_min<=2; if(b==='medium') return d.days_min<=5&&d.days_max>=3; if(b==='long') return d.days_max>=6; return true; }\r\n    function scopeMatch(d,tripType,originCC){ if(!tripType) return true; return tripType==='national' ? d.cc===originCC : d.cc!==originCC; }\r\n    function clearRoutes(){\r\n      lines.forEach(l=>map.removeLayer(l)); lines=[];\r\n      selectedLine = null; \/\/ reset selection\r\n      $('p-list') && ( $('p-list').innerHTML='' );\r\n      $('p-count') && ( $('p-count').textContent='0' );\r\n      $('p-distance') && ( $('p-distance').textContent='Distance: \u2014' );\r\n      $('p-best') && ( $('p-best').textContent='Best time: \u2014' );\r\n      $('p-plan') && ( $('p-plan').innerHTML='' );\r\n      $('p-ways') && ( $('p-ways').innerHTML='' );\r\n      $('p-sights') && ( $('p-sights').innerHTML='' );\r\n      $('p-notes') && ( $('p-notes').textContent='' );\r\n    }\r\n\r\n    function renderTrips(){\r\n      if(!origin){ alert('Please set an origin first.'); return; }\r\n      clearRoutes();\r\n      const tripType = $('tripType')?.value || '';\r\n      const dur = $('duration')?.value || '';\r\n\r\n      $('tripTypeLabel') && ( $('tripTypeLabel').innerHTML=(tripType||'All')+'<span class=\"caret\">\u25be<\/span>' );\r\n      $('durLabel') && ( $('durLabel').innerHTML=(dur? (dur==='short'?'1\u20132 days':dur==='medium'?'3\u20135 days':'6+ days'):'All')+'<span class=\"caret\">\u25be<\/span>' );\r\n      $('p-duration') && ( $('p-duration').textContent = `Duration: ${dur? (dur==='short'?'1\u20132 days':dur==='medium'?'3\u20135 days':'6+ days'):'\u2014'}` );\r\n\r\n      const results = DESTS\r\n        .filter(d=>scopeMatch(d,tripType,origin.cc))\r\n        .filter(d=>durationMatch(d,dur));\r\n\r\n      $('p-count') && ( $('p-count').textContent = results.length );\r\n\r\n      results.forEach(d=>{\r\n        const A=[origin.lat,origin.lng], B=[d.lat,d.lng];\r\n        const dist = Math.round(km(A,B));\r\n\r\n        \/\/ default blue line\r\n        const line = L.polyline([A,B],{\r\n          weight:4,\r\n          opacity:.85,\r\n          color: LINE_DEFAULT\r\n        }).addTo(map);\r\n        lines.push(line);\r\n\r\n        const onSelect=()=>{\r\n          \/\/ fade all to blue with low opacity\r\n          lines.forEach(l=>l.setStyle({color:LINE_DEFAULT, weight:4, opacity:LINE_FADE}));\r\n          \/\/ highlight selected in red\r\n          line.setStyle({color:LINE_ACTIVE, weight:5, opacity:1}).bringToFront();\r\n          selectedLine = line;\r\n\r\n          $('p-sub') && ( $('p-sub').textContent = `${d.city}, ${d.country}` );\r\n          $('p-distance') && ( $('p-distance').textContent = `Distance: ${dist} km` );\r\n          $('p-best') && ( $('p-best').textContent = `Best time: ${d.best||'\u2014'}` );\r\n          $('p-plan') && ( $('p-plan').innerHTML = (d.plan||[]).map(x=>`<li>${x}<\/li>`).join('') );\r\n          $('p-notes') && ( $('p-notes').textContent = d.overview||'' );\r\n          $('p-ways') && ( $('p-ways').innerHTML = [\r\n            d.ways?.flight?`<li>\u2708\ufe0f ${d.ways.flight}<\/li>`:'',\r\n            d.ways?.train ?`<li>\ud83d\ude86 ${d.ways.train}<\/li>`:'',\r\n            d.ways?.road_km?`<li>\ud83d\ude97 ${d.ways.road_km} km<\/li>`:''\r\n          ].join('') );\r\n          $('p-sights') && ( $('p-sights').innerHTML = (d.sights||[]).map(x=>`<li>${x}<\/li>`).join('') );\r\n\r\n          map.fitBounds(line.getBounds(),{padding:[30,30]});\r\n\r\n          \/\/ \ud83d\udd14 Send clean ID like \"jaipur-goa\" to Sidebar\r\n          const tripId = mtlMakeTripId(origin?.label, d.city);\r\n          mtlFireShowTrip(tripId);\r\n        };\r\n        line.on('click', onSelect);\r\n\r\n        if($('p-list')){\r\n          const div=document.createElement('div');\r\n          div.className='dest';\r\n          div.innerHTML=`\r\n            <div>\r\n              <div class=\"d1\">${d.city} <span class=\"d2\">${d.country}${d.iata?` \u00b7 ${d.iata}`:''}<\/span><\/div>\r\n              <div class=\"d2\">${d.best||''} \u00b7 ${dist} km<\/div>\r\n            <\/div>\r\n            <div class=\"tags\">${(d.tags||[]).map(t=>`<span class=\"tag\">${t}<\/span>`).join('')}<\/div>`;\r\n          div.onclick=onSelect;\r\n          $('p-list').appendChild(div);\r\n        }\r\n      });\r\n\r\n      if(results.length){\r\n        const g=L.featureGroup(lines); map.fitBounds(g.getBounds(),{padding:[40,40]});\r\n      }\r\n    }\r\n\r\n    \/* ======= Geolocation ======= *\/\r\n    function showMyLocationOnMap(lat,lng,accuracy){\r\n      if(myLocMarker) map.removeLayer(myLocMarker);\r\n      if(myLocCircle) map.removeLayer(myLocCircle);\r\n      myLocMarker=L.marker([lat,lng],{icon:iconPulse}).addTo(map).bindTooltip('You are here');\r\n      if(Number.isFinite(accuracy)){\r\n        myLocCircle=L.circle([lat,lng],{radius:accuracy,color:'#3b82f6',opacity:0.4,weight:1,fillOpacity:0.08}).addTo(map);\r\n      }\r\n    }\r\n    function nearestCountryByCentroid(lat,lng){\r\n      let nearest=null;\r\n      Object.entries(ORIGIN_DB).forEach(([k,v])=>{\r\n        const d=km([lat,lng],v.centroid);\r\n        if(!nearest||d<nearest.d) nearest={cc:k,d};\r\n      });\r\n      return nearest?.cc||'';\r\n    }\r\n    function useMyLocation(){\r\n      if(!('geolocation' in navigator)){ alert('Geolocation not supported by this browser.'); return; }\r\n      navigator.geolocation.getCurrentPosition((pos)=>{\r\n        const {latitude:lat,longitude:lng,accuracy}=pos.coords;\r\n        showMyLocationOnMap(lat,lng,accuracy);\r\n        const best=nearestOriginCity(lat,lng); let label='My location'; let cc=best?.cc||null;\r\n\r\n        if(best && best.d<=250){\r\n          label=`${best.city.city} (${best.city.code}) \u00b7 My location`; cc=best.cc;\r\n          if($('oCountry')){ $('oCountry').value=cc; $('oCountryLabel') && ( $('oCountryLabel').innerHTML=(ORIGIN_DB[cc]?.name||'Select')+'<span class=\"caret\">\u25be<\/span>' ); }\r\n          if($('oCity')){\r\n            $('oCity').innerHTML='<option value=\"\">Any<\/option>';\r\n            (ORIGIN_DB[cc]?.cities||[]).forEach(c=>{\r\n              $('oCity').insertAdjacentHTML('beforeend',`<option value=\"${c.code}\" data-lat=\"${c.lat}\" data-lng=\"${c.lng}\">${c.city} (${c.code})<\/option>`);\r\n            });\r\n            const option=Array.from($('oCity').options).find(o=>o.value===best.city.code);\r\n            if(option){ $('oCity').value=best.city.code; $('oCityLabel') && ( $('oCityLabel').innerHTML=option.text+'<span class=\"caret\">\u25be<\/span>' ); }\r\n          }\r\n        }else{\r\n          if(!cc){ cc=nearestCountryByCentroid(lat,lng); }\r\n          if($('oCountry')){ $('oCountry').value=cc; $('oCountryLabel') && ( $('oCountryLabel').innerHTML=(ORIGIN_DB[cc]?.name||'Select')+'<span class=\"caret\">\u25be<\/span>' ); }\r\n          if($('oCity')){\r\n            $('oCity').innerHTML='<option value=\"\">Any<\/option>';\r\n            (ORIGIN_DB[cc]?.cities||[]).forEach(c=>{\r\n              $('oCity').insertAdjacentHTML('beforeend',`<option value=\"${c.code}\" data-lat=\"${c.lat}\" data-lng=\"${c.lng}\">${c.city} (${c.code})<\/option>`);\r\n            });\r\n            $('oCityLabel') && ( $('oCityLabel').innerHTML='Any<span class=\"caret\">\u25be<\/span>' );\r\n          }\r\n        }\r\n\r\n        setOrigin(lat,lng,label,cc);\r\n        renderTrips();\r\n      },(err)=>{\r\n        let msg='Unable to access location.';\r\n        if(err.code===1) msg='Permission denied. Please allow location access (HTTPS required).';\r\n        if(err.code===2) msg='Position unavailable. Try again.';\r\n        if(err.code===3) msg='Location request timed out. Try again.';\r\n        alert(msg);\r\n      },{enableHighAccuracy:true,timeout:10000,maximumAge:10000});\r\n    }\r\n\r\n    \/* ======= Wire filters (if your dropdown block is present on page) ======= *\/\r\n    (function fillCountries(){\r\n      const sel=$('oCountry'); if(!sel) return;\r\n      sel.innerHTML='<option value=\"\">Country<\/option>';\r\n      Object.entries(ORIGIN_DB).forEach(([cc,obj])=>{\r\n        sel.insertAdjacentHTML('beforeend',`<option value=\"${cc}\">${obj.name}<\/option>`);\r\n      });\r\n    })();\r\n\r\n    $('oCountry')?.addEventListener('change', e=>{\r\n      const cc=e.target.value; $('oCountryLabel') && ( $('oCountryLabel').innerHTML=(ORIGIN_DB[cc]?.name||'Select')+'<span class=\"caret\">\u25be<\/span>' );\r\n      const citySel=$('oCity'); if(!citySel) return;\r\n      citySel.innerHTML='<option value=\"\">Any<\/option>';\r\n      (ORIGIN_DB[cc]?.cities||[]).forEach(c=>{\r\n        citySel.insertAdjacentHTML('beforeend',`<option value=\"${c.code}\" data-lat=\"${c.lat}\" data-lng=\"${c.lng}\">${c.city} (${c.code})<\/option>`);\r\n      });\r\n      $('oCityLabel') && ( $('oCityLabel').innerHTML='Any<span class=\"caret\">\u25be<\/span>' );\r\n    });\r\n    $('oCity')?.addEventListener('change', e=>{\r\n      const txt=e.target.value ? e.target.options[e.target.selectedIndex].text : 'Any';\r\n      $('oCityLabel') && ( $('oCityLabel').innerHTML=txt+'<span class=\"caret\">\u25be<\/span>' );\r\n    });\r\n\r\n    $('applyOrigin')?.addEventListener('click', ()=>{\r\n      const cc=$('oCountry')?.value;\r\n      if(!cc){ alert('Pick an origin country'); return; }\r\n      const optCity=$('oCity')?.value;\r\n      if(optCity){\r\n        const opt=$('oCity').selectedOptions[0];\r\n        const lat=parseFloat(opt.getAttribute('data-lat')), lng=parseFloat(opt.getAttribute('data-lng'));\r\n        setOrigin(lat,lng,opt.text,cc);\r\n      }else{\r\n        const [lat,lng]=ORIGIN_DB[cc].centroid;\r\n        setOrigin(lat,lng,ORIGIN_DB[cc].name,cc);\r\n      }\r\n    });\r\n\r\n    $('btnShow')?.addEventListener('click', renderTrips);\r\n    $('tripType')?.addEventListener('change', renderTrips);\r\n    $('duration')?.addEventListener('change', renderTrips);\r\n    $('resetBtn')?.addEventListener('click', ()=>{\r\n      $('oCountry') && ( $('oCountry').value='' );\r\n      $('oCity') && ( $('oCity').innerHTML='<option value=\"\">Any<\/option>' );\r\n      $('oCountryLabel') && ( $('oCountryLabel').innerHTML='Select<span class=\"caret\">\u25be<\/span>' );\r\n      $('oCityLabel') && ( $('oCityLabel').innerHTML='Any<span class=\"caret\">\u25be<\/span>' );\r\n      $('tripType') && ( $('tripType').value='' );\r\n      $('duration') && ( $('duration').value='' );\r\n      $('tripTypeLabel') && ( $('tripTypeLabel').innerHTML='All<span class=\"caret\">\u25be<\/span>' );\r\n      $('durLabel') && ( $('durLabel').innerHTML='All<span class=\"caret\">\u25be<\/span>' );\r\n      if(originMarker){ map.removeLayer(originMarker); originMarker=null; origin=null; }\r\n      if(myLocMarker){ map.removeLayer(myLocMarker); myLocMarker=null; }\r\n      if(myLocCircle){ map.removeLayer(myLocCircle); myLocCircle=null; }\r\n      clearRoutes();\r\n      $('p-title') && ( $('p-title').textContent='Trips from: \u2014' );\r\n      $('p-sub') && ( $('p-sub').textContent='Pick an origin and filter' );\r\n      map.setView([22,79],5);\r\n    });\r\n\r\n    \/\/ Removed: fullMap\/togglePanel handlers (no \"Full Map\" checkbox anymore)\r\n    $('useMyLoc')?.addEventListener('click', useMyLocation);\r\n  }\r\n})();\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-35 elementor-top-column elementor-element elementor-element-6b94be32\" data-id=\"6b94be32\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-128fd6b2 elementor-widget__width-initial elementor-widget elementor-widget-html\" data-id=\"128fd6b2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- \ud83e\udded MyTripLinks \u2014 Sidebar (Inline Details, no popup) -->\r\n<aside id=\"panel\" aria-label=\"Trip Details\">\r\n  <div class=\"p-head\">\r\n    <div>\r\n      <div class=\"p-title\" id=\"p-title\">Trips from: \u2014<\/div>\r\n      <div class=\"p-sub\" id=\"p-sub\">Pick an origin and filter<\/div>\r\n    <\/div>\r\n    <div class=\"p-sub\"><span id=\"p-count\">0<\/span> results<\/div>\r\n  <\/div>\r\n\r\n  <style>\r\n    .badges{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 12px}\r\n    .badges span{font-size:12px;padding:2px 8px;border:1px solid #e5e7eb;border-radius:999px;background:#f3f4f6}\r\n\r\n    .list{display:flex;flex-direction:column;gap:8px;margin:8px 0}\r\n    .dest{display:flex;justify-content:space-between;gap:12px;border:1px solid #eef0f3;border-radius:10px;padding:8px 10px;cursor:pointer}\r\n    .dest:hover{background:#f9fafb}\r\n    .d1{font-weight:700} .d2{font-size:12px;color:#6b7280}\r\n    .tags{display:flex;gap:6px} .tag{font-size:11px;border:1px solid #e5e7eb;border-radius:999px;padding:2px 6px;background:#fff}\r\n\r\n    .chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}\r\n    .chip{font-size:12px;padding:2px 8px;border:1px solid #e5e7eb;border-radius:999px;background:#fff}\r\n\r\n    .mtl-sec{margin:12px 0}\r\n    .mtl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}\r\n    .mtl-grid img{width:100%;height:90px;object-fit:cover;border-radius:10px;border:1px solid #e5e7eb}\r\n    .mtl-itin .day{border:1px solid #e5e7eb;border-radius:12px;padding:10px;margin-bottom:8px}\r\n    .mtl-itin .day h5{margin:0 0 6px;font-size:.95rem}\r\n\r\n    .mtl-state{padding:10px;border:1px dashed #e5e7eb;border-radius:10px;margin-top:10px;font-size:.95rem}\r\n\r\n    \/* Detail header *\/\r\n    .detail-head{display:flex;align-items:center;gap:10px;justify-content:space-between;border-bottom:1px solid #f1f2f4;padding-bottom:8px;margin-bottom:10px}\r\n    .back-btn{border:1px solid #e5e7eb;background:#fff;border-radius:10px;padding:6px 10px;cursor:pointer}\r\n    .title-wrap{min-width:0}\r\n    .title-main{font-weight:700}\r\n    .title-sub{color:#6b7280;font-size:12px}\r\n  <\/style>\r\n\r\n  <div class=\"p-body\" id=\"mtlContainer\" aria-live=\"polite\">\r\n\r\n    <!-- ===== LIST VIEW ===== -->\r\n    <section id=\"listView\">\r\n      <div class=\"badges\">\r\n        <span id=\"p-duration\">Duration: \u2014<\/span>\r\n        <span id=\"p-distance\">Distance: \u2014<\/span>\r\n        <span id=\"p-best\">Best time: \u2014<\/span>\r\n      <\/div>\r\n\r\n      <div id=\"p-list\" class=\"list\"><\/div>\r\n      <hr>\r\n      <h4 style=\"margin:8px 0\">Suggested Plan<\/h4>\r\n      <ul id=\"p-plan\" style=\"margin:0 0 10px 18px\"><\/ul>\r\n      <div id=\"p-notes\" class=\"p-sub\"><\/div>\r\n\r\n      <h4 style=\"margin:12px 0 6px\">How to get there<\/h4>\r\n      <ul id=\"p-ways\" style=\"margin:0 0 10px 18px\"><\/ul>\r\n\r\n      <h4 style=\"margin:12px 0 6px\">Top Sights<\/h4>\r\n      <ul id=\"p-sights\" style=\"margin:0 0 10px 18px\"><\/ul>\r\n\r\n      <div id=\"mtlState\" class=\"mtl-state\" style=\"display:none\"><\/div>\r\n    <\/section>\r\n\r\n    <!-- ===== DETAIL VIEW (inline) ===== -->\r\n    <section id=\"detailView\" style=\"display:none\">\r\n      <div class=\"detail-head\">\r\n        <div class=\"title-wrap\">\r\n          <div class=\"title-main\" id=\"dTitle\">Trip<\/div>\r\n          <div class=\"title-sub\" id=\"dSub\">Details<\/div>\r\n        <\/div>\r\n        <button id=\"backToList\" class=\"back-btn\" aria-label=\"Back to results\">\u2190 Back<\/button>\r\n      <\/div>\r\n\r\n      <div class=\"chips\" id=\"dFactsChips\"><\/div>\r\n\r\n      <div class=\"mtl-sec\" id=\"dHowSec\" style=\"display:none\">\r\n        <h4 style=\"margin:12px 0 6px\">How to Reach<\/h4>\r\n        <ul id=\"dHow\" style=\"margin:0 0 10px 18px\"><\/ul>\r\n      <\/div>\r\n\r\n      <div class=\"mtl-sec\" id=\"dSightsSec\" style=\"display:none\">\r\n        <h4 style=\"margin:12px 0 6px\">Top Sights<\/h4>\r\n        <ul id=\"dSights\" style=\"margin:0 0 10px 18px\"><\/ul>\r\n      <\/div>\r\n\r\n      <div class=\"mtl-sec mtl-itin\" id=\"dItinSec\" style=\"display:none\">\r\n        <h4 style=\"margin:12px 0 6px\">Day-wise Itinerary<\/h4>\r\n        <div id=\"dItin\"><\/div>\r\n      <\/div>\r\n\r\n      <div class=\"mtl-sec\" id=\"dPhotosSec\" style=\"display:none\">\r\n        <h4 style=\"margin:12px 0 6px\">Photos<\/h4>\r\n        <div id=\"dPhotos\" class=\"mtl-grid\"><\/div>\r\n      <\/div>\r\n    <\/section>\r\n\r\n  <\/div>\r\n<\/aside>\r\n\r\n<script>\r\n  \/\/ JSON location (sidebar only)\r\n  const TRIPS_JSON_URL = 'https:\/\/mytriplinks.com\/wp-content\/uploads\/2025\/10\/trips_india_full.json';\r\n\r\n  let MTL_TRIPS=null, MTL_LOADING=false;\r\n\r\n  function mtlShowState(msg,isError=false){\r\n    const box=document.getElementById('mtlState'); if(!box) return;\r\n    if(!msg){box.style.display='none'; box.textContent=''; return;}\r\n    box.textContent=msg; box.style.display='';\r\n    box.style.borderColor=isError?'#fecaca':'#e5e7eb';\r\n    box.style.background=isError?'#fff1f2':'transparent';\r\n  }\r\n\r\n  async function mtlLoadTrips(){\r\n    if(MTL_TRIPS) return MTL_TRIPS;\r\n    if(MTL_LOADING) return new Promise(res=>{\r\n      const i=setInterval(()=>{ if(MTL_TRIPS){ clearInterval(i); res(MTL_TRIPS); } }, 100);\r\n    });\r\n    MTL_LOADING=true; mtlShowState('Loading trip details\u2026');\r\n    try{\r\n      const r=await fetch(TRIPS_JSON_URL,{cache:'no-store'});\r\n      if(!r.ok) throw new Error('Failed to load trips.json');\r\n      MTL_TRIPS=await r.json();\r\n      mtlShowState('');\r\n      return MTL_TRIPS;\r\n    }catch(e){ console.error(e); mtlShowState('Could not load trips.json',true); throw e; }\r\n    finally{ MTL_LOADING=false; }\r\n  }\r\n\r\n  function mtlFindTrip(id){\r\n    if(!MTL_TRIPS?.trips) return null;\r\n    const idL=String(id||'').toLowerCase();\r\n    return MTL_TRIPS.trips.find(t=>String(t.id||'').toLowerCase()===idL)||null;\r\n  }\r\n\r\n  \/\/ ===== Inline Detail Renderer =====\r\n  function renderDetail(trip){\r\n    if(!trip){ mtlShowState('Trip not found in JSON. Check the id.', true); return; }\r\n    mtlShowState('');\r\n\r\n    \/\/ Title\/sub\r\n    document.getElementById('dTitle').textContent =\r\n      trip.title || `${trip.origin||''}${trip.destination?` \u2192 ${trip.destination}`:''}`;\r\n    document.getElementById('dSub').textContent =\r\n      trip.subtitle || (trip.duration_days? `${trip.duration_days} days` : 'Trip details');\r\n\r\n    \/\/ Facts chips\r\n    const facts = trip.facts || {};\r\n    const chipsHtml = Object.entries(facts).map(([k,v])=>\r\n      `<span class=\"chip\"><b>${String(k).replace(\/_\/g,' ').replace(\/\\b\\w\/g,x=>x.toUpperCase())}:<\/b> ${v}<\/span>`\r\n    ).join('');\r\n    document.getElementById('dFactsChips').innerHTML = chipsHtml;\r\n\r\n    \/\/ How to reach\r\n    const how = trip.how_to_reach || {};\r\n    const howHtml = [\r\n      how.flight?`<li>\u2708\ufe0f ${how.flight}<\/li>`:'',\r\n      how.train?`<li>\ud83d\ude86 ${how.train}<\/li>`:'',\r\n      how.road?`<li>\ud83d\ude97 ${how.road}<\/li>`:''\r\n    ].join('');\r\n    document.getElementById('dHow').innerHTML = howHtml;\r\n    document.getElementById('dHowSec').style.display = howHtml ? '' : 'none';\r\n\r\n    \/\/ Sights\r\n    const sights = Array.isArray(trip.sights)? trip.sights : [];\r\n    document.getElementById('dSights').innerHTML = sights.map(s=>`<li>${s}<\/li>`).join('');\r\n    document.getElementById('dSightsSec').style.display = sights.length ? '' : 'none';\r\n\r\n    \/\/ Itinerary\r\n    const plan = Array.isArray(trip.itinerary)? trip.itinerary : [];\r\n    if(plan.length){\r\n      document.getElementById('dItin').innerHTML = plan.map(d=>`\r\n        <div class=\"day\">\r\n          <h5>${d.day?`Day ${d.day}`:''}${d.title?`: ${d.title}`:''}<\/h5>\r\n          ${Array.isArray(d.items)?`<ul>${d.items.map(i=>`<li>${i}<\/li>`).join('')}<\/ul>`:''}\r\n        <\/div>`).join('');\r\n      document.getElementById('dItinSec').style.display='';\r\n    }else{\r\n      document.getElementById('dItin').innerHTML='';\r\n      document.getElementById('dItinSec').style.display='none';\r\n    }\r\n\r\n    \/\/ Photos\r\n    const photos = Array.isArray(trip.photos)? trip.photos.slice(0,12) : [];\r\n    if(photos.length){\r\n      document.getElementById('dPhotos').innerHTML = photos.map((src,i)=>{\r\n        const alt=(trip.destination || trip.title || 'trip photo')+' '+(i+1);\r\n        return `<a href=\"${src}\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" loading=\"lazy\" src=\"${src}\" alt=\"${alt}\"><\/a>`;\r\n      }).join('');\r\n      document.getElementById('dPhotosSec').style.display='';\r\n    }else{\r\n      document.getElementById('dPhotos').innerHTML='';\r\n      document.getElementById('dPhotosSec').style.display='none';\r\n    }\r\n\r\n    \/\/ Show detail, hide list\r\n    document.getElementById('listView').style.display='none';\r\n    document.getElementById('detailView').style.display='';\r\n    \/\/ Scroll to top of panel\r\n    try{ document.getElementById('mtlContainer')?.scrollTo({top:0,behavior:'smooth'}); }catch(_){}\r\n  }\r\n\r\n  function backToList(clearHash=true){\r\n    document.getElementById('detailView').style.display='none';\r\n    document.getElementById('listView').style.display='';\r\n    if(clearHash && location.hash.startsWith('#trip=')){\r\n      history.pushState('',document.title,location.pathname+location.search);\r\n    }\r\n  }\r\n  document.getElementById('backToList')?.addEventListener('click',()=>backToList());\r\n\r\n  \/\/ ===== Public API used by the map\/list =====\r\n  async function showTripInline(tripId){\r\n    await mtlLoadTrips();\r\n    const t = mtlFindTrip(tripId);\r\n    if(!t){ mtlShowState('Trip not found in JSON. Check the id.', true); return; }\r\n    renderDetail(t);\r\n    if(tripId) location.hash = `trip=${encodeURIComponent(tripId)}`; \/\/ deep link\r\n  }\r\n\r\n  \/\/ Keep compatibility: window.showTrip now opens INLINE (no popup)\r\n  window.showTrip = async function(tripId){\r\n    await showTripInline(tripId);\r\n  };\r\n\r\n  \/\/ Map event \u2192 open inline\r\n  document.addEventListener('mtl:showTrip', async (ev)=>{\r\n    const id = ev.detail?.id; if(!id) return;\r\n    await showTripInline(id);\r\n  });\r\n\r\n  \/\/ Let clicks on the list also open inline\r\n  document.getElementById('p-list')?.addEventListener('click',(e)=>{\r\n    const item=e.target.closest('.dest'); if(!item) return;\r\n    const title=item.querySelector('.d1')?.textContent||'';\r\n    const dCity=String(title).split(\/[ (\u00b7,\\\/]\/)[0].trim();\r\n    const originLabel=(document.getElementById('p-title')?.textContent||'').replace('Trips from:','').trim();\r\n    const core=s=>String(s||'').toLowerCase().trim().split(\/[ (\u00b7,\\\/]\/)[0].replace(\/\\s+\/g,'-').replace(\/[^a-z0-9\\-]\/g,'');\r\n    const tripId=`${core(originLabel)}-${core(dCity)}`;\r\n    if(tripId) window.showTrip(tripId);\r\n  });\r\n\r\n  \/\/ Deep link support\r\n  (function(){\r\n    const m=location.hash.match(\/trip=([^&]+)\/);\r\n    if(m) showTripInline(decodeURIComponent(m[1]));\r\n  })();\r\n\r\n  \/\/ Close details when hash is cleared (Back button)\r\n  window.addEventListener('hashchange',()=>{\r\n    if(!location.hash.startsWith('#trip=')) backToList(false);\r\n  });\r\n<\/script>\r\n\r\n\r\n<style>\r\n\/* ===========================\r\n   MyTripLinks \u2014 Sidebar Glow UI\r\n   (CSS-only theme for #panel)\r\n   =========================== *\/\r\n\r\n:root{\r\n  --mtl-accent:#3b82f6;         \/* primary accent *\/\r\n  --mtl-accent-2:#8b5cf6;       \/* secondary accent (gradients) *\/\r\n  --mtl-bg:#0c1224;             \/* panel bg (dark glass) *\/\r\n  --mtl-card:#121a33;           \/* card bg *\/\r\n  --mtl-line:rgba(255,255,255,.08);\r\n  --mtl-soft:rgba(255,255,255,.06);\r\n  --mtl-text:#eaf0ff;\r\n  --mtl-muted:#98a2b3;\r\n  --mtl-chip:#0f1730;\r\n  --mtl-radius:14px;\r\n  --mtl-shadow:0 12px 32px rgba(8,14,40,.35);\r\n}\r\n\r\n\/* Panel chrome *\/\r\n#panel{\r\n  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)) , var(--mtl-bg) !important;\r\n  border:1px solid var(--mtl-line) !important;\r\n  border-radius:var(--mtl-radius) !important;\r\n  box-shadow:var(--mtl-shadow) !important;\r\n  overflow:hidden;\r\n  color:var(--mtl-text);\r\n}\r\n\r\n\/* Header *\/\r\n#panel .p-head{\r\n  background:linear-gradient(180deg, rgba(59,130,246,.12), rgba(59,130,246,0)) ;\r\n  border-bottom:1px solid var(--mtl-line) !important;\r\n  padding:14px 16px !important;\r\n}\r\n#panel .p-title{\r\n  font-weight:800; letter-spacing:.2px;\r\n  background:linear-gradient(90deg, var(--mtl-text), #b7c4ff);\r\n  -webkit-background-clip:text; background-clip:text; color:transparent;\r\n}\r\n#panel .p-sub{ color:var(--mtl-muted) !important }\r\n\r\n\/* Body *\/\r\n#panel .p-body{\r\n  background:transparent !important;\r\n  padding:14px !important;\r\n  max-height:calc(100vh - 220px);\r\n  overflow:auto;\r\n  scrollbar-width:thin;\r\n}\r\n#panel .p-body::-webkit-scrollbar{width:10px}\r\n#panel .p-body::-webkit-scrollbar-thumb{background:var(--mtl-soft); border-radius:999px}\r\n\r\n\/* Badges row *\/\r\n#panel .badges{\r\n  gap:8px; margin:10px 0 14px !important;\r\n}\r\n#panel .badges span{\r\n  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));\r\n  border:1px solid var(--mtl-line) !important;\r\n  color:var(--mtl-text);\r\n  border-radius:999px; padding:4px 10px !important; font-size:12px !important;\r\n}\r\n\r\n\/* Section headings *\/\r\n#panel h4{\r\n  margin:12px 0 8px !important;\r\n  font-size:.98rem; font-weight:800;\r\n  letter-spacing:.2px;\r\n  color:#ffffff;\r\n}\r\n\r\n\/* Trip list items *\/\r\n#panel .list{gap:10px !important}\r\n#panel .dest{\r\n  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));\r\n  border:1px solid var(--mtl-line) !important;\r\n  border-radius:12px !important;\r\n  padding:12px 12px !important;\r\n  transition:transform .08s ease, box-shadow .2s ease, border-color .2s;\r\n}\r\n#panel .dest:hover{\r\n  transform:translateY(-1px);\r\n  box-shadow:0 8px 22px rgba(8,14,40,.28);\r\n  border-color:rgba(139,92,246,.35);\r\n}\r\n#panel .d1{font-weight:800 !important}\r\n#panel .d2{color:var(--mtl-muted) !important}\r\n#panel .tags{gap:8px !important; align-items:center}\r\n#panel .tag{\r\n  background:var(--mtl-chip) !important;\r\n  border:1px solid var(--mtl-line) !important;\r\n  color:#dfe6ff;\r\n  padding:3px 8px !important; border-radius:999px !important; font-size:11px !important;\r\n}\r\n\r\n\/* Lists inside sections *\/\r\n#panel ul{padding-left:18px}\r\n#panel li{margin:4px 0}\r\n\r\n\/* Info chips (quick facts anywhere with .chip\/.chips) *\/\r\n#panel .chips{display:flex; flex-wrap:wrap; gap:8px}\r\n#panel .chip{\r\n  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));\r\n  border:1px solid var(--mtl-line);\r\n  color:#eaf0ff;\r\n  border-radius:999px; padding:4px 10px; font-size:12px;\r\n}\r\n\r\n\/* Inline Detail View (if you use it) *\/\r\n.detail-head{\r\n  display:flex; align-items:center; justify-content:space-between;\r\n  border-bottom:1px solid var(--mtl-line) !important;\r\n  padding-bottom:10px !important; margin-bottom:12px !important;\r\n}\r\n.title-main{font-weight:900; letter-spacing:.2px}\r\n.title-sub{color:var(--mtl-muted)}\r\n\r\n\/* Back button *\/\r\n.back-btn{\r\n  border:1px solid var(--mtl-line) !important;\r\n  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)) !important;\r\n  color:#fff;\r\n  border-radius:10px !important; padding:6px 12px !important; cursor:pointer;\r\n  transition:transform .08s ease, box-shadow .2s ease;\r\n}\r\n.back-btn:hover{ transform:translateY(-1px); box-shadow:0 8px 20px rgba(8,14,40,.25) }\r\n\r\n\/* Detail cards, itinerary, photo grid (if present) *\/\r\n.mtl-sec{margin:12px 0 !important}\r\n.mtl-itin .day{\r\n  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));\r\n  border:1px solid var(--mtl-line) !important;\r\n  border-radius:12px !important; padding:12px !important;\r\n}\r\n.mtl-itin .day h5{margin:0 0 6px !important; font-size:.95rem}\r\n\r\n.mtl-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}\r\n.mtl-grid img{\r\n  width:100%; height:94px; object-fit:cover;\r\n  border-radius:12px; border:1px solid var(--mtl-line);\r\n  transition:transform .12s ease, box-shadow .2s ease;\r\n}\r\n.mtl-grid img:hover{ transform:scale(1.02); box-shadow:0 10px 22px rgba(8,14,40,.25) }\r\n@media (max-width: 860px){\r\n  .mtl-grid{grid-template-columns:repeat(2,1fr)}\r\n}\r\n\r\n\/* State (alerts) *\/\r\n.mtl-state{\r\n  padding:10px; border:1px dashed var(--mtl-line) !important;\r\n  border-radius:12px; background:rgba(255,255,255,.03); color:#ffd7d7;\r\n}\r\n\r\n\/* hr styling *\/\r\n#panel .p-body hr{\r\n  border:none; height:1px; background:linear-gradient(90deg, transparent, var(--mtl-line), transparent);\r\n  margin:10px 0;\r\n}\r\n\r\n\/* Accent focus rings for interactive items inside sidebar *\/\r\n#panel .dest:focus-within,\r\n#panel .back-btn:focus-visible{\r\n  outline:2px solid transparent;\r\n  box-shadow:0 0 0 3px rgba(59,130,246,.35);\r\n  border-color:rgba(59,130,246,.55) !important;\r\n}\r\n\r\n\/* Optional light theme switch\r\n   If your site is light, uncomment to flip palette:\r\n\r\n:root{\r\n  --mtl-accent:#3b82f6; --mtl-accent-2:#8b5cf6;\r\n  --mtl-bg:#ffffff; --mtl-card:#ffffff; --mtl-line:#e8ecf4;\r\n  --mtl-soft:#f3f5fb; --mtl-text:#111827; --mtl-muted:#6b7280;\r\n  --mtl-chip:#f8fafc; --mtl-radius:14px; --mtl-shadow:0 12px 30px rgba(2,6,23,.08);\r\n}\r\n#panel .p-head{ background:linear-gradient(180deg, rgba(59,130,246,.10), rgba(59,130,246,0)) }\r\n#panel .tag{ color:#1f2937 }\r\n#panel .chip{ color:#111827 }\r\n.mtl-state{ color:#991b1b; background:#fff1f2 }\r\n*\/\r\n<\/style>\r\n\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Find Your Next Trip Pick your origin &#038; filters, then click a map line\/marker to view the full itinerary with photos. \ud83d\udccd Use my location Origin Country auto-filled Select \u25be Origin City Any \u25be Any Set Origin Trip Type All \u25be AllNationalInternational Duration All \u25be All1\u20132 days3\u20135 days6+ days Show trips Reset \u21ba \u2630 Details [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-669","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/mytriplinks.com\/index.php?rest_route=\/wp\/v2\/pages\/669","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mytriplinks.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mytriplinks.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mytriplinks.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mytriplinks.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=669"}],"version-history":[{"count":205,"href":"https:\/\/mytriplinks.com\/index.php?rest_route=\/wp\/v2\/pages\/669\/revisions"}],"predecessor-version":[{"id":907,"href":"https:\/\/mytriplinks.com\/index.php?rest_route=\/wp\/v2\/pages\/669\/revisions\/907"}],"wp:attachment":[{"href":"https:\/\/mytriplinks.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=669"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}