@maplat/ui 0.10.5 → 0.11.0

package/less/maplat-specific.less

@@ -1,6 +1,28 @@
+.dli-chevron {
+  display: inline-block;
+  vertical-align: middle;
+  color: #333;
+  line-height: 1;
+  width: 1em;
+  height: 1em;
+  border: 0.1em solid currentColor;
+  border-left: 0;
+  border-bottom: 0;
+  box-sizing: border-box;
+  transform: translateX(-25%) rotate(45deg);
+  margin: 10px;
+}
+
+li:has(+ .open) .dli-chevron {
+  transform: translateY(-25%) rotate(135deg);
+}
+
 .ol-ctx-menu-container li {
   background-size: auto 20px;
   background-position: top 0px left 0px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 
 .ol-ctx-menu-container li:not(.ol-ctx-menu-separator).selected {
@@ -12,39 +34,114 @@
   font-family: 'Clarendon';
 }
 
-.modal_load .close, .modal_gpsW .close, .temp_no_close.close {
+.modal_load .close,
+.modal_gpsW .close,
+.temp_no_close.close {
   display: none;
 }
 
-.modal_poi_content, .modal_map_content, .modal_load_content, .modal_gpsW_content, .modal_gpsD_content,
-.modal_help_content, .modal_title, .modal_load_title, .modal_gpsW_title, .modal_help_title,
-.modal_share_content, .modal_share_title, .modal_hide_marker_content, .modal_hide_marker_title {
+.close {
+  font-size: 32px;
+}
+
+.modal_poi_content,
+.modal_map_content,
+.modal_load_content,
+.modal_gpsW_content,
+.modal_gpsD_content,
+.modal_help_content,
+.modal_title,
+.modal_load_title,
+.modal_gpsW_title,
+.modal_help_title,
+.modal_share_content,
+.modal_share_title,
+.modal_share_poi,
+.modal_marker_list_content,
+.modal_marker_list_title {
   display: none;
 }
 
-.modal_poi .modal_poi_content, .modal_map .modal_map_content,
-.modal_load .modal_load_content, .modal_help .modal_help_content,
-.modal_gpsW .modal_gpsW_content, .modal_gpsD .modal_gpsD_content,
-.modal_share .modal_share_content, .modal_hide_marker .modal_hide_marker_content {
+.modal_poi .modal_poi_content,
+.modal_map .modal_map_content,
+.modal_load .modal_load_content,
+.modal_help .modal_help_content,
+.modal_gpsW .modal_gpsW_content,
+.modal_gpsD .modal_gpsD_content,
+.modal_share .modal_share_content,
+&.state_url .modal_share_poi,
+.modal_marker_list .modal_marker_list_content {
   display: block;
 }
 
-.modal_poi .modal_title, .modal_map .modal_title,
-.modal_gpsD .modal_title, .modal_help .modal_help_title,
-.modal_load .modal_load_title, .modal_gpsW .modal_gpsW_title,
-.modal_share .modal_share_title, .modal_hide_marker .modal_hide_marker_title {
+.modal_poi .modal_title,
+.modal_map .modal_title,
+.modal_gpsD .modal_title,
+.modal_help .modal_help_title,
+.modal_load .modal_load_title,
+.modal_gpsW .modal_gpsW_title,
+.modal_share .modal_share_title,
+.modal_marker_list .modal_marker_list_title {
   display: inline;
 }
 
-.modal_cache_content, .modal_share_state, .share_help, .border_help, .hide_marker_help {
+.modal_cache_content,
+.modal_share_pos,
+.share_help,
+.border_help,
+.hide_marker_help,
+.marker_list_help {
   display: none;
 }
 
-&.enable_cache .modal_cache_content, &.state_url .modal_share_state {
+&.enable_cache .modal_cache_content,
+&.state_url .modal_share_pos {
   display: block;
 }
 
-&.enable_share .share_help, &.enable_border .border_help, &.enable_hide_marker .hide_marker_help {
+// Fix POI Iframe Height
+.poi_iframe {
+  width: 100%;
+  height: 100%;
+  min-height: 50vh;
+  border: 0;
+}
+
+.poi_web {
+  width: 100%;
+  height: 100%;
+}
+
+// Fix Context Menu Wrapping
+.ol-ctx-menu-container {
+  width: auto !important;
+  min-width: 170px;
+  max-width: 300px; // Prevent overly wide menu but allow more space
+  z-index: 2000 !important; // Ensure it's above Modal (usually 1050)
+
+  li {
+    white-space: normal !important;
+    height: auto !important;
+    line-height: 1.3 !important;
+    text-overflow: clip !important;
+    overflow: visible !important;
+    padding: 8px 5px 8px 25px !important; // Ensure space for icon
+    background-position: left 5px center !important; // Center icon vertically
+  }
+}
+
+// Legacy-style Modal margins on mobile
+@media (max-width: 767px) {
+  .modal-dialog {
+    margin: 10px !important;
+    width: auto !important;
+  }
+}
+
+&.enable_share .share_help,
+&.enable_border .border_help,
+&.enable_hide_marker .hide_marker_help,
+&.enable_marker_list .marker_list_help {
   display: inline;
 }
 
@@ -80,21 +177,79 @@
   top: calc(.5em + 50px);
 }
 
-.poi_img, .help_img {
+.poi_img,
+.help_img {
   position: relative;
   display: table-cell;
   text-align: center;
   vertical-align: middle;
 }
 
-.poi_img img, .help_img img {
+.poi_img img,
+.help_img img {
   max-width: 100%;
   top: 0px;
   bottom: 0px;
   left: 0px;
   right: 0px;
   margin: auto;
-  vertical-align: middle; /*IE7*/
+  vertical-align: middle;
+  /*IE7*/
+}
+
+.list_poiitems_div {
+  padding-inline-start: 15px;
+  display: none;
+}
+
+.list_poiitems_div.open {
+  display: block;
+}
+
+@media (hover: hover) {
+
+  .list-group-item.layer:hover,
+  .list-group-item.poi:hover {
+    cursor: pointer;
+    background-color: #ccc;
+  }
+}
+
+@media (hover: none) {
+
+  .list-group-item.layer:has(.layer_label:active),
+  .list-group-item.poi:active {
+    cursor: pointer;
+    background-color: #ccc;
+  }
+}
+
+.layer_row,
+.poi_row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.layer_label,
+.poi_label {
+  text-align: left;
+  flex-grow: 1;
+}
+
+.layer_onoff {
+  text-align: right;
+  margin-right: 20px;
+  margin-top: 10px;
+}
+
+.list_poicontent_div {
+  padding-inline-start: 0px;
+  display: none;
+}
+
+.list_poicontent_div.open {
+  display: block;
 }
 
 img.markerlist {
@@ -105,14 +260,17 @@ img.markerlist {
   left: 0px;
   right: 0px;
   margin: auto;
-  vertical-align: middle; /*IE7*/
+  vertical-align: middle;
+  /*IE7*/
+  display: inline-block;
+  padding: 20px;
 }
 
 input[type="checkbox"].markerlist {
   display: none;
 }
 
-input[type="checkbox"].markerlist + label.check {
+input[type="checkbox"].markerlist+label.check {
   position: relative;
   cursor: pointer;
   display: inline-block;
@@ -124,12 +282,12 @@ input[type="checkbox"].markerlist + label.check {
   background-color: #ffffff;
 }
 
-input[type="checkbox"].markerlist:checked + label.check {
+input[type="checkbox"].markerlist:checked+label.check {
   border: 1px solid #4db4e4;
   background-color: #4db4e4;
 }
 
-input[type="checkbox"].markerlist + label.check::before {
+input[type="checkbox"].markerlist+label.check::before {
   content: "OFF";
   position: absolute;
   top: 4px;
@@ -137,7 +295,7 @@ input[type="checkbox"].markerlist + label.check::before {
   right: 6px;
 }
 
-input[type="checkbox"].markerlist:checked + label.check::before {
+input[type="checkbox"].markerlist:checked+label.check::before {
   content: "ON";
   position: absolute;
   left: 6px;
@@ -145,7 +303,7 @@ input[type="checkbox"].markerlist:checked + label.check::before {
   color: #ffffff;
 }
 
-input[type="checkbox"].markerlist + label.check > div {
+input[type="checkbox"].markerlist+label.check>div {
   position: absolute;
   top: 2px;
   left: 2px;
@@ -157,7 +315,7 @@ input[type="checkbox"].markerlist + label.check > div {
   transition: 0.2s;
 }
 
-input[type="checkbox"].markerlist:checked + label.check > div {
+input[type="checkbox"].markerlist:checked+label.check>div {
   border: 1px solid transparent;
   left: 44px;
 }
@@ -189,6 +347,14 @@ input[type="checkbox"].markerlist:checked + label.check > div {
   font-size: 18px;
 }
 
+@media (max-width: 768px) {
+
+  .swiper-button-next,
+  .swiper-button-prev {
+    margin-top: -40px;
+  }
+}
+
 @media screen and (max-width: 600px) {
   .map-title {
     width: calc(100% - 100px);
@@ -201,7 +367,8 @@ input[type="checkbox"].markerlist:checked + label.check > div {
   }
 }
 
-.swiper-container.base-swiper, .swiper-container.overlay-swiper {
+.swiper-container.base-swiper,
+.swiper-container.overlay-swiper {
   position: absolute;
   bottom: .5em;
   bottom: calc(.5em + constant(safe-area-inset-bottom));
@@ -226,7 +393,9 @@ input[type="checkbox"].markerlist:checked + label.check > div {
 }
 
 @media screen and (max-width: 640px) {
-  .swiper-container.base-swiper, .swiper-container.overlay-swiper {
+
+  .swiper-container.base-swiper,
+  .swiper-container.overlay-swiper {
     width: 35%;
   }
 
@@ -240,7 +409,9 @@ input[type="checkbox"].markerlist:checked + label.check > div {
 }
 
 @media screen and (max-width: 320px) {
-  .swiper-container.base-swiper, .swiper-container.overlay-swiper {
+
+  .swiper-container.base-swiper,
+  .swiper-container.overlay-swiper {
     width: 112px;
   }
 
@@ -253,7 +424,8 @@ input[type="checkbox"].markerlist:checked + label.check > div {
   }
 }
 
-.base-swiper .swiper-slide, .overlay-swiper .swiper-slide {
+.base-swiper .swiper-slide,
+.overlay-swiper .swiper-slide {
   text-align: center;
   font-size: 18px;
   background-color: rgba(0, 0, 0, 0);
@@ -296,17 +468,28 @@ input[type="checkbox"].markerlist:checked + label.check > div {
   text-align: center;
 }
 
-.base-swiper .swiper-slide.selected, .overlay-swiper .swiper-slide.selected {
+.base-swiper .swiper-slide.selected,
+.overlay-swiper .swiper-slide.selected {
   background-color: rgba(0, 0, 255, 0.1);
 }
 
-.base-next, .base-prev, .overlay-next, .overlay-prev {
+.base-next,
+.base-prev,
+.overlay-next,
+.overlay-prev {
   margin-top: 0px;
   top: 15px;
   bottom: 15px;
   height: 30px;
   width: 18px;
   background-size: 18px 30px;
+  background-repeat: no-repeat;
+  background-position: center;
+
+  &:after,
+  &:before {
+    display: none;
+  }
 }
 
 &.show-border {
@@ -315,121 +498,145 @@ input[type="checkbox"].markerlist:checked + label.check > div {
     border-color: maroon;
     border-width: 2px;
   }
+
   .swiper-slide.deeppink {
     border-style: dashed;
     border-color: deeppink;
     border-width: 2px;
   }
+
   .swiper-slide.indigo {
     border-style: dashed;
     border-color: indigo;
     border-width: 2px;
   }
+
   .swiper-slide.olive {
     border-style: dashed;
     border-color: olive;
     border-width: 2px;
   }
+
   .swiper-slide.royalblue {
     border-style: dashed;
     border-color: royalblue;
     border-width: 2px;
   }
+
   .swiper-slide.red {
     border-style: dashed;
     border-color: red;
     border-width: 2px;
   }
+
   .swiper-slide.hotpink {
     border-style: dashed;
     border-color: hotpink;
     border-width: 2px;
   }
+
   .swiper-slide.green {
     border-style: dashed;
     border-color: green;
     border-width: 2px;
   }
+
   .swiper-slide.yellow {
     border-style: dashed;
     border-color: yellow;
     border-width: 2px;
   }
+
   .swiper-slide.navy {
     border-style: dashed;
     border-color: navy;
     border-width: 2px;
   }
+
   .swiper-slide.saddlebrown {
     border-style: dashed;
     border-color: saddlebrown;
     border-width: 2px;
   }
+
   .swiper-slide.fuchsia {
     border-style: dashed;
     border-color: fuchsia;
     border-width: 2px;
   }
+
   .swiper-slide.darkslategray {
     border-style: dashed;
     border-color: darkslategray;
     border-width: 2px;
   }
+
   .swiper-slide.yellowgreen {
     border-style: dashed;
     border-color: yellowgreen;
     border-width: 2px;
   }
+
   .swiper-slide.blue {
     border-style: dashed;
     border-color: blue;
     border-width: 2px;
   }
+
   .swiper-slide.mediumvioletred {
     border-style: dashed;
     border-color: mediumvioletred;
     border-width: 2px;
   }
+
   .swiper-slide.purple {
     border-style: dashed;
     border-color: purple;
     border-width: 2px;
   }
+
   .swiper-slide.lime {
     border-style: dashed;
     border-color: lime;
     border-width: 2px;
   }
+
   .swiper-slide.darkorange {
     border-style: dashed;
     border-color: darkorange;
     border-width: 2px;
   }
+
   .swiper-slide.teal {
     border-style: dashed;
     border-color: teal;
     border-width: 2px;
   }
+
   .swiper-slide.crimson {
     border-style: dashed;
     border-color: crimson;
     border-width: 2px;
   }
+
   .swiper-slide.darkviolet {
     border-style: dashed;
     border-color: darkviolet;
     border-width: 2px;
   }
+
   .swiper-slide.darkolivegreen {
     border-style: dashed;
     border-color: darkolivegreen;
     border-width: 2px;
   }
+
   .swiper-slide.steelblue {
     border-style: dashed;
     border-color: steelblue;
     border-width: 2px;
   }
+
   .swiper-slide.aqua {
     border-style: dashed;
     border-color: aqua;
@@ -437,7 +644,8 @@ input[type="checkbox"].markerlist:checked + label.check > div {
   }
 }
 
-.base-swiper .swiper-slide img, .overlay-swiper .swiper-slide img {
+.base-swiper .swiper-slide img,
+.overlay-swiper .swiper-slide img {
   position: absolute;
   top: 0;
   right: 0;
@@ -447,7 +655,8 @@ input[type="checkbox"].markerlist:checked + label.check > div {
   z-index: 0;
 }
 
-.base-swiper .swiper-slide div, .overlay-swiper .swiper-slide div {
+.base-swiper .swiper-slide div,
+.overlay-swiper .swiper-slide div {
   font-size: 1em;
   position: absolute;
   right: 0;
@@ -458,12 +667,16 @@ input[type="checkbox"].markerlist:checked + label.check > div {
   color: white;
   background-color: rgba(32, 32, 32, 0.5);
 }
-.base-swiper .swiper-slide div.minimize, .overlay-swiper .swiper-slide div.minimize {
+
+.base-swiper .swiper-slide div.minimize,
+.overlay-swiper .swiper-slide div.minimize {
   font-size: .8em;
 }
 
 .single-map {
-  .swiper-left-icon, .swiper-right-icon {
+
+  .swiper-left-icon,
+  .swiper-right-icon {
     display: none;
   }
 }
@@ -511,32 +724,58 @@ input[type="checkbox"].markerlist:checked + label.check > div {
   bottom: calc(115px + .5em + env(safe-area-inset-bottom));
 }
 
-.ol-border, .ol-hide-marker {
+.ol-border,
+.ol-hide-marker,
+.ol-marker-list {
   right: .5em;
   right: calc(.5em + constant(safe-area-inset-right));
   right: calc(.5em + env(safe-area-inset-right));
   bottom: calc(105px + .5em);
 }
 
-&.ol-touch .ol-border, &.ol-touch .ol-hide-marker {
+&.ol-touch .ol-border,
+&.ol-touch .ol-hide-marker,
+&.ol-touch .ol-marker-list {
   bottom: calc(115px + .5em);
   bottom: calc(115px + .5em + constant(safe-area-inset-bottom));
   bottom: calc(115px + .5em + env(safe-area-inset-bottom));
 }
 
-&.enable_border .ol-hide-marker {
+&.enable_border .ol-hide-marker,
+&.enable_border .ol-marker-list,
+&.enable_hide_marker .ol-marker-list {
   right: .5em;
   right: calc(.5em + constant(safe-area-inset-right));
   right: calc(.5em + env(safe-area-inset-right));
   bottom: calc(145px + .5em);
 }
 
-&.enable_border.ol-touch .ol-hide-marker {
+&.enable_border.ol-touch .ol-hide-marker,
+&.enable_border.ol-touch .ol-marker-list,
+&.enable_hide_marker.ol-touch .ol-marker-list {
   bottom: calc(165px + .5em);
   bottom: calc(165px + .5em + constant(safe-area-inset-bottom));
   bottom: calc(165px + .5em + env(safe-area-inset-bottom));
 }
 
+&.enable_border.enable_hide_marker .ol-marker-list {
+  right: .5em;
+  right: calc(.5em + constant(safe-area-inset-right));
+  right: calc(.5em + env(safe-area-inset-right));
+  bottom: calc(185px + .5em);
+}
+
+&.enable_border.enable_hide_marker.ol-touch .ol-marker-list {
+  bottom: calc(215px + .5em);
+  bottom: calc(215px + .5em + constant(safe-area-inset-bottom));
+  bottom: calc(215px + .5em + env(safe-area-inset-bottom));
+}
+
+
+
+
+
+
 .ol-copyright {
   right: .5em;
   right: calc(.5em + constant(safe-area-inset-right));
@@ -573,7 +812,8 @@ input[type="checkbox"].markerlist:checked + label.check > div {
   display: none;
 }
 
-&.no_poi .ol-hide-marker {
+&.no_poi .ol-hide-marker,
+&.no_poi .ol-marker-list {
   display: none;
 }
 
@@ -584,70 +824,216 @@ input[type="checkbox"].markerlist:checked + label.check > div {
   background-color: rgba(120, 5, 8, .2);
 }
 
-.ol-control.disable button:focus, .ol-control.disable button:hover,
-&.show-border .ol-control.ol-border button:focus, &.show-border .ol-control.ol-border button:hover,
-&.hide-marker .ol-control.ol-hide-marker button:focus, &.hide-marker .ol-control.ol-hide-marker button:hover{
-  color: rgba(255, 255, 255, .7);
-  background-color: rgba(120, 5, 8, .2)
+@media (hover: hover) {
+
+  .ol-control.disable button:focus,
+  .ol-control.disable button:hover,
+  &.show-border .ol-control.ol-border button:focus,
+  &.show-border .ol-control.ol-border button:hover,
+  &.hide-marker .ol-control.ol-hide-marker button:focus,
+  &.hide-marker .ol-control.ol-hide-marker button:hover {
+    color: rgba(255, 255, 255, .7);
+    background-color: rgba(120, 5, 8, .2)
+  }
+}
+
+@media (hover: none) {
+
+  .ol-control.disable button:focus,
+  .ol-control.disable button:active,
+  &.show-border .ol-control.ol-border button:focus,
+  &.show-border .ol-control.ol-border button:active,
+  &.hide-marker .ol-control.ol-hide-marker button:focus,
+  &.hide-marker .ol-control.ol-hide-marker button:active {
+    color: rgba(255, 255, 255, .7);
+    background-color: rgba(120, 5, 8, .2)
+  }
 }
 
 .ol-control button {
   height: 2.0625em;
   width: 2.0625em;
+  color: rgba(255, 255, 255);
   background-color: rgba(120, 5, 8, .5);
 }
 
-.ol-slidercommon {
+.ol-slidernew {
   display: none;
 }
 
-&.with-opacity .ol-slidercommon {
-  display: block;
+&.with-opacity .ol-slidernew {
+  appearance: none;
   bottom: .5em;
   bottom: calc(.5em + constant(safe-area-inset-bottom));
   bottom: calc(.5em + env(safe-area-inset-bottom));
   left: calc(50% - 80px);
   width: 160px;
   height: 25px;
-  padding: 0;
+  background: rgba(255, 255, 255, .5);
   border: 2px solid #666666;
+  border-radius: 4px;
+
+  &[disabled] {
+    background: rgba(255, 255, 255, .7);
+  }
 }
 
 @media screen and (max-width: 640px) {
-  &.with-opacity .ol-slidercommon {
+  &.with-opacity .ol-slidernew {
     left: 37.5%;
     width: 25%;
   }
 }
 
 @media screen and (max-width: 320px) {
-  &.with-opacity .ol-slidercommon {
+  &.with-opacity .ol-slidernew {
     left: 120px;
     width: 80px;
   }
 }
 
-&.with-opacity .ol-slidercommon button {
-  position: relative;
+&.with-opacity .ol-slidernew::-webkit-slider-thumb {
+  appearance: none;
   width: 20px;
   height: 25px;
-  margin-left: -2px;
-  margin-right: 2px;
-  margin-top: -2px;
+  background-color: rgba(120, 5, 8, 0.5);
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+
+  &[disabled] {
+    background-color: rgba(120, 5, 8, 0.2);
+  }
 }
 
-&.with-opacity .ol-slidercommon-thumb {
-  height: 15px;
-  width: 15px;
-  margin: 0;
-  filter: none;
+&.with-opacity .ol-slidernew::-moz-range-thumb {
+  appearance: none;
+  width: 20px;
+  height: 25px;
+  background-color: rgba(120, 5, 8, 0.5);
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+
+  &[disabled] {
+    background-color: rgba(120, 5, 8, 0.2);
+  }
 }
 
-&.with-opacity .ol-slidercommon.disable button {
-  color: rgba(255, 255, 255, .7);
-  background-color: rgba(120, 5, 8, .2);
+@media (hover: hover) {
+  &.with-opacity .ol-slidernew:not([disabled])::-webkit-slider-thumb:hover {
+    background-color: rgba(120, 5, 8, 0.7);
+  }
+
+  &.with-opacity .ol-slidernew:not([disabled])::-moz-range-thumb:hover {
+    background-color: rgba(120, 5, 8, 0.7);
+  }
 }
 
-.ol-control button:focus, .ol-control button:hover {
-  background-color: rgba(120, 5, 8, .7)
+@media (hover: none) {
+  &.with-opacity .ol-slidernew:not([disabled])::-webkit-slider-thumb:active {
+    background-color: rgba(120, 5, 8, 0.7);
+  }
+
+  &.with-opacity .ol-slidernew:not([disabled])::-moz-range-thumb:active {
+    background-color: rgba(120, 5, 8, 0.7);
+  }
+}
+
+/* Scrollable modal support */
+.modal-dialog {
+  height: calc(100% - 60px);
+  margin: 30px auto;
+}
+
+.modal-content {
+  max-height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.modal-body {
+  overflow-y: auto;
+}
+
+
+/* Share Modal Styles */
+.modal_share .modal-body {
+  text-align: center;
+}
+
+.share_container {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.share_section {
+  background: #f9f9f9;
+  padding: 15px;
+  border-radius: 8px;
+}
+
+.share_section h3 {
+  font-size: 1.1em;
+  margin-bottom: 15px;
+  text-align: left;
+  border-bottom: 1px solid #ddd;
+  padding-bottom: 5px;
+}
+
+.share_buttons {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 15px;
+}
+
+.share_buttons button {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 8px 12px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  background: white;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.share_buttons button:hover {
+  background: #f0f0f0;
+}
+
+.qr_code_container {
+  display: flex;
+  justify-content: center;
+  margin-top: 10px;
+}
+
+.qr_code_container canvas,
+.qr_code_container img {
+  border: 1px solid #ddd;
+  padding: 5px;
+  background: white;
+  max-width: 100%;
+}
+
+/* Custom Toast Styles */
+.custom-toast {
+  position: fixed;
+  top: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: rgba(0, 0, 0, 0.8);
+  color: white;
+  padding: 10px 20px;
+  border-radius: 4px;
+  z-index: 9999;
+  opacity: 0;
+  transition: opacity 0.3s ease-in-out;
+  pointer-events: none;
+}
+
+.custom-toast.show {
+  opacity: 1;
 }