warping the order-type-select-container styles

src/index.css

@@ -414,3 +414,12 @@ label {
 .ant-select-selection-overflow-item {
   z-index: 999 !important;
 }
+
+/* Target selection item and arrow in the Select component (not the dropdown) */
+.order-type-select-container :where(.ant-select .ant-select-selection-item) {
+  color: #fff !important;
+}
+
+.order-type-select-container :where(.ant-select .ant-select-arrow) {
+  color: #fff !important;
+}

src/pages/menu/menu.module.css

@@ -693,10 +693,4 @@
   right: -10px !important;
 }
 
-:global(.ant-select-selection-item) {
-  color: #fff !important;
-}
 
-:global(.ant-select-arrow) {
-  color: #fff !important;
-}

src/pages/menu/page.tsx

@@ -91,7 +91,7 @@ function MenuPage() {
               <BackButton />
             </div>
             <div
-              className={`${styles.headerFloatingBtn} ${styles.orderTypeSelectContainer}`}
+              className={`${styles.headerFloatingBtn} ${styles.orderTypeSelectContainer} order-type-select-container`}
             >
               <Select
                 value={orderType}