{"id":498,"date":"2025-09-23T09:27:59","date_gmt":"2025-09-23T09:27:59","guid":{"rendered":"https:\/\/moroccotoptour.com\/?page_id=498"},"modified":"2026-03-10T23:23:39","modified_gmt":"2026-03-10T23:23:39","slug":"guest-moments","status":"publish","type":"page","link":"https:\/\/moroccotoptour.com\/zh\/guest-moments\/","title":{"rendered":"Guest Moments"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Videos | Morocco Top Tour<\/title>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;700&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n \/* =====================\r\n WORDPRESS-SAFE VIDEO GRID \u2013 BACKGROUND NOW WHITE\r\n Paste ONLY the <section class=\"mtt-videos\"> ... <\/section> into your page\r\n All styles are scoped to .mtt-videos to avoid theme overrides\r\n ===================== *\/\r\n .mtt-videos, .mtt-videos * { box-sizing: border-box; }\r\n .mtt-videos {\r\n --bg:#ffffff; \/* white main background *\/\r\n --muted:#4b5563; \/* medium gray for secondary text *\/\r\n font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\" !important;\r\n background: radial-gradient(1200px 600px at 80% -10%, rgba(234,179,8,.05), transparent 60%),\r\n radial-gradient(1000px 500px at 10% 0%, rgba(34,197,94,.05), transparent 60%),\r\n var(--bg) !important;\r\n color: #1f2937 !important; \/* dark text *\/\r\n line-height: 1.6 !important;\r\n padding: 24px !important;\r\n }\r\n .mtt-videos .wrap { max-width: 1200px; margin: 0 auto; }\r\n\r\n \/* Header \u2013 light overlay for white bg *\/\r\n .mtt-videos .hero { text-align: center; padding: 36px 12px 18px; }\r\n .mtt-videos .eyebrow { display:inline-block; margin-bottom:10px; padding:6px 10px; border-radius:999px; background:rgba(234,179,8,.1); color:#92400e !important; font-size:12px; letter-spacing:.06em; font-weight:600; text-transform:uppercase; }\r\n .mtt-videos h1 { margin: 0; font-size: 36px; color:#111827 !important; }\r\n .mtt-videos .sub { color:#4b5563 !important; max-width:780px; margin:8px auto 0; }\r\n\r\n \/* Grid *\/\r\n .mtt-videos .grid { display:grid; grid-template-columns: repeat(12, 1fr); gap: 22px; padding-top: 12px; }\r\n .mtt-videos .card { grid-column: span 6; background: #f9fafb; border: 1px solid #e2e8f0; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 25px rgba(0,0,0,.03); }\r\n @media (max-width: 960px){ .mtt-videos .card { grid-column: span 12; } }\r\n\r\n \/* Video media *\/\r\n .mtt-videos .vmedia { position: relative; background:#e5e7eb; }\r\n .mtt-videos .vmedia::before { content: \"\"; display:block; aspect-ratio:16\/9; } \/* keep consistent height *\/\r\n .mtt-videos video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; background:#000; }\r\n\r\n .mtt-videos .body { padding:14px 16px 16px; }\r\n .mtt-videos .title { margin:0 0 6px; font-size:18px; color:#111827 !important; }\r\n .mtt-videos .meta { margin:0; color:#4b5563 !important; font-size:13px; }\r\n\r\n \/* Accessibility & WP resets *\/\r\n .mtt-videos button, .mtt-videos a, .mtt-videos video { outline: none !important; }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <!-- BEGIN: Paste ONLY this <section> block into your WordPress page -->\r\n <section class=\"mtt-videos\">\r\n <div class=\"wrap\">\r\n <div class=\"hero\">\r\n <span class=\"eyebrow\">Morocco Top Tour<\/span>\r\n <h1>Guest Moments & Tour Highlights<\/h1>\r\n <p class=\"sub\">Short clips from recent tours across Marrakech, Sahara, Atlas Mountains, and the coast.<\/p>\r\n <\/div>\r\n\r\n <div class=\"grid\">\r\n <!-- Video 1 -->\r\n <article class=\"card\">\r\n <div class=\"vmedia\">\r\n <video controls preload=\"metadata\" controlslist=\"nodownload noplaybackrate\" playsinline>\r\n <source src=\"https:\/\/moroccotoptour.com\/wp-content\/uploads\/2025\/09\/WhatsApp-Video-2025-09-19-at-15.11.20_34905e65.mp4\" type=\"video\/mp4\" \/>\r\n <\/video>\r\n <\/div>\r\n <div class=\"body\">\r\n <h3 class=\"title\">Highlights \u2014 19 Sept 2025 (15:11)<\/h3>\r\n <p class=\"meta\">Format: MP4 \u00b7 Tap to play<\/p>\r\n <\/div>\r\n <\/article>\r\n\r\n <!-- Video 2 -->\r\n <article class=\"card\">\r\n <div class=\"vmedia\">\r\n <video controls preload=\"metadata\" controlslist=\"nodownload noplaybackrate\" playsinline>\r\n <source src=\"https:\/\/moroccotoptour.com\/wp-content\/uploads\/2025\/09\/WhatsApp-Video-2025-09-19-at-15.19.24_2b4e7855.mp4\" type=\"video\/mp4\" \/>\r\n <\/video>\r\n <\/div>\r\n <div class=\"body\">\r\n <h3 class=\"title\">Highlights \u2014 19 Sept 2025 (15:19)<\/h3>\r\n <p class=\"meta\">Format: MP4 \u00b7 Tap to play<\/p>\r\n <\/div>\r\n <\/article>\r\n\r\n <!-- Video 3 -->\r\n <article class=\"card\">\r\n <div class=\"vmedia\">\r\n <video controls preload=\"metadata\" controlslist=\"nodownload noplaybackrate\" playsinline>\r\n <source src=\"https:\/\/moroccotoptour.com\/wp-content\/uploads\/2025\/09\/WhatsApp-Video-2025-09-19-at-15.19.36_a6bd62f2.mp4\" type=\"video\/mp4\" \/>\r\n <\/video>\r\n <\/div>\r\n <div class=\"body\">\r\n <h3 class=\"title\">Highlights \u2014 19 Sept 2025 (15:19)<\/h3>\r\n <p class=\"meta\">Format: MP4 \u00b7 Tap to play<\/p>\r\n <\/div>\r\n <\/article>\r\n\r\n <!-- Video 4 -->\r\n <article class=\"card\">\r\n <div class=\"vmedia\">\r\n <video controls preload=\"metadata\" controlslist=\"nodownload noplaybackrate\" playsinline>\r\n <source src=\"https:\/\/moroccotoptour.com\/wp-content\/uploads\/2025\/09\/WhatsApp-Video-2025-09-20-at-13.14.52_10dc15c0.mp4\" type=\"video\/mp4\" \/>\r\n <\/video>\r\n <\/div>\r\n <div class=\"body\">\r\n <h3 class=\"title\">Highlights \u2014 20 Sept 2025 (13:14)<\/h3>\r\n <p class=\"meta\">Format: MP4 \u00b7 Tap to play<\/p>\r\n <\/div>\r\n <\/article>\r\n\r\n <!-- Video 5 -->\r\n <article class=\"card\">\r\n <div class=\"vmedia\">\r\n <video controls preload=\"metadata\" controlslist=\"nodownload noplaybackrate\" playsinline>\r\n <source src=\"https:\/\/moroccotoptour.com\/wp-content\/uploads\/2025\/09\/WhatsApp-Video-2025-09-20-at-23.26.29_b26436fc.mp4\" type=\"video\/mp4\" \/>\r\n <\/video>\r\n <\/div>\r\n <div class=\"body\">\r\n <h3 class=\"title\">Highlights \u2014 20 Sept 2025 (23:26)<\/h3>\r\n <p class=\"meta\">Format: MP4 \u00b7 Tap to play<\/p>\r\n <\/div>\r\n <\/article>\r\n\r\n <!-- Video 6 -->\r\n <article class=\"card\">\r\n <div class=\"vmedia\">\r\n <video controls preload=\"metadata\" controlslist=\"nodownload noplaybackrate\" playsinline>\r\n <source src=\"https:\/\/moroccotoptour.com\/wp-content\/uploads\/2025\/09\/WhatsApp-Video-2025-09-20-at-23.29.37_651df386.mp4\" type=\"video\/mp4\" \/>\r\n <\/video>\r\n <\/div>\r\n <div class=\"body\">\r\n <h3 class=\"title\">Highlights \u2014 20 Sept 2025 (23:29)<\/h3>\r\n <p class=\"meta\">Format: MP4 \u00b7 Tap to play<\/p>\r\n <\/div>\r\n <\/article>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n <!-- END block -->\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c23b98f e-flex e-con-boxed e-con e-parent\" data-id=\"c23b98f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5f79b15 elementor-widget elementor-widget-html\" data-id=\"5f79b15\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\" \/>\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\r\n <title>Custom Tour Request<\/title>\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.2\/css\/all.min.css\" integrity=\"sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9\/2PkfG3j3u2KSB4z9YhiJjkxFv1Jd5rhlWST\/dpD0iC5V7Q8YxcpTM1H6mQ==\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\" \/>\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@emailjs\/browser@3\/dist\/email.min.js\"><\/script>\r\n <style>\r\n \/* ============ Reset & root ============ *\/\r\n .tour-popup * { box-sizing: border-box; margin: 0; padding: 0; }\r\n .tour-popup {\r\n --orange: #f59e0b; \/* orange button *\/\r\n --orange-dark: #d97706;\r\n --bg-dark: #0f172a;\r\n --text: #0f172a;\r\n --subtext: #475569;\r\n --muted: #e2e8f0;\r\n --ring: rgba(245, 158, 11, 0.2);\r\n --ok: #10b981;\r\n --error: #ef4444;\r\n font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", \"Apple Color Emoji\", \"Segoe UI Emoji\";\r\n }\r\n\r\n \/* ============ Floating button ============ *\/\r\n .tour-popup .floating-btn {\r\n position: fixed; right: 24px; bottom: 24px; width: 68px; height: 68px;\r\n border-radius: 999px; border: 0; cursor: pointer; z-index: 9998;\r\n background: var(--orange); color: #fff; box-shadow: 0 12px 24px rgba(245, 158, 11, .35);\r\n display: grid; place-items: center; font-size: 1.6rem; transition: .2s ease;\r\n }\r\n .tour-popup .floating-btn:hover { transform: translateY(-3px); background: var(--orange-dark); }\r\n\r\n \/* ============ Overlay & container ============ *\/\r\n .tour-popup .overlay { position: fixed; inset: 0; background: rgba(2,6,23,.65); backdrop-filter: blur(4px); display: none; z-index: 9999; }\r\n .tour-popup .overlay.active { display: grid; place-items: center; }\r\n .tour-popup .card { width: 95%; max-width: 760px; max-height: 92vh; overflow: auto; background: #fff; border-radius: 16px; box-shadow: 0 24px 44px rgba(0,0,0,.2); animation: pop .25s ease; }\r\n @keyframes pop { from { transform: scale(.96); opacity: 0 } to { transform: scale(1); opacity: 1 } }\r\n\r\n \/* ============ Header ============ *\/\r\n .tour-popup .header { padding: 18px 22px; background: linear-gradient(135deg, #f59e0b, #fb923c); color: #fff; border-radius: 16px 16px 0 0; display: flex; align-items: center; justify-content: space-between; }\r\n .tour-popup .header h2 { font-size: 1.2rem; font-weight: 700; letter-spacing: .2px; }\r\n .tour-popup .close { width: 36px; height: 36px; border-radius: 999px; border: 0; background: rgba(255,255,255,.18); color: #fff; display: grid; place-items: center; cursor: pointer; }\r\n\r\n \/* ============ Steps ============ *\/\r\n .tour-popup .content { padding: 22px; }\r\n .tour-popup .steps { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }\r\n .tour-popup .step { height: 6px; background: #f1f5f9; border-radius: 999px; position: relative; overflow: hidden; }\r\n .tour-popup .step::after { content: \"\"; position: absolute; inset: 0; width: 0%; background: var(--orange); transition: width .25s ease; }\r\n .tour-popup .step.active::after { width: 100%; }\r\n\r\n \/* ============ Form ============ *\/\r\n .tour-popup .form-step { display: none; }\r\n .tour-popup .form-step.active { display: block; }\r\n\r\n .tour-popup .group { margin-bottom: 16px; }\r\n .tour-popup label { display: block; font-weight: 600; color: var(--text); margin-bottom: 8px; }\r\n .tour-popup .hint { font-size: .9rem; color: var(--subtext); margin-top: 6px; }\r\n .tour-popup input[type=\"text\"],\r\n .tour-popup input[type=\"email\"],\r\n .tour-popup input[type=\"tel\"],\r\n .tour-popup input[type=\"number\"],\r\n .tour-popup select,\r\n .tour-popup textarea {\r\n width: 100%; padding: 12px 14px; border: 1px solid #e5e7eb; border-radius: 10px; font-size: 1rem; color: var(--text);\r\n transition: border-color .15s ease, box-shadow .15s ease;\r\n }\r\n .tour-popup textarea { min-height: 110px; resize: vertical; }\r\n .tour-popup input:focus, .tour-popup select:focus, .tour-popup textarea:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px var(--ring); }\r\n\r\n .tour-popup .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }\r\n @media (max-width: 640px) { .tour-popup .row { grid-template-columns: 1fr; } }\r\n\r\n .tour-popup .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }\r\n .tour-popup .chip { background: #fff7ed; border: 1px solid #fed7aa; color: #7c2d12; padding: 6px 10px; border-radius: 999px; font-size: .9rem; display: inline-flex; align-items: center; gap: 6px; }\r\n .tour-popup .chip button { border: 0; background: transparent; cursor: pointer; color: inherit; }\r\n\r\n .tour-popup .activities { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }\r\n .tour-popup .activity { border: 1px solid #e5e7eb; border-radius: 10px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; }\r\n .tour-popup .activity input { width: 18px; height: 18px; }\r\n\r\n .tour-popup .error { color: var(--error); font-size: .9rem; margin-top: 6px; display: none; }\r\n\r\n .tour-popup .actions { display: flex; gap: 10px; margin-top: 16px; }\r\n .tour-popup .btn { appearance: none; border: 0; border-radius: 10px; padding: 12px 16px; font-weight: 700; cursor: pointer; }\r\n .tour-popup .btn.primary { background: var(--orange); color: #fff; }\r\n .tour-popup .btn.primary:hover { background: var(--orange-dark); }\r\n .tour-popup .btn.ghost { background: #fff; border: 1px solid #e5e7eb; color: var(--text); }\r\n\r\n \/* ============ Success ============ *\/\r\n .tour-popup .success { text-align: center; padding: 36px 20px; display: none; }\r\n .tour-popup .success i { font-size: 3rem; color: var(--ok); margin-bottom: 12px; }\r\n .tour-popup .success h3 { font-size: 1.4rem; margin-bottom: 8px; }\r\n .tour-popup .success p { color: var(--subtext); }\r\n\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"tour-popup\">\r\n <!-- Floating action button (orange) -->\r\n <button id=\"openTourPopup\" class=\"floating-btn\" aria-label=\"Request a custom tour\">\r\n <i class=\"fa-solid fa-map-location-dot\"><\/i>\r\n <\/button>\r\n\r\n <!-- Overlay \/ Modal -->\r\n <div id=\"tourOverlay\" class=\"overlay\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"tourTitle\">\r\n <div class=\"card\">\r\n <div class=\"header\">\r\n <h2 id=\"tourTitle\">Plan Your Custom Morocco Tour<\/h2>\r\n <button class=\"close\" id=\"closeTourPopup\" aria-label=\"Close\">\r\n <i class=\"fa-solid fa-xmark\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <div class=\"content\">\r\n <!-- progress -->\r\n <div class=\"steps\">\r\n <div id=\"bar1\" class=\"step active\"><\/div>\r\n <div id=\"bar2\" class=\"step\"><\/div>\r\n <\/div>\r\n\r\n <!-- Success screen -->\r\n <div id=\"successScreen\" class=\"success\">\r\n <i class=\"fa-solid fa-circle-check\"><\/i>\r\n <h3>Thank you! Your request was sent.<\/h3>\r\n <p>We\u2019ll get back to you shortly to confirm the details.<\/p>\r\n <div class=\"actions\" style=\"justify-content:center; margin-top:18px\">\r\n <button class=\"btn primary\" id=\"successClose\">Close<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Form -->\r\n <form id=\"tourForm\">\r\n <!-- STEP 1: Contact + Tour name + Cities -->\r\n <section id=\"step1\" class=\"form-step active\">\r\n <div class=\"group\">\r\n <label for=\"tour_name\">Tour name *<\/label>\r\n <input id=\"tour_name\" name=\"tour_name\" type=\"text\" placeholder=\"e.g., Sahara & Imperial Cities\" required \/>\r\n <div class=\"error\" id=\"tour_name_err\">Please enter a tour name.<\/div>\r\n <\/div>\r\n\r\n <div class=\"row\">\r\n <div class=\"group\">\r\n <label for=\"full_name\">Full name *<\/label>\r\n <input id=\"full_name\" name=\"full_name\" type=\"text\" placeholder=\"Your name\" required \/>\r\n <div class=\"error\" id=\"full_name_err\">Please enter your name.<\/div>\r\n <\/div>\r\n <div class=\"group\">\r\n <label for=\"email\">Email *<\/label>\r\n <input id=\"email\" name=\"email\" type=\"email\" placeholder=\"you@example.com\" required \/>\r\n <div class=\"error\" id=\"email_err\">Enter a valid email.<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"group\">\r\n <label for=\"phone\">Phone *<\/label>\r\n <input id=\"phone\" name=\"phone\" type=\"tel\" placeholder=\"+212 6 00 00 00 00\" required \/>\r\n <div class=\"error\" id=\"phone_err\">Please enter your phone number.<\/div>\r\n <\/div>\r\n\r\n <div class=\"group\">\r\n <label>Cities to visit (add up to 30) *<\/label>\r\n <div class=\"row\">\r\n <select id=\"citySelect\">\r\n <!-- options injected by JS -->\r\n <\/select>\r\n <button type=\"button\" class=\"btn ghost\" id=\"addCityBtn\"><i class=\"fa-solid fa-plus\"><\/i> Add city<\/button>\r\n <\/div>\r\n <div id=\"cityChips\" class=\"chips\" aria-live=\"polite\"><\/div>\r\n <div class=\"hint\">Popular: Marrakech, Fes, Chefchaouen, Merzouga (Sahara), Ouarzazate, Essaouira, Agadir, Atlas Mountains, Tangier, Rabat, Casablanca, Meknes, A\u00eft Benhaddou, Dades\/Todra Gorges, Dakhla, Oualidia\u2026<\/div>\r\n <div class=\"error\" id=\"cities_err\">Add at least one city.<\/div>\r\n <\/div>\r\n\r\n <div class=\"actions\">\r\n <button type=\"button\" id=\"toStep2\" class=\"btn primary\">Continue<\/button>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- STEP 2: Trip details + Activities + Message & Submit -->\r\n <section id=\"step2\" class=\"form-step\">\r\n <div class=\"row\">\r\n <div class=\"group\">\r\n <label for=\"days\">How many days? *<\/label>\r\n <input id=\"days\" name=\"days\" type=\"number\" min=\"1\" step=\"1\" placeholder=\"e.g., 7\" required \/>\r\n <div class=\"error\" id=\"days_err\">Enter at least 1 day.<\/div>\r\n <\/div>\r\n <div class=\"group\">\r\n <label for=\"people\">How many people? (min 2) *<\/label>\r\n <input id=\"people\" name=\"people\" type=\"number\" min=\"2\" step=\"1\" placeholder=\"2\" required \/>\r\n <div class=\"error\" id=\"people_err\">At least 2 people.<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"group\">\r\n <label>Activities (optional)<\/label>\r\n <div class=\"activities\">\r\n <label class=\"activity\"><input type=\"checkbox\" value=\"Camel Trek\" class=\"act\"> <span>\r\n <i class=\"fa-solid fa-camel\"><\/i> Camel trek<\/span><\/label>\r\n <label class=\"activity\"><input type=\"checkbox\" value=\"Quad Biking\" class=\"act\"> <span>\r\n <i class=\"fa-solid fa-motorcycle\"><\/i> Quad biking<\/span><\/label>\r\n <label class=\"activity\"><input type=\"checkbox\" value=\"Sandboarding\" class=\"act\"> <span>\r\n <i class=\"fa-solid fa-person-skiing\"><\/i> Sandboarding<\/span><\/label>\r\n <label class=\"activity\"><input type=\"checkbox\" value=\"Air Balloon\" class=\"act\"> <span>\r\n <i class=\"fa-solid fa-hot-tub-person\"><\/i><\/span> Air balloon<\/label>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"group\">\r\n <label for=\"message\">Message (optional)<\/label>\r\n <textarea id=\"message\" name=\"message\" placeholder=\"Tell us anything else\u2026\"><\/textarea>\r\n <\/div>\r\n\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"btn ghost\" id=\"backTo1\">Back<\/button>\r\n <button type=\"submit\" class=\"btn primary\" id=\"submitBtn\"><i class=\"fa-solid fa-paper-plane\"><\/i> Send request<\/button>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- hidden field to store cities -->\r\n <input type=\"hidden\" id=\"cities\" name=\"cities\" \/>\r\n <\/form>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ ---------- EmailJS init (Public Key) ----------\r\n (function() { emailjs.init(\"UlHaF0FvVmgEUyv26\"); })();\r\n\r\n \/\/ ---------- Elements ----------\r\n const overlay = document.getElementById('tourOverlay');\r\n const openBtn = document.getElementById('openTourPopup');\r\n const closeBtn = document.getElementById('closeTourPopup');\r\n const successClose = document.getElementById('successClose');\r\n\r\n const step1 = document.getElementById('step1');\r\n const step2 = document.getElementById('step2');\r\n const bar1 = document.getElementById('bar1');\r\n const bar2 = document.getElementById('bar2');\r\n\r\n const toStep2Btn = document.getElementById('toStep2');\r\n const backTo1Btn = document.getElementById('backTo1');\r\n\r\n const citySelect = document.getElementById('citySelect');\r\n const addCityBtn = document.getElementById('addCityBtn');\r\n const cityChips = document.getElementById('cityChips');\r\n const citiesHidden = document.getElementById('cities');\r\n const successScreen = document.getElementById('successScreen');\r\n const form = document.getElementById('tourForm');\r\n\r\n const fields = {\r\n tour_name: document.getElementById('tour_name'),\r\n full_name: document.getElementById('full_name'),\r\n email: document.getElementById('email'),\r\n phone: document.getElementById('phone'),\r\n days: document.getElementById('days'),\r\n people: document.getElementById('people'),\r\n message: document.getElementById('message')\r\n };\r\n\r\n const errs = {\r\n tour_name: document.getElementById('tour_name_err'),\r\n full_name: document.getElementById('full_name_err'),\r\n email: document.getElementById('email_err'),\r\n phone: document.getElementById('phone_err'),\r\n days: document.getElementById('days_err'),\r\n people: document.getElementById('people_err'),\r\n cities: document.getElementById('cities_err')\r\n };\r\n\r\n \/\/ ---------- City list (popular Morocco tour stops) ----------\r\n const MOROCCO_CITIES = [\r\n 'Marrakech','Fes','Casablanca','Rabat','Chefchaouen','Tangier','Tetouan','Meknes','Essaouira','Agadir',\r\n 'Ouarzazate','Merzouga (Sahara)','Zagora','Ait Benhaddou','Ifrane','Atlas Mountains','Dades Gorges','Todra Gorge',\r\n 'Asilah','Taroudant','Oualidia','Dakhla','Laayoune','El Jadida','Oujda','Nador','Tinghir','Midelt','Erfoud','Taza'\r\n ];\r\n\r\n function populateCitySelect() {\r\n MOROCCO_CITIES.forEach(c => {\r\n const opt = document.createElement('option');\r\n opt.value = c; opt.textContent = c; citySelect.appendChild(opt);\r\n });\r\n }\r\n\r\n const selectedCities = new Set();\r\n\r\n function renderChips() {\r\n cityChips.innerHTML = '';\r\n selectedCities.forEach(city => {\r\n const chip = document.createElement('span');\r\n chip.className = 'chip';\r\n chip.innerHTML = `${city} <button type=\"button\" aria-label=\"Remove ${city}\" data-city=\"${city}\"><i class=\"fa-solid fa-xmark\"><\/i><\/button>`;\r\n cityChips.appendChild(chip);\r\n });\r\n citiesHidden.value = Array.from(selectedCities).join(', ');\r\n }\r\n\r\n function addCity(city) {\r\n if (!city) return;\r\n if (selectedCities.size >= 30) return; \/\/ hard cap (user asked: more than 10 allowed)\r\n selectedCities.add(city);\r\n renderChips();\r\n }\r\n\r\n \/\/ ---------- Open\/close popup ----------\r\n openBtn.addEventListener('click', () => { overlay.classList.add('active'); document.body.style.overflow = 'hidden'; });\r\n function closePopup() { overlay.classList.remove('active'); document.body.style.overflow = ''; resetAll(); }\r\n closeBtn.addEventListener('click', closePopup);\r\n overlay.addEventListener('click', (e) => { if (e.target === overlay) closePopup(); });\r\n successClose.addEventListener('click', closePopup);\r\n\r\n \/\/ ---------- Step navigation ----------\r\n toStep2Btn.addEventListener('click', () => {\r\n const ok = validateStep1();\r\n if (!ok) return;\r\n step1.classList.remove('active'); bar1.classList.remove('active');\r\n step2.classList.add('active'); bar2.classList.add('active');\r\n });\r\n backTo1Btn.addEventListener('click', () => {\r\n step2.classList.remove('active'); bar2.classList.remove('active');\r\n step1.classList.add('active'); bar1.classList.add('active');\r\n });\r\n\r\n \/\/ ---------- Add\/Remove cities ----------\r\n addCityBtn.addEventListener('click', () => addCity(citySelect.value));\r\n cityChips.addEventListener('click', (e) => {\r\n const btn = e.target.closest('button[data-city]');\r\n if (!btn) return;\r\n selectedCities.delete(btn.getAttribute('data-city'));\r\n renderChips();\r\n });\r\n\r\n \/\/ ---------- Validation ----------\r\n function show(el) { el.style.display = 'block'; }\r\n function hide(el) { el.style.display = 'none'; }\r\n\r\n function validEmail(v) { return \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/.test(String(v).toLowerCase()); }\r\n\r\n function validateStep1() {\r\n let ok = true;\r\n \/\/ tour name\r\n if (!fields.tour_name.value.trim()) { show(errs.tour_name); ok = false; } else hide(errs.tour_name);\r\n \/\/ name\r\n if (!fields.full_name.value.trim()) { show(errs.full_name); ok = false; } else hide(errs.full_name);\r\n \/\/ email\r\n if (!fields.email.value.trim() || !validEmail(fields.email.value)) { show(errs.email); ok = false; } else hide(errs.email);\r\n \/\/ phone\r\n if (!fields.phone.value.trim()) { show(errs.phone); ok = false; } else hide(errs.phone);\r\n \/\/ cities\r\n if (selectedCities.size === 0) { show(errs.cities); ok = false; } else hide(errs.cities);\r\n return ok;\r\n }\r\n\r\n function validateStep2() {\r\n let ok = true;\r\n if (!fields.days.value || Number(fields.days.value) < 1) { show(errs.days); ok = false; } else hide(errs.days);\r\n if (!fields.people.value || Number(fields.people.value) < 2) { show(errs.people); ok = false; } else hide(errs.people);\r\n return ok;\r\n }\r\n\r\n \/\/ ---------- Submit ----------\r\n form.addEventListener('submit', function(e) {\r\n e.preventDefault();\r\n if (!validateStep2()) return;\r\n\r\n \/\/ collect activities\r\n const acts = Array.from(document.querySelectorAll('.act:checked')).map(i => i.value);\r\n\r\n const templateParams = {\r\n tour_name: fields.tour_name.value.trim(),\r\n full_name: fields.full_name.value.trim(),\r\n email: fields.email.value.trim(),\r\n phone: fields.phone.value.trim(),\r\n cities: Array.from(selectedCities).join(', '),\r\n days: String(fields.days.value),\r\n people: String(fields.people.value),\r\n activities: acts.length ? acts.join(', ') : 'None',\r\n message: fields.message.value.trim() || '\u2014',\r\n created_at: new Date().toLocaleString()\r\n };\r\n\r\n const submitBtn = document.getElementById('submitBtn');\r\n const oldHtml = submitBtn.innerHTML; submitBtn.disabled = true; submitBtn.innerHTML = '<i class=\"fa-solid fa-spinner fa-spin\"><\/i> Sending...';\r\n\r\n \/\/ Service & Template from user request\r\n emailjs.send('service_z8490d1', 'template_a758c81', templateParams)\r\n .then(() => {\r\n \/\/ show success page inside modal\r\n form.style.display = 'none';\r\n successScreen.style.display = 'block';\r\n document.querySelector('.content').scrollTo({ top: 0, behavior: 'smooth' });\r\n })\r\n .catch(err => {\r\n alert('There was an error submitting your request. Please try again.');\r\n console.error('EmailJS error:', err);\r\n })\r\n .finally(() => { submitBtn.disabled = false; submitBtn.innerHTML = oldHtml; });\r\n });\r\n\r\n \/\/ ---------- Helpers ----------\r\n function resetAll() {\r\n \/\/ reset UI\r\n successScreen.style.display = 'none';\r\n form.style.display = 'block';\r\n step2.classList.remove('active'); bar2.classList.remove('active');\r\n step1.classList.add('active'); bar1.classList.add('active');\r\n\r\n \/\/ reset data\r\n form.reset();\r\n selectedCities.clear();\r\n renderChips();\r\n\r\n \/\/ hide errors\r\n Object.values(errs).forEach(hide);\r\n }\r\n\r\n \/\/ ---------- Init ----------\r\n populateCitySelect();\r\n renderChips();\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Videos | Morocco Top Tour Morocco Top Tour Guest Moments & … <\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"class_list":["post-498","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/moroccotoptour.com\/zh\/wp-json\/wp\/v2\/pages\/498","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/moroccotoptour.com\/zh\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/moroccotoptour.com\/zh\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/moroccotoptour.com\/zh\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/moroccotoptour.com\/zh\/wp-json\/wp\/v2\/comments?post=498"}],"version-history":[{"count":10,"href":"https:\/\/moroccotoptour.com\/zh\/wp-json\/wp\/v2\/pages\/498\/revisions"}],"predecessor-version":[{"id":817,"href":"https:\/\/moroccotoptour.com\/zh\/wp-json\/wp\/v2\/pages\/498\/revisions\/817"}],"wp:attachment":[{"href":"https:\/\/moroccotoptour.com\/zh\/wp-json\/wp\/v2\/media?parent=498"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}