CREATE_MEDIA 429: @media(max-width:1100px){#zrx_pos_2026 .product_list{width:25%!important}} 440: @media print{html,body,.content-wrapper{background:#fff!important}.pos-header,.pos-form-actions{display:none!important}} 661:@media (min-width: 1101px) { 683:@media (max-width: 1100px) { 731:@media screen and (min-width: 992px) { 1144:@media screen and (min-width: 992px) and (max-width: 1450px) and (max-height: 760px) { 1281:@media screen and (min-width: 992px) { 1367:@media screen and (min-width: 992px) and (max-height: 760px) { 1386:@media screen and (min-width: 992px) { 1447:@media screen and (min-width: 992px) and (max-height: 760px) { 1460:@media print { 1527:@media screen and (min-width: 992px) { 1883:@media screen and (max-width:991px){ 1898:@media screen and (min-width: 1180px) { 2271:@media screen and (min-width:1180px) and (max-width:1299px){ 2298:@media screen and (min-width: 1180px) { 2513:@media screen and (min-width:1180px) and (max-width:1400px){ 2582:@media screen and (min-width:1180px) { 2782:@media screen and (min-width:1180px) { 2838:@media screen and (min-width:1180px) and (max-width:1400px){ 2885:@media screen and (min-width:1180px){ 2981:@media screen and (min-width: 992px) { 3068:@media screen and (min-width: 992px) { 3095:@media screen and (max-width: 991px) { 3411:@media screen and (max-width: 575px) { 3479:@media screen and (min-width: 992px) { 3521:@media screen and (min-width: 992px) and (max-width: 1450px) and (max-height: 760px) { 3536:@media screen and (min-width:992px){ 3626:@media screen and (min-width:992px){ 3709:@media screen and (min-width:992px){ 3799:@media screen and (min-width:992px) { 3864:@media screen and (min-width:992px) { 3908:@media screen and (min-width:992px) { 3961:@media screen and (min-width:992px) { 4010:@media screen and (min-width:992px) { 4081:@media screen and (min-width:992px) and (max-width:1450px) and (max-height:760px) { 4104:@media screen and (min-width:992px) { 4147:@media screen and (min-width:992px) and (max-width:1450px) and (max-height:760px) { 4169:@media screen and (min-width:992px) { 4231:@media screen and (min-width:992px) and (max-width:1450px) and (max-height:760px) { CREATE_LAST 3860 /* ================================================================ 3861 ZRX ONE-SHOT LEFT CART FIX 3862 LEFT CART ONLY — right products/header/footer untouched 3863 ================================================================ */ 3864 @media screen and (min-width:992px) { 3865 #zrx_pos_2026 .pos_product_div { 3866 position:relative !important; 3867 min-height:220px !important; 3868 max-height:none !important; 3869 overflow-y:auto !important; 3870 overflow-x:hidden !important; 3871 scrollbar-gutter:stable !important; 3872 margin-bottom:0 !important; 3873 3874 /* Ferrari always remains in free cart space */ 3875 background-color:#07080a !important; 3876 background-image: 3877 url('{{ asset('img/ferrari-pos-car.png') }}'), 3878 radial-gradient(ellipse at 50% 70%,rgba(225,6,0,.24),transparent 46%) !important; 3879 background-repeat:no-repeat,no-repeat !important; 3880 background-position:center 68%,center center !important; 3881 background-size:min(62%,460px) auto,100% 100% !important; 3882 } 3883 3884 #zrx_pos_2026 .pos_product_div::before, 3885 #zrx_pos_2026 .pos_product_div::after, 3886 #zrx_pos_2026 .pos_product_div.zrx-empty::before, 3887 #zrx_pos_2026 .pos_product_div.zrx-empty::after, 3888 #zrx_pos_2026 #zrx-ferrari-empty-art { 3889 content:none !important; 3890 display:none !important; 3891 } 3892 3893 #zrx_pos_2026 .pos_product_div #pos_table { 3894 position:relative !important; 3895 z-index:2 !important; 3896 width:100% !important; 3897 margin-bottom:0 !important; 3898 background:transparent !important; 3899 } 3900 } 3901 3902 3903 3904 /* ================================================================ 3905 ZRX RIGHT PANEL AUTO-HEIGHT — RIGHT SIDE ONLY 3906 Left cart / Ferrari / header / footer untouched. 3907 ================================================================ */ 3908 @media screen and (min-width:992px) { 3909 3910 /* Right cockpit column stretches to the available measured height */ 3911 #zrx_pos_2026 > form#add_pos_sell_form 3912 > .row.mb-12 > .col-md-12 > .row > div:nth-child(2) { 3913 height: var(--zrx-right-h, auto) !important; 3914 min-height: var(--zrx-right-h, 0) !important; 3915 max-height: var(--zrx-right-h, none) !important; 3916 display:flex !important; 3917 flex-direction:column !important; 3918 overflow:hidden !important; 3919 } 3920 3921 /* Keep top controls fixed; product area takes all remaining space */ 3922 #zrx_pos_2026 > form#add_pos_sell_form 3923 > .row.mb-12 > .col-md-12 > .row > div:nth-child(2) > *:not(:last-child) { 3924 flex:0 0 auto !important; 3925 } 3926 3927 #zrx_pos_2026 > form#add_pos_sell_form 3928 > .row.mb-12 > .col-md-12 > .row > div:nth-child(2) > .row:last-child { 3929 flex:1 1 0% !important; 3930 min-height:0 !important; 3931 height:auto !important; 3932 overflow:hidden !important; 3933 margin-bottom:0 !important; 3934 } 3935 3936 #zrx_pos_2026 > form#add_pos_sell_form 3937 > .row.mb-12 > .col-md-12 > .row > div:nth-child(2) 3938 > .row:last-child > .col-md-12:first-child { 3939 height:100% !important; 3940 min-height:0 !important; 3941 overflow:hidden !important; 3942 } 3943 3944 #zrx_pos_2026 #product_list_body { 3945 height:100% !important; 3946 min-height:0 !important; 3947 max-height:none !important; 3948 overflow-y:auto !important; 3949 overflow-x:hidden !important; 3950 align-content:flex-start !important; 3951 scrollbar-gutter:stable !important; 3952 } 3953 } 3954 3955 3956 3957 /* ================================================================ 3958 ZRX RIGHT PRODUCT SCROLL — FOOTER SAFE FINAL 3959 RIGHT SIDE ONLY. LEFT CART/FERRARI/HEADER/FOOTER UNTOUCHED. 3960 ================================================================ */ 3961 @media screen and (min-width:992px) { 3962 3963 /* Stop old overflow:visible rules from leaking products below panel */ 3964 #zrx_pos_2026 > form#add_pos_sell_form 3965 > .row.mb-12 > .col-md-12 > .row > div:nth-child(2) { 3966 overflow:hidden !important; 3967 min-height:0 !important; 3968 } 3969 3970 /* Actual scroll viewport */ 3971 #zrx_pos_2026 #product_list_body { 3972 min-height:0 !important; 3973 max-height:none !important; 3974 overflow-y:scroll !important; 3975 overflow-x:hidden !important; 3976 overscroll-behavior:contain !important; 3977 scrollbar-gutter:stable !important; 3978 padding-bottom:12px !important; 3979 box-sizing:border-box !important; 3980 } 3981 3982 #zrx_pos_2026 #product_list_body::-webkit-scrollbar { 3983 width:10px !important; 3984 } 3985 3986 #zrx_pos_2026 #product_list_body::-webkit-scrollbar-track { 3987 background:#08090b !important; 3988 border-left:1px solid #30343a !important; 3989 border-radius:10px !important; 3990 } 3991 3992 #zrx_pos_2026 #product_list_body::-webkit-scrollbar-thumb { 3993 background:linear-gradient(180deg,#e10600,#6b0300) !important; 3994 border:2px solid #08090b !important; 3995 border-radius:10px !important; 3996 } 3997 3998 #zrx_pos_2026 #product_list_body::-webkit-scrollbar-thumb:hover { 3999 background:linear-gradient(180deg,#ff3b33,#9b0500) !important; 4000 } 4001 } 4002 4003 4004 4005 /* ================================================================ 4006 ZRX SUMMARY STRIP — OWN DESIGN / SEPARATE SECTION 4007 Sits between LEFT+RIGHT work panels and the bottom payment deck. 4008 Does NOT live inside/resize either panel visually. 4009 ================================================================ */ 4010 @media screen and (min-width:992px) { 4011 #zrx_pos_2026 .pos_form_totals { 4012 display:block !important; 4013 position:fixed !important; 4014 left:12px !important; 4015 right:12px !important; 4016 bottom:122px !important; 4017 width:auto !important; 4018 height:50px !important; 4019 min-height:50px !important; 4020 max-height:50px !important; 4021 margin:0 !important; 4022 padding:0 14px !important; 4023 z-index:1034 !important; 4024 4025 color:#fff !important; 4026 background: 4027 linear-gradient(90deg,#08090b 0%,#111419 48%,#08090b 100%) !important; 4028 border:1px solid #3b4048 !important; 4029 border-left:3px solid #e10600 !important; 4030 border-right:3px solid #e10600 !important; 4031 border-radius:10px !important; 4032 box-shadow:0 0 14px rgba(225,6,0,.18), inset 0 1px rgba(255,255,255,.035) !important; 4033 overflow:hidden !important; 4034 box-sizing:border-box !important; 4035 } 4036 4037 #zrx_pos_2026 .pos_form_totals table { 4038 width:100% !important; 4039 height:100% !important; 4040 margin:0 !important; 4041 table-layout:fixed !important; 4042 border-collapse:collapse !important; 4043 background:transparent !important; 4044 } 4045 4046 #zrx_pos_2026 .pos_form_totals tbody, 4047 #zrx_pos_2026 .pos_form_totals tr { 4048 height:100% !important; 4049 background:transparent !important; 4050 } 4051 4052 #zrx_pos_2026 .pos_form_totals td { 4053 height:100% !important; 4054 padding:4px 12px !important; 4055 vertical-align:middle !important; 4056 white-space:nowrap !important; 4057 border:0 !important; 4058 color:#dfe4ea !important; 4059 background:transparent !important; 4060 font-size:12px !important; 4061 line-height:1.2 !important; 4062 } 4063 4064 #zrx_pos_2026 .pos_form_totals td + td { 4065 border-left:1px solid #292e35 !important; 4066 } 4067 4068 #zrx_pos_2026 .pos_form_totals b, 4069 #zrx_pos_2026 .pos_form_totals strong { 4070 color:#fff !important; 4071 font-weight:900 !important; 4072 } 4073 4074 #zrx_pos_2026 .pos_form_totals span, 4075 #zrx_pos_2026 .pos_form_totals label, 4076 #zrx_pos_2026 .pos_form_totals i { 4077 color:inherit !important; 4078 } 4079 } 4080 4081 @media screen and (min-width:992px) and (max-width:1450px) and (max-height:760px) { 4082 #zrx_pos_2026 .pos_form_totals { 4083 left:8px !important; 4084 right:8px !important; 4085 bottom:102px !important; 4086 height:42px !important; 4087 min-height:42px !important; 4088 max-height:42px !important; 4089 padding:0 9px !important; 4090 } 4091 4092 #zrx_pos_2026 .pos_form_totals td { 4093 padding:3px 8px !important; 4094 font-size:10px !important; 4095 } 4096 } 4097 4098 4099 4100 /* ================================================================ 4101 ZRX SUMMARY STRIP — 2 ROW FIX 4102 Keeps the strip independent; both rows fit inside it. 4103 ================================================================ */ 4104 @media screen and (min-width:992px) { 4105 #zrx_pos_2026 .pos_form_totals { 4106 height:68px !important; 4107 min-height:68px !important; 4108 max-height:68px !important; 4109 bottom:122px !important; 4110 padding:4px 12px !important; 4111 overflow:hidden !important; 4112 } 4113 4114 #zrx_pos_2026 .pos_form_totals table { 4115 width:100% !important; 4116 height:100% !important; 4117 table-layout:fixed !important; 4118 margin:0 !important; 4119 } 4120 4121 #zrx_pos_2026 .pos_form_totals tbody { 4122 height:100% !important; 4123 } 4124 4125 /* IMPORTANT: two rows share the strip instead of each row taking 100% */ 4126 #zrx_pos_2026 .pos_form_totals tr { 4127 height:50% !important; 4128 min-height:0 !important; 4129 } 4130 4131 #zrx_pos_2026 .pos_form_totals td { 4132 height:auto !important; 4133 padding:2px 12px !important; 4134 vertical-align:middle !important; 4135 white-space:nowrap !important; 4136 line-height:1.15 !important; 4137 font-size:12px !important; 4138 border-top:0 !important; 4139 border-bottom:0 !important; 4140 } 4141 4142 #zrx_pos_2026 .pos_form_totals tr:first-child td { 4143 border-bottom:1px solid #242930 !important; 4144 } 4145 } 4146 4147 @media screen and (min-width:992px) and (max-width:1450px) and (max-height:760px) { 4148 #zrx_pos_2026 .pos_form_totals { 4149 height:58px !important; 4150 min-height:58px !important; 4151 max-height:58px !important; 4152 bottom:102px !important; 4153 padding:3px 9px !important; 4154 } 4155 4156 #zrx_pos_2026 .pos_form_totals td { 4157 padding:1px 8px !important; 4158 font-size:10px !important; 4159 } 4160 } 4161 4162 4163 4164 /* ================================================================ 4165 ZRX SUMMARY STRIP — SINGLE LINE FINAL 4166 Items + Total + Discount + Order Tax + Shipping in ONE row. 4167 Left/right panels and footer remain untouched. 4168 ================================================================ */ 4169 @media screen and (min-width:992px) { 4170 #zrx_pos_2026 .pos_form_totals { 4171 height:46px !important; 4172 min-height:46px !important; 4173 max-height:46px !important; 4174 bottom:122px !important; 4175 padding:0 12px !important; 4176 overflow:hidden !important; 4177 } 4178 4179 #zrx_pos_2026 .pos_form_totals table, 4180 #zrx_pos_2026 .pos_form_totals tbody { 4181 display:block !important; 4182 width:100% !important; 4183 height:100% !important; 4184 margin:0 !important; 4185 } 4186 4187 #zrx_pos_2026 .pos_form_totals tbody { 4188 display:flex !important; 4189 flex-direction:row !important; 4190 align-items:center !important; 4191 justify-content:space-between !important; 4192 gap:0 !important; 4193 } 4194 4195 #zrx_pos_2026 .pos_form_totals tr { 4196 display:contents !important; 4197 height:auto !important; 4198 } 4199 4200 #zrx_pos_2026 .pos_form_totals td { 4201 display:flex !important; 4202 align-items:center !important; 4203 justify-content:flex-start !important; 4204 flex:1 1 20% !important; 4205 width:auto !important; 4206 height:100% !important; 4207 min-width:0 !important; 4208 padding:0 14px !important; 4209 margin:0 !important; 4210 vertical-align:middle !important; 4211 white-space:nowrap !important; 4212 overflow:hidden !important; 4213 text-overflow:ellipsis !important; 4214 border:0 !important; 4215 border-left:1px solid #292e35 !important; 4216 background:transparent !important; 4217 font-size:12px !important; 4218 line-height:1 !important; 4219 box-sizing:border-box !important; 4220 } 4221 4222 #zrx_pos_2026 .pos_form_totals td:first-child { 4223 border-left:0 !important; 4224 } 4225 4226 #zrx_pos_2026 .pos_form_totals tr:first-child td { 4227 border-bottom:0 !important; 4228 } 4229 } 4230 4231 @media screen and (min-width:992px) and (max-width:1450px) and (max-height:760px) { 4232 #zrx_pos_2026 .pos_form_totals { 4233 height:40px !important; 4234 min-height:40px !important; 4235 max-height:40px !important; 4236 bottom:102px !important; 4237 padding:0 8px !important; 4238 } 4239 4240 #zrx_pos_2026 .pos_form_totals td { 4241 padding:0 8px !important; 4242 font-size:10px !important; 4243 } 4244 } 4245 4246 4247 4248 /* New cart item focus — LEFT CART ONLY */ 4249 #zrx_pos_2026 #pos_table tbody tr.zrx-new-product-focus td { 4250 box-shadow: inset 0 0 0 1px rgba(225,6,0,.70), 4251 inset 0 0 18px rgba(225,6,0,.10) !important; 4252 } 4253 4254 4255 4256 /* ================================================================ 4257 ZRX DELIVERY DETAILS — INSIDE LEFT CART SCROLL 4258 Delivery stays AFTER cart items and scrolls downward with them. 4259 ================================================================ */ 4260 #zrx_pos_2026 .pos_product_div #delivery_inline_fields { 4261 position:static !important; 4262 float:none !important; 4263 clear:both !important; 4264 width:100% !important; 4265 max-width:100% !important; 4266 height:auto !important; 4267 min-height:0 !important; 4268 margin:10px 0 14px !important; 4269 z-index:3 !important; 4270 box-sizing:border-box !important; 4271 } 4272 4273 #zrx_pos_2026 .pos_product_div { 4274 overflow-y:auto !important; 4275 overflow-x:hidden !important; 4276 scroll-behavior:smooth !important; 4277 } 4278 4279 /* Prevent delivery block from being pinned/sticky by any old rule */ 4280 #zrx_pos_2026 #delivery_inline_fields, 4281 #zrx_pos_2026 #delivery_inline_fields * { 4282 top:auto; 4283 bottom:auto; 4284 } 4285 4286 4287 4288 /* Strong visual cue for the newly-added cart row */ 4289 #zrx_pos_2026 #pos_table tbody tr.zrx-new-product-focus td { 4290 box-shadow: 4291 inset 0 0 0 1px rgba(225,6,0,.85), 4292 inset 0 0 20px rgba(225,6,0,.14) !important; 4293 transition:box-shadow .2s ease !important; 4294 } 4295 4296 \n/* ZRX exact new-item focus cue */ 4297 #zrx_pos_2026 #pos_table tbody tr.zrx-new-product-focus td { 4298 box-shadow: inset 0 0 0 1px rgba(225,6,0,.92), 4299 inset 0 0 18px rgba(225,6,0,.13) !important; 4300 }\n 4301 4302 @stop 4303 4304 @section('javascript') 4305