/* Minification failed. Returning unminified contents. (122,21): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (221,21): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (236,21): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (247,32): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (259,21): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (953,21): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (970,21): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (988,21): run-time error CSS1039: Token not allowed after unary operator: '-vu-blue' (1019,21): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (1088,21): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (1180,21): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (1723,26): run-time error CSS1039: Token not allowed after unary operator: '-vu-blue' (1866,21): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (1884,21): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (1905,21): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (2359,26): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (2389,21): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (2660,28): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (2679,21): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (2687,21): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (2702,21): run-time error CSS1039: Token not allowed after unary operator: '-vu-melon' (2749,26): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (2804,26): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (2841,32): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (2858,37): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (2859,39): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (2867,37): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (2878,38): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (2895,28): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (2952,26): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (2994,26): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (3022,21): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (3029,21): run-time error CSS1039: Token not allowed after unary operator: '-vu-melon' (3045,21): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (3060,32): run-time error CSS1039: Token not allowed after unary operator: '-vu-purple-light' (3148,21): run-time error CSS1039: Token not allowed after unary operator: '-vu-purple' (3158,21): run-time error CSS1039: Token not allowed after unary operator: '-vu-purple' (3169,32): run-time error CSS1039: Token not allowed after unary operator: '-vu-purple' (3206,21): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (3409,21): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (3435,32): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (3532,21): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (3540,21): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (3546,21): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (3727,32): run-time error CSS1039: Token not allowed after unary operator: '-vu-melon' (3767,22): run-time error CSS1039: Token not allowed after unary operator: '-vu-blue' (3769,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-white' (3772,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (3829,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-white' (3835,22): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (3836,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-white' (3850,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-purple' (3854,22): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (3855,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-white' (3867,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-white' (3881,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-white' (3893,28): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (3936,46): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (3954,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (3958,35): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (3977,22): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (3997,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (4083,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (4097,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (4111,28): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (4130,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (4137,22): run-time error CSS1039: Token not allowed after unary operator: '-vu-white' (4147,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (4157,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-blue' (4164,22): run-time error CSS1039: Token not allowed after unary operator: '-vu-white' (4165,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (4172,22): run-time error CSS1039: Token not allowed after unary operator: '-vu-white' (4184,22): run-time error CSS1039: Token not allowed after unary operator: '-vu-white' (4193,32): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (4200,36): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (4204,36): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (4209,36): run-time error CSS1039: Token not allowed after unary operator: '-vu-white' (4221,29): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (4255,22): run-time error CSS1039: Token not allowed after unary operator: '-vu-white' (4256,30): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (4257,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (4270,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (4277,24): run-time error CSS1039: Token not allowed after unary operator: '-vu-blue' (4416,28): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (4419,22): run-time error CSS1039: Token not allowed after unary operator: '-white' (4438,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (4466,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (4472,29): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (4488,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (4493,27): run-time error CSS1030: Expected identifier, found '.' (4493,38): run-time error CSS1031: Expected selector, found ')' (4493,38): run-time error CSS1025: Expected comma or open brace, found ')' (4544,22): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (4569,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (4580,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (4592,22): run-time error CSS1039: Token not allowed after unary operator: '-vu-alert' (4627,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (4633,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-alert' (4637,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (4645,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-blue' (4654,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-alert' (4658,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (4666,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-blue' (4691,22): run-time error CSS1039: Token not allowed after unary operator: '-aubergine' (4692,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (4697,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (4704,22): run-time error CSS1039: Token not allowed after unary operator: '-var-8-black' (4705,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (4706,28): run-time error CSS1039: Token not allowed after unary operator: '-var-20-black' (4710,22): run-time error CSS1039: Token not allowed after unary operator: '-var-20-black' (4711,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (4717,22): run-time error CSS1039: Token not allowed after unary operator: '-vu-alert' (4718,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (4723,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (4730,22): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (4731,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (4736,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (4748,17): run-time error CSS1039: Token not allowed after unary operator: '-var-57-black' (4754,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (4843,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (4855,17): run-time error CSS1039: Token not allowed after unary operator: '-var-8-black' (4875,28): run-time error CSS1039: Token not allowed after unary operator: '-var-20-black' (4876,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (4888,22): run-time error CSS1039: Token not allowed after unary operator: '-var-3-black' (4889,24): run-time error CSS1039: Token not allowed after unary operator: '-vu-blue' (4929,22): run-time error CSS1039: Token not allowed after unary operator: '-aubergine' (4934,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (4942,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (4958,22): run-time error CSS1039: Token not allowed after unary operator: '-white' (4959,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (4972,22): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (4973,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (4988,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (4998,32): run-time error CSS1039: Token not allowed after unary operator: '-var-20-black' (4999,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (5005,21): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (5011,21): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (5019,22): run-time error CSS1039: Token not allowed after unary operator: '-vu-melon' (5030,26): run-time error CSS1039: Token not allowed after unary operator: '-vu-melon-hover' (5065,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (5070,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-melon' (5080,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (5087,21): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (5093,21): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (5101,22): run-time error CSS1039: Token not allowed after unary operator: '-vu-melon' (5112,26): run-time error CSS1039: Token not allowed after unary operator: '-vu-melon-hover' (5119,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (5190,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-purple' (5191,28): run-time error CSS1039: Token not allowed after unary operator: '-vu-melon' (5206,28): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (5213,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (5221,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (5253,21): run-time error CSS1039: Token not allowed after unary operator: '-white' (5274,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-melon' (5280,28): run-time error CSS1039: Token not allowed after unary operator: '-vu-melon-hover' (5301,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (5316,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (5331,22): run-time error CSS1039: Token not allowed after unary operator: '-vu-melon' (5342,26): run-time error CSS1039: Token not allowed after unary operator: '-vu-melon-hover' (5347,22): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (5376,22): run-time error CSS1039: Token not allowed after unary operator: '-vu-melon' (5386,24): run-time error CSS1039: Token not allowed after unary operator: '-vu-melon' (5391,22): run-time error CSS1039: Token not allowed after unary operator: '-vu-melon-hover' (5394,24): run-time error CSS1039: Token not allowed after unary operator: '-vu-melon-hover' (5426,28): run-time error CSS1039: Token not allowed after unary operator: '-var-20-black' (5438,22): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (5445,35): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (5454,35): run-time error CSS1039: Token not allowed after unary operator: '-var-20-black' (5455,34): run-time error CSS1039: Token not allowed after unary operator: '-var-20-black' (5457,17): run-time error CSS1039: Token not allowed after unary operator: '-var-85-black' (5471,22): run-time error CSS1039: Token not allowed after unary operator: '-var-3-black' (5489,28): run-time error CSS1039: Token not allowed after unary operator: '-var-20-black' (5502,24): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (5523,22): run-time error CSS1039: Token not allowed after unary operator: '-vu-melon' (5530,22): run-time error CSS1039: Token not allowed after unary operator: '-vu-melon-hover' (5537,22): run-time error CSS1039: Token not allowed after unary operator: '-var-20-black' (5538,17): run-time error CSS1039: Token not allowed after unary operator: '-var-85-black' (5544,22): run-time error CSS1039: Token not allowed after unary operator: '-var-57-black' (5552,22): run-time error CSS1039: Token not allowed after unary operator: '-vu-melon' (5559,22): run-time error CSS1039: Token not allowed after unary operator: '-vu-melon-hover' (5566,22): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (5580,17): run-time error CSS1039: Token not allowed after unary operator: '-var-57-black' (5588,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (5594,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-melon' (5634,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (5640,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (5650,22): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (5683,21): run-time error CSS1039: Token not allowed after unary operator: '-vu-purple' (5691,21): run-time error CSS1039: Token not allowed after unary operator: '-vu-purple' (5712,28): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (5730,22): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (5743,28): run-time error CSS1039: Token not allowed after unary operator: '-var-20-black' (5747,22): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (5810,1): run-time error CSS1019: Unexpected token, found '@import' (5810,9): run-time error CSS1019: Unexpected token, found 'url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700&display=swap')' (5814,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5815,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5816,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5817,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5818,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5819,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5820,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5821,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5822,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5823,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5824,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5825,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5826,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5828,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5829,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5830,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5831,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5832,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5833,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5834,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5835,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5836,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5837,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5844,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (5847,22): run-time error CSS1039: Token not allowed after unary operator: '-var-3-black' (5854,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (5861,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (5868,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (5875,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (5886,22): run-time error CSS1039: Token not allowed after unary operator: '-var-3-black' (5893,22): run-time error CSS1039: Token not allowed after unary operator: '-vu-blue' (5918,17): run-time error CSS1039: Token not allowed after unary operator: '-black' (5941,17): run-time error CSS1039: Token not allowed after unary operator: '-aubergine' (5975,30): run-time error CSS1039: Token not allowed after unary operator: '-aubergine' (5982,17): run-time error CSS1039: Token not allowed after unary operator: '-aubergine' (5992,28): run-time error CSS1039: Token not allowed after unary operator: '-vu-blue' (6027,17): run-time error CSS1039: Token not allowed after unary operator: '-aubergine' (6066,17): run-time error CSS1039: Token not allowed after unary operator: '-aubergine' (6076,21): run-time error CSS1039: Token not allowed after unary operator: '-black' (6084,22): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (6099,22): run-time error CSS1039: Token not allowed after unary operator: '-vu-white' (6104,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (6147,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (6160,21): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (6166,22): run-time error CSS1039: Token not allowed after unary operator: '-black' (6167,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (6173,36): run-time error CSS1039: Token not allowed after unary operator: '-vu-blue' (6180,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (6186,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-blue' (6191,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (6198,21): run-time error CSS1039: Token not allowed after unary operator: '-vu-blue' (6306,21): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (6409,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-dark-grey' (6415,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (6420,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (6426,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-text-grey' (6432,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-dark-grey' (6439,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-text-grey' (6444,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (6451,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (6457,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-text-grey' (6467,21): run-time error CSS1039: Token not allowed after unary operator: '-vu-purple' (6474,25): run-time error CSS1039: Token not allowed after unary operator: '-vu-text-grey' (6486,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-melon' (6492,22): run-time error CSS1039: Token not allowed after unary operator: '-vu-light-grey' (6493,32): run-time error CSS1039: Token not allowed after unary operator: '-vu-border-grey' (6498,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-text-grey' (6503,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-dark-grey' (6513,22): run-time error CSS1039: Token not allowed after unary operator: '-vu-melon' (6514,24): run-time error CSS1039: Token not allowed after unary operator: '-vu-melon' (6523,22): run-time error CSS1039: Token not allowed after unary operator: '-vu-melon-hover' (6524,24): run-time error CSS1039: Token not allowed after unary operator: '-vu-melon-hover' (6530,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (6634,24): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (6771,24): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (6877,22): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (6929,22): run-time error CSS1030: Expected identifier, found '.' (6929,40): run-time error CSS1031: Expected selector, found ')' (6929,40): run-time error CSS1025: Expected comma or open brace, found ')' (7061,22): run-time error CSS1039: Token not allowed after unary operator: '-melon' (7062,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (7081,22): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (7139,22): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (7265,21): run-time error CSS1039: Token not allowed after unary operator: '-white' (7266,32): run-time error CSS1039: Token not allowed after unary operator: '-white' (7273,30): run-time error CSS1039: Token not allowed after unary operator: '-vu-blue' (7274,32): run-time error CSS1039: Token not allowed after unary operator: '-vu-blue' (7275,25): run-time error CSS1039: Token not allowed after unary operator: '-aubergine' (7296,22): run-time error CSS1039: Token not allowed after unary operator: '-vu-blue' (7383,22): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (7384,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-white' (7399,26): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (7404,26): run-time error CSS1039: Token not allowed after unary operator: '-vu-white' (7405,21): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (7449,28): run-time error CSS1039: Token not allowed after unary operator: '-var-3-black' (7523,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-purple' (7546,28): run-time error CSS1038: Expected hex color, found '#0002' (7589,21): run-time error CSS1039: Token not allowed after unary operator: '-vu-purple' (7600,21): run-time error CSS1039: Token not allowed after unary operator: '-vu-purple' (7611,36): run-time error CSS1039: Token not allowed after unary operator: '-vu-purple' (7621,28): run-time error CSS1038: Expected hex color, found '#0002' (7660,35): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (7670,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (7702,31): run-time error CSS1038: Expected hex color, found '#0001' (7783,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (7823,22): run-time error CSS1039: Token not allowed after unary operator: '-vu-melon' (7824,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (8007,21): run-time error CSS1039: Token not allowed after unary operator: '-vu-purple' (8011,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-purple' (8021,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-grey' (8030,30): run-time error CSS1039: Token not allowed after unary operator: '-vu-purple-light' (8032,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-purple' (8045,28): run-time error CSS1039: Token not allowed after unary operator: '-vu-purple' (8071,24): run-time error CSS1039: Token not allowed after unary operator: '-vu-purple-light' (8113,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-alert' (8120,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-alert' (8132,24): run-time error CSS1039: Token not allowed after unary operator: '-vu-purple' (8140,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-purple' (8147,28): run-time error CSS1039: Token not allowed after unary operator: '-vu-melon' (8148,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-purple' (8160,32): run-time error CSS1039: Token not allowed after unary operator: '-vu-melon-hover' (8164,32): run-time error CSS1039: Token not allowed after unary operator: '-vu-melon-disabled' (8174,21): run-time error CSS1039: Token not allowed after unary operator: '-vu-alert' (8448,21): run-time error CSS1039: Token not allowed after unary operator: '-white' (8476,21): run-time error CSS1039: Token not allowed after unary operator: '-white' (8602,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (8608,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (8666,22): run-time error CSS1039: Token not allowed after unary operator: '-vu-melon' (8678,26): run-time error CSS1039: Token not allowed after unary operator: '-vu-melon-hover' (8686,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-purple-light' (8698,28): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (8711,28): run-time error CSS1039: Token not allowed after unary operator: '-vu-purple-light' (8767,25): run-time error CSS1039: Token not allowed after unary operator: '-vu-purple' (8771,25): run-time error CSS1039: Token not allowed after unary operator: '-vu-purple' (8776,26): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (8800,32): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (8828,22): run-time error CSS1039: Token not allowed after unary operator: '-vu-melon' (8840,26): run-time error CSS1039: Token not allowed after unary operator: '-vu-melon-hover' (8894,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (8902,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (8916,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (8924,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (8949,22): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (8961,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (8967,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (9006,22): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (9039,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (9040,35): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (9053,22): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (9060,24): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (9064,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-blue' (9070,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (9079,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' (9301,22): run-time error CSS1039: Token not allowed after unary operator: '-vu-melon' (9364,17): run-time error CSS1039: Token not allowed after unary operator: '-vu-aubergine' */ /* VUSHOP Mobile Responsive Enhancements */ /* ===== GLOBAL MOBILE STYLES ===== */ @media (max-width: 768px) { /* Ensure proper box sizing */ * { box-sizing: border-box; } /* Prevent horizontal scroll */ body { overflow-x: hidden; } /* Container adjustments */ .container { max-width: 100%; padding-left: 15px; padding-right: 15px; } /* Row margin fixes */ .row { margin-left: -15px; margin-right: -15px; } /* Column padding */ [class*="col-"] { padding-left: 15px; padding-right: 15px; } } /* ===== HOME PAGE MOBILE ===== */ @media (max-width: 768px) { /* Banner section */ .banners-outer { margin-bottom: 20px; display: block !important; visibility: visible !important; opacity: 1 !important; width: 100%; overflow: hidden; min-height: 0; } .banners.carousel { display: block !important; visibility: visible !important; width: 100%; height: auto; min-height: 0; } .banners .carousel-inner { display: block !important; width: 100%; padding: 20px 0; min-height: 0; } .banners .carousel-inner .item { display: none; width: 100%; height: auto; min-height: 0; } .banners .carousel-inner .item.active { display: block !important; min-height: 0; } /* Banner images - ensure they display properly on mobile */ .banners .carousel-inner .item img { width: 100%; height: auto; object-fit: contain; display: block !important; min-height: 0; visibility: visible !important; opacity: 1 !important; } /* Only hide images with empty or missing src attributes */ .banners .carousel-inner .item img[src=""], .banners .carousel-inner .item img:not([src]) { display: none !important; height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; } .banners .carousel-inner .item video { width: 100%; height: auto; object-fit: contain; display: block; } /* Module animations */ .module { padding: 15px 0; } } /* ===== FEATURED PRODUCTS MOBILE ===== */ @media (max-width: 768px) { /* Featured products container */ .featured-products { padding: 30px 0; overflow: hidden; } .featured-prod-title { font-size: 24px; font-weight: 700; text-align: center; margin-bottom: 25px; color: var(--vu-aubergine, #22185e); padding: 0 20px; } /* Wrapper for scroll buttons */ .feature-wrapper { position: relative; width: 100%; padding: 0 10px; } /* Hide scroll buttons on mobile */ .scroll-btn { display: none; } /* Outer container */ .feature-outer { width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; padding: 10px 0; margin: 0 auto; max-width: 100%; } .feature-outer::-webkit-scrollbar { display: none; } /* Inner flex container */ .feature-inner { display: flex; flex-wrap: nowrap; gap: 20px; padding: 0 20px; width: auto; justify-content: flex-start; } /* Individual product card - ONE CARD WIDTH */ .proddiv { flex: 0 0 auto; width: calc(100vw - 80px); max-width: 350px; min-width: 280px; background: #fff; border-radius: 16px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); padding: 20px; text-align: center; transition: all 0.2s; } .proddiv:active { transform: scale(0.98); } /* Product inner wrapper */ .proddivinner { display: flex; flex-direction: column; align-items: center; height: 100%; } /* Product image */ .prodimg { height: 180px; width: 100%; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } .prodimg img { max-width: 100%; max-height: 100%; object-fit: contain; } /* Product name and price */ .prodname { display: flex; flex-direction: column; align-items: center; width: 100%; flex: 1; } .prodname .name { display: block; font-weight: 600; font-size: 16px; line-height: 1.4; color: var(--vu-aubergine, #22185e); min-height: 45px; text-align: center; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-bottom: 12px; } /* Price with line */ .prodname .price { position: relative; font-weight: 700; font-size: 18px; color: var(--vu-aubergine, #22185e); padding-top: 12px; margin-top: auto; width: 100%; } .prodname .price::before { content: ""; display: block; width: 100%; height: 2px; background-color: var(--vu-aubergine, #22185e); margin-bottom: 10px; border-radius: 1px; } /* Scroll hint - SWIPE TO SEE MORE */ .featured-products::after { content: "← Swipe to see more →"; display: block; text-align: center; font-size: 14px; font-weight: 500; color: var(--vu-aubergine, #22185e); margin-top: 20px; padding: 12px; background: rgba(91, 194, 231, 0.1); border-radius: 8px; margin-left: 20px; margin-right: 20px; } } /* ===== CATEGORY PAGE MOBILE ===== */ @media (max-width: 768px) { /* Breadcrumb row */ .breadcrum-border { flex-direction: column; padding: 10px 15px; margin-left: 0 !important; margin-right: 0 !important; } .breadcrumb { margin: 10px 0; font-size: 14px; padding-left: 0; } /* Hide filter dropdown on mobile - it doesn't work properly */ .filter-dropdown-wrapper { display: none !important; visibility: hidden !important; height: 0 !important; overflow: hidden !important; } /* Also hide the filter dropdown column entirely */ .categorypage .breadcrum-border .col-md-5 { display: none !important; } /* Breadcrumb column takes full width */ .categorypage .breadcrum-border .col-md-7 { width: 100% !important; max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } /* Category accordion - make it collapsible on mobile */ .cat-accordion { margin-bottom: 20px; } /* Product grid in categories - CENTER ALIGNED */ .categories-replace { width: 100% !important; padding: 0 !important; margin: 0 !important; max-width: 100% !important; } /* Fix categories container - remove desktop margins/padding */ .categories { width: 100% !important; max-width: 100% !important; padding: 0 15px !important; margin: 0 auto !important; gap: 0 !important; justify-content: center !important; } /* Fix catbody - remove left margin that pushes content off screen */ .catbody { width: 100% !important; max-width: 100% !important; margin: 0 auto !important; margin-left: 0 !important; padding: 10px 0 !important; gap: 12px !important; justify-content: center !important; } /* Product cards - 2 columns centered */ .proddiv { flex: 0 0 calc(50% - 6px) !important; width: calc(50% - 6px) !important; max-width: calc(50% - 6px) !important; margin: 0 !important; } .categories-replace .product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 0; margin: 0 auto; max-width: 100%; } /* Ensure category page column takes full width on mobile */ .categorypage .col-lg-9, .categorypage .col-md-8 { width: 100% !important; padding: 0 !important; margin: 0 !important; } /* Remove padding from vu-main-content container on category pages */ .categorypage .vu-main-content { padding-left: 0 !important; padding-right: 0 !important; } /* Ensure nested container in Categories.cshtml doesn't add extra padding */ .categories-replace .container { padding-left: 0 !important; padding-right: 0 !important; max-width: 100% !important; width: 100% !important; margin: 0 !important; } } /* Category menu mobile toggle */ @media (max-width: 767px) { .cat-accordion { display: none !important; } /* Mobile category toggle button removed - was non-functional */ /* Users navigate categories through the main hamburger menu instead */ } /* ===== PRODUCT DETAIL PAGE MOBILE ===== */ @media (max-width: 768px) { /* Product images */ .prod_det_col1 { margin-bottom: 20px; } .prod_det_img { text-align: center; } .prod_det_img img#imgMain { max-width: 100%; height: auto; max-height: 400px; } /* Product thumbnails */ .prod_det_views { display: flex; overflow-x: auto; gap: 10px; padding: 10px 0; -webkit-overflow-scrolling: touch; } .product-thumb { flex: 0 0 auto; } .product-thumb img { width: 60px; height: 60px; } /* Product info */ .PageHeading { font-size: 22px; line-height: 1.3; margin-bottom: 15px; } .productdetailsprices { font-size: 18px; } /* Add to cart section */ .prod-addtocart { padding: 15px; background: #f8f9fa; border-radius: 8px; margin-top: 20px; } /* Quantity controls */ .quantity-controls { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 15px; } .quantity-controls input { width: 60px; text-align: center; font-size: 16px; } } /* ===== CHECKOUT/CART PAGE MOBILE ===== */ @media (max-width: 768px) { /* Cart items table - convert to cards */ .checkout table.table { display: block; } .checkout table.table thead { display: none; } .checkout table.table tbody { display: block; } .checkout table.table tr { display: block; border: 1px solid #ddd; margin-bottom: 10px; padding: 15px; border-radius: 8px; background: #fff; } .checkout table.table td { display: block; text-align: left; padding: 5px 0; border: none; } .checkout table.table td:before { content: attr(data-label); font-weight: bold; display: inline-block; width: 100px; } /* Cart totals */ .cart-totals { background: #f8f9fa; padding: 20px; border-radius: 8px; margin-top: 20px; } /* Checkout accordion */ .zsaccordion .panel-heading { padding: 15px; font-size: 16px; } .zsaccordion .panel-body { padding: 15px; } /* Prevent accordion sections from overlapping on mobile */ .zsaccordion .panel-collapse { transition: height 0.3s ease, opacity 0.2s ease; overflow: hidden !important; height: 0 !important; opacity: 0; display: none !important; } .zsaccordion .panel-collapse.in { overflow: visible !important; height: auto !important; opacity: 1; display: block !important; } /* Ensure only one section shows at a time on mobile */ .zsaccordion { position: relative; } #collapse1, #collapse2, #collapse3 { clear: both; width: 100%; position: relative; } /* Ensure collapsed panels are completely hidden */ #collapse1:not(.in), #collapse2:not(.in), #collapse3:not(.in) { display: none !important; visibility: hidden !important; height: 0 !important; max-height: 0 !important; overflow: hidden !important; opacity: 0 !important; } /* Ensure active panel is fully visible */ #collapse1.in, #collapse2.in, #collapse3.in { display: block !important; visibility: visible !important; height: auto !important; max-height: none !important; overflow: visible !important; opacity: 1 !important; } /* Hide all form fields in collapsed panels completely */ #collapse1:not(.in) .form-group, #collapse1:not(.in) .form-control, #collapse1:not(.in) label, #collapse1:not(.in) input, #collapse1:not(.in) select, #collapse2:not(.in) .form-group, #collapse2:not(.in) .form-control, #collapse2:not(.in) label, #collapse2:not(.in) input, #collapse2:not(.in) select, #collapse3:not(.in) .form-group, #collapse3:not(.in) .form-control, #collapse3:not(.in) label, #collapse3:not(.in) input, #collapse3:not(.in) select { display: none !important; visibility: hidden !important; height: 0 !important; max-height: 0 !important; overflow: hidden !important; opacity: 0 !important; } /* Ensure panel body content is hidden when collapsed */ .zsaccordion .panel-collapse:not(.in) .panel-body { display: none !important; visibility: hidden !important; height: 0 !important; padding: 0 !important; margin: 0 !important; } /* Show panel body when expanded */ .zsaccordion .panel-collapse.in .panel-body { display: block !important; visibility: visible !important; height: auto !important; padding: 15px !important; } /* Form fields */ .checkout .form-group { margin-bottom: 15px; } .checkout .form-control { font-size: 16px; } /* Fix doubled/overlapping fields in checkout billing info */ .checkoutaddress .row { margin-bottom: 0; display: block; width: 100%; clear: both; } .checkoutaddress .col-md-4 { width: 100% !important; padding-left: 15px; padding-right: 15px; margin-bottom: 20px !important; float: none !important; display: block !important; clear: both; } .checkoutaddress .col-md-4 label { display: block !important; margin-bottom: 8px !important; margin-top: 5px !important; font-weight: 600; clear: both; } .checkoutaddress .col-md-4 input, .checkoutaddress .col-md-4 select { width: 100% !important; display: block !important; margin-bottom: 10px !important; clear: both; } /* Ensure no overlapping in billing/shipping sections */ #UpdateShippingDetailsForm .row, #UpdateBillingDetailsForm .row { display: block !important; width: 100%; margin-left: 0; margin-right: 0; margin-bottom: 0; clear: both; } #UpdateShippingDetailsForm .col-md-4, #UpdateBillingDetailsForm .col-md-4 { width: 100% !important; float: none !important; padding-left: 15px; padding-right: 15px; margin-bottom: 20px !important; display: block !important; clear: both; } #UpdateShippingDetailsForm .col-md-4 label, #UpdateBillingDetailsForm .col-md-4 label { display: block !important; margin-bottom: 8px !important; margin-top: 5px !important; clear: both; } #UpdateShippingDetailsForm .col-md-4 input, #UpdateShippingDetailsForm .col-md-4 select, #UpdateBillingDetailsForm .col-md-4 input, #UpdateBillingDetailsForm .col-md-4 select { width: 100% !important; display: block !important; margin-bottom: 10px !important; clear: both; } /* Fix checkbox alignment - keep checkboxes on the left with proper spacing */ .checkoutaddress .checkbox, #UpdateShippingDetailsForm .checkbox, #UpdateBillingDetailsForm .checkbox { display: block !important; width: 100%; margin-bottom: 15px !important; margin-top: 10px !important; clear: both; } .checkoutaddress .checkbox label, #UpdateShippingDetailsForm .checkbox label, #UpdateBillingDetailsForm .checkbox label { display: flex !important; align-items: center; width: 100%; margin-bottom: 0 !important; font-weight: normal !important; padding-left: 0 !important; } .checkoutaddress .checkbox input[type="checkbox"], #UpdateShippingDetailsForm .checkbox input[type="checkbox"], #UpdateBillingDetailsForm .checkbox input[type="checkbox"] { width: auto !important; min-width: 20px !important; height: 20px; margin-right: 10px !important; margin-bottom: 0 !important; flex-shrink: 0; position: relative !important; display: inline-block !important; } /* Add space between promo code field and apply button */ .promocode { padding: 15px; margin-top: 20px; } .promocode input[type="text"] { margin-bottom: 10px !important; margin-right: 0 !important; float: none !important; width: 100% !important; max-width: 100% !important; } .promocode input[type="button"] { float: none !important; width: 100% !important; margin-top: 10px; } /* Buttons */ .checkout .btn { width: 100%; padding: 15px; font-size: 16px; margin-bottom: 10px; } } /* ===== LOGIN/REGISTER PAGES MOBILE ===== */ @media (max-width: 768px) { /* Login form */ .login-container, .register-container { padding: 20px; } .login-form, .register-form { background: #fff; padding: 30px 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); } .login-form h2, .register-form h2 { font-size: 24px; margin-bottom: 20px; } .login-form .form-group, .register-form .form-group { margin-bottom: 20px; } .login-form .btn, .register-form .btn { width: 100%; padding: 15px; font-size: 16px; } /* Registration/Create Account specific */ .registrationcontainer { padding: 15px; max-width: 100%; } .registrationcontainer .page-header h2 { font-size: 24px; margin-bottom: 20px; } .registrationcontainer .row { margin-left: -10px; margin-right: -10px; } .registrationcontainer [class*="col-"] { padding-left: 10px; padding-right: 10px; } .registrationcontainer .form-group { margin-bottom: 15px; } .registrationcontainer .form-control { font-size: 16px; padding: 10px; } /* Campus dropdown */ .vu-dropdown-wrapper { width: 100%; } #OtherCampusDiv { margin-top: 10px; padding: 10px; } /* Password rules */ .rego-container { margin-top: 15px; padding: 10px; background: #f8f9fa; border-radius: 4px; } .rego-rule { font-size: 14px; margin-bottom: 8px; } /* Terms checkbox */ .registrationcontainer .checkbox { margin: 20px 0; } .registrationcontainer .checkbox label { font-size: 14px; display: flex; align-items: flex-start; } .registrationcontainer .checkbox input[type="checkbox"] { margin-right: 8px; margin-top: 3px; } /* Create account button */ #regoCreateAccount { width: 100%; padding: 15px; font-size: 16px; margin-top: 10px; } /* Help text */ .help-text { font-size: 12px; margin-top: 3px; } } /* ===== MY ACCOUNT PAGES MOBILE ===== */ @media (max-width: 768px) { /* Add buffer space between header and My Account text */ .vu-my-account { padding-top: 60px !important; } .vu-page-title { margin-top: 20px !important; margin-bottom: 30px !important; font-size: 24px !important; } /* Account navigation */ .account-nav { margin-bottom: 20px; } .account-nav .nav-tabs { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; margin-bottom: 20px; } .account-nav .nav-tabs li { flex: 0 0 auto; } /* Order history table - convert to cards for portrait view */ .orders-history table, .vu-address-table { font-size: 14px; width: 100%; border: none; } .orders-history .table-responsive { border: none; overflow: visible; } /* Convert order table to card layout for mobile portrait */ .vu-address-table thead { display: none; } .vu-address-table tbody { display: block; width: 100%; } .vu-address-table tr { display: block; margin-bottom: 20px; padding: 20px; background: #fff; border: 2px solid #e0e0e0; border-radius: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); position: relative; } .vu-address-table td { display: block; text-align: left; padding: 10px 0 !important; border: none; font-size: 14px !important; line-height: 1.6 !important; white-space: normal !important; word-wrap: break-word !important; } /* Add labels before each data cell */ .vu-address-table td:before { content: attr(data-label); font-weight: 700; color: var(--vu-aubergine, #22185e); display: block; margin-bottom: 5px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; } /* Hide labels for cells with empty data-label (action buttons) */ .vu-address-table td[data-label=""]:before { display: none !important; content: none !important; } /* Style action icons */ .vu-address-table td .fa { margin-right: 15px; color: var(--vu-aubergine, #22185e); } .vu-address-table td .fa:hover { opacity: 0.7; } /* Action buttons row - edit and delete icons */ .vu-address-table td[data-label=""] { display: inline-flex !important; gap: 15px; align-items: center; padding: 10px 0 !important; border: none !important; } /* Order history specific styles */ .vu-address-table .vu-link { color: var(--vu-blue, #5BC2E7); text-decoration: none; font-weight: 600; font-size: 16px; } .vu-address-table .vu-link:hover { text-decoration: underline; } /* Status badge styling in card view */ .vu-address-table .vu-status-badge { display: inline-block; padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; } /* Make Order ID more prominent in card view */ .vu-address-table td[data-label="Order ID"] { font-size: 16px !important; font-weight: 700 !important; } /* Highlight total in order history cards */ .vu-address-table td[data-label="Total"] { font-size: 18px !important; font-weight: 700 !important; color: var(--vu-aubergine, #22185e) !important; } /* Ensure line breaks in address cells display properly */ .vu-address-table td br { display: block !important; content: "" !important; margin: 3px 0 !important; line-height: 0 !important; } /* Make table-responsive containers not interfere with card layout */ .table-responsive { overflow: visible !important; width: 100% !important; border: none !important; } /* Address cards */ .address-card { border: 1px solid #ddd; padding: 15px; border-radius: 8px; margin-bottom: 15px; } /* ===== ADDRESS FORMS (Add/Edit) MOBILE ===== */ /* Edit Address Form and Add Address Form - ensure proper alignment */ #EditAddressForm, #AddAddressForm { width: 100% !important; padding: 0 !important; } #EditAddressForm .row, #AddAddressForm .row { margin-left: 0 !important; margin-right: 0 !important; display: flex !important; flex-direction: column !important; } #EditAddressForm .col-md-6, #EditAddressForm .col-md-12, #AddAddressForm .col-md-6, #AddAddressForm .col-md-12 { width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; margin-bottom: 20px !important; } #EditAddressForm .form-group, #AddAddressForm .form-group { width: 100% !important; margin-bottom: 15px !important; text-align: left !important; } #EditAddressForm .control-label, #EditAddressForm label, #AddAddressForm .control-label, #AddAddressForm label { display: inline-block !important; text-align: left !important; width: auto !important; margin-bottom: 8px !important; font-weight: 600 !important; font-size: 14px !important; color: var(--vu-aubergine, #22185e) !important; } /* Ensure asterisk appears inline with label text */ #EditAddressForm .form-group, #AddAddressForm .form-group { display: block !important; } #EditAddressForm .form-group > *, #AddAddressForm .form-group > * { display: inline-block; } #EditAddressForm .form-group > .form-control, #EditAddressForm .form-group > .text-danger, #EditAddressForm .form-group > .field-validation-error, #EditAddressForm .form-group > div, #AddAddressForm .form-group > .form-control, #AddAddressForm .form-group > .text-danger, #AddAddressForm .form-group > .field-validation-error, #AddAddressForm .form-group > div { display: block !important; width: 100% !important; } #EditAddressForm .form-control, #AddAddressForm .form-control { width: 100% !important; display: block !important; text-align: left !important; font-size: 16px !important; padding: 12px 15px !important; border: 2px solid #e0e0e0 !important; border-radius: 8px !important; box-sizing: border-box !important; } #EditAddressForm select.form-control, #AddAddressForm select.form-control { font-size: 16px !important; appearance: auto !important; -webkit-appearance: menulist !important; } #EditAddressForm .checkbox, #AddAddressForm .checkbox { text-align: left !important; display: flex !important; align-items: center !important; margin: 15px 0 !important; } #EditAddressForm .checkbox label, #AddAddressForm .checkbox label { display: flex !important; align-items: center !important; font-weight: normal !important; margin-bottom: 0 !important; gap: 10px !important; } #EditAddressForm .checkbox input[type="checkbox"], #AddAddressForm .checkbox input[type="checkbox"] { width: auto !important; min-width: 20px !important; min-height: 20px !important; margin: 0 !important; flex-shrink: 0 !important; } #EditAddressForm .checkbox label span, #AddAddressForm .checkbox label span { margin-left: 25px !important; font-size: 14px !important; font-weight: normal !important; } #EditAddressForm .btn, #AddAddressForm .btn { width: 100% !important; padding: 14px 20px !important; font-size: 16px !important; margin-top: 10px !important; min-height: 48px !important; } /* PageHeading in modal */ #ModalFormBody .PageHeading { font-size: 20px !important; margin-bottom: 20px !important; text-align: left !important; color: var(--vu-aubergine, #22185e) !important; } /* Validation messages */ #EditAddressForm .text-danger, #AddAddressForm .text-danger, #EditAddressForm .field-validation-error, #AddAddressForm .field-validation-error { display: block !important; text-align: left !important; margin-top: 5px !important; font-size: 13px !important; } } /* ===== ORDER APPROVAL PAGES MOBILE ===== */ @media (max-width: 768px) { /* Approval table - convert to cards */ .vu-approval-table { display: block; border: none; } .vu-approval-table thead { display: none; } .vu-approval-table tbody { display: block; } .vu-approval-table tr { display: block; border: 1px solid #ddd; margin-bottom: 15px; padding: 15px; border-radius: 8px; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.05); } .vu-approval-table td { display: block; text-align: left; padding: 8px 0; border: none; position: relative; } /* Add labels for mobile - Pending Approvals */ #tblPendingApprovals .vu-approval-table td:nth-child(1):before { content: "View: "; } #tblPendingApprovals .vu-approval-table td:nth-child(2):before { content: "Order ID: "; } #tblPendingApprovals .vu-approval-table td:nth-child(3):before { content: "Order Date: "; } #tblPendingApprovals .vu-approval-table td:nth-child(4):before { content: "Customer: "; } #tblPendingApprovals .vu-approval-table td:nth-child(5):before { content: "Total: "; } #tblPendingApprovals .vu-approval-table td:nth-child(6):before { content: ""; } #tblPendingApprovals .vu-approval-table td:nth-child(7):before { content: ""; } /* Add labels for mobile - Approval History */ #tblApprovalHistory .vu-approval-table td:nth-child(1):before { content: "View: "; } #tblApprovalHistory .vu-approval-table td:nth-child(2):before { content: "Order ID: "; } #tblApprovalHistory .vu-approval-table td:nth-child(3):before { content: "Order Date: "; } #tblApprovalHistory .vu-approval-table td:nth-child(4):before { content: "Customer: "; } #tblApprovalHistory .vu-approval-table td:nth-child(5):before { content: "Total: "; } #tblApprovalHistory .vu-approval-table td:nth-child(6):before { content: "Status: "; } #tblApprovalHistory .vu-approval-table td:nth-child(7):before { content: "Approver: "; } #tblApprovalHistory .vu-approval-table td:nth-child(8):before { content: "Approval Date: "; } #tblApprovalHistory .vu-approval-table td:nth-child(9):before { content: "Comments: "; } .vu-approval-table td:before { font-weight: bold; display: inline-block; margin-right: 5px; } /* Style the order total */ .vu-approval-table td:nth-child(5) { font-size: 16px; font-weight: bold; color: #333; } /* Action buttons for Pending Approvals */ #tblPendingApprovals .vu-approval-table td:nth-child(6), #tblPendingApprovals .vu-approval-table td:nth-child(7) { padding: 5px 0; display: inline-block; width: 48%; } #tblPendingApprovals .vu-approval-table td:nth-child(6) { margin-right: 4%; } /* Status labels in Approval History */ #tblApprovalHistory .vu-approval-table .label { display: inline-block; padding: 6px 12px; font-size: 14px; border-radius: 4px; } .vu-approval-table .btn { width: 100%; padding: 10px; font-size: 14px; } /* View link */ .vu-approval-table .vu-link { display: inline-block; padding: 8px 16px; background: #f0f0f0; border-radius: 4px; text-decoration: none; color: #333; } /* Pagination */ .vu-pagination { text-align: center; margin-top: 20px; font-size: 14px; } .vu-pagination .pagination { display: flex; justify-content: center; flex-wrap: wrap; margin-top: 10px; } .vu-pagination .pagination li { margin: 2px; } .vu-pagination .pagination a, .vu-pagination .pagination span { padding: 8px 12px; font-size: 14px; } } /* ===== FOOTER MOBILE ===== */ @media (max-width: 768px) { footer.bg-black { padding: 40px 0 20px 0; font-size: 14px; line-height: 1.5; text-align: center; } footer.bg-black .container { padding-left: 20px; padding-right: 20px; max-width: 100%; } footer.bg-black .row { margin-left: 0; margin-right: 0; display: flex; flex-direction: column; align-items: center; } footer.bg-black .col-md-3, footer.bg-black .col-md-6, footer.bg-black .col-md-12 { width: 100%; max-width: 500px; padding-left: 0; padding-right: 0; margin-bottom: 35px; text-align: center; } footer.bg-black .col-md-12 { margin-bottom: 0; max-width: 100%; } /* Footer section spacing */ footer.bg-black > div:not(:last-child) { margin-bottom: 20px; } /* Footer headings */ footer .fw-bold, footer b { font-size: 17px; font-weight: 700; margin-bottom: 15px; color: #fff; display: block; letter-spacing: 0.3px; text-align: center; } /* Footer links - centered with tighter spacing */ footer a { color: #fff !important; text-decoration: none !important; font-size: 14px; line-height: 1.8; transition: opacity 0.2s; /* display: block;*/ padding: 2px 0; text-align: center; } footer a:hover, footer a:active { opacity: 0.8; text-decoration: none !important; } /* Footer text - centered with tighter spacing */ footer div:not(.social-icons):not(.app-links) { color: #fff; line-height: 1.5; margin-bottom: 5px; text-align: center; } /* Social icons section - centered */ footer .social-icons { display: flex; flex-wrap: wrap !important; justify-content: center; gap: 12px; margin-top: 15px; margin-bottom: 15px; } footer .social-icons a { display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; font-size: 22px; color: #fff !important; border: 2px solid rgba(255, 255, 255, 0.4); border-radius: 12px; background: rgba(255, 255, 255, 0.08); transition: all 0.25s; } footer .social-icons a:hover, footer .social-icons a:active { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.6); transform: translateY(-3px); } /* App links section - centered */ footer .app-links { display: flex; flex-direction: column; gap: 12px; margin-top: 15px; align-items: center; } footer .app-links a { display: block; padding: 0; line-height: 1; } footer .app-links img { height: 42px; width: auto; max-width: 145px; display: block; } /* Aboriginal flag section - centered */ footer .ack-flag { height: 22px; margin-right: 10px; vertical-align: middle; display: inline-block; } /* Acknowledgement section - centered */ footer .col-md-6 { margin-bottom: 30px; text-align: center; } footer .col-md-6 .fw-bold { display: flex; align-items: center; justify-content: center; margin-bottom: 15px; line-height: 1.4; text-align: center; } /* Footer copyright with tighter spacing */ .vu-footer-copyright { color: #bbb; text-align: center; font-size: 11px; line-height: 1.5; margin-top: 25px; margin-bottom: 10px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.15); } .vu-footer-copyright a { color: #fff !important; text-decoration: underline !important; font-size: 11px; display: inline; padding: 0; line-height: inherit; } /* My account link in footer */ footer .vu-myaccount { color: #fff !important; font-weight: 700; font-size: 15px; } /* Hide horizontal rule on mobile */ footer hr { display: none; } /* Mobile-only break for spacing */ .mobile-only { display: block; height: 8px; } /* Ensure proper spacing between footer sections */ footer .mb-3 { margin-bottom: 35px !important; } /* VU App text section with tighter spacing */ footer div[style*="padding-bottom:15px"] { padding-bottom: 10px !important; line-height: 1.5; text-align: center; } } /* ===== UTILITY CLASSES ===== */ @media (max-width: 768px) { /* Hide on mobile */ .hide-mobile { display: none !important; } /* Show only on mobile */ .show-mobile { display: block !important; } /* Text alignment */ .text-center-mobile { text-align: center !important; } /* Spacing helpers */ .mt-mobile-3 { margin-top: 1rem !important; } .mb-mobile-3 { margin-bottom: 1rem !important; } .p-mobile-2 { padding: 0.5rem !important; } /* Full width on mobile */ .w-100-mobile { width: 100% !important; } } /* ===== TOUCH-FRIENDLY ENHANCEMENTS ===== */ @media (max-width: 768px) { /* Increase tap targets */ a, button, .btn, input[type="submit"], input[type="button"] { min-height: 44px; min-width: 44px; } /* Better spacing for touch */ .clickable-item { padding: 12px; margin-bottom: 8px; } /* Prevent accidental taps */ .action-buttons > * { margin: 5px; } } /* ===== PERFORMANCE OPTIMIZATIONS ===== */ @media (max-width: 768px) { /* Reduce animations on mobile */ *, *::before, *::after { animation-duration: 0.3s !important; transition-duration: 0.3s !important; } /* Optimize images */ img { max-width: 100%; height: auto; } /* Lazy load below fold */ .lazy-mobile { content-visibility: auto; } } @media (max-width: 768px) { .registrationcontainer { padding: 0 16px !important; } .registrationcontainer .row { flex-direction: column !important; } .registrationcontainer .form-group { width: 100% !important; margin-bottom: 12px; flex: 1 1 100% !important; } .registrationcontainer .form-control { width: 100% !important; } .registrationcontainer label.control-label, .registrationcontainer select, .registrationcontainer .form-control { font-size: 13px !important; } .registrationcontainer .btn-primary { font-size: 14px !important; } /* Order Confirmation Approval Message - Mobile */ .vu-order-confirm-box { padding: 20px 15px; margin: 0 -15px 20px; border-radius: 0; } .vu-approval-message { padding: 15px; margin: 0 -5px 20px; } .vu-approval-message p { font-size: 14px; line-height: 1.6; } .vu-approval-message strong { font-size: 15px; } /* Header alignment fixes for mobile */ .vu-header-actions { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 8px; flex-wrap: nowrap; } .vu-header-search { flex: 1; max-width: calc(100% - 140px); min-width: 0; } .vu-search-input, #ProductSearchInput.vu-search-input { width: 100%; height: 38px; font-size: 14px; padding: 8px 12px; } .vu-header-login .vu-login-btn { height: 38px; white-space: nowrap; flex-shrink: 0; padding: 8px 14px; font-size: 13px; min-width: auto; display: flex; align-items: center; gap: 6px; } .vu-header-login .vu-login-btn i { font-size: 14px; } .vu-header-cart { height: 38px; flex-shrink: 0; } .vu-header-cart .vu-cart-link { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; } } /* ===== HEADER STICKY & MOBILE ENHANCEMENTS ===== */ @media (max-width: 768px) { /* Make header sticky on mobile */ .vu-header-top { position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 1000; padding: 8px 0; background: var(--vu-blue, #5BC2E7) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } /* Add padding to body to prevent content from hiding under sticky header - two-line header */ body { padding-top: 100px; } .vu-header-top .container { padding-left: 15px; padding-right: 15px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0; max-width: 100%; } /* Logo - MOBILE LINE 1 - LEFT ALIGNED, full width */ .vu-header-brand { flex-shrink: 0; margin-right: 0; order: 1; flex-basis: 100%; width: 100%; text-align: left; padding: 8px 0; } .vu-header-brand .vu-logo { max-height: 40px; width: auto; } /* Mobile header actions container - MOBILE LINE 2 - full width with internal layout */ .vu-header-actions { order: 2; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: nowrap; flex-basis: 100%; width: 100%; padding: 8px 0; } /* Search box - MOBILE LINE 2 CENTER - between login/cart and menu */ .vu-header-search { display: flex !important; align-items: center; position: relative; order: 2; flex: 1 1 auto; margin-left: 0; margin-right: 0; padding: 0; justify-content: center; } /* Login - LINE 2 LEFT side, first icon */ .vu-header-login { order: 1; } /* Cart - LINE 2 LEFT side, second icon (same order as login to group together) */ .vu-header-cart { order: 1; } /* Hamburger - LINE 2 RIGHT side */ .mobile-menu-toggle { order: 3; } /* Mobile search input styling - 100% width and centered */ .vu-header-search .vu-search-input { width: 100%; max-width: 100%; height: 42px; font-size: 15px; padding: 12px 16px; border: none; border-radius: 8px; background: rgba(255, 255, 255, 0.95); color: #333; text-align: center; box-sizing: border-box; } .vu-header-search .vu-search-input::placeholder { color: #999; font-size: 15px; text-align: center; } .vu-header-search .vu-search-input:focus { outline: none; background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3); text-align: left; } .vu-header-search .vu-search-btn { display: none; } .vu-header-search .vu-search-loading { display: none; } /* Cart styling - icon only on first line */ .vu-header-cart { display: flex; align-items: center; height: auto; flex-shrink: 0; padding: 0; } .vu-header-cart .vu-cart-link { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; position: relative; background: transparent; border: none; border-radius: 0; padding: 8px; transition: all 0.2s ease; } .vu-header-cart .vu-cart-link:hover, .vu-header-cart .vu-cart-link:active { background: rgba(255, 255, 255, 0.15); border-radius: 6px; } .vu-header-cart .vu-cart-link i { color: var(--vu-aubergine, #22185e); font-size: 20px; } .vu-header-cart .vu-cart-badge { display: none; } /* Mobile Login Button - icon only on first line */ .vu-header-login { display: flex; align-items: center; padding: 0; } .vu-header-login .vu-login-btn { background: transparent; border: none; color: var(--vu-aubergine, #22185e) !important; padding: 8px; border-radius: 0; font-size: 14px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 0; white-space: nowrap; transition: all 0.2s ease; min-height: 44px; min-width: 44px; width: 44px; height: 44px; } .vu-header-login .vu-login-btn:hover, .vu-header-login .vu-login-btn:active { background: rgba(255, 255, 255, 0.15); border-radius: 6px; color: var(--vu-aubergine, #22185e) !important; text-decoration: none; } .vu-header-login .vu-login-btn i { font-size: 18px; display: inline-block; margin: 0; } /* Hide text on mobile for login button - icon only */ .vu-header-login .vu-login-btn span { display: none !important; } } /* Hide mobile-only elements on desktop */ @media (min-width: 769px) { .vu-mobile-search-wrapper { display: none !important; } .mobile-menu-toggle { display: none !important; } } /* ===== LOGIN PAGE MOBILE ENHANCEMENTS ===== */ @media (max-width: 768px) { .vu-login-wrapper { padding: 20px 0; } .vu-login-wrapper .row { margin-left: 0; margin-right: 0; } .vu-login-wrapper .col-md-6 { padding-left: 0; padding-right: 0; } .login-form-col, .login-info-col { margin-bottom: 30px; } .login-form-inner { padding: 30px 20px; background: #fff; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); } .login-title { font-size: 22px; margin-bottom: 25px; line-height: 1.3; } .login-form-inner .form-group { margin-bottom: 20px; } .login-form-inner .vu-login-input { font-size: 16px; padding: 12px 15px; height: auto; min-height: 48px; } .password-group { position: relative; } .password-toggle { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); cursor: pointer; padding: 10px; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; } /* Make login button full-width and touch-friendly */ .form-row { flex-direction: column; align-items: stretch !important; gap: 15px !important; } .form-row .vu-btn-melon { width: 100%; padding: 14px 22px; font-size: 16px; min-height: 48px; display: block; text-align: center; } .form-row .form-check { margin: 0; width: 100%; } .form-row .form-check-label { font-size: 15px; } .form-row .forgot-link { font-size: 15px; margin: 0; display: block; text-align: center; padding: 10px; } /* Login info box */ .login-info-box { padding: 25px 20px; background: #f8f9fa; border-radius: 8px; margin-bottom: 20px; } .login-info-box p { font-size: 15px; line-height: 1.6; margin-bottom: 12px; } /* Create account button - make it full width and touch-friendly */ .vu-login-btn-create { width: 100%; padding: 14px 28px; font-size: 16px; min-height: 48px; display: block; text-align: center; margin-top: 0; } } /* ===== REGISTER PAGE MOBILE ENHANCEMENTS ===== */ @media (max-width: 768px) { .register-container { padding: 20px 10px; } .register-form { padding: 30px 20px; } .register-form h2 { font-size: 22px; margin-bottom: 20px; line-height: 1.3; } .register-form .form-group { margin-bottom: 18px; } .register-form .form-control { font-size: 16px; padding: 12px 15px; min-height: 48px; } .register-form .btn { width: 100%; padding: 14px; font-size: 16px; min-height: 48px; } .register-form select.form-control { font-size: 16px; } } /* ===== CART/CHECKOUT PAGES MOBILE ENHANCEMENTS ===== */ @media (max-width: 768px) { /* Cart grid mobile */ .cart-grid-container { padding: 15px 0; } .cart-item { border: 1px solid #ddd; padding: 15px; margin-bottom: 15px; border-radius: 8px; background: #fff; } .cart-item-image img { max-width: 100px; height: auto; } .cart-item-details { padding: 10px 0; } .cart-item-title { font-size: 16px; font-weight: 600; margin-bottom: 8px; } .cart-item-price { font-size: 18px; font-weight: bold; color: #333; margin: 10px 0; } .cart-item-quantity { display: flex; align-items: center; gap: 10px; margin: 10px 0; } .cart-item-quantity input { width: 60px; text-align: center; font-size: 16px; padding: 8px; min-height: 44px; } .cart-item-remove { margin-top: 10px; } .cart-item-remove .btn { min-height: 44px; padding: 10px 20px; } /* Checkout steps */ .checkout-steps { margin-bottom: 20px; } .checkout-step { padding: 15px; border: 1px solid #ddd; border-radius: 8px; margin-bottom: 15px; background: #fff; } .checkout-step-title { font-size: 18px; font-weight: 600; margin-bottom: 15px; } /* Address forms on mobile */ .address-form .form-group { margin-bottom: 15px; } .address-form .form-control { font-size: 16px; padding: 12px 15px; min-height: 48px; } .address-form .btn { width: 100%; min-height: 48px; padding: 14px; font-size: 16px; margin-top: 10px; } /* Payment method selection */ .payment-methods { margin-bottom: 20px; } .payment-method-option { padding: 15px; border: 2px solid #ddd; border-radius: 8px; margin-bottom: 10px; cursor: pointer; min-height: 60px; display: flex; align-items: center; } .payment-method-option input[type="radio"] { margin-right: 10px; min-width: 20px; min-height: 20px; } .payment-method-option label { font-size: 16px; margin-bottom: 0; cursor: pointer; flex: 1; } } /* ===== MY ACCOUNT PAGES MOBILE ENHANCEMENTS ===== */ @media (max-width: 768px) { .myaccount-container { padding: 15px 0; } .account-section { margin-bottom: 20px; padding: 20px 15px; background: #fff; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); } .account-section-title { font-size: 20px; font-weight: 600; margin-bottom: 15px; } .account-info-row { display: flex; flex-direction: column; padding: 10px 0; border-bottom: 1px solid #eee; } .account-info-label { font-weight: 600; font-size: 14px; margin-bottom: 5px; } .account-info-value { font-size: 15px; } /* Personal information form */ .personal-info-form .form-group { margin-bottom: 15px; } .personal-info-form .form-control { font-size: 16px; padding: 12px 15px; min-height: 48px; } .personal-info-form .btn { width: 100%; min-height: 48px; padding: 14px; font-size: 16px; } /* Address management */ .address-list { display: flex; flex-direction: column; gap: 15px; } .address-card { border: 1px solid #ddd; padding: 15px; border-radius: 8px; background: #fff; } .address-card-title { font-size: 16px; font-weight: 600; margin-bottom: 10px; } .address-card-content { font-size: 14px; line-height: 1.6; margin-bottom: 10px; } .address-card-actions { display: flex; gap: 10px; flex-wrap: wrap; } .address-card-actions .btn { flex: 1; min-width: 120px; min-height: 44px; font-size: 14px; } } /* ===== ORDER PAGES MOBILE ENHANCEMENTS ===== */ @media (max-width: 768px) { .order-container { padding: 15px 0; } .order-complete-message { padding: 20px 15px; background: #fff; border-radius: 8px; margin-bottom: 20px; text-align: center; } .order-complete-title { font-size: 22px; font-weight: 600; margin-bottom: 15px; } .order-number { font-size: 20px; font-weight: bold; margin: 15px 0; } /* Order details modal - mobile */ .vu-order-modal-content { max-width: 100% !important; width: 100% !important; padding: 0 !important; margin: 0 !important; } .vu-order-modal-content-inner { padding: 0 !important; max-width: 100% !important; width: 100% !important; } .vu-order-modal-header { padding: 8px 0 !important; margin-bottom: 10px !important; background: var(--vu-aubergine, #22185e) !important; border-radius: 8px !important; text-align: center !important; display: block !important; visibility: visible !important; } .vu-order-modal-title { font-size: 16px !important; font-weight: 700 !important; margin: 0 !important; padding: 0 !important; color: #ffffff !important; display: block !important; visibility: visible !important; } .vu-order-meta-grid { display: block !important; margin-bottom: 15px !important; } /* Compact layout - label and value on same line where possible */ .vu-order-meta-grid > div { margin-bottom: 8px !important; } .vu-meta-label { font-weight: 700 !important; font-size: 12px !important; color: var(--vu-aubergine, #22185e) !important; margin-bottom: 2px !important; display: block !important; visibility: visible !important; } .vu-meta-value { font-size: 13px !important; line-height: 1.5 !important; white-space: pre-line !important; word-wrap: break-word !important; padding-bottom: 8px !important; border-bottom: 1px solid #f0f0f0 !important; margin-bottom: 0 !important; color: #333333 !important; visibility: visible !important; } /* Remove border from last item */ .vu-order-meta-grid > div:last-child .vu-meta-value { border-bottom: none !important; padding-bottom: 0 !important; } /* Ensure addresses in order modal display line breaks properly */ .vu-meta-value br { display: block !important; content: "" !important; margin: 3px 0 !important; } /* Order items section - compact spacing */ .vu-order-items-section { margin-top: 15px !important; margin-bottom: 15px !important; } /* Order items table in modal */ .vu-order-items-table { font-size: 11px !important; width: 100% !important; display: block !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; margin-bottom: 0 !important; } .vu-order-items-table thead { display: table-header-group !important; } .vu-order-items-table tbody { display: table-row-group !important; } .vu-order-items-table tr { display: table-row !important; } .vu-order-items-table th, .vu-order-items-table td { display: table-cell !important; padding: 6px 4px !important; font-size: 11px !important; white-space: nowrap !important; line-height: 1.3 !important; color: #333333 !important; background: #ffffff !important; } .vu-order-items-table th { font-weight: 700 !important; background: #f8f8f8 !important; color: #000000 !important; } .vu-order-items-table tbody tr { background: #ffffff !important; } .vu-order-items-table tbody tr:nth-child(even) { background: #f9f9f9 !important; } /* Order totals - more compact */ .vu-order-totals { margin-top: 15px !important; font-size: 13px !important; padding-top: 10px !important; border-top: 2px solid #e0e0e0 !important; } .vu-order-total-row { padding: 6px 0 !important; font-size: 13px !important; display: flex !important; justify-content: space-between !important; line-height: 1.4 !important; color: #333333 !important; } .vu-order-total-row span, .vu-order-total-row strong { color: #333333 !important; } .vu-order-total-final { font-size: 15px !important; font-weight: 700 !important; padding-top: 8px !important; margin-top: 6px !important; border-top: 1px solid #e0e0e0 !important; color: #000000 !important; } .vu-order-total-final strong { color: #000000 !important; font-weight: 700 !important; } /* Order details */ .order-details { background: #fff; padding: 20px 15px; border-radius: 8px; margin-bottom: 20px; } .order-details-title { font-size: 18px; font-weight: 600; margin-bottom: 15px; } .order-details-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #eee; font-size: 14px; } .order-details-label { font-weight: 600; } .order-details-value { text-align: right; } /* Order tracking */ .order-tracking { padding: 20px 15px; } .tracking-status { padding: 15px; background: #f8f9fa; border-radius: 8px; margin-bottom: 15px; } .tracking-step { padding: 15px 10px; border-left: 3px solid #ddd; margin-bottom: 10px; position: relative; } .tracking-step.active { border-left-color: #22185e; } .tracking-step-title { font-size: 16px; font-weight: 600; margin-bottom: 5px; } .tracking-step-date { font-size: 14px; color: #666; } } /* ===== PRODUCT DETAILS PAGE MOBILE ===== */ @media (max-width: 768px) { /* Product details container */ .container.proddetails { padding: 0; } .proddetails .row { margin-left: 0; margin-right: 0; } /* Product image section - col-sm-6 */ .prod_det_col1 { padding: 15px; width: 100%; margin-bottom: 20px; } /* Main product image */ .prod_det_img { width: 100%; text-align: center; margin-bottom: 15px; position: relative; } .prod_det_img img#imgMain { width: 100%; max-width: 100%; height: auto; border-radius: 12px; border: 1px solid #ddd; padding: 10px; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } /* Zoom control */ /* .zoom-ctrl { position: absolute; bottom: 15px; right: 15px; background: rgba(255, 255, 255, 0.9); padding: 10px; border-radius: 50%; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); min-width: 44px; min-height: 44px; display: flex !important; align-items: center; justify-content: center; }*/ /* Product thumbnails */ .prod_det_views { display: flex; gap: 10px; overflow-x: auto; padding: 10px 0; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .prod_det_views::-webkit-scrollbar { display: none; } .product-thumb { flex: 0 0 auto; width: 80px; height: 80px; } .product-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; border: 2px solid #ddd; padding: 4px; cursor: pointer; transition: all 0.2s; } .product-thumb img.selected { border-color: var(--vu-aubergine, #22185e); box-shadow: 0 0 0 2px rgba(34, 24, 94, 0.2); } .product-thumb img:active { transform: scale(0.95); } /* Product info section - col-sm-6 */ .proddetails .col-sm-6:last-child { padding: 0 15px 20px; width: 100%; } /* Product heading */ .PageHeading { font-size: 24px; font-weight: 700; line-height: 1.3; color: var(--vu-aubergine, #22185e); margin-bottom: 15px; } /* Product subheading and prices */ .SubHeading { font-size: 18px; font-weight: 600; color: var(--vu-aubergine, #22185e); } .productdetailsprices { margin-bottom: 15px; } .productdetailsprices .SubHeading { font-size: 22px; font-weight: 700; } .prodsale { font-size: 22px; font-weight: 700; color: var(--vu-melon, #ff6b6b); } /* Product description */ .prod-description { font-size: 15px; line-height: 1.7; color: #333; margin-bottom: 20px; padding: 15px; background: #f9f9f9; border-radius: 8px; } .prod-description p { margin-bottom: 10px; } .prod-description ul, .prod-description ol { padding-left: 20px; margin-bottom: 10px; } .prod-description li { margin-bottom: 5px; } /* Pricing table - keep table format but make scrollable */ .table-bordered { border: 1px solid #ddd; margin-bottom: 15px; } .zstable { font-size: 14px; margin-bottom: 15px; display: table; width: 100%; border-collapse: collapse; } .zstable thead { display: table-header-group; } .zstable thead th { background: var(--vu-aubergine, #22185e); color: #fff; padding: 12px 10px; font-size: 14px; font-weight: 600; border: 1px solid rgba(255, 255, 255, 0.2); text-align: center; } .zstable tbody { display: table-row-group; } .zstable tbody tr { display: table-row; } .zstable tbody td { display: table-cell; padding: 12px 10px; font-size: 14px; border: 1px solid #ddd; text-align: center; vertical-align: middle; } .smalltext { font-size: 13px; line-height: 1.5; } /* Wrapper for horizontal scroll if table is too wide */ .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 15px; } /* Variation table - mobile 3-column layout */ #PriceRange { border: none; margin-bottom: 20px; width: 100%; max-width: 100%; display: table; border-collapse: separate; border-spacing: 0; } #PriceRange thead { display: table-header-group; } #PriceRange thead tr { display: table-row; background: var(--vu-aubergine, #22185e); } #PriceRange thead th { display: table-cell; padding: 12px 8px; color: #fff; font-size: 14px; font-weight: 700; border: none; box-sizing: border-box; vertical-align: middle; } #PriceRange thead th:first-child { text-align: left; border-radius: 12px 0 0 0; width: 40%; } #PriceRange thead th:nth-child(2) { text-align: center; width: 20%; } #PriceRange thead th:last-child { text-align: center; border-radius: 0 12px 0 0; width: 40%; } #PriceRange tbody { display: table-row-group; } #PriceRange tbody tr { display: table-row; border: 2px solid var(--vu-aubergine, #22185e); } #PriceRange tbody tr:last-child td:first-child { border-radius: 0 0 0 12px; } #PriceRange tbody tr:last-child td:last-child { border-radius: 0 0 12px 0; } #PriceRange tbody td { display: table-cell; border: none; font-size: 14px; padding: 12px 8px; vertical-align: middle; border-left: 2px solid var(--vu-aubergine, #22185e); border-bottom: 2px solid var(--vu-aubergine, #22185e); background: #fff; } #PriceRange tbody td:first-child { text-align: left; font-weight: 500; color: #333; border-left: 2px solid var(--vu-aubergine, #22185e); } #PriceRange tbody td:nth-child(2) { text-align: center; font-weight: 400; } #PriceRange tbody td:last-child { text-align: center; background: transparent; border-right: 2px solid var(--vu-aubergine, #22185e); } #PriceRange input[type="number"] { width: 100%; max-width: 100%; font-size: 16px; padding: 8px; min-height: 44px; border: 2px solid #ddd; border-radius: 8px; text-align: center; background: #fff; box-sizing: border-box; } #PriceRange input[type="number"]:focus { border-color: var(--vu-aubergine, #22185e); outline: none; box-shadow: 0 0 0 3px rgba(34, 24, 94, 0.1); } /* Out of stock styling */ #PriceRange .out-of-stock { color: #dc3545; font-weight: 700; font-size: 14px; } /* Form controls */ .form-control { font-size: 16px !important; padding: 10px 12px; min-height: 44px; border-radius: 6px; } select.form-control { font-size: 16px !important; } .ProductQuantity { font-size: 16px !important; text-align: center; } /* Add to cart section */ .prod_det_submit { margin-top: 20px; clear: both; } .prod_det_submit .float-left-sm { float: none; width: 100%; margin-bottom: 15px; text-align: center; } .btnAddToCart, .vu-btn-melon, .zsbtn { width: 100%; min-height: 50px; font-size: 17px; font-weight: 700; padding: 14px 20px; border-radius: 25px; display: block; text-align: center; margin-bottom: 10px; } .btnCustomise { background: var(--vu-aubergine, #22185e); color: #fff; border: none; } /* Divider for simple add to cart */ .divAddToCart { margin-top: 20px; } .divAddToCart .float-left-margintop { float: none; width: 100%; margin-bottom: 15px; display: block; } .divAddToCart input[type="number"] { width: 100% !important; max-width: none !important; font-size: 16px; text-align: center; } .divAddToCart select { width: 100%; margin-bottom: 15px; } /* Points slider for rewards */ #prod-det-slider { margin-top: 20px; margin-bottom: 20px; } .slider-table { width: 100%; font-size: 14px; } .slider-table th { padding: 10px 5px; background: var(--vu-aubergine, #22185e); color: #fff; text-align: center; } .slider-table td { padding: 10px 5px; vertical-align: middle; } .slider-table input { width: 100%; font-size: 16px; padding: 8px; min-height: 44px; } /* Group buy section */ .gbsection { background: rgba(91, 194, 231, 0.1); padding: 20px 15px; border-radius: 12px; margin: 20px 0; } .cdtitle { font-size: 16px; font-weight: 700; color: var(--vu-aubergine, #22185e); margin-bottom: 10px; } .groupbuytext { font-size: 18px; font-weight: 700; color: var(--vu-melon, #ff6b6b); } /* Extra details section */ .prod_det_extra { padding: 20px 15px; margin-top: 20px; background: #f9f9f9; border-radius: 8px; } .prod_det_extra h3, .prod_det_extra h4 { font-size: 18px; font-weight: 700; margin-bottom: 12px; color: var(--vu-aubergine, #22185e); } .prod_det_extra p { font-size: 14px; line-height: 1.6; margin-bottom: 10px; } /* Related products */ .related-prod-title { font-size: 24px; font-weight: 700; text-align: center; margin: 40px auto 25px auto; background-color: var(--vu-purple-light, #625a87); color: #fff; border-radius: 30px; padding: 16px 20px; line-height: 1.3; width: fit-content; max-width: 90%; display: block; } .related-products { padding: 0 0 20px; overflow: visible; border: none; } .related-products .row { margin: 0; } .related-products .col-sm-10 { width: 100%; padding: 0; } .related-prod-div { display: flex; gap: 20px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 15px; justify-content: flex-start; } .related-prod-div::-webkit-scrollbar { display: none; } .related-prod-div .proddiv { flex: 0 0 auto; width: calc(100vw - 50px); max-width: calc(100vw - 50px); background: #fff; border-radius: 16px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); padding: 18px; text-align: center; transition: box-shadow 0.18s; } .related-prod-div .proddiv:active { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); } .related-prod-div .proddiv .proddivinner { display: flex; flex-direction: column; align-items: center; } .related-prod-div .proddiv .prodimg { height: 160px; width: 100%; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; } .related-prod-div .proddiv .prodimg img { max-width: 100%; max-height: 100%; object-fit: contain; } .related-prod-div .proddiv .prodname { display: flex; flex-direction: column; align-items: center; width: 100%; } .related-prod-div .proddiv .prodname .name { display: block; font-weight: 600; font-size: 16px; line-height: 1.4; color: var(--vu-purple, #22185e); min-height: 45px; text-align: center; overflow: hidden; } .related-prod-div .proddiv .prodname .price { position: relative; font-weight: 700; font-size: 18px; color: var(--vu-purple, #22185e); padding-top: 12px; margin-top: 0; width: 100%; } .related-prod-div .proddiv .prodname .price::before { content: ""; display: block; width: 100%; height: 2px; background-color: var(--vu-purple, #22185e); margin-bottom: 10px; border-radius: 1px; } /* Out of stock message */ .out-of-stock { color: #dc3545; font-weight: 700; font-size: 15px; } /* Countdown timer */ .prod-countdown { margin-bottom: 15px; padding: 15px; background: rgba(255, 107, 107, 0.1); border-radius: 8px; text-align: center; } /* Size chart image */ .prod_det_submit img { max-width: 100%; height: auto; border-radius: 8px; } /* Breadcrumb */ .proddetails .breadcrumb { background: transparent; padding: 10px 15px; margin-bottom: 15px; font-size: 13px; } .proddetails .breadcrumb a { color: var(--vu-aubergine, #22185e); } } /* ===== MODAL MOBILE ENHANCEMENTS ===== */ @media (max-width: 768px) { /* Ensure modal is visible and properly sized on mobile */ .modal { overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; } .modal-dialog, .modal-dialog.modal-lg { margin: 10px auto !important; max-width: calc(100% - 20px) !important; width: calc(100% - 20px) !important; position: relative !important; top: 0 !important; transform: none !important; } .modal-content { border-radius: 12px; max-height: calc(100vh - 20px) !important; display: flex !important; flex-direction: column !important; } .modal-header { padding: 15px; flex-shrink: 0; } .modal-title { font-size: 18px; } .modal-body { padding: 15px; font-size: 14px; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; flex: 1 1 auto; max-height: calc(100vh - 150px); } .modal-footer { padding: 15px; flex-shrink: 0; } .modal-footer .btn { min-height: 44px; padding: 12px 20px; font-size: 15px; } /* Specific styling for Order Details Modal */ #ModalShowOrder .modal-dialog { margin: 10px auto !important; width: calc(100vw - 20px) !important; max-width: calc(100vw - 20px) !important; } #ModalShowOrder .modal-content { max-height: calc(100vh - 20px) !important; overflow: hidden !important; } #ModalShowOrder .modal-body { overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; max-height: calc(100vh - 100px) !important; padding: 12px !important; } #ModalShowOrder .modal-header { padding: 10px 12px !important; border-bottom: 1px solid #e0e0e0; min-height: auto !important; } #ModalShowOrder .modal-header h4, #ModalShowOrder .modal-header .modal-title { font-size: 16px !important; margin: 0 !important; } #ModalShowOrder .modal-header .close { font-size: 32px !important; padding: 0 !important; margin: -5px 0 0 0 !important; opacity: 0.8 !important; } #ModalShowOrder .modal-footer { padding: 12px 15px !important; border-top: 1px solid #e0e0e0; } #ModalShowOrder .modal-footer .btn { width: 100% !important; min-height: 48px !important; } /* Ensure order details content is visible and scrollable */ #ModalShowOrderBody { max-width: 100% !important; overflow-x: hidden !important; } /* Hide Loading Modal on Mobile */ #ModalLoading { display: none !important; } /* Hide backdrop on mobile too */ body.modal-open #ModalLoading + .modal-backdrop { display: none !important; } } /* ===== MOBILE SIDE MENU FIX - HOME NOT HIDDEN UNDER HEADER ===== */ @media (max-width: 768px) { /* Fix left side menu so Home link is not hidden under sticky header */ #mainNavMobile nav { padding-top: 110px !important; top: 0 !important; } #mainNavMobile .main-menu { padding-top: 0 !important; margin-top: 0 !important; } /* Force Home link (2nd li after close button) to be visible */ #mainNavMobile .main-menu li { display: list-item !important; visibility: visible !important; opacity: 1 !important; height: auto !important; overflow: visible !important; } /* Specifically target the Home link */ #mainNavMobile .main-menu li:nth-child(2) { display: list-item !important; visibility: visible !important; opacity: 1 !important; position: relative !important; z-index: 10 !important; } #mainNavMobile .main-menu li:nth-child(2) a { display: block !important; visibility: visible !important; opacity: 1 !important; color: #fff !important; } } /* ===== NAVIGATION MOBILE ENHANCEMENTS ===== */ @media (max-width: 768px) { .vu-header-nav { border: none; margin-bottom: 20px; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); min-height: 50px; position: relative; top: 0; left: 0; right: 0; width: 100%; z-index: 999; display: block !important; visibility: visible !important; opacity: 1 !important; margin-top: 0; } /* Ensure white navbar is visible */ nav.navbar.vu-header-nav { display: block !important; } .vu-header-nav .container { padding: 0; margin: 0; width: 100%; max-width: 100%; } /* Move hamburger menu button to header */ .navbar-header { display: none; } /* Hamburger in header - icon only on first line */ .vu-header-actions .mobile-menu-toggle { background: transparent; border: none; color: var(--vu-aubergine, #22185e) !important; padding: 8px; margin: 0; min-height: 44px; min-width: 44px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 4px; transition: all 0.2s ease; flex-shrink: 0; } .vu-header-actions .mobile-menu-toggle:hover, .vu-header-actions .mobile-menu-toggle:active { background: rgba(255, 255, 255, 0.15); border-radius: 6px; } .vu-header-actions .mobile-menu-toggle span { display: block; width: 22px; height: 3px; background-color: var(--vu-aubergine, #22185e); border-radius: 2px; transition: all 0.2s; } /* Collapsed menu - ensure it works properly on mobile */ .navbar-collapse { border: none; box-shadow: none; border-top: 1px solid #eee; margin-top: 0; max-height: 0; overflow: hidden; transition: max-height 0.3s ease; background: #fff; width: 100%; position: relative; z-index: 1000; } .navbar-collapse.in, .navbar-collapse.collapsing { max-height: calc(100vh - 200px); overflow-y: auto; } /* Ensure categories collapse is visible when open */ #vu-categories-collapse { visibility: visible !important; position: relative; width: 100%; background: #fff; clear: both; } #vu-categories-collapse.collapse { display: none; } #vu-categories-collapse.in, #vu-categories-collapse.collapse.in { display: block !important; max-height: calc(100vh - 200px) !important; overflow-y: auto; visibility: visible !important; padding-top: 55px; margin-bottom: 20px; } /* Make sure Home link shows first in the list */ #vu-categories-collapse .navbar-nav > li:first-child { display: block !important; order: -1; } #vu-categories-collapse .navbar-nav > li:first-child > a { display: flex !important; visibility: visible !important; } .navbar-nav { margin: 0; padding: 0; } .navbar-nav > li { border-bottom: 1px solid #f0f0f0; } .navbar-nav > li:last-child { border-bottom: none; } /* Ensure Home link and all nav items are visible on mobile */ .navbar-nav { display: block !important; } .navbar-nav > li { display: block !important; width: 100%; visibility: visible !important; opacity: 1 !important; } .navbar-nav > li:first-child { display: block !important; visibility: visible !important; } .navbar-nav > li > a { padding: 16px 20px; font-size: 16px; min-height: 54px; display: flex !important; visibility: visible !important; align-items: center; color: var(--vu-aubergine, #22185e); font-weight: 500; transition: all 0.2s; } .navbar-nav > li > a:hover, .navbar-nav > li > a:focus { background-color: rgba(91, 194, 231, 0.08); color: var(--vu-aubergine, #22185e); padding-left: 25px; } .navbar-nav > li.active > a { background-color: rgba(91, 194, 231, 0.12); color: var(--vu-aubergine, #22185e); font-weight: 600; } /* Push content down to account for sticky header + nav */ body { padding-top: 62px !important; } } /* ===== FORM ENHANCEMENTS FOR MOBILE ===== */ @media (max-width: 768px) { /* All form controls */ input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], input[type="date"], textarea, select { font-size: 16px !important; padding: 12px 15px; min-height: 48px; border-radius: 4px; } textarea { min-height: 120px; } /* All buttons */ .btn, button, input[type="submit"], input[type="button"] { min-height: 44px; padding: 12px 20px; font-size: 15px; border-radius: 22px; cursor: pointer; } /* Checkboxes and radio buttons */ input[type="checkbox"], input[type="radio"] { min-width: 20px; min-height: 20px; cursor: pointer; } /* Labels */ label { font-size: 15px; margin-bottom: 8px; display: block; } /* Validation messages */ .text-danger, .field-validation-error { font-size: 13px; margin-top: 5px; display: block; } } /* ===== TYPOGRAPHY MOBILE ADJUSTMENTS ===== */ @media (max-width: 768px) { h1 { font-size: 26px; line-height: 1.3; margin-bottom: 20px; } h2 { font-size: 22px; line-height: 1.3; margin-bottom: 18px; } h3 { font-size: 20px; line-height: 1.3; margin-bottom: 15px; } h4 { font-size: 18px; line-height: 1.3; margin-bottom: 12px; } p { font-size: 15px; line-height: 1.6; margin-bottom: 12px; } a { font-size: inherit; } } /* ===== TABLE MOBILE RESPONSIVENESS ===== */ @media (max-width: 768px) { /* Generic table to card conversion */ table:not(.no-mobile-transform) { border: none; } table:not(.no-mobile-transform) thead { display: none; } table:not(.no-mobile-transform) tbody { display: block; } table:not(.no-mobile-transform) tr { display: block; margin-bottom: 15px; border: 1px solid #ddd; border-radius: 8px; padding: 15px; background: #fff; } table:not(.no-mobile-transform) td { display: block; text-align: left; padding: 8px 0; border: none; font-size: 14px; } table:not(.no-mobile-transform) td:before { content: attr(data-label); font-weight: 600; display: inline-block; margin-right: 10px; } } /* ===== VU SHOP BRAND CSS - CLEANED VERSION ===== */ /* ===== BANNER STYLES ===== */ .banners-outer { width: 100%; margin-bottom: 30px; display: block; } .banners.carousel { width: 100%; height: auto; } .banners .carousel-inner .item { width: 100%; height: auto; } .banners .carousel-inner .item img, .banners .carousel-inner .item video { width: 100%; height: auto; max-height: 520px; object-fit: cover; display: block; } .banners .carousel-indicators { bottom: 20px; } .banners .carousel-indicators li { background-color: rgba(255, 255, 255, 0.5); border: 1px solid rgba(255, 255, 255, 0.8); } .banners .carousel-indicators .active { background-color: var(--vu-melon); } /* Mobile banner responsiveness */ @media (max-width: 768px) { .banners-outer { margin-bottom: 20px; display: block !important; } .banners { display: block !important; } .banners .carousel-inner { height: auto; } .banners .carousel-inner .item { display: block; height: auto; } .banners .carousel-inner .item.active { display: block !important; } .banners .carousel-inner .item img, .banners .carousel-inner .item video { max-height: 300px; width: 100%; display: block; } .banners .carousel-control { display: none; /* Hide arrows on mobile for better UX */ } } /* ===== HEADER STYLES ===== */ .vu-header-top { background: var(--vu-blue); padding: 15px 0; color: var(--vu-white); } .vu-title { color: var(--vu-aubergine); font-weight: 600; text-align:center; } .vu-header-top .container { display: flex; align-items: center; justify-content: space-between; } .vu-header-brand .vu-logo { height: 65px; width: auto; } .vu-header-actions { display: flex; align-items: center; gap: 15px; height: 100%; } .vu-header-search { display: flex; align-items: center; height: 38px; /* background: rgba(255, 255, 255, 0.2); border-radius: 25px; padding: 5px 15px; border: 1px solid rgba(255, 255, 255, 0.3);*/ } .vu-header-login { display: flex; align-items: center; height: 38px; } .vu-search-input { background: transparent; border: none; outline: none; color: white; padding: 8px 12px; width: 200px; font-size: 14px; } .vu-search-input::placeholder { color: #999; opacity: 1; } .vu-search-btn { background: transparent; border: none; color: var(--vu-white); padding: 8px; cursor: pointer; } .vu-login-btn { background: var(--vu-aubergine); color: var(--vu-white) !important; padding: 10px 20px; border-radius: 25px; text-decoration: none; font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 8px; border: none; transition: all 0.3s ease; } .vu-header-cart i.fa-shopping-cart { color: var(--vu-purple) !important; } .vu-login-btn:hover { background: var(--vu-aubergine); color: var(--vu-white) !important; text-decoration: none; opacity: 0.9; } .vu-header-cart { display: flex; align-items: center; height: 38px; } .vu-cart-link { color: var(--vu-white) !important; font-size: 20px; text-decoration: none; position: relative; display: flex; align-items: center; height: 100%; } .vu-cart-badge { position: absolute; top: -8px; right: -8px; background: #6161FF; color: var(--vu-white); border-radius: 50%; padding: 2px 6px; font-size: 12px; font-weight: bold; min-width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; } .alert-vushop { background-color: var(--vu-aubergine); /* dark purple */ color: #fff; /* white text */ padding: 10px 20px; text-align: center; border-radius: 25px; font-weight: 500; font-size: 10pt; display: inline-block; width: 100%; margin: 10px 0; } /* Cost Centre Payment Styling */ /*#pt_CostCentreID { border: 2px solid #e1e5e9; border-radius: 8px; padding: 12px 16px; font-size: 14px; transition: all 0.3s ease; width: 60% !important; margin-left: 6px !important; display: inline-block !important; } #pt_CostCentreID:focus { border-color: var(--vu-aubergine, #4a2c6a); box-shadow: 0 0 0 3px rgba(74, 44, 106, 0.1); outline: none; }*/ #pt_CostCentreMessage { font-weight: 500; font-size: 14px; } .cctop label { font-weight: 500; color: #333; margin-bottom: 8px; } /* ===== ORDER APPROVAL STYLES ===== */ .vu-page-header { background: linear-gradient(135deg, var(--vu-aubergine, #4a2c6a) 0%, #5a3c7a 100%); color: white; padding: 20px; border-radius: 12px; margin-bottom: 30px; } .vu-page-header h2 { color: white; margin: 0; font-weight: 600; } .vu-approval-section { margin-bottom: 40px; } .vu-section-title { color: var(--vu-aubergine, #4a2c6a); font-weight: 600; font-size: 20px; margin-bottom: 20px; border-bottom: 2px solid var(--vu-aubergine, #4a2c6a); padding-bottom: 10px; } .vu-approvals-container { background: #fafafa; border-radius: 12px; padding: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .vu-table { background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,0.05); } .vu-table-header { background: var(--vu-aubergine, #4a2c6a); color: white; } .vu-table-header th { font-weight: 600; border: none; padding: 15px 12px; } .vu-table-row:hover { background-color: #f8f9fa; } .vu-table-row td { padding: 15px 12px; vertical-align: middle; } .vu-link-primary { color: var(--vu-aubergine, #4a2c6a); text-decoration: none; font-weight: 500; } .vu-link-primary:hover { color: #5a3c7a; text-decoration: none; } .vu-btn-approve { background: linear-gradient(135deg, #28a745 0%, #20c997 100%); border: none; border-radius: 6px; padding: 8px 16px; font-weight: 500; transition: all 0.3s ease; } .vu-btn-approve:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3); } .vu-btn-reject { background: linear-gradient(135deg, #dc3545 0%, #c82333 100%); border: none; border-radius: 6px; padding: 8px 16px; font-weight: 500; transition: all 0.3s ease; } .vu-btn-reject:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3); } .vu-btn-comment { border-radius: 6px; font-size: 12px; padding: 4px 8px; margin-left: 8px; } .vu-status-approved { color: #28a745; font-weight: 600; } .vu-status-rejected { color: #dc3545; font-weight: 600; } .vu-pagination-info { margin: 15px 0; font-size: 14px; color: #666; } .vu-pagination { display: flex; justify-content: center; } .vu-no-data { text-align: center; padding: 40px 20px; } /* Order Details Modal Styles */ .vu-order-details { font-size: 14px; } .vu-order-info { margin-bottom: 25px; } .vu-info-table { margin-bottom: 0; } .vu-info-label { font-weight: 600; color: var(--vu-aubergine, #4a2c6a); width: 140px; padding: 8px 12px; } .vu-address { line-height: 1.4; } .vu-address div { margin-bottom: 2px; } .vu-order-items h5 { color: var(--vu-aubergine, #4a2c6a); font-weight: 600; margin-bottom: 15px; } .vu-items-table { font-size: 13px; } .vu-totals-row { background-color: #f8f9fa; } .vu-final-total { background-color: var(--vu-aubergine, #4a2c6a); color: white; } .vu-final-total td { color: white; font-weight: 600; } .vu-discount { color: #dc3545; font-weight: 600; } .vu-custom-fields { margin-top: 25px; } .vu-custom-fields h5 { color: var(--vu-aubergine, #4a2c6a); font-weight: 600; margin-bottom: 15px; } /* White navigation bar */ .vu-header-nav { background: var(--vu-white); border-bottom: 1px solid #e0e0e0; padding: 10px 0; } .vu-header-categories { gap: 30px; } .vu-category-link { color: var(--vu-aubergine) !important; font-weight: 500; text-decoration: none; font-size: 16px; padding: 10px 0 !important; border-bottom: 2px solid transparent; transition: all 0.3s ease; } .vu-category-link:hover { color: var(--vu-blue) !important; /* border-bottom-color: var(--vu-white); */} /* Mobile toggle button */ .vu-mobile-toggle { border: none; background: var(--vu-white); color: var(--vu-aubergine); border-radius: 8px; padding: 8px 12px; } .vu-mobile-toggle:focus { box-shadow: none; background: var(--vu-white); } Dropdown improvements .vu-dropdown-wrapper { position: relative; display: block; width: 100%; } /* ===== NAVIGATION STYLES ===== */ /* Navigation hover color: #0C71AC (VU Blue) */ .vu-header-nav { background: var(--vu-white); border: none; border-radius: 0; margin-bottom: 0; min-height: 60px; border-top: 1px solid #eee; } .vu-header-nav .navbar-toggle { border: 2px solid var(--vu-aubergine); margin-top: 13px; margin-bottom: 13px; } .vu-header-nav .navbar-toggle:hover, .vu-header-nav .navbar-toggle:focus { background-color: var(--vu-aubergine); } .vu-header-nav .navbar-toggle .icon-bar { background-color: var(--vu-aubergine); } .vu-header-nav .navbar-toggle:hover .icon-bar, .vu-header-nav .navbar-toggle:focus .icon-bar { background-color: var(--vu-white); } .vu-header-nav .navbar-nav { margin: 0; } .vu-header-nav .navbar-nav > li { text-align: center; } .vu-header-nav .navbar-nav > li > a { color: var(--vu-aubergine) !important; font-weight: 600; font-size: 16px; padding: 20px 15px; border-bottom: 3px solid transparent; transition: all 0.3s ease; } .vu-header-nav .navbar-nav > li > a:hover, .vu-header-nav .navbar-nav > li > a:focus { color: #0C71AC !important; background-color: transparent; border-bottom: 3px solid #0C71AC !important; } /* Center navigation on desktop */ @media (min-width: 768px) { .vu-header-nav .navbar-nav { float: none; display: inline-block; } .vu-header-nav .navbar-collapse { text-align: center; } } .vu-dropdown { width: 100%; border-radius: 20px; padding-right: 40px !important; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: var(--vu-white); border: 1.5px solid var(--vu-aubergine); color: var(--vu-aubergine); font-size: 16px; height: 48px; padding: 0px 16px; box-sizing: border-box; } .vu-dropdown-arrow { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 14px; color: var(--vu-aubergine); pointer-events: none; z-index: 1; } .vu-dropdown:focus { outline: none; border-color: var(--vu-blue); box-shadow: 0 0 0 2px rgba(91, 194, 231, 0.2); } /* Mobile responsiveness */ @media (max-width: 768px) { /* Header container adjustments */ .vu-header-top .container { justify-content: flex-start; flex-wrap: wrap; } /* Logo left-aligned */ .vu-header-brand { flex: 0 0 auto; order: 1; } /* Header actions on the right */ .vu-header-actions { gap: 10px; order: 2; margin-left: auto; } .vu-header-search { display: none; } /* Login button with text visible, no icon */ .vu-header-login .vu-login-btn { padding: 10px 20px; border-radius: 25px; width: auto; height: auto; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; } .vu-header-login .vu-login-btn i { display: none; } .vu-header-login .vu-login-btn span { display: inline-block !important; } .vu-header-nav { padding: 5px 0; } } /* ===== VUSHOP STANDARDIZED MODAL STYLES ===== */ /* Bootstrap modal overrides for VUSHOP design consistency */ .vu-header-nav .navbar-nav > li > a { padding: 15px; /* border-bottom: 1px solid #eee; */} /* Removed to ensure all categories have hover underline .vu-header-nav .navbar-nav > li:last-child > a { border-bottom: none; } */ .vu-header-nav .navbar-nav > li > a:hover, .vu-header-nav .navbar-nav > li > a:focus { background-color: transparent; border-bottom: 3px solid #0C71AC !important; color: #0C71AC !important; } /* Ensure all nav items including last child have consistent hover behavior */ .vu-header-nav .navbar-nav > li:last-child > a:hover, .vu-header-nav .navbar-nav > li:last-child > a:focus { border-bottom: 3px solid #0C71AC !important; color: #0C71AC !important; } .modal.vu-modal { z-index: 1050; } .modal.vu-modal .modal-backdrop { background-color: rgba(0, 0, 0, 0.5); } /* Universal Modal Backdrop Styling for ALL VUSHOP Modals */ .modal-backdrop, .modal.vu-modal .modal-backdrop { background-color: rgba(0, 0, 0, 0.5); backdrop-filter: blur(2px); } /* Universal Modal Base Styling for ALL VUSHOP Modals */ .modal { font-family: 'Source Sans Pro', Arial, sans-serif; } /* Universal Modal Dialog Styling for ALL VUSHOP Modals */ .modal-dialog, .modal.vu-modal .modal-dialog { margin: 30px auto; width: auto; max-width: 500px; position: relative; animation: modalSlideIn 0.3s ease-out; } @keyframes modalSlideIn { from { opacity: 0; transform: translateY(-50px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Large modal dialogs */ .modal-dialog.modal-lg, .modal.vu-modal .modal-dialog.modal-lg { max-width: 800px; } /* Extra large modal dialogs */ .modal-dialog.modal80, .modal.vu-modal .modal-dialog.modal80 { max-width: 80%; width: 80%; } /* Universal Modal Content Styling for ALL VUSHOP Modals */ .modal-content, .modal.vu-modal .modal-content { border: 2px solid var(--vu-aubergine); border-radius: 16px; box-shadow: 0 10px 40px rgba(30, 18, 72, 0.15); background: var(--white); overflow: hidden; font-family: 'Source Sans Pro', Arial, sans-serif; } /* Universal Modal Header Styling for ALL VUSHOP Modals */ .modal-header, .modal.vu-modal .modal-header { border-bottom: none; padding: 10px 10px 0; background: transparent; position: relative; } .modal-header .modal-title, .modal.vu-modal .modal-header .modal-title { font-family: 'Source Sans Pro', Arial, sans-serif; font-size: 20px; font-weight: 600; color: var(--vu-aubergine); margin: 0; text-align: center; width: 100%; } .modal-header .close, .modal.vu-modal .modal-header .close { position: absolute; top: 15px; right: 20px; font-size: 16px; font-weight: 300; color: #999; opacity: 0.6; background: none; border: none; cursor: pointer; padding: 4px 8px; line-height: 1; z-index: 1000; user-select: none; pointer-events: auto; } .modal-header .close:hover, .modal.vu-modal .modal-header .close:hover { opacity: 1; color: var(--vu-aubergine); text-decoration: none; } .modal-header .close:focus, .modal.vu-modal .modal-header .close:focus { outline: 2px solid var(--vu-aubergine); outline-offset: 2px; } .modal-header .close:active, .modal.vu-modal .modal-header .close:active { transform: scale(0.95); } /* Universal Modal Body Styling for ALL VUSHOP Modals */ .modal-body, .modal.vu-modal .modal-body { padding: 15px; text-align: center; min-height: 60px; font-family: 'Source Sans Pro', Arial, sans-serif; color: var(--vu-aubergine); line-height: 1.5; } /* For non-VU modals, center content */ .modal-body:not(.vu-modal .modal-body) { display: flex; flex-direction: column; align-items: center; justify-content: center; } .modal-body-left { display: flex; flex-direction: column; justify-content:left; padding:10px; } /* Universal Modal Footer Styling for ALL VUSHOP Modals */ .modal-footer, .modal.vu-modal .modal-footer { border-top: none; padding: 0 15px 15px; text-align: center; background: transparent; display: flex; justify-content: center; gap: 15px; } /* Universal Modal Button Styling for ALL VUSHOP Modal Buttons */ .modal-footer .btn, .modal-footer button, .modal-body .btn, .modal-body button, .vu-modal-btn { border: none; border-radius: 25px; padding: 12px 30px; font-family: 'Source Sans Pro', Arial, sans-serif; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; text-decoration: none; display: inline-block; min-width: 100px; margin: 0 5px; } /* Primary button style (OK, Save, Confirm, etc.) */ .modal-footer .btn.btn-primary, .modal-footer .btn:not(.btn-secondary):not(.btn-danger):not(.btn-warning), .modal-footer button.btn-primary, .modal-body .btn.btn-primary, .modal-body button.btn-primary, .vu-modal-btn.primary { background: var(--vu-aubergine); color: white; } .modal-footer .btn.btn-primary:hover, .modal-footer .btn:not(.btn-secondary):not(.btn-danger):not(.btn-warning):hover, .modal-footer button.btn-primary:hover, .modal-body .btn.btn-primary:hover, .modal-body button.btn-primary:hover, .vu-modal-btn.primary:hover { background: #2A1D5C; color: white; text-decoration: none; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(30, 18, 72, 0.3); } /* Secondary button style (Cancel, Close, etc.) */ .modal-footer .btn.btn-secondary, .modal-footer .btn-secondary, .modal-footer button.btn-secondary, .modal-body .btn.btn-secondary, .modal-body button.btn-secondary, .vu-modal-btn.secondary { background: #f8f9fa; color: var(--vu-aubergine); border: 1px solid #dee2e6; } .modal-footer .btn.btn-secondary:hover, .modal-footer .btn-secondary:hover, .modal-footer button.btn-secondary:hover, .modal-body .btn.btn-secondary:hover, .modal-body button.btn-secondary:hover, .vu-modal-btn.secondary:hover { background: #e9ecef; color: var(--vu-aubergine); text-decoration: none; transform: translateY(-1px); } /* Danger button style (Delete, Remove, etc.) */ .modal-footer .btn.btn-danger, .modal-footer .btn-danger, .modal-footer button.btn-danger, .modal-body .btn.btn-danger, .modal-body button.btn-danger, .vu-modal-btn.danger { background: var(--vu-alert); color: white; } .modal-footer .btn.btn-danger:hover, .modal-footer .btn-danger:hover, .modal-footer button.btn-danger:hover, .modal-body .btn.btn-danger:hover, .modal-body button.btn-danger:hover, .vu-modal-btn.danger:hover { background: #c82333; color: white; text-decoration: none; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3); } /* Focus states for all modal buttons */ .modal-footer .btn:focus, .modal-footer button:focus, .modal-body .btn:focus, .modal-body button:focus, .vu-modal-btn:focus { outline: none; box-shadow: 0 0 0 3px rgba(74, 44, 106, 0.25); text-decoration: none; } /* VUSHOP Modal Message Styles */ .vu-modal-message { display: flex; align-items: center; gap: 12px; font-family: 'Source Sans Pro', Arial, sans-serif; font-size: 16px; color: var(--vu-aubergine); line-height: 1.4; margin-bottom: 20px; } .vu-modal-message.error { color: var(--vu-alert); } .vu-modal-message.success { color: var(--vu-aubergine); } .vu-modal-message.warning { color: #ffc107; } .vu-modal-message.info { color: var(--vu-blue); } .vu-modal-message i { font-size: 20px; flex-shrink: 0; } .vu-modal-message.error i { color: var(--vu-alert); } .vu-modal-message.success i { color: var(--vu-aubergine); } .vu-modal-message.warning i { color: #ffc107; } .vu-modal-message.info i { color: var(--vu-blue); } /* VUSHOP Modal Buttons */ .vu-modal-btn { border: none; border-radius: 50px; padding: 12px 30px; font-family: 'Source Sans Pro', Arial, sans-serif; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; text-decoration: none; display: inline-block; min-width: 100px; margin: 0 5px; } .vu-modal-btn:focus { outline: none; text-decoration: none; } .vu-modal-btn.primary { background: var(--aubergine); color: var(--white); } .vu-modal-btn.primary:hover { background: #2A1D5C; color: var(--white); text-decoration: none; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(30, 18, 72, 0.3); } .vu-modal-btn.secondary { background: var(--var-8-black); color: var(--vu-aubergine); border: 1px solid var(--var-20-black); } .vu-modal-btn.secondary:hover { background: var(--var-20-black); color: var(--vu-aubergine); text-decoration: none; transform: translateY(-1px); } .vu-modal-btn.danger { background: var(--vu-alert); color: var(--white); } .vu-modal-btn.danger:hover { background: #dc3545; color: var(--white); text-decoration: none; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(255, 0, 4, 0.3); } .vu-modal-btn.success { background: var(--vu-aubergine); color: var(--white); } .vu-modal-btn.success:hover { background: #0f0a30; color: var(--white); text-decoration: none; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(30, 18, 72, 0.3); } /* Close button override */ .modal.vu-modal .close { position: absolute; top: 15px; right: 20px; font-size: 24px; color: var(--var-57-black); opacity: 0.7; transition: all 0.3s ease; } .modal.vu-modal .close:hover { color: var(--vu-aubergine); opacity: 1; } /* Responsive modal styling for ALL VUSHOP modals */ @media (max-width: 768px) { .modal-dialog, .modal.vu-modal .modal-dialog { margin: 15px; max-width: none; width: calc(100% - 30px); } .modal-dialog.modal-lg, .modal.vu-modal .modal-dialog.modal-lg { width: calc(100% - 30px); max-width: none; } .modal-dialog.modal80, .modal.vu-modal .modal-dialog.modal80 { width: calc(100% - 30px); max-width: none; } .modal-header, .modal.vu-modal .modal-header { padding: 15px 20px 0; } .modal-header .modal-title, .modal.vu-modal .modal-header .modal-title { font-size: 18px; } .modal-header .close, .modal.vu-modal .modal-header .close { top: 10px; right: 15px; font-size: 24px; } .modal-body, .modal.vu-modal .modal-body { padding: 20px; min-height: 80px; } .modal-footer, .modal.vu-modal .modal-footer { padding: 0 20px 20px; flex-direction: column; gap: 10px; } .modal-footer .btn, .modal-footer button, .modal-body .btn, .modal-body button, .vu-modal-btn { width: 100%; margin: 0; min-width: auto; } .modal.vu-modal .modal-footer { padding: 0 20px 20px; } .vu-modal-message { font-size: 14px; } .vu-modal-btn { font-size: 13px; padding: 10px 20px; min-width: 80px; } } /* ===== END VUSHOP MODAL STYLES ===== */ /* ===== VUSHOP RESPONSIVE HEADER & MOBILE MENU ===== */ /* Mobile hamburger menu button */ .vu-mobile-menu-btn { display: none; background: transparent; border: none; color: var(--white); font-size: 24px; padding: 10px; cursor: pointer; position: absolute; left: 15px; top: 50%; transform: translateY(-50%); z-index: 1001; } .vu-mobile-menu-btn:hover { color: var(--var-8-black); } .vu-mobile-menu-btn:focus { outline: none; } /* Desktop/Mobile visibility toggles */ .vu-desktop-only { display: block !important; } .vu-mobile-only { display: none !important; } /* Categories toggle button */ .vu-categories-toggle { display: none; background: transparent; border: 1px solid var(--var-20-black); color: var(--vu-aubergine); padding: 8px 15px; font-family: 'Source Sans Pro', Arial, sans-serif; font-size: 14px; border-radius: 4px; cursor: pointer; margin: 10px 0; width: 100%; text-align: center; } .vu-categories-toggle:hover { background: var(--var-3-black); border-color: var(--vu-blue); } .vu-categories-toggle i { margin-left: 8px; transition: transform 0.3s ease; } .vu-categories-toggle.expanded i { transform: rotate(180deg); } /* Categories collapse */ .vu-categories-collapse { display: block !important; } .vu-categories-collapse.collapsed { display: none !important; } /* Header adjustments for mobile */ .vu-header-top .container { position: relative; } .vu-header-top .navbar-brand { margin-left: 0; } .vu-header-actions { margin-left: auto; } /* Mobile Menu Styles - Enhanced from existing MobileMenus.css */ #mainNavMobile { z-index: 2001; } #mainNavMobile nav { background: var(--aubergine); font-family: 'Source Sans Pro', Arial, sans-serif; } #mainNavMobile .main-menu li a { color: var(--white); padding: 15px 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); transition: background-color 0.3s ease; } #mainNavMobile .main-menu li a:hover { background-color: rgba(255, 255, 255, 0.1); color: var(--white); } /* Mobile search in slide-out menu */ .vu-mobile-search { padding: 20px; background: rgba(255, 255, 255, 0.1); margin-bottom: 10px; } .vu-mobile-search .vu-search-input { width: 100%; padding: 12px 15px; border: none; border-radius: 25px; font-size: 16px; background: var(--white); color: var(--vu-aubergine); } .vu-mobile-search .vu-search-input::placeholder { color: #999; opacity: 1; } /* Cart slide-out menu enhancements - VUSHOP Style */ /* ===== MY CART SLIDE-OUT STYLING ===== */ /* Cart header */ #subNavMobile nav .sub-menu > li:first-child { background: var(--vu-aubergine); color: var(--white); font-size: 18px; font-weight: 600; padding: 0; text-align: left; position: relative; width: 100%; margin: 0; box-sizing: border-box; } /* Cart empty state */ #subNavMobile .sub-menu > li h3 { text-align: center; color: var(--vu-aubergine); font-size: 16px; font-weight: 600; margin: 20px 0; } /* Cart subtotal section */ #subNavMobile .subtotal { padding: 20px; font-size: 16px; border-top: 1px solid var(--var-20-black); color: var(--vu-aubergine); background: #f7f7f7; } #subNavMobile .subtotal .lbl { font-weight: 600; color: var(--vu-aubergine); } #subNavMobile .subtotal .pull-right { font-weight: 700; font-size: 18px; color: var(--vu-aubergine); } /* Checkout button */ #subNavMobile .sub-menu > li:last-child .btn { display: block; width: 90%; margin: 0 auto 20px auto; background: var(--vu-melon); border: none; border-radius: 25px; color: white; font-size: 16px; font-weight: 600; text-align: center; transition: background 0.3s ease; } #subNavMobile .sub-menu > li:last-child .btn:hover { background: var(--vu-melon-hover); } /* Cart items section */ #subNavMobile .cart-item tr { display: flex; align-items: flex-start; gap: 15px; padding: 15px 20px; border: none !important; vertical-align: middle !important; } #subNavMobile table.cart-item td { vertical-align: middle !important; } #subNavMobile .cart-item .item-img .thumbnail { width: 70px; height: 70px; border-radius: 6px; vertical-align: middle !important; object-fit: cover; } #subNavMobile .cart-item .item-desc { display: flex !important; flex-direction: column !important; justify-content: center !important; height: 100% !important; padding: 0 10px !important; } #subNavMobile .cart-item .cart-item-itemtotal { font-weight: 600; color: var(--vu-aubergine); font-size: 14px; } #subNavMobile .cart-item .cart-item-edit { color: var(--vu-melon); font-size: 12px; text-decoration: none; } #subNavMobile .cart-item .cart-item-edit:hover { text-decoration: underline; } #subNavMobile .subtotal { background: #f7f7f7; color: var(--vu-aubergine); font-size: 16px; padding: 20px; } #subNavMobile .subtotal .lbl { font-weight: 600; color: var(--vu-aubergine); } #subNavMobile .subtotal .pull-right { font-weight: 700; font-size: 18px; color: var(--vu-aubergine); } #subNavMobile .sub-menu > li:last-child .btn { display: block; width: 90%; margin: 0 auto 20px auto; padding: 12px 20px; background: var(--vu-melon); border: none; border-radius: 25px; color: white; font-size: 16px; font-weight: 600; text-align: center; transition: background 0.3s ease; } #subNavMobile .sub-menu > li:last-child .btn:hover { background: var(--vu-melon-hover); } /* Optional: better empty cart styling */ #subNavMobile .sub-menu > li h3 { text-align: center; color: var(--vu-aubergine); font-size: 16px; font-weight: 600; margin: 20px 0; } /* Optional: cart item styling improvements */ #subNavMobile .cart-item tr { display: flex; align-items: flex-start; gap: 15px; padding: 15px 20px; } #subNavMobile .cart-item .item-desc .cart-item-desc { font-weight: 600; display: inline-block; padding-bottom: 4px; justify-content:center; margin-top:10px; margin-left: 0 !important; /* ensure flush left */ } /* 2. Bolder underline below item name */ #subNavMobile .cart-item .item-desc { position: relative; padding-left: 0 !important; margin-left: 0 !important; } #subNavMobile .cart-item .item-desc .cart-item-desc { display: block; text-align: left; margin-left: 0 !important; padding-left: 0 !important; font-weight: 600; border-bottom: 3px solid #2d2150; width: 100%; } /* 3. Remove grey border/line around Subtotal section */ #subNavMobile .subtotal { border: none !important; box-shadow: none !important; padding: 0; margin: 10px 0; } /* Also remove inner lines or clears if present */ #subNavMobile .subtotal .clearfix { display: none; } /* Optional: remove spacing above subtotal */ #subNavMobile .subtotal .lbl { margin-top: 0 !important; } /* 4. Ensure Checkout button is smaller and right-aligned */ #subNavMobile li:last-child { text-align: right; } #subNavMobile .cbtn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 24px; font-size: 16px; font-weight: 600; color: var(--vu-purple); /* Dark text from your palette */ background-color: var(--vu-melon); /* Coral-like background */ border: none; border-radius: 999px; max-width: 120px; height: 40px; /* Adjust as needed */ text-align: center; vertical-align: middle; } #subNavMobile .cart-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px; background-color: var(--vu-aubergine); width: 100%; margin: 0; box-sizing: border-box; } #subNavMobile .cart-title { color: var(--white); font-size: 18px; font-weight: 600; flex: 1; text-align: left; } #subNavMobile .cart-header #nav-close { color: var(--white); font-size: 20px; text-decoration: none; padding: 5px; margin: 0; } #subNavMobile .cart-header #nav-close:hover { color: rgba(255, 255, 255, 0.8); } /* Prevent scrollbars and ensure proper layout */ #subNavMobile .sub-menu { margin: 0; padding: 0; list-style: none; width: 100%; } #subNavMobile .sub-menu > li { width: 100%; margin: 0; padding: 0; box-sizing: border-box; } .empty-cart-message { text-align: center; padding: 20px 16px; } .empty-cart-message h3 { color: var(--white); margin: 0; font-size: 18px; font-weight: 600; background: none !important; border: none !important; padding: 0 !important; display: inline-block; border-radius: 0 !important; box-shadow: none !important; } #nav-close .fa { font-size: 18px; font-weight: 1000; /* works in FA Pro */ color: white; display: flex; align-items: center; } #subNavMobile .cart-item .cart-item-edit { color: var(--vu-melon); font-size: 12px; text-decoration: none; } #subNavMobile .cbtn:hover { background-color: var(--vu-melon-hover) !important; cursor: pointer; } /***/ /* === VU SHOP My Cart Final Fix === */ /* Header - Remove duplicate styling to prevent conflicts */ /* Styling now handled by cart-header class above */ /* Cart Item */ #subNavMobile .cart-item tr { display: flex; gap: 10px; padding: 10px 15px; border-bottom: 1px solid #ddd; } #subNavMobile .cart-item .item-desc { flex: 1; font-size: 14px; font-weight: 600; color: var(--vu-aubergine); margin-bottom: 5px; } #subNavMobile .cart-item .item-details { font-size: 12px; color: #555; } /* Subtotal */ #subNavMobile .subtotal { padding: 15px; background: #f7f7f7; font-size: 14px; font-weight: 600; color: var(--vu-aubergine); border-top: 1px solid #ccc; } #subNavMobile .subtotal .pull-right { font-weight: 700; font-size: 16px; } /* Checkout Button */ #subNavMobile .sub-menu > li:last-child .btn { display: block; width: 80%; margin: 15px auto; padding: 10px; background: var(--vu-melon); color: white; font-weight: 600; font-size: 14px; border: none; border-radius: 20px; text-align: center; transition: background 0.3s ease; } #subNavMobile .sub-menu > li:last-child .btn:hover { background: var(--vu-melon-hover); } /* Empty Cart - Match Image 26.png exactly */ #subNavMobile .sub-menu > li h3 { background: var(--vu-aubergine); color: white; font-weight: 600; font-size: 16px; margin: 40px auto 30px auto; border-radius: 25px; text-align: center; width: fit-content; max-width: 80%; box-sizing: border-box; } /* Empty cart container styling - target the li with h3 inside */ #subNavMobile .sub-menu > li:nth-child(2) { text-align: center; min-height: 200px; display: flex; align-items: center; justify-content: center; } /* Continue shopping button for empty cart - target the li with input button */ #subNavMobile .sub-menu > li:nth-child(3) { text-align: center; } /* Style both regular buttons and input buttons for continue shopping */ #subNavMobile .sub-menu li .btn, #subNavMobile .sub-menu li input.btn { background: var(--vu-melon) !important; color: white !important; font-weight: 600; font-size: 14px; border: none; border-radius: 20px; text-decoration: none; transition: background 0.3s ease; display: inline-block; cursor: pointer; border-color: var(--vu-melon) !important; } #subNavMobile .sub-menu li .btn:hover, #subNavMobile .sub-menu li input.btn:hover { background: var(--vu-melon-hover) !important; color: white !important; text-decoration: none; border-color: var(--vu-melon-hover) !important; } /* Overall mobile cart structure */ #subNavMobile nav { background: white; font-family: 'Source Sans Pro', Arial, sans-serif; box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1); } #subNavMobile nav .sub-menu { padding: 0 !important; margin: 0; list-style: none; } /* ===== END RESPONSIVE HEADER & MOBILE MENU ===== */ /* ===== VUSHOP TABLE STYLING - Match Table.png ===== */ /* Base table styling */ .zstable, .vu-order-table, .slider-table, table.table { width: 100%; border-collapse: collapse; border-spacing: 0; font-family: 'Source Sans Pro', Arial, sans-serif; font-size: 14px; background: white; border: 1px solid var(--var-20-black); border-radius: 8px; overflow: hidden; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); margin-bottom: 20px; } /* Table headers - Dark aubergine background like Table.png */ .zstable thead th, .vu-order-table thead th, .slider-table tr:first-child th, table.table thead th { background: var(--vu-aubergine); color: white; font-weight: 600; font-size: 14px; padding: 15px 12px; text-align: left; border: none; border-bottom: 2px solid var(--vu-aubergine); } /* Table body cells */ .zstable tbody td, .vu-order-table tbody td, .slider-table td, table.table tbody td { padding: 12px; border-bottom: 1px solid var(--var-20-black); border-right: 1px solid var(--var-20-black); vertical-align: middle; color: var(--var-85-black); } .zstable tbody td:last-child, .vu-order-table tbody td:last-child, .slider-table td:last-child, table.table tbody td:last-child { border-right: none; } /* Alternating row colors */ .zstable tbody tr:nth-child(even), .vu-order-table tbody tr:nth-child(even), table.table tbody tr:nth-child(even) { background: var(--var-3-black); } /* Hover effect for table rows */ .zstable tbody tr:hover, .vu-order-table tbody tr:hover, table.table tbody tr:hover { background: rgba(30, 18, 72, 0.05); } /* Table input fields (quantity controls) */ .zstable input[type="number"], .zstable input.form-control, .vu-order-table input[type="number"], table.table input[type="number"], table.table input.form-control { width: 80px; padding: 8px 12px; border: 1px solid var(--var-20-black); border-radius: 6px; font-size: 14px; text-align: center; background: white; transition: all 0.3s; } .zstable input[type="number"]:focus, .zstable input.form-control:focus, table.table input[type="number"]:focus, table.table input.form-control:focus { outline: none; border-color: var(--vu-aubergine); box-shadow: 0 0 0 3px rgba(30, 18, 72, 0.1); } /* Action buttons in tables */ .zstable .btn, .vu-order-table .btn, table.table .btn { padding: 8px 16px; border-radius: 6px; font-weight: 600; font-size: 12px; border: none; cursor: pointer; transition: all 0.3s; } /* Primary action buttons (Add to Cart, etc.) */ .zstable .btn-primary, .vu-order-table .btn-primary, table.table .btn-primary { background: var(--vu-melon); color: white; } .zstable .btn-primary:hover, .vu-order-table .btn-primary:hover, table.table .btn-primary:hover { background: var(--vu-melon-hover); } /* Secondary action buttons */ .zstable .btn-secondary, .vu-order-table .btn-secondary, table.table .btn-secondary { background: var(--var-20-black); color: var(--var-85-black); } .zstable .btn-secondary:hover, .vu-order-table .btn-secondary:hover, table.table .btn-secondary:hover { background: var(--var-57-black); color: white; } /* Danger buttons (delete, reject) */ .zstable .btn-danger, .vu-order-table .btn-danger, table.table .btn-danger { background: var(--vu-melon); color: white; } .zstable .btn-danger:hover, .vu-order-table .btn-danger:hover, table.table .btn-danger:hover { background: var(--vu-melon-hover); } /* Success buttons (approve) */ .zstable .btn-success, .vu-order-table .btn-success, table.table .btn-success { background: var(--vu-aubergine); color: white; } .zstable .btn-success:hover, .vu-order-table .btn-success:hover, table.table .btn-success:hover { background: #2a1a5e; } /* Icon styling in tables */ .zstable .fa, .vu-order-table .fa, table.table .fa { color: var(--var-57-black); cursor: pointer; transition: color 0.3s; } .zstable .fa:hover, .vu-order-table .fa:hover, table.table .fa:hover { color: var(--vu-aubergine); } /* Out of stock styling */ .zstable .out-of-stock, table.table .out-of-stock { color: var(--vu-melon); font-weight: 600; } /* Status badges in tables */ .vu-status-badge { padding: 4px 12px; border-radius: 12px; font-size: 12px; font-weight: 600; text-transform: uppercase; } .vu-status-pending { background: #fff3cd; color: #856404; } .vu-status-approved { background: #d4edda; color: #155724; } .vu-status-completed { background: #d4edda; color: #155724; } .vu-status-rejected { background: #f8d7da; color: #721c24; } .vu-status-cancelled { background: #f8d7da; color: #721c24; } /* Order links */ .vu-order-link { color: var(--vu-aubergine); text-decoration: none; font-weight: 600; } .vu-order-link:hover { color: var(--vu-aubergine); text-decoration: underline; } .ProductQuantity { width: 100% !important; } /*accounts */ .vu-account-title { background: var(--vu-aubergine); color: white !important; text-align: center; padding: 0 20px; /* remove vertical padding */ margin: 0 0 30px 0; font-size: 20px !important; font-weight: 600; border-radius: 50px; height: 50px; display: flex; align-items: center; justify-content: center; } table.vu-account-table { width: 100% !important; font-family: 'Segoe UI', sans-serif !important; font-size: 14px !important; color: #2c2543 !important; background-color: #fff !important; } table.vu-account-table, table.vu-account-table th, table.vu-account-table td { border: none !important; border-collapse: collapse !important; outline: none !important; box-shadow: none !important; } table.vu-account-table thead th { background-color: #fff !important; font-weight: 700 !important; color: var(--vu-purple) !important; text-align: left !important; padding: 10px 8px !important; white-space: nowrap !important; } table.vu-account-table tbody td { padding: 8px 8px !important; color: var(--vu-purple) !important; vertical-align: top !important; } table.vu-account-table td .fa { color: #444 !important; vertical-align: middle !important; font-size: 20px !important; } table.vu-account-table td .fa:hover { color: #d9534f !important; cursor: pointer !important; } table.vu-account-table input[type="checkbox"] { width: 18px !important; height: 18px !important; } .vu-primary-button { background-color: var(--vu-aubergine) !important; border: none !important; color: white !important; font-weight: 600 !important; min-width: 120px !important; padding: 6px 16px !important; font-size: 14px !important; line-height: 1.5 !important; border-radius: 999px !important; cursor: pointer !important; transition: background-color 0.3s ease, color 0.3s ease; } /* Product details table specific styling */ #PriceRange { margin-top: 20px; } #PriceRange thead th { background: var(--vu-aubergine); color: white; text-align: center; } #PriceRange tbody td { text-align: center; vertical-align: middle; } /* Slider table styling */ .slider-table { margin: 20px 0; border: 1px solid var(--var-20-black); } .slider-table th { background: var(--vu-aubergine); color: white; text-align: center; padding: 12px; } .slider-table td { padding: 15px; text-align: center; vertical-align: middle; } .slider-points input, .slider-amount input { width: 100%; max-width: 120px; margin: 0 auto; } /* Responsive table design */ .table-responsive { overflow-x: auto; margin-bottom: 20px; } @media (max-width: 768px) { .zstable, .vu-order-table, table.table { font-size: 12px; } .zstable thead th, .vu-order-table thead th, table.table thead th { padding: 10px 8px; font-size: 12px; } .zstable tbody td, .vu-order-table tbody td, table.table tbody td { padding: 8px 6px; } .zstable input[type="number"], table.table input[type="number"] { width: 60px; padding: 6px 8px; font-size: 12px; } .zstable .btn, .vu-order-table .btn, table.table .btn { padding: 6px 12px; font-size: 11px; } } /* ===== END TABLE STYLING ===== */ /* 1. Import Source Sans Pro font */ @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700&display=swap'); /* 2. Brand Variables */ :root { --melon: #ED6B5E; --aubergine: #1E1248; --vu-blue: #5BC2E7; --white: #FFFFFF; --black: #000000; --grape: #B49AD2; --var-85-black: #262626; --var-57-black: #6E6E6E; --var-20-black: #CCCCCC; --var-8-black: #EBEBEB; --var-3-black: #F7F7F7; --text-blue-on-white: #346FA8; --hyperlink: #0C71AC; /* Legacy names for backwards compatibility */ --vu-aubergine: #1e1248; --vu-black: #000; --vu-white: #fff; --vu-grey: #262626; --vu-melon: #ED6B5E; --vu-melon-disabled: #F4B2AA; --vu-melon-hover: #E85C4D; --vu-alert: #FF0004; --vu-purple: #1E1348; /* Dark purple for text */ --vu-purple-light: #382863; /* Slightly lighter for borders */ } /* 3. Base Font & Body */ body { font-family: 'Source Sans Pro', Arial, sans-serif; font-size: 10pt; /* Body copy 10 points */ color: var(--vu-aubergine); margin: 0; padding: 0; background: var(--var-3-black) !important; } /* Typography Hierarchy - ZS Standards */ h1, .h1 { font-size: 14pt; /* Headers 14 points */ font-weight: 700; color: var(--vu-aubergine); margin-bottom: 16px; } h2, .h2 { font-size: 12pt; /* Sub heading 12 points */ font-weight: 600; color: var(--vu-aubergine); margin-bottom: 12px; } h3, .h3 { font-size: 12pt; /* Sub heading 12 points */ font-weight: 600; color: var(--vu-aubergine); margin-bottom: 10px; } h4, h5, h6, .h4, .h5, .h6 { font-size: 12pt; /* Sub heading 12 points */ font-weight: 600; color: var(--vu-aubergine); margin-bottom: 8px; } p, .body-text { font-size: 10pt; /* Body copy 10 points */ line-height: 1.4; margin-bottom: 8px; } .main { background: var(--var-3-black) !important; position: relative; padding-bottom: 40px; } /* ===== HEADER: VU BLUE STRIP ===== */ .vu-header-top { background: var(--vu-blue); display: flex; align-items: center; justify-content: space-between; padding: 18px 32px 18px 32px; min-height: 68px; font-family: 'Source Sans Pro', Arial, sans-serif; } .vu-header-top .container { display: flex; align-items: center; justify-content: space-between; gap: 32px; min-height: 68px; padding: 0; } /* Logo */ .vu-logo { height: 42px; width: auto; } .vu-brand-text { color: var(--black); font-size: 14pt; /* Header 14 points */ font-weight: 700; letter-spacing: -0.5px; line-height: 1; margin-left: 12px; font-family: 'Source Sans Pro', Arial, sans-serif; } /* ----------- NAV MENU (right side) ----------- */ .vu-header-actions, .top-nav-menu { display: flex; align-items: center; justify-content: flex-end; gap: 15px; list-style: none; margin: 0; padding: 0; width: 90%; font-family: 'Source Sans Pro', Arial, sans-serif; font-size: 10pt; /* Body copy 10 points */ font-weight: 400; color: var(--aubergine); } .top-nav-menu li { margin: 0; padding: 0; display: flex; align-items: center; } /* Search box is last item, right-aligned */ .top-nav-menu .search-area, .vu-header-actions .search-area, .vu-header-search.search-area { margin-left: 24px; flex: 0 0 330px; max-width: 340px; min-width: 140px; display: flex; align-items: center; justify-content: flex-end; } .vu-header-search { margin: 0; display: flex; align-items: center; position: relative; } /* ----------- SEARCH INPUT ----------- */ .vu-search-input, #ProductSearchInput.vu-search-input { border-radius: 22px; border: 1.5px solid var(--aubergine); padding: 8px 18px; font-size: 10pt; /* Body copy 10 points */ width: 100%; min-width: 150px; max-width: 330px; background: #fff; color: var(--aubergine); outline: none; transition: border-color 0.2s; font-family: 'Source Sans Pro', Arial, sans-serif; height: 38px; box-sizing: border-box; } .vu-search-input:focus, #ProductSearchInput.vu-search-input:focus { border-color: var(--vu-blue); } .vu-search-input::placeholder, #ProductSearchInput.vu-search-input::placeholder { color: #999; opacity: 1; } /* Vendor prefixes for broader browser support */ .vu-search-input::-webkit-input-placeholder, #ProductSearchInput.vu-search-input::-webkit-input-placeholder { color: #999; opacity: 1; } .vu-search-input::-moz-placeholder, #ProductSearchInput.vu-search-input::-moz-placeholder { color: #999; opacity: 1; } .vu-search-input:-ms-input-placeholder, #ProductSearchInput.vu-search-input:-ms-input-placeholder { color: #999; opacity: 1; } .vu-search-input:-moz-placeholder, #ProductSearchInput.vu-search-input:-moz-placeholder { color: #999; opacity: 1; } .vu-search-btn { color: var(--aubergine); background: transparent; border: none; margin-left: -36px; font-size: 18px; cursor: pointer; outline: none; } /* ----------- LOGIN BUTTON ----------- */ .vu-login-btn, .vu-login-btn span { background: #22185e; color: #fff !important; border-radius: 22px; padding: 8px 16px; font-weight: bold; border: none; font-family: 'Source Sans Pro', Arial, sans-serif; font-size: 10pt; /* Body copy 10 points */ transition: background 0.16s; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; height: 38px; box-sizing: border-box; white-space: nowrap; } .vu-login-btn:hover { background: #1e1248; color: #fff !important; } /* ----------- CART ----------- */ .vu-cart-link, .nav-expander-cart { position: relative; color: var(--aubergine); margin-left: -10px; font-size: 1.4rem; text-decoration: none; display: flex; align-items: center; } .vu-cart-link:hover, .nav-expander-cart:hover { color: var(--black); } .vu-cart-badge, .badge { position: absolute; top: -9px; left: 18px; background: var(--vu-aubergine); color: #fff; font-size: 0.92rem; font-weight: 700; border-radius: 12px; padding: 2px 8px; line-height: 1; min-width: 22px; text-align: center; } /* ===== HEADER: WHITE CATEGORY NAV ===== */ .vu-header-nav, .navbar.vu-header-nav, .navbar-default.vu-header-nav { background: var(--vu-white); border: none; margin-bottom: 0; box-shadow: none; padding: 0; color: var(--vu-aubergine); } .navbar-nav { margin: 0; padding: 0; width: 100%; } /* Horizontal, clean category links */ @media (min-width: 768px) { .vu-header-categories, .navbar-nav.vu-header-categories { list-style: none; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 34px; margin: 0; padding: 0; } html, body { overflow-x: hidden; } } .vu-mobile-toggle { margin-left: auto; } .vu-header-categories li, .navbar-nav.vu-header-categories li { margin: 0; padding: 0; } /* Remove Bootstrap nav bullets, if any */ .navbar-nav li { list-style: none !important; margin: 0; padding: 0; } .vu-header-categories a { color: var(--vu-aubergine); text-decoration: none; font-weight: 600; font-family: 'Source Sans Pro', Arial, sans-serif; font-size: 12pt; /* Sub heading 12 points */ letter-spacing: 0.3px; padding: 8px 0; transition: color 0.16s; display: block; } .vu-header-categories a:hover, .vu-header-categories a:focus { color: var(--vu-aubergine); text-decoration: underline; } /* ====== FOOTER STYLES ====== */ footer.bg-black { background: var(--black); color: var(--white); padding: 40px 0 0 0; font-size: 10pt; /* Body copy 10 points */ line-height: 22px; font-family: 'Source Sans Pro', Arial, sans-serif; font-weight: 400; border-bottom: 15px solid var(--vu-blue); flex-shrink: 0; } footer .fw-bold { font-weight: 700; font-size: 12pt; /* Sub heading 12 points */ color: var(--white); margin-bottom: 8px; } footer .text-info, footer a.text-info { color: var(--vu-blue) !important; text-decoration: underline; } footer .list-unstyled a { color: var(--white); text-decoration: underline; font-size: 10pt; /* Body copy 10 points */ transition: color 0.2s; } footer .list-unstyled a:hover { color: var(--vu-blue); } footer .app-links img { height: 38px; margin-right: 8px; } /* ====== MOBILE MENU JAVASCRIPT FUNCTIONS ====== */ /* These styles support the mobile menu functionality */ /* Mobile menu backdrop */ .vu-mobile-backdrop { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 1999; } .vu-mobile-backdrop.active { display: block; } /* Mobile menu animations */ .vu-categories-collapse { overflow: hidden; transition: max-height 0.3s ease-in-out; } .vu-categories-collapse.collapsed { max-height: 0; } .vu-categories-collapse:not(.collapsed) { max-height: 500px; } /* Mobile search styling */ .vu-mobile-search { padding: 15px; border-bottom: 1px solid #666; } .vu-mobile-search .vu-search-input { width: 100%; padding: 12px 15px; border: 1px solid #ddd; border-radius: 25px; font-size: 16px; background: white; } /* Enhanced mobile responsiveness */ @media (max-width: 768px) { .vu-mobile-menu-btn { display: block !important; } .vu-desktop-only { display: none !important; } .vu-mobile-only { display: block !important; } .vu-categories-toggle { background: transparent; border: 1px solid #ddd; padding: 8px 15px; font-size: 14px; color: #333; border-radius: 4px; } .vu-categories-toggle:hover { background: #f5f5f5; } .vu-header-categories { margin: 0; padding: 10px 0; background: white; border-top: 1px solid #eee; } .vu-header-categories li { display: block; border-bottom: 1px solid #eee; } .vu-header-categories li:last-child { border-bottom: none; } .vu-header-categories a { display: block; padding: 12px 15px; color: #333; text-decoration: none; } .vu-header-categories a:hover { background: #f5f5f5; color: var(--vu-aubergine); } } /* ====== EXISTING MOBILE MENU INTEGRATION ====== */ /* Ensure VUSHOP styles work with existing ZincStore mobile menu structure */ /* Override existing mobile menu styles for VUSHOP */ #mainNavMobile nav { background: #4d4f53; display: block; height: 100%; overflow: auto; position: fixed; left: -20em; font-size: 15px; top: 0; width: 20em; z-index: 2000; transition: left 0.3s ease-in-out 0s; } .main-nav-expanded #mainNavMobile nav { left: 0; } body.main-nav-expanded { margin-left: 0em; transition: left 0.4s ease-in-out 0s; } #subNavMobile nav { background: white; display: block; height: 100vh; overflow-y: auto; overflow-x: hidden; position: fixed; right: -400px; font-size: 15px; top: 0; width: 400px; z-index: 2000; transition: right 0.3s ease-in-out 0s; box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1); } .sub-nav-expanded #subNavMobile nav { right: 0; } body.sub-nav-expanded { margin-right: 0em; transition: right 0.4s ease-in-out 0s; } /* VU Mobile Cart Items Styling */ #subNavMobile .cart-item { width: 100%; border-bottom: 1px solid #e0e0e0; padding: 0; margin: 0; } #subNavMobile .cart-item tr { display: flex; align-items: flex-start; padding: 15px 20px; gap: 15px; } #subNavMobile .cart-item .item-img { flex-shrink: 0; width: 70px; height: 70px; padding: 0; border: 0; } #subNavMobile .cart-item .item-img .thumbnail { width: 90px; height: 90px; object-fit: cover; border: none; cursor: pointer; transition: opacity 0.2s; } #subNavMobile .cart-item .item-img .thumbnail:hover { opacity: 0.8; } #subNavMobile .cart-item .item-desc { flex: 1; min-width: 0; padding: 0; border: 0; vertical-align: top; } #subNavMobile .cart-item .cart-item-desc { font-weight: 600; color: var(--vu-dark-grey); margin-bottom: 8px; line-height: 1.3; } #subNavMobile .cart-item .cart-item-desc a { color: var(--vu-aubergine); text-decoration: none; } #subNavMobile .cart-item .cart-item-desc a:hover { color: var(--vu-aubergine); text-decoration: underline } #subNavMobile .cart-item .item-details { font-size: 14px; color: var(--vu-text-grey); margin-bottom: 4px; } #subNavMobile .cart-item .cart-item-itemtotal { font-weight: 700; color: var(--vu-dark-grey); font-size: 16px; float: right; margin-bottom: 8px; } #subNavMobile .cart-item .cart-item-qty { color: var(--vu-text-grey); font-size: 14px; } #subNavMobile .cart-item .cart-item-edit { color: var(--vu-aubergine); margin-left: 8px; font-size: 12px; text-decoration: none; } #subNavMobile .cart-item .cart-item-edit:hover { color: var(--vu-aubergine); opacity: 0.8; } #subNavMobile .cart-item .cart-item-dates { font-size: 12px; color: var(--vu-text-grey); margin-top: 4px; } #subNavMobile .cart-item .item-controls { padding: 0; border: 0; vertical-align: top; height: 100% !important; margin-top: 10px; color: var(--vu-purple); vertical-align: middle !important; text-align: right !important; padding: 0 10px !important; } #subNavMobile .cart-item .item-controls a { color: var(--vu-text-grey); font-size: 16px; padding: 5px; transition: color 0.2s; text-decoration: none; display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 100% !important; } #subNavMobile .cart-item .item-controls a:hover { color: var(--vu-melon); } /* Subtotal styling */ #subNavMobile .subtotal { padding: 20px; background: var(--vu-light-grey); border-top: 1px solid var(--vu-border-grey); font-size: 16px; } #subNavMobile .subtotal .lbl { color: var(--vu-text-grey); } #subNavMobile .subtotal .pull-right { font-weight: 700; color: var(--vu-dark-grey); } /* Checkout button styling */ #subNavMobile .sub-menu > li:last-child { padding: 20px; } #subNavMobile .sub-menu > li:last-child .btn { width: 100%; background: var(--vu-melon); border-color: var(--vu-melon); color: white; font-weight: 600; border-radius: 25px; padding: 15px; transition: background-color 0.3s; } #subNavMobile .sub-menu > li:last-child .btn:hover { background: var(--vu-melon-hover); border-color: var(--vu-melon-hover); } /* Empty cart styling */ #subNavMobile .sub-menu > li h3 { text-align: center; color: var(--vu-aubergine); font-weight: 600; margin: 20px 0; } /* Error message styling */ #subNavMobile #errorMessage { padding: 10px 20px; background: #fff5f5; border: 1px solid #fed7d7; border-radius: 6px; margin: 10px 20px; } /* Mobile responsive for subNavMobile */ @media (max-width: 768px) { #subNavMobile nav { width: 100%; right: -100%; } #subNavMobile .cart-item tr { padding: 10px 15px; gap: 10px; } #subNavMobile .cart-item .item-img { width: 60px; height: 60px; } #subNavMobile .cart-item .item-img .thumbnail { width: 60px; height: 60px; } #subNavMobile .cart-item .cart-item-desc { font-size: 14px; } #subNavMobile .cart-item .item-details { font-size: 12px; } #subNavMobile .cart-item .cart-item-itemtotal { font-size: 14px; } } /* ====== PRODUCT DETAILS STYLES ====== */ .vu-product-details { padding: 20px 15px; font-family: 'Source Sans Pro', Arial, sans-serif; } .vu-product-main { margin-bottom: 40px; } /* Product Images */ .vu-product-images { padding-right: 30px; } .vu-main-image { position: relative; margin-bottom: 15px; border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; background: white; text-align: center; padding: 20px; } .vu-main-image img { max-width: 100%; height: auto; max-height: 500px; } .vu-image-thumbnails { display: flex; gap: 10px; overflow-x: auto; } .vu-thumbnail { flex-shrink: 0; width: 80px; height: 80px; border: 2px solid #e0e0e0; border-radius: 6px; overflow: hidden; cursor: pointer; background: white; display: flex; align-items: center; justify-content: center; padding: 5px; } .vu-thumbnail:hover, .vu-thumbnail img.selected { border-color: var(--vu-aubergine); } .vu-thumbnail img { max-width: 100%; max-height: 100%; object-fit: cover; } /* Product Info */ .vu-product-info { padding-left: 30px; } .vu-product-title { font-size: 28px; font-weight: 600; color: #333; margin-bottom: 15px; line-height: 1.3; } .vu-product-price { margin-bottom: 20px; } .vu-price-rrp { text-decoration: line-through; color: #999; margin-right: 10px; font-size: 18px; } .vu-price-current { font-size: 24px; font-weight: 600; color: #333; } .vu-freight-note { font-size: 14px; color: #666; margin-left: 5px; } .vu-product-description { margin-bottom: 25px; line-height: 1.6; color: #555; } .vu-product-features { margin-bottom: 25px; } .vu-product-features h3 { font-size: 16px; font-weight: 600; margin-bottom: 10px; color: #333; } .vu-product-features ul { margin: 0; padding-left: 20px; } .vu-product-features li { margin-bottom: 5px; line-height: 1.4; color: #555; } /* Color Selection */ .vu-color-selection { margin-bottom: 25px; } .vu-color-selection h4 { font-size: 16px; font-weight: 600; margin-bottom: 12px; color: #333; } .vu-color-options { display: flex; gap: 15px; align-items: center; } .vu-color-option { position: relative; cursor: pointer; display: flex; align-items: center; justify-content: center; } .vu-color-swatch { width: 40px; height: 40px; border-radius: 50%; border: 2px solid #ddd; display: block; position: relative; } .vu-color-swatch.black { background-color: #000; } .vu-color-swatch.white { background-color: #fff; border-color: #ccc; } .vu-color-swatch.navy { background-color: #001f3f; } .vu-color-swatch.grey, .vu-color-swatch.gray { background-color: #999; } .vu-color-check { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 16px; z-index: 2; } .vu-color-option.selected .vu-color-swatch { border-color: var(--vu-aubergine); border-width: 3px; } /* Size and Stock Table */ .vu-size-stock-section { margin-bottom: 25px; } .vu-size-stock-table { width: 100%; border-collapse: collapse; border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; font-size: 14px; } .vu-size-stock-table th { background-color: #f8f9fa; padding: 12px 15px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e0e0e0; } .vu-size-stock-table td { padding: 12px 15px; border-bottom: 1px solid #f0f0f0; vertical-align: middle; } .vu-size-stock-table tr:last-child td { border-bottom: none; } .vu-size-name { font-weight: 500; color: #333; } .vu-stock-count { color: #666; text-align: center; } .vu-quantity-cell { text-align: center; } .vu-quantity-selector { display: flex; align-items: center; justify-content: center; gap: 5px; } .vu-qty-btn { width: 30px; height: 30px; border: 1px solid #ddd; background: white; color: #333; border-radius: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: bold; } .vu-qty-btn:hover { background-color: #f5f5f5; border-color: #999; } .vu-qty-input { width: 60px; height: 30px; text-align: center; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; } .vu-out-of-stock { color: #dc3545; font-weight: 500; } /* Purchase Reason */ .vu-purchase-reason { margin-bottom: 25px; } .vu-purchase-reason select { border-radius: 25px; padding: 12px 20px; border: 1px solid #ddd; font-size: 14px; } /* Shipping info */ .vu-panel-title { background: var(--vu-aubergine); color: white; text-align: center; padding: 15px 20px; margin: 0 0 30px 0; font-size: 18px; font-weight: 500; border-radius: 50px; } .panel-default { border: none !important; border-radius: 20px !important; } .panel-heading { position: relative; padding: 20px 50px 20px 20px; background-color: #f8f8f8; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; font-size: 18px; font-weight: 700; color: #1a1530; cursor: pointer; } .panel-heading::after { content: ''; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 10px solid #1a1530; /* ▼ triangle */ } /* When the following panel-collapse is expanded, hide the arrow */ .panel-collapse.in + .panel-body, .panel-collapse.show + .panel-body { /* no effect here directly, but used for context */ } /* Hide arrow when its sibling .panel-collapse is visible */ .panel-heading + .panel-collapse.in::before, .panel-heading + .panel-collapse.show::before { display: none; } /* The trick: hide arrow when .panel-collapse immediately after .panel-heading is expanded */ .panel-heading:has(+ .panel-collapse.in)::after, .panel-heading:has(+ .panel-collapse.show)::after { content: none; } .checkout .form-group { flex: 1 1 45% !important; display: flex !important; flex-direction: column !important; margin-bottom: 20px !important; padding: 0 !important; } .checkout .form-group.full-width { flex: 1 1 100% !important; } .checkout .form-section { display: flex !important; flex-wrap: wrap !important; gap: 20px !important; margin-bottom: 30px !important; } /* ---------- LABELS ---------- */ .checkout .form-group label { font-weight: 600 !important; font-size: 14px !important; margin-bottom: 6px !important; color: #2c2543 !important; } /* ---------- INPUTS, SELECTS, TEXTAREAS ---------- */ .checkout input.form-control, .checkout select { border: 1px solid #2c2543 !important; border-radius: 25px !important; height: 40px !important; padding: 10px 15px !important; font-size: 14px !important; background: transparent !important; outline: none !important; box-shadow: none !important; width: 100% !important; } .checkout textarea { border: 1px solid #2c2543 !important; border-radius: 25px !important; padding: 10px 15px !important; font-size: 14px !important; background: transparent !important; outline: none !important; box-shadow: none !important; width: 100% !important; } .checkout select { appearance: none !important; background-image: url("data:image/svg+xml,%3Csvg fill='%232c2543' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 12px center !important; background-size: 16px !important; } .checkout input::placeholder, .checkout textarea::placeholder { color: #aaa !important; font-style: italic !important; } .checkout input:focus, .checkout select:focus, .checkout textarea:focus { border-color: #ff6a4c !important; box-shadow: 0 0 0 2px rgba(255, 106, 76, 0.2) !important; } /* ---------- CHECKBOX ---------- */ .checkout input[type="checkbox"] { width: 16px !important; height: 16px !important; margin-right: 5px !important; } /* ---------- HEADINGS ---------- */ .checkout .panel-title, .checkout h4 { font-weight: 600 !important; color: #2c2543 !important; font-size: 22px !important; } /* Action Buttons */ .vu-product-actions { display: flex; gap: 15px; margin-bottom: 30px; } .vu-btn { padding: 12px 24px; border: none; border-radius: 50px; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: all 0.2s ease; font-family: 'Source Sans Pro', Arial, sans-serif; } .vu-btn-secondary { background: white; color: #333; border: 1px solid #ddd; } .vu-btn-secondary:hover { background: #f5f5f5; border-color: #999; color: #333; text-decoration: none; } .vu-btn-coral { background: var(--melon); color: var(--vu-aubergine); border: none !important; font-weight: 700 !important; min-width: 120px !important; padding: 8px 18px !important; font-size: 16px !important; line-height: 1.7 !important; border-radius: 999px !important; cursor: pointer !important; transition: background-color 0.3s ease, color 0.3s ease; } .vu-btn-coral:hover { background: #e55a4f; text-decoration: none; transform: translateY(-1px); } .vu-btn-primary { background: var(--vu-aubergine) !important; color: white !important; } .vu-btn-primary:hover { background: #6a2c70; color: white; text-decoration: none; transform: translateY(-1px); } /* Points Section */ .vu-points-section { margin-bottom: 25px; padding: 20px; border: 1px solid #e0e0e0; border-radius: 8px; background: #f8f9fa; } .vu-points-table { width: 100%; border-collapse: collapse; } .vu-points-table th { padding: 8px; text-align: center; font-weight: 600; color: #333; } .vu-points-table td { padding: 8px; text-align: center; } .vu-points-input input, .vu-points-amount input { width: 100%; text-align: center; border: 1px solid #ddd; border-radius: 4px; padding: 8px; } .vu-points-slider { padding: 0 15px; } /* Related Products */ .vu-related-products { margin-top: 50px; padding-top: 30px; border-top: 1px solid #e0e0e0; } .vu-related-title { background: var(--vu-aubergine); color: white; text-align: center; padding: 15px 20px; margin: 0 0 30px 0; font-size: 18px; font-weight: 600; border-radius: 50px; } .vu-related-grid { display: flex; gap: 30px; justify-content: center; flex-wrap: wrap; } .vu-related-item { flex: 0 0 200px; text-align: center; } .vu-related-item a { color: inherit; text-decoration: none; display: block; } .vu-related-item a:hover { text-decoration: none; color: inherit; } .vu-related-image { width: 200px; height: 200px; border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; margin-bottom: 15px; display: flex; align-items: center; justify-content: center; background: white; padding: 15px; } .vu-related-image img { max-width: 100%; max-height: 100%; object-fit: cover; } .vu-related-name { font-size: 14px; font-weight: 500; color: #333; margin-bottom: 8px; line-height: 1.3; } .vu-related-price { font-size: 16px; font-weight: 600; color: #333; } /* Responsive Design */ @media (max-width: 768px) { .vu-product-images, .vu-product-info { padding-left: 15px; padding-right: 15px; } .vu-product-title { font-size: 24px; } .vu-product-actions { flex-direction: column; } .vu-btn { width: 100%; justify-content: center; } .vu-related-grid { flex-direction: column; align-items: center; } .vu-size-stock-table { font-size: 12px; } .vu-size-stock-table th, .vu-size-stock-table td { padding: 8px 10px; } .vu-color-options { flex-wrap: wrap; } } footer .app-links img:last-child { margin-right: 0; } footer .social-icons { display: flex; flex-wrap: nowrap !important; justify-content: flex-start; gap: 16px; margin-bottom: 8px; } footer .social-icons a { display: flex; align-items: center; justify-content: center; height: 44px; width: 44px; font-size: 2rem; color: var(--white) !important; border: 2px solid var(--white); border-radius: 12px; background: transparent; transition: background 0.2s, border-color 0.2s, color 0.2s; } footer .social-icons a:hover { background: var(--vu-blue); border-color: var(--vu-blue); color: var(--aubergine) !important; } footer .ack-flag { vertical-align: middle; height: 24px; margin-right: 10px; flex-shrink: 0; } .vu-footer-copyright { color: #bbb; text-align: center; font-size: 0.97rem; margin-top: 28px; margin-bottom: 12px; } /* SUBFOOTER: always blue and present */ .vu-subfooter { width: 100%; background: var(--vu-blue); height: 34px; min-height: 34px; padding: 0; margin: 0; border: none; flex-shrink: 0; } /* --- Footer Info Section Styling --- */ .vu-footer-info { display: flex; flex-wrap: wrap; gap: 36px; margin: 24px 0 0 0; font-family: 'Source Sans Pro', Arial, sans-serif; } .vu-footer-info-col { flex: 1 1 180px; min-width: 160px; } .vu-footer-info strong, .vu-footer-info .section-title { font-weight: 700; font-size: 16px; color: #fff; margin-bottom: 8px; display: block; } .vu-footer-info ul, .vu-footer-info li { list-style: none; margin: 0; padding: 0; } .vu-footer-info a { color: #5BC2E7; /* VU blue */ text-decoration: underline; font-size: 16px; transition: color 0.18s; display: inline-block; margin-bottom: 5px; } .vu-footer-info a:hover { color: #fff; text-decoration: underline; } .vu-footer-info .contact-block { margin-bottom: 1em; } /* ===== Utility & Responsive ===== */ .gap-2 { gap: 8px; } .gap-3 { gap: 16px; } .text-center { text-align: center; } .small { font-size: 0.95rem; } .nounderine, .nounderine:hover { color: white; text-decoration: none !important; } .whitelink, .whitelink:hover { color: white !important; text-decoration:underline !important; } /* ===== FILTER DROPDOWN ===== */ .modern-filter-dropdown { appearance: none; -webkit-appearance: none; -moz-appearance: none; background: var(--vu-aubergine) url('data:image/svg+xml;utf8,') no-repeat right 16px center/12px 8px; color: var(--vu-white); border: none; border-radius: 24px; height: 36px; padding: 0 36px 0 28px; font-size: 16px; font-weight: 600; box-shadow: 0 1px 4px rgba(30, 19, 72, 0.06); min-width: 130px; cursor: pointer; transition: box-shadow 0.2s; } .modern-filter-dropdown:focus { outline: none; background: var(--vu-aubergine) url('data:image/svg+xml;utf8,') no-repeat right 16px center/12px 8px; box-shadow: 0 2px 8px rgba(30, 19, 72, 0.13); } .modern-filter-dropdown option { background: var(--vu-white); color: var(--vu-aubergine); font-weight: 500; font-size: 15px; padding: 8px 12px; } .filter-dropdown-wrapper { display: flex; align-items: center; justify-content: flex-end; width: 100%; } /* Ensure filter is right-aligned on desktop */ @media (min-width: 769px) { .breadcrum-border { display: flex; align-items: center; justify-content: space-between; } .breadcrum-border .col-md-5 { display: flex; justify-content: flex-end; } .filter-dropdown-wrapper { max-width: 220px; margin-left: auto; } } .sort-order { display: flex; justify-content: flex-end; align-items: flex-start; } /* ===== CATEGORIES ===== */ .categories { display: flex; flex-wrap: wrap; /* allow new rows */ gap: 60px; margin-top: 18px; background-color: var(--var-3-black); position: relative; text-align: center; } /* Category header style */ .catheader { font-size: 14pt; /* Header 14 points */ font-weight: 700; margin-bottom: 16px; color: #1e1248; } /* Category/product list area (acts as main content) */ .catbody { flex: 1 1 0; display: flex; flex-wrap: wrap; gap: 35px; background: none; border: none; margin-left: 70px; margin-top: 20px; max-width: 80% !important; padding: 0 0 18px 0; align-items: flex-start; } /* Product card style */ .featured-products-inner { display: flex; flex-wrap: wrap; justify-content: center; gap: 35px; } #featureContainer { scroll-behavior: smooth; } /* Individual product card */ .feature-wrapper { position: relative; max-width: 1100px; margin: 0 auto; } .feature-outer { overflow: hidden; max-width: 1200px; margin: 0 auto; } .feature-inner { display: flex; flex-wrap: nowrap; gap: 35px; overflow-x: auto; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; white-space: nowrap; justify-content: safe center; /* ✅ Desktop only */ scrollbar-width: none; -ms-overflow-style: none; } .feature-inner .proddiv { flex: 0 0 auto; width: 230px; } .scroll-btn { background: transparent; border: none; color: var(--vu-purple, #2d1e75); font-size: 44px; padding: 6px 10px; border-radius: 50%; position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; cursor: pointer; } .scroll-btn.left { left: calc((100% - 1200px) / 2 - 65px); } .scroll-btn.right { right: calc((100% - 1200px) / 2 - 65px); } .proddiv { background: #fff; border-radius: 16px; box-shadow: 0 4px 16px #0002; padding: 18px; text-align: center; width: 220px; transition: box-shadow 0.18s; justify-content: flex-start; } /* Inside layout */ .proddivinner { display: flex; flex-direction: column; align-items: center; } /* Image container */ .prodimg { height: 140px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; } .prodimg img { max-width: 100%; max-height: 100%; object-fit: contain; } /* Product name */ .prodname { display: flex; flex-direction: column; align-items: center; width: 100%; } /* Fix name height so line always starts at same position */ .prodname .name { display: block; font-weight: 600; font-size: 14px; color: var(--vu-purple); min-height: 40px; /* 👈 tweak this height as needed */ text-align: center; overflow: hidden; } /* Price block with line above it */ .prodname .price { position: relative; font-weight: bold; font-size: 16px; color: var(--vu-purple); padding-top: 12px; margin-top: 0; /* remove any gap from inconsistent spacing */ width: 100%; } .prodname .price::before { content: ""; display: block; width: 100%; height: 2px; background-color: var(--vu-purple); /* dark purple */ margin-bottom: 10px; border-radius: 1px; } /* Category icon cards (subcategories) */ .catdiv, .catdiv.catdivtext { background: #fff; border-radius: 16px; box-shadow: 0 4px 16px #0002; padding: 18px; text-align: center; width: 170px; margin-right: 20px; margin-bottom: 28px; display: inline-block; vertical-align: top; transition: box-shadow 0.18s; } .catdivinner { display: flex; flex-direction: column; align-items: center; } .catdiv img { width: 68px; height: 68px; object-fit: contain; margin-bottom: 10px; } .cattilename { font-weight: 600; color: #22185e; font-size: 12pt; /* Sub heading 12 points */ margin-top: 6px; } /* Breadcrumb style */ .breadcrumb { background: none; padding-left: 0; margin-bottom: 14px; } .breadcrum-border { border-bottom: solid 2px var(--vu-aubergine); } .breadcrumb-item + .breadcrumb-item::before { content: "›"; color: #1e1248; padding: 0 6px; } .breadcrumb-item.active { color: var(--vu-aubergine, #1E1248); font-size: 12pt; /* Sub heading 12 points */ font-style: normal; font-weight: 700; line-height: 22px; letter-spacing: -0.016px; } /* Left Menu */ .left-menu { min-width: 200px; max-width: 220px; margin-right: 36px; } .category-list { display: flex; flex-direction: column; gap: 10px; } .category-list .catitem { background: #fff; border-radius: 10px; font-weight: 600; font-size: 1.09rem; color: #1e1248; padding: 12px 22px; margin-bottom: 8px; cursor: pointer; border: none; text-align: left; box-shadow: 0 2px 7px #0001; transition: background 0.14s, color 0.14s; } .category-list .catitem.selected, .category-list .catitem:active { background: #5BC2E7; color: #fff; } .cat-accordion { margin-top: 32px !important; } .cat-accordion .list-group { margin-top: 0; } .cat-accordion .list-group-item { background: none !important; border: none !important; border-radius: 0 !important; margin-bottom: 3px; padding: 4px 0 4px 0; color: #1E1348 !important; font-weight: 500; font-size: 16px; box-shadow: none; display: flex; align-items: center; min-height: 34px; transition: color 0.13s; } .cat-accordion .list-group-item.selected { background: #1E1348 !important; color: #fff !important; font-weight: 700; border-radius: 18px !important; padding-left: 18px; padding-right: 18px; } .cat-accordion .list-group-item:not(.selected):hover { color: #4e3c8f !important; background: none !important; } .cat-accordion .list-group-item .catname { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cat-accordion .fa-chevron-down { font-size: 1em; margin-left: 7px; color: inherit; } /* ===== LOGIN PAGE ===== */ .vu-login-wrapper { margin: 60px auto 0 auto; max-width: 900px; background: none; min-height: 400px; } .login-form-col { background: none; padding: 28px 18px 28px 0; display: flex; flex-direction: column; justify-content: center; } .login-title { font-size: 14pt; /* Header 14 points */ font-weight: 600; margin-bottom: 24px; color: var(--vu-aubergine); } .login-form-inner { width: 100%; } .vu-login-input { border-radius: 18px !important; border: 1.3px solid #cfc7e6 !important; padding: 10px 16px !important; font-size: 10pt; /* Body copy 10 points */ color: #1E1348; background: #fff !important; margin-bottom: 14px; width: 100%; box-shadow: none !important; outline: none; transition: border-color 0.18s; } .vu-login-input:focus { border-color: #1E1348; } .password-group { position: relative; width: 100%; } .password-toggle { position: absolute; top: 10px; right: 20px; cursor: pointer; color: #666; font-size: 1.13rem; } .vu-btn-melon { background: var(--vu-melon) !important; color: var(--vu-aubergine) !important; border-radius: 22px; border: none; padding: 7px 22px; font-size: 16px; font-weight: 600; box-shadow: none; transition: background 0.18s; } .vu-btn-melon:hover { background: #e65c4a !important; } .form-check-label, .form-check-input { cursor: pointer; font-size: 0.98rem; color: #1E1348; } .forgot-link { color: #0C71AC; font-size: 0.98rem; text-decoration: underline; margin-left: 8px; margin-top: 2px; } .forgot-link:hover { color: #1E1348; } .login-info-col { padding: 28px 0 28px 32px; background: none; min-width: 320px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; } .login-info-box { background: none; color: #1E1348; font-size: 16px; margin-bottom: 16px; line-height: 1.48; max-width: 350px; } .vu-login-btn-create { background: #1E1248 !important; color: #fff !important; border-radius: 22px; border: none; padding: 8px 28px; font-size: 16px; font-weight: 600; box-shadow: none; margin-top: 16px; transition: background 0.18s; } .vu-login-btn-create:hover { background: #241e4e !important; } .form-row { display: flex; align-items: center; gap: 22px; margin-bottom: 16px; } .form-check { display: flex !important; align-items: center !important; margin-bottom: 0 !important; min-height: unset !important; margin-left: 8px; font-weight: 400; } .faq-question-links { display: flex !important; flex-direction: column !important; gap: 10px; /* vertical spacing between items */ } .faq-question-links li { margin-bottom: 0 !important; background: transparent !important; } .faq-question-links > li { display: inline-block !important; } .faq-question-links > li > a { display: inline-block !important; width: 220px !important; /* fixed width */ padding: 8px 16px !important; text-decoration: none !important; color: #2d2150 !important; /* dark purple */ font-weight: 400 !important; /* normal weight by default */ font-size: 14px !important; /* smaller text */ border-radius: 999px !important; background-color: transparent !important; transition: background-color 0.3s ease, color 0.3s ease, font-weight 0.2s ease !important; text-align: left !important; } /* Hover and Focus */ .faq-question-links > li > a:hover, .faq-question-links > li > a:focus { background-color: #2d2150 !important; /* dark purple */ color: #ffffff !important; font-weight: 600 !important; /* bold on hover */ } /* Selected */ .faq-question-links > li.selected > a { background-color: #2d2150 !important; color: #ffffff !important; font-weight: 600 !important; } .form-check-input[type="checkbox"] { width: 18px; height: 18px; margin-right: 7px; margin-top: 0; vertical-align: middle; accent-color: #1E1348; } .form-check-label { margin: 0; padding: 0; color: #1E1348 !important; font-size: 16px; font-weight: 400 !important; vertical-align: middle; cursor: pointer; display: inline-block; line-height: 1.2; } .zsbtn { background-color: #1E1348 !important; border: none !important; color: white !important; font-weight: 600 !important; min-width: 100px !important; padding: 6px 16px !important; /* ↓ smaller height */ font-size: 14px !important; line-height: 1.5 !important; /* ↓ vertical spacing */ border-radius: 999px !important; cursor: pointer !important; transition: background-color 0.3s ease, color 0.3s ease; } /* Optional hover state */ .zsbtn:hover { background-color: #1e1248; } /* ===== REGISTRATION ===== */ .registrationcontainer { max-width: 950px; margin: 38px auto 0 auto; background: none; padding-bottom: 40px; font-family: inherit; } /* === Headings === */ .page-header h2, .registrationcontainer h2 { font-size: 18px; font-weight: 700; margin-bottom: 20px; color: var(--vu-purple); } .rego-header { color: var(--vu-purple); margin-bottom: 20px; font-size: 16px; font-weight: 500; } /* === Labels === */ .registrationcontainer label.control-label { font-size: 13px; font-weight: 600; color: var(--vu-grey); margin-bottom: 6px; display: inline-block; } /* === Inputs & Selects === */ .registrationcontainer .form-control, .registrationcontainer select.form-control { background-color: #fff !important; border: 1.3px solid var(--vu-purple-light) !important; border-radius: 18px !important; color: var(--vu-purple) !important; font-size: 14px; font-weight: 500; padding: 8px 16px !important; height: 40px !important; width: 100%; outline: none; box-shadow: none !important; transition: border-color 0.2s ease; } .registrationcontainer .form-control:focus, .registrationcontainer select.form-control:focus { border-color: var(--vu-purple) !important; box-shadow: 0 0 0 1px rgba(30, 19, 72, 0.08); } /* === Custom Dropdown Arrow === */ .registrationcontainer select.form-control { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px 16px; padding-right: 40px !important; } /* IE default arrow */ select::-ms-expand { display: none; } /* Disabled Inputs */ .registrationcontainer .form-control:disabled, .registrationcontainer select.form-control:disabled { background-color: #e7e4ee !important; color: #8a829c !important; border-color: var(--vu-purple-light) !important; } /* Read-only */ .registrationcontainer .form-control[readonly] { background-color: #f6f6f6 !important; } /* === Password Criteria === */ .rego-container { display: flex; flex-wrap: wrap; gap: 2px; /* Reduced spacing between rules */ margin-top: 10px; max-width: 500px; } .rego-rule { display: inline-block !important; width: fit-content !important; /* ✅ Only as wide as the content */ max-width: none !important; /* ✅ Remove inherited constraint */ padding: 6px 10px !important; border-radius: 999px !important; color: #1e1348 !important; font-weight: 400; font-size: 14px; white-space: nowrap !important; } /* Optional: remove extra margin between blocks */ .rego-rule + .rego-rule { margin-left: 0; /* override inline-block spacing if any */ } /* Button alignment — restrict width of column if needed */ .registrationcontainer .btn-primary { margin-left: 0 !important; } /* === Error States === */ .registrationcontainer .field-validation-error, .registrationcontainer .text-danger { color: var(--vu-alert) !important; font-size: 14px; margin-bottom: 5px; margin-top: -4px; } .registrationemailvalidationerror { color: var(--vu-alert) !important; font-size: 14px; font-weight: 500; margin-bottom: 5px; margin-top: -4px; } /* === Checkbox === */ .registrationcontainer input[type="checkbox"] { width: 16px; height: 16px; margin-right: 8px; accent-color: var(--vu-purple); vertical-align: middle; margin-top: 0; } .registrationcontainer .checkbox label { font-size: 14px; font-weight: 400; color: var(--vu-purple); margin-top: 4px; } /* === Buttons === */ .registrationcontainer .btn-primary, .registrationcontainer .btn-lg.btn-primary { background-color: var(--vu-melon) !important; color: var(--vu-purple) !important; border-radius: 999px !important; border: none !important; padding: 10px 24px !important; font-size: 14px !important; font-weight: 600; box-shadow: none !important; margin-top: 16px; transition: background-color 0.2s ease; } .registrationcontainer .btn-primary:hover { background-color: var(--vu-melon-hover) !important; } .registrationcontainer .btn-primary:disabled { background-color: var(--vu-melon-disabled) !important; cursor: not-allowed; } /* === Utility === */ .registrationcontainer .form-group { margin-bottom: 16px; } .registrationcontainer .form-group .asterisk { color: var(--vu-alert); font-size: 1em; margin-left: 2px; font-weight: 700; vertical-align: top; } .registrationcontainer .clearfix { clear: both; } .registrationcontainer .form-control::placeholder { color: #a39eb3; font-style: italic; } /* Campus Dropdown */ /*.vu-dropdown-wrapper { position: relative; display: inline-block; width: 100%; } .vu-dropdown { width: 100%; border-radius: 20px; padding-right: 40px !important; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: none; border: 1.5px solid #32215a; color: #32215a; font-size: 16px; height: 38px; line-height: 38px; box-sizing: border-box; } .vu-dropdown-arrow { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 1.2rem; color: #32215a; pointer-events: none; } .vu-dropdown:focus { outline: none; border-color: #32215a; }*/ /* ===== RESPONSIVE ===== */ @media (max-width: 1100px) { .vu-header-top { flex-direction: column; align-items: stretch; padding: 16px; min-height: 0; } .vu-header-top .container { flex-direction: column; gap: 12px; min-height: unset; padding: 0; } .vu-header-search, .search-area { margin: 0; min-width: 140px; max-width: 100%; flex: 1; } /* Ensure alignment of search and login */ .vu-header-actions, .top-nav-menu { margin-bottom: 0; justify-content: space-between; gap: 10px; width: 100%; align-items: center; } .vu-header-login { flex-shrink: 0; } /* Make sure search input and login button have same height */ .vu-search-input, #ProductSearchInput.vu-search-input, .vu-login-btn { height: 38px; } .faq-question-links > li { display: block !important; width: 100% !important; } .faq-question-links > li > a { width: 100% !important; text-align: left !important; padding: 10px 16px !important; } .nav-expander-cart { margin-left: 10px; } } @media (max-width: 900px) { .vu-header-categories { gap: 18px; font-size: 0.95rem; } .vu-header-top { padding: 8px 10px 8px 10px; } .vu-header-top .container { flex-direction: column; gap: 12px; min-height: unset; padding: 0; } .search-area, .vu-header-search { margin: 0; min-width: 140px; max-width: 100%; flex: 1; } /* Keep elements aligned */ .vu-header-actions { display: flex; align-items: center; gap: 10px; width: 100%; } footer .social-icons { flex-wrap: wrap !important; } .categories, .catbody { flex-direction: column; gap: 10px; } .proddiv, .catdiv { width: 100%; max-width: 340px; margin: 0 auto 18px auto; } .categories { flex-direction: column !important; gap: 0 !important; } .left-menu { max-width: 100% !important; width: 100% !important; margin-right: 0 !important; margin-bottom: 14px !important; } .catbody { flex-direction: row !important; flex-wrap: wrap !important; gap: 12px !important; } .filter-dropdown-wrapper { width: 100%; justify-content: flex-end !important; margin-bottom: 10px; } .sort-order { justify-content: flex-end !important; } .vu-login-wrapper .row { flex-direction: column; } .login-form-col, .login-info-col { padding: 22px 10px; min-width: unset; align-items: flex-start; } .login-info-col { margin-top: 0; } .registrationcontainer { padding: 0 10px 20px 10px; } .registrationcontainer .row { display: flex; flex-wrap: wrap; align-items: flex-start; /* top align columns */ gap: 20px; } } @media (max-width: 768px) { .vu-header-top { flex-direction: column; align-items: stretch; padding: 10px; min-height: 0; } .vu-header-top .container { flex-direction: column; gap: 10px; min-height: unset; padding: 0; } .vu-logo { height: 34px; } .vu-brand-text { font-size: 16px; margin-left: 6px; } /* Ensure proper flexbox layout for actions */ .vu-header-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; } .vu-header-search, .search-area { min-width: 100px; margin: 0; max-width: calc(100% - 150px); flex: 1; } .vu-search-input, #ProductSearchInput.vu-search-input { width: 100%; font-size: 0.92rem; height: 36px; } .vu-login-btn { height: 36px; padding: 7px 14px; font-size: 14px !important; } .vu-login-btn { padding: 7px 18px; font-size: 16px !important; font-weight: bold; color: var(--white); } .vu-header-categories { gap: 10px; font-size: 0.92rem; } footer .app-links img { height: 32px; } .vu-subfooter { height: 68px; min-height: 68px; } .vu-page-wrapper { min-height: 100vh; display: flex; flex-direction: column; } .vu-main-content { flex: 1 0 auto; } footer.bg-black { color: var(--white); padding: 40px 0 0 0; font-size: 16px; line-height: 22px; font-family: 'Source Sans Pro', Arial, sans-serif; font-weight: 400; border: none; border-bottom: none; flex-shrink: 0; } .vu-subfooter { flex-shrink: 0; } footer a, footer .vu-footer-info a, footer .list-unstyled a, footer .social-icons a { color: #fff !important; text-decoration: none !important; } footer a:hover, footer .vu-footer-info a:hover, footer .list-unstyled a:hover, footer .social-icons a:hover { color: #fff !important; text-decoration: none !important; } .registrationcontainer { max-width: 100%; padding: 0 2vw 20px 2vw; } .registrationcontainer .row { margin-bottom: 8px; } .registrationcontainer .form-group { margin-bottom: 8px; } } @media (max-width: 650px) { .vu-footer-info { flex-direction: column; gap: 20px; } .vu-footer-info-col { min-width: 0; } .feature-outer { max-width: calc(220px * 1.5); /* show 1.5 cards */ overflow-x: auto; } .feature-inner { justify-content: flex-start; /* left-align on mobile */ padding-left: 10px; } .feature-inner::-webkit-scrollbar { display: none; } .feature-inner .proddiv { flex: 0 0 auto; /* ✅ Prevent resizing */ width: 220px; } .scroll-btn.left { left: -5px; /* Adjust to visually align */ } .scroll-btn.right { right: -5px; } } /* Mobile: categories stacked */ @media (max-width: 768px) { .vu-header-categories { display: block; } .vu-header-categories li { display: block; width: 100%; } } /* Disable hover colour change */ .vu-header-categories a:hover, .vu-header-categories a:focus { color: inherit; text-decoration: none; background: transparent; } /* ===== END VU SHOP BRAND CSS - CLEANED VERSION ===== */ /* === PRODUCT DETAIL PAGE FIX === */ .product-detail-container { display: flex; gap: 40px; margin-bottom: 40px; } .product-detail-container .product-image { flex: 0 0 40%; max-width: 400px; } .product-detail-container .product-info { flex: 1; display: flex; flex-direction: column; gap: 15px; } .product-info .product-title { font-size: 28px; font-weight: 600; color: var(--vu-aubergine); } .product-info .product-price { font-size: 24px; font-weight: 700; color: var(--vu-aubergine); } .product-info .product-description { font-size: 14px; line-height: 1.5; color: #555; } .product-info .product-features { font-size: 14px; color: #555; } .product-info .product-meta { margin-top: 10px; font-size: 12px; color: #888; } /* Table inside product page styled */ .product-detail-table { width: 100%; border-collapse: collapse; margin-top: 20px; font-size: 14px; } .product-detail-table th, .product-detail-table td { padding: 12px 15px; border-bottom: 1px solid #eee; text-align: left; } .product-detail-table th { background: #f8f9fa; font-weight: 600; color: #333; } .product-detail-table td { color: #555; } /* Quantity input field */ .product-detail-qty { width: 80px; text-align: center; border: 1px solid #ccc; border-radius: 4px; padding: 8px; } /* Add to cart button */ .vu-btn-addtocart { display: inline-block; margin-top: 20px; background: var(--vu-melon); color: white; border: none; border-radius: 20px; padding: 12px 30px; font-weight: 600; font-size: 14px; cursor: pointer; transition: background 0.3s ease; } .vu-btn-addtocart:hover { background: var(--vu-melon-hover); } .featured-prod-title { margin-top: 20px; display: flex; justify-content: center; align-items: center; color: var(--vu-purple-light); font-weight: 600; border-radius: 30px; padding: 16px 0; margin: 30px auto; /* center horizontally and give spacing */ width: 70%; font-size: 25px; text-align: center; } /*Cart */ .addressfields { background-color: var(--vu-aubergine) !important; color: white !important; border-radius: 20px; margin-top: 15px; margin-left:10px; } /* Related products section */ .related-prod-title { margin-top: 50px; display: flex; justify-content: center; align-items: center; background-color: var(--vu-purple-light); /* or use #625a87 if variable not defined */ color: white; font-weight: bold; border-radius: 30px; padding: 16px 0; margin: 50px auto; /* center horizontally and give spacing */ width: 70%; font-size: 18px; text-align: center; } .related-products { padding: 20px; border: none !important; } .related-products .related-prod-div { display: flex; justify-content: center; flex-wrap: wrap; gap: 24px; /* spacing between items */ padding: 16px 0; } .related-products .vertical-align { display: flex; align-items: center; /* vertical centering */ justify-content: center; /* optional: horizontal centering */ } .related-products .proddiv { background: white; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); border-radius: 16px; padding: 16px; text-align: center; width: 200px; } .related-products .proddivinner { padding: 0; box-shadow: none; border-radius: 0; background: none; } .related-products .prodimg img { max-width: 100%; height: auto; } .related-products .prodname { margin-top: 12px; } .related-products .prodname .price { font-weight: 700; color: var(--vu-purple); } .related-products .prodname .name { color: var(--vu-purple); font-size: 16px; } .related-products .related-title { background: var(--vu-aubergine); color: white; text-align: center; padding: 15px; font-size: 18px; font-weight: 600; border: none !important; border-radius: 50px; margin-bottom: 30px; } /**/ /* === Force all product detail tables to have VU Shop Table Style === */ .product-detail-container table { width: 100%; border-collapse: collapse; border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; font-size: 14px; } .product-detail-container table th { background-color: var(--vu-aubergine); color: white; padding: 12px 15px; text-align: left; font-weight: 600; border-bottom: 1px solid #e0e0e0; } .product-detail-container table td { padding: 12px 15px; border-bottom: 1px solid #f0f0f0; vertical-align: middle; color: #555; } .product-detail-container table tr:last-child td { border-bottom: none; } .product-detail-container table td input { width: 60px; text-align: center; border: 1px solid #ccc; border-radius: 4px; padding: 6px; } .product-detail-container .add-to-cart-btn { background: var(--vu-melon); color: white; font-weight: 600; font-size: 14px; padding: 12px 25px; border: none; border-radius: 20px; cursor: pointer; transition: background 0.3s ease; } .product-detail-container .add-to-cart-btn:hover { background: var(--vu-melon-hover); } /*OVERWRITE THE BASE STYLING*/ .prod_det_col2{ } /* ===== VUSHOP MODAL POPUP STYLING - Match ModalPopup.png ===== */ /* Override existing modal styles to match ModalPopup.png exactly */ .modal.vu-modal .modal-dialog { margin: 50px auto !important; width: auto !important; max-width: 450px !important; } .modal.vu-modal .modal-content { border: none !important; border-radius: 12px !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important; background: white !important; overflow: hidden !important; } .modal.vu-modal .modal-body { padding: 40px 30px 20px 30px !important; text-align: left !important; min-height: auto !important; display: block !important; } .modal.vu-modal .modal-footer { border-top: none !important; padding: 0 30px 40px !important; text-align: center !important; background: transparent !important; } /* Modal message styling to match ModalPopup.png */ .vu-modal-message { display: flex !important; align-items: flex-start !important; gap: 15px !important; font-family: 'Source Sans Pro', Arial, sans-serif !important; font-size: 16px !important; line-height: 1.5 !important; margin-bottom: 0 !important; } .vu-modal-message.error { color: #ff0000 !important; } .vu-modal-message.success { color: var(--vu-aubergine) !important; } .vu-modal-message.warning { color: #ffa500 !important; } .vu-modal-message.info { color: var(--vu-aubergine) !important; } .vu-modal-message i { font-size: 24px !important; flex-shrink: 0 !important; margin-top: 2px !important; } .vu-modal-message.error i { color: #ff0000 !important; } .vu-modal-message.success i { color: var(--vu-aubergine) !important; } .vu-modal-message.warning i { color: #ffa500 !important; } .vu-modal-message.info i { color: var(--vu-aubergine) !important; } .vu-modal-message span { flex: 1 !important; font-weight: 400 !important; } /* Modal buttons to match ModalPopup.png style */ .vu-modal-btn { border: none !important; border-radius: 6px !important; padding: 12px 24px !important; font-family: 'Source Sans Pro', Arial, sans-serif !important; font-size: 14px !important; font-weight: 600 !important; cursor: pointer !important; transition: all 0.2s ease !important; text-decoration: none !important; display: inline-block !important; min-width: 100px !important; margin: 0 5px !important; } .vu-modal-btn.primary { background: var(--vu-aubergine) !important; color: white !important; } .vu-modal-btn.primary:hover { background: #2a1a5e !important; color: white !important; text-decoration: none !important; } .vu-modal-btn.secondary { background: #f8f9fa !important; color: var(--vu-aubergine) !important; border: 1px solid #e0e0e0 !important; } .vu-modal-btn.secondary:hover { background: #e9ecef !important; color: var(--vu-aubergine) !important; text-decoration: none !important; } /* Responsive modal */ @media (max-width: 768px) { .modal.vu-modal .modal-dialog { margin: 20px !important; max-width: calc(100% - 40px) !important; } .modal.vu-modal .modal-body { padding: 30px 20px 15px 20px !important; } .modal.vu-modal .modal-footer { padding: 0 20px 30px !important; } .vu-modal-message { font-size: 14px !important; gap: 12px !important; } .vu-modal-message i { font-size: 20px !important; } .vu-modal-btn { font-size: 13px !important; padding: 10px 20px !important; min-width: 80px !important; } } /* ===== END MODAL POPUP STYLING ===== */ /* ===== ORDER APPROVAL STYLES ===== */ .vu-page-header { background: var(--vu-aubergine); color: white; padding: 20px; border-radius: 12px; margin-bottom: 30px; } .vu-page-header h2 { margin: 0; font-weight: 600; } .vu-order-approval-wrapper { display: flex; justify-content: center; padding: 30px 15px; } .vu-order-approval-container { width: 60%; max-width: 1100px; min-width: 300px; } .vu-order-approval-container { padding: 20px 0; } .vu-approval-section { margin-bottom: 40px; } .vu-section-title { color: var(--vu-aubergine); border-bottom: 2px solid var(--vu-aubergine); padding-bottom: 10px; margin-bottom: 20px; } .vu-approval-table { background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .vu-approval-table thead { background: var(--vu-aubergine); color: white; } .vu-approval-table thead th { color: white; font-weight: 500; border-color: var(--vu-aubergine); } .vu-link { color: var(--vu-blue, #87ceeb); cursor: pointer; text-decoration: underline; } .vu-link:hover { color: var(--vu-aubergine); } .vu-pagination { margin-top: 20px; text-align: center; } .vu-order-details h4 { color: var(--vu-aubergine); margin-bottom: 15px; } .vu-order-modal-wrapper { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; z-index: 1050; background-color: rgba(0, 0, 0, 0.5); padding: 20px; overflow-y: auto; box-sizing: border-box; } .vu-order-modal-content { background: white; border-radius: 20px; width: 100%; max-width: 1200px; padding: 32px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); box-sizing: border-box; font-family: 'Inter', sans-serif; position: relative; } .vu-order-modal-header { position: relative; background: #C5ECFF; padding: 10px 20px; border-radius: 12px; margin-bottom: 24px; text-align: center; } .vu-order-modal-title { font-size: 20px; font-weight: bold; color: #002A5C; } .vu-order-meta-grid, .vu-order-meta-grid * { text-align: left !important; } .vu-order-meta { text-align: left; font-size: 14px; color: #333; line-height: 1.6; margin-bottom: 24px; } .vu-order-meta-grid { display: grid; grid-template-columns: 150px auto; row-gap: 10px; column-gap: 24px; margin-bottom: 24px; font-size: 14px; color: #2D245B; } .vu-meta-label { font-weight: bold; white-space: nowrap; } .vu-meta-value { white-space: pre-line; } .vu-order-meta strong { display: inline-block; min-width: 110px; text-align: right; margin-right: 8px; } .vu-order-items-section { margin-top: 20px; } .vu-order-items-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; text-align: left; margin-bottom: 24px; } .vu-header-rounded-row th { padding: 0; border: none; } .vu-header-rounded-cell { padding: 0; border: none; } .vu-table-header-rounded { background: #2D245B; border-radius: 20px 20px 0 0; padding: 12px 16px; } .vu-table-header-grid { display: grid; grid-template-columns: repeat(5, 1fr); color: white; font-weight: 600; gap: 16px; } .vu-order-totals { font-size: 14px; color: #333; margin-bottom: 32px; padding: 0 8px; } .vu-order-total-row { display: flex; justify-content: space-between; margin-bottom: 8px; } .vu-order-total-final { font-size: 16px; font-weight: bold; margin-top: 12px; } .vu-order-close { display: flex; justify-content: center; padding-top: 10px; } .vu-order-close button { font-weight: bold; padding: 8px 32px; font-size: 16px; background-color: #2D245B; color: white; border: none; border-radius: 24px; } .vu-order-meta { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; margin-bottom: 24px; font-size: 14px; color: #333; } .vu-order-items-section { margin-top: 20px; } .vu-order-items-table { width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 20px; } .vu-order-items-table th { background: #2D245B; color: white; text-align: left; padding: 12px; } .vu-order-items-table td { padding: 10px 12px; border-bottom: 1px solid #f0f0f0; } .vu-order-totals { border-top: 1px solid #ddd; padding-top: 16px; font-size: 14px; color: #333; margin-bottom: 20px; } .vu-order-total-row { display: flex; justify-content: space-between; margin-bottom: 8px; } .vu-order-total-final { font-size: 16px; font-weight: bold; margin-top: 12px; } .vu-order-close { text-align: right; } /* Approval/Reject buttons */ .vu-approval-table .btn-success { background: #28a745; border: none; } .vu-approval-table .btn-success:hover { background: #218838; } .vu-approval-table .btn-danger { background: var(--vu-melon); border: none; } .vu-approval-table .btn-danger:hover { background: #e55353; } /* ===== END ORDER APPROVAL STYLES ===== */ /* ===== ORDER CONFIRMATION APPROVAL MESSAGE ===== */ .vu-order-confirm-box { background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 25px; margin-bottom: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); } .vu-approval-message { background: #f9f9f9; border: 1px solid #662D91; border-radius: 8px; padding: 20px; margin-bottom: 20px; } .vu-approval-message p { margin-bottom: 15px; } .vu-approval-message p:last-child { margin-bottom: 0; } .vu-approval-message strong { font-size: 16px; } .vu-approval-message a { color: #662D91; text-decoration: underline; } .vu-approval-message a:hover { color: #4a1f68; } /* ===== END ORDER CONFIRMATION APPROVAL MESSAGE ===== */ /* Hide on desktop */ .mobile-only { display: none; } /* Show only on screens <= 768px */ @media (max-width: 768px) { .mobile-only { display: inline; } } /** Overwrite Main **/ .alert .alert-danger .text-center{ color: var(--vu-aubergine); } /* Center the navbar menu on desktop only */ @media (min-width: 768px) { .vu-header-nav .navbar-nav { float: none; display: table; margin: 0 auto; table-layout: fixed; } .vu-header-nav .navbar-collapse { text-align: center; } .vu-header-nav .navbar-nav > li { display: inline-block; float: none; } } /* ===== ENHANCED MOBILE RESPONSIVENESS ===== */ @media (max-width: 768px) { /* Fix double logo issue - hide desktop logo on mobile */ .vu-header-brand { display: block !important; } /* Ensure proper mobile header layout */ .vu-header-top { padding: 10px 15px; } .vu-header-top .container { flex-direction: row; justify-content: flex-start; align-items: center; gap: 10px; } /* Adjust logo size for mobile */ .vu-header-brand .vu-logo { height: 40px; } /* Mobile header actions */ .vu-header-actions { flex-direction: row; gap: 8px; align-items: center; margin-left: auto; } /* Hide search on mobile - can be toggled if needed */ .vu-header-search { display: none; } /* Compact login button */ .vu-header-login .vu-login-btn { padding: 8px; font-size: 20px; } .vu-header-login .vu-login-btn span { display: inline-block !important; } /* Cart styling */ .vu-header-cart .vu-cart-link { padding: 8px; font-size: 20px; } /* Navigation bar adjustments */ .vu-header-nav { margin-bottom: 0; min-height: auto; } .vu-header-nav .navbar-header { margin: 0; } .vu-header-nav .navbar-toggle { margin: 8px 15px; padding: 8px 10px; } /* Ensure content is properly padded */ .container { padding-left: 15px; padding-right: 15px; } /* Forms and inputs */ .form-control { font-size: 16px; /* Prevent zoom on iOS */ } /* Buttons */ .btn, .vu-btn { padding: 12px 20px; font-size: 14px; min-height: 44px; /* Touch-friendly size */ } /* Product grids */ .vu-product-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 10px; } /* Product cards */ .vu-product-card { padding: 10px; } .vu-product-card .vu-product-image { height: 150px; } .vu-product-card .vu-product-name { font-size: 14px; line-height: 1.3; } .vu-product-card .vu-product-price { font-size: 16px; } /* Tables */ .table-responsive { border: 0; margin-bottom: 15px; } .table-responsive table { margin-bottom: 0; } /* Cart page */ .cart-item-mobile { display: block; border: 1px solid #ddd; border-radius: 4px; padding: 15px; margin-bottom: 10px; } /* Checkout forms */ .checkout-form .form-group { margin-bottom: 15px; } /* Modals */ .modal-dialog { margin: 10px; width: calc(100% - 20px); } .modal-body { padding: 15px; } /* Footer */ .vu-footer { padding: 30px 15px; } .vu-footer .footer-section { margin-bottom: 30px; } } /* Small mobile devices */ @media (max-width: 480px) { /* Even smaller logo */ .vu-header-brand .vu-logo { height: 35px; } /* Single column product grid */ .vu-product-grid { grid-template-columns: 1fr; } /* Smaller fonts */ body { font-size: 14px; } h1 { font-size: 24px; } h2 { font-size: 20px; } h3 { font-size: 18px; } h4 { font-size: 16px; } /* Compact buttons */ .btn-sm { padding: 8px 12px; font-size: 12px; } } .padding-top-30{ padding-top:30px; } .left-align{ text-align:left !important; } .vu-rejection-comment-text { font-size: 12px !important; text-align: left !important; } .vu-myaccount { font-size:10pt !important; font-weight:800 !important; } .vu-footer-copyright a:link, .vu-footer-copyright a:visited { color: white !important; }