{"id":11,"date":"2026-01-10T10:00:21","date_gmt":"2026-01-10T10:00:21","guid":{"rendered":"https:\/\/villasmashburger.com\/?page_id=11"},"modified":"2026-01-10T11:32:45","modified_gmt":"2026-01-10T11:32:45","slug":"home","status":"publish","type":"page","link":"https:\/\/villasmashburger.com\/","title":{"rendered":"home"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover\">\n    <title>Villa Smash Burger<\/title>\n\n    <!-- Swiper CSS -->\n    <link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/swiper@11\/swiper-bundle.min.css\" \/>\n    <!-- Google Fonts: Cairo for Arabic -->\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cairo:wght@400;600;700&#038;display=swap\" rel=\"stylesheet\">\n\n    <style>\n        \/* --- RESET & BASE STYLES --- *\/\n        * {\n            box-sizing: border-box;\n            -webkit-tap-highlight-color: transparent;\n        }\n\n        html, body {\n            margin: 0;\n            padding: 0;\n            width: 100%;\n            height: 100%;\n            overflow: hidden; \/* Keep page itself non-scrollable *\/\n            font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n            background-color: #000;\n            color: #fff;\n        }\n\n        \/* Arabic Font Override *\/\n        body.lang-ar {\n            font-family: 'Cairo', sans-serif;\n            direction: rtl;\n        }\n\n        \/* --- BACKGROUND VIDEO --- *\/\n        .bg-video-container {\n            position: fixed;\n            inset: 0;\n            width: 100%;\n            height: 100%;\n            z-index: 0;\n        }\n\n        video {\n            width: 100%;\n            height: 100%;\n            object-fit: cover;\n            opacity: 0.6;\n        }\n\n        .overlay {\n            position: absolute;\n            inset: 0;\n            background: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.9) 100%);\n            z-index: 1;\n        }\n\n        \/* --- APP SHELL --- *\/\n        .app-shell {\n            position: relative;\n            z-index: 10;\n            width: 100%;\n            height: 100%;\n            padding:\n                max(10px, env(safe-area-inset-top))\n                max(20px, env(safe-area-inset-right))\n                max(15px, env(safe-area-inset-bottom))\n                max(20px, env(safe-area-inset-left));\n            display: flex;\n            justify-content: center;\n        }\n\n        .app-ui {\n            width: 100%;\n            max-width: 480px;\n            display: flex;\n            flex-direction: column;\n            height: 100%;\n            justify-content: space-between;\n        }\n\n        .app-header {\n            flex-shrink: 0;\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            padding-top: 5px;\n            gap: 25px;\n        }\n\n        .app-main {\n            flex: 1 1 auto;\n            min-height: 0; \n            display: flex;\n            flex-direction: column;\n            justify-content: center; \/* CHANGED: Vertically center the buttons *\/\n            align-items: center;\n            padding: 10px 0; \/* Reduced padding *\/\n            overflow-y: hidden;\n        }\n\n        .app-footer {\n            flex-shrink: 0;\n            display: flex;\n            flex-direction: column; \/* Allow stacking of social and credit *\/\n            align-items: center;\n            padding-bottom: 5px;\n        }\n\n        \/* --- LOGO --- *\/\n        .logo-container {\n            width: 130px; \n            height: 130px;\n            border-radius: 50%;\n            overflow: hidden;\n            border: 2px solid rgba(255, 255, 255, 0.15);\n            box-shadow: 0 8px 20px rgba(0,0,0,0.5);\n            background: rgba(0, 0, 0, 0.3);\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            animation: fadeInDown 1s ease-out;\n        }\n\n        .logo {\n            width: 100%;\n            height: 100%;\n            object-fit: cover;\n        }\n\n        \/* --- LANGUAGE TOGGLE --- *\/\n        .lang-toggle-container {\n            background: rgba(255, 255, 255, 0.15);\n            backdrop-filter: blur(10px);\n            border-radius: 30px;\n            padding: 4px;\n            display: flex;\n            position: relative;\n            border: 1px solid rgba(255,255,255,0.2);\n            animation: fadeInDown 1s ease-out 0.2s backwards;\n            direction: ltr; \/* Always LTR for the switch itself *\/\n        }\n\n        .lang-btn {\n            background: transparent;\n            border: none;\n            color: rgba(255, 255, 255, 0.6);\n            padding: 6px 16px;\n            font-size: 13px;\n            font-weight: 700;\n            cursor: pointer;\n            border-radius: 20px;\n            transition: all 0.3s ease;\n            position: relative;\n            z-index: 2;\n        }\n\n        .lang-btn.active {\n            color: #000;\n            background: #fff;\n            box-shadow: 0 2px 8px rgba(0,0,0,0.2);\n        }\n\n        \/* --- BUTTON GROUP --- *\/\n        .action-group {\n            display: flex;\n            flex-direction: column;\n            gap: 10px;\n            align-items: center;\n            width: 100%;\n            max-width: 400px;\n        }\n\n        .btn-base {\n            border-radius: 50px;\n            font-size: 16px;\n            font-weight: 600;\n            letter-spacing: 0.5px;\n            cursor: pointer;\n            box-shadow: 0 8px 25px rgba(0,0,0,0.3);\n            transition: transform 0.2s, background 0.2s;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            gap: 12px;\n            text-transform: uppercase;\n            text-decoration: none;\n            width: 100%;\n            max-width: 280px;\n            height: 50px;\n            border: none;\n            outline: none;\n        }\n\n        \/* RTL Arrow Mirroring *\/\n        body.lang-ar .btn-base svg {\n            transform: scaleX(-1);\n        }\n\n        .btn-base:active {\n            transform: scale(0.96);\n        }\n\n        .btn-menu-view {\n            background: rgba(255, 255, 255, 0.15);\n            backdrop-filter: blur(20px);\n            -webkit-backdrop-filter: blur(20px);\n            border: 1px solid rgba(255, 255, 255, 0.3);\n            color: #fff;\n            animation: fadeInUp 1s ease-out 0.5s backwards;\n        }\n\n        .btn-menu-view:active {\n            background: rgba(255, 255, 255, 0.25);\n        }\n\n        .btn-secondary {\n            background: rgba(0, 0, 0, 0.5);\n            backdrop-filter: blur(10px);\n            -webkit-backdrop-filter: blur(10px);\n            border: 1px solid rgba(255, 255, 255, 0.15);\n            color: rgba(255, 255, 255, 0.95);\n            font-size: 15px;\n        }\n\n        .btn-directions { animation: fadeInUp 1s ease-out 0.6s backwards; }\n        .btn-call       { animation: fadeInUp 1s ease-out 0.7s backwards; }\n        .btn-hours      { animation: fadeInUp 1s ease-out 0.8s backwards; }\n\n        .btn-secondary:active {\n            background: rgba(0, 0, 0, 0.7);\n        }\n\n        \/* --- SOCIAL SECTION (UPDATED) --- *\/\n        .social-section {\n            display: flex;\n            justify-content: center;\n            width: 100%;\n            margin-bottom: 15px; \/* Add space below social section above credit *\/\n            flex-shrink: 0;\n            animation: fadeInUp 1s ease-out 1.1s backwards;\n        }\n\n        .social-container {\n            background: rgba(255, 255, 255, 0.08);\n            backdrop-filter: blur(10px);\n            -webkit-backdrop-filter: blur(10px);\n            border: 1px solid rgba(255, 255, 255, 0.1);\n            border-radius: 40px;\n            padding: 8px 25px;\n            display: flex;\n            align-items: center;\n            gap: 20px;\n            box-shadow: 0 4px 15px rgba(0,0,0,0.2);\n        }\n\n        .social-link {\n            color: rgba(255, 255, 255, 0.8);\n            transition: all 0.2s;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            width: 32px;\n            height: 32px;\n            border-radius: 50%;\n        }\n\n        .social-link:hover {\n            color: #fff;\n            background: rgba(255, 255, 255, 0.1);\n            transform: scale(1.1);\n        }\n\n        .social-link svg {\n            width: 22px;\n            height: 22px;\n            fill: currentColor;\n        }\n\n        .social-separator {\n            width: 1px;\n            height: 20px;\n            background: rgba(255,255,255,0.2);\n        }\n\n        .social-label {\n            font-size: 12px;\n            font-weight: 600;\n            text-transform: uppercase;\n            letter-spacing: 0.5px;\n            color: rgba(255,255,255,0.7);\n            white-space: nowrap;\n        }\n\n        \/* --- FOOTER CREDIT --- *\/\n        .footer-credit {\n            font-size: 10px;\n            color: rgba(255, 255, 255, 0.3);\n            text-align: center;\n            letter-spacing: 0.5px;\n            animation: fadeInUp 1s ease-out 1.3s backwards;\n        }\n\n        .footer-credit a {\n            color: rgba(255, 255, 255, 0.5);\n            text-decoration: none;\n            transition: color 0.2s;\n        }\n\n        \/* --- MODALS --- *\/\n        .modal-overlay {\n            position: fixed;\n            inset: 0;\n            background: rgba(0, 0, 0, 0.85);\n            backdrop-filter: blur(8px);\n            -webkit-backdrop-filter: blur(8px);\n            z-index: 100;\n            opacity: 0;\n            visibility: hidden;\n            transition: opacity 0.3s, visibility 0.3s;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            padding: 20px;\n        }\n\n        .modal-overlay.active {\n            opacity: 1;\n            visibility: visible;\n        }\n\n        .modal-card {\n            background: rgba(30, 30, 30, 0.95);\n            border: 1px solid rgba(255, 255, 255, 0.1);\n            border-radius: 20px;\n            width: 100%;\n            max-width: 340px;\n            padding: 25px;\n            display: flex;\n            flex-direction: column;\n            gap: 20px;\n            box-shadow: 0 20px 40px rgba(0,0,0,0.6);\n            transform: scale(0.95);\n            transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);\n        }\n\n        .modal-overlay.active .modal-card {\n            transform: scale(1);\n        }\n\n        .modal-title {\n            font-size: 20px;\n            font-weight: 700;\n            text-align: center;\n            margin: 0;\n            color: #fff;\n        }\n\n        .close-modal-btn {\n            background: transparent;\n            border: 1px solid rgba(255,255,255,0.2);\n            color: #fff;\n            padding: 10px;\n            border-radius: 12px;\n            margin-top: 10px;\n            cursor: pointer;\n            font-weight: 600;\n            transition: background 0.2s;\n        }\n\n        \/* Modal RTL adjustments *\/\n        body.lang-ar .modal-card {\n            text-align: right;\n        }\n        body.lang-ar .map-btn, \n        body.lang-ar .call-btn {\n            text-align: right;\n            direction: rtl;\n        }\n\n        \/* Map & Hours Styles *\/\n        .map-section-title {\n            font-size: 14px;\n            font-weight: 600;\n            color: #ffbf00;\n            margin-bottom: 8px;\n            text-transform: uppercase;\n            letter-spacing: 1px;\n        }\n        .map-options-group { display: flex; flex-direction: column; gap: 15px; }\n        .map-icons-row { display: flex; gap: 10px; }\n        .map-btn {\n            flex: 1;\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            justify-content: center;\n            padding: 10px;\n            background: rgba(255, 255, 255, 0.05);\n            border-radius: 12px;\n            text-decoration: none;\n            color: #fff;\n            border: 1px solid transparent;\n            font-size: 11px;\n            gap: 5px;\n        }\n        .map-icon { width: 28px; height: 28px; object-fit: contain; }\n        \n        .call-options { display: flex; flex-direction: column; gap: 12px; }\n        .call-btn {\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            padding: 16px;\n            background: rgba(255, 255, 255, 0.08);\n            border-radius: 12px;\n            text-decoration: none;\n            color: #fff;\n            font-weight: 600;\n            border: 1px solid rgba(255,255,255,0.1);\n        }\n\n        body.lang-ar .call-btn { flex-direction: row-reverse; }\n\n        .hours-list { display: flex; flex-direction: column; gap: 10px; }\n        .hours-row {\n            display: flex;\n            justify-content: space-between;\n            font-size: 14px;\n            color: rgba(255, 255, 255, 0.9);\n            border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n            padding-bottom: 8px;\n        }\n        body.lang-ar .hours-row { flex-direction: row-reverse; }\n        .hours-row:last-child { border-bottom: none; padding-bottom: 0; }\n        .day-name { font-weight: 600; color: #ffbf00; }\n\n        \/* Menu Modal *\/\n        .menu-modal-fs {\n            position: fixed; inset: 0; width: 100%; height: 100%;\n            background: #000; z-index: 200;\n            transform: translateY(100%);\n            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);\n            display: flex; flex-direction: column; visibility: hidden;\n        }\n        .menu-modal-fs.active { transform: translateY(0); visibility: visible; }\n        .fs-header {\n            height: 60px; display: flex; justify-content: space-between;\n            align-items: center; padding: 10px 20px;\n            background: rgba(20, 20, 20, 0.9); backdrop-filter: blur(10px);\n            border-bottom: 1px solid rgba(255,255,255,0.1); z-index: 202;\n        }\n        body.lang-ar .fs-header { flex-direction: row-reverse; }\n        .btn-close-fs {\n            background: rgba(255, 255, 255, 0.1); border: none; color: #fff;\n            width: 36px; height: 36px; border-radius: 50%;\n            display: flex; align-items: center; justify-content: center;\n            font-size: 20px; cursor: pointer;\n        }\n        .swiper { width: 100%; height: 100%; background: #000; }\n        .swiper-slide { overflow: hidden; display: flex; align-items: center; justify-content: center; }\n        .swiper-zoom-container img { max-width: 100%; max-height: 100%; object-fit: contain; }\n\n        \/* --- SMALL SCREEN OPTIMIZATION --- *\/\n        @media (max-height: 700px) {\n            .logo-container { width: 110px; height: 110px; }\n            .app-header { gap: 15px; padding-top: 5px; }\n            .btn-base { height: 44px; font-size: 14px; gap: 8px; }\n            .action-group { gap: 8px; }\n            .app-main { padding-top: 10px; } \/* Reset extra top padding *\/\n            .social-section { margin-bottom: 10px; }\n            .social-container { padding: 6px 20px; gap: 15px; }\n            .social-link { width: 28px; height: 28px; }\n        }\n    <\/style>\n<\/head>\n<body>\n\n    <!-- Background Video -->\n    <div class=\"bg-video-container\">\n        <div class=\"overlay\"><\/div>\n        <video autoplay muted loop playsinline poster=\"\">\n            <source src=\"https:\/\/villasmashburger.com\/wp-content\/uploads\/2026\/01\/villa-video.mp4\" type=\"video\/mp4\">\n            Your browser does not support the video tag.\n        <\/video>\n    <\/div>\n\n    <!-- Main Screen UI -->\n    <div class=\"app-shell\">\n        <div class=\"app-ui\">\n            <header class=\"app-header\">\n                <div class=\"logo-container\">\n                    <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/villasmashburger.com\/wp-content\/uploads\/2026\/01\/cropped-villa-smash-burger.png\" alt=\"Villa Smash Burger Logo\" class=\"logo\" width=\"512\" height=\"512\">\n                <\/div>\n                \n                <!-- Language Toggle -->\n                <div class=\"lang-toggle-container\">\n                    <button class=\"lang-btn active\" onclick=\"setLanguage('en')\">EN<\/button>\n                    <button class=\"lang-btn\" onclick=\"setLanguage('ar')\">\u0639\u0631\u0628\u064a<\/button>\n                <\/div>\n            <\/header>\n\n            <main class=\"app-main\">\n                <div class=\"action-group\">\n                    <button class=\"btn-base btn-menu-view\" id=\"openMenuBtn\">\n                        <span data-key=\"viewMenu\">View Menu<\/span>\n                        <svg width=\"20\" height=\"20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5l7 7-7 7\"><\/path><\/svg>\n                    <\/button>\n\n                    <button class=\"btn-base btn-secondary btn-directions\" id=\"openMapsBtn\">\n                        <span data-key=\"getDirections\">Get Directions<\/span>\n                        <svg width=\"20\" height=\"20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z\"><\/path><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15 11a3 3 0 11-6 0 3 3 0 016 0z\"><\/path><\/svg>\n                    <\/button>\n\n                    <button class=\"btn-base btn-secondary btn-call\" id=\"openCallBtn\">\n                        <span data-key=\"callUs\">Call Us<\/span>\n                        <svg width=\"20\" height=\"20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z\"><\/path><\/svg>\n                    <\/button>\n\n                    <button class=\"btn-base btn-secondary btn-hours\" id=\"openHoursBtn\">\n                        <span data-key=\"openingHours\">Opening Hours<\/span>\n                        <svg width=\"20\" height=\"20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z\"><\/path><\/svg>\n                    <\/button>\n                <\/div>\n            <\/main>\n\n            <footer class=\"app-footer\">\n                <div class=\"social-section\">\n                    <div class=\"social-container\">\n                        <span class=\"social-label\" data-key=\"followUs\">Follow us<\/span>\n                        <div class=\"social-separator\"><\/div>\n                        \n                        <a rel=\"nofollow noopener noreferrer\" href=\"https:\/\/www.facebook.com\/Villasmashburger\" target=\"_blank\" class=\"social-link\" aria-label=\"Facebook\">\n                            <svg viewBox=\"0 0 24 24\">\n                                <path d=\"M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z\"\/>\n                            <\/svg>\n                        <\/a>\n\n                        <a rel=\"nofollow noopener noreferrer\" href=\"https:\/\/www.instagram.com\/villasmashburger\/\" target=\"_blank\" class=\"social-link\" aria-label=\"Instagram\">\n                            <svg viewBox=\"0 0 24 24\">\n                                <path d=\"M12 2.163c3.204 0 3.584.012 4.85.072 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zm0 10.162a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.88 1.44 1.44 0 000-2.88z\"\/>\n                            <\/svg>\n                        <\/a>\n\n                        <a rel=\"nofollow noopener noreferrer\" href=\"https:\/\/www.tiktok.com\/@villasmashburger\/\" target=\"_blank\" class=\"social-link\" aria-label=\"TikTok\">\n                            <svg viewBox=\"0 0 24 24\">\n                                <path d=\"M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93v6.14c0 3.48-2.32 6.52-5.69 7.45-3.37.93-7.15-.49-8.93-3.37-1.78-2.88-.83-6.8 2.32-8.57.72-.4 1.52-.65 2.34-.73v4.2c-1.66.25-2.7 1.86-2.32 3.5.38 1.64 1.98 2.68 3.62 2.35 1.64-.33 2.68-1.93 2.35-3.57V.02z\"\/>\n                            <\/svg>\n                        <\/a>\n                    <\/div>\n                <\/div>\n                \n                <div class=\"footer-credit\">\n                    <span data-key=\"footerCredit\">Designed and Managed by<\/span> <a rel=\"nofollow noopener noreferrer\" href=\"https:\/\/ahlamarketing.com\" target=\"_blank\">Ahla Marketing<\/a> \u00a9\n                <\/div>\n            <\/footer>\n        <\/div>\n    <\/div>\n\n    <!-- MAP SELECTION MODAL -->\n    <div class=\"modal-overlay\" id=\"mapsModal\">\n        <div class=\"modal-card\">\n            <h3 class=\"modal-title\" data-key=\"selectLocation\">Select Location<\/h3>\n            <div class=\"map-options-group\">\n                <div class=\"map-branch\">\n                    <div class=\"map-section-title\" data-key=\"beitHanina\">Beit Hanina<\/div>\n                    <div class=\"map-icons-row\">\n                        <a rel=\"nofollow noopener noreferrer\" href=\"https:\/\/maps.app.goo.gl\/X9afoSCZAHHQeWcSA\" target=\"_blank\" class=\"map-btn\">\n                            <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/villasmashburger.com\/wp-content\/uploads\/2026\/01\/Google_Maps_icon_2015-2020.svg_.png\" alt=\"Google Maps\" class=\"map-icon\" width=\"2048\" height=\"2048\">\n                            Google\n                        <\/a>\n                        <a rel=\"nofollow noopener noreferrer\" href=\"https:\/\/waze.com\/ul?ll=31.833687,35.227648&#038;navigate=yes\" target=\"_blank\" class=\"map-btn\">\n                            <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/villasmashburger.com\/wp-content\/uploads\/2026\/01\/waze_app_icon-logo_brandlogos.net_l82da.png\" alt=\"Waze\" class=\"map-icon\" width=\"779\" height=\"779\">\n                            Waze\n                        <\/a>\n                        <a rel=\"nofollow noopener noreferrer\" href=\"http:\/\/maps.apple.com\/?daddr=31.833687,35.227648\" target=\"_blank\" class=\"map-btn\">\n                            <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/villasmashburger.com\/wp-content\/uploads\/2026\/01\/AppleMaps_logo.svg-1.png\" alt=\"Apple Maps\" class=\"map-icon\" width=\"1200\" height=\"1200\">\n                            Apple\n                        <\/a>\n                    <\/div>\n                <\/div>\n\n                <div class=\"map-branch\">\n                    <div class=\"map-section-title\" data-key=\"ramallah\">Ramallah<\/div>\n                    <div class=\"map-icons-row\">\n                        <a rel=\"nofollow noopener noreferrer\" href=\"https:\/\/maps.app.goo.gl\/vXjg2VFdJN9X4i28A\" target=\"_blank\" class=\"map-btn\">\n                            <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/villasmashburger.com\/wp-content\/uploads\/2026\/01\/Google_Maps_icon_2015-2020.svg_.png\" alt=\"Google Maps\" class=\"map-icon\" width=\"2048\" height=\"2048\">\n                            Google\n                        <\/a>\n                        <a rel=\"nofollow noopener noreferrer\" href=\"https:\/\/waze.com\/ul?ll=31.902994,35.200244&#038;navigate=yes\" target=\"_blank\" class=\"map-btn\">\n                            <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/villasmashburger.com\/wp-content\/uploads\/2026\/01\/waze_app_icon-logo_brandlogos.net_l82da.png\" alt=\"Waze\" class=\"map-icon\" width=\"779\" height=\"779\">\n                            Waze\n                        <\/a>\n                        <a rel=\"nofollow noopener noreferrer\" href=\"http:\/\/maps.apple.com\/?daddr=31.902994,35.200244\" target=\"_blank\" class=\"map-btn\">\n                            <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/villasmashburger.com\/wp-content\/uploads\/2026\/01\/AppleMaps_logo.svg-1.png\" alt=\"Apple Maps\" class=\"map-icon\" width=\"1200\" height=\"1200\">\n                            Apple\n                        <\/a>\n                    <\/div>\n                <\/div>\n            <\/div>\n            <button class=\"close-modal-btn\" onclick=\"closeMapsModal()\" data-key=\"cancel\">Cancel<\/button>\n        <\/div>\n    <\/div>\n\n    <!-- CALL SELECTION MODAL -->\n    <div class=\"modal-overlay\" id=\"callModal\">\n        <div class=\"modal-card\">\n            <h3 class=\"modal-title\" data-key=\"callBranch\">Call Branch<\/h3>\n            <div class=\"call-options\">\n                <a href=\"tel:02-6445444\" class=\"call-btn\">\n                    <span data-key=\"beitHanina\">Beit Hanina<\/span>\n                    <span>02-6445444<\/span>\n                <\/a>\n                <a href=\"tel:02-2959333\" class=\"call-btn\">\n                    <span data-key=\"ramallah\">Ramallah<\/span>\n                    <span>02-2959333<\/span>\n                <\/a>\n            <\/div>\n            <button class=\"close-modal-btn\" onclick=\"closeCallModal()\" data-key=\"cancel\">Cancel<\/button>\n        <\/div>\n    <\/div>\n\n    <!-- HOURS MODAL -->\n    <div class=\"modal-overlay\" id=\"hoursModal\">\n        <div class=\"modal-card\">\n            <h3 class=\"modal-title\" data-key=\"openingHours\">Opening Hours<\/h3>\n            <div class=\"hours-list\">\n                <div class=\"hours-row\"><span class=\"day-name\" data-key=\"sunday\">Sunday<\/span> <span>1:00 PM &#8211; 11:00 PM<\/span><\/div>\n                <div class=\"hours-row\"><span class=\"day-name\" data-key=\"monday\">Monday<\/span> <span>1:00 PM &#8211; 11:00 PM<\/span><\/div>\n                <div class=\"hours-row\"><span class=\"day-name\" data-key=\"tuesday\">Tuesday<\/span> <span>1:00 PM &#8211; 11:00 PM<\/span><\/div>\n                <div class=\"hours-row\"><span class=\"day-name\" data-key=\"wednesday\">Wednesday<\/span> <span>1:00 PM &#8211; 11:00 PM<\/span><\/div>\n                <div class=\"hours-row\"><span class=\"day-name\" data-key=\"thursday\">Thursday<\/span> <span>1:00 PM &#8211; 11:00 PM<\/span><\/div>\n                <div class=\"hours-row\"><span class=\"day-name\" data-key=\"friday\">Friday<\/span> <span>3:00 PM &#8211; 1:00 AM<\/span><\/div>\n                <div class=\"hours-row\"><span class=\"day-name\" data-key=\"saturday\">Saturday<\/span> <span>1:00 PM &#8211; 11:00 PM<\/span><\/div>\n            <\/div>\n            <button class=\"close-modal-btn\" onclick=\"closeHoursModal()\" data-key=\"close\">Close<\/button>\n        <\/div>\n    <\/div>\n\n    <!-- MENU MODAL (FULLSCREEN) -->\n    <div class=\"menu-modal-fs\" id=\"menuModal\">\n        <div class=\"fs-header\">\n            <span class=\"page-indicator\" id=\"pageIndicator\">1 \/ 2<\/span>\n            <button class=\"btn-close-fs\" id=\"closeMenuBtn\">\u2715<\/button>\n        <\/div>\n\n        <div class=\"swiper mySwiper\">\n            <div class=\"swiper-wrapper\" id=\"swiperWrapper\"><\/div>\n        <\/div>\n    <\/div>\n\n    <!-- Swiper JS (CDN) -->\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/swiper@11\/swiper-bundle.min.js\"><\/script>\n\n    <script>\n        \/\/ --- TRANSLATION DATA ---\n        const translations = {\n            en: {\n                viewMenu: \"View Menu\",\n                getDirections: \"Get Directions\",\n                callUs: \"Call Us\",\n                openingHours: \"Opening Hours\",\n                followUs: \"Follow us\",\n                footerCredit: \"Designed and Managed by\",\n                selectLocation: \"Select Location\",\n                beitHanina: \"Beit Hanina\",\n                ramallah: \"Ramallah\",\n                callBranch: \"Call Branch\",\n                sunday: \"Sunday\",\n                monday: \"Monday\",\n                tuesday: \"Tuesday\",\n                wednesday: \"Wednesday\",\n                thursday: \"Thursday\",\n                friday: \"Friday\",\n                saturday: \"Saturday\",\n                cancel: \"Cancel\",\n                close: \"Close\"\n            },\n            ar: {\n                viewMenu: \"\u0642\u0627\u0626\u0645\u0629 \u0627\u0644\u0637\u0639\u0627\u0645\",\n                getDirections: \"\u0627\u0644\u0627\u062a\u062c\u0627\u0647\u0627\u062a\",\n                callUs: \"\u0627\u062a\u0635\u0644 \u0628\u0646\u0627\",\n                openingHours: \"\u0633\u0627\u0639\u0627\u062a \u0627\u0644\u0639\u0645\u0644\",\n                followUs: \"\u062a\u0627\u0628\u0639\u0646\u0627 \u0639\u0644\u0649\",\n                footerCredit: \"\u062a\u0635\u0645\u064a\u0645 \u0648\u0625\u062f\u0627\u0631\u0629\",\n                selectLocation: \"\u0627\u062e\u062a\u0631 \u0627\u0644\u0641\u0631\u0639\",\n                beitHanina: \"\u0628\u064a\u062a \u062d\u0646\u064a\u0646\u0627\",\n                ramallah: \"\u0631\u0627\u0645 \u0627\u0644\u0644\u0647\",\n                callBranch: \"\u0627\u062a\u0635\u0644 \u0628\u0627\u0644\u0641\u0631\u0639\",\n                sunday: \"\u0627\u0644\u0623\u062d\u062f\",\n                monday: \"\u0627\u0644\u0627\u062b\u0646\u064a\u0646\",\n                tuesday: \"\u0627\u0644\u062b\u0644\u0627\u062b\u0627\u0621\",\n                wednesday: \"\u0627\u0644\u0623\u0631\u0628\u0639\u0627\u0621\",\n                thursday: \"\u0627\u0644\u062e\u0645\u064a\u0633\",\n                friday: \"\u0627\u0644\u062c\u0645\u0639\u0629\",\n                saturday: \"\u0627\u0644\u0633\u0628\u062a\",\n                cancel: \"\u0625\u0644\u063a\u0627\u0621\",\n                close: \"\u0625\u063a\u0644\u0627\u0642\"\n            }\n        };\n\n        \/\/ --- LANGUAGE LOGIC ---\n        function setLanguage(lang) {\n            document.body.className = lang === 'ar' ? 'lang-ar' : '';\n            \n            \/\/ Update Toggle UI\n            const btns = document.querySelectorAll('.lang-btn');\n            btns.forEach(btn => {\n                btn.classList.toggle('active', btn.textContent.toLowerCase().includes(lang === 'en' ? 'en' : '\u0639\u0631\u0628\u064a'));\n            });\n\n            \/\/ Update Text Content\n            const elements = document.querySelectorAll('[data-key]');\n            elements.forEach(el => {\n                const key = el.getAttribute('data-key');\n                if (translations[lang][key]) {\n                    el.textContent = translations[lang][key];\n                }\n            });\n        }\n\n        \/\/ --- MENU SLIDER DATA ---\n        const menuImages = [\n            \"https:\/\/villasmashburger.com\/wp-content\/uploads\/2026\/01\/villa-menu-1-scaled.webp\",\n            \"https:\/\/villasmashburger.com\/wp-content\/uploads\/2026\/01\/villa-menu-2-scaled.webp\"\n        ];\n\n        \/\/ --- ELEMENTS ---\n        const menuModal = document.getElementById('menuModal');\n        const openMenuBtn = document.getElementById('openMenuBtn');\n        const closeMenuBtn = document.getElementById('closeMenuBtn');\n        const swiperWrapper = document.getElementById('swiperWrapper');\n        const indicator = document.getElementById('pageIndicator');\n\n        \/\/ Maps & Hours Elements\n        const mapsModal = document.getElementById('mapsModal');\n        const openMapsBtn = document.getElementById('openMapsBtn');\n        \n        const callModal = document.getElementById('callModal');\n        const openCallBtn = document.getElementById('openCallBtn');\n\n        const hoursModal = document.getElementById('hoursModal');\n        const openHoursBtn = document.getElementById('openHoursBtn');\n\n        let swiperInstance = null;\n        let isGenerated = false;\n\n        \/\/ --- MENU LOGIC ---\n        function initSwiper() {\n            if (swiperInstance) return;\n\n            menuImages.forEach((src, index) => {\n                const slide = document.createElement('div');\n                slide.className = 'swiper-slide';\n\n                const zoomContainer = document.createElement('div');\n                zoomContainer.className = 'swiper-zoom-container';\n\n                const img = document.createElement('img');\n                img.loading = index === 0 ? 'eager' : 'lazy';\n                img.src = src;\n                img.alt = `Menu Page ${index + 1}`;\n\n                const preloader = document.createElement('div');\n                preloader.className = 'swiper-lazy-preloader';\n\n                zoomContainer.appendChild(img);\n                slide.appendChild(zoomContainer);\n                slide.appendChild(preloader);\n\n                swiperWrapper.appendChild(slide);\n            });\n\n            swiperInstance = new Swiper('.mySwiper', {\n                zoom: {\n                    maxRatio: 3,\n                    minRatio: 1\n                },\n                lazy: true,\n                keyboard: {\n                    enabled: true,\n                },\n                on: {\n                    slideChange: function () {\n                        updateIndicator(this.realIndex);\n                    }\n                }\n            });\n\n            isGenerated = true;\n            updateIndicator(0);\n        }\n\n        function openMenu() {\n            menuModal.classList.add('active');\n            if (!isGenerated) {\n                initSwiper();\n            }\n            if (swiperInstance) swiperInstance.update();\n        }\n\n        function closeMenu() {\n            menuModal.classList.remove('active');\n            if (swiperInstance) swiperInstance.zoom.out();\n        }\n\n        function updateIndicator(index) {\n            indicator.textContent = `${index + 1} \/ ${menuImages.length}`;\n        }\n\n        \/\/ --- MODAL HELPERS ---\n        function openModal(modal) { modal.classList.add('active'); }\n        function closeModal(modal) { modal.classList.remove('active'); }\n\n        \/\/ --- EVENT LISTENERS ---\n        openMenuBtn.addEventListener('click', openMenu);\n        closeMenuBtn.addEventListener('click', closeMenu);\n\n        openMapsBtn.addEventListener('click', (e) => { e.preventDefault(); openModal(mapsModal); });\n        openCallBtn.addEventListener('click', (e) => { e.preventDefault(); openModal(callModal); });\n        if (openHoursBtn) {\n            openHoursBtn.addEventListener('click', (e) => { e.preventDefault(); openModal(hoursModal); });\n        }\n\n        \/\/ Close maps\/hours on click outside card\n        window.addEventListener('click', (e) => {\n            if (e.target === mapsModal) closeModal(mapsModal);\n            if (e.target === hoursModal) closeModal(hoursModal);\n            if (e.target === callModal) closeModal(callModal);\n        });\n\n        \/\/ Close on Escape key\n        document.addEventListener('keydown', (e) => {\n            if (e.key === 'Escape') {\n                if (menuModal.classList.contains('active')) closeMenu();\n                if (mapsModal.classList.contains('active')) closeModal(mapsModal);\n                if (hoursModal.classList.contains('active')) closeModal(hoursModal);\n                if (callModal.classList.contains('active')) closeModal(callModal);\n            }\n        });\n    <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Villa Smash Burger Your browser does not support the video tag. EN \u0639\u0631\u0628\u064a View Menu Get Directions Call Us Opening Hours Follow us Designed and Managed by Ahla Marketing \u00a9 Select Location Beit Hanina Google Waze Apple Ramallah Google Waze Apple Cancel Call Branch Beit Hanina 02-6445444 Ramallah 02-2959333 Cancel Opening Hours Sunday 1:00 PM [&hellip;]<\/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-11","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/villasmashburger.com\/index.php?rest_route=\/wp\/v2\/pages\/11","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/villasmashburger.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/villasmashburger.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/villasmashburger.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/villasmashburger.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=11"}],"version-history":[{"count":5,"href":"https:\/\/villasmashburger.com\/index.php?rest_route=\/wp\/v2\/pages\/11\/revisions"}],"predecessor-version":[{"id":27,"href":"https:\/\/villasmashburger.com\/index.php?rest_route=\/wp\/v2\/pages\/11\/revisions\/27"}],"wp:attachment":[{"href":"https:\/\/villasmashburger.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=11"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}