reels

src/app/globals.css

@@ -749,22 +749,30 @@ select {
   --btn-accent-text: #ffffff;
 }
 
-.btn-modern {
-  border: 1px solid var(--btn-border-color);
-  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
-}
-.btn-modern:hover:not(:disabled) {
-  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
-}
-.btn-modern:active:not(:disabled) {
-  transform: scale(0.98);
-}
-.dark .btn-modern {
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
-}
-.dark .btn-modern:hover:not(:disabled) {
-  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.38);
+/* داخلِ @layer components (برخلافِ btn-modern--primary/--selected زیر که عمداً
+   بیرونِ لایه‌ست) تا رنگِ بوردرِ اینجا (خاکستریِ پیش‌فرض) رویِ کلاس‌های Tailwind
+   مثلِ border-[#FC8EAC] که کامپوننت‌ها (مثلِ btnPrimary) پاس می‌دن سوار نشه —
+   قبلاً چون این رول بیرونِ هر @layer بود، همیشه برنده می‌شد و باعث می‌شد بوردرِ
+   دکمه‌های انتخاب‌شده (مثلاً btnPrimary توی تنظیماتِ فروشگاه) هیچ‌وقت صورتی نشه،
+   با اینکه رنگِ متنش درست صورتی می‌شد (چون فقط border ست شده بود، نه color) */
+@layer components {
+  .btn-modern {
+    border: 1px solid var(--btn-border-color);
+    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  }
+  .btn-modern:hover:not(:disabled) {
+    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
+  }
+  .btn-modern:active:not(:disabled) {
+    transform: scale(0.98);
+  }
+  .dark .btn-modern {
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
+  }
+  .dark .btn-modern:hover:not(:disabled) {
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.38);
+  }
 }
 
 .btn-modern--primary {