{"id":8935,"date":"2026-02-16T05:41:16","date_gmt":"2026-02-15T23:41:16","guid":{"rendered":"https:\/\/avemedia.net\/?page_id=8935"},"modified":"2026-04-13T17:05:47","modified_gmt":"2026-04-13T11:05:47","slug":"checkout-page","status":"publish","type":"page","link":"https:\/\/avemedia.net\/?page_id=8935","title":{"rendered":"Checkout page"},"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 AVE Media | Custom Order Builder<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2canvas\/1.4.1\/html2canvas.min.js\"><\/script>\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@emailjs\/browser@3\/dist\/email.min.js\"><\/script>\r\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0\/css\/all.min.css\" rel=\"stylesheet\">\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;600;700&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n body { \r\n font-family: 'Inter', sans-serif; \r\n color: #EAEFEF;\r\n }\r\n \r\n ::-webkit-scrollbar { width: 8px; }\r\n ::-webkit-scrollbar-track { background: #1f2937; }\r\n ::-webkit-scrollbar-thumb { background: #4b5563; border-radius: 4px; }\r\n ::-webkit-scrollbar-thumb:hover { background: #6b7280; }\r\n\r\n @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }\r\n .animate-fade-in { animation: fadeIn 0.5s ease-out forwards; }\r\n \r\n .glass-panel {\r\n background: rgba(31, 41, 55, 0.7);\r\n backdrop-filter: blur(10px);\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n }\r\n\r\n .checkbox-wrapper input:checked + div {\r\n background-color: #2563eb;\r\n border-color: #2563eb;\r\n }\r\n .checkbox-wrapper input:checked + div svg {\r\n display: block;\r\n }\r\n \r\n .loader {\r\n border: 3px solid #f3f3f3;\r\n border-radius: 50%;\r\n border-top: 3px solid #3498db;\r\n width: 20px;\r\n height: 20px;\r\n -webkit-animation: spin 1s linear infinite;\r\n animation: spin 1s linear infinite;\r\n }\r\n @keyframes spin {\r\n 0% { transform: rotate(0deg); }\r\n 100% { transform: rotate(360deg); }\r\n }\r\n\r\n .text-custom { color: #d7f0fc; }\r\n \r\n .addon-price {\r\n min-width: 80px;\r\n text-align: right;\r\n }\r\n\r\n .next-steps-text {\r\n color: #7dd3fc;\r\n }\r\n \r\n .bank-transfer-text {\r\n color: #FFFFFF;\r\n }\r\n \r\n .standalone-addon {\r\n border: 1px dashed rgba(139, 92, 246, 0.4);\r\n background: rgba(139, 92, 246, 0.05);\r\n }\r\n .standalone-addon:hover {\r\n background: rgba(139, 92, 246, 0.1);\r\n }\r\n <\/style>\r\n<base target=\"_blank\">\r\n<\/head>\r\n<body class=\"bg-gray-900 min-h-screen flex flex-col\">\r\n\r\n <!-- Navbar -->\r\n <nav class=\"border-b border-gray-800 bg-gray-900\/90 sticky top-0 z-40 backdrop-blur-md\">\r\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"flex justify-between h-16 items-center\">\r\n <div class=\"flex items-center h-full py-2\">\r\n <a href=\"https:\/\/avemedia.net\/\" target=\"_blank\" class=\"text-2xl font-bold text-[#EAEFEF] tracking-tight hover:text-blue-400 transition-colors cursor-pointer\">\r\n AVE Media\r\n <\/a>\r\n <\/div>\r\n <div class=\"text-sm text-gray-400\">Custom Order Portal<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/nav>\r\n\r\n <!-- Main Content -->\r\n <main class=\"flex-grow container mx-auto px-4 py-12 max-w-7xl\">\r\n \r\n <!-- Header -->\r\n <div class=\"text-center mb-12 animate-fade-in\">\r\n <h1 class=\"text-4xl md:text-5xl font-bold mb-4 text-white\">\r\n Build Your Package\r\n <\/h1>\r\n <p class=\"text-gray-400 max-w-2xl mx-auto\">\r\n Select the services you need. Adjust quantities, add extras, and get an instant quote with delivery estimates.\r\n <\/p>\r\n <\/div>\r\n\r\n <!-- Carts Grid with Operators - SIDE BY SIDE LAYOUT -->\r\n <div class=\"flex flex-col lg:flex-row items-stretch justify-center gap-4 mb-16\">\r\n\r\n <!-- CART 1: Long Form -->\r\n <div id=\"cart-1\" class=\"glass-panel rounded-2xl p-6 flex flex-col animate-fade-in flex-1 max-w-md\" style=\"animation-delay: 0.1s;\">\r\n <div class=\"flex justify-between items-start mb-4\">\r\n <div class=\"bg-blue-500\/20 text-blue-400 text-xs font-bold px-3 py-1 rounded-full uppercase tracking-wide\">Video<\/div>\r\n <div class=\"text-right\">\r\n <div class=\"text-2xl font-bold text-[#EAEFEF]\">$75<span class=\"text-sm text-gray-500 font-normal\">\/video<\/span><\/div>\r\n <div class=\"text-xs text-gray-500\">2-6 Minutes<\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <h3 class=\"text-xl font-bold mb-2 text-[#EAEFEF]\">High-Retention Editing<\/h3>\r\n <p class=\"text-gray-400 text-sm mb-6 flex-grow\">\r\n Pro long video editing, motion graphics, smooth cuts, transitions, b-roll, music, SFX, etc.\r\n <\/p>\r\n\r\n <div class=\"bg-gray-800 rounded-xl p-4 mb-6\">\r\n <label class=\"block text-xs text-gray-400 mb-2 uppercase font-bold\">Quantity<\/label>\r\n <div class=\"flex items-center justify-between\">\r\n <button onclick=\"updateQty(1, -1)\" class=\"w-10 h-10 rounded-lg bg-gray-700 hover:bg-gray-600 flex items-center justify-center transition-colors\">\r\n <i class=\"fas fa-minus text-[#EAEFEF]\"><\/i>\r\n <\/button>\r\n <span id=\"qty-display-1\" class=\"text-2xl font-bold w-12 text-center text-[#EAEFEF]\">0<\/span>\r\n <button onclick=\"updateQty(1, 1)\" class=\"w-10 h-10 rounded-lg bg-gray-700 hover:bg-gray-600 flex items-center justify-center transition-colors\">\r\n <i class=\"fas fa-plus text-[#EAEFEF]\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <div class=\"mt-2 text-xs text-center text-blue-400\" id=\"time-est-1\">Est. Delivery: 0 Days<\/div>\r\n <\/div>\r\n\r\n <div class=\"space-y-3 mb-6\">\r\n <label class=\"flex items-center justify-between cursor-pointer group\">\r\n <div class=\"flex items-center gap-3 flex-1\">\r\n <div class=\"checkbox-wrapper relative w-5 h-5 flex-shrink-0\">\r\n <input type=\"checkbox\" id=\"addon-1-3\" class=\"peer absolute opacity-0 w-full h-full cursor-pointer\" onchange=\"calculateTotals()\">\r\n <div class=\"w-5 h-5 border-2 border-gray-600 rounded bg-gray-800 transition-colors flex items-center justify-center\">\r\n <svg class=\"w-3 h-3 text-white hidden\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"><\/path><\/svg>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex flex-col min-w-0\">\r\n <span class=\"text-sm text-[#EAEFEF] group-hover:text-white transition-colors truncate\">Extra 5min Editing<\/span>\r\n <\/div>\r\n <\/div>\r\n <span class=\"text-sm font-semibold text-gray-400 addon-price\">+$25<span class=\"text-xs block text-gray-600 font-normal\">per video<\/span><\/span>\r\n <\/label>\r\n\r\n <label class=\"flex items-center justify-between cursor-pointer group\">\r\n <div class=\"flex items-center gap-3 flex-1\">\r\n <div class=\"checkbox-wrapper relative w-5 h-5 flex-shrink-0\">\r\n <input type=\"checkbox\" id=\"addon-1-4\" class=\"peer absolute opacity-0 w-full h-full cursor-pointer\" onchange=\"calculateTotals()\">\r\n <div class=\"w-5 h-5 border-2 border-gray-600 rounded bg-gray-800 transition-colors flex items-center justify-center\">\r\n <svg class=\"w-3 h-3 text-white hidden\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"><\/path><\/svg>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex flex-col min-w-0\">\r\n <span class=\"text-sm text-[#EAEFEF] group-hover:text-white transition-colors truncate\">Extra 10min Editing<\/span>\r\n <span class=\"text-[10px] text-orange-400\">+1 Day per video<\/span>\r\n <\/div>\r\n <\/div>\r\n <span class=\"text-sm font-semibold text-gray-400 addon-price\">+$55<span class=\"text-xs block text-gray-600 font-normal\">per video<\/span><\/span>\r\n <\/label>\r\n\r\n <label class=\"flex items-center justify-between cursor-pointer group\">\r\n <div class=\"flex items-center gap-3 flex-1\">\r\n <div class=\"checkbox-wrapper relative w-5 h-5 flex-shrink-0\">\r\n <input type=\"checkbox\" id=\"addon-1-5\" class=\"peer absolute opacity-0 w-full h-full cursor-pointer\" onchange=\"calculateTotals()\">\r\n <div class=\"w-5 h-5 border-2 border-gray-600 rounded bg-gray-800 transition-colors flex items-center justify-center\">\r\n <svg class=\"w-3 h-3 text-white hidden\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"><\/path><\/svg>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex flex-col min-w-0\">\r\n <span class=\"text-sm text-[#EAEFEF] group-hover:text-white transition-colors truncate\">Extra 20min Editing<\/span>\r\n <span class=\"text-[10px] text-orange-400\">+2 Days per video<\/span>\r\n <\/div>\r\n <\/div>\r\n <span class=\"text-sm font-semibold text-gray-400 addon-price\">+$85<span class=\"text-xs block text-gray-600 font-normal\">per video<\/span><\/span>\r\n <\/label>\r\n\r\n <label class=\"flex items-center justify-between cursor-pointer group\">\r\n <div class=\"flex items-center gap-3 flex-1\">\r\n <div class=\"checkbox-wrapper relative w-5 h-5 flex-shrink-0\">\r\n <input type=\"checkbox\" id=\"addon-1-2\" class=\"peer absolute opacity-0 w-full h-full cursor-pointer\" onchange=\"calculateTotals()\">\r\n <div class=\"w-5 h-5 border-2 border-gray-600 rounded bg-gray-800 transition-colors flex items-center justify-center\">\r\n <svg class=\"w-3 h-3 text-white hidden\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"><\/path><\/svg>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex flex-col min-w-0\">\r\n <span class=\"text-sm text-[#EAEFEF] group-hover:text-white transition-colors truncate\">High CTR Thumbnail<\/span>\r\n <span class=\"text-[10px] text-orange-400\">+1 Day per video<\/span>\r\n <\/div>\r\n <\/div>\r\n <span class=\"text-sm font-semibold text-gray-400 addon-price\">+$15<span class=\"text-xs block text-gray-600 font-normal\">per video<\/span><\/span>\r\n <\/label>\r\n <\/div>\r\n\r\n <div class=\"mt-auto pt-4 border-t border-gray-700 flex justify-between items-center\">\r\n <span class=\"text-gray-400 text-sm\">Subtotal<\/span>\r\n <span id=\"subtotal-1\" class=\"text-2xl font-bold text-blue-400\">$0<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"hidden lg:flex items-center justify-center\">\r\n <div class=\"text-4xl font-bold text-gray-600\">+<\/div>\r\n <\/div>\r\n\r\n <!-- CART 2: Short Form -->\r\n <div id=\"cart-2\" class=\"glass-panel rounded-2xl p-6 flex flex-col animate-fade-in flex-1 max-w-md\" style=\"animation-delay: 0.2s;\">\r\n <div class=\"flex justify-between items-start mb-4\">\r\n <div class=\"bg-purple-500\/20 text-purple-400 text-xs font-bold px-3 py-1 rounded-full uppercase tracking-wide\">Shorts<\/div>\r\n <div class=\"text-right\">\r\n <div class=\"text-2xl font-bold text-[#EAEFEF]\">$30<span class=\"text-sm text-gray-500 font-normal\">\/video<\/span><\/div>\r\n <div class=\"text-xs text-gray-500\">1 Minute<\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <h3 class=\"text-xl font-bold mb-2 text-[#EAEFEF]\">Short-Form Editing<\/h3>\r\n <p class=\"text-gray-400 text-sm mb-6 flex-grow\">\r\n Pro short video editing, motion graphics, smooth cuts, transitions, captions, b-roll, music, SFX, etc.\r\n <\/p>\r\n\r\n <div class=\"bg-gray-800 rounded-xl p-4 mb-6\">\r\n <label class=\"block text-xs text-gray-400 mb-2 uppercase font-bold\">Quantity<\/label>\r\n <div class=\"flex items-center justify-between\">\r\n <button onclick=\"updateQty(2, -1)\" class=\"w-10 h-10 rounded-lg bg-gray-700 hover:bg-gray-600 flex items-center justify-center transition-colors\">\r\n <i class=\"fas fa-minus text-[#EAEFEF]\"><\/i>\r\n <\/button>\r\n <span id=\"qty-display-2\" class=\"text-2xl font-bold w-12 text-center text-[#EAEFEF]\">0<\/span>\r\n <button onclick=\"updateQty(2, 1)\" class=\"w-10 h-10 rounded-lg bg-gray-700 hover:bg-gray-600 flex items-center justify-center transition-colors\">\r\n <i class=\"fas fa-plus text-[#EAEFEF]\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <div class=\"mt-2 text-xs text-center text-purple-400\" id=\"time-est-2\">Est. Delivery: 0 Days<\/div>\r\n <\/div>\r\n\r\n <div class=\"space-y-3 mb-6\">\r\n <label class=\"flex items-center justify-between cursor-pointer group\">\r\n <div class=\"flex items-center gap-3 flex-1\">\r\n <div class=\"checkbox-wrapper relative w-5 h-5 flex-shrink-0\">\r\n <input type=\"checkbox\" id=\"addon-2-1\" class=\"peer absolute opacity-0 w-full h-full cursor-pointer\" onchange=\"calculateTotals()\">\r\n <div class=\"w-5 h-5 border-2 border-gray-600 rounded bg-gray-800 transition-colors flex items-center justify-center\">\r\n <svg class=\"w-3 h-3 text-white hidden\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"><\/path><\/svg>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex flex-col min-w-0\">\r\n <span class=\"text-sm text-[#EAEFEF] group-hover:text-white transition-colors truncate\">Meta Ad Style<\/span>\r\n <span class=\"text-[10px] text-orange-400\">+1 Day per video<\/span>\r\n <\/div>\r\n <\/div>\r\n <span class=\"text-sm font-semibold text-gray-400 addon-price\">+$25<span class=\"text-xs block text-gray-600 font-normal\">per video<\/span><\/span>\r\n <\/label>\r\n\r\n <label class=\"flex items-center justify-between cursor-pointer group standalone-addon rounded-lg p-2 -mx-2\">\r\n <div class=\"flex items-center gap-3 flex-1\">\r\n <div class=\"checkbox-wrapper relative w-5 h-5 flex-shrink-0\">\r\n <input type=\"checkbox\" id=\"addon-2-2\" class=\"peer absolute opacity-0 w-full h-full cursor-pointer\" onchange=\"calculateTotals()\">\r\n <div class=\"w-5 h-5 border-2 border-purple-500 rounded bg-gray-800 transition-colors flex items-center justify-center\">\r\n <svg class=\"w-3 h-3 text-white hidden\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"><\/path><\/svg>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex flex-col min-w-0\">\r\n <span class=\"text-sm text-purple-300 font-semibold group-hover:text-white transition-colors truncate\">3-Pages Management<\/span>\r\n <span class=\"text-[10px] text-orange-400\">+30 Days delivery<\/span>\r\n <\/div>\r\n <\/div>\r\n <span class=\"text-sm font-semibold text-purple-300 addon-price\">+$300<\/span>\r\n <\/label>\r\n\r\n <label class=\"flex items-center justify-between cursor-pointer group standalone-addon rounded-lg p-2 -mx-2\">\r\n <div class=\"flex items-center gap-3 flex-1\">\r\n <div class=\"checkbox-wrapper relative w-5 h-5 flex-shrink-0\">\r\n <input type=\"checkbox\" id=\"addon-2-booster\" class=\"peer absolute opacity-0 w-full h-full cursor-pointer\" onchange=\"calculateTotals()\">\r\n <div class=\"w-5 h-5 border-2 border-purple-500 rounded bg-gray-800 transition-colors flex items-center justify-center\">\r\n <svg class=\"w-3 h-3 text-white hidden\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"><\/path><\/svg>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex flex-col min-w-0\">\r\n <span class=\"text-sm text-purple-300 font-semibold group-hover:text-white transition-colors truncate\">30 Booster Shorts<\/span>\r\n <span class=\"text-[10px] text-orange-400\">+30 Days delivery<\/span>\r\n <\/div>\r\n <\/div>\r\n <span class=\"text-sm font-semibold text-purple-300 addon-price\">+$850<\/span>\r\n <\/label>\r\n\r\n <label class=\"flex items-center justify-between cursor-pointer group\">\r\n <div class=\"flex items-center gap-3 flex-1\">\r\n <div class=\"checkbox-wrapper relative w-5 h-5 flex-shrink-0\">\r\n <input type=\"checkbox\" id=\"addon-2-3\" class=\"peer absolute opacity-0 w-full h-full cursor-pointer\" onchange=\"calculateTotals()\">\r\n <div class=\"w-5 h-5 border-2 border-gray-600 rounded bg-gray-800 transition-colors flex items-center justify-center\">\r\n <svg class=\"w-3 h-3 text-white hidden\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"><\/path><\/svg>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex flex-col min-w-0\">\r\n <span class=\"text-sm text-[#EAEFEF] group-hover:text-white transition-colors truncate\">12 Social Media Designs<\/span>\r\n <span class=\"text-[10px] text-orange-400\">+6 Days delivery<\/span>\r\n <\/div>\r\n <\/div>\r\n <span class=\"text-sm font-semibold text-gray-400 addon-price\">+$110<\/span>\r\n <\/label>\r\n <\/div>\r\n\r\n <div class=\"mt-auto pt-4 border-t border-gray-700 flex justify-between items-center\">\r\n <span class=\"text-gray-400 text-sm\">Subtotal<\/span>\r\n <span id=\"subtotal-2\" class=\"text-2xl font-bold text-purple-400\">$0<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"hidden lg:flex items-center justify-center\">\r\n <div class=\"text-4xl font-bold text-gray-600\">+<\/div>\r\n <\/div>\r\n\r\n <!-- CART 3: Podcast -->\r\n <div id=\"cart-3\" class=\"glass-panel rounded-2xl p-6 flex flex-col animate-fade-in flex-1 max-w-md\" style=\"animation-delay: 0.3s;\">\r\n <div class=\"flex justify-between items-start mb-4\">\r\n <div class=\"bg-green-500\/20 text-green-400 text-xs font-bold px-3 py-1 rounded-full uppercase tracking-wide\">Podcast<\/div>\r\n <div class=\"text-right\">\r\n <div class=\"text-2xl font-bold text-[#EAEFEF]\">$95<span class=\"text-sm text-gray-500 font-normal\">\/ep<\/span><\/div>\r\n <div class=\"text-xs text-gray-500\">30-60 Minutes<\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <h3 class=\"text-xl font-bold mb-2 text-[#EAEFEF]\">Podcast Production<\/h3>\r\n <p class=\"text-gray-400 text-sm mb-6 flex-grow\">\r\n Podcast episode editing, multi-angle, 1 min hook video with motion graphic highlights, smooth cuts, transitions, music, etc.\r\n <\/p>\r\n\r\n <div class=\"bg-gray-800 rounded-xl p-4 mb-6\">\r\n <label class=\"block text-xs text-gray-400 mb-2 uppercase font-bold\">Quantity<\/label>\r\n <div class=\"flex items-center justify-between\">\r\n <button onclick=\"updateQty(3, -1)\" class=\"w-10 h-10 rounded-lg bg-gray-700 hover:bg-gray-600 flex items-center justify-center transition-colors\">\r\n <i class=\"fas fa-minus text-[#EAEFEF]\"><\/i>\r\n <\/button>\r\n <span id=\"qty-display-3\" class=\"text-2xl font-bold w-12 text-center text-[#EAEFEF]\">0<\/span>\r\n <button onclick=\"updateQty(3, 1)\" class=\"w-10 h-10 rounded-lg bg-gray-700 hover:bg-gray-600 flex items-center justify-center transition-colors\">\r\n <i class=\"fas fa-plus text-[#EAEFEF]\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <div class=\"mt-2 text-xs text-center text-green-400\" id=\"time-est-3\">Est. Delivery: 0 Days<\/div>\r\n <\/div>\r\n\r\n <div class=\"space-y-3 mb-6\">\r\n <label class=\"flex items-center justify-between cursor-pointer group\">\r\n <div class=\"flex items-center gap-3 flex-1\">\r\n <div class=\"checkbox-wrapper relative w-5 h-5 flex-shrink-0\">\r\n <input type=\"checkbox\" id=\"addon-3-1\" class=\"peer absolute opacity-0 w-full h-full cursor-pointer\" onchange=\"calculateTotals()\">\r\n <div class=\"w-5 h-5 border-2 border-gray-600 rounded bg-gray-800 transition-colors flex items-center justify-center\">\r\n <svg class=\"w-3 h-3 text-white hidden\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"><\/path><\/svg>\r\n <\/div>\r\n <\/div>\r\n <span class=\"text-sm text-[#EAEFEF] group-hover:text-white transition-colors truncate\">Separate Audio Editing<\/span>\r\n <\/div>\r\n <span class=\"text-sm font-semibold text-gray-400 addon-price\">+$30<span class=\"text-xs block text-gray-600 font-normal\">per episode<\/span><\/span>\r\n <\/label>\r\n\r\n <label class=\"flex items-center justify-between cursor-pointer group\">\r\n <div class=\"flex items-center gap-3 flex-1\">\r\n <div class=\"checkbox-wrapper relative w-5 h-5 flex-shrink-0\">\r\n <input type=\"checkbox\" id=\"addon-3-2\" class=\"peer absolute opacity-0 w-full h-full cursor-pointer\" onchange=\"calculateTotals()\">\r\n <div class=\"w-5 h-5 border-2 border-gray-600 rounded bg-gray-800 transition-colors flex items-center justify-center\">\r\n <svg class=\"w-3 h-3 text-white hidden\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"><\/path><\/svg>\r\n <\/div>\r\n <\/div>\r\n <span class=\"text-sm text-[#EAEFEF] group-hover:text-white transition-colors truncate\">Extra 30min<\/span>\r\n <\/div>\r\n <span class=\"text-sm font-semibold text-gray-400 addon-price\">+$30<span class=\"text-xs block text-gray-600 font-normal\">per episode<\/span><\/span>\r\n <\/label>\r\n\r\n <label class=\"flex items-center justify-between cursor-pointer group\">\r\n <div class=\"flex items-center gap-3 flex-1\">\r\n <div class=\"checkbox-wrapper relative w-5 h-5 flex-shrink-0\">\r\n <input type=\"checkbox\" id=\"addon-3-3\" class=\"peer absolute opacity-0 w-full h-full cursor-pointer\" onchange=\"calculateTotals()\">\r\n <div class=\"w-5 h-5 border-2 border-gray-600 rounded bg-gray-800 transition-colors flex items-center justify-center\">\r\n <svg class=\"w-3 h-3 text-white hidden\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"><\/path><\/svg>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex flex-col min-w-0\">\r\n <span class=\"text-sm text-[#EAEFEF] group-hover:text-white transition-colors truncate\">2 Short Form Videos<\/span>\r\n <span class=\"text-[10px] text-orange-400\">+2 Days per episode<\/span>\r\n <\/div>\r\n <\/div>\r\n <span class=\"text-sm font-semibold text-gray-400 addon-price\">+$60<span class=\"text-xs block text-gray-600 font-normal\">per episode<\/span><\/span>\r\n <\/label>\r\n\r\n <label class=\"flex items-center justify-between cursor-pointer group\">\r\n <div class=\"flex items-center gap-3 flex-1\">\r\n <div class=\"checkbox-wrapper relative w-5 h-5 flex-shrink-0\">\r\n <input type=\"checkbox\" id=\"addon-3-4\" class=\"peer absolute opacity-0 w-full h-full cursor-pointer\" onchange=\"calculateTotals()\">\r\n <div class=\"w-5 h-5 border-2 border-gray-600 rounded bg-gray-800 transition-colors flex items-center justify-center\">\r\n <svg class=\"w-3 h-3 text-white hidden\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"><\/path><\/svg>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex flex-col min-w-0\">\r\n <span class=\"text-sm text-[#EAEFEF] group-hover:text-white transition-colors truncate\">High CTR Thumbnail<\/span>\r\n <span class=\"text-[10px] text-orange-400\">+1 Day per episode<\/span>\r\n <\/div>\r\n <\/div>\r\n <span class=\"text-sm font-semibold text-gray-400 addon-price\">+$15<span class=\"text-xs block text-gray-600 font-normal\">per episode<\/span><\/span>\r\n <\/label>\r\n <\/div>\r\n\r\n <div class=\"mt-auto pt-4 border-t border-gray-700 flex justify-between items-center\">\r\n <span class=\"text-gray-400 text-sm\">Subtotal<\/span>\r\n <span id=\"subtotal-3\" class=\"text-2xl font-bold text-green-400\">$0<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"hidden lg:flex items-center justify-center\">\r\n <div class=\"text-4xl font-bold text-blue-500\">=<\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <!-- Sticky Footer Summary -->\r\n <div class=\"fixed bottom-0 left-0 right-0 bg-gray-900\/95 border-t border-gray-800 backdrop-blur-lg p-4 z-30 shadow-2xl\">\r\n <div class=\"max-w-6xl mx-auto flex flex-col md:flex-row justify-between items-center gap-4\">\r\n <div class=\"flex flex-col md:flex-row gap-6 items-center\">\r\n <div class=\"text-center md:text-left\">\r\n <p class=\"text-xs text-gray-500 uppercase font-bold\">Total Estimate<\/p>\r\n <h2 id=\"grand-total\" class=\"text-3xl font-bold text-[#EAEFEF]\">$0<\/h2>\r\n <\/div>\r\n <div class=\"hidden md:block h-8 w-px bg-gray-700\"><\/div>\r\n <div class=\"text-center md:text-left\">\r\n <p class=\"text-xs text-gray-500 uppercase font-bold\">Est. Delivery<\/p>\r\n <h2 id=\"grand-time\" class=\"text-xl font-semibold text-blue-400\">0 Days<\/h2>\r\n <\/div>\r\n <\/div>\r\n <button onclick=\"openCheckout()\" class=\"w-full md:w-auto bg-blue-600 hover:bg-blue-500 text-white font-bold py-3 px-8 rounded-xl transition-all transform hover:scale-105 shadow-lg shadow-blue-600\/20 flex items-center justify-center gap-2\">\r\n Proceed to Checkout <i class=\"fas fa-arrow-right\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/main>\r\n\r\n <!-- Checkout Modal -->\r\n <div id=\"checkout-modal\" class=\"fixed inset-0 z-50 hidden\">\r\n <div class=\"absolute inset-0 bg-black\/80 backdrop-blur-sm transition-opacity\" onclick=\"closeCheckout()\"><\/div>\r\n \r\n <div class=\"absolute inset-0 flex items-center justify-center p-4 pointer-events-none\">\r\n <div class=\"bg-gray-900 border border-gray-700 w-full max-w-2xl max-h-[90vh] overflow-y-auto rounded-2xl shadow-2xl pointer-events-auto transform transition-all scale-95 opacity-0\" id=\"checkout-content\">\r\n \r\n <div class=\"p-6 border-b border-gray-800 flex justify-between items-center sticky top-0 bg-gray-900 z-10\">\r\n <h2 class=\"text-2xl font-bold text-[#EAEFEF]\">Order Summary & Payment<\/h2>\r\n <button onclick=\"closeCheckout()\" class=\"text-gray-400 hover:text-white transition-colors\">\r\n <i class=\"fas fa-times text-xl\"><\/i>\r\n <\/button>\r\n <\/div>\r\n\r\n <div class=\"p-6 space-y-8\">\r\n \r\n <div id=\"order-summary-card\" class=\"bg-white rounded-sm shadow-lg relative overflow-hidden\">\r\n <div class=\"absolute inset-0 opacity-[0.03]\" style=\"background-image: radial-gradient(#000000 1px, transparent 1px); background-size: 20px 20px;\"><\/div>\r\n \r\n <div class=\"relative p-8 border-b-2 border-gray-200 bg-white\">\r\n <div class=\"flex justify-between items-start\">\r\n <div class=\"flex flex-col\">\r\n <div class=\"flex items-center gap-3 mb-1\">\r\n <span class=\"text-3xl font-bold text-gray-800 tracking-tight\">AVE Media<\/span>\r\n <\/div>\r\n <p class=\"text-xs text-gray-500 tracking-widest uppercase mt-1\">Video Production Services<\/p>\r\n <\/div>\r\n <div class=\"text-right\">\r\n <h1 class=\"text-2xl font-light text-gray-800 tracking-tight\">ORDER SUMMARY<\/h1>\r\n <p class=\"text-sm text-gray-500 mt-1 font-mono\" id=\"invoice-id\">#INV-0000<\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"flex justify-between mt-8 text-sm\">\r\n <div>\r\n <p class=\"text-gray-500 text-xs uppercase tracking-wider mb-1\">Invoice Date<\/p>\r\n <p class=\"font-semibold text-gray-800\" id=\"invoice-date\">--<\/p>\r\n <\/div>\r\n <div class=\"text-right\">\r\n <p class=\"text-gray-500 text-xs uppercase tracking-wider mb-1\">Date<\/p>\r\n <p class=\"font-semibold text-gray-800\">On Receipt<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"relative p-8 bg-white\">\r\n <table class=\"w-full text-left border-collapse\">\r\n <thead>\r\n <tr class=\"text-xs text-gray-500 uppercase tracking-wider border-b border-gray-300\">\r\n <th class=\"pb-3 font-semibold text-gray-700\">Description<\/th>\r\n <th class=\"pb-3 font-semibold text-gray-700 text-center w-24\">Qty<\/th>\r\n <th class=\"pb-3 font-semibold text-gray-700 text-right\">Amount<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody id=\"checkout-recap\" class=\"text-sm\">\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n\r\n <div class=\"relative bg-gray-100 p-8 border-t border-gray-300\">\r\n <div class=\"flex justify-between items-end\">\r\n <div class=\"text-xs text-gray-600\">\r\n <p class=\"mb-1\"><span class=\"font-semibold text-gray-800\">Payment Terms:<\/span> Net 0<\/p>\r\n <p><span class=\"font-semibold text-gray-800\">Delivery:<\/span> <span id=\"checkout-time-display\">--<\/span><\/p>\r\n <\/div>\r\n <div class=\"text-right\">\r\n <p class=\"text-xs text-gray-500 uppercase tracking-wider mb-1\">Total Amount<\/p>\r\n <p id=\"checkout-total\" class=\"text-4xl font-bold text-gray-800 tracking-tight\">$0.00<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"relative bg-gray-800 text-white p-4 text-center text-xs\">\r\n <p>Thank you for your order. | avemedia.net<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"flex justify-center -mt-2\">\r\n <button onclick=\"downloadSummary()\" id=\"download-btn\" class=\"bg-gray-800 hover:bg-gray-700 text-white px-6 py-3 rounded-lg text-sm font-semibold flex items-center gap-2 transition-all shadow-lg border border-gray-600\">\r\n <i class=\"fas fa-download\"><\/i> Download Invoice Image\r\n <\/button>\r\n <\/div>\r\n\r\n <div class=\"border-t border-gray-700 pt-6\">\r\n <h3 class=\"text-sm font-bold bank-transfer-text mb-4 flex items-center gap-2\">\r\n <i class=\"fas fa-university\"><\/i> Pay via Bank Transfer\r\n <\/h3>\r\n \r\n <div id=\"bank-transfer-section\" class=\"space-y-4\">\r\n <div class=\"grid gap-4\">\r\n <div class=\"group relative\">\r\n <label class=\"text-xs text-gray-500 uppercase font-bold mb-1 block\">Account Name<\/label>\r\n <div class=\"flex items-center bg-gray-800 border border-gray-700 rounded-lg p-3 pr-12\">\r\n <span class=\"text-[#EAEFEF] font-mono\" id=\"copy-name\">Anick Chowdhury<\/span>\r\n <button onclick=\"copyToClipboard('copy-name')\" class=\"absolute right-2 top-2 bottom-2 px-3 text-gray-400 hover:text-white bg-gray-700\/50 hover:bg-gray-700 rounded transition-colors\" title=\"Copy\">\r\n <i class=\"fas fa-copy\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n <div class=\"group relative\">\r\n <label class=\"text-xs text-gray-500 uppercase font-bold mb-1 block\">Account Number<\/label>\r\n <div class=\"flex items-center bg-gray-800 border border-gray-700 rounded-lg p-3 pr-12\">\r\n <span class=\"text-[#EAEFEF] font-mono\" id=\"copy-acc\">8311995114<\/span>\r\n <button onclick=\"copyToClipboard('copy-acc')\" class=\"absolute right-2 top-2 bottom-2 px-3 text-gray-400 hover:text-white bg-gray-700\/50 hover:bg-gray-700 rounded transition-colors\">\r\n <i class=\"fas fa-copy\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <div class=\"group relative\">\r\n <label class=\"text-xs text-gray-500 uppercase font-bold mb-1 block\">Account Type<\/label>\r\n <div class=\"flex items-center bg-gray-800 border border-gray-700 rounded-lg p-3 pr-12\">\r\n <span class=\"text-[#EAEFEF] font-mono\" id=\"copy-type\">Checking<\/span>\r\n <button onclick=\"copyToClipboard('copy-type')\" class=\"absolute right-2 top-2 bottom-2 px-3 text-gray-400 hover:text-white bg-gray-700\/50 hover:bg-gray-700 rounded transition-colors\">\r\n <i class=\"fas fa-copy\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"group relative\">\r\n <label class=\"text-xs text-gray-500 uppercase font-bold mb-1 block\">Routing Number (ACH\/Wire)<\/label>\r\n <div class=\"flex items-center bg-gray-800 border border-gray-700 rounded-lg p-3 pr-12\">\r\n <span class=\"text-[#EAEFEF] font-mono\" id=\"copy-route\">026073150<\/span>\r\n <button onclick=\"copyToClipboard('copy-route')\" class=\"absolute right-2 top-2 bottom-2 px-3 text-gray-400 hover:text-white bg-gray-700\/50 hover:bg-gray-700 rounded transition-colors\">\r\n <i class=\"fas fa-copy\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"group relative\">\r\n <label class=\"text-xs text-gray-500 uppercase font-bold mb-1 block\">SWIFT\/BIC<\/label>\r\n <div class=\"flex items-center bg-gray-800 border border-gray-700 rounded-lg p-3 pr-12\">\r\n <span class=\"text-[#EAEFEF] font-mono\" id=\"copy-swift\">CMFGUS33<\/span>\r\n <button onclick=\"copyToClipboard('copy-swift')\" class=\"absolute right-2 top-2 bottom-2 px-3 text-gray-400 hover:text-white bg-gray-700\/50 hover:bg-gray-700 rounded transition-colors\">\r\n <i class=\"fas fa-copy\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bg-gray-800 rounded-xl p-5 border border-gray-700\">\r\n <p class=\"text-gray-400 text-sm mb-3\">\r\n Once payment is completed, please send the following to:\r\n <\/p>\r\n <div class=\"flex items-center gap-2 mb-4 bg-gray-900 p-3 rounded-lg border border-gray-700\">\r\n <i class=\"fas fa-envelope text-white\"><\/i>\r\n <span class=\"text-[#EAEFEF] font-semibold\">anick@avemedia.net<\/span>\r\n <\/div>\r\n <ul class=\"text-sm text-gray-400 space-y-2 list-disc list-inside\">\r\n <li><strong>Downloaded Invoice Receipt Image<\/strong> (from above)<\/li>\r\n <li><strong>Payment Screenshot<\/strong><\/li>\r\n <li>Project Details & Brief<\/li>\r\n <li>Reference Videos (Links)<\/li>\r\n <li><strong>Raw Assets<\/strong> (Footage, Logos, etc.)<\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <\/div>\r\n \r\n <div class=\"p-6 border-t border-gray-800 bg-gray-900 sticky bottom-0\">\r\n <button onclick=\"closeCheckout()\" class=\"w-full bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 rounded-xl transition-colors\">\r\n Close & Return\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n const services = {\r\n 1: { \r\n name: \"High-Retention Video\", \r\n basePrice: 75,\r\n timePerUnit: 3, \r\n qty: 0,\r\n addons: {\r\n 'addon-1-2': { name: \"High CTR Thumbnail\", price: 15, type: 'per_unit', addsTime: 1 },\r\n 'addon-1-3': { name: \"Extra 5min Editing\", price: 25, type: 'per_unit' },\r\n 'addon-1-4': { name: \"Extra 10min Editing\", price: 55, type: 'per_unit', addsTime: 1 },\r\n 'addon-1-5': { name: \"Extra 20min Editing\", price: 85, type: 'per_unit', addsTime: 2 }\r\n }\r\n },\r\n 2: { \r\n name: \"Short-Form Video\", \r\n basePrice: 30, \r\n timePerUnit: 2, \r\n qty: 0,\r\n addons: {\r\n 'addon-2-1': { name: \"Meta Ad Style\", price: 40, type: 'per_unit', addsTime: 1 },\r\n 'addon-2-2': { name: \"3-Pages Management\", price: 300, type: 'flat', addsTime: 30 },\r\n 'addon-2-booster': { name: \"30 Booster Shorts\", price: 850, type: 'standalone_flat', addsTime: 30, noBaseRequired: true },\r\n 'addon-2-3': { name: \"12 Social Media Designs\", price: 110, type: 'flat', addsTime: 6 }\r\n }\r\n },\r\n 3: { \r\n name: \"Podcast Editing\", \r\n basePrice: 95,\r\n timePerUnit: 3, \r\n qty: 0,\r\n addons: {\r\n 'addon-3-1': { name: \"Separate Audio Editing\", price: 30, type: 'per_unit' },\r\n 'addon-3-2': { name: \"Extra 30min\", price: 30, type: 'per_unit' },\r\n 'addon-3-3': { name: \"2 Short Form Videos\", price: 60, type: 'per_unit', addsTime: 2 },\r\n 'addon-3-4': { name: \"High CTR Thumbnail\", price: 15, type: 'per_unit', addsTime: 1 }\r\n }\r\n }\r\n };\r\n\r\n let currentOrderDetails = null;\r\n\r\n function updateQty(cartId, change) {\r\n const service = services[cartId];\r\n let newQty = service.qty + change;\r\n if (newQty < 0) newQty = 0;\r\n if (newQty > 99) newQty = 99;\r\n service.qty = newQty;\r\n document.getElementById(`qty-display-${cartId}`).innerText = newQty;\r\n calculateTotals();\r\n }\r\n\r\n function calculateTotals() {\r\n let grandTotal = 0;\r\n let grandTime = 0;\r\n currentOrderDetails = [];\r\n\r\n const isBoosterChecked = document.getElementById('addon-2-booster').checked;\r\n\r\n for (const [id, service] of Object.entries(services)) {\r\n let subtotal = 0;\r\n let serviceTime = 0;\r\n let itemDetails = {\r\n name: service.name,\r\n qty: service.qty,\r\n addons: [],\r\n itemTotal: 0\r\n };\r\n \r\n if (service.qty > 0) {\r\n subtotal += service.basePrice * service.qty;\r\n serviceTime += (service.qty * service.timePerUnit);\r\n }\r\n\r\n for (const [addonId, addon] of Object.entries(service.addons)) {\r\n if (addon.type === 'standalone_flat') continue;\r\n \r\n const isChecked = document.getElementById(addonId).checked;\r\n if (isChecked) {\r\n if (addon.type === 'per_unit') {\r\n subtotal += addon.price * service.qty;\r\n } else {\r\n subtotal += addon.price;\r\n }\r\n\r\n if (addon.addsTime) {\r\n if (addon.type === 'per_unit') {\r\n serviceTime += (addon.addsTime * service.qty);\r\n } else {\r\n serviceTime += addon.addsTime;\r\n }\r\n }\r\n \r\n itemDetails.addons.push(addon.name);\r\n }\r\n }\r\n\r\n if (id === '2' && isBoosterChecked) {\r\n subtotal += 850;\r\n serviceTime += 30;\r\n itemDetails.addons.push(\"30 Booster Shorts\");\r\n }\r\n\r\n itemDetails.itemTotal = subtotal;\r\n \r\n if (service.qty > 0 || (id === '2' && isBoosterChecked)) {\r\n currentOrderDetails.push(itemDetails);\r\n }\r\n\r\n let hasAddons = false;\r\n if(id === '2') {\r\n const addonIds = ['addon-2-1', 'addon-2-2', 'addon-2-3'];\r\n hasAddons = addonIds.some(aid => document.getElementById(aid).checked);\r\n }\r\n\r\n if (id === '2' && (hasAddons || service.qty > 30) && serviceTime > 30) {\r\n serviceTime = 30;\r\n }\r\n\r\n document.getElementById(`subtotal-${id}`).innerText = `$${subtotal}`;\r\n \r\n const cardTimeDisplay = document.getElementById(`time-est-${id}`);\r\n \r\n if(service.qty === 0 && !((id === '2' && isBoosterChecked))) {\r\n cardTimeDisplay.innerText = \"Est. Delivery: 0 Days\";\r\n } else {\r\n cardTimeDisplay.innerText = `Est. Delivery: ${serviceTime} Day${serviceTime !== 1 ? 's' : ''}`;\r\n }\r\n\r\n grandTotal += subtotal;\r\n grandTime += serviceTime;\r\n }\r\n\r\n document.getElementById('grand-total').innerText = `$${grandTotal}`;\r\n document.getElementById('grand-time').innerText = grandTime > 0 ? `${grandTime} Days` : \"0 Days\";\r\n window.currentTotal = grandTotal;\r\n window.currentTime = grandTime;\r\n }\r\n\r\n function openCheckout() {\r\n const modal = document.getElementById('checkout-modal');\r\n const content = document.getElementById('checkout-content');\r\n const recap = document.getElementById('checkout-recap');\r\n \r\n const now = new Date();\r\n document.getElementById('invoice-date').innerText = now.toLocaleDateString();\r\n document.getElementById('invoice-id').innerText = `#INV-${Math.floor(Math.random() * 10000)}`;\r\n \r\n let recapHTML = '';\r\n let isEmpty = true;\r\n\r\n const isBoosterChecked = document.getElementById('addon-2-booster').checked;\r\n if (isBoosterChecked) {\r\n isEmpty = false;\r\n recapHTML += `\r\n <tr class=\"border-b border-gray-200\">\r\n <td class=\"py-3 align-top\">\r\n <p class=\"font-semibold text-gray-800\">30 Booster Shorts<\/p>\r\n <p class=\"text-xs text-gray-500 mt-1\">Standalone package \u2022 30 days delivery<\/p>\r\n <\/td>\r\n <td class=\"py-3 text-center text-gray-600 font-mono\">1<\/td>\r\n <td class=\"py-3 text-right font-mono font-semibold text-gray-800\">$850.00<\/td>\r\n <\/tr>\r\n `;\r\n }\r\n\r\n for (const [id, service] of Object.entries(services)) {\r\n if (service.qty > 0) {\r\n isEmpty = false;\r\n let addonsList = [];\r\n let itemTotal = service.basePrice * service.qty;\r\n\r\n for (const [addonId, addon] of Object.entries(service.addons)) {\r\n if (addon.type === 'standalone_flat') continue;\r\n \r\n if (document.getElementById(addonId).checked) {\r\n let addonCost = addon.type === 'per_unit' ? addon.price * service.qty : addon.price;\r\n itemTotal += addonCost;\r\n addonsList.push(addon.name);\r\n }\r\n }\r\n\r\n recapHTML += `\r\n <tr class=\"border-b border-gray-200 last:border-0\">\r\n <td class=\"py-3 align-top\">\r\n <p class=\"font-semibold text-gray-800\">${service.name}<\/p>\r\n ${addonsList.length > 0 ? `<p class=\"text-xs text-gray-500 mt-1\">Includes: ${addonsList.join(', ')}<\/p>` : ''}\r\n <\/td>\r\n <td class=\"py-3 text-center text-gray-600 font-mono\">${service.qty}<\/td>\r\n <td class=\"py-3 text-right font-mono font-semibold text-gray-800\">$${itemTotal.toFixed(2)}<\/td>\r\n <\/tr>\r\n `;\r\n }\r\n }\r\n\r\n if (isEmpty) {\r\n recapHTML = '<tr><td colspan=\"3\" class=\"py-8 text-center text-gray-500 italic\">No items selected.<\/td><\/tr>';\r\n }\r\n\r\n recap.innerHTML = recapHTML;\r\n document.getElementById('checkout-total').innerText = `$${(window.currentTotal || 0).toFixed(2)}`;\r\n document.getElementById('checkout-time-display').innerText = `${window.currentTime || 0} Days`;\r\n\r\n modal.classList.remove('hidden');\r\n setTimeout(() => {\r\n content.classList.remove('scale-95', 'opacity-0');\r\n content.classList.add('scale-100', 'opacity-100');\r\n }, 10);\r\n }\r\n\r\n function closeCheckout() {\r\n const modal = document.getElementById('checkout-modal');\r\n const content = document.getElementById('checkout-content');\r\n \r\n content.classList.remove('scale-100', 'opacity-100');\r\n content.classList.add('scale-95', 'opacity-0');\r\n \r\n setTimeout(() => {\r\n modal.classList.add('hidden');\r\n }, 200);\r\n }\r\n\r\n function downloadSummary() {\r\n const btn = document.getElementById('download-btn');\r\n const originalContent = btn.innerHTML;\r\n \r\n btn.innerHTML = '<div class=\"loader\"><\/div> Generating...';\r\n btn.disabled = true;\r\n\r\n const element = document.getElementById('order-summary-card');\r\n\r\n html2canvas(element, {\r\n scale: 2,\r\n backgroundColor: '#ffffff',\r\n logging: false,\r\n useCORS: true\r\n }).then(canvas => {\r\n const link = document.createElement('a');\r\n link.download = `AVE-Media-Invoice-${Date.now()}.png`;\r\n link.href = canvas.toDataURL('image\/png');\r\n link.click();\r\n\r\n btn.innerHTML = '<i class=\"fas fa-check\"><\/i> Downloaded!';\r\n btn.classList.remove('bg-gray-800');\r\n btn.classList.add('bg-green-600');\r\n \r\n setTimeout(() => {\r\n btn.innerHTML = originalContent;\r\n btn.disabled = false;\r\n btn.classList.add('bg-gray-800');\r\n btn.classList.remove('bg-green-600');\r\n }, 3000);\r\n }).catch(err => {\r\n console.error(err);\r\n btn.innerHTML = 'Error. Try again.';\r\n btn.disabled = false;\r\n });\r\n }\r\n\r\n function copyToClipboard(elementId) {\r\n const text = document.getElementById(elementId).innerText;\r\n navigator.clipboard.writeText(text).then(() => {\r\n const btn = document.querySelector(`button[onclick=\"copyToClipboard('${elementId}')\"]`);\r\n const originalIcon = btn.innerHTML;\r\n \r\n btn.innerHTML = '<i class=\"fas fa-check text-green-400\"><\/i>';\r\n btn.classList.add('border-green-500');\r\n \r\n setTimeout(() => {\r\n btn.innerHTML = originalIcon;\r\n btn.classList.remove('border-green-500');\r\n }, 2000);\r\n });\r\n }\r\n\r\n calculateTotals();\r\n <\/script>\r\n<\/body>\r\n<\/html>\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>AVE Media | Custom Order Builder AVE Media Custom Order Portal Build Your Package Select the services you need. Adjust quantities, add extras, and get an instant quote with delivery estimates. Video $75\/video 2-6 Minutes High-Retention Editing Pro long video editing, motion graphics, smooth cuts, transitions, b-roll, music, SFX, etc. Quantity 0 Est. Delivery: 0 […]<\/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":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"disabled","ast-banner-title-visibility":"disabled","ast-main-header-display":"disabled","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"disabled","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"disabled","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-8935","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Checkout page<\/title>\n<meta name=\"description\" content=\"Checkout page\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/avemedia.net\/?page_id=8935\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Checkout page\" \/>\n<meta property=\"og:description\" content=\"Checkout page\" \/>\n<meta property=\"og:url\" content=\"https:\/\/avemedia.net\/?page_id=8935\" \/>\n<meta property=\"og:site_name\" content=\"Ave Media\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-13T11:05:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/avemedia.net\/wp-content\/uploads\/2026\/01\/cropped-fgg.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"512\" \/>\n\t<meta property=\"og:image:height\" content=\"512\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/avemedia.net\\\/?page_id=8935\",\"url\":\"https:\\\/\\\/avemedia.net\\\/?page_id=8935\",\"name\":\"Checkout page\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/avemedia.net\\\/#website\"},\"datePublished\":\"2026-02-15T23:41:16+00:00\",\"dateModified\":\"2026-04-13T11:05:47+00:00\",\"description\":\"Checkout page\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/avemedia.net\\\/?page_id=8935#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/avemedia.net\\\/?page_id=8935\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/avemedia.net\\\/?page_id=8935#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/avemedia.net\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Checkout page\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/avemedia.net\\\/#website\",\"url\":\"https:\\\/\\\/avemedia.net\\\/\",\"name\":\"Ave Media\",\"description\":\"Professional Video Editing Agency\",\"publisher\":{\"@id\":\"https:\\\/\\\/avemedia.net\\\/#organization\"},\"alternateName\":\"avemedia\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/avemedia.net\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/avemedia.net\\\/#organization\",\"name\":\"Ave Media\",\"alternateName\":\"avemedia\",\"url\":\"https:\\\/\\\/avemedia.net\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/avemedia.net\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/avemedia.net\\\/wp-content\\\/uploads\\\/2026\\\/01\\\/cropped-fgg.webp\",\"contentUrl\":\"https:\\\/\\\/avemedia.net\\\/wp-content\\\/uploads\\\/2026\\\/01\\\/cropped-fgg.webp\",\"width\":512,\"height\":512,\"caption\":\"Ave Media\"},\"image\":{\"@id\":\"https:\\\/\\\/avemedia.net\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Checkout page","description":"Checkout page","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/avemedia.net\/?page_id=8935","og_locale":"en_US","og_type":"article","og_title":"Checkout page","og_description":"Checkout page","og_url":"https:\/\/avemedia.net\/?page_id=8935","og_site_name":"Ave Media","article_modified_time":"2026-04-13T11:05:47+00:00","og_image":[{"width":512,"height":512,"url":"https:\/\/avemedia.net\/wp-content\/uploads\/2026\/01\/cropped-fgg.webp","type":"image\/webp"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/avemedia.net\/?page_id=8935","url":"https:\/\/avemedia.net\/?page_id=8935","name":"Checkout page","isPartOf":{"@id":"https:\/\/avemedia.net\/#website"},"datePublished":"2026-02-15T23:41:16+00:00","dateModified":"2026-04-13T11:05:47+00:00","description":"Checkout page","breadcrumb":{"@id":"https:\/\/avemedia.net\/?page_id=8935#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/avemedia.net\/?page_id=8935"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/avemedia.net\/?page_id=8935#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/avemedia.net\/"},{"@type":"ListItem","position":2,"name":"Checkout page"}]},{"@type":"WebSite","@id":"https:\/\/avemedia.net\/#website","url":"https:\/\/avemedia.net\/","name":"Ave Media","description":"Professional Video Editing Agency","publisher":{"@id":"https:\/\/avemedia.net\/#organization"},"alternateName":"avemedia","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/avemedia.net\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/avemedia.net\/#organization","name":"Ave Media","alternateName":"avemedia","url":"https:\/\/avemedia.net\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/avemedia.net\/#\/schema\/logo\/image\/","url":"https:\/\/avemedia.net\/wp-content\/uploads\/2026\/01\/cropped-fgg.webp","contentUrl":"https:\/\/avemedia.net\/wp-content\/uploads\/2026\/01\/cropped-fgg.webp","width":512,"height":512,"caption":"Ave Media"},"image":{"@id":"https:\/\/avemedia.net\/#\/schema\/logo\/image\/"}}]}},"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/avemedia.net\/index.php?rest_route=\/wp\/v2\/pages\/8935","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/avemedia.net\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/avemedia.net\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/avemedia.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/avemedia.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8935"}],"version-history":[{"count":85,"href":"https:\/\/avemedia.net\/index.php?rest_route=\/wp\/v2\/pages\/8935\/revisions"}],"predecessor-version":[{"id":9980,"href":"https:\/\/avemedia.net\/index.php?rest_route=\/wp\/v2\/pages\/8935\/revisions\/9980"}],"wp:attachment":[{"href":"https:\/\/avemedia.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8935"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}