{"id":604,"date":"2026-08-06T06:14:33","date_gmt":"2026-08-06T06:14:33","guid":{"rendered":"https:\/\/training25.persistenttechnology.in\/?page_id=604"},"modified":"2026-08-10T08:23:40","modified_gmt":"2026-08-10T08:23:40","slug":"booking-status","status":"publish","type":"page","link":"https:\/\/training25.persistenttechnology.in\/?page_id=604","title":{"rendered":"Booking status"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\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\r\n Booking Status | Demo Car Rental<\/title>\r\n\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n\r\n <link\r\n href=\"https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap\"\r\n rel=\"stylesheet\"\r\n >\r\n\r\n <style>\r\n :root {\r\n --bg: #f6f7f5;\r\n --card: #ffffff;\r\n --text: #161816;\r\n --muted: #777c76;\r\n --line: #e7e9e4;\r\n\r\n --green: #173d2a;\r\n --green-2: #245b3d;\r\n --lime: #d9f36b;\r\n\r\n --cream: #f3f0e7;\r\n\r\n --success-bg: #eef8dc;\r\n --success: #37611f;\r\n --danger: #b24b3d;\r\n\r\n --shadow: 0 20px 60px rgba(20, 35, 25, 0.08);\r\n --radius: 24px;\r\n }\r\n\r\n * {\r\n box-sizing: border-box;\r\n margin: 0;\r\n padding: 0;\r\n }\r\n\r\n html {\r\n scroll-behavior: smooth;\r\n }\r\n\r\n body {\r\n font-family: \"DM Sans\", sans-serif;\r\n background: var(--bg);\r\n color: var(--text);\r\n min-height: 100vh;\r\n }\r\n\r\n button,\r\n input {\r\n font: inherit;\r\n }\r\n\r\n button {\r\n cursor: pointer;\r\n }\r\n\r\n \/* =========================\r\n NAVBAR\r\n ========================= *\/\r\n\r\n .navbar {\r\n height: 76px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n\r\n padding: 0 6%;\r\n\r\n background: rgba(255, 255, 255, 0.88);\r\n backdrop-filter: blur(18px);\r\n\r\n border-bottom: 1px solid rgba(0, 0, 0, 0.05);\r\n\r\n position: sticky;\r\n top: 0;\r\n z-index: 50;\r\n }\r\n\r\n .logo {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n\r\n font-size: 19px;\r\n font-weight: 700;\r\n letter-spacing: -0.5px;\r\n\r\n white-space: nowrap;\r\n }\r\n\r\n .logo-mark {\r\n width: 38px;\r\n height: 38px;\r\n\r\n display: grid;\r\n place-items: center;\r\n\r\n background: var(--green);\r\n color: var(--lime);\r\n\r\n border-radius: 12px;\r\n\r\n font-size: 17px;\r\n font-weight: 700;\r\n\r\n box-shadow: 0 7px 20px rgba(23, 61, 42, 0.18);\r\n }\r\n\r\n .nav-links {\r\n display: flex;\r\n align-items: center;\r\n gap: 32px;\r\n }\r\n\r\n .nav-links a {\r\n color: #626761;\r\n text-decoration: none;\r\n\r\n font-size: 13px;\r\n font-weight: 500;\r\n\r\n transition: 0.2s;\r\n }\r\n\r\n .nav-links a:hover,\r\n .nav-links a.active {\r\n color: var(--green);\r\n }\r\n\r\n .profile {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n\r\n font-size: 13px;\r\n font-weight: 600;\r\n }\r\n\r\n .avatar {\r\n width: 38px;\r\n height: 38px;\r\n\r\n display: grid;\r\n place-items: center;\r\n\r\n border-radius: 50%;\r\n\r\n background: #dfe5da;\r\n color: var(--green);\r\n\r\n font-size: 12px;\r\n font-weight: 700;\r\n }\r\n\r\n \/* =========================\r\n PAGE\r\n ========================= *\/\r\n\r\n .container {\r\n width: min(1180px, 92%);\r\n margin: auto;\r\n\r\n padding: 55px 0 80px;\r\n }\r\n\r\n .page-heading {\r\n margin-bottom: 34px;\r\n }\r\n\r\n .eyebrow {\r\n margin-bottom: 9px;\r\n\r\n color: var(--green-2);\r\n\r\n text-transform: uppercase;\r\n letter-spacing: 2px;\r\n\r\n font-size: 10px;\r\n font-weight: 700;\r\n }\r\n\r\n h1 {\r\n margin-bottom: 12px;\r\n\r\n font-family: \"Playfair Display\", serif;\r\n\r\n font-size: clamp(40px, 5vw, 60px);\r\n line-height: 1;\r\n\r\n letter-spacing: -2px;\r\n }\r\n\r\n .subtitle {\r\n color: var(--muted);\r\n font-size: 14px;\r\n line-height: 1.6;\r\n }\r\n\r\n \/* =========================\r\n MAIN GRID\r\n ========================= *\/\r\n\r\n .grid {\r\n display: grid;\r\n grid-template-columns: 1.55fr 0.8fr;\r\n\r\n gap: 24px;\r\n\r\n align-items: start;\r\n }\r\n\r\n .card {\r\n background: var(--card);\r\n\r\n border: 1px solid rgba(0, 0, 0, 0.045);\r\n\r\n border-radius: var(--radius);\r\n\r\n box-shadow: var(--shadow);\r\n }\r\n\r\n \/* =========================\r\n BOOKING CARD\r\n ========================= *\/\r\n\r\n .booking-card {\r\n padding: 30px;\r\n }\r\n\r\n .booking-top {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-start;\r\n\r\n gap: 20px;\r\n\r\n padding-bottom: 26px;\r\n\r\n border-bottom: 1px solid var(--line);\r\n }\r\n\r\n .booking-id {\r\n margin-bottom: 7px;\r\n\r\n color: var(--muted);\r\n\r\n font-size: 11px;\r\n letter-spacing: 0.3px;\r\n }\r\n\r\n .booking-title {\r\n font-size: 22px;\r\n font-weight: 700;\r\n }\r\n\r\n .status {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 8px;\r\n\r\n padding: 9px 14px;\r\n\r\n background: var(--success-bg);\r\n color: var(--success);\r\n\r\n border-radius: 100px;\r\n\r\n font-size: 11px;\r\n font-weight: 700;\r\n\r\n white-space: nowrap;\r\n }\r\n\r\n .status-dot {\r\n width: 7px;\r\n height: 7px;\r\n\r\n border-radius: 50%;\r\n\r\n background: #78b942;\r\n\r\n box-shadow:\r\n 0 0 0 4px rgba(120, 185, 66, 0.12);\r\n }\r\n\r\n \/* =========================\r\n ROUTE\r\n ========================= *\/\r\n\r\n .route {\r\n padding: 30px 0;\r\n\r\n display: grid;\r\n\r\n grid-template-columns: 1fr 90px 1fr;\r\n\r\n align-items: center;\r\n\r\n gap: 20px;\r\n }\r\n\r\n .location-label {\r\n margin-bottom: 7px;\r\n\r\n color: var(--muted);\r\n\r\n text-transform: uppercase;\r\n letter-spacing: 1.2px;\r\n\r\n font-size: 10px;\r\n font-weight: 600;\r\n }\r\n\r\n .location-name {\r\n margin-bottom: 5px;\r\n\r\n font-size: 17px;\r\n font-weight: 700;\r\n }\r\n\r\n .date {\r\n color: var(--muted);\r\n font-size: 12px;\r\n }\r\n\r\n .route-middle {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n }\r\n\r\n .route-icon {\r\n margin-bottom: 7px;\r\n\r\n color: var(--green);\r\n\r\n font-size: 20px;\r\n }\r\n\r\n .route-line {\r\n width: 100%;\r\n height: 1px;\r\n\r\n background: #ccd3cb;\r\n\r\n position: relative;\r\n }\r\n\r\n .route-line::before,\r\n .route-line::after {\r\n content: \"\";\r\n\r\n position: absolute;\r\n\r\n top: 50%;\r\n\r\n width: 10px;\r\n height: 10px;\r\n\r\n transform: translateY(-50%);\r\n\r\n border-radius: 50%;\r\n }\r\n\r\n .route-line::before {\r\n left: 0;\r\n\r\n background: var(--green);\r\n\r\n border: 3px solid #e0e8df;\r\n }\r\n\r\n .route-line::after {\r\n right: 0;\r\n\r\n background: var(--lime);\r\n\r\n border: 3px solid #edf5d4;\r\n }\r\n\r\n \/* =========================\r\n DETAILS\r\n ========================= *\/\r\n\r\n .details {\r\n display: grid;\r\n\r\n grid-template-columns: repeat(2, 1fr);\r\n\r\n border-top: 1px solid var(--line);\r\n border-bottom: 1px solid var(--line);\r\n }\r\n\r\n .detail {\r\n padding: 20px 0;\r\n }\r\n\r\n .detail:nth-child(odd) {\r\n padding-right: 25px;\r\n\r\n border-right: 1px solid var(--line);\r\n }\r\n\r\n .detail:nth-child(even) {\r\n padding-left: 25px;\r\n }\r\n\r\n .detail-label {\r\n margin-bottom: 7px;\r\n\r\n color: var(--muted);\r\n\r\n text-transform: uppercase;\r\n letter-spacing: 1px;\r\n\r\n font-size: 10px;\r\n font-weight: 600;\r\n }\r\n\r\n .detail-value {\r\n font-size: 13px;\r\n font-weight: 600;\r\n }\r\n\r\n \/* =========================\r\n TIMELINE\r\n ========================= *\/\r\n\r\n .timeline {\r\n padding-top: 28px;\r\n }\r\n\r\n .timeline-title {\r\n margin-bottom: 20px;\r\n\r\n font-size: 14px;\r\n font-weight: 700;\r\n }\r\n\r\n .steps {\r\n display: flex;\r\n justify-content: space-between;\r\n\r\n position: relative;\r\n }\r\n\r\n .steps::before {\r\n content: \"\";\r\n\r\n position: absolute;\r\n\r\n left: 8px;\r\n right: 8px;\r\n top: 8px;\r\n\r\n height: 2px;\r\n\r\n background: #e1e5df;\r\n }\r\n\r\n .step {\r\n width: 25%;\r\n\r\n position: relative;\r\n z-index: 2;\r\n\r\n color: var(--muted);\r\n\r\n font-size: 10px;\r\n }\r\n\r\n .step:nth-child(2),\r\n .step:nth-child(3) {\r\n text-align: center;\r\n }\r\n\r\n .step:last-child {\r\n text-align: right;\r\n }\r\n\r\n .step-circle {\r\n width: 17px;\r\n height: 17px;\r\n\r\n display: inline-block;\r\n\r\n margin-bottom: 9px;\r\n\r\n background: white;\r\n\r\n border: 2px solid #cfd5ce;\r\n\r\n border-radius: 50%;\r\n }\r\n\r\n .step.done {\r\n color: var(--green);\r\n font-weight: 600;\r\n }\r\n\r\n .step.done .step-circle {\r\n background: var(--green);\r\n border-color: var(--green);\r\n\r\n box-shadow:\r\n 0 0 0 4px #e4eee6;\r\n }\r\n\r\n .step.active {\r\n color: var(--green);\r\n font-weight: 700;\r\n }\r\n\r\n .step.active .step-circle {\r\n background: var(--lime);\r\n border-color: var(--green);\r\n\r\n box-shadow:\r\n 0 0 0 4px #eef4df;\r\n }\r\n\r\n \/* =========================\r\n SIDEBAR\r\n ========================= *\/\r\n\r\n .side {\r\n display: flex;\r\n flex-direction: column;\r\n\r\n gap: 20px;\r\n }\r\n\r\n \/* =========================\r\n DISCOUNT\r\n ========================= *\/\r\n\r\n .discount {\r\n padding: 25px;\r\n }\r\n\r\n .card-heading {\r\n margin-bottom: 6px;\r\n\r\n font-size: 17px;\r\n font-weight: 700;\r\n }\r\n\r\n .card-description {\r\n margin-bottom: 19px;\r\n\r\n color: var(--muted);\r\n\r\n font-size: 11px;\r\n line-height: 1.6;\r\n }\r\n\r\n .promo {\r\n display: flex;\r\n gap: 8px;\r\n }\r\n\r\n .promo input {\r\n width: 100%;\r\n min-width: 0;\r\n\r\n padding: 13px;\r\n\r\n background: #fafbf9;\r\n\r\n border: 1px solid var(--line);\r\n border-radius: 12px;\r\n\r\n outline: none;\r\n\r\n color: var(--text);\r\n\r\n font-size: 11px;\r\n\r\n text-transform: uppercase;\r\n\r\n transition: 0.2s;\r\n }\r\n\r\n .promo input:focus {\r\n border-color: var(--green);\r\n\r\n box-shadow:\r\n 0 0 0 3px rgba(23, 61, 42, 0.06);\r\n }\r\n\r\n .apply {\r\n padding: 0 17px;\r\n\r\n border: 0;\r\n border-radius: 12px;\r\n\r\n background: var(--green);\r\n color: white;\r\n\r\n font-size: 11px;\r\n font-weight: 700;\r\n\r\n transition: 0.2s;\r\n }\r\n\r\n .apply:hover {\r\n background: var(--green-2);\r\n\r\n transform: translateY(-1px);\r\n }\r\n\r\n #promoMessage {\r\n display: none;\r\n\r\n margin-top: 10px;\r\n\r\n font-size: 11px;\r\n line-height: 1.5;\r\n }\r\n\r\n \/* =========================\r\n DEALS\r\n ========================= *\/\r\n\r\n .deals {\r\n padding: 25px;\r\n }\r\n\r\n .deals-header {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n\r\n margin-bottom: 18px;\r\n }\r\n\r\n .deals-header .card-heading {\r\n margin-bottom: 0;\r\n }\r\n\r\n .view-all {\r\n color: var(--green);\r\n\r\n text-decoration: none;\r\n\r\n font-size: 10px;\r\n font-weight: 700;\r\n }\r\n\r\n .deal {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n\r\n gap: 14px;\r\n\r\n padding: 16px;\r\n\r\n margin-bottom: 11px;\r\n\r\n background: var(--cream);\r\n\r\n border-radius: 17px;\r\n\r\n cursor: pointer;\r\n\r\n transition: 0.25s;\r\n }\r\n\r\n .deal:last-child {\r\n margin-bottom: 0;\r\n }\r\n\r\n .deal:hover {\r\n transform: translateY(-2px);\r\n\r\n box-shadow:\r\n 0 8px 20px rgba(0, 0, 0, 0.06);\r\n }\r\n\r\n .deal-name {\r\n margin-bottom: 4px;\r\n\r\n font-size: 12px;\r\n font-weight: 700;\r\n }\r\n\r\n .deal-desc {\r\n color: var(--muted);\r\n\r\n font-size: 9px;\r\n line-height: 1.5;\r\n }\r\n\r\n .deal-badge {\r\n min-width: 52px;\r\n height: 52px;\r\n\r\n display: grid;\r\n place-items: center;\r\n\r\n flex-shrink: 0;\r\n\r\n background: var(--green);\r\n color: var(--lime);\r\n\r\n border-radius: 14px;\r\n\r\n font-size: 12px;\r\n font-weight: 700;\r\n\r\n line-height: 1.1;\r\n\r\n text-align: center;\r\n }\r\n\r\n \/* =========================\r\n SUPPORT\r\n ========================= *\/\r\n\r\n .support {\r\n padding: 25px;\r\n\r\n background: var(--green);\r\n color: white;\r\n\r\n border-radius: var(--radius);\r\n\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .support::after {\r\n content: \"\";\r\n\r\n position: absolute;\r\n\r\n width: 140px;\r\n height: 140px;\r\n\r\n right: -50px;\r\n top: -50px;\r\n\r\n border-radius: 50%;\r\n\r\n background: rgba(217, 243, 107, 0.1);\r\n }\r\n\r\n .support h3 {\r\n margin-bottom: 7px;\r\n\r\n font-family: \"Playfair Display\", serif;\r\n\r\n font-size: 21px;\r\n }\r\n\r\n .support p {\r\n max-width: 240px;\r\n\r\n margin-bottom: 18px;\r\n\r\n color: #b9c7bc;\r\n\r\n font-size: 10px;\r\n line-height: 1.6;\r\n }\r\n\r\n .support-btn {\r\n padding: 10px 15px;\r\n\r\n background: transparent;\r\n\r\n border: 1px solid rgba(255, 255, 255, 0.25);\r\n border-radius: 10px;\r\n\r\n color: white;\r\n\r\n font-size: 10px;\r\n font-weight: 700;\r\n\r\n transition: 0.2s;\r\n }\r\n\r\n .support-btn:hover {\r\n background: white;\r\n color: var(--green);\r\n }\r\n\r\n \/* =========================\r\n TOAST\r\n ========================= *\/\r\n\r\n .toast {\r\n position: fixed;\r\n\r\n left: 50%;\r\n bottom: 25px;\r\n\r\n transform: translate(-50%, 100px);\r\n\r\n padding: 13px 20px;\r\n\r\n background: var(--green);\r\n color: white;\r\n\r\n border-radius: 12px;\r\n\r\n font-size: 12px;\r\n\r\n box-shadow:\r\n 0 15px 35px rgba(0, 0, 0, 0.2);\r\n\r\n opacity: 0;\r\n\r\n transition: 0.3s;\r\n\r\n z-index: 100;\r\n }\r\n\r\n .toast.show {\r\n transform: translate(-50%, 0);\r\n opacity: 1;\r\n }\r\n\r\n \/* =========================\r\n MOBILE\r\n ========================= *\/\r\n\r\n @media (max-width: 900px) {\r\n\r\n .grid {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .side {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n }\r\n\r\n .support {\r\n grid-column: 1 \/ -1;\r\n }\r\n }\r\n\r\n @media (max-width: 650px) {\r\n\r\n .navbar {\r\n height: 68px;\r\n padding: 0 5%;\r\n }\r\n\r\n .nav-links {\r\n display: none;\r\n }\r\n\r\n .profile span {\r\n display: none;\r\n }\r\n\r\n .container {\r\n width: 92%;\r\n padding-top: 38px;\r\n }\r\n\r\n h1 {\r\n letter-spacing: -1.5px;\r\n }\r\n\r\n .booking-card,\r\n .discount,\r\n .deals,\r\n .support {\r\n padding: 20px;\r\n }\r\n\r\n .booking-top {\r\n flex-direction: column;\r\n }\r\n\r\n .route {\r\n grid-template-columns: 1fr;\r\n gap: 18px;\r\n }\r\n\r\n .route-middle {\r\n flex-direction: row;\r\n gap: 10px;\r\n }\r\n\r\n .route-icon {\r\n margin: 0;\r\n transform: rotate(90deg);\r\n }\r\n\r\n .route-line {\r\n flex: 1;\r\n }\r\n\r\n .details {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .detail:nth-child(odd) {\r\n padding-right: 0;\r\n border-right: 0;\r\n border-bottom: 1px solid var(--line);\r\n }\r\n\r\n .detail:nth-child(even) {\r\n padding-left: 0;\r\n }\r\n\r\n .side {\r\n display: flex;\r\n }\r\n\r\n .steps {\r\n gap: 5px;\r\n }\r\n\r\n .step {\r\n font-size: 8px;\r\n }\r\n\r\n .step-circle {\r\n width: 15px;\r\n height: 15px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n <!-- =========================\r\n NAVIGATION\r\n ========================= -->\r\n\r\n <nav class=\"navbar\">\r\n\r\n <div class=\"logo\">\r\n <div class=\"logo-mark\">D<\/div>\r\n Demo Car Rental\r\n <\/div>\r\n\r\n <div class=\"nav-links\">\r\n <a href=\"#\">Rent a Car<\/a>\r\n <a href=\"#\" class=\"active\">My Booking<\/a>\r\n <a href=\"#\">Offers<\/a>\r\n <a href=\"#\">Support<\/a>\r\n <\/div>\r\n\r\n <div class=\"profile\">\r\n <span>Alex Morgan<\/span>\r\n <div class=\"avatar\">AM<\/div>\r\n <\/div>\r\n\r\n <\/nav>\r\n\r\n\r\n <!-- =========================\r\n MAIN CONTENT\r\n ========================= -->\r\n\r\n <main class=\"container\">\r\n\r\n <div class=\"page-heading\">\r\n\r\n <div class=\"eyebrow\">\r\n Your Rental\r\n <\/div>\r\n\r\n <h1>\r\n Booking Status\r\n <\/h1>\r\n\r\n <p class=\"subtitle\">\r\n Track your car rental booking and manage your journey in one place.\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"grid\">\r\n\r\n\r\n <!-- =========================\r\n BOOKING INFORMATION\r\n ========================= -->\r\n\r\n <section class=\"card booking-card\">\r\n\r\n <div class=\"booking-top\">\r\n\r\n <div>\r\n\r\n <div class=\"booking-id\">\r\n BOOKING ID \u00b7 DCR-28491\r\n <\/div>\r\n\r\n <div class=\"booking-title\">\r\n Premium Sedan\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"status\">\r\n\r\n <span class=\"status-dot\"><\/span>\r\n\r\n Confirmed\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n\r\n <!-- ROUTE -->\r\n\r\n <div class=\"route\">\r\n\r\n <div>\r\n\r\n <div class=\"location-label\">\r\n Pickup Location\r\n <\/div>\r\n\r\n <div class=\"location-name\">\r\n Mumbai Airport\r\n <\/div>\r\n\r\n <div class=\"date\">\r\n 10 Aug 2026 \u00b7 08:30 AM\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"route-middle\">\r\n\r\n <div class=\"route-icon\">\r\n \u21c4\r\n <\/div>\r\n\r\n <div class=\"route-line\"><\/div>\r\n\r\n <\/div>\r\n\r\n\r\n <div>\r\n\r\n <div class=\"location-label\">\r\n Drop-off Location\r\n <\/div>\r\n\r\n <div class=\"location-name\">\r\n The Taj Mahal Palace\r\n <\/div>\r\n\r\n <div class=\"date\">\r\n 10 Aug 2026 \u00b7 09:20 AM\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n\r\n <!-- BOOKING DETAILS -->\r\n\r\n <div class=\"details\">\r\n\r\n <div class=\"detail\">\r\n\r\n <div class=\"detail-label\">\r\n Pickup Date\r\n <\/div>\r\n\r\n <div class=\"detail-value\">\r\n Monday, 10 August 2026\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"detail\">\r\n\r\n <div class=\"detail-label\">\r\n Pickup Time\r\n <\/div>\r\n\r\n <div class=\"detail-value\">\r\n 08:30 AM\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"detail\">\r\n\r\n <div class=\"detail-label\">\r\n Drop-off Date\r\n <\/div>\r\n\r\n <div class=\"detail-value\">\r\n Monday, 10 August 2026\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"detail\">\r\n\r\n <div class=\"detail-label\">\r\n Drop-off Time\r\n <\/div>\r\n\r\n <div class=\"detail-value\">\r\n 09:20 AM\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n\r\n <!-- BOOKING PROGRESS -->\r\n\r\n <div class=\"timeline\">\r\n\r\n <div class=\"timeline-title\">\r\n Rental Progress\r\n <\/div>\r\n\r\n <div class=\"steps\">\r\n\r\n <div class=\"step done\">\r\n\r\n <span class=\"step-circle\"><\/span>\r\n\r\n <div>\r\n Booked\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"step done\">\r\n\r\n <span class=\"step-circle\"><\/span>\r\n\r\n <div>\r\n Confirmed\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"step active\">\r\n\r\n <span class=\"step-circle\"><\/span>\r\n\r\n <div>\r\n Car Ready\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"step\">\r\n\r\n <span class=\"step-circle\"><\/span>\r\n\r\n <div>\r\n Completed\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/section>\r\n\r\n\r\n <!-- =========================\r\n SIDEBAR\r\n ========================= -->\r\n\r\n <aside class=\"side\">\r\n\r\n\r\n <!-- DISCOUNT CODE -->\r\n\r\n <div class=\"card discount\">\r\n\r\n <div class=\"card-heading\">\r\n Have a discount code?\r\n <\/div>\r\n\r\n <div class=\"card-description\">\r\n Enter your promo code and unlock exclusive savings on your car rental.\r\n <\/div>\r\n\r\n\r\n <div class=\"promo\">\r\n\r\n <input\r\n type=\"text\"\r\n id=\"promoCode\"\r\n placeholder=\"ENTER CODE\"\r\n maxlength=\"20\"\r\n autocomplete=\"off\"\r\n >\r\n\r\n <button\r\n class=\"apply\"\r\n onclick=\"applyPromo()\"\r\n >\r\n Apply\r\n <\/button>\r\n\r\n <\/div>\r\n\r\n\r\n <div id=\"promoMessage\"><\/div>\r\n\r\n <\/div>\r\n\r\n\r\n <!-- EXCLUSIVE DEALS -->\r\n\r\n <div class=\"card deals\">\r\n\r\n <div class=\"deals-header\">\r\n\r\n <div class=\"card-heading\">\r\n Exclusive Deals\r\n <\/div>\r\n\r\n <a href=\"#\" class=\"view-all\">\r\n View all\r\n <\/a>\r\n\r\n <\/div>\r\n\r\n\r\n <!-- DEAL 1 -->\r\n\r\n <div\r\n class=\"deal\"\r\n onclick=\"selectDeal('WELCOME20')\"\r\n >\r\n\r\n <div>\r\n\r\n <div class=\"deal-name\">\r\n First Rental Special\r\n <\/div>\r\n\r\n <div class=\"deal-desc\">\r\n Save more on your first car rental.\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <div class=\"deal-badge\">\r\n 20%<br>OFF\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n\r\n <!-- DEAL 2 -->\r\n\r\n <div\r\n class=\"deal\"\r\n onclick=\"selectDeal('LUXE15')\"\r\n >\r\n\r\n <div>\r\n\r\n <div class=\"deal-name\">\r\n Premium Weekend\r\n <\/div>\r\n\r\n <div class=\"deal-desc\">\r\n Enjoy premium cars at a special rate.\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <div class=\"deal-badge\">\r\n 15%<br>OFF\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n\r\n <!-- DEAL 3 -->\r\n\r\n <div\r\n class=\"deal\"\r\n onclick=\"selectDeal('AIRPORT10')\"\r\n >\r\n\r\n <div>\r\n\r\n <div class=\"deal-name\">\r\n Airport Rental\r\n <\/div>\r\n\r\n <div class=\"deal-desc\">\r\n Special savings on airport car rentals.\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <div class=\"deal-badge\">\r\n 10%<br>OFF\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n\r\n <!-- SUPPORT -->\r\n\r\n <div class=\"support\">\r\n\r\n <h3>\r\n Need a hand?\r\n <\/h3>\r\n\r\n <p>\r\n Our rental specialists are available to help with your booking, vehicle or pickup.\r\n <\/p>\r\n\r\n <button\r\n class=\"support-btn\"\r\n onclick=\"showToast('Opening customer support...')\"\r\n >\r\n Contact Support \u2192\r\n <\/button>\r\n\r\n <\/div>\r\n\r\n <\/aside>\r\n\r\n <\/div>\r\n\r\n <\/main>\r\n\r\n\r\n <!-- TOAST -->\r\n\r\n <div\r\n class=\"toast\"\r\n id=\"toast\"\r\n ><\/div>\r\n\r\n\r\n <!-- =========================\r\n JAVASCRIPT\r\n ========================= -->\r\n\r\n <script>\r\n\r\n const validCodes = {\r\n\r\n \"WELCOME20\":\r\n \"20% discount applied successfully!\",\r\n\r\n \"LUXE15\":\r\n \"15% premium rental discount applied!\",\r\n\r\n \"AIRPORT10\":\r\n \"10% airport rental discount applied!\"\r\n\r\n };\r\n\r\n\r\n function applyPromo() {\r\n\r\n const input =\r\n document.getElementById(\"promoCode\");\r\n\r\n const message =\r\n document.getElementById(\"promoMessage\");\r\n\r\n const code =\r\n input.value.trim().toUpperCase();\r\n\r\n\r\n \/* EMPTY CODE *\/\r\n\r\n if (!code) {\r\n\r\n message.textContent =\r\n \"Please enter a discount code.\";\r\n\r\n message.style.color =\r\n \"var(--danger)\";\r\n\r\n message.style.display =\r\n \"block\";\r\n\r\n return;\r\n }\r\n\r\n\r\n \/* VALID CODE *\/\r\n\r\n if (validCodes[code]) {\r\n\r\n message.textContent =\r\n \"\u2713 \" + validCodes[code];\r\n\r\n message.style.color =\r\n \"var(--success)\";\r\n\r\n message.style.display =\r\n \"block\";\r\n\r\n showToast(\r\n validCodes[code]\r\n );\r\n\r\n return;\r\n }\r\n\r\n\r\n \/* INVALID CODE *\/\r\n\r\n message.textContent =\r\n \"This discount code is not valid.\";\r\n\r\n message.style.color =\r\n \"var(--danger)\";\r\n\r\n message.style.display =\r\n \"block\";\r\n\r\n }\r\n\r\n\r\n function selectDeal(code) {\r\n\r\n const input =\r\n document.getElementById(\"promoCode\");\r\n\r\n input.value = code;\r\n\r\n applyPromo();\r\n\r\n }\r\n\r\n\r\n function showToast(text) {\r\n\r\n const toast =\r\n document.getElementById(\"toast\");\r\n\r\n toast.textContent = text;\r\n\r\n toast.classList.add(\"show\");\r\n\r\n\r\n setTimeout(() => {\r\n\r\n toast.classList.remove(\"show\");\r\n\r\n }, 3000);\r\n\r\n }\r\n\r\n\r\n \/* ENTER KEY SUPPORT *\/\r\n\r\n document\r\n .getElementById(\"promoCode\")\r\n .addEventListener(\r\n \"keydown\",\r\n function(event) {\r\n\r\n if (event.key === \"Enter\") {\r\n\r\n applyPromo();\r\n\r\n }\r\n\r\n }\r\n );\r\n\r\n <\/script>\r\n\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>Booking Status | Demo Car Rental D Demo Car Rental Rent a Car My Booking Offers Support Alex Morgan AM … <\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-604","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/training25.persistenttechnology.in\/index.php?rest_route=\/wp\/v2\/pages\/604","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/training25.persistenttechnology.in\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/training25.persistenttechnology.in\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/training25.persistenttechnology.in\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/training25.persistenttechnology.in\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=604"}],"version-history":[{"count":7,"href":"https:\/\/training25.persistenttechnology.in\/index.php?rest_route=\/wp\/v2\/pages\/604\/revisions"}],"predecessor-version":[{"id":775,"href":"https:\/\/training25.persistenttechnology.in\/index.php?rest_route=\/wp\/v2\/pages\/604\/revisions\/775"}],"wp:attachment":[{"href":"https:\/\/training25.persistenttechnology.in\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=604"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}