New Responsive design

app/Views/Components/FullScreenModal.vue

@@ -126,6 +126,14 @@ onUnmounted(() => {
   right: 15px;
   cursor: pointer;
   font-size: 22px;
+  z-index: 10;
+  background: rgba(255,255,255,0.9);
+  border-radius: 50%;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 /* Animation */
@@ -146,4 +154,41 @@ onUnmounted(() => {
   transform: scale(0.98);
   opacity: 0;
 }
+
+/* ─── Tablet ─── */
+@media (max-width: 1023px) {
+    .full-screen-modal-content {
+        top: 10px;
+        bottom: 10px;
+        left: 10px;
+        right: 10px;
+    }
+
+    .full-screen-modal-body {
+        padding: 14px;
+    }
+}
+
+/* ─── Smartphone ─── */
+@media (max-width: 639px) {
+    .full-screen-modal-content {
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        border-radius: 0;
+    }
+
+    .full-screen-modal-body {
+        padding: 10px;
+    }
+
+    .full-screen-modal-close {
+        top: 8px;
+        right: 8px;
+        font-size: 26px;
+        width: 36px;
+        height: 36px;
+    }
+}
 </style>