.price-symbol {
            width: 20px;
            height: 20px;
        }
        
        input[type=number]::-webkit-inner-spin-button,
        input[type=number]::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        input[type=number] {
            -moz-appearance: textfield; /* للفايرفوكس */
        }

        .error {
            color: white;
            text-align: center !important;
        }

        #add_map {
            width: 100%;
            height: 400px;
            margin-top: 10px;
            border: 1px solid #ccc;
        }

        /* Leaflet Map Controls - Dark Theme */
        .leaflet-control-geocoder {
            background: rgba(33, 53, 85, 0.9) !important;
            border: 1px solid #E4C59E !important;
            border-radius: 8px !important;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
        }

        .leaflet-control-geocoder-form input {
            background: rgba(255, 255, 255, 0.1) !important;
            color: #fff !important;
            border: 1px solid #E4C59E !important;
            border-radius: 6px !important;
            padding: 8px 12px !important;
        }

        .leaflet-control-geocoder-form input::placeholder {
            color: rgba(255, 255, 255, 0.6) !important;
        }

        .leaflet-control-geocoder-form button {
            background: #E4C59E !important;
            color: #213555 !important;
            border-radius: 6px !important;
        }

        .leaflet-control-geocoder-alternatives {
            background: rgba(33, 53, 85, 0.95) !important;
            border: 1px solid #E4C59E !important;
            border-radius: 6px !important;
            color: #fff !important;
        }

        .leaflet-control-geocoder-alternatives a {
            color: #fff !important;
            border-bottom: 1px solid rgba(228, 197, 158, 0.3) !important;
        }

        .leaflet-control-geocoder-alternatives a:hover {
            background: rgba(228, 197, 158, 0.2) !important;
        }

        /* Custom Location Button */
        .leaflet-control-locate {
            background: rgba(33, 53, 85, 0.9) !important;
            border: 2px solid #E4C59E !important;
            border-radius: 8px !important;
            width: 34px !important;
            height: 34px !important;
            cursor: pointer !important;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
            transition: all 0.3s ease !important;
        }

        .leaflet-control-locate:hover {
            background: rgba(228, 197, 158, 0.2) !important;
            transform: scale(1.05);
        }

        .leaflet-control-locate a {
            color: #E4C59E !important;
            font-size: 18px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            width: 100% !important;
            height: 100% !important;
            text-decoration: none !important;
        }

        /* Zoom controls styling to match */
        .leaflet-control-zoom {
            border: 2px solid #E4C59E !important;
            border-radius: 8px !important;
            overflow: hidden !important;
        }

        .leaflet-control-zoom a {
            background: rgba(33, 53, 85, 0.9) !important;
            color: #E4C59E !important;
            border-bottom: 1px solid #E4C59E !important;
        }

        .leaflet-control-zoom a:hover {
            background: rgba(228, 197, 158, 0.2) !important;
        }

        .leaflet-control-zoom a:last-child {
            border-bottom: none !important;
        }

        /* RTL (Arabic) Layout Fixes */
        .leaflet-right .leaflet-control-geocoder {
            margin-right: 10px !important;
            float: right !important;
            direction: rtl !important;
        }

        .leaflet-control-geocoder-form input {
            text-align: right !important;
            direction: rtl !important;
        }

        /* Purple accent for location button */
        .leaflet-control-locate {
            border: 2px solid #7c3aed !important;
        }

        .leaflet-control-locate:hover {
            background: rgba(124, 58, 237, 0.2) !important;
            border-color: #7c3aed !important;
        }

        .leaflet-control-locate a {
            color: #7c3aed !important;
        }

        /* Additional RTL positioning for location button */
        .leaflet-left .leaflet-control-locate {
            float: right !important;
            margin-right: 12px;
        }

        /* RTL-Specific Adjustments for Search Results */
        .leaflet-control-geocoder-alternatives {
            width: 260px !important; 
            max-width: 260px !important;
            direction: rtl !important;
            text-align: right !important;
        }
        /* Ensure Geocoder icon stays correctly positioned in RTL */
        .leaflet-touch .leaflet-control-geocoder-icon {
            margin-left: 10px !important; 
            margin-right: 0px !important;
        }


        .breadcrumb-area {
            background-image: url({{url('site/assets')}}/images/bg-breadcrumb-games.jpg) !important;
        }
        /* Start Update A1XX2 by tony 14/1/2026 */
        /* .page-bg{
            flex: 1; 
            background-image: url({{ url('site/assets') }}/images/bg-breadcrumb-games.jpg);
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
        } */
        /* End Update A1XX2 by tony 14/1/2026 */

        /*    cart*/
        .cart-toggle, .cart-toggle:hover {
            color: #E4C59EFF;
            padding: 9.2px 15px;
            border-radius: 10px;
            margin-inline-start: 10px;
            border: 1px solid #E4C59EFF;
        }

        .cart-sidebar {
                /* background-image removed for legacy cleanup */
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            position: fixed;
            top: 0;
            left: -350px; /* خارج الشاشة */
            width: 350px;
            height: 100vh;
            background-color: #E4C59EFF;
            box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
            transition: left 0.3s ease-in-out;
            z-index: 9999;
            overflow-y: auto;
        }
        .cart-sidebar:before{
                position: absolute;
            inset: 0;
            z-index: -1;
            content: "";
            background-color: rgba(0, 0, 0, .8);
        }

        .cart-sidebar.open {
            left: 0; /* أظهرها */
        }

        .cart-header h5 {
            font-size: 24px;
            font-weight: bold;
            color: #fff;
        }

        .cart-item {
            flex-direction: column;
            align-items: flex-start;
            padding-bottom: 30px;
            border-bottom: 2px solid #213555;
        }

        .cart-item h6 {
            font-size: 20px;
            font-weight: bold;
            color: #213555;
        }

        .cart-item p {
            font-size: 16px;
            color: #213555;
        }

        .cart-footer .btn {
            height: 50px;
            line-height: 2.5;
        }

        .cart-footer .btn-secondary {
            background: #213555;
        }
    /*search*/
        .search-btn {
            background: none;
            cursor: pointer;
            font-size: 20px;
             padding: 6px 8px;
            color: #E4C59EFF;
             border-radius: 10px;
            margin-inline-start: 10px;
            border: 1px solid #E4C59EFF;
        }

        /* الأوفرلاي */
        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.8);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 9;
        }

        .overlay.active {
            display: flex;
        }

        /* الفورم */
        .search-form {
            background: #fff;
            padding: 20px;
            border-radius: 8px;
            transform: scale(0.7);
            opacity: 0;
            transition: transform 0.3s ease, opacity 0.3s ease;
            display: flex;
            gap: 10px;
            width: 75%;
        }

        .overlay.active .search-form {
            transform: scale(1);
            opacity: 1;
        }

        .search-form input {
            flex: 1;
            padding: 8px 12px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        .search-form button {
            padding: 8px 12px;
            border: none;
            background: #333;
            color: #fff;
            border-radius: 4px;
            cursor: pointer;
        }

        .dropdown-item {
            white-space: normal !important;
            word-wrap: break-word;
            overflow-wrap: break-word;
        }
        .dropdown-menu.dropdown-menu-admin{
            max-width: 400px !important;
            min-width: 400px !important;
            text-align: start !important;
        }
        .dropdown-menu.dropdown-menu-admin .un-seen{
            background: #bdbdbd;
        }
         /* =========================================
           UNIQUE PURPLE BETA BADGE // Added by Rakkan 13/12/2025 to style the soft launch message
           ========================================= */
        .beta-launch-badge {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 6px 20px;
            margin-inline-end: 15px;
            
            /* Text Style */
            font-weight: 800;
            font-size: 13px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: #fff; /* White Text */
            
            /* Unique Purple Gradient Background */
            background: linear-gradient(135deg, #8E2DE2 0%, #4A00E0 100%); 
            
            /* Border */
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 6px; 
            
            /* Notable Purple Glow */
            box-shadow: 0 0 15px rgba(138, 43, 226, 0.6); 
            
            overflow: hidden;
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            z-index: 1;
        }
        /* end update  */
        /* Start Update A1XX2 by tony 14/1/2026 */
        /* Start Update A1XX3 by tony 27/1/2026 */

        #add_map .leaflet-control-geocoder,
        #add_map .leaflet-control-locate {
            background: transparent !important;    
            border: 0 !important;
            box-shadow: none !important;
        }

        #add_map .leaflet-control-geocoder .leaflet-control-geocoder-icon {
            width: 34px !important;
            height: 34px !important;
            border-radius: 8px !important;

            background-color: #fff !important;      
            background-repeat: no-repeat !important;
            background-position: center !important;
            background-size: 18px 18px !important;

            border: 2px solid #E4C59E !important;
            box-shadow: 0 2px 8px rgba(0,0,0,.25) !important;

            overflow: hidden !important;
        }

        #add_map .leaflet-control-geocoder.leaflet-control-geocoder-expanded {
            background: rgba(33, 53, 85, 0.90) !important;
            border: 1px solid #E4C59E !important;
            border-radius: 8px !important;
            padding: 6px !important;
            box-shadow: 0 2px 8px rgba(0,0,0,.3) !important;
        }

        /* ----------- LOCATE button ----------- */
        #add_map .leaflet-control-locate a {
            width: 34px !important;
            height: 34px !important;
            border-radius: 8px !important;

            display: flex !important;
            align-items: center !important;
            justify-content: center !important;

            background: #fff !important;           
            border: 2px solid #7c3aed !important;   
            box-shadow: 0 2px 8px rgba(0,0,0,.25) !important;

            text-decoration: none !important;
            overflow: hidden !important;
        }

        #add_map .leaflet-control-locate a::before,
        #add_map .leaflet-control-locate a::after,
        #add_map .leaflet-control-geocoder .leaflet-control-geocoder-icon::before,
        #add_map .leaflet-control-geocoder .leaflet-control-geocoder-icon::after {
            content: none !important;
            background: transparent !important;
        }

        #add_map .leaflet-control-locate a i {
            color: #7c3aed !important;
            font-size: 18px !important;
            margin: 0 !important;
            padding: 0 !important;
        }
        /* End Update A1XX3 by tony 27/1/2026 */

        /* 0) Allow normal page scroll */
        html, body {
            height: auto !important;
            overflow-y: auto !important;
            overflow-x: hidden !important;
        }

        /* Optional: lock scroll ONLY when you add class="no-scroll" on body */
        body.no-scroll {
            overflow: hidden !important;
        }

        /* 1) Page background */
        body.page-form,
        body.loading-active {
            margin: 0;
            min-height: 100vh;

            /* IMPORTANT: dark base behind bg-content.png */
            background-color: #000 !important;

            background-image: url("{{ site_path() }}/assets/images/bg-content.png") !important;
            background-repeat: no-repeat !important;
            background-position: center top !important;
            background-size: cover !important;

            display: flex;
            flex-direction: column;
        }

        /* 2) Sticky footer layout */
        main.wrap {
            flex: 1;
            min-height: 100vh;
            display: flex !important;
            flex-direction: column !important;
            background: transparent !important;
            overflow: visible !important;
        }

        .page-bg {
            flex: 1;
            background: transparent !important;
            background-image: none !important;
        }

        main.wrap > footer {
            margin-top: auto !important;
        }

        /* 3) Kill any whitening overlays */
        .page-bg::before,
        .page-bg::after,
        section.content::before,
        section.content::after,
        .breadcrumb-area::before,
        .breadcrumb-area::after {
            content: none !important;
            display: none !important;
        }

        /* 4) Clear ONLY content backgrounds (keep layout intact) */
        .page-bg,
        .page-bg .container,
        section.content,
        section.content .container {
            background: transparent !important;
            background-image: none !important;
        }
        /* End Update A1XX2 by tony 14/1/2026 */