Fix plans page mobile header has a bigger z-index than navbar and cause UI bug if mobile navbar is expanded (#13269)

GitOrigin-RevId: d6fc2727eaa1f66f04217efcb8498a1bf99c9201

services/web/frontend/stylesheets/app/plans-v2.less

@@ -8,7 +8,6 @@
 @plans-v2-learn-more-link-color: hsl(206, 100%, 52%);
 @plans-v2-top-switch-group-width-mobile: 46%;
 @plans-v2-discount-highlighted-text-z-index: 2;
-@plans-v2-table-sticky-header-z-index: 100;
 @plans-v2-table-border-radius: 20px;
 @plans-v2-dark-blue: #2857a1;
 
@@ -1138,7 +1137,7 @@ p.plans-v2-table-discount-highlighted-text {
     width: 100vw;
     top: 0;
     left: 0;
-    z-index: @plans-v2-table-sticky-header-z-index;
+    z-index: @z-index-plans-page-table-header-mobile;
     height: 40px;
 
     // separate sticky class because we want to remove the class (to visually remove the sticky header)

services/web/frontend/stylesheets/components/navbar.less

@@ -84,7 +84,7 @@
 }
 
 .navbar-main {
-  z-index: 1;
+  z-index: @z-index-navbar;
   .container-fluid > .navbar-collapse {
     // High specificity needed to override Bootstrap's default.
     margin: 10px 0 0;

services/web/frontend/stylesheets/core/variables.less

@@ -1171,3 +1171,7 @@
   #254c84 29%,
   @blue-40 97%
 );
+
+// z-index
+@z-index-plans-page-table-header-mobile: 100;
+@z-index-navbar: 200;

services/web/frontend/stylesheets/variables/all.less

@@ -1,4 +1,5 @@
 @import 'colors.less';
+@import 'z-index.less';
 
 //
 // Variables

services/web/frontend/stylesheets/variables/z-index.less

@@ -0,0 +1,2 @@
+@z-index-plans-page-table-header-mobile: 100;
+@z-index-navbar: 200;