3060	
  3061	
  3062	
  3063	/* =========================================================
  3064	   ZRX CATEGORY BORDER GAP FIX — FINAL
  3065	   Adds clean inset from the outer red product-panel border.
  3066	   Product cards/images are NOT touched.
  3067	   ========================================================= */
  3068	@media screen and (min-width: 992px) {
  3069	
  3070	    #zrx_pos_2026 #featured_products_box + .row.tw-mb-1 {
  3071	        margin-top:8px !important;
  3072	        margin-left:10px !important;
  3073	        margin-right:10px !important;
  3074	        margin-bottom:8px !important;
  3075	        width:calc(100% - 20px) !important;
  3076	        max-width:calc(100% - 20px) !important;
  3077	        box-sizing:border-box !important;
  3078	    }
  3079	
  3080	    #zrx_pos_2026 .zrx-product-tools {
  3081	        margin-left:10px !important;
  3082	        margin-right:10px !important;
  3083	        width:calc(100% - 20px) !important;
  3084	        max-width:calc(100% - 20px) !important;
  3085	        box-sizing:border-box !important;
  3086	    }
  3087	}
  3088	
  3089	
  3090	
  3091	/* =====================================================================
  3092	   ZRX MOBILE FERRARI POS — RESPONSIVE PATCH
  3093	   Desktop rules are untouched. Only <= 991px.
  3094	   ===================================================================== */
  3095	@media screen and (max-width: 991px) {
  3096	    html, body {
  3097	        width:100% !important;
  3098	        min-width:0 !important;
  3099	        height:auto !important;
  3100	        overflow-x:hidden !important;
  3101	        overflow-y:auto !important;
  3102	        background:#050608 !important;
  3103	    }
  3104	
  3105	    body .wrapper,
  3106	    body .content-wrapper {
  3107	        width:100% !important;
  3108	        min-width:0 !important;
  3109	        height:auto !important;
  3110	        min-height:100vh !important;
  3111	        overflow:visible !important;
  3112	        margin:0 !important;
  3113	        background:#050608 !important;
  3114	    }
  3115	
  3116	    /* HEADER: keep it usable instead of squeezing desktop header */
  3117	    .pos-header {
  3118	        position:relative !important;
  3119	        width:100% !important;
  3120	        height:auto !important;
  3121	        min-height:0 !important;
  3122	        max-height:none !important;
  3123	        padding:5px 6px !important;
  3124	        overflow:visible !important;
  3125	        background:#050608 !important;
  3126	    }
  3127	
  3128	    .pos-header > div,
  3129	    .pos-header .zrx-cockpit-header,
  3130	    .pos-header .zrx-ref-header {
  3131	        width:100% !important;
  3132	        height:auto !important;
  3133	        min-height:72px !important;
  3134	        max-height:none !important;
  3135	        padding:7px !important;
  3136	        display:flex !important;
  3137	        flex-wrap:wrap !important;
  3138	        align-items:center !important;
  3139	        gap:6px !important;
  3140	        overflow:visible !important;
  3141	        box-sizing:border-box !important;
  3142	    }
  3143	
  3144	    .pos-header #pos_header_more_options {
  3145	        width:100% !important;
  3146	        flex:1 1 100% !important;
  3147	        display:flex !important;
  3148	        flex-wrap:nowrap !important;
  3149	        gap:5px !important;
  3150	        overflow-x:auto !important;
  3151	        overflow-y:hidden !important;
  3152	        scrollbar-width:none !important;
  3153	        -webkit-overflow-scrolling:touch;
  3154	    }
  3155	    .pos-header #pos_header_more_options::-webkit-scrollbar { display:none !important; }
  3156	
  3157	    .pos-header #pos_header_more_options > a,
  3158	    .pos-header #pos_header_more_options > button {
  3159	        flex:0 0 43px !important;
  3160	        width:43px !important;
  3161	        min-width:43px !important;
  3162	        height:43px !important;
  3163	        min-height:43px !important;
  3164	        padding:0 !important;
  3165	    }
  3166	
  3167	    .pos-header #add_expense {
  3168	        flex:0 0 auto !important;
  3169	        width:auto !important;
  3170	        min-width:112px !important;
  3171	        padding:0 12px !important;
  3172	        white-space:nowrap !important;
  3173	    }
  3174	
  3175	    /* MAIN: one clean column. Left first, catalogue underneath. */
  3176	    #zrx_pos_2026 {
  3177	        width:100% !important;
  3178	        height:auto !important;
  3179	        min-height:0 !important;
  3180	        max-height:none !important;
  3181	        padding:5px 7px 126px !important;
  3182	        overflow:visible !important;
  3183	        box-sizing:border-box !important;
  3184	    }
  3185	
  3186	    #zrx_pos_2026 > .row.mb-12,
  3187	    #zrx_pos_2026 > .row.mb-12 > .col-md-12,
  3188	    #zrx_pos_2026 > .row.mb-12 > .col-md-12 > .row {
  3189	        width:100% !important;
  3190	        height:auto !important;
  3191	        min-height:0 !important;
  3192	        max-height:none !important;
  3193	        margin:0 !important;
  3194	        padding:0 !important;
  3195	        display:block !important;
  3196	        overflow:visible !important;
  3197	    }
  3198	
  3199	    #zrx_pos_2026 > .row.mb-12 > .col-md-12 > .row > div {
  3200	        display:block !important;
  3201	        width:100% !important;
  3202	        max-width:100% !important;
  3203	        min-width:0 !important;
  3204	        height:auto !important;
  3205	        min-height:0 !important;
  3206	        max-height:none !important;
  3207	        margin:0 0 9px !important;
  3208	        padding:0 !important;
  3209	        float:none !important;
  3210	    }
  3211	
  3212	    #zrx_pos_2026 > .row.mb-12 > .col-md-12 > .row > div:first-child > div,
  3213	    #zrx_pos_2026 > .row.mb-12 > .col-md-12 > .row > div:nth-child(2) {
  3214	        width:100% !important;
  3215	        max-width:100% !important;
  3216	        height:auto !important;
  3217	        min-height:0 !important;
  3218	        max-height:none !important;
  3219	        overflow:visible !important;
  3220	        box-sizing:border-box !important;
  3221	    }
  3222	
  3223	    #zrx_pos_2026 .box-body {
  3224	        height:auto !important;
  3225	        min-height:0 !important;
  3226	        max-height:none !important;
  3227	        overflow:visible !important;
  3228	        padding:7px !important;
  3229	    }
  3230	
  3231	    /* POS form controls: 2 columns on tablet, 1 on narrow phones. */
  3232	    #zrx_pos_2026 .box-body > .row {
  3233	        width:auto !important;
  3234	        height:auto !important;
  3235	        margin-left:-4px !important;
  3236	        margin-right:-4px !important;
  3237	        display:flex !important;
  3238	        flex-wrap:wrap !important;
  3239	    }
  3240	
  3241	    #zrx_pos_2026 .box-body > .row > [class*="col-"] {
  3242	        min-width:0 !important;
  3243	        padding-left:4px !important;
  3244	        padding-right:4px !important;
  3245	    }
  3246	
  3247	    #zrx_pos_2026 .form-control,
  3248	    #zrx_pos_2026 .select2-selection,
  3249	    #restaurant_order_type_button,
  3250	    #open_live_tables_button {
  3251	        min-height:44px !important;
  3252	        height:44px !important;
  3253	    }
  3254	
  3255	    /* Cart stays inside its panel; only the table itself may scroll sideways. */
  3256	    #zrx_pos_2026 .pos_product_div {
  3257	        width:100% !important;
  3258	        height:330px !important;
  3259	        min-height:330px !important;
  3260	        max-height:330px !important;
  3261	        overflow:auto !important;
  3262	        -webkit-overflow-scrolling:touch;
  3263	    }
  3264	
  3265	    #zrx_pos_2026 #pos_table {
  3266	        min-width:610px !important;
  3267	    }
  3268	
  3269	    #zrx_pos_2026 .pos_product_div.zrx-empty:before {
  3270	        inset:42px 8% 76px !important;
  3271	        background-size:contain !important;
  3272	    }
  3273	
  3274	    #zrx_pos_2026 .pos_product_div.zrx-empty:after {
  3275	        bottom:18px !important;
  3276	        font-size:15px !important;
  3277	        line-height:1.45 !important;
  3278	    }
  3279	
  3280	    /* CATEGORY / BRAND: touch the catalogue frame like reference. */
  3281	    #zrx_pos_2026 #product_category_div,
  3282	    #zrx_pos_2026 #product_brand_div {
  3283	        width:50% !important;
  3284	        float:left !important;
  3285	        padding:0 4px !important;
  3286	    }
  3287	
  3288	    #zrx_pos_2026 label[for="category"],
  3289	    #zrx_pos_2026 label[for="brand"],
  3290	    #zrx_pos_2026 label[for="my-drawer-4"],
  3291	    #zrx_pos_2026 label[for="my-drawer-brand"] {
  3292	        width:100% !important;
  3293	        max-width:100% !important;
  3294	        min-height:44px !important;
  3295	        height:44px !important;
  3296	        margin:0 !important;
  3297	        border-radius:9px !important;
  3298	    }
  3299	
  3300	    .zrx-product-tools {
  3301	        width:100% !important;
  3302	        grid-template-columns:minmax(0,1fr) auto auto 42px 42px !important;
  3303	        gap:5px !important;
  3304	        margin:7px 0 !important;
  3305	    }
  3306	
  3307	    .zrx-tool-search,
  3308	    .zrx-tool-btn,
  3309	    .zrx-view-btn {
  3310	        height:42px !important;
  3311	        min-height:42px !important;
  3312	    }
  3313	
  3314	    /* Ferrari catalogue: 3 cards/row on normal phones. */
  3315	    #zrx_pos_2026 #product_list_body {
  3316	        display:flex !important;
  3317	        flex-wrap:wrap !important;
  3318	        width:100% !important;
  3319	        align-content:flex-start !important;
  3320	    }
  3321	
  3322	    #zrx_pos_2026 #product_list_body .product_list {
  3323	        width:33.333333% !important;
  3324	        max-width:33.333333% !important;
  3325	        flex:0 0 33.333333% !important;
  3326	        padding:4px !important;
  3327	        float:none !important;
  3328	    }
  3329	
  3330	    #zrx_pos_2026 #product_list_body .product_box {
  3331	        width:100% !important;
  3332	        height:150px !important;
  3333	        margin:0 !important;
  3334	    }
  3335	
  3336	    /* IMPORTANT: don't paint product pictures white. */
  3337	    #zrx_pos_2026 #product_list_body .image-container {
  3338	        height:72px !important;
  3339	        margin:5px !important;
  3340	        background:transparent !important;
  3341	        background-color:transparent !important;
  3342	    }
  3343	
  3344	    #zrx_pos_2026 #product_list_body .image-container img,
  3345	    #zrx_pos_2026 #product_list_body .product_box img {
  3346	        max-width:100% !important;
  3347	        max-height:100% !important;
  3348	        object-fit:contain !important;
  3349	        background:transparent !important;
  3350	    }
  3351	
  3352	    #zrx_pos_2026 #product_list_body .text_div {
  3353	        height:68px !important;
  3354	        overflow:hidden !important;
  3355	    }
  3356	
  3357	    /* Bottom actions: one horizontal Ferrari deck, swipe when needed. */
  3358	    .pos-form-actions {
  3359	        position:fixed !important;
  3360	        left:6px !important;
  3361	        right:6px !important;
  3362	        bottom:0 !important;
  3363	        width:auto !important;
  3364	        height:108px !important;
  3365	        min-height:108px !important;
  3366	        max-height:108px !important;
  3367	        padding:5px !important;
  3368	        overflow-x:auto !important;
  3369	        overflow-y:hidden !important;
  3370	        z-index:2147482000 !important;
  3371	        border-radius:16px 16px 0 0 !important;
  3372	        -webkit-overflow-scrolling:touch;
  3373	        scrollbar-width:none !important;
  3374	    }
  3375	    .pos-form-actions::-webkit-scrollbar { display:none !important; }
  3376	
  3377	    .pos-form-actions > div {
  3378	        width:max-content !important;
  3379	        min-width:max-content !important;
  3380	        height:96px !important;
  3381	        min-height:96px !important;
  3382	        max-height:96px !important;
  3383	        display:flex !important;
  3384	        flex-wrap:nowrap !important;
  3385	        align-items:center !important;
  3386	        gap:6px !important;
  3387	        padding:4px !important;
  3388	    }
  3389	
  3390	    .pos-form-actions button,
  3391	    .pos-form-actions a {
  3392	        flex:0 0 auto !important;
  3393	    }
  3394	
  3395	    .pos-form-actions #total_payable {
  3396	        min-width:78px !important;
  3397	        min-height:66px !important;
  3398	        max-height:66px !important;
  3399	        font-size:22px !important;
  3400	    }
  3401	
  3402	    /* Order type popup must fit the phone viewport. */
  3403	    #restaurant_order_type_modal .zrx-order-dialog {
  3404	        top:50vh !important;
  3405	        width:calc(100vw - 20px) !important;
  3406	        max-width:calc(100vw - 20px) !important;
  3407	        max-height:calc(100vh - 20px) !important;
  3408	    }
  3409	}
  3410	
  3411	@media screen and (max-width: 575px) {
  3412	    #zrx_pos_2026 { padding-left:5px !important; padding-right:5px !important; }
  3413	
  3414	    #zrx_pos_2026 .box-body > .row > [class*="col-"] {
  3415	        width:100% !important;
  3416	        max-width:100% !important;
  3417	        flex:0 0 100% !important;
  3418	    }
  3419	
  3420	    #zrx_pos_2026 #product_category_div,
  3421	    #zrx_pos_2026 #product_brand_div {
  3422	        width:50% !important;
  3423	        max-width:50% !important;
  3424	        flex:0 0 50% !important;
  3425	    }
  3426	
  3427	    .zrx-product-tools {
  3428	        grid-template-columns:minmax(0,1fr) 42px 42px !important;
  3429	    }
  3430	
  3431	    #zrx_filter_btn,
  3432	    #zrx_sort_btn {
  3433	        display:none !important;
  3434	    }
  3435	
  3436	    #zrx_pos_2026 #product_list_body .product_list {
  3437	        width:33.333333% !important;
  3438	        max-width:33.333333% !important;
  3439	        flex-basis:33.333333% !important;
  3440	        padding:3px !important;
  3441	    }
  3442	
  3443	    #zrx_pos_2026 #product_list_body .product_box {
  3444	        height:142px !important;
  3445	    }
  3446	
  3447	    #zrx_pos_2026 #product_list_body .image-container {
  3448	        height:67px !important;
  3449	    }
  3450	
  3451	    #zrx_pos_2026 #product_list_body .text_div {
  3452	        height:65px !important;
  3453	        padding:0 3px 4px !important;
  3454	    }
  3455	
  3456	    #zrx_pos_2026 #product_list_body .product_box small {
  3457	        font-size:9px !important;
  3458	        line-height:1.15 !important;
  3459	    }
  3460	
  3461	    #restaurant_order_type_modal .zrx-order-body [class*="col-"] {
  3462	        width:100% !important;
  3463	        float:none !important;
  3464	    }
  3465